/* ===========================================================================
   AZZA Medical — one stylesheet, generated-adjacent but hand-authored.
   Miami ocean: deep Atlantic navy, Miami aqua, sunset coral, warm sand.

   Two rules that are load-bearing here, both learned the hard way:
   1. Reveal animations FAIL VISIBLE. The hidden state is only ever applied
      under html.reveal-on, which JS sets after it has proven it can also turn
      things back on. No JS, a throttled IntersectionObserver in a hidden tab,
      or a script error all leave the page fully readable.
   2. Nothing here relies on a third-party stylesheet or font host.
   ========================================================================= */

:root {
  --canvas: #FBF7EE;
  --card: #FFFDF8;
  --mist: #F4ECDA;
  --raised: #EDE2C9;
  --stone: #DED0AE;

  --ink: #0A1A26;
  --hero: #12222F;
  --hero-deep: #0B1620;
  --navy: #16304A;
  --navy-soft: #24465F;
  --slate: #4B5B6B;
  --fog: #5C6872;
  --fog-light: #A7B3BF;
  --ink-inverse: #FBF7EE;

  --bloom: #F0718A;
  --bloom-deep: #B8295C;
  --bloom-text: #9B1F4F;
  --ember: #E3C77E;
  --ember-deep: #84611F;
  --sand: #CBA14C;

  --ok: #00807A;
  --warn: #84611F;
  --bad: #C33A22;

  /* data-viz only — see config.TOKENS for why a cool third colour exists */
  --teal: #00A8AE;
  --teal-deep: #00787E;

  --border: rgba(10,26,38,0.11);
  --border-strong: rgba(10,26,38,0.20);
  --border-dark: rgba(251,247,238,0.16);

  --container: 1240px;
  --reading: 700px;
  --r: 14px;
  --r-sm: 10px;
  --r-pill: 999px;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);

  --display: 'Fraunces', 'Iowan Old Style', Georgia, serif;
  --sans: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI',
          Roboto, 'Helvetica Neue', Arial, sans-serif;

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

  --shadow-1: 0 1px 2px rgba(10, 31, 51, .05), 0 12px 30px -18px rgba(10, 31, 51, .18);
  --shadow-2: 0 2px 4px rgba(10, 31, 51, .06), 0 22px 46px -22px rgba(10, 31, 51, .26);
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--canvas);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg, video { max-width: 100%; display: block; }
img { height: auto; }

h1, h2, h3, h4 { margin: 0; line-height: 1.08; font-weight: 600; letter-spacing: -0.015em; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; }
li { list-style: none; }

a { color: var(--bloom-text); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }

:focus-visible {
  outline: 3px solid var(--bloom-deep);
  outline-offset: 3px;
  border-radius: 3px;
}

::selection { background: var(--bloom); color: var(--hero-deep); }

/* -------------------------------------------------- skip link */
.skip {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--ink); color: var(--ink-inverse);
  padding: 12px 18px; border-radius: 0 0 var(--r-sm) 0; font-weight: 600;
}
.skip:focus { left: 0; }

/* -------------------------------------------------- layout */
.wrap { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 24px; }
.read { max-width: var(--reading); }
.sec { padding: clamp(56px, 8vw, 112px) 0; }
.sec--tight { padding: clamp(40px, 5vw, 72px) 0; }
.sec--dark { background: var(--hero); color: var(--ink-inverse); }
.sec--deep { background: var(--hero-deep); color: var(--ink-inverse); }
.sec--mist { background: var(--mist); }
.sec--dark a, .sec--deep a { color: var(--bloom); }
.sec--dark h2, .sec--deep h2 { color: var(--ink-inverse); }

.grid { display: grid; gap: var(--s5); }
.g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 72px); align-items: center; }

@media (max-width: 960px) {
  .g3, .g4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .split { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 620px) {
  .g2, .g3, .g4 { grid-template-columns: minmax(0, 1fr); }
  body { font-size: 16px; }
  .wrap { padding: 0 18px; }
}

/* -------------------------------------------------- type */
.eyebrow {
  font-size: 12px; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--bloom-text); margin-bottom: var(--s4);
}
.sec--dark .eyebrow, .sec--deep .eyebrow { color: var(--bloom); }

.d1 { font-family: var(--display); font-size: clamp(42px, 8.4vw, 104px); font-weight: 500;
      line-height: .96; letter-spacing: -0.03em; }
.d2 { font-family: var(--display); font-size: clamp(30px, 4.6vw, 56px); font-weight: 500;
      line-height: 1.04; letter-spacing: -0.022em; }
.d3 { font-family: var(--display); font-size: clamp(24px, 3vw, 36px); font-weight: 500;
      line-height: 1.12; letter-spacing: -0.018em; }
.h4 { font-size: clamp(18px, 1.5vw, 21px); font-weight: 700; letter-spacing: -0.01em; }

.lede { font-size: clamp(18px, 1.7vw, 22px); line-height: 1.55; color: var(--slate); }
.sec--dark .lede, .sec--deep .lede { color: var(--fog-light); }
.body { color: var(--slate); }
.sec--dark .body, .sec--deep .body { color: var(--fog-light); }
.small { font-size: 14px; line-height: 1.6; color: var(--slate); }
.sec--dark .small, .sec--deep .small { color: var(--fog-light); }
.micro { font-size: 12.5px; line-height: 1.55; color: var(--fog); }
.sec--dark .micro, .sec--deep .micro { color: var(--fog-light); }
.num { font-variant-numeric: tabular-nums; }

.stack > * + * { margin-top: var(--s4); }
.stack-lg > * + * { margin-top: var(--s5); }
.head { max-width: 780px; margin-bottom: clamp(32px, 4vw, 56px); }
.head .lede { margin-top: var(--s4); }

/* -------------------------------------------------- buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 13px 26px;
  border-radius: var(--r-pill); border: 1.5px solid transparent;
  font: inherit; font-size: 15.5px; font-weight: 700; letter-spacing: -0.005em;
  cursor: pointer; transition: background .2s var(--ease), color .2s var(--ease),
    border-color .2s var(--ease), transform .12s var(--ease);
  text-decoration: none !important; text-align: center;
}
.btn:active { transform: translateY(1px); }
.btn--primary { background: var(--bloom); color: var(--hero-deep); }
.btn--primary:hover { background: #00B0B5; }
.btn--ember { background: var(--ember-deep); color: #fff; }
.btn--ember:hover { background: #CB4526; }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--border-strong); }
.btn--ghost:hover { background: var(--mist); }
.sec--dark .btn--ghost, .sec--deep .btn--ghost, .hero .btn--ghost {
  color: var(--ink-inverse); border-color: var(--border-dark);
}
.sec--dark .btn--ghost:hover, .sec--deep .btn--ghost:hover, .hero .btn--ghost:hover {
  background: rgba(246, 242, 234, .1);
}
.btn--sm { min-height: 40px; padding: 9px 18px; font-size: 14px; }
.btns { display: flex; flex-wrap: wrap; gap: var(--s3); align-items: center; }

.tlink { display: inline-flex; align-items: center; gap: 6px; font-weight: 700;
         font-size: 15px; color: var(--bloom-text);
         /* A standalone "See the panel →" link measured 25px tall. That
            clears WCAG 2.5.8 AA (24px) but not the 44px a thumb actually
            wants. Padding-block rather than min-height so the link keeps
            sitting on the text baseline it belongs to. */
         padding-block: 10px; margin-block: -10px; }
.sec--dark .tlink, .sec--deep .tlink { color: var(--bloom); }

/* -------------------------------------------------- header */
.hdr {
  position: sticky; top: 0; z-index: 90;
  background: rgba(250, 246, 239, .88);
  backdrop-filter: saturate(150%) blur(14px);
  border-bottom: 1px solid var(--border);
}
.hdr--on-dark {
  background: rgba(12, 36, 57, .78); border-bottom-color: var(--border-dark);
}
.hdr__in { display: flex; align-items: center; gap: var(--s5); min-height: 72px; }
.hdr__logo { display: flex; align-items: center; flex: 0 0 auto; }
.hdr__logo img { height: 30px; width: auto; }
/* Two lockups, one visible. The header releases .hdr--on-dark on scroll and
   recolours the nav with it; the lockup is artwork, so it has to be swapped
   rather than restyled. Dark is the default, which is what a page with no JS
   needs on every light hero. */
.hdr__logo .lk--light { display: none; }
.hdr--on-dark .hdr__logo .lk--dark { display: none; }
.hdr--on-dark .hdr__logo .lk--light { display: block; }
.hdr__nav { display: flex; gap: 2px; margin-left: auto; align-items: center; }
.hdr__nav a {
  padding: 9px 13px; border-radius: var(--r-pill); font-size: 14.5px; font-weight: 600;
  color: var(--ink); transition: background .18s var(--ease);
  /* Without this a flex item wraps its own label rather than making the row
     overflow — so a width check based on scrollWidth reports "fits" while
     "How It Works" is sitting on two lines. Nowrap makes the row tell the
     truth, which is what the breakpoint below is measured against. */
  white-space: nowrap;
}
.hdr--on-dark .hdr__nav a { color: var(--ink-inverse); }
.hdr__nav a:hover { background: var(--mist); text-decoration: none; }
.hdr--on-dark .hdr__nav a:hover { background: rgba(246, 242, 234, .12); }
.hdr__nav a[aria-current="page"] { color: var(--bloom-text); }
.hdr--on-dark .hdr__nav a[aria-current="page"] { color: var(--bloom); }
.hdr__end { display: flex; align-items: center; gap: var(--s2); flex: 0 0 auto; }
/* 44px minimum tap targets in the header. The logo link was 30px tall and
   each language option 25px — measured, not assumed. Growing the anchor
   rather than the artwork keeps the logo the same size on screen. */
.hdr__logo { min-height: 44px; }
/* 44 unconditionally rather than behind (pointer: coarse). A generous tap
   target costs a mouse user nothing, and gating it on a media query means
   the accessible size depends on the browser reporting its pointer type
   correctly — which is exactly the kind of thing that silently is not true. */
.lang a { min-height: 44px; }
.lang { min-height: 50px; }
/* Three languages, so this is a segmented control rather than a toggle. The
   current one is filled rather than merely bolded — at 13px the difference
   between 600 and 700 weight is not a reliable "you are here". */
.lang {
  display: inline-flex; align-items: center; min-height: 40px; padding: 3px;
  border-radius: var(--r-pill); border: 1.5px solid var(--border-strong);
  background: transparent;
}
.hdr--on-dark .lang { border-color: var(--border-dark); }
.lang a {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 6px 11px; border-radius: var(--r-pill); color: var(--ink);
  font-size: 13px; font-weight: 600; line-height: 1; white-space: nowrap;
  transition: background .18s var(--ease), color .18s var(--ease);
}
.hdr--on-dark .lang a { color: rgba(246, 242, 234, .74); }
.lang a:hover { background: var(--mist); text-decoration: none; }
.hdr--on-dark .lang a:hover { background: rgba(246, 242, 234, .12); color: var(--ink-inverse); }
.lang a[aria-current="true"] {
  background: var(--ink); color: var(--canvas); font-weight: 700;
}
.hdr--on-dark .lang a[aria-current="true"] { background: var(--bloom); color: var(--hero-deep); }
.lang a[aria-current="true"]:hover { background: var(--ink); }
.hdr--on-dark .lang a[aria-current="true"]:hover { background: var(--bloom); }

.burger {
  display: none; width: 46px; height: 46px; align-items: center; justify-content: center;
  background: transparent; border: 1.5px solid var(--border-strong);
  border-radius: var(--r-pill); cursor: pointer; color: inherit;
}
.hdr--on-dark .burger { border-color: var(--border-dark); }
.burger span { display: block; width: 18px; height: 1.8px; background: currentColor;
               position: relative; }
.burger span::before, .burger span::after {
  content: ''; position: absolute; left: 0; width: 18px; height: 1.8px; background: currentColor;
}
.burger span::before { top: -6px; } .burger span::after { top: 6px; }

/* Eight nav items, three languages, and a 1280px laptop.
   Measured content width of the header row, desktop nav forced on:
     English 1277 · Spanish 1320 · Hindi 1191
   Spanish is the constraint, and at the generous spacing it did not fit a
   1280 screen — which is most laptops. Rather than collapse to a burger at
   1280, the nav tightens between 1400 and 1260: 3px less padding per item
   across eight items is ~48px, which is the whole deficit. Below 1260 it
   genuinely cannot fit and the burger takes over. */
/* Tightening band runs to 1500, not 1400: at 1440 the full-padding Spanish
   row needs 1447px, so a 1440 screen overflowed in the gap between the old
   band and the breakpoint. Above 1500 the untightened row needs 1407 and has
   room to breathe. */
/* v2.0: unconditional, not a <=1500 band. The header container is capped at
   1240 by .wrap, so above 1500 the nav was running at full padding inside a
   box that never grows — English overflowed at 1600 while fitting at 1440,
   which is a genuinely confusing way to fail. The tightening now applies at
   every width and the only per-language decision left is where to collapse. */
.hdr__nav a { padding-left: 10px; padding-right: 10px; font-size: 14px; }
.hdr__in { gap: var(--s4); }
/* Spanish needs 1260 in a 1240 container — 20px, which is 3px per item. A
   4px-per-side trim recovers 28px and keeps Spanish readers on a real nav
   instead of pushing them onto a burger at 1440 for the sake of one label.
   Measured, not guessed: see the table in VERSIONS.md for v2.0. */
html[lang="es-US"] .hdr__nav a { padding-left: 8px; padding-right: 8px; }

/* The breakpoint is per language, because the nav's width is per language.
   Same seven items, measured at the tightened padding:
       Hindi 1089px · English 1232px · Spanish 1316px
   A single breakpoint has to serve Spanish, which would hand a burger to
   every English reader on a 1280 laptop for no reason. So: collapse by
   default at 1320, then give each locale its own floor back.

   lang lives on <html> and is already emitted per locale, so this needs no
   extra markup. Anything unrecognised keeps the conservative 1320. */
@media (max-width: 1319px) {
  .hdr__nav { display: none; }
  .burger { display: inline-flex; }
}
@media (min-width: 1240px) and (max-width: 1319px) {
  html[lang="en-US"] .hdr__nav { display: flex; }
  html[lang="en-US"] .burger { display: none; }
}
@media (min-width: 1120px) and (max-width: 1319px) {
  html[lang="hi-IN"] .hdr__nav { display: flex; }
  html[lang="hi-IN"] .burger { display: none; }
}

/* Below this the header row genuinely does not fit: logo 182 + lang + Join +
   burger came to 468px inside a 375px viewport. The Join button is the one to
   drop, because the mobile panel already carries a full-width one. */
@media (max-width: 640px) {
  .hdr__end .btn { display: none; }
}
@media (max-width: 430px) {
  .hdr__logo img { height: 26px !important; }
  .lang a { padding: 6px 8px; font-size: 12px; }
  .hdr__in { gap: var(--s3); min-height: 64px; }
}
/* Three options — one of them a Devanagari word — is a much wider control than
   the old two-way toggle. Measured against the real header: logo 182 + the
   selector 196 + burger 46 + gaps needs ~492px, so it overflows every phone.
   Below 540 (measured slack there: +48px) the selector moves into the mobile
   panel, where it gets a full row. Do not lower this number without measuring
   .hdr__in content width again — scrollWidth lies here, because the flex row
   shrinks its children instead of overflowing. */
@media (max-width: 539px) {
  .hdr__end .lang { display: none; }
}
.mnav .lang {
  display: none; margin-top: var(--s5); width: 100%;
  justify-content: space-between;
}
.mnav .lang a { flex: 1 1 0; padding: 10px 8px; font-size: 14px; }
.hdr--on-dark .mnav .lang { border-color: var(--border-dark); }
@media (max-width: 539px) {
  .mnav .lang { display: inline-flex; }
}

.mnav {
  border-top: 1px solid var(--border); background: var(--canvas);
  padding: var(--s4) 0 var(--s6);
}
.hdr--on-dark .mnav { background: var(--hero); border-top-color: var(--border-dark); }
.mnav a { display: block; padding: 13px 4px; font-size: 18px; font-weight: 600;
          color: var(--ink); border-bottom: 1px solid var(--border); }
.hdr--on-dark .mnav a { color: var(--ink-inverse); border-bottom-color: var(--border-dark); }
.mnav .btn { margin-top: var(--s5); width: 100%; }

/* -------------------------------------------------- Devanagari
   Fraunces and Jakarta carry no Devanagari glyphs, so a Hindi page set in them
   falls through to whatever the OS picks — which is a different face, a
   different x-height and, on Windows, often a notably worse one. Hindi gets its
   own pair: Tiro Devanagari Hindi for display, Noto Sans Devanagari for text.

   Devanagari also needs more vertical room than Latin. The shirorekha (the bar
   along the top) and the matras that hang above and below it collide at Latin
   line-heights, so body leading goes up and the display sizes come down a
   little — the same headline in Devanagari reads larger than its Latin twin at
   an identical font-size. */
html[data-script="devanagari"] {
  /* Devanagari face FIRST, the Latin face straight after it. Fallback is
     per-glyph, so "42 बायोमार्कर" gets its digits from Jakarta and its
     consonants from Noto — our woff2 subsets are script-specific and neither
     font can render the other's half of that sentence. */
  --display: 'Tiro Devanagari Hindi', 'Fraunces', 'Noto Serif Devanagari',
             'Kohinoor Devanagari', 'Nirmala UI', Georgia, serif;
  --sans: 'Noto Sans Devanagari', 'Plus Jakarta Sans', 'Kohinoor Devanagari',
          'Nirmala UI', -apple-system, BlinkMacSystemFont, sans-serif;
  --latin: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI',
           Roboto, 'Helvetica Neue', Arial, sans-serif;
}
html[data-script="devanagari"] body { line-height: 1.72; }
html[data-script="devanagari"] .d1 { font-size: clamp(34px, 6.6vw, 82px); line-height: 1.24; }
html[data-script="devanagari"] .d2 { font-size: clamp(26px, 3.9vw, 46px); line-height: 1.3; }
html[data-script="devanagari"] .d3 { font-size: clamp(21px, 2.6vw, 31px); line-height: 1.34; }
html[data-script="devanagari"] .lede { line-height: 1.7; }
html[data-script="devanagari"] .prose p,
html[data-script="devanagari"] .prose li { line-height: 1.85; }
html[data-script="devanagari"] .prose h2 { font-size: clamp(21px, 2.3vw, 28px); line-height: 1.34; }
/* Tiro is a single weight. Asking for 500/700 triggers synthetic bolding, which
   thickens the shirorekha into a smear at display sizes. */
html[data-script="devanagari"] .d1,
html[data-script="devanagari"] .d2,
html[data-script="devanagari"] .d3,
html[data-script="devanagari"] .prose h2 { font-weight: 400; }
/* Figures are all-Latin, so they take the Latin face directly rather than
   resolving through a Devanagari font that has no digits in its subset. */
html[data-script="devanagari"] .stat__n,
html[data-script="devanagari"] .plan__amt,
html[data-script="devanagari"] .gauge__num,
html[data-script="devanagari"] code { font-family: var(--latin); font-weight: 700; }

/* -------------------------------------------------- hero */
.hero {
  position: relative; background: var(--hero-deep); color: var(--ink-inverse);
  overflow: hidden; isolation: isolate;
}
.hero__media { position: absolute; inset: 0; z-index: 0; }
.hero__media img, .hero__media video {
  width: 100%; height: 100%; object-fit: cover;
  /* Faces sit in the upper third of every shot in the loop. A portrait-shaped
     viewport cover-crops a 16:9 source vertically about its centre, which
     put the crop on chins and necks — pull it up so heads stay in frame. */
  object-position: 50% 32%;
}
@media (min-width: 1000px) {
  .hero__media img, .hero__media video { object-position: 50% 42%; }
}
/* The hero is a face now, not an ocean, and the two stacked washes that were
   fine over water compounded to ~0.95 opacity at top-left and turned her into
   a dark smudge. This is one horizontal band that is heavy where the type is
   and clears to nothing across the right two-fifths, where she is.

   The numbers are measured, not judged: with the video pinned to its brightest
   frame and the copy hidden, the 95th-percentile backdrop luminance under
   every text element gives a worst case of 5.46:1 (the eyebrow, in bloom).
   The old wash scored 5.41 — so this is no darker and shows far more. */
.hero__media::after {
  content: ''; position: absolute; inset: 0;
  background:
    linear-gradient(96deg, rgba(11,22,32,.94) 0%, rgba(11,22,32,.90) 34%,
                    rgba(11,22,32,.68) 60%, rgba(11,22,32,.24) 86%,
                    rgba(11,22,32,0) 100%),
    /* Top band for the header, bottom band for the price line. The bottom one
       exists because the pricing row measured 4.86:1 against the brightest
       frame — passing, but with the kind of margin that disappears the next
       time anyone touches the crop. */
    linear-gradient(180deg, rgba(11,22,32,.58) 0%, rgba(11,22,32,0) 18%,
                    rgba(11,22,32,0) 68%, rgba(11,22,32,.42) 100%);
}
/* Below the breakpoint the copy spans the full width, so the band has to
   become a vertical one or the type sits on clear picture. */
/* Below 1200 the copy spans the full width, so the horizontal band above is
   useless and a vertical one takes over. The first version had a .40 stop at
   26% — exactly where the eyebrow sits — and measured 2.02:1 on a 390px
   phone and 1.85:1 on a tablet. Both were shipped. This is the measured
   replacement; with the label colours below it comes out at 8.2:1 on mobile
   and 8.4:1 on tablet. */
@media (max-width: 1200px) {
  .hero__media::after {
    background:
      linear-gradient(180deg, rgba(11,22,32,.70) 0%, rgba(11,22,32,.72) 20%,
                      rgba(11,22,32,.80) 52%, rgba(11,22,32,.92) 100%);
  }
}
/* padding-block, not the padding shorthand. The shorthand's `0` for the
   inline axis silently cancelled the 18–24px gutter this element inherits
   from .wrap, so every hero headline sat flush against the screen edge on
   phones and tablets — and on any desktop narrower than the 1240 container,
   where the gutter comes from margin rather than padding and so survived. */
.hero__in { position: relative; z-index: 1;
            padding-block: clamp(80px, 13vh, 150px) clamp(56px, 8vh, 96px); }
.hero__copy { max-width: 780px; }
.hero .d1 { color: #fff; }
/* Near-white, not rose. #F0718A over a bright frame of the hero loop measured
   1.85:1 on tablet no matter what the scrim did; the same label in
   ink-inverse measures 8.4:1. The rose accent is carried by the headline,
   which is large-text and has the contrast budget for it. */
.hero .eyebrow { color: var(--ink-inverse); }
.hero__az { display: block; }
.hero__az--b { color: var(--bloom); margin-left: clamp(0px, 6vw, 92px); }
.hero__sub {
  font-family: var(--display); font-weight: 400; font-style: italic;
  font-size: clamp(19px, 2.5vw, 30px); color: #E4E9EE;
  margin-top: var(--s4); line-height: 1.25;
}
.hero__lede { margin-top: var(--s5); max-width: 620px; color: #E4E9EE; font-size: clamp(17px, 1.6vw, 20px); }
.hero .btns { margin-top: var(--s6); }
.hero__price { margin-top: var(--s5); max-width: 560px; color: #E4E9EE; font-size: 14px; }
.hero__plans { margin-top: var(--s2); font-size: 14px; font-weight: 700; color: var(--sand); }

/* the A→Z→A arc */
.arc { margin-top: var(--s6); max-width: 420px; }
.arc svg { width: 100%; height: auto; overflow: visible; }
.arc__path { fill: none; stroke: var(--bloom); stroke-width: 1.6; opacity: .85; }
.arc__label { font-family: var(--display); font-size: 17px; fill: #fff; }
.arc__tick { fill: var(--bloom); }

/* -------------------------------------------------- ticker */
.ticker { background: var(--ink); color: var(--ink-inverse); padding: 14px 0; overflow: hidden; }
.ticker__row { display: flex; gap: 0; width: max-content; animation: slide 34s linear infinite; }
.ticker__set { display: flex; gap: 0; flex: 0 0 auto; }
.ticker__i {
  display: inline-flex; align-items: center; gap: 10px; padding: 0 26px;
  font-size: 12px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase;
  color: var(--fog-light); white-space: nowrap;
}
.ticker__i::before { content: ''; width: 5px; height: 5px; border-radius: 50%;
                     background: var(--bloom); flex: 0 0 auto; }
@keyframes slide { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .ticker__row { animation: none; flex-wrap: wrap; width: 100%; justify-content: center; }
  .ticker__set + .ticker__set { display: none; }
}

/* -------------------------------------------------- cards */
.card {
  background: var(--card); border: 1px solid var(--border); border-radius: var(--r);
  padding: clamp(20px, 2.4vw, 30px); box-shadow: var(--shadow-1);
  transition: box-shadow .22s var(--ease), transform .22s var(--ease);
}
a.card:hover, .card--hover:hover { box-shadow: var(--shadow-2); transform: translateY(-2px);
                                   text-decoration: none; }
.sec--dark .card, .sec--deep .card {
  background: rgba(246, 242, 234, .05); border-color: var(--border-dark); box-shadow: none;
}
.card__ic { width: 40px; height: 40px; color: var(--bloom-deep); margin-bottom: var(--s4); }
.sec--dark .card__ic, .sec--deep .card__ic { color: var(--bloom); }
.card h3 { margin-bottom: var(--s3); }
.card .small { margin-top: var(--s3); }

/* definition rows inside a category card */
.dl { border-top: 1px solid var(--border); margin-top: var(--s5); }
.sec--dark .dl { border-top-color: var(--border-dark); }
.dl__r { display: grid; grid-template-columns: 152px minmax(0, 1fr); gap: var(--s4);
         padding: var(--s4) 0; border-bottom: 1px solid var(--border); }
.sec--dark .dl__r { border-bottom-color: var(--border-dark); }
.dl__k { font-size: 12.5px; font-weight: 700; letter-spacing: .04em; color: var(--fog); }
.dl__v { font-size: 15px; color: var(--slate); }
.sec--dark .dl__v { color: var(--fog-light); }
@media (max-width: 620px) { .dl__r { grid-template-columns: minmax(0, 1fr); gap: 4px; } }

/* -------------------------------------------------- goal chips */
.chips { display: flex; flex-wrap: wrap; gap: var(--s2); }
.chip {
  display: inline-flex; align-items: center; min-height: 44px; padding: 10px 18px;
  border-radius: var(--r-pill); border: 1.5px solid var(--border-strong);
  background: var(--card); font-size: 14.5px; font-weight: 600; color: var(--ink);
  transition: border-color .18s var(--ease), background .18s var(--ease);
}
.chip:hover { border-color: var(--bloom-deep); background: var(--card); text-decoration: none; }
.sec--dark .chip, .sec--deep .chip {
  background: rgba(246, 242, 234, .06); border-color: var(--border-dark); color: var(--ink-inverse);
}
.sec--dark .chip:hover { border-color: var(--bloom); }

/* -------------------------------------------------- numbered steps */
.steps { counter-reset: s; display: grid; gap: var(--s5); }
.step { display: grid; grid-template-columns: 62px minmax(0, 1fr); gap: var(--s5);
        padding-bottom: var(--s5); border-bottom: 1px solid var(--border); }
.sec--dark .step { border-bottom-color: var(--border-dark); }
.step:last-child { border-bottom: 0; padding-bottom: 0; }
.step__n {
  font-family: var(--display); font-size: 34px; line-height: 1; color: var(--bloom-deep);
  font-variant-numeric: tabular-nums;
}
.sec--dark .step__n, .sec--deep .step__n { color: var(--bloom); }
.step h3 { margin-bottom: 6px; }
@media (max-width: 620px) { .step { grid-template-columns: 44px minmax(0, 1fr); gap: var(--s4); }
  .step__n { font-size: 26px; } }

/* -------------------------------------------------- the process loop
   Six stations drawn once, labelled in HTML. The <svg> is aria-hidden and
   carries only geometry plus six numerals, so there is nothing inside it to
   translate and nothing to re-measure when a Spanish or Hindi string grows.
   The list beside it is the real content and works with no CSS at all. */
.pr { display: grid; gap: var(--s7); align-items: center; }
.pr__svg { width: 100%; max-width: 340px; height: auto; justify-self: center; }
.pr__arc { fill: none; stroke: var(--border-strong); stroke-width: 2.5;
           stroke-linecap: round; }
/* The return stroke is the point of the ring: it says the process starts
   again rather than finishing. */
.pr__arc--back { stroke: var(--bloom); stroke-dasharray: 3 9; }
.pr__tip { fill: var(--bloom); }
.pr__dot { fill: var(--card); stroke: var(--bloom-deep); stroke-width: 2.5; }
.pr__num { font-family: var(--display); font-size: 19px; font-weight: 600;
           fill: var(--bloom-text); font-variant-numeric: tabular-nums; }

/* --- the loop, drawn in sequence -----------------------------------------
   SAFETY, and it is the whole reason this is written the way it is: every
   rule that hides or clips anything lives under `.dg--armed`, a class that
   initDiagrams() adds only AFTER it has installed the observer and the two
   failsafes that take it away again. With no JS, no IntersectionObserver, a
   hidden tab or reduced motion, none of these rules ever apply and the ring
   is simply drawn. Nothing below has an `opacity: 0` or a dashoffset in its
   base state. That mistake has blanked pages on this account twice.

   It does NOT hang off the site-wide reveal system, and that is deliberate:
   azza.js strips `.reveal-on` 1400ms after load as a visibility guarantee,
   and this diagram lives below the fold — so a reveal-keyed animation would
   simply never play for anyone who scrolled at a normal speed. */
.dg--armed .pr__arc {
  stroke-dasharray: 103; stroke-dashoffset: 103;
}
.dg--armed .pr__arc--back { stroke-dasharray: 3 9; stroke-dashoffset: 0; opacity: 0; }
.dg--armed .pr__tip { opacity: 0; }
.dg--armed .pr__st { opacity: 0; }

.dg--play .pr__arc { animation: prDraw .62s var(--ease) both; }
.dg--play .pr__arc--1 { animation-delay: .10s }
.dg--play .pr__arc--2 { animation-delay: .30s }
.dg--play .pr__arc--3 { animation-delay: .50s }
.dg--play .pr__arc--4 { animation-delay: .70s }
.dg--play .pr__arc--5 { animation-delay: .90s }
/* The return stroke is dashed, so it cannot draw on the same way — it fades
   in last, which is the right beat anyway: the loop closing is the payoff. */
.dg--play .pr__arc--back {
  animation: prFade .5s var(--ease) 1.18s both;
}
.dg--play .pr__tip { animation: prFade .4s var(--ease) 1.42s both; }

.dg--play .pr__st { animation: prPop .42s var(--ease) both; }
.dg--play .pr__st--1 { animation-delay: .04s }
.dg--play .pr__st--2 { animation-delay: .24s }
.dg--play .pr__st--3 { animation-delay: .44s }
.dg--play .pr__st--4 { animation-delay: .64s }
.dg--play .pr__st--5 { animation-delay: .84s }
.dg--play .pr__st--6 { animation-delay: 1.04s }

/* The list reads in step with the ring, so the eye is led 01 -> 06 once
   rather than twice. */
.dg--armed .pr__item { opacity: 0; }
.dg--play .pr__item { animation: prRise .46s var(--ease) both; }
.dg--play .pr__item--1 { animation-delay: .14s }
.dg--play .pr__item--2 { animation-delay: .34s }
.dg--play .pr__item--3 { animation-delay: .54s }
.dg--play .pr__item--4 { animation-delay: .74s }
.dg--play .pr__item--5 { animation-delay: .94s }
.dg--play .pr__item--6 { animation-delay: 1.14s }

@keyframes prDraw { to { stroke-dashoffset: 0 } }
@keyframes prFade { from { opacity: 0 } to { opacity: 1 } }
@keyframes prPop {
  0%   { opacity: 0; transform: scale(.72) }
  70%  { opacity: 1; transform: scale(1.06) }
  100% { opacity: 1; transform: scale(1) }
}
@keyframes prRise { from { opacity: 0; transform: translateY(9px) } to { opacity: 1; transform: none } }
/* The station circles scale about their own centre rather than the SVG's. */
.pr__st { transform-box: fill-box; transform-origin: center; }

.pr__list { list-style: none; display: grid; gap: var(--s4); counter-reset: pr; }
.pr__item { display: grid; grid-template-columns: 44px minmax(0, 1fr);
            gap: var(--s4); align-items: baseline; }
.pr__n { font-family: var(--display); font-size: 20px; color: var(--bloom-deep);
         font-variant-numeric: tabular-nums; }
.pr__t { display: block; }
.pr__h { display: block; font-weight: 700; font-size: 16.5px; color: var(--ink); }
.pr__b { display: block; margin-top: 3px; font-size: 15px; line-height: 1.55;
         color: var(--slate); }

@media (min-width: 900px) {
  .pr { grid-template-columns: minmax(0, 340px) minmax(0, 1fr);
        gap: clamp(40px, 5vw, 76px); }
  .pr__svg { max-width: 340px; }
}
/* On a dark band the ring and the list invert together. */
.sec--dark .pr__arc, .sec--deep .pr__arc { stroke: var(--border-dark); }
.sec--dark .pr__dot, .sec--deep .pr__dot { fill: var(--hero-deep); stroke: var(--bloom); }
.sec--dark .pr__num, .sec--deep .pr__num { fill: var(--bloom); }
.sec--dark .pr__h, .sec--deep .pr__h { color: var(--ink-inverse); }
.sec--dark .pr__b, .sec--deep .pr__b { color: var(--fog-light); }
.sec--dark .pr__n, .sec--deep .pr__n { color: var(--bloom); }

/* -------------------------------------------------- steps, threaded
   Opt-in modifier. A rail behind the numerals turns six disconnected rows
   into one sequence. Drawn with a gradient rather than a pseudo-element
   border so it fades out at both ends instead of stopping dead. */
.steps--rail { position: relative; }
.steps--rail::before {
  content: ''; position: absolute; top: 8px; bottom: 8px; left: 30px; width: 2px;
  background: linear-gradient(180deg, transparent, var(--border-strong) 6%,
              var(--border-strong) 94%, transparent);
}
.steps--rail .step { position: relative; border-bottom: 0; padding-bottom: var(--s6); }
.steps--rail .step__n {
  position: relative; z-index: 1; display: inline-flex; align-items: center;
  justify-content: center; width: 60px; height: 60px; font-size: 20px;
  border-radius: 50%; background: var(--card);
  border: 2px solid var(--bloom-deep); color: var(--bloom-text);
}
.sec--mist .steps--rail .step__n { background: var(--card); }
.sec--dark .steps--rail .step__n, .sec--deep .steps--rail .step__n {
  background: var(--hero-deep); border-color: var(--bloom); color: var(--bloom);
}
@media (max-width: 620px) {
  .steps--rail::before { left: 21px; }
  .steps--rail .step__n { width: 42px; height: 42px; font-size: 16px; }
}

/* --- shared diagram motion ------------------------------------------------
   Same contract as the ring: nothing is hidden unless .dg--armed is present,
   and that class is only ever added by JS that has already installed the
   failsafes which remove it. No JS, no observer, a hidden tab or reduced
   motion all leave every figure fully drawn. */

/* the homepage loop */
.dg--armed .lp__ring { stroke-dasharray: 760; stroke-dashoffset: 760; }
.dg--armed .lp__tip,
.dg--armed .lp__st,
.dg--armed .lp__ctr { opacity: 0; }
.dg--play .lp__ring { animation: prDraw 1.1s var(--ease) .1s both; }
.dg--play .lp__tip { animation: prFade .4s var(--ease) 1.15s both; }
.dg--play .lp__ctr { animation: prPop .5s var(--ease) 1.25s both; }
.dg--play .lp__st { animation: prPop .4s var(--ease) both; }
.dg--play .lp__st--1 { animation-delay: .34s }
.dg--play .lp__st--2 { animation-delay: .54s }
.dg--play .lp__st--3 { animation-delay: .74s }
.dg--play .lp__st--4 { animation-delay: .94s }
.lp__st, .lp__ctr { transform-box: fill-box; transform-origin: center; }

/* the biomarker gauge: the bar fills and the value counts into place */
.dg--armed .gauge__bar > * { transform: scaleX(0); }
.dg--armed .gauge__pill { opacity: 0; }
.dg--play .gauge__bar > * { animation: gFill .7s var(--ease) both; transform-origin: left center; }
.dg--play .gauge__seg--opt  { animation-delay: .10s }
.dg--play .gauge__seg--norm { animation-delay: .24s }
.dg--play .gauge__seg--high { animation-delay: .38s }
.dg--play .gauge__pill { animation: prPop .42s var(--ease) .62s both; }
@keyframes gFill { to { transform: scaleX(1) } }

/* the evidence meter on /research/ */
.dg--armed .mtr__fill { transform: scaleY(0); }
.dg--play .mtr__fill { animation: mRise .62s var(--ease) both; transform-origin: bottom center; }
.dg--play .mtr__c:nth-child(1) .mtr__fill { animation-delay: .08s }
.dg--play .mtr__c:nth-child(2) .mtr__fill { animation-delay: .22s }
.dg--play .mtr__c:nth-child(3) .mtr__fill { animation-delay: .36s }
.dg--play .mtr__c:nth-child(4) .mtr__fill { animation-delay: .50s }
@keyframes mRise { to { transform: scaleY(1) } }

/* -------------------------------------------------- checklists */
.ticks { display: grid; gap: var(--s3); }
.ticks li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: var(--s3);
            font-size: 15.5px; color: var(--slate); }
.sec--dark .ticks li, .sec--deep .ticks li { color: var(--fog-light); }
.ticks svg { width: 18px; height: 18px; margin-top: 4px; color: var(--bloom-deep); flex: 0 0 auto; }
.sec--dark .ticks svg, .sec--deep .ticks svg { color: var(--bloom); }
.ticks--x svg { color: var(--fog); }

/* -------------------------------------------------- stats */
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s5); }
.stat__n { font-family: var(--display); font-size: clamp(36px, 4.4vw, 60px); line-height: 1;
           color: var(--bloom-deep); font-variant-numeric: tabular-nums; }
.sec--dark .stat__n, .sec--deep .stat__n { color: var(--bloom); }
.stat__l { margin-top: var(--s2); font-size: 13.5px; color: var(--slate); }
.sec--dark .stat__l, .sec--deep .stat__l { color: var(--fog-light); }
@media (max-width: 760px) { .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* -------------------------------------------------- pricing */
.plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s5);
         align-items: start; }
@media (max-width: 960px) { .plans { grid-template-columns: minmax(0, 1fr); } }
.plan { display: flex; flex-direction: column; height: 100%; position: relative; }
.plan--best { border-color: var(--bloom-deep); border-width: 2px; }
.plan__flag {
  position: absolute; top: -13px; left: 24px; background: var(--bloom); color: var(--hero-deep);
  font-size: 12px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase;
  padding: 5px 11px; border-radius: var(--r-pill);
}
.plan__name { font-family: var(--display); font-size: 27px; }
.plan__price { display: flex; align-items: baseline; gap: 4px; margin: var(--s3) 0 var(--s4); }
.plan__amt { font-family: var(--display); font-size: 52px; line-height: 1;
             font-variant-numeric: tabular-nums; }
.plan__per { font-size: 15px; color: var(--fog); font-weight: 600; }
.plan__tag { color: var(--slate); font-size: 15px; min-height: 72px; }
.plan .ticks { margin: var(--s5) 0; }
.plan .btn { margin-top: auto; width: 100%; }

/* -------------------------------------------------- panel systems */
.sys { border-top: 1px solid var(--border); }
.sys__r { display: grid; grid-template-columns: 210px 54px minmax(0, 1fr); gap: var(--s5);
          padding: var(--s5) 0; border-bottom: 1px solid var(--border); align-items: start; }
.sys__n { font-family: var(--display); font-size: 21px; }
.sys__c { font-size: 13px; font-weight: 700; color: var(--bloom-text);
          font-variant-numeric: tabular-nums; padding-top: 5px; }
.sys__m { font-size: 15px; color: var(--slate); }
@media (max-width: 760px) {
  .sys__r { grid-template-columns: minmax(0, 1fr) 54px; gap: var(--s2) var(--s4); }
  .sys__m { grid-column: 1 / -1; }
}

/* -------------------------------------------------- gauge illustration */
.gauge { background: var(--card); border: 1px solid var(--border); border-radius: var(--r);
         padding: clamp(20px, 2.4vw, 30px); box-shadow: var(--shadow-1); }
.gauge__top { display: flex; justify-content: space-between; align-items: baseline;
              margin-bottom: var(--s5); }
.gauge__name { font-weight: 700; font-size: 15px; }
.gauge__sys { font-size: 12.5px; color: var(--fog); }
.gauge__bar { height: 10px; border-radius: var(--r-pill); overflow: hidden; display: flex; }
.gauge__seg { height: 100%; }
.gauge__scale { display: flex; justify-content: space-between; margin-top: var(--s2);
                font-size: 12px; color: var(--fog); font-weight: 600; }
.gauge__val { display: flex; align-items: baseline; gap: 6px; margin-top: var(--s5); }
.gauge__num { font-family: var(--display); font-size: 42px; line-height: 1;
              font-variant-numeric: tabular-nums; }
.gauge__unit { font-size: 14px; color: var(--fog); }
.gauge__pill { display: inline-flex; align-items: center; gap: 6px; margin-top: var(--s4);
               background: rgba(0, 128, 122, .1); color: var(--ok); border-radius: var(--r-pill);
               padding: 5px 13px; font-size: 13px; font-weight: 700; }

/* -------------------------------------------------- phone mock */
.phone { width: 100%; max-width: 330px; margin: 0 auto; background: var(--hero-deep);
         border-radius: 34px; padding: 11px; box-shadow: var(--shadow-2); }
.phone__scr { background: var(--canvas); border-radius: 25px; padding: var(--s5) var(--s4);
              color: var(--ink); }
.phone__bar { display: flex; justify-content: space-between; font-size: 12px;
              color: var(--fog); font-weight: 700; margin-bottom: var(--s5); }
.phone__hi { font-family: var(--display); font-size: 22px; margin-bottom: var(--s4); }
.dose { display: flex; align-items: center; gap: var(--s3); padding: var(--s3) 0;
        border-top: 1px solid var(--border); font-size: 13.5px; }
.dose__k { font-weight: 700; letter-spacing: .06em; font-size: 11.5px; }
.dose__s { margin-left: auto; font-size: 11.5px; font-weight: 700; color: var(--ok); }
.dose__s--due { color: var(--warn); }
.ring { width: 30px; height: 30px; flex: 0 0 auto; }
.week { display: flex; gap: 5px; margin-top: var(--s4); }
.week i { flex: 1; height: 5px; border-radius: var(--r-pill); background: var(--stone); }
.week i.on { background: var(--bloom-deep); }

/* -------------------------------------------------- chat mock */
.chat { background: var(--card); border: 1px solid var(--border); border-radius: var(--r);
        padding: var(--s5); box-shadow: var(--shadow-1); }
.chat__top { display: flex; align-items: center; gap: var(--s3); padding-bottom: var(--s4);
             border-bottom: 1px solid var(--border); }
.chat__av { width: 34px; height: 34px; border-radius: 50%; background: var(--bloom);
            color: var(--hero-deep); display: grid; place-items: center;
            font-weight: 800; font-size: 15px; flex: 0 0 auto; }
.chat__b { margin-top: var(--s4); padding: var(--s4); border-radius: var(--r-sm);
           font-size: 14.5px; line-height: 1.55; }
.chat__b--me { background: var(--mist); }
.chat__b--ai { background: rgba(240,113,138, .10); border: 1px solid rgba(240,113,138, .28); }
.chat__note { display: flex; gap: var(--s2); margin-top: var(--s4); font-size: 12.5px;
              color: var(--fog); }

/* -------------------------------------------------- two-column compare */
.vs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s5); }
@media (max-width: 760px) { .vs { grid-template-columns: minmax(0, 1fr); } }
.vs__col--old { background: var(--mist); }
.vs__col--new { border-color: var(--bloom-deep); border-width: 2px; }
.vs__h { font-size: 12.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
         color: var(--fog); }
.vs__col--new .vs__h { color: var(--bloom-text); }
.vs__s { font-family: var(--display); font-size: 24px; margin: var(--s2) 0 var(--s5); }

/* -------------------------------------------------- accordion */
.acc { border-top: 1px solid var(--border); }
.acc details { border-bottom: 1px solid var(--border); }
.acc summary {
  display: flex; gap: var(--s4); align-items: flex-start; justify-content: space-between;
  padding: var(--s5) 0; cursor: pointer; font-weight: 700; font-size: 17px;
  list-style: none;
}
.acc summary::-webkit-details-marker { display: none; }
.acc summary::after {
  content: ''; flex: 0 0 auto; width: 13px; height: 13px; margin-top: 7px;
  border-right: 2px solid var(--bloom-deep); border-bottom: 2px solid var(--bloom-deep);
  transform: rotate(45deg); transition: transform .22s var(--ease);
}
.acc details[open] summary::after { transform: rotate(-135deg); }
.acc__a { padding: 0 0 var(--s5); max-width: var(--reading); color: var(--slate); }
.acc h3 { font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
          color: var(--bloom-text); margin: var(--s7) 0 0; }

/* -------------------------------------------------- disclaimers */
.disc { background: var(--mist); border-radius: var(--r); padding: var(--s5);
        border-left: 3px solid var(--bloom-deep); }
.disc p { font-size: 13.5px; line-height: 1.6; color: var(--slate); }
.disc p + p { margin-top: var(--s3); }
.fda { font-size: 12.5px; color: var(--fog); line-height: 1.55; }

/* -------------------------------------------------- CTA band */
.cta { background: var(--hero-deep); color: var(--ink-inverse); text-align: center; }
.cta__in { padding: clamp(64px, 9vw, 120px) 0; max-width: 720px; margin: 0 auto; }
.cta .d2 { color: #fff; }
.cta .btns { justify-content: center; margin-top: var(--s6); }

/* -------------------------------------------------- footer */
.ftr { background: var(--ink); color: var(--ink-inverse); padding: clamp(56px, 7vw, 88px) 0 var(--s7); }
.ftr__top { display: grid; grid-template-columns: 1.6fr repeat(4, 1fr); gap: var(--s6);
            padding-bottom: var(--s7); border-bottom: 1px solid var(--border-dark); }
@media (max-width: 1080px) { .ftr__top { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .ftr__top { grid-template-columns: minmax(0, 1fr); } }
.ftr__brand img { height: 32px; margin-bottom: var(--s4); }
.ftr__brand p { font-size: 14px; color: var(--fog-light); max-width: 330px; }
.ftr__ch { font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
           color: var(--fog); margin-bottom: var(--s4); }
.ftr__c a { display: block; padding: 5px 0; font-size: 14px; color: var(--ink-inverse); }
.ftr__c a:hover { color: var(--bloom); }
.ftr__legal { padding-top: var(--s6); display: grid; gap: var(--s4); }
.ftr__legal p { font-size: 12.5px; line-height: 1.6; color: var(--fog); max-width: 92ch; }
.ftr__bot { margin-top: var(--s6); padding-top: var(--s5); border-top: 1px solid var(--border-dark);
            display: flex; flex-wrap: wrap; gap: var(--s4); justify-content: space-between;
            align-items: center; font-size: 12.5px; color: var(--fog); }
.ftr__bot a { color: var(--fog); }
.ftr__bot a:hover { color: var(--bloom); }
.ftr__dev { display: inline-flex; align-items: center; gap: 7px; }
/* The "Built by Vault Cyber Lab" credit measured 21px tall — under the WCAG
   2.5.8 AA floor of 24. Padding rather than font-size so the credit stays
   quiet, which is the point of a credit. */
.ftr__dev a { display: inline-block; padding-block: 8px; margin-block: -6px; }

.ftr__dev svg { width: 15px; height: 15px; color: var(--bloom); }

/* -------------------------------------------------- learning centre */
.lc { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s5); }
@media (max-width: 960px) { .lc { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .lc { grid-template-columns: minmax(0, 1fr); } }
.lc__cat { font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
           color: var(--bloom-text); margin-bottom: var(--s3); }
.lc__t { font-family: var(--display); font-size: 21px; line-height: 1.18; margin-bottom: var(--s3); }
.lc__d { font-size: 14.5px; color: var(--slate); }
.lc__m { margin-top: var(--s4); font-size: 12.5px; color: var(--fog); font-weight: 600; }

/* -------------------------------------------------- research library
   This page has to read as a reference work, not a landing page — that is
   what earns the right to publish an assessment of somebody else's product.
   Hence: stated verdict before the argument, a grade on every section, and a
   bibliography where every entry is a resolvable DOI. */

/* Evidence grade chips. Established is teal, not rose: rose is the brand
   accent and would read as "recommended", which is not what a grade means. */
.gr { display: inline-flex; align-items: center; padding: 5px 12px;
      border-radius: var(--r-pill); font-size: 12px; font-weight: 800;
      letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
html[data-script="devanagari"] .gr { text-transform: none; letter-spacing: 0; }
.gr--ok   { background: rgba(0,168,174,.16);  color: var(--teal-deep); }
.gr--mid  { background: rgba(155,31,79,.10);  color: var(--bloom-text); }
.gr--low  { background: rgba(10,26,38,.08);   color: var(--slate); }
.gr--warn { background: rgba(156,90,22,.14);  color: var(--ember-deep); }
.sec--dark .gr--ok   { background: rgba(0,168,174,.22); color: var(--teal); }
.sec--dark .gr--mid  { background: rgba(240,113,138,.20); color: var(--bloom); }
.sec--dark .gr--low  { background: rgba(251,247,238,.12); color: var(--fog-light); }
.sec--dark .gr--warn { background: rgba(227,199,126,.20); color: var(--ember); }

/* The evidence meter. Heights are utility classes rather than inline styles,
   because style-src 'self' drops an inline style silently on the real host. */
/* align-items:start, not end. With `end` the columns bottom-aligned, so a
   two-line topic label pushed its own bar 20px higher than its neighbours and
   the chart lied about the values it was drawing. */
.mtr { display: grid; grid-template-columns: repeat(4, minmax(0,1fr));
       gap: var(--s5); align-items: start; margin-top: var(--s7); }
.mtr__c { display: flex; flex-direction: column; }
.mtr__l { min-height: 2.5em; }
.mtr__track { height: 168px; border-radius: var(--r-sm); background: var(--mist);
              display: flex; align-items: flex-end; overflow: hidden;
              border: 1px solid var(--border); }
.mtr__fill { width: 100%; border-radius: var(--r-sm) var(--r-sm) 0 0; }
.mtr__fill--ok   { background: var(--teal); }
.mtr__fill--mid  { background: var(--bloom); }
.mtr__fill--low  { background: var(--fog-light); }
.mtr__fill--warn { background: var(--ember); }
.h92 { height: 92%; } .h58 { height: 58%; } .h30 { height: 30%; } .h22 { height: 22%; }
.mtr__l { font-family: var(--display); font-size: 17px; line-height: 1.2;
          margin-top: var(--s4); font-weight: 500; }
.mtr__g { font-size: 12.5px; color: var(--slate); margin-top: var(--s2);
          font-weight: 700; }
@media (max-width: 860px) { .mtr { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .mtr__track { height: 128px; } }

/* Verdict block — the answer before the argument. */
.verd { border-left: 4px solid var(--bloom-deep); padding-left: var(--s5); }
.verd__t { font-family: var(--display); font-size: clamp(21px, 2.3vw, 27px);
           line-height: 1.32; font-weight: 500; }
.sec--dark .verd { border-left-color: var(--bloom); }

/* Superscript reference markers. */
.ref { font-weight: 700; color: var(--bloom-text); padding: 0 1px; }
.ref sup { font-size: 11px; }

/* Paper cards under each topic. */
.paps { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
        gap: var(--s4); }
.pap { display: block; padding: var(--s5); border-radius: var(--r);
       background: var(--card); border: 1px solid var(--border);
       transition: border-color .18s var(--ease), transform .18s var(--ease); }
.pap:hover { border-color: var(--bloom-deep); text-decoration: none;
             transform: translateY(-2px); }
.pap__d { font-size: 12px; font-weight: 800; letter-spacing: .07em;
          text-transform: uppercase; color: var(--bloom-text); }
html[data-script="devanagari"] .pap__d { text-transform: none; letter-spacing: 0; }
.pap__t { font-family: var(--display); font-size: 16px; line-height: 1.3;
          margin-top: var(--s3); color: var(--ink); }
.pap__m { font-size: 12.5px; color: var(--slate); margin-top: var(--s3); }
.sec--mist .pap { background: var(--card); }

/* Trials table. Scrolls inside its own box rather than widening the page. */
.tw { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tbl { width: 100%; border-collapse: collapse; min-width: 680px;
       font-size: 14.5px; }
.tbl th { text-align: left; font-size: 12px; font-weight: 800;
          letter-spacing: .07em; text-transform: uppercase; color: var(--slate);
          padding: 0 var(--s4) var(--s3); border-bottom: 1.5px solid var(--border-strong); }
html[data-script="devanagari"] .tbl th { text-transform: none; letter-spacing: 0; }
.tbl td { padding: var(--s4); border-bottom: 1px solid var(--border);
          vertical-align: top; color: #223546; }
.tbl td.num, .tbl th.num { text-align: right; font-variant-numeric: tabular-nums; }
.tbl tr:last-child td { border-bottom: 0; }

/* Bibliography. */
.bib { display: grid; gap: var(--s5); padding-left: 0; counter-reset: bib; }
.bib li { list-style: none; display: grid; gap: 4px; padding-left: 40px;
          position: relative; }
.bib li::before { counter-increment: bib; content: counter(bib);
  position: absolute; left: 0; top: 1px; width: 26px; height: 26px;
  border-radius: 50%; background: var(--mist); color: var(--bloom-text);
  font-size: 12px; font-weight: 800; display: flex; align-items: center;
  justify-content: center; }
.bib__t { font-family: var(--display); font-size: 17px; line-height: 1.3; }
.bib__m { font-size: 13.5px; color: var(--slate); }
.bib__l { font-size: 13px; font-weight: 600; word-break: break-all;
           display: inline-block; padding-block: 12px; margin-block: -6px; }

/* -------------------------------------------------- who this is for
   Four portraits with the reason each woman is here under them. Portrait
   ratio on purpose: a row of 16:9 crops reads as stock, a row of 4:5 reads as
   people. The caption is the point — without it this is decoration. */
.who { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s5); }
.who__c { margin: 0; }
.who__img {
  display: block; width: 100%; height: auto; aspect-ratio: 4 / 5;
  object-fit: cover; object-position: 50% 32%;
  border-radius: var(--r); background: var(--raised);
}
.who__h { font-family: var(--display); font-size: 19px; line-height: 1.2;
          margin-top: var(--s4); font-weight: 500; }
.who__s { font-size: 14.5px; color: var(--slate); margin-top: var(--s2); }
@media (max-width: 1000px) { .who { grid-template-columns: repeat(2, minmax(0,1fr)); gap: var(--s5); } }
@media (max-width: 540px)  { .who { grid-template-columns: minmax(0,1fr); } .who__img { aspect-ratio: 3 / 2; } }

/* A split where the copy leads and the picture supports, rather than 50/50. */
.split--wide { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); }
@media (max-width: 900px) { .split--wide { grid-template-columns: minmax(0,1fr); } }

/* A limits card, styled to be read rather than skipped. It carries the one
   paragraph on the site that says what AZZA will NOT sell you, and a brand
   that buries that has not really said it. Ember rather than a warning red:
   this is a boundary, not an error. */
.note--limit {
  border: 1.5px solid var(--ember-deep); border-left-width: 5px;
  border-radius: var(--r); background: var(--card);
  padding: var(--s6) var(--s6) var(--s6) var(--s7);
  max-width: 900px;
}
.note--limit .eyebrow { color: var(--ember-deep); }
.sec--dark .note--limit {
  background: rgba(251,247,238,.05); border-color: var(--ember);
}
.sec--dark .note--limit .eyebrow { color: var(--ember); }

/* -------------------------------------------------- explainer video
   The video is a 16:9 dark frame with the brand's own navy inside it, so it
   sits on the cream page as a picture rather than a hole. aspect-ratio plus a
   real poster means nothing on the page moves when the file loads — these sit
   above the fold on article pages people land on from search. */
.vid { margin: 0; max-width: 860px; }
.vid--compact { max-width: 640px; }
.vid__el {
  display: block; width: 100%; height: auto; aspect-ratio: 16 / 9;
  margin-top: var(--s5); border-radius: var(--r); background: var(--hero-deep);
  border: 1px solid var(--border); box-shadow: var(--shadow-2);
}
.vid__cap { margin-top: var(--s3); font-size: 13px; color: var(--slate);
            font-weight: 600; }
.vid .eyebrow { margin-bottom: 0; }

/* Video cards on the Learning hub. The play badge is drawn in CSS rather than
   shipped as an icon so it inherits the card's own colour on hover. */
/* A route card on /for-employers/: taller, with the qualifying condition
   ("From 25 people. Members pay.") set as an eyebrow above the name, because
   the condition is the thing a buyer is actually scanning for. */
/* The payment note on /membership/. Same shape as note--limit but keyed to
   teal rather than amber: this one is information, not a warning, and the
   amber rail is reserved for the things the site refuses to do. */
.note--pay {
  border: 1.5px solid var(--teal-deep); border-left-width: 5px;
  border-radius: var(--r); background: var(--card);
  padding: var(--s6) var(--s6) var(--s6) var(--s7);
  max-width: 900px;
}
.note--pay .eyebrow { color: var(--teal-deep); }

.card--tier { display: flex; flex-direction: column; }
.card--tier .ticks { margin-top: auto; padding-top: var(--s5); }

/* The four coming-soon tests on /blood-testing/. The outcome category and the
   evidence grade sit on one row at the top, so a reader scanning for "which
   of these is about my bones" and one scanning for "how good is the evidence"
   both get their answer before the prose. */
.card--test { display: flex; flex-direction: column; }
.test__top { display: flex; flex-wrap: wrap; gap: var(--s2);
             align-items: center; justify-content: space-between; }
/* .chip is a 44px tap target because it is normally a link. This one is a
   label, not a control, so it drops to label weight rather than borrowing a
   touch target it does not need. */
.chip--cat { min-height: 0; padding: 5px 12px; font-size: 12.5px;
             font-weight: 700; letter-spacing: .04em; color: var(--slate);
             border-color: var(--border); }
.test__q { font-family: var(--display); font-style: italic;
           font-size: clamp(17px, 1.6vw, 20px); color: var(--bloom-text);
           line-height: 1.3; }
.test__d { margin-top: auto; padding-top: var(--s5);
           border-top: 1px solid var(--border);
           display: grid; grid-template-columns: minmax(0, 1fr);
           gap: 2px var(--s4); font-size: 14px; }
.test__d dt { color: var(--fog); font-weight: 700; font-size: 12.5px;
              letter-spacing: .06em; text-transform: uppercase; }
.test__d dd { color: var(--slate); margin-bottom: var(--s3); }
.test__d dd:last-child { margin-bottom: 0; }
@media (min-width: 560px) {
  .test__d { grid-template-columns: 148px minmax(0, 1fr); }
  .test__d dt { padding-top: 1px; }
}

.card--vid { padding: 0; overflow: hidden; position: relative; }
.card__shot { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9;
              object-fit: cover; background: var(--hero-deep); }
.card--vid h3, .card--vid .lc__m { padding: 0 var(--s5); }
.card--vid .lc__m { padding-bottom: var(--s5); }
/* Bottom-right, not centred. Every poster is a title card with its headline
   set top-left, so a centred badge lands on the type — it was sitting on the
   word "forty" in "Your metabolism did not collapse at forty". */
.card__play {
  position: absolute; right: var(--s4);
  top: calc(56.25% - 52px - var(--s4));
  width: 52px; height: 52px; border-radius: 50%;
  background: rgba(7, 23, 38, .70); border: 1.5px solid rgba(246,242,234,.55);
  backdrop-filter: blur(3px);
}
.card__play::after {
  content: ''; position: absolute; left: 20px; top: 15px;
  border-left: 16px solid var(--ink-inverse);
  border-top: 10px solid transparent; border-bottom: 10px solid transparent;
}
.card--vid:hover .card__play { background: var(--bloom-deep);
  border-color: var(--bloom); }
@media (max-width: 960px) { .lc--vid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 620px) { .lc--vid { grid-template-columns: minmax(0,1fr); } }

.art { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: clamp(32px, 5vw, 72px);
       align-items: start; }
@media (max-width: 1000px) { .art { grid-template-columns: minmax(0, 1fr); } }
.prose { max-width: var(--reading); }
.prose > * + * { margin-top: var(--s5); }
.prose h2 { font-family: var(--display); font-size: clamp(24px, 2.6vw, 32px); font-weight: 500;
            margin-top: var(--s8); letter-spacing: -0.018em; }
.prose h3 { font-size: 19px; font-weight: 700; margin-top: var(--s7); }
.prose p { font-size: 17.5px; line-height: 1.7; color: #223546; }
.prose ul, .prose ol { display: grid; gap: var(--s3); padding-left: 0; }
.prose li { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: var(--s3);
            font-size: 17px; line-height: 1.65; color: #223546; }
.prose li::before { content: ''; width: 6px; height: 6px; border-radius: 50%;
                    background: var(--bloom-deep); margin-top: 11px; }
.prose ol { counter-reset: p; }
.prose ol li::before { counter-increment: p; content: counter(p); width: auto;
                       background: none; border-radius: 0; margin-top: 0;
                       font-weight: 700; color: var(--bloom-text); font-size: 15px; }
.prose blockquote { margin: var(--s7) 0; padding: var(--s5); background: var(--mist);
                    border-left: 3px solid var(--bloom-deep); border-radius: 0 var(--r) var(--r) 0; }
.prose blockquote p { font-size: 16.5px; color: var(--slate); }
.prose strong { font-weight: 700; color: var(--ink); }
.toc { position: sticky; top: 96px; border-left: 2px solid var(--border); padding-left: var(--s4); }
/* 12px, not 11.5: the label is "On this page" in English and half again as
   long in Spanish and Hindi, and the smallest type on the site should not be
   the type that only some readers get. */
.toc__h { font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
          color: var(--fog); margin-bottom: var(--s3); }
.toc a { display: block; padding: 5px 0; font-size: 13.5px; color: var(--slate); }
.toc a:hover { color: var(--bloom-text); }
@media (max-width: 1000px) { .toc { display: none; } }

.crumb { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: 13px;
         color: var(--fog); margin-bottom: var(--s5); }
.crumb a { color: var(--slate);
  /* 13px text is a 21px line box. Padding lifts the hit area past the 24px
     WCAG 2.5.8 floor; the negative margin keeps the crumb row's own height. */
  padding-block: 6px; margin-block: -6px; }
.crumb span { color: var(--fog-light); }

/* -------------------------------------------------- forms */
.form { display: grid; gap: var(--s5); max-width: 620px; }
.field { display: grid; gap: 7px; }
.field label { font-size: 14px; font-weight: 700; }
.field .hint { font-size: 12.5px; color: var(--fog); }
.field input, .field select, .field textarea {
  font: inherit; font-size: 16px; min-height: 50px; padding: 13px 15px;
  border: 1.5px solid var(--border-strong); border-radius: var(--r-sm);
  background: var(--card); color: var(--ink); width: 100%;
}
.field textarea { min-height: 150px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--bloom-deep); outline: 3px solid rgba(0, 150, 156, .2); outline-offset: 0;
}
.req { color: var(--bad); }
.check { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: var(--s3);
         align-items: start; font-size: 14.5px; color: var(--slate); }
.check input { width: 24px; height: 24px; min-height: 0; margin-top: 1px; }

/* -------------------------------------------------- contact cards */
.cc { display: grid; gap: var(--s2); }
.cc__t { font-weight: 700; font-size: 15.5px; }
.cc__e { font-weight: 700; color: var(--bloom-text); font-size: 15px; word-break: break-word; }

/* -------------------------------------------------- reveal (fails visible) */
.reveal-on .rv { opacity: 0; transform: translateY(18px); }
.reveal-on .rv.in,
.reveal-on .rv:focus-within { opacity: 1; transform: none; }
.reveal-on .rv { transition: opacity .55s var(--ease), transform .55s var(--ease); }
@media (prefers-reduced-motion: reduce) {
  .reveal-on .rv { opacity: 1 !important; transform: none !important; transition: none; }
}

/* -------------------------------------------------- utilities */
.center { text-align: center; }
.mt0 { margin-top: 0 !important; }
.mt4 { margin-top: var(--s4); }
.mt5 { margin-top: var(--s5); }
.mt6 { margin-top: var(--s6); }
.mt7 { margin-top: var(--s7); }
.sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.scrollx { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.rule { height: 1px; background: var(--border); border: 0; margin: 0; }
.sec--dark .rule { background: var(--border-dark); }
.badge { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px;
         border-radius: var(--r-pill); background: rgba(240,113,138, .13);
         color: var(--bloom-text); font-size: 12.5px; font-weight: 700; }
.sec--dark .badge, .sec--deep .badge { background: rgba(240,113,138, .20); color: var(--bloom); }

/* ---------------------------------------------------------------- no inline styles
   The Content-Security-Policy on this host is style-src 'self', which blocks
   style="" attributes outright — the first deploy shipped a broken layout for
   exactly this reason. Everything that used to be an inline style lives here. */
.hdr__logo img { height: 30px; width: auto; }
.ftr__brand img { height: 34px; width: auto; }

.photo { border-radius: var(--r); box-shadow: var(--shadow-1); width: 100%; height: auto; }
.svg-fluid { width: 100%; height: auto; overflow: visible; }
.loop-wrap { max-width: 520px; margin: 0 auto; }

.d1--page  { font-size: clamp(36px, 5.6vw, 68px); }
.d1--sub   { font-size: clamp(34px, 5.2vw, 64px); }
.d1--cat   { font-size: clamp(32px, 5vw, 58px); }
.d1--art   { font-size: clamp(30px, 4.6vw, 54px); }
.d1--legal { font-size: clamp(30px, 4.4vw, 52px); }
.d2--cat   { font-size: clamp(26px, 3.4vw, 40px); }
.d2--sec   { font-size: clamp(26px, 3.2vw, 38px); }
.d3--quote { font-size: clamp(20px, 2.2vw, 27px); }

.lnk-plain { color: inherit; }
.lnk-plain:hover { color: var(--bloom-text); }
.dl--flush { margin-top: 0; border-top: 0; }
.mb6 { margin-bottom: var(--s6); }

.pullquote { margin: var(--s7) 0 0; padding: var(--s5); background: var(--mist);
             border-left: 3px solid var(--bloom-deep);
             border-radius: 0 var(--r) var(--r) 0; }

/* honeypot — present for bots, off-screen and unreachable for everyone else */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* evidence grades. Each is a fixed pair, so they are classes not computed styles. */
.badge--established { background: rgba(0, 128, 122, .12); color: var(--ok); }
.badge--emerging    { background: rgba(178, 107, 0, .12); color: var(--warn); }
.badge--mechanism   { background: rgba(224, 81, 47, .12); color: var(--ember-deep); }

.gauge__seg--opt  { width: 34%; background: var(--ok); }
.gauge__seg--norm { width: 40%; background: var(--sand); }
.gauge__seg--high { width: 26%; background: var(--ember); }
.pad7 { padding: var(--s7) 0; }
.chat__name { font-size: 16px; font-weight: 700; letter-spacing: -0.01em; }