/* RAG Explainer — Swiss International Typographic Style */
:root{
  /* Surface & Ink */
  --swiss-canvas:#f4f4f4;
  --swiss-surface:#ffffff;
  --swiss-subtle:#eaeaea;
  --swiss-ink:#000000;
  --swiss-ink-secondary:#404040;
  --swiss-ink-muted:#737373;
  /* Structural Rules */
  --swiss-rule:#000000;
  --swiss-rule-light:#d4d4d4;
  /* Accents */
  --swiss-blue:#002fa7;
  --swiss-blue-tint:#ebf0ff;
  --swiss-red:#d90429;
  --swiss-red-tint:#fee2e2;
  /* Typography */
  --font-display:"Space Grotesk","Helvetica Neue",Arial,sans-serif;
  --font-body:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --font-mono:"JetBrains Mono","SF Mono",ui-monospace,Menlo,monospace;
  /* Radii & Shadows */
  --radius-none:0px;
  --shadow-hard:4px 4px 0px #000000;
  --shadow-hard-hover:6px 6px 0px #002fa7;
}
*{box-sizing:border-box;border-radius:0!important}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:var(--font-body);
  color:var(--swiss-ink);
  background:var(--swiss-canvas);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{font-family:var(--font-display);letter-spacing:-0.035em;line-height:1.1;color:var(--swiss-ink)}
code{background:#000;color:#fff;padding:2px 6px;font-family:var(--font-mono);font-size:.85em}
a{color:var(--swiss-blue);text-decoration:underline;text-underline-offset:2px}
a:hover{color:var(--swiss-ink)}
/* Header */
.topbar{
  position:sticky;top:0;z-index:40;
  background:var(--swiss-surface);
  border-bottom:2px solid var(--swiss-rule);
}
.topbar-inner{
  max-width:1100px;margin:0 auto;padding:10px 16px;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
}
.brand{
  display:flex;align-items:center;gap:10px;font-weight:700;
  font-family:var(--font-display);
  color:var(--swiss-ink);letter-spacing:-0.02em;
}
.brand-mark{
  width:32px;height:32px;border-radius:0!important;
  background:var(--swiss-ink);
  display:grid;place-items:center;color:#fff;font-size:13px;font-weight:700;
  font-family:var(--font-mono);
}
.brand small{display:block;font-weight:600;color:var(--swiss-ink-muted);font-size:10px;letter-spacing:.08em;text-transform:uppercase;margin-top:-2px;font-family:var(--font-mono)}
.nav{display:flex;gap:8px;flex-wrap:wrap}
.nav a{
  padding:8px 12px;border-radius:0!important;font-size:12px;font-weight:700;
  font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.04em;
  background:var(--swiss-surface);color:var(--swiss-ink);
  border:1px solid var(--swiss-rule);
  text-decoration:none;
}
.nav a.primary{background:var(--swiss-ink);color:#fff}
.nav a.primary:hover{background:var(--swiss-blue);border-color:var(--swiss-blue);color:#fff}
@media(max-width:640px){.nav{width:100%}.topbar-inner{flex-wrap:wrap}}
/* Layout */
.wrap{max-width:1100px;margin:0 auto;padding:24px 16px}
.hero{
  background:var(--swiss-surface);
  border:2px solid var(--swiss-rule);
  border-radius:0!important;box-shadow:var(--shadow-hard);
  padding:28px 20px;overflow:hidden;position:relative;
}
@media(min-width:800px){.hero{padding:36px 32px}}
.kicker{
  display:inline-flex;align-items:center;gap:8px;
  background:var(--swiss-ink);color:#fff;
  padding:5px 10px;border-radius:0!important;font-size:11px;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;font-family:var(--font-mono);
}
h1{margin:12px 0 8px;font-size:clamp(26px, 5.5vw, 40px);line-height:1.05;letter-spacing:-0.035em}
h1 span{color:var(--swiss-blue)}
.lead{color:var(--swiss-ink-secondary);font-size:clamp(15px,2.5vw,17px);max-width:65ch;margin:0}
.hero-actions{margin-top:18px;display:flex;gap:12px;flex-wrap:wrap}
/* Buttons — spec C */
.btn{
  appearance:none;border:2px solid #000;border-radius:0!important;
  background:#fff;color:#000;font-family:var(--font-mono);
  text-transform:uppercase;font-weight:700;font-size:13px;letter-spacing:.02em;
  padding:10px 18px;cursor:pointer;
  display:inline-flex;align-items:center;gap:8px;
  box-shadow:3px 3px 0px #000;
  transition:transform .08s, box-shadow .08s, color .08s, border-color .08s;
}
.btn:hover{transform:translate(-1px,-1px);box-shadow:5px 5px 0px var(--swiss-blue);color:var(--swiss-blue);border-color:var(--swiss-blue)}
.btn:active{transform:translate(2px,2px);box-shadow:1px 1px 0px #000}
.btn-primary{background:var(--swiss-ink);color:#fff}
.btn-primary:hover{color:#fff;background:var(--swiss-blue);border-color:var(--swiss-blue)}
.btn-secondary{background:var(--swiss-surface);color:var(--swiss-ink)}
.btn-ghost{background:var(--swiss-subtle);color:var(--swiss-ink)}
.qr-card{
  margin-top:18px;display:flex;gap:14px;align-items:center;
  background:var(--swiss-surface);border:2px solid var(--swiss-rule);border-radius:0!important;padding:12px;
}
.qr{width:96px;height:96px;border-radius:0!important;background:#fff;border:1px solid var(--swiss-rule-light);display:grid;place-items:center;overflow:hidden;flex-shrink:0}
.qr img{width:100%;height:100%;object-fit:cover}
.qr-meta{font-size:13px;color:var(--swiss-ink-secondary)}
.qr-meta strong{color:var(--swiss-ink);display:block;font-size:14px}
/* Cards — spec B */
.grid{display:grid;gap:16px}
@media(min-width:700px){.grid-2{grid-template-columns:1fr 1fr}.grid-3{grid-template-columns:1fr 1fr 1fr}}
.card{
  background:var(--swiss-surface);border:2px solid var(--swiss-rule);border-radius:0!important;
  padding:16px;box-shadow:var(--shadow-hard);
}
.card h3{margin:4px 0 6px;font-size:15px;letter-spacing:-0.02em}
.card p{margin:0;color:var(--swiss-ink-secondary);font-size:13.5px}
.badge{font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:4px 8px;border-radius:0!important;background:var(--swiss-surface);border:1px solid var(--swiss-rule);color:var(--swiss-ink);font-family:var(--font-mono)}
.badge-everyone{background:var(--swiss-blue-tint);color:var(--swiss-blue);border-color:var(--swiss-blue)}
.badge-builders{background:var(--swiss-ink);color:#fff}
.kpi{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.kpi span{background:var(--swiss-subtle);padding:6px 10px;border-radius:0!important;font-size:12px;font-weight:600;color:var(--swiss-ink);font-family:var(--font-mono)}
.section{margin-top:28px}
.section-head{display:flex;align-items:end;justify-content:space-between;gap:12px;margin-bottom:12px;flex-wrap:wrap}
.section-head h2{margin:0;font-size:20px}
.section-head p{margin:0;color:var(--swiss-ink-muted);font-size:13px;font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.06em}
/* Pipeline — sharp index tabs */
.pipeline{display:flex;gap:6px;align-items:center;flex-wrap:wrap;font-size:12px;font-weight:700;color:var(--swiss-ink)}
.pipe-step{padding:7px 11px;background:var(--swiss-surface);border:1px solid var(--swiss-rule);border-radius:0!important;text-decoration:none;color:var(--swiss-ink);transition:.1s;font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.03em}
.pipe-step:hover{color:var(--swiss-blue);border-color:var(--swiss-blue);position:relative;z-index:1}
.pipe-step.active{background:var(--swiss-ink);color:#fff;border-color:var(--swiss-rule)}
.pipe-arrow{color:var(--swiss-ink-muted);font-weight:700}
.pipeline-wrap{background:var(--swiss-surface);border:2px solid var(--swiss-rule);border-radius:0!important;padding:12px;box-shadow:var(--shadow-hard);position:sticky;top:56px;z-index:30}
.pipe-desc{margin-top:8px;font-size:12px;color:var(--swiss-ink-secondary);background:var(--swiss-subtle);padding:8px 10px;border-radius:0!important;font-family:var(--font-mono)}
@media(max-width:640px){.pipeline-wrap{padding:10px}.pipe-step{padding:6px 10px;font-size:11px}}
.note{font-size:12px;color:var(--swiss-ink-secondary);background:var(--swiss-surface);border-left:3px solid var(--swiss-blue);padding:10px 12px;border-radius:0!important}
/* Demo specifics */
.demo-bar{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:12px 0}
.demo-bar input, .demo-bar select{
  padding:10px 12px;border:2px solid var(--swiss-rule);border-radius:0!important;font-size:14px;min-width:0;font-family:var(--font-body);
}
.demo-bar input{flex:1;min-width:160px}
.canvas-wrap{background:var(--swiss-surface);border:1px solid var(--swiss-rule);border-radius:0!important;padding:12px;box-shadow:var(--shadow-hard)}
canvas{width:100%;height:auto;display:block;border-radius:0!important}
.range-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:13px;color:var(--swiss-ink-secondary)}
/* Sliders — spec D */
input[type=range]{-webkit-appearance:none;appearance:none;height:8px;background:#000;border-radius:0!important;cursor:pointer}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:24px;height:24px;background:var(--swiss-blue);border:2px solid #000;border-radius:0!important;cursor:ew-resize}
input[type=range]::-moz-range-thumb{width:24px;height:24px;background:var(--swiss-blue);border:2px solid #000;border-radius:0!important;cursor:ew-resize}
.list{list-style:none;padding:0;margin:10px 0 0}
.list li{display:flex;justify-content:space-between;gap:10px;padding:10px 12px;background:var(--swiss-surface);border:1px solid var(--swiss-rule-light);border-radius:0!important;margin-bottom:8px;font-size:13px}
.score{font-weight:700;color:var(--swiss-blue);font-family:var(--font-mono)}
.footer{margin-top:32px;padding:18px 16px;color:var(--swiss-ink-muted);font-size:11px;text-align:center;border-top:1px solid var(--swiss-rule-light);background:var(--swiss-surface);font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.06em}
.details{margin-top:10px}
.details summary{cursor:pointer;font-weight:700;color:var(--swiss-ink);font-size:13px}
.flow-note{font-size:12px;color:var(--swiss-ink-muted)}
@media(max-width:640px){
  .hero-actions .btn{flex:1;justify-content:center}
  .qr-card{flex-direction:row}
}