/* ============================================================
   CARWASHINDEX — the wash-or-wait index
   a drivenerve instrument · INT.07 · rinse cyan
   Static, no build. Tokens inherit the drivenerve family system
   (drivenerve-hub-v3/styles.css); accent swapped to #25D7FF.
   ============================================================ */

/* ---------- 0. KIT FONTS (self-hosted, brand kit V3) ---------- */
@font-face{font-family:"Archivo";src:url("fonts/Archivo.woff2") format("woff2");font-weight:100 900;font-stretch:75% 125%;font-display:swap}
@font-face{font-family:"Inter";src:url("fonts/Inter.woff2") format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:"JetBrains Mono";src:url("fonts/JetBrainsMono.woff2") format("woff2");font-weight:100 800;font-display:swap}

/* ---------- 1. TOKENS ---------- */
:root{
  /* surfaces */
  --bg-0:#09090B;
  --bg-1:#0E0E11;
  --bg-2:#14141A;
  --bg-3:#1B1B22;

  /* ink */
  --ink-0:#F4F2ED;
  --ink-1:#B8B6B0;
  --ink-2:#7E7D83;
  --ink-3:#55545A;

  /* accent — rinse cyan, used sparingly */
  --acc:#25D7FF;
  --acc-soft:rgba(37,215,255,.12);
  --acc-ink:#0A0A0B;

  /* functional verdict colors (status, never identity) */
  --go:#25D7FF;
  --go-soft:rgba(37,215,255,.12);
  --hold:#FFD23F;
  --hold-soft:rgba(255,210,63,.12);
  --halt:#FF315A;
  --halt-soft:rgba(255,49,90,.12);

  /* lines */
  --line:rgba(244,242,237,.08);
  --line-strong:rgba(244,242,237,.16);

  /* type */
  --f-disp:"Archivo",system-ui,"Segoe UI",sans-serif;
  --f-body:"Inter",system-ui,"Segoe UI",sans-serif;
  --f-mono:"JetBrains Mono",ui-monospace,"Cascadia Mono",Consolas,monospace;

  /* scale */
  --fs-hero:clamp(2.7rem,8.4vw,5.6rem);
  --fs-h2:clamp(1.6rem,3.4vw,2.4rem);
  --fs-h3:clamp(1.1rem,2vw,1.35rem);
  --fs-body:1rem;
  --fs-sm:.875rem;
  --fs-xs:.75rem;

  /* geometry */
  --r-s:6px;
  --r-m:12px;
  --wrap:1240px;
  --gutter:clamp(1.1rem,4vw,2.5rem);
  --sec-pad:clamp(3.6rem,8vw,7rem);

  /* motion */
  --ease:cubic-bezier(.22,1,.36,1);
  --t-fast:.22s;
  --t-med:.45s;
}

/* ---------- 2. RESET / BASE ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  background:var(--bg-0);
  color:var(--ink-0);
  font-family:var(--f-body);
  font-size:var(--fs-body);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:clip; /* clip, not hidden: hidden makes body a scroll container and breaks window scrolling */
}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
input{font:inherit;color:inherit}
::selection{background:var(--acc);color:var(--acc-ink)}
:focus-visible{outline:2px solid var(--acc);outline-offset:3px;border-radius:2px}

h1,h2,h3{
  font-family:var(--f-disp);
  font-variation-settings:"wdth" 112;
  font-stretch:112%;
  font-weight:800;
  line-height:1.02;
  letter-spacing:-.015em;
  text-transform:uppercase;
  text-wrap:balance;
}

/* film grain */
body::before{
  content:"";position:fixed;inset:-50%;z-index:90;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.6'/%3E%3C/svg%3E");
  background-size:240px 240px;
}

/* ---------- 3. UTILITIES ---------- */
.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gutter)}
.sec{padding-block:var(--sec-pad);border-bottom:1px solid var(--line)}
.mono{font-family:var(--f-mono)}
.muted{color:var(--ink-2)}
.skip{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--acc);color:var(--acc-ink);padding:.6rem 1rem;
  font-family:var(--f-mono);font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:.1em;
}
.skip:focus{left:0}
[hidden]{display:none !important}

.kicker{
  display:inline-flex;align-items:center;gap:.6rem;
  font-family:var(--f-mono);font-size:var(--fs-xs);font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2);
}
.kicker::before{content:"";width:22px;height:1px;background:var(--acc)}

.sechead{
  display:flex;align-items:baseline;gap:1rem;
  margin-bottom:clamp(1.8rem,4.5vw,3rem);
  padding-bottom:1.1rem;border-bottom:1px solid var(--line);
}
.sechead .idx{font-family:var(--f-mono);font-size:var(--fs-xs);color:var(--acc);letter-spacing:.14em}
.sechead h2{font-size:var(--fs-h2)}
.sechead .aside{margin-left:auto;font-family:var(--f-mono);font-size:var(--fs-xs);color:var(--ink-3);letter-spacing:.1em;text-transform:uppercase}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  font-family:var(--f-mono);font-size:var(--fs-xs);font-weight:500;
  letter-spacing:.12em;text-transform:uppercase;
  border:1px solid var(--line-strong);border-radius:var(--r-s);
  padding:.78rem 1.15rem;color:var(--ink-0);
  transition:border-color var(--t-fast) var(--ease),background var(--t-fast) var(--ease),color var(--t-fast) var(--ease),transform var(--t-fast) var(--ease);
}
.btn:hover{border-color:var(--acc);color:var(--acc)}
.btn--solid{background:var(--acc);border-color:var(--acc);color:var(--acc-ink)}
.btn--solid:hover{background:#5BE2FF;border-color:#5BE2FF;color:var(--acc-ink);transform:translateY(-1px)}
.btn--ghost{border-color:var(--line)}
.btn:disabled{opacity:.45;cursor:not-allowed}

/* ---------- 4. HEADER ---------- */
.site-head{
  position:sticky;top:0;z-index:100;
  background:rgba(9,9,11,.86);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.head-in{display:flex;align-items:center;gap:1.4rem;height:60px}
.brand{display:flex;align-items:center;gap:.6rem;flex:0 0 auto}
.brand svg{height:15px;width:auto}
.brand .wm{
  font-family:var(--f-disp);font-weight:800;font-variation-settings:"wdth" 112;font-stretch:112%;
  text-transform:lowercase;letter-spacing:-.014em;font-size:1.14rem;line-height:1;
}
.head-nav{display:flex;gap:1.3rem;margin-left:auto}
.head-nav a{
  font-family:var(--f-mono);font-size:var(--fs-xs);letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-2);transition:color var(--t-fast) var(--ease);
}
.head-nav a:hover,.head-nav a[aria-current="page"]{color:var(--ink-0)}

.units{display:flex;gap:.5rem;flex:0 0 auto}
.seg{display:inline-flex;border:1px solid var(--line);border-radius:var(--r-s);overflow:hidden}
.seg button{
  font-family:var(--f-mono);font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;
  padding:.34rem .55rem;color:var(--ink-2);
  transition:background var(--t-fast) var(--ease),color var(--t-fast) var(--ease);
}
.seg button+button{border-left:1px solid var(--line)}
.seg button[aria-pressed="true"]{background:var(--bg-3);color:var(--ink-0)}
/* mobile: nav becomes a second row inside the sticky header */
@media(max-width:640px){
  .head-in{height:auto;flex-wrap:wrap;column-gap:1rem;row-gap:0;padding-block:.5rem .45rem}
  .head-in .brand{min-height:46px}  /* row one reads ~54px on every page, with or without the unit toggles */
  .units{margin-left:auto}
  .head-nav{
    order:99;width:100%;margin-left:0;
    justify-content:space-between;gap:.5rem;
    padding-top:.35rem;border-top:1px solid var(--line);
  }
  .head-nav a{
    font-size:clamp(.72rem,2.9vw,.8rem);letter-spacing:.05em;
    white-space:nowrap;color:var(--ink-1);
    padding-block:.28rem;  /* 24px+ tap target (WCAG 2.2 SC 2.5.8) without widening the row */
  }
  /* sticky header is ~2 rows (92px) tall here, so anchor jumps must clear it */
  html{scroll-padding-top:100px}
}
/* family rule: mark alone below 480px */
@media(max-width:480px){
  .brand .wm{display:none}
  .brand svg{height:17px}
  .head-in{column-gap:.8rem}  /* column only: a row gap here would pad out the nav row above */
  .units{margin-left:auto}
}

/* ---------- 5. HERO ---------- */
.hero{padding-block:clamp(3.2rem,8vw,6.5rem) clamp(2.6rem,6vw,4.5rem);border-bottom:1px solid var(--line);position:relative}
.hero h1{font-size:var(--fs-hero);margin-top:1.1rem;max-width:14ch}
.hero h1 em{font-style:normal;color:var(--acc)}
.hero .lede{color:var(--ink-1);max-width:56ch;margin-top:1.3rem;font-size:clamp(1rem,1.6vw,1.12rem)}
.hero .lede b{color:var(--ink-0);font-weight:600}

/* hero plate — Higgsfield macro, masked into the canvas.
   NB: no overflow:hidden here — it would clip the search dropdown;
   the plate stays inside .hero bounds by construction (inset:0). */
.hero{overflow:visible}
.hero .plate{
  position:absolute;inset:0;left:auto;width:min(58%,760px);z-index:-1;pointer-events:none;
  background-size:cover;background-position:center right;
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.55) 45%,#000 100%);
  mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.55) 45%,#000 100%);
  opacity:.8;
}
.hero .plate::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(0deg,var(--bg-0) 0%,transparent 30%,transparent 78%,var(--bg-0) 100%);
}
.hero{position:relative;z-index:5} /* above following sections so the search dropdown overlays them */
@media(max-width:860px){
  .hero .plate{width:100%;opacity:.34;
    -webkit-mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.5) 55%,#000 100%);
    mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.5) 55%,#000 100%);}
}

/* city pages */
.city-lede{color:var(--ink-1);max-width:62ch;margin-top:1rem}
.city-lede b{color:var(--ink-0);font-weight:600}
.city-facts{display:flex;flex-wrap:wrap;gap:.45rem;margin-top:1.2rem}
.city-facts .chip{cursor:default}
.city-facts .chip:hover{border-color:var(--line);color:var(--ink-1)}
.city-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:.8rem}
.city-card{
  border:1px solid var(--line);border-radius:var(--r-s);background:var(--bg-1);
  padding:.95rem 1.05rem;display:flex;flex-direction:column;gap:.25rem;
  transition:border-color var(--t-fast) var(--ease),transform var(--t-fast) var(--ease);
}
.city-card:hover{border-color:var(--acc);transform:translateY(-2px)}
.city-card .c-name{font-weight:600}
.city-card .c-cc{font-family:var(--f-mono);font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}

/* city directory (live deep links) */
.cov-line{margin-top:1.2rem;font-family:var(--f-mono);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2)}
.cov-line b{color:var(--acc);font-weight:500}
.dir-head{
  display:flex;align-items:center;gap:.7rem;margin:2.1rem 0 .8rem;
  font-family:var(--f-mono);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);
}
.dir-head::after{content:"";flex:1;height:1px;background:var(--line)}
.dir-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:.45rem}
.dir-link{
  display:flex;justify-content:space-between;align-items:baseline;gap:.5rem;
  border:1px solid var(--line);border-radius:var(--r-s);background:var(--bg-1);
  padding:.5rem .75rem;font-size:.85rem;color:var(--ink-1);
  transition:border-color var(--t-fast) var(--ease),color var(--t-fast) var(--ease);
}
.dir-link:hover{border-color:var(--acc);color:var(--ink-0)}
.dir-link .cc{font-family:var(--f-mono);font-size:.56rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);flex:0 0 auto}

/* ---------- 6. LOCATION CONSOLE ---------- */
.console{margin-top:clamp(1.8rem,4vw,2.6rem);max-width:680px;position:relative}
.console-row{display:flex;gap:.6rem}
.console-row .field{position:relative;flex:1}
.field input{
  width:100%;background:var(--bg-1);border:1px solid var(--line-strong);border-radius:var(--r-s);
  padding:.82rem 1rem .82rem 2.6rem;color:var(--ink-0);font-size:1rem;
  transition:border-color var(--t-fast) var(--ease);
}
.field input::placeholder{color:var(--ink-3)}
.field input:focus{border-color:var(--acc);outline:none}
.field .fld-ico{position:absolute;left:.95rem;top:50%;transform:translateY(-50%);color:var(--ink-3);pointer-events:none}
.field .fld-ico svg{width:15px;height:15px}

.suggest{
  position:absolute;top:calc(100% + 6px);left:0;right:0;z-index:60;
  background:var(--bg-2);border:1px solid var(--line-strong);border-radius:var(--r-s);
  overflow:hidden;box-shadow:0 18px 42px rgba(0,0,0,.55);
  max-height:290px;overflow-y:auto;
}
.suggest li{list-style:none}
.suggest button{
  display:flex;width:100%;align-items:baseline;gap:.7rem;text-align:left;
  padding:.68rem .95rem;border-bottom:1px solid var(--line);
  transition:background var(--t-fast) var(--ease);
}
.suggest li:last-child button{border-bottom:0}
.suggest button:hover,.suggest button[aria-selected="true"]{background:var(--bg-3)}
.suggest .s-name{font-weight:600;font-size:.95rem}
.suggest .s-meta{font-family:var(--f-mono);font-size:.64rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2);margin-left:auto;flex:0 0 auto}
.suggest .s-none{padding:.7rem .95rem;color:var(--ink-2);font-size:var(--fs-sm)}

.recents{display:flex;flex-wrap:wrap;gap:.45rem;margin-top:.8rem;align-items:center}
.recents .r-lab{font-family:var(--f-mono);font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);margin-right:.2rem}
.chip{
  display:inline-flex;align-items:center;gap:.45rem;
  font-family:var(--f-mono);font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;
  border:1px solid var(--line);border-radius:var(--r-s);padding:.36rem .62rem;color:var(--ink-1);
  transition:border-color var(--t-fast) var(--ease),color var(--t-fast) var(--ease);
}
.chip:hover{border-color:var(--acc);color:var(--ink-0)}
@media(max-width:560px){
  .console-row{flex-direction:column}
  .console-row .btn{justify-content:center}
}

/* ---------- 7. READOUT (verdict panel) ---------- */
.readout{border:1px solid var(--line-strong);border-radius:var(--r-m);background:var(--bg-1);overflow:hidden}
.readout-top{
  display:flex;align-items:center;gap:1rem;flex-wrap:wrap;
  padding:.85rem 1.2rem;border-bottom:1px solid var(--line);
}
.readout-top .loc{display:flex;align-items:baseline;gap:.6rem;min-width:0}
.readout-top .loc b{font-weight:600;font-size:1rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:34ch}
.readout-top .loc .cc{font-family:var(--f-mono);font-size:.62rem;letter-spacing:.1em;color:var(--ink-3);text-transform:uppercase}
.readout-top .tools{display:flex;gap:.45rem;margin-left:auto;flex-wrap:wrap}
.stamp{
  font-family:var(--f-mono);font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-3);display:inline-flex;align-items:center;gap:.4rem;
}
.stamp::before{content:"";width:6px;height:6px;background:var(--acc);flex:0 0 auto}
.stamp.stale::before{background:var(--hold)}

.readout-main{
  display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(1.4rem,3.5vw,3rem);padding:clamp(1.5rem,4vw,2.6rem) clamp(1.2rem,3vw,2.4rem);
}
@media(max-width:860px){.readout-main{grid-template-columns:1fr}}

.verdict-word{
  font-family:var(--f-disp);font-variation-settings:"wdth" 112;font-stretch:112%;font-weight:800;
  font-size:clamp(3.2rem,9vw,5.8rem);line-height:.94;letter-spacing:-.015em;text-transform:uppercase;
  overflow-wrap:anywhere;
}
/* long verdicts (BORDERLINE) scale down so they never crowd the column */
.verdict-word.v-long{font-size:clamp(2.2rem,5.6vw,3.4rem);line-height:1}
.verdict-word.v-go{color:var(--go)}
.verdict-word.v-hold{color:var(--hold)}
.verdict-word.v-halt{color:var(--halt)}
.verdict-sub{font-family:var(--f-mono);font-size:var(--fs-xs);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2);margin-bottom:.55rem}
.verdict-reason{color:var(--ink-1);max-width:46ch;margin-top:1rem}
.verdict-reason b{color:var(--ink-0);font-weight:600}
.conf-row{display:flex;align-items:center;gap:.8rem;margin-top:1.35rem}
.conf-row .bar{position:relative;width:150px;height:4px;background:var(--bg-3);overflow:hidden}
.conf-row .bar i{position:absolute;inset:0;right:auto;background:var(--ink-2);transition:width var(--t-med) var(--ease)}
.conf-row .lab{font-family:var(--f-mono);font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}

/* index rail — the instrument */
.rail{display:flex;flex-direction:column;gap:1.2rem;justify-content:center}
.rail-score{display:flex;align-items:baseline;gap:.7rem}
.rail-score .n{font-family:var(--f-mono);font-weight:500;font-size:clamp(2.6rem,6vw,3.6rem);line-height:1;font-variant-numeric:tabular-nums}
.rail-score .d{font-family:var(--f-mono);font-size:.7rem;letter-spacing:.12em;color:var(--ink-3);text-transform:uppercase}
.rail-svg{width:100%;height:auto}
.dry-line{
  border-top:1px solid var(--line);padding-top:1.05rem;
  display:flex;align-items:center;gap:.85rem;flex-wrap:wrap;
}
.dry-line .k{font-family:var(--f-mono);font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.dry-line .v{font-family:var(--f-mono);font-size:.95rem;color:var(--ink-0)}
.dry-line .dots{display:flex;gap:4px}
.dry-line .dots i{width:9px;height:9px;border:1px solid var(--line-strong)}
.dry-line .dots i.on{background:var(--acc);border-color:var(--acc)}
.dry-line .dots i.half{background:linear-gradient(90deg,var(--acc) 50%,transparent 50%);border-color:var(--acc)}
.next-line{padding-top:.85rem;margin-top:-.1rem}
.next-line .v-acc{color:var(--acc)}

/* factors */
.factors{
  display:grid;grid-template-columns:repeat(6,1fr);
  border-top:1px solid var(--line);
}
@media(max-width:980px){.factors{grid-template-columns:repeat(3,1fr)}}
@media(max-width:560px){.factors{grid-template-columns:repeat(2,1fr)}}
.factor{
  padding:1rem 1.1rem;border-right:1px solid var(--line);
  display:flex;flex-direction:column;gap:.3rem;min-width:0;
}
.factor:last-child{border-right:0}
@media(max-width:980px){.factor:nth-child(3n){border-right:0}.factor{border-bottom:1px solid var(--line)}.factor:nth-child(n+4){border-bottom:0}}
@media(max-width:560px){.factor:nth-child(3n){border-right:1px solid var(--line)}.factor:nth-child(2n){border-right:0}.factor:nth-child(n+1){border-bottom:1px solid var(--line)}.factor:nth-child(n+5){border-bottom:0}}
.factor .f-lab{font-family:var(--f-mono);font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.factor .f-val{font-family:var(--f-mono);font-size:1.02rem;color:var(--ink-0);font-variant-numeric:tabular-nums;white-space:nowrap}
.factor .f-st{font-family:var(--f-mono);font-size:.6rem;letter-spacing:.12em;text-transform:uppercase}
.f-st.ok{color:var(--go)}
.f-st.watch{color:var(--hold)}
.f-st.fail{color:var(--halt)}
.f-st.na{color:var(--ink-3)}

.src-line{
  padding:.55rem 1.1rem;border-top:1px solid var(--line);
  font-family:var(--f-mono);font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);
}
.src-line a{color:var(--ink-2)}
.src-line a:hover{color:var(--ink-0)}

/* result step — the free route first, a labelled partner second */
.next-step{display:flex;align-items:center;gap:.9rem;flex-wrap:wrap;padding:.85rem 1.1rem;border-top:1px solid var(--line)}
.next-step .ns-lab{font-family:var(--f-mono);font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.next-step .ns-free{font-size:var(--fs-sm);color:var(--ink-1);border-bottom:1px solid var(--line-strong)}
.next-step .ns-free:hover{color:var(--acc);border-bottom-color:var(--acc)}
.next-step .btn{margin-left:auto}
.next-step .ns-fee{flex:1 0 100%;margin-top:-.35rem;font-size:var(--fs-xs);color:var(--ink-3)}
@media(max-width:560px){.next-step .btn{margin-left:0}}

/* readout states */
.state{padding:clamp(2.6rem,7vw,4.5rem) var(--gutter);text-align:center;display:flex;flex-direction:column;align-items:center;gap:1.1rem}
.state .st-mark svg{width:88px;height:auto;margin-inline:auto}
.state .st-line{font-family:var(--f-mono);font-size:var(--fs-xs);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2)}
.state .st-body{color:var(--ink-2);max-width:44ch;font-size:var(--fs-sm)}
@keyframes pulse{0%,100%{opacity:.35}50%{opacity:1}}
.state.loading .st-line{animation:pulse 1.4s ease-in-out infinite}
@media(prefers-reduced-motion:reduce){.state.loading .st-line{animation:none}}

/* ---------- 8. WINDOWS ---------- */
.win-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
@media(max-width:760px){.win-grid{grid-template-columns:1fr}}
.win-card{
  border:1px solid var(--line);border-radius:var(--r-m);background:var(--bg-1);
  padding:1.3rem 1.4rem;display:flex;flex-direction:column;gap:.55rem;
  position:relative;overflow:hidden;
}
.win-card::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:var(--line-strong)}
.win-card.v-go::before{background:var(--go)}
.win-card.v-hold::before{background:var(--hold)}
.win-card.v-halt::before{background:var(--halt)}
.win-card .w-day{font-family:var(--f-mono);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.win-card .w-time{font-family:var(--f-mono);font-size:clamp(1.5rem,3.4vw,2.1rem);color:var(--ink-0);font-variant-numeric:tabular-nums}
.win-card .w-note{color:var(--ink-2);font-size:var(--fs-sm)}
.win-card .w-score{position:absolute;top:1.15rem;right:1.3rem;font-family:var(--f-mono);font-size:.68rem;letter-spacing:.1em;color:var(--ink-2)}
.win-card .w-score b{color:var(--ink-0);font-weight:500}
.win-card .w-remind{align-self:flex-start;margin-top:.5rem;padding:.44rem .7rem;font-size:.6rem}

.week{margin-top:1rem;border:1px solid var(--line);border-radius:var(--r-m);background:var(--bg-1);overflow-x:auto}
.week-row{display:flex;min-width:640px}
.day-cell{
  flex:1;min-width:88px;padding:.95rem .6rem .85rem;text-align:center;
  border-right:1px solid var(--line);display:flex;flex-direction:column;gap:.4rem;align-items:center;
}
.day-cell:last-child{border-right:0}
.day-cell .d-name{font-family:var(--f-mono);font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2)}
.day-cell .d-score{font-family:var(--f-mono);font-size:1.05rem;font-variant-numeric:tabular-nums}
.day-cell .d-v{font-family:var(--f-mono);font-size:.56rem;letter-spacing:.14em;text-transform:uppercase}
.day-cell .d-tick{width:22px;height:3px;background:var(--line-strong)}
.day-cell.v-go .d-tick{background:var(--go)}
.day-cell.v-hold .d-tick{background:var(--hold)}
.day-cell.v-halt .d-tick{background:var(--halt)}
.day-cell.v-go .d-v{color:var(--go)}
.day-cell.v-hold .d-v{color:var(--hold)}
.day-cell.v-halt .d-v{color:var(--halt)}
.day-cell.today{background:var(--bg-2)}

/* ---------- 9. TIMELINE ---------- */
.tl-scroll{border:1px solid var(--line);border-radius:var(--r-m);background:var(--bg-1);overflow-x:auto}
.tl-row{display:flex;min-width:1180px}
.tl-cell{
  flex:1;min-width:46px;padding:.8rem 0 .7rem;text-align:center;
  border-right:1px solid var(--line);display:flex;flex-direction:column;gap:.42rem;align-items:center;
  position:relative;
}
.tl-cell:last-child{border-right:0}
.tl-cell.day-break{border-right:1px solid var(--line-strong)}
.tl-cell .t-h{font-family:var(--f-mono);font-size:.58rem;letter-spacing:.06em;color:var(--ink-3);text-transform:uppercase}
.tl-cell.midnight .t-h{color:var(--ink-1)}
.tl-cell .t-bar{width:8px;height:44px;background:var(--bg-3);position:relative;overflow:hidden}
.tl-cell .t-bar i{position:absolute;left:0;right:0;bottom:0;background:var(--ink-2);transition:height var(--t-med) var(--ease)}
.tl-cell.v-go .t-bar i{background:var(--go)}
.tl-cell.v-hold .t-bar i{background:var(--hold)}
.tl-cell.v-halt .t-bar i{background:var(--halt)}
.tl-cell .t-p{font-family:var(--f-mono);font-size:.56rem;color:var(--ink-3);font-variant-numeric:tabular-nums}
.tl-cell .t-t{font-family:var(--f-mono);font-size:.6rem;color:var(--ink-1);font-variant-numeric:tabular-nums}
.tl-cell.now{background:var(--bg-2)}
.tl-cell.now::after{
  content:"NOW";position:absolute;top:2px;left:50%;transform:translateX(-50%);
  font-family:var(--f-mono);font-size:.5rem;letter-spacing:.1em;color:var(--acc);
}
.tl-legend{display:flex;gap:1.2rem;flex-wrap:wrap;margin-top:.8rem}
.tl-legend span{font-family:var(--f-mono);font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);display:inline-flex;align-items:center;gap:.45rem}
.tl-legend i{width:10px;height:10px;flex:0 0 auto}
.tl-legend .l-go i{background:var(--go)}
.tl-legend .l-hold i{background:var(--hold)}
.tl-legend .l-halt i{background:var(--halt)}

/* ---------- 10. METHOD ---------- */
.method-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.6rem,4vw,3rem);align-items:start}
@media(max-width:860px){.method-grid{grid-template-columns:1fr}}
.method-steps{display:flex;flex-direction:column;gap:1.4rem}
.mstep{display:flex;gap:1rem;align-items:flex-start}
.mstep .no{font-family:var(--f-mono);font-size:.68rem;color:var(--acc);letter-spacing:.1em;padding-top:.28rem;flex:0 0 2.2rem}
.mstep h3{font-size:var(--fs-h3);margin-bottom:.3rem}
.mstep p{color:var(--ink-1);font-size:var(--fs-sm);max-width:52ch}
.mstep p b{color:var(--ink-0);font-weight:600}

.pen-table{border:1px solid var(--line);border-radius:var(--r-m);background:var(--bg-1);overflow:hidden}
.pen-table .pt-head{padding:.8rem 1.1rem;border-bottom:1px solid var(--line);font-family:var(--f-mono);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.pen-table table{width:100%;border-collapse:collapse}
.pen-table td,.pen-table th{
  padding:.55rem 1.1rem;font-size:.8rem;text-align:left;
  border-bottom:1px solid var(--line);
}
.pen-table tr:last-child td{border-bottom:0}
.pen-table th{font-family:var(--f-mono);font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);font-weight:500}
.pen-table td:last-child{font-family:var(--f-mono);text-align:right;color:var(--halt);font-variant-numeric:tabular-nums;white-space:nowrap}
.pen-table td:first-child{color:var(--ink-1)}
.pen-note{margin-top:.9rem;font-size:var(--fs-xs);color:var(--ink-3);font-family:var(--f-mono);letter-spacing:.06em;text-transform:uppercase}

/* ---------- 11. FAQ / PROSE ---------- */
.qa{border:1px solid var(--line);border-radius:var(--r-m);background:var(--bg-1);overflow:hidden}
.qa details{border-bottom:1px solid var(--line)}
.qa details:last-child{border-bottom:0}
.qa summary{
  list-style:none;cursor:pointer;display:flex;align-items:baseline;gap:.9rem;
  padding:1.05rem 1.2rem;font-weight:600;font-size:.98rem;
  transition:background var(--t-fast) var(--ease);
}
.qa summary::-webkit-details-marker{display:none}
.qa summary:hover{background:var(--bg-2)}
.qa summary .q-no{font-family:var(--f-mono);font-size:.62rem;color:var(--acc);letter-spacing:.1em;flex:0 0 2rem;padding-top:.2rem}
.qa summary .q-arr{margin-left:auto;color:var(--ink-3);font-family:var(--f-mono);font-size:.8rem;transition:transform var(--t-fast) var(--ease)}
.qa details[open] summary .q-arr{transform:rotate(45deg)}
.qa .a{padding:0 1.2rem 1.2rem 4.1rem;color:var(--ink-1);font-size:var(--fs-sm);max-width:72ch}
.qa .a b{color:var(--ink-0);font-weight:600}
@media(max-width:560px){.qa .a{padding-left:1.2rem}}
.more-link{margin-top:1.2rem}

/* long-form pages (about / privacy / terms / faq) */
.prose{max-width:760px}
.prose h2{font-size:var(--fs-h2);margin:2.6rem 0 .9rem}
.prose h3{font-size:var(--fs-h3);margin:1.9rem 0 .6rem}
.prose p{color:var(--ink-1);margin-bottom:1rem}
.prose p b,.prose li b{color:var(--ink-0);font-weight:600}
.prose ul{margin:0 0 1rem 1.2rem;color:var(--ink-1)}
.prose li{margin-bottom:.45rem}
.prose a{color:var(--acc);border-bottom:1px solid rgba(37,215,255,.3)}
.prose a:hover{border-bottom-color:var(--acc)}
.prose .updated{font-family:var(--f-mono);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);margin-bottom:2rem}
.page-head{padding-block:clamp(2.8rem,7vw,5rem) 0}
.page-head h1{font-size:clamp(2rem,5.5vw,3.6rem);margin-top:1rem}
.page-head .lede{color:var(--ink-1);max-width:60ch;margin-top:1rem}

/* ---------- 12. TOAST ---------- */
.toast{
  position:fixed;bottom:1.2rem;left:50%;transform:translate(-50%,12px);z-index:150;
  background:var(--bg-3);border:1px solid var(--line-strong);border-radius:var(--r-s);
  font-family:var(--f-mono);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-0);padding:.6rem 1rem;opacity:0;pointer-events:none;
  transition:opacity var(--t-fast) var(--ease),transform var(--t-fast) var(--ease);
}
.toast.show{opacity:1;transform:translate(-50%,0)}

/* ---------- 13. FOOTER ---------- */
.site-foot{padding-block:clamp(2.6rem,6vw,4rem) 1.6rem}
.foot-grid{display:flex;flex-wrap:wrap;gap:2rem 3rem;justify-content:space-between;align-items:flex-start}
.foot-brand .lockup{display:flex;align-items:center;gap:.55rem}
.foot-brand .lockup svg{height:14px;width:auto}
.foot-brand .wm{font-family:var(--f-disp);font-weight:800;font-variation-settings:"wdth" 112;font-stretch:112%;text-transform:lowercase;letter-spacing:-.014em;font-size:1.05rem}
.foot-brand p{color:var(--ink-2);font-size:var(--fs-sm);max-width:34ch;margin-top:.7rem}
.foot-col{display:flex;flex-direction:column;gap:.55rem}
.foot-col .fc-lab{font-family:var(--f-mono);font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);margin-bottom:.3rem}
.foot-col a{color:var(--ink-1);font-size:var(--fs-sm);transition:color var(--t-fast) var(--ease)}
.foot-col a:hover{color:var(--ink-0)}
.foot-col a .arr{color:var(--ink-3);font-size:.8em}
.seal{
  margin-top:clamp(2.2rem,5vw,3.2rem);padding-top:1.4rem;border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;gap:.9rem 2rem;align-items:center;justify-content:space-between;
}
.seal .seal-left{display:inline-flex;align-items:center;gap:.6rem;font-family:var(--f-mono);font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2)}
.seal .seal-left svg{width:16px;height:auto}
.seal .seal-left a{color:var(--ink-1)}
.seal .seal-left a:hover{color:var(--ink-0)}
.seal .seal-left a.pf-fine{color:var(--ink-2);font-size:.58rem;letter-spacing:.12em}
.seal .seal-left a.pf-fine:hover{color:var(--ink-1)}
.seal .seal-right{font-family:var(--f-mono);font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.seal .seal-right a{color:var(--ink-2)}
.seal .seal-right a:hover{color:var(--ink-0)}

/* ---------- 14. MOTION PREFERENCES ---------- */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition-duration:.01ms !important;animation-duration:.01ms !important}
}