/* JetTransfer public site.
   One stylesheet, no runtime third-party request of any kind — the two
   typefaces are vendored under /fonts (see fonts/README.txt).

   Register: an operations document. This is dispatch software, so the site is
   set like a well-made timetable — Newsreader for the headings, IBM Plex Mono
   for labels, numerals and anything the system would actually print, hairlines
   instead of floating boxes, and flat colour with no gradients or glow.

   Green #0baa4b and the amber origin marker #f6b23d come from
   packages/web-ui design tokens, so the site and the app are one brand.

   Section shapes deliberately differ: the dispatch conditions are a ruled
   spec table because that is what they are, the booking flow is a numbered
   editorial list, payment is a single full-width statement. Uniform rhythm
   is what makes a page look generated. */

/* ============================================================
   1. Vendored faces — latin and latin-ext per weight.
   The split is load-bearing, not an optimisation: ı sits in latin, but
   İ ğ Ğ ş Ş live only in latin-ext, and Turkish is half this site.
   ============================================================ */

@font-face {
  font-family: "Newsreader"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("/fonts/newsreader-600-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Newsreader"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("/fonts/newsreader-600-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("/fonts/plexmono-400-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("/fonts/plexmono-400-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("/fonts/plexmono-500-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("/fonts/plexmono-500-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ============================================================
   2. Tokens
   ============================================================ */

:root {
  --font-display: "Newsreader", Georgia, "Times New Roman", serif;
  --font-mono:    "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --font-sans:    ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
                  "Helvetica Neue", Arial, sans-serif;

  /* dark frame — flat, no glow */
  --ink-900:  #0a1611;
  --ink-800:  #0f1f18;
  --ink-700:  #172c22;
  --on-dark:      #eef2ee;
  --on-dark-soft: #b8c7bd;
  --on-dark-mute: #8b9d92;
  --rule-dark:    #22352b;

  /* paper — warm, so it reads as printed rather than as a UI chrome grey */
  --paper:     #f6f5f1;
  --surface:   #ffffff;
  --surface-2: #edece6;
  --rule:      #dcdbd3;
  --rule-soft: #e8e7e1;
  --ink:       #121a15;
  --ink-soft:  #3b4841;
  --muted:     #5c6a62;

  /* brand */
  --green:      #0baa4b;
  --green-mark: #22d36b;
  --green-ink:  #0a7439;
  --green-soft: #e9f4ec;
  --amber:      #f6b23d;
  --amber-ink:  #7a5205;
  --amber-soft: #f9f0dd;

  --maxw: 1120px;
  --ease: cubic-bezier(0.2, 0.6, 0.35, 1);
}

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: 80px;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 16.5px;
  color: var(--ink);
  background: var(--paper);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 28px; }
.narrow { max-width: 760px; }

a { color: var(--green-ink); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: #06542a; }

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

:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; }
::selection { background: #cdebd8; color: #062915; }

/* display and label registers */
h1, h2 {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.014em;
  text-wrap: balance;
}
h3 {
  font-family: var(--font-sans);
  font-size: 16.5px; font-weight: 640; letter-spacing: -0.012em;
  margin: 0 0 7px; line-height: 1.35;
}

/* the mono label used for every section kicker and micro-heading */
.kicker {
  font-family: var(--font-mono); font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.13em; font-size: 11.5px;
  color: var(--green-ink); margin: 0 0 18px;
  display: block;
}

/* ============================================================
   3. Header — flat dark, no blur
   ============================================================ */

.site-head {
  position: sticky; top: 0; z-index: 40;
  background: var(--ink-900);
  border-bottom: 1px solid var(--rule-dark);
}
.site-head .wrap { display: flex; align-items: center; gap: 26px; min-height: 62px; }

.brand {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-display); font-size: 20px; font-weight: 600;
  letter-spacing: -0.01em; color: #fff; text-decoration: none;
  white-space: nowrap; flex-shrink: 0;
}
.brand .mark {
  width: 22px; height: 22px; border-radius: 3px;
  background: var(--green); display: inline-grid; place-items: center;
}
.brand .mark svg { width: 13px; height: 13px; }

nav.site-nav { margin-left: auto; display: flex; align-items: center; gap: 2px; min-width: 0; }
nav.site-nav a {
  color: var(--on-dark-soft); text-decoration: none;
  font-size: 14.5px; font-weight: 450;
  padding: 6px 11px; border-radius: 3px; white-space: nowrap;
  transition: color 0.15s var(--ease);
}
nav.site-nav a:hover { color: #fff; }
nav.site-nav a.lang {
  font-family: var(--font-mono); font-size: 11.5px; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--on-dark); border: 1px solid var(--rule-dark);
  padding: 6px 11px; margin-left: 10px;
}
nav.site-nav a.lang:hover { border-color: #3c5548; }

/* ============================================================
   4. Hero — flat dark field, type does the work
   ============================================================ */

.hero {
  background: var(--ink-900);
  color: var(--on-dark);
  padding: 88px 0 92px;
  border-bottom: 1px solid var(--rule-dark);
}
.hero.compact { padding: 66px 0 70px; }

.hero-grid {
  display: grid; gap: 60px;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
  align-items: start;
}

/* the standing label above the headline, ruled off like a document header */
.eyebrow {
  font-family: var(--font-mono); font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.13em; font-size: 11.5px;
  color: var(--green-mark);
  margin: 0 0 26px; padding-bottom: 14px;
  border-bottom: 1px solid var(--rule-dark);
  display: block;
}

h1 {
  font-size: clamp(38px, 5.6vw, 66px);
  line-height: 1.03; margin: 0 0 22px; color: #fff;
  letter-spacing: -0.018em;
  max-width: 17ch;
}
.hero.compact h1 { font-size: clamp(34px, 4.6vw, 52px); max-width: 19ch; }

.hero p.lede {
  font-size: 17.5px; color: var(--on-dark-soft);
  max-width: 54ch; margin: 0 0 34px; text-wrap: pretty;
}

.cta-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 46px; padding: 12px 22px;
  font-family: var(--font-sans); font-size: 15px; font-weight: 600;
  letter-spacing: -0.005em; text-decoration: none;
  border: 1px solid transparent; border-radius: 4px; cursor: pointer;
  transition: background-color 0.15s var(--ease), border-color 0.15s var(--ease), color 0.15s var(--ease);
}
.btn-primary { background: var(--green); color: #062915; border-color: var(--green); }
.btn-primary:hover { background: var(--green-mark); border-color: var(--green-mark); color: #062915; }
.btn-ghost { background: transparent; color: var(--on-dark); border-color: #35493d; }
.btn-ghost:hover { background: #16241d; border-color: #4a6255; color: #fff; }

/* on paper */
section .btn-primary { background: var(--green-ink); border-color: var(--green-ink); color: #fff; }
section .btn-primary:hover { background: #06542a; border-color: #06542a; color: #fff; }
section .btn-ghost { background: transparent; color: var(--ink); border-color: #c5c4bb; }
section .btn-ghost:hover { background: var(--surface-2); border-color: #adaca2; color: var(--ink); }

/* ---- hero figure: one trip, as the system would print it ---- */

.hero-figure { margin: 0; min-width: 0; }

.trip-card {
  background: var(--ink-800);
  border: 1px solid var(--rule-dark);
  border-radius: 4px;
  padding: 0;
}

.tc-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 18px; border-bottom: 1px solid var(--rule-dark);
}
.tc-status {
  font-family: var(--font-mono); font-weight: 500; font-size: 11.5px;
  text-transform: uppercase; letter-spacing: 0.11em; color: var(--green-mark);
  display: inline-flex; align-items: center; gap: 8px;
}
.tc-status .d { width: 6px; height: 6px; border-radius: 50%; background: var(--green-mark); }
.tc-when {
  font-family: var(--font-mono); font-size: 12.5px; color: var(--on-dark-mute);
  font-variant-numeric: tabular-nums;
}

.tc-route { padding: 20px 18px 18px; display: grid; gap: 20px; position: relative; }
.tc-route::before {
  content: ""; position: absolute; left: 22px; top: 32px; bottom: 32px; width: 1px;
  background: var(--rule-dark);
}
.tc-leg { display: grid; grid-template-columns: 9px 1fr; gap: 16px; align-items: start; }
.tc-pin {
  width: 9px; height: 9px; margin-top: 6px; border-radius: 50%;
  background: var(--amber); position: relative; z-index: 1;
  box-shadow: 0 0 0 3px var(--ink-800);
}
.tc-pin.to { background: var(--green-mark); }
.tc-leg b { display: block; color: #fff; font-size: 15px; font-weight: 600; letter-spacing: -0.01em; }
.tc-leg span { display: block; color: var(--on-dark-mute); font-size: 13px; margin-top: 2px; }

.tc-meta {
  display: flex; flex-wrap: wrap; gap: 18px;
  padding: 14px 18px; border-top: 1px solid var(--rule-dark);
}
.tc-meta span {
  font-family: var(--font-mono); font-size: 12.5px; color: var(--on-dark-soft);
  font-variant-numeric: tabular-nums;
}

.tc-checks { border-top: 1px solid var(--rule-dark); padding: 16px 18px; }
.tc-checks .lbl {
  display: block; font-family: var(--font-mono); font-weight: 500;
  color: var(--on-dark-mute); font-size: 11px;
  text-transform: uppercase; letter-spacing: 0.12em; margin-bottom: 12px;
}
.tc-check {
  display: flex; align-items: center; gap: 9px;
  color: var(--on-dark-soft); font-size: 14px; padding: 3px 0;
}
.tc-check svg {
  width: 12px; height: 12px; stroke: var(--green-mark);
  fill: none; stroke-width: 2.6; flex-shrink: 0;
}

.hero-figure figcaption {
  color: var(--on-dark-mute); font-size: 13px; margin-top: 14px; text-wrap: pretty;
}

/* ============================================================
   5. Sections
   ============================================================ */

section { padding: 84px 0; }
section.tint { background: var(--surface); border-block: 1px solid var(--rule); }

.sec-head { max-width: 60ch; margin-bottom: 40px; }
h2 { font-size: clamp(28px, 3.4vw, 42px); line-height: 1.1; margin: 0 0 16px; }
.sec-head p, p.body { color: var(--ink-soft); margin: 0; font-size: 17px; text-wrap: pretty; }

/* ============================================================
   6. Card groups — flat, hairline, no lift
   ============================================================ */

/* Cards are cells in a ruled sheet: a hairline above every cell and between
   columns, none around the outside. Column counts are stated explicitly rather
   than left to auto-fit, because the "is this cell in column one" test below is
   an nth-child rule and has to agree with the real column count at every width
   — with auto-fit a wrapped row grows a stray rule down its left edge. */
.grid { display: grid; gap: 0; }
.g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.card {
  padding: 26px 28px 28px;
  border-top: 1px solid var(--rule);
  border-left: 1px solid var(--rule);
  background: none;
}
/* column one carries no rule and no indent, so its text hangs on the same
   vertical as the section heading above it */
.g2 > .card:nth-child(2n + 1),
.g3 > .card:nth-child(3n + 1) { border-left: 0; padding-left: 0; }

.card p { margin: 0; color: var(--muted); font-size: 15.5px; text-wrap: pretty; }
.card a { font-weight: 600; text-decoration: none; }
.card a:hover { text-decoration: underline; }

/* ============================================================
   7. Booking flow — numbered editorial list, no boxes
   ============================================================ */

ol.steps { counter-reset: s; list-style: none; padding: 0; margin: 0; }
ol.steps > li {
  counter-increment: s;
  display: grid; grid-template-columns: 68px 1fr; gap: 0 28px;
  padding: 26px 0; border-top: 1px solid var(--rule);
}
ol.steps > li:last-child { border-bottom: 1px solid var(--rule); }
/* the numeral holds column one for the whole row; heading and body are
   siblings, so both are pinned to column two rather than flowing into it */
ol.steps > li::before {
  content: counter(s, decimal-leading-zero);
  grid-column: 1; grid-row: 1 / span 2;
  font-family: var(--font-mono); font-weight: 500; font-size: 13px;
  color: var(--green-ink); letter-spacing: 0.04em;
  padding-top: 2px;
}
ol.steps > li > h3 { grid-column: 2; grid-row: 1; }
ol.steps > li > p  { grid-column: 2; grid-row: 2; }
ol.steps h3 { margin-bottom: 6px; }
ol.steps p { margin: 0; color: var(--muted); font-size: 15.5px; max-width: 68ch; text-wrap: pretty; }

/* ============================================================
   8. Conditions — a ruled spec table, because that is what it is
   ============================================================ */

.rows { border-top: 1px solid var(--ink); }
.row {
  display: grid; grid-template-columns: minmax(180px, 260px) 1fr;
  gap: 28px; padding: 18px 0; margin: 0;
  border-bottom: 1px solid var(--rule);
}
.row dt {
  font-family: var(--font-mono); font-weight: 500; font-size: 13.5px;
  letter-spacing: 0.01em; margin: 0; color: var(--ink);
  display: flex; gap: 10px; align-items: baseline;
}
.row dt::before {
  content: ""; flex: none; align-self: flex-start; margin-top: 7px;
  width: 9px; height: 5px;
  border-left: 1.6px solid var(--green); border-bottom: 1.6px solid var(--green);
  transform: rotate(-45deg);
}
.row dd { margin: 0; color: var(--muted); font-size: 15.5px; text-wrap: pretty; }

/* ============================================================
   9. Lifecycle — a printed track
   ============================================================ */

.lifecycle {
  display: flex; flex-wrap: wrap; gap: 0 6px; align-items: center;
  margin-top: 10px;
}
.stage {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-mono); font-size: 12.5px; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--ink); padding: 8px 0;
}
.stage .d { width: 6px; height: 6px; border-radius: 50%; background: var(--green); }
.stage.pending .d { background: #b6b5ac; }
.arrow { color: #a9a8a0; font-family: var(--font-mono); font-size: 13px; padding: 0 4px; }

/* ============================================================
   10. Callouts
   ============================================================ */

.note {
  border-left: 2px solid var(--green);
  padding: 4px 0 4px 22px; margin: 0;
  color: var(--ink-soft); font-size: 16px; text-wrap: pretty;
  max-width: 76ch;
}
.note.plain { border-left-color: #bdbcb3; color: var(--muted); }

/* a section that is one sentence and should read like one */
section.statement { background: var(--ink-900); color: var(--on-dark); border-block: 0; }
section.statement .kicker { color: var(--green-mark); }
section.statement h2 {
  color: #fff; font-size: clamp(30px, 4.2vw, 50px); max-width: 20ch; margin-bottom: 20px;
}
section.statement p.body { color: var(--on-dark-soft); font-size: 17.5px; max-width: 62ch; }
section.statement a { color: var(--green-mark); }

/* ============================================================
   11. Diagram figures
   ============================================================ */

figure.diagram { margin: 0; }
figure.diagram svg { width: 100%; height: auto; display: block; }
figure.diagram figcaption { color: var(--muted); font-size: 14px; margin-top: 12px; }

/* ============================================================
   12. FAQ
   ============================================================ */

details.faq { border-bottom: 1px solid var(--rule); }
details.faq:first-of-type { border-top: 1px solid var(--ink); }
details.faq summary {
  cursor: pointer; list-style: none;
  font-size: 17px; font-weight: 600; letter-spacing: -0.012em;
  display: flex; justify-content: space-between; align-items: baseline; gap: 20px;
  padding: 20px 0;
}
details.faq summary::-webkit-details-marker { display: none; }
details.faq summary:hover { color: var(--green-ink); }
details.faq summary::after {
  content: "+"; flex: none;
  font-family: var(--font-mono); font-weight: 400; font-size: 16px;
  color: var(--muted); line-height: 1;
}
details.faq[open] summary::after { content: "–"; }
details.faq p {
  color: var(--muted); font-size: 15.5px; margin: 0 0 22px;
  max-width: 70ch; text-wrap: pretty;
}

/* ============================================================
   13. Footer
   ============================================================ */

.site-foot {
  background: var(--ink-900); color: var(--on-dark-soft);
  padding: 66px 0 40px; font-size: 14.5px;
  border-top: 1px solid var(--rule-dark);
}
.site-foot a { color: var(--on-dark-soft); text-decoration: none; transition: color 0.15s var(--ease); }
.site-foot a:hover { color: #fff; }

.foot-grid { display: grid; gap: 34px 28px; grid-template-columns: 1.5fr repeat(3, minmax(130px, 1fr)); }
.foot-grid h4 {
  font-family: var(--font-mono); font-weight: 500;
  color: var(--on-dark-mute); font-size: 11px; margin: 0 0 16px;
  text-transform: uppercase; letter-spacing: 0.12em;
}
.foot-grid ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.foot-grid p { color: var(--on-dark-mute); line-height: 1.6; }

.foot-brand {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-display); font-size: 19px; font-weight: 600;
  color: #fff; margin-bottom: 14px;
}
.foot-brand .mark {
  width: 20px; height: 20px; border-radius: 3px; background: var(--green);
  display: grid; place-items: center;
}
.foot-brand .mark svg { width: 12px; height: 12px; }

.foot-legal {
  border-top: 1px solid var(--rule-dark); margin-top: 46px; padding-top: 24px;
  color: var(--on-dark-mute); font-size: 13px; max-width: 84ch;
}
.foot-legal strong { color: var(--on-dark-soft); font-weight: 600; }

/* ============================================================
   14. Legal pages
   ============================================================ */

.legal { padding: 60px 0 84px; }
.legal h1 {
  color: var(--ink); font-size: clamp(30px, 4vw, 44px);
  max-width: 22ch; margin: 0 0 18px; line-height: 1.08;
}
.legal .muted { color: var(--muted); font-size: 14px; font-family: var(--font-mono); }
.legal .stamp { margin: 0 0 34px; }
.legal .draft {
  border-left: 2px solid var(--amber);
  padding: 2px 0 2px 20px; margin: 0 0 34px;
  color: var(--amber-ink); font-size: 14px; font-family: var(--font-mono); line-height: 1.6;
}
.legal .card {
  padding: 22px 0; border-top: 1px solid var(--rule);
  border-left: 0; padding-left: 0;
}
.legal .card:last-of-type { border-bottom: 1px solid var(--rule); }
.legal .card h2 {
  font-size: 19px; letter-spacing: -0.01em; margin: 0 0 8px;
  font-family: var(--font-sans); font-weight: 640;
}
.legal .card p { color: var(--ink-soft); font-size: 15.5px; margin: 0 0 10px; max-width: 76ch; }
.legal .card p:last-child { margin-bottom: 0; }
.legal > .wrap > .muted:last-child { margin-top: 30px; display: block; }

/* ============================================================
   15. Motion — hover and focus only. No scroll choreography.
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ============================================================
   16. Responsive
   ============================================================ */

@media (max-width: 1000px) {
  .hero-grid { grid-template-columns: 1fr; gap: 46px; }
  h1 { max-width: 24ch; }
  .foot-grid { grid-template-columns: 1fr 1fr; }

  /* three columns become two, so the column-one test has to move with them */
  .g3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .g3 > .card:nth-child(3n + 1) { border-left: 1px solid var(--rule); padding-left: 28px; }
  .g3 > .card:nth-child(2n + 1) { border-left: 0; padding-left: 0; }
}

@media (max-width: 760px) {
  .site-head .wrap {
    flex-direction: column; align-items: stretch; gap: 0; padding: 0; min-height: 0;
  }
  .brand { padding: 13px 22px 9px; }
  nav.site-nav {
    margin-left: 0; overflow-x: auto; scrollbar-width: none;
    padding: 0 22px 8px;
    mask-image: linear-gradient(90deg, #000 88%, transparent 100%);
    -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent 100%);
  }
  nav.site-nav::-webkit-scrollbar { display: none; }
  nav.site-nav a { padding: 10px; min-height: 44px; display: flex; align-items: center; }
  nav.site-nav a.lang { margin-left: 6px; margin-right: 22px; }
  html { scroll-padding-top: 108px; }

  section { padding: 58px 0; }
  .hero { padding: 54px 0 58px; }
  .hero.compact { padding: 46px 0 50px; }
  .sec-head { margin-bottom: 30px; }

  /* one stacked column: every cell is column one, so no cell carries a rule */
  .g2, .g3 { grid-template-columns: minmax(0, 1fr); }
  .g2 > .card, .g3 > .card,
  .g3 > .card:nth-child(3n + 1) { padding: 22px 0; border-left: 0; }
  .grid > .card:last-child { border-bottom: 1px solid var(--rule); }

  ol.steps > li { grid-template-columns: 1fr; gap: 0; padding: 22px 0; }
  ol.steps > li::before { grid-column: 1; grid-row: 1; margin-bottom: 8px; }
  ol.steps > li > h3 { grid-column: 1; grid-row: 2; }
  ol.steps > li > p  { grid-column: 1; grid-row: 3; }

  .row { grid-template-columns: 1fr; gap: 8px; padding: 16px 0; }
  .row dd { padding-left: 19px; }

  .lifecycle { gap: 0 4px; }
  .arrow { padding: 0 2px; }

  .foot-grid { grid-template-columns: 1fr; gap: 28px; }
  .site-foot { padding: 50px 0 36px; }
  .foot-legal { margin-top: 34px; }
  .legal { padding: 42px 0 60px; }
}

@media (max-width: 420px) {
  .wrap { padding: 0 20px; }
  .brand { padding-inline: 20px; }
  nav.site-nav { padding-inline: 20px; }
  .btn { width: 100%; }
}

/* ============================================================
   17. Phone mockups and the map band
   These are product illustrations, not screenshots: the screens are
   drawn in the site's own type and rules, and every figure says so in
   its caption. Nothing here asserts a capability the copy does not.
   ============================================================ */

.device {
  --dev-w: 262px;
  width: var(--dev-w);
  aspect-ratio: 262 / 536;
  flex: none;
  border-radius: 40px;
  padding: 9px;
  background: linear-gradient(150deg, #26332c 0%, #0d1a14 42%, #202c26 100%);
  box-shadow: 0 1px 0 rgba(255,255,255,0.14) inset, 0 22px 44px rgba(6, 20, 13, 0.34);
  position: relative;
}
.device .screen {
  height: 100%; border-radius: 32px; overflow: hidden;
  background: var(--paper);
  display: flex; flex-direction: column;
  position: relative;
}
/* the pill cut out of the top of the display */
.device .island {
  position: absolute; z-index: 3; top: 20px; left: 50%; transform: translateX(-50%);
  width: 72px; height: 20px; border-radius: 999px; background: #0d1a14;
}

/* status strip, so the screen reads as a phone rather than a card */
.scr-status {
  display: flex; justify-content: space-between; align-items: center;
  padding: 9px 18px 4px;
  font-family: var(--font-mono); font-size: 10px; font-weight: 500;
  color: var(--ink); letter-spacing: 0.02em;
}
.scr-status .bars { display: inline-flex; gap: 2px; align-items: flex-end; }
.scr-status .bars i { width: 2px; background: var(--ink); border-radius: 1px; display: block; }
.scr-status .bars i:nth-child(1) { height: 4px; }
.scr-status .bars i:nth-child(2) { height: 6px; }
.scr-status .bars i:nth-child(3) { height: 8px; }
.scr-status .bars i:nth-child(4) { height: 10px; }

.scr-head {
  padding: 10px 18px 12px; border-bottom: 1px solid var(--rule);
}
.scr-head .lbl {
  display: block; font-family: var(--font-mono); font-size: 9.5px; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.13em; color: var(--green-ink); margin-bottom: 4px;
}
.scr-head .ttl { font-size: 15px; font-weight: 650; letter-spacing: -0.015em; color: var(--ink); }

.scr-body { padding: 14px 18px; display: grid; gap: 13px; align-content: start; flex: 1; min-height: 0; }

/* route legs inside a phone screen */
.scr-route { display: grid; gap: 13px; position: relative; }
.scr-route::before {
  content: ""; position: absolute; left: 3px; top: 14px; bottom: 14px;
  width: 1px; background: var(--rule);
}
.scr-leg { display: grid; grid-template-columns: 7px 1fr; gap: 11px; align-items: start; }
.scr-dot { width: 7px; height: 7px; border-radius: 50%; margin-top: 5px; background: var(--amber); position: relative; z-index: 1; box-shadow: 0 0 0 2px var(--paper); }
.scr-dot.to { background: var(--green); }
.scr-leg b { display: block; font-size: 12.5px; font-weight: 640; color: var(--ink); letter-spacing: -0.01em; }
.scr-leg span { display: block; font-size: 11px; color: var(--muted); margin-top: 1px; }

.scr-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; border-top: 1px solid var(--rule); padding-top: 12px; }
.scr-fact .k {
  display: block; font-family: var(--font-mono); font-size: 9px; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.11em; color: var(--muted); margin-bottom: 2px;
}
.scr-fact .v { font-size: 12.5px; font-weight: 620; color: var(--ink); font-variant-numeric: tabular-nums; }

.scr-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: auto; padding: 0 18px 18px; }
.scr-btn {
  text-align: center; padding: 10px 8px; border-radius: 6px;
  font-size: 12.5px; font-weight: 640; letter-spacing: -0.005em;
}
.scr-btn.go { background: var(--green-ink); color: #fff; }
.scr-btn.no { border: 1px solid var(--rule); color: var(--ink-soft); }

/* stacked list rows (trips, passengers) */
.scr-row { border-top: 1px solid var(--rule); padding: 10px 0; }
.scr-row:first-child { border-top: 0; padding-top: 0; }
.scr-row .top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.scr-row b { font-size: 12.5px; font-weight: 640; letter-spacing: -0.01em; }
.scr-row .sub { font-size: 11px; color: var(--muted); margin-top: 2px; }
.scr-tag {
  font-family: var(--font-mono); font-size: 8.5px; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.1em; white-space: nowrap;
  padding: 2px 6px; border-radius: 3px;
  background: var(--green-soft); color: var(--green-ink);
}
.scr-tag.wait { background: var(--amber-soft); color: var(--amber-ink); }
.scr-tag.done { background: var(--surface-2); color: var(--muted); }

/* a map filling the top of a phone screen */
.scr-map { position: relative; height: 176px; flex: none; border-bottom: 1px solid var(--rule); }
.scr-map img { width: 100%; height: 100%; object-fit: cover; display: block; }
.scr-map .eta {
  position: absolute; left: 12px; top: 12px;
  background: var(--ink-900); color: #fff;
  font-family: var(--font-mono); font-size: 9.5px; font-weight: 500;
  letter-spacing: 0.08em; text-transform: uppercase;
  padding: 5px 9px; border-radius: 4px;
}

.scr-note {
  font-size: 10.5px; color: var(--muted); line-height: 1.5;
  border-left: 2px solid var(--green); padding-left: 10px;
}

/* the row of devices */
.device-row {
  display: flex; gap: 30px; justify-content: center; align-items: flex-start;
  flex-wrap: wrap; margin: 0;
}
.device-row figcaption {
  margin-top: 14px; text-align: center; color: var(--muted);
  font-size: 13px; max-width: 62ch; margin-inline: auto; text-wrap: pretty;
}
.device-item { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.device-item .cap {
  font-family: var(--font-mono); font-size: 10.5px; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.11em; color: var(--muted);
  text-align: center;
}
/* on dark sections the phone bezel needs a lighter caption and softer shadow */
.hero .device, section.statement .device { box-shadow: 0 1px 0 rgba(255,255,255,0.16) inset, 0 26px 56px rgba(0,0,0,0.5); }
.hero .device-item .cap { color: var(--on-dark-mute); }

/* ---- full-width map band ---- */

.map-band { position: relative; padding: 0; background: var(--ink-900); }
.map-band img {
  width: 100%; height: clamp(280px, 34vw, 430px);
  object-fit: cover; display: block;
}
.map-band .band-copy {
  position: absolute; inset: auto 0 0 0;
  padding: 26px 0 22px;
  background: linear-gradient(180deg, rgba(10,22,17,0) 0%, rgba(10,22,17,0.86) 62%, rgba(10,22,17,0.95) 100%);
}
.map-band .band-copy .wrap { display: flex; align-items: flex-end; justify-content: space-between; gap: 26px; flex-wrap: wrap; }
.map-band .lbl {
  display: block; font-family: var(--font-mono); font-size: 10.5px; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.13em; color: var(--green-mark); margin-bottom: 8px;
}
.map-band p { margin: 0; color: var(--on-dark); font-size: 17px; max-width: 48ch; text-wrap: pretty; }
.map-band .legs {
  display: flex; gap: 22px; flex-wrap: wrap;
  font-family: var(--font-mono); font-size: 12px; color: var(--on-dark-soft);
  font-variant-numeric: tabular-nums;
}
.map-band .legs span { display: inline-flex; align-items: center; gap: 7px; }
.map-band .legs i { width: 7px; height: 7px; border-radius: 50%; background: var(--amber); font-style: normal; }
.map-band .legs span + span i { background: var(--green-mark); }

@media (max-width: 760px) {
  .device { --dev-w: 232px; }
  .device-row { gap: 26px; }
  .map-band img { height: 260px; }
  .map-band .band-copy { padding: 20px 0 18px; }
  .map-band p { font-size: 15.5px; }
}

/* The conditions card keeps its dark treatment on the paper background —
   it is the one object on the page that is the system talking, so it should
   not look like the prose around it. */
.dispatch-figure { margin: 30px 0 0; max-width: 520px; }
.dispatch-figure figcaption {
  color: var(--muted); font-size: 13.5px; margin-top: 14px; text-wrap: pretty;
}
.dispatch-figure .trip-card { box-shadow: 0 18px 40px rgba(6, 20, 13, 0.16); }

.device-row-wrap { margin: 0 0 44px; }
.device-row-wrap figcaption {
  margin-top: 22px; text-align: center; color: var(--muted);
  font-size: 13.5px; max-width: 64ch; margin-inline: auto; text-wrap: pretty;
}