/* Demand-test design system. One file for every page. No build step.
   Tokens, light and dark via prefers-color-scheme, one font stack, 44 px targets, visible focus. */
:root{
  --font:"Inter",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --fs-0:0.875rem;--fs-1:1rem;--fs-2:1.125rem;--fs-3:1.375rem;--fs-4:1.75rem;--fs-5:2.25rem;
  --sp-1:4px;--sp-2:8px;--sp-3:12px;--sp-4:16px;--sp-5:24px;--sp-6:32px;--sp-7:48px;
  --r-1:8px;--r-2:12px;--r-3:18px;
  --maxw:1040px;
  --bg:#f5f6f8;--surface:#ffffff;--surface-2:#eef0f4;--border:#d9dde3;
  --text:#14171c;--muted:#5a6270;--faint:#8a919c;
  --accent:#2f5df0;--accent-ink:#ffffff;--accent-soft:#e4ebff;--accent-text:#244acc;
  --ok:#1b7f3a;--ok-soft:#dff5e6;--warn:#9a6200;--warn-soft:#fff2cc;--bad:#c62828;--bad-soft:#fde7e7;
  --shadow:0 1px 2px rgba(16,20,28,.06),0 8px 24px -12px rgba(16,20,28,.18);
  --focus:0 0 0 3px var(--bg),0 0 0 6px var(--accent);
  color-scheme:light dark;
}
@media (prefers-color-scheme:dark){:root{
  --bg:#0f1218;--surface:#171b23;--surface-2:#1f2430;--border:#2c3340;
  --text:#eef1f5;--muted:#a3abb8;--faint:#6f7886;
  --accent:#6b8cff;--accent-ink:#0b1020;--accent-soft:#1d2744;--accent-text:#9fb4ff;
  --ok:#5fd38a;--ok-soft:#133321;--warn:#f0c04a;--warn-soft:#3a2d08;--bad:#ff7b7b;--bad-soft:#3b1515;
  --shadow:0 1px 2px rgba(0,0,0,.4),0 10px 28px -14px rgba(0,0,0,.7);
}}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font:var(--fs-1)/1.55 var(--font);background:var(--bg);color:var(--text);min-height:100dvh}
h1,h2,h3{margin:0;line-height:1.2;letter-spacing:-.01em}
h1{font-size:var(--fs-5);font-weight:800}
h2{font-size:var(--fs-3);font-weight:700}
h3{font-size:var(--fs-2);font-weight:650}
p{margin:0}
a{color:var(--accent-text);text-decoration-thickness:1px;text-underline-offset:2px}
:focus-visible{outline:none;box-shadow:var(--focus);border-radius:var(--r-1)}
img,svg,canvas,video{max-width:100%;display:block}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--sp-4)}
.stack>*+*{margin-top:var(--sp-4)}
/* header and hero */
.top{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);padding:var(--sp-4) 0}
.brand{display:flex;align-items:center;gap:var(--sp-2);font-weight:800;font-size:var(--fs-2);color:var(--text);text-decoration:none}
.brand .logo{width:32px;height:32px;border-radius:9px;background:var(--accent);color:var(--accent-ink);display:grid;place-items:center;font-size:18px;font-weight:900;flex:none}
.hero{padding:var(--sp-5) 0 var(--sp-5)}
.hero h1{max-width:24ch;text-wrap:balance}
.hero .tagline{margin-top:var(--sp-3);font-size:var(--fs-2);color:var(--muted);max-width:60ch;text-wrap:pretty}
.hero .cta{margin-top:var(--sp-5);display:flex;flex-wrap:wrap;gap:var(--sp-3);align-items:center}
.pill{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;background:var(--accent-soft);color:var(--accent-text);font-size:var(--fs-0);font-weight:600}
/* cards and sections */
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-3);padding:var(--sp-5);box-shadow:var(--shadow)}
.card h2{margin-bottom:var(--sp-3)}
.card+.card{margin-top:var(--sp-4)}
.grid{display:grid;gap:var(--sp-4);grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.cols-2{display:grid;gap:var(--sp-4);align-items:start}
@media (min-width:900px){.cols-2{grid-template-columns:1fr 1fr}}
.hero-grid{display:grid;gap:var(--sp-5);align-items:center}
@media (min-width:900px){.hero-grid{grid-template-columns:1.1fr .9fr}}
.btn-row{display:grid;gap:var(--sp-3);grid-template-columns:repeat(2,1fr)}
@media (min-width:600px){.btn-row{display:flex;flex-wrap:wrap}}
.scrollhint{position:relative}
.scrollhint::after{content:"";position:absolute;top:0;right:0;bottom:0;width:28px;pointer-events:none;background:linear-gradient(to right,transparent,var(--surface))}
.muted{color:var(--muted)}
.small{font-size:var(--fs-0)}
.faint{color:var(--muted)}
/* controls */
button,.btn,input,select,textarea{font:inherit;color:inherit}
.btn,button{min-height:44px;min-width:44px;padding:10px 18px;border:1px solid var(--border);border-radius:var(--r-2);background:var(--surface);color:var(--text);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:8px;font-weight:600;text-decoration:none;transition:background .15s,transform .05s}
.btn:hover,button:hover{background:var(--surface-2)}
.btn:active,button:active{transform:translateY(1px)}
.btn-primary,button.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.btn-primary:hover,button.primary:hover{filter:brightness(1.08);background:var(--accent)}
.btn-danger,button.danger{color:var(--bad);border-color:var(--border)}
.btn-lg{min-height:52px;padding:12px 24px;font-size:var(--fs-2)}
.btn-ghost,button.ghost{background:transparent;border-color:transparent}
button:disabled,.btn[aria-disabled=true]{opacity:.6;cursor:not-allowed;background:var(--surface-2);color:var(--muted)}
button.primary:disabled{background:var(--surface-2);border-color:var(--border);color:var(--muted)}
input,select,textarea{min-height:44px;padding:10px 12px;border:1px solid var(--border);border-radius:var(--r-2);background:var(--surface);width:100%}
input:focus-visible,select:focus-visible,textarea:focus-visible{border-color:var(--accent)}
label{display:block;font-weight:600;font-size:var(--fs-0);margin-bottom:6px;color:var(--muted)}
.field{display:flex;flex-direction:column}
.row{display:flex;flex-wrap:wrap;gap:var(--sp-3);align-items:end}
.row>.grow{flex:1 1 180px}
input[type=checkbox],input[type=radio]{width:22px;height:22px;min-height:0;accent-color:var(--accent);margin:0}
.check{display:flex;align-items:center;gap:10px;min-height:44px;font-weight:500;color:var(--text);font-size:var(--fs-1);margin:0}
/* status */
.badge{display:inline-flex;align-items:center;padding:3px 9px;border-radius:999px;font-size:var(--fs-0);font-weight:700}
.badge-ok{background:var(--ok-soft);color:var(--ok)}
.badge-warn{background:var(--warn-soft);color:var(--warn)}
.badge-bad{background:var(--bad-soft);color:var(--bad)}
.empty{border:1.5px dashed var(--border);border-radius:var(--r-2);padding:var(--sp-5);text-align:center;color:var(--muted)}
.empty strong{display:block;color:var(--text);margin-bottom:var(--sp-1)}
/* tables */
.tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
table{border-collapse:collapse;width:100%;font-variant-numeric:tabular-nums}
th,td{padding:10px 8px;text-align:left;border-bottom:1px solid var(--border)}
th{font-size:var(--fs-0);color:var(--muted);font-weight:700;text-transform:uppercase;letter-spacing:.04em}
/* offer (fake door) */
.offer{border:2px solid var(--accent);background:var(--surface)}
.offer .price{font-size:var(--fs-4);font-weight:800;letter-spacing:-.02em}
.offer .price small{font-size:var(--fs-0);font-weight:600;color:var(--muted);letter-spacing:0}
.offer ul{margin:var(--sp-3) 0;padding-left:1.2em;color:var(--muted)}
.offer li{margin:4px 0}
.offer ul li::marker{color:var(--accent)}
.offer .btn,.offer button{width:100%;max-width:420px}
.offer-grid{display:grid;gap:var(--sp-5);align-items:center}
@media (min-width:900px){.offer-grid{grid-template-columns:1.3fr 1fr}}
/* footer */
footer{padding:var(--sp-6) 0 var(--sp-7);color:var(--muted);font-size:var(--fs-0);border-top:1px solid var(--border);margin-top:var(--sp-6)}
footer a{color:inherit}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media (max-width:480px){h1{font-size:var(--fs-4)}.card{padding:var(--sp-4);border-radius:var(--r-2)}.hero{padding:var(--sp-4) 0}}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}