/* Nuravita — Iteration 01 (implemented from "Nuravita Website Mockup.html")
   Design defaults: rhythm Editorial, panel emphasis Balanced,
   headline voice Editorial Serif, morph intensity 0.55. */

:root {
  --blue: #006edb;
  --blue-hover: #005bb5;
  --ink: oklch(18% 0.015 40);
  --body: oklch(42% 0.01 40);
  --muted: oklch(45% 0.01 40);
  --faint: oklch(48% 0.01 40);
  --rule: oklch(88% 0.01 40);
  --field-rule: oklch(82% 0.01 40);
  --plum: oklch(42% 0.09 325);
  --teal-deep: #023d3d;
  /* Brand palette (Nuravita colour guide) */
  --brand-green: #00d865;
  --brand-dark-green: #004639;
  --brand-light-green: #ccf8e1;
  --brand-green-tint-5: #66e7a4;  /* from the green tint scale */
  /* Nutrient colours — 02 The problem chart ribbons + list markers */
  --c-protein: #fd5e53;  /* coral */
  --c-fiber: var(--brand-green);
  --c-hydration: #72ade0;          /* light blue */
  --c-vitamins: var(--brand-light-green);
  --c-vitamins-line: var(--brand-green-tint-5); /* light green is too pale for edge lines */
  --chart-ink: var(--brand-dark-green);          /* chart arrows + markers */
  --chart-text: #000;                            /* chart labels + figure caption */
  --paper: oklch(99% 0.004 75);
  --forest: oklch(40% 0.06 150);

  --serif: 'Libre Caslon Text', Georgia, serif;
  --sans: 'Inter', system-ui, -apple-system, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, monospace;

  /* rhythm: Editorial */
  --pad-1: 80px;
  --pad-2: 96px;
  --pad-3: 112px;
  --gutter: 60px;
}

@media (max-width: 820px) {
  /* The closed slide-out menu must not widen the page after the header becomes frosted. */
  html { overflow-x: clip; }
  :root {
    --pad-1: 30px;
    --pad-2: 34px;
    --pad-3: 44px;
    --gutter: 20px;
  }
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 72px; } /* clears the sticky header */
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: #fff;
  color: var(--ink);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, p { margin: 0; font-weight: 400; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }

/* Shopify article images are optional; existing image-free posts stay unchanged. */
.cms-journal-image { width: 100%; object-fit: cover; }
.cms-article-image { display: block; width: 100%; height: auto; margin-top: 28px; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

/* ── Type primitives ─────────────────────────────── */
.eyebrow {
  font: 600 11px var(--sans);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--plum);
  margin-bottom: 22px;
}
.eyebrow--light { color: rgba(255, 255, 255, 0.45); }
.eyebrow.eyebrow--blue { color: var(--blue); } /* same blue as the CTA buttons */
.headline { font-family: var(--serif); color: var(--ink); text-wrap: pretty; }
.lede { font: 400 15px/1.65 var(--sans); color: var(--body); }
.note { font: italic 400 13px/1.6 var(--sans); color: var(--faint); }

@media (max-width: 820px) {
  .eyebrow { font-size: 10px; margin-bottom: 14px; }
}

/* ── Image placeholders (swap for photography) ───── */
.media {
  display: flex;
  align-items: flex-end;
  padding: 28px;
  font: 11px var(--mono);
  color: var(--faint);
  background: oklch(96% 0.014 75);
  background-size: cover;
  background-position: center;
}
.media--striped {
  background-image: repeating-linear-gradient(128deg, rgba(0,0,0,0.05) 0 2px, rgba(0,0,0,0) 2px 11px);
}
@media (max-width: 820px) {
  .media { padding: 14px; font-size: 10px; }
}

/* ── Buttons ─────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  border-radius: 999px;
  font: 500 14px var(--sans);
  transition: background-color .2s, color .2s, border-color .2s, transform .15s ease;
}
.btn:active { transform: scale(.97); }
.btn--primary { background: var(--blue); color: #fff; padding: 13px 26px; }
.btn--primary:hover { background: var(--blue-hover); color: #fff; }
.btn--ghost { border: 1px solid #fff; color: #fff; padding: 12px 22px; font-size: 13px; }
.btn--ghost:hover { background: rgba(255,255,255,0.12); }
.btn--outline {
  border-radius: 0;
  border: 1px solid var(--ink);
  color: var(--ink);
  padding: 14px 28px;
  font-weight: 600;
}
.btn--outline:hover { background: var(--ink); color: #fff; }

/* ── Announcement bar ────────────────────────────── */
/* Messages share one grid cell; main.js rotates .is-active every few seconds. */
.announce {
  display: grid;
  place-items: center;
  padding: 10px var(--gutter);
  background: var(--blue);
  color: #fff;
  font: 600 13px var(--sans);
  text-align: center;
}
.announce__item {
  grid-area: 1 / 1;
  opacity: 0;
  visibility: hidden;
  transform: translateY(4px);
  transition: opacity .5s ease, transform .5s ease, visibility 0s linear .5s;
}
.announce__item.is-active {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity .5s ease, transform .5s ease, visibility 0s;
}
a.announce__item:hover { text-decoration: underline; text-underline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
  .announce__item, .announce__item.is-active { transform: none; transition: none; }
}
@media (max-width: 820px) {
  .announce { padding: 10px 16px; font-size: 11px; }
}

/* ── Header ──────────────────────────────────────── */
.site-header {
  position: sticky;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px var(--gutter);
  border-bottom: 1px solid var(--rule);
  z-index: 20;
  transition: border-color .3s ease;
  --float-x: 24px; /* scrolled card inset from the viewport edges */
  --float-y: 9px;
}
/* The white bar is drawn by ::before, never the header itself: a backdrop-filter on the
   header would make it the containing block of the fixed #mobile-menu inside it (the
   closed panel then widened the page to twice the phone width and jumped on open).
   Once the page has scrolled (main.js adds .is-scrolled) the layer detaches into a
   floating frosted card. Only the layer moves; the header box and its content stay put. */
.site-header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: 0;
  background: #fff;
  box-shadow: 0 0 0 1px rgba(21, 17, 14, 0), 0 10px 30px rgba(21, 17, 14, 0);
  pointer-events: none;
  transition: inset .4s cubic-bezier(.4, 0, .2, 1), border-radius .4s cubic-bezier(.4, 0, .2, 1), background-color .3s ease, box-shadow .4s ease;
}
.site-header.is-scrolled { border-bottom-color: transparent; }
.site-header.is-scrolled::before {
  inset: var(--float-y) var(--float-x);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.9);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  backdrop-filter: saturate(1.4) blur(14px);
  box-shadow: 0 0 0 1px rgba(21, 17, 14, 0.07), 0 10px 30px rgba(21, 17, 14, 0.08);
}
/* Wordmark = official SVG artwork (assets/images/brand). Size by height only — never
   stretch, recolour or add effects (logo usage guidelines). */
.wordmark { display: inline-block; line-height: 0; }
.wordmark img { display: block; width: auto; height: 24px; }
/* Header logo is taller than the nav text; the negative margin stops it from growing the
   header, so the navbar keeps its original 65px height (desktop). */
.site-header .wordmark img { margin: -2px 0; }
.site-nav { display: flex; align-items: center; gap: 34px; font: 400 14px var(--sans); }
.site-nav a { color: #000; transition: color .2s, border-color .2s; }
.site-nav a:hover, .site-nav a:focus-visible { color: var(--blue); } /* same blue as the CTA buttons */
/* Underline = two 1px layers: black at rest, blue drawn in from the left on hover/focus */
.site-nav .nav-cta {
  padding-bottom: 3px;
  font-weight: 600;
  background:
    linear-gradient(var(--blue), var(--blue)) left bottom / 0 1px no-repeat,
    linear-gradient(#000, #000) left bottom / 100% 1px no-repeat;
  transition: color .2s, background-size .35s cubic-bezier(.4, 0, .2, 1);
}
.site-nav .nav-cta:hover, .site-nav .nav-cta:focus-visible { background-size: 100% 1px, 100% 1px; }
@media (prefers-reduced-motion: reduce) { .site-nav .nav-cta { transition: none; } }
.menu-toggle, .mobile-menu { display: none; }

@media (max-width: 820px) {
  .site-header { height: 64px; padding: 14px 24px; --float-x: 8px; --float-y: 8px; }
  .wordmark img { height: 19px; }
  .site-header .wordmark img { margin: 0; }
  .site-nav { display: none; }
  .site-header.is-menu-open {
    position: fixed;
    top: var(--menu-header-top, 0px);
    left: 0;
    right: 0;
    border-bottom-color: transparent;
    box-shadow: none;
  }
  /* The open menu panel hangs from the header: return the card to a full-width bar */
  .site-header.is-menu-open::before {
    inset: 0 0 -1px; /* also cover the transparent bottom border where the panel meets it */
    border-radius: 0;
    background: #fff;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    box-shadow: 0 0 0 1px rgba(21, 17, 14, 0), 0 10px 30px rgba(21, 17, 14, 0);
  }
  .menu-toggle {
    --menu-accent: var(--blue);
    position: relative;
    display: flex;
    flex: 0 0 36px;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 6px;
    border-radius: 4px;
    background: transparent; /* no white square on the frosted header */
    color: #000;
    -webkit-tap-highlight-color: transparent;
  }
  .menu-toggle svg { display: block; width: 24px; height: 24px; }
  .menu-toggle path { transition: transform .3s cubic-bezier(.4, 0, .2, 1), opacity .3s cubic-bezier(.4, 0, .2, 1); }
  .menu-toggle path:first-child { transform-origin: top right; }
  .menu-toggle path:last-child { transform-origin: bottom right; }
  .menu-toggle[aria-expanded="true"] path:first-child { transform: translateY(17px) rotate(45deg); }
  .menu-toggle[aria-expanded="true"] path:nth-child(2) { opacity: 0; }
  .menu-toggle[aria-expanded="true"] path:last-child { transform: translateY(-17px) rotate(-45deg); }
  .menu-toggle__accent {
    position: absolute;
    left: 0;
    right: 0;
    bottom: -4px;
    height: 4px;
    border-radius: 8px;
    background: var(--menu-accent);
    opacity: 0;
    transition: opacity .3s cubic-bezier(.4, 0, .2, 1);
  }
  @media (hover: hover) { .menu-toggle:hover .menu-toggle__accent { opacity: 1; } }
  .menu-toggle:focus-visible .menu-toggle__accent { opacity: 1; }
  .mobile-menu {
    --menu-accent: var(--blue);
    --menu-top: 100px;
    position: fixed;
    top: var(--menu-top);
    right: 0;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: calc(100vh - var(--menu-top));
    height: calc(100dvh - var(--menu-top));
    overflow: hidden;
    background: #fff;
    color: #000;
    visibility: hidden;
    transform: translateX(100%);
    transition: transform .25s cubic-bezier(.4, 0, .2, 1), visibility .25s cubic-bezier(.4, 0, .2, 1);
    text-align: left;
  }
  .mobile-menu.is-open {
    visibility: visible;
    transform: translateX(0);
    transition-duration: .5s;
  }
  .mobile-menu__tabs {
    display: flex;
    flex-shrink: 0;
    gap: 20px;
    margin-top: 8px;
    padding: 0 24px;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .mobile-menu__tabs::-webkit-scrollbar { display: none; }
  .mobile-menu__tab {
    position: relative;
    flex-shrink: 0;
    padding: 12px 0;
    color: #000;
    font: 400 18px/26px var(--sans);
    white-space: nowrap;
  }
  .mobile-menu__tab::after {
    content: '';
    position: absolute;
    inset: auto 0 0;
    height: 2px;
    border-radius: 999px;
    background: transparent;
    transition: background-color .2s ease-out;
  }
  .mobile-menu__tab[aria-selected="true"]::after { background: var(--menu-accent); }
  .mobile-menu__content {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding: 20px 24px max(64px, env(safe-area-inset-bottom));
  }
  .mobile-menu__panel[hidden] { display: none; }
  .mobile-menu__cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 48px;
    padding: 12px 20px;
    margin-bottom: 16px;
    border-radius: 999px;
    background: var(--blue);
    color: #fff;
    font: 400 16px/24px var(--sans);
    transition: background-color .2s ease-out;
  }
  .mobile-menu__cta svg { flex-shrink: 0; }
  .mobile-menu__cta:hover { background: var(--blue-hover); }
  .mobile-menu__cta--last { margin: 20px 0 0; }
  .mobile-menu__eyebrow {
    margin: 0 0 8px;
    color: #737373;
    font: 400 12px/16px var(--mono);
    text-transform: uppercase;
  }
  .mobile-menu__link {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    width: 100%;
    padding: 8px;
    margin-bottom: 4px;
    border-radius: 4px;
    transition: background-color .2s ease-out;
  }
  .mobile-menu__link:hover, .mobile-menu__link:active { background: #f5f5f3; }
  .mobile-menu__image {
    display: block;
    flex: 0 0 64px;
    width: 64px;
    height: 64px;
    border-radius: 4px;
    object-fit: cover;
    background: #f0f0eb;
  }
  .mobile-menu__copy { display: flex; flex-direction: column; min-width: 0; }
  .mobile-menu__title { font: 700 16px/24px var(--sans); }
  .mobile-menu__description { font: 400 12px/16px var(--sans); }
  /* The brand story uses typography and fine rules instead of photography. */
  .mobile-menu__panel--story .mobile-menu__cta { margin-bottom: 24px; }
  .mobile-menu__panel--story .mobile-menu__eyebrow {
    margin-bottom: 8px;
    font-size: 11px;
    letter-spacing: .08em;
  }
  .mobile-menu__panel--story .mobile-menu__link {
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr) 20px;
    gap: 12px;
    align-items: start;
    min-height: 106px;
    margin: 0;
    padding: 22px 0;
    border-bottom: 1px solid #e3ebe7;
    border-radius: 0;
  }
  .mobile-menu__number {
    padding-top: 5px;
    color: #54766c;
    font: 400 11px/16px var(--mono);
    letter-spacing: .04em;
  }
  .mobile-menu__panel--story .mobile-menu__copy { gap: 7px; }
  .mobile-menu__panel--story .mobile-menu__title { font: 600 20px/24px var(--sans); letter-spacing: -.02em; }
  .mobile-menu__panel--story .mobile-menu__description { color: #52615b; font: 400 13px/19px var(--sans); }
  .mobile-menu__arrow {
    color: #244f43;
    font: 400 22px/24px var(--sans);
    transition: transform .2s ease-out, color .2s ease-out;
  }
  .mobile-menu__panel--story .mobile-menu__link:hover,
  .mobile-menu__panel--story .mobile-menu__link:active { background: #f4faf6; }
  .mobile-menu__panel--story .mobile-menu__link:hover .mobile-menu__arrow,
  .mobile-menu__panel--story .mobile-menu__link:focus-visible .mobile-menu__arrow { color: #168340; transform: translate(2px, -2px); }
  @media (min-width: 568px) {
    .mobile-menu { width: 407px; }
    .mobile-menu__content { padding-right: 40px; padding-left: 40px; padding-bottom: max(24px, env(safe-area-inset-bottom)); }
  }
  @media (prefers-reduced-motion: reduce) {
    .mobile-menu, .mobile-menu.is-open, .menu-toggle path, .menu-toggle__accent, .mobile-menu__tab::after, .mobile-menu__arrow { transition: none; }
  }
}

/* ── Hero ────────────────────────────────────────── */
.hero {
  /* Nearly fill the first screen below the announcement bar (36px) + navbar (65px), leaving
     ~7% of the viewport so the next section peeks in as a scroll cue. Keep --chrome-h in
     sync with those bars; tune --hero-fill to change how much of the next section shows. */
  --chrome-h: 101px;
  --hero-fill: 0.93;
  position: relative;
  min-height: max(560px, calc(100vh * var(--hero-fill) - var(--chrome-h)));
  min-height: max(560px, calc(100svh * var(--hero-fill) - var(--chrome-h)));
  display: flex;
  align-items: center;
  overflow: hidden;
  background-color: var(--forest); /* shows while the image loads */
}
.hero__image {
  will-change: transform;
  background-color: var(--forest);
  background-image: url("images/hero-foliage.jpg");
  background-size: cover;
  background-position: center;
}
.hero__copy { position: relative; padding: var(--pad-2) var(--gutter); max-width: 640px; }
.hero__eyebrow { font: 500 11px var(--sans); letter-spacing: 0.16em; color: #fff; margin-bottom: 22px; }
.hero h1 { font: 400 54px/1.12 var(--serif); color: #fff; max-width: 520px; margin-bottom: 22px; text-wrap: pretty; }
.hero p { font: 400 17px/1.65 var(--sans); color: #fff; max-width: 440px; margin-bottom: 34px; }
.hero__actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }

@media (min-width: 821px) {
  /* Copy block spans about half the hero width; type scales with the viewport */
  .hero__copy { width: 50%; max-width: none; }
  .hero h1 { font-size: clamp(54px, 4.6vw, 92px); max-width: none; }
  .hero p { font-size: clamp(17px, 1.1vw, 21px); max-width: 34em; }
  .hero__image { position: absolute; inset: 0; }
  /* Darken the left side so white copy stays legible over the bright sky patches */
  .hero__image::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(0, 20, 8, 0.55) 0%, rgba(0, 20, 8, 0.3) 45%, rgba(0, 20, 8, 0) 75%);
  }
}

@media (max-width: 820px) {
  /* Mobile: same layout as before (300px of image, then the copy), but the image now runs
     behind the whole section edge to edge and the copy is white on top of it */
  .hero { display: block; min-height: 0; }
  .hero__image { position: absolute; inset: 0; }
  /* Soft dark fade behind the copy (lower part) so the white text stays readable */
  .hero__image::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 200px, rgba(0, 0, 0, 0.45) 330px, rgba(0, 0, 0, 0.55) 100%);
  }
  .hero__copy { padding: calc(300px + var(--pad-2)) 20px var(--pad-2); text-shadow: 0 1px 10px rgba(0, 0, 0, 0.45); } /* slight shadow for legibility */
  .hero__eyebrow { font-size: 10px; font-weight: 600; color: #fff; margin-bottom: 14px; }
  .hero h1 { font-size: 30px; line-height: 1.15; color: #fff; margin-bottom: 14px; }
  .hero p { font-size: 14px; line-height: 1.6; color: #fff; margin-bottom: 22px; }
  .hero__actions { flex-direction: column; align-items: stretch; gap: 14px; }
  .hero .btn--primary { padding: 15px; font-weight: 600; font-size: 13px; text-shadow: none; }
  .hero .btn--ghost { border: 0; padding: 0; font-size: 12px; color: #fff; }
  .hero .btn--ghost:hover { background: none; }
}

/* ── Statement bands (dark) ──────────────────────── */
.band {
  padding: var(--pad-3) var(--gutter);
  display: flex;
  justify-content: center;
}
.band--teal { background: var(--teal-deep); text-align: center; }
.band__inner { max-width: 900px; }
.band--teal .band__inner { max-width: 880px; }
.band h2 { font: 400 58px/1.1 var(--serif); color: #fff; margin-bottom: 34px; text-wrap: pretty; }
.band--teal h2 { font-size: 50px; line-height: 1.15; margin-bottom: 30px; }
.band p { font: 400 19px/1.7 var(--sans); color: rgba(255,255,255,0.72); max-width: 660px; }
.band--teal p { font-size: 18px; color: rgba(255,255,255,0.78); max-width: 620px; margin: 0 auto; }
.band .eyebrow { margin-bottom: 34px; }
.band--teal .eyebrow { color: rgba(255,255,255,0.5); margin-bottom: 30px; }

/* 01 The shift: pure white band after the dark hero, ink text. The heading's words brighten
   from pale to ink with scroll (main.js [data-shift]). */
.band--shift { background: #fff; border-bottom: 1px solid var(--rule); }
.band--shift h2 { color: var(--ink); }
.band--shift p { color: var(--body); }
.band--shift .shift-word { transition: color .25s linear; }

@media (max-width: 820px) {
  .band { display: block; }
  .band--teal { text-align: left; }
  .band h2, .band--teal h2 { font-size: 30px; line-height: 1.15; margin-bottom: 18px; }
  .band--teal h2 { font-size: 28px; line-height: 1.18; margin-bottom: 16px; }
  .band p, .band--teal p { font-size: 14px; }
  .band .eyebrow { margin-bottom: 20px; }
  .band--teal .eyebrow { margin-bottom: 18px; }
}

/* ── Split sections ──────────────────────────────── */
.split { display: flex; background: #fff; }
.split--paper { background: var(--paper); }
.split--ruled { border-top: 1px solid var(--rule); }
.split__media { flex: 1; min-height: 520px; }
.split__media--left { border-right: 1px solid var(--rule); }
.split__media--right { border-left: 1px solid var(--rule); }
.split__copy { flex: 1; padding: var(--pad-1) var(--gutter); }
.split__copy--wide h2, .split__copy--wide .lede, .split__copy--wide .rows { max-width: none; }
.split__copy--center { display: flex; flex-direction: column; justify-content: center; }
.split h2 { font: 400 36px/1.18 var(--serif); color: var(--ink); max-width: 420px; text-wrap: pretty; }

@media (max-width: 820px) {
  .split { flex-direction: column; }
  .split__media { min-height: 190px; flex: none; border: 0; }
  .split__media--right { order: -1; }
  .split h2 { font-size: 24px; line-height: 1.2; }
}

/* Definition list rows (problem + approach) */
.rows { margin: 0; max-width: 440px; }
.rows > div { padding: 18px 0; border-top: 1px solid var(--rule); }
.rows > div:last-child { border-bottom: 1px solid var(--rule); }
.rows dt { font: 600 15px var(--sans); color: var(--ink); margin-bottom: 5px; }
.rows dd { margin: 0; font: 400 14px/1.55 var(--sans); color: var(--muted); }
@media (max-width: 820px) {
  .rows { max-width: none; }
  .rows > div { padding: 14px 0; }
  .rows dt { font-size: 14px; margin-bottom: 3px; }
  .rows dd { font-size: 13px; }
}

/* ── 02 · The problem: widening-gap chart + colour legend ── */
.gap-figure {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 32px;
  background: #fff;
}
@media (min-width: 821px) {
  .gap-figure { flex: 1.3; min-width: 0; }  /* chart column wider than the copy on desktop */
  .gap-figure + .split__copy { min-width: 0; }
}
.gap-chart { display: block; width: 100%; height: auto; overflow: visible; }
.gap-chart__axis-line { stroke: var(--rule); stroke-width: 1.2; }
.gap-chart__marker { stroke: var(--chart-ink); stroke-width: 1; stroke-dasharray: 3 5; opacity: .45; }
.gap-chart__needs { fill: none; stroke: var(--chart-ink); stroke-width: 1.4; stroke-dasharray: 5 5; stroke-linecap: round; }
.gap-chart__intake { fill: none; stroke: var(--chart-ink); stroke-width: 2.25; stroke-linecap: round; stroke-linejoin: round; }
.gap-chart__layer { stroke: #fff; stroke-width: 1.5; stroke-linejoin: round; opacity: .92; transition: opacity .35s ease; }
.gap-chart__layer--protein { fill: var(--c-protein); }
.gap-chart__layer--fiber { fill: var(--c-fiber); }
.gap-chart__layer--hydration { fill: var(--c-hydration); }
.gap-chart__layer--vitamins { fill: var(--c-vitamins); opacity: 1; }
.gap-chart__mark { fill: var(--chart-ink); }
.gap-chart__arrow { stroke: var(--chart-ink); stroke-width: 1.4; }
.gap-chart__arrowhead { fill: none; stroke: var(--chart-ink); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.gap-chart text { font-family: var(--sans); fill: var(--chart-text); }
.gap-chart__label { font-size: 11.5px; font-weight: 500; letter-spacing: 0.16em; }
.gap-chart__label--strong { font-weight: 600; }
.gap-chart__line-label { font-family: var(--serif) !important; font-size: 18px; }
.gap-chart__note { font-family: var(--serif) !important; font-size: 15px; font-style: italic; fill: var(--muted) !important; }
.gap-chart__layer-label { font-family: var(--serif) !important; font-size: 17px; transition: opacity .35s ease; }

/* Scroll-linked reveal (main.js adds .is-scrub): the ghost previews the whole gap, the
   playhead (a thin line) marks "now"; it fades out once the end is reached. */
.gap-chart__ghost { opacity: .16; }
.gap-chart__playhead { display: none; }
.gap-figure.is-scrub .gap-chart__playhead { display: inline; transition: opacity .3s ease; }
.gap-figure.is-complete .gap-chart__playhead { opacity: 0; }
.gap-chart__playhead-line { stroke: var(--chart-ink); stroke-width: 1; opacity: .35; }

/* Hovering a row in the list highlights its layer */
.gap-figure[data-focus] .gap-chart__layer,
.gap-figure[data-focus] .gap-chart__layer-label { opacity: .18; }
.gap-figure[data-focus="protein"] .gap-chart__layer--protein,
.gap-figure[data-focus="fiber"] .gap-chart__layer--fiber,
.gap-figure[data-focus="hydration"] .gap-chart__layer--hydration,
.gap-figure[data-focus="vitamins"] .gap-chart__layer--vitamins,
.gap-figure[data-focus="protein"] .gap-chart__layer-label--protein,
.gap-figure[data-focus="fiber"] .gap-chart__layer-label--fiber,
.gap-figure[data-focus="hydration"] .gap-chart__layer-label--hydration,
.gap-figure[data-focus="vitamins"] .gap-chart__layer-label--vitamins { opacity: 1; }
.gap-figure__caption {
  width: 100%;
  margin-top: 20px;
  font: 500 10.5px/1.7 var(--sans);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-align: right;
  color: var(--chart-text);
}

/* Colour markers beside each row, matching the chart bands */
.rows--legend > div {
  display: grid;
  grid-template-columns: 24px 1fr;
  column-gap: 20px;
}
.rows--legend > div::before {
  content: "";
  grid-column: 1;
  grid-row: 1;
  align-self: center;
  height: 5px;
  border-radius: 3px;
  background: var(--legend, var(--rule));
}
.rows--legend dt, .rows--legend dd { grid-column: 2; }
.legend--protein { --legend: var(--c-protein); }
.legend--fiber { --legend: var(--c-fiber); }
.legend--hydration { --legend: var(--c-hydration); }
.legend--vitamins { --legend: var(--c-vitamins); }
.legend--vitamins::before { box-shadow: inset 0 0 0 1px var(--c-vitamins-line); }

@media (max-width: 820px) {
  .gap-figure { padding: 28px 16px; min-height: 0; }
  /* The chart scales to ~45% on phones — enlarge its text (SVG units) so it stays legible */
  .gap-chart__label { font-size: 17px; letter-spacing: 0.08em; }
  .gap-chart__line-label { font-size: 24px; }
  .gap-chart__layer-label { font-size: 16.5px; }
  .gap-chart__note { font-size: 20px; }
  .gap-figure__caption { margin-top: 14px; font-size: 9.5px; text-align: left; }
  .rows--legend > div { grid-template-columns: 18px 1fr; column-gap: 14px; }
}

/* ── Motion (site-wide): quiet, user-driven only ── */
/* Hero parallax: main.js adds .has-parallax and moves the image down ~15% of the hero height
   as it scrolls away; the extra 15% on top keeps the edge covered. */
.hero.has-parallax .hero__image { top: -15%; }
/* Same overhang from first paint (main.js enables parallax under the same condition), so the
   photo does not jump up when the script starts after hydration. */
@media (prefers-reduced-motion: no-preference) { .hero .hero__image { top: -15%; } }

/* Keep the hover/click area still while the whole card comes forward. */
.system-grid li { transition: border-color .16s ease; }
.system-grid__tile {
  position: relative;
  z-index: 1;
  flex: 1;
  min-width: 0;
  background: #fff;
  pointer-events: none;
  transform: perspective(1200px) translate3d(0, 0, 0);
  transition: transform .48s cubic-bezier(.22, 1, .36, 1), box-shadow .48s cubic-bezier(.22, 1, .36, 1);
}
/* Draw separators on the visual tiles so their white surface cannot cover the line. */
.system-grid__tile::before {
  content: "";
  position: absolute;
  inset: 0 -1px;
  border-inline: 1px solid var(--rule);
  pointer-events: none;
}
.system-grid li:first-child .system-grid__tile::before { border-left: 0; }
.system-grid li:last-child .system-grid__tile::before { border-right: 0; }
/* Per-card perimeter replaces the fixed grid border, leaving no line under a raised tile. */
.system-grid li::after {
  content: "";
  position: absolute;
  inset: -1px 0;
  z-index: 2;
  pointer-events: none;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  transition: opacity .16s ease;
}
.system-grid li:first-child::after { left: -1px; border-left: 1px solid var(--rule); }
.system-grid li:last-child::after { right: -1px; border-right: 1px solid var(--rule); }
@media (hover: hover) {
  .system-grid li:hover { z-index: 3; border-color: transparent; }
  .system-grid li:hover::after { opacity: 0; }
  .system-grid li:hover .system-grid__tile {
    transform: perspective(1200px) translate3d(0, -12px, 24px);
    box-shadow: 0 22px 44px rgba(0, 0, 0, .14), 0 5px 12px rgba(0, 0, 0, .06);
  }
}
.system-grid li:has(.system-grid__details:focus-visible) { z-index: 3; border-color: transparent; }
.system-grid li:has(.system-grid__details:focus-visible)::after { opacity: 0; }
.system-grid li:has(.system-grid__details:focus-visible) .system-grid__tile {
  transform: perspective(1200px) translate3d(0, -12px, 24px);
  box-shadow: 0 22px 44px rgba(0, 0, 0, .14), 0 5px 12px rgba(0, 0, 0, .06);
}

/* FAQ: answers slide open instead of jumping (browsers without ::details-content just jump) */
.faq details { interpolate-size: allow-keywords; }
.faq details::details-content {
  block-size: 0;
  overflow: hidden;
  transition: block-size .35s ease, content-visibility .35s allow-discrete;
}
.faq details[open]::details-content { block-size: auto; }

@media (prefers-reduced-motion: reduce) {
  .btn:active { transform: none; }
  .system-grid li, .system-grid li::after, .system-grid__tile, .faq details::details-content, .site-header, .site-header::before { transition: none; }
  .system-grid li:hover .system-grid__tile,
  .system-grid li:has(.system-grid__details:focus-visible) .system-grid__tile { transform: none; }
}

/* ── Section scaffolding ─────────────────────────── */
.section { padding: var(--pad-1) var(--gutter); background: #fff; }
.section--paper { background: var(--paper); }
.section--rule-b { border-bottom: 1px solid var(--rule); }
.section--rule-t { border-top: 1px solid var(--rule); }
.section h2 { font: 400 40px/1.15 var(--serif); color: var(--ink); text-wrap: pretty; }
.section__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }
.section__head .eyebrow { margin-bottom: 18px; }
@media (max-width: 820px) {
  .section h2 { font-size: 24px; line-height: 1.2; }
  .section__head .eyebrow { margin-bottom: 14px; }
}

.badge {
  font: 600 10px var(--sans);
  letter-spacing: 0.14em;
  color: var(--plum);
  border: 1px solid var(--plum);
  padding: 7px 12px;
  white-space: nowrap;
}
.badge.badge--blue { color: var(--blue); border-color: var(--blue); }

/* ── 03 · The system (4-up card grid) ───────────── */
.system__head { margin-bottom: 18px; }
/* "Click any card to read the details →" — says "Tap" on touch screens */
.system__hint { font: 400 13px var(--sans); color: var(--muted); margin-bottom: 30px; }
.system__hint-touch { display: none; }
@media (hover: none) {
  .system__hint-pointer { display: none; }
  .system__hint-touch { display: inline; }
}
.system__head h2 { max-width: 520px; }

.system-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0; padding: 0; list-style: none;
  border: 1px solid transparent;
  background: #fff;
}
.system-grid__tile { padding: 12px 12px 22px; }
.system-grid li + li { border-left: 1px solid var(--rule); }
.system-grid__img { aspect-ratio: 1; margin-bottom: 18px; background-size: cover; background-position: center; }
.system-grid__num { font: 600 11px var(--mono); color: var(--blue); letter-spacing: 0.12em; margin: 0 4px 8px; }
.system-grid h3 { font: 400 26px/1.2 var(--serif); color: var(--ink); margin: 0 4px 8px; }
.system-grid p { font: 400 14px/1.6 var(--sans); color: var(--body); margin: 0 4px; }
.system-grid__heading { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; margin: 0 4px 10px; }
.system-grid .system-grid__heading h3 { margin: 0; }
.system-grid__details { position: relative; z-index: 1; pointer-events: auto; flex-shrink: 0; gap: 6px; min-height: 40px; padding: 11px 16px; font-size: 12px; line-height: 1.2; }

/* Keep the whole card clickable; the visible CTA sits above this overlay. */
.system-grid li { position: relative; display: flex; }
.system-grid__open { position: absolute; inset: 0; width: 100%; cursor: pointer; background: none; border: 0; }
.system-grid__open:focus-visible { outline: none; }
.system-grid li:has(.system-grid__open:focus-visible) .system-grid__details { outline: 2px solid var(--blue); outline-offset: 3px; }

/* ── Flip card viewer (port of the React "FlipCard" reference) ── */
.flip-modal {
  position: fixed; inset: 0; z-index: 100;
  display: grid; place-items: center;
}
.flip-modal[hidden] { display: none; }
/* The card itself flies in from the grid (main.js); only the chrome around it fades */
.flip-modal__backdrop,
.flip-modal__close,
.flip-modal__hint { opacity: 0; transition: opacity 0.4s ease; }
.flip-modal.is-open .flip-modal__backdrop,
.flip-modal.is-open .flip-modal__close,
.flip-modal.is-open .flip-modal__hint { opacity: 1; }
.flip-modal__backdrop { position: absolute; inset: 0; background: rgba(5, 6, 10, 0.72); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.flip-modal__dialog { position: relative; display: flex; flex-direction: column; align-items: center; gap: 28px; }
.flip-modal__dialog:focus { outline: none; }
.flip-modal__close {
  position: fixed; top: 20px; right: 20px;
  width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.3); background: rgba(12, 12, 14, 0.4);
  color: #fff; font: 300 26px/1 var(--sans); cursor: pointer;
}
.flip-modal__close:hover { border-color: rgba(255, 255, 255, 0.6); }
.flip-modal__close:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.flip-modal__hint { font: 500 12px var(--sans); letter-spacing: 0.08em; color: rgba(255, 255, 255, 0.7); }

.flip-card {
  --fc-w: min(440px, 84vw, 64vh); /* square, like the grid image */
  --fc-radius: 22px;
  --fc-bg: #27272a;
  --fc-ink: #f5f5f5;
  --fc-glare: 0.22;
  --fc-gx: 50%; --fc-gy: 50%; --fc-sheen: 0;
  position: relative;
  width: var(--fc-w); height: var(--fc-w);
  transform-style: preserve-3d; /* so the fly-in spin turns the faces too */
  cursor: pointer; user-select: none; -webkit-user-select: none;
  touch-action: none; outline: none;
}
.flip-card[data-draggable] { cursor: grab; }
.flip-card[data-dragging] { cursor: grabbing; }
.flip-card.is-flying { pointer-events: none; }
.flip-card:focus-visible .flip-card__face { box-shadow: 0 0 0 2px #fff; }
.flip-card__shadow {
  position: absolute; left: 6%; right: 6%; bottom: -26px; height: 36px;
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.45), transparent 70%);
  filter: blur(6px); pointer-events: none;
}
.flip-card__rotor { position: absolute; inset: 0; transform-style: preserve-3d; will-change: transform; }
.flip-card__face {
  position: absolute; inset: 0; overflow: hidden;
  border-radius: var(--fc-radius);
  background: var(--fc-bg); color: var(--fc-ink);
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
}
.flip-card__face--back { transform: rotateY(180deg); }
.flip-card__glare {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(circle at var(--fc-gx) var(--fc-gy), rgba(255, 255, 255, var(--fc-glare)), transparent 60%);
  opacity: var(--fc-sheen);
}
.flip-card__img { position: absolute; inset: 0; background-size: cover; background-position: center; }
.flip-card__back { display: flex; flex-direction: column; height: 100%; padding: 32px 28px; overflow: auto; }
.flip-card__num { font: 600 11px var(--mono); letter-spacing: 0.12em; color: var(--brand-light-green); margin-bottom: 14px; }
.flip-card__title { font: 400 32px/1.15 var(--serif); color: var(--fc-ink); margin-bottom: 14px; }
.flip-card__desc { font: 400 16px/1.55 var(--sans); color: var(--fc-ink); margin-bottom: 18px; }
.flip-card__more { font: 400 14px/1.6 var(--sans); color: rgba(245, 245, 245, 0.72); margin-top: auto; }
.flip-card__more p + p { margin-top: 10px; }
.flip-card__label { font: 600 10.5px var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--brand-light-green); }
.flip-card__more .flip-card__label + p { margin-top: 8px; }
.flip-card__caption { font-size: 12px; font-style: italic; color: rgba(245, 245, 245, 0.5); }
@media (max-width: 820px) {
  .flip-card__back { padding: 20px 20px; }
  .flip-card__num { margin-bottom: 8px; }
  .flip-card__title { font-size: 26px; margin-bottom: 6px; }
  .flip-card__desc { font-size: 14px; line-height: 1.45; margin-bottom: 8px; }
  .flip-card__more { font-size: 12px; line-height: 1.45; }
  .flip-card__more p + p { margin-top: 6px; }
  .flip-card__more .flip-card__label + p { margin-top: 5px; }
  .flip-card__caption { font-size: 11px; }
}

/* Reduced motion: cross-fade the faces instead of rotating */
.flip-card[data-fade] .flip-card__face { transform: none; transition: opacity 0.3s ease; }
.flip-card[data-fade="front"] .flip-card__face--back,
.flip-card[data-fade="back"] .flip-card__face--front { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  .flip-modal__backdrop, .flip-modal__close, .flip-modal__hint { transition: none; }
}

@media (min-width: 821px) {
  .system__title-mobile { display: none; }
}
@media (max-width: 820px) {
  .system__title-desktop { display: none; }
  .system__head { margin-bottom: 16px; align-items: center; }
  .system__head .eyebrow { margin-bottom: 0; }
  .system__head + h2 { margin-bottom: 8px; }
  .system__hint { font-size: 12px; margin-bottom: 18px; }
  .badge { font-size: 9px; letter-spacing: 0.12em; padding: 5px 8px; }
  .system-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .system-grid__tile { padding: 10px 10px 16px; }
  .system-grid li:nth-child(odd) { border-left: 0; }
  .system-grid li:nth-child(n + 3) { border-top: 1px solid var(--rule); }
  .system-grid li::after { border-top: 0; border-bottom: 0; }
  .system-grid li:nth-child(-n + 2)::after { border-top: 1px solid var(--rule); }
  .system-grid li:nth-child(n + 3)::after { border-bottom: 1px solid var(--rule); }
  .system-grid li:nth-child(odd)::after { left: -1px; border-left: 1px solid var(--rule); }
  .system-grid li:nth-child(even)::after { right: -1px; border-right: 1px solid var(--rule); }
  .system-grid li:nth-child(odd) .system-grid__tile::before { border-left: 0; }
  .system-grid li:nth-child(even) .system-grid__tile::before { border-right: 0; }
  .system-grid__img { margin-bottom: 12px; }
  .system-grid__num { font-size: 10px; margin: 0 2px 5px; }
  .system-grid h3 { font-size: 18px; margin: 0 2px 5px; }
  .system-grid__heading { margin: 0 2px 8px; }
  .system-grid p { font-size: 12px; line-height: 1.55; margin: 0 2px; }
}
@media (max-width: 820px) and (hover: hover) {
  .system-grid li:hover { border-color: transparent; }
}
/* Keep every card's title/button row aligned when the longest title needs more room. */
@media (min-width: 821px) and (max-width: 1340px), (max-width: 550px) {
  .system-grid__heading { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 550px) {
  .system-grid__details { padding-inline: 12px; }
}

/* Fallback swatch colours for the grid images (until artwork loads) */
.tone-water { background-color: oklch(94% 0.02 230); }
.tone-fiber { background-color: oklch(94% 0.025 120); }
.tone-protein { background-color: oklch(93% 0.03 60); }
.tone-foundation { background-color: oklch(93% 0.03 325); }

/* Final artwork for all four cards */
.system-grid__img.tone-water, .flip-card__img.tone-water { background-image: var(--cms-hydration, url("images/hydration-ginger-microscope.jpg")); }
.system-grid__img.tone-fiber, .flip-card__img.tone-fiber { background-image: var(--cms-fiber, url("images/fiber-guar-gum-microscope.jpg")); }
.system-grid__img.tone-protein, .flip-card__img.tone-protein { background-image: var(--cms-protein, url("images/protein-clear-whey.jpg")); }
.system-grid__img.tone-foundation, .flip-card__img.tone-foundation { background-image: var(--cms-foundation, url("images/foundation-whole-foods.jpg")); }

/* ── 04 · Who it's for: journey trace ────────────── */
/* Desktop: a stepped trace (SVG, stretched to the band; stroke stays crisp via
   non-scaling-stroke) with three nodes; each stage's text hangs off its node on a leader
   line. Phones: a vertical rail with a dot per stage. main.js adds .is-scrub and reveals
   everything with scroll (and pins the section on desktop, .is-pinned); without JS or with
   reduced motion it all shows complete. */
.journey {
  --header-h: 65px;     /* sticky navbar; main.js keeps it in sync */
  --pin-scroll: 120vh;  /* scroll distance the pinned trace takes to play */
  --band-h: 200px;
  --lead-gap: 30px;     /* band bottom → stage text */
}
.journey__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 64px; }
.journey__eyebrow { margin-bottom: 18px; }
.journey__title { max-width: 560px; }
.journey__count { display: none; font: 500 11px var(--mono); letter-spacing: 0.14em; color: var(--faint); white-space: nowrap; }
.journey__count span { color: var(--blue); }
.journey.is-scrub .journey__count { display: block; }

.journey__band { position: relative; height: var(--band-h); }
/* faint graph-paper dots, fading out at the ends */
.journey__band::before {
  content: "";
  position: absolute;
  inset: 0 0 8px;
  background: radial-gradient(circle, oklch(80% 0.01 40) 0.8px, transparent 1.2px) 0 0 / 20px 20px;
  opacity: .55;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
/* measurement axis: hairline + minor ticks every 2.5%, major every 10% */
.journey__band::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 9px;
  border-bottom: 1px solid var(--rule);
  background:
    linear-gradient(90deg, var(--field-rule) 1px, transparent 1px) 0 100% / 10% 9px repeat-x,
    linear-gradient(90deg, var(--rule) 1px, transparent 1px) 0 100% / 2.5% 4px repeat-x;
}
.journey__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.journey__ghost, .journey__trace { fill: none; vector-effect: non-scaling-stroke; stroke-linecap: round; stroke-linejoin: round; }
.journey__ghost { stroke: var(--rule); stroke-width: 1.5; }
.journey__trace { stroke: var(--blue); stroke-width: 2.25; }

/* Nodes — x/y are fractions of the band and must sit on the SVG path (viewBox 1000×200):
   01 = (80, 175), 02 = (420, 105), 03 = (760, 35). Stage leaders use the same --ny. */
.journey__node--1 { --nx: 8%;  --ny: .875; }
.journey__node--2 { --nx: 42%; --ny: .525; }
.journey__node--3 { --nx: 76%; --ny: .175; }
.journey__node, .journey__dot {
  position: absolute;
  width: 13px; height: 13px;
  border-radius: 50%;
  background: var(--blue);
  box-shadow: 0 0 0 3px #fff, 0 0 0 4px var(--blue);
  transition: background-color .35s ease, box-shadow .35s ease, transform .35s ease;
  z-index: 1;
}
.journey__node { left: var(--nx); top: calc(var(--ny) * 100%); margin: -6.5px 0 0 -6.5px; }
.journey__node::after, .journey__dot::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 1px solid var(--blue);
  opacity: 0;
  pointer-events: none;
}
/* playhead at the drawing end of the trace (positioned by main.js) */
.journey__tip {
  display: none;
  position: absolute;
  width: 9px; height: 9px;
  margin: -4.5px 0 0 -4.5px;
  border-radius: 50%;
  background: var(--blue);
  box-shadow: 0 0 0 6px rgba(0, 110, 219, .14);
  transition: opacity .3s ease;
  z-index: 2;
}
.journey.is-scrub .journey__tip { display: block; }
.journey.is-complete .journey__tip { opacity: 0; }

/* Stages: desktop columns start at each node's x (8% / 42% / 76%) */
.journey__track { position: relative; margin-top: var(--lead-gap); }
.journey__stages {
  display: grid;
  grid-template-columns: 8% 26% 8% 26% 8% 24%;
  margin: 0; padding: 0; list-style: none;
}
.journey__stage { position: relative; padding: 0 0 0 22px; }
.journey__stage:nth-child(1) { grid-column: 2; --ny: .875; }
.journey__stage:nth-child(2) { grid-column: 4; --ny: .525; }
.journey__stage:nth-child(3) { grid-column: 6; --ny: .175; }
/* leader: from just under the node, down the stage's left edge */
.journey__stage::before {
  content: "";
  position: absolute;
  left: 0; width: 1px;
  top: calc(10px - var(--band-h) * (1 - var(--ny)) - var(--lead-gap));
  bottom: 4px;
  background: linear-gradient(var(--blue), var(--rule) 60%);
  opacity: .55;
  transform-origin: top;
}
.journey__num { font: 600 11px var(--mono); letter-spacing: 0.12em; color: var(--blue); margin-bottom: 10px; }
.journey__stage h3 { font: 400 26px/1.2 var(--serif); color: var(--ink); margin-bottom: 10px; }
.journey__stage p { font: 400 15px/1.65 var(--sans); color: var(--muted); max-width: 30em; }
.journey__dot, .journey__rail { display: none; }

/* Scroll states (main.js) */
.journey.is-scrub .journey__node:not(.is-active) {
  background: #fff;
  box-shadow: 0 0 0 3px #fff, 0 0 0 4px var(--field-rule);
  transform: scale(.8);
}
.journey.is-scrub .journey__node.is-active::after,
.journey.is-scrub .journey__stage.is-active .journey__dot::after { animation: journey-ping 1.1s cubic-bezier(.2, .7, .2, 1); }
@keyframes journey-ping {
  from { opacity: .7; transform: scale(1); }
  to { opacity: 0; transform: scale(2.8); }
}
.journey.is-scrub .journey__stage::before { transition: transform .5s cubic-bezier(.2, .7, .2, 1); }
.journey.is-scrub .journey__stage:not(.is-active)::before { transform: scaleY(0); transition-duration: .25s; }
.journey.is-scrub .journey__stage > :not(.journey__dot) {
  transition: opacity .6s ease, transform .6s cubic-bezier(.2, .7, .2, 1), filter .6s ease;
}
.journey.is-scrub .journey__stage.is-active > .journey__num { transition-delay: .12s; }
.journey.is-scrub .journey__stage.is-active > h3 { transition-delay: .2s; }
.journey.is-scrub .journey__stage.is-active > p { transition-delay: .28s; }
.journey.is-scrub .journey__stage:not(.is-active) > :not(.journey__dot) {
  opacity: 0;
  transform: translateY(14px);
  filter: blur(4px);
  transition-duration: .25s;
}

/* Desktop pin: the section holds still while the trace plays (main.js adds .is-pinned
   only when the viewport is tall enough) */
@media (min-width: 821px) {
  .journey.is-pinned { --band-h: clamp(150px, 24vh, 230px); padding: 0; height: calc(100vh - var(--header-h) + var(--pin-scroll)); }
  .journey.is-pinned .journey__pin {
    position: sticky;
    top: var(--header-h);
    height: calc(100vh - var(--header-h));
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0 var(--gutter);
  }
  .journey.is-pinned .journey__head { margin-bottom: clamp(36px, 7vh, 72px); }
}

/* Phones: vertical rail — a dot per stage, blue fill grows with scroll (--fill) */
@media (max-width: 820px) {
  .journey__head { display: block; margin-bottom: 0; }
  .journey__band, .journey.is-scrub .journey__count { display: none; }
  .journey__track { margin-top: 28px; }
  .journey__stages { display: block; }
  .journey__stage { padding-left: 32px; }
  .journey__stage + .journey__stage { margin-top: 28px; }
  .journey__stage::before { display: none; }
  .journey__dot { display: block; left: 0; top: 1px; width: 11px; height: 11px; }
  .journey__rail {
    display: block;
    position: absolute;
    left: 5px; top: 7px; bottom: 0;
    width: 1px;
    background: var(--rule);
  }
  .journey__rail::after {
    content: "";
    position: absolute;
    left: -0.5px; top: 0;
    width: 2px; height: 100%;
    background: var(--blue);
    transform: scaleY(var(--fill, 1));
    transform-origin: top;
  }
  .journey.is-scrub .journey__stage:not(.is-active) .journey__dot {
    background: #fff;
    box-shadow: 0 0 0 3px #fff, 0 0 0 4px var(--field-rule);
    transform: scale(.8);
  }
  .journey__num { font-size: 10px; margin-bottom: 6px; }
  .journey__stage h3 { font-size: 20px; margin-bottom: 6px; }
  .journey__stage p { font-size: 13px; line-height: 1.6; }
}

@media (prefers-reduced-motion: reduce) {
  .journey__node, .journey__dot { transition: none; }
}

/* ── 05 · Our approach ───────────────────────────── */
/* Black copy panel beside a square photo. The photo is always a full, uncropped square: it
   sizes by width and isn't stretched to the row height. Text sizes are the standard split /
   .rows sizes (only the colours change for the black background); the copy centres vertically. */
.approach { background: #000; }
.approach .split__copy {
  display: flex; flex-direction: column; justify-content: center;
  padding: 60px var(--gutter); /* side padding must match the other splits so the photo keeps its size */
}
/* Sizes equal the standard split/.rows sizes up to ~1440px wide, then grow gently on larger
   monitors (capped) so the copy doesn't look small next to the big photo. */
.approach .eyebrow { font-size: clamp(11px, .76vw, 14px); }
.approach h2 { color: #fff; font-size: clamp(36px, 2.5vw, 52px); margin-bottom: clamp(34px, 2.36vw, 46px); max-width: clamp(420px, 29vw, 600px); }
.approach .rows { max-width: clamp(440px, 30.5vw, 600px); }
.approach .rows > div { padding: clamp(18px, 1.25vw, 24px) 0; border-color: rgba(255, 255, 255, .18); }
.approach .rows dt { color: #fff; font-size: clamp(15px, 1.04vw, 20px); }
.approach .rows dd { color: rgba(255, 255, 255, .68); font-size: clamp(14px, .97vw, 19px); }
.approach__note { color: rgba(255, 255, 255, .5); font-size: clamp(13px, .9vw, 17px); line-height: 1.7; margin-top: clamp(24px, 1.67vw, 32px); max-width: clamp(440px, 30.5vw, 600px); }
.approach__media { min-height: 0; align-self: center; border-left: 0; background: #000; }
.approach__media img { display: block; width: 100%; height: auto; aspect-ratio: 1; }
@media (max-width: 820px) {
  .approach .split__copy { padding: var(--pad-1) var(--gutter); }
  .approach h2 { font-size: 24px; margin-bottom: 22px; }
  .approach .rows { max-width: none; }
  .approach .rows > div { padding: 14px 0; }
  .approach .rows dt { font-size: 14px; }
  .approach .rows dd { font-size: 13px; }
  .approach__note { font-size: 13px; margin-top: 20px; max-width: none; }
  .approach__media { align-self: stretch; }
}

/* ── 06 · Journal ────────────────────────────────── */
.journal .section__head { margin-bottom: 44px; }
.journal h2 { max-width: 600px; }
.text-link {
  font: 600 13px var(--sans);
  color: var(--ink);
  border-bottom: 1px solid var(--ink);
  padding-bottom: 3px;
  white-space: nowrap;
}
.text-link { transition: color .2s, border-color .2s; }
.text-link:hover { color: var(--blue); border-color: var(--blue); }
.journal__grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 48px; }
.journal__feature .media { height: 320px; margin-bottom: 24px; padding: 16px; font-size: 10px; background-color: oklch(95% 0.014 75); }
.journal__meta { display: flex; gap: 14px; font: 600 11px var(--sans); letter-spacing: 0.1em; color: var(--blue); margin-bottom: 14px; }
.journal__meta .time { color: oklch(60% 0.01 40); }
.journal__feature h3 { font: 400 30px/1.2 var(--serif); color: var(--ink); margin-bottom: 12px; max-width: 440px; text-wrap: pretty; }
.journal__feature p { font: 400 15px/1.65 var(--sans); color: var(--muted); max-width: 440px; }
.journal__list { display: flex; flex-direction: column; }
.journal__item { display: block; padding: 24px 0; border-top: 1px solid var(--rule); }
.journal__item:last-child { border-bottom: 1px solid var(--rule); }
.journal__item .media { height: 120px; margin-bottom: 18px; padding: 10px; font-size: 10px; }
.journal img.cms-journal-image { padding: 0; background: transparent; }
.journal__item .journal__meta { margin-bottom: 10px; }
.journal__item h3 { font: 400 21px/1.25 var(--serif); color: var(--ink); margin-bottom: 8px; text-wrap: pretty; }
.journal__item p { font: 400 14px/1.6 var(--sans); color: var(--muted); }
.journal h3 { transition: color .2s; }
.journal a:hover h3, .journal a:focus-visible h3 { color: var(--blue); } /* same blue as the CTA buttons */
.journal__more-mobile { display: none; }

@media (max-width: 820px) {
  .journal .section__head { display: block; margin-bottom: 24px; }
  .journal .section__head .text-link { display: none; }
  .journal__grid { grid-template-columns: 1fr; gap: 0; }
  .journal__feature { margin-bottom: 24px; }
  .journal__feature .media { height: 180px; margin-bottom: 16px; padding: 12px; }
  .journal__meta { font-size: 10px; gap: 12px; margin-bottom: 10px; }
  .journal__feature h3 { font-size: 22px; line-height: 1.22; margin-bottom: 8px; }
  .journal__feature p { font-size: 13px; line-height: 1.6; }
  .journal__item { padding: 18px 0; }
  .journal__item .media { display: none; }
  .journal__item .journal__meta { margin-bottom: 8px; }
  .journal__item h3 { font-size: 17px; line-height: 1.28; margin-bottom: 6px; }
  .journal__item p { font-size: 12px; line-height: 1.55; }
  .journal__more-mobile { display: inline-block; margin-top: 18px; border: 0; padding: 0; }
}

/* ── Built with real people ──────────────────────── */
.people .split__media { min-height: 480px; }
/* Photo always shown whole (3:2, never cropped): sized by width, column not stretched to the row */
.people .people__media { min-height: 0; align-self: center; flex: 1.25; border-right: 0; }
.people .people__media + .split__copy { padding-top: 48px; padding-bottom: 48px; }
.people__media img { display: block; width: 100%; height: auto; aspect-ratio: 1600 / 1067; }
/* Text sizes match 05 Our approach (same clamps: standard up to ~1440px, gently larger above) */
.people .eyebrow { font-size: clamp(11px, .76vw, 14px); }
.people h2 { font-size: clamp(36px, 2.5vw, 52px); margin-bottom: clamp(22px, 1.53vw, 30px); max-width: clamp(420px, 29vw, 600px); }
.people p { font: 400 clamp(14px, .97vw, 19px)/1.7 var(--sans); color: var(--body); max-width: clamp(440px, 30.5vw, 600px); margin-bottom: clamp(30px, 2.08vw, 40px); }
.people .btn--primary { align-self: flex-start; } /* same blue pill as the hero CTA */
@media (max-width: 820px) {
  .people .split__media { min-height: 220px; }
  .people .people__media { min-height: 0; align-self: stretch; flex: none; }
  .people .people__media + .split__copy { padding: var(--pad-1) var(--gutter); }
  .people h2 { font-size: 24px; margin-bottom: 14px; }
  .people p { font-size: 13px; margin-bottom: 22px; max-width: none; }
  .people .btn--primary { align-self: stretch; padding: 15px; font-weight: 600; font-size: 13px; }
}

/* ── Conversion ──────────────────────────────────── */
.signup { background: #000; color: #fff; padding: var(--pad-3) var(--gutter); text-align: center; scroll-margin-top: 20px; }
.signup h2 { font: 400 46px/1.15 var(--serif); margin-bottom: 18px; text-wrap: pretty; }
.signup > p { font: 400 17px/1.7 var(--sans); color: rgba(255,255,255,0.72); max-width: 560px; margin: 0 auto 40px; }
.signup-form { display: flex; gap: 12px; max-width: 520px; margin: 0 auto 16px; }
.signup-form input {
  flex: 1;
  min-width: 0;
  border: 1px solid rgba(255,255,255,0.35);
  border-radius: 999px;
  padding: 15px 20px;
  font: 14px var(--sans);
  color: #fff;
  background: transparent;
}
.signup-form input::placeholder { color: rgba(255,255,255,0.55); }
.signup-form input:focus { outline: none; border-color: #fff; }
.signup-form .btn--primary { padding: 15px 28px; font-weight: 600; }
.signup-form .btn--primary[disabled] { opacity: .6; cursor: progress; }
.signup__fine { font: 400 12px var(--sans); color: rgba(255,255,255,0.45); }
.signup__error { font: 500 13px var(--sans); color: #ffb4a8; margin: -4px 0 12px; min-height: 0; }
.signup__error:empty { display: none; }

@media (max-width: 820px) {
  .signup h2 { font-size: 28px; line-height: 1.2; margin-bottom: 12px; }
  .signup > p { font-size: 13px; line-height: 1.65; margin-bottom: 24px; }
  .signup-form { flex-direction: column; gap: 10px; margin-bottom: 0; }
  .signup-form input { padding: 14px; font-size: 13px; }
  .signup-form .btn--primary { padding: 14px; font-size: 13px; }
  .signup__fine { font-size: 11px; margin-top: 12px; }
}

/* ── FAQ ─────────────────────────────────────────── */
.faq { background: var(--paper); padding: var(--pad-1) var(--gutter); display: flex; justify-content: center; }
.faq__inner { display: flex; gap: 80px; width: 100%; max-width: 980px; }
.faq__title { flex: none; width: 240px; font: 400 30px/1.2 var(--serif); color: var(--ink); }
.faq__list { flex: 1; }
.faq details { border-top: 1px solid var(--rule); }
.faq details:last-of-type { border-bottom: 1px solid var(--rule); }
.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 24px 0;
  font: 600 16px var(--sans);
  color: var(--ink);
  cursor: pointer;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; font: 400 22px var(--sans); color: var(--faint); transition: transform .2s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { font: 400 15px/1.7 var(--sans); color: var(--body); padding: 0 40px 24px 0; max-width: 620px; }
.faq__disclaimer { font: italic 400 12px/1.7 var(--sans); color: var(--faint); margin-top: 22px; }

@media (max-width: 820px) {
  .faq { display: block; padding: var(--pad-2) 20px; }
  .faq__inner { flex-direction: column; gap: 18px; }
  .faq__title { width: auto; font-size: 22px; }
  .faq summary { padding: 16px 0; font-size: 14px; }
  .faq summary::after { font-size: 18px; }
  .faq details p { font-size: 13px; padding: 0 0 16px; }
}

/* ── Footer ──────────────────────────────────────── */
/* Layout modelled on drinkag1.com: link columns + Connect (newsletter, socials), a rule,
   then a big wordmark beside the legal copy, then a bottom bar. Phones: newsletter on top,
   columns become +/− accordions (main.js closes them ≤820px), socials centred, logo centred.
   Markup is generated by scripts/sync-footer.py — edit there, not in the pages. */
.site-footer { background: var(--teal-deep); color: #fff; padding: 64px var(--gutter) 40px; }
.site-footer a { color: #fff; }
.footer__main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 270px;
  grid-template-areas: "cols connect" "cols social";
  grid-template-rows: auto 1fr;
  column-gap: 40px;
}
.footer__cols { grid-area: cols; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 24px; }
.footer__col summary { list-style: none; cursor: default; }
.footer__col summary::-webkit-details-marker { display: none; }
.footer__col h2, .footer__heading { font: 700 16px/28px var(--sans); letter-spacing: 0; text-transform: uppercase; margin: 0 0 16px; }
.footer__col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.footer__col a { font: 400 14px/22px var(--sans); transition: opacity .2s; }
.footer__col a:hover, .footer__col a:focus-visible, .footer__bar a:hover { opacity: .7; }
.footer__connect { grid-area: connect; }
.footer__join { font: 400 16px/24px var(--sans); margin-bottom: 20px; }
.footer__form { display: flex; align-items: center; height: 48px; padding: 0 8px 0 18px; background: #fff; border-radius: 999px; }
.footer__form input { flex: 1; min-width: 0; border: 0; background: none; font: 400 15px var(--sans); color: var(--ink); outline: none; }
.footer__form input::placeholder { color: oklch(55% 0.01 40); }
.footer__form:focus-within { box-shadow: 0 0 0 2px var(--brand-green); }
.footer__form button { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; color: var(--ink); transition: background-color .2s; }
.footer__form button:hover { background: oklch(94% 0.01 40); }
.footer__form button[disabled] { opacity: .5; cursor: progress; }
.footer__error { font: 500 13px var(--sans); color: #ffb4a8; margin-top: 10px; }
.footer__error:empty { display: none; }
.footer__social { grid-area: social; list-style: none; margin: 20px 0 0; padding: 0; display: flex; gap: 16px; align-self: start; }
.footer__social a { display: block; transition: opacity .2s; }
.footer__social a:hover, .footer__social a:focus-visible { opacity: .7; }
.footer__social svg { display: block; width: 24px; height: 24px; fill: currentColor; }

.footer__lower {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 526px) minmax(0, 1fr);
  gap: 40px;
  margin-top: 56px;
  padding-top: 56px;
  border-top: 1px solid rgba(255,255,255,0.3);
}
.footer__logo { align-self: end; justify-self: start; }
.footer__logo img { display: block; width: 100%; max-width: 360px; height: auto; } /* big wordmark; aspect kept */
.footer__legal { font: 400 12px/18px var(--sans); }
.footer__legal p + p { margin-top: 16px; }
.footer__fda { border: 1px solid #fff; padding: 12px; }
.footer__locale { justify-self: end; font: 400 14px var(--sans); }
.footer__locale span { margin: 0 8px; opacity: .6; }
.footer__bar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 526px) minmax(0, 1fr);
  gap: 40px;
  margin-top: 40px;
  font: 400 14px var(--sans);
}
.footer__bar ul { grid-column: 2; list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 24px; }
.footer__bar a { transition: opacity .2s; }
.footer__bar p { grid-column: 3; justify-self: end; }

@media (max-width: 1100px) and (min-width: 821px) {
  .footer__cols { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 40px; }
}

@media (max-width: 820px) {
  .site-footer { padding: 40px 20px 32px; }
  .footer__main { grid-template-columns: 1fr; grid-template-areas: "connect" "cols" "social"; grid-template-rows: auto; }
  .footer__heading, .footer__join { display: none; }
  .footer__cols { display: block; margin-top: 56px; border-top: 1px solid rgba(255,255,255,0.3); }
  .footer__col { border-bottom: 1px solid rgba(255,255,255,0.3); }
  .footer__col summary { display: flex; justify-content: space-between; align-items: center; padding: 24px 0; cursor: pointer; }
  .footer__col summary::after { content: '+'; font: 300 28px/1 var(--sans); transition: transform .2s; }
  .footer__col[open] summary::after { transform: rotate(45deg); }
  .footer__col h2 { font-size: 19px; margin: 0; }
  .footer__col ul { gap: 14px; padding: 0 0 24px; }
  .footer__col a { font-size: 15px; }
  .footer__social { justify-content: center; gap: 20px; margin-top: 48px; }
  .footer__lower { grid-template-columns: 1fr; gap: 40px; margin-top: 64px; padding-top: 0; border-top: 0; text-align: center; }
  .footer__logo { justify-self: center; }
  .footer__logo img { width: min(300px, 80vw); }
  .footer__locale { justify-self: center; }
  .footer__bar { display: flex; flex-direction: column; align-items: center; gap: 24px; font-size: 13px; }
  .footer__bar ul { justify-content: center; gap: 12px 24px; }
}
@media (prefers-reduced-motion: reduce) {
  .footer__col summary::after { transition: none; }
}

/* ── Thank-you / qualification page ──────────────── */
.ty-hero { padding: 64px 40px 48px; text-align: center; border-bottom: 1px solid var(--rule); }
.ty-hero h1 { font: 400 40px/1.18 var(--serif); color: var(--ink); margin-bottom: 16px; }
.ty-hero p { font: 400 16px/1.7 var(--sans); color: var(--body); max-width: 520px; margin: 0 auto; }
.ty-body { padding: 52px 40px 64px; display: flex; justify-content: center; background: var(--paper); }
.ty-form { width: 100%; max-width: 600px; display: flex; flex-direction: column; gap: 38px; }
.ty-form fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.ty-form legend, .ty-form label.q { display: block; padding: 0; font: 600 15px var(--sans); color: var(--ink); margin-bottom: 14px; }
.ty-form .hint { font: 13px var(--sans); color: var(--faint); margin: -8px 0 14px; }
.ty-form .rule-top { border-top: 1px solid var(--rule); padding-top: 30px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { position: relative; }
.chip input { position: absolute; opacity: 0; pointer-events: none; }
.chip span {
  display: inline-block;
  border: 1px solid var(--field-rule);
  background: #fff;
  padding: 10px 16px;
  font: 13px var(--sans);
  color: oklch(30% 0.015 40);
  cursor: pointer;
  transition: border-color .15s, background-color .15s, color .15s;
}
.chips--wide .chip span { padding: 10px 24px; }
.chip--muted span { color: var(--faint); }
.chip span:hover { border-color: var(--ink); }
.chip input:checked + span { background: var(--ink); border-color: var(--ink); color: #fff; }
.chip input:focus-visible + span { outline: 2px solid var(--blue); outline-offset: 2px; }
.ty-form textarea {
  width: 100%;
  min-height: 64px;
  resize: vertical;
  background: #fff;
  border: 1px solid var(--field-rule);
  padding: 14px 16px;
  font: 13px/1.6 var(--sans);
  color: var(--ink);
}
.ty-form textarea::placeholder { color: oklch(60% 0.01 40); }
.ty-form textarea:focus { outline: none; border-color: var(--ink); }
.ty-actions { display: flex; align-items: center; gap: 20px; margin-top: 6px; }
.ty-actions .btn--primary { border-radius: 0; padding: 14px 30px; font-weight: 600; }
.ty-actions a { font: 13px var(--sans); color: var(--faint); }
.ty-actions a:hover { color: var(--ink); }
[hidden] { display: none !important; }
.ty-error { color: #a12626; font: 14px/1.5 var(--sans); margin: 0; }
.ty-error:empty { display: none; }
.ty-done { text-align: center; padding: 24px 0; border-top: 1px solid var(--rule); }
.ty-done h2 { font: 400 30px/1.2 var(--serif); color: var(--ink); margin-bottom: 12px; }
.ty-done p { font: 400 15px/1.7 var(--sans); color: var(--body); margin-bottom: 24px; }
.mini-footer {
  background: #000;
  padding: 28px 40px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font: 12px var(--sans);
  color: rgba(255,255,255,0.5);
}
.mini-footer a:hover { color: #fff; }

/* HTML sitemap page (sitemap/) — link groups on paper, same breadcrumbs/hero as help-shape */
.sitemap {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px;
  padding: 56px var(--gutter) 72px; background: var(--paper);
}
.sitemap h2 {
  font: 600 11px var(--sans); letter-spacing: 0.1em; text-transform: uppercase; color: var(--faint);
  padding-bottom: 14px; margin-bottom: 6px; border-bottom: 1px solid var(--rule);
}
.sitemap h2 a { color: inherit; }
.sitemap ul { list-style: none; margin: 0; padding: 0; }
.sitemap li a {
  display: block; padding: 10px 0; font: 400 15px var(--sans); color: var(--ink);
  border-bottom: 1px solid var(--rule); transition: color .2s;
}
.sitemap a:hover, .sitemap a:focus-visible { color: var(--blue); }
@media (max-width: 820px) {
  .sitemap { grid-template-columns: 1fr; gap: 32px; padding: 34px 20px 48px; }
  .sitemap li a { font-size: 14px; }
}

/* Help Shape Nuravita page: breadcrumbs + rounded questionnaire (thank-you page keeps squares) */
.breadcrumbs { padding: 18px var(--gutter) 0; font: 400 12px var(--sans); color: oklch(62% 0.01 40); }
.breadcrumbs ol { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; }
.breadcrumbs li + li::before { content: "/"; margin-right: 8px; color: oklch(78% 0.01 40); }
.breadcrumbs a { color: inherit; transition: color .2s; }
.breadcrumbs a:hover, .breadcrumbs a:focus-visible { color: var(--blue); }
.breadcrumbs [aria-current] { color: oklch(52% 0.01 40); }
.ty-hero--flush { padding-top: 40px; }
.ty-form--round .chip span { border-radius: 999px; padding: 10px 18px; }
.ty-form--round .chips--wide .chip span { padding: 10px 26px; }
.ty-form--round .chip span:hover { border-color: var(--blue); color: var(--blue); }
.ty-form--round .chip input:checked + span { background: var(--blue); border-color: var(--blue); color: #fff; }
.ty-form--round textarea, .ty-form--round .ty-input { border-radius: 16px; }
.ty-form--round textarea:focus, .ty-form--round .ty-input:focus { border-color: var(--blue); }
.ty-form--round .ty-actions .btn--primary { border-radius: 999px; padding: 15px 32px; }
.ty-input {
  width: 100%;
  background: #fff;
  border: 1px solid var(--field-rule);
  padding: 13px 16px;
  font: 13px var(--sans);
  color: var(--ink);
}
.ty-input::placeholder { color: oklch(60% 0.01 40); }
.ty-input:focus { outline: none; border-color: var(--ink); }
.q__optional { font-weight: 400; color: var(--faint); }

@media (max-width: 820px) {
  .ty-hero { padding: 44px 20px 34px; }
  .ty-hero h1 { font-size: 28px; }
  .ty-hero p { font-size: 14px; }
  .ty-body { padding: 34px 20px 44px; }
  .ty-form { gap: 30px; }
  .mini-footer { padding: 24px 20px; }
  .breadcrumbs { padding-top: 14px; font-size: 11px; }
  .ty-hero--flush { padding-top: 28px; }
  .ty-form--round .ty-actions .btn--primary { flex: 1; padding: 15px; }
}

/* ── Journal: blogs/ hub + article pages ─────────── */
/* Hub (blogs/): editorial hero, then a feature card + two cards. No images yet. */
.blog-hero { padding: 40px var(--gutter) 56px; border-bottom: 1px solid var(--rule); }
.blog-hero h1 { font: 400 clamp(36px, 3.6vw, 56px)/1.12 var(--serif); color: var(--ink); max-width: 880px; margin-bottom: 20px; text-wrap: pretty; }
.blog-hero p { font: 400 17px/1.7 var(--sans); color: var(--body); max-width: 640px; }
.blog-index { padding: 56px var(--gutter) var(--pad-1); }
.blog-index__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 48px; }
.blog-card a { display: flex; flex-direction: column; height: 100%; padding: 32px 0; border-bottom: 1px solid var(--rule); }
.blog-card h2 { font: 400 26px/1.22 var(--serif); color: var(--ink); margin-bottom: 12px; text-wrap: pretty; transition: color .2s; }
.blog-card p { font: 400 15px/1.65 var(--sans); color: var(--muted); max-width: 560px; margin-bottom: 20px; }
.blog-card__more { margin-top: auto; font: 600 13px var(--sans); color: var(--ink); transition: color .2s; }
.blog-card a:hover h2, .blog-card a:focus-visible h2, .blog-card a:hover .blog-card__more { color: var(--blue); }
.blog-card--feature { grid-column: 1 / -1; }
.blog-card--feature a { background: var(--paper); border: 1px solid var(--rule); padding: 56px; margin-bottom: 16px; }
.blog-card--feature h2 { font-size: clamp(32px, 2.8vw, 44px); line-height: 1.15; max-width: 760px; margin-bottom: 16px; }
.blog-card--feature p { font-size: 17px; max-width: 620px; margin-bottom: 28px; }
.blog-card__date { color: oklch(60% 0.01 40); font-weight: 500; }

/* Article (blogs/<slug>/): head spans the container, then a sticky contents list + reading column */
.article { max-width: 1000px; margin: 0 auto; padding: 0 var(--gutter); box-sizing: content-box; }
.article__head { padding: 40px 0 44px; border-bottom: 1px solid var(--rule); }
.article__head h1 { font: 400 clamp(36px, 3.6vw, 54px)/1.12 var(--serif); color: var(--ink); max-width: 860px; margin-bottom: 20px; text-wrap: pretty; }
.article__dek { font: 400 19px/1.6 var(--sans); color: var(--body); max-width: 680px; margin-bottom: 28px; }
.article__byline { font: 400 13px/1.6 var(--sans); color: var(--faint); }
.article__byline strong { font-weight: 600; color: var(--ink); }
.article__layout { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 72px; padding: 56px 0 var(--pad-1); }
.article__toc { position: sticky; top: 96px; align-self: start; }
.article__toc .eyebrow { margin-bottom: 14px; }
.article__toc ol { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.article__toc a { display: block; padding: 10px 0; border-bottom: 1px solid var(--rule); font: 400 13px/1.45 var(--sans); color: var(--muted); transition: color .2s; }
.article__toc a:hover, .article__toc a:focus-visible { color: var(--blue); }

.article__body { max-width: 680px; font: 400 17px/1.75 var(--sans); color: var(--body); }
.article__body > * + * { margin-top: 1.15em; }
.article__body h2 { font: 400 30px/1.22 var(--serif); color: var(--ink); margin-top: 56px; text-wrap: pretty; scroll-margin-top: 90px; }
.article__body h3 { font: 600 18px/1.4 var(--sans); color: var(--ink); margin-top: 34px; }
.article__body h2 + *, .article__body h3 + * { margin-top: 14px; }
.article__body strong { font-weight: 600; color: var(--ink); }
.article__body ul, .article__body ol { padding-left: 1.2em; }
.article__body li + li { margin-top: .5em; }
.article__body li::marker { color: var(--blue); }
.article__body a { color: var(--blue); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.article__body a:hover { color: var(--blue-hover); }

/* "Key takeaways" — answer-first summary at the top of every article */
.article__summary { background: var(--paper); border: 1px solid var(--rule); border-left: 2px solid var(--blue); padding: 28px 32px; }
.article__body .article__summary h2 { font: 600 11px var(--sans); letter-spacing: 0.16em; text-transform: uppercase; color: var(--blue); margin: 0 0 14px; }
.article__summary ul { margin: 0; font-size: 16px; line-height: 1.65; color: var(--ink); }

.article__table { overflow-x: auto; border: 1px solid var(--rule); }
.article__table table { width: 100%; border-collapse: collapse; font: 400 14px/1.55 var(--sans); }
.article__table caption { caption-side: bottom; text-align: left; padding: 12px 16px; font: italic 400 12px/1.6 var(--sans); color: var(--faint); border-top: 1px solid var(--rule); }
.article__table th, .article__table td { text-align: left; vertical-align: top; padding: 14px 16px; border-bottom: 1px solid var(--rule); }
.article__table thead th { font: 600 11px var(--sans); letter-spacing: 0.1em; text-transform: uppercase; color: var(--faint); background: var(--paper); }
.article__table tbody th { font-weight: 600; color: var(--ink); }
.article__table tbody tr:last-child > * { border-bottom: 0; }

.article__faq details { border-top: 1px solid var(--rule); interpolate-size: allow-keywords; }
.article__faq details:last-of-type { border-bottom: 1px solid var(--rule); }
.article__faq summary { display: flex; justify-content: space-between; gap: 24px; align-items: center; padding: 20px 0; font: 500 16px/1.45 var(--sans); color: var(--ink); cursor: pointer; list-style: none; }
.article__faq summary::-webkit-details-marker { display: none; }
.article__faq summary::after { content: '+'; font: 400 22px var(--sans); color: var(--faint); transition: transform .2s; }
.article__faq details[open] summary::after { transform: rotate(45deg); }
.article__faq details::details-content { block-size: 0; overflow: hidden; transition: block-size .3s ease, content-visibility .3s allow-discrete; }
.article__faq details[open]::details-content { block-size: auto; }
.article__faq details p { font-size: 16px; padding: 0 40px 22px 0; }

.article__about { padding: 24px 0 0; border-top: 1px solid var(--rule); font-size: 14px; line-height: 1.7; color: var(--muted); }
.article__about strong { color: var(--ink); }
.article__sources { font-size: 13px; line-height: 1.65; color: var(--muted); }
.article__body .article__sources h2 { font: 600 11px var(--sans); letter-spacing: 0.16em; text-transform: uppercase; color: var(--faint); margin: 56px 0 14px; }
.article__sources ol { margin: 0; }
.article__disclaimer { font: italic 400 13px/1.7 var(--sans); color: var(--faint); }

/* "Keep reading" under an article reuses the home .journal card styles */
.related__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 48px; }
.related__grid .journal__item { border-bottom: 1px solid var(--rule); }
.related .section__head { margin-bottom: 28px; }
.signup .btn--primary { padding: 15px 30px; font-weight: 600; }

@media (prefers-reduced-motion: reduce) {
  .article__faq details::details-content, .article__faq summary::after { transition: none; }
}

@media (max-width: 820px) {
  .blog-hero { padding: 28px 20px 34px; }
  .blog-hero h1 { font-size: 30px; margin-bottom: 14px; }
  .blog-hero p { font-size: 14px; }
  .blog-index { padding: 24px 20px var(--pad-2); }
  .blog-index__list { grid-template-columns: 1fr; }
  .blog-card a { padding: 22px 0; }
  .blog-card h2 { font-size: 20px; line-height: 1.28; margin-bottom: 8px; }
  .blog-card p { font-size: 13px; margin-bottom: 14px; }
  .blog-card--feature a { padding: 26px 22px; margin-bottom: 4px; }
  .blog-card--feature h2 { font-size: 25px; margin-bottom: 10px; }
  .blog-card--feature p { font-size: 14px; margin-bottom: 18px; }

  .article { padding: 0 20px; }
  .article__head { padding: 28px 0 30px; }
  .article__head h1 { font-size: 30px; margin-bottom: 14px; }
  .article__dek { font-size: 15px; margin-bottom: 18px; }
  .article__byline { font-size: 12px; }
  .article__layout { grid-template-columns: minmax(0, 1fr); gap: 32px; padding: 28px 0 var(--pad-2); }
  .article__toc { position: static; }
  .article__body { font-size: 15px; line-height: 1.72; }
  .article__body h2 { font-size: 23px; margin-top: 44px; }
  .article__body h3 { font-size: 16px; margin-top: 26px; }
  .article__summary { padding: 20px; }
  .article__summary ul { font-size: 14px; }
  .article__table table { font-size: 13px; }
  .article__table th, .article__table td { padding: 12px; }
  .article__faq summary { font-size: 14px; padding: 16px 0; }
  .article__faq details p { font-size: 14px; padding-right: 0; }
  .related__grid { grid-template-columns: 1fr; }
  .related__grid .journal__item + .journal__item { border-top: 0; }
}