/* ==========================================================================
   STAYHEALTHY.COM 2026: DESIGN SYSTEM
   Editorial chapter system. Bricolage Grotesque display + Manrope body +
   IBM Plex Mono data layer. Navy/bone alternation, cyan primary accent,
   rainbow used only as functional marks.
   ========================================================================== */

/* ---- Self-hosted fonts (no external requests) ---- */
@font-face {
  font-family: 'Bricolage Grotesque';
  src: url('assets/fonts/bricolage-grotesque-700.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Bricolage Grotesque';
  src: url('assets/fonts/bricolage-grotesque-800.woff2') format('woff2');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Manrope';
  src: url('assets/fonts/manrope-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Manrope';
  src: url('assets/fonts/manrope-500.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Manrope';
  src: url('assets/fonts/manrope-700.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Mono';
  src: url('assets/fonts/ibm-plex-mono-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Mono';
  src: url('assets/fonts/ibm-plex-mono-500.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* ---- Tokens ---- */
:root {
  --navy-950: #0B1830;
  --navy-800: #1b2d4f;
  --charcoal: #1f2937;
  --bone: #f9fafb;
  --white: #ffffff;
  --cyan: #1ba7df;
  --cyan-dim: #158ebd;
  --cyan-ink: #0e6f96;
  --red-on-dark: #ff6a61;
  --magenta-on-dark: #ff5c96;

  --teal: #18c4c4;
  --green: #56b947;
  --yellow: #ffd51f;
  --orange: #f7941e;
  --red: #e53935;
  --magenta: #e91e63;

  --muted: #6b7280;
  --muted-on-navy: #9fb0c9;
  --line-on-bone: #e5e7eb;
  --line-on-navy: rgba(255,255,255,0.14);

  --font-display: 'Bricolage Grotesque', 'Manrope', sans-serif;
  --font-body: 'Manrope', -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', monospace;

  --container-wide: 1440px;
  --container: 1180px;
  --container-narrow: 720px;

  --ease-facet: cubic-bezier(0.16, 1, 0.3, 1);
  --dur: 550ms;

  --radius-sm: 3px;
  --radius-md: 6px;
}

/* ---- Reset ---- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; width: 100%; scroll-padding-top: 90px; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}
body {
  margin: 0;
  background: var(--bone);
  color: var(--charcoal);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button { font: inherit; cursor: pointer; }
input, textarea, select { font: inherit; }
h1, h2, h3, h4, h5 { margin: 0; font-family: var(--font-display); font-weight: 800; letter-spacing: -0.01em; }
h1, h2 { line-height: 1.04; letter-spacing: -0.02em; font-size: clamp(2rem, 4vw, 3rem); }
h3, h4, h5 { line-height: 1.2; font-size: clamp(1.3rem, 2.5vw, 1.7rem); }
p { margin: 0; }

/* ---- Focus states ---- */
:focus { outline: none; }
:focus-visible {
  outline: 2.5px solid var(--cyan);
  outline-offset: 3px;
  border-radius: 2px;
}
.on-navy :focus-visible { outline-color: var(--cyan); }

/* ---- Utility ---- */
.container { max-width: var(--container); margin: 0 auto; padding: 0 32px; }
.container-wide { max-width: var(--container-wide); margin: 0 auto; padding: 0 32px; }
.container-narrow { max-width: var(--container-narrow); margin: 0 auto; padding: 0 32px; }
.on-navy { background: var(--navy-950); color: var(--white); }
.on-navy-800 { background: var(--navy-800); color: var(--white); }
.on-bone { background: var(--bone); color: var(--charcoal); }
.on-white { background: var(--white); color: var(--charcoal); }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: 16px; top: -60px; z-index: 1000;
  background: var(--cyan); color: var(--navy-950); padding: 10px 18px;
  font-family: var(--font-mono); font-size: 13px; font-weight: 500;
  border-radius: var(--radius-sm); transition: top 200ms var(--ease-facet);
}
.skip-link:focus { top: 16px; }

.eyebrow {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--cyan);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.eyebrow::before {
  content: '';
  width: 22px;
  height: 1.5px;
  background: currentColor;
  display: inline-block;
}
.on-navy .eyebrow, .on-navy-800 .eyebrow { color: var(--cyan); }
.on-bone .eyebrow, .on-white .eyebrow { color: var(--cyan-ink); }

.cyan { color: var(--cyan); }

/* ---- Buttons ---- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 15px 26px;
  border-radius: var(--radius-sm);
  border: 1.5px solid transparent;
  transition: transform 180ms var(--ease-facet), background 180ms, border-color 180ms, color 180ms;
  white-space: nowrap;
}
@media (max-width: 480px) {
  /* A handful of longer ghost-button labels (e.g. apps.html "See patents and full technology
     detail") force horizontal overflow at nowrap on a 375px viewport -- let long labels wrap. */
  .btn { white-space: normal; text-align: center; }
}
.btn-solid {
  background: var(--cyan);
  color: var(--navy-950);
}
.btn-solid:hover { background: #37b8e6; transform: translateY(-2px); }
.btn-ghost {
  background: transparent;
  border-color: currentColor;
  color: inherit;
}
.on-navy .btn-ghost, .on-navy-800 .btn-ghost { border-color: rgba(255,255,255,0.5); color: var(--white); }
.btn-ghost:hover { border-color: var(--cyan); color: var(--cyan); transform: translateY(-2px); }
.on-bone .btn-ghost, .on-white .btn-ghost { border-color: var(--charcoal); color: var(--charcoal); }
.on-bone .btn-ghost:hover, .on-white .btn-ghost:hover { border-color: var(--cyan-ink); color: var(--cyan-ink); }
.btn svg { width: 15px; height: 15px; flex: none; }

/* ---- Nav ---- */
.site-nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 700;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px 32px;
  background: transparent;
  transition: background 300ms var(--ease-facet), padding 300ms var(--ease-facet), box-shadow 300ms;
}
.site-nav.is-scrolled {
  background: rgba(11,24,48,0.94);
  backdrop-filter: blur(10px);
  padding: 14px 32px;
  box-shadow: 0 1px 0 rgba(255,255,255,0.08);
}
/* Light-hero pages (e.g. apps.html): dark links/logo/hamburger over the light hero,
   switching to the standard white set the moment the nav goes solid on scroll. */
.site-nav[data-nav-theme="light"]:not(.is-scrolled) .nav-links a { color: var(--charcoal); }
.site-nav[data-nav-theme="light"]:not(.is-scrolled) .nav-links a:hover,
.site-nav[data-nav-theme="light"]:not(.is-scrolled) .nav-links a[aria-current="page"] { border-color: var(--cyan); }
.site-nav[data-nav-theme="light"]:not(.is-scrolled) .nav-toggle span { background: var(--charcoal); }
.site-nav .logo-link { display: flex; align-items: center; }
.site-nav .logo-link img { height: 30px; width: auto; }
.nav-links {
  display: flex;
  align-items: center;
  gap: 30px;
}
.nav-links a {
  font-family: var(--font-mono);
  font-size: 12.5px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--white);
  opacity: 0.82;
  transition: opacity 180ms;
  padding: 6px 0;
  border-bottom: 1.5px solid transparent;
}
.nav-links a:hover, .nav-links a[aria-current="page"] { opacity: 1; border-color: var(--cyan); }
.nav-cta {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  background: var(--cyan);
  color: var(--navy-950);
  padding: 11px 20px;
  border-radius: 999px;
  transition: transform 180ms var(--ease-facet), background 180ms;
}
.nav-cta:hover { background: #37b8e6; transform: translateY(-1px); }
.nav-toggle {
  display: none;
  background: none;
  border: none;
  width: 40px; height: 40px;
  position: relative;
  z-index: 620;
}
.nav-toggle span {
  position: absolute; left: 8px; right: 8px; height: 2px; background: var(--white);
  transition: transform 250ms var(--ease-facet), opacity 250ms;
}
.nav-toggle span:nth-child(1) { top: 15px; }
.nav-toggle span:nth-child(2) { top: 23px; }
.nav-toggle span:nth-child(3) { top: 31px; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

.mobile-nav {
  position: fixed; inset: 0; z-index: 600;
  background: var(--navy-950);
  display: flex; flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 26px;
  padding: 40px;
  transform: translateX(100%);
  visibility: hidden;
  transition: transform 380ms var(--ease-facet), visibility 0s linear 380ms;
}
.mobile-nav.is-open { transform: translateX(0); visibility: visible; transition: transform 380ms var(--ease-facet); }
.mobile-nav a:not(.nav-cta) {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 34px;
  color: var(--white);
}
.mobile-nav .nav-cta { margin-top: 16px; align-self: flex-start; }
@media (max-width: 900px) {
  .nav-links { display: none; }
  .site-nav .nav-cta { display: none; }
  .nav-toggle { display: block; }
}

/* ---- Hero (split statement) ---- */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding: 140px 0 80px;
  overflow: hidden;
}
.hero-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 60px;
  align-items: center;
  width: 100%;
}
.hero-copy h1 {
  font-size: clamp(2.6rem, 5.4vw, 4.6rem);
  line-height: 1.03;
  color: var(--white);
  margin: 22px 0 26px;
}
.hero-copy h1 .cyan-line { color: var(--cyan); display: block; }
.hero-copy p.lede {
  font-size: 18px;
  line-height: 1.6;
  color: var(--muted-on-navy);
  max-width: 52ch;
  margin-bottom: 38px;
}
.hero-ctas { display: flex; flex-wrap: wrap; gap: 16px; }
.hero-visual { position: relative; aspect-ratio: 1/1; }
@media (max-width: 980px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-visual { max-width: 380px; margin: 0 auto; }
  .hero { padding-top: 120px; }
}
@media (max-width: 640px) {
  .hero-visual { max-width: 240px; }
}

/* facet mosaic svg: three drift layers (core / rim / shard), see main.js buildMosaic() */
.facet-mosaic { width: 100%; height: 100%; }
.facet-mosaic polygon {
  transform-origin: center;
  mix-blend-mode: normal;
}
.facet-mosaic .cell-core { animation: none; } /* Layer A: solid interior, static */
.facet-mosaic .cell-rim { animation: facetDrift 16s ease-in-out infinite; } /* Layer B: rim shimmer */
.facet-mosaic .cell-shard { animation: facetDrift 23s ease-in-out infinite; } /* Layer C: detached shards */
@keyframes facetDrift {
  0%, 100% { opacity: var(--o1, 0.85); transform: translate(0,0) scale(1); }
  35% { opacity: var(--o2, 0.4); transform: translate(var(--dx,2px), var(--dy,-3px)) scale(1.02); }
  70% { opacity: var(--o1, 0.85); transform: translate(calc(var(--dx,2px) * -1), calc(var(--dy,-3px) * -1)) scale(0.99); }
}
@media (prefers-reduced-motion: reduce) {
  /* Reduced motion: only the static interior mark remains, no drifting rim/shard layers. */
  .facet-mosaic .cell-rim, .facet-mosaic .cell-shard { display: none; }
  .facet-mosaic .cell-core { animation: none !important; transform: none !important; }
}
@media (max-width: 640px) {
  /* At the 240px mobile size, detached shards read as debris rather than mark -- drop them. */
  .facet-mosaic .cell-shard { display: none; }
}

/* ---- Stat band ---- */
.stat-band {
  background: var(--cyan);
  color: var(--navy-950);
  padding: 56px 0;
}
.stat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
}
.stat-item .num {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2.1rem, 4vw, 3.2rem);
  line-height: 1;
}
.stat-item .label {
  margin-top: 10px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  opacity: 0.82;
  min-height: 2.6em;
}
@media (max-width: 900px) {
  .stat-grid { grid-template-columns: repeat(2, 1fr); gap: 34px 24px; }
}

/* ---- Pillar index (editorial numbered rows) ---- */
.pillar-index { padding: 120px 0; }
.pillar-row {
  display: grid;
  grid-template-columns: 140px 1fr auto;
  align-items: center;
  gap: 24px;
  padding: 38px 0;
  border-top: 1px solid var(--line-on-bone);
  transition: padding-left 300ms var(--ease-facet), background 300ms;
}
.pillar-row:last-child { border-bottom: 1px solid var(--line-on-bone); }
.pillar-num {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2.6rem, 6vw, 4.5rem);
  color: transparent;
  -webkit-text-stroke: 1.5px var(--charcoal);
  line-height: 1;
}
.pillar-body h3 {
  font-size: clamp(1.5rem, 3vw, 2.2rem);
  display: flex;
  align-items: center;
  gap: 14px;
}
.pillar-mark { width: 10px; height: 10px; border-radius: 2px; flex: none; }
.pillar-body p { margin-top: 10px; color: var(--muted); max-width: 60ch; }
.pillar-arrow { width: 34px; height: 34px; flex: none; transition: transform 250ms var(--ease-facet); }
.pillar-row:hover { padding-left: 14px; background: rgba(27,167,223,0.04); }
.pillar-row:hover .pillar-arrow { transform: translateX(8px); }
@media (max-width: 700px) {
  .pillar-row { grid-template-columns: 70px 1fr; }
  .pillar-arrow { display: none; }
}

/* ---- Chapter sections ---- */
.chapter { padding: 110px 0; }
.chapter-head { margin-bottom: 56px; }
.chapter-head h2 {
  font-size: clamp(2rem, 4vw, 3rem);
  margin-top: 16px;
  max-width: 18ch;
}
.chapter-split {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 64px;
}
.chapter-split.reverse { grid-template-columns: 1.1fr 0.9fr; }
@media (max-width: 900px) {
  .chapter-split, .chapter-split.reverse { grid-template-columns: 1fr; }
}

.facts-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; }
.fact-card {
  border: 1px solid var(--line-on-navy);
  padding: 26px 22px;
  border-radius: var(--radius-md);
}
.on-bone .fact-card, .on-white .fact-card { border-color: var(--line-on-bone); }
.fact-card .num { font-family: var(--font-display); font-weight: 800; font-size: 2.1rem; color: var(--cyan); }
.fact-card .label { margin-top: 8px; font-family: var(--font-mono); font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.08em; opacity: 0.75; }
@media (max-width: 700px) { .facts-grid { grid-template-columns: 1fr; } }

/* Inline mono stat strip: replaces a bordered fact-card grid beside a lede paragraph. */
.stat-strip { display: flex; flex-direction: column; gap: 20px; margin-top: 8px; }
.stat-strip-item { padding-left: 16px; border-left: 2px solid var(--cyan); }
.stat-strip-item .num { font-family: var(--font-display); font-weight: 800; font-size: 1.9rem; line-height: 1; color: var(--cyan); }
.stat-strip-item .label { margin-top: 6px; font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; opacity: 0.75; }

/* Horizontal mono rule with oversized outlined numerals (legacy / firsts row). */
.legacy-row {
  display: flex; flex-wrap: wrap; gap: 20px 56px;
  padding: 36px 0; margin: 40px 0;
  border-top: 1px solid var(--line-on-bone);
  border-bottom: 1px solid var(--line-on-bone);
}
.on-navy .legacy-row, .on-navy-800 .legacy-row { border-color: var(--line-on-navy); }
.legacy-item .legacy-num {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(2.4rem, 5vw, 3.8rem); line-height: 1;
  color: rgba(31,41,55,0.16); /* non-webkit fallback: solid low-opacity fill */
  -webkit-text-stroke: 1.5px var(--charcoal);
}
.on-navy .legacy-item .legacy-num, .on-navy-800 .legacy-item .legacy-num {
  color: rgba(255,255,255,0.12);
  -webkit-text-stroke-color: rgba(255,255,255,0.55);
}
.legacy-item .label { margin-top: 10px; font-family: var(--font-mono); font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); }
.on-navy .legacy-item .label, .on-navy-800 .legacy-item .label { color: var(--muted-on-navy); }

/* Right-hand counterweight rail for single-column sections (asymmetric grid, not empty space). */
.chapter-rail { display: flex; align-items: flex-start; justify-content: flex-end; height: 100%; }
.chapter-rail .rail-num {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(6rem, 11vw, 10.5rem); line-height: 0.86;
  color: rgba(31,41,55,0.14); /* non-webkit fallback: solid low-opacity fill */
  -webkit-text-stroke: 1.5px var(--charcoal);
  opacity: 0.32;
}
.on-navy .chapter-rail .rail-num, .on-navy-800 .chapter-rail .rail-num {
  color: rgba(255,255,255,0.14);
  -webkit-text-stroke-color: rgba(255,255,255,0.55);
}
@media (max-width: 900px) { .chapter-rail { display: none; } }

/* benefit rows with rainbow left-rules: mono label column / value column */
.benefit-row {
  display: grid;
  grid-template-columns: 260px minmax(0, 60ch);
  gap: 22px;
  padding: 22px 0 22px 20px;
  border-left: 4px solid var(--rule-color, var(--cyan));
  margin-bottom: 4px;
}
.benefit-row .idx { font-family: var(--font-mono); color: var(--rule-color, var(--cyan)); font-size: 13px; display: block; margin-bottom: 8px; }
.benefit-row h4 {
  font-family: var(--font-mono); font-weight: 600; font-size: 13px;
  text-transform: uppercase; letter-spacing: 0.07em; line-height: 1.35;
  color: var(--cyan);
}
.on-bone .benefit-row h4, .on-white .benefit-row h4 { color: var(--cyan-ink); }
.benefit-row p { color: var(--muted-on-navy); font-size: 14.5px; margin-top: 6px; }
.on-bone .benefit-row p, .on-white .benefit-row p { color: var(--muted); }
@media (max-width: 640px) { .benefit-row { grid-template-columns: 1fr; gap: 6px; } }

/* ---- Apps chapter ---- */
.app-panel {
  border: 1px solid var(--line-on-bone);
  border-radius: var(--radius-md);
  padding: 42px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: center;
  margin-bottom: 28px;
}
.app-panel .photo-slot {
  aspect-ratio: 4/3;
  border-radius: var(--radius-md);
  background: linear-gradient(155deg, var(--navy-800) 0%, var(--navy-950) 65%, var(--navy-950) 100%);
  position: relative;
  overflow: hidden;
}
.app-panel .photo-slot svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.photo-slot img.shot { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.photo-slot.has-shot { border: 1px solid var(--line-on-navy); }
.photo-slot.has-shot::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 76px; z-index: 1;
  background: linear-gradient(180deg, rgba(11, 24, 48, 0), rgba(11, 24, 48, 0.72));
}
.app-panel .photo-slot .slot-caption {
  position: absolute; left: 18px; bottom: 16px; z-index: 2;
  font-family: var(--font-mono); font-size: 11px; text-transform: uppercase;
  letter-spacing: 0.1em; color: var(--white); opacity: 0.85;
  display: flex; align-items: center; gap: 8px;
}
.app-panel .photo-slot .slot-caption .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--slot-dot, var(--cyan)); flex: none; }
.app-panel h3 { font-size: 1.8rem; }
.app-panel p { color: var(--muted); margin-top: 14px; }
.on-navy .app-panel, .on-navy-800 .app-panel { border-color: var(--line-on-navy); }
.on-navy .app-panel p, .on-navy-800 .app-panel p { color: var(--muted-on-navy); }
.app-panel .meta { margin-top: 20px; display: flex; gap: 18px; flex-wrap: wrap; }
@media (max-width: 800px) { .app-panel { grid-template-columns: 1fr; padding: 26px; } }

.dev-row {
  display: grid;
  grid-template-columns: 60px 1fr;
  gap: 18px;
  padding: 20px 0;
  border-top: 1px solid var(--line-on-bone);
}
.on-navy .dev-row, .on-navy-800 .dev-row { border-color: var(--line-on-navy); }
.dev-row .idx { font-family: var(--font-mono); color: var(--cyan); font-size: 13px; }
.dev-row h4 { font-family: var(--font-display); font-size: 1.05rem; }
.dev-row p { color: var(--muted-on-navy); margin-top: 6px; font-size: 14px; }
.on-bone .dev-row p, .on-white .dev-row p { color: var(--muted); }

/* ---- Library shelf on homepage ---- */
.shelf { display: flex; justify-content: center; padding: 50px 0 20px; perspective: 1400px; }
.shelf.shelf--end { justify-content: flex-end; }
@media (max-width: 900px) {
  /* Below the chapter-split breakpoint the shelf is a full-width stacked block, not aligned
     against an adjacent column -- flex-end here was pinning the rotated last cover flush to
     the container edge with zero clearance. Center it with real gutter instead. */
  .shelf.shelf--end { justify-content: center; }
}
.shelf-item {
  width: 150px;
  aspect-ratio: 3/4;
  object-fit: cover;
  object-position: center;
  margin: 0 -26px;
  box-shadow: 0 20px 40px rgba(0,0,0,0.45);
  border-radius: 4px;
  transition: transform 300ms var(--ease-facet), z-index 0s;
  position: relative;
}
.shelf-item:hover { transform: translateY(-14px) scale(1.04); z-index: 5; }
@media (max-width: 700px) {
  .shelf-item { width: 96px; margin: 0 -18px; }
}

/* ---- Legacy / timeline ---- */
.timeline {
  position: relative; padding-left: 32px;
  border-left: 1px solid rgba(31,41,55,0.18);
  display: grid; gap: 0;
}
.on-navy .timeline, .on-navy-800 .timeline { border-left-color: rgba(255,255,255,0.18); }
.timeline-item { position: relative; padding: 0 0 40px 46px; display: grid; grid-template-columns: 28px 1fr; gap: 16px; align-items: start; }
.timeline-item:last-child { padding-bottom: 0; }
.timeline-item::before {
  content: '';
  position: absolute; left: -39px; top: 4px;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--dot-color, var(--cyan));
  border: 3px solid var(--bone);
}
.on-navy .timeline-item::before, .on-navy-800 .timeline-item::before { border-color: var(--navy-950); }
.timeline-item .timeline-icon { width: 28px; height: 28px; flex: none; opacity: 0.9; }
.timeline-item .timeline-body .timeline-year { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--cyan); display: block; margin-bottom: 6px; }
.timeline-item h4 { font-family: var(--font-display); font-size: 1.05rem; }
.timeline-item p { color: var(--muted); margin-top: 6px; font-size: 14.5px; }
.on-navy .timeline-item p, .on-navy-800 .timeline-item p { color: var(--muted-on-navy); }
@media (max-width: 560px) {
  .timeline-item { grid-template-columns: 1fr; padding-left: 26px; }
  .timeline-item .timeline-icon { display: none; }
}

.patent-strip {
  display: flex; flex-wrap: wrap; gap: 14px 30px;
  font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.04em;
  padding: 22px 0;
  border-top: 1px solid var(--line-on-navy);
  border-bottom: 1px solid var(--line-on-navy);
  margin: 30px 0;
}
.on-bone .patent-strip, .on-white .patent-strip { border-color: var(--line-on-bone); }
.patent-strip span { color: var(--cyan); }

/* ---- Contact band / forms ---- */
.contact-band { padding: 110px 0; }
/* Right-hand counterweight so the form doesn't sit against an empty half at desktop widths. */
.contact-grid { display: grid; grid-template-columns: 1.15fr 0.7fr; gap: 64px; align-items: start; }
.contact-aside { padding-top: 6px; }
.contact-aside .patent-strip { margin-top: 26px; }
@media (max-width: 900px) {
  .contact-grid { grid-template-columns: 1fr; }
  .contact-aside { padding-top: 0; }
}
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-top: 34px; max-width: 640px; }
.form-grid .full { grid-column: 1 / -1; }
@media (max-width: 640px) {
  .form-grid { grid-template-columns: 1fr; }
}
.field { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.field label {
  font-family: var(--font-mono); font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.08em;
  opacity: 0.8;
}
.field input, .field textarea, .field select {
  background: transparent;
  border: 1.5px solid rgba(255,255,255,0.32);
  border-radius: var(--radius-sm);
  padding: 13px 14px;
  color: inherit;
  font-family: var(--font-body);
  font-size: 15px;
  min-width: 0;
  width: 100%;
  transition: border-color 180ms;
}
.field input:hover, .field textarea:hover, .field select:hover { border-color: rgba(255,255,255,0.55); }
.field input:focus-within, .field textarea:focus-within,
.field input:focus, .field textarea:focus, .field select:focus { border-color: var(--cyan); }
.on-bone .field input, .on-bone .field textarea, .on-bone .field select,
.on-white .field input, .on-white .field textarea, .on-white .field select { border-color: var(--line-on-bone); }
.on-bone .field input:hover, .on-bone .field textarea:hover,
.on-white .field input:hover, .on-white .field textarea:hover { border-color: rgba(31,41,55,0.4); }
.field input::placeholder, .field textarea::placeholder { color: var(--muted-on-navy); opacity: 0.7; }
.field textarea { resize: vertical; min-height: 140px; }
.field textarea::-webkit-resizer { display: none; }
.form-note { font-size: 13px; color: var(--muted-on-navy); margin-top: 16px; }
.on-bone .form-note, .on-white .form-note { color: var(--muted); }
.form-status { margin-top: 16px; font-family: var(--font-mono); font-size: 13px; }
.form-status[data-state="ok"] { color: var(--green); }
.form-status[data-state="err"] { color: var(--orange); }
.hp-field { position: absolute; left: -9999px; top: -9999px; }

/* ---- Footer ---- */
.site-footer { background: var(--navy-950); color: var(--white); padding: 70px 0 30px; }
.footer-top {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr 1fr;
  gap: 40px;
  padding-bottom: 46px;
  border-bottom: 1px solid var(--line-on-navy);
}
.footer-brand img { height: 30px; width: auto; margin-bottom: 18px; }
.footer-brand p { color: var(--muted-on-navy); font-size: 14px; max-width: 32ch; }
.footer-col h5 {
  font-family: var(--font-mono); font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.09em;
  color: var(--cyan); margin-bottom: 16px;
}
.footer-col a { display: block; padding: 6px 0; color: var(--muted-on-navy); font-size: 14.5px; transition: color 180ms; }
.footer-col a:hover { color: var(--white); }
.footer-bottom {
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px;
  padding-top: 26px;
  font-family: var(--font-mono); font-size: 12px; color: var(--muted-on-navy);
}
.medical-disclaimer {
  font-size: 12px; color: var(--muted-on-navy); max-width: 70ch; margin-top: 10px; line-height: 1.6;
}
@media (max-width: 900px) {
  .footer-top { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .footer-top { grid-template-columns: 1fr; }
}

/* ---- Reveal-on-scroll (facet reveal) ---- */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity var(--dur) var(--ease-facet), transform var(--dur) var(--ease-facet);
}
.reveal.is-visible { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* ---- Simple page hero (interior pages) ---- */
.page-hero { padding: 150px 0 80px; }
.page-hero h1 { font-size: clamp(2.4rem, 5vw, 4rem); margin-top: 18px; max-width: 20ch; }
.page-hero p.lede { margin-top: 20px; max-width: 62ch; font-size: 18px; color: var(--muted-on-navy); }
.page-hero.on-bone p.lede, .page-hero.on-white p.lede { color: var(--muted); }

/* ---- Mono strip / count ---- */
.mono-count {
  font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--cyan); margin-top: 18px;
}

/* ---- Library filter pills ---- */
.filter-pills { display: flex; gap: 12px; margin: 40px 0 44px; flex-wrap: wrap; }
.filter-pill {
  font-family: var(--font-mono); font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em;
  padding: 10px 20px; border-radius: 999px; border: 1.5px solid var(--line-on-bone);
  background: transparent; color: var(--charcoal); transition: background 200ms, color 200ms, border-color 200ms;
}
.filter-pill.is-active, .filter-pill:hover { background: var(--charcoal); color: var(--white); border-color: var(--charcoal); }

/* ---- FLIP CARDS ---- */
.flip-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
@media (max-width: 1200px) { .flip-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 900px) { .flip-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 380px) { .flip-grid { gap: 12px; } }

.flip {
  perspective: 1200px;
  aspect-ratio: 3/4;
  cursor: pointer;
  display: none;
}
.flip.is-shown { display: block; }
.flip__inner {
  position: relative;
  width: 100%; height: 100%;
  transform-style: preserve-3d;
  transition: transform .8s cubic-bezier(.22,.61,.36,1);
}
.flip.is-flipped .flip__inner { transform: rotateY(180deg); }
@media (hover:hover) and (pointer:fine) {
  .flip:hover .flip__inner { transform: rotateY(180deg); transition-delay: 120ms; }
}
.flip__face {
  position: absolute; inset: 0;
  border-radius: var(--radius-md);
  overflow: hidden;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.flip__front { background: var(--navy-950); }
.flip__front img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.flip__front::after {
  content: '';
  position: absolute; inset: 0;
  /* Anchored to the text block itself (not the card), so the category tag and title stay
     legible over bright covers regardless of how many lines the title wraps to. */
  background: linear-gradient(180deg, transparent 18%, rgba(11,24,48,0.55) 50%, rgba(11,24,48,0.97) 76%);
}
.flip.is-flipped .flip__front,
.flip:not(.is-flipped) .flip__front { transition: opacity 0s linear; }
.flip.is-flipped .flip__front { opacity: 0; pointer-events: none; transition-delay: .4s; }
@media (hover:hover) and (pointer:fine) {
  .flip:hover .flip__front { opacity: 0; pointer-events: none; transition: opacity 0s linear .4s; }
}
.flip__text { position: absolute; z-index: 2; bottom: 0; left: 0; right: 0; padding: 18px; }
.flip__cat {
  font-family: var(--font-mono); font-size: 12px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--tag-color, var(--cyan));
}
@media (max-width: 480px) {
  /* At the 2-up mobile grid a card's text column is ~113px: tighten tracking and size so the
     two-word category labels stay on one line instead of wrapping over the title. */
  .flip__cat { font-size: 9.5px; letter-spacing: 0.04em; }
}
.flip__title { font-family: var(--font-display); font-weight: 700; color: var(--white); font-size: 1.05rem; margin-top: 6px; line-height: 1.15; }
.flip__hint {
  position: absolute; top: 14px; right: 14px; z-index: 2;
  width: 28px; height: 28px; border: 1px solid rgba(255,255,255,0.45); border-radius: 50%;
  display: grid; place-items: center; color: var(--white); font-size: 15px;
}
.flip__back {
  transform: rotateY(180deg);
  background: linear-gradient(160deg, var(--navy-800), var(--navy-950));
  color: var(--white);
  padding: 22px;
  display: flex; flex-direction: column;
  pointer-events: none;
}
.flip.is-flipped .flip__back { pointer-events: auto; }
@media (hover:hover) and (pointer:fine) {
  .flip:hover .flip__back { pointer-events: auto; }
}
.flip__back .flip__cat { color: var(--tag-color, var(--cyan)); }
.flip__backtitle { font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; margin: 8px 0 10px; line-height: 1.15; }
/* No flex-grow here on purpose: a stretched description box leaves its text sitting at the
   top with dead space trapped below it on tall cards with short copy. Let the text size to
   its own content instead, and push the Read button to the bottom via the button's own
   auto margin below, so the description always sits upper and the button always anchors
   to the bottom of the card with a consistent minimum gap. */
.flip__desc { font-size: 13.5px; color: rgba(255,255,255,0.82); line-height: 1.55; margin-bottom: 14px; }
.flip__read {
  margin-top: auto;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--cyan); color: var(--navy-950);
  font-family: var(--font-mono); font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.08em;
  padding: 12px; border-radius: var(--radius-sm);
}

.library-note { margin-top: 50px; font-size: 14px; color: var(--muted); font-family: var(--font-mono); }

/* ---- Reader ---- */
.reader-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 200;
  background: var(--navy-950); color: var(--white);
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  padding: 16px 26px;
}
.reader-back { font-family: var(--font-mono); font-size: 12.5px; text-transform: uppercase; letter-spacing: 0.08em; display: flex; align-items: center; gap: 8px; justify-self: start; }
.reader-title { font-family: var(--font-display); font-weight: 700; font-size: 1rem; text-align: center; padding: 0 16px; }
.reader-page-count { font-family: var(--font-mono); font-size: 12px; opacity: 0.75; justify-self: end; }
.reader-stage {
  min-height: 100vh;
  background: var(--navy-950);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 100px 20px 40px;
}
.reader-frame {
  position: relative;
  max-width: 900px; width: 100%;
  aspect-ratio: 16/9;
  border-radius: 8px;
  overflow: hidden;
  background: var(--navy-800);
  box-shadow: 0 30px 80px rgba(0,0,0,0.5);
}
.reader-frame.is-flexible {
  display: grid;
  height: auto;
  aspect-ratio: auto;
  min-height: 60vh;
}
.reader-page {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: contain; background: var(--navy-800);
  opacity: 1; transform: translateX(0);
  transition: opacity 350ms var(--ease-facet), transform 350ms var(--ease-facet);
}
/* Flexible (text/split) frames grow to fit content: pages stack via grid-area so the
   turn transition still works, and the frame's height follows the tallest current page. */
.reader-frame.is-flexible > .reader-page {
  position: relative; inset: auto;
  grid-area: 1 / 1;
  width: 100%; height: auto;
}
.reader-page.text-page {
  display: flex; flex-direction: column; justify-content: flex-start;
  padding: 50px 70px;
  color: var(--white);
}
.reader-page.text-page h3 {
  font-size: 1.8rem; margin-bottom: 20px; position: relative; padding-top: 20px; max-width: 62ch;
}
.reader-page.text-page h3::before {
  content: ''; position: absolute; top: 0; left: 0; width: 48px; height: 4px; background: var(--cyan);
}
.reader-page.text-page p { color: var(--muted-on-navy); font-size: 16px; line-height: 1.7; max-width: 62ch; margin-bottom: 1.1em; }
.reader-page.split-page {
  display: grid; grid-template-columns: 1fr 1fr;
  background: var(--navy-800);
}
.split-page-media { position: relative; overflow: hidden; min-height: 220px; background: var(--navy-950); }
.split-page-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.split-page-text { padding: 44px 48px; color: var(--white); }
.split-page-text h3 { font-size: 1.6rem; margin-bottom: 16px; position: relative; padding-top: 20px; }
.split-page-text h3::before { content: ''; position: absolute; top: 0; left: 0; width: 40px; height: 4px; background: var(--cyan); }
.split-page-text p { color: var(--muted-on-navy); font-size: 14.5px; line-height: 1.7; max-width: 56ch; margin-bottom: 1.1em; }
@media (max-width: 700px) {
  .reader-page.split-page { grid-template-columns: 1fr; }
  .split-page-media { min-height: 180px; }
  .split-page-text { padding: 26px 22px; }
  .reader-page.text-page { padding: 34px 24px; }
}
.reader-page.leaving-prev { transform: translateX(-40px); opacity: 0; }
.reader-page.leaving-next { transform: translateX(40px); opacity: 0; }
.reader-page.entering-prev { transform: translateX(-40px); opacity: 0; transition: none; }
.reader-page.entering-next { transform: translateX(40px); opacity: 0; transition: none; }
@media (prefers-reduced-motion: reduce) {
  .reader-page { transition: none; }
}
.reader-nav-btn {
  position: relative; flex: none;
  width: 48px; height: 48px; border-radius: 50%;
  background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.25);
  color: var(--white); display: grid; place-items: center;
  transition: background 180ms;
}
.reader-nav-btn:hover { background: rgba(255,255,255,0.18); }
.reader-nav-btn[disabled] { opacity: 0.25; pointer-events: none; }
.reader-controls { display: flex; align-items: center; gap: 24px; margin-top: 28px; }
.reader-controls .reader-page-count { color: var(--white); justify-self: auto; }
.reader-progress { width: 240px; height: 3px; background: rgba(255,255,255,0.15); border-radius: 3px; overflow: hidden; }
.reader-progress-bar { height: 100%; background: var(--cyan); transition: width 350ms var(--ease-facet); }
@media (max-width: 700px) {
  .reader-stage { padding: 76px 16px 32px; justify-content: flex-start; }
  .reader-frame { max-height: 60vh; }
  .reader-frame.is-flexible { max-height: none; }
  .reader-progress { width: auto; flex: 1; }
  .reader-controls { gap: 12px; width: 100%; padding: 0 16px; }
  .reader-page-count { white-space: nowrap; font-size: 11px; }
}

/* Gate modal */
.gate-modal {
  position: fixed; inset: 0; z-index: 800;
  display: none;
  align-items: center; justify-content: center;
  padding: 24px;
}
.gate-modal.is-open { display: flex; }
.gate-scrim {
  position: absolute; inset: 0; background: rgba(4,10,22,0.82);
  opacity: 0; transition: opacity 260ms var(--ease-facet);
}
.gate-modal.is-open .gate-scrim { opacity: 1; }
.gate-panel {
  position: relative; z-index: 2;
  background: var(--navy-800); color: var(--white);
  max-width: 440px; width: 100%;
  border-radius: 10px;
  padding: 44px 36px 40px;
  box-shadow: 0 40px 100px rgba(0,0,0,0.6);
  overflow: hidden;
  opacity: 0; transform: translateY(12px) scale(0.98);
  transition: opacity 260ms var(--ease-facet), transform 260ms var(--ease-facet);
}
.gate-modal.is-open .gate-panel { opacity: 1; transform: translateY(0) scale(1); }
@media (prefers-reduced-motion: reduce) {
  .gate-scrim, .gate-panel { transition: none; }
}
.gate-panel::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: linear-gradient(90deg, var(--cyan), var(--teal), var(--green), var(--yellow), var(--orange), var(--red), var(--magenta));
}
.gate-eyebrow { margin-bottom: 18px; }
.gate-panel img.gate-logo { height: 24px; margin-bottom: 22px; }
.gate-panel h3 { font-size: 1.7rem; line-height: 1.04; margin-bottom: 12px; }
.gate-panel p.gate-copy { color: var(--muted-on-navy); font-size: 14.5px; line-height: 1.6; margin-bottom: 24px; }
.gate-field { margin-bottom: 14px; }
.gate-consent { display: flex; align-items: flex-start; gap: 10px; margin: 18px 0; font-size: 13px; color: var(--muted-on-navy); }
.gate-consent input[type="checkbox"] {
  appearance: none; -webkit-appearance: none;
  width: 18px; height: 18px; margin-top: 2px; flex: none;
  border: 2px solid rgba(255,255,255,0.4); border-radius: 4px;
  background: transparent; position: relative; cursor: pointer;
  transition: border-color 180ms, background 180ms;
}
.gate-consent input[type="checkbox"]:checked { background: var(--cyan); border-color: var(--cyan); }
.gate-consent input[type="checkbox"]:checked::after {
  content: ''; position: absolute; left: 5px; top: 1px;
  width: 5px; height: 9px; border: solid var(--navy-950); border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.gate-consent a { color: var(--cyan); text-decoration: underline; }
.gate-close {
  position: absolute; top: 16px; right: 16px;
  width: 34px; height: 34px; border-radius: 50%;
  background: rgba(255,255,255,0.08); border: none; color: var(--white);
  display: grid; place-items: center;
}
.gate-error { color: var(--orange); font-size: 13px; margin-top: 10px; display: none; }
.gate-error.is-shown { display: block; }

/* ---- FAQ accordion ---- */
.faq-list { border-top: 1px solid var(--line-on-bone); }
.on-navy .faq-list, .on-navy-800 .faq-list { border-color: var(--line-on-navy); }
.faq-item { border-bottom: 1px solid var(--line-on-bone); }
.on-navy .faq-item, .on-navy-800 .faq-item { border-color: var(--line-on-navy); }
.faq-item summary {
  padding: 22px 4px;
  font-family: var(--font-display); font-weight: 700; font-size: 1.05rem;
  cursor: pointer;
  display: flex; align-items: center; justify-content: space-between;
  list-style: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: '+';
  font-family: var(--font-mono); font-size: 20px; color: var(--cyan); flex: none; margin-left: 20px;
  transition: transform 200ms;
}
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item .faq-a { padding: 0 4px 24px; color: var(--muted); max-width: 68ch; line-height: 1.65; }
.on-navy .faq-item .faq-a, .on-navy-800 .faq-item .faq-a { color: var(--muted-on-navy); }

/* ---- Compliance chips ---- */
.chip-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.chip {
  font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.06em; text-transform: uppercase;
  border: 1px solid var(--line-on-navy); padding: 8px 14px; border-radius: 999px; color: var(--cyan);
}
.on-bone .chip, .on-white .chip { border-color: var(--line-on-bone); color: var(--cyan-ink); }

/* ---- Case study cards (Proof) ---- */
.case-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; margin-top: 20px; }
.case-card {
  border: 1px solid var(--line-on-bone); border-radius: var(--radius-md); padding: 30px 26px;
  display: flex; flex-direction: column; gap: 14px; background: var(--white);
}
.case-card .case-eyebrow { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--cyan-ink); }
.case-card h4 { font-family: var(--font-display); font-size: 1.15rem; line-height: 1.25; }
.case-card .case-meta { font-family: var(--font-mono); font-size: 12px; color: var(--muted); }
.case-card p { color: var(--muted); font-size: 14px; line-height: 1.65; }
.case-card .case-label { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--charcoal); margin-top: 4px; }
.case-card ul { margin-top: 4px; }
.case-card li { list-style: disc; margin-left: 18px; color: var(--muted); font-size: 14px; line-height: 1.6; margin-bottom: 4px; }
.case-card .case-quote { font-style: italic; color: var(--cyan-ink); border-left: 2px solid var(--cyan); padding-left: 14px; margin-top: 6px; }
@media (max-width: 900px) {
  .case-grid { grid-template-columns: 1fr; }
}

/* ---- Steps line (how it works) ---- */
.steps-line { position: relative; padding-top: 20px; }
.steps-track { position: relative; display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; }
.steps-track::before {
  content: ''; position: absolute; top: 15px; left: 16px; right: 16px; height: 2px; background: var(--line-on-bone);
}
.on-navy .steps-track::before, .on-navy-800 .steps-track::before { background: var(--line-on-navy); }
.step-item { position: relative; padding-top: 44px; }
.step-dot {
  position: absolute; top: 0; left: 0; width: 32px; height: 32px; border-radius: 50%;
  background: var(--dot-color, var(--cyan)); color: var(--navy-950);
  display: grid; place-items: center; font-family: var(--font-mono); font-weight: 700; font-size: 14px;
}
.step-item h4 { font-family: var(--font-display); font-size: 1rem; }
.step-item p { color: var(--muted); font-size: 13.5px; margin-top: 6px; }
.on-navy .step-item p, .on-navy-800 .step-item p { color: var(--muted-on-navy); }
.steps-track.cols-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) {
  .steps-track, .steps-track.cols-4 { grid-template-columns: 1fr; gap: 34px; }
  .steps-track::before { top: 0; bottom: 0; left: 15px; width: 2px; height: auto; right: auto; }
  .step-item { padding-top: 0; padding-left: 50px; }
  .step-dot { top: 0; left: 0; }
}

/* ---- Why cards (navy) ---- */
.why-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.why-card { border: 1px solid var(--line-on-navy); border-radius: var(--radius-md); padding: 32px; }
.why-card h4 { font-size: 1.2rem; margin-bottom: 12px; }
.why-card p { color: var(--muted-on-navy); font-size: 14.5px; }
@media (max-width: 800px) { .why-grid { grid-template-columns: 1fr; } }

/* ---- Kids playful accents ---- */
.kids-tag {
  display: inline-block; font-family: var(--font-mono); font-size: 11px; text-transform: uppercase;
  letter-spacing: 0.09em; padding: 6px 12px; border-radius: 999px; color: var(--navy-950);
}
.pulled-stat {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(1.5rem, 3vw, 2.1rem); line-height: 1.1;
  color: var(--cyan-ink); margin: 16px 0;
}
.on-navy .pulled-stat, .on-navy-800 .pulled-stat { color: var(--cyan); }
.kids-plate {
  background: var(--plate-color, var(--bone));
  border-radius: 10px;
  padding: 28px;
  display: flex; align-items: center; justify-content: center;
}
.kids-plate img { border-radius: 6px; width: 100%; height: auto; }

/* ---- Cookie/consent-free note (privacy) already covered in copy ---- */

/* ---- Misc ---- */
.divider { height: 1px; background: var(--line-on-bone); }
.on-navy .divider, .on-navy-800 .divider { background: var(--line-on-navy); }
.text-lede { font-size: 18px; line-height: 1.65; color: var(--muted); max-width: 66ch; }
.on-navy .text-lede, .on-navy-800 .text-lede { color: var(--muted-on-navy); }

/* Legal pages */
.legal-content h2 { font-size: 1.5rem; margin: 40px 0 14px; }
.legal-content h2:first-child { margin-top: 0; }
.legal-content p, .legal-content li { color: var(--muted); font-size: 15.5px; line-height: 1.75; margin-bottom: 14px; }
.legal-content li { margin-left: 22px; list-style: disc; }
.legal-content strong { color: var(--charcoal); }
.legal-updated { font-family: var(--font-mono); font-size: 12.5px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; }