/* Hallmark · macrostructure: Split Studio · tone: artisan sombre · anchor hue: 84 (laiton)
 * theme: Noir Gold (custom-tuned) · dial: ENERGY 2 / RHYTHM 3 / MOTION 2
 * direction: design-system/DESIGN.md
 * Diversification: was Workbench; this build differs on macrostructure + section rhythm.
 *
 * Every colour resolves through a token from tokens.css. A raw hex below this
 * line is a bug, not a shortcut.
 */

/* ── base ────────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
/* overflow-x: clip, never hidden: hidden creates a scroll container and breaks
   position: sticky on the header. Both html and body need it. */
html, body { overflow-x: clip; max-width: 100%; }

body {
  margin: 0;
  background: var(--bg-base);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-style: normal;            /* an italic header is one of the most reliable AI tells */
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--text-strong);
  margin: 0;
  overflow-wrap: anywhere;       /* long words wrap instead of widening the page */
  min-width: 0;
}
h1 { font-size: var(--text-display); font-weight: 600; }
h2 { font-size: var(--text-3xl); font-weight: 600; }
h3 { font-size: var(--text-lg); font-weight: 600; letter-spacing: -0.01em; }
h4 { font-size: var(--text-base); font-weight: 600; }

p { margin: 0; }
ul, ol, dl { margin: 0; padding: 0; list-style: none; }
a { color: var(--gold); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 0.2em; }
img { max-width: 100%; height: auto; display: block; }
code { font-family: var(--font-mono); font-size: 0.9em; background: var(--bg-sunken); padding: 0.1rem 0.35rem; border-radius: var(--radius-xs); }

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

.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.container { max-width: 84rem; margin-inline: auto; padding-inline: var(--space-lg); }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--gold); color: var(--on-gold);
  padding: var(--space-sm) var(--space-md); border-radius: 0 0 var(--radius-sm) 0;
}
.skip-link:focus { left: 0; }

.text-gold { color: var(--gold); }
.text-muted { color: var(--text-muted); }
.text-dim { color: var(--text-dim); }
.num { text-align: right; }
.mt-sm { margin-top: var(--space-sm); }
.mt-md { margin-top: var(--space-md); }
.mt-lg { margin-top: var(--space-lg); }
.mt-xl { margin-top: var(--space-xl); }
.mt-xs { margin-top: var(--space-xs); }

/* ── header ──────────────────────────────────────────────────────────────── */
/* A sticky header scrolls over content, so it has to be a surface the eye can
   separate from the page. Three faults were found here by measuring the rendered
   screenshot, and only the last one was visible in the CSS:
     1. three `//` comments (SCSS syntax) sat inside this rule in a plain CSS file; the
        parser threw the whole `background` declaration away with them, so the header
        had no surface at all;
     2. the first replacement, --bg-sunken at 10.5%, is DARKER than the 13.5% page and
        only by 3 OKLCH points. Rendered: 5/255 against 8/255. Invisible;
     3. the gradient's last stop was the page colour, so header and page met at exactly
        the same pixel value down at the seam. Rendered: 7.3/255 against 6.9/255.
   The header is an elevated plane, so it uses --surface (20% OKLCH -> ~22/255, about
   three times the page at 7.4/255) and the gradient stays inside that family. It never
   fades to the page colour, because the seam is the one place the difference has to
   show. Measured on the rendered page: 13.0/255 for a raised-bar attempt, 22/255 here.
   Note to future edits: comments in this file must be C-style. A `//` line is only
   valid in SCSS and here it silently eats the declaration that follows it. */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background-color: var(--surface);
  background-image: linear-gradient(
    to bottom,
    color-mix(in oklab, var(--surface) 84%, var(--bg-sunken)),
    var(--surface)
  );
  border-bottom: 1px solid var(--line);
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
/* Once content passes under it the bar states itself: the gold edge, and a shadow.
   At the very top of the page it stays quiet, so the hero is not fenced off. */
.site-header.is-scrolled {
  border-bottom-color: color-mix(in oklab, var(--gold) 55%, var(--line));
  box-shadow: 0 12px 24px -20px oklch(0% 0 0 / 0.95);
}
.header-inner {
  display: flex; align-items: center; gap: var(--space-lg);
  max-width: 84rem; margin-inline: auto;
  padding: var(--space-md) var(--space-lg);
}
.wordmark {
  font-family: var(--font-display); font-weight: 600;
  font-size: var(--text-lg); letter-spacing: -0.03em;
  text-decoration: none; white-space: nowrap; flex-shrink: 0;
}
.wordmark:hover { text-decoration: none; }
.wordmark-a { color: var(--text-strong); }
.wordmark-b { color: var(--gold); }
.site-nav { display: flex; align-items: center; gap: var(--space-lg); margin-left: auto; }
.site-nav a {
  color: var(--text-muted); font-size: var(--text-sm); font-weight: 500;
  text-decoration: none; white-space: nowrap;
  transition: color var(--dur-fast) var(--ease-out);
}
.site-nav a:hover, .site-nav a[aria-current="page"] { color: var(--text-strong); text-decoration: none; }
.site-nav a[aria-current="page"] { color: var(--gold); }

/* ── buttons ─────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--space-xs);
  min-height: 44px;                 /* tap-target floor */
  padding: 0.7rem 1.3rem;
  border-radius: var(--radius-sm);
  font-family: var(--font-body); font-size: var(--text-sm); font-weight: 600;
  white-space: nowrap;              /* a clickable label never wraps to two lines */
  border: 1px solid transparent; cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}
.btn:hover { text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn-lg { padding: 0.9rem 1.7rem; font-size: var(--text-base); }
.btn-primary { background: var(--gold); color: var(--on-gold); border-color: var(--gold); }
.btn-primary:hover { background: var(--gold-bright); border-color: var(--gold-bright); }
.btn-quiet, .btn-ghost { background: transparent; color: var(--text-strong); border-color: var(--line-strong); }
.btn-quiet:hover, .btn-ghost:hover { border-color: var(--gold); color: var(--gold); }
.btn-sm { min-height: 38px; padding: 0.45rem 0.9rem; font-size: var(--text-xs); }

/* ── the split: two halves, alternating direction down the page ──────────── */
.bande { padding: var(--space-4xl) 0; border-top: 1px solid var(--line); }
.bande-alt { background: var(--bg-sunken); }

.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-3xl);
  align-items: start;
  max-width: 84rem; margin-inline: auto;
  padding-inline: var(--space-lg);
}
/* minmax(0, 1fr) above, never a bare 1fr: a wide image would otherwise blow the
   grid out and create horizontal scroll on mobile. */
.split > * { min-width: 0; }
.split-reverse .split-copy { order: 2; }
.split-reverse .split-proof { order: 1; }
.split-copy { display: grid; gap: var(--space-md); align-content: start; }
.split-proof { display: grid; gap: var(--space-md); align-content: start; }

.kicker { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.1em; color: var(--gold); }
.prose { color: var(--text-muted); max-width: 44ch; }
.lede { font-size: var(--text-lg); color: var(--text-muted); max-width: 62ch; }

.checks { display: grid; gap: var(--space-xs); }
.checks li { position: relative; padding-left: 1.4rem; color: var(--text-muted); font-size: var(--text-sm); }
.checks li::before {
  content: ""; position: absolute; left: 0; top: 0.55em;
  width: 0.5rem; height: 0.5rem; border-radius: 2px; background: var(--gold);
}
.check-list { list-style: none; padding: 0; display: grid; gap: var(--space-xs); }
.check-list li { position: relative; padding-left: 1.6rem; color: var(--text-muted); font-size: var(--text-sm); line-height: 1.5; }
.check-list li::before {
  content: ""; position: absolute; left: 0; top: 0.45em;
  width: 0.6rem; height: 0.6rem; border-radius: 2px; background: var(--gold);
}

/* ── hero ────────────────────────────────────────────────────────────────── */
.hero {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: var(--space-3xl); align-items: center;
  max-width: 84rem; margin-inline: auto;
  padding: var(--space-4xl) var(--space-lg) var(--space-3xl);
}
.hero > * { min-width: 0; }
/* A flat image. The 3D host that used to live here needed a poster, a canvas
   overlay and a fixed aspect-ratio to avoid a layout shift; an image needs none of
   that, only its dimensions so the browser can reserve the space. */
.hero-media { margin: 0; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--line); position: relative; }
.hero-media img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; display: block; }
/* A single hairline of the accent along the bottom edge, so the image reads as
   framed rather than as a rectangle of photograph dropped onto the page. */
.hero-media::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 2px;
  background: linear-gradient(to right, var(--gold), transparent 65%);
}
.hero-object-note { color: var(--text-dim); font-size: var(--text-xs); line-height: 1.6; max-width: 46ch; }
.hero-object-note a { color: var(--gold); }
.hero-copy { display: grid; gap: var(--space-lg); align-content: start; }
.hero-lede { color: var(--text-muted); font-size: var(--text-md); max-width: 48ch; }
.hero-tight { grid-template-columns: minmax(0, 1fr); padding-bottom: var(--space-lg); }

.hero-paths { display: grid; gap: var(--space-sm); }
.hero-paths li {
  display: grid; grid-template-columns: minmax(0, 12rem) minmax(0, 1fr);
  gap: var(--space-md); align-items: baseline;
  padding: var(--space-sm) 0; border-top: 1px solid var(--line);
}
.path-fig { color: var(--cyan-bright); font-size: var(--text-sm); font-weight: 500; }
.path-label { color: var(--text-muted); font-size: var(--text-sm); }
.hero-actions { display: flex; gap: var(--space-sm); flex-wrap: wrap; }

/* ── figure card: the price proof ────────────────────────────────────────── */
.figure-card {
  border: 1px solid var(--line-strong); border-radius: var(--radius-lg);
  background: var(--bg-raised); padding: var(--space-xl);
  display: grid; gap: var(--space-sm);
}
.fig-row { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-md); flex-wrap: wrap; }
.fig-row-sep { border-top: 1px solid var(--line); padding-top: var(--space-md); margin-top: var(--space-xs); }
.fig-k { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-dim); }
.fig-v { font-size: var(--text-xl); color: var(--text-strong); }
.fig-v small { font-size: 0.55em; color: var(--text-dim); font-weight: 400; }
.fig-note { font-size: var(--text-sm); color: var(--text-muted); }

/* ── captures, portraits, figures ────────────────────────────────────────── */
.capture, .portrait { margin: 0; display: grid; gap: var(--space-sm); }
.capture img, .portrait img {
  width: 100%; border-radius: var(--radius-md);
  border: 1px solid var(--line); background: var(--bg-raised);
}
.capture img { aspect-ratio: 16 / 10; object-fit: cover; object-position: top center; }
.portrait img { aspect-ratio: 1 / 1; object-fit: cover; }
figcaption { font-size: var(--text-xs); color: var(--text-dim); }

/* ── facts list ──────────────────────────────────────────────────────────── */
.facts { display: grid; gap: var(--space-sm); }
.facts > div {
  display: grid; grid-template-columns: minmax(0, 9rem) minmax(0, 1fr);
  gap: var(--space-md); padding-bottom: var(--space-sm);
  border-bottom: 1px solid var(--line);
}
.facts dt { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.07em; color: var(--text-dim); }
.facts dd { margin: 0; color: var(--text-strong); font-size: var(--text-sm); overflow-wrap: anywhere; }
.facts-lg dd { font-size: var(--text-md); }

/* ── stages ──────────────────────────────────────────────────────────────── */
.stages { display: grid; gap: var(--space-lg); }
.stages li { display: grid; grid-template-columns: 2.5rem minmax(0, 1fr); gap: var(--space-md); }
.stage-n {
  font-size: var(--text-sm); color: var(--gold);
  border: 1px solid var(--gold-line); border-radius: var(--radius-full);
  width: 2rem; height: 2rem; display: grid; place-items: center;
}
.stages h3 { margin-bottom: var(--space-2xs); }
.stages p { color: var(--text-muted); font-size: var(--text-sm); max-width: 48ch; }

/* ── questions ───────────────────────────────────────────────────────────── */
.qa { display: grid; gap: var(--space-xs); }
.qa details { border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--bg-raised); overflow: hidden; }
.qa summary {
  padding: var(--space-md); cursor: pointer; list-style: none;
  font-weight: 600; color: var(--text-strong); font-size: var(--text-sm);
  display: flex; justify-content: space-between; align-items: center; gap: var(--space-md);
}
.qa summary::-webkit-details-marker { display: none; }
.qa summary::after { content: "+"; color: var(--gold); font-size: var(--text-lg); line-height: 1; flex-shrink: 0; }
.qa details[open] summary::after { content: "-"; }
.qa details[open] summary { border-bottom: 1px solid var(--line); }
.qa p { padding: var(--space-md); color: var(--text-muted); font-size: var(--text-sm); }

/* ── closing band ────────────────────────────────────────────────────────── */
.sortie { position: relative; display: grid; align-items: center; min-height: 26rem; border-top: 1px solid var(--line); overflow: hidden; }
.sortie-media { position: absolute; inset: 0; margin: 0; }
.sortie-media img { width: 100%; height: 100%; object-fit: cover; opacity: 0.42; }
.sortie-copy {
  position: relative; z-index: 1; display: grid; gap: var(--space-md);
  max-width: 84rem; width: 100%; margin-inline: auto; padding: var(--space-3xl) var(--space-lg);
}
.sortie-copy p { color: var(--text); max-width: 44ch; }
.sortie-flat { background: var(--bg-sunken); min-height: 0; }

/* ── article ──────────────────────────────────────────────────────────────
 * A reading measure, not a layout. The single most common failure of a written
 * page is a body column that runs the full container width; the second is body
 * text at the same size as everything else, so nothing signals hierarchy. Both
 * are set here, once.
 */
.article { max-width: 84rem; margin-inline: auto; padding: var(--space-3xl) var(--space-lg) var(--space-4xl); }
.article-head { max-width: 46rem; margin-bottom: var(--space-2xl); }
.article-head h1 { margin-block: var(--space-md) var(--space-lg); }
.article-lede { font-size: var(--text-xl); color: var(--text); line-height: 1.5; max-width: 40rem; }
.article-body { max-width: 40rem; display: grid; gap: var(--space-lg); }
.article-body h2 {
  font-size: var(--text-2xl); margin-top: var(--space-xl);
  padding-top: var(--space-lg); border-top: 1px solid var(--line);
}
.article-body h3 { margin-top: var(--space-md); color: var(--gold); }
.article-body p { color: var(--text-muted); font-size: var(--text-md); line-height: 1.75; }
.article-body p strong { color: var(--text-strong); }
.article-body h2 + p, .article-body h3 + p { margin-top: 0; }
.article-list { display: grid; gap: var(--space-md); padding-left: 0; }
.article-list li {
  position: relative; padding-left: 1.5rem;
  color: var(--text-muted); font-size: var(--text-md); line-height: 1.7;
}
.article-list li::before {
  content: ""; position: absolute; left: 0; top: 0.7em;
  width: 0.45rem; height: 0.45rem; background: var(--gold); border-radius: 1px;
}
.article-list strong { color: var(--text-strong); }
.article-sign {
  border-top: 1px solid var(--line); padding-top: var(--space-lg);
  color: var(--text-muted); font-size: var(--text-sm);
}
.article-sign strong { color: var(--gold); }
.article-foot { max-width: 40rem; margin-top: var(--space-2xl); }

/* ── cards, grids, tables shared by other pages ──────────────────────────── */
.card { background: var(--bg-raised); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--space-xl); min-width: 0; }
.grid { display: grid; gap: var(--space-lg); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); }
.section { padding-block: var(--space-3xl); }
.section-sunken { background: var(--bg-sunken); }
.flex-between { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-lg); flex-wrap: wrap; }
.chip {
  display: inline-flex; align-items: center; gap: var(--space-2xs);
  font-family: var(--font-mono); font-size: var(--text-xs);
  padding: 0.2rem 0.6rem; border-radius: var(--radius-full);
  border: 1px solid var(--line-strong); color: var(--text-muted); white-space: nowrap;
}
.chip-gold { border-color: var(--gold-line); color: var(--gold); background: var(--gold-wash); }
.chip-info { border-color: var(--cyan); color: var(--cyan-bright); }
.chip-ok { border-color: var(--ok); color: var(--ok); }
.chip-warn { border-color: var(--warn); color: var(--warn); }
.chip-danger { border-color: var(--danger); color: var(--danger); }

.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--line); border-radius: var(--radius-lg); }
table.data { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
table.data th, table.data td { padding: var(--space-sm) var(--space-md); text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; }
table.data th { font-family: var(--font-mono); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.07em; color: var(--text-dim); font-weight: 500; white-space: nowrap; }
table.data tbody tr:last-child td { border-bottom: none; }
table.data tfoot td { border-top: 1px solid var(--line-strong); padding-top: var(--space-md); }

.field { display: grid; gap: var(--space-2xs); }
.field .label { font-size: var(--text-sm); color: var(--text-muted); font-weight: 500; }
.input, .textarea, .select {
  width: 100%; min-height: 44px; padding: 0.65rem 0.85rem;
  background: var(--bg-sunken); color: var(--text);
  border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
  font-family: var(--font-body); font-size: var(--text-base);
  transition: border-color var(--dur-fast) var(--ease-out);
}
.input:focus, .textarea:focus, .select:focus { border-color: var(--gold); outline: none; }
.input:focus-visible, .textarea:focus-visible, .select:focus-visible { outline: 2px solid var(--cyan-bright); outline-offset: 2px; }
.textarea { min-height: 6rem; resize: vertical; }
.error { color: var(--danger); font-size: var(--text-sm); }
.error[hidden] { display: none; }

/* ── configurator ────────────────────────────────────────────────────────── */
.wizard-grid { display: grid; gap: var(--space-2xl); grid-template-columns: minmax(0, 1fr) minmax(0, 22rem); align-items: start; }
.wizard-main { min-width: 0; display: grid; gap: var(--space-xl); }
.wizard-block {
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  background: var(--bg-raised); padding: var(--space-xl); min-width: 0;
}
.wizard-block legend {
  font-family: var(--font-display); font-size: var(--text-lg); font-weight: 600;
  color: var(--text-strong); padding-inline: var(--space-xs);
  display: flex; align-items: center; gap: var(--space-sm);
}
.pt-0 { padding-top: 0; }

.pack-picker, .maint-picker, .option-list { display: grid; gap: var(--space-sm); }
.pack-picker { grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr)); }
.pack-option > span, .maint-option > span, .option-row > span { min-width: 0; }
.pack-option, .maint-option, .option-row {
  display: flex; gap: var(--space-md); align-items: flex-start;
  border: 1px solid var(--line); border-radius: var(--radius-md);
  padding: var(--space-md); cursor: pointer; background: var(--bg-sunken);
  transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
  min-width: 0; max-width: 100%;
}
.pack-option:hover, .maint-option:hover, .option-row:hover { border-color: var(--line-strong); background: var(--surface); }
.pack-option:has(input:checked), .maint-option:has(input:checked), .option-row:has(input:checked) { border-color: var(--gold); background: var(--gold-wash); }
.pack-option:has(input:focus-visible), .maint-option:has(input:focus-visible), .option-row:has(input:focus-visible) { outline: 2px solid var(--cyan-bright); outline-offset: 2px; }
.pack-option input, .maint-option input, .option-row input { margin-top: 0.35rem; accent-color: var(--gold); flex-shrink: 0; width: 1.05rem; height: 1.05rem; }
.pack-option-popular { border-color: var(--gold-line); }
.pack-option-body, .maint-body, .option-body { display: grid; gap: var(--space-2xs); min-width: 0; flex: 1; }
/* Grid children default to min-width:auto: without this the head row stayed
   241px wide inside a 124px column, which caused the real 320px overflow. */
.pack-option-body > *, .maint-body > *, .option-body > * { min-width: 0; }
.pack-option-head, .maint-head, .option-head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-sm); flex-wrap: wrap; }
/* A flex child also defaults to min-width:auto, so a long label refuses to
   shrink and pushes the card past the viewport at 320px. */
.pack-option-head > *, .maint-head > *, .option-head > * { min-width: 0; }
.pack-option-head strong, .option-head strong { color: var(--text-strong); font-size: var(--text-sm); overflow-wrap: anywhere; }
.option-head strong { min-width: 0; }
.pack-option-desc, .maint-desc, .option-desc { color: var(--text-muted); font-size: var(--text-sm); line-height: 1.5; overflow-wrap: anywhere; min-width: 0; }
.pack-option-meta, .option-price { color: var(--gold); font-size: var(--text-xs); }
/* nowrap on a two-line price string forced 241px of content into a 124px column. */
.pack-option-meta { white-space: normal; overflow-wrap: anywhere; }
.option-price { white-space: nowrap; }

/* ── summary panel ───────────────────────────────────────────────────────── */
.wizard-side { position: sticky; top: 5.5rem; }
.summary { background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--radius-lg); padding: var(--space-xl); }
.summary h3 { margin-bottom: var(--space-md); }
.summary-lines { display: grid; gap: var(--space-xs); max-height: 18rem; overflow-y: auto; padding-right: var(--space-xs); }
.summary-line { display: flex; justify-content: space-between; gap: var(--space-sm); font-size: var(--text-sm); }
.summary-line-label { color: var(--text-muted); min-width: 0; overflow-wrap: anywhere; }
.summary-line-val { color: var(--text); white-space: nowrap; }
.summary-line-pack .summary-line-label { color: var(--text-strong); font-weight: 500; }
.summary-total { border-top: 1px solid var(--line-strong); margin-top: var(--space-lg); padding-top: var(--space-md); display: grid; gap: var(--space-xs); }
.summary-row { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-sm); }
.summary-row span { color: var(--text-muted); font-size: var(--text-sm); }
.summary-row strong { color: var(--text-strong); font-size: var(--text-lg); white-space: nowrap; }
.summary-note, .summary-fine { font-size: var(--text-xs); margin-top: var(--space-md); line-height: 1.5; }
.summary .btn { width: 100%; margin-top: var(--space-lg); }

/* ── quote document ──────────────────────────────────────────────────────── */
.quote-party { display: grid; gap: var(--space-lg); grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); }
table.data tfoot tr:first-child td { border-top: 1px solid var(--line); }

/* ── footer ──────────────────────────────────────────────────────────────── */
.site-footer { border-top: 1px solid var(--line); background: var(--bg-sunken); padding-block: var(--space-2xl) var(--space-lg); }
.footer-grid { display: grid; gap: var(--space-xl); grid-template-columns: minmax(0, 1.6fr) repeat(2, minmax(0, 1fr)); }
.footer-grid h4 { margin-bottom: var(--space-sm); }
.footer-links { list-style: none; padding: 0; display: grid; gap: var(--space-xs); }
.footer-links a { color: var(--text-muted); font-size: var(--text-sm); text-decoration: none; white-space: nowrap; }
.footer-links a:hover { color: var(--gold); text-decoration: none; }
.footer-bottom {
  display: flex; justify-content: space-between; gap: var(--space-md); flex-wrap: wrap;
  border-top: 1px solid var(--line); margin-top: var(--space-xl); padding-top: var(--space-md);
  font-size: var(--text-xs); color: var(--text-dim);
}

/* ── reveal (motion is choreographed, transform+opacity only) ─────────────── */
.reveal { opacity: 0; transform: translateY(14px); }
.reveal.is-in {
  opacity: 1; transform: none;
  transition: opacity var(--dur-slower) var(--ease-out), transform var(--dur-slower) var(--ease-out);
}

/* ── motion ───────────────────────────────────────────────────────────────
 * The end states and the hidden states, side by side. Every animated property is
 * transform, opacity or filter: none of these triggers layout, so the compositor
 * carries them and the page does not stutter while the object turns.
 */

/* the hero headline: a word reveal, opacity + y + blur, staggered per word.
   Words rather than characters: at this length a character reveal drags. */
.hero-copy h1 .w {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.35em);
  filter: blur(10px);
  transition:
    opacity 0.4s var(--ease-out),
    transform 0.4s var(--ease-out),
    filter 0.4s var(--ease-out);
}
.hero-copy h1.in .w { opacity: 1; transform: none; filter: blur(0); }

/* the section reveal: children come in one after another, not the block at once */
.reveal > * {
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity 0.6s var(--ease-out) var(--stagger, 0s),
    transform 0.6s var(--ease-out) var(--stagger, 0s);
}
.reveal.is-in > * { opacity: 1; transform: none; }

/* the section heading rule draws itself. stroke-dashoffset is a presentation
   attribute, so it animates without reflow, and pathLength="1" on the path makes the
   dash maths unit-free. */
h2 .rule {
  display: block; width: 3.5rem; height: 2px;
  margin-bottom: var(--space-md); overflow: visible;
}
h2 .rule .draw {
  stroke: var(--gold);
  stroke-width: 2;
  fill: none;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 1.1s var(--ease-out);
}
h2 .rule .draw.in { stroke-dashoffset: 0; }

/* Rolling figures need a fixed-width digit or the row jitters as the number grows. */
[data-count] { font-variant-numeric: tabular-nums; }

/* press feedback: 0.97 at 150ms, the house value. Not animated from 0 anywhere. */
.btn:active, .site-nav a:active { transform: scale(0.97); }
.btn { transition: transform 0.15s var(--ease-out), background-color var(--dur-fast) var(--ease-out); }

@media (prefers-reduced-motion: reduce) {
  /* The end states, immediately. Nothing may be left hidden by an animation that
     will not run.
     Each selector below repeats the specificity of the rule it overrides, because a
     shorter selector loses to a longer one whatever the source order: the drawn rule
     is `h2 .rule .draw`, so the override has to be written the same way. */
  .hero-copy h1 .w,
  .reveal > *,
  .reveal > *[style] { opacity: 1 !important; transform: none !important; filter: none !important; }
  h2 .rule .draw { stroke-dashoffset: 0 !important; transition: none; }
}

/* ── responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 62rem) {
  .hero, .split, .wizard-grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); }
  .split-reverse .split-copy, .split-reverse .split-proof { order: 0; }
  .hero { padding-top: var(--space-2xl); }
  .hero-paths li { grid-template-columns: minmax(0, 1fr); gap: var(--space-2xs); }
  .facts > div { grid-template-columns: minmax(0, 1fr); gap: var(--space-2xs); }
  .wizard-side { position: static; }
  .footer-grid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 40rem) {
  :root { --text-display: 2.6rem; --text-3xl: 1.9rem; }
  .bande { padding: var(--space-2xl) 0; }
  .hero-actions { flex-direction: column; align-items: stretch; }
  .hero-actions .btn, .cta-band .btn { width: 100%; }
  .site-nav { gap: var(--space-md); }
  .site-nav a:not(.btn) { font-size: var(--text-xs); }
  .stages li { grid-template-columns: minmax(0, 1fr); }
  .cta-band { flex-direction: column; align-items: flex-start; }
  .summary-lines { max-height: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal, .reveal.is-in { opacity: 1; transform: none; transition: none; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}