/* billyai.in. Every colour, face and size comes from tokens.css (BRAND.md).
   The page is built around the readout: the wordmark's segments, the dispenser's three windows,
   and the day read like a shift register. English only; capped at 1200px; 16px gutters at 360px. */

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 72px; }
body { margin: 0; background: var(--glass); color: var(--segment); font-family: var(--font-body); font-size: var(--text-body); line-height: var(--lh-body); -webkit-font-smoothing: antialiased; overflow-x: clip; }
:lang(hi), :lang(mr) { line-height: var(--lh-body-deva); }
/* An English page sets its few Devanagari words in Mukta 400, never Anek: Anek's Devanagari file is
   90 KB, and each Mukta weight is another 62 KB (BRAND.md §4). */
html:lang(en) :is([lang="hi"], [lang="mr"]), html:lang(en) :is([lang="hi"], [lang="mr"]) * { font-family: var(--font-body); font-stretch: normal; font-weight: var(--weight-body); letter-spacing: 0; }
a { color: inherit; }
img, svg { max-width: 100%; }
[hidden] { display: none !important; }
.num { font-variant-numeric: var(--figures); }
.muted { color: var(--etch); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
:focus-visible { outline: var(--focus-width) solid var(--focus); outline-offset: var(--focus-offset); }
.skip { position: absolute; left: -999px; top: 8px; background: var(--segment); color: var(--housing); padding: 8px 12px; border-radius: var(--radius-key); z-index: 10; }
.skip:focus { left: 8px; }

h1, h2, h3 { margin: 0; text-wrap: balance; font-family: var(--font-display); font-stretch: var(--stretch-display); font-weight: var(--weight-display); line-height: var(--lh-display); }
h1 { font-size: clamp(44px, 6.6vw, 88px); font-weight: var(--weight-hero); }
h2 { font-size: var(--display-section); }
h3 { font-size: var(--text-title); }
h2 [lang="hi"] { font-size: .9em; line-height: 1.25; }

main > section, .foot { padding-inline: var(--gutter); }
main > section > *, .foot > * { max-width: var(--page-max); margin-inline: auto; }
main > section { padding-block: var(--space-8); border-top: var(--rule-width) solid var(--hairline); }
main > section:first-child { border-top: 0; }
.section-head { display: grid; gap: var(--space-3); margin-bottom: var(--space-6); }
.section-lead { margin: 0; max-width: 62ch; font-size: var(--text-lead); color: var(--etch); }
.eyebrow { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); font-family: var(--font-utility); font-weight: var(--weight-utility); font-size: var(--text-label); color: var(--etch); text-transform: uppercase; letter-spacing: var(--tracking-label); }
.eyebrow .state { text-transform: none; letter-spacing: 0; font-family: var(--font-body); }
.lbl, .label { font-family: var(--font-utility); font-weight: var(--weight-utility); font-size: var(--text-label); color: var(--etch); letter-spacing: var(--tracking-label); }
.fine { margin: 0; color: var(--etch); font-size: var(--text-sm); }
.working, .source { margin: 0; font-size: var(--text-sm); color: var(--etch); font-variant-numeric: var(--figures); }
.fig { font-family: var(--font-display); font-stretch: var(--stretch-display); font-weight: var(--weight-display); font-variant-numeric: var(--figures); line-height: 1.05; }

/* ── The wordmark's segments (wordmark-segments.svg) ────────────────── */
.mark { display: block; width: auto; overflow: visible; }
.mark .g { opacity: var(--ghost); }

/* ── Segment readouts: digits drawn from the wordmark's skeleton (site.js). Without JavaScript the
   figure is plain Anek text at the same size. ──────────────────────── */
.seg { --sh: 24px; display: inline-flex; align-items: flex-end; font-family: var(--font-display); font-stretch: var(--stretch-display); font-weight: var(--weight-display); font-variant-numeric: var(--figures); font-size: calc(var(--sh) * 1.32); line-height: 1; white-space: nowrap; }
.seg svg { display: block; height: var(--sh); width: auto; overflow: visible; }
.seg .g { fill: currentColor; opacity: var(--ghost); }
.seg .l { fill: currentColor; }

/* ── The loading mark: one segment eight, its light running a figure of eight ── */
.chase { height: 1.15em; width: auto; overflow: visible; flex: none; }
.chase .cg { fill: currentColor; opacity: var(--ghost); }
.chase .c { fill: currentColor; opacity: 0; animation: chase 1.04s linear infinite; animation-delay: calc(var(--i) * .13s - 1.04s); }
@keyframes chase { 0%, 10% { opacity: 1; } 42%, 100% { opacity: 0; } }

/* ── Splash: the readout powers on, then flies into the dispenser (site.js) ── */
.splash { display: none; }
.boot .splash { display: grid; place-items: center; position: fixed; inset: 0; z-index: 100; background: var(--tile); color: var(--tile-ink); --ghost: .14; animation: bail .3s 5s forwards; }
.splash-mark .mark { height: clamp(88px, 24vw, 168px); }
.splash .s { opacity: .14; animation: strike .26s linear forwards; animation-delay: calc(.15s + var(--i) * .045s); }
.splash .s.g { animation: strike .26s linear forwards, drop .01s linear forwards; animation-delay: calc(.15s + var(--i) * .045s), 1.06s; }
.splash .s.dp { animation-delay: 1.14s; }
.splash-wait { position: absolute; left: 0; right: 0; bottom: max(14vh, 64px); display: flex; justify-content: center; align-items: center; gap: 10px; font-family: var(--font-utility); font-weight: var(--weight-utility); font-size: var(--text-label); letter-spacing: var(--tracking-label); color: #9BA79F; opacity: 0; animation: appear .3s 1.7s forwards; }
.splash-wait .chase { height: 22px; }
.splash.leaving .splash-wait { display: none; }
@keyframes strike { 0% { opacity: .14; } 25% { opacity: 1; } 45% { opacity: .5; } 65%, 100% { opacity: 1; } }
@keyframes drop { to { opacity: .14; } }
@keyframes appear { to { opacity: 1; } }
@keyframes bail { to { opacity: 0; visibility: hidden; } }
@keyframes unhide { to { visibility: visible; } }
/* Under the splash the dispenser's own mark waits; if the script never runs, both resolve at 5s. */
.boot .pump-mark .mark { visibility: hidden; animation: unhide 0s 5s forwards; }

/* A mark that powers on where it stands (the dispenser without a splash, and the footer) */
.armed .pump:not(.lit) .mark .s, .armed .foot-mark:not(.lit) .mark .s { opacity: var(--ghost); }
.pump.on .mark .s, .foot-mark.on .mark .s { animation: strike .22s linear forwards; animation-delay: calc(var(--i) * .032s); }
.pump.on .mark .s.g, .foot-mark.on .mark .s.g { animation: strike .22s linear forwards, drop .01s linear forwards; animation-delay: calc(var(--i) * .032s), .7s; }
.pump.on .mark .s.dp, .foot-mark.on .mark .s.dp { animation-delay: .78s; }

/* ── Header ──────────────────────────────────────────────────────────── */
.top { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: var(--space-4); min-height: 56px; padding: var(--space-2) var(--gutter); padding-top: calc(var(--space-2) + var(--safe-top)); background: var(--housing); border-bottom: var(--rule-width) solid var(--hairline); }
.brand { display: inline-flex; color: var(--segment); }
.wordmark { display: block; height: 26px; width: auto; }
.links { display: none; gap: var(--space-5); margin-left: var(--space-4); }
.links a { text-decoration: none; font-weight: var(--weight-medium); }
.links a:hover { text-decoration: underline; text-underline-offset: 4px; }
@media (min-width: 960px) { .links { display: flex; } }
.top .key-start { margin-left: auto; }

/* ── Keys ────────────────────────────────────────────────────────────── */
.key { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); min-height: var(--key-height); padding: 0 var(--space-5); border-radius: var(--radius-key); font: inherit; font-weight: var(--weight-strong); font-size: 18px; text-decoration: none; cursor: pointer; white-space: nowrap; }
.key.small { min-height: 40px; padding: 0 var(--space-4); font-size: var(--text-sm); }
.key.block { width: 100%; }
.key-primary { background: var(--led); color: var(--on-led); border: 2px solid var(--key-edge); }
.key-primary:active { background: var(--led-press); }
.key-secondary { background: transparent; color: var(--segment); border: 2px solid var(--segment); }
.key-start { background: var(--segment); color: var(--housing); border: 2px solid var(--segment); }
.k-wait { display: none; }
.sending .k-word { display: none !important; }
.sending .k-wait { display: inline-flex; align-items: center; gap: 10px; }
.k-wait .chase { height: 22px; }

/* ── Chips ───────────────────────────────────────────────────────────── */
.state { display: inline-flex; align-items: center; min-height: 28px; padding: 0 var(--space-2); border-radius: var(--radius-chip); font-size: var(--text-sm); font-weight: var(--weight-medium); white-space: nowrap; }
.state.live { background: var(--paid); color: var(--housing); }
.state.live::before { content: "✓ "; white-space: pre; }
/* Coming is not Billy's hand: carbon stays for drafts, so Coming is a plain etched outline. */
.state.coming { border: 2px solid var(--etch); color: var(--segment); }
.state.small { min-height: 24px; font-size: 13px; }
.chip { display: inline-flex; align-items: center; gap: 4px; min-height: 28px; padding: 0 var(--space-2); border-radius: var(--radius-chip); font-size: var(--text-sm); font-weight: var(--weight-medium); white-space: nowrap; transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.chip.draft { border: 2px dashed var(--carbon); color: var(--carbon); }
.chip.due { border: 2px solid var(--due); color: var(--due); }
.chip.part { border: 2px solid var(--due); color: var(--due); background: linear-gradient(var(--paid), var(--paid)) bottom left / var(--share, 0%) 4px no-repeat; }
.chip.paid { background: var(--paid); color: var(--housing); }
.chip.overdue { background: var(--overdue); color: var(--housing); }
.plate { display: inline-flex; align-items: center; min-height: 34px; padding: 0 10px; border: 1.5px solid var(--plate-edge); border-radius: 3px; background: var(--plate-commercial); color: var(--plate-ink); font-family: var(--font-utility); font-weight: var(--weight-utility); font-size: 16px; letter-spacing: .04em; white-space: nowrap; }

/* ── Hero: the copy and the dispenser face ───────────────────────────── */
.hero { display: grid; gap: var(--space-6); padding-block: var(--space-5) var(--space-8); }
.hero > * { min-width: 0; }
.hero .pump { order: -1; }
/* Sections laid out as grids carry the 1200px cap in their own padding, so their edges line up with the rest. */
.hero, .mcp, .price, .pilot { padding-inline: max(var(--gutter), calc((100% - var(--page-max)) / 2)) !important; }
.hero > *, .mcp > *, .price > *, .pilot > * { max-width: none; margin: 0; }
@media (min-width: 960px) {
  .hero { grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); align-items: start; gap: var(--space-7); padding-block: var(--space-7) var(--space-8); }
  .hero .pump { order: 0; }
}
.hero-copy { display: grid; gap: var(--space-5); }
.lead { margin: 0; font-size: var(--text-lead); max-width: 40ch; }
.actions { display: flex; gap: var(--space-3); flex-wrap: wrap; }
.sides { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); max-width: 64ch; }
.sides li { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: var(--space-3); align-items: start; }
.sides .state { justify-self: start; }

.pump { margin: 0; display: grid; gap: var(--space-3); width: 100%; max-width: 560px; }
.pump-face { background: var(--tile); color: var(--segment); border: var(--rule-width) solid var(--hairline); border-radius: 12px; padding: clamp(16px, 4vw, 28px); display: grid; gap: var(--space-4); }
.pump-mark .mark { height: clamp(64px, 19vw, 116px); }
.pump-rows { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-2); }
.win { background: var(--window); border: var(--rule-width) solid var(--hairline); border-radius: var(--radius-card); padding: 10px 14px 12px; display: grid; gap: 6px; justify-items: end; min-width: 0; }
.win .lbl { justify-self: start; }
.win-amt { grid-column: 1 / -1; }
.win-amt .seg { --sh: clamp(40px, 12.5vw, 64px); }
.win-ltr .seg, .win-rate .seg { --sh: clamp(24px, 7.2vw, 36px); }
@media (min-width: 560px) {
  .pump-rows { grid-template-columns: minmax(0, 1fr); }
  .win { grid-template-columns: auto minmax(0, 1fr); align-items: end; }
  .win .seg { justify-self: end; }
  .win-ltr .seg { --sh: 46px; }
  .win-rate .seg { --sh: 32px; }
}
.pump-slip { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 10px 14px; border-radius: var(--radius-card); background: var(--segment); color: var(--tile); font-size: var(--text-sm); font-variant-numeric: var(--figures); }
.pump-slip .tick { font-weight: var(--weight-strong); }
.pump-slip .plate { min-height: 28px; font-size: 14px; padding: 0 8px; }
.armed .pump:not(.printed) .pump-slip { visibility: hidden; }
.pump.printing .pump-slip { animation: print .36s var(--ease) both; }
@keyframes print { from { clip-path: inset(0 0 100% 0); transform: translateY(-14px); } to { clip-path: inset(0 0 0 0); transform: none; } }
.zero { margin: 0; color: var(--etch); max-width: 52ch; }
.zero strong { color: var(--segment); background: linear-gradient(currentColor, currentColor) left bottom / 0 2px no-repeat; transition: background-size .5s var(--ease); padding-bottom: 2px; }
.pump.zeroed .zero strong { background-size: 100% 2px; }

.proof { padding-block: var(--space-6) !important; }
.proof p { margin: 0 auto; display: flex; gap: var(--space-4); align-items: center; font-size: var(--text-lead); }
.proof-fig { --sh: 56px; flex: none; }

/* ── The shift register ──────────────────────────────────────────────── */
.register { list-style: none; margin: 0 auto; padding: 0; border-top: 2px solid var(--segment); }
.register > li { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-3); padding-block: var(--space-6); border-bottom: var(--rule-width) solid var(--hairline); }
.when { display: flex; align-items: center; gap: var(--space-3); }
.clock { --sh: 24px; }
.clock-text { font-family: var(--font-utility); font-weight: var(--weight-utility); font-size: var(--text-lead); font-variant-numeric: var(--figures); }
.register .state { justify-self: start; }
@media (min-width: 720px) {
  .register > li { grid-template-columns: 132px minmax(0, 1fr) 110px; gap: var(--space-5); }
  .when { align-self: start; padding-top: 6px; }
  .clock { --sh: 26px; }
  .register .state { justify-self: end; align-self: start; }
}
.entry { display: grid; gap: var(--space-4); min-width: 0; }
.entry p { margin: 0; max-width: 64ch; }
.entry a { text-underline-offset: 4px; }
.demo { min-width: 0; }
.card { background: var(--housing); border: var(--rule-width) solid var(--hairline); border-radius: var(--radius-card); padding: var(--space-4); display: grid; gap: var(--space-3); max-width: 540px; }
.card-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: var(--space-2) var(--space-3); }
.card-head .fig { font-size: var(--text-title); }

/* 06:00 rates: the day's readouts, black segments on glass */
.rates { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.dwin { background: var(--window); border: var(--rule-width) solid var(--hairline); border-radius: var(--radius-card); padding: 10px 14px 12px; display: grid; gap: 6px; justify-items: end; min-width: 150px; }
.dwin .lbl { justify-self: start; }
.dwin .seg { --sh: 34px; }

/* 09:10 the slip */
.plates { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.slip .plate { transition: outline-color var(--dur) var(--ease); outline: 3px solid transparent; outline-offset: 2px; }
.slip .plate.on { outline-color: var(--segment); }
.slip-figs { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-3); }
.slip-figs > div { display: grid; gap: 4px; padding: 8px 12px; background: var(--window); border-radius: var(--radius-key); border: var(--rule-width) solid var(--hairline); }
.slip-figs .fig { font-size: 30px; text-align: right; min-height: 1.05em; }
.slip-figs .typing::after { content: ""; display: inline-block; width: 2px; height: .8em; margin-left: 3px; background: var(--segment); vertical-align: -2px; animation: caret .8s steps(1) infinite; }
@keyframes caret { 50% { opacity: 0; } }
.toastline { margin: 0; justify-self: start; display: inline-flex; gap: var(--space-3); align-items: center; background: var(--segment); color: var(--housing); padding: var(--space-2) var(--space-3); border-radius: var(--radius-card); font-size: var(--text-sm); }
.toastline .undo { font-weight: var(--weight-strong); text-decoration: underline; text-underline-offset: 3px; }
.armed .slip:not(.toasted) .toastline { visibility: hidden; }
.slip.toasted .toastline { animation: rise var(--dur-fast) var(--ease); }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* 11:30 the payment, applied oldest first */
.bills { list-style: none; margin: 0; padding: 0; }
.bills li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px var(--space-3); padding: 10px 0; border-top: var(--rule-width) solid var(--hairline); align-items: center; }
.b-name { font-weight: var(--weight-strong); }
.b-name small { font-weight: var(--weight-body); color: var(--etch); font-size: var(--text-sm); margin-left: 4px; }
.b-out { font-size: var(--text-title); justify-self: end; padding-bottom: 6px; background: linear-gradient(var(--segment), var(--segment)) left bottom 3px / 0 1px no-repeat, linear-gradient(var(--segment), var(--segment)) left bottom 0 / 0 1px no-repeat; transition: background-size var(--dur-fast) var(--ease); }
.b-out.settled { background-size: 100% 1px, 100% 1px; }
.b-chip { grid-column: 1 / -1; }

/* 13:30 Ask Billy */
.askbox { display: grid; gap: var(--space-3); max-width: 620px; padding: var(--space-4); background: var(--housing); border: var(--rule-width) solid var(--hairline); border-radius: var(--radius-card); }
.ask-top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--space-2) var(--space-3); }
.ask-qs { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.ask-qs button { min-height: 40px; padding: 0 var(--space-3); border: 2px solid var(--hairline); border-radius: var(--radius-key); background: none; font: inherit; font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--segment); cursor: pointer; }
.ask-qs button[aria-pressed="true"] { border-color: var(--segment); }
.ask-thread { display: grid; gap: var(--space-2); min-height: 360px; align-content: start; }
.q { margin: 0; justify-self: start; max-width: 100%; background: var(--segment); color: var(--housing); padding: var(--space-2) var(--space-3); border-radius: var(--radius-card); }
.gloss { margin: 0 0 var(--space-2); font-size: var(--text-sm); color: var(--etch); }
.a { display: grid; gap: var(--space-2); padding: var(--space-3) var(--space-4); border: var(--rule-width) solid var(--hairline); border-radius: var(--radius-card); background: var(--glass); }
.a p { margin: 0; }
.a-fig { font-family: var(--font-display); font-stretch: var(--stretch-display); font-weight: var(--weight-display); font-size: var(--figure-lg); line-height: 1; font-variant-numeric: var(--figures); }
.a-wait { display: flex; align-items: center; gap: 10px; color: var(--etch); font-size: var(--text-sm); min-height: 44px; }
.a-wait .chase { height: 22px; color: var(--segment); }
.ask-thread.thinking .a > :not(.a-wait) { display: none; }
.ask-thread:not(.thinking) .a-wait { display: none; }
.vbars { display: flex; align-items: flex-end; gap: 3px; height: 120px; padding-top: 22px; border-bottom: var(--rule-width) solid var(--chart-axis); }
.vbars span { position: relative; flex: 1 1 0; min-width: 0; height: calc(var(--v) * 100%); background: var(--chart-rest); transform-origin: bottom; }
.vbars span.ink { background: var(--chart-ink); }
.vbars span b { position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); padding-bottom: 2px; font-size: 13px; font-family: var(--font-utility); font-weight: var(--weight-utility); white-space: nowrap; font-variant-numeric: var(--figures); }
.vbars .avg { position: absolute; left: 0; right: 0; height: 0; border-top: 2px dashed var(--etch); background: none; flex: none; transform: none; }
.vbars { position: relative; }
.vbars .avg i { position: absolute; right: 0; bottom: 4px; font-style: normal; font-size: 13px; color: var(--etch); background: var(--glass); padding: 0 4px; }
.vticks { display: flex; gap: 3px; font-size: 13px; color: var(--etch); font-family: var(--font-utility); font-weight: var(--weight-utility); }
.vticks span { flex: 1 1 0; text-align: center; min-width: 0; }
.ageing { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ageing li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px var(--space-3); font-size: var(--text-sm); }
.ageing li b { font-variant-numeric: var(--figures); }
.ageing .bar { grid-column: 1 / -1; height: 10px; width: calc(var(--v) * 100%); transform-origin: left; border-radius: 1px; }
.ageing .bar.due { background: var(--due); } .ageing .bar.warn { background: var(--warn); } .ageing .bar.bad { background: var(--bad); }
.ageing small { color: var(--etch); }
.grow > * { animation: grow-y .5s var(--ease) both; animation-delay: calc(var(--k, 0) * 22ms); }
.grow-x > * { animation: grow-x .5s var(--ease) both; animation-delay: calc(var(--k, 0) * 80ms); }
@keyframes grow-y { from { transform: scaleY(0); } }
@keyframes grow-x { from { transform: scaleX(0); } }
.fade-in { animation: rise .28s var(--ease) both; }

/* Horizontal bars, labelled directly (fleet question, the MCP chart) */
.bars-h { display: grid; gap: 8px; }
.bh { position: relative; display: flex; justify-content: space-between; gap: var(--space-3); padding-bottom: 12px; font-size: var(--text-sm); }
.bh::before { content: ""; position: absolute; left: 0; bottom: 0; height: 8px; width: calc(var(--v) * 100%); background: var(--chart-rest); border-radius: 1px; transform-origin: left; transition: transform .6s var(--ease); }
.bh.ink::before { background: var(--chart-ink); }
.bh i { font-style: normal; font-family: var(--font-utility); font-weight: var(--weight-utility); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bh b { font-variant-numeric: var(--figures); white-space: nowrap; }
.armed .bars-h:not(.in) .bh::before { transform: scaleX(0); }
.bars-h.in .bh:nth-child(2)::before { transition-delay: .08s; } .bars-h.in .bh:nth-child(3)::before { transition-delay: .16s; } .bars-h.in .bh:nth-child(4)::before { transition-delay: .24s; }

/* 16:00 the dip rod */
.dip { display: grid; gap: var(--space-4); max-width: 560px; }
@media (min-width: 1100px) { .dip { grid-template-columns: 328px minmax(0, 1fr); align-items: center; max-width: none; } }
.dip-rod.undrawn { display: none; }   /* drawn by site.js */
.dip-rod { width: 100%; max-width: 328px; height: auto; overflow: visible; font-family: var(--font-utility); font-weight: var(--weight-utility); }
.dip-rod .tick { stroke: var(--etch); stroke-width: 1.5; }
.dip-rod .tl { fill: var(--etch); font-size: 13px; text-anchor: end; }
.dip-rod .stick { fill: var(--housing); stroke: var(--segment); stroke-width: 2; }
.dip-band { fill: var(--chart-band); }
.dip-level { fill: var(--chart-ink); }
.dip-meter { stroke: var(--segment); stroke-width: 2; stroke-dasharray: 6 5; }
.dip-gap { fill: none; stroke: var(--warn); stroke-width: 2.5; }
.dip-t { font-size: 14px; fill: var(--segment); dominant-baseline: middle; }
.dip-t.warn { fill: var(--warn); }
.fact { margin: 0; padding: var(--space-3) var(--space-4); border: 2px solid var(--warn); border-radius: var(--radius-card); }
.fact::before { content: "◆ "; color: var(--warn); }

/* 21:00 the owner's 9 pm summary: the night card */
.nine { background: var(--tile); color: var(--segment); border: var(--rule-width) solid var(--hairline); border-radius: 12px; padding: var(--space-5); display: grid; gap: var(--space-3); max-width: 600px; }
.nine p { margin: 0; }
.verdict { font-family: var(--font-display); font-stretch: var(--stretch-display); font-weight: var(--weight-display); font-size: var(--text-h2); line-height: 1.1; display: flex; gap: 10px; align-items: baseline; }
.v-glyph { color: var(--good); }
.nine-figs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); }
.nine-figs > div { background: var(--window); border: var(--rule-width) solid var(--hairline); border-radius: var(--radius-card); padding: 8px 12px; display: grid; gap: 2px; min-width: 0; }
.nine-figs .fig { font-size: clamp(24px, 6.5vw, 32px); }
.nine-figs small { color: var(--etch); font-size: 14px; }
@media (min-width: 1100px) { .nine-figs { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.checks li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 6px; }
.checks li::before { content: "✓"; color: var(--good); font-weight: var(--weight-strong); }
.armed .nine:not(.in) .checks li, .armed .nine:not(.in) .tomorrow { opacity: 0; }
.nine.in .checks li, .nine.in .tomorrow { animation: rise .3s var(--ease) both; }
.nine.in .checks li:nth-child(1) { animation-delay: .9s; } .nine.in .checks li:nth-child(2) { animation-delay: 1.15s; } .nine.in .checks li:nth-child(3) { animation-delay: 1.4s; } .nine.in .tomorrow { animation-delay: 1.75s; }
.tomorrow { border-top: var(--rule-width) solid var(--hairline); padding-top: var(--space-3); }

/* 1st and 16th: Billy's draft becomes ink when a person confirms it */
.ready-card { display: flex; flex-wrap: wrap; align-items: center; gap: 8px var(--space-3); max-width: 540px; padding: var(--space-4); border-radius: var(--radius-card); border: 2px solid var(--segment); background: var(--housing); transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease); }
.ready-card b { font-size: var(--text-lead); font-variant-numeric: var(--figures); }
.ready-card .source { flex-basis: 100%; }
.ready-card .chip.draft { display: none; }
.armed .ready:not(.inked) .ready-card { border-style: dashed; border-color: var(--carbon); background: var(--draft-soft); }
.armed .ready:not(.inked) .chip.draft { display: inline-flex; }
.armed .ready:not(.inked) .chip.due { display: none; }
.ready.inked .chip.due { animation: rise var(--dur) var(--ease); }

/* ── The bill on paper (no Billy colours, BRAND.md §8) ───────────────── */
.swatches { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
.swatch-label { font-size: var(--text-sm); color: var(--etch); margin-right: var(--space-2); }
.swatch { width: 44px; height: 44px; border-radius: var(--radius-key); border: 2px solid var(--hairline); cursor: pointer; padding: 0; background: linear-gradient(135deg, var(--a) 50%, var(--b) 50%); }
.swatch[aria-pressed="true"] { outline: 3px solid var(--segment); outline-offset: 2px; }
.paper { --omc-1: #1F2A5C; --omc-2: #E07A2E; container-type: inline-size; background: var(--paper); color: var(--paper-ink); border-radius: 4px; padding: clamp(16px, 4vw, 40px); display: grid; gap: var(--space-5); font-family: var(--font-bill); font-size: 15px; max-width: 880px !important; border: var(--rule-width) solid var(--hairline); }
.paper .muted { color: var(--paper-muted); }
.paper-head { display: flex; gap: var(--space-4); align-items: center; border-bottom: 3px solid var(--omc-1); padding-bottom: var(--space-4); flex-wrap: wrap; transition: border-color var(--dur-slow) var(--ease); }
.paper-head h3 { font-family: var(--font-bill); font-stretch: normal; font-size: 26px; font-weight: 700; }
.paper-head p { margin: 2px 0 0; font-size: 13px; }
.omc-logo { width: 72px; height: 72px; flex: none; border: 2px dashed var(--paper-rule); border-radius: 6px; display: grid; place-items: center; text-align: center; font-size: 10px; line-height: 1.2; padding: 4px; color: var(--paper-muted); }
.paper-bar { height: 4px; background: var(--omc-2); margin-top: calc(-1 * var(--space-5)); transition: background-color var(--dur-slow) var(--ease); }
.paper-meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--space-3) var(--space-5); }
.paper-meta small { display: block; font-size: 12px; color: var(--paper-muted); }
.paper-meta b { display: block; font-size: 16px; }
.paper-summary { display: grid; gap: var(--space-4); }
@container (min-width: 520px) { .paper-summary { grid-template-columns: minmax(0, 1fr) auto; } }
.sum { border: 1px solid var(--paper-rule); border-radius: 6px; }
.sum div { display: flex; justify-content: space-between; gap: var(--space-3); padding: 10px 14px; border-top: 1px solid var(--paper-rule); }
.sum div:first-child { border-top: 0; }
.sum .due { font-weight: 700; font-size: 18px; padding-bottom: 16px; background: linear-gradient(var(--paper-total-rule), var(--paper-total-rule)) left bottom 4px / 100% 1px no-repeat, linear-gradient(var(--paper-total-rule), var(--paper-total-rule)) left bottom 1px / 100% 1px no-repeat; transition: background-size .3s var(--ease); }
.armed .paper:not(.in) .sum > div { opacity: 0; }
.armed .paper:not(.in) .sum .due { background-size: 0 1px, 0 1px; }
.paper.in .sum > div { animation: rise .3s var(--ease) both; }
.paper.in .sum > div:nth-child(2) { animation-delay: .15s; } .paper.in .sum > div:nth-child(3) { animation-delay: .3s; } .paper.in .sum > div:nth-child(4) { animation-delay: .45s; }
.paper.in .sum .due { transition-delay: 1.4s; }
.qr { display: grid; justify-items: center; gap: var(--space-2); text-align: center; max-width: 220px; justify-self: center; }
.qr svg { width: 128px; height: 128px; background: #FFFFFF; padding: 8px; }
.armed .paper:not(.in) .qr svg { clip-path: inset(0 0 100% 0); }
.paper.in .qr svg { animation: scan 1s steps(29) .7s both; }
@keyframes scan { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
.qr small { font-size: 12px; color: var(--paper-muted); }
.paper-foot { display: flex; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; font-size: 12px; color: var(--paper-billy); border-top: 1px solid var(--paper-rule); padding-top: var(--space-3); }
.paper-slips { width: 100%; border-collapse: collapse; font-size: 14px; }
.paper-slips th { text-align: left; font-size: 12px; font-weight: 600; color: var(--paper-muted); padding: 6px 10px 6px 0; border-bottom: 2px solid var(--omc-1); white-space: nowrap; }
.paper-slips td { padding: 7px 10px 7px 0; border-bottom: 1px solid var(--paper-rule); white-space: nowrap; }
.paper-slips :is(th, td):nth-child(n+5) { text-align: right; }
.paper-slips :is(th, td):last-child { padding-right: 0; }
.paper-slips tfoot td { color: var(--paper-muted); border-bottom: 0; white-space: normal; text-align: left; padding-top: 10px; }
/* A narrow bill puts each slip on two lines: date · vehicle · litres · amount, then slip no. · fuel · rate. */
@container (max-width: 519px) {
  .paper-slips thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .paper-slips tbody tr { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto auto; column-gap: 8px; padding-block: 6px; border-bottom: 1px solid var(--paper-rule); }
  .paper-slips tbody td { padding: 0; border: 0; }
  .paper-slips tbody td:nth-child(1) { grid-area: 1 / 1; }
  .paper-slips tbody td:nth-child(2) { grid-area: 2 / 1; color: var(--paper-muted); }
  .paper-slips tbody td:nth-child(3) { grid-area: 1 / 2; }
  .paper-slips tbody td:nth-child(4) { grid-area: 2 / 2; color: var(--paper-muted); }
  .paper-slips tbody td:nth-child(5) { grid-area: 1 / 3; }
  .paper-slips tbody td:nth-child(6) { grid-area: 2 / 3 / 3 / 5; color: var(--paper-muted); }
  .paper-slips tbody td:nth-child(7) { grid-area: 1 / 4; font-weight: 600; }
  .paper-slips tbody td:nth-child(2)::before { content: "Slip "; }
  .paper-slips tbody td:nth-child(5)::after { content: " L"; }
  .paper-slips tbody td:nth-child(6)::before { content: "at ₹"; }
  .paper-slips tbody td:nth-child(6)::after { content: "/L"; }
  .paper-slips tbody td:nth-child(7)::before { content: "₹"; }
  .paper-slips tfoot, .paper-slips tfoot tr, .paper-slips tfoot td { display: block; }
}

/* ── For fleets ──────────────────────────────────────────────────────── */
.msg { background: var(--housing); border: var(--rule-width) solid var(--hairline); border-radius: var(--radius-card); padding: var(--space-3) var(--space-4); display: grid; gap: var(--space-2); }
.slipmsg { display: flex; flex-wrap: wrap; align-items: center; gap: 4px var(--space-3); }
.slipmsg strong { font-weight: var(--weight-strong); }
.slipmsg .working { flex-basis: 100%; }

/* One slip, both sides: a stage pinned for a few screens, scrubbed by the scroll (site.js).
   Without the script, under reduced motion, or on a screen too short, it is simply the finished picture. */
.relay-pin { position: relative; margin-bottom: var(--space-6); }
.relay-stage { display: grid; gap: var(--space-4); align-content: center; }
.relay { position: relative; display: grid; gap: var(--space-6); }
@media (min-width: 720px) { .relay { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(48px, 9vw, 120px); align-items: start; } }
.phone { background: var(--window); border: var(--rule-width) solid var(--hairline); border-radius: 14px; padding: var(--space-3); display: grid; gap: var(--space-2); align-content: start; min-width: 0; }
.phone-head { margin: 0; display: flex; justify-content: space-between; align-items: center; gap: var(--space-2); padding: 0 4px; }
.phone .feed { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.relay-path { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; display: none; }
.relay .phone { position: relative; z-index: 1; }
.relay-path path { fill: none; stroke: var(--etch); stroke-width: 2; stroke-dasharray: 5 6; }
.flier { position: absolute; left: 0; top: 0; z-index: 2; display: none; box-shadow: none; border-color: var(--segment); will-change: transform; }
.relay-cap { margin: 0; display: flex; gap: var(--space-4); align-items: flex-start; max-width: 70ch; color: var(--etch); }
.relay-cap .clock { --sh: 22px; color: var(--segment); flex: none; margin-top: 3px; }
.armed .relay-path { display: block; }
.armed .flier { display: flex; visibility: hidden; }
.relay-pin.pinned { height: 300vh; }
.relay-pin.pinned .relay-stage { position: sticky; top: 56px; height: calc(100vh - 56px); height: calc(100svh - 56px); }

.ask-static { display: grid; gap: var(--space-2); max-width: 620px; }
.pump-side { color: var(--etch); }
.pump-side b { color: var(--segment); font-weight: var(--weight-strong); }
.pump-side b::after { content: ":"; }
.statement { display: grid; gap: var(--space-2); max-width: 56ch; padding: var(--space-4); background: var(--housing); border: var(--rule-width) solid var(--hairline); border-radius: var(--radius-card); }
.statement ul { list-style: none; margin: 0; padding: 0; }
.statement li { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-3); padding-block: var(--space-2); border-top: var(--rule-width) solid var(--hairline); }
.statement li .plate { min-height: 30px; padding: 0 8px; font-size: var(--text-sm); }
.statement :is(li, .total) > b { margin-left: auto; font-variant-numeric: var(--figures); white-space: nowrap; }
.statement .total { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-3); margin: 0; padding: var(--space-2) 0 var(--space-3); border-top: 2px solid var(--segment); font-weight: var(--weight-strong);
  background: linear-gradient(var(--segment), var(--segment)) left bottom 4px / 100% 1px no-repeat, linear-gradient(var(--segment), var(--segment)) left bottom 1px / 100% 1px no-repeat; transition: background-size .3s var(--ease) .9s; }
.armed .statement:not(.in) li { opacity: 0; }
.armed .statement:not(.in) .total { background-size: 0 1px, 0 1px; }
.statement.in li { animation: rise .3s var(--ease) both; }
.statement.in li:nth-child(2) { animation-delay: .12s; } .statement.in li:nth-child(3) { animation-delay: .24s; } .statement.in li:nth-child(4) { animation-delay: .36s; }
.demand { display: grid; gap: var(--space-4); margin-top: var(--space-7); padding-top: var(--space-6); border-top: 2px solid var(--segment); }
.demand h3 { font-size: var(--text-h2); }
.demand p { margin: 0; max-width: 62ch; }
.demand .demand-lead { font-size: var(--text-lead); }
.demand .key { white-space: normal; text-align: center; }
@media (max-width: 420px) { .demand .key { width: 100%; } }

/* ── The network ─────────────────────────────────────────────────────── */
/* Phones: the slip's path is the spine (pump, ledger, fleet); the owner and the AI apps follow as cards. */
.net { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "pump" "ls1" "billy" "ls2" "fleet" "owner" "mcp"; gap: 0; }
.net .n-owner { margin-top: var(--space-5); }
.net .n-mcp { margin-top: var(--space-3); }
.net :is(.l-ask, .l-mcp, .l-upi) { display: none; }
.node { display: grid; gap: 4px; align-content: start; padding: var(--space-4); background: var(--housing); border: var(--rule-width) solid var(--hairline); border-radius: var(--radius-card); min-width: 0; }
.node b { font-size: var(--text-lead); line-height: 1.25; }
.node > span:not(.lbl):not(.state) { color: var(--etch); font-size: var(--text-sm); }
.node .state { justify-self: start; margin-top: 4px; }
.n-pump { grid-area: pump; } .n-fleet { grid-area: fleet; } .n-owner { grid-area: owner; } .n-mcp { grid-area: mcp; }
.n-billy { grid-area: billy; background: var(--tile); color: var(--segment); justify-items: start; }
.n-billy .wordmark { height: 30px; margin-bottom: 6px; }
.l-slip-1 { grid-area: ls1; } .l-slip-2 { grid-area: ls2; } .l-ask { grid-area: lask; } .l-mcp { grid-area: lmcp; } .l-upi { grid-area: upi; }
/* Links: a ruled line with its word, drawn when the diagram comes into view. Vertical by default. */
.link { position: relative; min-height: 56px; display: grid; place-items: center; }
.link::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 0; border-left: 2px solid var(--segment); transform-origin: top; transition: transform .45s var(--ease); }
.link i { position: relative; font-style: normal; font-family: var(--font-utility); font-weight: var(--weight-utility); font-size: var(--text-label); color: var(--etch); background: var(--glass); padding: 2px 8px; letter-spacing: var(--tracking-label); }
.link::after { content: ""; position: absolute; left: calc(50% - 6px); width: 10px; height: 10px; background: var(--segment); transform: skewX(-8deg); opacity: 0; }
.l-upi::before { border-left-style: dashed; }
.l-upi i { color: var(--segment); }
.armed .net:not(.in) .link::before { transform: scaleY(0); }
.net.in .l-slip-1::before { transition-delay: .1s; } .net.in .l-slip-2::before { transition-delay: .45s; } .net.in .l-upi::before { transition-delay: .8s; } .net.in .l-ask::before { transition-delay: 1.1s; } .net.in .l-mcp::before { transition-delay: 1.3s; }
.net.in :is(.l-slip-1, .l-slip-2)::after { animation: travel-y .7s var(--ease) both; }
.net.in .l-slip-1::after { animation-delay: .6s; } .net.in .l-slip-2::after { animation-delay: 1.1s; }
@keyframes travel-y { 0% { top: 0; opacity: 1; } 90% { opacity: 1; } 100% { top: calc(100% - 10px); opacity: 0; } }
.net-foot { margin: var(--space-5) auto 0; display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-3); align-items: center; }
@media (min-width: 960px) {
  .net { grid-template-columns: minmax(0, 1fr) 96px minmax(0, 1fr) 96px minmax(0, 1fr); grid-template-areas:
    ".    .   owner .   .    "
    ".    .   lask  .   .    "
    "pump ls1 billy ls2 fleet"
    ".    .   lmcp  .   .    "
    ".    .   mcp   .   .    "; }
  .link { min-height: 48px; }
  .net :is(.l-ask, .l-mcp) { display: grid; }
  .net .n-owner, .net .n-mcp { margin-top: 0; }
  .l-slip-1, .l-slip-2 { min-height: 0; align-self: center; height: 48px; }
  .l-slip-1::before, .l-slip-2::before { left: 0; right: 0; top: 50%; bottom: auto; width: auto; border-left: 0; border-top: 2px solid var(--segment); transform-origin: left; }
  .armed .net:not(.in) :is(.l-slip-1, .l-slip-2)::before { transform: scaleX(0); }
  .net.in :is(.l-slip-1, .l-slip-2)::after { animation-name: travel-x; }
  .l-slip-1::after, .l-slip-2::after { top: calc(50% - 5px); left: 0; }
  .net-foot { justify-content: center; }
}
@keyframes travel-x { 0% { left: 0; opacity: 1; } 90% { opacity: 1; } 100% { left: calc(100% - 10px); opacity: 0; } }

/* ── MCP ─────────────────────────────────────────────────────────────── */
.mcp { display: grid; gap: var(--space-6); }
@media (min-width: 960px) { .mcp { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; } }
.mcp-copy { display: grid; gap: var(--space-4); }
.caps { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--segment); }
.caps li { padding: var(--space-3) 0; border-bottom: var(--rule-width) solid var(--hairline); }
.caps .eg { color: var(--etch); }
.aiapp { margin: 0; background: var(--housing); border: var(--rule-width) solid var(--hairline); border-radius: 12px; overflow: hidden; display: grid; }
.aiapp-bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); padding: 10px 14px; border-bottom: var(--rule-width) solid var(--hairline); font-size: var(--text-sm); color: var(--etch); }
.dots { display: inline-flex; gap: 6px; }
.dots i { width: 10px; height: 10px; border-radius: 50%; border: 1.5px solid var(--hairline); }
.conn { margin-left: auto; display: inline-flex; gap: 6px; align-items: center; color: var(--segment); border: 2px solid var(--segment); border-radius: var(--radius-chip); padding: 0 8px; min-height: 28px; }
.aiapp-body { display: grid; gap: var(--space-3); padding: var(--space-4); align-content: start; min-height: 520px; }
.aiapp-body p { margin: 0; }
.aiapp .u { justify-self: end; max-width: 88%; background: var(--segment); color: var(--housing); padding: var(--space-2) var(--space-3); border-radius: var(--radius-card); }
.tool { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-family: var(--font-utility); font-weight: var(--weight-utility); font-size: 14px; color: var(--etch); }
.tool span { color: var(--segment); border: 1.5px solid var(--segment); border-radius: 3px; padding: 0 6px; }
.tool em { font-style: normal; margin-left: auto; }
.ai { display: grid; gap: var(--space-2); }
.draftcard { display: grid; gap: 6px; justify-items: start; padding: var(--space-3) var(--space-4); border: 2px solid var(--segment); border-radius: var(--radius-card); background: var(--housing); transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease); }
.draftcard .chip.draft, .draftcard .dc-wait { display: none; }
.draftcard .dc-wait { color: var(--carbon); font-size: var(--text-sm); }
.draftcard .dc-done { color: var(--good); font-size: var(--text-sm); font-weight: var(--weight-medium); }
.armed .aiapp:not(.confirmed) .draftcard { border-style: dashed; border-color: var(--carbon); background: var(--draft-soft); }
.armed .aiapp:not(.confirmed) .draftcard :is(.chip.draft, .dc-wait) { display: inline-flex; }
.armed .aiapp:not(.confirmed) .draftcard .dc-done { display: none; }
.armed .aiapp:not(.played) .aiapp-body > * { visibility: hidden; }
.aiapp .aiapp-body > .shown { visibility: visible !important; animation: rise .28s var(--ease) both; }

/* ── Promises register ───────────────────────────────────────────────── */
.register-table { width: 100%; border-collapse: collapse; border-top: 2px solid var(--segment); margin: 0 auto; }
.register-table th { text-align: left; font-family: var(--font-utility); font-weight: var(--weight-utility); font-size: var(--text-label); color: var(--etch); padding: var(--space-3) var(--space-3) var(--space-3) 0; text-transform: uppercase; letter-spacing: var(--tracking-label); }
.register-table td { padding: var(--space-4) var(--space-4) var(--space-4) 0; vertical-align: top; background: linear-gradient(var(--hairline), var(--hairline)) left top / 100% 1px no-repeat; transition: background-size .6s var(--ease); }
.register-table td:first-child { font-weight: var(--weight-strong); width: 38%; }
.register-table td .state { margin-left: var(--space-1); vertical-align: middle; }
.armed .register-table:not(.in) td { background-size: 0 1px; }
.register-table.in tr:nth-child(2) td { transition-delay: .07s; } .register-table.in tr:nth-child(3) td { transition-delay: .14s; } .register-table.in tr:nth-child(4) td { transition-delay: .21s; } .register-table.in tr:nth-child(5) td { transition-delay: .28s; } .register-table.in tr:nth-child(6) td { transition-delay: .35s; } .register-table.in tr:nth-child(7) td { transition-delay: .42s; }
@media (max-width: 640px) { .register-table thead { display: none; } .register-table tr { display: grid; gap: var(--space-1); padding-block: var(--space-3); background: linear-gradient(var(--hairline), var(--hairline)) left top / 100% 1px no-repeat; } .register-table td { background: none; padding: 0; width: auto !important; } }
.promises > p { margin-top: var(--space-5); }

/* ── Price and the dip rod ───────────────────────────────────────────── */
.price { display: grid; gap: var(--space-6); }
@media (min-width: 720px) { .price { grid-template-columns: minmax(0, 1fr) 180px; } }
.price-copy { display: grid; gap: var(--space-4); }
.price-copy p { margin: 0; }
.price-fig { display: flex; align-items: flex-end; flex-wrap: wrap; gap: 4px var(--space-3); }
.price-fig .cur { font-size: clamp(40px, 10vw, 72px); line-height: .9; }
.price-fig .seg { --sh: clamp(64px, 17vw, 128px); }
.price-fig .per { font-family: var(--font-body); font-weight: var(--weight-medium); font-size: var(--text-lead); line-height: 1.2; color: var(--etch); padding-bottom: 4px; }
.field { display: grid; gap: 6px; max-width: 280px; }
.field label, .field .label { font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--etch); font-family: var(--font-body); letter-spacing: 0; }
.input { min-height: var(--input-height); padding: 0 var(--space-3); background: var(--housing); border: 2px solid var(--etch); border-radius: var(--radius-key); width: 100%; min-width: 0; font: inherit; color: var(--segment); }
.input.figure { font-family: var(--font-display); font-stretch: var(--stretch-display); font-weight: var(--weight-display); font-size: var(--figure-md); text-align: right; font-variant-numeric: var(--figures); }
.payback { font-size: var(--text-lead); }
.payback strong { font-family: var(--font-display); font-stretch: var(--stretch-display); font-size: var(--figure-md); }
.fleet-line { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); font-weight: var(--weight-medium); }
.rod { position: relative; height: 380px; width: 150px; margin-inline: auto; }
.rod::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 14px; border: 2px solid var(--segment); border-radius: 2px; background: var(--housing); }
.rod-fill { position: absolute; left: 0; bottom: 0; width: 14px; height: 0; background: var(--segment); border-radius: 0 0 2px 2px; transition: height var(--dur-slow) var(--ease); }
.rod-scale span { position: absolute; left: 14px; width: 12px; height: 2px; background: var(--etch); }
.rod-scale span.major { width: 22px; }
.rod-scale span em { position: absolute; left: 30px; top: -10px; font-style: normal; font-size: var(--text-label); color: var(--etch); font-variant-numeric: var(--figures); font-family: var(--font-utility); font-weight: var(--weight-utility); white-space: nowrap; }
.rod-mark { position: absolute; left: 0; right: 0; height: 0; border-top: 3px solid var(--segment); transition: bottom var(--dur-slow) var(--ease); display: flex; justify-content: flex-end; }
.rod-mark .seg { --sh: 28px; position: absolute; right: 18px; bottom: 6px; }
.rod-mark em { position: absolute; right: 0; bottom: 6px; font-style: normal; font-family: var(--font-display); font-stretch: var(--stretch-display); font-weight: var(--weight-display); font-size: 22px; line-height: 1; }

/* ── Pilot ───────────────────────────────────────────────────────────── */
.pilot { display: grid; gap: var(--space-7); }
@media (min-width: 900px) { .pilot { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.story { display: grid; gap: var(--space-4); align-content: start; }
.story p { margin: 0; font-size: var(--text-lead); max-width: 52ch; }
.story p.muted { font-size: var(--text-body); }
.pilot-form { display: grid; gap: var(--space-4); background: var(--housing); border: var(--rule-width) solid var(--hairline); border-radius: var(--radius-card); padding: var(--space-5); min-width: 0; }
.pilot-form .field { max-width: none; }
.field-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
select.input { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--segment) 50%), linear-gradient(135deg, var(--segment) 50%, transparent 50%); background-position: right 18px center, right 12px center; background-size: 6px 6px; background-repeat: no-repeat; }
.seg-pick { display: inline-grid; grid-auto-flow: column; border: 2px solid var(--segment); border-radius: var(--radius-key); overflow: hidden; justify-self: start; }
.seg-pick button { border: 0; background: none; min-height: 44px; padding: 0 var(--space-4); font: inherit; font-weight: var(--weight-medium); color: var(--segment); cursor: pointer; }
.seg-pick button[aria-pressed="true"] { background: var(--segment); color: var(--housing); }
.seg-pick.small button { min-height: 40px; padding: 0 var(--space-3); font-size: var(--text-sm); }
.seg-pick.kind { display: grid; grid-template-columns: 1fr 1fr; grid-auto-flow: row; justify-self: stretch; }
fieldset.path { border: 0; margin: 0; padding: 0; min-width: 0; display: grid; gap: var(--space-4); }
.pilot-form .fleet-row { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
textarea.input { min-height: 104px; padding: var(--space-3); line-height: var(--lh-body); resize: vertical; }
.hint { font-size: var(--text-sm); color: var(--etch); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.notice { margin: 0; font-size: var(--text-sm); color: var(--etch); }
.consent { display: flex; gap: var(--space-3); align-items: center; min-height: var(--target); cursor: pointer; }
.consent input { width: 24px; height: 24px; accent-color: var(--segment); flex: none; }
.consent.optional { align-items: flex-start; }
.consent.optional input { margin-top: 2px; }
.error { margin: 0; color: var(--bad); font-size: var(--text-sm); }
.error::before { content: "! "; font-weight: var(--weight-strong); }
.saved { display: flex; gap: var(--space-3); align-items: center; padding: var(--space-3) var(--space-4); background: var(--segment); color: var(--housing); border-radius: var(--radius-card); animation: rise var(--dur-fast) var(--ease); }
.saved .tick { font-weight: var(--weight-strong); }
.saved-next { display: grid; gap: var(--space-3); }
.saved-next p { margin: 0; }

/* ── FAQ ─────────────────────────────────────────────────────────────── */
.faq > h2 { margin-bottom: var(--space-5); }
.faq details { border-top: var(--rule-width) solid var(--hairline); }
.faq details:last-of-type { border-bottom: var(--rule-width) solid var(--hairline); }
.faq summary { cursor: pointer; padding: var(--space-4) 0; font-weight: var(--weight-strong); min-height: var(--target); list-style: none; display: flex; justify-content: space-between; gap: var(--space-4); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-family: var(--font-display); font-size: var(--text-title); line-height: 1; }
.faq details[open] summary::after { content: "−"; }
.faq details p { margin: 0 0 var(--space-4); max-width: 64ch; }

/* ── Footer: the readout cut once more, lit as the page ends ─────────── */
.foot { padding-block: var(--space-8) calc(var(--space-7) + var(--safe-bottom)); border-top: 2px solid var(--segment); }
.foot-mark { margin-bottom: var(--space-5) !important; }
.foot p + p { margin-top: var(--space-3) !important; }
.foot-mark .mark { height: clamp(88px, 24vw, 200px); }
.foot p { margin-block: 0; }

/* Reduced motion: every moment shows its final state at once (BRAND.md §10). */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .chase .c { opacity: 0; }
  .chase .c:nth-of-type(4) { opacity: 1; }   /* the middle bar: a dash */
}