/* DCX Reliability Index — e-ink transit board.
   Warm paper + soft charcoal ink, hairline rules, SBB/TfL discipline.
   Ported from the approved Lovable design; wired to /v1/scorecard data. */
@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@600;700;800;900&family=Manrope:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  --paper:      oklch(0.955 0.012 85);   /* warm paper-white ~#F4F1EA */
  --paper-tint: oklch(0.925 0.012 85);   /* barely-there panel */
  --ink:        oklch(0.30 0.008 80);     /* soft charcoal ~#36352F */
  --ink-soft:   oklch(0.55 0.006 80);     /* warm grey */
  --ink-faint:  oklch(0.70 0.005 80);
  --rule:       oklch(0.30 0.008 80 / 0.15);
  --rule-bold:  oklch(0.30 0.008 80 / 0.80);
  --grade-a: oklch(0.55 0.06 150); --grade-b: oklch(0.58 0.05 130);
  --grade-c: oklch(0.60 0.06 90);  --grade-d: oklch(0.55 0.07 55);
  --grade-f: oklch(0.50 0.10 28);  --grade-x: oklch(0.66 0.01 80);
  --display: 'Archivo', system-ui, sans-serif;
  --sans: 'Manrope', system-ui, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, monospace;
  --max: 1180px;
  --silk: cubic-bezier(.22,1,.36,1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { overflow-x: hidden; max-width: 100%; }
html, body { background: var(--paper); color: var(--ink); }
body {
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  /* extremely faint paper grain */
  background-image:
    radial-gradient(oklch(0.30 0.008 80 / 0.035) 1px, transparent 1px),
    radial-gradient(oklch(0.30 0.008 80 / 0.025) 1px, transparent 1px);
  background-size: 3px 3px, 7px 7px;
  background-position: 0 0, 1px 2px;
  min-height: 100vh;
}
a { color: inherit; text-decoration: none; }
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.disp { font-family: var(--display); font-weight: 800; letter-spacing: -0.028em; line-height: 0.96; }
.wrap { max-width: var(--max); margin: 0 auto; padding: 0 clamp(20px,4vw,40px); }

@keyframes flip {
  0% { transform: rotateX(-92deg); opacity: 0; }
  55% { transform: rotateX(12deg); opacity: 1; }
  80% { transform: rotateX(-4deg); }
  100% { transform: rotateX(0); opacity: 1; }
}
@keyframes rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .4; } }
.rise { animation: rise .5s var(--silk) both; }

/* ---- top header ---- */
.top { border-bottom: 1px solid var(--rule); }
.top .row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: 18px; }
.brand { display: flex; align-items: center; gap: 12px; }
.brand .badge { display: grid; place-items: center; width: 32px; height: 32px; border: 1px solid oklch(0.30 0.008 80 / .3); border-radius: 3px; font-family: var(--mono); font-size: 10px; font-weight: 700; }
.brand .nm { font-size: 14px; font-weight: 600; letter-spacing: -.01em; }
.brand .sub { font-family: var(--mono); font-size: 10px; text-transform: uppercase; letter-spacing: .22em; color: var(--ink-soft); }
.top nav { display: flex; gap: 28px; font-size: 14px; color: var(--ink-soft); }
.top nav a:hover { color: var(--ink); }
.dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: oklch(0.30 0.008 80 / .7); animation: pulse 2.2s ease-in-out infinite; }
.clock { display: flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 12px; color: var(--ink-soft); }

/* ---- mobile header: nav drops to its own full-width line, wraps ---- */
@media (max-width: 760px) {
  .top .row { flex-wrap: wrap; gap: 12px 16px; padding-block: 14px; }
  .top nav { order: 3; width: 100%; flex-wrap: wrap; gap: 10px 20px; font-size: 13px; color: var(--ink); }
  .top nav a { padding: 2px 0; }
  .clock { display: none; }            /* redundant on mobile; the board shows the updated date */
  /* the Sort row is the overflow culprit: let it wrap to two lines instead of running off-screen */
  .sortbar { flex-wrap: wrap; gap: 8px 12px; }
  .sorts { width: 100%; justify-content: flex-start; }
  .board-h, .board-foot { flex-wrap: wrap; gap: 6px 14px; }
}

/* ---- mobile type scale: tuned for phones, not shrunk desktop ---- */
@media (max-width: 560px) {
  .mast { padding-block: 36px 32px; }
  .hd { font-size: clamp(1.95rem, 7.5vw, 2.5rem); line-height: 1.06; letter-spacing: -.02em; margin-top: 16px; }
  .dek { margin-top: 20px; font-size: 1rem; }
  .cta { margin-top: 24px; }
  .stats { margin-top: 36px; padding: 24px 0; }
  .stat-v { font-size: clamp(2rem, 9vw, 2.6rem); }
  .hero-wait .num { font-size: clamp(3rem, 18vw, 5rem); }
  .r-name { font-size: clamp(1.5rem, 7vw, 2rem); }
  /* tighten wide mono-uppercase chrome so its letter-spacing can't force horizontal overflow */
  .kicker { letter-spacing: .12em; }
  .board-h, .board-foot, .metric-h, .map-hud { letter-spacing: .1em; }
  .board-foot { flex-wrap: wrap; gap: 4px 12px; }
  .sortbar { flex-wrap: wrap; }
}

/* ---- masthead ---- */
.mast { padding-block: clamp(48px,9vw,96px) clamp(40px,7vw,72px); }
.kicker { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: .22em; color: var(--ink-soft); }
.kicker .ln { width: 40px; height: 1px; background: var(--rule); }
.hd { font-family: var(--display); font-weight: 800; font-size: clamp(2.5rem,6.5vw,4.5rem); line-height: .98; letter-spacing: -.03em; margin-top: 26px; }
.dek { margin-top: 24px; max-width: 46ch; font-size: clamp(1.05rem,1.6vw,1.25rem); line-height: 1.55; color: var(--ink-soft); }
.dek b { color: var(--ink); font-weight: 600; }
.cta { margin-top: 30px; display: flex; flex-wrap: wrap; gap: 12px; }
.btn { font-size: 14px; padding: 11px 20px; border-radius: 3px; border: 1px solid var(--ink); color: var(--ink); transition: background .15s; }
.btn:hover { background: oklch(0.30 0.008 80 / .04); }
.btn.ghost { border-color: var(--rule); color: var(--ink-soft); }
.btn.ghost:hover { border-color: var(--ink); color: var(--ink); }

/* ---- summary stats ---- */
.stats { margin-top: 56px; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); padding: 32px 0; display: grid; grid-template-columns: repeat(3,1fr); }
.stats .c + .c { border-left: 1px solid var(--rule); padding-left: 32px; }
.stat-l { font-family: var(--mono); font-size: 10px; text-transform: uppercase; letter-spacing: .25em; color: var(--ink-soft); }
.stat-v { font-family: var(--display); font-weight: 800; font-size: clamp(2.5rem,5vw,3.5rem); line-height: 1; margin-top: 8px; display: flex; align-items: baseline; gap: 8px; }
.stat-v .u { font-family: var(--mono); font-size: 12px; font-weight: 400; color: var(--ink-soft); }

/* ---- the board ---- */
.board-h { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 24px; border-top: 2px solid var(--rule-bold); border-bottom: 2px solid var(--rule-bold); padding: 12px; font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: .25em; }
.board-h .ttl { font-weight: 600; }
.board-h .meta { display: flex; align-items: center; gap: 20px; color: var(--ink-soft); }
.board-h .meta b { color: var(--ink); font-weight: 600; }
.sortbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--rule); padding: 12px; }
.sortbar .lbl { font-family: var(--mono); font-size: 10px; text-transform: uppercase; letter-spacing: .25em; color: var(--ink-soft); }
.sorts { display: inline-flex; flex-wrap: wrap; gap: 4px; border: 1px solid var(--rule); border-radius: 3px; padding: 4px; font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: .18em; }
.sorts button { background: none; border: 0; cursor: pointer; color: var(--ink-soft); padding: 6px 12px; border-radius: 3px; }
.sorts button:hover { color: var(--ink); }
.sorts button.on { background: oklch(0.30 0.008 80 / .08); color: var(--ink); }

/* ---- route search ---- */
.searchbar { display: flex; align-items: center; gap: 12px; border-bottom: 1px solid var(--rule); padding: 10px 12px; }
.searchbar .lbl { flex: none; font-family: var(--mono); font-size: 10px; text-transform: uppercase; letter-spacing: .25em; color: var(--ink-soft); }
.search { flex: 1 1 auto; min-width: 0; background: transparent; border: 0; border-bottom: 1px solid var(--rule); padding: 7px 2px; font-family: var(--mono); font-size: 15px; letter-spacing: .06em; color: var(--ink); }
.search::placeholder { color: var(--ink-faint); letter-spacing: .03em; text-transform: none; }
.search:focus { outline: none; border-bottom-color: var(--rule-bold); }
.search::-webkit-search-cancel-button { -webkit-appearance: none; }
.searchbar #q-clear { flex: none; background: none; border: 1px solid var(--rule); border-radius: 3px; cursor: pointer; color: var(--ink-soft); font-family: var(--mono); font-size: 10px; text-transform: uppercase; letter-spacing: .18em; padding: 6px 10px; }
.searchbar #q-clear:hover { color: var(--ink); border-color: var(--ink); }
.q-count { flex: none; font-family: var(--mono); font-size: 10px; letter-spacing: .18em; color: var(--ink-soft); font-variant-numeric: tabular-nums; }

/* ---- lead-capture CTA ---- */
#api { padding-block: clamp(40px,6vw,72px); }
.lead-card { border: 1px solid var(--rule-bold); border-radius: 5px; padding: clamp(28px,4vw,44px); background: var(--paper-tint); }
.lead-card .eyebrow { font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: .25em; color: var(--ink-soft); }
.lead-card h2 { font-family: var(--display); font-weight: 800; font-size: clamp(1.5rem,3.5vw,2.3rem); letter-spacing: -.02em; margin-top: 12px; }
.lead-card p { margin-top: 14px; max-width: 58ch; line-height: 1.6; color: var(--ink-soft); }
#lead-form { margin-top: 24px; }
.lead-row { display: flex; flex-wrap: wrap; gap: 10px; }
#lead-email, #lead-role { flex: 1 1 180px; min-width: 0; background: var(--paper); border: 1px solid var(--rule); border-radius: 3px; padding: 12px 14px; font-family: var(--mono); font-size: 14px; color: var(--ink); }
#lead-email::placeholder { color: var(--ink-faint); }
#lead-email:focus, #lead-role:focus { outline: none; border-color: var(--rule-bold); }
#lead-form button { flex: 0 0 auto; cursor: pointer; background: var(--ink); color: var(--paper); border: 1px solid var(--ink); border-radius: 3px; padding: 12px 22px; font-size: 14px; }
#lead-form button:hover { background: oklch(0.30 0.008 80 / .85); }
.lead-note { margin-top: 12px; font-family: var(--mono); font-size: 11px; letter-spacing: .04em; color: var(--ink-soft); }
.lead-thanks { margin-top: 24px; font-family: var(--mono); font-size: 14px; letter-spacing: .04em; color: var(--ink); border-left: 3px solid var(--grade-a); padding-left: 16px; }
@media (max-width: 560px) { .lead-row { flex-direction: column; } #lead-form button { width: 100%; } }

.cols, .brow {
  display: grid;
  grid-template-columns: 76px 1fr 130px 100px 150px 60px;
  align-items: center;
}
.cols { border-bottom: 1px solid var(--rule-bold); background: oklch(0.925 0.012 85 / .4); font-family: var(--mono); font-size: 10px; text-transform: uppercase; letter-spacing: .25em; color: var(--ink-soft); }
.cols span { padding: 10px 16px; }
.cols span + span { border-left: 1px solid var(--rule); }
.cols .r { text-align: right; }
.board ul { list-style: none; }
.board li { border-bottom: 1px solid var(--rule); }
.board li a { display: block; color: inherit; }
.brow { height: 64px; transition: background .14s; }
.board li:hover .brow { background: oklch(0.925 0.012 85 / .6); }
.cell { height: 100%; display: flex; align-items: center; padding: 0 16px; min-width: 0; }
.cell + .cell { border-left: 1px solid var(--rule); }
.cell.r { justify-content: flex-end; }
.rid { font-family: var(--mono); font-size: 14px; font-weight: 600; letter-spacing: .08em; }
.rwait { font-family: var(--mono); font-size: 22px; font-weight: 600; line-height: 1; }
.rwait .u { margin-left: 6px; font-size: 10px; font-weight: 400; text-transform: uppercase; letter-spacing: .22em; color: var(--ink-soft); }
.rpct { font-family: var(--mono); font-size: 14px; }
.rpct .u { font-size: 10px; color: var(--ink-soft); margin-left: 1px; }
.status { display: flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: .2em; }
.status i { width: 6px; height: 6px; border-radius: 50%; display: inline-block; }
.flip > span { display: inline-block; min-width: .62ch; text-align: center; transform-origin: 50% 100%; backface-visibility: hidden; animation: flip .45s cubic-bezier(.5,0,.2,1) both; }
.flip > span.pt { display: inline; min-width: 0; text-align: left; transform: none; animation: none; }

.grade { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 3px; border: 1px solid; font-family: var(--display); font-weight: 800; font-size: 15px; }
.grade[data-g=A]{ color:var(--grade-a); border-color:oklch(0.55 0.06 150 / .5);}
.grade[data-g=B]{ color:var(--grade-b); border-color:oklch(0.58 0.05 130 / .5);}
.grade[data-g=C]{ color:var(--grade-c); border-color:oklch(0.60 0.06 90 / .5);}
.grade[data-g=D]{ color:var(--grade-d); border-color:oklch(0.55 0.07 55 / .55);}
.grade[data-g=F]{ color:var(--grade-f); border-color:oklch(0.50 0.10 28 / .55);}
.grade[data-g='–']{ color:var(--grade-x); border-color:var(--rule); font-size:13px; }
.dot-a{background:var(--grade-a);} .dot-c{background:var(--grade-c);}
.dot-d{background:var(--grade-d);} .dot-f{background:var(--grade-f);}

/* week-over-week grade trend arrow (DCX-31) */
.trend { display: inline-block; margin-left: 6px; font-family: var(--mono); font-size: 13px; font-weight: 600; line-height: 1; vertical-align: middle; cursor: default; }
.tr-up { color: var(--grade-a); }      /* improving — green */
.tr-down { color: var(--grade-f); }    /* declining — red */
.tr-steady { color: var(--ink-faint); }/* steady — grey */

/* machine-written narratives (DCX-27) */
.sysnote { padding-block: 4px 0; }
.sysnote .eyebrow { font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: .25em; color: var(--ink-soft); }
.sysnote p { font-size: clamp(1.05rem,1.8vw,1.3rem); line-height: 1.5; max-width: 62ch; margin: 10px 0 8px; }
.narrative { margin-top: 24px; border-left: 3px solid var(--rule-bold); padding: 4px 0 4px 18px; }
.narrative p { font-size: clamp(1.05rem,1.6vw,1.2rem); line-height: 1.55; max-width: 60ch; margin-top: 6px; }
.nlabel { display: inline-block; font-family: var(--mono); font-size: 10px; text-transform: uppercase; letter-spacing: .2em; color: var(--ink-faint); }
.board-foot { display: flex; align-items: center; justify-content: space-between; border-top: 2px solid var(--rule-bold); border-bottom: 2px solid var(--rule-bold); padding: 12px; font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: .25em; color: var(--ink-soft); }

/* mobile board rows */
.mrow { display: none; }
@media (max-width: 760px) {
  .cols, .brow { display: none; }
  .mrow { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; padding: 16px 12px; }
  .mrow .meta { font-family: var(--mono); font-size: 10px; text-transform: uppercase; letter-spacing: .2em; color: var(--ink-soft); display: flex; gap: 12px; margin-top: 6px; flex-wrap: wrap; }
  .stats { grid-template-columns: 1fr 1fr; gap: 24px 0; }
  .stats .c + .c { border-left: 0; padding-left: 0; }
  .stats .c:nth-child(3) { grid-column: span 2; }
}

/* ---- footer ---- */
.foot { border-top: 1px solid var(--rule); margin-top: 16px; padding-block: 22px 48px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; font-family: var(--mono); font-size: 12px; color: var(--ink-soft); }

/* ---- route detail ---- */
.back { font-family: var(--mono); font-size: 12px; text-transform: uppercase; letter-spacing: .22em; color: var(--ink-soft); }
.back:hover { color: var(--ink); }
.rhero { padding: clamp(40px,6vw,64px) 0 0; }
.rhero .id-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 16px 24px; margin-top: 16px; }
.id-badge { display: grid; place-items: center; width: 80px; height: 64px; border: 1px solid oklch(0.30 0.008 80 / .35); border-radius: 3px; font-family: var(--mono); font-size: 24px; font-weight: 600; }
.r-name { font-family: var(--display); font-weight: 800; font-size: clamp(1.7rem,4vw,2.6rem); }
.r-sub { margin-top: 4px; font-size: 14px; color: var(--ink-soft); }
.hero-wait { margin-top: 48px; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); padding: 40px 0; display: grid; gap: 24px; grid-template-columns: 1.3fr 1fr; align-items: end; }
.hero-wait .num { font-family: var(--display); font-weight: 800; font-size: clamp(4rem,11vw,8rem); line-height: 1; }
.hero-wait .num .u { font-family: var(--mono); font-size: 1rem; font-weight: 400; color: var(--ink-soft); margin-left: 12px; }
.hero-wait p { max-width: 40ch; font-size: 14px; line-height: 1.6; color: var(--ink-soft); }
@media (max-width: 760px) { .hero-wait { grid-template-columns: 1fr; } }

.tabs { display: inline-flex; gap: 0; border: 1px solid var(--rule); border-radius: 3px; padding: 4px; margin-top: 28px; font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: .18em; }
.tabs button { background: none; border: 0; cursor: pointer; color: var(--ink-soft); padding: 6px 16px; border-radius: 3px; }
.tabs button.on { background: oklch(0.30 0.008 80 / .08); color: var(--ink); }

.metric-h { margin-top: 24px; border-top: 2px solid var(--rule-bold); border-bottom: 2px solid var(--rule-bold); padding: 11px 12px; display: flex; justify-content: space-between; font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: .25em; }
.metric-h b { font-weight: 600; }
.metric-h span { color: var(--ink-soft); }
.mlist { list-style: none; }
.mlist li { display: grid; grid-template-columns: 220px 1fr auto; gap: 24px; align-items: baseline; padding: 16px 12px; border-bottom: 1px solid var(--rule); }
.mlist .ml { font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: .22em; color: var(--ink-soft); }
.mlist .mh { font-family: var(--mono); font-size: 10px; text-transform: uppercase; letter-spacing: .18em; color: var(--ink-faint); }
.mlist .mv { justify-self: end; font-family: var(--mono); font-size: clamp(1.4rem,2.4vw,1.8rem); font-weight: 600; }
.mlist .mv .u { font-size: 11px; font-weight: 400; text-transform: uppercase; letter-spacing: .18em; color: var(--ink-soft); margin-left: 6px; }
@media (max-width: 760px) { .mlist li { grid-template-columns: 1fr auto; } .mlist .mh { display: none; } }

.chart-sec { margin-top: 48px; border-top: 1px solid var(--rule); padding-top: 24px; }
.chart-sec h3 { font-family: var(--display); font-weight: 800; font-size: clamp(1.3rem,2.5vw,1.8rem); }
.chart-sec .k { font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: .25em; color: var(--ink-soft); }
.spark { margin-top: 20px; }
.spark .lbls { display: flex; justify-content: space-between; font-family: var(--mono); font-size: 11px; color: var(--ink-soft); margin-top: 6px; }

.moat { margin-top: 48px; border-top: 2px solid var(--rule-bold); border-bottom: 2px solid var(--rule-bold); padding: 32px 0; }
.moat .k { font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: .25em; color: var(--ink-soft); }
.moat h3 { font-family: var(--display); font-weight: 800; font-size: clamp(1.4rem,3vw,2.2rem); margin-top: 8px; }
.versus { margin-top: 28px; display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
.versus .side + .side { border-left: 1px solid var(--rule); padding-left: 32px; }
.versus .who { display: flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: .25em; color: var(--ink-soft); }
.versus .who i { width: 6px; height: 6px; border-radius: 50%; background: var(--ink); }
.versus .pct { font-family: var(--display); font-weight: 800; font-size: clamp(3rem,8vw,5rem); line-height: 1; margin-top: 12px; }
.versus .side.them .pct { color: var(--ink-soft); }
.versus .meter { margin-top: 12px; height: 1px; background: var(--rule); }
.versus .meter i { display: block; height: 1px; background: var(--ink); }
.versus .side.them .meter i { background: var(--ink-soft); }
.moat .note { margin-top: 20px; max-width: 60ch; font-size: 14px; color: var(--ink-soft); }
@media (max-width: 760px) { .versus { grid-template-columns: 1fr; gap: 24px; } .versus .side + .side { border-left: 0; padding-left: 0; } }

.loading { font-family: var(--mono); font-size: 12px; letter-spacing: .15em; color: var(--ink-soft); text-transform: uppercase; padding: 64px 12px; text-align: center; }

/* ---- methodology doc ---- */
.doc { max-width: 760px; padding-block: clamp(40px,7vw,72px) 96px; }
.doc .eyebrow { font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: .25em; color: var(--ink-soft); }
.doc h1 { font-family: var(--display); font-weight: 800; font-size: clamp(2.2rem,6vw,3.6rem); line-height: 1; letter-spacing: -.03em; margin-top: 18px; }
.doc .lede { margin-top: 20px; font-size: clamp(1.05rem,1.6vw,1.25rem); line-height: 1.6; color: var(--ink-soft); }
.doc h2 { font-family: var(--display); font-weight: 800; font-size: 1.4rem; margin-top: 48px; padding-top: 22px; border-top: 2px solid var(--rule-bold); }
.doc h2 .tag { font-family: var(--mono); font-size: 11px; font-weight: 400; letter-spacing: .2em; color: var(--ink-soft); text-transform: uppercase; margin-left: 10px; }
.doc p { margin-top: 14px; line-height: 1.7; color: var(--ink); }
.doc p.sub { color: var(--ink-soft); font-size: .95rem; }
.doc .formula { margin-top: 16px; font-family: var(--mono); font-size: 1.05rem; background: var(--paper-tint); border: 1px solid var(--rule); border-radius: 4px; padding: 16px 18px; }
.doc ul.terms { list-style: none; margin-top: 16px; }
.doc ul.terms li { border-top: 1px solid var(--rule); padding: 14px 0; display: grid; grid-template-columns: 200px 1fr; gap: 20px; }
.doc ul.terms b { font-family: var(--mono); font-size: 12px; text-transform: uppercase; letter-spacing: .12em; }
.doc ul.terms span { color: var(--ink-soft); line-height: 1.6; }
@media (max-width:640px){ .doc ul.terms li { grid-template-columns: 1fr; gap: 4px; } }

/* ---- live map (e-ink) ---- */
/* Flex column so the map fills whatever space is left below the header,
   regardless of header height (header wraps on mobile). */
.map-page { display: flex; flex-direction: column; height: 100vh; height: 100dvh; overflow: hidden; }
.map-page .top { flex: 0 0 auto; }
#map { position: relative; flex: 1 1 auto; min-height: 0; background: var(--paper); }
.map-hud {
  position: absolute; top: 14px; right: 14px; z-index: 1000;
  background: oklch(0.955 0.012 85 / .94); border: 1px solid var(--rule-bold); border-radius: 4px;
  padding: 14px 16px; font-family: var(--mono); font-size: 12px; color: var(--ink);
  backdrop-filter: blur(4px); max-width: calc(100vw - 28px);
}
.map-hud .big { font-family: var(--display); font-weight: 800; font-size: 22px; }
.map-hud .lg { margin-top: 10px; display: grid; gap: 5px; color: var(--ink-soft); }
.map-hud .lg i { width: 9px; height: 9px; border-radius: 50%; display: inline-block; margin-right: 7px; vertical-align: middle; }
.leaflet-container { background: var(--paper) !important; font-family: var(--mono); }
.leaflet-popup-content-wrapper, .leaflet-popup-tip { background: var(--paper); color: var(--ink); border: 1px solid var(--rule-bold); box-shadow: none; border-radius: 4px; }
@media (max-width: 760px) {
  .map-hud { top: 10px; right: 10px; left: 10px; padding: 10px 12px; font-size: 11px; }
  .map-hud .big { font-size: 18px; }
  .map-hud .lg { grid-template-columns: 1fr 1fr; gap: 4px 14px; }
}

/* ---- marketing + roadmap sections ---- */
.section { padding-block: clamp(40px,7vw,72px); border-top: 1px solid var(--rule); }
.section .eyebrow { font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: .25em; color: var(--ink-soft); }
.section h2 { font-family: var(--display); font-weight: 800; font-size: clamp(1.6rem,3.5vw,2.4rem); letter-spacing: -.02em; margin-top: 14px; }
.section .lead { margin-top: 16px; max-width: 62ch; color: var(--ink-soft); line-height: 1.7; font-size: clamp(1rem,1.5vw,1.1rem); }
.section p.body { margin-top: 16px; max-width: 62ch; line-height: 1.7; }
.section p.body + p.body { margin-top: 12px; }
.grid3 { margin-top: 32px; display: grid; grid-template-columns: repeat(3,1fr); gap: 1px; background: var(--rule); border: 1px solid var(--rule); border-radius: 4px; overflow: hidden; }
.grid3 .cardx { background: var(--paper); padding: 26px 24px; }
.grid3 .cardx h3 { font-family: var(--mono); font-size: 12px; text-transform: uppercase; letter-spacing: .14em; }
.grid3 .cardx p { margin-top: 12px; color: var(--ink-soft); line-height: 1.6; font-size: .95rem; }
@media(max-width:760px){ .grid3 { grid-template-columns: 1fr; } }
.pullquote { margin-top: 36px; border-left: 3px solid var(--ink); padding: 4px 0 4px 24px; font-family: var(--display); font-weight: 700; font-size: clamp(1.4rem,3vw,2rem); line-height: 1.25; letter-spacing: -.02em; max-width: 24ch; }

/* roadmap phases */
.phase { border-top: 2px solid var(--rule-bold); padding: 26px 0; }
.phase .ph-h { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.phase .tag2 { font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: .2em; padding: 4px 11px; border-radius: 3px; border: 1px solid; }
.tag-now { color: var(--grade-a); border-color: oklch(0.55 0.06 150 / .5); }
.tag-next { color: var(--grade-d); border-color: oklch(0.55 0.07 55 / .55); }
.tag-later { color: var(--ink-soft); border-color: var(--rule); }
.phase h3 { font-family: var(--display); font-weight: 800; font-size: clamp(1.4rem,3vw,1.9rem); letter-spacing: -.02em; }
.phase ul { list-style: none; margin-top: 18px; }
.phase li { padding: 12px 0 12px 26px; position: relative; line-height: 1.55; border-top: 1px solid var(--rule); }
.phase li:first-child { border-top: 0; }
.phase li::before { content: ""; position: absolute; left: 3px; top: 19px; width: 8px; height: 8px; border-radius: 50%; }
.phase li.done::before { background: var(--grade-a); }
.phase li.wip::before  { background: var(--grade-d); }
.phase li.todo::before { background: var(--ink-faint); }
.phase li b { font-weight: 600; }
.phase li span { color: var(--ink-soft); }