/* Shared chrome for the demo page. Landing keeps its own inline CSS. */
:root{
  --ink:#1b2733; --muted:#5e6e7f; --line:#d9e1e9; --mist:#eef2f6;
  --navy:#16243b; --red:#c0392b; --redbg:#fbecea; --green:#1e7a54; --greenbg:#eaf3ee;
  --gold:#a8761f; --goldbg:#fdf5e6; --paper:#fff;
}
*{box-sizing:border-box}
body{margin:0;font:16px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
     color:var(--ink);background:#f6f8fa}
header{background:var(--navy);color:#fff;padding:18px 24px}
header h1{margin:0;font-size:18px;font-weight:600;letter-spacing:.2px}
header p{margin:4px 0 0;color:#9fb6d0;font-size:13px}
header a{color:#fff;text-decoration:none}
header a:hover{text-decoration:underline}
.head-row{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;flex-wrap:wrap;
          max-width:1100px;margin:0 auto}
.host-badge{border:1px solid #3b4d6b;color:#cfdcec;padding:6px 12px;border-radius:8px;font-size:13px}
.banner{background:var(--goldbg);color:#5a3f0b;border-bottom:1px solid #e8d9b3;padding:12px 24px;
        font-size:14px;text-align:center}
.banner a{color:#5a3f0b}
main{max-width:760px;margin:0 auto;padding:0 20px 80px}
main.wide{max-width:1100px}
.crumbs{max-width:1100px;margin:16px auto 0;padding:0 20px;font-size:13px;color:var(--muted)}
.crumbs a{color:#2b4a78}
.paper{background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:28px 30px;margin-top:16px}
h1{margin:0 0 8px;font-size:28px;line-height:1.25}
h2{margin:32px 0 10px;font-size:20px}
h3{margin:24px 0 8px;font-size:17px}
.lead{font-size:18px;line-height:1.5;margin:0 0 16px}
.byline{color:var(--muted);font-size:14px;margin:0 0 22px}
.kicker{display:inline-block;font-size:12px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;
        color:var(--navy);background:var(--mist);padding:3px 8px;border-radius:999px;margin:0 0 12px}
.example-flag{background:var(--goldbg);color:#5a3f0b;border:1px solid #e8d9b3;border-radius:10px;
              padding:12px 14px;font-size:14px;margin:0 0 22px}
.sub{margin:0 0 18px;color:var(--muted);font-size:15px}
p{margin:0 0 14px}
ul,ol{margin:0 0 16px;padding-left:22px}
li{margin:0 0 6px}
a{color:#2b4a78}
.note{background:var(--mist);border-radius:8px;padding:12px 14px;font-size:14px;color:var(--muted);margin:16px 0}
figure.diagram{margin:18px 0;border:1px solid var(--line);border-radius:12px;padding:12px;background:#fafcfe}
figure.diagram img{display:block;width:100%;height:auto}
figcaption{margin:10px 4px 0;color:var(--muted);font-size:13px}
.go-link,.ghost-link{border-radius:8px;padding:10px 18px;font:inherit;text-decoration:none;display:inline-block}
.go-link{background:var(--navy);color:#fff}
.ghost-link{background:var(--paper);color:var(--ink);border:1px solid var(--line)}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin:16px 0 4px}
.cards{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin:18px 0;padding:0;list-style:none}
.cards li,.card{background:var(--mist);border-radius:10px;padding:14px 16px}
.cards a{text-decoration:none;color:inherit;display:block}
.cards h3{margin:0 0 6px;font-size:16px}
.cards p{margin:0;color:var(--muted);font-size:14px}
.meta{font-size:13px;color:var(--muted);margin-top:8px}
footer{max-width:1100px;margin:0 auto;padding:10px 20px 40px;color:var(--muted);font-size:13px}
footer .contact{margin:10px 0 0}
.risk{border-radius:12px;padding:16px 18px;border:1px solid #e8b4ae;background:var(--redbg);margin:0 0 16px}
.risk-kicker{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;
             margin:0 0 6px;padding:2px 8px;border-radius:999px;background:var(--red);color:#fff}
.risk h3{margin:0 0 8px;font-size:20px}
.sample-table{width:100%;border-collapse:collapse;font-size:14px;margin:12px 0 18px}
.sample-table th,.sample-table td{text-align:left;padding:9px 10px;border-bottom:1px solid var(--line);vertical-align:top}
.sample-table th{font-size:12px;text-transform:uppercase;letter-spacing:.4px;color:var(--muted)}
.chip{display:inline-block;padding:2px 8px;border-radius:999px;font-size:12px;white-space:nowrap}
.c-high{background:var(--redbg);color:var(--red)}
.c-pass{background:var(--greenbg);color:var(--green)}
.c-fail{background:var(--redbg);color:var(--red)}
.c-skip{background:var(--mist);color:var(--muted)}
code{font:13px/1.4 ui-monospace,"SF Mono",Consolas,monospace}
@media (max-width:800px){
  .cards{grid-template-columns:1fr}
  h1{font-size:24px}
  .paper{padding:20px 18px}
}