/* =========================================================
   LAD — landing page
   Structure and layout. Colour comes from themes.css.

   Committed single-theme design: the page paints its own
   ground and never borrows the host's.
   ========================================================= */

/* Colour tokens live in themes.css so the palette can be swapped.
   Everything below refers to roles (--dark, --accent, --page), never
   to a specific colour. */

:root { --wrap: 1180px; --r: 3px;
  --disp:  'League Spartan', 'Century Gothic', system-ui, sans-serif;
  --sans:  'League Spartan', 'Century Gothic', system-ui, sans-serif;
  --mono:  'League Spartan', 'Century Gothic', system-ui, sans-serif;
  --roman: 'Cinzel Decorative', 'Trajan Pro', Georgia, serif;
}

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

html { scroll-behavior: smooth; scroll-padding-top: 92px; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  background: var(--page);
  font-family: var(--sans);
  font-size: 16px;
  color: var(--body);
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
}

h1, h2 {
  font-family: var(--disp);
  font-weight: 700;
  color: var(--ink);
  margin: 0;
  line-height: 1.04;
  letter-spacing: -0.022em;
  text-wrap: balance;
}
h3, h4 {
  font-family: var(--sans);
  font-weight: 600;
  color: var(--ink);
  margin: 0;
  line-height: 1.3;
  letter-spacing: -0.005em;
  text-wrap: balance;
}
p { margin: 0; text-wrap: pretty; }
a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--rule); }
a:hover { border-bottom-color: var(--accent-deep); }
img { max-width: 100%; }

:focus-visible { outline: 2px solid var(--accent-deep); outline-offset: 3px; }

svg { width: 100%; height: 100%; display: block; }

.wrap { width: min(var(--wrap), 100% - 48px); margin-inline: auto; }
.tnum { font-variant-numeric: tabular-nums; }
.mono { font-family: var(--mono); }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.skip {
  position: absolute; left: 12px; top: -60px; z-index: 100;
  background: var(--accent); color: var(--on-accent); padding: 12px 18px;
  font-weight: 600; border: 0; transition: top .18s;
}
.skip:focus { top: 12px; color: var(--on-accent); }

.eyebrow {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0;
}
.eyebrow.accent { color: var(--accent-deep); }
.eyebrow.accent-light { color: var(--accent-on-dark); }
.eyebrow.accent-mint { color: var(--accent-on-dark); }

/* Engraved hatching, used only where it means "paperwork". */
.hatch {
  background-image: repeating-linear-gradient(
    0deg, var(--accent-on-dark) 0 1.5px, transparent 1.5px 6px);
}

/* ---------------- the opening ----------------
   The mark assembles: the house draws itself, the panes drop in, the
   scales settle, the clock winds on and the dots trail away. Then the
   whole thing lifts. Roughly 1.5s, once per session. */
.boot {
  position: fixed; inset: 0; z-index: 300;
  display: grid; place-items: center;
  background: var(--dark); color: var(--on-dark);
  transition: opacity .5s ease, visibility .5s;
}
.boot[hidden] { display: none; }
.boot.is-done { opacity: 0; visibility: hidden; }
.boot-mark { width: min(340px, 62vw); height: auto; }

/* The house goes up the way a house goes up: ground, walls, roof,
   then the openings and the planting. Every group shares one timing
   base and differs only in keyframe and delay. */
.boot-mark > g {
  opacity: 0;
  transform-box: fill-box; transform-origin: center;
  animation-timing-function: cubic-bezier(.2, .85, .3, 1);
  animation-fill-mode: forwards;
}
.b-ground { animation-name: b-lay; animation-duration: 0.42s; animation-delay: 0.06s; }
.b-walllo { animation-name: b-rise; animation-duration: 0.44s; animation-delay: 0.3s; }
.b-wallup { animation-name: b-rise; animation-duration: 0.44s; animation-delay: 0.46s; }
.b-roof { animation-name: b-drop; animation-duration: 0.46s; animation-delay: 0.66s; }
.b-panel { animation-name: b-drop; animation-duration: 0.34s; animation-delay: 0.86s; }
.b-garage { animation-name: b-pop; animation-duration: 0.3s; animation-delay: 0.94s; }
.b-glassa { animation-name: b-pop; animation-duration: 0.3s; animation-delay: 1s; }
.b-glassb { animation-name: b-pop; animation-duration: 0.3s; animation-delay: 1.06s; }
.b-glassc { animation-name: b-pop; animation-duration: 0.3s; animation-delay: 1.12s; }
.b-door { animation-name: b-pop; animation-duration: 0.3s; animation-delay: 1.18s; }
.b-tree { animation-name: b-pop; animation-duration: 0.34s; animation-delay: 1.24s; }
.b-bush { animation-name: b-pop; animation-duration: 0.3s; animation-delay: 1.32s; }

@keyframes b-lay  { from { opacity: 0; transform: scaleX(.2); } to { opacity: 1; transform: none; } }
@keyframes b-rise { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
@keyframes b-drop { from { opacity: 0; transform: translateY(-34px); } to { opacity: 1; transform: none; } }
@keyframes b-pop  { from { opacity: 0; transform: scale(.55); } to { opacity: 1; transform: none; } }

/* The mark is drawn dark-roof-on-cream-walls. On a near-black ground
   the roof disappears, so it steps up to the mid tone — still 6.4:1
   against the walls, which is the edge that carries the shape. */
.brand-mark, .hero-art, .cta-glow, .boot-mark, .dl-sheet-mark { --mk-roof: var(--dark-3); }
/* On the gold tab the cream walls sit at 1.50:1 against the disc and
   the house all but vanishes, so there it becomes a solid silhouette
   with the glazing punched out in the disc's own gold. */
.env-pull-d {
  --mk-wall: var(--on-accent);
  --mk-roof: var(--on-accent);
  --mk-gold: var(--on-accent);
  --mk-glass: var(--accent);
}

/* ---------------- 01 · nav bar ---------------- */
.site-head {
  position: sticky; top: 0; z-index: 60;
  background: var(--dark-veil);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--accent);
}
.head-inner { display: flex; align-items: center; justify-content: space-between; height: 72px; gap: 24px; }

.brand { display: flex; align-items: center; gap: 13px; color: var(--on-dark); border: 0; }
/* Sized against the lockup beside it: the wordmark column runs 49px
   (LAD, its rule, the subtitle), and the house occupies 75% of the
   mark's box, so the box has to overrun the text to draw level. */
.brand-mark { width: 80px; height: 51px; color: var(--on-dark); flex-shrink: 0; }

/* The rule is LAD's own underline, so its width is set by the
   letterforms rather than picked arbitrarily. The column is
   align-items:flex-start, so each line shrinks to its own content. */
.brand-name { display: flex; flex-direction: column; align-items: flex-start; }
.bn-lad {
  font-family: var(--roman); font-weight: 700; font-size: 26px;
  line-height: 1; letter-spacing: .04em; color: var(--on-dark);
  padding-bottom: 6px; border-bottom: 2px solid var(--accent);
}
.bn-full {
  margin-top: 6px;
  font-family: var(--sans); font-weight: 600; font-size: 7.5px;
  letter-spacing: .09em; text-transform: uppercase; white-space: nowrap;
  color: var(--accent-on-dark);
}

.head-nav { display: flex; align-items: center; gap: 30px; }
.head-nav > a { font-size: 13.5px; color: var(--on-dark-2); border: 0; }
.head-nav > a:hover { color: var(--accent-on-dark); }
.head-phone {
  display: flex; align-items: center; gap: 8px;
  border: 1px solid var(--accent-on-dark) !important; border-radius: var(--r);
  padding: 8px 15px; font-size: 13.5px; font-weight: 600; color: var(--accent-on-dark) !important;
}
.head-phone:hover { background: var(--accent-on-dark); color: var(--dark) !important; }
.head-phone svg { width: 14px; height: 14px; }

.nav-toggle {
  display: none; width: 44px; height: 44px; padding: 11px;
  background: none; border: 0; color: var(--on-dark); cursor: pointer;
}

/* ---------------- 02 · hero ---------------- */
.hero {
  position: relative; overflow: hidden;
  background: var(--dark-alt); padding: 68px 0 84px;
}
.hero-art {
  position: absolute; left: -60px; bottom: -40px; width: 560px; height: 358px;
  color: var(--accent-on-dark); opacity: .12; pointer-events: none;
}
.hero-grid {
  position: relative;
  display: grid; grid-template-columns: 1fr 456px; gap: 80px; align-items: start;
}
.hero-copy { padding-top: 6px; }
.hero .eyebrow { color: var(--accent-on-dark); }
.hero h1 { font-size: clamp(42px, 5.2vw, 70px); margin: 20px 0 26px; color: var(--on-dark); }
.hero-lede { font-family: var(--sans); font-weight: 400; font-size: 19px; line-height: 1.58; color: var(--on-dark-2); max-width: 560px; }
.hero-lede strong { color: var(--on-dark); font-weight: 600; }

.marks { display: flex; align-items: center; gap: 14px; margin-bottom: 4px; }
.marks .bar { width: 34px; height: 12px; }
.marks .dot { width: 9px; height: 9px; border: 1.5px solid var(--accent-on-dark); border-radius: 50%; }
.marks .ex { font-family: var(--mono); font-size: 13px; color: var(--on-dark-3); }

.ticks { list-style: none; margin: 32px 0 38px; padding: 0; display: flex; flex-direction: column; gap: 0; }
.ticks li {
  position: relative; padding: 13px 0 13px 30px;
  font-size: 15px; color: var(--on-dark-2); line-height: 1.45;
  border-top: 1px solid var(--on-dark-rule);
}
.ticks li:last-child { border-bottom: 1px solid var(--on-dark-rule); }
.ticks li::before {
  content: ""; position: absolute; left: 0; top: 17px; width: 16px; height: 16px;
  background: var(--accent-on-dark);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") no-repeat center / contain;
}

.hero-stats { display: flex; align-items: stretch; gap: 0; border-top: 1px solid var(--accent); }
.hero-stats > div { padding: 20px 24px 0 0; }
.hero-stats > div + div { border-left: 1px solid var(--on-dark-rule); padding-left: 24px; }
/* The figure and its unit share a baseline; whatever is left of the
   label drops to the line below on its own flex row. */
.hero-stats > div { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 9px; }
.stat { font-family: var(--sans); font-size: 33px; font-weight: 700; letter-spacing: -.02em; color: var(--on-dark); line-height: 1; flex: none; }
.stat-unit {
  font-family: var(--mono); font-size: 13px; font-weight: 600;
  letter-spacing: .04em; color: var(--on-dark-2); flex: none;
}
/* 11px in the faintest on-dark tone was legible by the letter but
   not by the phrase. Up a size and a weight, and onto the brighter
   tone: 6.30:1 -> 9.38:1. */
.stat-label {
  flex-basis: 100%; font-family: var(--mono);
  font-size: 12.5px; font-weight: 600; letter-spacing: .04em; line-height: 1.4;
  color: var(--on-dark-2); margin-top: 9px;
}

/* ---------------- 04 · calculator ---------------- */
.calc-shell { position: relative; }
.calc {
  background: var(--page); border: 1px solid var(--dark);
  border-radius: var(--r); padding: 30px;
  box-shadow: 0 20px 46px var(--shadow);
}
.pane { display: none; }
.pane.is-active { display: block; animation: fade .2s ease-out; }
@media (prefers-reduced-motion: reduce) { .pane.is-active { animation: none; } }
@keyframes fade { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }

.pane-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 6px; }
.pane-head h2 { font-size: 25px; }
.pane-title { font-family: var(--disp); font-weight: 700; letter-spacing: -.02em; font-size: 27px; color: var(--ink); margin-bottom: 10px; line-height: 1.1; }
.step-tag { font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); flex-shrink: 0; }
.step-tag.ok { color: var(--accent-deep); }
.pane-sub { font-size: 14px; color: var(--muted); margin-bottom: 22px; }
.pane-sub-lg { font-size: 14.5px; color: var(--body); margin-bottom: 22px; }

.bar { display: flex; gap: 0; margin-bottom: 26px; border: 1px solid var(--rule); }
.bar i { height: 7px; flex: 1; background: transparent; }
.bar i + i { border-left: 1px solid var(--rule); }
.bar i.on { background: var(--dark); }

.fs { border: 0; padding: 0; margin: 0 0 24px; }
.lbl { display: block; font-size: 13.5px; font-weight: 600; color: var(--ink); margin-bottom: 10px; padding: 0; }

.opt {
  display: flex; align-items: center; gap: 14px;
  border: 1px solid var(--rule); background: transparent;
  border-radius: var(--r); padding: 15px 17px; min-height: 44px;
  cursor: pointer; margin-bottom: 10px;
  transition: border-color .14s, background .14s;
}
.opt:last-child { margin-bottom: 0; }
.opt:hover { border-color: var(--faint); }
.opt input { position: absolute; opacity: 0; width: 0; height: 0; }
.opt-dot { width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid var(--faint); background: transparent; flex-shrink: 0; transition: border-width .14s, border-color .14s; }
.opt input:checked ~ .opt-dot { border: 5.5px solid var(--dark); }
.opt:has(input:checked) { border-color: var(--dark); background: var(--page-2); }
.opt:has(input:focus-visible) { outline: 2px solid var(--accent-deep); outline-offset: 2px; }
.opt-title { display: block; font-size: 15px; font-weight: 600; color: var(--ink); }
.opt-note { display: block; font-family: var(--mono); font-size: 11px; letter-spacing: .04em; color: var(--muted); margin-top: 5px; }
.opt-note.accent { color: var(--accent-deep); }
.opt-sm { padding: 12px 15px; }
.opt-sm .opt-title { font-size: 14.5px; font-weight: 500; }

.pills { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border: 1px solid var(--rule); border-radius: var(--r); overflow: hidden; }
.pill {
  display: grid; place-items: center; height: 46px; cursor: pointer;
  font-size: 14px; font-weight: 600; color: var(--body);
  transition: background .14s, color .14s;
}
.pill + .pill { border-left: 1px solid var(--rule); }
.pill input { position: absolute; opacity: 0; width: 0; height: 0; }
.pill:has(input:checked) { background: var(--dark); color: var(--on-dark); }
.pill:has(input:focus-visible) { outline: 2px solid var(--accent-deep); outline-offset: -3px; }

.field { margin-bottom: 22px; }
.input-wrap {
  display: flex; align-items: center; gap: 10px;
  border: 1px solid var(--faint); background: var(--page);
  border-radius: var(--r); height: 50px; padding: 0 14px;
  transition: border-color .14s, box-shadow .14s;
}
.input-wrap:focus-within { border-color: var(--dark); box-shadow: inset 0 -2px 0 var(--accent); }
.input-wrap.is-bad { border-color: var(--alert); }
.prefix { font-family: var(--mono); font-size: 13px; color: var(--muted); flex-shrink: 0; }
.input-wrap input {
  flex: 1; min-width: 0; border: 0; outline: 0; background: none;
  font-family: var(--sans); font-size: 16px; color: var(--ink);
}
.input-wrap input::placeholder { color: var(--faint); }
#price { font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: 17px; font-weight: 600; }

.hint { font-size: 12.5px; color: var(--muted); margin-top: 8px; line-height: 1.5; }
.err { font-size: 12.5px; color: var(--alert); margin-top: 8px; font-weight: 600; }
.err-form { margin-top: 14px; }

/* Buttons. Primary is the gold moment — one visible at a time. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: 52px; padding: 0 24px; width: 100%;
  border: 1px solid transparent; border-radius: var(--r); cursor: pointer;
  font-family: var(--sans); font-size: 15px; font-weight: 600; letter-spacing: .01em;
  transition: background .14s, color .14s, border-color .14s, opacity .14s;
}
.btn svg { width: 16px; height: 16px; flex-shrink: 0; }
.btn-primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.btn-primary:hover { background: var(--accent-2); border-color: var(--accent-2); color: var(--on-accent); }
.btn-primary[disabled] { opacity: .55; cursor: progress; }
.btn-ghost { background: transparent; border-color: var(--rule); color: var(--body); }
.btn-ghost:hover { border-color: var(--dark); color: var(--ink); }
.btn-icon { width: 52px; padding: 0; flex-shrink: 0; }
.btn-icon svg { width: 17px; height: 17px; }
.btn-sm { height: 40px; font-size: 13.5px; }
.btn-outline { background: transparent; border-color: var(--on-dark); color: var(--on-dark); }
.btn-outline:hover { background: var(--on-dark); color: var(--dark); }
.btn-wa { background: var(--dark); border-color: var(--dark); color: var(--on-dark); }
.btn-wa:hover { background: var(--dark-3); border-color: var(--dark-3); color: var(--on-dark); }
.btn-wide { width: auto; min-width: 230px; }
.btn-row { display: flex; gap: 10px; }
.btn-row .btn-primary { flex: 1; }
.btn-row-plain { margin-top: 14px; justify-content: center; }
.btn-row-plain .btn { width: auto; }

.calc-foot {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  font-size: 12px; color: var(--muted); margin-top: 16px; text-align: center;
}
.calc-foot svg { width: 12px; height: 12px; flex-shrink: 0; }

/* result — navy block, figure in gold. The payoff moment. */
.result { background: var(--dark); border-radius: var(--r); padding: 30px 26px; margin-bottom: 22px; }
.result-figure {
  font-family: var(--disp); font-size: clamp(42px, 9vw, 58px); font-weight: 700;
  color: var(--accent-on-dark); letter-spacing: -0.03em; line-height: 1; margin: 14px 0 0;
}
.result-meta {
  display: flex; align-items: center; gap: 9px;
  margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--on-dark-rule);
  font-family: var(--mono); font-size: 12.5px; color: var(--on-dark-2); line-height: 1.5;
}
.result-meta svg { width: 14px; height: 14px; flex-shrink: 0; }
.result-meta strong { color: var(--on-dark); font-weight: 500; }

.breakdown { margin: 0 0 22px; }
.breakdown > div {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  padding: 11px 0; border-bottom: 1px solid var(--rule-soft);
}
.breakdown > div:last-child { border-bottom: 1px solid var(--dark); }
.breakdown dt { font-size: 13px; color: var(--muted); }
.breakdown dd {
  margin: 0; font-family: var(--mono); font-variant-numeric: tabular-nums;
  font-size: 13.5px; font-weight: 500; color: var(--ink); text-align: right;
}
.breakdown dd.money { font-weight: 500; box-shadow: inset 0 -6px 0 -4px var(--accent); }

.note {
  display: flex; align-items: flex-start; gap: 12px;
  background: var(--page-2); border: 1px solid var(--rule);
  border-radius: var(--r); padding: 17px 18px; margin-bottom: 22px;
}
.note svg { width: 17px; height: 17px; flex-shrink: 0; margin-top: 2px; color: var(--dark); }
.note p { font-size: 13px; color: var(--body); }
.note strong { display: block; color: var(--ink); font-weight: 600; margin-bottom: 5px; font-size: 14px; }
.note-amber { background: var(--warn-bg); border-color: var(--warn-rule); }
.note-amber svg, .note-amber strong { color: var(--accent-deep); }
.note-amber p { color: var(--warn-ink); }
.note-plain { background: transparent; border-color: var(--dark); }
.note-plain svg { color: var(--dark); }

.microprint {
  font-size: 11.5px; color: var(--muted); line-height: 1.6;
  padding-top: 18px; margin-top: 20px; border-top: 1px solid var(--rule-soft);
}

.chip-ok {
  display: flex; align-items: center; gap: 12px;
  border: 1px solid var(--dark); border-radius: var(--r);
  padding: 14px 16px; margin-bottom: 24px;
  font-family: var(--mono); font-size: 13px; color: var(--ink);
}
.chip-ok strong { font-weight: 500; }
.chip-ok::before {
  content: ""; width: 17px; height: 17px; flex-shrink: 0;
  background: var(--accent-deep);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") no-repeat center / contain;
}

.opt-tag { font-weight: 400; color: var(--muted); }

.dropzone {
  display: flex; align-items: center; gap: 12px; cursor: pointer;
  border: 1px dashed var(--faint); background: var(--page-2);
  border-radius: var(--r); padding: 16px; margin-bottom: 20px;
}
.dropzone:hover { border-color: var(--dark); }
.dropzone svg { width: 18px; height: 18px; flex-shrink: 0; color: var(--dark); }
.dz-title { display: block; font-size: 13.5px; font-weight: 600; color: var(--ink); }
.dz-note { display: block; font-size: 12.5px; color: var(--muted); margin-top: 2px; }

.consent { display: flex; align-items: flex-start; gap: 12px; cursor: pointer; margin-bottom: 6px; }
.consent input { position: absolute; opacity: 0; width: 0; height: 0; }
.consent span:last-child { font-size: 12.5px; color: var(--body); line-height: 1.55; }
.cbox {
  width: 18px; height: 18px; border-radius: 2px; flex-shrink: 0; margin-top: 2px;
  border: 1.5px solid var(--faint); background: var(--page);
  display: grid; place-items: center; padding: 3px; color: transparent;
  transition: background .14s, border-color .14s;
}
.consent input:checked ~ .cbox { background: var(--dark); border-color: var(--dark); color: var(--on-dark); }
.consent:has(input:focus-visible) .cbox { outline: 2px solid var(--accent-deep); outline-offset: 2px; }

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

.trust-row { display: flex; align-items: center; justify-content: center; gap: 22px; margin-top: 16px; flex-wrap: wrap; }
.trust-row span { display: inline-flex; align-items: center; gap: 7px; font-family: var(--mono); font-size: 11px; letter-spacing: .04em; color: var(--muted); }
.trust-row svg { width: 12px; height: 12px; }

.pane-done { text-align: center; padding: 14px 0 8px; }
.done-mark {
  display: grid; place-items: center; width: 52px; height: 52px; margin: 0 auto 20px;
  border: 1.5px solid var(--accent); border-radius: 50%; color: var(--accent-deep); padding: 14px;
}
.ref-lab { font-family: var(--mono); font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }
.ref {
  font-size: 19px; font-weight: 500; color: var(--dark);
  border: 1px solid var(--accent); border-radius: var(--r);
  padding: 11px 16px; margin-bottom: 18px; display: inline-block;
}
.ref:empty { display: none; }
.pane-done .pane-sub-lg { margin-bottom: 14px; }
#doneFiles { margin-top: 14px; }
.pane-done .btn { margin-top: 14px; }

/* ---------------- 03 · credibility bar ---------------- */
.strip { background: var(--page); border-bottom: 1px solid var(--rule); }
.strip-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 28px; min-height: 68px; padding: 16px 0; flex-wrap: wrap;
}
.strip-inner span { font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }

/* ---------------- sections ---------------- */
.sec { padding: 92px 0; background: var(--page); }
.sec-white { background: var(--page-2); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
/* Two plain sections meeting have no change of ground between them,
   so they need a rule — otherwise it reads as one section with a hole
   in the middle. The tinted and dark ones carry their own borders. */
.sec:not(.sec-white):not(.sec-dark) + .sec:not(.sec-white):not(.sec-dark) { border-top: 1px solid var(--rule); }
.h2 { font-size: clamp(32px, 3.9vw, 50px); margin: 18px 0 22px; }
/* the divider from the logo: a gold hairline with a dot at its centre */
.h2::after {
  content: ; display: block; width: 112px; height: 6px; margin-top: 22px;
  background-image:
    linear-gradient(var(--accent), var(--accent)),
    radial-gradient(circle, var(--accent) 2.6px, transparent 2.7px);
  background-size: 112px 1px, 112px 6px;
  background-position: 0 2.5px, 0 0;
  background-repeat: no-repeat;
}
.cta .h2::after { margin-inline: auto; }
.h2-sm { font-size: clamp(28px, 3.2vw, 42px); }
.lede { font-family: var(--sans); font-weight: 400; font-size: 18.5px; line-height: 1.56; color: var(--body); max-width: 640px; margin-bottom: 52px; }

.card { background: transparent; border: 1px solid var(--rule); border-radius: var(--r); padding: 26px; }
.card-pad { padding: 30px; }
.card-lift { border-color: var(--dark); }
.card h3 { font-size: 17px; margin-bottom: 10px; }
.card p { font-size: 14.5px; }
.idx { font-family: var(--mono); font-size: 12px; letter-spacing: .1em; color: var(--accent-deep); margin-bottom: 18px; padding-bottom: 14px; border-bottom: 1px solid var(--accent); }

.grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }

/* ---------------- 06 · the receipt and the formulas ---------------- */
/* ---- the receipt ----------------------------------------------
   Nothing prints until the slot is pressed. The paper is revealed by
   its window growing from 0fr, which feeds it downward out of the
   slot; animating the paper itself would slide it, not print it. */
.print { margin: 0 0 56px; }

.print-slot {
  position: relative; z-index: 2;
  display: block; width: 100%; padding: 13px 0 0;
  background: var(--dark); border: 0; border-radius: 7px;
  border-top: 3px solid var(--accent);
  cursor: pointer; text-align: center;
  box-shadow: 0 6px 18px var(--shadow);
}
.print-slot:focus-visible { outline: 2px solid var(--accent-deep); outline-offset: 3px; }
.print-slit {
  display: block; height: 7px; margin: 0 22px;
  background: var(--dark-alt); border-radius: 4px;
  box-shadow: inset 0 2px 3px rgba(0, 0, 0, .65);
}
.print-cue {
  display: block; padding: 11px 0 13px;
  font-family: var(--mono); font-size: 11.5px; font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase; color: var(--on-dark-3);
  transition: color .2s ease;
}
/* The cue breathes while nothing has been printed, so the slot
   reads as waiting to be pressed. currentColor in the shadow keeps
   the glow tied to whatever the text is at that instant. */
.print:not(.is-open) .print-cue { animation: print-pulse 2.6s ease-in-out infinite; }
@keyframes print-pulse {
  0%, 100% { color: var(--on-dark-3); text-shadow: none; }
  50%      { color: var(--accent-on-dark); text-shadow: 0 0 14px currentColor; }
}
.print-slot:hover .print-cue { animation: none; color: var(--accent-on-dark); }

@media (prefers-reduced-motion: reduce) {
  .print:not(.is-open) .print-cue { animation: none; }
}

.print-win {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows .95s cubic-bezier(.22, .68, .3, 1);
}
/* One child only: a second would land in an implicit auto row and
   show through while the printer is closed. */
.print-roll { overflow: hidden; min-height: 0; }
.print.is-open .print-win { grid-template-rows: 1fr; }

.rcpt {
  background: var(--page-2); color: var(--body);
  margin: 0 10px; padding: 26px 30px 22px;
  box-shadow: 0 14px 34px var(--shadow);
}
.rc-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 18px; flex-wrap: wrap;
  padding-bottom: 14px; border-bottom: 2px dashed var(--rule);
}
.rc-brand, .rc-meta {
  font-family: var(--mono); font-size: 11px; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase; color: var(--muted); margin: 0;
}
.rc-doc {
  font-family: var(--disp); font-size: 20px; font-weight: 700;
  letter-spacing: .02em; color: var(--ink); margin: 0;
}

/* Landscape: the four stages read across the paper. */
.rc-cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.rc-col { padding: 20px 22px 18px 0; }
.rc-col + .rc-col { border-left: 2px dashed var(--rule); padding-left: 22px; }
.rc-kick {
  font-family: var(--mono); font-size: 10.5px; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase; color: var(--faint); margin: 0 0 8px;
}
.rc-title { font-family: var(--disp); font-size: 17px; font-weight: 700; color: var(--ink); margin: 0 0 9px; }
.rc-body { font-size: 14px; margin: 0; }
.is-due .rc-kick { color: var(--accent-deep); }
.is-due .rc-title { text-decoration: underline solid var(--accent); text-decoration-thickness: 2px; text-underline-offset: 5px; }
.is-end .rc-title { color: var(--accent-b-deep); }

.rc-foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 22px; flex-wrap: wrap;
  padding-top: 15px; border-top: 2px dashed var(--rule);
}
.rc-total { font-family: var(--mono); font-size: 12.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin: 0; }
.rc-total strong { color: var(--ink); }
.rc-code { width: 168px; height: 26px; fill: var(--ink); opacity: .8; }

/* The torn-off edge: scallops cut up into the foot of the paper. */
.rcpt-tear {
  display: block; height: 11px; margin: 0 10px;
  background:
    radial-gradient(circle at 8px 0, transparent 7px, var(--page-2) 7.5px) repeat-x 0 0 / 16px 11px;
  filter: drop-shadow(0 8px 12px var(--shadow));
}

@media (max-width: 900px) {
  .rc-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rc-col:nth-child(3) { border-left: 0; padding-left: 0; }
  .rc-col:nth-child(n+3) { border-top: 2px dashed var(--rule); padding-top: 18px; }
}
@media (max-width: 560px) {
  .rcpt { padding: 20px 18px 18px; }
  .rc-cols { grid-template-columns: 1fr; }
  .rc-col + .rc-col { border-left: 0; padding-left: 0; border-top: 2px dashed var(--rule); padding-top: 18px; }
  .rc-doc { font-size: 17px; }
}
@media (prefers-reduced-motion: reduce) {
  .print-win { transition: none; }
}

/* the formula, made live — change a figure and both heads recalculate */
.try {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 28px; flex-wrap: wrap;
  border: 1px solid var(--rule); border-left: 3px solid var(--accent);
  border-radius: var(--r); padding: 20px 24px; margin-bottom: 22px;
}
.try-lead { flex: 1; min-width: 240px; }
.try-lab {
  font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  color: var(--accent-deep); margin-bottom: 6px;
}
.try-hint { font-size: 13.5px; color: var(--muted); max-width: 52ch; }
.try-fields { display: flex; gap: 14px; flex-wrap: wrap; }
.try-f { display: flex; flex-direction: column; gap: 6px; cursor: text; }
.try-name { font-size: 12px; font-weight: 600; color: var(--ink); }
.try-in {
  display: flex; align-items: center; gap: 7px; height: 46px; padding: 0 13px;
  border: 1px solid var(--ink-4, var(--faint)); border-radius: var(--r); background: var(--page);
  transition: border-color .14s, box-shadow .14s;
}
.try-in:focus-within { border-color: var(--dark); box-shadow: inset 0 -2px 0 var(--accent); }
.try-in i { font-style: normal; font-size: 13px; color: var(--muted); }
.try-in input {
  width: 100px; border: 0; outline: 0; background: none;
  font-family: var(--sans); font-variant-numeric: tabular-nums;
  font-size: 16px; font-weight: 600; color: var(--ink);
}
#tryDays { width: 70px; }

.fx { margin: 18px 0 0; }
.fx > div {
  display: flex; align-items: baseline; justify-content: space-between; gap: 18px;
  padding: 9px 0; border-bottom: 1px solid var(--on-dark-rule);
}
.fx dt { font-size: 14px; color: var(--on-dark-2); }
.fx dd { margin: 0; font-size: 14px; font-weight: 600; color: var(--on-dark); text-align: right; white-space: nowrap; }
.formula-alt .fx > div { border-bottom-color: var(--rule-soft); }
.formula-alt .fx dt { color: var(--body); }
.formula-alt .fx dd { color: var(--ink); }

.fx-total { display: flex; align-items: baseline; gap: 10px; margin-top: 16px; }
.fx-eq { font-size: 18px; color: var(--on-dark-3); }
.fx-total span:last-child {
  font-size: clamp(26px, 3.2vw, 34px); font-weight: 700; letter-spacing: -.025em;
  color: var(--accent-on-dark); line-height: 1;
}
.formula-alt .fx-eq { color: var(--faint); }
.formula-alt .fx-total span:last-child { color: var(--accent-deep); }

.fx-sum {
  margin-top: 26px; padding-top: 24px; border-top: 2px solid var(--accent);
}
.fx-sum-lab {
  font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 10px;
}
.fx-sum-fig {
  font-size: clamp(42px, 7vw, 68px); font-weight: 700; letter-spacing: -.035em;
  line-height: .95; color: var(--ink);
}
.fx-sum-day { font-size: 15px; color: var(--body); margin-top: 12px; }
.fx-sum-day span { font-weight: 700; color: var(--ink); }


@media (max-width: 640px) {
  .try { flex-direction: column; align-items: stretch; }
  .try-fields { width: 100%; }
  .try-f { flex: 1; }
  .try-in input, #tryDays { width: 100%; }
}

.formulas { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }

/* Flip cards: the formula on the front, the worked sum on the back.
   Both faces share one grid cell, so the card is as tall as the
   taller face and nothing jumps when it turns. */
.fc { display: grid; perspective: 1500px; }
.fc-face {
  grid-area: 1 / 1; cursor: pointer;
  display: flex; flex-direction: column;
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
  transition: transform .55s cubic-bezier(.2, .7, .2, 1);
}
.fc-front { transform: rotateY(0deg); }
.fc-back  { transform: rotateY(180deg); }
.fc.is-flipped .fc-front { transform: rotateY(-180deg); }
.fc.is-flipped .fc-back  { transform: rotateY(0deg); }
.fc:not(.is-flipped) .fc-back,
.fc.is-flipped .fc-front { pointer-events: none; }

.fc-recipe {
  font-size: 17px; font-weight: 600; line-height: 1.9; margin-top: 18px;
  color: var(--on-dark); font-variant-numeric: tabular-nums;
}
.formula-alt .fc-recipe { color: var(--ink); }
.fc-hint { font-size: 13.5px; line-height: 1.55; color: var(--on-dark-2); margin-top: 18px; }
.formula-alt .fc-hint { color: var(--body); }

.fc-btn {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  width: 100%; margin-top: auto; padding: 14px 0 0;
  background: none; border: 0; border-top: 1px solid var(--on-dark-rule);
  font-family: var(--sans); font-size: 11px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--accent-on-dark); cursor: pointer; text-align: left;
}
.fc-btn svg { width: 17px; height: 17px; flex: none; transition: transform .3s; }
.fc-btn:hover svg { transform: rotate(-40deg); }
.formula-alt .fc-btn { color: var(--accent-deep); border-top-color: var(--rule); }
.fc-btn:focus-visible { outline: 2px solid var(--accent-on-dark); outline-offset: 4px; }
.formula-alt .fc-btn:focus-visible { outline-color: var(--accent-deep); }

/* the same flip on a light card — the qualifier grid */
.fc-face.card { padding: 26px; position: relative; overflow: hidden; }

/* The illustration is the card's background, bleeding off the
   bottom-right corner. Held well back: these are black-line drawings,
   and at full strength they swallow the heading sitting on them. */
.fc-art {
  position: absolute; right: -12%; bottom: -8%;
  width: 94%; height: auto; margin: 0;
  opacity: .24; pointer-events: none; user-select: none; z-index: 0;
  transition: opacity .3s ease, transform .3s ease;
}
.fc-face.card > *:not(.fc-art) { position: relative; z-index: 1; }
.fc-face.card .fc-btn { color: var(--accent-deep); border-top-color: var(--rule); }
.fc-face.card .fc-btn:focus-visible { outline-color: var(--accent-deep); }
.fc-face.card h3 { margin-bottom: 0; }

/* The art is placed to bleed off two corners of a wide card. On a
   narrow one that crops away most of the picture, so below this it
   fills the card instead of overhanging it. Must sit after the base
   rule: equal specificity, so source order decides. */
@media (max-width: 720px) {
  .fc-art {
    right: 0; bottom: 0; width: 100%;
    height: 100%; object-fit: cover; object-position: center;
    opacity: .30;
  }
  .fc-face.card { padding: 22px 20px; }
}
.fc-front h3::after {
  content: ; display: block; width: 34px; height: 2px;
  background: var(--accent); margin: 16px 0 18px;
}
.fc-why { font-size: 14.5px; line-height: 1.6; color: var(--body); margin-bottom: 18px; }

.fc .fx { margin-top: 16px; }
.fc .formula-note { margin-bottom: 18px; }

/* A small nudge, on the container rather than the faces — the faces
   already own transform for the flip, and a second one would fight it. */
@keyframes fc-shake {
  0%, 100% { transform: none; }
  14% { transform: translateX(-5px) rotate(-.75deg); }
  28% { transform: translateX(5px) rotate(.75deg); }
  42% { transform: translateX(-3.5px) rotate(-.5deg); }
  57% { transform: translateX(3.5px) rotate(.5deg); }
  71% { transform: translateX(-1.5px) rotate(-.2deg); }
  85% { transform: translateX(1.5px) rotate(.2deg); }
}
.fc:has([data-flip]:hover):not(.is-flipped),
.fc.is-nudge { animation: fc-shake .58s cubic-bezier(.36, .07, .19, .97); }
.fc:hover .fc-face.card { border-color: var(--accent); }
.fc:hover .fc-art { opacity: .34; transform: scale(1.04); }
.fc:hover .fc-btn { color: var(--accent-deep); }

@media (prefers-reduced-motion: reduce) {
  .fc-face, .fc-btn svg { transition: none; }
  .fc:has([data-flip]:hover):not(.is-flipped),
  .fc.is-nudge { animation: none; }
}
.formula { background: var(--dark); border-radius: var(--r); padding: 32px; }
.formula-alt { background: transparent; border: 1px solid var(--dark); }
.formula .mono { font-family: var(--mono); font-size: 15.5px; color: var(--on-dark); line-height: 2; margin-top: 20px; font-variant-numeric: tabular-nums; }
.formula-alt .mono { color: var(--ink); }
.formula-note { font-size: 13.5px; color: var(--on-dark-2); margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--on-dark-rule); }
.formula-alt .formula-note { color: var(--muted); border-top-color: var(--rule); }

/* the 20% share, drawn rather than asserted */
.share { display: flex; align-items: center; gap: 14px; margin-top: 20px; color: var(--accent-deep); }
.share svg { width: 38px; height: 38px; flex-shrink: 0; }
.share span { font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }

/* ---------------- 07 · comparison table ---------------- */
.table-scroll { overflow-x: auto; border: 1px solid var(--dark); border-radius: var(--r); background: var(--page); }
.cmp { width: 100%; min-width: 700px; border-collapse: collapse; text-align: left; }
.cmp thead th { background: var(--dark); color: var(--on-dark); padding: 18px 26px; vertical-align: bottom; }
.cmp thead th + th { border-left: 1px solid var(--on-dark-rule); }
.th-main { display: block; font-family: var(--disp); font-size: 21px; font-weight: 700; letter-spacing: -.015em; color: var(--on-dark); }
.th-sub { display: block; font-family: var(--mono); font-size: 12.5px; font-weight: 600; letter-spacing: .04em; color: var(--on-dark-2); margin-top: 6px; }
.cmp tbody th { padding: 20px 26px; font-size: 14px; font-weight: 600; color: var(--ink); vertical-align: top; }
.cmp tbody td { padding: 20px 26px; font-size: 14px; border-left: 1px solid var(--rule); vertical-align: top; }
.cmp tbody tr + tr th, .cmp tbody tr + tr td { border-top: 1px solid var(--rule); }
.cmp tbody tr:nth-child(even) { background: var(--page-2); }
/* the two deadline figures, and nothing else in the table */
.cmp strong { color: var(--accent-deep); font-family: var(--mono); font-weight: 500; }
.table-note { font-size: 13px; color: var(--muted); margin-top: 16px; }

/* Rows arrive from the side as they reach the viewport. The hidden
   state is applied by JS via .is-reveal, so with scripting off the
   table simply renders — it is never invisible by default. */
@keyframes cmp-in {
  from { opacity: 0; transform: translateX(-34px); }
  to   { opacity: 1; transform: none; }
}
.cmp.is-reveal thead tr,
.cmp.is-reveal tbody tr { opacity: 0; }
.cmp.is-reveal tr.is-in { animation: cmp-in .55s cubic-bezier(.2, .7, .2, 1) both; }

@media (prefers-reduced-motion: reduce) {
  .cmp.is-reveal thead tr,
  .cmp.is-reveal tbody tr { opacity: 1; }
  .cmp.is-reveal tr.is-in { animation: none; }
}

/* ---------------- 08 · forum cards ---------------- */
.card-head { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; padding-bottom: 20px; border-bottom: 1px solid var(--rule); }
.card-head h3 { font-family: var(--disp); font-weight: 700; letter-spacing: -.02em; font-size: 24px; margin: 0; }
.ico { width: 38px; height: 38px; display: grid; place-items: center; flex-shrink: 0; color: var(--dark); }
.ico-green { color: var(--accent-b-deep); }
p.card-lede { font-family: var(--sans); font-weight: 400; font-size: 16px; line-height: 1.55; margin-bottom: 24px; }
/* the higher-value path, marked once */
.card-lift { border-top: 3px solid var(--accent); }
.specs { margin: 0; }
.specs > div {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  padding-bottom: 13px; margin-bottom: 13px; border-bottom: 1px solid var(--rule-soft);
}
.specs > div:last-child { padding-bottom: 0; margin-bottom: 0; border-bottom: 0; }
.specs dt { font-family: var(--mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.specs dd { margin: 0; font-size: 14px; font-weight: 600; color: var(--ink); text-align: right; }
.specs dd.ok { font-family: var(--disp); font-weight: 700; font-size: 18px; color: var(--accent-b-deep); }
.note-wide { margin-top: 22px; margin-bottom: 0; padding: 20px 24px; }
.note-wide p { font-size: 14.5px; }

/* ---------------- 09 · authorities, a navy block ---------------- */
.sec-dark {
  position: relative; overflow: hidden;
  background: var(--dark); border-top: 1px solid var(--dark); border-bottom: 1px solid var(--dark);
}
/* Bled off the left edge and faded into the ground. The mask is what
   makes it read as part of the block rather than a pasted rectangle:
   the picture has a cream background, and a hard edge against
   near-black would show as a panel. */
.sec-art {
  position: absolute; left: -3%; top: 50%; transform: translateY(-50%);
  width: min(44%, 620px); height: auto; margin: 0;
  opacity: .17; pointer-events: none; user-select: none;
  -webkit-mask-image: linear-gradient(96deg, #000 0%, rgba(0,0,0,.85) 38%, transparent 82%);
  mask-image: linear-gradient(96deg, #000 0%, rgba(0,0,0,.85) 38%, transparent 82%);
}
/* Everything in the block sits above it. */
.sec-dark > .wrap { position: relative; z-index: 1; }
/* Below this the text fills the width and the picture would sit under
   the words rather than beside them. */
@media (max-width: 1080px) { .sec-art { display: none; } }
.sec-dark h2, .sec-dark h3 { color: var(--on-dark); }
.sec-dark .lede { color: var(--on-dark-2); }
.sec-dark .eyebrow { color: var(--accent-on-dark); }
.sec-dark .card { background: var(--dark-2); border-color: var(--dark-3); }
.sec-dark .card p { color: var(--on-dark-2); }
.sec-dark .card-dark { border-color: var(--accent); }
.case-name { font-family: var(--disp); font-weight: 700; letter-spacing: -.02em; font-size: 22px; line-height: 1.2; margin-bottom: 8px; }
p.cite {
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .04em;
  color: var(--accent-lt); margin-bottom: 20px; padding-bottom: 16px;
  border-bottom: 1px solid var(--on-dark-rule);
}

/* ---------------- 10 · process ---------------- */
/* Shut until the key is turned. Grid rows animate cleanly from 0fr,
   which max-height cannot do without guessing a height; the child is
   what carries overflow, since an anonymous box cannot. The spacing
   below travels with the state, or a closed row would leave a gap. */
.steps-wrap {
  display: grid; grid-template-rows: 0fr; opacity: 0; margin-bottom: 0;
  transition: grid-template-rows .55s ease, opacity .4s ease, margin-bottom .55s ease;
}
.steps-wrap > * { overflow: hidden; min-height: 0; }
.steps-wrap.is-open { grid-template-rows: 1fr; opacity: 1; margin-bottom: 34px; }

.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; }
/* gold rule over the free stage, navy hairline over the chargeable one */
.steps li { border-top: 2px solid var(--accent); padding-top: 22px; }
.steps li.step-soft { border-top: 1px solid var(--rule); }
.steps h3 { font-size: 18px; margin: 0 0 10px; }
.steps li p:last-child { font-size: 14.5px; margin: 0; }
.steps .idx { margin-bottom: 14px; padding-bottom: 0; border-bottom: 0; }

/* They arrive one after another, left to right. */
.steps-wrap.is-open li { animation: st-in .45s ease both; }
.steps-wrap.is-open li:nth-child(1) { animation-delay: .10s; }
.steps-wrap.is-open li:nth-child(2) { animation-delay: .18s; }
.steps-wrap.is-open li:nth-child(3) { animation-delay: .26s; }
.steps-wrap.is-open li:nth-child(4) { animation-delay: .34s; }
@keyframes st-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

.note-plain { margin-bottom: 0; padding: 24px 26px; }
.note-plain p { font-size: 14.5px; }

/* ---- the lock ---- */
.lock { display: flex; flex-direction: column; align-items: center; margin: 8px 0 34px; }
.lock-btn {
  background: none; border: 0; padding: 6px; cursor: pointer;
  border-radius: var(--r); line-height: 0;
}
.lock-btn:focus-visible { outline: 2px solid var(--accent-deep); outline-offset: 4px; }
.lock-svg { width: 128px; height: auto; overflow: visible; }

/* An outline, because brass on cream is 1.50:1 — below the 3:1 a
   control needs to be seen at all. */
.lk-plate { fill: var(--accent); stroke: var(--accent-deep); stroke-width: 2; }
.lk-screw { fill: var(--accent-2); stroke: var(--accent-deep); stroke-width: 1.5; }
.lk-slot  { fill: var(--on-accent); opacity: .6; }
.lk-way   { fill: var(--dark); }

.lk-knurl, .lk-collar, .lk-stem, .lk-bow { fill: var(--accent-2); stroke: var(--accent-deep); stroke-width: 2; }
.lk-eye { fill: var(--page); stroke: var(--accent-deep); stroke-width: 1.5; }

/* The pivot is the collar, so the bow swings the way a real key does. */
.lk-key {
  transform-box: view-box; transform-origin: 110px 96px;
  transition: transform .62s cubic-bezier(.5, 0, .18, 1);
}
.lock.is-open .lk-key { transform: rotate(90deg); }
.lock-btn:hover .lk-key { transform: rotate(7deg); }
.lock.is-open .lock-btn:hover .lk-key { transform: rotate(90deg); }

.lock-cue {
  margin: 14px 0 0; font-size: 12px; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: var(--accent-deep);
}
.lock.is-open .lock-cue { color: var(--muted); }

@media (prefers-reduced-motion: reduce) {
  .steps-wrap, .lk-key { transition: none; }
  .steps-wrap.is-open li { animation: none; }
}

.note-plain { margin-bottom: 0; padding: 24px 26px; }
.note-plain p { font-size: 14.5px; }

/* ---------------- document checklist ---------------- */
/* The checklist has no section of its own any more — this stands in
   for it. A sealed envelope running the full width: drag the tab and
   the flap tears away along a deckled edge. The tear line is a
   clip-path built in JS, because it has to know where the tab is;
   CSS only handles the look.

   --p carries the tear (0..1) out to whatever needs to fade. */
.env {
  --p: 0;
  position: relative; width: 100%; height: 190px; overflow: hidden;
  touch-action: pan-y; user-select: none; outline: none;
}

/* The kraft carries the torn edges on its own layer. Clipping the
   container instead would fray the seal along with it, and a seal is
   guillotined, not torn — only the long edges of the strip are. */
.env-kraft {
  position: absolute; inset: 0;
  background: var(--page-2);
  /* kraft and page sit close in tone, so the torn edge needs a shadow
     to read; drop-shadow traces the clip path, not the box. */
  filter: drop-shadow(0 1px 2px var(--shadow));
}

/* The kraft inside, printed like the invitation it is imitating. */
.env-inside {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; justify-content: center;
  /* clear of the tab, which now rests centred on the tear line */
  padding: 0 clamp(24px, 6vw, 90px) 0 clamp(112px, 11vw, 190px);
}
.env-kicker {
  font-family: var(--mono); font-size: 11px; font-weight: 700;
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--accent-deep); margin: 0 0 10px;
}
.env-title {
  font-family: var(--disp); font-size: clamp(24px, 3.4vw, 38px); font-weight: 700;
  letter-spacing: -.02em; color: var(--ink); margin: 0 0 8px;
}
.env-sub { font-size: 14.5px; color: var(--muted); margin: 0; max-width: 46ch; }

/* The flap. clip-path is set from JS; this is only the fallback for
   the first frame, before anything has measured. */
.env-flap {
  position: absolute; inset: 0;
  background: var(--dark);
  display: flex; align-items: center; justify-content: flex-end;
  padding-right: clamp(24px, 6vw, 90px);
  /* drop-shadow follows the clip path, so the torn edge throws a
     shadow onto the kraft the way a lifted flap would. */
  filter: drop-shadow(-3px 0 5px var(--shadow));
  will-change: clip-path;
}
.env-seal {
  font-family: var(--mono); font-size: 12px; font-weight: 600;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--on-dark-3); margin: 0;
  opacity: calc(1 - var(--p) * 1.4);
}

/* The wrapper only positions — JS writes its transform every frame. */
.env-pull {
  position: absolute; top: 50%; left: 0;
  width: 76px; height: 76px;
  cursor: grab; touch-action: none;
  transition: transform .34s cubic-bezier(.2, .8, .3, 1);
}

/* The disc: everything visual, and the nudge that asks to be pulled. */
.env-pull-d {
  position: relative;
  display: grid; place-items: center;
  width: 100%; height: 100%; border-radius: 50%;
  background: var(--accent); color: var(--on-accent);
  box-shadow: 0 5px 20px var(--shadow);
  transition: box-shadow .2s ease;
}
.env-pull-d svg { width: 41px; height: 26px; }

/* A ring leaving the disc, the way a tap ripples. */
.env-pull-d::after {
  content: ""; position: absolute; inset: -3px;
  border: 2px solid var(--accent); border-radius: 50%;
  opacity: 0; pointer-events: none;
}

/* Both only run while the envelope is on screen and still sealed —
   an animation nobody can see is battery spent for nothing. */
.env.is-live .env-pull-d { animation: env-nudge 3.4s ease-in-out infinite; }
.env.is-live .env-pull-d::after { animation: env-halo 3.4s ease-out infinite; }

@keyframes env-nudge {
  0%, 58%, 100% { transform: translateX(0); }
  66%           { transform: translateX(9px); }
  74%           { transform: translateX(2px); }
  82%           { transform: translateX(6px); }
  90%           { transform: translateX(0); }
}
@keyframes env-halo {
  0%   { transform: scale(1);    opacity: .6; }
  55%  { transform: scale(1.75); opacity: 0; }
  100% { transform: scale(1.75); opacity: 0; }
}

/* Hands off the moment it is being used, or once it has been opened. */
.env.is-dragging .env-pull { cursor: grabbing; transition: none; }
.env.is-dragging .env-pull-d,
.env.is-dragging .env-pull-d::after,
.env.is-used .env-pull-d,
.env.is-used .env-pull-d::after { animation: none; }
.env.is-dragging .env-pull-d { box-shadow: 0 8px 26px var(--shadow); }
.env:focus-visible .env-pull-d { box-shadow: 0 0 0 4px var(--accent-deep), 0 5px 20px var(--shadow); }

@media (prefers-reduced-motion: reduce) {
  .env.is-live .env-pull-d,
  .env.is-live .env-pull-d::after { animation: none; }
}

.env-copy { text-align: center; margin-top: 16px; }
.env-note { font-family: var(--sans); font-size: 14px; color: var(--faint); margin: 0; }
.env-note span { color: var(--body); font-weight: 700; }

@media (max-width: 720px) {
  .env { height: 168px; }
  /* The 112px inset was there to clear the tab on a wide strip. On a
     narrow one it pushes the words under the flap, so the copy is
     centred between symmetric margins instead. */
  .env-inside { padding: 0 16px; text-align: center; align-items: center; }
  .env-title { font-size: 20px; }
  .env-sub { max-width: 30ch; margin-inline: auto; }
  .env-pull { width: 64px; height: 64px; }
  .env-pull svg { width: 34px; height: 22px; }
  .env-seal { font-size: 10px; letter-spacing: .14em; }
  .env-sub { font-size: 13px; }
}

/* The checklist lives in a dialog: one column, and 390 words off the page. */
.dlg {
  width: min(680px, 100% - 32px); max-height: min(86vh, 900px);
  padding: 0; border: 0; border-radius: var(--r);
  background: var(--page); color: var(--body);
  box-shadow: 0 30px 90px rgba(0, 0, 0, .38);
  overflow: hidden;
}
.dlg::backdrop { background: rgba(10, 12, 18, .62); backdrop-filter: blur(3px); }
/* Only while it is travelling — a permanent transition would fight
   every later layout change inside the dialog. */
.dlg.is-slipping { transition: transform .46s cubic-bezier(.2, .86, .3, 1), opacity .3s ease; }

/* ---- the envelope hand-off ---------------------------------------
   Plays before the dialog opens, so a plain fixed layer is enough —
   nothing is in the top layer yet to paint over it. The veil matches
   .dlg::backdrop exactly, so the swap is invisible. */
.post {
  position: fixed; inset: 0; z-index: 90;
  display: grid; place-items: center;
  background: rgba(10, 12, 18, .62); backdrop-filter: blur(3px);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .22s ease, visibility 0s linear .22s;
}
.post.is-on { opacity: 1; visibility: visible; transition: opacity .22s ease; }
.post.is-off { opacity: 0; visibility: visible; transition: opacity .3s ease; }

.post-stage { position: relative; width: 300px; height: 392px; }

/* The card starts down inside the sleeve and is drawn up through the
   notch. It sits below the sleeve so it emerges from behind it. */
.post-sheet {
  position: absolute; left: 50%; bottom: 30px; z-index: 1;
  width: 206px; margin-left: -103px;
  padding: 18px 18px 22px;
  background: var(--page-2); color: var(--ink);
  border: 1px solid var(--rule);
  box-shadow: 0 12px 30px var(--shadow);
  transform: translateY(22px);
  transition: transform .56s cubic-bezier(.18, .85, .3, 1);
}
.post.is-on .post-sheet { transform: translateY(-172px); }

.post-sheet-t {
  font-family: var(--disp); font-size: 14px; font-weight: 700;
  color: var(--ink); margin: 0 0 13px;
}
.post-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.post-rows li { display: flex; align-items: center; gap: 9px; }
.post-rows li::before {
  content: ""; width: 11px; height: 11px; flex: none;
  border: 1.5px solid var(--faint); border-radius: 2px;
}
.post-rows li::after { content: ""; flex: 1; height: 6px; background: var(--rule); border-radius: 3px; }
.post-rows li:nth-child(2)::after { max-width: 78%; }
.post-rows li:nth-child(4)::after { max-width: 64%; }
.post-rows li:nth-child(5)::after { max-width: 84%; }

.post-env {
  position: absolute; left: 50%; bottom: 0; z-index: 2;
  width: 240px; height: 300px; margin-left: -120px;
  filter: drop-shadow(0 18px 42px var(--shadow));
}

@media (max-width: 720px) {
  .post-stage { width: 250px; height: 330px; }
  .post-sheet { width: 172px; margin-left: -86px; padding: 15px 15px 18px; bottom: 26px; }
  .post.is-on .post-sheet { transform: translateY(-146px); }
  .post-env { width: 200px; height: 250px; margin-left: -100px; }
  .post-sheet-t { font-size: 13px; }
}

@media (prefers-reduced-motion: reduce) {
  .post, .post-sheet { transition: none; }
}
.dlg[open]::backdrop { animation: dlg-veil .34s ease both; }
@keyframes dlg-veil { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .dlg.is-slipping { transition: none; }
  .dlg[open]::backdrop { animation: none; }
}
.dlg[open] { display: flex; flex-direction: column; }

.dlg-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 20px;
  padding: 26px 28px 18px; border-bottom: 1px solid var(--rule); flex: none;
}
.dlg-title { font-family: var(--disp); font-weight: 700; font-size: 27px; letter-spacing: -.02em; color: var(--ink); margin-top: 10px; }
.dlg-x {
  width: 38px; height: 38px; flex: none; padding: 9px; cursor: pointer;
  background: none; border: 1px solid var(--rule); border-radius: var(--r); color: var(--muted);
}
.dlg-x:hover { border-color: var(--ink); color: var(--ink); }

.dlg-bar {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 16px 28px; border-bottom: 1px solid var(--rule); background: var(--page-2); flex: none;
}
.dlg-bar .btn { width: auto; flex: none; }

.dlg-body { padding: 8px 28px 24px; overflow-y: auto; flex: 1; }
.dlg-body .dl-group { border-top: 2px solid var(--accent); padding-top: 18px; margin-top: 24px; }
.dlg-body .dl-group.is-soft { border-top: 1px solid var(--rule); }

.dlg-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap;
  padding: 18px 28px 22px; border-top: 1px solid var(--rule); background: var(--page-2); flex: none;
}
.dlg-foot .btn { width: auto; flex: none; }

@media (max-width: 720px) {
  .dlg { width: 100%; max-width: none; max-height: 100dvh; height: 100dvh; border-radius: 0; }
  .dlg-head, .dlg-bar, .dlg-body, .dlg-foot { padding-left: 20px; padding-right: 20px; }
  .dlg-foot { flex-direction: column; align-items: stretch; }
  .dlg-foot .btn { width: 100%; }
}

.dl-count {
  font-family: var(--mono); font-size: 12px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted); font-variant-numeric: tabular-nums;
}
.dl-count span { color: var(--ink); font-weight: 700; }
.dl-bar { flex: 1; min-width: 140px; max-width: 300px; height: 4px; background: var(--rule); border-radius: 2px; overflow: hidden; }
.dl-bar i { display: block; height: 100%; width: 0; background: var(--accent); transition: width .25s ease; }
#dlReset { width: auto; }

.dl-groups { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.dl-group { border-top: 2px solid var(--accent); padding-top: 20px; }
.dl-group.is-soft { border-top: 1px solid var(--rule); }
.dl-tier { font-size: 15.5px; font-weight: 700; color: var(--ink); margin-bottom: 6px; }
.dl-note { font-size: 13.5px; color: var(--muted); margin-bottom: 16px; }

.dl { list-style: none; margin: 0; padding: 0; }
.dl li { border-top: 1px solid var(--rule-soft); }
.dl li:last-child { border-bottom: 1px solid var(--rule-soft); }
.dl-item { display: flex; align-items: flex-start; gap: 13px; padding: 15px 0; cursor: pointer; }
.dl-item input { position: absolute; opacity: 0; width: 0; height: 0; }
.dl-box {
  width: 19px; height: 19px; flex-shrink: 0; margin-top: 2px;
  border: 1.5px solid var(--faint); border-radius: 3px; background: transparent;
  display: grid; place-items: center; padding: 3px; color: transparent;
  transition: background .14s, border-color .14s;
}
.dl-item input:checked ~ .dl-box { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.dl-item:has(input:focus-visible) .dl-box { outline: 2px solid var(--accent-deep); outline-offset: 2px; }
.dl-name { display: block; font-size: 15px; font-weight: 600; color: var(--ink); line-height: 1.35; }
.dl-why { display: block; font-size: 13.5px; color: var(--muted); margin-top: 5px; line-height: 1.5; }
.dl-item input:checked ~ .dl-body .dl-name { color: var(--muted); text-decoration: line-through; text-decoration-color: var(--faint); }
.dl-act {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; flex-wrap: wrap;
  margin-top: 34px; padding-top: 26px; border-top: 2px solid var(--accent);
}
.dl-act-msg { font-size: 16px; color: var(--body); max-width: 56ch; }
.dl-act-msg.is-ready { color: var(--ink); font-weight: 600; }
.dl-go { width: auto; flex: none; }

/* The banner sits above the calculator steps, so someone arriving from
   the checklist sees it land rather than wondering where it went. */
.calc-docs {
  font-size: 12.5px; font-weight: 600; color: var(--accent-deep);
  background: var(--page-2); border-left: 3px solid var(--accent);
  border-radius: 0 var(--r) var(--r) 0;
  padding: 10px 12px; margin-bottom: 20px;
}
.calc-docs[hidden] { display: none; }

.dz-from { margin: -8px 0 20px; }
.dz-from-lab {
  font-size: 11px; font-weight: 600; letter-spacing: .13em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 8px;
}
.dz-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.dz-chips li {
  font-size: 12px; font-weight: 600; color: var(--ink);
  background: var(--page-2); border: 1px solid var(--rule);
  border-radius: 20px; padding: 5px 11px 5px 22px; position: relative;
}
.dz-chips li::before {
  content: ""; position: absolute; left: 8px; top: 50%; margin-top: -5px;
  width: 10px; height: 10px; background: var(--accent-deep);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") no-repeat center / contain;
}
.dz-from[hidden] { display: none; }

.dl-carry {
  font-size: 12.5px; color: var(--muted); margin-bottom: 18px;
  padding-left: 13px; border-left: 2px solid var(--accent);
}

@media (max-width: 640px) {
  .dl-act { flex-direction: column; align-items: stretch; }
  .dl-go { width: 100%; }
}

@media (max-width: 1080px) { .dl-groups { grid-template-columns: 1fr 1fr; } }
@media (max-width: 720px) { .dl-groups { grid-template-columns: 1fr; gap: 22px; } }

/* the letterhead and closing line exist only on paper */
.dl-sheet-head, .dl-sheet-foot { display: none; }
.dl-pdf { width: auto; }

/* ---------------- the checklist as a printed sheet ----------------
   Scoped to html.print-docs, which the button adds just before
   print() and drops on afterprint — so printing any other way still
   prints the whole page normally. */
@media print {
  html.print-docs, html.print-docs body {
    background: #fff !important; color: #000 !important; padding: 0 !important;
  }
  html.print-docs body > * { display: none !important; }
  html.print-docs #dlDialog {
    display: block !important; position: static !important;
    width: auto !important; max-width: none !important; max-height: none !important;
    height: auto !important; overflow: visible !important;
    padding: 0 !important; border: 0 !important; box-shadow: none !important;
    background: #fff !important;
  }
  html.print-docs #dlDialog::backdrop { display: none !important; }
  html.print-docs .dlg-head, html.print-docs .dlg-bar, html.print-docs .dlg-foot { display: none !important; }
  html.print-docs .dlg-body { padding: 0 !important; overflow: visible !important; }
  html.print-docs .wrap { width: auto !important; max-width: none !important; }

  /* screen-only chrome */
  html.print-docs .eyebrow,
  html.print-docs .dl-foot,
  html.print-docs .h2::after { display: none !important; }

  /* letterhead */
  html.print-docs .dl-sheet-head {
    display: flex !important; align-items: center; gap: 12px;
    padding-bottom: 10px; margin-bottom: 20px; border-bottom: 1.5pt solid #000;
  }
  html.print-docs .dl-sheet-mark { width: 74px; height: 47px; color: #000; flex: none; }
  html.print-docs .dl-sheet-name { font-size: 12pt; font-weight: 700; color: #000; }
  html.print-docs .dl-sheet-meta { font-size: 8.5pt; color: #444; margin-top: 2px; }

  html.print-docs .h2 {
    font-size: 19pt !important; color: #000 !important; margin: 0 0 6pt !important;
  }
  html.print-docs .lede {
    font-size: 10pt !important; color: #333 !important; max-width: none !important;
    margin-bottom: 16pt !important;
  }

  html.print-docs .dl-groups { display: block !important; }
  html.print-docs .dl-group {
    break-inside: avoid; page-break-inside: avoid;
    border-top: 1.2pt solid #000 !important; padding-top: 8pt; margin-bottom: 16pt;
  }
  html.print-docs .dl-group.is-soft { border-top: .5pt solid #999 !important; }
  html.print-docs .dl-tier { font-size: 11.5pt; color: #000; margin-bottom: 2pt; }
  html.print-docs .dl-note { font-size: 8.5pt; color: #555; margin-bottom: 8pt; }

  html.print-docs .dl li { border-top: .5pt solid #bbb !important; break-inside: avoid; }
  html.print-docs .dl li:last-child { border-bottom: .5pt solid #bbb !important; }
  html.print-docs .dl-item { padding: 7pt 0 !important; }
  html.print-docs .dl-name { font-size: 10.5pt; color: #000; }
  html.print-docs .dl-why { font-size: 8.5pt; color: #444; margin-top: 2pt; }
  html.print-docs .dl-item input:checked ~ .dl-body .dl-name {
    color: #000; text-decoration: none;
  }

  /* a tickable box on paper, and a solid one where it is already ticked */
  html.print-docs .dl-box {
    width: 13pt; height: 13pt; border: 1pt solid #000 !important;
    background: #fff !important; color: #fff !important; border-radius: 1pt;
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
  }
  html.print-docs .dl-item input:checked ~ .dl-box { background: #000 !important; color: #fff !important; }

  html.print-docs .dl-sheet-foot {
    display: block !important; margin-top: 18pt; padding-top: 8pt;
    border-top: .5pt solid #999; font-size: 8.5pt; color: #444;
  }

  @page { size: A4; margin: 15mm 14mm; }
}

/* ---------------- 12 · faq ---------------- */
/* Centred column: accordion rows the full 1180px are a long ride for
   the eye between the question and the chevron. */
.faq-grid { display: block; max-width: 840px; margin-inline: auto; }
.faq-intro { text-align: center; margin-bottom: 44px; }
.faq-intro .h2::after { margin-inline: auto; }
.faq-intro p:last-child { font-size: 15.5px; max-width: 54ch; margin-inline: auto; }
.faq-list { display: flex; flex-direction: column; gap: 0; border-top: 1px solid var(--dark); }
.qa { border-bottom: 1px solid var(--rule); }
.qa summary {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 24px;
  padding: 24px 0; cursor: pointer; list-style: none;
  font-family: var(--sans); font-size: 16.5px; font-weight: 600; color: var(--ink); line-height: 1.35;
}
.qa summary::-webkit-details-marker { display: none; }
.chev { width: 18px; height: 18px; flex-shrink: 0; margin-top: 3px; color: var(--muted); transition: transform .2s, color .2s; }
.qa[open] .chev { transform: rotate(180deg); color: var(--accent-deep); }
.qa-body { padding: 0 40px 26px 0; max-width: 68ch; }
.qa-body p { font-size: 15px; }

/* <details> snaps. Where the browser can interpolate to auto, the
   answer is given a real height transition; everywhere else the
   keyframe below still eases the text in, so nobody sees a hard cut. */
@supports (interpolate-size: allow-keywords) {
  :root { interpolate-size: allow-keywords; }
  .qa::details-content {
    block-size: 0; overflow: hidden;
    transition: block-size .34s cubic-bezier(.3, .8, .35, 1), content-visibility .34s allow-discrete;
  }
  .qa[open]::details-content { block-size: auto; }
}
.qa[open] .qa-body { animation: qa-open .34s cubic-bezier(.3, .8, .35, 1) both; }
@keyframes qa-open { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* The open row lifts out of the list a little. */
.qa { transition: background .25s ease, padding-left .25s ease; }
.qa[open] { background: var(--page-2); padding-left: 14px; }
.qa summary { transition: color .18s ease; }
.qa summary:hover { color: var(--accent-deep); }
.qa summary:hover .chev { color: var(--accent-deep); }

/* A light runs down the list, one question after another, so a
   closed accordion still looks like something waiting to be opened.
   Text only — an edge bar reads as one continuous rule when the
   rows sit this close together. It stops for good the moment anyone
   opens a row; an idle hint that keeps pulsing is just noise. */
.faq-list .qa:nth-child(1) { --gd: 0.00s; }
.faq-list .qa:nth-child(2) { --gd: 0.34s; }
.faq-list .qa:nth-child(3) { --gd: 0.68s; }
.faq-list .qa:nth-child(4) { --gd: 1.02s; }
.faq-list .qa:nth-child(5) { --gd: 1.36s; }
.faq-list .qa:nth-child(6) { --gd: 1.70s; }
.faq-list .qa:nth-child(7) { --gd: 2.04s; }
.faq-list .qa:nth-child(8) { --gd: 2.38s; }
.faq-list .qa:nth-child(9) { --gd: 2.72s; }
.faq-list.is-live .qa:not([open]) > summary {
  animation: qa-lit 5s ease-in-out var(--gd) infinite;
}
@keyframes qa-lit {
  0%, 100% { color: var(--ink); }
  7%, 19%  { color: var(--accent-deep); }
  30%      { color: var(--ink); }
}

/* Rows arrive with the scroll, the same way the schedule table does. */
.faq-list.is-reveal .qa { opacity: 0; }
.faq-list.is-reveal .qa.is-in { animation: qa-in .5s cubic-bezier(.2, .8, .3, 1) both; }
@keyframes qa-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .qa[open] .qa-body, .faq-list.is-reveal .qa.is-in { animation: none; }
  .faq-list.is-live .qa:not([open]) > summary { animation: none; }
  .qa::details-content { transition: none; }
  .faq-list.is-reveal .qa { opacity: 1; }
}


/* ---------------- 13 · closing cta ---------------- */
.cta { position: relative; overflow: hidden; background: var(--dark-alt); padding: 92px 0; }
.cta-glow {
  position: absolute; right: -60px; top: 50%; width: 400px; height: 256px;
  margin-top: -128px; color: var(--accent-on-dark); opacity: .14; pointer-events: none;
}
.cta-inner { position: relative; text-align: center; }
.cta .h2 { color: var(--on-dark); font-size: clamp(32px, 4.1vw, 52px); margin-top: 0; }
.cta > .wrap > p { font-size: 17.5px; color: var(--on-dark-2); max-width: 540px; margin: 0 auto 36px; }
.cta-alt {
  margin: 20px 0 0; font-size: 14.5px; color: var(--on-dark-3);
}
.cta-alt a { color: var(--accent-on-dark); text-decoration: underline; text-underline-offset: 3px; }
.cta-alt a:hover { color: var(--on-dark); }

.cta-btns { display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; }
.cta-btns .btn { height: 54px; }

/* ---------------- footer ----------------
   No navigation. The page already links to everything above; a
   footer sitemap on a one-page site is just the same links again.
   What is left is what only belongs here: scope, standing, and the
   two legal pages. */
.foot { background: var(--dark); border-top: 3px solid var(--accent); padding: 52px 0 44px; }
.foot-inner { display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; }
.foot-scope {
  font-size: 12.5px; line-height: 1.7; color: var(--on-dark-3);
  /* narrower than the 88ch it ran to when left-aligned: centred text
     needs a shorter measure or the ragged edges read as untidy */
  max-width: 74ch;
}
.foot-links {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 26px;
  margin-top: 8px; padding-top: 20px; border-top: 1px solid var(--on-dark-rule);
  /* the rule should span the block, not just the links it sits over */
  width: 100%;
}
.foot-links a {
  font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: var(--on-dark-2); border: 0;
}
.foot-links a:hover { color: var(--accent-on-dark); }
.foot-copy {
  font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--on-dark-3); font-variant-numeric: tabular-nums;
}

/* mobile bar */
.mbar { display: none; }

/* ---------------- responsive ---------------- */
@media (max-width: 1080px) {
  .hero-grid { grid-template-columns: 1fr; gap: 48px; }
  .calc-shell { max-width: 520px; }
  .hero-art { display: none; }
  .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 860px) {
  .head-nav {
    position: absolute; top: 72px; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--dark); border-bottom: 1px solid var(--accent);
    padding: 4px 24px 20px; display: none;
  }
  .head-nav.is-open { display: flex; }
  .head-nav > a { padding: 14px 0; border-bottom: 1px solid var(--on-dark-rule); font-size: 15px; }
  .head-phone { margin-top: 16px; justify-content: center; height: 48px; }
  .nav-toggle { display: block; }

  .hero { padding: 44px 0 60px; }
  /* All three across. A third of a phone is about 110px, so the
     figures come well down and the columns carry only the padding
     they need. */
  .hero-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; align-items: start; }
  .hero-stats > div { padding: 16px 7px 14px 0; column-gap: 6px; }
  .hero-stats > div + div { border-left: 1px solid var(--on-dark-rule); border-top: 0; padding-left: 7px; }
  .stat { font-size: 19px; letter-spacing: -.03em; }
  .stat-unit { font-size: 10.5px; letter-spacing: .02em; }
  .stat-label { font-size: 10px; line-height: 1.35; margin-top: 6px; }
  .sec { padding: 60px 0; }
  .cta { padding: 58px 0; }
  .grid-3, .grid-2, .formulas { grid-template-columns: 1fr; }
  .strip-inner { justify-content: flex-start; gap: 6px 24px; }
  .mbar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
    display: flex; gap: 10px;
    background: var(--page); border-top: 1px solid var(--dark);
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  }
  .mbar .btn { height: 48px; }
  .mbar-calc { width: 56px; }
  body { padding-bottom: 78px; }
  .foot { padding-bottom: 24px; }
}

@media (max-width: 560px) {
  .wrap { width: calc(100% - 32px); }
  .cta { padding: 48px 0; }
  .sec { padding: 52px 0; }
  .calc { padding: 22px 18px; }
  .grid-4, .steps { grid-template-columns: 1fr; }
  .cta-btns .btn { width: 100%; }
  .btn-wide { min-width: 0; }
  .qa summary { font-size: 15.5px; gap: 16px; }
  .qa-body { padding-right: 0; }
  .card-pad { padding: 24px; }
  .cmp thead th, .cmp tbody th, .cmp tbody td { padding: 16px 18px; }

  /* A comparison you have to swipe is a comparison nobody makes. */
  .table-scroll { overflow-x: visible; border: 0; }
  .cmp, .cmp tbody, .cmp tr, .cmp th, .cmp td { display: block; width: auto; min-width: 0; }
  .cmp thead { display: none; }
  .cmp.is-reveal thead tr { opacity: 1; }   /* hidden anyway; never animate it */
  .cmp tbody tr { border: 1px solid var(--rule); border-radius: var(--r); margin-bottom: 14px; background: var(--page); }
  .cmp tbody tr:nth-child(even) { background: var(--page); }
  .cmp tbody th { padding: 14px 16px 6px; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); border: 0; }
  .cmp tbody td { padding: 0 16px 12px; border: 0; border-top: 0; }
  .cmp tbody td::before { content: attr(data-col); display: block; font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--accent-deep); margin-bottom: 3px; }
  .cmp tbody tr + tr th, .cmp tbody tr + tr td { border-top: 0; }
}

/* A third of a 320px screen leaves 75px of column, which the widest
   figure will not clear at 21px. */
/* The widest figure and its unit no longer clear a third of the
   width. All three units drop under their figure together, so the
   columns keep the same shape instead of one wrapping and two not. */
@media (max-width: 430px) {
  .stat-unit { flex-basis: 100%; margin-top: 4px; font-size: 11px; }
  .stat { font-size: 21px; }
  .stat-label { font-size: 10.5px; margin-top: 4px; }
}

@media (max-width: 380px) {
  .hero-stats > div { padding-right: 5px; }
  .hero-stats > div + div { padding-left: 5px; }
  .stat { font-size: 19px; }
  .stat-unit { font-size: 10px; }
  .stat-label { font-size: 9.5px; }
}