/* ==========================================================================
   LEGAL — waiver.html + terms.html

   These two pages are where a stranger decides whether we are careful people.
   So: document typography, hairlines, mono section numbers, nothing decorative.
   The waiver is a safety document first and a legal document second, and it is
   laid out in that order.
   ========================================================================== */

[hidden] { display: none !important; }
/* --------------------------------------------------------------------------
   HERO — compact, dark, same family as the rest of the site.
   -------------------------------------------------------------------------- */
.legal-hero {
  padding-block: clamp(2.25rem, 1rem + 5vw, 4.25rem) clamp(2.5rem, 1rem + 5.5vw, 4.5rem);
  background:
    radial-gradient(70% 110% at 6% -18%, color-mix(in srgb, var(--ink-700) 90%, var(--signal)) 0%, transparent 62%),
    url('../../img/pattern-grid.svg') 0 0 / 80px 80px repeat,
    var(--ink-900);
}
.legal-hero__inner { display: grid; gap: var(--s-7); align-items: start; }
@media (min-width: 62em) {
  .legal-hero__inner { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: var(--s-9); }
}
.legal-hero__lede { min-width: 0; }
.legal-hero h1 {
  margin-top: var(--s-3);
  font-size: clamp(2.4rem, 1.35rem + 4.1vw, 4.25rem);
  line-height: 0.94;
}
.legal-hero .lead { margin-top: var(--s-5); max-width: 50ch; }

/* Mono fact strip under the hero copy — three verifiable operational facts. */
.legal-facts {
  margin-top: var(--s-6); display: grid; gap: var(--s-4);
  border-top: 1px solid var(--rule); padding-top: var(--s-5);
}
@media (min-width: 34em) { .legal-facts { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-5); } }
.legal-facts li { display: grid; gap: 0.25rem; align-content: start; }
.legal-facts b {
  font-family: var(--font-mono); font-size: 1.0625rem; font-weight: 600;
  color: var(--signal); letter-spacing: -0.02em;
}
.legal-facts span { font-size: var(--t-xs); color: var(--fg-muted); line-height: 1.45; }

/* Ticket showing which booking a helper is signing for. */
.legal-ticket {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3);
  margin-bottom: var(--s-4); padding: 0.6875rem 0.9375rem;
  border: 1px solid var(--rule); border-left: 3px solid var(--signal);
  border-radius: var(--r-sm); background: rgba(255,255,255,.04);
  font-size: var(--t-sm); color: var(--fg-muted);
}
.legal-ticket strong { color: var(--fg); font-weight: 600; }
.legal-ticket .num { color: var(--signal); font-weight: 600; letter-spacing: 0.04em; }

/* The hero-side index — a shop clipboard, not a nav widget. */
.legal-index { border: 1px solid var(--rule); border-radius: var(--r-md); background: rgba(255,255,255,.03); }
.legal-index h2 {
  font-family: var(--font-mono); font-size: var(--t-micro); font-weight: 600;
  letter-spacing: var(--tr-label); text-transform: none;
  color: var(--fg-muted); padding: var(--s-4) var(--s-5); border-bottom: 1px solid var(--rule);
}
.legal-index ol { display: grid; }
.legal-index a {
  display: grid; grid-template-columns: 2.5rem 1fr auto; align-items: center; gap: var(--s-3);
  padding: 0.875rem var(--s-5); min-height: 48px;
  border-bottom: 1px solid var(--rule); color: var(--fg);
  font-size: var(--t-sm); font-weight: 550;
  transition: background-color var(--fast) var(--ease), color var(--fast) var(--ease);
}
.legal-index li:last-child a { border-bottom: 0; }
.legal-index a:hover { background: rgba(255,255,255,.06); color: var(--paper); }
.legal-index a > .num { color: var(--fg-muted); font-size: var(--t-xs); }
.legal-index a:hover > .num { color: var(--signal); }
.legal-index svg { color: var(--fg-muted); }
.legal-index a:hover svg { color: var(--signal); }

.legal-hero__side { display: grid; gap: var(--s-4); align-content: start; min-width: 0; }

/* Small companion note under the index — answers the question a lot of people
   land on these pages already asking. */
.legal-note {
  display: grid; grid-template-columns: auto 1fr; gap: var(--s-3) var(--s-4);
  padding: var(--s-5); border: 1px solid var(--rule); border-radius: var(--r-md);
  background: rgba(255,255,255,.02);
}
.legal-note > span { color: var(--signal); }
.legal-note strong { display: block; font-weight: 650; color: var(--fg); font-size: var(--t-sm); }
.legal-note p { margin-top: 0.375rem; font-size: var(--t-xs); line-height: 1.55; color: var(--fg-muted); }
.legal-note .ilink { margin-top: 0.25rem; font-size: var(--t-xs); }

.legal-hero__acts { margin-top: var(--s-6); display: flex; flex-wrap: wrap; gap: var(--s-3); }
@media (max-width: 33.99em) { .legal-hero__acts .btn { width: 100%; } }

/* --------------------------------------------------------------------------
   THE ATTORNEY-REVIEW BANNER
   Unmissable by design. This document is not law yet and must never pretend.
   -------------------------------------------------------------------------- */
.legal-alert {
  background: var(--warn-wash);
  border-block: 1px solid color-mix(in srgb, var(--warn) 42%, transparent);
}
.legal-alert__inner {
  display: grid; grid-template-columns: auto 1fr; gap: var(--s-4);
  padding-block: var(--s-5);
  color: #5A3403;
}
.legal-alert__mark {
  width: 40px; height: 40px; border-radius: var(--r-sm); flex: none;
  display: grid; place-items: center;
  background: var(--warn); color: var(--paper);
}
.legal-alert__mark svg { width: 24px; height: 24px; }
.legal-alert h2 {
  font-size: 1.1875rem; line-height: 1.1; color: #4A2B02;
  font-family: var(--font-display); letter-spacing: var(--tr-display);
}
.legal-alert p { margin-top: 0.375rem; font-size: var(--t-sm); line-height: 1.55; max-width: 74ch; }
.legal-alert .num { font-weight: 600; }
.legal-alert__tag {
  display: inline-block; margin-top: var(--s-3);
  font-family: var(--font-mono); font-size: var(--t-micro); font-weight: 600;
  letter-spacing: var(--tr-label); text-transform: uppercase;
  padding: 0.3125rem 0.625rem; border-radius: var(--r-xs);
  background: var(--warn); color: var(--paper);
}

/* --------------------------------------------------------------------------
   DOCUMENT LAYOUT — sticky rail on desktop, plain scroll on phones.
   -------------------------------------------------------------------------- */
.legal-body { padding-block: var(--section-y); }
.legal-layout { display: grid; gap: var(--s-7); align-items: start; }
@media (min-width: 64em) {
  .legal-layout { grid-template-columns: 16.5rem minmax(0, 1fr); gap: var(--s-9); }
}
.legal-doc { min-width: 0; }

.legal-toc { display: none; }
@media (min-width: 64em) {
  .legal-toc {
    display: block; position: sticky; top: calc(var(--header-h) + var(--s-5));
    max-height: calc(100vh - var(--header-h) - var(--s-8)); overflow-y: auto;
    border-left: 1px solid var(--rule); padding-left: var(--s-5);
  }
}
.legal-toc h2 {
  font-family: var(--font-mono); font-size: var(--t-micro); font-weight: 600;
  letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--fg-muted);
  margin-bottom: var(--s-3);
}
.legal-toc ol { counter-reset: toc; display: grid; }
.legal-toc ol a {
  display: grid; grid-template-columns: 2rem 1fr; gap: 0.5rem; align-items: baseline;
  padding: 0.625rem 0; min-height: 44px;
  font-size: var(--t-sm); line-height: 1.35; color: var(--fg-muted);
  transition: color var(--fast) var(--ease);
}
.legal-toc ol a::before {
  counter-increment: toc; content: counter(toc, decimal-leading-zero);
  font-family: var(--font-mono); font-size: var(--t-xs); color: var(--fg-muted);
  font-variant-numeric: tabular-nums;
}
.legal-toc ol a:hover { color: var(--fg); }
.legal-toc ol a.is-active { color: var(--fg); font-weight: 650; }
.legal-toc ol a.is-active::before { color: var(--signal-deep); }
.legal-toc__foot { margin-top: var(--s-5); padding-top: var(--s-4); border-top: 1px solid var(--rule); }

/* --------------------------------------------------------------------------
   DOCUMENT TYPOGRAPHY — the readable core of both pages.
   -------------------------------------------------------------------------- */
.doc { counter-reset: sec; max-width: 74ch; }
.doc__sec { counter-increment: sec; counter-reset: clause; scroll-margin-top: calc(var(--header-h) + 1.5rem); }
.doc__sec + .doc__sec { margin-top: var(--s-8); padding-top: var(--s-7); border-top: 1px solid var(--rule); }
.doc__sec > * + * { margin-top: var(--s-4); }
.doc p, .doc li { font-size: var(--t-body); line-height: 1.68; color: var(--fg-muted); }
.doc p strong, .doc li strong { color: var(--fg); font-weight: 650; }
.doc h3 {
  font-size: 1.0625rem; letter-spacing: 0.01em; color: var(--fg);
  margin-top: var(--s-6);
}

/* Section heading — the number is generated, so it can never drift. */
.doc .doc__h {
  display: grid; grid-template-columns: 3rem 1fr; gap: var(--s-3); align-items: baseline;
  font-size: clamp(1.35rem, 1.15rem + 0.7vw, 1.75rem); line-height: 1.1;
  margin-top: 0; color: var(--fg);
}
.doc .doc__h::before {
  content: counter(sec, decimal-leading-zero);
  font-family: var(--font-mono); font-size: var(--t-sm); font-weight: 600;
  letter-spacing: 0; color: var(--signal-deep); font-variant-numeric: tabular-nums;
  text-transform: none;
}

/* .ilink moved to components.css — the home page uses it too, and it was
   invisible there because index.html does not load this stylesheet. */

/* Numbered clauses — "4.2" style, generated so nothing can drift.
   Deliberately NOT a grid: these list items carry inline links and spans, and
   every inline child of a grid container becomes its own grid item. */
.doc__ol { display: grid; gap: var(--s-4); }
.doc__ol > li { position: relative; padding-left: 3.25rem; }
.doc__ol > li::before {
  counter-increment: clause; content: counter(sec) "." counter(clause);
  position: absolute; left: 0; top: 0.28em;
  font-family: var(--font-mono); font-size: var(--t-xs); font-weight: 600;
  color: var(--fg-muted); font-variant-numeric: tabular-nums;
}
@media (max-width: 33.99em) {
  .doc .doc__h { grid-template-columns: 2.5rem 1fr; gap: var(--s-2); }
  .doc__ol > li { padding-left: 2.75rem; }
}

/* Plain bullets inside a clause. */
.doc__bullets { display: grid; gap: 0.5rem; margin-top: var(--s-3); }
.doc__bullets li { position: relative; padding-left: 1.125rem; font-size: var(--t-sm); }
.doc__bullets li::before {
  content: ''; position: absolute; left: 0; top: 0.85em;
  width: 7px; height: 1px; background: var(--rule-strong);
}

/* A definition strip — the numbers that must be exactly right, pulled from config. */
.doc__facts {
  margin-top: var(--s-4); border: 1px solid var(--rule); border-radius: var(--r-md);
  background: var(--bg-sunk); overflow: hidden;
}
.doc__facts div {
  display: grid; grid-template-columns: 1fr auto; gap: var(--s-4); align-items: baseline;
  padding: 0.75rem var(--s-4); border-bottom: 1px solid var(--rule); font-size: var(--t-sm);
}
.doc__facts div:last-child { border-bottom: 0; }
.doc__facts dt { color: var(--fg-muted); }
.doc__facts dd { font-family: var(--font-mono); font-weight: 600; color: var(--fg); text-align: right; }

/* Part divider — "PART TWO — PRIVACY". */
.doc__part {
  margin-top: var(--s-9); padding-top: var(--s-7); border-top: 2px solid var(--ink-800);
  scroll-margin-top: calc(var(--header-h) + 1.5rem);
}
.doc__part .eyebrow { margin-bottom: var(--s-3); }
.doc__part h2 { font-size: clamp(1.85rem, 1.3rem + 2.2vw, 2.75rem); line-height: 1; }
.doc__part p { margin-top: var(--s-4); max-width: 62ch; }

/* Contact block that closes the terms. */
.doc__contact {
  margin-top: var(--s-4); display: grid; gap: var(--s-4);
  border: 1px solid var(--rule); border-radius: var(--r-md); background: var(--bg-raised); padding: var(--s-5);
}
@media (min-width: 40em) { .doc__contact { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.doc__contact h3 {
  margin: 0; font-family: var(--font-mono); font-size: var(--t-micro); font-weight: 600;
  letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--fg-muted);
}
.doc__contact a, .doc__contact address {
  display: block; margin-top: 0.375rem; font-style: normal;
  font-size: var(--t-sm); font-weight: 600; color: var(--fg); line-height: 1.5;
}
.doc__contact a { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--rule-strong); padding-block: 0.4375rem; }
.doc__contact a:hover { text-decoration-color: var(--signal-deep); }

.doc__updated {
  display: inline-flex; align-items: center; gap: 0.5rem; flex-wrap: wrap;
  font-family: var(--font-mono); font-size: var(--t-xs); color: var(--fg-muted);
}
.doc--contact {
  margin-top: var(--s-9); padding-top: var(--s-7); border-top: 2px solid var(--ink-800);
  scroll-margin-top: calc(var(--header-h) + 1.5rem);
}
.doc--contact > div > * + * { margin-top: var(--s-4); }

/* Something the owner must supply before launch. Never dressed up as done. */
.placeholder-note {
  display: inline-block; margin-left: 0.25rem;
  font-family: var(--font-mono); font-size: var(--t-xs); font-weight: 600;
  color: #6E3F04; background: var(--warn-wash);
  border: 1px dashed color-mix(in srgb, var(--warn) 45%, transparent);
  border-radius: var(--r-xs); padding: 0.0625rem 0.4375rem;
}

/* ==========================================================================
   WAIVER-ONLY
   ========================================================================== */

/* --- 01 the briefing ----------------------------------------------------- */
.wv-brief { padding-block: var(--section-y); }
.wv-brief__grid { display: grid; gap: var(--s-7); }
@media (min-width: 64em) {
  .wv-brief__grid { grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.28fr); gap: var(--s-9); }
}
.wv-art { min-width: 0; }
.wv-art__head { margin-bottom: var(--s-6); }
.wv-art__head > * + * { margin-top: var(--s-3); }
.wv-art__head .lead { margin-top: var(--s-4); }
/* The art tracks you down the rules on desktop; the grid item stretches so
   a sticky child has room to travel. */
@media (min-width: 64em) {
  .wv-art figure { position: sticky; top: calc(var(--header-h) + var(--s-5)); }
}
.wv-art figure { border: 1px solid var(--rule); border-radius: var(--r-md); overflow: hidden; background: var(--ink-800); }
.wv-art img { width: 100%; }
.wv-art figcaption {
  padding: var(--s-4); font-size: var(--t-xs); line-height: 1.5;
  color: var(--steel-300); border-top: 1px solid var(--ink-500);
}
.wv-art figcaption b { display: block; color: var(--paper); font-weight: 650; margin-bottom: 2px; }

.wv-rules { display: grid; gap: 0; border-top: 1px solid var(--rule); }
.wv-rule {
  display: grid; grid-template-columns: 2.75rem 1fr; gap: var(--s-3) var(--s-4);
  padding: var(--s-5) 0; border-bottom: 1px solid var(--rule);
}
@media (min-width: 40em) { .wv-rule { grid-template-columns: 3.25rem 1fr; } }
.wv-rule__n {
  font-family: var(--font-mono); font-size: var(--t-sm); font-weight: 600;
  color: var(--fg-muted); font-variant-numeric: tabular-nums; padding-top: 0.15rem;
}
.wv-rule h3 { font-size: 1.1875rem; line-height: 1.14; }
.wv-rule p { margin-top: 0.5rem; font-size: var(--t-sm); line-height: 1.62; color: var(--fg-muted); }
.wv-rule--critical .wv-rule__n { color: var(--stop); }
.wv-tag {
  display: inline-flex; align-items: center; gap: 0.375rem; margin-left: 0.5rem;
  vertical-align: 0.15em;
  padding: 0.1875rem 0.5rem; border-radius: var(--r-xs);
  font-family: var(--font-mono); font-size: var(--t-micro); font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  background: var(--stop-wash); color: #7C231C; border: 1px solid color-mix(in srgb, var(--stop) 32%, transparent);
}

.wv-brief__after { margin-top: var(--s-6); display: grid; gap: var(--s-4); }

/* The acknowledgement that unlocks the signature block. */
.wv-gate {
  margin-top: var(--s-6); border: 1.5px solid var(--ink-800); border-radius: var(--r-md);
  background: var(--bg-raised); overflow: hidden;
}
.wv-gate__head {
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-4) var(--s-5); background: var(--ink-800); color: var(--paper);
}
.wv-gate__head svg { flex: none; color: var(--signal); }
.wv-gate__head h3 { font-size: 1.0625rem; color: var(--paper); letter-spacing: 0.01em; }
.wv-gate__body { padding: var(--s-5); display: grid; gap: var(--s-4); }
.wv-gate .choice { padding: var(--s-4); }

/* --- 02 the video slot --------------------------------------------------- */
.wv-video { padding-block: var(--section-y); }
.wv-video__grid { display: grid; gap: var(--s-6); align-items: center; }
@media (min-width: 62em) { .wv-video__grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: var(--s-8); } }

.wv-player {
  position: relative; aspect-ratio: 16 / 9; border-radius: var(--r-md);
  border: 1.5px dashed var(--rule-strong);
  background: url('../../img/pattern-grid.svg') 0 0 / 60px 60px repeat, var(--ink-800);
  display: grid; place-items: center; text-align: center; padding: var(--s-5);
  overflow: hidden;
}
.wv-player::after {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(70% 90% at 50% 40%, rgba(255,255,255,.06), transparent 70%);
  pointer-events: none;
}
.wv-player__plate { position: relative; z-index: 1; display: grid; justify-items: center; gap: var(--s-3); max-width: 34ch; }
.wv-player__frame {
  width: 62px; height: 62px; border-radius: 50%;
  border: 2px dashed var(--steel-500); display: grid; place-items: center; color: var(--steel-300);
}
.wv-player__frame svg { width: 26px; height: 26px; }
.wv-player__label {
  font-family: var(--font-display); font-weight: 800; text-transform: uppercase;
  letter-spacing: 0.02em; font-size: 1.25rem; color: var(--paper); line-height: 1.05;
}
.wv-player__note { font-size: var(--t-xs); line-height: 1.5; color: var(--steel-300); }
.wv-player__path {
  max-width: 100%; padding: 0.25rem 0.5rem; border-radius: var(--r-xs);
  background: rgba(255,255,255,.05);
  font-family: var(--font-mono); font-size: var(--t-micro); letter-spacing: 0.04em;
  color: var(--steel-300); overflow-wrap: break-word;
}
.wv-player__badge {
  position: absolute; top: var(--s-4); left: var(--s-4); z-index: 1;
  font-family: var(--font-mono); font-size: var(--t-micro); font-weight: 600;
  letter-spacing: var(--tr-label); text-transform: uppercase;
  padding: 0.3125rem 0.625rem; border-radius: var(--r-xs);
  background: var(--warn); color: var(--paper);
}
.wv-video__copy h2 { font-size: clamp(1.6rem, 1.25rem + 1.4vw, 2.25rem); }
.wv-video__copy p { margin-top: var(--s-4); color: var(--fg-muted); max-width: 52ch; }
.wv-video__list { margin-top: var(--s-5); display: grid; gap: 0.625rem; }
.wv-video__list li { display: grid; grid-template-columns: auto 1fr; gap: 0.625rem; align-items: baseline; font-size: var(--t-sm); color: var(--fg-muted); }
.wv-video__list li::before { content: ''; width: 8px; height: 1px; background: var(--signal-deep); transform: translateY(-0.35em); }

/* --- 03 the waiver text -------------------------------------------------- */
.wv-text { padding-block: var(--section-y); }
.wv-text__grid { display: grid; gap: var(--s-6); align-items: start; }
@media (min-width: 66em) {
  .wv-text__grid { grid-template-columns: minmax(0, 0.66fr) minmax(0, 1fr); gap: var(--s-8); }
  .wv-text__lede { position: sticky; top: calc(var(--header-h) + var(--s-5)); }
}
.wv-text__lede > * + * { margin-top: var(--s-3); }
.wv-text__lede .lead { margin-top: var(--s-4); }
.wv-scroll {
  margin-top: 0;
  border: 1.5px solid var(--rule-strong); border-radius: var(--r-md);
  background: var(--bg-raised); overflow: hidden;
}
.wv-scroll__bar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-3);
  padding: 0.75rem var(--s-4); border-bottom: 1px solid var(--rule); background: var(--bg-sunk);
}
.wv-scroll__title {
  font-family: var(--font-mono); font-size: var(--t-micro); font-weight: 600;
  letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--fg-muted);
}
.wv-scroll__body {
  max-height: 30rem; overflow-y: auto; padding: var(--s-5) var(--s-5) var(--s-6);
  scrollbar-width: thin;
}
@media (min-width: 62em) { .wv-scroll__body { max-height: 34rem; padding-inline: var(--s-6); } }
.wv-scroll__body:focus-visible { outline-offset: -3px; }
.wv-scroll__body .doc { max-width: none; }
.wv-scroll__body .doc__sec + .doc__sec { margin-top: var(--s-6); padding-top: var(--s-5); }
.wv-scroll__body .doc .doc__h { font-size: 1.0625rem; grid-template-columns: 2.5rem 1fr; }
.wv-scroll__body .doc p, .wv-scroll__body .doc li { font-size: var(--t-sm); }
.wv-scroll__end {
  margin-top: var(--s-6); padding-top: var(--s-4); border-top: 1px solid var(--rule);
  font-family: var(--font-mono); font-size: var(--t-micro); letter-spacing: var(--tr-label);
  text-transform: uppercase; color: var(--fg-muted);
}
/* Make it obvious the panel scrolls: a fade off the last line, then a rail. */
.wv-scroll__foot {
  position: relative; display: flex; align-items: center; gap: var(--s-3);
  padding: 0.75rem var(--s-4); border-top: 1px solid var(--rule); background: var(--bg-sunk);
  font-size: var(--t-xs); color: var(--fg-muted);
}
.wv-scroll__foot::before {
  content: ''; position: absolute; left: 0; right: 0; bottom: 100%; height: 3.5rem;
  background: linear-gradient(to top, var(--bg-raised), transparent);
  pointer-events: none;
}
.wv-scroll__foot svg { flex: none; color: var(--signal-deep); }

/* --- 04 signing ---------------------------------------------------------- */
.wv-sign { padding-block: var(--section-y); background: var(--paper-sunk); }
.wv-sign__grid { display: grid; gap: var(--s-6); align-items: start; }
@media (min-width: 64em) { .wv-sign__grid { grid-template-columns: minmax(0, 1fr) 20rem; gap: var(--s-8); } }
.wv-sign__main { min-width: 0; }
.wv-sign__main .section-head { margin-bottom: var(--s-6); }
@media (min-width: 64em) { .wv-aside { position: sticky; top: calc(var(--header-h) + var(--s-5)); } }

.wv-card {
  border: 1px solid var(--rule); border-radius: var(--r-lg);
  background: var(--bg-raised); box-shadow: var(--e-1); overflow: hidden;
}
.wv-card__head {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-3);
  padding: var(--s-5); border-bottom: 1px solid var(--rule);
}
.wv-card__head h3 { font-size: 1.25rem; }
.wv-card__body { padding: var(--s-5); }
@media (min-width: 40em) { .wv-card__head, .wv-card__body { padding-inline: var(--s-6); } }

/* Fields laid out by a grid manage their own gaps — kill the stacked rhythm. */
.wv-card .field-row .field + .field,
.wv-sigrow .field + .field { margin-top: 0; }

.wv-fieldset { border: 0; padding: 0; margin: 0; }
.wv-fieldset + .wv-fieldset { margin-top: var(--s-7); padding-top: var(--s-6); border-top: 1px solid var(--rule); }
.wv-legend {
  display: flex; align-items: center; gap: var(--s-3); margin-bottom: var(--s-4); padding: 0;
  font-family: var(--font-mono); font-size: var(--t-micro); font-weight: 600;
  letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--fg-muted);
}
.wv-legend::after { content: ''; height: 1px; flex: 1; background: var(--rule); }

/* One acknowledgement per line — never a single blanket tick. */
.wv-acks { display: grid; gap: var(--s-3); }
.wv-ack { display: grid; grid-template-columns: auto 1fr; gap: var(--s-4); align-items: start; padding: var(--s-4); }
.wv-ack .choice__check { margin-top: 1px; }
.wv-ack__txt { font-size: var(--t-sm); line-height: 1.55; color: var(--fg); }
.wv-ack__txt b { font-weight: 650; }
.wv-ack__opt {
  display: block; margin-top: 0.25rem;
  font-family: var(--font-mono); font-size: var(--t-micro); letter-spacing: var(--tr-label);
  text-transform: uppercase; color: var(--fg-muted);
}
.wv-ack.is-invalid { border-color: var(--stop); background: color-mix(in srgb, var(--stop-wash) 55%, var(--bg-raised)); }

.wv-sigrow { display: grid; gap: var(--s-4); }
@media (min-width: 40em) { .wv-sigrow { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); } }
.wv-siginput {
  font-family: 'Barlow Condensed', var(--font-display);
  font-size: 1.75rem; font-weight: 600; letter-spacing: 0.01em;
  padding-block: 0.6875rem;
}
.wv-sigline {
  margin-top: 0.5rem; display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-3);
  font-family: var(--font-mono); font-size: var(--t-micro); letter-spacing: var(--tr-label);
  text-transform: uppercase; color: var(--fg-muted);
}

.wv-submit { margin-top: var(--s-6); display: grid; gap: var(--s-4); }
.wv-submit .btn { width: 100%; }
@media (min-width: 40em) { .wv-submit .btn { width: auto; justify-self: start; } }

/* Locked state — the form is inert until the briefing is acknowledged. */
.wv-locked .wv-card__body { position: relative; }
.wv-lock {
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-4) var(--s-5); border-bottom: 1px solid var(--rule);
  background: var(--bg-sunk); font-size: var(--t-sm); color: var(--fg-muted);
}
.wv-lock svg { flex: none; color: var(--fg-subtle); }
.wv-lock a {
  display: inline-flex; align-items: center; min-height: 44px;
  font-weight: 650; color: var(--fg); text-decoration: underline; text-underline-offset: 3px;
}
.wv-card:not(.wv-locked) .wv-lock { display: none; }
.wv-locked .wv-card__body { opacity: .5; filter: grayscale(.6); pointer-events: none; user-select: none; }

/* Side rail beside the form. */
.wv-aside { display: grid; gap: var(--s-4); }
.wv-aside__card { border: 1px solid var(--rule); border-radius: var(--r-md); background: var(--bg-sunk); padding: var(--s-5); }
.wv-aside__card h3 { font-size: 1.0625rem; letter-spacing: 0.01em; }
.wv-aside__card p { margin-top: var(--s-3); font-size: var(--t-sm); line-height: 1.6; color: var(--fg-muted); }
.wv-aside__card .btn { margin-top: var(--s-4); width: 100%; }
.wv-aside__list { margin-top: var(--s-4); display: grid; gap: 0.625rem; }
.wv-aside__list li { display: grid; grid-template-columns: auto 1fr; gap: 0.625rem; align-items: start; font-size: var(--t-sm); color: var(--fg-muted); }
.wv-aside__list svg { color: var(--signal-deep); margin-top: 3px; }

/* --- success ------------------------------------------------------------- */
.wv-done { padding-block: var(--section-y); }
.wv-done__card {
  border: 1px solid color-mix(in srgb, var(--go) 30%, transparent);
  background: var(--go-wash); border-radius: var(--r-lg); padding: var(--s-6);
  display: grid; gap: var(--s-5);
}
@media (min-width: 46em) { .wv-done__card { padding: var(--s-8); } }
.wv-done__mark {
  width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center;
  background: var(--go); color: #fff;
}
.wv-done__card h1 { font-size: clamp(2rem, 1.4rem + 2.6vw, 3rem); line-height: 1; color: #0D4A28; }
.wv-done__card > p { color: #126034; max-width: 58ch; }
.wv-done__receipt {
  display: grid; gap: 0; border: 1px solid color-mix(in srgb, var(--go) 26%, transparent);
  border-radius: var(--r-md); background: var(--paper-raised); overflow: hidden;
}
.wv-done__receipt div {
  display: grid; grid-template-columns: 1fr auto; gap: var(--s-4); align-items: baseline;
  padding: 0.8125rem var(--s-4); border-bottom: 1px solid var(--rule); font-size: var(--t-sm);
}
.wv-done__receipt div:last-child { border-bottom: 0; }
.wv-done__receipt dt { color: var(--fg-muted); }
.wv-done__receipt dd { font-family: var(--font-mono); font-weight: 600; color: var(--fg); text-align: right; word-break: break-word; }
.wv-done__acts { display: flex; flex-wrap: wrap; gap: var(--s-3); }
@media (max-width: 33.99em) { .wv-done__acts .btn { width: 100%; } }

/* --------------------------------------------------------------------------
   FOOT — a calm close on both pages.
   -------------------------------------------------------------------------- */
.legal-foot { background: var(--ink-900); }
.legal-foot__inner {
  padding-block: var(--s-9); display: grid; gap: var(--s-6); align-items: center;
}
@media (min-width: 52em) { .legal-foot__inner { grid-template-columns: minmax(0, 1fr) auto; gap: var(--s-8); } }
.legal-foot h2 { font-size: clamp(1.6rem, 1.25rem + 1.4vw, 2.25rem); }
.legal-foot p { margin-top: var(--s-3); color: var(--steel-300); font-size: var(--t-sm); max-width: 56ch; }
.legal-foot__acts { display: flex; flex-wrap: wrap; gap: var(--s-3); }
@media (max-width: 33.99em) { .legal-foot__acts .btn { width: 100%; } }

/* Print: the reader wants the words, not the furniture. */
@media print {
  .legal-hero, .legal-toc, .legal-foot, .wv-aside, .wv-video, .legal-index { display: none !important; }
  .wv-scroll__body { max-height: none; overflow: visible; }
  .legal-alert { background: none; border: 2px solid #000; }
  .legal-body { padding-block: 0; }
}