/* ============================================================================
   MPAI Store — design system
   Palette derived from the MPAI Store logo:
     RED   (#C8102E)  "MPAI." wordmark + cart arrows  -> primary CTA / brand mark
     NAVY  (#1B4F8A)  "store" wordmark + cart squares  -> headings, links, structure
     AMBER (#F5A623)  cart product dots                -> the "verified / signed" accent
     GREY  (#8A8D91)  the cart                         -> neutral / dividers
   Light "storefront + registry"; restraint over decoration. Fonts self-hosted
   (offline). Colours chosen for WCAG AA — see the contrast table below.

   CONTRAST REFERENCE (foreground on background = ratio; all AA+ for their size):
     ink #1A2330 on #FFFFFF ............ 15.3:1  (AAA)
     ink #1A2330 on #F6F8FA ............ 14.6:1  (AAA)
     muted #475467 on #FFFFFF .......... 8.0:1   (AAA)
     navy #1B4F8A link on #FFFFFF ...... 6.7:1   (AA / AAA large)
     white on red-500 #C8102E button ... 5.9:1   (AA)
     white on red-600 #A50D26 hover .... 7.8:1   (AAA)
     amber-900 #4A2F00 on amber-100 .... 6.9:1   (AAA)  <- verified pill
     success #166534 on #ECFDF3 ........ 6.8:1   (AAA)
     error #B42318 on #FEF3F2 .......... 6.0:1   (AA)
   Rules: amber is NEVER text/thin-icon/focus (raw amber = 2:1); it is a fill
   behind dark ink or an accent underline only. Status is never colour-alone —
   callouts & badges also carry an icon glyph + label.
   ========================================================================== */

/* ---------- self-hosted fonts (variable, latin subset, offline) ---------- */
@font-face { font-family:"Montserrat"; src:url("/static/fonts/montserrat-var.woff2") format("woff2");
  font-weight:100 900; font-style:normal; font-display:swap; }
@font-face { font-family:"InterVar"; src:url("/static/fonts/inter-var.woff2") format("woff2");
  font-weight:100 900; font-style:normal; font-display:swap; }
@font-face { font-family:"JetBrains Mono"; src:url("/static/fonts/jetbrains-mono-var.woff2") format("woff2");
  font-weight:100 800; font-style:normal; font-display:swap; }

/* ------------------------------- tokens ---------------------------------- */
:root {
  /* brand ramp */
  --red-500:#C8102E; --red-600:#A50D26; --red-50:#FCEAED;
  --navy-800:#123456; --navy-700:#173F6E; --navy-600:#1B4F8A; --navy-200:#B9D0E6;
  --navy-100:#DCE9F5; --navy-50:#EEF4FB;
  --amber-500:#F5A623; --amber-300:#FEDF89; --amber-100:#FEF0C7; --amber-700:#8A5A00; --amber-900:#4A2F00;
  /* neutral ramp */
  --grey-900:#1A2330; --grey-700:#475467; --grey-600:#667085; --grey-500:#8A8D91; --grey-300:#D0D7DE;
  --grey-200:#E3E8EE; --grey-100:#EDF1F5; --grey-50:#F6F8FA; --grey-0:#FFFFFF;
  /* semantic (kept distinct from brand red so errors stay meaningful) */
  --success:#166534; --success-bg:#ECFDF3; --success-border:#ABEFC6;
  --error:#B42318;   --error-600:#8F1B12; --error-bg:#FEF3F2;   --error-border:#FECDCA;
  --warning:#8A5A00; --warning-bg:#FFFAEB; --warning-border:#FEDF89;

  /* role aliases */
  --bg:var(--grey-50); --surface:var(--grey-0); --surface-alt:var(--grey-100);
  --border:var(--grey-200); --border-strong:var(--grey-300);
  --ink:var(--grey-900); --ink-muted:var(--grey-700);
  --brand:var(--red-500); --brand-hover:var(--red-600); --link:var(--navy-600);

  /* fonts */
  --font-head:"Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --font-body:"InterVar", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono:"JetBrains Mono", ui-monospace, "Cascadia Code", "SF Mono", Menlo, Consolas, monospace;

  /* type scale (Major Third, rem-based; fluid at the top) */
  --step--1:0.8rem; --step-0:1rem; --step-1:1.25rem; --step-2:1.5625rem; --step-3:1.953rem;
  --step-4:clamp(1.85rem, 1.45rem + 1.6vw, 2.441rem);
  --step-5:clamp(2.25rem, 1.65rem + 2.6vw, 3.052rem);

  /* space / radius / elevation */
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:20px;
  --space-6:24px; --space-8:32px; --space-10:40px; --space-12:48px; --space-16:64px;
  --radius-sm:6px; --radius:8px; --radius-lg:12px; --radius-pill:999px;
  --shadow-1:0 1px 2px rgba(16,24,40,.06), 0 1px 3px rgba(16,24,40,.04);
  --shadow-2:0 4px 12px rgba(16,24,40,.08);
  --shadow-3:0 12px 28px rgba(16,24,40,.12);
  --container:1120px;
}

/* ------------------------------- base ------------------------------------ */
* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body {
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--font-body); font-size:var(--step-0); line-height:1.6;
  font-feature-settings:"kern" 1; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
::selection { background:var(--navy-100); }

.wrap { max-width:var(--container); margin-inline:auto; padding-inline:var(--space-6); }

h1,h2,h3,h4,h5,h6 { font-family:var(--font-head); color:var(--navy-600); font-weight:700; margin:0 0 .5em; }
h1 { font-size:var(--step-5); line-height:1.08; letter-spacing:-.02em; }
h2 { font-size:var(--step-4); line-height:1.14; letter-spacing:-.015em; margin-top:1.6em; }
h3 { font-size:var(--step-3); line-height:1.2;  letter-spacing:-.01em; margin-top:1.3em; }
h4 { font-size:var(--step-2); line-height:1.25; }
p, li { color:var(--ink); }
p { max-width:72ch; }
a { color:var(--link); text-decoration:underline; text-decoration-thickness:.08em; text-underline-offset:.15em; }
a:hover { color:var(--navy-700); }
strong, b { font-weight:600; }
hr { border:0; border-top:1px solid var(--border); margin:var(--space-8) 0; }
.muted { color:var(--ink-muted); }
.lead { font-size:var(--step-1); color:var(--ink-muted); max-width:70ch; line-height:1.55; }
.eyebrow { font-family:var(--font-head); text-transform:uppercase; font-weight:600;
  font-size:var(--step--1); letter-spacing:.09em; color:var(--navy-600); margin:0 0 var(--space-2); }

.skip-link { position:absolute; left:-999px; top:0; background:var(--navy-600); color:#fff;
  padding:8px 14px; border-radius:0 0 var(--radius) 0; z-index:100; }
.skip-link:focus { left:0; }

main.wrap { padding-top:var(--space-10); padding-bottom:var(--space-16); }

/* ------------------------ top accent bar + header ------------------------ */
.topbar { position:sticky; top:0; z-index:50; }
.accent-bar { height:4px;
  background:linear-gradient(90deg, var(--red-500) 0 33.33%, var(--navy-600) 33.33% 66.66%, var(--amber-500) 66.66% 100%); }
.site-header { background:rgba(255,255,255,.9); backdrop-filter:saturate(180%) blur(8px);
  border-bottom:1px solid var(--border); box-shadow:var(--shadow-1); }
.header-inner { display:flex; align-items:center; justify-content:space-between; gap:var(--space-4);
  min-height:64px; flex-wrap:wrap; }
.brand { display:inline-flex; align-items:center; gap:var(--space-3); text-decoration:none; }
.brand-logo { height:34px; width:auto; display:block; }
.draft-badge { font-family:var(--font-head); font-size:.6rem; font-weight:700; letter-spacing:.12em;
  text-transform:uppercase; color:var(--ink-muted); background:var(--grey-100);
  border:1px solid var(--border); padding:2px 7px; border-radius:var(--radius-pill); }

.site-nav { display:flex; align-items:center; gap:var(--space-1); flex-wrap:wrap; }
.site-nav > a { position:relative; color:var(--navy-700); text-decoration:none; font-weight:500;
  font-size:.95rem; padding:8px 12px; border-radius:var(--radius-sm); }
.site-nav > a::after { content:""; position:absolute; left:12px; right:12px; bottom:3px; height:2px;
  background:var(--navy-600); border-radius:2px; transform:scaleX(0); transform-origin:left;
  transition:transform .18s ease; }
.site-nav > a:hover { color:var(--navy-600); }
.site-nav > a:hover::after { transform:scaleX(1); }
.site-nav > a[aria-current="page"] { color:var(--navy-600); font-weight:600; }
.site-nav > a[aria-current="page"]::after { transform:scaleX(1); background:var(--navy-600); height:3px; }
.nav-cta { display:inline-flex; align-items:center; gap:var(--space-2); margin-left:var(--space-2); }

/* --------------------------------- buttons ------------------------------- */
.btn { display:inline-flex; align-items:center; gap:8px; font-family:var(--font-body); font-weight:600;
  font-size:1rem; line-height:1; text-decoration:none; padding:12px 20px; border-radius:var(--radius);
  border:1px solid transparent; cursor:pointer;
  transition:background .18s ease, transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.btn { background:var(--brand); color:#fff; }
.btn:hover { background:var(--brand-hover); color:#fff; }
.btn.secondary { background:transparent; color:var(--navy-600); border-color:var(--navy-600); }
.btn.secondary:hover { background:var(--navy-50); color:var(--navy-700); }
.btn.danger { background:var(--error); color:#fff; }
.btn.danger:hover { background:var(--error-600); }
.btn.btn-sm { padding:8px 14px; font-size:.9rem; }
.btn:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible,
button:focus-visible { outline:2px solid var(--navy-600); outline-offset:2px; }
@media (prefers-reduced-motion:no-preference) {
  .btn:hover { transform:translateY(-1px); box-shadow:var(--shadow-2); }
}
.btn-row { display:flex; gap:var(--space-3); flex-wrap:wrap; margin:var(--space-5) 0; align-items:center; }

/* --------------------------------- cards --------------------------------- */
.cards { display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); gap:var(--space-5);
  margin:var(--space-6) 0; }
.card { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg);
  padding:var(--space-6); box-shadow:var(--shadow-1); }
.card h3 { margin-top:0; }
.card .num { font-family:var(--font-head); font-size:2.2rem; font-weight:800; color:var(--navy-600);
  line-height:1; letter-spacing:-.02em; }
.panel { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg);
  padding:var(--space-6); box-shadow:var(--shadow-1); margin:var(--space-5) 0; }

/* --------------------------------- forms --------------------------------- */
form .field { margin:var(--space-4) 0; }
label { display:block; font-family:var(--font-head); font-weight:600; font-size:.875rem;
  color:var(--navy-700); margin-bottom:var(--space-1); }
label .req { color:var(--brand); }
input[type=text], input[type=email], input[type=url], input[type=number], input[type=password],
textarea, select {
  width:100%; padding:10px 12px; border:1px solid var(--border-strong); border-radius:var(--radius);
  font-family:var(--font-body); font-size:1rem; color:var(--ink); background:var(--surface); }
input::placeholder, textarea::placeholder { color:var(--grey-600); }
input:focus, textarea:focus, select:focus { border-color:var(--navy-600); outline:2px solid var(--navy-600);
  outline-offset:1px; }
input[type=file] { padding:8px 12px; background:var(--surface-alt); cursor:pointer; }
textarea { font-family:var(--font-mono); font-size:.85rem; line-height:1.55; min-height:320px; resize:vertical; }
.hint { color:var(--ink-muted); font-size:.85rem; margin-top:var(--space-1); }
.two-col { display:grid; grid-template-columns:1fr 1fr; gap:var(--space-4); }
@media (max-width:620px) { .two-col { grid-template-columns:1fr; } }

/* --------------------------------- tables -------------------------------- */
table { width:100%; border-collapse:collapse; margin:var(--space-4) 0; font-size:.9375rem;
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); overflow:hidden; }
th, td { text-align:left; padding:10px 14px; border-bottom:1px solid var(--border); vertical-align:top; }
th { font-family:var(--font-head); color:var(--ink-muted); font-weight:600; font-size:.78rem;
  text-transform:uppercase; letter-spacing:.05em; background:var(--surface-alt); }
td { font-variant-numeric:tabular-nums; }
tbody tr:nth-child(even) { background:var(--grey-50); }
tbody tr:hover { background:var(--navy-50); }
tbody tr:last-child td { border-bottom:0; }

/* ---------------------------------- code --------------------------------- */
code { font-family:var(--font-mono); font-size:.9375em; font-variant-ligatures:none;
  background:var(--surface-alt); color:var(--navy-700); padding:1px 6px; border-radius:var(--radius-sm);
  border:1px solid var(--border); }
pre { background:var(--surface-alt); color:var(--ink); padding:var(--space-4); border-radius:var(--radius);
  border:1px solid var(--border); overflow:auto; font-family:var(--font-mono); font-size:.84rem;
  line-height:1.6; position:relative; }
pre code { background:none; padding:0; border:0; color:inherit; font-size:1em; }
.codewrap { position:relative; }
.copy-btn { position:absolute; top:8px; right:8px; background:var(--surface); color:var(--ink-muted);
  border:1px solid var(--border-strong); border-radius:var(--radius-sm); padding:3px 10px;
  font-family:var(--font-body); font-size:.72rem; font-weight:600; cursor:pointer; }
.copy-btn:hover { background:var(--grey-100); color:var(--ink); }

/* -------------------------------- callouts ------------------------------- */
/* Scoped :not(.pill) so the icon/box styling never leaks onto .pill.ok/.pill.warn
   (a pill element carries both classes, e.g. class="pill ok"). */
.note:not(.pill), .ok:not(.pill), .warn:not(.pill), .err:not(.pill) {
  position:relative; border:1px solid; border-left-width:4px;
  border-radius:var(--radius); padding:var(--space-4) var(--space-4) var(--space-4) 44px;
  margin:var(--space-4) 0; font-size:.95rem; }
.note:not(.pill)::before, .ok:not(.pill)::before, .warn:not(.pill)::before, .err:not(.pill)::before {
  position:absolute; left:14px; top:14px; font-family:var(--font-head); font-weight:800;
  width:20px; height:20px; border-radius:50%; text-align:center; line-height:20px; font-size:.8rem; color:#fff; }
.note:not(.pill) { background:var(--navy-50); border-color:var(--navy-200); color:var(--navy-800); }
.note:not(.pill)::before { content:"i"; background:var(--navy-600); }
.ok:not(.pill)   { background:var(--success-bg); border-color:var(--success-border); color:var(--success); }
.ok:not(.pill)::before { content:"\2713"; background:var(--success); }
.warn:not(.pill) { background:var(--warning-bg); border-color:var(--warning-border); color:var(--warning); }
.warn:not(.pill)::before { content:"!"; background:var(--warning); }
.err:not(.pill)  { background:var(--error-bg); border-color:var(--error-border); color:var(--error); }
.err:not(.pill)::before { content:"\2715"; background:var(--error); }
.note ul, .ok ul, .warn ul, .err ul { margin:var(--space-2) 0 0; }
/* Unconfigured operator identity field on /privacy or /disclaimer. */
.err-inline { color:var(--error); font-weight:600; }

/* -------------------------------- pills/badges --------------------------- */
.pill { display:inline-flex; align-items:center; gap:5px; white-space:nowrap; font-family:var(--font-head);
  font-weight:600; font-size:.75rem; padding:2px 9px; border-radius:var(--radius-pill);
  border:1px solid var(--border); background:var(--grey-100); color:var(--ink-muted); }
.pill.mono { font-family:var(--font-mono); font-weight:500; }
.pill.lvl1 { background:var(--grey-100); color:var(--grey-700); border-color:var(--grey-200); }
.pill.lvl2 { background:var(--navy-50); color:var(--navy-700); border-color:var(--navy-100); }
.pill.lvl3 { background:var(--amber-100); color:var(--amber-900); border-color:var(--amber-300); }
.pill.lvl3::before { content:"\2713"; font-weight:800; }
.pill.ok { background:var(--success-bg); color:var(--success); border-color:var(--success-border); }
.pill.warn { background:var(--warning-bg); color:var(--warning); border-color:var(--warning-border); }

/* verified trust mark — reused on hero, registry, detail, trust pages */
.badge-verified { display:inline-flex; align-items:center; gap:6px; font-family:var(--font-head);
  font-weight:600; font-size:.8rem; color:var(--amber-900); background:var(--amber-100);
  border:1px solid var(--amber-300); padding:3px 10px; border-radius:var(--radius-pill); }
.badge-verified::before { content:"\2713"; font-weight:800; }

/* ---------------------------- key/value + ids ---------------------------- */
.kv { display:grid; grid-template-columns:190px 1fr; gap:var(--space-2) var(--space-4); margin:var(--space-3) 0; }
.kv dt { color:var(--ink-muted); font-size:.9rem; font-weight:500; }
.kv dd { margin:0; }
@media (max-width:560px) { .kv { grid-template-columns:1fr; gap:0 0; } .kv dd { margin-bottom:var(--space-3); } }
.mono { font-family:var(--font-mono); }
/* long unbreakable IDs (e.g. MPAI0043-AUDIOBASICSCENEDESCRIPTI-0001-CD26) must wrap
   inside table cells and the detail heading so they never force horizontal overflow */
td .mono, td a.mono, td.mono, h1.mono { overflow-wrap:anywhere; }
.big-id { font-family:var(--font-mono); font-size:1.05rem; font-weight:600; color:var(--navy-700);
  background:var(--surface-alt); border:1px solid var(--border-strong); border-radius:var(--radius);
  padding:8px 14px; display:inline-block; word-break:break-all; }

/* numbered steps */
.steps { counter-reset:s; list-style:none; padding-left:0; margin:var(--space-4) 0; }
.steps li { counter-increment:s; position:relative; padding:4px 0 var(--space-4) 44px; margin:0; }
.steps li::before { content:counter(s); position:absolute; left:0; top:0; width:28px; height:28px;
  background:var(--navy-600); color:#fff; border-radius:50%; text-align:center; line-height:28px;
  font-family:var(--font-head); font-size:.85rem; font-weight:700; }
.flow { font-family:var(--font-mono); font-size:.82rem; line-height:1.5; white-space:pre; overflow-x:auto;
  color:var(--ink); }

/* ---------------------------------- hero --------------------------------- */
.hero { text-align:center; padding:var(--space-12) 0 var(--space-8); }
.hero h1 { max-width:16ch; margin-inline:auto; }
.hero .lead { margin:var(--space-4) auto var(--space-6); }
.hero .btn-row { justify-content:center; }
/* .hero is text-align:center, but the global `p { max-width:72ch }` leaves these paragraph
   BOXES flush left, so their centred text lands left of the page centre. h1, .lead and
   .artifact all set auto margins explicitly; .eyebrow and the trailing notes were missed.
   Cap the notes to the .artifact width so their edges line up with the code block above. */
.hero > p { margin-inline:auto; }
.hero > p.muted { max-width:760px; }
.trust-strip { display:flex; flex-wrap:wrap; justify-content:center; gap:var(--space-2) var(--space-5);
  margin-top:var(--space-6); color:var(--ink-muted); font-size:.9rem; }
.trust-strip span { display:inline-flex; align-items:center; gap:6px; }
.trust-strip strong { color:var(--ink); font-weight:600; }
.trust-strip .dot { width:5px; height:5px; border-radius:50%; background:var(--grey-500); }

/* code/terminal artifact card (hero + docs) */
.artifact { max-width:760px; margin:var(--space-8) auto 0; text-align:left; background:var(--surface);
  border:1px solid var(--border); border-radius:var(--radius-lg); box-shadow:var(--shadow-2); overflow:hidden; }
.artifact-bar { display:flex; align-items:center; gap:7px; padding:10px 14px; background:var(--surface-alt);
  border-bottom:1px solid var(--border); }
.artifact-bar i { width:11px; height:11px; border-radius:50%; display:inline-block; }
.artifact-bar i:nth-child(1){ background:var(--red-500); }
.artifact-bar i:nth-child(2){ background:var(--amber-500); }
.artifact-bar i:nth-child(3){ background:var(--grey-500); }
.artifact-bar span { margin-left:8px; font-family:var(--font-mono); font-size:.78rem; color:var(--ink-muted); }
.artifact pre { margin:0; border:0; border-radius:0; background:transparent; font-size:.82rem; }
.artifact .verified-line { color:var(--success); font-weight:700; }

/* generic section band */
.band { background:var(--surface); border-block:1px solid var(--border); margin:var(--space-12) 0;
  padding-block:var(--space-12); }
.band > .wrap > h2, .section-head { text-align:center; }
.section-head { max-width:60ch; margin:0 auto var(--space-8); }
.section-head .lead { margin-inline:auto; }

/* --------------------------------- footer -------------------------------- */
.site-footer { border-top:1px solid var(--border); background:var(--surface); margin-top:var(--space-16); }
.footer-grid { display:grid; grid-template-columns:1.4fr repeat(3, 1fr); gap:var(--space-8);
  padding:var(--space-12) 0 var(--space-8); }
@media (max-width:760px) { .footer-grid { grid-template-columns:1fr 1fr; gap:var(--space-6); } }
.footer-brand .brand-logo { height:30px; }
.footer-brand p { font-size:.85rem; color:var(--ink-muted); margin:var(--space-3) 0 0; max-width:34ch; }
.footer-col h4 { font-family:var(--font-head); font-size:.78rem; text-transform:uppercase; letter-spacing:.06em;
  color:var(--ink-muted); margin:0 0 var(--space-3); }
.footer-col a { display:block; color:var(--navy-700); text-decoration:none; font-size:.9rem; padding:3px 0; }
.footer-col a:hover { color:var(--navy-600); text-decoration:underline; }
.footer-legal { border-top:1px solid var(--border); padding:var(--space-5) 0; }
.footer-legal p { font-size:.8rem; color:var(--ink-muted); margin:0; max-width:none; }

/* --------------------------- responsive nav ------------------------------ */
@media (max-width:720px) {
  .header-inner { min-height:56px; }
  .site-nav { width:100%; justify-content:flex-start; gap:0; overflow-x:auto; padding-bottom:6px;
    border-top:1px solid var(--border); margin-top:6px; }
  .site-nav > a { padding:8px 10px; white-space:nowrap; }
  .nav-cta { margin-left:auto; }
}
/* On narrow screens let data tables scroll horizontally inside their own box
   (display:block wraps the rows in an anonymous table, keeping columns aligned)
   instead of forcing the whole page to scroll sideways. */
@media (max-width:640px) {
  main.wrap table { display:block; overflow-x:auto; white-space:nowrap; -webkit-overflow-scrolling:touch; }
  main.wrap td .mono, main.wrap td a.mono, main.wrap td.mono { overflow-wrap:normal; }
}
@media (max-width:480px) { .wrap { padding-inline:var(--space-4); } }