/*
  Tallyline home page. One idea: a line per transaction, closed or open.

  Token derivations (from the brief's world, not from a recipe):
  --pen      ballpoint blue, the pen a bookkeeper ticks with. Motive for the saturated ground
             (convergence tell saturated-ground): the pen is the product's action, a match is a closed pen line.
  --paper    cool bank-statement white, cooled toward the pen hue (not warm, not cream).
  --ink      blue-black fountain ink, hue shared with the pen.
  --marker   chrome-yellow highlighter. One job only: an open exception (and the word "missing").

  Type: Space Grotesk (OFL, self-hosted) for display, UI and body. Its squared terminals and open
  apertures sit between a ledger grotesk and a pen hand, and it holds up at display size in one weight.
  JetBrains Mono (OFL, self-hosted) only for real values: amounts, dates, document references, seat totals.
  Motive (convergence tell mono-labels): every mono selector below carries a value, never a label.
*/
:root {
  --pen: oklch(0.44 0.21 264);
  --pen-deep: oklch(0.34 0.17 265);
  --paper: oklch(0.968 0.010 235);
  --paper-2: oklch(0.925 0.022 240);
  --white: oklch(0.995 0.003 235);
  --ink: oklch(0.2 0.045 265);
  --muted: oklch(0.42 0.035 262);
  --marker: oklch(0.90 0.17 95);
  --rule: oklch(0.2 0.045 265 / 0.18);
  --rule-on-pen: oklch(0.968 0.010 235 / 0.26);
  --border-strong: oklch(0.55 0.05 262);
  --on-pen-soft: oklch(0.90 0.03 255);
  --drop: oklch(0.15 0.1 265 / .5);

  --f-sans: "Space Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --gutter: max(5vw, 20px);
  --space-tight: 0.5rem;
  --space-section: clamp(3rem, 7vw, 6rem);
  --space-air: clamp(4rem, 10vw, 8.5rem);
  --radius-control: 0.5rem;
  --stroke: 6px;
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-cut: cubic-bezier(.76, 0, .24, 1);
  --focus: var(--pen);
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 1.5rem; -webkit-text-size-adjust: 100%; scrollbar-gutter: stable; color-scheme: light; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font: 400 clamp(1rem, 0.96rem + 0.2vw, 1.125rem)/1.6 var(--f-sans);
  font-kerning: normal; -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { text-wrap: balance; margin: 0; font-weight: 700; }
p, li, dd { text-wrap: pretty; }
p, dl, dd, ol, ul { margin: 0; }
ol, ul { padding: 0; list-style: none; }
a { color: inherit; }
svg { display: block; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 2px; }
::selection { background: var(--marker); color: var(--ink); }
.skip { position: absolute; left: 1rem; top: -5rem; background: var(--white); color: var(--ink); padding: .6rem 1rem; z-index: 50; border-radius: var(--radius-control); }
.skip:focus { top: 1rem; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.nb { white-space: nowrap; }
.val { font-family: var(--f-mono); font-weight: 600; font-size: .94em; letter-spacing: -.02em; }
.js-only { display: none; }
.js .js-only { display: inline; }

/* Placeholder: one uniform style at body size, never in a heading. Brackets plus a dotted rule say "not yet a fact". */
.ph { font: inherit; font-size: 1em; border-bottom: 2px dotted currentColor; padding: 0 .1em; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .6em;
  font: 700 1.05rem/1 var(--f-sans); letter-spacing: -.005em;
  padding: 1.05em 1.5em; border-radius: var(--radius-control); border: 2px solid transparent;
  text-decoration: none; cursor: pointer; transition: transform 160ms ease-out, background-color 160ms ease-out;
}
.btn:active { transform: scale(.97); }
.btn svg { width: 1.1em; height: 1.1em; transition: transform 200ms var(--ease-out); }
@media (hover: hover) { .btn:hover svg { transform: translateX(.25em); } }
.btn--paper { background: var(--white); color: var(--ink); }
.btn--paper:hover { background: var(--paper-2); }
.btn--ink { background: var(--ink); color: var(--white); }
.btn--ink:hover { background: var(--pen-deep); }
.btn--small { padding: .78em 1.1em; font-size: .95rem; }

/* ---------- Header ---------- */
.top { position: absolute; inset: 0 0 auto 0; z-index: 10; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.1rem var(--gutter); color: var(--white); --focus: var(--marker); }
.brand { display: inline-flex; align-items: center; gap: .55rem; text-decoration: none; font: 700 1.35rem/1 var(--f-sans); letter-spacing: -.03em; }
.brand svg { width: 2rem; height: 2rem; flex: none; }
.nav { display: flex; align-items: center; gap: clamp(1rem, 2.6vw, 2.2rem); }
.nav a:not(.btn) { text-decoration: none; font-weight: 500; font-size: 1rem; }
.nav a:not(.btn):hover { text-decoration: underline; text-underline-offset: .25em; text-decoration-thickness: 1.5px; }

/* ---------- Hero ---------- */
.hero { --focus: var(--marker); position: relative; background: var(--pen); color: var(--white); padding-top: clamp(6.4rem, 12vh, 7.6rem); overflow: hidden; }
.hero-head { padding: 0 var(--gutter); margin-bottom: clamp(1.5rem, 2.6vw, 2.1rem); }
h1 {
  font-size: clamp(2.7rem, 7.1vw, 7.4rem); line-height: .95; letter-spacing: -.045em; font-weight: 700;
  max-width: 13em;
}
/* The marker tab: identical geometry to the open-row tabs (.gap) so the headline word and the product's flag are one object. */
h1 .slot { display: inline-block; background: linear-gradient(var(--marker), var(--marker)) 0 0 / 100% 100% no-repeat; color: var(--ink); padding: 0 .14em .14em; margin-inline: -.02em; border-radius: .07em; box-shadow: 0 .045em 0 var(--drop); animation: mark 360ms var(--ease-out) 120ms both; }
/* a highlighter pass, left to right; the word itself never moves */
@keyframes mark { from { background-size: 0% 100%; color: var(--white); box-shadow: none; } 60% { color: var(--ink); } to { background-size: 100% 100%; } }
.hero-side { margin-top: clamp(1.3rem, 2vw, 1.9rem); display: grid; gap: 1.1rem 2.4rem; align-items: center; justify-items: start; }
.lede { font-size: clamp(1.05rem, 1.1vw + .5rem, 1.3rem); line-height: 1.45; max-width: 31rem; }
.facts { font-size: 1.0625rem; line-height: 1.45; color: var(--white); max-width: 25rem; }
.facts .val { color: var(--white); }
@media (min-width: 1000px) {
  .hero-side { grid-template-columns: minmax(0, 30rem) auto minmax(0, 24rem); justify-content: start; }
  .facts { padding-left: 1.6rem; border-left: 1px solid var(--rule-on-pen); }
}

/* The statement: raw rows on a darker sheet of the pen ground, no panel chrome. */
.statement { --fs: clamp(1.05rem, 2.55vw, 2.75rem); background: var(--pen-deep); border-top: 1px solid oklch(0.75 0.12 264); box-shadow: 0 -18px 30px -18px oklch(0.2 0.12 265 / .6); padding-bottom: clamp(2.5rem, 5vw, 4.5rem); }
.st-meta { display: flex; justify-content: space-between; align-items: center; gap: .4rem 1.5rem; padding: .55rem var(--gutter) .55rem; font-size: clamp(.9rem, .5vw + .65rem, 1rem); color: var(--on-pen-soft); }
.st-count { display: flex; align-items: center; gap: 1rem; flex: none; }
.count { color: var(--white); font-weight: 500; font-size: 1.15em; display: inline-flex; align-items: baseline; gap: .35em; }
.count b { font: 700 3.6em/.85 var(--f-sans); font-variant-numeric: tabular-nums; letter-spacing: -.05em; display: inline-block; min-width: .6em; text-align: right; }
.count.pulse b { animation: pulse 600ms var(--ease-out); }
@keyframes pulse { 40% { transform: translateY(-.08em); color: var(--marker); } }
#reset { font: inherit; background: none; border: 0; color: var(--white); text-decoration: underline; text-underline-offset: .2em; cursor: pointer; padding: .3rem 0; }

.rows { border-top: 1px solid var(--rule-on-pen); font-size: var(--fs); }
.row {
  display: grid; align-items: center; column-gap: 2.4rem;
  grid-template-columns: minmax(0, 8.2em) 6.2em minmax(0, 1fr) 4.1em;
  padding: .2em var(--gutter); min-height: 1.95em; position: relative;
  border-bottom: 1px solid var(--rule-on-pen); line-height: 1.1;
}
.r-desc { font-weight: 600; letter-spacing: -.035em; line-height: 1; }
.r-date { display: block; font: 500 max(.34em, .8rem)/1.2 var(--f-mono); color: var(--on-pen-soft); letter-spacing: 0; margin-bottom: .3em; }
.r-amt { font: 600 .9em/1 var(--f-mono); text-align: right; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
/* The document sits where the line ends: amount, line, document. An open row shows the empty slot. */
.r-doc { grid-column: 4; font: 500 max(.44em, .9rem)/1.1 var(--f-mono); color: var(--white); letter-spacing: -.02em; }
.row[data-state="open"] .r-doc { align-self: center; width: 100%; height: 1.9em; border: 2px dashed oklch(0.90 0.17 95 / .75); border-radius: 3px; font-size: max(.4em, .8rem); }

.r-line { grid-column: 3; grid-row: 1; position: relative; height: 1em; display: block; min-width: 0; margin: 0 .25em; }
/* Deliberate ends: one round dot at each end, same width at every size. */
.r-line::before, .r-line::after { content: ""; position: absolute; top: 50%; --d: max(12px, .32em); width: var(--d); height: var(--d); translate: 0 -50%; border-radius: 50%; background: var(--white); }
.r-line::before { left: calc(var(--d) / -2); }
.r-line::after { right: calc(var(--d) / -2); transition: background-color 300ms var(--ease-out), box-shadow 300ms; }
.row[data-state="closed"] .r-line::after { width: max(5px, .14em); height: max(20px, .62em); right: calc(max(5px, .14em) / -2); border-radius: 99px; rotate: 22deg; transition: none; }
.row[data-state="open"] .r-line::after { background: var(--pen-deep); box-shadow: inset 0 0 0 max(3px, .08em) var(--marker); }
/* The pen stroke: a single shallow curve (under 1 unit of 24), constant width through non-scaling-stroke. */
.wire { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; animation: draw 700ms var(--ease-out) both; animation-delay: calc(var(--n, 0) * 90ms + 250ms); }
.wire path { fill: none; stroke: var(--white); stroke-width: max(5px, .15em); stroke-linecap: round; vector-effect: non-scaling-stroke; }
.row:nth-child(1) { --n: 0; } .row:nth-child(2) { --n: 1; } .row:nth-child(3) { --n: 2; }
.row:nth-child(4) { --n: 3; } .row:nth-child(5) { --n: 4; } .row:nth-child(6) { --n: 5; }
@keyframes draw { from { clip-path: inset(-50% 100% -50% -2%); } to { clip-path: inset(-50% -2% -50% -2%); } }
/* The hole: the middle of an open line is bare ground; the closing stroke waits hidden until resolved. */
.wire .p2 { clip-path: inset(-50% 100% -50% 0); }
.row[data-state="closed"] .wire .p2 { clip-path: inset(-50% -2% -50% 0); }
.row.is-closing .wire .p2 { clip-path: inset(-50% -2% -50% 0); transition: clip-path 520ms var(--ease-cut); }
.gap {
  position: absolute; top: 50%; left: 50%; translate: -50% -50%; min-width: 34%; height: 1.7em; z-index: 1;
  display: none; align-items: center; justify-content: center; padding: 0 .7em;
  background: var(--marker); color: var(--ink); border: 0; border-radius: .14em;
  font: 700 max(.5em, .8rem)/1 var(--f-sans); letter-spacing: -.01em; white-space: nowrap;
  box-shadow: 0 .12em 0 var(--drop);
  transition: transform 420ms var(--ease-cut), opacity 260ms ease-out, box-shadow 200ms;
  animation: slot-in 360ms cubic-bezier(.34, 1.56, .64, 1) backwards; animation-delay: calc(var(--n, 0) * 90ms + 520ms);
}
.gap::before { content: ""; width: .7em; height: .7em; margin-right: .5em; flex: none;
  background: linear-gradient(currentColor, currentColor) center / 100% 2.5px no-repeat, linear-gradient(currentColor, currentColor) center / 2.5px 100% no-repeat; }
@keyframes slot-in { from { opacity: 0; transform: scale(.55); } 1% { opacity: 1; } to { opacity: 1; transform: scale(1); } }
.row[data-state="open"] .gap { display: flex; }
.js .gap { cursor: pointer; }
@media (hover: hover) { .js .gap:hover { box-shadow: 0 .2em 0 var(--drop); transform: translateY(-.06em); } }
.gap:active { transform: scale(.96); }
.gap:focus-visible { outline: 3px solid var(--white); outline-offset: 4px; box-shadow: 0 0 0 4px var(--ink), 0 .12em 0 var(--drop); }
.row.is-closing .gap { transform: scale(.4); opacity: 0; box-shadow: none; pointer-events: none; animation: none; }
.row.is-hidden-gap .gap { display: none; }

@media (min-width: 760px) and (max-width: 1099px) { .row { column-gap: 1.6rem; } }
/* Mobile: two lines per row. Amount beside the name, the line beside its document. */
@media (max-width: 759px) {
  .statement { --fs: 1.05rem; }
  .st-meta { align-items: flex-end; }
  .st-meta > p:first-child { font-size: .85rem; line-height: 1.4; }
  .count b { font-size: 2.5em; }
  .row { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "desc amt" "line doc"; row-gap: .3rem; column-gap: 1rem; padding-block: .6rem; min-height: 0; }
  .r-desc { grid-area: desc; font-size: 1.15em; }
  .r-date { display: inline; font-size: .78rem; margin-right: .6em; vertical-align: .12em; }
  .r-amt { grid-area: amt; font-size: 1.05em; }
  .r-line { grid-area: line; grid-column: 1; grid-row: 2; height: 1.6rem; margin: 0 9px; }
  .r-doc { grid-area: doc; grid-column: 2; grid-row: 2; align-self: center; margin: 0; font-size: .8rem; }
  .row[data-state="open"] .r-doc { width: 4.6rem; height: 1.1rem; }
  .r-line::before, .r-line::after { --d: 11px; }
  .wire path { stroke-width: 5px; }
  .gap { font-size: .8rem; height: 1.6rem; min-width: 52%; padding: 0 .55em; }
}

/* ---------- Sections ---------- */
.sec { padding: var(--space-section) var(--gutter); }
h2 { font-size: clamp(2rem, 4.2vw, 4.4rem); line-height: 1; letter-spacing: -.04em; }

/* How it works: the immersive section. One pen line across the full width, broken after Flag, closed by Review.
   Ink sheet (the fountain-ink token, darker than the statement so the two dark bands read as two sheets), white pen, marker tab in the hole. */
.how { --focus: var(--marker); background: var(--ink); color: var(--white); padding-block: var(--space-air); overflow: hidden; }
.how .intro { color: var(--on-pen-soft); }
.sec-head { max-width: 58rem; margin-bottom: clamp(2.8rem, 6vw, 5rem); }
.intro { margin-top: 1.2rem; max-width: 40rem; font-size: clamp(1.05rem, .6vw + .8rem, 1.25rem); }
.track { --pen-w: 8px; display: grid; position: relative; }
.stop { display: grid; grid-template-columns: 2.4rem minmax(0, 1fr); grid-template-rows: auto 1fr; column-gap: 1rem; align-content: start; padding-bottom: 1.6rem; }
.stop:last-child { padding-bottom: 0; }
.rail { grid-row: 1 / span 2; display: flex; flex-direction: column; align-items: center; margin-bottom: -1.6rem; }
.stop:last-child .rail { margin-bottom: 0; }
.node { flex: none; width: 1.6rem; height: 1.6rem; border-radius: 50%; background: var(--white); box-shadow: 0 3px 0 var(--drop); }
.stop--end .node { background: var(--ink); box-shadow: inset 0 0 0 var(--pen-w) var(--white), 0 3px 0 var(--drop); }
.seg { flex: 1; position: relative; display: flex; flex-direction: column; align-items: center; width: var(--pen-w); min-height: 2rem; background: var(--white); border-radius: 99px; box-shadow: 0 3px 0 var(--drop); }
.seg--tail { display: none; }
.seg--open { background: none; box-shadow: none; justify-content: flex-start; min-height: 5.5rem; }
.stub { flex: 0 0 1.6rem; width: var(--pen-w); background: var(--white); border-radius: 99px; box-shadow: 0 3px 0 var(--drop); }
.tab { position: absolute; bottom: 1.3rem; left: -.3rem; z-index: 1; padding: .35rem .55rem; color: var(--ink); font-style: normal;
  background: var(--marker); border-radius: .15rem; box-shadow: 0 3px 0 var(--drop); font: 700 .9rem/1 var(--f-sans); white-space: nowrap; }
.stop.stop--flag { padding-bottom: 4.2rem; }
.stop--flag .rail { margin-bottom: -4.2rem; }
.seg--open .stub:first-child { flex: 1 1 auto; }
.seg--open .stub:last-child { flex: 0 0 .8rem; margin-top: 3.4rem; }
.stop h3 { font-size: clamp(1.4rem, 1.5vw + .8rem, 2.3rem); line-height: 1.05; letter-spacing: -.035em; }
.stop h3 .n { font: 500 .5em/1 var(--f-sans); color: var(--on-pen-soft); margin-right: .5em; vertical-align: .3em; }
.stop p { grid-column: 2; margin-top: .35rem; color: var(--on-pen-soft); text-wrap: balance; }
@media (min-width: 900px) {
  .track { grid-template-columns: 1fr 1fr 1.7fr 1fr 1fr; }
  /* the line enters from the page edge and leaves at the other edge: the month carries on */
  .track::before { content: ""; position: absolute; top: 1.2rem; left: calc(-1 * var(--gutter)); width: var(--gutter); height: var(--pen-w); margin-top: calc(var(--pen-w) / -2); background: var(--white); box-shadow: 0 3px 0 var(--drop); }
  .stop { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; padding: 0; }
  .rail { grid-row: auto; flex-direction: row; height: 2.4rem; margin: 0 0 1.6rem; }
  .stop:last-child .rail { margin-bottom: 1.6rem; }
  .seg { flex-direction: row; width: auto; height: var(--pen-w); min-height: 0; margin-left: -.2rem; }
  .seg--tail { display: block; margin-right: calc(-1 * var(--gutter)); border-radius: 99px 0 0 99px; }
  .seg--open { flex-direction: row; height: 2.4rem; min-height: 0; }
  .stub { flex: 0 0 18%; width: auto; height: var(--pen-w); }
  .tab { position: static; height: 2.4rem; padding: 0 1rem; display: flex; align-items: center; margin: 0 auto; font-size: .95rem; }
  .stop.stop--flag { padding-bottom: 0; }
  .stop--flag .rail { margin-bottom: 1.6rem; }
  .seg--open { justify-content: space-between; }
  .seg--open .stub:first-child, .seg--open .stub:last-child { flex: 0 0 18%; margin-top: 0; }
  .stop p { grid-column: 1; padding-right: 1.4rem; max-width: 19rem; }
}
/* Scroll-triggered drawing (app.js): when the track first enters the viewport the pen draws it stop by stop,
   pauses at the hole while the marker tab lands, then carries on to Close. JS arms it only when the track starts
   below the fold and motion is welcome; the resting state is the fully drawn line with its open hole. */
.track.is-armed .node, .track.is-armed .tab { opacity: 0; transform: scale(.4); }
.track.is-armed .seg:not(.seg--open), .track.is-armed .stub { transform: scaleY(0); transform-origin: top; }
.track.is-drawn .node, .track.is-drawn .tab { animation: pop 260ms cubic-bezier(.34, 1.56, .64, 1) both; animation-delay: var(--d, 0ms); }
.track.is-drawn .seg:not(.seg--open), .track.is-drawn .stub { animation: grow-y var(--t, 380ms) var(--ease-out) both; animation-delay: var(--d, 0ms); transform-origin: top; }
@media (min-width: 900px) {
  .track.is-armed .seg:not(.seg--open), .track.is-armed .stub { transform: scaleX(0); transform-origin: left; }
  .track.is-drawn .seg:not(.seg--open), .track.is-drawn .stub { animation-name: grow-x; transform-origin: left; }
}
@keyframes pop { from { opacity: 0; transform: scale(.4); } to { opacity: 1; transform: scale(1); } }
@keyframes grow-x { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes grow-y { from { transform: scaleY(0); } to { transform: scaleY(1); } }

/* Pricing */
.pricing { background-color: var(--white); }
.price-grid { display: grid; gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.price-num { font: 700 clamp(7rem, 17vw, 16rem)/.8 var(--f-sans); letter-spacing: -.07em; color: var(--ink); font-variant-numeric: tabular-nums; margin-top: -.06em; }
.price-num sup { font-size: .3em; vertical-align: top; position: relative; top: .14em; letter-spacing: 0; margin-right: .06em; }
.price-unit { font-size: clamp(1.4rem, 1.4vw + .9rem, 2.2rem); font-weight: 600; line-height: 1.15; letter-spacing: -.03em; margin-top: 1.1rem; }
.price-ex { margin-top: .5rem; color: var(--muted); }
.seats { display: grid; gap: .9rem; max-width: 36rem; }
.seats label { font-weight: 600; font-size: 1.15rem; }
.seat-out { display: flex; align-items: baseline; flex-wrap: wrap; gap: .2rem .9rem; color: var(--muted); }
.seat-n { font: 700 clamp(3rem, 5vw, 4.6rem)/1 var(--f-sans); letter-spacing: -.05em; font-variant-numeric: tabular-nums; color: var(--ink); min-width: 1.2em; }
.seat-sum { font: 600 clamp(1.6rem, 2.2vw, 2.4rem)/1 var(--f-mono); letter-spacing: -.04em; color: var(--ink); margin-inline: .1em; }
.range-wrap { padding-block: .4rem; }
/* The slider is a pen line closed up to the chosen seat count; the rest stays a faint rule (yellow keeps its one job). */
input[type=range] { --stroke: 8px; -webkit-appearance: none; appearance: none; width: 100%; height: 2.6rem; background: transparent; margin: 0; cursor: pointer; --focus: var(--pen); }
input[type=range]::-webkit-slider-runnable-track { height: var(--stroke); border-radius: 99px; background: linear-gradient(to right, var(--pen) var(--fill, 18.5%), oklch(0.2 0.045 265 / .2) var(--fill, 18.5%)); }
input[type=range]::-moz-range-track { height: var(--stroke); border-radius: 99px; background: oklch(0.2 0.045 265 / .2); }
input[type=range]::-moz-range-progress { height: var(--stroke); border-radius: 99px; background: var(--pen); }
/* the thumb is the pen tip: a solid pen dot like the line ends, with the same drop edge */
input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 1.7rem; height: 1.7rem; margin-top: calc(-.85rem + var(--stroke) / 2); border-radius: 50%; background: var(--pen); border: 0; box-shadow: 0 3px 0 oklch(0.2 0.045 265 / .35); transition: transform 160ms ease-out; }
input[type=range]::-moz-range-thumb { width: 1.7rem; height: 1.7rem; border-radius: 50%; background: var(--pen); border: 0; }
input[type=range]:active::-webkit-slider-thumb { transform: scale(.92); }
.range-scale { display: flex; justify-content: space-between; font: 500 .9rem/1 var(--f-mono); color: var(--muted); margin-top: .2rem; }
.derived { color: var(--muted); }
.seats .btn { margin-top: .4rem; }
@media (min-width: 900px) { .price-grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); } }

/* Questions: each question joined to its answer by the pen line; an answer this page cannot give yet is an open line */
.questions { background-color: var(--paper-2); }
.questions h2 { margin-bottom: clamp(1.8rem, 4vw, 3rem); max-width: 16em; }
.qa { border-top: 2px solid var(--ink); }
.qa-row { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: .55rem; padding: 1.15rem 0; border-bottom: 1px solid var(--rule); }
.qa-row h3 { font-weight: 600; font-size: clamp(1.15rem, .7vw + .9rem, 1.5rem); line-height: 1.25; letter-spacing: -.02em; }
.qa-row p { max-width: 34rem; }
.qline { position: relative; height: 22px; align-self: start;
  background:
    radial-gradient(circle, var(--pen) 6px, transparent 6.5px) left center / 14px 14px no-repeat,
    linear-gradient(var(--pen), var(--pen)) left center / calc(100% - 3px) 6px no-repeat; }
.qa-row--open .qline { background:
    radial-gradient(circle, var(--pen) 6px, transparent 6.5px) left center / 14px 14px no-repeat,
    radial-gradient(circle, var(--paper-2) 3px, var(--ink) 3.5px 6px, transparent 6.5px) right center / 14px 14px no-repeat,
    linear-gradient(to right, var(--pen) 0 18%, transparent 18% 82%, var(--pen) 82%) center / calc(100% - 10px) 6px no-repeat; }
.qtab { position: absolute; top: 50%; left: 50%; translate: -50% -50%; padding: .28rem .45rem; background: var(--marker); color: var(--ink); border-radius: .15rem; box-shadow: 0 2px 0 oklch(0.2 0.045 265 / .35); font: 700 .8rem/1 var(--f-sans); font-style: normal; }
@media (min-width: 900px) {
  .qa-row { grid-template-columns: minmax(0, 19rem) minmax(5rem, 1fr) minmax(0, 32rem); column-gap: 1.8rem; align-items: center; padding: 1.5rem 0; }
  .qa-row h3 { grid-column: 1; }
  .qline { align-self: center; }
  .qtab { font-size: .9rem; padding: .35rem .7rem; }
}
/* Paper grain on the statement-paper sections: one material layer, about 5 %, outside nothing but text-free ground. */
.pricing, .questions { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .1 0 0 0 0 .12 0 0 0 0 .3 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.09'/%3E%3C/svg%3E"); }

/* ---------- Closing ---------- */
.closing { --focus: var(--marker); position: relative; background: var(--pen); color: var(--white); padding: var(--space-air) var(--gutter) 2rem; }
.close-grid { display: grid; gap: 3rem 5rem; align-items: start; }
@media (min-width: 900px) { .close-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 29rem); } }
.zero { display: flex; align-items: baseline; gap: .25em; font-weight: 500; font-size: clamp(1.4rem, 1.4vw + 1rem, 2.4rem); line-height: 1; }
.zero b { font: 700 clamp(6rem, 12vw, 11.5rem)/.78 var(--f-sans); letter-spacing: -.06em; font-variant-numeric: tabular-nums; }
.zero-cap { margin-top: 1.4rem; color: var(--on-pen-soft); }
.closed-rows { margin-top: .9rem; border-top: 1px solid var(--rule-on-pen); max-width: 36rem; }
.closed-rows li { display: grid; grid-template-columns: minmax(0, 8.6rem) minmax(2.5rem, 1fr) 7.6rem; align-items: center; column-gap: 1rem; padding: .6rem 0; border-bottom: 1px solid var(--rule-on-pen); }
.c-desc { font-weight: 600; }
.c-doc { font: 500 .9rem/1 var(--f-mono); }
.c-line { height: 12px;
  background:
    radial-gradient(circle, var(--white) 5px, transparent 5.5px) left center / 12px 12px no-repeat,
    linear-gradient(var(--white), var(--white)) left center / calc(100% - 3px) 5px no-repeat; position: relative; }
/* every closed line on the page ends in the same tally tick as the hero rows */
.c-line::after, .qa-row:not(.qa-row--open) .qline::after { content: ""; position: absolute; right: 0; top: 50%; width: 5px; height: 20px; translate: 0 -50%; rotate: 22deg; border-radius: 99px; background: var(--white); }
.qa-row:not(.qa-row--open) .qline::after { background: var(--pen); width: 6px; height: 22px; }
.close-copy { display: flex; flex-direction: column; align-self: stretch; }
.close-copy h2 { margin-top: clamp(2.4rem, 5vw, 3.6rem); font-size: clamp(2.3rem, 4.2vw, 4.4rem); line-height: .98; }
@media (min-width: 900px) { .close-copy h2 { margin-top: auto; padding-top: 3rem; } }
.close-lede { margin-top: 1.1rem; max-width: 30rem; font-size: clamp(1.05rem, .6vw + .8rem, 1.25rem); }

.form-card { background: var(--paper); color: var(--ink); padding: clamp(1.5rem, 3vw, 2.3rem); border-radius: 6px; box-shadow: 0 1px 0 oklch(0.2 0.045 265 / .35), 0 24px 40px -18px oklch(0.15 0.08 265 / .6); --focus: var(--pen); }
.form-card h3 { font-size: clamp(1.45rem, .8vw + 1rem, 1.8rem); line-height: 1.1; letter-spacing: -.03em; }
.form-card .sub { color: var(--muted); margin: .5rem 0 1.4rem; }
.field { display: grid; gap: .25rem; margin-bottom: 1.1rem; }
.field label { font-weight: 600; font-size: .98rem; }
.field input, .field select { font: 400 1.0625rem/1.3 var(--f-sans); color: var(--ink); width: 100%; min-height: 2.9rem; padding: .55em 0; border: 0; border-bottom: 2px solid var(--ink); border-radius: 0; background: transparent; }
.field select { padding-inline: 0; text-indent: 0; -webkit-appearance: none; appearance: none; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23111a33' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") right .2rem center / .75rem no-repeat; padding-right: 1.6rem; }
.field input::placeholder { color: var(--muted); opacity: 1; }
.field input:focus-visible, .field select:focus-visible { outline: 3px solid var(--pen); outline-offset: 2px; border-bottom-color: var(--pen); }
.field [aria-invalid="true"] { border-bottom-color: var(--ink); background: oklch(0.90 0.17 95 / .55); }
.btn--submit { width: 100%; margin-top: .5rem; font-size: 1.1rem; }
.consent { margin-top: .9rem; font-size: .95rem; color: var(--muted); }
.status { margin-top: .9rem; font-weight: 600; }
.status:empty { display: none; }
.status.is-ok { padding: .8rem 1rem; background: var(--paper-2); border-left: var(--stroke) solid var(--pen); }
.status.is-err { padding: .8rem 1rem; background: oklch(0.90 0.17 95 / .4); border-left: var(--stroke) solid var(--ink); }

.contact { margin-top: clamp(3rem, 6vw, 4.5rem); display: grid; gap: .9rem 2rem; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); padding-top: 1.5rem; border-top: 1px solid var(--rule-on-pen); }
.contact dt { font-size: .95rem; color: var(--on-pen-soft); }
.foot { margin-top: 2.2rem; padding-top: 1.4rem; border-top: 1px solid var(--rule-on-pen); display: flex; flex-wrap: wrap; align-items: center; gap: .8rem 2rem; justify-content: space-between; font-size: .95rem; color: var(--on-pen-soft); }
.foot .brand { color: var(--white); font-size: 1.15rem; }
.foot .brand svg { width: 1.6rem; height: 1.6rem; }
.credit { flex-basis: 100%; margin-top: .6rem; font-size: .85rem; }

/* ---------- Small screens ---------- */
@media (max-width: 760px) {
  .nav a:not(.btn) { display: none; }
  .contact { grid-template-columns: minmax(0, 1fr); gap: .5rem; }
  .contact > div { display: flex; flex-wrap: wrap; gap: .2rem .8rem; align-items: baseline; }
  .contact dt { min-width: 4.2rem; }
  .price-num { font-size: 5.6rem; }
  .seats { gap: .7rem; }
  .qa-row { grid-template-columns: minmax(0, 1fr) 5.5rem; grid-template-areas: "q line" "a a"; column-gap: .9rem; row-gap: .45rem; padding: 1rem 0; }
  .qa-row h3 { grid-area: q; }
  .qa-row .qline { grid-area: line; align-self: center; }
  .qa-row p { grid-area: a; }
  .field { margin-bottom: .8rem; }
  .form-card .sub { margin-bottom: 1rem; }
  .stop.stop--flag { padding-bottom: 3.8rem; }
  .stop.stop--flag .rail { margin-bottom: -3.8rem; }
  .seg--open .stub:last-child { margin-top: 3rem; }
  .tab { bottom: 1.1rem; }
  .how { padding-block: var(--space-section); }
  .hero { padding-top: 5.4rem; }
  .closing { padding-top: var(--space-section); }
  .close-copy h2 { margin-top: 2rem; }
  .zero-cap { margin-top: 1rem; }
  .contact { margin-top: 2.4rem; }
  .price-unit { margin-top: .8rem; }
  .stop { padding-bottom: 1.1rem; }
  .rail { margin-bottom: -1.1rem; }
  .closed-rows li { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "desc doc" "line line"; row-gap: .4rem; padding: .6rem 0; }
  .c-desc { grid-area: desc; } .c-doc { grid-area: doc; } .c-line { grid-area: line; }
  .top { padding-block: .9rem; }
}
@media (max-width: 400px) {
  .top { gap: .6rem; }
  .brand { font-size: 1.2rem; gap: .45rem; }
  .brand svg { width: 1.7rem; height: 1.7rem; }
}
@media (max-width: 359px) {
  .brand-name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
@media (max-width: 400px) { .btn--small { font-size: .85rem; padding: .75em .85em; } }

/* ---------- Motion preferences, forced colours, print ---------- */
@media (prefers-reduced-motion: reduce) {
  .wire, .gap, .count.pulse b, h1 .slot { animation: none !important; }
  .wire .p2, .gap, .r-line::after, .btn, .btn svg { transition: none !important; }
}
@media (forced-colors: active) {
  .gap { border: 2px solid CanvasText; }
  .wire path { stroke: CanvasText; }
  .node, .seg, .stub, .tab { forced-color-adjust: none; }
}
@media print {
  .hero, .closing, .statement { background: none; color: #000; box-shadow: none; }
  .top, .js-only, .form-card { display: none; }
  .wire path { stroke: #000; }
}