/* ============================================================
   Sale Radar — deep-indigo watchlist treatment.
   Indigo ground, magenta accent, oversized figures and a four-segment
   stage track on every card. Deliberately unlike the warm paper almanac,
   the near-black terminal table, and the reference site's light card grid.
   ============================================================ */
:root{
  --bg:#0c0a1d;
  --surface:#151233;
  --elevated:#1c1840;
  --ink:#eceafd;
  --ink-soft:#b0aad6;
  --muted:#7d76a8;
  --rule:#282253;
  --rule-soft:#1f1a45;
  --accent:#e5308a;
  --accent-2:#f472b6;
  --violet:#8b5cf6;
  --shell:min(1100px,calc(100% - 34px));
  --radius:14px;
  --font:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,monospace;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;color:var(--ink);
  font-family:var(--font);line-height:1.6;
  -webkit-font-smoothing:antialiased;
  background:
    radial-gradient(90% 50% at 15% 0%,rgba(229,48,138,.13),transparent 58%),
    radial-gradient(80% 45% at 90% 8%,rgba(139,92,246,.15),transparent 60%),
    var(--bg);
}
img{max-width:100%;display:block;height:auto}
a{color:inherit}
.shell{width:var(--shell);margin:0 auto}
.vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  padding:.9rem 1.7rem;border:1px solid transparent;border-radius:999px;
  font:inherit;font-weight:700;font-size:.95rem;text-decoration:none;cursor:pointer;
  background:linear-gradient(135deg,var(--accent),var(--accent-2));color:#fff;
  box-shadow:0 12px 32px rgba(229,48,138,.3);
  transition:filter .14s,transform .12s;
}
.btn:hover{filter:brightness(1.08)}
.btn:active{transform:translateY(1px)}
.btn-lg{padding:1rem 2rem;font-size:1rem}

/* ---------- header ---------- */
.site-head{
  position:sticky;top:0;z-index:60;
  background:rgba(12,10,29,.9);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid var(--rule);
}
.head-row{display:flex;align-items:center;gap:.85rem;height:62px}
.brand{display:flex;align-items:center;gap:.6rem;text-decoration:none;min-height:44px}
.mark{
  display:grid;place-items:center;width:32px;height:32px;flex:0 0 auto;
  border-radius:50%;color:#fff;
  background:linear-gradient(135deg,var(--accent),var(--violet));
}
.mark svg{width:17px;height:17px}
.brand-txt{display:flex;flex-direction:column;line-height:1.14}
.brand-txt b{font-size:.92rem;font-weight:800;letter-spacing:.05em}
.brand-txt small{color:var(--muted);font-size:.6rem;letter-spacing:.15em;text-transform:uppercase}
.head-note{
  color:var(--accent-2);font-family:var(--mono);font-size:.64rem;
  letter-spacing:.12em;text-transform:uppercase;margin-inline-end:auto;
}

/* ---------- language ---------- */
.lang{position:relative}
.lang-btn{
  display:inline-flex;align-items:center;gap:.4rem;min-height:40px;
  border:1px solid var(--rule);background:var(--surface);border-radius:999px;
  padding:.48rem .8rem;font:inherit;font-size:.8rem;font-weight:700;
  color:var(--ink);cursor:pointer;transition:border-color .14s;
}
.lang-btn:hover{border-color:var(--accent)}
.lang-globe{display:inline-flex}
.lang-globe svg{width:15px;height:15px}
.lang-caret{display:inline-flex}
.lang-caret svg{width:10px;height:10px;transition:transform .18s}
.lang-btn[aria-expanded="true"] .lang-caret svg{transform:rotate(180deg)}
.lang-list{
  position:absolute;inset-inline-end:0;top:calc(100% + .5rem);z-index:80;
  min-width:228px;max-height:70vh;overflow-y:auto;
  background:var(--surface);border:1px solid var(--rule);border-radius:12px;
  box-shadow:0 20px 48px rgba(0,0,0,.55);margin:0;padding:.32rem;list-style:none;
  animation:langIn .14s ease-out;
}
@keyframes langIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.lang-list[hidden]{display:none}
.lang-list button{
  display:flex;justify-content:space-between;gap:1rem;width:100%;
  border:0;background:none;font:inherit;font-size:.87rem;color:var(--ink);
  padding:.6rem .7rem;min-height:44px;border-radius:8px;cursor:pointer;text-align:start;
}
.lang-list button:hover,
.lang-list button[aria-current="true"]{background:var(--elevated)}
.lang-list button[aria-current="true"]{color:var(--accent-2);font-weight:700}
.lang-native{color:var(--muted);font-size:.78rem}
.lang-list li+li{margin-top:1px}

/* ---------- type ---------- */
.kicker{
  margin:0 0 .55rem;color:var(--accent-2);font-family:var(--mono);
  font-size:.66rem;font-weight:700;letter-spacing:.19em;text-transform:uppercase;
}
h1,h2,h3{font-weight:800;letter-spacing:-.02em}
.lede{margin:0 0 1.4rem;color:var(--ink-soft);font-size:1rem;max-width:60ch}
section h2{margin:0 0 .65rem;font-size:1.9rem;line-height:1.18}

/* ---------- hero ---------- */
.hero{padding:3rem 0 2.6rem;border-bottom:1px solid var(--rule)}
.hero-in{display:grid;gap:2.2rem}
@media (min-width:900px){
  .hero-in{grid-template-columns:minmax(0,1fr) minmax(0,360px);align-items:center;gap:3rem}
}
.hero-copy h1{margin:0 0 .9rem;font-size:2.9rem;line-height:1.08}
.hero-cta{margin:1.5rem 0 .6rem}
.hero-note{margin:0;color:var(--muted);font-size:.76rem}

/* oversized figures */
.figures{
  list-style:none;margin:0;padding:0;display:grid;gap:.8rem;
}
.figures li{
  background:var(--surface);border:1px solid var(--rule);border-radius:var(--radius);
  padding:1rem 1.2rem;display:flex;align-items:baseline;gap:1rem;
}
.figures b{
  font-size:2.4rem;line-height:1;font-weight:800;
  background:linear-gradient(135deg,var(--accent),var(--accent-2));
  -webkit-background-clip:text;background-clip:text;color:transparent;
  min-width:2.6ch;
}
.figures span{color:var(--ink-soft);font-size:.9rem}

/* ---------- watch grid ---------- */
.watch{padding:3rem 0;border-bottom:1px solid var(--rule)}
.grid{
  margin-top:1.8rem;display:grid;gap:1rem;
  grid-template-columns:repeat(auto-fill,minmax(258px,1fr));
}
.card{
  background:var(--surface);border:1px solid var(--rule);border-radius:var(--radius);
  padding:1.15rem 1.2rem 1.25rem;
  transition:border-color .14s,transform .14s;
}
.card:hover{border-color:var(--accent);transform:translateY(-2px)}
.card-top{display:flex;align-items:center;gap:.8rem;margin-bottom:1rem}
.card-top img{
  width:46px;height:46px;border-radius:12px;background:var(--elevated);flex:0 0 auto;
}
.card-id{min-width:0}
.card-id h3{
  margin:0;font-size:1.02rem;line-height:1.25;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.card-id abbr{
  text-decoration:none;color:var(--muted);
  font-family:var(--mono);font-size:.68rem;font-weight:400;letter-spacing:.06em;
  margin-inline-start:.25rem;
}
.cat{margin:.15rem 0 0;color:var(--muted);font-size:.78rem}

/* stage name sits opposite an explicit n/4 counter, so the stepped bar below
   reads as "which stop on the route", never as a completion percentage */
.stage-row{
  display:flex;align-items:baseline;justify-content:space-between;gap:.6rem;
  margin:0 0 .5rem;
}
.stage-label{
  margin:0;color:var(--accent-2);font-family:var(--mono);
  font-size:.62rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
}
.stage-n{
  color:var(--muted);font-family:var(--mono);font-size:.62rem;
  font-weight:700;letter-spacing:.08em;flex:0 0 auto;
}
/* four-segment stage track */
.track{display:flex;gap:.28rem}
.track i{
  flex:1 1 0;height:5px;border-radius:999px;
  background:var(--rule-soft);
}
.track i.on{background:linear-gradient(90deg,var(--accent),var(--accent-2))}
.card-note{margin:0;color:var(--muted);font-size:.76rem}

/* ---------- the road ---------- */
.road{padding:3rem 0;background:var(--surface);border-bottom:1px solid var(--rule)}
.road-list{
  list-style:none;margin:1.6rem 0 0;padding:0;
  display:grid;gap:.9rem;
}
@media (min-width:700px){.road-list{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1000px){.road-list{grid-template-columns:repeat(4,minmax(0,1fr))}}
.road-list li{
  background:var(--bg);border:1px solid var(--rule);border-radius:var(--radius);
  padding:1.1rem 1.15rem;position:relative;
}
.rn{
  display:inline-grid;place-items:center;width:28px;height:28px;margin-bottom:.7rem;
  border-radius:50%;font-family:var(--mono);font-size:.76rem;font-weight:700;
  color:#fff;background:linear-gradient(135deg,var(--accent),var(--violet));
}
.road-list h3{margin:0 0 .35rem;font-size:1.02rem;line-height:1.3}
.road-list p{margin:0;color:var(--ink-soft);font-size:.87rem}

/* ---------- faq ---------- */
.faq{padding:3rem 0;border-bottom:1px solid var(--rule)}
.qa{margin:1.5rem 0 0;display:grid;gap:.8rem}
@media (min-width:820px){.qa{grid-template-columns:repeat(2,minmax(0,1fr))}}
.qa-row{
  background:var(--surface);border:1px solid var(--rule);border-radius:var(--radius);
  padding:1.1rem 1.2rem;
}
.qa-row h3{margin:0 0 .4rem;font-size:1rem;line-height:1.35}
.qa-row p{margin:0;color:var(--ink-soft);font-size:.9rem}

/* ---------- final ---------- */
.final{padding:3.4rem 0;text-align:center}
.final-in{max-width:620px}
.final h2{margin:0 0 .7rem;font-size:2rem;line-height:1.16}
.final p{color:var(--ink-soft);margin:0 0 .4rem}
.final .hero-cta{margin:1.6rem 0 .6rem}
.final .hero-note{margin:0}

/* ---------- footer ---------- */
.site-foot{padding:2.2rem 0;border-top:1px solid var(--rule);background:var(--surface)}
.foot-in{display:grid;gap:.7rem}
.foot-brand{margin:0;font-weight:800;font-size:1rem;letter-spacing:.03em}
.disclaimer{margin:0;color:var(--muted);font-size:.78rem;max-width:78ch;line-height:1.6}

/* ---------- skip ---------- */
.skip{
  position:absolute;top:0;inset-inline-start:0;z-index:100;
  background:var(--accent);color:#fff;padding:.6rem 1rem;border-radius:0 0 10px 0;
  font-size:.85rem;
  width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;
}
.skip:focus{width:auto;height:auto;overflow:visible;clip-path:none}

/* ---------- responsive ---------- */
@media (max-width:760px){
  .hero-copy h1{font-size:2.15rem}
  section h2{font-size:1.55rem}
  .final h2{font-size:1.6rem}
  .hero{padding:2.3rem 0 2.2rem}
  .watch,.road,.faq{padding:2.3rem 0}
  .head-note{display:none}
  .figures b{font-size:2rem}
}
@media (max-width:420px){
  .hero-copy h1{font-size:1.88rem}
  .brand-txt small{display:none}
  .grid{grid-template-columns:1fr}
  .figures li{padding:.85rem 1rem}
  .figures b{font-size:1.8rem;min-width:2.2ch}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation-duration:.01ms !important;transition-duration:.01ms !important}
}

/* ---------- entry cover: radar sweep with blips ---------- */
.gate.cover{
  position:fixed;inset:0;z-index:150;display:flex;align-items:center;
  justify-content:center;padding:20px;
  background:var(--bg,var(--paper,#0c0a1d));
}
/* see the note on the calendar block: [hidden] must beat `display:flex` */
.gate.cover[hidden]{display:none}
.cover-panel{width:100%;max-width:300px;text-align:center}
.scope{
  position:relative;width:116px;height:116px;margin:0 auto 24px;
  border-radius:50%;border:1px solid var(--rule,#282253);overflow:hidden;
  background:radial-gradient(circle at 50% 50%,
    color-mix(in srgb,var(--accent,#e5308a) 12%,transparent) 0%,
    transparent 68%);
}
.scope .ring{position:absolute;border-radius:50%;border:1px solid var(--rule,#282253)}
.scope .ring.r1{inset:0}
.scope .ring.r2{inset:30px;opacity:.7}
.scope .sweep{
  position:absolute;inset:0;border-radius:50%;
  background:conic-gradient(from 0deg,
    transparent 0deg,transparent 292deg,
    color-mix(in srgb,var(--accent,#e5308a) 55%,transparent) 360deg);
  animation:cover-scan 1.15s linear infinite;
  animation-play-state:paused;
}
.scope.live .sweep{animation-play-state:running}
@keyframes cover-scan{to{transform:rotate(360deg)}}
.scope .blip{
  position:absolute;width:5px;height:5px;border-radius:50%;
  background:var(--accent,#e5308a);opacity:0;transform:scale(.4);
  transition:opacity .22s linear,transform .22s ease-out;
}
.scope .blip.on{opacity:1;transform:scale(1)}
.scope .blip.b1{top:30px;left:74px}
.scope .blip.b2{top:66px;left:38px}
.scope .blip.b3{top:52px;left:88px}
.cover-label{
  margin:0;color:var(--muted);font-size:.78rem;letter-spacing:.13em;
  text-transform:uppercase;
}