:root {
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #17212b;
  background: #eef1f4;
  font-synthesis: none;
}

* { box-sizing: border-box; }
html, body { height: 100%; overflow: hidden; }
body { margin: 0; }
button, input { font: inherit; }
button { cursor: pointer; }

.app-topbar { position: fixed; z-index: 1500; top: 0; right: 0; left: 0; display: flex; align-items: center; justify-content: space-between; gap: 14px; height: 58px; padding: 9px 18px; border-bottom: 1px solid #b9151a; color: #fff; background: #c8171d; box-shadow: 0 4px 18px #28333d24; }
.topbar-brand { display: flex; min-width: 0; align-items: center; gap: 10px; color: #fff; text-decoration: none; }
.topbar-brand span { display: grid; place-items: center; width: 38px; height: 29px; border: 2px solid #fff; border-radius: 12px; font-size: 12px; font-weight: 900; }
.topbar-brand strong { overflow: hidden; font-size: 15px; letter-spacing: -.2px; text-overflow: ellipsis; white-space: nowrap; }
.app-topbar nav { display: flex; gap: 6px; padding: 3px; border-radius: 999px; background: #9e141933; }
.app-topbar nav a { display: block; padding: 8px 11px; border-radius: 999px; color: #ffe5e7; font-size: 12px; font-weight: 900; text-decoration: none; white-space: nowrap; }
.app-topbar nav a.active { color: #c8171d; background: #fff; box-shadow: 0 1px 5px #7b0d1233; }

.app-shell { display: grid; width: 100%; max-width: 100vw; grid-template-columns: clamp(300px, 24vw, 360px) minmax(0, 1fr); height: calc(100vh - 58px); height: calc(100dvh - 58px); min-height: 0; margin-top: 58px; overflow: hidden; }
.sidebar { display: flex; flex-direction: column; min-width: 0; min-height: 0; background: #fff; border-right: 1px solid #dfe4e8; z-index: 1000; }
.brand { display: flex; align-items: center; gap: 13px; padding: 22px 20px; color: #fff; background: #d71920; }
.brand-mark { display: grid; place-items: center; width: 51px; height: 38px; border: 2px solid #fff; border-radius: 16px; font-size: 15px; font-weight: 900; letter-spacing: -.8px; }
h1, h2, p { margin: 0; }
h1 { font-size: 20px; letter-spacing: -.4px; }
.brand p { margin-top: 3px; color: #ffd9db; font-size: 11px; }
.sidebar-content { display: flex; flex: 1; min-height: 0; flex-direction: column; overflow-y: auto; overscroll-behavior: contain; padding: 18px 16px 12px; }
button svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2; }
.stats-panel { padding: 12px; border: 1px solid #e2e6e9; border-radius: 10px; background: linear-gradient(180deg, #ffffff 0%, #f7f9fb 100%); box-shadow: 0 8px 26px #40505f0d; }
.stats-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.stats-heading .section-title { display: block; margin-bottom: 2px; color: #c8171d; }
.stats-heading p { color: #74808b; font-size: 10px; line-height: 1.35; }
.mini-refresh { flex: 0 0 auto; padding: 5px 8px; border: 1px solid #eadbdd; border-radius: 999px; color: #c8171d; background: #fff; font-size: 10px; font-weight: 900; }
.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: 10px; }
.stats-grid article { min-width: 0; padding: 8px 7px; border: 1px solid #e5e9ec; border-radius: 8px; background: #fff; }
.stats-grid span { display: block; color: #74808b; font-size: 9px; font-weight: 900; letter-spacing: .5px; text-transform: uppercase; }
.stats-grid strong { display: block; margin-top: 3px; color: #182530; font-size: 19px; line-height: 1; letter-spacing: -.7px; }
.load-estimate { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(92px, .75fr); gap: 8px; align-items: stretch; margin-top: 10px; padding: 10px; border: 1px solid #f0d0d3; border-radius: 10px; background: linear-gradient(135deg, #fff8f8 0%, #ffffff 62%); }
.load-estimate span { display: block; color: #9e1a1f; font-size: 9px; font-weight: 900; letter-spacing: .6px; text-transform: uppercase; }
.load-estimate strong { display: block; margin-top: 3px; color: #c8171d; font-size: 30px; line-height: 1; letter-spacing: -1.2px; }
.load-estimate small { display: block; margin-top: 4px; color: #7b5960; font-size: 10px; line-height: 1.3; }
.load-meta { display: grid; align-content: center; justify-items: end; min-width: 0; text-align: right; }
.load-meta b { color: #26333d; font-size: 12px; }
.load-breakdown { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin-top: 7px; }
.load-breakdown div { min-width: 0; padding: 7px 8px; border: 1px solid #e7ecef; border-radius: 8px; background: #fff; }
.load-breakdown span, .load-breakdown small { display: block; overflow: hidden; color: #75818b; font-size: 9px; font-weight: 800; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
.load-breakdown b { display: block; margin-top: 2px; color: #26333d; font-size: 15px; line-height: 1; }
.load-breakdown small { margin-top: 3px; font-weight: 700; text-transform: none; }
.model-source-note { margin-top: 7px; color: #7a858e; font-size: 10px; line-height: 1.35; }
.civic-note { margin-top: 10px; padding: 10px; border: 1px solid #eadbdd; border-radius: 9px; background: linear-gradient(135deg, #fff8f8 0%, #ffffff 70%); }
.civic-note strong { display: block; color: #9e1a1f; font-size: 11px; font-weight: 900; letter-spacing: .5px; text-transform: uppercase; }
.civic-note p { margin-top: 5px; color: #62707a; font-size: 10px; line-height: 1.45; }
.mode-bars { display: grid; gap: 6px; margin-top: 10px; }
.mode-row { display: grid; grid-template-columns: 58px minmax(0, 1fr) 34px; gap: 7px; align-items: center; color: #6a7680; font-size: 10px; font-weight: 800; }
.mode-row div { height: 7px; overflow: hidden; border-radius: 999px; background: #edf1f3; }
.mode-row i { display: block; height: 100%; min-width: 3px; border-radius: inherit; background: #d71920; }
.mode-row.streetcar i { background: #2478b8; }
.mode-row b { color: #26333d; text-align: right; font-size: 10px; }
.stats-lists { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; margin-top: 12px; }
.stats-lists.single { grid-template-columns: 1fr; }
.stats-lists h3 { margin: 0 0 5px; color: #5b6872; font-size: 10px; font-weight: 900; letter-spacing: .7px; text-transform: uppercase; }
.mini-list { display: grid; gap: 5px; }
.mini-route { display: grid; width: 100%; min-width: 0; grid-template-columns: 34px minmax(0, 1fr); gap: 8px; align-items: center; padding: 7px; overflow: hidden; border: 1px solid #e7ecef; border-radius: 8px; text-align: left; background: #fff; }
.mini-route:hover { border-color: #f0c4c7; background: #fff9f9; }
.mini-route strong, .mini-route small { display: block; }
.mini-route strong { color: #26333d; font-size: 11px; }
.mini-route span { min-width: 0; }
.mini-route strong, .mini-route small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mini-route small, .mini-empty { color: #7a858e; font-size: 10px; line-height: 1.3; }
.mini-empty { padding: 7px; border: 1px dashed #dfe6eb; border-radius: 8px; background: #fff; }
.pulse-link { display: flex; align-items: center; justify-content: center; gap: 7px; margin-top: 10px; padding: 9px 10px; border: 1px solid #f0c4c7; border-radius: 8px; color: #b8171d; background: #fff8f8; font-size: 11px; font-weight: 900; text-align: center; text-decoration: none; }
.pulse-link span { padding: 2px 5px; border-radius: 999px; color: #fff; background: #d71920; font-size: 9px; text-transform: uppercase; }
.feature-link { display: grid; justify-items: start; gap: 4px; padding: 11px; text-align: left; }
.feature-link span { justify-self: start; }
.feature-link strong { color: #9e1a1f; font-size: 13px; line-height: 1.2; }
.feature-link small { color: #725e62; font-size: 10px; font-weight: 700; line-height: 1.35; }
.back-link { margin: 0 0 12px; color: #43515c; border-color: #dfe6eb; background: #fff; }
.directions-form { margin-top: 12px; padding: 11px; border: 1px solid #eadbdd; border-radius: 8px; background: #fff8f8; }
.directions-form label, .stop-watch label { display: block; margin-bottom: 7px; color: #9e1a1f; font-size: 11px; font-weight: 800; letter-spacing: .6px; text-transform: uppercase; }
.directions-form div, .stop-watch form div { display: flex; gap: 6px; }
.directions-form input, .stop-watch input { min-width: 0; width: 100%; padding: 9px; border: 1px solid #e1cfd1; border-radius: 6px; outline: 0; color: #273440; background: #fff; font-size: 12px; }
.directions-form button, .stop-watch button { border: 1px solid #d71920; border-radius: 6px; color: #fff; background: #d71920; font-size: 11px; font-weight: 800; }
.directions-form small, .stop-watch small { display: block; margin-top: 7px; color: #8a6e71; font-size: 10px; line-height: 1.35; }
.stop-watch { margin-top: 12px; padding: 11px; border: 1px solid #dbe7f1; border-radius: 8px; background: #f7fbff; }
.stop-watch label { color: #175a87; }
.stop-watch input { border-color: #c9dcea; }
.stop-watch button { border-color: #2478b8; background: #2478b8; }
.stop-results { display: grid; gap: 6px; margin-top: 8px; }
.stop-result { display: grid; width: 100%; grid-template-columns: 42px minmax(0, 1fr); gap: 8px; align-items: center; padding: 8px; border: 1px solid #dce8f1; border-radius: 7px; color: #273440; text-align: left; background: #fff; }
.stop-result strong, .watched-stop strong { display: block; color: #26333d; font-size: 12px; }
.stop-result small, .watched-stop small { display: block; margin-top: 2px; color: #7a858e; font-size: 10px; }
.watched-stop { margin-top: 9px; padding: 9px; border: 1px solid #cfe2f0; border-radius: 7px; background: #fff; }
.watched-stop header { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.watched-stop header span { display: block; color: #2478b8; font-size: 9px; font-weight: 900; letter-spacing: .7px; text-transform: uppercase; }
.watched-stop .watch-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.watched-stop .watch-actions button { padding: 6px 8px; border-radius: 999px; font-size: 10px; }
.watched-stop .watch-actions .quiet-button { border-color: #dce8f1; color: #47545e; background: #fff; }
.commute-settings { display: grid; grid-template-columns: minmax(0, 1fr) 74px; gap: 7px; margin: 8px 0; }
.commute-settings label { margin: 0; color: #54616b; font-size: 9px; font-weight: 900; letter-spacing: .7px; text-transform: uppercase; }
.commute-settings label span { display: block; margin-bottom: 4px; }
.commute-settings input { width: 100%; padding: 7px; border: 1px solid #d7e5ef; border-radius: 6px; color: #26333d; background: #fff; font-size: 12px; }
.commute-next { padding: 10px; border: 1px solid #d7e5ef; border-radius: 8px; background: #f7fbff; }
.commute-next.due { border-color: #d71920; background: #fff7f7; }
.commute-next span { display: block; color: #2478b8; font-size: 17px; font-weight: 900; letter-spacing: -.3px; }
.commute-next.due span { color: #d71920; }
.commute-next strong { display: block; margin-top: 3px; color: #26333d; font-size: 12px; }
.commute-next small { display: block; margin-top: 3px; color: #72808b; font-size: 10px; }
.watch-arrivals { display: grid; gap: 5px; margin-top: 8px; }
.watch-arrival { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 7px; align-items: center; padding: 7px 0; border-top: 1px solid #edf3f7; }
.watch-arrival b { color: #c8171d; font-size: 11px; }
.watch-empty { color: #7a858e; font-size: 11px; }
.favorites-panel { margin-top: 12px; }
.section-title { margin-bottom: 7px; color: #6d7882; font-size: 10px; font-weight: 800; letter-spacing: .7px; text-transform: uppercase; }
.favorites-list { display: flex; flex-wrap: wrap; gap: 6px; }
.favorites-list button { padding: 6px 8px; border: 1px solid #e0e5e8; border-radius: 999px; color: #3d4a54; background: #fff; font-size: 11px; font-weight: 700; }
.favorites-list span { color: #8a949c; font-size: 11px; }
.filters { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; margin: 15px 0 18px; padding: 3px; border-radius: 7px; background: #f0f2f4; }
.filter { padding: 7px 4px; border: 0; border-radius: 5px; color: #68747f; background: transparent; font-size: 11px; font-weight: 700; }
.filter.active { color: #c8171d; background: #fff; box-shadow: 0 1px 3px #9da7b233; }
.visibility-toggle { display: flex; align-items: center; gap: 7px; margin: -5px 0 15px; color: #66737d; font-size: 11px; }
.visibility-toggle input { accent-color: #d71920; }
.mobile-jump-nav { display: none; }
.mobile-status { display: none; }
.summary { display: flex; align-items: center; justify-content: space-between; padding-bottom: 12px; border-bottom: 1px solid #e6eaed; }
.summary span { display: block; color: #67737d; font-size: 11px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase; }
.summary strong { display: block; margin-top: 3px; color: #202b34; font-size: 25px; }
.icon-button { display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid #e0e5e8; border-radius: 7px; color: #d71920; background: #fff; }
.route-row { display: grid; width: 100%; grid-template-columns: 36px 1fr auto; gap: 10px; align-items: center; padding: 11px 2px; border: 0; border-bottom: 1px solid #edf0f2; text-align: left; background: #fff; }
.route-row:hover { background: #f7f9fa; }
.route-number { display: grid; place-items: center; width: 34px; height: 30px; border-radius: 5px; color: #fff; background: #d71920; font-size: 11px; font-weight: 800; }
.route-row strong { display: block; font-size: 13px; }
.route-row small, .route-count { color: #78838c; font-size: 11px; }
.sidebar-footer { display: grid; grid-template-columns: auto 1fr; gap: 6px 8px; align-items: center; padding: 13px 16px; border-top: 1px solid #e4e8eb; color: #77828b; font-size: 11px; }
.sidebar-footer #updated-at { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidebar-footer small { grid-column: 1 / -1; color: #8a949d; font-size: 9px; line-height: 1.35; }
.live-dot { width: 8px; height: 8px; border-radius: 50%; background: #2caf63; box-shadow: 0 0 0 3px #2caf6320; }
.movement-controls { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 10px; }
.movement-controls label { display: grid; gap: 5px; color: #697680; font-size: 9px; font-weight: 900; letter-spacing: .6px; text-transform: uppercase; }
.movement-controls select { min-width: 0; padding: 8px; border: 1px solid #dfe6eb; border-radius: 7px; color: #273440; background: #fff; font-size: 12px; font-weight: 700; text-transform: none; }
.direction-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; margin-top: 10px; }
.direction-grid article { position: relative; min-width: 0; overflow: hidden; padding: 9px; border: 1px solid #e5e9ec; border-radius: 8px; background: #fff; }
.direction-grid span { display: block; color: #74808b; font-size: 9px; font-weight: 900; letter-spacing: .5px; text-transform: uppercase; }
.direction-grid strong { display: block; margin-top: 4px; color: #182530; font-size: 19px; line-height: 1; }
.direction-grid i { display: block; height: 4px; margin-top: 8px; border-radius: 999px; background: #d71920; }
.movement-lists { grid-template-columns: 1fr; }
.equity-lists .mini-route { grid-template-columns: 38px minmax(0, 1fr); align-items: start; }
.equity-lists .mini-route strong,
.equity-lists .mini-route small { white-space: normal; }
.equity-lists .mini-route strong { line-height: 1.2; }
.equity-lists .mini-route small { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.movement-row { pointer-events: none; }
.explain-card { margin-top: 10px; padding: 10px; border: 1px solid #e7ecef; border-radius: 8px; background: #fff; }
.explain-card strong { display: block; color: #26333d; font-size: 11px; }
.explain-card p { margin-top: 4px; color: #66737d; font-size: 10px; line-height: 1.45; }
.model-note { margin-top: 12px; padding: 11px; border: 1px solid #e2e6e9; border-radius: 10px; background: #fff; }
.model-note strong { display: block; margin-bottom: 5px; color: #26333d; font-size: 12px; }
.model-note p { margin-top: 6px; color: #6f7b85; font-size: 11px; line-height: 1.45; }
.movement-flow-layer { position: absolute; pointer-events: none; }
.movement-legend { position: absolute; z-index: 500; bottom: 22px; left: 18px; display: flex; gap: 12px; padding: 10px 12px; border: 1px solid #e2e6e8; border-radius: 7px; background: #fffffff5; box-shadow: 0 4px 16px #43515f18; color: #5d6a74; font-size: 11px; font-weight: 800; }
.equity-legend { position: absolute; z-index: 500; bottom: 22px; left: 18px; display: flex; flex-wrap: wrap; gap: 12px; max-width: min(560px, calc(100% - 36px)); padding: 10px 12px; border: 1px solid #e2e6e8; border-radius: 7px; background: #fffffff5; box-shadow: 0 4px 16px #43515f18; color: #5d6a74; font-size: 11px; font-weight: 800; }
.movement-legend span { display: flex; align-items: center; gap: 6px; }
.equity-legend span { display: flex; align-items: center; gap: 6px; }
.flow-key { display: block; height: 8px; border-radius: 999px; background: #d71920; }
.flow-key.low { width: 16px; opacity: .45; }
.flow-key.medium { width: 26px; opacity: .68; }
.flow-key.high { width: 38px; opacity: .88; }
.equity-key { display: block; width: 12px; height: 12px; border-radius: 3px; }
.equity-key.gap { background: #d71920; }
.equity-key.watch { background: #f3a530; }
.equity-key.balanced { background: #2caf63; }
.equity-key.high { background: #2478b8; }
.nav-button { text-decoration: none; }

.map-panel { position: relative; min-width: 0; min-height: 0; background: #e8ecef; }
.map-header { position: absolute; z-index: 500; top: 18px; left: 18px; right: 18px; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 16px; border: 1px solid #e2e6e8; border-radius: 9px; background: #fffffff5; box-shadow: 0 7px 24px #43515f1a; }
h2 { color: #1c2832; font-size: 19px; letter-spacing: -.3px; }
.map-header p { margin-top: 3px; color: #72808b; font-size: 12px; }
.header-actions { display: flex; align-items: center; gap: 8px; }
.map-view-toggle { display: grid; grid-template-columns: repeat(2, 1fr); gap: 3px; padding: 3px; border: 1px solid #dce1e4; border-radius: 8px; background: #fff; }
.map-view-toggle button { padding: 6px 9px; border: 0; border-radius: 6px; color: #65717b; background: transparent; font-size: 11px; font-weight: 900; }
.map-view-toggle button.active { color: #fff; background: #26333d; }
.primary-button, .secondary-button { display: flex; align-items: center; gap: 7px; padding: 9px 11px; border-radius: 7px; font-size: 12px; font-weight: 700; }
.primary-button { border: 1px solid #d71920; color: #fff; background: #d71920; }
.secondary-button { border: 1px solid #dce1e4; color: #47545e; background: #fff; }
.route-focus { position: absolute; z-index: 550; top: 95px; left: 18px; display: flex; align-items: center; gap: 14px; padding: 9px 11px; border: 1px solid #e4e8ea; border-radius: 8px; background: #fff; box-shadow: 0 4px 16px #43515f22; }
.route-focus[hidden], .nearby-panel[hidden] { display: none; }
.route-focus span, .nearby-panel header span { display: block; color: #77838d; font-size: 9px; font-weight: 800; letter-spacing: .7px; text-transform: uppercase; }
.route-focus strong, .nearby-panel header strong { display: block; margin-top: 2px; font-size: 13px; }
.route-focus button, .popup-focus { border: 0; color: #c8171d; background: transparent; font-size: 11px; font-weight: 800; }
.alerts-panel { position: absolute; z-index: 545; top: 95px; right: 18px; width: 310px; overflow: hidden; border: 1px solid #f0d9a7; border-radius: 8px; background: #fffbf1; box-shadow: 0 4px 16px #43515f1d; }
.alerts-panel[hidden] { display: none; }
.alerts-panel header { display: flex; justify-content: space-between; gap: 10px; padding: 10px 12px; border-bottom: 1px solid #f2dfb7; }
.alerts-panel header span { color: #8b5b00; font-size: 10px; font-weight: 900; letter-spacing: .7px; text-transform: uppercase; }
.alerts-panel header a { color: #9e1a1f; font-size: 10px; font-weight: 800; text-decoration: none; }
.alerts-panel p { margin: 0; padding: 10px 12px; color: #5f4a20; font-size: 11px; line-height: 1.4; }
#map { width: 100%; height: 100%; }
.ttc-heat-layer { position: absolute; opacity: .92; pointer-events: none; mix-blend-mode: multiply; }
.leaflet-control-zoom { margin: 0 18px 23px 0 !important; border: 0 !important; box-shadow: 0 3px 15px #46515c25 !important; }
.leaflet-control-zoom a { color: #3e4c57 !important; border-color: #e1e6e9 !important; }
.vehicle-pin { display: grid; place-items: center; width: 23px; height: 23px; border: 2px solid #fff; border-radius: 50% 50% 50% 0; color: #fff; background: #d71920; box-shadow: 0 2px 6px #3c465844; transform: rotate(-45deg); }
.vehicle-pin svg { width: 12px; height: 12px; fill: #fff; transform: rotate(45deg); }
.vehicle-pin.streetcar { background: #2478b8; }
.vehicle-popup strong { display: block; margin-bottom: 5px; font-size: 14px; }
.vehicle-popup span { display: block; margin-top: 2px; color: #66717a; font-size: 12px; }
.vehicle-popup .vehicle-age { margin-top: 6px; color: #c8171d; font-size: 11px; font-weight: 700; }
.popup-focus { margin-top: 8px; padding: 0; }
.nearby-panel { position: absolute; z-index: 550; right: 18px; bottom: 22px; width: 285px; overflow: hidden; border: 1px solid #e2e6e8; border-radius: 9px; background: #fff; box-shadow: 0 7px 24px #43515f26; }
.nearby-panel header { display: flex; align-items: center; justify-content: space-between; padding: 12px; border-bottom: 1px solid #e8ecee; }
.panel-close { border: 0; color: #68747d; background: transparent; font-size: 22px; line-height: 1; }
.nearby-list { max-height: 285px; overflow-y: auto; }
.nearby-row { display: grid; width: 100%; grid-template-columns: 36px 1fr auto; gap: 9px; align-items: center; padding: 10px 12px; border: 0; border-bottom: 1px solid #edf0f2; text-align: left; background: #fff; }
.nearby-row:hover { background: #f7f9fa; }
.nearby-row strong, .nearby-row small { display: block; }
.nearby-row strong { color: #26333d; font-size: 12px; }
.nearby-row small { margin-top: 2px; color: #7a858e; font-size: 10px; }
.nearby-row b { color: #c8171d; font-size: 11px; }
.nearby-subtitle { padding: 10px 12px 4px; color: #6d7882; font-size: 10px; font-weight: 900; letter-spacing: .7px; text-transform: uppercase; }
.nearby-stops { border-top: 1px solid #e8ecee; }

.platform-body { min-height: 100%; overflow: auto; background: #f3f6f8; color: #111827; }
.platform-topbar nav { max-width: min(760px, 62vw); overflow-x: auto; scrollbar-width: none; }
.platform-topbar nav::-webkit-scrollbar { display: none; }
.platform-page { min-height: 100dvh; padding: 92px clamp(16px, 3vw, 42px) 34px; }
.platform-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 360px); gap: 18px; align-items: stretch; margin: 0 auto 18px; max-width: 1280px; }
.platform-hero h1 { color: #07111f; font-size: clamp(42px, 5vw, 72px); line-height: .92; letter-spacing: -2.5px; }
.platform-hero p { max-width: 780px; margin-top: 10px; color: #536171; font-size: clamp(16px, 1.5vw, 21px); line-height: 1.4; }
.platform-hero aside { display: grid; align-content: center; gap: 7px; padding: 18px; border: 1px solid #dfe6ee; border-radius: 18px; background: #fff; box-shadow: 0 18px 45px #24313d12; }
.platform-hero aside strong { color: #122033; font-size: 22px; }
.platform-hero aside small { color: #667487; line-height: 1.35; }
.platform-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; max-width: 1280px; margin: 0 auto 16px; }
.platform-metrics article, .platform-card { min-width: 0; border: 1px solid #dfe6ee; border-radius: 18px; background: #fff; box-shadow: 0 18px 45px #24313d10; }
.platform-metrics article { padding: 18px; }
.platform-metrics span, .platform-card header p, .platform-card small { color: #647287; }
.platform-metrics span { display: block; font-size: 11px; font-weight: 900; letter-spacing: .6px; text-transform: uppercase; }
.platform-metrics strong { display: block; margin-top: 7px; color: #d71920; font-size: clamp(30px, 4vw, 46px); line-height: 1; letter-spacing: -1.6px; }
.platform-metrics small { display: block; margin-top: 6px; font-size: 12px; }
.platform-grid { display: grid; gap: 16px; max-width: 1280px; margin: 0 auto 16px; }
.platform-grid.two { grid-template-columns: minmax(0, 1.35fr) minmax(280px, .65fr); }
.platform-grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.platform-card { padding: 18px; }
.platform-card header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
.platform-card h2 { margin: 0; color: #101b2d; font-size: clamp(21px, 2vw, 28px); letter-spacing: -.6px; }
.platform-card h3 { margin: 18px 0 8px; color: #101b2d; }
.platform-card p { color: #536171; line-height: 1.55; }
.platform-table-wrap { overflow-x: auto; border: 1px solid #e4ebf2; border-radius: 14px; }
.platform-table { width: 100%; min-width: 560px; border-collapse: collapse; }
.platform-table th, .platform-table td { padding: 12px 14px; border-bottom: 1px solid #edf1f5; text-align: left; font-size: 13px; }
.platform-table th { color: #526173; background: #f7fafc; font-size: 11px; letter-spacing: .6px; text-transform: uppercase; }
.platform-status { display: inline-flex; padding: 5px 9px; border-radius: 999px; font-size: 11px; font-weight: 900; }
.platform-status.good { color: #08703b; background: #dcf8e8; }
.platform-status.watch { color: #835000; background: #fff1c7; }
.platform-status.risk { color: #a11319; background: #ffe2e4; }
.decision-card { background: linear-gradient(135deg, #fff7f7 0%, #fff 70%); }
.decision-card ul, .brief-questions { display: grid; gap: 10px; margin: 14px 0 18px; padding-left: 20px; color: #344255; line-height: 1.45; }
.brief-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 340px); gap: 16px; max-width: 1280px; margin: 0 auto; }
.brief-summary { padding: 16px; border: 1px solid #f0c9cc; border-radius: 14px; background: #fff8f8; }
.brief-summary strong { display: block; color: #9e1419; font-size: 20px; line-height: 1.25; }
.brief-summary p { margin-top: 9px; }
.brief-disclaimer { margin-top: 16px; padding: 12px 13px; border: 1px solid #dbe5ed; border-radius: 12px; color: #4f5d70; background: #f8fbfd; font-size: 13px; line-height: 1.5; }
.evidence-pack { display: grid; align-content: start; gap: 10px; }
.evidence-pack a { display: flex; justify-content: space-between; gap: 12px; padding: 12px 13px; border: 1px solid #e1e8ef; border-radius: 12px; color: #162338; background: #f8fbfd; font-weight: 900; text-decoration: none; }
.evidence-pack a::after { content: "Open"; color: #d71920; font-size: 11px; text-transform: uppercase; }
.platform-issue-list { display: grid; gap: 10px; }
.platform-issue-row { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px; border: 1px solid #e4ebf2; border-radius: 14px; background: #fbfdff; }
.platform-issue-row span { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; color: #fff; background: #d71920; font-size: 12px; font-weight: 900; }
.platform-issue-row strong, .platform-issue-row small { display: block; }
.platform-issue-row strong { color: #162338; }
.platform-issue-row small { margin-top: 3px; line-height: 1.35; }
.platform-issue-row b { padding: 6px 9px; border-radius: 999px; color: #895100; background: #fff0c2; font-size: 11px; }
.platform-state-list { display: grid; gap: 10px; }
.platform-state-list span { display: block; padding: 12px; border: 1px solid #e4ebf2; border-radius: 13px; color: #536171; background: #fbfdff; line-height: 1.4; }
.platform-state-list b { display: block; color: #122033; }
.compare-card { display: grid; gap: 9px; }
.compare-card span { color: #d71920; font-size: 11px; font-weight: 900; letter-spacing: .7px; text-transform: uppercase; }
.compare-card strong { color: #122033; font-size: 26px; line-height: 1.05; }
.compare-card.active { border-color: #f1b8bd; background: #fff8f8; }
.scenario-control label { display: block; color: #526173; font-weight: 900; }
.scenario-control input { width: 100%; margin: 18px 0; accent-color: #d71920; }
.scenario-output { display: grid; gap: 6px; padding: 16px; border-radius: 14px; color: #4d5b70; background: #f5f8fb; }
.scenario-output strong { color: #d71920; font-size: 24px; }
.scenario-output span { line-height: 1.45; }
.arrival-predictions { border-top: 1px solid #e8ecee; }
.nearby-empty { padding: 9px 12px 12px; color: #7a858e; font-size: 11px; }
.stop-code { display: grid; place-items: center; min-width: 34px; height: 30px; border-radius: 5px; color: #2478b8; background: #eaf4fb; font-size: 10px; font-weight: 900; }
.arrival-banner { position: absolute; z-index: 700; left: 50%; bottom: 22px; display: flex; align-items: center; gap: 12px; max-width: min(520px, calc(100% - 36px)); padding: 12px 14px; border-radius: 999px; color: #fff; background: #d71920; box-shadow: 0 8px 24px #5b1f2438; font-size: 13px; font-weight: 800; transform: translateX(-50%); }
.arrival-banner[hidden] { display: none; }
.arrival-banner button { border: 0; color: #fff; background: transparent; font-size: 20px; line-height: 1; }
.legend { position: absolute; z-index: 500; bottom: 22px; left: 18px; display: flex; gap: 15px; padding: 10px 12px; border: 1px solid #e2e6e8; border-radius: 7px; background: #fffffff5; box-shadow: 0 4px 16px #43515f18; color: #5d6a74; font-size: 11px; font-weight: 700; }
.legend span { display: flex; align-items: center; gap: 6px; }
.legend-marker { width: 9px; height: 9px; border-radius: 50%; background: #d71920; }
.legend-marker.streetcar { background: #2478b8; }
.loading { position: absolute; z-index: 600; inset: 50% auto auto 50%; padding: 10px 14px; border-radius: 7px; color: #48555f; background: #fff; box-shadow: 0 5px 22px #3d48562a; font-size: 13px; transform: translate(-50%, -50%); }
.loading.error { color: #b2171c; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.offline-page { display: grid; place-items: center; align-content: center; min-height: 100vh; padding: 28px; text-align: center; background: #fff; }
.offline-page h1 { margin-top: 18px; color: #1c2832; font-size: 28px; }
.offline-page p { max-width: 420px; margin-top: 10px; color: #65717b; line-height: 1.5; }
.offline-page a { margin-top: 18px; padding: 10px 14px; border-radius: 8px; color: #fff; background: #d71920; font-size: 13px; font-weight: 900; text-decoration: none; }
.offline-mark { color: #d71920; border-color: #d71920; }

.equity-dashboard { height: calc(100vh - 58px); height: calc(100dvh - 58px); margin-top: 58px; overflow-y: auto; padding: 22px clamp(16px, 3vw, 38px); background: #f6f1ea; }
.equity-hero { display: grid; grid-template-columns: minmax(280px, 0.92fr) minmax(460px, 1.55fr); gap: 22px; align-items: stretch; max-width: 1180px; margin: 0 auto; }
.equity-copy { display: grid; align-content: center; gap: 18px; min-width: 0; }
.eyebrow { color: #8f1c20; font-size: 11px; font-weight: 900; letter-spacing: .9px; text-transform: uppercase; }
.equity-copy h1 { max-width: 420px; color: #26313a; font-size: clamp(34px, 4vw, 54px); line-height: .96; letter-spacing: -1.8px; }
.equity-copy h1 strong { display: block; color: #b8171d; }
.equity-copy > p { max-width: 360px; color: #5e6871; font-size: 17px; line-height: 1.35; }
.hero-callout { display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: 12px; align-items: center; max-width: 360px; padding: 14px; border: 1px solid #eadbdd; border-radius: 12px; background: #fff; box-shadow: 0 10px 28px #52333a0d; }
.callout-icon { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; color: #b8171d; background: #fff0f1; font-size: 20px; font-weight: 900; }
.hero-callout strong, .hero-callout small { display: block; }
.hero-callout strong { color: #26313a; font-size: 13px; line-height: 1.35; }
.hero-callout small { margin-top: 3px; color: #7a858e; font-size: 11px; line-height: 1.3; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.hero-actions .nav-button { justify-content: center; min-height: 42px; }

.equity-map-card { position: relative; height: clamp(440px, 55dvh, 590px); min-height: 440px; overflow: hidden; border: 1px solid #d9d6cf; border-radius: 16px; background: #e9ecef; box-shadow: 0 16px 42px #544b4322; }
.equity-map-card header { position: absolute; z-index: 520; top: 14px; right: 14px; left: 14px; display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 12px 14px; border: 1px solid #e7e2da; border-radius: 12px; background: #fffaf5ee; box-shadow: 0 7px 22px #43515f18; }
.equity-map-card header span { display: block; color: #8f1c20; font-size: 10px; font-weight: 900; letter-spacing: .8px; text-transform: uppercase; }
.equity-map-card header p { margin-top: 3px; color: #66727c; font-size: 12px; line-height: 1.35; }
.equity-map-card #map { position: absolute; inset: 0; width: 100%; height: 100%; }
.equity-map-card .equity-legend { right: 20px; left: auto; bottom: 20px; }
.map-chip { position: absolute; z-index: 530; bottom: 20px; left: 20px; padding: 9px 12px; border: 1px solid #eadbdd; border-radius: 999px; color: #9e1a1f; background: #fff8f8; box-shadow: 0 5px 18px #43515f1a; font-size: 11px; font-weight: 900; }

.equity-scoreboard { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; max-width: 1180px; margin: 18px auto 0; }
.equity-scoreboard article { min-width: 0; padding: 15px; border: 1px solid #e2ddd4; border-radius: 14px; background: #fff; box-shadow: 0 10px 26px #52483f0d; }
.equity-scoreboard span { display: block; color: #56616b; font-size: 10px; font-weight: 900; letter-spacing: .8px; text-transform: uppercase; }
.equity-scoreboard strong { display: block; margin-top: 7px; color: #b8171d; font-size: 31px; line-height: 1; letter-spacing: -1px; }
.equity-scoreboard small { display: block; margin-top: 5px; color: #69747e; font-size: 11px; line-height: 1.3; }

.ward-score-section { max-width: 1180px; margin: 18px auto 0; padding: 22px; }
.ward-score-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 28px; }
.ward-score-header > div { max-width: 760px; }
.ward-score-header h2 { margin: 5px 0 7px; color: #10213d; font-size: clamp(25px, 3vw, 38px); line-height: 1.05; }
.ward-score-header p { margin: 0; color: #596678; line-height: 1.55; }
.ward-score-header .secondary-button { flex: 0 0 auto; }
.ward-score-key { display: flex; flex-wrap: wrap; gap: 12px 24px; margin: 20px 0 14px; padding: 12px 14px; border-radius: 10px; background: #f4f7fa; color: #475569; font-size: 13px; }
.ward-score-key span { display: inline-flex; align-items: center; gap: 6px; }
.score-dot { width: 10px; height: 10px; border-radius: 50%; }
.score-dot.strong, .score-status.strong { background: #e0f3e7; color: #176a3a; }
.score-dot.review, .score-status.review { background: #fff0c9; color: #815b00; }
.score-dot.priority, .score-status.priority { background: #fde1e1; color: #a51f24; }
.ward-score-table-wrap { overflow-x: auto; border: 1px solid #dce3ea; border-radius: 12px; }
.ward-score-table { width: 100%; border-collapse: collapse; color: #26364d; font-size: 14px; }
.ward-score-table th { padding: 11px 14px; background: #102b4c; color: #fff; font-size: 11px; letter-spacing: .06em; text-align: left; text-transform: uppercase; }
.ward-score-table td { padding: 12px 14px; border-top: 1px solid #e6ebf0; vertical-align: middle; }
.ward-score-table tbody tr:hover { background: #f8fafc; }
.ward-score-table button { display: flex; flex-direction: column; gap: 2px; padding: 0; border: 0; background: transparent; color: #10213d; text-align: left; cursor: pointer; }
.ward-score-table button span, .ward-score-table small { color: #68758a; }
.ward-score-table a { color: #0759b5; font-weight: 800; text-decoration: none; white-space: nowrap; }
.ward-score-value { display: flex; align-items: baseline; gap: 2px; }
.ward-score-value strong { font-size: 25px; line-height: 1; }
.ward-score-value.strong strong { color: #187345; }
.ward-score-value.review strong { color: #966700; }
.ward-score-value.priority strong { color: #bd252b; }
.score-status { display: inline-block; padding: 5px 8px; border-radius: 999px; font-size: 11px; font-weight: 900; white-space: nowrap; }
.ward-score-caveat { margin: 12px 0 0; color: #68758a; font-size: 12px; line-height: 1.5; }

.equity-watchlist { max-width: 1180px; margin: 14px auto 0; }
.equity-watchlist header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.equity-watchlist header p { max-width: 690px; margin-top: 5px; color: #5f6d77; font-size: 13px; line-height: 1.45; }
.watchlist-actions { display: grid; justify-items: end; gap: 8px; flex: 0 0 auto; }
.data-updated { display: inline-flex; align-items: center; min-height: 28px; padding: 6px 9px; border: 1px solid #eadbdd; border-radius: 999px; color: #6b3d42; background: #fff8f8; font-size: 10px; font-weight: 900; letter-spacing: .4px; text-transform: uppercase; white-space: nowrap; }
.signal-confidence { display: inline-flex; align-items: center; min-height: 28px; padding: 6px 9px; border: 1px solid #dce6ef; border-radius: 999px; color: #405466; background: #f7fbff; font-size: 10px; font-weight: 900; letter-spacing: .4px; text-transform: uppercase; white-space: nowrap; }
.watchlist-link { flex: 0 0 auto; text-decoration: none; }
.watchlist-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 14px; }
.watch-card { min-width: 0; padding: 14px; border: 1px solid #eadbdd; border-radius: 15px; background: linear-gradient(180deg, #fff 0%, #fff8f8 100%); }
.watch-card.high { border-color: #efb7bb; background: linear-gradient(180deg, #fff5f5 0%, #fff 100%); }
.watch-card.medium { border-color: #f3d49b; background: linear-gradient(180deg, #fffaf0 0%, #fff 100%); }
.watch-card.loading-card { color: #69747e; font-size: 13px; }
.watch-card-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.watch-card-top span { color: #69747e; font-size: 10px; font-weight: 900; letter-spacing: .7px; text-transform: uppercase; }
.watch-card-top strong { padding: 4px 8px; border-radius: 999px; color: #fff; background: #d71920; font-size: 10px; text-transform: uppercase; }
.watch-card.medium .watch-card-top strong { background: #c98200; }
.watch-card.watch .watch-card-top strong { background: #5f6d77; }
.watch-card h3 { margin: 10px 0 0; color: #26313a; font-size: 15px; line-height: 1.2; }
.watch-card p { margin-top: 7px; color: #5f6d77; font-size: 12px; line-height: 1.4; }
.watch-meter { height: 8px; margin-top: 12px; overflow: hidden; border-radius: 999px; background: #eef1f4; }
.watch-meter i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #f3a530, #d71920); }
.watch-card small { display: block; margin-top: 8px; color: #6f7b85; font-size: 10px; line-height: 1.35; }
.watchlist-note { margin-top: 12px; color: #6f7b85; font-size: 11px; line-height: 1.45; }

.equity-detail-grid { display: grid; grid-template-columns: 1.1fr .85fr 1.25fr; gap: 14px; max-width: 1180px; margin: 14px auto 0; }
.equity-card { min-width: 0; padding: 17px; border: 1px solid #e2ddd4; border-radius: 14px; background: #fff; box-shadow: 0 10px 26px #52483f0d; }
.equity-card header { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.equity-card h2 { color: #26313a; font-size: 14px; letter-spacing: -.1px; text-transform: uppercase; }
.finding-list { display: grid; gap: 11px; margin-top: 14px; }
.finding { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 10px; align-items: start; }
.finding > span { display: block; width: 24px; height: 24px; border-radius: 50%; background: #d71920; box-shadow: inset 0 0 0 7px #fff; border: 1px solid #e7d5d6; }
.finding.watch > span { background: #f3a530; }
.finding.high > span { background: #2478b8; }
.finding.balanced > span { background: #2caf63; }
.finding strong, .finding small { display: block; }
.finding strong { color: #26313a; font-size: 12px; line-height: 1.25; }
.finding small { margin-top: 3px; color: #69747e; font-size: 11px; line-height: 1.35; }
.compact-controls { margin-top: 16px; }

.why-list { display: grid; gap: 12px; margin-top: 14px; }
.why-list p { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 10px; color: #53606b; font-size: 12px; line-height: 1.42; }
.why-list span { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 9px; background: #fff2f2; }
.explore-card { background: linear-gradient(180deg, #fff 0%, #fffaf7 100%); }
.explore-card h2 { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.explore-card h2::after { content: "Tap a card"; padding: 4px 8px; border-radius: 999px; color: #9e1a1f; background: #fff0f1; font-size: 10px; font-weight: 900; letter-spacing: 0; text-transform: none; }
.explore-grid { display: grid; grid-template-columns: repeat(2, minmax(190px, 1fr)); gap: 12px; margin-top: 14px; }
.explore-grid a, .explore-grid button { position: relative; display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: 12px; align-items: start; min-width: 0; min-height: 142px; padding: 15px; border: 1px solid #eadbdd; border-radius: 14px; color: inherit; background: #fff; box-shadow: 0 8px 22px #52333a0a; text-align: left; text-decoration: none; transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease; }
.explore-grid a:hover, .explore-grid button:hover,
.explore-grid a:focus-visible, .explore-grid button:focus-visible { border-color: #d71920; box-shadow: 0 14px 30px #b8171d1f; outline: 0; transform: translateY(-1px); }
.explore-grid a::after, .explore-grid button::after { content: "›"; position: absolute; top: 14px; right: 15px; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; color: #fff; background: #d71920; font-size: 18px; font-weight: 900; line-height: 1; opacity: .9; }
.explore-grid span { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 14px; color: #9e1a1f; background: #fff0f1; font-size: 13px; font-weight: 900; }
.explore-copy { display: grid; min-width: 0; min-height: 112px; align-content: start; padding-right: 24px; }
.explore-grid strong, .explore-grid small, .explore-grid em { display: block; min-width: 0; }
.explore-grid strong { color: #26313a; font-size: 14px; line-height: 1.2; }
.explore-grid small { margin-top: 4px; color: #5f6d77; font-size: 12px; line-height: 1.4; }
.explore-grid em { margin-top: auto; padding-top: 10px; color: #b8171d; font-size: 11px; font-style: normal; font-weight: 900; letter-spacing: .5px; text-transform: uppercase; }

.equity-rankings { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; max-width: 1180px; margin: 14px auto 0; }
.equity-rankings .mini-list { margin-top: 12px; }
.equity-footer { display: grid; grid-template-columns: auto auto minmax(0, 1fr); gap: 8px 12px; align-items: center; max-width: 1180px; margin: 18px auto 0; padding: 10px 2px 20px; color: #6b747c; font-size: 11px; }
.equity-footer small { grid-column: 1 / -1; justify-self: end; color: #7d858d; font-size: 10px; }
.footer-links { display: flex; flex-wrap: wrap; gap: 8px; justify-content: end; min-width: 0; }
.footer-links a { color: #9e1a1f; font-size: 10px; font-weight: 900; letter-spacing: .4px; text-decoration: none; text-transform: uppercase; }
.footer-links a:hover, .footer-links a:focus-visible { color: #d71920; text-decoration: underline; outline: 0; }

.trust-page { height: calc(100vh - 58px); height: calc(100dvh - 58px); min-height: 0; margin-top: 58px; overflow-y: auto; padding: 22px clamp(16px, 3vw, 38px); background: radial-gradient(circle at top right, #fff0f1 0, transparent 34%), #f6f1ea; }
.trust-hero { max-width: 1180px; margin: 0 auto; padding: 20px 0 8px; }
.trust-hero h1 { max-width: 780px; margin-top: 10px; color: #26313a; font-size: clamp(38px, 5vw, 68px); line-height: .96; letter-spacing: -2px; }
.trust-hero p { max-width: 760px; margin-top: 14px; color: #5e6871; font-size: 17px; line-height: 1.45; }
.trust-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; max-width: 1180px; margin: 16px auto 0; }
.trust-card { min-width: 0; padding: 18px; border: 1px solid #e2ddd4; border-radius: 16px; background: #fff; box-shadow: 0 10px 26px #52483f0d; }
.trust-wide { grid-column: 1 / -1; }
.trust-card h2 { color: #26313a; font-size: 15px; letter-spacing: -.1px; text-transform: uppercase; }
.trust-card p, .trust-card li { color: #5f6d77; font-size: 13px; line-height: 1.5; }
.trust-card p { margin-top: 9px; }
.trust-card ul,
.trust-card ol { display: grid; gap: 8px; margin: 12px 0 0; padding-left: 18px; }
.about-page { background: radial-gradient(circle at 82% 8%, #fff1f1 0, transparent 34%), linear-gradient(180deg, #fffaf5 0%, #f6f1ea 58%, #efe7db 100%); }
.about-hero h1 { max-width: 900px; color: #07111f; }
.about-hero p { max-width: 850px; color: #4f5b64; font-size: clamp(17px, 1.8vw, 21px); }
.about-intro-card { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 18px; align-items: center; max-width: 1180px; margin: 16px auto 0; padding: 22px; border: 1px solid #e7ddd3; border-radius: 18px; background: linear-gradient(135deg, #fff 0%, #fff8f8 100%); box-shadow: 0 14px 30px #46382f12; }
.about-intro-card h2 { margin-top: 8px; color: #07111f; font-size: clamp(22px, 2.5vw, 32px); line-height: 1.05; letter-spacing: -.8px; }
.about-intro-card p { max-width: 830px; margin-top: 10px; color: #4f5b64; font-size: 14px; line-height: 1.55; }
.about-intro-card a:not(.nav-button), .about-grid a { color: #9e1a1f; font-weight: 900; text-decoration: underline; text-underline-offset: 3px; }
.about-grid .trust-card { display: grid; align-content: start; }
.equity-footer small a { color: #9e1a1f; font-weight: 900; text-decoration: underline; text-underline-offset: 2px; }
.lineage-flow { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; max-width: 1180px; margin: 16px auto 0; }
.lineage-flow article { min-width: 0; padding: 15px; border: 1px solid #eadbdd; border-radius: 16px; background: linear-gradient(180deg, #fff 0%, #fff8f8 100%); box-shadow: 0 10px 26px #52483f0d; }
.lineage-flow span { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; color: #fff; background: #d71920; font-size: 12px; font-weight: 900; }
.lineage-flow strong { display: block; margin-top: 12px; color: #26313a; font-size: 13px; line-height: 1.25; }
.lineage-flow p { margin-top: 7px; color: #5f6d77; font-size: 12px; line-height: 1.45; }
.trust-footer { margin-top: 18px; }
.data-flow-page { background: radial-gradient(circle at 82% 6%, #fff1f1 0, transparent 30%), linear-gradient(180deg, #fffaf5 0%, #f6f1ea 58%, #efe7db 100%); }
.data-flow-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 42%); gap: 26px; align-items: center; padding: 10px 0 14px; }
.data-flow-hero h1 { max-width: 880px; color: #07111f; font-size: clamp(42px, 5vw, 64px); letter-spacing: -2.4px; }
.data-flow-hero p { max-width: 650px; color: #48515a; font-size: clamp(16px, 1.55vw, 20px); line-height: 1.42; }
.data-flow-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 20px; }
.flow-button { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 0 22px; border-radius: 13px; font-size: 14px; font-weight: 950; text-decoration: none; box-shadow: 0 10px 24px #8c0d1320; transition: transform .18s ease, box-shadow .18s ease, background .18s ease; }
.flow-button:hover, .flow-button:focus-visible { transform: translateY(-1px); box-shadow: 0 14px 30px #8c0d1330; outline: 0; }
.flow-button.primary { color: #fff; border: 1px solid #ba1117; background: linear-gradient(180deg, #d71920 0%, #b90e14 100%); }
.flow-button.secondary { color: #c8171d; border: 1px solid #d71920; background: #fff; }
.flow-button span { font-size: 17px; line-height: 1; }
.flow-illustration { position: relative; min-height: 220px; border-radius: 30px; overflow: hidden; }
.flow-illustration::before { content: ""; position: absolute; inset: 24px 18px 56px; opacity: .34; background: linear-gradient(#d71920, #d71920) 58% 0 / 2px 86% no-repeat, linear-gradient(#d71920, #d71920) 12% 72% / 72% 2px no-repeat, linear-gradient(#d71920, #d71920) 70% 66% / 22% 2px no-repeat; }
.flow-illustration::after { content: ""; position: absolute; right: 4%; bottom: 36px; width: 82%; height: 92px; opacity: .18; background: linear-gradient(#d71920 0 0) 2% 66% / 32px 34px no-repeat, linear-gradient(#d71920 0 0) 13% 48% / 38px 52px no-repeat, linear-gradient(#d71920 0 0) 27% 60% / 48px 40px no-repeat, linear-gradient(#d71920 0 0) 43% 36% / 44px 64px no-repeat, linear-gradient(#d71920 0 0) 60% 52% / 36px 48px no-repeat, linear-gradient(#d71920 0 0) 74% 26% / 42px 74px no-repeat, linear-gradient(#d71920 0 0) 88% 44% / 52px 56px no-repeat; border-bottom: 2px solid #d71920; }
.city-line { position: absolute; right: 5%; bottom: 88px; width: 88%; height: 82px; border-top: 2px solid #f1babd; opacity: .7; clip-path: polygon(0 100%, 12% 64%, 18% 78%, 25% 40%, 31% 68%, 38% 24%, 45% 68%, 53% 35%, 61% 72%, 68% 30%, 77% 70%, 84% 44%, 100% 100%); background: #fff0f1; }
.flow-bus { position: absolute; right: 12%; bottom: 30px; width: min(280px, 72%); height: 84px; border: 3px solid #d71920; border-radius: 18px 25px 12px 12px; background: linear-gradient(90deg, #fff 0 48%, #ffe8e9 48% 100%); box-shadow: 0 18px 36px #9e14191f; }
.flow-bus::before { content: ""; position: absolute; inset: 16px 24px auto 18px; height: 28px; border: 2px solid #d71920; border-radius: 8px; background: repeating-linear-gradient(90deg, #fff 0 31%, #ffd9dc 31% 33%); }
.flow-bus::after { content: ""; position: absolute; right: 12px; top: 18px; width: 38px; height: 30px; border: 2px solid #d71920; border-radius: 7px; background: #fff; }
.flow-bus span, .flow-bus i { position: absolute; bottom: -12px; width: 26px; height: 26px; border: 4px solid #d71920; border-radius: 50%; background: #fff; }
.flow-bus span { left: 38px; }
.flow-bus i { right: 44px; }
.flow-bus b { position: absolute; left: 50%; bottom: 16px; width: 36px; height: 18px; border-radius: 999px; background: #d71920; transform: translateX(-50%); }
.flow-pipeline { display: grid; grid-template-columns: minmax(0, 1fr) 36px minmax(0, 1fr) 36px minmax(0, 1fr) 36px minmax(0, 1fr); gap: 12px; align-items: center; max-width: 1180px; margin: 0 auto; }
.flow-stage { min-width: 0; align-self: stretch; padding: 16px; border: 1px solid #e7ddd3; border-radius: 17px; background: #fff; box-shadow: 0 14px 30px #46382f12; }
.flow-stage-title { display: flex; gap: 12px; align-items: center; margin-bottom: 16px; }
.flow-stage-title span { display: grid; place-items: center; flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%; color: #fff; background: #d71920; font-size: 14px; font-weight: 950; box-shadow: 0 8px 16px #d7192030; }
.flow-stage-title h2 { color: #121a27; font-size: 17px; line-height: 1.15; letter-spacing: -.25px; }
.flow-stage-list { display: grid; gap: 8px; }
.flow-stage-list div { display: flex; align-items: center; gap: 11px; min-height: 58px; padding: 10px 12px; border: 1px solid #eee3dc; border-radius: 12px; background: #fffdfa; box-shadow: inset 0 1px 0 #ffffff; }
.flow-stage-list.muted div { background: linear-gradient(180deg, #fffaf7 0%, #f8eee9 100%); }
.flow-stage-list strong { color: #202935; font-size: 13px; line-height: 1.25; }
.flow-icon { display: grid; place-items: center; flex: 0 0 auto; min-width: 36px; height: 36px; padding: 0 7px; border-radius: 12px; color: #d71920; background: #fff0f1; font-size: 15px; font-weight: 950; }
.flow-icon.green { color: #137a39; background: #dcf5e4; }
.flow-icon.blue { color: #1768b8; background: #e4f1ff; }
.flow-icon.purple { color: #6f4bb2; background: #efe8ff; }
.flow-icon.gold { color: #a96f00; background: #fff1c7; }
.flow-icon.orange { color: #d85c18; background: #ffeadb; }
.flow-arrow { color: #5f676d; font-size: 42px; font-weight: 900; text-align: center; line-height: 1; }
.flow-truth-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 1180px; margin: 20px auto 0; overflow: hidden; border: 1px solid #e7ddd3; border-radius: 18px; background: #fff; box-shadow: 0 14px 32px #46382f12; }
.flow-truth-card { min-width: 0; padding: 22px 24px; }
.flow-truth-card + .flow-truth-card { border-left: 1px solid #e9e0d6; }
.truth-heading { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.truth-heading span { display: grid; place-items: center; flex: 0 0 auto; width: 44px; height: 44px; border-radius: 999px; font-size: 22px; font-weight: 950; }
.truth-heading h2 { font-size: clamp(18px, 2vw, 22px); line-height: 1.1; letter-spacing: -.45px; }
.can-see .truth-heading span { color: #0b6b31; background: #dff6e5; }
.can-see .truth-heading h2 { color: #0f6634; }
.estimates .truth-heading span { color: #0d548f; background: #e1f1ff; }
.estimates .truth-heading h2 { color: #0d3f79; }
.excluded .truth-heading span { color: #bd1117; background: #ffe1df; }
.excluded .truth-heading h2 { color: #b90e14; }
.flow-truth-card ul { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.flow-truth-card li { position: relative; padding-left: 28px; color: #3e4851; font-size: 14px; line-height: 1.38; }
.flow-truth-card li::before { position: absolute; left: 0; top: 0; font-weight: 950; }
.can-see li::before { content: "✓"; color: #0b7b3a; }
.estimates li::before { content: "~"; color: #0d4f94; }
.excluded li::before { content: "×"; color: #d71920; }
.access-page { background: radial-gradient(circle at 78% 7%, #fff1f1 0, transparent 31%), linear-gradient(180deg, #fffaf5 0%, #f6f1ea 60%, #efe7db 100%); }
.access-hero { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(300px, .55fr); gap: 18px; align-items: stretch; max-width: 1180px; margin: 0 auto; padding: 12px 0 16px; }
.access-copy { order: 2; display: grid; align-content: center; min-width: 0; padding: 22px; border: 1px solid #e7ddd3; border-radius: 20px; background: #fffaf5e8; box-shadow: 0 16px 38px #46382f12; }
.access-copy h1 { max-width: 780px; margin-top: 10px; color: #07111f; font-size: clamp(40px, 4.5vw, 58px); line-height: .98; letter-spacing: -2px; }
.access-copy p { max-width: 700px; margin-top: 14px; color: #4c5660; font-size: clamp(17px, 1.8vw, 23px); line-height: 1.38; }
.access-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 20px; }
.access-map-card { order: 1; position: relative; min-height: clamp(520px, 64dvh, 720px); overflow: hidden; border: 1px solid #d8cfc5; border-radius: 22px; background: #e8ecef; box-shadow: 0 20px 48px #46382f1f; }
.access-map-card header { position: absolute; z-index: 520; top: 12px; right: 12px; left: 12px; display: flex; justify-content: space-between; gap: 12px; padding: 10px 12px; border: 1px solid #e7e2da; border-radius: 12px; background: #fffaf5f2; box-shadow: 0 7px 22px #43515f18; }
.access-map-card header span { display: block; color: #8f1c20; font-size: 10px; font-weight: 900; letter-spacing: .8px; text-transform: uppercase; }
.access-map-card header strong { display: block; margin-top: 2px; color: #26313a; font-size: 14px; line-height: 1.1; }
.access-map-card header small { color: #66727c; font-size: 11px; font-weight: 900; text-align: right; }
#access-map { position: absolute; inset: 0; width: 100%; height: 100%; }
.access-heat-layer { position: absolute; opacity: .9; pointer-events: none; mix-blend-mode: multiply; }
.access-svg { display: block; width: 100%; height: 100%; background: linear-gradient(145deg, #edf6f9 0%, #f8faf5 52%, #d8edf5 100%); transition: viewBox .35s ease; }
.access-svg-water { fill: #d5edf6; }
.access-svg-heat { fill: #d71920; mix-blend-mode: multiply; }
.access-svg-ward { cursor: pointer; stroke: #fff; stroke-width: 2.2; fill-opacity: .34; outline: none; transition: fill-opacity .18s ease, opacity .18s ease, stroke .18s ease, stroke-width .18s ease; vector-effect: non-scaling-stroke; }
.access-svg-ward:hover, .access-svg-ward:focus-visible { fill-opacity: .62; stroke: #07111f; stroke-width: 3.6; }
.access-svg-ward.is-selected { fill-opacity: .78; stroke: #07111f; stroke-width: 5; }
.access-svg-ward.is-muted { opacity: .3; }
.access-svg-stop { fill: #9e1a1f; stroke: #fff; stroke-width: 1.2; opacity: .82; vector-effect: non-scaling-stroke; }
.access-svg-label { fill: #26313a; font-size: 23px; font-weight: 900; letter-spacing: -.5px; opacity: .65; paint-order: stroke; stroke: #fff; stroke-width: 5px; }
.access-svg-label.muted { font-size: 17px; opacity: .52; }
.access-map-error { display: grid; height: 100%; place-items: center; padding: 26px; color: #8f1c20; font-size: 14px; font-weight: 900; text-align: center; background: #fff8f8; }
.access-map-caption { position: absolute; z-index: 520; right: 12px; bottom: 12px; left: 12px; padding: 8px 11px; border-radius: 12px; color: #174559; background: #e6f6fdf0; box-shadow: 0 8px 18px #1745591a; font-size: 11px; font-weight: 800; line-height: 1.3; }
.access-map-card .leaflet-control-attribution { font-size: 9px; }
.access-map-figure { position: relative; min-height: 320px; overflow: hidden; border: 1px solid #d8cfc5; border-radius: 20px; background: linear-gradient(145deg, #fff 0%, #fff8f8 58%, #edf7fb 100%); box-shadow: 0 16px 38px #46382f14; }
.access-map-grid { position: absolute; inset: 0; opacity: .62; background:
  linear-gradient(35deg, transparent 0 43%, #bfc8ce 43% 45%, transparent 45% 100%) 0 0 / 110px 70px,
  linear-gradient(145deg, transparent 0 47%, #c8d0d5 47% 49%, transparent 49% 100%) 0 0 / 95px 72px,
  linear-gradient(90deg, transparent 0 48%, #d7dde1 48% 51%, transparent 51% 100%) 0 0 / 86px 86px,
  linear-gradient(0deg, transparent 0 48%, #d7dde1 48% 51%, transparent 51% 100%) 0 0 / 86px 86px; }
.access-map-figure::after { content: ""; position: absolute; right: -8%; bottom: -25%; width: 58%; height: 40%; border-radius: 50% 0 0 0; background: #bfe2ef; opacity: .85; }
.access-route-line { position: absolute; left: 8%; right: 11%; top: 48%; z-index: 2; height: 9px; border-radius: 999px; background: linear-gradient(90deg, #c8171d 0%, #d71920 62%, #f08a8f 100%); box-shadow: 0 0 0 4px #fff, 0 10px 20px #d7192026; transform: rotate(-8deg); transform-origin: center; }
.access-route-line::before, .access-route-line::after { content: ""; position: absolute; top: -8px; width: 23px; height: 23px; border: 4px solid #d71920; border-radius: 50%; background: #fff; }
.access-route-line::before { left: 20%; }
.access-route-line::after { right: 14%; }
.access-barrier-line { position: absolute; right: 31%; top: 10%; bottom: 13%; z-index: 2; width: 10px; border-radius: 999px; background: repeating-linear-gradient(180deg, #41505a 0 12px, transparent 12px 20px); opacity: .78; }
.access-barrier-line span { position: absolute; top: 8px; left: 14px; padding: 4px 7px; border-radius: 999px; color: #fff; background: #41505a; font-size: 9px; font-weight: 950; text-transform: uppercase; transform: rotate(90deg); transform-origin: left top; }
.access-gap-shape { position: absolute; right: 14%; top: 29%; z-index: 4; display: grid; place-items: center; width: 150px; height: 112px; border: 3px dashed #a80f14; border-radius: 26px 16px 30px 18px; color: #fff; background: #d71920e6; font-size: 15px; font-weight: 950; line-height: 1.1; text-align: center; transform: rotate(-8deg); box-shadow: 0 14px 26px #d7192033; }
.access-gap-shape small { display: block; margin-top: 3px; color: #ffe1e3; font-size: 10px; text-transform: uppercase; }
.access-stop { position: absolute; z-index: 5; display: grid; place-items: center; width: 19px; height: 19px; border: 4px solid #fff; border-radius: 50%; background: #d71920; box-shadow: 0 0 0 2px #9e1a1f, 0 5px 12px #9e1a1f33; }
.access-stop b { position: absolute; top: 20px; left: 50%; padding: 3px 6px; border-radius: 999px; color: #9e1a1f; background: #fff; font-size: 9px; font-weight: 950; box-shadow: 0 5px 12px #46382f1a; transform: translateX(-50%); white-space: nowrap; }
.access-stop::after { content: ""; position: absolute; inset: -54px; z-index: -1; border: 2px dashed #d71920; border-radius: 50%; background: #d7192014; }
.stop-one { left: 17%; top: 27%; }
.stop-two { left: 38%; top: 35%; }
.stop-three { left: 55%; top: 56%; }
.stop-four { right: 10%; top: 23%; }
.access-ring { position: absolute; z-index: 1; border: 2px solid #2caf6350; border-radius: 50%; background: #2caf6326; filter: blur(.1px); }
.ring-one { left: 28%; top: 46%; width: 104px; height: 82px; }
.ring-two { right: 27%; top: 13%; width: 118px; height: 92px; }
.ring-three { left: 8%; bottom: 10%; width: 150px; height: 96px; }
.access-map-legend { position: absolute; top: 80px; right: 12px; z-index: 520; display: grid; gap: 7px; min-width: 178px; padding: 10px 11px; border: 1px solid #d8cfc5; border-radius: 12px; background: #fffffff0; box-shadow: 0 10px 24px #46382f18; }
.access-map-legend span { display: flex; align-items: center; gap: 8px; color: #26313a; font-size: 10px; font-weight: 900; line-height: 1.2; }
.access-map-legend i { display: inline-block; flex: 0 0 auto; }
.legend-stop { width: 12px; height: 12px; border: 2px solid #fff; border-radius: 50%; background: #d71920; box-shadow: 0 0 0 1px #9e1a1f; }
.legend-walk { width: 20px; height: 14px; border: 1px dashed #d71920; border-radius: 999px; background: #d7192018; }
.legend-gap { width: 22px; height: 13px; border: 2px dashed #a80f14; border-radius: 5px; background: #d71920cc; }
.legend-route { width: 24px; height: 5px; border-radius: 999px; background: #d71920; }
.legend-heat-low, .legend-heat-mid, .legend-heat-high { width: 22px; height: 12px; border-radius: 999px; }
.legend-heat-low { background: #d71920; }
.legend-heat-mid { background: #f3a530; }
.legend-heat-high { background: #2caf63; }
.access-map-figure figcaption { position: absolute; right: 12px; bottom: 12px; z-index: 6; max-width: 300px; padding: 8px 11px; border-radius: 999px; color: #174559; background: #e6f6fd; font-size: 11px; font-weight: 900; box-shadow: 0 8px 18px #1745591a; }
.access-drilldown { display: grid; grid-template-columns: minmax(0, .75fr) minmax(250px, .45fr) minmax(430px, 1fr); gap: 14px; align-items: stretch; max-width: 1180px; margin: 10px auto 0; }
.access-drilldown > div, .ward-picker, .ward-detail-card { min-width: 0; padding: 18px; border: 1px solid #e7ddd3; border-radius: 18px; background: #fff; box-shadow: 0 14px 30px #46382f12; }
.access-drilldown h2 { margin-top: 7px; color: #07111f; font-size: clamp(22px, 2.4vw, 31px); line-height: 1; letter-spacing: -.8px; }
.access-drilldown p { margin-top: 8px; color: #4f5b64; font-size: 13px; line-height: 1.45; }
.ward-picker { display: grid; gap: 9px; align-content: center; }
.ward-picker label, .ward-detail-card small { color: #8f1c20; font-size: 10px; font-weight: 950; letter-spacing: .8px; text-transform: uppercase; }
.ward-picker select { width: 100%; min-height: 44px; padding: 0 12px; border: 1px solid #d8cfc5; border-radius: 12px; color: #26313a; background: #fffaf5; font-size: 13px; font-weight: 850; }
.ward-picker button { min-height: 42px; border: 1px solid #d71920; border-radius: 12px; color: #9e1a1f; background: #fff; font-size: 12px; font-weight: 950; cursor: pointer; }
.ward-picker button:hover, .ward-picker button:focus-visible { color: #fff; background: #d71920; }
.ward-detail-card h3 { margin-top: 6px; color: #07111f; font-size: 21px; line-height: 1.1; letter-spacing: -.4px; }
.ward-detail-stats { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; margin-top: 13px; }
.ward-detail-stats span { min-width: 0; padding: 10px; border-radius: 13px; background: #fff7f1; }
.ward-detail-stats b { display: block; overflow-wrap: anywhere; color: #c8171d; font-size: clamp(18px, 1.8vw, 22px); line-height: 1.05; }
.ward-detail-stats em { display: block; margin-top: 5px; color: #68737d; font-size: 10px; font-style: normal; font-weight: 850; line-height: 1.2; text-transform: uppercase; }
.ward-detail-source { margin-top: 11px; color: #68737d; font-size: 11px; font-weight: 800; line-height: 1.35; }
.access-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; max-width: 1180px; margin: 10px auto 0; }
.access-metrics article { display: grid; grid-template-columns: 62px minmax(0, 1fr) auto; gap: 14px; align-items: start; min-width: 0; padding: 18px; border: 1px solid #e7ddd3; border-radius: 18px; background: #fff; box-shadow: 0 14px 30px #46382f12; }
.metric-icon { display: grid; place-items: center; width: 58px; height: 58px; border-radius: 20px; font-size: 13px; font-weight: 950; }
.metric-icon.red { color: #b90e14; background: #ffe3e5; }
.metric-icon.blue { color: #1768b8; background: #e4f1ff; }
.metric-icon.amber { color: #a96f00; background: #fff1c7; }
.access-metrics small { display: block; color: #26313a; font-size: 15px; font-weight: 950; letter-spacing: -.2px; }
.access-metrics strong { display: block; margin-top: 2px; color: #c8171d; font-size: clamp(34px, 4vw, 48px); line-height: .95; letter-spacing: -1.8px; }
.access-metrics p { margin-top: 6px; color: #5f6d77; font-size: 12px; line-height: 1.35; }
.access-metrics b { align-self: start; padding: 7px 9px; border-radius: 12px; color: #12633a; background: #e2f6e9; font-size: 10px; text-transform: uppercase; white-space: nowrap; }
.access-equity-card { display: grid; grid-template-columns: minmax(0, .9fr) minmax(360px, 1.1fr); gap: 22px; align-items: center; max-width: 1180px; margin: 16px auto 0; padding: 22px; border: 1px solid #e7ddd3; border-radius: 18px; background: #fff; box-shadow: 0 14px 32px #46382f12; }
.access-equity-card h2 { margin-top: 8px; color: #07111f; font-size: clamp(26px, 3.2vw, 38px); line-height: 1; letter-spacing: -1px; }
.access-equity-card p { margin-top: 10px; color: #4f5b64; font-size: 14px; line-height: 1.5; }
.access-matrix { display: grid; grid-template-columns: 90px repeat(2, minmax(0, 1fr)); gap: 8px; align-items: stretch; }
.access-matrix > strong { display: grid; place-items: center; color: #26313a; font-size: 12px; line-height: 1.2; text-align: center; }
.access-matrix article { min-width: 0; padding: 13px; border-radius: 12px; text-align: center; }
.access-matrix b { display: block; color: #26313a; font-size: 13px; line-height: 1.2; }
.access-matrix p { margin-top: 5px; color: #47525b; font-size: 11px; line-height: 1.3; }
.matrix-high { background: #ffd6d8; }
.matrix-physical { background: #fff0bd; }
.matrix-frequency { background: #fff4cf; }
.matrix-baseline { background: #dff3e7; }
.access-explainer-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; max-width: 1180px; margin: 16px auto 0; }
.access-explainer-grid article, .access-note { min-width: 0; padding: 18px; border: 1px solid #e7ddd3; border-radius: 18px; background: #fff; box-shadow: 0 14px 30px #46382f12; }
.method-badge { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 16px; font-size: 12px; font-weight: 950; }
.method-badge.green { color: #0f6634; background: #dff6e5; }
.method-badge.red { color: #b90e14; background: #ffe3e5; }
.method-badge.gray { color: #51575c; background: #eeeeee; }
.access-explainer-grid h2, .access-note h2 { margin-top: 12px; color: #26313a; font-size: 18px; line-height: 1.15; letter-spacing: -.25px; }
.access-explainer-grid p, .access-note p { margin-top: 8px; color: #5f6d77; font-size: 13px; line-height: 1.5; }
.access-explainer-grid ul { display: grid; gap: 7px; margin: 12px 0 0; padding-left: 18px; color: #40505b; font-size: 12px; line-height: 1.4; }
.access-note { max-width: 1180px; margin: 16px auto 0; background: linear-gradient(135deg, #fff 0%, #fff8f8 100%); }
.access-note h2 { margin-top: 0; }
.access-note strong { color: #9e1a1f; }
.access-drill-page { --access-red: #d71920; --access-dark-red: #b8171d; --access-ink: #0d1724; --access-muted: #52657a; --access-line: #d9e2ea; --access-card: #fff; background: linear-gradient(180deg, #f7fbff 0%, #eef5fb 100%); }
.access-drill-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 430px); gap: 18px; align-items: end; max-width: 1480px; margin: 0 auto; padding: 18px 0 16px; }
.access-drill-hero > div, .access-data-note, .access-panel { min-width: 0; border: 1px solid var(--access-line); border-radius: 8px; background: #fff; box-shadow: 0 12px 30px #37526a12; }
.access-drill-hero > div { border: 0; box-shadow: none; background: transparent; padding: 0 6px; }
.access-drill-hero h1 { max-width: 820px; margin-top: 7px; color: var(--access-ink); font-size: clamp(34px, 3.5vw, 46px); line-height: 1.02; letter-spacing: -1.9px; }
.access-drill-hero p { max-width: 780px; margin-top: 6px; color: #42556c; font-size: clamp(15px, 1.45vw, 19px); line-height: 1.4; }
.access-data-note { display: grid; justify-items: end; align-content: center; gap: 8px; padding: 14px 18px; border: 0; background: transparent; box-shadow: none; text-align: right; }
.access-data-note span { width: max-content; max-width: 100%; padding: 8px 12px; border-radius: 8px; color: #607188; background: #e8f0f8; font-size: 13px; font-weight: 850; letter-spacing: 0; text-transform: none; }
.access-data-note strong { color: #52657a; font-size: 14px; line-height: 1.35; }
.access-data-note small { color: #52657a; font-size: 12px; font-weight: 800; line-height: 1.4; }
.access-stepper { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; max-width: 1480px; margin: 0 auto 18px; overflow: hidden; border: 1px solid var(--access-line); border-radius: 6px; background: #fff; }
.access-stepper span { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px 16px; align-items: center; min-width: 0; padding: 16px 22px 16px 28px; color: #465a72; background: #fff; font-size: 13px; font-weight: 900; line-height: 1.2; }
.access-stepper span::before { content: ""; display: block; grid-row: 1 / span 2; width: 28px; height: 28px; border-radius: 8px; background: #e8f0f8; box-shadow: inset 0 0 0 1px #d8e3ec; }
.access-stepper span + span { border-left: 1px solid #dbe4ec; }
.access-stepper span + span::after { content: ""; position: absolute; top: 0; left: -1px; width: 30px; height: 100%; background: inherit; clip-path: polygon(0 0, 100% 50%, 0 100%); transform: translateX(-100%); }
.access-stepper b { color: #0d1724; font-size: 16px; }
.access-stepper small { color: #52657a; font-size: 12px; font-weight: 700; }
.access-stepper .is-active { color: #fff; border-color: var(--access-red); background: linear-gradient(135deg, #e20d1b 0%, #c8171d 100%); box-shadow: 0 12px 24px #b8171d24; }
.access-stepper .is-active::before { background: #fff; box-shadow: none; }
.access-stepper .is-active b, .access-stepper .is-active small { color: #fff; }
.access-workspace { display: grid; grid-template-columns: minmax(340px, .95fr) minmax(380px, 1.05fr) minmax(440px, 1.15fr); gap: 12px; align-items: stretch; max-width: 1480px; margin: 0 auto; }
.access-panel { display: grid; align-content: start; gap: 14px; padding: 18px; }
.access-panel header { display: flex; justify-content: space-between; gap: 14px; align-items: flex-start; min-width: 0; }
.ward-ranking-panel header { display: grid; gap: 8px; }
.access-panel h2 { margin-top: 0; color: var(--access-ink); font-size: clamp(20px, 2vw, 25px); line-height: 1.08; letter-spacing: -.6px; }
.access-panel p { margin-top: 4px; color: var(--access-muted); font-size: 13px; line-height: 1.4; }
.ward-ranking-list, .stop-list { display: grid; gap: 9px; max-height: min(66dvh, 720px); overflow: auto; padding-right: 3px; }
.ward-rank-card, .stop-row { width: 100%; min-width: 0; border: 0; border-radius: 0; border-bottom: 1px solid #dbe4ec; background: #fff; color: inherit; text-align: left; cursor: pointer; transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease, background .15s ease; }
.ward-rank-card:hover, .ward-rank-card:focus-visible, .stop-row:hover, .stop-row:focus-visible { border-color: #d71920; box-shadow: 0 12px 24px #b8171d16; transform: translateY(-1px); outline: none; }
.ward-rank-card.is-selected, .stop-row.is-selected { border-color: #b8171d; background: linear-gradient(90deg, #fff1f2 0%, #fff 100%); box-shadow: inset 4px 0 0 #d71920; }
.ward-rank-card { display: grid; grid-template-columns: 34px minmax(0, 1fr) minmax(112px, auto) 64px; gap: 10px; align-items: center; padding: 8px 10px; }
.rank-number, .stop-index { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 999px; color: #0d1724; background: transparent; font-size: 13px; font-weight: 850; }
.rank-copy, .stop-row span:nth-child(2) { min-width: 0; }
.rank-copy strong, .stop-row strong { display: block; overflow: hidden; color: var(--access-ink); font-size: 14px; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; }
.rank-copy small, .stop-row small, .rank-metric em { display: block; margin-top: 3px; color: #607188; font-size: 11px; font-style: normal; font-weight: 750; line-height: 1.25; }
.rank-metric { display: grid; justify-items: end; color: #9e1a1f; }
.rank-metric b { color: #0d1724; font-size: 15px; line-height: 1; }
.access-pill { justify-self: start; padding: 5px 10px; border-radius: 6px; font-size: 12px; font-weight: 850; line-height: 1; white-space: nowrap; }
.access-pill.very-low { color: #8f1116; background: #ffd8db; }
.access-pill.low { color: #90470c; background: #ffe1c2; }
.access-pill.moderate { color: #725308; background: #fff0be; }
.access-pill.good { color: #09622e; background: #cdefda; }
.stop-list-panel header strong { flex: 0 0 auto; padding: 8px 10px; border-radius: 999px; color: #9e1a1f; background: #fff0f1; font-size: 11px; white-space: nowrap; }
.stop-list-caption { padding: 9px 11px; border-radius: 13px; color: #174559; background: #e6f6fd; font-size: 11px; font-weight: 900; line-height: 1.35; }
.stop-row { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 10px 12px; }
.stop-row b { color: #0d1724; font-size: 15px; white-space: nowrap; }
.stop-detail-panel header strong { flex: 0 0 auto; max-width: 150px; padding: 8px 10px; border-radius: 999px; color: #12633a; background: #e2f6e9; font-size: 10px; line-height: 1.2; text-align: center; text-transform: uppercase; }
.stop-walk-map { position: relative; min-height: 320px; overflow: hidden; border: 1px solid #d8e2e8; border-radius: 8px; background: #eff7fa; z-index: 1; }
.stop-walk-map .leaflet-container, .stop-walk-map.leaflet-container { width: 100%; height: 320px; min-height: 320px; font-family: inherit; }
.access-map-tooltip { border: 0 !important; border-radius: 8px !important; color: #0d1724 !important; background: #fff !important; box-shadow: 0 8px 18px #0d172426 !important; font-weight: 900 !important; }
.da-context, .statscan-baseline, .access-meaning { min-width: 0; padding: 14px; border: 1px solid #eadfda; border-radius: 16px; background: #fff; }
.da-context h3, .statscan-baseline h3 { margin: 0; color: var(--access-ink); font-size: 15px; line-height: 1.2; }
.da-context-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; margin-top: 12px; }
.da-context-grid article { min-width: 0; padding: 12px; border-radius: 14px; background: #fff7f1; }
.da-context-grid span { color: #6b7781; font-size: 10px; font-weight: 950; letter-spacing: .6px; text-transform: uppercase; }
.da-context-grid strong { display: block; margin-top: 7px; overflow-wrap: anywhere; color: #b8171d; font-size: clamp(21px, 2.8vw, 30px); line-height: .95; }
.da-context-grid small { display: block; margin-top: 7px; color: #63717b; font-size: 10px; line-height: 1.3; }
.statscan-baseline dl { display: grid; gap: 8px; margin: 12px 0 0; }
.statscan-baseline div { display: flex; justify-content: space-between; gap: 10px; padding: 9px 0; border-top: 1px solid #efe7df; }
.statscan-baseline dt { color: #6b7781; font-size: 12px; font-weight: 850; }
.statscan-baseline dd { margin: 0; color: #111d27; font-size: 13px; font-weight: 950; text-align: right; }
.access-meaning { color: #4d5962; background: linear-gradient(135deg, #fff8f8 0%, #fff 100%); font-size: 13px; line-height: 1.5; }
.access-meaning strong { color: #9e1a1f; }
.local-stop-page { min-height: calc(100dvh - 58px); overflow-x: hidden; background: linear-gradient(180deg, #fbfdff 0%, #f3f8fc 100%); color: #0b1324; }
.local-stop-topbar { height: 66px; background: linear-gradient(135deg, #e20d1b 0%, #bf1018 100%); border-bottom-color: #ff8b91; }
.local-stop-brand { gap: 14px; }
.local-stop-brand span { width: 96px; height: 42px; border-radius: 0; color: #fff; background: transparent; box-shadow: inset 0 0 0 2px #fff; clip-path: polygon(10% 18%, 90% 18%, 82% 56%, 61% 56%, 56% 88%, 44% 88%, 39% 56%, 18% 56%); }
.local-stop-brand strong { display: grid; gap: 2px; max-width: none; font-size: 26px; line-height: 1; }
.local-stop-brand small { color: #ffe9eb; font-size: 14px; font-weight: 700; line-height: 1.15; }
.local-stop-topbar nav { gap: 18px; background: transparent; }
.local-stop-topbar nav a { border-radius: 0; color: #fff; font-size: 14px; font-weight: 800; }
.local-stop-topbar nav a.active { color: #fff; background: transparent; box-shadow: inset 0 -3px 0 #fff; }
.local-stop-topbar > p { margin: 0; color: #fff; font-size: 13px; font-weight: 750; white-space: nowrap; }
.local-stop-hero { display: grid; grid-template-columns: minmax(320px, 1fr) minmax(270px, .55fr); gap: 18px; align-items: end; max-width: 1500px; min-width: 0; margin: 0 auto; padding: 22px 0 14px; }
.local-stop-hero h1 { margin: 0; color: #0b1324; font-size: clamp(38px, 4vw, 54px); line-height: .98; letter-spacing: -2px; }
.local-stop-hero p { margin: 6px 0 0; color: #40516a; font-size: clamp(16px, 1.6vw, 20px); line-height: 1.35; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
.stop-breadcrumb { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: center; color: #53647a; font-size: 14px; }
.stop-breadcrumb > span::after { content: ">"; margin-left: 10px; color: #8aa0b5; }
.stop-breadcrumb strong { color: #243044; font-size: 14px; }
.breadcrumb-select { display: flex; align-items: center; gap: 10px; min-width: 0; }
.breadcrumb-select::after { content: ">"; color: #8aa0b5; }
.breadcrumb-select select { max-width: min(100%, 260px); min-height: 36px; padding: 0 34px 0 12px; border: 1px solid #d6e1ea; border-radius: 999px; color: #243044; background: #fff; box-shadow: 0 8px 18px #1020330d; font: inherit; font-size: 13px; font-weight: 900; cursor: pointer; }
.breadcrumb-select select:hover, .breadcrumb-select select:focus { border-color: #df1f2d; outline: 0; box-shadow: 0 0 0 3px #df1f2d1c; }
.local-stop-hero aside { display: grid; gap: 5px; justify-items: end; min-width: 0; color: #53647a; font-size: 12px; text-align: right; }
.local-stop-hero aside span { color: #3c4f66; font-weight: 850; }
.guided-access-panel { display: grid; grid-template-columns: minmax(310px, .75fr) minmax(300px, .8fr) minmax(240px, .55fr); gap: 14px; align-items: stretch; max-width: 1500px; margin: 0 auto 16px; }
.access-stepper-mobile { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; min-width: 0; padding: 14px; border: 1px solid #dbe5ed; border-radius: 14px; background: #fff; box-shadow: 0 14px 32px #33516b0e; }
.access-stepper-mobile span { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 8px; align-items: center; min-width: 0; color: #53647a; font-size: 12px; font-weight: 900; }
.access-stepper-mobile b { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 999px; color: #fff; background: #9aa6b6; font-size: 12px; }
.access-stepper-mobile .active { color: #071126; }
.access-stepper-mobile .active b { background: #df1f2d; }
.guided-ward-select { display: grid; gap: 8px; min-width: 0; padding: 14px; border: 1px solid #dbe5ed; border-radius: 14px; background: #fff; box-shadow: 0 14px 32px #33516b0e; color: #53647a; font-size: 12px; font-weight: 900; }
.guided-ward-select select { width: 100%; min-height: 46px; padding: 0 36px 0 12px; border: 1px solid #cfdae3; border-radius: 10px; color: #0b1324; background: #f9fcff; font: inherit; font-size: 14px; cursor: pointer; }
.guided-ward-select select:focus { border-color: #df1f2d; outline: 0; box-shadow: 0 0 0 3px #df1f2d1c; }
.guided-selected-stop { display: grid; align-content: center; gap: 7px; min-width: 0; padding: 14px; border: 1px solid #dbe5ed; border-radius: 14px; background: linear-gradient(135deg, #fff 0%, #fff7f8 100%); box-shadow: 0 14px 32px #33516b0e; }
.guided-selected-stop span { color: #9e1a1f; font-size: 11px; font-weight: 950; letter-spacing: .6px; text-transform: uppercase; }
.guided-selected-stop strong { min-width: 0; overflow-wrap: anywhere; color: #071126; font-size: 17px; line-height: 1.15; }
.local-stop-layout { display: grid; grid-template-columns: minmax(360px, .48fr) minmax(0, 1fr); gap: 16px; align-items: start; max-width: 1500px; min-width: 0; margin: 0 auto; }
.local-stop-sidebar { display: grid; gap: 16px; min-width: 0; }
.local-stop-card, .da-level-card, .nearby-stop-card, .local-map-card, .ward-average-panel { border: 1px solid #dbe5ed; border-radius: 9px; background: #fff; box-shadow: 0 14px 32px #33516b0e; }
.local-stop-card, .nearby-stop-card, .da-level-card { grid-column: 1; }
.local-stop-card { display: grid; grid-template-columns: 60px minmax(0, 1fr); gap: 0 18px; align-content: start; min-width: 0; padding: 24px 20px 20px; }
.local-stop-card > div { min-width: 0; }
.stop-icon { display: grid; place-items: center; width: 58px; height: 58px; border-radius: 999px; background: #df1f2d; color: #fff; box-shadow: 0 12px 24px #df1f2d26; }
.stop-icon svg { width: 30px; height: 30px; fill: currentColor; }
.local-stop-card small { color: #273349; font-size: 13px; font-weight: 850; }
.local-stop-card h2 { margin: 6px 0 0; color: #071126; font-size: clamp(24px, 2.3vw, 30px); line-height: 1.05; letter-spacing: -.8px; }
.local-stop-card > div p, .local-stop-card div + p { min-width: 0; color: #40516a; overflow-wrap: anywhere; }
.stop-story { grid-column: 1 / -1; margin: 22px 0 0; color: #34455e; font-size: 16px; line-height: 1.5; }
.stop-switcher { grid-column: 1 / -1; display: grid; gap: 7px; margin-top: 18px; color: #53647a; font-size: 12px; font-weight: 850; }
.stop-switcher select { width: 100%; min-height: 42px; padding: 0 12px; border: 1px solid #d6e1ea; border-radius: 8px; color: #0b1324; background: #f7fbff; font: inherit; font-size: 13px; }
.da-level-card { padding: 18px; }
.da-level-card header { display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; margin-bottom: 16px; }
.da-level-card h2, .nearby-stop-card h2, .ward-average-panel h2 { margin: 0; color: #071126; font-size: 24px; line-height: 1.1; letter-spacing: -.5px; }
.da-level-card header span { color: #53647a; font-size: 14px; }
.local-metric-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.local-metric-grid article { min-width: 0; padding: 17px; border-radius: 7px; background: linear-gradient(135deg, #fbfdff 0%, #f3f7fb 100%); }
.metric-symbol { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 11px; color: #fff; background: #2d73ea; font-size: 12px; font-weight: 950; }
.metric-symbol.homes { background: #7860c9; }
.metric-symbol.seniors { background: #8856cf; }
.metric-symbol.youth { background: #28a944; }
.metric-symbol.pressure { background: #4a91e5; }
.local-metric-grid small { display: block; margin-top: 10px; min-height: 34px; color: #394b63; font-size: 13px; font-weight: 800; line-height: 1.25; }
.local-metric-grid strong { display: block; margin-top: 6px; color: #071126; font-size: 28px; line-height: 1; letter-spacing: -.6px; }
.local-metric-grid em { display: block; margin-top: 6px; color: #53647a; font-size: 12px; font-style: normal; }
.nearby-stop-card { display: grid; gap: 12px; padding: 18px; }
.nearby-stop-card header { display: flex; gap: 12px; align-items: flex-start; justify-content: space-between; }
.nearby-stop-card header span { display: block; margin-top: 4px; color: #53647a; font-size: 13px; }
.nearby-stop-card header strong { flex: 0 0 auto; padding: 7px 9px; border-radius: 999px; color: #9e1a1f; background: #fff0f1; font-size: 11px; text-transform: uppercase; }
.nearby-stop-card p { margin: 0; color: #53647a; font-size: 12px; line-height: 1.45; }
.nearby-stop-list { display: grid; gap: 8px; max-height: 330px; overflow-y: auto; padding-right: 4px; }
.nearby-stop-button { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 3px 10px; width: 100%; padding: 11px; border: 1px solid #dbe5ed; border-radius: 8px; color: #17233a; background: #fbfdff; text-align: left; cursor: pointer; transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease, background .16s ease; }
.nearby-stop-button:hover, .nearby-stop-button:focus-visible { border-color: #df1f2d; outline: 0; background: #fff8f8; box-shadow: 0 8px 18px #df1f2d14; transform: translateY(-1px); }
.nearby-stop-button.active { border-color: #df1f2d; background: #fff0f1; }
.nearby-stop-button span { grid-row: 1 / span 2; align-self: center; color: #9e1a1f; font-size: 11px; font-weight: 950; text-transform: uppercase; }
.nearby-stop-button strong { min-width: 0; overflow-wrap: anywhere; color: #071126; font-size: 13px; line-height: 1.2; }
.nearby-stop-button small { color: #53647a; font-size: 11px; line-height: 1.25; }
.local-map-card { position: relative; grid-column: 2; grid-row: 1 / span 3; min-height: 610px; overflow: hidden; padding: 0; }
.local-osm-map, .local-osm-map.leaflet-container { width: 100%; height: 610px; min-height: 610px; border: 0; border-radius: 9px; }
.map-key { position: absolute; z-index: 560; top: 16px; left: 16px; display: grid; gap: 10px; min-width: 210px; padding: 15px 16px; border-radius: 8px; background: #fffffff2; box-shadow: 0 10px 24px #10203324; color: #0f1c31; font-size: 12px; font-weight: 800; }
.map-key span { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 9px; align-items: center; }
.map-key i { display: inline-block; }
.key-stop { width: 20px; height: 20px; border: 5px solid #fff; border-radius: 50%; background: #df1f2d; box-shadow: 0 0 0 3px #df1f2d; }
.key-nearby { width: 16px; height: 16px; border: 3px solid #fff; border-radius: 50%; background: #2d73ea; box-shadow: 0 0 0 2px #2d73ea; }
.key-service { width: 28px; height: 5px; border-radius: 999px; background: linear-gradient(90deg, #0f6ec7 0 48%, #d71920 52%); box-shadow: 0 2px 5px #10203322; }
.key-bus-route,.key-streetcar-route{width:28px;height:5px;border-radius:999px;box-shadow:0 2px 5px #10203322}.key-bus-route{background:#0f6ec7}.key-streetcar-route{background:#d71920}
.key-route { width: 28px; height: 4px; border-radius: 999px; background: #2d73ea; }
.key-area { width: 26px; height: 20px; border: 1px dashed #708195; border-radius: 999px; background: #6f8ca914; }
.key-da { width: 26px; height: 20px; border: 2px dashed #2d73ea; border-radius: 4px; background: #b9ddfb80; }
.walk-preview-card { position: absolute; z-index: 560; top: 16px; right: 16px; display: grid; gap: 5px; width: min(310px, calc(100% - 290px)); min-width: 240px; padding: 14px 15px; border: 1px solid #d7e6f7; border-radius: 9px; color: #203149; background: #ffffffed; box-shadow: 0 10px 24px #10203324; }
.walk-preview-card strong { color: #0b63d1; font-size: 15px; line-height: 1.15; }
.walk-preview-card span { color: #10233f; font-size: 12px; font-weight: 850; line-height: 1.25; }
.walk-preview-card small { color: #607086; font-size: 11px; line-height: 1.35; }
.route-preview-card { position: absolute; z-index: 560; right: 16px; top: 126px; display: grid; gap: 4px; width: min(310px, calc(100% - 290px)); min-width: 240px; padding: 12px 14px; border: 1px solid #e0e8f1; border-radius: 9px; color: #203149; background: #ffffffed; box-shadow: 0 10px 24px #1020331f; }
.route-preview-card strong { color: #17314f; font-size: 13px; line-height: 1.15; }
.route-preview-card span { color: #53647a; font-size: 11px; font-weight: 850; line-height: 1.3; }
.route-mode-badges{display:flex;flex-wrap:wrap;gap:6px}.route-mode-badge{display:inline-flex;align-items:center;overflow:hidden;border:1px solid currentColor;border-radius:5px;background:#fff;font-style:normal}.route-mode-badge em,.route-mode-badge span{padding:4px 6px;font-size:9px;font-style:normal;font-weight:950;line-height:1}.route-mode-badge em{color:#fff;background:currentColor}.route-mode-badge.bus{color:#0f6ec7}.route-mode-badge.streetcar{color:#d71920}.route-mode-badge span{color:currentColor}
.map-scale-card { position: absolute; right: 16px; bottom: 16px; z-index: 560; display: grid; grid-template-columns: auto 1fr; gap: 3px 10px; align-items: end; width: 210px; padding: 12px 14px; border-radius: 7px; background: #fffffff0; color: #203149; box-shadow: 0 10px 24px #1020331f; }
.map-scale-card b { grid-row: 1 / span 2; font-size: 18px; }
.map-scale-card span { display: block; height: 8px; border-right: 2px solid #53647a; border-bottom: 2px solid #53647a; border-left: 2px solid #53647a; }
.map-scale-card small { font-size: 11px; text-align: right; }
.ward-average-panel { max-width: 1500px; margin: 16px auto 0; padding: 18px; }
.ward-average-panel > header p { margin: 5px 0 0; color: #53647a; font-size: 14px; }
.comparison-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 12px; }
.comparison-grid article { min-width: 0; padding: 18px; border: 1px solid #dbe5ed; border-radius: 8px; background: #fff; }
.comparison-grid article > div:first-child { display: flex; gap: 13px; align-items: center; }
.comparison-grid h3 { margin: 0; color: #071126; font-size: 16px; line-height: 1.2; }
.comparison-grid dl { display: grid; gap: 13px; margin: 18px 0 0; }
.comparison-grid dl div { display: grid; grid-template-columns: 100px minmax(0, 1fr); gap: 12px; align-items: center; }
.comparison-grid dt { color: #17233a; font-size: 13px; font-weight: 850; }
.comparison-grid dd { display: grid; grid-template-columns: minmax(80px, 1fr) auto; gap: 10px; align-items: center; margin: 0; color: #071126; font-size: 14px; font-weight: 950; }
.comparison-grid dd span { display: block; width: var(--bar); height: 18px; border-radius: 4px; background: #e21829; box-shadow: inset 0 -2px 0 #af0f1b22; }
.comparison-grid dd span.average { background: #9aa6b6; }
.comparison-grid article > small { display: block; margin-top: 10px; color: #697991; font-size: 11px; text-align: right; }
.local-osm-map .leaflet-control-attribution { font-size: 9px; }
.access-reference-radius { pointer-events: none; }
.access-da-boundary { filter: drop-shadow(0 3px 8px #1c5cc51a); }
.access-service-route { filter: drop-shadow(0 2px 4px #10203333); }
.access-walk-route { filter: drop-shadow(0 2px 5px #1c5cc533); }
.access-walk-label { display: grid; gap: 1px; width: 118px; padding: 7px 9px; border: 1px solid #d7e6f7; border-radius: 999px; color: #0b1e38; background: #fffffff2; box-shadow: 0 8px 18px #10203324; text-align: center; }
.access-walk-label b { color: #0b63d1; font-size: 12px; line-height: 1; }
.access-walk-label span { color: #53647a; font-size: 10px; font-weight: 850; line-height: 1; }
.access-nearby-tooltip { border: 0 !important; border-radius: 7px !important; color: #0d1724 !important; background: #fff !important; box-shadow: 0 8px 18px #0d172426 !important; font-weight: 850 !important; font-size: 11px !important; }
.access-route-tooltip { border: 0 !important; border-radius: 7px !important; color: #0d1724 !important; background: #fff !important; box-shadow: 0 8px 18px #0d172426 !important; font-weight: 900 !important; font-size: 11px !important; }
.access-route-mode-label{border:0!important;padding:0!important;border-radius:6px!important;background:#fff!important;box-shadow:0 3px 10px #10203338!important}.access-route-mode-label:before{display:none!important}.access-route-mode-label>div{display:flex;align-items:center;overflow:hidden;border:2px solid currentColor;border-radius:5px;background:#fff}.access-route-mode-label b,.access-route-mode-label span{padding:3px 5px;font-size:8px;font-weight:950;line-height:1}.access-route-mode-label b{color:#fff;background:currentColor}.access-route-mode-label span{color:currentColor;font-size:10px}.access-route-mode-label.bus{color:#0f6ec7!important}.access-route-mode-label.streetcar{color:#d71920!important}
.methodology-page { background: radial-gradient(circle at top right, #fff0f1 0, transparent 30%), linear-gradient(180deg, #f9f4ee 0%, #f4eee6 100%); }
.methodology-hero { display: grid; gap: 0; }
.methodology-hero h1 { max-width: 880px; }
.method-purpose { max-width: 900px; margin-top: 12px !important; padding: 13px 16px; border-left: 4px solid #2478b8; color: #40576b !important; background: #eef6fc; }
.method-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 18px; }
.method-summary article { min-width: 0; padding: 16px; border: 1px solid #eadbdd; border-radius: 16px; background: #fff; box-shadow: 0 10px 26px #52483f0d; }
.method-summary span { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 11px; color: #fff; background: #d71920; font-size: 12px; font-weight: 900; }
.method-summary strong { display: block; margin-top: 11px; color: #26313a; font-size: 14px; line-height: 1.25; }
.method-summary p { margin-top: 6px; color: #5f6d77; font-size: 12px; line-height: 1.45; }
.method-evidence-overview > header { background: #f5faff; }
.method-section { max-width: 1180px; margin: 18px auto 0; }
.method-section > header { padding: 18px; border: 1px solid #e2ddd4; border-radius: 18px; background: #fffaf5; box-shadow: 0 10px 26px #52483f0d; }
.method-section > header h2 { margin-top: 5px; color: #26313a; font-size: clamp(22px, 3vw, 34px); line-height: 1.05; letter-spacing: -.9px; }
.method-section > header p { max-width: 760px; margin-top: 8px; color: #5f6d77; font-size: 14px; line-height: 1.5; }
.definition-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 12px; }
.definition-card { min-width: 0; padding: 16px; border: 1px solid #e2ddd4; border-top-width: 5px; border-radius: 16px; background: #fff; box-shadow: 0 10px 26px #52483f0d; }
.definition-card.red { border-top-color: #d71920; }
.definition-card.amber { border-top-color: #f3a530; }
.definition-card.blue { border-top-color: #2478b8; }
.definition-card.green { border-top-color: #2caf63; }
.definition-card span { display: block; color: #69747e; font-size: 10px; font-weight: 900; letter-spacing: .7px; text-transform: uppercase; }
.definition-card strong { display: block; margin-top: 8px; color: #26313a; font-size: 15px; line-height: 1.25; }
.definition-card p { margin-top: 8px; color: #5f6d77; font-size: 12px; line-height: 1.45; }
.calculation-stack { display: grid; gap: 12px; margin-top: 12px; }
.calculation-card { display: grid; grid-template-columns: 54px minmax(0, 1fr); gap: 14px; min-width: 0; padding: 17px; border: 1px solid #e2ddd4; border-radius: 16px; background: #fff; box-shadow: 0 10px 26px #52483f0d; }
.calc-number { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 15px; color: #fff; background: #b8171d; font-size: 13px; font-weight: 900; letter-spacing: .8px; }
.calculation-card h3 { margin: 0; color: #26313a; font-size: 17px; line-height: 1.2; }
.calculation-card p { margin-top: 6px; color: #5f6d77; font-size: 13px; line-height: 1.5; }
.calculation-card small { display: block; margin-top: 8px; color: #6b747c; font-size: 11px; line-height: 1.4; }
.formula-card { margin-top: 10px; padding: 12px; border: 1px solid #eadbdd; border-radius: 13px; background: #fff8f8; }
.formula-card b, .formula-card span { display: block; }
.formula-card b { color: #9e1a1f; font-size: 13px; line-height: 1.35; }
.formula-card span { margin-top: 5px; color: #725e62; font-size: 11px; line-height: 1.4; }
.threshold-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 12px; }
.threshold-card { min-width: 0; padding: 15px; border: 1px solid #e2ddd4; border-left-width: 6px; border-radius: 16px; background: #fff; box-shadow: 0 10px 26px #52483f0d; }
.threshold-card.gap { border-left-color: #d71920; }
.threshold-card.watch { border-left-color: #f3a530; }
.threshold-card.balanced { border-left-color: #2caf63; }
.threshold-card.high { border-left-color: #2478b8; }
.threshold-card span { display: block; color: #69747e; font-size: 10px; font-weight: 900; letter-spacing: .7px; text-transform: uppercase; }
.threshold-card strong { display: block; margin-top: 7px; color: #26313a; font-size: 14px; line-height: 1.2; }
.threshold-card p { margin-top: 7px; color: #5f6d77; font-size: 12px; line-height: 1.45; }
.plain-note-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 12px; }
.plain-note-grid article { min-width: 0; padding: 16px; border: 1px solid #e2ddd4; border-radius: 16px; background: #fff; box-shadow: 0 10px 26px #52483f0d; }
.plain-note-grid strong { display: block; color: #26313a; font-size: 14px; }
.plain-note-grid p { margin-top: 7px; color: #5f6d77; font-size: 12px; line-height: 1.45; }

.equity-dashboard .equity-map-card .equity-legend { right: 20px; left: auto; bottom: 20px; }

.trend-page { height: calc(100vh - 58px); height: calc(100dvh - 58px); min-height: 0; margin-top: 58px; overflow-y: auto; padding: 22px clamp(16px, 3vw, 38px); background: #f6f1ea; }
.trend-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 420px); gap: 18px; align-items: stretch; max-width: 1180px; margin: 0 auto; }
.trend-hero h1 { max-width: 620px; margin-top: 12px; color: #26313a; font-size: clamp(34px, 4.5vw, 58px); line-height: .98; letter-spacing: -1.8px; }
.trend-hero h1 strong { display: block; color: #b8171d; }
.trend-hero p { max-width: 540px; margin-top: 14px; color: #5e6871; font-size: 17px; line-height: 1.42; }
.trend-method-card { align-self: end; padding: 17px; border: 1px solid #eadbdd; border-radius: 16px; background: #fff; box-shadow: 0 12px 30px #52333a0d; }
.trend-method-card strong { display: block; color: #9e1a1f; font-size: 12px; font-weight: 900; letter-spacing: .7px; text-transform: uppercase; }
.trend-method-card p { margin-top: 8px; color: #5f6d77; font-size: 13px; line-height: 1.45; }
.trend-controls { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; max-width: 1180px; margin: 18px auto 0; padding: 12px; border: 1px solid #e2ddd4; border-radius: 14px; background: #fff; box-shadow: 0 10px 26px #52483f0d; }
.trend-controls > div { display: flex; align-items: center; gap: 9px; color: #65717b; font-size: 12px; }
.trend-controls label { display: flex; align-items: center; gap: 8px; color: #6d7882; font-size: 10px; font-weight: 900; letter-spacing: .7px; text-transform: uppercase; }
.trend-controls select { min-width: 170px; padding: 9px 10px; border: 1px solid #dfe6eb; border-radius: 9px; color: #273440; background: #fff; font-size: 12px; font-weight: 800; text-transform: none; }
.trend-scoreboard { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; max-width: 1180px; margin: 14px auto 0; }
.trend-scoreboard article, .trend-card { min-width: 0; padding: 17px; border: 1px solid #e2ddd4; border-radius: 16px; background: #fff; box-shadow: 0 10px 26px #52483f0d; }
.trend-scoreboard span { display: block; color: #56616b; font-size: 10px; font-weight: 900; letter-spacing: .8px; text-transform: uppercase; }
.trend-scoreboard strong { display: block; margin-top: 7px; color: #b8171d; font-size: 32px; line-height: 1; letter-spacing: -1px; }
.trend-scoreboard small { display: block; margin-top: 6px; color: #69747e; font-size: 11px; line-height: 1.35; }
.trend-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(280px, .9fr); gap: 14px; max-width: 1180px; margin: 14px auto 0; }
.trend-wide { grid-column: 1 / -1; }
.trend-card header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.trend-card h2 { color: #26313a; font-size: 15px; letter-spacing: -.1px; text-transform: uppercase; }
.trend-card header p { margin-top: 4px; color: #69747e; font-size: 12px; line-height: 1.35; }
.period-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; margin-top: 14px; }
.period-card { min-width: 0; padding: 14px; border: 1px solid #eadbdd; border-radius: 14px; background: linear-gradient(180deg, #fff 0%, #fff9f9 100%); }
.period-card span, .period-card small { display: block; color: #69747e; font-size: 10px; font-weight: 900; letter-spacing: .5px; text-transform: uppercase; }
.period-card strong { display: block; margin-top: 7px; color: #b8171d; font-size: 34px; line-height: 1; }
.period-card p { margin-top: 10px; color: #596672; font-size: 11px; line-height: 1.35; }
.period-card b { color: #26313a; }
.risk-bar { height: 8px; margin-top: 12px; overflow: hidden; border-radius: 999px; background: #eef1f4; }
.risk-bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #f3a530, #d71920); }
.trend-list { display: grid; gap: 8px; margin-top: 14px; }
.trend-ward-row { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; gap: 10px; align-items: center; width: 100%; padding: 10px; border: 1px solid #e7ecef; border-radius: 12px; color: inherit; background: #fff; text-align: left; }
.trend-ward-row:hover, .trend-ward-row:focus-visible { border-color: #d71920; outline: 0; background: #fff8f8; }
.trend-ward-row span { display: grid; place-items: center; width: 34px; height: 30px; border-radius: 8px; color: #fff; background: #d71920; font-size: 11px; font-weight: 900; }
.trend-ward-row strong, .trend-ward-row small { display: block; min-width: 0; }
.trend-ward-row strong { color: #26313a; font-size: 12px; line-height: 1.2; }
.trend-ward-row small { margin-top: 3px; color: #69747e; font-size: 10px; line-height: 1.3; }
.trend-ward-row b { color: #b8171d; font-size: 13px; }
.trend-detail { display: grid; gap: 12px; margin-top: 14px; }
.trend-detail-header { padding: 14px; border: 1px solid #eadbdd; border-radius: 14px; background: #fff8f8; }
.trend-detail-header span, .trend-detail-header small { display: block; color: #6b747c; font-size: 11px; }
.trend-detail-header strong { display: block; margin-top: 4px; color: #26313a; font-size: 18px; line-height: 1.15; }
.trend-detail-header small { margin-top: 5px; line-height: 1.35; }
.period-strip { display: grid; gap: 8px; }
.period-strip div { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 3px 10px; padding: 10px; border: 1px solid #e7ecef; border-left-width: 5px; border-radius: 12px; background: #fff; }
.period-strip .gap { border-left-color: #d71920; }
.period-strip .watch { border-left-color: #f3a530; }
.period-strip .balanced { border-left-color: #2caf63; }
.period-strip .high { border-left-color: #2478b8; }
.period-strip span { color: #26313a; font-size: 12px; font-weight: 900; }
.period-strip b { color: #b8171d; font-size: 13px; }
.period-strip small { grid-column: 1 / -1; color: #69747e; font-size: 10px; font-weight: 900; text-transform: uppercase; }
.trend-note { max-width: 1180px; margin: 14px auto 0; }
.trend-note p { margin-top: 8px; color: #5f6d77; font-size: 13px; line-height: 1.5; }
.trend-footer { margin-top: 14px; }
.moves-page { height: calc(100vh - 58px); height: calc(100dvh - 58px); min-height: 0; margin-top: 58px; overflow-y: auto; padding: 22px clamp(16px, 3vw, 38px); background: radial-gradient(circle at top right, #fff0f1 0, transparent 32%), #f6f1ea; }
.moves-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 430px); gap: 18px; align-items: stretch; max-width: 1180px; margin: 0 auto; }
.moves-hero h1 { max-width: 650px; margin-top: 12px; color: #26313a; font-size: clamp(36px, 4.8vw, 62px); line-height: .96; letter-spacing: -2px; }
.moves-hero h1 strong { display: block; color: #b8171d; }
.moves-hero p { max-width: 590px; margin-top: 14px; color: #5e6871; font-size: 17px; line-height: 1.42; }
.moves-live-card { display: grid; align-content: center; justify-items: start; padding: 22px; border: 1px solid #eadbdd; border-radius: 20px; background: linear-gradient(135deg, #fff 0%, #fff6f6 100%); box-shadow: 0 16px 40px #52333a14; }
.moves-live-card small { margin-top: 8px; color: #69747e; font-size: 12px; }
.moves-live-card strong { display: block; margin-top: 12px; color: #b8171d; font-size: clamp(48px, 7vw, 82px); line-height: .9; letter-spacing: -3px; }
.moves-live-card p { margin-top: 10px; color: #4f5d67; font-size: 14px; line-height: 1.4; }
.moves-scoreboard { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; max-width: 1180px; margin: 18px auto 0; }
.moves-scoreboard article, .moves-card { min-width: 0; padding: 17px; border: 1px solid #e2ddd4; border-radius: 16px; background: #fff; box-shadow: 0 10px 26px #52483f0d; }
.moves-scoreboard span { display: block; color: #56616b; font-size: 10px; font-weight: 900; letter-spacing: .8px; text-transform: uppercase; }
.moves-scoreboard strong { display: block; margin-top: 7px; color: #b8171d; font-size: 32px; line-height: 1; letter-spacing: -1px; }
.moves-scoreboard small { display: block; margin-top: 6px; color: #69747e; font-size: 11px; line-height: 1.35; }
.moves-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, .9fr); gap: 14px; max-width: 1180px; margin: 14px auto 0; }
.moves-wide { grid-column: 1 / -1; }
.moves-card header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.moves-card h2 { color: #26313a; font-size: 15px; letter-spacing: -.1px; text-transform: uppercase; }
.moves-card header p { margin-top: 4px; color: #69747e; font-size: 12px; line-height: 1.35; }
.moves-period-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; margin-top: 14px; }
.moves-period-card { min-width: 0; padding: 14px; border: 1px solid #eadbdd; border-radius: 14px; background: linear-gradient(180deg, #fff 0%, #fff9f9 100%); }
.moves-period-card span, .moves-period-card small { display: block; color: #69747e; font-size: 10px; font-weight: 900; letter-spacing: .5px; text-transform: uppercase; }
.moves-period-card strong { display: block; margin-top: 8px; color: #b8171d; font-size: 28px; line-height: 1; }
.moves-period-card .risk-bar { margin-top: 12px; }
.moves-value-list { display: grid; gap: 10px; margin-top: 14px; }
.moves-value-list article { padding: 13px; border: 1px solid #eadbdd; border-radius: 14px; background: #fff8f8; }
.moves-value-list strong { display: block; color: #b8171d; font-size: 28px; line-height: 1; }
.moves-value-list span { display: block; margin-top: 6px; color: #5f6d77; font-size: 12px; line-height: 1.35; }
.moves-note { max-width: 1180px; margin: 14px auto 0; }
.moves-note p { margin-top: 8px; color: #5f6d77; font-size: 13px; line-height: 1.5; }
.moves-footer { margin-top: 14px; }

@media (max-width: 1024px) and (min-width: 761px) {
  .app-shell { grid-template-columns: 300px minmax(0, 1fr); }
  .brand { padding: 18px 16px; }
  .sidebar-content { padding: 14px 12px 0; }
  .directions-form div { flex-direction: column; }
  .directions-form button { padding: 8px 10px; }
  .filters { grid-template-columns: repeat(2, 1fr); }
  .map-header { left: 14px; right: 14px; gap: 12px; padding: 12px 14px; }
  .route-focus { left: 14px; max-width: calc(100% - 28px); flex-wrap: wrap; }
  .alerts-panel { right: 14px; max-width: calc(100% - 330px); }
  .nearby-panel { right: 14px; width: min(300px, calc(100% - 28px)); }
  .equity-dashboard { padding: 18px; }
  .equity-hero { grid-template-columns: 1fr; }
  .equity-copy { grid-template-columns: minmax(0, 1fr) minmax(280px, .8fr); align-items: center; }
  .equity-copy h1, .equity-copy > p { grid-column: 1; }
  .hero-callout, .hero-actions { grid-column: 2; }
  .equity-map-card { min-height: 460px; }
  .equity-detail-grid { grid-template-columns: 1fr 1fr; }
  .watchlist-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .explore-card { grid-column: 1 / -1; }
  .equity-rankings { grid-template-columns: 1fr 1fr; }
  .equity-rankings .model-note { grid-column: 1 / -1; }
  .period-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .trend-scoreboard { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .moves-scoreboard { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .moves-period-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .data-flow-hero { grid-template-columns: minmax(0, 1fr) minmax(220px, 36%); }
  .flow-pipeline { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .flow-arrow { display: none; }
  .flow-truth-grid { grid-template-columns: 1fr; }
  .flow-truth-card + .flow-truth-card { border-top: 1px solid #e9e0d6; border-left: 0; }
  .access-hero { grid-template-columns: 1fr; }
  .access-copy { order: 2; }
  .access-map-card { order: 1; min-height: min(620px, 70dvh); }
  .access-map-figure { min-height: 300px; }
  .access-metrics { grid-template-columns: 1fr; }
  .access-equity-card { grid-template-columns: 1fr; }
  .access-explainer-grid { grid-template-columns: 1fr; }
  .access-drill-hero { grid-template-columns: 1fr; max-width: 900px; }
  .access-stepper, .access-workspace { max-width: 900px; }
  .access-workspace { grid-template-columns: 1fr; }
  .ward-ranking-list, .stop-list { max-height: 420px; }
  .da-context-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .local-stop-topbar > p { display: none; }
  .local-stop-hero { grid-template-columns: 1fr; gap: 10px; max-width: 900px; }
  .guided-access-panel { grid-template-columns: 1fr; max-width: 900px; }
  .stop-breadcrumb { justify-content: flex-start; }
  .local-stop-hero aside { justify-items: start; text-align: left; }
  .local-stop-layout { grid-template-columns: 1fr; max-width: 900px; }
  .local-stop-card, .local-map-card, .nearby-stop-card, .da-level-card { grid-column: 1; grid-row: auto; }
  .local-stop-card { order: 1; }
  .nearby-stop-card { order: 2; }
  .local-map-card { order: 3; }
  .da-level-card { order: 4; }
  .local-map-card { min-height: 520px; }
  .local-osm-map, .local-osm-map.leaflet-container { height: 520px; min-height: 520px; }
  .ward-average-panel { max-width: 900px; }
  .comparison-grid { grid-template-columns: 1fr; }
  .platform-hero,
  .platform-grid.two,
  .brief-layout { grid-template-columns: 1fr; }
  .platform-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .platform-grid.three { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  html, body { height: auto; min-height: 100%; overflow: auto; scroll-behavior: smooth; }
  .app-topbar { height: 54px; padding: 8px 10px; gap: 8px; }
  .topbar-brand span { width: 34px; height: 26px; border-radius: 10px; font-size: 10px; }
  .topbar-brand strong { max-width: 112px; font-size: 13px; }
  .app-topbar nav { flex: 1 1 auto; min-width: 0; gap: 3px; overflow-x: auto; scrollbar-width: none; }
  .app-topbar nav::-webkit-scrollbar { display: none; }
  .app-topbar nav a { padding: 7px 8px; font-size: 11px; }
  .surface-access-body .app-topbar { overflow: hidden; }
  .surface-access-body .topbar-brand { flex: 0 0 auto; min-width: 38px; }
  .surface-access-body .topbar-brand strong { display: none; }
  .surface-access-body .app-topbar nav { min-width: 0; overflow-x: auto; scrollbar-width: none; }
  .surface-access-body .app-topbar nav::-webkit-scrollbar { display: none; }
  .surface-access-body .app-topbar nav a { flex: 0 0 auto; }
  .local-stop-topbar { height: 58px; }
  .local-stop-topbar > p { display: none; }
  .local-stop-brand span { width: 38px; height: 30px; border-radius: 10px; clip-path: none; background: #fff; color: #c8171d; box-shadow: none; }
  .platform-body .app-topbar { overflow: hidden; }
  .platform-body .topbar-brand { flex: 0 0 auto; }
  .platform-body .topbar-brand strong { display: none; }
  .platform-body .app-topbar nav { min-width: 0; max-width: none; overflow-x: auto; scrollbar-width: none; }
  .platform-body .app-topbar nav::-webkit-scrollbar { display: none; }
  .platform-body .app-topbar nav a { flex: 0 0 auto; padding: 7px 8px; font-size: 10px; }
  .platform-page { padding: 76px 12px 22px; }
  .platform-hero { grid-template-columns: 1fr; gap: 12px; margin-bottom: 12px; }
  .platform-hero h1 { font-size: 42px; letter-spacing: -1.5px; }
  .platform-hero p { font-size: 15px; }
  .platform-hero aside,
  .platform-card,
  .platform-metrics article { border-radius: 14px; padding: 14px; }
  .platform-metrics { grid-template-columns: 1fr; gap: 10px; margin-bottom: 12px; }
  .platform-metrics strong { font-size: 34px; }
  .platform-grid,
  .platform-grid.two,
  .platform-grid.three,
  .brief-layout { grid-template-columns: 1fr; gap: 12px; }
  .platform-card header { display: grid; gap: 6px; }
  .platform-card h2 { font-size: 22px; }
  .platform-table { min-width: 500px; }
  .platform-table th,
  .platform-table td { padding: 10px; font-size: 12px; }
  .platform-issue-row { grid-template-columns: 30px minmax(0, 1fr); align-items: start; }
  .platform-issue-row span { width: 30px; height: 30px; }
  .platform-issue-row b { grid-column: 2; justify-self: start; }
  .brief-summary strong,
  .scenario-output strong { font-size: 20px; }
  .local-stop-page { min-height: calc(100dvh - 58px); }
  .local-stop-hero { gap: 12px; padding-top: 18px; }
  .local-stop-hero > div,
  .local-stop-hero aside,
  .guided-access-panel,
  .local-stop-layout,
  .ward-average-panel { width: 100%; min-width: 0; }
  .local-stop-hero h1 { font-size: 38px; letter-spacing: -1.4px; }
  .local-stop-hero p { font-size: 15px; }
  .guided-access-panel { grid-template-columns: 1fr; gap: 10px; margin-bottom: 12px; }
  .access-stepper-mobile { padding: 12px; }
  .access-stepper-mobile span { grid-template-columns: 28px minmax(0, 1fr); font-size: 11px; }
  .access-stepper-mobile b { width: 28px; height: 28px; }
  .guided-ward-select, .guided-selected-stop { padding: 12px; }
  .stop-breadcrumb { gap: 6px; font-size: 12px; }
  .breadcrumb-select { flex: 1 1 100%; order: 2; }
  .breadcrumb-select::after { display: none; }
  .breadcrumb-select select { width: 100%; max-width: none; min-height: 42px; border-radius: 9px; }
  .stop-breadcrumb strong { order: 3; flex: 1 1 100%; }
  .local-stop-layout { grid-template-columns: 1fr; gap: 12px; }
  .local-stop-card, .local-map-card, .nearby-stop-card, .da-level-card { grid-column: 1; grid-row: auto; }
  .local-stop-card { order: 1; }
  .nearby-stop-card { order: 2; }
  .da-level-card { order: 3; }
  .local-map-card { order: 4; }
  .local-stop-card { grid-template-columns: 50px minmax(0, 1fr); gap: 0 14px; padding: 18px; }
  .stop-icon { width: 48px; height: 48px; }
  .stop-story { font-size: 14px; }
  .local-metric-grid { grid-template-columns: 1fr; }
  .nearby-stop-card { padding: 14px; }
  .nearby-stop-card header { display: grid; }
  .nearby-stop-card header strong { justify-self: start; }
  .nearby-stop-card p { order: 3; padding: 10px 11px; border-radius: 12px; background: #f7fbff; font-size: 11px; }
  .nearby-stop-list { order: 2; max-height: min(360px, 44dvh); overflow-y: auto; padding-right: 3px; }
  .nearby-stop-button { grid-template-columns: 72px minmax(0, 1fr); padding: 10px; }
  .nearby-stop-button span { grid-row: 1 / span 2; }
  .local-map-card { display: grid; gap: 8px; min-height: 0; padding: 10px; overflow: visible; }
  .local-osm-map, .local-osm-map.leaflet-container { order: 1; height: 320px; min-height: 320px; border: 1px solid #dbe5ed; border-radius: 12px; }
  .map-key { position: static; order: 2; grid-template-columns: repeat(2, minmax(0, 1fr)); min-width: 0; max-width: none; padding: 9px; border: 1px solid #dbe5ed; border-radius: 12px; box-shadow: none; font-size: 10px; }
  .walk-preview-card { position: static; order: 3; right: auto; left: auto; top: auto; width: auto; min-width: 0; padding: 10px; border: 1px solid #dbe5ed; box-shadow: none; }
  .walk-preview-card strong { font-size: 13px; }
  .walk-preview-card span, .walk-preview-card small { font-size: 10px; }
  .route-preview-card { position: static; order: 4; right: auto; left: auto; top: auto; width: auto; min-width: 0; padding: 9px 10px; border: 1px solid #dbe5ed; box-shadow: none; }
  .route-preview-card strong, .route-preview-card span { font-size: 10px; }
  .local-map-card .leaflet-tooltip { display: none; }
  .map-scale-card { right: 10px; bottom: 10px; width: 170px; padding: 9px; }
  .ward-average-panel { padding: 14px; }
  .comparison-grid { grid-template-columns: 1fr; gap: 10px; }
  .comparison-grid article { padding: 14px; }
  .comparison-grid dl div { grid-template-columns: 88px minmax(0, 1fr); gap: 8px; }
  .comparison-grid dd { grid-template-columns: minmax(70px, 1fr) auto; }
  .app-shell { display: flex; flex-direction: column; height: auto; min-height: calc(100dvh - 54px); margin-top: 54px; overflow: visible; }
  .sidebar { display: block; max-height: none; overflow: visible; border-right: 0; box-shadow: 0 2px 16px #2634401c; }
  .equity-page .sidebar { max-height: none; }
  body.commute-active .sidebar { max-height: min(68dvh, 590px); }
  body.commute-active .directions-form,
  body.commute-active .favorites-panel,
  body.commute-active .filters,
  body.commute-active .visibility-toggle,
  body.commute-active .mobile-status { display: none; }
  body.commute-active .stop-watch { margin-bottom: 10px; }
  body.commute-active .watched-stop { max-height: calc(min(68dvh, 590px) - 190px); overflow-y: auto; }
  .brand { position: sticky; top: 0; z-index: 2; padding: 11px 14px; }
  .brand-mark { width: 42px; height: 31px; border-radius: 13px; font-size: 12px; }
  h1 { font-size: 17px; }
  .brand p { display: none; }
  .mobile-jump-nav { position: sticky; z-index: 3; top: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; padding: 8px 12px; border-bottom: 1px solid #e7ecef; background: #fff; }
  .mobile-jump-nav a { display: block; padding: 9px 10px; border: 1px solid #eadbdd; border-radius: 999px; color: #b8171d; background: #fff8f8; font-size: 12px; font-weight: 900; text-align: center; text-decoration: none; }
  .sidebar-content { padding: 10px 12px 0; gap: 0; }
  .stats-panel { margin-top: 8px; padding: 9px; }
  .stats-heading p { display: none; }
  .stats-grid { gap: 5px; margin-top: 8px; }
  .stats-grid article { padding: 7px 5px; }
  .stats-grid span { font-size: 8px; }
  .stats-grid strong { font-size: 16px; }
  .load-estimate { grid-template-columns: minmax(0, 1fr); gap: 5px; margin-top: 8px; padding: 8px; }
  .load-estimate strong { font-size: 24px; }
  .load-meta { justify-items: start; text-align: left; }
  .load-breakdown { gap: 5px; }
  .load-breakdown div { padding: 6px; }
  .load-breakdown b { font-size: 13px; }
  .mode-bars { margin-top: 8px; }
  .stats-lists { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; max-height: 132px; margin-top: 9px; overflow: hidden; padding-bottom: 3px; }
  .stats-lists.single { grid-template-columns: 1fr; }
  .stats-lists .mini-list { max-height: 94px; overflow-y: auto; }
  .equity-page .stats-lists { max-height: none; }
  .equity-page .stats-lists .mini-list { max-height: 128px; }
  .mini-route { padding: 6px; }
  .pulse-link { margin-top: 8px; padding: 8px; font-size: 10px; }
  .feature-link { padding: 10px; }
  .directions-form { margin-top: 8px; padding: 8px; }
  .stop-watch { margin-top: 8px; padding: 8px; }
  .directions-form label, .stop-watch label { margin-bottom: 5px; font-size: 10px; }
  .directions-form input, .stop-watch input { padding: 8px; }
  .directions-form button, .stop-watch button { min-width: 82px; padding: 0 8px; }
  .directions-form small, .stop-watch small { display: none; }
  .favorites-panel { margin-top: 8px; }
  .section-title { margin-bottom: 5px; font-size: 9px; }
  .favorites-list { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 2px; }
  .favorites-list button { white-space: nowrap; padding: 5px 7px; font-size: 10px; }
  .filters { display: flex; gap: 4px; margin: 8px 0 7px; overflow-x: auto; scrollbar-width: none; }
  .filters::-webkit-scrollbar, .favorites-list::-webkit-scrollbar { display: none; }
  .filter { flex: 1 0 auto; min-width: 64px; padding: 7px 8px; }
  .visibility-toggle { margin: 0 2px 7px; font-size: 10px; }
  .mobile-status { display: flex; justify-content: space-between; padding: 0 2px 9px; color: #73808a; font-size: 10px; }
  .mobile-status strong { color: #c8171d; }
  .summary { display: none; }
  .sidebar-footer { position: sticky; bottom: 0; grid-template-columns: auto 1fr; padding: 8px 12px 10px; background: #fff; }
  .map-panel { height: 64dvh; min-height: 440px; scroll-margin-top: 62px; }
  .stats-panel { scroll-margin-top: 62px; }
  .map-header { top: max(10px, env(safe-area-inset-top)); left: 10px; right: 10px; align-items: flex-start; gap: 10px; padding: 11px 12px; }
  .map-header p { display: none; }
  .map-header h2 { font-size: 16px; }
  .header-actions { flex-shrink: 0; gap: 6px; }
  .map-view-toggle { align-self: stretch; }
  .map-view-toggle button { padding: 5px 7px; font-size: 10px; }
  .primary-button, .secondary-button { gap: 5px; padding: 8px 7px; font-size: 11px; }
  .primary-button svg, .secondary-button svg { width: 15px; height: 15px; }
  .legend { bottom: max(10px, env(safe-area-inset-bottom)); left: 10px; max-width: calc(100% - 20px); gap: 10px; padding: 8px 9px; overflow-x: auto; }
  .movement-legend { bottom: max(10px, env(safe-area-inset-bottom)); left: 10px; max-width: calc(100% - 20px); gap: 10px; padding: 8px 9px; overflow-x: auto; }
  .equity-legend { bottom: max(10px, env(safe-area-inset-bottom)); left: 10px; max-width: calc(100% - 20px); gap: 8px; padding: 8px 9px; }
  .equity-legend { font-size: 10px; }
  .route-focus { top: 68px; right: 10px; left: 10px; flex-wrap: wrap; gap: 8px; padding: 8px 9px; }
  .route-focus > div { flex: 1 1 120px; min-width: 0; }
  .route-focus button { padding: 4px 0; }
  .alerts-panel { top: 120px; right: 10px; left: 10px; width: auto; max-height: 34dvh; overflow-y: auto; }
  .nearby-panel { right: 10px; bottom: max(10px, env(safe-area-inset-bottom)); left: 10px; display: flex; width: auto; max-height: min(58dvh, 430px); flex-direction: column; overflow-y: auto; }
  .nearby-panel[hidden] { display: none; }
  .nearby-panel header { position: sticky; top: 0; z-index: 1; background: #fff; }
  .nearby-list { max-height: none; overflow: visible; }
  .nearby-panel:not([hidden]) ~ .legend { display: none; }
  .nearby-panel:not([hidden]) ~ .arrival-banner { bottom: calc(min(58dvh, 430px) + 18px); }
  .arrival-banner { right: 10px; bottom: max(10px, env(safe-area-inset-bottom)); left: 10px; max-width: none; border-radius: 10px; font-size: 12px; transform: none; }
  .leaflet-control-zoom { margin: 0 10px 10px 0 !important; }
  .equity-dashboard { height: auto; min-height: calc(100dvh - 54px); margin-top: 54px; overflow: visible; padding: 14px 12px 22px; }
  .equity-hero { grid-template-columns: 1fr; gap: 14px; }
  .equity-copy { gap: 13px; }
  .equity-copy h1 { font-size: 36px; letter-spacing: -1.2px; }
  .equity-copy > p { font-size: 15px; }
  .hero-callout { max-width: none; }
  .hero-actions { display: grid; grid-template-columns: 1fr; }
  .equity-map-card { min-height: 470px; scroll-margin-top: 62px; }
  .equity-map-card header { top: 10px; right: 10px; left: 10px; padding: 10px 11px; }
  .equity-map-card header p { display: none; }
  .map-chip { bottom: 58px; left: 10px; }
  .equity-dashboard .equity-map-card .equity-legend { right: auto; bottom: max(10px, env(safe-area-inset-bottom)); left: 10px; }
  .equity-scoreboard { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 12px; }
  .equity-scoreboard article { padding: 12px; }
  .equity-scoreboard strong { font-size: 26px; }
  .equity-watchlist header { display: grid; gap: 12px; }
  .watchlist-actions { justify-items: stretch; width: 100%; }
  .data-updated, .signal-confidence { justify-content: center; width: 100%; white-space: normal; text-align: center; }
  .watchlist-link { width: 100%; justify-content: center; }
  .watchlist-grid { grid-template-columns: 1fr; gap: 10px; }
  .equity-detail-grid, .equity-rankings { grid-template-columns: 1fr; gap: 12px; margin-top: 12px; }
  .equity-card { padding: 14px; }
  .explore-grid { grid-template-columns: 1fr; }
  .equity-footer { grid-template-columns: auto 1fr; align-items: start; padding-bottom: 10px; }
  .equity-footer .footer-links { grid-column: 1 / -1; justify-content: start; }
  .equity-footer small { grid-column: 1 / -1; justify-self: start; }
  .trend-page { height: auto; min-height: calc(100dvh - 54px); margin-top: 54px; overflow: visible; padding: 14px 12px 22px; }
  .trend-hero, .trend-grid { grid-template-columns: 1fr; gap: 12px; }
  .trend-hero h1 { font-size: 34px; letter-spacing: -1.2px; }
  .trend-hero p { font-size: 15px; }
  .trend-controls { display: grid; grid-template-columns: 1fr; margin-top: 12px; }
  .trend-controls label { display: grid; gap: 5px; align-items: stretch; }
  .trend-controls select, .trend-controls .primary-button { width: 100%; justify-content: center; }
  .trend-scoreboard { grid-template-columns: 1fr; gap: 10px; margin-top: 12px; }
  .trend-scoreboard article, .trend-card { padding: 14px; }
  .period-grid { grid-template-columns: 1fr; }
  .period-card { display: grid; grid-template-columns: 90px minmax(0, 1fr); gap: 8px 12px; align-items: center; }
  .period-card .risk-bar, .period-card p { grid-column: 2; margin-top: 0; }
  .trend-ward-row { grid-template-columns: 36px minmax(0, 1fr) auto; }
  .moves-page { height: auto; min-height: calc(100dvh - 54px); margin-top: 54px; overflow: visible; padding: 14px 12px 22px; }
  .moves-hero, .moves-grid { grid-template-columns: 1fr; gap: 12px; }
  .moves-hero h1 { font-size: 34px; letter-spacing: -1.2px; }
  .moves-hero p { font-size: 15px; }
  .moves-scoreboard { grid-template-columns: 1fr; gap: 10px; margin-top: 12px; }
  .moves-scoreboard article, .moves-card { padding: 14px; }
  .moves-card header { display: grid; }
  .moves-card header .primary-button { width: 100%; justify-content: center; }
  .moves-period-grid { grid-template-columns: 1fr; }
  .moves-period-card { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 8px 12px; align-items: center; }
  .moves-period-card .risk-bar { grid-column: 2; margin-top: 0; }
  .trust-page { height: auto; min-height: calc(100dvh - 54px); margin-top: 54px; overflow: visible; padding: 14px 12px 22px; }
  .trust-hero h1 { font-size: 36px; letter-spacing: -1.2px; }
  .trust-hero p { font-size: 15px; }
  .trust-grid, .lineage-flow { grid-template-columns: 1fr; gap: 12px; }
  .trust-wide { grid-column: auto; }
  .about-intro-card { grid-template-columns: 1fr; gap: 14px; padding: 16px; }
  .about-intro-card .nav-button { justify-self: start; width: 100%; }
  .data-flow-hero { grid-template-columns: 1fr; gap: 10px; padding-top: 14px; }
  .data-flow-hero h1 { font-size: 36px; letter-spacing: -1.3px; }
  .data-flow-actions { display: grid; grid-template-columns: 1fr; gap: 10px; }
  .flow-button { width: 100%; min-height: 46px; }
  .flow-illustration { min-height: 170px; border-radius: 20px; }
  .flow-illustration::before { inset: 8px 10px 38px; }
  .flow-illustration::after { right: 3%; bottom: 34px; width: 88%; height: 74px; }
  .city-line { right: 2%; bottom: 74px; width: 92%; height: 66px; }
  .flow-bus { right: 9%; bottom: 26px; width: min(230px, 76%); height: 68px; border-width: 2px; }
  .flow-bus::before { inset: 12px 18px auto 14px; height: 22px; border-width: 1px; }
  .flow-bus::after { top: 13px; right: 9px; width: 30px; height: 23px; border-width: 1px; }
  .flow-bus span, .flow-bus i { bottom: -10px; width: 21px; height: 21px; border-width: 3px; }
  .flow-bus span { left: 30px; }
  .flow-bus i { right: 34px; }
  .flow-pipeline { grid-template-columns: 1fr; gap: 10px; margin-top: 4px; }
  .flow-arrow { font-size: 28px; transform: rotate(90deg); }
  .flow-stage { padding: 14px; border-radius: 16px; }
  .flow-stage-title { margin-bottom: 12px; }
  .flow-stage-list div { min-height: 52px; }
  .flow-truth-grid { grid-template-columns: 1fr; margin-top: 14px; border-radius: 16px; }
  .flow-truth-card { padding: 17px; }
  .flow-truth-card + .flow-truth-card { border-top: 1px solid #e9e0d6; border-left: 0; }
  .truth-heading { align-items: flex-start; gap: 12px; }
  .truth-heading span { width: 38px; height: 38px; font-size: 19px; }
  .flow-truth-card li { font-size: 13px; }
  .access-hero { grid-template-columns: 1fr; gap: 14px; padding-top: 14px; }
  .access-copy { order: 2; padding: 16px; border-radius: 16px; }
  .access-copy h1 { font-size: 36px; letter-spacing: -1.2px; }
  .access-copy p { font-size: 15px; }
  .access-actions { display: grid; grid-template-columns: 1fr; gap: 10px; }
  .access-map-card { order: 1; min-height: min(560px, 76dvh); border-radius: 16px; }
  .access-map-card header { display: grid; gap: 3px; padding: 9px 10px; }
  .access-map-card header small { text-align: left; }
  .access-map-legend { top: 92px; right: 9px; left: 9px; grid-template-columns: repeat(2, minmax(0, 1fr)); min-width: 0; padding: 9px; }
  .access-map-caption { right: 9px; bottom: 9px; left: 9px; font-size: 10px; }
  .access-map-figure { min-height: 330px; border-radius: 16px; }
  .access-map-legend span { font-size: 9px; }
  .access-drilldown { grid-template-columns: 1fr; gap: 10px; margin-top: 12px; }
  .access-drilldown > div, .ward-picker, .ward-detail-card { padding: 14px; border-radius: 16px; }
  .ward-picker { gap: 8px; }
  .ward-picker select, .ward-picker button { min-height: 44px; }
  .ward-detail-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ward-detail-stats b { font-size: 20px; }
  .access-route-line { top: 55%; left: 8%; right: 8%; }
  .access-barrier-line { right: 34%; top: 25%; bottom: 21%; }
  .access-gap-shape { right: 9%; top: 38%; width: 116px; height: 84px; font-size: 11px; }
  .access-gap-shape small { font-size: 8px; }
  .access-stop b { display: none; }
  .access-stop::after { inset: -42px; }
  .stop-one { left: 16%; top: 36%; }
  .stop-two { left: 39%; top: 44%; }
  .stop-three { left: 58%; top: 62%; }
  .stop-four { right: 12%; top: 33%; }
  .ring-one { left: 23%; top: 57%; width: 88px; height: 70px; }
  .ring-two { right: 28%; top: 28%; width: 90px; height: 74px; }
  .ring-three { left: 8%; bottom: 14%; width: 105px; height: 74px; }
  .access-map-figure figcaption { right: 9px; bottom: 9px; left: 9px; max-width: none; border-radius: 12px; font-size: 10px; text-align: center; }
  .access-metrics { grid-template-columns: 1fr; gap: 10px; margin-top: 12px; }
  .access-metrics article { grid-template-columns: 52px minmax(0, 1fr); gap: 12px; padding: 14px; }
  .access-metrics b { grid-column: 2; justify-self: start; }
  .metric-icon { width: 50px; height: 50px; border-radius: 16px; }
  .access-equity-card { grid-template-columns: 1fr; gap: 16px; padding: 16px; }
  .access-matrix { grid-template-columns: 76px repeat(2, minmax(0, 1fr)); gap: 6px; overflow-x: auto; padding-bottom: 2px; }
  .access-matrix > strong { font-size: 10px; }
  .access-matrix article { padding: 10px 8px; }
  .access-matrix b { font-size: 11px; }
  .access-matrix p { font-size: 10px; }
  .access-explainer-grid { grid-template-columns: 1fr; gap: 10px; margin-top: 12px; }
  .access-explainer-grid article, .access-note { padding: 15px; border-radius: 16px; }
  .access-drill-hero { grid-template-columns: 1fr; gap: 10px; padding-top: 14px; }
  .access-drill-hero > div, .access-data-note, .access-panel { border-radius: 16px; }
  .access-drill-hero > div, .access-data-note { padding: 16px; }
  .access-drill-hero h1 { font-size: 34px; letter-spacing: -1.2px; }
  .access-drill-hero p { font-size: 15px; }
  .access-data-note span { width: auto; }
  .access-stepper { display: flex; gap: 8px; overflow-x: auto; margin-bottom: 10px; padding-bottom: 2px; scrollbar-width: none; }
  .access-stepper::-webkit-scrollbar { display: none; }
  .access-stepper span { flex: 0 0 auto; min-width: 150px; padding: 10px 11px; font-size: 11px; }
  .access-stepper span::after { display: none; }
  .access-stepper span::before { width: 22px; height: 22px; }
  .access-stepper b { font-size: 13px; }
  .access-stepper small { font-size: 10px; }
  .access-workspace { grid-template-columns: 1fr; gap: 10px; }
  .access-panel { gap: 12px; padding: 14px; }
  .access-panel header { display: grid; gap: 10px; }
  .access-panel h2 { font-size: 22px; }
  .ward-ranking-list, .stop-list { max-height: none; overflow: visible; padding-right: 0; }
  .ward-rank-card { grid-template-columns: 30px minmax(0, 1fr) auto; align-items: center; }
  .ward-rank-card .access-pill { grid-column: 2; justify-self: start; }
  .rank-metric { grid-column: 3; grid-row: 1 / span 2; justify-items: end; }
  .stop-row { grid-template-columns: 32px minmax(0, 1fr) auto; }
  .stop-detail-panel header strong, .stop-list-panel header strong { justify-self: start; max-width: none; white-space: normal; }
  .stop-walk-map { min-height: 280px; }
  .stop-walk-map .leaflet-container, .stop-walk-map.leaflet-container { height: 280px; min-height: 280px; }
  .da-context-grid { grid-template-columns: 1fr; }
  .statscan-baseline div { align-items: flex-start; }
  .method-summary,
  .definition-grid,
  .threshold-grid,
  .plain-note-grid { grid-template-columns: 1fr; gap: 10px; }
  .method-section { margin-top: 14px; }
  .method-section > header { padding: 15px; border-radius: 16px; }
  .method-section > header h2 { font-size: 25px; }
  .calculation-card { grid-template-columns: 42px minmax(0, 1fr); gap: 11px; padding: 14px; }
  .calc-number { width: 38px; height: 38px; border-radius: 12px; font-size: 11px; }
  .calculation-card h3 { font-size: 15px; }
}

/* Reference fidelity corrections */
.mockup-home-hero { grid-template-columns: 390px minmax(0,1fr) !important; }
.mockup-home-hero .civic-home-copy h1 { max-width: 370px !important; font-size: 50px !important; }
.civic-ward-page h1,.civic-ward-page h2,.civic-service-page h1,.civic-service-page h2,.subway-pulse-main h1,.subway-pulse-main h2,.local-stop-page h1,.local-stop-page h2 { font-family: Arial,Helvetica,sans-serif !important; }
.surface-access-body .app-topbar { color: #0b2540 !important; background: #fff !important; }
.surface-access-body .topbar-brand span { color: #d71920 !important; background: transparent !important; }
.surface-access-body .topbar-brand strong,.surface-access-body .app-topbar nav a,.surface-access-body .app-topbar > p { color: #0b2540 !important; }
.surface-access-body .app-topbar nav a.active { color: #d71920 !important; }
.local-question-strip { display: none !important; }
.local-stop-hero h1 { max-width: 820px; font-size: 42px !important; }
.local-stop-hero p { max-width: 820px; }
@media (max-width:760px){
  .mockup-home-hero { grid-template-columns: 1fr !important; }
  .mockup-home-hero .civic-home-copy h1,.local-stop-hero h1 { font-size: 34px !important; }
}

.surface-access-body .topbar-brand span { width: auto !important; min-width: 0 !important; padding: 0 !important; clip-path: none !important; }
.subway-pulse-main { padding-top: 18px !important; }
.subway-hero { margin: 0 0 14px !important; }
.subway-rail-shell { display: none !important; }
.brief-main header { display: grid; grid-template-columns: 58px minmax(0,1fr); gap: 14px; align-items: center; }
.brief-lead-icon { display: grid; width: 54px; height: 54px; place-items: center; border-radius: 50%; color: #1263a6; background: #e3f1fc; font-size: 27px; }
.brief-main header small { color: #53657a; font-weight: 800; }
.brief-main header h2 { margin-top: 4px; }
.brief-download { color: #fff !important; background: #d71920 !important; }
@media(max-width:640px){.brief-main header{grid-template-columns:1fr}.brief-lead-icon{width:42px;height:42px}}
@media(max-width:760px){
  .local-stop-hero { grid-template-columns: minmax(0,1fr) !important; width:100% !important; }
  .local-stop-hero > div,.local-stop-hero aside { width:100% !important; min-width:0 !important; }
  .local-stop-brand strong small { display:none !important; }
  .surface-access-body .topbar-brand strong { white-space:nowrap; }
}

@media (max-width: 520px) {
  .topbar-brand strong { max-width: 88px; }
  .app-topbar nav a { padding: 7px 5px; font-size: 9px; }
  .surface-access-body .topbar-brand span { width: 34px; clip-path: none; }
  .surface-access-body .app-topbar nav a { padding: 7px 8px; font-size: 10px; }
  .local-stop-card { grid-template-columns: minmax(0, 1fr); }
  .local-stop-card > div,
  .local-stop-card h2,
  .local-stop-card p,
  .stop-story,
  .stop-switcher { min-width: 0; max-width: 100%; overflow-wrap: anywhere; }
  .stop-icon { margin-bottom: 12px; }
  .local-map-card { min-height: 0; }
  .local-osm-map, .local-osm-map.leaflet-container { height: 300px; min-height: 300px; }
  .map-key { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .map-key span { grid-template-columns: 22px minmax(0, 1fr); }
  .map-scale-card { display: none; }
  .comparison-grid dl div { grid-template-columns: 1fr; }
  .directions-form { overflow: hidden; }
  .directions-form div, .stop-watch form div { display: grid; grid-template-columns: minmax(0, 1fr) minmax(72px, auto); }
  .directions-form button, .stop-watch button { min-width: 0; }
  .filters { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); overflow: hidden; }
  .filter { min-width: 0; padding-right: 4px; padding-left: 4px; }
  .map-header { align-items: center; }
  .header-actions { gap: 5px; }
  .map-view-toggle { grid-template-columns: 1fr; }
  .map-view-toggle button { width: 34px; padding: 4px 0; font-size: 9px; }
  .primary-button, .secondary-button { padding: 8px; }
  .movement-controls { grid-template-columns: 1fr; }
  .equity-copy h1 { font-size: 32px; }
  .equity-scoreboard { grid-template-columns: 1fr; }
  .watch-card { padding: 12px; }
  .equity-map-card { min-height: 430px; }
  .equity-map-card .equity-legend { font-size: 9px; }
  .trend-controls .primary-button { width: 100%; height: auto; min-height: 42px; padding: 9px 11px; font-size: 12px; }
  .moves-card header .primary-button { width: 100%; height: auto; min-height: 42px; padding: 9px 11px; font-size: 12px; }
  .methodology-hero h1 { font-size: 32px; }
  .method-summary article,
  .definition-card,
  .calculation-card,
  .threshold-card,
  .plain-note-grid article { padding: 13px; }
}

@media (max-width: 520px) {
  .sidebar { max-height: none; }
  body.commute-active .sidebar { max-height: min(70dvh, 600px); }
  body.commute-active .watched-stop { max-height: calc(min(70dvh, 600px) - 190px); }
  .directions-form button, .stop-watch button { min-width: 72px; font-size: 10px; }
  .mobile-status { font-size: 9px; }
  .map-header { padding: 10px; }
  .map-header h2 { max-width: 105px; font-size: 15px; }
  .equity-page .map-header h2 { max-width: 160px; }
  .primary-button, .secondary-button { width: 36px; height: 36px; justify-content: center; gap: 0; padding: 0; overflow: hidden; font-size: 0; white-space: nowrap; }
  .trend-controls .primary-button { width: 100%; height: auto; min-height: 42px; padding: 9px 11px; font-size: 12px; }
  .moves-card header .primary-button { width: 100%; height: auto; min-height: 42px; padding: 9px 11px; font-size: 12px; }
  .watchlist-link { width: 100%; height: auto; min-height: 42px; padding: 9px 11px; font-size: 12px; }
  .nav-button { width: auto; padding: 0 8px; font-size: 11px; }
  .primary-button svg, .secondary-button svg { flex: 0 0 auto; color: #fff; }
  .secondary-button svg { color: #47545e; }
  .route-focus { top: 64px; }
  .alerts-panel { top: 114px; }
}

@media (max-width: 760px) and (max-height: 700px) {
  .sidebar { max-height: none; }
  .equity-page .sidebar { max-height: none; }
  body.commute-active .sidebar { max-height: 66dvh; }
  body.commute-active .watched-stop { max-height: calc(66dvh - 170px); }
  .brand { padding: 8px 12px; }
  .brand-mark { width: 38px; height: 28px; }
  .sidebar-content { padding-top: 8px; }
  .visibility-toggle { display: none; }
  .filters { margin: 7px 0; }
  .nearby-panel { max-height: 52dvh; }
  .nearby-panel:not([hidden]) ~ .arrival-banner { bottom: calc(52dvh + 18px); }
}

@media (max-width: 760px) and (orientation: landscape) {
  html, body { height: 100%; overflow: hidden; }
  .app-shell { display: grid; grid-template-columns: minmax(250px, 34vw) minmax(0, 1fr); grid-template-rows: 1fr; height: calc(100dvh - 54px); overflow: hidden; }
  .sidebar { max-height: none; height: calc(100dvh - 54px); border-right: 1px solid #dfe4e8; }
  .brand { position: static; }
  .mobile-jump-nav { display: none; }
  .sidebar-footer { position: static; }
  .map-panel { height: auto; min-height: 0; }
  .map-header { left: 10px; right: 10px; }
  .route-focus { top: 66px; max-width: calc(100% - 20px); }
  .alerts-panel { top: 112px; left: auto; width: min(300px, calc(100% - 20px)); }
}

.ward-evidence-page { background: radial-gradient(circle at top right, #fff0f1 0, transparent 32%), #f6f1ea; }
.ward-hero h1 { max-width: 780px; }
.ward-evidence-shell { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 390px); gap: 16px; max-width: 1280px; margin: 0 auto 16px; }
.ward-map-panel, .ward-profile-card { min-width: 0; border: 1px solid #dfe6ee; border-radius: 18px; background: #fff; box-shadow: 0 18px 45px #24313d10; }
.ward-map-panel { padding: 16px; }
.ward-tools { display: grid; grid-template-columns: minmax(0, 1fr) minmax(180px, .38fr); gap: 10px; margin-bottom: 14px; }
.ward-tools label { display: grid; gap: 6px; color: #526173; font-size: 11px; font-weight: 900; letter-spacing: .5px; text-transform: uppercase; }
.ward-tools input, .ward-tools select { width: 100%; min-height: 42px; padding: 0 12px; border: 1px solid #dce5ec; border-radius: 10px; color: #122033; background: #fbfdff; font: inherit; font-size: 13px; font-weight: 800; text-transform: none; }
.ward-evidence-map { position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; min-height: 390px; overflow: hidden; padding: 28px; border-radius: 16px; background: linear-gradient(135deg, #f2f5f7 0%, #e8eef2 100%); }
.ward-cell { min-height: 90px; border-radius: 10px; background: #ffd9dc; box-shadow: inset 0 0 0 1px #ffffffb0; transform: skew(-7deg); }
.ward-cell.c2, .ward-cell.c5, .ward-cell.c7 { background: #f2a5aa; }
.ward-cell.c4, .ward-cell.c8 { background: #d71920; }
.ward-cell.c6, .ward-cell.c10 { background: #e8eef2; }
.ward-popover { position: absolute; right: 34px; top: 92px; display: grid; gap: 5px; width: min(220px, calc(100% - 68px)); padding: 15px; border: 1px solid #e1e8ef; border-radius: 14px; background: #fff; box-shadow: 0 16px 34px #10203324; }
.ward-popover strong { color: #0c1b31; font-size: 22px; letter-spacing: -.5px; }
.ward-popover small, .ward-popover span { color: #536275; line-height: 1.35; }
.ward-popover b { width: max-content; padding: 6px 9px; border-radius: 999px; color: #9e1a1f; background: #fff0f1; font-size: 11px; text-transform: uppercase; }
.ward-legend { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 13px; color: #536275; font-size: 12px; font-weight: 850; }
.ward-legend span { display: flex; align-items: center; gap: 7px; }
.ward-legend i { width: 13px; height: 13px; border-radius: 4px; background: #ffd9dc; }
.ward-legend .higher { background: #f2a5aa; }
.ward-legend .monitor { background: #d71920; }
.ward-legend .constrained { background: #8f1c20; }
.ward-profile-card { display: grid; align-content: start; gap: 12px; padding: 20px; }
.ward-profile-card > span { color: #9e1a1f; font-size: 11px; font-weight: 950; letter-spacing: .7px; text-transform: uppercase; }
.ward-profile-card h2 { color: #0c1b31; font-size: clamp(38px, 4vw, 56px); line-height: .9; letter-spacing: -2px; }
.ward-profile-card p { color: #536275; font-size: 16px; }
.ward-profile-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 6px 0; }
.ward-profile-grid article { padding: 14px; border-radius: 13px; background: #f8fbfd; }
.ward-profile-grid strong { display: block; color: #d71920; font-size: 29px; line-height: 1; letter-spacing: -1px; }
.ward-profile-grid small { display: block; margin-top: 6px; color: #536275; font-size: 11px; line-height: 1.3; }
.ward-context-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; max-width: 1280px; margin: 0 auto; }
.plain-list { display: grid; gap: 9px; margin: 0; padding-left: 19px; color: #536171; line-height: 1.45; }
.ward-bars { display: grid; gap: 13px; }
.ward-bars span { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 12px; align-items: center; }
.ward-bars b { display: block; grid-column: 1 / -1; width: var(--bar); height: 12px; border-radius: 999px; background: #d71920; }
.ward-bars b.average { background: #9aa6b6; }
.ward-bars em { color: #536275; font-size: 12px; font-style: normal; font-weight: 800; }
.ward-bars strong { color: #0c1b31; }

@media (max-width: 980px) {
  .ward-evidence-shell, .ward-context-grid { grid-template-columns: 1fr; }
  .ward-tools { grid-template-columns: 1fr; }
}

@media (max-width: 620px) {
  .ward-evidence-map { min-height: 300px; padding: 18px; }
  .ward-profile-grid { grid-template-columns: 1fr; }
}

.civic-mockup-body { min-height: 100%; overflow: auto; background: #f7f1e8; color: #0c1b31; }
.civic-mockup-page { padding: 94px clamp(14px, 3vw, 40px) 36px; }
.civic-board-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 390px); gap: 18px; max-width: 1500px; margin: 0 auto 18px; }
.civic-board-hero > div, .civic-board-hero aside, .civic-flow-strip article, .civic-page-card, .civic-mobile-board { border: 1px solid #e3d8ce; border-radius: 22px; background: #fffdfa; box-shadow: 0 18px 44px #3a2c2410; }
.civic-board-hero > div { padding: clamp(24px, 4vw, 48px); background: radial-gradient(circle at top right, #ffe5e7 0, transparent 34%), #fffdfa; }
.civic-board-hero h1 { max-width: 980px; color: #0c1b31; font-size: clamp(44px, 6vw, 88px); line-height: .9; letter-spacing: -3.4px; }
.civic-board-hero p { max-width: 820px; margin-top: 18px; color: #485a70; font-size: clamp(16px, 1.45vw, 21px); line-height: 1.45; }
.civic-board-hero aside { display: grid; align-content: center; padding: 24px; }
.civic-board-hero aside strong { color: #b8171d; font-size: 22px; }
.civic-board-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.civic-board-actions a { padding: 12px 15px; border: 1px solid #d71920; border-radius: 12px; color: #fff; background: #d71920; font-size: 13px; font-weight: 900; text-decoration: none; }
.civic-board-actions a + a { color: #9e1a1f; background: #fff8f8; }
.civic-flow-strip { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; max-width: 1500px; margin: 0 auto 18px; }
.civic-flow-strip article { padding: 16px; }
.civic-flow-strip span { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 999px; color: #fff; background: #d71920; font-weight: 950; }
.civic-flow-strip strong { display: block; margin-top: 14px; color: #0c1b31; font-size: 16px; line-height: 1.15; }
.civic-flow-strip small { display: block; margin-top: 5px; color: #657286; }
.civic-page-board { display: grid; grid-template-columns: repeat(5, minmax(280px, 1fr)); gap: 16px; max-width: 1500px; margin: 0 auto; overflow-x: auto; padding-bottom: 8px; }
.civic-page-card { display: grid; align-content: start; min-width: 280px; padding: 14px; }
.civic-page-card header { min-height: 190px; padding: 4px 2px 14px; }
.civic-page-card header span { color: #b8171d; font-size: 13px; font-weight: 950; }
.civic-page-card h2 { margin-top: 8px; color: #0c1b31; font-size: 21px; line-height: 1.08; letter-spacing: -.7px; }
.civic-page-card p { margin-top: 9px; color: #536275; font-size: 13px; line-height: 1.45; }
.mock-browser { overflow: hidden; border: 1px solid #dbe4ec; border-radius: 10px; background: #fff; box-shadow: 0 12px 24px #22304412; }
.mock-browser nav { display: flex; align-items: center; gap: 10px; min-height: 36px; padding: 0 10px; border-bottom: 1px solid #edf1f4; color: #536275; font-size: 8px; font-weight: 850; }
.mock-browser nav b { margin-right: auto; color: #d71920; font-size: 9px; }
.mock-city-hero { display: grid; grid-template-columns: 1fr 44%; gap: 12px; padding: 14px; }
.mock-city-hero h3, .mock-brief-page h3 { color: #0c1b31; font-size: 22px; line-height: 1.02; letter-spacing: -.8px; }
.mock-city-hero p, .mock-brief-page p { color: #536275; font-size: 10px; line-height: 1.4; }
.mock-city-hero button { margin-top: 8px; padding: 8px 9px; border: 0; border-radius: 6px; color: #fff; background: #d71920; font-size: 9px; font-weight: 900; }
.mock-photo-card { display: grid; align-content: end; min-height: 120px; padding: 10px; border-radius: 7px; color: #fff; background: linear-gradient(145deg, #ced8df, #17314e); font-size: 10px; font-weight: 900; }
.mock-stat-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px; padding: 0 14px 12px; }
.mock-stat-row span { padding: 10px; border-radius: 7px; color: #5b687b; background: #f3f7fa; font-size: 9px; font-weight: 850; }
.mock-stat-row b { display: block; color: #0c1b31; font-size: 18px; }
.mock-ward-map { display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; margin: 0 14px 14px; padding: 18px; border-radius: 8px; background: #f0f4f6; }
.mock-ward-map i { min-height: 32px; border-radius: 4px; background: #f6c6c9; }
.mock-ward-map i:nth-child(3n), .mock-ward-map.large i:nth-child(2n) { background: #d71920; }
.mock-ward-map i:nth-child(4n) { background: #f8e5e6; }
.mock-brief-page { padding: 16px; }
.mock-brief-page strong { display: block; margin-top: 14px; color: #0c1b31; font-size: 16px; line-height: 1.15; }
.mock-brief-page ol { display: grid; gap: 8px; margin: 12px 0 0; padding-left: 18px; color: #33445b; font-size: 10px; line-height: 1.35; }
.mock-link-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 0 16px 16px; }
.mock-link-row span { padding: 12px 8px; border-radius: 7px; background: #f7f9fb; color: #28435f; font-size: 9px; font-weight: 900; text-align: center; }
.mock-control-row, .mock-tabs { display: flex; gap: 8px; padding: 14px 14px 0; }
.mock-control-row span, .mock-tabs span { flex: 1; padding: 9px 8px; border: 1px solid #dfe7ee; border-radius: 6px; color: #536275; background: #fff; font-size: 9px; font-weight: 850; }
.mock-tabs span:first-child { color: #fff; border-color: #d71920; background: #d71920; }
.mock-ward-evidence { display: grid; grid-template-columns: 1fr 42%; gap: 10px; padding: 14px; }
.mock-ward-map.large { grid-template-columns: repeat(3, 1fr); margin: 0; min-height: 185px; }
.mock-ward-evidence aside { padding: 12px; border-radius: 8px; background: #f8fbfd; }
.mock-ward-evidence h3 { color: #0c1b31; font-size: 15px; }
.mock-ward-evidence aside div { margin-top: 8px; padding: 7px; border-radius: 7px; background: #fff; }
.mock-ward-evidence b { display: block; color: #d71920; font-size: 18px; }
.mock-ward-evidence small { color: #536275; font-size: 9px; }
.mock-local-map { position: relative; min-height: 245px; margin: 14px; overflow: hidden; border-radius: 8px; background: #edf2f4; }
.mock-local-map .area { position: absolute; inset: 36px 42px 44px 36px; border-radius: 38% 44% 42% 36%; background: #d7192030; box-shadow: inset 0 0 0 2px #d7192055; }
.mock-local-map .route { position: absolute; top: 50%; left: 50%; width: 36%; height: 5px; border-radius: 999px; background: #2d73ea; transform-origin: left center; }
.mock-local-map .route.a { transform: rotate(8deg); }
.mock-local-map .route.b { transform: rotate(92deg); }
.mock-local-map .route.c { transform: rotate(204deg); }
.mock-local-map .pin { position: absolute; width: 13px; height: 13px; border: 3px solid #fff; border-radius: 50%; background: #2d73ea; }
.mock-local-map .pin.main { top: calc(50% - 10px); left: calc(50% - 10px); width: 20px; height: 20px; background: #d71920; }
.mock-local-map .p1 { top: 32%; left: 31%; }
.mock-local-map .p2 { top: 65%; left: 57%; }
.mock-local-map .p3 { top: 47%; left: 72%; }
.mock-local-map aside { position: absolute; top: 42px; right: 22px; display: grid; gap: 3px; padding: 10px; border-radius: 8px; background: #fff; box-shadow: 0 8px 18px #10203322; font-size: 9px; }
.mock-local-map aside b { color: #0c1b31; }
.mock-local-map aside small { color: #536275; }
.mock-table { width: calc(100% - 28px); margin: 0 14px 14px; border-collapse: collapse; font-size: 9px; }
.mock-table th, .mock-table td { padding: 7px; border-bottom: 1px solid #edf1f4; text-align: left; }
.mock-table th { color: #536275; background: #f8fbfd; }
.mock-network { position: relative; min-height: 230px; margin: 0 14px 14px; border-radius: 8px; background: #f0f4f6; }
.mock-network i { position: absolute; left: 12%; right: 12%; height: 3px; border-radius: 999px; background: #d71920; }
.mock-network i:nth-child(1) { top: 26%; transform: rotate(8deg); }
.mock-network i:nth-child(2) { top: 37%; transform: rotate(-10deg); }
.mock-network i:nth-child(3) { top: 49%; transform: rotate(18deg); }
.mock-network i:nth-child(4) { top: 61%; transform: rotate(-4deg); }
.mock-network i:nth-child(5) { top: 34%; transform: rotate(90deg); }
.mock-network i:nth-child(6) { top: 57%; transform: rotate(82deg); }
.mock-network i:nth-child(7) { top: 72%; transform: rotate(15deg); background: #aab7c3; }
.mock-note { margin: 0 14px 14px; padding: 10px; border-radius: 7px; background: #f8fbfd; color: #536275; font-size: 10px; line-height: 1.35; }
.civic-mobile-board { max-width: 1500px; margin: 18px auto 0; padding: 20px; }
.civic-mobile-board header { display: flex; justify-content: space-between; gap: 18px; align-items: end; }
.civic-mobile-board h2 { color: #0c1b31; font-size: clamp(28px, 3vw, 42px); letter-spacing: -1.2px; }
.civic-mobile-board p { max-width: 620px; color: #536275; line-height: 1.45; }
.civic-mobile-board > div { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin-top: 16px; }
.civic-mobile-board article { display: grid; align-content: space-between; min-height: 220px; padding: 16px; border: 10px solid #172238; border-radius: 30px; background: #fff; }
.civic-mobile-board b { color: #d71920; }
.civic-mobile-board span { display: block; margin-top: 34px; color: #0c1b31; font-size: 19px; font-weight: 950; line-height: 1.08; }
.civic-mobile-board small { display: block; margin-top: 18px; padding: 9px; border-radius: 8px; color: #fff; background: #d71920; font-weight: 900; text-align: center; }

@media (max-width: 1000px) {
  .civic-board-hero { grid-template-columns: 1fr; }
  .civic-flow-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .civic-page-board { grid-template-columns: 1fr; overflow: visible; }
  .civic-page-card header { min-height: 0; }
  .civic-mobile-board > div { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 620px) {
  .civic-mockup-page { padding: 72px 12px 24px; }
  .civic-mockup-body .platform-topbar { justify-content: center; }
  .civic-mockup-body .platform-topbar nav { display: none; }
  .civic-mockup-body .topbar-brand { max-width: none; }
  .civic-mockup-body .topbar-brand strong { max-width: none; font-size: 14px; }
  .civic-board-hero h1 { font-size: 40px; letter-spacing: -1.8px; }
  .civic-flow-strip, .mock-stat-row, .mock-city-hero, .mock-ward-evidence, .civic-mobile-board > div { grid-template-columns: 1fr; }
  .mock-browser nav { overflow-x: auto; }
  .mock-browser nav span { white-space: nowrap; }
  .civic-mobile-board header { display: grid; }
}

/* Production civic product pages */
.civic-product-body { background: radial-gradient(circle at top left, #fff5ed 0, transparent 34%), #fbf7f1; color: #0c1b31; }
.civic-product-topbar { border-bottom: 1px solid #efe2da; background: #fffdfaee; backdrop-filter: blur(16px); }
.civic-product-topbar .topbar-brand span { color: #d71920; background: transparent; box-shadow: none; font-size: 21px; }
.civic-product-topbar .topbar-brand strong { color: #0c1b31; }
.civic-product-topbar nav a { color: #203047; }
.civic-product-topbar nav a.active { color: #d71920; background: #fff0f1; }
.civic-product-topbar > p { margin: 0; color: #30425a; font-size: 12px; font-weight: 850; white-space: nowrap; }
.civic-home-page, .civic-evidence-page, .civic-ward-page, .civic-service-page, .route-life-page { max-width: 1500px; margin: 0 auto; }
.civic-home-hero { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(310px, .7fr); gap: 18px; margin: 0 auto 14px; }
.transit-pulse-hero { grid-template-columns: minmax(0, 1.12fr) minmax(320px, .58fr); align-items: stretch; }
.civic-home-copy, .civic-photo-card, .civic-stat-strip article, .civic-page-links a, .city-pulse-card, .pulse-story-strip article, .route-feature-copy, .route-feature-preview, .civic-journey-panel { border: 1px solid #e5d9ce; border-radius: 20px; background: #fffdfa; box-shadow: 0 18px 44px #3a2c2410; }
.civic-home-copy { padding: clamp(24px, 4vw, 46px); }
.transit-pulse-hero .civic-home-copy { position: relative; overflow: hidden; background: radial-gradient(circle at top right, #ffe6e8 0, transparent 34%), linear-gradient(135deg, #fffdfa 0%, #fff7f1 100%); }
.transit-pulse-hero .civic-home-copy::after { content: ""; position: absolute; right: -80px; bottom: -120px; width: 290px; height: 290px; border-radius: 999px; background: #d719200d; pointer-events: none; }
.civic-home-copy h1, .civic-split-hero h1 { max-width: 860px; color: #0c1b31; font-size: clamp(42px, 5vw, 76px); line-height: .9; letter-spacing: -3px; }
.transit-pulse-hero .civic-home-copy h1 { max-width: 980px; font-size: clamp(52px, 6vw, 92px); letter-spacing: -4px; }
.civic-home-copy p, .civic-split-hero p { color: #475a72; }
.transit-pulse-hero .civic-home-copy p { position: relative; z-index: 1; max-width: 830px; margin-top: 18px; font-size: clamp(17px, 1.6vw, 23px); line-height: 1.42; }
.live-eyebrow { display: inline-flex; align-items: center; gap: 8px; }
.live-eyebrow i { width: 10px; height: 10px; border-radius: 999px; background: #0fa35b; box-shadow: 0 0 0 5px #0fa35b1c; }
.civic-hero-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.pulse-disclaimer { position: relative; z-index: 1; max-width: 620px; margin-top: 18px; padding: 12px 14px; border: 1px solid #efd8d9; border-radius: 14px; color: #59687a; background: #ffffffb8; font-size: 12px; font-weight: 850; line-height: 1.35; }
.civic-photo-card { position: relative; display: grid; align-content: end; min-height: 335px; padding: 22px; overflow: hidden; color: #fff; background:
  linear-gradient(0deg, #0c1b31d9 0%, #0c1b3150 45%, transparent 72%),
  url("/assets/toronto-streetcar-hero.png") center / cover no-repeat; }
.civic-photo-card::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 0%, #0c1b3150 72%, #0c1b31d9 100%); pointer-events: none; }
.civic-photo-card span { position: relative; z-index: 1; max-width: 260px; margin-top: 14px; font-weight: 950; line-height: 1.2; text-shadow: 0 2px 16px #000c; }
.civic-stat-strip { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin: 0 auto 14px; }
.civic-stat-strip article { padding: 18px; }
.civic-stat-strip strong { display: block; color: #0c1b31; font-size: clamp(26px, 3vw, 42px); line-height: 1; letter-spacing: -1.3px; }
.civic-stat-strip span { display: block; margin-top: 7px; color: #536275; font-size: 12px; font-weight: 850; }
.city-pulse-card { position: relative; display: grid; gap: 14px; align-content: stretch; min-height: 100%; padding: 20px; overflow: hidden; color: #fff; background:
  linear-gradient(0deg, #0b1729f0 0%, #0b1729b0 48%, #0b172942 100%),
  url("/assets/toronto-streetcar-hero.png") center / cover no-repeat; }
.city-pulse-card::after { content: ""; position: absolute; inset: auto -70px -90px auto; width: 230px; height: 230px; border-radius: 999px; background: #d7192055; filter: blur(2px); }
.city-pulse-card > div, .city-pulse-card dl, .city-pulse-card p { position: relative; z-index: 1; }
.city-pulse-card > div { display: grid; align-content: end; min-height: 160px; padding: 16px; border: 1px solid #ffffff30; border-radius: 18px; background: #ffffff12; backdrop-filter: blur(8px); }
.city-pulse-card span, .city-pulse-card dt { color: #ffe2e4; font-size: 11px; font-weight: 950; letter-spacing: .7px; text-transform: uppercase; }
.city-pulse-card strong { display: block; margin-top: 8px; font-size: clamp(58px, 7vw, 92px); line-height: .82; letter-spacing: -4px; }
.city-pulse-card small { display: block; max-width: 290px; margin-top: 10px; color: #f7fbff; font-weight: 800; line-height: 1.35; }
.city-pulse-card dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0; }
.city-pulse-card dl div { min-width: 0; padding: 13px; border: 1px solid #ffffff24; border-radius: 14px; background: #ffffff14; }
.city-pulse-card dd { margin: 5px 0 0; color: #fff; font-size: 24px; font-weight: 950; line-height: 1; letter-spacing: -.8px; }
.city-pulse-card p { align-self: end; margin: 0; padding: 11px 12px; border-radius: 999px; color: #10233f; background: #ffffffde; font-size: 12px; font-weight: 950; text-align: center; }
.pulse-story-strip p strong { display: inline; margin: 0; color: #111827; font-size: inherit; font-weight: 900; line-height: inherit; letter-spacing: inherit; }
.pulse-story-strip { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(280px, .9fr); gap: 12px; margin: 0 auto 14px; }
.pulse-story-strip article { min-width: 0; padding: 20px; }
.pulse-story-strip span { color: #9e1a1f; font-size: 11px; font-weight: 950; letter-spacing: .7px; text-transform: uppercase; }
.pulse-story-strip article > strong { display: block; margin-top: 7px; color: #0c1b31; font-size: clamp(24px, 2.4vw, 38px); line-height: 1; letter-spacing: -1px; }
.pulse-story-strip p { margin: 10px 0 0; color: #475a72; font-size: 15px; line-height: 1.45; }
.route-feature-panel { display: grid; grid-template-columns: minmax(0, .98fr) minmax(340px, .62fr); gap: 14px; margin: 0 auto 14px; }
.route-feature-copy { position: relative; overflow: hidden; padding: clamp(22px, 3vw, 36px); background: radial-gradient(circle at top right, #ffe1e4 0, transparent 34%), linear-gradient(135deg, #fffdfa 0%, #fff5f5 100%); }
.route-feature-copy::after { content: ""; position: absolute; right: -85px; bottom: -125px; width: 280px; height: 280px; border-radius: 999px; background: #d719200d; pointer-events: none; }
.route-feature-copy h2 { position: relative; z-index: 1; max-width: 860px; margin: 5px 0 0; color: #0c1b31; font-size: clamp(34px, 4vw, 62px); line-height: .95; letter-spacing: -2.2px; }
.route-feature-copy p { position: relative; z-index: 1; max-width: 880px; margin-top: 14px; color: #475a72; font-size: clamp(16px, 1.45vw, 21px); line-height: 1.45; }
.route-feature-actions { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.route-feature-copy small { position: relative; z-index: 1; display: block; max-width: 680px; margin-top: 14px; color: #647287; font-size: 12px; font-weight: 850; line-height: 1.35; }
.route-feature-preview { display: grid; gap: 14px; align-content: start; min-width: 0; padding: 20px; color: #fff; background: linear-gradient(160deg, #0c1b31 0%, #183a60 100%); }
.route-feature-line { position: relative; min-height: 150px; overflow: hidden; border: 1px solid #ffffff26; border-radius: 18px; background: radial-gradient(circle at 35% 45%, #ffffff21 0 4px, transparent 5px), linear-gradient(135deg, #ffffff12, #ffffff08); }
.route-feature-line span { position: absolute; left: 9%; right: 9%; top: 50%; height: 6px; border-radius: 999px; background: #d71920; box-shadow: 0 0 0 5px #ffffff22; }
.route-feature-line i, .route-feature-line strong { position: absolute; top: calc(50% - 11px); display: grid; place-items: center; width: 22px; height: 22px; border: 3px solid #183a60; border-radius: 999px; color: #d71920; background: #fff; font-size: 11px; font-style: normal; font-weight: 950; }
.route-feature-line i:nth-of-type(1) { left: 16%; }
.route-feature-line i:nth-of-type(2) { left: 34%; }
.route-feature-line strong { left: calc(50% - 18px); top: calc(50% - 18px); width: 36px; height: 36px; border-color: #fff; color: #fff; background: #d71920; box-shadow: 0 12px 28px #0005; }
.route-feature-line i:nth-of-type(3) { right: 34%; }
.route-feature-line i:nth-of-type(4) { right: 16%; }
.route-feature-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.route-feature-stats article { min-width: 0; padding: 13px; border: 1px solid #ffffff24; border-radius: 14px; background: #ffffff12; }
.route-feature-stats strong { display: block; color: #fff; font-size: 24px; line-height: 1; letter-spacing: -.6px; }
.route-feature-stats span { display: block; margin-top: 5px; color: #dbe7f2; font-size: 12px; font-weight: 850; line-height: 1.25; }
.route-feature-links { display: flex; flex-wrap: wrap; gap: 8px; }
.route-feature-links a { flex: 1 1 90px; min-height: 38px; display: grid; place-items: center; border: 1px solid #ffffff2e; border-radius: 999px; color: #fff; background: #ffffff12; font-size: 12px; font-weight: 950; text-decoration: none; }
.route-feature-links a:hover, .route-feature-links a:focus-visible { border-color: #fff; background: #ffffff24; outline: 0; }
.transparent-model-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 0 auto 14px; }
.pulse-lens-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.transparent-model-card, .model-dashboard-card, .ward-model-read { border: 1px solid #e5d9ce; border-radius: 20px; background: #fffdfa; box-shadow: 0 18px 44px #3a2c2410; }
.transparent-model-card { position: relative; display: grid; gap: 10px; min-height: 220px; padding: 18px; overflow: hidden; }
.transparent-model-card::after { content: ""; position: absolute; right: -36px; bottom: -48px; width: 128px; height: 128px; border-radius: 999px; background: #d7192012; }
.transparent-model-card span, .ward-model-read span, .model-dashboard-card .eyebrow { color: #9e1a1f; font-size: 11px; font-weight: 950; letter-spacing: .8px; text-transform: uppercase; }
.transparent-model-card h2 { margin: 0; color: #0c1b31; font-size: clamp(22px, 2vw, 30px); line-height: 1.05; letter-spacing: -.8px; }
.transparent-model-card strong { display: block; color: #d71920; font-size: clamp(36px, 4vw, 58px); line-height: .9; letter-spacing: -2px; }
.transparent-model-card p, .transparent-model-card small { position: relative; z-index: 1; margin: 0; color: #475a72; line-height: 1.35; }
.transparent-model-card small { align-self: end; color: #6b7685; font-size: 11px; font-weight: 850; }
.transparent-model-card.live-health { background: linear-gradient(135deg, #fffdfa 0%, #f7fbff 100%); }
.transparent-model-card.equity-pressure { background: linear-gradient(135deg, #fffdfa 0%, #fff4f4 100%); }
.transparent-model-card.watchlist { background: linear-gradient(135deg, #fffdfa 0%, #fff8eb 100%); }
.civic-journey-panel { display: grid; grid-template-columns: minmax(0, .82fr) minmax(360px, 1.18fr); gap: 24px; align-items: start; margin: 0 auto 14px; padding: clamp(20px, 3vw, 34px); background: linear-gradient(135deg, #fffdfa 0%, #f8fbff 100%); }
.civic-journey-panel h2, .civic-section-heading h2 { margin: 5px 0 0; color: #0c1b31; font-size: clamp(30px, 3.4vw, 52px); line-height: .95; letter-spacing: -1.8px; }
.civic-journey-panel p, .civic-section-heading p { margin: 12px 0 0; color: #475a72; line-height: 1.45; }
.civic-journey-panel ol { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.civic-journey-panel li { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 9px 12px; align-items: start; min-width: 0; padding: 15px; border: 1px solid #e5edf4; border-radius: 16px; background: #fff; }
.civic-journey-panel b { display: grid; place-items: center; grid-row: 1 / span 2; width: 32px; height: 32px; border-radius: 999px; color: #fff; background: #d71920; font-weight: 950; }
.civic-journey-panel strong { color: #0c1b31; font-size: 17px; line-height: 1.15; }
.civic-journey-panel span:not(.eyebrow) { color: #536275; font-size: 13px; line-height: 1.35; }
.civic-connected-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 390px); gap: 14px; }
.civic-map-panel header a { align-self: start; padding: 9px 11px; border-radius: 999px; color: #9e1a1f; background: #fff0f1; font-size: 12px; font-weight: 950; text-decoration: none; }
.civic-red-map { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 6px; min-height: 330px; margin-top: 8px; padding: 28px; border-radius: 16px; background: linear-gradient(135deg, #eef2f4, #f8f5ef); }
.civic-red-map i { min-height: 46px; border-radius: 8px; background: #f3b5b9; box-shadow: inset 0 0 0 1px #fff9; transform: skew(-8deg); }
.civic-red-map i:nth-child(2n) { background: #f7d4d6; }
.civic-red-map i:nth-child(3n) { background: #d71920; }
.civic-red-map i:nth-child(5n) { background: #ef8f95; }
.civic-red-map i:nth-child(7n) { background: #e7ecef; }
.civic-real-map { position: relative; min-height: 360px; margin-top: 8px; overflow: hidden; border: 1px solid #e1e8ef; border-radius: 16px; background: #eef2f4; }
.civic-real-map > span { position: absolute; inset: 0; display: grid; place-items: center; z-index: 0; color: #536275; font-weight: 900; }
.civic-real-map.leaflet-container > span { display: none; }
.civic-real-map.leaflet-container { font: inherit; }
.civic-real-map .leaflet-control-attribution { font-size: 10px; }
.civic-real-map .leaflet-control-zoom { border: 1px solid #d7e1e9; box-shadow: 0 10px 24px #10203318; }
.civic-ward-real-map { padding: 0; display: block; }
.civic-map-legend, .service-network-legend { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 12px; color: #536275; font-size: 12px; font-weight: 850; }
.civic-map-legend span, .service-network-legend span { display: inline-flex; align-items: center; gap: 7px; }
.civic-map-legend b, .service-network-legend b { width: 18px; height: 10px; border-radius: 3px; background: #d71920; }
.civic-map-legend .mid { background: #f3b5b9; }
.civic-map-legend .low { background: #f7d4d6; }
.civic-map-legend .none { background: #dfe5ea; }
.civic-brief-card { display: grid; align-content: start; gap: 14px; }
.civic-brief-card h2 { font-size: clamp(28px, 3vw, 42px); line-height: 1; letter-spacing: -1.5px; }
.civic-signal-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.civic-number-list, .civic-finding-list { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.civic-number-list li, .civic-finding-list li { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 10px; align-items: start; color: #33445b; line-height: 1.35; }
.civic-number-list b, .civic-finding-list li::before { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 999px; color: #d71920; background: #fff0f1; font-weight: 950; }
.civic-finding-list { counter-reset: findings; }
.civic-finding-list li { counter-increment: findings; }
.civic-finding-list li::before { content: counter(findings); }
.civic-page-links { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; margin-top: 14px; }
.civic-section-heading { grid-column: 1 / -1; max-width: 900px; margin-bottom: 2px; }
.civic-section-heading h2 { font-size: clamp(28px, 3vw, 44px); }
.civic-page-links a { display: grid; gap: 9px; min-height: 155px; padding: 18px; color: inherit; text-decoration: none; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.civic-evidence-trail a { min-height: 175px; background: linear-gradient(150deg, #fffdfa 0%, #fff 100%); }
.civic-page-links a:hover, .civic-page-links a:focus-visible { border-color: #d71920; box-shadow: 0 22px 46px #d7192020; transform: translateY(-2px); outline: 0; }
.civic-page-links span { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 999px; color: #fff; background: #d71920; font-weight: 950; }
.civic-page-links strong { color: #0c1b31; font-size: 20px; }
.civic-page-links small { color: #536275; line-height: 1.35; }
.civic-footer { margin-top: 18px; }
.civic-split-hero { max-width: 1500px; }
.civic-split-hero aside { border-color: #e5d9ce; background: #fffdfa; }
.civic-brief-layout { max-width: 1200px; }
.brief-lede { padding: 16px; border-radius: 14px; background: #f8fbfd; }
.civic-evidence-pack { align-content: start; }
.civic-evidence-pack a { min-height: 58px; }
.civic-ward-page { background: radial-gradient(circle at top right, #fff0f1 0, transparent 32%), #fbf7f1; }
.civic-ward-shell { max-width: 1500px; }
.civic-red-ward-map { background: linear-gradient(135deg, #f1f4f6, #f8f1ec); }
.service-tabs { display: flex; gap: 8px; max-width: 1500px; margin: 0 auto 12px; overflow-x: auto; padding-bottom: 2px; }
.service-tabs button { flex: 0 0 auto; min-width: 118px; padding: 12px 15px; border: 1px solid #e5d9ce; border-radius: 13px; color: #33445b; background: #fffdfa; font-weight: 950; cursor: pointer; transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease; }
.service-tabs button:hover, .service-tabs button:focus-visible { border-color: #d71920; box-shadow: 0 12px 28px #d7192018; outline: none; transform: translateY(-1px); }
.service-tabs button.active { color: #fff; border-color: #d71920; background: #d71920; }
.service-tab-panels { max-width: 1500px; margin: 0 auto; }
.service-tab-panel[hidden] { display: none; }
.civic-service-metrics, .civic-service-grid, .civic-service-note { max-width: 1500px; }
.service-detail-panel { max-width: 1500px; margin: 0 auto 14px; padding: 18px; }
.service-detail-panel > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; margin-bottom: 14px; }
.service-detail-panel h2 { margin: 3px 0 0; color: #0c1b31; font-size: clamp(30px, 4vw, 56px); line-height: .95; letter-spacing: -1.8px; }
.service-detail-panel header p { max-width: 820px; margin: 8px 0 0; color: #536275; line-height: 1.45; }
.service-tab-explain-card .plain-list { margin-top: 8px; }
.service-insight-list { display: grid; gap: 10px; }
.service-insight-list article { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 13px; border: 1px solid #e5d9ce; border-radius: 15px; background: #fff; }
.service-insight-list b { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 999px; color: #fff; background: #d71920; font-weight: 950; }
.service-insight-list strong, .service-insight-list span { display: block; }
.service-insight-list span { margin-top: 3px; color: #536275; font-size: 13px; line-height: 1.35; }
.service-insight-list a { justify-self: end; color: #d71920; font-size: 12px; font-weight: 950; text-decoration: none; white-space: nowrap; }
.service-local-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.service-local-grid article { min-height: 170px; padding: 16px; border: 1px solid #e9edf2; border-radius: 16px; background: linear-gradient(145deg, #fffdfa, #ffffff); }
.service-local-grid strong { display: block; color: #0c1b31; font-size: 20px; line-height: 1.1; }
.service-local-grid p { margin: 10px 0 0; color: #536275; line-height: 1.4; }
.model-dashboard-card { max-width: 1500px; margin: 0 auto 14px; padding: 18px; }
.model-dashboard-card > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; margin-bottom: 14px; }
.model-dashboard-card h2 { margin: 3px 0 0; color: #0c1b31; font-size: clamp(28px, 3vw, 42px); line-height: 1; letter-spacing: -1.3px; }
.model-dashboard-card header p { max-width: 780px; margin: 6px 0 0; color: #536275; line-height: 1.4; }
.model-dashboard-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.model-dashboard-grid article { padding: 16px; border: 1px solid #e9edf2; border-radius: 16px; background: #fff; }
.model-dashboard-grid span { color: #536275; font-size: 11px; font-weight: 950; letter-spacing: .7px; text-transform: uppercase; }
.model-dashboard-grid strong { display: block; margin-top: 8px; color: #d71920; font-size: clamp(32px, 3vw, 48px); line-height: .9; letter-spacing: -1.6px; }
.model-dashboard-grid p { margin: 9px 0 0; color: #33445b; line-height: 1.35; }
.transparent-model-card p strong, .model-dashboard-grid p strong, .ward-model-read p strong { color: #111827; font: inherit; font-weight: 900; }
.model-watchlist-panel { margin-top: 14px; padding: 14px; border-radius: 16px; background: #f8fbfd; }
.model-watchlist-panel h3 { margin: 0 0 10px; color: #0c1b31; font-size: 20px; }
.model-watchlist-list { display: grid; gap: 9px; }
.model-watchlist-list article { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 11px; border: 1px solid #dfe7ee; border-radius: 13px; background: #fff; }
.model-watchlist-list b { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 999px; color: #fff; background: #d71920; }
.model-watchlist-list strong, .model-watchlist-list span { display: block; }
.model-watchlist-list span { margin-top: 3px; color: #536275; font-size: 12px; line-height: 1.35; }
.model-watchlist-list em { color: #9e1a1f; font-style: normal; font-weight: 950; white-space: nowrap; }
.service-network-map { position: relative; min-height: 360px; overflow: hidden; border-radius: 16px; background: linear-gradient(135deg, #edf2f4, #f8f5ef); }
.service-network-map::before { content: ""; position: absolute; inset: 40px; border-radius: 36% 44% 39% 42%; background: #fff8; box-shadow: inset 0 0 0 1px #cfd8df; }
.service-network-map.leaflet-container::before, .civic-real-map.leaflet-container::before { display: none; }
.service-network-map i { position: absolute; left: 10%; right: 10%; height: 4px; border-radius: 999px; background: #d71920; box-shadow: 0 0 0 1px #fff8; }
.service-network-map i:nth-child(1) { top: 20%; transform: rotate(8deg); }
.service-network-map i:nth-child(2) { top: 31%; transform: rotate(-10deg); }
.service-network-map i:nth-child(3) { top: 43%; transform: rotate(18deg); }
.service-network-map i:nth-child(4) { top: 55%; transform: rotate(-4deg); }
.service-network-map i:nth-child(5) { top: 66%; transform: rotate(10deg); }
.service-network-map i:nth-child(6) { top: 38%; transform: rotate(89deg); }
.service-network-map i:nth-child(7) { top: 52%; transform: rotate(78deg); }
.service-network-map i:nth-child(8), .service-network-map i:nth-child(9) { background: #aeb8c3; }
.service-network-map i:nth-child(8) { top: 73%; transform: rotate(15deg); }
.service-network-map i:nth-child(9) { top: 26%; transform: rotate(53deg); }
.service-network-legend .local { background: #ef8f95; }
.service-network-legend .quiet { background: #aeb8c3; }
.civic-service-note { display: flex; flex-wrap: wrap; gap: 12px 18px; align-items: center; justify-content: space-between; margin: 14px auto 0; }
.civic-service-note p { max-width: 860px; }
.route-life-page { display: grid; gap: 14px; }
.route-life-hero { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(320px, .55fr); gap: 18px; align-items: stretch; }
.route-life-hero > div, .route-picker-card, .route-map-card, .route-nearby-card, .route-day-card, .route-takeaway-card { border: 1px solid #e5d9ce; border-radius: 20px; background: #fffdfa; box-shadow: 0 18px 44px #3a2c2410; }
.route-life-hero > div { position: relative; overflow: hidden; padding: clamp(26px, 4vw, 52px); background: radial-gradient(circle at top right, #ffe1e4 0, transparent 36%), linear-gradient(135deg, #fffdfa 0%, #fff7f1 100%); }
.route-life-hero > div::after { content: ""; position: absolute; right: -90px; bottom: -130px; width: 310px; height: 310px; border-radius: 999px; background: #d719200f; pointer-events: none; }
.route-life-hero h1 { position: relative; z-index: 1; max-width: 900px; margin: 0; color: #0c1b31; font-size: clamp(46px, 6vw, 88px); line-height: .9; letter-spacing: -3.8px; }
.route-life-hero p { position: relative; z-index: 1; max-width: 780px; margin: 18px 0 0; color: #475a72; font-size: clamp(17px, 1.6vw, 22px); line-height: 1.45; }
.route-life-hero small { position: relative; z-index: 1; display: block; max-width: 610px; margin-top: 16px; color: #6b7685; font-size: 12px; font-weight: 850; line-height: 1.35; }
.route-life-actions { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.route-picker-card { display: grid; align-content: start; gap: 14px; padding: 22px; background: linear-gradient(160deg, #0c1b31 0%, #173356 100%); color: #fff; }
.route-picker-card label { color: #ffe2e4; font-size: 12px; font-weight: 950; letter-spacing: .8px; text-transform: uppercase; }
.route-picker-control { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 10px; align-items: center; }
.route-picker-control span { display: grid; place-items: center; min-height: 54px; border-radius: 14px; color: #fff; background: #d71920; font-size: 25px; font-weight: 950; letter-spacing: -1px; }
.route-picker-control select { width: 100%; min-height: 54px; padding: 0 13px; border: 1px solid #ffffff2e; border-radius: 14px; color: #0c1b31; background: #fff; font: inherit; font-weight: 900; }
.route-picker-card p { margin: 0; color: #dbe7f7; line-height: 1.4; }
.route-quick-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0; }
.route-quick-stats div { min-width: 0; padding: 13px; border: 1px solid #ffffff24; border-radius: 14px; background: #ffffff12; }
.route-quick-stats dt { color: #c9d8eb; font-size: 11px; font-weight: 950; letter-spacing: .7px; text-transform: uppercase; }
.route-quick-stats dd { margin: 6px 0 0; color: #fff; font-size: 28px; font-weight: 950; line-height: 1; letter-spacing: -1px; }
.route-life-map-shell { display: grid; grid-template-columns: minmax(0, 1fr) minmax(310px, 390px); gap: 14px; }
.route-map-card, .route-nearby-card, .route-day-card, .route-takeaway-card { padding: 18px; }
.route-map-card header { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin-bottom: 10px; }
.route-map-card h2, .route-nearby-card h2, .route-day-card h2, .route-takeaway-card h2 { margin: 3px 0 0; color: #0c1b31; font-size: clamp(26px, 3vw, 42px); line-height: 1; letter-spacing: -1.2px; }
.route-map-card p, .route-nearby-card p, .route-takeaway-card p { margin: 8px 0 0; color: #536275; line-height: 1.45; }
.route-nearby-card > p small { display: block; margin-top: 8px; color: #6b7685; font-size: 11px; font-weight: 850; line-height: 1.35; }
.route-map-card header span { flex: 0 0 auto; padding: 9px 11px; border-radius: 999px; color: #0c1b31; background: #f4f7fa; font-size: 12px; font-weight: 950; }
.route-life-map { min-height: 520px; }
.route-map-legend { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 12px; color: #536275; font-size: 12px; font-weight: 850; }
.route-map-legend span { display: inline-flex; align-items: center; gap: 7px; }
.route-map-legend b { width: 18px; height: 10px; border-radius: 3px; background: #d71920; }
.route-map-legend .vehicle { width: 12px; height: 12px; border-radius: 999px; }
.route-map-legend .stop { background: #64748b; }
.route-map-legend .place { background: #0ea5e9; }
.route-nearby-card { display: grid; align-content: start; gap: 12px; }
.route-place-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.route-place-grid article { min-width: 0; padding: 14px; border: 1px solid #e9edf2; border-radius: 15px; background: linear-gradient(145deg, #fff, #f8fbfd); }
.route-place-grid strong { display: block; color: #d71920; font-size: 34px; line-height: .9; letter-spacing: -1.3px; }
.route-place-grid span { display: block; margin-top: 7px; color: #536275; font-size: 12px; font-weight: 900; }
.route-place-list { display: grid; gap: 8px; margin: 2px 0 0; padding: 0; list-style: none; }
.route-place-list li { display: grid; grid-template-columns: 12px minmax(0, 1fr); gap: 8px 10px; align-items: center; padding: 10px; border: 1px solid #e9edf2; border-radius: 12px; background: #fff; color: #33445b; font-size: 13px; line-height: 1.3; }
.route-place-list b { width: 10px; height: 10px; border-radius: 999px; background: #d71920; }
.route-place-list small { grid-column: 2; color: #647287; font-size: 11px; font-weight: 850; }
.route-day-grid { display: grid; grid-template-columns: minmax(0, .95fr) minmax(320px, .65fr); gap: 14px; }
.route-day-tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 14px; }
.route-day-tabs button { min-height: 42px; border: 1px solid #e5d9ce; border-radius: 12px; color: #33445b; background: #fff; font: inherit; font-size: 12px; font-weight: 950; cursor: pointer; }
.route-day-tabs button:hover, .route-day-tabs button:focus-visible { border-color: #d71920; box-shadow: 0 10px 22px #d7192014; outline: none; }
.route-day-tabs button.active { color: #fff; border-color: #d71920; background: #d71920; }
.route-day-story { margin-top: 12px; padding: 18px; border: 1px solid #f0d7d9; border-radius: 16px; background: linear-gradient(135deg, #fff7f7, #fff); }
.route-day-story span { color: #9e1a1f; font-size: 12px; font-weight: 950; letter-spacing: .6px; text-transform: uppercase; }
.route-day-story strong { display: block; margin-top: 7px; color: #0c1b31; font-size: clamp(24px, 2.5vw, 36px); line-height: 1; letter-spacing: -1px; }
.route-day-story p { max-width: 780px; margin: 9px 0 0; color: #475a72; line-height: 1.45; }
.route-takeaway-card { display: grid; align-content: start; gap: 10px; background: linear-gradient(135deg, #fffdfa 0%, #fff3f4 100%); }
.route-caveat-box { display: grid; gap: 5px; margin-top: 8px; padding: 13px; border: 1px solid #efd8d9; border-radius: 14px; background: #ffffffb8; }
.route-caveat-box strong { color: #0c1b31; }
.route-caveat-box span { color: #5d6877; line-height: 1.4; }
.ward-model-read { display: grid; gap: 7px; margin-top: 14px; padding: 14px; background: linear-gradient(135deg, #fff8f8, #fffdfa); }
.ward-model-read strong { color: #d71920; font-size: 22px; line-height: 1; letter-spacing: -.6px; }
.ward-model-read p, .ward-model-read small { margin: 0; color: #475a72; line-height: 1.35; }
.ward-model-read small { color: #6b7685; font-size: 11px; font-weight: 850; }
.ward-model-read .ward-model-caveat { margin-top: 3px; padding-top: 9px; border-top: 1px solid #eadfda; color: #475a72; font-weight: 750; }
.scenario-simulator-page { max-width: 1500px; margin: 0 auto; }
.scenario-hero aside { align-content: center; }
.scenario-shell { display: grid; grid-template-columns: minmax(300px, 420px) minmax(0, 1fr); gap: 14px; max-width: 1500px; margin: 0 auto 14px; }
.scenario-control-card, .scenario-map-card, .scenario-results-grid article, .scenario-before-after article, .scenario-explanation-card, .scenario-ward-card, .scenario-tradeoff-card, .scenario-assumption-card { border: 1px solid #e5d9ce; border-radius: 20px; background: #fffdfa; box-shadow: 0 18px 44px #3a2c2410; }
.scenario-control-card { display: grid; align-content: start; gap: 11px; padding: 20px; }
.scenario-control-card h2 { margin: 0; color: #0c1b31; font-size: clamp(28px, 3vw, 42px); line-height: 1; letter-spacing: -1.2px; }
.scenario-presets { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; margin: 4px 0 6px; }
.scenario-preset { display: grid; gap: 4px; min-height: 88px; padding: 12px; border: 1px solid #e5d9ce; border-radius: 14px; color: #33445b; text-align: left; background: #fff; cursor: pointer; transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease; }
.scenario-preset strong { color: #0c1b31; font-size: 13px; line-height: 1.15; }
.scenario-preset span { color: #647286; font-size: 11px; line-height: 1.25; }
.scenario-preset:hover, .scenario-preset:focus-visible { border-color: #d71920; box-shadow: 0 10px 24px #d7192014; transform: translateY(-1px); outline: none; }
.scenario-preset.is-active { border-color: #d71920; background: linear-gradient(145deg, #fff6f6, #ffffff); box-shadow: inset 0 0 0 1px #d7192026; }
.scenario-control-card label { margin-top: 5px; color: #5b6675; font-size: 11px; font-weight: 950; letter-spacing: .7px; text-transform: uppercase; }
.scenario-control-card select, .scenario-control-card input[type="range"] { width: 100%; }
.scenario-control-card select { min-height: 46px; padding: 0 12px; border: 1px solid #d9e1e8; border-radius: 12px; color: #0c1b31; background: #fff; font: inherit; font-weight: 850; }
.scenario-unit-options { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.scenario-unit-options button { min-height: 44px; border: 1px solid #e5d9ce; border-radius: 13px; color: #33445b; background: #fff; font: inherit; font-weight: 950; cursor: pointer; transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease; }
.scenario-unit-options button:hover, .scenario-unit-options button:focus-visible { border-color: #d71920; box-shadow: 0 10px 22px #d7192014; outline: none; transform: translateY(-1px); }
.scenario-unit-options button.is-active { color: #fff; border-color: #d71920; background: #d71920; }
.scenario-range-row { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; align-items: center; padding: 10px 12px; border: 1px solid #f0d7d9; border-radius: 13px; background: #fff7f7; }
.scenario-range-row strong { color: #d71920; white-space: nowrap; }
.scenario-range-row span { color: #5b6675; font-size: 12px; font-weight: 850; }
.scenario-control-card button { justify-content: center; min-height: 42px; margin-top: 6px; }
.scenario-control-card button.is-confirmed { background: #0c7a42; box-shadow: 0 12px 26px #0c7a4224; }
.scenario-run-status { margin: 0; padding: 11px 12px; border: 1px solid #f0d7d9; border-radius: 13px; color: #4d5b70; background: #fff7f7; font-size: 12px; font-weight: 850; line-height: 1.35; }
.scenario-map-card { min-width: 0; padding: 18px; }
.scenario-map-card header { margin-bottom: 8px; }
.scenario-map-card h2 { margin: 3px 0 0; color: #0c1b31; font-size: clamp(28px, 3vw, 42px); line-height: 1; letter-spacing: -1.2px; }
.scenario-map { min-height: 440px; }
.scenario-map-legend { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 12px; color: #536275; font-size: 12px; font-weight: 850; }
.scenario-map-legend span { display: inline-flex; align-items: center; gap: 7px; }
.scenario-map-legend b { width: 18px; height: 10px; border-radius: 3px; }
.scenario-map-legend .selected { background: #d71920; }
.scenario-map-legend .pressure { background: #f2a5aa; }
.scenario-map-legend .base { background: #f7dfe1; }
.scenario-results-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; max-width: 1500px; margin: 0 auto 14px; }
.scenario-results-grid article { padding: 18px; }
.scenario-results-grid span { color: #536275; font-size: 11px; font-weight: 950; letter-spacing: .7px; text-transform: uppercase; }
.scenario-results-grid strong { display: block; margin-top: 8px; color: #d71920; font-size: clamp(30px, 3vw, 48px); line-height: .95; letter-spacing: -1.5px; }
.scenario-results-grid small { display: block; margin-top: 7px; color: #5d6877; line-height: 1.35; }
.scenario-before-after { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; max-width: 1500px; margin: 0 auto 14px; }
.scenario-before-after article { padding: 18px; background: linear-gradient(150deg, #fffdfa, #f8fbff); }
.scenario-before-after span { color: #536275; font-size: 11px; font-weight: 950; letter-spacing: .7px; text-transform: uppercase; }
.scenario-before-after strong { display: block; margin-top: 7px; color: #0c1b31; font-size: clamp(28px, 3vw, 44px); line-height: .95; letter-spacing: -1.4px; }
.scenario-before-after small { display: block; margin-top: 7px; color: #5d6877; line-height: 1.35; }
.scenario-explain-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(320px, .85fr); gap: 14px; max-width: 1500px; margin: 0 auto; }
.scenario-explanation-card, .scenario-ward-card, .scenario-tradeoff-card, .scenario-assumption-card { padding: 18px; }
.scenario-explain-grid h2 { margin: 0 0 12px; color: #0c1b31; font-size: 24px; letter-spacing: -.6px; }
.scenario-explanation-card p { display: grid; gap: 8px; margin: 0; color: #33445b; line-height: 1.45; }
.scenario-explanation-card strong { color: #0c1b31; font-size: 20px; line-height: 1.2; }
.scenario-confidence { margin-top: 14px; padding: 11px 12px; border: 1px solid #d8e7f5; border-radius: 13px; color: #234567; background: #f4f9ff; font-weight: 800; line-height: 1.35; }
.scenario-policy-question { display: grid; gap: 5px; margin-top: 12px; padding: 13px; border-radius: 14px; background: #fff3f3; }
.scenario-policy-question span, .scenario-tradeoff-grid span { color: #8f1018; font-size: 11px; font-weight: 950; letter-spacing: .7px; text-transform: uppercase; }
.scenario-policy-question strong { color: #0c1b31; line-height: 1.25; }
.scenario-ward-list { display: grid; gap: 9px; }
.scenario-ward-list article { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 10px; align-items: start; padding: 11px; border: 1px solid #e1e8ef; border-radius: 13px; background: #fff; }
.scenario-ward-list b { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 999px; color: #fff; background: #d71920; }
.scenario-ward-list strong, .scenario-ward-list span, .scenario-ward-list em { display: block; }
.scenario-ward-list span { margin-top: 4px; color: #536275; font-size: 12px; line-height: 1.35; }
.scenario-ward-list em { margin-top: 6px; color: #33445b; font-size: 12px; font-style: normal; font-weight: 800; line-height: 1.35; }
.scenario-tradeoff-card { grid-column: 1 / -1; }
.scenario-tradeoff-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.scenario-tradeoff-grid div { padding: 14px; border: 1px solid #e1e8ef; border-radius: 14px; background: #fff; }
.scenario-tradeoff-grid p { margin: 7px 0 0; color: #33445b; line-height: 1.45; }
.scenario-assumption-card { grid-column: 1 / -1; }
.scenario-assumption-card ul { display: grid; gap: 9px; margin: 0; padding-left: 18px; color: #475a72; line-height: 1.45; }
.scenario-results-grid.is-updated article, .scenario-map-card.is-updated { animation: scenario-update-pulse 1.1s ease; }

/* Future development / civic roadmap */
.roadmap-page { max-width: 1280px; margin: 0 auto; }
.roadmap-hero { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(300px, .55fr); gap: 18px; align-items: stretch; margin-bottom: 14px; }
.roadmap-hero > div, .roadmap-hero aside, .roadmap-principles article, .roadmap-timeline article, .roadmap-deliverables article, .partnership-grid article { border: 1px solid #e5d9ce; border-radius: 20px; background: #fffdfa; box-shadow: 0 18px 44px #3a2c2410; }
.roadmap-hero > div { position: relative; overflow: hidden; padding: clamp(26px, 4vw, 52px); background: radial-gradient(circle at top right, #ffe1e4 0, transparent 36%), linear-gradient(135deg, #fffdfa 0%, #fff7f1 100%); }
.roadmap-hero > div::after { content: ""; position: absolute; right: -90px; bottom: -140px; width: 320px; height: 320px; border-radius: 999px; background: #d719200d; pointer-events: none; }
.roadmap-hero h1 { position: relative; z-index: 1; max-width: 900px; margin: 6px 0 0; color: #0c1b31; font-size: clamp(42px, 5vw, 76px); line-height: .93; letter-spacing: -3px; }
.roadmap-hero p { position: relative; z-index: 1; max-width: 820px; margin: 18px 0 0; color: #475a72; font-size: clamp(16px, 1.45vw, 21px); line-height: 1.45; }
.roadmap-hero aside { display: grid; align-content: end; gap: 12px; padding: 24px; background: linear-gradient(160deg, #0c1b31 0%, #172d4d 100%); color: #fff; }
.roadmap-hero aside strong { max-width: 300px; font-size: clamp(28px, 3vw, 44px); line-height: 1; letter-spacing: -1.3px; }
.roadmap-hero aside p { margin: 0; color: #dbe7f7; font-size: 15px; }
.roadmap-hero aside .nav-button { justify-self: start; }
.roadmap-principles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 14px; }
.roadmap-principles article { display: grid; gap: 9px; padding: 18px; }
.roadmap-principles span, .roadmap-step { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 999px; color: #fff; background: #d71920; font-weight: 950; }
.roadmap-principles strong { color: #0c1b31; font-size: 20px; line-height: 1.15; }
.roadmap-principles p, .roadmap-deliverables p, .partnership-grid p { margin: 0; color: #536275; line-height: 1.4; }
.roadmap-section { margin: 0 auto 14px; }
.roadmap-section > header { margin-bottom: 12px; padding: 0 2px; }
.roadmap-section h2 { margin: 4px 0 0; color: #0c1b31; font-size: clamp(30px, 3.4vw, 52px); line-height: .95; letter-spacing: -1.8px; }
.roadmap-section header p { max-width: 860px; margin: 10px 0 0; color: #536275; line-height: 1.45; }
.roadmap-timeline { display: grid; gap: 12px; }
.roadmap-timeline article { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 18px; align-items: start; padding: 20px; }
.roadmap-step {
  width: max-content;
  max-width: 150px;
  height: auto;
  min-height: 38px;
  padding: 9px 12px;
  border-radius: 999px;
  background: #0c1b31;
  font-size: 12px;
  line-height: 1.15;
  text-align: center;
  text-transform: uppercase;
}
.roadmap-timeline h3 { margin: 0; color: #0c1b31; font-size: clamp(24px, 2.4vw, 34px); line-height: 1; letter-spacing: -1px; }
.roadmap-timeline p { margin: 9px 0 0; color: #475a72; line-height: 1.45; }
.roadmap-timeline ul { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 0; padding: 0; list-style: none; }
.roadmap-timeline li { padding: 8px 10px; border: 1px solid #eadfe0; border-radius: 999px; color: #8f1018; background: #fff3f4; font-size: 12px; font-weight: 900; }
.roadmap-deliverables, .partnership-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.roadmap-deliverables article, .partnership-grid article { padding: 18px; }
.roadmap-deliverables strong, .partnership-grid strong { display: block; color: #0c1b31; font-size: 22px; line-height: 1.1; letter-spacing: -.5px; }
.partnership-grid span { display: inline-block; margin-bottom: 8px; color: #9e1a1f; font-size: 11px; font-weight: 950; letter-spacing: .7px; text-transform: uppercase; }
.roadmap-guardrails .plain-note-grid article { background: linear-gradient(145deg, #fffdfa, #fff); }

@keyframes scenario-update-pulse {
  0% { box-shadow: 0 0 0 0 #d7192030, 0 18px 44px #3a2c2410; transform: translateY(0); }
  35% { box-shadow: 0 0 0 5px #d719201c, 0 22px 52px #3a2c241a; transform: translateY(-1px); }
  100% { box-shadow: 0 18px 44px #3a2c2410; transform: translateY(0); }
}

@media (max-width: 1100px) {
  .civic-product-topbar > p { display: none; }
  .civic-home-hero, .pulse-story-strip, .route-feature-panel, .civic-journey-panel, .civic-connected-grid, .civic-ward-shell, .civic-brief-layout, .civic-service-grid, .route-life-hero, .route-life-map-shell, .route-day-grid, .scenario-shell, .scenario-explain-grid, .roadmap-hero { grid-template-columns: 1fr; }
  .civic-stat-strip, .civic-page-links, .transparent-model-grid, .model-dashboard-grid, .scenario-results-grid, .scenario-before-after, .roadmap-principles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .service-local-grid { grid-template-columns: 1fr; }
  .civic-journey-panel ol { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .model-dashboard-card > header, .service-detail-panel > header { display: grid; }
}

@media (max-width: 720px) {
  .civic-product-body .platform-page, .civic-product-body .trust-page { padding: 76px 12px 22px; }
  .civic-product-topbar { overflow: hidden; }
  .civic-product-topbar .topbar-brand strong { display: none; }
  .civic-product-topbar nav { max-width: none; overflow-x: auto; scrollbar-width: none; }
  .civic-product-topbar nav::-webkit-scrollbar { display: none; }
  .civic-product-topbar nav a { flex: 0 0 auto; padding: 7px 8px; font-size: 10px; }
  .civic-home-copy h1, .civic-split-hero h1 { font-size: 40px; letter-spacing: -1.8px; }
  .transit-pulse-hero .civic-home-copy h1 { font-size: 46px; letter-spacing: -2px; }
  .transit-pulse-hero .civic-home-copy p { font-size: 16px; }
  .civic-home-copy, .platform-card, .ward-map-panel, .ward-profile-card { border-radius: 16px; }
  .civic-photo-card { min-height: 230px; }
  .city-pulse-card { padding: 14px; }
  .city-pulse-card > div { min-height: 130px; padding: 14px; }
  .city-pulse-card strong { font-size: 58px; letter-spacing: -2.5px; }
  .city-pulse-card dl { grid-template-columns: 1fr; }
  .pulse-story-strip article, .route-feature-copy, .route-feature-preview { padding: 16px; border-radius: 16px; }
  .route-feature-copy h2 { font-size: 38px; letter-spacing: -1.8px; }
  .route-feature-copy p { font-size: 16px; }
  .route-feature-actions .nav-button { width: 100%; min-height: 42px; justify-content: center; }
  .route-feature-line { min-height: 118px; }
  .civic-stat-strip, .civic-page-links, .transparent-model-grid, .model-dashboard-grid, .scenario-results-grid, .scenario-before-after, .scenario-presets, .scenario-tradeoff-grid, .roadmap-principles, .roadmap-deliverables, .partnership-grid { grid-template-columns: 1fr; }
  .civic-journey-panel { padding: 16px; border-radius: 16px; }
  .civic-journey-panel ol { grid-template-columns: 1fr; }
  .civic-journey-panel li { grid-template-columns: 32px minmax(0, 1fr); padding: 13px; }
  .civic-red-map { grid-template-columns: repeat(5, minmax(0, 1fr)); min-height: 250px; padding: 18px; }
  .civic-red-map i { min-height: 36px; }
  .civic-real-map, .service-network-map { min-height: 310px; }
  .civic-page-links a { min-height: 0; }
  .civic-signal-actions .nav-button { width: 100%; min-height: 42px; justify-content: center; font-size: 12px; }
  .transparent-model-card { min-height: 0; }
  .model-dashboard-card { padding: 14px; border-radius: 16px; }
  .model-watchlist-list article { grid-template-columns: 30px minmax(0, 1fr); }
  .model-watchlist-list em { grid-column: 2; }
  .service-tabs { margin-bottom: 10px; padding: 0 0 4px; }
  .service-tabs button { min-width: 104px; padding: 11px 13px; border-radius: 12px; }
  .service-detail-panel { padding: 14px; border-radius: 16px; }
  .service-detail-panel h2 { font-size: 34px; letter-spacing: -1.3px; }
  .service-insight-list article { grid-template-columns: 30px minmax(0, 1fr); align-items: start; }
  .service-insight-list a { grid-column: 2; justify-self: start; }
  .service-local-grid article { min-height: 0; }
  .scenario-control-card, .scenario-map-card, .scenario-explanation-card, .scenario-ward-card, .scenario-tradeoff-card, .scenario-assumption-card { border-radius: 16px; padding: 14px; }
  .scenario-preset { min-height: auto; }
  .scenario-map { min-height: 330px; }
  .scenario-range-row { grid-template-columns: 1fr; }
  .civic-service-note { display: grid; }
  .service-network-map { min-height: 260px; }
  .route-life-hero > div, .route-picker-card, .route-map-card, .route-nearby-card, .route-day-card, .route-takeaway-card { border-radius: 16px; }
  .route-life-hero > div, .route-picker-card, .route-map-card, .route-nearby-card, .route-day-card, .route-takeaway-card { padding: 16px; }
  .route-life-hero h1 { font-size: 44px; letter-spacing: -2px; }
  .route-life-hero p { font-size: 16px; }
  .route-picker-control { grid-template-columns: 58px minmax(0, 1fr); }
  .route-picker-control span, .route-picker-control select { min-height: 50px; }
  .route-quick-stats, .route-place-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .route-life-map { min-height: 380px; }
  .route-map-card header { display: grid; }
  .route-map-card header span { justify-self: start; }
  .route-day-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .roadmap-hero > div, .roadmap-hero aside, .roadmap-principles article, .roadmap-timeline article, .roadmap-deliverables article, .partnership-grid article { border-radius: 16px; }
  .roadmap-hero > div, .roadmap-hero aside { padding: 18px; }
  .roadmap-hero h1 { font-size: 40px; letter-spacing: -1.8px; }
  .roadmap-timeline article { grid-template-columns: 1fr; gap: 12px; padding: 16px; }
  .roadmap-step { width: auto; height: auto; justify-self: start; padding: 9px 12px; border-radius: 999px; }
  .roadmap-timeline ul { display: grid; }
  .roadmap-timeline li { border-radius: 12px; }
}

@media (max-width: 460px) {
  .route-quick-stats, .route-place-grid { grid-template-columns: 1fr; }
  .route-picker-control { grid-template-columns: 1fr; }
  .route-picker-control span { justify-self: start; min-width: 66px; }
  .route-life-map { min-height: 330px; }
}

/* Connected subway summaries */
.subway-home-band { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(360px, .85fr); gap: 24px; align-items: center; margin: 0 auto 14px; padding: 26px; border: 1px solid #cfe1f6; border-radius: 20px; background: #f5faff; box-shadow: 0 16px 40px #17233b0b; }
.subway-home-band h2 { margin: 7px 0 9px; color: #0c1b31; font-size: clamp(34px, 4vw, 55px); line-height: .95; letter-spacing: -2.2px; }
.subway-home-band p { margin: 0 0 16px; color: #475a72; line-height: 1.5; }
.subway-home-band dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0; }
.subway-home-band dl div { padding: 15px; border: 1px solid #d8e7f7; border-radius: 14px; background: #fff; }
.subway-home-band dt { color: #64748b; font-size: 10px; font-weight: 950; letter-spacing: .6px; text-transform: uppercase; }
.subway-home-band dd { margin: 7px 0 0; color: #d71920; font-size: 30px; font-weight: 950; line-height: 1; }
.subway-home-band dd.subway-summary-method { color: #173f70; font-size: 18px; }
.subway-service-bridge { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px; align-items: center; padding: 20px; border: 1px solid #cfe1f6; border-radius: 18px; background: #f5faff; }
.subway-service-bridge h2 { margin: 6px 0 7px; color: #0c1b31; font-size: clamp(28px, 3vw, 42px); line-height: 1; letter-spacing: -1.4px; }
.subway-service-bridge p { margin: 0; color: #475a72; line-height: 1.45; }
.subway-bridge-stats { display: flex; gap: 10px; align-items: stretch; }
.subway-bridge-stats span, .subway-bridge-stats a { display: grid; min-width: 110px; place-items: center; padding: 12px; border-radius: 12px; color: #34465d; background: #fff; font-size: 11px; font-weight: 850; text-align: center; text-decoration: none; }
.subway-bridge-stats b { display: block; color: #d71920; font-size: 24px; }
.subway-bridge-stats a { color: #fff; background: #d71920; }

/* Subway Pulse */
.subway-pulse-main { max-width: 1400px; }
.subway-hero { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(360px, .75fr); gap: 22px; align-items: center; margin-bottom: 18px; }
.subway-hero > div { padding: 28px 10px; }
.subway-hero h1 { max-width: 820px; margin: 7px 0 12px; color: #0c1b31; font-size: clamp(48px, 5.6vw, 78px); line-height: .94; letter-spacing: -3.8px; }
.subway-hero > div > p { max-width: 760px; margin: 0; color: #475a72; font-size: 18px; line-height: 1.5; }
.subway-evidence-note { display: grid; grid-template-columns: 48px 1fr; gap: 16px; align-items: center; padding: 24px; border: 1px solid #cfe1f6; border-radius: 18px; background: #edf6ff; }
.subway-evidence-note > b { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; color: #fff; background: #3478d4; font-size: 25px; }
.subway-evidence-note strong { color: #0c376f; font-size: 17px; }
.subway-evidence-note p { margin: 5px 0 0; color: #28527f; line-height: 1.45; }
.subway-line-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-bottom: 16px; }
.subway-line-card { display: grid; grid-template-columns: 44px minmax(130px, 1.5fr) minmax(70px, .6fr) minmax(70px, .7fr); gap: 13px; align-items: center; min-width: 0; padding: 17px; border: 1px solid #dce3ea; border-radius: 17px; color: #0c1b31; background: #fff; font: inherit; text-align: left; cursor: pointer; box-shadow: 0 12px 30px #17233b0a; }
.subway-line-card:hover, .subway-line-card:focus-visible, .subway-line-card.active { border-color: #d71920; box-shadow: 0 15px 34px #7a10151a; outline: none; }
.subway-line-number, .subway-mini-line { display: grid; place-items: center; border-radius: 50%; color: #fff; background: #d71920; font-weight: 950; }
.subway-line-number { width: 42px; height: 42px; font-size: 21px; }
.line-1 .subway-line-number, .subway-mini-line.line-1, .subway-rail.line-1 .subway-rail-heading span { color: #151515; background: #f8d31c; }
.line-2 .subway-line-number, .subway-mini-line.line-2, .subway-rail.line-2 .subway-rail-heading span { background: #28a745; }
.line-4 .subway-line-number, .subway-mini-line.line-4, .subway-rail.line-4 .subway-rail-heading span { background: #a51b86; }
.subway-line-copy { min-width: 0; }
.subway-line-copy strong, .subway-line-copy small, .subway-line-card > span > small { display: block; }
.subway-line-copy strong { font-size: 14px; line-height: 1.2; }
.subway-line-copy small { margin-top: 5px; color: #59697c; line-height: 1.25; }
.subway-line-card > span > b { display: block; color: #0c1b31; font-size: 23px; line-height: 1; }
.subway-line-card > span > small { margin-top: 5px; color: #687689; font-size: 10px; font-weight: 800; }
.subway-system-layout { display: grid; grid-template-columns: minmax(0, 1.8fr) minmax(310px, .72fr); gap: 16px; margin-bottom: 18px; }
.subway-progress-panel, .subway-alert-panel, .subway-civic-value, .subway-method-note { border: 1px solid #dce3ea; border-radius: 20px; background: #fff; box-shadow: 0 16px 40px #17233b0b; }
.subway-progress-panel { padding: 22px; }
.subway-progress-panel > header, .subway-alert-panel > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.subway-progress-panel h2, .subway-alert-panel h2, .subway-civic-value h2, .subway-method-note h2 { margin: 0; color: #0c1b31; font-size: clamp(23px, 2.4vw, 35px); line-height: 1; letter-spacing: -1px; }
.subway-progress-panel header p, .subway-civic-value header p, .subway-method-note header p { margin: 7px 0 0; color: #5b6b7f; }
#subway-updated { flex: 0 0 auto; color: #536275; font-size: 12px; font-weight: 850; }
.subway-rail-shell { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 22px; }
.subway-rail { position: relative; min-width: 0; padding: 15px; border: 1px solid transparent; border-radius: 16px; background: #fafbfd; opacity: .72; transition: opacity .2s, border-color .2s, background .2s; }
.subway-rail.selected { border-color: #cfd9e5; background: #fff; opacity: 1; }
.subway-rail-heading { display: flex; gap: 9px; align-items: center; }
.subway-rail-heading span { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; color: #fff; font-weight: 950; }
.subway-rail-heading strong { color: #0c1b31; font-size: 13px; }
.subway-track { position: absolute; top: 66px; bottom: 28px; left: 30px; width: 8px; }
.subway-track > i { position: absolute; inset: 0; border-radius: 9px; background: #d71920; }
.subway-rail.line-1 .subway-track > i { background: #f8d31c; }
.subway-rail.line-2 .subway-track > i { background: #28a745; }
.subway-rail.line-4 .subway-track > i { background: #a51b86; }
.subway-rail ol { display: grid; min-height: 270px; align-content: space-between; margin: 18px 0 0 42px; padding: 0; list-style: none; }
.subway-rail li { position: relative; color: #34465d; font-size: 12px; }
.subway-rail li::before { content: ""; position: absolute; top: 3px; left: -31px; width: 10px; height: 10px; border: 2px solid #64748b; border-radius: 50%; background: #fff; }
.subway-train-markers button { position: absolute; z-index: 2; top: var(--marker-position); left: -3px; width: 14px; height: 14px; padding: 0; border: 3px solid #fff; border-radius: 4px; background: #0c1b31; box-shadow: 0 0 0 1px #0c1b31; transform: translateY(-50%); cursor: help; }
.subway-selected-trains { margin-top: 20px; padding-top: 18px; border-top: 1px solid #e5eaf0; }
.subway-selected-trains h3 { margin: 0 0 10px; color: #0c1b31; }
#subway-train-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
#subway-train-list article { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 9px; align-items: center; padding: 10px; border-radius: 12px; background: #f5f8fb; }
.subway-mini-line { width: 27px; height: 27px; font-size: 12px; }
#subway-train-list strong, #subway-train-list small { display: block; }
#subway-train-list strong { color: #0c1b31; font-size: 12px; }
#subway-train-list small { margin-top: 3px; color: #64748b; font-size: 10px; }
#subway-train-list b { color: #d71920; font-size: 11px; white-space: nowrap; }
.subway-alert-panel { padding: 20px; }
.subway-alert-panel > header div { display: flex; gap: 9px; align-items: center; }
.subway-alert-panel > header span { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; color: #fff; background: #d71920; font-weight: 950; }
.subway-alert-panel > header h2 { font-size: 22px; }
#subway-alert-count { padding: 6px 8px; border-radius: 8px; color: #fff; background: #d71920; font-size: 11px; white-space: nowrap; }
#subway-alert-list { display: grid; gap: 9px; margin: 15px 0; }
#subway-alert-list > article { display: grid; grid-template-columns: 31px minmax(0, 1fr); gap: 10px; padding: 13px; border: 1px solid #e4e9ee; border-radius: 13px; }
#subway-alert-list strong { color: #0c1b31; font-size: 12px; }
#subway-alert-list p { margin: 5px 0 0; color: #536275; font-size: 12px; line-height: 1.4; }
.subway-alert-panel > a { display: block; padding: 12px; border-radius: 11px; color: #0c4ea2; background: #edf5ff; font-weight: 900; text-align: center; text-decoration: none; }
.subway-civic-value, .subway-method-note { margin-bottom: 18px; padding: 24px; }
.subway-civic-value > div { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 18px; }
.subway-civic-value article { min-width: 0; padding: 15px 24px; border-left: 1px solid #e3e8ee; text-align: center; }
.subway-civic-value article:first-child { border-left: 0; }
.subway-civic-value strong { color: #0c1b31; font-size: 17px; }
.subway-civic-value article p { margin: 7px 0 0; color: #536275; line-height: 1.45; }
.subway-method-note { border-color: #cfe1f6; background: #f5faff; }
.subway-method-note > div { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 18px; }
.subway-method-note article { display: grid; grid-template-columns: 54px 1fr; gap: 15px; padding: 12px 25px; border-left: 1px solid #cfe1f6; }
.subway-method-note article:first-child { border-left: 0; }
.method-mode-icon { display: grid; place-items: center; width: 50px; height: 50px; border-radius: 14px; color: #fff; background: #183b6b; font-size: 11px; font-weight: 950; }
.method-mode-icon.subway { background: #d71920; }
.subway-method-note article strong { color: #0c1b31; }
.subway-method-note article p { margin: 5px 0 8px; color: #475a72; line-height: 1.4; }
.subway-method-note article small { padding: 5px 8px; border-radius: 7px; color: #174d87; background: #dceeff; font-weight: 850; }
.subway-method-caveat { margin: 18px 0 0; padding-top: 14px; border-top: 1px solid #cfe1f6; color: #34465d; font-weight: 750; }

@media (max-width: 980px) {
  .subway-home-band, .subway-service-bridge { grid-template-columns: 1fr; }
  .subway-bridge-stats { flex-wrap: wrap; }
  .subway-hero, .subway-system-layout { grid-template-columns: 1fr; }
  .subway-line-summary { grid-template-columns: 1fr; }
  .subway-civic-value > div { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .subway-civic-value article:nth-child(3) { border-left: 0; }
}

@media (max-width: 640px) {
  .ward-score-section { margin-top: 12px; padding: 16px; }
  .ward-score-header { display: block; }
  .ward-score-header .secondary-button { display: inline-flex; margin-top: 14px; }
  .ward-score-key { display: grid; gap: 8px; }
  .ward-score-table-wrap { overflow: visible; border: 0; }
  .ward-score-table, .ward-score-table tbody { display: block; }
  .ward-score-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .ward-score-table tr { display: grid; grid-template-columns: 1fr auto; gap: 9px 14px; margin-top: 10px; padding: 14px; border: 1px solid #dce3ea; border-radius: 12px; background: #fff; }
  .ward-score-table td { padding: 0; border: 0; }
  .ward-score-table td:nth-child(3), .ward-score-table td:nth-child(4), .ward-score-table td:nth-child(5) { grid-column: 1 / -1; }
  .ward-score-table td:nth-child(4) { font-size: 13px; }
  .ward-score-table td:nth-child(5) a { display: block; padding-top: 8px; border-top: 1px solid #e6ebf0; }
  .subway-home-band { padding: 16px; border-radius: 16px; }
  .subway-home-band h2 { font-size: 38px; }
  .subway-home-band dl { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .subway-service-bridge { padding: 15px; }
  .subway-bridge-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .subway-bridge-stats a { grid-column: 1 / -1; }
  .subway-pulse-main { padding-right: 10px; padding-left: 10px; }
  .subway-hero > div { padding: 14px 4px; }
  .subway-hero h1 { font-size: 43px; letter-spacing: -2px; }
  .subway-hero > div > p { font-size: 16px; }
  .subway-evidence-note { grid-template-columns: 38px 1fr; padding: 16px; }
  .subway-evidence-note > b { width: 36px; height: 36px; }
  .subway-line-card { grid-template-columns: 38px minmax(0, 1fr) 62px 68px; gap: 8px; padding: 13px 10px; }
  .subway-line-number { width: 36px; height: 36px; }
  .subway-line-copy strong { font-size: 12px; }
  .subway-line-copy small { font-size: 9px; }
  .subway-line-card > span > b { font-size: 18px; }
  .subway-progress-panel, .subway-alert-panel, .subway-civic-value, .subway-method-note { padding: 15px; border-radius: 16px; }
  .subway-progress-panel > header { display: grid; }
  .subway-rail-shell { grid-template-columns: 1fr; }
  .subway-rail { display: none; }
  .subway-rail.selected { display: block; }
  #subway-train-list { grid-template-columns: 1fr; }
  .subway-civic-value > div, .subway-method-note > div { grid-template-columns: 1fr; }
  .subway-civic-value article, .subway-civic-value article:nth-child(3), .subway-method-note article { border-top: 1px solid #e3e8ee; border-left: 0; }
  .subway-civic-value article:first-child, .subway-method-note article:first-child { border-top: 0; }
}

/* Exact reference-board alignment v114 */
.civic-product-body, .surface-access-body { font-family: Arial, Helvetica, sans-serif; background: #fbfaf7; }
.civic-home-page, .civic-ward-page, .civic-service-page, .civic-evidence-page, .subway-pulse-main, .local-stop-page { width: min(100% - 36px, 1210px); max-width: 1210px; margin-right: auto; margin-left: auto; }
.app-topbar { width: 100%; min-height: 62px; padding: 8px max(24px,calc((100vw - 1210px)/2)); }
.app-topbar .topbar-brand strong { font-size: 20px; }
.app-topbar nav { gap: 10px; }
.app-topbar nav a { padding: 10px 8px; font-size: 12px; }
.app-topbar > p,.platform-tagline { max-width: 210px; font-size: 11px; text-align: right; }
.civic-home-page h1,.civic-home-page h2,.civic-evidence-page h1,.civic-evidence-page h2 { font-family: Georgia,"Times New Roman",serif; }
.civic-ward-page h1,.civic-ward-page h2,.civic-service-page h1,.civic-service-page h2,.subway-pulse-main h1,.subway-pulse-main h2,.local-stop-page h1,.local-stop-page h2 { font-family: Arial,Helvetica,sans-serif; }
.mockup-home-hero { grid-template-columns: 340px minmax(0,1fr); gap: 14px; margin-top: 18px; }
.mockup-home-hero .civic-home-copy { min-height: 390px; padding: 28px 24px; border: 0; border-radius: 0; }
.mockup-home-hero .civic-home-copy h1 { max-width: 330px; font-size: 48px; line-height: .96; letter-spacing: -2.1px; }
.mockup-home-hero .civic-home-copy p { font-size: 15px; line-height: 1.45; }
.mockup-date { font-size: 14px !important; }
.home-map-stage,.home-map-stage .civic-real-map { min-height: 390px; }
.home-live-ribbon { display: none; }
.pulse-story-strip { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; }
.pulse-story-strip article { min-height: 122px; padding: 18px; border: 1px solid #dfe5ea; border-radius: 10px; background: #fff; }
.pulse-story-strip article span { color: #0b2540; font-family: Georgia,serif; font-size: 20px; text-transform: none; }
.pulse-story-strip article strong { margin-top: 8px; font-size: 13px; }
.pulse-story-strip article p { font-size: 12px; }
.mockup-source-panel { padding: 12px 16px; }
.mockup-source-panel > header { display: none; }
.mockup-source-panel .home-source-grid { grid-template-columns: repeat(4,minmax(0,1fr)); }
.home-source-grid span { padding: 8px 12px; border: 0; font-size: 12px; background: transparent; }
.route-feature-panel { grid-template-columns: 43% 57%; min-height: 200px; padding: 0; overflow: hidden; }
.route-feature-panel::before { content: ""; min-height: 200px; background: url('/assets/toronto-streetcar-hero.png') center/cover; }
.route-feature-copy { grid-column: 2; grid-row: 1; padding: 24px; }
.route-feature-copy h2 { font-size: 32px; }
.route-feature-preview { display: none; }
.transparent-model-grid,.subway-home-band,.civic-journey-panel { display: none; }
.platform-hero.civic-split-hero { grid-template-columns: minmax(0,1fr) 280px; padding: 24px 0 14px; }
.platform-hero.civic-split-hero h1 { max-width: 760px; font-size: 42px; line-height: 1; letter-spacing: -1.7px; }
.platform-hero.civic-split-hero p { font-size: 15px; }
.platform-hero.civic-split-hero aside { padding: 14px; border-radius: 10px; box-shadow: none; }
.ward-evidence-shell { grid-template-columns: minmax(0,1.15fr) minmax(360px,.85fr); gap: 12px; }
.ward-map-panel,.ward-profile-card { padding: 14px; border-radius: 10px; box-shadow: none; }
.ward-evidence-map { min-height: 340px; }
.ward-profile-card h2 { font-size: 25px; }
.ward-profile-grid { grid-template-columns: repeat(4,minmax(0,1fr)); }
.ward-profile-grid article { padding: 12px 8px; }
.ward-profile-grid strong { font-size: 24px; }
.ward-context-grid { gap: 10px; }
.ward-context-grid .platform-card { padding: 15px; border-radius: 10px; }
.civic-service-page .platform-hero h1 { font-size: 42px; }
.service-tabs { max-width: 430px; margin-left: 0; }
.civic-service-metrics { display: none; }
.service-trend-layout { grid-template-columns: minmax(0,1.4fr) minmax(310px,.6fr); gap: 10px; margin-top: 10px; }
.service-trend-card,.service-glance-card { padding: 14px; border-radius: 9px; }
.service-trend-card h2,.service-glance-card h2 { font-size: 18px; }
.service-trend-chart { height: 190px; }
.model-dashboard-card { display: none; }
.civic-service-grid { grid-template-columns: minmax(0,1.5fr) minmax(300px,.5fr); gap: 10px; }
.subway-service-bridge { grid-column: 1/-1; order: 3; padding: 12px 16px; }
.service-network-map { min-height: 390px; }
.subway-hero { min-height: 185px; margin: 0 -16px 14px; padding: 22px 16px; background: linear-gradient(90deg,#f5faff 0,#dfefff 65%,#e5f2fb 100%); }
.subway-hero > div { padding: 0; }
.subway-hero h1 { max-width: 590px; font-size: 44px; line-height: .98; letter-spacing: -1.9px; }
.subway-line-summary { gap: 10px; }
.subway-line-card { padding: 13px; border-radius: 9px; box-shadow: none; }
.subway-system-layout { grid-template-columns: minmax(0,1.5fr) minmax(280px,.5fr); gap: 10px; }
.subway-progress-panel,.subway-alert-panel,.subway-civic-value,.subway-method-note { border-radius: 9px; box-shadow: none; }
.subway-civic-value { display: none; }
.civic-evidence-page .platform-hero { min-height: 170px; background: linear-gradient(90deg,#fff 0,#f4f8fb 60%,#dfeef8 100%); }
.civic-evidence-page .platform-hero h1 { font-size: 42px; }
.civic-brief-layout { grid-template-columns: minmax(0,1fr) 270px; max-width: none; }
.brief-main,.civic-evidence-pack { border-radius: 9px; box-shadow: none; }
.evidence-findings > header h2 { font-size: 27px; }
.evidence-findings > div { gap: 8px; }
.evidence-findings article { padding: 15px; border-radius: 8px; }
.evidence-findings strong { font-family: Arial,Helvetica,sans-serif; font-size: 15px; }
.evidence-findings p,.evidence-findings a { font-size: 12px; }
.evidence-visual-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
.evidence-visual-grid h2 { font-family: Arial,Helvetica,sans-serif; font-size: 18px; }
.local-stop-hero h1 { font-size: 42px; letter-spacing: -1.6px; }
.local-stop-hero { grid-template-columns: minmax(0,1fr) 320px; }
.local-question-strip { display: none; }
.local-stop-layout { grid-template-columns: 300px minmax(0,1fr); gap: 10px; }
.local-stop-card { grid-column: 1; grid-row: 1; }
.da-level-card { grid-column: 1; grid-row: 2; }
.local-map-card { grid-column: 2; grid-row: 1/span 2; }
.nearby-stop-card { grid-column: 2; grid-row: 3; }
.local-map-card .local-osm-map { min-height: 480px; }
.local-connected-panel { display: none; }

@media (max-width: 760px) {
  .civic-home-page,.civic-ward-page,.civic-service-page,.civic-evidence-page,.subway-pulse-main,.local-stop-page { width: min(100% - 20px,500px); }
  .mockup-home-hero,.platform-hero.civic-split-hero,.ward-evidence-shell,.service-trend-layout,.civic-service-grid,.subway-system-layout,.civic-brief-layout,.evidence-visual-grid,.local-stop-layout { grid-template-columns: 1fr; }
  .mockup-home-hero .civic-home-copy { min-height: 0; padding: 18px 8px; }
  .mockup-home-hero .civic-home-copy h1,.platform-hero.civic-split-hero h1,.civic-service-page .platform-hero h1,.subway-hero h1,.civic-evidence-page .platform-hero h1,.local-stop-hero h1 { font-size: 34px; letter-spacing: -1.2px; }
  .home-map-stage,.home-map-stage .civic-real-map { min-height: 280px; }
  .pulse-story-strip,.mockup-source-panel .home-source-grid,.evidence-findings > div { grid-template-columns: 1fr; }
  .route-feature-panel { grid-template-columns: 1fr; }
  .route-feature-panel::before { min-height: 180px; }
  .route-feature-copy { grid-column: 1; grid-row: 2; }
  .ward-profile-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .local-stop-card,.da-level-card,.local-map-card,.nearby-stop-card { grid-column: 1; grid-row: auto; }
  .local-stop-card { order: 1; }.local-map-card { order: 2; }.da-level-card { order: 3; }.nearby-stop-card { order: 4; }
  .local-map-card .local-osm-map { min-height: 340px; }
}

/* Mockup specification v113 */
.civic-home-page, .civic-ward-page, .civic-service-page, .civic-evidence-page, .subway-pulse-main, .route-life-page, .local-stop-page { max-width: 1540px; }
.civic-home-page h1, .civic-ward-page h1, .civic-service-page h1, .civic-evidence-page h1, .subway-pulse-main h1, .route-life-page h1, .local-stop-page h1,
.civic-home-page h2, .civic-ward-page h2, .civic-service-page h2, .civic-evidence-page h2, .subway-pulse-main h2, .route-life-page h2, .local-stop-page h2 { font-family: Georgia, "Times New Roman", serif; color: #0b2540; }
.civic-product-topbar { min-height: 68px; padding: 10px clamp(18px,3vw,46px); }
.civic-product-topbar .topbar-brand strong { font-size: 19px; }
.civic-product-topbar nav { justify-content: center; }
.civic-product-topbar > p { color: #40536a; font-size: 12px; }
.mockup-home-hero { grid-template-columns: minmax(360px,.72fr) minmax(560px,1.28fr); gap: 16px; align-items: stretch; }
.mockup-home-hero .civic-home-copy { display: grid; align-content: center; min-height: 510px; padding: clamp(30px,5vw,68px); border: 1px solid #e1e6eb; border-radius: 18px; background: #fff; }
.mockup-home-hero .civic-home-copy::after { display: none; }
.mockup-home-hero .civic-home-copy h1 { max-width: 620px; margin: 11px 0 12px; font-family: Georgia,"Times New Roman",serif; font-size: clamp(52px,5.2vw,74px); line-height: .95; letter-spacing: -3px; }
.mockup-date { margin: 0 0 8px !important; color: #0b2540 !important; font-size: 15px !important; font-weight: 900; }
.home-map-stage { position: relative; min-height: 510px; overflow: hidden; border: 1px solid #d8e1e8; border-radius: 18px; background: #eaf0f4; }
.home-map-stage .civic-real-map { width: 100%; height: 100%; min-height: 510px; border-radius: 0; }
.home-map-tabs { position: absolute; z-index: 500; top: 14px; left: 14px; display: flex; overflow: hidden; border: 1px solid #d6dee6; border-radius: 11px; background: #fff; box-shadow: 0 8px 24px #0b25401a; }
.home-map-tabs span, .home-map-tabs a { padding: 10px 15px; color: #284158; font-size: 12px; font-weight: 850; text-decoration: none; }
.home-map-tabs .active { color: #fff; background: #0b2540; }
.home-map-caption { position: absolute; z-index: 500; right: 14px; bottom: 14px; display: grid; padding: 12px 14px; border-radius: 11px; background: #fffc; box-shadow: 0 8px 26px #0b25401a; }
.home-map-caption small { margin-top: 3px; color: #53657a; }
.home-live-ribbon { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 1px; margin: 0 auto 14px; overflow: hidden; border: 1px solid #dce4eb; border-radius: 16px; background: #dce4eb; }
.home-live-ribbon article { padding: 17px 20px; background: #fff; }
.home-live-ribbon span,.home-live-ribbon strong,.home-live-ribbon small { display: block; }
.home-live-ribbon span { color: #5f6f82; font-size: 11px; font-weight: 900; text-transform: uppercase; }
.home-live-ribbon strong { margin: 7px 0 4px; color: #0b2540; font-family: Georgia,serif; font-size: 35px; }
.home-live-ribbon small { color: #6c7a89; }
.mockup-source-panel .home-source-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 10px; }
.home-source-grid span { padding: 18px; border: 1px solid #dfe6ec; border-radius: 13px; color: #0b2540; font-weight: 850; background: #f8fafc; }
.home-source-grid b { display: inline-block; width: 9px; height: 9px; margin-right: 7px; border-radius: 50%; background: #32a852; }
.home-source-grid small { color: #66768a; font-weight: 600; }
.mockup-source-panel .civic-map-legend { display: none; }
.platform-hero.civic-split-hero { grid-template-columns: minmax(0,1.5fr) minmax(260px,.5fr); align-items: end; padding: 30px 4px 20px; }
.platform-hero.civic-split-hero > div { padding: 0; border: 0; background: transparent; box-shadow: none; }
.platform-hero.civic-split-hero h1 { max-width: 920px; margin: 8px 0 11px; font-size: clamp(46px,4.8vw,68px); line-height: .96; letter-spacing: -2.4px; }
.platform-hero.civic-split-hero p { max-width: 790px; color: #53657a; font-size: 18px; }
.platform-hero.civic-split-hero aside { border-color: #cfe2f5; background: #edf6ff; }
.ward-evidence-shell { grid-template-columns: minmax(0,1.35fr) minmax(340px,.65fr); }
.ward-map-panel,.ward-profile-card { border: 1px solid #dce4eb; border-radius: 18px; background: #fff; box-shadow: 0 14px 40px #0b25400b; }
.ward-evidence-map { min-height: 520px; }
.ward-context-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
.service-trend-layout { display: grid; grid-template-columns: minmax(0,1.45fr) minmax(300px,.55fr); gap: 14px; margin: 14px 0; }
.service-trend-card,.service-glance-card { padding: 22px; }
.service-trend-card header { display: flex; justify-content: space-between; gap: 18px; }
.service-trend-card h2,.service-glance-card h2 { margin: 5px 0 7px; font-size: clamp(28px,3vw,42px); line-height: 1; }
.service-trend-card header > strong { color: #d71920; font-size: 20px; white-space: nowrap; }
.service-trend-chart { position: relative; display: grid; grid-template-columns: repeat(5,1fr); align-items: end; height: 230px; margin: 18px 0 9px; padding-top: 20px; border-bottom: 1px solid #aebdca; background: repeating-linear-gradient(to bottom,#edf1f4 0 1px,transparent 1px 54px); }
.service-trend-chart i { position: absolute; right: 3%; bottom: 40px; left: 3%; height: 120px; border-radius: 50% 45% 35% 25%; background: #dcecff; clip-path: polygon(0 90%,12% 82%,20% 40%,31% 20%,44% 31%,57% 29%,69% 15%,81% 25%,100% 7%,100% 100%,0 100%); }
.service-trend-chart b { position: absolute; right: 3%; bottom: 55px; left: 3%; height: 90px; border-bottom: 5px solid #184f87; border-radius: 50%; transform: rotate(-4deg); }
.service-trend-chart span { position: relative; color: #69798a; font-size: 11px; text-align: center; }
.service-glance-card > div { padding: 13px 0; border-top: 1px solid #e1e7ec; }
.service-glance-card b { color: #0b2540; }
.service-glance-card p { margin: 4px 0 0; color: #53657a; line-height: 1.4; }
.evidence-brief-body { background: linear-gradient(180deg,#fff 0,#fbfaf7 100%); }
.evidence-findings { margin: 16px 0; }
.evidence-findings > header h2 { margin: 5px 0 14px; font-size: clamp(34px,4vw,54px); line-height: 1; }
.evidence-findings > div { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 11px; }
.evidence-findings article { position: relative; padding: 22px; border: 1px solid #dce4eb; border-radius: 16px; background: #fff; }
.evidence-findings article > b { display: grid; width: 34px; height: 34px; place-items: center; margin-bottom: 13px; border-radius: 50%; color: #c51d25; background: #fde8e9; }
.evidence-findings strong { display: block; font-family: Georgia,serif; font-size: 21px; line-height: 1.12; }
.evidence-findings p { color: #53657a; line-height: 1.45; }
.evidence-findings a { color: #075da8; font-weight: 850; }
.evidence-visual-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 14px; }
.evidence-visual-grid > article { padding: 22px; }
.evidence-visual-grid h2 { margin: 6px 0 12px; font-size: 30px; }
.evidence-line-chart { position: relative; height: 180px; border-bottom: 1px solid #aebdca; background: repeating-linear-gradient(to bottom,#edf1f4 0 1px,transparent 1px 44px); }
.evidence-line-chart i { position: absolute; right: 5%; bottom: 28px; left: 5%; height: 100px; border-bottom: 4px solid #d71920; border-radius: 48%; transform: rotate(-8deg); }
.evidence-line-chart b { position: absolute; right: 5%; bottom: 23px; width: 12px; height: 12px; border-radius: 50%; background: #d71920; }
.evidence-line-chart span { position: absolute; bottom: 5px; color: #64748b; font-size: 11px; }
.evidence-line-chart span:last-child { right: 0; }
.evidence-reading-card dl { display: grid; gap: 0; }
.evidence-reading-card dl div { padding: 13px 0; border-top: 1px solid #e0e7ed; }
.evidence-reading-card dt { color: #0b2540; font-weight: 950; }
.evidence-reading-card dd { margin: 4px 0 0; color: #53657a; }

@media (max-width: 980px) {
  .mockup-home-hero,.service-trend-layout,.evidence-visual-grid { grid-template-columns: 1fr; }
  .mockup-home-hero .civic-home-copy { min-height: 0; }
  .evidence-findings > div { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 640px) {
  .app-topbar, .civic-product-topbar, .local-stop-topbar { display: flex; min-height: 58px; height: 58px; justify-content: space-between; overflow: visible !important; padding: 9px 14px; }
  .app-topbar .topbar-brand, .surface-access-body .topbar-brand, .platform-body .topbar-brand { display: flex; min-width: 0; flex: 1 1 auto; }
  .app-topbar .topbar-brand strong, .surface-access-body .topbar-brand strong, .platform-body .topbar-brand strong { display: block; max-width: none; font-size: 17px; }
  .app-topbar > p, .app-topbar .platform-tagline { display: none; }
  .app-topbar nav, .surface-access-body .app-topbar nav, .platform-body .app-topbar nav { position: fixed; z-index: 3000; right: 0; bottom: 0; left: 0; display: flex; width: 100%; height: 62px; max-width: none; justify-content: flex-start; gap: 0; overflow-x: auto; padding: 6px 7px max(6px,env(safe-area-inset-bottom)); border-top: 1px solid #d6e0e8; background: rgba(255,255,255,.98); box-shadow: 0 -8px 26px #0b254014; scrollbar-width: none; }
  .app-topbar nav a, .surface-access-body .app-topbar nav a, .platform-body .app-topbar nav a { display: grid; min-width: 74px; flex: 1 0 74px; place-items: center; padding: 8px 5px; border-radius: 9px; color: #40536a; font-size: 10px; text-align: center; }
  .app-topbar nav a.active { color: #d71920; background: #fff0f1; }
  .app-topbar nav a.active::after { display: none; }
  .mockup-home-hero .civic-home-copy { padding: 22px 18px; }
  .mockup-home-hero .civic-home-copy h1,.platform-hero.civic-split-hero h1 { font-size: 43px; line-height: .96; letter-spacing: -1.8px; }
  .home-map-stage,.home-map-stage .civic-real-map { min-height: 360px; }
  .home-map-caption { right: 8px; bottom: 8px; left: 8px; }
  .home-live-ribbon { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .mockup-source-panel .home-source-grid,.evidence-findings > div { grid-template-columns: 1fr; }
  .platform-hero.civic-split-hero { grid-template-columns: 1fr; padding-top: 12px; }
  .ward-evidence-map { min-height: 350px; }
  .ward-context-grid { grid-template-columns: 1fr; }
  .service-trend-card header { display: grid; }
  .service-trend-chart { height: 170px; }
}

/* Civic product system: connected evidence journeys */
:root {
  --civic-ink: #0b2540;
  --civic-muted: #53657a;
  --civic-red: #d71920;
  --civic-paper: #fbfaf7;
  --civic-line: #dce4eb;
  --civic-blue: #eaf4ff;
}
.civic-product-body, .surface-access-body { background: var(--civic-paper); color: var(--civic-ink); }
.app-topbar { border-bottom: 1px solid var(--civic-line); background: rgba(255,255,255,.96); box-shadow: 0 8px 30px #0b25400a; }
.app-topbar nav a { position: relative; border-radius: 9px; }
.app-topbar nav a.active::after { content: ""; position: absolute; right: 12px; bottom: 3px; left: 12px; height: 3px; border-radius: 4px; background: var(--civic-red); }
.platform-card, .local-stop-card, .local-map-card, .nearby-stop-card, .da-level-card, .ward-average-panel { border-color: var(--civic-line); box-shadow: 0 16px 42px #0b254009; }
.local-stop-page { max-width: 1480px; }
.local-stop-hero { padding-top: 26px; }
.local-stop-hero h1 { margin-top: 6px; color: var(--civic-ink); font-size: clamp(48px, 6vw, 78px); line-height: .92; letter-spacing: -3px; }
.local-stop-hero p { max-width: 850px; color: var(--civic-muted); font-size: clamp(17px, 1.7vw, 22px); }
.local-evidence-path { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0 0 14px; padding: 12px 16px; border: 1px solid var(--civic-line); border-radius: 13px; background: #fff; color: #718096; font-size: 13px; }
.local-evidence-path a { color: #245f9b; font-weight: 800; text-decoration: none; }
.local-evidence-path strong { color: var(--civic-ink); }
.local-question-strip { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 10px; margin-bottom: 14px; }
.local-question-strip article { display: grid; grid-template-columns: 38px 1fr; gap: 11px; align-items: center; padding: 14px; border: 1px solid var(--civic-line); border-radius: 15px; background: #fff; }
.local-question-strip article > span { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 50%; color: #fff; background: var(--civic-red); font-weight: 950; }
.local-question-strip strong, .local-question-strip small { display: block; }
.local-question-strip strong { font-size: 14px; }
.local-question-strip small { margin-top: 3px; color: var(--civic-muted); line-height: 1.3; }
.guided-access-panel { border-color: var(--civic-line); background: #fff; }
.local-map-card { overflow: hidden; }
.local-map-card .local-osm-map { min-height: 610px; }
.nearby-stop-button { transition: border-color .18s, transform .18s, box-shadow .18s; }
.nearby-stop-button:hover, .nearby-stop-button:focus-visible { border-color: var(--civic-red); box-shadow: 0 9px 20px #d7192012; transform: translateY(-1px); outline: none; }
.local-connected-panel { display: grid; grid-template-columns: minmax(280px,1.25fr) repeat(3,minmax(180px,.75fr)); gap: 12px; margin: 14px 0; padding: 22px; border: 1px solid var(--civic-line); border-radius: 20px; background: #fff; }
.local-connected-panel h2 { margin: 5px 0 7px; font-size: clamp(27px,3vw,42px); line-height: 1; letter-spacing: -1.3px; }
.local-connected-panel p { margin: 0; color: var(--civic-muted); line-height: 1.45; }
.local-connected-panel > a { display: grid; align-content: center; padding: 16px; border: 1px solid var(--civic-line); border-radius: 14px; color: var(--civic-ink); background: #f8fafc; text-decoration: none; }
.local-connected-panel > a:hover { border-color: var(--civic-red); background: #fff7f7; }
.local-connected-panel a small { margin-top: 6px; color: var(--civic-muted); line-height: 1.35; }
.route-compare-panel { padding: 22px; }
.route-compare-panel > header { display: grid; grid-template-columns: minmax(0,1fr) minmax(250px,360px); gap: 24px; align-items: end; }
.route-compare-panel h2 { margin: 5px 0 8px; color: var(--civic-ink); font-size: clamp(30px,3.5vw,48px); line-height: 1; letter-spacing: -1.6px; }
.route-compare-panel header p { max-width: 780px; margin: 0; color: var(--civic-muted); line-height: 1.45; }
.route-compare-panel label { display: grid; gap: 6px; color: var(--civic-muted); font-size: 12px; font-weight: 900; text-transform: uppercase; }
.route-compare-panel select { min-height: 48px; padding: 0 12px; border: 1px solid #cdd8e2; border-radius: 11px; color: var(--civic-ink); background: #fff; font: inherit; font-weight: 800; }
.route-compare-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 10px; margin-top: 18px; }
.route-compare-grid article { padding: 16px; border: 1px solid var(--civic-line); border-radius: 14px; background: #f8fafc; }
.route-compare-grid span, .route-compare-grid strong, .route-compare-grid small { display: block; }
.route-compare-grid span { color: var(--civic-muted); font-size: 11px; font-weight: 900; text-transform: uppercase; }
.route-compare-grid strong { margin-top: 9px; font-size: clamp(20px,2vw,30px); line-height: 1; }
.route-compare-grid strong i { margin: 0 4px; color: #8b98a8; font-size: 11px; font-style: normal; text-transform: uppercase; }
.route-compare-grid small { margin-top: 7px; color: var(--civic-muted); }
.route-connected-actions { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 14px; }
.route-connected-actions a { padding: 10px 13px; border-radius: 10px; color: #174f86; background: var(--civic-blue); font-size: 13px; font-weight: 850; text-decoration: none; }

@media (max-width: 900px) {
  .local-question-strip { grid-template-columns: 1fr; }
  .local-connected-panel { grid-template-columns: 1fr; }
  .route-compare-panel > header { grid-template-columns: 1fr; }
  .route-compare-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 640px) {
  html, body { width: 100%; max-width: 100%; overflow-x: hidden; }
  body { padding-bottom: 68px; }
  .trust-page, .platform-page, .local-stop-page { width: 100%; max-width: 100%; box-sizing: border-box; overflow-x: hidden; }
  .app-topbar { position: sticky; top: 0; z-index: 1200; }
  .app-topbar nav { scrollbar-width: none; }
  .app-topbar nav::-webkit-scrollbar { display: none; }
  .local-stop-hero { padding-top: 15px; }
  .local-stop-hero h1 { font-size: 43px; letter-spacing: -2px; }
  .local-evidence-path { flex-wrap: nowrap; overflow-x: auto; white-space: nowrap; }
  .local-stop-layout { display: flex; flex-direction: column; }
  .local-stop-card { order: 1; }
  .local-map-card { order: 2; }
  .da-level-card { order: 3; }
  .nearby-stop-card { order: 4; }
  .local-map-card .local-osm-map { min-height: 470px; }
  .local-map-card, .nearby-stop-card, .da-level-card, .ward-average-panel, .local-connected-panel { width: 100%; max-width: 100%; min-width: 0; box-sizing: border-box; }
  .map-key { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); }
  .route-compare-grid { grid-template-columns: 1fr; }
  .route-connected-actions { display: grid; }
}

/* Explicit surface-route modes and evidence-history status. */
.route-mode-badge em{color:#fff}.route-mode-badge.bus em{background:#0f6ec7}.route-mode-badge.streetcar em{background:#d71920}
.access-route-mode-label b{color:#fff}.access-route-mode-label.bus b{background:#0f6ec7}.access-route-mode-label.streetcar b{background:#d71920}
.evidence-history-card>p{max-width:720px;color:#536275;line-height:1.5}.evidence-history-card dl{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:18px 0}.evidence-history-card dl div{padding:14px;border:1px solid #dbe5ed;border-radius:10px;background:#f8fafc}.evidence-history-card dt{color:#64748b;font-size:11px;font-weight:850}.evidence-history-card dd{margin:7px 0 0;color:#0b2540;font-size:18px;font-weight:950}.evidence-history-card>a{color:#075da8;font-size:12px;font-weight:900;text-decoration:none}
@media(max-width:700px){.evidence-history-card dl{grid-template-columns:1fr}}

/* Public historical evidence */
.trends-page{max-width:1420px}.trend-trust-note{display:grid;grid-template-columns:auto 1fr auto 1fr;gap:14px 18px;align-items:start;margin:0 0 14px;padding:18px 22px;border:1px solid #cfe0ed;border-radius:14px;background:#edf6fd}.trend-trust-note strong{color:#0b2540;font-size:12px}.trend-trust-note p{margin:0;color:#53657a;font-size:12px;line-height:1.45}.trend-summary-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-bottom:14px}.trend-summary-grid article{display:grid;gap:5px;padding:22px;border:1px solid #dce4eb;border-radius:16px;background:#fff}.trend-summary-grid span{color:#53657a;font-size:11px;font-weight:900;text-transform:uppercase}.trend-summary-grid strong{font:700 40px Georgia,serif}.trend-summary-grid small{color:#68788a}.trend-route-section{padding:24px;border:1px solid #dce4eb;border-radius:18px;background:#fff}.trend-route-section>header{display:flex;justify-content:space-between;gap:20px;align-items:end;margin-bottom:18px}.trend-route-section h2{margin:0 0 5px;font:700 clamp(30px,3.3vw,46px)/1 Georgia,serif}.trend-route-section header p{margin:0;color:#53657a}.trend-route-section button{padding:12px 16px;border:1px solid #c4d2dd;border-radius:9px;color:#0b2540;background:#fff;font-weight:850}.trend-route-list{display:grid;gap:10px}.trend-route-row{display:grid;grid-template-columns:minmax(190px,1fr) 120px 145px minmax(270px,1.4fr) auto;gap:16px;align-items:center;padding:18px;border:1px solid #dce4eb;border-left:5px solid #98a7b5;border-radius:12px;background:#fbfcfd}.trend-route-row.higher{border-left-color:#257348}.trend-route-row.lower{border-left-color:#c2322c}.trend-route-row.similar{border-left-color:#2e70b3}.trend-route-row>div:first-child span{color:#a4252a;font-size:10px;font-weight:900;text-transform:uppercase}.trend-route-row h3{margin:4px 0;font:700 21px Georgia,serif}.trend-route-row small{color:#6c7a89}.trend-current,.trend-comparison{display:grid;gap:3px}.trend-current strong,.trend-comparison strong{font:700 32px Georgia,serif}.trend-current span,.trend-comparison span{color:#65758a;font-size:10px;text-transform:uppercase}.trend-reading b{font-size:13px}.trend-reading p{margin:5px 0;color:#53657a;font-size:12px;line-height:1.4}.trend-route-row>a{color:#075da8;font-size:12px;font-weight:900;text-decoration:none;white-space:nowrap}.trend-reading-guide{margin-top:14px;padding:24px}.trend-reading-guide h2{margin-top:0;font:700 30px Georgia,serif}.trend-reading-guide>div{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.trend-reading-guide article{display:grid;grid-template-columns:34px 1fr;gap:8px 12px;padding:16px;border:1px solid #dce4eb;border-radius:12px}.trend-reading-guide article>b{display:grid;grid-row:1/3;width:30px;height:30px;place-items:center;border-radius:50%;color:#fff;background:#0b2540}.trend-reading-guide article p{grid-column:2;margin:0;color:#53657a;font-size:12px;line-height:1.4}.trend-reading-guide>a{display:inline-block;margin-top:16px;color:#075da8;font-weight:850;text-decoration:none}.public-trend-card{margin:14px 0;padding:22px;border:1px solid #dce4eb;border-radius:18px;background:#fff}.public-trend-card>header{display:flex;justify-content:space-between;gap:20px;align-items:end}.public-trend-card h2{margin:5px 0;font:700 clamp(28px,3.2vw,44px)/1 Georgia,serif}.public-trend-card header p{margin:0;color:#53657a}.public-trend-card header a{color:#075da8;font-weight:850;text-decoration:none}.home-trend-list{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:18px}.home-trend-list article{padding:16px;border:1px solid #dce4eb;border-radius:12px;background:#f8fafc}.home-trend-list span,.home-trend-list strong,.home-trend-list small{display:block}.home-trend-list span{color:#a4252a;font-size:10px;font-weight:900;text-transform:uppercase}.home-trend-list strong{margin:8px 0 5px;font:700 20px Georgia,serif}.home-trend-list small{color:#53657a;line-height:1.4}.route-history-public{margin:14px 0;padding:22px}.route-history-public>header{display:flex;justify-content:space-between;gap:18px}.route-history-public h2{margin:5px 0;font-size:34px}.route-history-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:16px}.route-history-grid>div{padding:15px;border:1px solid #dce4eb;border-radius:12px;background:#f8fafc}.route-history-grid span,.route-history-grid strong,.route-history-grid small{display:block}.route-history-grid span{color:#64748b;font-size:10px;font-weight:900;text-transform:uppercase}.route-history-grid strong{margin:7px 0;font-size:25px}.route-history-grid small{color:#64748b;line-height:1.35}
@media(max-width:950px){.trend-route-row{grid-template-columns:1fr 100px 120px}.trend-reading{grid-column:1/4}.trend-route-row>a{grid-column:1/4}.home-trend-list{grid-template-columns:1fr 1fr}}
@media(max-width:640px){.trend-trust-note{grid-template-columns:1fr}.trend-summary-grid,.trend-reading-guide>div,.route-history-grid{grid-template-columns:1fr}.trend-route-section{padding:18px}.trend-route-section>header,.public-trend-card>header,.route-history-public>header{align-items:stretch;flex-direction:column}.trend-route-row{grid-template-columns:1fr 1fr}.trend-reading,.trend-route-row>a{grid-column:1/3}.home-trend-list{grid-template-columns:1fr}}

/* Transit Trends extended civic story */
.model-story-page{display:grid;gap:22px}.model-breadcrumb{display:flex;gap:10px;align-items:center;color:#64748b;font-size:12px}.model-breadcrumb a{color:#075da8;text-decoration:none}.model-story-hero,.model-chapter-hero{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(250px,.55fr);gap:34px;align-items:end;padding:34px;border:1px solid #dce4eb;border-radius:20px;background:linear-gradient(135deg,#fff 55%,#edf6fd)}.model-story-hero h1,.model-chapter-hero h1{max-width:900px;margin:7px 0 12px;color:#0b2540;font:700 clamp(42px,5vw,70px)/.98 Georgia,serif;letter-spacing:-2px}.model-story-hero p,.model-chapter-hero>div>p{max-width:820px;margin:0;color:#53657a;font-size:17px;line-height:1.55}.model-story-hero aside,.model-definition{display:grid;gap:6px;padding:20px;border:1px solid #cfe0ed;border-radius:14px;background:rgba(255,255,255,.86)}.model-story-hero aside small,.model-definition p{color:#607188;line-height:1.45}.model-question-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.model-question-grid>a{position:relative;display:grid;grid-template-rows:auto auto 1fr auto auto;min-height:270px;padding:26px;border:1px solid #dce4eb;border-radius:18px;color:#0b2540;background:#fff;text-decoration:none;transition:transform .2s,border-color .2s,box-shadow .2s}.model-question-grid>a:hover{transform:translateY(-2px);border-color:#9eb9cf;box-shadow:0 14px 28px rgba(14,39,67,.08)}.model-question-grid>a>span{color:#a4252a;font-size:11px;font-weight:900;text-transform:uppercase}.model-question-grid h2{margin:10px 0;font:700 clamp(28px,3vw,42px)/1.02 Georgia,serif}.model-question-grid p{margin:0 0 20px;color:#53657a;line-height:1.5}.model-question-grid b{color:#075da8}.model-state{justify-self:start;margin-top:18px;padding:7px 10px;border-radius:999px;font-size:10px;font-weight:850}.model-state.active{color:#176a3a;background:#e6f5eb}.model-state.developing{color:#8b5b00;background:#fff4d7}.model-overview-strip{display:grid;grid-template-columns:repeat(3,minmax(130px,.45fr)) minmax(300px,1.4fr);gap:0;border:1px solid #dce4eb;border-radius:16px;background:#fff;overflow:hidden}.model-overview-strip>div,.model-overview-strip>p{margin:0;padding:22px;border-right:1px solid #e4e9ee}.model-overview-strip span,.model-overview-strip strong{display:block}.model-overview-strip span{color:#65758a;font-size:10px;font-weight:850;text-transform:uppercase}.model-overview-strip strong{margin-top:7px;font:700 34px Georgia,serif}.model-overview-strip p{border:0;color:#53657a;line-height:1.5}.model-practice-note{padding:30px;border:1px solid #dce4eb;border-radius:18px;background:#f8fafc}.model-practice-note h2{margin:7px 0;font:700 34px Georgia,serif}.model-practice-note p{max-width:980px;color:#53657a;line-height:1.55}.model-practice-note>div{display:flex;flex-wrap:wrap;gap:12px 24px;margin-top:18px}.model-practice-note a{color:#075da8;font-weight:800;text-decoration:none}.model-definition>span{color:#a4252a;font-size:10px;font-weight:900;text-transform:uppercase}.model-definition>strong{font:700 25px Georgia,serif}.model-definition p{margin:0}.model-status-banner{display:grid;grid-template-columns:auto 1fr;gap:8px 24px;padding:18px 22px;border:1px solid #b9dfc8;border-radius:14px;background:#eef9f2}.model-status-banner b{color:#176a3a}.model-status-banner p{margin:0;color:#53657a}.model-status-banner.estimated{border-color:#d8d0ae;background:#fffaf0}.model-status-banner.estimated b{color:#7d5900}.model-section-heading{display:flex;justify-content:space-between;align-items:end}.model-section-heading h2{margin:6px 0;font:700 38px Georgia,serif}.model-section-heading p{margin:0;color:#53657a}.model-route-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:16px}.model-route-grid article{display:grid;align-content:start;padding:20px;border:1px solid #dce4eb;border-radius:15px;background:#fff}.model-route-grid article>span{color:#a4252a;font-size:10px;font-weight:900;text-transform:uppercase}.model-route-grid h3{margin:6px 0 18px;font:700 24px Georgia,serif}.model-route-grid strong{font:700 32px Georgia,serif}.model-route-grid p,.model-route-grid small{color:#53657a;line-height:1.4}.model-route-grid a{margin-top:18px;color:#075da8;font-weight:800;text-decoration:none}.model-explainer-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.model-explainer-grid article{padding:24px;border:1px solid #dce4eb;border-radius:15px;background:#fff}.model-explainer-grid span{color:#a4252a;font-size:10px;font-weight:900;text-transform:uppercase}.model-explainer-grid h2{margin:8px 0;font:700 27px Georgia,serif}.model-explainer-grid p{margin:0;color:#53657a;line-height:1.5}.model-chapter-nav{display:flex;justify-content:space-between;gap:20px;padding:20px 0}.model-chapter-nav a{color:#075da8;font-weight:850;text-decoration:none}.journey-model-visual{display:grid;grid-template-columns:1.2fr 1fr;gap:28px;align-items:center;padding:30px;border:1px solid #dce4eb;border-radius:18px;background:#fff}.journey-model-line{display:flex;align-items:center;justify-content:center}.journey-model-line span{display:grid;width:74px;height:74px;place-items:center;border:2px solid #cc1f2f;border-radius:50%;color:#0b2540;background:#fff;font-size:11px;font-weight:900}.journey-model-line i{width:32px;height:3px;background:#2f68b5}.journey-model-visual h2{margin:0;font:700 34px Georgia,serif}.journey-model-visual p{color:#53657a;line-height:1.55}.journey-model-visual a,.community-model-path a{color:#075da8;font-weight:850;text-decoration:none}.community-model-path{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.community-model-path article{padding:25px;border:1px solid #dce4eb;border-radius:16px;background:#fff}.community-model-path article>span{display:grid;width:34px;height:34px;place-items:center;border-radius:50%;color:#fff;background:#cc1f2f;font-weight:900}.community-model-path h2{font:700 27px Georgia,serif}.community-model-path p{color:#53657a;line-height:1.5}
@media(max-width:900px){.model-story-hero,.model-chapter-hero,.journey-model-visual{grid-template-columns:1fr}.model-overview-strip{grid-template-columns:repeat(3,1fr)}.model-overview-strip>p{grid-column:1/-1;border-top:1px solid #e4e9ee}.model-route-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.model-story-page{gap:16px}.model-story-hero,.model-chapter-hero{padding:22px}.model-story-hero h1,.model-chapter-hero h1{font-size:42px}.model-question-grid,.model-route-grid,.model-explainer-grid,.community-model-path{grid-template-columns:1fr}.model-question-grid>a{min-height:0}.model-overview-strip{grid-template-columns:1fr}.model-overview-strip>div,.model-overview-strip>p{border-right:0;border-bottom:1px solid #e4e9ee}.model-status-banner{grid-template-columns:1fr}.journey-model-line span{width:54px;height:54px;font-size:9px}.journey-model-line i{width:13px}.model-chapter-nav{align-items:flex-start;flex-direction:column}}

/* Transit Trends story landing */
.trends-story-home{background:linear-gradient(180deg,#f5f9fc 0,#fff 420px)}.trends-narrative-hero{position:relative;display:grid;grid-template-columns:minmax(0,1.25fr) minmax(360px,.75fr);gap:50px;align-items:center;padding:54px 48px;border:1px solid #d9e4ec;border-radius:24px;background:#fff;overflow:hidden}.trends-narrative-hero:before{position:absolute;content:"";width:330px;height:330px;right:-120px;top:-170px;border:70px solid #e5f2fa;border-radius:50%}.trends-hero-copy{position:relative;z-index:1}.trends-hero-copy h1{max-width:850px;margin:10px 0 16px;color:#0a2440;font:700 clamp(48px,5.7vw,78px)/.98 Georgia,serif;letter-spacing:-2.5px}.trends-hero-copy>p{max-width:780px;margin:0;color:#52677d;font-size:18px;line-height:1.55}.trends-hero-copy>a{display:inline-flex;gap:18px;margin-top:26px;padding:13px 18px;border-radius:8px;color:#fff;background:#cc1f2f;font-weight:850;text-decoration:none}.trends-pulse-story{position:relative;z-index:1;display:grid;grid-template-columns:1fr 74px 1fr;align-items:center;padding:25px;border:1px solid #cfe0eb;border-radius:18px;background:linear-gradient(145deg,#f8fbfd,#eaf5fb)}.trends-pulse-story>div span,.trends-pulse-story>div strong,.trends-pulse-story>div small{display:block}.trends-pulse-story>div span{color:#a4252a;font-size:10px;font-weight:900;text-transform:uppercase}.trends-pulse-story>div strong{margin:7px 0;font:700 22px Georgia,serif}.trends-pulse-story>div small{color:#62758a;line-height:1.35}.trends-pulse-story>i{position:relative;height:4px;background:linear-gradient(90deg,#cc1f2f,#2f68b5)}.trends-pulse-story>i b{position:absolute;top:50%;width:9px;height:9px;border:2px solid #fff;border-radius:50%;background:#2f68b5;transform:translateY(-50%)}.trends-pulse-story>i b:nth-child(1){left:5%}.trends-pulse-story>i b:nth-child(2){left:35%}.trends-pulse-story>i b:nth-child(3){left:65%}.trends-pulse-story>i b:nth-child(4){right:5%}.trends-pulse-story>p{display:grid;grid-column:1/-1;grid-template-columns:auto 1fr;gap:3px 9px;margin:24px -5px -5px;padding:15px;border-top:1px solid #d4e3ec}.trends-pulse-story>p .live-dot{grid-row:1/3}.trends-pulse-story>p b{font-size:12px}.trends-pulse-story>p small{color:#64758a;font-size:11px}.trends-question-intro{padding:26px 4px 4px}.trends-question-intro h2{margin:6px 0;color:#0a2440;font:700 clamp(36px,4vw,54px)/1 Georgia,serif}.trends-question-intro p{max-width:760px;margin:0;color:#5a6c80;font-size:16px;line-height:1.5}.themed-question-grid>a{grid-template-columns:54px 1fr;grid-template-rows:auto auto 1fr auto auto;column-gap:16px;padding:26px 28px 25px;border-top:5px solid var(--chapter-color,#cc1f2f);background:linear-gradient(145deg,#fff 65%,var(--chapter-wash,#f6f8fa))}.themed-question-grid .question-mark{display:grid;grid-row:1/3;width:48px;height:48px;place-items:center;border-radius:50%;color:#fff;background:var(--chapter-color,#cc1f2f);font-style:normal;font-weight:900}.themed-question-grid>a>span,.themed-question-grid h2,.themed-question-grid p,.themed-question-grid>a>b,.themed-question-grid .model-state{grid-column:2}.themed-question-grid h2{font-size:clamp(28px,2.7vw,39px)}.themed-question-grid>a.regularity{--chapter-color:#c52c32;--chapter-wash:#fff3f3}.themed-question-grid>a.journey-time{--chapter-color:#1b66a8;--chapter-wash:#eef6fd}.themed-question-grid>a.availability{--chapter-color:#207c51;--chapter-wash:#eef9f2}.themed-question-grid>a.community{--chapter-color:#7252a3;--chapter-wash:#f5f1fb}.trends-record{display:grid;grid-template-columns:minmax(290px,.8fr) minmax(0,1.2fr);gap:40px;align-items:center;padding:34px;border-radius:20px;color:#fff;background:#0a2946}.trends-record-copy h2{margin:7px 0;font:700 38px Georgia,serif}.trends-record-copy p{margin:0;color:#c9d8e5;line-height:1.5}.trends-record .eyebrow{color:#8dc6ed}.trends-record-numbers{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:#3b556d}.trends-record-numbers>div{padding:24px;background:#123654}.trends-record-numbers strong,.trends-record-numbers span{display:block}.trends-record-numbers strong{font:700 46px Georgia,serif}.trends-record-numbers span{margin-top:6px;color:#bcd0df;font-size:10px;font-weight:850;text-transform:uppercase}.trends-method-note{border-left:6px solid #cc1f2f;background:#fff}.trends-method-note h2{font-size:38px}
@media(max-width:980px){.trends-narrative-hero{grid-template-columns:1fr;padding:38px}.trends-pulse-story{max-width:650px}.trends-record{grid-template-columns:1fr}.themed-question-grid>a{min-height:290px}}
@media(max-width:640px){.trends-story-home .model-story-page{padding-top:20px}.trends-narrative-hero{gap:28px;padding:25px 20px;border-radius:18px}.trends-hero-copy h1{font-size:43px;letter-spacing:-1.4px}.trends-hero-copy>p{font-size:15px}.trends-pulse-story{grid-template-columns:1fr 42px 1fr;padding:18px 14px}.trends-pulse-story>div strong{font-size:18px}.trends-pulse-story>div small{font-size:10px}.trends-question-intro{padding-top:12px}.themed-question-grid>a{grid-template-columns:44px 1fr;min-height:0;padding:22px 18px}.themed-question-grid .question-mark{width:40px;height:40px}.themed-question-grid h2{font-size:29px}.trends-record{gap:24px;padding:24px 20px}.trends-record-numbers{grid-template-columns:1fr}.trends-record-numbers>div{padding:18px}.trends-record-numbers strong{font-size:38px}.trends-method-note h2{font-size:31px}}

.trends-rhythm-feature{display:grid;grid-template-columns:minmax(0,1fr) minmax(320px,.7fr);gap:34px;align-items:center;padding:30px 34px;border:1px solid #cfdde8;border-left:7px solid #2868ad;border-radius:18px;color:#0b2540;background:linear-gradient(120deg,#fff 50%,#edf6fd);text-decoration:none}.trends-rhythm-feature span,.availability-rhythm-link span{color:#a4252a;font-size:10px;font-weight:900;text-transform:uppercase}.trends-rhythm-feature h2{margin:7px 0;font:700 clamp(31px,3.5vw,48px)/1 Georgia,serif}.trends-rhythm-feature p{max-width:750px;margin:0 0 17px;color:#53657a;line-height:1.5}.trends-rhythm-feature b,.availability-rhythm-link b{color:#075da8}.trends-rhythm-feature figure{display:flex;height:120px;gap:7px;align-items:end;margin:0;padding:18px;border-bottom:2px solid #9db4c6;background:linear-gradient(180deg,transparent,#fff8)}.trends-rhythm-feature figure i{flex:1;height:var(--h,20%);border-radius:5px 5px 0 0;background:#2868ad}.trends-rhythm-feature figure i:nth-child(1){--h:18%}.trends-rhythm-feature figure i:nth-child(2){--h:11%}.trends-rhythm-feature figure i:nth-child(3){--h:28%}.trends-rhythm-feature figure i:nth-child(4){--h:62%}.trends-rhythm-feature figure i:nth-child(5){--h:84%}.trends-rhythm-feature figure i:nth-child(6){--h:73%}.trends-rhythm-feature figure i:nth-child(7){--h:68%}.trends-rhythm-feature figure i:nth-child(8){--h:75%}.trends-rhythm-feature figure i:nth-child(9){--h:91%}.trends-rhythm-feature figure i:nth-child(10){--h:80%}.trends-rhythm-feature figure i:nth-child(11){--h:56%}.trends-rhythm-feature figure i:nth-child(12){--h:31%}.availability-rhythm-link{display:grid;grid-template-columns:1fr auto;gap:5px 25px;align-items:center;padding:20px 24px;border:1px solid #cfe0ed;border-radius:14px;color:#0b2540;background:#edf6fd;text-decoration:none}.availability-rhythm-link strong{font:700 23px Georgia,serif}.availability-rhythm-link b{grid-column:2;grid-row:1/3}.availability-rhythm-link span{grid-column:1}
@media(max-width:760px){.trends-rhythm-feature{grid-template-columns:1fr;padding:24px 20px}.trends-rhythm-feature figure{height:90px}.availability-rhythm-link{grid-template-columns:1fr}.availability-rhythm-link b{grid-column:1;grid-row:auto}}

.journey-history-section{padding:28px;border:1px solid #dce4eb;border-radius:18px;background:#f7fafc}.journey-history-section>header{max-width:900px}.journey-history-section h2{margin:6px 0;font:700 clamp(34px,4vw,50px)/1 Georgia,serif}.journey-history-section header p{margin:0;color:#53657a;line-height:1.5}.journey-history-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:22px}.journey-history-grid article{display:grid;align-content:start;padding:20px;border:1px solid #dce4eb;border-top:4px solid #2f68b5;border-radius:13px;background:#fff}.journey-history-grid article>span{min-height:34px;color:#0b2540;font-size:12px;font-weight:850}.journey-history-grid article>strong{margin-top:12px;font:700 36px Georgia,serif}.journey-history-grid article>small{color:#64758a}.journey-history-grid dl{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;margin:18px 0 0}.journey-history-grid dl div{padding:9px 6px;border-radius:6px;background:#f2f6f9}.journey-history-grid dt{color:#68798a;font-size:8px;text-transform:uppercase}.journey-history-grid dd{margin:4px 0 0;font-size:11px;font-weight:850}.journey-history-grid p{margin:15px 0;color:#53657a;font-size:11px;line-height:1.4}.journey-history-grid a{margin-top:auto;color:#075da8;font-size:12px;font-weight:850;text-decoration:none}.journey-history-section>aside{display:flex;gap:14px;margin-top:15px;padding:15px;border-radius:9px;background:#eaf3f9;color:#4f657a;font-size:12px;line-height:1.45}.journey-history-section>aside b{color:#0b2540;white-space:nowrap}
@media(max-width:900px){.journey-history-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.journey-history-section{padding:22px 18px;border-right:0;border-left:0;border-radius:0}.journey-history-grid{grid-template-columns:1fr}.journey-history-section>aside{align-items:flex-start;flex-direction:column}}

/* Service availability: make the live number and status scannable at a glance. */
.trend-route-row {
  grid-template-columns: minmax(205px, 1fr) 138px 155px minmax(300px, 1.35fr) auto;
  gap: 14px;
  padding: 14px;
  background: #fff;
  box-shadow: 0 5px 16px rgba(11, 37, 64, .045);
}
.trend-current,
.trend-comparison {
  align-content: center;
  min-height: 96px;
  padding: 13px 15px;
  border-radius: 11px;
}
.trend-current {
  position: relative;
  color: #fff;
  background: #0b2d50;
  box-shadow: 0 8px 18px rgba(11, 45, 80, .16);
  overflow: hidden;
}
.trend-current::after {
  position: absolute;
  content: "";
  width: 58px;
  height: 58px;
  right: -22px;
  bottom: -24px;
  border: 12px solid rgba(255, 255, 255, .09);
  border-radius: 50%;
}
.trend-comparison {
  border: 1px solid #c8dbe9;
  background: #eef6fb;
}
.trend-current strong,
.trend-comparison strong {
  position: relative;
  z-index: 1;
  font-size: 44px;
  line-height: .9;
}
.trend-current strong { color: #fff; }
.trend-comparison strong { color: #143c63; }
.trend-current span,
.trend-comparison span {
  position: relative;
  z-index: 1;
  margin-top: 7px;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .5px;
}
.trend-current span { color: #dbeaf5; }
.trend-comparison span { color: #526b82; }
.trend-reading {
  min-height: 96px;
  padding: 13px 16px;
  border: 1px solid #cfe1d6;
  border-radius: 11px;
  background: #f1f8f3;
}
.trend-reading b {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 10px;
  border-radius: 999px;
  color: #fff;
  background: #24764a;
  font-size: 11px;
  letter-spacing: .15px;
}
.trend-reading b::before {
  content: "\2713";
  display: grid;
  width: 16px;
  height: 16px;
  place-items: center;
  border-radius: 50%;
  color: #24764a;
  background: #fff;
  font-size: 10px;
}
.trend-reading p { margin: 8px 0 5px; color: #294d3b; }
.trend-reading small { color: #577064; }
.trend-route-row.higher .trend-reading {
  border-color: #c8dced;
  background: #eff6fc;
}
.trend-route-row.higher .trend-reading b { background: #24679c; }
.trend-route-row.higher .trend-reading b::before { content: "\2191"; color: #24679c; }
.trend-route-row.lower .trend-reading {
  border-color: #edcfcc;
  background: #fff4f2;
}
.trend-route-row.lower .trend-reading b { background: #b43b34; }
.trend-route-row.lower .trend-reading b::before { content: "\2193"; color: #b43b34; }
@media (max-width: 1050px) {
  .trend-route-row { grid-template-columns: minmax(190px, 1fr) 138px 155px; }
  .trend-reading,
  .trend-route-row > a { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .trend-route-row { grid-template-columns: 1fr 1fr; padding: 13px; }
  .trend-route-row > div:first-child { grid-column: 1 / -1; }
  .trend-current,
  .trend-comparison { min-height: 88px; }
  .trend-current strong,
  .trend-comparison strong { font-size: 39px; }
  .trend-reading,
  .trend-route-row > a { grid-column: 1 / -1; }
}

/* Passenger waiting and reliability framework */
.model-reliability-framework{padding:30px;border:1px solid #dce4eb;border-radius:18px;background:#fff}.model-reliability-framework>header{display:flex;justify-content:space-between;gap:28px;align-items:end}.model-reliability-framework>header h2,.model-readiness-ladder h2{max-width:780px;margin:7px 0;font:700 clamp(30px,4vw,46px)/1.02 Georgia,serif}.model-reliability-framework>header p{max-width:820px;margin:0;color:#53657a;line-height:1.55}.model-reliability-framework>header a{flex:0 0 auto;color:#075da8;font-weight:850;text-decoration:none}.model-reliability-paths{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:25px}.model-reliability-paths article{padding:25px;border:1px solid #d8e3ec;border-top:6px solid #2f68b5;border-radius:15px;background:#f9fbfd}.model-reliability-paths article.scheduled{border-top-color:#d4931d}.model-reliability-paths article>span,.model-readiness-ladder article>span{color:#a4252a;font-size:10px;font-weight:900;letter-spacing:.06em;text-transform:uppercase}.model-reliability-paths h3{margin:9px 0;font:700 29px/1.08 Georgia,serif}.model-reliability-paths p,.model-reliability-paths dd,.model-reliability-framework>aside p,.model-readiness-ladder p{color:#53657a;line-height:1.5}.model-reliability-paths dl{margin:20px 0 0}.model-reliability-paths dl>div{padding:12px 0;border-top:1px solid #dce4eb}.model-reliability-paths dt{color:#0b2540;font-size:11px;font-weight:900;text-transform:uppercase}.model-reliability-paths dd{margin:4px 0 0}.model-reliability-framework>aside{display:grid;grid-template-columns:180px 1fr;gap:20px;margin-top:16px;padding:18px 20px;border-left:5px solid #cc1f2f;background:#fff5f3}.model-reliability-framework>aside p{margin:0}.model-readiness-ladder{padding:28px;border:1px solid #dce4eb;border-radius:18px;background:#f8fafc}.model-readiness-ladder>div{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:20px}.model-readiness-ladder article{position:relative;padding:22px;border:1px solid #dce4eb;border-radius:14px;background:#fff}.model-readiness-ladder article>b{display:grid;width:34px;height:34px;place-items:center;border-radius:50%;color:#fff;background:#27804b}.model-readiness-ladder article.building>b{background:#d4931d}.model-readiness-ladder article.validation>b{background:#b33236}.model-readiness-ladder article>span{display:block;margin-top:15px}.model-readiness-ladder h3{margin:7px 0;font:700 24px Georgia,serif}.model-readiness-ladder p{margin:0}
@media(max-width:900px){.model-reliability-framework>header{align-items:flex-start;flex-direction:column}.model-reliability-paths{grid-template-columns:1fr}}
@media(max-width:640px){.model-reliability-framework,.model-readiness-ladder{padding:21px}.model-reliability-paths article{padding:20px}.model-reliability-paths h3{font-size:25px}.model-reliability-framework>aside{grid-template-columns:1fr}.model-readiness-ladder>div{grid-template-columns:1fr}}