/* ==========================================================================
   slowcs — signage system
   One family (Archivo) on a width axis: condensed for signs, normal for reading.
   JetBrains Mono only for code, test names and commands.

   Type scale
     d1     hero sign          condensed 800, caps
     d2     section sign       condensed 800, caps
     d3     project / track    condensed 800, caps
     h1     36 / 1.1  600      page titles in the app
     h2     26 / 1.2  600      panel titles
     h3     19 / 1.3  600      row titles
     lede   22 / 1.4  500      intros
     body   17 / 1.6  400      long reading text (max 66ch)
     small  14 / 1.45 400      supporting text
     label  13 / 1.2  600      field and column labels
     mono   14 / 1.5  400      code, tests

   Colour: signage yellow + ink, white for reading surfaces, six line colours.
   Signs: line bullets (circled numbers), boxed stage numbers, heavy rules,
   arrow plates, black blocks.
   ========================================================================== */
:root{
  --yellow:#FFD100;
  --yellow-deep:#F2C500;
  --ink:#0E0E0E;
  --ink-2:#1A1A1A;
  --ink-3:#262626;
  --paper:#FFFFFF;
  --grey-1:#F3F3F3;
  --grey-2:#E4E4E4;
  --grey-3:#BDBDBD;
  --muted:#5E5E5E;
  --muted-on-dark:#A3A3A3;

  --l1:#EE352E; /* Distributed Systems */
  --l2:#2A5BEA; /* AI Infrastructure   */
  --l3:#00A04B; /* Systems Programming */
  --l4:#FF6319; /* Databases           */
  --l5:#B23AAE; /* Security            */
  --l6:#00A8D6; /* Observability       */

  --pass:#00A04B;
  --fail:#EE352E;

  --sans:"Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mono:"JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --fs-d1:clamp(52px, 9.4vw, 142px);
  --fs-d2:clamp(44px, 6.6vw, 100px);
  --fs-d3:clamp(34px, 4.2vw, 62px);
  --fs-h1:36px;
  --fs-h2:26px;
  --fs-h3:19px;
  --fs-lede:22px;
  --fs-body:17px;
  --fs-small:14px;
  --fs-label:13px;
  --fs-mono:14px;

  --gutter:32px;
  --rule:8px;
  --rule-thin:2px;
  --max:1440px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--yellow);color:var(--ink);
  font-family:var(--sans);font-size:var(--fs-body);line-height:1.6;
  font-stretch:100%;font-weight:400;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}
img,svg{display:block;max-width:100%}
a{color:inherit}
button,input{font:inherit;color:inherit}
::selection{background:var(--ink);color:var(--yellow)}
:focus-visible{outline:3px solid var(--l2);outline-offset:3px}

.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gutter)}

/* ---------- type ---------- */
.d1,.d2,.d3{
  font-stretch:62%;font-weight:800;text-transform:uppercase;
  line-height:.86;letter-spacing:-.004em;margin:0;
}
.d1{font-size:var(--fs-d1)}
.d2{font-size:var(--fs-d2)}
.d3{font-size:var(--fs-d3)}
.h1{font-size:var(--fs-h1);line-height:1.1;font-weight:600;letter-spacing:-.015em;margin:0}
.h2{font-size:var(--fs-h2);line-height:1.2;font-weight:600;letter-spacing:-.01em;margin:0}
.h3{font-size:var(--fs-h3);line-height:1.3;font-weight:600;margin:0}
.lede{font-size:var(--fs-lede);line-height:1.4;font-weight:500;letter-spacing:-.005em;margin:0}
.small{font-size:var(--fs-small);line-height:1.45}
.label{font-size:var(--fs-label);line-height:1.2;font-weight:600;letter-spacing:.005em}
.mono{font-family:var(--mono);font-size:var(--fs-mono);line-height:1.5}
.muted{color:var(--muted)}
.tnum{font-variant-numeric:tabular-nums}
.prose{max-width:66ch}
.prose p{margin:0 0 1em}

/* ---------- signs ---------- */
.bullet{
  --c:var(--ink);
  display:inline-grid;place-items:center;flex:none;
  width:1.9em;height:1.9em;border-radius:50%;
  background:var(--c);color:#fff;
  font-weight:700;font-size:15px;line-height:1;font-variant-numeric:tabular-nums;
}
.bullet--xs{font-size:10px;width:1.7em;height:1.7em}
.bullet--sm{font-size:12px}
.bullet--lg{font-size:30px;font-weight:600}
.bullet--xl{font-size:clamp(42px,5vw,70px);font-stretch:62%;font-weight:800;background:var(--ink);color:var(--c)}
.b1{--c:var(--l1)}.b2{--c:var(--l2)}.b3{--c:var(--l3)}.b4{--c:var(--l4)}.b5{--c:var(--l5)}.b6{--c:var(--l6)}
.bullets{display:inline-flex;gap:6px;align-items:center}

.stage-no{
  display:inline-grid;place-items:center;flex:none;
  width:52px;height:52px;border:3px solid currentColor;
  font-weight:700;font-size:21px;font-variant-numeric:tabular-nums;line-height:1;
}
.stage-no--sm{width:34px;height:34px;border-width:2px;font-size:14px}

.rule{height:var(--rule);background:var(--ink);border:0;margin:0}
.rule--thin{height:var(--rule-thin)}

.arrow{width:1em;height:1em;flex:none}

/* ---------- buttons (rectangles, never pills) ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:space-between;gap:24px;
  min-height:60px;padding:0 22px;border:0;border-radius:0;cursor:pointer;
  background:var(--ink);color:var(--yellow);
  font-weight:600;font-size:19px;letter-spacing:-.005em;text-decoration:none;
  transition:background .15s, color .15s;
}
.btn .arrow{width:26px;height:26px;transition:transform .2s}
.btn:hover .arrow{transform:translateX(4px)}
.btn--block{width:100%}
.btn--sm{min-height:40px;font-size:15px;padding:0 14px;gap:14px}
.btn--sm .arrow{width:18px;height:18px}
.btn--line{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 2px var(--ink)}
.btn--line:hover{background:var(--ink);color:var(--yellow)}
.btn--yellow{background:var(--yellow);color:var(--ink)}

.chip{
  display:inline-flex;align-items:center;gap:8px;
  height:36px;padding:0 12px;border:2px solid var(--ink);
  font-weight:600;font-size:15px;background:transparent;cursor:pointer;line-height:1;
}

/* ==========================================================================
   HERO
   ========================================================================== */
.hero{background:var(--yellow);padding-top:32px;overflow:hidden}

.blocks{
  display:grid;grid-template-columns:1.6fr repeat(6,1fr);gap:6px;
}
.blocks a{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  height:64px;padding:0 16px;background:var(--ink);color:#fff;text-decoration:none;
  font-size:15px;font-weight:600;transition:background .15s,color .15s;
}
.blocks a:hover{background:#fff;color:var(--ink)}
.blocks a b{font-stretch:62%;font-weight:800;font-size:28px;line-height:1}
.blocks .brand{justify-content:flex-start;gap:12px}
.blocks .brand:hover{background:var(--ink);color:#fff}
.brand-mark{display:block;flex:none;width:30px;height:30px}
.brand-name{font-weight:700;font-size:22px;letter-spacing:-.02em}
.brand-tag{margin-left:auto;font-size:13px;font-weight:500;color:var(--muted-on-dark)}
.blocks .is-cta{background:var(--ink);color:var(--yellow)}

.strip{
  display:grid;grid-template-columns:220px 1fr auto;gap:var(--gutter);align-items:baseline;
  padding:30px 0 22px;
}
.strip .lede{font-size:20px}
.status{display:inline-flex;align-items:center;gap:10px;font-weight:600;font-size:15px;white-space:nowrap}
.dot{width:10px;height:10px;border-radius:50%;background:var(--ink);flex:none}
.dot--live{animation:blink 1.6s steps(1) infinite}
@keyframes blink{50%{opacity:.25}}

.hero h1{padding:22px 0 26px;margin-left:-.04em}
.hero-row{
  display:grid;grid-template-columns:220px minmax(0,1.25fr) minmax(0,1fr) 380px;
  gap:var(--gutter);padding:26px 0 76px;align-items:start;
}
.hero-row p{margin:0}
.hero-row .lede{font-size:21px}
.hero-why{font-size:17px;line-height:1.5}
.hero-why strong{display:block;font-weight:600;margin-bottom:6px}
.hero-cta .btn{width:100%}
.hero-cta .meta{display:flex;justify-content:space-between;gap:12px;margin-top:12px;font-size:14px;font-weight:600}

/* ---------- product frame (a stage page) ----------
   The app is the signage system at rest: hairlines instead of heavy rules, normal-width
   Archivo for everything you read, condensed caps only on the stage sign and big numbers.
   Yellow marks where you are; line colours mark tracks; green and red mean pass and fail. */
.product{position:relative;margin-top:8px}
.app{
  --hair:#E6E6E6;--soft:#F6F6F4;
  position:relative;background:var(--paper);border:2px solid var(--ink);
  box-shadow:0 1px 0 var(--ink),0 50px 90px -50px rgba(0,0,0,.5);
  font-size:15px;line-height:1.5;
}
.eyebrow{display:block;font-size:12px;font-weight:600;letter-spacing:.01em;color:var(--muted)}

/* top bar */
.app-bar{display:flex;align-items:center;gap:18px;height:54px;padding:0 16px 0 18px;background:var(--ink);color:#fff;font-size:14px}
.app-bar .brand-mark{width:26px;height:26px;font-size:15px}
.crumbs{display:flex;align-items:center;gap:9px;color:#a8a8a8;font-weight:500;white-space:nowrap}
.crumbs i{font-style:normal;color:#555}
.crumbs b{color:#fff;font-weight:600}
.route{list-style:none;display:flex;align-items:center;margin:0 auto;padding:0}
.route li{position:relative;display:flex;align-items:center}
.route li + li::before{content:"";width:34px;height:3px;background:#3a3a3a}
.route li.done + li::before,.route li.done::before,.route li.now::before{background:var(--l1)}
.route li:first-child::before{display:none}
.route i{width:12px;height:12px;border-radius:50%;background:var(--ink);box-shadow:inset 0 0 0 2.5px #555;flex:none}
.route .done i{background:var(--l1);box-shadow:none}
.route .now i{width:14px;height:14px;background:var(--yellow);box-shadow:0 0 0 3px var(--ink),0 0 0 5px var(--yellow)}
.route .now span{margin-left:12px;margin-right:4px;padding:3px 8px;background:var(--yellow);color:var(--ink);font-weight:700;font-size:13px;white-space:nowrap}
.lang{display:inline-flex;align-items:center;gap:8px;height:30px;padding:0 10px;border:1px solid #4a4a4a;font-weight:600;font-size:13px;white-space:nowrap}
.lang svg{width:10px;height:6px}
.avatar{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--l2);color:#fff;font-weight:700;font-size:11.5px;flex:none}

.app-body{display:grid;grid-template-columns:236px minmax(0,1fr) 336px;min-height:700px}

/* the line */
.rail{border-right:1px solid var(--hair);padding:26px 22px;display:flex;flex-direction:column;gap:26px;background:var(--soft)}
.rail-title{display:block;margin:6px 0 4px;font-size:22px;font-weight:700;letter-spacing:-.02em;line-height:1.15}
.rail-sub{display:flex;align-items:center;gap:7px;font-size:13px;font-weight:500;color:var(--muted)}
.stops{list-style:none;margin:0;padding:0;position:relative}
.stops li{position:relative;display:grid;grid-template-columns:16px 1fr auto;gap:14px;align-items:start;padding:0 0 22px}
.stops li:last-child{padding-bottom:0}
.stops li::before{content:"";position:absolute;left:6px;top:14px;bottom:-2px;width:4px;background:#D6D6D6}
.stops li:last-child::before{display:none}
.stops li.done::before{background:var(--l1)}
.stops i{position:relative;z-index:1;width:16px;height:16px;margin-top:2px;border-radius:50%;background:var(--paper);box-shadow:inset 0 0 0 3px #C9C9C9}
.stops .done i{background:var(--l1);box-shadow:none}
.stops .now i{background:var(--paper);box-shadow:inset 0 0 0 4px var(--ink)}
.stops b{display:block;font-size:14.5px;font-weight:600;line-height:1.3}
.stops small{display:block;font-size:12.5px;color:var(--muted);margin-top:1px}
.stops em{font-style:normal;font-size:12px;font-weight:600;color:#9a9a9a;font-variant-numeric:tabular-nums;margin-top:2px}
.stops li:not(.done):not(.now) b{color:#8a8a8a;font-weight:500}
.stops li.now::after{content:"";position:absolute;z-index:0;left:-10px;right:-10px;top:-7px;bottom:15px;background:var(--yellow)}
.stops li.now > *{position:relative;z-index:1}
.stops .now small{color:var(--ink)}
.stops .now em{color:var(--ink)}
.xfer{margin-top:auto;padding-top:18px;border-top:1px solid #D9D9D6;display:grid;gap:12px}
.xfer div{display:grid;grid-template-columns:24px 1fr;gap:10px;font-size:13px;line-height:1.35;color:var(--muted)}
.xfer b{display:block;color:var(--ink);font-weight:600;font-size:13.5px}
.xfer .bullet{font-size:11px}

/* reading column */
.reader{min-width:0;display:flex;flex-direction:column}
.tabs{display:flex;align-items:center;gap:26px;height:50px;padding:0 44px;border-bottom:1px solid var(--hair)}
.tab{
  appearance:none;border:0;background:none;cursor:pointer;height:100%;padding:0;
  font-weight:600;font-size:14.5px;color:#8a8a8a;display:inline-flex;align-items:center;gap:7px;
  box-shadow:inset 0 0 0 0 var(--ink);transition:box-shadow .15s,color .15s;
}
.tab .count{display:inline-grid;place-items:center;min-width:19px;height:19px;padding:0 5px;border-radius:10px;background:var(--grey-2);font-size:11.5px;color:var(--ink)}
.tab[aria-selected="true"]{color:var(--ink);box-shadow:inset 0 -3px 0 0 var(--ink)}
.tab:hover{color:var(--ink)}
.tabs-meta{margin-left:auto;font-size:12.5px;font-weight:500;color:#8a8a8a}
.panel{padding:36px 44px 44px;display:none}
.panel.is-on{display:block}

.lec-head{display:grid;grid-template-columns:auto 1fr;gap:20px;align-items:start;margin-bottom:30px;max-width:640px}
.plate{
  display:grid;place-items:center;width:56px;height:56px;background:var(--ink);color:var(--yellow);
  font-stretch:62%;font-weight:800;font-size:32px;line-height:1;font-variant-numeric:tabular-nums;
}
.lec-title{margin:6px 0 0;font-stretch:62%;font-weight:800;font-size:54px;line-height:.9;text-transform:uppercase;letter-spacing:-.003em}
.lec-dek{margin:12px 0 0;font-size:17px;color:var(--muted);line-height:1.45}

.lec-body{display:grid;grid-template-columns:minmax(0,600px) 172px;gap:36px}
.lec-col p{margin:0 0 20px;font-size:16.5px;line-height:1.72;color:#1c1c1c}
.lec-col mark,.side mark{background:linear-gradient(transparent 58%,var(--yellow) 58%);padding:0 1px;color:inherit}
.lec-col p code,.side code,.reqs code,.notes code{font-family:var(--mono);font-size:.84em;padding:.1em .35em;background:var(--soft);border:1px solid var(--hair)}

.fig{margin:6px 0 26px;padding:20px 20px 14px;background:var(--soft);border-top:3px solid var(--ink)}
.fig svg{width:100%;height:auto}
.fig figcaption{display:flex;justify-content:space-between;gap:16px;margin-top:10px;padding-top:10px;border-top:1px solid #DCDCD8;font-size:12.5px;color:var(--muted)}
.fig figcaption b{color:var(--ink);font-weight:700;margin-right:6px}

.code{margin:4px 0 24px;border:1px solid var(--hair);background:#FBFBFA}
.code figcaption{display:flex;justify-content:space-between;align-items:center;height:36px;padding:0 14px;border-bottom:1px solid var(--hair);font-size:12px;color:#8a8a8a}
.code .file{font-family:var(--mono);font-size:12.5px;font-weight:500;color:var(--ink);display:flex;align-items:center;gap:8px}
.code .file::before{content:"";width:8px;height:8px;background:var(--l1)}
.code pre{margin:0;padding:10px 0;font-family:var(--mono);font-size:13px;line-height:1.75;overflow-x:auto;color:#222}
.code .l{display:block;padding:0 14px 0 0;white-space:pre}
.code .l i{display:inline-block;width:42px;padding-right:16px;text-align:right;font-style:normal;color:#B5B5B5;user-select:none}
.code .hl{background:#FFF4BF;box-shadow:inset 3px 0 0 var(--yellow-deep)}
.code .hl i{color:var(--ink)}
.code .ann{
  font-family:var(--sans);font-style:normal;font-size:11.5px;font-weight:700;
  margin-left:14px;padding:2px 7px;background:var(--ink);color:var(--yellow);vertical-align:1px;
}

.side{padding-top:2px}
.snote{font-size:13.5px;line-height:1.5;color:#2a2a2a;padding-top:10px;border-top:3px solid var(--yellow)}
.side{position:relative}
.snote{position:absolute;left:0;right:0}
.origin{margin:0 0 22px;padding:14px 16px;border-left:3px solid var(--ink);background:var(--soft)}
.origin p{margin:6px 0 0;font-size:14.5px;line-height:1.55;color:#333}
.snote .eyebrow{margin-bottom:5px}

/* brief */
.why-stage{max-width:640px;margin:0 0 28px;padding:16px 18px;background:var(--soft);border-left:3px solid var(--fail)}
.why-stage p{margin:6px 0 0;font-size:15.5px;line-height:1.55}
.reqs{list-style:none;margin:0;padding:0;max-width:640px;border-top:2px solid var(--ink)}
.reqs li{display:grid;grid-template-columns:44px minmax(0,1fr);gap:8px;padding:18px 0;border-bottom:1px solid var(--hair)}
.reqs em{font-style:normal;font-stretch:62%;font-weight:800;font-size:24px;line-height:1.1;font-variant-numeric:tabular-nums}
.reqs p{margin:0 0 10px;font-size:16.5px;line-height:1.55}
.checks{display:flex;flex-wrap:wrap;gap:6px}
.chk{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 8px;font-family:var(--mono);font-size:11.5px;font-weight:500;border:1px solid var(--hair);background:var(--paper)}
.chk::before{content:"";width:7px;height:7px;border-radius:50%}
.chk.ok::before{background:var(--pass)}
.chk.no{border-color:#F3C3C0;background:#FFF5F4;color:#9B1B14}
.chk.no::before{background:var(--fail)}

/* notes */
.notes-bar{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-bottom:22px;max-width:640px}
.search{flex:1;min-width:200px;display:flex;align-items:center;gap:10px;height:40px;padding:0 12px;border:1px solid #CFCFCF;background:var(--paper)}
.search svg{width:15px;height:15px;color:#8a8a8a;flex:none}
.search input{border:0;outline:0;background:none;width:100%;font-size:14.5px}
.search:focus-within{border-color:var(--ink)}
.seg{display:flex;border:1px solid #CFCFCF}
.seg button{appearance:none;border:0;background:none;height:38px;padding:0 12px;font-weight:600;font-size:13px;color:var(--muted);cursor:pointer}
.seg button + button{border-left:1px solid #CFCFCF}
.seg button.is-on{background:var(--ink);color:#fff}
.notes{list-style:none;margin:0;padding:0;max-width:640px;display:grid;gap:12px}
.notes li{padding:16px 18px 14px;border:1px solid var(--hair);background:var(--paper)}
.notes blockquote{margin:0 0 10px;padding-left:12px;border-left:3px solid var(--yellow);font-size:13.5px;line-height:1.5;color:var(--muted)}
.notes .from-test blockquote{border-left-color:var(--fail);font-family:var(--mono);font-size:12.5px;display:flex;justify-content:space-between;align-items:center;gap:10px}
.notes p{margin:0;font-size:15.5px;line-height:1.55}
.notes footer{display:flex;gap:14px;margin-top:10px;font-size:12px;font-weight:600;color:#9a9a9a}

/* tests */
.tests{border-left:1px solid var(--hair);display:flex;flex-direction:column;background:var(--paper);min-width:0}
.t-top{display:flex;justify-content:space-between;align-items:baseline;font-size:12px;font-weight:500;color:#8a8a8a}
.t-head{padding:20px 22px 18px;border-bottom:1px solid var(--hair)}
.t-score{display:flex;align-items:baseline;gap:6px;margin-top:10px}
.t-score b{font-stretch:62%;font-weight:800;font-size:64px;line-height:.8;font-variant-numeric:tabular-nums}
.t-score span{font-stretch:62%;font-weight:800;font-size:30px;color:#B5B5B5}
.t-score em{margin-left:auto;font-style:normal;font-weight:700;font-size:13px;color:var(--fail)}
.segments{display:grid;grid-template-columns:repeat(8,1fr);gap:3px;margin-top:16px}
.segments i{height:8px;background:var(--grey-2)}
.segments i.p{background:var(--pass)}
.segments i.f{background:var(--fail)}
.segments i.r{background:var(--grey-3);animation:pulse .8s ease-in-out infinite alternate}
@keyframes pulse{to{background:var(--ink)}}

.t-list{list-style:none;margin:0;padding:8px 0 4px}
.t-list li{display:grid;grid-template-columns:40px minmax(0,1fr) auto;gap:10px;align-items:center;padding:7px 22px}
.t-list .st{height:18px;display:grid;place-items:center;font-family:var(--mono);font-size:9.5px;font-weight:600;letter-spacing:.06em;color:#fff}
.t-list .ok .st{background:var(--pass)}
.t-list .ok .st::after{content:"PASS"}
.t-list .no .st{background:var(--fail)}
.t-list .no .st::after{content:"FAIL"}
.t-list .run .st{background:var(--grey-2)}
.t-list .run .st::after{content:"···";color:var(--muted)}
.t-list .nm{font-size:13.5px;line-height:1.35}
.t-list .ok .nm{color:#3a3a3a}
.t-list .no .nm{color:var(--ink);font-weight:600}
.t-list .run .nm{color:#9a9a9a}
.t-list .ms{font-family:var(--mono);font-size:11px;color:#a5a5a5}
.diff{grid-column:2/-1;margin:6px 0 4px;border:1px solid #F3C3C0;background:#FFF7F6;font-family:var(--mono);font-size:12px}
.diff div{display:grid;grid-template-columns:42px 1fr;padding:5px 10px}
.diff div + div{border-top:1px solid #F7DAD8}
.diff dt{color:#B07A76}
.diff dd{margin:0;color:var(--ink)}
.diff .bad dd{color:#B4170F;font-weight:600}
.t-list .run .diff,.t-list .run .story,.t-list .run .hint{display:none!important}
.story{grid-column:2/-1;margin:2px 0 0;font-size:12.5px;line-height:1.45;color:#7A2A24}
.t-list .hint{grid-column:2/-1;justify-self:start;display:inline-flex;align-items:center;gap:8px;margin:2px 0 6px;padding:0;border:0;background:none;cursor:pointer;font-weight:600;font-size:12.5px;color:var(--ink);border-bottom:1.5px solid var(--ink)}
.t-list .hint .arrow{width:12px;height:12px}

.t-hist{padding:16px 22px 18px;border-top:1px solid var(--hair)}
.next-st{margin-top:auto;padding:16px 22px;border-top:1px solid var(--hair);background:var(--soft)}
.next-st > div{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:center;margin-top:10px;font-size:13px;line-height:1.4;color:var(--muted)}
.next-st b{display:block;font-size:15px;font-weight:600;color:var(--ink)}
.plate--sm{width:38px;height:38px;font-size:22px}
.runs{display:grid;grid-template-columns:repeat(6,1fr);gap:6px;height:44px;margin-top:20px;align-items:end}
.runs span{position:relative;height:calc(var(--p) / 8 * 100%);background:#DCDCDC;transition:height .4s}
.runs span.last{background:var(--ink)}
.runs b{position:absolute;top:-17px;left:0;right:0;text-align:center;font-size:11px;font-weight:600;color:#9a9a9a}
.runs .last b{color:var(--ink)}
.t-foot{padding:14px 22px 18px;border-top:1px solid var(--hair);display:grid;gap:10px}
.t-foot .cmd{display:block;font-family:var(--mono);font-size:12.5px;padding:9px 12px;background:var(--soft);border:1px solid var(--hair);color:#3a3a3a}


/* the frame is a window onto the app: one screen tall, each column scrolls on its own */
@media (min-width:721px){
  .app-body{height:min(700px, calc(100vh - 140px));min-height:560px}
  .rail,.reader,.tests{min-height:0}
  .rail{overflow:auto}
  .reader{overflow:hidden}
  .reader .panel{overflow:auto;flex:1;min-height:0;scrollbar-width:thin}
  .reader .panel.is-on{display:block}
  .tests{overflow:hidden}
  .t-scroll{flex:1;min-height:0;overflow:auto;scrollbar-width:thin}
  .next-st{margin-top:0}
  /* a fade says there's more to read */
  .reader::after{content:"";position:absolute;left:0;right:0;bottom:0;height:56px;pointer-events:none;background:linear-gradient(rgba(255,255,255,0),#fff)}
  .reader{position:relative}
}
/* what the three columns are */
.legend-row{display:grid;grid-template-columns:236px minmax(0,1fr) 336px;gap:0;padding:24px 0 64px}
.legend-row div{display:grid;gap:8px;padding:0 22px;border-left:2px solid var(--ink)}
.legend-row .n{
  justify-self:start;display:inline-grid;place-items:center;height:26px;padding:0 9px;background:var(--ink);color:var(--yellow);
  font-stretch:62%;font-weight:800;font-size:16px;text-transform:uppercase;letter-spacing:.02em;
}
.legend-row p{margin:0;font-size:15px;line-height:1.5;max-width:44ch}
.legend-row b{display:block;font-weight:600;font-size:17px;margin-bottom:3px}

@media (max-width:1260px){
  .app-body{grid-template-columns:220px minmax(0,1fr) 312px}
  .legend-row{grid-template-columns:220px minmax(0,1fr) 312px}
  .lec-body{grid-template-columns:minmax(0,1fr)}
  .side{display:none}
  .route li + li::before{width:22px}
}
@media (max-width:1080px){
  .app-body{grid-template-columns:minmax(0,1fr) 312px}
  .legend-row{grid-template-columns:1fr 1fr 1fr}
  .rail{display:none}
  .route li:not(.now){display:none}
  .route .now span{margin-left:10px}
  .crumbs > span:not(.bullet),.crumbs i{display:none}
}
@media (max-width:720px){
  .tabs{padding:0 18px;gap:20px}
  .tabs-meta{display:none}
  .panel{padding:26px 18px 30px}
  .lec-title{font-size:40px}
  .plate{width:46px;height:46px;font-size:26px}
  .lec-head{gap:14px}
  .route{display:none}
  .app-bar{gap:12px;padding:0 12px}
  .crumbs{margin-right:auto}
  .lang{display:none}
  .legend-row{grid-template-columns:1fr;gap:18px}
  .fig figcaption{flex-direction:column;gap:4px}
}

/* ==========================================================================
   SECTION SHELL
   ========================================================================== */
.section{padding:96px 0}
.sec-head{display:grid;grid-template-columns:220px 1fr;gap:var(--gutter);align-items:start;margin-bottom:40px}
.sec-head .sec-no,.why-grid .sec-no{margin-top:4px}
.sec-no{display:flex;align-items:center;gap:12px;font-weight:600;font-size:15px}
.sec-no b{display:inline-grid;place-items:center;height:34px;padding:0 9px;background:var(--ink);color:#fff;font-stretch:62%;font-weight:800;font-size:22px}
.on-dark .sec-no b{background:var(--yellow);color:var(--ink)}
.sec-intro{display:grid;grid-template-columns:220px minmax(0,1fr) minmax(0,1fr);gap:var(--gutter);margin-top:28px}
.sec-intro p{margin:0}

/* ==========================================================================
   02 TIMETABLE
   ========================================================================== */
.timetable-sec{background:var(--paper)}
.tt-title{display:flex;justify-content:space-between;align-items:flex-end;gap:var(--gutter);padding-bottom:18px}
.tt-title .d2{display:flex;align-items:center;gap:22px}
.tt-stats{display:flex;gap:36px;text-align:right}
.tt-stats div{display:grid;gap:4px}
.tt-stats b{font-stretch:62%;font-weight:800;font-size:56px;line-height:.85;font-variant-numeric:tabular-nums}
.tt-stats .label{color:var(--muted)}
.tt{width:100%;border-collapse:collapse}
.tt th{
  text-align:left;font-size:var(--fs-label);font-weight:600;color:var(--muted);
  padding:22px 16px 14px 0;border-bottom:var(--rule-thin) solid var(--ink);
}
.tt td{padding:22px 16px 24px 0;border-bottom:var(--rule-thin) solid var(--ink);vertical-align:top}
.tt td:first-child{width:104px}
.tt .build{width:30%}
.tt .build b{display:block;font-size:var(--fs-h3);font-weight:600;line-height:1.3}
.tt .build span{display:block;color:var(--muted);font-size:15.5px;margin-top:4px}
.tt .check{width:34%;font-size:16.5px;line-height:1.5}
.tt .check::before{content:"";display:inline-block;width:9px;height:9px;margin-right:9px;background:var(--fail);vertical-align:1px}
.tt tr:last-child .check::before{background:var(--grey-3)}
.tt .n{width:80px;font-weight:700;white-space:nowrap}
.tt .n .dot{display:inline-block;margin-right:8px;vertical-align:1px}
.tt .along{font-size:14.5px;line-height:1.75}
.tt .along div{display:block}
.tt .along span{color:var(--muted)}
.tt .along b{font-weight:600}
.tt tbody tr{transition:background .15s}
.tt tbody tr:hover{background:#FFF8D6}
.tt-foot{display:flex;justify-content:space-between;align-items:center;gap:var(--gutter);margin-top:28px;flex-wrap:wrap}
.tt-foot p{margin:0;max-width:62ch}

/* ==========================================================================
   03 WHY BUILD
   ========================================================================== */
.why-sec{background:var(--yellow)}
.why-grid{display:grid;grid-template-columns:220px minmax(0,1fr);gap:var(--gutter)}
.why-lede{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:var(--gutter);margin-top:34px}
.why-lede p{margin:0}
.compare{width:100%;border-collapse:collapse;margin-top:64px;background:var(--ink);color:#fff}
.compare th,.compare td{padding:18px 22px;text-align:left;vertical-align:top;border-bottom:1px solid #333}
.compare thead th{font-size:var(--fs-label);font-weight:600;color:var(--muted-on-dark);padding-top:20px;padding-bottom:16px;border-bottom:2px solid #fff}
.compare thead th:last-child{color:var(--yellow)}
.compare tbody th{font-weight:600;width:24%;font-size:15px;color:var(--muted-on-dark)}
.compare td{font-size:17px;width:38%}
.compare td.them{color:#9a9a9a}
.compare td.us{color:#fff;font-weight:500}
.compare td.us{position:relative;padding-left:46px}
.compare td.us::before{content:"";position:absolute;left:22px;top:26px;width:10px;height:10px;background:var(--yellow)}
.compare tbody tr:last-child th,.compare tbody tr:last-child td{border-bottom:0}
.fit{display:grid;grid-template-columns:1fr 1fr;gap:var(--gutter);margin-top:48px}
.fit h3{display:flex;align-items:center;gap:12px;padding-bottom:12px;border-bottom:var(--rule) solid var(--ink)}
.fit h3 .sym{display:grid;place-items:center;width:30px;height:30px;background:var(--ink);color:var(--yellow);font-size:18px;line-height:1}
.fit ul{list-style:none;margin:0;padding:0}
.fit li{padding:14px 0;border-bottom:var(--rule-thin) solid var(--ink);font-size:17px;line-height:1.45}
.fit .not li{color:rgba(0,0,0,.66)}

/* ==========================================================================
   04 NETWORK
   ========================================================================== */
.network-sec{background:var(--ink);color:#fff}
.network-sec .muted{color:var(--muted-on-dark)}
.map-legend{display:flex;flex-wrap:wrap;gap:8px;margin:34px 0 0;padding:12px 0;position:sticky;top:58px;z-index:5;background:var(--ink)}
.map-box{margin-top:8px}
.map-legend button{
  appearance:none;display:inline-flex;align-items:center;gap:10px;height:44px;padding:0 14px 0 8px;
  background:var(--ink-3);border:0;color:#fff;font-weight:600;font-size:15px;cursor:pointer;transition:background .15s;
}
.map-legend button:hover,.map-legend button.is-on{background:#fff;color:var(--ink)}
.map-legend .hint{margin-left:auto;align-self:center;font-size:14px;color:var(--muted-on-dark)}
.map-box{background:#141414;border-top:var(--rule) solid #fff;overflow-x:auto}
.map{display:block;min-width:1100px;width:100%;height:auto;max-height:calc(100vh - 150px);margin:0 auto}
.map .ln{cursor:pointer}
.map .ln path{fill:none;stroke-width:10;stroke-linecap:round;stroke-linejoin:round;transition:opacity .2s}
.map .ln{transition:opacity .2s}
.map .st{fill:#fff}
.map .ix{fill:#fff;stroke:#141414;stroke-width:5}
.map .ix-ring{fill:none;stroke:#fff;stroke-width:2}
.map text{font-family:var(--sans);font-size:14px;fill:#e8e8e8;font-weight:500}
.map text.ixl{font-size:15.5px;font-weight:700;fill:#fff}
.map .bl text{font-size:10px;font-weight:700;fill:#fff}
.map.dim .ln:not(.on){opacity:.12}
.map.dim .lbl:not(.on){opacity:.18}
.map .lbl{transition:opacity .2s}
.map-note{display:grid;grid-template-columns:220px repeat(3,minmax(0,1fr));gap:var(--gutter);padding:30px 0 0}
.map-note p{margin:0;font-size:15.5px;line-height:1.5;color:#d6d6d6}
.map-note b{color:#fff;font-weight:600;display:flex;gap:8px;align-items:center;margin-bottom:6px;font-size:16px}

/* phones: one line at a time, drawn as a vertical strip */
.line-view{display:none}
.lv-head{display:flex;align-items:center;gap:12px;padding:18px 0 14px;border-bottom:2px solid #fff}
.lv-head .bullet{font-size:16px}
.lv-head b{font-stretch:62%;font-weight:800;font-size:30px;line-height:1;text-transform:uppercase}
.lv-head{flex-wrap:wrap;row-gap:4px}
.lv-head b{flex:1 1 auto;min-width:0}
.lv-head span.n{flex-basis:100%;padding-left:calc(1.9em*16/15 + 12px);font-size:13px;font-weight:600;color:var(--muted-on-dark)}
.lv-list{list-style:none;margin:0;padding:10px 0 0;position:relative}
.lv-list li{position:relative;display:grid;grid-template-columns:28px 1fr;gap:14px;align-items:start;padding:0 0 18px;min-height:44px}
.lv-list li::before{content:"";position:absolute;left:11px;top:6px;bottom:-6px;width:6px;background:var(--c)}
.lv-list li:last-child::before{display:none}
.lv-list i{position:relative;z-index:1;width:28px;height:28px;margin-top:-2px;display:grid;place-items:center}
.lv-list i::after{content:"";width:12px;height:12px;border-radius:50%;background:#fff}
.lv-list .x i::after{width:20px;height:20px;background:#fff;box-shadow:0 0 0 4px var(--ink),0 0 0 6px #fff}
.lv-list b{display:block;font-size:17px;font-weight:600;line-height:1.3;color:#fff}
.lv-list .x b{font-weight:700}
.lv-list small{display:flex;align-items:center;gap:6px;margin-top:5px;font-size:13px;font-weight:500;color:var(--muted-on-dark)}
.lv-list small .bullet{font-size:10px}

/* lines (track blocks) */
.lines{border-top:var(--rule) solid var(--ink)}
.track{
  --c:var(--l1);background:var(--c);color:var(--ink);
  border-bottom:var(--rule) solid var(--ink);
}
.track .wrap{display:grid;grid-template-columns:130px minmax(0,1fr) minmax(0,1.15fr);gap:var(--gutter);padding-top:36px;padding-bottom:40px;align-items:start}
.track .bullet--xl{background:var(--ink);color:var(--tc);width:112px;height:112px;font-size:76px}
.track .d3{margin-top:4px}
.track .stats{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:16px;font-size:14px;font-weight:600}
.track .later{background:var(--ink);color:#fff;padding:2px 8px}
.track .desc{font-size:21px;line-height:1.35;font-weight:500;margin:0 0 18px;max-width:34ch;letter-spacing:-.005em}
.tags{display:flex;flex-wrap:wrap;gap:6px}
.tag{display:inline-flex;align-items:center;gap:8px;height:34px;padding:0 10px;background:#fff;color:var(--ink);font-weight:600;font-size:15px}
.tag--x{background:var(--ink);color:#fff}
.tag .bullet{font-size:10px;box-shadow:0 0 0 1.5px var(--ink)}
.track.t1{--c:var(--l1);--tc:var(--l1)}.track.t2{--c:var(--l2);--tc:var(--l2)}.track.t3{--c:var(--l3);--tc:var(--l3)}
.track.t4{--c:var(--l4);--tc:var(--l4)}.track.t5{--c:var(--l5);--tc:var(--l5)}.track.t6{--c:var(--l6);--tc:var(--l6)}

/* ==========================================================================
   05 FARE
   ========================================================================== */
.fare-sec{background:var(--paper)}
.fare-head{max-width:none}
.fare-head .d2 s{
  color:var(--l1);text-decoration:none;position:relative;white-space:nowrap;
}
.fare-head .d2 s::after{content:"";position:absolute;left:-4%;right:-4%;top:46%;height:.09em;background:var(--l1);transform:rotate(-6deg)}
.fare-head .lede{margin-top:26px;max-width:46ch}
.fare{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);border:3px solid var(--ink);margin-top:56px}
.fare-l{padding:34px 36px 36px;border-right:3px solid var(--ink);display:flex;flex-direction:column;gap:20px}
.fare-l .top{display:flex;justify-content:space-between;align-items:center}
.badge{display:inline-flex;align-items:center;gap:8px;height:30px;padding:0 10px;background:var(--yellow);font-weight:700;font-size:13px}
.price{display:flex;align-items:flex-end;gap:14px;margin-top:6px}
.price b{font-stretch:62%;font-weight:800;font-size:150px;line-height:.78;letter-spacing:-.01em}
.price span{font-size:19px;font-weight:600;padding-bottom:8px;line-height:1.25}
.price span s{color:var(--muted);font-weight:500}
.fare-l .save{font-size:16px;line-height:1.5;margin:0;max-width:40ch}
.fare-l .btn{margin-top:auto}
.fare-r{padding:34px 36px}
.fare-r .label{color:var(--muted)}
.incl{list-style:none;padding:0;margin:14px 0 0}
.incl li{display:grid;grid-template-columns:28px 1fr;gap:12px;padding:13px 0;border-bottom:1px solid var(--grey-2);font-size:17px;line-height:1.4}
.incl li:last-child{border-bottom:0}
.incl .tick{width:22px;height:22px;background:var(--ink);color:var(--yellow);display:grid;place-items:center;margin-top:1px}
.incl .tick svg{width:12px;height:12px}
.incl small{display:block;color:var(--muted);font-size:14px;margin-top:2px}

/* departure board */
.board{background:var(--ink);color:#fff;margin-top:56px;padding:30px 36px 34px}
.board-top{display:flex;justify-content:space-between;align-items:flex-end;gap:var(--gutter);flex-wrap:wrap;padding-bottom:24px;border-bottom:2px solid #fff}
.board-top .d3{color:var(--yellow)}
.clock{display:flex;gap:6px;align-items:flex-start}
.clock .u{display:grid;gap:6px;justify-items:center}
.clock .u b{
  display:block;min-width:1.5em;text-align:center;background:var(--ink-3);padding:8px 10px 4px;
  font-stretch:62%;font-weight:800;font-size:76px;line-height:.9;color:var(--yellow);font-variant-numeric:tabular-nums;
}
.clock .u span{font-size:12px;font-weight:600;color:var(--muted-on-dark)}
.clock .sep{font-stretch:62%;font-weight:800;font-size:60px;line-height:1.1;color:#555}
.dep{width:100%;border-collapse:collapse;margin-top:6px}
.dep th{text-align:left;font-size:var(--fs-label);font-weight:600;color:var(--muted-on-dark);padding:16px 18px 10px 0}
.dep td{padding:18px 18px 18px 0;border-top:1px solid #333;font-size:18px;vertical-align:middle}
.dep td.big{font-stretch:62%;font-weight:800;font-size:38px;line-height:1;text-transform:uppercase}
.dep tr.next td.big{color:var(--yellow)}
.dep tr.later td{color:#8d8d8d}
.dep .st{display:inline-flex;align-items:center;gap:10px;font-weight:600}
.dep .st .dot{background:var(--yellow)}

/* ==========================================================================
   06 TICKET
   ========================================================================== */
.ticket-sec{background:var(--ink);color:#fff;padding-bottom:110px}
.ticket-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.3fr);gap:64px;align-items:start}
.ticket-copy .d1{font-size:clamp(52px,7.6vw,128px)}
.ticket-sec .d1{color:var(--yellow)}
.ticket-copy .lede{margin-top:30px;max-width:30ch;font-weight:400}
.reasons{list-style:none;margin:34px 0 0;padding:0;border-top:2px solid #fff}
.reasons li{display:grid;grid-template-columns:56px 1fr;gap:12px;padding:15px 0;border-bottom:1px solid #444;font-size:16.5px;line-height:1.45}
.reasons b{font-weight:700;font-variant-numeric:tabular-nums}

.ticket{display:grid;grid-template-columns:minmax(0,1fr) 150px;background:var(--yellow);color:var(--ink);position:relative}
.ticket::before,.ticket::after{
  content:"";position:absolute;right:139px;width:22px;height:22px;border-radius:50%;background:var(--ink);
}
.ticket::before{top:-11px}
.ticket::after{bottom:-11px}
.ticket-main{padding:0 30px 30px}
.ticket-band{display:flex;justify-content:space-between;align-items:center;height:60px;margin:0 0 26px;border-bottom:3px solid var(--ink);color:var(--ink)}
.ticket-band .label{font-weight:700}
.ticket-band .label{font-size:14px}
.field{display:grid;gap:10px;margin-bottom:24px}
.field-top{display:flex;justify-content:space-between;align-items:baseline}
.field-top .hint{font-size:13px;font-weight:500;color:rgba(0,0,0,.66)}
.email{
  width:100%;border:0;border-bottom:4px solid var(--ink);background:transparent;border-radius:0;
  font-size:30px;font-weight:600;letter-spacing:-.015em;padding:4px 0 10px;outline:none;
}
.email::placeholder{color:rgba(0,0,0,.36)}
.email:focus{border-bottom-color:var(--l2)}
.email.err{border-bottom-color:var(--l1)}
.line-pick{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.opt{position:relative}
.opt input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.opt > span{
  display:flex;align-items:center;gap:10px;min-height:56px;padding:8px 10px;border:2px solid var(--ink);
  font-weight:600;font-size:15px;line-height:1.15;transition:background .12s,color .12s;
}
.opt input:checked + span{background:var(--ink);color:#fff}
.opt-later{display:block;font-weight:500;font-size:12px;opacity:.7}
.opt input:checked + span .bullet{box-shadow:0 0 0 2px #fff}
.opt input:focus-visible + span{outline:3px solid var(--l2);outline-offset:2px}
.opt:hover > span{background:rgba(0,0,0,.08)}
.opt input:checked:hover + span{background:var(--ink)}
.lang-pick{display:flex;flex-wrap:wrap;gap:6px}
.lang-pick .opt > span{min-height:40px;padding:0 12px;font-size:15px}
.ticket-main .btn{width:100%;margin-top:6px;min-height:68px;font-size:22px}
.ticket-stub{border-left:3px dashed var(--ink);padding:22px 18px;display:flex;flex-direction:column;gap:16px}
.admit{writing-mode:vertical-rl;transform:rotate(180deg);font-stretch:62%;font-weight:800;font-size:58px;line-height:.9;text-transform:uppercase;align-self:center;flex:1}
.stub-f .label{font-size:12px;color:rgba(0,0,0,.66);display:block;margin-bottom:3px}
.stub-f b{font-stretch:62%;font-weight:800;font-size:23px;line-height:1;display:flex;align-items:center;gap:6px}
.form-msg{margin:14px 0 0;font-size:15px;font-weight:600;min-height:1.4em}
.form-msg.err{color:#B4170F}
.ticket.is-done .ticket-band{border-bottom-color:var(--l3)}
.ticket.is-done .admit{color:var(--ink)}

/* ==========================================================================
   FAQ
   ========================================================================== */
.faq-sec{background:var(--paper)}
.faq-grid{display:grid;grid-template-columns:minmax(0,.75fr) minmax(0,1.25fr);gap:64px;align-items:start}
.faq-title .d1{font-size:clamp(52px,6.4vw,104px)}
.faq-title .d1 span{display:block;color:var(--grey-3)}
.faq-title p{margin:28px 0 0;max-width:30ch}
.faq details{border-bottom:var(--rule-thin) solid var(--ink)}
.faq details:first-child{border-top:var(--rule) solid var(--ink)}
.faq summary{
  list-style:none;cursor:pointer;display:grid;grid-template-columns:1fr 44px;gap:24px;align-items:center;
  padding:22px 0;font-stretch:75%;font-weight:700;font-size:28px;line-height:1.1;letter-spacing:-.005em;
}
.faq summary::-webkit-details-marker{display:none}
.faq .pm{width:44px;height:44px;background:var(--ink);color:var(--yellow);display:grid;place-items:center;transition:background .15s}
.faq .pm svg{width:18px;height:18px;transition:transform .2s}
.faq details[open] .pm svg{transform:rotate(45deg)}
.faq summary:hover .pm{background:var(--l2);color:#fff}
.faq .ans{padding:0 68px 26px 0;font-size:17px;line-height:1.6;max-width:64ch}
.faq .ans p{margin:0 0 .8em}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.foot{background:var(--yellow);padding:72px 0 32px}
.foot-cta{display:grid;grid-template-columns:minmax(0,1fr) 400px;gap:var(--gutter);align-items:end;padding-bottom:56px}
.foot-cta .d2{max-width:14ch}
.foot-cta .meta{display:flex;justify-content:space-between;margin-top:12px;font-size:14px;font-weight:600}
.wordmark{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;border-bottom:var(--rule) solid var(--ink);padding-bottom:14px}
.wordmark b{font-stretch:62%;font-weight:800;font-size:clamp(110px,21vw,300px);line-height:.74;letter-spacing:-.02em}
.wordmark .bullets{gap:8px;padding-bottom:10px}
.wordmark .bullet{font-size:22px}
.foot-base{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;padding-top:18px;font-size:14px;font-weight:500}
.foot-base nav{display:flex;gap:22px;flex-wrap:wrap}
.foot-base a{text-decoration:none}
.foot-base a:hover{text-decoration:underline;text-underline-offset:3px}
.foot-base .social{display:flex;gap:18px}
.foot-base .social a{display:inline-flex;align-items:center;gap:7px;font-weight:600}
.foot-base .social svg{width:16px;height:16px;flex:none}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width:1260px){
  .hero-row{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) 340px}
  .hero-row > .label{display:none}
}
@media (max-width:1080px){
  :root{--gutter:24px}
  .blocks{grid-template-columns:1fr repeat(3,auto)}
  .blocks a.hide-md{display:none}
  .strip{grid-template-columns:1fr auto}
  .strip > .label{display:none}
  .hero-row{grid-template-columns:1fr 1fr}
  .hero-cta{grid-column:1/-1}
  .sec-head,.sec-intro,.why-grid,.map-note{grid-template-columns:1fr}
  .sec-intro > :first-child:empty{display:none}
  .why-lede{grid-template-columns:1fr}
  .track .wrap{grid-template-columns:90px 1fr}
  .track .wrap > :last-child{grid-column:2}
  .fare{grid-template-columns:minmax(0,1fr)}
  .fare-l{border-right:0;border-bottom:3px solid var(--ink)}
  .ticket-grid,.faq-grid,.foot-cta{grid-template-columns:minmax(0,1fr)}
  .tt .along{display:none}
}
@media (max-width:720px){
  :root{--gutter:18px}
  body{font-size:16px}
  .blocks{grid-template-columns:1fr auto}
  .blocks a:not(.brand):not(.is-cta){display:none}
  .brand-tag{display:none}
  .strip{grid-template-columns:1fr}
  .hero-row{grid-template-columns:1fr}
  .app-body{grid-template-columns:minmax(0,1fr)}
  .tests{border-left:0;border-top:2px solid var(--ink)}
  .fit{grid-template-columns:1fr}
  .tt thead{display:none}
  .tt tr{display:grid;grid-template-columns:64px 1fr;padding:18px 0;border-bottom:2px solid var(--ink)}
  .tt td{border:0;padding:0 0 8px;width:auto!important}
  .tt td:first-child{grid-row:span 3}
  .tt-title{flex-direction:column;align-items:flex-start}
  .tt-stats{text-align:left}
  .compare thead{display:none}
  .compare tr{display:grid}
  .compare th,.compare td{width:auto;border:0;padding:6px 18px}
  .compare tbody tr{border-bottom:1px solid #333;padding:10px 0}
  .track .wrap{grid-template-columns:1fr}
  .track .wrap > :last-child{grid-column:auto}
  .price b{font-size:110px}
  .clock .u b{font-size:52px}
  .dep thead{display:none}
  .dep tr{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid #333;padding:10px 0}
  .dep td{border:0;padding:4px 0}
  .ticket{grid-template-columns:minmax(0,1fr)}
  .ticket-main{padding:0 20px 24px}
  .email{font-size:24px}
  .ticket::before,.ticket::after{display:none}
  .ticket-stub{border-left:0;border-top:3px dashed var(--ink);flex-direction:row;flex-wrap:wrap}
  .admit{writing-mode:horizontal-tb;transform:none;font-size:40px;flex-basis:100%}
  .line-pick{grid-template-columns:1fr 1fr}
  .faq summary{font-size:22px}
  .faq .ans{padding-right:0}
}

/* ==========================================================================
   REWORK: offer strip, quick signup, why on dark, seat map, boarding bar
   ========================================================================== */
.strip{grid-template-columns:220px minmax(0,1fr) auto;align-items:center}
.strip .lede{font-size:19px;line-height:1.3;text-wrap:balance;max-width:30ch}
.offer{display:flex;margin:0;border:2px solid var(--ink)}
.offer > div{padding:7px 14px 8px;border-left:2px solid var(--ink);display:grid;gap:2px;white-space:nowrap}
.offer > div:first-child{border-left:0}
.offer dt{font-size:11.5px;font-weight:600;letter-spacing:.01em;color:rgba(0,0,0,.62)}
.offer dd{margin:0;font-stretch:75%;font-weight:800;font-size:22px;line-height:1;display:flex;align-items:center;gap:7px}
.offer dd small{font-stretch:100%;font-weight:600;font-size:12px}
.offer .live{background:var(--ink);color:var(--yellow)}
.offer .live dt{color:var(--muted-on-dark)}
.offer .live .dot{background:var(--yellow)}

.quick{display:grid;gap:10px}
.quick .label{font-size:14px}
.quick-row{display:grid;grid-template-columns:minmax(0,1fr) auto;background:var(--paper);box-shadow:inset 0 0 0 3px var(--ink)}
.quick-email{
  min-width:0;height:60px;padding:0 16px;border:0;background:transparent;border-radius:0;outline:none;
  font-size:18px;font-weight:600;letter-spacing:-.01em;
}
.quick-email::placeholder{color:rgba(0,0,0,.38)}
.quick-row:focus-within{box-shadow:inset 0 0 0 3px var(--l2)}
.quick-row.err{box-shadow:inset 0 0 0 3px var(--l1)}
.quick .btn{min-height:60px;gap:16px}
.quick .meta{display:flex;justify-content:space-between;gap:10px;margin:0;font-size:13.5px;font-weight:600}
.quick .meta span::before{content:"";display:inline-block;width:7px;height:7px;background:var(--ink);margin-right:7px;vertical-align:1px}
.quick-msg{margin:0;min-height:1.3em;font-size:14px;font-weight:600}
.quick-msg.err{color:#B4170F}

/* why, now on dark */
.why-sec{background:var(--ink);color:#fff}
.why-sec .d2{color:var(--yellow)}
.why-sec .lede{color:#fff}
.why-sec .why-lede p:last-child{color:#cfcfcf}
.why-sec .compare{background:#151515;border-top:var(--rule) solid var(--yellow)}
.why-sec .compare th,.why-sec .compare td{border-bottom-color:#2c2c2c}
.why-sec .fit h3{border-bottom-color:#fff}
.why-sec .fit h3 .sym{background:var(--yellow);color:var(--ink)}
.why-sec .fit li{border-bottom-color:#3a3a3a}
.why-sec .fit .not li{color:#9a9a9a}
.why-sec .fit .not h3 .sym{background:#3a3a3a;color:#fff}

/* fare terms */
.terms{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px 18px;font-size:14px;font-weight:600}
.terms li{display:flex;align-items:center;gap:7px}
.terms li::before{content:"";width:12px;height:7px;border-left:2.5px solid var(--pass);border-bottom:2.5px solid var(--pass);transform:rotate(-45deg) translate(1px,-2px)}

/* seat map */
.seats{margin-top:34px;padding-top:24px;border-top:2px solid #fff}
.seats-head{display:flex;justify-content:space-between;align-items:flex-end;gap:var(--gutter);flex-wrap:wrap;margin-bottom:20px}
.seats-count{margin:6px 0 0;font-size:20px;font-weight:500}
.seats-count b{font-stretch:62%;font-weight:800;font-size:40px;color:var(--yellow);margin-right:4px;vertical-align:-3px}
.seats-count .muted{color:var(--muted-on-dark)}
.seats-key{display:flex;gap:18px;font-size:13px;font-weight:600;color:var(--muted-on-dark)}
.seats-key span{display:flex;align-items:center;gap:7px}
.seats-key i{width:11px;height:11px;display:block}
.k-taken{background:var(--yellow)}.k-free{box-shadow:inset 0 0 0 1.5px #555}.k-you{background:#fff;box-shadow:0 0 0 2px var(--l1)}
.train{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}
.car{position:relative;border:2px solid #4a4a4a;padding:26px 10px 10px;background:#121212}
.car:first-child{border-top-left-radius:22px}
.car:last-child{border-top-right-radius:22px}
.car-no{position:absolute;top:6px;left:10px;font-stretch:62%;font-weight:800;font-size:15px;line-height:1;color:#fff}
.car-no span{color:var(--muted-on-dark);font-stretch:100%;font-weight:600;font-size:11px;margin-left:6px}
.car-seats{display:grid;grid-template-columns:repeat(20,1fr);gap:3px}
.car-seats i{display:block;aspect-ratio:1;box-shadow:inset 0 0 0 1.5px #444;transition:background .3s}
.car-seats i.t{background:var(--yellow);box-shadow:none}
.car-seats i.you{background:#fff;box-shadow:0 0 0 2px var(--l1);animation:seat 1.2s ease-in-out 3}
.car-seats i.aisle{grid-column:span 20;height:4px;aspect-ratio:auto;box-shadow:none}
@keyframes seat{50%{background:var(--yellow)}}
.seats-you{margin:16px 0 0;font-size:15px;font-weight:600;color:var(--muted-on-dark)}
.seats-you b{color:#fff}

/* boarding bar */
.boardbar{
  position:fixed;left:0;right:0;top:0;z-index:50;background:var(--ink);color:#fff;
  transform:translateY(-100%);transition:transform .25s ease;border-bottom:3px solid var(--yellow);
}
.boardbar.is-on{transform:none}
.boardbar .wrap{display:flex;align-items:center;gap:22px;height:58px;font-size:15px}
.boardbar .brand-mark{width:26px;height:26px;font-size:15px}
.bb-route b{font-stretch:75%;font-weight:800;font-size:19px;color:var(--yellow);margin-right:6px}
.bb-left{display:flex;align-items:center;gap:8px;font-weight:600;margin-left:auto}
.bb-left .dot{background:var(--yellow)}
.bb-fare{font-weight:600;color:var(--muted-on-dark)}

@media (max-width:1260px){
  .strip{grid-template-columns:minmax(0,1fr) auto}
  .strip > .label{display:none}
}
@media (max-width:1080px){
  .strip{grid-template-columns:1fr}
  .offer{flex-wrap:wrap}
  .train{grid-template-columns:repeat(2,minmax(0,1fr))}
  .bb-fare{display:none}
}
@media (max-width:720px){
  .offer > div{flex:1 1 33%;border-left:0;border-top:2px solid var(--ink)}
  .offer > div:nth-child(-n+3){border-top:0}
  .offer dd{font-size:19px}
  .quick .meta{flex-wrap:wrap}
  .train{grid-template-columns:minmax(0,1fr)}
  .car{border-radius:0!important}
  .boardbar .wrap{gap:12px;height:52px}
  .bb-route{display:none}
  .bb-left{margin-left:0;flex:1}
  .terms{flex-direction:column}
  .map-box{display:none}
  .line-view{display:block}
  .map-legend{flex-wrap:nowrap;overflow-x:auto;gap:6px;top:52px;margin-top:24px;padding:10px 0;scrollbar-width:none;
    margin-left:calc(-1 * var(--gutter));margin-right:calc(-1 * var(--gutter));padding-left:var(--gutter);padding-right:var(--gutter)}
  .map-legend::-webkit-scrollbar{display:none}
  .map-legend button{flex:none;height:40px;font-size:14px;padding:0 12px 0 6px;gap:8px}
  .map-legend .bullet{font-size:12px}
  .compare tbody th,.compare td{width:auto}
  .compare td.us::before{top:13px}
  .hero-row .hero-cta{order:1}
  .hero-row .lede{order:2}
  .hero-row .hero-why{order:3}
  .hero-row{gap:20px;padding-bottom:56px}
}

/* ==========================================================================
   PHONES: one column, shorter, every call to action in reach
   ========================================================================== */
.t-passed,.more{display:none}
@media (max-width:720px){
  /* boarding bar: seats on the left, the button always on screen */
  .boardbar .wrap{gap:10px}
  .bb-left{flex:1 1 auto;min-width:0;font-size:14px;white-space:nowrap}
  .boardbar .btn{flex:none;min-height:38px;padding:0 12px;gap:10px;font-size:14.5px}

  /* hero: the offer strip reads in two rows, labels legible */
  .offer dt{font-size:12px}

  /* product frame: the lecture opens on request, passing tests fold into one line */
  .lec-body{position:relative}
  .panel[data-panel="lecture"]:not(.is-open) .lec-col{max-height:520px;overflow:hidden;-webkit-mask-image:linear-gradient(#000 70%,transparent)}
  .panel[data-panel="lecture"]:not(.is-open) .more{display:inline-flex}
  .more{align-items:center;gap:10px;margin-top:6px;padding:0 16px;height:44px;border:2px solid var(--ink);background:var(--paper);font-weight:600;font-size:15px;cursor:pointer}
  .more .arrow{width:16px;height:16px;transform:rotate(90deg)}
  .t-passed{display:flex;align-items:center;gap:10px;margin:0;padding:12px 22px 4px;font-size:13.5px;color:#3a3a3a}
  .t-passed .st{width:40px;height:18px;background:var(--pass);display:grid;place-items:center;font-family:var(--mono);font-size:9.5px;font-weight:600;letter-spacing:.06em;color:#fff}
  .t-passed .st::after{content:"PASS"}
  .t-list li.ok{display:none}
  .t-hist{display:none}
  .legend-row{padding-bottom:48px}

  /* why: each comparison row is a labelled pair, course on the left, slowcs on the right */
  .compare tbody tr{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:14px;padding:16px 18px 18px}
  .compare tbody th{grid-column:1/-1;padding:0 0 10px!important;font-size:14px;color:#fff}
  .compare tbody td{padding:0!important;font-size:15px;line-height:1.4}
  .compare td::before{content:attr(data-k);display:block;margin-bottom:5px;font-size:11.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase}
  .compare td.them::before{color:#777}
  .compare td.us{padding-left:12px!important;border-left:3px solid var(--yellow)}
  .compare td.us::before{content:attr(data-k);position:static;width:auto;height:auto;background:none;color:var(--yellow)}
  .compare td.them{color:#8d8d8d}

  /* timetable: the test count is noise in one column */
  .tt .n{display:none}

  /* network: the line view carries the descriptions, so the colour bands go */
  .lv-desc{margin:14px 0 4px;font-size:16px;line-height:1.45;color:#d6d6d6}
  .lines{display:none}
  .map-note{gap:18px}

  /* fare: one button line, price that doesn't wrap, a compact board */
  .fare-l{padding:24px 20px 26px}
  .fare-r{padding:24px 20px}
  .fare-l .btn{font-size:17px;white-space:nowrap}
  .price span{white-space:nowrap}
  .board{padding:22px 18px 24px;margin-top:36px}
  .board-top{padding-bottom:18px}
  .clock{width:100%;display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
  .clock .sep{display:none}
  .clock .u b{font-size:44px;min-width:0;width:100%;padding:8px 0 4px}
  .dep{display:none}
  .seats{margin-top:22px}
  .seats-count{font-size:17px}
  .seats-key{gap:12px}
  .train{grid-template-columns:1fr 1fr;gap:8px}
  .car{padding:22px 6px 6px}
  .car-seats{gap:2px}
  .car-no span{display:none}

  /* reserve: the fare already listed the reasons; the ticket fits the screen */
  .reasons{display:none}
  .ticket-copy .lede{margin-top:18px}
  .field-top .hint{display:none}
  .line-pick{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .line-pick .opt > span{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;column-gap:10px;row-gap:0;font-size:14.5px}
  .line-pick .opt .bullet{grid-row:span 2}
  .opt-later{grid-column:2;font-size:12px;line-height:1.1}
  .ticket-stub{padding:16px 20px;gap:12px 22px}
  .admit{font-size:32px}

  /* footer: wordmark and line bullets stack; links are real tap targets */
  .wordmark{flex-wrap:wrap;gap:12px}
  .wordmark .bullet{font-size:15px}
  .foot-base nav{gap:4px 18px}
  .foot-base nav a{display:inline-flex;align-items:center;min-height:40px}
  .foot-base .social{gap:4px 22px}
  .foot-cta .d2{max-width:none}
}
@media (max-width:360px){
  .fare-l .btn{font-size:15.5px;gap:12px;padding:0 16px}
  .boardbar .btn{font-size:13.5px;padding:0 10px}
  .bb-left{font-size:13px}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}

/* the bot trap: people never see or fill it */
.trap{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}