/* Hallmark · genre: playful · macrostructure: Narrative Workflow · theme: cáene brand-locked
 * nav: N7 brutal slab (border=2px, tracked-uppercase, cta=filled slab)
 * footer: Ft8 marquee scroll · hero: H1 marquee (size=xl, align=left-bias, underlay=rule-below)
 * features: F4 step sequence (numbering=1.0, layout=vertical, connector=line) + F3 tabular spec sheet
 * enrichment: none — typography only · theme_axes: light / grotesk-sans / warm (burgundy 551c25)
 * pre-emit critique: P5 H5 E4 S5 R4 V5
 */

@font-face {
  font-family: "Dahlia";
  src: url("assets/fonts/dahlia-bold.woff2") format("woff2");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

:root {
  --burgundy: #551C25;
  --brick: #9A3324;
  --cream: #F1F0E2;
  --butter: #F5E1A4;
  --blush: #F6E8E8;
  --paper: #FFFDF8;
  --ink: #27191B;
  --muted: #765E62;
  --error: #FFD0D0;

  --line: rgba(85, 28, 37, .18);
  --line-strong: rgba(39, 25, 27, .9);
  --cream-soft: rgba(241, 240, 226, .78);
  --cream-line: rgba(241, 240, 226, .28);

  --space-2xs: .25rem;
  --space-xs: .5rem;
  --space-sm: .75rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;
  --space-3xl: clamp(4rem, 9vw, 8rem);

  --text-display: clamp(3rem, 11vw, 7rem);
  --text-title: clamp(2rem, 5.5vw, 3.75rem);
  --text-figure: clamp(2.75rem, 8vw, 5rem);
  --text-lede: clamp(1.05rem, 2.2vw, 1.3rem);
  --text-sm: .82rem;

  --rule: 2px;
  --shell: 1180px;
  --ease-out: cubic-bezier(.22, .61, .36, 1);
  --dur: .5s;
}

* { box-sizing: border-box; }
html, body { overflow-x: clip; scroll-padding-top: 5rem; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: "Hanken Grotesk", system-ui, sans-serif;
  font-size: 1rem;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3 { margin-top: 0; font-weight: 800; letter-spacing: -.035em; line-height: 1; overflow-wrap: anywhere; }
p { margin-top: 0; color: var(--muted); }
.shell { width: min(100% - 2.5rem, var(--shell)); margin-inline: auto; }
.fine-print { max-width: 68ch; font-size: var(--text-sm); line-height: 1.6; color: var(--muted); }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 10;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  padding: 0 var(--space-md);
  background: var(--ink);
  color: var(--paper);
  font-weight: 700;
}
.skip-link:focus { left: 0; }

/* ── N7 · Brutal slab nav ───────────────────────────────────── */
.slab {
  position: sticky;
  top: 0;
  z-index: 8;
  display: flex;
  align-items: center;
  gap: var(--space-md);
  min-height: 64px;
  padding: var(--space-sm) max(1.25rem, calc((100vw - var(--shell)) / 2));
  border-bottom: var(--rule) solid var(--ink);
  background: var(--paper);
}
.slab__mark { min-height: 44px; display: inline-flex; align-items: center; }
.wordmark { width: 104px; }
.slab__label {
  color: var(--muted);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
}
.slab__nav { margin-left: auto; }
.slab__nav ul { display: flex; gap: var(--space-lg); margin: 0; padding: 0; list-style: none; }
.slab__nav a {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  border-bottom: var(--rule) solid transparent;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  transition: border-color .18s var(--ease-out), color .18s var(--ease-out);
}
.slab__nav a:hover { border-bottom-color: var(--brick); color: var(--brick); }
.slab__cta, .dock__cta {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  padding: 0 var(--space-md);
  border: var(--rule) solid var(--ink);
  background: var(--ink);
  color: var(--paper);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-decoration: none;
  white-space: nowrap;
  transition: background .18s var(--ease-out), color .18s var(--ease-out);
}
.slab__cta:hover, .dock__cta:hover { background: var(--brick); border-color: var(--brick); }
.language-switch {
  display: inline-flex;
  border: 1px solid var(--line-strong);
}
.language-switch a {
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-decoration: none;
}
.language-switch a + a { border-left: 1px solid var(--line-strong); }
.language-switch a[aria-current="page"] { background: var(--burgundy); color: var(--paper); }
.language-switch a:not([aria-current="page"]):hover { background: var(--cream); color: var(--burgundy); }

/* ── Dock · the offer follows you down the page ─────────────────
   Carries the terms, not just a button: a bare CTA asks for a yes
   without restating what the yes is for. Hidden while the fold or
   the form itself is on screen — over the form it would cover the
   fields it is pointing at. */
.dock {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 9;
  border-top: var(--rule) solid var(--ink);
  background: var(--paper);
}
.dock[hidden] { display: none; }
.dock__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding-block: var(--space-sm);
}
.dock__terms { margin: 0; color: var(--ink); font-size: var(--text-sm); line-height: 1.35; }
.dock__terms strong { color: var(--burgundy); font-size: 1.05rem; font-weight: 800; }
.dock__plus { display: block; color: var(--muted); }
/* The dock replaces the slab CTA rather than doubling it. visibility keeps the
   header's layout from shifting as it swaps. */
.dock-visible .slab__cta { visibility: hidden; opacity: 0; }

/* ── H1 · Editorial creator invitation ──────────────────────── */
.fold { border-bottom: var(--rule) solid var(--ink); }
.fold__grid {
  min-height: min(46rem, calc(100svh - 4rem));
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}
.fold__copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(3.5rem, 9vw, 6.5rem) max(1.25rem, calc((100vw - var(--shell)) / 2));
}
.fold__eyebrow {
  margin: 0 0 var(--space-md);
  color: var(--brick);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.fold__statement {
  max-width: 9ch;
  margin: 0 0 var(--space-lg);
  color: var(--burgundy);
  font-family: "Dahlia", Georgia, serif;
  font-size: var(--text-display);
  font-weight: 700;
  letter-spacing: -.035em;
  line-height: .88;
}
.fold__pay { color: var(--brick); }
.fold__lede {
  max-width: 38ch;
  margin: 0;
  color: var(--ink);
  font-size: var(--text-lede);
  text-wrap: pretty;
}
.fold__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-lg); margin-top: var(--space-xl); }
.button.fold__cta {
  min-width: min(100%, 19rem);
  border-color: var(--burgundy);
  background: var(--burgundy);
  color: var(--paper);
  text-decoration: none;
}
.button.fold__cta:hover { border-color: var(--brick); background: var(--brick); color: var(--paper); }
.fold__jump {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  width: fit-content;
  border-bottom: var(--rule) solid var(--burgundy);
  color: var(--burgundy);
  font-weight: 700;
  text-decoration: none;
}
.fold__jump:hover { color: var(--brick); border-bottom-color: var(--brick); }
.fold__visual {
  position: relative;
  min-height: 30rem;
  overflow: hidden;
  border-top: var(--rule) solid var(--ink);
  background-color: var(--blush);
}
.fold__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.fold__stamp {
  position: absolute;
  z-index: 1;
  top: var(--space-md);
  right: var(--space-md);
  width: 7rem;
  aspect-ratio: 1;
  display: grid;
  align-content: center;
  margin: 0;
  border: var(--rule) solid var(--burgundy);
  border-radius: 50%;
  background: var(--paper);
  color: var(--burgundy);
  text-align: center;
  transform: rotate(7deg);
}
.fold__stamp strong { display: block; font-family: "Dahlia", Georgia, serif; font-size: 1.65rem; line-height: .9; }
.fold__stamp span { display: block; margin-top: .3rem; font-size: .7rem; font-weight: 800; line-height: 1.15; }
.fold__caption {
  position: absolute;
  z-index: 1;
  right: var(--space-md);
  bottom: var(--space-md);
  left: var(--space-md);
  margin: 0;
  border: var(--rule) solid var(--ink);
  padding: var(--space-md);
  background: var(--paper);
  color: var(--ink);
  font-size: .88rem;
}
.fold__caption strong { color: var(--brick); }

/* ── Bands ──────────────────────────────────────────────────── */
.band { padding-block: var(--space-3xl); border-top: var(--rule) solid var(--ink); }
.band--butter { background: var(--butter); }
.band--blush { background: var(--blush); }
.band--ink { background: var(--burgundy); color: var(--cream); }
.band__title {
  max-width: 20ch;
  margin: 0 0 var(--space-2xl);
  color: var(--burgundy);
  font-family: "Dahlia", Georgia, serif;
  font-size: var(--text-title);
  font-weight: 700;
  letter-spacing: -.025em;
  text-wrap: balance;
}
.band--ink .band__title { color: var(--cream); }
.process-intro { display: grid; gap: var(--space-md); margin-bottom: var(--space-2xl); }
.process-intro .band__title { margin-bottom: 0; }
.process-intro__copy { max-width: 52ch; margin: 0; color: var(--ink); font-size: var(--text-lede); }

/* ── T4 · Figures (stat strip) ──────────────────────────────── */
.figures { display: grid; gap: 0; margin: 0 0 var(--space-xl); }
.figure { border-top: 1px solid var(--line); padding-block: var(--space-lg); }
.figure:last-child { border-bottom: 1px solid var(--line); }
.figure__num {
  margin: 0 0 var(--space-xs);
  color: var(--burgundy);
  font-size: var(--text-figure);
  font-weight: 800;
  letter-spacing: -.05em;
  line-height: .95;
  font-variant-numeric: tabular-nums;
}
.figure__note { max-width: 34ch; margin: 0; color: var(--ink); }
.benefit-figures { margin-bottom: var(--space-md); }
.figure__num--words { max-width: 12ch; font-size: clamp(2.25rem, 5vw, 4rem); text-wrap: balance; }
.figure__num--commission { max-width: 11ch; font-size: clamp(2.35rem, 5vw, 4.4rem); text-wrap: balance; }

/* ── Disclosure · fine print folded away ────────────────────────
   The terms have to stay on the page, but at full weight they were
   the largest text block in the section. */
.disclosure { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.disclosure summary {
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding-block: var(--space-sm);
  color: var(--burgundy);
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}
.disclosure summary::-webkit-details-marker { display: none; }
.disclosure summary::after {
  content: "+";
  margin-left: auto;
  color: var(--brick);
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 1;
}
.disclosure[open] summary::after { content: "−"; }
.disclosure summary:hover { color: var(--brick); }
.disclosure .fine-print { padding-bottom: var(--space-md); }

/* ── Product tray · compact ritual overview ────────────────────
   Phones get the complete range at a glance; the verified product copy
   stays available in one shared disclosure below the tray. */
.band--products { background: var(--cream); }
.products-intro { display: grid; gap: var(--space-md); margin-bottom: var(--space-2xl); }
.products-intro .band__title { margin-bottom: 0; }
.products-intro__copy { max-width: 52ch; margin: 0; color: var(--ink); font-size: var(--text-lede); }
.product-shelf {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  border-top: var(--rule) solid var(--ink);
  border-left: var(--rule) solid var(--ink);
}
.product-card {
  position: relative;
  min-width: 0;
  display: flex;
  flex-direction: column;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-right: var(--rule) solid var(--ink);
  border-bottom: var(--rule) solid var(--ink);
  background: var(--paper);
}
.product-card__media { min-height: 0; height: 100%; overflow: hidden; background: var(--paper); }
.product-card__media img { width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; }
.product-card__body { position: absolute; right: 0; bottom: 0; left: 0; min-width: 0; padding: clamp(.65rem, 3vw, var(--space-md)); }
.product-card--glow .product-card__body { background: var(--butter); }
.product-card--summer .product-card__body { background: var(--paper); }
.product-card--desire .product-card__body { background: var(--blush); }
.product-card--debloat .product-card__body { background: var(--cream); }
.product-card h3 {
  margin: 0;
  color: var(--burgundy);
  font-family: "Dahlia", Georgia, serif;
  font-size: clamp(1.35rem, 5.8vw, 2.5rem);
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.08;
  text-transform: lowercase;
}
.product-card h3 span { display: block; }
.product-card__ritual { margin: var(--space-xs) 0 0; color: var(--ink); font-size: clamp(.72rem, 2.8vw, .88rem); line-height: 1.35; }
.product-details-disclosure { margin-top: var(--space-md); border-top: var(--rule) solid var(--burgundy); border-bottom: var(--rule) solid var(--burgundy); }
.product-details-disclosure summary {
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: var(--space-md);
  color: var(--burgundy);
  font-weight: 800;
  cursor: pointer;
  list-style: none;
}
.product-details-disclosure summary::-webkit-details-marker { display: none; }
.product-details-disclosure summary::after { content: "+"; margin-left: auto; color: var(--brick); font-size: 1.35rem; line-height: 1; }
.product-details-disclosure[open] summary::after { content: "−"; }
.product-details-list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  border-top: 1px solid var(--line);
}
.product-detail { min-width: 0; padding: var(--space-md) 0 var(--space-lg); border-bottom: 1px solid var(--line); }
.product-detail:last-child { border-bottom: 0; }
.product-detail h3 { margin: 0; color: var(--burgundy); font-family: "Dahlia", Georgia, serif; font-size: 1.5rem; text-transform: lowercase; }
.product-card__description { margin: var(--space-sm) 0 0; color: var(--ink); font-size: .94rem; line-height: 1.55; }
.product-card__points {
  display: grid;
  gap: var(--space-xs);
  margin: var(--space-md) 0 0;
  padding: 0;
  list-style: none;
}
.product-card__point {
  position: relative;
  padding-left: var(--space-md);
  color: var(--burgundy);
  font-size: .82rem;
  line-height: 1.4;
}
.product-card__point::before {
  content: "✦";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--brick);
}
.product-card__warning { margin: var(--space-sm) 0 0; color: var(--muted); font-size: .72rem; line-height: 1.5; }

/* ── Journey entry · public page → personal creator page ───── */
.journey-entry {
  position: relative;
  display: grid;
  gap: 0;
  margin: 0 0 var(--space-lg);
  padding: 0 0 0 1.25rem;
  list-style: none;
}
.journey-entry::before {
  content: "";
  position: absolute;
  top: 1.25rem;
  bottom: 2.5rem;
  left: 1.25rem;
  border-left: var(--rule) solid var(--burgundy);
}
.journey-entry__item {
  position: relative;
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr);
  gap: var(--space-md);
  padding-bottom: var(--space-xl);
}
.journey-entry__dot {
  z-index: 1;
  width: 2.5rem;
  height: 2.5rem;
  display: grid;
  place-items: center;
  border: var(--rule) solid var(--burgundy);
  border-radius: 50%;
  background: var(--paper);
  color: var(--burgundy);
  font-size: .7rem;
  font-weight: 800;
}
.journey-entry__item--active .journey-entry__dot { background: var(--burgundy); color: var(--paper); }
.journey-entry__item h3 { margin: .35rem 0 var(--space-xs); color: var(--burgundy); font-size: 1.35rem; }
.journey-entry__item p { max-width: 42ch; margin: 0; }
.journey-entry__tag {
  display: inline-block;
  margin-top: var(--space-sm);
  padding: .3rem .55rem;
  background: var(--blush);
  color: var(--burgundy);
  font-size: .66rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.journey-entry__handoff { margin: 0 0 var(--space-md); color: var(--brick); font-size: .72rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }

/* ── F4 · Assignment sequence ───────────────────────────────── */
.stages { margin: 0; padding: 0; list-style: none; }
.stage {
  position: relative;
  display: grid;
  gap: var(--space-sm);
  border-top: 1px solid var(--line);
  padding-block: var(--space-xl);
}
.stage:last-child { border-bottom: 1px solid var(--line); }
.stage__num {
  color: var(--brick);
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: .1em;
  font-variant-numeric: tabular-nums;
}
.stage__body h3 { margin: 0 0 var(--space-xs); color: var(--burgundy); font-size: 1.5rem; }
.stage__body p { max-width: 56ch; margin: 0; }

/* Brief artifact — the concrete proof, set as type not imagery */
.recipe {
  margin-top: var(--space-lg);
  border: var(--rule) solid var(--burgundy);
  background: var(--paper);
}
.recipe__row {
  display: grid;
  gap: var(--space-2xs);
  border-bottom: 1px solid var(--line);
  padding: var(--space-sm) var(--space-md);
}
.recipe__time {
  color: var(--brick);
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
}
.recipe__what { color: var(--burgundy); font-weight: 700; }
.recipe__how { color: var(--muted); font-size: .92rem; }
/* .stage__body p (0-1-1) caps width at 56ch — this needs to outrank it, not tie. */
.recipe .recipe__total { max-width: none; margin: 0; padding: var(--space-sm) var(--space-md); background: var(--butter); color: var(--ink); font-size: .92rem; }
.recipe__total strong { color: var(--burgundy); font-variant-numeric: tabular-nums; }

/* ── F3 · Ledger (spec sheet) ───────────────────────────────── */
.ledger { display: grid; gap: var(--space-xl); }
.ledger__head {
  margin: 0 0 var(--space-md);
  padding-bottom: var(--space-xs);
  border-bottom: var(--rule) solid var(--burgundy);
  color: var(--burgundy);
  font-size: 1.15rem;
  letter-spacing: 0;
  text-transform: uppercase;
}
.ledger ul { margin: 0; padding: 0; list-style: none; }
.ledger li {
  border-bottom: 1px solid var(--line);
  padding-block: var(--space-sm);
  color: var(--ink);
  font-weight: 600;
}
.ledger__note { margin-top: var(--space-md); }
.fit__lede { max-width: 52ch; margin: calc(var(--space-2xl) * -1 + var(--space-md)) 0 var(--space-2xl); font-size: var(--text-lede); color: var(--ink); }
/* The invoicing requirement is the one entry on the list that reads as a wall.
   Answered next to it, it stops being a reason to close the page. */
.ledger__reassure {
  max-width: 62ch;
  margin: var(--space-xl) 0 0;
  padding: var(--space-lg);
  border-left: var(--rule) solid var(--brick);
  background: var(--paper);
  color: var(--ink);
  line-height: 1.6;
}
.ledger__reassure strong { color: var(--brick); }
.ledger__col--not .ledger__head { border-bottom-color: var(--muted); color: var(--muted); }
.ledger__col--not li { color: var(--muted); font-weight: 400; text-decoration: line-through; text-decoration-color: var(--line); }

/* ── Next steps ─────────────────────────────────────────────── */
.next { display: grid; gap: var(--space-xl); }
.next__lede { max-width: 48ch; font-size: var(--text-lede); color: var(--ink); }
.next__head {
  margin: 0 0 var(--space-md);
  color: var(--burgundy);
  font-size: 1.15rem;
  text-transform: uppercase;
  letter-spacing: 0;
}
.next__list { margin: 0 0 var(--space-md); padding: 0; list-style: none; }
.next__list li { border-top: 1px solid var(--line); padding-block: var(--space-sm); color: var(--burgundy); font-weight: 700; }
.next__list li:last-child { border-bottom: 1px solid var(--line); }

/* ── FAQ ────────────────────────────────────────────────────── */
.faq { display: grid; gap: var(--space-xl); }
.faq__list details { border-top: 1px solid var(--line); }
.faq__list details:last-child { border-bottom: 1px solid var(--line); }
.faq__list summary {
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding-block: var(--space-sm);
  color: var(--burgundy);
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}
.faq__list summary::-webkit-details-marker { display: none; }
/* Explicit affordance — flex layout drops the native disclosure marker. */
.faq__list summary::after {
  content: "+";
  margin-left: auto;
  color: var(--brick);
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 1;
  transition: transform .18s var(--ease-out);
}
.faq__list details[open] summary::after { content: "−"; }
.faq__list summary:hover { color: var(--brick); }
.faq__list p { max-width: 62ch; margin: 0 0 var(--space-md); }

/* ── Interest form ──────────────────────────────────────────── */
.interest { display: grid; gap: var(--space-xl); }
.interest__lede { max-width: 44ch; font-size: var(--text-lede); color: var(--cream-soft); }
.promise { margin: var(--space-xl) 0 0; display: grid; gap: var(--space-md); }
.promise dt {
  color: var(--cream);
  font-weight: 700;
  padding-top: var(--space-md);
  border-top: 1px solid var(--cream-line);
}
.promise dd { max-width: 44ch; margin: var(--space-2xs) 0 0; color: var(--cream-soft); font-size: var(--text-sm); line-height: 1.6; }
.lede-note { max-width: 60ch; margin: 0 0 var(--space-md); font-size: var(--text-lede); line-height: 1.5; color: var(--ink); }
.lede-note strong { color: var(--brick); }
.interest__form { display: grid; gap: var(--space-md); }
.interest__form label { display: grid; gap: var(--space-2xs); color: var(--cream); font-weight: 700; }
.interest__form label span { color: var(--cream-soft); font-weight: 400; }
.interest__form input:not([type="checkbox"]),
.interest__form textarea {
  min-height: 52px;
  width: 100%;
  border: var(--rule) solid var(--cream-line);
  padding: var(--space-sm) var(--space-md);
  background: rgba(255, 255, 255, .07);
  color: var(--cream);
  font: inherit;
}
.interest__form textarea { min-height: 6.5rem; resize: vertical; }
.interest__form input:not([type="checkbox"]):focus,
.interest__form textarea:focus { border-color: var(--butter); }
.interest__form input::placeholder,
.interest__form textarea::placeholder { color: rgba(241, 240, 226, .5); }
.prefs {
  display: grid;
  gap: var(--space-xs);
  margin: 0;
  border: var(--rule) solid var(--cream-line);
  padding: var(--space-md);
}
.prefs legend { padding: 0 var(--space-xs); color: var(--cream); font-weight: 700; }
.prefs__hint { max-width: 44ch; margin: 0 0 var(--space-2xs); color: var(--cream-soft); font-size: var(--text-sm); }
.check { min-height: 44px; grid-template-columns: auto 1fr; align-items: start; font-weight: 400 !important; }
.check input { margin-top: .35rem; accent-color: var(--butter); }
.check a { min-height: 44px; display: inline-flex; align-items: center; text-underline-offset: 3px; }
.hp { position: absolute; left: -9999px; }
.button {
  min-height: 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  width: fit-content;
  border: var(--rule) solid var(--butter);
  padding: 0 var(--space-lg);
  background: var(--butter);
  color: var(--burgundy);
  font: inherit;
  font-weight: 800;
  cursor: pointer;
  transition: background .18s var(--ease-out), color .18s var(--ease-out);
}
.button:hover { background: var(--cream); border-color: var(--cream); }
.form-status { margin: 0; font-weight: 700; color: var(--cream); }
.form-status--error { color: var(--error) !important; }

/* ── Ft8 · Marquee footer ───────────────────────────────────── */
.marquee { overflow: hidden; border-top: var(--rule) solid var(--ink); background: var(--ink); color: var(--cream); }
.marquee__track {
  display: flex;
  gap: var(--space-2xl);
  padding-block: var(--space-md);
  white-space: nowrap;
  animation: marquee 38s linear infinite;
}
.marquee__track span {
  font-size: clamp(1rem, 2.4vw, 1.5rem);
  font-weight: 800;
  letter-spacing: .04em;
}
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.marquee__meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-sm);
  padding-block: var(--space-md);
  border-top: 1px solid var(--cream-line);
  font-size: var(--text-sm);
}
.marquee__meta a { min-height: 44px; display: inline-flex; align-items: center; }

/* ── States ─────────────────────────────────────────────────── */
:focus-visible { outline: 3px solid var(--brick); outline-offset: 2px; }
.band--ink :focus-visible, .marquee :focus-visible { outline-color: var(--butter); }
[hidden] { display: none !important; }
button:disabled { cursor: wait; opacity: .68; }
.reveal-ready [data-reveal] { opacity: 0; transform: translateY(14px); transition: opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-out); }
.reveal-ready [data-reveal].is-visible { opacity: 1; transform: none; }

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 63.99rem) {
  .slab__nav { display: none; }
}

@media (max-width: 47.99rem) {
  .slab__label { display: none; }
  .slab { gap: var(--space-sm); }
  .slab__mark { margin-right: auto; }
  .slab__cta { display: none; }
  .band--products { padding-block: 3rem; }
  .products-intro { gap: .75rem; margin-bottom: 2rem; }
  .products-intro__copy { font-size: 1rem; }
}

@media (min-width: 48rem) {
  .fold__grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); }
  .fold__copy { padding-left: max(1.25rem, calc((100vw - var(--shell)) / 2)); padding-right: clamp(2rem, 6vw, 6rem); }
  .fold__visual { min-height: 42rem; border-top: 0; border-left: var(--rule) solid var(--ink); }
  .figures { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-xl); }
  .figure { border-top-width: var(--rule); border-top-color: var(--burgundy); }
  .figure:last-child { border-bottom: 0; }
  .journey-entry { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 0 0 var(--space-xl); }
  .journey-entry::before { top: 1.25rem; right: 25%; bottom: auto; left: 1.25rem; border-top: var(--rule) solid var(--burgundy); border-left: 0; }
  .journey-entry__item { padding: 0 var(--space-xl) 0 0; }
  .stage { grid-template-columns: 6rem minmax(0, 1fr); gap: var(--space-lg); }
  .recipe__row { grid-template-columns: 7rem 8rem minmax(0, 1fr); align-items: baseline; gap: var(--space-md); }
  .ledger { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3xl); }
  .next { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3xl); }
  .faq { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: var(--space-3xl); }
  .faq .band__title { margin-bottom: 0; }
  .interest { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3xl); align-items: start; }
  .product-details-list { grid-template-columns: repeat(2, minmax(0, 1fr)); border-left: 1px solid var(--line); }
  .product-detail { padding: var(--space-lg); border-right: 1px solid var(--line); }
  .product-detail:nth-last-child(-n + 2) { border-bottom: 0; }
}

@media (min-width: 64rem) {
  .product-shelf { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .products-intro { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: end; gap: var(--space-3xl); }
  .product-card h3 { font-size: clamp(1.75rem, 3vw, 2.5rem); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .marquee__track { animation: none; }
  .reveal-ready [data-reveal] { opacity: 1; transform: none; }
}