/* ── Design tokens: mirrored from mobile/src/theme/tokens.ts so the landing
      page and the app are visibly the same product.

      THEMING CONTRACT
      1. bare :root is the complete LIGHT palette. Every colour is defined
         here, so nothing lives only inside a media query.
      2. the prefers-color-scheme block is guarded with
         :not([data-theme="light"]) — a reader who forces light wins over a
         dark OS.
      3. :root[data-theme="dark"] repeats the same declarations, later in the
         sheet — a reader who forces dark wins over a light OS.
      Both overrides are specificity (0,1,1) against :root's (0,1,0), so no
      !important is needed anywhere. ───────────────────────────────────── */
:root{
  /* Raw scale — theme-independent, never overridden. */
  --brand-50:#EFF5FF; --brand-100:#DBE8FE; --brand-200:#BFD7FE; --brand-400:#609AFA;
  --brand-500:#2D73FD; --brand-600:#1A56E8; --brand-700:#0736A8; --brand-800:#1E3CAF; --brand-950:#172554;
  --gold-300:#FCD34D; --gold-400:#FBBF24; --gold-500:#FEAF04; --gold-700:#B45309; --gold-800:#92400E;
  --green-400:#4ADE80; --green-500:#22C55E; --green-600:#16A34A; --green-700:#15803D; --green-800:#166534;
  --n-0:#FFFFFF; --n-50:#F7F9FC; --n-100:#EEF2F7; --n-200:#E2E8F0; --n-300:#CBD5E1;
  --n-400:#94A3B8; --n-500:#64748B; --n-600:#475569; --n-800:#1E293B; --n-900:#0F172A; --n-950:#080D1A;

  /* ── LIGHT theme ──────────────────────────────────────────────────────
     Designed, not de-saturated: a cool paper ground, pure-white cards so
     they lift off it, and a slightly bluer band colour so the alternating
     sections read as deliberate stripes rather than dirty white.
     Contrast (measured against the surface each token actually sits on):
       text  #0F172A on #F6F9FD ......... 16.3:1
       text-2 #475569 on #F6F9FD ......... 7.3:1
       text-3 #64748B on #F6F9FD ......... 4.8:1
       primary #1A56E8 on #FFFFFF ........ 5.9:1
       accent-ink #92400E on #FFFBEB ..... 6.8:1  (gold-500 itself is 1.8:1
         on white — it is a fill colour only, never a text colour)
       green-ink #166534 on the green tint 6.3:1
       #fff on primary-solid #1A56E8 ..... 5.9:1 */
  --bg:#F6F9FD; --surface:var(--n-0); --surface-alt:#ECF1F9;
  --text:var(--n-900); --text-2:var(--n-600); --text-3:var(--n-500);
  --border:#DEE7F2;
  --primary:var(--brand-600);            /* links, icons, kickers */
  --primary-solid:var(--brand-600);      /* filled buttons + badges, always on #fff */
  --primary-solid-h:var(--brand-700);
  --primary-soft:var(--brand-50);
  --accent:var(--gold-500);              /* fills and glows only */
  --accent-ink:var(--gold-800);          /* the readable gold */
  --accent-soft:#FFFBEB;
  --green-ink:var(--green-800);          /* green that survives a white page */
  --tick:var(--green-700);
  --pill-green:var(--green-700);
  --muted-ink:var(--n-500);              /* the struck-through plan rows */
  --grad-a:var(--brand-500); --grad-b:var(--brand-800);
  --device-a:#2b3648; --device-b:#0d1420;

  --r-sm:12px; --r-md:16px; --r-lg:22px; --r-xl:28px; --r-2xl:36px; --r-pill:999px;
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px; --sp-6:24px;
  --sp-8:32px; --sp-10:40px; --sp-12:48px; --sp-16:64px; --sp-20:80px; --sp-24:96px;

  --shadow-sm:0 2px 8px rgba(15,23,42,.05);
  --shadow-md:0 6px 20px rgba(15,23,42,.07);
  --shadow-lg:0 14px 40px rgba(15,23,42,.10);
  --shadow-xl:0 24px 64px rgba(15,23,42,.13);
  --shadow-brand:0 16px 44px rgba(37,92,235,.28);

  --maxw:1160px;
  --font:'Cairo','IBM Plex Sans Arabic','Noto Naskh Arabic',system-ui,-apple-system,'Segoe UI',sans-serif;

  color-scheme:light dark;
}

/* Dark, when the system asks for it AND the reader has not forced light. */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:var(--n-950); --surface:#111C31; --surface-alt:#0B1424;
    --text:var(--n-50); --text-2:var(--n-300); --text-3:var(--n-400);
    --border:rgba(148,163,184,.18);
    --primary:var(--brand-400);
    --primary-solid:var(--brand-600); --primary-solid-h:var(--brand-500);
    --primary-soft:rgba(96,154,250,.12);
    --accent:var(--gold-400); --accent-ink:var(--gold-300); --accent-soft:rgba(251,191,36,.12);
    --green-ink:var(--green-400); --tick:var(--green-400); --pill-green:var(--green-700);
    --muted-ink:var(--n-400);
    --grad-a:var(--brand-400); --grad-b:#A5C8FF;
    --shadow-sm:0 1px 3px rgba(0,0,0,.4); --shadow-md:0 4px 12px rgba(0,0,0,.45);
    --shadow-lg:0 8px 24px rgba(0,0,0,.5); --shadow-xl:0 16px 48px rgba(0,0,0,.55);
  }
}
/* Dark, forced by the reader — identical declarations, later in the sheet so
   it also beats a light OS. Keep the two blocks in sync. */
:root[data-theme="dark"]{
  --bg:var(--n-950); --surface:#111C31; --surface-alt:#0B1424;
  --text:var(--n-50); --text-2:var(--n-300); --text-3:var(--n-400);
  --border:rgba(148,163,184,.18);
  --primary:var(--brand-400);
  --primary-solid:var(--brand-600); --primary-solid-h:var(--brand-500);
  --primary-soft:rgba(96,154,250,.12);
  --accent:var(--gold-400); --accent-ink:var(--gold-300); --accent-soft:rgba(251,191,36,.12);
  --green-ink:var(--green-400); --tick:var(--green-400); --pill-green:var(--green-700);
  --muted-ink:var(--n-400);
  --grad-a:var(--brand-400); --grad-b:#A5C8FF;
  --shadow-sm:0 1px 3px rgba(0,0,0,.4); --shadow-md:0 4px 12px rgba(0,0,0,.45);
  --shadow-lg:0 8px 24px rgba(0,0,0,.5); --shadow-xl:0 16px 48px rgba(0,0,0,.55);
}
/* UA widgets — scrollbars, form controls, the canvas behind the page — must
   follow the forced choice too, or they fight the palette. */
:root[data-theme="light"]{color-scheme:light}
:root[data-theme="dark"]{color-scheme:dark}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
}
body{
  margin:0;font-family:var(--font);background:var(--bg);color:var(--text);
  line-height:1.75;font-size:16px;-webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img,svg{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{margin:0;line-height:1.3;letter-spacing:-.02em;font-weight:800}
p{margin:0}
ul{margin:0;padding:0;list-style:none}
:focus-visible{outline:3px solid var(--primary);outline-offset:3px;border-radius:6px}

/* ── Bilingual switching — the same mechanism as privacy.html / terms.html.
      Arabic is the document default and is what a reader with JavaScript
      disabled sees; nothing is hidden behind script.
      NOTE: display:revert rolls back to the UA value, so a [data-l] wrapper
      must never be an element whose display comes from author CSS. Every
      wrapper below is a plain <span>/<div>/<p>. ────────────────────────── */
[data-l]{display:none}
html[lang="ar"] [data-l="ar"]{display:revert}
html[lang="en"] [data-l="en"]{display:revert}

.skip{position:absolute;inset-inline-start:-9999px;top:0;background:var(--primary-solid);color:#fff;padding:12px 20px;z-index:200;border-radius:0 0 var(--r-md) 0}
.skip:focus{inset-inline-start:0}

.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--sp-5)}
.section{padding-block:var(--sp-24)}
@media (max-width:768px){.section{padding-block:var(--sp-16)}}

/* ── Inner pages ────────────────────────────────────────────────────
   Everything below is used only by the generated pages (features, pricing,
   how-it-works, blog, faq, about, contact). It lives in the homepage's sheet
   because scripts/build-site.mjs lifts this <style> block verbatim — one
   stylesheet, one place to change a colour. */

/* Page masthead. Shorter than the homepage hero: an inner page has to get out
   of the way of its own content. */
.phero{padding-block:var(--sp-16) var(--sp-10);text-align:center;
  background:linear-gradient(180deg,color-mix(in srgb,var(--primary) 7%,transparent),transparent)}
.phero h1{font-size:clamp(30px,4.6vw,50px);font-weight:900;letter-spacing:-.035em;line-height:1.12;margin-bottom:var(--sp-4)}
.phero p{color:var(--text-2);font-size:clamp(15px,1.8vw,18px);line-height:1.85;max-width:62ch;margin-inline:auto}
@media (max-width:768px){.phero{padding-block:var(--sp-10) var(--sp-6)}}

/* Long-form text. `max-width` is in ch so the measure stays ~70 characters at
   any font size — the single biggest lever on whether an article gets read. */
.prose{max-width:70ch;margin-inline:auto;font-size:16.5px;line-height:2}
.prose h2{font-size:clamp(21px,2.6vw,28px);font-weight:800;letter-spacing:-.02em;margin:var(--sp-10) 0 var(--sp-3)}
.prose h3{font-size:clamp(17px,2vw,21px);font-weight:800;margin:var(--sp-7) 0 var(--sp-2)}
.prose p{color:var(--text-2);margin-bottom:var(--sp-4)}
.prose ul,.prose ol{color:var(--text-2);margin:0 var(--sp-5) var(--sp-5) 0;display:grid;gap:var(--sp-2)}
.prose li{padding-inline-start:var(--sp-1)}
.prose strong{color:var(--text);font-weight:700}
.prose blockquote{margin:var(--sp-6) 0;padding:var(--sp-4) var(--sp-5);border-inline-start:3px solid var(--primary);
  background:var(--surface-alt);border-radius:var(--r-md);color:var(--text-2)}

/* Article cards on the blog index. */
.posts{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:var(--sp-5)}
.post{display:flex;flex-direction:column;gap:var(--sp-2);background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r-lg);padding:var(--sp-6);text-decoration:none;color:inherit;
  transition:transform .18s,box-shadow .18s,border-color .18s}
.post:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);border-color:color-mix(in srgb,var(--primary) 40%,var(--border))}
.post h3{font-size:18px;font-weight:800;line-height:1.5}
.post p{color:var(--text-2);font-size:14.5px;line-height:1.8}
.post .meta{color:var(--text-3);font-size:12.5px;font-weight:600}

/* Disclosure FAQ. <details> gives keyboard and screen-reader behaviour for
   free; a div-and-JS accordion has to reimplement all of it and usually does
   not. */
.qa{max-width:78ch;margin-inline:auto;display:grid;gap:var(--sp-3)}
.qa details{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);overflow:hidden}
.qa summary{cursor:pointer;padding:var(--sp-4) var(--sp-5);font-weight:700;font-size:15.5px;
  display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);list-style:none}
.qa summary::-webkit-details-marker{display:none}
.qa summary::after{content:"+";font-size:20px;font-weight:800;color:var(--primary);flex:0 0 auto;transition:transform .2s}
.qa details[open] summary::after{transform:rotate(45deg)}
.qa .a{padding:0 var(--sp-5) var(--sp-5);color:var(--text-2);font-size:15px;line-height:1.9}

/* Contact form. */
.form{max-width:44rem;margin-inline:auto;display:grid;gap:var(--sp-4)}
.form .row{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-4)}
@media (max-width:620px){.form .row{grid-template-columns:1fr}}
.form label{display:block;font-size:13.5px;font-weight:700;margin-bottom:6px}
.form input,.form textarea,.form select{width:100%;padding:13px 15px;font:inherit;font-size:15px;color:var(--text);
  background:var(--surface);border:1.5px solid var(--border);border-radius:var(--r-md);outline:none;
  transition:border-color .18s}
.form input:focus,.form textarea:focus,.form select:focus{border-color:var(--primary)}
.form textarea{min-height:150px;resize:vertical}
.form .note{font-size:13px;color:var(--text-3);line-height:1.75}
.form-msg{display:none;padding:13px 15px;border-radius:var(--r-md);font-size:14.5px;line-height:1.7}
.form-msg.show{display:block}
.form-msg.ok{background:rgba(21,128,61,.10);color:var(--green-ink);border:1px solid rgba(21,128,61,.28)}
.form-msg.err{background:rgba(220,38,38,.10);color:#DC2626;border:1px solid rgba(220,38,38,.28)}

/* ── Checkout (/checkout) ───────────────────────────────────────────── */
.co{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:var(--sp-8);align-items:start}
@media (max-width:900px){.co{grid-template-columns:1fr}}
.co [hidden],.co-result[hidden],#co-main[hidden]{display:none!important}
.co-form{max-width:none;margin:0;gap:var(--sp-6)}
.co-step{border:1px solid var(--border);border-radius:var(--r-lg);background:var(--surface);
  padding:var(--sp-6);margin:0;min-width:0;display:grid;gap:var(--sp-4)}
.co-step legend{font-weight:800;font-size:17px;padding-inline:var(--sp-2);display:flex;align-items:center;gap:var(--sp-2)}
.co-n{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:var(--r-pill);
  background:var(--primary-solid);color:#fff;font-size:13.5px;font-weight:800}
.co-plans{display:grid;gap:var(--sp-3)}
.co-group{font-size:13px;font-weight:700;color:var(--text-3);margin-top:var(--sp-2)}
.co-group:first-child{margin-top:0}
.form .co-plan{display:grid;grid-template-columns:auto 1fr auto;grid-template-areas:"r n p" "r m p";
  column-gap:var(--sp-3);row-gap:2px;align-items:center;margin:0;cursor:pointer;
  padding:var(--sp-4);border:1.5px solid var(--border);border-radius:var(--r-md);background:var(--surface);
  font-weight:400;transition:border-color .18s,background .18s}
.form .co-plan:hover{border-color:color-mix(in srgb,var(--primary) 45%,var(--border))}
.form .co-plan:has(input:checked){border-color:var(--primary);background:var(--primary-soft)}
.form .co-plan input,.form .co-agree input{grid-area:r;width:18px;height:18px;padding:0;margin:0;accent-color:var(--primary-solid);flex:none}
.co-plan-name{grid-area:n;font-weight:800;font-size:15.5px}
.co-plan-meta{grid-area:m;font-size:13px;color:var(--text-3)}
.co-plan-price{grid-area:p;font-size:14px;color:var(--text-2);white-space:nowrap}
.co-plan-price b{font-size:22px;font-weight:900;color:var(--text)}
.co-pop{display:inline-block;margin-inline-start:var(--sp-2);padding:2px 9px;border-radius:var(--r-pill);
  background:var(--accent-soft);color:var(--accent-ink);font-size:11.5px;font-weight:800;vertical-align:middle}
.co-who{font-size:15px;color:var(--text-2)}
.co-who strong{color:var(--text)}
.co-link{background:none;border:0;padding:0;font:inherit;font-size:14px;color:var(--primary);cursor:pointer;text-decoration:underline}
.form .note.co-tight,.co-sum .note.co-tight{margin:0}
.form .co-agree{display:flex;gap:var(--sp-3);align-items:flex-start;font-weight:500;font-size:14.5px;line-height:1.8;margin:0;cursor:pointer}
.form .co-agree input{margin-top:5px}
.co-pay{width:100%;justify-content:center}
.co-pay[disabled],#co-login[disabled]{opacity:.6;cursor:progress}
.co-sum{display:grid;gap:var(--sp-4);position:sticky;top:96px}
@media (max-width:900px){.co-sum{position:static}}
.co-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:var(--sp-6);display:grid;gap:var(--sp-3)}
.co-card h2{font-size:19px;font-weight:800}
.co-card h3{font-size:16px;font-weight:800}
.co-sum .note{font-size:13px;color:var(--text-3);line-height:1.75}
.co-dl{display:grid;gap:var(--sp-2);margin:0}
.co-dl div{display:flex;justify-content:space-between;gap:var(--sp-3);font-size:14.5px}
.co-dl dt{color:var(--text-3)}
.co-dl dd{margin:0;font-weight:700;text-align:end}
.co-dl .co-total{border-top:1px solid var(--border);padding-top:var(--sp-3);margin-top:var(--sp-1);font-size:16px}
.co-dl .co-total b{font-size:24px;font-weight:900}
.co-methods{display:grid;gap:var(--sp-2);margin:0;padding-inline-start:var(--sp-5);color:var(--text-2);font-size:14.5px}
.co-result-card{max-width:40rem;margin-inline:auto;text-align:center;padding:var(--sp-10) var(--sp-6)}
.co-result-card h2{font-size:clamp(22px,3vw,28px)}
.co-result-card.ok{border-color:rgba(21,128,61,.4)}
.co-result-card.ok h2{color:var(--green-ink)}
.co-result-card.err{border-color:rgba(220,38,38,.4)}
.co-result-card.err h2{color:#DC2626}
.co-result-card p{color:var(--text-2)}
.co-actions{display:flex;gap:var(--sp-3);justify-content:center;flex-wrap:wrap;margin-top:var(--sp-2)}
/* "Company details" / "what we sell" cards on /about. */
.about-facts{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-6);align-items:start}
@media (max-width:860px){.about-facts{grid-template-columns:1fr}}
.about-fact{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:var(--sp-6);display:grid;gap:var(--sp-4);min-width:0}
.about-fact h2{font-size:20px;font-weight:800}
.about-fact p,.about-fact li{color:var(--text-2);font-size:15px;line-height:1.85}
.about-fact ul{display:grid;gap:var(--sp-2);margin:0;padding-inline-start:var(--sp-5)}
.about-fact dl{display:grid;gap:var(--sp-3);margin:0}
.about-fact dl div{display:flex;justify-content:space-between;gap:var(--sp-4);font-size:15px;border-bottom:1px solid var(--border);padding-bottom:var(--sp-3)}
.about-fact dl div:last-child{border-bottom:0;padding-bottom:0}
.about-fact dt{color:var(--text-3)}
.about-fact dd{margin:0;font-weight:700;text-align:end;overflow-wrap:anywhere}
.about-links{display:flex;gap:var(--sp-3);flex-wrap:wrap}
/* Per-plan "buy" link on /pricing. */
.feat .buy{margin-top:var(--sp-4);width:100%;justify-content:center}

/* Two-column "what this is / who it is for" blocks. */
.split{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-8);align-items:start}
@media (max-width:860px){.split{grid-template-columns:1fr;gap:var(--sp-6)}}

/* ── Header ─────────────────────────────────────────────────────────── */
.hdr{position:sticky;top:0;z-index:100;backdrop-filter:saturate(180%) blur(14px);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  background:color-mix(in srgb,var(--bg) 82%,transparent);border-bottom:1px solid transparent;transition:border-color .2s}
.hdr.scrolled{border-bottom-color:var(--border)}
/* The header bar is wider than the article column.
   `--maxw` is 1160px, which is right for prose and too narrow for this row: at
   1160 the six nav links, the language pill, the theme button, the store link,
   four social icons and two CTAs do not fit, and the nav was silently squeezed
   51px until it sat on top of the wordmark. No viewport width fixed it, because
   the CAP was the constraint, not the screen.
   A full-bleed bar is not bound by the reading measure, so it gets its own. */
.hdr .wrap{max-width:1320px}
/* NEVER wraps. It used to (`flex-wrap:wrap`), which was reasonable when the
   row held a brand and two buttons — wrapping beats overflowing. But the row
   then gained a language pill, a theme pill, a social cluster and a sixth nav
   link, and wrapping stopped being a fallback and became the normal state: a
   two-storey header at EVERY width, with the navigation stranded on a line
   above its own controls.
   With nowrap, anything that does not fit has to be removed by a media query
   below rather than silently folded onto a second row — which forces the
   decision to be made deliberately, and visibly, once per breakpoint.
   scripts/probe-header.mjs measures the height at fourteen widths and fails
   the moment a second row appears. */
.hdr-in{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-4);
  min-height:68px;flex-wrap:nowrap;padding-block:8px}
/* `flex:0 0 auto` is load-bearing under the header's `flex-wrap:nowrap`.
   A flex child shrinks by default, and the brand was being squeezed until the
   wordmark wrapped underneath the mark — a two-line logo in a one-line header.
   The nav is the only thing allowed to give. */
.brand{display:flex;align-items:center;gap:var(--sp-3);font-weight:900;font-size:18px;
  flex:0 0 auto;white-space:nowrap}
.brand-alt{color:var(--text-3);font-weight:600;font-size:15px}
.brand-mark{width:38px;height:38px;border-radius:11px;flex:0 0 auto;
  background:linear-gradient(135deg,var(--brand-500),var(--brand-800));
  display:grid;place-items:center;color:#fff;font-size:19px;box-shadow:var(--shadow-brand)}
.nav{display:flex;align-items:center;justify-content:center;gap:var(--sp-6);
  flex:0 0 auto}
/* `nowrap` per link, and `flex:0 1 auto` on the nav rather than `1 1 auto`.
   Letting the nav grow-and-shrink freely squeezed the links until each
   two-word Arabic label broke over two lines — "أسئلة شائعة" and "تواصل معنا"
   stacked, which made the whole bar look like it had failed rather than like
   it was tight. A link is now indivisible: if the set no longer fits, the
   burger breakpoint below takes over instead of mangling the labels. */
.nav a{color:var(--text-2);font-size:15px;font-weight:600;white-space:nowrap;
  transition:color .15s}
.nav a:hover{color:var(--primary)}
/* Raised from 900px: the row now also carries two switchers, and Arabic sets
   wider than English — below this the nav would push the header to two rows. */
/* Seven links since "من نحن" joined; at the full gap they push the header
   past the viewport between the burger breakpoint and ~1330px. */
@media (max-width:1440px){.nav{gap:var(--sp-4)}}
@media (max-width:1180px){.nav{display:none}}
/* The switchers live here rather than inside .nav, because .nav is
   display:none below 1180px and a hidden language control would be a trap.
   Below 900px they move again — into the drawer, which is the only place with
   room. Duplicated in markup, driven by one script, so they cannot disagree. */
.hdr-tools{display:flex;align-items:center;gap:6px;flex-wrap:nowrap;flex:0 0 auto}
/* What is shed, and where it reappears — each step is one decision:
     < 1280px  the social cluster goes (it is in the drawer and the footer)
     <  900px  the language and theme switchers go (they are in the drawer)
     <  520px  the ghost "log in" goes (the primary CTA lands on the same /app)
               and the Latin half of the wordmark goes
   Nothing becomes unreachable at any width; it only moves. */
/* Scoped through .hdr-tools so these beat the .toggle.pill-sm base rules,
   which are declared further down the sheet, next to the plan cards. The
   .toggle component now has exactly two users — language and theme; the
   pricing switcher it was first written for went with the yearly plan. */
@media (max-width:520px){
  .hdr-tools .btn-ghost{display:none}
  .brand .brand-alt{display:none}
  .hdr-tools .btn-sm{padding-inline:var(--sp-3);font-size:14px}
  .hdr-tools .toggle.pill-sm button{font-size:12px;padding:5px 9px}
  .hdr-tools .toggle.theme-pill button{padding:5px 7px}
  .hdr-tools .toggle.theme-pill .icon{width:16px;height:16px}
}
@media (max-width:400px){
  .hdr-tools .toggle.pill-sm button{font-size:11.5px;padding:5px 7px}
  .hdr-tools .toggle.theme-pill button{padding:5px 6px}
}

/* ── Mobile navigation ──────────────────────────────────────────────────
   `.nav` is display:none below 1080px (above). For a long time nothing took
   its place, so a phone got a header with a logo, two switchers and one CTA —
   and no route to How it works, Features, Pricing, Blog, FAQ, About or
   Contact. The site had thirteen pages a phone could not reach.

   The button is hidden at exactly the width `.nav` reappears, so the two are
   never both present and never both absent. */
.nav-btn{display:none;align-items:center;justify-content:center;
  width:42px;height:42px;flex:0 0 auto;border:1px solid var(--border);border-radius:var(--r-sm);
  background:var(--surface);color:var(--text);cursor:pointer;
  transition:background .15s,border-color .15s}
.nav-btn:hover{border-color:var(--primary);color:var(--primary)}
.nav-btn .icon{width:22px;height:22px}
@media (max-width:1180px){.nav-btn{display:inline-flex}}

/* Above .hdr's z-index:100. The header is sticky and paints over anything
   below it, so at z-index 60 the drawer's own close button sat behind the
   header and could not be tapped. */
.nav-scrim{position:fixed;inset:0;z-index:110;background:rgb(8 13 26 / .55);
  opacity:0;transition:opacity .22s ease}
.nav-scrim.open{opacity:1}

/* `inset-inline-end` rather than `right`: the drawer slides in from the side
   the reader's language starts at, so it opens under the thumb in both
   directions instead of flying across the screen in Arabic. */
.drawer{position:fixed;z-index:111;inset-block:0;inset-inline-end:0;
  width:min(84vw,340px);display:flex;flex-direction:column;gap:var(--sp-2);
  padding:var(--sp-5);overflow-y:auto;overscroll-behavior:contain;
  background:var(--surface);border-inline-start:1px solid var(--border);
  box-shadow:-24px 0 60px rgb(8 13 26 / .28);
  transform:translateX(var(--drawer-out,100%));transition:transform .26s cubic-bezier(.32,.72,0,1)}
[dir="rtl"] .drawer{--drawer-out:-100%;box-shadow:24px 0 60px rgb(8 13 26 / .28)}
.drawer.open{transform:translateX(0)}
@media (prefers-reduced-motion:reduce){
  .drawer,.nav-scrim{transition:none}
}

.drawer-head{display:flex;align-items:center;justify-content:space-between;
  gap:var(--sp-3);padding-bottom:var(--sp-4);margin-bottom:var(--sp-2);
  border-bottom:1px solid var(--border)}
.drawer-title{font-weight:800;font-size:15px;color:var(--text-3)}

.drawer-nav{display:flex;flex-direction:column}
.drawer-nav a{display:block;padding:var(--sp-4) var(--sp-2);border-radius:var(--r-sm);
  font-size:17px;font-weight:700;color:var(--text);transition:background .15s,color .15s}
.drawer-nav a:hover,.drawer-nav a:focus-visible{background:var(--surface-alt);color:var(--primary)}
/* The page you are already on, marked by the drawer script. */
.drawer-nav a[aria-current="page"]{color:var(--primary);background:var(--surface-alt)}

.drawer-cta{display:flex;flex-direction:column;gap:var(--sp-3);
  margin-top:auto;padding-top:var(--sp-5);border-top:1px solid var(--border)}
.drawer-cta .btn{width:100%}

/* The scrim covers the page, so nothing behind it should scroll under it. */
body.nav-open{overflow:hidden}

/* A square icon button — the theme cycler, and anything else that is one
   glyph. 40px because that is the smallest comfortable touch target, even
   where the glyph inside is 18px. */
.icon-btn{display:inline-flex;align-items:center;justify-content:center;
  width:40px;height:40px;flex:0 0 auto;border:1px solid var(--border);
  border-radius:var(--r-sm);background:var(--surface);color:var(--text-2);
  cursor:pointer;transition:color .15s,border-color .15s,background .15s}
.icon-btn:hover{color:var(--primary);border-color:var(--primary)}
.icon-btn .icon{width:19px;height:19px}
/* The Play mark has its own fixed colours; the generic icon-btn hover
   recolour would tint them. Only the frame reacts. */
.store-mini:hover{color:inherit;border-color:var(--primary)}

/* The header sheds its cargo in three deliberate steps — see the note above. */
@media (max-width:1280px){
  .hdr-tools .social-hdr,
  .hdr-tools .store-mini{display:none}
}
@media (max-width:900px){
  .hdr-tools > .toggle,
  .hdr-tools > .icon-btn{display:none}
}

/* The switchers, once they have moved into the drawer. */
.drawer-tools{display:flex;align-items:center;justify-content:space-between;
  gap:var(--sp-3);padding-top:var(--sp-4);margin-top:var(--sp-2);
  border-top:1px solid var(--border)}
.drawer-tools .toggle{flex:1 1 auto}
.drawer-tools .toggle button{flex:1 1 auto}

/* ── Social accounts ────────────────────────────────────────────────────
   One component, three placements: the header bar, the mobile drawer, and the
   footer. Brand marks are solid fills, so they take `currentColor` and follow
   the theme rather than shipping two sets of artwork.

   Hit targets are 40px even where the glyph is 18px — these sit close together
   and the neighbouring one is always the wrong account to open. */
.social{display:flex;align-items:center;gap:var(--sp-2);flex-wrap:wrap}
.social a{display:inline-flex;align-items:center;justify-content:center;
  width:40px;height:40px;border-radius:var(--r-sm);
  border:1px solid var(--border);color:var(--text-2);background:transparent;
  transition:color .15s,border-color .15s,background .15s,transform .15s}
.social a:hover{color:var(--primary);border-color:var(--primary);background:var(--primary-soft);transform:translateY(-2px)}
@media (prefers-reduced-motion:reduce){.social a:hover{transform:none}}
.social .icon{width:18px;height:18px}
.social-sm a{width:38px;height:38px}
/* In the drawer the row sits under the two CTAs and needs air above it. */
.drawer-cta .social{justify-content:center;margin-top:var(--sp-2);padding-top:var(--sp-4);border-top:1px solid var(--border)}

/* The header row already carries a brand, two switchers and two CTAs. The
   social cluster is the first thing to go when space runs out — it is
   duplicated in the drawer and in the footer, so nothing becomes unreachable. */
.social-hdr a{width:34px;height:34px;border-color:transparent}
.social-hdr .icon{width:17px;height:17px}
@media (max-width:900px){.social-hdr{display:none}}

/* ── The rubric section ─────────────────────────────────────────────────
   Replaces the old `.trust` strip of four bare numbers. Cards rather than
   columns because each item now carries a sentence, and a sentence under a
   hairline divider reads as a footnote rather than a claim. */
.rubric{background:var(--surface-alt)}
.rubric-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp-5);margin-top:var(--sp-10)}
@media (max-width:1040px){.rubric-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.rubric-grid{grid-template-columns:1fr;max-width:400px;margin-inline:auto}}

.rubric-card{background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r-lg);padding:var(--sp-6);
  transition:transform .18s,box-shadow .18s,border-color .18s}
.rubric-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);border-color:var(--primary)}
@media (prefers-reduced-motion:reduce){.rubric-card:hover{transform:none}}
.rubric-ico{display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;border-radius:var(--r-sm);margin-bottom:var(--sp-4);
  background:var(--primary-soft);color:var(--primary)}
.rubric-ico .icon{width:22px;height:22px}
.rubric-card h3{font-size:18px;margin-bottom:var(--sp-2)}
.rubric-card p{color:var(--text-2);font-size:15px;line-height:1.8}

/* The numbers, demoted from headline to supporting strip. */
.rubric-facts{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp-6);
  margin-top:var(--sp-10);padding-top:var(--sp-8);border-top:1px solid var(--border);
  text-align:center}
@media (max-width:760px){.rubric-facts{grid-template-columns:repeat(2,1fr);gap:var(--sp-8) var(--sp-4)}}
.rubric-facts .stat{display:flex;flex-direction:column;align-items:center;gap:var(--sp-1)}
.rubric-facts .num{font-size:clamp(28px,3.2vw,36px);font-weight:800;color:var(--primary);
  letter-spacing:-.02em;line-height:1.1}
.rubric-facts .stat > span{font-size:14px;color:var(--text-3);max-width:20ch;line-height:1.6}

/* ── Store badges ───────────────────────────────────────────────────────
   One component used in three places: the "get the app" band, the footer,
   and the mobile drawer. Sized like the real store badges (the two-line
   "GET IT ON / Google Play" lockup) so it is recognised as one, because a
   badge people do not recognise is just a button.

   Fixed min-height and nowrap on the text: Arabic sets wider than the English
   these badges were designed around, and without them the second line wraps
   and the two badges end up different heights beside each other. */
.store-row{display:flex;flex-wrap:wrap;gap:var(--sp-3);margin-top:var(--sp-6)}
.store-badge{display:inline-flex;align-items:center;gap:var(--sp-3);
  min-height:58px;padding:0 var(--sp-5);border-radius:var(--r-sm);
  background:#0B1220;color:#fff;border:1px solid rgba(255,255,255,.22);
  transition:transform .16s,box-shadow .16s,border-color .16s}
.store-badge:hover{transform:translateY(-2px);border-color:rgba(255,255,255,.45);
  box-shadow:0 10px 26px rgb(8 13 26 / .35)}
@media (prefers-reduced-motion:reduce){.store-badge:hover{transform:none}}
/* On a dark page the near-black badge would vanish into the ground. */
:root[data-theme="dark"] .store-badge{background:#16223A;border-color:rgba(255,255,255,.28)}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .store-badge{background:#16223A;border-color:rgba(255,255,255,.28)}
}
.store-ico{width:26px;height:26px;flex:0 0 auto}
.store-ico-apple{color:#fff}
.store-txt{display:flex;flex-direction:column;line-height:1.25;white-space:nowrap}
.store-txt small{font-size:11.5px;font-weight:600;color:#C7D6EE;letter-spacing:.02em}
.store-txt strong{font-size:17px;font-weight:800;letter-spacing:-.01em}

/* ── "Get the app" band ─────────────────────────────────────────────── */
.getapp{background:var(--surface-alt)}
.getapp-in{display:grid;grid-template-columns:1.15fr .85fr;gap:var(--sp-12);align-items:center}
@media (max-width:900px){
  .getapp-in{grid-template-columns:1fr;gap:var(--sp-8)}
  .getapp-shot{order:-1;max-width:280px;margin-inline:auto}
}
.getapp-copy h2{font-size:clamp(26px,3.4vw,38px);margin:var(--sp-3) 0 var(--sp-4)}
.getapp-copy p{color:var(--text-2);font-size:17px;max-width:52ch}
.getapp-note{margin-top:var(--sp-4);font-size:13.5px;color:var(--text-3);max-width:52ch}
.getapp-shot img{width:100%;height:auto;border-radius:var(--r-lg);
  border:1px solid var(--border);box-shadow:var(--shadow-lg)}

/* Compact variants: the footer column and the drawer are both narrow. */
.store-row-sm{gap:var(--sp-2);margin-top:var(--sp-4)}
.store-row-sm .store-badge{min-height:48px;padding:0 var(--sp-4);gap:var(--sp-2)}
.store-row-sm .store-ico{width:21px;height:21px}
.store-row-sm .store-txt small{font-size:10px}
.store-row-sm .store-txt strong{font-size:14px}

/* ── Footer contact block ─────────────────────────────────────────────── */
.ftr-contact{display:flex;flex-direction:column;gap:var(--sp-2);margin-top:var(--sp-5);font-size:14.5px}
.ftr-contact li{display:flex;align-items:center;gap:var(--sp-3);color:var(--text-3)}
.ftr-contact .icon{width:17px;height:17px;flex:0 0 auto;color:var(--primary)}
.ftr-contact a{color:var(--text-2)}
.ftr-contact a:hover{color:var(--primary)}
.ftr-grid > div:first-child .social{margin-top:var(--sp-5)}

/* ── Contact page: the "other ways" cards ─────────────────────────────── */
.contact-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-5)}
@media (max-width:900px){.contact-cards{grid-template-columns:1fr;max-width:460px;margin-inline:auto}}
.ccard{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);
  padding:var(--sp-6);box-shadow:var(--shadow-sm)}
.ccard-ico{display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;border-radius:var(--r-sm);margin-bottom:var(--sp-4);
  background:var(--primary-soft);color:var(--primary)}
.ccard-ico .icon{width:22px;height:22px}
.ccard h3{font-size:17px;margin-bottom:var(--sp-2)}
.ccard p{font-size:15px;color:var(--text-2)}
.ccard a{color:var(--primary);font-weight:600}
.ccard-note{margin-top:var(--sp-2);font-size:13.5px;color:var(--text-3)}

/* reCAPTCHA's floating badge is fixed to the bottom corner, where on a phone it
   lands on top of the send button. Google permits hiding it only if the
   attribution below is shown instead — .recaptcha-note is that attribution and
   must not be removed. */
.grecaptcha-badge{visibility:hidden}
.recaptcha-note{font-size:13px;color:var(--text-3);margin-top:var(--sp-3)}
.recaptcha-note a{color:var(--text-2);text-decoration:underline}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-2);
  height:48px;padding-inline:var(--sp-6);border-radius:var(--r-md);border:0;cursor:pointer;
  font-family:inherit;font-size:16px;font-weight:700;transition:transform .15s,box-shadow .15s,background .15s;white-space:nowrap}
.btn:active{transform:scale(.97)}
.btn-primary{background:var(--primary-solid);color:#fff;box-shadow:var(--shadow-brand)}
.btn-primary:hover{background:var(--primary-solid-h)}
.btn-ghost{background:transparent;color:var(--text);border:1.5px solid var(--border)}
.btn-ghost:hover{border-color:var(--primary);color:var(--primary)}
.btn-lg{height:56px;padding-inline:var(--sp-8);font-size:17px}
.btn-sm{height:42px;padding-inline:var(--sp-4);font-size:14.5px}

/* ── Hero ───────────────────────────────────────────────────────────── */
.hero{position:relative;padding-block:var(--sp-20) var(--sp-24);overflow:hidden}
.hero-glow{position:absolute;inset:0;pointer-events:none;z-index:0}
.hero-glow::before,.hero-glow::after{content:'';position:absolute;border-radius:50%;filter:blur(90px);opacity:.5}
.hero-glow::before{width:520px;height:520px;background:var(--brand-400);top:-220px;inset-inline-end:-120px}
.hero-glow::after{width:400px;height:400px;background:var(--gold-400);bottom:-200px;inset-inline-start:-100px;opacity:.28}
.hero-grid{position:relative;z-index:1;display:grid;grid-template-columns:1.05fr .95fr;gap:var(--sp-16);align-items:center}
@media (max-width:960px){.hero-grid{grid-template-columns:1fr;gap:var(--sp-12)}}

.eyebrow{display:inline-flex;align-items:center;gap:var(--sp-2);background:var(--accent-soft);
  color:var(--accent-ink);border:1px solid color-mix(in srgb,var(--accent) 35%,transparent);
  padding:7px 15px;border-radius:var(--r-pill);font-size:13.5px;font-weight:700;margin-bottom:var(--sp-5)}
.hero h1{font-size:clamp(38px,6.2vw,72px);font-weight:900;letter-spacing:-.042em;line-height:1.08;margin-bottom:var(--sp-5)}
/* Tokenised, so the headline gradient follows a FORCED theme too — it used to
   have its own prefers-color-scheme rule that an attribute cannot reach. */
.hero h1 .grad{background:linear-gradient(120deg,var(--grad-a),var(--grad-b) 70%);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.hero .lede{font-size:clamp(17px,2.1vw,20px);color:var(--text-2);max-width:56ch;margin-bottom:var(--sp-8)}
.hero-cta{display:flex;flex-wrap:wrap;gap:var(--sp-3);margin-bottom:var(--sp-6)}
.hero-note{display:flex;flex-wrap:wrap;gap:var(--sp-5);color:var(--text-3);font-size:14px}
.hero-note > span{display:inline-flex;align-items:center;gap:6px}

/* Phone mockup — pure CSS/SVG, no image request on the critical path. */
.phone{position:relative;margin-inline:auto;width:300px;max-width:100%;
  border-radius:44px;padding:11px;background:linear-gradient(160deg,var(--device-a),var(--device-b));
  box-shadow:var(--shadow-xl),0 0 0 1px rgba(255,255,255,.06) inset}
.phone-screen{border-radius:34px;background:var(--surface);overflow:hidden;aspect-ratio:9/19}
.phone-notch{position:absolute;top:11px;left:50%;transform:translateX(-50%);
  width:112px;height:26px;background:var(--device-b);border-radius:0 0 16px 16px;z-index:2}
.ps-hd{background:linear-gradient(150deg,var(--brand-600),var(--brand-800));
  padding:34px var(--sp-4) var(--sp-5);color:#fff}
.ps-hd .row{display:flex;align-items:center;gap:10px}
.ps-av{width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.2);
  display:grid;place-items:center;font-weight:800;font-size:14px}
.ps-hd small{opacity:.75;font-size:10.5px;display:block;line-height:1.4}
.ps-hd b{font-size:13.5px}
.ps-quota{margin-top:var(--sp-4);background:rgba(255,255,255,.13);border:1px solid rgba(255,255,255,.16);
  border-radius:13px;padding:11px;display:flex;align-items:center;gap:9px}
.ps-quota .ico{width:30px;height:30px;border-radius:9px;background:rgba(251,191,36,.24);display:grid;place-items:center;font-size:14px}
.ps-body{padding:var(--sp-4);display:grid;gap:11px}
.ps-card{background:var(--surface-alt);border:1px solid var(--border);border-radius:14px;padding:12px}
.ps-q{font-size:11.5px;color:var(--text-2);line-height:1.65}
.ps-score{display:flex;align-items:center;gap:11px}
.ring{width:52px;height:52px;flex:0 0 auto;border-radius:50%;display:grid;place-items:center;
  font-weight:900;font-size:16px;color:var(--green-ink);
  background:conic-gradient(var(--green-500) 0 82%,color-mix(in srgb,var(--green-500) 18%,transparent) 82% 100%)}
.ring i{width:40px;height:40px;border-radius:50%;background:var(--surface-alt);display:grid;place-items:center;font-style:normal}
.ps-tags{display:flex;flex-wrap:wrap;gap:5px;margin-top:8px}
.tag{font-size:9.5px;font-weight:700;padding:3px 8px;border-radius:var(--r-pill)}
.tag.g{background:rgba(34,197,94,.14);color:var(--green-ink)}
.tag.a{background:var(--accent-soft);color:var(--accent-ink)}

/* Real product screenshots. Framed in a device-ish shell so a flat PNG
   still reads as "this is the app", without pretending to be a mockup. */
.brand-logo{width:40px;height:auto;flex:0 0 auto}
.shot-hero{position:relative;margin-inline:auto;width:300px;max-width:78vw;
  border-radius:38px;padding:9px;background:linear-gradient(160deg,var(--device-a),var(--device-b));
  box-shadow:var(--shadow-xl),0 0 0 1px rgba(255,255,255,.06) inset}
.shot-hero img{border-radius:30px;display:block;width:100%;height:auto}
.shots{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-6);align-items:start}
@media (max-width:820px){.shots{grid-template-columns:1fr;max-width:320px;margin-inline:auto}}
.shot{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-xl);
  padding:var(--sp-5);text-align:center;box-shadow:var(--shadow-sm)}
.shot img{border-radius:var(--r-lg);border:1px solid var(--border);width:100%;height:auto;margin-bottom:var(--sp-4)}
.shot h3{font-size:16.5px;margin-bottom:var(--sp-2)}
.shot p{color:var(--text-2);font-size:14.5px}
/* The meeting walkthrough packs eight steps in, so its cards are denser than
   the three-up gallery and carry an ordinal the eye can follow. */
.flow{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp-5);align-items:start}
@media (max-width:1040px){.flow{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.flow{grid-template-columns:1fr;max-width:320px;margin-inline:auto}}
/* text-align:start, not right — under dir=ltr a physical `right` would leave
   these eight cards right-aligned on a left-aligned page. */
.flow .shot{padding:var(--sp-4);position:relative;text-align:start}
.flow .shot img{margin-bottom:var(--sp-3)}
.flow h3{font-size:15px;display:flex;align-items:center;gap:8px}
.flow p{font-size:13.5px;line-height:1.65}
.step-no{flex:0 0 auto;width:22px;height:22px;border-radius:50%;
  display:inline-grid;place-items:center;font-size:12px;font-weight:700;
  background:var(--primary-solid);color:#fff}
.shots-sub{margin-top:var(--sp-8)}


/* ── Icons ──────────────────────────────────────────────────────────── */
.icon{width:1em;height:1em;display:inline-block;vertical-align:-.125em;flex:0 0 auto}
.ico .icon{width:24px;height:24px}
.eyebrow .icon{width:18px;height:13px;border-radius:2px;vertical-align:-.15em}
.tick{color:var(--tick);display:inline-flex}
.tick .icon{width:15px;height:15px}
.muted-x{color:var(--muted-ink);display:inline-flex}
.muted-x .icon{width:15px;height:15px}
.plan li .tick,.plan li .muted-x{margin-top:4px}

/* Feature icons draw themselves in when scrolled into view, then respond to
   hover. Uses stroke-dashoffset so the line appears to be drawn, which reads
   as craft rather than decoration. Gated on prefers-reduced-motion. */
@media (prefers-reduced-motion:no-preference){
  .feat .ico .icon path,.feat .ico .icon circle,.feat .ico .icon rect,
  .step .ico .icon path,.step .ico .icon circle,.step .ico .icon rect{
    stroke-dasharray:120;stroke-dashoffset:120;
    transition:stroke-dashoffset .9s cubic-bezier(.2,0,0,1)
  }
  .reveal.in .ico .icon path,.reveal.in .ico .icon circle,.reveal.in .ico .icon rect{stroke-dashoffset:0}
  .feat:hover .ico{transform:translateY(-2px) scale(1.06)}
  .ico{transition:transform .3s cubic-bezier(.2,0,0,1),background .2s}
  .shot img{transition:transform .4s cubic-bezier(.2,0,0,1)}
  .shot:hover img{transform:scale(1.02)}
  .stat b{transition:transform .3s}
  .stat:hover b{transform:translateY(-2px)}
}

/* ── Trust bar ──────────────────────────────────────────────────────── */
/* Sat as four bare numbers on a flat strip before — no hierarchy, nothing to
   look at, and the mixed "<١٠ث" ran together. Now each stat is an icon, an
   animated counter, and a label, separated by fading hairlines. */
.trust{position:relative;border-block:1px solid var(--border);background:var(--surface);padding-block:var(--sp-10);overflow:hidden}
.trust::before{content:'';position:absolute;inset-inline:0;top:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--primary),transparent);opacity:.5}
.trust-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp-4)}
@media (max-width:760px){.trust-grid{grid-template-columns:repeat(2,1fr);gap:var(--sp-8) var(--sp-4)}}

.stat{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;gap:var(--sp-2);padding-inline:var(--sp-3)}
/* Hairline separators that fade at both ends — cleaner than a hard border. */
.stat + .stat::before{content:'';position:absolute;inset-inline-start:0;top:12%;height:76%;width:1px;
  background:linear-gradient(180deg,transparent,var(--border),transparent)}
@media (max-width:760px){.stat:nth-child(odd)::before{display:none}}

.stat-ico{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;
  color:var(--primary);background:var(--primary-soft);
  border:1px solid color-mix(in srgb,var(--primary) 22%,transparent);
  margin-bottom:var(--sp-1)}
.stat-ico .icon{width:22px;height:22px}
.stat b{font-size:clamp(32px,4.8vw,48px);font-weight:900;line-height:1.05;letter-spacing:-.035em;
  font-variant-numeric:tabular-nums;
  background:linear-gradient(180deg,var(--text),color-mix(in srgb,var(--primary) 55%,var(--text)));
  -webkit-background-clip:text;background-clip:text;color:transparent}
/* Scoped to the label only: `.stat span` also matched .stat-ico and, being one
   step more specific, was repainting the icons in --text-3. */
.stat > span:not(.stat-ico){font-size:13.5px;color:var(--text-3);line-height:1.5;max-width:15ch}

@media (prefers-reduced-motion:no-preference){
  .stat-ico{transition:transform .35s cubic-bezier(.2,0,0,1),background .25s}
  .stat:hover .stat-ico{transform:translateY(-3px) scale(1.05);background:color-mix(in srgb,var(--primary) 16%,transparent)}
}

/* ── Section headings ───────────────────────────────────────────────── */
.sec-head{text-align:center;max-width:680px;margin:0 auto var(--sp-12)}
.sec-head .kicker{color:var(--primary);font-weight:800;font-size:14px;letter-spacing:.04em;margin-bottom:var(--sp-3)}
.sec-head h2{font-size:clamp(29px,4.3vw,48px);font-weight:900;letter-spacing:-.03em;line-height:1.14;margin-bottom:var(--sp-4)}
.sec-head p{color:var(--text-2);font-size:17px}

/* ── Steps ──────────────────────────────────────────────────────────── */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-6);counter-reset:s}
@media (max-width:860px){.steps{grid-template-columns:1fr}}
.step{position:relative;background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r-xl);padding:var(--sp-8) var(--sp-6);box-shadow:var(--shadow-sm);
  transition:transform .25s cubic-bezier(.2,0,0,1),box-shadow .25s,border-color .25s}
.step:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);
  border-color:color-mix(in srgb,var(--primary) 35%,var(--border))}
/* Step number, trailing edge — the icon leads, the numeral orders.
   The counter style follows the language: Arabic-Indic in Arabic, Latin in
   English. (Never duplicate a .step per language — counter-increment would
   then run 1..6 and the dashed connectors would land between translations.) */
.step::before{counter-increment:s;content:counter(s, arabic-indic);position:absolute;top:var(--sp-5);inset-inline-end:var(--sp-6);
  font-weight:900;font-size:44px;line-height:1;color:var(--primary);opacity:.13}
html[lang="en"] .step::before{content:counter(s, decimal)}
/* Dashed connector between cards, desktop only. inset-inline-END, so the dash
   lands in the gutter AFTER each non-last card — with -start it hung off the
   outer edge of card 1 and left the 2→3 gutter empty, in both directions. */
.step:not(:last-child)::after{content:'';position:absolute;top:76px;inset-inline-end:-13px;
  width:26px;border-top:2px dashed color-mix(in srgb,var(--primary) 40%,transparent)}
@media (max-width:860px){.step:not(:last-child)::after{display:none}}
.step .ico{width:52px;height:52px;border-radius:15px;display:grid;place-items:center;margin-bottom:var(--sp-4)}
.step .ico .icon{width:26px;height:26px}
.step h3{font-size:20px;margin-bottom:var(--sp-3)}
.step p{color:var(--text-2);font-size:15.5px}

/* ── Features ───────────────────────────────────────────────────────── */
.feats{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-5)}
@media (max-width:980px){.feats{grid-template-columns:repeat(2,1fr)}}
@media (max-width:620px){.feats{grid-template-columns:1fr}}
.feat{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);
  padding:var(--sp-6);transition:transform .18s,box-shadow .18s,border-color .18s}
.feat:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);border-color:color-mix(in srgb,var(--primary) 40%,var(--border))}
.feat .ico{width:52px;height:52px;border-radius:15px;display:grid;place-items:center;font-size:22px;margin-bottom:var(--sp-4);color:#fff}
.feat h3{font-size:17.5px;margin-bottom:var(--sp-2)}
.feat p{color:var(--text-2);font-size:15px}
/* Filled, with the hue carried past the chip's edge by its own shadow.
   These were 8–13% tints, which at 48px read as three faintly different greys
   — the icons were doing no work at all in telling the three features apart.
   White glyph on a solid fill is legible in both themes without a second set
   of dark-mode overrides, which the tinted version needed.

   The gold one is #D97706, not the brand's --gold-500 (#FEAF04): white on
   #FEAF04 is 1.85:1, well under the 3:1 WCAG 1.4.11 asks of a graphical
   object, so the icon would have been decoration you cannot actually see.
   #D97706 measures 3.19:1 and still reads as the brand's gold. */
.i-blue{background:var(--brand-600);box-shadow:0 8px 20px rgba(37,92,235,.34)}
.i-gold{background:#D97706;box-shadow:0 8px 20px rgba(217,119,6,.34)}
.i-green{background:var(--green-600);box-shadow:0 8px 20px rgba(22,163,74,.34)}

.feat-wide{grid-column:span 2;background:linear-gradient(140deg,var(--brand-600),var(--brand-800));color:#fff;border:0}
@media (max-width:620px){.feat-wide{grid-column:span 1}}
.feat-wide h3,.feat-wide p{color:#fff}
.feat-wide p{opacity:.86}
.feat-wide .ico{background:rgba(255,255,255,.18);color:#fff}

/* ── Pricing ────────────────────────────────────────────────────────── */
/* The .toggle component below is shared with the header switchers; it is no
   longer used here (the monthly/yearly switch was removed with the yearly
   plan) and must not be deleted with it. */
.toggle{display:inline-flex;background:var(--surface-alt);border:1px solid var(--border);border-radius:var(--r-pill);padding:5px;gap:4px}
.toggle button{border:0;background:transparent;font-family:inherit;font-size:14.5px;font-weight:700;
  color:var(--text-2);padding:9px 20px;border-radius:var(--r-pill);cursor:pointer;transition:all .18s}
.toggle button[aria-pressed="true"]{background:var(--primary-solid);color:#fff;box-shadow:var(--shadow-sm)}
/* Same component, header size — used by the language and theme switchers. */
.toggle.pill-sm{padding:3px}
.toggle.pill-sm button{font-size:12.5px;padding:6px 11px}
.toggle.theme-pill button{padding:5px 8px;display:inline-grid;place-items:center}
.toggle.theme-pill .icon{width:17px;height:17px}
/* #fff on --green-500 is 2.2:1; this pill carries 11px text, so it uses the
   darker green in both themes. */
.save-pill{background:var(--pill-green);color:#fff;font-size:11px;font-weight:800;padding:2px 8px;border-radius:var(--r-pill);margin-inline-start:6px}

/* Three cards now — trial, time pack, subscription. justify-content:center
   keeps the leftover card centred when the grid drops to two columns. */
.plans{display:grid;grid-template-columns:repeat(3,minmax(0,340px));gap:var(--sp-6);justify-content:center;align-items:stretch}
@media (max-width:1080px){.plans{grid-template-columns:repeat(2,minmax(0,360px))}}
@media (max-width:800px){.plans{grid-template-columns:1fr;max-width:420px;margin-inline:auto}}
.plan{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-xl);
  padding:var(--sp-8);display:flex;flex-direction:column;position:relative}
.plan.featured{border:2px solid var(--primary);box-shadow:var(--shadow-xl)}
/* left + translateX(-50%) centres in BOTH directions. The old
   inset-inline-start:50% + translateX(50%) only centred under RTL, because
   translateX is physical and is not mirrored by `direction`. */
.plan-badge{position:absolute;top:-14px;left:50%;transform:translateX(-50%);
  background:var(--primary-solid);color:#fff;font-size:12.5px;font-weight:800;padding:5px 16px;border-radius:var(--r-pill);white-space:nowrap}
.plan h3{font-size:19px;margin-bottom:var(--sp-2)}
.plan .amt{font-size:42px;font-weight:900;line-height:1.15;margin-block:var(--sp-3)}
.plan .amt small{font-size:16px;font-weight:700;color:var(--text-3)}
.plan .sub{color:var(--text-3);font-size:14px;margin-bottom:var(--sp-6);min-height:22px}
.plan ul{display:grid;gap:var(--sp-3);margin-bottom:var(--sp-8);flex:1}
.plan li{display:flex;gap:var(--sp-3);align-items:flex-start;font-size:15px;color:var(--text-2)}
.plan li b{color:var(--text);font-weight:700}
.plan li .tick{flex:0 0 auto;margin-top:2px}
.muted-x{color:var(--muted-ink);flex:0 0 auto;margin-top:2px}
/* Every figure on this section is written by script from /api/payments/config
   and starts as an em dash. Tabular numerals stop the cards from twitching
   when the fetch lands. */
.p-num,[data-mins]{font-variant-numeric:tabular-nums}
/* The script hides a card whose plan left the catalogue by setting [hidden].
   The UA rule alone loses to .plan{display:flex}, hence the !important. */
[hidden]{display:none !important}
.plan .foot{color:var(--text-3);font-size:13.5px;text-align:center;margin-top:var(--sp-3)}

/* Top-ups: the same currency as the featured pack, in three sizes. A row of
   thin cards rather than three more plan columns — they are one decision
   ("how much time?"), not three plans. */
.topups{margin-top:var(--sp-10);background:var(--surface-alt);border:1px solid var(--border);
  border-radius:var(--r-xl);padding:var(--sp-8);max-width:1080px;margin-inline:auto}
.topups h3{font-size:18px;text-align:center;margin-bottom:var(--sp-2)}
.topups .topups-lede{color:var(--text-3);font-size:14.5px;text-align:center;margin-bottom:var(--sp-6)}
.topup-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-4)}
@media (max-width:700px){.topup-row{grid-template-columns:1fr}}
.topup{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);
  padding:var(--sp-5);display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3)}
.topup.is-popular{border-color:var(--primary)}
.topup .mins{font-weight:800;font-size:16px}
.topup .rate{display:block;color:var(--text-3);font-size:12.5px;font-weight:600;margin-top:2px}
.topup .price{font-weight:900;font-size:22px;white-space:nowrap}
.topup .price small{font-size:13px;font-weight:700;color:var(--text-3)}
/* Shown only when the config fetch fails — the prices stay em dashes rather
   than falling back to a number that may no longer be what checkout charges. */
.price-error{text-align:center;color:var(--text-3);font-size:14px;margin-top:var(--sp-5)}

/* ── FAQ ────────────────────────────────────────────────────────────── */
.faq{max-width:760px;margin-inline:auto;display:grid;gap:var(--sp-3)}
details{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden}
details[open]{border-color:color-mix(in srgb,var(--primary) 45%,var(--border))}
summary{cursor:pointer;padding:var(--sp-5) var(--sp-6);font-weight:700;font-size:16.5px;
  display:flex;align-items:center;justify-content:space-between;gap:var(--sp-4);list-style:none}
summary::-webkit-details-marker{display:none}
summary::after{content:'+';font-size:24px;font-weight:400;color:var(--primary);transition:transform .2s;flex:0 0 auto}
details[open] summary::after{transform:rotate(45deg)}
details p{padding:0 var(--sp-6) var(--sp-5);color:var(--text-2);font-size:15.5px}

/* ── Final CTA ──────────────────────────────────────────────────────── */
.cta{background:linear-gradient(140deg,var(--brand-600),var(--brand-950));border-radius:var(--r-2xl);
  padding:var(--sp-16) var(--sp-8);text-align:center;color:#fff;position:relative;overflow:hidden}
.cta::before{content:'';position:absolute;width:420px;height:420px;border-radius:50%;
  background:rgba(251,191,36,.16);filter:blur(80px);top:-160px;inset-inline-end:-100px}
.cta > *{position:relative}
.cta h2{font-size:clamp(28px,4.4vw,46px);font-weight:900;letter-spacing:-.03em;line-height:1.14;margin-bottom:var(--sp-4)}
.cta p{opacity:.88;font-size:17.5px;max-width:52ch;margin:0 auto var(--sp-8)}
.cta .btn-primary{background:#fff;color:var(--brand-700);box-shadow:0 10px 30px rgba(0,0,0,.25)}
.cta .btn-primary:hover{background:var(--brand-50)}
.cta .btn-ghost{color:#fff;border-color:rgba(255,255,255,.4)}
.cta .btn-ghost:hover{border-color:#fff;color:#fff;background:rgba(255,255,255,.1)}

/* ── Footer ─────────────────────────────────────────────────────────── */
.ftr{border-top:1px solid var(--border);padding-block:var(--sp-12) var(--sp-8);margin-top:var(--sp-24)}
.ftr-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:var(--sp-8);margin-bottom:var(--sp-10)}
@media (max-width:820px){.ftr-grid{grid-template-columns:1fr 1fr;gap:var(--sp-8)}}
.ftr h4{font-size:14px;margin-bottom:var(--sp-4);color:var(--text)}
.ftr ul{display:grid;gap:var(--sp-3)}
.ftr a{color:var(--text-3);font-size:14.5px}
.ftr a:hover{color:var(--primary)}
.ftr-bottom{border-top:1px solid var(--border);padding-top:var(--sp-6);
  display:flex;flex-wrap:wrap;gap:var(--sp-4);justify-content:space-between;color:var(--text-3);font-size:13.5px}
.heart{color:#EF4444;display:inline-flex;vertical-align:-.15em}
.ftr-by a{color:var(--text-2);font-weight:700;text-decoration:none;
  border-bottom:1px solid color-mix(in srgb,var(--text-3) 45%,transparent);
  padding-bottom:1px;transition:color .2s,border-color .2s}
.ftr-by a:hover{color:var(--primary);border-bottom-color:var(--primary)}

/* Entrance animation — opt-in via IntersectionObserver so nothing is hidden
   if JS fails. Elements start visible and only animate once observed. */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .5s ease,transform .5s ease}
.reveal.in{opacity:1;transform:none}
.no-js .reveal{opacity:1;transform:none}