/* ============================================================
   BA10 — Design System
   Monochrome canvas + one disciplined accent.
   Logical properties throughout so AR (RTL) and EN (LTR)
   share a single stylesheet.
   ============================================================ */

/* ---------- 1. TOKENS ---------- */
:root{
  /* Canvas & surfaces — cool near-black, never pure #000 */
  --bg:            #0A0B0C;
  --bg-raised:     #0F1113;
  --surface:       #131619;
  --surface-hi:    #191D21;

  /* Hairlines — borders carry the structure, not shadows */
  --line:          rgba(255,255,255,.07);
  --line-strong:   rgba(255,255,255,.14);

  /* Text */
  --text:          #F3F4F5;
  --text-2:        #A0A6AC;
  --text-3:        #6B7278;

  /* The single accent. Used for: primary CTA, active state,
     focus ring, and exactly one focal mark per section. */
  --accent:        #00D4FF;
  --accent-ink:    #04191F;   /* text on accent fill */
  --accent-dim:    rgba(0,212,255,.14);
  --accent-line:   rgba(0,212,255,.32);

  /* Semantic */
  --warn:          #FFB454;
  --ok:            #4ADE80;

  /* Type */
  --f-display: 'Cairo', 'Archivo', system-ui, sans-serif;
  --f-body:    'Cairo', 'Archivo', system-ui, sans-serif;
  --f-serif:   'Cairo', 'Archivo', system-ui, sans-serif;
  --f-serif-ar:'Cairo', system-ui, sans-serif;

  /* Spacing scale — spacious */
  --s1:4px;  --s2:8px;   --s3:12px; --s4:16px; --s5:24px;
  --s6:32px; --s7:48px;  --s8:64px; --s9:96px; --s10:128px;

  --pad-section: clamp(72px, 9vw, 132px);
  --pad-gutter:  clamp(20px, 5vw, 40px);

  --w-wide:  1140px;
  --w-prose: 720px;

  --r-sm:8px; --r-md:14px; --r-lg:22px; --r-xl:28px;

  /* Motion */
  --e-out:  cubic-bezier(.22,.61,.36,1);
  --e-soft: cubic-bezier(.16,1,.3,1);
  --t-fast: .18s;
  --t-mid:  .32s;
}

/* Arabic gets Cairo first — Archivo has no Arabic coverage */
html[lang="ar"]{ --f-display:'Cairo', 'Archivo', system-ui, sans-serif;
                 --f-body:   'Cairo', 'Archivo', system-ui, sans-serif; }

/* ---------- 2. RESET ---------- */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0 }

html{
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%;
  scroll-padding-top:88px;
}
body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--f-body);
  font-size:16px;
  line-height:1.6;
  font-synthesis-weight:none;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
  text-rendering:optimizeLegibility;
}
img,video,svg{ max-width:100%; height:auto; display:block }
button,input,textarea,select{ font:inherit; color:inherit }
a{ color:inherit; text-decoration:none }
ul,ol{ list-style:none }

::selection{ background:var(--accent); color:var(--accent-ink) }

/* Focus: never removed, always visible, accent-colored */
:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:3px;
  border-radius:4px;
}
:focus:not(:focus-visible){ outline:none }

/* Grain — a single inline SVG, no extra request. Sells "designed". */
body::after{
  content:'';
  position:fixed; inset:0; z-index:1;
  pointer-events:none; opacity:.028;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}


/* ---------- 3. TYPOGRAPHY ----------
   Two voices. A serif (Instrument Serif in Latin, Amiri in Arabic)
   carries every editorial moment: the hero, chapter headings, pull
   quotes, ordinals. The sans (Archivo / Cairo) carries the body and the
   one deliberately "product" section — the package — which is typeset
   heavy and sans on purpose so it reads as the designed object on the
   page rather than another chapter. */
h1,h2,h3,h4{ font-family:var(--f-display); font-weight:800; line-height:1.08; letter-spacing:-.02em }
html[lang="ar"] h1, html[lang="ar"] h2,
html[lang="ar"] h3, html[lang="ar"] h4{ letter-spacing:0; line-height:1.3 }

.h-display{
  font-family:var(--f-serif); font-weight:400;
  font-size:clamp(46px, 7.4vw, 100px); line-height:.98; letter-spacing:-.02em;
}
html[lang="ar"] .h-display{ font-family:var(--f-serif-ar); font-weight:700; font-size:clamp(38px,6.4vw,82px); line-height:1.28; letter-spacing:0 }

.h-section{
  font-family:var(--f-serif); font-weight:400;
  font-size:clamp(36px, 5.2vw, 62px); line-height:1.04; letter-spacing:-.02em;
  max-width:18ch;
}
html[lang="ar"] .h-section{ font-family:var(--f-serif-ar); font-weight:700; line-height:1.3; letter-spacing:0 }
.h-section em, .h-display em, .h-section .hl, .h-display .hl{ font-style:italic; color:var(--accent); font-weight:inherit }

/* The package heading is the one heavy sans heading on the page. */
.h-sans{ font-family:var(--f-display) !important; font-weight:900 !important; letter-spacing:-.035em !important; line-height:1.02 !important; max-width:16ch }
html[lang="ar"] .h-sans{ letter-spacing:0 !important; line-height:1.25 !important }

.h-card{ font-family:var(--f-display); font-size:clamp(17px,2vw,20px); font-weight:700; letter-spacing:-.015em }
html[lang="ar"] .h-card{ letter-spacing:0 }

/* Chapter kicker: a cyan rule, a quiet uppercase label, and — when the
   section carries data-ch — its chapter number set in italic serif. */
.eyebrow{
  display:inline-flex; align-items:center; gap:var(--s3);
  font-size:11.5px; font-weight:600;
  letter-spacing:.22em; text-transform:uppercase;
  color:var(--text-2);
  margin-bottom:var(--s5);
}
html[lang="ar"] .eyebrow{ letter-spacing:.04em; text-transform:none; font-size:12.5px }
.eyebrow::before{ content:''; width:40px; height:1px; background:var(--accent); flex-shrink:0 }
.eyebrow[data-ch]::after{
  content:'(' attr(data-ch) ')';
  font-family:var(--f-serif); font-style:italic; font-weight:400;
  font-size:15px; letter-spacing:0; text-transform:none; color:var(--accent);
  margin-inline-start:var(--s2);
}
html[lang="ar"] .eyebrow[data-ch]::after{ font-family:var(--f-serif); font-style:italic; font-size:14px; direction:ltr; unicode-bidi:isolate }
/* Package section: the D2 eyebrow — pure cyan caps, no rule, no chapter. */
.eyebrow.is-sans{ color:var(--accent); font-weight:800; letter-spacing:.2em }
.eyebrow.is-sans::before, .eyebrow.is-sans::after{ display:none }

/* Ordinal: italic serif, the connective tissue between the two voices. */
.ord{ font-family:var(--f-serif); font-style:italic; font-weight:400; color:var(--accent); letter-spacing:0 }
html[lang="ar"] .ord{ font-family:var(--f-serif-ar); font-style:normal }

.numeral{ font-family:var(--f-serif); font-style:italic; font-size:clamp(30px,4vw,46px); line-height:1; color:var(--accent); font-weight:400; letter-spacing:0 }

.lede{ font-size:clamp(15px,1.6vw,18px); line-height:1.75; color:var(--text-2); max-width:54ch }
.muted{ color:var(--text-2) }
strong,.hl{ color:var(--text); font-weight:700 }
.accent{ color:var(--accent); font-weight:700 }
.warn{ color:var(--warn); font-weight:700 }

/* ---------- 4. LAYOUT ---------- */
.wrap{ width:100%; max-width:var(--w-wide); margin-inline:auto; padding-inline:var(--pad-gutter) }
.wrap-prose{ width:100%; max-width:var(--w-prose); margin-inline:auto; padding-inline:var(--pad-gutter) }
.section{ padding-block:var(--pad-section); position:relative; z-index:2 }
.section + .section{ border-top:1px solid var(--line) }
.section-head{ margin-bottom:clamp(40px,6vw,72px) }
.section-head .lede{ margin-top:var(--s5) }
/* Two-column chapter head: heading on the start side, lede on the end
   side, both sitting on the same baseline. The editorial move from D1. */
.section-head.is-split{ display:grid; grid-template-columns:1.1fr .9fr; column-gap:var(--s7); row-gap:0; align-items:end }
.section-head.is-split .eyebrow{ grid-column:1 / -1 }
.section-head.is-split .lede{ margin-top:0; max-width:46ch; padding-bottom:6px }
@media(max-width:900px){ .section-head.is-split{ grid-template-columns:1fr; row-gap:var(--s5) } .section-head.is-split .lede{ padding-bottom:0 } }

.grid{ display:grid; gap:var(--s4) }
.g-2{ grid-template-columns:repeat(2,1fr) }
.g-3{ grid-template-columns:repeat(3,1fr) }
.g-4{ grid-template-columns:repeat(4,1fr) }
@media(max-width:900px){ .g-3,.g-4{ grid-template-columns:repeat(2,1fr) } }
@media(max-width:600px){ .g-2,.g-3,.g-4{ grid-template-columns:1fr } }

/* ---------- 5. NAV ---------- */
.nav{
  position:fixed; inset-block-start:0; inset-inline:0; z-index:80;
  display:flex; align-items:center; justify-content:space-between; gap:var(--s4);
  padding:var(--s4) var(--pad-gutter);
  background:transparent;
  transition:background var(--t-mid) var(--e-out),
             border-color var(--t-mid) var(--e-out),
             padding var(--t-mid) var(--e-out);
  border-block-end:1px solid transparent;
}
.nav.stuck{
  background:rgba(10,11,12,.78);
  backdrop-filter:blur(18px) saturate(140%);
  -webkit-backdrop-filter:blur(18px) saturate(140%);
  border-block-end-color:var(--line);
  padding-block:var(--s3);
}
.nav-logo{ display:flex; align-items:center; gap:var(--s3); flex-shrink:0; min-height:44px }
.nav-logo img{ width:34px; height:34px; object-fit:contain }
.nav-logo span{
  font-family:var(--f-display); font-weight:900; font-size:17px;
  letter-spacing:.06em;
}
.nav-right{ display:flex; align-items:center; gap:var(--s3) }

/* ---- Menu trigger ----
   Sits beside the language toggle at every breakpoint; the two bars
   converge into an X while the overlay is open. */
.menu-btn{
  display:inline-flex; align-items:center; gap:var(--s3);
  min-height:44px; padding:0 var(--s4);
  background:var(--surface); border:1px solid var(--line);
  border-radius:999px; color:var(--text-2); cursor:pointer;
  font-family:var(--f-display); font-size:12px; font-weight:800;
  letter-spacing:.12em; text-transform:uppercase; line-height:1;
  transition:color var(--t-fast), border-color var(--t-fast),
             background var(--t-fast), transform var(--t-fast) var(--e-out);
}
html[lang="ar"] .menu-btn{ letter-spacing:0; text-transform:none; font-size:14px }
.menu-btn:hover{
  color:var(--accent); border-color:var(--accent-line); background:var(--surface-hi);
}
.menu-btn:active{ transform:scale(.96) }
.menu-btn-bars{ display:flex; flex-direction:column; gap:5px; flex-shrink:0 }
.menu-btn-bars span{
  display:block; width:17px; height:1.6px; border-radius:2px; background:currentColor;
  transition:transform var(--t-mid) var(--e-out);
}
.menu-btn[aria-expanded="true"] .menu-btn-bars span:nth-child(1){ transform:translateY(3.3px) rotate(45deg) }
.menu-btn[aria-expanded="true"] .menu-btn-bars span:nth-child(2){ transform:translateY(-3.3px) rotate(-45deg) }
/* The word is the affordance on desktop; on a narrow bar the bars alone
   carry it, so the logo and language toggle keep their room. */
@media(max-width:560px){
  .menu-btn{ padding:0 var(--s3) }
  .menu-btn-label{ display:none }
}

/* ---- Full-screen menu ---- */
/* MUST come before/with the display rule below: setting display on the
   element itself overrides the UA stylesheet's [hidden]{display:none},
   which left the overlay laid invisibly over the whole page, swallowing
   every scroll and click. */
.menu-overlay[hidden]{ display:none }
.menu-overlay{
  position:fixed; inset:0; z-index:79;
  display:grid; place-items:center;
  padding:calc(var(--s7) + 44px) var(--pad-gutter) var(--s6);
  background:rgba(10,11,12,.97);
  backdrop-filter:blur(22px); -webkit-backdrop-filter:blur(22px);
  overflow-y:auto; overscroll-behavior:contain;
  scrollbar-width:none; -ms-overflow-style:none;
  opacity:0; transition:opacity var(--t-mid) var(--e-out);
}
.menu-overlay.show{ opacity:1 }
.menu-overlay::-webkit-scrollbar{ display:none }
.menu-inner{
  display:flex; flex-direction:column; align-items:center; gap:var(--s5);
  width:100%; max-width:760px; margin-block:auto;
}
.menu-list{
  display:flex; flex-direction:column; align-items:center; gap:var(--s4);
  width:100%; list-style:none;
}
.menu-group{
  display:flex; flex-direction:column; align-items:center; gap:6px;
  width:100%; text-align:center;
  /* Each group rises in as the sheet opens, staggered by --i. */
  opacity:0; transform:translateY(14px);
  transition:opacity .5s var(--e-out), transform .5s var(--e-out);
  transition-delay:calc(var(--i, 0) * 55ms);
}
.menu-overlay.show .menu-group{ opacity:1; transform:none }

.menu-link{
  display:block; color:var(--text);
  font-family:var(--f-display); font-weight:900;
  font-size:clamp(26px, 4.4vw, 42px);
  letter-spacing:-.03em; text-transform:uppercase;
}
html[lang="ar"] .menu-link{ letter-spacing:0; text-transform:none }
.menu-link.is-current{ color:var(--accent) }

/* ---- Roll effect ----
   Two stacked copies of the text: the top one slides up and out, the
   bottom one slides up into its place, each unit delayed from the
   centre outward. A "unit" is one letter in Latin text and one WORD in
   Arabic — Arabic is cursive, and splitting a word into per-letter
   boxes breaks the joins and renders isolated letterforms. */
.roll{
  position:relative; display:block; overflow:hidden;
  /* The container must be exactly as tall as one row: translateY(100%)
     moves a unit by its own line box, so any extra height here (padding
     or a shorter line-height) leaves a sliver of the hidden row showing
     through as ghosting. 1.15 also gives Arabic room for hamza above
     and the tail of ة below without clipping them. */
  line-height:1.15;
}
html[lang="ar"] .roll{ line-height:1.35 }
.roll-row{ display:block; white-space:nowrap }
.roll-row.roll-under{ position:absolute; inset:0 }
.roll-u{
  display:inline-block; white-space:pre;
  transition:transform .42s var(--e-out);
  transition-delay:calc(var(--d, 0) * 1ms);
}
.roll-under .roll-u{ transform:translateY(100%) }
.menu-link:hover .roll-top .roll-u,
.menu-link:focus-visible .roll-top .roll-u{ transform:translateY(-100%) }
.menu-link:hover .roll-under .roll-u,
.menu-link:focus-visible .roll-under .roll-u{ transform:translateY(0) }

.menu-subs{
  display:flex; flex-wrap:wrap; justify-content:center;
  gap:var(--s2) var(--s4);
}
.menu-subs a{
  font-size:13.5px; line-height:1.4; color:var(--text-3);
  transition:color var(--t-fast);
}
.menu-subs a:hover, .menu-subs a.is-current{ color:var(--accent) }

.menu-cta{
  opacity:0; transform:translateY(14px);
  transition:opacity .5s var(--e-out), transform .5s var(--e-out);
  transition-delay:400ms;
}
.menu-overlay.show .menu-cta{ opacity:1; transform:none }

@media(max-width:600px){
  .menu-list{ gap:var(--s4) }
  .menu-subs{ gap:var(--s2) var(--s3) }
  .menu-subs a{ font-size:12.5px }
}
@media(prefers-reduced-motion:reduce){
  .roll-u{ transition:none }
  .menu-group, .menu-cta{ transition:opacity .2s linear; transform:none }
}

/* Scroll progress — a 2px accent line, the one persistent accent mark */
.scroll-progress{
  position:fixed; inset-block-start:0; inset-inline-start:0; z-index:90;
  height:2px; width:100%;
  transform:scaleX(0); transform-origin:inline-start;
  background:var(--accent);
  will-change:transform;
}

/* Language toggle — translate mark + the language you'd switch to */
.lang-toggle{
  display:inline-flex; align-items:center; gap:var(--s2);
  min-height:44px; padding:0 var(--s4);
  background:var(--surface); border:1px solid var(--line);
  border-radius:999px; color:var(--text-2); cursor:pointer;
  transition:color var(--t-fast), border-color var(--t-fast),
             background var(--t-fast), transform var(--t-fast) var(--e-out);
}
.lang-toggle:hover{
  color:var(--accent); border-color:var(--accent-line);
  background:var(--surface-hi);
}
.lang-toggle:active{ transform:scale(.96) }
.lang-icon{ width:22px; height:22px; flex-shrink:0; display:block }
.lang-code{
  font-family:var(--f-display); font-size:12px; font-weight:800;
  letter-spacing:.08em; line-height:1;
}
html[lang="en"] .lang-code{ font-family:'Cairo', sans-serif; font-size:14px; letter-spacing:0 }

/* ---------- 6. BUTTONS ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:var(--s3);
  min-height:54px; padding:0 var(--s6);
  border:1px solid transparent; border-radius:999px;
  font-family:var(--f-display); font-size:15px; font-weight:800;
  letter-spacing:.01em; cursor:pointer; white-space:nowrap;
  transition:transform var(--t-fast) var(--e-out),
             background var(--t-fast), border-color var(--t-fast),
             color var(--t-fast);
}
.btn:active{ transform:scale(.975) }

.btn-primary{ background:var(--accent); color:var(--accent-ink) }
.btn-primary:hover{ background:#5FE4FF }

.btn-ghost{ background:transparent; border-color:var(--line-strong); color:var(--text) }
.btn-ghost:hover{ border-color:var(--text); background:rgba(255,255,255,.04) }

.btn-sm{ min-height:44px; padding:0 var(--s5); font-size:13px }
.btn-block{ width:100% }

/* Arrow that leans on hover — direction-aware */
.btn .arrow{ transition:transform var(--t-fast) var(--e-out) }
.btn:hover .arrow{ transform:translateX(3px) }
html[dir="rtl"] .btn:hover .arrow{ transform:translateX(-3px) }
html[dir="rtl"] .btn .arrow{ transform:scaleX(-1) }
html[dir="rtl"] .btn:hover .arrow{ transform:scaleX(-1) translateX(3px) }


/* Shimmer ring — the D2 CTA. A single highlight sweeps across the fill
   once on hover; never on a loop, which reads as a stuck animation. */
.btn-primary{ position:relative; overflow:hidden; isolation:isolate }
.btn-primary::after{
  content:''; position:absolute; inset:-2px; z-index:-1; pointer-events:none;
  background:linear-gradient(110deg,transparent 35%,rgba(255,255,255,.55) 50%,transparent 65%);
  transform:translateX(-120%);
}
.btn-primary:hover::after{ transition:transform .7s var(--e-out); transform:translateX(120%) }


/* ---------- 7. HERO (D1: photo, serif headline, kicker) ---------- */
.hero{
  position:relative; z-index:2;
  min-height:100svh;
  display:flex; align-items:flex-end;
  padding-block:clamp(130px,18vh,190px) clamp(48px,7vh,88px);
  overflow:hidden;
}
.hero-bg{ position:absolute; inset:0; z-index:0 }
.hero-bg img, .hero-bg video{
  display:block; width:100%; height:100%; object-fit:cover; object-position:30% center;
  filter:brightness(.55) contrast(1.05) saturate(.9);
  pointer-events:none;
}
.hero-bg video::-webkit-media-controls,
.hero-bg video::-webkit-media-controls-start-playback-button{ display:none !important; -webkit-appearance:none }
/* Overlays: the copy sits on the right in both directions (the coach is
   on the left of the cover), so the right side gets the side fade;
   plus a floor fade into the page and a hairline of accent light. */
.hero-bg::after{
  content:''; position:absolute; inset:0;
  background:
    linear-gradient(270deg, rgba(10,11,12,.9) 0%, rgba(10,11,12,.55) 38%, rgba(10,11,12,.08) 100%),
    linear-gradient(180deg, rgba(10,11,12,.3) 0%, rgba(10,11,12,.0) 35%, rgba(10,11,12,.75) 78%, var(--bg) 100%);
}
.hero .wrap{ position:relative; z-index:2 }
.hero-inner{ display:grid; gap:var(--s6); max-width:none }
@media(min-width:820px){ html[dir="ltr"] .hero-inner{ margin-inline-start:auto; max-width:min(100%, 820px) } }
.hero .eyebrow{ margin-bottom:0 }
.hero .h-display{ max-width:11ch }
html[lang="ar"] .hero .h-display{ max-width:14ch }
/* The English slogan is long — keep it on 4–5 lines so the buttons stay on screen */
@media(min-width:641px){ html[lang="en"] .hero .h-display{ font-size:clamp(46px,5.6vw,64px); max-width:22ch } }

/* Headline words wrap freely and the one highlighted word turns italic cyan. */
.headline-words{ display:flex; flex-wrap:wrap; gap:0 .24em; justify-content:flex-start }
.mask.hl > span{ font-style:italic; color:var(--accent) }
html[lang="ar"] .mask.hl > span{ font-style:normal }
.h-display .ar, .h-display .en{ display:none }
html[lang="ar"] .h-display .ar, html[lang="en"] .h-display .en{ display:block }

.hero-foot{ display:flex; justify-content:space-between; align-items:flex-end; gap:var(--s7); margin-top:var(--s2) }
.hero-foot .lede{ max-width:46ch; font-size:clamp(15px,1.5vw,17px) }
.hero-copy{ display:grid; gap:var(--s5); max-width:56ch }
.hero-actions{ display:flex; flex-wrap:wrap; gap:var(--s3) }
.hero-micro{ font-size:13px; color:var(--text-2); line-height:1.6; margin:0 }
.hero-micro{ display:flex; align-items:center; gap:var(--s2) }
.hero-micro::before{ content:''; width:6px; height:6px; border-radius:50%; background:var(--accent); flex-shrink:0 }

/* Scroll cue — D1's circular play control, repurposed: the circle holds
   a chevron and the label slides on hover. Still a plain anchor to the
   next section. */
.scroll-cue{
  position:relative; display:inline-flex; align-items:center; gap:var(--s4);
  color:var(--text-2); flex-shrink:0;
  font-family:var(--f-display); font-size:12px; font-weight:700;
  letter-spacing:.22em; text-transform:uppercase;
  transition:color var(--t-fast);
}
html[lang="ar"] .scroll-cue{ letter-spacing:.02em; text-transform:none; font-size:14px }
.scroll-cue:hover, .scroll-cue:focus-visible{ color:var(--text) }
.scroll-cue-ring{
  width:62px; height:62px; border-radius:50%; flex-shrink:0;
  border:1px solid rgba(255,255,255,.32);
  display:grid; place-items:center; color:var(--text);
  transition:border-color var(--t-fast), background var(--t-fast), transform var(--t-mid) var(--e-out);
  position:relative; overflow:hidden; isolation:isolate;
}
.scroll-cue-glow{
  position:absolute; inset:-40%; z-index:-1; border-radius:50%;
  background:radial-gradient(closest-side, var(--accent), transparent 72%);
  opacity:0; filter:blur(10px); transition:opacity var(--t-mid) var(--e-out);
}
.scroll-cue:hover .scroll-cue-ring{ border-color:var(--accent-line); transform:scale(1.06) }
.scroll-cue:hover .scroll-cue-glow{ opacity:.45 }
.scroll-cue-chevron{ display:flex; animation:scrollCueBob 1.6s var(--e-soft) infinite; color:var(--accent) }
@keyframes scrollCueBob{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(3px) } }
.scroll-cue-slide{ position:relative; display:inline-block; overflow:hidden; height:1.2em; line-height:1.2 }
.scroll-cue .actual-text, .scroll-cue .hover-text{ display:block; white-space:nowrap; transition:transform .38s var(--e-out) }
.scroll-cue .hover-text{ position:absolute; inset-block-start:0; inset-inline-start:0; transform:translateY(100%) }
.scroll-cue:hover .actual-text{ transform:translateY(-100%) }
.scroll-cue:hover .hover-text{ transform:translateY(0) }

/* ---------- 7b. RIBBON (D1) ----------
   A continuous ticker of the proof points, in the quiet uppercase voice.
   Two identical copies of the content scroll as one; the loop resets at
   the halfway mark so the seam is invisible. Direction follows the
   document — RTL readers get an RTL ticker. */
.ribbon{
  position:relative; z-index:2; overflow:hidden; white-space:nowrap;
  border-block:1px solid var(--line); background:var(--bg);
  padding-block:17px;
  mask:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  -webkit-mask:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.ribbon-track{ display:inline-flex; align-items:center; will-change:transform; animation:ribbon 42s linear infinite }
html[dir="rtl"] .ribbon-track{ animation-name:ribbonRtl }
.ribbon:hover .ribbon-track{ animation-play-state:paused }
.ribbon-track > span{
  display:inline-flex; align-items:center; gap:10px; padding-inline:30px;
  font-family:var(--f-display); font-size:12.5px; font-weight:600;
  letter-spacing:.18em; text-transform:uppercase; color:var(--text-2);
}
html[lang="ar"] .ribbon-track > span{ letter-spacing:.02em; text-transform:none; font-size:14px }
.ribbon-track b{ color:var(--accent); font-weight:800 }
.ribbon-track .star{ color:var(--accent); letter-spacing:.08em; font-size:11px }
.ribbon-track .dot{ width:4px; height:4px; border-radius:50%; background:var(--text-3); display:inline-block }
@keyframes ribbon{ to{ transform:translateX(-50%) } }
@keyframes ribbonRtl{ to{ transform:translateX(50%) } }

/* ---------- 7c. STATS BAND (D2) ---------- */
.stats-section{ position:relative; z-index:2; padding-block:clamp(40px,6vw,72px) 0 }
.stats{
  display:grid; grid-template-columns:repeat(4,1fr);
  border:1px solid var(--line-strong); border-radius:var(--r-lg); overflow:hidden;
  background:linear-gradient(160deg,rgba(255,255,255,.035),rgba(255,255,255,.01));
}
.stat{ padding:clamp(24px,3vw,34px); border-inline-end:1px solid var(--line-strong); display:grid; grid-template-rows:auto 1fr; align-content:start; gap:14px }
.stat .n{ display:flex; flex-wrap:wrap; align-content:flex-end; align-items:baseline; gap:.22em; height:clamp(48px,5.4vw,66px); align-self:end; padding-top:4px; white-space:nowrap }
.stat .n small{ margin-inline-start:0 !important }
.stat:last-child{ border-inline-end:0 }
.stat .n{
  font-family:var(--f-display); font-size:clamp(40px,5vw,60px); font-weight:900;
  letter-spacing:-.045em; line-height:1; color:var(--text);
}
.stat .n small{ color:var(--accent); font-size:.5em; font-weight:900; margin-inline-start:2px }
.stat .l{ font-size:11.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--text-3); font-weight:600; line-height:1.4 }
html[lang="ar"] .stat .l{ letter-spacing:0; text-transform:none; font-size:12.5px }
/* Word values (NASM, Daily, BA10 app) read smaller than digits */
.stat .n.n-word{ font-size:clamp(34px,3.8vw,48px) }
html[lang="ar"] .stat .n.n-word{ letter-spacing:0 }
/* Labels are sentences now, so drop the all-caps treatment */
.stat .l{ letter-spacing:.01em; text-transform:none; font-size:13px; color:var(--text-2) }


/* ---------- 8. TILES ----------
   The D2 surface, used for every container on the page: a soft
   top-left-lit gradient, a hairline, a 22px radius. One modifier,
   .is-feat, tints it with the accent — exactly one per section. */
.tile, .card, .pain, .fit-col, .plan, .tl-item, .story-card, .cred{
  position:relative;
  background:linear-gradient(160deg, rgba(255,255,255,.05), rgba(255,255,255,.015));
  border:1px solid var(--line-strong);
  border-radius:var(--r-lg);
  transition:border-color var(--t-mid) var(--e-out), transform var(--t-mid) var(--e-out), background var(--t-mid);
}
.card, .pain, .fit-col, .plan, .tl-item, .cred{ padding:clamp(22px,2.6vw,30px) }
.card:hover, .pain:hover, .tl-item:hover, .cred:hover{ border-color:rgba(255,255,255,.22); transform:translateY(-3px) }
.is-feat{ border-color:var(--accent-line); background:linear-gradient(160deg, rgba(0,212,255,.12), rgba(255,255,255,.02)) }

/* Ghost ordinal — a large italic serif number faded into the corner of a
   tile. data-n carries it so markup stays clean. */
[data-n]::before{
  content:attr(data-n);
  position:absolute; inset-block-start:14px; inset-inline-end:20px;
  font-family:var(--f-serif); font-style:italic; font-weight:400;
  font-size:clamp(44px,5vw,64px); line-height:1; color:var(--accent);
  opacity:.22; pointer-events:none;
}
html[lang="ar"] [data-n]::before{ font-family:var(--f-serif-ar); font-style:normal }

.card h3{ margin-block:var(--s4) var(--s3) }
.card p{ font-size:14.5px; color:var(--text-2); line-height:1.8 }
.card .figure{ margin-top:var(--s5) }

.chip{
  width:44px; height:44px; border-radius:12px;
  display:grid; place-items:center;
  background:var(--accent-dim); border:1px solid var(--accent-line);
  color:var(--accent); flex-shrink:0;
}
.chip svg{ width:20px; height:20px }

.shot{ border-radius:var(--r-md); overflow:hidden; border:1px solid var(--line); background:var(--bg-raised) }
.shot img{ width:100%; height:auto; display:block; object-fit:cover; cursor:zoom-in; transition:transform .5s var(--e-out) }
.shot:hover img{ transform:scale(1.02) }
.figure figcaption{ margin-top:var(--s3); font-size:12.5px; color:var(--text-3) }
.note{
  display:flex; gap:var(--s3); align-items:flex-start;
  margin-top:var(--s4); padding:var(--s3) var(--s4);
  border:1px dashed var(--line-strong); border-radius:var(--r-md);
  font-size:13.5px; color:var(--text-2); line-height:1.6;
}
.note svg{ width:16px; height:16px; flex-shrink:0; margin-top:3px; color:var(--text-3) }
.ticks{ display:grid; gap:var(--s3); margin-top:var(--s4) }
.ticks li{ display:flex; gap:var(--s3); align-items:flex-start; font-size:14.5px; line-height:1.6; color:var(--text-2) }
.ticks li::before{ content:'✓'; color:var(--accent); font-weight:800; flex-shrink:0; margin-top:1px }
.ticks.two-col{ grid-template-columns:1fr 1fr; gap:var(--s3) var(--s5) }
@media(max-width:700px){ .ticks.two-col{ grid-template-columns:1fr } }

/* ---------- 9. STRUGGLES ---------- */
.pains{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px }
.pain{ min-height:230px; display:flex; flex-direction:column }
.pain h3{ font-family:var(--f-display); font-size:18px; font-weight:800; margin:var(--s5) 0 var(--s2); letter-spacing:-.015em }
html[lang="ar"] .pain h3{ letter-spacing:0 }
.pain p{ font-size:14px; line-height:1.7; color:var(--text-2) }
@media(max-width:1000px){ .pains{ grid-template-columns:repeat(2,1fr) } }
@media(max-width:560px){ .pains{ grid-template-columns:1fr } .pain{ min-height:0 } }

/* ---------- 10. FIT ---------- */
.fit-cols{ display:grid; grid-template-columns:1fr 1fr; gap:16px }
.fit-head{ display:flex; align-items:center; gap:var(--s4); margin-bottom:var(--s5) }
.fit-head .h-card{ font-size:clamp(18px,2.2vw,22px) }
.fit-list{ display:grid; gap:0; border-top:1px solid var(--line) }
.fit-list li{
  display:flex; gap:var(--s4); align-items:flex-start;
  padding:14px 0; border-bottom:1px solid var(--line);
  font-size:15px; line-height:1.55; color:var(--text-2);
}
.fit-list li::before{ font-family:var(--f-serif); font-style:italic; font-size:18px; line-height:1.2; flex-shrink:0; width:1.2em }
html[lang="ar"] .fit-list li::before{ font-family:var(--f-serif-ar); font-style:normal }
.is-yes .fit-list li::before{ content:'✓'; color:var(--accent) }
.is-no  .fit-list li::before{ content:'✕'; color:var(--text-3) }
.is-yes .fit-list li{ color:var(--text) }
@media(max-width:760px){ .fit-cols{ grid-template-columns:1fr } }

/* ---------- 11. METHOD ---------- */
.method-grid{ display:grid; grid-template-columns:1fr 1fr; gap:16px; align-items:stretch }
.method-grid .card{ display:flex; flex-direction:column }
.method-grid .card .h-card{ font-size:clamp(19px,2.2vw,23px) }
@media(max-width:800px){ .method-grid{ grid-template-columns:1fr } }

/* ---------- 12. DIFFERENCE (comparison) ---------- */
.vs{ overflow:hidden; display:grid }
.vs-row{ display:grid; grid-template-columns:.9fr 1.1fr 1.3fr; border-top:1px solid var(--line) }
.vs-row.is-head{ border-top:0; background:rgba(255,255,255,.025) }
.vs-cell{ padding:clamp(16px,2vw,22px) clamp(16px,2.2vw,26px); font-size:15px; line-height:1.5; display:flex; align-items:center; gap:var(--s3) }
.vs-cell.is-label{ font-family:var(--f-serif); font-style:italic; font-size:17px; color:var(--text-2) }
html[lang="ar"] .vs-cell.is-label{ font-family:var(--f-serif-ar); font-style:normal; font-size:16px }
.vs-cell.is-them{ color:var(--text-3); border-inline-start:1px solid var(--line) }
.vs-cell.is-us{ color:var(--text); background:rgba(0,212,255,.055); border-inline-start:1px solid var(--accent-line); font-weight:600 }
.vs-cell.is-us svg{ width:18px; height:18px; color:var(--accent); flex-shrink:0 }
.is-head .vs-cell{ font-family:var(--f-display); font-size:11.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--text-3); font-weight:700 }
html[lang="ar"] .is-head .vs-cell{ letter-spacing:0; text-transform:none; font-size:13px }
.is-head .vs-cell.is-us{ color:var(--accent); font-size:15px; letter-spacing:.14em }
@media(max-width:640px){
  .vs-row{ grid-template-columns:1fr 1fr }
  .vs-cell.is-label{ grid-column:1 / -1; padding-bottom:4px; font-size:15px }
  .vs-row.is-head .is-label{ display:none }
  .vs-cell.is-them{ border-inline-start:0 }
  .vs-cell{ font-size:13.5px; padding:12px 14px }
  .vs-cell.is-label{ padding:14px 14px 2px }
}

/* ---------- 12b. FIRST 30 DAYS ---------- */
.days{ list-style:none; margin:0; padding:0; display:grid; gap:0; position:relative }
.days::before{
  content:''; position:absolute; inset-block:0; inset-inline-start:46px; width:1px;
  background:linear-gradient(180deg, var(--accent-line), var(--line) 30%, var(--line) 70%, transparent);
}
.day{
  display:grid; grid-template-columns:92px minmax(0,1.05fr) minmax(0,.95fr);
  gap:var(--s5); align-items:start; padding-block:var(--s6);
  border-bottom:1px solid var(--line); position:relative;
}
.day:last-child{ border-bottom:0 }
.days-cta{ margin-top:var(--s6); display:flex; justify-content:center }
@media(max-width:560px){ .days-cta .btn{ width:100%; white-space:normal } }
.day-mark{
  position:sticky; top:96px; z-index:1;
  width:92px; display:grid; justify-items:center; text-align:center; gap:2px;
  padding:10px 6px; border-radius:var(--r-md);
  background:var(--bg-raised); border:1px solid var(--line-strong);
}
.day-when, .day-unit{ font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--text-3); font-weight:700 }
html[lang="ar"] .day-when, html[lang="ar"] .day-unit{ letter-spacing:0; font-size:12px }
.day-mark b{ font-family:var(--f-display); font-size:26px; font-weight:800; color:var(--accent); line-height:1.05; letter-spacing:-.02em }
html[lang="ar"] .day-mark b{ font-size:20px }
.day-body .h-card{ margin-bottom:var(--s2) }
.day-body p{ font-size:14.5px; line-height:1.8; color:var(--text-2); max-width:52ch }
.day-media{ display:grid; gap:var(--s4); min-width:0 }
.day-body{ min-width:0 }
.day-media-app{ grid-template-columns:repeat(2,minmax(0,1fr)); align-items:start; max-width:480px }
.app-video{ margin:0 }
.phone.phone-hevy{ aspect-ratio:480/1040; background:#fff }
.day-media-app .hevy-video, .day-media-app .app-video{ max-width:none; width:100% }
.method-hevy{ margin-top:var(--s5); max-width:160px; justify-self:center; align-self:center; margin-inline:auto }
.day-media-app > .figure{ min-width:0 }
/* Frame hugs the logo: logo width + a small margin on each side */
.day-media-app .figure[data-slot="hevy-program"]{ justify-self:start; width:max-content; max-width:100% }
.day-media-app .hevy-mock{ aspect-ratio:auto; min-height:0; width:max-content; padding:14px 16px; gap:12px; border-radius:16px }
.day-media-app .hevy-mock img{ width:120px; display:block }
.day-media-app .hevy-mock .mock-rows{ width:120px; gap:7px }
.day-media-app .hevy-mock .mock-rows i{ height:8px }
.phone{
  border-radius:28px; overflow:hidden; border:1px solid var(--line-strong);
  background:#000; box-shadow:0 20px 50px rgba(0,0,0,.5), inset 0 0 0 4px #0e0f11;
  aspect-ratio:446/798;
}
.phone video{ display:block; width:100%; height:100%; object-fit:cover; background:#000; pointer-events:none; user-select:none; -webkit-user-select:none; -webkit-touch-callout:none }
/* No player UI at all — not even the iOS/Android "start playback" overlay */
.phone video::-webkit-media-controls,
.phone video::-webkit-media-controls-panel,
.phone video::-webkit-media-controls-overlay-play-button,
.phone video::-webkit-media-controls-start-playback-button{ display:none !important; -webkit-appearance:none }
.phone{ -webkit-user-select:none; user-select:none }
.day-media .figure figcaption{ margin-top:var(--s2) }
.day-media .btn{ justify-self:start }

/* Mocks — honest illustrations until real screenshots drop in */
.slot-mock{ display:grid; place-items:center; min-height:150px; position:relative; padding:var(--s5); border-style:dashed; border-color:rgba(255,255,255,.22) }
.hevy-mock{ gap:var(--s4); aspect-ratio:790/330 }
.hevy-mock img{ width:120px; height:auto; opacity:.85; cursor:auto }
.hevy-mock:hover img{ transform:none }
.mock-rows{ display:grid; gap:8px; width:70% }
.mock-rows i{ display:block; height:10px; border-radius:999px; background:rgba(255,255,255,.08) }
.mock-rows i:nth-child(1){ width:88% } .mock-rows i:nth-child(2){ width:62% } .mock-rows i:nth-child(3){ width:74% } .mock-rows i:nth-child(4){ width:50% }
.video-mock{
  aspect-ratio:16/10; place-items:center;
  background:
    radial-gradient(60% 60% at 50% 40%, rgba(0,212,255,.10), transparent 70%),
    linear-gradient(180deg, #16181b, #0e0f11);
}
.mock-play{ width:56px; height:56px; border-radius:50%; display:grid; place-items:center; background:rgba(255,255,255,.1); border:1px solid var(--line-strong); color:var(--text) }
.mock-note{
  position:absolute; inset-inline:var(--s4); inset-block-end:var(--s4);
  padding:10px 14px; border-radius:var(--r-md); font-size:13px; line-height:1.5;
  background:rgba(10,11,12,.86); border:1px solid var(--accent-line); color:var(--text);
}
/* Real form-review example: photo with the coach's note over the floor area */
.review-example{ max-width:280px; margin:0 }
.review-shot{ position:relative; display:block; border-radius:var(--r-lg); overflow:hidden; border:1px solid var(--line-strong) }
.review-shot img{ display:block; width:100%; height:auto; aspect-ratio:386/660; object-fit:cover }
.review-note{
  position:absolute; inset-inline:10px; inset-block-end:10px;
  display:grid; gap:3px; padding:10px 12px; border-radius:12px;
  background:rgba(10,11,12,.88); border:1px solid var(--accent-line);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  font-size:13px; line-height:1.55; color:var(--text); pointer-events:none;
}
.review-note b{ font-size:11px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--accent) }
html[lang="ar"] .review-note b{ letter-spacing:0; font-size:12px }
.chat-mock{ display:grid; gap:8px; padding:var(--s4); border-radius:var(--r-md); background:var(--bg-raised); border:1px solid var(--line) }
.bubble{ max-width:88%; padding:10px 14px; border-radius:16px; font-size:13.5px; line-height:1.55; color:var(--text) }
.bubble.them{ background:rgba(255,255,255,.07); justify-self:start; border-start-start-radius:4px }
.bubble.me{ background:rgba(0,212,255,.14); border:1px solid var(--accent-line); justify-self:end; border-start-end-radius:4px }
.checkin-mock{ display:grid; gap:var(--s3); padding:var(--s4) var(--s5); border-radius:var(--r-md); background:var(--bg-raised); border:1px solid var(--line) }
.ck-title{ font-size:12.5px; color:var(--text-3); font-weight:700 }
.ck-bars{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px; align-items:end; height:96px }
.ck-bars i{ display:block; height:var(--h); border-radius:6px 6px 2px 2px; background:linear-gradient(180deg, var(--accent), rgba(0,212,255,.35)) }
.ck-foot{ font-size:13px; color:var(--text-2) }

@media(max-width:900px){
  .day{ grid-template-columns:72px minmax(0,1fr); }
  .day-mark{ width:72px; top:80px }
  .day-media{ grid-column:2 }
  .days::before{ inset-inline-start:36px }
}
@media(max-width:560px){
  .day{ grid-template-columns:minmax(0,1fr); gap:var(--s4); padding-block:var(--s5) }
  .day-mark{ position:static; width:auto; grid-auto-flow:column; justify-content:start; align-items:baseline; gap:6px; padding:6px 12px; border-radius:999px; justify-self:start }
  .day-mark b{ font-size:18px }
  .day-media{ grid-column:1 }
  .day-media-app{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; max-width:none }
  .day-media-app .figure figcaption{ font-size:11.5px }
  .phone{ border-radius:20px }
  .days::before{ display:none }
  .day-media .btn{ width:100%; white-space:normal }
}

/* ---------- 13. REQUIREMENTS ---------- */
#requirements .timeline{ display:grid; grid-template-columns:1fr 1fr; gap:16px; counter-reset:req }
#requirements .tl-item{ display:grid; grid-template-columns:auto 1fr; gap:var(--s4); counter-increment:req }
#requirements .tl-item:has(.figure){ grid-column:1 / -1 }
#requirements .tl-rail{ display:flex; flex-direction:column; align-items:center; gap:var(--s3) }
#requirements .tl-rail::after{
  content:counter(req, decimal-leading-zero);
  font-family:var(--f-serif); font-style:italic; color:var(--accent); font-size:15px;
}
html[lang="ar"] #requirements .tl-rail::after{ font-family:var(--f-serif-ar); font-style:normal }
.tl-body .h-card{ margin-bottom:var(--s2) }
.tl-body p{ font-size:14.5px; line-height:1.8; color:var(--text-2) }
.tl-body .figure{ margin-top:var(--s5); max-width:720px }
.demo-photo img{ aspect-ratio:1600/679 }
@media(max-width:760px){ #requirements .timeline{ grid-template-columns:1fr } }

/* ---------- 14. PACKAGE — plan card + duration tiles ---------- */
.pricing{ display:grid; grid-template-columns:1.05fr .95fr; gap:16px; align-items:stretch }
.pricing > *{ min-width:0 }
.plan{ display:flex; flex-direction:column; padding:28px }
.plan-name{ font-family:var(--f-display); font-size:22px; font-weight:800; letter-spacing:-.02em; margin-bottom:var(--s2) }
.plan-for{ color:var(--text-2); font-size:14.5px; line-height:1.6 }
.plan .ticks{ margin-top:var(--s5) }
.plan .ticks li{ font-size:14.5px }
.plan-foot{ margin-top:auto; padding-top:var(--s5); font-size:13px; color:var(--text-3); line-height:1.6 }
.price-col{ display:grid; gap:12px; align-content:start }
.price-rows{ display:grid; grid-template-columns:1fr 1fr; gap:12px }
.price-row{
  position:relative; display:flex; flex-direction:column; gap:6px;
  padding:22px; min-height:186px;
  background:linear-gradient(160deg, rgba(255,255,255,.05), rgba(255,255,255,.015));
  border:1px solid var(--line-strong); border-radius:var(--r-lg);
  color:var(--text);
}
.price-row.is-popular{ border-color:var(--accent-line); background:linear-gradient(160deg, rgba(0,212,255,.12), rgba(255,255,255,.02)) }
.price-badge{
  position:absolute; inset-block-start:-11px; inset-inline-start:16px;
  padding:4px 10px; border-radius:999px; font-size:11.5px; font-weight:800;
  background:var(--accent); color:var(--accent-ink); letter-spacing:.02em;
}
.price-dur{ font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--text-3); font-weight:700; margin-bottom:4px }
html[lang="ar"] .price-dur{ letter-spacing:0; text-transform:none; font-size:13.5px }
/* Big number = what you pay. Small line under it = the monthly breakdown. */
.price-total{ display:block; margin-top:2px }
.price-amt{ font-family:var(--f-display); font-size:clamp(34px,3.4vw,44px); font-weight:900; letter-spacing:-.04em; line-height:1.05; display:inline-flex; align-items:baseline; gap:6px }
.price-amt .cur{ font-size:13px; letter-spacing:.12em; text-transform:uppercase; color:var(--text-3); font-weight:700 }
.price-break{ display:grid; gap:4px; margin-top:auto; padding-top:var(--s3); border-top:1px solid var(--line) }
.price-pm{ font-size:13px; font-weight:600; color:var(--text-2); line-height:1.5 }
.price-was{ font-size:13px; color:var(--text-3); text-decoration:line-through }
.price-save{ display:block; font-size:12.5px; font-weight:700; color:var(--accent) }
/* Approximate local price under the USD total (foreign page, pricing.js) */
.price-local{ display:block; margin-top:4px; font-size:13.5px; font-weight:600; color:var(--text-2) }
.is-popular .price-local{ color:var(--text) }
.price-fx{ margin:0; font-size:12.5px; line-height:1.6; color:var(--text-3); text-align:center }
.guarantee{
  display:flex; gap:var(--s3); align-items:flex-start;
  padding:14px 16px; border:1px dashed var(--line-strong); border-radius:var(--r-md);
  font-size:13.5px; color:var(--text-2); line-height:1.6;
}
.guarantee svg{ flex-shrink:0; margin-top:3px; color:var(--accent) }
.guarantee strong{ color:var(--text) }
.guarantee a{ color:var(--accent); text-decoration:underline; text-underline-offset:3px }
.price-micro{ font-size:12.5px; color:var(--text-3); line-height:1.6; text-align:center; margin:0 }
.pay-cta{ margin-top:var(--s5) }
.pay-note{ display:flex; gap:var(--s3); align-items:flex-start; font-size:13.5px; color:var(--text-2); line-height:1.6; max-width:60ch }
.pay-note svg{ flex-shrink:0; margin-top:3px }
@media(max-width:900px){
  .pricing{ grid-template-columns:1fr }
}
@media(max-width:520px){
  .pricing{ gap:12px }
  .plan, .price-row{ padding:20px }
  .price-rows{ grid-template-columns:1fr 1fr; gap:10px }
  .price-row{ min-height:0; padding:18px 14px }
  .price-badge{ inset-inline-start:12px }
  .price-amt{ font-size:30px }
}
@media(max-width:360px){ .price-rows{ grid-template-columns:1fr } }

/* ---------- 15. PAYMENT & PROCESS (steps) ---------- */
#pay .timeline{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px }
#pay .tl-item{ display:flex; flex-direction:column; min-height:210px }
#pay .tl-rail{ margin-bottom:var(--s5) }
.tl-num{
  font-family:var(--f-serif); font-style:italic; font-weight:400;
  font-size:clamp(40px,4.4vw,54px); line-height:1; color:var(--accent);
}
html[lang="ar"] .tl-num{ font-family:var(--f-serif-ar); font-style:normal }
#pay .tl-body p + p{ margin-top:var(--s3) }
.tl-link{ display:inline-flex; align-items:center; gap:6px; margin-top:var(--s3); font-size:13.5px; font-weight:700; color:var(--accent) }
html[dir="rtl"] .tl-link svg{ transform:scaleX(-1) }
.pay-links{ display:grid; gap:8px; margin-top:var(--s4) }
.pay-link{ justify-content:flex-start; gap:var(--s3); white-space:normal }
.pay-link b{ font-weight:800 }
.pay-link .price-go{ margin-inline-start:auto }
.pay-link .price-go{ position:static; transform:none; color:var(--accent) }
html[dir="rtl"] .pay-link .price-go{ transform:scaleX(-1) }
#pay .tl-cta{ justify-content:center; background:linear-gradient(160deg, rgba(0,212,255,.10), rgba(255,255,255,.02)); border-color:var(--accent-line) }
#pay .tl-cta .h-card{ margin-bottom:var(--s4) }
#pay .tl-cta .btn{ white-space:normal; text-align:center }
@media(max-width:900px){ #pay .timeline{ grid-template-columns:repeat(2,1fr) } }
@media(max-width:560px){ #pay .timeline{ grid-template-columns:1fr } #pay .tl-item{ min-height:0 } }

/* ---------- 16. COACH ---------- */
.coach-grid{ display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(32px,5vw,72px); align-items:start }
.coach-photo{ position:sticky; top:96px; border-radius:var(--r-lg); overflow:hidden; border:1px solid var(--line-strong); background:var(--bg-raised) }
.coach-photo img{ width:100%; height:auto; aspect-ratio:3/4; object-fit:cover; object-position:center 12%; display:block; cursor:zoom-in }
.coach-quote{ margin-bottom:var(--s6) }
.coach-bio{ display:grid; gap:var(--s4) }
.coach-bio .lede{ max-width:58ch; font-size:clamp(15px,1.45vw,16.5px) }
.creds{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:var(--s6) }
.cred{ padding:18px 20px; display:grid; gap:4px }
.cred b{ font-family:var(--f-display); font-size:17px; font-weight:800; letter-spacing:-.01em }
.cred span{ font-size:12.5px; color:var(--text-3); letter-spacing:.04em }
@media(max-width:860px){ .coach-grid{ grid-template-columns:1fr } .coach-photo{ position:static; max-width:520px } }
@media(max-width:480px){ .creds{ grid-template-columns:1fr } }

/* ---------- 16b. TRUST STRIP (after the problem) ---------- */
.trust{ padding-block:clamp(40px,5vw,64px) var(--pad-section) }
.trust-grid{ display:grid; grid-template-columns:1.15fr .85fr; gap:var(--s5); align-items:stretch }
.trust-card{
  display:grid; gap:var(--s5); align-content:start;
  padding:clamp(22px,2.8vw,34px);
  background:var(--bg-raised); border:1px solid var(--line-strong); border-radius:var(--r-lg);
}
.trust-head{ display:flex; align-items:center; gap:var(--s4) }
.trust-avatar{ width:72px; height:72px; border-radius:50%; overflow:hidden; border:2px solid var(--accent-line); flex-shrink:0; display:block; background:var(--bg-raised) }
.trust-avatar img{ width:100%; height:100%; object-fit:cover; object-position:50% 6%; transform:scale(2.1); transform-origin:50% 14%; display:block }
.trust-name{ display:block; font-family:var(--f-display); font-size:20px; font-weight:800; letter-spacing:-.01em }
.trust-role{ display:block; font-size:13px; color:var(--text-2); margin-top:2px }
.trust-line{ font-size:clamp(15px,1.45vw,16.5px); color:var(--text-2); line-height:1.7; max-width:52ch; margin:0 }
.trust-limit{
  margin:0; padding:12px 14px; border-inline-start:3px solid var(--accent);
  background:rgba(0,212,255,.06); border-radius:0 10px 10px 0;
  font-size:clamp(14.5px,1.35vw,16px); font-weight:700; color:var(--text); line-height:1.7; max-width:52ch;
}
html[dir="rtl"] .trust-limit{ border-radius:10px 0 0 10px }
.trust-nums{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s3); border-block:1px solid var(--line); padding-block:var(--s4) }
.trust-nums > div{ display:grid; gap:8px; align-content:start }
.trust-nums b{ font-family:var(--f-display); font-size:clamp(24px,2.6vw,32px); font-weight:800; letter-spacing:-.02em; color:var(--accent); line-height:1.15; min-height:1.15em }
.trust-nums span{ font-size:12.5px; color:var(--text-3) }
.trust-nums b span{ font-size:inherit; color:inherit }
html[lang="ar"] .trust-nums b{ letter-spacing:0 }
.trust-badges{ display:flex; flex-wrap:wrap; gap:8px }
.trust-badges .badge{
  display:inline-flex; align-items:center; gap:6px;
  padding:7px 12px; border-radius:999px; font-size:12.5px; font-weight:700;
  background:rgba(255,255,255,.05); border:1px solid var(--line-strong); color:var(--text);
}
.trust-badges .badge svg{ color:var(--accent) }
.trust-more{ display:inline-flex; align-items:center; gap:6px; font-size:13.5px; font-weight:700; color:var(--text-2) }
.trust-more:hover{ color:var(--accent) }
html[dir="rtl"] .trust-more svg{ transform:scaleX(-1) }

/* Video slot: poster now, player later. */
.trust-video{ min-width:0; max-width:100%;
  position:relative; min-height:280px; border-radius:var(--r-lg); overflow:hidden; isolation:isolate;
  border:1px dashed rgba(255,255,255,.28); background:var(--bg-raised);
  display:grid; place-items:center; text-align:center; padding:var(--s6);
}
.trust-video > img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 20%; z-index:-1; filter:grayscale(.4) brightness(.35) blur(2px) }
.trust-video video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0 }
.trust-video-ui{ display:grid; gap:6px; justify-items:center; position:relative; z-index:1 }
.trust-video-ui b{ font-family:var(--f-display); font-size:17px; font-weight:800 }
.trust-video-ui > span{ font-size:13px; color:var(--text-2) }
.trust-play{
  width:64px; height:64px; border-radius:50%; display:grid; place-items:center; margin-bottom:var(--s3);
  background:var(--accent); color:var(--accent-ink); box-shadow:0 0 0 10px rgba(0,212,255,.14);
}
.trust-video.is-live{ border-style:solid; cursor:pointer }
.trust-video.is-live .trust-video-ui > span{ display:none }
@media(max-width:860px){
  .trust-grid{ grid-template-columns:1fr }
  .trust-video{ min-height:240px }
}
@media(max-width:480px){
  .trust-card{ padding:18px }
  .trust-nums b{ font-size:22px }
}

/* ---------- 17. FAQ ---------- */
.faq-grid{ display:grid; grid-template-columns:.8fr 1.2fr; gap:clamp(32px,5vw,72px); align-items:start }
.faq-side{ position:sticky; top:96px }
.faq-side .h-section{ font-size:clamp(56px,8vw,112px); line-height:.9 }
html[lang="ar"] .faq-side .h-section{ font-size:clamp(44px,6.4vw,84px); line-height:1.2 }
.faq{ counter-reset:faq; border-block-start:1px solid var(--line) }
.faq-item{ border-block-end:1px solid var(--line); counter-increment:faq }
.faq-q{
  width:100%; display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:var(--s5);
  padding-block:var(--s5); min-height:64px;
  background:none; border:none; cursor:pointer; text-align:start;
  font-family:var(--f-display); font-size:clamp(15px,1.9vw,18px); font-weight:700;
  color:var(--text); letter-spacing:-.015em;
  transition:color var(--t-fast);
}
html[lang="ar"] .faq-q{ letter-spacing:0 }
.faq-q::before{
  content:counter(faq, decimal-leading-zero);
  font-family:var(--f-serif); font-style:italic; font-weight:400; font-size:17px; color:var(--accent); width:2.2em;
}
html[lang="ar"] .faq-q::before{ font-family:var(--f-serif-ar); font-style:normal }
.faq-q:hover{ color:var(--accent) }
.faq-icon{ position:relative; width:16px; height:16px; flex-shrink:0; color:var(--text-3); transition:color var(--t-fast), transform var(--t-mid) var(--e-out) }
.faq-icon::before,.faq-icon::after{
  content:''; position:absolute; inset-block-start:50%; inset-inline-start:0;
  width:16px; height:1.5px; background:currentColor; transform:translateY(-50%);
  transition:transform var(--t-mid) var(--e-out), opacity var(--t-fast);
}
.faq-icon::after{ transform:translateY(-50%) rotate(90deg) }
.faq-q[aria-expanded="true"] .faq-icon{ color:var(--accent) }
.faq-q[aria-expanded="true"] .faq-icon::after{ transform:translateY(-50%) rotate(0deg); opacity:0 }
.faq-a{ height:0; overflow:hidden; transition:height var(--t-mid) var(--e-out) }
html:not(.js) .faq-a{ height:auto }
.faq-a > div{ padding-inline-start:calc(2.2em + var(--s5)) }
.faq-a p{ padding-block-end:var(--s6); font-size:14.5px; line-height:1.85; color:var(--text-2); max-width:62ch }
.faq-a p + p{ padding-block-end:0; margin-block-end:var(--s4) }
@media(max-width:860px){ .faq-grid{ grid-template-columns:1fr } .faq-side{ position:static } .faq-a > div{ padding-inline-start:0 } }

/* ---------- 18. START ---------- */
#start{ overflow:hidden }
#start::before{
  content:''; position:absolute; inset:-30% 0 auto; height:120%; z-index:-1; pointer-events:none;
  background:radial-gradient(600px 360px at 50% 60%, rgba(0,212,255,.14), transparent 70%);
}
#start .h-section{ margin-inline:auto; max-width:16ch }
.start-actions{ display:flex; gap:var(--s3); justify-content:center; flex-wrap:wrap }

/* ---------- 15. FOOTER ---------- */
.footer{ border-block-start:1px solid var(--line); padding-block:var(--s9) var(--s8); position:relative; z-index:2 }
.footer-grid{ display:grid; gap:var(--s7); grid-template-columns:1.2fr 1fr; align-items:start }
@media(max-width:760px){ .footer-grid{ grid-template-columns:1fr } }
.socials{ display:flex; gap:var(--s3); flex-wrap:wrap; margin-block-start:var(--s5) }
.social{
  display:inline-flex; align-items:center; gap:var(--s3);
  min-height:48px; padding:0 var(--s5);
  border:1px solid var(--line); border-radius:999px;
  font-size:13px; font-weight:600; color:var(--text-2);
  transition:border-color var(--t-fast), color var(--t-fast), transform var(--t-fast);
}
.social:hover{ border-color:var(--line-strong); color:var(--text); transform:translateY(-2px) }
.social img{ width:18px; height:18px; filter:brightness(0) invert(1); opacity:.7 }
.social:hover img{ opacity:1 }
.footer-legal{
  margin-block-start:var(--s8); padding-block-start:var(--s5);
  border-block-start:1px solid var(--line);
  display:flex; flex-wrap:wrap; gap:var(--s4); justify-content:space-between;
  align-items:center;
  font-size:12px; color:var(--text-3);
}
.footer-legal a{
  display:inline-flex; align-items:center; min-height:44px;
  transition:color var(--t-fast);
}
.footer-legal a:hover{ color:var(--text) }
.region-switch{
  display:inline-flex; align-items:center; min-height:44px;
  background:none; border:0; padding:0;
  font-family:inherit; font-size:inherit; color:var(--text-3);
  cursor:pointer; transition:color var(--t-fast);
}
.region-switch:hover{ color:var(--accent) }

/* ---------- 16. STICKY CTA (mobile) ---------- */
.sticky-cta{
  position:fixed; inset-inline:0; inset-block-end:0; z-index:70;
  padding:var(--s3) var(--pad-gutter);
  padding-block-end:calc(var(--s3) + env(safe-area-inset-bottom));
  background:rgba(10,11,12,.9);
  backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
  border-block-start:1px solid var(--line);
  display:flex; gap:var(--s3); align-items:center;
  transform:translateY(110%);
  transition:transform var(--t-mid) var(--e-out);
}
.sticky-cta.show{ transform:translateY(0) }
.sticky-cta .btn{ flex:1 }
.sticky-cta .btn-ghost{ flex:0 0 auto }
.sticky-cta .btn-primary{ white-space:normal; text-align:center }
@media(min-width:820px){ .sticky-cta{ display:none } }
@media(max-width:819px){ body{ padding-block-end:84px } }

/* ---------- 17. LIGHTBOX ---------- */
.lightbox{
  position:fixed; inset:0; z-index:200;
  background:rgba(6,7,8,.95);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  display:grid; place-items:center; padding:var(--s5);
  opacity:0; pointer-events:none;
  transition:opacity var(--t-mid) var(--e-out);
}
.lightbox.open{ opacity:1; pointer-events:auto }
.lightbox img{
  max-width:min(100%,1100px); max-height:88vh; width:auto;
  border-radius:var(--r-md); border:1px solid var(--line-strong);
  transform:scale(.97); transition:transform var(--t-mid) var(--e-soft);
}
.lightbox.open img{ transform:scale(1) }
.lightbox-close{
  position:absolute; inset-block-start:var(--s5); inset-inline-end:var(--s5);
  width:48px; height:48px; border-radius:50%;
  background:var(--surface); border:1px solid var(--line-strong);
  color:var(--text); cursor:pointer; display:grid; place-items:center;
  transition:background var(--t-fast), transform var(--t-fast);
}
.lightbox-close:hover{ background:var(--surface-hi); transform:rotate(90deg) }

/* ---------- 18. LANGUAGE VISIBILITY ---------- */
/* Block-level pairs */
.ar{ display:none } .en{ display:block }
html[lang="ar"] .ar{ display:block } html[lang="ar"] .en{ display:none }
/* Inline pairs */
.ar-i{ display:none } .en-i{ display:inline }
html[lang="ar"] .ar-i{ display:inline } html[lang="ar"] .en-i{ display:none }

/* ---------- 19. MOTION ---------- */
/* Scroll reveal — opacity + transform only. Never width/height/top. */
.reveal{
  opacity:0; transform:translateY(18px);
  transition:opacity .7s var(--e-out), transform .7s var(--e-out);
  transition-delay:calc(var(--i, 0) * 70ms);
  will-change:opacity, transform;
}
.reveal.in{ opacity:1; transform:none }
.reveal.in{ will-change:auto }

/* Headline line-mask — the hero's one piece of choreography */
.mask{ overflow:hidden; display:block }
.mask > span{
  display:block;
  transform:translateY(105%);
  transition:transform 1s var(--e-soft);
  transition-delay:calc(var(--i, 0) * 90ms);
}
.in .mask > span, .mask.in > span{ transform:none }

/* Hairline that draws itself in */
.rule-draw{
  height:1px; background:var(--line-strong);
  transform:scaleX(0); transform-origin:inline-start;
  transition:transform .9s var(--e-soft);
}
.rule-draw.in{ transform:scaleX(1) }

/* Respect the user. Non-negotiable. */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
  .reveal{ opacity:1 !important; transform:none !important }
  .mask > span{ transform:none !important }
  .rule-draw{ transform:scaleX(1) !important }
  .scroll-cue-chevron{ animation:none !important }
  .scroll-cue .actual-text, .scroll-cue .hover-text{ transition:none !important }
}

/* ---------- 20. UTILITIES ---------- */
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.stack-sm{ display:grid; gap:var(--s3) }
.stack{ display:grid; gap:var(--s5) }
.center{ text-align:center; justify-items:center }
.center .lede{ margin-inline:auto }
.center .eyebrow::before{ display:none }

/* Skip link */
.skip{
  position:absolute; inset-block-start:-100px; inset-inline-start:var(--s4); z-index:300;
  background:var(--accent); color:var(--accent-ink);
  padding:var(--s3) var(--s5); border-radius:var(--r-sm);
  font-weight:700; font-size:13px;
  transition:inset-block-start var(--t-fast);
}
.skip:focus{ inset-block-start:var(--s4) }

/* ---------- OFFER BADGE ---------- */
.offer{
  display:inline-flex; align-items:center; gap:var(--s2);
  padding:6px var(--s4); border-radius:999px;
  background:var(--accent); color:var(--accent-ink);
  font-size:11px; font-weight:900; letter-spacing:.1em; text-transform:uppercase;
}
html[lang="ar"] .offer{ letter-spacing:.02em; text-transform:none; font-size:12.5px }
.offer-strip{
  display:flex; align-items:center; justify-content:center; gap:var(--s3);
  flex-wrap:wrap; text-align:center;
  margin-block-end:var(--s6); padding:var(--s4) var(--s5);
  border:1px solid var(--accent-line); border-radius:var(--r-md);
  background:var(--accent-dim);
  font-size:13.5px; color:var(--text);
}

/* ---------- FLOATING WHATSAPP ---------- */
.wa-float{
  position:fixed; z-index:75;
  /* Physical `left`, not `inset-inline-start`: a contact button is chrome,
     not content, so it holds the same corner in both languages. Opposite
     corner from the primary CTA button so the two never compete. */
  left:16px;
  inset-block-end:calc(94px + env(safe-area-inset-bottom));
  width:56px; height:56px;
  display:grid; place-items:center;
  color:var(--accent);
  filter:drop-shadow(0 8px 20px rgba(0,0,0,.5));
  /* Hidden until scrolled past the hero (see .show, toggled by JS on the
     same trigger as .sticky-cta). The hero already has its own CTA row;
     on shorter viewports this fixed corner spot can land right on top of
     it, so it simply isn't shown there at all rather than risking the
     overlap. */
  opacity:0; visibility:hidden; transform:translateY(8px) scale(.9);
  transition:opacity var(--t-mid) var(--e-out), transform var(--t-mid) var(--e-out),
             filter var(--t-fast), visibility var(--t-mid);
}
.wa-float.show{ opacity:1; visibility:visible; transform:none }
.wa-float:hover{
  transform:scale(1.07);
  filter:drop-shadow(0 10px 24px rgba(0,212,255,.35));
}
.wa-float:active{ transform:scale(.96) }
.wa-float img{ width:56px; height:56px; border-radius:50%; display:block }
@media(min-width:820px){ .wa-float{ inset-block-end:24px; left:24px } }

/* A pay-tag that is a real link needs a real tap target. */
a.pay-tag{
  min-height:44px; display:inline-flex; align-items:center;
  padding-inline:var(--s5);
  transition:background var(--t-fast), border-color var(--t-fast);
}
a.pay-tag:hover{ background:rgba(0,212,255,.22); border-color:var(--accent) }


/* ============================================================
   22. MOBILE COMPACTION
   ============================================================ */
@media(max-width:640px){
  :root{
    --pad-section: 48px;
    --pad-gutter: 18px;
    --s5:18px; --s6:24px; --s7:32px; --s8:44px; --s9:56px; --s10:72px;
  }
  body{ font-size:15px }

  .h-display{ font-size:clamp(38px,11vw,48px) }
  html[lang="ar"] .h-display{ font-size:clamp(32px,9.4vw,42px) }
  /* Hero slogan is a full sentence — keep it compact on phones */
  .hero .h-display{ font-size:clamp(28px,8.2vw,34px); line-height:1.12 }
  html[lang="ar"] .hero .h-display{ font-size:clamp(25px,7vw,30px); line-height:1.45 }
  .h-section{ font-size:clamp(30px,8.6vw,38px); max-width:none }
  .h-card{ font-size:15.5px }
  .lede{ font-size:14px; line-height:1.65 }
  .eyebrow{ font-size:10.5px; margin-bottom:var(--s4) }
  html[lang="ar"] .eyebrow{ font-size:12px }
  .section-head{ margin-bottom:28px }

  .nav-logo span{ font-size:15px }
  .nav-logo img{ width:28px; height:28px }

  /* Hero: fixed height so the photo crops to the face and the copy sits
     at the floor, instead of a tall column of empty photo. */
  .hero{ min-height:min(100svh, 820px); height:auto; padding-block:110px 32px }
  .hero-bg img, .hero-bg video{ object-position:42% center; filter:brightness(.45) contrast(1.05) saturate(.9) }
  .hero-bg::after{
    background:
      linear-gradient(180deg, rgba(10,11,12,.35) 0%, rgba(10,11,12,.1) 30%, rgba(10,11,12,.82) 66%, var(--bg) 100%) !important;
  }
  .hero .h-display{ max-width:none }
  .hero-foot{ flex-direction:column; align-items:flex-start; gap:var(--s5) }
  .hero-foot .lede{ font-size:14.5px }
  .hero-actions{ width:100%; flex-direction:column }
  .hero-actions .btn{ width:100%; white-space:normal; text-align:center }
  .hero-micro{ font-size:12.5px }
  .hero .scroll-cue{ display:none }
  .scroll-cue-ring{ width:52px; height:52px }

  .ribbon{ padding-block:13px }
  .ribbon-track > span{ font-size:11px; padding-inline:18px }
  html[lang="ar"] .ribbon-track > span{ font-size:12.5px }
  .ribbon-track{ animation-duration:28s }

  .stats{ grid-template-columns:1fr 1fr }
  .stat{ padding:20px; border-bottom:1px solid var(--line-strong) }
  .stat:nth-child(even){ border-inline-end:0 }
  .stat:nth-last-child(-n+2){ border-bottom:0 }
  .stat .n{ font-size:clamp(34px,9vw,42px) }
  .stat .l{ font-size:12px }
  .stat .n.n-word{ font-size:clamp(30px,8vw,38px) }
  .stat .n{ height:auto; min-height:46px }

  .btn{ min-height:48px; padding:0 var(--s5); font-size:14px }
  .btn-sm{ min-height:44px; padding:0 var(--s4); font-size:12.5px }

  .card, .pain, .fit-col, .tl-item, .cred{ padding:18px }
  [data-n]::before{ font-size:40px; inset-block-start:10px; inset-inline-end:14px }
  .pain h3{ font-size:16px }
  .faq-side .h-section{ font-size:clamp(48px,16vw,64px) }
  .start-actions .btn{ width:100% }

  .footer{ padding-block:var(--s8) var(--s7) }
  .sticky-cta{ padding-block:var(--s2) }
  .wa-float{ width:48px; height:48px }
  .wa-float img{ width:48px; height:48px }
}

/* ============================================================
   23. SLIDESHOW (horizontal, swipeable)
   Native scroll-snap does the touch/swipe work for free; JS only
   drives the optional arrow buttons and the dot indicator. The
   track bleeds edge-to-edge so the next card peeks past the
   viewport edge as a scroll affordance, then re-aligns to the
   section gutter via scroll-padding-inline.
   ============================================================ */
.slideshow{
  position:relative;
  /* Bleed past .wrap's own gutter so cards can peek off-screen. */
  margin-inline:calc(var(--pad-gutter) * -1);
}
.slideshow-track{
  display:flex; gap:var(--s4);
  padding-inline:var(--pad-gutter);
  padding-block:4px; /* room for the focus ring without clipping */
  overflow-x:auto; overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;
  scroll-padding-inline:var(--pad-gutter);
  -webkit-overflow-scrolling:touch;
  /* Native panning in both axes: the browser locks each gesture to one
     direction itself, on the compositor thread, so swipes stay smooth. */
  touch-action:pan-x pan-y pinch-zoom;
  scrollbar-width:none; -ms-overflow-style:none;
}
.slideshow-track::-webkit-scrollbar{ display:none }
/* While a mouse drag — or the JS-driven auto-advance animation — is in
   progress, mandatory snapping would fight every intermediate scroll
   position we set, so both turn it off for the duration and rely on the
   destination already being an exact snap point. */
.slideshow-track.is-dragging, .slideshow-track.is-animating{
  scroll-snap-type:none; scroll-behavior:auto;
}
.slideshow-track.is-dragging{ cursor:grabbing; user-select:none; }
.slideshow.is-scrollable .slideshow-track{ cursor:grab }
/* Stops the browser's own image-drag ghost from hijacking the gesture. */
.slideshow-track img{ -webkit-user-drag:none; user-drag:none }
.slideshow-track > *{ scroll-snap-stop:always }
.slideshow-track .slot{
  flex:0 0 auto;
  width:min(80vw, 300px);
  scroll-snap-align:start;
}
@media(min-width:600px){ .slideshow-track .slot{ width:320px } }

/* Story cards: fixed width so the row lines up card-to-card, photo fills
   that width at its own natural height (auto — the before/after
   composites are all different ratios, and a fixed aspect-ratio box
   would crop the widest ones), story text sits below in the same
   column. Different cards end up different heights depending on photo
   ratio and text length — normal for a horizontal scroller, since
   align-items:start already keeps every card pinned to the top. */
.slideshow-track .story-card{
  flex:0 0 auto;
  width:min(86vw, 380px);
  scroll-snap-align:start;
  border-radius:var(--r-lg); border:1px solid var(--line);
  overflow:hidden; background:var(--surface);
  display:flex; flex-direction:column;
}
@media(min-width:600px){ .slideshow-track .story-card{ width:420px } }
@media(min-width:900px){ .slideshow-track .story-card{ width:460px } }

.story-card-photo{ display:block; line-height:0; background:var(--bg-raised) }
.story-card-photo img{
  display:block; width:100%; height:auto;
  cursor:zoom-in; transition:transform .5s var(--e-out);
}
.story-card:hover .story-card-photo img{ transform:scale(1.02) }

.story-card-body{
  padding:var(--s5);
  display:flex; flex-direction:column; gap:var(--s5);
}
.story-block{ display:flex; flex-direction:column; gap:var(--s2) }
.story-label{
  font-family:var(--f-display); font-weight:800; font-size:11px;
  letter-spacing:.1em; text-transform:uppercase; color:var(--accent);
}
html[lang="ar"] .story-label{ letter-spacing:0; text-transform:none; font-size:12.5px }
.story-block p{ font-size:14px; line-height:1.75; color:var(--text-2) }

@media(max-width:640px){
  .slideshow-track .story-card{ width:min(88vw, 340px) }
  .story-card-body{ padding:var(--s4); gap:var(--s4) }
}

/* Arrows: pointer/hover devices only — touch already has swipe. */
.slide-nav{
  display:none; position:absolute; inset-block-start:calc(50% - 4px);
  transform:translateY(-50%);
  width:44px; height:44px; border-radius:50%;
  background:var(--surface); border:1px solid var(--line-strong);
  color:var(--text); align-items:center; justify-content:center;
  cursor:pointer; z-index:6;
  transition:background var(--t-fast), border-color var(--t-fast), color var(--t-fast);
}
.slide-nav:hover{ background:var(--surface-hi); border-color:var(--accent-line); color:var(--accent) }
.slide-nav:disabled{ opacity:.35; pointer-events:none }
.slide-nav.prev{ inset-inline-start:8px }
.slide-nav.next{ inset-inline-end:8px }
/* Mirror the glyphs under RTL instead of swapping prev/next logic. */
html[dir="rtl"] .slide-nav svg{ transform:scaleX(-1) }
@media(hover:hover) and (pointer:fine){ .slideshow.is-scrollable .slide-nav{ display:flex } }

.slide-dots{
  display:flex; align-items:center; justify-content:center; gap:var(--s2);
  margin-block-start:var(--s5);
}
/* Nothing to switch between once every slide already fits on screen. */
.slideshow:not(.is-scrollable) .slide-dots{ display:none }
.slide-dot{
  position:relative;
  width:7px; height:7px; border-radius:50%; padding:0; border:none;
  background:var(--line-strong); cursor:pointer;
  transition:background var(--t-fast), transform var(--t-fast) var(--e-out), width var(--t-fast);
}
/* Same oversized invisible hit-area trick used on the language pill. */
.slide-dot::after{ content:''; position:absolute; inset:-12px }
.slide-dot:hover{ background:var(--text-3) }
.slide-dot[aria-current="true"]{ width:20px; border-radius:4px; background:var(--accent) }

/* Autoplay countdown: a dark overlay grows over the active (bright
   cyan) dot as its interval elapses, so the remaining bright sliver
   reads as "time left" — same idea as a stories progress bar, sized
   down to a dot. ::before, since ::after is already the hit-area. */
.slide-dot::before{
  content:''; position:absolute; inset:0; border-radius:inherit;
  background:rgba(10,11,12,.82);
  transform-origin:left; transform:scaleX(0);
}
html[dir="rtl"] .slide-dot::before{ transform-origin:right }
.slide-dot.is-timed::before{ animation:dotCountdown var(--autoplay-ms, 4000ms) linear forwards }
@keyframes dotCountdown{ from{ transform:scaleX(0) } to{ transform:scaleX(1) } }

@media(max-width:640px){
  .slideshow-track .slot{ width:min(82vw, 280px) }
  .slide-dots{ margin-block-start:var(--s4) }
}

/* ---------- 24. STORY CARDS (restyle on the carousel) ---------- */
.slideshow-track .story-card{ padding:0; overflow:hidden }
.story-card-photo{ display:block; line-height:0; background:var(--bg-raised) }
.story-card-body{ padding:clamp(20px,2.4vw,26px); display:grid; gap:var(--s4) }
.story-label{
  font-family:var(--f-serif); font-style:italic; font-weight:400;
  font-size:17px; color:var(--accent); letter-spacing:0; text-transform:none;
}
html[lang="ar"] .story-label{ font-family:var(--f-serif-ar); font-style:normal; font-size:16px }
.story-block p{ font-size:14px; line-height:1.75; color:var(--text-2) }
.menu-link{ font-family:var(--f-serif); font-weight:400; text-transform:none; letter-spacing:-.01em }
html[lang="ar"] .menu-link{ font-family:var(--f-serif-ar); font-weight:700 }

/* Diet card: text + screenshot side by side */
.method-grid .card-split{ grid-column:1 / -1; display:grid; grid-template-columns:1.15fr 1fr; column-gap:clamp(24px,4vw,56px); align-items:center }
.card-split > .chip{ grid-column:1 / -1; justify-self:start }
.card-split .split-fig{ margin:0; align-self:center }
.card-split .app-video{ max-width:260px; justify-self:center }
.card-split .app-video figcaption{ text-align:center }
@media(max-width:800px){ .method-grid .card-split{ grid-template-columns:1fr } .card-split .split-fig{ margin-top:var(--s5) } }

/* ===== Typography: one bold geometric voice (Cairo) everywhere ===== */
.h-display,.h-section{ font-weight:800 !important; letter-spacing:-.025em }
html[lang="ar"] .h-display,html[lang="ar"] .h-section{ font-weight:800 !important; letter-spacing:0 }
.h-display{ line-height:1.02 } .h-section{ line-height:1.1 }
html[lang="ar"] .h-display{ line-height:1.3 } html[lang="ar"] .h-section{ line-height:1.35 }
.eyebrow[data-ch]::after,.ord,.numeral,[data-n]::before,.fit-list li::before,.vs-cell.is-label,
#requirements .tl-rail::after,.tl-num,.faq-q::before,.story-label,.h-section em,.h-display em{ font-style:normal !important; font-weight:700 }
.menu-link{ font-weight:800 !important }
[data-n]::before{ font-weight:800 }

/* Method grid: 01 · 02 · 03 in one row (reads in order), diet card full width as 04 */
.method-grid{ grid-template-columns:repeat(3,1fr); align-items:stretch }
.method-grid [data-n="04"]{ grid-column:1 / -1 }
@media(max-width:1000px){ .method-grid{ grid-template-columns:1fr } }

/* Hero on wide desktop: stretch the copy across the photo instead of a narrow column */
@media(min-width:1100px){
  .hero .wrap{ max-width:min(1560px, 92vw) }
  .hero .h-display{ max-width:24ch; font-size:clamp(52px,4.6vw,84px) }
  html[lang="en"] .hero .h-display{ font-size:clamp(52px,3.9vw,72px) }
  html[lang="ar"] .hero .h-display{ max-width:22ch; font-size:clamp(56px,5.6vw,100px) }
  .hero-foot{ width:100%; gap:clamp(40px,8vw,160px) }
  .hero-foot .lede{ max-width:62ch; font-size:clamp(16px,1.25vw,19px) }
  .hero-bg::after{
    background:
      linear-gradient(270deg, rgba(10,11,12,.88) 0%, rgba(10,11,12,.55) 42%, rgba(10,11,12,.12) 100%),
      linear-gradient(180deg, rgba(10,11,12,.3) 0%, rgba(10,11,12,.0) 30%, rgba(10,11,12,.78) 80%, var(--bg) 100%);
  }
}


/* ===== Carousel smoothness: keep each card on its own GPU layer so horizontal
   scrolling only moves layers instead of repainting photos + text every frame ===== */
.slideshow-track{ will-change:scroll-position; contain:layout paint }
.slideshow-track .story-card{
  transform:translateZ(0); backface-visibility:hidden;
  contain:layout paint; transition:none;
}
.slideshow-track .story-card:hover{ transform:translateZ(0) }
.slideshow-track .story-card-photo img{ transition:none; transform:none !important; image-rendering:auto }
.slideshow-track.is-dragging, .slideshow-track.is-animating{ pointer-events:auto }
.slideshow-track.is-dragging .story-card, .slideshow-track.is-animating .story-card{ pointer-events:none }

}

/* ===== Diet card: logo + name lockup ===== */
.app-badge{
  display:flex; align-items:center; justify-content:center; gap:clamp(16px,2.4vw,28px);
  padding:clamp(22px,3vw,40px); min-height:240px;
  border:1px solid var(--line); border-radius:var(--r-md);
  background:radial-gradient(120% 120% at 20% 0%, rgba(0,212,255,.10), transparent 60%), rgba(255,255,255,.02);
  flex-wrap:wrap; text-align:center;
}
.app-badge img{ width:clamp(96px,11vw,148px); height:auto; flex-shrink:0; filter:drop-shadow(0 10px 26px rgba(0,0,0,.45)) }
.app-badge-name{
  font-family:var(--f-display); font-weight:800; letter-spacing:-.02em; line-height:1.1;
  font-size:clamp(26px,3.2vw,42px); direction:ltr; unicode-bidi:isolate;
}

/* ===== Refund policy: its own highlighted block at the end ===== */
.refund-section{ padding-block-start:0 }
.refund{
  position:relative; overflow:hidden;
  padding:clamp(26px,4vw,52px);
  border:1px solid var(--accent-line); border-radius:var(--r-lg);
  background:linear-gradient(160deg, rgba(0,212,255,.10), rgba(255,255,255,.02) 55%);
}
.refund-head{ display:flex; align-items:center; gap:var(--s5); margin-bottom:clamp(24px,3.4vw,40px) }
.refund-head .h-section{ font-size:clamp(30px,4.4vw,52px); max-width:none; margin:0 }
.refund-head .eyebrow{ margin-bottom:var(--s2) }
.refund-head .chip{ width:56px; height:56px; border-radius:16px }
.refund-head .chip svg{ width:26px; height:26px }
.refund-steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px }
.refund-step{
  padding:clamp(20px,2.4vw,28px);
  border:1px solid var(--line-strong); border-radius:var(--r-md);
  background:rgba(10,11,12,.55);
  display:flex; flex-direction:column; gap:var(--s3);
}
.refund-step p{ font-size:15px; line-height:1.8; color:var(--text-2) }
.refund-step strong{ color:var(--text) }
.refund-tag{
  align-self:flex-start; font-family:var(--f-display); font-weight:800; font-size:13px; letter-spacing:.04em;
  padding:5px 12px; border-radius:999px; border:1px solid var(--line-strong); color:var(--text-2);
}
.refund-step.is-full{ border-color:var(--accent-line) }
.refund-step.is-full .refund-tag{ background:var(--accent-dim); border-color:var(--accent-line); color:var(--accent) }
.refund-step.is-none{ border-color:rgba(255,180,84,.4) }
.refund-step.is-none .refund-tag{ background:rgba(255,180,84,.12); border-color:rgba(255,180,84,.45); color:var(--warn) }
@media(max-width:900px){ .refund-steps{ grid-template-columns:1fr } .refund-head{ align-items:flex-start } }

/* Diet logo lockup — mobile: compact, side by side */
@media(max-width:800px){
  .card-split .app-badge{ flex-wrap:nowrap; min-height:0; padding:18px 20px; gap:14px; justify-content:center }
  .card-split .app-badge img{ width:84px; max-width:84px }
  .card-split .app-badge-name{ font-size:24px; text-align:start }
}
@media(max-width:380px){
  .card-split .app-badge img{ width:68px; max-width:68px }
  .card-split .app-badge-name{ font-size:20px }
}


/* ============================================================
   HERO — split layout (option G): video at full brightness on
   one half, copy on a solid dark half. Text sits on the start
   side (right in Arabic, left in English). On phones the video
   is a band on top and the copy follows underneath.
   ============================================================ */
.hero.hero-split{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  align-items:stretch; min-height:min(100svh, 920px); height:auto; padding:0;
  background:var(--bg);
}
.hero-split .hero-bg{ position:relative; inset:auto; grid-column:2; grid-row:1; overflow:hidden }
.hero-split .hero-bg img, .hero-split .hero-bg video{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:40% center;
  filter:brightness(.95) contrast(1.03) !important; transform:none;
}
/* soft edge where the video meets the text, plus a light top fade for the nav */
.hero-split .hero-bg::after{
  background:
    linear-gradient(90deg, rgba(10,11,12,0) 72%, var(--bg) 100%),
    linear-gradient(180deg, rgba(10,11,12,.5) 0%, rgba(10,11,12,0) 22%) !important;
}
html[dir="ltr"] .hero-split .hero-bg::after{
  background:
    linear-gradient(270deg, rgba(10,11,12,0) 72%, var(--bg) 100%),
    linear-gradient(180deg, rgba(10,11,12,.5) 0%, rgba(10,11,12,0) 22%) !important;
}
.hero-split .wrap{
  grid-column:1; grid-row:1; width:auto; max-width:none !important; margin:0;
  display:flex; align-items:center;
  padding:clamp(110px,14vh,150px) var(--pad-gutter) clamp(48px,7vh,80px);
}
.hero-split .hero-inner{ max-width:640px !important; margin:0 !important; gap:var(--s5) }
.hero-split .h-display{ max-width:none !important; font-size:clamp(40px,4.3vw,68px) !important; line-height:1.12 !important }
html[lang="ar"] .hero-split .h-display{ font-weight:800; line-height:1.3 !important }
.hero-tag{ margin:-4px 0 0; font-size:clamp(18px,1.65vw,26px); font-weight:700; line-height:1.5; color:var(--text) }
.hero-tag b{ color:var(--accent); font-weight:800 }
.hero-split .hero-foot{ flex-direction:column; align-items:flex-start; width:100%; gap:var(--s5); margin-top:var(--s2) }
.hero-split .hero-foot .lede{ max-width:52ch; font-size:clamp(15px,1.15vw,17px) }
.hero-split .hero-copy{ max-width:none; width:100% }
.hero-split .scroll-cue{ display:none }

@media(max-width:860px){
  .hero.hero-split{ grid-template-columns:1fr; grid-template-rows:auto auto; min-height:0 }
  .hero-split .hero-bg{ grid-column:1; grid-row:1; height:44svh; min-height:260px }
  .hero-split .hero-bg img, .hero-split .hero-bg video{ object-position:45% center }
  .hero-split .hero-bg::after, html[dir="ltr"] .hero-split .hero-bg::after{
    background:linear-gradient(180deg, rgba(10,11,12,.55) 0%, rgba(10,11,12,0) 28%, rgba(10,11,12,0) 70%, var(--bg) 100%) !important;
  }
  .hero-split .wrap{ grid-column:1; grid-row:2; padding:var(--s4) var(--pad-gutter) var(--s7) }
  .hero-split .hero-inner{ max-width:none !important; gap:var(--s4) }
  .hero-split .h-display{ font-size:clamp(30px,8.6vw,40px) !important }
  html[lang="ar"] .hero-split .h-display{ font-size:clamp(28px,8vw,36px) !important }
  .hero-tag{ font-size:clamp(16px,4.6vw,19px) }
}

/* Trust strip without the coach video: the card takes the full row,
   split into two independent columns */
.trust-main, .trust-side{ display:grid; gap:var(--s5); align-content:start }
.trust-video[hidden]{ display:none !important }
.trust-grid:has(.trust-video[hidden]){ grid-template-columns:1fr }
.trust-grid:has(.trust-video[hidden]) .trust-card{ grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); column-gap:clamp(32px,5vw,72px); align-items:start }
@media(max-width:860px){ .trust-grid:has(.trust-video[hidden]) .trust-card{ grid-template-columns:1fr } }


/* ---------- Inside the BA10 app (#app): four real screens ---------- */
.app-shots{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; align-items:start }
.app-shot{ margin:0 }
.app-shot .phone img{ display:block; width:100%; height:100%; object-fit:cover; cursor:zoom-in }
.app-shot figcaption{ margin-top:var(--s3); font-size:13.5px; line-height:1.6; color:var(--text-2) }
@media(max-width:900px){ .app-shots{ grid-template-columns:repeat(2,minmax(0,1fr)) } }

/* ---------- Calories + protein calculator (#calc) ---------- */
.calc{ display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr); gap:clamp(24px,4vw,48px); align-items:start }
.calc-form{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--s4) }
.calc-wide{ grid-column:1 / -1 }
.calc-field{ display:grid; gap:var(--s2); min-width:0; border:0; padding:0; margin:0 }
.calc-field > span, .calc-field legend{ font-size:13.5px; font-weight:600; color:var(--text-2); padding:0; margin-bottom:var(--s2) }
.calc-field > input{
  width:100%; min-height:48px; padding:0 var(--s4); border:1px solid var(--line-strong); border-radius:var(--r-md);
  background:var(--bg-raised); color:var(--text); font-size:15px;
}
.calc-field > input:focus-visible{ outline:2px solid var(--accent); outline-offset:2px }
.calc-seg{ display:flex; flex-wrap:wrap; gap:var(--s2) }
.calc-seg label{ position:relative; cursor:pointer }
.calc-seg input{ position:absolute; opacity:0; width:1px; height:1px }
.calc-seg input + span{ display:inline-flex; align-items:center; min-height:44px; padding:0 var(--s4); border:1px solid var(--line-strong); border-radius:999px; font-size:14px; color:var(--text-2) }
.calc-seg input:checked + span{ border-color:var(--accent); background:var(--accent-dim); color:var(--text) }
.calc-seg input:focus-visible + span{ outline:2px solid var(--accent); outline-offset:2px }
.calc-error{ margin:0; font-size:13.5px; color:var(--warn) }
.calc-form .btn{ justify-self:start }
.calc-result{ display:grid; gap:var(--s4); align-content:start; padding:var(--s5); border:1px solid var(--accent-line); border-radius:var(--r-lg); background:var(--accent-dim) }
.calc-numbers{ margin:0; font-size:clamp(17px,1.9vw,21px); font-weight:700; line-height:1.6 }
.calc-numbers b{ color:var(--accent); font-size:1.25em; direction:ltr; unicode-bidi:isolate }
.calc-note{ margin:0; font-size:13.5px; line-height:1.7; color:var(--text-2) }
.calc-result .btn{ justify-self:start }
@media(max-width:860px){ .calc{ grid-template-columns:1fr } }
@media(max-width:480px){ .calc-form{ grid-template-columns:1fr } .calc-form .btn, .calc-result .btn{ width:100%; justify-self:stretch } }