/* ============================================================
   RETASLIM — "The Panel"
   Structural metaphor: the Supplement Facts panel. Heavy top
   rules, hairline inner rules, small-caps headers, values
   right-aligned against their labels. Everything on the page
   inherits that grammar.
   ============================================================ */

/* ---------- Tokens ---------- */
:root {
  /* Colour — pulled from the product itself: bottle glass, brass cap, label stock */
  --ink:        #060d0a;   /* page ground — near-black, green cast */
  --glass:      #0e1f17;   /* bottle glass — panels */
  --glass-lit:  #16301f;   /* raised / hover */
  --rule:       #24402f;   /* hairlines */
  --brass:      #c2913f;   /* the cap — primary accent */
  --brass-lit:  #e3c888;   /* brass highlight */
  --chalk:      #f2ede1;   /* label stock — primary text */
  --sage:       #9fae97;   /* secondary text */
  --sage-dim:   #6f7f6d;   /* tertiary text */
  --saffron:    #d9762b;   /* the one hot note — annotation + focus only */

  /* Type */
  --display: 'Fraunces', 'Iowan Old Style', Georgia, serif;
  --body:    'Instrument Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --data:    'Martian Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Rhythm */
  --gutter:  clamp(1.25rem, 4vw, 3rem);
  --measure: 74rem;
  --section: clamp(4.5rem, 10vw, 9rem);

  --ease: cubic-bezier(.22, .61, .36, 1);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 5rem; }

body {
  background: var(--ink);
  color: var(--chalk);
  font-family: var(--body);
  font-size: clamp(1rem, .96rem + .2vw, 1.0625rem);
  line-height: 1.65;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, picture, svg { display: block; max-width: 100%; }
button, input, textarea, select { font: inherit; color: inherit; }
a { color: inherit; }

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

::selection { background: var(--brass); color: var(--ink); }

/* ---------- Type primitives ---------- */
.display {
  font-family: var(--display);
  font-variation-settings: 'opsz' 144;
  font-weight: 300;
  line-height: .96;
  letter-spacing: -.02em;
  text-wrap: balance;
}

.eyebrow {
  font-family: var(--data);
  font-size: .625rem;
  font-weight: 500;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--sage);
}

.data { font-family: var(--data); font-variant-numeric: tabular-nums; }

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.lede {
  font-size: clamp(1.0625rem, 1rem + .45vw, 1.3125rem);
  line-height: 1.55;
  color: var(--sage);
  text-wrap: pretty;
}

/* ---------- Layout ---------- */
.wrap {
  width: 100%;
  max-width: var(--measure);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--brass);
  color: var(--ink);
  padding: .75rem 1.25rem;
  font-family: var(--data);
  font-size: .75rem;
}
.skip:focus { left: 0; }

/* ============================================================
   Header
   ============================================================ */
.masthead {
  position: fixed;
  inset: 0 0 auto;
  z-index: 100;
  background: color-mix(in srgb, var(--ink) 82%, transparent);
  backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid transparent;
  transition: border-color .4s var(--ease), background .4s var(--ease);
}
.masthead[data-scrolled='true'] { border-bottom-color: var(--rule); }

.masthead__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  max-width: var(--measure);
  margin-inline: auto;
  padding: 1rem var(--gutter);
}

.wordmark {
  font-family: var(--display);
  font-variation-settings: 'opsz' 144;
  font-weight: 400;
  font-size: 1.375rem;
  letter-spacing: .14em;
  text-decoration: none;
  white-space: nowrap;
}
.wordmark span { color: var(--brass); }

.nav { display: none; }
@media (min-width: 62rem) { .nav { display: flex; gap: 2.25rem; list-style: none; padding: 0; } }

.nav a {
  font-family: var(--data);
  font-size: .625rem;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--sage);
  text-decoration: none;
  padding-bottom: .35rem;
  border-bottom: 1px solid transparent;
  transition: color .25s var(--ease), border-color .25s var(--ease);
}
.nav a:hover { color: var(--chalk); border-bottom-color: var(--brass); }

.masthead__end { display: flex; align-items: center; gap: 1rem; }

/* Language switch — real links between two real pages */
.lang { display: flex; align-items: center; gap: .5rem; font-family: var(--data); font-size: .625rem; letter-spacing: .18em; text-transform: uppercase; }
.lang a { color: var(--sage-dim); text-decoration: none; transition: color .25s var(--ease); }
.lang a:hover { color: var(--chalk); }
.lang [aria-current='true'] { color: var(--brass); }
.lang__sep { color: var(--rule); }

/* Mobile menu */
.burger {
  display: grid;
  place-items: center;
  width: 2.5rem; height: 2.5rem;
  background: none;
  border: 1px solid var(--rule);
  border-radius: 999px;
  cursor: pointer;
}
@media (min-width: 62rem) { .burger { display: none; } }
.burger rect { fill: var(--chalk); transition: transform .3s var(--ease), opacity .2s var(--ease); transform-origin: center; }
.burger[aria-expanded='true'] rect:nth-child(1) { transform: translateY(4.5px) rotate(45deg); }
.burger[aria-expanded='true'] rect:nth-child(2) { opacity: 0; }
.burger[aria-expanded='true'] rect:nth-child(3) { transform: translateY(-4.5px) rotate(-45deg); }

.drawer {
  position: fixed;
  inset: 4.25rem 0 auto;
  z-index: 99;
  background: var(--ink);
  border-bottom: 1px solid var(--rule);
  padding: 1rem var(--gutter) 2rem;
  display: grid;
  gap: .25rem;
  transform: translateY(-8px);
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s var(--ease), transform .3s var(--ease), visibility .3s;
}
.drawer[data-open='true'] { opacity: 1; transform: none; visibility: visible; }
@media (min-width: 62rem) { .drawer { display: none; } }

.drawer a {
  font-family: var(--display);
  font-variation-settings: 'opsz' 60;
  font-size: 1.5rem;
  font-weight: 300;
  text-decoration: none;
  padding: .6rem 0;
  border-bottom: 1px solid var(--rule);
}
.drawer a:last-child { border-bottom: 0; }

/* ============================================================
   Hero
   ============================================================ */
.hero {
  position: relative;
  min-height: min(94svh, 54rem);
  display: flex;
  align-items: flex-end;
  padding-top: 8rem;
  overflow: hidden;
  isolation: isolate;
}

.hero__media { position: absolute; inset: 0; z-index: -2; }
.hero__media picture { display: block; width: 100%; height: 100%; }  /* height:100% needs a sized parent */
.hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }

/* Mobile: full bleed behind the copy, darkened from the bottom up. */
.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to top,
    var(--ink) 16%,
    color-mix(in srgb, var(--ink) 92%, transparent) 46%,
    color-mix(in srgb, var(--ink) 74%, transparent) 72%,
    color-mix(in srgb, var(--ink) 40%, transparent) 100%);
}

/* Desktop: the plate occupies the right of the frame and feathers into the
   page, so the bottle never sits under the headline. Cropping the panel
   narrower than the frame is also what makes object-position's X axis bite —
   at full bleed this image overflows vertically, and X would do nothing. */
@media (min-width: 62rem) {
  .hero__media {
    left: 36%;
    -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 26%);
            mask-image: linear-gradient(to right, transparent 0%, #000 26%);
  }
  .hero__media img { object-position: 42% 44%; }

  .hero::after {
    background:
      linear-gradient(to top, var(--ink) 3%, color-mix(in srgb, var(--ink) 55%, transparent) 34%, transparent 72%),
      linear-gradient(to right, var(--ink) 30%, color-mix(in srgb, var(--ink) 55%, transparent) 46%, transparent 66%);
  }
}

.hero__inner { width: 100%; padding-bottom: clamp(2.5rem, 6vw, 5rem); }
.hero__col { max-width: 34rem; }

.hero__eyebrow { display: flex; align-items: flex-start; gap: .6rem; margin-bottom: 1.75rem; }
.hero__eyebrow::before {
  content: '';
  width: 5px; height: 5px;
  margin-top: .55em;                     /* sits on the first line, not centred across a wrap */
  border-radius: 999px;
  background: var(--saffron);
  box-shadow: 0 0 12px var(--saffron);
  flex: none;
}
@media (max-width: 30rem) { .hero__eyebrow { letter-spacing: .2em; } }

.hero h1 {
  font-size: clamp(3rem, 1.3rem + 7vw, 6.75rem);
  margin-bottom: 1.5rem;
}
.hero h1 em {
  font-style: normal;
  font-variation-settings: 'opsz' 144;
  font-weight: 500;
  color: var(--brass);
}

.hero .lede { max-width: 30rem; margin-bottom: 2.25rem; }

.hero__cta { display: flex; flex-wrap: wrap; gap: .75rem; }

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  font-family: var(--data);
  font-size: .6875rem;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  text-decoration: none;
  padding: .95rem 1.6rem;
  border-radius: 999px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform .25s var(--ease), background .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease);
}
.btn:hover { transform: translateY(-2px); }
.btn--solid { background: var(--brass); color: var(--ink); }
.btn--solid:hover { background: var(--brass-lit); }
.btn--ghost { border-color: var(--rule); color: var(--chalk); }
.btn--ghost:hover { border-color: var(--brass); color: var(--brass-lit); }
.btn[disabled] { opacity: .5; cursor: not-allowed; transform: none; }
.btn__arrow { transition: transform .25s var(--ease); }
.btn:hover .btn__arrow { transform: translateX(3px); }

/* ---------- Dose ticker: the actual formula, running as a strip ---------- */
.ticker {
  border-block: 1px solid var(--rule);
  background: color-mix(in srgb, var(--glass) 60%, transparent);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 6rem, #000 calc(100% - 6rem), transparent);
          mask-image: linear-gradient(to right, transparent, #000 6rem, #000 calc(100% - 6rem), transparent);
}
.ticker__rail { display: flex; width: max-content; animation: ticker 46s linear infinite; }
.ticker:hover .ticker__rail { animation-play-state: paused; }
.ticker__set { display: flex; flex: none; }
.ticker__item {
  display: flex;
  align-items: baseline;
  gap: .6rem;
  padding: .9rem 2rem;
  white-space: nowrap;
  font-family: var(--data);
  font-size: .625rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--sage-dim);
  border-right: 1px solid var(--rule);
}
.ticker__item b { color: var(--brass); font-weight: 500; }
@keyframes ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ============================================================
   Section grammar — the label panel
   ============================================================ */
.section { padding-block: var(--section); }
.section--tint { background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--glass) 55%, transparent) 22%, color-mix(in srgb, var(--glass) 55%, transparent) 78%, transparent); }

.section__head {
  display: grid;
  gap: 1.25rem;
  padding-top: 1.5rem;
  border-top: 3px solid var(--chalk);   /* the heavy rule off a Supplement Facts panel */
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}
@media (min-width: 54rem) {
  .section__head { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 3rem; align-items: end; }
}
.section__head h2 { font-size: clamp(2rem, 1.1rem + 3.2vw, 3.5rem); }
.section__index { display: flex; align-items: baseline; gap: .9rem; margin-bottom: .9rem; }
.section__index .data { color: var(--brass); font-size: .6875rem; letter-spacing: .14em; }

/* ---------- Benefit rows ---------- */
.rows { border-top: 1px solid var(--rule); }
.row {
  display: grid;
  gap: .35rem 2rem;
  padding: clamp(1.5rem, 3vw, 2.25rem) 0;
  border-bottom: 1px solid var(--rule);
  transition: background .3s var(--ease);
}
@media (min-width: 54rem) {
  .row { grid-template-columns: 3rem minmax(0, 1.1fr) minmax(0, 1.4fr); align-items: start; }
  .row:hover { background: color-mix(in srgb, var(--glass) 45%, transparent); }
}
.row__mark { font-family: var(--data); font-size: .625rem; letter-spacing: .1em; color: var(--brass); padding-top: .5rem; }
.row h3 {
  font-family: var(--display);
  font-variation-settings: 'opsz' 60;
  font-weight: 400;
  font-size: clamp(1.25rem, 1.05rem + .7vw, 1.625rem);
  line-height: 1.2;
  letter-spacing: -.01em;
}
.row p { color: var(--sage); text-wrap: pretty; }

/* ============================================================
   SIGNATURE — the dose scale
   Bar length is proportional to the real milligram weight, so
   the panel is legible as a picture, not just a table.
   ============================================================ */
.scale { border-top: 1px solid var(--rule); }

.dose {
  display: grid;
  gap: .5rem 2rem;
  padding: clamp(1.5rem, 3vw, 2rem) 0;
  border-bottom: 1px solid var(--rule);
  grid-template-areas: 'name value' 'bar bar';
  grid-template-columns: minmax(0, 1fr) auto;
}
@media (min-width: 54rem) {
  .dose {
    grid-template-areas: 'name bar value';
    grid-template-columns: minmax(11rem, 15rem) minmax(0, 1fr) 7rem;
    align-items: center;
    gap: 2rem;
  }
}

.dose__name { grid-area: name; }
.dose__name h3 {
  font-family: var(--display);
  font-variation-settings: 'opsz' 48;
  font-weight: 400;
  font-size: 1.125rem;
  line-height: 1.25;
}
.dose__name p { font-size: .8125rem; color: var(--sage-dim); line-height: 1.45; }

.dose__value {
  grid-area: value;
  font-family: var(--data);
  font-variant-numeric: tabular-nums;
  font-size: .875rem;
  color: var(--chalk);
  text-align: right;
  white-space: nowrap;
}

/* the measure itself */
.dose__bar { grid-area: bar; position: relative; height: 8px; }
.dose__track { position: absolute; inset: 50% 0 auto; height: 1px; transform: translateY(-50%); background: var(--rule); }
.dose__fill {
  position: absolute;
  inset: 0 auto 0 0;
  min-width: 3px;
  border-radius: 0 4px 4px 0;            /* rounded data-end, anchored to the baseline */
  background: linear-gradient(90deg, color-mix(in srgb, var(--brass) 55%, transparent), var(--brass));
  transform-origin: left center;
  transition: transform 1.1s var(--ease);
  transition-delay: var(--delay, 0ms);
}
@media (scripting: enabled) {
  .dose__fill { transform: scaleX(0); }          /* drawn on scroll; full width without JS */
  .is-in .dose__fill { transform: scaleX(1); }
}

/* Bar length is the real dose, keyed off the printed value so the markup and
   the drawing can never disagree. 300 mg is the full width of the rule. */
.dose__fill[data-mg='300']   { width: 100%;    --delay:  60ms; }
.dose__fill[data-mg='150']   { width: 50%;     --delay: 150ms; }
.dose__fill[data-mg='100']   { width: 33.33%;  --delay: 240ms; }
.dose__fill[data-mg='47.8']  { width: 15.93%;  --delay: 330ms; }
.dose__fill[data-mg='0.25']  { width: 0.083%;  --delay: 420ms; }

/* the editorial moment: chromium is 0.25 mg — a tick on the same rule */
.dose--trace .dose__fill { background: var(--saffron); box-shadow: 0 0 10px color-mix(in srgb, var(--saffron) 70%, transparent); }
.dose--trace .dose__value { color: var(--saffron); }

.scale__note {
  display: grid;
  gap: .5rem;
  padding: 1.5rem 0 0;
  font-size: .875rem;
  color: var(--sage);
  max-width: 44rem;
}
.scale__note b { color: var(--saffron); font-weight: 500; }

/* ============================================================
   Facts — the panel, rendered faithfully, beside the botanicals
   ============================================================ */
.facts { display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: start; }
@media (min-width: 62rem) { .facts { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }

.panel {
  background: var(--chalk);
  color: var(--ink);
  padding: clamp(1.25rem, 3vw, 1.75rem);
  border-radius: 2px;
  font-family: var(--body);
}
.panel h3 {
  font-family: var(--display);
  font-variation-settings: 'opsz' 72;
  font-weight: 600;
  font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
  line-height: 1;
  border-bottom: 8px solid var(--ink);
  padding-bottom: .35rem;
}
.panel__meta { display: flex; justify-content: space-between; gap: 1rem; font-size: .8125rem; padding: .4rem 0; border-bottom: 1px solid var(--ink); }
.panel__rule { border-bottom: 6px solid var(--ink); }
.panel table { width: 100%; border-collapse: collapse; font-size: .875rem; }
.panel caption { text-align: left; font-size: .6875rem; letter-spacing: .1em; text-transform: uppercase; padding: .4rem 0; font-weight: 600; }
.panel th, .panel td { text-align: left; padding: .45rem 0; border-bottom: 1px solid color-mix(in srgb, var(--ink) 28%, transparent); font-weight: 400; }
.panel td:last-child, .panel th:last-child { text-align: right; font-family: var(--data); font-variant-numeric: tabular-nums; font-size: .8125rem; white-space: nowrap; }
.panel tr:last-child th, .panel tr:last-child td { border-bottom: 0; }
.panel__foot { font-size: .75rem; line-height: 1.5; padding-top: .6rem; border-top: 4px solid var(--ink); }
.panel__foot p + p { margin-top: .4rem; }

.facts__aside { display: grid; gap: 1.5rem; }
.figure { position: relative; border: 1px solid var(--rule); border-radius: 2px; overflow: hidden; background: var(--glass); }
.figure img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 3; }
.figure figcaption {
  display: flex; justify-content: space-between; gap: 1rem;
  padding: .75rem 1rem;
  border-top: 1px solid var(--rule);
  font-family: var(--data);
  font-size: .5625rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--sage-dim);
}

.marks { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; padding: 0; }
.marks li {
  font-family: var(--data);
  font-size: .5625rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--sage);
  border: 1px solid var(--rule);
  border-radius: 999px;
  padding: .5rem .9rem;
}

/* ============================================================
   Ritual
   ============================================================ */
.ritual { display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
@media (min-width: 62rem) { .ritual { grid-template-columns: minmax(0, 1fr) minmax(0, .95fr); } }

.steps { border-top: 1px solid var(--rule); }
.step {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: .25rem 1.5rem;
  padding: 1.5rem 0;
  border-bottom: 1px solid var(--rule);
}
.step__key {
  grid-row: 1 / 3;
  font-family: var(--data);
  font-size: .625rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--brass);
  padding-top: .45rem;
  min-width: 4.5rem;
}
.step h3 {
  font-family: var(--display);
  font-variation-settings: 'opsz' 60;
  font-weight: 400;
  font-size: clamp(1.25rem, 1.1rem + .6vw, 1.5rem);
  line-height: 1.2;
}
.step p { color: var(--sage); font-size: .9375rem; }

.ritual .figure img { aspect-ratio: 3 / 4; }
@media (max-width: 61.99rem) { .ritual .figure img { aspect-ratio: 4 / 3; } }

/* ============================================================
   Contact
   ============================================================ */
.contact { display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: start; }
@media (min-width: 62rem) { .contact { grid-template-columns: minmax(0, .85fr) minmax(0, 1fr); } }

.contact__aside p { color: var(--sage); margin-bottom: 1.75rem; max-width: 30rem; }
.contact__direct { display: grid; gap: .35rem; padding-top: 1.25rem; border-top: 1px solid var(--rule); }
.contact__direct a {
  font-family: var(--display);
  font-variation-settings: 'opsz' 60;
  font-size: clamp(1.125rem, 1rem + .8vw, 1.5rem);
  font-weight: 400;
  color: var(--brass);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  justify-self: start;
  transition: border-color .25s var(--ease);
}
.contact__direct a:hover { border-bottom-color: var(--brass); }

.form { display: grid; gap: 1.25rem; }
.field { display: grid; gap: .5rem; }
.field > label { font-family: var(--data); font-size: .625rem; letter-spacing: .2em; text-transform: uppercase; color: var(--sage); }

.field input[type='text'],
.field input[type='email'],
.field textarea {
  width: 100%;
  background: var(--glass);
  border: 1px solid var(--rule);
  border-radius: 2px;
  padding: .9rem 1rem;
  color: var(--chalk);
  transition: border-color .25s var(--ease), background .25s var(--ease);
}
.field textarea { resize: vertical; min-height: 8rem; }
.field input::placeholder, .field textarea::placeholder { color: var(--sage-dim); }
.field input:focus, .field textarea:focus { border-color: var(--brass); background: var(--glass-lit); outline: none; }
.field input:focus-visible, .field textarea:focus-visible { outline: 2px solid var(--saffron); outline-offset: 1px; }

.consent { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .75rem; align-items: start; font-size: .8125rem; color: var(--sage); }
.consent input { width: 1.05rem; height: 1.05rem; margin-top: .2rem; accent-color: var(--brass); flex: none; }
.consent a { color: var(--brass); }

.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form__status { font-size: .875rem; min-height: 1.25rem; }
.form__status[data-state='error'] { color: var(--saffron); }

.sent {
  display: grid;
  gap: .85rem;
  justify-items: start;
  padding: clamp(1.75rem, 4vw, 2.5rem);
  border: 1px solid var(--brass);
  border-radius: 2px;
  background: color-mix(in srgb, var(--glass) 70%, transparent);
}
.sent h3 { font-family: var(--display); font-variation-settings: 'opsz' 72; font-weight: 400; font-size: 1.75rem; }
.sent p { color: var(--sage); }
.sent button {
  background: none; border: 0; padding: 0; cursor: pointer;
  font-family: var(--data); font-size: .625rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--sage); border-bottom: 1px solid var(--rule);
}
.sent button:hover { color: var(--brass); border-bottom-color: var(--brass); }
[hidden] { display: none !important; }

/* ============================================================
   Footer
   ============================================================ */
.footer { border-top: 1px solid var(--rule); padding-block: clamp(3rem, 6vw, 4.5rem) 2.5rem; }
.footer__top { display: grid; gap: 2.5rem; margin-bottom: 3rem; }
@media (min-width: 54rem) { .footer__top { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1fr); } }
.footer__brand .wordmark { font-size: 1.5rem; display: inline-block; margin-bottom: .75rem; }
.footer__brand p { font-family: var(--data); font-size: .625rem; letter-spacing: .18em; text-transform: uppercase; color: var(--sage-dim); }
.footer h4 { font-family: var(--data); font-size: .625rem; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; color: var(--sage); margin-bottom: 1rem; }
.footer ul { list-style: none; padding: 0; display: grid; gap: .6rem; }
.footer ul a { font-size: .9375rem; color: var(--sage); text-decoration: none; transition: color .25s var(--ease); }
.footer ul a:hover { color: var(--brass); }

.legal { display: grid; gap: 1.25rem; padding-top: 2rem; border-top: 1px solid var(--rule); font-size: .75rem; line-height: 1.6; color: var(--sage-dim); }
.legal strong { color: var(--sage); font-weight: 500; }
.legal__base { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; justify-content: space-between; font-family: var(--data); font-size: .625rem; letter-spacing: .14em; text-transform: uppercase; }

/* ============================================================
   Scroll reveal
   ============================================================ */
/* The starting (hidden) state is applied only where scripting can undo it.
   No inline script needed, so the CSP stays strict; and in a browser without
   `scripting` support the query simply never matches and the page renders
   fully, which is the safe direction to fail in. */
@media (scripting: enabled) {
  .reveal { opacity: 0; transform: translateY(14px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
  .reveal.is-in { opacity: 1; transform: none; }

  /* Hero load sequence */
  .hero__col > * { opacity: 0; transform: translateY(16px); animation: rise .9s var(--ease) forwards; }
}
.hero__col > :nth-child(1) { animation-delay: .15s; }
.hero__col > :nth-child(2) { animation-delay: .28s; }
.hero__col > :nth-child(3) { animation-delay: .44s; }
.hero__col > :nth-child(4) { animation-delay: .58s; }
@keyframes rise { to { opacity: 1; transform: none; } }

/* ============================================================
   Interior pages (privacy / thanks / 404)
   ============================================================ */
.page { padding-block: clamp(8rem, 16vw, 12rem) var(--section); }
.page__inner { max-width: 46rem; }
.page h1 { font-size: clamp(2.25rem, 1.4rem + 3vw, 3.75rem); margin-bottom: 1.5rem; }
.page h2 {
  font-family: var(--display);
  font-variation-settings: 'opsz' 60;
  font-weight: 400;
  font-size: 1.375rem;
  margin: 2.5rem 0 .75rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--rule);
}
.page p, .page li { color: var(--sage); }
.page p + p { margin-top: .85rem; }
.page ul { padding-left: 1.1rem; display: grid; gap: .45rem; margin-top: .85rem; }
.page a { color: var(--brass); }
.page__eyebrow { margin-bottom: 1.25rem; }
.page__action { margin-top: 2.5rem; }
.page__updated { margin-top: 2rem; }
.legal__base a { text-decoration: none; }

/* ============================================================
   Reduced motion
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .reveal { opacity: 1; transform: none; }
  .hero__col > * { opacity: 1; transform: none; }
  .dose__fill { transform: scaleX(1); }
  .ticker__rail { animation: none; }
  .btn:hover { transform: none; }
}