/* Hallmark · shape: Statement, then one payment seen moment by moment, section by section · genre: modern-minimal · theme: custom · job: hire · idea: "show what each party sees when money moves: the customer pays, your platform sees it paid, the recipient sees it received; every section is one flat fragment of the product from the user's side, never the machinery" · vibe: "graphite, quiet, exact, institutional, product moments"
 * paper: ivory #FBF9F3, the security band, close and footer sand #EEE8DA · accent: #2747A8 (oklch 44% 0.16 266), link underline and focus only · ink #161512 is the one strong mark in each fragment · display and body: Geist 400/500, wordmark 600 · hero: H1 over 7 of 12 columns in two lines, the sentence and one button under it; on columns 8 to 12 one cascade of three fragments (Customer checkout, Your platform's Paid, Recipient's Received) stepping down a 1px ink spine with a tick to each · nav: wordmark, five anchor links beside it, one quiet outlined Contact button right, no rule · footer: on the tint, wordmark left, Product and Company link columns right, legal row under a hairline · imagery: none, schematic UI fragments in 1px hairlines, no figures · signature: the hero cascade, one payment from three seats · copy: verbatim (round-4 deck) · fonts: Geist (OFL-1.1, self-hosted)
 * axes: light/grotesk-sans/cool · posture: restrained · surface: absolute · contrast: pass · fold: pass · hero-review: subagent · fix · 5 findings · 3 resolved 2 partial · finish-review: subagent · fix · 7 findings · 5 resolved 2 partial · gap: the split-row rhythm survives in Accept and Security · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H4 E4 S4 R4 V4 · weakest: S, the locked headline could front any payments company; the cascade carries what is Runite's (one payment as the customer, your platform and the recipient each see it), and no fragment repeats between the hero and the sections */
/* Hallmark · waive 47c · flat schematic fragments of checkout, payment status, payouts, split, card field and invoice history, built in spans with skeleton bars and no figures · Runite has no customer-facing product UI to capture yet, and the round-6 brief asks for drawn product moments */
/* Hallmark · dismissed 59 · ten sections on index · the client's round-4 deck fixes the section list (hero, overview, four deep dives, how, developers, close, footer) and no section can merge without dropping deck copy */
/* Hallmark · dismissed 77 · privacy.html is a two-section policy document, a page of locked policy text, not a landing page */
/* Hallmark · dismissed 58 · the 18-word hero sentence, the payments screen and the 152-word privacy screen are locked client copy, set verbatim */

/* Tokens */
:root {
  --space-3xs: 2px; --space-2xs: 4px; --space-xs: 8px; --space-sm: 12px; --space-md: 16px; --space-lg: 24px; --space-xl: 40px; --space-2xl: 64px; --space-3xl: 96px; --space-4xl: 144px;
  --text-xs: 0.8125rem; --text-sm: 0.875rem; --text-md: 1rem; --text-lg: 1.25rem; --text-xl: 1.5625rem; --text-2xl: 1.953rem; --text-3xl: 2.441rem;
  --text-display-s: clamp(2.25rem, 4vw + 0.5rem, 3.75rem); --text-display: clamp(2.75rem, 5vw + 1rem, 5.25rem);
  --text-section: clamp(2rem, 2.5vw + 1rem, 3.5rem); --text-title: clamp(1.25rem, 0.75vw + 0.875rem, 1.625rem); --text-lead: clamp(1.125rem, 0.35vw + 1rem, 1.375rem);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-in: cubic-bezier(0.7, 0, 0.84, 0); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-micro: 120ms; --dur-short: 220ms; --dur-long: 420ms;
  --color-error: oklch(52% 0.19 27); --color-success: oklch(50% 0.12 150);
  --container: calc(1232px + 2 * var(--gutter)); --gutter: clamp(24px, 5vw, 80px); --gap-columns: 32px; --section-gap-s: 120px; --section-gap: 144px; --section-gap-l: 176px;
  --z-base: 1; --z-raised: 10; --z-dropdown: 100; --z-sticky: 200; --z-sticky-nav: 300; --z-modal: 400; --z-toast: 500; --z-tooltip: 600;
  --color-paper: #FBF9F3; --color-paper-2: #EEE8DA; --color-paper-3: #E4DDCC;
  --color-ink: #161512; --color-ink-2: #57544C; --color-muted: #6A665B; --color-ink-hover: #2E2C27;
  --color-rule: #E4DED0; --color-rule-strong: #C8C0AE; --color-path: #161512;
  --color-accent: #2747A8; --color-accent-ink: #FFFFFF; --color-focus: #2747A8;
  --font-display: "Geist", ui-sans-serif, system-ui, sans-serif; --font-body: "Geist", ui-sans-serif, system-ui, sans-serif; --font-outlier: var(--font-body);
  --radius-card: 8px; --radius-input: 6px; --radius-pill: 999px; --rule-hair: 1px; --shadow-card: none;
  --tracking-display: -0.03em; --color-node: #FFFEFA;
}

/* Base */
*, *::before, *::after { box-sizing: border-box; }
html, body { overflow-x: clip; }
html { scrollbar-color: var(--color-muted) var(--color-paper); scroll-padding-top: var(--space-xl); }
body { display: flex; flex-direction: column; min-height: 100svh; margin: 0; background: var(--color-paper); color: var(--color-ink); font-family: var(--font-body); font-size: var(--text-md); line-height: 1.55; -webkit-font-smoothing: antialiased; caret-color: var(--color-accent); }
::selection { background: color-mix(in oklab, var(--color-accent) 22%, transparent); color: var(--color-ink); }
:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.16em; }
h1, h2, h3 { margin: 0; font-family: var(--font-display); font-synthesis: none; overflow-wrap: break-word; min-width: 0; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
p:not([class]) { max-width: 65ch; }
img, video { max-width: 100%; height: auto; display: block; }
svg { display: block; }
[hidden] { display: none !important; }
body > main { flex: 1 0 auto; }
button, input, select, textarea { font: inherit; }
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); box-sizing: border-box; }
.num, .figure, td.num { font-variant-numeric: tabular-nums; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
[data-slot] { position: relative; overflow: hidden; background: linear-gradient(160deg, var(--color-paper-2, var(--color-paper)), var(--color-paper-3, var(--color-paper))); }
[data-slot] > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; }
[data-slot]:has(> img) > :not(img):not([data-keep]) { display: none !important; }
@media (max-width: 60rem) { :root { --gutter: 24px; --section-gap-s: 80px; --section-gap: 96px; --section-gap-l: 120px; } }
@media (max-width: 40rem) { :root { --gutter: 16px; --section-gap-s: 56px; --section-gap: 72px; --section-gap-l: 96px; --gap-columns: 16px; } }
@media (prefers-reduced-motion: reduce) { *:not(.keep-motion), *:not(.keep-motion)::before, *:not(.keep-motion)::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }

/* Page */
@font-face { font-family: "Geist"; src: url("fonts/geist-latin-wght-normal.woff2") format("woff2-variations"), url("fonts/geist-latin-wght-normal.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }

:root {
  --nav-h: 76px;
  --text-hero: clamp(2.375rem, 0.5rem + 4vw, 3.875rem);
  --text-h2: clamp(2rem, 1.2rem + 2.1vw, 3rem);
  --text-close: clamp(2.25rem, 1.2rem + 3vw, 3.75rem);
  --text-item: 1.375rem;
  --text-lead-hero: clamp(1.125rem, 1rem + 0.4vw, 1.25rem);
  --text-body: 1.0625rem;
  --text-nav: 0.9375rem;
  --text-ui: 0.9375rem;
  --text-ui-s: 0.8125rem;
  --text-ui-l: 1.0625rem;
  --pill-h: 26px;
  --tick-y: 35px;
  --spine-top: 35px;
  --spine-bottom: 73px;
}

body { color: var(--color-ink-2); }
h1, h2, h3 { color: var(--color-ink); font-weight: 500; }
.nowrap { white-space: nowrap; }
figure { margin: 0; }
.grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); }

/* Text link: ink text, the accent on the underline only */
.link { color: var(--color-ink); font-weight: 500; text-decoration: underline; text-decoration-color: var(--color-accent); text-decoration-thickness: 1px; text-underline-offset: 0.25em; transition: color var(--dur-micro) var(--ease-out); }
.link:hover { text-decoration-thickness: 2px; }
.link:active { color: var(--color-ink-2); }
.link:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; border-radius: 2px; }

/* Button: the one recipe */
.btn { display: inline-flex; align-items: center; min-height: 48px; padding: 0 var(--space-lg); border: 1px solid var(--color-ink); border-radius: var(--radius-input); background: var(--color-ink); color: var(--color-paper); font: 500 var(--text-md)/1 var(--font-body); white-space: nowrap; text-decoration: none; cursor: pointer; transition: background-color var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out), transform var(--dur-micro) var(--ease-out); }
.btn:hover { background: var(--color-ink-hover); border-color: var(--color-ink-hover); }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; transform: none; }
.btn--quiet { min-height: 44px; padding: 0 var(--space-md); border-color: var(--color-rule-strong); background: var(--color-paper); color: var(--color-ink); font-size: var(--text-nav); }
.btn--quiet:hover { background: var(--color-paper-2); border-color: var(--color-ink); }

/* Nav */
.nav__bar { display: flex; align-items: center; gap: var(--space-xl); min-height: var(--nav-h); }
.wordmark { color: var(--color-ink); font-size: 1.375rem; font-weight: 600; letter-spacing: -0.04em; text-decoration: none; }
.wordmark:hover { color: var(--color-ink-hover); }
.wordmark:active { color: var(--color-ink-2); }
.wordmark:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 4px; border-radius: 2px; }
.nav__links { display: flex; gap: var(--space-lg); margin: 0 auto 0 var(--space-md); padding: 0; list-style: none; }
.nav__links a { color: var(--color-ink-2); font-size: var(--text-nav); text-decoration: none; transition: color var(--dur-micro) var(--ease-out); }
.nav__links a:hover { color: var(--color-ink); text-decoration: underline; text-decoration-color: var(--color-accent); text-underline-offset: 0.3em; }
.nav__links a:active { color: var(--color-ink-hover); }
.nav__links a:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 4px; border-radius: 2px; }
.nav .btn--quiet { margin-left: auto; }

/* Hero: the statement left, one payment seen from three seats right */
.hero { padding-block: var(--space-4xl) var(--space-xl); }
.hero__grid { align-items: center; row-gap: var(--space-2xl); }
.hero__text { grid-column: 1 / 8; }
.hero h1 { font-size: var(--text-hero); line-height: 1.06; letter-spacing: var(--tracking-display); }
.lead { max-width: 33rem; margin-top: var(--space-lg); font-size: var(--text-lead-hero); line-height: 1.5; }
.hero .btn { margin-top: var(--space-xl); }
.hero__moments { grid-column: 8 / -1; min-width: 0; }

/* Moments: flat product fragments, 1px edges, no shadow, one ink mark each */
.ui { display: grid; gap: var(--space-sm); padding: var(--space-lg); border: 1px solid var(--color-rule-strong); border-radius: var(--radius-card); background: var(--color-node); color: var(--color-ink); font-size: var(--text-ui); line-height: 1.3; }
.ui__who { color: var(--color-ink); font-size: var(--text-ui); font-weight: 500; }
.ui__k { color: var(--color-ink); font-weight: 500; }
.ui__s { color: var(--color-muted); font-size: var(--text-ui-s); }
.skel { display: block; width: var(--l, 50%); max-width: 100%; height: var(--space-xs); border-radius: var(--radius-pill); background: var(--color-paper-3); }
.pill { display: inline-flex; align-items: center; justify-self: end; min-height: var(--pill-h); padding: 0 var(--space-sm); border: 1px solid var(--color-rule-strong); border-radius: var(--radius-pill); color: var(--color-ink); font-size: var(--text-ui-s); line-height: 1; padding-top: var(--space-3xs); white-space: nowrap; }
.pill--ink { border-color: var(--color-ink); background: var(--color-ink); color: var(--color-paper); }
.ln { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--space-sm); }
.ln .ui__k { white-space: nowrap; }
.ln + .ln { padding-top: var(--space-sm); border-top: 1px solid var(--color-rule); }

.tick { display: inline-flex; align-items: center; gap: var(--space-xs); color: var(--color-ink-2); font-size: var(--text-ui-s); white-space: nowrap; }
.tick::before { content: ""; width: 9px; height: 5px; border-left: 1.5px solid var(--color-ink); border-bottom: 1.5px solid var(--color-ink); transform: translateY(-2px) rotate(-45deg); }
.choice { display: flex; align-items: center; gap: var(--space-sm); min-height: 44px; padding: 0 var(--space-md); border: 1px solid var(--color-rule); border-radius: var(--radius-input); }
.choice::before { content: ""; flex: none; width: 14px; height: 14px; border: 1px solid var(--color-rule-strong); border-radius: 50%; }
.choice--on { border-color: var(--color-ink-2); }
.choice--on::before { border: 4px solid var(--color-ink-2); }
.paybtn { display: grid; place-items: center; min-height: 44px; border-radius: var(--radius-input); background: var(--color-ink); color: var(--color-paper); font-weight: 500; }

/* The hero cascade: customer, your platform, recipient, one payment stepping down a 1px spine */
.cascade { position: relative; display: grid; margin: 0; container-type: inline-size; }
.cascade::before { content: ""; position: absolute; left: 0; top: var(--spine-top); bottom: var(--spine-bottom); width: 1px; background: var(--color-path); }
.cascade .ui { position: relative; width: var(--w); margin-left: var(--x); }
.cascade .ui + .ui { margin-top: calc(-1 * var(--space-md)); }
.cascade .ui:not(:last-child) { padding-bottom: calc(var(--space-lg) + var(--space-md)); }
.cascade .ui::before { content: ""; position: absolute; top: var(--tick-y); left: calc(-1 * var(--x) - 1px); width: var(--x); height: 1px; background: var(--color-path); }
.ui--pay { --x: 8cqi; --w: 60cqi; }
.ui--seen { --x: 24cqi; --w: 68cqi; }
.ui--got { --x: 38cqi; --w: 62cqi; }

/* Section moments: one size up, each a different fragment */
.ui--stage { --pill-h: 30px; gap: var(--space-md); padding: var(--space-xl); font-size: var(--text-ui-l); }
.ui--stage .ln + .ln { padding-top: var(--space-md); }
.ui--stage .pill, .ui--stage .tick, .ui--stage .ui__s { font-size: var(--text-ui); }
.ui__big { font-size: var(--text-title); letter-spacing: -0.015em; }
.item { display: flex; justify-content: space-between; align-items: center; gap: var(--space-md); padding-block: var(--space-xs); border-top: 1px solid var(--color-rule); }
.item--total { border-top-color: var(--color-ink); }
.skel--ink { background: var(--color-rule-strong); }
.methods { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-sm); margin-top: var(--space-xs); }
.tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-lg); }
.ui--tile { gap: var(--space-sm); padding: var(--space-lg); }
.ui--tile .pill { justify-self: start; margin-top: var(--space-xs); }
.ui--split { gap: var(--space-lg); }
.bar { display: grid; grid-template-columns: minmax(0, 62fr) minmax(0, 38fr); gap: var(--space-2xs); height: var(--space-lg); }
.bar__held { border: 1px dashed var(--color-ink); border-radius: var(--space-2xs) 0 0 var(--space-2xs); }
.bar__own { border-radius: 0 var(--space-2xs) var(--space-2xs) 0; background: var(--color-ink); }
.bar__keys { display: grid; align-items: baseline; grid-template-columns: minmax(0, 62fr) minmax(0, 38fr); gap: var(--space-2xs); }
.bar__key .ui__k { white-space: nowrap; }
.bar__key { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm); }
.split-head__main { grid-column: 1 / 7; display: grid; gap: var(--space-2xl); }
.split-head .split-head__main .h2 { grid-column: auto; }
.mask { display: flex; align-items: center; gap: var(--space-xs); min-height: 52px; padding: 0 var(--space-md); border: 1px solid var(--color-ink-2); border-radius: var(--radius-input); }
.mask i { width: 7px; height: 7px; border-radius: 50%; background: var(--color-ink-2); }
.mask b { width: var(--space-xs); }
.ui--secure .ln { margin-top: var(--space-xs); padding-top: var(--space-md); border-top: 1px solid var(--color-rule); }
.hist { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)) auto; margin: var(--space-xs) 0 0; padding: 0; list-style: none; }
.hist li { position: relative; padding-top: var(--space-lg); border-top: 1px solid var(--color-path); }
.hist li::before { content: ""; position: absolute; top: 0; left: 0; width: 1px; height: var(--space-sm); background: var(--color-path); }
.hist .pill { justify-self: start; }

@media (max-width: 72rem) { .ui--got { --x: 30cqi; --w: 70cqi; } .ui--stage { padding: var(--space-lg); } .mask { gap: var(--space-2xs); } }

/* Sections */
.sec { padding-block: var(--section-gap) 0; }
.sec--does { padding-top: var(--space-3xl); }
.sec--band { margin-top: var(--section-gap); padding-block: var(--section-gap); background: var(--color-paper-2); }
.sec--ruled > .container { padding-top: var(--space-3xl); background: linear-gradient(var(--color-rule), var(--color-rule)) top center / calc(100% - 2 * var(--gutter)) 1px no-repeat; }
.h2 { max-width: 20ch; font-size: var(--text-h2); line-height: 1.1; letter-spacing: -0.025em; }
.body { max-width: 36rem; margin-top: var(--space-lg); font-size: var(--text-body); line-height: 1.6; }
.points { display: grid; max-width: 36rem; margin: var(--space-xl) 0 0; padding: 0; list-style: none; color: var(--color-ink); }
.points li { padding-block: var(--space-sm); border-top: 1px solid var(--color-rule); }
.points li:last-child { border-bottom: 1px solid var(--color-rule); }

/* The path: one 1px line over the pillars, a tick at each column's left edge */
.sec--does .h2 { margin-bottom: var(--space-2xl); }
.path { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; }
.path li { position: relative; padding: var(--space-xl) var(--space-lg) 0 0; border-top: 1px solid var(--color-path); }
.path li::before { content: ""; position: absolute; top: 0; left: 0; width: 1px; height: var(--space-sm); background: var(--color-path); }
.path h3 { font-size: var(--text-item); line-height: 1.25; letter-spacing: -0.015em; }
.path p { margin-top: var(--space-xs); line-height: 1.55; }
.link--title { text-decoration-color: var(--color-rule-strong); text-underline-offset: 0.2em; }
.link--title:hover { text-decoration-color: var(--color-accent); }

/* Deep-dive rows: text on one side, the diagram on the other */
.row { align-items: center; row-gap: var(--space-2xl); }
.row__fig { align-self: center; }
.row--top { align-items: start; }
.row__text { grid-column: 1 / 7; }
.row__fig { grid-column: 8 / -1; }
.row--flip .row__text { grid-column: 8 / -1; grid-row: 1; }
.row--flip .row__fig { grid-column: 1 / 6; grid-row: 1; }

/* Head left, body right */
.split-head { row-gap: var(--space-lg); align-items: start; }
.split-head .h2 { grid-column: 1 / 7; }
.split-head__body { grid-column: 8 / -1; }
.split-head--end { align-items: end; }
.split-head__body > .body:first-child { margin-top: 0; }
.split-head__lead { color: var(--color-ink); font-size: var(--text-lead-hero); }
.wide-fig { margin-top: var(--space-2xl); }
.row__fig, .wide-fig { min-width: 0; }

/* How: the steps as a numbered ruled list */
.steps { grid-column: 8 / -1; margin: 0; padding: 0; list-style: none; counter-reset: step; }
.row--top .h2 { position: sticky; top: var(--space-xl); }
.steps li { position: relative; display: grid; grid-template-columns: 3rem minmax(0, 1fr); column-gap: var(--space-md); padding-block: var(--space-lg); counter-increment: step; }
.steps li { border-top: 1px solid var(--color-rule); }
.steps li:last-child { border-bottom: 1px solid var(--color-rule); }
.steps li::before { content: counter(step); grid-row: 1 / 3; color: var(--color-ink); font-size: var(--text-item); font-weight: 500; line-height: 1.25; font-variant-numeric: tabular-nums; }
.steps h3 { font-size: var(--text-item); line-height: 1.25; letter-spacing: -0.015em; }
.steps p { margin-top: var(--space-2xs); }

/* Developers: three columns between vertical hairlines */
.path--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: var(--space-2xl); }
.path--3 li { border-top-color: var(--color-rule-strong); }
.path--3 li::before { content: none; }

/* Close: the ask again, on the one tinted band */
.close { margin-top: var(--section-gap); padding-block: var(--space-4xl) var(--space-3xl); background: var(--color-paper-2); }
.close__grid { align-items: end; row-gap: var(--space-xl); }
.close__title { grid-column: 1 / 8; max-width: 16ch; font-size: var(--text-close); line-height: 1.04; letter-spacing: var(--tracking-display); }
.close__side { grid-column: 8 / -1; }
.close__side .body { margin-top: 0; }
.close__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-md) var(--space-xl); margin-top: var(--space-lg); }

/* Privacy */
.doc { padding-block: var(--space-3xl) var(--space-4xl); }
.doc__grid { align-items: start; row-gap: var(--space-xl); }
.doc + .foot .foot__grid { border-top: 0; }
.doc h1 { grid-column: 1 / 5; font-size: var(--text-h2); line-height: 1.1; letter-spacing: -0.025em; }
.doc__body { grid-column: 5 / -1; display: grid; gap: var(--space-lg); max-width: 40rem; font-size: var(--text-body); line-height: 1.7; }
.doc__body strong { color: var(--color-ink); font-weight: 500; }
.doc__meta { color: var(--color-muted); font-size: var(--text-sm); }

/* Footer */
.foot { background: var(--color-paper-2); }
.foot__grid { padding-block: var(--space-2xl); border-top: 1px solid var(--color-rule-strong); row-gap: var(--space-xl); }
.foot__mark { grid-column: 1 / 7; align-self: start; }
.foot__col { grid-column: span 2; }
.foot__col--product { grid-column: 9 / 11; }
.foot__head { color: var(--color-muted); font-size: var(--text-sm); font-weight: 400; }
.foot__col ul { display: grid; gap: 0; margin: var(--space-md) 0 0; padding: 0; list-style: none; }
.foot__col a { display: inline-block; padding-block: 6px; color: var(--color-ink); font-size: var(--text-sm); text-decoration: none; }
.foot__col a:hover { text-decoration: underline; text-decoration-color: var(--color-accent); text-underline-offset: 0.25em; }
.foot__col a[aria-current] { text-decoration: underline; text-decoration-color: var(--color-rule-strong); text-underline-offset: 0.25em; }
.foot__col a:active { color: var(--color-ink-2); }
.foot__col a:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; border-radius: 2px; }
.foot__legal { padding-block: var(--space-lg); border-top: 1px solid var(--color-rule); color: var(--color-muted); font-size: var(--text-sm); }

@media (max-width: 60rem) {
  .hero { padding-block: var(--space-3xl) var(--space-2xl); }
  .hero__text, .hero__moments { grid-column: 1 / -1; }
  .hero__moments { max-width: 34rem; }
  .row__text, .row__fig, .row--flip .row__text, .row--flip .row__fig, .split-head .h2, .split-head__main, .split-head__body, .steps, .close__title, .close__side { grid-column: 1 / -1; grid-row: auto; }
  .row__fig { max-width: 36rem; }
  .row--top .h2 { position: static; }
  .path { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--space-xl); }
  .path--3 { grid-template-columns: minmax(0, 1fr); }
  .foot__mark, .doc h1, .doc__body { grid-column: 1 / -1; }
  .foot__col, .foot__col--product { grid-column: span 6; }
  .split-head__main { display: contents; }
  .split-head .split-head__main .h2 { grid-column: 1 / -1; }
  .split-head__main > figure { grid-column: 1 / -1; order: 2; }
  .split-head__body { order: 1; }
}

@media (max-width: 47.99rem) {
  .nav__links { display: none; }
}

@media (max-width: 40rem) {
  .hero { padding-block: var(--space-xl) var(--space-2xl); }
  .hero .btn { margin-top: var(--space-lg); }
  .path { grid-template-columns: minmax(0, 1fr); row-gap: var(--space-lg); }
  .path li { padding: var(--space-lg) 0 0; }
  .path li::before { content: none; }
  .close { padding-block: var(--space-2xl); }
  .ui--stage { padding: var(--space-lg); }
  .tiles { grid-template-columns: minmax(0, 1fr); gap: var(--space-sm); }
  .ui--tile { padding: var(--space-md); }
  .mask { gap: var(--space-2xs); padding: 0 var(--space-sm); }
  .mask b { width: var(--space-xs); }
  .hero { padding-top: var(--space-lg); }
  .hero__moments { --text-ui: 0.875rem; --tick-y: 34px; --spine-top: 34px; --spine-bottom: 72px; }
  .ui--pay { --x: 6cqi; --w: 80cqi; }
  .ui--seen { --x: 12cqi; --w: 86cqi; }
  .ui--got { --x: 18cqi; --w: 82cqi; }
  .ui--pay .skel, .ui--seen .ln + .ln { display: none; }
  .hero__grid { row-gap: var(--space-xl); }
  .sec--does, .sec--ruled > .container { padding-top: var(--section-gap); }
  .doc { padding-top: var(--space-xl); }
  .bar__keys { grid-template-columns: minmax(0, 1fr) auto; }
}

@media print {
  * { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
  .nav__links, .nav .btn { display: none; }
  .row--top .h2 { position: static; }
}

/* Skeleton bar lengths (classes, so CSP needs no inline styles) */
.l-36px { --l: 36px; }
.l-44p { --l: 44%; }
.l-44px { --l: 44px; }
.l-48p { --l: 48%; }
.l-52p { --l: 52%; }
.l-56p { --l: 56%; }
.l-56px { --l: 56px; }
.l-62p { --l: 62%; }
.l-64p { --l: 64%; }
.l-64px { --l: 64px; }
.l-72p { --l: 72%; }