/* Centtavo: page styles. The engine's CSS is mechanism only; everything
   visual lives here. Tokens are the brand's (CLAUDE.md), not the starter's. */

/* ---------------------------------------------------------------- tokens -- */
:root {
  --bg: #F7F4EE;            /* warm paper ground */
  --bg-2: #EFEAE0;          /* recessed panels */
  --surface: #FFFFFF;       /* cards */
  --ink: #1B1A17;           /* primary text */
  --ink-soft: color-mix(in srgb, var(--sw-ground-ink, var(--ink)) 74%, var(--sw-ground, var(--bg)));
  --line: color-mix(in srgb, var(--sw-ground-ink, var(--ink)) 14%, transparent);
  --accent: #5E6B4F;        /* olive: the action, one highlight per screen */
  --accent-ink: #F7F4EE;
  --button: #56624A;        /* the accent, one step darker so button text clears 4.5:1 */
  --pos: #4C6B3B;
  --neg: #9B3A2A;
  --neg-dark: #E3957F;      /* money out, on the ink ground */
  --paper: #FBF9F4;         /* the hero card */
  --radius: 7px;

  --font-display: "Newsreader", "Iowan Old Style", Georgia, serif;
  --font-text: "Inter Tight", "Avenir Next", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --step--2: clamp(0.75rem, 0.73rem + 0.08vw, 0.8rem);
  --step--1: clamp(0.9375rem, 0.9rem + 0.1vw, 1rem);
  --step-0: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);
  --step-1: clamp(1.25rem, 1.12rem + 0.55vw, 1.55rem);
  --step-2: clamp(1.6rem, 1.3rem + 1.3vw, 2.5rem);
  --step-3: clamp(2.2rem, 1.6rem + 2.8vw, 4.2rem);
  --step-4: clamp(2.9rem, 1.6rem + 5.6vw, 7.6rem);

  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px;
  --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 128px;
  --section: clamp(80px, 10vw, 136px);
  --block: clamp(64px, 7.5vw, 104px);
  --gutter: clamp(20px, 5vw, 72px);
  --measure: 62ch;
  --nav-h: 64px;

  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
  --shadow: 0 1px 0 rgba(255, 255, 255, 0.5) inset, 0 18px 40px -18px rgba(27, 26, 23, 0.35), 0 4px 10px -4px rgba(27, 26, 23, 0.18);
}
@media (max-width: 700px) { :root { --step--1: 1rem; --nav-h: 60px; } }

/* ------------------------------------------------------------------ base -- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: var(--nav-h); }
body {
  margin: 0;
  background: var(--sw-ground, var(--bg));
  color: var(--sw-ground-ink, var(--ink));
  font: 400 var(--step-0)/1.6 var(--font-text);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img, video, canvas, svg { display: block; max-width: 100%; }
img { height: auto; }
h1, h2, h3 { margin: 0; text-wrap: balance; }
h1, h2 { font-family: var(--font-display); font-weight: 400; font-optical-sizing: auto; }
h1 { font-size: var(--step-4); line-height: 0.98; letter-spacing: -0.03em; }
h2 { font-size: var(--step-3); line-height: 1.04; letter-spacing: -0.025em; }
h3 { font-family: var(--font-text); font-size: var(--step-1); font-weight: 600; line-height: 1.2; letter-spacing: -0.01em; }
p { margin: 0; max-width: var(--measure); text-wrap: pretty; }
h2 + p, h3 + p { margin-top: var(--s-4); }
p + p { margin-top: var(--s-4); }
a { color: inherit; text-underline-offset: 0.18em; }
.note { font-family: var(--font-mono); font-size: var(--step--1); letter-spacing: 0.02em; color: var(--ink-soft); }
.slot-text { font-family: var(--font-mono); font-size: 0.88em; color: var(--accent); }
.on-dark .slot-text { color: #E2E8D8; }
p.slot-text { font-size: var(--step--1); }
.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); border: 0;
}

:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; }
.skip {
  position: absolute; left: var(--s-4); top: -100px; z-index: 100;
  display: inline-flex; align-items: center; min-height: 44px;
  padding: 0 var(--s-4); background: var(--ink); color: var(--bg);
}
.skip:focus { top: var(--s-4); }

.wrap { padding-inline: var(--gutter); max-width: 1440px; margin-inline: auto; }

html:not(.sw-on) .sw-stage { min-height: 100svh; }

/* Each section owns its ink. The live ground ink only drives fixed chrome;
   section text keeps its own colour through a ground change. */
.on-light { color: var(--ink); --ink-soft: color-mix(in srgb, var(--ink) 74%, var(--bg)); --line: rgba(27, 26, 23, 0.14); }
.on-dark { color: var(--bg); --ink-soft: color-mix(in srgb, var(--bg) 72%, var(--ink)); --line: rgba(247, 244, 238, 0.2); }
/* Two grounds, alternating: cream for the hero, the video's caption, the coach
   and the tools; ink for the race, the people and the close. Without the video
   the page runs cream, ink, cream, ink, cream, ink. Flow sections paint their
   own ground, so a neighbour taking over the page colour mid-scroll can't
   leave their text on the wrong one. */
#tools { background: var(--bg); }
#intro, #people, #start, .foot { background: var(--ink); }
/* Pinned stages paint their ground too: as a stage slides in, the page
   ground behind it may still belong to the previous section. */
.on-light .sw-stage { background: var(--bg); }
.on-dark .sw-stage { background: var(--ink); }

/* --------------------------------------------------------------- buttons -- */
.button {
  display: inline-flex; align-items: center; justify-content: center; min-height: 52px;
  padding: 0 var(--s-6); border: 0; border-radius: 999px;
  background: var(--button); color: var(--accent-ink);
  font: 600 var(--step--1)/1 var(--font-text); letter-spacing: 0.01em;
  text-decoration: none; cursor: pointer;
  box-shadow: 0 10px 24px -12px rgba(46, 54, 36, 0.6);
  transition: transform 0.2s var(--ease-out), background-color 0.2s var(--ease-out);
}
.button:hover { transform: translateY(-2px); background: #4B5640; }
.button[aria-disabled="true"] { opacity: 0.6; cursor: default; transform: none; }
.on-light .button-ink { background: var(--ink); color: var(--bg); box-shadow: none; }
.on-dark .button-ink { background: var(--bg); color: var(--ink); box-shadow: none; }
/* The second action: same size as the first, so it reads as a real choice. */
.button-ghost { background: transparent; color: currentColor; box-shadow: inset 0 0 0 1.5px currentColor; }
.button-ghost:hover { background: color-mix(in srgb, currentColor 8%, transparent); }

/* ------------------------------------------------------------------- nav -- */
/* A solid bar, not a gradient over the photo. page.js sets --nav-bg and
   --nav-ink from the section under the bar. */
.nav {
  position: fixed; inset: 0 0 auto; z-index: 30; height: var(--nav-h);
  display: flex; align-items: center; gap: var(--s-6);
  padding: 0 var(--gutter);
  color: var(--nav-ink, var(--ink));
  background: var(--nav-bg, var(--bg));
  border-bottom: 1px solid color-mix(in srgb, var(--nav-ink, var(--ink)) 12%, transparent);
  --ink-soft: color-mix(in srgb, var(--nav-ink, var(--ink)) 74%, var(--nav-bg, var(--bg)));
}
.nav a { text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; white-space: nowrap; }
.nav-mark { gap: var(--s-2); margin-right: auto; }
/* The Solid C logo (site/brand/), its letters drawn as outlines, so it needs no font. The header
   carries the mark beside CENTTAVO; the footer, the mark alone. */
.logo { display: block; height: 2.1rem; width: auto; }
.logo-mark { display: inline-block; height: 1.35em; width: auto; vertical-align: -0.3em; margin-right: 0.35em; }
.nav-index { display: flex; gap: var(--s-5); font-size: var(--step--1); }
.nav-index a { position: relative; color: var(--ink-soft); transition: color 0.2s var(--ease-out); }
.nav-index a:hover, .nav-index a[aria-current] { color: var(--nav-ink, var(--ink)); }
.nav-index a[aria-current]::after { content: ""; position: absolute; left: 0; right: 0; bottom: 8px; height: 1px; background: currentColor; }
.nav-action {
  padding-inline: var(--s-4); border: 1px solid currentColor; border-radius: 999px;
  font-size: var(--step--1); font-weight: 600;
  transition: background-color 0.2s var(--ease-out), color 0.2s var(--ease-out);
}
.nav-action:hover { background: var(--nav-ink, var(--ink)); color: var(--nav-bg, var(--bg)); }
/* EN | ES: a two-part switch, outlined like the call button, the current language filled.
   The other one links to its page at the same section (page.js keeps the #). */
.lang-switch {
  display: inline-flex; align-items: center; gap: 2px; padding: 3px;
  border: 1px solid currentColor; border-radius: 999px;
  font-family: var(--font-mono); font-size: var(--step--1); font-weight: 600; letter-spacing: 0.06em;
}
.lang-globe { width: 1.3em; height: 1.3em; margin: 0 0.25em 0 0.4em; }
.lang-switch > span, .nav .lang-switch > a {
  min-height: 34px; min-width: 40px; display: inline-flex; align-items: center; justify-content: center;
  padding: 0 0.6em; border-radius: 999px;
}
.lang-on { background: var(--nav-ink, var(--ink)); color: var(--nav-bg, var(--bg)); }
.lang-switch > a { color: inherit; }
.lang-switch > a:hover { background: color-mix(in srgb, currentColor 12%, transparent); }
/* On a phone the nav's call button takes its short label, so EN · ES fits beside it. */
.nav-short { display: none; }
@media (max-width: 480px) {
  .nav { gap: var(--s-2); }
  .lang-globe { display: none; }
  .lang-switch { font-size: 0.75rem; }
  .lang-switch > span, .nav .lang-switch > a { min-width: 34px; padding: 0 0.45em; }
  .nav-long { display: none; }
  .nav-short { display: inline; }
}
@media (max-width: 1080px) { .nav-index { display: none; } }
/* Spanish menu labels are longer: below 1200px they would squeeze the logo, so they hide sooner. */
@media (max-width: 1199.98px) { html[lang="es"] .nav-index { display: none; } }
@media (max-width: 420px) {
  .logo { height: 1.75rem; }
  .nav-action { font-size: 0.8rem; padding-inline: var(--s-3); }
}

/* ------------------------------------------------------------ planes ------ */
.plane { position: absolute; inset: 0; pointer-events: none; }
.plane img { width: 100%; height: 100%; object-fit: cover; }
.grain {
  opacity: 0.1; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.5 0 0 0 0 0.5 0 0 0 0 0.5 0 0 0 0.9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ------------------------------------------------------------ 1 · open ---- */
/* The tool is the hero: copy on the left, the working forecast on the right,
   over the table in late light. The photo drifts behind (depth, pointer). */
.open { position: relative; overflow: clip; min-height: 100svh; padding: calc(var(--nav-h) + clamp(24px, 6vh, 72px)) 0 clamp(40px, 8vh, 96px); }
.open .plate { inset: -8% 0; }
.open .plate img { object-position: 30% 50%; filter: saturate(0.92); }
.open .beam {
  inset: -20% -10%;
  background: linear-gradient(118deg, transparent 38%, rgba(255, 236, 205, 0.14) 46%, transparent 58%);
  mix-blend-mode: soft-light;
}
.open-grid { position: relative; display: grid; grid-template-columns: 1fr minmax(380px, 33rem); gap: var(--s-7) clamp(32px, 5vw, 96px); align-items: center; min-height: calc(100svh - var(--nav-h) - 140px); }
.open-copy { position: relative; isolation: isolate; }
.open-copy::before {  /* local scrim: warm paper light behind the copy only */
  content: ""; position: absolute; z-index: -1; inset: -16% -24% -16% -40%;
  background: radial-gradient(closest-side, rgba(247, 244, 238, 0.74), rgba(247, 244, 238, 0.44) 55%, transparent);
  filter: blur(8px);
}
.open h1 { font-weight: 350; max-width: 11ch; }
.open .lede { margin-top: var(--s-6); font-size: var(--step-1); line-height: 1.4; max-width: 30ch; }
.open-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); margin-top: var(--s-6); max-width: none; }
.open-ask { margin-top: var(--s-4); max-width: 34rem; font-size: var(--step--1); line-height: 1.5; color: var(--ink); }

.tool {
  position: relative; padding: clamp(20px, 2.4vw, 32px);
  background: color-mix(in srgb, var(--paper) 72%, transparent); color: var(--ink); border-radius: calc(var(--radius) * 2);
  -webkit-backdrop-filter: blur(18px) saturate(1.15); backdrop-filter: blur(18px) saturate(1.15);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.7) inset, 0 40px 80px -36px rgba(27, 26, 23, 0.55), 0 8px 18px -10px rgba(27, 26, 23, 0.3);
  --ink-soft: color-mix(in srgb, var(--ink) 76%, var(--paper));
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .tool { background: var(--paper); } }
.tool-kicker { font-size: var(--step--1); color: var(--ink-soft); }
.tool-figure { margin-top: var(--s-2); font-family: var(--font-mono); font-size: clamp(2.2rem, 1.6rem + 2vw, 3.2rem); font-weight: 500; letter-spacing: -0.04em; line-height: 1; font-variant-numeric: tabular-nums; }
.tool-figure.neg { color: var(--neg); }
.tool-sub { margin-top: var(--s-2); font-size: var(--step--1); color: var(--ink-soft); }
.tool-chart { width: 100%; height: clamp(70px, 11vh, 110px); margin-top: var(--s-4); overflow: visible; }
.tool-chart path { fill: none; vector-effect: non-scaling-stroke; stroke-linejoin: round; stroke-linecap: round; }
.tool-chart .line { stroke: var(--accent); stroke-width: 2.5; }
.tool-chart .ghost { stroke: color-mix(in srgb, var(--ink) 34%, transparent); stroke-width: 1.5; stroke-dasharray: 4 4; }
.tool-chart .zero { stroke: color-mix(in srgb, var(--ink) 18%, transparent); stroke-width: 1; vector-effect: non-scaling-stroke; }
.tool-axis { display: flex; justify-content: space-between; margin-top: var(--s-1); font-family: var(--font-mono); font-size: var(--step--2); color: var(--ink-soft); }
.sliders { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--s-5); margin-top: var(--s-4); align-items: end; }
.sl > span { min-height: 2.8em; display: flex; flex-direction: column; justify-content: flex-end; line-height: 1.3; }
.sl > span em { display: block; font-style: normal; }
.sl { display: grid; gap: 2px; }
.sl > span { font-size: var(--step--1); color: var(--ink-soft); }
.sl b { font-family: var(--font-mono); font-weight: 500; color: var(--ink); letter-spacing: -0.02em; }
.sl input[type="range"] { width: 100%; height: 44px; margin: 0; accent-color: var(--accent); cursor: pointer; }
.keep { display: flex; align-items: center; gap: var(--s-3); min-height: 44px; font-size: var(--step--1); cursor: pointer; }
.keep input { width: 24px; height: 24px; margin: 0; accent-color: var(--accent); flex: none; }
.keep[hidden] { display: none; }
.tool-note { margin-top: var(--s-3); font-size: var(--step--1); line-height: 1.45; min-height: 2.9em; }
.tool-fine { margin-top: var(--s-3); font-size: var(--step--1); line-height: 1.5; color: var(--ink-soft); }
/* the selector: three tools, one sliding highlight */
.tool-tabs { position: relative; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 2px; margin: calc(-1 * var(--s-2)) calc(-1 * var(--s-2)) var(--s-4); padding: 3px;
  background: color-mix(in srgb, var(--ink) 6%, transparent); border-radius: 999px; }
.tool-tabs button { position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 40px; padding: 4px 10px;
  border: 0; border-radius: 999px; background: transparent; color: var(--ink-soft); font: 500 var(--step--1)/1.15 var(--font-text); text-align: center; cursor: pointer;
  transition: color 0.25s var(--ease-out); }
.tool-tabs button:hover { color: var(--ink); }
.tool-tabs button[aria-selected="true"] { color: var(--ink); }
.tool-tabs button:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.tool-tabs svg { width: 15px; height: 15px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.tool-tabs button[aria-selected="true"] svg { stroke: var(--accent); }
.tab-mark { position: absolute; z-index: 0; top: 3px; bottom: 3px; left: 0; width: var(--mark-w, 0); transform: translateX(var(--mark-x, 0));
  border-radius: 999px; background: var(--surface); box-shadow: 0 1px 2px rgba(27, 26, 23, 0.12), 0 2px 8px -2px rgba(27, 26, 23, 0.12); }
.tool-tabs.ready .tab-mark { transition: transform 0.35s var(--ease-out), width 0.35s var(--ease-out); }
@media (prefers-reduced-motion: reduce) { .tool-tabs.ready .tab-mark { transition: none; } }
/* on a phone each tab is an icon over a short label, in a rounded square */
@media (max-width: 520px) {
  .tool-tabs { border-radius: 14px; }
  .tool-tabs button { flex-direction: column; gap: 3px; min-height: 52px; padding: 6px 4px; border-radius: 11px; font-size: var(--step--2); }
  .tab-mark { border-radius: 11px; }
}
/* without the script, the selector would do nothing: show net worth alone */
.tool-tabs:not(.ready) { display: none; }
/* the panels share one cell, so the box keeps the tallest one's height and
   nothing below it jumps when the tool changes */
.tool-panels { display: grid; }
.tool-panel { grid-area: 1 / 1; min-width: 0; }
.tool-panel:not(.on) { visibility: hidden; }
.tool-panel.on { animation: panel-in 0.35s var(--ease-out); }
@keyframes panel-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .tool-panel.on { animation: none; } }
.tool-chart .line2 { stroke: color-mix(in srgb, var(--neg) 75%, transparent); stroke-width: 2; }
.tool-chart .band { fill: color-mix(in srgb, var(--accent) 12%, transparent); stroke: none; }
.tool-key { display: flex; flex-wrap: wrap; gap: 4px var(--s-4); margin-top: var(--s-2); font-size: var(--step--2); color: var(--ink-soft); }
.tool-key span { display: inline-flex; align-items: center; gap: 6px; }
.tool-key span::before { content: ""; width: 16px; height: 0; border-top: 2.5px solid var(--accent); }
#debt-tool .tool-key .k2::before { border-top: 2px solid color-mix(in srgb, var(--neg) 75%, transparent); }
#cmp-tool .tool-key .k2::before, #dlg-full-cmp .tool-key .k2::before { border-top: 1.5px dashed color-mix(in srgb, var(--ink) 50%, transparent); }
.tool-key .k3::before { height: 10px; border-top: 0; background: color-mix(in srgb, var(--accent) 18%, transparent); }
.tool-chart .mark { stroke: color-mix(in srgb, var(--ink) 40%, transparent); stroke-width: 1; stroke-dasharray: 3 4; vector-effect: non-scaling-stroke; }
/* the gap charts: one line, buying's side above the middle line */
/* the two newer panels are shorter than net worth: their charts take up the difference */
.tool-panel { display: flex; flex-direction: column; }
.tool-plot { position: relative; flex: 1 1 auto; display: flex; flex-direction: column; margin-top: var(--s-4); }
.tool-plot .tool-chart { flex: 1 1 auto; height: auto; min-height: clamp(70px, 11vh, 110px); max-height: 240px; margin-top: 0; }
/* one column: each panel is only as tall as itself (the page below moves a
   little when the tool changes, which beats a box of empty chart) */
@media (max-width: 960px) {
  .tool-panel:not(.on) { display: none; }
  .tool-plot .tool-chart { flex: none; height: 130px; min-height: 0; }
}
.tool-plot .zero { stroke: color-mix(in srgb, var(--ink) 40%, transparent); }
.plot-up, .plot-down { position: absolute; top: var(--zero, 50%); padding: 2px 5px; border-radius: 4px; background: color-mix(in srgb, var(--paper) 88%, transparent);
  font-family: var(--font-mono); font-size: var(--step--2); line-height: 1; white-space: nowrap; color: var(--ink-soft); pointer-events: none; }
.plot-up { right: 0; transform: translateY(calc(-100% - 3px)); }
.plot-down { left: 0; }
.up-left .plot-up { left: 0; right: auto; }
.up-left .plot-down { right: 0; left: auto; }
.plot-up::before { content: "↑ "; }
.plot-down { transform: translateY(3px); }
.plot-down::before { content: "↓ "; }
.tool-axis { position: relative; }
.axis-mark { position: absolute; top: 0; font-weight: 600; color: var(--ink); white-space: nowrap; }
.tool-asks { margin-top: var(--s-2); font-family: var(--font-display); font-style: italic; font-size: var(--step-0); line-height: 1.35; }
.tool-asks span { margin-right: var(--s-2); font-family: var(--font-mono); font-style: normal; font-size: var(--step--2); letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent); }
.tool-foot { margin-top: var(--s-1); }
/* the answer, with the way into the full version beside it */
.tool-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--s-2) var(--s-3); }
.tool-head .tool-figure { margin-top: 0; }
.tool-answer { flex: 1 1 14rem; min-width: 0; }
.tool > .tool-fine { margin-top: var(--s-2); font-size: var(--step--2); line-height: 1.45; }
/* "How this is worked out": one line until opened */
.tool-how summary { display: inline-flex; align-items: center; gap: var(--s-2); min-height: 44px; cursor: pointer; list-style: none; font-size: var(--step--1); color: var(--ink); text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--ink) 35%, transparent); text-underline-offset: 3px; }
.tool-how summary::-webkit-details-marker { display: none; }
.tool-how summary::before { content: "+"; width: 1em; text-align: center; }
.tool-how[open] summary::before { content: "−"; }
.tool-how summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 2px; }
.tool-how p { margin-top: var(--s-1); font-size: var(--step--1); line-height: 1.5; color: var(--ink-soft); }
.tool-open { flex: none; display: inline-flex; align-items: center; gap: var(--s-2); min-height: 40px; padding: 0 var(--s-4) 0 var(--s-5); border: 0; border-radius: 999px;
  background: var(--ink); color: var(--bg); font: 500 var(--step--1)/1 var(--font-text); text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background-color 0.2s var(--ease-out); }
.tool-open::after { content: ""; width: 12px; height: 12px; flex: none; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M4.5 1.5h6v6M10.5 1.5l-9 9' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M4.5 1.5h6v6M10.5 1.5l-9 9' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat; }
.tool-open:hover { background: var(--accent); }
.tool-open:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (max-width: 960px) {
  .open-grid { grid-template-columns: 1fr; min-height: 0; gap: var(--s-6); }
  .sliders { grid-template-columns: 1fr; }
  .sl > span { min-height: 0; display: block; }
  .sl > span em { display: inline; }
  .open h1 { font-size: clamp(2.6rem, 11vw, 4.4rem); }
  .open .lede { margin-top: var(--s-4); font-size: var(--step-0); }
  .open-actions { margin-top: var(--s-5); }
  .open .plate img { object-position: 50% 30%; }
}

/* ----------------------------------------------------------- 2 · intro ---- */
/* the video runs straight on from the hero photo into the dark band of About us */
.intro { padding-block: 0; }
/* Frameless, and as big as the screen allows: the full width of the window, or the full height
   under the nav where the window is wider than 16:9, so the whole picture always shows. It arrives
   a little smaller with rounded corners and grows to that size as it reaches the middle of the
   screen (--sw-v from the engine, 0 to 1); once it's playing it stays put at full size. Phones and
   reduced motion get the full size from the start. */
.intro-video { margin: 0; --g: var(--sw-v, 1); }
.intro-stage { position: relative; width: min(100%, calc((100svh - var(--nav-h)) * 16 / 9)); aspect-ratio: 16 / 9; margin-inline: auto;
  overflow: hidden; background: var(--ink); transform: scale(calc(0.8 + 0.2 * var(--g))); transform-origin: 50% 0; border-radius: calc(var(--radius) * 2.5 * (1 - var(--g))); }
.intro-stage video { display: block; width: 100%; height: 100%; object-fit: cover; }
.intro-video.playing { --g: 1; }
.intro-video.playing .intro-stage { transition: transform 0.45s var(--ease-out), border-radius 0.45s var(--ease-out); }
@media (max-width: 700px), (prefers-reduced-motion: reduce) { .intro-video { --g: 1; } }
/* phones get the 9:16 cut (index.html), each graphic laid out for a tall screen, so Jose, the
   cards and the captions are big enough to see. Always full width: iPhone Safari counts its
   toolbar out of 100svh even when it floats, so sizing by height left dark bars at the sides.
   Where the screen is shorter than 9:16 the cover crop trims top and bottom instead, at most 5%
   each (the nearest graphic sits 8% from an edge); a shorter screen scrolls the last bit. */
@media (max-width: 700px) { .intro-stage { width: 100%; aspect-ratio: auto;
  height: clamp(calc(100vw * 16 / 9 * 0.9), calc(100svh - var(--nav-h)), calc(100vw * 16 / 9)); } }
/* the poster's play button, bottom left (Jose and his name fill the middle); the browser's own
   controls take over once it plays (page.js) */
.intro-play { position: absolute; left: clamp(16px, 3.5%, 48px); bottom: clamp(16px, 5%, 48px); display: inline-flex; align-items: center; gap: 0.75em;
  padding: 0.55em 1.25em 0.55em 0.55em; border: 0; border-radius: 999px; cursor: pointer;
  background: color-mix(in srgb, var(--bg) 94%, transparent); color: var(--ink); font: 600 var(--step-0)/1 var(--font-text);
  box-shadow: 0 10px 30px -12px rgba(27, 26, 23, 0.45); }
.intro-play[hidden] { display: none; }
.intro-play-icon { position: relative; width: 2.6em; height: 2.6em; border-radius: 50%; background: var(--ink); transition: background-color 0.2s var(--ease-out); }
.intro-play-icon::after { content: ""; position: absolute; left: 54%; top: 50%; transform: translate(-50%, -50%);
  border-left: 0.75em solid var(--bg); border-top: 0.45em solid transparent; border-bottom: 0.45em solid transparent; }
.intro-play:hover .intro-play-icon { background: var(--accent); }
.intro-play-text { font-variant-numeric: tabular-nums; }
/* on a phone the name card fills the bottom left, so the button moves to the bottom right */
@media (max-width: 480px) { .intro-play { padding: 0.4em; left: auto; right: 12px; bottom: 12px; font-size: 0.85rem; } .intro-play-text { display: none; } }

/* ------------------------------------------------- the debt race (pop-up) -- */
.debt-panel {
  position: relative; z-index: 2; align-self: center;
  padding: calc(var(--nav-h) + var(--s-3)) 0 var(--s-4) var(--gutter);
  max-width: 35rem;
}
.debt-panel h2 { font-size: var(--step-2); line-height: 1.08; }
.debt-form { display: grid; grid-template-columns: 1fr 0.7fr; gap: var(--s-2) var(--s-4); margin-top: var(--s-5); }
.debt-form label { font-size: var(--step--2); font-family: var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-soft); align-self: end; }
.debt-form .wide { grid-column: 1 / -1; }
.debt-form label.wide { margin-top: var(--s-2); }
.field {
  display: flex; align-items: center; gap: var(--s-2); min-height: 52px; padding: 0 var(--s-4);
  border: 1px solid color-mix(in srgb, var(--paper) 26%, transparent); border-radius: var(--radius);
  background: color-mix(in srgb, var(--paper) 7%, transparent);
  transition: border-color 0.2s var(--ease-out), box-shadow 0.2s var(--ease-out);
}
.field:focus-within { border-color: var(--paper); box-shadow: 0 0 0 3px rgba(247, 244, 238, 0.25); }
.field i { font-style: normal; color: var(--ink-soft); font-family: var(--font-mono); font-size: var(--step-0); }
.field input {
  width: 100%; min-width: 0; min-height: 44px; border: 0; background: none; outline: none; color: inherit;
  font: 500 var(--step-1)/1 var(--font-mono); letter-spacing: -0.02em; font-variant-numeric: tabular-nums;
}
.field input:focus-visible { outline: none; box-shadow: 0 2px 0 var(--paper); }
.debt-explain { margin-top: var(--s-3); font-size: var(--step--1); line-height: 1.5; color: var(--ink-soft); }

/* Fixed slots, so nothing reflows mid-scroll: the callout and the minimum's
   result share the second row, and one replaces the other. */
.debt-results { display: grid; gap: var(--s-2); margin-top: var(--s-4); }
.res { font-size: var(--step-0); line-height: 1.45; max-width: none; }
.res + .res { margin-top: 0; }
.res-fixed { grid-area: 1 / 1; }
.res-callout, .res-min { grid-area: 2 / 1; }
.res b { font-family: var(--font-mono); font-weight: 500; font-size: 0.94em; letter-spacing: -0.02em; white-space: nowrap; }
.res b.neg { color: var(--neg-dark); }
.res-callout { color: var(--ink-soft); font-style: italic; font-family: var(--font-display); }
/* With the engine running, each result waits for its receipt to tear. */
html.sw-on .res { opacity: 0; transform: translateY(8px); transition: opacity 0.4s var(--ease-out), transform 0.5s var(--ease-out); }
html.sw-on .show-fixed .res-fixed, html.sw-on .show-min .res-min,
html.sw-on .show-callout .res-callout { opacity: 1; transform: none; }

.debt-next { margin-top: var(--s-4); }
.debt-next p { font-family: var(--font-display); font-size: var(--step-1); line-height: 1.3; }
.debt-next .button { margin-top: var(--s-3); }
html.sw-on .debt-next { visibility: hidden; opacity: 0; transition: opacity 0.5s var(--ease-out), visibility 0s 0.5s; }
html.sw-on .show-next .debt-next { visibility: visible; opacity: 1; transition: opacity 0.5s var(--ease-out); }
.debt-fine { margin-top: var(--s-4); font-size: var(--step--1); line-height: 1.5; color: var(--ink-soft); max-width: 48ch; }

/* The race: one timeline, two lanes. Each lane's area is what's still owed
   (height) over time (length); the clock line sweeps both together. */
.race {
  position: relative; align-self: center; display: grid; gap: var(--s-4);
  padding: calc(var(--nav-h) + var(--s-3)) var(--gutter) var(--s-4) clamp(16px, 3vw, 48px);
  font-family: var(--font-mono); font-variant-numeric: tabular-nums;
}
.race-clock { display: grid; gap: 2px; max-width: none; }
.race-clock span { font-size: var(--step--2); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-soft); }
.race-date { font-size: clamp(2.2rem, 1.4rem + 2.6vw, 4rem); font-weight: 500; letter-spacing: -0.04em; line-height: 1; }
.race-field { position: relative; display: grid; gap: clamp(28px, 5vh, 56px); padding-top: var(--s-5); }
.race-axis { position: absolute; inset: 0; font-size: var(--step--2); line-height: 1; color: var(--ink-soft); pointer-events: none; }
.race-axis span { position: absolute; top: 0; bottom: 0; transform: translateX(-50%); }
.race-axis span::after { content: ""; position: absolute; left: 50%; top: 1.4em; bottom: 0; width: 1px; background: color-mix(in srgb, var(--paper) 9%, transparent); }
.race-now { position: absolute; top: var(--s-5); bottom: 0; width: 2px; margin-left: -1px; background: var(--paper); opacity: 0; transition: opacity 0.3s; }
.race-now.on { opacity: 0.55; }
.lane { position: relative; }
.lane-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px var(--s-4); max-width: none; font-size: var(--step--1); }
.lane-label { font-size: var(--step--2); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-soft); align-self: center; }
.lane-read .i { color: var(--neg-dark); }
.lane-chart { display: block; width: 100%; height: clamp(70px, 14vh, 130px); margin-top: var(--s-2); overflow: visible; }
.lane-chart .track { stroke: color-mix(in srgb, var(--paper) 28%, transparent); stroke-width: 1; vector-effect: non-scaling-stroke; stroke-dasharray: 3 4; }
.lane-chart .bal { fill: color-mix(in srgb, var(--neg-dark) 30%, transparent); stroke: var(--neg-dark); stroke-width: 2; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.lane[data-plan="fixed"] .bal { fill: color-mix(in srgb, var(--paper) 22%, transparent); stroke: var(--paper); }
.lane-stamp, .lane-free { position: absolute; bottom: -2px; max-width: none; white-space: nowrap; }
.lane-stamp {
  margin-left: var(--s-3); transform: rotate(-4deg) scale(1.3); transform-origin: 0 100%;
  padding: 4px 10px; border: 2px solid currentColor; border-radius: 4px;
  font-size: var(--step--2); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
  color: #B9D3A0; background: rgba(27, 26, 23, 0.7);
  opacity: 0; transition: opacity 0.25s, transform 0.35s var(--ease-out);
}
.lane.done .lane-stamp { opacity: 1; transform: rotate(-4deg); }
/* Near the right edge the stamp sits left of the point, clear of the tail. */
.lane.flip .lane-stamp { margin-left: calc(-1 * var(--s-3)); bottom: 14px; transform: translateX(-100%) rotate(-4deg); transform-origin: 100% 100%; }
.lane.never .lane-stamp { color: var(--neg-dark); }
.lane-free { padding-left: var(--s-4); bottom: 46%; font-size: var(--step--1); font-family: var(--font-display); font-style: italic; color: #B9D3A0; opacity: 0; transition: opacity 0.5s 0.2s; }
.lane.free .lane-free { opacity: 1; }
.race-key { font-size: var(--step--2); color: var(--ink-soft); letter-spacing: 0.02em; max-width: none; }

/* the race's pop-up: dark, the form on the left and the race on the right */
.sheet.sheet-dark { background: var(--ink); color: var(--bg); --paper: #F7F4EE;
  --ink-soft: color-mix(in srgb, #F7F4EE 70%, var(--ink)); --line: rgba(247, 244, 238, 0.16); }
.sheet-dark .sheet-close { color: var(--bg); }
.sheet-dark .sheet-close:hover { background: rgba(247, 244, 238, 0.1); }
.debt-body { display: grid; grid-template-columns: minmax(280px, 1fr) 1.35fr; grid-template-rows: auto 1fr; column-gap: clamp(24px, 4vw, 56px); flex: 1; }
.debt-body .debt-panel { grid-row: 1 / span 2; padding: 0; max-width: none; align-self: start; }
.debt-body .debt-form { margin-top: 0; }
.debt-body .race { padding: 0; align-self: start; }
.race-controls { grid-column: 2; display: flex; align-items: center; gap: var(--s-4); margin-top: var(--s-5); align-self: start; }
.race-play { flex: none; min-height: 44px; padding: 0 var(--s-5); border: 1px solid rgba(247, 244, 238, 0.4); border-radius: 999px; background: transparent; color: var(--bg); font: 500 var(--step--1)/1 var(--font-text); cursor: pointer; }
.race-play:hover { background: rgba(247, 244, 238, 0.1); }
.race-play:focus-visible, .race-scrub:focus-visible { outline: 2px solid var(--bg); outline-offset: 2px; }
.race-scrub { flex: 1; min-width: 0; height: 44px; margin: 0; accent-color: #B9D3A0; cursor: pointer; }
@media (max-width: 860px) {
  /* one column: the fields, then the race straight under them, then the words */
  .debt-body { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; row-gap: var(--s-4); align-content: start; }
  .debt-body .debt-panel { display: contents; }
  .debt-body > * , .debt-body .debt-panel > * { grid-column: 1; margin-top: 0; }
  .debt-form { order: 1; }
  .debt-body .race { order: 2; }
  .race-controls { order: 3; }
  .debt-results { order: 4; }
  .debt-next { order: 5; }
  .debt-fine { order: 6; font-size: var(--step--2); }
  .debt-explain { display: none; }
  .debt-form { grid-template-columns: 1fr 0.8fr 1fr; gap: 2px var(--s-2); }
  .debt-form .wide, .debt-form label.wide { grid-column: auto; margin-top: 0; }
  .debt-form label[for="d-fixed"] { grid-area: 1 / 3; }
  .debt-form .field.wide { grid-area: 2 / 3; }
  .debt-form label { font-size: 0.6rem; letter-spacing: 0.02em; }
  .field { min-height: 44px; padding: 0 var(--s-2); }
  .field input { font-size: var(--step-0); }
  .field i { font-size: var(--step--1); }
  .res { font-size: 0.95rem; line-height: 1.4; }
  .race-date { font-size: 1.9rem; }
  .race-field { gap: var(--s-5); }
  .lane-head { font-size: 0.78rem; }
  .lane-chart { height: 64px; }
  .lane-free { font-size: 0.85rem; }
}

/* ---------------------------------------------------------- 6 · people ---- */
.people { padding-block: var(--section); }
.people .bio-text .role { color: #B7C2A6; }   /* the same light olive as the close's step numbers */
.people .portrait img { box-shadow: 0 0 0 1px rgba(247, 244, 238, 0.12); }
/* the heading beside the intro, then the two profiles side by side, each with a byline-sized portrait */
.people-copy { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: clamp(24px, 4vw, 72px); align-items: start; }
.people-copy h2 { grid-row: 1 / span 3; }
.people-copy p { grid-column: 2; max-width: 40rem; }
.people-copy p + p { margin-top: var(--s-3); }
.bios { margin-top: var(--s-8); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-7) clamp(24px, 4vw, 72px); align-items: start; }
.bio { display: grid; grid-template-columns: clamp(88px, 8vw, 128px) minmax(0, 1fr); gap: var(--s-5); align-items: start; }
.portrait { margin: 0; }
.portrait img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: var(--radius); }
.bio-text h3 { font-family: var(--font-display); font-weight: 400; font-size: var(--step-2); letter-spacing: -0.02em; line-height: 1; }
.bio-text .role { margin-top: var(--s-2); font-family: var(--font-mono); font-size: var(--step--2); letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent); }
.bio-text p { max-width: 60ch; font-size: var(--step--1); line-height: 1.6; }
.bio-text p + p { margin-top: var(--s-3); }
.bio-text .role + p { margin-top: var(--s-4); }
@media (max-width: 960px) {
  .people-copy { grid-template-columns: 1fr; }
  .people-copy h2 { grid-row: auto; margin-bottom: var(--s-4); }
  .people-copy p { grid-column: auto; }
  .bios { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {   /* portrait beside the name, then the text at full width */
  .bio { grid-template-columns: 64px minmax(0, 1fr); column-gap: var(--s-4); row-gap: 0; }
  .bio-text { display: contents; }
  .bio .portrait { grid-row: 1 / span 2; }
  .bio-text h3 { grid-column: 2; align-self: end; }
  .bio-text .role { grid-column: 2; align-self: start; }
  .bio-text p:not(.role), .bio-text .fold-btn { grid-column: 1 / -1; }
}
/* phones: the longer passages fold behind "Read more" (page.js). The button sits between two paragraphs
   even where it's hidden, so the paragraph after it keeps the usual gap. */
.fold-btn { display: none; }
.fold-btn + p { margin-top: var(--s-3); }
@media (max-width: 700px) {
  .fold-on:not(.unfolded) .fold { display: none; }
  .fold-on:not(.unfolded) > .fold-more, .fold-on.unfolded > .fold-less { display: inline-flex; align-items: center; gap: var(--s-2); justify-self: start; min-height: 44px; margin-top: var(--s-2); padding: 0;
    border: 0; background: none; color: inherit; font: inherit; font-size: var(--step--1); cursor: pointer;
    text-decoration: underline; text-decoration-color: color-mix(in srgb, currentColor 40%, transparent); text-underline-offset: 3px; }
  .fold-btn::before { content: "+"; width: 1em; text-align: center; }
  .fold-less::before { content: "\2212"; }
  .open-ask { display: none; }
}

/* ----------------------------------------------------------- 8 · tools ---- */
.tools { padding-block: var(--section); overflow-x: clip; }
/* the app promo across the section, the two blocks beneath. Frameless, like the intro video: the
   video's ground is this section's cream, so its phones and lines sit on the page itself. Its own
   shape, as wide as the page allows but never taller than the screen. */
.tools-intro { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s-4) clamp(24px, 4vw, 72px); align-items: start; }
.tools-intro p { margin-top: 0; max-width: 40rem; }
.tool-card { display: flex; flex-direction: column; background: var(--paper); }
.tool-card .tool-panel { flex: 1; }
.tool-title { margin-bottom: var(--s-4); font-family: var(--font-display); font-weight: 400; font-size: var(--step-1); letter-spacing: -0.01em; }
@media (max-width: 960px) {
  .tools-intro { grid-template-columns: 1fr; }
}
/* The app promo's opening: the phone among a laptop and a tablet, the same Home on all three
   ("Synced across your devices"), then a push in on the phone: it grows to its place while the other
   two sweep out past it (page.js holds the video for the opening, and replays it on every loop).
   The two are drawn by the page around screenshots of the demo, placed against the phone's own box,
   and each is sized in its own container units, so the group keeps its shape at any width. Without
   JavaScript there is no opening: the phone simply plays. */
.promo-device { position: relative; }
.promo-intro { position: absolute; inset: 0; z-index: 0; pointer-events: none; visibility: hidden; transition: visibility 0s 1.1s; }
.promo.is-intro .promo-intro { visibility: visible; transition: none; }
.promo-phone { position: relative; z-index: 1; transform-origin: 100% 100%; transition: transform 1.1s cubic-bezier(0.6, 0, 0.25, 1); }
.promo.is-intro .promo-phone { transform: translate(14%, -22%) scale(0.36); }
.dv { position: absolute; display: block; container-type: inline-size; transition: transform 1.1s cubic-bezier(0.6, 0, 0.25, 1), opacity 0.7s 0.2s; }
.dv-screen { position: relative; display: block; overflow: hidden; background: #F6F7F8; }
.dv-screen img { display: block; width: 100%; height: auto; }
/* a faint glass sheen across each screen */
.dv-screen::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(120deg, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0.03) 32%, transparent 33%); }
/* the laptop, behind: a dark glass lid in an aluminium edge, a camera at the top, the keyboard deck below */
.dv-laptop { left: -20%; top: 24%; width: 130%; transform: translate(-30%, -12%) scale(1.9); opacity: 0; }
.dv-lid { position: relative; display: block; padding: 1.9cqw 1.9cqw 2.45cqw; background: #0c0c0e; border-radius: 2.55cqw 2.55cqw 0.72cqw 0.72cqw;
  box-shadow: 0 0 0 0.24cqw #b8babe, 0 0 0 0.4cqw #8d8f94, 0 3cqw 6cqw -3cqw rgba(27,26,23,0.35); }
.dv-lid::before { content: ""; position: absolute; top: 0.66cqw; left: 50%; width: 0.66cqw; height: 0.66cqw; margin-left: -0.33cqw; border-radius: 50%;
  background: radial-gradient(circle at 40% 40%, #3a4a5a, #101418 70%); }
.dv-laptop .dv-screen { border-radius: 0.4cqw; }
.dv-base { position: relative; display: block; width: 118.4cqw; height: 2.75cqw; margin-left: -9.2cqw; border-radius: 0.26cqw 0.26cqw 4.5cqw 4.5cqw / 0.26cqw 0.26cqw 2.1cqw 2.1cqw;
  background: linear-gradient(to bottom, #f1f2f3 0%, #d9dadd 30%, #b9bbbf 70%, #8f9196 100%);
  box-shadow: inset 0 0.13cqw 0 rgba(255,255,255,0.9), 0 2.4cqw 3.7cqw -1.45cqw rgba(27,26,23,0.45); }
/* the thumb notch to open the lid */
.dv-base::before { content: ""; position: absolute; left: 50%; top: 0; width: 16.6cqw; height: 0.86cqw; margin-left: -8.3cqw; border-radius: 0 0 1.05cqw 1.05cqw;
  background: linear-gradient(to bottom, #a9abaf, #cfd0d3); }
/* the tablet, front left: thin even bezel, rounded, a camera on the long edge */
.dv-tablet { left: -30%; top: 47%; width: 44%; transform: translate(-60%, 25%) scale(1.9); opacity: 0; }
.dv-tablet .dv-screen { border: 3.6cqw solid #0c0c0e; border-radius: 9cqw;
  box-shadow: 0 0 0 0.7cqw #b8babe, 0 0 0 1.1cqw #8d8f94, 0 9.7cqw 15.9cqw -6.2cqw rgba(27,26,23,0.5); overflow: hidden; }
.dv-tablet::before { content: ""; position: absolute; z-index: 1; top: 1.2cqw; left: 50%; width: 1.25cqw; height: 1.25cqw; margin-left: -0.62cqw; border-radius: 50%; background: #2a3138; }
.promo.is-intro .dv { transform: none; opacity: 1; }
/* A purchase logged during the opening (from when it starts counting on screen: is-opening, page.js), Costco $86.40 (the one Ana logs later in the video): it lands on the
   phone, then on the tablet and the laptop together, so the opening moves and shows the sync. Each card is
   sized to its own screen, about the app's own type size there. */
.dv-toast { position: absolute; z-index: 2; top: 4%; left: 50%; display: flex; align-items: center; gap: 0.7em; width: 17em;
  padding: 0.7em 0.95em; border-radius: 1.1em; background: #fff; color: #1B1A17; font: 400 var(--toast, 1.2cqw)/1.2 var(--font-text);
  box-shadow: 0 0.15em 0.4em rgba(27, 26, 23, 0.08), 0 0.9em 1.8em -0.7em rgba(27, 26, 23, 0.3);
  opacity: 0; transform: translate(-50%, -140%); transition: opacity 0.3s; }
.dv-toast-ic { position: relative; flex: none; width: 2.2em; height: 2.2em; border-radius: 50%; background: #0E8A74; }
.dv-toast-ic::after { content: ""; position: absolute; left: 50%; top: 46%; width: 0.5em; height: 0.95em; border: solid #fff; border-width: 0 0.2em 0.2em 0;
  transform: translate(-50%, -50%) rotate(45deg); }
.dv-toast-txt { display: grid; gap: 0.15em; min-width: 0; }
.dv-toast-txt b { font-weight: 600; }
.dv-toast-txt small { font-size: 0.82em; color: #6B6F73; white-space: nowrap; }
.dv-toast-amt { margin-left: auto; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.dv-laptop .dv-toast { --toast: 1.6cqw; left: 51%; }
.dv-tablet .dv-toast { --toast: 3.9cqw; }
.promo-phone { container-type: inline-size; }
.promo-phone .dv-toast { --toast: 4.6cqw; top: 6.5%; }
.promo.is-opening .dv-toast { animation: dv-toast 0.55s cubic-bezier(0.2, 0.8, 0.2, 1) 1.3s both; }
.promo.is-opening .promo-phone .dv-toast { animation-delay: 0.9s; }
@keyframes dv-toast { from { opacity: 0; transform: translate(-50%, -140%); } to { opacity: 1; transform: translate(-50%, 0); } }
@media (prefers-reduced-motion: reduce) { .promo.is-intro .dv-toast { animation: none; opacity: 1; transform: translate(-50%, 0); } }
/* no movement on the way in, only on the way out; none at all for anyone who asks for less motion */
.promo.promo-still .promo-phone, .promo.promo-still .dv, .promo.promo-still .promo-intro { transition: none; }
@media (prefers-reduced-motion: reduce) { .promo-phone, .dv, .promo-intro { transition: none; } }
/* The app promo, on a computer: the app's own screen recording in a phone as wide as the demo's below
   it, at the recording's own shape (so on a short screen it runs taller than the demo, which squashes to
   fit, rather than narrower), with each step's line beside it as page text,
   changed by page.js at the video's cue times (data-at, data-at-es). Without JavaScript the first line
   stays. */
.promo { position: relative; margin: var(--s-7) 0 0; display: grid; grid-template-columns: auto minmax(0, 34rem); justify-content: center; align-items: center;
  gap: var(--s-6) clamp(40px, 7vw, 112px); }
.promo-phone { width: 430px; border: 12px solid var(--ink); border-radius: 50px; overflow: hidden;
  background: #F6F7F8; box-shadow: 0 50px 80px -40px rgba(27, 26, 23, 0.5), 0 14px 28px -14px rgba(27, 26, 23, 0.3); }
.promo-phone video { display: block; width: 100%; height: auto; aspect-ratio: 900 / 1950; }
.promo-steps { list-style: none; margin: 0; padding: 0; display: grid; }
.promo-step { grid-area: 1 / 1; align-self: center; }
.promo-on .promo-step { opacity: 0; visibility: hidden; transform: translateY(14px);
  transition: opacity 0.25s, transform 0.25s, visibility 0s 0.25s; }
.promo-on .promo-step.is-on { opacity: 1; visibility: visible; transform: none; transition: opacity 0.4s 0.1s, transform 0.5s 0.1s var(--ease-out); }
@media (prefers-reduced-motion: reduce) { .promo-on .promo-step, .promo-on .promo-step.is-on { transform: none; transition: none; } }
.promo-head { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: clamp(2.2rem, 1.5rem + 2.4vw, 3.6rem); line-height: 1.04; letter-spacing: -0.02em; }
.promo-sub { margin: var(--s-5) 0 0; font-size: var(--step-1); line-height: 1.4; color: var(--ink-soft); max-width: 30rem; }
.promo-note { margin: var(--s-6) 0 0; font: 400 var(--step--2)/1.3 var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-soft); }
/* its own two controls (page.js), under the lines; on a phone, in the tall cut's empty top corner */
.promo-controls { display: flex; align-items: center; gap: 8px; margin-top: var(--s-4); }
/* how far the run has got: a hairline after the buttons, filled in the accent */
.promo-progress { flex: 1; max-width: 12rem; height: 2px; margin-left: 10px; border-radius: 2px; background: var(--line); overflow: hidden; }
.promo-progress span { display: block; height: 100%; background: var(--accent); transform: scaleX(0); transform-origin: 0 50%; }
.promo-btn { font: 500 var(--step--2)/1 var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink);
  background: color-mix(in srgb, var(--bg) 88%, transparent); border: 1px solid var(--line); border-radius: 999px; min-height: 44px; padding: 0 16px; cursor: pointer; }
.promo-btn:hover { background: var(--bg); border-color: color-mix(in srgb, var(--ink) 30%, transparent); }
@media (max-width: 960px) {
  .promo { grid-template-columns: minmax(0, 34rem); }
  .promo-device { order: 2; justify-self: center; }
}
/* Try it: the real demo in a phone, live in the page on a computer (page.js loads it as it comes
   near), on its own recessed panel so it doesn't read as more of the video above it. The phone is as
   wide as a large phone (430px is the app's widest phone layout) and keeps a phone's shape: on a short
   screen it runs a little taller than the window rather than squashing into a tablet. Up to 960px the
   copy stacks above it. On a phone a working app inside a scrolling page fights the scroll, so it's a
   still of the demo's Home, right under the heading, and "Start the demo", which opens it full screen
   (#dlg-full-app). */
.try { position: relative; display: grid; grid-template-columns: auto minmax(0, 34rem); justify-content: center; align-items: center; gap: var(--s-6) clamp(40px, 7vw, 112px);
  margin-top: var(--block); padding: clamp(20px, 4vw, 56px); border-radius: calc(var(--radius) * 2); background: var(--bg-2); }
.try-skip { position: absolute; left: var(--s-4); top: var(--s-4); z-index: 2; padding: 0.6em 1em; border-radius: 999px; background: var(--ink); color: var(--bg);
  font-size: var(--step--1); transform: translateY(-200%); opacity: 0; }
.try-skip:focus { transform: none; opacity: 1; }
.try-device { display: grid; justify-items: center; gap: var(--s-4); }
.try-phone { position: relative; width: 430px; height: clamp(700px, calc(100svh - var(--nav-h) - 3rem), 880px); border: 12px solid var(--ink); border-radius: 50px; overflow: hidden;
  background: var(--paper); box-shadow: 0 50px 80px -40px rgba(27, 26, 23, 0.5), 0 14px 28px -14px rgba(27, 26, 23, 0.3); }
.try-frame { display: block; width: 100%; height: 100%; border: 0; }
.try-shot, .try-start { display: none; }
.try-live { margin: 0; display: inline-flex; align-items: center; gap: 0.6em; font: 500 var(--step--1)/1 var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink); }
.try-live span { width: 9px; height: 9px; border-radius: 50%; background: var(--pos); box-shadow: 0 0 0 0 color-mix(in srgb, var(--pos) 50%, transparent); animation: live 2s ease-out infinite; }
@keyframes live { 70%, 100% { box-shadow: 0 0 0 8px transparent; } }
@media (prefers-reduced-motion: reduce) { .try-live span { animation: none; } }
.try-kicker { margin: 0 0 var(--s-3); font: 500 var(--step--2)/1.2 var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); }
.try-head { margin: 0 0 var(--s-5); font-family: var(--font-display); font-weight: 400; font-size: clamp(2.2rem, 1.5rem + 2.4vw, 3.6rem); line-height: 1.02; letter-spacing: -0.02em; }
.try-list { margin: var(--s-5) 0 0; padding: 0; list-style: none; counter-reset: try; display: grid; gap: var(--s-3); }
.try-list li { counter-increment: try; display: grid; grid-template-columns: 2em minmax(0, 1fr); align-items: baseline; }
.try-list li::before { content: counter(try); font: 500 var(--step--1)/1 var(--font-mono); color: var(--accent); }
.try-copy .note { margin-top: var(--s-5); font-family: var(--font-text); letter-spacing: 0; }
@media (max-width: 960px) {
  .try { grid-template-columns: minmax(0, 34rem); }
  .try-device { order: 2; }
}
@media (max-width: 700px) {
  .try { row-gap: 0; }
  /* the copy's pieces join the panel's grid, so the phone can sit between the heading and the rest */
  .try-copy { display: contents; }
  .try-kicker { order: 1; }
  .try-head { order: 2; }
  .try-device { order: 3; margin-bottom: var(--s-6); }
  .try-copy > p:not(.try-kicker):not(.note) { order: 4; }
  .try-copy .note { order: 5; }
  .try-list, .try-frame, .try-live { display: none; }
  .try-phone { width: min(320px, 78vw); height: auto; aspect-ratio: 780 / 1688; border-width: 9px; border-radius: 40px; }
  .try-shot { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }
  .try-start { display: inline-flex; align-items: center; min-height: 48px; padding: 0 1.6em; border: 0; border-radius: 999px; background: var(--button); color: var(--accent-ink);
    font: 600 var(--step-0)/1 var(--font-text); cursor: pointer; }
}
/* More tools: a row per tool, an index rather than cards: its name, and on the right its answer as it
   stands (copied live from the tool, page.js). A row opens its tool right beneath it, one at a time.
   Without JavaScript both tools simply show. */
.more-tools { margin-top: var(--block); }
.more-title { margin: 0 0 var(--s-4); font-family: var(--font-display); font-weight: 400; font-size: var(--step-1); letter-spacing: -0.01em; }
.tiles { border-bottom: 1px solid var(--line); }
.tile { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: var(--s-2) clamp(16px, 3vw, 48px); width: 100%; text-align: left;
  padding: clamp(20px, 2.4vw, 32px) 0; border: 0; border-top: 1px solid var(--line); background: none; color: var(--ink); font: inherit; cursor: pointer; }
.tile-name { font-family: var(--font-display); font-size: var(--step-2); line-height: 1; letter-spacing: -0.02em; transition: color 0.2s var(--ease-out); }
.tile-answer { text-align: right; color: var(--ink-soft); font-size: var(--step--1); }
.tile-num { display: block; font: 500 var(--step-1)/1.2 var(--font-mono); color: var(--ink); font-variant-numeric: tabular-nums; }
/* the + that turns into a × when the tool is open */
.tile::after { grid-column: 3; content: ""; width: 2.75rem; height: 2.75rem; border-radius: 50%; border: 1px solid color-mix(in srgb, var(--ink) 35%, transparent);
  background: linear-gradient(currentColor, currentColor) center / 14px 1.5px no-repeat, linear-gradient(currentColor, currentColor) center / 1.5px 14px no-repeat;
  transition: transform 0.3s var(--ease-out), background-color 0.2s var(--ease-out), color 0.2s var(--ease-out), border-color 0.2s var(--ease-out); }
.tile:hover .tile-name { color: var(--accent); }
.tile:hover::after { border-color: var(--ink); }
.tile[aria-expanded="true"]::after { transform: rotate(45deg); background-color: var(--ink); color: var(--bg); border-color: var(--ink); }
.tile-panel { margin-bottom: clamp(20px, 2.4vw, 32px); }
.tile-panel[hidden] { display: none; }
/* an open tool is as wide as the page, so its sliders go in a column on the right of the figure and
   chart rather than stretching across it */
.tile-panel .sl > span { min-height: 0; display: block; }
.tile-panel .sl > span em { display: inline; }
@media (min-width: 901px) {
  .tile-panel .tool-panel { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); grid-template-rows: auto auto auto auto auto 1fr; column-gap: clamp(32px, 4vw, 64px);
    grid-template-areas: "head sliders" "chart sliders" "axis sliders" "note sliders" "asks sliders" "foot sliders"; align-items: start; }
  .tile-panel .tool-head { grid-area: head; }
  .tile-panel .tool-panel > .tool-chart, .tile-panel .tool-plot { grid-area: chart; }
  .tile-panel .tool-panel > .tool-chart { height: 200px; }
  .tile-panel .tool-plot .tool-chart { min-height: 200px; }
  .tile-panel .tool-axis { grid-area: axis; }
  .tile-panel .sliders { grid-area: sliders; grid-template-columns: 1fr; margin-top: 0; }
  .tile-panel .tool-note { grid-area: note; }
  .tile-panel .tool-asks { grid-area: asks; }
  .tile-panel .tool-foot { grid-area: foot; }
}
/* open, the row already names the tool and gives its answer: the box doesn't repeat its title, and the
   row's answer steps aside for the box's bigger one (the title stays for screen readers) */
.tiles-on .tile-panel .tool-title { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.tile[aria-expanded="true"] .tile-answer { display: none; }
.tiles-on .tile-panel { animation: tile-in 0.35s var(--ease-out); }
@keyframes tile-in { from { opacity: 0; transform: translateY(10px); } }
@media (prefers-reduced-motion: reduce) { .tiles-on .tile-panel { animation: none; } }
@media (max-width: 560px) {
  .tile { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name plus" "answer plus"; }
  .tile-name { grid-area: name; }
  .tile-answer { grid-area: answer; text-align: left; }
  .tile::after { grid-area: plus; }
}
/* on a phone: the line above, the phone in the frame the demo's phone has below, and the buttons and
   the note under it. The line is only its heading, so the line and the whole phone fit one screen. */
@media (max-width: 700px) {
  .promo { row-gap: var(--s-4); justify-items: center; text-align: center; }
  .promo-copy { display: contents; }
  .promo-steps { order: 1; }
  .promo-device { order: 2; }
  .promo-phone { width: min(320px, 78vw, calc((100svh - var(--nav-h) - 8.5rem) * 900 / 1950 + 18px)); border-width: 9px; border-radius: 40px; }
  .promo-controls { order: 3; margin: 0; justify-content: center; flex-wrap: wrap; }
  .promo-progress { order: -1; flex: 0 0 100%; max-width: none; margin: 0 0 var(--s-2); }
  .promo-note { order: 4; margin: 0; }
  .promo .try-kicker { margin-bottom: var(--s-2); }
  .promo-head { font-size: 1.75rem; line-height: 1.08; }
  .promo-sub { display: none; }
  /* the opening's group, a little narrower so it stays on screen */
  .dv-laptop { left: -10%; width: 118%; }
  .dv-tablet { left: -12%; width: 40%; }
  .promo.is-intro .promo-phone { transform: translate(8%, -22%) scale(0.36); }
}

/* ------------------------------------------------------------ 7 · start --- */
/* how it starts, and the one action: dark, so the page closes as strongly as the race */
.start { padding-block: var(--section); }
.start-grid { display: grid; grid-template-columns: 1fr 2fr; gap: var(--s-6) clamp(24px, 4vw, 72px); align-items: start; }
.steps { list-style: none; margin: 0; padding: 0; counter-reset: s; display: grid; gap: var(--s-5); }
.steps li { counter-increment: s; display: grid; grid-template-columns: 2.4rem 1fr; }
.steps li::before { content: counter(s); grid-row: span 2; font-family: var(--font-mono); font-size: var(--step--1); color: #B7C2A6; padding-top: 0.25em; }
.steps h3 { margin: 0; font-size: var(--step-0); font-weight: 600; }
.steps p { max-width: 48ch; margin-top: var(--s-1); color: var(--ink-soft); font-size: var(--step--1); line-height: 1.55; }
.start .button { grid-column: 2; justify-self: start; }
@media (max-width: 760px) {
  .start-grid { grid-template-columns: 1fr; }
  .start .button { grid-column: auto; }
}

/* ------------------------------------------------------------ forms ------- */
.ask-form label > span, .book-form label > span, legend {
  display: block; margin-bottom: var(--s-2);
  font-size: var(--step--1); font-weight: 500; color: var(--ink-soft);
}
.ask-form :is(input:not([type="checkbox"]), select, textarea), .book-form :is(input:not([type="checkbox"]), select) {
  width: 100%; min-height: 52px; padding: 0 var(--s-4);
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface); color: var(--ink);
  font: 400 var(--step-0)/1.4 var(--font-text);
  transition: border-color 0.2s var(--ease-out), box-shadow 0.2s var(--ease-out);
}
textarea { padding: var(--s-4); resize: vertical; min-height: 180px; font-size: var(--step-1); line-height: 1.45; }
/* the form's field rule zeroes the top padding; the question box keeps room all round */
.ask-form .big-field textarea { padding: var(--s-4) var(--s-5); }
textarea::placeholder { color: #6f6a60; }
.ask-form :is(input, select, textarea):focus, .book-form :is(input, select):focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); }
.big-field textarea { box-shadow: var(--shadow); border-color: transparent; }
/* end: when one label wraps (the Spanish email label does), the two boxes still line up */
.ask-form .row, .book-form .row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4); margin-top: var(--s-5); align-items: end; }
.ask-form > label, .book-form > label, fieldset { display: block; margin-top: var(--s-5); }
.ask-form .button, .book-form .button { margin-top: var(--s-6); }
fieldset { border: 0; padding: 0; margin-inline: 0; }
/* the consent box: a real checkbox, never pre-ticked */
.ask-form label.check { display: flex; align-items: flex-start; gap: var(--s-3); min-height: 44px; }
.ask-form label.check > span { margin: 0; color: var(--ink); }
.ask-form label.check input { width: 24px; height: 24px; flex: none; accent-color: var(--accent); margin: 0.1em 0 0; }
.chips { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.chips label { position: relative; }
.chips input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.book-form .chips span {   /* outranks the form's label > span rule */
  display: inline-flex; align-items: center; min-height: 44px; margin: 0; padding: 0 var(--s-4);
  border: 1px solid var(--line); border-radius: 999px; font-size: var(--step--1); font-weight: 400; color: var(--ink);
  transition: background-color 0.2s var(--ease-out), color 0.2s var(--ease-out), border-color 0.2s var(--ease-out);
}
.book-form .chips input:checked + span { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.book-form .chips input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.hp { position: absolute; left: -9999px; }
.form-done { margin-top: var(--s-4); font-family: var(--font-mono); font-size: var(--step--1); color: var(--accent); }
.form-done:empty { display: none; }
.privacy { margin-top: var(--s-4); line-height: 1.5; }
@media (max-width: 560px) { .ask-form .row, .book-form .row { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------ pop-ups ----- */
.sheet {
  width: min(720px, calc(100vw - 32px)); max-height: min(90svh, 900px); padding: 0; border: 0;
  border-radius: calc(var(--radius) * 2); background: var(--bg); color: var(--ink);
  box-shadow: 0 50px 100px -30px rgba(0, 0, 0, 0.6);
  --ink-soft: color-mix(in srgb, var(--ink) 74%, var(--bg)); --line: rgba(27, 26, 23, 0.16);
}
.sheet::backdrop { background: rgba(20, 19, 17, 0.55); }
.sheet[open] { display: flex; flex-direction: column; animation: sheet-in 0.28s var(--ease-out); }
@keyframes sheet-in { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .sheet[open] { animation: none; } }
.sheet-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); padding: var(--s-5) var(--s-6); border-bottom: 1px solid var(--line); }
.sheet-head h2 { font-size: var(--step-1); line-height: 1.2; }
.sheet-close { width: 44px; height: 44px; flex: none; border: 0; border-radius: 999px; background: transparent; color: var(--ink); font-size: 28px; line-height: 1; cursor: pointer; }
.sheet-close:hover { background: rgba(27, 26, 23, 0.06); }
.sheet-body { padding: var(--s-5) var(--s-6) var(--s-6); overflow: auto; }
.cal-body { min-height: 480px; display: flex; flex-direction: column; }
.cal-note { margin-bottom: var(--s-4); font-size: var(--step--1); color: var(--ink-soft); }
.cal-frame { flex: 1; width: 100%; min-height: 620px; border: 0; }
.cal-alt { margin-top: var(--s-3); font-size: var(--step--1); }
.ask-form .note { margin-top: var(--s-4); }
/* the question box's privacy note: one line until opened */
.ask-privacy summary { display: flex; align-items: center; gap: var(--s-2); min-height: 44px; cursor: pointer; list-style: none; color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.ask-privacy summary::-webkit-details-marker { display: none; }
.ask-privacy summary::before { content: "+"; width: 1em; text-align: center; display: inline-block; }
.ask-privacy[open] summary::before { content: "−"; }
.ask-privacy p { margin-top: var(--s-2); }
@media (max-width: 560px) {
  .sheet { width: 100vw; max-width: 100vw; max-height: 100svh; height: 100svh; border-radius: 0; margin: 0; }
  .sheet-head, .sheet-body { padding-inline: var(--gutter); }
}

/* the tools' full versions: wide, the fields on the left, the answer on the right */
.sheet-full { width: min(1180px, calc(100vw - 32px)); height: min(92svh, 1000px); max-height: none; }
.full-frame { flex: 1; width: 100%; border: 0; background: var(--bg); }
/* Try the app: the demo is the phone app, so on a computer its pop-up is a
   phone's size; on a phone it fills the screen like every pop-up. */
@media (min-width: 561px) { .sheet-app { width: min(430px, calc(100vw - 32px)); height: min(900px, 94svh); } }
.full { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--s-7); align-items: start; flex: 1; }
.full-in fieldset { margin: 0; }
.full-in fieldset + fieldset { margin-top: var(--s-6); }
.full-in legend { padding: 0; margin-bottom: var(--s-2); font-family: var(--font-mono); font-size: var(--step--2); letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent); }
.nf { display: grid; grid-template-columns: minmax(0, 1fr) 11rem; align-items: center; gap: var(--s-3); min-height: 52px; border-bottom: 1px solid var(--line); }
.nf > span:first-child { font-size: var(--step--1); line-height: 1.3; }
.nf-box { display: flex; align-items: center; gap: 6px; height: 40px; padding: 0 var(--s-3); border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.nf-box:focus-within { border-color: var(--accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 30%, transparent); }
.nf-box i { font-style: normal; font-size: var(--step--2); color: var(--ink-soft); white-space: nowrap; }
.nf-box input { flex: 1; min-width: 0; width: 100%; border: 0; padding: 0; background: transparent; outline: 0; font: 500 var(--step--1) var(--font-mono); color: var(--ink); text-align: right; font-variant-numeric: tabular-nums; }
.nf-select { padding: 0 var(--s-2); }
.nf-select select { flex: 1; min-width: 0; height: 100%; border: 0; background: transparent; font: inherit; font-size: var(--step--1); color: var(--ink); outline: 0; cursor: pointer; }
.full-in .keep { margin-top: var(--s-2); }
.full-reset { margin-top: var(--s-5); min-height: 44px; padding: 0; border: 0; background: none; font: inherit; font-size: var(--step--1); color: var(--ink); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.full-out { position: sticky; top: 0; padding: var(--s-5); border-radius: calc(var(--radius) * 2); background: var(--paper); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.7) inset, 0 20px 40px -24px rgba(27, 26, 23, 0.35);
  --ink-soft: color-mix(in srgb, var(--ink) 76%, var(--paper)); }
.full-out .tool-chart { height: 180px; }
.full-month, .full-years { width: 100%; margin-top: var(--s-4); border-collapse: collapse; font-size: var(--step--1); }
.full-month th, .full-month td, .full-years th, .full-years td { padding: 6px 0; border-bottom: 1px solid var(--line); text-align: left; font-weight: 400; }
.full-month td, .full-years td { text-align: right; font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.full-month tr.total th, .full-month tr.total td { font-weight: 600; }
.full-years tr:first-child th { font-size: var(--step--2); color: var(--ink-soft); text-align: right; }
.full-years tr:first-child th:first-child { text-align: left; }
.full-out .tool-how { margin-top: var(--s-2); }
@media (max-width: 860px) {
  .full { grid-template-columns: 1fr; gap: var(--s-5); }
  .full-out { position: static; order: -1; }
}
@media (max-width: 560px) { .sheet-full { width: 100vw; height: 100svh; } .nf { grid-template-columns: minmax(0, 1fr) 9.5rem; } }

/* ---------------------------------------------------------------- foot ---- */
.foot { padding-block: var(--s-7); font-size: var(--step--1); color: var(--ink-soft); border-top: 1px solid var(--line); }
.foot-row { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s-3) var(--s-7); }
.foot .fine { max-width: 60ch; }
.foot .logo-mark { color: var(--bg); }
.foot a { text-underline-offset: 0.2em; }

/* ---------------------------------------------------------- privacy page -- */
.doc { background: var(--bg); }
.doc-body { max-width: 50rem; padding-block: calc(var(--nav-h) + 48px) var(--s-9); }
.doc-body h1 { font-size: var(--step-3); margin-top: var(--s-7); }
.doc-body h2 { font-size: var(--step-2); margin-top: var(--s-8); }
.doc-body h3 { font-size: var(--step-1); margin-top: var(--s-6); }
.doc-body p, .doc-body ul { margin-top: var(--s-4); }
.doc-body li + li { margin-top: var(--s-2); }
.doc-body a { text-underline-offset: 0.2em; }
.doc-body table { width: 100%; margin-top: var(--s-5); border-collapse: collapse; font-size: var(--step--1); }
.doc-body th, .doc-body td { text-align: left; padding: var(--s-3) var(--s-4) var(--s-3) 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.draft-banner { padding: var(--s-4) var(--s-5); border-radius: var(--radius); background: #F3E3D8; color: #5C2418; font-size: var(--step--1); }