/* ============================================================
   FUTURE GUIDE — DESIGN TOKENS
   ============================================================ */
:root{
  /* Brand — derived from the actual Future Guide / IML / RESISTA logos */
  --fg-navy-900:#0A1428;
  --fg-navy-800:#0D1A3B;
  --fg-navy-700:#16294F;
  --fg-navy-600:#22386A;
  --fg-navy-soft:#E7EDF7;   /* the navy at 8% — icon chips and quiet panels */

  /* Steel greys. 500 and 400-on-light were below WCAG AA for small text,
     so the text tones were darkened; the pale tones stay for rules,
     borders and large decorative numerals. */
  --fg-steel-500:#67707E;   /* 5.0:1 on white · 4.6:1 on mist */
  --fg-steel-400:#A8AEB8;   /* light text on navy only */
  --fg-steel-400-onlight:#5A6474;
  --fg-steel-200:#D8DCE3;
  --fg-numeral:#828A9B;     /* 3.2:1 on mist — 36px+ display numerals ONLY.
                               Below 18.66px AA needs 4.5:1; use steel-500. */

  --fg-mist-100:#F4F6F9;
  --fg-white:#FFFFFF;
  --fg-ink:#0B1220;
  --fg-ink-muted:#5A6474;

  --fg-swiss-red:#E1121C;
  --fg-platinum:#C9CEDA;
  --fg-success:#147350;   /* darkened to clear AA on its own tint */
  --fg-warning:#9A6210;   /* darkened to clear AA on its own tint */
  --fg-danger:#B42318;

  --fg-hairline:#E6E9EF;

  /* Type */
  --font-en:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;
  --font-ar:'IBM Plex Sans Arabic','Tajawal','Noto Sans Arabic','Noto Naskh Arabic',
            'Geeza Pro','Segoe UI',Tahoma,Arial,sans-serif;
  --font-mono:'IBM Plex Mono',ui-monospace,'SF Mono',Menlo,monospace;

  /* Shape */
  --r-sm:6px; --r-md:12px; --r-lg:20px;

  /* Depth */
  --shadow-1:0 1px 2px rgba(11,18,32,.04), 0 8px 24px rgba(11,18,32,.06);
  --shadow-2:0 1px 2px rgba(11,18,32,.05), 0 18px 48px rgba(11,18,32,.10);

  /* Space */
  --section-y:128px;
  --maxw:1240px;

  /* Motion */
  --ease:cubic-bezier(.2,.7,.3,1);
}
@media (max-width:900px){ :root{ --section-y:72px; } }

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:var(--font-en);
  font-size:17px; line-height:1.65; color:var(--fg-ink);
  background:var(--fg-white);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
html[dir="rtl"] body{ font-family:var(--font-ar); font-size:18px; line-height:1.85; }
img{max-width:100%;display:block;height:auto}
a{color:inherit;text-decoration:none}
button,input{font:inherit;color:inherit}

/* Focus — visible, WCAG AA */
:focus-visible{outline:2px solid var(--fg-navy-600);outline-offset:2px;border-radius:3px}

/* Latin lock inside Arabic */
.ltr{direction:ltr;unicode-bidi:isolate;display:inline-block}
h1.ltr,h2.ltr,h3.ltr,h4.ltr{display:block}
.num{font-variant-numeric:tabular-nums;direction:ltr;unicode-bidi:isolate}

/* ---------- Layout ---------- */
.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:24px}
.section{padding-block:var(--section-y)}

/* ---------- the rhythm of an inner page ----------
   The home page earns 128px between sections: each one is a different kind of
   thing and the space is what separates them. An inner page is one subject in
   several parts, and at the same 128px its parts sat 256px apart — far enough
   that each read as the end of the page. The client reported it three times,
   on three different pages, before it was clear the complaint was not about
   any of them: it is the rule.

   So it is fixed once, for every page that opens with a navy hero, rather
   than page by page as each one is noticed. The home page keeps the wide
   rhythm — it has no .page-hero, which is exactly the distinction that
   matters. */
.page:not(#page-home) .section{padding-block:calc(var(--section-y) * .52)}
.page-hero{padding-bottom:calc(var(--section-y) * .52) !important}
/* the guided-surgery block closes the How It Works page, so it keeps a little
   more air under it than between the sections above */
#page-how .gsec{padding-block:calc(var(--section-y) * .48) calc(var(--section-y) * .58)}
.section--mist{background:var(--fg-mist-100)}
.section--navy{background:linear-gradient(168deg,var(--fg-navy-900),var(--fg-navy-700));color:#fff}
.measure{max-width:62ch}

/* ---------- Type ---------- */
h1,h2,h3,h4{letter-spacing:-.02em;font-weight:600;line-height:1.12;color:var(--fg-ink)}
html[dir="rtl"] h1,html[dir="rtl"] h2,html[dir="rtl"] h3,html[dir="rtl"] h4,html[dir="rtl"] h3{letter-spacing:0;line-height:1.3}
h1{font-size:clamp(38px,5.4vw,64px)}
h2{font-size:clamp(28px,3.6vw,44px)}
h3{font-size:clamp(20px,2.2vw,24px)}
.eyebrow{
  font-size:13px;font-weight:500;text-transform:uppercase;letter-spacing:.12em;
  color:var(--fg-steel-500);margin-bottom:20px;display:block;
}
html[dir="rtl"] .eyebrow{letter-spacing:.02em}
.lead{font-size:19px;color:var(--fg-ink-muted);margin-top:20px}
.on-navy h2,.on-navy h1,.on-navy h3{color:#fff}
.on-navy .lead{color:var(--fg-steel-400)}
.on-navy .eyebrow{color:var(--fg-steel-400)}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:10px;
  padding:14px 24px;border-radius:var(--r-sm);border:1px solid transparent;
  font-size:15px;font-weight:500;letter-spacing:-.01em;cursor:pointer;
  transition:background .15s var(--ease),border-color .15s var(--ease),color .15s var(--ease),transform .15s var(--ease);
  white-space:nowrap;
}
.btn:active{transform:translateY(1px)}
.btn--primary{background:var(--fg-navy-800);color:#fff}
.btn--primary:hover{background:var(--fg-navy-700)}
.btn--onnavy{background:#fff;color:var(--fg-navy-800)}
.btn--onnavy:hover{background:var(--fg-mist-100)}
.btn--ghost{background:transparent;border-color:var(--fg-hairline);color:var(--fg-ink)}
.btn--ghost:hover{border-color:var(--fg-steel-400);background:var(--fg-mist-100)}
.btn--ghost-onnavy{background:transparent;border-color:rgba(255,255,255,.28);color:#fff}
.btn--ghost-onnavy:hover{border-color:rgba(255,255,255,.6);background:rgba(255,255,255,.06)}
.btn--sm{padding:9px 18px;font-size:14px}
.arrow{transition:transform .15s var(--ease)}
html[dir="rtl"] .arrow{transform:scaleX(-1)}
.btn:hover .arrow{transform:translateX(3px)}
html[dir="rtl"] .btn:hover .arrow{transform:scaleX(-1) translateX(3px)}

.tlink{
  display:inline-flex;align-items:center;gap:8px;font-size:15px;font-weight:500;
  color:var(--fg-navy-800);border-bottom:1px solid var(--fg-steel-200);padding-bottom:3px;
  transition:border-color .15s var(--ease)
}
.tlink:hover{border-color:var(--fg-navy-800)}
.on-navy .tlink{color:#fff;border-color:rgba(255,255,255,.3)}
.on-navy .tlink:hover{border-color:#fff}