/* Sysenta sites — "Metro network". One ink, eight line colours, a white map ground.
   Line colours arrive per element as --c / --on (lines.css is generated from data/products). */

@font-face{font-family:"PlexAr";font-weight:400;font-display:swap;src:url(../fonts/ibm-plex-sans-arabic-arabic-400-normal.woff2) format("woff2");unicode-range:U+0600-06FF,U+0750-077F,U+0870-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FEFC}
@font-face{font-family:"PlexAr";font-weight:500;font-display:swap;src:url(../fonts/ibm-plex-sans-arabic-arabic-500-normal.woff2) format("woff2");unicode-range:U+0600-06FF,U+0750-077F,U+0870-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FEFC}
@font-face{font-family:"PlexAr";font-weight:700;font-display:swap;src:url(../fonts/ibm-plex-sans-arabic-arabic-700-normal.woff2) format("woff2");unicode-range:U+0600-06FF,U+0750-077F,U+0870-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FEFC}
@font-face{font-family:"PlexAr";font-weight:400;font-display:swap;src:url(../fonts/ibm-plex-sans-arabic-latin-400-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2212,U+FEFF,U+FFFD}
@font-face{font-family:"PlexAr";font-weight:500;font-display:swap;src:url(../fonts/ibm-plex-sans-arabic-latin-500-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2212,U+FEFF,U+FFFD}
@font-face{font-family:"PlexAr";font-weight:700;font-display:swap;src:url(../fonts/ibm-plex-sans-arabic-latin-700-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2212,U+FEFF,U+FFFD}
/* Wayfinding face: Big Shoulders (OFL), a signage sans drawn for a city's public lettering.
   Latin only — Arabic in the same element falls back to PlexAr. */
@font-face{font-family:"Shoulders";font-weight:700;font-display:swap;src:url(../fonts/BigShoulders-Bold.ttf) format("truetype");unicode-range:U+0000-00FF,U+2000-206F,U+20AC,U+2212}

:root{
  --ground:#FFFFFF; --tint:#F1F2F0; --ink:#15171A; --ink-2:#4B5058; --rule:#D3D6DA;
  --river:#DCEBF2; --focus:#15171A; --sel:#D3D6DA;
  --f:"PlexAr","Segoe UI",Tahoma,Arial,sans-serif;
  --f-way:"Shoulders","PlexAr","Segoe UI",Arial,sans-serif;
  --wrap:1240px; --gut:16px; --r:6px;
  --ease:cubic-bezier(.16,1,.3,1);
  color-scheme:light dark;
}
@media (prefers-color-scheme:dark){
  :root{--ground:#101214;--tint:#181B1F;--ink:#ECEDEE;--ink-2:#A8AEB6;--rule:#2E3238;--river:#13232B;--focus:#ECEDEE;--sel:#3A3F46}
}
@media (min-width:640px){:root{--gut:28px}}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scrollbar-color:var(--ink-2) var(--tint)}
html,body{overflow-x:clip;max-width:100%}
body{margin:0;background:var(--ground);color:var(--ink);font:400 1rem/1.75 var(--f);text-rendering:optimizeLegibility;caret-color:var(--ink);accent-color:var(--ink)}
:lang(en) body,body:lang(en){line-height:1.6}
img,svg{max-width:100%}
img{height:auto;display:block}
a{color:inherit;text-underline-offset:.22em;text-decoration-thickness:1.5px}
::selection{background:var(--sel);color:var(--ink)}
:focus-visible{outline:3px solid var(--focus);outline-offset:3px;border-radius:2px}
h1,h2,h3,p{margin-top:0}
h1,h2,h3{text-wrap:balance}
p{text-wrap:pretty}
.sr,.hp{position:absolute!important;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.skip{position:absolute;inset-inline-start:12px;top:-60px;z-index:50;background:var(--ink);color:var(--ground);padding:.6rem 1rem;border-radius:var(--r);font-weight:700}
.skip:focus{top:12px}
.wrap{width:min(100% - 2*var(--gut),var(--wrap));margin-inline:auto}
.narrow{max-width:760px}
.num{font-family:var(--f-way);font-weight:700;font-size:1.12em;font-variant-numeric:tabular-nums;letter-spacing:.01em}

/* ---------- type */
.h1{font:700 clamp(1.75rem,1.2rem + 1.9vw,2.625rem)/1.3 var(--f);margin-bottom:1rem;max-width:22ch}
.h1 span{display:block}
.top-cta{display:none;margin:0 0 1.25rem}
@media (max-width:999px){.top-cta{display:block}}
.top .h1{font-size:clamp(1.75rem,1.2rem + 1.7vw,2.5rem);max-width:none;margin-bottom:.6rem}
@media (min-width:1000px){.top .h1 span{display:inline}.top .lead{margin-bottom:1rem}}
.h1 span+span{color:var(--ink-2)}
.h2{font:700 clamp(1.375rem,1.1rem + .9vw,1.75rem)/1.4 var(--f);margin-bottom:.6rem}
.h3{font:700 1.125rem/1.5 var(--f);margin-bottom:.4rem}
:lang(en) .h1,:lang(en) .h2,:lang(en) .h3{font-family:var(--f-way);letter-spacing:.005em}
:lang(en) .h1{font-size:clamp(2rem,1.4rem + 2vw,2.75rem);line-height:1.08;max-width:20ch}
:lang(en) .top .h1{font-size:clamp(2rem,1.4rem + 1.9vw,2.75rem);max-width:none}
:lang(en) .h2{font-size:clamp(1.6rem,1.25rem + 1.1vw,2rem);line-height:1.12}
:lang(en) .h3{font-size:1.3rem;line-height:1.2}
.lead{font-size:clamp(1rem,.95rem + .3vw,1.125rem);color:var(--ink-2);max-width:62ch;margin-bottom:1.5rem}
.sub{color:var(--ink-2);max-width:64ch;margin-bottom:2.25rem}
.note{color:var(--ink-2);font-size:.9rem}
.link{font-weight:700;color:var(--ink)}
.link:hover{text-decoration-thickness:3px}

/* ---------- line bullets (wayfinding codes) */
.bullet{display:inline-grid;place-items:center;flex:none;min-width:2.2em;height:2.2em;padding:0 .3em;border-radius:5px;background:var(--c,var(--ink));color:var(--on,var(--ground));font:700 .95rem/1 var(--f-way);letter-spacing:.06em;direction:ltr}
.bullet-lg{font-size:1.05rem}
.bullet-xl{font-size:clamp(1.35rem,2.2vw,1.75rem);border:3px solid var(--on)}

/* ---------- buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:46px;padding:.5rem 1.2rem;border-radius:var(--r);border:2px solid transparent;font:700 .95rem/1.25 var(--f);text-decoration:none;cursor:pointer;transition:transform .2s var(--ease),box-shadow .2s var(--ease),background-color .2s}
.btn:hover{transform:translateY(-2px);box-shadow:0 8px 18px -8px rgba(0,0,0,.45)}
.btn:active{transform:translateY(0);box-shadow:none}
.btn-sm{min-height:44px;padding:.4rem .95rem;font-size:.9rem}
.btn-line{background:var(--c);color:var(--on)}
.btn-ink{background:var(--ink);color:var(--ground)}
.btn-ghost{border-color:var(--ink);color:var(--ink);background:transparent}
.btn-on{background:var(--on);color:var(--c)}
.btn-ghost-on{border-color:var(--on);color:var(--on)}
.acts{display:flex;flex-wrap:wrap;gap:.75rem;align-items:center}

/* ---------- header: an ink signage band */
.hdr{background:#15171A;color:#fff;position:sticky;top:0;z-index:40}
.hdr :focus-visible{outline-color:#fff}
.hdr-in{width:min(100% - 2*var(--gut),1400px);margin-inline:auto;display:flex;align-items:center;gap:1rem;min-height:62px}
.brand{display:inline-flex;align-items:center;gap:.55rem;text-decoration:none;font:700 1.4rem/1 var(--f-way);letter-spacing:.03em;direction:ltr}
.mark{width:34px;height:34px;flex:none}
.hdr .mark{color:#fff;--mark-dot:#15171A}
.nav{display:flex;align-items:center;gap:.25rem;margin-inline-start:auto}
.nav a{color:#fff;text-decoration:none;padding:.5rem .75rem;border-radius:4px;font-weight:500;font-size:.95rem;min-height:44px;display:inline-flex;align-items:center}
.nav a:hover,.nav a[aria-current]{background:rgba(255,255,255,.12)}
.nav a[aria-current]{box-shadow:inset 0 -3px 0 #fff}
.nav .lang{font-weight:700}
.nav .acct{border:2px solid #fff;margin-inline-start:.4rem;font-weight:700}
.nav-t{position:absolute;opacity:0;width:44px;height:44px;inset-inline-end:var(--gut);top:9px;margin:0;cursor:pointer;z-index:2}
.nav-b{display:none;margin-inline-start:auto;width:44px;height:44px;place-items:center}
.nav-b svg{width:26px;height:26px;fill:none;stroke:#fff;stroke-width:2.2;stroke-linecap:round}
.nav-t:focus-visible+.nav-b{outline:3px solid #fff;border-radius:4px}
@media (max-width:860px){
  .nav-b{display:grid}
  .nav-t{display:block}
  .nav{display:none;position:absolute;inset-inline:0;top:100%;background:#15171A;flex-direction:column;align-items:stretch;padding:.5rem var(--gut) 1rem;gap:0;border-top:1px solid rgba(255,255,255,.15)}
  .nav-t:checked~.nav{display:flex}
  .nav .acct{margin:.5rem 0 0;justify-content:center}
}
@media (min-width:861px){.nav-t{display:none}}

/* ---------- home top + planner */
.top{padding-block:clamp(1.5rem,3vw,2.25rem) 1rem}
.planner,.bill{border:0;padding:0;margin:0}
.planner legend,.bill legend{font-weight:700;margin-bottom:.6rem;padding:0}
.chips{display:flex;flex-wrap:wrap;gap:.5rem;position:relative}
.chips input{position:absolute;opacity:0;width:1px;height:1px}
.chips label{display:inline-flex;align-items:center;min-height:44px;padding:.4rem 1rem;border:2px solid var(--ink);border-radius:999px;cursor:pointer;font-weight:500;font-size:.95rem;transition:background-color .2s,color .2s}
.chips label:hover{background:var(--tint)}
.chips input:checked+label{background:var(--ink);color:var(--ground)}
.chips input:focus-visible+label{outline:3px solid var(--focus);outline-offset:2px}

/* ---------- the network: boards + map */
.net{width:min(100% - 2*var(--gut),1400px);margin-inline:auto;display:grid;gap:1.25rem;padding-bottom:2rem}
@media (min-width:1000px){.net{grid-template-columns:minmax(300px,350px) 1fr;align-items:start}.boards{position:sticky;top:78px}}
.boards{min-width:0}
.board{display:none;flex-direction:column;border:2px solid var(--ink);border-radius:8px;background:var(--ground);overflow:hidden;padding-bottom:1.1rem}
.board[data-b="hub"]{display:flex}
.board>:not(.board-sign){margin-inline:1.1rem}
.board-sign{display:flex;align-items:center;gap:.8rem;background:var(--c,#15171A);color:var(--on,#fff);padding:1rem 1.1rem;margin-bottom:1rem}
.board-hub .board-sign{background:#15171A;color:#fff}
.board-hub .mark{color:#fff;--mark-dot:#15171A}
.mark-lg{width:46px;height:46px}
.bn{display:block;font:700 1.9rem/1 var(--f-way);letter-spacing:.01em}
.board-hub .bn{font:700 1.25rem/1.3 var(--f)}
:lang(en) .board-hub .bn{font:700 1.65rem/1 var(--f-way)}
.ba{display:block;font:500 .875rem/1.4 var(--f);opacity:.92}
.bt{font:700 1.05rem/1.5 var(--f);margin-bottom:.35rem}
.bd{color:var(--ink-2);margin-bottom:.75rem;font-size:.9375rem;line-height:1.7}
.bh{font-weight:500;font-size:.9rem;margin-bottom:.5rem}
.bp{margin-bottom:.75rem}
.pf{font-weight:500}
.pf small{color:var(--ink-2);font-size:.85em}
.board-a{display:flex;flex-wrap:wrap;gap:.6rem 1rem;align-items:center;margin-top:.25rem}
.hub-list{list-style:none;padding:0;margin-block:0;display:grid;grid-template-columns:1fr 1fr;gap:.15rem .5rem}
.hub-list li{transition:opacity .25s}
.hub-list small{display:none}
.hub-list a{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:.55rem;padding:.35rem .25rem;text-decoration:none;border-radius:4px;min-height:44px}
.hub-list a:hover{background:var(--tint)}
.hub-list a span{font:700 1.05rem/1 var(--f-way)}
.hub-list small{color:var(--ink-2);font-size:.85rem;line-height:1.35;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.mapbox{min-width:0;position:relative}
.mapscroll{overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:thin}
.nm{display:block;width:100%;height:auto}
.pan{display:none;font-size:.9rem;color:var(--ink-2);margin:.4rem 0 0}
@media (max-width:999px){.net{display:flex;flex-direction:column}.mapbox{order:-1}}
@media (max-width:480px){.planner .chips label{min-height:40px;padding:.3rem .8rem;font-size:.9rem}}

.nm-river{fill:none;stroke:var(--river);stroke-width:46;stroke-linecap:round}
.ln{transition:opacity .3s var(--ease),filter .3s var(--ease)}
.ln:focus{outline:none}
.ln-hit{fill:none;stroke:transparent;stroke-width:38;pointer-events:stroke}
.ln-path{fill:none;stroke:var(--c);stroke-width:12;stroke-linecap:round;stroke-linejoin:round;transition:stroke-width .3s var(--ease)}
.nm-dash .ln-path{stroke-dasharray:.028 .016;stroke-linecap:butt}
.ln-tick{stroke:var(--c);stroke-width:8}
.st-lbl{font:500 19px var(--f);fill:var(--ink);text-anchor:middle;paint-order:stroke;stroke:var(--ground);stroke-width:6px;stroke-linejoin:round}
.term{fill:var(--c);stroke:var(--ground);stroke-width:5}
.term-hollow{fill:var(--ground);stroke:var(--c);stroke-width:7}
.plate{fill:var(--c)}
.pn{font:700 32px var(--f-way);fill:var(--on);text-anchor:middle;letter-spacing:.01em}
.pa{font:500 17px var(--f);fill:var(--on);text-anchor:middle}
.train{fill:var(--ground);stroke:var(--ink);stroke-width:4;opacity:0;transition:opacity .2s}
.hub rect{fill:var(--ground);stroke:var(--ink);stroke-width:6}
.hub-n{font:700 31px var(--f-way);fill:var(--ink);text-anchor:middle;letter-spacing:.08em}
.hub-s{font:500 17px var(--f);fill:var(--ink-2);text-anchor:middle}
.ln:is(:hover,:focus-visible,.is-on) .ln-path{stroke-width:18}
.ln:is(:hover,:focus-visible,.is-on) .train{opacity:1}
.ln:focus-visible .plate{stroke:var(--ink);stroke-width:4}
.scope:has(.ln:is(:hover,:focus-visible)) .ln:not(:hover):not(:focus-visible){opacity:.16}
.scope[data-active]:not(:has(.ln:hover)) .ln:not(.is-on){opacity:.16}
.pc{display:none;font:700 64px var(--f-way);fill:var(--on);text-anchor:middle;letter-spacing:.04em}
@media (max-width:700px){.st-lbl,.pa{display:none}.pn{font-size:40px}.ln-path{stroke-width:16}}
@media (max-width:480px){.pn{display:none}.pc{display:inline}.term{r:18px}}
@media (prefers-reduced-motion:no-preference){
  .ln-path{animation:draw 1.3s var(--ease) backwards}
  .nm-dash .ln-path{animation:fadein 1s var(--ease) .7s backwards}
  .ln:nth-of-type(1) .ln-path{animation-delay:.05s}.ln:nth-of-type(2) .ln-path{animation-delay:.12s}
  .ln:nth-of-type(3) .ln-path{animation-delay:.19s}.ln:nth-of-type(4) .ln-path{animation-delay:.26s}
  .ln:nth-of-type(5) .ln-path{animation-delay:.33s}.ln:nth-of-type(6) .ln-path{animation-delay:.4s}
  .ln:nth-of-type(7) .ln-path{animation-delay:.47s}
}
@keyframes draw{from{stroke-dasharray:1;stroke-dashoffset:1}to{stroke-dasharray:1;stroke-dashoffset:0}}
@keyframes fadein{from{opacity:0}}

/* ---------- sections */
.sec{padding-block:clamp(3rem,6vw,5rem)}
.sec-tint{background:var(--tint)}
.page-top{padding-block:clamp(2.5rem,5vw,4rem) 1rem}

/* route rows: the map's legend, and the mobile way in */
.routes{list-style:none;padding:0;margin:0;border-top:2px solid var(--ink)}
.route{display:grid;gap:.75rem 1.5rem;padding:1.5rem 0;border-bottom:1px solid var(--rule);transition:opacity .3s}
@media (min-width:900px){
  .route{grid-template-columns:230px 1fr 190px auto;grid-template-areas:"id stops price act" "id desc riders riders";align-items:center}
  .route-id{grid-area:id;align-self:start}.stops{grid-area:stops}.route-d{grid-area:desc}.route-p{grid-area:price}.route-a{grid-area:act}.riders-row{grid-area:riders}
}
.route-id{display:grid;grid-template-columns:auto 1fr;gap:.2rem .7rem;align-items:center;text-decoration:none}
.route-id .bullet{grid-row:span 2}
.rn{font:700 2rem/1 var(--f-way)}
.rt{color:var(--ink-2);font-size:.92rem;line-height:1.4}
.route-id:hover .rn{text-decoration:underline;text-decoration-thickness:3px;text-decoration-color:var(--c)}
.route-d{color:var(--ink-2);margin:0;font-size:.98rem;line-height:1.7;max-width:62ch}
.route-p{font-size:.98rem}
.stops{list-style:none;margin:0;padding:0;display:flex;position:relative;min-height:62px}
.stops::before{content:"";position:absolute;top:9px;inset-inline:9px;height:8px;background:var(--c);border-radius:4px}
.stops-dash::before{background:repeating-linear-gradient(to right,var(--c) 0 16px,transparent 16px 26px)}
.stops li{flex:1;position:relative;padding-top:30px;font-size:.92rem;font-weight:500;line-height:1.35;padding-inline-end:.5rem}
.stops li::before{content:"";position:absolute;top:2px;inset-inline-start:0;width:22px;height:22px;border-radius:50%;background:var(--ground);border:5px solid var(--c)}
.stops .end{flex:0 0 auto;text-align:end;padding-inline-end:0}
.stops .end::before{inset-inline-start:auto;inset-inline-end:0;background:var(--c);border-color:var(--c);box-shadow:inset 0 0 0 3px var(--ground)}
.stops .end-hollow::before{background:var(--ground);box-shadow:none}
.stops .end span{font:700 1.15rem/1.2 var(--f-way)}
.riders{display:flex;flex-wrap:wrap;align-items:baseline;gap:.25rem .6rem;font-size:.93rem}
.riders>span{color:var(--ink-2)}
.riders ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.25rem .9rem}
.riders small{color:var(--ink-2)}
.riders-on>span,.riders-on small{color:inherit;opacity:.88}

/* platform: real screenshots */
.platform{display:grid;grid-auto-flow:column;grid-auto-columns:min(82vw,430px);gap:1.25rem;overflow-x:auto;scroll-snap-type:x mandatory;padding:0 max(var(--gut),(100% - var(--wrap))/2) 1rem;scroll-padding-inline:max(var(--gut),(100% - var(--wrap))/2)}
.plat{margin:0;scroll-snap-align:start}
.plat a{display:block;text-decoration:none;border:2px solid var(--ink);border-radius:8px;overflow:hidden;background:var(--ground);transition:transform .25s var(--ease),box-shadow .25s var(--ease)}
.plat a:hover{transform:translateY(-3px);box-shadow:0 14px 28px -14px rgba(0,0,0,.4)}
.plat-band{display:flex;align-items:center;gap:.6rem;background:var(--c);color:var(--on);padding:.55rem .8rem;font:700 1.35rem/1 var(--f-way)}
.plat-band .bullet{border:2px solid var(--on)}
.plat img{aspect-ratio:16/10;object-fit:cover;width:100%}
.plat figcaption{font-size:.92rem;color:var(--ink-2);padding-top:.5rem}

.synth{position:relative;aspect-ratio:16/10;background:var(--ground);border:2px dashed var(--ink-2);margin:6px;padding:2.2rem 1rem .75rem;display:flex;flex-direction:column;font-size:.85rem;line-height:1.4}
.synth-tag{position:absolute;top:.5rem;inset-inline-start:.5rem;background:var(--ink);color:var(--ground);font-weight:700;font-size:.75rem;padding:.15rem .5rem;border-radius:4px}
.synth-h{font-weight:700;margin-bottom:.4rem}
.synth ul{list-style:none;margin:0;padding:0;display:grid;gap:.15rem}
.synth li{display:flex;justify-content:space-between;border-bottom:1px solid var(--rule);padding:.1rem 0}
.synth .ok{color:var(--ink)}.synth .no{color:var(--ink-2);font-weight:500}
.synth-n{margin:auto 0 0;color:var(--ink-2);font-size:.78rem}
.lh-media .synth{aspect-ratio:auto;min-height:300px;color:var(--ink)}

/* journey: the interchange in four stations */
.journey{list-style:none;padding:0;margin:0 0 1.5rem;display:grid;gap:1.25rem;position:relative}
.journey li{position:relative;padding-inline-start:2.6rem;display:flex;flex-direction:column}
.journey li::before{content:"";position:absolute;inset-inline-start:0;top:.3rem;width:26px;height:26px;border-radius:50%;border:6px solid var(--ink);background:var(--ground);z-index:1}
.journey::before{content:"";position:absolute;inset-inline-start:10px;top:.5rem;bottom:.5rem;width:6px;background:var(--ink)}
.journey b{font-size:1.05rem}
.journey span{color:var(--ink-2)}
@media (min-width:900px){
  .journey{grid-template-columns:repeat(4,1fr);gap:1.5rem}
  .journey::before{inset-inline:13px;top:13px;bottom:auto;width:auto;height:6px}
  .journey li{padding:2.6rem 1rem 0 0;padding-inline-start:0}
  .journey li::before{top:0}
}
.xu{font-weight:500}

/* departure boards (tables) */
.tbl-wrap{overflow-x:auto;border-top:2px solid var(--ink)}
.dep{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
.dep caption{text-align:start;color:var(--ink-2);font-size:.92rem;padding:.6rem 0;caption-side:top}
.dep th,.dep td{padding:.9rem .75rem;text-align:start;border-bottom:1px solid var(--rule);vertical-align:middle}
.dep thead th{font-size:.88rem;color:var(--ink-2);font-weight:500;white-space:nowrap}
.dep td,.dep th[scope=row]{white-space:nowrap}
.dep td.rd-n{white-space:normal}
.dep a{display:inline-flex;align-items:center;gap:.6rem;text-decoration:none;font:700 1.3rem/1 var(--f-way)}
.dep a:hover span{text-decoration:underline}
.rd-n b{font-size:1rem;display:block}
.rd-n small{color:var(--ink-2)}
.plans .tbl-wrap{max-width:820px}
.tbl-sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.plans{position:relative}
.tier-metric{color:var(--ink-2);font-size:.92rem;margin:.75rem 0 .5rem}
.tiers{list-style:none;margin:0 0 1rem;padding:0;display:grid;gap:1.25rem;position:relative;padding-inline-start:2.6rem}
.tiers::before{content:"";position:absolute;inset-inline-start:11px;top:.4rem;bottom:.4rem;width:10px;border-radius:5px;background:var(--c)}
.tiers li{position:relative;display:flex;flex-direction:column;gap:.1rem}
.tiers li::before{content:"";position:absolute;inset-inline-start:calc(-2.6rem + 3px);top:.2rem;width:26px;height:26px;border-radius:50%;background:var(--ground);border:6px solid var(--c)}
.tiers li.popular::before{background:var(--c);box-shadow:inset 0 0 0 3px var(--ground)}
.tiers b{font-size:1rem}
.tiers .pop{align-self:flex-start;margin:0}
.tiers .tl{color:var(--ink-2);font-size:.95rem}
.tiers .tp{font-size:1.05rem}
@media (min-width:760px){
 .tiers{grid-template-columns:repeat(3,1fr);padding-inline-start:0;padding-top:2.4rem;gap:1.5rem}
 .tiers::before{inset-inline:13px;top:9px;bottom:auto;width:auto;height:10px}
 .tiers li::before{inset-inline-start:0;top:-2.4rem}
}
.dep-plans tr.popular{background:var(--tint)}
.dep-plans th[scope=row]{font-weight:700}
.pop{font-style:normal;font-size:.75rem;font-weight:700;background:var(--c);color:var(--on);padding:.1rem .45rem;border-radius:4px;margin-inline-start:.4rem}
.price{font-size:1.05rem}
.py{display:none}
.scope:has(#bill-y:checked) .pm{display:none}
.scope:has(#bill-y:checked) .py{display:inline}
.bill{margin-bottom:1.25rem}
.extras{padding-inline-start:1.2rem;color:var(--ink-2)}
.quote-box{border:2px dashed var(--c);border-radius:8px;padding:1.25rem;display:flex;flex-wrap:wrap;gap:1rem;align-items:center;justify-content:space-between}
.quote-box p{margin:0;max-width:60ch}
.perp{display:flex;flex-wrap:wrap;gap:1rem;align-items:center;justify-content:space-between;border:2px solid var(--ink);border-radius:8px;padding:1.25rem;margin-top:2rem}
.perp p{margin:0;color:var(--ink-2)}
/* White-Label offer (emdado.com, P5-B14): the rider-plate grammar, an ink plate with its line's 10px band on top */
.wl{position:relative;overflow:hidden;display:flex;flex-wrap:wrap;gap:1rem 2rem;align-items:center;justify-content:space-between;border:2px solid var(--ink);border-radius:8px;padding:1.6rem 1.25rem 1.25rem;margin-top:1.25rem}
.wl::before{content:"";position:absolute;inset:0 0 auto;height:10px;background:var(--c)}
.wl-copy{flex:1 1 32rem;min-width:0}
.wl-copy p{margin:0 0 .6rem;color:var(--ink-2);max-width:62ch}
.wl-copy ul{margin:0;padding-inline-start:1.2rem;max-width:68ch}
.wl-copy li{margin-bottom:.3rem}

/* closing: every line runs under one sign */
.close{position:relative;padding-block:clamp(4rem,9vw,7rem);overflow:hidden}
.close-lines{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;gap:12px}
.close-lines i{display:block;height:14px;background:var(--c)}
.close-lines i.dash{background:repeating-linear-gradient(to right,var(--c) 0 34px,transparent 34px 52px)}
.close-plate{position:relative;width:min(100% - 2*var(--gut),700px);margin-inline:auto;background:var(--ground);border:3px solid var(--ink);border-radius:10px;padding:clamp(1.5rem,4vw,2.5rem);text-align:center}
.close-plate p{color:var(--ink-2)}
.close-plate .acts{justify-content:center}

/* ---------- line page */
.line-hero{background:var(--c);color:var(--on);padding-block:clamp(2rem,5vw,4rem)}
.line-hero.is-custom{background-image:repeating-linear-gradient(to right,var(--on) 0 30px,transparent 30px 48px);background-size:100% 10px;background-repeat:no-repeat;background-position:bottom}
.line-hero-in{display:grid;gap:2rem;align-items:center}
@media (min-width:1000px){.line-hero-in{grid-template-columns:1fr 1.05fr}}
.crumbs{display:flex;gap:.5rem;font-size:.92rem;margin-bottom:1rem;opacity:.92}
.crumbs a{color:inherit}
.lh-h1{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem 1rem;margin:0 0 1rem;font-weight:700}
.lh-name{font:700 clamp(2.6rem,1.6rem + 4vw,4.25rem)/1 var(--f-way);letter-spacing:.005em;padding-bottom:.08em}
.lh-ar{font:700 clamp(1.15rem,1rem + .6vw,1.4rem)/1.3 var(--f)}
.lh-tag{flex-basis:100%;font:700 clamp(1.15rem,1rem + .7vw,1.5rem)/1.45 var(--f)}
:lang(en) .lh-tag{font-family:var(--f-way);font-size:clamp(1.35rem,1.1rem + 1vw,1.75rem);line-height:1.15}
.lh-lead{max-width:60ch;font-size:1rem;margin-bottom:1.5rem}
.lh-media img{border-radius:8px;border:3px solid var(--on);box-shadow:0 24px 48px -20px rgba(0,0,0,.5);width:100%}
.station-link{display:inline-flex;flex-wrap:wrap;align-items:center;gap:.25rem .75rem;margin-top:1.25rem;border:2px solid var(--on);border-radius:var(--r);padding:.5rem .9rem;text-decoration:none;min-height:44px}
.station-link span{font-size:.92rem}
.station-link b{font:700 1.35rem/1 var(--f-way)}
.station-link:hover{background:var(--on);color:var(--c)}
.line-hero .riders{margin-top:1.25rem}
.lh-rail{display:none}

.route-grid{display:grid;gap:2.5rem}
@media (min-width:1000px){.route-grid{grid-template-columns:1fr 320px;align-items:start}.for{position:sticky;top:90px}}
.route-list{list-style:none;margin:0;padding:0;padding-inline-start:3rem;position:relative;max-width:68ch}
.route-list::before{content:"";position:absolute;inset-inline-start:1rem;top:.6rem;bottom:.6rem;width:10px;background:var(--c);border-radius:5px}
.route-list.is-custom::before{background:repeating-linear-gradient(to bottom,var(--c) 0 18px,transparent 18px 30px)}
.route-list li{position:relative;padding-bottom:1.75rem}
.route-list li::before{content:"";position:absolute;inset-inline-start:calc(-2rem + 5px - 13px);top:.35rem;width:26px;height:26px;border-radius:50%;background:var(--ground);border:6px solid var(--c)}
.route-list li:first-child::before,.route-list li:last-child::before{background:var(--c);box-shadow:inset 0 0 0 3px var(--ground)}
.route-list h3{font:700 1.15rem/1.45 var(--f);margin-bottom:.2rem}
:lang(en) .route-list h3{font-family:var(--f-way);font-size:1.3rem;line-height:1.15}
.route-list p{color:var(--ink-2);margin:0}
.for{border-top:10px solid var(--c);padding-top:1rem}
.for ul{padding-inline-start:1.2rem;margin:0}
.for li{margin-bottom:.4rem}
.gallery{display:grid;gap:1.25rem;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr))}
.gallery figure{margin:0}
.gallery a{display:block;border:1px solid var(--rule);border-radius:var(--r);overflow:hidden;transition:box-shadow .25s var(--ease)}
.gallery a:hover{box-shadow:0 14px 28px -14px rgba(0,0,0,.4)}
.gallery figcaption{font-size:.92rem;color:var(--ink-2);padding-top:.4rem}
.transfer{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:1rem 1.75rem;position:relative;padding-top:1.4rem;border-top:6px solid var(--ink)}
.transfer li{position:relative}
.transfer li::before{content:"";position:absolute;top:calc(-1.4rem - 9px);inset-inline-start:.9rem;width:12px;height:12px;border-radius:50%;background:var(--ground);border:3px solid var(--ink)}
.transfer a,.pick a{display:inline-flex;gap:.6rem;align-items:center;text-decoration:none;min-height:44px}
.pick{list-style:none;padding:0;margin:0 0 1.5rem;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.25rem 1rem}
.pick a span{font:700 1.25rem/1 var(--f-way)}
.pick a:hover span,.transfer a:hover span{text-decoration:underline;text-decoration-color:var(--c);text-decoration-thickness:3px}
.sign-h{display:flex;align-items:center;gap:.8rem}
.transfer a span{font:700 1.4rem/1 var(--f-way)}
.transfer small{color:var(--ink-2);font-size:.85rem;line-height:1.3}


/* ---------- pricing page */
.acct-row{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem 1.25rem;border:2px solid var(--ink);border-radius:8px;padding:.9rem 1.1rem;margin-top:1rem}
.acct-row .mark{color:var(--ink);--mark-dot:var(--ground)}
.price-lines{display:grid;gap:3.5rem;padding-block:2.5rem 1rem}
.price-lines>*,.route-grid>*,.contact-grid>*,.line-hero-in>*{min-width:0}
.pl-head{display:flex;flex-wrap:wrap;gap:1rem;align-items:center;border-top:8px solid var(--c);padding-top:1rem;margin-bottom:.5rem}
.pl-head .h2{margin:0}
.pl-head p{margin:0;color:var(--ink-2)}
.pl-acts{margin-inline-start:auto;display:flex;flex-wrap:wrap;gap:.5rem 1rem;align-items:center}
.faq details{border-bottom:1px solid var(--rule);padding:1rem 0}
.faq summary{font-weight:700;cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:1rem;min-height:44px;align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex:none;width:16px;height:16px;border-radius:50%;border:4px solid var(--ink)}
.faq details[open] summary::after{background:var(--ink)}
.faq p{color:var(--ink-2);margin:.5rem 0 0}

/* ---------- contact */
.contact-grid{display:grid;gap:2.5rem}
@media (min-width:960px){.contact-grid{grid-template-columns:1fr 1.2fr;align-items:start}}
.form{display:grid;gap:1rem;border:2px solid var(--ink);border-radius:10px;padding:clamp(1.1rem,3vw,2rem);background:var(--ground)}
.fld{display:grid;gap:.35rem}
.fld-2{display:grid;gap:1rem}
@media (min-width:640px){.fld-2{grid-template-columns:1fr 1fr}}
.fld label{font-weight:700;font-size:.92rem}
.fld small{font-weight:400;color:var(--ink-2)}
input,select,textarea{font:inherit;color:var(--ink);background:var(--ground);border:2px solid var(--rule);border-radius:var(--r);min-height:50px;padding:.55rem .8rem;width:100%;transition:border-color .2s}
textarea{resize:vertical;min-height:130px}
input:hover,select:hover,textarea:hover{border-color:var(--ink-2)}
input:focus,select:focus,textarea:focus{border-color:var(--ink);outline:3px solid var(--focus);outline-offset:1px}
input:user-invalid{border-color:#A1123A}
::placeholder{color:var(--ink-2)}
.form-msg{margin:0;font-weight:700;min-height:1.5em}
.form-msg.is-err{color:#A1123A}
@media (prefers-color-scheme:dark){.form-msg.is-err,input:user-invalid{color:#FF8A8A;border-color:#FF8A8A}}
.form button[disabled]{opacity:.6;cursor:progress;transform:none;box-shadow:none}
.direct ul{list-style:none;padding:0}
.direct a{font-weight:700}

/* ---------- legal */
.draft{border:2px dashed var(--ink-2);border-radius:var(--r);padding:1rem;font-weight:500}
.legal li{margin-bottom:.5rem}

/* ---------- footer */
.ftr{background:var(--tint);border-top:2px solid var(--ink);padding-top:3rem;margin-top:0}
.ftr-grid{display:grid;gap:2rem}
@media (min-width:900px){.ftr-grid{grid-template-columns:1.1fr 1.5fr .8fr}}
.ftr .brand{color:var(--ink);margin-bottom:.75rem}
.ftr .mark{color:var(--ink);--mark-dot:var(--tint)}
.ftr-about p{color:var(--ink-2);max-width:42ch}
.ftr-h{font:700 1rem var(--f);margin-bottom:.75rem}
.ftr-lines,.ftr-list{list-style:none;padding:0;margin:0}
.ftr-lines{display:grid;gap:.15rem}
@media (min-width:560px){.ftr-lines{grid-template-columns:1fr 1fr;column-gap:1rem}}
.ftr-lines a{display:grid;grid-template-columns:auto 1fr;gap:0 .6rem;align-items:center;text-decoration:none;padding:.3rem 0;min-height:44px}
.ftr-lines .bullet{grid-row:span 2;font-size:.8rem}
.ftr-lines span{font:700 1.15rem/1.1 var(--f-way)}
.ftr-lines small{color:var(--ink-2);font-size:.8rem;line-height:1.3}
.ftr-list li a{display:inline-flex;min-height:40px;align-items:center}
.legend{list-style:none;padding:0;margin:1rem 0 0;display:flex;flex-wrap:wrap;gap:.5rem 1.25rem;font-size:.85rem;color:var(--ink-2)}
.legend li{display:flex;align-items:center;gap:.45rem}
.lg{display:inline-block;width:16px;height:16px;border-radius:50%;border:4px solid var(--ink)}
.lg-fill{background:var(--ink)}
.lg-dash{width:30px;height:6px;border:0;border-radius:0;background:repeating-linear-gradient(to right,var(--ink) 0 8px,transparent 8px 13px)}
.ftr-base{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.5rem;padding-block:1.5rem;margin-top:2rem;border-top:1px solid var(--rule);font-size:.88rem;color:var(--ink-2)}

/* ---------- network map: "you are here" (product sites) */
.nm-here .ln:not(.is-here){filter:grayscale(1)}
.nm-here .ln:not(.is-here) :is(.ln-path,.ln-tick,.term){opacity:.35}
.nm-here .ln:not(.is-here):is(:hover,:focus-visible),.nm-here .ln.is-on{filter:none}
.nm-here .ln:not(.is-here):is(:hover,:focus-visible) :is(.ln-path,.ln-tick,.term),.nm-here .ln.is-on :is(.ln-path,.ln-tick,.term){opacity:1}
.here{fill:none;stroke:var(--ink);stroke-width:5}
.here-l{font:700 24px var(--f);fill:var(--ink);text-anchor:middle;paint-order:stroke;stroke:var(--tint);stroke-width:6px;stroke-linejoin:round}
@media (max-width:700px){.here-l{display:none}}

/* ---------- product site: a station on one line (audiexa.com and the W3/W4 sites) */
.hdr-station{border-bottom:6px solid var(--c)}
.brand-line{gap:.6rem}
.brand-line .bullet{font-size:.95rem}
.by{display:inline-flex;align-items:center;gap:.4rem;color:#fff;text-decoration:none;font-weight:500;font-size:.95rem;min-height:44px;padding-inline:.15rem .4rem;border-radius:4px}
.by .mark{width:22px;height:22px;color:#fff;--mark-dot:#15171A}
.by-dot{font-weight:700;margin-inline-end:.2rem;opacity:.8}
.by:hover span:last-child{text-decoration:underline}
.by-ink{color:var(--ink);font-weight:700;padding:0}
.by-ink .mark{color:var(--ink);--mark-dot:var(--tint)}
.ftr .brand-line{color:var(--ink)}

.lh-value{flex-basis:100%;font:700 clamp(1.375rem,1.1rem + .9vw,1.75rem)/1.45 var(--f);max-width:28ch;margin-top:.35rem}
:lang(en) .lh-value{font-family:var(--f-way);font-size:clamp(1.6rem,1.25rem + 1.1vw,2rem);line-height:1.12;max-width:24ch}
.lh-note{font-size:.92rem;margin:.8rem 0 0}
.ride-hero :focus-visible{outline-color:var(--on)}
.ride-media{min-width:0}
.ride-hero .wrap{width:min(100% - 2*var(--gut),1400px)}
@media (min-width:1000px){.ride-hero .line-hero-in{grid-template-columns:minmax(0,.8fr) minmax(0,1.3fr);gap:3rem}}
.ride-shot{margin:0;display:none}
.ride-shot:first-child{display:block}
.ride-shot figcaption{font-size:.95rem;line-height:1.6;margin-top:.8rem;max-width:62ch;min-height:3.2em}
@supports selector(:has(a)){
  .ride-hero .ride-shot:first-child{display:none}
  .ride-hero:has(#rs-0:checked) .ride-shot:nth-child(1),.ride-hero:has(#rs-1:checked) .ride-shot:nth-child(2),
  .ride-hero:has(#rs-2:checked) .ride-shot:nth-child(3),.ride-hero:has(#rs-3:checked) .ride-shot:nth-child(4),
  .ride-hero:has(#rs-4:checked) .ride-shot:nth-child(5),.ride-hero:has(#rs-5:checked) .ride-shot:nth-child(6),
  .ride-hero:has(#rs-6:checked) .ride-shot:nth-child(7),.ride-hero:has(#rs-7:checked) .ride-shot:nth-child(8),
  .ride-hero:has(#rs-8:checked) .ride-shot:nth-child(9),.ride-hero:has(#rs-9:checked) .ride-shot:nth-child(10){display:block}
  .ride:has(#rs-1:checked){--at:1}.ride:has(#rs-2:checked){--at:2}.ride:has(#rs-3:checked){--at:3}
  .ride:has(#rs-4:checked){--at:4}.ride:has(#rs-5:checked){--at:5}.ride:has(#rs-6:checked){--at:6}
  .ride:has(#rs-7:checked){--at:7}.ride:has(#rs-8:checked){--at:8}.ride:has(#rs-9:checked){--at:9}
}
.ride{border:0;margin:clamp(1.75rem,3.5vw,2.75rem) 0 0;padding:0;min-width:0}
.ride-scroll{overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:thin;scrollbar-color:var(--on) transparent;margin-inline:calc(-1*var(--gut));padding-inline:var(--gut)}
.ride-track{position:relative;display:grid;grid-template-columns:repeat(var(--n),minmax(96px,1fr));min-width:calc(var(--n) * 96px);padding-bottom:.4rem}
.ride-track::before{content:"";position:absolute;top:15px;inset-inline:calc(50% / var(--n));height:10px;border-radius:5px;background:var(--on)}
.ride input{position:absolute;opacity:0;width:1px;height:1px;margin:0;pointer-events:none}
.ride label{position:relative;display:flex;justify-content:center;text-align:center;padding:50px .3rem .35rem;cursor:pointer;font-weight:500;font-size:.92rem;line-height:1.35;min-height:44px;border-radius:6px}
.ride label::before{content:"";position:absolute;top:6px;inset-inline-start:calc(50% - 14px);width:28px;height:28px;border-radius:50%;background:var(--c);border:6px solid var(--on);transition:transform .2s var(--ease)}
.ride label:hover::before{transform:scale(1.18)}
.ride label:hover span{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:.35em}
.ride input:checked+label{font-weight:700}
.ride input:checked+label::before{background:var(--on);box-shadow:inset 0 0 0 4px var(--c)}
.ride input:focus-visible+label{outline:3px solid var(--on);outline-offset:-1px}
.ride-train{position:absolute;top:0;inset-inline-start:calc((var(--at,0) + .5) * 100% / var(--n));margin-inline-start:-20px;width:40px;height:40px;border-radius:50%;border:5px solid var(--ink);pointer-events:none;transition:inset-inline-start .6s var(--ease)}
.ride-hint{font-size:.92rem;margin:.6rem 0 0}
@media (prefers-reduced-motion:no-preference){
  .ride-shot:not(:first-child) img{animation:shotin .45s var(--ease)}
}
@keyframes shotin{from{opacity:.2;transform:translateY(10px)}}

.proof-grid{display:grid;gap:2.5rem}
@media (min-width:900px){.proof-grid{grid-template-columns:1.15fr 1fr;align-items:start}}
.rider-list{list-style:none;margin:0;padding:0;display:grid;gap:1rem}
.rider{position:relative;overflow:hidden;display:flex;align-items:center;gap:1rem;border:2px solid var(--ink);border-radius:8px;padding:1.6rem 1.25rem 1.1rem}
.rider::before,.trial-box::before{content:"";position:absolute;inset:0 0 auto;height:10px;background:var(--c)}
.rider .bullet{font-size:1.1rem}
.rider b{display:block;font:700 clamp(1.375rem,1.1rem + .9vw,1.75rem)/1.35 var(--f)}
.rider span:not(.bullet){color:var(--ink-2)}
.dep-facts th,.dep-facts td{white-space:normal}
.dep-facts th{font-weight:500;color:var(--ink-2);width:38%}
.dep-facts td{font-weight:700}

.cases{list-style:none;margin:0;padding:0;display:grid;gap:1.5rem;position:relative;padding-inline-start:2.6rem}
.cases::before{content:"";position:absolute;inset-inline-start:11px;top:.5rem;bottom:.5rem;width:10px;border-radius:5px;background:var(--c)}
.cases li{position:relative}
.cases li::before{content:"";position:absolute;inset-inline-start:calc(-2.6rem + 3px);top:.3rem;width:26px;height:26px;border-radius:50%;background:var(--ground);border:6px solid var(--c)}
.cases a{display:flex;flex-direction:column;gap:.3rem;text-decoration:none}
.case-h{font:700 1.2rem/1.4 var(--f)}
.case-s{color:var(--ink-2);line-height:1.6}
.case-plan{font-size:.95rem}
.case-plan small{color:var(--ink-2)}
.case-more{font-weight:700;text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:.22em;margin-top:.2rem}
.cases a:hover .case-h{text-decoration:underline;text-decoration-color:var(--c);text-decoration-thickness:3px}
@media (min-width:760px){
 .cases{grid-template-columns:repeat(3,1fr);padding-inline-start:0;padding-top:2.4rem;gap:2rem}
 .cases::before{inset-inline:13px;top:9px;bottom:auto;width:auto;height:10px}
 .cases li::before{inset-inline-start:0;top:-2.4rem}
}

.net-sec .sub{margin-bottom:1rem}
.mapbox-here{margin-block:0 1.25rem}
.tr-h{margin:1rem 0 2rem}
.transfer-tags{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,230px),1fr));gap:.75rem 1.5rem;padding-top:1rem}
.transfer-tags li::before{display:none}
.transfer-tags a{display:grid;grid-template-columns:auto 1fr;align-items:center;column-gap:.7rem}
.transfer-tags .bullet{grid-row:span 2}
.transfer-tags small{max-width:22ch}
.net-cta{margin:2.25rem 0 0}
.close-one .close-lines i{height:22px}

.mods{list-style:none;margin:0;padding:0 0 clamp(2rem,5vw,4rem);padding-inline-start:3rem;position:relative}
.mods::before{content:"";position:absolute;inset-inline-start:1rem;top:2.6rem;bottom:4rem;width:10px;border-radius:5px;background:var(--c)}
.mod{position:relative;display:grid;gap:1.25rem 2.5rem;padding-block:clamp(1.75rem,4vw,3rem);border-top:1px solid var(--rule);scroll-margin-top:80px}
.mod:first-child{border-top:0}
.mod::before{content:"";position:absolute;inset-inline-start:calc(-2rem + 5px - 13px);top:calc(clamp(1.75rem,4vw,3rem) + .3rem);width:26px;height:26px;border-radius:50%;background:var(--ground);border:6px solid var(--c)}
.mod:first-child::before,.mod:last-child::before{background:var(--c);box-shadow:inset 0 0 0 3px var(--ground)}
@media (min-width:1000px){.mod{grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);align-items:start}}
.mod-h{margin-bottom:.5rem}
.mod-copy>p{color:var(--ink-2);max-width:56ch}
.mod-copy ul{padding-inline-start:1.2rem;margin:0}
.mod-copy li{margin-bottom:.35rem}
.mod-shot{margin:0}
.mod-shot a{display:block;border:2px solid var(--ink);border-radius:8px;overflow:hidden;cursor:zoom-in}
.mobile-grid{display:grid;gap:2rem;align-items:center}
@media (min-width:900px){.mobile-grid{grid-template-columns:1fr 1.1fr}}
.mobile-grid>*{min-width:0}
.phones{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem;max-width:520px}
.phones figure{margin:0}
.phones img{border:2px solid var(--ink);border-radius:10px}
.phones figcaption{font-size:.92rem;color:var(--ink-2);padding-top:.4rem}

.price-one{padding-block:1.25rem 0}
.price-one .pl-head p{font-weight:500}
.dep-fit a{font:700 1rem/1.5 var(--f);display:inline}
.dep-fit td.rd-n{white-space:normal;min-width:12rem}
@media (max-width:600px){.dep-fit:not(.dep-fit-nolim) th:nth-child(2),.dep-fit:not(.dep-fit-nolim) td:nth-child(2){display:none}.dep-fit td.rd-n{min-width:0}.dep-fit th,.dep-fit td{padding-inline:.4rem}
 .dep-fit th[scope=row],.dep-fit td.price{white-space:normal}.dep-fit td.price small{display:block}}
.jump{list-style:none;padding:0;margin:0 0 1.5rem;display:flex;flex-wrap:wrap;gap:.5rem}
.jump a{display:inline-flex;align-items:center;min-height:44px;padding:.4rem 1rem;border:2px solid var(--ink);border-radius:999px;text-decoration:none;font-weight:500}
.jump a:hover{background:var(--tint)}
.case{scroll-margin-top:70px}
.route-tight li{padding-bottom:1rem}
.route-tight p{color:var(--ink)}
.fit{border-top:10px solid var(--c);padding-top:1rem}
@media (min-width:1000px){.fit{position:sticky;top:90px}}
.fit-n b{display:block;font-size:1.1rem;line-height:1.45}
.fit-n span{color:var(--ink-2)}
.fit-p{font-size:1.1rem}
.fit-p small{color:var(--ink-2);font-size:.8em}
.sign-h .bullet{display:inline-grid}
.h1 span[lang]{display:inline;color:inherit}
.trial-box{position:relative;overflow:hidden;border:2px solid var(--ink);border-radius:8px;padding:1.6rem 1.25rem 1.1rem;margin:0 0 1.5rem}
.trial-box p{color:var(--ink-2)}

/* W3: parent-group rider, boarding steps in place of a rider, synthetic station panels */
.rider-note{display:block;margin-top:.35rem;font-size:.92rem;color:var(--ink-2)}
@media (min-width:900px){.journey-col{grid-template-columns:1fr;gap:1.25rem}
 .journey-col::before{inset-inline:auto;inset-inline-start:10px;top:.5rem;bottom:.5rem;width:6px;height:auto}
 .journey-col li{padding:0;padding-inline-start:2.6rem}
 .journey-col li::before{top:.3rem}}
.synth-ui{aspect-ratio:auto;margin:0;border-radius:8px;color:var(--ink);font-size:.92rem;padding:2.6rem clamp(.9rem,2.5vw,1.5rem) 1rem;min-width:0}
.synth-ui .synth-h{font-size:1.05rem;margin-bottom:.6rem}
.synth-ui table{width:100%;border-collapse:collapse;border-top:2px solid var(--ink);font-variant-numeric:tabular-nums;margin-bottom:.9rem}
.synth-ui th,.synth-ui td{text-align:start;padding:.45rem .35rem;border-bottom:1px solid var(--rule);vertical-align:top;overflow-wrap:anywhere}
.mod>*{min-width:0}
@media (max-width:480px){.synth-ui{font-size:.88rem;padding-inline:.7rem}.synth-ui th,.synth-ui td{padding-inline:.2rem}}
.synth-ui th{font-weight:500;color:var(--ink-2);font-size:.88rem}
.synth-ui td:last-child{font-weight:700}
.ride-shot .synth-ui{min-height:clamp(300px,30vw,400px);border-color:var(--ink)}
.mod-synth .synth-ui{border-width:2px}

/* W4: demo-led lines (raqeebo.com, emdado.com) and the built-on-request project page (SouqMint) */
.close-plate .close-also{margin:1rem 0 0}
.rider.is-custom::before{background:repeating-linear-gradient(to right,var(--c) 0 30px,transparent 30px 48px)}
.for.is-custom{border-top:0;padding-top:calc(1rem + 10px);background:repeating-linear-gradient(to right,var(--c) 0 30px,transparent 30px 48px) top/100% 10px no-repeat}
.for .for-2{margin-top:1.5rem}
.proj-rider{margin-top:clamp(2.5rem,5vw,3.5rem);max-width:760px}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}
@media print{.hdr,.ftr,.close,.mapbox,.planner{display:none}}

/* wave 2 (2026-10-11) S5: on phones the interchange plate grows and drops its subtitle, so "SYSENTA" stays readable (~13px, was ~8px). */
@media (max-width:480px){
  .hub{transform:scale(1.6);transform-origin:700px 380px;transform-box:view-box}
  .hub-s{display:none}
}
/* wave 2 S6: the station strip fades at the edge that has more stations off-screen (classes set by site.js) */
.ride-scroll.f-end{-webkit-mask-image:linear-gradient(to right,#000 calc(100% - 3rem),transparent);mask-image:linear-gradient(to right,#000 calc(100% - 3rem),transparent)}
.ride-scroll.f-start{-webkit-mask-image:linear-gradient(to right,transparent,#000 3rem);mask-image:linear-gradient(to right,transparent,#000 3rem)}
.ride-scroll.f-start.f-end{-webkit-mask-image:linear-gradient(to right,transparent,#000 3rem,#000 calc(100% - 3rem),transparent);mask-image:linear-gradient(to right,transparent,#000 3rem,#000 calc(100% - 3rem),transparent)}
[dir="rtl"] .ride-scroll.f-end{-webkit-mask-image:linear-gradient(to left,#000 calc(100% - 3rem),transparent);mask-image:linear-gradient(to left,#000 calc(100% - 3rem),transparent)}
[dir="rtl"] .ride-scroll.f-start{-webkit-mask-image:linear-gradient(to left,transparent,#000 3rem);mask-image:linear-gradient(to left,transparent,#000 3rem)}
[dir="rtl"] .ride-scroll.f-start.f-end{-webkit-mask-image:linear-gradient(to left,transparent,#000 3rem,#000 calc(100% - 3rem),transparent);mask-image:linear-gradient(to left,transparent,#000 3rem,#000 calc(100% - 3rem),transparent)}