/* Transit Hunter — marketing site.
   One stylesheet for every page, so a second page costs no extra request.
   No web fonts: the system stack renders immediately and there is no
   render-blocking round trip to a font host. */

:root {
  --bg: #0a0e17;
  --bg-raised: #111725;
  --bg-sunken: #070b12;
  --border: #232c40;
  --border-strong: #33405c;
  --text: #e8edf7;
  --text-dim: #9aa7bd;
  --text-faint: #6b7789;
  --accent: #4da3ff;
  --accent-soft: rgba(77, 163, 255, 0.12);
  --good: #38d39f;
  --ok: #ffc857;
  --poor: #ff7a6b;
  --wrap: 1080px;
  --radius: 14px;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, system-ui, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  /* Belt and braces against horizontal scroll on small screens: any single
     over-wide child would otherwise widen the whole document. */
  overflow-x: hidden;
}

img, svg { max-width: 100%; height: auto; }

a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: #7ebcff; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 20px; }

.skip {
  position: absolute; left: -9999px; top: 0;
  background: var(--accent); color: #0a0e17;
  padding: 10px 16px; border-radius: 0 0 8px 0; font-weight: 600; z-index: 100;
}
.skip:focus { left: 0; }

/* ---------- header ---------- */

.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(10, 14, 23, 0.85);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
}
.site-header .wrap {
  display: flex; align-items: center; gap: 16px;
  min-height: 62px; flex-wrap: wrap;
}
.brand {
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 700; font-size: 1.05rem; color: var(--text);
  text-decoration: none; margin-right: auto;
}
.brand:hover { color: var(--text); }
.brand-mark { font-size: 1.15rem; line-height: 1; }

.site-nav { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.site-nav a {
  color: var(--text-dim); text-decoration: none;
  padding: 7px 11px; border-radius: 8px; font-size: 0.94rem;
}
.site-nav a:hover { color: var(--text); background: var(--bg-raised); }
.site-nav a[aria-current="page"] { color: var(--text); background: var(--bg-raised); }

/* `.site-nav a` is (0,1,1) and `.btn-primary` only (0,1,0), so without these
   the nav's dim link colour wins and the header CTA renders blue-grey on
   blue — text that is technically present and effectively unreadable. */
.site-nav a.btn-primary { color: #061018; }
.site-nav a.btn-primary:hover { color: #061018; background: #6fb5ff; }
.site-nav a.btn-ghost { color: var(--text); }

/* ---------- buttons ---------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 11px 20px; border-radius: 10px;
  font-weight: 600; font-size: 0.97rem; text-decoration: none;
  border: 1px solid transparent; cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.btn-primary { background: var(--accent); color: #061018; }
.btn-primary:hover { background: #6fb5ff; color: #061018; }
.btn-ghost { border-color: var(--border-strong); color: var(--text); background: transparent; }
.btn-ghost:hover { border-color: var(--accent); color: var(--text); background: var(--accent-soft); }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }

/* ---------- sections ---------- */

section { padding: 72px 0; border-top: 1px solid var(--border); }
section:first-of-type { border-top: 0; }

.eyebrow {
  font-size: 0.78rem; font-weight: 700; letter-spacing: 0.09em;
  text-transform: uppercase; color: var(--accent); margin: 0 0 12px;
}
h1, h2, h3 { line-height: 1.2; letter-spacing: -0.02em; margin: 0 0 16px; }
h1 { font-size: clamp(2rem, 5.2vw, 3.15rem); font-weight: 700; }
h2 { font-size: clamp(1.55rem, 3.6vw, 2.15rem); font-weight: 700; }
h3 { font-size: 1.09rem; font-weight: 650; letter-spacing: -0.01em; }
.lede { font-size: clamp(1.02rem, 2vw, 1.16rem); color: var(--text-dim); max-width: 68ch; }
.section-intro { max-width: 70ch; margin-bottom: 40px; }
p { margin: 0 0 16px; }
p:last-child { margin-bottom: 0; }

/* ---------- hero ---------- */

.hero { padding: 84px 0 72px; }
.hero h1 { max-width: 20ch; }
.hero .lede { margin-bottom: 28px; }
.hero .btn-row { margin-bottom: 14px; }
.hero-note { font-size: 0.9rem; color: var(--text-faint); margin: 0; }

/* ---------- cards ---------- */

.grid { display: grid; gap: 18px; }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(258px, 1fr)); }

.card {
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 22px;
}
.card h3 { margin-bottom: 8px; }
.card p { color: var(--text-dim); font-size: 0.96rem; margin: 0; }
.card-icon { font-size: 1.35rem; line-height: 1; display: block; margin-bottom: 12px; }

/* ---------- steps ---------- */

.steps { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.step {
  background: var(--bg-raised); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 22px; position: relative;
}
.step-num {
  font-family: var(--mono); font-size: 0.8rem; font-weight: 600;
  color: var(--accent); display: block; margin-bottom: 10px;
}
.step h3 { margin-bottom: 8px; }
.step p { color: var(--text-dim); font-size: 0.96rem; margin: 0; }

/* ---------- stats ---------- */

.stats { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.stat {
  background: var(--bg-raised); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 22px;
}
.stat-value {
  font-family: var(--mono); font-size: 1.75rem; font-weight: 600;
  color: var(--text); display: block; line-height: 1.1; margin-bottom: 8px;
}
.stat-label { font-size: 0.88rem; color: var(--text-dim); }

/* ---------- factor table ---------- */

.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--border); border-radius: var(--radius); }
table { border-collapse: collapse; width: 100%; min-width: 460px; font-size: 0.95rem; }
caption { text-align: left; color: var(--text-faint); font-size: 0.88rem; padding: 0 0 12px; }
th, td { text-align: left; padding: 12px 16px; border-bottom: 1px solid var(--border); }
thead th { background: var(--bg-sunken); color: var(--text-dim); font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600; }
tbody tr:last-child td { border-bottom: 0; }
td.num { font-family: var(--mono); color: var(--accent); text-align: right; width: 1%; white-space: nowrap; }
td.yes { color: var(--good); }
td.no { color: var(--text-faint); }

/* ---------- callout ---------- */

.callout {
  background: var(--bg-raised); border: 1px solid var(--border-strong);
  border-left: 3px solid var(--accent);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 20px 22px; margin: 28px 0 0;
}
.callout p { color: var(--text-dim); font-size: 0.96rem; }
.callout strong { color: var(--text); }

.safety {
  background: rgba(255, 122, 107, 0.07);
  border: 1px solid rgba(255, 122, 107, 0.3);
  border-left: 3px solid var(--poor);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 20px 22px;
}
.safety h3 { color: var(--poor); }
.safety p { color: var(--text-dim); font-size: 0.94rem; }

/* ---------- checklist ---------- */

.checks { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; }
.checks li { padding-left: 28px; position: relative; color: var(--text-dim); font-size: 0.97rem; }
.checks li::before {
  content: "\2713"; position: absolute; left: 0; top: 0;
  color: var(--good); font-weight: 700;
}
.checks strong { color: var(--text); font-weight: 600; }

/* ---------- diagram ---------- */

.figure { margin: 0; }
.figure svg { display: block; width: 100%; height: auto; background: var(--bg-sunken); border: 1px solid var(--border); border-radius: var(--radius); }
figcaption { color: var(--text-faint); font-size: 0.87rem; margin-top: 12px; }

/* ---------- faq ---------- */

.faq { display: grid; gap: 12px; }
.faq details {
  background: var(--bg-raised); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 0;
}
.faq summary {
  cursor: pointer; padding: 18px 22px; font-weight: 600;
  list-style: none; display: flex; justify-content: space-between; gap: 16px; align-items: center;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--accent); font-size: 1.3rem; font-weight: 400; line-height: 1; flex: none; }
.faq details[open] summary::after { content: "\2212"; }
.faq details > p { padding: 0 22px 18px; color: var(--text-dim); font-size: 0.96rem; margin: 0; }

/* ---------- cta ---------- */

.cta { text-align: center; }
.cta .lede { margin: 0 auto 28px; }
.cta .btn-row { justify-content: center; }

/* ---------- footer ---------- */

.site-footer {
  border-top: 1px solid var(--border);
  background: var(--bg-sunken);
  padding: 56px 0 40px;
  font-size: 0.93rem;
}
.footer-cols {
  display: grid; gap: 32px;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  margin-bottom: 36px;
}
.footer-cols h2 {
  font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.09em;
  color: var(--text-faint); font-weight: 700; margin: 0 0 14px;
}
.footer-cols ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 9px; }
.footer-cols a { color: var(--text-dim); text-decoration: none; }
.footer-cols a:hover { color: var(--accent); text-decoration: underline; }
.footer-cols address { font-style: normal; color: var(--text-dim); line-height: 1.6; }
.footer-legal {
  border-top: 1px solid var(--border);
  padding-top: 24px; color: var(--text-faint); font-size: 0.87rem;
  display: grid; gap: 8px;
}

/* ---------- 404 ---------- */

.notfound { padding: 100px 0; text-align: center; }
.notfound .code { font-family: var(--mono); font-size: 3.4rem; color: var(--accent); margin: 0 0 8px; line-height: 1; }

@media (max-width: 640px) {
  body { font-size: 16px; }
  section { padding: 56px 0; }
  .hero { padding: 56px 0 52px; }
  .site-header .wrap { min-height: 56px; padding-top: 8px; padding-bottom: 8px; }
  .site-nav { gap: 0; }
  .site-nav a { padding: 6px 8px; font-size: 0.88rem; }
  /* Only the in-page button rows go full width. Scoping this to .btn-row
     matters: the header CTA is a .btn too, and stretching it turns a sticky
     header into a 250px band that eats a third of the phone viewport. */
  .btn-row { flex-direction: column; }
  .btn-row .btn { width: 100%; }
  /* width:auto is explicit, not defensive: the nav is a wrapping flex
     container and the CTA lands on a line of its own, where anything but an
     explicit auto leaves it spanning the full width and turns the sticky
     header into a band a third of the viewport tall. */
  .site-nav .btn { width: auto; padding: 7px 14px; font-size: 0.88rem; }
}

/* ---------- language switcher ---------- */

/* Two links and nothing else. The site ships no JavaScript and its CSP says
   `script-src 'none'`, so a <select> that needs an onchange handler is not
   available here -- and would not be an improvement: anchors are reachable by
   keyboard, work with scripting disabled, can be opened in a new tab, and need
   no ARIA beyond naming the group and marking the current entry. */
.lang-switch {
  display: flex;
  align-items: center;
  gap: 2px;
  /* The brand already carries `margin-right: auto`, so the switcher simply
     follows the primary nav and both stay on the right. */

  /* Four languages rather than two, so the control is about twice as wide as it
     was. The header's own `.wrap` already wraps, which on a narrow screen moves
     the whole switcher onto a line of its own; `flex-wrap` here is the second
     line of defence, for a viewport where even that line cannot hold four
     labels. It wraps rather than shrinking -- the type stays the size it is. */
  flex-wrap: wrap;
  row-gap: 2px;
}
.lang-switch a {
  color: var(--text-faint);
  text-decoration: none;
  font-size: 0.86rem;
  padding: 6px 9px;
  border-radius: 8px;
  border: 1px solid transparent;
  white-space: nowrap;
}
.lang-switch a:hover { color: var(--text); background: var(--bg-raised); }

/* The current language, marked for a screen reader by aria-current and for
   everyone else by contrast -- never by colour alone. */
.lang-switch a[aria-current] {
  color: var(--text);
  background: var(--bg-raised);
  border-color: var(--border);
}

/* Focus must be visible: this is the one control on the site whose whole
   purpose is to be found by someone who cannot read the language around it. */
.lang-switch a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.lang-switch .sep { color: var(--border-strong); font-size: 0.8rem; user-select: none; }

@media (max-width: 640px) {
  .lang-switch a { padding: 5px 7px; font-size: 0.82rem; }
}

/* The narrowest phones. Horizontal padding only -- the label text is NOT made
   smaller to force four languages onto one row. At 360px this is what keeps
   `English · 日本語 · Español · Français` on a single line; below it, the
   `flex-wrap` above takes over and the row breaks cleanly in two. */
@media (max-width: 380px) {
  .lang-switch a { padding: 5px 5px; }
  .lang-switch { gap: 0; }
}

/* ---------- Japanese typography ---------- */

/* Applied by language, not by URL, so it is correct on the Japanese pages and
   equally correct for the single 日本語 label sitting on an English page.
   No web font is loaded or could be: `font-src 'self'` forbids it, and the
   site deliberately makes no third-party request. Everything below is a font
   the reader's own system already has. */
:root {
  --font-ja:
    -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Hiragino Kaku Gothic ProN",
    "Yu Gothic UI", "Yu Gothic", "Noto Sans JP", Meiryo, "Segoe UI", Roboto,
    system-ui, sans-serif;
}

/* Bare :lang(ja) so it reaches the switcher's own Japanese label on an English
   page. Font family only -- nothing here can move an English layout. */
:lang(ja) { font-family: var(--font-ja); }

/* Everything that changes spacing is scoped to a Japanese PAGE, so English
   rendering is untouched by construction rather than by careful choice. */
html[lang="ja"] body {
  /* Japanese needs more leading than Latin text: the glyphs are dense, full
     height, and have no descender-led rhythm to help the eye find the next
     line. 1.65 is comfortable for English and cramped here. */
  line-height: 1.9;
  /* Japanese breaks between characters rather than at spaces, so the default
     is already correct; `strict` additionally stops a small kana or a closing
     bracket from being stranded at the start of a line. */
  line-break: strict;
  word-break: normal;
  overflow-wrap: anywhere;
}

/* The English headings are tracked in NEGATIVE letter-spacing, which is a
   Latin display convention. Applied to kanji it pulls glyphs into each other
   and reads as a rendering fault, so it is neutralised rather than reduced. */
html[lang="ja"] h1,
html[lang="ja"] h2,
html[lang="ja"] h3 {
  letter-spacing: normal;
  line-height: 1.45;
}

/* `.eyebrow`, `.stat-label`, table headings and `.footer-cols h2` are uppercased
   Latin micro-labels with wide tracking. Uppercase does nothing to Japanese and
   the tracking simply spaces the characters apart, so both are dropped. */
html[lang="ja"] .eyebrow,
html[lang="ja"] thead th,
html[lang="ja"] .footer-cols h2 {
  text-transform: none;
  letter-spacing: 0.02em;
}

/* Figures stay Latin and keep their own tracking; only the caption beneath is
   Japanese. */
html[lang="ja"] .stat-label { letter-spacing: normal; }