@font-face{font-family:Newsreader;src:url('fonts/newsreader-light.ttf') format('truetype');font-weight:300;font-display:swap}
@font-face{font-family:'DM Sans';src:url('fonts/dm-sans-regular.ttf') format('truetype');font-weight:400;font-display:swap}
@font-face{font-family:'DM Sans';src:url('fonts/dm-sans-medium.ttf') format('truetype');font-weight:500;font-display:swap}
/* ==================================================   Tokens. Breakpoints follow the reference: tablet ≥1024, desktop ≥1280.
   ========================================================= */
:root {
  --bg: #f9f8f5;
  --ink: #120c08;
  --muted: #7a746d;
  --sand: #efede7;
  /* Quiet, photo-derived washes: warm neutrals lead; sage adds depth. */
  --section-wash: radial-gradient(ellipse at 12% 28%,rgba(172,187,169,.17),transparent 64%),radial-gradient(ellipse at 88% 72%,rgba(211,199,176,.19),transparent 62%),linear-gradient(155deg,#f8f7f3,#f0f1eb 52%,#f8f6f1);
  --detail-wash: radial-gradient(ellipse at 94% 8%,rgba(166,166,143,.16),transparent 65%),linear-gradient(135deg,#293832,#343e36 58%,#3b4038);
  --serif: "Newsreader", Georgia, serif;   /* stand-in for the reference's light display serif */
  --sans: "DM Sans", system-ui, sans-serif;
  --mono: "DM Sans", system-ui, sans-serif;
  --quint: cubic-bezier(0.22, 1, 0.36, 1);
  --radius-xl: 56px;
}
@media (min-width: 1280px) { :root { --radius-xl: 64px; } }

*, *::before, *::after { box-sizing: border-box; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: var(--sans); font-size: 16px; line-height: 1.45;
  -webkit-font-smoothing: antialiased; overflow-x: clip;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }

/* ---------- Type (fluid between the 1024 and 1440 measurements) ---------- */
.display, .h2, .h3, blockquote { font-family: var(--serif); font-weight: 300; font-optical-sizing: auto; }
.display { font-size: clamp(46px, calc(3vw + 43px), 112px); line-height: .95; letter-spacing: -0.02em; margin: 0; }
.h2 { font-size: clamp(38px, calc(.55vw + 50.4px), 68px); line-height: 1.05; letter-spacing: -0.01em; margin: 0; }
.h3 { font-size: 28px; line-height: 1.1; letter-spacing: -0.007em; margin: 0 0 12px; }
.h4 { font-family: var(--sans); font-weight: 400; font-size: 18px; margin: 0 0 4px; }
em { font-style: italic; }
.body { color: var(--muted); font-size: 16px; margin: 0; }
.mono { font-family: var(--mono); font-size: 11px; letter-spacing: .02em; }
.muted { color: var(--muted); }
.center { text-align: center; }
.white { color: #fff; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  height: 42px; padding: 0 16px; border-radius: 12px; font: 400 14px var(--sans);
  transition: transform .5s var(--quint), opacity .2s;
}
.btn:hover { transform: scale(.97); }
.btn--white { background: #fff; color: var(--ink); }
.btn--dark { background: var(--ink); color: #fff; }

/* ---------- Nav ---------- */
.nav { position: fixed; top: 16px; z-index: 50; display: flex; }
.nav--side { right: 22px; gap: 1px; padding: 0; border-radius: 12px;
  background: rgba(227, 221, 207, .35); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.pill {
  display: flex; align-items: center; height: 44px; padding: 0 14px;
  border-radius: 12px; background: #fff; font-size: 14px; white-space: nowrap;
  transition: background .25s;
}
.pill:hover { background: #f1efea; }
.pill--glass { background: transparent; color: #fff; transition: background .25s, color .3s; }
body.nav-on-light .pill--glass { color: #fff; }
.pill--glass:hover { background: rgba(255,255,255,.35); }
.site-logo { position: fixed; top: 16px; left: 22px; z-index: 50; height: 44px; display: flex; align-items: center; }
.site-logo img { height: 22px; width: auto; }
/* Green version: the logo file used as a mask over a gradient sampled from the hero photo
   (deep foliage -> sage -> shirt teal). Cross-fades in once the hero scrolls away. */
.site-logo__green {
  position: absolute; left: 0; top: 50%; height: 22px; aspect-ratio: 2587 / 400; transform: translateY(-50%);
  background: linear-gradient(100deg, #14361f 0%, #2c5636 40%, #4f7564 75%, #5f8f8f 100%);
  -webkit-mask: url("assets/logo-lockup-white.png") center / contain no-repeat;
          mask: url("assets/logo-lockup-white.png") center / contain no-repeat;
  opacity: 0; transition: opacity .6s var(--quint);
}
.site-logo__white { transition: opacity .6s var(--quint); }
.signup-jump-veil { position:fixed;inset:0;z-index:1000;pointer-events:auto; }


/* Research cards retain their scale and gain a clear section heading. */
.research-beats-shell { background:var(--section-wash);padding:64px 0; }
.research-beats { width:min(1440px,calc(100% - 80px));margin:auto;display:grid;gap:16px;scroll-margin-top:96px; }
.research-heading { padding:0 0 20px; }
.research-heading .h2 { margin:12px 0 0;font-size:clamp(38px,4vw,60px); }
.research-heading .section-label { color:#315d45; }
.research-beat { position:relative;min-width:0;background:#ffffffd9;border:1px solid #fff;border-radius:24px;overflow:hidden; }
.research-beat summary { position:relative;display:flex;align-items:center;gap:24px;min-height:140px;padding:24px 32px 24px 180px;cursor:pointer;list-style:none; }
.research-beat summary::-webkit-details-marker { display:none; }
.research-beat summary:focus-visible { outline:2px solid #315d45;outline-offset:-5px;border-radius:24px; }
.research-beat__thumb { position:absolute;inset:0 auto 0 0;width:148px;height:100%;object-fit:cover; }
.research-beat__summary { display:grid;gap:10px;flex:1;min-width:0; }
.research-beat__title { font:400 clamp(23px,2.3vw,34px)/1.15 var(--serif);color:var(--ink); }
.research-beat__byline { font:400 16px/1.5 var(--sans);color:#647063; }
.research-beat__plus { width:20px;height:20px;position:relative;flex-shrink:0; }
.research-beat__plus::before,.research-beat__plus::after { content:'';position:absolute;background:#315d45;left:0;top:9px;width:20px;height:2px; }
.research-beat__plus::after { transform:rotate(90deg);transition:transform .4s; }
.research-beat[open] .research-beat__plus::after { transform:rotate(0); }
.research-beat__expanded { padding:0 32px 32px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:32px;align-items:center; }
.research-beat .film-scene__media { position:relative;width:100%;height:100%;min-height:340px;max-height:none;border-radius:18px;overflow:hidden; }
.research-beat .film-scene__media video { width:100%;height:100%;object-fit:cover; }
.research-beat__detail { min-width:0; }
.research-beat[open] { min-height:420px;padding-bottom:36px; }
.research-beat[open] summary { margin-left:44%;min-height:0;padding:36px 32px 24px;align-items:flex-start; }
.research-beat[open] .research-beat__thumb { display:none; }
.research-beat[open] .research-beat__expanded { display:block;padding:0 32px 0 calc(44% + 32px); }
.research-beat[open] .film-scene__media { position:absolute;inset:0 auto 0 0;width:44%;height:100%;min-height:0;border-radius:0; }
.research-beat[open] .film-scene__media video { position:absolute;inset:0; }
.research-beat__detail p { font:400 clamp(16px,1.4vw,19px)/1.65 var(--sans);color:#647063;margin:0; }
.context-link { display:inline-block;margin-top:18px;color:#315d45;font:500 15px/1.35 var(--sans);text-decoration:underline;text-underline-offset:5px; }
.context-link:hover { color:var(--ink); }
.context-link:focus-visible { outline:2px solid currentColor;outline-offset:4px;border-radius:2px; }
@media(max-width:639px) {
 .research-beats-shell { padding:40px 0; }
 .research-beats { width:calc(100% - 32px);gap:12px; }
 .research-beat summary { gap:12px;min-height:150px;padding:20px 18px 20px 100px; }
 .research-beat__thumb { width:82px; }
 .research-beat__title { font-size:23px; }
 .research-beat__byline { font-size:14px; }
 .research-beat__expanded { grid-template-columns:minmax(0,1fr);gap:24px;padding:0 20px 24px; }
 .research-beat .film-scene__media { min-height:0;height:240px; }
 .research-beat[open] { min-height:0;padding-bottom:28px; }
 .research-beat[open] summary { margin-left:0;padding:264px 20px 20px; }
 .research-beat[open] .research-beat__expanded { padding:0 20px; }
 .research-beat[open] .film-scene__media { width:100%;height:240px;bottom:auto; }
}
@media(prefers-reduced-motion:reduce) { .research-beat__plus::after { transition:none; } }
body.nav-on-light .site-logo__white { opacity: 0; }
body.nav-on-light .site-logo__green { opacity: 1; }
body.logo-over-signup .site-logo__white { opacity: 1; }
body.logo-over-signup .site-logo__green { opacity: 0; }

/* ---------- Compact wordmark strip, in normal page flow ---------- */
.reveal-layer {
  position: relative; width: 100%; height: clamp(110px,18svh,160px);display:flex;align-items:center;justify-content:center;
  background: linear-gradient(180deg, #ffffff 0%, var(--bg) 30%, #c3eaf4 100%);
  overflow: hidden; pointer-events: none;
}
.reveal-layer__word { width:min(72vw,640px);max-height:110px;object-fit:contain; }

main { position: relative; z-index: 1; background: var(--bg); }

/* ---------- Hero ---------- */
.hero { position: relative; height: 100svh; min-height: 560px; display: flex; justify-content: center; align-items: center; color: #fff; }
.hero__clip {
  position: absolute; inset: 0; overflow: hidden; background: #000;
  clip-path: inset(0px round 0px);
  transition: clip-path 1s var(--quint);
  will-change: clip-path;
}
.hero.is-zoomed .hero__clip { clip-path: inset(16px round 24px); }
.hero__media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero__media--lo { filter: blur(24px); transform: scale(1.1); }          /* hide the placeholder's pixels */
.hero__media--hi { opacity: 0; transition: opacity .9s var(--quint); }
.hero__media--hi.is-loaded { opacity: 1; }
.hero__shade { position: absolute; inset: 0; background: rgba(0,0,0,.2); }
.hero__content { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 0 16px; margin-top: -4svh; }   /* sit at the optical centre, a touch above true centre */
.hero__content h1 { margin-bottom: 20px; }   /* headline + subline read as one statement */
.hero__sub { margin: 0; max-width: 48ch; font-size: clamp(16px, calc(.3vw + 14.5px), 20px); text-wrap: balance; }
.hero__signup { margin-top: 40px; }          /* the action sits apart from the message (2:1 spacing) */
/* Hero CTA: solid white, 12px corners like the nav buttons; label rolls on hover */
.test-btn {
  display: inline-flex; align-items: center; justify-content: center; height: 48px; padding: 0 26px;
  border-radius: 12px; background: #fff; color: var(--ink); font: 500 15px var(--sans); letter-spacing: .005em;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .12);
  transition: background .4s var(--quint), transform .6s var(--quint), box-shadow .6s var(--quint);
}
.test-btn:hover { background: var(--bg); transform: translateY(-1px); box-shadow: 0 14px 32px rgba(0, 0, 0, .18); }
.test-btn:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
/* Email + CTA in one frosted panel (the earlier email box), with the white button inside */
.email-pill {
  display: flex; align-items: center; justify-content: space-between; width: 300px; padding: 6px;
  border-radius: 16px; background: rgba(227, 221, 207, .2);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, .1); transition: border-color .4s var(--quint);
}
.email-pill:focus-within { border-color: rgba(255, 255, 255, .3); }
.email-pill input { flex: 1; min-width: 0; padding: 0 12px; border: 0; outline: 0; background: transparent; color: #fff; font: 400 16px var(--sans); }
.email-pill input::placeholder { color: rgba(255, 255, 255, .85); }
.email-pill .test-btn { flex: none; height: 42px; padding: 0 18px; font-size: 14px; box-shadow: none; cursor: pointer; }
.email-pill .test-btn:hover { transform: none; box-shadow: none; }
.test-btn__label { position: relative; display: block; height: 20px; line-height: 20px; overflow: hidden; }
.test-btn__label > span { display: block; transition: transform .6s var(--quint); }
.test-btn__label::after { content: attr(data-label); position: absolute; left: 0; top: 100%; white-space: nowrap; transition: transform .6s var(--quint); }
.test-btn:hover .test-btn__label > span, .test-btn:hover .test-btn__label::after { transform: translateY(-100%); }

/* ---------- Intro ---------- */
.intro { display: flex; flex-direction: column; align-items: center; padding-top: 100px; margin-bottom: 80px; }
.intro__title { text-wrap: balance; }   /* if it wraps, keep the lines even */
.intro__mark { width: 320px; height: 160px; display: grid; place-items: center; }
.intro__mark svg { width: 128px; height: auto; overflow: visible; }
@media (min-width: 1024px) { .intro { padding-top: 150px; margin-bottom: 60px; } }
@media (min-width: 1280px) { .intro { padding-top: 270px; } }

/* ---------- Feature deck ----------
   Sized like the reference: section height follows the viewport, the card is
   90% of that height, and the copy hangs off the card's own edge. */
.deck { position: relative; height: min(75svh, 700px); margin-bottom: 200px; }
@media (min-width: 1280px) { .deck { height: min(36vw, 500px); margin-bottom: 100px; } }
@media (min-width: 1440px) { .deck { height: min(40vw, 750px); } }
.deck__item {
  position: absolute; left: 0; right: 0; top: 30px; height: 100%;
  display: flex; justify-content: center; align-items: center; pointer-events: none;
}
@media (min-width: 1280px) { .deck__item { top: 0; } }
.deck__frame { position: relative; height: 90%; aspect-ratio: 975 / 614; top: 40px; }
@media (min-width: 1280px) { .deck__frame { aspect-ratio: 1100 / 693; top: 20px; } }
.deck__card {
  position: absolute; inset: 0; border-radius: var(--radius-xl); overflow: hidden; background: var(--bg);
  display: grid; place-items: center; will-change: transform; pointer-events: auto;
}
.deck__media { position: absolute; inset: 0; }
.deck__media img { width: 100%; height: 100%; object-fit: cover; }
.deck__descpos { position: absolute; left: 0; top: -20px; width: 90%; max-width: 500px; transform: translateY(-100%); }
.deck__desc { transform-origin: 0 100%; }
@media (min-width: 1280px) {
  .deck { height: clamp(420px, 38vw, 620px); }
  .deck__frame {
    --copy-width: clamp(260px, 22vw, 320px);
    --copy-gap: clamp(40px, 4vw, 64px);
    width: min(1400px, calc(100vw - 112px));
    height: 90%; aspect-ratio: auto;
  }
  .deck__card { left: calc(var(--copy-width) + var(--copy-gap)); }
  .deck__descpos {
    top: 50%; left: 0; width: var(--copy-width); max-width: none;
    transform: translateY(-50%);
  }
  .deck__item--right .deck__card { left: 0; right: calc(var(--copy-width) + var(--copy-gap)); }
  .deck__item--right .deck__descpos { left: auto; right: 0; transform: translateY(-50%); }
  .deck .h3 { font-size: clamp(25px, 2vw, 32px); line-height: 1.12; }
  .deck .body { font-size: 16px; line-height: 1.55; }
}

/* Slide panel graphics (inside the white box) */
.task-panel__title .panel-tag { margin-left: auto; font-weight: 400; font-size: 10px; }
.pg-stat { display: flex; align-items: baseline; gap: 6px; margin: 2px 2px 4px; }
.pg-num { font-family: var(--serif); font-weight: 300; font-size: 40px; line-height: 1; letter-spacing: -.02em; color: var(--ink); }
.pg-unit { font-family: var(--serif); font-style: italic; font-weight: 300; font-size: 19px; color: var(--ink); }
.pg-cap { margin-left: 4px; font-size: 11.5px; color: var(--muted); }
.pg-chart { display: block; width: 100%; height: auto; margin: 4px 0 2px; overflow: visible; }
.pg-mono { font-family: var(--mono); font-size: 8.5px; fill: var(--muted); }
.pg-serif { font-family: var(--serif); font-style: italic; font-weight: 300; font-size: 13px; fill: #14361f; }
.pg-serif--diff { font-size: 12px; fill: #2c5636; }
.pg-axis { stroke: rgba(18, 12, 8, .12); stroke-width: 1; }
.pg-marker { stroke: rgba(18, 12, 8, .3); stroke-width: 1; stroke-dasharray: 3 3; }
.pg-line { fill: none; stroke-width: 2.4; stroke-linecap: round; }
.pg-line--green { stroke: #2c5636; }
.pg-line--tau { stroke: #7fa596; }
.pg-line--grey { stroke: #b6b0a7; }
.pg-halo { fill: rgba(44, 86, 54, .16); }
.pg-dot { fill: #2c5636; }
.pg-dot--grey { fill: #b6b0a7; }
.pg-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 4px; font-size: 10.5px; color: var(--muted); }
.pg-sw { display: inline-block; width: 12px; height: 3px; border-radius: 2px; margin-right: 6px; vertical-align: middle; }
.pg-sw--green { background: #2c5636; }
.pg-sw--tau { background: #7fa596; }
.pg-sw--grey { background: #b6b0a7; }
.pg-drugs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 4px; }
.pg-drug { padding: 12px 12px 10px; border-radius: 12px; background: #f6f5f1; }
.pg-antibody { width: 18px; height: 18px; display: block; margin-bottom: 8px; }
.pg-antibody path { fill: none; stroke: #2c5636; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.pg-drug__name { font-family: var(--serif); font-weight: 300; font-size: 21px; line-height: 1.05; color: var(--ink); }
.pg-drug__brand { margin-top: 3px; font-size: 9px; letter-spacing: .14em; color: var(--muted); }
.pg-drug__foot { display: flex; align-items: center; gap: 6px; margin-top: 12px; padding-top: 9px; border-top: 1px solid rgba(18, 12, 8, .08); font-size: 10.5px; color: var(--muted); }
.pg-drug__year { margin-left: auto; font-family: var(--serif); font-weight: 300; font-size: 20px; line-height: 1; color: var(--ink); }
.pg-note { margin: 10px 2px 0; font-size: 11px; color: var(--muted); }
.pg-chips { display: flex; flex-wrap: wrap; gap: 5px; margin: 2px 0 2px; }
.pg-chips span { padding: 3px 9px; border-radius: 999px; border: 1px solid rgba(44, 86, 54, .25); color: #2c5636; font-size: 10.5px; background: rgba(44, 86, 54, .04); }
.task-panel { position: relative; width: min(440px, 72%); padding: 14px; border-radius: 18px; background: rgba(255,255,255,.94); box-shadow: 0 10px 40px rgba(0,0,0,.14); font-size: 13px; }
.task-panel__title { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; font-weight: 500; }
.task-panel__title img { width: 22px; }
.task-row { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; background: #f6f5f1; margin-top: 6px; }
.task-row .mono { margin-left: auto; }
.task-row--dim { opacity: .55; }
.dot { width: 8px; height: 8px; border-radius: 50%; background: #c9c4bb; flex: none; }
.dot--amber { background: #e2a33b; }
.spinner { width: 12px; height: 12px; flex: none; border-radius: 50%; border: 1.5px solid #d8d3ca; border-top-color: var(--ink); animation: spin .9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- Stat collage ---------- */
.collage { position: relative; min-height: 100svh; display: flex; justify-content: center; align-items: center; min-width: 0; }
.piece { position: absolute; left: 50%; top: 50%; border-radius: 16px; overflow: hidden; opacity: 0; will-change: transform; }
.piece--img img { position:absolute;inset:0;display:block;width: 100%; height: 100%; object-fit: cover; will-change: transform; }
.piece[data-piece="0"] { width: min(12vw,18svh,180px); aspect-ratio: 236 / 264; }
.piece[data-piece="2"] { width: min(12vw,18svh,180px); aspect-ratio: 273 / 277; }
.piece[data-piece="3"] { width: min(12vw,18svh,180px); aspect-ratio: 238 / 228; }
.piece--card { width: min(19vw,260px); background: #fff; padding: 8px; font-size: clamp(10px, .8vw, 12px); box-shadow: 0 4px 24px rgba(0,0,0,.05); }
.mini__title { display: flex; align-items: center; gap: 6px; margin: 2px 2px 6px; color: var(--muted); }
.mini__title img { width: 17px; }
.mini__row { display: flex; align-items: center; gap: 8px; padding: 7px 9px; border-radius: 8px; background: #f6f5f1; margin-top: 4px; }
.mini__row .mono { margin-left: auto; font-size: .9em; }
.mini__badge { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 5px; background: var(--ink); color: #fff; font-size: 10px; }
.check { width: 12px; height: 12px; border-radius: 50%; background: #2e7d4f; flex: none; position: relative; }
.check::after { content: ""; position: absolute; left: 4px; top: 2px; width: 3px; height: 6px; border: solid #fff; border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); }
.collage__copy { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; text-align: center; pointer-events: none; }
.collage__lines { display: grid; place-items: center; }
.collage__a, .collage__b { grid-area: 1 / 1; }

/* ---------- Trusted ---------- */
.trusted {
  position: relative; z-index: 1; height: 100svh; padding-top: 80px; margin-bottom: 100px;
  display: grid; grid-template-rows: auto minmax(0, 1fr); justify-items: center; overflow: clip;
  background: var(--bg);
}
.trusted__title { width: 80%; }
.trusted__mapwrap { width: 100%; display: flex; justify-content: center; }
.trusted__map { position: relative; width: 100%; max-width: 1023px; aspect-ratio: 1311 / 821; }
@media (min-width: 1280px) { .trusted__map { width: 80%; max-width: 1350px; margin-top: -40px; } }
@media (min-width: 1440px) { .trusted__map { width: 70%; } }
.dotmap { position: absolute; inset: 16px; width: calc(100% - 32px); height: calc(100% - 32px); }
.tcards { position: absolute; left: 50%; top: 50%; width: 0; height: 0; z-index: 2; }
.tcard {
  position: absolute; left: 0; top: 0; margin: 0;
  width: min(59.8vw, 613px); aspect-ratio: 613 / 404;
  display: flex; gap: 24px; padding: 24px; border-radius: 16px; background: #fff;
  transform: translate(-50%, 100vh);
}
@media (min-width: 1280px) { .tcard { width: min(44.3vw, 766px); aspect-ratio: 766 / 505; } }
.tcard__img { flex: 0 0 calc(50% - 12px); border-radius: 16px; overflow: hidden; }
.tcard__img img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.tcard__body { flex: 1; display: flex; flex-direction: column; justify-content: space-between; min-width: 0; }
blockquote { margin: 0; max-width: 90%; font-size: clamp(22px, calc(.6vw + 18px), 30px); line-height: 1.1; }
figcaption { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 16px; }
.tag { background: #f2f0eb; padding: 4px 8px; border-radius: 6px; color: var(--muted); white-space: nowrap; }
.stories-cta {
  position: absolute; left: 50%; bottom: 0; z-index: 10; height: 42px;
  display: flex; gap: 1px; transform: translate(-50%, -100%); opacity: 0; pointer-events: none;
}
.stories-cta__thumb { position: relative; width: 65px; height: 100%; border-radius: 12px; overflow: hidden; transition: width .4s var(--quint); }
.stories-cta:hover .stories-cta__thumb { width: 85px; }
.stories-cta__thumb img { width: 100%; height: 100%; object-fit: cover; }
.stories-cta__thumb svg { position: absolute; left: 50%; top: 50%; width: 24px; height: 24px; transform: translate(-50%, -50%); }
.stories-cta__btn { display: flex; align-items: center; height: 100%; padding: 0 16px; border-radius: 12px; background: var(--ink); color: #fff; font-size: 14px; white-space: nowrap; }

/* ---------- How it works ---------- */
.how { padding: 160px 24px 40px; }
@media (min-width: 1280px) { .how { padding: 200px 32px 40px; } }
.how__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 56px; }
@media (min-width: 1280px) { .how__grid { gap: 24px; } }
.how__col { padding-right: 16px; }
.how__card {
  aspect-ratio: 1; border-radius: 16px; background: var(--sand); margin: 0 -16px 24px 0;
  display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 10px; padding: 12%;
}
/* Blurred photography sits behind the sharp frosted information rows. */
.how__col { padding-right: 0; }
.how__card {
  --process-radius: 16px;
  position: relative; isolation: isolate; overflow: hidden; margin-right: 0;
  border-radius: var(--process-radius);
  clip-path: inset(0 round var(--process-radius));
  background: #496044;
  border: 1px solid rgba(255,255,255,.45);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.5);
}
.how__card::before {
  content: ""; position: absolute; inset: -18px; z-index: 0;
  pointer-events: none;
  background: url("assets/process-garden-wide.jpg") center 48% / cover no-repeat;
  filter: blur(6px) brightness(.86);
}
.how__col:nth-child(2) .how__card::before {
  background-image: url("assets/process-garden-flowers.jpg");
  background-position: center 48%;
}
.how__col:nth-child(3) .how__card::before {
  background-image: url("assets/process-garden-harvest.jpg");
  background-position: center 42%;
}
.how__card .ui-card {
  position: relative; z-index: 1; padding: 11px 14px;
  background: rgba(249,248,245,.78); border: 1px solid rgba(255,255,255,.65);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 6px 22px rgba(18,48,38,.08); font-size: clamp(12px,1vw,15px);
}
@media (min-width: 1280px) { .how__card { --process-radius: 32px; } }
.ui-card { width: 100%; background: #fff; border-radius: 10px; padding: 8px 10px; font-size: 11px; box-shadow: 0 2px 8px rgba(0,0,0,.04); }
.ui-line { display: flex; align-items: center; gap: 8px; padding: 4px 0; }
.ui-line .mono { margin-left: auto; }
.ui-chip { font-size: 10px; color: #2b6fd6; background: #e7eefb; padding: 3px 8px; border-radius: 6px; }
.ui-pill { margin-left: auto; font-size: 10px; color: #2e7d4f; background: #e3f1e8; padding: 2px 6px; border-radius: 6px; }

/* ---------- FAQ ---------- */
.faq { padding: 160px 16px 100px; }
.faq__list { width: min(100%, clamp(320px, 47.2vw, 680px)); margin: 48px auto 0; display: grid; gap: 8px; }
.faq__item { background: #fff; border-radius: 16px; border: 2px solid transparent; transition: border-color .3s; }
.faq__item:hover { border-color: rgba(18,12,8,.06); }
.faq__q { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 24px; text-align: left; font-size: 16px; }
.faq__q i { width: 8px; height: 8px; flex: none; border: solid var(--ink); border-width: 0 1.3px 1.3px 0; transform: rotate(45deg) translateY(-3px); transition: transform .6s var(--quint); }
.faq__item.open .faq__q i { transform: rotate(-135deg) translateY(-3px); }
.faq__a { height: 0; overflow: hidden; transition: height .6s var(--quint); }
.faq__a p { margin: 0; padding: 0 24px 24px; color: var(--muted); font-size: 16px; }

/* ---------- CTA ---------- */
.cta { padding: 16px; }
.cta__card { position: relative; height: calc(100svh - 32px); max-height: 900px; min-height: 520px; border-radius: var(--radius-xl); overflow: hidden; display: grid; place-items: center; }
.cta__card > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cta__content { position: relative; display: flex; flex-direction: column; align-items: center; gap: 32px; text-align: center; }
.cta__mark { width: 120px; }

/* ---------- Footer ---------- */
.footer {
  position: relative; z-index: 1; background: #fff; margin-bottom: 0;
  border-radius: 0 0 32px 32px; padding: 72px 24px 32px;
}
.footer__top { display: flex; justify-content: space-between; gap: 40px; flex-wrap: wrap; }
.footer__top .btn { margin-top: 28px; }
.footer__top .h2 { font-size:clamp(32px,3.2vw,48px); }
.footer__cols { display: grid; grid-template-columns: repeat(3, auto); gap: 64px; font-size: 13px; }
.footer__cols h5 { margin: 0 0 12px; font: 400 13px var(--sans); color: var(--muted); }
.footer__cols a { display: block; margin-bottom: 6px; }
.footer__cols a:hover { opacity: .6; }
.footer__bottom { display: flex; flex-direction: column; align-items: center; gap: 12px; margin-top: 48px; }
.footer__bottom img { width: 56px; }
.footer__bottom p { margin: 0; color: var(--muted); }

/* ---------- Below tablet: no pinning, plain stacked layout ---------- */
@media (max-width: 1023px) {
  .site-logo { left: 16px; }
  .nav--side { right: 16px; }
  .deck { height: auto; display: grid; gap: 72px; padding: 0 16px; margin-bottom: 100px; }
  .deck__item { position: relative; top: auto; height: auto; display: block; pointer-events: auto; }
  .deck__frame { height: auto; aspect-ratio: auto; top: 0; }
  .deck__descpos { position: static; width: auto; max-width: none; transform: none; margin-bottom: 16px; }
  .deck__card { position: relative; inset: auto; aspect-ratio: 4 / 5; border-radius: 28px; }
  .collage { min-height: 0; padding: 120px 16px; flex-direction: column; gap: 24px; }
  .piece { display: none; }
  .collage__lines { gap: 80px; }
  .collage__a, .collage__b { grid-area: auto; }
  .trusted { height: auto; overflow: visible; padding-bottom: 40px; display: flex; flex-direction: column; align-items: center; }
  .trusted__map { margin: 32px 0; }
  .tcards { position: relative; left: auto; top: auto; width: 100%; height: auto; display: grid; gap: 16px; padding: 0 16px; }
  .tcard { position: relative; transform: none; width: 100%; aspect-ratio: auto; flex-direction: column; }
  .tcard__img { flex: none; height: 300px; }
  .stories-cta { position: relative; left: auto; bottom: auto; transform: none; opacity: 1; pointer-events: auto; margin-top: 24px; }
  .how__grid { grid-template-columns: 1fr; }
  .footer__cols { grid-template-columns: repeat(2, auto); gap: 32px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* Small phones: the logo already links home, so drop "Home" to keep the nav clear of it */
@media (max-width: 639px) {
  .deck .task-panel { width: 88%; padding: 12px; }
  .pg-drug { padding: 10px 10px 9px; }
  .pg-drug__name { font-size: 17px; }
  .pg-drug__year { font-size: 16px; }
  .pg-drug__foot { gap: 4px; font-size: 9.5px; }
  .pill--home { display: none; }
  .pill { padding: 0 11px; font-size: 13px; }
}

/* Current patient content, within the original animated layout. */
input,select,textarea,code,pre,kbd,samp{font-family:var(--sans)}
.skip{position:fixed;top:-100px;left:16px;z-index:10001;background:var(--bg);padding:12px}.skip:focus{top:12px}
a:focus-visible,summary:focus-visible,button:focus-visible{outline:2px solid #658469;outline-offset:5px}
.hero__note{font-size:13px;margin:18px 0 0;color:#fff}.hero__shade{background:rgba(0,0,0,.3)}
.task-panel{background:rgba(249,248,245,.9);backdrop-filter:blur(16px)}
.task-panel p{color:#545c50;margin:8px 0 14px}.task-row{font-size:13px}
.collage__a,.collage__b{font-size:clamp(34px,4vw,62px)}
.visit-card-copy{font-size:clamp(16px,1.5vw,21px);line-height:1.5;margin:12px 0;max-width:30ch}.tcard .tag{align-self:flex-start;white-space:normal;font-size:12px}
.tcard__body .h3{font-size:clamp(26px,2.8vw,40px)}
.research-source{max-width:760px;margin:80px auto 0;color:#53594f;line-height:1.65;text-align:center}.research-source a{display:block;margin-top:18px;text-decoration:underline;text-underline-offset:4px;font-size:14px}
.faq__q{list-style:none;cursor:pointer;font-weight:500}.faq__q::-webkit-details-marker{display:none}.faq__item .faq__a{height:auto;overflow:visible}.faq__item[open] .faq__q i{transform:rotate(-135deg)}.faq__a p{color:#50584c;line-height:1.65}.faq__a a{text-decoration:underline;text-underline-offset:3px}
.cta__card:after{content:'';position:absolute;inset:0;background:#001c1655}.cta__content{z-index:1;padding:24px}.cta__note{color:white;max-width:44ch;line-height:1.6;margin:0}.footer__bottom{text-align:center}.footer__cols button{text-align:left}
.static-motion .deck{height:auto;display:grid;gap:64px;padding:40px 24px;margin-bottom:80px}.static-motion .deck__item{position:relative;top:auto;height:auto;display:block}.static-motion .deck__frame{height:auto;aspect-ratio:auto;top:0;max-width:900px;margin:auto}.static-motion .deck__descpos{position:static;width:auto;max-width:none;transform:none;margin-bottom:20px}.static-motion .deck__card{position:relative;aspect-ratio:16/10}.static-motion .piece{display:none}.static-motion .collage{min-height:0;padding:80px 24px}.static-motion .collage__lines{gap:50px}.static-motion .collage__a,.static-motion .collage__b{grid-area:auto}.static-motion .trusted{height:auto;display:block;padding:50px 24px;overflow:visible}.static-motion .trusted__title{margin:auto}.static-motion .trusted__mapwrap{display:none}.static-motion .tcards{position:static;width:100%;height:auto;display:grid;gap:24px;margin-top:50px}.static-motion .tcard{position:relative;transform:none;left:auto;top:auto;width:min(800px,100%);margin:auto}.static-motion .stories-cta{position:relative;left:auto;transform:none;opacity:1;pointer-events:auto;justify-content:center;margin-top:24px}.static-motion .site-logo__white{opacity:0}.static-motion .site-logo__green{opacity:1}
@media(max-width:639px){.h2{font-size:40px}.site-logo{width:110px}.nav--side{top:20px;gap:4px}.pill{font-size:12px;padding:0 9px}.hero__content{padding:70px 24px 20px}.footer__cols{gap:24px}.task-panel{width:88%}.trusted__title{width:90%}.how,.faq{padding-top:80px}.tcard__body{gap:12px}}

/* A direct patient path alongside the original animated storytelling. */
.journey,.questionnaire{position:relative;max-width:1280px;margin:auto;padding:120px 48px;scroll-margin-top:90px}.section-label{font:500 12px/1.5 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:#325744;margin:0 0 24px}.journey__heading{max-width:800px;margin-bottom:56px}.journey__intro{max-width:60ch;color:#50584c;line-height:1.7;margin:28px 0}.journey__steps{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}.journey__steps li{padding:28px;border-radius:24px;background:linear-gradient(135deg,#e2e8de,#f4f1e8);box-shadow:inset 0 1px 0 #fff,0 12px 36px #163f2410}.step-number{font:500 13px/1 var(--sans);display:inline-block;color:#325744;margin-bottom:26px}.journey h3,.questionnaire h3{font:500 20px/1.3 var(--sans);margin:0 0 14px}.journey__steps p,.questionnaire p,.questionnaire li{font-size:16px;line-height:1.7;color:#50584c}.journey__steps a{font-size:14px;text-decoration:underline;text-underline-offset:4px}.questionnaire{display:grid;grid-template-columns:1fr 1.15fr;gap:64px}.questionnaire__copy>p:not(.section-label){margin:28px 0}.questionnaire__status{font-size:14px!important}.questionnaire__card{background:linear-gradient(135deg,#dfe9df,#eeeadf);padding:40px;border-radius:32px;box-shadow:inset 0 1px #fff,0 16px 40px #14361f10}.questionnaire__card ul{padding-left:20px;margin:24px 0}.questionnaire__card li{padding:6px 0}.questionnaire__note{padding:24px;border-radius:20px;background:#ffffff70}.questionnaire__note p{margin-bottom:0;font-size:14px}.journey .btn,.questionnaire .btn{height:auto;min-height:44px;padding:12px 18px}
@media(max-width:950px){.journey__steps{grid-template-columns:repeat(2,minmax(0,1fr))}.questionnaire{gap:32px}}
@media(max-width:639px){.journey,.questionnaire{padding:72px 20px}.journey__steps,.questionnaire{grid-template-columns:1fr}.journey__steps li{padding:24px}.questionnaire__card{padding:26px}.nav--side .pill{font-size:11px;padding:0 7px}.site-logo{width:100px}}

@media(max-width:639px){.nav--side{display:flex;flex-wrap:wrap;justify-content:flex-end;max-width:190px}.nav--side .pill--take-test{order:3;flex-basis:100%;text-align:center;justify-content:center}.hero__content{padding-top:110px}}

.signup{scroll-margin-top:90px}.signup-form fieldset{border:0;padding:0;margin:0;min-width:0}.signup-form legend{font:500 22px/1.3 var(--sans);padding:0;margin-bottom:24px}.signup-form label{display:block;font:400 14px/1.5 var(--sans);margin:0 0 18px}.signup-form input,.signup-form select{display:block;width:100%;min-height:46px;margin-top:7px;border:1px solid #ffffffa0;border-radius:12px;background:#ffffff80;color:#263f30;font:400 16px/1.5 var(--sans);padding:10px 14px}.signup-form input:disabled,.signup-form select:disabled{opacity:1;-webkit-text-fill-color:#526056;cursor:not-allowed}.signup-form button:disabled{opacity:.55;cursor:not-allowed}.signup-form .signup-note,.signup-form>a{font-size:13px;line-height:1.65}.signup-form>a{text-decoration:underline;text-underline-offset:3px}
/* Centered conversational sign-up, one question at a time. */
.conversational-signup{display:grid;place-items:center;min-height:90svh;padding:110px 24px;max-width:none;background:radial-gradient(ellipse at 80% 20%,#dbe6dc80,transparent 55%),var(--bg);scroll-margin-top:0}.signup-shell{width:min(100%,740px);text-align:center}.signup-shell>.h2{font-size:clamp(36px,4vw,52px)}.signup-preview{font:400 13px/1.6 var(--sans);color:#596356;margin:22px 0 36px}.signup-progress{max-width:300px;margin:0 auto 38px;color:#52634f;font:400 12px/1.5 var(--sans)}.signup-progress progress{display:block;appearance:none;width:100%;height:4px;border:0;border-radius:10px;overflow:hidden;margin-top:12px;background:#dae0d5}.signup-progress progress::-webkit-progress-bar{background:#dae0d5}.signup-progress progress::-webkit-progress-value{background:#315d45;transition:width .3s}.signup-progress progress::-moz-progress-bar{background:#315d45}#signup-stage{min-height:220px}#signup-stage h3{font:300 clamp(30px,4vw,48px)/1.15 var(--serif);margin:0 0 22px;outline:none}#signup-stage p{font:400 16px/1.7 var(--sans);color:#52604e;max-width:58ch;margin:0 auto 24px}#signup-answer{display:block;width:100%;max-width:560px;margin:32px auto 0;text-align:center;font:400 clamp(23px,3vw,32px)/1.5 var(--sans);padding:16px 12px;color:#14361f;background:#ffffff60;border:0;border-bottom:2px solid #7c9480;border-radius:14px 14px 0 0}#signup-answer:focus{outline:2px solid #315d45;outline-offset:5px}.signup-choices{display:flex;justify-content:center;gap:16px;flex-wrap:wrap;margin:36px 0}.signup-choices button{min-width:190px;padding:22px 30px;font:400 20px/1.4 var(--sans);background:linear-gradient(130deg,#e0e9df,#f5f0e5);border:1px solid #fff;border-radius:20px;box-shadow:0 8px 24px #14361f0d;transition:transform .2s,box-shadow .2s}.signup-choices button:hover{transform:translateY(-3px);box-shadow:0 12px 28px #14361f20}.signup-choices button[aria-pressed=true]{box-shadow:inset 0 0 0 2px #315d45}.signup-controls{display:flex;justify-content:center;align-items:center;gap:24px;margin-top:20px}.signup-controls [hidden],.signup-keyboard[hidden]{display:none!important}.signup-controls .btn{min-width:120px;min-height:48px;background:#214c39}.signup-keyboard,.signup-privacy{font:400 12px/1.6 var(--sans);color:#61705b}.signup-privacy{display:inline-block;margin-top:24px;text-decoration:underline;text-underline-offset:4px}#signup-error{min-height:24px;color:#963c32;font:400 14px/1.5 var(--sans);margin:10px 0}.signup-restart{display:block;margin:24px auto 0;text-decoration:underline;font:400 14px/1.5 var(--sans)}@media(max-width:639px){.conversational-signup{padding:110px 20px 70px}.signup-choices{flex-direction:column}.signup-choices button{width:100%}#signup-stage{min-height:200px}.signup-preview{margin-bottom:24px}}
/* Compact dot visor; no visible controls or decorative stimuli. */
.trusted__map{width:94%;max-width:1160px;aspect-ratio:2.3;align-self:flex-start;margin-top:30px}
.dotmap{inset:0;width:100%;height:100%}
.static-motion .trusted__mapwrap{display:flex}.static-motion .trusted__map{margin:30px 0 0}
@media(max-width:639px){.trusted,.static-motion .trusted{padding-top:140px}.trusted__map{width:100%;aspect-ratio:2;margin-top:40px}.static-motion .trusted__map{margin-top:40px}}

/* The closing photo mirrors the opening hero, with the nav's warm glass frosting. */
.signup-bookend .cta__card{height:auto;max-height:none;min-height:calc(100svh - 32px);padding:70px 24px;scroll-margin-top:80px;border-radius:16px}
.signup-bookend .cta__card:after{background:linear-gradient(180deg,#05251b55,#05251b88)}
.signup-bookend .cta__content{width:100%;padding:0;gap:28px}
.signup-bookend__heading{color:white}.signup-bookend__heading .h2{font-size:clamp(26px,5vw,68px);line-height:1.05;margin:0;white-space:nowrap;font-style:normal}
@media(min-width:640px) and (min-height:700px){.signup-bookend__heading{position:absolute;bottom:calc(100% + 32px);left:0;width:100%}.signup-bookend .cta__card{padding-top:150px;padding-bottom:150px}}
.signup-bookend .signup-shell{width:min(100%,640px);padding:28px 36px;border-radius:24px;background:rgba(227,221,207,.35);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid #ffffff45;box-shadow:0 16px 48px #001c1620;color:white}
.signup-bookend .signup-request-note{color:#fff;font:400 15px/1.5 var(--sans);max-width:48ch;margin:0 auto 24px;}
.signup-bookend__heading .h2{white-space:normal;text-wrap:balance;}
.signup-bookend .signup-preview{color:#fff;margin:0 0 20px;font-size:12px}.signup-bookend .signup-progress{color:white;margin-bottom:24px}.signup-bookend .signup-progress progress{background:#ffffff38}.signup-bookend progress::-webkit-progress-bar{background:#ffffff38}.signup-bookend progress::-webkit-progress-value{background:#fff}.signup-bookend progress::-moz-progress-bar{background:#fff}
.signup-bookend #signup-stage{min-height:140px}.signup-bookend #signup-stage h3{font-size:clamp(30px,3.5vw,42px);color:white;margin-bottom:16px}.signup-bookend #signup-stage p{color:#fff;font-size:15px;margin-bottom:16px}
.signup-bookend .signup-choices{margin:24px 0 0;gap:12px}.signup-bookend .signup-choices button{min-width:0;flex:1;padding:16px 20px;font-size:18px;background:#ffffffdf;color:#17392b;border-radius:12px;border:0}.signup-bookend .signup-choices button:hover{background:#fff}
.signup-bookend #signup-answer{margin-top:20px;background:#ffffffed;border:0;border-radius:12px;padding:12px;font-size:24px}.signup-bookend #signup-answer:focus{outline-color:white;outline-offset:3px}
.signup-bookend #signup-error{color:#fff3cc;margin:8px 0;min-height:20px}.signup-bookend .signup-controls{margin-top:8px}.signup-bookend #signup-back{color:white}.signup-bookend .signup-controls .btn{background:#fff;color:#17392b;border-radius:12px}.signup-bookend .signup-keyboard,.signup-bookend .signup-privacy{color:#fff}.signup-bookend .signup-keyboard{margin:12px 0 0}.signup-bookend .signup-privacy{margin-top:12px}.signup-bookend .signup-restart{color:white}
@media(max-width:639px){.signup-bookend{padding:8px}.signup-bookend .cta__card{padding:120px 16px 52px;scroll-margin-top:0;min-height:100svh}.signup-bookend .signup-shell{padding:24px 20px}.signup-bookend .signup-choices{flex-direction:column}.signup-bookend .cta__content{gap:24px}.signup-bookend #signup-stage{min-height:155px}.signup-bookend .cta__card>img{object-position:55% center}}

.waitlist-consent{display:flex;align-items:flex-start;gap:12px;text-align:left;font:400 15px/1.6 var(--sans);color:white;margin-top:24px}.waitlist-consent input{width:20px;height:20px;flex-shrink:0;margin-top:3px;accent-color:#214c39}.waitlist-trap{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}.signup-controls button:disabled{opacity:.65;cursor:wait}

/* Avoid stacking the journey padding with the old oversized logo intro gap. */
.journey{padding-bottom:48px}.intro{padding-top:24px}.intro__mark{height:128px}

/* Keep the subjects visible in the supplied portrait photographs. */
.tcard__img img.photo-conversation{object-position:50% 72%}
.piece[data-piece="0"] img{object-position:50% 65%}
.piece[data-piece="3"] img{object-position:50% 40%}
.stories-cta__thumb img{object-position:50% 60%}

/* Keep the non-animated fallback stacked at every viewport width. */
.static-motion .deck .deck__card { left: 0; right: 0; }

/* Homepage research story: shared typography, photography and frosted surfaces. */
.story-wrap { width: min(1360px, calc(100% - 64px)); margin: 0 auto; padding: 100px 0; }
.story-heading { max-width: 940px; margin-bottom: 48px; }
.story-heading .h2 { margin: 18px 0 26px; }
.story-heading em { font-weight: inherit; }
.story-lead { font-size: clamp(20px, 2vw, 28px); line-height: 1.45; max-width: 760px; }
.story-source { display: inline-block; font-size: 13px; line-height: 1.55; color: #365a48; margin: 16px 14px 0 0; text-underline-offset: 4px; }
.collage__copy { max-width: calc(100% - 40px); }
.collage__copy .story-source { pointer-events: auto; background: rgba(249,248,245,.9); border-radius: 12px; padding: 5px 12px; scale: var(--source-scale, 1); transform-origin: center top; }
.collage__pct { font-size: clamp(76px, 11vw, 160px); }
.stat-prefix { font-size: .48em; }
.collage__a,.collage__b { font-size: clamp(32px, 4vw, 62px); }
.story-treatment__grid { display:grid; grid-template-columns: 1fr 1fr; gap: clamp(32px,6vw,90px); align-items:center; }
.story-treatment__photo { min-height: 520px; position:relative; border-radius: 40px; overflow:hidden; }
.story-treatment__photo > img { width:100%; height:100%; position:absolute; inset:0; object-fit:cover; object-position:center 65%; }
.story-frost { position:absolute; bottom:28px; left:28px; right:28px; padding:28px; border-radius:24px; color:white; background:rgba(30,47,32,.3); border:1px solid rgba(255,255,255,.35); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); }
.story-frost h3,.story-product__image figcaption { font-family:var(--serif, 'Newsreader',serif); font-weight:300; font-size:clamp(28px,3vw,44px); line-height:1.12; margin:0; }
.story-prose > p:not(.story-lead) { font-size:17px; line-height:1.65; color:#555e51; margin-top:24px; }
.story-timeline { display:grid; grid-template-columns:repeat(3,1fr); gap:40px; margin-top:70px; }
.story-timeline article { border-top:2px solid #638773; padding-top:22px; }
.story-timeline span { font-size:13px; color:#42634e; }
.story-timeline h3 { font-family:var(--serif, 'Newsreader',serif); font-weight:300; font-size:30px; line-height:1.15; margin:18px 0; }
.story-timeline p,.story-caption { font-size:15px; line-height:1.6; color:#555e51; }
.deck__desc .story-source { pointer-events:auto; }
.panel-evidence { margin:16px 0 0; color:#555e51; line-height:1.5; }
.story-product { padding-top:80px; }
.story-product__image { position:relative; margin:0; border-radius:48px; overflow:hidden; height: min(70vw,700px); }
.story-product__image > img { width:100%;height:100%;object-fit:cover;object-position:center 45%; }
.story-product__image .story-frost { right:auto; max-width:calc(100% - 56px); }
.story-product__facts { display:flex; flex-wrap:wrap; gap:16px; margin:28px 0 18px; }
.story-product__facts span { border-radius:99px; background:#e8ebe1; color:#264e39; padding:12px 20px; font-size:15px; }
.story-caption { max-width:760px; }
@media(max-width:767px) {
 .story-wrap { width:calc(100% - 40px); padding:64px 0; }
 .story-treatment__grid,.story-timeline { grid-template-columns:1fr;gap:32px; }
 .story-treatment__photo { min-height:440px;border-radius:28px; }
 .story-frost { bottom:18px;left:18px;right:18px;padding:22px; }
 .story-timeline { margin-top:40px; }
 .story-product__image { height:440px;border-radius:28px; }
 .story-product__image .story-frost { max-width:calc(100% - 36px); }
 .story-product__facts { gap:8px; }
 .story-product__facts span { font-size:13px;padding:10px 14px; }
 .collage__copy .story-source { font-size:11px; }
}
.research-credits { padding:68px 0 72px; }
.research-credits > div { display:flex; flex-wrap:wrap; gap:36px 72px; margin:26px 0; }
.research-credits a { font-family:var(--serif); font-size:26px; line-height:1.2; color:#244634; text-decoration:none; }
.research-credits a span { display:block; font-family:var(--sans); font-size:13px; margin-top:10px; }
.story-clinic { margin:22px 0; font-size:16px; color:#365a48; }

/* Treatment cards scroll in normal flow with visible space between them. */
.treatment-stack { display:grid; gap:48px; padding-bottom:32px; }
.treatment-card { position:relative; min-height:540px; height:calc(100svh - 160px); max-height:720px; display:grid; place-items:center; isolation:isolate; border-radius:48px; overflow:hidden; padding:48px; box-shadow:0 12px 40px #173c2210; }
.treatment-card__photo { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-1; }
.treatment-card__copy { width:min(680px,100%); padding:clamp(28px,4vw,56px); border-radius:28px; background:rgba(244,245,237,.9); border:1px solid #ffffff65; backdrop-filter:blur(16px); }
.treatment-card h3 { font:300 clamp(34px,3.7vw,56px)/1.05 var(--serif); letter-spacing:-.025em; margin:20px 0; }
.treatment-card p { font:400 clamp(17px,1.5vw,21px)/1.5 var(--sans); color:#394a40; margin:0 0 20px; }
.treatment-card p.treatment-card__note { font-size:15px; margin-bottom:0; }
@media(max-width:767px) {
 .treatment-stack { gap:24px; }
 .treatment-card { height:auto; min-height:480px; padding:20px; border-radius:28px; }
 .treatment-card__copy { padding:26px 22px; border-radius:22px; }
 .treatment-card h3 { font-size:36px; }
}

/* A fixed reading area; flat cards slide vertically with a 48px gap. */
@media(min-width:1024px) {
 .scroll-cards { position:relative; height:min(76svh,720px); overflow:hidden; overflow:clip; }
 .treatment-stack.scroll-cards { display:block; padding:0; }
 .scroll-cards > .treatment-card { position:absolute; inset:24px 0; height:auto; min-height:0; max-height:none; margin:0; }
 .deck.scroll-cards { height:min(80svh,760px); margin-bottom:100px; }
 .deck.scroll-cards .deck__item { top:24px; bottom:24px; height:auto; }
 .deck.scroll-cards .deck__frame { top:0; height:100%; width:calc(100% - 80px); max-width:1400px; aspect-ratio:auto; }
 .deck.scroll-cards .deck__card { left:34%;right:0; }
 .deck.scroll-cards .deck__descpos { left:0;right:auto;top:50%;width:29%;max-width:none;transform:translateY(-50%); }
 .deck.scroll-cards .deck__desc { opacity:1;visibility:visible; }
}

/* Research logos and clinician-led follow-up routes. */
.research-credits .logo-strip-heading { display:none; }
.logo-pause { display:none; }
.research-credits .logo-marquee { display:block;overflow:hidden;margin:14px 0 0;padding-top:26px;border-top:1px solid rgba(42,77,57,.14);mask-image:linear-gradient(to right,transparent,#000 3%,#000 97%,transparent); }
.research-credits .logo-track { display:flex;width:max-content;gap:0;animation:research-logos 45s linear infinite; }
.research-credits .logo-group { display:flex;align-items:center;gap:24px;padding-right:24px;flex-shrink:0; }
.research-credits .research-logo { display:block;position:relative;width:208px;height:92px;overflow:visible;background:none;border:0;box-shadow:none;flex:none; }
.research-logo img { display:block;position:absolute;width:300px;max-width:none;height:auto;left:50%;top:50%;transform:translate(-50%,-50%);mix-blend-mode:multiply;filter:grayscale(1) sepia(.28) saturate(.52) hue-rotate(104deg) opacity(.6); }
@keyframes research-logos { to { transform:translateX(-50%); } }
.research-links,.research-credits .story-caption { display:none; }
.journey-timeline { position:relative;margin:44px calc(50% - 50vw) 0;padding:20px max(24px,calc((100vw - min(1200px,92vw))/2));overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:thin; }
.journey-timeline::before { content:'';position:absolute;left:max(24px,calc((100vw - min(1200px,92vw))/2));right:max(24px,calc((100vw - min(1200px,92vw))/2));top:84px;height:1px;background:linear-gradient(90deg,transparent,#769886 7%,#769886 93%,transparent); }
.journey-timeline__track { list-style:none;display:flex;width:max-content;gap:24px;margin:0;padding:0 0 18px; }
.journey-step { position:relative;z-index:1;width:clamp(268px,25vw,336px);min-height:356px;padding:90px 28px 28px;background:linear-gradient(145deg,rgba(255,255,255,.58),rgba(231,237,227,.36));border:1px solid rgba(255,255,255,.78);border-radius:26px;box-shadow:inset 0 1px rgba(255,255,255,.82),0 16px 40px rgba(23,54,38,.08);backdrop-filter:blur(20px) saturate(108%);-webkit-backdrop-filter:blur(20px) saturate(108%);scroll-snap-align:start; }
.journey-step__number { position:absolute;top:38px;left:28px;display:grid;place-items:center;width:52px;height:52px;border-radius:50%;background:linear-gradient(135deg,#14361f,#5f8f8f);color:#fff;font:500 13px var(--sans);letter-spacing:.08em;box-shadow:0 0 0 8px rgba(248,247,242,.86); }
.journey-step__eyebrow { margin:0 0 18px;font:600 11px/1.2 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:#47715d; }
.journey-step h3 { margin:0 0 16px;font:300 clamp(28px,2.4vw,39px)/1.05 var(--serif);letter-spacing:-.025em;color:#17241e; }
.journey-step > p:last-of-type { margin:0;color:#3f4d45;font:400 16px/1.55 var(--sans); }
.journey-step--return { background:linear-gradient(145deg,rgba(207,226,216,.72),rgba(255,255,255,.54)); }
.journey-routes { display:grid;gap:7px;list-style:none;margin:20px 0 0;padding:0; }
.journey-routes li { padding:8px 10px;border-left:2px solid #5f8f8f;color:#244634;font:500 13px/1.25 var(--sans);background:rgba(255,255,255,.28); }
.journey-note { margin:18px 0 0;color:var(--muted);font:400 13px/1.5 var(--sans); }
@media(max-width:767px) { .journey-timeline { margin-top:28px;padding-left:24px;padding-right:24px; } .journey-timeline::before { left:24px;right:24px;top:76px; } .journey-timeline__track { gap:16px; } .journey-step { width:min(82vw,330px);min-height:336px;padding:80px 23px 24px; } .journey-step__number { top:31px;left:23px;width:48px;height:48px; } .journey-step h3 { font-size:31px; } }
.outcomes-intro { max-width:650px;text-align:center;margin:24px auto 40px;font:400 20px/1.5 var(--sans);color:var(--muted); }
.outcomes .how__card { min-height:400px;aspect-ratio:auto;padding:32px;display:flex;align-items:center;justify-content:center; }
.tier-panel { position:relative;z-index:1;width:100%;padding:28px;background:rgba(247,247,238,.9);border:1px solid #ffffff80;border-radius:24px;backdrop-filter:blur(12px); }
.tier-panel h3 { font:300 clamp(30px,3vw,46px)/1.08 var(--serif);margin:22px 0;letter-spacing:-.025em; }
.tier-panel p { font:400 17px/1.5 var(--sans);color:#394a40;margin:0; }
.outcomes-note { max-width:780px;text-align:center;margin:32px auto 16px;font:400 15px/1.6 var(--sans);color:var(--muted); }
.outcomes-link { display:block;text-align:center;text-decoration:underline;text-underline-offset:4px; }
@media(max-width:767px) { .outcomes .how__card { min-height:330px;padding:24px; } .tier-panel h3 { font-size:38px; } .logo-strip-heading .section-label { max-width:210px; } }
@media(prefers-reduced-motion:reduce) { .research-credits .logo-track { animation:none; } .research-credits .logo-marquee { overflow-x:auto; } .logo-group[aria-hidden] { display:none; } .logo-pause { display:none; } }

/* Three connected sections form one follow-up spectrum. */
.outcomes .followup-spectrum { gap:0;border-radius:32px;overflow:hidden;border:1px solid #cbd3c6;background:#e6eadd;position:relative; }
.outcomes .followup-spectrum .how__col { min-width:0; }
.outcomes .followup-spectrum .how__col + .how__col { border-left:1px solid #bcc8ba; }
.outcomes .followup-spectrum .how__card { border-radius:0;clip-path:none;min-height:330px;height:100%;padding:40px 32px;align-items:flex-start;justify-content:flex-start;background:transparent; }
.outcomes .followup-spectrum .how__card::before { display:none; }
.outcomes .followup-spectrum .how__col:nth-child(1) { background:#edf0e5; }
.outcomes .followup-spectrum .how__col:nth-child(2) { background:#dce6d7; }
.outcomes .followup-spectrum .how__col:nth-child(3) { background:#c6d8cc; }
.outcomes .followup-spectrum .tier-panel { border:0;background:none;padding:0;backdrop-filter:none; }
.outcomes .followup-spectrum::after { content:'';position:absolute;left:0;right:0;bottom:0;height:10px;background:linear-gradient(90deg,#b8cda7,#668e76,#244c3b); }
.outcomes .followup-spectrum h3 { min-height:100px;margin:24px 0; }
@media(max-width:1023px) {
 .outcomes .followup-spectrum { grid-template-columns:1fr; }
 .outcomes .followup-spectrum .how__col + .how__col { border-left:0;border-top:1px solid #bcc8ba; }
 .outcomes .followup-spectrum .how__card { min-height:0;padding:32px; }
 .outcomes .followup-spectrum h3 { min-height:0;margin:16px 0; }
 .outcomes .followup-spectrum::after { top:0;right:auto;bottom:0;width:6px;height:auto;background:linear-gradient(#b8cda7,#668e76,#244c3b); }
}

/* Keep blur on the image layer; type remains sharp and photo edges stay clipped. */
.treatment-card__photo,.deck__media img { object-position:center; }
.scroll-cards .treatment-card__photo,.scroll-cards .deck__media img { will-change:filter,transform; }
.scroll-cards .treatment-card__copy,.scroll-cards .task-panel,.scroll-cards .deck__desc { will-change:opacity,transform; }

/* Expanding photo panels for tests, hardware and results. */
.product-panels { display:flex;gap:16px;min-height:560px;margin:36px 0 28px; }
.product-panel { position:relative;flex:1;min-width:0;overflow:hidden;border-radius:32px;background:#193e30;isolation:isolate;transition:flex .65s cubic-bezier(.22,.7,.2,1); }
.product-panel.is-active { flex:3.2; }
.product-panel__photo { position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:filter .5s;z-index:-2; }
.product-panel::after { content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(#09291b55,transparent 45%,#09291b55); }
.product-panel__toggle { position:absolute;inset:0;width:100%;height:100%;border:0;padding:28px;text-align:left;background:none;color:white;cursor:pointer;display:flex;align-items:flex-start;gap:12px;font:400 15px var(--sans); }
.product-panel__label { font:300 clamp(26px,2.7vw,40px)/1 var(--serif); }
.product-panel__number { padding-top:5px; }
.product-panel__icon { margin-left:auto;font-size:24px;line-height:1; }
.product-panel__toggle:focus-visible { outline:3px solid white;outline-offset:-7px;border-radius:32px; }
.product-panel__detail { position:absolute;bottom:28px;left:28px;right:28px;padding:28px;border:1px solid #ffffff65;border-radius:24px;background:rgba(239,242,231,.88);backdrop-filter:blur(16px);opacity:0;visibility:hidden;transform:translateY(16px);transition:opacity .3s,transform .45s,visibility .3s;pointer-events:none; }
.product-panel.is-active .product-panel__detail { opacity:1;visibility:visible;transform:none;transition-delay:.25s; }
.product-panel__detail h3 { font:300 clamp(28px,2.5vw,38px)/1.08 var(--serif);margin:0 0 16px; }
.product-panel__detail p { font:400 17px/1.5 var(--sans);color:#394a40;margin:0; }
@media(max-width:1023px) {
 .product-panels { flex-direction:column;min-height:0; }
 .product-panel,.product-panel.is-active { flex:none;height:96px;transition:height .55s ease; }
 .product-panel.is-active { height:480px; }
 .product-panel__toggle { padding:24px; }
 .product-panel__label { font-size:32px; }
 .product-panel__detail { left:20px;right:20px;bottom:20px;padding:24px; }
}
@media(prefers-reduced-motion:reduce) { .product-panel,.product-panel__detail { transition:none; } }
@media(min-width:1024px) { .product-panel:not(.is-active) .product-panel__number,.product-panel:not(.is-active) .product-panel__icon { display:none; } }

/* Research: clear footage with one explanation beside it. */
.deck__media video { width:100%;height:100%;object-fit:cover;display:block; }
.research-video__controls { position:absolute;bottom:18px;left:18px;right:18px;display:flex;align-items:center;justify-content:space-between;gap:12px;color:white;font:400 12px/1.4 var(--sans); }
.research-video__controls span,.research-video__toggle { background:rgba(15,36,25,.72);border-radius:20px;padding:8px 12px; }
.research-video__toggle { border:1px solid rgba(255,255,255,.4);color:white;font:inherit;cursor:pointer; }
.research-video__toggle:focus-visible { outline:3px solid white;outline-offset:3px; }
@media(min-width:1024px) {
 .deck.scroll-cards .deck__frame { max-width:1280px; }
 .deck.scroll-cards .deck__card { left:0;right:38%;top:50%;bottom:auto;height:auto;aspect-ratio:16/10;transform:translateY(-50%);border-radius:36px; }
 .deck.scroll-cards .deck__descpos { left:68%;right:0;width:32%; }
}
@media(max-width:1023px) {
 .deck__frame { display:flex;flex-direction:column;gap:24px; }
 .deck__descpos { order:2;margin:0; }
 .deck__card { order:1;aspect-ratio:16/10; }
}

/* Film story: clean side-by-side reading frames, with a corner-up scroll entrance. */
.film-story { padding:48px max(24px,4vw); }
.film-scene { display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);align-items:center;gap:clamp(32px,6vw,100px);max-width:1440px;margin:0 auto 120px; }
.film-scene__media { position:relative;aspect-ratio:16/9;border-radius:32px;overflow:hidden;isolation:isolate;background:#d4d8cb; }
.film-scene__media video { display:block;width:100%;height:100%;object-fit:cover; }
.film-scene__media .research-video__toggle { position:absolute;bottom:16px;right:16px;font:400 12px/1.3 var(--sans); }
.film-scene__copy { min-width:0; }
.film-scene__copy .section-label { font-size:12px;letter-spacing:.09em;margin:0 0 24px; }
.film-scene__copy h2 { font:300 clamp(38px,4vw,64px)/1.02 var(--serif);letter-spacing:-.025em;margin:0 0 28px; }
.film-scene__body { font:400 clamp(17px,1.5vw,21px)/1.55 var(--sans);margin:0 0 20px; }
.film-scene__note { color:#596158;font:400 14px/1.5 var(--sans);margin:0 0 20px;max-width:40ch; }
.film-scene__credit { display:block;font:400 11px/1.5 var(--sans);color:#737a70;margin-top:24px; }
.film-story.is-pinned { height:100svh;padding:0;overflow:clip;position:relative; }
.film-story.is-pinned .film-scene { position:absolute;inset:0 max(32px,5vw);height:100%;margin:auto; }
.film-story.is-pinned .film-scene__media { will-change:transform; }
.film-story.is-pinned .film-scene__copy { will-change:transform,opacity; }
@media(min-width:1024px) {
 .film-scene:nth-child(even) { grid-template-columns:minmax(0,1fr) minmax(0,1.6fr); }
 .film-scene:nth-child(even) .film-scene__media { order:2; }
 .film-scene__media { max-height:72svh; }
}
@media(max-width:1023px) {
 .film-story { padding:48px 24px 0; }
 .film-scene { grid-template-columns:1fr;gap:28px;max-width:720px;margin-bottom:88px; }
 .film-scene__media { border-radius:24px;aspect-ratio:16/9; }
 .film-scene__copy h2 { font-size:clamp(38px,7vw,58px);margin-bottom:20px; }
 .film-scene__copy .section-label { margin-bottom:16px; }
 .film-scene__credit { margin-top:16px; }
}
@media(max-width:400px) { .film-story { padding-left:20px;padding-right:20px; } .film-scene__copy .section-label { font-size:10px; } }
/* Appointment call to action at the end of the recording flow. */
.signup-bookend .signup-ready #signup-stage{display:none}
.signup-bookend .signup-ready #signup-error:empty{display:none}
.signup-bookend .signup-ready .signup-controls{flex-direction:column;gap:24px;margin:36px 0 20px}
.signup-bookend .signup-ready #signup-next{order:-1;width:100%;min-height:92px;padding:24px 20px;font:500 clamp(22px,3vw,30px)/1.2 var(--sans);border-radius:18px;box-shadow:0 12px 36px #001c1626}

/* Portrait reel, matching the reference's persistent corner previews. */
.film-scene__media { aspect-ratio:4/5;max-height:none; }
.film-scene__media video { object-position:50% 50%; }
.film-story.is-pinned .film-scene { display:block;inset:0;max-width:none;pointer-events:none; }
.film-story.is-pinned .film-scene__media { position:absolute;left:46%;top:53%;width:min(32vw,54.4svh);height:68svh;aspect-ratio:4/5;margin-left:calc(min(32vw,54.4svh) / -2);margin-top:-34svh;max-height:none;border-radius:24px; }
.film-story.is-pinned .film-scene__copy { position:absolute;left:68%;width:27%;top:24%;pointer-events:auto; }
.film-story.is-pinned .film-scene__copy h2 { font-size:clamp(32px,3.3vw,54px);margin-bottom:22px; }
.film-story.is-pinned .film-scene__body { font-size:clamp(15px,1.35vw,19px);line-height:1.5; }
.film-story.is-pinned .film-scene__note { font-size:12px;margin-bottom:14px; }
.film-story.is-pinned .film-scene__credit { margin-top:16px;font-size:10px; }
.film-story.is-pinned .film-scene__copy .section-label { font-size:10px;margin-bottom:18px; }
@media(max-width:1023px) { .film-scene__media { aspect-ratio:4/5;max-height:70svh; } }
.product-panels { min-height:660px; }
.product-panel__detail p + p { margin-top:14px; }
.results-spectrum { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin:22px 0 16px;border-radius:16px;overflow:hidden;border-bottom:6px solid #72967b; }
.results-spectrum section { padding:18px 14px;background:#edf0e5; }
.results-spectrum section:nth-child(2) { background:#dce6d7; }
.results-spectrum section:nth-child(3) { background:#c6d8cc; }
.results-spectrum h4 { font:400 clamp(20px,1.8vw,26px)/1.1 var(--serif);margin:0 0 12px; }
.results-spectrum p { font-size:14px;line-height:1.45; }
.product-panel__detail .results-note { font-size:12px;line-height:1.4; }
@media(max-width:1023px) {
 .product-panels { min-height:0; }
 .product-panel.is-active { height:auto;min-height:460px;padding-top:130px; }
 .product-panel__detail { display:none; }
 .product-panel.is-active .product-panel__detail { display:block;position:relative;inset:auto;margin:20px; }
 .results-spectrum { grid-template-columns:1fr; }
 .results-spectrum section { padding:16px; }
 .results-spectrum h4 { margin-bottom:8px; }
}
.film-scene:nth-child(3) video { object-position:62% center; }

/* Calm controls and consistent silver glass surfaces. */
.test-btn, .test-btn:hover { transform:none;transition:none; }
.test-btn__label::after { display:none; }
.test-btn:hover .test-btn__label > span { transform:none; }
.nav--side { gap:3px;padding:5px;background:rgba(24,43,35,.46);border:1px solid #ffffff45;backdrop-filter:blur(12px) saturate(115%);-webkit-backdrop-filter:blur(12px) saturate(115%);border-radius:18px;box-shadow:inset 0 1px 0 #ffffff18; }
.nav--side .pill--glass { color:#fff; }
.nav--side .pill--take-test, .nav--side .pill--take-test:hover { background:#fff;color:var(--ink); }
.product-panel.is-active { flex:6; }
.product-panel__detail { background:rgba(237,240,235,.72);backdrop-filter:blur(26px) saturate(115%);-webkit-backdrop-filter:blur(26px) saturate(115%);box-shadow:inset 0 1px #ffffff90; }
.results-spectrum { background:rgba(255,255,255,.16); }
.results-spectrum section { background:rgba(255,255,255,.18); }
.results-spectrum section:nth-child(2) { background:rgba(203,220,207,.25); }
.results-spectrum section:nth-child(3) { background:rgba(164,192,177,.3); }
@media(min-width:1024px) {
 .film-story.is-pinned .film-scene__media { left:43%;top:55%;width:min(37vw,62.4svh);height:78svh;margin-left:calc(min(37vw,62.4svh) / -2);margin-top:-39svh; }
 .film-story.is-pinned .film-scene__copy { left:66%;width:29%;top:27%; }
 .product-panel:not(.is-active) .product-panel__toggle { justify-content:center;padding:30px 12px; }
 .product-panel:not(.is-active) .product-panel__label { writing-mode:horizontal-tb;font-size:clamp(18px,1.7vw,28px); }
}
@media(max-width:639px) {
 .nav--side { top:12px;right:12px;max-width:calc(100% - 24px);gap:1px;padding:4px; }
 .nav--side .pill { font-size:10px;padding:0 7px;height:36px; }
 .nav--side .pill--take-test { order:0;flex-basis:auto; }
 .site-logo { top:64px;left:20px; }
}
.nav--side .pill--home { display:flex; }
.research-credits .research-story { display:grid;grid-template-columns:minmax(0,1fr) minmax(220px,280px);align-items:center;gap:clamp(40px,7vw,100px);margin:0 0 36px; }
.research-story .intro__mark { order:2;width:min(100%,300px);height:auto;display:block;justify-self:end; }
.research-story > div { order:1;max-width:780px; }
.research-story .logo-anim { width:100%;height:auto; }
.research-story .h2 { margin:0 0 26px;max-width:18ch; }
.research-story .h2 em { font-style:normal; }
.research-story__body { font:400 clamp(18px,1.5vw,21px)/1.55 var(--sans);max-width:54ch;margin:0;color:#46584c; }
.research-story__body + .research-story__body { display:none; }
.research-credits a.research-evidence { display:none; }
.film-poster { position:absolute;inset:0;width:100%;height:100%;object-fit:cover; }
.film-scene__media video { position:relative;opacity:0; }
.film-scene__media.has-video-frame video { opacity:1; }
.film-scene:nth-child(3) .film-poster { object-position:62% center; }
.nav-menu { display:none; }
body .nav-menu { color:#fff; }
@media(max-width:900px) {
 .nav-menu { display:block;position:fixed;z-index:52;right:150px;top:16px;padding:0 18px;height:44px;border:1px solid #ffffff80;border-radius:14px;background:rgba(224,225,221,.85);backdrop-filter:blur(22px);color:var(--ink);font:400 14px var(--sans); }
 .nav--side { top:16px;right:16px;padding:0;border:0;background:none;max-width:none;display:block;backdrop-filter:none;-webkit-backdrop-filter:none; }
 .nav--side .pill { display:none; }
 .nav--side .pill--take-test { display:flex;height:44px;padding:0 16px;font-size:14px; }
 .nav--side.is-open { top:70px;padding:8px;background:rgba(224,225,221,.97);backdrop-filter:none;min-width:210px; }
 .nav--side.is-open .pill { display:flex;height:44px;font-size:14px; }
 .nav--side.is-open .pill--take-test { position:fixed;top:16px;right:16px; }
 .site-logo { top:16px;left:16px;height:44px; }
 .site-logo img { max-width:120px;height:auto; }
 .site-logo__green { max-width:120px;height:19px; }
 .research-credits .research-story { grid-template-columns:1fr;gap:18px; }
 .research-story .intro__mark { order:0;justify-self:start;width:112px; }
 .research-story > div { order:1; }
}
/* Product panels read as a single glass system, not stacked opaque cards. */
.product-panel__detail { background:rgba(236,241,234,.46);border-color:rgba(255,255,255,.62);backdrop-filter:blur(30px) saturate(112%);-webkit-backdrop-filter:blur(30px) saturate(112%);box-shadow:inset 0 1px rgba(255,255,255,.78),0 12px 30px rgba(8,37,24,.12); }
.results-spectrum,.product-panel__detail .results-note { display:none; }
.faq { position:relative;padding-top:140px; }
.faq::before { content:'';position:absolute;top:44px;left:50%;width:min(280px,40vw);height:1px;transform:translateX(-50%);background:linear-gradient(90deg,transparent,#5d8870,transparent); }
.faq > .h2 { font-size:clamp(42px,5vw,72px);letter-spacing:-.03em; }
@media(max-width:900px) { .nav-menu { right:142px; } .nav--side .pill--take-test { min-width:126px;justify-content:center; } }
@media(max-width:420px) { .site-logo { top:16px;left:14px;height:40px; } .site-logo img,.site-logo__green { max-width:104px; } .nav-menu { right:128px;top:14px;height:40px;padding:0 11px;font-size:13px; } .nav--side { top:14px;right:14px; } .nav--side .pill--take-test { height:40px;min-width:112px;padding:0 10px;font-size:12px; } .nav--side.is-open { top:62px; } }
@media(max-width:380px) {
 .site-logo img,.site-logo__green { max-width:96px; }
 .nav-menu { right:134px;padding:0 12px; }
 .nav--side .pill--take-test { font-size:12px;padding:0 12px; }
}

/* Keep legal controls comfortably inside the same generous footer inset. */
.footer { padding:64px clamp(24px,5vw,96px) 36px; }
.footer__top { width:min(1600px,100%);margin:auto;gap:48px 64px; }
.footer__top > div { min-width:0; }
.footer__cols { grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(28px,3vw,56px);max-width:100%; }
.footer__cols a,.footer__cols button { line-height:1.6;overflow-wrap:anywhere; }
.footer__cols button { max-width:100%;white-space:normal; }
@media(max-width:700px) { .footer__cols { width:100%;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px; } }
@media(max-width:360px) { .footer__cols { grid-template-columns:minmax(0,1fr); } }