/* General ERP, "Bright Ops" (production build)
   Light product surface, flat sky + teal data colours, one deep-blue action colour.
   Data colours (--sky, --teal) are set at >= 3:1 against white and --surface-2 (WCAG 1.4.11);
   the logo accent keeps the lighter brand teal (--mark-acc).
   No gradients, no glow, no icon set. CSP-safe: no inline styles anywhere.
   Spacing scale (the only spacing values used): 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 96 px.
   Radius scale: 4 / 8 / 12 px. Tokens documented in DESIGN.md. */

@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("/fonts/PlusJakartaSans-var.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

:root {
  --bg: oklch(0.984 0.004 240);
  --surface: oklch(1 0 0);
  --surface-2: oklch(0.975 0.006 240);
  --ink: oklch(0.21 0.035 258);
  --ink-2: oklch(0.4 0.03 258);
  --muted: oklch(0.5 0.025 258);
  --line: oklch(0.925 0.01 250);
  --line-2: oklch(0.87 0.014 250);

  --sky: oklch(0.6 0.13 232);         /* 3.81:1 on white, 3.54:1 on --surface-2 */
  --sky-soft: oklch(0.93 0.04 232);
  --teal: oklch(0.6 0.1 182);          /* 3.77:1 on white, 3.50:1 on --surface-2 */
  --mark-acc: oklch(0.72 0.12 182);
  --action: oklch(0.47 0.14 250);
  --action-hover: oklch(0.41 0.13 252);
  --on-action: oklch(1 0 0);

  --good: oklch(0.48 0.12 155);
  --hold: oklch(0.5 0.11 65);
  --bad: oklch(0.52 0.17 27);
  --bad-soft: oklch(0.965 0.022 22);
  --bad-bar: oklch(0.64 0.16 27);
  --focus: oklch(0.55 0.17 250);

  --on-ink: oklch(0.88 0.015 250);
  --on-ink-strong: oklch(0.98 0.004 250);
  --ink-rule: oklch(0.34 0.03 258);

  --font: "Plus Jakarta Sans", ui-sans-serif, system-ui, "Segoe UI", sans-serif;

  --t-xs: 0.75rem;      /* 12 */
  --t-ui: 0.8125rem;    /* 13: product UI body */
  --t-sm: 0.875rem;     /* 14 */
  --t-md: 1rem;
  --t-lg: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);
  --t-h4: 1.0625rem;
  --t-h3: clamp(1.375rem, 1.1rem + 1vw, 1.875rem);
  --t-h2: clamp(2rem, 1.45rem + 2vw, 3rem);
  --t-hero: clamp(2.5rem, 1.45rem + 3.4vw, 4.5rem);

  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px;
  --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px;
  --r-sm: 4px; --r-md: 8px; --r-lg: 12px;

  --sh-card: 0 1px 2px oklch(0.25 0.03 255 / 0.05), 0 4px 14px -6px oklch(0.25 0.03 255 / 0.08);
  --sh-float: 0 1px 2px oklch(0.25 0.03 255 / 0.06), 0 18px 40px -14px oklch(0.25 0.04 255 / 0.22);
  --sh-frame: 0 1px 2px oklch(0.25 0.03 255 / 0.06), 0 30px 70px -28px oklch(0.25 0.05 255 / 0.28);

  --wrap: 78rem;
  --gutter: var(--s-4);
  --section: var(--s-8);
  --ease: cubic-bezier(0.22, 0.8, 0.24, 1);
}
@media (min-width: 640px) { :root { --gutter: var(--s-5); } }
@media (min-width: 1024px) { :root { --gutter: var(--s-6); --section: var(--s-9); } }

*, *::before, *::after { box-sizing: border-box; }
/* scroll-padding: focus and anchors never land under the 65px sticky header (2.4.11) or flush with the bottom edge */
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 96px; scroll-padding-bottom: 96px; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font); font-size: var(--t-md); line-height: 1.6; -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4, p, ol, ul, figure { margin: 0; }
ol, ul { padding: 0; list-style: none; }
a { color: var(--action); text-underline-offset: 3px; }
a:hover { color: var(--ink); }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: var(--r-sm); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.wrap { width: min(100% - 2 * var(--gutter), var(--wrap)); margin-inline: auto; }
.skip-link { position: absolute; left: var(--s-4); top: calc(-1 * var(--s-9)); z-index: 50; background: var(--ink); color: var(--surface); padding: var(--s-2) var(--s-4); border-radius: var(--r-sm); }
.skip-link:focus { top: var(--s-4); }
main:focus { outline: none; }
.num { font-variant-numeric: tabular-nums; }
.up { color: var(--good); }
.down { color: var(--bad); }
.cap { margin-top: var(--s-3); font-size: var(--t-xs); font-weight: 600; color: var(--muted); }

/* Brand mark: geometry from favicon.svg */
.brand__mark { width: 28px; height: 28px; flex: none; }
.brand__mark .m-bg { fill: var(--ink); }
.brand__mark .m-ink { fill: var(--surface); }
.brand__mark .m-acc { fill: var(--mark-acc); }

.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 var(--s-5); border: 0; border-radius: var(--r-md); background: var(--action); color: var(--on-action); font: 650 var(--t-sm) / 1 var(--font); text-decoration: none; cursor: pointer; white-space: nowrap; transition: background-color 150ms var(--ease); }
.btn:hover { background: var(--action-hover); color: var(--on-action); }
.btn--sm { min-height: 40px; padding: 0 var(--s-4); }
.text-link { display: inline-flex; align-items: center; min-height: 44px; font-size: var(--t-sm); font-weight: 650; color: var(--ink); text-decoration: underline; text-decoration-color: var(--line-2); text-decoration-thickness: 2px; }
.text-link:hover { text-decoration-color: var(--action); color: var(--ink); }

/* Header */
.site-header { position: sticky; top: 0; z-index: 20; background: var(--bg); border-bottom: 1px solid var(--line); }
.site-header__inner { display: flex; align-items: center; gap: var(--s-6); min-height: 64px; }
.brand { display: inline-flex; align-items: center; gap: var(--s-3); color: var(--ink); text-decoration: none; font-weight: 760; letter-spacing: -0.01em; }
.site-nav { margin-left: auto; }
.site-nav ul { display: flex; gap: var(--s-6); }
.site-nav a { color: var(--ink-2); text-decoration: none; font-size: var(--t-sm); font-weight: 560; }
.site-nav a:hover { color: var(--ink); }

/* Hero */
.hero { padding: var(--s-8) 0 var(--section); overflow-x: clip; }
.hero__head { display: grid; gap: var(--s-5); }
h1 { font-size: var(--t-hero); line-height: 1.04; letter-spacing: -0.03em; word-spacing: 0.04em; font-weight: 760; text-wrap: balance; max-width: 17ch; }
.lede { max-width: 32rem; color: var(--ink-2); font-size: var(--t-lg); }
.hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-5); margin-top: var(--s-5); }
@media (min-width: 1280px) {
  .hero__head { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--s-6); align-items: end; }
  .hero__head h1 { grid-column: 1 / span 8; }
  .hero__aside { grid-column: 9 / span 4; padding-bottom: var(--s-2); }
}

/* Product stage */
.stage { position: relative; margin-top: var(--s-6); padding-top: var(--s-8); }
.stage__cap { text-align: right; }

.app { position: relative; display: grid; grid-template-columns: 200px minmax(0, 1fr); overflow: hidden; background: var(--surface); border-radius: var(--r-lg); border: 1px solid var(--line); box-shadow: var(--sh-frame); font-size: var(--t-ui); line-height: 1.4; animation: rise 800ms 60ms var(--ease) both; }
.app__side { display: flex; flex-direction: column; gap: var(--s-1); padding: var(--s-4) var(--s-3); background: var(--surface-2); border-right: 1px solid var(--line); }
.app__brand { display: flex; align-items: center; gap: var(--s-2); padding: 0 var(--s-2) var(--s-3); }
.app__brand .brand__mark { width: 24px; height: 24px; }
.app__ent b { display: block; font-size: var(--t-ui); font-weight: 720; line-height: 1.2; }
.app__ent small { display: block; font-size: var(--t-xs); color: var(--muted); line-height: 1.3; }
.app__nav { display: grid; gap: 0; }
.app__nav li { padding: var(--s-1) var(--s-3); min-height: 32px; display: flex; align-items: center; border-radius: var(--r-sm); color: var(--ink-2); font-weight: 560; }
.app__nav .is-active { background: var(--surface); color: var(--ink); font-weight: 700; box-shadow: 0 0 0 1px var(--line), 0 1px 2px oklch(0.25 0.03 255 / 0.06); }
.app__nav--foot { margin-top: auto; padding-top: var(--s-2); border-top: 1px solid var(--line); }
.app__user { display: flex; align-items: center; gap: var(--s-2); padding: var(--s-3) var(--s-2) 0; }
.app__user b { display: block; font-size: var(--t-xs); }
.app__user small { display: block; color: var(--muted); font-size: var(--t-xs); }
.avatar { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--sky-soft); color: var(--action); font-weight: 750; font-size: var(--t-xs); }

.app__main { container-type: inline-size; display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; gap: var(--s-4); padding: var(--s-5); min-width: 0; }
.app__top { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: flex-start; gap: var(--s-3) var(--s-5); }
.app__heading { min-width: 11rem; }
.app__controls { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); }
.picker { appearance: none; min-height: 32px; padding: 0 var(--s-6) 0 var(--s-3); border: 1px solid var(--line-2); border-radius: var(--r-md); background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%235b6472' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat right 12px center; color: var(--ink); font: 600 var(--t-xs) / 1 var(--font); cursor: pointer; }
.picker:hover { border-color: var(--muted); }
.app__crumb { color: var(--muted); font-size: var(--t-xs); }
.app__title { font-size: 1.125rem; font-weight: 760; letter-spacing: -0.015em; }
.seg { display: flex; padding: var(--s-1); border-radius: var(--r-md); background: var(--surface-2); border: 1px solid var(--line); }
.seg button { min-height: 24px; padding: 0 var(--s-3); border: 0; border-radius: var(--r-sm); background: transparent; color: var(--muted); font: 600 var(--t-xs) / 1 var(--font); cursor: pointer; }
.seg button:hover { color: var(--ink); }
.seg button[aria-pressed="true"] { background: var(--surface); color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--action), 0 1px 2px oklch(0.25 0.03 255 / 0.12); }

.kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-3); }
.kpi { padding: var(--s-3) var(--s-4); border-radius: var(--r-md); border: 1px solid var(--line); background: var(--surface); }
.kpi__label { font-size: var(--t-xs); font-weight: 600; color: var(--ink-2); }
.kpi__value { margin-top: var(--s-1); font-size: 1.5rem; line-height: 1.2; font-weight: 760; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.kpi__foot { margin-top: var(--s-1); font-size: var(--t-xs); color: var(--muted); }
.delta { margin-right: var(--s-2); font-weight: 700; color: var(--good); font-variant-numeric: tabular-nums; }

.app__row { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-4); }
@container (min-width: 860px) { .app__row { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } }
@container (max-width: 640px) { .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.card { padding: var(--s-4); border-radius: var(--r-md); border: 1px solid var(--line); background: var(--surface); min-width: 0; }
.card__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-3); margin-bottom: var(--s-3); }
.card__title { font-size: var(--t-sm); font-weight: 720; }
.card__meta { font-size: var(--t-xs); color: var(--muted); }

.funnel { display: grid; gap: var(--s-2); }
.funnel li { display: grid; grid-template-columns: 72px 64px minmax(0, 1fr); align-items: center; gap: var(--s-3); }
.funnel__k { color: var(--ink-2); font-weight: 560; }
.funnel__v { text-align: right; font-weight: 720; font-variant-numeric: tabular-nums; }
.funnel__track { height: 12px; border-radius: 2px; background: var(--surface-2); }
.funnel__bar { display: block; height: 100%; border-radius: 2px; background: var(--sky); transform-origin: left; animation: grow 900ms var(--ease) both; transition: width 450ms var(--ease); }
.f1 .funnel__bar { width: 100%; animation-delay: 250ms; }
.f2 .funnel__bar { width: 45.1%; animation-delay: 330ms; }
.f3 .funnel__bar { width: 38.3%; animation-delay: 410ms; }
.f4 .funnel__bar { width: 38.3%; animation-delay: 490ms; background: var(--teal); }
.f5 .funnel__bar { width: 33.7%; animation-delay: 570ms; background: var(--teal); }

.tbl { width: 100%; border-collapse: collapse; font-size: var(--t-ui); }
.tbl th { padding: 0 var(--s-2) var(--s-2) 0; text-align: left; font-weight: 600; color: var(--muted); font-size: var(--t-xs); white-space: nowrap; }
.tbl td { padding: var(--s-2) var(--s-2) var(--s-2) 0; border-top: 1px solid var(--line); white-space: nowrap; }
.tbl td:first-child { font-weight: 620; }
.tbl .num { text-align: right; font-variant-numeric: tabular-nums; }
.tbl th:last-child, .tbl td:last-child { padding-right: 0; }
.tbl--app .c-job, .tbl--app .c-src { color: var(--ink-2); }
.tbl--app th.c-st, .tbl--app td.c-st { text-align: right; }
.tbl--app th:first-child, .tbl--app td:first-child { padding-left: var(--s-2); }
.tbl--app th, .tbl--app td, .tbl--app .st { white-space: normal; }
.tbl--app .num { white-space: nowrap; }
.tbl--app tbody tr { cursor: default; }
.tbl--app tbody tr:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.tbl--app tbody tr.is-traced td { background: var(--surface-2); }
.tbl--app tbody tr.is-traced td:first-child { box-shadow: inset 3px 0 0 var(--action); }
.tbl .is-total td { border-top: 1.5px solid var(--ink); font-weight: 720; color: var(--ink); }
@container (max-width: 560px) { .tbl--app .c-job, .tbl--app .c-src { display: none; } }

/* Status: coloured text with a small square, not pill badges */
.st { font-weight: 650; white-space: nowrap; }
.st::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: var(--s-2); border-radius: 2px; background: currentColor; vertical-align: 0.05em; }
.st--good { color: var(--good); }
.st--hold { color: var(--hold); }
.st--bad { color: var(--bad); }
.st--muted { color: var(--muted); }
.st--blank::before { display: none; }
.st__date { white-space: nowrap; }

/* The one floating card: payment trace */
.float { position: relative; margin-top: var(--s-3); padding: var(--s-3) var(--s-4) var(--s-4); border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--sh-float); font-size: var(--t-ui); line-height: 1.4; }
.float.is-swap .float__line, .float.is-swap .trace { animation: swap 380ms var(--ease) both; }
/* Two rows: status + Pause, then amount + the full customer name (never truncated, D4) */
.float__line { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: baseline; column-gap: var(--s-3); row-gap: var(--s-1); min-width: 0; }
.float__who { grid-column: 2 / -1; grid-row: 2; min-width: 0; overflow-wrap: break-word; }
.float__pause { grid-column: 3; grid-row: 1; align-self: center; justify-self: end; min-height: 24px; padding: 0 var(--s-2); border: 1px solid var(--line-2); border-radius: var(--r-sm); background: var(--surface); color: var(--ink-2); font: 600 var(--t-xs) / 1 var(--font); cursor: pointer; }
.float__pause:hover { color: var(--ink); border-color: var(--muted); }
.float.is-due .trace .is-now::before { background: var(--hold); border-color: var(--hold); }
.float.is-late .trace .is-now::before { background: var(--bad); border-color: var(--bad); }
.float.is-late .trace .is-now { color: var(--bad); }
.float__k { grid-column: 1 / 3; grid-row: 1; align-self: center; font-size: var(--t-xs); font-weight: 650; color: var(--muted); }
.float__line b { grid-column: 1; grid-row: 2; font-size: 1.125rem; font-weight: 760; letter-spacing: -0.015em; font-variant-numeric: tabular-nums; }
.trace { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: var(--s-3); }
.trace::before { content: ""; position: absolute; left: var(--s-1); right: 24%; top: var(--s-1); height: 1px; background: var(--line-2); }
.trace li { position: relative; display: grid; padding-top: var(--s-4); color: var(--ink-2); font-size: var(--t-xs); white-space: nowrap; }
.trace li::before { content: ""; position: absolute; left: 0; top: 0; width: 8px; height: 8px; border-radius: 50%; background: var(--surface); border: 1.5px solid var(--sky); }
.trace b { font-weight: 650; color: var(--muted); font-variant-numeric: tabular-nums; }
.trace .is-now { color: var(--ink); font-weight: 650; }
.trace .is-now::before { background: var(--teal); border-color: var(--teal); }
@media (min-width: 1280px) {
  .stage { padding-top: calc(var(--s-8) + var(--s-4)); }
  .float { position: absolute; z-index: 3; top: 0; right: calc(-1 * var(--s-5)); width: 420px; margin-top: 0; animation: rise 700ms 650ms var(--ease) both; }
}

/* Section titles */
.section-title { max-width: 18ch; font-size: var(--t-h2); line-height: 1.08; letter-spacing: -0.03em; word-spacing: 0.03em; font-weight: 760; text-wrap: balance; }

/* What changes */
.outcomes { padding: var(--section) 0; background: var(--surface); border-top: 1px solid var(--line); }
.show { display: grid; gap: var(--s-5); padding: var(--s-7) 0; border-top: 1.5px solid var(--ink); }
.show:first-of-type { margin-top: var(--s-7); }
.show:last-of-type { padding-bottom: 0; }
.show__num { font-size: var(--t-sm); font-weight: 700; color: var(--action); font-variant-numeric: tabular-nums; }
.show h3 { margin-top: var(--s-3); font-size: var(--t-h3); line-height: 1.12; letter-spacing: -0.025em; word-spacing: 0.03em; font-weight: 740; text-wrap: balance; }
.show__text > p:last-child { margin-top: var(--s-4); max-width: 28rem; color: var(--ink-2); font-size: var(--t-lg); }
.show__ui { min-width: 0; }
@media (min-width: 1100px) {
  .show { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--s-6); align-items: start; }
  .show__text { grid-column: 1 / span 4; }
  .show__ui { grid-column: 6 / span 7; }
}

.panel { padding: var(--s-5); border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line-2); box-shadow: var(--sh-card); font-size: var(--t-sm); overflow-x: auto; }
.panel__title { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: var(--s-1) var(--s-3); margin-bottom: var(--s-4); font-weight: 720; font-size: 0.9375rem; }
.panel__title span { font-weight: 600; font-size: var(--t-ui); color: var(--muted); }
.panel__note { margin-top: var(--s-3); font-size: var(--t-xs); color: var(--muted); }
.tbl--lg { font-size: var(--t-sm); }
.tbl--lg th { font-size: var(--t-xs); }
.tbl--lg td { padding: var(--s-3) var(--s-2) var(--s-3) 0; }
.tbl--lg td:first-child { white-space: normal; }

/* Plan -> actual bridge. Axis: $96,000 (0%) to $108,000 (100%). */
.bridge__head { margin-bottom: var(--s-5); font-size: 1.25rem; line-height: 1.3; letter-spacing: -0.015em; word-spacing: 0.02em; font-weight: 740; text-wrap: balance; }
.bridge__row, .bridge__axis { display: grid; grid-template-columns: minmax(0, 13rem) minmax(0, 1fr) 6rem; align-items: center; column-gap: var(--s-4); padding: var(--s-3) var(--s-2); }
.bridge__row { border-top: 1px solid var(--line); color: var(--ink-2); }
.bridge__row--anchor { color: var(--ink); font-weight: 720; }
.bridge__row--total { border-top: 1.5px solid var(--ink); }
.bridge__row--flag { background: var(--bad-soft); color: var(--ink); font-weight: 650; }
.bridge__flag { display: block; font-size: var(--t-xs); font-weight: 700; color: var(--bad); }
.bridge__val { text-align: right; font-weight: 720; font-variant-numeric: tabular-nums; }
.bridge__track, .bridge__axis-track { position: relative; height: 16px; }
.bridge__bar, .bridge__mark { position: absolute; top: 0; bottom: 0; border-radius: 2px; }
.bridge__mark { width: 3px; background: var(--ink); }
.bridge__bar--up { background: var(--teal); }
.bridge__bar--down { background: var(--bad-bar); }
.b-plan { left: 67.92%; }
.b-1 { left: 67.92%; width: 17.58%; }
.b-2 { left: 85.5%; width: 5.33%; }
.b-3 { left: 8.33%; width: 82.5%; }
.b-4 { left: 2.58%; width: 5.75%; }
.b-act { left: 2.58%; }
.bridge__axis { padding-top: var(--s-2); padding-bottom: 0; border-top: 1px solid var(--line); }
.bridge__axis-track { grid-column: 2; font-size: var(--t-xs); color: var(--muted); font-variant-numeric: tabular-nums; }
.bridge__axis-track span { position: absolute; top: 0; line-height: 16px; white-space: nowrap; }
.bridge.is-armed .bridge__bar { transform: scaleX(0); }
.bridge.is-armed .bridge__mark { opacity: 0; transform: scaleY(0.2); }
.bridge__bar--up { transform-origin: left center; }
.bridge__bar--down { transform-origin: right center; }
.bridge.is-run .bridge__bar, .bridge.is-run .bridge__mark { transform: none; opacity: 1; transition: transform 520ms var(--ease), opacity 300ms var(--ease); }
.bridge.is-run .b-plan { transition-delay: 0ms; }
.bridge.is-run .b-1 { transition-delay: 300ms; }
.bridge.is-run .b-2 { transition-delay: 600ms; }
.bridge.is-run .b-3 { transition-delay: 900ms; transition-duration: 760ms; }
.bridge.is-run .b-4 { transition-delay: 1500ms; }
.bridge.is-run .b-act { transition-delay: 1850ms; }
.bridge__row--flag { position: relative; }
.bridge__row--flag::after { content: ""; position: absolute; inset: 0; border: 2px solid var(--bad); border-radius: var(--r-sm); opacity: 0; pointer-events: none; }
.bridge.is-run .bridge__row--flag::after { animation: pulse 1100ms 2300ms var(--ease) 1 both; }
.t-0 { left: 0; }
.t-1 { left: 33.33%; transform: translateX(-50%); }
.t-2 { left: 66.67%; transform: translateX(-50%); }
.t-3 { right: 0; }

/* Lease schedule */
.sched { display: grid; grid-template-columns: 3.5rem minmax(0, 1fr) 6.5rem minmax(0, auto); align-items: center; column-gap: var(--s-4); padding: var(--s-3) 0; border-top: 1px solid var(--line); }
.sched__date { color: var(--muted); font-weight: 600; font-variant-numeric: tabular-nums; }
.sched__amt { text-align: right; font-weight: 650; font-variant-numeric: tabular-nums; }
.sched .st { justify-self: end; }

/* Modules: editorial index, grouped */
.modules { padding: var(--section) 0; background: var(--bg); border-top: 1px solid var(--line); }
.modules__head { display: grid; gap: var(--s-5); }
.modules__scale { font-size: var(--t-lg); font-weight: 650; color: var(--ink); }
.modules__intro p + p { margin-top: var(--s-2); color: var(--ink-2); }
.story { display: flex; flex-direction: column; margin-top: var(--s-7); }
.story__steps, .story__stage { display: contents; }
.story__label { display: none; }
.group { padding: var(--s-6) 0 var(--s-5); border-top: 1.5px solid var(--ink); }
.group__name { font-size: var(--t-h3); line-height: 1.15; letter-spacing: -0.025em; word-spacing: 0.03em; font-weight: 750; }
.group__line { margin-top: var(--s-2); max-width: 30rem; color: var(--ink-2); }
.group__list { display: grid; grid-template-columns: minmax(0, 1fr); column-gap: var(--s-6); align-content: start; margin-top: var(--s-5); }
.vig { max-width: 28rem; padding-bottom: var(--s-7); }
/* Source order is group 1, vignette 1, group 2, ... so reading and visual order match below 1100px.
   The live desktop story (main.js) moves the vignettes into the sticky stage. */
.mod { display: grid; grid-template-columns: var(--s-6) minmax(0, 1fr); padding: var(--s-4) 0 var(--s-5); border-top: 1px solid var(--line-2); }
.mod__num { padding-top: var(--s-1); font-size: var(--t-ui); font-weight: 700; color: var(--action); font-variant-numeric: tabular-nums; line-height: 1.4; }
.mod__body { position: relative; }
.mod__name { font-size: var(--t-h4); line-height: 1.35; letter-spacing: -0.01em; word-spacing: 0.015em; font-weight: 720; }
.mod__btn { padding: 0; border: 0; background: none; color: inherit; font: inherit; letter-spacing: inherit; word-spacing: inherit; text-align: left; cursor: help; text-decoration: underline dotted var(--muted); text-decoration-thickness: 1.5px; text-underline-offset: 4px; }
.mod__btn:hover { text-decoration-color: var(--action); }
.mod__ex { position: absolute; z-index: 5; left: 0; right: 0; margin-top: var(--s-2); padding: var(--s-3) var(--s-4); border-radius: var(--r-md); background: var(--ink); color: var(--on-ink-strong); font-size: var(--t-sm); line-height: 1.5; box-shadow: var(--sh-float); opacity: 0; visibility: hidden; transform: translateY(4px); transition: opacity 150ms var(--ease) 120ms, transform 150ms var(--ease) 120ms, visibility 0s linear 270ms; }
.mod__ex b { color: var(--on-ink-strong); }
.mod__body:has(.mod__btn:hover, .mod__btn:focus-visible, .mod__ex:hover) .mod__ex, .mod__body.is-open .mod__ex { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
/* doubled class: must outrank the :has(:hover/:focus-visible) reveal rule */
.mod__body.mod__body.is-dismissed .mod__ex.mod__ex { opacity: 0; visibility: hidden; transition: none; }
.mod__out { display: grid; gap: var(--s-1); margin-top: var(--s-2); font-size: var(--t-sm); line-height: 1.5; color: var(--ink-2); }
.mod__out li { position: relative; padding-left: var(--s-4); }
.mod__out li::before { content: ""; position: absolute; left: 0; top: 0.72em; width: 8px; height: 1px; background: var(--muted); }
@media (min-width: 640px) {
  .group__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1100px) {
  .modules__head { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--s-6); align-items: end; }
  .modules__head .section-title { grid-column: 1 / span 7; }
  .modules__intro { grid-column: 8 / span 5; }
  /* static desktop (no JS or reduced motion): each group with its vignette beside it */
  .story { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--s-6); }
  .group { grid-column: 1 / span 8; }
  .vig { grid-column: 9 / span 4; align-self: start; padding: var(--s-6) 0 var(--s-5); border-top: 1.5px solid var(--ink); max-width: none; }
  .s1, .v1 { grid-row: 1; } .s2, .v2 { grid-row: 2; } .s3, .v3 { grid-row: 3; } .s4, .v4 { grid-row: 4; } .s5, .v5 { grid-row: 5; }
  /* live: sticky stage, the active group's vignette swaps as the groups scroll past */
  .story--live .story__steps { display: block; grid-column: 1 / span 8; grid-row: 1; }
  .story--live .group { padding-bottom: var(--s-7); }
  .story--live .story__stage { display: grid; grid-column: 9 / span 4; grid-row: 1; align-self: start; position: sticky; top: calc(64px + var(--s-6)); border-top: 1.5px solid var(--ink); padding-top: var(--s-6); }
  .story--live .story__label { display: block; grid-row: 1; grid-column: 1; margin-bottom: var(--s-4); font-size: var(--t-xs); font-weight: 650; color: var(--muted); }
  .story--live .story__label [data-story-label] { color: var(--ink); }
  .story--live .vig { grid-row: 2; grid-column: 1; padding: 0; border-top: 0; opacity: 0; visibility: hidden; transform: translateY(12px); transition: opacity 320ms var(--ease), transform 320ms var(--ease), visibility 0s linear 320ms; }
  .story--live .vig.is-active { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
}

/* Vignettes: one small real UI per group */
.vig__card { padding: var(--s-4); border-radius: var(--r-md); background: var(--surface); border: 1px solid var(--line-2); box-shadow: var(--sh-card); font-size: var(--t-ui); line-height: 1.4; overflow-x: auto; }
.vig__head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-3); margin-bottom: var(--s-2); }
.vig__title { font-weight: 720; }
.vig__meta { font-size: var(--t-xs); color: var(--muted); }
.vig__row { display: grid; grid-template-columns: 3.5rem minmax(0, 1fr); align-items: baseline; column-gap: var(--s-3); padding: var(--s-2) 0; border-top: 1px solid var(--line); }
.vig__row--3 { grid-template-columns: minmax(0, 1fr) auto 5.5rem; }
.vig__row--time { grid-template-columns: 4.5rem minmax(0, 1fr) 5rem; }
.vig__st { justify-self: end; }
.vig__amt { font-variant-numeric: tabular-nums; font-weight: 650; text-align: right; }
.vig__tally { min-width: 7rem; text-align: right; }
.vig .vig__row { transition: opacity 300ms var(--ease), transform 300ms var(--ease); }
.vig .vig__row.is-pending { opacity: 0.2; transform: translateY(4px); }
.vig .vig__st.is-arrived { animation: swap 380ms var(--ease) both; }
.chart { display: block; width: 100%; height: auto; margin-top: var(--s-2); overflow: visible; }
.chart__grid { stroke: var(--line); stroke-width: 1; vector-effect: non-scaling-stroke; }
.chart__actual, .chart__fc { fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: 0; }
.chart__actual { stroke: var(--ink); }
.chart__fc { stroke: var(--sky); transition: stroke-dashoffset 1300ms var(--ease); }
.chart__fc.is-pending { stroke-dashoffset: 1; transition: none; }
.chart__pt { fill: var(--surface); stroke: var(--ink); stroke-width: 2; vector-effect: non-scaling-stroke; }
.chart__pt--fc { stroke: var(--sky); transition: opacity 250ms var(--ease); }
.chart__pt--fc.is-pending { opacity: 0; }
.chart__months { display: flex; justify-content: space-between; margin-top: var(--s-1); padding: 0 var(--s-2); font-size: var(--t-xs); color: var(--muted); }
.chart__legend { display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-4); margin-top: var(--s-3); padding-top: var(--s-2); border-top: 1px solid var(--line); font-size: var(--t-xs); color: var(--ink-2); }
.chart__legend b { color: var(--ink); font-variant-numeric: tabular-nums; }
.key { display: inline-block; width: 16px; height: 3px; margin-right: var(--s-2); border-radius: 2px; vertical-align: 0.25em; }
.key--actual { background: var(--ink); }
.key--fc { background: var(--sky); }
.vig__row--3 > :first-child:not(.vig__k) { color: var(--ink); }
.vig__k { font-size: var(--t-xs); font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.vig__row b { font-variant-numeric: tabular-nums; }
.tbl--vig td, .tbl--vig th { padding-right: var(--s-3); }
.tbl--vig td:last-child, .tbl--vig th:last-child { padding-right: 0; }

/* Waitlist */
.cta { padding: var(--section) 0; background: var(--ink); color: var(--on-ink-strong); }
.cta__grid { display: grid; gap: var(--s-7); }
.cta h2 { max-width: 14ch; font-size: var(--t-h2); line-height: 1.08; letter-spacing: -0.03em; word-spacing: 0.03em; font-weight: 760; text-wrap: balance; }
.cta__copy p { margin-top: var(--s-5); max-width: 30rem; color: var(--on-ink); font-size: var(--t-lg); }
.cta a { color: var(--on-ink-strong); }
.cta a:hover { color: var(--sky-soft); }
/* Tall enough that the form's Submit button (ends at 1126px, 1164px below 640px wide; measured
   2026-10-09) shows without scrolling inside the frame, with room for a validation message. */
.formframe { height: 1200px; overflow: hidden; border-radius: var(--r-lg); background: var(--surface); }
.formframe iframe { display: block; width: 100%; height: 100%; border: 0; }
.cta__privacy, .cta__fallback { margin-top: var(--s-3); font-size: var(--t-sm); color: var(--on-ink); }
.cta__privacy + .cta__fallback { margin-top: var(--s-1); }
@media (min-width: 1024px) {
  .cta__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--s-6); align-items: start; }
  .cta__copy { grid-column: 1 / span 5; position: sticky; top: calc(64px + var(--s-6)); }
  .cta__form { grid-column: 7 / span 6; }
}

.site-footer { padding: var(--s-5) 0 var(--s-6); background: var(--ink); border-top: 1px solid var(--ink-rule); font-size: var(--t-sm); color: var(--on-ink); }
.site-footer__inner { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); }
.site-footer a { color: var(--on-ink-strong); }

/* Privacy notice */
.doc { padding: var(--s-8) 0 var(--section); background: var(--surface); }
.doc__inner { max-width: 40rem; }
.doc h1 { max-width: none; font-size: var(--t-h2); line-height: 1.08; }
.doc__date { margin-top: var(--s-3); font-size: var(--t-sm); color: var(--muted); }
.doc__lede { margin-top: var(--s-5); font-size: var(--t-lg); color: var(--ink-2); }
.doc h2 { margin-top: var(--s-7); padding-top: var(--s-4); border-top: 1.5px solid var(--ink); font-size: 1.25rem; line-height: 1.3; letter-spacing: -0.015em; word-spacing: 0.02em; font-weight: 740; }
.doc p, .doc ul { margin-top: var(--s-3); color: var(--ink-2); }
.doc ul { display: grid; gap: var(--s-2); }
.doc li { position: relative; padding-left: var(--s-4); }
.doc li::before { content: ""; position: absolute; left: 0; top: 0.8em; width: 8px; height: 1px; background: var(--muted); }

/* Motion (3 effects): product rise-in, funnel bars grow, KPI count-up (main.js) */
@keyframes rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes swap { from { opacity: 0.25; transform: translateY(3px); } to { opacity: 1; transform: none; } }
@keyframes pulse { 0% { opacity: 0; transform: scale(1); } 35% { opacity: 1; transform: scale(1.015); } 100% { opacity: 0; transform: scale(1); } }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* Responsive */
@media (max-width: 1023px) {
  .stage { margin-top: var(--s-6); }
}
@media (max-width: 899px) {
  .stage { padding-top: 0; }
  .stage__cap { text-align: left; }
  .app { grid-template-columns: minmax(0, 1fr); }
  .app__side { display: none; }
}
@media (max-width: 639px) {
  .site-nav { display: none; }
  .site-header__inner { justify-content: space-between; gap: var(--s-4); }
  .app__main { padding: var(--s-4); }
  .panel { padding: var(--s-4); }
  .bridge__row { grid-template-columns: minmax(0, 1fr) auto; row-gap: var(--s-2); }
  .bridge__row .bridge__track { grid-column: 1 / -1; grid-row: 2; }
  .bridge__axis { grid-template-columns: minmax(0, 1fr); }
  .bridge__axis-track { grid-column: 1; }
  .sched { grid-template-columns: 3rem minmax(0, 1fr) auto; row-gap: var(--s-1); }
  .sched .st { grid-column: 2 / -1; justify-self: start; white-space: normal; }
  .tbl--lg .c-booked { display: none; }
  .formframe { height: 1240px; }
}
/* Narrowest phones: the Return-by-channel table must fit its panel even under user text spacing (WCAG 1.4.12),
   so the aria-hidden panel never overflows and never becomes a scroll (Tab) stop. Its cells hold single words
   and figures, so wrapping alone cannot narrow it: tighten the type and gutters instead. */
@media (max-width: 359px) {
  .show__ui .panel { padding: var(--s-3); }
  .tbl--lg th, .tbl--lg td { white-space: normal; padding-right: var(--s-1); }
  .tbl--lg td { font-size: var(--t-xs); }
}