/* =================================================================
   BioSense — Marketing site design system
   v4 — olive-sage palette derived from the official BioSense logo,
        Inter three-weight system (Light 300 / Medium 500 / Black 900),
        italic-emphasis brand voice.
   Tokens at the top; component blocks follow in order of appearance.
   ================================================================= */

/* ---------- Tokens ---------- */
:root {
  /* Brand palette — sampled directly from the BioSense logo "S" gradient.
     The S runs from #95B77E (top) through #8FAF80 (mid) to #77966C (bottom).
     We pick a single mid-deep olive as the primary brand colour, then a
     deeper olive for hover/text-on-light, a softer sage for secondary
     accents and a tint for backgrounds and pills. */
  --brand-sage:        #6F8E5A;   /* primary brand — buttons, ring, mark, accent */
  --brand-sage-deep:   #556F45;   /* accessible hover / outline / text-on-light */
  --brand-sage-soft:   #A8BD95;   /* secondary muted olive-sage */
  --brand-sage-tint:   #E2EAD6;   /* background washes / pills */
  --brand-sage-grad-1: #95B77E;   /* gradient top stop (light) — matches logo */
  --brand-sage-grad-2: #6F8E5A;   /* gradient bottom stop (deep) — matches logo */
  --brand-sand:        #F2EEE6;   /* warm cream surface */
  --brand-cream:       #F5F7EC;   /* primary surface — sage-warm off-white */
  --brand-night:       #1A1C1A;   /* near-black text */

  /* Surface tokens */
  --surface:    #FFFFFF;
  --surface-1:  var(--brand-cream);
  --surface-2:  var(--brand-sand);
  --surface-3:  #E9E4D9;
  --surface-dark: #1A1C1A;

  /* Text */
  --ink:    var(--brand-night);
  --ink-2:  #3A3D38;
  --ink-3:  #6B6E68;
  --ink-4:  #9A9D96;

  /* Inverted text — used on sage and dark surfaces */
  --ink-inv:    #FAFAF8;
  --ink-inv-2:  rgba(250, 250, 248, 0.82);
  --ink-inv-3:  rgba(250, 250, 248, 0.62);

  /* Lines */
  --line:           rgba(26, 28, 26, 0.10);
  --line-strong:    rgba(26, 28, 26, 0.18);
  --line-inv:       rgba(250, 250, 248, 0.16);
  --line-inv-strong:rgba(250, 250, 248, 0.28);

  /* Radii */
  --r-xs: 4px;
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 18px;
  --r-xl: 24px;
  --r-2xl: 32px;
  --r-pill: 999px;

  /* Spacing scale (8pt) */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px; --s-5: 24px;
  --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 128px;

  /* Layout */
  --page-max: 1360px;
  --page-pad: clamp(20px, 4vw, 48px);

  /* Type — Inter, three-weight system
       • Black 900   → display headings (h1, h2, hero)
       • Medium 500  → sub-headings, eyebrows, buttons
       • Light 300   → body copy
     Headings dial back to ExtraBold 800 at the largest display sizes
     where pure Black starts to read as overpowering. */
  --font: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI",
          Roboto, Helvetica, Arial, sans-serif;

  /* Motion */
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --dur-fast: 160ms;
  --dur:      280ms;
  --dur-slow: 520ms;

  /* Soft shadow used for floating glass cards */
  --shadow-card: 0 1px 2px rgba(26,28,26,0.04),
                 0 12px 32px -12px rgba(26,28,26,0.18);
  --shadow-soft: 0 1px 2px rgba(26,28,26,0.04),
                 0 6px 18px -6px rgba(26,28,26,0.10);

  /* ---- Frosted-glass panel tokens ----
     Two paired treatments used by all "boutique premium" panels:
     anchor cards, pricing cards, the deep visual panels on
     how-it-works, and the homepage feature-row cards. Centralised
     here so a single tweak (blur strength, border opacity, shadow
     length) propagates across the entire site.

     Neutral / white glass — for panels on cream or sand surfaces.
     The inset 1px highlight reads as a "top edge of glass" line,
     then the shadow stack is deliberately split into TWO families:
       1. A close sage-tinted glow — bathes the panel in brand light
          so the page never feels like a sea of white-on-white cards.
       2. A wider neutral atmospheric shadow — grounds the panel with
          honest depth so the sage glow doesn't tip into "everything
          is floating on a green cloud".
     Together they read as "boutique panel lit by a warm sage room"
     rather than "card with a tinted drop shadow". */
  --glass-bg:       rgba(255, 255, 255, 0.66);
  --glass-bd:       rgba(255, 255, 255, 0.68);
  --glass-blur:     blur(16px) saturate(160%);
  --glass-shadow:   inset 0 1px 0 rgba(255, 255, 255, 0.72),
                    0 1px 2px rgba(40, 44, 36, 0.04),
                    0 8px 22px -8px  rgba(149, 183, 126, 0.22),
                    0 24px 56px -22px rgba(40, 44, 36, 0.18);

  /* Sage glass — for accented "best value" / elevated panels.
     Same logic, dialled UP: both the near glow and the atmospheric
     shadow stay in the sage family so the elevated card visibly
     pushes more brand light into the space around it. */
  --glass-sage-bg:     linear-gradient(180deg,
                         rgba(168, 189, 149, 0.34) 0%,
                         rgba(168, 189, 149, 0.20) 100%);
  --glass-sage-bd:     rgba(111, 142, 90, 0.42);
  --glass-sage-blur:   blur(18px) saturate(170%);
  --glass-sage-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55),
                       0 1px 2px rgba(40, 44, 36, 0.05),
                       0 10px 28px -10px rgba(149, 183, 126, 0.38),
                       0 28px 60px -22px rgba(111, 142, 90, 0.40);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  font-family: var(--font);
  font-weight: 300;
  font-size: 17px;
  line-height: 1.6;
  letter-spacing: 0.005em;
  color: var(--ink);
  background: var(--surface-1);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "cv11", "ss01", "ss03";
}
img, svg, video { max-width: 100%; display: block; }
button { font: inherit; cursor: pointer; }
a { color: inherit; text-decoration: none; }
:focus-visible {
  outline: 2px solid var(--brand-sage-deep);
  outline-offset: 3px;
  border-radius: 4px;
}
::selection { background: var(--brand-sage-tint); color: var(--ink); }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}

/* ---------- Typography scale ----------
   Inter three-weight system. Headings run Black (900) so titles land
   confidently in the editorial layout; the very largest display sizes
   (.display-xxl, .display-xl) dial back to ExtraBold (800) because
   pure Black at 80–96px starts to read as a wall rather than a
   headline. Sub-headings sit at Medium (500). Body copy is Light
   (300) — Inter is unusually legible at 300 for body sizes which is
   what keeps the page feeling premium and editorial rather than
   "marketing-loud". Italic emphasis runs at Bold 700 italic in sage
   so the accent word reads softer than the surrounding heavy roman. */
.display-xxl {
  font-weight: 800;
  font-size: clamp(44px, 7vw, 96px);
  line-height: 1.00;
  letter-spacing: -0.028em;
  text-wrap: balance;
}
.display-xl {
  font-weight: 800;
  font-size: clamp(36px, 5.2vw, 72px);
  line-height: 1.02;
  letter-spacing: -0.025em;
  text-wrap: balance;
}
.display {
  font-weight: 900;
  font-size: clamp(30px, 3.6vw, 50px);
  line-height: 1.06;
  letter-spacing: -0.022em;
  text-wrap: balance;
}
.heading {
  font-weight: 900;
  font-size: clamp(22px, 2.2vw, 30px);
  line-height: 1.16;
  letter-spacing: -0.016em;
  text-wrap: balance;
}
.subheading {
  font-weight: 500;
  font-size: clamp(18px, 1.4vw, 22px);
  line-height: 1.55;
  letter-spacing: -0.005em;
  color: var(--ink-2);
  text-wrap: pretty;
}

/* Italic emphasis on display copy — always sage, always italic.
   Markup pattern:  <em>Live your best.</em>  or .grad-text for legacy. */
.display-xxl em, .display-xl em, .display em, .heading em,
.hero__headline em, .editorial__lede em {
  font-style: italic;
  font-weight: 700;
  color: var(--brand-sage);
}
.grad-text {
  font-style: italic;
  font-weight: 700;
  color: var(--brand-sage);
  background: none;
  -webkit-background-clip: initial;
          background-clip: initial;
  -webkit-text-fill-color: currentColor;
}

.body    { font-weight: 400; font-size: 17px; line-height: 1.65; color: var(--ink-2); }
.body-sm { font-weight: 400; font-size: 15px; line-height: 1.6;  color: var(--ink-3); }
.mono    { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }

.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--brand-sage-deep);
}
.eyebrow::before {
  content: "";
  width: 22px; height: 1px;
  background: currentColor;
  opacity: 0.6;
}
.eyebrow--on-dark { color: var(--brand-sage); }
.eyebrow--plain::before { display: none; }

/* ---------- Layout ---------- */
.container {
  width: 100%;
  max-width: var(--page-max);
  margin-inline: auto;
  padding-inline: var(--page-pad);
}
.container--wide { max-width: 1440px; }
.section { padding-block: clamp(72px, 9vw, 144px); }
.section--tight { padding-block: clamp(56px, 6vw, 96px); }
.section--cream { background: var(--surface-1); }
.section--sand  { background: var(--surface-2); }
.section--sage-tint { background: var(--brand-sage-tint); }
.section--sage {
  background: var(--brand-sage);
  color: var(--ink-inv);
}
.section--sage .body,
.section--sage .body-sm,
.section--sage .subheading { color: var(--ink-inv-2); }
.section--sage .eyebrow { color: var(--ink-inv); }

.section-head {
  display: grid;
  gap: var(--s-4);
  max-width: 880px;
  margin-bottom: clamp(48px, 6vw, 88px);
}
.section-head--center { text-align: center; margin-inline: auto; }

.hairline {
  height: 1px; width: 100%;
  background: var(--line);
  border: 0;
}

/* ---------- Buttons ---------- */
.btn {
  /* Primary CTA — flat olive-sage pill. No gradient, no inset highlight,
     no tinted glow. Editorial calm; the colour does the talking. */
  --btn-bg: var(--brand-sage);
  --btn-fg: var(--ink-inv);
  --btn-bd: var(--brand-sage);
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 24px;
  background: var(--btn-bg);
  color: var(--btn-fg);
  border: 1px solid var(--btn-bd);
  border-radius: var(--r-pill);
  font-weight: 500;
  font-size: 15px;
  letter-spacing: 0.005em;
  transition: background var(--dur) var(--ease),
              border-color var(--dur) var(--ease),
              color var(--dur) var(--ease),
              transform var(--dur-fast) var(--ease);
}
.btn:hover {
  --btn-bg: var(--brand-sage-deep);
  --btn-bd: var(--brand-sage-deep);
  transform: translateY(-1px);
}
.btn:active { transform: translateY(0); }
.btn:focus-visible {
  outline: 2px solid var(--brand-sage-deep);
  outline-offset: 3px;
}
.btn .arr { transition: transform var(--dur) var(--ease); }
.btn:hover .arr { transform: translateX(3px); }

/* Ghost / text link with arrow */
.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--ink);
  --btn-bd: var(--line-strong);
}
.btn--ghost:hover {
  --btn-bg: transparent;
  --btn-bd: var(--ink);
  --btn-fg: var(--ink);
}

/* Inline text-link with play / arrow icon (used next to Get started) */
.btn--text {
  --btn-bg: transparent;
  --btn-fg: var(--ink);
  --btn-bd: transparent;
  padding: 14px 8px;
}
.btn--text:hover {
  --btn-bg: transparent;
  --btn-bd: transparent;
  color: var(--brand-sage-deep);
}
.btn--text .play {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--brand-sage);
  color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 10px;
}

/* On dark / sage surfaces */
.btn--on-dark {
  --btn-bg: var(--brand-cream);
  --btn-fg: var(--brand-night);
  --btn-bd: var(--brand-cream);
}
.btn--on-dark:hover {
  --btn-bg: #FFFFFF;
  --btn-bd: #FFFFFF;
}
.btn--ghost.btn--on-dark {
  --btn-bg: transparent;
  --btn-fg: var(--brand-cream);
  --btn-bd: var(--line-inv-strong);
}
.btn--ghost.btn--on-dark:hover {
  --btn-bd: var(--brand-cream);
}

.btn--sm { padding: 10px 18px; font-size: 13.5px; }

/* ---------- Navigation ---------- */
.nav {
  position: sticky; top: 0; z-index: 40;
  background: rgba(250, 250, 248, 0.78);
  backdrop-filter: saturate(140%) blur(12px);
  -webkit-backdrop-filter: saturate(140%) blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur) var(--ease),
              background var(--dur) var(--ease),
              color var(--dur) var(--ease);
}
.nav.is-scrolled {
  border-bottom-color: var(--line);
  background: rgba(250, 250, 248, 0.94);
}

/* --- Transparent nav variant for pages with a full-bleed hero ---
   While the user is at the top, the nav sits over the dark hero with
   a white logo and cream-tinted links. As soon as the user scrolls
   past the hero, the existing .is-scrolled class wins and the nav
   reverts to its default cream-glass / dark-ink appearance. */
.nav--over-hero:not(.is-scrolled) {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom-color: transparent;
}
.nav--over-hero:not(.is-scrolled) .nav__links a,
.nav--over-hero:not(.is-scrolled) .nav__cta .nav__signin {
  color: var(--ink-inv-2);
}
.nav--over-hero:not(.is-scrolled) .nav__links a:hover,
.nav--over-hero:not(.is-scrolled) .nav__cta .nav__signin:hover {
  color: var(--ink-inv);
}
.nav--over-hero:not(.is-scrolled) .nav__toggle span,
.nav--over-hero:not(.is-scrolled) .nav__toggle span::before,
.nav--over-hero:not(.is-scrolled) .nav__toggle span::after {
  background: var(--ink-inv);
}

/* Stronger Get-Started CTA while sitting over the dark hero —
   swap the sage-on-night fill for cream-on-night so the button
   has maximum contrast against the video, with a soft elevation
   shadow so it reads as "the action" without shouting. Once the
   user scrolls past the hero, the default sage primary returns. */
.nav--over-hero:not(.is-scrolled) .nav__cta .btn {
  --btn-bg: var(--brand-cream);
  --btn-fg: var(--brand-night);
  --btn-bd: var(--brand-cream);
  box-shadow: 0 4px 16px -4px rgba(0, 0, 0, 0.45),
              0 1px 3px rgba(0, 0, 0, 0.18);
}
.nav--over-hero:not(.is-scrolled) .nav__cta .btn:hover {
  --btn-bg: #FFFFFF;
  --btn-bd: #FFFFFF;
}

/* Dual-logo: dark logotype by default, white when overlaying the hero.
   ----------------------------------------------------------------
   Specificity guard: `.logo__img { display: block; }` lives further
   down this stylesheet at the same specificity (0,1,0), so a plain
   `.logo__img--light { display: none; }` loses on source order and
   BOTH logos render. Doubling the class selector bumps each rule to
   (0,2,0) so the modifier always wins. */
.logo__img.logo__img--light { display: none; }
.nav--over-hero:not(.is-scrolled) .logo__img.logo__img--dark  { display: none; }
.nav--over-hero:not(.is-scrolled) .logo__img.logo__img--light { display: block; }
.nav__inner {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--s-5);
  height: 76px;
}
.nav__brand {
  display: inline-flex; align-items: center;
  padding: 8px 0;
}
.nav__brand .logo__img { height: 32px; }
.nav__links {
  display: flex; align-items: center; justify-content: center;
  gap: clamp(18px, 2.4vw, 36px);
}
.nav__links a {
  font-weight: 500; font-size: 14.5px;
  color: var(--ink-2);
  transition: color var(--dur-fast) var(--ease);
}
.nav__links a:hover,
.nav__links a[aria-current="page"] { color: var(--ink); }
.nav__cta {
  display: inline-flex; align-items: center; gap: 16px;
  justify-self: end;
}
.nav__cta .nav__signin {
  font-weight: 500; font-size: 14.5px;
  color: var(--ink-2);
}
.nav__cta .nav__signin:hover { color: var(--ink); }

.nav__toggle {
  display: none;
  background: transparent; border: 0;
  width: 40px; height: 40px;
  align-items: center; justify-content: center;
}
.nav__toggle span {
  display: block; width: 22px; height: 1.5px;
  background: var(--ink); position: relative;
  transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.nav__toggle span::before,
.nav__toggle span::after {
  content: ""; position: absolute; left: 0;
  width: 22px; height: 1.5px; background: var(--ink);
  transition: transform var(--dur) var(--ease);
}
.nav__toggle span::before { top: -7px; }
.nav__toggle span::after  { top: 7px; }
.nav.is-open .nav__toggle span { background: transparent; }
.nav.is-open .nav__toggle span::before { transform: translateY(7px) rotate(45deg); }
.nav.is-open .nav__toggle span::after  { transform: translateY(-7px) rotate(-45deg); }

.nav__mobile { display: none; }

@media (max-width: 920px) {
  .nav__inner { grid-template-columns: auto 1fr auto; }
  .nav__links,
  .nav__cta .nav__signin,
  .nav__cta .btn { display: none; }
  .nav__cta .btn--mobile-cta { display: inline-flex; }
  .nav__toggle { display: inline-flex; }
  .nav.is-open .nav__mobile {
    display: flex; flex-direction: column; gap: var(--s-4);
    padding: var(--s-5) var(--page-pad) var(--s-6);
    border-top: 1px solid var(--line);
    background: var(--surface-1);
  }
  .nav__mobile a {
    font-size: 18px; font-weight: 500; color: var(--ink);
    padding: 6px 0;
    border-bottom: 1px solid var(--line);
  }
  .nav__mobile .btn {
    display: inline-flex; align-self: start; margin-top: var(--s-3);
  }
}

/* ---------- Logo ---------- */
.logo {
  display: inline-flex; align-items: center;
  line-height: 1;
  text-decoration: none;
}
.logo__img {
  display: block;
  height: 32px;
  width: auto;
  image-rendering: auto;
  -webkit-user-drag: none;
}
.logo--lg .logo__img { height: 40px; }
.logo--min { min-width: 120px; }

.footer__url img {
  display: block;
  height: 17px;
  width: auto;
}

/* ---------- Hero — split (cream copy + contained video panel + glass card) ---------- */
.hero {
  position: relative;
  background: var(--surface-1);
  padding-block: clamp(48px, 6vw, 96px);
  overflow: hidden;
}
.hero__split {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
  min-height: clamp(520px, 64vh, 720px);
}
@media (max-width: 960px) {
  .hero__split { grid-template-columns: 1fr; min-height: 0; }
}

.hero__copy > * + * { margin-top: var(--s-5); }
.hero__headline { color: var(--ink); }
.hero__headline em {
  font-style: italic;
  color: var(--brand-sage);
}
.hero__sub {
  max-width: 56ch;
  font-size: clamp(17px, 1.3vw, 19px);
  color: var(--ink-2);
  font-weight: 400;
  letter-spacing: 0.002em;
}
.hero__ctas {
  display: inline-flex; flex-wrap: wrap; align-items: center; gap: 12px;
  margin-top: var(--s-6);
}

/* Image / video shell on the right — outer wrapper is just a positioning
   context so the recovery card can overhang the corner; the inner frame
   holds the rounded video clip. */
.hero__visual {
  position: relative;
  /* Same intrinsic size the frame had previously — keeps the grid layout
     unchanged, but allows the card to extend outside the rounded video. */
  aspect-ratio: 4 / 5;
  max-height: 720px;
}
@media (max-width: 960px) {
  .hero__visual { aspect-ratio: 16 / 11; max-height: none; }
}
.hero__visual-frame {
  position: absolute; inset: 0;
  border-radius: var(--r-2xl);
  overflow: hidden;
  background: var(--brand-sand);
  isolation: isolate;
}
.hero__video-loop {
  position: absolute; inset: 0;
}
.hero__video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1200ms var(--ease);
  will-change: opacity;
  pointer-events: none;
}
.hero__video.is-active { opacity: 1; }

/* Soft warm overlay so any frame reads premium / golden-hour, not raw */
.hero__visual-frame::after {
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(160deg, rgba(255, 235, 200, 0.10), rgba(26,28,26,0.05) 60%, rgba(26,28,26,0.20));
  pointer-events: none;
}

/* Reduced-motion / first-paint fallback */
.hero__visual-fallback {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-color: var(--brand-sand);
  z-index: 0;
}
@media (prefers-reduced-motion: reduce) {
  .hero__video-loop { display: none; }
}

/* ---- Glass readiness card — overhangs the bottom-right corner ---- */
.recovery-card {
  position: absolute;
  /* Negative offsets push the card off the corner of the video frame so
     ~30-40% of it overhangs into the cream space, half-on / half-off. */
  right:  clamp(-72px, -4vw, -32px);
  bottom: clamp(-56px, -3.2vw, -28px);
  width: clamp(196px, 22vw, 232px);
  display: flex; flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 22px 26px 18px;
  /* True frosted glass: very translucent, deep blur with strong saturation
     boost so it picks up the warm/sage tones of the video behind it. */
  background:
    linear-gradient(135deg,
      rgba(255, 255, 255, 0.34) 0%,
      rgba(255, 255, 255, 0.12) 100%);
  backdrop-filter: blur(28px) saturate(190%);
  -webkit-backdrop-filter: blur(28px) saturate(190%);
  border: 1px solid rgba(255, 255, 255, 0.30);
  border-radius: var(--r-xl);
  /* Multi-layer shadows: bright top + left highlight (glass catches light)
     and a soft drop shadow that grounds the floating card. */
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.65),
    inset 1px 0 0 rgba(255, 255, 255, 0.25),
    0 18px 40px -10px rgba(26, 28, 26, 0.32),
    0 4px 12px -4px rgba(26, 28, 26, 0.18);
  color: var(--ink);
  z-index: 3;
}
.recovery-card__top {
  font-size: 13.5px;
  font-weight: 500;
  color: var(--ink-2);
  line-height: 1.4;
}
.recovery-card .ring-progress {
  width: 116px; height: 116px;
  margin: 14px 0 6px;
}
.recovery-card .ring-progress__track { stroke: rgba(168, 189, 149, 0.32); }
.recovery-card .ring-progress__fill  { stroke: var(--brand-sage); }
.recovery-card .ring-progress__num   { font-size: 30px; color: var(--ink); }
.recovery-card .ring-progress__lbl   {
  text-transform: none;
  font-size: 12px;
  letter-spacing: 0.01em;
  color: var(--ink-3);
  font-weight: 500;
  margin-top: 2px;
}
.recovery-card__bottom {
  font-size: 11.5px;
  color: var(--ink-3);
  font-weight: 500;
  letter-spacing: 0.02em;
  margin-top: 4px;
}
@media (max-width: 720px) {
  /* On smaller screens, less aggressive overhang so it doesn't fall
     into the next section */
  .recovery-card {
    right:  clamp(-32px, -2vw, -16px);
    bottom: clamp(-28px, -2vw, -16px);
  }
}
@media (max-width: 480px) {
  /* On very narrow phones, sit fully inside the panel and shrink */
  .recovery-card {
    right: 12px; bottom: 12px;
    width: clamp(170px, 56vw, 210px);
    padding: 18px 20px 14px;
  }
  .recovery-card .ring-progress { width: 96px; height: 96px; }
  .recovery-card .ring-progress__num { font-size: 26px; }
}

/* Recovery / readiness ring — pure SVG, sized via CSS */
.ring-progress { position: relative; width: 84px; height: 84px; }
.ring-progress svg {
  width: 100%; height: 100%;
  transform: rotate(-90deg);
}
.ring-progress__track { stroke: var(--brand-sage-tint); }
.ring-progress__fill  {
  stroke: var(--brand-sage);
  stroke-linecap: round;
  transition: stroke-dashoffset var(--dur-slow) var(--ease);
}
.ring-progress__value {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  flex-direction: column;
  font-weight: 700;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.ring-progress__num { font-size: 24px; color: var(--ink); line-height: 1; }
.ring-progress__lbl { font-size: 9px; color: var(--ink-3); margin-top: 2px;
                      text-transform: uppercase; letter-spacing: 0.12em; font-weight: 500; }

.ring-progress--lg { width: 140px; height: 140px; }
.ring-progress--lg .ring-progress__num { font-size: 44px; }
.ring-progress--lg .ring-progress__lbl { font-size: 11px; margin-top: 4px; }

/* ============================================================
   FULL-BLEED HERO  ( .hero.hero--full )
   ------------------------------------------------------------
   100vh dark hero modelled on functionhealth.com:
   - Full-viewport background video crossfade behind everything
   - Top-and-bottom dark gradient for text legibility
   - Sticky transparent nav sits OVER the hero (negative margin-top
     pulls the hero up so the video reaches the very top edge)
   - Copy bottom-left, readiness card top-right, stat strip bottom-right
   ============================================================ */
.hero--full {
  position: relative;
  height: 100vh;
  height: 100dvh;  /* avoids the mobile-Safari address-bar jump */
  min-height: 640px;
  max-height: 980px;
  margin-top: calc(-1 * 76px);  /* nav height — lift the video under it */
  padding: 0;
  background: var(--brand-night);
  color: var(--ink-inv);
  overflow: hidden;
}

/* --- Background layers (z stack: fallback → video → tint) --- */
.hero--full .hero__bg {
  position: absolute; inset: 0;
  z-index: 0;
}
.hero--full .hero__bg-fallback {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-color: var(--brand-night);
}
.hero--full .hero__bg-loop { position: absolute; inset: 0; }
.hero--full .hero__bg-video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 800ms var(--ease);
  will-change: opacity;
  pointer-events: none;
}
.hero--full .hero__bg-video.is-active { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .hero--full .hero__bg-loop { display: none; }
}

/* Top + bottom warm-dark gradient — keeps the middle of the frame bright
   for the subject of the video but darkens the bands where text + nav
   live so contrast stays AA-comfortable. Uses a warm olive-shadow tone
   (deep forest, not neutral graphite) so the new colour-graded clips
   feel like they live inside the BioSense palette rather than sitting
   under a clinical scrim. A second very-low-opacity sage wash unifies
   tonal drift between the three crossfading clips. */
.hero--full .hero__bg-tint {
  position: absolute; inset: 0;
  background:
    /* Sage tonal unifier — barely perceptible, ties all clips together */
    linear-gradient(180deg,
      rgba(85, 111, 69, 0.06) 0%,
      rgba(85, 111, 69, 0.04) 50%,
      rgba(85, 111, 69, 0.08) 100%),
    /* Primary text-legibility scrim — warm forest dark */
    linear-gradient(180deg,
      rgba(18, 24, 16, 0.58) 0%,
      rgba(18, 24, 16, 0.22) 22%,
      rgba(18, 24, 16, 0.22) 55%,
      rgba(18, 24, 16, 0.78) 100%);
  pointer-events: none;
}

/* --- Overlay (content) --- */
.hero--full .hero__overlay {
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding-top: clamp(96px, 13vh, 144px);
  padding-bottom: clamp(40px, 7vh, 80px);
}

.hero--full .hero__copy { max-width: 640px; }
.hero--full .hero__copy > * + * { margin-top: var(--s-5); }

/* Hero headline — sized DOWN from the global display-xxl scale.
   The hero column is constrained (max-width 640px) so the global
   ~96px size wraps to 4–5 lines and crashes into the nav. This
   override caps it at 52px so the headline always lands on TWO
   lines ("Personalised health insights, / powered by your data.")
   and leaves comfortable breathing room above for the nav. The
   subtle 1px text-shadow lifts the white type off the video. */
.hero--full .hero__headline {
  color: var(--ink-inv);
  font-weight: 900;
  font-size: clamp(34px, 3.8vw, 52px);
  line-height: 1.05;
  letter-spacing: -0.028em;
  text-wrap: balance;
  text-shadow: 0 1px 24px rgba(8, 14, 8, 0.32);
}
.hero--full .hero__headline em {
  color: var(--brand-sage-soft);
  font-style: italic;
}
.hero--full .hero__sub {
  max-width: 52ch;
  font-size: clamp(16px, 1.15vw, 18px);
  line-height: 1.55;
  color: var(--ink-inv-2);
  font-weight: 400;
  letter-spacing: 0.002em;
  text-shadow: 0 1px 18px rgba(8, 14, 8, 0.30);
}
.hero--full .hero__ctas {
  display: inline-flex; flex-wrap: wrap; align-items: center; gap: 12px;
  margin-top: var(--s-6);
}

/* --- Hero bullet list ---
   Reads as a quiet "what BioSense does" feature checklist between the
   lede paragraph and the CTAs. Each icon sits inside a small circular
   sage chip so the row reads as a deliberate feature pill rather than
   a bullet with an ornament floating beside it. */
.hero--full .hero__bullets {
  list-style: none;
  padding: 0;
  margin: var(--s-6) 0 0;
  display: grid;
  gap: 14px;
  max-width: 52ch;
}
.hero--full .hero__bullets li {
  display: flex;
  align-items: center;
  gap: 14px;
  color: var(--ink-inv);
  font-size: clamp(14.5px, 1.05vw, 16.5px);
  line-height: 1.4;
  font-weight: 500;
  text-shadow: 0 1px 14px rgba(8, 14, 8, 0.28);
}
.hero--full .hero__bullets .hero__bullet-ic {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(168, 189, 149, 0.16);
  border: 1px solid rgba(168, 189, 149, 0.34);
  backdrop-filter: blur(8px) saturate(140%);
  -webkit-backdrop-filter: blur(8px) saturate(140%);
}
.hero--full .hero__bullets svg {
  width: 15px;
  height: 15px;
  color: var(--brand-sage-soft);
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
}
.hero--full .hero__bullets span { display: block; }
@media (max-width: 640px) {
  .hero--full .hero__bullets { gap: 12px; }
  .hero--full .hero__bullets .hero__bullet-ic { width: 26px; height: 26px; }
  .hero--full .hero__bullets svg { width: 13px; height: 13px; }
}
/* "See how it works" text-link reads on dark too */
.hero--full .btn--text { --btn-fg: var(--ink-inv); }
.hero--full .btn--text:hover { color: var(--brand-sage-soft); }

/* --- Floating readiness card — "pop-out alert" treatment ---
   Re-treated as a dark-glass notification card that lives in the same
   UI family as the bottom stats strip (matching opacity / blur / border
   palette). Positioned just ABOVE the stats strip but deliberately
   offset to the LEFT of its right edge so the two feel related but
   asymmetric — like a notification that popped out near the stats,
   not a symmetrical sibling of them.

   We override the legacy light-glass treatment from .recovery-card
   wholesale here (background, border, text colours, ring track) so
   it reads as light-on-dark instead of dark-on-frost. */
.hero--full .recovery-card--floating {
  position: absolute;
  top: auto;
  left: auto;
  --card-w: clamp(196px, 17vw, 216px);
  width: var(--card-w);

  /* Card's BOTTOM-LEFT corner OVERLAPS the strip's TOP-RIGHT corner —
     the card extends UP and to the RIGHT, with a small corner-bite
     into the strip so the two read as a clipped notification pair
     rather than two separate panels touching at a point.

       • RIGHT  : starts from the literal "card's left edge at strip's
         right edge" position (var(--page-pad) - --card-w) and pulls
         it 28px back to the LEFT, so the card's left side eats 28px
         into the strip's right region.
       • BOTTOM : strip's top edge is ~96px above the strip's bottom
         anchor. We sit the card 24px BELOW that top edge so the
         card's bottom 24px overlaps the strip's top — matches the
         28px horizontal bite for a clean diagonal corner overlap. */
  right: calc(var(--page-pad) - var(--card-w) + 28px);
  bottom: calc(clamp(36px, 6vh, 64px) + 72px);

  /* Sit above the strip so the corner overlap renders cleanly */
  z-index: 3;

  padding: 14px 18px 12px;

  /* Dark-mode glass — same family as .hero__stats so they pair */
  background: rgba(250, 250, 248, 0.10);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  border: 1px solid rgba(250, 250, 248, 0.22);
  border-radius: var(--r-lg);
  color: var(--ink-inv);

  /* Cleaner depth — single soft inner top-highlight + grounded drop.
     The slightly heavier downward shadow helps the card visually lift
     off the strip below it, reinforcing the "popped-out" notification. */
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    0 28px 60px -18px rgba(0, 0, 0, 0.60),
    0 8px 20px -6px rgba(0, 0, 0, 0.32);

  /* "Pop-out" entrance — fades up + scales in after the hero settles */
  animation: recovery-pop-in 720ms var(--ease) 600ms backwards;
}

/* Light text variants for the card's internals on the dark-glass card */
.hero--full .recovery-card--floating .recovery-card__top {
  font-size: 12.5px;
  color: var(--ink-inv-2);
  line-height: 1.4;
}
.hero--full .recovery-card--floating .ring-progress {
  width: 92px; height: 92px;
  margin: 8px 0 4px;
}
.hero--full .recovery-card--floating .ring-progress__track { stroke: rgba(255, 255, 255, 0.16); }
.hero--full .recovery-card--floating .ring-progress__fill  { stroke: var(--brand-sage-soft); }
.hero--full .recovery-card--floating .ring-progress__num   { font-size: 24px; color: var(--ink-inv); }
.hero--full .recovery-card--floating .ring-progress__lbl   { color: var(--ink-inv-3); }
.hero--full .recovery-card--floating .recovery-card__bottom {
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-inv-3);
  margin-top: 2px;
}

/* Small sage "live" pulse dot — sells the notification feel.
   The double-pulse uses ::before for the expanding halo so we don't
   need an extra DOM node beyond the host span. */
.recovery-card__pulse {
  position: absolute;
  top: 12px; right: 14px;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--brand-sage-soft);
  box-shadow: 0 0 0 0 rgba(168, 189, 149, 0.55);
  animation: recovery-pulse 2.4s var(--ease) 1.4s infinite;
}
.recovery-card__pulse::before {
  content: "";
  position: absolute; inset: -3px;
  border-radius: 50%;
  background: rgba(168, 189, 149, 0.20);
}

@keyframes recovery-pop-in {
  from { opacity: 0; transform: translateY(14px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0)    scale(1); }
}
@keyframes recovery-pulse {
  0%   { box-shadow: 0 0 0 0   rgba(168, 189, 149, 0.55); }
  70%  { box-shadow: 0 0 0 10px rgba(168, 189, 149, 0);   }
  100% { box-shadow: 0 0 0 0   rgba(168, 189, 149, 0);   }
}
@media (prefers-reduced-motion: reduce) {
  .hero--full .recovery-card--floating { animation: none; }
  .recovery-card__pulse { animation: none; }
}

@media (max-width: 960px) {
  /* Keep the corner-anchor math intact — only shrink the card itself.
     The desktop rule already reads --card-w via custom property, so we
     just override --card-w (and a touch of padding) here. */
  .hero--full .recovery-card--floating {
    --card-w: 176px;
    padding: 12px 16px 10px;
  }
  .hero--full .recovery-card--floating .ring-progress { width: 80px; height: 80px; }
  .hero--full .recovery-card--floating .ring-progress__num { font-size: 22px; }
}
@media (max-width: 640px) {
  /* On narrow screens the stats strip goes full-bleed — there's no
     room to sit ENTIRELY to the right of it, so we revert the card to
     sit flush with the strip's right edge instead (overlapping the
     strip's top-right region rather than corner-touching). */
  .hero--full .recovery-card--floating {
    right: var(--page-pad);
  }
}
@media (max-width: 560px) {
  .hero--full .recovery-card--floating { display: none; }
}

/* --- Bottom-right stat strip (mirrors Function's 3-cell row) --- */
.hero--full .hero__stats {
  position: absolute;
  right: var(--page-pad);
  bottom: clamp(36px, 6vh, 64px);
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  min-width: min(560px, calc(100vw - var(--page-pad) * 2));
  padding: 16px clamp(8px, 1.6vw, 18px);
  background: rgba(250, 250, 248, 0.08);
  backdrop-filter: blur(10px) saturate(140%);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  border: 1px solid rgba(250, 250, 248, 0.18);
  border-radius: var(--r-lg);
}
.hero--full .hero__stat {
  display: grid; gap: 4px;
  text-align: left;
  padding: 2px clamp(12px, 1.6vw, 20px);
  border-right: 1px solid rgba(250, 250, 248, 0.22);
}
.hero--full .hero__stat:last-child { border-right: 0; }
.hero--full .hero__stat-num {
  font-weight: 700;
  font-size: clamp(18px, 1.6vw, 22px);
  color: var(--ink-inv);
  line-height: 1.15;
  letter-spacing: -0.005em;
  font-variant-numeric: tabular-nums;
}
.hero--full .hero__stat-lbl {
  font-size: 12.5px;
  color: var(--ink-inv-2);
  line-height: 1.35;
  font-weight: 500;
}

/* --- Responsive --- */
@media (max-width: 960px) {
  .hero--full {
    height: auto;
    min-height: 92vh;
    max-height: none;
  }
  .hero--full .hero__overlay {
    padding-bottom: clamp(180px, 26vh, 260px);
  }
}
@media (max-width: 640px) {
  .hero--full .hero__stats {
    left: var(--page-pad);
    right: var(--page-pad);
    min-width: 0;
    padding: 12px clamp(4px, 1vw, 10px);
  }
  .hero--full .hero__stat {
    padding: 2px clamp(8px, 2vw, 14px);
  }
  .hero--full .hero__stat-lbl { font-size: 11.5px; }
}

/* ============================================================
   LIFECYCLE — "Turning data into insight" four-step flow
   ------------------------------------------------------------
   Sits directly under the hero on the homepage. Reads at a glance
   on desktop (4 columns with a soft sage connector line passing
   horizontally through the icon row) and degrades cleanly to a
   2×2 grid on tablet, then a vertical stack on phones with the
   connector switching to a vertical orientation.

   The CSS connector is a single absolutely-positioned line on the
   <ol> with a fade-out at both ends. Each icon chip sits on top
   with a solid background so the line "passes through" the row.
   ============================================================ */
/* ---------- Lifecycle SPLIT HEAD ----------
   Section head (copy left) + visual card (right). Replaces the
   centred section-head pattern for the lifecycle section so the
   reader has an editorial anchor image for the "data into insight"
   transformation idea, before dropping into the 4-step flow below. */
.lifecycle__head-split {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: clamp(32px, 5vw, 80px);
  align-items: center;
  margin-bottom: clamp(48px, 6vw, 88px);
}
.section-head--in-split {
  margin-bottom: 0;
  max-width: none;
}
.lifecycle__visual {
  position: relative;
  margin: 0;
  border-radius: 20px;
  overflow: hidden;
  aspect-ratio: 5 / 6;
  max-height: 540px;
  justify-self: end;
  width: 100%;
  max-width: 460px;
  background: var(--brand-night);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 1px 2px rgba(40, 44, 36, 0.06),
    0 24px 60px -22px rgba(40, 44, 36, 0.28),
    0 12px 30px -14px rgba(149, 183, 126, 0.22);
}
.lifecycle__visual img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  /* Calm the watch image into the sand-cream palette without losing punch. */
  filter: saturate(0.92) brightness(0.95) contrast(1.04);
}
/* Soft sage glow over the image so it sits inside the brand family. */
.lifecycle__visual::after {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(55% 45% at 78% 22%, rgba(168, 189, 149, 0.22), transparent 70%),
    linear-gradient(180deg, rgba(20, 30, 18, 0.00) 55%, rgba(20, 30, 18, 0.38) 100%);
  pointer-events: none;
}
.lifecycle__visual-cap {
  position: absolute;
  top: 18px; left: 18px;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 10px 6px 8px;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-inv);
  background: rgba(20, 30, 18, 0.38);
  backdrop-filter: blur(10px) saturate(140%);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  z-index: 2;
}
.lifecycle__visual-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--brand-sage-soft);
  box-shadow: 0 0 0 0 rgba(168, 189, 149, 0.55);
  animation: recovery-pulse 2.4s var(--ease) 1s infinite;
}
.lifecycle__visual-stat {
  position: absolute;
  right: 18px; bottom: 18px;
  display: grid;
  gap: 2px;
  padding: 12px 16px;
  background: rgba(250, 250, 248, 0.10);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  border: 1px solid rgba(250, 250, 248, 0.20);
  border-radius: 12px;
  color: var(--ink-inv);
  z-index: 2;
  text-align: right;
}
.lifecycle__visual-stat-num {
  font-weight: 700;
  font-size: 26px;
  line-height: 1;
  letter-spacing: -0.01em;
}
.lifecycle__visual-stat-num em {
  font-style: normal;
  font-weight: 600;
  color: var(--brand-sage-soft);
  margin-left: 1px;
}
.lifecycle__visual-stat-lbl {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-inv-2);
}

@media (max-width: 900px) {
  .lifecycle__head-split {
    grid-template-columns: 1fr;
    gap: clamp(32px, 5vw, 48px);
  }
  .lifecycle__visual {
    justify-self: stretch;
    max-width: none;
    aspect-ratio: 16 / 9;
    max-height: 360px;
  }
}

/* ---------- "Your data, working together" bullet list ----------
   Sits inside .lifecycle__head-split as the section's value-prop
   list. Sand/cream-section variant of the dark hero bullet pattern. */
.works__list {
  list-style: none;
  padding: 0;
  margin: var(--s-6) 0 0;
  display: grid;
  gap: 14px;
  max-width: 56ch;
}
.works__list li {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: clamp(15px, 1.05vw, 17px);
  font-weight: 500;
  color: var(--ink);
  line-height: 1.45;
}
.works__list-ic {
  position: relative;
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(168, 189, 149, 0.18);
  border: 1px solid rgba(111, 142, 90, 0.22);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.55),
    0 1px 2px rgba(40, 44, 36, 0.04);
}
.works__list-ic svg {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 18px;
  height: 18px;
  transform: translate(-50%, -50%);
  color: var(--brand-sage);
  display: block;
  overflow: visible;
}
.works__list span { display: block; }
@media (max-width: 640px) {
  .works__list { gap: 12px; }
  .works__list li { font-size: 15px; }
  .works__list-ic { width: 28px; height: 28px; }
  .works__list-ic svg { width: 15px; height: 15px; }
}

.lifecycle {
  list-style: none;
  margin: 0; padding: 0;
  margin-top: clamp(32px, 4vw, 56px);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(24px, 3vw, 48px);
  position: relative;
}

/* Per-step thumbnail card — top of each lifecycle column. Each step
   gets its own editorial moment instead of a single icon chip. The
   images themselves carry the "journey" across the row, so the old
   horizontal connector line has been retired. */
.lifecycle__thumb {
  position: relative;
  margin: 0 0 18px;
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: 14px;
  overflow: hidden;
  background: var(--brand-night);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.10),
    0 1px 2px rgba(40, 44, 36, 0.05),
    0 16px 36px -18px rgba(40, 44, 36, 0.32),
    0 10px 22px -10px rgba(149, 183, 126, 0.22);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.lifecycle__thumb img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  /* Calm the variety of source images into the sand-cream palette so
     all four reads as one coherent set rather than four random shots. */
  filter: saturate(0.92) brightness(0.95) contrast(1.04);
}
.lifecycle__thumb::after {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(60% 50% at 25% 18%, rgba(168, 189, 149, 0.18), transparent 70%),
    linear-gradient(180deg, rgba(20, 30, 18, 0.00) 60%, rgba(20, 30, 18, 0.30) 100%);
  pointer-events: none;
}
.lifecycle__step:hover .lifecycle__thumb {
  transform: translateY(-2px) scale(1.006);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 1px 2px rgba(40, 44, 36, 0.05),
    0 20px 44px -18px rgba(40, 44, 36, 0.36),
    0 12px 28px -10px rgba(149, 183, 126, 0.36);
}

.lifecycle__step {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-rows: auto auto auto;
  gap: 10px;
  text-align: left;
  transition: transform var(--dur) var(--ease);
}
.lifecycle__step:hover { transform: translateY(-3px); }
.lifecycle__step:hover .lifecycle__icon {
  border-color: var(--brand-sage);
  box-shadow:
    0 1px 2px rgba(40, 44, 36, 0.04),
    0 12px 24px -10px rgba(149, 183, 126, 0.38);
}

/* Subtle step numeral — present but quiet, like a chapter marker.
   Each step gets a touch heavier ink as the journey progresses, so
   the eye visually "weighs in" toward the trend-tracking endpoint. */
.lifecycle__num {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  color: var(--brand-sage-deep);
  text-transform: uppercase;
  margin-bottom: 4px;
  font-variant-numeric: tabular-nums;
  opacity: 0.75;
}
.lifecycle__step:nth-child(2) .lifecycle__num { opacity: 0.85; }
.lifecycle__step:nth-child(3) .lifecycle__num { opacity: 0.92; }
.lifecycle__step:nth-child(4) .lifecycle__num { opacity: 1; color: var(--brand-sage); }

/* Icon chip — circular, soft sage on the section's sand background.
   Solid background so it "interrupts" the connector line cleanly. */
.lifecycle__icon {
  width: 56px; height: 56px;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--brand-cream);
  border: 1px solid var(--brand-sage-tint);
  color: var(--brand-sage-deep);
  box-shadow: 0 1px 2px rgba(40, 44, 36, 0.04);
  position: relative;
  transition: border-color var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease);
}
.lifecycle__icon svg {
  width: 24px; height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.lifecycle__title {
  font-size: clamp(18px, 1.4vw, 21px);
  font-weight: 900;
  letter-spacing: -0.018em;
  color: var(--ink);
  margin-top: 6px;
}
.lifecycle__body {
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--ink-2);
  max-width: 30ch;
}

.lifecycle__foot {
  margin-top: clamp(24px, 3vw, 40px);
}

@media (max-width: 900px) {
  /* 2×2 grid; connector still horizontal but now spans only the
     top row of icons, so we shorten it. Easier: hide the global
     connector and let each step stand on its own. */
  .lifecycle {
    grid-template-columns: repeat(2, 1fr);
    gap: clamp(28px, 4vw, 40px);
  }
  .lifecycle::before { display: none; }
}

@media (max-width: 560px) {
  .lifecycle { grid-template-columns: 1fr; }
}

/* ---------- Lifestyle gallery (4-up image strip directly under hero) ---------- */
.lifestyle {
  background: var(--surface-1);
  padding-block: clamp(40px, 5vw, 72px);
}
.lifestyle__head {
  display: flex; align-items: end; justify-content: space-between;
  gap: var(--s-5);
  margin-bottom: var(--s-6);
  flex-wrap: wrap;
}
.lifestyle__head h2 {
  font-weight: 800;
  font-size: clamp(22px, 2vw, 28px);
  letter-spacing: -0.022em;
  color: var(--ink);
  margin: 4px 0 0;
}
.lifestyle__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(12px, 1.6vw, 20px);
}
@media (max-width: 960px) { .lifestyle__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .lifestyle__grid { grid-template-columns: 1fr; } }

.lifestyle__item {
  margin: 0;
  position: relative;
  border-radius: var(--r-xl);
  overflow: hidden;
  background: var(--brand-sand);
  aspect-ratio: 4 / 5;
  isolation: isolate;
  box-shadow: var(--shadow-soft);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.lifestyle__item:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-card);
}
.lifestyle__item img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--dur-slow) var(--ease);
}
.lifestyle__item:hover img { transform: scale(1.04); }
.lifestyle__item figcaption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 18px 20px;
  display: grid; gap: 4px;
  color: var(--ink-inv);
  background: linear-gradient(180deg, rgba(26,28,26,0) 0%, rgba(26,28,26,0.55) 60%, rgba(26,28,26,0.78) 100%);
}
.lifestyle__tag {
  font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
  font-weight: 500; opacity: 0.92;
}
.lifestyle__title {
  font-weight: 800; font-size: 17px;
  letter-spacing: -0.012em; line-height: 1.22;
}

/* ---------- Scenic band (full-bleed video, mid-page moment) ---------- */
.scenic {
  position: relative;
  height: clamp(320px, 48vh, 520px);
  overflow: hidden;
  isolation: isolate;
  background: var(--surface-dark);
  color: var(--ink-inv);
  display: flex; align-items: center;
}
.scenic__video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: 0;
}
.scenic__overlay {
  position: absolute; inset: 0;
  z-index: 1;
  background:
    /* Sage tonal unifier — keeps every scenic band feeling part of the
       same brand world even when the underlying clip varies. */
    linear-gradient(180deg,
      rgba(85, 111, 69, 0.05) 0%,
      rgba(85, 111, 69, 0.07) 100%),
    /* Left-side readability scrim for the copy column */
    linear-gradient(90deg,  rgba(18,24,16,0.62) 0%, rgba(18,24,16,0.36) 40%, rgba(18,24,16,0.14) 80%),
    /* Vertical bookends so top/bottom don't bleach out */
    linear-gradient(180deg, rgba(18,24,16,0.30) 0%, rgba(18,24,16,0.06) 40%, rgba(18,24,16,0.44) 100%);
}
.scenic__copy {
  position: relative; z-index: 2;
  display: grid; gap: var(--s-4);
  max-width: 720px;
}
.scenic__copy h2 {
  font-weight: 800;
  font-size: clamp(28px, 4vw, 56px);
  line-height: 1.03;
  letter-spacing: -0.028em;
  color: var(--ink-inv);
  margin: 0;
}
.scenic__copy h2 em {
  font-style: italic;
  color: #FAFAF8;
  opacity: 0.92;
}
.scenic__copy p {
  font-size: clamp(15px, 1.2vw, 18px);
  color: rgba(250,250,248,0.85);
  max-width: 50ch;
  font-weight: 400;
  margin: 0;
}

/* ---------- About-page hero split (image right) ---------- */
.about-hero__split {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
}
@media (max-width: 960px) { .about-hero__split { grid-template-columns: 1fr; } }
.about-hero__visual {
  position: relative;
  border-radius: var(--r-2xl);
  overflow: hidden;
  aspect-ratio: 4 / 5;
  max-height: 640px;
  background: var(--brand-sand);
  box-shadow: var(--shadow-soft);
}
.about-hero__visual img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}

/* ---------- Generic split-hero (copy left, editorial image right) ----------
   Reusable header pattern for non-video pages (Pricing, How it works…).
   Proportions deliberately favour the visual column — a polished editorial
   image carries more weight than the copy block, mirroring how function-
   style health brands frame their explanatory pages. The image rides in
   its own card with a sage-cream wash + dark fade so any photograph or
   illustration anchors to the BioSense palette instead of fighting the
   page. Copy column carries a max-width so the headline still wraps. */
.hero-split {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: clamp(28px, 5vw, 80px);
  align-items: center;
}
.hero-split__copy { max-width: 60ch; }
/* Hero headlines lean on the long side ("The five pieces that make your body
   legible to you.") — at display-xxl in a partial-width column they wrap into
   5+ tight lines. Scale the headline down inside hero-split contexts so it
   reliably sets in 2 lines (which is the editorial intent here). */
.hero-split__copy .display-xxl {
  font-size: clamp(32px, 3.6vw, 52px);
  line-height: 1.08;
  letter-spacing: -0.018em;
}
.hero-split__visual {
  position: relative;
  margin: 0;
  width: 100%;
  max-width: 520px;
  justify-self: end;
  border-radius: var(--r-2xl);
  overflow: hidden;
  aspect-ratio: 5 / 6;
  max-height: 620px;
  background: var(--brand-sand);
  border: 1px solid var(--glass-bd);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.6) inset,
    0 24px 40px -22px rgba(111,142,90,0.34),
    0 36px 70px -30px rgba(20,30,18,0.24);
}
.hero-split__visual img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
/* Variant: dark high-tech imagery (DNA renders, molecular structures).
   Background falls back to a deep night-blue before the image loads so the
   card never flashes cream. A faint sage halo through the centre warms
   the cool blue toward our palette without dulling the glow. */
.hero-split__visual.is-tech {
  background: #0B1525;
}
.hero-split__visual.is-tech::after {
  background:
    radial-gradient(70% 60% at 50% 45%, rgba(149,183,126,0.14), rgba(149,183,126,0) 75%),
    linear-gradient(180deg, rgba(11,21,37,0) 0%, rgba(11,21,37,0.28) 100%);
}
/* Legacy: aged-paper variant for line-art / anatomical drawings.
   Kept in the system in case we revive vintage-illustration imagery. */
.hero-split__visual.is-illustration {
  background:
    radial-gradient(140% 90% at 20% 20%, rgba(255,255,255,0.85), rgba(255,255,255,0) 60%),
    linear-gradient(160deg, #F5F2E8 0%, #EFEEDD 100%);
}
.hero-split__visual.is-illustration img {
  object-fit: contain;
  padding: clamp(18px, 3vw, 32px);
  filter: sepia(0.06) contrast(1.04);
}
/* Sage-cream wash unifies any photo with the palette; the darker
   bottom fade gives the card editorial weight. */
.hero-split__visual::after {
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg,
      rgba(149,183,126,0.08) 0%,
      rgba(149,183,126,0.00) 35%,
      rgba(20,30,18,0.00)    55%,
      rgba(20,30,18,0.22)   100%);
  pointer-events: none;
}
.hero-split__visual.is-illustration::after {
  background:
    linear-gradient(180deg,
      rgba(111,142,90,0.04) 0%,
      rgba(111,142,90,0.00) 50%,
      rgba(85,111,69,0.10) 100%);
}
/* Tiny eyebrow chip on top of the image — quietly labels the photograph
   so it feels intentional, not stock. Pages can override the label text. */
.hero-split__caption {
  position: absolute;
  left: 14px; top: 14px;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 10px;
  font-size: 11px; font-weight: 500; letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(250,250,248,0.92);
  background: rgba(20,30,18,0.42);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 999px;
  z-index: 2;
}
.hero-split__caption::before {
  content: "";
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--brand-sage);
  box-shadow: 0 0 0 3px rgba(149,183,126,0.25);
}
/* Sage caption variant for illustration cards (dark chip would fight
   the aged-paper feel). */
.hero-split__caption--sage {
  color: var(--brand-sage-deep);
  background: rgba(255,255,255,0.78);
  border-color: rgba(85,111,69,0.18);
  backdrop-filter: blur(8px);
}
/* Floating sage stat overlay — a designed callout that turns the image
   from "stock photo" into "engineered composition". Sits bottom-right by
   default. Function-Health-style numeric headline + tiny label. */
.hero-split__stat {
  position: absolute;
  right: clamp(16px, 2.2vw, 28px);
  bottom: clamp(16px, 2.2vw, 28px);
  display: flex; flex-direction: column;
  gap: 2px;
  padding: 14px 18px 16px;
  background: rgba(20,30,18,0.62);
  backdrop-filter: blur(14px) saturate(1.05);
  -webkit-backdrop-filter: blur(14px) saturate(1.05);
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: var(--r-md);
  color: var(--ink-inv);
  box-shadow: 0 18px 30px -18px rgba(20,30,18,0.45);
  z-index: 2;
  min-width: 180px;
}
.hero-split__stat-num {
  font-size: clamp(28px, 3vw, 40px);
  line-height: 1.0;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.hero-split__stat-num em {
  font-style: italic;
  color: var(--brand-sage-soft);
}
.hero-split__stat-label {
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(250,250,248,0.7);
  margin-top: 4px;
}
/* Light variant for use on aged-paper illustration cards. */
.hero-split__stat--light {
  background: rgba(245,247,236,0.86);
  border-color: rgba(85,111,69,0.18);
  color: var(--brand-night);
  box-shadow: 0 18px 30px -18px rgba(85,111,69,0.30);
}
.hero-split__stat--light .hero-split__stat-num em { color: var(--brand-sage); }
.hero-split__stat--light .hero-split__stat-label { color: var(--ink-3); }
/* Stack early — at narrower viewports the copy column gets too cramped for
   even the scaled-down headline. Below 1024px the layout collapses to a single
   column: headline first, image card below. */
@media (max-width: 1024px) {
  .hero-split { grid-template-columns: 1fr; gap: clamp(20px, 4vw, 36px); }
  .hero-split__visual { aspect-ratio: 5 / 4; max-height: 420px; max-width: 100%; justify-self: stretch; }
  .hero-split__stat { right: 12px; bottom: 12px; padding: 10px 14px 12px; min-width: 140px; }
}

/* ---------- Full-bleed banner (image band with overlaid copy) ----------
   The site's "rest beat" between cream sections. Bleeds to the viewport
   edges (negative-margin pattern) so it feels expansive, then drops back
   into the container for the next section. Image carries a sage tint
   wash so the brand always reads through, regardless of the photograph.
   Variants:
     - .banner--tall    : 64vh on desktop (header-like statement moment)
     - .banner--short   : 38vh on desktop (mid-page transition)
     - .banner--paper   : aged-paper background for line-art illustrations
                          (no dark overlay; copy sits inside a sage card)
*/
.banner {
  position: relative;
  width: 100%;
  overflow: hidden;
  background: var(--brand-night);
  isolation: isolate;
}
.banner--tall  { min-height: clamp(420px, 58vh, 640px); }
.banner--short { min-height: clamp(280px, 38vh, 440px); }
.banner__media,
.banner__media img,
.banner__media video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  z-index: 0;
}
/* Light filter only — the lifestyle photos we choose are already warm
   (golden hour / amber light), so we just nudge contrast and gently
   desaturate so the image sits behind copy without fighting it. */
.banner__media img {
  filter: saturate(0.92) brightness(0.92) contrast(1.04);
}
.banner__overlay {
  position: absolute; inset: 0;
  z-index: 1;
  background:
    /* Soft sage halo top-right — a quiet brand signature on the image */
    radial-gradient(60% 50% at 78% 28%, rgba(149,183,126,0.18), rgba(149,183,126,0) 70%),
    /* Strong vertical scrim for text legibility — darker at bottom */
    linear-gradient(180deg, rgba(20,30,18,0.25) 0%, rgba(20,30,18,0.72) 100%);
}
.banner__copy {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--page-max);
  margin-inline: auto;
  padding: clamp(48px, 7vw, 96px) var(--page-pad);
  color: var(--ink-inv);
  display: grid;
  gap: 14px;
  align-content: end;
  min-height: inherit;
}
.banner__copy h2 {
  max-width: 22ch;
  margin: 0;
  text-shadow: 0 2px 18px rgba(0,0,0,0.35);
}
.banner__copy p {
  max-width: 60ch;
  color: rgba(250,250,248,0.92);
  margin: 0;
  text-shadow: 0 1px 10px rgba(0,0,0,0.30);
}
/* Banner eyebrow uses cream text so it reads at a glance across any
   image-noise (sage-soft would otherwise drown in textured photography);
   the sage signal lives in the dot before the label. */
.banner__copy .eyebrow {
  color: var(--ink-inv);
  opacity: 0.95;
}
.banner__copy .eyebrow::before { background: var(--brand-sage-soft); }
.banner__cta { margin-top: 8px; }

/* Paper variant — line-art illustration on aged paper. Used for the
   anatomical drawing moment; the page's normal sage palette returns.
   Illustration anchors to the right side of the banner so the copy
   card on the left has room to breathe (classic magazine layout). */
.banner--paper {
  background:
    radial-gradient(120% 80% at 80% 30%, rgba(255,255,255,0.85), rgba(255,255,255,0) 60%),
    linear-gradient(160deg, #F5F2E8 0%, #EAE7D8 100%);
}
.banner--paper .banner__media {
  left: auto;
  right: 0;
  width: min(58%, 760px);
}
.banner--paper .banner__media img {
  object-fit: contain;
  object-position: right center;
  padding: clamp(20px, 3vw, 48px);
  filter: sepia(0.06) contrast(1.06);
  mix-blend-mode: multiply;
  opacity: 0.82;
}
.banner--paper .banner__overlay { display: none; }
.banner--paper .banner__copy {
  color: var(--brand-night);
  align-content: center;
  padding-block: clamp(56px, 8vw, 110px);
}
.banner--paper .banner__copy p { color: var(--ink-2); }
.banner--paper .banner__copy .eyebrow { color: var(--brand-sage-deep); }
.banner--paper .banner__inner {
  background: rgba(245,247,236,0.82);
  border: 1px solid rgba(85,111,69,0.18);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: var(--r-2xl);
  padding: clamp(26px, 3vw, 44px) clamp(28px, 4vw, 52px);
  box-shadow: 0 18px 36px -22px rgba(85,111,69,0.30);
  max-width: 560px;
  justify-self: start;
}
@media (max-width: 960px) {
  .banner--paper .banner__media { width: 100%; right: 0; }
  .banner--paper .banner__media img { object-position: center; opacity: 0.45; }
  .banner--paper .banner__inner { max-width: 100%; }
}
@media (max-width: 720px) {
  .banner--paper .banner__inner { padding: 22px 24px; }
}

/* ---------- Feature row (4 columns: Sleep / Recover / Perform / Live longer) ---------- */
.feature-row {
  background: var(--surface);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.feature-row__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
}
@media (max-width: 960px) { .feature-row__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .feature-row__grid { grid-template-columns: 1fr; } }

.feature {
  padding: var(--s-6) var(--s-5);
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 14px;
  align-items: start;
  border-right: 1px solid var(--line);
}
.feature:last-child { border-right: 0; }
@media (max-width: 960px) {
  .feature:nth-child(2n)   { border-right: 0; }
  .feature:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
}
@media (max-width: 560px) {
  .feature { border-right: 0; }
  .feature:not(:last-child) { border-bottom: 1px solid var(--line); }
}
.feature__icon {
  width: 32px; height: 32px;
  color: var(--brand-sage-deep);
  display: inline-flex; align-items: center; justify-content: center;
}
.feature__icon svg { width: 100%; height: 100%; }
.feature__title {
  font-weight: 900; font-size: 17px; line-height: 1.2;
  letter-spacing: -0.014em;
  color: var(--ink);
  margin: 0 0 4px;
}
.feature__body {
  font-size: 14px; line-height: 1.5;
  color: var(--ink-3); font-weight: 400;
}
/* Tiny "trend" sparkline that sits under each feature-row card body.
   Decorative — adds a data-language motif so the row reads less like a
   plain icon list and more like a quick glance at progress over time. */
.feature__spark {
  display: block;
  width: 84px;
  height: 14px;
  margin-top: 12px;
  color: var(--brand-sage);
  opacity: 0.9;
  overflow: visible;
}

/* ---------- Insights split (copy left + phone+dashboard right) ---------- */
.insight-split {
  display: grid;
  /* Lightly rebalanced — slightly more space for the copy column (0.45 →
     0.5) so the insight-callout has room to breathe alongside the body
     copy, and a touch more gap between copy and the visual stack. */
  grid-template-columns: minmax(340px, 0.5fr) minmax(0, 1.5fr);
  gap: clamp(36px, 5vw, 72px);
  align-items: center;
}
@media (max-width: 1080px) {
  .insight-split { grid-template-columns: minmax(300px, 0.55fr) minmax(0, 1.45fr); }
}
@media (max-width: 960px) { .insight-split { grid-template-columns: 1fr; } }

/* ---- Right-hand visual: phone + dashboard side-by-side ---- */
.insight-visual {
  position: relative;
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  /* More gap between the phone-mock and dashboard-mock so the two
     reads as two clearly separated surfaces rather than one busy
     panel. */
  gap: clamp(28px, 3.6vw, 48px);
  align-items: center;
}
@media (max-width: 1180px) {
  .insight-visual { grid-template-columns: 232px minmax(0, 1fr); gap: 22px; }
}
@media (max-width: 760px) {
  .insight-visual {
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 0;
  }
  .insight-visual .phone-mock { margin-bottom: -56px; z-index: 2; }
  .insight-visual .dashboard-mock { width: 100%; max-width: 560px; }
}

/* =================================================================
   INSIGHTS BOARD — single glass infographic on the right of the
   "Insights that move you forward" split. 4 metric tiles, a 30-day
   readiness trend, 2 biomarker callouts, and a footer CTA. The
   whole panel is a link through to how-it-works.html#score.
   ================================================================= */
.insights-board {
  position: relative;
  display: grid;
  gap: clamp(18px, 2.2vw, 26px);
  padding: clamp(20px, 2.6vw, 30px);
  border-radius: 22px;
  background:
    linear-gradient(155deg, rgba(255, 255, 255, 0.92) 0%, rgba(248, 250, 240, 0.78) 100%);
  backdrop-filter: blur(18px) saturate(1.1);
  -webkit-backdrop-filter: blur(18px) saturate(1.1);
  border: 1px solid rgba(111, 142, 90, 0.16);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.85),
    0 1px 2px rgba(40, 44, 36, 0.04),
    0 28px 60px -28px rgba(40, 44, 36, 0.22),
    0 18px 36px -22px rgba(149, 183, 126, 0.28);
  text-decoration: none;
  color: var(--ink);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
  isolation: isolate;
}
.insights-board::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 22px;
  background:
    radial-gradient(60% 50% at 92% 4%, rgba(168, 189, 149, 0.22), transparent 70%),
    radial-gradient(50% 40% at 4% 96%, rgba(149, 183, 126, 0.16), transparent 70%);
  pointer-events: none;
  z-index: -1;
}
.insights-board:hover {
  transform: translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 1px 2px rgba(40, 44, 36, 0.05),
    0 32px 70px -28px rgba(40, 44, 36, 0.28),
    0 22px 42px -22px rgba(149, 183, 126, 0.36);
}

/* ---- Header strip: live label + readiness chip ---- */
.insights-board__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.insights-board__head-lbl {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-2, #5a6053);
}
.insights-board__pulse {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--brand-sage, #6F8E5A);
  box-shadow: 0 0 0 0 rgba(111, 142, 90, 0.55);
  animation: recovery-pulse 2.4s var(--ease) 1s infinite;
}
.insights-board__head-score {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  padding: 6px 12px 6px 14px;
  border-radius: 999px;
  background: rgba(168, 189, 149, 0.18);
  border: 1px solid rgba(111, 142, 90, 0.22);
}
.insights-board__head-num {
  font-weight: 800;
  font-size: 22px;
  color: var(--brand-sage, #6F8E5A);
  letter-spacing: -0.01em;
}
.insights-board__head-state {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-2, #5a6053);
}

/* ---- 4 metric tiles ---- */
.insights-board__tiles {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
.insights-board__tile {
  position: relative;
  display: grid;
  gap: 6px;
  padding: 14px 14px 12px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid rgba(40, 44, 36, 0.06);
  color: var(--brand-sage, #6F8E5A);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.7),
    0 1px 2px rgba(40, 44, 36, 0.03);
}
.insights-board__tile-lbl {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-2, #5a6053);
}
.insights-board__tile-val {
  font-weight: 800;
  font-size: clamp(20px, 1.8vw, 24px);
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.insights-board__tile-val em {
  font-style: normal;
  font-weight: 500;
  font-size: 0.62em;
  color: var(--ink-2, #5a6053);
  margin-left: 2px;
}
.insights-board__tile-spark {
  width: 100%;
  height: 22px;
  margin-top: 2px;
}
.insights-board__tile-state {
  display: inline-block;
  align-self: start;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  background: rgba(168, 189, 149, 0.22);
  color: var(--brand-sage-dark, #4f6a3f);
}
.insights-board__tile-state--soft {
  background: rgba(40, 44, 36, 0.06);
  color: var(--ink-2, #5a6053);
}

/* ---- 30-day readiness trend ---- */
.insights-board__trend {
  display: grid;
  gap: 10px;
  padding: 16px 18px 14px;
  border-radius: 14px;
  background:
    linear-gradient(180deg, rgba(168, 189, 149, 0.10) 0%, rgba(255, 255, 255, 0.5) 100%);
  border: 1px solid rgba(40, 44, 36, 0.06);
}
.insights-board__trend-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.insights-board__trend-lbl {
  display: block;
  font-weight: 700;
  font-size: 14px;
  color: var(--ink);
  letter-spacing: -0.005em;
}
.insights-board__trend-sub {
  display: block;
  font-size: 12px;
  color: var(--ink-2, #5a6053);
  margin-top: 2px;
}
.insights-board__trend-legend {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-2, #5a6053);
}
.insights-board__trend-legend span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.insights-board__legend-dot {
  width: 10px; height: 2px;
  border-radius: 2px;
  background: var(--brand-sage, #6F8E5A);
}
.insights-board__legend-dot--main { height: 3px; }
.insights-board__legend-dot--base {
  background: linear-gradient(to right, rgba(40,44,36,0.5) 60%, transparent 60%);
  background-size: 4px 2px;
  background-color: transparent;
  background-image: linear-gradient(to right, rgba(40,44,36,0.4) 50%, transparent 0%);
}
.insights-board__trend-chart {
  width: 100%;
  height: clamp(110px, 14vw, 150px);
  display: block;
}
.insights-board__trend-axis {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: var(--ink-2, #5a6053);
  letter-spacing: 0.04em;
}

/* ---- 2 biomarker callouts ---- */
.insights-board__bios {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.insights-board__bio {
  display: grid;
  gap: 4px;
  padding: 14px 16px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(40, 44, 36, 0.06);
}
.insights-board__bio-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.insights-board__bio-name {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-2, #5a6053);
}
.insights-board__bio-arrow {
  display: inline-grid;
  place-items: center;
  width: 22px; height: 22px;
  border-radius: 50%;
  font-size: 14px;
  font-weight: 800;
  line-height: 1;
}
.insights-board__bio--up .insights-board__bio-arrow {
  background: rgba(168, 189, 149, 0.28);
  color: var(--brand-sage-dark, #4f6a3f);
}
.insights-board__bio--steady .insights-board__bio-arrow {
  background: rgba(40, 44, 36, 0.08);
  color: var(--ink-2, #5a6053);
}
.insights-board__bio-val {
  font-weight: 800;
  font-size: 20px;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.insights-board__bio-val em {
  font-style: normal;
  font-weight: 500;
  font-size: 0.62em;
  color: var(--ink-2, #5a6053);
  margin-left: 2px;
}
.insights-board__bio-sub {
  font-size: 12px;
  color: var(--ink-2, #5a6053);
  line-height: 1.4;
}

.insights-board__foot {
  display: inline-flex;
  align-items: center;
  justify-self: end;
  gap: 8px;
  padding-top: 4px;
  font-size: 13px;
  font-weight: 600;
  color: var(--brand-sage, #6F8E5A);
  letter-spacing: 0.01em;
}
.insights-board:hover .insights-board__foot .arr {
  transform: translateX(3px);
}
.insights-board__foot .arr {
  transition: transform var(--dur) var(--ease);
}

/* Responsive collapse */
@media (max-width: 720px) {
  .insights-board__tiles { grid-template-columns: repeat(2, 1fr); }
  .insights-board__bios  { grid-template-columns: 1fr; }
  .insights-board__head  { flex-wrap: wrap; }
}

/* =================================================================
   PHONE MOCK — realistic iPhone-style device
   Layered: outer body → side buttons → screen → notch + status bar.
   ================================================================= */
.phone-mock {
  position: relative;
  width: 260px;
  aspect-ratio: 9 / 19.2;
  /* Device body: subtle 3-stop gradient gives the metal-edge feel */
  background:
    linear-gradient(140deg, #1f2220 0%, #0c0e0d 38%, #161917 70%, #0c0e0d 100%);
  border-radius: 44px;
  padding: 6px;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.05) inset,
    0 1px 0 rgba(255, 255, 255, 0.07) inset,
    0 26px 60px -22px rgba(15, 17, 16, 0.50),
    0 8px 18px -8px rgba(15, 17, 16, 0.25);
}
/* Subtle inner bezel ring between the metal body and the screen */
.phone-mock::before {
  content: "";
  position: absolute;
  inset: 4px;
  border-radius: 40px;
  background: #050606;
  z-index: 0;
  pointer-events: none;
}

/* Side buttons (visible nubs against the body) */
.phone-mock__btn {
  position: absolute;
  background: linear-gradient(90deg, #0a0b0a 0%, #1d1f1d 50%, #0a0b0a 100%);
  border-radius: 1.5px;
  z-index: 0;
}
.phone-mock__btn--mute {
  left: -1.5px;
  top: 84px;
  width: 3px;
  height: 22px;
}
.phone-mock__btn--volume-up {
  left: -1.5px;
  top: 118px;
  width: 3px;
  height: 36px;
}
.phone-mock__btn--volume-down {
  left: -1.5px;
  top: 162px;
  width: 3px;
  height: 36px;
}
.phone-mock__btn--power {
  right: -1.5px;
  top: 130px;
  width: 3px;
  height: 60px;
}

/* Inner screen — sits inside the bezel */
.phone-mock__screen {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 38px;
  overflow: hidden;
  background:
    radial-gradient(120% 80% at 50% 0%, #1d201c 0%, #15181a 55%, #0d100f 100%);
  color: #FAFAF8;
  padding: 42px 18px 26px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  z-index: 1;
}

/* Dynamic-island-style notch */
.phone-mock__notch {
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  width: 92px;
  height: 24px;
  background: #000;
  border-radius: 999px;
  z-index: 3;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.6);
}

/* Status bar (time + signal/wifi/battery) */
.phone-mock__statusbar {
  position: absolute;
  top: 12px;
  left: 18px;
  right: 18px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 11px;
  font-weight: 600;
  color: #FAFAF8;
  letter-spacing: 0.01em;
  z-index: 2;
  pointer-events: none;
}
.phone-mock__time { font-variant-numeric: tabular-nums; }
.phone-mock__sigs {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: rgba(250, 250, 248, 0.92);
}

.phone-mock__date {
  font-size: 10px; opacity: 0.55;
  text-align: center;
  letter-spacing: 0.18em; text-transform: uppercase;
  margin-top: 6px;
  font-weight: 600;
}
.phone-mock__ring-wrap {
  display: flex; justify-content: center; padding: 10px 0 6px;
}
.phone-mock__ring-wrap .ring-progress { width: 140px; height: 140px; }
.phone-mock__ring-wrap .ring-progress__track { stroke: rgba(168,189,149,0.16); }
.phone-mock__ring-wrap .ring-progress__fill  { stroke: var(--brand-sage-grad-1); }
.phone-mock__ring-wrap .ring-progress__num,
.phone-mock__ring-wrap .ring-progress__lbl { color: #FAFAF8; }
.phone-mock__ring-wrap .ring-progress__num {
  font-size: 38px; font-weight: 700; letter-spacing: -0.02em;
}
.phone-mock__ring-wrap .ring-progress__lbl {
  color: rgba(250, 250, 248, 0.6);
  font-size: 9.5px;
  letter-spacing: 0.16em;
}
.phone-mock__cta {
  text-align: center;
  font-size: 12.5px; font-weight: 500;
  color: rgba(250, 250, 248, 0.85);
  margin-top: 0;
}
.phone-mock__rows {
  display: grid; gap: 6px;
  font-size: 11.5px;
  margin-top: auto;
}
.phone-mock__row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 12px;
  background: rgba(250, 250, 248, 0.07);
  border: 1px solid rgba(250, 250, 248, 0.05);
  border-radius: 12px;
  color: rgba(250, 250, 248, 0.85);
  font-weight: 500;
}
.phone-mock__row-lbl {
  display: inline-flex; align-items: center; gap: 8px;
}
.phone-mock__row-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--brand-sage-grad-1);
  box-shadow: 0 0 0 2.5px rgba(149, 183, 126, 0.18);
  flex-shrink: 0;
}
.phone-mock__row-state {
  color: var(--brand-sage-grad-1);
  font-weight: 600;
}

/* Home indicator bar (modern iOS) */
.phone-mock__home {
  position: absolute;
  bottom: 7px;
  left: 50%;
  transform: translateX(-50%);
  width: 38%;
  height: 4px;
  border-radius: 2px;
  background: rgba(250, 250, 248, 0.55);
  z-index: 3;
}

/* =================================================================
   DASHBOARD MOCK — browser-style window
   Sidebar + main, vertical-stack tiles, milestoned readiness, recs row.
   ================================================================= */
.dashboard-mock {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  padding: 16px;
  box-shadow: var(--shadow-card);
  overflow: hidden;
  min-width: 0;
}
.dashboard-mock__chrome {
  display: flex; align-items: center; gap: 6px;
  padding: 2px 2px 12px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 14px;
}
.dashboard-mock__chrome span {
  width: 8px; height: 8px; border-radius: 50%;
  background: rgba(26, 28, 26, 0.10);
}
.dashboard-mock__layout {
  display: grid;
  grid-template-columns: 132px minmax(0, 1fr);
  gap: 14px;
}
@media (max-width: 1180px) {
  .dashboard-mock__layout { grid-template-columns: 116px minmax(0, 1fr); gap: 10px; }
}
@media (max-width: 820px) {
  .dashboard-mock__layout { grid-template-columns: minmax(0, 1fr); }
  .dashboard-mock__side { display: none; }
}

/* Sidebar */
.dashboard-mock__side {
  background: var(--surface-1);
  border-radius: var(--r-md);
  padding: 10px 8px;
  display: flex; flex-direction: column;
  gap: 1px;
}
.dashboard-mock__brand {
  display: flex; align-items: center; gap: 6px;
  padding: 4px 8px 10px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--line);
  font-size: 11.5px; font-weight: 700;
  color: var(--ink); letter-spacing: -0.005em;
}
.dashboard-mock__brand svg { flex-shrink: 0; }
.dashboard-mock__side .item {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 8px;
  border-radius: var(--r-sm);
  color: var(--ink-3);
  font-size: 11.5px;
  font-weight: 500;
  white-space: nowrap;
}
.dashboard-mock__side .item svg {
  width: 13px; height: 13px;
  flex-shrink: 0;
  opacity: 0.7;
}
.dashboard-mock__side .item.is-active {
  background: var(--brand-sage-tint);
  color: var(--brand-sage-deep);
  font-weight: 600;
}
.dashboard-mock__side .item.is-active svg { opacity: 1; }

/* Main */
.dashboard-mock__main { min-width: 0; }
.dashboard-mock__main-head {
  display: flex; align-items: center; justify-content: space-between;
  margin: 0 0 12px;
  gap: 12px;
}
.dashboard-mock__main-head h4 {
  margin: 0;
  font-size: 13.5px; font-weight: 700; color: var(--ink);
  letter-spacing: -0.005em;
}
.dashboard-mock__avatar {
  width: 22px; height: 22px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 30%, #E2D7C3 0%, #C7B89D 55%, #8C7A5E 100%);
  border: 1.5px solid var(--surface);
  box-shadow: 0 0 0 1px var(--line);
  flex-shrink: 0;
  position: relative;
}
.dashboard-mock__avatar::after {
  content: "";
  position: absolute;
  inset: 50% 18% 0 18%;
  border-top-left-radius: 50%;
  border-top-right-radius: 50%;
  background: rgba(140, 122, 94, 0.55);
}

/* Tiles — true vertical stack, no inline state pill */
.dashboard-mock__tiles {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}
@media (max-width: 980px) {
  .dashboard-mock__tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.dashboard-mock__tile {
  background: var(--surface-1);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 11px 12px 10px;
  display: flex; flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.dashboard-mock__tile-lbl {
  font-size: 10px; color: var(--ink-3); font-weight: 500;
  letter-spacing: 0.10em; text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dashboard-mock__tile-val {
  font-weight: 700; font-size: 17px;
  color: var(--ink); letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  line-height: 1.15;
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dashboard-mock__tile-state {
  font-size: 10.5px;
  color: var(--brand-sage-deep);
  font-weight: 600;
  letter-spacing: 0.01em;
  margin-top: 2px;
}
.dashboard-mock__chart {
  margin-top: auto;
  padding-top: 8px;
  height: 26px;
  position: relative;
}
.dashboard-mock__chart svg { width: 100%; height: 100%; display: block; }

/* Readiness with milestones */
.dashboard-mock__readiness {
  margin-top: 12px;
  padding: 12px 14px 14px;
  background: var(--surface-1);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 16px;
  align-items: center;
}
.dashboard-mock__readiness-main { min-width: 0; }
.dashboard-mock__readiness-lbl {
  font-size: 12px; color: var(--ink-2); font-weight: 600;
  letter-spacing: -0.005em;
}
.dashboard-mock__readiness-bar {
  margin-top: 8px;
  height: 5px; border-radius: 5px;
  background: var(--brand-sage-tint);
  position: relative;
  overflow: hidden;
}
.dashboard-mock__readiness-bar::after {
  content: "";
  position: absolute; inset: 0 var(--gap, 16%) 0 0;
  background: linear-gradient(90deg, var(--brand-sage-grad-1), var(--brand-sage));
  border-radius: 5px;
}
.dashboard-mock__readiness-marks {
  display: flex; justify-content: space-between;
  margin-top: 5px;
  font-size: 9.5px;
  color: var(--ink-3);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.dashboard-mock__readiness-side {
  text-align: right;
  flex-shrink: 0;
}
.dashboard-mock__readiness-val {
  font-weight: 700; font-size: 22px; color: var(--ink);
  font-variant-numeric: tabular-nums;
  line-height: 1;
  letter-spacing: -0.02em;
}
.dashboard-mock__readiness-state {
  font-size: 9.5px;
  color: var(--brand-sage-deep);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-top: 4px;
}

/* Recommendations row */
.dashboard-mock__recs {
  margin-top: 10px;
  padding: 10px 14px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px;
}
.dashboard-mock__recs-lbl {
  font-size: 12px; color: var(--ink-2); font-weight: 600;
  letter-spacing: -0.005em;
}
.dashboard-mock__recs-link {
  font-size: 11px; color: var(--brand-sage-deep);
  font-weight: 600;
  white-space: nowrap;
}

/* ---------- Sage stat band (100K+ users / Science-backed / etc) ---------- */
.stat-band {
  background: var(--brand-sage);
  color: var(--ink-inv);
}
.stat-band__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
}
@media (max-width: 920px) { .stat-band__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .stat-band__grid { grid-template-columns: 1fr; } }
.stat-band__cell {
  padding: 22px 24px;
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: 14px;
  align-items: center;
  border-right: 1px solid rgba(250,250,248,0.18);
}
.stat-band__cell:last-child { border-right: 0; }
@media (max-width: 920px) {
  .stat-band__cell:nth-child(2n) { border-right: 0; }
  .stat-band__cell:nth-child(-n+2) { border-bottom: 1px solid rgba(250,250,248,0.18); }
}
@media (max-width: 520px) {
  .stat-band__cell { border-right: 0; }
  .stat-band__cell:not(:last-child) { border-bottom: 1px solid rgba(250,250,248,0.18); }
}
.stat-band__icon { color: var(--ink-inv); }
.stat-band__icon svg { width: 22px; height: 22px; }
.stat-band__lbl {
  font-size: 13px; line-height: 1.35;
  font-weight: 500;
}
.stat-band__lbl b { font-weight: 700; display: block; }

/* ---------- Stat strip (legacy 4-up numeric) ---------- */
.stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
@media (max-width: 860px) { .stats { grid-template-columns: repeat(2, 1fr); } }
.stat {
  padding: var(--s-6) var(--s-5);
  border-right: 1px solid var(--line);
  position: relative;
}
.stat:last-child { border-right: 0; }
@media (max-width: 860px) {
  .stat:nth-child(2) { border-right: 0; }
  .stat:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
}
.stat__num {
  font-weight: 700;
  font-size: clamp(32px, 3vw, 44px);
  letter-spacing: -0.02em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
.stat__lbl {
  margin-top: 10px;
  font-size: 12.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 500;
}
.stats--on-sage .stat { border-color: rgba(250,250,248,0.18); }
.stats--on-sage .stat__num { color: var(--ink-inv); }
.stats--on-sage .stat__lbl { color: var(--ink-inv-2); }

/* ---------- Cards / 4-up feature grid ---------- */
.features {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s-4);
}
@media (max-width: 1060px) { .features { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .features { grid-template-columns: 1fr; } }

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--s-6);
  display: flex; flex-direction: column; gap: var(--s-3);
  transition: border-color var(--dur) var(--ease),
              transform var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease);
}
.card:hover {
  border-color: var(--brand-sage-soft);
  transform: translateY(-2px);
  box-shadow: var(--shadow-soft);
}
.card__num {
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.14em;
  color: var(--brand-sage-deep);
  font-variant-numeric: tabular-nums;
  text-transform: uppercase;
}
.card__title {
  font-weight: 700;
  font-size: 22px;
  letter-spacing: -0.012em;
  line-height: 1.18;
}
.card__body {
  font-size: 15px; line-height: 1.6;
  color: var(--ink-2);
  font-weight: 400;
}
.card__mark {
  width: 36px; height: 36px;
  border-radius: var(--r-sm);
  background: var(--brand-sage-tint);
  color: var(--brand-sage-deep);
  display: inline-flex; align-items: center; justify-content: center;
  margin-bottom: var(--s-2);
}
.card__mark svg { width: 18px; height: 18px; }

/* ---------- Pull quote (mood-board "Small daily decisions...") ---------- */
.pullquote {
  background: var(--brand-sage-soft);
  color: var(--ink-inv);
  border-radius: var(--r-2xl);
  padding: clamp(40px, 6vw, 80px);
  display: grid;
  gap: var(--s-4);
  position: relative;
  overflow: hidden;
}
.pullquote::before {
  content: "\201C";   /* opening curly quote */
  position: absolute;
  top: -40px; left: 32px;
  font-size: 220px; line-height: 1;
  font-weight: 700;
  color: rgba(250,250,248,0.30);
}
.pullquote__body {
  font-weight: 700;
  font-size: clamp(28px, 3.4vw, 48px);
  line-height: 1.15;
  letter-spacing: -0.018em;
  max-width: 22ch;
}
.pullquote__body em {
  font-style: italic;
  color: #FAFAF8;
}
.pullquote__attr {
  font-size: 13px; opacity: 0.85;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* ---------- Ring diagram (data sources) ---------- */
.ring-wrap {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(32px, 5vw, 80px);
  align-items: center;
}
@media (max-width: 960px) { .ring-wrap { grid-template-columns: 1fr; } }
.ring {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  max-width: 540px;
  margin-inline: auto;
}
.ring svg { width: 100%; height: 100%; }
.ring__pills {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-wrap: wrap; gap: 10px;
  margin-top: var(--s-5);
}
.ring__pills li {
  font-size: 13px; font-weight: 500;
  padding: 8px 14px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  color: var(--ink-2);
  background: var(--surface);
}

/* ---------- Product preview (the "see it" dashboard rendering) ---------- */
.preview {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 5vw, 64px);
  align-items: center;
}
@media (max-width: 960px) { .preview { grid-template-columns: 1fr; } }
.preview__frame {
  position: relative;
  border-radius: var(--r-xl);
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink);
  padding: 24px;
  overflow: hidden;
  box-shadow: var(--shadow-card);
}
.preview__chrome {
  display: flex; gap: 6px; margin-bottom: 16px;
}
.preview__chrome span {
  width: 10px; height: 10px; border-radius: 50%;
  background: rgba(26,28,26,0.10);
}
.preview__ui {
  display: grid; gap: 14px;
  position: relative;
}
.preview__row {
  display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px;
}
.preview__tile {
  background: var(--surface-1);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 14px;
  min-height: 96px;
  display: flex; flex-direction: column; gap: 8px;
}
.preview__tile-lbl {
  font-size: 11px; letter-spacing: 0.06em;
  color: var(--ink-3); font-weight: 500;
}
.preview__tile-val {
  font-weight: 700; font-size: 22px; letter-spacing: -0.01em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.preview__tile-bar {
  height: 6px; border-radius: 6px;
  background: var(--brand-sage-tint);
  position: relative;
  overflow: hidden;
}
.preview__tile-bar::after {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0;
  width: var(--w, 60%);
  background: var(--brand-sage);
  border-radius: 6px;
}
.preview__chart {
  background: var(--surface-1);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 14px;
  height: 160px;
  position: relative;
}
.preview__chart svg {
  position: absolute; inset: 14px;
  width: calc(100% - 28px); height: calc(100% - 28px);
}

.preview__highlights { display: grid; gap: var(--s-5); }
.preview__highlight {
  display: grid; grid-template-columns: 32px 1fr; gap: 16px;
  padding-top: var(--s-4);
  border-top: 1px solid var(--line);
}
.preview__highlight:first-child { border-top: 0; padding-top: 0; }
.preview__highlight-num {
  font-variant-numeric: tabular-nums;
  font-weight: 500; font-size: 13px;
  color: var(--brand-sage-deep);
  letter-spacing: 0.12em;
}

/* ---------- Testimonials ---------- */
.quotes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-4);
}
@media (max-width: 960px) { .quotes { grid-template-columns: 1fr; } }
.quote {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--s-6);
  display: flex; flex-direction: column; gap: var(--s-5);
}
.quote__body {
  font-size: 17px; line-height: 1.6;
  font-weight: 400; color: var(--ink);
}
.quote__who {
  display: flex; align-items: center; gap: 12px;
  padding-top: var(--s-4);
  border-top: 1px solid var(--line);
}
.quote__av {
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--brand-sage);
  color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 14px;
}
.quote__name { font-weight: 500; font-size: 14px; }
.quote__role { font-size: 12.5px; color: var(--ink-3); }

/* ---------- Team ---------- */
.team {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-5);
}
@media (max-width: 960px) { .team { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .team { grid-template-columns: 1fr; } }
.member {
  display: flex; flex-direction: column; gap: var(--s-3);
}
.member__portrait {
  aspect-ratio: 4 / 5;
  border-radius: var(--r-lg);
  background: var(--brand-sand);
  border: 1px solid var(--line);
  position: relative;
  overflow: hidden;
}
.member__monogram {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 84px;
  color: var(--brand-sage);
  letter-spacing: -0.04em;
}
.member__name { font-weight: 500; font-size: 16px; }
.member__role { font-size: 13px; color: var(--ink-3); }

/* ============================================================
   PRICING
   ------------------------------------------------------------
   Two-card grid (Monthly · Annual). The Annual card is the
   "best value" and is visually elevated with a sage-tint surface,
   a thicker sage border, an inline pill badge, and a primary
   filled CTA — versus the Monthly card's white surface + ghost
   CTA. On tablet the cards stack vertically and the badge stays
   anchored to the Annual card.
   ============================================================ */
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(20px, 2.4vw, 32px);
  max-width: 920px;
  margin: clamp(32px, 4vw, 48px) auto 0;
}

.pricing-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: clamp(20px, 2vw, 28px);
  padding: clamp(28px, 3vw, 40px) clamp(24px, 2.6vw, 34px);
  /* Frosted-white glass over the cream Pricing section, with a soft
     inner top-edge highlight that catches the eye like an actual
     pane of glass would catch the light. */
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-bd);
  border-radius: var(--r-lg);
  box-shadow: var(--glass-shadow);
}

/* Elevated "Best value" treatment — sage-tinted frosted glass with
   a sage ambient shadow so it feels lit from below in the brand's
   olive light, not just "painted sage". */
.pricing-card--best {
  background: var(--glass-sage-bg);
  backdrop-filter: var(--glass-sage-blur);
  -webkit-backdrop-filter: var(--glass-sage-blur);
  border-color: var(--glass-sage-bd);
  box-shadow: var(--glass-sage-shadow);
}

.pricing-card__head {
  display: grid;
  gap: 8px;
}

/* Small floating badge on the Best Value card */
.pricing-card__badge {
  display: inline-flex;
  align-self: start;
  align-items: center;
  padding: 5px 10px;
  background: var(--brand-sage-deep);
  color: var(--ink-inv);
  border-radius: var(--r-pill);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 4px;
}

.pricing-card__period {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.18em;
  color: var(--brand-sage-deep);
  text-transform: uppercase;
}

.pricing-card__price {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-top: 2px;
}
.pricing-card__num {
  font-size: clamp(40px, 4.4vw, 56px);
  font-weight: 800;
  letter-spacing: -0.028em;
  line-height: 1;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.pricing-card__unit {
  font-size: 13.5px;
  font-weight: 500;
  color: var(--ink-2);
  letter-spacing: 0.01em;
}
.pricing-card__sub {
  font-size: 13px;
  color: var(--ink-3);
  margin: 0;
}

.pricing-card__feats {
  list-style: none;
  margin: 0; padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  border-top: 1px solid var(--line);
  padding-top: clamp(18px, 2vw, 22px);
}
.pricing-card--best .pricing-card__feats {
  border-top-color: rgba(111, 142, 90, 0.28);
}
.pricing-card__feats li {
  position: relative;
  padding-left: 24px;
  font-size: 14px;
  color: var(--ink-2);
  line-height: 1.5;
}
.pricing-card__feats li::before {
  content: "";
  position: absolute;
  left: 0; top: 6px;
  width: 14px; height: 8px;
  border-left: 1.6px solid var(--brand-sage-deep);
  border-bottom: 1.6px solid var(--brand-sage-deep);
  transform: rotate(-45deg);
  border-radius: 1px;
}

.pricing-card__cta {
  align-self: stretch;
  justify-content: center;
  margin-top: auto;
}

.pricing-card__intl {
  font-size: 12px;
  color: var(--ink-3);
  margin: 6px 0 0;
  text-align: center;
}

.pricing-foot {
  text-align: center;
  margin-top: clamp(20px, 2.5vw, 28px);
  font-size: 13.5px;
  color: var(--ink-3);
}

@media (max-width: 720px) {
  .pricing-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   HOMEPAGE PRICING TEASER
   ------------------------------------------------------------
   Compact "you can afford this, here are the options" snapshot
   that lives between Team and FAQ on the homepage. Single glass
   panel split by a thin vertical rule, with the right half (Annual)
   in sage glass to mirror the "Best value" treatment from the full
   Pricing page. On phones the divider rotates horizontal and the
   plans stack.
   ============================================================ */
.pricing-teaser {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: stretch;
  gap: 0;
  max-width: 760px;
  margin: clamp(28px, 3.6vw, 44px) auto 0;
  padding: clamp(22px, 2.6vw, 32px) clamp(20px, 2.4vw, 28px);
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-bd);
  border-radius: var(--r-lg);
  box-shadow: var(--glass-shadow);
  overflow: hidden;
  position: relative;
}

.pricing-teaser__plan {
  display: grid;
  align-content: start;
  gap: 4px;
  padding: clamp(10px, 1.4vw, 18px) clamp(14px, 2vw, 24px);
}

/* Sage-glass wash for the "Best value" half — uses the same gradient
   the full pricing card uses so the language is consistent. Bleed it
   into the panel's rounded corners with overflow:hidden on the parent. */
.pricing-teaser__plan--best {
  position: relative;
  background: var(--glass-sage-bg);
  margin: calc(-1 * clamp(22px, 2.6vw, 32px)) calc(-1 * clamp(20px, 2.4vw, 28px));
  margin-left: 0;
  padding-left: clamp(22px, 2.6vw, 32px);
  padding-right: clamp(22px, 2.6vw, 32px);
  padding-top: clamp(22px, 2.6vw, 32px);
  padding-bottom: clamp(22px, 2.6vw, 32px);
  border-left: 1px solid var(--glass-sage-bd);
}

.pricing-teaser__divider {
  width: 1px;
  background: linear-gradient(180deg,
    transparent 0%,
    rgba(40, 44, 36, 0.08) 12%,
    rgba(40, 44, 36, 0.08) 88%,
    transparent 100%);
  align-self: stretch;
}

.pricing-teaser__badge {
  display: inline-flex;
  align-self: start;
  align-items: center;
  padding: 4px 10px;
  background: var(--brand-sage-deep);
  color: var(--ink-inv);
  border-radius: var(--r-pill);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 6px;
}

.pricing-teaser__period {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.18em;
  color: var(--brand-sage-deep);
  text-transform: uppercase;
}

.pricing-teaser__price {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-top: 4px;
}
.pricing-teaser__num {
  font-size: clamp(30px, 3vw, 38px);
  font-weight: 800;
  letter-spacing: -0.028em;
  line-height: 1;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  transition: color var(--dur) var(--ease);
}
/* "Best value" annual price is the recommended choice — render it
   ~1.2× larger than the monthly side and lean it into brand sage so
   the eye lands on it first. The monthly side stays at the reduced
   base scale above so the contrast is unmistakable. */
.pricing-teaser__plan--best .pricing-teaser__num {
  font-size: clamp(38px, 4.2vw, 52px);
  color: var(--brand-sage-deep);
}
.pricing-teaser__plan--best .pricing-teaser__price {
  margin-top: 6px;
}
.pricing-teaser__unit {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--ink-2);
  letter-spacing: 0.01em;
}
.pricing-teaser__note {
  font-size: 12.5px;
  color: var(--ink-3);
  margin-top: 4px;
}

.pricing-teaser__foot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin-top: clamp(20px, 2.6vw, 28px);
}
.pricing-teaser__small {
  font-size: 12.5px;
  color: var(--ink-3);
  margin: 0;
}

@media (max-width: 640px) {
  .pricing-teaser {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
  }
  .pricing-teaser__divider {
    width: auto; height: 1px;
    background: linear-gradient(90deg,
      transparent 0%,
      rgba(40, 44, 36, 0.08) 12%,
      rgba(40, 44, 36, 0.08) 88%,
      transparent 100%);
  }
  /* Reset the negative-margin bleed used on desktop — on mobile the
     two plans stack so a clean inset is cleaner than a sage half. */
  .pricing-teaser__plan--best {
    margin: 0;
    padding: clamp(14px, 2.4vw, 18px) clamp(14px, 2vw, 24px);
    border-left: 0;
    border-top: 1px solid var(--glass-sage-bd);
    border-radius: var(--r-md);
  }
}

/* --- "What you get" 3-up promise strip on the pricing page ---
   Quiet trio — no glass here, deliberately, so the page rhythm is
   loud-card → calm-promise → loud-FAQ. Icon + title + body, light
   sage circles, no card chrome. */
.pricing-promises {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(28px, 3.6vw, 56px);
  margin-top: clamp(36px, 5vw, 56px);
}
.pricing-promise {
  display: grid;
  gap: 10px;
  text-align: left;
}
.pricing-promise__icon {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--brand-sage-tint);
  color: var(--brand-sage-deep);
  display: inline-flex; align-items: center; justify-content: center;
}
.pricing-promise__icon svg {
  width: 22px; height: 22px;
  fill: none; stroke: currentColor; stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round;
}
.pricing-promise__title {
  font-size: clamp(16px, 1.2vw, 18px);
  font-weight: 700;
  letter-spacing: -0.005em;
  color: var(--ink);
  margin: 6px 0 0;
}
.pricing-promise__body {
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--ink-2);
  max-width: 36ch;
  margin: 0;
}
@media (max-width: 820px) {
  .pricing-promises { grid-template-columns: 1fr; gap: clamp(20px, 3vw, 28px); }
}

/* ---------- FAQ ---------- */
.faq {
  max-width: 860px;
  margin-inline: auto;
  border-top: 1px solid var(--line);
}
.faq__item { border-bottom: 1px solid var(--line); }
.faq__q {
  all: unset;
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-4);
  width: 100%;
  padding: var(--s-5) 0;
  font-weight: 500;
  font-size: 18px;
  color: var(--ink);
  cursor: pointer;
}
.faq__q:hover { color: var(--brand-sage-deep); }
.faq__sign {
  flex: none;
  width: 28px; height: 28px;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  display: inline-flex; align-items: center; justify-content: center;
  position: relative;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.faq__sign::before,
.faq__sign::after {
  content: ""; position: absolute;
  background: var(--ink);
  transition: transform var(--dur) var(--ease), background var(--dur) var(--ease);
}
.faq__sign::before { width: 12px; height: 1.5px; }
.faq__sign::after  { width: 1.5px; height: 12px; }
.faq__item.is-open .faq__sign {
  background: var(--brand-sage);
  border-color: var(--brand-sage);
}
.faq__item.is-open .faq__sign::before,
.faq__item.is-open .faq__sign::after { background: var(--brand-cream); }
.faq__item.is-open .faq__sign::after { transform: rotate(90deg); }
.faq__a {
  display: grid;
  grid-template-rows: 0fr;
  /* Slightly slower easing than the global slow-dur for a more refined
     accordion feel — the content fades in via opacity at the same time
     so the row reveals as one coordinated motion rather than two. */
  transition: grid-template-rows 460ms cubic-bezier(0.25, 0.85, 0.3, 1);
}
.faq__a-inner {
  overflow: hidden;
  padding-right: 48px;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 320ms var(--ease) 60ms,
              transform 320ms var(--ease) 60ms;
}
.faq__item.is-open .faq__a { grid-template-rows: 1fr; }
.faq__item.is-open .faq__a-inner {
  opacity: 1;
  transform: translateY(0);
}
.faq__a-inner > div {
  padding-bottom: var(--s-5);
  font-size: 16px; line-height: 1.65;
  color: var(--ink-2);
  font-weight: 400;
}

/* ---------- CTA band (light, sand) ---------- */
.cta {
  background: var(--brand-sand);
  color: var(--ink);
  padding-block: clamp(80px, 9vw, 140px);
  position: relative;
  overflow: hidden;
}
.cta__inner {
  position: relative;
  display: grid; gap: var(--s-6);
  max-width: 760px; margin-inline: auto; text-align: center;
}
.cta__form {
  display: flex; gap: 10px; flex-wrap: wrap;
  max-width: 520px; margin-inline: auto; width: 100%;
}
.cta__input {
  flex: 1 1 240px;
  padding: 14px 18px;
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  font-size: 15px;
  font-family: inherit;
  outline: none;
  transition: border-color var(--dur) var(--ease);
}
.cta__input::placeholder { color: var(--ink-4); }
.cta__input:focus { border-color: var(--brand-sage-deep); }
.cta__note {
  font-size: 12.5px; color: var(--ink-3);
}

/* ---------- Footer (light cream, dark ink) ---------- */
.footer {
  background: var(--surface-1);
  color: var(--ink);
  padding-block: clamp(56px, 6vw, 88px);
  border-top: 1px solid var(--line);
}
.footer__grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: clamp(24px, 4vw, 56px);
}
@media (max-width: 860px) { .footer__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer__grid { grid-template-columns: 1fr; } }
.footer__tag {
  font-size: 14px; line-height: 1.6; color: var(--ink-2);
  max-width: 36ch;
  margin-top: var(--s-4);
}
.footer__col h4 {
  font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 500;
  margin: 0 0 var(--s-3);
}
.footer__col ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.footer__col a { font-size: 14.5px; color: var(--ink-2); }
.footer__col a:hover { color: var(--brand-sage-deep); }
.footer__legal {
  margin-top: clamp(40px, 5vw, 72px);
  padding-top: var(--s-5);
  border-top: 1px solid var(--line);
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  font-size: 12.5px; color: var(--ink-3);
}
.footer__url {
  display: inline-flex; align-items: center; gap: 10px;
}

/* ---------- Editorial two-column (About) ---------- */
.editorial {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: clamp(32px, 5vw, 80px);
}
@media (max-width: 860px) { .editorial { grid-template-columns: 1fr; } }
.editorial__lede {
  font-size: clamp(22px, 2vw, 30px);
  line-height: 1.25;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -0.022em;
}
.editorial__body > * + * { margin-top: var(--s-4); }
.editorial__body p { font-size: 17px; line-height: 1.7; color: var(--ink-2); font-weight: 400; }
.editorial__body h3 {
  font-size: 22px; font-weight: 900; letter-spacing: -0.018em;
  margin-top: var(--s-6);
}

/* ---------- Principles strip ---------- */
.principles {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
@media (max-width: 860px) { .principles { grid-template-columns: repeat(2, 1fr); } }
.principle {
  padding: var(--s-6) var(--s-5);
  border-right: 1px solid var(--line);
}
.principle:last-child { border-right: 0; }
.principle__num {
  font-family: var(--font); font-variant-numeric: tabular-nums;
  font-size: 12px; letter-spacing: 0.14em;
  color: var(--brand-sage-deep);
  font-weight: 500;
  text-transform: uppercase;
}
.principle__name {
  margin-top: var(--s-3);
  font-weight: 800; font-size: 20px; letter-spacing: -0.018em;
}
.principle__desc {
  margin-top: var(--s-2);
  font-size: 14px; color: var(--ink-2); font-weight: 400;
}

/* ---------- Science flow diagram ---------- */
.flowdiagram {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  gap: var(--s-4);
  align-items: stretch;
}
@media (max-width: 960px) {
  .flowdiagram { grid-template-columns: 1fr; }
  .flowdiagram__arrow { display: none; }
}
.flowcol {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--s-5);
  display: flex; flex-direction: column; gap: var(--s-3);
}
.flowcol h3 {
  font-size: 12px; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--brand-sage-deep);
  margin: 0;
}
.flowcol ul {
  list-style: none; padding: 0; margin: 0; display: grid; gap: 8px;
  font-size: 14.5px; color: var(--ink-2); font-weight: 400;
}
.flowcol li { display: flex; gap: 8px; align-items: baseline; }
.flowcol li::before {
  content: ""; width: 5px; height: 5px; border-radius: 50%;
  background: var(--brand-sage);
  flex: none; transform: translateY(3px);
}
.flowcol--hub {
  background: var(--brand-sage);
  color: var(--ink-inv);
  border-color: var(--brand-sage);
  position: relative;
  overflow: hidden;
}
.flowcol--hub h3 { color: rgba(250,250,248,0.85); }
.flowcol--hub .flowcol__title {
  position: relative;
  font-weight: 800; font-size: 22px; letter-spacing: -0.018em;
  color: var(--ink-inv);
}
.flowcol--hub .flowcol__note {
  position: relative;
  font-size: 15.5px; line-height: 1.55;
  color: rgba(250,250,248,0.92);
  font-weight: 400;
  margin-top: 4px;
}
.flowdiagram__arrow {
  display: flex; align-items: center; justify-content: center;
  color: var(--brand-sage-deep);
  font-size: 20px;
}

/* ---------- Citations ---------- */
.citations {
  display: grid; gap: var(--s-3);
  font-size: 12.5px; color: var(--ink-3);
  counter-reset: cite;
}
.citations li {
  display: grid; grid-template-columns: 22px 1fr; gap: 8px;
  line-height: 1.55;
  list-style: none;
}
.citations li::before {
  counter-increment: cite;
  content: counter(cite);
  font-variant-numeric: tabular-nums;
  color: var(--ink-4);
}

/* ---------- Scroll reveal ---------- */
.reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 700ms var(--ease), transform 700ms var(--ease);
  will-change: opacity, transform;
}
.reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1; transform: none; }
}

/* =================================================================
   v2 — UX-pass additions
   Sticky CTA, insight callout, devices strip, split pull-quote,
   featured testimonials, journey timeline, FAQ "more" CTA,
   social-proof CTA, refined four-shifts cards.
   ================================================================= */

/* ---------- Sticky CTA — appears after hero scrolls past ---------- */
.sticky-cta {
  position: fixed;
  right: clamp(16px, 3vw, 28px);
  bottom: clamp(16px, 3vw, 28px);
  z-index: 50;
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
  box-shadow: var(--shadow-card);
}
.sticky-cta.is-visible {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}
@media (max-width: 520px) {
  .sticky-cta { right: 12px; bottom: 12px; }
  .sticky-cta .btn { padding: 12px 18px; font-size: 14px; }
}

/* ---------- Feature row — refined hover ---------- */
.feature {
  transition: background var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease);
  position: relative;
  cursor: default;
}
.feature::after {
  /* Hairline under each cell that lights up sage on hover — gives the
     feature a quiet "this row is alive" indicator without a heavy lift. */
  content: "";
  position: absolute;
  left: var(--s-5); right: var(--s-5);
  bottom: calc(var(--s-6) - 14px);
  height: 1px;
  background: var(--brand-sage);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--dur-slow) var(--ease);
}
.feature:hover {
  background: var(--brand-sage-tint);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.4),
    0 12px 28px -16px rgba(149, 183, 126, 0.35);
}
.feature:hover .feature__icon { color: var(--brand-sage-deep); }
.feature:hover .feature__spark {
  opacity: 1;
  color: var(--brand-sage-deep);
}
.feature:hover::after { transform: scaleX(1); }
.feature__spark { transition: opacity var(--dur) var(--ease), color var(--dur) var(--ease); }

/* ---------- Refined Four Shifts cards (numbered, icon-led) ---------- */
.card--shift {
  position: relative;
  padding-top: var(--s-7);
}
.card--shift .card__num {
  position: absolute;
  top: 24px; right: 24px;
  font-size: 11px;
  letter-spacing: 0.18em;
  font-weight: 500;
  color: var(--brand-sage-deep);
  background: var(--brand-sage-tint);
  padding: 4px 10px;
  border-radius: var(--r-pill);
}
.card--shift .card__mark {
  width: 44px; height: 44px;
  background: var(--brand-sage-tint);
  color: var(--brand-sage-deep);
}
.card--shift .card__mark svg { width: 22px; height: 22px; }

/* ---------- Insight Callout — sample BioSense notification ---------- */
.insight-callout {
  margin-top: var(--s-5);
  display: flex; align-items: flex-start; gap: 14px;
  padding: 16px 18px;
  /* Same glass family as the other panels — keep the sage left
     accent bar so it still reads as a "notification" pattern. */
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-bd);
  border-left: 3px solid var(--brand-sage);
  border-radius: var(--r-md);
  box-shadow: var(--glass-shadow);
  position: relative;
}
.insight-callout__icon {
  flex: none;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--brand-sage-tint);
  color: var(--brand-sage-deep);
  display: inline-flex; align-items: center; justify-content: center;
}
.insight-callout__icon svg { width: 18px; height: 18px; }
.insight-callout__body {
  display: grid; gap: 4px;
  font-size: 14px;
}
.insight-callout__lbl {
  font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--brand-sage-deep); font-weight: 500;
}
.insight-callout__title {
  font-weight: 700; font-size: 15px; color: var(--ink);
  letter-spacing: -0.005em;
}
.insight-callout__sub {
  font-size: 13.5px; color: var(--ink-3);
  line-height: 1.45;
}

/* ---------- Compatible devices strip ---------- */
.devices {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(20px, 4vw, 56px);
  align-items: center;
  padding: clamp(28px, 4vw, 48px);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-2xl);
}
@media (max-width: 760px) { .devices { grid-template-columns: 1fr; } }
.devices__head {
  display: grid; gap: 6px;
}
.devices__lbl {
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--brand-sage-deep); font-weight: 500;
}
.devices__title {
  font-weight: 800; font-size: clamp(18px, 1.6vw, 22px);
  color: var(--ink); letter-spacing: -0.014em;
  max-width: 22ch;
}
.devices__list {
  display: flex; flex-wrap: wrap; gap: 10px;
  list-style: none; padding: 0; margin: 0;
}
.devices__list li {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 16px;
  background: var(--brand-cream);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  font-size: 13.5px; font-weight: 500;
  color: var(--ink);
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.devices__list li:hover {
  border-color: var(--brand-sage);
  background: var(--brand-sage-tint);
}
.devices__list .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--brand-sage);
}
/* Branded device-archetype icon glyph inside each pill chip.
   Replaces the sage dot with a recognisable silhouette of the device
   class (watch / ring / band / patch) for visual density. */
.devices__list .device-ic {
  flex: none;
  width: 18px; height: 18px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--brand-sage-deep);
}
.devices__list .device-ic svg { width: 100%; height: 100%; }

/* ---------- Pull-quote — split variant (image left, quote right) ---------- */
.pullquote--split {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 0;
  padding: 0;
  overflow: hidden;
  background: var(--brand-sage-soft);
}
@media (max-width: 860px) { .pullquote--split { grid-template-columns: 1fr; } }
.pullquote__media {
  position: relative;
  min-height: 320px;
  background: var(--brand-sand);
}
.pullquote__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.pullquote__copy {
  padding: clamp(40px, 5vw, 72px);
  display: grid; gap: var(--s-4);
  align-content: center;
  position: relative;
}
.pullquote--split::before { display: none; }    /* hide the giant " from base */
.pullquote--split .pullquote__copy::before {
  content: "\201C";
  position: absolute;
  top: -28px; left: clamp(24px, 5vw, 56px);
  font-size: 180px; line-height: 1;
  font-weight: 700;
  color: rgba(250,250,248,0.32);
}

/* ---------- Testimonials — featured layout (1 big + 2 small) ---------- */
.testimonials__featured {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: var(--s-4);
}
@media (max-width: 960px) { .testimonials__featured { grid-template-columns: 1fr; } }
.testimonials__small {
  display: grid; gap: var(--s-4);
}
.quote--featured {
  background: var(--brand-cream);
  border: 1px solid var(--line);
  border-radius: var(--r-2xl);
  padding: clamp(32px, 4vw, 56px);
  display: flex; flex-direction: column; gap: var(--s-5);
  position: relative;
  overflow: hidden;
}
.quote--featured::before {
  content: "\201C";
  position: absolute;
  top: -50px; left: 24px;
  font-size: 240px; line-height: 1;
  font-weight: 700;
  color: var(--brand-sage-tint);
  pointer-events: none;
}
.quote--featured .quote__body {
  position: relative;
  font-size: clamp(20px, 1.8vw, 26px);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.quote__stats {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin-top: 4px;
}
.quote__stat {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11.5px; letter-spacing: 0.06em;
  font-weight: 500;
  padding: 5px 10px;
  background: var(--brand-sage-tint);
  color: var(--brand-sage-deep);
  border-radius: var(--r-pill);
}
.quote__stat .dot {
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--brand-sage);
}

/* ---------- Journey timeline ---------- */
.journey {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  position: relative;
}
.journey::before {
  /* horizontal connecting line (desktop only) — sits behind the
     centre of the timeline nodes (top = node radius). 96px nodes
     → centre at 48px. */
  content: "";
  position: absolute;
  left: 12.5%; right: 12.5%; top: 48px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(111, 142, 90, 0.45) 18%, rgba(111, 142, 90, 0.45) 82%, transparent);
}
@media (max-width: 1080px) {
  /* Node shrinks to 88px → centre is 44px from top */
  .journey::before { top: 44px; }
}
@media (max-width: 860px) {
  .journey { grid-template-columns: 1fr; }
  .journey::before { display: none; }
}
.journey__step {
  display: grid; gap: var(--s-3);
  padding: 0 var(--s-4);
  text-align: center;
  position: relative;
}
@media (max-width: 860px) {
  .journey__step {
    text-align: left;
    padding: var(--s-4) 0;
    border-bottom: 1px solid var(--line);
    grid-template-columns: 56px 1fr;
    align-items: start;
    column-gap: var(--s-4);
  }
  .journey__step:last-child { border-bottom: 0; }
}
/* ---------- Journey timeline nodes ----------
   Editorial, on-brand timeline tiles. Cream-glass disc with a thin
   sage hairline border + sage Inter Black numerals. The Day-1 step
   inverts to solid sage to anchor the timeline's start. No radial
   highlight, no text-shadow — restraint is the brand. */
.journey__node {
  width: 96px; height: 96px;
  margin: 0 auto var(--s-3);
  border-radius: 50%;
  background: #fff;
  border: 1.5px solid rgba(111, 142, 90, 0.32);
  display: inline-flex; align-items: center; justify-content: center;
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 800;
  font-size: 16px;
  letter-spacing: -0.005em;
  color: var(--brand-sage-deep);
  position: relative;
  z-index: 1;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.9) inset,
    0 1px 2px rgba(40, 44, 36, 0.04),
    0 14px 26px -16px rgba(111, 142, 90, 0.28);
}
/* Day 1 is the active "now" moment in the timeline → invert to a
   solid sage fill so the eye lands on it first. */
.journey__step:nth-child(1) .journey__node {
  background: linear-gradient(160deg, #95B77E 0%, #6F8E5A 100%);
  border-color: rgba(255, 255, 255, 0.45);
  color: #fff;
}
@media (max-width: 1080px) {
  .journey__node {
    width: 88px; height: 88px;
    font-size: 15px;
  }
}
@media (max-width: 860px) {
  .journey__node {
    margin: 0;
    width: 72px; height: 72px;
    font-size: 14px;
  }
}
.journey__inner { display: grid; gap: 6px; }
.journey__when {
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--brand-sage-deep); font-weight: 600;
}
.journey__title {
  font-weight: 800; font-size: 17px;
  color: var(--ink); letter-spacing: -0.014em;
  line-height: 1.22;
}
.journey__body {
  font-size: 13.5px; color: var(--ink-3);
  line-height: 1.5;
}

/* ---------- FAQ — "still have questions?" CTA below accordion ---------- */
.faq__more {
  max-width: 860px;
  margin: var(--s-7) auto 0;
  padding: clamp(28px, 4vw, 40px);
  background: var(--brand-sage-tint);
  border-radius: var(--r-xl);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--s-5);
  align-items: center;
}
@media (max-width: 600px) { .faq__more { grid-template-columns: 1fr; } }
.faq__more-title {
  font-weight: 700; font-size: 18px;
  color: var(--ink); letter-spacing: -0.005em;
}
.faq__more-sub {
  margin-top: 4px;
  font-size: 14px; color: var(--ink-2);
}

/* ---------- CTA — social proof line above the form ---------- */
.cta__proof {
  display: inline-flex; align-items: center; gap: 12px;
  margin-inline: auto;
  padding: 6px 14px 6px 6px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  font-size: 13px;
  color: var(--ink-2);
}
.cta__proof-avs {
  display: inline-flex;
}
.cta__proof-av {
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--brand-sage);
  color: var(--ink-inv);
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 11px;
  border: 2px solid var(--surface);
  margin-left: -8px;
}
.cta__proof-av:first-child { margin-left: 0; }
.cta__proof b { color: var(--brand-sage-deep); font-weight: 700; }

/* ---------- Founder note (replaces team monograms with editorial) ---------- */
.founder-note {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: clamp(28px, 4vw, 56px);
  align-items: stretch;
}
@media (max-width: 860px) { .founder-note { grid-template-columns: 1fr; } }
.founder-note__media {
  border-radius: var(--r-2xl);
  overflow: hidden;
  background: var(--brand-sand);
  aspect-ratio: 4 / 5;
  position: relative;
}
.founder-note__media img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
}
.founder-note__copy {
  display: flex; flex-direction: column; gap: var(--s-4);
  justify-content: center;
}
.founder-note__lede {
  font-size: clamp(20px, 1.8vw, 26px);
  font-weight: 500;
  line-height: 1.4; letter-spacing: -0.01em;
  color: var(--ink);
}
.founder-note__sig {
  display: flex; align-items: center; gap: 12px;
  margin-top: var(--s-3);
  padding-top: var(--s-4);
  border-top: 1px solid var(--line);
}
.founder-note__sig-name {
  font-weight: 500; font-size: 15px;
}
.founder-note__sig-role {
  font-size: 12.5px; color: var(--ink-3);
}

/* Compact members row beneath founder note */
.team--compact {
  margin-top: var(--s-7);
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-5);
}
@media (max-width: 860px) { .team--compact { grid-template-columns: 1fr; } }
.team__row {
  display: grid; grid-template-columns: 48px 1fr; gap: 14px;
  align-items: center;
  padding: 16px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
}
.team__mono {
  width: 48px; height: 48px;
  border-radius: 50%;
  background: var(--brand-sage-tint);
  color: var(--brand-sage-deep);
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 17px;
}
.team__name { font-weight: 500; font-size: 15px; }
.team__role { font-size: 12.5px; color: var(--ink-3); }

/* =================================================================
   Science page — page-specific UX additions
   ================================================================= */

/* ---------- Science hero — split with image flank ---------- */
.science-hero__split {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
}
@media (max-width: 960px) { .science-hero__split { grid-template-columns: 1fr; } }
.science-hero__visual {
  position: relative;
  border-radius: var(--r-2xl);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--brand-sand);
  box-shadow: var(--shadow-soft);
}
.science-hero__visual img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
}

/* Floating sub-card pinned to the science hero image */
.science-hero__chip {
  position: absolute;
  left: clamp(16px, 3vw, 28px);
  bottom: clamp(16px, 3vw, 28px);
  display: inline-flex; align-items: center; gap: 10px;
  padding: 10px 14px;
  background: rgba(250,250,248,0.92);
  backdrop-filter: saturate(140%) blur(10px);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  border-radius: var(--r-pill);
  box-shadow: var(--shadow-soft);
  font-size: 12.5px;
  font-weight: 500;
  color: var(--ink);
}
.science-hero__chip .dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--brand-sage);
  box-shadow: 0 0 0 4px rgba(111,191,107,0.2);
}

/* ---------- Sample-insights gallery (4-up grid of mocked alerts) ---------- */
.insights-gallery {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s-4);
}
@media (max-width: 760px) { .insights-gallery { grid-template-columns: 1fr; } }
.insight-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 22px;
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: 16px;
  align-items: start;
  position: relative;
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.insight-card:hover {
  border-color: var(--brand-sage-soft);
  transform: translateY(-2px);
  box-shadow: var(--shadow-soft);
}
.insight-card__icon {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--brand-sage-tint);
  color: var(--brand-sage-deep);
  display: inline-flex; align-items: center; justify-content: center;
}
.insight-card__icon svg { width: 20px; height: 20px; }
.insight-card__when {
  font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--brand-sage-deep); font-weight: 500;
  margin-bottom: 4px;
}
.insight-card__title {
  font-weight: 700; font-size: 16px; color: var(--ink);
  letter-spacing: -0.005em; line-height: 1.3;
  margin: 0 0 6px;
}
.insight-card__body {
  font-size: 13.5px; color: var(--ink-2);
  line-height: 1.5;
}
.insight-card__tag {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 10px;
  font-size: 11px; letter-spacing: 0.06em;
  font-weight: 500;
  padding: 4px 10px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  color: var(--ink-3);
}
.insight-card__tag .dot {
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--brand-sage);
}

/* ---------- Baseline chart visual (Context block) ---------- */
.baseline-chart {
  margin-top: var(--s-5);
  padding: 24px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  display: grid; gap: 14px;
  box-shadow: var(--shadow-soft);
}
.baseline-chart__header {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: var(--s-4);
}
.baseline-chart__title {
  font-weight: 700; font-size: 14px; color: var(--ink);
  letter-spacing: -0.005em;
}
.baseline-chart__legend {
  display: flex; gap: 14px;
  font-size: 11.5px; color: var(--ink-3);
}
.baseline-chart__legend span {
  display: inline-flex; align-items: center; gap: 6px;
}
.baseline-chart__legend .swatch {
  width: 10px; height: 10px; border-radius: 3px;
  display: inline-block;
}
.baseline-chart__svg {
  width: 100%; height: 140px;
  display: block;
}
.baseline-chart__caption {
  font-size: 12.5px; color: var(--ink-3);
  border-top: 1px solid var(--line);
  padding-top: 12px;
  display: flex; justify-content: space-between;
  align-items: center;
  flex-wrap: wrap; gap: 8px;
}
.baseline-chart__caption b { color: var(--ink); font-weight: 500; }

/* ---------- Privacy mini-icons grid (Trust section) ---------- */
.privacy-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s-4);
  margin-top: var(--s-5);
}
.privacy-grid--three {
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-5);
  margin-top: 0;
}
@media (max-width: 760px) {
  .privacy-grid { grid-template-columns: repeat(2, 1fr); }
  .privacy-grid--three { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 420px) {
  .privacy-grid { grid-template-columns: 1fr; }
  .privacy-grid--three { grid-template-columns: 1fr; }
}
.privacy-tile {
  padding: 20px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  display: grid; gap: 10px;
  transition: border-color var(--dur) var(--ease);
}
.privacy-tile--lg {
  padding: 28px 26px;
  gap: 14px;
  border-radius: var(--r-xl);
}
.privacy-tile:hover { border-color: var(--brand-sage-soft); }
.privacy-tile__icon {
  width: 36px; height: 36px;
  border-radius: var(--r-sm);
  background: var(--brand-sage-tint);
  color: var(--brand-sage-deep);
  display: inline-flex; align-items: center; justify-content: center;
}
.privacy-tile__icon svg { width: 18px; height: 18px; }
.privacy-tile--lg .privacy-tile__icon {
  width: 44px; height: 44px; border-radius: var(--r-md);
}
.privacy-tile--lg .privacy-tile__icon svg { width: 22px; height: 22px; }
.privacy-tile__title {
  font-weight: 700; font-size: 14px; color: var(--ink);
  letter-spacing: -0.005em;
}
.privacy-tile--lg .privacy-tile__title {
  font-size: 17px;
}
.privacy-tile__body {
  font-size: 13px; color: var(--ink-3); line-height: 1.5;
}
.privacy-tile--lg .privacy-tile__body {
  font-size: 14.5px; line-height: 1.55;
}

/* ---------- Editorial flank image (Unification block) ---------- */
.editorial--flanked {
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
}
@media (max-width: 860px) { .editorial--flanked { grid-template-columns: 1fr; } }
.editorial__media {
  border-radius: var(--r-2xl);
  overflow: hidden;
  background: var(--brand-sand);
  box-shadow: var(--shadow-soft);
  aspect-ratio: 4 / 3;
}
.editorial__media img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
}

/* ============================================================
   HOW IT WORKS PAGE  (how-it-works.html)
   ------------------------------------------------------------
   Self-contained styles for the dedicated page that explains the
   five pieces of BioSense in depth. Reuses the existing design
   system (eyebrow, display-xl, btn, ring-progress, insight-callout)
   wherever possible and only adds CSS for the bespoke patterns:
   the hero anchor-card index, the alternating split sections, the
   device-chip grid, the biomarker tile grid, the score legend,
   and the AI chat mock.
   ============================================================ */

/* --- Hero variant: no full-bleed video, just headline + index ---
   We don't pull the nav over a dark video here; how-it-works is an
   explanation page, not an emotional pitch. Cream background, calm
   spacing, and the 5-card anchor grid sits flush under the headline. */
.hero--how {
  padding-block: clamp(32px, 4.5vw, 64px) clamp(40px, 5vw, 64px);
  background: var(--surface-1);
}

/* 5-up anchor card grid. Each card scrolls the user to that
   feature's deep section. Cards are equal-width on desktop, wrap
   to 2-up on tablet, and stack on phones. */
.how-anchor-grid {
  list-style: none;
  margin: clamp(40px, 5vw, 64px) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: clamp(12px, 1.4vw, 18px);
}
.how-anchor-grid--eight {
  grid-template-columns: repeat(4, 1fr);
  margin-top: 0;
}

.how-anchor {
  display: grid;
  grid-template-areas:
    "num arr"
    "icon icon"
    "title title"
    "sub sub";
  grid-template-columns: 1fr auto;
  gap: 6px 10px;
  padding: 20px 20px 22px;
  /* Frosted glass — translucent white over the cream hero, with a
     soft inset top-edge highlight and a long ambient shadow to lift
     the card off the surface. */
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-bd);
  border-radius: var(--r-lg);
  box-shadow: var(--glass-shadow);
  text-decoration: none;
  color: var(--ink);
  transition: border-color var(--dur) var(--ease),
              transform var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease);
  position: relative;
}
.how-anchor:hover {
  border-color: rgba(111, 142, 90, 0.55);
  transform: translateY(-3px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.8),
    0 1px 2px rgba(40, 44, 36, 0.04),
    0 10px 26px -8px rgba(149, 183, 126, 0.32),
    0 28px 64px -22px rgba(40, 44, 36, 0.22);
}
.how-anchor:hover .how-anchor__arr {
  transform: translateX(3px);
  color: var(--brand-sage-deep);
}

.how-anchor__num {
  grid-area: num;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  color: var(--brand-sage-deep);
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
}
.how-anchor__arr {
  grid-area: arr;
  align-self: start;
  font-size: 16px;
  line-height: 1;
  color: var(--ink-3);
  transition: transform var(--dur) var(--ease), color var(--dur) var(--ease);
}
.how-anchor__icon {
  grid-area: icon;
  width: 40px; height: 40px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--brand-sage-tint);
  color: var(--brand-sage-deep);
  margin-top: 6px;
}
.how-anchor__icon svg { width: 20px; height: 20px; fill: none;
  stroke: currentColor; stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round; }
.how-anchor__title {
  grid-area: title;
  font-weight: 700;
  font-size: 16px;
  letter-spacing: -0.005em;
  color: var(--ink);
  margin-top: 10px;
  line-height: 1.25;
}
.how-anchor__sub {
  grid-area: sub;
  font-size: 13px;
  color: var(--ink-3);
  line-height: 1.45;
}

@media (max-width: 1100px) {
  .how-anchor-grid { grid-template-columns: repeat(3, 1fr); }
  .how-anchor-grid--eight { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 720px) {
  .how-anchor-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .how-anchor-grid--eight { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .how-anchor { padding: 16px; }
}
@media (max-width: 460px) {
  .how-anchor-grid { grid-template-columns: 1fr; }
  .how-anchor-grid--eight { grid-template-columns: 1fr; }
}

/* --- Split feature section (text + visual side-by-side) ---
   .how-feature is the section wrapper; .how-feature--flipped
   reverses the column order so consecutive features alternate
   left/right and the page breathes naturally. */
.how-feature {
  scroll-margin-top: 90px;  /* clear the sticky nav on anchor jump */
}
.how-feature__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(40px, 6vw, 88px);
}
.how-feature--flipped .how-feature__grid {
  grid-template-areas: "visual copy";
}
.how-feature--flipped .how-feature__copy   { grid-area: copy; }
.how-feature--flipped .how-feature__visual { grid-area: visual; }
.how-feature__copy { max-width: 56ch; }
.how-feature__list {
  list-style: none;
  padding: 0; margin: 0;
  display: grid;
  gap: 10px;
}
.how-feature__list li {
  position: relative;
  padding-left: 26px;
  font-size: 14.5px;
  color: var(--ink-2);
  line-height: 1.55;
}
.how-feature__list li::before {
  content: "";
  position: absolute;
  left: 0; top: 9px;
  width: 12px; height: 1.6px;
  background: var(--brand-sage-deep);
  border-radius: 1px;
}
.how-feature__visual--centred {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(20px, 3vw, 32px);
}

@media (max-width: 900px) {
  .how-feature__grid,
  .how-feature--flipped .how-feature__grid {
    grid-template-columns: 1fr;
    grid-template-areas: "copy" "visual";
    gap: clamp(32px, 5vw, 48px);
  }
}

/* --- Device chip grid (Feature 01 visual) --- */
.device-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  padding: clamp(20px, 2.4vw, 28px);
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-bd);
  border-radius: var(--r-2xl);
  box-shadow: var(--glass-shadow);
}
.device-grid__chip {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  font-size: 14px;
  color: var(--ink);
  font-weight: 500;
}
.device-grid__chip svg {
  width: 22px; height: 22px;
  flex: none;
  color: var(--brand-sage-deep);
}
.device-grid__chip--more {
  background: var(--brand-sage-tint);
  color: var(--brand-sage-deep);
  border-color: var(--brand-sage);
  font-weight: 600;
}
.device-grid__chip--more svg { color: inherit; }

@media (max-width: 480px) {
  .device-grid { grid-template-columns: 1fr; }
}

/* --- Biomarker tiles (Feature 02 visual) --- */
.bio-tiles {
  padding: clamp(22px, 2.6vw, 30px);
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-bd);
  border-radius: var(--r-2xl);
  box-shadow: var(--glass-shadow);
}
.bio-tiles__head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 10px;
  margin-bottom: 16px;
}
.bio-tiles__title { font-weight: 700; font-size: 15px; color: var(--ink); }
.bio-tiles__date  { font-size: 12px; color: var(--ink-3); }

.bio-tiles__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
.bio-tile {
  display: grid; gap: 4px;
  padding: 14px 16px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
}
.bio-tile__name {
  font-size: 12px; color: var(--ink-3);
  letter-spacing: 0.06em; text-transform: uppercase; font-weight: 500;
}
.bio-tile__val {
  font-size: 22px; font-weight: 700; color: var(--ink);
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}
.bio-tile__unit {
  font-size: 12px; color: var(--ink-3); font-weight: 500;
  letter-spacing: 0;
}
.bio-tile__state {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-top: 2px;
}
.bio-tile__state--good  { color: var(--brand-sage-deep); }
.bio-tile__state--watch { color: #C19236; }

.bio-tile__bar {
  height: 4px;
  background: var(--brand-sage-tint);
  border-radius: 999px;
  overflow: hidden;
  margin-top: 6px;
}
.bio-tile__bar span {
  display: block; height: 100%;
  width: var(--p, 60%);
  background: var(--brand-sage);
  border-radius: 999px;
}

.bio-tiles__foot {
  display: flex; align-items: flex-start; gap: 10px;
  margin-top: 16px;
  padding: 12px 14px;
  background: var(--brand-sage-tint);
  border-radius: var(--r-md);
  font-size: 13px;
  color: var(--brand-sage-deep);
  line-height: 1.45;
}
.bio-tiles__foot svg { flex: none; margin-top: 2px; color: var(--brand-sage-deep); }

/* --- Insight callout size variants used on the how-it-works page --- */
.insight-callout--lg { padding: 20px 22px; }
.insight-callout--lg .insight-callout__title { font-size: 17px; }
.insight-callout--lg .insight-callout__sub   { font-size: 14px; }

.insight-callout--ghost {
  margin-top: 14px;
  /* Quieter sibling — flat surface, no blur, no ambient lift. Keeps
     the visual hierarchy: today's insight = elevated glass, yesterday's
     follow-up = grounded reference card. */
  background: var(--surface);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: 1px solid var(--line);
  border-left: 3px solid var(--brand-sage-soft);
  box-shadow: none;
  opacity: 0.92;
}

/* --- Score ring (extra-large variant) + supporting legend --- */
.ring-progress--xl { width: 220px; height: 220px; }
.ring-progress--xl .ring-progress__num { font-size: 68px; letter-spacing: -0.03em; }
.ring-progress--xl .ring-progress__lbl { font-size: 13px; margin-top: 6px; }

.score-legend {
  display: grid;
  grid-template-columns: repeat(2, auto);
  gap: 6px 24px;
  font-size: 13.5px;
  color: var(--ink-2);
}
.score-legend__row {
  display: inline-flex; align-items: center; gap: 8px;
}
.score-legend__dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--brand-sage);
  flex: none;
}

/* --- Health AI chat mock (Feature 05 visual) --- */
.ai-chat {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: clamp(18px, 2vw, 22px);
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-bd);
  border-radius: var(--r-2xl);
  box-shadow: var(--glass-shadow);
  max-width: 520px;
  margin-inline: auto;
}

.ai-chat__head {
  display: flex; align-items: center; gap: 12px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}
.ai-chat__avatar {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--brand-sage-tint);
  display: inline-flex; align-items: center; justify-content: center;
}
.ai-chat__name {
  display: block;
  font-weight: 700; font-size: 14px; color: var(--ink);
}
.ai-chat__status {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; color: var(--ink-3);
}
.ai-chat__live {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--brand-sage);
  box-shadow: 0 0 0 0 rgba(168, 189, 149, 0.55);
  animation: ai-chat-pulse 2.4s var(--ease) infinite;
}
@keyframes ai-chat-pulse {
  0%   { box-shadow: 0 0 0 0   rgba(168, 189, 149, 0.55); }
  70%  { box-shadow: 0 0 0 8px rgba(168, 189, 149, 0);   }
  100% { box-shadow: 0 0 0 0   rgba(168, 189, 149, 0);   }
}
@media (prefers-reduced-motion: reduce) {
  .ai-chat__live { animation: none; }
}

.ai-chat__thread {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.ai-chat__bubble {
  max-width: 86%;
  padding: 12px 14px;
  border-radius: var(--r-md);
  font-size: 14px;
  line-height: 1.5;
}
.ai-chat__bubble--user {
  align-self: flex-end;
  background: var(--brand-sage-deep);
  color: var(--ink-inv);
}
.ai-chat__bubble--ai {
  align-self: flex-start;
  background: var(--surface);
  color: var(--ink-2);
  border: 1px solid var(--line);
}
.ai-chat__bubble--ai p     { margin: 0; }
.ai-chat__bubble--ai p + ul { margin-top: 8px; }
.ai-chat__bubble--ai ul + p { margin-top: 8px; }
.ai-chat__bubble--ai ul    { margin: 0; padding-left: 18px; }
.ai-chat__bubble--ai li    { margin-bottom: 2px; }
.ai-chat__cites {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 10px;
  padding: 4px 10px;
  background: var(--brand-sage-tint);
  border-radius: var(--r-pill);
  font-size: 11.5px;
  color: var(--brand-sage-deep);
  font-weight: 500;
  letter-spacing: 0.02em;
}

.ai-chat__suggests {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.ai-chat__chip {
  font: inherit;
  font-size: 12.5px;
  padding: 7px 12px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  color: var(--ink-2);
  cursor: pointer;
  transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.ai-chat__chip:hover {
  border-color: var(--brand-sage);
  color: var(--brand-sage-deep);
}

.ai-chat__input {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}
.ai-chat__input input {
  font: inherit;
  font-size: 14px;
  padding: 12px 14px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  color: var(--ink);
  outline: none;
  transition: border-color var(--dur) var(--ease);
}
.ai-chat__input input:focus { border-color: var(--brand-sage-deep); }
.ai-chat__input input::placeholder { color: var(--ink-4); }
.ai-chat__send {
  width: 42px; height: 42px;
  border-radius: 50%;
  background: var(--brand-sage);
  color: var(--ink-inv);
  border: 0;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background var(--dur) var(--ease);
}
.ai-chat__send:hover { background: var(--brand-sage-deep); }
.ai-chat__send svg { width: 18px; height: 18px;
  fill: none; stroke: currentColor; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Small utilities ---------- */
.u-max-ch { max-width: 62ch; }
.u-mt-6 { margin-top: var(--s-6); }
.u-mt-5 { margin-top: var(--s-5); }
.u-mt-4 { margin-top: var(--s-4); }
.u-mt-3 { margin-top: var(--s-3); }
.u-center { text-align: center; }
.u-row { display: inline-flex; align-items: center; gap: 10px; }
.u-caps {
  text-transform: uppercase; letter-spacing: 0.14em;
  font-size: 12px; color: var(--ink-3); font-weight: 500;
}

/* ============================================================
   v3 update — additions
   ============================================================ */

/* --- Devices block, made click-through to Science > Wearables --- */
.devices--linked {
  position: relative;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  transition: border-color var(--dur) var(--ease),
              transform   var(--dur) var(--ease),
              box-shadow  var(--dur) var(--ease);
}
.devices--linked:hover,
.devices--linked:focus-visible {
  border-color: var(--brand-sage);
  transform: translateY(-2px);
  box-shadow: 0 14px 32px -22px rgba(40, 60, 30, 0.45);
  outline: none;
}
.devices--linked .devices__title { color: var(--ink); }
.devices__cta {
  grid-column: 1 / -1;
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 500;
  color: var(--brand-sage-deep);
  letter-spacing: 0.005em;
  margin-top: 4px;
}
.devices__cta .arr {
  transition: transform var(--dur) var(--ease);
}
.devices--linked:hover .devices__cta .arr,
.devices--linked:focus-visible .devices__cta .arr { transform: translateX(3px); }

/* --- Small "What you receive" eyebrow above the ring__pills --- */
.ring__pills-eyebrow {
  display: block;
  margin-top: var(--s-6);
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--brand-sage-deep); font-weight: 500;
}
.ring__pills-eyebrow + .ring__pills { margin-top: 12px; }

/* --- Pricing — Founding Annual Members highlight callout ---
   Sits between the price block and the feats list on the annual
   card. Sage tint chip with a soft border and brand-olive ink. */
.pricing-card__highlight {
  display: flex; align-items: flex-start; gap: 10px;
  margin: 4px 0 0;
  padding: 12px 14px;
  background: var(--brand-sage-tint);
  border: 1px solid rgba(111, 142, 90, 0.32);
  border-radius: var(--r-md);
  font-size: 13.5px;
  color: var(--brand-sage-deep);
  line-height: 1.45;
}
.pricing-card__highlight b { color: var(--brand-sage-deep); font-weight: 700; }
.pricing-card__highlight-ic {
  flex: none;
  width: 18px; height: 18px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--brand-sage-deep);
  color: var(--ink-inv);
  font-size: 11px;
  line-height: 1;
}

/* --- Founding-Member final CTA button centering ---
   The CTA section uses a single-column grid; .btn defaults to
   inline-flex so we need justify-self to keep it centered. */
.cta__btn { justify-self: center; }

/* ============================================================
   v5 — How-it-works merged page additions
   ============================================================ */

/* --- Secondary intelligence note inside flow-diagram hub.
   Separates the AI-assistant line from the main note with a
   soft hairline. */
.flowcol--hub .flowcol__note--secondary {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(250,250,248,0.22);
  font-size: 14.5px;
}

/* --- Educational disclaimer under Blood Analysis bullets. */
.how-feature__disclaimer {
  font-size: 12.5px;
  font-style: italic;
  color: var(--ink-3);
  line-height: 1.5;
  max-width: 48ch;
}

/* --- CTA buttons row (pricing-focused close). */
.cta__buttons {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 20px;
}

/* --- Generic "feature mock card" surface used by goals, report,
   nutrition and check-in cards. Same glass treatment as
   bio-tiles / ai-chat so all eight feature visuals feel related. */
.goals-card,
.report-card,
.nutrition-card,
.checkin-card {
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-bd);
  border-radius: var(--r-xl);
  box-shadow: var(--glass-shadow);
  padding: clamp(20px, 2.4vw, 28px);
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.goals-card__head,
.report-card__head,
.nutrition-card__head,
.checkin-card__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--line);
}
.goals-card__title,
.report-card__title,
.nutrition-card__title,
.checkin-card__title {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -0.005em;
  color: var(--ink);
}
.goals-card__date,
.report-card__badge,
.nutrition-card__source,
.checkin-card__date {
  font-size: 11.5px;
  color: var(--ink-3);
  letter-spacing: 0.04em;
}
.report-card__badge {
  color: var(--brand-sage-deep);
  font-weight: 600;
}

/* --- Goals card (Feature 05) --- */
.goals-card__list { display: grid; gap: 16px; }
.goal-row { display: grid; gap: 6px; }
.goal-row__top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
}
.goal-row__name { font-size: 13.5px; color: var(--ink); font-weight: 600; }
.goal-row__val  { font-size: 13px; color: var(--brand-sage-deep); font-variant-numeric: tabular-nums; }
.goal-row__bar {
  height: 6px;
  background: rgba(149, 183, 126, 0.18);
  border-radius: 999px;
  overflow: hidden;
}
.goal-row__bar > span {
  display: block;
  width: var(--p, 0%);
  height: 100%;
  background: linear-gradient(90deg, #95B77E 0%, #6F8E5A 100%);
  border-radius: 999px;
}
.goal-row__sub { font-size: 12px; color: var(--ink-3); }

/* --- Report card (Feature 06) --- */
.report-card__chart {
  height: 110px;
  width: 100%;
}
.report-card__chart svg { width: 100%; height: 100%; display: block; }
.report-card__rows { display: grid; gap: 8px; }
.report-card__row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 12px;
  align-items: baseline;
  font-size: 13px;
  padding: 6px 0;
  border-bottom: 1px solid var(--line);
}
.report-card__row:last-child { border-bottom: none; }
.report-card__row-name { color: var(--ink); font-weight: 500; }
.report-card__row-val  { color: var(--ink); font-weight: 700; font-variant-numeric: tabular-nums; }
.report-card__row-state {
  font-size: 11.5px;
  color: var(--ink-3);
}
.report-card__row-state--good  { color: var(--brand-sage-deep); }
.report-card__row-state--watch { color: #B98A2A; }
.report-card__foot,
.nutrition-card__insight,
.checkin-card__insight {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 10px 12px;
  background: var(--brand-sage-tint);
  border-radius: var(--r-md);
  font-size: 12.5px;
  color: var(--brand-sage-deep);
  line-height: 1.45;
}
.report-card__foot svg,
.nutrition-card__insight svg,
.checkin-card__insight svg {
  flex: none;
  color: var(--brand-sage-deep);
  margin-top: 2px;
}

/* --- Nutrition card (Feature 07) --- */
.nutrition-card__macros { display: grid; gap: 12px; }
.macro { display: grid; grid-template-columns: 1fr auto; row-gap: 6px; column-gap: 12px; align-items: baseline; }
.macro__lbl { font-size: 13px; color: var(--ink-2); }
.macro__val { font-size: 15px; color: var(--ink); font-weight: 700; font-variant-numeric: tabular-nums; }
.macro__val em { font-style: normal; font-weight: 500; color: var(--ink-3); font-size: 11.5px; margin-left: 2px; }
.macro__bar {
  grid-column: 1 / -1;
  height: 5px;
  background: rgba(149, 183, 126, 0.18);
  border-radius: 999px;
  overflow: hidden;
}
.macro__bar > span {
  display: block;
  width: var(--p, 0%);
  height: 100%;
  background: linear-gradient(90deg, #95B77E 0%, #6F8E5A 100%);
  border-radius: 999px;
}

/* --- Daily check-in card (Feature 08) --- */
.checkin-card__rows { display: grid; gap: 10px; }
.checkin-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 12px;
  align-items: center;
  padding: 6px 0;
}
.checkin-row__lbl { font-size: 13px; color: var(--ink); font-weight: 500; }
.checkin-row__val { font-size: 12px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.checkin-row__scale {
  display: flex;
  gap: 5px;
}
.checkin-row__scale > span {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: rgba(149, 183, 126, 0.18);
  border: 1px solid rgba(111, 142, 90, 0.22);
}
.checkin-row__scale > span.is-on {
  background: linear-gradient(180deg, #95B77E 0%, #6F8E5A 100%);
  border-color: var(--brand-sage-deep);
}

/* ============================================================
   v5.1 — Mobile pass: tighten image-heavy sections on phones
   ------------------------------------------------------------
   Goal: reduce vertical filler on small screens so the content
   reads more like a feed of useful cards and less like a tall
   image gallery. Desktop layouts unchanged.
   ============================================================ */

/* --- Lifecycle (Capture / Understand / Act / Track) ---
   Above 560px: original 4-up grid with portrait thumbs (unchanged).
   ≤560px: each step becomes a horizontal "media object" — square
   thumb on the left, num+title+body stacked on the right.
   This cuts each card from ~360px tall to ~120px tall, so all
   four shifts now fit in roughly one screen instead of five. */
@media (max-width: 560px) {
  .lifecycle {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .lifecycle__step {
    grid-template-columns: 112px 1fr;
    grid-template-areas:
      "thumb num"
      "thumb title"
      "thumb body";
    column-gap: 16px;
    row-gap: 4px;
    align-items: start;
  }
  .lifecycle__thumb {
    grid-area: thumb;
    aspect-ratio: 1 / 1;
    margin: 0;
    border-radius: 12px;
  }
  .lifecycle__num {
    grid-area: num;
    margin: 0;
    align-self: center;
  }
  /* Image carries the visual on mobile; the icon chip becomes
     duplicative noise and eats height — hide it. */
  .lifecycle__icon { display: none; }
  .lifecycle__title {
    grid-area: title;
    margin-top: 2px;
    font-size: 17px;
  }
  .lifecycle__body {
    grid-area: body;
    max-width: none;
    font-size: 13.5px;
    line-height: 1.5;
  }
  /* The step hover lift makes no sense on touch — disable so cards
     don't jitter when scrolled past. */
  .lifecycle__step:hover { transform: none; }
  .lifecycle__step:hover .lifecycle__thumb { transform: none; }
}

/* --- Inner-page hero-split visual (how-it-works hero, etc.) ---
   The 5/4 mobile portrait was landing ~300px tall on a 375px phone
   — eating most of the above-fold. Reduce to a wider, shorter
   aspect at ≤560px so the headline + subheading have room. */
@media (max-width: 560px) {
  .hero-split__visual {
    aspect-ratio: 16 / 10;
    max-height: 240px;
  }
}

/* --- Lifecycle head-split visual (athlete photo on "Your data,
   working together"). Tighten further on small phones — the
   16/9 + 360px max-height was still ~211px tall, fine on iPad
   but excessive on a 6.1" phone. */
@media (max-width: 560px) {
  .lifecycle__visual {
    aspect-ratio: 16 / 9;
    max-height: 220px;
  }
  /* Shrink the overlay chips a touch to match the smaller frame. */
  .lifecycle__visual-cap {
    top: 12px; left: 12px;
    padding: 5px 9px 5px 7px;
    font-size: 10.5px;
  }
  .lifecycle__visual-stat {
    right: 12px; bottom: 12px;
    padding: 10px 12px;
  }
  .lifecycle__visual-stat-num { font-size: 22px; }
  .lifecycle__visual-stat-lbl { font-size: 10.5px; }
}

/* --- How-it-works deep feature mock cards (Features 01–08) ---
   Trim the chunky padding on phones so the eight visuals don't
   each take 70% of the viewport height. */
@media (max-width: 560px) {
  .device-grid,
  .bio-tiles,
  .ai-chat,
  .goals-card,
  .report-card,
  .nutrition-card,
  .checkin-card {
    padding: 16px;
  }
  /* Tighter spacing inside the feature columns on mobile so the
     copy and visual don't have a yawning gap between them.
     Selector list mirrors the 900px rule above so flipped and
     non-flipped both get the override without !important. */
  .how-feature__grid,
  .how-feature--flipped .how-feature__grid {
    gap: clamp(20px, 4vw, 28px);
  }
}

/* --- Section vertical padding on phones ---
   The clamp() values were tuned for ≥768px and end up generous on
   phones. Pull section padding in so consecutive sections don't
   feel like they're separated by a deep canyon. */
@media (max-width: 560px) {
  .section {
    padding-block: clamp(40px, 8vw, 56px);
  }
  .section--tight {
    padding-block: clamp(32px, 7vw, 48px);
  }
}