/* ============================================================================
   CONVINCER — design system
   Dark-only technical UI. Data colors are the validated palette (see
   docs/DESIGN.md § visual system); brand cyan is CHROME ONLY and never
   encodes data, so it can never be mistaken for a series.
   ========================================================================== */

:root{
  color-scheme: dark;

  /* planes ---------------------------------------------------------------- */
  --plane:      #070a0f;
  --surface:    #0e141c;   /* chart surface — palette validated against this */
  --surface-2:  #141c27;
  --surface-3:  #1b2531;
  --line:       #1e2a38;
  --line-2:     #2b3a4c;

  /* ink ------------------------------------------------------------------- */
  --ink:        #e8eef6;
  --ink-2:      #9fb0c4;
  --ink-3:      #67788d;

  /* brand — chrome only, never a data mark -------------------------------- */
  --brand:      #22d3ee;
  --brand-2:    #0b7f96;
  --brand-glow: rgba(34,211,238,.16);

  /* categorical series — validated slots 1-6 (dark) ----------------------- */
  --ax-evidence:        #3987e5;
  --ax-differentiation: #d95926;
  --ax-value:           #199e70;
  --ax-reliability:     #c98500;
  --ax-experience:      #d55181;
  --ax-candor:          #008300;

  /* head-to-head — validated slots 1 & 2, all-pairs ΔE 26.8 --------------- */
  --side-challenger: #3987e5;
  --side-defender:   #d95926;

  /* evidence tiers — validated ordinal blue ramp, monotone light→dark ----- */
  --tier-A: #9ec5f4;
  --tier-B: #5598e7;
  --tier-C: #2a78d6;
  --tier-D: #184f95;

  /* status — fixed, never themed, always shipped with icon + label -------- */
  --good:     #0ca30c;
  --warning:  #fab219;
  --serious:  #ec835a;
  --critical: #d03b3b;

  /* chart chrome ---------------------------------------------------------- */
  --grid: #18222e;
  --axis: #2c3a4a;

  --r-sm: 6px; --r: 10px; --r-lg: 14px;
  --mono: ui-monospace, "SF Mono", "JetBrains Mono", "Cascadia Mono", Menlo, Consolas, monospace;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }

body{
  margin:0; background:var(--plane); color:var(--ink);
  font:15px/1.6 var(--sans);
  -webkit-font-smoothing:antialiased;
  background-image:
    radial-gradient(900px 420px at 82% -8%, rgba(34,211,238,.07), transparent 60%),
    radial-gradient(700px 380px at 8% -4%, rgba(57,135,229,.06), transparent 60%);
  background-repeat:no-repeat;
}

.wrap{ max-width:1180px; margin:0 auto; padding:0 24px; }
.hidden{ display:none !important; }

/* ---------------------------------------------------------------- header -- */
.topbar{
  position:sticky; top:0; z-index:40;
  background:rgba(7,10,15,.82);
  backdrop-filter:blur(14px) saturate(140%);
  border-bottom:1px solid var(--line);
}
.topbar-inner{ display:flex; align-items:center; gap:20px; height:62px; }

.brand{ display:flex; align-items:center; gap:11px; text-decoration:none; color:inherit; }
.brand svg{ display:block; }
.brand-name{
  font-size:15px; font-weight:700; letter-spacing:.26em; text-transform:uppercase;
}
.brand-name span{ color:var(--brand); }

.nav{ display:flex; gap:2px; margin-left:14px; }
.nav button{
  background:none; border:0; color:var(--ink-3); cursor:pointer;
  font:inherit; font-size:13.5px; font-weight:500;
  padding:7px 14px; border-radius:var(--r-sm); position:relative;
  transition:color .15s, background .15s;
}
.nav button:hover{ color:var(--ink); background:var(--surface-2); }
.nav button.active{ color:var(--brand); background:var(--brand-glow); }

.topbar-right{ margin-left:auto; display:flex; align-items:center; gap:10px; }

/* --- the account chip: sign-in reachable from every page ------------------ */
.nav-account{
  display:inline-flex; align-items:center; gap:8px; cursor:pointer;
  font:500 12px/1 var(--sans); color:var(--ink-2);
  padding:8px 13px; border:1px solid var(--line-2); border-radius:999px;
  background:var(--surface); transition:border-color .16s, color .16s;
}
.nav-account:hover{ border-color:var(--brand); color:var(--ink); }
.nav-account .acct-dot{
  width:7px; height:7px; border-radius:50%; background:var(--good); flex:none;
}
.nav-account .acct-name{ max-width:14ch; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
/* A challenge you have not answered follows you onto every page — missing the
   window costs the defender their rank by default. */
.nav-account .acct-badge{
  min-width:17px; height:17px; padding:0 5px; border-radius:999px;
  background:var(--critical); color:#fff; font:600 10px/17px var(--mono);
  text-align:center; flex:none;
}
.nav-account.signin{ color:var(--brand); border-color:var(--brand); }
.nav-account.signin:hover{ background:rgba(34,211,238,.08); }

.acct-sheet-mail{ color:var(--ink-3); font-size:12.5px; margin:2px 0 16px; font-family:var(--mono); }
.acct-sheet .bal{ margin-bottom:8px; }

.jury-status{
  display:flex; align-items:center; gap:8px;
  font:500 11.5px/1 var(--mono); letter-spacing:.06em; text-transform:uppercase;
  color:var(--ink-2); padding:7px 12px; border:1px solid var(--line-2);
  border-radius:999px; background:var(--surface);
  white-space:nowrap;
}
.dot{ width:7px; height:7px; border-radius:50%; flex:none; }
.dot.on{ background:var(--good); box-shadow:0 0 0 3px rgba(12,163,12,.18); animation:pulse 2.4s ease-in-out infinite; }
.dot.off{ background:var(--warning); box-shadow:0 0 0 3px rgba(250,178,25,.16); }
@keyframes pulse{ 0%,100%{opacity:1} 50%{opacity:.45} }

/* ------------------------------------------------------------------ hero -- */
.hero{ padding:40px 0 26px; position:relative; overflow:hidden; }
.hero::before{
  content:''; position:absolute; inset:0; pointer-events:none;
  background-image:linear-gradient(var(--grid) 1px, transparent 1px),
                   linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size:56px 56px;
  mask-image:radial-gradient(680px 300px at 50% 30%, #000 20%, transparent 78%);
  opacity:.55;
}
.hero-inner{ position:relative; }
.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font:600 11px/1 var(--mono); letter-spacing:.16em; text-transform:uppercase;
  color:var(--brand); background:var(--brand-glow);
  border:1px solid rgba(34,211,238,.28); border-radius:999px; padding:7px 13px;
  margin-bottom:16px;
}
.hero h1{
  margin:0 0 14px; font-size:clamp(28px,4vw,44px); line-height:1.07;
  letter-spacing:-.028em; font-weight:700; max-width:19ch;
}
.hero h1 em{
  font-style:normal;
  background:linear-gradient(96deg, var(--brand), #7dd3fc 55%, var(--ink));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero p{ margin:0; color:var(--ink-2); font-size:16.5px; max-width:60ch; }

.kpis{ display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:12px; margin-top:26px; }
.kpi{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
  padding:15px 17px; position:relative; overflow:hidden;
}
.kpi::after{
  content:''; position:absolute; left:0; top:0; bottom:0; width:2px;
  background:linear-gradient(180deg, var(--brand), transparent);
  opacity:.65;
}
.kpi-v{ font-size:26px; font-weight:600; letter-spacing:-.02em; line-height:1.1; }
.kpi-l{
  font:500 10.5px/1.3 var(--mono); letter-spacing:.11em; text-transform:uppercase;
  color:var(--ink-3); margin-top:6px;
}

/* --------------------------------------------------------------- sections -- */
.view{ padding-bottom:96px; }
.section-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:20px; margin:0 0 18px; }
.section-head h2{ margin:0; font-size:19px; letter-spacing:-.012em; }
.section-head .sub{ color:var(--ink-3); font:500 11.5px/1 var(--mono); letter-spacing:.08em; text-transform:uppercase; }
.lede{ color:var(--ink-2); max-width:74ch; margin:0 0 24px; }

/* ---------------------------------------------------------------- ladder -- */
.cat-bar{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:16px 20px; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r) var(--r) 0 0; border-bottom:0;
}
.cat-bar h2, .cat-bar h3{ margin:0; font-size:16px; }
.cat-bar p{ margin:3px 0 0; color:var(--ink-3); font-size:13px; }

.ladder{ border:1px solid var(--line); border-radius:0 0 var(--r) var(--r); overflow:hidden; }
.lrow{
  display:grid; grid-template-columns:64px 1fr 132px 116px; gap:18px; align-items:center;
  padding:16px 20px; background:var(--surface);
  border-top:1px solid var(--line);
  cursor:pointer; position:relative;
  transition:background .16s;
}
.lrow:hover{ background:var(--surface-2); }
.lrow::before{
  content:''; position:absolute; left:0; top:0; bottom:0; width:2px;
  background:var(--brand); transform:scaleY(0); transform-origin:center;
  transition:transform .2s ease;
}
.lrow:hover::before{ transform:scaleY(1); }

.rank{
  font:700 25px/1 var(--mono); color:var(--ink-3);
  text-align:center; font-variant-numeric:tabular-nums;
  display:flex; flex-direction:column; align-items:center; gap:5px;
}
.lrow[data-top="1"] .rank{ color:var(--brand); text-shadow:0 0 22px var(--brand-glow); }
.lrow[data-top="2"] .rank,
.lrow[data-top="3"] .rank{ color:var(--ink); }
.rank small{ font:600 9px/1 var(--mono); letter-spacing:.1em; color:var(--ink-3); }

.pname{ font-weight:600; font-size:15.5px; display:flex; align-items:center; gap:9px; flex-wrap:wrap; }
.ptag{ color:var(--ink-2); font-size:13.5px; margin-top:2px; }
.pmeta{ margin-top:8px; display:flex; gap:8px; flex-wrap:wrap; align-items:center; }

.tag{
  font:500 10.5px/1 var(--mono); letter-spacing:.05em;
  padding:4px 8px; border-radius:var(--r-sm);
  border:1px solid var(--line-2); color:var(--ink-2); background:var(--surface-2);
  display:inline-flex; align-items:center; gap:5px; white-space:nowrap;
}
.tag.warn{ color:var(--warning); border-color:rgba(250,178,25,.35); background:rgba(250,178,25,.08); }
.tag.live{ color:var(--brand); border-color:rgba(34,211,238,.35); background:var(--brand-glow); }

.record{ font:500 12px/1.7 var(--mono); color:var(--ink-2); font-variant-numeric:tabular-nums; }
.record b{ color:var(--ink); font-weight:600; }
.record .muted{ color:var(--ink-3); }

/* meter — single ratio against a limit, same-ramp track */
.meter-label{ font:500 9.5px/1 var(--mono); letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); margin-bottom:6px; }
.meter{ height:6px; border-radius:3px; background:var(--surface-3); overflow:hidden; }
.meter i{ display:block; height:100%; border-radius:3px; background:var(--ax-evidence); }
.meter i.low{ background:var(--critical); }
.meter-v{ font:600 11.5px/1 var(--mono); color:var(--ink-2); margin-top:6px; font-variant-numeric:tabular-nums; }

/* ------------------------------------------------------------------ jury -- */
.jury-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(340px,1fr)); gap:14px; }
.juror{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:20px; transition:border-color .18s, transform .18s;
}
.juror:hover{ border-color:var(--line-2); transform:translateY(-2px); }
.juror-top{ display:flex; align-items:flex-start; gap:13px; margin-bottom:12px; }
.avatar{
  width:42px; height:42px; flex:none; border-radius:11px;
  display:grid; place-items:center; font-size:21px;
  background:var(--surface-3); border:1px solid var(--line-2);
}
.juror h3{ margin:0; font-size:15.5px; }
.juror .role{
  font:600 10px/1.4 var(--mono); letter-spacing:.13em; text-transform:uppercase;
  color:var(--brand); margin-top:3px;
}
.juror .blurb{ color:var(--ink-2); font-size:13.5px; margin:0 0 16px; }

.weights-label{
  font:500 9.5px/1 var(--mono); letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-3); margin-bottom:8px; display:flex; justify-content:space-between;
}
/* stacked bar — part-to-whole, weights sum to 1.0; 2px surface gaps, no borders */
.stack{ display:flex; height:9px; gap:2px; }
.stack i{ display:block; border-radius:2px; min-width:2px; }
.stack i:first-child{ border-radius:3px 2px 2px 3px; }
.stack i:last-child{ border-radius:2px 3px 3px 2px; }
.legend{ display:flex; flex-wrap:wrap; gap:10px 14px; margin-top:11px; }
.legend span{ display:inline-flex; align-items:center; gap:6px; font:500 11px/1 var(--mono); color:var(--ink-2); }
.legend i{ width:8px; height:8px; border-radius:2px; flex:none; }
.legend .rest{ color:var(--ink-3); }

/* ---------------------------------------------------------------- trials -- */
.docket{ display:flex; flex-direction:column; gap:10px; }
.trial{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
  padding:16px 20px; cursor:pointer; transition:border-color .16s, background .16s;
}
.trial:hover{ border-color:var(--line-2); background:var(--surface-2); }
.trial-top{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.tid{ font:500 11px/1 var(--mono); color:var(--ink-3); letter-spacing:.04em; }
.matchup{ display:flex; align-items:center; gap:10px; font-size:14.5px; font-weight:600; }
.matchup .vs{ color:var(--ink-3); font:500 10.5px/1 var(--mono); letter-spacing:.12em; }
.side-c{ color:var(--side-challenger); }
.side-d{ color:var(--side-defender); }
.trial .thesis{ color:var(--ink-2); font-size:13.5px; margin-top:9px; max-width:88ch; }

.badge{
  margin-left:auto; display:inline-flex; align-items:center; gap:6px;
  font:600 10.5px/1 var(--mono); letter-spacing:.09em; text-transform:uppercase;
  padding:6px 11px; border-radius:999px; white-space:nowrap;
}
.badge svg{ flex:none; }
.b-promotion{ color:var(--good); background:rgba(12,163,12,.12); border:1px solid rgba(12,163,12,.34); }
.b-hold{ color:var(--warning); background:rgba(250,178,25,.11); border:1px solid rgba(250,178,25,.32); }
.b-open{ color:var(--brand); background:var(--brand-glow); border:1px solid rgba(34,211,238,.3); }

/* ------------------------------------------------------------ trial detail */
.modal{
  position:fixed; inset:0; z-index:60; background:rgba(4,6,10,.86);
  backdrop-filter:blur(6px);
  display:flex; align-items:flex-start; justify-content:center;
  padding:40px 20px; overflow-y:auto;
  animation:fade .18s ease;
}
@keyframes fade{ from{opacity:0} to{opacity:1} }
.sheet{
  background:var(--surface); border:1px solid var(--line-2); border-radius:var(--r-lg);
  max-width:940px; width:100%; position:relative;
  animation:rise .24s cubic-bezier(.2,.7,.3,1);
  box-shadow:0 30px 90px rgba(0,0,0,.6);
}
@keyframes rise{ from{opacity:0; transform:translateY(14px)} to{opacity:1; transform:none} }
.sheet-head{ padding:24px 62px 20px 28px; border-bottom:1px solid var(--line); }
.sheet-body{ padding:24px 28px 30px; }
/* 940px is for the challenge and defence composers — long, multi-field filings.
   A sheet that is one short form needs a column, not a hall. */
.sheet.narrow{ max-width:440px; }
.sheet-title{ margin:0; font-size:20px; letter-spacing:-.02em; }
.sheet-lede{ color:var(--ink-2); font-size:13px; line-height:1.6; margin:0 0 16px; }
.sheet-lede a{ color:var(--brand); }
.sheet-actions{ display:flex; gap:9px; margin-top:20px; flex-wrap:wrap; }
.sheet-actions .btn{ flex:1 1 auto; justify-content:center; }
.close{
  position:absolute; top:16px; right:18px; width:30px; height:30px;
  background:var(--surface-2); border:1px solid var(--line-2); border-radius:8px;
  color:var(--ink-2); font-size:17px; line-height:1; cursor:pointer;
}
.close:hover{ color:var(--ink); border-color:var(--ink-3); }

h4.sec{
  font:600 10.5px/1 var(--mono); letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-3); margin:30px 0 13px;
  display:flex; align-items:center; gap:11px;
}
h4.sec::after{ content:''; flex:1; height:1px; background:var(--line); }
h4.sec:first-child{ margin-top:0; }

/* gates */
.gates{ display:grid; grid-template-columns:repeat(3,1fr); gap:11px; }
.gate{
  background:var(--surface-2); border:1px solid var(--line); border-radius:var(--r);
  padding:15px 16px; position:relative; overflow:hidden;
  opacity:0; animation:gateIn .34s ease forwards;
}
.gate:nth-child(1){ animation-delay:.05s } .gate:nth-child(2){ animation-delay:.14s } .gate:nth-child(3){ animation-delay:.23s }
@keyframes gateIn{ from{opacity:0; transform:translateY(7px)} to{opacity:1; transform:none} }
.gate::before{ content:''; position:absolute; left:0; top:0; bottom:0; width:3px; }
.gate.pass::before{ background:var(--good); }
.gate.fail::before{ background:var(--critical); }
.gate-l{ font:500 10px/1 var(--mono); letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3); }
.gate-v{ font-size:19px; font-weight:600; margin-top:8px; display:flex; align-items:center; gap:8px; font-variant-numeric:tabular-nums; }
.gate.pass .gate-v{ color:var(--good); } .gate.fail .gate-v{ color:var(--critical); }
.gate-n{ font:500 11px/1.4 var(--mono); color:var(--ink-3); margin-top:5px; }

.callout{
  border-radius:var(--r); padding:14px 16px; margin:14px 0; font-size:13.5px;
  display:flex; gap:11px; align-items:flex-start;
}
.callout svg{ flex:none; margin-top:1px; }
.c-good{ background:rgba(12,163,12,.09); border:1px solid rgba(12,163,12,.3); color:#8fe08f; }
.c-warn{ background:rgba(250,178,25,.08); border:1px solid rgba(250,178,25,.28); color:#f4d08a; }
.c-crit{ background:rgba(208,59,59,.09); border:1px solid rgba(208,59,59,.32); color:#f0a3a3; }

/* dumbbell chart */
.chart-head{ display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:6px; flex-wrap:wrap; }
.chart-legend{ display:flex; gap:16px; }
.chart-legend span{ display:inline-flex; align-items:center; gap:7px; font:500 11.5px/1 var(--mono); color:var(--ink-2); }
.chart-legend i{ width:10px; height:10px; border-radius:50%; flex:none; }
.toggle{
  background:var(--surface-2); border:1px solid var(--line-2); color:var(--ink-2);
  font:500 10.5px/1 var(--mono); letter-spacing:.08em; text-transform:uppercase;
  padding:6px 11px; border-radius:var(--r-sm); cursor:pointer;
}
.toggle:hover{ color:var(--ink); border-color:var(--ink-3); }
.dumbbell{ width:100%; display:block; overflow:visible; }
.dumbbell .lbl{ font:500 12px var(--mono); fill:var(--ink-2); }
.dumbbell .val{ font:600 11px var(--mono); fill:var(--ink-2); }
.dumbbell .grid-l{ stroke:var(--grid); stroke-width:1; }
.dumbbell .axis-l{ stroke:var(--axis); stroke-width:1; }
.dumbbell .tick{ font:500 10px var(--mono); fill:var(--ink-3); }
.dumbbell .conn{ stroke:var(--line-2); stroke-width:2; stroke-linecap:round; }
.dumbbell .hit{ fill:transparent; cursor:pointer; }
.dumbbell .row-bg{ fill:transparent; }
.dumbbell g.row:hover .row-bg{ fill:var(--surface-2); }

/* tables */
table{ width:100%; border-collapse:collapse; font-size:13.5px; }
th{
  text-align:left; font:600 10px/1 var(--mono); letter-spacing:.11em; text-transform:uppercase;
  color:var(--ink-3); padding:9px 10px; border-bottom:1px solid var(--line-2); white-space:nowrap;
}
td{ padding:11px 10px; border-bottom:1px solid var(--line); vertical-align:top; }
td.num{ font-family:var(--mono); font-variant-numeric:tabular-nums; }
tr.quote td{ padding-top:0; border-bottom:1px solid var(--line); color:var(--ink-2); font-size:13px; font-style:italic; }

/* tier chips — ordinal ramp; the LETTER carries meaning, never color alone */
.tier{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:19px; height:19px; padding:0 5px; border-radius:5px;
  font:700 10.5px/1 var(--mono); color:#05121f; flex:none;
}
.tier-A{ background:var(--tier-A); } .tier-B{ background:var(--tier-B); }
.tier-C{ background:var(--tier-C); color:#eaf3ff; } .tier-D{ background:var(--tier-D); color:#dbe8fa; }

/* filing */
.filing{ background:var(--surface-2); border:1px solid var(--line); border-radius:var(--r); padding:18px 20px; }
.filing + .filing{ margin-top:12px; }
.filing-top{ display:flex; align-items:center; gap:10px; margin-bottom:12px; }
.pill{
  font:600 10px/1 var(--mono); letter-spacing:.1em; text-transform:uppercase;
  padding:5px 10px; border-radius:999px;
}
.pill.c{ color:var(--side-challenger); background:rgba(57,135,229,.13); border:1px solid rgba(57,135,229,.32); }
.pill.d{ color:var(--side-defender); background:rgba(217,89,38,.13); border:1px solid rgba(217,89,38,.32); }
.arg{ border-left:2px solid var(--line-2); padding:2px 0 2px 15px; margin:15px 0; }
.arg-h{ font:600 10px/1 var(--mono); letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); margin-bottom:7px; }
.ev{ display:flex; gap:9px; align-items:flex-start; margin-top:8px; font-size:12.5px; color:var(--ink-2); }
.ev-none{ color:var(--critical); font:500 12px var(--mono); margin-top:9px; }
.concessions{ margin-top:16px; padding-top:14px; border-top:1px solid var(--line); }
.concessions li{ margin:5px 0; color:var(--ink-2); font-size:13.5px; }

/* how-it-works */
.steps{ display:grid; gap:12px; }
.step{
  display:grid; grid-template-columns:44px 1fr; gap:18px; align-items:start;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:20px 22px;
}
.step-n{
  width:34px; height:34px; border-radius:10px; display:grid; place-items:center;
  font:700 13px/1 var(--mono); color:var(--brand);
  background:var(--brand-glow); border:1px solid rgba(34,211,238,.3);
}
.step h2, .step h3{ margin:0 0 7px; font-size:15.5px; }
.step p{ margin:0; color:var(--ink-2); font-size:14px; }
.step p + p{ margin-top:9px; }
.step code{ font:600 12.5px var(--mono); color:var(--brand); background:var(--brand-glow); padding:2px 6px; border-radius:4px; }
.step strong{ color:var(--ink); }

.tier-table{ margin-top:14px; }
.empty{ color:var(--ink-3); text-align:center; padding:44px; border:1px dashed var(--line-2); border-radius:var(--r); }

/* product sheet */
.dl{ display:grid; grid-template-columns:130px 1fr; gap:10px 18px; font-size:13.5px; }
.dl dt{ font:500 10.5px/1.5 var(--mono); letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3); }
.dl dd{ margin:0; color:var(--ink-2); }
ul.clean{ margin:0; padding-left:18px; }
ul.clean li{ margin:5px 0; color:var(--ink-2); font-size:13.5px; }

@media (max-width:860px){
  /* `1fr` is `minmax(auto, 1fr)`, and `auto` floors at min-content — so the
     record column refused to shrink below its longest unbreakable line and
     pushed 67px off the right of the screen. minmax(0, 1fr) lets it shrink. */
  .lrow{ grid-template-columns:48px minmax(0, 1fr); gap:12px 14px; }
  .lrow .record, .lrow .standing{ grid-column:2; min-width:0; }
  .pmeta{ min-width:0; }
  .pmeta .tag{ white-space:normal; max-width:100%; }

  /* Two-column headers: a title beside a right-aligned count. Side by side on a
     phone the title gets squeezed into a narrow column and the count wraps into
     a stack of orphaned words, so they go one above the other. */
  .section-head{ flex-direction:column; align-items:flex-start; gap:8px; }
  .section-head .sub{ order:-1; }
  .cat-bar{ flex-direction:column; align-items:flex-start; gap:10px; }
  .cat-bar .count, .cat-bar > span:last-child{ white-space:nowrap; }

  /* The compare checkbox is centred against a row that is now much taller, so
     it drifts away from the product it selects. Pin it beside the rank. */
  .lrow .cmp-check{ top:20px; transform:none; }
  .gates{ grid-template-columns:1fr; }
  .jury-status{ display:none; }
  .dl{ grid-template-columns:1fr; gap:4px 0; }

  /* --- mobile topbar -------------------------------------------------------
     Six nav items need 424px and a phone has 390. Laid out in one row they ran
     off the right edge: Compare, How to win and Submit were unreachable, and
     the account chip was pushed off the screen entirely.

     So the bar becomes two rows — identity and account on top, the sections
     below as a strip that scrolls horizontally and bleeds to both edges so it
     reads as scrollable. Every destination stays reachable, and it needs no
     JavaScript, no hamburger, and no second copy of the nav in the markup. */
  .topbar-inner{ height:auto; flex-wrap:wrap; gap:0; padding-top:8px; }
  .brand{ order:1; }
  .topbar-right{ order:2; }
  .nav{
    order:3; margin:6px 0 0; padding:0 24px 6px;
    /* cancel .wrap's gutter so the strip runs edge to edge — a section clipped
       by the screen edge is what tells you it scrolls */
    margin-inline:-24px; width:calc(100% + 48px);
    overflow-x:auto; overscroll-behavior-x:contain;
    scrollbar-width:none; -ms-overflow-style:none;
  }
  .nav::-webkit-scrollbar{ display:none; }
  .nav-link{ white-space:nowrap; padding:8px 13px; font-size:13.5px; }
  .nav-link.active{ box-shadow:inset 0 -2px 0 var(--brand); }
}
/* The chip itself stays at every width — it is the only way in. Only the name
   drops, and only once the topbar is genuinely tight. */
@media (max-width:560px){
  .nav-account .acct-name{ display:none; }
  .nav-account{ padding:8px 11px; }

  /* Prose set below 12px is unreadable on a phone. The Press Start 2P labels
     are left alone — a bitmap face is legible at 8px in a way a text face is
     not, and they are the 8-bit design rather than something to read. */
  .tag{ font-size:12px; }
  .arg-h{ font-size:11px; }
  .tier-table th, .tier-table td{ font-size:12px; }
}


@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important; }
}

/* ============================================================ forms & billing */
.submit-grid{ display:grid; grid-template-columns:1fr 316px; gap:16px; align-items:start; }
.card{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:22px 24px;
}
.field{ margin-bottom:16px; }
.field label{
  display:block; font:600 10.5px/1 var(--mono); letter-spacing:.11em; text-transform:uppercase;
  color:var(--ink-3); margin-bottom:7px;
}
.field .hint{ font:400 12px/1.5 var(--sans); color:var(--ink-3); margin-top:6px; text-transform:none; letter-spacing:0; }
.field input, .field textarea, .field select{
  width:100%; background:var(--plane); border:1px solid var(--line-2); border-radius:var(--r-sm);
  color:var(--ink); font:15px/1.5 var(--sans); padding:10px 12px;
}
.field textarea{ resize:vertical; min-height:78px; }
.field input:focus, .field textarea:focus, .field select:focus{
  outline:none; border-color:var(--brand); box-shadow:0 0 0 3px var(--brand-glow);
}
.field.bad input, .field.bad textarea{ border-color:var(--critical); }
.err{ color:var(--critical); font:500 12px var(--mono); margin-top:6px; }
.row2{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  background:var(--brand); color:#04222a; border:0; border-radius:var(--r-sm);
  font:600 14px/1 var(--sans); padding:12px 18px; cursor:pointer; transition:filter .15s;
}
.btn:hover{ filter:brightness(1.1); }
.btn:disabled{ opacity:.45; cursor:not-allowed; filter:none; }
.btn.ghost{ background:transparent; color:var(--ink-2); border:1px solid var(--line-2); }
.btn.ghost:hover{ color:var(--ink); border-color:var(--ink-3); }
.btn.small{ padding:8px 13px; font-size:12.5px; }

.wallet h3{ margin:0 0 4px; font-size:15px; }
.wallet .price{ font:700 27px/1 var(--sans); letter-spacing:-.02em; margin:14px 0 4px; }
.wallet .price small{ font:500 12px var(--mono); color:var(--ink-3); letter-spacing:.06em; }
.credits-lede{
  color:var(--ink-2); font-size:12.5px; line-height:1.55; margin:0 0 14px;
}
.credits-lede em{ color:var(--ink); font-style:normal; font-weight:600; }

.bal{ padding:11px 0; border-bottom:1px solid var(--line); font-size:13.5px; }
.bal-top{ display:flex; justify-content:space-between; align-items:baseline; gap:12px; }
.bal-label{ color:var(--ink); font-weight:500; }
.bal-what{ margin:5px 0 0; color:var(--ink-2); font-size:12.5px; line-height:1.5; }
.bal-price{ margin:4px 0 0; color:var(--ink-3); font-size:11.5px; }
.bal b{ font:600 16px var(--mono); font-variant-numeric:tabular-nums; }
.bal.has b{ color:var(--good); }
.bal.none b{ color:var(--ink-3); }
.free-block{ margin-top:18px; padding-top:14px; border-top:1px solid var(--line); }
.free-head{
  margin:0 0 6px; font:500 10.5px/1.4 var(--mono); letter-spacing:.08em;
  text-transform:uppercase; color:var(--ink-3);
}
.free-list{ margin:0; padding:0; list-style:none; }
.free-list li{
  font-size:12.5px; color:var(--ink-2); padding:4px 0 4px 20px; position:relative;
}
.free-list li::before{ content:'✓'; position:absolute; left:0; color:var(--good); font-weight:700; }

.argblock{
  background:var(--surface-2); border:1px solid var(--line); border-radius:var(--r);
  padding:16px 18px; margin-bottom:12px; position:relative;
}
.argblock .remove{
  position:absolute; top:12px; right:14px; background:none; border:0; color:var(--ink-3);
  font-size:16px; cursor:pointer; line-height:1;
}
.argblock .remove:hover{ color:var(--critical); }
.evrow{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:10px; }
.tierhint{
  display:inline-flex; align-items:center; gap:7px; font:500 11px var(--mono);
  color:var(--ink-2); margin-top:8px;
}
.notice{
  border-radius:var(--r); padding:13px 15px; font-size:13px; margin-bottom:16px;
  display:flex; gap:10px; align-items:flex-start;
}
.notice svg{ flex:none; margin-top:1px; }
.n-warn{ background:rgba(250,178,25,.08); border:1px solid rgba(250,178,25,.3); color:#f4d08a; }
.n-info{ background:var(--brand-glow); border:1px solid rgba(34,211,238,.28); color:#a5e8f5; }
.n-good{ background:rgba(12,163,12,.09); border:1px solid rgba(12,163,12,.3); color:#8fe08f; }

@media (max-width:900px){ .submit-grid{ grid-template-columns:1fr; } .row2,.evrow{ grid-template-columns:1fr; } }

/* ============================================================================
   ARCADE LAYER
   The product IS a ladder: challengers, duels, win/loss records, cooldowns.
   The arcade language is applied where the product is genuinely a CONTEST.
   It is deliberately kept off the evidence surfaces — charts, tier chips and
   data tables stay in the clean technical register, because that is where the
   leaderboard's credibility lives.
   ========================================================================== */

@font-face{
  font-family:'Press Start 2P';
  src:url('/fonts/press-start-2p-latin.woff2') format('woff2');
  font-weight:400; font-style:normal; font-display:swap;
}
:root{
  --px: 'Press Start 2P', ui-monospace, 'Courier New', monospace;
  --px-shadow:#04070c;
}

/* Pixel display type. Press Start 2P runs very wide — only ever use it small
   and in short bursts, never for body copy. */
.px{
  font-family:var(--px); font-weight:400; letter-spacing:0;
  text-transform:uppercase; line-height:1.5;
  -webkit-font-smoothing:none;
}
.px-sm{ font-size:9px; } .px-md{ font-size:12px; } .px-lg{ font-size:17px; } .px-xl{ font-size:26px; }
.px-shadow{ text-shadow:2px 2px 0 var(--px-shadow); }

/* Chunky notched border, NES-style: four offset shadows leave the corners cut. */
.pixel-box{
  border-radius:0 !important;
  box-shadow:
     0 -3px 0 0 var(--pb, var(--line-2)),
     0  3px 0 0 var(--pb, var(--line-2)),
    -3px 0 0 0 var(--pb, var(--line-2)),
     3px 0 0 0 var(--pb, var(--line-2));
  border:0 !important;
}

/* Crisp pixel rendering for sprites at any size. */
.sprite{ image-rendering:pixelated; display:block; }

/* ------------------------------------------------------------- CRT hero -- */
.hero::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:repeating-linear-gradient(
    180deg, rgba(0,0,0,.20) 0 1px, transparent 1px 3px);
  mask-image:radial-gradient(700px 320px at 50% 34%, #000 10%, transparent 80%);
  opacity:.5;
}
.eyebrow{ font-family:var(--px); font-size:9px; letter-spacing:.04em; }
.blink{ animation:blink 1.1s steps(1) infinite; }
@keyframes blink{ 0%,49%{opacity:1} 50%,100%{opacity:0} }

.kpi-v{ font-family:var(--px); font-size:20px; letter-spacing:0; }
.kpi-l{ font-family:var(--px); font-size:8px; letter-spacing:.02em; }

/* ------------------------------------------------- ladder as score table -- */
.rank{ font-family:var(--px); font-size:17px; letter-spacing:0; }
.rank small{ font-family:var(--px); font-size:7px; }
.lrow[data-top="1"] .rank{ text-shadow:2px 2px 0 var(--px-shadow), 0 0 18px var(--brand-glow); }

/* Arcade streak chip — real data (consecutive successful defences). */
.streak{
  font-family:var(--px); font-size:8px; letter-spacing:.02em;
  color:var(--warning); background:rgba(250,178,25,.10);
  --pb:rgba(250,178,25,.5); padding:5px 8px;
}
.tag.px-tag{ font-family:var(--px); font-size:8px; letter-spacing:.02em; padding:5px 8px; }

/* --------------------------------------------------------- the VS plate -- */
.versus{
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:14px;
  background:linear-gradient(180deg, #101a26, #0b111a);
  --pb:var(--line-2); padding:20px 18px; margin-bottom:6px;
}
.fighter{ display:flex; align-items:center; gap:12px; min-width:0; }
.fighter.right{ flex-direction:row-reverse; text-align:right; }
.fighter .who{ min-width:0; }
.fighter .role{
  font-family:var(--px); font-size:7px; letter-spacing:.04em; margin-bottom:5px;
}
.fighter.left .role{ color:var(--side-challenger); }
.fighter.right .role{ color:var(--side-defender); }
.fighter .nm{
  font-family:var(--px); font-size:13px; line-height:1.4;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.fighter .rk{ font:500 11px/1 var(--mono); color:var(--ink-3); margin-top:6px; }
.portrait{
  width:52px; height:52px; flex:none; display:grid; place-items:center;
  background:var(--surface-3); --pb:var(--line-2);
}
.vs-mark{
  font-family:var(--px); font-size:22px; color:var(--warning);
  text-shadow:3px 3px 0 var(--px-shadow);
  animation:vsPulse 1.6s ease-in-out infinite;
}
@keyframes vsPulse{ 0%,100%{transform:scale(1)} 50%{transform:scale(1.12)} }

/* --------------------------------------------------- arcade result plate -- */
.result{
  text-align:center; padding:22px 18px; margin:16px 0;
  --pb:var(--line-2);
}
.result.win{ background:rgba(12,163,12,.10); --pb:rgba(12,163,12,.55); }
.result.hold{ background:rgba(250,178,25,.09); --pb:rgba(250,178,25,.5); }
.result .headline{
  font-family:var(--px); font-size:22px; text-shadow:3px 3px 0 var(--px-shadow);
  margin-bottom:12px; display:block;
}
.result.win .headline{ color:var(--good); animation:popIn .4s cubic-bezier(.2,1.6,.4,1); }
.result.hold .headline{ color:var(--warning); }
@keyframes popIn{ from{transform:scale(.7);opacity:0} to{transform:scale(1);opacity:1} }
.result .detail{ color:var(--ink-2); font-size:13.5px; max-width:64ch; margin:0 auto; }

/* Vote meter — segmented like an arcade health bar. One block per juror. */
.votes{ display:flex; gap:4px; justify-content:center; margin:14px 0 4px; }
.votes i{
  width:34px; height:14px; display:block; background:var(--surface-3);
  box-shadow:inset 0 0 0 2px var(--line-2);
}
.votes i.c{ background:var(--side-challenger); box-shadow:inset 0 0 0 2px #0b1b2e; }
.votes i.d{ background:var(--side-defender);  box-shadow:inset 0 0 0 2px #2e1409; }
.votes-l{ font-family:var(--px); font-size:8px; color:var(--ink-3); text-align:center; }

/* ------------------------------------------------------- character select -- */
.juror{ position:relative; }
.juror .avatar{
  width:auto; height:auto; background:transparent; border:0; padding:0;
}
.juror-top{ align-items:center; }
.juror h2, .juror h3{ font-family:var(--px); font-size:11px; line-height:1.5; margin:0; }
.juror .role{ font-family:var(--px); font-size:7.5px; letter-spacing:.04em; }
.weights-label{ font-family:var(--px); font-size:7.5px; letter-spacing:.02em; }
.juror .slot{
  position:absolute; top:12px; right:14px;
  font-family:var(--px); font-size:7px; color:var(--ink-3);
}

/* Gate labels keep the arcade voice; the NUMBERS stay in the UI sans so they
   remain readable and comparable. */
.gate-l{ font-family:var(--px); font-size:7.5px; letter-spacing:.02em; }
h4.sec{ font-family:var(--px); font-size:8.5px; letter-spacing:.02em; }
.tab, .nav button{ font-family:inherit; }
.brand-name{ font-family:var(--px); font-size:12px; letter-spacing:.02em; }
.badge{ font-family:var(--px); font-size:8px; letter-spacing:.02em; padding:7px 10px; }
.verdict{ font-family:var(--px); font-size:8px; letter-spacing:.02em; }
.step-n{ font-family:var(--px); font-size:10px; }
.section-head .sub{ font-family:var(--px); font-size:8px; letter-spacing:.02em; }
.jury-status{ font-family:var(--px); font-size:8px; letter-spacing:.02em; }
.matchup .vs{ font-family:var(--px); font-size:8px; }
.btn{ font-family:var(--px); font-size:10px; letter-spacing:.02em; padding:14px 18px; }
.btn.small{ font-size:8px; padding:9px 12px; }
.field label{ font-family:var(--px); font-size:7.5px; letter-spacing:.02em; }
.wallet h3{ font-family:var(--px); font-size:11px; }
  /* Not .bal b: the balance is a figure to read, and at 13px the pixel face
     renders a lone 0 as an unrecognisable glyph. The arcade layer stays off
     the surfaces where a number has to be legible. */
.wallet .price{ font-family:var(--px); }

@media (max-width:700px){
  .versus{ grid-template-columns:1fr; gap:10px; text-align:center; }
  .fighter, .fighter.right{ flex-direction:column; text-align:center; }
  .fighter .nm{ font-size:11px; }
}
@media (prefers-reduced-motion: reduce){
  .vs-mark, .blink, .result .headline{ animation:none !important; }
}
.crest{
  display:inline-grid; place-items:center; flex:none;
  width:26px; height:26px; background:var(--surface-3);
  box-shadow:inset 0 0 0 1px var(--line-2);
}
.crest svg{ display:block; }
.lrow[data-top="1"] .crest{ box-shadow:inset 0 0 0 1px rgba(34,211,238,.45); background:rgba(34,211,238,.07); }
.pname .crest{ margin-right:2px; }

/* ------------------------------------------------------- category browser */
.cat-toolbar{ display:flex; gap:10px; margin:0 0 16px; align-items:center; }
.cat-toolbar input{
  flex:1; background:var(--surface); border:1px solid var(--line-2); border-radius:var(--r-sm);
  color:var(--ink); font:14px/1.4 var(--sans); padding:11px 14px;
}
.cat-toolbar input:focus{ outline:none; border-color:var(--brand); box-shadow:0 0 0 3px var(--brand-glow); }

.cat-group{ margin-bottom:22px; }
.cat-group h3{
  font-family:var(--px); font-size:8.5px; letter-spacing:.02em; color:var(--ink-3);
  margin:0 0 10px; display:flex; align-items:center; gap:11px; text-transform:uppercase;
}
.cat-group h3::after{ content:''; flex:1; height:1px; background:var(--line); }
.cat-cards{ display:grid; grid-template-columns:repeat(auto-fill,minmax(258px,1fr)); gap:9px; }
.cat-card{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
  padding:13px 15px; cursor:pointer; text-align:left; color:inherit; font:inherit;
  transition:border-color .15s, background .15s;
}
.cat-card:hover{ border-color:var(--line-2); background:var(--surface-2); }
.cat-card.active{ border-color:var(--brand); background:var(--brand-glow); }
.cat-card .cn{ font-weight:600; font-size:14px; margin-bottom:5px; }
.cat-card .cd{ color:var(--ink-3); font-size:12px; line-height:1.45; }
.cat-card .cs{
  display:flex; gap:8px; margin-top:9px; flex-wrap:wrap;
  font-family:var(--px); font-size:7px; letter-spacing:.02em; color:var(--ink-3);
}
.cat-card .cs b{ color:var(--ink-2); }
.cat-card .open{ color:var(--brand); }
.cat-card .vacant{ color:var(--warning); }

.empty-ladder{
  text-align:center; padding:38px 24px; background:var(--surface);
  border:1px dashed var(--line-2); border-radius:0 0 var(--r) var(--r); border-top:0;
}
.empty-ladder .px{ font-size:13px; color:var(--brand); display:block; margin-bottom:10px; }
.empty-ladder p{ color:var(--ink-2); margin:0 auto; max-width:52ch; font-size:13.5px; }

/* An unchallenged #1 is a much weaker claim than a defended one. Say so. */
.uncontested{
  font-family:var(--px); font-size:7px; letter-spacing:.02em; padding:5px 8px;
  color:var(--warning); background:rgba(250,178,25,.09); --pb:rgba(250,178,25,.4);
}

/* ------------------------------------------------------------- autofill -- */
.autofill{
  display:flex; gap:9px; align-items:flex-end; margin-bottom:6px;
}
.autofill .field{ flex:1; margin-bottom:0; }
.draft-note{
  margin:12px 0 18px; padding:13px 15px; border-radius:var(--r); font-size:13px;
  background:var(--brand-glow); border:1px solid rgba(34,211,238,.28); color:#a5e8f5;
}
.draft-note b{ color:#d6f6ff; }
.spin{ display:inline-block; animation:spin 1s steps(8) infinite; }
@keyframes spin{ to{ transform:rotate(360deg); } }

/* --------------------------------------------------------- trial progress */
.stages{ display:grid; gap:2px; margin-bottom:18px; }
.stage{ display:grid; grid-template-columns:30px 1fr; gap:13px; align-items:start; padding:11px 0; }
.stage-dot{
  width:24px; height:24px; display:grid; place-items:center;
  font:600 11px/1 var(--mono); border-radius:50%;
  background:var(--surface-3); color:var(--ink-3); box-shadow:inset 0 0 0 1px var(--line-2);
}
.stage.done .stage-dot{ background:rgba(12,163,12,.16); color:var(--good); box-shadow:inset 0 0 0 1px rgba(12,163,12,.4); }
.stage.now  .stage-dot{ background:var(--brand-glow); color:var(--brand); box-shadow:inset 0 0 0 1px rgba(34,211,238,.45); }
.stage-l{ font-weight:600; font-size:14px; }
.stage.done .stage-l, .stage.now .stage-l{ color:var(--ink); }
.stage:not(.done):not(.now) .stage-l{ color:var(--ink-3); }
.stage-d{ color:var(--ink-3); font-size:12.5px; margin-top:2px; }

/* ------------------------------------------------------------- my stuff -- */
.needs-you{ margin-top:18px; padding-top:16px; border-top:1px solid var(--line); }
.mine-row{
  display:flex; justify-content:space-between; align-items:center; gap:10px; width:100%;
  background:var(--surface-2); border:1px solid var(--line); border-radius:var(--r-sm);
  color:var(--ink); font:inherit; font-size:12.5px; text-align:left;
  padding:9px 11px; margin-bottom:6px; cursor:pointer;
}
.mine-row:hover{ border-color:var(--line-2); }
.mine-row.alert{ border-color:rgba(208,59,59,.45); background:rgba(208,59,59,.08); }
.mine-meta{ color:var(--ink-3); font:500 10.5px var(--mono); white-space:nowrap; }

/* ============================================================ server-rendered
   The pages are delivered complete in the HTML for crawlers and first paint;
   app.js enhances the same markup rather than replacing it wholesale.
   ========================================================================== */
.nav-link{
  color:var(--ink-3); text-decoration:none; font-size:13.5px; font-weight:500;
  padding:7px 14px; border-radius:var(--r-sm); transition:color .15s, background .15s;
}
.nav-link:hover{ color:var(--ink); background:var(--surface-2); }
.nav-link.active{ color:var(--brand); background:var(--brand-glow); }

main h1{ font-size:clamp(26px,3.4vw,38px); line-height:1.12; letter-spacing:-.025em; margin:0 0 14px; }
main h2{ font-size:20px; letter-spacing:-.01em; margin:34px 0 12px; }
main h3{ font-size:16px; margin:22px 0 8px; }
main p{ color:var(--ink-2); max-width:74ch; }
main a{ color:var(--brand); }
main ul, main ol, main dl{ color:var(--ink-2); max-width:74ch; }
main dt{ color:var(--ink); font-weight:600; margin-top:12px; }
main dd{ margin:4px 0 0; }

.crumbs{ font:500 12px/1 var(--mono); color:var(--ink-3); margin-bottom:16px; }
.crumbs a{ color:var(--ink-2); text-decoration:none; display:inline-block; padding:6px 0; }
.crumbs a:hover{ color:var(--brand); }

.ladder-table, .axis-table{ width:100%; border-collapse:collapse; margin:16px 0; }
.ladder-table caption, .axis-table caption{
  text-align:left; font:600 10.5px/1 var(--mono); letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink-3); padding-bottom:10px;
}
.ladder-table td, .axis-table td, .axis-table th[scope="row"]{
  padding:13px 10px; border-bottom:1px solid var(--line); vertical-align:top; font-size:14px;
}
.ladder-table td:first-child{ font:700 17px var(--px); color:var(--brand); width:52px; }
.ladder-table a{ text-decoration:none; }
.row-tagline{ display:block; color:var(--ink-3); font-size:13px; margin-top:3px; }

.cat-group{ margin:24px 0; }
.cat-list{ list-style:none; padding:0; display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:10px; }
.cat-list li{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:14px 16px;
}
.cat-list a{ text-decoration:none; color:var(--ink); }
.cat-list a:hover strong{ color:var(--brand); }
.cat-meta{ display:block; font:500 10px/1 var(--mono); letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3); margin:6px 0; }
.cat-desc{ display:block; color:var(--ink-3); font-size:12.5px; }

.trial-list{ list-style:none; padding:0; }
.trial-list li{ padding:12px 0; border-bottom:1px solid var(--line); }
.trial-list a{ text-decoration:none; font-weight:600; }
.trial-outcome{
  display:inline-block; margin-left:10px; font:600 9px/1 var(--px); letter-spacing:.06em;
  text-transform:uppercase; color:var(--ink-3);
}
.facts{ list-style:none; padding:0; display:flex; gap:22px; flex-wrap:wrap; }
.facts strong{ color:var(--ink); font:700 20px var(--px); display:block; }
.juror-opinion, .juror-bio{ border-left:2px solid var(--line-2); padding-left:16px; margin:18px 0; }
.scores{ font:500 12px var(--mono); color:var(--ink-3); }
.provenance{ color:var(--ink-3); font-size:12.5px; margin-top:30px; padding-top:16px; border-top:1px solid var(--line); }
.empty-ladder{ padding:30px; border:1px dashed var(--line-2); border-radius:var(--r); }

.site-footer{ border-top:1px solid var(--line); margin-top:60px; padding:28px 0 50px; }
.site-footer p{ color:var(--ink-3); font-size:13px; max-width:74ch; }
.site-footer nav{ margin-top:12px; font-size:13px; color:var(--ink-3); }
.site-footer a{ color:var(--ink-2); text-decoration:none; display:inline-block; padding:5px 0; }
.site-footer a:hover{ color:var(--brand); }
.table-twin{ margin:14px 0; }
.table-twin summary{
  cursor:pointer; color:var(--ink-3); font:500 11.5px/1 var(--mono);
  letter-spacing:.06em; text-transform:uppercase; padding:8px 0;
}
.table-twin summary:hover{ color:var(--ink-2); }

/* ------------------------------------------- server-rendered page chrome -- */
/* The ladder row and category card are anchors now so a crawler can follow
   them; they must not look like links. */
.lrow, .cat-card, .trial{ text-decoration:none; color:inherit; display:grid; }
.trial{ display:block; }
.cat-card{ display:block; }
main a{ color:var(--brand); }
main .lrow a, main .cat-card a, main .trial a{ color:inherit; }

.page-title{ font-size:clamp(26px,3.4vw,38px); line-height:1.1; letter-spacing:-.025em; margin:0 0 12px; }
.section-title, .sec-head{
  font-family:var(--px); font-size:9px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-3); margin:36px 0 14px; display:flex; align-items:center; gap:12px;
}
.section-title::after, .sec-head::after{ content:''; flex:1; height:1px; background:var(--line); }
main h1{ letter-spacing:-.025em; }
main .lede{ color:var(--ink-2); max-width:74ch; }
main p{ color:var(--ink-2); max-width:78ch; }

.crumbs{ font:500 11px/1 var(--mono); color:var(--ink-3); margin-bottom:18px; letter-spacing:.04em; }
.crumbs a{ color:var(--ink-2); text-decoration:none; display:inline-block; padding:6px 0; }
.crumbs a:hover{ color:var(--brand); }

/* A visible H1 is redundant beside the VS plate, but the heading must exist. */
.visually-clear{
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap;
}

.product-head{ display:flex; align-items:center; gap:16px; margin-bottom:22px; }
.product-head .rank-badge{ margin-left:auto; text-align:center; }
.product-head .rank-badge .rank{ font:700 26px var(--px); color:var(--brand); display:block; }
.product-head .rank-badge small{ font:500 9px var(--mono); color:var(--ink-3); letter-spacing:.08em; text-transform:uppercase; }
.crest.big{ width:46px; height:46px; }

.axis-table{ width:100%; border-collapse:collapse; margin:14px 0; }
.axis-table caption{
  text-align:left; font:600 10px/1 var(--mono); letter-spacing:.11em; text-transform:uppercase;
  color:var(--ink-3); padding-bottom:10px;
}
.axis-table th[scope="row"]{ text-align:left; font-weight:500; color:var(--ink-2); font-size:13.5px; }
.axis-dot{ display:inline-block; width:8px; height:8px; border-radius:2px; margin-right:8px; vertical-align:middle; }
.axis-q{
  display:block; margin-left:16px; margin-top:2px; font:400 11.5px/1.4 var(--sans);
  color:var(--ink-3); text-transform:none; letter-spacing:0; font-weight:400;
}

/* --- the rubric key: six criteria, in the buyer's words ------------------- */
.rubric-key{
  border:1px solid var(--line); border-radius:12px; background:var(--surface-2);
  margin:16px 0 22px; overflow:hidden;
}
.rubric-key > summary{
  cursor:pointer; list-style:none; padding:13px 16px; display:flex; align-items:center;
  justify-content:space-between; gap:12px; user-select:none;
}
.rubric-key > summary::-webkit-details-marker{ display:none; }
.rubric-key > summary:hover{ background:var(--surface-3); }
.rubric-key > summary .px{ font:600 10px/1 var(--px); letter-spacing:.08em; color:var(--ink-2); }
.rk-toggle{ font:500 10px var(--mono); letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3); }
.rk-grid{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(232px, 1fr));
  gap:2px; background:var(--line); border-top:1px solid var(--line);
}
.rk-item{ background:var(--surface); padding:14px 16px; }
.rk-head{
  font:600 10px/1 var(--px); letter-spacing:.06em; color:var(--ink);
  display:flex; align-items:center;
}
.rk-q{ font:500 13.5px/1.4 var(--sans); color:var(--ink-2); margin:8px 0 6px; }
.rk-b{ font-size:12.5px; line-height:1.55; color:var(--ink-3); margin:0; }

/* --- the full rubric on /jury: buyer framing, juror wording underneath ---- */
.rubric-full{ display:grid; grid-template-columns:repeat(auto-fit, minmax(280px, 1fr)); gap:14px; margin-top:16px; }
.rf-item{ border:1px solid var(--line); border-radius:12px; background:var(--surface); padding:16px 18px; }
.rf-head{
  font:600 11px/1 var(--px); letter-spacing:.06em; color:var(--ink); margin:0;
  display:flex; align-items:center;
}
.rf-q{ font:500 14.5px/1.4 var(--sans); color:var(--ink); margin:10px 0 8px; }
.rf-b{ font-size:13px; line-height:1.6; color:var(--ink-2); margin:0 0 12px; }
.rf-prompt > summary{
  cursor:pointer; font:500 10px var(--mono); letter-spacing:.08em; text-transform:uppercase;
  color:var(--ink-3); list-style:none;
  /* A bare line of 10px text is an 11px-tall tap target. The padding is the
     hit area, not decoration. */
  padding:9px 0; margin:-9px 0;
}
.rf-prompt > summary::-webkit-details-marker{ display:none; }
.rf-prompt > summary::before{ content:'▸ '; }
.rf-prompt[open] > summary::before{ content:'▾ '; }
.rf-prompt > summary:hover{ color:var(--brand); }
.rf-prompt p{
  font-size:12.5px; line-height:1.6; color:var(--ink-3); margin:10px 0 0;
  padding-left:12px; border-left:2px solid var(--line);
}
.provenance{ color:var(--ink-3); font-size:12px; margin-top:26px; padding-top:14px; border-top:1px solid var(--line); font-family:var(--mono); }
.provenance code{ color:var(--ink-2); }

.site-footer{ border-top:1px solid var(--line); margin-top:70px; padding:28px 0 50px; }
.site-footer p{ color:var(--ink-3); font-size:13px; max-width:74ch; }
.site-footer nav{ margin-top:12px; font-size:13px; color:var(--ink-3); }
.site-footer a{ color:var(--ink-2); text-decoration:none; display:inline-block; padding:5px 0; }
.site-footer a:hover{ color:var(--brand); }

.table-twin{ margin:14px 0; }
.table-twin summary{
  cursor:pointer; color:var(--ink-3); font:500 11px/1 var(--mono);
  letter-spacing:.08em; text-transform:uppercase; padding:9px 0;
}
.table-twin summary:hover{ color:var(--ink-2); }

/* ============================================================== COMPARISON
   Series colours are the validated categorical slots 1–4; four is the cap,
   and direct labels are mandatory at that count.
   ========================================================================== */
:root{
  --cmp-1:#3987e5; --cmp-2:#d95926; --cmp-3:#199e70; --cmp-4:#c98500;
}

.vs-inline{ color:var(--ink-3); font-family:var(--px); font-size:16px; margin:0 6px; }

.cmp-grid{ display:grid; grid-template-columns:repeat(var(--cols,2),1fr); gap:12px; margin:16px 0; }

.cmp-card{
  position:relative; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-lg); padding:18px 18px 16px; text-decoration:none; color:inherit;
  display:block; overflow:hidden; transition:border-color .16s, transform .16s;
}
.cmp-card:hover{ border-color:var(--line-2); transform:translateY(-2px); }
.cmp-swatch{ position:absolute; inset:0 0 auto 0; height:3px; background:var(--accent); }
.cmp-card .crest{ margin-bottom:10px; }
.cmp-name{ font-weight:600; font-size:16px; }
.cmp-rank{ font:600 10px/1 var(--px); color:var(--accent); margin:6px 0 8px; letter-spacing:.04em; }
.cmp-tag{ color:var(--ink-2); font-size:13px; min-height:34px; }
.cmp-record{ font:500 11px var(--mono); color:var(--ink-3); margin-top:10px; }

.cmp-cell{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
  padding:15px 16px; border-top:2px solid var(--accent);
}
.cmp-cell-h{ font:600 10px/1 var(--px); letter-spacing:.08em; color:var(--accent); margin-bottom:10px; }
.cmp-price{ font-size:14px; color:var(--ink); }
.cmp-cell ul.clean{ margin:0; padding-left:16px; }
.cmp-cell li{ font-size:13px; color:var(--ink-2); margin:5px 0; }
.cmp-missing{ color:var(--ink-3); font-style:italic; }
.cmp-none-declared{
  display:flex; gap:8px; align-items:flex-start; color:var(--warning); font-size:12.5px;
}
.cmp-sub{ font:500 11px var(--mono); color:var(--ink-3); }
.cmp-note{ color:var(--ink-3); font-size:12px; max-width:74ch; margin-top:8px; }

/* --- the panel audit ------------------------------------------------------ */
.panel-proof{ margin-top:26px; padding-top:16px; border-top:1px solid var(--line); }
.panel-proof > summary{
  cursor:pointer; font:500 12px var(--mono); color:var(--ink-2); list-style:none;
}
.panel-proof > summary::-webkit-details-marker{ display:none; }
.panel-proof > summary::before{ content:'▸ '; }
.panel-proof[open] > summary::before{ content:'▾ '; }
.panel-proof > summary:hover{ color:var(--brand); }
.panel-proof p{ font-size:12.5px; line-height:1.6; color:var(--ink-3); margin:12px 0 0; max-width:74ch; }
.proof-vals{ display:grid; grid-template-columns:auto 1fr; gap:8px 16px; margin:14px 0 0; align-items:baseline; }
.proof-vals dt{ font:500 11px var(--mono); color:var(--ink-3); white-space:nowrap; }
.proof-vals dt span{ display:block; font-size:10px; opacity:.7; }
.proof-vals dd{ margin:0; min-width:0; }
.proof-vals code{ font:500 11px var(--mono); color:var(--ink-2); word-break:break-all; }
.proof-cmd{
  margin:14px 0 0; padding:12px 14px; background:var(--plane); border:1px solid var(--line);
  border-radius:var(--r-sm); overflow-x:auto;
}
.proof-cmd code{ font:500 11.5px/1.6 var(--mono); color:var(--ink-2); white-space:pre; }
.proof-note{ border-left:2px solid var(--line-2); padding-left:12px; }

/* --- the homepage's stack of ladders ------------------------------------- */
.home-ladder + .home-ladder{ margin-top:30px; }
.ladder-more{
  display:inline-block; margin-top:11px; text-decoration:none;
  font:500 12.5px var(--mono); color:var(--ink-2);
}
.ladder-more:hover{ color:var(--brand); }
.ladder-more-note{ margin-top:20px; color:var(--ink-3); font-size:13px; }

/* A button that reads as a link — an action inside a sentence. */
.linkish{
  background:none; border:0; padding:0; font:inherit; color:var(--brand);
  cursor:pointer; text-decoration:underline; text-underline-offset:2px;
}
.linkish:hover{ filter:brightness(1.15); }

/* --- the link out to the product itself ---------------------------------- */
.product-site{
  display:inline-flex; align-items:center; gap:7px; text-decoration:none;
  font:500 13px var(--mono); color:var(--ink-2);
  padding:6px 12px; border:1px solid var(--line-2); border-radius:999px;
  background:var(--surface); transition:border-color .16s, color .16s;
}
.product-site:hover{ color:var(--brand); border-color:var(--brand); }
.product-site svg{ flex:none; opacity:.75; }
.product-site:hover svg{ opacity:1; }

/* --- owner controls on your own product ---------------------------------- */
.owner-bar{
  display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
  margin:26px 0 6px; padding:14px 18px;
  border:1px solid var(--line-2); border-radius:var(--r); background:var(--surface);
}
.owner-l{ font:600 10px/1 var(--px); letter-spacing:.06em; color:var(--brand); }
.owner-d{ margin-top:7px; color:var(--ink-3); font-size:13px; }
.owner-note{
  margin-top:14px; padding:13px 16px; border:1px solid var(--line); border-radius:10px;
  background:var(--surface-2); color:var(--ink-3); font-size:13px; line-height:1.6; max-width:74ch;
}
.lbl-note{ color:var(--ink-3); text-transform:none; letter-spacing:0; }

.defence-note{
  margin-top:16px; padding:13px 15px; border:1px solid var(--line); border-radius:10px;
  background:var(--surface-2); color:var(--ink-3); font-size:13px; line-height:1.6; max-width:74ch;
}

.cmp-legend{ display:flex; flex-wrap:wrap; gap:16px; margin:12px 0 4px; }
.cmp-legend span{ display:inline-flex; align-items:center; gap:8px; font-size:13px; color:var(--ink-2); }
.cmp-legend i{ width:10px; height:10px; border-radius:2px; flex:none; }
.cmp-legend small{ color:var(--ink-3); font:500 11px var(--mono); }

.cmp-table{ width:100%; border-collapse:collapse; margin:14px 0; }
.cmp-table caption{
  text-align:left; font:600 10px/1 var(--mono); letter-spacing:.11em; text-transform:uppercase;
  color:var(--ink-3); padding-bottom:10px;
}
.cmp-table th[scope="col"]{ font:600 10px/1 var(--px); letter-spacing:.05em; padding:10px; }
.cmp-table th[scope="row"]{
  text-align:left; font-weight:500; color:var(--ink-2); font-size:13.5px; padding:11px 10px;
  border-bottom:1px solid var(--line);
}
.col-dot{
  display:inline-block; width:8px; height:8px; border-radius:2px;
  margin-right:7px; vertical-align:middle;
}
.cmp-table th[scope="col"]{ white-space:nowrap; }
.cmp-cell-h{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cmp-table td{ padding:11px 10px; border-bottom:1px solid var(--line); font-size:13.5px; }
.cmp-table td.yes, .cmp-table td.no{ text-align:center; }
/* The criterion column carries a short question and was taking the whole
   remainder, stranding the numbers in the middle of the table. */
.axis-compare th[scope="row"]{ width:34%; }
.axis-compare td.num{ width:14%; }
.axis-compare tbody tr:hover{ background:var(--surface-2); }

.h2h{
  display:block; text-decoration:none; color:inherit;
  background:linear-gradient(180deg, rgba(12,163,12,.07), transparent);
  border:1px solid rgba(12,163,12,.28); border-radius:var(--r); padding:16px 18px; margin:12px 0;
  transition:border-color .16s;
}
.h2h:hover{ border-color:rgba(12,163,12,.5); }
.h2h-result{ display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; }
.h2h-result .px{ font-size:13px; color:var(--good); }
.h2h-margin{ font:500 11px var(--mono); color:var(--ink-3); }
.h2h-reason{ color:var(--ink-2); font-size:13.5px; margin-top:8px; }
.h2h-link{ color:var(--brand); font-size:12.5px; margin-top:10px; }

.tier-bar{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.tier-bar b{ font:600 13px var(--mono); color:var(--ink); margin-right:6px; }

.compare-more{ margin:26px 0 10px; }

/* Grouped bars: 4px rounded ends anchored to the baseline, 2px surface gap. */
.cmp-bars{ width:100%; display:block; overflow:visible; }
.cmp-bars .lbl{ font:500 12px var(--mono); fill:var(--ink-2); }
.cmp-bars .lbl-q{ font:400 10px var(--sans); fill:var(--ink-3); }
.cmp-bars .val{ font:600 10.5px var(--mono); fill:var(--ink-2); }
.cmp-bars .grid-l{ stroke:var(--grid); stroke-width:1; }
.cmp-bars .axis-l{ stroke:var(--axis); stroke-width:1; }
.cmp-bars .tick{ font:500 10px var(--mono); fill:var(--ink-3); }

/* Picker on /compare */
.picker{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:18px 20px; margin-bottom:18px; }
.picker-row{ display:flex; gap:12px; flex-wrap:wrap; align-items:flex-end; }
.picker select{
  background:var(--plane); border:1px solid var(--line-2); border-radius:var(--r-sm);
  color:var(--ink); font:14px var(--sans); padding:10px 12px; min-width:230px;
}
.pick-list{ display:flex; flex-wrap:wrap; gap:8px; margin-top:14px; }
.pick-chip{
  display:inline-flex; align-items:center; gap:8px; cursor:pointer;
  background:var(--surface-2); border:1px solid var(--line-2); border-radius:999px;
  padding:7px 13px; font-size:13px; color:var(--ink-2);
}
.pick-chip:hover{ border-color:var(--ink-3); color:var(--ink); }
.pick-chip.on{ border-color:var(--brand); color:var(--brand); background:var(--brand-glow); }
.pick-chip input{ display:none; }

/* Compare bar on the ladder */
.compare-bar{
  position:sticky; bottom:0; z-index:30; margin-top:14px;
  background:rgba(14,20,28,.94); backdrop-filter:blur(12px);
  border:1px solid var(--line-2); border-radius:var(--r) var(--r) 0 0;
  padding:13px 18px; display:flex; align-items:center; gap:14px; flex-wrap:wrap;
}
.compare-bar .lbl{ font:600 9px/1 var(--px); letter-spacing:.1em; color:var(--ink-3); }
.compare-bar .picked{ display:flex; gap:8px; flex-wrap:wrap; }
.compare-bar .picked span{ font-size:13px; color:var(--ink); }
.compare-bar .btn{ margin-left:auto; }
/* `display:flex` above beats the UA rule for [hidden], so the bar sat on every
   ladder as an empty bordered strip until something was ticked. */
.compare-bar[hidden]{ display:none; }
.lrow .cmp-check{
  position:absolute; left:8px; top:50%; transform:translateY(-50%);
  width:18px; height:18px; accent-color:var(--brand); cursor:pointer; z-index:2;
}
.lrow{ position:relative; }
.ladder.selectable .lrow{ padding-left:34px; }

@media (max-width:820px){
  .cmp-grid{ grid-template-columns:1fr; }
  .cmp-table{ display:block; overflow-x:auto; }
  /* Scroll the chart rather than shrinking it: the axis labels now carry the
     question they answer, and scaling that to 4px would defeat the point. The
     table below repeats every number, so scrolling costs nothing. */
  #cmp-chart{ overflow-x:auto; }
  .cmp-bars{ min-width:760px; }
}
.cmp-neighbours{ display:flex; align-items:center; gap:9px; flex-wrap:wrap; margin:18px 0 4px; }
.cmp-neighbours .lbl{ font:600 9px/1 var(--px); letter-spacing:.1em; color:var(--ink-3); }
.cmp-neighbours .pick-chip{ text-decoration:none; }

/* --- touch sizing ----------------------------------------------------------
   A pointer can hit a 28px button; a thumb cannot. Everything actionable gets
   a 44px minimum on touch — the accessibility floor, and roughly the contact
   patch of a fingertip. Scoped to coarse pointers, so the desktop layout,
   where these sizes are deliberate, is untouched. */
@media (pointer:coarse){
  .btn{ min-height:44px; }
  .btn.small{ min-height:40px; }
  .nav-link{ min-height:40px; display:inline-flex; align-items:center; }
  .nav-account{ min-height:40px; }
  .product-site{ min-height:40px; }
  .table-twin summary, .rubric-key > summary, .rf-prompt > summary, .panel-proof > summary{
    min-height:44px; display:flex; align-items:center;
  }
  .brand{ padding:8px 0; }
  .mine-row{ min-height:44px; }
  /* Inline links in running text: the padding is the hit area. */
  .ladder-more{ padding:12px 0; }
  .site-footer nav a{ padding:11px 0; }
  .crumbs a{ padding:11px 0; }
  .site-footer nav, .crumbs{ line-height:1.1; }
  /* Specific enough to beat `.field input` (0,1,1); a bare `input` selector
     loses to it and the rule silently does nothing. */
  .field input, .field select, .field textarea, .picker select, select, input, textarea{
    min-height:44px;
    /* Safari zooms the whole page in when a focused field is under 16px. */
    font-size:16px;
  }
  .field textarea{ min-height:110px; }
}

/* ------------------------------------------------------------------ legal -- */
.legal{ padding-top:36px; padding-bottom:64px; }
.legal-head{ max-width:74ch; margin:0 0 26px; }
.legal-head .lede{ margin-bottom:14px; }
.legal-date{
  margin:0; font:500 11px/1 var(--mono); letter-spacing:.08em;
  text-transform:uppercase; color:var(--ink-3);
}

.legal-layout{ display:grid; grid-template-columns:220px minmax(0,1fr); gap:44px; align-items:start; }
.legal-toc-inner{ position:sticky; top:88px; }
.legal-toc-h{
  margin:0 0 10px; font:500 10.5px/1 var(--mono); letter-spacing:.08em;
  text-transform:uppercase; color:var(--ink-3);
}
.legal-toc-h2{ margin-top:24px; }
/* No list markers: the terms headings are numbered in their own text, and a
   decimal marker beside them rendered every entry as "1. 1. Agreement". */
.legal-toc ol, .legal-toc ul{ margin:0; padding:0; list-style:none; }
.legal-toc li{ margin:0 0 7px; }
.legal-toc a{
  color:var(--ink-2); text-decoration:none; font-size:13px; line-height:1.4;
  border-bottom:1px solid transparent;
}
.legal-toc a:hover{ color:var(--brand); border-bottom-color:var(--brand-2); }

/* The column is sized for tables; prose keeps its own measure inside it, so a
   four-column table is not squeezed into the width of a comfortable line. */
.legal-doc{ max-width:90ch; min-width:0; }
.legal-doc p, .legal-doc ul.clean{ max-width:76ch; }
.legal-doc section{ margin:0 0 34px; scroll-margin-top:88px; }
.legal-doc h2{ margin:0 0 12px; font-size:17px; letter-spacing:-.012em; }
.legal-anchor{ color:var(--ink); text-decoration:none; }
.legal-anchor:hover{ color:var(--brand); }
.legal-doc p{ margin:0 0 12px; color:var(--ink-2); font-size:14px; line-height:1.65; }
.legal-doc strong{ color:var(--ink); }
.legal-doc a{ color:var(--brand); }
.legal-doc code{
  font:600 12.5px var(--mono); color:var(--brand);
  background:var(--brand-glow); padding:2px 6px; border-radius:4px;
}
.legal-doc ul.clean{ margin:0 0 12px; }
.legal-doc ul.clean li{ line-height:1.6; }

.legal-table{ margin:0 0 14px; overflow-x:auto; }
.legal-table table{ width:100%; border-collapse:collapse; font-size:13px; }
.legal-table th{
  text-align:left; padding:9px 12px; border-bottom:1px solid var(--line-2);
  font:500 10.5px/1.4 var(--mono); letter-spacing:.08em;
  text-transform:uppercase; color:var(--ink-3); white-space:nowrap;
}
.legal-table td{
  padding:11px 12px; border-bottom:1px solid var(--line);
  color:var(--ink-2); vertical-align:top; line-height:1.55;
}
.legal-table tr:last-child td{ border-bottom:0; }
.legal-table td:first-child{ color:var(--ink); font-weight:500; }
.legal-table td:first-child{ min-width:8.5em; }

.footer-legal{ margin-top:10px; }

@media (max-width:900px){
  /* Not `1fr`: that is minmax(auto, 1fr), whose auto floor is min-content, so
     the widest unbreakable cell in a table pushed the whole page sideways. */
  .legal-layout{ grid-template-columns:minmax(0, 1fr); gap:26px; }
  .legal-toc-inner{ position:static; }
  .legal-toc{
    border:1px solid var(--line); border-radius:var(--r);
    padding:16px 18px; background:var(--surface);
  }
  .legal-toc-h2{ margin-top:18px; }
}

/* The three steps in the "ask for a category" sheet. A queue is only reassuring
   if you can see how long it is and what comes out of the other end. */
.sheet-steps{
  margin:0 0 20px; padding:0 0 0 1.35em; list-style:decimal;
  color:var(--ink-2); font-size:13px; line-height:1.55;
}
.sheet-steps li{ margin:0 0 7px; padding-left:2px; }
.sheet-steps li::marker{ color:var(--ink-3); font:500 11px var(--mono); }