/* ============================================================
   STATION — The Line · design system (Night gear)
   Per station.DESIGN.md: amber #FFB000 on near-black, Space
   Grotesk / Inter / JetBrains Mono, hairlines not shadows,
   ≤2 amber elements per viewport, no gradients-as-decoration.
   ============================================================ */
:root{
  --bg:#0B0D10; --surface:#12151A; --raised:#171B21; --well:#0E1116;
  --fg:#E8E6E1; --muted:#9AA0A8; --dim:#5B6068;
  --line:rgba(255,255,255,.08); --line-strong:rgba(255,255,255,.14);
  --amber:#FFB000; --on-amber:#16181D; --amber-dim:rgba(255,176,0,.14);
  --good:#2FBF71; --good-dim:rgba(47,191,113,.13);
  --red:#FF6B5A; --red-dim:rgba(255,107,90,.12);
  --font-d:"Space Grotesk","Bahnschrift","Segoe UI",system-ui,sans-serif;
  --font-b:"Inter","Segoe UI",-apple-system,BlinkMacSystemFont,sans-serif;
  --font-m:"JetBrains Mono","Cascadia Mono",Consolas,ui-monospace,monospace;
  --r-sm:8px; --r-md:12px; --r-lg:18px; --pill:999px;
  --wrap:1200px; --wrap-tight:880px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} }
body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--font-b);
  font-size:17px;line-height:1.62;-webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;overflow-x:hidden}
img,video{max-width:100%;display:block}
a{color:var(--amber);text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:3px}
h1,h2,h3,h4{font-family:var(--font-d);margin:0;text-wrap:balance}
p{margin:0 0 1em}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}
.wrap-tight{max-width:var(--wrap-tight);margin:0 auto;padding:0 24px}
.mono{font-family:var(--font-m)}
::selection{background:var(--amber);color:var(--on-amber)}

/* ---------- nav ---------- */
.nav{position:fixed;top:0;left:0;right:0;z-index:50;
  background:color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line)}
.nav-in{max-width:var(--wrap);margin:0 auto;padding:0 24px;height:60px;
  display:flex;align-items:center;gap:26px}
.nav .mark{width:30px;height:30px;color:var(--fg);flex:none;transition:color .2s}
.nav a.home:hover .mark{color:var(--amber)}
.nav a.home{display:flex;align-items:center;gap:10px;color:var(--fg);font-family:var(--font-d);
  font-weight:700;letter-spacing:.14em;font-size:13px;text-decoration:none}
.nav-links{display:flex;gap:22px;align-items:center;margin-left:auto}
.nav-links a{color:var(--muted);font-size:13.5px;font-weight:520;text-decoration:none}
.nav-links a:hover{color:var(--fg)}
.nav .cta{background:var(--amber);color:var(--on-amber);font-family:var(--font-d);
  font-weight:650;font-size:13px;letter-spacing:.02em;padding:9px 18px;border-radius:var(--pill);
  text-decoration:none;transition:filter .15s, transform .1s}
.nav .cta:hover{filter:brightness(1.07);text-decoration:none}
.nav .cta:active{transform:translateY(1px)}
/* lines dropdown */
.dd{position:relative}
.dd > button{background:none;border:0;color:var(--muted);font:520 13.5px var(--font-b);
  cursor:pointer;padding:6px 2px;display:flex;gap:6px;align-items:center}
.dd > button:hover{color:var(--fg)}
.dd-menu{position:absolute;top:calc(100% + 10px);left:50%;transform:translateX(-50%);
  min-width:560px;background:var(--surface);border:1px solid var(--line-strong);
  border-radius:var(--r-lg);padding:18px;display:none;
  grid-template-columns:repeat(3,1fr);gap:4px 18px;
  box-shadow:0 24px 60px rgba(0,0,0,.5)}
.dd.open .dd-menu{display:grid}
.dd-menu .grp{font:700 10px var(--font-m);letter-spacing:.12em;color:var(--dim);
  text-transform:uppercase;padding:8px 8px 4px;grid-column:1/-1;border-top:1px solid var(--line)}
.dd-menu .grp:first-child{border-top:0;padding-top:2px}
.dd-menu a{display:flex;justify-content:space-between;gap:12px;padding:6px 8px;border-radius:8px;
  color:var(--fg);font-size:13.5px;text-decoration:none}
.dd-menu a:hover{background:var(--raised)}
.dd-menu a small{color:var(--dim);font-family:var(--font-m);font-size:11px}
@media(max-width:860px){ .dd-menu{position:fixed;left:12px;right:12px;transform:none;min-width:0;grid-template-columns:1fr 1fr} .nav-links a.quiet{display:none} }

/* ---------- hero (film) ---------- */
.hero{position:relative;min-height:92vh;display:flex;align-items:flex-end;overflow:hidden}
.hero-media{position:absolute;inset:0;z-index:0}
.hero-media video,.hero-media img{width:100%;height:100%;object-fit:cover}
.hero-media::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg, rgba(11,13,16,.42) 0%, rgba(11,13,16,.18) 42%, rgba(11,13,16,.86) 82%, var(--bg) 100%)}
.hero-inner{position:relative;z-index:1;width:100%;padding:120px 0 84px}
.eyebrow{font:640 12px var(--font-m);letter-spacing:.16em;text-transform:uppercase;color:var(--amber);margin:0 0 16px;display:flex;align-items:center;gap:10px}
.eyebrow .tick{width:22px;height:2px;background:var(--amber);display:inline-block}
.hero h1{font-size:clamp(2.4rem,6.2vw,4.4rem);font-weight:700;letter-spacing:-.028em;line-height:1.02;max-width:17ch}
.hero .sub{color:var(--muted);font-size:clamp(1rem,1.6vw,1.18rem);max-width:56ch;margin:20px 0 30px}
.cta-row{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.btn{display:inline-flex;align-items:center;gap:9px;font-family:var(--font-d);font-weight:650;
  font-size:15px;letter-spacing:.01em;padding:14px 26px;border-radius:var(--pill);
  text-decoration:none;transition:filter .15s, transform .1s, border-color .15s;cursor:pointer;border:0}
.btn:hover{text-decoration:none}
.btn:active{transform:translateY(1px)}
.btn:focus-visible{outline:2px solid var(--amber);outline-offset:3px}
.btn.primary{background:var(--amber);color:var(--on-amber)}
.btn.primary:hover{filter:brightness(1.07)}
.btn.ghost{background:transparent;color:var(--fg);border:1px solid var(--line-strong)}
.btn.ghost:hover{border-color:var(--muted)}
.btn.small{font-size:13px;padding:9px 18px}

/* ---------- departure board ---------- */
.board{border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  background:var(--well);overflow:hidden;white-space:nowrap;position:relative}
.board-track{display:inline-flex;gap:64px;padding:13px 0;animation:board-slide 46s linear infinite;will-change:transform}
.board-item{font:600 12.5px var(--font-m);letter-spacing:.06em;color:var(--muted);display:inline-flex;gap:10px;align-items:center}
.board-item b{color:var(--amber);font-weight:600}
.board-item .ok{color:var(--good)}
@keyframes board-slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){ .board-track{animation:none} }

/* ---------- sections ---------- */
.sec{padding:clamp(72px,10vw,128px) 0;position:relative}
.sec.tight{padding:clamp(48px,7vw,84px) 0}
.sec-eyebrow{font:640 11.5px var(--font-m);letter-spacing:.16em;text-transform:uppercase;color:var(--dim);margin:0 0 14px}
.sec h2{font-size:clamp(1.7rem,3.6vw,2.5rem);font-weight:700;letter-spacing:-.022em;line-height:1.08}
.sec .lede{color:var(--muted);font-size:1.06rem;max-width:62ch;margin:16px 0 0}

/* the drawn line (scroll-connected spine) */
.spine{position:absolute;left:50%;top:0;bottom:0;width:2px;transform:translateX(-50%);pointer-events:none;z-index:0}
.spine i{display:block;width:100%;height:100%;background:var(--line);position:relative}
.spine i::after{content:"";position:absolute;left:0;top:0;width:100%;height:var(--spine-fill,0%);background:var(--amber);transition:height .1s linear}

/* reveal — gated on html.js so a JS failure never hides content */
html.js .rv{opacity:0;transform:translateY(18px);transition:opacity .55s ease-out, transform .55s ease-out}
html.js .rv.on{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){ html.js .rv{opacity:1;transform:none;transition:none} }

/* ---------- timetable story ---------- */
.timetable{background:var(--well);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:8px 0;font-family:var(--font-m);max-width:680px}
.tt-row{display:grid;grid-template-columns:92px 1fr;gap:18px;padding:15px 26px;border-bottom:1px solid var(--line);align-items:baseline}
.tt-row:last-child{border-bottom:0}
.tt-time{font:600 13px var(--font-m);color:var(--dim);letter-spacing:.06em;white-space:nowrap}
.tt-ev{font-family:var(--font-b);font-size:15.5px;color:var(--fg)}
.tt-row.lost .tt-ev{color:var(--red)}
.tt-row.won .tt-time,.tt-row.won .tt-ev{color:var(--amber)}

/* ---------- transit map ---------- */
.mapbox{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:16px 8px;overflow-x:auto;-webkit-overflow-scrolling:touch}
.mapbox svg{display:block;min-width:1040px;width:100%;height:auto}
.mapbox .st-name{font-family:var(--font-d);font-size:14px;font-weight:650;fill:var(--fg);letter-spacing:.02em}
.mapbox .st-name a{fill:inherit}
.mapbox .st-price{font-family:var(--font-m);font-size:10.5px;fill:var(--muted)}
.mapbox .ln-label{font-family:var(--font-b);font-size:11px;font-weight:700;letter-spacing:.1em;fill:var(--dim);text-transform:uppercase}
.map-stop{cursor:pointer}
.map-stop:hover .st-name{fill:var(--amber)}

/* ---------- shelf / configurator ---------- */
.builder{display:grid;grid-template-columns:1.4fr .9fr;gap:22px;align-items:start}
@media(max-width:900px){.builder{grid-template-columns:1fr}}
.q-chips{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0 22px}
.q-chip{background:var(--surface);border:1px solid var(--line-strong);color:var(--muted);
  font:560 13.5px var(--font-b);padding:9px 16px;border-radius:var(--pill);cursor:pointer;transition:all .15s}
.q-chip:hover{color:var(--fg);border-color:var(--muted)}
.q-chip.on{background:var(--amber-dim);border-color:var(--amber);color:var(--amber)}
.tiles{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media(max-width:640px){.tiles{grid-template-columns:1fr}}
.tile{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);
  padding:14px 16px;display:flex;gap:12px;align-items:center;transition:border-color .15s;position:relative}
.tile:hover{border-color:var(--line-strong)}
.tile.on{border-color:var(--amber);background:var(--raised)}
.tile input{accent-color:var(--amber);width:17px;height:17px;flex:none;margin:0;cursor:pointer}
.tile .t-name{font:700 14px var(--font-d);letter-spacing:.03em;text-transform:uppercase}
.tile .t-sub{color:var(--dim);font-size:12px;line-height:1.35}
.tile .t-price{margin-left:auto;text-align:right;font:600 13px var(--font-m);color:var(--muted);white-space:nowrap}
.tile .t-ttl{display:block;font-size:10px;color:var(--dim)}
.tile a.t-more{position:absolute;inset:0;border-radius:inherit}
.tile .t-hit{position:relative;z-index:1;display:flex;gap:12px;align-items:center;width:100%}
.receipt{background:var(--well);border:1px solid var(--line-strong);border-radius:var(--r-lg);
  padding:24px;position:sticky;top:76px}
.receipt .r-eyebrow{font:640 11px var(--font-m);letter-spacing:.14em;color:var(--dim);text-transform:uppercase;margin:0 0 10px}
.r-total{font:700 clamp(2rem,4vw,2.6rem)/1 var(--font-d);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.r-total small{font:500 .95rem var(--font-b);color:var(--muted)}
.r-rows{margin:16px 0 4px;border-top:1px solid var(--line)}
.r-row{display:flex;justify-content:space-between;gap:10px;padding:8px 0;border-bottom:1px solid var(--line);font-size:13.5px}
.r-row b{font:600 13px var(--font-m)}
.r-row .inc{color:var(--good)}
.r-kpis{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:16px 0}
.r-kpi{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);padding:10px 12px}
.r-kpi .k{font:640 10px var(--font-m);letter-spacing:.1em;color:var(--dim);text-transform:uppercase}
.r-kpi .v{font:700 19px var(--font-d);font-variant-numeric:tabular-nums;margin-top:2px}
.r-verdict{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);
  padding:12px 14px;font-size:13.5px;color:var(--muted)}
.r-verdict.hit{background:var(--amber-dim);border-color:transparent;color:var(--amber)}
.r-note{font-size:11px;color:var(--dim);margin:12px 0 0;line-height:1.5}

/* ---------- proof / report ---------- */
.cards3{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px}
.pcard{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:22px}
.pcard .big{font:700 30px var(--font-d);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.pcard .cap{color:var(--muted);font-size:13.5px;margin-top:6px}

/* ---------- product page ---------- */
.p-hero{position:relative;min-height:86vh;display:flex;align-items:flex-end;overflow:hidden}
.p-hero .hero-inner{padding:130px 0 72px}
.stopcode{display:inline-flex;align-items:center;gap:10px;font:640 11.5px var(--font-m);
  letter-spacing:.14em;text-transform:uppercase;color:var(--amber);
  border:1px solid rgba(255,176,0,.35);border-radius:var(--pill);padding:6px 14px;margin-bottom:18px;background:rgba(11,13,16,.5)}
.stopcode .dot{width:8px;height:8px;border-radius:50%;background:var(--amber)}
.p-hero h1{font-size:clamp(2.2rem,5.6vw,3.9rem);font-weight:700;letter-spacing:-.028em;line-height:1.03;max-width:18ch}
.p-hero .plain{color:var(--muted);font-family:var(--font-m);font-size:13px;letter-spacing:.04em;margin:14px 0 0;text-transform:uppercase}
.p-hero .sub{color:var(--muted);font-size:1.08rem;max-width:54ch;margin:16px 0 30px}

/* calculator */
.calc{background:var(--well);border:1px solid var(--line-strong);border-radius:var(--r-lg);padding:26px;max-width:760px}
.calc .sliders{display:grid;gap:20px;margin:20px 0}
.srow label{display:flex;justify-content:space-between;font-size:13.5px;color:var(--muted);margin-bottom:8px}
.srow label output{font:640 14px var(--font-m);color:var(--fg)}
.srow input[type=range]{width:100%;accent-color:var(--amber);height:22px;cursor:pointer;background:transparent}
.calc .result{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:20px 0 8px}
@media(max-width:560px){.calc .result{grid-template-columns:1fr}}
.calc .r-box{border-radius:var(--r-md);padding:16px 18px;border:1px solid var(--line)}
.calc .r-box .k{font:640 10.5px var(--font-m);letter-spacing:.12em;text-transform:uppercase}
.calc .r-box .v{font:700 clamp(1.5rem,3vw,2rem) var(--font-d);font-variant-numeric:tabular-nums;margin-top:4px}
.calc .lose{background:var(--red-dim)} .calc .lose .k{color:var(--red)} .calc .lose .v{color:var(--red)}
.calc .cost{background:var(--amber-dim)} .calc .cost .k{color:var(--amber)} .calc .cost .v{color:var(--amber)}
.calc .verdict{font-size:14.5px;padding:14px 16px;border-radius:var(--r-md);border:1px solid var(--line);margin-top:6px}
.calc .verdict.yes{border-color:transparent;background:var(--good-dim);color:var(--good)}
.calc .verdict.no{border-color:transparent;background:var(--surface);color:var(--muted)}
.calc .fine{font-size:11.5px;color:var(--dim);margin:14px 0 0}

/* steps */
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;counter-reset:step}
.step{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:20px;counter-increment:step}
.step::before{content:counter(step,decimal-leading-zero);font:700 12px var(--font-m);color:var(--amber);letter-spacing:.1em;display:block;margin-bottom:10px}
.step h3{font-size:15.5px;font-weight:650;margin-bottom:6px}
.step p{color:var(--muted);font-size:13.8px;margin:0}

/* price */
.price-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px;align-items:stretch}
.price-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:26px;display:flex;flex-direction:column;gap:6px;position:relative}
.price-card.hi{border-color:var(--amber)}
.price-card.hi::before{content:"MOST CHOSEN";position:absolute;top:-9px;left:22px;font:700 9.5px var(--font-m);
  letter-spacing:.12em;background:var(--amber);color:var(--on-amber);padding:3px 10px;border-radius:var(--pill)}
.price-card .tname{font:700 13px var(--font-m);letter-spacing:.1em;color:var(--muted);text-transform:uppercase}
.price-card .pv{font:700 clamp(2rem,3.6vw,2.5rem)/1 var(--font-d);letter-spacing:-.02em;margin:8px 0 2px}
.price-card .pv small{font:500 .95rem var(--font-b);color:var(--muted);letter-spacing:0}
.price-card .reframe{color:var(--amber);font-size:13.5px;font-weight:560;margin:2px 0 12px}
.price-card ul{margin:0 0 18px;padding:0;list-style:none;display:grid;gap:7px}
.price-card li{font-size:13.8px;color:var(--muted);padding-left:20px;position:relative}
.price-card li::before{content:"";position:absolute;left:2px;top:8px;width:8px;height:2px;background:var(--amber)}
.price-card .btn{margin-top:auto;justify-content:center}
.price-note{font-size:12.5px;color:var(--dim);margin-top:14px;max-width:70ch}

/* objections */
.obj{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:700px){.obj{grid-template-columns:1fr}}
.obj-item{background:var(--well);border:1px solid var(--line);border-radius:var(--r-md);padding:18px 20px}
.obj-item h3{font-family:var(--font-b);font-weight:640;font-size:14.5px;margin-bottom:6px}
.obj-item p{color:var(--muted);font-size:13.8px;margin:0}

/* next stop */
.next-stop{background:var(--well);border-top:1px solid var(--line)}
.ns-in{display:flex;gap:26px;align-items:center;flex-wrap:wrap}
.ns-rail{flex:1;min-width:120px;height:2px;background:var(--line);position:relative}
.ns-rail::after{content:"";position:absolute;right:-1px;top:50%;transform:translate(0,-50%);width:12px;height:12px;border-radius:50%;background:var(--bg);border:2.5px solid var(--amber)}
.ns-body .k{font:640 11px var(--font-m);letter-spacing:.14em;color:var(--dim);text-transform:uppercase;display:block;margin-bottom:6px}
.ns-body h2{font-size:clamp(1.3rem,2.6vw,1.7rem);letter-spacing:-.015em}
.ns-body p{color:var(--muted);margin:8px 0 0;max-width:52ch}

/* footer */
footer{border-top:1px solid var(--line);background:var(--well);padding:56px 0 44px;margin-top:0}
.f-grid{display:grid;grid-template-columns:1.3fr repeat(3,1fr);gap:30px}
@media(max-width:860px){.f-grid{grid-template-columns:1fr 1fr}}
.f-grid h4{font:700 11px var(--font-m);letter-spacing:.14em;color:var(--dim);text-transform:uppercase;margin-bottom:12px}
.f-grid a{display:block;color:var(--muted);font-size:13.5px;padding:3px 0;text-decoration:none}
.f-grid a:hover{color:var(--fg)}
.f-brand p{color:var(--dim);font-size:13px;max-width:34ch;margin:12px 0 0}
.f-legal{margin-top:36px;padding-top:20px;border-top:1px solid var(--line);display:flex;gap:18px;flex-wrap:wrap;color:var(--dim);font-size:12px}
.f-legal a{color:var(--dim)}

/* misc */
.chiprow{display:flex;gap:8px;flex-wrap:wrap;margin-top:18px}
.chip{font:640 10.5px var(--font-m);letter-spacing:.08em;text-transform:uppercase;
  padding:5px 11px;border-radius:var(--pill);border:1px solid var(--line-strong);color:var(--muted);white-space:nowrap}
.chip.amber{color:var(--amber);border-color:rgba(255,176,0,.35);background:var(--amber-dim)}
.chip.good{color:var(--good);border-color:rgba(47,191,113,.3);background:var(--good-dim)}
.skip{position:absolute;left:-9999px;top:0;background:var(--amber);color:var(--on-amber);padding:10px 18px;z-index:99;border-radius:0 0 8px 0}
.skip:focus{left:0}