/* Self-hosted so Korean glyphs load reliably (no third-party CDN dependency). */
@font-face{
  font-family:'Pretendard Variable';
  font-weight:45 920;
  font-style:normal;
  font-display:swap;
  src:url("/assets/fonts/PretendardVariable.woff2") format("woff2-variations");
}
/* ═══════════════════════════════════════════════════════════════════════════
   MileMani — shared design system
   Dark-first · single mint accent ("seat available / go") · departure-board type.
   Tokens are the source of truth from the original landing; components extend them
   across the whole user-facing site. No ad-hoc colors or spacing in page files.
   Latin display = Hanken Grotesk; Korean glyphs fall through to Pretendard.
   ═══════════════════════════════════════════════════════════════════════════ */
:root{
  color-scheme: dark;              /* native controls/scrollbars follow the brand default */
  /* ═══ LAYER 1 — RAW PALETTES ════════════════════════════════════════════════
     The single source of truth per color. Components NEVER use the raw --d- or --l-
     palettes directly — change a color here and every theme binding below picks it up.  */
  /* dark (brand default) */
  --d-accent:#3FE0A2; --d-accent-hover:#5EEBB6; --d-accent-dim:rgba(63,224,162,.12); --d-accent-ring:rgba(63,224,162,.32); --d-on-accent:#04130d;
  --d-bg:#0a0c0e; --d-surface:#111417; --d-surface-hover:#171c20; --d-sunken:#0c0e11;
  --d-border:rgba(255,255,255,.08); --d-border-strong:rgba(255,255,255,.16);
  --d-text:#e9edeb; --d-text-secondary:#a4aba9; --d-text-muted:#6b726f;
  --d-amber:#ffc25c; --d-danger:#ff7a7a;
  --d-shadow:0 10px 34px rgba(0,0,0,.45); --d-shadow-lg:0 24px 70px rgba(0,0,0,.55);
  /* light */
  --l-accent:#0fb981; --l-accent-hover:#0ca271; --l-accent-dim:rgba(15,185,129,.12); --l-accent-ring:rgba(15,185,129,.30); --l-on-accent:#ffffff;
  --l-bg:#ffffff; --l-surface:#f7f9f8; --l-surface-hover:#eef2f0; --l-sunken:#eff3f1;
  --l-border:rgba(16,24,20,.10); --l-border-strong:rgba(16,24,20,.17);
  --l-text:#0e1512; --l-text-secondary:#48524e; --l-text-muted:#727b77;
  --l-amber:#b26f13; --l-danger:#cf3d3d;
  --l-shadow:0 8px 26px rgba(16,24,20,.10); --l-shadow-lg:0 22px 60px rgba(16,24,20,.14);
  /* ═══ LAYER 2 — SEMANTIC TOKENS (the component API) ══════════════════════════
     Bound to DARK by default (brand is dark-first). Layer-3 blocks re-bind these
     per theme; components only ever read these names.                          */
  --accent:var(--d-accent); --accent-hover:var(--d-accent-hover); --accent-dim:var(--d-accent-dim); --accent-ring:var(--d-accent-ring); --on-accent:var(--d-on-accent);
  --bg:var(--d-bg); --surface:var(--d-surface); --surface-hover:var(--d-surface-hover); --sunken:var(--d-sunken);
  --border:var(--d-border); --border-strong:var(--d-border-strong);
  --text:var(--d-text); --text-secondary:var(--d-text-secondary); --text-muted:var(--d-text-muted);
  --amber:var(--d-amber);          /* pending/warning semantic ONLY — never brand */
  --danger:var(--d-danger);
  --shadow:var(--d-shadow); --shadow-lg:var(--d-shadow-lg);
  /* ── type ── */
  --ui:'Hanken Grotesk','Pretendard Variable','Pretendard',-apple-system,BlinkMacSystemFont,system-ui,'Apple SD Gothic Neo','Malgun Gothic',sans-serif;
  --mono:'JetBrains Mono','Pretendard Variable',ui-monospace,'SF Mono',Menlo,'Apple SD Gothic Neo',monospace;
  /* ── spacing scale (no ad-hoc values) ── */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px;
  --sp-6:24px; --sp-8:32px; --sp-10:40px; --sp-12:48px; --sp-16:64px; --sp-20:80px; --sp-24:96px;
  /* ── layout ── */
  --content-max:1180px; --prose-max:720px;
  /* ── radius ── */
  --r-sm:8px; --r-md:12px; --r-lg:16px; --r-xl:22px; --r-pill:999px;
  /* ── motion ── */
  --ease:cubic-bezier(.2,.8,.2,1); --t:140ms;
  /* elevation tokens (--shadow/--shadow-lg) are bound in Layer 2 above */
}
/* ═══ LAYER 3 — PER-THEME BINDINGS ════════════════════════════════════════════
   To add a third theme: add one raw --x-* set above + one [data-theme="x"] block.
   ─────────────────────────────────────────────────────────────────────────── */
/* forced dark — must win over a system-light preference */
:root[data-theme="dark"]{
  color-scheme: dark;
  --accent:var(--d-accent); --accent-hover:var(--d-accent-hover); --accent-dim:var(--d-accent-dim); --accent-ring:var(--d-accent-ring); --on-accent:var(--d-on-accent);
  --bg:var(--d-bg); --surface:var(--d-surface); --surface-hover:var(--d-surface-hover); --sunken:var(--d-sunken);
  --border:var(--d-border); --border-strong:var(--d-border-strong);
  --text:var(--d-text); --text-secondary:var(--d-text-secondary); --text-muted:var(--d-text-muted);
  --amber:var(--d-amber); --danger:var(--d-danger);
  --shadow:var(--d-shadow); --shadow-lg:var(--d-shadow-lg);
}
/* forced light */
:root[data-theme="light"]{
  color-scheme: light;
  --accent:var(--l-accent); --accent-hover:var(--l-accent-hover); --accent-dim:var(--l-accent-dim); --accent-ring:var(--l-accent-ring); --on-accent:var(--l-on-accent);
  --bg:var(--l-bg); --surface:var(--l-surface); --surface-hover:var(--l-surface-hover); --sunken:var(--l-sunken);
  --border:var(--l-border); --border-strong:var(--l-border-strong);
  --text:var(--l-text); --text-secondary:var(--l-text-secondary); --text-muted:var(--l-text-muted);
  --amber:var(--l-amber); --danger:var(--l-danger);
  --shadow:var(--l-shadow); --shadow-lg:var(--l-shadow-lg);
}
/* system light — unless the user has forced dark */
@media (prefers-color-scheme: light){
  :root:not([data-theme="dark"]){
    color-scheme: light;
    --accent:var(--l-accent); --accent-hover:var(--l-accent-hover); --accent-dim:var(--l-accent-dim); --accent-ring:var(--l-accent-ring); --on-accent:var(--l-on-accent);
    --bg:var(--l-bg); --surface:var(--l-surface); --surface-hover:var(--l-surface-hover); --sunken:var(--l-sunken);
    --border:var(--l-border); --border-strong:var(--l-border-strong);
    --text:var(--l-text); --text-secondary:var(--l-text-secondary); --text-muted:var(--l-text-muted);
    --amber:var(--l-amber); --danger:var(--l-danger);
    --shadow:var(--l-shadow); --shadow-lg:var(--l-shadow-lg);
  }
}
*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth;}
body{
  margin:0; font-family:var(--ui); font-size:16px; line-height:1.5; color:var(--text);
  background:
    radial-gradient(900px 520px at 50% -22%, rgba(63,224,162,.07), transparent 62%),
    var(--bg);
  background-attachment:fixed; min-height:100vh;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img{max-width:100%;}
a{color:var(--accent); text-decoration:none;}
a:hover{text-decoration:underline;}
::selection{background:var(--accent-dim); color:var(--text);}

/* ── layout helpers ── */
.wrap{max-width:var(--content-max); margin:0 auto; padding-inline:var(--sp-5);}  /* horizontal ONLY — a `padding` shorthand here clobbers .section's vertical padding (same specificity) */
.prose{max-width:var(--prose-max);}
.section{padding-block:var(--sp-20);}          /* vertical ONLY — independent of .wrap's horizontal padding */
.section.tight{padding-block:var(--sp-12);}
.center{text-align:center;}
.mono{font-family:var(--mono);}
.hide{display:none !important;}
@media(min-width:1024px){ .wrap{padding-inline:var(--sp-10);} }

/* ── eyebrow / headings ── */
.eyebrow{font-family:var(--mono); font-size:11px; letter-spacing:.22em; text-transform:uppercase;
         color:var(--text-muted); margin:0 0 var(--sp-5);}
.eyebrow.accent{color:var(--accent);}
h1,h2,h3{color:var(--text); letter-spacing:-.02em; margin:0 0 var(--sp-4);}
h1{font-weight:800; font-size:clamp(34px,7vw,54px); line-height:1.04; letter-spacing:-.032em;}
h2{font-weight:700; font-size:clamp(24px,3.4vw,34px); line-height:1.1;}
h3{font-weight:600; font-size:19px;}
h1 em,h2 em{font-style:normal; color:var(--accent);}
.lede{font-size:clamp(16px,1.6vw,18px); line-height:1.55; color:var(--text-secondary); max-width:46ch; margin:0;}
p{margin:0 0 var(--sp-4);}
.muted{color:var(--text-muted);}
.rule{border:0; border-top:1px solid var(--border); margin:var(--sp-12) 0;}

/* ── Korean (CJK) typography — Hangul needs looser leading, no mid-word breaks,
   and far less letter-spacing than the Latin display type is tuned for ── */
html[lang="ko"]{ word-break:keep-all; line-break:strict; }
html[lang="ko"] body{ line-height:1.65; }
html[lang="ko"] h1{ line-height:1.24; letter-spacing:-.01em; }
html[lang="ko"] h2{ line-height:1.34; letter-spacing:-.01em; }
html[lang="ko"] h3{ line-height:1.5; letter-spacing:0; }
html[lang="ko"] .lede,
html[lang="ko"] p,
html[lang="ko"] .step p,
html[lang="ko"] .features li,
html[lang="ko"] .faq-a > div,
html[lang="ko"] .legal p{ line-height:1.75; }
html[lang="ko"] .eyebrow{ letter-spacing:.04em; }
html[lang="ko"] .navlink,
html[lang="ko"] .plan-name,
html[lang="ko"] .badge,
html[lang="ko"] .footer-col h4{ letter-spacing:.02em; }
html[lang="ko"] .brand{ letter-spacing:.28em; }   /* MILEMANI is Latin — keep its spacing */

/* ── top nav (injected by app.js into #site-header) ── */
.nav{position:sticky; top:0; z-index:50; backdrop-filter:blur(12px);
     background:linear-gradient(to bottom, color-mix(in srgb, var(--bg) 90%, transparent), color-mix(in srgb, var(--bg) 62%, transparent));
     border-bottom:1px solid var(--border);}
.nav-inner{max-width:var(--content-max); margin:0 auto; padding:var(--sp-3) var(--sp-5);
           display:flex; align-items:center; gap:var(--sp-6);}
@media(min-width:1024px){ .nav-inner{padding:var(--sp-3) var(--sp-10);} }
.brand{font-family:var(--mono); font-weight:600; font-size:14px; letter-spacing:.34em; color:var(--text); white-space:nowrap;}
.brand i{color:var(--accent); font-style:normal;}
.nav-links{display:flex; align-items:center; gap:var(--sp-5); margin-left:var(--sp-4);}
.nav-right{margin-left:auto; display:flex; align-items:center; gap:var(--sp-4);}
.navlink{font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase;
         color:var(--text-secondary); cursor:pointer; transition:color var(--t); white-space:nowrap;}
.navlink:hover,.navlink.on{color:var(--accent); text-decoration:none;}
.nav-links.mobile-hidden{display:flex;}
.navtoggle{display:none; background:transparent; border:0; color:var(--text); cursor:pointer; padding:6px;}
@media(max-width:860px){
  .nav-links{display:none; position:absolute; top:100%; left:0; right:0; flex-direction:column;
             align-items:flex-start; gap:0; background:var(--surface); border-bottom:1px solid var(--border); margin:0;}
  .nav-links.open{display:flex;}
  .nav-links .navlink{width:100%; padding:var(--sp-4) var(--sp-5); border-top:1px solid var(--border);}
  .navtoggle{display:block;}
}

/* ── live pill ── */
.live{display:inline-flex; align-items:center; gap:var(--sp-2); font-family:var(--mono);
      font-size:10.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--text-muted);}
.live .dot{width:7px; height:7px; border-radius:50%; background:var(--accent); animation:pulse 2.6s var(--ease) infinite;}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(63,224,162,.5);}70%{box-shadow:0 0 0 7px rgba(63,224,162,0);}100%{box-shadow:0 0 0 0 rgba(63,224,162,0);}}

/* ── language + theme toggles (shared segmented-pill look) ── */
.langtoggle,.themetoggle{display:inline-flex; border:1px solid var(--border); border-radius:var(--r-pill); overflow:hidden;}
.langtoggle button,.themetoggle button{font-family:var(--mono); font-size:11px; letter-spacing:.06em; background:transparent;
                   border:0; color:var(--text-muted); padding:6px 10px; cursor:pointer; transition:color var(--t),background var(--t);}
.langtoggle button.on,.themetoggle button.on{color:var(--on-accent); background:var(--accent);}
/* theme segments are icon-first and a touch tighter than the KO/EN text */
.themetoggle button{padding:6px 9px; line-height:1; font-size:12px;}
.themetoggle button:hover:not(.on){color:var(--text-secondary);}

/* ── buttons ── */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px;
     font-family:var(--ui); font-weight:600; font-size:15px; border:0; border-radius:var(--r-md);
     padding:12px 18px; background:var(--accent); color:var(--on-accent); cursor:pointer;
     transition:background var(--t),transform var(--t); text-decoration:none; white-space:nowrap;}
.btn:hover{background:var(--accent-hover); text-decoration:none;}
.btn:active{transform:translateY(1px);}
.btn:disabled{opacity:.45; cursor:default;}
.btn.ghost{background:transparent; border:1px solid var(--border-strong); color:var(--text);}
.btn.ghost:hover{background:var(--surface-hover); border-color:var(--text-muted);}
.btn.sm{padding:8px 13px; font-size:13px;}
.btn.lg{padding:15px 26px; font-size:16px;}
.btn.block{width:100%;}
.btn.danger{background:transparent; border:1px solid color-mix(in srgb, var(--danger) 45%, transparent); color:var(--danger);}
.btn.danger:hover{background:color-mix(in srgb, var(--danger) 10%, transparent);}
.actions{display:flex; gap:var(--sp-3); flex-wrap:wrap;}
.linkbtn{display:inline-block; background:transparent; border:0; padding:0; font-family:var(--mono);
         font-size:12px; letter-spacing:.04em; color:var(--text-muted); cursor:pointer;}
.linkbtn:hover{color:var(--text-secondary); text-decoration:underline;}

/* ── social login buttons ── */
.oauth{display:flex; flex-direction:column; gap:var(--sp-3);}
.btn-oauth{display:flex; align-items:center; justify-content:center; gap:10px; width:100%;
           font-family:var(--ui); font-weight:600; font-size:15px; border-radius:var(--r-md);
           padding:13px 18px; cursor:pointer; border:1px solid var(--border-strong); text-decoration:none;
           transition:filter var(--t),background var(--t),border-color var(--t);}
.btn-oauth:hover{text-decoration:none; filter:brightness(1.05);}
.btn-oauth .ico{width:18px; height:18px; flex:none; display:inline-flex;}
.btn-oauth.kakao{background:#FEE500; color:#191600; border-color:transparent;}
.btn-oauth.google{background:#fff; color:#1f1f1f; border-color:transparent;}
.oauth-sep{display:flex; align-items:center; gap:var(--sp-3); color:var(--text-muted);
           font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; margin:var(--sp-5) 0;}
.oauth-sep::before,.oauth-sep::after{content:""; flex:1; height:1px; background:var(--border);}

/* ── form atoms ── */
label{display:block; font-family:var(--mono); font-size:11px; letter-spacing:.06em; color:var(--text-muted); margin:0 0 var(--sp-2);}
input,select,textarea{
  width:100%; font-family:var(--ui); font-size:15px; color:var(--text);
  background:var(--sunken); border:1px solid var(--border); border-radius:var(--r-md);
  padding:12px 13px; transition:border-color var(--t),box-shadow var(--t);
}
textarea{resize:vertical; min-height:96px; line-height:1.5;}
input::placeholder,textarea::placeholder{color:var(--text-muted);}
input:focus,select:focus,textarea:focus{outline:0; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-ring);}
select{appearance:none; -webkit-appearance:none; cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--text-muted) 50%),linear-gradient(135deg,var(--text-muted) 50%,transparent 50%);
  background-position:calc(100% - 17px) 52%,calc(100% - 12px) 52%; background-size:5px 5px,5px 5px; background-repeat:no-repeat;}
.field{margin-bottom:var(--sp-5);}
.grid2{display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-5) var(--sp-3);}
.route{display:grid; grid-template-columns:1fr auto 1fr; align-items:end; gap:var(--sp-3);}
.route .arrow{font-family:var(--mono); font-size:18px; color:var(--accent); padding-bottom:11px; text-align:center;}
@media(max-width:520px){
  .grid2{grid-template-columns:1fr;}
  .route{grid-template-columns:1fr;} .route .arrow{display:none;}
}

/* ── cabin / route chips ── */
.chips{display:flex; flex-wrap:wrap; gap:var(--sp-2);}
.chip{position:relative; font-family:var(--mono); font-size:13px; letter-spacing:.01em; color:var(--text-secondary);
      background:var(--sunken); border:1px solid var(--border); border-radius:var(--r-pill); padding:8px 15px;
      cursor:pointer; user-select:none; transition:color var(--t),background var(--t),border-color var(--t);}
.chip input{position:absolute; opacity:0; width:0; height:0; pointer-events:none;}
.chip:hover{color:var(--text); border-color:var(--border-strong);}
.chip:has(input:checked),.chip.on{color:var(--accent); background:var(--accent-dim); border-color:var(--accent);}
.chip .ar{color:var(--accent); margin:0 5px;}

/* ── pills / badges ── */
.status{display:flex; flex-wrap:wrap; gap:var(--sp-2);}
.pill{display:inline-flex; align-items:center; gap:6px; font-family:var(--mono); font-size:12px; letter-spacing:.01em;
      color:var(--text-secondary); background:var(--surface); border:1px solid var(--border); border-radius:var(--r-pill); padding:6px 12px;}
.pill.ok{color:var(--accent); background:var(--accent-dim); border-color:transparent;}
.pill.warn{color:var(--amber); background:color-mix(in srgb, var(--amber) 14%, transparent); border-color:transparent;}
.badge{display:inline-flex; align-items:center; gap:6px; font-family:var(--mono); font-size:10.5px; letter-spacing:.14em;
       text-transform:uppercase; color:var(--accent); background:var(--accent-dim); border:1px solid var(--accent-ring);
       border-radius:var(--r-pill); padding:5px 11px;}

/* ── cards ── */
.card{background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); padding:var(--sp-6);
      transition:border-color var(--t),transform var(--t);}
.card.hover:hover{border-color:var(--border-strong); transform:translateY(-2px);}
.cards{display:grid; gap:var(--sp-4);}
@media(min-width:760px){ .cards.c2{grid-template-columns:1fr 1fr;} .cards.c3{grid-template-columns:repeat(3,1fr);} }

/* ── feature list ── */
.features{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:var(--sp-3);}
.features li{position:relative; padding-left:22px; font-size:15px; line-height:1.5; color:var(--text-secondary);}
.features li::before{content:""; position:absolute; left:2px; top:9px; width:6px; height:6px; border-radius:50%; background:var(--accent);}
.features li b{color:var(--text); font-weight:600;}

/* ── mechanism comparison (focus → frequency → speed) ── */
.mech-label{font-family:var(--mono); font-size:12px; letter-spacing:.12em; text-transform:uppercase;
            color:var(--text-muted); margin-bottom:var(--sp-5);}
.mech-label.accent{color:var(--accent);}
.mech-card{display:flex; flex-direction:column;}
.dotgrid{display:grid; grid-template-columns:repeat(12,1fr); gap:7px;}
.dotgrid i{width:100%; aspect-ratio:1; border-radius:50%; background:var(--border-strong);
           animation:sweep 6s linear infinite;}
@keyframes sweep{0%,90%{background:var(--border-strong);}95%{background:var(--text-secondary);}100%{background:var(--border-strong);}}
.mech-row{display:grid; grid-template-columns:1fr auto; align-items:center; gap:var(--sp-3);
          padding:var(--sp-3) 0; border-bottom:1px solid var(--border); font-family:var(--mono); font-size:13px;}
.mech-row:last-child{border-bottom:0;}
.mech-row .rt{color:var(--text);} .mech-row .rt .ar{color:var(--accent); margin:0 6px;}
.mech-note{font-family:var(--mono); font-size:12px; letter-spacing:.04em; color:var(--text-muted); margin-top:var(--sp-6);}

/* ── numbered steps ── */
.steps{display:grid; gap:var(--sp-6);}
@media(min-width:760px){ .steps.s3{grid-template-columns:repeat(3,1fr);} .steps.s4{grid-template-columns:repeat(4,1fr);} }
.step .n{font-family:var(--mono); font-size:12px; letter-spacing:.1em; color:var(--accent);
         width:34px; height:34px; display:flex; align-items:center; justify-content:center;
         border:1px solid var(--accent-ring); border-radius:50%; margin-bottom:var(--sp-4);}
.step h3{margin-bottom:var(--sp-2);}
.step p{font-size:14px; color:var(--text-secondary); margin:0;}

/* ── pricing ── */
.plans{display:grid; gap:var(--sp-5); align-items:stretch;}
@media(min-width:860px){ .plans.p3{grid-template-columns:repeat(3,1fr);} }
.plan{background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); padding:var(--sp-8) var(--sp-6);
      display:flex; flex-direction:column;}
.plan.featured{border-color:var(--accent); box-shadow:0 0 0 1px var(--accent-ring), var(--shadow);}
.plan .plan-name{font-family:var(--mono); font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--text-secondary); margin-bottom:var(--sp-3);}
.plan .price{font-size:38px; font-weight:800; letter-spacing:-.03em; color:var(--text); line-height:1;}
.plan .price small{font-size:14px; font-weight:500; color:var(--text-muted); letter-spacing:0;}
.plan .price-note{font-size:13px; color:var(--text-muted); margin:var(--sp-2) 0 var(--sp-6);}
.plan .features{margin-bottom:var(--sp-8); flex:1;}
.plan .btn{width:100%;}

/* ── FAQ accordion ── */
.faq-item{border-top:1px solid var(--border);}
.faq-item:last-child{border-bottom:1px solid var(--border);}
.faq-q{display:flex; align-items:center; justify-content:space-between; gap:var(--sp-4); width:100%;
       background:transparent; border:0; text-align:left; cursor:pointer; padding:var(--sp-5) 0;
       font-family:var(--ui); font-weight:600; font-size:16px; color:var(--text);}
.faq-q .ic{font-family:var(--mono); color:var(--accent); transition:transform var(--t); flex:none;}
.faq-item.open .faq-q .ic{transform:rotate(45deg);}
.faq-a{max-height:0; overflow:hidden; transition:max-height var(--t) var(--ease);}
.faq-a > div{padding:0 0 var(--sp-5); color:var(--text-secondary); font-size:15px; line-height:1.6; max-width:60ch;}

/* ── calendar / availability table ── */
.caltable{width:100%; border-collapse:collapse; font-size:14px;}
.caltable th{font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase;
             color:var(--text-muted); font-weight:500; text-align:right; padding:0 0 var(--sp-3); border-bottom:1px solid var(--border-strong);}
.caltable th:first-child{text-align:left;}
.caltable td{padding:var(--sp-3) 0; border-bottom:1px solid var(--border); text-align:right; font-variant-numeric:tabular-nums;}
.caltable tr:hover td{background:color-mix(in srgb, var(--text) 4%, transparent);}
.caltable td:first-child{text-align:left; font-family:var(--mono); font-size:13px; color:var(--text);}
.caltable .pts{color:var(--accent); font-weight:600; font-family:var(--mono);}
.caltable .na{color:var(--text-muted);}
.caltable .seen{font-family:var(--mono); font-size:12px; color:var(--text-muted);}
.table-scroll{overflow-x:auto;}

/* ── alerts list rows ── */
.alert{display:flex; align-items:center; justify-content:space-between; gap:var(--sp-4); padding:var(--sp-4) 0; border-top:1px solid var(--border);}
.alert:first-child{border-top:0;}
.alert b{font-weight:600; font-size:15px; color:var(--text); letter-spacing:-.01em;}
.alert .meta{margin-top:3px; font-family:var(--mono); font-size:12px; color:var(--text-muted);}
.x{background:transparent; border:0; color:var(--text-muted); font-family:var(--mono); font-size:12px; cursor:pointer; padding:6px 8px; transition:color var(--t);}
.x:hover{color:var(--text);}
.empty{color:var(--text-muted); font-size:14px; padding:var(--sp-8) 0;}

/* ── footer ── */
.footer{border-top:1px solid var(--border); margin-top:var(--sp-24); padding:var(--sp-12) 0 var(--sp-16);}
.footer-inner{max-width:var(--content-max); margin:0 auto; padding:0 var(--sp-5); display:flex; flex-wrap:wrap; gap:var(--sp-8); justify-content:space-between;}
@media(min-width:1024px){ .footer-inner{padding:0 var(--sp-10);} }
.footer .brand{margin-bottom:var(--sp-3);}
.footer .tagline{font-size:13px; color:var(--text-muted); max-width:34ch;}
.footer-cols{display:flex; gap:var(--sp-16); flex-wrap:wrap;}
.footer-col h4{font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--text-muted); margin:0 0 var(--sp-4);}
.footer-col a{display:block; font-size:14px; color:var(--text-secondary); margin-bottom:var(--sp-3);}
.footer-col a:hover{color:var(--accent); text-decoration:none;}
.footer-legal{width:100%; margin-top:var(--sp-8); padding-top:var(--sp-6); border-top:1px solid var(--border);
              font-size:12px; color:var(--text-muted); display:flex; flex-wrap:wrap; gap:var(--sp-4); justify-content:space-between;}

/* ── toast ── */
.toast{position:fixed; left:50%; bottom:24px; transform:translate(-50%,8px); background:var(--surface);
       border:1px solid var(--border-strong); color:var(--text); font-size:14px; padding:11px 18px; border-radius:var(--r-md);
       box-shadow:var(--shadow); opacity:0; pointer-events:none; transition:opacity var(--t),transform var(--t); z-index:100; max-width:90vw;}
.toast.show{opacity:1; transform:translate(-50%,0);}

/* ── hero visual: mini departure board ── */
.board{background:var(--sunken); border:1px solid var(--border); border-radius:var(--r-lg); padding:var(--sp-5); font-family:var(--mono); box-shadow:var(--shadow);}
.board-head{display:flex; justify-content:space-between; font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--text-muted); padding-bottom:var(--sp-3); border-bottom:1px solid var(--border); margin-bottom:var(--sp-3);}
.board-row{display:grid; grid-template-columns:1fr auto auto; gap:var(--sp-3); align-items:center; padding:var(--sp-3) 0; border-bottom:1px solid var(--border); font-size:13px;}
.board-row:last-child{border-bottom:0;}
.board-row .rt{color:var(--text);}
.board-row .rt .ar{color:var(--accent); margin:0 6px;}
.board-row .cab{font-size:11px; color:var(--text-secondary);}
.board-row .pt{color:var(--accent); font-weight:600; text-align:right;}
.board-row.flash{animation:flashrow 2.6s var(--ease) infinite;}
@keyframes flashrow{0%,100%{background:transparent;}50%{background:var(--accent-dim);}}

/* ── onboarding stepper ── */
.stepper{display:flex; align-items:center; gap:var(--sp-2); margin-bottom:var(--sp-10); flex-wrap:wrap;}
.stepper .s{display:flex; align-items:center; gap:var(--sp-2); font-family:var(--mono); font-size:12px; color:var(--text-muted);}
.stepper .s .dot{width:24px; height:24px; border-radius:50%; border:1px solid var(--border-strong); display:flex; align-items:center; justify-content:center; font-size:11px;}
.stepper .s.done .dot{background:var(--accent); border-color:var(--accent); color:var(--on-accent);}
.stepper .s.active{color:var(--text);}
.stepper .s.active .dot{border-color:var(--accent); color:var(--accent);}
.stepper .bar{flex:1; height:1px; background:var(--border); min-width:14px;}

/* ── motion = signal ── */
.reveal{opacity:0; transform:translateY(10px); animation:rise 600ms var(--ease) both;}
.d1{animation-delay:60ms;} .d2{animation-delay:130ms;} .d3{animation-delay:200ms;} .d4{animation-delay:270ms;}
@keyframes rise{to{opacity:1; transform:none;}}
@media(prefers-reduced-motion:reduce){
  .reveal{animation:none; opacity:1; transform:none;}
  .live .dot,.board-row.flash,.dotgrid i{animation:none;}
  html{scroll-behavior:auto;}
}