/* Shared by the content pages (/about, /terms, and the route and stop pages later): Backseat's look without the map app's CSS.
   Self-contained: the font faces are here, and a page sets its colours through the theme attribute on <html>. */
@font-face { font-family: 'Roboto Condensed'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/roboto-condensed-latin-ext-400.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: 'Roboto Condensed'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/roboto-condensed-latin-400.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: 'Roboto Condensed'; font-style: normal; font-weight: 500; font-display: swap; src: url('/fonts/roboto-condensed-latin-ext-500.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: 'Roboto Condensed'; font-style: normal; font-weight: 500; font-display: swap; src: url('/fonts/roboto-condensed-latin-500.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: 'Roboto Condensed'; font-style: normal; font-weight: 600; font-display: swap; src: url('/fonts/roboto-condensed-latin-ext-600.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: 'Roboto Condensed'; font-style: normal; font-weight: 600; font-display: swap; src: url('/fonts/roboto-condensed-latin-600.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: 'Roboto Condensed'; font-style: normal; font-weight: 700; font-display: swap; src: url('/fonts/roboto-condensed-latin-ext-700.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: 'Roboto Condensed'; font-style: normal; font-weight: 700; font-display: swap; src: url('/fonts/roboto-condensed-latin-700.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: 'Roboto Condensed'; font-style: normal; font-weight: 800; font-display: swap; src: url('/fonts/roboto-condensed-latin-ext-800.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: 'Roboto Condensed'; font-style: normal; font-weight: 800; font-display: swap; src: url('/fonts/roboto-condensed-latin-800.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: 'DM Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/dm-sans-400.woff2') format('woff2'); }
@font-face { font-family: 'DM Sans'; font-style: normal; font-weight: 700; font-display: swap; src: url('/fonts/dm-sans-700.woff2') format('woff2'); }

:root { --bg: #f8f9fa; --fg: #000; --muted: #3d444b; --card: #fff; --outline: #000; --accent: #fec940; --link: #00709d; --rest: 3px;
  --head: 'Roboto Condensed', system-ui, -apple-system, 'Segoe UI', sans-serif; --body: 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --map: #e8e4da; --road: #fff; }
:root[data-theme="dark"] { --bg: #1a1a1a; --fg: #fff; --muted: #b0b0b0; --card: #2d2d2d; --outline: #fff; --link: #6cc4ee; --map: #2a2d31; --road: #3b3f45; }
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; overflow-y: scroll; } /* always room for the scrollbar, so a short page (/terms on a tall screen) doesn't sit wider than a long one and shift the top bar */
body { margin: 0; background: var(--bg); color: var(--fg); font: 14px/1.6 var(--body); }
a { color: var(--link); font-weight: 700; }
h1, h2, h3, .top b, .btn, .steps b, .tile b, .how .n { font-family: var(--head); }
/* The app's type: Roboto Condensed set tight (-0.02em, the wordmark -0.03em) */
h1, h2, h3, .btn, .top .nav a, .steps b, .tile b, .how b, .how .n, .legend b { letter-spacing: -0.02em; } /* (not the example vibes: at 15px it closes the word gaps) */
/* Installed on an iPhone (the app's status bar is translucent), the page runs under the clock and the Dynamic Island unless it makes room:
   env(safe-area-inset-*) is 0 in a normal browser tab, so nothing changes there */
.wrap { max-width: 1040px; margin: 0 auto; padding: max(20px, calc(env(safe-area-inset-top, 0px) + 10px)) max(20px, env(safe-area-inset-right, 0px)) max(56px, env(safe-area-inset-bottom, 0px)) max(20px, env(safe-area-inset-left, 0px)); }
.top { display: flex; align-items: center; gap: 6px; padding: 4px 0 24px; }
.top .logo { flex: none; display: block; line-height: 0; }
.top .logo svg { width: 38px; height: 44px; }
.top b { font-size: 19px; font-weight: 700; letter-spacing: -0.03em; line-height: 1; } /* the app's wordmark */
.top .nav { margin-left: auto; display: flex; align-items: center; gap: 18px; }
.top .nav { position: relative; }
.top .nav a { position: relative; white-space: nowrap; font: 700 16px/1.2 var(--head); color: var(--fg); text-decoration: none; padding: 3px 0 5px; }
/* The underline is one element inside the current page's link (so it's right with no script). Hover another option and
   pages.js slides it across; going to that page, the browser's view transition carries it over (it's the same named
   element on both pages), so the top bar stays still and only the line moves, like switching a tab. */
.uline { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--accent); pointer-events: none;
  transform-origin: 0 0; transition: transform .26s cubic-bezier(.45, 0, .25, 1); view-transition-name: nav-line; }
.top .nav:not(.js) a:not([aria-current]):hover { box-shadow: inset 0 -3px 0 var(--fg); } /* (no script: a plain hover underline) */
.top .go { margin-left: 18px; }
/* Buttons, as in the app (the light/dark toggle is the model): a solid black underlay at rest; on hover the button
   moves up 1px and the underlay thins by 1px (touch: while pressed) */
.btn { display: inline-block; padding: 11px 22px; border-radius: 999px; background: var(--accent); color: #111; border: 2px solid var(--outline);
  font-weight: 800; font-size: 16px; line-height: 1.2; text-decoration: none; white-space: nowrap; box-shadow: 0 var(--rest) 0 0 var(--outline); transition: transform .2s ease, box-shadow .2s ease; }
@media (hover: hover) { .btn:hover { transform: translateY(-1px); box-shadow: 0 calc(var(--rest) - 1px) 0 0 var(--outline); } }
@media (hover: none) { .btn:active { transform: translateY(-1px); box-shadow: 0 calc(var(--rest) - 1px) 0 0 var(--outline); } }
.btn:focus-visible { outline: 3px solid var(--fg); outline-offset: 3px; }
h1 { font-size: clamp(30px, 5.4vw, 56px); line-height: 1.02; font-weight: 800; margin: 0 0 16px; }
h1 em { font-style: normal; background: linear-gradient(transparent 62%, var(--accent) 62%); }
:root[data-theme="dark"] h1 em { background: linear-gradient(transparent 84%, var(--accent) 84%); } /* (white text on a yellow block is hard to read) */
.lede { font-size: 16px; color: var(--muted); margin: 0 0 20px; }
h2 { font-size: 20px; line-height: 1.15; font-weight: 800; margin: 0 0 10px; }
h3 { font-size: 18px; line-height: 1.2; font-weight: 800; margin: 0 0 8px; }
p { margin: 0 0 10px; }
.s { margin-top: 56px; }
.intro { margin: 0 0 18px; }
.note { margin: 12px 0 0; color: var(--muted); }
.sub { color: var(--muted); font-size: 14px; margin-bottom: 12px; }
.cols { display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr); } /* (minmax(0, ..): a column can shrink below its content, so nothing pushes a small phone sideways) */
.card { background: var(--card); border: 2px solid var(--outline); border-radius: 25px; padding: 18px 20px; }
.card > p:last-child { margin-bottom: 0; }
.feed { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.feed li { display: flex; gap: 12px; align-items: flex-start; border: 2px solid var(--outline); border-radius: 14px; padding: 10px 12px; background: var(--bg); font-family: var(--head); } /* Roboto Condensed, like the app's vibes */
.feed .em { font-size: 22px; line-height: 1.15; width: 32px; text-align: center; flex: none; }
.feed .q { display: block; font-weight: 600; font-size: 15px; line-height: 1.25; }
.feed .m { display: block; color: var(--muted); font-weight: 500; font-size: 13px; margin-top: 4px; }
.feed .t { white-space: nowrap; }
.rt { display: inline-block; min-width: 26px; text-align: center; padding: 0 8px; margin-right: 4px; border-radius: 999px; background: var(--c); color: var(--t); border: 2px solid var(--outline); font: 800 13px/1.35 var(--head); }
.steps { padding: 0; margin: 0; list-style: none; }
.steps li { border: 2px solid var(--outline); border-radius: 25px; padding: 14px 18px 18px; position: relative; color: #000; display: flex; flex-direction: column; }
.steps li:nth-child(1) { background: #ffb3b8; } .steps li:nth-child(2) { background: #a8e6a8; } .steps li:nth-child(3) { background: #d8a8e8; }
.steps b { display: block; font-size: 17px; font-weight: 800; }
.steps li > span { display: block; }
.tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tile { background: var(--card); border: 2px solid var(--outline); border-radius: 25px; padding: 14px 16px; display: grid; gap: 2px; align-content: start; font-size: 14px; line-height: 1.45; }
.tile .e { font-size: 28px; line-height: 1.2; }
.tile b { font-size: 17px; font-weight: 800; }
ul.legend { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 10px; }
.legend li { display: flex; align-items: center; gap: 14px; }
.legend b { display: block; font-family: var(--head); font-size: 16px; line-height: 1.15; }
.legend li > div > span { display: block; color: var(--muted); font-size: 14px; line-height: 1.4; }
/* The map's own pin and busy dots (public/style.css .veh .dot / .busy-dots), on a little map tile */
.mapbit { flex: none; width: 108px; height: 74px; border-radius: 14px; display: grid; place-items: center; padding-bottom: 12px; overflow: hidden;
  background: linear-gradient(135deg, transparent 46%, var(--road) 46% 53%, transparent 53%), linear-gradient(20deg, transparent 62%, var(--road) 62% 67%, transparent 67%), var(--map); }
.pin { position: relative; display: block; }
.pin .dot { position: relative; min-width: 32px; height: 32px; padding: 0 7px; box-sizing: border-box; border-radius: 16px; background: var(--c); color: var(--t);
  border: 2.5px solid #fff; display: grid; place-items: center; font: 800 13px/1 var(--head); white-space: nowrap; box-shadow: 0 2px 6px rgba(0,0,0,.55); }
.pin.train .dot { border-radius: 8px; }
.busy { --lv: #ff5c5c; box-sizing: content-box; position: absolute; left: 50%; top: calc(100% - 1px); transform: translateX(-50%); display: inline-flex; align-items: center; gap: 2px;
  padding: 3px 4px; border-radius: 999px; background: var(--lv); box-shadow: 0 0 0 2px #fff, 0 1px 2px 2px rgba(0,0,0,.35); }
.busy i { box-sizing: border-box; width: 6px; height: 6px; border: 1.4px solid #111; border-radius: 50%; background: transparent; }
.busy i.on { background: #111; }
.busy.few { --lv: #ffd33d; } .busy.standing { --lv: #ff9b3d; } .busy.full { --lv: #ff5c5c; }
/* Install guides: tiny sketches of the phone's own screens (always light, like the real thing) */
.how { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.how li { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 12px; align-items: start; }
.how .n { width: 30px; height: 30px; border-radius: 50%; background: var(--accent); color: #111; border: 2px solid var(--outline); display: grid; place-items: center; font-weight: 800; font-size: 16px; }
.how b { display: block; font-family: var(--head); font-size: 16px; line-height: 1.2; }
.how li > div > span { display: block; color: var(--muted); font-size: 14px; line-height: 1.4; margin-top: 1px; }
.scene { margin-top: 8px; border: 2px solid var(--outline); border-radius: 14px; background: #f2f2f7; color: #1c1c1e; font: 500 14px/1.2 -apple-system, system-ui, 'Segoe UI', Roboto, sans-serif; overflow: hidden; max-width: min(320px, 100%); }
.scene .hl { background: color-mix(in srgb, #fec940 55%, transparent); box-shadow: inset 0 0 0 2.5px #fec940; border-radius: 10px; }
.ios-bar { display: flex; justify-content: space-around; align-items: center; padding: 6px 4px; }
.ios-bar .ic { display: grid; place-items: center; flex: 1; max-width: 44px; height: 38px; color: #007aff; }
.sheet .row { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 14px; border-top: 1px solid #d1d1d6; }
.sheet .row:first-child { border-top: 0; }
.sheet .row.hl { border-radius: 0; font-weight: 700; }
.sheet.and { background: #fff; font-family: Roboto, system-ui, sans-serif; }
.sheet.and .row { justify-content: flex-start; gap: 14px; border-top: 0; padding: 11px 16px; }
.dlg .dlg-top { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 9px 10px; border-bottom: 1px solid #d1d1d6; font-size: 12.5px; white-space: nowrap; }
.dlg .dlg-top > span:first-child { color: #007aff; }
.dlg .act { color: #007aff; font-weight: 700; padding: 3px 12px; border-radius: 999px; }
.dlg-body { display: flex; align-items: center; gap: 12px; padding: 12px; }
.dlg-body img { border-radius: 11px; flex: none; }
.dlg-body b { display: block; font-size: 15px; } .dlg-body small { color: #6b6b70; font-size: 13px; }
.and-bar { display: flex; align-items: center; gap: 8px; padding: 6px 6px 6px 10px; background: #fff; font-family: Roboto, system-ui, sans-serif; }
.and-bar .url { flex: 1; background: #eceff1; border-radius: 999px; padding: 7px 12px; font-size: 13px; color: #3c4043; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.and-bar .ic { display: grid; place-items: center; width: 38px; height: 38px; color: #3c4043; }
.and-dlg { background: #fff; font-family: Roboto, system-ui, sans-serif; }
.and-dlg .dlg-btns { display: flex; justify-content: flex-end; gap: 6px; padding: 4px 12px 12px; font-weight: 500; color: #1a73e8; }
.and-dlg .dlg-btns span { padding: 6px 14px; border-radius: 999px; }
.cta { text-align: center; margin: 44px 0 8px; padding: 28px 20px; background: var(--accent); color: #111; border: 2px solid #000; border-radius: 25px; --outline: #000; }
.cta h2 { margin: 0 0 6px; } .cta p { margin-bottom: 16px; }
.cta .btn { background: #fff; color: #111; border-color: #000; }
.wrap > footer { margin-top: 36px; color: var(--muted); font-size: 13px; }
.wrap > footer p { margin-bottom: 8px; }
@media (min-width: 880px) {
  .wrap { padding: max(28px, calc(env(safe-area-inset-top, 0px) + 10px)) max(32px, env(safe-area-inset-right, 0px)) max(64px, env(safe-area-inset-bottom, 0px)) max(32px, env(safe-area-inset-left, 0px)); }
  .cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  .cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
  .tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
  .s { margin-top: 72px; }
}
@media (max-width: 480px) { .top .go { padding: 8px 14px; font-size: 15px; margin-left: 12px; } .top .nav { gap: 14px; } .top .nav a { font-size: 15px; } .top b { display: none; } /* the logo says it; room for the links */ h2 { font-size: 19px; } }

/* /about's own bits */
.hero-go { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 16px; margin: 6px 0 0; }
.hero-go span { color: var(--muted); }
.label { font: 700 15px/1.2 var(--head); letter-spacing: -0.02em; color: var(--muted); margin: 0 0 12px; }
.rt.sq { border-radius: 6px; }
.sub-block { margin-top: 16px; }
.sub-block h3 { margin-bottom: 6px; }
ul.legend { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 12px; margin-top: 16px; }
.legend li { flex-direction: column; align-items: flex-start; gap: 8px; }
/* Install guides fold away: tap your phone to open its steps */
.installs { align-items: start; }
.installs summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.installs summary::-webkit-details-marker { display: none; }
.installs summary::after { content: ''; flex: none; width: 10px; height: 10px; border-right: 2.5px solid var(--fg); border-bottom: 2.5px solid var(--fg); transform: rotate(45deg) translate(-2px, -2px); transition: transform .2s ease; }
.installs details[open] summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
.installs summary h3 { margin: 0; }
.installs summary small { font: 400 14px var(--body); color: var(--muted); letter-spacing: 0; }
.installs details[open] summary { margin-bottom: 16px; }
.installs summary:focus-visible { outline: 3px solid var(--fg); outline-offset: 6px; border-radius: 8px; }
.qa { display: grid; gap: 24px; grid-template-columns: minmax(0, 1fr); }
.qa h3 { font-size: 17px; margin: 0 0 6px; }
.qa p { margin: 0; }
@media (min-width: 880px) {
  .card .feed { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  ul.legend { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
}

/* Terms of use (/terms): the app's own terms, section by section */
.crumb { margin: 0 0 14px; font-size: 13px; color: var(--muted); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.crumb .arr { flex: none; width: 18px; height: 18px; }
.t-sec { margin-top: 30px; }
.t-sec h2 { font-size: 20px; margin-bottom: 8px; }
.t-sec ul { margin: 6px 0 12px; padding-left: 22px; }
.t-sec li { margin: 4px 0; }
.t-p { margin-bottom: 10px; }
.t-p > div { margin-bottom: 8px; }
.t-sec.first .t-p:first-child { font-size: 16px; color: var(--muted); }
.t-bottom { margin-top: 36px; background: var(--accent); color: #111; border: 2px solid #000; border-radius: 25px; padding: 18px 20px; }
.t-bottom h2 { font-size: 20px; margin: 0 0 6px; }
.t-bottom .t-p { margin: 0; max-width: none; }


/* Headings split evenly (no `text-wrap: pretty` on body text: Safari's version leaves lines well short of the box) */
h1, h2, h3, .steps b, .tile b { text-wrap: balance; }

/* Moving between /about and /terms: the browser crossfades instead of blanking, and the top bar stays put, like switching a tab */
@view-transition { navigation: auto; }
.top { view-transition-name: top; }
::view-transition-group(root) { animation-duration: .15s; }
::view-transition-group(nav-line) { animation-duration: .26s; animation-timing-function: cubic-bezier(.45, 0, .25, 1); }
@media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } .uline { transition: none; } }

/* ---- Depth: a still, blurred street map behind everything (light: paper; dark: night), under a 88% veil ---- */
.bgmap { position: fixed; inset: -24px; z-index: -1; pointer-events: none; filter: blur(2.5px); }
.bgmap svg { width: 100%; height: 100%; display: block; }
.bgmap::after { content: ''; position: absolute; inset: 0; background: color-mix(in srgb, var(--bg) 86%, transparent); }
.bgmap .land { fill: var(--map); } .bgmap .sea { fill: var(--sea); }
.bgmap .road path { fill: none; stroke: var(--road); stroke-width: 14; stroke-linecap: round; }
.bgmap .road.thin path { stroke-width: 6; }
.bgmap .rl { fill: none; stroke-width: 7; stroke-linecap: round; opacity: .9; }
.bgmap .rl.dash { stroke: #0f8b8d; stroke-dasharray: 16 14; stroke-width: 5; }
:root { --sea: #c9dfe9; } :root[data-theme="dark"] { --sea: #1e2a33; }
body { background: transparent; } html { background: var(--bg); }

/* ---- Hero: the app's voice and the app's own pieces ---- */
.hero { display: grid; gap: 28px; grid-template-columns: minmax(0, 1fr); align-items: center; padding: 8px 0 8px; }
  background: var(--card); font: 700 14px/1.2 var(--head); letter-spacing: -0.01em; box-shadow: 0 2px 0 0 var(--outline); }
.hero h1 { font-size: clamp(34px, 6.2vw, 64px); line-height: 1.04; letter-spacing: -0.03em; margin-bottom: 18px; text-wrap: balance; }
.sticker { display: inline-block; padding: 0 .16em .02em; margin: 0 .02em; background: var(--accent); color: #111; border: 3px solid #000; border-radius: .22em;
  box-shadow: 0 .09em 0 0 #000; transform: rotate(-2.5deg); line-height: 1.05; }
.hero .lede { margin-bottom: 22px; }
.hero-art { position: relative; height: 330px; max-width: 440px; width: 100%; justify-self: center; }
.hero-art .vcard { position: absolute; width: 166px; zoom: 1.2; box-shadow: 0 3px 0 0 var(--outline); }
.hero-art .vcard.b { left: 0; top: 0; transform: rotate(-5deg); }
.hero-art .vcard.a { right: 0; top: 80px; transform: rotate(4deg); z-index: 2; }
/* A bus pin exactly as on the map (style.css .veh, .busy-dots, .vibe-bubble), shown 1.7x */
.pinbit { position: absolute; left: 96px; bottom: 54px; z-index: 3; width: 0; height: 0; }
.pinbit .veh-wrap { position: absolute; transform: translate(-50%, -50%) scale(1.7); transform-origin: center; }
.veh { position: relative; }
.veh .dot { position: relative; min-width: 32px; height: 32px; padding: 0 7px; box-sizing: border-box; border-radius: 16px; background: var(--c); color: var(--t);
  border: 2.5px solid #fff; display: grid; place-items: center; font: 800 15px/1 var(--head); white-space: nowrap; box-shadow: 0 2px 6px rgba(0,0,0,.55); }
.veh .arrow { position: absolute; left: 50%; top: 50%; width: 0; height: 0; transform: translate(16.5px, 9.5px) rotate(120deg); } /* heading 120°: base on the pill edge, as app.js places it */
.veh .arrow::before { content: ''; position: absolute; left: -6px; top: -8px; border: 6px solid transparent; border-top: 0; border-bottom: 8px solid #4f7c29; filter: drop-shadow(0 0 1px #fff); }
.busy-dots { --lv: #ff5c5c; display: inline-flex; align-items: center; gap: 2px; padding: 3px 4px; border-radius: 999px; background: var(--lv); box-shadow: 0 0 0 2px #fff, 0 1px 2px 2px rgba(0,0,0,.35); }
.busy-dots i { width: 6px; height: 6px; border-radius: 50%; box-shadow: inset 0 0 0 1.4px #111; }
.busy-dots i.on { background: #111; box-shadow: none; }
.busy-dots.few { --lv: #ffd33d; } .busy-dots.standing { --lv: #ff9b3d; } .busy-dots.full { --lv: #ff5c5c; }
.veh .dot .busy-dots { position: absolute; left: 50%; top: calc(100% - 1px); transform: translateX(-50%); }
.vibe-bubble { position: absolute; bottom: calc(100% + 10px); left: 50%; transform: translateX(-50%); white-space: nowrap; background: #fff; color: #111;
  border-radius: 14px; padding: 1px 7px; font-size: 16px; line-height: 24px; box-shadow: 0 3px 10px rgba(0,0,0,.45); }
.vibe-bubble::after { content: ''; position: absolute; left: 50%; top: 100%; transform: translateX(-50%); border: 5px solid transparent; border-top-color: #fff; }
@media (min-width: 880px) {
  .hero { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 40px; min-height: 440px; }
  .hero-art { height: 400px; }
  .hero-art .vcard { width: 176px; zoom: 1.3; }
  .hero-art .vcard.a { top: 92px; }
  .pinbit { left: 110px; bottom: 60px; }
}

/* ---- Vibe cards: the app's Vibes feed card, copied from style.css (.vcard and its later overrides) so they look the
   same; the markup comes from lib/vibecard.js, the server's copy of feed.js vcard(). Shown a little bigger here (zoom). ---- */
.vcs { display: grid; gap: 10px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 880px) { .vcs { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; } .vcs .vcard { zoom: 1.3; } }
@media (min-width: 560px) and (max-width: 879px) { .vcs .vcard { zoom: 1.2; } }
.vcard { position: relative; aspect-ratio: 1; box-sizing: border-box; display: flex; flex-direction: column; gap: 6px; padding: 10px 10px 11px 12px;
  border: 2px solid var(--outline); border-radius: 25px; background: var(--rc); color: var(--rt); overflow: hidden; font-family: var(--head); letter-spacing: -0.02em; line-height: 1.4; }
.vcard header { display: flex; align-items: center; gap: 5px; min-width: 0; }
.vc-route { font: 800 26px/1 var(--head); letter-spacing: -1px; flex: none; }
.vc-dest { font-size: 12px; line-height: 1.1; opacity: .8; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vcard header .ping { margin-right: 2px; }
.vcard .flag { color: inherit; opacity: .7; width: 28px; height: 28px; margin: -4px -2px 0 0; display: grid; place-items: center; flex: none; }
.vcard .ico { width: 1.15em; height: 1.15em; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.vcard .flag .ico { width: 18px; height: 18px; }
.vc-body { flex: 1; min-height: 0; margin: 0; display: flex; align-items: center; gap: 4px; }
.vc-text { flex: 1; min-width: 0; font: 700 15px/1.1 var(--head); letter-spacing: -0.02em; overflow-wrap: break-word; -webkit-hyphens: auto; hyphens: auto;
  display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; }
.vc-emoji { flex: none; font-size: 28px; line-height: 1; }
.vc-body.bare { justify-content: center; } .vc-body.bare .vc-emoji { font-size: 52px; }
.vcard footer { display: flex; align-items: center; gap: 6px; font-size: 11px; line-height: 1.2; opacity: .85; white-space: nowrap; }
.vc-when { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.vcard footer .ico { width: 11px; height: 11px; vertical-align: -1px; }
.vc-likes { flex: none; display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border: 1.5px solid currentColor; border-radius: 999px; font: 800 13px/1 var(--head); }
.vc-likes .ico { width: 13px; height: 13px; }
.stat { display: inline-flex; align-items: baseline; gap: 8px; margin: 0 0 16px; padding: 6px 14px; border: 2px solid var(--outline); border-radius: 999px; background: var(--card);
  font: 600 15px/1.2 var(--head); letter-spacing: -0.02em; box-shadow: 0 2px 0 0 var(--outline); }
.stat b { font-size: 20px; font-weight: 800; }
.caption { margin: 10px 0 0; color: var(--muted); font-size: 14px; }

/* ---- My Backseat, drawn like the tab ---- */
.mbsec { display: grid; gap: 24px; grid-template-columns: minmax(0, 1fr); align-items: center; }
@media (min-width: 880px) { .mbsec { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; } }
.ticks { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 10px; }
.ticks li { position: relative; padding-left: 30px; }
.ticks li::before { content: ''; position: absolute; left: 0; top: 2px; width: 20px; height: 20px; border-radius: 50%; background: var(--accent); border: 2px solid var(--outline); box-sizing: border-box; }
.ticks li::after { content: ''; position: absolute; left: 7px; top: 6px; width: 5px; height: 9px; border: solid #111; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.mb { background: var(--card); border: 2px solid var(--outline); border-radius: 25px; padding: 16px 16px 18px; font-family: var(--head); letter-spacing: -0.02em; box-shadow: 0 4px 0 0 var(--outline); }
.mb-h { font-weight: 800; font-size: 16px; margin: 0 0 10px; }
.mb-chips { display: flex; gap: 8px; margin-bottom: 18px; }
.mb-chips span { min-width: 46px; height: 40px; padding: 0 12px; display: grid; place-items: center; border-radius: 999px; background: var(--c); color: var(--t);
  border: 2px solid var(--outline); box-shadow: 0 3px 0 0 var(--outline); font-weight: 800; font-size: 18px; }
.mb-chips span.sq { border-radius: 12px; }
.mb-card { border: 2px solid var(--outline); border-radius: 18px; overflow: hidden; }
.mb-stop { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding: 9px 14px 8px; background: var(--accent); color: #111; border-bottom: 2px solid var(--outline); }
.mb-stop b { font-size: 18px; } .mb-stop small { font-size: 13px; opacity: .8; }
.mb-row { display: flex; align-items: center; gap: 10px; padding: 10px 14px; }
.mb-row + .mb-row { border-top: 1px solid color-mix(in srgb, var(--fg) 15%, transparent); }
.mb-rt { flex: none; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: var(--c); color: var(--t); border: 2px solid var(--outline); font-weight: 800; font-size: 17px; }
.mb-mid { flex: 1; min-width: 0; display: grid; gap: 2px; }
.mb-st { font-size: 14px; color: var(--muted); display: flex; align-items: center; gap: 5px; white-space: nowrap; }
.mb-st i { width: 9px; height: 9px; border-radius: 50%; display: inline-block; } .mb-st i + * { margin-right: 4px; }
.mb-st i.ok { background: #1a8a4a; } .mb-st i.late { background: #b85a00; } .mb-st i.stand { background: #ff9b3d; margin-left: 6px; } .mb-st i.few { background: #ffd33d; margin-left: 6px; }
.mb-v { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mb-t { flex: none; font-size: 24px; font-weight: 800; letter-spacing: -0.03em; }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* My Backseat drawing: "Near you" and the Nearest on your routes card (as nextup.js draws them) */
.nr-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.nr-top .mb-h { margin: 0; }
.nr-loc { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px 6px 10px; border-radius: 999px; background: var(--fg); color: var(--bg); font-weight: 800; font-size: 14px; }
.nr-loc svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
.mb-stop.plain { background: var(--card); color: var(--fg); }
.mb-h2 { margin-top: 18px; }
.nr-row { display: flex; align-items: center; gap: 10px; padding: 10px 12px; }
.nr-row + .nr-row { border-top: 1px solid color-mix(in srgb, var(--fg) 15%, transparent); }
.nr-cells { flex: 1; min-width: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.nr-cell { min-width: 0; display: grid; gap: 1px; padding: 7px 9px; border-radius: 12px; background: color-mix(in srgb, var(--fg) 6%, transparent); }
.nr-cell > b { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nr-t { display: flex; align-items: center; gap: 5px; font-size: 14px; }
.nr-t b { font-size: 24px; line-height: 1.05; letter-spacing: -0.03em; }
.nr-cell small { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ping { display: inline-block; flex: none; width: 10px; height: 10px; }
.ping svg { display: block; width: 100%; height: 100%; overflow: visible; }
.ping circle { fill: currentColor; } .ping path { stroke: currentColor; stroke-width: 3; stroke-linecap: round; }
.ping circle, .ping path { opacity: .3; animation: live-wave 2s ease-in-out infinite; }
.ping path:nth-of-type(1) { animation-delay: .25s; } .ping path:nth-of-type(2) { animation-delay: .5s; }
@keyframes live-wave { 0%, 100% { opacity: .3; } 15%, 35% { opacity: 1; } 55% { opacity: .3; } }
@media (prefers-reduced-motion: reduce) { .ping circle, .ping path { animation: none; opacity: 1; } }

/* How it works: a little drawing of each step, from the app's own pieces */
.step-art { height: 96px; margin: 0 0 12px; border-radius: 16px; border: 2px solid #000; background: rgba(255,255,255,.55); display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 10px; font-family: var(--head); letter-spacing: -0.02em; }
.sa-search { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; background: #fff; border: 2px solid #000; border-radius: 14px; font-weight: 700; font-size: 14px; color: #555; }
.sa-search svg { width: 15px; height: 15px; fill: none; stroke: #111; stroke-width: 2.4; stroke-linecap: round; }
.sa-pins { display: flex; gap: 10px; }
.sa-pin { position: relative; margin-top: 30px; }
.sa-pin .vibe-bubble { font-size: 18px; line-height: 26px; }
.sa-emojis { display: flex; gap: 6px; }
.sa-emojis span { width: 40px; height: 40px; display: grid; place-items: center; font-size: 22px; background: #fff; border: 2px solid #000; border-radius: 14px; }
.sa-emojis span.on { background: #fec940; box-shadow: 0 2px 0 0 #000; }
.sa-post { padding: 4px 22px; background: #fec940; border: 2px solid #000; border-radius: 14px; box-shadow: 0 3px 0 0 #000; font: 800 15px/1.4 var(--head); color: #000; }
/* Coverage tiles: each mode's real map pin */
.tile .e { display: block; height: 36px; padding-top: 2px; }
.tile .veh { display: inline-block; }
.veh.train .dot { border-radius: 8px; }
.veh.sim .dot { outline: 2px dashed var(--t, #fff); outline-offset: -5px; }
/* Questions: cards, two across on a wide screen */
.qa > div { background: var(--card); border: 2px solid var(--outline); border-radius: 25px; padding: 16px 18px; }
@media (min-width: 880px) { .qa { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } }
.install-now { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 16px; margin: 0 0 16px; }
.install-now[hidden] { display: none; }
.install-now span { color: var(--muted); }
button.btn { cursor: pointer; font-family: var(--head); }
/* What's new (/whats-new): one card per release */
.wn { background: var(--card); border: 2px solid var(--outline); border-radius: 25px; padding: 16px 20px 6px; }
.wn h2 { margin: 0 0 2px; }
.wn-when { color: var(--muted); font-size: 14px; margin: 0 0 8px; }
.wn:first-of-type { box-shadow: 0 4px 0 0 var(--outline); }
.wn:first-of-type h2::after { content: 'Latest'; margin-left: 10px; padding: 2px 9px; vertical-align: 3px; border: 2px solid #000; border-radius: 999px; background: var(--accent); color: #111; font-size: 13px; }
@media (max-width: 420px) { .top .logo svg { width: 30px; height: 35px; } .top .nav { gap: 10px; } .top .nav a { font-size: 14px; } .top .go { padding: 7px 12px; font-size: 14px; margin-left: 10px; } }
@media (max-width: 359px) { .top .nav { gap: 8px; } .top .nav a { font-size: 13px; } .top .go { padding: 6px 10px; font-size: 13px; margin-left: 8px; } }
/* Made in Newtown: the words beside the Backseat character at its stop (plain, not a quote) */
.story-card { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; align-items: center; padding: 22px 24px; background: var(--card);
  border: 2px solid var(--outline); border-radius: 25px; box-shadow: 0 4px 0 0 var(--outline); }
@media (min-width: 700px) { .story-card { grid-template-columns: 170px minmax(0, 1fr); gap: 28px; padding: 26px 32px 26px 22px; } }
.story-art { position: relative; height: 150px; display: grid; place-items: center; }
.story-art svg { width: 96px; height: 111px; transform: rotate(-6deg); }
.stop-sign { position: absolute; right: 4px; bottom: 2px; display: grid; padding: 5px 11px 6px; background: #1d5e78; color: #fff; border: 2px solid #000;
  border-radius: 12px; box-shadow: 0 3px 0 0 #000; transform: rotate(5deg); font-family: var(--head); letter-spacing: -0.02em; line-height: 1.1; }
.stop-sign b { font-size: 17px; font-weight: 800; } .stop-sign small { font-size: 11px; opacity: .85; }
.story-text { margin: 0; font: 600 20px/1.45 var(--head); letter-spacing: -0.01em; }