/* metafor v2 — AI-native data integration + RAG. Tokens carried over from v1 unchanged. */
:root{
  --bg:#F5F2EA; --bg-2:#EDE9DE; --ink:#0E1012; --ink-2:#2A2D33; --mute:#6B6E76;
  --line:#D9D3C3; --line-2:#E7E2D4; --card:#FFFDF7; --card-2:#FAF6EB;
  --lilac:#8B5CFF; --lilac-ink:#3A1DA0; --lime:#D4FF5E; --coral:#FF6B4A; --sky:#7FC6FF; --amber:#FFB547;
  --d-bg:#0C0E10; --d-bg-2:#14171B; --d-card:#181B20; --d-line:#26292F; --d-ink:#F1EFE6; --d-mute:#8A8E96;
  --radius:14px; --radius-sm:8px;
  --shadow-sm:0 1px 0 rgba(14,16,18,.04),0 1px 2px rgba(14,16,18,.04);
  --shadow:0 1px 0 rgba(14,16,18,.04),0 10px 30px -12px rgba(14,16,18,.12);
  --shadow-lg:0 1px 0 rgba(14,16,18,.04),0 30px 60px -20px rgba(14,16,18,.18);
  --fixed-dark:#0C0E10; --fixed-light:#F1EFE6;
}
[data-theme="dark"]{--bg:var(--d-bg);--bg-2:var(--d-bg-2);--ink:var(--d-ink);--ink-2:#D8D5CB;--mute:var(--d-mute);--line:var(--d-line);--line-2:#1F2227;--card:var(--d-card);--card-2:#1C2026}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:'Geist','Inter',-apple-system,system-ui,sans-serif;background:var(--bg);color:var(--ink);font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}
.serif{font-family:'Instrument Serif',Georgia,serif;font-weight:400;letter-spacing:-.01em}
.mono{font-family:'JetBrains Mono','Geist Mono',ui-monospace,monospace}
h1,h2,h3,h4{margin:0;font-weight:500;letter-spacing:-.02em}
a{color:inherit;text-decoration:none}
a.link{color:var(--lilac)}
a.link:hover{color:var(--lilac-ink)}
[data-theme="dark"] a.link:hover{color:#C9B5FF}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
input,textarea,select{font-family:inherit;font-size:inherit}
:focus-visible{outline:2px solid var(--lilac);outline-offset:2px;border-radius:6px}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--ink) 12%,transparent);border-radius:999px}
::-webkit-scrollbar-track{background:transparent}
.container{max-width:1280px;margin:0 auto;padding:0 32px}
section{position:relative}

/* ——— type ——— */
.h-display{font-family:'Instrument Serif',Georgia,serif;font-size:clamp(44px,7vw,104px);line-height:.95;letter-spacing:-.025em;font-weight:400}
.h-display em{font-style:italic;color:var(--lilac)}
.h2{font-family:'Instrument Serif',Georgia,serif;font-size:clamp(36px,5vw,68px);line-height:1;letter-spacing:-.02em;font-weight:400}
.h2 em{font-style:italic;color:var(--lilac)}
.eyebrow{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}
.lede{font-size:19px;line-height:1.55;color:var(--mute);max-width:560px}
.lede b{color:var(--ink);font-weight:500}

/* ——— buttons ——— */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:44px;padding:0 20px;border-radius:999px;font-weight:500;font-size:14.5px;transition:transform .15s,background .2s,box-shadow .2s;white-space:nowrap}
.btn-ink{background:var(--ink);color:var(--bg)}
.btn-ink:hover{transform:translateY(-1px);box-shadow:0 10px 24px -10px rgba(14,16,18,.4)}
.btn-ghost{background:transparent;color:var(--ink);border:1px solid var(--line)}
.btn-ghost:hover{background:var(--card)}
.btn-lilac{background:var(--lilac);color:#fff}
.btn-lilac:hover{transform:translateY(-1px);box-shadow:0 10px 26px -10px rgba(139,92,255,.55)}
.btn-sm{height:34px;padding:0 14px;font-size:13px}

/* ——— chips ——— */
.chip{display:inline-flex;align-items:center;gap:6px;height:27px;padding:0 11px;border-radius:999px;border:1px solid var(--line);background:var(--card);font-size:12px;color:var(--ink-2);white-space:nowrap;flex-shrink:0}
.chip .dot{width:6px;height:6px;border-radius:999px;background:var(--lime)}
.chip-lilac{background:color-mix(in srgb,var(--lilac) 12%,var(--card));border-color:color-mix(in srgb,var(--lilac) 30%,var(--line));color:var(--lilac-ink)}
[data-theme="dark"] .chip-lilac{color:#C9B5FF}
.chip-amber{background:color-mix(in srgb,var(--amber) 16%,var(--card));border-color:color-mix(in srgb,var(--amber) 38%,var(--line));color:#7A4C00}
[data-theme="dark"] .chip-amber{color:#FFD08A}

/* status pills for live vs next (honesty legend) */
.stat-pill{display:inline-flex;align-items:center;gap:5px;font-family:'JetBrains Mono',monospace;font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;padding:2px 7px;border-radius:4px;border:1px solid var(--line);color:var(--mute);background:var(--card);white-space:nowrap;flex-shrink:0}
.stat-pill.live{color:#1E7A45;border-color:color-mix(in srgb,#37D17A 45%,var(--line));background:color-mix(in srgb,#37D17A 12%,var(--card))}
[data-theme="dark"] .stat-pill.live{color:#6FE3A2}
.stat-pill.next{color:var(--lilac-ink);border-color:color-mix(in srgb,var(--lilac) 35%,var(--line));background:color-mix(in srgb,var(--lilac) 10%,var(--card))}
[data-theme="dark"] .stat-pill.next{color:#C9B5FF}

/* ——— cards ——— */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-sm)}
.card-hover{transition:transform .2s,box-shadow .2s,border-color .2s}
.card-hover:hover{transform:translateY(-2px);box-shadow:var(--shadow);border-color:color-mix(in srgb,var(--lilac) 40%,var(--line))}

/* ——— nav ——— */
.nav{position:sticky;top:0;z-index:60;backdrop-filter:saturate(1.4) blur(14px);background:color-mix(in srgb,var(--bg) 78%,transparent);border-bottom:1px solid color-mix(in srgb,var(--line) 60%,transparent)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:13px 32px;max-width:1280px;margin:0 auto}
.nav-link{color:var(--ink-2);font-size:14px;transition:color .15s;white-space:nowrap}
.nav-link:hover{color:var(--ink)}
.nav-link.on{color:var(--ink);border-bottom:1.5px solid var(--lilac)}
.logo{display:inline-flex;align-items:center;gap:8px;font-family:'Instrument Serif',Georgia,serif;font-size:22px;letter-spacing:-.01em}
.logo-mark{width:24px;height:24px;border-radius:7px;background:var(--ink);color:var(--bg);display:inline-grid;place-items:center;font-family:'JetBrains Mono',monospace;font-size:13px;font-weight:600}

/* ——— backgrounds ——— */
.dot-bg{background-image:radial-gradient(color-mix(in srgb,var(--ink) 20%,transparent) 1px,transparent 1px);background-size:18px 18px}
.grid-bg{background-image:linear-gradient(color-mix(in srgb,var(--ink) 6%,transparent) 1px,transparent 1px),linear-gradient(90deg,color-mix(in srgb,var(--ink) 6%,transparent) 1px,transparent 1px);background-size:24px 24px}
.grain::before{content:"";position:absolute;inset:0;pointer-events:none;background-image:radial-gradient(rgba(14,16,18,.07) 1px,transparent 1px);background-size:3px 3px;opacity:.5;mix-blend-mode:multiply}

/* ——— problem cards (§6.2) ——— */
.prob{padding:26px 24px 24px;border-radius:var(--radius);background:var(--card);border:1px solid var(--line);position:relative;overflow:hidden}
.prob .no{font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.14em;color:var(--mute);text-transform:uppercase}
.prob h3{font-family:'Instrument Serif',Georgia,serif;font-size:27px;font-weight:400;margin:10px 0 10px;letter-spacing:-.015em}
.prob p{font-size:14.5px;color:var(--mute);line-height:1.55;margin:0}
.prob .x{position:absolute;top:18px;right:20px;font-size:14px;color:var(--lilac)}

/* ——— flow diagram (§6.3): ETL spine with an optional retrieval-prep branch ———
   CSS grid owns all alignment — arrows are real tracks, and the bypass rail spans
   named columns, so nothing is absolutely positioned against a percentage. */
.flow{display:grid;grid-template-columns:1fr 26px 1fr 26px 3.15fr 26px 1fr 26px 1fr;grid-template-rows:auto auto;align-items:stretch}
.flow-arrow{display:grid;justify-items:center;align-content:start;padding-top:48px;color:var(--lilac);font-size:13px}
.flow-card{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:16px 14px 14px;min-width:0;display:flex;flex-direction:column;transition:border-color .18s,background .18s}
.flow-card:hover{background:var(--card-2);border-color:color-mix(in srgb,var(--lilac) 32%,var(--line))}
.flow-card .idx{font-family:'JetBrains Mono',monospace;font-size:9.5px;letter-spacing:.14em;color:var(--mute);display:block;margin-bottom:9px}
.flow-card .g{width:32px;height:32px;border-radius:9px;display:grid;place-items:center;font-size:14px;margin-bottom:11px}
.flow-card h4{font-size:14.5px;font-weight:600;margin:0 0 5px;letter-spacing:-.01em}
.flow-card p{font-size:12px;color:var(--mute);line-height:1.5;margin:0 0 12px}
/* pill pushed to the card's baseline so every status sits on one line, bottom-left */
.flow-card .stat-pill{margin-top:auto;align-self:flex-start}
.flow-card .g.live{background:var(--ink);color:var(--bg);border:2px solid var(--ink)}
.flow-card .g.next{background:var(--card);color:var(--lilac);border:2px solid var(--lilac)}

/* the optional branch, drawn as a labelled enclosure */
.flow-group{grid-column:5;position:relative;border:1.5px dashed color-mix(in srgb,var(--lilac) 48%,var(--line));border-radius:14px;background:color-mix(in srgb,var(--lilac) 5%,transparent);padding:26px 12px 12px}
.flow-group-tag{position:absolute;top:-10px;left:14px;background:var(--card);border:1px solid color-mix(in srgb,var(--lilac) 38%,var(--line));border-radius:999px;padding:2px 10px;font-family:'JetBrains Mono',monospace;font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--lilac-ink);white-space:nowrap}
[data-theme="dark"] .flow-group-tag{color:#C9B5FF}
.flow-group-inner{display:grid;grid-template-columns:1fr 20px 1fr 20px 1fr;align-items:stretch}
.flow-group-inner .flow-arrow{padding-top:48px}
/* Outer cards carry the group's 12px bottom padding themselves (12+14=26), so all seven
   pills land on exactly one line despite three of them sitting inside the enclosure. */
.flow > .flow-card{padding-bottom:26px}
.flow-group-inner > .flow-card{padding-bottom:14px}

/* bypass rail: spans the arrow before the group through the arrow after it */
.flow-bypass{grid-column:4 / 7;grid-row:2;position:relative;height:54px;display:grid;place-items:center}
.flow-bypass svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.flow-bypass span{position:relative;background:var(--bg);padding:3px 11px;font-family:'JetBrains Mono',monospace;font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--mute);margin-top:20px;white-space:nowrap}
.flow-note{display:none}

@media (max-width:1000px){
  .flow{grid-template-columns:1fr 1fr;grid-template-rows:auto;gap:10px}
  .flow-arrow{display:none}
  .flow-group{grid-column:1 / -1;margin:2px 0}
  .flow-group-inner{grid-template-columns:1fr 1fr 1fr;gap:10px}
  .flow-bypass{display:none}
  .flow-note{display:block;grid-column:1 / -1;font-size:12.5px;color:var(--mute);line-height:1.5;padding:0 2px 4px}
}
@media (max-width:620px){
  .flow{grid-template-columns:1fr}
  .flow-group-inner{grid-template-columns:1fr}
}
.stage{position:relative;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:18px 16px 16px;min-width:0}
.stage .g{width:34px;height:34px;border-radius:9px;display:grid;place-items:center;font-size:15px;margin-bottom:12px;border:1px solid transparent}
.stage h4{font-size:14.5px;font-weight:600;margin:0 0 5px;letter-spacing:-.01em}
.stage p{font-size:12.5px;color:var(--mute);line-height:1.5;margin:0 0 10px}
.stage .idx{position:absolute;top:14px;right:14px;font-family:'JetBrains Mono',monospace;font-size:10px;color:var(--mute);opacity:.7}

/* ——— governance ——— */
.gov{padding:24px;border-radius:var(--radius);border:1px solid #26292F;background:#14171B}
.gov h3{font-size:16px;font-weight:600;margin:0 0 8px;color:var(--fixed-light)}
.gov p{font-size:14px;line-height:1.6;color:#A9A39A;margin:0}
.gov .g{width:32px;height:32px;border-radius:9px;display:grid;place-items:center;margin-bottom:14px;font-size:15px}
.kv{display:flex;justify-content:space-between;gap:14px;padding:9px 0;border-bottom:1px solid #23262B;font-size:12.5px}
.kv:last-child{border-bottom:none}
.kv .k{color:#8A8E96;font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.05em;text-transform:uppercase}
.kv .v{color:var(--fixed-light);text-align:right}

/* ——— tabs / segmented ——— */
.tabs{display:inline-flex;background:var(--card);border:1px solid var(--line);border-radius:999px;padding:3px;gap:2px;flex-wrap:wrap}
.tab{padding:7px 15px;border-radius:999px;font-size:13px;color:var(--mute);min-height:34px;white-space:nowrap}
.tab.active{background:var(--ink);color:var(--bg)}
[data-theme="dark"] .tab.active{background:var(--bg);color:var(--ink)}

/* ——— connector tile ——— */
.tile{padding:15px;display:flex;align-items:center;gap:12px;background:var(--card);border:1px solid var(--line);border-radius:12px;transition:transform .18s,box-shadow .18s,border-color .18s;cursor:grab;min-height:64px}
.tile:hover{transform:translateY(-2px);box-shadow:var(--shadow);border-color:color-mix(in srgb,var(--lilac) 40%,var(--line))}
.tile .nm{font-weight:500;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tile .ct{font-family:'JetBrains Mono',monospace;font-size:10px;color:var(--mute);letter-spacing:.09em;text-transform:uppercase;margin-top:2px}
.tile.vec{border-color:color-mix(in srgb,var(--lilac) 38%,var(--line));background:linear-gradient(135deg,color-mix(in srgb,var(--lilac) 9%,var(--card)),var(--card) 62%)}

/* ——— code / terminal ——— */
.term{background:#0A0C0E;border:1px solid #23262B;border-radius:14px;overflow:hidden;font-family:'JetBrains Mono',monospace}
.term-bar{padding:10px 14px;border-bottom:1px solid #23262B;display:flex;align-items:center;gap:10px;font-size:11px;color:#6B6E76}
.term-bar .dots{display:flex;gap:5px}
.term-bar .dots i{width:8px;height:8px;border-radius:999px;background:#2A2D33}
.term-body{padding:18px;font-size:12.5px;line-height:1.7;color:#E8E4D8}
.tk{color:#C9B5FF}.tt{color:#FFB089}.tf{color:#7FC6FF}.ts{color:#D4FF5E}.tc{color:#6B6E76}.tp{color:#8A8E96}

/* ——— event log (validated-AI proof, kept from v1) ——— */
.evt{display:flex;gap:10px;align-items:baseline;font-family:'JetBrains Mono',monospace;font-size:12px;line-height:1.75}
.evt .tg{width:14px;flex-shrink:0}
.evt .ts2{color:#6B6E76;font-size:10.5px;flex-shrink:0;width:52px}

/* ——— freshness meter ——— */
.fresh{display:inline-flex;align-items:center;gap:7px;font-family:'JetBrains Mono',monospace;font-size:11px;padding:3px 9px;border-radius:999px;border:1px solid var(--line);background:var(--card);color:var(--ink-2);white-space:nowrap;flex-shrink:0}
.fresh .bd{width:6px;height:6px;border-radius:999px}
.fresh.ok .bd{background:#37D17A;box-shadow:0 0 0 3px rgba(55,209,122,.18)}
.fresh.lag .bd{background:var(--amber);box-shadow:0 0 0 3px rgba(255,181,71,.2)}
.fresh.stale .bd{background:var(--coral);box-shadow:0 0 0 3px rgba(255,107,74,.2)}

/* ——— platform shell ——— */
.pf{display:grid;grid-template-columns:216px minmax(0,1fr);height:100vh;overflow:hidden}
.pf-side{border-right:1px solid var(--line);background:var(--bg-2);display:flex;flex-direction:column;overflow-y:auto}
.pf-main{display:flex;flex-direction:column;min-width:0;overflow:hidden}
.pf-top{height:54px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:12px;padding:0 16px;background:var(--bg);flex-shrink:0}
.pf-body{flex:1;overflow:auto;min-height:0}
.side-link{display:flex;align-items:center;gap:9px;padding:7px 12px;margin:0 8px;border-radius:8px;font-size:13.5px;color:var(--ink-2);transition:background .15s,color .15s;min-height:34px}
.side-link:hover{background:var(--card)}
.side-link.on{background:color-mix(in srgb,var(--lilac) 13%,var(--card));color:var(--lilac);font-weight:500}
.side-cap{font-family:'JetBrains Mono',monospace;font-size:9.5px;letter-spacing:.15em;text-transform:uppercase;color:var(--mute);padding:0 20px;margin:18px 0 7px}

/* inspector panel */
/* canvas toolbar: one wrapping flex row, so the two groups can never collide when the
   canvas is squeezed between the fixed sidebar and the fixed inspector. `.canvas-shed`
   drops non-essential controls first — same mechanism as `.nav-shed` in the site nav. */
.canvas-bar{position:absolute;top:12px;left:12px;right:12px;z-index:6;display:flex;justify-content:space-between;align-items:flex-start;gap:8px;flex-wrap:wrap;pointer-events:none}
.canvas-bar > *{pointer-events:auto}
@media (max-width:1180px){.canvas-shed{display:none !important}}

.insp{width:300px;border-left:1px solid var(--line);background:var(--bg-2);overflow-y:auto;flex-shrink:0}
.insp-h{padding:14px 16px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between}
.fld{padding:12px 16px;border-bottom:1px solid var(--line-2)}
.fld label{display:block;font-family:'JetBrains Mono',monospace;font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--mute);margin-bottom:6px}
.inp{width:100%;height:34px;padding:0 10px;background:var(--card);border:1px solid var(--line);border-radius:7px;color:var(--ink);font-size:13px}
.inp:focus{outline:none;border-color:var(--lilac);box-shadow:0 0 0 3px color-mix(in srgb,var(--lilac) 18%,transparent)}
.seg{display:flex;gap:3px;background:var(--card);border:1px solid var(--line);border-radius:8px;padding:3px}
.seg button{flex:1;min-height:28px;border-radius:6px;font-size:12px;color:var(--mute)}
.seg button.on{background:var(--ink);color:var(--bg)}
[data-theme="dark"] .seg button.on{background:var(--bg);color:var(--ink)}

/* table */
.tbl{width:100%;border-collapse:collapse;font-size:13px}
.tbl th{font-family:'JetBrains Mono',monospace;font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--mute);font-weight:500;text-align:left;padding:9px 14px;background:var(--card-2);border-bottom:1px solid var(--line);position:sticky;top:0}
.tbl td{padding:11px 14px;border-bottom:1px solid var(--line-2);vertical-align:middle}
.tbl tr:hover td{background:var(--card-2)}

/* phone frame */
.phone{width:340px;border-radius:44px;background:var(--ink);padding:11px;box-shadow:var(--shadow-lg);flex-shrink:0}
.phone-scr{border-radius:34px;overflow:hidden;background:var(--bg);height:700px;display:flex;flex-direction:column;position:relative}
.phone-nub{position:absolute;top:9px;left:50%;transform:translateX(-50%);width:96px;height:26px;border-radius:999px;background:var(--ink);z-index:20}
.tapbar{display:flex;border-top:1px solid var(--line);background:var(--card);padding-bottom:20px;flex-shrink:0}
.tapbar button{flex:1;min-height:52px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;font-size:10px;color:var(--mute)}
.tapbar button.on{color:var(--lilac)}

/* animations */
@keyframes marquee{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes pulseRing{0%{box-shadow:0 0 0 0 rgba(55,209,122,.5)}70%{box-shadow:0 0 0 8px rgba(55,209,122,0)}100%{box-shadow:0 0 0 0 rgba(55,209,122,0)}}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.25}}
.pulse{width:8px;height:8px;border-radius:999px;background:#37D17A;animation:pulseRing 1.8s infinite}
@media (prefers-reduced-motion: reduce){*{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}}

/* responsive */
@media (max-width:1080px){.container{padding:0 24px}.nav-inner{padding:13px 24px}}
/* deployment badge is the widest optional item in the right cluster — shed it first */
@media (max-width:1120px){.nav-shed{display:none !important}}
@media (max-width:1000px){.nav-desk{display:none !important}}