.home { --home-ink:#242d30; --home-muted:#737a78; --art-grid:#d9dfd9; --art-line:#b5c0b1; --signal:#91aa3d; --signal-dark:#405f30; overflow:clip; }
[data-theme="dark"] .home { --home-ink:#eef1e8; --home-muted:#adb6a8; --art-grid:#344336; --art-line:#60775a; --signal:#c6df71; --signal-dark:#c6df71; }
.home h1,.home h2,.home h3 { color:var(--home-ink); }
.home a { text-decoration:none; }
.home a:hover { text-decoration:underline; }
.home-wrap { width:min(1240px,calc(100% - 96px)); margin-inline:auto; }
.story { max-width:1600px; margin:auto; display:grid; grid-template-columns:46% 54%; position:relative; }
.chapter { grid-column:1; display:flex; align-items:center; min-height:calc(100svh - 80px); padding:50px 0 65px 64px; position:relative; z-index:2; }
.chapter-route { grid-row:1; }
.chapter-reach { grid-row:2; min-height:110svh; }
.chapter-inner { width:100%; max-width:620px; }
.home h1 { font-size:clamp(48px,5.35vw,86px); letter-spacing:-.064em; line-height:1.04; margin:0 0 26px; font-weight:600; }
.home h1 span,.home h2 span { color:var(--home-muted); }
.hero-copy { font-size:clamp(17px,1.5vw,21px); line-height:1.55; max-width:440px; color:var(--text-soft); }
.hero-actions { display:flex; gap:26px; align-items:center; margin-top:28px; font-size:13px; }
.hero-actions .button { background:var(--home-ink); color:var(--bg); padding:13px 23px; border:0; border-radius:100px; gap:24px; }
.hero-actions .button:hover { background:var(--signal-dark); text-decoration:none; }
.hero-actions>a:last-child span { margin-left:8px; }
.eyebrow { display:block; font-family:var(--mono); font-size:10px; font-weight:500; letter-spacing:.16em; color:var(--home-muted); }
.route-explanation { margin-top:58px; max-width:340px; }
.route-explanation p { font-size:13px; line-height:1.65; margin-top:10px; color:var(--text-soft); }
.scroll-cue { display:inline-flex; align-items:center; gap:12px; color:var(--home-muted); font-size:11px; margin-top:32px; }
.scroll-cue>span { font-size:18px; }
.chapter h2 { font-size:clamp(45px,4.7vw,76px); letter-spacing:-.06em; line-height:1.06; margin:26px 0; }
.chapter-copy { font-size:16px; line-height:1.7; max-width:380px; color:var(--text-soft); }
.chapter-copy strong { font-weight:500; color:var(--home-ink); }
.text-link { display:inline-flex; gap:20px; align-items:center; font-size:14px; font-weight:550; margin-top:16px; }
.art-sticky { grid-column:2; grid-row:1 / 3; position:sticky; top:0; align-self:start; height:100svh; min-height:600px; max-height:1000px; display:flex; flex-direction:column; justify-content:center; z-index:1; }
.art-topline { display:flex; align-items:center; justify-content:space-between; margin:0 52px 0 44px; padding-bottom:20px; border-bottom:1px solid var(--border); font-family:var(--mono); font-size:10px; color:var(--home-muted); }
.art-label { display:flex; align-items:center; gap:8px; }
.live-dot { width:5px; height:5px; background:var(--signal); border-radius:50%; }
#motion-toggle { border:0; color:inherit; background:none; padding:5px 0 5px 12px; font:inherit; cursor:pointer; }
#motion-toggle span { font-size:11px; margin-right:5px; }
.art-frame { position:relative; margin:0; padding:0; }
.network-art { display:block; width:127%; margin-left:-15%; height:auto; overflow:visible; }
.network-plane { transform-origin:600px 410px; }
.ground-grid path { fill:none; stroke:var(--art-grid); stroke-width:1; }
.ground-grid circle { fill:var(--art-grid); }
.transit-lines path { fill:none; stroke:var(--art-line); stroke-width:2; stroke-linejoin:round; stroke-linecap:round; }
.station-dots circle { fill:var(--bg); stroke:var(--art-line); stroke-width:1.5; }
.search-edge { fill:none; stroke:var(--signal); stroke-width:2.4; opacity:0; }
.route-under { stroke:var(--bg); stroke-width:11; fill:none; stroke-linecap:round; stroke-linejoin:round; }
.route-line { fill:none; stroke:var(--signal-dark); stroke-width:5; stroke-linejoin:round; stroke-linecap:round; }
.route-tracer { fill:none; stroke:#c3db6b; stroke-width:5; stroke-linejoin:round; stroke-linecap:round; stroke-dasharray:.055 .945; }
.marker-shadow { fill:var(--home-ink); opacity:.05; }
.marker-stem { fill:none; stroke:var(--signal-dark); stroke-width:1.5; }
.marker-ring { fill:var(--home-ink); stroke:var(--bg); stroke-width:5; }
.marker-letter { fill:var(--bg); font:500 20px var(--font); }
.marker-label { fill:var(--home-ink); font:500 15px var(--font); letter-spacing:.01em; }
.marker-origin .marker-ring { fill:var(--signal-dark); }
.route-art,.marker-destination,.reach-art { transition:opacity 700ms ease; }
.reach-art { opacity:0; }
.iso { stroke-width:1.5; fill-rule:evenodd; stroke-linejoin:round; }
.iso-45 { fill:#b4c95a; fill-opacity:.12; stroke:#a4b567; }
.iso-30 { fill:#a9c74c; fill-opacity:.18; stroke:#8fa63f; }
.iso-15 { fill:#91b22c; fill-opacity:.25; stroke:#638526; }
[data-theme="dark"] .iso { fill-opacity:.2; stroke:var(--signal); }
[data-scene="reach"] .reach-art { opacity:1; }
[data-scene="reach"] .route-art,[data-scene="reach"] .marker-destination,[data-scene="reach"] .search-art { opacity:0; }
.art-readout { position:absolute; bottom:50px; left:44px; color:var(--home-ink); }
.readout-kicker { display:block; font:9px var(--mono); letter-spacing:.12em; color:var(--home-muted); margin-bottom:8px; }
.route-readout strong { font-size:16px; font-weight:500; }
.phase-track { margin-top:13px; height:2px; width:160px; background:var(--border); overflow:hidden; }
.phase-track i { height:100%; width:100%; display:block; background:var(--signal); transform-origin:left; }
.reach-readout { display:none; }
.reach-readout strong { font-size:48px; line-height:1; font-weight:450; letter-spacing:-.06em; font-variant-numeric:tabular-nums; }
.reach-readout small { font-size:16px; margin-left:7px; font-weight:400; letter-spacing:0; }
.reach-key { display:flex; gap:15px; font:9px var(--mono); margin-top:12px; }
.reach-key span::before { content:''; width:5px; height:5px; border-radius:50%; display:inline-block; margin-right:5px; background:#638526; }
.reach-key span:nth-child(2)::before { background:#8fa63f; }
.reach-key span:nth-child(3)::before { background:#a4b567; }
[data-scene="reach"] .route-readout { display:none; }
[data-scene="reach"] .reach-readout { display:block; }
.art-frame figcaption { margin:0 52px 0 44px; color:var(--home-muted); font-size:9px; letter-spacing:.015em; }
.performance-section { padding:130px 0 80px; border-top:1px solid var(--border); }
.section-heading { display:grid; grid-template-columns:1.25fr 1fr; gap:24px 80px; }
.section-heading .eyebrow { grid-column:1 / -1; }
.section-heading h2,.matrix-copy h2,.start-heading h2 { font-size:clamp(42px,5vw,72px); line-height:1.06; letter-spacing:-.06em; margin:0; }
.section-heading>p { max-width:390px; font-size:18px; align-self:end; margin-bottom:5px; color:var(--text-soft); }
.speed-line { margin:90px 0 65px; display:flex; align-items:flex-end; gap:55px; }
.speed-number { font-size:clamp(72px,9vw,128px); letter-spacing:-.075em; color:var(--home-ink); font-weight:450; line-height:1; white-space:nowrap; }
.speed-number>.speed-unit { font-size:.32em; margin-left:8px; letter-spacing:-.025em; }
.speed-line>p { font-size:13px; line-height:1.7; margin-bottom:5px; color:var(--text-soft); }
.city-results { display:grid; grid-template-columns:repeat(6,1fr); gap:26px; }
.city-results>div { display:flex; flex-direction:column; }
.city-results>div>span { font-size:11px; color:var(--home-muted); min-height:38px; }
.city-results strong { font-size:32px; font-weight:450; color:var(--home-ink); letter-spacing:-.045em; }
.city-results small { font-size:12px; margin-left:5px; color:var(--home-muted); font-weight:400; }
.city-results i { display:block; height:3px; width:var(--bar); margin-top:14px; background:var(--lime); }
.evidence-links { display:flex; gap:28px; align-items:center; margin:38px 0 26px; font-size:13px; }
.evidence-links .text-link { margin:0; }
.benchmark-method { border-top:1px solid var(--border); padding-top:18px; }
.benchmark-method summary { font-size:12px; color:var(--home-muted); }
.benchmark-method>div { padding-top:22px; }
.benchmark-method p { font-size:13px; max-width:900px; }
.benchmark-method table { width:100%; text-align:right; font-size:12px; border-collapse:collapse; }
.benchmark-method caption { text-align:left; font-size:11px; color:var(--home-muted); margin-bottom:12px; }
.benchmark-method th,.benchmark-method td { padding:10px; border-bottom:1px solid var(--border); white-space:nowrap; }
.benchmark-method th:first-child { text-align:left; }
.benchmark-method th { font-weight:500; }
.vigo-row { background:var(--bg-muted); }
.matrix-section { display:grid; grid-template-columns:1fr 1fr; gap:80px; padding-block:110px; border-top:1px solid var(--border); align-items:center; }
.matrix-copy .eyebrow { margin-bottom:24px; }
.matrix-copy p { margin-top:26px; max-width:410px; font-size:16px; color:var(--text-soft); }
.matrix-art { min-height:370px; display:flex; align-items:center; position:relative; padding-bottom:30px; }
.matrix-origin { position:relative; flex:0 0 24px; }
.matrix-origin>span { display:block; width:16px; height:16px; border:4px solid var(--bg); outline:1px solid var(--signal-dark); background:var(--signal-dark); border-radius:50%; }
.matrix-origin small { position:absolute; font:9px var(--mono); width:100px; left:-25px; top:28px; color:var(--home-muted); }
.matrix-fan { flex:1; height:220px; background:repeating-conic-gradient(from 42deg at 0% 50%,transparent 0deg 3deg,var(--art-grid) 3deg 3.2deg,transparent 3.2deg 8deg); clip-path:polygon(0 50%,100% 0,100% 100%); opacity:.8; }
.matrix-cells { display:grid; grid-template-columns:repeat(12,1fr); gap:5px; width:60%; transform:perspective(1000px) rotateY(-13deg) rotateZ(-8deg); }
.matrix-cells i { aspect-ratio:1; background:var(--lime); opacity:var(--cell); border-radius:2px; transition:opacity 1s; }
.matrix-caption { position:absolute; bottom:0; right:0; color:var(--home-muted); font-size:11px; }
.start-section { display:grid; grid-template-columns:1fr 1fr; gap:100px; padding:100px 0 120px; border-top:1px solid var(--border); }
.start-heading .eyebrow { margin-bottom:26px; }
.start-heading p { font-size:15px; color:var(--text-soft); margin-top:28px; }
.start-options>a { display:flex; gap:22px; padding:25px 0; border-bottom:1px solid var(--border); color:var(--home-ink); align-items:baseline; }
.start-options>a:first-child { padding-top:0; }
.start-options>a>span:last-child { margin-left:auto; }
.option-number { font:10px var(--mono); color:var(--home-muted); }
.start-options h3 { font-size:22px; letter-spacing:-.04em; font-weight:500; margin:0 0 8px; }
.start-options a p { font-size:13px; color:var(--text-soft); margin:0; }
.format-caption { font-size:11px; color:var(--home-muted); margin-top:22px; }
@media(min-width:1600px) { .chapter { padding-left:80px; } }
@media(max-width:1100px) { .chapter { padding-left:36px; } .art-topline,.art-frame figcaption { margin-inline:24px; } .art-readout { left:24px; bottom:36px; } .route-explanation { margin-top:40px; } .speed-line { gap:28px; } }
@media(max-width:760px) {
  .home-wrap { width:calc(100% - 40px); }
  .story { display:flex; flex-direction:column; padding-top:0; }
  .chapter { padding:48px 24px 0; min-height:0; }
  .chapter-route { order:0; }
  .chapter-reach { order:2; padding-top:65px; padding-bottom:36px; }
  .home h1 { font-size:clamp(46px,9.5vw,66px); max-width:620px; }
  .hero-copy { font-size:17px; max-width:430px; }
  .hero-actions { margin-top:24px; gap:22px; }
  .route-explanation { margin-top:34px; max-width:440px; }
  .route-explanation p { font-size:12px; }
  .scroll-cue { display:none; }
  .art-sticky { order:1; position:relative; height:auto; min-height:0; width:100%; padding:38px 0 8px; }
  .art-topline { margin-inline:24px; padding-bottom:12px; }
  .network-art { width:116%; margin-left:-8%; }
  .art-readout { bottom:38px; }
  .art-frame figcaption { font-size:8px; margin-top:18px; }
  .route-readout strong { font-size:13px; }
  .reach-readout strong { font-size:36px; }
  .chapter h2 { font-size:48px; }
  .chapter-copy { max-width:440px; font-size:15px; }
  .performance-section { padding:75px 0 55px; margin-top:50px; }
  .section-heading { grid-template-columns:1fr; gap:20px; }
  .section-heading h2,.matrix-copy h2,.start-heading h2 { font-size:46px; }
  .section-heading>p { font-size:16px; max-width:460px; }
  .speed-line { display:block; margin:45px 0 35px; }
  .speed-number { font-size:clamp(66px,12vw,98px); margin-bottom:22px; }
  .city-results { grid-template-columns:repeat(3,1fr); gap:30px 20px; }
  .city-results strong { font-size:28px; }
  .city-results>div>span { min-height:32px; font-size:10px; }
  .evidence-links { gap:24px; }
  .matrix-section,.start-section { grid-template-columns:1fr; gap:35px; padding-block:65px; }
  .matrix-art { min-height:280px; max-width:470px; width:100%; padding-left:15px; }
  .matrix-cells { gap:4px; }
  .matrix-fan { height:180px; }
  .start-options { margin-top:14px; }
}
@media(prefers-reduced-motion:reduce) { .home *, .home *::before, .home *::after { animation:none!important; transition:none!important; scroll-behavior:auto!important; } }
/* The stage fits beside the opening copy without pushing its caption below the fold. */
@media(min-width:761px) { .art-sticky { height:calc(100svh - 80px); min-height:540px; } .network-art { width:116%; margin-left:-9%; } }
.iso { transition:opacity 1100ms ease; }
@media(prefers-reduced-motion:reduce) { .iso { transition:none; } }
.matrix-cells i { animation:matrix-wave 5s ease-in-out infinite; animation-delay:var(--delay); animation-play-state:paused; }
.matrix-art.is-visible .matrix-cells i { animation-play-state:running; }
.motion-paused .matrix-cells i { animation-play-state:paused!important; }
@keyframes matrix-wave { 0%,35%,100% { opacity:var(--cell); } 55% { opacity:.95; } 75% { opacity:.12; } }

.metric-toolbar { display:flex; align-items:center; gap:24px; flex-wrap:wrap; margin-top:38px; }
.metric-toolbar[hidden] { display:none; }
.metric-switch { display:inline-flex; padding:4px; border:1px solid var(--border); border-radius:100px; gap:3px; }
.metric-switch button { border:0; border-radius:100px; background:none; color:var(--home-muted); padding:10px 18px; min-height:42px; cursor:pointer; font-size:13px; line-height:1.4; }
.metric-switch button span { font:10px var(--mono); margin-left:6px; opacity:.75; }
.metric-switch button[aria-pressed="true"] { background:var(--home-ink); color:var(--bg); }
.metric-switch button:hover:not([aria-pressed="true"]) { background:var(--bg-muted); color:var(--home-ink); }
.metric-toolbar p { font-size:12px; color:var(--home-muted); margin:0; }
#performance-results .speed-line { margin-top:48px; }
#latency-range,.city-latency { font-variant-numeric:tabular-nums; }
@media(max-width:760px) { .metric-toolbar { margin-top:28px; gap:12px; } .metric-toolbar p { flex-basis:100%; font-size:11px; } #performance-results .speed-line { margin-top:32px; } }

.upcoming-option { display:flex; gap:22px; padding:25px 0; align-items:baseline; color:var(--home-ink); }
.upcoming-option>div { flex:1; }
.upcoming-option p { font-size:13px; color:var(--text-soft); margin:0; }
.option-title { display:flex; gap:14px; align-items:baseline; flex-wrap:wrap; }
.coming-label { font:10px var(--mono); color:var(--home-muted); white-space:nowrap; }
.poros-section { display:grid; grid-template-columns:1fr 1fr; gap:100px; padding:100px 0 125px; border-top:1px solid var(--border); align-items:center; }
.poros-heading .eyebrow { margin-bottom:24px; }
.poros-heading h2 { font-size:clamp(88px,10vw,148px); letter-spacing:-.075em; line-height:1; margin:0 0 28px; font-weight:500; }
.poros-date { font:12px var(--mono); color:var(--home-ink); }
.poros-date>span { color:var(--signal-dark); margin-left:16px; }
.poros-copy h3 { font-size:32px; line-height:1.2; letter-spacing:-.04em; font-weight:500; margin-bottom:24px; }
.poros-copy p { max-width:440px; color:var(--text-soft); font-size:16px; line-height:1.7; }
@media(max-width:760px) { .poros-section { grid-template-columns:1fr; gap:35px; padding:65px 0 80px; } .poros-heading h2 { font-size:96px; } .poros-copy h3 { font-size:30px; } .poros-copy p { font-size:15px; } }