/* ════════════════════════════════════════════════════════════
   biomarkr — stylesheet
   ------------------------------------------------------------
   Single source of truth, organised by component in page order.
   Contents:
     · Design tokens
     · Reset & base
     · Typography & utilities
     · Buttons
     · Navigation
     · Hero
     · Trust strip
     · Editorial · gap & stories
     · Labs
     · Section shell
     · Lists
     · Digital twin radar
     · Chapter index
     · How it works · scrolly
     · Between tests
     · Sample report
     · Personas
     · Safety & advisor
     · FAQ accordion
     · Closing
     · Footer
     · Keyframes
     · Responsive · breakpoints
   ════════════════════════════════════════════════════════════ */

/* ════════════════════════════════════════════════════════════
   Design tokens
   ════════════════════════════════════════════════════════════ */

:root {
  --paper: #FAFAFA;
  --paper-2: #F1F2F1;
  --paper-3: #E8E9E8;
  --white: #FFFFFF;
  --ink: #151515;
  --ink-2: #393939;
  --ink-3: #727272;
  --ink-4: #9D9D9D;
  --ink-5: #ACACAC;
  --paper-cream: #F2F2F2;
  --paper-warm: #FFFFFF;
  --paper-soft: #EFEFEF;
  --green: #1F5C4A;
  --green-2: #2A6E58;
  --green-deep: #0B4D3A;
  --primary: #0B4D3A;
  --green-soft: #3D7A66;
  --green-soft-2: #D2E0D9;
  --green-glow: rgba(31,92,74,0.18);
  --green-pale: #E3EEE8;
  --green-tint: rgba(31,92,74,0.08);
  --dark: #1E4034;
  --dark-2: #2A5544;
  --on-dark: #EFEFEF;
  --on-dark-2: rgba(236,236,236,0.72);
  --on-dark-3: rgba(236,236,236,0.42);
  --on-dark-em: #9CC8B8;
  --on-dark-line: rgba(255,255,255,0.10);
  --terracotta: #B85C2C;
  --terracotta-2: #C97240;
  --coral: #C76A52;
  --coral-soft: #FBE9E2;
  --amber: #B59A50;
  --hairline: rgba(21,21,21,0.08);
  --hairline-2: rgba(21,21,21,0.14);
  --line: #E7E7E7;
  --line-2: #DADADA;
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 18px;
  --r-xl: 24px;
  --r-2xl: 30px;
  --shadow-card: 0 1px 2px rgba(0,0,0,0.04),0 10px 28px rgba(0,0,0,0.055);
  --shadow-hover: 0 4px 10px rgba(0,0,0,0.06),0 22px 48px rgba(0,0,0,0.10);
  --shadow-lift: 0 36px 70px rgba(0,0,0,0.14),0 8px 18px rgba(0,0,0,0.07);
  --ease-out: cubic-bezier(0.4,0,0.2,1);
  --ease-spring: cubic-bezier(0.34,1.56,0.64,1);
  --ease: cubic-bezier(0.4,0,0.2,1);
  --container: 1180px;
  --gutter: 56px;
  --nav-h: 66px;
  --card: #FFFFFF;
  --card-cream: #FAFAFA;
  --hair: rgba(21,21,21,0.06);
  --hair-2: rgba(21,21,21,0.12);
  --rule: rgba(21,21,21,0.30);
  --black: #111111;
  --black-warm: #1A1A1A;
  --black-elev: #242424;
  --black-text: #ECECEC;
  --black-text-dim: #9D9D9D;
  --black-rule: rgba(236,236,236,0.14);
  --terra: #B0532A;
  --ox: #6B2330;
  --card-frost: rgba(255,255,255,0.66);
  --card-solid: #FFFFFF;
  --hair-3: rgba(21,21,21,0.20);
  --clay: #E8836A;
  --clay-soft: #F2A57B;
  --sage: #B5D5C5;
  --sage-pale: #C8DDC8;
  --steel: #7A8B8E;
  --sage-soft: #E3EEE8;
  --sage-deep: #1F5C4A;
  --slate: #8B7468;
  --slate-soft: #E6DDD3;
  --peach: #D9A88B;
  --peach-soft: #F2DCC8;
}

/* ════════════════════════════════════════════════════════════
   Reset & base
   ════════════════════════════════════════════════════════════ */

html,
body {
  background: var(--paper);
  color: var(--ink);
  font-family: 'DM Sans',sans-serif;
  -webkit-font-smoothing: antialiased;
  line-height: 1.6;
  font-size: 16px;
}

p em {
  font-family: 'Cormorant Garamond','Fraunces',serif;
  font-style: italic;
  letter-spacing: -0.005em;
}

body {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1,'ss01' 1;
  padding-top: 0;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* ════════════════════════════════════════════════════════════
   Typography & utilities
   ════════════════════════════════════════════════════════════ */

/* spacing utilities */
.mt-22 { margin-top: 22px; }

.display {
  font-family: 'Cormorant Garamond',serif;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.0;
  color: var(--ink);
  text-wrap: balance;
}

.h2 {
  font-family: 'Cormorant Garamond',serif;
  font-weight: 500;
  font-size: clamp(32px,4vw,52px);
  line-height: 1.06;
  letter-spacing: -0.022em;
  color: var(--ink);
  text-wrap: balance;
}

.h2 em {
  font-style: italic;
  color: var(--green);
}

.h3 {
  font-family: 'Cormorant Garamond',serif;
  font-weight: 500;
  font-size: clamp(24px,2.6vw,34px);
  line-height: 1.12;
  letter-spacing: -0.018em;
  color: var(--ink);
}

.h3 em {
  font-style: italic;
  color: var(--green);
}

.lede {
  font-family: 'DM Sans',sans-serif;
  font-size: clamp(17px,1.5vw,20px);
  line-height: 1.62;
  color: var(--ink-2);
  font-weight: 400;
}

.lede em {
  font-family: 'Cormorant Garamond',serif;
  font-style: italic;
  color: var(--green);
  font-size: 1.08em;
}

.body {
  font-family: 'DM Sans',sans-serif;
  font-size: 17px;
  line-height: 1.72;
  color: var(--ink-2);
  font-weight: 400;
}

.body p+p {
  margin-top: 1em;
}

.eyebrow.plain::before {
  display: none;
}

.serif {
  font-family: 'Cormorant Garamond',serif;
  letter-spacing: -0.01em;
}

.mono {
  font-family: 'IBM Plex Mono',monospace;
  letter-spacing: 0.04em;
}

.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
  position: relative;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: 'IBM Plex Mono',monospace;
  font-size: 10.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 500;
  margin-bottom: 18px;
}

.eyebrow::before {
  content: '';
  width: 24px;
  height: 1px;
  background: var(--ink-3);
}

/* ════════════════════════════════════════════════════════════
   Buttons
   ════════════════════════════════════════════════════════════ */

.btn .arr {
  font-size: 14px;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 22px;
  border-radius: 999px;
  font-family: 'DM Sans',sans-serif;
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: -0.005em;
  text-decoration: none;
  cursor: pointer;
  border: none;
  transition: all 0.18s var(--ease);
  font-style: normal;
}

.btn-ghost {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--hair-3);
}

.btn-ghost:hover {
  border-color: var(--ink-2);
  color: var(--ink);
  background: rgba(21,21,21,0.04);
}

.btn-primary {
  background: #0F0F0F;
  color: #ECECEC;
  padding: 16px 28px;
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: -0.005em;
  border-radius: 999px;
}

.btn-primary:hover {
  background: #1F1F1F;
}

.btn-primary .arr {
  margin-left: 4px;
}

/* ════════════════════════════════════════════════════════════
   Navigation
   ════════════════════════════════════════════════════════════ */

.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  height: var(--nav-h);
  background: rgba(247,246,242,0.78);
  -webkit-backdrop-filter: blur(18px) saturate(1.1);
  backdrop-filter: blur(18px) saturate(1.1);
  border-bottom: 1px solid transparent;
  transition: background .3s var(--ease-out),border-color .3s var(--ease-out),box-shadow .3s var(--ease-out);
}

.nav.scrolled {
  background: rgba(250,250,250,0.92);
  border-bottom-color: var(--hairline);
  box-shadow: 0 1px 24px rgba(21,21,21,0.05);
}

.nav-inner {
  max-width: var(--container);
  height: 100%;
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 6px;
}

.nav-link:hover {
  color: var(--ink);
}

.nav-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: 999px;
  font-family: 'DM Sans',sans-serif;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.005em;
  color: var(--ink);
  text-decoration: none;
  border: 1px solid var(--hairline-2);
  background: transparent;
  transition: background .2s var(--ease-out),border-color .2s var(--ease-out),color .2s var(--ease-out);
}

.nav-cta:hover {
  background: rgba(26,25,22,0.05);
  border-color: var(--hairline);
}

.logo {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}

/* SVG lockups (assets/lockup.svg for light surfaces, lockup-dark.svg for dark);
   both render in every .logo, the surface state decides which is visible */
.logo img {
  height: 30px;
  width: auto;
  display: block;
}

.logo .lk-dark {
  display: none;
}

.nav-link {
  font-family: 'DM Sans',sans-serif;
  font-size: 14.5px;
  font-weight: 450;
  letter-spacing: -0.005em;
  color: var(--ink-2);
  text-decoration: none;
  padding: 8px 15px;
  border-radius: 8px;
  transition: color .2s var(--ease-out);
  position: relative;
}

.nav-link::after {
  content: '';
  position: absolute;
  left: 15px;
  right: 15px;
  bottom: 5px;
  height: 1px;
  background: currentColor;
  opacity: 0;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .25s var(--ease-out),opacity .25s var(--ease-out);
}

.nav-link:hover::after {
  opacity: 0.7;
  transform: scaleX(1);
}

.nav .nav-cta {
  background: transparent !important;
  color: var(--ink, #1A1916) !important;
  border: 1px solid rgba(26,25,22,0.18) !important;
  box-shadow: none !important;
  font-weight: 500;
}

.nav .nav-cta:hover {
  background: rgba(26,25,22,0.04) !important;
  border-color: rgba(26,25,22,0.32) !important;
}

.nav .btn-primary,
header .nav .btn-primary,
nav .btn-primary {
  background: transparent !important;
  color: var(--ink, #0E0D0B) !important;
  border: 1px solid rgba(14,13,11,0.22) !important;
  font-weight: 500 !important;
}

.nav .btn-primary:hover,
nav .btn-primary:hover {
  background: var(--ink, #0E0D0B) !important;
  color: #FFFEFA !important;
  border-color: var(--ink, #0E0D0B) !important;
}

/* ════════════════════════════════════════════════════════
   Hero · full-bleed video
   ════════════════════════════════════════════════════════ */

.herov-frame {
  position: relative;
  height: 100vh;
  min-height: 620px;
  overflow: hidden;
  background: var(--black-warm) url('assets/hero-loop-poster.jpg') center/cover no-repeat;
}

.herov-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 1.3s var(--ease);
}

.herov-scrim {
  position: absolute;
  inset: 0;
  background:
    /* text side: darker left for readability, lighter right so subject stays vivid */
    linear-gradient(105deg, rgba(6,6,6,0.80) 0%, rgba(6,6,6,0.56) 42%, rgba(6,6,6,0.28) 68%, rgba(6,6,6,0.10) 100%),
    /* vertical: heavier at top (nav anchor) + base tone */
    linear-gradient(180deg, rgba(6,6,6,0.44) 0%, rgba(6,6,6,0.18) 44%, rgba(6,6,6,0.38) 100%);
}

.herov-content {
  position: relative;
  z-index: 1;
  height: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: calc(var(--nav-h) + 24px) var(--gutter) 112px;
  display: flex;
  flex-direction: column;
}

.herov-copy {
  margin: auto 0;
  max-width: 920px;
}

/* shallow laptops: keep the CTAs clear of the fold */
@media (max-height: 680px) {
  .herov-content {
    padding-bottom: 72px;
  }

}

.herov-copy .display {
  font-size: clamp(52px,6.2vw,96px);
  line-height: 1.0;
  letter-spacing: -0.02em;
  text-shadow: 0 1px 28px rgba(0,0,0,0.35);
}

.herov-copy .hero-sub {
  font-size: 19px;
  font-weight: 400;
  line-height: 1.7;
  margin-top: 28px;
}

.herov-copy .display {
  color: #FFFFFF;
}

.herov-copy .display em {
  color: rgba(255,255,255,0.90);
}

.herov-copy .hero-sub {
  color: rgba(255,255,255,0.85);
  max-width: 48ch;
  text-shadow: 0 1px 18px rgba(0,0,0,0.40);
}

.herov .hero-cta {
  margin-top: 44px;
  display: flex;
  align-items: center;
  gap: 14px;
}

.herov-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 16px 30px;
  border-radius: 999px;
  font-family: 'DM Sans',sans-serif;
  font-size: 15.5px;
  font-weight: 600;
  letter-spacing: -0.005em;
  text-decoration: none;
  transition: background .2s var(--ease-out),color .2s var(--ease-out),transform .2s var(--ease-out);
}

.herov-btn.solid {
  background: #FFFFFF;
  color: var(--ink);
}

.herov-btn.solid:hover {
  background: rgba(255,255,255,0.88);
}

.herov-btn.ghost {
  background: rgba(255,255,255,0.14);
  color: #FFFFFF;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

.herov-btn.ghost:hover {
  background: rgba(255,255,255,0.22);
}

.herov-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 0;
  padding-top: 28px;
  border-top: 1px solid rgba(255,255,255,0.14);
}

.herov-stats .hs {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding-right: 28px;
  margin-right: 28px;
  border-right: 1px solid rgba(255,255,255,0.16);
}

.herov-stats .hs:last-child {
  border-right: none;
  padding-right: 0;
  margin-right: 0;
}

.herov-stats .hs b {
  font-family: 'DM Sans',sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: #FFFFFF;
  letter-spacing: -0.005em;
}

.herov-stats .hs span {
  font-family: 'DM Sans',sans-serif;
  font-size: 11.5px;
  color: rgba(255,255,255,0.58);
}

/* first-load entrance: scrim settles from black, copy rises in a stagger */
@media (prefers-reduced-motion: no-preference) {
  .herov-frame::after {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--black-warm);
    opacity: 0;
    pointer-events: none;
    animation: herovVeil 1.5s var(--ease-out) both;
  }

  .herov-copy .display {
    animation: herovRise 1s 0.3s var(--ease-out) both;
  }

  .herov-copy .hero-sub {
    animation: herovRise 1s 0.46s var(--ease-out) both;
  }

  .herov .hero-cta {
    animation: herovRise 1s 0.62s var(--ease-out) both;
  }

  .herov-stats {
    animation: herovRise 1s 0.85s var(--ease-out) both;
  }

}

@keyframes herovVeil {
  from { opacity: 0.88; }
  to { opacity: 0; }
}

@keyframes herovRise {
  from {
    opacity: 0;
    transform: translateY(26px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* nav sits over the video: semi-transparent dark bar + blur so it reads clearly
   against any video frame, transitions to solid paper once scrolled. */
.nav:not(.scrolled) {
  background: rgba(8,8,8,0.40);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  backdrop-filter: blur(14px) saturate(1.2);
  border-bottom-color: rgba(255,255,255,0.08);
}

.nav:not(.scrolled) .logo .lk-light {
  display: none;
}

.nav:not(.scrolled) .logo .lk-dark {
  display: block;
}

.nav:not(.scrolled) .nav-link {
  color: rgba(255,255,255,0.88);
}

.nav:not(.scrolled) .nav-link:hover {
  color: #FFFFFF;
}

.nav:not(.scrolled) .nav-cta {
  color: #FFFFFF !important;
  border-color: rgba(255,255,255,0.42) !important;
}

.nav:not(.scrolled) .nav-cta:hover {
  background: rgba(255,255,255,0.10) !important;
  border-color: rgba(255,255,255,0.68) !important;
}

/* subpages (body.subpage, set by the page template) have no video hero:
   the white-over-video treatment must not apply, nav is paper from the top */
body.subpage .nav:not(.scrolled) {
  background: rgba(250,250,250,0.92);
  -webkit-backdrop-filter: blur(18px) saturate(1.1);
  backdrop-filter: blur(18px) saturate(1.1);
  border-bottom-color: var(--hairline);
}

body.subpage .nav:not(.scrolled) .logo .lk-light {
  display: block;
}

body.subpage .nav:not(.scrolled) .logo .lk-dark {
  display: none;
}

body.subpage .nav:not(.scrolled) .nav-link {
  color: var(--ink-2);
}

body.subpage .nav:not(.scrolled) .nav-link:hover {
  color: var(--ink);
}

body.subpage .nav:not(.scrolled) .nav-cta {
  color: var(--ink) !important;
  border-color: var(--hairline-2) !important;
}

body.subpage .nav:not(.scrolled) .nav-cta:hover {
  background: var(--white) !important;
  border-color: var(--rule) !important;
}

@media (prefers-reduced-motion: reduce) {
  .herov-video {
    display: none;
  }

}

/* Tweaks panel */
#tweaksPanel {
  display: none;
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 200;
  width: 240px;
  flex-direction: column;
  gap: 4px;
  background: var(--white);
  border: 1px solid var(--hair-2);
  border-radius: 14px;
  box-shadow: var(--shadow-hover);
  padding: 14px 16px 16px;
}

#tweaksPanel.show {
  display: flex;
}

#tweaksPanel .tp-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}

#tweaksPanel .tp-title {
  font-family: 'DM Sans',sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
}

#tweaksPanel .tp-close {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  color: var(--ink-3);
  padding: 2px 6px;
}

#tweaksPanel .tp-k {
  font-family: 'IBM Plex Mono',monospace;
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-4);
  margin-bottom: 2px;
}

#tweaksPanel .tp-row {
  display: flex;
  align-items: center;
  gap: 9px;
  font-family: 'DM Sans',sans-serif;
  font-size: 13.5px;
  color: var(--ink-2);
  cursor: pointer;
  padding: 5px 0;
}

#tweaksPanel .tp-row input {
  accent-color: var(--green);
}

/* ════════════════════════════════════════════════════════════
   Hero
   ════════════════════════════════════════════════════════════ */











.hero-sub {
  font-size: clamp(19px,1.55vw,23px);
  line-height: 1.55;
  color: var(--ink-2);
  max-width: 46ch;
  margin-bottom: 36px;
}



































.hero-cta {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 54px;
}





.report-stage .stat-num {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1, 'lnum' 1;
}

/* ════════════════════════════════════════════════════════════
   Editorial · gap & stories
   ════════════════════════════════════════════════════════════ */

.section {
  padding: clamp(72px,9vw,112px) 0;
  position: relative;
}

.section.compact {
  padding: clamp(40px,5vw,64px) 0;
}

.section.tinted {
  background: var(--paper-cream);
}

.spread {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 72px;
  align-items: center;
}

.spread.r {
  grid-template-columns: 1.08fr 0.92fr;
}

.spread.l {
  grid-template-columns: 0.92fr 1.08fr;
}

.spread .ph {
  border-radius: var(--r-2xl);
  aspect-ratio: 4/5;
  box-shadow: var(--shadow-lift);
}

.spread .ph.landscape {
  aspect-ratio: 5/4;
}

.spread .h2 {
  margin-bottom: 22px;
}

.story {
  display: grid;
  grid-template-columns: 0.82fr 1.18fr;
  gap: 60px;
  align-items: center;
}

.story-q {
  font-family: 'Playfair Display',serif;
  font-style: italic;
  font-size: clamp(23px,2.5vw,31px);
  line-height: 1.4;
  letter-spacing: -0.013em;
  color: var(--ink);
  margin-bottom: 26px;
  text-wrap: pretty;
}

.story-q::before {
  content: '\201C';
  color: var(--green);
  font-size: 1.3em;
  line-height: 0;
  position: relative;
  top: 0.16em;
  margin-right: 3px;
}

.story-attr {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  color: var(--ink-3);
  font-size: 14px;
}

.story-attr .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--green);
}

.story-attr .tags {
  font-family: 'JetBrains Mono',monospace;
  font-size: 10.5px;
  letter-spacing: 0.1em;
  color: var(--ink-4);
  margin-left: auto;
}

.story-reverse {
  grid-template-columns: 1.18fr 0.82fr;
}

.story .ph {
  aspect-ratio: 4/5;
  border-radius: var(--r-2xl);
  box-shadow: var(--shadow-lift);
  position: relative;
}

.story-large {
  grid-template-columns: 1fr 1fr;
  gap: 72px;
}

.story-large.story-reverse {
  grid-template-columns: 1fr 1fr;
}

.story-large .ph {
  aspect-ratio: 4/4.6;
  max-width: none;
}

.story-large .story-q {
  font-size: clamp(24px,2.7vw,34px);
  line-height: 1.36;
}

.section-head.center {
  margin: 0 auto 60px;
  text-align: center;
  max-width: 700px;
}

.section-head.center .eyebrow {
  display: inline-flex;
  margin-bottom: 20px;
}

.section-head.center .lede {
  margin-left: auto;
  margin-right: auto;
}

/* ════════════════════════════════════════════════════════════
   Labs
   ════════════════════════════════════════════════════════════ */

.labs .lab .logo-svg {
  fill: var(--ink);
  color: var(--ink);
}

.labs .lab .logo-svg .accent {
  fill: var(--green);
}

.labs .lab.nhs .logo-svg rect {
  fill: #005EB8;
}

.labs .lab.nhs .logo-svg text {
  fill: #fff;
}

.labs {
  padding: 0;
}

.labs-note {
  margin-top: 18px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: 'IBM Plex Mono',monospace;
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-4);
}

.labs-note svg {
  width: 13px;
  height: 13px;
  fill: none;
  stroke: var(--green);
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: none;
}

.labs-row .lab:last-child {
  border-right: none;
}

.labs-row .lab-meta {
  font-family: 'IBM Plex Mono',monospace;
  font-size: 8.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-4);
  font-weight: 500;
  line-height: 1.4;
}

.labs-row .lab .logo-svg.tall {
  height: 38px;
}

.labs-row .lab .logo-svg.short {
  height: 26px;
}

.labs-row .lab .logo-svg path,
.labs-row .lab .logo-svg rect,
.labs-row .lab .logo-svg circle {
  fill: var(--ink);
}

.labs-row .lab .logo-svg text {
  fill: var(--ink);
}

.labs-row .lab.nhs .logo-svg {
  height: 30px;
}

.labs-row .lab.nhs .logo-svg rect {
  fill: #005EB8;
}

.labs-row .lab.nhs .logo-svg text {
  fill: #FFFFFF;
}





.labs-row .lab .logo-svg .accent {
  fill: var(--slate);
}

.labs-row .lab:hover {
  background: rgba(21,21,21,0.02);
}





















.labs-row {
  display: grid;
  grid-template-columns: repeat(7,1fr);
  gap: 0;
  border-top: 1px solid var(--hair);
  border-bottom: 1px solid var(--hair);
  margin-top: 24px;
  border-color: var(--hair-2);
  border-radius: 0;
  background: transparent;
}

.labs-row .lab {
  padding: 44px 14px;
  border-right: 1px solid var(--hair);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  transition: background 0.2s var(--ease);
  min-height: 140px;
  text-align: center;
  border-color: var(--hair);
}

.labs-row .lab .logo-svg {
  width: auto;
  height: 30px;
  display: block;
}

.lab {
  transition: opacity 0.28s var(--ease, ease-out), transform 0.28s var(--ease, ease-out);
  opacity: 0.78;
}

.lab:hover {
  opacity: 1;
  transform: translateY(-2px);
}

.labs:hover .lab:not(:hover) {
  opacity: 0.55;
}

/* ════════════════════════════════════════════════════════════
   Section shell
   ════════════════════════════════════════════════════════════ */

.sec.cream {
  background: var(--paper-cream);
}

.sec.dark .sec-head h2 em {
  color: var(--sage);
}

.sec.dark .eyebrow {
  color: var(--sage);
}

.sec.dark .eyebrow::before {
  background: var(--sage);
}

.sec-head .lede em {
  font-family: 'Cormorant Garamond',serif;
  font-style: italic;
  color: var(--ink);
  font-size: 1.08em;
  letter-spacing: -0.005em;
  font-weight: 500;
}

.sec.dark {
  background: var(--black);
  color: var(--black-text);
  border-bottom: none;
  padding: 104px 0;
}

.sec.dark .sec-head h2 {
  color: var(--black-text);
  font-size: clamp(38px,4.6vw,60px);
  letter-spacing: -0.025em;
}

.sec.dark .sec-head .lede {
  color: var(--black-text-dim);
  font-size: 18px;
  line-height: 1.65;
}

.sec-head h2 {
  font-family: 'Cormorant Garamond',serif;
  font-size: clamp(38px,4.8vw,62px);
  line-height: 1.02;
  letter-spacing: -0.026em;
  color: var(--ink);
  font-weight: 500;
  max-width: 24ch;
  text-wrap: balance;
}

.sec-head h2 em {
  font-style: italic;
  color: var(--ink);
}

.sec-head .lede {
  margin-top: 22px;
  font-family: 'DM Sans',sans-serif;
  font-size: 17.5px;
  line-height: 1.6;
  color: var(--ink-2);
  max-width: 60ch;
  font-weight: 400;
}

.sec {
  padding: 112px 0;
  position: relative;
  border-bottom: 1px solid var(--hair-2);
}

.sec hr,
.section hr {
  border-color: rgba(14,13,11,0.07) !important;
}

.sec-head {
  display: block;
  grid-template-columns: none;
  gap: 48px;
  margin-bottom: 72px;
  align-items: baseline;
  max-width: 860px;
}

.sec-head > div {
  max-width: 100%;
}

/* ════════════════════════════════════════════════════════════
   Lists
   ════════════════════════════════════════════════════════════ */

.step-list {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: step-counter;
  display: grid;
  row-gap: 18px;
}

.step-list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  position: relative;
  padding-left: 40px;
  font-family: 'DM Sans',sans-serif;
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink-2);
}

.step-list li::before {
  content: counter(step-counter);
  counter-increment: step-counter;
  position: absolute;
  left: 0;
  top: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--green-soft);
  color: var(--green);
  font-weight: 600;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ════════════════════════════════════════════════════════════
   Digital twin radar
   ════════════════════════════════════════════════════════════ */

.twin-stage {
  position: relative;
  width: 100%;
  max-width: 560px;
  height: 640px;
  margin: 0 auto;
}

/* info panel content cross-fades on every cycle */
.twin-info-eyebrow,
.twin-info-name,
.twin-info-sub,
.twin-markers {
  transition: opacity 0.4s var(--ease),transform 0.4s var(--ease);
}

.twin-info.cycling .twin-info-name,
.twin-info.cycling .twin-info-sub,
.twin-info.cycling .twin-info-eyebrow,
.twin-info.cycling .twin-markers {
  opacity: 0;
  transform: translateY(7px);
}

#twin {
  background: var(--paper);
}





.twin-flux {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.twin-flux path {
  fill: none;
  stroke: rgba(21,21,21,0.34);
  stroke-width: 1.3;
  stroke-dasharray: 3 5;
  stroke-linecap: round;
}

.twin-chip {
  position: absolute;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  gap: 9px;
  background: var(--black-warm);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 12px;
  padding: 7px 12px 7px 7px;
  box-shadow: var(--shadow-card);
  z-index: 2;
}

.twin-chip.r {
  transform: translate(-100%,-50%);
}

.twin-chip .ci {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: rgba(255,255,255,0.08);
  display: grid;
  place-items: center;
  flex: none;
}

.twin-chip .ci svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: var(--sage);
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.twin-chip .ct {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.twin-chip .ct b {
  font-family: 'DM Sans',sans-serif;
  font-size: 11.5px;
  font-weight: 600;
  color: #FFFFFF;
  white-space: nowrap;
}

.twin-chip .ct small {
  font-family: 'IBM Plex Mono',monospace;
  font-size: 8px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--black-text-dim);
  white-space: nowrap;
}

.twin-figure {
  position: absolute;
  left: 50%;
  bottom: 3%;
  height: 90%;
  aspect-ratio: 197/611;
  transform: translateX(-50%);
}

.twin-figure img {
  height: 100%;
  width: 100%;
  display: block;
}

.twin-figure::after {
  content: '';
  position: absolute;
  bottom: -2.5%;
  left: 50%;
  transform: translateX(-50%);
  width: 150%;
  height: 4%;
  background: radial-gradient(ellipse,rgba(0,0,0,0.13),transparent 70%);
  z-index: -1;
}

.twin-pin {
  position: absolute;
  /* 36px hit box: the largest that cannot cover a neighbour's center
     (closest pin centers are ~19px apart on the rendered figure) */
  width: 36px;
  height: 36px;
  margin: -18px 0 0 -18px;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  --pin-c: var(--green);
}

.twin-pin.attn {
  --pin-c: var(--amber);
}

.twin-pin.warn {
  --pin-c: var(--terracotta);
}

/* soft inner-glow pins: faint embers at rest, full bloom when active.
   core + halo are decorative; only the button itself takes the pointer */
.twin-pin .core {
  position: absolute;
  pointer-events: none;
  left: 50%;
  top: 50%;
  width: 16px;
  height: 16px;
  margin: -8px 0 0 -8px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--pin-c) 0%, color-mix(in srgb, var(--pin-c) 55%, transparent) 42%, transparent 72%);
  filter: blur(0.6px);
  opacity: 0.25;
  transform: scale(0.7);
  transition: transform 0.35s var(--ease-out), opacity 0.35s var(--ease);
}

.twin-pin:hover .core {
  opacity: 0.6;
}

.twin-pin .halo {
  position: absolute;
  pointer-events: none;
  left: 50%;
  top: 50%;
  width: 48px;
  height: 48px;
  margin: -24px 0 0 -24px;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--pin-c) 45%, transparent) 0%, transparent 66%);
  filter: blur(5px);
  opacity: 0;
  transition: opacity 0.35s var(--ease);
}

.twin-pin.on .core {
  opacity: 1;
  transform: scale(1.25);
}

.twin-pin.on .halo {
  opacity: 0.85;
}

@media (prefers-reduced-motion: no-preference) {
  .twin-pin.on .halo {
    animation: pinPulse 2.2s ease-out infinite;
  }

  .twin-flux path {
    animation: fluxFlow 9s linear infinite;
  }

}

.twin-pin-tag {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  background: var(--white);
  border: 1px solid var(--hair-2);
  border-radius: 999px;
  padding: 6px 12px;
  font-family: 'IBM Plex Mono',monospace;
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
  font-weight: 500;
  box-shadow: var(--shadow-card);
  transform: translate(16px,-50%);
  transition: opacity 0.3s var(--ease),left 0.55s var(--ease-out),top 0.55s var(--ease-out);
  white-space: nowrap;
  z-index: 3;
}

.twin-pin-tag.show {
  opacity: 1;
}

.twin-pin-tag.flip {
  transform: translate(calc(-100% - 16px),-50%);
}

.twin-info-eyebrow {
  font-family: 'IBM Plex Mono',monospace;
  font-size: 10.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 500;
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 14px;
}

.twin-info-eyebrow::before {
  content: '';
  width: 24px;
  height: 1px;
  background: var(--ink-3);
}

.twin-info-name em {
  font-style: italic;
  color: var(--ink);
}

.twin-markers {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 88px;
}

.twin-marker::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--green);
  opacity: 0.5;
  display: none;
}

.twin-marker-name {
  font-family: 'DM Sans',sans-serif;
  font-size: 13.5px;
  color: var(--ink-2);
  font-weight: 500;
  letter-spacing: -0.005em;
}

.twin-marker-name small {
  font-family: 'IBM Plex Mono',monospace;
  font-size: 9px;
  letter-spacing: 0.1em;
  color: var(--ink-4);
  text-transform: uppercase;
  font-weight: 500;
  margin-left: 4px;
}

.twin-marker-value small {
  font-family: 'IBM Plex Mono',monospace;
  font-size: 9.5px;
  letter-spacing: 0.04em;
  color: var(--ink-4);
  margin-left: 2px;
  font-weight: 500;
}

.twin-marker-status {
  font-family: 'IBM Plex Mono',monospace;
  font-size: 9px;
  letter-spacing: 0.14em;
  color: var(--ink-4);
  text-transform: uppercase;
  font-weight: 500;
  text-align: right;
}

.twin-cycle {
  margin-top: 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: 'IBM Plex Mono',monospace;
  font-size: 9.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-4);
  font-weight: 500;
}

.twin-cycle-bar {
  flex: 1;
  height: 2px;
  background: rgba(21,21,21,0.06);
  position: relative;
  border-radius: 1px;
  overflow: hidden;
  max-width: 200px;
}

.twin-cycle-fill {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  background: var(--ink-3);
  border-radius: 1px;
  width: 0;
  transition: width 0.1s linear;
}

.twin-cycle button {
  background: none;
  border: none;
  font-family: 'IBM Plex Mono',monospace;
  font-size: 9.5px;
  letter-spacing: 0.16em;
  color: var(--ink-3);
  text-transform: uppercase;
  cursor: pointer;
  font-weight: 500;
  /* visual size unchanged; padding+negative margin widen the tap area to ~38px */
  padding: 12px 10px;
  margin: -12px -10px;
}

.twin-cycle button:hover {
  color: var(--ink);
}

.twin-marker.watch::before {
  background: var(--slate);
}

.twin-marker-value.watch {
  color: var(--slate);
}

.twin-marker-status.watch {
  color: var(--slate);
}

.twin-marker.attn::before {
  background: var(--peach);
}

.twin-marker-value.attn {
  color: var(--peach);
}

.twin-marker-status.attn {
  color: var(--peach);
}

.twin-info {
  padding: 24px 26px;
  background: var(--white);
  border: 1px solid var(--hair-2);
  border-radius: 20px;
  box-shadow: var(--shadow-card);
}

.twin-info-name {
  font-family: 'Cormorant Garamond',serif;
  font-size: 36px;
  line-height: 1.02;
  letter-spacing: -0.025em;
  color: var(--ink);
  font-weight: 500;
  margin-bottom: 8px;
  min-height: auto;
}

.twin-info-sub {
  font-family: 'DM Sans',sans-serif;
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink-3);
  font-weight: 400;
  margin-bottom: 24px;
  max-width: 36ch;
}

.twin-marker {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 12px;
  align-items: baseline;
  padding: 12px 16px;
  background: rgba(255,255,255,0.5);
  border: 1px solid var(--hair);
  border-radius: 10px;
  transition: all 0.4s var(--ease);
  position: relative;
  overflow: hidden;
}

.twin-marker-value {
  font-family: 'DM Sans',sans-serif;
  font-size: 17px;
  color: var(--ink);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1;
  white-space: nowrap;
}



.twin-row {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: 72px;
  align-items: end;
}

.twin-copy .sec-head {
  margin-bottom: 36px;
}

/* ════════════════════════════════════════════════════════════
   How it works · scrolly
   ════════════════════════════════════════════════════════════ */

.how2-menu .lbl {
  font-family: 'Geist',sans-serif !important;
  font-style: normal !important;
  letter-spacing: -0.01em;
}

.how2 {
  background: var(--paper);
  position: relative;
  /* match the standard section rhythm; the intro previously sat hard against the twin section's border */
  padding-top: clamp(72px,9vw,112px);
}

.how2-intro {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.how2-intro .eyebrow {
  margin-bottom: 22px;
}

.how2-intro .h2 {
  max-width: 18ch;
  margin-bottom: 18px;
}

.how2-intro .lede {
  max-width: 54ch;
}

.how2-scrolly {
  position: relative;
  /* the 100vh sticky already centres the 84vh stage, contributing ~8vh of
     built-in whitespace below the intro; a negative margin nets the gap down */
  margin-top: -16px;
}

.how2-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 max(20px,calc((100vw - var(--container))/2 + 8px));
}

.how2-stage {
  position: relative;
  z-index: 2;
  height: 84vh;
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 clamp(30px,4vw,68px);
  border-radius: 32px;
  overflow: hidden;
  box-shadow: var(--shadow-lift);
  border: 1px solid rgba(255,255,255,0.10);
  background:
    linear-gradient(100deg,rgba(13,13,13,0.86) 0%,rgba(13,13,13,0.62) 46%,rgba(13,13,13,0.42) 100%),
    url('assets/how-bg.jpg') 62% 30%/cover no-repeat #161616;
  display: grid;
  grid-template-columns: 1fr auto 220px;
  align-items: center;
  gap: 44px;
}

.how2-textcol {
  align-self: center;
  position: relative;
  min-height: 300px;
  display: flex;
  align-items: center;
}

.how2-text {
  position: absolute;
  top: 50%;
  left: 0;
  max-width: 32ch;
  opacity: 0;
  transform: translateY(calc(-50% + 16px));
  transition: opacity .6s var(--ease-out),transform .6s var(--ease-out);
  pointer-events: none;
}

.how2-text.on {
  opacity: 1;
  transform: translateY(-50%);
  pointer-events: auto;
}

.how2-text .cnum {
  font-family: 'JetBrains Mono',monospace;
  font-size: 12.5px;
  letter-spacing: 0.18em;
  color: var(--sage);
  margin-bottom: 18px;
}

.how2-text h3 {
  font-family: 'Playfair Display',serif;
  font-weight: 400;
  font-size: clamp(28px,3.2vw,44px);
  line-height: 1.06;
  letter-spacing: -0.022em;
  color: #FFFFFF;
  margin-bottom: 16px;
  text-wrap: balance;
  text-shadow: 0 1px 22px rgba(0,0,0,0.35);
}

.how2-text h3 em {
  font-style: normal;
  color: inherit;
}

.how2-text p {
  font-size: clamp(16px,1.3vw,18.5px);
  line-height: 1.62;
  color: rgba(255,255,255,0.80);
  max-width: 34ch;
  text-shadow: 0 1px 16px rgba(0,0,0,0.35);
}

.how2-device {
  position: relative;
  width: clamp(380px,40vw,540px);
  aspect-ratio: 4/3;
  align-self: center;
  justify-self: center;
}

.how2-frame {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: translateY(14px) scale(0.985);
  transition: opacity .5s var(--ease-out),transform .5s var(--ease-out);
}

.how2-frame.on {
  opacity: 1;
  transform: none;
}

.how2-menu {
  align-self: center;
  display: flex;
  flex-direction: column;
  gap: 2px;
  justify-self: end;
}

.how2-menu .mi {
  padding: 15px 0;
  gap: 14px;
  display: flex;
  align-items: center;
  cursor: pointer;
  border-top: 1px solid rgba(255,255,255,0.18);
  transition: opacity .3s;
}

.how2-menu .mi:last-child {
  border-bottom: 1px solid rgba(255,255,255,0.18);
}

.how2-menu .mi .mnum {
  font-family: 'JetBrains Mono',monospace;
  font-size: 12.5px;
  font-weight: 500;
  font-style: normal;
  transition: color .3s;
  color: rgba(255,255,255,0.45);
  width: 24px;
  order: 2;
  margin-left: auto;
  text-align: right;
}

.how2-menu .mi .lbl {
  font-size: 17px;
  color: rgba(255,255,255,0.50);
  transition: color .3s;
  letter-spacing: -0.01em;
  order: 1;
}

.how2-menu .mi .tick {
  width: 0;
  height: 1.5px;
  background: var(--sage);
  opacity: 0;
  transition: width .35s var(--ease-out),opacity .35s;
  order: 0;
}

.how2-menu .mi.on .mnum {
  font-size: 46px;
  font-style: italic;
  letter-spacing: -0.02em;
  line-height: 0.9;
  color: var(--sage);
}

.how2-menu .mi.on .lbl {
  color: #FFFFFF;
  font-weight: 500;
}

.how2-menu .mi.on .tick {
  width: 18px;
  opacity: 1;
}

.how2-steps {
  position: relative;
  margin-top: -100vh;
  z-index: 3;
  pointer-events: none;
}

.how2-step {
  height: 100vh;
}

/* screen surface variants: frosted glass (default) vs solid white — toggled by body.screens-solid via Tweaks */
:root {
  --app-surface: rgba(255,255,255,0.62);
  --app-filter: blur(22px) saturate(1.25);
  --app-border: rgba(255,255,255,0.55);
  --app-glow: inset 0 1px 0 rgba(255,255,255,0.65);
  --app-cell: rgba(255,255,255,0.50);
  --app-cell-border: rgba(255,255,255,0.60);
  --app-rec-bg: rgba(255,255,255,0.55);
  --app-bot-bg: rgba(255,255,255,0.35);
  --app-foot-bg: rgba(255,255,255,0.30);
  --app-dark-bg: rgba(17,17,17,0.82);
}

body.screens-solid {
  --app-surface: #FFFFFF;
  --app-filter: none;
  --app-border: var(--hair-2);
  --app-glow: 0 0 rgba(0,0,0,0);
  --app-cell: var(--paper);
  --app-cell-border: var(--hair);
  --app-rec-bg: #FFFFFF;
  --app-bot-bg: #FFFFFF;
  --app-foot-bg: var(--paper);
  --app-dark-bg: var(--black-warm);
}

.app {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  background: var(--app-surface);
  backdrop-filter: var(--app-filter);
  -webkit-backdrop-filter: var(--app-filter);
  border: 1px solid var(--app-border);
  border-radius: 22px;
  box-shadow: var(--shadow-lift), var(--app-glow);
  overflow: hidden;
}

.app-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--hair);
}

.app-title {
  font-family: 'DM Sans',sans-serif;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.app-meta {
  font-family: 'IBM Plex Mono',monospace;
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-4);
}

.app-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
  padding: 10px 16px;
  min-height: 0;
}

.app-tile {
  flex: none;
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--app-cell);
  border: 1px solid var(--app-cell-border);
  border-radius: 12px;
  padding: 9px 12px;
}

.app-tile .ic {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  display: grid;
  place-items: center;
  flex: none;
}

.app-tile .ic svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.app-tile .ic.dark {
  background: var(--black-warm);
  color: #FFFFFF;
}

.app-tile .ic.green {
  background: var(--green-pale);
  color: var(--green);
}

.app-tile .ic.coral {
  background: var(--coral-soft);
  color: var(--terracotta);
}

.app-tile .t {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.app-tile .nm {
  font-family: 'DM Sans',sans-serif;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--ink);
}

.app-tile .sub {
  font-family: 'IBM Plex Mono',monospace;
  font-size: 8.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-4);
}

.app-tag {
  font-family: 'DM Sans',sans-serif;
  font-size: 10.5px;
  font-weight: 600;
  color: var(--green);
  background: var(--green-pale);
  border-radius: 999px;
  padding: 4px 10px;
  white-space: nowrap;
}

.app-tag.plain {
  color: var(--ink-2);
  background: var(--paper-2);
}

.app-score {
  display: grid;
  grid-template-columns: 74px 1fr 30px;
  align-items: center;
  gap: 12px;
  padding: 1px 4px;
}

.app-score .nm {
  font-family: 'DM Sans',sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-2);
}

.app-score .bar {
  height: 5px;
  border-radius: 999px;
  background: var(--paper-3);
  overflow: hidden;
}

.app-score .bar i {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--green);
}

.app-score .bar i.warn {
  background: var(--terracotta);
}

.app-score .num {
  font-family: 'IBM Plex Mono',monospace;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--green);
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.app-score .num.warn {
  color: var(--terracotta);
}

.app-quote {
  margin-top: 4px;
  background: var(--coral-soft);
  border: 1px solid rgba(199,106,82,0.25);
  border-left: 3px solid var(--coral);
  border-radius: 10px;
  padding: 9px 13px;
  font-family: 'Cormorant Garamond',serif;
  font-style: italic;
  font-size: 13px;
  line-height: 1.45;
  color: var(--ink-2);
}

.app-rec {
  flex: none;
  background: var(--app-rec-bg);
  border: 1px solid var(--app-cell-border);
  border-radius: 12px;
  overflow: hidden;
}

.app-rec.warn {
  border-color: rgba(184,92,44,0.22);
}

.app-rec.warn .top {
  background: var(--coral-soft);
}

.app-rec .top {
  padding: 9px 12px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}

.app-rec .tag {
  font-family: 'IBM Plex Mono',monospace;
  font-size: 8.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--green);
}

.app-rec .tag.warn {
  color: var(--terracotta);
}

.app-rec .nm {
  font-family: 'DM Sans',sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.app-rec .sub {
  font-family: 'IBM Plex Mono',monospace;
  font-size: 8px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-4);
}

.app-rec .txt {
  font-family: 'DM Sans',sans-serif;
  font-size: 12px;
  line-height: 1.5;
  color: var(--ink-3);
}

.app-rec .bot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 5px 12px;
  border-top: 1px solid var(--hair);
  background: var(--app-bot-bg);
  font-family: 'DM Sans',sans-serif;
  font-size: 11px;
  color: var(--ink-3);
}

.app-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 4px;
  background: var(--black-warm);
  color: #FFFFFF;
  font-family: 'DM Sans',sans-serif;
  font-size: 11px;
  font-weight: 600;
  padding: 7px 13px;
  border-radius: 999px;
}

.app-compare {
  flex: none;
  background: var(--green-pale);
  border-radius: 12px;
  padding: 10px 13px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.app-compare .tag {
  font-family: 'IBM Plex Mono',monospace;
  font-size: 8.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--green);
}

.app-compare .row {
  display: flex;
  align-items: center;
  gap: 20px;
}

.app-compare .col {
  display: flex;
  flex-direction: column;
  gap: 2px;
  white-space: nowrap;
}

.app-compare .k {
  font-family: 'IBM Plex Mono',monospace;
  font-size: 8px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-4);
}

.app-compare .v {
  font-family: 'DM Sans',sans-serif;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.app-compare .v.warn {
  color: var(--terracotta);
}

.app-compare .v.ok {
  color: var(--green);
}

.app-compare .arr {
  font-size: 17px;
  color: var(--ink-4);
}

.app-compare .imp {
  font-family: 'DM Sans',sans-serif;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--green);
}

.app-dark {
  background: var(--app-dark-bg);
  padding: 14px 20px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.app-dark .tag {
  font-family: 'IBM Plex Mono',monospace;
  font-size: 8.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--terracotta-2);
}

.app-dark .ttl {
  font-size: 19px;
  font-weight: 500;
  letter-spacing: -0.015em;
  line-height: 1.15;
  color: #FFFFFF;
  max-width: 22ch;
}

.app-dark .sub {
  font-family: 'IBM Plex Mono',monospace;
  font-size: 8.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--black-text-dim);
}

.app-delta {
  display: grid;
  grid-template-columns: 1fr 36px minmax(104px,auto);
  align-items: center;
  gap: 14px;
  padding: 6px 4px;
  border-bottom: 1px solid var(--hair);
}

.app-delta:last-child {
  border-bottom: none;
}

.app-delta .nm {
  font-family: 'DM Sans',sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
}

.app-delta .num {
  font-family: 'IBM Plex Mono',monospace;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.app-delta .num.warn {
  color: var(--terracotta);
}

.app-delta .d {
  font-family: 'IBM Plex Mono',monospace;
  font-size: 9px;
  letter-spacing: 0.06em;
  text-align: right;
}

.app-delta .d.up {
  color: var(--green);
}

.app-delta .d.down {
  color: var(--terracotta);
}

.app-delta .d.flat {
  color: var(--ink-4);
}

.app-foot {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  border-top: 1px solid var(--hair);
  background: var(--app-foot-bg);
  font-family: 'IBM Plex Mono',monospace;
  font-size: 9.5px;
  letter-spacing: 0.06em;
  color: var(--ink-3);
}

.app-foot .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--coral);
  flex: none;
}

/* ════════════════════════════════════════════════════════════
   Recommendations · between tests
   ════════════════════════════════════════════════════════════ */

.rec-row {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: 72px;
  align-items: center;
}

.rec-copy .sec-head {
  margin-bottom: 36px;
}

.rec-srcs .k {
  font-family: 'IBM Plex Mono',monospace;
  font-size: 9.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-4);
  font-weight: 500;
  margin-bottom: 8px;
}

.rec-srcs .v {
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--ink-3);
  max-width: 52ch;
}

.rec-srcs .v b {
  color: var(--ink-2);
  font-weight: 600;
}

.rec-card {
  background: var(--white);
  border: 1px solid var(--hair-2);
  border-radius: 22px;
  box-shadow: var(--shadow-card);
  overflow: hidden;
}

.rec-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 24px 28px;
  background: var(--black-warm);
}

.rec-marker {
  font-family: 'Cormorant Garamond',serif;
  font-size: 26px;
  font-weight: 500;
  letter-spacing: -0.015em;
  line-height: 1.1;
  color: #FFFFFF;
}

.rec-sub {
  margin-top: 7px;
  font-family: 'IBM Plex Mono',monospace;
  font-size: 10px;
  letter-spacing: 0.1em;
  color: var(--black-text-dim);
}

.rec-flag {
  font-family: 'IBM Plex Mono',monospace;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #FFA94D;
  border: 1px solid rgba(255,169,77,0.45);
  border-radius: 999px;
  padding: 6px 12px;
  white-space: nowrap;
}

.rec-flag.ok {
  color: var(--sage);
  border-color: rgba(91,207,160,0.4);
}

.rec-item {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 18px;
  align-items: center;
  padding: 22px 28px;
  border-top: 1px solid var(--hair);
}

.rec-ic {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--green-pale);
  display: grid;
  place-items: center;
}

.rec-ic svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: var(--green);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.rec-cat {
  font-family: 'IBM Plex Mono',monospace;
  font-size: 9.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--green);
  font-weight: 500;
  margin-bottom: 5px;
}

.rec-body p {
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--ink-2);
  max-width: 40ch;
}

.rec-ref {
  margin-top: 7px;
  font-family: 'IBM Plex Mono',monospace;
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-4);
}

.rec-log {
  font-family: 'DM Sans',sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: var(--green);
  background: none;
  border: 1px solid var(--green-soft-2);
  border-radius: 999px;
  padding: 9px 18px;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s var(--ease-out);
}

.rec-log:hover {
  background: var(--green);
  border-color: var(--green);
  color: #FFFFFF;
}

.rec-foot {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 18px 28px;
  border-top: 1px solid var(--hair);
  background: var(--paper);
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--ink-3);
}

.rec-foot .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--green);
  flex: none;
}



















































































































































































/* ════════════════════════════════════════════════════════════
   Ask anything (#ask) — chat card in the rec-card language
   ════════════════════════════════════════════════════════════ */

.ask-row {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 72px;
  align-items: center;
}

.chat-body {
  padding: 26px 28px 24px;
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.chat-user {
  align-self: flex-end;
  max-width: 78%;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 7px;
}

.chat-user p {
  background: var(--black-warm);
  color: rgba(255,255,255,0.92);
  font-size: 14px;
  line-height: 1.6;
  padding: 13px 17px;
  border-radius: 16px 16px 4px 16px;
}

.chat-when {
  font-family: 'IBM Plex Mono',monospace;
  font-size: 8.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-4);
}

.chat-ans {
  display: flex;
  align-items: flex-start;
  gap: 13px;
}

/* the roundel motif from the lockup, drawn in CSS */
.chat-avatar {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1.5px solid var(--green);
  flex: none;
  margin-top: 3px;
  position: relative;
}

.chat-avatar::after {
  content: '';
  position: absolute;
  inset: 5px;
  border-radius: 50%;
  background: var(--green);
}

.chat-ans-body {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}

.chat-ans-body p {
  font-size: 14px;
  line-height: 1.65;
  color: var(--ink-2);
}

/* the answer quotes the user's own data back: a small framed trend */
.chat-spark {
  border: 1px solid var(--hair);
  border-radius: 12px;
  background: var(--paper);
  padding: 12px 14px 10px;
}

.chat-spark .k {
  display: flex;
  justify-content: space-between;
  font-family: 'IBM Plex Mono',monospace;
  font-size: 8.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-4);
}

.chat-spark .k .low {
  color: #C97B2D;
}

.chat-spark svg {
  display: block;
  width: 100%;
  height: 44px;
  margin: 8px 0 6px;
}

.chat-spark .ln {
  fill: none;
  stroke: var(--green);
  stroke-width: 1.6;
  stroke-linecap: round;
}

.chat-spark .pt {
  fill: var(--green);
}

.chat-spark .pt.end {
  fill: #C97B2D;
}

.chat-refs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.chat-ref {
  font-family: 'IBM Plex Mono',monospace;
  font-size: 8.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
  border: 1px solid var(--hair);
  background: var(--white);
  border-radius: 999px;
  padding: 6px 11px;
  white-space: nowrap;
}

/* static affordance, deliberately not a real input */
.chat-input {
  margin-top: 4px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  border: 1px solid var(--hair-2);
  border-radius: 999px;
  padding: 9px 9px 9px 18px;
  background: var(--white);
}

.chat-input > span:first-child {
  font-size: 13.5px;
  color: var(--ink-4);
}

.chat-input .send {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--green);
  color: #FFFFFF;
  display: grid;
  place-items: center;
  font-size: 15px;
  flex: none;
}

/* ════════════════════════════════════════════════════════════
   Sample report
   ════════════════════════════════════════════════════════════ */

.report-stage::before {
  content: '';
  position: absolute;
  top: -40%;
  left: -10%;
  width: 60%;
  height: 80%;
  background: radial-gradient(ellipse,rgba(255,255,255,0.07),transparent 70%);
  pointer-events: none;
}

.report-stage::after {
  content: '';
  position: absolute;
  inset: 0;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'><filter id='n'><feTurbulence baseFrequency='0.9' numOctaves='2'/></filter><rect width='200' height='200' filter='url(%23n)' opacity='0.4'/></svg>");
  opacity: 0.04;
  pointer-events: none;
  mix-blend-mode: overlay;
}

.report-grid {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 64px;
  align-items: center;
  position: relative;
}

.report-copy {
  color: var(--black-text);
}

.report-copy h3 {
  font-family: 'Cormorant Garamond',serif;
  font-size: clamp(36px,4vw,52px);
  line-height: 1.04;
  letter-spacing: -0.022em;
  color: #ECECEC;
  font-weight: 500;
  margin-bottom: 24px;
  text-wrap: balance;
}

.report-copy p {
  font-family: 'DM Sans',sans-serif;
  font-size: 15px;
  line-height: 1.7;
  color: rgba(236,236,236,0.78);
  max-width: 42ch;
  text-wrap: pretty;
  font-weight: 400;
}

.report-copy p+p {
  margin-top: 14px;
}

.report-copy p em {
  font-family: 'Cormorant Garamond',serif;
  font-style: italic;
  color: #ECECEC;
  font-size: 1.1em;
  letter-spacing: -0.005em;
  font-weight: 500;
}

.report-labels {
  margin-top: 32px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.report-label {
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: 'IBM Plex Mono',monospace;
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(236,236,236,0.55);
  font-weight: 500;
  cursor: pointer;
  transition: color 0.3s var(--ease);
}

.report-label .n {
  font-family: 'Cormorant Garamond',serif;
  font-style: italic;
  font-size: 24px;
  color: rgba(236,236,236,0.45);
  font-weight: 500;
  letter-spacing: -0.015em;
  text-transform: none;
  width: 30px;
  line-height: 1;
  transition: color 0.3s var(--ease);
}

.report-label .ttl {
  font-family: 'DM Sans',sans-serif;
  font-size: 14px;
  letter-spacing: -0.005em;
  text-transform: none;
  color: rgba(236,236,236,0.55);
  font-weight: 500;
  transition: color 0.3s var(--ease);
}

.report-label:hover {
  color: rgba(236,236,236,0.9);
}

.report-device {
  position: relative;
  perspective: 2000px;
}

.tablet {
  background: var(--card);
  border-radius: 18px;
  padding: 16px;
  box-shadow: 0 30px 60px rgba(0,0,0,0.45),0 0 0 1px rgba(255,255,255,0.08);
  transform: rotateY(-3deg) rotateX(2deg);
  transform-origin: center;
  position: relative;
}

.tablet::before {
  content: '';
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  width: 48px;
  height: 4px;
  background: rgba(15,20,19,0.15);
  border-radius: 2px;
}

.tablet-screen {
  background: var(--card-cream);
  border-radius: 8px;
  padding: 28px 28px 32px;
  aspect-ratio: 4/3;
  display: flex;
  flex-direction: column;
  gap: 16px;
  overflow: hidden;
  position: relative;
}

.tablet-scene {
  display: none;
  flex-direction: column;
  gap: 14px;
  flex: 1;
}

.tablet-scene.on {
  display: flex;
  animation: sceneIn 0.45s var(--ease-out);
}

@keyframes sceneIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

.tablet-eyebrow {
  font-family: 'IBM Plex Mono',monospace;
  font-size: 9px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--green);
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 8px;
}

.tablet-eyebrow::before {
  content: '';
  width: 14px;
  height: 1px;
  background: var(--green);
}

.tablet-h {
  font-family: 'Cormorant Garamond',serif;
  font-size: 22px;
  line-height: 1.18;
  color: var(--ink);
  font-weight: 500;
  letter-spacing: -0.012em;
  text-wrap: balance;
}

.tablet-h em {
  font-style: italic;
  color: var(--green);
}

.tablet-body {
  font-family: 'DM Sans',sans-serif;
  font-size: 11.5px;
  line-height: 1.6;
  color: var(--ink-2);
  max-width: 42ch;
  font-weight: 400;
}

.tablet-body em {
  font-family: 'Cormorant Garamond',serif;
  font-style: italic;
  color: var(--ink);
  font-size: 1.1em;
  font-weight: 500;
  letter-spacing: -0.005em;
}

.tablet-chart {
  margin-top: auto;
  height: 90px;
  position: relative;
}

.tablet-chart svg {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
}

.tablet-chart-axis {
  font-family: 'IBM Plex Mono',monospace;
  font-size: 7.5px;
  letter-spacing: 0.08em;
  fill: var(--ink-4);
  text-transform: uppercase;
  font-weight: 500;
}

.tablet-pills {
  display: flex;
  gap: 8px;
  margin-top: 6px;
}

.tablet-chart-fill {
  fill: url(#chartfill);
  opacity: 0.8;
}

.report-copy h3 em {
  font-style: italic;
  color: var(--sage);
}

.report-copy .eyebrow {
  color: var(--sage);
  margin-bottom: 18px;
}

.report-copy .eyebrow::before {
  background: var(--sage);
}

.report-label.active .n,
.report-label.active .ttl {
  color: #ECECEC;
}

.report-stage {
  background: linear-gradient(165deg,#141414 0%,var(--black-warm) 55%,var(--black-elev) 100%);
  border-radius: 32px;
  padding: 84px 64px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(0,0,0,0.22),inset 0 1px 0 rgba(255,255,255,0.07);
}

.tablet-chart-line {
  fill: none;
  stroke: #5BAA85;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.tablet-pill {
  padding: 4px 8px;
  border-radius: 4px;
  background: rgba(91,170,133,0.18);
  color: #0F4A38;
  font-family: 'IBM Plex Mono',monospace;
  font-size: 8.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 500;
}

.tablet-pill.amber {
  background: rgba(255,169,77,0.22);
  color: #7A5320;
}

.tablet-rows {
  display: flex;
  flex-direction: column;
  margin-top: 2px;
}

.tablet-rows .tr {
  display: grid;
  grid-template-columns: 1fr auto minmax(96px,auto);
  align-items: center;
  gap: 14px;
  padding: 9px 2px;
  border-bottom: 1px solid var(--hair);
}

.tablet-rows .tr:last-child {
  border-bottom: none;
}

.tablet-rows .nm {
  font-family: 'DM Sans',sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-2);
}

.tablet-rows .v {
  font-family: 'IBM Plex Mono',monospace;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink);
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.tablet-rows .v.warn {
  color: var(--terracotta);
}

.tablet-rows .d {
  font-family: 'IBM Plex Mono',monospace;
  font-size: 8.5px;
  letter-spacing: 0.06em;
  text-align: right;
}

.tablet-rows .d.up {
  fill: none;
  color: var(--green);
}

.tablet-rows .d.down {
  color: var(--terracotta);
}

.tablet-rows .d.flat {
  color: var(--ink-4);
}

.tablet-chart.tall {
  height: 110px;
}

.tablet-evt-line {
  stroke: rgba(21,21,21,0.25);
  stroke-width: 1;
  stroke-dasharray: 2 3;
}

.tablet-evt-dot {
  fill: var(--ink);
  stroke: #FAF8F2;
  stroke-width: 1.5;
}

.tablet-evt-lbl {
  font-family: 'IBM Plex Mono',monospace;
  font-size: 7.5px;
  letter-spacing: 0.08em;
  fill: var(--ink-2);
  font-weight: 500;
}

/* ════════════════════════════════════════════════════════════
   Personas
   ════════════════════════════════════════════════════════════ */

/* centred heading block above the persona switcher */
.who-head {
  text-align: center;
  max-width: 760px;
  margin: 0 auto 40px;
}

.who-head .lede {
  margin: 18px auto 0;
}

.who2-tabs {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 18px;
}

/* single cycle-progress hairline under the tab row, driven by --p (0..1) from scripts.js;
   .off hides it once the user takes manual control */
.who2-progress {
  width: 200px;
  height: 2px;
  margin: 0 auto 40px;
  border-radius: 999px;
  background: var(--hairline);
  overflow: hidden;
  transition: opacity 0.4s var(--ease);
}

.who2-progress i {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--green);
  transform: scaleX(var(--p, 0));
  transform-origin: left;
}

.who2-progress.off {
  opacity: 0;
}

.who2-tab {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  height: 46px;
  padding: 0 22px;
  border-radius: 999px;
  border: 1.5px solid var(--hairline-2);
  background: transparent;
  color: var(--ink-2);
  font-size: 14.5px;
  font-weight: 500;
  cursor: pointer;
  transition: all .25s var(--ease-out);
}

.who2-tab .d {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ink-4);
  transition: background .25s;
}

.who2-tab:hover {
  background: var(--white);
}

.who2-tab.on {
  background: var(--ink);
  color: var(--white);
  border-color: var(--ink);
}

.who2-tab.on .d {
  background: var(--on-dark-em);
}

.who2-stage {
  position: relative;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-2xl);
  overflow: hidden;
  box-shadow: var(--shadow-lift);
  min-height: 440px;
}

.who2-panel {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: 0.92fr 1.08fr;
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity .5s var(--ease-out),transform .5s var(--ease-out),visibility .5s;
}

.who2-panel.on {
  opacity: 1;
  visibility: visible;
  transform: none;
  position: relative;
}

.who2-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  inset: 0;
  filter: saturate(0.9) contrast(1.03);
}

.who2-photo .ph-flag {
  z-index: 2;
}

.who2-body {
  padding: 48px 48px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.who2-body .tag {
  font-family: 'JetBrains Mono',monospace;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--green);
  margin-bottom: 16px;
}

.who2-body h3 {
  font-family: 'Playfair Display',serif;
  font-weight: 400;
  font-size: clamp(26px,2.8vw,36px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin-bottom: 14px;
}

.who2-body h3 em {
  font-style: normal;
  color: inherit;
}

.who2-body p {
  font-size: 16px;
  line-height: 1.65;
  color: var(--ink-3);
  max-width: 42ch;
  margin-bottom: 24px;
}

.who2-markers {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 22px;
  border-top: 1px solid var(--hairline);
}

.who2-mk {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.who2-mk .mk-n {
  font-family: 'JetBrains Mono',monospace;
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--ink-2);
}

.who2-mk .mk-bar {
  flex: 1;
  height: 5px;
  border-radius: 999px;
  background: var(--paper-2);
  overflow: hidden;
  max-width: 160px;
}

.who2-mk .mk-bar i {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--green);
  width: 0;
  transition: width .9s var(--ease-out);
}

.who2-mk .mk-bar i.warn {
  background: var(--terracotta);
}

.who2-panel.on .mk-bar i {
  width: var(--w);
}

.who2-mk .mk-s {
  font-family: 'JetBrains Mono',monospace;
  font-size: 10.5px;
  color: var(--ink-4);
  width: 64px;
  text-align: right;
}











































































.who2-photo {
  position: relative;
  overflow: visible;
  min-height: 440px;
  background: var(--paper-3);
}













.who2-tab.is-active,
.persona-tab.active {
  font-family: 'Cormorant Garamond','Fraunces',serif !important;
  font-style: italic !important;
  font-weight: 500 !important;
  letter-spacing: -0.012em !important;
  font-size: 1.08em !important;
}

/* ════════════════════════════════════════════════════════════
   Safety & advisor
   ════════════════════════════════════════════════════════════ */

.safe-row {
  margin-top: 56px;
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: 1px;
  background: var(--black-rule);
  border: 1px solid var(--black-rule);
  border-radius: 20px;
  overflow: hidden;
}

.safe-cell {
  background: var(--black);
  padding: 30px 26px 36px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.safe-top {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.safe-top .n {
  font-family: 'IBM Plex Mono',monospace;
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--sage);
  font-weight: 500;
}

.safe-top .ic {
  width: 30px;
  height: 30px;
  border: 1px solid var(--black-rule);
  border-radius: 9px;
  display: grid;
  place-items: center;
  flex: none;
}

.safe-top .ic svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: var(--sage);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.safe-top .ln {
  flex: 1;
  height: 1px;
  background: var(--black-rule);
}

.safe-cell h4 {
  font-family: 'Cormorant Garamond',serif;
  font-size: 23px;
  line-height: 1.16;
  letter-spacing: -0.018em;
  color: var(--black-text);
  font-weight: 500;
  text-wrap: balance;
}

.safe-cell p {
  font-family: 'DM Sans',sans-serif;
  font-size: 14px;
  line-height: 1.65;
  color: var(--black-text-dim);
  text-wrap: pretty;
}

.safe-close {
  margin-top: 72px;
  padding-top: 48px;
  border-top: 1px solid var(--black-rule);
}

.safe-close p {
  font-style: italic;
  font-size: clamp(26px,2.8vw,38px);
  line-height: 1.25;
  letter-spacing: -0.015em;
  color: var(--black-text);
  font-weight: 500;
  max-width: 24ch;
  text-wrap: balance;
}

.safe-close p em {
  font-style: italic;
  color: var(--sage);
}

/* ════════════════════════════════════════════════════════════
   Data & privacy
   ════════════════════════════════════════════════════════════ */

.priv-row {
  margin-top: 56px;
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: 40px;
  border-top: 1px solid var(--hairline-2);
  padding-top: 44px;
}

.priv-cell {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.priv-cell .ic {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--green-pale);
  display: grid;
  place-items: center;
  margin-bottom: 8px;
}

.priv-cell .ic svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: var(--green);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.priv-cell h4 {
  font-family: 'Cormorant Garamond',serif;
  font-size: 23px;
  font-weight: 500;
  letter-spacing: -0.018em;
  line-height: 1.15;
  color: var(--ink);
}

.priv-cell p {
  font-size: 14px;
  line-height: 1.65;
  color: var(--ink-3);
  text-wrap: pretty;
  max-width: 26ch;
}

/* ════════════════════════════════════════════════════════════
   FAQ accordion
   ════════════════════════════════════════════════════════════ */

.faq {
  max-width: 780px;
}

/* two-column layout: intro on the left, questions on the right */
.faq-grid {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: 64px;
  align-items: start;
}

@media (max-width: 820px) {
  .faq-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }
}

.faq-item {
  border-top: 1px solid var(--hairline-2);
}

.faq-item:last-child {
  border-bottom: 1px solid var(--hairline-2);
}

.faq-q {
  width: 100%;
  display: grid;
  grid-template-columns: 34px 1fr auto;
  align-items: center;
  gap: 16px;
  padding: 24px 0;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
}

.faq-q .num {
  font-family: 'IBM Plex Mono',monospace;
  font-size: 10px;
  letter-spacing: 0.14em;
  color: var(--green);
  font-weight: 500;
}

.faq-q .qt {
  font-family: 'Cormorant Garamond',serif;
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.015em;
  line-height: 1.25;
  color: var(--ink);
  transition: color 0.25s var(--ease);
}

.faq-q:hover .qt {
  color: var(--green);
}

.faq-ic {
  width: 30px;
  height: 30px;
  border: 1px solid var(--hairline-2);
  border-radius: 50%;
  position: relative;
  flex: none;
  transition: transform 0.35s var(--ease-out),border-color 0.25s var(--ease),background 0.25s var(--ease);
}

.faq-ic::before,
.faq-ic::after {
  content: '';
  position: absolute;
  background: var(--ink-2);
  transition: background 0.25s var(--ease);
}

.faq-ic::before {
  width: 12px;
  height: 1.5px;
  left: 8px;
  top: 13.5px;
}

.faq-ic::after {
  width: 1.5px;
  height: 12px;
  left: 13.5px;
  top: 8px;
}

.faq-item.open .faq-ic {
  transform: rotate(45deg);
  border-color: var(--green);
  background: var(--green-pale);
}

.faq-item.open .faq-ic::before,
.faq-item.open .faq-ic::after {
  background: var(--green);
}

.faq-a {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s var(--ease-out);
}

.faq-a .inner {
  padding: 2px 56px 28px 50px;
  font-size: 15.5px;
  line-height: 1.7;
  color: var(--ink-3);
  max-width: 58ch;
}

/* ════════════════════════════════════════════════════════════
   Closing
   ════════════════════════════════════════════════════════════ */

.closing-cta {
  display: flex;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}

.closing blockquote::before {
  content: '\201C';
  color: var(--ink);
  font-size: 1.1em;
  line-height: 0;
  position: relative;
  top: 0.18em;
  margin-right: 4px;
}

.closing blockquote {
  font-family: 'Cormorant Garamond',serif;
  font-style: italic;
  font-size: clamp(32px,3.8vw,52px);
  line-height: 1.3;
  letter-spacing: -0.025em;
  color: var(--ink);
  max-width: 38ch;
  margin: 0 auto;
  font-weight: 500;
  text-wrap: balance;
}

.closing blockquote em {
  font-style: italic;
  color: var(--sage-deep);
}

.closing {
  text-align: center;
  padding: 120px 0;
  background: var(--paper-soft);
  border-top: 1px solid var(--hair-2);
  padding-bottom: 48px !important;
}

.closing .eyebrow {
  opacity: 0.7;
}

.closing .h2 {
  max-width: 18ch;
  margin: 0 auto 22px;
  font-size: clamp(36px, 4vw, 56px) !important;
  margin-bottom: 18px !important;
}

.closing .lede {
  margin: 0 auto 40px;
  margin-bottom: 32px !important;
  opacity: 0.85;
}

.closing-v5 {
  padding: 144px 0 128px !important;
  text-align: center !important;
  background: var(--paper, #F8FAF7) !important;
  border-top: 1px solid var(--hair, rgba(14,13,11,0.08));
}

.closing-v5 .closing-thesis {
  font-family: 'Cormorant Garamond','Fraunces',serif !important;
  font-style: italic !important;
  font-size: clamp(56px, 7.4vw, 96px) !important;
  line-height: 1.04 !important;
  letter-spacing: -0.028em !important;
  font-weight: 500 !important;
  max-width: 18ch !important;
  margin: 0 auto 48px !important;
  text-wrap: balance !important;
  color: var(--ink, #0E0D0B) !important;
}

.closing-v5 .closing-thesis em {
  font-style: italic !important;
  color: var(--green, #1F5C4A) !important;
}

.closing-v5 .closing-bookend {
  font-family: 'Cormorant Garamond','Fraunces',serif !important;
  font-size: clamp(20px, 1.9vw, 26px) !important;
  font-style: normal !important;
  line-height: 1.45 !important;
  letter-spacing: -0.012em !important;
  font-weight: 400 !important;
  max-width: 38ch !important;
  margin: 0 auto 40px !important;
  color: var(--ink-3, #6B665D) !important;
  text-wrap: balance !important;
  padding-top: 32px !important;
  border-top: 1px solid var(--hair, rgba(14,13,11,0.08));
  width: fit-content !important;
}

.closing-v5 .closing-bookend em {
  font-style: italic !important;
  color: var(--ink-2, #363330) !important;
  font-weight: 500 !important;
}

.closing-v5 .closing-cta {
  display: flex !important;
  justify-content: center !important;
  margin-bottom: 24px !important;
}

.closing-v5 .meta {
  font-family: 'JetBrains Mono','IBM Plex Mono',monospace !important;
  font-size: 10.5px !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: var(--ink-4, #A29D92) !important;
  font-weight: 500 !important;
}

/* ════════════════════════════════════════════════════════════
   Footer
   ════════════════════════════════════════════════════════════ */

.footer {
  background: var(--dark);
  color: var(--on-dark);
  padding: 80px 0 32px;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: 48px;
  margin-bottom: 54px;
}

.footer .logo {
  margin-bottom: 16px;
}

.footer .logo img {
  height: 32px;
}

.footer .logo .lk-light {
  display: none;
}

.footer .logo .lk-dark {
  display: block;
}

.footer-tag {
  font-family: 'Playfair Display',serif;
  font-style: italic;
  font-size: 17px;
  color: var(--on-dark-2);
  max-width: 30ch;
  line-height: 1.4;
}

.footer h5 {
  font-family: 'JetBrains Mono',monospace;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--on-dark-3);
  margin-bottom: 18px;
}

.footer-col a {
  display: block;
  font-size: 14px;
  color: var(--on-dark-2);
  padding: 6px 0;
  transition: color .15s var(--ease-out);
}

.footer-col a:hover {
  color: var(--on-dark);
}

.footer-base {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding-top: 28px;
  border-top: 1px solid var(--on-dark-line);
}

.footer-base .meta {
  color: var(--on-dark-3);
}

/* ════════════════════════════════════════════════════════════
   Misc / overrides
   ════════════════════════════════════════════════════════════ */

.ph {
  position: relative;
  overflow: hidden;
  background: var(--paper-3);
}

.photo,
.ph img,
.who2-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ph:not(.is-loaded):not(.is-stock) {
  background-image: repeating-linear-gradient(135deg, rgba(21,21,21,0.035) 0 14px, rgba(21,21,21,0.06) 14px 28px);
}

.trend-dot.d1 {
  transition-delay: .5s;
}

.dpill.ok {
  background: var(--green-soft);
  color: var(--green);
}

.dpill.warn {
  background: var(--coral-soft);
  color: var(--terracotta);
}

.ph-flag {
  position: absolute;
  left: 14px;
  bottom: 14px;
  z-index: 3;
  font-family: 'JetBrains Mono',monospace;
  font-size: 9.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(236,236,236,0.9);
  background: rgba(12,29,23,0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.10);
}

.rp-scene.on {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.rp-nav-i.active {
  background: var(--paper-2);
  font-weight: 500;
  color: var(--ink);
}

.rp-card.dark {
  background: var(--dark);
  color: var(--on-dark);
}

.rp-card-ic.ok {
  background: var(--green);
  color: #fff;
}

.rp-card-ic.warn {
  position: relative;
  background: rgba(255,255,255,0.14);
  color: var(--on-dark-em);
}

.rp-dot.on {
  background: var(--green);
  width: 26px;
  border-radius: 999px;
}

.ph .ph-flag {
  transition: opacity 0.4s var(--ease, ease-out);
}

.ph.is-loaded .ph-flag {
  opacity: 0;
  pointer-events: none;
}

.ph:has(img:not([src*="unsplash.com"]):not([src=""])) .ph-flag:not(.stock-only) {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease;
}

.ph.is-stock .ph-flag {
  background: rgba(14,13,11,0.5);
  color: rgba(255,255,255,0.85);
  border-color: transparent;
  font-size: 9.5px;
  letter-spacing: 0.16em;
  padding: 4px 9px;
  opacity: 0.65;
}

/* editorial caption overlay: mono eyebrow + one line over a bottom scrim.
   Used sparingly (gap photo, Emma) — the caption must ADD a fact, not repeat copy */
.ph-cap {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  padding: 96px 26px 24px;
  background: linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.08) 34%, rgba(0,0,0,0.62) 100%);
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
}

.ph-cap .k {
  font-family: 'IBM Plex Mono',monospace;
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--sage);
}

.ph-cap p {
  font-family: 'DM Sans',sans-serif;
  font-size: 15px;
  line-height: 1.55;
  color: rgba(255,255,255,0.94);
  max-width: 40ch;
  text-wrap: pretty;
  text-shadow: 0 1px 12px rgba(0,0,0,0.35);
}

/* deep variant for LIGHT photos: the band is near-solid where the text sits,
   so worst-case contrast holds even over pure white (verified ≥5:1 at the body line) */
.ph-cap.deep {
  padding-top: 88px;
  background: linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.5) 38%, rgba(0,0,0,0.86) 72%, rgba(0,0,0,0.94) 100%);
}

/* ════════════════════════════════════════════════════════════
   Keyframes
   ════════════════════════════════════════════════════════════ */



















@keyframes pinPulse {0%{transform:scale(0.7);opacity:0.85}70%{transform:scale(1.5);opacity:0}100%{transform:scale(1.5);opacity:0}}

@keyframes fluxFlow {to{stroke-dashoffset:-70}}











/* ════════════════════════════════════════════════════════════
   Clinics page (clinics.html)
   ════════════════════════════════════════════════════════════ */

.page-head {
  padding-top: calc(var(--nav-h) + 96px);
}

.clin-stats {
  margin-top: 56px;
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 1px;
  background: var(--hairline-2);
  border: 1px solid var(--hairline-2);
  border-radius: 18px;
  overflow: hidden;
}

.clin-stat {
  background: var(--white);
  padding: 30px 28px 34px;
}

.clin-stat b {
  display: block;
  font-family: 'Cormorant Garamond',serif;
  font-size: 42px;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--ink);
}

.clin-stat small {
  display: block;
  margin-top: 12px;
  font-family: 'IBM Plex Mono',monospace;
  font-size: 9.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--green);
  font-weight: 500;
}

.clin-stat p {
  margin-top: 12px;
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--ink-3);
}

.clin-steps {
  margin-top: 56px;
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: 36px;
}

.clin-step {
  position: relative;
  padding-top: 22px;
}

/* the top rule is a pseudo-element so the progressive reveal can wipe it in */
.clin-step::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background: var(--hairline-2);
}

.clin-step .n {
  font-family: 'IBM Plex Mono',monospace;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--green);
  font-weight: 500;
}

.clin-step h4 {
  margin-top: 14px;
  font-family: 'Cormorant Garamond',serif;
  font-size: 24px;
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.15;
  color: var(--ink);
}

.clin-step p {
  margin-top: 10px;
  font-size: 14px;
  line-height: 1.65;
  color: var(--ink-3);
}

/* progressive reveal: each step rises in turn, its rule wiping across just ahead
   of the text. Visible end-state is the base style; hidden states live only here. */
@media (prefers-reduced-motion: no-preference) {
  .clin-steps.reveal .clin-step {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out);
  }

  .clin-steps.reveal .clin-step::before {
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.85s var(--ease-out);
  }

  .clin-steps.reveal .clin-step:nth-child(2),
.clin-steps.reveal .clin-step:nth-child(2)::before {
    transition-delay: 0.16s;
  }

  .clin-steps.reveal .clin-step:nth-child(3),
.clin-steps.reveal .clin-step:nth-child(3)::before {
    transition-delay: 0.32s;
  }

  .clin-steps.reveal .clin-step:nth-child(4),
.clin-steps.reveal .clin-step:nth-child(4)::before {
    transition-delay: 0.48s;
  }

  .clin-steps.reveal.in .clin-step {
    opacity: 1;
    transform: none;
  }

  .clin-steps.reveal.in .clin-step::before {
    transform: scaleX(1);
  }

}

.clin-save {
  margin-top: 64px;
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 32px;
  background: var(--black-warm);
  border-radius: 18px;
  padding: 34px 40px;
}

.clin-save .k {
  display: block;
  font-family: 'IBM Plex Mono',monospace;
  font-size: 9.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--black-text-dim);
  margin-bottom: 10px;
}

.clin-save .v {
  font-family: 'Cormorant Garamond',serif;
  font-size: clamp(22px,2.2vw,30px);
  font-weight: 500;
  letter-spacing: -0.01em;
  color: #FFFFFF;
}

.clin-save .v.hl {
  color: var(--sage);
}

.clin-score {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 17px 28px;
  border-top: 1px solid var(--hair);
  font-size: 14.5px;
  color: var(--ink-2);
}

.clin-score .s {
  font-family: 'IBM Plex Mono',monospace;
  font-size: 9.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 500;
}

.clin-score .s.ok {
  color: var(--green);
}

.clin-score .s.watch {
  color: #B26A1F;
}

.clin-narrative {
  padding: 22px 28px 26px;
  border-top: 1px solid var(--hair);
  background: var(--paper);
}

.clin-narrative .k {
  font-family: 'IBM Plex Mono',monospace;
  font-size: 9.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-4);
  font-weight: 500;
}

.clin-narrative p {
  margin-top: 12px;
  font-family: 'Cormorant Garamond',serif;
  font-style: italic;
  font-size: 19px;
  line-height: 1.5;
  color: var(--ink-2);
}

.pilot-form {
  margin-top: 48px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px 24px;
  max-width: 720px;
}

.pilot-form label {
  display: flex;
  flex-direction: column;
  gap: 9px;
  font-family: 'IBM Plex Mono',monospace;
  font-size: 9.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 500;
}

.pilot-form input,
.pilot-form select {
  font-family: 'DM Sans',sans-serif;
  font-size: 15px;
  color: var(--ink);
  background: var(--white);
  border: 1px solid var(--hairline-2);
  border-radius: 12px;
  padding: 13px 16px;
  outline: none;
  width: 100%;
  box-sizing: border-box;
  transition: border-color 0.2s var(--ease);
}

.pilot-form input:focus,
.pilot-form select:focus {
  border-color: var(--green);
}

.pilot-form .full {
  grid-column: 1 / -1;
}

.pilot-note {
  margin-top: 22px;
  font-size: 13px;
  line-height: 1.7;
  color: var(--ink-4);
  max-width: 60ch;
}

/* clinical control · process flow (clinics.html) — sans headings by design,
   the serif stays in the section head only */
.ctl-flow {
  margin-top: 56px;
  display: grid;
  grid-template-columns: 1fr 44px 1.18fr 44px 1fr;
  align-items: stretch;
}

.ctl-stage {
  background: var(--black-elev);
  border: 1px solid var(--black-rule);
  border-radius: 18px;
  padding: 26px 26px 30px;
  display: flex;
  flex-direction: column;
}

.ctl-stage .n {
  font-family: 'IBM Plex Mono',monospace;
  font-size: 9.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--black-text-dim);
  font-weight: 500;
}

.ctl-stage h4 {
  margin-top: 14px;
  font-family: 'DM Sans',sans-serif;
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.2;
  color: #FFFFFF;
}

.ctl-stage p {
  margin-top: 10px;
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--black-text-dim);
  flex: 1;
}

.ctl-stage .m {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--black-rule);
  font-family: 'IBM Plex Mono',monospace;
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--black-text-dim);
}

.ctl-stage.gate {
  border-color: rgba(91,207,160,0.45);
  box-shadow: 0 0 0 1px rgba(91,207,160,0.18), 0 18px 48px rgba(0,0,0,0.35);
  position: relative;
}

.ctl-stage.gate .n,
.ctl-stage.gate .m {
  color: var(--sage);
}

.ctl-stage.gate .tag {
  position: absolute;
  top: -11px;
  left: 24px;
  font-family: 'IBM Plex Mono',monospace;
  font-size: 8.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--black);
  background: var(--sage);
  border-radius: 999px;
  padding: 5px 10px;
}

.ctl-link {
  position: relative;
}

.ctl-link span {
  position: absolute;
  top: 50%;
  left: 6px;
  right: 6px;
  height: 1px;
  background: repeating-linear-gradient(90deg, rgba(91,207,160,0.55) 0 4px, transparent 4px 9px);
}

.ctl-link span::after {
  content: '';
  position: absolute;
  right: -1px;
  top: -3.5px;
  width: 8px;
  height: 8px;
  border-top: 1px solid rgba(91,207,160,0.75);
  border-right: 1px solid rgba(91,207,160,0.75);
  transform: rotate(45deg) scale(0.8);
}

.ctl-base {
  margin-top: 40px;
  padding-top: 28px;
  border-top: 1px solid var(--black-rule);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
}

.ctl-fact {
  display: flex;
  align-items: flex-start;
  gap: 13px;
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--black-text-dim);
}

.ctl-fact svg {
  width: 17px;
  height: 17px;
  margin-top: 2px;
  flex: none;
  fill: none;
  stroke: var(--sage);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ════════════════════════════════════════════════════════════
   Guides page (guides.html)
   ════════════════════════════════════════════════════════════ */

.gd {
  padding-top: 24px;
}

.gd-cat {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: 64px;
  border-top: 1px solid var(--hairline-2);
  padding: 56px 0 64px;
}

.gd-cat-head {
  display: flex;
  align-items: flex-start;
  gap: 22px;
}

.gd-cat-head .n {
  font-family: 'IBM Plex Mono',monospace;
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--green);
  font-weight: 500;
  padding-top: 10px;
}

.gd-cat-head h2 {
  font-size: clamp(26px,2.6vw,36px);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.12;
  color: var(--ink);
  text-wrap: pretty;
}

.gd-cat-head h2 em {
  font-style: italic;
  color: var(--green);
}

.gd-list {
  display: flex;
  flex-direction: column;
}

.gd-item {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas:
    'meta arr'
    'body arr';
  align-items: center;
  column-gap: 24px;
  row-gap: 8px;
  padding: 26px 0;
  text-decoration: none;
  border-top: 1px solid var(--hairline);
}

.gd-item:first-child {
  border-top: none;
  padding-top: 4px;
}

.gd-meta {
  grid-area: meta;
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: 'IBM Plex Mono',monospace;
  font-size: 9.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 500;
}

.gd-meta .tag {
  color: var(--green);
}

.gd-meta .time {
  color: var(--ink-4);
}

.gd-body {
  grid-area: body;
  display: block;
}

.gd-body .t {
  display: block;
  font-family: 'Cormorant Garamond',serif;
  font-size: clamp(21px,2vw,26px);
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.2;
  color: var(--ink);
  text-wrap: pretty;
  transition: color 0.2s var(--ease);
}

.gd-body .d {
  display: block;
  margin-top: 8px;
  font-size: 14px;
  line-height: 1.65;
  color: var(--ink-3);
  max-width: 58ch;
}

.gd-arr {
  grid-area: arr;
  font-size: 18px;
  color: var(--ink-4);
  transition: transform 0.25s var(--ease), color 0.25s var(--ease);
}

.gd-item:hover .t {
  color: var(--green);
}

.gd-item:hover .gd-arr {
  transform: translateX(5px);
  color: var(--green);
}

/* paper button for dark bands */
.btn-paper {
  background: var(--paper);
  color: var(--ink);
  border: 1px solid transparent;
}

.btn-paper:hover {
  background: #FFFFFF;
}

/* ════════════════════════════════════════════════════════════
   Guide articles (guides/*.html) — editorial reading page
   ════════════════════════════════════════════════════════════ */

.art-head {
  max-width: 780px;
  padding-top: calc(var(--nav-h) + 88px);
}

.art-crumb {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: 'IBM Plex Mono',monospace;
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--ink-4);
  text-decoration: none;
  margin-bottom: 26px;
}

.art-crumb b {
  color: var(--green);
  font-weight: 500;
}

.art-crumb:hover b {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.art-head h1 {
  font-family: 'Cormorant Garamond',serif;
  font-size: clamp(36px,4.2vw,54px);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.06;
  color: var(--ink);
  text-wrap: pretty;
}

.art-head h1 em {
  font-style: italic;
  color: var(--green);
}

.art-stand {
  margin-top: 22px;
  font-size: 18px;
  line-height: 1.65;
  color: var(--ink-3);
  font-weight: 300;
  max-width: 62ch;
  text-wrap: pretty;
}

.art-meta {
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid var(--hairline-2);
  display: flex;
  flex-wrap: wrap;
  gap: 8px 26px;
  font-family: 'IBM Plex Mono',monospace;
  font-size: 9.5px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--ink-4);
}

.art-meta .hl {
  color: var(--green);
}

/* prose body — single measured column */
.art-body {
  max-width: 720px;
  padding-bottom: 40px;
}

.art-body p {
  font-size: 16.5px;
  line-height: 1.75;
  color: var(--ink-2);
  margin: 0 0 20px;
  text-wrap: pretty;
}

.art-body p b {
  color: var(--ink);
  font-weight: 600;
}

.art-body h2 {
  font-family: 'Cormorant Garamond',serif;
  font-size: clamp(26px,2.6vw,33px);
  font-weight: 500;
  letter-spacing: -0.015em;
  line-height: 1.12;
  color: var(--ink);
  margin: 56px 0 18px;
  text-wrap: pretty;
}

.art-body h2 em {
  font-style: italic;
  color: var(--green);
}

.art-body h3 {
  font-family: 'DM Sans',sans-serif;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 34px 0 12px;
}

.art-body ul,
.art-body ol {
  margin: 0 0 20px;
  padding-left: 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.art-body li {
  font-size: 16px;
  line-height: 1.7;
  color: var(--ink-2);
}

.art-body li::marker {
  color: var(--green);
}

/* key points — opens every article */
.art-key {
  background: var(--paper-2);
  border-radius: 18px;
  padding: 26px 30px 28px;
  margin: 38px 0 44px;
}

.art-key .k {
  font-family: 'IBM Plex Mono',monospace;
  font-size: 9.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--green);
  margin-bottom: 14px;
}

.art-key ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 11px;
}

.art-key li {
  position: relative;
  padding-left: 22px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-2);
}

.art-key li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 9px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  border: 1.5px solid var(--green);
}

/* reference range table */
.art-table {
  width: 100%;
  border-collapse: collapse;
  margin: 30px 0 36px;
}

.art-table caption {
  text-align: left;
  font-family: 'IBM Plex Mono',monospace;
  font-size: 9.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--ink-4);
  padding-bottom: 12px;
}

.art-table th {
  font-family: 'IBM Plex Mono',monospace;
  font-size: 9.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--ink-4);
  text-align: left;
  padding: 10px 18px 10px 0;
  border-bottom: 1px solid var(--hairline-2);
}

.art-table td {
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--ink-2);
  padding: 13px 18px 13px 0;
  border-bottom: 1px solid var(--hairline);
  vertical-align: top;
}

.art-table td.num {
  font-family: 'IBM Plex Mono',monospace;
  font-size: 13px;
  white-space: nowrap;
}

.art-table td .st {
  font-family: 'IBM Plex Mono',monospace;
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 500;
}

.art-table .st.ok { color: var(--green); }
.art-table .st.watch { color: #B26A1F; }
.art-table .st.low { color: var(--coral); }

/* GP conversation callout */
.art-note {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  background: var(--white);
  border: 1px solid var(--hair-2);
  border-radius: 16px;
  box-shadow: var(--shadow-card);
  padding: 24px 28px;
  margin: 36px 0;
}

.art-note .ic {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--green-pale);
  display: grid;
  place-items: center;
  flex: none;
}

.art-note .ic svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: var(--green);
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.art-note .k {
  font-family: 'IBM Plex Mono',monospace;
  font-size: 9.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--green);
  margin-bottom: 7px;
}

.art-note p {
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--ink-2);
  margin: 0;
}

/* quiet product tie-in */
.art-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  background: var(--paper-2);
  border-radius: 18px;
  padding: 26px 30px;
  margin: 52px 0 0;
}

.art-cta p {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--ink-2);
  margin: 0;
  max-width: 48ch;
}

.art-cta p b {
  font-weight: 600;
  color: var(--ink);
}

.art-cta .btn {
  flex: none;
  white-space: nowrap;
}

/* sources + disclaimer */
.art-src {
  max-width: 720px;
  margin-top: 56px;
  padding-top: 24px;
  border-top: 1px solid var(--hairline-2);
}

.art-src .k {
  font-family: 'IBM Plex Mono',monospace;
  font-size: 9.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--ink-4);
  margin-bottom: 12px;
}

.art-src p {
  font-size: 13px;
  line-height: 1.7;
  color: var(--ink-3);
  margin: 0 0 8px;
}

.art-disc {
  margin-top: 20px;
  font-family: 'IBM Plex Mono',monospace;
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-4);
  line-height: 2;
}

/* related guides — reuses the index row language */
.art-related h2 {
  font-family: 'Cormorant Garamond',serif;
  font-size: clamp(24px,2.4vw,30px);
  font-weight: 500;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin-bottom: 8px;
}

/* ════════════════════════════════════════════════════════════
   Early access page (early-access.html)
   ════════════════════════════════════════════════════════════ */

.ea-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}

.ea-copy .eyebrow {
  margin-bottom: 18px;
}

.ea-copy h1 {
  font-family: 'Cormorant Garamond',serif;
  font-size: clamp(34px,4vw,50px);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.05;
  color: var(--ink);
  text-wrap: pretty;
}

.ea-copy h1 em {
  font-style: italic;
  color: var(--green);
}

.ea-copy .lede {
  margin-top: 18px;
}

.ea-list {
  list-style: none;
  margin: 30px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.ea-list li {
  display: flex;
  align-items: flex-start;
  gap: 13px;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--ink-2);
}

.ea-list .tick {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--green-pale);
  flex: none;
  display: grid;
  place-items: center;
  margin-top: 1px;
}

.ea-list .tick svg {
  width: 13px;
  height: 13px;
  fill: none;
  stroke: var(--green);
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ea-card {
  background: var(--white);
  border: 1px solid var(--hair-2);
  border-radius: 22px;
  box-shadow: var(--shadow-card);
  padding: 36px 36px 32px;
}

.ea-title {
  font-size: 27px;
  font-weight: 500;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin-bottom: 22px;
}

.ea-toggle {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  background: var(--paper-2);
  border-radius: 999px;
  padding: 4px;
  margin-bottom: 24px;
}

.ea-seg {
  border: none;
  background: transparent;
  font-family: 'DM Sans',sans-serif;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: -0.005em;
  color: var(--ink-3);
  padding: 10px 12px;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.2s var(--ease), color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}

.ea-seg.active {
  background: var(--white);
  color: var(--ink);
  box-shadow: 0 1px 3px rgba(21,21,21,0.1);
}

.ea-form {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.ea-field[hidden] {
  display: none;
}

.ea-field {
  display: flex;
  flex-direction: column;
  gap: 9px;
  font-family: 'IBM Plex Mono',monospace;
  font-size: 9.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 500;
}

.ea-field input,
.ea-field select,
.ea-field textarea {
  font-family: 'DM Sans',sans-serif;
  font-size: 15px;
  letter-spacing: normal;
  text-transform: none;
  color: var(--ink);
  background: var(--white);
  border: 1px solid var(--hairline-2);
  border-radius: 12px;
  padding: 13px 16px;
  outline: none;
  width: 100%;
  box-sizing: border-box;
  transition: border-color 0.2s var(--ease);
}

.ea-field input:focus,
.ea-field select:focus,
.ea-field textarea:focus {
  border-color: var(--green);
}

.ea-field select {
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238F8F8F' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 36px;
}

.ea-field textarea {
  min-height: 130px;
  resize: vertical;
  line-height: 1.6;
}

.ea-cardsub {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--ink-3);
  margin: -10px 0 22px;
}

.ea-submit {
  margin-top: 4px;
  width: 100%;
}

.ea-note {
  font-family: 'IBM Plex Mono',monospace;
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-4);
  text-align: center;
  line-height: 1.7;
}

.ea-error {
  font-size: 13px;
  line-height: 1.5;
  color: #B42318;
  text-align: center;
  background: #FEF3F2;
  border: 1px solid #FDA29B;
  border-radius: 10px;
  padding: 10px 14px;
}

.ea-error[hidden] {
  display: none;
}

.ea-success {
  text-align: center;
  padding: 18px 8px 12px;
}

.ea-tick {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--green-pale);
  display: grid;
  place-items: center;
  margin: 0 auto 20px;
}

.ea-tick svg {
  width: 26px;
  height: 26px;
  fill: none;
  stroke: var(--green);
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ea-success h2 {
  font-size: 28px;
  font-weight: 500;
  letter-spacing: -0.015em;
  color: var(--ink);
}

.ea-success p {
  margin-top: 12px;
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--ink-3);
  max-width: 40ch;
  margin-left: auto;
  margin-right: auto;
}

.ea-back {
  display: inline-block;
  margin-top: 22px;
  color: var(--green);
}

.ea-trust {
  margin-top: 64px;
  padding-top: 28px;
  border-top: 1px solid var(--hairline-2);
  display: flex;
  flex-wrap: wrap;
  gap: 14px 40px;
  font-family: 'IBM Plex Mono',monospace;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-4);
}

.ea-trust b {
  color: var(--green);
  font-weight: 500;
}

/* ════════════════════════════════════════════════════════════
   Contact page (contact.html)
   ════════════════════════════════════════════════════════════ */

.ea-row.top {
  align-items: start;
}

.sec-h {
  font-size: clamp(28px,3.4vw,44px);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.06;
  color: var(--ink);
  margin-top: 16px;
}

.sec-h em {
  font-style: italic;
  color: var(--green);
}

.ct-routes {
  margin-top: 44px;
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: 16px;
}

.ct-card {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--hair-2);
  border-radius: 16px;
  padding: 24px;
  box-shadow: var(--shadow-card);
  text-decoration: none;
  transition: transform 0.18s var(--ease), box-shadow 0.18s var(--ease), border-color 0.18s var(--ease);
}

.ct-card:hover {
  transform: translateY(-2px);
  border-color: var(--hairline-2);
  box-shadow: 0 14px 34px rgba(21,21,21,0.09), 0 2px 6px rgba(21,21,21,0.04);
}

.ct-icon {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: var(--green-pale);
  display: grid;
  place-items: center;
  margin-bottom: 16px;
}

.ct-icon svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: var(--green);
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ct-label {
  font-family: 'IBM Plex Mono',monospace;
  font-size: 9.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-4);
  font-weight: 500;
  margin-bottom: 8px;
}

.ct-title {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin-bottom: 7px;
}

.ct-body {
  font-size: 13px;
  line-height: 1.6;
  color: var(--ink-3);
}

.ct-mail {
  margin-top: 16px;
  font-family: 'IBM Plex Mono',monospace;
  font-size: 10.5px;
  letter-spacing: 0.04em;
  color: var(--green);
}

.ct-safety {
  margin-top: 28px;
  display: flex;
  gap: 18px;
  align-items: flex-start;
  background: var(--white);
  border: 1px solid var(--hair-2);
  border-radius: 16px;
  padding: 22px 26px;
}

.ct-safety .ic {
  width: 40px;
  height: 40px;
  flex: none;
  border-radius: 11px;
  background: var(--paper-2);
  border: 1px solid var(--hair-2);
  display: grid;
  place-items: center;
}

.ct-safety .ic svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: var(--ink-3);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ct-safety .k {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 5px;
}

.ct-safety p {
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--ink-3);
  max-width: 72ch;
}

.ct-safety a {
  color: var(--green);
  text-decoration: underline;
  text-underline-offset: 3px;
}

@media(max-width:920px) {
  .ct-routes {
    grid-template-columns: repeat(2,1fr);
  }
}

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

  .ct-safety {
    flex-direction: column;
    gap: 14px;
  }
}

/* ════════════════════════════════════════════════════════════
   Legal & privacy (legal-privacy.html)
   ════════════════════════════════════════════════════════════ */

.legal-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  margin-top: 26px;
  font-family: 'IBM Plex Mono',monospace;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-4);
}

.legal-meta .hl {
  color: var(--green);
}

.legal-layout {
  display: grid;
  grid-template-columns: 232px 1fr;
  gap: 72px;
  align-items: start;
  max-width: 1080px;
}

/* sticky table of contents */
.legal-toc {
  position: sticky;
  top: calc(var(--nav-h) + 28px);
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.legal-toc .grp {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.legal-toc .grp > .gh {
  font-family: 'IBM Plex Mono',monospace;
  font-size: 9.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-4);
  padding: 7px 0 9px;
  border-bottom: 1px solid var(--hairline);
  margin-bottom: 5px;
}

.legal-toc a {
  font-size: 13.5px;
  line-height: 1.4;
  color: var(--ink-3);
  padding: 6px 0 6px 14px;
  border-left: 2px solid transparent;
  transition: color 0.18s var(--ease), border-color 0.18s var(--ease);
}

.legal-toc a:hover {
  color: var(--ink);
}

.legal-toc a.top {
  font-weight: 500;
  color: var(--ink-2);
  padding-left: 0;
  border-left: none;
}

.legal-toc a.top:hover {
  color: var(--green);
}

.legal-toc a.active {
  color: var(--green);
  border-color: var(--green);
}

/* policy sections */
.legal-content {
  min-width: 0;
}

.legal-sec {
  scroll-margin-top: calc(var(--nav-h) + 24px);
  padding-bottom: 56px;
  margin-bottom: 56px;
  border-bottom: 1px solid var(--hairline);
}

.legal-sec:last-child {
  border-bottom: none;
  margin-bottom: 0;
}

.legal-sec > .legal-kicker {
  font-family: 'IBM Plex Mono',monospace;
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--green);
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
}

.legal-sec > .legal-kicker::before {
  content: '';
  width: 18px;
  height: 1px;
  background: currentColor;
}

.legal-sec > h2 {
  font-family: 'Cormorant Garamond',serif;
  font-size: clamp(30px,3.4vw,42px);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.04;
  color: var(--ink);
  margin-bottom: 14px;
  text-wrap: pretty;
}

.legal-sec > h2 em {
  font-style: italic;
  color: var(--green);
}

.legal-sec > .legal-lede {
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink-3);
  margin-bottom: 30px;
  max-width: 64ch;
}

/* prose inside a policy reuses .art-body, full column width */
.legal-sec .art-body {
  max-width: none;
  padding-bottom: 0;
}

.legal-sec .art-body h3 {
  font-family: 'Cormorant Garamond',serif;
  font-weight: 500;
  font-size: 23px;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 34px 0 12px;
  scroll-margin-top: calc(var(--nav-h) + 24px);
}

.legal-sec .art-body h3:first-child {
  margin-top: 0;
}

/* definition-style rows for data tables (what we collect / retention) */
.legal-deflist {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  background: var(--hairline);
  border: 1px solid var(--hairline);
  border-radius: 14px;
  overflow: hidden;
  margin: 4px 0 24px;
}

.legal-defrow {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 20px;
  background: var(--white);
  padding: 16px 20px;
}

.legal-defrow .dt {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.45;
}

.legal-defrow .dd {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--ink-3);
}

.legal-contactcard {
  margin-top: 4px;
  background: var(--paper-2);
  border-radius: 16px;
  padding: 22px 24px;
}

.legal-contactcard .k {
  font-family: 'IBM Plex Mono',monospace;
  font-size: 9.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-4);
  margin-bottom: 10px;
}

.legal-contactcard p {
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--ink-2);
}

.legal-contactcard a {
  color: var(--green);
  border-bottom: 1px solid var(--green-soft);
  padding-bottom: 1px;
}

.legal-contactcard a:hover {
  border-color: var(--green);
}

/* ════════════════════════════════════════════════════════════
   404 / not found (404.html)
   ════════════════════════════════════════════════════════════ */

.nf {
  min-height: calc(100vh - var(--nav-h));
  display: flex;
  align-items: center;
}

.nf-inner {
  max-width: 660px;
  margin: 0 auto;
  text-align: center;
  padding: 40px 0;
}

.nf-h {
  font-size: clamp(40px,6vw,68px);
  font-weight: 500;
  letter-spacing: -0.025em;
  line-height: 1.02;
  color: var(--ink);
  margin: 18px 0 0;
  text-wrap: balance;
}

.nf-h em {
  font-style: italic;
  color: var(--green);
}

.nf-lede {
  margin: 20px auto 0;
  max-width: 50ch;
}

/* the clever bit: a lab-reading card whose value is 404, flagged out of range */
.nf-card {
  margin: 38px auto 36px;
  max-width: 380px;
  background: var(--white);
  border: 1px solid var(--hair-2);
  border-radius: 18px;
  box-shadow: var(--shadow-card);
  padding: 22px 24px 20px;
  text-align: left;
}

.nf-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.nf-k {
  font-family: 'IBM Plex Mono',monospace;
  font-size: 9.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-4);
}

.nf-flag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: 'IBM Plex Mono',monospace;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #B5432B;
  background: var(--coral-soft);
  border-radius: 999px;
  padding: 4px 10px;
}

.nf-flag::before {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
}

.nf-val {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-family: 'Cormorant Garamond',serif;
  font-size: 58px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--ink);
  line-height: 1;
}

.nf-unit {
  font-family: 'IBM Plex Mono',monospace;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-4);
}

.nf-path {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--hairline);
  font-family: 'IBM Plex Mono',monospace;
  font-size: 11px;
  color: var(--ink-4);
}

.nf-path span {
  letter-spacing: 0.1em;
  text-transform: uppercase;
  flex: none;
}

.nf-path code {
  color: var(--ink-2);
  word-break: break-all;
}

.nf-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px 26px;
  flex-wrap: wrap;
}

.nf-link {
  font-size: 14.5px;
  color: var(--ink-3);
  border-bottom: 1px solid var(--hairline-2);
  padding-bottom: 2px;
  transition: color 0.18s var(--ease), border-color 0.18s var(--ease);
}

.nf-link:hover {
  color: var(--green);
  border-color: var(--green);
}

/* ════════════════════════════════════════════════════════════
   Responsive · breakpoints
   ════════════════════════════════════════════════════════════ */

@media(max-width:860px) {
  .nav-links {
    display: none;
  }

}

@media(max-width:560px) {
  .nav-inner {
    padding: 0 24px;
  }

  .nav-cta {
    padding: 9px 14px;
    font-size: 13px;
  }

}







@media(max-width:920px) {
  .spread,
.spread.r,
.spread.l {
    grid-template-columns: 1fr;
    gap: 36px;
  }

  .spread .ph {
    max-width: 520px;
  }

}

@media(max-width:920px) {
  .report-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .report-stage {
    padding: 56px 36px;
  }

  .report-device {
    max-width: 480px;
    margin: 0 auto;
    width: 100%;
  }

  .tablet {
    width: 100%;
  }

}

@media(max-width:560px) {
  .report-stage {
    padding: 40px 20px;
  }

}

@media(max-width:920px) {
  .story {
    grid-template-columns: 1fr;
    gap: 34px;
  }

  .story .ph {
    max-width: 460px;
  }

}



@media(max-width:920px) {
  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 36px;
  }

}







@media(max-width:900px) {
  .story-reverse {
    grid-template-columns: 1fr;
  }

}





@media(max-width:920px) {
  .story-large,
.story-large.story-reverse {
    grid-template-columns: 1fr;
    gap: 36px;
  }

}



@media(max-width:1040px) {
  .how2-device {
    width: clamp(320px,46vw,460px);
  }

}

@media(max-width:1140px) and (min-width:821px) {
  .how2-stage {
    grid-template-columns: 1fr auto;
  }

  .how2-menu {
    display: none;
  }

}

@media(max-width:820px) {
  /* Mobile: drop the sticky pin entirely and stack all five chapters as a
     readable list inside the photo card. No floating, no clipped card. */
  .how2-scrolly {
    margin-top: 36px;
  }

  .how2-sticky {
    position: static;
    height: auto;
    display: block;
    padding: 0 var(--gutter);
  }

  .how2-stage {
    grid-template-columns: 1fr;
    height: auto;
    padding: 36px 26px;
    background:
      linear-gradient(180deg,rgba(11,11,11,0.84) 0%,rgba(11,11,11,0.74) 100%),
      url('assets/how-bg.jpg') center/cover no-repeat #161616;
  }

  .how2-device,
.how2-menu {
    display: none;
  }

  .how2-steps {
    display: none;
  }

  .how2-textcol {
    display: block;
    min-height: auto;
  }

  .how2-text,
.how2-text.on,
.how2-text:not(.on) {
    display: block;
    position: relative;
    top: auto;
    opacity: 1;
    transform: none;
    pointer-events: auto;
    max-width: none;
    padding: 26px 0;
    border-top: 1px solid rgba(255,255,255,0.14);
  }

  .how2-textcol .how2-text:first-child {
    border-top: none;
    padding-top: 0;
  }

  .how2-text p {
    max-width: none;
  }

}

@media(max-width:820px) {
  .who2-panel,
.who2-panel.on {
    grid-template-columns: 1fr;
  }

  .who2-photo {
    min-height: 280px;
  }

  .who2-body {
    padding: 32px 24px;
  }

}





@media(max-width:1000px) {
  .report-grid {
    grid-template-columns: 1fr;
    gap: 48px;
  }

}

@media(max-width:1000px) {
  .labs-row {
    grid-template-columns: repeat(3,1fr);
  }

  .labs-row .lab:nth-child(3n) {
    border-right: none;
  }

  .labs-row .lab {
    border-bottom: 1px solid var(--hair);
  }

}

@media(max-width:600px) {
  .labs-row {
    grid-template-columns: 1fr 1fr;
  }

  .labs-row .lab:nth-child(3n) {
    border-right: 1px solid var(--hair);
  }

  .labs-row .lab:nth-child(2n) {
    border-right: none;
  }

}


/* ════════════════════════════════════════════════════════════
   Hero · tap-to-play overlay (iOS LPM fallback)
   ════════════════════════════════════════════════════════════ */
.herov-play {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 2;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: rgba(10,10,10,0.55);
  border: 1px solid rgba(255,255,255,0.25);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%,-50%) scale(0.92);
  transition: opacity .35s var(--ease), transform .35s var(--ease);
}

.herov-play.show {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%,-50%) scale(1);
}

.herov-play svg {
  width: 26px;
  height: 26px;
  fill: currentColor;
  margin-left: 3px;
}

.herov-play:hover {
  background: rgba(10,10,10,0.7);
}

/* ════════════════════════════════════════════════════════════
   Recommendation card · animated cycle through items
   ════════════════════════════════════════════════════════════ */
.rec-item {
  transition: background .35s var(--ease), opacity .45s var(--ease);
  border-radius: 14px;
}

.rec-item.is-now {
  background: rgba(31,92,74,0.045);
  box-shadow: inset 2px 0 0 var(--green);
}

/* Log it button: two-state swap with smooth transition */
.rec-log {
  position: relative;
  overflow: hidden;
  min-width: 84px;
  transition: background .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease), transform .18s var(--ease);
}

.rec-log .rl-default,
.rec-log .rl-done {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: opacity .25s var(--ease), transform .35s var(--ease);
}

.rec-log .rl-done {
  position: absolute;
  inset: 0;
  justify-content: center;
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
}

.rec-log .rl-done svg {
  width: 13px;
  height: 13px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.rec-item.is-pressing .rec-log {
  transform: scale(0.94);
  background: var(--green);
  border-color: var(--green);
  color: #FFFFFF;
}

.rec-item.is-logged .rec-log {
  background: var(--green-pale);
  border-color: transparent;
  color: var(--green);
  pointer-events: none;
}

.rec-item.is-logged .rl-default {
  opacity: 0;
  transform: translateY(-8px);
}

.rec-item.is-logged .rl-done {
  opacity: 1;
  transform: translateY(0);
}

.rec-item.is-logged {
  opacity: 0.78;
}

.rec-item.is-logged .rec-ic {
  color: var(--green);
}

/* ════════════════════════════════════════════════════════════
   Ask Anything · staged reveal of the chat
   ════════════════════════════════════════════════════════════ */

/* Thinking-dots indicator (the "is typing…" affordance) */
.chat-thinking {
  display: none;
  align-items: center;
  gap: 6px;
  padding: 8px 0 6px;
}

.chat-thinking span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--green);
  opacity: 0.4;
  animation: chatDot 1.05s var(--ease) infinite;
}

.chat-thinking span:nth-child(2) { animation-delay: 0.15s; }
.chat-thinking span:nth-child(3) { animation-delay: 0.30s; }

@keyframes chatDot {
  0%, 80%, 100% { transform: translateY(0); opacity: 0.4; }
  40%           { transform: translateY(-4px); opacity: 0.95; }
}

/* Initial states when JS has marked the card .cn-anim */
.ask-card.cn-anim .chat-user,
.ask-card.cn-anim .chat-ans-body > p,
.ask-card.cn-anim .chat-spark,
.ask-card.cn-anim .chat-refs {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .55s var(--ease), transform .55s var(--ease);
}

.ask-card.cn-anim .chat-ans {
  opacity: 0;
  transition: opacity .35s var(--ease);
}

.ask-card.cn-anim .chat-spark .ln {
  stroke-dasharray: 220;
  stroke-dashoffset: 220;
  transition: stroke-dashoffset 1.2s var(--ease);
}

.ask-card.cn-anim .chat-spark .pt {
  opacity: 0;
  transition: opacity .3s var(--ease);
}

.ask-card.cn-anim .chat-ref {
  opacity: 0;
  transform: translateY(4px);
  transition: opacity .35s var(--ease), transform .35s var(--ease);
}

/* Stage 1: user asked */
.ask-card.cn-asked .chat-user {
  opacity: 1;
  transform: none;
}

/* Stage 2: thinking dots */
.ask-card.cn-thinking .chat-ans {
  opacity: 1;
}

.ask-card.cn-thinking .chat-thinking {
  display: flex;
}

/* Stage 3: answer starts (first paragraph) */
.ask-card.cn-answer .chat-ans {
  opacity: 1;
}

.ask-card.cn-answer .chat-ans-body > p:first-of-type {
  opacity: 1;
  transform: none;
}

/* Stage 4: sparkline frame + draw */
.ask-card.cn-spark .chat-spark {
  opacity: 1;
  transform: none;
}

.ask-card.cn-spark .chat-spark .ln {
  stroke-dashoffset: 0;
}

.ask-card.cn-spark .chat-spark .pt:nth-child(2) { opacity: 1; transition-delay: 0.20s; }
.ask-card.cn-spark .chat-spark .pt:nth-child(3) { opacity: 1; transition-delay: 0.55s; }
.ask-card.cn-spark .chat-spark .pt:nth-child(4) { opacity: 1; transition-delay: 0.90s; }
.ask-card.cn-spark .chat-spark .pt:nth-child(5) { opacity: 1; transition-delay: 1.20s; }

/* Stage 5: second answer paragraph */
.ask-card.cn-p2 .chat-ans-body > p:nth-of-type(2) {
  opacity: 1;
  transform: none;
}

/* Stage 6: citations roll in one by one */
.ask-card.cn-refs .chat-refs {
  opacity: 1;
  transform: none;
}

.ask-card.cn-refs .chat-ref:nth-child(1) { opacity: 1; transform: none; transition-delay: 0.05s; }
.ask-card.cn-refs .chat-ref:nth-child(2) { opacity: 1; transform: none; transition-delay: 0.22s; }
.ask-card.cn-refs .chat-ref:nth-child(3) { opacity: 1; transform: none; transition-delay: 0.40s; }

/* Stage 7 (done): subtle settle, nothing to do */

/* ── Mobile: tighter section rhythm so the gap between blocks doesn't read
   as empty space, and stray hero stats hide on the small frame ── */
@media(max-width:820px) {
  .herov-stats {
    display: none;
  }

}

@media(max-width:600px) {
  .sec {
    padding: 64px 0;
  }

  .section {
    padding: 56px 0;
  }

}





@media (min-width: 1024px) {
  #labs.sec {
    padding-top: 128px;
    padding-bottom: 128px;
  }

  #twin.sec {
    padding-top: 128px;
    padding-bottom: 128px;
  }

  #btw.sec {
    padding-top: 128px;
    padding-bottom: 128px;
  }

}





@media(min-width:1000px) {
  #labs {
    padding-top: 144px;
    padding-bottom: 144px;
  }

  #twin {
    padding-top: 144px;
    padding-bottom: 144px;
  }

  #btw {
    padding-top: 144px;
    padding-bottom: 128px;
  }

  #report {
    padding-top: 128px;
  }

}

@media(prefers-reduced-motion:no-preference) {
  

  
  

  
  .labs-row .lab {
    animation: labs-active 16s ease-in-out infinite;
    animation-delay: calc(var(--i,0) * -2.6s);
  }

  .labs-row .lab:nth-child(1) {
    --i: 0;
  }

  .labs-row .lab:nth-child(2) {
    --i: 1;
  }

  .labs-row .lab:nth-child(3) {
    --i: 2;
  }

  .labs-row .lab:nth-child(4) {
    --i: 3;
  }

  .labs-row .lab:nth-child(5) {
    --i: 4;
  }

  .labs-row .lab:nth-child(6) {
    --i: 5;
  }

  @keyframes labs-active {
    0%,85%,100%{opacity:0.55;filter:none}
    8%,18%{opacity:1;filter:none}
  }
}


@media(max-width:1000px) {
  .twin-row,
.rec-row,
.ask-row {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .ask-copy {
    order: -1;
  }


}

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

  .chat-ref {
    white-space: normal;
    max-width: 100%;
  }

  .rec-item .rec-log {
    grid-column: 2;
    justify-self: start;
  }

}

@media(max-width:1000px) {
  .safe-row {
    grid-template-columns: 1fr 1fr;
  }

}

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

}

@media(max-width:1000px) {
  .priv-row {
    grid-template-columns: 1fr 1fr;
    row-gap: 36px;
  }

}

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

}

@media(max-width:560px) {
  :root {
    --gutter: 24px;
  }

  .twin-chip,
.twin-flux {
    display: none;
  }

  .twin-stage {
    height: 500px;
  }

}

@media(max-width:920px) {
  .clin-stats {
    grid-template-columns: 1fr;
  }

  .clin-steps {
    grid-template-columns: 1fr 1fr;
  }

  .clin-save {
    grid-template-columns: 1fr;
    gap: 22px;
  }

}

@media(max-width:560px) {
  .page-head {
    padding-top: calc(var(--nav-h) + 56px);
  }

  .clin-steps {
    grid-template-columns: 1fr;
  }

  .pilot-form {
    grid-template-columns: 1fr;
  }

}

@media(max-width:920px) {
  .gd-cat {
    grid-template-columns: 1fr;
    gap: 28px;
    padding: 44px 0 48px;
  }

}

@media(max-width:920px) {
  .ctl-flow {
    grid-template-columns: 1fr;
  }

  .ctl-link {
    height: 36px;
  }

  .ctl-link span {
    left: 50%;
    right: auto;
    top: 6px;
    bottom: 6px;
    height: auto;
    width: 1px;
    background: repeating-linear-gradient(180deg, rgba(91,207,160,0.55) 0 4px, transparent 4px 9px);
  }

  .ctl-link span::after {
    right: -3.5px;
    top: auto;
    bottom: -1px;
    transform: rotate(135deg) scale(0.8);
  }

  .ctl-base {
    grid-template-columns: 1fr;
    gap: 20px;
  }

}

@media(max-width:560px) {
  .art-head {
    padding-top: calc(var(--nav-h) + 48px);
  }

  .art-table td.num {
    white-space: normal;
  }

  .art-table th,
.art-table td {
    padding-right: 12px;
  }

  .art-key {
    padding: 22px 22px 24px;
  }

  .art-cta {
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
  }

  .art-note {
    padding: 20px;
  }

}

@media(max-width:920px) {
  .ea-row {
    grid-template-columns: 1fr;
    gap: 36px;
  }

}

@media(max-width:560px) {
  .ea-card {
    padding: 28px 22px 26px;
  }

  .ea-trust {
    gap: 12px 28px;
  }

}

@media(max-width:920px) {
  .legal-layout {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .legal-toc {
    position: static;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 40px;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--hairline);
  }

  .legal-toc .grp > .gh {
    display: none;
  }

  .legal-toc .grp {
    flex-direction: row;
    gap: 8px;
  }

  .legal-toc a {
    display: none;
  }

  .legal-toc a.top {
    display: inline-block;
    padding: 9px 16px;
    border: 1px solid var(--hairline-2);
    border-radius: 999px;
    font-size: 13px;
  }

  .legal-toc a.top.active {
    background: var(--green);
    color: var(--white);
    border-color: var(--green);
  }

}

@media(max-width:560px) {
  .legal-defrow {
    grid-template-columns: 1fr;
    gap: 5px;
  }

}

@media(max-width:560px) {
  .nf-val {
    font-size: 48px;
  }

  .nf-actions {
    flex-direction: column;
    gap: 16px;
  }

}