/* ==========================================================================
   WhatsInYourMeds — marketing site stylesheet (WP-WIYM-UX1 redesign, 2026-10-05)

   Static site: no framework, no build step, no third-party fonts or scripts.
   CSP is `style-src 'self'`, so there is NO inline style anywhere in the HTML:
   every visual lives in this file (an inline `style=""` is silently dropped in
   production, which is how the old mobile menu icon went invisible).

   Brand: turquoise-led patient skin of the ExciIQ tokens. Atkinson Hyperlegible
   400/700 only (an accessibility decision, never swapped). Turquoise fills carry
   dark-teal ink #06302F (white on turquoise is 2.5:1 and fails). Marigold and red
   are product-state colours and never appear decoratively here; the "difference"
   in the listed-twice illustration is amethyst, a neutral marker.

   Contrast (measured, WCAG 2.2):
   - text teal  #0A6B70 on #FFFFFF 6.3 · on #F6F2F9 5.7 · on #EFE9F4 5.3
   - dark teal  #2BC4BE on #160B22 8.8 · on #1F1430 8.1 · on #251A35 7.6
   - button ink #06302F on #10B5BE 5.7 · on #2BC4BE 6.6 (hover fills are lighter)
   - form border #857594 on #FFFFFF 4.2 · on #F6F2F9 3.8; dark #8C7A9E on #1F1430 4.5
   - focus ring = the text teal (5.7 light / 8.8 dark against the page)
   ========================================================================== */

/* ---- Self-hosted Atkinson Hyperlegible (400 / 700, latin) ---- */
@font-face {
  font-family: "Atkinson Hyperlegible";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/atkinson-hyperlegible-latin-400-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Atkinson Hyperlegible";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/fonts/atkinson-hyperlegible-latin-700-normal.woff2") format("woff2");
}

/* ---- Tokens: light ---- */
:root {
  color-scheme: light;

  --background: #F6F2F9;
  --surface: #FFFFFF;
  --surface-2: #EFE9F4;
  --foreground: #2E1A3D;
  --muted-foreground: #6B5A76;

  --primary: #10B5BE;
  --primary-hover: #3AC4CC;
  --primary-foreground: #06302F;
  --primary-text: #0A6B70;
  --accent: #E6F6F7;
  --accent-foreground: #0B4A4D;

  --secondary: #6A2C91;
  --secondary-text: #6A2C91;
  --secondary-soft: #F1E8F7;

  --history-soft: #E0EAFF;
  --history-ink: #1E3F97;

  --border: #E5DCEC;
  --input-border: #857594;
  --ring: #0A6B70;

  --icon-ink: #2E1A3D;
  --icon-accent: #10B5BE;
  --icon-soft: #D7F4F5;
  --icon-soft-2: #EADCF3;
  --icon-soft-3: #E7E1EE;

  --glow-1: rgba(16, 181, 190, 0.16);
  --glow-2: rgba(106, 44, 145, 0.10);
  --header-bg: rgba(246, 242, 249, 0.9);

  --radius-sm: 0.375rem;
  --radius: 0.625rem;
  --radius-lg: 0.875rem;
  --radius-xl: 1.125rem;

  --shadow-sm: 0 1px 3px rgba(46, 26, 61, 0.08), 0 1px 2px rgba(46, 26, 61, 0.05);
  --shadow-md: 0 6px 16px rgba(46, 26, 61, 0.10), 0 2px 4px rgba(46, 26, 61, 0.06);
  --shadow-lg: 0 20px 40px rgba(46, 26, 61, 0.14), 0 6px 12px rgba(46, 26, 61, 0.07);
}

/* ---- Tokens: dark (follows the device; the site has no toggle) ---- */
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;

    --background: #160B22;
    --surface: #1F1430;
    --surface-2: #251A35;
    --foreground: #ECE6F2;
    --muted-foreground: #A593B5;

    --primary: #2BC4BE;
    --primary-hover: #5ED3CE;
    --primary-foreground: #06302F;
    --primary-text: #2BC4BE;
    --accent: #132A30;
    --accent-foreground: #B9EDEB;

    --secondary: #B18AD1;
    --secondary-text: #C3A3DD;
    --secondary-soft: #2C1C3F;

    --history-soft: #1F3159;
    --history-ink: #B2CAFE;

    --border: #33264A;
    --input-border: #8C7A9E;
    --ring: #2BC4BE;

    --icon-ink: #ECE6F2;
    --icon-accent: #2BC4BE;
    --icon-soft: #17393B;
    --icon-soft-2: #3A2752;
    --icon-soft-3: #2E2440;

    --glow-1: rgba(43, 196, 190, 0.14);
    --glow-2: rgba(155, 107, 194, 0.14);
    --header-bg: rgba(22, 11, 34, 0.9);

    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.45), 0 1px 2px rgba(0, 0, 0, 0.35);
    --shadow-md: 0 6px 16px rgba(0, 0, 0, 0.45), 0 2px 4px rgba(0, 0, 0, 0.35);
    --shadow-lg: 0 20px 40px rgba(0, 0, 0, 0.55), 0 6px 12px rgba(0, 0, 0, 0.40);
  }
}

/* ---- Reset & base ---- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
[hidden] { display: none !important; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 5.5rem; /* anchors land below the sticky header */
  -webkit-text-size-adjust: 100%;
}
@media (min-width: 64rem) {
  html { scroll-padding-top: 6.5rem; } /* the 6rem header + its border */
}

body {
  background: var(--background);
  color: var(--foreground);
  font-family: "Atkinson Hyperlegible", system-ui, -apple-system, sans-serif;
  font-size: 1.0625rem;
  line-height: 1.6;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

img, svg { display: block; max-width: 100%; }
ul, ol { padding: 0; list-style: none; }

a {
  color: var(--primary-text);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}
a:hover { text-decoration-thickness: 2px; }

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

.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;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    transition: none !important;
    animation: none !important;
  }
}

/* ---- Type scale (Atkinson 400/700 only) ---- */
h1, h2, h3, strong, b, th { font-weight: 700; }

.display, h1 {
  font-size: clamp(2.125rem, 1.6rem + 2.6vw, 3.25rem);
  line-height: 1.1;
  letter-spacing: -0.012em;
}
h2 {
  font-size: clamp(1.625rem, 1.35rem + 1.3vw, 2.25rem);
  line-height: 1.2;
  letter-spacing: -0.008em;
}
h3, .h3 { font-size: 1.25rem; line-height: 1.35; letter-spacing: 0; }

.lead {
  font-size: clamp(1.125rem, 1.05rem + 0.35vw, 1.3125rem);
  line-height: 1.55;
}
.small { font-size: 0.9375rem; line-height: 1.5; }
.muted { color: var(--muted-foreground); }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  line-height: 1.4;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--primary-text);
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.375rem 0.875rem;
  border-radius: 999px;
  background: var(--accent);
  color: var(--accent-foreground);
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1.4;
}
.chip-dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--primary);
}

/* ---- Layout ---- */
.container {
  width: 100%;
  max-width: 72rem;
  margin-inline: auto;
  padding-inline: 1.25rem;
}
@media (min-width: 48rem) {
  .container { padding-inline: 2rem; }
}

.prose { max-width: 40rem; }
.prose > * + * { margin-top: 1rem; }

main { flex: 1; }

.section { padding-block: 4rem; }
.section--tint { background: var(--surface-2); }
@media (min-width: 64rem) {
  .section { padding-block: 6rem; }
}

.section-head { max-width: 42rem; margin-bottom: 2.5rem; }
.section-head > * + * { margin-top: 1rem; }
.section-head--center { text-align: center; margin-inline: auto; }

.grid-2 { display: grid; gap: 1.5rem; }
@media (min-width: 52rem) {
  .grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem; }
}

.split { display: grid; gap: 2.5rem; align-items: center; }
.split > *, .hero-grid > *, .grid-2 > * { min-width: 0; }
.split > div > * + * { margin-top: 1rem; }
@media (min-width: 60rem) {
  .split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 4rem; }
  .split--media-first > :first-child { order: 2; }
  .split--top { align-items: start; }
}
/* iPad pass (2026-10-06): below 60rem the hero and the split sections stack
   into one column, so on a portrait tablet (744-959px) their text ran the
   full container, 80-90 characters a line. Hold it to 40rem (about 70).
   Phones are narrower than the cap, and the 60rem+ two-column layout, whose
   columns are already narrower than 40rem, is untouched. */
@media (max-width: 59.99rem) {
  .hero-copy,
  .split > div { max-width: 40rem; }
}

/* ---- Skip link ---- */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--primary);
  color: var(--primary-foreground);
  font-weight: 700;
  padding: 0.75rem 1.25rem;
  border-radius: 0 0 var(--radius) 0;
}
.skip-link:focus-visible { left: 0; }

/* ---- Header ---- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--header-bg);
  border-bottom: 1px solid var(--border);
  -webkit-backdrop-filter: saturate(1.4) blur(10px);
  backdrop-filter: saturate(1.4) blur(10px);
}
.site-header--landing { position: static; }

/* Larger lockup (2026-10-06, Jeff): most of the lockup's height is the dose
   cup, so at the old 42/52px the wordmark rendered only ~16px tall. The
   header logo is now 56px (72px from 64rem). On a phone it grows with the
   viewport instead: the room left beside the "Menu" button is
   100vw - 2.5rem gutters - 1rem gap - ~6.35rem button, and the lockup is
   4.6:1 (viewBox 460x100). 10.5rem keeps ~10px of slack for font metrics,
   so it is 42px at 360, ~48px at 390 and the full 56px from ~426px. */
.header-inner {
  --logo-h: clamp(2.625rem, calc((100vw - 10.5rem) / 4.6), 3.5rem);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: max(4.5rem, calc(var(--logo-h) + 1.5rem));
}
.brand {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  border-radius: var(--radius-sm);
}
.brand img { height: var(--logo-h); width: auto; }
@media (min-width: 64rem) {
  .header-inner { --logo-h: 4.5rem; min-height: 6rem; }
}

.site-nav {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}
.site-nav a:not(.btn) {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding-inline: 0.875rem;
  border-radius: var(--radius);
  color: var(--foreground);
  font-weight: 700;
  text-decoration: none;
}
.site-nav a:not(.btn):hover { background: var(--surface-2); }
.site-nav a[aria-current="page"]:not(.btn) {
  color: var(--primary-text);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.35em;
}
.site-nav .btn { margin-left: 0.75rem; }

.nav-toggle {
  display: none;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.75rem;
  padding: 0.5rem 0.875rem;
  background: var(--surface);
  border: 1.5px solid var(--input-border);
  border-radius: var(--radius);
  color: var(--foreground);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
.nav-toggle svg {
  width: 1.25rem;
  height: 1.25rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
}
.nav-toggle .icon-close { display: none; }
body.nav-open .nav-toggle .icon-open { display: none; }
body.nav-open .nav-toggle .icon-close { display: block; }

/* The menu button now covers up to 60rem (was 52rem): beside the inline
   nav (~541px wide) a 56px lockup needs ~880px, so from 52rem to 60rem
   (an 11" iPad in portrait is 834px) the inline nav would crowd it. */
@media (max-width: 59.99rem) {
  .nav-toggle { display: inline-flex; }
  .site-nav {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0.25rem;
    padding: 0.75rem 1.25rem 1.25rem;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    box-shadow: var(--shadow-md);
  }
  .site-nav a:not(.btn) { min-height: 3rem; padding-inline: 0.75rem; }
  .site-nav .btn { margin: 0.5rem 0 0; }
  body.nav-open .site-nav { display: flex; }
}
@media (min-width: 48rem) and (max-width: 59.99rem) {
  .site-nav { padding-inline: 2rem; }
  /* iPad pass (2026-10-06): on a portrait tablet the open menu is 700+px
     wide; the CTA keeps its own width, left-aligned with the links, rather
     than stretching across the whole sheet. */
  .site-nav .btn { align-self: flex-start; }
}

/* ---- Buttons ---- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 3rem;
  padding: 0.75rem 1.5rem;
  border-radius: var(--radius);
  border: 1.5px solid transparent;
  font: inherit;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease;
}
.btn-primary {
  background: var(--primary);
  color: var(--primary-foreground);
}
.btn-primary:hover { background: var(--primary-hover); }
.btn-outline {
  background: transparent;
  color: var(--primary-text);
  border-color: var(--primary-text);
}
.btn-outline:hover { background: var(--accent); }
.btn-sm { min-height: 2.75rem; padding: 0.5rem 1.125rem; }
.btn[disabled] { opacity: 0.6; cursor: default; }

.text-link {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  min-height: 2.75rem;
  font-weight: 700;
}
.text-link svg {
  width: 1.125rem;
  height: 1.125rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---- Icons (brand line icons, inline SVG; colour comes from here) ---- */
.icon {
  width: 1.75rem;
  height: 1.75rem;
  fill: none;
  stroke: var(--icon-ink);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: none;
}
.icon .ac { stroke: var(--icon-accent); }
.icon .acf { fill: var(--icon-accent); stroke: none; }
.icon .am { stroke: var(--secondary); }
.icon .amf { fill: var(--secondary); stroke: none; }
.icon .sf { fill: var(--icon-soft); }
.icon .sf2 { fill: var(--icon-soft-2); }
.icon .sf3 { fill: var(--icon-soft-3); }
.icon .thin { stroke-width: 1.6; }

.icon-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.25rem;
  height: 3.25rem;
  border-radius: var(--radius-lg);
  background: var(--accent);
  flex: none;
}

/* ---- Hero ---- */
.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: 3rem 4rem;
}
.hero::before,
.hero::after {
  content: "";
  position: absolute;
  z-index: -1;
  border-radius: 50%;
  pointer-events: none;
}
.hero::before {
  width: 38rem;
  height: 38rem;
  right: -14rem;
  top: -10rem;
  background: radial-gradient(closest-side, var(--glow-1), transparent);
}
.hero::after {
  width: 30rem;
  height: 30rem;
  left: -16rem;
  top: -14rem;
  background: radial-gradient(closest-side, var(--glow-2), transparent);
}
.hero-grid { display: grid; gap: 3rem; align-items: center; }
.hero-copy > * + * { margin-top: 1.25rem; }
.hero-copy .waitlist { margin-top: 2rem; }
@media (min-width: 60rem) {
  .hero { padding-block: 5rem 6rem; }
  .hero-grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: 4rem; }
}

.page-hero { padding-block: 3rem 1rem; }
.page-hero .container > * + * { margin-top: 1.25rem; }
@media (min-width: 64rem) {
  .page-hero { padding-block: 5rem 2rem; }
}

/* ---- Waitlist form ---- */
.waitlist { max-width: 34rem; }
.waitlist-form label {
  display: block;
  font-weight: 700;
  margin-bottom: 0.5rem;
}
.field-row {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
@media (min-width: 36rem) {
  .field-row { flex-direction: row; }
  .field-row input { flex: 1; min-width: 0; }
}
.waitlist-form input[type="email"] {
  width: 100%;
  min-height: 3rem;
  padding: 0.75rem 1rem;
  font: inherit;
  color: var(--foreground);
  background: var(--surface);
  border: 1.5px solid var(--input-border);
  border-radius: var(--radius);
}
.waitlist-form input[type="email"]:focus-visible {
  outline: 3px solid var(--ring);
  outline-offset: 2px;
  border-color: var(--ring);
  border-radius: var(--radius);
}
.form-hint {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.75rem;
  font-size: 0.9375rem;
  color: var(--muted-foreground);
}
.form-hint svg {
  width: 1rem;
  height: 1rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: none;
}

/* Honeypot: visually removed, still in the DOM for bots. */
.hp-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form-confirm {
  border: 1px solid var(--border);
  border-left: 4px solid var(--primary);
  border-radius: var(--radius);
  background: var(--surface);
  padding: 1rem 1.25rem;
  margin-top: 1.25rem;
  text-align: left;
}
.form-confirm > * + * { margin-top: 0.75rem; }
/* The shown message follows the two inert <template>s; it is the box's only visible child. */
.form-confirm > .form-confirm-shown { margin-top: 0; }

/* ---- Illustrations (all made-up data, each captioned "Illustration") ---- */
.sample { margin: 0; }
.sample figcaption {
  margin-top: 0.875rem;
  font-size: 0.875rem;
  color: var(--muted-foreground);
  text-align: center;
}
.sample-panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
}

/* Hero sample label card */
.label-figure {
  width: 100%;
  max-width: 26rem;
  margin-inline: auto;
}
.label-stage {
  position: relative;
  isolation: isolate;
}
.label-stage::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 1.5rem -0.75rem -0.75rem 1.5rem;
  border-radius: var(--radius-xl);
  background: var(--accent);
  border: 1px solid var(--border);
}
.label-card {
  padding: 1.5rem;
  box-shadow: var(--shadow-lg);
}
.label-card__top {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding-bottom: 1.125rem;
  border-bottom: 1px solid var(--border);
}
.label-card__kicker {
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted-foreground);
}
.label-card__title { font-size: 1.25rem; font-weight: 700; line-height: 1.3; }
.label-card__group { padding-top: 1rem; }
.label-card__heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted-foreground);
}
.count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.75rem;
  height: 1.75rem;
  padding-inline: 0.5rem;
  border-radius: 999px;
  background: var(--accent);
  color: var(--accent-foreground);
  font-size: 0.875rem;
  letter-spacing: 0;
}
.ing-list { margin-top: 0.375rem; }
.ing-list li {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding-block: 0.5rem;
  border-bottom: 1px dashed var(--border);
  line-height: 1.35;
}
.ing-list li:last-child { border-bottom: 0; }
.ing-list li::before {
  content: "";
  width: 0.75rem;
  height: 0.75rem;
  flex: none;
  background: var(--primary);
  clip-path: polygon(25% 5%, 75% 5%, 100% 50%, 75% 95%, 25% 95%, 0 50%);
}
.ing-tag {
  flex-basis: 100%;
  margin-left: 1.5rem;
  margin-top: -0.25rem;
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--secondary-text);
}
.ing-list li:has(.ing-tag) { flex-wrap: wrap; row-gap: 0.25rem; }
.ing-list--active li::before {
  background: var(--secondary);
  border-radius: 50%;
  clip-path: none;
}

/* A two-tone capsule drawn in CSS (decorative). */
.capsule {
  display: inline-flex;
  width: 3.25rem;
  height: 1.5rem;
  border-radius: 999px;
  overflow: hidden;
  transform: rotate(-24deg);
  flex: none;
}
.capsule span { flex: 1; }
.capsule span:first-child { background: var(--primary); }
.capsule span:last-child { background: var(--secondary); }

/* "Listed twice" comparison */
.twice { padding: 1rem; }
.twice__label {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
  font-weight: 700;
}
.capsule--sm { width: 2.25rem; height: 1rem; }
@media (min-width: 40rem) { .twice { padding: 1.5rem; } }
.twice table {
  width: calc(100% + 1rem);
  margin: -0.5rem;
  border-collapse: separate;
  border-spacing: 0.5rem;
  table-layout: fixed;
}
.twice th {
  text-align: left;
  font-size: 0.875rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted-foreground);
  padding: 0.25rem 0.25rem 0;
  vertical-align: bottom;
  line-height: 1.35;
}
.twice td {
  padding: 0.625rem 0.75rem;
  border-radius: var(--radius);
  background: var(--background);
  border: 1px solid var(--border);
  font-size: 0.9375rem;
  line-height: 1.35;
  vertical-align: top;
  overflow-wrap: anywhere;
}
.twice td.is-diff {
  background: var(--secondary-soft);
  border: 2px solid var(--secondary);
}
.twice td.is-missing {
  background: transparent;
  border: 2px dashed var(--input-border);
  color: var(--muted-foreground);
}
.diff-tag {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--secondary-text);
}

/* Sample Ingredients table */
.table-wrap {
  overflow-x: auto;
}
.ing-table {
  width: 100%;
  min-width: 20rem;
  border-collapse: collapse;
  font-size: 0.9375rem;
}
.ing-table th,
.ing-table td {
  padding: 0.75rem 0.5rem;
  border-bottom: 1px solid var(--border);
  text-align: center;
  line-height: 1.35;
}
.ing-table thead th {
  background: var(--surface-2);
  font-size: 0.875rem;
  white-space: nowrap;
}
.ing-table th[scope="row"],
.ing-table thead th:first-child {
  text-align: left;
  padding-left: 1rem;
}
.ing-table th[scope="row"] { font-weight: 400; }
.ing-table tbody tr:last-child > * { border-bottom: 0; }
.ing-table td:last-child,
.ing-table thead th:last-child { padding-right: 1rem; }
.ing-table td:last-child { color: var(--muted-foreground); white-space: nowrap; }
@media (max-width: 29.99rem) {
  .ing-table { font-size: 0.875rem; }
  .ing-table th,
  .ing-table td { padding: 0.625rem 0.3125rem; }
  .ing-table th[scope="row"],
  .ing-table thead th:first-child { padding-left: 0.75rem; }
  .ing-table td:last-child,
  .ing-table thead th:last-child { padding-right: 0.75rem; }
}
.dot {
  display: inline-block;
  width: 0.875rem;
  height: 0.875rem;
  border-radius: 50%;
  background: var(--secondary);
  vertical-align: middle;
}
.none {
  display: inline-block;
  width: 0.875rem;
  height: 0.1875rem;
  border-radius: 2px;
  background: var(--input-border);
  vertical-align: middle;
}
.legend {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem 1.5rem;
  margin-top: 1rem;
  font-size: 0.9375rem;
  color: var(--muted-foreground);
}
.legend li { display: inline-flex; align-items: center; gap: 0.5rem; }

/* Label-update sample */
.update { padding: 1.25rem; max-width: 30rem; margin-inline: auto; }
@media (min-width: 40rem) { .update { padding: 1.5rem; } }
.update__chip {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.25rem 0.75rem;
  border-radius: 999px;
  background: var(--history-soft);
  color: var(--history-ink);
  font-size: 0.875rem;
  font-weight: 700;
}
.update__chip svg {
  width: 1rem;
  height: 1rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.update__title { margin-top: 0.75rem; font-size: 1.125rem; font-weight: 700; }
.update__versions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.5rem;
  margin-top: 0.25rem;
  font-size: 0.9375rem;
  color: var(--muted-foreground);
}
.update__group {
  margin-top: 1rem;
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted-foreground);
}
.change-list li {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding-block: 0.375rem;
  font-weight: 700;
}
.change-list .sign {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  background: var(--surface-2);
  font-weight: 700;
  line-height: 1;
}
.update__note {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
  font-size: 0.9375rem;
  color: var(--muted-foreground);
}

/* ---- Cards ---- */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: 1.5rem;
  box-shadow: var(--shadow-sm);
}
@media (min-width: 48rem) { .card { padding: 2rem; } }
.card > * + * { margin-top: 0.75rem; }
.card > .icon-badge + * { margin-top: 1.25rem; }
.card-meta {
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--primary-text);
}

/* Three-step strip (home) */
.step-strip { display: grid; gap: 1rem; }
@media (min-width: 52rem) {
  .step-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; }
}
.step-strip > li { display: flex; gap: 1rem; align-items: flex-start; }
.step-strip > li > div > * + * { margin-top: 0.375rem; }
.step-strip h3 .num { color: var(--primary-text); margin-right: 0.375rem; }
@media (min-width: 52rem) {
  .step-strip > li { flex-direction: column; }
}
.after-strip { margin-top: 1.5rem; }

/* Numbered steps (how it works) */
.steps { display: grid; gap: 2rem; }
.step {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 1rem;
}
.step + .step { padding-top: 2rem; border-top: 1px solid var(--border); }
@media (min-width: 48rem) {
  .step { gap: 1.5rem; }
  .steps { gap: 3rem; }
  .step + .step { padding-top: 3rem; }
}
.step-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  background: var(--primary);
  color: var(--primary-foreground);
  font-weight: 700;
  font-size: 1.125rem;
}
.step-body { max-width: 46rem; }
.step-body h2 { font-size: clamp(1.375rem, 1.2rem + 0.8vw, 1.75rem); line-height: 1.25; }
.method-list { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.method-list li {
  padding: 0.375rem 0.875rem;
  border-radius: 999px;
  border: 1.5px solid var(--border);
  background: var(--surface);
  font-size: 0.9375rem;
  font-weight: 700;
}
.step-body > * + * { margin-top: 1rem; }
.step-body > .sample,
.step-body > .grid-2 { margin-top: 1.75rem; }

/* Sharing paths */
.paths .card { display: flex; flex-direction: column; gap: 0.75rem; }
.paths .card > * + * { margin-top: 0; }
.paths .card > .icon-badge { margin-bottom: 0.5rem; }
.paths .card > .path-note {
  margin-top: auto;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
  font-size: 0.9375rem;
  color: var(--muted-foreground);
}

/* ---- Privacy ---- */
.privacy-band { text-align: center; }
.privacy-band .container > * + * { margin-top: 1rem; }
.privacy-band .icon-badge { display: flex; margin-inline: auto; }
.privacy-band .eyebrow { display: block; }
.privacy-quote { max-width: 44rem; margin-inline: auto; }
.privacy-quote p {
  font-size: clamp(1.375rem, 1.15rem + 1vw, 1.875rem);
  line-height: 1.3;
  font-weight: 700;
}

.story {
  border-left: 4px solid var(--primary);
  background: var(--surface);
  border-radius: 0 var(--radius-xl) var(--radius-xl) 0;
  box-shadow: var(--shadow-sm);
  padding: 1.5rem;
  max-width: 46rem;
}
.story p { font-size: 1.125rem; line-height: 1.65; }
@media (min-width: 48rem) { .story { padding: 2rem 2.25rem; } }

.no-list { display: grid; gap: 1rem; }
@media (min-width: 52rem) {
  .no-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; }
}

/* ---- FAQ ---- */
.faq-list { max-width: 46rem; }
.faq-item { padding-block: 1.75rem; border-bottom: 1px solid var(--border); }
.faq-item:first-child { padding-top: 0; }
.faq-item:last-child { border-bottom: 0; }
.faq-item h2 { font-size: 1.3125rem; line-height: 1.35; letter-spacing: 0; }
.faq-item > * + * { margin-top: 0.75rem; }
.faq-quote {
  border-left: 4px solid var(--primary);
  background: var(--surface);
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
  padding: 0.875rem 1.25rem;
}

/* ---- Legal ---- */
.legal-list { display: grid; gap: 0.75rem; max-width: 40rem; }
.legal-list li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1rem;
  padding: 1rem 1.25rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  font-weight: 700;
}
.legal-list--links li { padding: 0; }
.legal-list--links a {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 3.5rem;
  padding: 0.75rem 1.25rem;
  border-radius: var(--radius-lg);
}
.legal-list--terms { margin-top: 0.75rem; }
.status-pill {
  font-size: 0.875rem;
  font-weight: 700;
  padding: 0.25rem 0.75rem;
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--muted-foreground);
}
.legal-note { margin-top: 1.25rem; color: var(--muted-foreground); }

/* ---- Closing call to action ---- */
.cta-band {
  padding-block: 4rem;
  background:
    radial-gradient(34rem 16rem at 82% 35%, var(--glow-1), transparent 70%),
    radial-gradient(30rem 15rem at 15% 70%, var(--glow-2), transparent 70%),
    var(--surface-2);
}
@media (min-width: 64rem) { .cta-band { padding-block: 6rem; } }
.cta-card {
  max-width: 40rem;
  margin-inline: auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
  padding: 2rem 1.25rem;
  text-align: center;
}
@media (min-width: 48rem) { .cta-card { padding: 2.75rem 3rem; } }
.cta-card > * + * { margin-top: 0.75rem; }
.cta-card .waitlist { margin: 1.75rem auto 0; text-align: left; }

/* ---- Footer ---- */
.site-footer {
  border-top: 1px solid var(--border);
  background: var(--surface);
  padding-block: 3rem 2.5rem;
}
.footer-grid { display: grid; gap: 1.5rem; }
@media (min-width: 60rem) {
  .footer-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr);
    gap: 1.25rem 4rem;
    align-items: start;
  }
  .footer-notes { grid-column: 2; grid-row: 1 / span 3; }
}
/* iPad pass (2026-10-06): the single-column footer ran the standing notes
   ~100 characters a line on a portrait tablet. Same 40rem cap as the split
   sections; phones and the 60rem+ two-column footer are untouched. */
@media (max-width: 59.99rem) {
  .footer-notes { max-width: 40rem; }
}
.footer-brand img { height: 2.75rem; width: auto; }
.footer-notes > * + * { margin-top: 1rem; }
.standing-note {
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--muted-foreground);
}
.footer-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0 0.25rem;
  margin-left: -0.75rem;
}
.footer-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding-inline: 0.75rem;
  border-radius: var(--radius);
  color: var(--foreground);
  font-weight: 700;
}
.footer-family {
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--muted-foreground);
}
.footer-family a { color: var(--secondary-text); }

/* ---- 404 ---- */
.notfound { text-align: center; padding-block: 5rem; }
.notfound > * + * { margin-top: 1rem; }
.cta-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
  margin-top: 2rem;
}

/* Policy pages (privacy-policy.html, consumer-health-data.html): generated from the served text
   files by docs/legal/drafts/build_policy_html.py. A readable column, short line length. */
.policy-updated { color: var(--muted-foreground); font-size: 0.9375rem; }
.policy { padding-block: 1.5rem 4rem; }
.policy-body { max-width: 44rem; }
.policy-body > * + * { margin-top: 1rem; }
.policy-body h2 {
  margin-top: 2.5rem;
  font-size: 1.125rem;
  letter-spacing: 0.02em;
  line-height: 1.35;
}
.policy-body p,
.policy-body li { line-height: 1.65; }
.policy-body ul { display: grid; gap: 0.625rem; padding-left: 1.25rem; list-style: disc; }
.policy-body li::marker { color: var(--muted-foreground); }
.policy-summary { font-size: 1.125rem; }

/* ---- News strip (home + Stage 0 landing; Jeff 2026-10-10, D1/D3) ----
   Dated, attributed source cards. Text only: no outlet logos, images or
   embeds. The quote marks are decorative CSS; the second `content` value
   gives them empty alt text where supported, so screen readers skip them.
   Teal and amethyst only, never marigold or red. One column on phones. */
.news-grid { display: grid; gap: 1.5rem; }
@media (min-width: 52rem) {
  .news-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem; }
  .news-grid--single { grid-template-columns: minmax(0, 1fr); }
}
.news-grid--single { max-width: 40rem; }
.news-card {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  min-width: 0;
}
.news-card > * + * { margin-top: 0; }
.news-quote p,
.news-paraphrase {
  font-size: clamp(1.1875rem, 1.1rem + 0.4vw, 1.375rem);
  line-height: 1.45;
}
.news-quote p { font-weight: 700; }
.news-quote p::before {
  content: "\201C";
  content: "\201C" / "";
  color: var(--primary-text);
}
.news-quote p::after {
  content: "\201D";
  content: "\201D" / "";
  color: var(--primary-text);
}
.news-card figcaption {
  margin-top: auto;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.25rem;
}
.news-source {
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--muted-foreground);
}
.news-caveat,
.news-bridge { max-width: 46rem; }
/* The caveat reads as part of the cards above it: close spacing and a
   neutral amethyst rule (never a warning colour). */
.news-caveat {
  margin-top: 1rem;
  padding-left: 1rem;
  border-left: 4px solid var(--secondary);
}
.news-caveat .text-link { display: flex; width: fit-content; }
.news-bridge { margin-top: 2rem; }