/* ==========================================================================
   Cadora — "Ledger" identity for the web.
   Tokens transcribed from CadoraApp/Theme/CadoraTheme.swift. Do not invent
   colours here: if the app's tokens change, these change with them.
   Self-contained — system fonts only, no CDNs, no network assets.
   ========================================================================== */

:root {
  color-scheme: light dark;

  /* Surfaces — parchment, not white */
  --bg:            #F7F4EC;
  --surface:       #EFEBDF;
  --elevated:      #FFFFFF;
  --border:        #E4DECF;

  /* Ink */
  --text:          #1B1A17;
  --text-2:        #6C6559;

  /* Brand — Ledger indigo */
  --brand:         #33356E;
  --on-brand:      #FFFFFF;

  /* Amber. Two tokens, deliberately split: --warn is a NON-TEXT fill (3.5:1,
     correct for glyphs which need 3:1). --warn-ink is the darker ink that
     clears 4.5:1 on parchment. Never set a sentence in --warn. */
  --warn:          #B47E1C;
  --warn-ink:      #7A5410;
  --amber-tint:    #F4E8CC;

  --success:       #2F7D4F;
  --danger:        #B23A2E;

  --shadow: 0 1px 2px rgba(27, 26, 23, .04), 0 8px 24px rgba(27, 26, 23, .06);

  /* Spacious scale — this is a marketing surface, not a dashboard */
  --s-1: .5rem;  --s-2: 1rem;   --s-3: 1.5rem;
  --s-4: 2.5rem; --s-5: 4rem;   --s-6: 6rem;

  --measure: 40rem;      /* prose line length */
  --page:    68rem;      /* widest container */
  --radius:  14px;

  /* Tracks the real sticky-header height: it wraps to two rows under ~34rem,
     where a flat 5rem left anchors 11px underneath it. */
  --head-clear: 6.5rem;

  --serif: ui-serif, Georgia, "Iowan Old Style", "Times New Roman", serif;
  --sans:  system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono:  ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg:         #141310;
    --surface:    #1E1C18;
    --elevated:   #24221D;
    --border:     #302D26;
    --text:       #ECE8DE;
    --text-2:     #9A9384;
    --brand:      #9DA2E8;
    --on-brand:   #141310;
    --warn:       #E0A94A;
    --warn-ink:   #E7C078;
    --amber-tint: #2A241A;
    --success:    #4FBE7C;
    --danger:     #FF6B5E;
    --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px rgba(0, 0, 0, .28);
  }
}

/* ── Reset ───────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: var(--head-clear); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  font-variant-numeric: tabular-nums;
  background: var(--bg);
  color: var(--text);
  font: 1rem/1.65 var(--sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, svg { display: block; max-width: 100%; height: auto; }

/* Keyboard focus must always be visible — never remove without replacement. */
:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 3px;
  border-radius: 4px;
}

::selection { background: var(--amber-tint); color: var(--text); }

/* ── Layout ──────────────────────────────────────────────────────────────── */
.container { width: 100%; max-width: var(--page); margin-inline: auto; padding-inline: 1.25rem; }
.prose     { max-width: var(--measure); }
.center    { text-align: center; margin-inline: auto; }

.skip {
  position: absolute; left: -9999px;
  background: var(--brand); color: var(--on-brand);
  padding: .7rem 1rem; border-radius: 0 0 var(--radius) 0; z-index: 100;
}
.skip:focus { left: 0; top: 0; }

/* ── Typography ──────────────────────────────────────────────────────────── */
h1, h2, h3 { font-family: var(--serif); font-weight: 600; letter-spacing: -.015em; line-height: 1.15; }

.display {
  font-size: clamp(2.5rem, 7vw, 4.25rem);
  line-height: 1.05;
  letter-spacing: -.03em;
}

h1 { font-size: clamp(2rem, 5vw, 2.9rem); }
h2 { font-size: clamp(1.4rem, 3vw, 1.8rem); }
h3 { font-size: 1.12rem; line-height: 1.3; }

/* Mono, uppercase, tracked — the app's "kicker" label style. */
.kicker {
  font-family: var(--mono);
  font-size: .74rem;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--text-2);
}

.lead     { font-size: clamp(1.06rem, 2vw, 1.22rem); color: var(--text-2); text-wrap: pretty; }
.muted    { color: var(--text-2); }
.small    { font-size: .9rem; }

p, ul, ol, table, blockquote, .callout, figure { margin-block-end: var(--s-2); }
.prose h2 { margin-block: var(--s-4) var(--s-2); }
.prose h3 { margin-block: var(--s-3) var(--s-1); }
.prose ul, .prose ol { padding-inline-start: 1.3rem; }
.prose li { margin-block-end: .45rem; }
.prose li::marker { color: var(--text-2); }

a { color: var(--brand); text-underline-offset: .16em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }

code {
  font: .89em/1.4 var(--mono);
  background: var(--surface);
  border: 1px solid var(--border);
  padding: .1em .38em;
  border-radius: 5px;
  overflow-wrap: anywhere;
}

hr { border: 0; border-top: 1px solid var(--border); margin-block: var(--s-4); }

/* ── Brand mark — the orbit: indigo ring + amber node ────────────────────── */
.mark { width: 1.6em; height: 1.6em; flex: none; }
.mark .ring { fill: none; stroke: var(--brand); stroke-width: 9; }
.mark .node { fill: var(--warn); }

.wordmark {
  display: inline-flex; align-items: center; gap: .55rem;
  font-family: var(--serif); font-size: 1.3rem; font-weight: 600;
  letter-spacing: -.01em; color: var(--text); text-decoration: none;
}

/* ── Header ──────────────────────────────────────────────────────────────── */
.site-head {
  border-bottom: 1px solid var(--border);
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: saturate(1.4) blur(8px);
  position: sticky; top: 0; z-index: 20;
}
.site-head .container {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-2); min-height: 60px; flex-wrap: wrap;
}
.site-nav { display: flex; align-items: center; gap: .35rem; flex-wrap: wrap; }
.site-nav a {
  color: var(--text-2); text-decoration: none; font-size: .93rem;
  padding: .55rem .7rem; border-radius: 8px;
  transition: color .18s ease, background-color .18s ease;
}
.site-nav a:hover { color: var(--text); background: var(--surface); }
.site-nav a[aria-current="page"] { color: var(--text); font-weight: 500; }

/* ── Buttons — 44px minimum target ───────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 44px; padding: .75rem 1.5rem;
  border-radius: 999px; border: 1px solid transparent;
  font: 500 .97rem/1 var(--sans);
  text-decoration: none; cursor: pointer;
  transition: transform .18s ease, background-color .18s ease, border-color .18s ease;
}
.btn-primary { background: var(--brand); color: var(--on-brand); }
.btn-primary:hover { transform: translateY(-1px); }
.btn-ghost { border-color: var(--border); color: var(--text); background: var(--elevated); }
.btn-ghost:hover { border-color: var(--brand); color: var(--brand); }
.btn-row { display: flex; flex-wrap: wrap; gap: .75rem; }
@media (prefers-reduced-motion: reduce) { .btn:hover { transform: none; } }

/* ── Sections ────────────────────────────────────────────────────────────── */
.section { padding-block: var(--s-6); }
.section + .section { padding-block-start: 0; }
.section-head { max-width: 34rem; margin-block-end: var(--s-4); }
.section-head .kicker { display: block; margin-block-end: .7rem; }

/* ── Hero ────────────────────────────────────────────────────────────────── */
.hero { padding-block: clamp(3.5rem, 9vw, 6.5rem) var(--s-5); }
.hero .kicker { display: block; margin-block-end: 1.1rem; }
.hero .display { margin-block-end: var(--s-2); max-width: 16ch; }
.hero .lead { max-width: 46ch; margin-block-end: var(--s-3); }
.hero-note { margin-block-start: var(--s-2); font-size: .87rem; color: var(--text-2); }

.hero-grid { display: grid; gap: var(--s-5); align-items: center; }
@media (min-width: 60rem) {
  .hero-grid { grid-template-columns: 1.05fr .95fr; }
  .hero .display { font-size: clamp(3rem, 4.6vw, 4.25rem); }
}

/* ── Phone frame ─────────────────────────────────────────────────────────── */
.phone {
  /* min(…, 100%) not vw: inside a grid cell narrower than the viewport, a
     vw-based width overflows its column at ~768px. */
  position: relative;
  width: min(280px, 100%);
  border-radius: 40px;
  padding: 9px;
  background: linear-gradient(150deg, #3a3a3f 0%, #1a1a1d 40%, #2b2b30 100%);
  box-shadow:
    0 2px 4px rgba(27,26,23,.10),
    0 14px 32px rgba(27,26,23,.14),
    0 36px 70px rgba(27,26,23,.16);
  margin-inline: auto;
}
@media (prefers-color-scheme: dark) {
  .phone { box-shadow: 0 2px 4px rgba(0,0,0,.4), 0 14px 32px rgba(0,0,0,.46), 0 36px 70px rgba(0,0,0,.5); }
}
.phone img, .phone picture { border-radius: 32px; display: block; }
.phone::before {                       /* dynamic island, same object as .device */
  content: ""; position: absolute; top: 20px; left: 50%;
  width: 78px; height: 23px; margin-left: -39px;
  background: #0d0d0f; border-radius: 12px; z-index: 4;
}
.phone::after {                        /* the same glass sheen */
  content: ""; position: absolute; inset: 9px; border-radius: 32px;
  background: linear-gradient(147deg, rgba(255,255,255,.16) 0%, rgba(255,255,255,.05) 22%, rgba(255,255,255,0) 42%);
  pointer-events: none; z-index: 3;
}

.shots { display: grid; gap: var(--s-4); grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.shots figcaption { margin-block-start: .9rem; text-align: center; font-size: .9rem; color: var(--text-2); }

/* ── Cards ───────────────────────────────────────────────────────────────── */
.grid { display: grid; gap: var(--s-2); grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }

.card {
  background: var(--elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--s-3);
}
.card h3 { margin-block-end: .45rem; }
.card p  { color: var(--text-2); font-size: .95rem; margin: 0; }

.card-icon { width: 26px; height: 26px; color: var(--brand); margin-block-end: .9rem; }
.card-icon svg { width: 100%; height: 100%; stroke: currentColor; fill: none; stroke-width: 1.75; }

/* Attention card — mirrors the app's AttentionCard */
.callout {
  background: var(--amber-tint);
  border: 1px solid color-mix(in srgb, var(--warn) 42%, transparent);
  border-radius: var(--radius);
  padding: var(--s-2) var(--s-3);
  color: var(--warn-ink);
}
.callout strong { color: var(--warn-ink); }
.callout :last-child { margin-block-end: 0; }

/* ── Feature list ────────────────────────────────────────────────────────── */
.ticks { list-style: none; padding: 0; display: grid; gap: .8rem; }
.ticks li { display: flex; gap: .7rem; align-items: flex-start; }
.ticks svg { width: 19px; height: 19px; flex: none; margin-block-start: .22rem; color: var(--success); stroke: currentColor; fill: none; stroke-width: 1.75; }

/* ── Tables ──────────────────────────────────────────────────────────────── */
.tablewrap { overflow-x: auto; margin-block-end: var(--s-2); }
table { border-collapse: collapse; width: 100%; font-size: .94rem; }
th, td { text-align: left; padding: .65rem .75rem; border-bottom: 1px solid var(--border); vertical-align: top; }
th { font-weight: 600; white-space: nowrap; }

/* ── Legal / doc pages ───────────────────────────────────────────────────── */
.doc-head { padding-block: var(--s-5) var(--s-3); border-bottom: 1px solid var(--border); margin-block-end: var(--s-4); }
.doc-head h1 { margin-block-end: .6rem; }
.doc-meta { color: var(--text-2); font-size: .92rem; }

.toc {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--s-2) var(--s-3);
  margin-block-end: var(--s-4);
}
.toc .kicker { display: block; margin-block-end: .6rem; }
.toc ul { list-style: none; padding: 0; margin: 0; columns: 2; column-gap: var(--s-3); }
.toc li { break-inside: avoid; }
.toc a {
  color: var(--text); text-decoration: none; font-size: .93rem;
  display: block; padding-block: .34rem;   /* 24px min box for WCAG 2.2 SC 2.5.8 */
  min-height: 24px;
}
.toc a:hover { color: var(--brand); text-decoration: underline; }
@media (max-width: 34rem) { .toc ul { columns: 1; } }

/* Anchored headings clear the sticky header */
.prose h2[id], .prose h3[id], section[id] { scroll-margin-top: var(--head-clear); }

/* ── FAQ ─────────────────────────────────────────────────────────────────── */
details {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--elevated);
  margin-block-end: .75rem;
}
details[open] { background: var(--elevated); }
summary {
  cursor: pointer; list-style: none;
  padding: 1rem var(--s-3); min-height: 44px;
  font-weight: 500;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
summary::-webkit-details-marker { display: none; }
summary::after {
  content: ""; width: 9px; height: 9px; flex: none;
  border-right: 2px solid var(--text-2); border-bottom: 2px solid var(--text-2);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform .2s ease;
}
details[open] summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
summary:hover { color: var(--brand); }
.details-body { padding: 0 var(--s-3) var(--s-3); }
.details-body :last-child { margin-block-end: 0; }
@media (prefers-reduced-motion: reduce) { summary::after { transition: none; } }

/* ── Footer ──────────────────────────────────────────────────────────────── */
.site-foot {
  border-top: 1px solid var(--border);
  margin-block-start: var(--s-6);
  padding-block: var(--s-4);
  color: var(--text-2);
  font-size: .9rem;
}
.site-foot .container { display: flex; flex-wrap: wrap; gap: var(--s-2); justify-content: space-between; align-items: center; }
.site-foot nav { display: flex; flex-wrap: wrap; gap: 1.1rem; }
.site-foot a { color: var(--text-2); text-decoration: none; display: inline-block; padding-block: .2rem; min-height: 24px; }
.site-foot a:hover { color: var(--brand); text-decoration: underline; }

/* ── Motion — one idea, subtle, and off when asked ───────────────────────── */
@media (prefers-reduced-motion: no-preference) {
  .reveal { animation: rise .5s cubic-bezier(.22, .61, .36, 1) both; }
  .reveal-2 { animation-delay: .07s; }
  .reveal-3 { animation-delay: .14s; }
  @keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
}

/* ══════════════════════════════════════════════════════════════════════════
   Scrollytelling — a phone pinned while the steps scroll past it, its screen
   crossfading to match the step you're reading.

   Pinning is plain `position: sticky`, not a scroll listener: the browser
   keeps it glued on the compositor, so there is no per-frame JS and nothing
   to jank. JS only decides which step is *active*; if it never runs the
   steps still read in order and the phone shows the first screen.
   ══════════════════════════════════════════════════════════════════════════ */

.scrolly { display: grid; gap: var(--s-4); }

.scrolly-media {
  position: sticky;
  /* Centre the phone in the viewport, but never let it slide under the
     sticky header on short screens. */
  /* device height is ~36vh x 2.17 ~= 78vh, so 11vh leaves an even margin
     top and bottom while clearing the sticky header. */
  top: max(4.5rem, 11vh);
  justify-self: center;
  height: fit-content;
}

/* ── The device, in 3D ────────────────────────────────────────────────────
   The phone is turned on its Y axis inside a perspective container, so the
   left edge of the body reads as thickness rather than as a flat picture.
   The angle eases toward the reader step by step (see [data-turn]) — a class
   change, so the browser interpolates it on the compositor and there is no
   scroll handler involved.
   ─────────────────────────────────────────────────────────────────────── */
.scrolly-media { perspective: 900px; perspective-origin: 65% 45%; }

.device {
  position: relative;
  width: min(400px, 82vw, 36vh);
  padding: 10px;
  border-radius: 46px;
  background: linear-gradient(150deg, #3a3a3f 0%, #1a1a1d 40%, #2b2b30 100%);
  transform-style: preserve-3d;
  transform: rotateY(-18deg) rotateZ(1.2deg);
  transition: transform .7s cubic-bezier(.22, .61, .36, 1);
  box-shadow:
    0 2px 4px rgba(27,26,23,.10),
    0 18px 40px rgba(27,26,23,.16),
    0 48px 90px rgba(27,26,23,.20);
}
@media (prefers-color-scheme: dark) {
  .device { box-shadow: 0 2px 4px rgba(0,0,0,.4), 0 18px 40px rgba(0,0,0,.5), 0 48px 90px rgba(0,0,0,.55); }
}

/* The turn eases toward the reader as the steps advance. */
.scrolly[data-turn="0"] .device { transform: rotateY(-18deg) rotateZ(1.2deg); }
.scrolly[data-turn="1"] .device { transform: rotateY(-12deg) rotateZ(.8deg); }
.scrolly[data-turn="2"] .device { transform: rotateY(-7deg)  rotateZ(.4deg); }
.scrolly[data-turn="3"] .device { transform: rotateY(-2deg)  rotateZ(0deg); }

/* Screen sheen — a fixed diagonal highlight over the glass. Sits above the
   screenshots, never intercepts a click. */
.device::after {
  content: "";
  position: absolute; inset: 10px;
  border-radius: 37px;
  background: linear-gradient(147deg,
    rgba(255,255,255,.18) 0%,
    rgba(255,255,255,.06) 22%,
    rgba(255,255,255,0)   42%,
    rgba(255,255,255,0)   100%);
  pointer-events: none;
  z-index: 3;
}

/* Dynamic island */
.device::before {
  content: "";
  position: absolute; top: 22px; left: 50%;
  width: 88px; height: 26px; margin-left: -44px;
  background: #0d0d0f; border-radius: 14px;
  z-index: 4;
}

/* Screens are stacked in one box and crossfaded; the first is the poster. */
.screen-stack { position: relative; border-radius: 37px; overflow: hidden; }
.screen-stack img {
  border-radius: 37px;
  opacity: 0;
  transition: opacity .5s ease;
}
/* The screens are <picture> now (dark-mode source), so the stacking lives on
   the wrapper while opacity stays on the <img> the JS toggles. */
.screen-stack picture { display: block; }
.screen-stack picture:first-child { position: relative; }   /* sets the box height */
.screen-stack picture + picture { position: absolute; inset: 0; }
.screen-stack img.is-on { opacity: 1; }
/* No JS: nothing gets .is-on, so show the first screen. */
.screen-stack:not(.is-live) picture:first-child img { opacity: 1; }

.scrolly-steps { display: grid; }

.step {
  min-height: 62vh;
  display: flex; flex-direction: column; justify-content: center;
  max-width: 30rem;
}
.step .kicker { display: block; margin-block-end: .7rem; color: var(--warn-ink); }
.step h3 { font-size: clamp(1.5rem, 2.6vw, 2rem); margin-block-end: .8rem; }
.step p  { color: var(--text-2); }

/* Which step is live is marked ADDITIVELY, with a brand rule — never by dimming
   the others.
   The original .38 dim composited the kicker to 1.79:1 and body to 1.69:1: a
   serious WCAG AA failure in the state a reader sits in constantly. Solving for
   the alpha that clears AA gives 0.927 — because --text-2 on --bg starts at only
   5.24:1, leaving 0.74 of headroom — and a 7% dim is not a visual cue at all.
   So opacity-dimming text is incompatible with this palette by construction.
   Every step keeps full contrast; the active one gains a rule. */
.is-live .step { }

@media (min-width: 48rem) {
  .scrolly { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-3); align-items: start; }
  /* Phone on the left, steps on the right — the media column comes second in
     the source so the steps are read first by a screen reader. */
  .scrolly-media { grid-column: 1; grid-row: 1; }
  .scrolly-steps { grid-column: 2; grid-row: 1; }
}

/* Between the two breaks the columns are tight, so the phone shrinks rather
   than the text column collapsing. */
@media (min-width: 60rem) {
  .scrolly { gap: var(--s-5); }
  .device { width: min(400px, 40vw, 36vh); }
}
@media (min-width: 48rem) and (max-width: 59.99rem) {
  .device { width: min(300px, 38vw, 32vh); padding: 8px; border-radius: 38px; }
  .device::after { inset: 8px; border-radius: 31px; }
  .device::before { top: 17px; width: 66px; height: 20px; margin-left: -33px; }
  .screen-stack, .screen-stack img { border-radius: 31px; }
  .scrolly-media { top: max(4.5rem, 14vh); }
  .step { min-height: 58vh; }
  .step h3 { font-size: clamp(1.25rem, 2.4vw, 1.6rem); }
}

/* Under the break the pin buys nothing: each step simply carries its own
   screenshot inline, which is also what a no-JS reader gets. */
@media (max-width: 47.99rem) {
  .scrolly-media { display: none; }
  .step { min-height: 0; margin-block-end: var(--s-4); max-width: none; }
  .step-shot { margin-block-start: var(--s-2); }
}
@media (min-width: 48rem) { .step-shot { display: none; } }

@media (prefers-reduced-motion: reduce) {
  .screen-stack img, .is-live .step { transition: none; }
}

@media (prefers-reduced-motion: reduce) {
  .device { transition: none; }
}

/* ══════════════════════════════════════════════════════════════════════════
   Status action, privacy band, closing block.
   ══════════════════════════════════════════════════════════════════════════ */

/* Not a link on purpose: the app has no App Store ID yet, and a button that
   goes nowhere is worse than an honest label. Swap for a real <a class="btn
   btn-primary"> the day the ID exists. */
.btn-status {
  background: var(--surface);
  border: 1px dashed color-mix(in srgb, var(--brand) 45%, transparent);
  color: var(--text);
  cursor: default;
}
.btn-ico { width: 17px; height: 17px; stroke: currentColor; fill: none; stroke-width: 1.75; }

/* ── Privacy band — the one place on this page where loud is correct ─────── */
.band {
  background: var(--surface);
  border-block: 1px solid var(--border);
  padding-block: var(--s-6);
}
.band .kicker { display: block; margin-block-end: .9rem; }
.band-line {
  font-size: clamp(2rem, 4.6vw, 3.2rem);
  line-height: 1.05;
  letter-spacing: -.025em;
  max-width: 18ch;
  margin-block-end: var(--s-2);
}
.band-lead { max-width: 46ch; margin-block-end: var(--s-4); }

.proofs {
  list-style: none; padding: 0;
  display: grid; gap: var(--s-2);
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  margin-block-end: var(--s-3);
}
.proofs li {
  background: var(--elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--s-3);
  font-size: .95rem;
  color: var(--text-2);
}
.proofs strong { display: block; color: var(--text); font-weight: 600; margin-block-end: .35rem; }

/* ── Closing block — end on the ask ─────────────────────────────────────── */
.close-inner { max-width: 42rem; }
.close .kicker { display: block; margin-block-end: .9rem; }
.close-line {
  font-size: clamp(1.9rem, 4.2vw, 2.9rem);
  line-height: 1.08; letter-spacing: -.025em;
  margin-block-end: var(--s-2);
}

/* Visible to screen readers, not to sighted users — for the section label that
   heading navigation needs but the layout doesn't want to show. */
.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* A linked FAQ answer should announce itself when you land on it. */
details:target {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 18%, transparent);
}

/* ══════════════════════════════════════════════════════════════════════════
   Ledger structure.

   The page claims "a ledger, not a fintech dashboard" and until now only the
   palette carried it. A ledger's structure is ruled lines, a narrow label
   column, entries rather than cards, and figures that align. That is what
   follows — the identity moved from colour into form.
   ══════════════════════════════════════════════════════════════════════════ */

/* A section opens on a rule, the way a ledger page does. */
.ruled-head {
  border-block-start: 1px solid var(--text);
  padding-block-start: var(--s-2);
  margin-block-end: var(--s-4);
  display: grid; gap: var(--s-2);
}
.ruled-head h2 { max-width: 22ch; }
.ruled-head .note {
  color: var(--text-2); font-size: .95rem; max-width: 42ch;
}
@media (min-width: 48rem) {
  .ruled-head { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: end; gap: var(--s-4); }
}

/* Entries: ruled rows with a label column, not boxes. */
.entries { border-block-end: 1px solid var(--border); }

.entry {
  display: grid; gap: .35rem var(--s-3);
  padding-block: var(--s-3);
  border-block-start: 1px solid var(--border);
}
.entry:first-child { border-block-start: 0; }

.entry-label {
  font-family: var(--mono);
  font-size: .74rem; text-transform: uppercase; letter-spacing: .12em;
  color: var(--text-2);
  padding-block-start: .28rem;
}
.entry h3 { margin-block-end: .4rem; }
.entry p { color: var(--text-2); margin: 0; max-width: 58ch; }
.entry-body > * + * { margin-block-start: .5rem; }

@media (min-width: 48rem) {
  .entry { grid-template-columns: 9.5rem minmax(0, 1fr); }
}

/* A tighter ruled list for facts that are read as a set. */
.facts { border-block-end: 1px solid var(--border); }
.facts-row {
  display: grid; gap: .2rem var(--s-3);
  padding-block: .95rem;
  border-block-start: 1px solid var(--border);
  align-items: baseline;
}
.facts-row .k {
  font-family: var(--mono); font-size: .74rem; text-transform: uppercase;
  letter-spacing: .12em; color: var(--text-2);
}
.facts-row .v { color: var(--text); }
@media (min-width: 40rem) {
  .facts-row { grid-template-columns: 11rem minmax(0, 1fr); }
}

/* Scrollytelling: the entry number is the cardinality cue AND the active
   marker, so the reader always knows which of how many they are on. */
.step-no {
  font-family: var(--mono); font-size: .76rem; letter-spacing: .1em;
  color: var(--text-2);
  display: block; margin-block-end: .7rem;
  transition: color .4s ease;
}
.step-no b { font-weight: 600; color: var(--text-2); transition: color .4s ease; }
.is-live .step.is-active .step-no,
.is-live .step.is-active .step-no b { color: var(--brand); }
@media (prefers-reduced-motion: reduce) {
  .step-no, .step-no b { transition: none; }
}

/* The band's rules sit on the darker surface, so they need their own weight. */
.band-facts { border-block-end-color: color-mix(in srgb, var(--text) 22%, transparent); }
.band-facts .facts-row { border-block-start-color: color-mix(in srgb, var(--text) 22%, transparent); }
.band .band-line { border-block-start: 1px solid var(--text); padding-block-start: var(--s-2); }

/* The doc pages open on a rule too, so the family reads as one system. */
.doc-head { border-block-start: 1px solid var(--text); border-block-end: 0; }

/* FAQ group intro — one line saying what the set has in common, so seven
   identical pills stop being seven identical pills. */
.group-note { color: var(--text-2); font-size: .95rem; margin-block-end: var(--s-2); max-width: 56ch; }
.prose h3[id] { margin-block: var(--s-4) .4rem; }

/* ── Mobile header: one row, not two ─────────────────────────────────────
   At 390px the four nav links wrapped, making the sticky header 93px — 11% of
   the viewport, permanently, to show three post-purchase links. "Features" is
   an in-page anchor the hero button already covers, so it goes first; the rest
   tighten enough to sit on one line. */
@media (max-width: 34rem) {
  .site-head .container { min-height: 52px; flex-wrap: nowrap; gap: .5rem; }
  .site-nav { gap: .1rem; flex-wrap: nowrap; }
  .site-nav a { font-size: .86rem; padding: .5rem .4rem; }
  .site-nav a[href="#features"] { display: none; }
  .wordmark { font-size: 1.15rem; }
  .mark { width: 1.45em; height: 1.45em; }
}

/* The platform requirement is the most disqualifying fact on the page for a
   visitor on an older device; it should not be the quietest line on it. */
.hero-note { color: var(--text); font-size: .93rem; }
.hero-note strong { font-weight: 600; }