/* Reconcible marketing site: the homepage and every other page. Promoted from v4 (docs/website-mockups/home-v4-notes.md)
   on 2026-09-27; the other pages moved onto it the same day, and the earlier shared site.css is archived in archive/.
   Production copy for www.reconcible.com since 2026-10-03 (handover 56): forms removed, every action links to the app.
   Palette B (brand & marketing, light surface) from docs/06-brand-guidelines.html v1.3. One radius (8px), one angle
   (45°, with the hero's exploded plates a recorded homepage-only exception at 26.6°), Geist Sans, headers at 500,
   tabular figures in data. The gold net-profit figure and the plates belong to home.html alone. */

@font-face {
  font-family: "Geist";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/assets/fonts/geist-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Geist";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/assets/fonts/geist-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* Palette B tokens. Each hex keeps the one meaning the guidelines give it. */
  --c-ink: #14291A;        /* deep green: headings, primary text, primary button */
  --c-emerald: #1FA463;    /* matched marker and decorative accent, never text */
  --c-muted: #64748B;      /* secondary text on white */
  --c-slate: #475569;      /* needs review; text on tinted surfaces */
  --c-placeholder: #94A3B8;/* placeholders only */
  --c-error: #DC2626;
  --c-info: #2563EB;
  --c-focus: #7C3AED;
  --c-mint: #E8F7EE;       /* subtle background, never under a marker */
  --c-alt: #F8FAFC;
  --c-surface: #E2E8F0;
  --c-border: #CBD5E1;
  --c-white: #FFFFFF;
  --c-gold: #E5B842;       /* Palette A's data colour. Used once: the net profit figure, on deep green (8.27:1). See notes. */

  --r: 8px;
  --gutter: 16px;
  --ease-out: cubic-bezier(.23, 1, .32, 1);
  --ease-in-out: cubic-bezier(.77, 0, .175, 1);
  --d-fast: 150ms;
  --d-base: 200ms;

  --shadow-lg: 0 1px 2px rgb(20 41 26 / .06), 0 24px 48px -16px rgb(20 41 26 / .20);
}
@media (min-width: 640px) { :root { --gutter: 24px; } }
@media (min-width: 1024px) { :root { --gutter: 40px; } }

/* Base */
*, *::before, *::after { box-sizing: border-box; }
html {
  color-scheme: light;
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: 88px;
}
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0;
  background: var(--c-white);
  color: var(--c-ink);
  font: 400 16px/24px "Geist", ui-sans-serif, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  caret-color: var(--c-ink);
}
::selection { background: var(--c-mint); color: var(--c-ink); }
h1, h2, h3, p, ol, ul, dl, dd, figure { margin: 0; }
ol, ul { padding: 0; list-style: none; }
h1, h2, h3 { font-weight: 500; text-wrap: balance; }
p, li, dd { text-wrap: pretty; }
img, svg { display: block; }
table { border-collapse: collapse; width: 100%; }
caption { text-align: left; }
th { font-weight: inherit; text-align: left; }
button, input { font: inherit; color: inherit; }
strong { font-weight: 600; }

/* Links are heading text with a 1px underline that lifts on hover. No colour of their own. */
a { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: currentColor; }
@media (hover: hover) and (pointer: fine) {
  a { transition: text-decoration-color var(--d-fast) ease-out; }
  a:hover { text-decoration-color: transparent; }
}

/* Focus: violet, 2px ring, 2px offset (the offset is load-bearing), 8px radius. */
:focus-visible { outline: 2px solid var(--c-focus); outline-offset: 2px; }
a:focus-visible, summary:focus-visible, .btn--link:focus-visible { border-radius: var(--r); }

[hidden] { display: none !important; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: 16px; top: -64px; z-index: 30; background: var(--c-ink); color: var(--c-white); padding: 12px 16px; border-radius: var(--r); text-decoration: none; }
.skip:focus { top: 12px; }

.wrap { width: 100%; max-width: calc(1200px + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }

/* State glyphs and icons */
.g { width: 12px; height: 12px; flex: none; }
.g--matched { color: var(--c-emerald); }
.g--review { color: var(--c-slate); }
.g--info { color: var(--c-info); }
.g--error { color: var(--c-error); }
.icon { width: 16px; height: 16px; flex: none; }

/* Lockups: mark and wordmark (the wordmark is set in Geist here until the master vector is in the repo). */
.lockup { display: inline-flex; align-items: center; gap: 10px; color: var(--c-ink); text-decoration: none; border-radius: var(--r); }
.lockup__mark { width: 24px; height: 24px; }
.wordmark { font-size: 20px; line-height: 24px; font-weight: 700; letter-spacing: -0.026em; }
.lockup--tagline { gap: 16px; }
.lockup--tagline .lockup__mark { width: 40px; height: 40px; }
.lockup__text { display: flex; flex-direction: column; }
.lockup--tagline .wordmark { font-size: 33px; line-height: 24px; letter-spacing: -0.026em; }
.tagline { margin-top: 6px; font-size: 11px; line-height: 10px; font-weight: 500; letter-spacing: 0.02em; color: var(--c-slate); }

/* Buttons. Primary carries the 45° emerald corner, the marketing echo of the mark. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 12px 20px;
  border: 0; border-radius: var(--r);
  font-size: 16px; line-height: 24px; font-weight: 500;
  white-space: nowrap; text-decoration: none; cursor: pointer;
  transition: transform var(--d-fast) var(--ease-out), filter var(--d-fast) ease-out;
}
.btn:active { transform: scale(.97); }
.btn--primary { background: linear-gradient(225deg, var(--c-emerald) 0 12px, transparent 12px), var(--c-ink); color: var(--c-white); }
.btn--primary:disabled { cursor: progress; }
.btn--nav { min-height: 44px; padding: 12px 14px; font-size: 14px; line-height: 20px; background: linear-gradient(225deg, var(--c-emerald) 0 10px, transparent 10px), var(--c-ink); }
.btn--block { width: 100%; }
.btn--link { display: inline; padding: 0; border: 0; background: none; font: inherit; color: var(--c-ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; cursor: pointer; }
@media (hover: hover) and (pointer: fine) { .btn--link:hover { text-decoration-color: transparent; } }
.btn--quiet { background: transparent; color: var(--c-ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; padding-inline: 12px; }
@media (hover: hover) and (pointer: fine) {
  .btn--primary:hover { filter: brightness(1.06); }
  .btn--quiet:hover { text-decoration-color: transparent; }
}
@media (prefers-reduced-motion: reduce) {
  .btn { transition: filter var(--d-fast) ease-out; }
  .btn:active { transform: none; }
}

/* Navigation: the same bar on every page. From 900px, three page links; below that, a disclosure menu beside the
   button (details/summary, no script). Below 420px the lockup shows the mark alone so the lockup, the button and the menu
   fit down to 320px; its name stays for screen readers. (v4 hid the button below 360px; with the menu it now stays.) */
.nav { position: sticky; top: 0; z-index: 20; background: var(--c-white); border-bottom: 1px solid var(--c-surface); }
.nav__inner { display: flex; align-items: center; gap: 12px; height: 64px; }
.nav__links { display: none; }
.nav .btn--nav { margin-left: auto; }
.nav a[aria-current="page"] { text-decoration-thickness: 2px; text-decoration-color: var(--c-emerald); }
@media (max-width: 419px) {
  .nav .wordmark { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
@media (min-width: 900px) {
  .nav__links { display: flex; gap: 28px; margin-left: auto; }
  .nav__links a { font-size: 14px; line-height: 20px; font-weight: 500; }
  .nav .btn--nav { margin-left: 16px; }
  .menu { display: none; }
}
.menu { flex: none; }
.menu__btn {
  display: flex; align-items: center; justify-content: center; width: 44px; height: 44px;
  border: 1px solid var(--c-surface); border-radius: var(--r); color: var(--c-ink);
  cursor: pointer; list-style: none; transition: border-color var(--d-fast) ease-out;
}
.menu__btn::-webkit-details-marker { display: none; }
.menu__btn .icon--close { display: none; transform: rotate(45deg); }
.menu[open] .menu__btn { border-color: var(--c-ink); }
.menu[open] .menu__btn .icon--menu { display: none; }
.menu[open] .menu__btn .icon--close { display: block; }
@media (hover: hover) and (pointer: fine) { .menu:not([open]) .menu__btn:hover { border-color: var(--c-border); } }
/* The panel hangs from the bar (the sticky .nav is its containing block), full width, links as 48px rows. */
.menu__panel {
  position: absolute; left: 0; right: 0; top: 100%;
  padding: 4px var(--gutter) 12px;
  background: var(--c-white); border-bottom: 1px solid var(--c-surface);
  box-shadow: 0 16px 24px -16px rgb(20 41 26 / .20);
}
.menu__panel a { display: flex; align-items: center; min-height: 48px; font-size: 16px; line-height: 24px; font-weight: 500; }
.menu__panel a + a { border-top: 1px solid var(--c-surface); }
.menu[open] .menu__panel { animation: fade-in var(--d-fast) var(--ease-out); }

/* Hero */
.hero { position: relative; overflow: clip; padding: 40px 0 64px; }
.hero__grid { display: grid; gap: 48px; }
.hero h1 { font-size: 32px; line-height: 40px; letter-spacing: -0.015em; }
.hero__lead { margin-top: 16px; font-size: 16px; line-height: 24px; max-width: 34rem; }
.hero__copy { position: relative; z-index: 1; max-width: 36rem; }
@media (min-width: 768px) {
  .hero { padding: 64px 0 88px; }
  .hero h1 { font-size: 48px; line-height: 56px; letter-spacing: -0.02em; }
  .hero__lead { margin-top: 20px; font-size: 20px; line-height: 28px; }
}
@media (min-width: 1024px) {
  .hero { padding: 72px 0 104px; }
  .hero__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: start; }
  .hero__copy { padding-top: clamp(64px, 9vw, 128px); }
}
@media (min-width: 1280px) {
  .hero__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
}

/* The mint band: the mark's counter shape at 45°, scaled up behind the statement. */
.hero__art { position: relative; isolation: isolate; }
.hero__art::before {
  content: "";
  position: absolute; z-index: -1;
  left: 50%; top: 50%;
  width: clamp(180px, 22vw, 320px); height: 2200px;
  background: var(--c-mint);
  border-right: 3px solid var(--c-emerald);
  transform: translate(-50%, -50%) rotate(-45deg);
  pointer-events: none;
}
/* Stacked hero: the band stays inside the statement's own strip, cut level above and below
   like the mark's counter shape, so it never runs up into the copy. */
@media (max-width: 1023px) {
  .hero { padding-bottom: 0; }
  .hero__grid { gap: 16px; }
  .hero__art { overflow: clip; margin-inline: calc(-1 * var(--gutter)); padding: 24px var(--gutter) 40px; }
}

/* Statement card: the brand's print artifact (Overview §07), here taken apart as an exploded view. */
.stmt {
  width: 100%; max-width: 560px; margin-inline: auto;
  background: var(--c-white);
  border-radius: var(--r);
  box-shadow: 0 0 0 1px rgb(20 41 26 / .04), var(--shadow-lg);
  font-variant-numeric: tabular-nums;
}
@media (min-width: 640px) { .stmt { margin-inline: 0 auto; } }
@media (min-width: 1024px) { .stmt { margin-inline: auto 0; } }
.stmt__head { display: flex; align-items: center; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--c-surface); }
.stmt__mark { width: 24px; height: 24px; }
.stmt__store { font-size: 14px; line-height: 20px; font-weight: 600; }
.stmt__kind { font-size: 12px; line-height: 16px; color: var(--c-muted); }
.stmt__period { margin-left: auto; font-size: 14px; line-height: 20px; font-weight: 500; }
.stmt__link { display: inline-flex; align-items: center; gap: 6px; color: inherit; }
.stmt__link .icon { width: 14px; height: 14px; opacity: .55; transition: transform var(--d-fast) var(--ease-out), opacity var(--d-fast) ease-out; }
@media (hover: hover) and (pointer: fine) {
  .stmt__link:hover .icon { opacity: 1; transform: translateX(3px); }
}
.stmt__foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 16px; padding: 12px 20px 14px; border-top: 1px solid var(--c-surface); font-size: 12px; line-height: 16px; color: var(--c-muted); }
.stmt__legend { display: inline-flex; align-items: center; gap: 6px; }
.stmt__foot a { padding-block: 14px; margin-block: -14px; }

/* Exploded view, ending readable at rest (see "Closed and opening" below for the reveal). Each layer is a plate: a CSS 3D box seen
   isometrically, turned to the brand's 45° (rotateX 60°, rotateZ −45°), its thickness in proportion to the
   amount (132px for $84,120; disputes are held at a 3px minimum). The orders total is not a plate but a
   bracket round the whole stack, and "paid out" is a dashed cut with no thickness: every plate under it
   is what the payouts carried. Labels and figures are flat HTML beside each plate, on a leader line.
   --c is the layer's row centre when open, --dy its offset when closed (plates flush, centred). */
.xv { container: xv / inline-size; --xv-move: 240ms; --xv-stagger: 40ms; --xv-fade: var(--d-base); }
.xv__stage { position: relative; padding: 20px 20px 16px; }
.xv__layers {
  --S: 148px; --W: calc(var(--S) * 1.41421); --D: calc(var(--S) * .70711);
  position: relative; height: calc(var(--D) + 421px);
}
.xv__layer {
  --fill: var(--c-white); --edge: rgb(20 41 26 / .18);
  position: absolute; left: 0; right: 0; height: 0;
  top: calc(var(--D) / 2 + 2px + var(--c) * 1px);
  z-index: calc(10 - var(--i));
}
.xv__layer--ded { --fill: var(--c-alt); }
.xv__layer--paid { --fill: var(--c-mint); --edge: rgb(20 41 26 / .45); }
.xv__layer--cost { --fill: var(--c-surface); }
.xv__layer--net { --fill: var(--c-ink); --edge: rgb(20 41 26 / 1); }

.xv__plate { position: absolute; left: 0; width: var(--W); top: calc(var(--D) / -2 - var(--h) * .5px); height: calc(var(--D) + var(--h) * 1px); }
.xv__box {
  position: absolute; width: var(--S); height: var(--S);
  left: calc(50% - var(--S) / 2); top: calc(var(--D) / 2 + var(--h) * 1px - var(--S) / 2);
  transform: rotateX(60deg) rotateZ(-45deg); transform-style: preserve-3d;
}
/* Side shading is an inset shadow, not an image, so it changes colour smoothly with the fill. */
.xv__box > span { position: absolute; display: block; background-color: var(--fill); box-shadow: inset 0 0 0 1px var(--edge), inset 0 0 0 999px var(--shade, transparent); }
.xv__top { inset: 0; transform: translateZ(calc(var(--h) * 1px / .866)); }
.xv__r { left: 0; top: 100%; width: 100%; height: calc(var(--h) * 1px / .866); transform-origin: top; transform: rotateX(90deg); --shade: rgb(20 41 26 / .16); }
.xv__l { right: 100%; top: 0; height: 100%; width: calc(var(--h) * 1px / .866); transform-origin: right; transform: rotateY(90deg); --shade: rgb(20 41 26 / .07); }
.xv__layer--net .xv__r { --shade: rgb(0 0 0 / .34); }
.xv__layer--net .xv__l { --shade: rgb(0 0 0 / .18); }
/* Paid out: a dashed cut through the stack, with no thickness of its own. */
.xv__layer--paid .xv__top { box-shadow: none; border: 1px dashed rgb(20 41 26 / .6); }
.xv__layer--paid :is(.xv__l, .xv__r) { display: none; }
/* Orders: a bracket from its label, over the top of the stack and down to the bottom of net profit
   (net's row centre 397, plus half its 39px thickness, plus half a plate's depth). */
.xv__bracket {
  position: absolute; left: -10px; top: 0; width: calc(var(--W) + 34px); height: calc(var(--D) / 2 + 440.5px);
  border: 0 solid var(--c-muted); border-width: 1px 0 0 1px;
}
.xv__bracket::after { content: ""; position: absolute; left: 0; bottom: 0; width: 8px; border-bottom: 1px solid var(--c-muted); }
.xv__key { margin-top: 12px; font-size: 12px; line-height: 16px; color: var(--c-muted); }

.xv__lead { position: absolute; left: calc(var(--W) + 6px); top: -2.5px; width: 18px; height: 5px; overflow: visible; }
.xv__lead path { stroke: var(--c-border); stroke-width: 1; fill: none; }
.xv__lead rect { fill: var(--c-ink); }
.xv__call {
  position: absolute; left: calc(var(--W) + 30px); right: 0; top: 0; transform: translateY(-50%);
  display: grid; grid-template-columns: minmax(0, 1fr) auto 12px; column-gap: 10px; align-items: baseline;
}
.xv__label { font-size: 15px; line-height: 20px; }
.xv__amt { grid-column: 2; text-align: right; white-space: nowrap; font-size: 15px; line-height: 20px; font-weight: 500; }
.xv__state { grid-column: 3; align-self: center; }
.xv__state .g { margin-top: 1px; }
.xv__sub { grid-column: 1 / -1; margin-top: 2px; font-size: 12px; line-height: 16px; color: var(--c-muted); }
.xv__layer--lid .xv__label, .xv__layer--paid .xv__label { font-weight: 600; }
/* Each linked layer is tappable across its whole label block (its row, on phones). */
.xv__call .stmt__link::after { content: ""; position: absolute; inset: 0; }
/* Net profit lands on a deep-green tag: the one gold figure on the page (see notes). */
.xv__layer--net .xv__call {
  grid-template-columns: minmax(0, 1fr) auto; row-gap: 0;
  padding: 10px 14px; margin-left: -14px; border-radius: var(--r);
  background: var(--c-ink); color: var(--c-white);
}
.xv__layer--net .xv__label { font-size: 16px; line-height: 24px; font-weight: 500; }
.xv__layer--net .xv__amt { grid-row: 1 / span 2; align-self: center; font-size: 28px; line-height: 36px; letter-spacing: -0.01em; color: var(--c-gold); }
.xv__layer--net .xv__sub { grid-column: 1; color: var(--c-white); opacity: .8; }
.xv__layer--net .xv__lead { width: 4px; }
.xv__layer--net .stmt__link:focus-visible { outline: 0; box-shadow: 0 0 0 2px var(--c-white), 0 0 0 4px var(--c-focus); }

/* Narrower card (the 1024–1279px hero column): smaller plates; each figure sits under its label, and the
   sub-lines are kept for screen readers only. */
@container xv (max-width: 519px) {
  .xv__layers { --S: 112px; }
  .xv__lead { width: 12px; }
  .xv__bracket { width: calc(var(--W) + 28px); }
  .xv__call { left: calc(var(--W) + 22px); grid-template-columns: auto 12px; justify-content: start; }
  .xv__amt { grid-column: 1; grid-row: 2; text-align: left; }
  .xv__state { grid-row: 1; grid-column: 2; }
  .xv__sub { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .xv__layer--net .xv__call { grid-template-columns: auto; }
  .xv__layer--net .xv__amt { grid-row: 2; font-size: 24px; line-height: 32px; }
}

/* Phones: the layers stack vertically as flat slabs, each with a 45° top and side edge. */
@container xv (max-width: 419px) {
  .xv__stage { padding: 14px 22px 14px 16px; }
  .xv__call { padding-block: 6px; }
  .xv__layers { height: auto; display: grid; gap: 8px; padding-top: 6px; }
  .xv__layer {
    position: relative; top: auto; height: 44px;
    background-color: var(--fill); box-shadow: inset 0 0 0 1px var(--edge);
  }
  .xv__layer::before, .xv__layer::after { content: ""; position: absolute; background-color: var(--fill); box-shadow: inset 0 0 0 1px var(--edge), inset 0 0 0 99px var(--shade, transparent); }
  .xv__layer::before { --shade: rgb(20 41 26 / .07); left: 0; right: 0; bottom: 100%; height: 6px; transform-origin: bottom left; transform: skewX(-45deg); }
  .xv__layer::after { --shade: rgb(20 41 26 / .16); top: 0; bottom: 0; left: 100%; width: 6px; transform-origin: top left; transform: skewY(-45deg); }
  .xv__layer--net { height: 56px; }
  .xv__layer--net::after { --shade: rgb(0 0 0 / .34); }
  .xv__layer--net::before { --shade: rgb(255 255 255 / .12); }
  /* Orders: a plain row, with the bracket as a rail down the left of every slab under it. */
  .xv__layer--lid { background: none; box-shadow: none; }
  .xv__layers::before { content: ""; position: absolute; left: -9px; top: 28px; bottom: 0; width: 6px; border: 1px solid var(--c-muted); border-right: 0; }
  /* Paid out: the dashed cut, a row with no thickness. */
  .xv__layer--paid { background: none; box-shadow: none; border: 1px dashed rgb(20 41 26 / .6); }
  .xv__layer--lid::before, .xv__layer--lid::after, .xv__layer--paid::before, .xv__layer--paid::after { content: none; }
  .xv__plate, .xv__lead, .xv__bracket, .xv__key-size { display: none; }
  .xv__call { position: static; transform: none; height: 100%; padding: 8px 12px; align-content: center; grid-template-columns: minmax(0, 1fr) auto 12px; }
  .xv__amt { grid-column: 2; grid-row: 1; text-align: right; }
  .xv__state { grid-column: 3; grid-row: 1; }
  .xv__layer--net .xv__call { grid-template-columns: minmax(0, 1fr) auto; }
  .xv__layer--net .xv__amt { grid-column: 2; grid-row: 1 / span 2; font-size: 28px; line-height: 36px; }
  .xv__layer--net .xv__call { margin: 0; padding: 8px 12px; border-radius: 0; background: none; }
  /* Muted text on the surface-grey cost slabs is 3.86:1; slate there is 6.15:1 (WCAG AA, handover 56). */
  .xv__layer--cost .xv__sub { color: var(--c-slate); }
}

/* Closed and opening, 520px and wider only, and only with motion allowed (the head script adds .xv-anim on the
   same test). Closed: one white slab carrying the only figure WooCommerce shows. Opening: plates separate on the
   guidelines' on-screen curve, 240ms each, 40ms apart; each label fades in as its plate settles; the bracket and
   the caption fade in once the last plate lands, so it ends on the readable drawing. Below 520px the closed state
   can't apply, so the phone card is never blank. */
@media (min-width: 520px) and (prefers-reduced-motion: no-preference) {
  .xv-anim .xv:not(.is-open) .xv__layer { --fill: var(--c-white); --edge: transparent; transform: translateY(calc(var(--dy) * 1px)); }
  .xv-anim .xv:not(.is-open) .xv__layer--lid + .xv__layer .xv__top { box-shadow: inset 0 0 0 1px var(--c-border); }
  .xv-anim .xv:not(.is-open) .xv__layer--paid .xv__top { border-color: transparent; }
  .xv-anim .xv:not(.is-open) .xv__layer--net .xv__r { --shade: rgb(20 41 26 / .16); }
  .xv-anim .xv:not(.is-open) .xv__layer--net .xv__l { --shade: rgb(20 41 26 / .07); }
  .xv-anim .xv:not(.is-open) :is(.xv__layer:not(.xv__layer--lid) :is(.xv__call, .xv__lead), .xv__bracket, .xv__key) { opacity: 0; }

  .xv-anim .xv__layer {
    --xv-delay: calc(var(--i) * var(--xv-stagger));
    transition: transform var(--xv-move) var(--ease-in-out) var(--xv-delay),
                background-color var(--xv-fade) ease-out var(--xv-delay), box-shadow var(--xv-fade) ease-out var(--xv-delay);
  }
  .xv-anim .xv__box > span {
    transition: background-color var(--xv-fade) ease-out var(--xv-delay), box-shadow var(--xv-fade) ease-out var(--xv-delay), border-color var(--xv-fade) ease-out var(--xv-delay);
  }
  .xv-anim .xv__call, .xv-anim .xv__lead { transition: opacity var(--xv-fade) var(--ease-out) calc(var(--xv-delay) + var(--xv-move) / 2); }
  .xv-anim :is(.xv__bracket, .xv__key) { transition: opacity var(--xv-fade) var(--ease-out) calc(7 * var(--xv-stagger) + var(--xv-move)); }
  /* Keyboard: focus inside opens it at once, with nothing animating (§16). */
  .xv.is-instant :is(.xv__layer, .xv__box > span, .xv__call, .xv__lead, .xv__bracket, .xv__key) { transition: none; }
}

@keyframes tick-in { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }

/* Sections */
.section { padding: 48px 0; }
.section--alt { background: var(--c-alt); }
.section__head { max-width: 46rem; }
.section h2, .access h2 { font-size: 24px; line-height: 32px; letter-spacing: -0.01em; }
.lead { margin-top: 16px; font-size: 16px; line-height: 24px; max-width: 42rem; }
@media (min-width: 768px) {
  .section { padding: 72px 0; }
  .section h2, .access h2 { font-size: 32px; line-height: 40px; letter-spacing: -0.015em; }
  .lead { font-size: 20px; line-height: 28px; }
}
@media (min-width: 1024px) {
  .section { padding: 112px 0; }
}

/* Recognition: five situations, each marked with the mark's leg, a 45° stroke. */
.familiar { padding-top: 16px; }
.familiar__grid { display: grid; gap: 20px; }
.familiar__list { max-width: 44rem; }
.familiar__list li { position: relative; padding: 8px 0 8px 28px; border-top: 1px solid var(--c-surface); }
.familiar__list li:last-child { border-bottom: 1px solid var(--c-surface); }
.familiar__list li::before {
  content: ""; position: absolute; left: 3px; top: 14px; width: 14px; height: 3px;
  background: var(--c-emerald); transform: rotate(45deg); transform-origin: 1.5px 1.5px;
}
@media (min-width: 768px) {
  .familiar__list li { font-size: 20px; line-height: 28px; padding-block: 16px; }
  .familiar__list li::before { top: 26px; }
}
@media (min-width: 1024px) {
  .familiar { padding-top: 24px; }
  .familiar__grid { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 56px; align-items: start; }
}

/* Layer tag: the hero plate a section explains, as a flat slab with the same 45° edges. */
.layer-tag {
  --fill: var(--c-white); --edge: rgb(20 41 26 / .18);
  position: relative; display: inline-grid; grid-template-columns: auto auto; column-gap: 24px; align-items: baseline;
  margin: 24px 6px 0 0; padding: 8px 14px;
  background: var(--fill); box-shadow: inset 0 0 0 1px var(--edge);
  font-variant-numeric: tabular-nums;
}
.layer-tag::before, .layer-tag::after { content: ""; position: absolute; background-color: var(--fill); box-shadow: inset 0 0 0 1px var(--edge); }
.layer-tag::before { left: 0; right: 0; bottom: 100%; height: 6px; transform-origin: bottom left; transform: skewX(-45deg); background-image: linear-gradient(rgb(20 41 26 / .07), rgb(20 41 26 / .07)); }
.layer-tag::after { top: 0; bottom: 0; left: 100%; width: 6px; transform-origin: top left; transform: skewY(-45deg); background-image: linear-gradient(rgb(20 41 26 / .16), rgb(20 41 26 / .16)); }
.layer-tag__label { font-size: 14px; line-height: 20px; font-weight: 500; }
.layer-tag__amt { font-size: 16px; line-height: 24px; font-weight: 500; text-align: right; }
.layer-tag__sub { grid-column: 1 / -1; font-size: 12px; line-height: 16px; color: var(--c-muted); }
@media (max-width: 767px) { .layer-tag__sub { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } }
.layer-tag--net { --fill: var(--c-ink); --edge: var(--c-ink); color: var(--c-white); }
.layer-tag--net .layer-tag__sub { color: var(--c-white); }
.layer-tag--net::after { background-image: linear-gradient(rgb(0 0 0 / .34), rgb(0 0 0 / .34)); }
.layer-tag--net::before { background-image: linear-gradient(rgb(255 255 255 / .12), rgb(255 255 255 / .12)); }

/* Payout walk */
.walk { display: grid; gap: 16px; margin-top: 16px; font-variant-numeric: tabular-nums; }
.walk__side { display: grid; gap: 16px; align-content: start; }
.walk__list { display: grid; gap: 8px; }
.walk__tab {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "gw amt" "date state";
  gap: 2px 16px; width: 100%; padding: 10px 16px;
  text-align: left; cursor: pointer;
  background: var(--c-white); border: 1px solid var(--c-surface); border-radius: var(--r);
  transition: border-color var(--d-fast) ease-out, transform var(--d-fast) var(--ease-out);
}
.walk__tab:active { transform: scale(.97); }
.walk__tab[aria-selected="true"] {
  border-color: var(--c-ink);
  box-shadow: inset 0 0 0 1px var(--c-ink);
  background: linear-gradient(225deg, var(--c-ink) 0 12px, transparent 12px), var(--c-white);
}
@media (hover: hover) and (pointer: fine) {
  .walk__tab[aria-selected="false"]:hover { border-color: var(--c-border); }
}
@media (prefers-reduced-motion: reduce) { .walk__tab:active { transform: none; } }
.walk__gw { grid-area: gw; font-size: 16px; line-height: 20px; font-weight: 500; }
.walk__amt { grid-area: amt; font-size: 16px; line-height: 20px; font-weight: 500; text-align: right; padding-right: 8px; }
.walk__date { grid-area: date; font-size: 12px; line-height: 16px; color: var(--c-muted); }
.walk__state { grid-area: state; justify-self: end; display: inline-flex; align-items: center; gap: 6px; font-size: 12px; line-height: 16px; padding-right: 8px; }
.walk__panel { background: var(--c-white); border: 1px solid var(--c-surface); border-radius: var(--r); padding: 8px 0 0; }
.walk__panel.is-entering { animation: fade-in var(--d-base) var(--ease-out); }
.walk__panel.is-entering .tick { animation: tick-in 200ms var(--ease-out) both; animation-delay: calc(60ms + var(--i, 0) * 40ms); }
.walk__note { padding: 14px max(20px, calc(100% - 68ch)) 18px 20px; border-top: 1px solid var(--c-surface); font-size: 14px; line-height: 20px; color: var(--c-slate); background: var(--c-alt); border-radius: 0 0 var(--r) var(--r); }
@media (min-width: 1024px) {
  .walk { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 24px; align-items: start; }
}

.ledger caption { padding: 12px 20px 8px; font-size: 12px; line-height: 16px; color: var(--c-muted); }
.ledger th { padding: 10px 8px 10px 20px; font-size: 15px; line-height: 20px; vertical-align: top; }
.ledger td { padding: 10px 0; vertical-align: top; }
.ledger__sub { display: block; margin-top: 2px; font-size: 12px; line-height: 16px; color: var(--c-muted); }
.ledger__amt { text-align: right; white-space: nowrap; font-size: 15px; line-height: 20px; font-weight: 500; }
.ledger__amt--none { font-weight: 400; color: var(--c-muted); font-size: 14px; }
.ledger__state { width: 48px; padding-left: 12px !important; padding-right: 20px !important; }
.ledger__state .g { margin-top: 4px; margin-left: auto; }
.ledger tbody + tbody { border-top: 1px solid var(--c-surface); }
.ledger__sum th { font-weight: 600; }
.ledger__sum .ledger__sub { font-weight: 400; }
/* The row that needs a look: ink outline, the tabs' 45° ink corner, a heavier label and the marketing pill (§08). */
.ledger__flag { outline: 1px solid var(--c-ink); outline-offset: -1px; }
.ledger__flag th { position: relative; font-weight: 500; }
.ledger__flag th::before { content: ""; position: absolute; left: 0; top: 0; width: 10px; height: 10px; background: linear-gradient(135deg, var(--c-ink) 50%, transparent 50%); }
.ledger__flag .ledger__sub { color: var(--c-slate); font-weight: 400; }
.pill {
  display: inline-flex; align-items: center; gap: 6px; margin: 4px 0 0; padding: 2px 10px 2px 8px;
  border: 1px solid var(--c-surface); border-radius: 99px; background: var(--c-alt);
  color: var(--c-ink); font-size: 12px; line-height: 16px; font-weight: 500; white-space: nowrap;
}
.ledger__sub .pill { margin-left: 4px; }

.legend { display: flex; flex-wrap: wrap; gap: 8px 24px; margin-top: 8px; font-size: 12px; line-height: 16px; color: var(--c-slate); }
.legend li { display: inline-flex; align-items: center; gap: 6px; }

/* Cost of goods ledger */
.lots { margin-top: 24px; font-variant-numeric: tabular-nums; }
.lots__product { font-size: 14px; line-height: 20px; color: var(--c-muted); }
.lots__sku { display: inline-block; margin-right: 8px; font-weight: 600; color: var(--c-ink); }
.lots__table { margin-top: 12px; }
.lots__table thead th { padding: 0 16px 12px; font-size: 12px; line-height: 16px; font-weight: 500; color: var(--c-muted); border-bottom: 1px solid var(--c-border); vertical-align: bottom; }
.lots__table thead th:first-child { padding-left: 0; }
.lots__table tbody th { padding: 16px 16px 16px 0; font-size: 16px; line-height: 24px; font-weight: 500; }
.lots__table td { padding: 16px; font-size: 16px; line-height: 24px; white-space: nowrap; }
.lots__table tbody tr { border-bottom: 1px solid var(--c-surface); }
.lots__sub { display: block; font-size: 12px; line-height: 16px; font-weight: 400; color: var(--c-muted); }
.lots__table .num { text-align: right; }
.lots__table tbody th.num, .lots__table thead th.num { text-align: right; }
.lots__margin { font-size: 20px !important; line-height: 28px !important; font-weight: 500; padding-right: 0 !important; }
.lots__table thead th:last-child { padding-right: 0; }
.lots__field th, .lots__field td { color: var(--c-muted); }
.lots__field s { text-decoration-thickness: 1px; }
.lots__point { margin-top: 24px; max-width: 40rem; font-size: 20px; line-height: 28px; }
.lots__point strong { font-weight: 500; background: linear-gradient(transparent 62%, var(--c-mint) 62%); }
@media (min-width: 768px) {
  .lots__point { margin-top: 32px; font-size: 24px; line-height: 32px; }
}
/* Below 768px each lot is one compact block: name and margin, then its four costs in a row. */
@media (max-width: 767px) {
  .lots__table, .lots__table tbody, .lots__table tr, .lots__table th, .lots__table td { display: block; }
  .lots__table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .lots__table tbody tr {
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) auto;
    grid-template-areas: "name name name name margin" "sup fr du unit margin";
    gap: 8px 10px; padding: 14px 0;
  }
  .lots__table tbody th { grid-area: name; padding: 0; }
  .lots__table td { padding: 0; text-align: left !important; white-space: nowrap; font-size: 14px; line-height: 20px; }
  .lots__table td:nth-of-type(1) { grid-area: sup; }
  .lots__table td:nth-of-type(2) { grid-area: fr; }
  .lots__table td:nth-of-type(3) { grid-area: du; }
  .lots__table td:nth-of-type(4) { grid-area: unit; font-weight: 500; }
  .lots__table td:nth-of-type(5) { grid-area: margin; align-self: center; text-align: right !important; }
  .lots__table td:not(.lots__margin)::before { content: attr(data-label) / ""; display: block; font-size: 12px; line-height: 16px; font-weight: 400; color: var(--c-muted); }
}

/* Restatement */
.restate { display: grid; gap: 20px; margin-top: 40px; }
.restate h3 { font-size: 20px; line-height: 28px; }
.restate__copy p { margin-top: 12px; max-width: 34rem; }
.restate__log { border: 1px solid var(--c-surface); border-radius: var(--r); font-variant-numeric: tabular-nums; }
.restate__table thead th { padding: 14px 20px 10px; font-size: 12px; line-height: 16px; font-weight: 500; color: var(--c-muted); border-bottom: 1px solid var(--c-surface); }
.restate__table tbody th { padding: 14px 20px; font-weight: 500; vertical-align: top; }
.restate__table td { padding: 14px 20px 14px 0; vertical-align: top; white-space: nowrap; }
.restate__table tbody tr + tr { border-top: 1px solid var(--c-surface); }
.restate__table .num { text-align: right; }
.restate__table td.num .icon { display: inline-block; vertical-align: -3px; margin: 0 6px; color: var(--c-muted); }
.restate__sub { display: block; font-size: 12px; line-height: 16px; font-weight: 400; color: var(--c-muted); }
.restate__was { color: var(--c-muted); text-decoration: line-through; text-decoration-thickness: 1px; }
.restate__reason { display: flex; align-items: center; gap: 8px; padding: 12px 20px; border-top: 1px solid var(--c-surface); background: var(--c-alt); font-size: 14px; line-height: 20px; color: var(--c-slate); border-radius: 0 0 var(--r) var(--r); }
@media (min-width: 1024px) {
  .restate { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 56px; align-items: start; margin-top: 96px; }
  .restate h3 { font-size: 24px; line-height: 32px; }
}
/* Phones: the old figure sits above the new one, so the row never needs more than 288px. */
@media (max-width: 479px) {
  .restate__table th, .restate__table td { padding-left: 14px !important; padding-right: 14px !important; }
  .restate__table td.num .icon { display: none; }
  .restate__was { display: block; }
  .restate__reason { padding-inline: 14px; }
}

/* In development: the brief and Rico */
.preview { display: grid; gap: 12px; margin-top: 24px; }
.brief, .ask { background: var(--c-white); border: 1px solid var(--c-surface); border-radius: var(--r); padding: 16px; }
.brief { font-variant-numeric: tabular-nums; }
.brief__head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
.brief__title { font-size: 16px; line-height: 24px; font-weight: 600; }
.brief__date { font-size: 14px; line-height: 20px; color: var(--c-muted); }
.brief__list { margin-top: 12px; counter-reset: brief; }
.brief__list li { position: relative; padding: 10px 0 10px 28px; border-top: 1px solid var(--c-surface); counter-increment: brief; }
.brief__list li::before { content: counter(brief); position: absolute; left: 0; top: 10px; width: 20px; font-size: 14px; font-weight: 600; color: var(--c-muted); }
.brief__list strong { font-weight: 500; }
.brief__foot, .ask__foot { margin-top: 4px; padding-top: 12px; border-top: 1px solid var(--c-surface); font-size: 12px; line-height: 16px; color: var(--c-muted); }
.ask { display: flex; flex-direction: column; }
/* The question is a sent message, not a field: tinted, right-aligned, no border. */
.ask__q { align-self: flex-end; width: fit-content; max-width: 88%; padding: 10px 14px; background: var(--c-alt); border-radius: var(--r); font-size: 16px; line-height: 24px; }
.ask__q .ask__who { margin-bottom: 2px; }
.ask__a { margin-top: 16px; flex: 1; }
.ask__who { display: block; font-size: 12px; line-height: 16px; font-weight: 600; color: var(--c-muted); margin-bottom: 6px; }
.ask__src { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; font-size: 12px; line-height: 16px; }
.ask__src-label { color: var(--c-muted); }
.chip { padding: 3px 10px; border: 1px solid var(--c-surface); border-radius: 99px; background: var(--c-alt); font-variant-numeric: tabular-nums; }
.ask__foot { margin-top: 16px; }
/* On phones the two examples read at Small size, as the product previews they are. */
@media (max-width: 767px) {
  .brief__list li, .ask__a > p:not(.ask__who):not(.ask__src), .ask__q { font-size: 14px; line-height: 20px; }
  .brief__list li::before { line-height: 20px; }
}
@media (min-width: 1024px) {
  .preview { grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 56px; }
  .brief, .ask { padding: 28px 32px; }
}

/* Trust: the statement's notes. Four commitments, each a run-in heading and a sentence or two. */
.notes { display: grid; margin-top: 16px; counter-reset: note; }
.notes li { position: relative; padding: 12px 0 12px 28px; border-top: 1px solid var(--c-surface); counter-increment: note; font-size: 14px; line-height: 20px; }
.notes li::before { content: counter(note); position: absolute; left: 0; top: 12px; font-size: 14px; line-height: 20px; font-weight: 600; color: var(--c-muted); font-variant-numeric: tabular-nums; }
.notes h3 { display: inline; font-size: inherit; line-height: inherit; font-weight: 500; }
.notes p { display: inline; }
.more { margin-top: 16px; font-weight: 500; }
.more a { display: inline-block; padding: 12px 0; }
@media (min-width: 768px) {
  .notes { grid-template-columns: 1fr 1fr; column-gap: 48px; margin-top: 24px; }
  .notes li { padding: 20px 0 20px 32px; font-size: 16px; line-height: 24px; }
  .notes li::before { top: 20px; line-height: 24px; }
}

/* Fit: who it isn't for yet, and a note for the bookkeeper who gets sent the link. */
.fit__grid { display: grid; gap: 32px; }
.fit__list { margin-top: 16px; max-width: 38rem; }
.fit__list li { position: relative; padding: 8px 0 8px 24px; border-top: 1px solid var(--c-border); font-size: 14px; line-height: 20px; }
@media (min-width: 768px) { .fit__list li { padding-block: 10px; font-size: 16px; line-height: 24px; } .fit__list li::before { top: 21px; } }
.fit__list li:last-child { border-bottom: 1px solid var(--c-border); }
.fit__list li::before { content: ""; position: absolute; left: 2px; top: 17px; width: 10px; height: 2px; background: var(--c-slate); }
.fit__yes { margin-top: 12px; max-width: 38rem; font-weight: 500; }
.fit__books { padding-top: 16px; border-top: 1px solid var(--c-ink); }
.fit__books .fit__books-title { font-size: 20px; line-height: 28px; letter-spacing: 0; }
.fit__books p { margin-top: 8px; max-width: 34rem; }
@media (min-width: 1024px) {
  .fit__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: 72px; align-items: start; }
  .fit__books { margin-top: 56px; }
}

/* Questions */
.faq { display: grid; gap: 16px; }
.faq__aside { margin-top: 12px; font-size: 14px; line-height: 20px; color: var(--c-muted); }
.faq__list details { border-top: 1px solid var(--c-surface); }
.faq__list details:last-child { border-bottom: 1px solid var(--c-surface); }
.faq summary {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 24px;
  padding: 14px 0; cursor: pointer; list-style: none;
  font-size: 16px; line-height: 24px; font-weight: 500;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary .icon--plus { margin-top: 4px; transition: transform var(--d-fast) var(--ease-out); }
.faq details[open] .icon--plus { transform: rotate(45deg); }
.faq details.is-key .icon--plus { transition: none; }
.faq details p { padding: 0 40px 20px 0; max-width: 40rem; }
@media (prefers-reduced-motion: reduce) { .faq summary .icon--plus { transition: none; } }
@media (min-width: 1024px) {
  .faq { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 56px; align-items: start; }
  .faq__head { position: sticky; top: 112px; }
  .faq summary { padding: 20px 0; font-size: 20px; line-height: 28px; }
  .faq details p { padding-bottom: 24px; }
}

/* The close: the brand's container shape (45° corner) in mint. Heading, then the one action, then what's included;
   on desktop the action sits beside both. */
.access { padding: 8px 0 48px; }
.access__box {
  display: grid; gap: 24px; grid-template-areas: "head" "cta" "offer" "launch";
  padding: 40px 20px 24px;
  background: var(--c-mint);
  clip-path: polygon(40px 0, 100% 0, 100% 100%, 0 100%, 0 40px);
}
.access__head { grid-area: head; }
.access .lead { color: var(--c-ink); }
.offer { grid-area: offer; display: grid; max-width: 34rem; }
.offer > div { padding: 12px 0; border-top: 1px solid var(--c-border); }
.offer dt { font-weight: 500; }
.offer dd { margin-top: 2px; color: var(--c-slate); font-size: 14px; line-height: 20px; }
@media (min-width: 768px) { .offer dd { font-size: 16px; line-height: 24px; } }
/* The unbuilt features the offer's third line promises, folded in rather than a section of their own. */
.access__launch { grid-area: launch; padding-top: 24px; border-top: 1px solid var(--c-border); }
.access__launch-lead { max-width: 46rem; color: var(--c-ink); }
.access__launch .preview { margin-top: 20px; }
@media (min-width: 640px) {
  .access__box { padding: 64px 40px 40px; clip-path: polygon(56px 0, 100% 0, 100% 100%, 0 100%, 0 56px); }
}
@media (min-width: 1024px) {
  .access { padding: 32px 0 112px; }
  .access__box {
    grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); grid-template-areas: "head cta" "offer cta" "launch launch";
    grid-template-rows: auto 1fr auto; column-gap: 64px; row-gap: 32px; align-items: start;
    padding: 80px 64px 64px; clip-path: polygon(72px 0, 100% 0, 100% 100%, 0 100%, 0 72px);
  }
}

/* Footer */
.footer { border-top: 1px solid var(--c-surface); padding: 32px 0; }
@media (min-width: 768px) { .footer { padding: 48px 0 40px; } }
.footer__top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 32px; }
.footer__links { display: flex; flex-wrap: wrap; gap: 0 16px; font-size: 14px; line-height: 20px; }
@media (min-width: 768px) { .footer__links { gap: 0 24px; } }
.footer__links a { display: inline-flex; align-items: center; min-height: 44px; }
.footer__bottom { display: flex; flex-wrap: wrap; gap: 8px 32px; margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--c-surface); font-size: 12px; line-height: 16px; color: var(--c-muted); }
.footer__bottom a { color: var(--c-ink); }
/* Unconfirmed facts stay visibly unfinished: the legal name and the support address. */
.ph { color: var(--c-ink); font-weight: 500; }
.footer__tm { flex-basis: 100%; max-width: 64ch; }
@media (min-width: 1024px) { .footer__tm { flex-basis: auto; margin-left: auto; } }

/* ---------------------------------------------------------------------------------------------------------------
   Other pages: Product, Pricing, Docs and the legal pages, on the homepage's tokens and components. Everything below
   reuses a value already set above; nothing here introduces a colour, radius, angle or type size of its own.
   --------------------------------------------------------------------------------------------------------------- */

/* Page head: the hero's type scale without its artwork or mint band. */
.page-head { padding: 40px 0 8px; }
.page-head h1 { font-size: 32px; line-height: 40px; letter-spacing: -0.015em; max-width: 46rem; }
.page-head__grid { display: grid; gap: 40px; }
.page-head__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 24px; margin-top: 32px; }
.page-head__actions a:not(.btn) { display: inline-block; padding: 12px 0; font-weight: 500; }
.page-head + .section { padding-top: 40px; }
@media (min-width: 768px) {
  .page-head { padding: 64px 0 16px; }
  .page-head h1 { font-size: 48px; line-height: 56px; letter-spacing: -0.02em; }
  .page-head + .section { padding-top: 56px; }
}
@media (min-width: 1024px) {
  .page-head { padding: 88px 0 24px; }
  .page-head__grid { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 56px; align-items: start; }
  .page-head + .section { padding-top: 72px; }
}

/* A plain object on white: the statement card's border and radius without its shadow. */
.card { background: var(--c-white); border: 1px solid var(--c-surface); border-radius: var(--r); }
.card--figure { padding: 20px; }
.card--figure svg { width: 100%; height: auto; max-width: 296px; } /* 296px draws the 276-wide flow at its old scale; at 320 its 12.5 labels stay at 11px */
.card--figure figcaption { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--c-surface); font-size: 14px; line-height: 20px; color: var(--c-muted); }
.fineprint { margin-top: 12px; font-size: 12px; line-height: 16px; color: var(--c-muted); }

/* Split: copy beside its object, on the restatement block's 5:6 grid. */
.split { display: grid; gap: 24px; }
.split + .split, .split + .stack, .stack + .split { margin-top: 64px; }
.split__copy h2 + p, .stack__copy h2 + p { margin-top: 16px; }
.split__copy p + p, .stack__copy p + p { margin-top: 12px; }
.split__copy p, .stack__copy p { max-width: 34rem; }
.stack__copy { max-width: 46rem; }
.stack .preview { margin-top: 32px; }
@media (min-width: 768px) { .split__copy > h2 + p, .stack__copy > h2 + p { font-size: 20px; line-height: 28px; } }
@media (min-width: 1024px) {
  .split { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 56px; align-items: start; }
  .split + .split, .split + .stack, .stack + .split { margin-top: 112px; }
}
/* "At launch", set the way the homepage's early-access offer sets it. */
.launch-tag { margin-bottom: 12px; font-size: 14px; line-height: 20px; color: var(--c-slate); }
.launch-tag strong { color: var(--c-ink); font-weight: 600; }

/* Three mistakes: each a hairline row, the wrong figure beside the right one. */
.mistakes { margin-top: 32px; }
.mistake { display: grid; gap: 16px; padding: 24px 0; border-top: 1px solid var(--c-surface); }
.mistake:last-of-type { border-bottom: 1px solid var(--c-surface); }
.mistake h3 { font-size: 20px; line-height: 28px; }
.mistake p { margin-top: 8px; max-width: 34rem; }
.contrast { display: grid; grid-template-columns: 1fr 1fr; align-self: start; font-variant-numeric: tabular-nums; }
.contrast > div { padding: 14px 16px; }
.contrast > div + div { border-left: 1px solid var(--c-surface); }
.contrast__k { font-size: 12px; line-height: 16px; color: var(--c-muted); }
.contrast__v { margin-top: 4px; font-size: 24px; line-height: 32px; font-weight: 500; letter-spacing: -0.01em; }
.contrast__was .contrast__v { color: var(--c-muted); }
.contrast__was s { text-decoration-thickness: 1px; }
.contrast__d { margin-top: 4px; font-size: 12px; line-height: 16px; color: var(--c-muted); }
@media (max-width: 479px) {
  .contrast { grid-template-columns: 1fr; }
  .contrast > div + div { border-left: 0; border-top: 1px solid var(--c-surface); }
}
@media (min-width: 1024px) {
  .mistake { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 56px; padding: 32px 0; }
}
/* The one sentence a buyer repeats: set under an ink rule, like the bookkeeper note on the homepage. */
.reason { margin-top: 48px; padding-top: 16px; border-top: 1px solid var(--c-ink); max-width: 46rem; }
.reason figcaption { font-size: 14px; line-height: 20px; color: var(--c-muted); }
.reason blockquote { margin: 8px 0 0; font-size: 20px; line-height: 28px; font-weight: 500; }
@media (min-width: 768px) { .reason blockquote { font-size: 24px; line-height: 32px; } }

/* A cost-lot sheet and other plain data tables: the restatement log's header and hairlines. */
.spec { font-variant-numeric: tabular-nums; }
.spec thead th { padding: 0 16px 10px 0; font-size: 12px; line-height: 16px; font-weight: 500; color: var(--c-muted); border-bottom: 1px solid var(--c-border); vertical-align: bottom; }
.spec tbody th, .spec td { padding: 12px 16px 12px 0; font-size: 14px; line-height: 20px; vertical-align: top; border-bottom: 1px solid var(--c-surface); }
.spec tbody th { font-weight: 500; }
.spec th:last-child, .spec td:last-child { padding-right: 0; }
.spec .num { text-align: right; white-space: nowrap; }
.spec__sub { display: block; margin-top: 2px; font-size: 12px; line-height: 16px; font-weight: 400; color: var(--c-muted); }
.spec .spec__total th, .spec .spec__total td { font-weight: 600; border-bottom: 0; border-top: 1px solid var(--c-border); }
.spec__total .spec__sub { font-weight: 400; }
.card .spec { margin-top: 4px; }
.card--sheet { padding: 16px 20px 8px; }
@media (max-width: 479px) { .spec .opt { display: none; } }
/* Two-column label tables stack on phones: each row becomes a specimen above its meaning. */
@media (max-width: 639px) {
  .spec--stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .spec--stack, .spec--stack tbody, .spec--stack tr, .spec--stack td { display: block; }
  .spec--stack tr { padding: 12px 0; border-bottom: 1px solid var(--c-surface); }
  .spec--stack td { padding: 0; border: 0; }
  .spec--stack td + td { margin-top: 6px; }
}
.specimen { font-weight: 500; }
.specimen .chip { margin-left: 4px; font-weight: 400; font-size: 12px; line-height: 16px; white-space: nowrap; }
.chip { display: inline-block; }

/* A single payout on the product page: the homepage's ledger, one panel, no tabs. */
.walk__panel--solo { font-variant-numeric: tabular-nums; }
.walk__panel--solo .ledger__flag .ledger__amt { color: var(--c-muted); font-weight: 400; font-size: 14px; }

/* Labels: term, tag and meaning in hairline rows. */
.labels { margin-top: 24px; }
.labels > div { display: grid; gap: 4px; padding: 14px 0; border-top: 1px solid var(--c-surface); }
.labels > div:last-child { border-bottom: 1px solid var(--c-surface); }
.labels dt { font-weight: 500; }
.labels dt .chip { margin-left: 6px; font-size: 12px; line-height: 16px; font-weight: 400; }
.labels dd { color: var(--c-ink); max-width: 40rem; }
@media (min-width: 768px) {
  .labels > div { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 32px; padding: 16px 0; }
}

/* Early access, the offer: what it includes, as the trust notes' run-in rows without numbers. */
.includes { display: grid; margin-top: 16px; }
.includes > div { padding: 14px 0; border-top: 1px solid var(--c-surface); }
.includes dt { font-weight: 500; }
.includes dd { margin-top: 2px; max-width: 34rem; }
@media (min-width: 768px) {
  .includes { grid-template-columns: 1fr 1fr; column-gap: 48px; margin-top: 24px; }
  .includes > div { padding: 20px 0; }
  .includes dt { font-size: 20px; line-height: 28px; }
}
/* Early access, the terms: three stages as cards. Where you start carries the payout tabs' 45° ink corner. */
.stages { display: grid; gap: 12px; margin-top: 24px; font-variant-numeric: tabular-nums; }
.stage { padding: 20px; background: var(--c-white); border: 1px solid var(--c-surface); border-radius: var(--r); }
.stage--now { border-color: var(--c-ink); box-shadow: inset 0 0 0 1px var(--c-ink); background: linear-gradient(225deg, var(--c-ink) 0 12px, transparent 12px), var(--c-white); }
.stage__when { font-size: 14px; line-height: 20px; font-weight: 500; color: var(--c-muted); }
.stage__what { margin-top: 8px; font-size: 24px; line-height: 32px; font-weight: 500; letter-spacing: -0.01em; }
.stage p:not([class]) { margin-top: 8px; }
.stages + .fineprint { margin-top: 16px; }
@media (min-width: 768px) { .stage__what { font-size: 28px; line-height: 36px; } }
@media (min-width: 1024px) { .stages { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; } .stage { padding: 28px; } }

/* The close on other pages: the early-access box, with the one action beside it. */
.access__box--link { grid-template-areas: "head" "cta"; }
.access__cta { grid-area: cta; }
@media (min-width: 1024px) {
  .access__box--link { grid-template-columns: minmax(0, 7fr) auto; grid-template-areas: "head cta"; grid-template-rows: auto; align-items: end; padding: 72px 64px 64px; }
}

/* Docs and legal: a contents column beside one reading column, on the questions section's 4:7 grid. */
.doc { padding-block: 32px 72px; }
.doc-nav { display: none; }
.doc__head h1 { font-size: 32px; line-height: 40px; letter-spacing: -0.015em; }
.doc__head .lead { max-width: 40rem; }
.doc__meta { margin-top: 12px; font-size: 14px; line-height: 20px; color: var(--c-muted); }
@media (min-width: 1024px) {
  .doc { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 56px; align-items: start; padding-block: 72px 112px; }
  .doc-nav { display: block; position: sticky; top: 112px; max-height: calc(100vh - 136px); overflow-y: auto; padding: 2px 4px 4px 2px; }
  .doc-menu { display: none; }
}
.doc-nav__label { font-size: 12px; line-height: 16px; font-weight: 600; color: var(--c-muted); }
.doc-nav__label + ol, .doc-nav__label + ul { margin-top: 8px; }
.doc-nav ol + .doc-nav__label, .doc-nav ul + .doc-nav__label { margin-top: 28px; }
.doc-nav a, .doc-menu li a { position: relative; display: block; padding: 6px 0 6px 24px; font-size: 14px; line-height: 20px; }
/* The current page: no underline, and the mark's 45° leg (the situations list's marker) beside it. */
.doc-nav a[aria-current="page"], .doc-menu a[aria-current="page"] { text-decoration: none; font-weight: 600; }
.doc-nav a[aria-current="page"]::before, .doc-menu a[aria-current="page"]::before {
  content: ""; position: absolute; left: 3px; top: 12px; width: 12px; height: 3px;
  background: var(--c-emerald); transform: rotate(45deg); transform-origin: 1.5px 1.5px;
}
/* Phones: the contents become a disclosure under the page title, set like a question. */
.doc-menu { margin-top: 24px; border-top: 1px solid var(--c-surface); border-bottom: 1px solid var(--c-surface); }
.doc-menu summary { display: flex; align-items: center; gap: 8px; min-height: 48px; padding: 12px 0; cursor: pointer; list-style: none; font-weight: 500; }
.doc-menu summary::-webkit-details-marker { display: none; }
.doc-menu__current { color: var(--c-muted); font-weight: 400; }
.doc-menu summary .icon--plus { margin-left: auto; transition: transform var(--d-fast) var(--ease-out); }
.doc-menu[open] summary .icon--plus { transform: rotate(45deg); }
.doc-menu .doc-nav__label { margin-top: 4px; }
.doc-menu ol, .doc-menu ul { padding-bottom: 8px; }
.doc-menu li a { display: flex; align-items: center; min-height: 44px; }
@media (prefers-reduced-motion: reduce) { .doc-menu summary .icon--plus { transition: none; } }

/* The reading column. */
.prose { max-width: 68ch; margin-top: 32px; }
.prose > * + * { margin-top: 16px; }
.prose h2 { margin-top: 48px; font-size: 24px; line-height: 32px; letter-spacing: -0.01em; }
.prose h3 { margin-top: 32px; font-size: 20px; line-height: 28px; }
.prose h2 + *, .prose h3 + * { margin-top: 12px; }
.prose > h2:first-child { margin-top: 0; }
.prose ul > li { position: relative; padding-left: 24px; }
.prose ul > li::before { content: ""; position: absolute; left: 2px; top: 11px; width: 10px; height: 2px; background: var(--c-slate); }
.prose ul > li + li { margin-top: 8px; }
.prose table { margin-top: 20px; }
.prose table + p { margin-top: 20px; }
.ui { font-weight: 500; }
.steps { counter-reset: step; }
.steps > li { position: relative; padding: 12px 0 12px 32px; border-top: 1px solid var(--c-surface); counter-increment: step; }
.steps > li:last-child { border-bottom: 1px solid var(--c-surface); }
.steps > li::before { content: counter(step); position: absolute; left: 0; top: 12px; font-size: 14px; line-height: 24px; font-weight: 600; color: var(--c-muted); font-variant-numeric: tabular-nums; }
.steps > li p { margin-top: 8px; }
.steps strong { font-weight: 500; }
/* Callouts: the restatement reason's alt strip, as a boxed note. Slate text on alt (7.24:1). */
.callout { display: flex; align-items: flex-start; gap: 10px; padding: 12px 16px; background: var(--c-alt); border: 1px solid var(--c-surface); border-radius: var(--r); font-size: 14px; line-height: 20px; color: var(--c-slate); }
.callout .g { margin-top: 4px; }
.callout strong { color: var(--c-ink); font-weight: 600; }
.callout p + p { margin-top: 8px; }
.prose .callout { margin-top: 20px; }
.doc__head + .callout, .doc-menu + .callout { margin-top: 24px; max-width: 68ch; }
.card--figure.prose-figure { margin-top: 0; }
/* Previous and next. */
.pager { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; max-width: 68ch; margin-top: 56px; padding-top: 16px; border-top: 1px solid var(--c-surface); }
.pager a { display: flex; flex-direction: column; gap: 2px; padding: 12px 0; text-decoration: none; }
.pager .pager__next { grid-column: 2; align-items: flex-end; text-align: right; }
.pager__k { font-size: 12px; line-height: 16px; color: var(--c-muted); }
.pager__t { font-weight: 500; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
@media (hover: hover) and (pointer: fine) {
  .pager__t { transition: text-decoration-color var(--d-fast) ease-out; }
  .pager a:hover .pager__t { text-decoration-color: transparent; }
}

/* Reduced motion keeps fades and colour, drops movement. */
@media (prefers-reduced-motion: reduce) {
  .walk__panel.is-entering .tick { animation-name: fade-in; }
  .stmt__link .icon { transition: opacity var(--d-fast) ease-out; }
  .stmt__link:hover .icon { transform: none; }
}

/* ?static=1 settles every entrance for captures. */
.static *, .static *::before, .static *::after { animation: none !important; transition: none !important; }

/* ---------------------------------------------------------------------------------------------------------------
   Production additions (2026-10-03, handover 56). No forms on the site: every action is a link to the app's sign-in.
   Nothing here introduces a colour, radius or type size the guidelines don't already set above.
   --------------------------------------------------------------------------------------------------------------- */

/* Sign in: a quiet text link beside the one button, from 900px. Below that it is a row in the menu. */
.nav__signin { display: none; }
@media (min-width: 900px) {
  .nav__signin { display: inline-flex; align-items: center; min-height: 44px; margin-left: 28px; font-size: 14px; line-height: 20px; font-weight: 500; }
  .nav .nav__signin + .btn--nav { margin-left: 20px; }
}

/* Hero: the one action and a line on what happens next, where the form used to be. */
.hero__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 24px; margin-top: 32px; }
.hero__cta a:not(.btn) { display: inline-block; padding: 12px 0; font-weight: 500; }
.hero__note { margin-top: 12px; font-size: 14px; line-height: 20px; color: var(--c-muted); max-width: 30rem; }

/* The close on the homepage: a white card holding the action, where the form card used to be. */
.access__card { grid-area: cta; align-self: start; width: 100%; max-width: 30rem; background: var(--c-white); border-radius: var(--r); padding: 24px 20px; box-shadow: 0 1px 2px rgb(20 41 26 / .06), 0 12px 24px -12px rgb(20 41 26 / .24); }
.access__card-title { font-size: 20px; line-height: 28px; font-weight: 500; }
.access__card p:not([class]) { margin-top: 8px; font-size: 14px; line-height: 20px; color: var(--c-slate); }
.access__card .btn { margin-top: 20px; }
.access__card .fineprint { margin-top: 12px; }
@media (min-width: 640px) { .access__card { padding: 32px; } }
.access__note { margin-top: 12px; font-size: 14px; line-height: 20px; color: var(--c-slate); max-width: 40rem; }

/* Contact: two addresses as hairline rows. */
.contact-list { margin-top: 32px; max-width: 46rem; }
.contact-list > div { display: grid; gap: 4px; padding: 16px 0; border-top: 1px solid var(--c-surface); }
.contact-list > div:last-child { border-bottom: 1px solid var(--c-surface); }
.contact-list dt { font-weight: 500; }
.contact-list dd a { font-size: 20px; line-height: 28px; font-weight: 500; }
.contact-list dd p { margin-top: 4px; color: var(--c-slate); }
@media (min-width: 768px) { .contact-list > div { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 32px; } }

/* 404: the page head, and the places a visitor most likely meant. */
.lost { padding-bottom: 72px; }
.lost__links { margin-top: 24px; display: flex; flex-wrap: wrap; gap: 0 24px; font-weight: 500; }
.lost__links a { display: inline-block; padding: 12px 0; }

/* Legal pages: when each was last changed, and the list of what a page doesn't say yet. */
.prose ol.plain { counter-reset: none; }
.prose dl > div + div { margin-top: 12px; }
.prose dt { font-weight: 500; }
.prose dd { margin-top: 2px; }

/* Early access request (/early-access/): the page head's two columns, what happens next beside the form. The
   field rules are the mockups' (.label, .input, .choices, .choice), which handover 56 removed with the forms.
   Native validation works without the script; site.js replaces it with the messages under each field. */
.label { display: block; font-size: 14px; line-height: 20px; font-weight: 500; }
.input {
  width: 100%; min-height: 48px; padding: 11px 14px;
  background: var(--c-white); color: var(--c-ink);
  border: 1px solid var(--c-border); border-radius: var(--r);
  font: inherit; font-size: 16px; line-height: 24px;
}
textarea.input { min-height: 112px; resize: vertical; }
.input::placeholder { color: var(--c-placeholder); }
.input:focus-visible { outline-offset: 2px; border-color: var(--c-ink); }
.input[aria-invalid="true"] { border-color: var(--c-error); }
.request { align-self: start; width: 100%; max-width: 32rem; background: var(--c-white); border-radius: var(--r); padding: 24px 20px; box-shadow: 0 1px 2px rgb(20 41 26 / .06), 0 12px 24px -12px rgb(20 41 26 / .24); }
.request__field + .request__field { margin-top: 20px; }
.request__field .input { margin-top: 8px; }
.request__help { margin-top: 6px; font-size: 14px; line-height: 20px; color: var(--c-muted); }
.request__error { display: flex; align-items: flex-start; gap: 8px; margin-top: 8px; font-size: 14px; line-height: 20px; color: var(--c-error); }
.request__error .g { margin-top: 4px; }
.request__error[hidden] { display: none; }
.request .btn--block { margin-top: 24px; }
.request .fineprint a { color: var(--c-ink); }
.choices { margin: 0; padding: 0; border: 0; min-width: 0; }
.choices legend { padding: 0; margin-bottom: 4px; }
.choice { display: flex; align-items: center; gap: 12px; min-height: 44px; font-size: 16px; line-height: 24px; cursor: pointer; }
.choice input { width: 18px; height: 18px; margin: 0; accent-color: var(--c-ink); flex: none; }
.choices__other { display: none; }
.choices:has(input[value="other"]:checked) .choices__other { display: block; }
.choices label.choices__other { margin-top: 8px; }
.request__trap { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.next { margin-top: 32px; max-width: 34rem; counter-reset: next; list-style: none; padding: 0; }
.next li { position: relative; padding: 14px 0 14px 40px; border-top: 1px solid var(--c-surface); counter-increment: next; }
.next li:last-child { border-bottom: 1px solid var(--c-surface); }
.next li::before { content: counter(next); position: absolute; left: 0; top: 14px; width: 24px; height: 24px; border-radius: 50%; background: var(--c-surface); font-size: 13px; line-height: 24px; font-weight: 500; text-align: center; }
@media (min-width: 768px) { .request { padding: 32px; } }

/* The homepage's per-row values (hero plates and ledger rows), moved out of style="" attributes so the
   Content-Security-Policy needs no 'unsafe-inline' for styles. Class names are a hash of the declarations. */
.v-b7d43b { --i:0;--c:-24;--dy:190; }
.v-7a588d { --i:1;--h:10;--c:46.5;--dy:120; }
.v-22bd2d { --i:2;--h:4;--c:93.5;--dy:80; }
.v-8ebe26 { --i:3;--h:3;--c:137;--dy:40; }
.v-b2fb94 { --i:4;--h:0;--c:178.5;--dy:0; }
.v-84da98 { --i:5;--h:65;--c:251;--dy:-40; }
.v-0462a7 { --i:6;--h:14;--c:330.5;--dy:-80; }
.v-f86a1b { --i:7;--h:39;--c:397;--dy:-120; }
.v-c5cbe4 { --i:0; }
.v-3ea882 { --i:1; }
.v-b9d41c { --i:2; }
.v-95a02a { --i:3; }
.v-a62b28 { --i:4; }
.v-450ce3 { --i:5; }