/* Tool world — a cool studio desk: white sheets, blue-black ink, vermilion for growth and cobalt for the goal
   (content.json palette; 29/10, no beige and no paper cream). Funnel Display for figures and heads, Funnel Sans for the rest (OFL, self-hosted). The
   tool's own surfaces (the answer, the strip of inputs, the table) are sheets of the same paper; the three chapters'
   words lie on the desk itself, beside the row, under a ruled head (no sheet behind them: 23/10, no plate behind words). */
:root {
  /* --mute clears 4.5:1 on the desk where a chapter's figures lie (6.8:1 on the paper; 8.9:1 in dark, 29/10) */
  --paper: #eef2f7; --sheet: #f9fbfd; --cream: #dde4ee; --ink: #0e1422; --mute: #4a5468; --line: #d2d9e4; --line-2: rgba(14, 20, 34, 0.2);
  --red: #e5432b; --red-ink: #c2321c; --blue: #1a46d4;
  --face: 'Funnel Sans', ui-sans-serif, system-ui, sans-serif;
  --figure: 'Funnel Display', 'Funnel Sans', ui-sans-serif, sans-serif;
  --display: clamp(42px, 5.6vw, 92px);
  --gutter: clamp(16px, 2.4vw, 36px);
  --ease: cubic-bezier(0.215, 0.61, 0.355, 1);
  --text-2: #283044; --off: #97a0b2; --red-past: #a0564c; --ink-hover: #232b3d; --on-blue: #fff;
  --tag-bg: rgba(249, 251, 253, 0.94); --backdrop: rgba(238, 242, 247, 0.92); --foot-bg: var(--ink); --foot-ink: var(--sheet);
  --arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%230e1422' stroke-width='1.4'/%3E%3C/svg%3E");
}
/* night: the same desk after dark, lit by its lamp — the room goes navy, the ink goes to a cool white, vermilion and
   cobalt keep their jobs one step lighter */
:root[data-theme='dark'] {
  color-scheme: dark;
  --paper: #0a0f1d; --sheet: #131a2c; --cream: #26314a; --ink: #eef2fa; --mute: #a7b1c6; --line: #233049; --line-2: rgba(238, 242, 250, 0.22);
  --red: #ff6b4f; --red-ink: #ff8e78; --blue: #7f9dff;
  --text-2: #cbd3e3; --off: #5c6680; --red-past: #c48a80; --ink-hover: #d3dae9; --on-blue: #0a0f1d;
  --tag-bg: rgba(19, 26, 44, 0.94); --backdrop: rgba(10, 15, 29, 0.9); --foot-bg: #060a15; --foot-ink: #eef2fa;
  --arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23eef2fa' stroke-width='1.4'/%3E%3C/svg%3E");
}
html { background: var(--paper); color-scheme: light; }
html[data-theme='dark'] { color-scheme: dark; }
body { margin: 0; color: var(--ink); font-family: var(--face); font-size: 16px; -webkit-font-smoothing: antialiased; background: transparent; }
#world { position: fixed; inset: 0; width: 100vw; height: 100svh; z-index: 0; display: block; pointer-events: none; }
main { position: relative; z-index: 2; pointer-events: none; }
main a, main button, main input, main select, main label, main summary, main details, .answer, .tool, .card, .sched, .faq { pointer-events: auto; }
body.is-goal { cursor: ns-resize; }
body.is-dragging { user-select: none; -webkit-user-select: none; }
button, input, select { font: inherit; color: inherit; }

.loader { position: fixed; inset: 0; z-index: 30; background: var(--paper); display: flex; align-items: flex-end; justify-content: flex-end; padding: var(--gutter); transition: opacity 0.8s var(--ease), visibility 0s linear 0.8s; }
.loader__n { font-family: var(--figure); font-size: var(--display); font-weight: 600; line-height: 0.8; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; color: var(--line); }
body:not(.is-loading) .loader { opacity: 0; visibility: hidden; }

/* sections: tall for scroll, their words held on screen while the row of years moves behind them */
.ch { position: relative; }
.ch__hold { position: sticky; top: 0; height: 100svh; display: grid; padding: calc(var(--edge-h) + 30px) var(--gutter) calc(var(--gutter) * 1.2); box-sizing: border-box; }
.pos-l .ch__hold { align-content: center; justify-items: start; }
.pos-r .ch__hold { align-content: center; justify-items: end; }

.kicker { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 20px; font-size: 15px; color: var(--mute); }
.kicker::before { content: ''; width: 18px; height: 5px; border-top: 1px solid var(--red); border-bottom: 1px solid var(--red); }
.big { font-family: var(--figure); font-size: var(--display); font-weight: 600; line-height: 0.95; letter-spacing: -0.035em; margin: 0; max-width: 12ch; text-wrap: balance; }
.head { font-family: var(--figure); font-size: clamp(28px, 2.7vw, 42px); font-weight: 600; line-height: 1.04; letter-spacing: -0.025em; margin: 0; max-width: 16ch; }
.lede { font-size: clamp(16px, 1.2vw, 18px); line-height: 1.5; margin: 20px 0 0; max-width: 44ch; color: var(--text-2); }
.body { font-size: 16px; line-height: 1.55; margin: 14px 0 0; max-width: 42ch; color: var(--text-2); }
.hint { font-size: 13.5px; line-height: 1.4; margin: 0; color: var(--mute); }

/* ---------------- the words enter (core/page-motion.js): each block rises and fades in on its own, its lines after it ---------------- */
.line { display: block; padding-bottom: 0.08em; margin-bottom: -0.08em; }
.line > span { display: inline-block; }

/* ---------------- no paper under the words ---------------- */
/* the answer, the inputs and the year table are written on the desk like the chapters' words and the FAQ: a sheet under
   them was a plate whose edge crossed the screen as the page scrolled (wash-gate, 18 edges, 23/10), and glass on text
   boxes is a no (catalogo/verdicts.json, glass-on-text-boxes); the frames keep the desk under them clear of the stacks
   (FRAMES in world.js, subject-under-text), and the ruled lines are the ledger's, not a box */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 42px; padding: 0 18px; border-radius: 999px; font-size: 14.5px; font-weight: 600; text-decoration: none; cursor: pointer; white-space: nowrap; border: 0; transition: background-color 0.25s, color 0.25s, box-shadow 0.25s, transform 0.3s var(--ease); }
.btn--ink { background: var(--ink); color: var(--sheet); }
.btn--ink:hover { background: var(--ink-hover); }
.btn--ink.is-done { background: var(--blue); }
.btn--line { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink); }
.btn--line:hover { background: var(--ink); color: var(--sheet); }
.btn:active { transform: translate3d(0, 1px, 0); }
main :focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }

/* ---------------- the hero: the question on the left, the answer on the right, the inputs along the bottom ---------------- */
.ch--hero .ch__hold { grid-template-columns: minmax(0, 1fr) minmax(330px, 380px); grid-template-rows: auto minmax(0, 1fr) auto; column-gap: 4vw; row-gap: 16px; padding-top: calc(var(--edge-h) + 26px); }
.ch--hero .ch__inner { display: contents; }
.hero__copy { grid-column: 1; grid-row: 1; align-self: start; }
.hero__copy .lede { max-width: 40ch; }
.hero__gap { display: none; }
.answer { grid-column: 2; grid-row: 1 / 3; align-self: start; padding: 18px 0 0; border-top: 3px double var(--red); }
.tool { grid-column: 1 / -1; grid-row: 3; }

.answer__k { margin: 0; font-size: 14px; color: var(--mute); }
.answer__n { display: block; margin: 6px 0 0; font-family: var(--figure); font-size: clamp(52px, 5vw, 80px); font-weight: 600; line-height: 0.92; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.answer__n.is-words { font-size: clamp(30px, 2.6vw, 40px); line-height: 1.02; letter-spacing: -0.025em; }
.answer__date { margin: 10px 0 0; font-size: 16px; font-weight: 500; }
.answer__bar { display: flex; gap: 2px; height: 10px; margin: 20px 0 0; }
.answer__bar i { display: block; min-width: 2px; border-radius: 1px; transition: flex-grow 0.6s var(--ease); }
.answer__put { background: var(--cream); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 28%, transparent); }
.answer__growth { background: var(--red); }
.answer__split { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 12px 0 0; }
.answer__split div { margin: 0; }
.answer__split dt { display: flex; align-items: center; gap: 7px; font-size: 13px; color: var(--mute); }
.answer__split dt::before { content: ''; width: 9px; height: 9px; border-radius: 1px; background: var(--cream); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 35%, transparent); }
.answer__split .is-growth dt::before { background: var(--red); box-shadow: none; }
.answer__split dd { margin: 4px 0 0; font-family: var(--figure); font-size: 20px; font-weight: 600; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
/* which arithmetic the answer is: the conventions, small and quiet, never hidden */
.answer__conv { margin: 12px 0 0; max-width: 48ch; font-size: 12.5px; line-height: 1.45; color: var(--mute); }
.answer__sooner { margin: 16px 0 0; padding: 11px 0 0; border-top: 1px solid var(--line); font-size: 14px; line-height: 1.45; color: var(--text-2); }
.answer__acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }

.tool { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: 'presets hint' 'fields fields'; align-items: center; gap: 12px 24px; }
.tool__presets { grid-area: presets; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.tool > .hint { grid-area: hint; text-align: right; max-width: 40ch; }
.tool__label { font-size: 13px; color: var(--mute); margin-right: 4px; }
.chip { height: 32px; padding: 0 14px; border-radius: 999px; border: 0; background: transparent; box-shadow: inset 0 0 0 1px var(--line-2); font-size: 13.5px; cursor: pointer; transition: background-color 0.25s, color 0.25s, box-shadow 0.25s; }
.chip:hover { box-shadow: inset 0 0 0 1px var(--ink); }
.chip.is-on { background: var(--ink); color: var(--sheet); box-shadow: none; }
.tool__fields { grid-area: fields; display: grid; grid-template-columns: repeat(4, minmax(0, 1.15fr)) minmax(0, 1.35fr) minmax(0, 0.9fr); border-top: 1px solid var(--line); }
.field { display: grid; grid-template-rows: auto auto auto; align-content: start; padding: 12px 16px 2px; border-left: 1px solid var(--line); min-width: 0; }
.field:first-child { border-left: 0; padding-left: 0; }
.field__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 26px; }
.field__k { font-size: 13px; color: var(--mute); cursor: text; }
.field__v { display: flex; align-items: baseline; gap: 4px; margin-top: 4px; font-family: var(--figure); font-size: clamp(22px, 1.9vw, 30px); font-weight: 600; letter-spacing: -0.02em; }
.field__pre, .field__suf { font-size: 0.72em; color: var(--mute); font-weight: 500; }
.field__in { width: 100%; min-width: 0; padding: 0; border: 0; background: none; font: inherit; letter-spacing: inherit; font-variant-numeric: tabular-nums; outline: none; border-bottom: 1px dashed transparent; }
.field__in:hover { border-bottom-color: var(--line-2); }
.field__in:focus { border-bottom-color: var(--blue); }
.field__range { -webkit-appearance: none; appearance: none; width: 100%; height: 22px; margin: 4px 0 0; background: transparent; cursor: pointer; }
.field__range::-webkit-slider-runnable-track { height: 2px; background: var(--line); }
.field__range::-moz-range-track { height: 2px; background: var(--line); }
.field__range::-webkit-slider-thumb { -webkit-appearance: none; width: 14px; height: 14px; margin-top: -6px; border-radius: 2px; background: var(--ink); }
.field__range::-moz-range-thumb { width: 14px; height: 14px; border: 0; border-radius: 2px; background: var(--ink); }
.field--goal .field__range::-webkit-slider-thumb { background: var(--blue); width: 22px; height: 10px; margin-top: -4px; }
.field--goal .field__range::-moz-range-thumb { background: var(--blue); width: 22px; height: 10px; }
.field--goal .field__v { color: var(--blue); }
.field.is-off .field__v { color: var(--off); }
.field.is-off .field__range { opacity: 0.35; cursor: default; }
.field__select { margin-top: 4px; width: 100%; height: 40px; padding: 0 30px 0 0; border: 0; border-bottom: 1px solid var(--line-2); border-radius: 0; background: transparent no-repeat right 4px center / 10px 6px var(--arrow); -webkit-appearance: none; appearance: none; font-family: var(--figure); font-size: 18px; font-weight: 600; cursor: pointer; }
.seg { display: inline-flex; padding: 2px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--line-2); }
.seg__opt { height: 24px; padding: 0 10px; border: 0; border-radius: 999px; background: none; font-size: 12.5px; cursor: pointer; color: var(--mute); transition: background-color 0.25s, color 0.25s; }
.seg__opt.is-on { background: var(--ink); color: var(--sheet); }

/* ---------------- the cards that ride the years ---------------- */
.card { width: min(440px, 100%); box-sizing: border-box; padding: 20px 0 0; border-top: 3px double var(--red); }
.card__live { display: grid; grid-template-columns: 1fr auto; gap: 8px 14px; align-items: baseline; margin: 22px 0 0; padding-top: 14px; border-top: 1px solid var(--line); font-size: 13.5px; color: var(--mute); }
.card__live b { font-family: var(--figure); font-size: 18px; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; text-align: right; }
.card__meter { grid-column: 1 / -1; height: 3px; background: var(--cream); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 15%, transparent); overflow: hidden; }
.card__meter i { display: block; height: 100%; background: var(--red); transform-origin: left; transform: scaleX(var(--k, 0)); transition: transform 0.6s var(--ease); }

/* ---------------- the flows: the table and the formulas ---------------- */
.ch--flow .ch__hold { position: relative; height: auto; min-height: 100svh; align-content: center; padding-top: calc(var(--edge-h) + 70px); padding-bottom: 90px; }
.ch--schedule .ch__inner { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); column-gap: 4vw; align-items: start; }
.ch--schedule .flow__head, .ch--schedule .sched { grid-column: 1; }
.flow__head { margin-bottom: 28px; }
.flow__head .answer__acts { margin-top: 24px; }
.sched { overflow: hidden; } /* every year in the page's own flow: no scroll inside a scroll, no row cut at an edge */
.sched table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.sched th { padding: 14px 18px 10px; font-size: 13px; font-weight: 500; color: var(--mute); text-align: right; border-bottom: 3px double var(--red); white-space: nowrap; }
.sched th:first-child, .sched td:first-child { text-align: left; padding-left: 0; }
.sched th:last-child, .sched td:last-child { padding-right: 0; }
.sched td { padding: 11px 18px; font-size: 15px; text-align: right; border-bottom: 1px solid var(--line); white-space: nowrap; transition: background-color 0.2s; }
.sched td:nth-child(3) { color: var(--red-ink); }
.sched td:nth-child(4) { font-weight: 600; }
.sched tr.is-past td { color: var(--mute); }
.sched tr.is-past td:nth-child(3) { color: var(--red-past); }
.sched tr.is-goal td { background: color-mix(in srgb, var(--blue) 9%, transparent); }
.sched tr.is-hot td { background: color-mix(in srgb, var(--red) 10%, transparent); }
.sched__goal { display: inline-block; margin-left: 6px; padding: 2px 8px 3px; border-radius: 999px; background: var(--blue); color: var(--on-blue); font-size: 11.5px; font-weight: 600; vertical-align: 1px; }
.faq { box-sizing: border-box; width: min(780px, 100%); border-top: 1px solid var(--line-2); }
.faq__item { border-bottom: 1px solid var(--line-2); }
.faq__item:last-child { border-bottom: 0; }
.faq__item summary { display: flex; justify-content: space-between; align-items: center; gap: 18px; padding: 20px 0; cursor: pointer; list-style: none; font-family: var(--figure); font-size: clamp(17px, 1.4vw, 20px); font-weight: 600; letter-spacing: -0.01em; }
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary i { position: relative; flex: none; width: 14px; height: 14px; }
.faq__item summary i::before, .faq__item summary i::after { content: ''; position: absolute; left: 0; right: 0; top: 6px; height: 2px; background: var(--red); transition: transform 0.4s var(--ease); }
.faq__item summary i::after { transform: rotate(90deg); }
.faq__item[open] summary i::after { transform: none; }
.faq__item:not([open]) > p { display: none; }
.faq__item p { margin: -6px 0 20px; max-width: 62ch; font-size: 15.5px; line-height: 1.6; color: var(--text-2); }

/* ---------------- tags on the desk ---------------- */
.tags { position: fixed; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
.tag { --c: var(--ink); position: absolute; left: 0; top: 0; opacity: 0; transition: opacity 0.35s; will-change: transform; }
.tag.is-on { opacity: 1; }
.tag--goal { --c: var(--blue); } .tag--cross { --c: var(--red); }
.tag__dot { position: absolute; left: -4px; top: -4px; width: 8px; height: 8px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 4px color-mix(in srgb, var(--c) 18%, transparent); }
.tag__body { position: absolute; left: 12px; bottom: 8px; display: grid; gap: 2px; padding: 7px 11px 8px; white-space: nowrap; background: var(--tag-bg); border: 1px solid color-mix(in srgb, var(--ink) 14%, transparent); border-left: 2px solid var(--c); border-radius: 3px; font-size: 12px; box-shadow: 0 8px 20px -14px rgba(14, 24, 52, 0.55); }
.tag.is-flip .tag__body { left: auto; right: 12px; border-left-width: 1px; border-right: 2px solid var(--c); text-align: right; }
.tag__name { color: var(--mute); font-size: 12px; }
.tag__body b { font-family: var(--figure); font-size: 16px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--ink); }
.tag__body small { font-size: 12px; color: var(--mute); }
.tag__body small:empty { display: none; }

/* ---------------- the edges: a ledger's head ----------------
   The header is the top of a ledger page: the parts of the site underlined, the call an outlined pill. Pinned, it
   closes with a vermilion double rule, and reading fills that rule with cobalt. The readout is the answer itself, its
   meter the share growth did. The footer is the plan's own stacks (world.js stacksFooter). */
:root {
  --edge-ink: var(--ink); --edge-accent: var(--blue); --edge-accent-ink: var(--on-blue); --edge-face: var(--figure); --edge-text: var(--face);
  --edge-backdrop: var(--backdrop); --edge-line: color-mix(in srgb, var(--ink) 16%, transparent); --edge-sheet-bg: var(--sheet); --edge-sheet-ink: var(--ink);
  --edge-foot-bg: var(--foot-bg); --edge-foot-ink: var(--foot-ink); --edge-radius: 999px; --edge-h: 64px;
}
.edge-head[data-state='pinned'] { border-bottom: 3px double var(--red); }
.edge-progress { bottom: -3px; height: 3px; background: linear-gradient(var(--blue) 0 1px, transparent 1px 2px, var(--blue) 2px 3px); }
body.edge-open .edge-progress { opacity: 0; }
.edge-brand svg { height: 21px; color: var(--ink); }
.edge-brand__word { font-weight: 600; font-size: 21px; letter-spacing: -0.025em; }
.edge-mark__red { fill: var(--red); opacity: calc(0.3 + var(--k, 0) * 0.7); transition: opacity 0.4s; }
.edge-mark__rule { stroke: var(--blue); }
.edge-nav__link { font-size: 14.5px; opacity: 0.72; }
.edge-nav__bar { bottom: 3px; height: 1.5px; background: var(--ink); }
.edge-nav__detail { padding: 6px 10px; border-radius: 3px; background: var(--ink); color: var(--sheet); }
.edge-live { padding-left: 14px; border-left: 1px solid var(--edge-line); }
.edge-live__k { color: var(--mute); opacity: 1; font-size: 12.5px; }
.edge-live__v { font-family: var(--figure); font-size: 15px; }
.edge-live__meter { background: var(--cream); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 14%, transparent); }
.edge-live__meter i { background: var(--red); }
.edge-head .edge-cta { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink); transition: background-color 0.25s, color 0.25s, transform 0.3s var(--edge-ease); }
.edge-head .edge-cta:hover { background: var(--ink); color: var(--sheet); filter: none; }
.edge-menu { border-color: var(--line-2); }
.edge-sheet__label, .edge-foot__statement, .edge-tile__label { font-weight: 600; letter-spacing: -0.03em; }
.edge-sheet .edge-cta, .edge-foot .edge-cta { background: var(--blue); color: var(--on-blue); }
.edge-foot { --edge-line: rgba(249, 251, 253, 0.16); }
.edge-foot__statement { max-width: 14ch; }
.edge-foot__mark { font-weight: 700; letter-spacing: -0.045em; color: var(--foot-ink); border-bottom-color: var(--edge-line); }
.edge-up { border-radius: 999px; }

/* ---------------- the footer: the plan's own stacks ----------------
   On the world itself (core/foot-scrim.js: no glass, no plate). The parts rise as four stacks of sheets drawn in the
   footer's ink, the later ones topped with vermilion as the years are; the cobalt goal line crosses the stacks tall
   enough to reach it, like the collars on the desk, and carries the goal. The plan beside them is the answer's own. */
.ef-stacks__body { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(320px, 0.7fr); grid-template-areas: 'head side' 'stacks side'; gap: clamp(40px, 7vh, 72px) clamp(40px, 6vw, 112px); align-items: end; padding-bottom: clamp(36px, 6vh, 72px); }
.ef-stacks__head { grid-area: head; }
.ef-stacks__head .edge-foot__statement { max-width: 12ch; font-size: clamp(44px, 5.6vw, 96px); font-weight: 600; line-height: 0.94; letter-spacing: -0.04em; }
.ef-stacks__head .edge-foot__text { max-width: 46ch; margin-top: 20px; opacity: 0.84; }
.ef-stacks { --pile: 190px; --reach: 128px; grid-area: stacks; position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: auto auto; column-gap: clamp(14px, 2vw, 30px); align-items: end; }
.ef-stack { grid-row: span 2; display: grid; grid-template-rows: subgrid; row-gap: 16px; color: inherit; text-decoration: none; }
.ef-stack__pile { position: relative; display: block; align-self: end; height: calc(var(--pile) * (0.22 + var(--k) * 0.78)); transform-origin: bottom; transition: transform 0.5s var(--ease); }
/* the sheets: the ink below, vermilion over the top share growth has reached by that year; cut into sheets by a mask */
.ef-stack__sheets { position: absolute; inset: 0; background: linear-gradient(to top, currentColor 0 calc(100% - var(--g) * 46%), var(--red) 0); -webkit-mask: repeating-linear-gradient(to top, #000 0 3px, transparent 3px 7px); mask: repeating-linear-gradient(to top, #000 0 3px, transparent 3px 7px); }
.ef-stack:hover .ef-stack__pile, .ef-stack:focus-visible .ef-stack__pile { transform: scaleY(1.08); }
.ef-stack__words { display: grid; align-content: start; gap: 6px; padding-top: 12px; border-top: 1px solid var(--edge-line); }
.ef-stack__label { font-family: var(--figure); font-size: clamp(18px, 1.55vw, 24px); font-weight: 600; letter-spacing: -0.02em; line-height: 1.1; }
.ef-stack__detail { font-size: 13.5px; line-height: 1.4; opacity: 0.84; }
.ef-stacks__goal { position: absolute; left: -8px; right: -8px; top: calc(var(--pile) - var(--reach)); margin: 0; height: 0; border-top: 2px solid var(--blue); pointer-events: none; }
.ef-stacks__goal span { position: absolute; left: 8px; bottom: 6px; font-family: var(--figure); font-size: 13px; font-weight: 600; color: var(--blue); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ef-stacks__side { grid-area: side; display: grid; gap: 22px; align-self: end; }
.ef-stacks__side .edge-foot__title { margin: 0; padding-bottom: 12px; border-bottom: 3px double var(--red); opacity: 0.84; }
.ef-plan { display: grid; grid-template-columns: repeat(3, auto); justify-content: start; gap: 6px clamp(18px, 2vw, 30px); margin: -8px 0 0; padding: 0 0 16px; border-bottom: 1px solid var(--edge-line); }
.ef-plan__item { margin: 0; }
.ef-plan dt { font-size: 12.5px; opacity: 0.84; }
.ef-plan dd { margin: 4px 0 0; font-family: var(--figure); font-size: clamp(18px, 1.5vw, 22px); font-weight: 600; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.edge-form--plan .edge-form__rows { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 20px; }
.edge-form--plan .edge-form__row:last-child { grid-column: 1 / -1; }
.edge-form--plan > .edge-foot__title { display: none; } /* the side's own title says what the form is for */
.edge-foot--stacks .edge-foot__base { border-top: 1px solid var(--edge-line); }

/* ---------------- tablet ---------------- */
@media (max-width: 1100px) {
  .ch--hero .ch__hold { grid-template-columns: minmax(0, 1fr) minmax(300px, 340px); }
  .tool__fields { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .field:nth-child(4) { border-left: 0; padding-left: 0; }
  .field:nth-child(n + 4) { border-top: 1px solid var(--line); }
}
@media (max-width: 900px) {
  :root { --edge-h: 58px; }
  .edge-head[data-state='hidden'] { transform: translate3d(0, calc(-100% - 6px), 0); }
  .ch--hero .ch__hold { position: relative; height: auto; min-height: 100svh; grid-template-columns: minmax(0, 1fr); grid-template-rows: none; padding-top: calc(var(--edge-h) + 30px); }
  .hero__copy, .answer, .tool { grid-column: 1; grid-row: auto; }
  .hero__gap { display: block; height: 36svh; }
  .answer { max-width: 560px; }
  .tool { grid-template-columns: minmax(0, 1fr); grid-template-areas: 'presets' 'fields' 'hint'; }
  .tool > .hint { text-align: left; }
  .pos-l .ch__hold, .pos-r .ch__hold { align-content: end; justify-items: start; }
  .ch--schedule .ch__inner { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .ef-stacks__body { grid-template-columns: minmax(0, 1fr); grid-template-areas: 'head' 'stacks' 'side'; align-items: start; }
  .ef-stacks__side { max-width: 560px; }
}
@media (max-width: 600px) {
  .big { font-size: clamp(40px, 11vw, 56px); }
  .hero__gap { height: 40svh; }
  .answer { padding: 16px 0 0; }
  .answer__n { font-size: clamp(48px, 15vw, 64px); }
  .tool__fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .field, .field:nth-child(4) { padding: 10px 12px 2px; border-left: 1px solid var(--line); border-top: 1px solid var(--line); }
  .field:nth-child(odd) { border-left: 0; padding-left: 0; }
  .field:nth-child(-n + 2) { border-top: 0; }
  .field--inflation .field__head { flex-wrap: wrap; }
  .ch--flow .ch__hold { padding-top: calc(var(--edge-h) + 24px); padding-bottom: 76px; }
  .flow__head { margin-bottom: 18px; }
  .flow__head .answer__acts { margin-top: 16px; }
  .sched th { padding: 9px 10px 7px; font-size: 12.5px; }
  .sched td { padding: 6px 10px; font-size: 13px; }
}
/* the phone: the stacks lie down as rows, the longest last */
@media (max-width: 600px) {
  .ef-stacks { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; row-gap: 18px; }
  .ef-stack { grid-row: auto; grid-template-rows: none; grid-template-columns: minmax(0, 1fr); row-gap: 10px; }
  .ef-stack__pile { height: 22px; width: calc(100% * (0.3 + var(--k) * 0.7)); transform-origin: left; }
  .ef-stack__sheets { background: linear-gradient(to right, currentColor 0 calc(100% - var(--g) * 46%), var(--red) 0); -webkit-mask: repeating-linear-gradient(to right, #000 0 3px, transparent 3px 7px); mask: repeating-linear-gradient(to right, #000 0 3px, transparent 3px 7px); }
  .ef-stack:hover .ef-stack__pile, .ef-stack:focus-visible .ef-stack__pile { transform: scaleX(1.04); }
  .ef-stack__words { padding-top: 0; border-top: 0; }
  .ef-stacks__goal { display: none; } /* the goal is in the plan under the rows */
  .ef-plan { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .edge-form--plan .edge-form__rows { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 460px) {
  .sched th:nth-child(5), .sched td:nth-child(5) { display: none; }
  .answer__acts .btn { flex: 1 1 auto; }
}