/* ============================================================
   MiMi — "Stoneware Denim" v1.0
   Light-first. Ratios in comments are computed WCAG 2.1, not estimated.

   NON-NEGOTIABLE USAGE RULES
   1. --accent NEVER on --dark (3.09, fails). Dark-band interactive = --dark-accent.
   2. --hivis NEVER on a light ground (1.36). Declared inside .band-dark only.
   3. --line / --line-strong are DECORATIVE. Any boundary a user must perceive
      to operate a control uses --edge / --dark-edge (WCAG SC 1.4.11).
   4. Denim chip = --accent-deep on --accent-soft (7.30), not --accent (4.93).
   5. Every --paper-2 band carries 1px solid var(--line) on both block edges.
   6. No status is colour alone: glyph + word + hue separation.
   7. --t-giant is used EXACTLY ONCE on the page (the hero's -38).
   ============================================================ */

:root{
  /* ---- SURFACES ---- */
  --bg:#FFFFFF;
  --paper:#EFF1EE;          /* L*94.9  a*-1.19  b*+1.20 */
  --paper-2:#E7E9E4;        /* 1.08 vs paper */
  --accent-soft:#E3E9EF;    /* 1.08 vs paper */

  /* ---- INK (all clear AA on every light ground) ---- */
  --ink:#15181C;            /* 15.68 pap · 14.56 pp2 · 17.81 wht */
  --ink-2:#454F5B;          /*  7.33 pap ·  6.81 pp2 ·  8.33 wht */
  --ink-3:#5D6773;          /*  5.06 pap ·  4.70 pp2 ·  5.75 wht */

  /* ---- RULES & BOUNDARIES ---- */
  --line:#D8DBD4;           /* 1.23  DECORATIVE hairline */
  --line-strong:#BFC3BC;    /* 1.57  DECORATIVE divider  */
  --edge:#6F7986;           /* 3.89 pap · 3.61 pp2 · 4.42 wht — SC 1.4.11 */
  --accent-line:#9FB5C9;    /* 1.86  chip hairline, decorative */

  /* ---- ACCENT (denim) ---- */
  --accent:#40668A;         /* 5.30 pap · 4.93 pp2 · 6.02 wht */
  --accent-deep:#2C4C6B;    /* 7.86 pap · 7.30 asoft · 8.92 wht */

  /* ---- SEMANTIC (light grounds only) ---- */
  --ok:#2E6A4E;             /* 5.62 pap · white-on 6.39 */
  --low:#5D6822;            /* 5.33 pap · white-on 6.05 */
  --danger:#9B2C3F;         /* 6.54 pap · white-on 7.43 */

  /* ---- DARK BAND ---- */
  --dark:#101317;
  --dark-2:#181D24;         /* 1.10 vs dark — elevated panel */
  --dark-line:#2F3641;      /* 1.53 DECORATIVE */
  --dark-edge:#666F7B;      /* 3.66 dark · 3.33 dark-2 */
  --dark-ink:#C9CFD6;       /* 11.87 dark · 10.79 dark-2 */
  --dark-ink-2:#8E98A5;     /*  6.37 dark ·  5.79 dark-2 */
  --dark-accent:#8CB6DC;    /*  8.73 dark ·  7.93 dark-2 */
  --hivis:#C2DC3F;          /* 12.06 dark · ink-on-hivis 11.53 */
  --dark-danger:#E8808F;    /*  7.02 dark ·  6.38 dark-2 */

  /* ---- SHADOW (tinted to the stone ground, never black) ---- */
  --sh-1:0 1px 2px rgba(30,34,30,.05), 0 8px 24px -14px rgba(30,34,30,.16);
  --sh-2:0 2px 4px rgba(30,34,30,.05), 0 24px 60px -30px rgba(30,34,30,.30);
  --sh-dark:0 24px 60px -30px rgba(0,0,0,.6);

  /* ---- RADII ---- */
  --r-xs:6px; --r-sm:10px; --r-md:14px; --r-lg:20px; --r-xl:24px;

  /* ---- TYPE ---- */
  --f-ui:'Switzer',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;
  --f-mono:'JetBrains Mono',ui-monospace,'SF Mono',Menlo,Consolas,monospace;
  --t-hero:clamp(37px,4.6vw,58px);
  --t-h2:clamp(28px,3.0vw,40px);
  --t-h3:20px;
  --t-body:17px;
  --t-sm:15px;
  --t-mono:12px;
  --t-giant:clamp(64px,16vw,228px);

  /* ---- MOTION ---- */
  --ease:cubic-bezier(.2,.8,.2,1);
  --ease-settle:cubic-bezier(.34,1.56,.64,1);

  /* ---- LAYOUT ---- */
  --w:1180px; --w-mid:960px; --w-narrow:820px;
  --gut:28px; --bar-h:56px;
}
@media (max-width:640px){ :root{ --gut:20px } }

/* Dark bands flip the ramp; components need no dark variants. */
.band-dark{
  background:var(--dark);
  color:var(--dark-ink);
  --ink:var(--dark-ink);
  --ink-2:var(--dark-ink);
  --ink-3:var(--dark-ink-2);
  --line:var(--dark-line);
  --line-strong:var(--dark-line);
  --edge:var(--dark-edge);
  --accent:var(--dark-accent);
  --accent-deep:var(--dark-accent);
  --accent-soft:var(--dark-2);
  --bg:var(--dark-2);
  --ok:var(--hivis);
  --danger:var(--dark-danger);
  --paper:var(--dark);
  --paper-2:var(--dark-2);
  --sh-1:var(--sh-dark);
  --sh-2:var(--sh-dark);
}

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--bar-h) + 20px)}
body{
  margin:0;background:var(--paper);color:var(--ink-2);
  font-family:var(--f-ui);font-size:var(--t-body);line-height:1.62;font-weight:400;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:hidden;
}
img,svg,video{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
h1,h2,h3,h4,h5{margin:0;color:var(--ink);font-weight:600;letter-spacing:-.022em;line-height:1.12}
p{margin:0}
ul,ol{margin:0;padding:0}
li{list-style:none}
::selection{background:var(--accent);color:#fff}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:3px}

/* ---------- Type ---------- */
.h1{font-size:var(--t-hero);letter-spacing:-.03em;line-height:1.05}
.h2{font-size:var(--t-h2);letter-spacing:-.026em;line-height:1.1}
.h3{font-size:var(--t-h3);letter-spacing:-.015em;line-height:1.28}
.h4{font-size:17px;font-weight:600;letter-spacing:-.01em;line-height:1.35}
.lede{font-size:clamp(17px,1.4vw,19px);line-height:1.6;color:var(--ink-2)}
.sm{font-size:var(--t-sm);line-height:1.6}
.muted{color:var(--ink-3)}
.ink{color:var(--ink)}

.mono{
  font-family:var(--f-mono);font-size:var(--t-mono);
  letter-spacing:.08em;text-transform:uppercase;font-weight:500;
  font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1;
}
.mono-n{font-family:var(--f-mono);font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1;letter-spacing:0;text-transform:none}
.eyebrow{display:inline-flex;align-items:center;gap:9px;color:var(--ink-3);font-family:var(--f-mono);font-size:var(--t-mono);letter-spacing:.08em;text-transform:uppercase;font-weight:500}
.eyebrow::before{content:"";width:7px;height:7px;background:var(--accent);flex:none}
.eyebrow.no-sq::before{display:none}

/* ---------- Layout ---------- */
.wrap{width:100%;max-width:var(--w);margin-inline:auto;padding-inline:var(--gut)}
.wrap-mid{width:100%;max-width:var(--w-mid);margin-inline:auto;padding-inline:var(--gut)}
.wrap-narrow{width:100%;max-width:var(--w-narrow);margin-inline:auto;padding-inline:var(--gut)}
.section{padding-block:clamp(64px,8vw,116px)}
.section-tight{padding-block:clamp(44px,5vw,72px)}
.band-2{background:var(--paper-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.center{text-align:center}
.stack>*+*{margin-top:16px}

/* ---------- Buttons ---------- */
.btn{
  --b-bg:var(--accent);--b-fg:#fff;--b-bd:var(--accent);
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:12px 22px;border-radius:var(--r-sm);
  background:var(--b-bg);color:var(--b-fg);border:1px solid var(--b-bd);
  font-size:15px;font-weight:500;letter-spacing:-.005em;cursor:pointer;white-space:nowrap;
  transition:background .18s var(--ease),border-color .18s var(--ease),color .18s,transform .18s var(--ease);
}
.btn:hover{--b-bg:var(--accent-deep);--b-bd:var(--accent-deep);transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn-ghost{--b-bg:transparent;--b-fg:var(--ink);--b-bd:var(--edge)}
.btn-ghost:hover{--b-bg:var(--bg);--b-fg:var(--ink);--b-bd:var(--ink)}
.btn-sm{padding:8px 15px;font-size:14px}
.btn-lg{padding:15px 28px;font-size:16px}
.btn-row{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.btn-row.center{justify-content:center}
.band-dark .btn{--b-bg:var(--dark-accent);--b-fg:var(--dark);--b-bd:var(--dark-accent)}
.band-dark .btn:hover{--b-bg:#A6C7E5;--b-bd:#A6C7E5}
.band-dark .btn-ghost{--b-bg:transparent;--b-fg:var(--dark-ink);--b-bd:var(--dark-edge)}
.band-dark .btn-ghost:hover{--b-bg:var(--dark-2);--b-fg:var(--dark-ink);--b-bd:var(--dark-ink)}

.tlink{
  display:inline-flex;align-items:center;gap:7px;color:var(--accent-deep);
  font-size:15px;font-weight:500;border-bottom:1px solid var(--accent-line);padding-bottom:2px;
  transition:border-color .18s,gap .18s var(--ease);
}
.tlink:hover{border-color:var(--accent-deep);gap:11px}
.band-dark .tlink{color:var(--dark-accent);border-color:var(--dark-edge)}
.band-dark .tlink:hover{border-color:var(--dark-accent)}

/* ---------- Pills ---------- */
.pill{
  display:inline-flex;align-items:center;gap:7px;padding:5px 11px;border-radius:var(--r-xs);
  background:var(--bg);border:1px solid var(--line);color:var(--ink-2);
  font-family:var(--f-mono);font-size:11px;letter-spacing:.07em;text-transform:uppercase;font-weight:500;
}
.pill-accent{background:var(--accent-soft);border-color:var(--accent-line);color:var(--accent-deep)}
.sq{width:7px;height:7px;background:currentColor;flex:none}
.sq-ok{background:var(--ok)}

/* ============================================================
   COUNTER BAR (sticky header)
   ============================================================ */
.bar{
  position:sticky;top:0;z-index:70;height:var(--bar-h);
  background:rgba(239,241,238,.9);
  backdrop-filter:saturate(140%) blur(10px);
  -webkit-backdrop-filter:saturate(140%) blur(10px);
  border-bottom:1px solid var(--line);
}
.bar-in{height:var(--bar-h);display:flex;align-items:center;justify-content:space-between;gap:20px;position:relative}

.wordmark{display:inline-flex;align-items:center;flex:none}
.wordmark img{height:27px;width:auto;display:block}
.foot .wordmark img{height:30px}
.wordmark svg{display:block;flex:none}

.rail{display:flex;align-items:center;gap:26px}
.rail a{position:relative;padding-bottom:6px;color:var(--ink-3);font-family:var(--f-mono);font-size:11px;letter-spacing:.09em;text-transform:uppercase;font-weight:500;transition:color .2s}
.rail a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .4s var(--ease)}
.rail a.on{color:var(--ink)}
.rail a.on::after{transform:scaleX(1)}

.readout{display:inline-flex;align-items:center;gap:8px;font-family:var(--f-mono);font-size:11px;letter-spacing:.09em;text-transform:uppercase;font-weight:500;color:var(--ink-3)}
.readout b{font-size:13px;font-weight:700;color:var(--danger);font-variant-numeric:tabular-nums;letter-spacing:0;transition:color .5s}
.readout.done b{color:var(--accent)}

.drift{position:absolute;left:calc(var(--gut) * -1);right:calc(var(--gut) * -1);bottom:-1px;height:2px;background:var(--line)}
.drift i{display:block;height:100%;background:var(--danger);transform:scaleX(var(--drift,1));transform-origin:left;transition:transform .7s var(--ease),background .5s}
.drift.done i{background:var(--accent)}

.bar-cta{display:flex;align-items:center;gap:10px}
.burger{display:none;width:38px;height:38px;border:1px solid var(--line);background:var(--bg);border-radius:var(--r-xs);align-items:center;justify-content:center;cursor:pointer}
.burger span{display:block;width:16px;height:1.5px;background:var(--ink);position:relative}
.burger span::before,.burger span::after{content:"";position:absolute;left:0;width:16px;height:1.5px;background:var(--ink);transition:transform .22s,top .22s}
.burger span::before{top:-5px} .burger span::after{top:5px}
.bar.open .burger span{background:transparent}
.bar.open .burger span::before{top:0;transform:rotate(45deg)}
.bar.open .burger span::after{top:0;transform:rotate(-45deg)}

/* ============================================================
   HERO — the two numbers
   ============================================================ */
.hero{padding-top:clamp(52px,7vw,96px);padding-bottom:clamp(48px,6vw,80px);position:relative;overflow:hidden}
.hero::after{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.55;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:72px 72px;
  -webkit-mask-image:radial-gradient(circle at 68% 30%,#000,transparent 68%);
  mask-image:radial-gradient(circle at 68% 30%,#000,transparent 68%);
}
.hero>*{position:relative;z-index:1}
.hero h1{margin-top:18px;max-width:17ch}
.hero .lede{margin-top:20px;max-width:54ch}
.hero .btn-row{margin-top:28px}
.hero-note{margin-top:16px;color:var(--ink-3);font-family:var(--f-mono);font-size:11px;letter-spacing:.07em;text-transform:uppercase}
.hero-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.86fr);gap:clamp(32px,5vw,64px);align-items:center}

/* the count-out */
.count{border-top:1px solid var(--edge);padding-top:26px}
.count-pair{display:flex;align-items:flex-start;gap:clamp(28px,5vw,56px)}
.count-cell .mono{display:block;color:var(--ink-3);margin-bottom:8px}
.count-cell b{
  display:block;font-family:var(--f-mono);font-weight:700;
  font-size:clamp(46px,6.4vw,86px);line-height:1;letter-spacing:-.04em;color:var(--ink);
  font-variant-numeric:tabular-nums;
}
.count-gap{position:relative;margin-top:26px;padding-top:26px}
.count-gap>svg{position:absolute;top:0;left:0;width:100%;height:26px;overflow:visible}
.count-gap>svg path{stroke:var(--danger);stroke-width:1.25;fill:none}
.js .count-gap>svg path{stroke-dasharray:600;stroke-dashoffset:600}
.run .count-gap>svg path{animation:draw .6s var(--ease) .9s forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.giant{
  font-family:var(--f-mono);font-weight:700;font-size:var(--t-giant);line-height:.86;
  letter-spacing:-.045em;color:var(--danger);font-variant-numeric:tabular-nums;
  opacity:0;transform:translateY(10px);
}
.run .giant{animation:rise .7s var(--ease) 1.1s forwards}
@keyframes rise{to{opacity:1;transform:none}}
.count-gap .mono{display:block;margin-top:10px;color:var(--ink-3)}

/* ============================================================
   SPEC PLATE
   ============================================================ */
.plate{background:var(--paper-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line);position:relative}
.plate::before{content:"";position:absolute;top:-1px;left:0;height:1px;width:100%;background:var(--accent);transform:scaleX(0);transform-origin:left}
.plate.run::before{animation:swipe .9s var(--ease) forwards}
@keyframes swipe{to{transform:scaleX(1)}}
.plate-grid{display:grid;grid-template-columns:repeat(5,1fr)}
.plate-cell{padding:22px 18px;border-left:1px solid var(--line);display:flex;align-items:center;gap:9px;color:var(--ink-2);font-family:var(--f-mono);font-size:11px;letter-spacing:.07em;text-transform:uppercase;font-weight:500;line-height:1.4}
.plate-cell:first-child{border-left:none}
.plate-cell i{width:7px;height:7px;background:var(--accent);flex:none}

/* ============================================================
   DIAGNOSIS
   ============================================================ */
.diag{margin-top:44px}
.diag svg{width:100%;height:auto;overflow:visible}
.diag .track{stroke:var(--edge);stroke-width:2;fill:none}
.diag .trail{stroke:var(--accent);stroke-width:2;fill:none}
.js .diag .trail{stroke-dasharray:700;stroke-dashoffset:700}
.diag.run .trail{animation:draw 1.6s var(--ease) .2s forwards}
.diag .stn{fill:var(--paper);stroke:var(--edge);stroke-width:2}
.diag .stn-on{fill:var(--accent);stroke:var(--accent)}
.diag .leak{stroke:var(--danger);stroke-width:1.5;fill:none;stroke-dasharray:4 4;opacity:0}
.diag.run .leak{animation:fadein .5s var(--ease) 1.5s forwards}
@keyframes fadein{to{opacity:1}}
.diag .drop{fill:var(--danger);opacity:0}
.diag.run .drop{animation:falls 1.2s var(--ease) 1.8s forwards}
@keyframes falls{0%{opacity:1;transform:translateY(0)}100%{opacity:0;transform:translateY(70px)}}
.diag text{font-family:var(--f-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;fill:var(--ink-3);font-weight:500}
.diag text.lbl{fill:var(--ink);font-size:13px}

/* ============================================================
   INSTRUMENT PANEL + LEDGER ROW  (the reused grammar)
   ============================================================ */
.panel{background:var(--bg);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-2);overflow:hidden}
.panel-head{
  min-height:40px;background:var(--accent-deep);color:#fff;display:flex;align-items:center;justify-content:space-between;
  gap:12px;padding:10px 16px;font-family:var(--f-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;font-weight:500;
}
.panel-head .stat{display:inline-flex;align-items:center;gap:7px;color:rgba(255,255,255,.78)}
.panel-body{padding:14px;position:relative}
.panel-foot{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;padding:14px 16px;border-top:1px solid var(--line);background:var(--paper)}
.panel-foot .mono{color:var(--ink-3);text-transform:none;letter-spacing:.02em}

.row{
  display:grid;grid-template-columns:1fr 58px 58px 74px 18px;gap:10px;align-items:center;
  padding:11px 12px;border-radius:var(--r-xs);border:1px solid transparent;
  transition:background .2s,border-color .2s;
}
.row+.row{margin-top:2px}
.row:hover{background:var(--paper);border-color:var(--line)}
.row-nm{font-size:14px;font-weight:500;color:var(--ink);line-height:1.25}
.row-sku{display:block;margin-top:2px;font-family:var(--f-mono);font-size:10px;letter-spacing:.06em;color:var(--ink-3);font-weight:400}
.row-q{font-family:var(--f-mono);font-size:13px;text-align:right;color:var(--ink-2);font-variant-numeric:tabular-nums}
.row-q.dim{color:var(--ink-3)}
.chip{
  justify-self:end;font-family:var(--f-mono);font-size:11px;font-weight:700;
  padding:3px 8px;border-radius:var(--r-xs);font-variant-numeric:tabular-nums;letter-spacing:0;
}
.chip-neg{background:#F6E6E9;color:var(--danger)}
.chip-pos{background:#E3EEE8;color:var(--ok)}
.chip-zero{background:var(--paper-2);color:var(--ink-3)}
.band-dark .chip-neg{background:#3A2027;color:var(--dark-danger)}
.band-dark .chip-pos{background:#2A3320;color:var(--hivis)}
.band-dark .chip-zero{background:var(--dark-2);color:var(--dark-ink-2)}
.dot{width:7px;height:7px;border-radius:50%;background:var(--line-strong);justify-self:center}
.dot.on{background:var(--ok)}
.dot.bad{background:var(--danger)}

.js .panel .row{opacity:0;transform:translateY(8px)}
/* Trade panes and the close-section ghost are static: never hide their rows. */
.tpane .row,.close-bg .row{opacity:1;transform:none;animation:none}
.run .panel .row{animation:rowin .5s var(--ease) forwards;animation-delay:calc(var(--i,0) * 90ms + 120ms)}
@keyframes rowin{to{opacity:1;transform:none}}

.beam{position:absolute;left:14px;right:14px;top:0;height:2px;background:var(--accent);opacity:0;pointer-events:none}
.run .beam{animation:beam 1.5s var(--ease) .2s}
@keyframes beam{0%{opacity:.9;top:6px}100%{opacity:0;top:calc(100% - 6px)}}

/* ---------- Chapter scaffolding ---------- */
.chapter{padding-block:clamp(64px,8vw,112px)}
.ch-head{max-width:640px}
.ch-num{display:inline-flex;align-items:center;gap:10px;color:var(--accent-deep);font-family:var(--f-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;font-weight:700}
.ch-num i{width:7px;height:7px;background:var(--accent)}
.ch-head h2{margin-top:14px}
.ch-head .lede{margin-top:16px}
.ch-grid{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1fr);gap:clamp(32px,4.5vw,60px);align-items:center;margin-top:48px}
.ch-notes{display:flex;flex-direction:column;gap:22px}
.note{padding-left:18px;border-left:2px solid var(--line)}
.note.on{border-color:var(--accent)}
.note h3{font-size:17px;font-weight:600}
.note p{margin-top:6px;font-size:15px;color:var(--ink-3);line-height:1.6}
.ch-foot{margin-top:26px;display:flex;align-items:center;gap:10px;flex-wrap:wrap;color:var(--ink-3);font-family:var(--f-mono);font-size:11px;letter-spacing:.07em;text-transform:uppercase}
.ch-foot a{color:var(--accent-deep);border-bottom:1px solid var(--accent-line);padding-bottom:1px}
.ch-foot a:hover{border-color:var(--accent-deep)}

.par{margin-top:16px;padding:16px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--bg)}
.par-bars{display:flex;align-items:flex-end;gap:6px;height:64px;position:relative;margin-top:12px}
.par-bars::before{content:"";position:absolute;left:0;right:0;bottom:38%;border-top:1px dashed var(--edge)}
.par-bars i{flex:1;background:var(--accent-soft);border:1px solid var(--accent-line);height:var(--h);transform-origin:bottom}
.js .par-bars i{transform:scaleY(0)}
.run .par-bars i{animation:grow .5s var(--ease) forwards;animation-delay:calc(var(--i,0)*60ms + .4s)}
.par-bars i.under{background:#F6E6E9;border-color:#D9A8B2}
@keyframes grow{to{transform:scaleY(1)}}

/* ============================================================
   SEAM (dark connective tissue)
   ============================================================ */
.seam{padding-block:44px;position:relative;overflow:hidden}
.seam p{text-align:center;font-size:clamp(18px,2vw,24px);color:var(--dark-ink);letter-spacing:-.02em;max-width:44ch;margin-inline:auto;position:relative;z-index:1}
.seam .trace{position:absolute;left:0;top:50%;height:1px;width:100%;background:var(--hivis);transform:scaleX(var(--p,0));transform-origin:left;opacity:.45}
.seam.dashed .trace{background:repeating-linear-gradient(90deg,var(--hivis) 0 6px,transparent 6px 12px)}
.seam .runner{position:absolute;top:calc(50% - 5px);left:0;width:10px;height:10px;background:var(--hivis);transform:translateX(calc(var(--p,0) * (100vw - 10px)))}
.seam .stamp{position:absolute;left:50%;bottom:10px;transform:translateX(-50%);font-family:var(--f-mono);font-size:11px;letter-spacing:.1em;color:var(--hivis);opacity:.3;text-transform:uppercase}

/* ============================================================
   §02 — THE SCALE
   ============================================================ */
.scale{display:flex;flex-direction:column;align-items:center;padding:30px 20px;background:var(--bg);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-2)}
.lcd{width:100%;max-width:300px;background:var(--dark-2);border-radius:var(--r-sm);padding:16px 18px;text-align:right}
.lcd b{display:block;font-family:var(--f-mono);font-size:clamp(30px,4vw,42px);font-weight:700;color:var(--hivis);letter-spacing:.02em;line-height:1;font-variant-numeric:tabular-nums}
.lcd .mono{color:var(--dark-ink-2);display:block;margin-top:8px;font-size:10px}
.platter{width:100%;max-width:300px;height:14px;background:var(--paper-2);border:1px solid var(--line-strong);border-radius:4px 4px 2px 2px;margin-top:20px}
.run .platter{animation:dip .6s var(--ease-settle) .5s}
@keyframes dip{40%{transform:translateY(3px)}100%{transform:none}}
.base{width:64%;max-width:190px;height:10px;background:var(--accent-deep);border-radius:0 0 3px 3px}
.calc{margin-top:22px;text-align:center}
.calc .mono{color:var(--ink-3);display:block}
.calc b{display:block;margin-top:8px;font-family:var(--f-mono);font-size:26px;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.onhand{width:100%;margin-top:22px;padding-top:18px;border-top:1px solid var(--line)}
.onhand-row{display:flex;justify-content:space-between;gap:10px;font-family:var(--f-mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.onhand-row b{color:var(--ink);font-weight:700;letter-spacing:0;text-transform:none;font-variant-numeric:tabular-nums}
.onhand-bar{height:8px;background:var(--paper-2);border:1px solid var(--line);border-radius:3px;overflow:hidden;margin-top:9px}
.onhand-bar i{display:block;height:100%;background:var(--accent);width:100%;transform-origin:left;transition:transform 1s var(--ease) .8s}
.run .onhand-bar i{transform:scaleX(.947)}

.units{display:flex;gap:6px;margin-top:22px;flex-wrap:wrap;justify-content:center}
.units button{
  padding:6px 13px;border:1px solid var(--line);background:var(--bg);border-radius:var(--r-xs);cursor:pointer;
  font-family:var(--f-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);font-weight:500;
  transition:border-color .18s,color .18s,background .18s;
}
.units button:hover{border-color:var(--edge);color:var(--ink)}
.units button.on{background:var(--accent-soft);border-color:var(--accent-line);color:var(--accent-deep)}

.tagrule{margin-top:18px;padding:18px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--bg)}
.tagchip{display:inline-block;padding:5px 10px;background:var(--accent-soft);border:1px solid var(--accent-line);border-radius:var(--r-xs);color:var(--accent-deep);font-family:var(--f-mono);font-size:11px;letter-spacing:.03em}
.mesh{display:grid;grid-template-columns:repeat(20,1fr);gap:3px;margin-top:14px}
.mesh i{aspect-ratio:1;background:var(--line);border-radius:1px}
.run .mesh i{animation:flipc .5s var(--ease) forwards;animation-delay:calc((var(--r) + var(--c)) * 22ms)}
@keyframes flipc{to{background:var(--accent-soft)}}

/* ============================================================
   §03 — AVAILABILITY CALENDAR
   ============================================================ */
.cal{background:var(--bg);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-2);padding:20px}
.cal-head{display:grid;grid-template-columns:repeat(7,1fr);gap:1px}
.cal-head span{text-align:center;font-family:var(--f-mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);padding-bottom:6px}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.cal-grid span{background:var(--bg);aspect-ratio:1.15;display:grid;place-items:center;font-family:var(--f-mono);font-size:12px;color:var(--ink-2);font-variant-numeric:tabular-nums;transition:background .3s var(--ease),color .3s}
.cal-grid span.we{background:var(--paper-2);color:var(--ink-3)}
.cal-grid span.sel{background:var(--accent);color:#fff}
.cal-grid span.buf{background:repeating-linear-gradient(45deg,var(--paper-2) 0 4px,var(--bg) 4px 8px);color:var(--ink-3)}

.lanes{margin-top:18px;display:flex;flex-direction:column;gap:4px}
.lane{display:grid;grid-template-columns:64px 1fr;gap:10px;align-items:center}
.lane .mono{color:var(--ink-3);font-size:10px}
.lane-track{height:8px;background:var(--paper-2);border:1px solid var(--line);border-radius:2px;position:relative;overflow:hidden}
.lane-track i{position:absolute;top:0;bottom:0;left:34%;width:28%;background:var(--accent);transform-origin:left}
.js .lane-track i{transform:scaleX(0)}
.run .lane.out .lane-track i{animation:grow .4s var(--ease) forwards;animation-delay:calc(var(--i,0)*110ms + .3s)}
.avail{margin-top:16px;display:flex;align-items:center;justify-content:space-between;gap:12px;padding-top:14px;border-top:1px solid var(--line);flex-wrap:wrap}
.avail b{font-family:var(--f-mono);font-size:15px;font-weight:700;color:var(--ok);font-variant-numeric:tabular-nums}
.avail b.bad{color:var(--danger)}

.receipt-strip{margin-top:16px;border:1px solid var(--line);border-radius:var(--r-sm);overflow:hidden}
.receipt-strip div{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 14px;border-top:1px solid var(--line);font-family:var(--f-mono);font-size:11px;letter-spacing:.05em;color:var(--ink-2)}
.receipt-strip div:first-child{border-top:none;background:var(--paper)}
.receipt-strip .late{color:var(--danger);font-weight:700}

/* ============================================================
   RESOLUTION (dark chart)
   ============================================================ */
.res-chart{margin-top:38px}
.res-chart svg{width:100%;height:auto;overflow:visible}
.res-chart .ln{fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.js .res-chart .ln{stroke-dasharray:2600;stroke-dashoffset:2600}
.run .res-chart .ln{animation:draw 2.2s var(--ease) .2s forwards}
.res-chart .tol{fill:var(--hivis);opacity:.12}
.res-chart .axis{stroke:var(--dark-line);stroke-width:1}
.res-chart .mark{stroke:var(--dark-edge);stroke-width:1;stroke-dasharray:3 3}
.res-chart text{font-family:var(--f-mono);font-size:10px;letter-spacing:.09em;text-transform:uppercase;fill:var(--dark-ink-2)}
.res-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:40px;border-top:1px solid var(--dark-line)}
.res-stats div{padding:22px 18px;border-left:1px solid var(--dark-line)}
.res-stats div:first-child{border-left:none;padding-left:0}
.res-stats b{display:block;font-family:var(--f-mono);font-size:clamp(20px,2.4vw,28px);font-weight:700;color:var(--dark-ink);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.res-stats .mono{display:block;margin-top:8px;color:var(--dark-ink-2)}

/* ============================================================
   FLOOR (ruled list — no cards, no icons)
   ============================================================ */
.ruled{max-width:900px;margin-top:40px}
.ruled li{display:grid;grid-template-columns:64px 1fr;gap:18px;padding:22px 0;border-top:1px solid var(--line);align-items:start}
.ruled li:last-child{border-bottom:1px solid var(--line)}
.ruled .mono{color:var(--ink-3);padding-top:3px}
.ruled h3{font-size:19px;font-weight:600;letter-spacing:-.018em}
.ruled p{margin-top:7px;font-size:15px;color:var(--ink-3);line-height:1.62;max-width:62ch}

/* ============================================================
   TRADES SWITCHER
   ============================================================ */
.trades{position:relative}
.trades input{position:absolute;opacity:0;pointer-events:none}
.trades-tabs{display:flex;gap:4px;flex-wrap:wrap;margin-top:26px}
.trades-tabs label{
  padding:8px 15px;border:1px solid var(--line);border-radius:var(--r-xs);cursor:pointer;background:var(--bg);
  font-family:var(--f-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);font-weight:500;
  transition:border-color .18s,color .18s,background .18s;
}
.trades-tabs label:hover{border-color:var(--edge);color:var(--ink)}
.trades-panes{margin-top:26px}
.tpane{display:none}
.chapters-lit{display:flex;gap:6px;margin-top:16px}
.chapters-lit i{
  padding:4px 9px;border:1px solid var(--line);border-radius:var(--r-xs);
  font-family:var(--f-mono);font-size:10px;letter-spacing:.08em;color:var(--ink-3);font-style:normal;
}
.chapters-lit i.lit{background:var(--accent-soft);border-color:var(--accent-line);color:var(--accent-deep);font-weight:700}
#t1:checked~.trades-tabs label[for=t1],#t2:checked~.trades-tabs label[for=t2],
#t3:checked~.trades-tabs label[for=t3],#t4:checked~.trades-tabs label[for=t4],
#t5:checked~.trades-tabs label[for=t5]{background:var(--accent-soft);border-color:var(--accent-line);color:var(--accent-deep)}
#t1:checked~.trades-panes .tpane:nth-child(1),#t2:checked~.trades-panes .tpane:nth-child(2),
#t3:checked~.trades-panes .tpane:nth-child(3),#t4:checked~.trades-panes .tpane:nth-child(4),
#t5:checked~.trades-panes .tpane:nth-child(5){display:block;animation:tin .28s var(--ease)}
@keyframes tin{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ============================================================
   HONESTY RECEIPT
   ============================================================ */
.receipt{
  background:var(--bg);padding:34px 30px;box-shadow:var(--sh-2);transform:rotate(-.8deg);position:relative;
  background-image:repeating-linear-gradient(var(--bg) 0 2px,rgba(0,0,0,.012) 2px 3px);
}
.receipt::before,.receipt::after{
  content:"";position:absolute;left:0;right:0;height:8px;background:var(--bg);
  -webkit-mask-image:repeating-linear-gradient(90deg,#000 0 3.5px,transparent 3.5px 7px);
  mask-image:repeating-linear-gradient(90deg,#000 0 3.5px,transparent 3.5px 7px);
}
.receipt::before{top:-7px} .receipt::after{bottom:-7px;transform:scaleY(-1)}
.rule-d{border-top:1px dashed var(--edge);margin:18px 0}
.leader{display:flex;align-items:baseline;gap:8px;font-family:var(--f-mono);font-size:12px;color:var(--ink-2);padding:7px 0;letter-spacing:.01em}
.leader i{flex:1;border-bottom:1px dotted var(--edge);font-style:normal;min-width:20px;transform:translateY(-3px)}
.leader b{font-weight:700;color:var(--ink);text-align:right}
.rtotal{display:flex;justify-content:space-between;gap:14px;font-family:var(--f-mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink);font-weight:700}
.stars{display:inline-flex;gap:2px;color:var(--low)}
.stars svg{width:13px;height:13px}
.stars.empty{color:var(--edge);opacity:.55}
.rate-row{display:flex;align-items:center;gap:10px;padding:7px 0;font-family:var(--f-mono);font-size:11px;color:var(--ink-3);letter-spacing:.03em;flex-wrap:wrap}

/* ============================================================
   PRICE TICKET
   ============================================================ */
.ticket{
  background:var(--bg);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-2);
  display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);position:relative;
}
.ticket::before,.ticket::after{
  content:"";position:absolute;top:50%;width:22px;height:22px;border-radius:50%;
  background:var(--paper-2);border:1px solid var(--line);transform:translateY(-50%);
}
.ticket::before{left:-12px} .ticket::after{right:-12px}
.ticket-l{padding:clamp(28px,3.4vw,42px)}
.ticket-r{padding:clamp(28px,3.4vw,42px);border-left:1px dashed var(--edge)}
.price{display:flex;align-items:baseline;gap:12px;margin-block:16px 8px}
.price b{font-family:var(--f-mono);font-size:clamp(52px,6.4vw,86px);font-weight:700;color:var(--ink);line-height:1;letter-spacing:-.04em}
.price span{font-family:var(--f-mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.tcols{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.tcol h4{font-family:var(--f-mono);font-size:10px;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3);font-weight:500;margin-bottom:12px}
.tcol li{display:flex;gap:8px;font-size:14px;line-height:1.5;color:var(--ink-2);padding:5px 0}
.tcol li svg{flex:none;margin-top:4px}
.tcol.no li{color:var(--ink-3)}
.tcol.no li span{text-decoration:line-through;text-decoration-color:var(--danger);text-decoration-thickness:1px}

/* ============================================================
   FAQ
   ============================================================ */
.faq{max-width:820px;margin-top:36px;border-top:1px solid var(--line)}
.faq-item{border-bottom:1px solid var(--line)}
.faq-q{
  width:100%;display:grid;grid-template-columns:44px 1fr 24px;gap:12px;align-items:start;
  background:none;border:none;cursor:pointer;text-align:left;padding:20px 0;
  font-size:17px;font-weight:500;color:var(--ink);line-height:1.45;letter-spacing:-.012em;
}
.faq-q .mono{color:var(--ink-3);padding-top:4px;transition:color .2s}
.faq-item.open .faq-q .mono{color:var(--accent)}
.faq-tog{position:relative;width:14px;height:14px;margin-top:6px;justify-self:end}
.faq-tog::before,.faq-tog::after{content:"";position:absolute;background:var(--ink-3);transition:transform .3s var(--ease),opacity .3s}
.faq-tog::before{left:0;top:6.5px;width:14px;height:1.5px}
.faq-tog::after{left:6.5px;top:0;width:1.5px;height:14px}
.faq-item.open .faq-tog::after{transform:rotate(90deg);opacity:0}
.faq-a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .32s var(--ease)}
.faq-item.open .faq-a{grid-template-rows:1fr}
.faq-a>div{overflow:hidden}
.faq-a p{padding:0 40px 22px 56px;color:var(--ink-3);font-size:16px;line-height:1.68}
.faq-a p+p{padding-top:0;margin-top:-10px}
.faq-a a{color:var(--accent-deep);border-bottom:1px solid var(--accent-line)}

/* ============================================================
   CLOSE + INSTALL TABLE
   ============================================================ */
.close-wrap{position:relative;overflow:hidden}
.close-bg{position:absolute;inset:auto 0 0;height:62%;opacity:.07;pointer-events:none;display:grid;
  place-items:end center;padding:0 var(--gut) 40px;
  -webkit-mask-image:linear-gradient(transparent,#000 55%);mask-image:linear-gradient(transparent,#000 55%)}
.close-bg .panel{width:min(760px,100%);box-shadow:none}
.close-in{position:relative;z-index:1;text-align:center}
.install{margin-top:48px;text-align:left}
.install-head,.install-row{display:grid;grid-template-columns:150px 1fr 90px 150px;gap:14px;align-items:center}
.install-head{
  padding:0 14px 12px;border-bottom:1px solid var(--dark-line);
  font-family:var(--f-mono);font-size:10px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--dark-ink-2);font-weight:500;
}
.install-row{padding:20px 14px;border-bottom:1px solid var(--dark-line);position:relative;transition:background .2s}
.install-row::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--hivis);transform:scaleY(0);transition:transform .25s var(--ease)}
.install-row:hover{background:var(--dark-2)}
.install-row:hover::before{transform:scaleY(1)}
.install .ch{font-family:var(--f-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--hivis);font-weight:700}
.install .what{color:var(--dark-ink);font-size:16px;font-weight:500}
.install .what em{display:block;font-style:normal;font-size:13px;color:var(--dark-ink-2);font-weight:400;margin-top:3px}
.install .pr,.install .st{font-family:var(--f-mono);font-size:12px;color:var(--dark-ink-2);letter-spacing:.04em}
.install .st{display:inline-flex;align-items:center;gap:6px;color:var(--dark-ink)}
.install .go{transition:transform .25s var(--ease);color:var(--dark-ink-2)}
.install-row:hover .go{transform:translateX(4px);color:var(--dark-ink)}

/* ============================================================
   FOOTER
   ============================================================ */
.foot{background:var(--paper);border-top:1px solid var(--line);padding-top:clamp(48px,6vw,72px);padding-bottom:30px}
.foot-grid{display:grid;grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,1fr));gap:38px 26px}
.foot-col h5{font-family:var(--f-mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);font-weight:500;margin-bottom:16px}
.foot-col ul{display:flex;flex-direction:column;gap:10px}
.foot-col a{font-size:14px;color:var(--ink-2);transition:color .18s}
.foot-col a:hover{color:var(--ink)}
.foot-about{max-width:34ch;font-size:14px;color:var(--ink-3);line-height:1.65;margin-top:16px}
.foot-badge{display:inline-flex;align-items:center;gap:8px;margin-top:18px;font-family:var(--f-mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.foot-badge i{width:7px;height:7px;background:var(--ok);animation:blip 4s ease-in-out infinite}
@keyframes blip{0%,88%,100%{opacity:1}94%{opacity:.25}}
.foot-bottom{
  margin-top:clamp(36px,4.5vw,56px);padding-top:22px;border-top:1px solid var(--line);
  display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;
  font-family:var(--f-mono);font-size:11px;letter-spacing:.04em;color:var(--ink-3);
}
.foot-bottom .lks{display:flex;gap:18px;flex-wrap:wrap}

/* ============================================================
   LEGAL / SUPPORT PAGES
   ============================================================ */
.legal-hero{background:var(--paper-2);border-bottom:1px solid var(--line);padding-block:clamp(44px,5vw,68px);position:relative;overflow:hidden}
.legal-hero::after{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:56px 56px;
  -webkit-mask-image:radial-gradient(circle at 82% 0%,#000,transparent 68%);
  mask-image:radial-gradient(circle at 82% 0%,#000,transparent 68%);
}
.legal-hero .wrap{position:relative;z-index:1}
.legal-hero h1{margin-top:14px;max-width:20ch}
.legal-hero .lede{margin-top:16px;max-width:60ch}
.legal-meta{display:flex;gap:9px;flex-wrap:wrap;margin-top:22px}
.legal-layout{display:grid;grid-template-columns:240px minmax(0,1fr);gap:52px;align-items:start;padding-block:clamp(44px,5vw,68px)}
.toc{position:sticky;top:calc(var(--bar-h) + 22px)}
.toc h5{font-family:var(--f-mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);font-weight:500;margin-bottom:14px}
.toc ul{display:flex;flex-direction:column;border-left:1px solid var(--line)}
.toc a{display:block;padding:6px 14px;font-size:13.5px;color:var(--ink-3);border-left:2px solid transparent;margin-left:-1px;line-height:1.4;transition:color .18s,border-color .18s}
.toc a:hover{color:var(--ink)}
.toc a.is-active{color:var(--accent-deep);border-left-color:var(--accent);font-weight:500}

.prose{max-width:72ch}
.prose h2{font-size:clamp(22px,2vw,27px);letter-spacing:-.022em;margin-top:48px;scroll-margin-top:calc(var(--bar-h) + 26px)}
.prose h2:first-child{margin-top:0}
.prose h3{font-size:17px;font-weight:600;margin-top:30px;letter-spacing:-.01em}
.prose p{margin-top:15px;color:var(--ink-2);line-height:1.72}
.prose ul,.prose ol{margin-top:15px;display:flex;flex-direction:column;gap:10px}
.prose ul li{position:relative;padding-left:24px;line-height:1.68;color:var(--ink-2)}
.prose ul li::before{content:"";position:absolute;left:5px;top:.66em;width:6px;height:6px;background:var(--accent)}
.prose ol{counter-reset:n}
.prose ol li{position:relative;padding-left:32px;line-height:1.68;color:var(--ink-2);counter-increment:n}
.prose ol li::before{
  content:counter(n,decimal-leading-zero);position:absolute;left:0;top:.28em;
  font-family:var(--f-mono);font-size:11px;font-weight:700;color:var(--accent-deep);letter-spacing:0;
}
.prose a{color:var(--accent-deep);border-bottom:1px solid var(--accent-line)}
.prose a:hover{border-color:var(--accent-deep)}
.prose strong{color:var(--ink);font-weight:600}
.prose table{width:100%;border-collapse:collapse;margin-top:18px;font-size:14.5px;border:1px solid var(--line)}
.prose th{text-align:left;background:var(--paper-2);font-family:var(--f-mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);font-weight:500;padding:11px 15px;border-bottom:1px solid var(--line)}
.prose td{padding:12px 15px;border-bottom:1px solid var(--line);vertical-align:top;color:var(--ink-2)}
.prose tr:last-child td{border-bottom:none}
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;margin-top:18px}
.table-scroll table{margin-top:0}
code{font-family:var(--f-mono);font-size:.86em;background:var(--paper-2);border:1px solid var(--line);border-radius:4px;padding:.12em .38em;color:var(--ink);white-space:nowrap}

.callout{margin-top:22px;padding:18px 22px;border:1px solid var(--line);border-left:3px solid var(--accent);background:var(--paper-2);border-radius:0 var(--r-sm) var(--r-sm) 0}
.callout p{margin-top:0}
.callout p+p{margin-top:11px}
.callout .mono{display:block;color:var(--accent-deep);margin-bottom:7px;font-size:10px}
.callout-ok{border-left-color:var(--ok);background:#E9F0EC;border-color:#C8DBD0}
.callout-ok .mono{color:var(--ok)}

.card{background:var(--bg);border:1px solid var(--line);border-radius:var(--r-md);padding:24px;transition:border-color .22s,box-shadow .22s,transform .22s var(--ease)}
.card:hover{border-color:var(--edge);box-shadow:var(--sh-1);transform:translateY(-2px)}
.card h3{margin-bottom:8px}
.grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.check-list{display:flex;flex-direction:column;gap:12px}
.check-list li{display:flex;gap:10px;font-size:15px;line-height:1.55;color:var(--ink-2)}
.check-list svg{flex:none;margin-top:4px;color:var(--ok)}
.contact-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:40px}
.contact-card{background:var(--bg);border:1px solid var(--line);border-radius:var(--r-md);padding:24px;display:flex;flex-direction:column;transition:border-color .22s,box-shadow .22s,transform .22s var(--ease)}
.contact-card:hover{border-color:var(--edge);box-shadow:var(--sh-1);transform:translateY(-2px)}
.contact-card .tlink{margin-top:auto;padding-top:16px;align-self:flex-start}
.mini-table{width:100%;border-collapse:collapse;font-size:14.5px;border:1px solid var(--line);margin-top:14px}
.mini-table td{padding:10px 14px;border-bottom:1px solid var(--line);color:var(--ink-2)}
.mini-table td:last-child{text-align:right;color:var(--ink);font-weight:500;white-space:nowrap}
.mini-table tr:last-child td{border-bottom:none}
.card-icon{width:40px;height:40px;border-radius:var(--r-xs);display:grid;place-items:center;background:var(--accent-soft);color:var(--accent-deep);border:1px solid var(--accent-line);margin-bottom:16px}
.section-head{max-width:660px}
.section-head.center{margin-inline:auto}
.section-head h2{margin-top:14px}
.section-head .lede{margin-top:15px}

/* ---------- Reveal ---------- */
.js .rv{opacity:0;transform:translateY(16px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.rv.in{opacity:1;transform:none}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1024px){
  .hero-grid,.ch-grid{grid-template-columns:1fr;gap:44px}
  .plate-grid{grid-template-columns:repeat(3,1fr)}
  .plate-cell:nth-child(4){border-left:none}
  .plate-cell:nth-child(n+4){border-top:1px solid var(--line)}
  .ticket{grid-template-columns:1fr}
  .ticket-r{border-left:none;border-top:1px dashed var(--edge)}
  .ticket::before,.ticket::after{display:none}
  .legal-layout{grid-template-columns:1fr;gap:32px}
  .toc{position:static;border:1px solid var(--line);border-radius:var(--r-md);padding:20px;background:var(--bg)}
  .contact-grid,.grid-3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .foot-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .install-head,.install-row{grid-template-columns:118px 1fr 78px 120px;gap:10px}
}
@media (max-width:820px){
  .rail{display:none}
  .bar-cta .btn-ghost{display:none}
  .burger{display:flex}
  .rail.open{
    display:flex;flex-direction:column;align-items:stretch;gap:0;
    position:absolute;top:var(--bar-h);left:calc(var(--gut) * -1);right:calc(var(--gut) * -1);
    background:var(--paper);border-bottom:1px solid var(--line);padding:10px var(--gut) 18px;box-shadow:var(--sh-2);
  }
  .rail.open a{padding:12px 0;font-size:13px;border-bottom:1px solid var(--line)}
  .rail.open a::after{display:none}
  .readout{display:none}
  .plate-grid{grid-template-columns:1fr}
  .plate-cell{border-left:none;border-top:1px solid var(--line)}
  .plate-cell:first-child{border-top:none}
  .grid-2,.grid-3,.contact-grid,.tcols{grid-template-columns:1fr}
  .res-stats{grid-template-columns:1fr}
  .res-stats div{border-left:none;border-top:1px solid var(--dark-line);padding-left:0}
  .res-stats div:first-child{border-top:none}
  .count-pair{gap:26px}
  .install-head{display:none}
  .install-row{grid-template-columns:1fr;gap:6px;padding:18px 12px}
  .foot-bottom{flex-direction:column;align-items:flex-start;gap:12px}
}
@media (max-width:560px){
  body{font-size:16px}
  .wordmark img{height:23px}
  .foot-grid{grid-template-columns:1fr}
  .btn-row .btn{width:100%}
  .ruled li{grid-template-columns:1fr;gap:6px}
  .faq-q{grid-template-columns:32px 1fr 20px;gap:8px;font-size:16px}
  .faq-a p{padding-left:40px;padding-right:0}
  .receipt{transform:none;padding:26px 20px}
  .mesh{grid-template-columns:repeat(12,1fr)}
  .lane{grid-template-columns:52px 1fr}
  .row{grid-template-columns:1fr 46px 46px 60px 14px;gap:7px;padding:10px 8px}
  .row-nm{font-size:13px}
}

/* ---------- Reduced motion: ship every settled end state ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .rv{opacity:1;transform:none}
  .panel .row{opacity:1;transform:none}
  .giant{opacity:1;transform:none}
  .count-gap>svg path,.diag .trail,.res-chart .ln{stroke-dashoffset:0}
  .diag .leak{opacity:1}
  .diag .drop{opacity:0}
  .par-bars i,.lane.out .lane-track i{transform:scaleY(1) scaleX(1)}
  .plate::before{transform:scaleX(1)}
  .mesh i{background:var(--accent-soft)}
  .seam .runner{transform:translateX(50vw)}
  .seam .trace{transform:scaleX(1)}
  .onhand-bar i{transform:scaleX(.947)}
}

/* ============================================================
   ADDED FOR THE MULTI-PAGE STRUCTURE
   (apps listing, app detail template, header dropdown)
   ============================================================ */

/* ---------- Skip link ---------- */
.skip{
  position:absolute;left:-9999px;top:0;z-index:100;
  background:var(--accent);color:#fff;padding:10px 16px;border-radius:0 0 var(--r-xs) 0;
  font-size:14px;font-weight:500;
}
.skip:focus{left:0}

/* ---------- Header dropdown ---------- */
.has-drop{position:relative}
.drop-t{display:inline-flex;align-items:center;gap:6px}
.drop-t .chev{transition:transform .2s var(--ease);opacity:.6}
.has-drop:hover .drop-t .chev,.has-drop:focus-within .drop-t .chev{transform:rotate(180deg);opacity:1}
.drop{
  position:absolute;top:calc(100% + 14px);left:-16px;width:396px;
  background:var(--bg);border:1px solid var(--line);border-radius:var(--r-md);
  box-shadow:var(--sh-2);padding:8px;
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .18s var(--ease),transform .18s var(--ease),visibility .18s;
}
.has-drop:hover .drop,.has-drop:focus-within .drop{opacity:1;visibility:visible;transform:none}
.drop::before{content:"";position:absolute;top:-14px;left:0;right:0;height:14px}
.drop-i{display:grid;grid-template-columns:34px 1fr;gap:12px;align-items:start;padding:11px 12px;border-radius:var(--r-xs);transition:background .16s}
.drop-i:hover{background:var(--paper)}
.drop-ch{
  font-family:var(--f-mono);font-size:11px;font-weight:700;color:var(--accent-deep);
  background:var(--accent-soft);border:1px solid var(--accent-line);border-radius:var(--r-xs);
  display:grid;place-items:center;height:26px;letter-spacing:0;
}
.drop-i b{display:block;font-size:14px;font-weight:600;color:var(--ink);letter-spacing:-.01em;line-height:1.3}
.drop-i em{display:block;font-style:normal;font-size:12.5px;color:var(--ink-3);line-height:1.45;margin-top:3px}
.drop-all{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  margin-top:6px;padding:11px 12px;border-top:1px solid var(--line);
  font-family:var(--f-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--accent-deep);font-weight:500;
}
.drop-all:hover{color:var(--ink)}

/* ---------- Breadcrumb ---------- */
.crumb{display:flex;align-items:center;gap:9px;font-family:var(--f-mono);font-size:11px;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-3)}
.crumb a{color:var(--ink-3);border-bottom:1px solid transparent;transition:color .18s,border-color .18s}
.crumb a:hover{color:var(--ink);border-color:var(--edge)}
.crumb span[aria-current]{color:var(--ink)}

/* ---------- App detail hero ---------- */
.app-hero{padding-top:clamp(28px,3.4vw,44px);padding-bottom:clamp(48px,6vw,80px);position:relative;overflow:hidden}
.app-hero::after{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:72px 72px;
  -webkit-mask-image:radial-gradient(circle at 74% 34%,#000,transparent 66%);
  mask-image:radial-gradient(circle at 74% 34%,#000,transparent 66%);
}
.app-hero>*{position:relative;z-index:1}
.app-hero-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.92fr);gap:clamp(32px,5vw,60px);align-items:center;margin-top:28px}

.app-meta{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.meta-i{
  display:inline-flex;align-items:center;gap:8px;padding:6px 12px;
  background:var(--bg);border:1px solid var(--line);border-radius:var(--r-xs);
  font-family:var(--f-mono);font-size:11px;letter-spacing:.05em;color:var(--ink-2);
}
.meta-i .stars svg{width:12px;height:12px}

/* ---------- Pull quote / summary ---------- */
.pull{
  font-size:clamp(19px,2vw,25px);line-height:1.5;color:var(--ink);letter-spacing:-.018em;
  border-left:2px solid var(--accent);padding-left:clamp(20px,3vw,32px);max-width:62ch;
}

/* ---------- Spec list ---------- */
.spec{margin-top:40px;border-top:1px solid var(--line)}
.spec>div{display:grid;grid-template-columns:200px minmax(0,1fr);gap:24px;padding:18px 0;border-bottom:1px solid var(--line)}
.spec dt{font-family:var(--f-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);font-weight:500;padding-top:2px}
.spec dd{margin:0;color:var(--ink-2);font-size:15.5px;line-height:1.6}
.spec dd a{color:var(--accent-deep);border-bottom:1px solid var(--accent-line)}

/* ---------- "Where it fits" ---------- */
.fits{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;margin-top:40px;border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;background:var(--bg)}
.fit{display:block;padding:26px 24px;border-left:1px solid var(--line);transition:background .2s;position:relative}
.fit:first-child{border-left:none}
.fit:hover{background:var(--paper)}
.fit .mono{display:block;color:var(--ink-3)}
.fit b{display:block;margin-top:12px;font-size:16px;font-weight:600;color:var(--ink);letter-spacing:-.012em}
.fit em{display:block;margin-top:7px;font-style:normal;font-size:14px;color:var(--ink-3);line-height:1.55}
.fit-tag{
  display:inline-block;margin-top:16px;font-family:var(--f-mono);font-size:10px;
  letter-spacing:.08em;text-transform:uppercase;color:var(--accent-deep);
}
.fit.is-here{background:var(--accent-soft)}
.fit.is-here::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--accent)}
.fit.is-here .fit-tag{color:var(--ink-3)}

/* ---------- Apps listing tiles ---------- */
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:20px}
.tile{
  position:relative;display:flex;flex-direction:column;
  background:var(--bg);border:1px solid var(--line);border-radius:var(--r-lg);padding:26px;
  transition:transform .26s var(--ease),box-shadow .26s,border-color .26s;
}
.tile:hover{transform:translateY(-4px);box-shadow:var(--sh-2);border-color:var(--edge)}
.tile-hit{position:absolute;inset:0;z-index:1;border-radius:var(--r-lg)}
.tile-top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:18px}
.tile h2{margin-bottom:8px}
.tile-tag{color:var(--ink-3);font-size:14.5px;line-height:1.55}
.tile-rate{display:flex;align-items:center;gap:9px;margin-top:16px;padding-bottom:16px;border-bottom:1px solid var(--line)}
.tile-rate .mono{color:var(--ink-3);text-transform:none;letter-spacing:.03em}
.tile-feat{display:flex;flex-direction:column;gap:9px;margin-top:16px;flex:1}
.tile-feat li{display:flex;gap:9px;font-size:14px;line-height:1.45;color:var(--ink-2)}
.tile-feat svg{flex:none;margin-top:3px;color:var(--ok)}
.tile-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:22px;padding-top:18px;border-top:1px solid var(--line)}
.tile-ext{
  position:relative;z-index:2;display:inline-flex;align-items:center;gap:6px;
  font-family:var(--f-mono);font-size:11px;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-3);
  border:1px solid var(--line);border-radius:var(--r-xs);padding:6px 11px;transition:border-color .18s,color .18s;
}
.tile-ext:hover{border-color:var(--edge);color:var(--ink)}

/* ---------- Generic demo row ---------- */
.row-plain{grid-template-columns:1fr 18px}

/* ---------- Responsive additions ---------- */
@media (max-width:1024px){
  .app-hero-grid{grid-template-columns:1fr;gap:40px}
  .fits{grid-template-columns:1fr}
  .fit{border-left:none;border-top:1px solid var(--line)}
  .fit:first-child{border-top:none}
  .spec>div{grid-template-columns:170px minmax(0,1fr);gap:18px}
}
@media (max-width:820px){
  .drop{
    position:static;width:auto;opacity:1;visibility:visible;transform:none;
    box-shadow:none;border:none;border-top:1px solid var(--line);border-radius:0;
    padding:8px 0 0;margin-top:8px;background:transparent;
  }
  .drop-t .chev{display:none}
  .rail.open .has-drop{border-bottom:1px solid var(--line);padding-bottom:10px}
  .tiles{grid-template-columns:1fr}
  .spec>div{grid-template-columns:1fr;gap:6px;padding:16px 0}
}

/* ---------- Print ---------- */
@media print{
  .bar,.foot,.toc,.btn,.seam,.close-wrap{display:none!important}
  body{background:#fff;color:#000;font-size:11pt}
  .legal-layout{display:block}
  .prose{max-width:none}
}