/* Instrument Sans, SIL Open Font License 1.1, licence text in /fonts/OFL.txt */
@font-face {
  font-family: "Instrument Sans";
  src: url("/fonts/InstrumentSans-wght-subset.woff2") format("woff2-variations"),
       url("/fonts/InstrumentSans-wght-subset.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0020-007E, U+00A0-00FF, U+2010-2027, U+2030-203A, U+2044, U+2122;
}
@font-face {
  font-family: "Instrument Sans Fallback";
  src: local("Arial"), local("Helvetica"), local("Liberation Sans");
  size-adjust: 101.7%;
  ascent-override: 97%;
  descent-override: 25%;
  line-gap-override: 0%;
}

/* 1. Palette, light and grid tokens (art-direction.md 1.1, 3.1) */
:root {
  --ink: #1b1f23;
  --muted: #5b6168;
  --line: #e4e2dc;
  --rule: #d9d6ce;
  --paper: #f8f7f3;
  --surface: #ffffff;
  --band: #efece5;
  --accent: #1e4d5c;
  --accent-hover: #1d4a58;
  --accent-ink: #ffffff;
  --soft: #eef1ef;
  --warn: #8a4b12;
  --grain: url("/img/paper-grain-192.png");
  --grain-size: 192px 192px;
  --wrap: 1120px;
  --gutter: 24px;
  --page-margin: clamp(20px, 5vw, 40px);
  --col: calc((100% - 11 * var(--gutter)) / 12);
  --margin-w: calc(3 * (100% - 11 * var(--gutter)) / 12 + 3 * var(--gutter));
  --rail-x: calc(3 * (100% - 11 * var(--gutter)) / 12 + 2.5 * var(--gutter));
  --seam-above: clamp(1.5rem, 3vh, 2.5rem);
  --seam-below: clamp(3rem, 7vh, 5rem);
  --scene-buffer: clamp(5rem, 14vh, 9rem);
  --tag-row: 1.6rem;
  --bar-h: 70px;
}
@media (max-width: 899px) {
  :root { --seam-above: clamp(1.25rem, 2.5vh, 2rem); --seam-below: clamp(2.5rem, 6vh, 4rem); --scene-buffer: clamp(3.5rem, 10vh, 6rem); }
}
@media (max-width: 559px) { :root { --bar-h: 80px; } }
@media (min-resolution: 2dppx) { :root { --grain-size: 96px 96px; } }

/* 2. Base */
* { box-sizing: border-box; }
html {
  font-size: 100%;
  -webkit-text-size-adjust: 100%;
  overflow-x: clip;
  scroll-padding-bottom: calc(var(--bar-h) + 12px);
}
body {
  margin: 0;
  font-family: "Instrument Sans", "Instrument Sans Fallback", Arial, Helvetica, sans-serif;
  color: var(--ink);
  background-color: var(--paper);
  background-image: var(--grain);
  background-size: var(--grain-size);
  line-height: 1.6;
  font-size: 1.0625rem;
  overflow-x: clip;
}
[hidden] { display: none !important; }
.wrap { width: min(var(--wrap), 100% - 2 * var(--page-margin)); margin: 0 auto; }
.narrow { width: min(720px, 100% - 2 * var(--page-margin)); margin: 0 auto; }

h1, h2, h3, summary { text-wrap: balance; }
p, li { text-wrap: pretty; }
h1 {
  font-size: clamp(2.4rem, 5.4vw, 4.25rem);
  line-height: 1.06; letter-spacing: -0.02em; margin: 0 0 1.25rem; font-weight: 600;
}
h2 { font-size: clamp(1.6rem, 2.6vw, 2.125rem); line-height: 1.15; margin: 0 0 0.8rem; font-weight: 600; letter-spacing: -0.015em; }
h3 { font-size: 1.25rem; line-height: 1.3; margin: 1.6rem 0 0.5rem; font-weight: 600; letter-spacing: -0.01em; }
p { margin: 0 0 1rem; max-width: 40rem; }
ul, ol { margin: 0 0 1rem; padding-left: 1.25rem; max-width: 40rem; }
li { margin: 0 0 0.45rem; }
a { color: var(--accent); }
strong, b { font-weight: 600; }
small, .small { font-size: 0.9rem; color: var(--muted); }
.lede { font-size: 1.25rem; line-height: 1.45; color: var(--ink); margin: 0 0 1.25rem; max-width: 40rem; }
.cred { font-size: 0.98rem; line-height: 1.5; color: var(--muted); margin: 0 0 1.4rem; max-width: 40rem; font-variant-numeric: tabular-nums; }
.cred, .price, .price-note, .meta, .bar, .steps li::before, .fact .big, #after li, .legal .meta, .legal table, .callout p { font-variant-numeric: tabular-nums; }

/* 3. Chrome: header */
header.top {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.5rem 1rem;
  padding: 1.4rem 0 1rem; border-bottom: 1px solid var(--line);
}
.mark { font-weight: 600; font-size: 1.2rem; line-height: 1; letter-spacing: -0.01em; color: var(--ink); text-decoration: none; padding: 0.2rem 0; }
.mark span { color: var(--accent); }
.mark:hover, .mark:focus-visible { text-decoration: underline; text-decoration-color: var(--accent); }
nav.top { display: flex; gap: 1.1rem; }
nav.top a { color: var(--muted); text-decoration: none; font-size: 0.95rem; line-height: 1; padding: 0.3rem 0; }
nav.top a:hover, nav.top a:focus-visible { color: var(--accent); text-decoration: underline; }
@media (max-width: 399px) { header.top { gap: 0.5rem; } nav.top { gap: 0.7rem; } nav.top a { font-size: 0.9rem; } }

/* 4. Main, rail, section grid and seams */
main { position: relative; padding: 0; }
@media (min-width: 900px) {
  .wrap > main::before { content: ""; position: absolute; top: 0; bottom: 0; left: var(--rail-x); width: 1px; background: var(--line); pointer-events: none; }
}
section {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  padding: var(--seam-above) 0 var(--seam-below);
  border-top: 1px solid var(--line);
}
section > * { min-width: 0; }
section > :last-child { margin-bottom: 0; }
@media (min-width: 900px) {
  section { grid-template-columns: var(--margin-w) minmax(0, 1fr); }
  section > * { grid-column: 2; }
  section > .full { grid-column: 1 / -1; }
}
.section-intro { max-width: none; }
.section-intro p { max-width: 40rem; }
#audits .section-intro p, #why > p:not(.sources) { font-size: 1.25rem; line-height: 1.45; }
#audits, #method, #how, #after, #faq, #ready, #src-1, #src-2, .legal h2 { scroll-margin-top: 1.5rem; }
summary, #src-1, #src-2, ol.sources li, .steps li { scroll-margin-bottom: calc(var(--bar-h) + 12px); }

/* 5. Buttons and focus (5.1) */
.btn {
  display: inline-block; background: var(--accent); color: var(--accent-ink);
  font-weight: 600; font-size: 1.0625rem; line-height: 1.3;
  padding: 0.85rem 1.35rem; min-height: 44px; border: 2px solid var(--accent);
  border-radius: 6px; text-decoration: none; text-align: center; margin: 0.25rem 0.6rem 0.4rem 0;
}
.btn.secondary { background: transparent; color: var(--accent); }
@media (hover: hover) and (pointer: fine) {
  .btn:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
  .btn.secondary:hover { background: var(--band); }
}
.btn:focus-visible, a:focus-visible, summary:focus-visible {
  outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 2px;
}
a:not(.btn):focus-visible { outline-offset: 2px; }
.actions { margin: 0.6rem 0 0.4rem; max-width: none; }
sup a { display: inline-block; padding: 0.25rem; margin: -0.25rem; }

/* 6. S1 hero (section 6) */
section.hero { border-top: 0; padding-top: clamp(2rem, 6vh, 4rem); z-index: 2; }
.hero h1 { grid-column: 1 / -1; position: relative; z-index: 2; }
@media (min-width: 900px) { .hero h1 { max-width: calc(9 * var(--col) + 8 * var(--gutter)); } }
.hero .lede, .hero .cred, .hero .actions, .hero .small { position: relative; z-index: 2; }
/* Routed S6: the hero's margin column gets one piece of the page's own
   furniture, the index mark the register in #how already uses, reaching left
   from the rail at the lede's first baseline. */
@media (min-width: 900px) {
  .hero .lede::before {
    content: ""; position: absolute; top: 0.72em;
    right: calc(100% + var(--margin-w) - var(--rail-x));
    width: 1.5rem; border-top: 1px solid var(--ink);
  }
}
.hero-figure {
  position: absolute; right: calc(50% - 50vw); bottom: -96px;
  width: max(240px, calc(50vw - 50% + 3 * var(--col) + 2 * var(--gutter))); aspect-ratio: 5 / 6; margin: 0; z-index: 1;
}
.hero-figure img { display: block; width: 100%; height: 100%; object-fit: contain; object-position: right bottom; }
/* The figure is an absolutely positioned grid child, so its percentage basis is
   whatever grid area it lands in. Spanning the whole grid makes 50% half the
   wrap, which is what "right: 50% minus 50vw" assumes: without this the box ran
   past the viewport edge and carried the first graduation off screen.
   The block's foot sits 203 of the crop's 1080 source rows above its bottom
   edge, so the overhang that lands the foot 45 px under the hero rule scales
   with the figure (0.2256 is 203 over 1080 times the 6 to 5 box). Two regimes:
   the wrap is fluid under 1200 and capped at 1120 above it. */
@media (min-width: 900px) and (max-width: 1199px) {
  .hero-figure { grid-column: 1 / -1; bottom: calc(-45px - 0.2256 * (25vw + 2px)); }
}
@media (min-width: 1200px) {
  .hero-figure { grid-column: 1 / -1; bottom: calc(-45px - 0.2256 * (50vw - 298px)); }
}
@media (min-width: 768px) and (max-width: 899px) { .hero-figure { bottom: -40px; } }
/* Routed S8: the phone band bleeds to the RIGHT viewport edge (it used to run
   off the left), stands at 26svh instead of a shallow inset strip, and
   overhangs so the #audits rule passes behind its lower edge. The crop carries
   87 transparent pixels of its 640 on the right, so the img box is widened by
   that share and clipped, which brings the stone itself to the viewport edge
   rather than its alpha margin. */
@media (max-width: 767px) {
  section.hero { padding-bottom: 0; }
  .hero-figure {
    position: static; width: auto; max-width: none;
    margin: 1.5rem calc(-1 * var(--page-margin)) 0 0;
    height: clamp(148px, 26svh, 232px); aspect-ratio: auto; overflow: hidden;
  }
  /* The overhang is taken on the next section rather than as a negative
     bottom margin on the band: the band is a grid item, and a negative
     bottom margin on it does not shorten the hero's last grid row. */
  #audits { margin-top: -28px; }
  .hero-figure img {
    width: 115.7%; height: 100%;
    object-fit: cover; object-position: left top;
  }
}

/* 7. S2 price cards (5.2) */
.cards {
  grid-column: 1 / -1; position: relative; z-index: 1;
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gutter); row-gap: 1.25rem; align-items: stretch; margin: 1.5rem 0 1rem;
}
.card {
  grid-column: 1 / -1; position: relative;
  background-color: var(--surface);
  background-image: var(--grain), linear-gradient(200deg, #ffffff, #fcfbf8);
  background-size: var(--grain-size), auto;
  background-blend-mode: multiply, normal;
  border: 1px solid var(--line); border-radius: 2px; padding: 1.25rem;
  display: flex; flex-direction: column; z-index: 1;
}
.cards::before, .cards::after { content: ""; position: absolute; left: 0; right: 0; height: 1px; background: var(--line); z-index: 0; }
.cards::before { top: 4.5rem; }
.cards::after { bottom: 4.5rem; }
@media (min-width: 720px) {
  .card { padding: 1.75rem; }
  .card:first-child { grid-column: 1 / 7; }
  .card.featured { grid-column: 7 / -1; }
  .card:first-child h3 { margin-top: var(--tag-row); }
}
@media (min-width: 1024px) {
  .card:first-child { grid-column: 1 / 6; }
  .card.featured { grid-column: 6 / -1; }
}
.card.featured { border-top-color: var(--ink); }
.card.featured::before { content: ""; position: absolute; left: 0; right: 0; top: 3px; height: 1px; background: var(--ink); }
.card .label {
  display: block; height: var(--tag-row); line-height: 1.1rem; font-size: 0.78rem; font-weight: 500;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent);
}
.card h3 { margin: 0 0 0.25rem; font-size: 1.45rem; line-height: 1.2; letter-spacing: -0.01em; }
.card .tag { font-size: 1.0625rem; color: var(--ink); margin: 0; }
.price { font-size: clamp(2rem, 3vw, 2.6rem); font-weight: 500; letter-spacing: -0.01em; line-height: 1; margin: 1rem 0 0.5rem; padding-top: 1rem; border-top: 1px solid var(--line); }
.price small { font-size: 0.95rem; font-weight: 400; color: var(--ink); letter-spacing: 0; }
.price-note { font-size: 0.95rem; line-height: 1.5; color: var(--ink); margin: 0; }
.card ul { margin: 1rem 0 0; padding: 1rem 0 0 1.15rem; border-top: 1px solid var(--line); font-size: 0.97rem; }
.card li.small { list-style: none; margin-left: -1.15rem; margin-top: 0.4rem; font-size: 0.9rem; color: var(--muted); }
.card .meta { font-size: 0.92rem; color: var(--muted); margin: 0.5rem 0 1rem; padding-top: 0.85rem; border-top: 1px solid var(--line); }
.card .btn { margin: auto 0 0; inline-size: 100%; }
@media (min-width: 1024px) { .card .btn { inline-size: min(100%, 21rem); padding-inline: 0.5rem; } }
.guarantee-line {
  border-top: 1px solid var(--line); border-left: 2px solid var(--accent);
  padding: 0.75rem 0 0.75rem 0.9rem; margin: -0.25rem 0 1rem; font-size: 0.95rem;
}
.overcap { font-size: 0.95rem; color: var(--muted); margin: 0.8rem 0 0; }
.overcap + .overcap { font-size: 0.9rem; }

/* 8. S3 and S8 ruled lists, S7 two columns, sample (5.10) */
#method > ul, #after > ul { list-style: none; padding: 0; margin: 0.5rem 0 1rem; }
#method > ul li, #after > ul li { padding: 0.9rem 0; margin: 0; border-top: 1px solid var(--rule); }
#method > ul li:last-child, #after > ul li:last-child { border-bottom: 1px solid var(--rule); }
@media (min-width: 900px) {
  #method > ul, #after > ul { margin-left: -24px; padding-left: 24px; max-width: calc(40rem + 24px); }
}
#method > h3 { margin-top: 1.4rem; }
/* B7: the margin column gets a job where it was empty. The six method bullets
   and the three receipts take index numerals on the rail in the register the
   steps already use (1.25rem, 500, tabular, right edge 1.5rem left of the
   rail). Counters, not typed digits, so no word is added. */
@media (min-width: 900px) {
  #method > ul { counter-reset: midx; }
  #method > ul li { position: relative; }
  #method > ul li::before {
    counter-increment: midx; content: counter(midx);
    position: absolute; right: calc(100% + 36px); top: 0.9rem;
    font-size: 1.25rem; font-weight: 500; line-height: 1.3;
    font-variant-numeric: tabular-nums; color: var(--ink);
  }
}
#after .p { display: block; margin-top: 0.4rem; font-variant-numeric: tabular-nums; }
#after .fig { font-weight: 500; font-size: 1.4rem; line-height: 1; letter-spacing: -0.01em; }
@media (min-width: 900px) {
  #after > ul { grid-column: 1 / -1; margin-left: 0; padding-left: 0; max-width: none; }
  #after > ul li { display: grid; grid-template-columns: var(--margin-w) minmax(0, 40rem); align-items: baseline; padding: 1.25rem 0; }
  #after .d { grid-column: 2; grid-row: 1; }
  #after .p { grid-column: 1; grid-row: 1; margin: 0; padding-right: 2rem; font-size: 0.92rem; line-height: 1.45; color: var(--muted); }
  #after .fig { display: block; font-size: 1.75rem; color: var(--ink); margin: 0.15rem 0; }
}
.mark-figure { display: none; position: absolute; left: 0; top: calc(-1 * var(--seam-above) - 3.5rem); width: calc(var(--rail-x) - 1px); overflow: hidden; margin: 0; z-index: 1; pointer-events: none; }
.mark-figure img { display: block; width: 480px; height: 240px; max-width: none; }
@media (min-width: 900px) { .mark-figure { display: block; grid-column: 1 / -1; grid-row: 1; } #not { padding-top: calc(var(--seam-above) + 2rem); } }
.notes { columns: 2; column-gap: 2rem; list-style: none; padding: 0; max-width: none; }
.notes li { break-inside: avoid; margin: 0 0 0.9rem; }
@media (max-width: 639px) { .notes { columns: 1; } }
#not .small { font-size: 0.9rem; }
.sample { max-width: 40rem; }

/* 9. S4 scene: buffers, band, figure, ladder (3.5, 5.3) */
.scene {
  grid-column: 1 / -1; position: relative; z-index: 1;
  background-color: var(--paper); background-image: var(--grain); background-size: var(--grain-size);
  padding: var(--scene-buffer) 0 max(0px, calc(var(--scene-buffer) - var(--seam-above)));
  margin-top: 1rem;
}
.scene > h3 { margin-top: 0; }
@media (min-width: 900px) { .scene > h3, .scene > p { margin-left: var(--margin-w); } }
.stage { position: relative; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); margin-top: 6.5rem; }
.stage::before {
  content: ""; grid-column: 6 / -1; grid-row: 1;
  position: relative; margin-right: calc(50% - 50vw);
  background-color: var(--band);
  background-image: var(--grain), linear-gradient(200deg, #f2efe8, #ebe8e0);
  background-size: var(--grain-size), auto;
  background-blend-mode: multiply, normal;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
/* Routed S2: the band's left edge used to cut straight through the block's
   cast shadow. A 56px ramp lets the shadow run out of the band onto paper,
   and takes the two hairlines out with it. */
@media (min-width: 900px) {
  .stage::before {
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 56px);
    mask-image: linear-gradient(to right, transparent 0, #000 56px);
  }
}
.figure { grid-column: 5 / -1; grid-row: 1; position: relative; z-index: 1; margin: -5rem 0 2rem; aspect-ratio: 16 / 10; align-self: start; }
.figure .frame { position: absolute; inset: 0; display: block; }
.figure .frame-a, .figure .frame-b { display: none; }
.figure img { display: block; width: 100%; height: 100%; object-fit: contain; object-position: right center; }
.figure::after {
  content: none; position: absolute; left: 45%; top: 58.6%; width: 26%; height: 1.3%;
  transform-origin: left center; transform: rotate(-16deg);
  background: linear-gradient(90deg, rgba(202,197,191,0) 0%, rgba(202,197,191,0.34) 38%, rgba(202,197,191,0.5) 56%, rgba(202,197,191,0.22) 78%, rgba(202,197,191,0) 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 32px, #000 calc(100% - 32px), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 32px, #000 calc(100% - 32px), transparent 100%);
  mix-blend-mode: screen; pointer-events: none;
}
.figure .seam { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
/* Beat 4's light pass. The window is registered to the chamfer by percentage
   of the 16:10 figure box: it starts at 44.4 percent across and 62.3 percent
   down, runs 55.2 percent of the box width and is rotated to the chamfer's
   own 16.3 degrees, measured off the rendered frame at five points along the
   edge, so it holds at every box size while the aspect holds.
   The sliver inside it is the gradient; GSAP translates the group, nothing
   else. Rendered only under html.js-motion. */
.figure .glint {
  display: none; position: absolute; left: 44.4%; top: 60.2%;
  width: 55.2%; height: 4.2%; overflow: hidden;
  transform-origin: left center; transform: rotate(-16.3deg);
  mix-blend-mode: screen; pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 42%, #000 58%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 42%, #000 58%, transparent 100%);
}
.figure .seam line { stroke: var(--ink); stroke-opacity: var(--seam-o, 0.35); stroke-width: 1px; }
.ladder {
  grid-column: 1 / 5; grid-row: 1; position: relative; align-self: start;
  margin: calc(-5rem + 8px) 0 0; padding: 0 0 3rem 72px; max-width: calc(285px + 72px); color: var(--ink);
}
.ladder::before { content: ""; position: absolute; left: 0; top: 0.72em; bottom: 0; width: 1px; background: currentColor; }
.rung { position: relative; padding-bottom: 1.5rem; font-size: 0.95rem; line-height: 1.5; }
.rung:last-child { padding-bottom: 0; }
.rung::before { content: ""; position: absolute; left: -72px; top: 0.72em; height: 1px; width: 56px; background: var(--rung-tone, currentColor); opacity: var(--tick-o, 1); }
.rung b { display: block; margin-bottom: 0.2rem; font-size: 1.05rem; line-height: 1.3; color: var(--rung-tone, inherit); }
.rung:nth-child(1) b { font-weight: 600; }
.rung:nth-child(2) b { font-weight: 550; }
.rung:nth-child(2)::before { width: 40px; }
.rung:nth-child(3) b { font-weight: 500; }
.rung:nth-child(3)::before { width: 28px; }
.rung:nth-child(4) b { font-weight: 400; }
.rung:nth-child(4)::before { width: 18px; }
@media (max-width: 899px) {
  .stage { grid-template-columns: minmax(0, 1fr); margin-top: 1.25rem; }
  .stage::before { grid-column: 1; grid-row: 1; margin-inline: calc(50% - 50vw); }
  .figure { grid-column: 1; grid-row: 1; margin: 1.25rem 0; }
  .ladder { grid-column: 1; grid-row: 2; margin: 1.5rem 0 0; padding: 0 0 2rem 44px; max-width: 40rem; }
  .rung::before { left: -44px; width: 32px; }
  .rung:nth-child(2)::before { width: 24px; }
  .rung:nth-child(3)::before { width: 17px; }
  .rung:nth-child(4)::before { width: 10px; }
}

/* 10. S5 the six steps (5.4), shared with /thanks */
.steps { grid-column: 1 / -1; counter-reset: step; list-style: none; padding: 0; margin: 1rem 0 0; max-width: none; display: grid; }
.steps li { position: relative; margin: 0; padding: 0 0 0 2.6rem; }
.steps li::before {
  counter-increment: step; content: counter(step);
  position: absolute; left: 0; top: 0; width: 1.25rem; text-align: right;
  font-size: 1.25rem; font-weight: 500; line-height: 1.3; color: var(--ink);
}
.steps li::after {
  content: ""; position: absolute; left: 1.8rem; width: 0.7rem; top: 0.8em; height: calc(100% + 1.5rem);
  border-top: 1px solid var(--ink); border-left: 1px solid var(--ink);
}
.steps li:last-child::after { border-left: 0; height: 0; }
.steps li > :last-child { margin-bottom: 0; }
.steps li p { max-width: 40rem; }
@media (max-width: 899px) { .steps { row-gap: 1.5rem; } }
@media (min-width: 900px) {
  #how .steps { grid-auto-rows: minmax(4.75rem, auto); row-gap: 0; }
  #how .steps li { padding-left: var(--margin-w); padding-bottom: 1.25rem; padding-right: max(0px, calc(100% - var(--margin-w) - 40rem)); }
  #how .steps li::before { left: auto; right: calc(100% - var(--rail-x) + 1.5rem); width: auto; top: 0; }
  #how .steps li::after { left: auto; right: calc(100% - var(--rail-x)); width: 1.5rem; height: 100%; border-left: 0; border-right: 1px solid var(--ink); }
  #how .steps li:last-child::after { border-right: 0; height: 0; }
}

/* 11. S9 ledger (5.5) */
.facts { grid-column: 1 / -1; margin: 1rem 0 0.5rem; }
.fact { display: flex; gap: 0.7rem; align-items: baseline; border-bottom: 1px solid var(--line); padding: 0.5rem 0 1rem; }
.fact .big { font-size: 1.6rem; font-weight: 500; line-height: 1; letter-spacing: -0.01em; color: var(--ink); margin: 0; flex: 0 0 4.25rem; }
.fact p { margin: 0; }
.fact p:last-child { flex: 1 1 auto; max-width: 40rem; }
@media (min-width: 900px) {
  .fact { display: grid; grid-template-columns: var(--margin-w) minmax(0, 1fr); gap: 0; align-items: baseline; padding: 3rem 0; }
  .fact .big { font-size: 1.75rem; }
}
#why > p:not(.sources) { margin-top: 1.5rem; }
/* Routed S1, two judges converged. #why is the page's second typographic
   peak: the h2 steps up to the h1's second size and spans the whole grid, and
   the three figures set at display scale and are pulled right against the
   rail so each one reads as paired with its own sentence instead of stranded
   240px to its left. The first row gets the hairline the other two have. */
#why > .section-intro h2 {
  font-size: clamp(2rem, 4.1vw, 3.1rem); line-height: 1.08; letter-spacing: -0.02em;
}
.facts { margin-top: 1.75rem; }
.fact:first-child { border-top: 1px solid var(--line); }
@media (min-width: 900px) {
  #why > .section-intro { grid-column: 1 / -1; }
  #why > .section-intro p { margin-left: var(--margin-w); }
  .fact .big {
    font-size: clamp(2.2rem, 3.3vw, 3rem); text-align: right;
    padding-right: calc(var(--margin-w) - var(--rail-x) + 1.5rem);
  }
}
/* Routed S4: one more light event from the same key in the resolution half.
   The scene's tone band returns as a half column field in #why's margin,
   bleeding to the left viewport edge and feathering out before the rail, with
   the overhead frame recurring at reduced scale inside it. It sits beside the
   closing paragraph and the sources, where the margin column is empty, so it
   never competes with the ledger figures above it. */
.ledger-figure { display: none; }
@media (min-width: 900px) {
  #why { position: relative; }
  #why > .ledger-figure {
    /* grid-column is set so the absolute containing block is the whole grid
       area rather than the reading column, which is what the bleed measures
       against. */
    grid-column: 1 / -1;
    display: block; position: absolute; z-index: 0; margin: 0;
    left: calc(50% - 50vw); bottom: calc(var(--seam-below) + 1rem);
    width: calc(50vw - 50% + var(--rail-x) - 1.5rem);
    padding: 1.1rem 0;
    background-color: var(--band);
    background-image: var(--grain), linear-gradient(200deg, #f2efe8, #ebe8e0);
    background-size: var(--grain-size), auto;
    background-blend-mode: multiply, normal;
    border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 64px), transparent 100%);
    mask-image: linear-gradient(to right, #000 calc(100% - 64px), transparent 100%);
  }
  #why > .ledger-figure img { display: block; width: 100%; height: auto; }
  #why > *:not(.ledger-figure) { position: relative; z-index: 1; }
}
.sources { font-size: 0.86rem; color: var(--muted); }
p.sources { margin: 1rem 0 0.3rem; }
ol.sources { padding-left: 1.2rem; margin: 0; }
.sources li { margin: 0 0 0.3rem; }
#src-1:target, #src-2:target { border-left: 2px solid var(--accent); padding-left: 0.6rem; }
@media (hover: hover) and (pointer: fine) {
  #why:has(a[href="#src-1"]:hover) #src-1, #why:has(a[href="#src-2"]:hover) #src-2 { color: var(--ink); }
}

/* 12. S10 FAQ rows and marker (5.6) */
/* B7: the scene band returns once as a tone edge under the FAQ rule, so the
   light that falls on the object reaches one type-only scene. Decorative; the
   only text over it is ink on band, 14.05 to 1. */
#faq::before {
  content: ""; position: absolute; left: 0; right: calc(50% - 50vw); top: 0;
  height: clamp(4.5rem, 9vh, 7rem);
  background-color: var(--band);
  background-image: var(--grain), linear-gradient(200deg, #f2efe8, #ebe8e0);
  background-size: var(--grain-size), auto;
  background-blend-mode: multiply, normal;
  -webkit-mask-image: linear-gradient(to bottom, #000 0, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0, transparent 100%);
  pointer-events: none; z-index: 0;
}
#faq > * { position: relative; z-index: 1; }
@media (min-width: 900px) { #faq::before { left: var(--rail-x); } }
details { border-top: 1px solid var(--line); padding: 0.75rem 0; max-width: 40rem; }
/* Routed S9: the last row used to close with its own hairline a few pixels
   above the section's full width rule, leaving an empty ruled slot. The
   section rule closes the list now. */
@media (min-width: 900px) { details { margin-left: -24px; padding-left: 24px; max-width: calc(40rem + 24px); } }
summary { list-style: none; position: relative; padding: 0.4rem 2.75rem 0.4rem 0; min-height: 44px; cursor: pointer; font-weight: 600; font-size: 1.0625rem; line-height: 1.4; }
summary::-webkit-details-marker { display: none; }
summary::before, summary::after { content: ""; position: absolute; right: 15px; top: calc(0.7em + 0.2rem); width: 14px; height: 2px; background: var(--muted); }
summary::after { transform: rotate(90deg); }
details[open] summary::after { transform: rotate(0); }
@media (hover: hover) and (pointer: fine) { summary:hover::before, summary:hover::after { background: var(--ink); } }
details p, details ul { margin: 0.5rem 0 0.4rem; }

/* 13. S11 ready, footer */
#ready { z-index: 1; margin-top: -1px; background-color: var(--paper); background-image: var(--grain); background-size: var(--grain-size); }
#ready .actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 0.6rem 0 1rem; }
#ready .action { margin: 0; display: flex; flex-direction: column; gap: 6px; flex: 1 1 260px; }
#ready .action .btn { align-self: flex-start; }
#ready .action .tag { font-size: 0.9375rem; color: var(--ink); }
#ready .btn { margin: 0; }
@media (max-width: 559px) { #ready .actions { flex-direction: column; } #ready .action { flex-basis: auto; } }
footer.bottom { border-top: 1px solid var(--line); padding: 2rem 0 3rem; font-size: 0.92rem; line-height: 1.55; color: var(--muted); }
footer.bottom a { color: var(--muted); }
footer.bottom p { margin: 0 0 0.7rem; max-width: none; }

/* 14. S12 the buy bar (4.2, resolver per jury cycle 2 B6) */
/* Fixed to the viewport bottom, hidden in the markup, revealed only by
   site/js/bar.js when the cards are past and #ready's own pair is off screen.
   The side padding reproduces .wrap, so the band bleeds edge to edge while its
   buttons keep the grid. */
.bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 5;
  background-color: var(--paper); background-image: var(--grain); background-size: var(--grain-size);
  border-top: 1px solid var(--line);
  padding: 8px max(var(--page-margin), calc(50% - var(--wrap) / 2));
  min-height: var(--bar-h);
  display: flex; align-items: center;
}
.bar .actions { display: flex; align-items: stretch; gap: 12px; margin: 0; width: 100%; }
.bar .btn { margin: 0; line-height: 1.3; font-size: 0.9375rem; }
@media (min-width: 900px) { .bar .actions { padding-left: var(--margin-w); } }
@media (max-width: 559px) {
  .bar { padding-bottom: calc(8px + env(safe-area-inset-bottom)); }
  .bar .actions { gap: 8px; }
  .bar .btn { flex: 1 1 auto; padding: 10px 8px; min-height: 44px; display: flex; align-items: center; justify-content: center; }
  .bar .btn:first-child { flex-shrink: 0.8; }
}

/* 15. /thanks and /404 (5.8, 5.9) */
.narrow section { display: block; }
.narrow section.hero h1 { font-size: clamp(1.85rem, 4.2vw, 2.6rem); line-height: 1.1; }
.narrow { position: relative; }
.thanks-corner { display: none; position: absolute; top: 0; right: calc(50% - 50vw); width: min(480px, 50vw - 400px); margin: 0; z-index: -1; }
.thanks-corner img { display: block; width: 100%; height: auto; }
.narrow section.hero { padding-top: clamp(1.5rem, 4vh, 2.5rem); }
@media (min-width: 1200px) { .thanks-corner { display: block; } }
.callout {
  background-color: var(--band);
  background-image: var(--grain), linear-gradient(200deg, #f2efe8, #ebe8e0);
  background-size: var(--grain-size), auto;
  background-blend-mode: multiply, normal;
  border-top: 1px solid var(--ink); padding: 1.1rem 1.25rem; margin: 1.25rem 0;
}
.callout p:last-child { margin-bottom: 0; }
.narrow section + section { border-top: 0; padding-top: 0; }
.narrow section > p:first-child { border-top: 1px solid var(--line); padding-top: 1rem; }
.narrow .steps li { margin-bottom: 1.5rem; }
.narrow .steps .btn { display: block; margin: 0.5rem 0 0; max-width: 21rem; }
.narrow .steps li:last-child { margin-bottom: 0; }
@media (max-width: 479px) { .narrow .btn { display: block; width: 100%; } }

/* 16. Legal pages (5.7) */
.legal h1 { font-size: clamp(1.85rem, 4.2vw, 2.6rem); line-height: 1.1; }
.legal main { position: relative; }
.legal main > * { max-width: 720px; }
.legal .index { margin: 0 0 1.5rem; padding: 0.75rem 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.legal .index ol { list-style: none; padding: 0; margin: 0; max-width: none; }
.legal .index li { margin: 0; break-inside: avoid; }
.legal .index a { display: block; min-height: 44px; padding: 0.7rem 0; font-size: 0.9rem; line-height: 1.45; color: var(--muted); text-decoration: none; font-variant-numeric: tabular-nums; }
.legal .index a:hover, .legal .index a:focus-visible { color: var(--accent); text-decoration: underline; }
@media (min-width: 400px) { .legal .index ol { columns: 2; column-gap: 2rem; } }
@media (min-width: 1024px) {
  .legal .narrow { width: min(var(--wrap), 100% - 2 * var(--page-margin)); }
  .legal main { display: grid; grid-template-columns: 262px minmax(0, 720px); column-gap: var(--gutter); }
  .legal main > * { grid-column: 2; }
  .legal main::before { content: ""; position: absolute; top: 0; bottom: 0; left: 274px; width: 1px; background: var(--line); pointer-events: none; }
  .legal .index { grid-column: 1; grid-row: 1 / span 400; align-self: start; position: sticky; top: 1.5rem; margin: 0; padding: 0; border: 0; }
  .legal .index ol { columns: auto; }
  .legal main > h1 { grid-row: 1; }
}
.legal h2 { margin: 2.2rem 0 0.6rem; padding-top: 1.2rem; border-top: 1px solid var(--line); font-size: 1.35rem; line-height: 1.25; letter-spacing: -0.01em; }
.legal h2:target { border-left: 2px solid var(--accent); padding-left: 0.6rem; }
.legal h3 { font-size: 1.25rem; }
.legal blockquote { margin: 0 0 1.2rem; padding: 0.25rem 0 0.25rem 1rem; border-left: 2px solid var(--accent); color: var(--ink); }
.legal blockquote p:last-child { margin-bottom: 0; }
.legal table { width: 100%; border-collapse: collapse; margin: 0 0 1.3rem; font-size: 0.94rem; }
.legal th, .legal td { text-align: left; vertical-align: top; padding: 0.55rem 0.65rem 0.55rem 0; border: 0; border-bottom: 1px solid var(--rule); }
.legal th { border-bottom-color: var(--ink); }
.legal .tablewrap { overflow-x: auto; }
.legal .meta { color: var(--muted); font-size: 0.95rem; }
.legal .mandatory {
  background-color: var(--surface);
  background-image: var(--grain), linear-gradient(200deg, #ffffff, #fcfbf8);
  background-size: var(--grain-size), auto;
  background-blend-mode: multiply, normal;
  border-top: 1px solid var(--line); border-left: 2px solid var(--accent); padding: 1rem 1.2rem; margin: 1rem 0 1.4rem;
}

/* 17. Print (5.7) */
@media print {
  @page { margin: 18mm; }
  body { font-size: 11pt; color: #000; background: #fff; }
  nav.top, .legal .index, footer.bottom a, .bar, .hero-figure, .thanks-corner, .figure { display: none; }
  .legal main { display: block; }
  .legal main > * { max-width: 100%; }
  .legal main::before, main::before { display: none; }
  a { text-decoration: underline; color: #000; }
}

/* 18. Stage 6 motion.
   Every rule in this section sits inside prefers-reduced-motion:
   no-preference, and every rule that changes presentation rather than timing
   also sits behind html.js-motion, a class site/js/main.js adds only once it
   has created a GSAP matchMedia context. With the class absent this file is
   the static build, which is also the no-JS state and the reduced-motion
   state. Transform and opacity only. */
@media (prefers-reduced-motion: no-preference) {

  /* 18.1 The FAQ marker: a quick decisive click, distinct from the scene's
     level dissolve and the bar's decelerating arrival. Transform only. */
  summary::after { transition: transform 180ms cubic-bezier(0.2, 0, 0, 1); }

  /* 18.2 The buy bar arrives once and stops. Its exit stays instant. */
  .bar { animation: bar-in 160ms cubic-bezier(0, 0, 0.2, 1); }
  @keyframes bar-in { from { transform: translateY(100%); } to { transform: none; } }

  /* 18.3 The scene's three frames become a stack: C at the bottom, B above
     it, A on top, so the composite is a complete photograph at every moment
     of the dissolve. The seam and the glint start absent and are brought in
     by the timeline. */
  html.js-motion .figure .frame-a, html.js-motion .figure .frame-b { display: block; }
  html.js-motion .figure .frame-c { z-index: 1; }
  html.js-motion .figure .frame-b { z-index: 2; }
  html.js-motion .figure .frame-a { z-index: 3; }
  html.js-motion .figure .seam { z-index: 4; opacity: 0; }
  html.js-motion .figure .glint { display: block; z-index: 5; }
  html.js-motion .scene.is-pinned .frame,
  html.js-motion .scene.is-pinned .glint-bar { will-change: opacity, transform; }

  /* 18.4 The severity ladder steps from muted to ink at the beat thresholds.
     Tone only: the leads and their ticks change colour, the sentences stay
     ink and no glyph moves. */
  html.js-motion .scene-live .rung { --rung-tone: var(--muted); --tick-o: 0.35; }
  html.js-motion .scene-live .rung.is-ink { --rung-tone: var(--ink); --tick-o: 1; }
  html.js-motion .scene-live .rung b { transition: color 160ms linear; }
  html.js-motion .scene-live .rung::before { transition: background-color 160ms linear, opacity 160ms linear; }

  /* 18.5 Pinned geometry. The pinned element is .scene-inner, so the scene's
     own quiet buffers stay as scroll space either side of the pin. The stage
     gap follows the viewport height at the short end so the whole ladder is
     inside the pinned frame at the 640px floor. */
  @media (min-width: 900px) and (min-height: 640px) {
    html.js-motion .scene-inner .stage { margin-top: min(6.5rem, 9vh); }
  }

  /* 18.6 Phones and short viewports: no pin. The figure becomes the tone
     band itself, bleeding to both viewport edges and sticking near the top
     of the screen while the four rungs scroll beneath it. The box keeps its
     16:10 aspect so the seam and the glint stay registered to the chamfer. */
  @media (max-width: 899px) {
    html.js-motion .stage { display: block; }
    html.js-motion .stage::before { content: none; }
    html.js-motion .figure {
      position: sticky; top: 7svh; z-index: 2;
      margin: 1.25rem calc(50% - 50vw);
      background-color: var(--band);
      background-image: var(--grain), linear-gradient(200deg, #f2efe8, #ebe8e0);
      background-size: var(--grain-size), auto;
      background-blend-mode: multiply, normal;
      border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
    }
    html.js-motion .figure img { object-position: center; }
    html.js-motion .ladder { position: relative; z-index: 1; }
  }
}