/* ============================================================
   HERO
   ============================================================ */
.hero{
  position:relative;background:linear-gradient(168deg,var(--fg-navy-900) 0%,var(--fg-navy-800) 52%,var(--fg-navy-700) 100%);
  color:#fff;overflow:hidden;
}
.hero::before{
  content:"";position:absolute;inset:0;
  background-image:radial-gradient(circle at 1px 1px, rgba(255,255,255,.10) 1px, transparent 0);
  background-size:34px 34px;opacity:.45;pointer-events:none;
}
.hero .wrap{position:relative;display:grid;grid-template-columns:1.02fr .98fr;gap:64px;align-items:center;
  /* less air at the foot than at the head: the six cards close the hero now,
     and they bring their own edge */
  padding-block:clamp(34px,4vw,58px) clamp(44px,4.4vw,64px)}

/* One measure for the whole left column, so the eyebrow, the heading, the
   paragraph, the buttons and the credentials all start and end on the same
   two vertical lines. Every block below inherits it rather than setting its
   own — that is what stops one element reading as slightly shifted. */
.hero__text{--measure:32.5rem;max-width:var(--measure)}
.hero .eyebrow{color:var(--fg-steel-400);font-size:12.5px;letter-spacing:.11em;margin-bottom:18px}
html[dir="rtl"] .hero .eyebrow{letter-spacing:.02em}

/* Display setting: tighter than body tracking, tighter line-height than the
   global heading rule, and balanced so the two lines come out near-equal
   instead of a short first line over a long second one. */
.hero h1{
  color:#fff;margin-top:0;max-width:var(--measure);
  font-size:clamp(38px,5vw,60px);line-height:1.04;letter-spacing:-.032em;
  text-wrap:balance;
}
/* Arabic is destroyed by negative tracking and needs the taller leading */
html[dir="rtl"] .hero h1{letter-spacing:0;line-height:1.26}

/* 33em at this size lands the English on three lines with the break falling
   after "print-ready" and after "across" — set by measure, not by a hard
   <br>, so Arabic and every narrower screen still break sensibly. */
/* 32.5rem is measured, not guessed: it is the widest setting at which
   "Iraq" drops to the last line, giving the three lines he asked for —
   .../print-ready / .../across / Iraq and the Gulf. Wider than 528px and
   "Iraq" climbs back up; narrower than 504px and "print-ready" splits. */
.hero p.sub{font-size:18px;line-height:1.62;color:#C8CEDA;margin-top:22px;
  max-width:var(--measure);text-wrap:pretty}
html[dir="rtl"] .hero p.sub{line-height:1.85;max-width:var(--measure)}
.hero-ctas{display:flex;flex-wrap:wrap;align-items:stretch;gap:14px;margin-top:34px}
/* both buttons share one baseline and one height whatever the label length */
.hero-ctas .btn{min-height:50px;padding-block:0}
.trust{
  display:flex;flex-wrap:wrap;align-items:center;row-gap:12px;margin-top:40px;
  padding-top:24px;border-top:1px solid rgba(255,255,255,.14);
  font-size:13px;color:var(--fg-steel-400);
}
.hero .trust{max-width:var(--measure)}
/* The reply time is a different kind of fact from a registration number, and
   it was wrapping onto a second line and leaving the separator before it
   dangling at the end of the first. It gets its own line and no separator. */
.trust__reply{
  display:block;width:100%;margin-top:10px;
  font-size:12.5px;color:var(--fg-steel-400);opacity:.86;
}
.trust .item{display:inline-flex;align-items:center;gap:8px}
/* the separator belongs BEFORE each item after the first, never after one.
   Trailing it left a dot hanging at the end of the row the moment anything
   followed the last .item — which is exactly what the reply line did. */
.trust .item + .item::before{
  content:"";flex:none;width:3px;height:3px;border-radius:50%;
  background:rgba(255,255,255,.34);margin-inline:16px;
}
@media (max-width:520px){
  .trust{row-gap:10px}
  .trust .item{flex:0 0 100%}
  .trust .item + .item::before{display:none}
}
.swiss-dot{width:7px;height:7px;background:var(--fg-swiss-red);border-radius:1px;display:inline-block;flex:none}
/* SVG technical drawing must never be bidi-reordered */
.hero-visual{position:relative;direction:ltr}
.hero-visual svg{width:100%;height:auto;display:block}
@media (max-width:980px){
  .hero .wrap{grid-template-columns:1fr;gap:48px}
  /* width:100% is load-bearing. `margin-inline:auto` makes a stretched grid
     item size to its content instead of the column, and this item's content
     is a percentage-width SVG and an absolutely-positioned canvas — neither
     of which has any intrinsic width. Without it the whole visual collapsed
     to 0x0 on every phone and tablet, taking the interactive 3D hero with it,
     while its absolutely-positioned HUD chips carried on painting loose over
     whatever followed. */
  .hero-visual{order:-1;width:100%;max-width:520px;margin-inline:auto}
}
/* On a phone the illustration used to fill the whole first screen and push
   the headline and the buttons out of sight. Text first, picture after. */
@media (max-width:640px){
  .hero .wrap{gap:32px;padding-block:36px 44px}
  .hero-visual{order:1;max-width:420px}
  .hero p.sub{font-size:17px;margin-top:18px}
  .hero .hero-ctas{margin-top:22px}
}

/* ============================================================
   SERVICE CARDS
   ============================================================ */
.svc-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:56px}
@media (max-width:900px){ .svc-grid{grid-template-columns:1fr} }
.svc{
  border:1px solid var(--fg-hairline);border-radius:var(--r-md);background:#fff;
  padding:44px 40px;display:flex;flex-direction:column;
  transition:border-color .2s var(--ease),box-shadow .2s var(--ease);
}
.svc:hover{border-color:var(--fg-steel-200);box-shadow:var(--shadow-1)}
.svc__num{font-family:var(--font-mono);font-size:13px;color:var(--fg-steel-500);letter-spacing:.08em}
.svc h3{margin-top:14px}
.svc__rows{margin-top:30px;border-top:1px solid var(--fg-hairline)}
.svc__row{display:grid;grid-template-columns:132px 1fr;gap:20px;padding:16px 0;border-bottom:1px solid var(--fg-hairline);font-size:15px}
@media (max-width:560px){
  .svc{padding:32px 24px}
  .svc__row{grid-template-columns:1fr;gap:6px}
}
.svc__row dt{color:var(--fg-steel-500);font-size:13px;text-transform:uppercase;letter-spacing:.08em;padding-top:2px}
html[dir="rtl"] .svc__row dt{letter-spacing:0;font-size:14px;text-transform:none}
.svc__row dd{color:var(--fg-ink)}
.svc__foot{margin-top:auto;padding-top:32px;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.chip{
  display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:500;
  padding:6px 11px;border-radius:var(--r-sm);background:var(--fg-mist-100);
  color:var(--fg-ink-muted);border:1px solid var(--fg-hairline);
}
.chip--rush{color:var(--fg-ink);border-color:var(--fg-platinum)}
.chip--rush .swiss-dot{border-radius:50%}

/* ============================================================
   STEPS
   ============================================================ */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:56px;border-top:1px solid var(--fg-hairline)}
.step{position:relative;padding:40px 32px 8px 0;border-inline-end:1px solid var(--fg-hairline)}
html[dir="rtl"] .step{padding:40px 0 8px 32px}
.step:last-child{border-inline-end:0}
.step__n{
  font-family:var(--font-mono);font-size:56px;line-height:1;color:var(--fg-numeral);
  font-weight:400;letter-spacing:-.03em;display:block;margin-bottom:20px;
}
.step h4,.step h3{font-size:18px;margin-bottom:10px}
.step p{font-size:15px;color:var(--fg-ink-muted)}
@media (max-width:980px){
  .steps{grid-template-columns:1fr;border-top:0}
  .step{border-inline-end:0;border-top:1px solid var(--fg-hairline);padding:28px 0 28px 0;display:grid;grid-template-columns:88px 1fr;gap:20px;align-items:start}
  .step__n{font-size:40px;margin:0}
}

/* ============================================================
   CLINICAL SCOPE GRID
   ============================================================ */
/* heading on the left, the plan on the right — the row used to be half empty */
.scopehead{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center}
@media (max-width:900px){ .scopehead{grid-template-columns:1fr;gap:26px} }
.planart{margin:0;padding:0;justify-self:end;width:100%;max-width:420px}
html[dir="rtl"] .planart{justify-self:start}
@media (max-width:900px){ .planart{justify-self:center;max-width:340px} }
.planart svg{display:block;width:100%;height:auto;fill:none;
  stroke-linecap:round;stroke-linejoin:round}
.planart__frame{stroke:var(--fg-steel-400-onlight,#8A93A6);stroke-width:1.4;opacity:.55}
.planart__hair{stroke:var(--fg-hairline);stroke-width:1.4}
.planart__arch{stroke:var(--fg-navy-800);stroke-width:2}
.planart__pos{stroke:var(--fg-navy-800);stroke-width:1.6}
.planart__dash{stroke:var(--fg-navy-600,#22386A);stroke-width:1.6;
  stroke-dasharray:5 6;opacity:.62}
.planart__dim{stroke:var(--fg-numeral,#828A9B);stroke-width:1.3}

/* auto-fit, not repeat(3): the grid held six case types, then four, then two
   as they were promoted to bands of their own or dropped, and a fixed three
   columns left an empty cell staring back each time. This tracks whatever is
   in it. */
.scope{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:1px;
  background:var(--fg-hairline);border:1px solid var(--fg-hairline);
  border-radius:var(--r-md);overflow:hidden;margin-top:56px}
@media (max-width:900px){ .scope{grid-template-columns:1fr} }
.scope__i{background:#fff;padding:30px 28px;display:flex;gap:20px;align-items:flex-start;transition:background .18s var(--ease)}
.scope__i:hover{background:var(--fg-mist-100)}
/* v1.59: the six were 24px stroke glyphs — the same weight as every other icon
   on the page, for the six hardest things the company does. They are now small
   rendered solids (tools/fgscope.py), each on its own tinted pad so the six
   read as six subjects rather than one list. The tint is the same hue as the
   accent inside its render, at the lightest step that still shows. */
.scope__art{flex:none;width:80px;height:80px;border-radius:16px;
  display:grid;place-items:center;margin-top:1px;overflow:hidden}
/* the render carries its own margin, so the image is drawn larger than the
   pad and the pad crops the empty edge back off */
.scope__art img{width:98px;height:98px;object-fit:contain;display:block}
.scope__art--arch{background:#E4EDFD}
.scope__art--sinus{background:#DCF2EF}
.scope__art--graft{background:#FBEEDA}
.scope__art--zygo{background:#EAE5FC}
.scope__art--subper{background:#DDEEF9}
.scope__art--atoz{background:#FBE3E4}
.scope__i h4,.scope__i h3{font-size:16.5px;margin-bottom:6px}
.scope__i p{font-size:14px;color:var(--fg-ink-muted);line-height:1.55}

/* ============================================================
   WHY — hairline list
   ============================================================ */
.why{display:grid;grid-template-columns:repeat(2,1fr);gap:0 64px;margin-top:56px}
@media (max-width:900px){ .why{grid-template-columns:1fr} }
.why__i{padding:34px 0;border-top:1px solid rgba(255,255,255,.14)}
.why__i h4,.why__i h3{font-size:19px;color:#fff;margin-bottom:10px}
.why__i p{font-size:15.5px;color:var(--fg-steel-400-onlight)}

/* ============================================================
   DISTRIBUTION STRIP
   ============================================================ */
.dist{background:var(--fg-mist-100);border-block:1px solid var(--fg-hairline);padding-block:56px}
.dist .wrap{display:flex;align-items:center;justify-content:space-between;gap:40px;flex-wrap:wrap}
.dist__label{font-size:13px;text-transform:uppercase;letter-spacing:.12em;color:var(--fg-steel-500)}
html[dir="rtl"] .dist__label{letter-spacing:.02em;text-transform:none;font-size:14px}
.dist__logos{display:flex;align-items:center;gap:44px;flex-wrap:wrap}
.dist__logos img{filter:grayscale(1);opacity:.62;transition:filter .25s var(--ease),opacity .25s var(--ease)}
.dist__logos a:hover img{filter:grayscale(0);opacity:1}
.dist__logos .l-iml{width:118px}
.dist__logos .l-res{width:150px}
.dist__logos .l-i3d{width:158px}

/* ============================================================
   PRICING TEASER
   ============================================================ */
.price-facts{border:1px solid var(--fg-hairline);border-radius:var(--r-md);overflow:hidden}
.price-facts div{display:flex;justify-content:space-between;gap:20px;padding:18px 24px;border-bottom:1px solid var(--fg-hairline);font-size:15px}
.price-facts div:last-child{border-bottom:0}
.price-facts b{font-weight:500;font-variant-numeric:tabular-nums}
.price-facts > div > span{color:var(--fg-ink-muted)}

/* ============================================================
   FINAL CTA
   ============================================================ */
.final .wrap{text-align:center;display:flex;flex-direction:column;align-items:center}
.final h2{max-width:16ch}
.final .lead{max-width:52ch}
.final .hero-ctas{justify-content:center}

/* ============================================================
   ACADEMY
   ============================================================ */
.acad{display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:start}
.acad>*{min-width:0}   /* a grid item defaults to min-width:auto — the waitlist row then
                          refuses to shrink and pushes the page sideways on a phone */
@media (max-width:900px){ .acad{grid-template-columns:1fr;gap:44px} }
.trainer{border:1px solid var(--fg-hairline);border-radius:var(--r-md);padding:32px;background:#fff}
.trainer__head{display:flex;align-items:center;gap:14px;margin-bottom:4px}
.trainer__avatar{width:56px;height:56px;border-radius:50%;object-fit:cover;flex:none;
  border:1px solid var(--fg-hairline);background:var(--fg-mist-100)}
.trainer__name{font-size:19px;font-weight:600;letter-spacing:-.02em}
.trainer__role{font-size:13px;color:var(--fg-steel-500);text-transform:uppercase;letter-spacing:.1em;margin-top:6px}
html[dir="rtl"] .trainer__role{letter-spacing:0;text-transform:none;font-size:14px}
.trainer p{font-size:15px;color:var(--fg-ink-muted);margin-top:18px;line-height:1.6}
.waitlist{margin-top:28px;display:flex;gap:10px;flex-wrap:wrap}
.waitlist input{
  flex:1;min-width:220px;padding:13px 16px;border:1px solid var(--fg-hairline);
  border-radius:var(--r-sm);font-size:15px;background:#fff;transition:border-color .15s
}
.waitlist input:focus{border-color:var(--fg-navy-600)}