/* CaseReader — brand site.
   Inns-of-Court bottle green, Portland stone and paper, with barrister's pink tape
   as the one accent. Libre Caslon (the English legal face) for display, Instrument Sans
   for reading and for every figure; Plex Mono only for file names and page counts. */

:root {
  --night: #0e2620;
  --night-2: #143229;
  --night-line: rgba(201, 168, 106, 0.28);
  --paper: #fbfaf6;
  --stone: #eceae4;
  --stone-2: #dfdcd3;
  --ink: #14201b;
  --ink-2: #4c5852;
  --ink-3: #5a6660;
  --rule: #d6d2c7;
  --green: #1e5b3f;
  --tape: #e8607a;
  --tape-ink: #a8344c;
  --brass: #c9a86a;
  --on-night: #f3f1ea;
  --on-night-2: #b7c4bd;
  --oxblood: #7a2e2a;
  --amber-bg: #f6ecd2;
  --amber-ink: #5c4300;
  --amber-rule: #b8860b;
  --hl-key: rgba(196, 70, 52, 0.22);
  --hl-check: rgba(222, 170, 60, 0.32);
  --hl-good: rgba(47, 122, 85, 0.22);

  --display: "Libre Caslon Display", "Libre Caslon Text", Georgia, serif;
  --serif: "Libre Caslon Text", Georgia, serif;
  --sans: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;

  --wrap: 1240px;
  --gut: clamp(16px, 4vw, 48px);
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  /* Display sizes, shared by every page: the landing hero, and the H1 of every other page. */
  --h1-hero: clamp(2.5rem, 4.4vw, 4.1rem);
  --h1-page: clamp(2.4rem, 5vw, 3.6rem);
  /* Section rhythm: supporting sections sit tighter than the hero and the Meter. */
  --sec-pad: clamp(44px, 6vw, 80px);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: auto; scroll-padding-top: 88px; }
html.smooth { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 17px/1.6 var(--sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; display: block; }
[hidden] { display: none !important; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
a:hover { text-decoration-color: var(--tape-ink); }
:focus-visible { outline: 2px solid var(--tape-ink); outline-offset: 3px; border-radius: 2px; }
.night :focus-visible, .top :focus-visible, .foot :focus-visible { outline-color: #f3f1ea; }
button { font: inherit; }
p { margin: 0 0 1em; }
h1, h2, h3, h4 { margin: 0; font-weight: 400; }

.skip { position: absolute; left: -9999px; top: 8px; z-index: 100; background: var(--paper); color: var(--ink); padding: 8px 14px; }
.skip:focus { left: 8px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gut); }

/* Mode-aware copy: site.js sets html[data-mode] from /api/config. Neutral copy has no data-when. */
[data-when] { display: none; }
html[data-mode="preview"] [data-when~="preview"],
html[data-mode="requests"] [data-when~="requests"],
html[data-mode="payable"] [data-when~="payable"] { display: revert; }
/* The conversation is described only when it is switched on (html[data-chat=on]). */
[data-if-chat] { display: none; }
html[data-chat="on"] [data-if-chat] { display: revert; }

/* ---------- type ---------- */
.display { font-family: var(--display); font-weight: 400; letter-spacing: -0.012em; line-height: 1.02; }
.h2 { font: 400 clamp(2rem, 4.2vw, 3.4rem)/1.06 var(--display); letter-spacing: -0.01em; max-width: 18ch; text-wrap: balance; }
.h2 em, .display em { font-family: var(--serif); font-style: italic; letter-spacing: -0.02em; }
.lede { font-size: clamp(1.06rem, 1.5vw, 1.2rem); line-height: 1.6; color: var(--ink-2); max-width: 58ch; }
.night .lede { color: var(--on-night-2); }
.plate { font: italic 400 0.92rem/1.5 var(--serif); color: var(--ink-3); }
.plate b { font-style: normal; font-weight: 400; font-family: var(--sans); font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; margin-right: 0.6em; color: var(--ink-2); }
.kicker { font: 500 0.78rem/1.3 var(--sans); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-2); margin-bottom: 18px; display: block; }
.night .kicker { color: var(--brass); }
.hero .kicker { text-wrap: balance; }
/* Every price and fee figure: Instrument Sans 600, tabular lining figures. */
.fig, [data-price], [data-quote], .figure { font-family: var(--sans); font-weight: 600; font-variant-numeric: tabular-nums lining-nums; }
sup.fn { font-size: 0.62em; line-height: 0; vertical-align: super; }
sup.fn a { font: 600 1em/1 var(--sans); text-decoration: none; padding: 0 0.15em; color: inherit; opacity: 0.8; }
sup.fn a:hover { opacity: 1; text-decoration: underline; }

/* ---------- buttons ---------- */
.btn {
  --bg: var(--tape); --fg: var(--night); --pull: rgba(168, 52, 76, 0.3);
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; gap: 0.6em;
  min-height: 52px; padding: 0 26px;
  background: var(--bg); color: var(--fg);
  border: 0; border-radius: 2px; cursor: pointer;
  font: 600 1rem/1 var(--sans); letter-spacing: 0.01em; text-decoration: none;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.12);
}
.btn::before { /* the tape pull: a darker band slides in from the left */
  content: ""; position: absolute; inset: 0; z-index: -1; background: var(--pull);
  transform: scaleX(0); transform-origin: left center; transition: transform 260ms var(--ease);
}
.btn:hover::before, .btn:focus-visible::before { transform: scaleX(1); }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btn:disabled::before { display: none; }
.btn .arr { display: inline-block; transition: transform 260ms var(--ease); }
.btn:hover .arr, .btn:focus-visible .arr { transform: translateX(4px); }
.btn.dark { --bg: var(--night); --fg: var(--paper); --pull: rgba(232, 96, 122, 0.25); }
/* The primary action: bigger than anything else in its section. */
.btn-lg { min-height: 58px; padding: 0 30px; font-size: 1.08rem; box-shadow: 0 1px 0 rgba(0, 0, 0, 0.12), 0 10px 22px -16px rgba(232, 96, 122, 0.5); }
.night .hero-cta .link, .closing .hero-cta .link { color: var(--on-night-2); font-weight: 400; border-bottom-color: rgba(183, 196, 189, 0.55); }
.night .hero-cta .link:hover { color: var(--on-night); border-color: var(--tape); }
.link {
  font: 500 1rem/1 var(--sans); color: inherit; text-decoration: none;
  border-bottom: 1px solid currentColor; padding-bottom: 4px;
  transition: border-color 0.2s;
}
.link:hover { border-color: var(--tape); }

/* ---------- header ---------- */
.top {
  position: sticky; top: 0; z-index: 40;
  background: rgba(14, 38, 32, 0.92);
  backdrop-filter: saturate(1.2) blur(12px);
  -webkit-backdrop-filter: saturate(1.2) blur(12px);
  color: var(--on-night);
  border-bottom: 1px solid var(--night-line);
}
.top .wrap { display: flex; align-items: center; gap: 28px; height: 68px; }
.mark { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--on-night); }
.mark .logo { width: 30px; height: 30px; margin-right: -2px; flex: none; }
.mark .wm { font: 400 1.55rem/1 var(--display); letter-spacing: -0.01em; }
.mark .beta { font: 500 0.62rem/1 var(--sans); letter-spacing: 0.16em; text-transform: uppercase; color: var(--brass); border: 1px solid var(--night-line); padding: 4px 6px 3px; border-radius: 2px; transform: translateY(1px); }
.nav { display: flex; gap: 24px; margin-left: auto; align-items: center; }
.nav a { font-size: 0.94rem; text-decoration: none; color: var(--on-night-2); transition: color 0.2s; white-space: nowrap; }
.nav a:hover, .nav a[aria-current] { color: var(--on-night); }
.top .btn { min-height: 42px; padding: 0 18px; font-size: 0.92rem; white-space: nowrap; }
@media (max-width: 520px) { .mark .beta { display: none; } }
.top .btn { flex: none; }
@media (max-width: 380px) { .mark .wm { font-size: 1.35rem; } .top .btn { padding: 0 12px; font-size: 0.88rem; } }
@media (max-width: 350px) { .top .wrap { gap: 10px; } .mark { gap: 8px; } .mark .wm { font-size: 1.12rem; } .top .btn { padding: 0 10px; font-size: 0.84rem; } .menu summary { padding: 10px 0; } }
.menu { display: none; position: relative; }
.menu summary { list-style: none; cursor: pointer; color: var(--on-night); font-size: 0.94rem; padding: 10px 4px; }
.menu summary::-webkit-details-marker { display: none; }
.menu nav { position: absolute; right: -8px; top: calc(100% + 10px); background: var(--night); border: 1px solid var(--night-line); padding: 8px 0; min-width: 220px; box-shadow: 0 20px 40px -20px rgba(0,0,0,.6); }
.menu[open] nav { animation: menu-in 150ms var(--ease-out); }
html.still .menu[open] nav { animation: none; }
@keyframes menu-in { from { opacity: 0; transform: translateY(-6px); } }
.menu nav a { display: block; padding: 12px 18px; color: var(--on-night); text-decoration: none; }
.menu nav a:hover { background: var(--night-2); }
@media (max-width: 1080px) {
  .nav { display: none; }
  .menu { display: block; margin-left: auto; }
  .top .wrap { gap: 14px; }
}
@media (max-width: 860px) { .top .wrap { height: 60px; } .top .btn { padding: 0 14px; } }

/* ---------- reveals: one per section, on the h2 only ---------- */
/* The clip bleeds past the box (descenders, italic overhang), and site.js drops it
   altogether once the wipe has finished, so no glyph is ever cut. */
html.js .rv-h:not(.in) { clip-path: inset(-0.15em -0.3em 100% -0.15em); }
.rv-h.in { clip-path: inset(-0.15em -0.3em -0.35em -0.15em); transition: clip-path 600ms cubic-bezier(0.16, 1, 0.3, 1); }
.rv-h.in.shown, html.js.still .rv-h { clip-path: none; transition: none; }
@media print { html.js .rv-h { clip-path: none !important; } }

/* ---------- sections ---------- */
.night { background: var(--night); color: var(--on-night); }
.sec { padding: var(--sec-pad) 0; }
.sec.stone { background: var(--stone); }
.sec.ruled > .wrap { position: relative; }
.sec.ruled > .wrap::before { content: ""; position: absolute; left: var(--gut); right: var(--gut); top: calc(-1 * var(--sec-pad)); height: 1px; background: var(--rule); }
.sec-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px 64px; align-items: end; margin-bottom: clamp(28px, 4vw, 48px); }
.sec-head .lede { margin: 0; }
@media (max-width: 860px) { .sec-head { grid-template-columns: 1fr; } }

/* ---------- hero ---------- */
.hero { position: relative; overflow: hidden; }
.hero::before { /* one soft lamp glow behind the brief, nothing more */
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0.5;
  background: radial-gradient(1200px 500px at 85% 10%, rgba(201, 168, 106, 0.10), transparent 60%);
}
.hero .wrap {
  position: relative;
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: 64px; align-items: center;
  padding-top: clamp(36px, 5vw, 76px); padding-bottom: clamp(48px, 7vw, 100px);
}
.hero h1 { font-size: var(--h1-hero); max-width: 15ch; margin-bottom: 24px; text-wrap: balance; }
.hero h1 em { color: var(--tape); font-family: var(--serif); font-size: 0.9em; }
.hero .lede { margin-bottom: 20px; }
.offer { margin: 0 0 24px; font-size: 1.06rem; line-height: 1.5; color: var(--on-night); }
.offer b[data-price] { font-size: 1.5rem; vertical-align: -0.06em; }
.offer [data-price] { color: var(--on-night); }
.offer-n { display: block; margin-top: 6px; font-size: 0.9rem; color: var(--on-night-2); }
.hero .lede sup.fn a { color: var(--on-night); }
.hero-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 28px; }
/* Launch terms, the free-call caveat and what works today: one quiet line under the CTAs.
   The three mode lines share one slot, so nothing moves when /api/config answers. */
.hero-fine { margin: 18px 0 0; display: grid; gap: 4px; font-size: 0.88rem; line-height: 1.5; color: var(--on-night-2); }
.hero-fine .mode-line { display: grid; color: var(--on-night); }
.hero-fine .mode-line > [data-when] { display: block; grid-area: 1 / 1; visibility: hidden; }
html[data-mode="preview"] .hero-fine [data-when~="preview"],
html[data-mode="requests"] .hero-fine [data-when~="requests"],
html[data-mode="payable"] .hero-fine [data-when~="payable"] { visibility: visible; }
.hero-fine .mode-line > [data-when]::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--brass); margin-right: 8px; vertical-align: 0.12em; }
/* What's included / not included: one small disclosure under the CTAs. */
.incl { margin: 10px 0 0; font-size: 0.92rem; line-height: 1.5; color: var(--on-night-2); }
.incl summary { display: inline-flex; align-items: center; gap: 8px; min-height: 32px; cursor: pointer; list-style: none; color: var(--on-night-2); text-decoration: underline; text-decoration-color: rgba(183, 196, 189, 0.4); text-underline-offset: 4px; }
.incl summary::-webkit-details-marker { display: none; }
.incl summary::before { content: "+"; display: inline-grid; place-items: center; width: 18px; height: 18px; border: 1px solid var(--night-line); border-radius: 50%; font: 500 0.8rem/1 var(--sans); color: var(--brass); text-decoration: none; }
.incl[open] summary::before { content: "−"; }
.incl summary:hover { color: var(--on-night); }
.incl-b { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 28px; margin-top: 12px; padding-top: 14px; border-top: 1px solid var(--night-line); }
.incl-h { margin: 0 0 6px; font: 500 0.72rem/1.3 var(--sans); letter-spacing: 0.14em; text-transform: uppercase; color: var(--brass); }
.incl ul { margin: 0; padding: 0; list-style: none; }
.incl li { position: relative; padding-left: 14px; margin-bottom: 4px; }
.incl li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 5px; height: 5px; border-radius: 50%; background: var(--brass); }
.incl-f { grid-column: 1 / -1; margin: 0; color: var(--on-night-2); }
.incl-f [data-price] { color: var(--on-night); }
@media (max-width: 600px) { .incl-b { grid-template-columns: 1fr; } }
@media (max-width: 900px) {
  .hero .wrap { grid-template-columns: 1fr; gap: 44px; }
  .hero h1 { margin-bottom: 18px; }
  .hero .lede { margin-bottom: 16px; }
  .offer { margin-bottom: 20px; }
}
@media (max-width: 600px) {
  .hero .kicker { margin-bottom: 12px; }
  .hero h1 { margin-bottom: 14px; }
  .hero .lede { line-height: 1.5; margin-bottom: 14px; }
  .offer { font-size: 1rem; margin-bottom: 18px; }
  .offer b[data-price] { font-size: 1.35rem; }
  .hero-cta { flex-wrap: nowrap; gap: 18px; }
  .hero-cta .btn { padding: 0 20px; flex: none; }
  .hero-cta .link { font-size: 0.95rem; line-height: 1.3; }
}
@media (max-width: 355px) { .hero-cta { flex-wrap: wrap; } }

/* ---------- the brief (hero figure) ---------- */
.brief-stage { position: relative; margin: 0; container: brief / inline-size; }
.brief-sentinel { position: absolute; top: 0; left: 0; width: 1px; height: 1px; }
.brief-grid { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); }
.sheet-wrap { position: relative; z-index: 1; width: min(100%, 352px); margin: 0 auto; transform: none; }
.sheet {
  position: relative;
  background: #fffdf7; color: #1d241f;
  padding: 40px 26px 30px 44px;
  border-radius: 1px;
  box-shadow: 0 30px 60px -24px rgba(0, 0, 0, 0.6);
  font: 400 0.84rem/1.72 var(--serif);
}
.sheet::after { /* the fold, where the brief was creased for tying */
  content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px;
  background: linear-gradient(90deg, rgba(0,0,0,.05), rgba(0,0,0,.09), rgba(0,0,0,.04));
}
.sheet-h { text-align: center; font: 400 1.25rem/1.2 var(--display); letter-spacing: 0.2em; margin-bottom: 4px; }
.sheet-sub { text-align: center; font-style: italic; font-size: 0.74rem; line-height: 1.5; color: #59625c; margin-bottom: 20px; }
.sheet ol { list-style: none; margin: 0; padding: 0; }
.sheet li { position: relative; padding-left: 32px; margin-bottom: 12px; }
.sheet li:last-child { margin-bottom: 0; }
/* A visible page break: the extract jumps from page 4 to page 6. */
.sheet li.pg { margin-top: 18px; padding-top: 26px; border-top: 1px dashed #d8d2c2; }
.sheet .pg-l { position: absolute; left: 0; top: 7px; font: 600 0.6rem/1 var(--sans); letter-spacing: 0.14em; text-transform: uppercase; color: #59625c; }
.sheet li.pg .no, .sheet li.pg .pin { margin-top: 26px; }
.sheet li .no { position: absolute; left: 0; font: 600 0.74rem/1 var(--sans); color: #59625c; top: 0.5em; }
.hl { background: linear-gradient(var(--c), var(--c)) no-repeat 0 0 / 100% 100%; padding: 0.06em 0; box-decoration-break: clone; -webkit-box-decoration-break: clone; color: inherit; }
.hl.k { --c: var(--hl-key); }
.hl.c { --c: var(--hl-check); }
.hl.g { --c: var(--hl-good); }
.hl.split { background: none; padding: 0; }
.hl-line { background: linear-gradient(var(--c), var(--c)) no-repeat 0 0 / 100% 100%; padding: 0.06em 0; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.pin {
  position: absolute; left: -36px; top: 0.12em;
  width: 22px; height: 22px; border-radius: 50%;
  display: grid; place-items: center;
  font: 600 0.7rem/1 var(--sans); color: #fff;
  box-shadow: 0 1px 2px rgba(0,0,0,.25);
}
.pin.k { background: #a8322a; } .pin.c { background: #8a5d08; } .pin.g { background: #1e5b3f; }

/* Tape. The bands sit in the left margin and across the LEASE header only, so no tape
   ever covers clause text; the clip keeps every scrap within 24px of the sheet. */
.tape { position: absolute; z-index: 2; inset: 0; pointer-events: none; display: none; overflow: clip; overflow-clip-margin: 24px; }
.band { position: absolute; display: block; background: #d9566f; }
.band::after { content: ""; position: absolute; background: #f08aa0; opacity: .6; }
.band-v { left: 14px; width: 12px; top: -12px; bottom: 0; transform-origin: 50% 34px; }
.band-v::after { left: 0; top: 0; bottom: 0; width: 2px; }
.band-h { top: 16px; height: 12px; left: -12px; right: 0; transform-origin: 32px 50%; background: #e0607a; }
.band-h::after { left: 0; right: 0; top: 0; height: 2px; }
.band-end { position: absolute; display: block; background: #b83f57; }
.end-v { left: 14px; width: 12px; top: 100%; height: 12px; }
.end-h { top: 16px; height: 12px; left: 100%; width: 12px; }
.bow { position: absolute; left: -35px; top: -33px; width: 110px; height: 110px; overflow: visible; }
.bow .loop, .bow .tails, .bow circle { transform-box: view-box; transform-origin: 60px 60px; }
.loose-end { position: absolute; z-index: 2; left: 24px; top: 16px; width: 46px; height: 12px; transform-origin: 0 6px; transform: rotate(162deg); pointer-events: none; filter: drop-shadow(0 1px 1px rgba(0,0,0,.25)); }

.notes { position: relative; z-index: 3; display: grid; gap: 10px; margin: 16px 0 0; }
.note {
  background: var(--night-2); color: var(--on-night);
  border: 1px solid var(--night-line); border-left: 3px solid var(--nc);
  padding: 11px 14px; border-radius: 2px;
  font-size: 0.84rem; line-height: 1.45;
  box-shadow: 0 12px 28px -18px rgba(0, 0, 0, 0.6);
}
.note b { display: flex; align-items: center; gap: 8px; font: 600 0.68rem/1 var(--sans); letter-spacing: 0.12em; text-transform: uppercase; color: var(--nc); margin-bottom: 6px; }
.note b i { font-style: normal; width: 18px; height: 18px; border-radius: 50%; display: inline-grid; place-items: center; background: var(--nc); color: var(--night); letter-spacing: 0; font-size: 0.66rem; flex: none; }
.note.k { --nc: #f08b7c; } .note.c { --nc: #e7bf62; } .note.g { --nc: #8fd0aa; }
.note.who { background: #fffdf7; color: #1d241f; border: 0; border-left: 3px solid var(--brass); font: 400 0.9rem/1.5 var(--serif); }
.note.who b { display: inline; font: 700 1em/1 var(--serif); letter-spacing: 0; text-transform: none; color: #1d241f; margin: 0; }
.leaders { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; z-index: 0; display: none; }
.leaders .ld { fill: none; stroke: rgba(243, 241, 234, 0.45); stroke-width: 1; stroke-dasharray: 1; stroke-dashoffset: 0; }
.leaders .ld:nth-child(1) { stroke: rgba(240, 139, 124, .55); }
.leaders .ld:nth-child(2) { stroke: rgba(231, 191, 98, .55); }
.leaders .ld:nth-child(3) { stroke: rgba(143, 208, 170, .55); }
.replay {
  position: absolute; right: 0; bottom: -34px; z-index: 4;
  border: 0; background: none; padding: 6px 0; cursor: pointer;
  font: 500 14px/1 var(--sans); color: var(--on-night-2);
  text-decoration: underline; text-decoration-color: rgba(183,196,189,.4); text-underline-offset: 4px;
}
.replay:hover { color: var(--on-night); }
html.still .replay { display: none !important; }

/* Side-by-side notes with leader lines, when the stage has the room (desktop only). */
@media (min-width: 901px) {
  .hero .brief-stage { margin-right: calc(-1 * min(72px, max(0px, (100vw - var(--wrap)) / 2 + var(--gut) - 40px))); }
  /* The brief holds its place when "What's included" opens below the CTAs. */
  .hero .wrap { align-items: start; }
  .hero .brief-stage { margin-top: clamp(24px, 4vw, 64px); }
  .sheet-wrap { transform: rotate(-0.6deg) translateY(-4px); }
  @container brief (min-width: 560px) {
    .brief-grid { grid-template-columns: minmax(0, 1fr) clamp(200px, 40%, 252px); column-gap: 38px; align-items: center; }
    .sheet-wrap { width: 100%; max-width: 360px; margin: 0; }
    .notes { margin: 0; gap: 12px; }
    .leaders { display: block; }
  }
}
@media (max-width: 480px) {
  .sheet { padding: 34px 20px 24px 42px; font-size: 0.8rem; }
  .pin { left: -34px; }
  .sheet li { padding-left: 28px; }
}

/* The tied state: only before the first play in this session, with JS and motion allowed. */
html.js:not(.brief-played):not(.still) #brief:not(.done) .tape,
#brief.tied .tape { display: block; }
html.js:not(.brief-played):not(.still) #brief:not(.done) .sheet-wrap,
#brief.tied .sheet-wrap { transform: rotate(-1.6deg); }
html.js:not(.brief-played):not(.still) #brief:not(.done) .hl,
html.js:not(.brief-played):not(.still) #brief:not(.done) .hl-line,
#brief.tied .hl, #brief.tied .hl-line { background-size: 0% 100%; }
html.js:not(.brief-played):not(.still) #brief:not(.done) .pin,
#brief.tied .pin { opacity: 0; transform: scale(0.6); }
html.js:not(.brief-played):not(.still) #brief:not(.done) .note,
#brief.tied .note { opacity: 0; transform: translateX(8px); }
html.js:not(.brief-played):not(.still) #brief:not(.done) .note.who,
#brief.tied .note.who { transform: translateY(6px); }
html.js:not(.brief-played):not(.still) #brief:not(.done) .ld,
#brief.tied .ld { stroke-dashoffset: 1; }

/* ---------- sample pack ---------- */
.pack { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 80px); align-items: start; }
@media (max-width: 960px) { .pack { grid-template-columns: 1fr; } }
.mock {
  position: relative; margin: 0; background: #fff; border: 1px solid var(--rule); border-radius: 2px;
  box-shadow: 0 24px 50px -36px rgba(14, 38, 32, 0.35);
}
.mock-bar { padding: 11px 16px; background: var(--night); color: var(--on-night); font: 500 0.8rem/1.3 var(--sans); letter-spacing: 0.01em; }
.mock-body { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); }
.mock-doc { background: #efece4; padding: 18px; overflow: auto; outline: none; }
.mock-page { background: #fffdf7; padding: 20px 20px 24px; font: 15px/1.7 var(--serif); color: #2b322d; box-shadow: 0 2px 10px rgba(0,0,0,.08); }
.mock-page p { margin: 0 0 0.75em; }
.mock-page mark { text-decoration: underline 2px transparent; text-underline-offset: 4px; transition: text-decoration-color 200ms; }
.mock-page mark.on { text-decoration-color: var(--uc); }
#m42 { --uc: #a8322a; } #m45 { --uc: #b88a1e; } #m73 { --uc: #1e5b3f; }
.mock-pl, .mock-pb { font: 600 12px/1 var(--sans); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); }
.mock-pl { margin-bottom: 14px !important; }
.mock-pb { border-top: 1px dashed var(--rule); padding-top: 12px; margin-top: 18px !important; }
.mock-side { padding: 16px; border-left: 1px solid var(--rule); display: grid; gap: 10px; align-content: start; }
.mock-card {
  display: block; width: 100%; text-align: left; font: 400 15px/1.5 var(--sans); color: var(--ink);
  background: #fff; border: 1px solid var(--rule); border-left: 3px solid var(--mc); padding: 10px 12px; border-radius: 2px;
  transition: border-color 200ms, box-shadow 200ms, transform 200ms var(--ease);
}
button.mock-card { cursor: pointer; }
button.mock-card:hover, button.mock-card:focus-visible, button.mock-card[aria-pressed="true"] { box-shadow: 0 10px 22px -16px rgba(14,38,32,.45); transform: translateX(-2px); }
button.mock-card[aria-pressed="true"] { border-color: var(--mc); }
.mock-card b { display: block; font: 600 14px/1.35 var(--sans); margin-bottom: 3px; color: var(--mc-ink, var(--ink)); }
.mock-card.k { --mc: #a8322a; --mc-ink: #8a2a22; } .mock-card.c { --mc: #b88a1e; --mc-ink: #6e5000; } .mock-card.g { --mc: #1e5b3f; --mc-ink: #1e5b3f; }
.mock-card.w { --mc: var(--brass); --mc-ink: #6d5526; background: #fffdf7; }
.mock-card.q { --mc: var(--tape); --mc-ink: var(--tape-ink); }
.mock-card ol { margin: 4px 0 0; padding-left: 1.2em; }
.mock-card li { margin: 2px 0; }
.mock-leader { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.mock-leader path { fill: none; stroke-width: 1; stroke-dasharray: 1; }
.mock-leader circle { stroke: none; }
.mock-cap { padding: 12px 16px; border-top: 1px solid var(--rule); background: #fff; margin: 0; font-size: 0.86rem; color: var(--ink-2); }
.mock-cap b { font-weight: 600; color: var(--ink); margin-right: 6px; }
@media (max-width: 640px) {
  .mock-body { grid-template-columns: 1fr; }
  .mock-doc { padding: 12px; } /* the whole extract shows: no nested scroll on phones */
  .mock-page { padding: 16px; }
  .mock-side { border-left: 0; border-top: 1px solid var(--rule); padding: 12px; }
  .mock-leader { display: none; }
}

.gets { list-style: none; margin: 0; padding: 0; }
.gets li { padding: 20px 0; border-top: 1px solid var(--rule); display: grid; grid-template-columns: 48px 1fr; gap: 16px; }
.gets li:last-child { border-bottom: 1px solid var(--rule); }
.gets h3 { font: 400 1.22rem/1.3 var(--serif); margin-bottom: 4px; }
.gets p { margin: 0; color: var(--ink-2); font-size: 0.97rem; }
.gm { position: relative; display: block; width: 48px; height: 40px; margin-top: 2px; }
.gm i { position: absolute; display: grid; place-items: center; font-style: normal; }
.gm-pin { left: 0; top: 4px; width: 24px; height: 24px; border-radius: 50%; color: #fff; font: 600 0.72rem/1 var(--sans); z-index: 1; box-shadow: 0 1px 2px rgba(0,0,0,.2); }
.gm-pin.k { background: #a8322a; } .gm-pin.c { background: #8a5d08; } .gm-pin.g { background: #1e5b3f; font-size: 0.8rem; }
.gm-swatch { left: 14px; top: 10px; width: 32px; height: 12px; background: var(--hl-key); }
.gm-swatch.g { background: var(--hl-good); }
.gm-date { left: 16px; top: 0; width: 30px; height: 34px; background: #fff; border: 1px solid var(--ink); border-top-width: 6px; font: 600 0.6rem/1.05 var(--sans); text-align: center; letter-spacing: 0.04em; color: var(--ink); }
.gm-tape { left: 2px; top: 12px; width: 42px; height: 10px; background: var(--tape); transform: rotate(-8deg); clip-path: polygon(0 0, 100% 0, 92% 50%, 100% 100%, 0 100%); }
.after-sample { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin: 48px 0 0; color: var(--ink-2); }

/* ---------- finder host (finder.js renders inside #finder) ---------- */
html.js #finder:empty { min-height: 320px; }
/* Wide screens: the heading and lede sit beside the finder, so the card has no empty half. */
@media (min-width: 1100px) {
  #who-do-i-need > .wrap { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 0 64px; align-items: start; }
  #who-do-i-need .sec-head { grid-template-columns: 1fr; margin: 0; position: sticky; top: 108px; }
  #who-do-i-need .sec-head .lede { margin-top: 4px; }
}

/* ---------- how it works ---------- */
.steps-rows { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.srow { display: grid; grid-template-columns: 72px minmax(0, 1fr) 72px; gap: 8px 32px; align-items: start; padding: 28px 0; border-bottom: 1px solid var(--rule); }
.sn { font: 400 2.4rem/1 var(--display); color: var(--green); position: relative; padding-top: 2px; }
.sn::after { content: ""; position: absolute; left: 0; top: calc(100% + 14px); width: 28px; height: 1px; background: var(--rule); }
.sbody h3 { font: 400 1.4rem/1.3 var(--serif); margin-bottom: 6px; }
.sbody p { color: var(--ink-2); margin: 0; max-width: 62ch; }
.sbody p + p { margin-top: 0.6em; }
.sopt { margin-top: 12px; padding: 10px 14px; background: var(--stone); border-left: 3px solid var(--tape); font-size: 0.95rem; color: var(--ink-2); max-width: 62ch; }
.sopt > p { margin: 0; }
.sopt b { color: var(--ink); font-weight: 600; }
.sdet summary { display: inline-block; margin-top: 4px; min-height: 28px; cursor: pointer; font-size: 0.9rem; color: var(--ink); text-decoration: underline; text-decoration-color: var(--tape-ink); text-underline-offset: 0.2em; }
.sdet p { margin: 6px 0 2px; font-size: 0.92rem; }
.sglyph { width: 72px; height: 72px; fill: none; stroke: var(--ink); stroke-width: 1.25; stroke-linejoin: round; }
.sglyph .d { stroke-dasharray: 1; stroke-dashoffset: 0; }
html.js:not(.still) .srow:not(.in) .sglyph .d { stroke-dashoffset: 1; }
html.js:not(.still) .srow.in .sglyph .d { transition: stroke-dashoffset 700ms cubic-bezier(.65,0,.35,1); }
@media (min-width: 1000px) { .srow { grid-template-columns: 120px minmax(0, 1fr) 72px; } }
@media (max-width: 600px) {
  .srow { grid-template-columns: 44px minmax(0, 1fr); gap: 6px 14px; padding: 22px 0; }
  .sn { font-size: 2rem; }
  .sbody { grid-column: 2; grid-row: 1 / span 2; }
  .sglyph { grid-column: 1; grid-row: 2; width: 40px; height: 40px; margin-top: 18px; }
  .sn::after { display: none; }
}

/* ---------- pricing host ---------- */
#pricing-h:focus { outline: none; }
/* The estimator takes the full width (documents and the conversation on the left, a sticky
   receipt on the right); the human-check note runs under it as a ruled band. */
.pricing-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; }
html.js #estimator[data-state="loading"] { min-height: 420px; }
.checker { background: var(--paper); border: 1px solid var(--rule); border-top: 2px solid var(--ink); padding: 24px 24px 8px; font-size: 0.95rem; color: var(--ink-2); }
.checker h3 { font: 400 1.35rem/1.3 var(--serif); color: var(--ink); margin-bottom: 12px; }
.checker a { color: var(--ink); }
@media (min-width: 900px) {
  .checker { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.25fr) minmax(0, 1fr); column-gap: clamp(28px, 3.5vw, 48px); align-items: start; padding: 26px 30px 24px; }
  .checker > * { margin: 0; }
  .checker h3 { grid-column: 1; grid-row: 1; margin: 0 0 10px; }
  .checker > p:nth-of-type(1) { grid-column: 2; grid-row: 1 / span 2; }
  .checker > p:nth-of-type(2) { grid-column: 3; grid-row: 1 / span 2; }
  .checker > p[data-reviewer] { grid-column: 2 / -1; grid-row: 3; margin-top: 14px; }
  .checker > p:last-child { grid-column: 1; grid-row: 2; align-self: start; }
}

/* ---------- value ---------- */
.value-grid { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 56px); align-items: start; }
@media (max-width: 960px) { .value-grid { grid-template-columns: 1fr; } }
.fee-h { font: 500 0.78rem/1.3 var(--sans); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-2); margin-bottom: 14px; }
.fee-scale { display: grid; grid-template-columns: repeat(3, 500fr) 200fr; margin: 0 0 0; padding: 0 0 6px; font: 500 0.72rem/1 var(--sans); color: var(--ink-3); font-variant-numeric: tabular-nums; border-bottom: 2px solid var(--ink); }
.fee-rows { list-style: none; margin: 0; padding: 0; }
.fee-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 24px; padding: 20px 0 22px; border-bottom: 1px solid var(--rule); }
.fee-t h4 { font: 400 1.25rem/1.3 var(--serif); margin-bottom: 4px; }
.fee-t p { font-size: 0.9rem; color: var(--ink-3); margin: 0; max-width: 60ch; }
.fee-f { margin: 0; font: 600 1.6rem/1.1 var(--sans); font-variant-numeric: tabular-nums lining-nums; white-space: nowrap; text-align: right; }
.fee-f sup.fn a { color: var(--ink-2); }
.fee-bar { grid-column: 1 / -1; position: relative; height: 18px; margin-top: 12px;
  background:
    linear-gradient(rgba(20,32,27,.16), rgba(20,32,27,.16)) 0 50% / 100% 1px no-repeat,
    repeating-linear-gradient(90deg, rgba(20,32,27,.28) 0 1px, transparent 1px calc(100% * 500 / 1700)) 0 0 / 100% 100% no-repeat; }
/* Ranges are solid ink segments; a single published fee is a short, tall tick. */
.fee-bar i { position: absolute; top: 4px; height: 10px; left: calc(100% * var(--lo) / 1700); width: calc(100% * (var(--hi) - var(--lo)) / 1700); background: var(--ink); border-radius: 1px; transform-origin: left center; }
.fee-row.one .fee-bar i { top: 0; height: 18px; width: 4px; margin-left: -2px; }
.fee-row:nth-child(1) .fee-bar i { --d: 0ms; } .fee-row:nth-child(2) .fee-bar i { --d: 80ms; } .fee-row:nth-child(3) .fee-bar i { --d: 160ms; } .fee-row:nth-child(4) .fee-bar i { --d: 240ms; }
html.js:not(.still) .fee-rows:not(.in) .fee-bar i { transform: scaleX(0); }
html.js:not(.still) .fee-rows.in .fee-bar i { transition: transform 700ms var(--ease-out) var(--d); }
.cr-block { padding: clamp(24px, 3vw, 36px); border-radius: 2px; box-shadow: 0 30px 60px -40px rgba(14,38,32,.6); }
.cr-block h3 { font: 400 1.5rem/1.25 var(--serif); margin-bottom: 10px; }
.cr-price { font-size: 1.05rem; color: var(--on-night); padding-bottom: 16px; border-bottom: 1px solid var(--night-line); }
.cr-price [data-price] { font-size: 1.6rem; }
.cr-price small { display: block; margin-top: 6px; font-size: 0.86rem; color: var(--on-night-2); }
.cr-ai { position: relative; margin: 18px 0 4px; padding: 14px 0 2px 16px; border-left: 3px solid var(--tape); font-size: 0.98rem; line-height: 1.5; color: var(--on-night-2); }
.cr-ai b { display: block; font: 400 1.22rem/1.3 var(--serif); color: var(--on-night); margin-bottom: 4px; }
.cr-ai sup.fn a { color: var(--on-night); }
.cr-block dl { margin: 0 0 24px; }
.cr-block dt { font: 500 0.72rem/1.3 var(--sans); letter-spacing: 0.14em; text-transform: uppercase; color: var(--brass); margin: 16px 0 6px; }
.cr-block dd { margin: 0; color: var(--on-night-2); font-size: 0.95rem; }
.fee-q { margin: 14px 0 0; font-size: 0.9rem; color: var(--ink-2); }
.footnotes { margin-top: 28px; font-size: 0.86rem; color: var(--ink-3); line-height: 1.6; border-top: 1px solid var(--rule); }
.footnotes > summary { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; cursor: pointer; list-style: none; font-size: 0.92rem; color: var(--ink); text-decoration: underline; text-decoration-color: var(--rule); text-underline-offset: 0.25em; }
.footnotes > summary::-webkit-details-marker { display: none; }
.footnotes > summary::before { content: "+"; display: inline-grid; place-items: center; width: 18px; height: 18px; border: 1px solid var(--rule); border-radius: 50%; font: 500 0.8rem/1 var(--sans); color: var(--ink-2); text-decoration: none; }
.footnotes[open] > summary::before { content: "−"; }
.footnotes .fn-n { color: var(--ink-3); }
.footnotes[open] { columns: 2 320px; column-gap: 48px; }
.footnotes[open] > summary { column-span: all; display: flex; margin-bottom: 8px; }
.footnotes p { break-inside: avoid; margin-bottom: 0.8em; }
.footnotes p:target { background: var(--amber-bg); box-shadow: 0 0 0 6px var(--amber-bg); }
.footnotes a { word-break: break-word; }
.footnotes .fn-note { color: var(--ink-2); }
@media (max-width: 560px) { .fee-row { grid-template-columns: 1fr; } .fee-f { text-align: left; } .fee-scale { font-size: 0.66rem; } .fee-scale small { display: none; } }

/* ---------- who it's for ----------
   One lead photograph (home and family, the widest audience) and three smaller ones, then the
   finder tile. Every figure is an aspect-ratio box (or a grid-sized box), so nothing shifts. */
.who-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(28px, 3vw, 40px) clamp(18px, 2.4vw, 32px); }
.who-card figure { position: relative; margin: 0 0 18px; overflow: hidden; border-radius: 2px; aspect-ratio: 3 / 2; background: var(--stone-2); }
.who-card picture { display: contents; }
.who-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease-out); }
.who-card img.work { object-position: 58% 50%; }
.who-card:hover img { transform: scale(1.035); }
.who-card h3 { font: 400 1.4rem/1.25 var(--serif); margin-bottom: 8px; }
.who-card p { color: var(--ink-2); font-size: 0.96rem; margin-bottom: 10px; }
.who-lead { grid-column: span 2; grid-row: span 2; display: flex; flex-direction: column; }
.who-lead figure { flex: 1 1 auto; aspect-ratio: auto; min-height: 320px; }
.who-lead img.photo-grade { filter: saturate(0.74) sepia(0.06) contrast(1.05) brightness(1.07); }  /* the kitchen is shot dim: lift it */
.who-lead h3 { font-size: clamp(1.6rem, 2.2vw, 2rem); }
.who-lead p { font-size: 1.02rem; max-width: 46ch; }
.who-next { display: flex; flex-direction: column; justify-content: flex-end; padding: 28px; border-radius: 2px; text-decoration: none; min-height: 240px; position: relative; overflow: hidden; }
.who-next p { color: var(--on-night-2); }
.who-next .link { align-self: flex-start; margin-top: 8px; }
.who-next:hover .link { border-color: var(--tape); }
@media (max-width: 1100px) {
  .who-grid { grid-template-columns: 1fr 1fr; }
  .who-lead { grid-row: auto; }
  .who-lead figure { flex: none; aspect-ratio: 16 / 9; min-height: 0; }
  .who-next { min-height: 0; }
}
/* Phones: the lead keeps its photograph; the others become an index of thumbnail rows. */
@media (max-width: 600px) {
  .who-grid { grid-template-columns: 1fr; gap: 0; }
  .who-lead { grid-column: auto; margin-bottom: 14px; }
  .who-lead figure { aspect-ratio: 4 / 3; }
  .who-card:not(.who-lead):not(.who-next) { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 16px; align-items: center; padding: 14px 0; border-top: 1px solid var(--rule); }
  .who-card:not(.who-lead):not(.who-next) figure { margin: 0; aspect-ratio: 1 / 1; }
  .who-card:not(.who-lead):not(.who-next) h3 { font-size: 1.14rem; margin-bottom: 4px; }
  .who-card:not(.who-lead):not(.who-next) p { font-size: 0.9rem; line-height: 1.45; margin: 0; }
  .who-next { margin-top: 18px; padding: 22px 20px; }
}
.photo-grade { filter: saturate(0.68) sepia(0.08) contrast(1.02) brightness(0.97); }

/* ---------- what it isn't ---------- */
.notice {
  display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(28px, 5vw, 72px);
  padding: clamp(28px, 5vw, 56px); border: 1px solid var(--ink); background: var(--paper);
}
.notice .lede { margin-top: 18px; }
.notice ul { margin: 0; padding: 0; list-style: none; }
.notice li { padding: 12px 0 12px 28px; border-bottom: 1px solid var(--rule); position: relative; color: var(--ink-2); }
.notice li::before { content: "§"; position: absolute; left: 0; top: 11px; font-family: var(--serif); color: var(--ink-2); }
.notice li:last-child { border: 0; }
@media (max-width: 860px) { .notice { grid-template-columns: 1fr; } }

/* ---------- FAQ ---------- */
.faq { max-width: 720px; margin: 0 auto; }
.faq .h2 { margin-bottom: clamp(28px, 4vw, 44px); }
.faq details { border-top: 1px solid var(--rule); }
.faq details:last-child { border-bottom: 1px solid var(--rule); }
.faq summary { list-style: none; cursor: pointer; padding: 20px 44px 20px 0; position: relative; font: 400 1.2rem/1.4 var(--serif); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; position: absolute; right: 6px; top: 50%; width: 11px; height: 11px; border-right: 1.5px solid var(--ink-2); border-bottom: 1.5px solid var(--ink-2); transform: translateY(-75%) rotate(45deg); transition: transform 0.3s var(--ease); }
.faq details[open] > summary::after { transform: translateY(-25%) rotate(-135deg); }
.faq summary [data-price] { font-family: var(--sans); font-size: 0.92em; }
.faq .a { padding: 0 0 22px; color: var(--ink-2); }
/* The five questions most people ask stay in view; the rest sit one click down. */
.faq .faq-rest { border: 0; }
.faq .faq-rest > summary { padding: 18px 0; font: 500 0.98rem/1.3 var(--sans); color: var(--ink); text-decoration: underline; text-decoration-color: var(--tape-ink); text-underline-offset: 0.25em; border-top: 1px solid var(--rule); }
.faq .faq-rest > summary::after { display: none; }
.faq .faq-rest[open] > summary { color: var(--ink-2); }
.faq-more { margin: 28px 0 0; color: var(--ink-2); }
.faq-more a { color: var(--ink); }
.lede-s { display: block; margin-top: 8px; font-size: 0.86rem; line-height: 1.5; }
@supports (interpolate-size: allow-keywords) {
  .faq { interpolate-size: allow-keywords; }
  .faq details::details-content { block-size: 0; overflow: clip; transition: block-size 220ms var(--ease), content-visibility 220ms allow-discrete; }
  .faq details[open]::details-content { block-size: auto; }
  html.still .faq details::details-content { transition: none; }
}

/* ---------- photographic plates ----------
   The professional world (the Inns, the City) appears only in the night-green duotone baked by
   scripts/build_images.py; people and places in "Who it's for" keep the colour grade. */
.plate-band { position: relative; overflow: hidden; background: var(--night); aspect-ratio: 12 / 5; max-height: 80vh; view-timeline: --plate block; }
.plate-band picture { display: contents; }
.plate-band img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 62%; }
/* The Meter's night dissolves into the plate; the plate ends on a clean edge against stone. */
.plate-band::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(to bottom, var(--night) 0%, rgba(14, 38, 32, 0.6) 16%, rgba(14, 38, 32, 0) 44%), linear-gradient(to top, rgba(14, 38, 32, 0.28), rgba(14, 38, 32, 0) 30%); }
@media (max-width: 700px) { .plate-band { aspect-ratio: 1 / 1; max-height: none; } }

/* ---------- closing band ---------- */
.closing { position: relative; overflow: hidden; isolation: isolate; }
.closing-photo { position: absolute; inset: 0; z-index: -1; view-timeline: --closing block; }
.closing-photo picture { display: contents; }
.closing-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 55%; }
.closing-photo::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(100deg, rgba(14, 38, 32, 0.92) 0%, rgba(14, 38, 32, 0.74) 38%, rgba(14, 38, 32, 0.5) 64%, rgba(14, 38, 32, 0.62) 100%), linear-gradient(to top, rgba(14, 38, 32, 0.6), rgba(14, 38, 32, 0) 50%); }
.closing .wrap { display: grid; grid-template-columns: 1.3fr 1fr; gap: 32px 64px; align-items: end; padding-top: clamp(96px, 13vw, 176px); padding-bottom: clamp(72px, 10vw, 128px); }
.closing h2 { font-size: clamp(2.6rem, 5.4vw, 4.8rem); max-width: 14ch; text-shadow: 0 2px 24px rgba(8, 24, 19, 0.5); }
.closing h2 em { color: var(--tape); }
.closing .lede { margin-bottom: 24px; color: var(--on-night); }
@media (max-width: 700px) {
  .closing-photo img { object-position: 30% 50%; }
  .closing-photo::after { background: linear-gradient(to bottom, rgba(14, 38, 32, 0.55) 0%, rgba(14, 38, 32, 0.82) 45%, rgba(14, 38, 32, 0.95) 100%); }
}

/* Slow drift as the plates pass, where the browser supports scroll timelines. Off for
   reduced motion (both the media query and boot.js's html.still) and in print. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    html:not(.still) .plate-band img { top: -9%; height: 118%; animation: plate-drift linear both; animation-timeline: --plate; animation-range: cover; }
    html:not(.still) .closing-photo img { animation: plate-settle linear both; animation-timeline: --closing; animation-range: entry 0% cover 60%; }
  }
}
@keyframes plate-drift { from { transform: translate3d(0, -6%, 0); } to { transform: translate3d(0, 6%, 0); } }
@keyframes plate-settle { from { transform: scale(1.08); } to { transform: scale(1); } }
@media (max-width: 860px) { .closing .wrap { grid-template-columns: 1fr; } }

/* ---------- sticky mobile CTA (site.js shows it after the hero, hides it near #pricing and the end) ---------- */
.mcta { display: none; }
@media (max-width: 759px) {
  html { scroll-padding-bottom: 72px; }
  .mcta {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 44; display: block;
    padding: 8px 16px calc(8px + env(safe-area-inset-bottom, 0px));
    padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px));
    background: rgba(14, 38, 32, 0.95); border-top: 1px solid var(--night-line);
    -webkit-backdrop-filter: saturate(1.2) blur(10px); backdrop-filter: saturate(1.2) blur(10px);
    box-shadow: 0 -12px 30px -18px rgba(0, 0, 0, 0.5);
    transform: translateY(100%); visibility: hidden;
    transition: transform 280ms var(--ease-out), visibility 0s linear 280ms;
  }
  .mcta.show { transform: none; visibility: visible; transition: transform 280ms var(--ease-out), visibility 0s; }
  .mcta .btn { width: 100%; justify-content: center; min-height: 44px; font-size: 1rem; }
  .mcta .from { font-weight: 500; }
  html.still .mcta, html.still .mcta.show { transition: none; }
}
@media print { .mcta { display: none !important; } }

/* ---------- footer ---------- */
.foot { background: #0a1c17; color: var(--on-night-2); font-size: 0.88rem; }
.foot .wrap { padding-top: 56px; padding-bottom: 40px; display: grid; grid-template-columns: 1.4fr 1fr 1.2fr 1fr; gap: 32px; }
.foot-brand p { margin-top: 14px; max-width: 36ch; }
.foot .foot-h { font: 500 0.72rem/1 var(--sans); letter-spacing: 0.14em; text-transform: uppercase; color: var(--brass); margin: 0 0 14px; }
.foot ul { list-style: none; margin: 0; padding: 0; } .foot li { margin-bottom: 8px; }
.foot a { text-decoration: none; } .foot a:hover { color: var(--on-night); }
.foot .mark .wm { font-size: 1.3rem; }
.foot .legal { grid-column: 1 / -1; border-top: 1px solid var(--night-line); padding-top: 22px; font-size: 0.8rem; line-height: 1.6; }
@media (max-width: 900px) { .foot .wrap { grid-template-columns: 1fr 1fr; } .foot .wrap > :first-child { grid-column: 1 / -1; } }

/* ---------- long-form (legal pages, app) ---------- */
.doc-page { max-width: 760px; margin: 0 auto; padding: clamp(48px, 8vw, 96px) var(--gut); }
.doc-page h1 { font: 400 var(--h1-page)/1.05 var(--display); margin-bottom: 16px; }
.doc-page h2 { font: 400 1.5rem/1.3 var(--serif); margin: 44px 0 12px; }
.doc-page p, .doc-page li { color: var(--ink-2); }
.doc-page .draft { background: #fdf0f2; border-left: 3px solid var(--tape-ink); padding: 12px 16px; font-size: 0.92rem; margin: 20px 0 32px; }

@media (prefers-reduced-motion: reduce) {
  html.smooth { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-delay: 0s !important; transition-duration: 0.01ms !important; transition-delay: 0s !important; }
}
@media print {
  .top, .menu, .replay, .closing-art, .closing-photo, .plate-band, #estimator, .meter-app { display: none !important; }
  #situations .meter-table { position: static !important; width: auto !important; height: auto !important; overflow: visible !important; clip: auto !important; white-space: normal !important; }
  #situations .meter-first { display: block !important; }
  .night { background: #fff; color: #000; }
}

/* Footer "Analytics: on/off" switch, added by /js/t.js; looks like the links beside it. */
.foot .t-opt { background: none; border: 0; padding: 0; margin: 0; font: inherit; color: inherit; cursor: pointer; text-align: left; }
.foot .t-opt:hover { color: var(--on-night); }
.foot .t-opt:disabled { cursor: default; color: inherit; opacity: 0.85; }