:root {
  --ink: #17272c;
  --ink-soft: #304147;
  --cream: #f8f3e9;
  --paper: #fffdf8;
  --mist: #e5e8e2;
  --line: #c0c9c3;
  --purple: #70499d;
  --purple-dark: #45305d;
  --magenta: #ba4c86;
  --yellow: #ffd15d;
  --yellow-dark: #b47d11;
  --orange: #f3a24a;
  --orange-dark: #bd641f;
  --green: #357e70;
  --red: #cd6952;
  --heading-padding: clamp(16px, min(3vw, 5vh), 42px);
  --section-space: var(--heading-padding);
  --subheading-padding: 14px;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --serif: Iowan Old Style, Palatino Linotype, Book Antiqua, Palatino, Georgia, serif;
  --contactless-width: 68px;
  --contactless-height: 98px;
  --contactless-inset: 14px;
  --contactless-gutter: 86px;
  --contactless-gutter-tight: 82px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
/* Full-viewport scroll snapping: each section = one viewport height, discrete
   scroll between them. Sections whose content exceeds the viewport still
   scroll internally (overflow-y: auto on each section). */
/* html must not scroll -- only body scrolls, so body is the real snap
   container. If html can also scroll (the browser default) the snap type on
   body is bypassed and you get ordinary continuous scrolling. */
html { height: 100%; overflow: hidden; }
body { height: 100%; margin: 0; overflow-y: scroll; scroll-snap-type: y mandatory; color: var(--ink); background: var(--cream); font-family: var(--sans); line-height: 1.5; }
button, a { font: inherit; }
button { cursor: pointer; }
a { color: inherit; }
.wrap { width: min(1180px, calc(100% - 48px)); margin: 0 auto; }
.skip-link { position: fixed; z-index: 20; top: 10px; left: 10px; padding: 8px 12px; border: 0; transform: translateY(-130%); color: var(--ink); background: var(--yellow); font-family: inherit; font-size: inherit; font-weight: 800; cursor: pointer; }
.skip-link:focus { transform: translateY(0); }
h1, h2, .display-copy { margin: 0; font-family: var(--serif); font-weight: 500; letter-spacing: -.055em; line-height: .95; }
h1 { max-width: none; font-size: clamp(38px, 5.3vw, 78px); white-space: nowrap; }
.hero h1 { color: var(--cream); }
h1 em, h2 em, .display-copy em { color: var(--yellow); font-style: normal; }
h2 { font-size: clamp(32px, 5.6vw, 78px); }
.hero { position: relative; display: flex; flex-direction: column; height: 100dvh; overflow: hidden; scroll-snap-align: start; color: var(--cream); background: var(--ink); }
.hero-copy { position: relative; z-index: 2; padding-top: var(--heading-padding); }
.hero-intro { max-width: none; margin: var(--subheading-padding) 0 0; color: #d8e1de; font-size: clamp(12px, 1.9vw, 24px); white-space: nowrap; }
.need-strip { display: grid; width: fit-content; max-width: 100%; margin-top: 15px; padding: 8px 0; overflow: hidden; border-top: 1px solid #60716d; border-bottom: 1px solid #60716d; color: var(--yellow); font-family: var(--mono); font-size: clamp(10px, 1.1vw, 14px); font-weight: 800; letter-spacing: .07em; }
/* Reserve the width of the longest rotating question. Both rules therefore
   share one stable endpoint derived from the copy instead of an arbitrary
   pixel width, while the live question can animate in the same grid cell. */
.need-strip::after { grid-area: 1 / 1; visibility: hidden; content: "CAN I MAKE MY DOCTOR’S APPOINTMENT?"; white-space: nowrap; }
.need-strip strong { grid-area: 1 / 1; white-space: nowrap; }

.train-scene { position: relative; flex: 1 1 0; min-height: 220px; margin-top: 15px; overflow: hidden; }
#departure-canvas { display: block; width: 100%; height: 100%; contain: paint; }
.guided-tour-start { position: absolute; z-index: 4; top: var(--heading-padding); right: 0; display: grid; gap: 8px; width: 124px; padding: 0; place-items: center; color: var(--cream); border: 0; background: transparent; outline: 3px solid transparent; outline-offset: 6px; transform-origin: center; transition: opacity .25s ease, transform .2s ease, outline-color .15s ease; }
.guided-tour-start-icon { display: grid; width: 82px; height: 82px; flex: 0 0 auto; place-items: center; border: 3px solid var(--yellow); border-radius: 50%; background: rgba(14, 29, 33, .9); box-shadow: 0 0 0 8px rgba(255, 209, 93, .11), 0 12px 30px rgba(0, 0, 0, .32); }
.guided-tour-start-icon svg { display: block; width: 50px; height: 50px; margin-left: 4px; }
.guided-tour-start-label { padding: 8px 10px 7px; color: var(--ink); background: var(--yellow); font-family: var(--mono); font-size: 11px; font-weight: 850; letter-spacing: .07em; line-height: 1; text-transform: uppercase; white-space: nowrap; }
.guided-tour-start:hover { transform: scale(1.05); }
.guided-tour-start:focus-visible { outline-color: #fff; }
body.guided-run-active .guided-tour-start { opacity: 0; pointer-events: none; transform: scale(.86); }

.guided-tour-hud { --guided-color: #42c68a; position: fixed; z-index: 80; right: 0; bottom: 0; left: 0; height: 10px; visibility: hidden; opacity: 0; pointer-events: none; transition: opacity .2s ease, visibility .2s; }
body.guided-run-active .guided-tour-hud { visibility: visible; opacity: 1; }
body.guided-run-active main { -webkit-user-select: none; user-select: none; }
.guided-tour-meta { position: absolute; right: 18px; bottom: 18px; display: flex; gap: 18px; align-items: center; max-width: calc(100vw - 36px); padding: 9px 10px 9px 13px; color: var(--cream); border: 1px solid rgba(255, 255, 255, .2); background: rgba(14, 29, 33, .94); box-shadow: 0 9px 24px rgba(0, 0, 0, .25); }
.guided-tour-meta > div { display: grid; gap: 2px; min-width: 0; }
.guided-tour-meta strong, .guided-tour-meta span { white-space: nowrap; }
.guided-tour-meta strong { overflow: hidden; font-family: var(--mono); font-size: 10px; letter-spacing: .04em; text-overflow: ellipsis; text-transform: uppercase; }
.guided-tour-meta > div > span { color: var(--guided-color); font-family: var(--mono); font-size: 9px; font-weight: 800; text-transform: uppercase; }
.guided-tour-hint { color: #c7d5d0; font-family: var(--mono); font-size: 9px; font-weight: 750; letter-spacing: .025em; text-transform: uppercase; }
.guided-tour-stop { display: grid; width: 32px; height: 32px; flex: 0 0 auto; padding: 0; place-items: center; color: var(--cream); border: 1px solid #71827d; background: transparent; pointer-events: auto; font-size: 24px; font-weight: 400; line-height: 1; }
.guided-tour-stop:hover, .guided-tour-stop:focus-visible { border-color: var(--guided-color); outline: 2px solid var(--guided-color); outline-offset: 2px; }
.guided-tour-progress { position: absolute; right: 0; bottom: 0; left: 0; height: 10px; overflow: hidden; background: rgba(14, 29, 33, .82); }
.guided-tour-progress > span { display: block; width: 100%; height: 100%; background: var(--guided-color); box-shadow: 0 0 14px var(--guided-color); transform: scaleX(0); transform-origin: left center; will-change: transform, background-color; }
body.guided-run-fast .guided-tour-meta { border-color: var(--guided-color); }
body.guided-run-fast .guided-tour-hint { color: var(--guided-color); }
.departure-followup { position: absolute; z-index: 3; top: var(--platform-card-center, 82%); right: auto; bottom: auto; left: 50%; display: flex; gap: 12px; align-items: center; width: fit-content; max-width: calc(100% - 48px); padding: 11px 24px; visibility: hidden; color: #dce7e3; border: 1px solid #61736f; background: rgba(14, 29, 33, .94); opacity: 0; transform: translate(-50%, -50%) translateY(10px); transition: opacity .4s ease, transform .4s ease, visibility .4s; }
.departure-followup.visible { visibility: visible; opacity: 1; transform: translate(-50%, -50%); }
.departure-followup p { width: min(490px, 58vw); margin: 0; font-family: var(--sans); font-size: 16px; line-height: 1.5; text-align: center; }
.departure-followup p strong { color: var(--yellow); font-weight: 600; }
.departure-followup button { display: flex; flex: 0 0 auto; gap: 12px; align-items: center; justify-content: center; height: 58px; padding: 0 15px; color: var(--ink); border: 0; border-radius: 0; background: var(--yellow); outline: 3px solid transparent; outline-offset: 3px; transition: outline-color .15s ease; line-height: 1; }
.departure-followup button span { font-family: var(--mono); font-size: 19px; font-weight: 850; letter-spacing: .025em; text-transform: uppercase; }
.departure-followup button b { display: flex; align-items: center; justify-content: center; font-size: 36px; line-height: 1; }
.departure-followup button:hover, .departure-followup button:focus-visible { outline-color: #fff; }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.gradient-choice, .journey-board button, .status-tabs button, .stop-button { border: 0; border-radius: 0; }

/* Shared small control chip. One definition for every scene-level playback or
   utility control, so colour, size, type, icon, hover, and focus can never
   drift between sections. Structure:
     <button class="chip-control">
       <span class="chip-control-action">REPLAY</span>
       <span class="chip-control-symbol" aria-hidden="true"><svg class="icon-play">...</svg></span>
     </button>
   Icons are inline SVG, not Unicode glyphs -- characters like ▶/⏭ render
   with emoji presentation by default on several mobile platforms, which
   made icons look different device to device. Internal rules are
   deliberately two-class selectors: a chip dropped inside a section that
   styles `button span` (the hero card did) must not inherit that section's
   font size or family, which would resize the icon unexpectedly. */
.chip-control { display: inline-flex; gap: 5px; height: 30px; flex: 0 0 auto; padding: 1px 8px 0; align-items: center; justify-content: center; color: #65716e; border: 1px solid #b7c0bb; background: rgba(248, 249, 246, .84); font-family: var(--mono); font-size: 10px; font-weight: 800; letter-spacing: .025em; line-height: 1; text-transform: uppercase; transition: color .2s ease, border-color .2s ease, background .2s ease; }
.chip-control .chip-control-action { font-family: inherit; font-size: inherit; font-weight: inherit; letter-spacing: inherit; line-height: inherit; text-transform: inherit; }
.chip-control .chip-control-symbol { display: inline-flex; align-items: center; font-family: var(--sans); font-size: 11px; font-weight: 400; line-height: 1; }
/* Plain Unicode glyphs like ▶/⏭/↓ render with emoji presentation by default
   on several mobile platforms, so every icon on the page is a hand-drawn
   inline SVG instead -- guaranteed identical rendering everywhere. */
.icon-play, .icon-skip, .icon-arrow-down { display: block; width: 11px; height: 11px; flex: 0 0 auto; color: currentColor; }
.icon-arrow-down { width: 1em; height: 1em; }
.journey-sequence-symbol .icon-play { display: none; }
.journey-sequence-symbol[data-state="replay"] .icon-skip { display: none; }
.journey-sequence-symbol[data-state="replay"] .icon-play { display: block; }
.chip-control:hover { color: var(--purple-dark); border-color: var(--purple); }
.chip-control:focus-visible { outline: 3px solid var(--yellow-dark); outline-offset: 2px; }
.chip-control.is-active { color: var(--paper); border-color: var(--purple); background: var(--purple); }

/* Hero replay: the visible control is the canvas LED module beside the platform
   sign. This is its keyboard/AT equivalent, shown only on focus. */
.departure-replay { position: absolute; z-index: 5; right: 14px; bottom: 14px; visibility: hidden; opacity: 0; pointer-events: none; transition: opacity .2s ease; }
.departure-replay.is-visible { visibility: visible; pointer-events: auto; }
.departure-replay.is-visible:focus-visible { opacity: 1; }

.split { display: grid; grid-template-columns: .67fr 1.33fr; gap: 48px; }
.display-copy { max-width: 820px; font-size: clamp(30px, 3.4vw, 50px); }
.section { height: 100dvh; padding: var(--heading-padding) 0 var(--section-space); overflow-x: hidden; overflow-y: auto; scroll-snap-align: start; }
.section-heading { max-width: 950px; margin-bottom: 52px; }
.section-heading h2 { max-width: 820px; }
.section-heading > div > p { max-width: 650px; margin: var(--subheading-padding) 0 0; color: #4d5d61; font-size: 17px; }
.journey { --section-bg: var(--paper); display: flex; flex-direction: column; padding-bottom: var(--heading-padding); background: var(--paper); }
.journey > .wrap { flex: 1 1 0; display: flex; flex-direction: column; min-height: 0; }
.journey-heading { display: block; max-width: 950px; }
.journey-heading h1 { max-width: 900px; white-space: normal; }
.journey-subtitle { max-width: 720px; margin: var(--subheading-padding) 0 0; color: var(--purple); font-size: clamp(14px, 1.5vw, 19px); font-weight: 650; line-height: 1.35; }
.journey-intro-below { max-width: 900px; margin: 24px auto 0; color: #4d5d61; font-size: clamp(11px, 1.7vw, 19px); text-align: center; }
.journey-visual { position: relative; flex: 1 1 0; display: flex; flex-direction: column; overflow: visible; border-top: 5px solid var(--purple); background: #eef0ec; }
.journey-board { position: relative; z-index: 20; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: center; min-height: 0; padding: 8px 12px; color: var(--ink); border-bottom: 1px solid #c4ccc7; background: #e9ece7; font-family: var(--mono); }
.journey-roundel { display: inline-flex; width: 20px; height: 20px; flex: 0 0 auto; align-self: center; align-items: center; justify-content: center; vertical-align: middle; border: 2px solid currentColor; border-radius: 50%; }
.journey-roundel::before { width: 100%; height: 100%; background: currentColor; content: ""; -webkit-mask: url("assets/mbta-t-glyph.svg") center / 100% 100% no-repeat; mask: url("assets/mbta-t-glyph.svg") center / 100% 100% no-repeat; }
.journey-board-copy { display: flex; gap: 8px; align-items: center; min-width: 0; }
.journey-board-copy > strong { overflow: hidden; color: var(--purple-dark); font-size: 10px; letter-spacing: .01em; text-overflow: ellipsis; white-space: nowrap; }
.journey-board-actions { display: flex; gap: 6px; align-items: center; }
.journey-view-toggle { display: flex; gap: 5px; align-self: end; }
.journey-view-toggle button { display: inline-flex; height: 30px; padding: 1px 9px 0; align-items: center; justify-content: center; color: #465553; border: 1px solid #899590; background: transparent; outline: 2px solid transparent; outline-offset: 1px; transition: outline-color .15s ease; font-family: var(--mono); font-size: 10px; font-weight: 800; line-height: 1; text-transform: uppercase; }
.journey-view-toggle button:not(:disabled):hover, .journey-view-toggle button:not(:disabled):focus-visible { outline-color: var(--purple); }
.journey-view-toggle button.selected { color: var(--paper); border-color: var(--purple); background: var(--purple); }
/* Two clearly visible flashes, then a long pause, looping until the button
   is clicked -- the same white outline used for hover/focus, just flashing
   instead of held solid. Each flash spans roughly 400ms (ramp up + down),
   long enough to actually register rather than a near-instant blip. */
@keyframes button-encourage-loop {
  0%, 8%, 22%, 30%, 100% { outline-color: transparent; }
  4%, 26% { outline-color: var(--encourage-color, #fff); }
}
.departure-followup button.encourage, .journey-view-toggle button.encourage, .journey-continue.encourage { animation: button-encourage-loop 4.5s ease-in-out infinite; }
.journey-view-toggle button.encourage { --encourage-color: var(--purple); animation-iteration-count: 3; }
/* A running CSS animation always wins control of its targeted property over
   a plain (non-animation) rule, regardless of selector specificity -- which
   is why hovering while the flash was active did nothing. Removing the
   animation entirely on hover/focus hands the property back to the plain
   hover rule below, which already sets the matching color. */
.departure-followup button.encourage:hover, .departure-followup button.encourage:focus-visible,
.journey-view-toggle button.encourage:hover, .journey-view-toggle button.encourage:focus-visible,
.journey-continue.encourage:hover, .journey-continue.encourage:focus-visible { animation: none; }
.journey-view-toggle button:disabled { cursor: default; opacity: .32; }
.journey-profile-stage { position: relative; flex: 1 1 0; min-height: 200px; max-height: 460px; overflow: visible; background: linear-gradient(180deg, #f6f7f3 0%, #e9ece7 100%); }
.journey-profile-layer { position: absolute; inset: 0; backface-visibility: hidden; filter: blur(5px); opacity: .5; transform: translateZ(0); transition: filter .6s ease, opacity .6s ease; will-change: filter, opacity; }
.journey-visual[data-sequence="travel"] .journey-profile-layer,
.journey-visual[data-sequence="interactive"] .journey-profile-layer { filter: none; opacity: 1; }
.journey-profile { position: absolute; inset: 0; width: 100%; height: 100%; }
.journey-schedule-band { fill: rgba(255, 209, 93, .18); }
.journey-grid-line { stroke: #bbc4bf; stroke-width: 1; vector-effect: non-scaling-stroke; }
.journey-grid-line.zero { stroke: #52615f; stroke-width: 2; stroke-dasharray: 5 5; }
.journey-rail-shadow { fill: none; stroke: #17272c; stroke-linecap: round; stroke-linejoin: round; stroke-width: 8; vector-effect: non-scaling-stroke; }
.journey-delay-line { fill: none; stroke: url(#journey-delay-gradient); stroke-linecap: round; stroke-linejoin: round; stroke-width: 4; vector-effect: non-scaling-stroke; }
.journey-axis { position: absolute; z-index: 2; inset: 0 auto 0 6%; width: 75px; color: #77847f; font-family: var(--mono); font-size: 8px; font-weight: 750; letter-spacing: .03em; pointer-events: none; }
.journey-axis span { position: absolute; top: var(--axis-y); transform: translateY(1.5px); }
.journey-points { position: absolute; z-index: 3; inset: 0; }
.journey-travel-marker { position: absolute; z-index: 6; top: 0; left: 0; width: 13px; height: 13px; border-radius: 50%; opacity: 0; background: var(--purple); box-shadow: 0 0 0 4px rgba(112, 73, 157, .28), 0 0 8px rgba(112, 73, 157, .55); pointer-events: none; transform: translate(-50%, -50%); transition: opacity .25s ease; }
/* Visible and pulsing for the whole active sequence -- travel segments and
   the stationary card phases alike -- not just while it is in motion. Hidden
   only in the untouched idle state and once the sequence has finished. */
.journey-visual[data-sequence]:not([data-sequence="interactive"]) .journey-travel-marker { opacity: 1; animation: journey-travel-pulse 1s ease-in-out infinite; }
@keyframes journey-travel-pulse { 0%, 100% { box-shadow: 0 0 0 4px rgba(112, 73, 157, .28), 0 0 8px rgba(112, 73, 157, .55); } 50% { box-shadow: 0 0 0 7px rgba(112, 73, 157, .16), 0 0 12px rgba(112, 73, 157, .7); } }
.journey-point { position: absolute; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 50%; background: transparent; transform: translate(-50%, -50%); }
.journey-point::before { position: absolute; top: 50%; left: 50%; width: 11px; height: 11px; border: 3px solid #f6f7f3; border-radius: 50%; background: var(--state); box-shadow: 0 0 0 1px var(--state); content: ""; transform: translate(-50%, -50%); transition: width .2s ease, height .2s ease, box-shadow .2s ease; }
.journey-point:hover::before, .journey-point.pinned::before { width: 15px; height: 15px; box-shadow: 0 0 0 2px var(--state), 0 3px 7px rgba(23, 39, 44, .38); }
.journey-point:focus-visible { outline: 3px solid var(--yellow-dark); outline-offset: 1px; }
.journey-chart-note { position: absolute; z-index: 4; display: grid; gap: 1px; padding: 6px 8px; color: #65726e; border-left: 3px solid var(--state, var(--purple)); background: rgba(255, 253, 248, .94); font-family: var(--mono); pointer-events: none; }
.journey-chart-note span { font-size: 7px; font-weight: 800; letter-spacing: .04em; }
.journey-chart-note strong { color: var(--state, var(--purple)); font-size: 16px; line-height: 1; }
.journey-chart-note.note-middle { --state: var(--yellow-dark); top: 39%; left: 62%; }
.mbta-pass { position: relative; color: #191d1d; border: 1px solid #aeb5b1; border-radius: 13px; background: #f8f9f6; }
.mbta-pass-header { display: flex; gap: 5px; align-items: center; justify-content: flex-start; width: 100%; padding: 0 var(--contactless-gutter) 0 0; font-size: 13px; font-weight: 750; line-height: 1.02; text-align: left; }
.mbta-pass-header > span:last-child { display: grid; gap: 1px; }
.mbta-pass-header .journey-roundel { width: 22px; height: 22px; font-size: 13px; }
/* Compact ticket cards (.mbta-ticket) don't have room for the full two-line
   agency name, so they show "MBTA" instead -- driven by that shared class,
   not decided per-card, so any future card wearing .mbta-ticket gets the
   short form automatically. */
.mbta-agency-short { display: none; }
.mbta-ticket .mbta-agency-full { display: none; }
.mbta-ticket .mbta-agency-short { display: block; font-size: 15px; letter-spacing: .03em; }

/* Contactless mark: vertically centered in its pass, everywhere, no per-card offsets. */
.contactless-mark, .mbta-contactless { position: absolute; z-index: 2; top: 50%; right: var(--contactless-inset); width: var(--contactless-width); height: var(--contactless-height); object-fit: contain; transform: translateY(-50%); }

.mbta-pass-kicker { display: block; color: #66716e; font-family: var(--mono); font-size: 9px; font-weight: 850; letter-spacing: .075em; }
.journey-sequence { position: absolute; z-index: 8; inset: 0; pointer-events: none; }
.mbta-ticket { width: min(280px, calc(100% - 32px)); padding: 8px 12px 8px; --contactless-width: 44px; --contactless-height: 64px; --contactless-inset: 9px; --contactless-gutter: 56px; --contactless-gutter-tight: 53px; }
/* The hover/pinned ticket card specifically, at roughly half the footprint
   of the shared .mbta-ticket size -- scoped to this one card's id so the
   sequence cards and the terminal-view pairing are unaffected. */
/* Padding, contactless mark, header font-size/gap, and roundel here were
   scaled from the "presentation" (sequence-card) reference at 160/280 =
   0.5714 (padding 8/12/8 -> 5/7/5, mark 44x64 -> 25x37, header 13 -> 7,
   header gap 5 -> 3, roundel 22 -> 13). Width was widened afterward (160 ->
   200px) to fix real text clipping, so it no longer follows that same ratio
   exactly -- the rest of the proportions still do. */
#journey-detail.mbta-ticket { width: min(clamp(200px, 16vw, 264px), calc(100% - 32px)); height: clamp(85px, 7.2vw, 115px); overflow: hidden; padding: 4px 7px 4px; gap: 2.5px; --contactless-width: 32px; --contactless-height: 47px; --contactless-inset: 5px; --contactless-gutter: 40px; --contactless-gutter-tight: 38px; }
#journey-detail.mbta-ticket.has-two-line-stop { height: clamp(104px, 8.8vw, 136px); padding-top: 6px; padding-bottom: 6px; }
.journey-visual[data-view="terminal"] #journey-detail.mbta-ticket { width: min(420px, calc(100% - 32px)); height: clamp(90px, 7.6vw, 121px); }
#journey-detail .mbta-pass-header { gap: 3px; font-size: clamp(7px, .65vw, 10px); }
#journey-detail .journey-roundel { width: clamp(13px, 1.1vw, 17px); height: clamp(13px, 1.1vw, 17px); }
#journey-detail .journey-pass-kicker { font-size: clamp(5px, .45vw, 7px); }
#journey-detail .journey-pass-main strong { font-size: clamp(14px, 1.15vw, 18px); }
#journey-detail .journey-pass-delay { font-size: clamp(11px, .9vw, 14px); }
#journey-detail .journey-pass-actual { font-size: clamp(8px, .65vw, 10px); }
.journey-phase-card { position: absolute; top: 0; left: 0; display: grid; gap: clamp(3px, 1vh, 6px); min-height: 0; margin: 0; padding-bottom: clamp(10px, 2.2vh, 17px); opacity: 0; transform: translateX(-24px); transition: opacity .4s ease, transform .4s ease; }
.journey-phase-card .mbta-pass-kicker { margin-top: 8px; }
.journey-phase-card strong { display: block; padding-right: var(--contactless-gutter); color: var(--purple-dark); font-family: var(--mono); font-size: clamp(16px, min(3vw, 3.2vh), 28px); line-height: 1; }
.journey-phase-reflects strong { font-size: clamp(16px, min(3vw, 3.2vh), 24px); white-space: nowrap; }
.journey-phase-card time { padding-right: var(--contactless-gutter); color: #596561; font-family: var(--mono); font-size: clamp(13px, min(2.2vw, 2.4vh), 20px); font-weight: 500; line-height: 1; }
.journey-phase-card p { margin: 2px 0 0; overflow: hidden; color: #505c59; font-size: clamp(12px, min(1.8vw, 2vh), 17px); line-height: 1.3; white-space: nowrap; text-overflow: ellipsis; }
.journey-phase-reflects { --phase-color: var(--green); border-top: 7px solid var(--green); }
.journey-phase-conceals { --phase-color: var(--magenta); border-top: 7px solid var(--magenta); }
.journey-phase-rider { --phase-color: var(--magenta); border-top: 7px solid var(--magenta); }
.journey-phase-progress { position: absolute; right: 10px; bottom: 5px; left: 10px; height: 4px; overflow: hidden; border-radius: 2px; background: rgba(23, 39, 44, .13); }
.journey-phase-progress > span { display: block; width: 100%; height: 100%; background: var(--phase-color); transform: scaleX(0); transform-origin: left center; }
.journey-visual[data-sequence="idle"] .journey-profile-layer,
.journey-visual[data-sequence="reflects"] .journey-profile-layer,
.journey-visual[data-sequence="conceals"] .journey-profile-layer { opacity: 1; transform: translateY(0); }
.journey-visual[data-sequence="reflects"] .journey-phase-reflects,
.journey-visual[data-sequence="conceals"] .journey-phase-conceals,
.journey-visual[data-sequence="rider"] .journey-phase-rider { opacity: 1; transform: translateX(0); }
.journey-visual[data-sequence]:not([data-sequence="interactive"]) .journey-points { pointer-events: none; }
.journey-visual[data-sequence="interactive"] .journey-sequence { visibility: hidden; opacity: 0; transition: opacity .35s ease, visibility .35s; }
.journey-sequence-skip { position: absolute; z-index: 12; top: 10px; right: 12px; visibility: hidden; opacity: 0; pointer-events: none; transition: color .2s ease, border-color .2s ease, opacity .2s ease, background .2s ease, filter .3s ease; }
/* Sits below the copy at the bottom of the section (not inside the stage,
   so it can't overlap the chart or its cards). Visibility is toggled
   directly by JS rather than via an attribute-selector chain, since it's no
   longer a descendant of #journey-visual. */
.journey-continue { display: flex; flex: 0 0 auto; gap: 12px; align-items: center; justify-content: center; width: fit-content; margin: clamp(8px, 3vh, 24px) auto 0; padding: 0 15px; visibility: hidden; height: clamp(40px, 8vh, 58px); color: var(--ink); border: 0; background: var(--yellow); outline: 3px solid transparent; outline-offset: 3px; opacity: 0; transform: translateY(8px); transition: opacity .35s ease, transform .35s ease, visibility .35s, outline-color .15s ease, background-color .15s ease; line-height: 1; }
.journey-continue.is-visible { visibility: visible; opacity: 1; transform: translateY(0); }
.journey-continue span { font-family: var(--mono); font-size: clamp(14px, 4vh, 19px); font-weight: 850; letter-spacing: .025em; text-transform: uppercase; }
.journey-continue b { display: flex; align-items: center; justify-content: center; font-size: clamp(24px, 7vh, 36px); line-height: 1; }
.journey-continue:hover, .journey-continue:focus-visible { outline-color: #61736f; }
.journey-continue.encourage { --encourage-color: #61736f; }
.journey-sequence-skip.is-fast { color: var(--paper); border-color: var(--purple); background: var(--purple); }
.journey-visual[data-sequence="reflects"] .journey-sequence-skip,
.journey-visual[data-sequence="conceals"] .journey-sequence-skip,
.journey-visual[data-sequence="rider"] .journey-sequence-skip,
.journey-visual[data-sequence="travel"] .journey-sequence-skip,
.journey-visual[data-sequence="interactive"] .journey-sequence-skip { visibility: visible; opacity: 1; pointer-events: auto; }
.journey-visual[data-view="terminal"] .journey-sequence-skip { filter: blur(5px); opacity: .4; pointer-events: none; }
.journey-visual[data-view="terminal"] .journey-profile-layer { opacity: .08; filter: grayscale(1); transform: scale(.985); }
.journey-visual[data-view="terminal"] .journey-points { pointer-events: none; }
/* A plain annotation now, not a boxed badge: a small curved arrow pointing
   into the actual recovery segment on the chart, plus a short line of text.
   No station names -- the arrow is what supplies the "where". */
.journey-final-segment { position: absolute; z-index: 5; top: var(--recovery-y, 50%); left: var(--recovery-x, 50%); transform: translate(calc(-100% - 18px), calc(-100% - 1.5px)); pointer-events: none; color: #5c6870; font-family: var(--mono); }
.journey-final-segment-row { display: flex; gap: 3px; align-items: baseline; font-size: 8px; font-weight: 800; line-height: 1; white-space: nowrap; }
.journey-final-segment-label { letter-spacing: .02em; text-transform: uppercase; }
.journey-final-segment-row b { color: var(--green); font-size: inherit; font-weight: inherit; line-height: inherit; text-transform: uppercase; }
/* Terminal-view layout: both cards in a flex container so they can flow
   from side-by-side to stacked without JS measuring anything. The container
   itself is absolutely centred in the stage; the cards are flex children. */
/* display:contents so this wrapper has zero layout effect of its own -- it
   previously used display:none outside terminal view, which hid its child
   #journey-detail even when that card needed to be visible for ordinary
   dot-hover in "whole" view. Both cards now position directly, in JS,
   against #journey-profile-stage; nothing here controls their layout. */
.journey-pass { position: absolute; z-index: 20; top: 0; left: 0; display: grid; min-height: 0; width: min(420px, calc(100% - 32px)); visibility: hidden; opacity: 0; pointer-events: none; transform: translateY(8px) rotate(-.35deg); transition: opacity .2s ease, transform .2s ease, visibility .2s, left .25s ease, top .25s ease; }
.journey-pass.visible, .journey-visual[data-view="terminal"][data-sequence="interactive"] .journey-pass { visibility: visible; opacity: 1; transform: translateY(0) rotate(-.35deg); }
.journey-schema-card { position: absolute; top: 0; left: 0; z-index: 9; display: grid; width: min(420px, calc(100% - 32px)); padding: 5px 12px 6px; visibility: hidden; background: rgba(248, 249, 246, .97); border: 1px solid #b7c0bb; border-top: 4px solid var(--purple); box-shadow: 0 10px 24px rgba(23, 39, 44, .16); opacity: 0; transition: opacity .2s ease, visibility .2s, left .25s ease, top .25s ease; }
.journey-visual[data-view="terminal"][data-sequence="interactive"] .journey-schema-card { visibility: visible; opacity: 1; }
/* Enlarged journey pass cards - roughly 50% larger than before */
.journey-pass-main { position: static; display: block; width: calc(100% - var(--contactless-gutter)); }
.journey-pass-kicker { display: block; font-family: var(--mono); font-size: 8px; letter-spacing: .06em; }
.journey-pass-main strong { display: -webkit-box; margin-top: 2px; overflow: hidden; font-family: var(--sans); font-size: 18px; letter-spacing: -.03em; line-height: 1.1; text-transform: uppercase; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.journey-pass-status { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; align-self: end; margin-top: 4px; padding-top: 4px; border-top: 1px solid #bfc5c1; font-family: var(--mono); font-size: 10px; line-height: 1; }
.journey-pass-delay { min-width: 0; overflow: hidden; color: var(--detail-state, var(--ink)); font-size: 14px; font-weight: 700; white-space: nowrap; text-overflow: ellipsis; }
.journey-pass-actual { min-width: 0; flex: 0 1 auto; overflow: hidden; color: #65716e; font-size: 10px; white-space: nowrap; text-overflow: ellipsis; }
.journey-pass-record { margin: 4px 0 0; padding-right: 12px; color: #45504d; font-size: 11px; line-height: 1.35; }
.journey-pass-record b { color: var(--detail-state, var(--ink)); }

.journey-schema-kicker { display: flex; gap: 5px; align-items: center; margin-bottom: 5px; overflow: hidden; color: #191d1d; font-family: var(--mono); font-size: 11px; font-weight: 800; letter-spacing: .04em; line-height: 1; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
.journey-schema-kicker .journey-roundel { width: 16px; height: 16px; border-width: 2px; }
.journey-schema-title { display: block; transform: translateY(1px); }
.journey-schema-scroll { overflow-x: auto; }
.journey-schema-table { width: 100%; border-collapse: collapse; font-family: var(--mono); font-size: 8px; white-space: nowrap; }
.journey-schema-table th, .journey-schema-table td { padding: 2px 6px; border: 1px solid #d8dcd7; text-align: left; }
.journey-schema-table thead th { background: #2f3a38; color: #edf8f5; font-weight: 800; letter-spacing: .01em; text-transform: lowercase; }
.journey-schema-table tbody td { color: #45504d; }
.journey-schema-table tr.is-highlighted td { background: rgba(255, 209, 93, .26); color: var(--ink); font-weight: 800; }
.journey-schema-note { margin: 6px 0 0; color: #596561; font-size: 12px; line-height: 1.35; }
.journey-schema-note b { color: var(--green); font-weight: 800; }
.journey-source { position: relative; z-index: 31; flex: 0 0 auto; }
.journey-source > button { display: grid; width: 30px; height: 30px; padding: 1px 0 0; place-items: center; color: var(--paper); border: 0; border-radius: 0; background: var(--purple); font-family: var(--serif); font-size: 19px; font-style: italic; font-weight: 700; line-height: 1; }
.journey-source > button:focus-visible { outline: 3px solid var(--yellow-dark); outline-offset: 2px; }
.journey-source-pass { position: absolute; right: auto; bottom: calc(100% + 8px); left: 50%; display: none; width: min(280px, calc(100vw - 36px)); padding: 8px 14px; transform: translateX(calc(-50% + var(--source-pass-shift-x, 0px))); --contactless-width: 40px; --contactless-height: 58px; --contactless-inset: 10px; --contactless-gutter: 54px; --contactless-gutter-tight: 50px; }
/* The 8px gap above is genuinely dead space -- neither the trigger nor the
   popup occupies it, so any imperfect mouse path from one to the other
   passes through a moment where nothing is hovered, and the popup vanishes
   right as you try to reach the link inside it. This invisible strip is a
   descendant of the popup, so hovering it still counts as hovering
   .journey-source, bridging the gap without changing how anything looks. */
.journey-source-pass::after { position: absolute; left: 0; right: 0; bottom: -8px; height: 8px; content: ""; }
.journey-source.open .journey-source-pass, .journey-source:hover .journey-source-pass { display: block; }
.journey-source-pass > strong { display: block; margin-top: 9px; padding-right: var(--contactless-gutter); font-family: var(--mono); font-size: 16px; letter-spacing: .06em; }
.journey-source-pass p { margin: 6px 0 0; padding-right: var(--contactless-gutter-tight); color: #56625f; font-size: 11px; line-height: 1.4; }
.journey-source-pass a { color: var(--purple); font-weight: 800; text-underline-offset: 3px; }
.source-ticket { position: relative; z-index: 8; display: block; width: max-content; max-width: 100%; margin-top: 10px; }
.source-ticket-toggle { display: inline-flex; align-items: center; gap: 8px; padding: 6px 10px 6px 7px; color: #5f2860; border: 1px solid #b78ab8; border-radius: 0; background: #fffdf8; box-shadow: 3px 3px 0 rgba(69, 48, 93, .14); cursor: pointer; font-family: var(--mono); font-size: 9px; font-weight: 850; letter-spacing: .05em; text-transform: uppercase; }
.source-ticket-toggle span { display: grid; min-width: 23px; height: 19px; place-items: center; color: #fff; background: var(--magenta); font-size: 8px; }
.source-ticket-toggle::after { content: "+"; color: var(--magenta); font-size: 13px; line-height: 1; }
.source-ticket.open .source-ticket-toggle::after { content: "−"; }
.source-ticket-toggle:focus-visible { outline: 3px solid var(--yellow-dark); outline-offset: 3px; }
.source-ticket-body { position: absolute; z-index: 12; bottom: 100%; left: 0; display: none; width: min(390px, calc(100vw - 48px)); padding: 18px 20px 17px; color: #27232b; border: 1px solid #b9aeb8; border-top: 8px solid var(--magenta); background: #fffdf8; box-shadow: 10px 12px 0 rgba(23, 39, 44, .16); }
.source-ticket.open .source-ticket-body, .source-ticket:hover .source-ticket-body { display: block; }
.source-ticket-body::before, .source-ticket-body::after { position: absolute; top: 50%; width: 13px; height: 24px; background: var(--section-bg, var(--paper)); content: ""; transform: translateY(-50%); }
.source-ticket-body::before { left: -7px; border-radius: 0 13px 13px 0; }
.source-ticket-body::after { right: -7px; border-radius: 13px 0 0 13px; }
.source-ticket-body b { display: block; padding-right: 14px; font-family: var(--sans); font-size: 13px; }
.source-ticket-body p { margin: 7px 0 0; color: #5b565d; font-size: 11px; line-height: 1.48; }
.source-ticket-body a { display: inline-block; margin-top: 11px; color: #6b316b; font-size: 10px; font-weight: 800; text-underline-offset: 3px; }
.source-ticket-links { display: flex; flex-wrap: wrap; gap: 6px 15px; }
.source-ticket-inverse { --section-bg: #24363b; }
.gradient-section .source-ticket-inverse { --section-bg: var(--purple-dark); }
.source-ticket-inverse .source-ticket-toggle { color: #f4eaf3; border-color: #a47da3; background: #443448; box-shadow: 3px 3px 0 rgba(0, 0, 0, .18); }
.source-ticket-inverse .source-ticket-toggle::after { color: var(--yellow); }

.board-section { position: relative; isolation: isolate; display: flex; flex-direction: column; justify-content: center; padding: 8px 0; color: var(--cream); background: radial-gradient(ellipse at 50% 48%, rgba(243, 162, 74, .12) 0, rgba(243, 162, 74, 0) 48%), repeating-linear-gradient(90deg, rgba(255, 255, 255, .018) 0, rgba(255, 255, 255, .018) 1px, transparent 1px, transparent 142px), #24363b; scroll-snap-align: start; height: 100dvh; overflow-y: auto; }
.board-section::before { position: absolute; z-index: -2; inset: 0; background: linear-gradient(90deg, rgba(10, 21, 24, .34) 0 7%, transparent 7% 93%, rgba(10, 21, 24, .34) 93% 100%), linear-gradient(90deg, transparent 0 8%, rgba(126, 148, 145, .16) 8% 8.7%, transparent 8.7% 91.3%, rgba(126, 148, 145, .16) 91.3% 92%, transparent 92%); content: ""; pointer-events: none; }
.board-section::after { position: absolute; z-index: -1; right: 0; bottom: 0; left: 0; height: 24%; border-top: 1px solid rgba(163, 188, 182, .16); background: repeating-linear-gradient(104deg, transparent 0 92px, rgba(174, 196, 190, .09) 93px 94px, transparent 95px 186px), linear-gradient(180deg, rgba(14, 27, 30, .08), rgba(9, 19, 22, .34)); content: ""; pointer-events: none; }
#board .compact-heading { margin-bottom: 16px; }
#board-title { line-height: 1.06; }
.board-impact-section { padding: var(--heading-padding) 0 var(--section-space); color: var(--cream); background: #3a2e29; scroll-snap-align: start; height: 100dvh; overflow-y: auto; }
.board-impact-section > .wrap { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.inverse h1, .inverse h2, .inverse .section-heading h2 { color: var(--cream); }
.inverse h1 em, .inverse h2 em { color: var(--yellow); }
.inverse > div > p, .section-heading.inverse > div > p { color: #c7d5d0; }
.board-installation { position: relative; width: 100%; max-width: 620px; margin: 66px auto 0; filter: drop-shadow(0 18px 22px rgba(5, 13, 15, .34)); }
.board-installation::before, .board-installation::after { position: absolute; z-index: -1; top: -40px; bottom: -10px; width: 25px; border-right: 5px solid #526468; border-left: 5px solid #34474b; background: repeating-linear-gradient(45deg, transparent 0 12px, #687b7e 13px 17px, transparent 18px 29px); box-shadow: inset 0 0 0 1px rgba(220, 232, 228, .13); content: ""; }
.board-installation::before { left: -54px; }
.board-installation::after { right: -54px; transform: scaleX(-1); }
.board-truss { position: absolute; z-index: -1; top: -40px; right: -58px; left: -58px; height: 34px; border-top: 5px solid #687b7e; border-bottom: 5px solid #34474b; background: repeating-linear-gradient(58deg, transparent 0 27px, #5f7376 28px 33px, transparent 34px 59px), repeating-linear-gradient(-58deg, transparent 0 27px, #42565a 28px 33px, transparent 34px 59px); box-shadow: 0 4px 0 rgba(8, 18, 20, .32), inset 0 1px rgba(231, 239, 236, .16); }
.board-truss span { position: absolute; top: 50%; width: 9px; height: 9px; border: 2px solid #26393d; border-radius: 50%; background: #91a19f; transform: translate(-50%, -50%); }
.board-truss span:nth-child(1) { left: 18%; }
.board-truss span:nth-child(2) { left: 50%; }
.board-truss span:nth-child(3) { left: 82%; }
.board-canvas-frame { position: relative; z-index: 2; width: 100%; height: clamp(230px, 40vh, 380px); margin: 0; }
.board-canvas-frame::before, .board-canvas-frame::after { position: absolute; z-index: -1; top: -15px; width: 12px; height: 19px; border: 2px solid #26383c; background: linear-gradient(90deg, #405358, #82918f 48%, #405358); box-shadow: 0 2px 0 rgba(0, 0, 0, .3); content: ""; }
.board-canvas-frame::before { left: 16%; }
.board-canvas-frame::after { right: 16%; }
.board-console { position: relative; z-index: 3; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; align-items: center; padding: 8px 10px 10px; border: 2px solid #53666a; border-top: 0; background: linear-gradient(180deg, #314449, #1d3035); box-shadow: inset 0 1px rgba(222, 234, 230, .13); }
.board-console-label { color: #aebfba; font-family: var(--mono); font-size: 8px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; white-space: nowrap; }
.board-controls { display: flex; justify-content: center; gap: 5px; min-width: 0; margin: 0; }
.board-choice { flex: 1 1 0; display: flex; height: 30px; align-items: center; justify-content: center; padding: 1px 9px 0; color: #dae5e0; border: 1px solid #71827d; background: transparent; outline: 2px solid transparent; outline-offset: 1px; font-family: var(--mono); font-size: 10px; font-weight: 800; line-height: 1; text-transform: uppercase; transition: outline-color .15s ease; }
.board-choice:hover, .board-choice:focus-visible { outline-color: var(--orange); }
.board-choice.selected { color: var(--ink); border-color: var(--orange); background: var(--orange); font-weight: 850; }
.board-canvas { display: block; width: 100%; height: 100%; }
.board-summary-copy { max-width: 680px; margin: 18px auto 0; color: #c7d5d0; font-size: 17px; line-height: 1.45; text-align: center; }
.board-continue { display: flex; flex: 0 0 auto; gap: 12px; align-items: center; justify-content: center; width: fit-content; margin: 18px auto 0; padding: 0 15px; visibility: hidden; height: clamp(40px, 8vh, 58px); color: var(--ink); border: 0; background: var(--yellow); outline: 3px solid transparent; outline-offset: 3px; opacity: 0; transform: translateY(8px); transition: opacity .35s ease, transform .35s ease, visibility .35s, outline-color .15s ease; line-height: 1; }
.board-continue.is-visible { visibility: visible; opacity: 1; transform: translateY(0); }
.board-continue span { font-family: var(--mono); font-size: clamp(14px, 4vh, 19px); font-weight: 850; letter-spacing: .025em; text-transform: uppercase; }
.board-continue b { display: flex; align-items: center; justify-content: center; font-size: clamp(24px, 7vh, 36px); line-height: 1; }
.board-continue:hover, .board-continue:focus-visible { outline-color: #fff; }
.board-continue.encourage { --encourage-color: #fff; animation: button-encourage-loop 4.5s ease-in-out infinite; }
.board-continue.encourage:hover, .board-continue.encourage:focus-visible { animation: none; }


.route-chart { display: flex; flex: 1 1 auto; flex-direction: column; width: min(100%, 1040px); max-height: clamp(260px, 60dvh, 640px); min-height: 0; margin: 0 auto; }
.route-axis, .route-row { display: grid; grid-template-columns: minmax(155px, 1.25fr) minmax(260px, 4fr) 68px; gap: clamp(10px, 1.4vw, 18px); align-items: center; }
.route-axis { margin-bottom: 8px; color: #9eb0aa; font-family: var(--mono); font-size: 9px; font-weight: 800; letter-spacing: .045em; line-height: 1; }
.route-axis-title { white-space: nowrap; }
.route-axis-scale { position: relative; display: block; height: 12px; }
.route-axis-scale span { position: absolute; top: 0; white-space: nowrap; }
.route-axis-scale span:first-child { left: 0; }
.route-axis-scale span:nth-child(2) { left: 90.91%; transform: translateX(-50%); }
.route-axis-scale span:last-child { right: 0; }
.route-map { display: grid; flex: 1 1 auto; grid-template-rows: repeat(7, minmax(22px, 1fr)); min-height: 0; gap: clamp(6px, 1.1vh, 10px); }
.route-row { min-width: 0; min-height: 0; opacity: 0; transform: translateY(9px); transition: opacity .4s ease var(--route-delay), transform .4s ease var(--route-delay); }
.route-row.is-drawn { opacity: 1; transform: translateY(0); }
.route-name { min-width: 0; color: #f3f5f1; font-size: clamp(12px, 1.25vw, 16px); font-weight: 760; line-height: 1.08; }
.route-track { position: relative; height: 100%; min-height: 22px; overflow: hidden; border: 1px solid rgba(203, 218, 212, .22); background: rgba(10, 22, 26, .34); }
.route-track::after { position: absolute; z-index: 2; top: 0; bottom: 0; left: 90.91%; width: 1px; background: rgba(245, 247, 242, .7); content: ""; }
.route-bar { position: absolute; z-index: 1; top: 0; bottom: 0; left: var(--bar-left); width: max(var(--bar-width), 3px); background: var(--route-color); transform: scaleX(0); transition: transform .72s cubic-bezier(.2, .8, .2, 1) var(--route-delay); }
.route-row.is-negative .route-bar { transform-origin: right center; }
.route-row.is-positive .route-bar { transform-origin: left center; }
.route-row.is-drawn .route-bar { transform: scaleX(1); }
.route-value { color: #f8f3e9; font-family: var(--mono); font-size: clamp(15px, 1.55vw, 20px); font-weight: 850; letter-spacing: -.055em; line-height: 1; text-align: right; white-space: nowrap; }
.route-row.is-positive .route-value { color: #9bd4c7; }
.board-impact-network-copy { max-width: 650px; margin: 20px auto 18px; color: #c7d5d0; font-size: clamp(14px, 1.4vw, 17px); text-align: center; }

.route-map-continue { display: flex; flex: 0 0 auto; gap: 12px; align-items: center; justify-content: center; width: fit-content; max-width: 100%; min-height: clamp(44px, 8vh, 58px); margin: 22px auto 0; padding: 10px 15px; visibility: hidden; color: var(--ink); border: 0; background: var(--yellow); outline: 3px solid transparent; outline-offset: 3px; opacity: 0; transform: translateY(8px); transition: opacity .35s ease, transform .35s ease, visibility .35s, outline-color .15s ease; line-height: 1; }
.route-map-continue.is-visible { visibility: visible; opacity: 1; transform: translateY(0); }
.route-map-continue span { font-family: var(--mono); font-size: clamp(11px, min(2.1vw, 2.7vh), 17px); font-weight: 850; letter-spacing: .025em; line-height: 1.08; text-align: center; text-transform: uppercase; }
.route-map-continue b { display: flex; align-items: center; justify-content: center; font-size: clamp(24px, 7vh, 36px); line-height: 1; }
.route-map-continue:hover, .route-map-continue:focus-visible { outline-color: #fff; }
.route-map-continue.encourage { --encourage-color: #fff; animation: button-encourage-loop 4.5s ease-in-out infinite; }
.route-map-continue.encourage:hover, .route-map-continue.encourage:focus-visible { animation: none; }

.gradient-section { padding: var(--heading-padding) 0 var(--section-space); color: var(--cream); background: var(--purple-dark); scroll-snap-align: start; height: 100dvh; overflow-y: auto; }
.compact-heading { margin-bottom: 36px; }
.gradient-controls { display: flex; gap: 8px; margin-bottom: 22px; }
.gradient-choice { display: flex; align-items: center; justify-content: center; padding: 10px 12px; color: #dfd4e7; border: 1px solid #9c8aab; background: transparent; font-size: 12px; }
.gradient-choice.selected { color: #2b2132; border-color: var(--yellow); background: var(--yellow); font-weight: 800; }
.access-gradient { padding: 33px; border: 1px solid #897a98; background: #30233d; }
.gradient-scale { display: flex; justify-content: space-between; gap: 20px; color: #d8cce1; font-size: 12px; }
.gradient-scale strong { color: var(--yellow); text-align: right; }
.ticket-field { display: flex; align-items: end; gap: 4px; height: 118px; margin: 18px 0 8px; border-bottom: 2px solid #cfc4d5; }
.ticket-field span { flex: 1; height: var(--ticket-height, 70px); background: linear-gradient(135deg, #e9dff0 0 49%, #c6b1d7 50%); transition: height .55s ease, opacity .55s ease, transform .55s ease; }
.ticket-field span:nth-child(1) { --ticket-height: 84px; } .ticket-field span:nth-child(2) { --ticket-height: 78px; } .ticket-field span:nth-child(3) { --ticket-height: 72px; } .ticket-field span:nth-child(4) { --ticket-height: 66px; } .ticket-field span:nth-child(5) { --ticket-height: 60px; } .ticket-field span:nth-child(6) { --ticket-height: 53px; } .ticket-field span:nth-child(7) { --ticket-height: 46px; } .ticket-field span:nth-child(8) { --ticket-height: 39px; } .ticket-field span:nth-child(9) { --ticket-height: 32px; }
.ticket-field.realized span:nth-child(n+5) { opacity: .2; transform: translateY(12px) rotate(4deg); }
.ticket-field.posted span:nth-child(n+7) { opacity: .35; transform: translateY(8px) rotate(3deg); }
.gradient-result { display: grid; grid-template-columns: auto 1fr; gap: 17px; align-items: center; margin-top: 22px; }
.gradient-result strong { color: var(--yellow); font-family: var(--mono); font-size: clamp(46px, 7vw, 78px); letter-spacing: -.08em; }
.gradient-result p { max-width: 650px; margin: 0; color: #eee5f2; font-size: 16px; }
.evidence-drawer { margin-top: 18px; border-top: 1px solid #897a98; border-bottom: 1px solid #897a98; }
.evidence-drawer summary { padding: 14px 0; color: #e9dff0; cursor: pointer; font-size: 13px; font-weight: 750; }
.evidence-drawer > div { padding: 0 0 17px; color: #d6cae0; font-size: 13px; }

.status-section { --section-bg: var(--paper); background: var(--paper); }
.status-grid { display: grid; grid-template-columns: .84fr 1.16fr; gap: clamp(42px, 8vw, 124px); align-items: center; }
.status-tabs { display: grid; grid-template-columns: 1fr 1fr; margin-top: 25px; border: 1px solid var(--line); }
.status-tabs button { display: flex; align-items: center; justify-content: center; padding: 12px 9px; color: #66736f; border: 0; background: transparent; font-family: var(--mono); font-size: 10px; text-transform: uppercase; }
.status-tabs button[aria-selected="true"] { color: var(--paper); background: var(--purple); font-weight: 800; }
#status-copy h2 { font-size: clamp(37px, 4.7vw, 65px); }
#status-copy p { max-width: 650px; margin: var(--subheading-padding) 0 0; color: #4d5d60; font-size: 17px; }
#status-copy small { display: block; max-width: 650px; margin-top: 18px; color: #65736f; font-size: 12px; }
.status-source-note { margin-top: 28px; }

/* Scatterplot section */
.scatterplot-section { background: var(--purple-dark); }
.scatterplot-section > .wrap { display: flex; flex-direction: column; min-height: 0; }
.scatterplot-section .section-heading { margin-right: auto; margin-left: auto; text-align: center; }
.scatterplot-section .section-heading h2,
.scatterplot-section .section-heading > div > p { margin-right: auto; margin-left: auto; }
.scatterplot-section .inverse h2, .scatterplot-section .inverse p { color: var(--cream); }
.scatterplot-section .compact-heading { margin-bottom: clamp(10px, 2vh, 18px); }
.scatterplot-section .section-heading > div > p { max-width: 760px; font-size: clamp(13px, 1.25vw, 16px); }
.scatterplot-controls { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: min(100%, 900px); margin: 0 auto 9px; border: 1px solid #897a98; }
.scatterplot-choice { min-width: 0; min-height: 38px; padding: 7px 10px; color: #dfd4e7; border: 0; border-right: 1px solid #897a98; background: rgba(23, 15, 31, .25); outline: 2px solid transparent; outline-offset: -3px; font-family: var(--mono); font-size: 10px; font-weight: 800; line-height: 1; text-transform: uppercase; cursor: pointer; transition: color .25s ease, background-color .25s ease, outline-color .15s ease; }
.scatterplot-choice:last-child { border-right: 0; }
.scatterplot-choice:hover, .scatterplot-choice:focus-visible { outline-color: var(--yellow); }
.scatterplot-choice.selected { color: #2b2132; background: var(--yellow); }
.scatterplot-container { position: relative; width: min(100%, 900px); height: clamp(255px, 40vh, 360px); margin: 0 auto; overflow: hidden; border: 1px solid #897a98; background: rgba(20, 13, 27, .48); box-shadow: 0 12px 30px rgba(18, 10, 24, .18); }
#scatterplot-canvas { display: block; width: 100%; height: 100%; }
.scatterplot-tooltip { position: absolute; z-index: 4; width: max-content; max-width: min(220px, calc(100% - 20px)); padding: 7px 9px; color: #28202f; border-left: 4px solid var(--yellow-dark); background: rgba(255, 253, 248, .96); box-shadow: 5px 6px 0 rgba(14, 8, 19, .2); font-size: 10px; line-height: 1.3; pointer-events: none; transform: translate(10px, calc(-100% - 10px)); }
.scatterplot-tooltip b { display: block; font-family: var(--mono); font-size: 10px; }
.scatterplot-result { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px; align-items: center; width: min(100%, 900px); min-height: 68px; margin: 8px auto 0; color: #eee5f2; }
.scatterplot-result > strong { color: var(--yellow); font-family: var(--mono); font-size: clamp(27px, 4vw, 45px); letter-spacing: -.08em; line-height: 1; white-space: nowrap; }
.scatterplot-result div { min-width: 0; }
.scatterplot-result b { display: block; color: #fffaf1; font-size: clamp(13px, 1.25vw, 16px); line-height: 1.1; }
.scatterplot-result p { max-width: 720px; margin: 3px 0 0; color: #ddd2e5; font-size: clamp(10px, 1vw, 12px); line-height: 1.3; }
.scatterplot-result small { display: block; margin-top: 2px; color: #afa0bb; font-family: var(--mono); font-size: 8px; letter-spacing: .015em; }
.scatterplot-continue { display: flex; flex: 0 0 auto; gap: 12px; align-items: center; justify-content: center; width: fit-content; margin: 8px auto 0; padding: 0 15px; visibility: hidden; height: clamp(40px, 7vh, 54px); color: var(--cream); border: 0; background: var(--yellow); outline: 3px solid transparent; outline-offset: 3px; opacity: 0; transform: translateY(8px); transition: opacity .35s ease, transform .35s ease, visibility .35s, outline-color .15s ease; line-height: 1; }
.scatterplot-continue.is-visible { visibility: visible; opacity: 1; transform: translateY(0); }
.scatterplot-continue span { font-family: var(--mono); font-size: clamp(12px, 2.2vh, 17px); font-weight: 850; letter-spacing: .025em; text-transform: uppercase; }
.scatterplot-continue b { display: flex; align-items: center; justify-content: center; font-size: clamp(24px, 6vh, 32px); line-height: 1; }
.scatterplot-continue:hover, .scatterplot-continue:focus-visible { outline-color: #fff; }
.scatterplot-continue.encourage { --encourage-color: #fff; animation: button-encourage-loop 4.5s ease-in-out infinite; }
.scatterplot-continue.encourage:hover, .scatterplot-continue.encourage:focus-visible { animation: none; }

/* One literal fill/foreground rule for every section-advance control. */
.advance-button { color: var(--ink); background-color: var(--yellow); }

.method-section { --section-bg: #eadff3; height: 100dvh; padding: var(--heading-padding) 0 var(--section-space); overflow: hidden; background: #eadff3; scroll-snap-align: start; }
.method-section > .wrap { display: flex; height: 100%; flex-direction: column; min-height: 0; }
.method-heading { display: grid; gap: 5px; max-width: 880px; margin-bottom: clamp(10px, 1.8vh, 18px); flex: 0 0 auto; }
.method-kicker { color: var(--purple); font-family: var(--mono); font-size: 10px; font-weight: 850; letter-spacing: .09em; line-height: 1; text-transform: uppercase; }
.method-heading h2 { color: var(--purple-dark); font-size: clamp(36px, 5vw, 64px); }
.method-heading p { max-width: 800px; margin: 2px 0 0; color: #514c58; font-size: clamp(12px, 1.2vw, 15px); line-height: 1.35; }
.method-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0 0 clamp(10px, 1.8vh, 18px); flex: 0 0 auto; border-top: 1px solid #af9dc5; border-bottom: 1px solid #af9dc5; }
.method-facts > div { min-width: 0; padding: 8px clamp(8px, 1.2vw, 16px) 9px; border-right: 1px solid #af9dc5; }
.method-facts > div:first-child { padding-left: 0; }
.method-facts > div:last-child { padding-right: 0; border-right: 0; }
.method-facts dt { color: var(--purple-dark); font-family: var(--mono); font-size: clamp(18px, 2.2vw, 29px); font-weight: 850; letter-spacing: -.06em; line-height: 1; }
.method-facts dd { margin: 4px 0 0; color: #625b68; font-size: clamp(8px, .85vw, 10px); line-height: 1.15; }
.method-ticket-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); gap: clamp(8px, 1.3vw, 15px); flex: 1 1 0; min-height: 0; }
.method-ticket { --ticket-accent: var(--purple); position: relative; display: grid; grid-template-rows: auto auto 1fr auto; min-width: 0; min-height: 0; padding: clamp(14px, 2vh, 20px) clamp(18px, 1.8vw, 24px); overflow: hidden; color: var(--ink); border: 1px solid #b8aec3; border-top: 5px solid var(--ticket-accent); background: var(--paper); box-shadow: 4px 5px 0 rgba(69, 48, 93, .09); text-align: left; transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease; }
.method-ticket::before,
.method-ticket::after { position: absolute; top: 54%; width: 14px; height: 14px; border: 1px solid #b8aec3; border-radius: 50%; background: #eadff3; content: ""; transform: translateY(-50%); }
.method-ticket::before { left: -8px; }
.method-ticket::after { right: -8px; }
.method-ticket:hover,
.method-ticket:focus-visible { border-color: var(--ticket-accent); box-shadow: 6px 7px 0 rgba(69, 48, 93, .14); outline: 0; transform: translateY(-2px); }
.method-ticket > span { color: var(--ticket-accent); font-family: var(--mono); font-size: clamp(8px, .7vw, 10px); font-weight: 850; letter-spacing: .075em; line-height: 1; text-transform: uppercase; }
.method-ticket > strong { margin-top: clamp(5px, 1vh, 10px); padding-bottom: .08em; font-family: var(--serif); font-size: clamp(20px, 2.2vw, 31px); font-weight: 500; letter-spacing: -.04em; line-height: 1.07; }
.method-ticket > small { align-self: start; margin-top: clamp(10px, 1.5vh, 15px); padding-top: clamp(8px, 1.2vh, 12px); color: #5d6765; border-top: 1px dashed #aaa5ad; font-size: clamp(9px, .85vw, 12px); line-height: 1.25; }
.method-ticket > b { align-self: end; justify-self: end; color: #746d78; font-family: var(--mono); font-size: 8px; letter-spacing: .06em; line-height: 1; }
.method-ticket-data { --ticket-accent: var(--green); }
.method-ticket-service { --ticket-accent: var(--orange-dark); }
.method-ticket-place { --ticket-accent: var(--magenta); }
.method-ticket-model { --ticket-accent: #506d96; }
.method-ticket-limits { --ticket-accent: var(--red); }
.faq-list { display: none; }
.method-section details { border-bottom: 1px solid #af9dc5; }
.method-section summary { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px; align-items: center; padding: 19px 2px; color: #4b3369; cursor: pointer; font-size: clamp(15px, 1.45vw, 18px); font-weight: 780; line-height: 1.25; list-style: none; }
.method-section summary::-webkit-details-marker { display: none; }
.method-section summary::after { display: inline-flex; width: 26px; height: 26px; align-items: center; justify-content: center; color: var(--purple); border: 1px solid #9d88b8; content: "+"; font-family: var(--mono); font-size: 18px; font-weight: 500; line-height: 1; transition: color .18s ease, border-color .18s ease; }
.method-section details[open] summary::after { color: var(--paper); border-color: var(--purple); background: var(--purple); content: "−"; }
.method-section summary:hover::after,
.method-section summary:focus-visible::after { border-color: var(--purple); }
.method-section summary:focus-visible { outline: 3px solid var(--yellow-dark); outline-offset: 3px; }
.faq-answer { max-width: 920px; padding: 0 48px 25px 2px; color: #514c58; }
.faq-answer > p { margin: 0; font-size: clamp(13px, 1.15vw, 15px); line-height: 1.58; }
.faq-answer > p + p { margin-top: 12px; }
.method-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-bottom: 18px; }
.method-steps article { padding-top: 12px; border-top: 3px solid var(--purple); }
.method-steps b { color: #4b3369; font-family: var(--mono); font-size: 10px; letter-spacing: .04em; text-transform: uppercase; }
.method-steps p { margin: 7px 0 0; color: #524e5a; font-size: 13px; line-height: 1.45; }
.faq-links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.faq-links a { padding: 8px 10px; color: var(--purple-dark); border: 1px solid #9d88b8; font-family: var(--mono); font-size: 10px; font-weight: 800; line-height: 1.2; text-decoration: none; text-transform: uppercase; }
.faq-links a:hover,
.faq-links a:focus-visible { color: var(--paper); background: var(--purple); outline: 0; }
.method-dialog { width: min(900px, calc(100% - 28px)); height: min(690px, calc(100dvh - 28px)); max-width: none; max-height: none; margin: auto; padding: 0; overflow: visible; color: var(--ink); border: 0; background: transparent; }
.method-dialog::backdrop { background: rgba(23, 39, 44, .72); backdrop-filter: blur(5px); }
.method-pass { --pass-accent: var(--purple); --pass-padding: clamp(14px, 2.4vw, 28px); --pass-stub: clamp(65px, 9vw, 100px); position: relative; display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto; width: 100%; height: 100%; padding: var(--pass-padding); overflow: hidden; border: 1px solid #a99cb7; border-top: 10px solid var(--pass-accent); background: var(--paper); box-shadow: 14px 17px 0 rgba(19, 23, 29, .28); }
.method-pass::before { position: absolute; right: var(--pass-stub); bottom: 0; width: 1px; height: 100%; border-left: 1px dashed rgba(96, 90, 101, .28); content: ""; pointer-events: none; }
.method-dialog[data-theme="data"] .method-pass { --pass-accent: var(--green); }
.method-dialog[data-theme="service"] .method-pass { --pass-accent: var(--orange-dark); }
.method-dialog[data-theme="place"] .method-pass { --pass-accent: var(--magenta); }
.method-dialog[data-theme="model"] .method-pass { --pass-accent: #506d96; }
.method-dialog[data-theme="limits"] .method-pass { --pass-accent: var(--red); }
.method-pass-header { display: flex; align-items: center; justify-content: space-between; padding-bottom: clamp(8px, 1.5vh, 14px); border-bottom: 1px solid #c7c2c9; }
.method-pass-header > div { display: flex; gap: 8px; align-items: center; color: var(--pass-accent); font-family: var(--mono); font-size: 10px; font-weight: 850; letter-spacing: .07em; }
.method-dialog-close { display: inline-flex; width: 30px; height: 30px; padding: 0; align-items: center; justify-content: center; color: var(--ink); border: 1px solid #a8a3aa; background: transparent; font-family: var(--mono); font-size: 21px; line-height: 1; }
.method-dialog-close:hover,
.method-dialog-close:focus-visible { color: var(--paper); border-color: var(--pass-accent); background: var(--pass-accent); outline: 0; }
.method-pass-title-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 18px; align-items: start; padding: clamp(10px, 2vh, 18px) 0 clamp(8px, 1.4vh, 13px); }
.method-pass-title-row span { color: var(--pass-accent); font-family: var(--mono); font-size: 9px; font-weight: 850; letter-spacing: .075em; text-transform: uppercase; }
.method-pass-title-row h3 { max-width: 720px; margin: 4px 0 0; font-family: var(--serif); font-size: clamp(25px, 3.2vw, 42px); font-weight: 500; letter-spacing: -.045em; line-height: .98; }
.method-pass-title-row > strong { color: var(--pass-accent); font-family: var(--mono); font-size: clamp(32px, 5vw, 62px); letter-spacing: -.08em; line-height: .85; }
.method-pass-body { min-height: 0; padding-right: calc(var(--pass-stub) - var(--pass-padding) + 24px); overflow: hidden; }
.method-pass-body .faq-answer { max-width: none; padding: 0; }
.method-pass-body .faq-answer > p { font-size: clamp(11px, 1.15vw, 15px); line-height: 1.48; }
.method-pass-body .faq-answer > p + p { margin-top: clamp(7px, 1.3vh, 12px); }
.method-pass-body .method-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(8px, 1.5vw, 18px); margin-bottom: clamp(8px, 1.4vh, 14px); }
.method-pass-body .method-steps article { padding-top: 7px; }
.method-pass-body .method-steps p { font-size: clamp(9px, .95vw, 12px); line-height: 1.35; }
.method-pass-body .faq-links { margin-top: 10px; }
.method-pass-nav { display: grid; grid-template-columns: 1fr auto 1fr; gap: 12px; align-items: center; padding-top: clamp(9px, 1.6vh, 15px); border-top: 1px solid #c7c2c9; }
.method-pass-nav button { min-height: 34px; padding: 6px 9px; color: var(--ink); border: 1px solid #a8a3aa; background: transparent; font-family: var(--mono); font-size: 9px; font-weight: 800; text-transform: uppercase; }
.method-pass-nav button:last-child { justify-self: end; }
.method-pass-nav button:hover,
.method-pass-nav button:focus-visible { color: var(--paper); border-color: var(--pass-accent); background: var(--pass-accent); outline: 0; }
.method-pass-nav > span { color: #716b73; font-family: var(--mono); font-size: 9px; font-weight: 800; }
.ending { display: flex; flex-direction: column; height: 100dvh; padding: var(--heading-padding) 0; overflow-y: auto; background: var(--cream); scroll-snap-align: start; }
.ending > .wrap { margin-top: auto; margin-bottom: auto; }
.ending h2 { max-width: 960px; font-size: clamp(51px, 6.2vw, 91px); }
.ending h2 em { color: var(--green); }
.ending-takeaways { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(22px, 3vw, 42px); margin-top: clamp(32px, 5vh, 50px); }
.ending-takeaway { padding-top: 12px; border-top: 4px solid var(--green); }
.ending-takeaway-label { display: block; color: var(--green); font-family: var(--mono); font-size: 10px; font-weight: 850; letter-spacing: .075em; line-height: 1; text-transform: uppercase; }
.ending-takeaway h3 { min-height: 1.96em; max-width: 350px; margin: 10px 0 0; color: var(--ink); font-family: var(--serif); font-size: clamp(27px, 2.6vw, 38px); font-weight: 500; letter-spacing: -.04em; line-height: .98; text-wrap: balance; }
.ending-takeaway p { max-width: 360px; margin: 14px 0 0; color: #4e5d5c; font-size: clamp(13px, 1.15vw, 16px); line-height: 1.45; }
.ending-takeaway-impact { border-top-color: var(--purple); }
.ending-takeaway-impact .ending-takeaway-label { color: var(--purple-dark); }
.ending-footer { grid-column: 1 / -1; display: flex; gap: 24px; align-items: end; justify-content: space-between; margin-top: clamp(10px, 2vh, 22px); padding-top: clamp(12px, 2vh, 20px); border-top: 1px solid #b8c1bb; }
.ending-question { max-width: 780px; margin: 0; color: var(--ink); font-family: var(--serif); font-size: clamp(32px, 4vw, 56px); font-weight: 500; letter-spacing: -.045em; line-height: 1; text-align: left; }
.ending-question em { color: var(--green); font-style: italic; }
.ending-continue { display: flex; gap: 10px; min-height: 52px; flex: 0 0 auto; padding: 10px 15px; align-items: center; justify-content: center; color: var(--ink); border: 0; background: var(--yellow); outline: 3px solid transparent; outline-offset: 3px; line-height: 1; }
.ending-continue span { font-family: var(--mono); font-size: clamp(11px, 1.2vw, 15px); font-weight: 850; letter-spacing: .025em; text-transform: uppercase; }
.ending-continue b { display: flex; align-items: center; justify-content: center; font-size: 28px; line-height: 1; }
.ending-continue:hover, .ending-continue:focus-visible { outline-color: #61736f; }
footer { display: flex; justify-content: space-between; gap: 25px; padding: 24px clamp(24px, 5vw, 74px); color: #aebcb7; background: var(--ink); font-family: var(--mono); font-size: 9px; line-height: 1.5; text-transform: uppercase; }
footer span:last-child { max-width: 560px; text-align: right; }

@media (max-width: 840px) {
  :root { --heading-padding: clamp(12px, 4vh, 40px); }
  .wrap { width: min(100% - 40px, 610px); }
  .hero-copy { padding-top: var(--heading-padding); }
  h1 { font-size: clamp(30px, 10vw, 78px); white-space: normal; }
  .hero-intro { font-size: 16px; white-space: normal; }
  .departure-followup { top: var(--platform-card-center, 80%); right: auto; bottom: auto; left: 50%; width: fit-content; max-width: calc(100% - 32px); gap: 9px; padding: 9px; }
  .departure-followup p { min-width: 0; }
  .departure-followup button { height: 54px; padding: 0 11px; }
  .departure-followup button span { font-size: 16px; }
  .departure-followup button b { font-size: 31px; }
  .hero-copy h1 { padding-right: 90px; }
  .guided-tour-start { top: var(--heading-padding); right: 0; width: 82px; gap: 6px; }
  .guided-tour-start-icon { width: 58px; height: 58px; border-width: 2px; box-shadow: 0 0 0 5px rgba(255, 209, 93, .11), 0 8px 20px rgba(0, 0, 0, .28); }
  .guided-tour-start-icon svg { width: 35px; height: 35px; margin-left: 3px; }
  .guided-tour-start-label { font-size: 9px; }
  .guided-tour-meta { right: 10px; bottom: 16px; left: 10px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 5px 10px; padding: 8px 8px 8px 11px; }
  .guided-tour-hint { grid-column: 1; grid-row: 2; overflow: hidden; font-size: 8px; text-overflow: ellipsis; }
  .guided-tour-stop { grid-column: 2; grid-row: 1 / span 2; width: 36px; height: 36px; }
  .section-heading { margin-bottom: 37px; }
  .journey-heading { margin-bottom: 24px; }
  .journey-continue { height: 54px; padding: 0 11px; }
  .journey-continue span { font-size: 16px; }
  .journey-continue b { font-size: 31px; }
  .journey { padding-top: 16px; padding-bottom: 16px; }
  .journey-intro-below { margin-top: 10px; font-size: 13px; line-height: 1.35; }
  .journey-continue { margin: 10px auto 0; }
  .split, .status-grid { grid-template-columns: 1fr; gap: 20px; }
  .display-copy { font-size: 32px; }
  h2 { font-size: 48px; }
  .source-ticket-body { position: static; margin-top: 8px; box-shadow: 6px 7px 0 rgba(23, 39, 44, .14); }
  .journey-board { align-items: start; flex-direction: column; }
  .journey-view-toggle { width: 100%; }
  .journey-board { grid-template-columns: 1fr; min-height: 0; gap: 7px; padding: 10px 13px; }
  .journey-board-actions { width: 100%; }
  .journey-source { position: relative; }
  .journey-source-pass { width: min(280px, calc(100vw - 24px)); }
  .journey-board-copy > strong { white-space: normal; }
  .journey-view-toggle { width: 100%; }
  .journey-view-toggle button { flex: 1; }
  .journey-visual { margin-right: -20px; margin-left: -20px; }
  .journey-profile-stage { min-height: 200px; }
  .journey-axis { width: 55px; font-size: 6.5px; }
  .journey-chart-note { padding: 5px 6px; }
  .journey-chart-note span { font-size: 6px; }
  .journey-chart-note strong { font-size: 13px; }
  .journey-chart-note.note-middle { display: none; }
  .journey-phase-card strong { font-size: 23px; }
  .journey-phase-card p { font-size: 15px; }
  .journey-pass-main strong { font-size: 24px; }
  .journey-pass .mbta-pass-header { font-size: 11px; }

  .board-installation { margin-top: 53px; }
  .board-installation::before, .board-installation::after { top: -31px; bottom: -7px; width: 14px; border-right-width: 3px; border-left-width: 3px; background-size: auto; }
  .board-installation::before { left: -18px; }
  .board-installation::after { right: -18px; }
  .board-truss { top: -31px; right: -20px; left: -20px; height: 27px; border-top-width: 4px; border-bottom-width: 4px; }
  .board-canvas-frame::before, .board-canvas-frame::after { top: -11px; width: 9px; height: 14px; }
  .board-console { grid-template-columns: 1fr; padding: 7px; }
  .board-console-label { display: none; }
  .board-summary-copy { margin-top: 14px; font-size: 15px; }

  .board-story { padding-left: 86px; }
  .board-story::before { left: 7px; } .board-story::after { left: 36px; }
  .board-story p { font-size: 33px; }
  .route-axis, .route-row { grid-template-columns: minmax(125px, 1.2fr) minmax(180px, 3fr) 58px; }
  .gradient-controls { flex-direction: column; }
  .gradient-scale { flex-direction: column; gap: 3px; }
  .gradient-scale strong { text-align: left; }
  .gradient-result { grid-template-columns: 1fr; gap: 6px; }
  .gradient-result strong { font-size: 65px; }
  .method-facts { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .method-facts > div { padding: 7px 7px 8px; border-right: 1px solid #af9dc5; border-bottom: 0; }
  .method-facts > div:first-child { padding-left: 0; }
  .method-facts > div:last-child { padding-right: 0; border-right: 0; }
  .method-ticket-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(3, minmax(0, 1fr)); }
  .method-ticket { padding: 12px 14px; border-top-width: 4px; box-shadow: 3px 4px 0 rgba(69, 48, 93, .09); }
  .method-ticket > strong { font-size: clamp(16px, 5vw, 22px); }
  .method-ticket > small { font-size: 9px; }
  .method-steps { grid-template-columns: 1fr; gap: 15px; }
  .ending h2 { font-size: 48px; }
  .ending-takeaways { grid-template-columns: 1fr; gap: 18px; margin-top: 22px; }
  .ending-takeaway { padding-top: 9px; }
  .ending-takeaway h3, .ending-takeaway p { max-width: 610px; }
  .ending-takeaway h3 { min-height: 0; }
  .ending-takeaway p { margin-top: 10px; }
  .ending-footer { flex-direction: column; gap: 12px; align-items: flex-start; margin-top: 2px; padding-top: 10px; }
  .ending-question { font-size: 34px; }
  .ending-continue { min-height: 46px; padding: 8px 12px; }
  footer { padding: 20px; font-size: 8px; }
}

@media (max-width: 560px) {
  .method-heading { gap: 3px; margin-bottom: 9px; }
  .method-heading h2 { font-size: clamp(31px, 10vw, 40px); }
  .method-heading p { font-size: 11px; line-height: 1.28; }
  .method-kicker { font-size: 8px; }
  .method-facts { margin-bottom: 9px; }
  .method-facts dt { font-size: clamp(15px, 5vw, 20px); }
  .method-facts dd { font-size: 7px; }
  .method-ticket-grid { gap: 7px; }
  .method-ticket > span { font-size: 7px; }
  .method-ticket > strong { margin-top: 4px; font-size: clamp(15px, 4.7vw, 19px); }
  .method-ticket > small { margin-top: 8px; padding-top: 7px; font-size: 8px; line-height: 1.2; }
  .method-ticket > b { font-size: 6px; }
  .method-dialog { width: calc(100% - 18px); height: calc(100dvh - 18px); }
  .method-pass { padding: 12px; border-top-width: 7px; box-shadow: 7px 8px 0 rgba(19, 23, 29, .28); }
  .method-pass::before { display: none; }
  .method-pass-header { padding-bottom: 7px; }
  .method-pass-header > div { font-size: 8px; }
  .method-dialog-close { width: 27px; height: 27px; }
  .method-pass-title-row { gap: 8px; padding: 8px 0 7px; }
  .method-pass-title-row h3 { font-size: clamp(22px, 7.5vw, 30px); }
  .method-pass-title-row > strong { font-size: 30px; }
  .method-pass-body { padding-right: 0; }
  .method-pass-body .faq-answer > p { font-size: clamp(10px, 3vw, 12px); line-height: 1.4; }
  .method-pass-body .method-steps { grid-template-columns: 1fr; gap: 5px; }
  .method-pass-body .method-steps article { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 8px; padding-top: 5px; }
  .method-pass-body .method-steps b { font-size: 7px; }
  .method-pass-body .method-steps p { margin-top: 0; font-size: 9px; line-height: 1.25; }
  .method-pass-body .faq-links { display: grid; }
  .method-pass-nav { padding-top: 8px; }
  .method-pass-nav button { min-height: 31px; font-size: 8px; }
  .route-axis { grid-template-columns: 1fr; gap: 7px; margin-bottom: 10px; }
  .route-axis-title { white-space: normal; }
  .route-row { grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto minmax(22px, 1fr); row-gap: 5px; }
  .route-name { font-size: 13px; }
  .route-value { font-size: 16px; }
  .route-track { grid-column: 1 / -1; grid-row: 2; }
  .route-map { gap: 10px; }
  .route-map-continue { gap: 8px; margin-top: 18px; }
  .route-map-continue b { flex: 0 0 25px; font-size: 25px; }
  .scatterplot-controls { margin-bottom: 7px; }
  .scatterplot-choice { min-height: 46px; padding: 6px 5px; }
  .scatterplot-container { height: clamp(255px, 37vh, 315px); }
  .scatterplot-result { grid-template-columns: auto minmax(0, 1fr); gap: 8px; min-height: 62px; }
  .scatterplot-result > strong { font-size: 28px; }
  .scatterplot-result b { font-size: 12px; }
  .scatterplot-result p { font-size: 9px; }
  .scatterplot-result small { display: none; }
  .scatterplot-continue { height: 46px; margin-top: 6px; }
  .scatterplot-continue span { font-size: 12px; }
  .scatterplot-continue b { font-size: 25px; }
}

/* Mobile contactless sizing: one place, gutters follow automatically. */
@media (max-width: 840px) {
  :root { --contactless-width: 60px; --contactless-height: 87px; --contactless-gutter: 76px; --contactless-gutter-tight: 72px; }
  .mbta-pass-header { padding-right: var(--contactless-gutter); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}