/* ============================================================
   TRANSFERETA / styles.css
   Art direction: "the arrivals board for your money"
   Night-terminal surfaces, split-flap display cells, mono-first
   data typography, signal cyan. No webfonts, no external assets.
   ============================================================ */

:root {
  --bg: #0f141c;
  --bg-deep: #0a0e15;
  --panel: #151c27;
  --panel-2: #1a2230;
  --cell: #0b0f16;
  --line: #26303f;
  --line-soft: #1d2634;
  --ink: #e9edf3;
  --body: #c3cddb;
  --dim: #8fa0b5;
  --faint: #5e6c80;
  --accent: #35d5c8;
  --accent-dim: #1e8079;
  --accent-glow: rgba(53, 213, 200, .08);
  --ok: #46c583;
  --warn: #e0a63d;
  --bad: #e06565;
  --mono: ui-monospace, "Cascadia Mono", "SF Mono", "Segoe UI Mono", Consolas, Menlo, monospace;
  --sans: system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --rad: 10px;
  --rad-sm: 6px;
  --maxw: 1080px;
  --shadow: 0 12px 40px rgba(0, 0, 0, .35);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; color-scheme: dark; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--body);
  font: 16px/1.65 var(--sans);
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
img, svg { max-width: 100%; height: auto; display: block; }
h1, h2, h3, h4 { color: var(--ink); line-height: 1.2; margin: 0 0 .5em; font-weight: 650; letter-spacing: -.01em; }
p { margin: 0 0 1em; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
code { font-family: var(--mono); font-size: .92em; background: var(--cell); padding: .1em .35em; border-radius: 4px; border: 1px solid var(--line-soft); }
::selection { background: var(--accent); color: #06211f; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 3px; }
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--accent); color: #06211f; padding: .6rem 1rem; font-family: var(--mono); font-size: .85rem;
}
.skip-link:focus { left: 8px; top: 8px; }

/* ---------- Utility ---------- */
.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 20px; }
.mono { font-family: var(--mono); }
.muted { color: var(--dim); }
.small { font-size: .85rem; }

/* ---------- Header ---------- */
.site-head {
  border-bottom: 1px solid var(--line-soft);
  background: rgba(10, 14, 21, .92);
  position: sticky; top: 0; z-index: 50;
  backdrop-filter: blur(8px);
}
.site-head .wrap { display: flex; align-items: center; gap: 1.5rem; height: 60px; }
.brand { display: inline-flex; align-items: center; gap: .5rem; color: var(--ink); font-family: var(--mono); font-weight: 700; font-size: 1rem; letter-spacing: -.005em; }
.brand:hover { text-decoration: none; }
.brand .mark { width: 27px; height: 27px; flex: none; }
/* wordmark is one flex item so no gap opens up before ".com" */
.brand .wordmark { white-space: nowrap; }
/* Monospace gives every glyph a full-width cell, so the period floats with
   dead space on both sides: ".com" detaches from the wordmark AND "com"
   detaches from the dot, even at a zero layout gap. Kern both pairs by ink,
   not by advance width. The dot is its own element purely for this. */
.brand .tld { color: var(--faint); font-weight: 400; margin-left: -.16em; }
.brand .tld .dot { margin-right: -.15em; }
.brand:hover .tld { color: var(--dim); }
.site-nav { margin-left: auto; display: flex; align-items: center; gap: .2rem; }
.site-nav a {
  color: var(--dim); font-family: var(--mono); font-size: .8rem; padding: .5rem .7rem; border-radius: var(--rad-sm);
  transition: color .12s ease, background-color .12s ease;
}
@media (max-width: 1080px) and (min-width: 781px) {
  .site-nav a { font-size: .72rem; padding: .45rem .45rem; }
  .site-head .wrap { gap: 1rem; }
}
.site-nav a:hover { color: var(--ink); background: var(--panel); text-decoration: none; }
.site-nav a[aria-current="page"] { color: var(--accent); }
.nav-cta {
  color: #06211f !important; background: var(--accent) !important; font-weight: 700;
}
.nav-cta:hover { filter: brightness(1.08); }
.nav-toggle { display: none; background: none; border: 1px solid var(--line); color: var(--ink); border-radius: var(--rad-sm); padding: .45rem .6rem; font-family: var(--mono); font-size: .8rem; cursor: pointer; }

@media (max-width: 780px) {
  .nav-toggle { display: block; margin-left: auto; }
  .site-nav {
    display: none; position: absolute; top: 60px; left: 0; right: 0;
    background: var(--bg-deep); border-bottom: 1px solid var(--line);
    flex-direction: column; align-items: stretch; padding: .6rem 1rem 1rem; gap: .1rem;
  }
  .site-nav.open { display: flex; }
  .site-nav a { padding: .7rem .6rem; font-size: .9rem; }
}

/* ---------- Hero ---------- */
.hero { padding: 2.4rem 0 1.2rem; }
.hero h1 { font-size: clamp(1.9rem, 4.2vw, 2.7rem); max-width: 24ch; }
.hero .lede { font-size: 1.02rem; color: var(--dim); max-width: 58ch; margin-bottom: 0; }
.hero .lede strong { color: var(--body); font-weight: 600; }

/* ---------- Panels ---------- */
.panel {
  background: var(--panel); border: 1px solid var(--line-soft); border-radius: var(--rad);
}
.panel-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  padding: .85rem 1.1rem; border-bottom: 1px solid var(--line-soft);
}
.panel-head h2, .panel-head h3 { margin: 0; font-family: var(--mono); font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; color: var(--dim); font-weight: 600; }
.panel-body { padding: 1.1rem; }

/* ---------- Estimator layout ---------- */
/* Single-column by default. The two-column layout and the trust panel that
   fills its second column share ONE breakpoint, so they can never disagree:
   a fractional viewport (Windows at 125% zoom) used to land between
   max-width:880 and min-width:881 and reopen the dead space. */
.estimator { display: grid; grid-template-columns: 1fr; gap: 1.2rem; margin: 1.5rem 0 3rem; align-items: start; }
.estimator-col { display: flex; flex-direction: column; gap: 1.2rem; }

/* Desktop-only: fills the column below the form with the trust summary
   instead of leaving dead space. On mobile the same points live in the
   methodology section, and the answer must stay directly under the form. */
.side-note { display: none; }
@media (min-width: 881px) {
  .estimator { grid-template-columns: minmax(300px, 5fr) 7fr; }
  .side-note { display: block; }
}
.side-list { list-style: none; margin: 0; padding: 0; }
.side-list li { position: relative; padding: .3rem 0 .3rem 1.15rem; font-size: .86rem; color: var(--dim); }
.side-list li::before { content: ""; position: absolute; left: 0; top: .95rem; width: 6px; height: 1px; background: var(--accent); }
.panel-result { border-top: 2px solid var(--accent); }
.live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); display: inline-block; margin-right: .45rem; box-shadow: 0 0 6px var(--accent); animation: livepulse 2.4s ease-in-out infinite; }
@keyframes livepulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .live-dot { animation: none; } }

.field { margin-bottom: 1.05rem; }
.field label { display: block; font-family: var(--mono); font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--dim); margin-bottom: .45rem; }
.field select, .field input {
  width: 100%; background: var(--cell); color: var(--ink); border: 1px solid var(--line);
  border-radius: var(--rad-sm); padding: .65rem .7rem; font-family: var(--mono); font-size: .92rem;
  appearance: none; -webkit-appearance: none;
}
.field select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%238fa0b5' fill='none' stroke-width='1.5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right .8rem center; padding-right: 2rem; }
.field select:focus, .field input:focus { border-color: var(--accent-dim); outline: none; box-shadow: 0 0 0 3px var(--accent-glow); }
.field .hint { font-size: .78rem; color: var(--dim); margin-top: .35rem; font-family: var(--sans); }
.field-row { display: flex; gap: .7rem; }
.field-row .field { flex: 1; }

details.adv { border-top: 1px dashed var(--line); margin-top: 1rem; padding-top: .9rem; }
details.adv summary { cursor: pointer; font-family: var(--mono); font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); list-style: none; display: flex; align-items: center; gap: .5rem; }
details.adv summary::-webkit-details-marker { display: none; }
details.adv summary::before { content: "+"; color: var(--accent); font-size: .9rem; }
details.adv[open] summary::before { content: "–"; }
details.adv > div { padding-top: .9rem; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  background: var(--accent); color: #06211f; border: none; border-radius: var(--rad-sm);
  font-family: var(--mono); font-weight: 700; font-size: .9rem; letter-spacing: .02em;
  padding: .75rem 1.3rem; cursor: pointer; width: 100%;
}
.btn { transition: filter .12s ease; }
.btn:hover { filter: brightness(1.08); text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn-ghost {
  background: transparent; color: var(--accent); border: 1px solid var(--accent-dim); width: auto; font-weight: 600;
}
.btn-ghost:hover { background: var(--accent-glow); }
.btn-row { display: flex; gap: .6rem; flex-wrap: wrap; margin-top: 1rem; }
.btn-row .btn { width: auto; flex: 1; min-width: 140px; }

/* ---------- Split-flap ETA display ---------- */
.result-empty { text-align: center; padding: 3.5rem 1.5rem; color: var(--faint); }
.result-empty svg { margin: 0 auto 1rem; opacity: .5; }
.result-empty .mono { font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; }

.flap-label { font-family: var(--mono); font-size: .7rem; letter-spacing: .18em; text-transform: uppercase; color: var(--dim); margin-bottom: .55rem; display: flex; align-items: center; gap: .55rem; }
.flap-label::before { content: ""; width: 16px; height: 2px; background: var(--accent); flex: none; }
.flap-line { display: flex; gap: 8px 10px; flex-wrap: wrap; }
.flap-group { display: flex; gap: 4px; flex-wrap: nowrap; }
.flap {
  font-family: var(--mono); font-weight: 700; font-size: clamp(1.3rem, 3.4vw, 2.05rem);
  color: var(--ink); background: linear-gradient(180deg, #131924 0%, #0b0f16 48%, #080b11 52%, #0d1119 100%);
  border: 1px solid var(--line-soft); border-radius: 5px;
  min-width: 1.5ch; padding: .32em .18em; text-align: center; line-height: 1;
  position: relative; overflow: hidden;
}
.flap::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: rgba(0,0,0,.55); }
.flap.gap { background: none; border: none; min-width: .6ch; }
.flap.gap::after { display: none; }
.flap.accent { color: var(--accent); }
.flap.flip { animation: flapflip .32s ease-out; }
@keyframes flapflip {
  0% { transform: rotateX(90deg); opacity: .2; }
  100% { transform: rotateX(0); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .flap.flip { animation: none; }
  html { scroll-behavior: auto; }
}

/* Mobile: size the board so MON 10 AUG 15:00 sits on one line on a 360px
   phone; if a screen is narrower still, whole tokens wrap, never digits. */
@media (max-width: 480px) {
  .flap { font-size: clamp(.95rem, 5vw, 1.25rem); padding: .3em .15em; border-radius: 4px; min-width: 1.35ch; }
  .flap-group { gap: 2px; }
  .flap-line { gap: 6px; }
  .panel-body { padding: .95rem; }
  .panel-head .board-updated { display: none; }
  .timeline li { flex-direction: column; gap: .15rem; padding: .6rem 0; }
  .timeline .t-when { width: auto; padding-top: 0; }
}

/* ---------- Result details ---------- */
.eta-window { margin: 1.4rem 0 .4rem; }
.range-bar { position: relative; height: 8px; background: var(--cell); border: 1px solid var(--line-soft); border-radius: 99px; margin: .9rem 0 .5rem; }
.range-fill { position: absolute; top: 1px; bottom: 1px; background: linear-gradient(90deg, var(--accent), var(--accent-dim)); border-radius: 99px; min-width: 8px; }
.range-tick { position: absolute; top: -4px; width: 2px; height: 16px; background: var(--ink); border-radius: 2px; }
.range-labels { display: flex; justify-content: space-between; font-family: var(--mono); font-size: .72rem; color: var(--dim); }
.range-labels strong { color: var(--body); font-weight: 600; }

.timeline { list-style: none; margin: 1.2rem 0 0; padding: 0; }
.timeline li { display: flex; gap: .9rem; padding: .55rem 0; border-top: 1px solid var(--line-soft); }
.timeline li:first-child { border-top: 0; }
.timeline .t-when { font-family: var(--mono); font-size: .75rem; color: var(--accent); flex: none; width: 8.5rem; padding-top: .15rem; }
.timeline .t-what { font-size: .9rem; }
.timeline .t-what strong { color: var(--ink); font-weight: 600; display: block; }
.timeline .t-what span { color: var(--dim); font-size: .84rem; }

.factor-list { list-style: none; margin: .6rem 0 0; padding: 0; font-size: .85rem; color: var(--dim); }
.factor-list li { padding: .3rem 0 .3rem 1.2rem; position: relative; }
.factor-list li::before { content: "▸"; position: absolute; left: 0; color: var(--warn); font-size: .7rem; top: .55rem; }

.confidence { display: inline-flex; align-items: center; gap: .45rem; font-family: var(--mono); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--dim); border: 1px solid var(--line); border-radius: 99px; padding: .3rem .8rem; margin-top: 1rem; }
.confidence i { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); font-style: normal; }
.confidence.medium i { background: var(--warn); }

.eta-status { margin: 1rem 0 .2rem; font-size: .9rem; }
.eta-status.overdue { border-left-color: var(--bad); }
.eta-status.overdue strong { color: var(--bad); }
.eta-status.inwindow { border-left-color: var(--warn); }
.eta-status.inwindow strong { color: var(--warn); }

#eta-bar { display: none; }
@media (max-width: 880px) {
  #eta-bar {
    position: fixed; bottom: 0; left: 0; right: 0; z-index: 60;
    display: flex; align-items: center; gap: .8rem;
    padding: .8rem 1.1rem calc(.8rem + env(safe-area-inset-bottom));
    background: rgba(10, 14, 21, .96); border-top: 1px solid var(--line);
    font-family: var(--mono); font-weight: 700; font-size: .95rem; color: var(--ink);
    transform: translateY(110%); transition: transform .25s ease; text-decoration: none;
    backdrop-filter: blur(8px);
  }
  #eta-bar:hover { text-decoration: none; }
  #eta-bar.show { transform: none; }
  #eta-bar .bar-tag { color: var(--accent); font-size: .7rem; letter-spacing: .16em; border: 1px solid var(--accent-dim); border-radius: 4px; padding: .2rem .45rem; flex: none; }
  #eta-bar.overdue .bar-tag { color: var(--bad); border-color: var(--bad); }
  #eta-bar .bar-go { margin-left: auto; color: var(--dim); }
  @media (prefers-reduced-motion: reduce) { #eta-bar { transition: none; } }
  body.bar-space .site-foot { padding-bottom: 5rem; }
}

.disclaim { font-size: .78rem; color: var(--faint); border-top: 1px dashed var(--line); margin-top: 1.2rem; padding-top: .9rem; }
.disclaim a { color: var(--dim); text-decoration: underline; text-underline-offset: 2px; }

/* ---------- Live board ---------- */
.board { margin: 3rem 0; }
.board-table { width: 100%; border-collapse: collapse; }
.board-table th {
  font-family: var(--mono); font-size: .68rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--faint); text-align: left; padding: .55rem .8rem; border-bottom: 1px solid var(--line); font-weight: 600;
}
.board-table tbody tr { transition: background-color .12s ease; }
.board-table tbody tr:hover { background: rgba(53, 213, 200, .045); }
.board-table td { padding: .7rem .8rem; border-bottom: 1px solid var(--line-soft); font-size: .88rem; vertical-align: middle; }
.board-table tr:last-child td { border-bottom: 0; }
.board-table .rail-name { color: var(--ink); font-weight: 600; white-space: nowrap; }
.board-table .rail-name a { color: inherit; }
.board-table .route { font-family: var(--mono); font-size: .74rem; color: var(--faint); white-space: nowrap; }
.board-table .typ { font-family: var(--mono); font-size: .8rem; color: var(--body); white-space: nowrap; }
.status { display: inline-flex; align-items: center; gap: .45rem; font-family: var(--mono); font-size: .72rem; letter-spacing: .06em; white-space: nowrap; }
.status i { width: 7px; height: 7px; border-radius: 50%; font-style: normal; flex: none; }
.status.open { color: var(--ok); } .status.open i { background: var(--ok); box-shadow: 0 0 6px var(--ok); }
.status.always { color: var(--accent); } .status.always i { background: var(--accent); box-shadow: 0 0 6px var(--accent); }
.status.closed { color: var(--bad); } .status.closed i { background: var(--bad); }
.status .until { color: var(--faint); letter-spacing: 0; }
.board-scroll { overflow-x: auto; }
.board-updated { font-family: var(--mono); font-size: .7rem; color: var(--dim); }

/* ---------- Sections / cards ---------- */
.section { padding: 2.6rem 0; }
.section-head { margin-bottom: 1.6rem; }
.section-head h2 { font-size: clamp(1.4rem, 3vw, 1.9rem); }
.section-head p { color: var(--dim); max-width: 60ch; }

.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1rem; }
.card {
  background: var(--panel); border: 1px solid var(--line-soft); border-radius: var(--rad);
  padding: 1.2rem 1.2rem 1.1rem; display: flex; flex-direction: column; gap: .4rem; position: relative;
  transition: border-color .15s ease, transform .15s ease;
}
a.card { color: inherit; }
a.card:hover { text-decoration: none; border-color: var(--accent-dim); transform: translateY(-2px); }
a.card:hover h3 { color: var(--accent); }
a.card:hover .card-meta { letter-spacing: .02em; }
.card-meta { transition: letter-spacing .15s ease; }
@media (prefers-reduced-motion: reduce) { .card, .card-meta { transition: none; } a.card:hover { transform: none; } }
.card .code { font-family: var(--mono); font-size: .68rem; letter-spacing: .16em; color: var(--dim); text-transform: uppercase; }
.card h3 { font-size: 1.02rem; margin: 0; }
.card p { font-size: .87rem; color: var(--dim); margin: 0; }
.card .card-meta { margin-top: auto; padding-top: .7rem; font-family: var(--mono); font-size: .72rem; color: var(--accent); }

/* ---------- Prose (guides, legal) ---------- */
.prose { max-width: 720px; }
.prose h1 { font-size: clamp(1.7rem, 4vw, 2.4rem); }
.prose h2 { font-size: 1.35rem; margin-top: 2.2em; }
.prose h3 { font-size: 1.08rem; margin-top: 1.8em; }
.prose ul, .prose ol { padding-left: 1.3rem; margin: 0 0 1.1em; }
.prose li { margin-bottom: .45em; }
.prose li::marker { color: var(--accent); }
.prose strong { color: var(--ink); }
.prose blockquote { border-left: 3px solid var(--accent-dim); margin: 1.4em 0; padding: .2em 0 .2em 1.1em; color: var(--dim); }
.prose table { width: 100%; border-collapse: collapse; margin: 1.4em 0; font-size: .88rem; }
.prose th { font-family: var(--mono); font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: var(--dim); text-align: left; padding: .5rem .7rem; border-bottom: 1px solid var(--line); }
.prose td { padding: .55rem .7rem; border-bottom: 1px solid var(--line-soft); }
.prose td:first-child { color: var(--ink); font-weight: 600; }
.table-scroll { overflow-x: auto; }
.byline { font-family: var(--mono); font-size: .75rem; color: var(--dim); margin: 1rem 0 2rem; display: flex; gap: 1.2rem; flex-wrap: wrap; }

.callout {
  background: var(--panel); border: 1px solid var(--line-soft); border-left: 3px solid var(--accent);
  border-radius: var(--rad-sm); padding: 1rem 1.1rem; margin: 1.5em 0; font-size: .9rem;
}
.callout strong { color: var(--ink); }
.callout.warn { border-left-color: var(--warn); }

/* Partner links: labelled at the point of use, never inside the tool. */
.callout.partner { border-left-color: var(--dim); }
.callout.partner ul { margin: .7rem 0 .9rem; padding-left: 1.2rem; }
.callout.partner li { margin-bottom: .4rem; }
.callout.partner li::marker { color: var(--dim); }
.partner-tag {
  display: inline-block; font-family: var(--mono); font-size: .68rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--bg-deep); background: var(--dim);
  border-radius: 3px; padding: .22em .55em; margin-right: .45rem; vertical-align: .08em;
}
/* On phones the inline chip was ~10px and easy to miss. A disclosure label
   has to be conspicuous, so it becomes a standalone badge above the text. */
@media (max-width: 600px) {
  .partner-tag {
    display: block; width: fit-content; font-size: .74rem;
    margin: 0 0 .55rem; padding: .3em .7em; vertical-align: baseline;
  }
}

/* ---------- FAQ accordion ---------- */
.faq-list { max-width: 760px; }
.faq-list details { border: 1px solid var(--line-soft); border-radius: var(--rad-sm); background: var(--panel); margin-bottom: .6rem; }
.faq-list summary {
  cursor: pointer; padding: .95rem 1.1rem; font-weight: 600; color: var(--ink); list-style: none;
  display: flex; justify-content: space-between; align-items: center; gap: 1rem; font-size: .95rem;
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { content: "+"; font-family: var(--mono); color: var(--accent); font-size: 1.1rem; flex: none; }
.faq-list details[open] summary::after { content: "–"; }
.faq-list .faq-a { padding: 0 1.1rem 1rem; color: var(--dim); font-size: .9rem; }

/* ---------- Footer ---------- */
.site-foot { border-top: 1px solid var(--line-soft); background: var(--bg-deep); margin-top: auto; padding: 2.4rem 0 2rem; }
.foot-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 2rem; }
@media (max-width: 780px) { .foot-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .foot-grid { grid-template-columns: 1fr; } }
.foot-grid h4 { font-family: var(--mono); font-size: .7rem; letter-spacing: .16em; text-transform: uppercase; color: var(--faint); margin-bottom: .8rem; }
.foot-grid ul { list-style: none; margin: 0; padding: 0; }
.foot-grid li { margin-bottom: .45rem; }
.foot-grid a { color: var(--dim); font-size: .85rem; }
.foot-grid a:hover { color: var(--accent); }
.foot-brand p { font-size: .84rem; color: var(--faint); max-width: 34ch; }
.foot-family { margin: 2rem 0 0; font-size: .82rem; color: var(--dim); }
.foot-family a { color: var(--dim); text-decoration: underline; text-underline-offset: 3px; }
.foot-family a:hover { color: var(--accent); }
.foot-legal { margin-top: 1.2rem; padding-top: 1.2rem; border-top: 1px solid var(--line-soft); display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; font-family: var(--mono); font-size: .72rem; color: var(--faint); }
.foot-pf {
  display: inline-flex; align-items: center; gap: .45rem;
  color: var(--faint); font-family: var(--mono); font-size: .72rem; letter-spacing: .04em;
  transition: color .12s ease;
}
.foot-pf::before { content: ""; width: 5px; height: 5px; border-radius: 1px; background: var(--line); transition: background-color .12s ease; }
.foot-pf:hover { color: var(--dim); text-decoration: none; }
.foot-pf:hover::before { background: var(--accent); }

/* ---------- Feature rows ---------- */
.feature-row { display: grid; grid-template-columns: 1fr 1fr; gap: 2.4rem; align-items: center; padding: 2.2rem 0; border-top: 1px solid var(--line-soft); }
.feature-row:first-of-type { border-top: 0; }
@media (max-width: 780px) { .feature-row { grid-template-columns: 1fr; gap: 1.2rem; } }
.feature-row h3 { font-size: 1.25rem; }
.feature-row p { color: var(--dim); font-size: .94rem; }
.feature-visual { background: var(--panel); border: 1px solid var(--line-soft); border-radius: var(--rad); padding: 1.4rem; font-family: var(--mono); font-size: .8rem; color: var(--dim); }

/* ---------- Misc ---------- */
.toast {
  position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%) translateY(80px);
  background: var(--ink); color: var(--bg-deep); font-family: var(--mono); font-size: .82rem; font-weight: 600;
  padding: .7rem 1.2rem; border-radius: 8px; box-shadow: var(--shadow); z-index: 90; opacity: 0;
  transition: transform .25s ease, opacity .25s ease; pointer-events: none; max-width: 90vw; text-align: center;
}
.toast.show { transform: translateX(-50%) translateY(0); opacity: 1; }

.crumbs { font-family: var(--mono); font-size: .72rem; color: var(--faint); margin: 1.6rem 0 0; }
.crumbs a { color: var(--dim); }
.crumbs span { margin: 0 .4rem; color: var(--line); }

.error-hero { text-align: center; padding: 5rem 1rem; }
.error-hero .code-big { font-family: var(--mono); font-size: clamp(3.5rem, 12vw, 6rem); font-weight: 700; color: var(--accent); letter-spacing: .05em; }

@media print {
  .site-head, .site-foot, .btn-row, .nav-toggle, .board, .toast { display: none !important; }
  body { background: #fff; color: #111; }
  .panel { border-color: #ccc; background: #fff; }
  .flap { background: #fff; color: #111; border-color: #999; }
  h1, h2, h3, .timeline .t-what strong { color: #000; }
}