/* ============================================================
   Stepup v2 components — mobile-first funnel upgrade
   Loaded AFTER styles.css on: index, index-ar, pricing, pricing-ar
   Brand tokens come from styles.css :root (—brand #007994 etc.)
   ============================================================ */

/* ---------- Trust line under hero CTAs ---------- */
.suh-trust{display:flex;align-items:center;justify-content:center;gap:18px;flex-wrap:wrap;margin-top:18px;font-size:13px;line-height:18px;color:var(--secondary);font-weight:600}
.suh-trust .suh-trust-item{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.suh-trust svg{flex:0 0 auto;width:14px;height:14px;color:var(--brand)}
@media (max-width:575.98px){.suh-trust{gap:10px 14px;font-size:12px;margin-top:14px}}

/* ---------- Channel chips ---------- */
.suh-chips{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:8px;margin:0 0 18px}
.suh-chip{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:999px;background:rgba(255,255,255,.72);border:1px solid var(--neutral-200);backdrop-filter:blur(6px);font-size:12.5px;font-weight:600;color:var(--neutral-700);white-space:nowrap}
.suh-chip svg{width:15px;height:15px;flex:0 0 auto}
@media (max-width:575.98px){.suh-chip{padding:5px 10px;font-size:11.5px}.suh-chips{gap:6px;margin-bottom:14px}}

/* ---------- Hero chat demo ---------- */
.suh-hero-demo{margin:34px auto 0;max-width:400px;width:100%;position:relative;z-index:5}
@media (max-width:575.98px){.suh-hero-demo{margin-top:26px;max-width:340px}}

.suh-phone{background:#fff;border:1px solid var(--neutral-200);border-radius:22px;box-shadow:0 24px 60px -18px rgba(0,59,73,.28),0 6px 18px -8px rgba(0,59,73,.14);overflow:hidden;text-align:start}
.suh-phone-head{display:flex;align-items:center;gap:10px;padding:12px 16px;background:linear-gradient(135deg,#007994 0%,#00566A 100%)}
.suh-avatar{width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.18);border:1.5px solid rgba(255,255,255,.55);display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:15px;font-family:Poppins,ui-sans-serif,system-ui,sans-serif;flex:0 0 auto}
.suh-head-txt{display:flex;flex-direction:column;min-width:0;flex:1}
.suh-head-txt strong{color:#fff;font-size:14px;line-height:19px;font-weight:600;font-family:Poppins,ui-sans-serif,system-ui,sans-serif}
.suh-head-txt em{font-style:normal;color:rgba(255,255,255,.78);font-size:11.5px;line-height:15px;display:inline-flex;align-items:center;gap:5px}
.suh-head-txt em::before{content:"";width:7px;height:7px;border-radius:50%;background:#4ade80;box-shadow:0 0 0 3px rgba(74,222,128,.25);display:inline-block}
.suh-head-badge{flex:0 0 auto;display:flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;background:rgba(255,255,255,.14)}
.suh-head-badge svg{width:17px;height:17px;color:#fff}

.suh-phone-body{display:flex;flex-direction:column;gap:9px;padding:16px 14px 18px;background:linear-gradient(180deg,#F6F8F9 0%,#EBEFF1 100%);min-height:264px}
.suh-msg{max-width:82%;padding:9px 13px;font-size:13.5px;line-height:19.5px;border-radius:14px;position:relative;word-break:break-word}
.suh-msg.in{align-self:flex-start;background:#fff;color:var(--ink);border:1px solid var(--neutral-200);border-start-start-radius:4px}
.suh-msg.out{align-self:flex-end;background:linear-gradient(135deg,#007994,#00566A);color:#fff;border-start-end-radius:4px}
.suh-msg.out strong{font-weight:700;color:#fff}
.suh-msg .suh-time{display:block;font-size:10px;opacity:.62;margin-top:3px;text-align:end}

/* typing indicator (appears, then swapped for the reply) */
.suh-typing{align-self:flex-end;display:inline-flex;gap:4px;padding:12px 15px;background:linear-gradient(135deg,#007994,#00566A);border-radius:14px;border-start-end-radius:4px}
/* finite (6 cycles ≈ the visible window) so nothing keeps animating after the demo */
.suh-typing i{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.85);animation:suhDot 1.1s 6 ease-in-out}
.suh-typing i:nth-child(2){animation-delay:.18s}
.suh-typing i:nth-child(3){animation-delay:.36s}
@keyframes suhDot{0%,60%,100%{transform:translateY(0);opacity:.55}30%{transform:translateY(-4px);opacity:1}}

/* confirmation toast overlapping card bottom */
.suh-toast{display:flex;align-items:center;gap:10px;margin:-16px auto 0;position:relative;z-index:6;width:max-content;max-width:92%;padding:10px 16px;background:#fff;border:1px solid var(--neutral-200);border-radius:14px;box-shadow:0 14px 34px -12px rgba(0,59,73,.30);font-size:12.5px;font-weight:600;color:var(--ink);text-align:start}
.suh-toast .suh-toast-ic{width:26px;height:26px;border-radius:50%;background:#ECFDF5;color:#10B981;display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.suh-toast .suh-toast-ic svg{width:14px;height:14px}
.suh-toast em{font-style:normal;display:block;font-weight:400;color:var(--secondary);font-size:11px;line-height:14px}

/* entrance sequence — plays once, content stays */
.suh-seq{opacity:0;transform:translateY(10px) scale(.98);animation:suhIn .5s cubic-bezier(.2,.8,.3,1) forwards}
.suh-seq.s1{animation-delay:.5s}
.suh-seq.s2{animation-delay:1.5s}
.suh-seq.s3{animation-delay:2.7s}
.suh-seq.s5{animation-delay:5.2s}
.suh-seq.s6{animation-delay:6.2s}
@keyframes suhIn{to{opacity:1;transform:translateY(0) scale(1)}}
/* typing: visible only between replies (3.6s → 5.2s) */
.suh-typing{opacity:0;animation:suhTyping 1.8s linear 3.5s forwards}
@keyframes suhTyping{0%{opacity:0;height:auto}8%{opacity:1}86%{opacity:1}100%{opacity:0;height:0;padding-top:0;padding-bottom:0;margin-top:-9px;overflow:hidden}}
@media (prefers-reduced-motion:reduce){
  .suh-seq{animation:none;opacity:1;transform:none}
  .suh-typing{display:none;animation:none}
  .suh-typing i{animation:none}
}

/* ---------- Honest capability rows (about section) ---------- */
/* .review-box is a LIGHT card (--neutral-100) — text must be dark. */
.suh-cap-list{display:flex;flex-direction:column;gap:10px;margin-top:4px}
.suh-cap{display:flex;align-items:center;gap:9px;font-size:14px;line-height:20px;font-weight:600;color:var(--neutral-700);text-align:start}
.suh-cap svg{width:16px;height:16px;flex:0 0 auto;color:var(--success)}

/* About heading: .text-gradient-2 fades to fully transparent at the bottom, which
   makes the second line of a two-line heading unreadable (worst in Arabic).
   Scoped to the about section: use the horizontal dark gradient instead. */
.section-about-us .heading-title.text-gradient-2{background:linear-gradient(95.5deg,#61666a 1.91%,#292c2e 43.92%);-webkit-background-clip:text;background-clip:text}

/* ---------- Pricing page: compact hero ---------- */
.section-hero.v2 .content-wrap.suh-compact{padding:150px 0 70px}
@media (max-width:991px){.section-hero.v2 .content-wrap.suh-compact{padding:120px 0 48px}}
@media (max-width:767px){
  .section-hero.v2 .content-wrap.suh-compact{padding:96px 0 28px}
  .section-hero.v2 .content-wrap.suh-compact .title{font-size:34px;line-height:42px}
  /* pricing page: tighten the second heading block so plans arrive sooner */
  .section-hero.v2~.box-white .section-pricing .heading-section{margin-bottom:28px}
}
.section-hero.v2 .content-wrap.suh-compact .text{margin-top:14px}

/* ---------- Compare table: mobile-safe scroll + sticky feature col ---------- */
.suh-table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--neutral-200);border-radius:14px;background:#fff}
.suh-table-wrap table{min-width:560px;margin:0}
.suh-table-wrap th,.suh-table-wrap td{white-space:nowrap;font-size:14px}
.suh-table-wrap td:first-child,.suh-table-wrap th:first-child{position:sticky;inset-inline-start:0;background:#fff;z-index:2;white-space:normal;min-width:150px;box-shadow:4px 0 8px -6px rgba(14,20,23,.18);font-weight:600}
[dir=rtl] .suh-table-wrap td:first-child,[dir=rtl] .suh-table-wrap th:first-child{box-shadow:-4px 0 8px -6px rgba(14,20,23,.18)}
.suh-table-wrap thead th{background:var(--neutral-50);font-family:Poppins,ui-sans-serif,system-ui,sans-serif;font-weight:600}
.suh-table-wrap tbody tr:nth-child(even) td{background:var(--neutral-50)}
.suh-table-wrap tbody tr:nth-child(even) td:first-child{background:var(--neutral-50)}
/* scroll hint shadow on the trailing edge */
.suh-table-hint{display:none;text-align:center;font-size:12px;color:var(--secondary);margin-top:8px}
@media (max-width:767px){.suh-table-hint{display:block}}

/* ---------- Landing mobile condensation ---------- */
@media (max-width:767px){
  /* landing hero only (pricing/other pages use .v2): pull the demo toward the fold */
  .section-hero:not(.v2) .content-wrap{padding:104px 0 52px}
  .section-hero:not(.v2) .content-wrap .title{margin-bottom:14px}
  .suh-hero-demo{margin-top:22px}
  /* featured-works: keep image + description, drop meta rows + fake pagination */
  .section-featured-works .grid-text .item:nth-child(n+2){display:none}
  .section-featured-works .featured-works-item .content .pagi-dot{display:none}
  .section-featured-works .featured-works-item .content{padding-top:16px}
  .section-featured-works .featured-works-item .content .bot{gap:10px}
  /* hero bg: fixed attachment causes mobile repaint jank */
  .hero-image{background-attachment:scroll}
}

/* pricing trust note */
.suh-plans-note{text-align:center;margin-top:22px;font-size:13.5px;color:var(--secondary);font-weight:600}
.suh-plans-note a{color:var(--brand);font-weight:700}