/* ============================================================================
   PremitiveKey — Fable design system
   An agent-engineering aesthetic: ledger rows, trace consoles, state badges.
   IBM Plex Sans / IBM Plex Mono · light ground · dark hero band only.
   Corners ≤ 5px. No text below 11px. Every animation plays once and settles.
   ============================================================================ */

:root{
  --ink:#1F1840; --body:#423B63; --muted:#6B6389; --sec:#837BA0;
  --violet:#6B3FA8; --iris:#8659C4; --magenta:#B23A8F; --plum:#6E2A7C;
  --indigo:#3A2C72; --deep:#191740; --gold:#C9922F; --gold-lt:#E3A93A;
  --paper:#FFFFFF; --wash:#F5F1FB; --wash2:#EDE6F8; --panel:#FBF9FE;
  --line:#DCD2EE; --line2:#C3B4E3;
  --console:#1C1442; --console2:#251B52; --con-line:rgba(199,186,228,.16);
  --con-dim:#9C92C4; --con-txt:#E8E3F6;
  --maxw:1240px; --gut:32px; --nav-h:70px; --sect:76px;
  --r:5px; --r-sm:4px;
  --font:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,Consolas,monospace;
  --ease:cubic-bezier(.25,.75,.3,1);
  --shadow:0 1px 2px rgba(31,24,64,.05),0 10px 30px rgba(31,24,64,.07);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
html,body{max-width:100%;overflow-x:hidden}
body{margin:0;font-family:var(--font);font-size:17px;line-height:1.6;color:var(--body);
  background:var(--paper);-webkit-font-smoothing:antialiased}
img,svg,video{max-width:100%;display:block}
a{color:var(--violet);text-decoration:none}
a:hover{text-decoration:underline}
:focus-visible{outline:2px solid var(--violet);outline-offset:3px;border-radius:var(--r-sm)}
.skip{position:absolute;left:-9999px;top:0;z-index:300;background:var(--ink);color:#fff;
  padding:10px 18px;font-weight:600;font-size:.875rem}
.skip:focus{left:0;text-decoration:none}
.inv{position:absolute;top:0;left:0;width:1px;height:1px;overflow:hidden;z-index:-1;
  opacity:0;color:transparent;user-select:none;-webkit-user-select:none;pointer-events:none}

h1,h2,h3,h4{color:var(--ink);margin:0 0 .5em;font-weight:600;overflow-wrap:break-word}
h1{font-size:clamp(2.1rem,3.5vw,3.25rem);line-height:1.1;letter-spacing:-.028em;font-weight:650}
h2{font-size:clamp(1.5rem,2.2vw,2rem);line-height:1.2;letter-spacing:-.02em}
h3{font-size:clamp(1.08rem,1.3vw,1.2rem);line-height:1.4;letter-spacing:-.008em}
p{margin:0 0 1em;max-width:76ch}
strong{color:var(--ink);font-weight:600}
.lede{font-size:clamp(1.0625rem,1.2vw,1.1875rem);color:var(--muted);line-height:1.6;max-width:70ch}

.wrap{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 var(--gut);min-width:0}
.sect{padding:var(--sect) 0}
.sect.wash{background:var(--wash)}
.sect.deepband{background:var(--deep);color:#CFC6E6}
.sect.deepband h2{color:#fff}

/* ---------- kicker: mono label with a gold tick ---------- */
.kicker{display:flex;align-items:center;gap:10px;font-family:var(--mono);font-size:.6875rem;
  font-weight:500;letter-spacing:.11em;text-transform:uppercase;color:var(--violet);margin-bottom:14px}
.kicker::before{content:"";width:14px;height:2px;background:var(--gold);flex:none}
.dark .kicker,.deepband .kicker{color:#CBB8EE}

/* section header: heading left, lede right, hairline underneath */
.shd{margin-bottom:34px;padding-bottom:22px;border-bottom:1px solid var(--line);position:relative}
.shd::after{content:"";position:absolute;left:0;bottom:-1px;width:64px;height:2px;background:var(--gold)}
@media(min-width:1000px){
  .shd.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:60px;align-items:start}
  .shd.split .kicker{grid-column:1/-1}
  .shd.split h2{margin-bottom:0}
  .shd.split .lede{padding-top:4px;margin-bottom:0}
}

/* ---------- nav ---------- */
.nav{position:sticky;top:0;z-index:100;background:rgba(255,255,255,.92);
  backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid var(--line)}
.nav-in{max-width:var(--maxw);margin:0 auto;padding:0 var(--gut);height:var(--nav-h);
  display:flex;align-items:center;gap:26px}
.brand{display:flex;align-items:center;flex:none}
.brand img{height:34px;width:auto;display:block}
.nav-links{display:flex;gap:4px;margin-left:auto;align-items:center}
.nav-links a{color:var(--body);font-size:.9375rem;font-weight:500;padding:8px 12px;
  border-radius:var(--r-sm);position:relative}
.nav-links a:hover{text-decoration:none;background:var(--wash)}
.nav-links a.active{color:var(--ink)}
.nav-links a.active::after{content:"";position:absolute;left:12px;right:12px;bottom:2px;
  height:2px;background:var(--gold)}
.btn{display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:.9375rem;
  padding:11px 20px;border-radius:var(--r);border:1px solid transparent;cursor:pointer;
  transition:transform .35s var(--ease),box-shadow .35s var(--ease),background .25s}
.btn:hover{text-decoration:none;transform:translateY(-1px)}
.btn-primary{background:var(--ink);color:#fff}
.btn-primary:visited{color:#fff}
.btn-primary:hover{background:var(--indigo);box-shadow:var(--shadow)}
.dark .btn-primary,.deepband .btn-primary{background:#fff;color:var(--ink)}
.dark .btn-primary:visited,.deepband .btn-primary:visited{color:var(--ink)}
.dark .btn-primary:hover,.deepband .btn-primary:hover{background:var(--gold-lt);color:#241A05}
.btn-gold{background:var(--gold);color:#241A05}
.btn-gold:visited{color:#241A05}
.btn-gold:hover{background:var(--gold-lt)}
.btn-ghost{border-color:var(--line2);color:var(--ink);background:transparent}
.btn-ghost:hover{border-color:var(--violet);background:var(--wash)}
.dark .btn-ghost{border-color:rgba(255,255,255,.35);color:#fff}
.dark .btn-ghost:hover{background:rgba(255,255,255,.08)}
.btn-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px}
.nav .btn{padding:9px 16px;font-size:.875rem}
.burger{display:none;margin-left:auto;background:none;border:1px solid var(--line);
  border-radius:var(--r-sm);padding:9px 11px;cursor:pointer}
.burger span{display:block;width:19px;height:2px;background:var(--ink);margin:4px 0;
  transition:transform .3s var(--ease),opacity .3s}
.nav.open .burger span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.nav.open .burger span:nth-child(2){opacity:0}
.nav.open .burger span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* ---------- status badges: the honesty thread ---------- */
.st{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:.6875rem;
  font-weight:500;letter-spacing:.05em;text-transform:uppercase;padding:3px 10px;
  border-radius:var(--r-sm);white-space:nowrap;border:1px solid;flex:none}
.st::before{content:"";width:6px;height:6px;border-radius:1px;background:currentColor;flex:none}
.st.live{background:#EFE8FA;color:var(--violet);border-color:#D6C7F0}
.st.uat{background:#FBF3DE;color:#8A6416;border-color:#EBD9AC}
.st.build{background:#F3F1F8;color:var(--sec);border-color:var(--line)}
.st.pub{background:#fff;color:var(--indigo);border-color:var(--line2)}
.st.pub::before{border-radius:50%;background:transparent;border:1.5px solid currentColor;width:5px;height:5px}
.tag-io{font-family:var(--mono);font-size:.6875rem;letter-spacing:.06em;text-transform:uppercase;
  color:var(--magenta);border:1px dashed #DCA8CC;border-radius:var(--r-sm);padding:3px 10px;white-space:nowrap;flex:none}
.legend{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:18px}
.legend .lbl{font-family:var(--mono);font-size:.75rem;color:var(--muted);margin-right:4px}

/* ---------- hero ---------- */
.hero{position:relative;color:#fff;overflow:hidden;padding:84px 0 70px;
  background:
    radial-gradient(46% 42% at 8% 0%, rgba(214,62,150,.35) 0%, rgba(214,62,150,0) 62%),
    radial-gradient(50% 46% at 96% 100%, rgba(134,89,196,.30) 0%, rgba(134,89,196,0) 64%),
    linear-gradient(152deg,#5E2472 0%,#4A2578 30%,#332765 58%,#1E1B4E 100%)}
.hero::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56'%3E%3Cpath d='M0 28h56M28 0v56' stroke='%23ffffff' stroke-opacity='.045'/%3E%3Ccircle cx='28' cy='28' r='1.4' fill='%23ffffff' fill-opacity='.12'/%3E%3C/svg%3E")}
.hero .wrap{position:relative;z-index:2}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);gap:56px;align-items:center}
.hero h1{color:#fff}
.hero h1 em{font-style:normal;color:var(--gold-lt)}
.hero .lede{color:#D9D1EE}
.hero-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin-top:52px;
  padding-top:26px;border-top:1px solid rgba(255,255,255,.16)}
.hero-stats .n{font-family:var(--mono);font-size:clamp(1.5rem,2vw,1.9rem);font-weight:600;color:#fff}
.hero-stats .n.g{color:var(--gold-lt)}
.hero-stats .l{font-family:var(--mono);font-size:.6875rem;letter-spacing:.08em;color:#B4A8D6;
  text-transform:uppercase;margin-top:5px;line-height:1.45}

/* ---------- the trace console: the signature motif ---------- */
.console{background:var(--console);border:1px solid #3A2E6E;border-radius:var(--r);
  overflow:hidden;box-shadow:0 18px 50px rgba(15,10,45,.45);font-family:var(--mono)}
.con-hd{display:flex;align-items:center;gap:10px;padding:10px 14px;
  background:var(--console2);border-bottom:1px solid var(--con-line)}
.con-hd .dotset{display:flex;gap:5px}
.con-hd .dotset i{width:8px;height:8px;border-radius:50%;background:#4A3D85}
.con-hd .path{font-size:.75rem;color:var(--con-dim);letter-spacing:.02em;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.con-hd .st{margin-left:auto}
.con-bd{padding:14px 0 12px;position:relative}
.trace{list-style:none;margin:0;padding:0}
.trace li{display:grid;grid-template-columns:52px 84px minmax(0,1fr);gap:0 12px;align-items:baseline;
  padding:5px 16px 5px 18px;font-size:.75rem;line-height:1.5;position:relative}
.trace li::before{content:"";position:absolute;left:8px;top:0;bottom:0;width:1px;background:var(--con-line)}
.trace li::after{content:"";position:absolute;left:5.5px;top:50%;margin-top:-3px;width:6px;height:6px;
  border-radius:50%;background:#564997;border:1px solid var(--console)}
.trace .t{color:#6F63A6;font-size:.6875rem}
.trace .v{font-weight:600;letter-spacing:.05em}
.trace .d{color:var(--con-txt);min-width:0;overflow-wrap:anywhere}
.trace .d i{font-style:normal;color:var(--con-dim)}
.trace .v.in{color:#9FD6C8}.trace li.k-in::after{background:#7FBFAE}
.trace .v.plan{color:#C7B4F2}.trace li.k-plan::after{background:#9E85DE}
.trace .v.act{color:#A7C4F0}.trace li.k-act::after{background:#7E9FD8}
.trace .v.gate{color:var(--gold-lt)}.trace li.k-gate::after{background:var(--gold-lt)}
.trace .v.ok{color:#fff}.trace li.k-ok::after{background:#fff}
.trace .v.stop{color:#F09AD3}.trace li.k-stop::after{background:#E273BD}
.trace li.sep{grid-template-columns:1fr;color:#6F63A6;font-size:.6875rem;letter-spacing:.08em;
  text-transform:uppercase;padding-top:12px}
.trace li.sep::after{display:none}
.con-ft{padding:11px 16px;border-top:1px solid var(--con-line);font-size:.75rem;
  color:var(--con-dim);line-height:1.55}
.con-ft b{color:var(--con-txt);font-weight:600}
/* trace reveal: JS holds lines back, then plays them once, top to bottom */
html.js .console.pre .trace li{opacity:0;transform:translateY(4px)}
html.js .console.run .trace li{animation:tline .5s var(--ease) forwards;animation-delay:var(--d,0ms)}
@keyframes tline{to{opacity:1;transform:none}}

/* console on light ground (PolicyDesk body) keeps its own dark surface */
.console.solo{max-width:760px;margin:26px auto 0}

/* ---------- ledger rows: the anti-card ---------- */
.ledger{border-top:1px solid var(--line)}
.lrow{display:grid;grid-template-columns:46px minmax(0,1fr) auto;gap:18px;align-items:start;
  padding:20px 4px;border-bottom:1px solid var(--line);transition:background .25s}
.lrow:hover{background:var(--panel)}
.lrow .gly{width:34px;height:34px;border:1px solid var(--line2);border-radius:var(--r-sm);
  display:grid;place-items:center;color:var(--violet);background:#fff;margin-top:2px}
.lrow .gly svg{width:18px;height:18px}
.lrow h3{margin:0 0 4px;font-size:1.0625rem}
.lrow h3 a{color:inherit}
.lrow h3 a:hover{color:var(--violet);text-decoration:none}
.lrow p{margin:0;font-size:.9375rem;color:var(--muted);max-width:72ch}
.lrow .meta{display:flex;flex-direction:column;align-items:flex-end;gap:8px;padding-top:2px}
.lrow .dom{font-family:var(--mono);font-size:.6875rem;letter-spacing:.07em;
  text-transform:uppercase;color:var(--sec);white-space:nowrap}
@media(max-width:700px){
  .lrow{grid-template-columns:40px minmax(0,1fr)}
  .lrow .meta{grid-column:2;flex-direction:row;align-items:center;flex-wrap:wrap;justify-content:flex-start}
}

/* flagship row (FOXBOX) sits above the ledger, heavier */
.flag{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:40px;
  border:1px solid var(--line2);border-left:3px solid var(--gold);border-radius:var(--r);
  background:linear-gradient(160deg,#fff 0%,var(--panel) 100%);padding:30px 32px;margin-bottom:34px}
.flag h3{font-size:1.35rem;display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.flag p{font-size:.9843rem;color:var(--muted);margin-bottom:0}
.flag .fm{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-content:center;
  border-left:1px solid var(--line);padding-left:34px}
.flag .fm .n{font-family:var(--mono);font-size:1.35rem;font-weight:600;color:var(--ink)}
.flag .fm .n.g{color:var(--gold)}
.flag .fm .l{font-family:var(--mono);font-size:.6875rem;letter-spacing:.07em;color:var(--sec);
  text-transform:uppercase;margin-top:3px;line-height:1.4}
@media(max-width:860px){.flag{grid-template-columns:minmax(0,1fr)}.flag .fm{border-left:0;padding-left:0;
  border-top:1px solid var(--line);padding-top:20px}}

/* ---------- definition list: what we build ---------- */
.defs{display:grid;grid-template-columns:1fr 1fr;gap:0 56px;border-top:1px solid var(--line)}
.def{display:grid;grid-template-columns:40px minmax(0,1fr);gap:14px;padding:17px 2px;
  border-bottom:1px solid var(--line);align-items:start}
.def .gly{width:30px;height:30px;display:grid;place-items:center;color:var(--violet);margin-top:1px}
.def .gly svg{width:20px;height:20px}
.def b{display:block;color:var(--ink);font-weight:600;font-size:1rem;margin-bottom:2px}
.def span{font-size:.875rem;color:var(--muted);line-height:1.55}
@media(max-width:860px){.defs{grid-template-columns:minmax(0,1fr)}}

/* ---------- generative / predictive split panel ---------- */
.duo{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--line2);border-radius:var(--r);
  overflow:hidden;background:#fff}
.duo>div{padding:30px 32px;min-width:0}
.duo>div+div{border-left:1px solid var(--line)}
.duo .kicker{margin-bottom:10px}
.duo h3{font-size:1.2rem}
.duo p{font-size:.9375rem;color:var(--muted)}
.duo .chips{margin:14px 0 16px}
.duo-ft{border:1px solid var(--line2);border-top:0;border-radius:0 0 var(--r) var(--r);
  background:var(--wash);padding:18px 32px;font-size:.9375rem;color:var(--body);
  border-left:3px solid var(--gold)}
.duo-ft b{color:var(--ink)}
@media(max-width:860px){.duo{grid-template-columns:minmax(0,1fr)}.duo>div+div{border-left:0;border-top:1px solid var(--line)}}
.chips{display:flex;flex-wrap:wrap;gap:7px;margin:16px 0}
.chip{font-family:var(--mono);font-size:.75rem;padding:5px 11px;border-radius:var(--r-sm);
  background:var(--wash);color:var(--indigo);border:1px solid var(--line)}
.dark .chip{background:rgba(255,255,255,.08);color:#E3DAF4;border-color:rgba(255,255,255,.2)}
.chip.g{background:#FBF3DE;color:#8A6416;border-color:#EBD9AC}

/* ---------- architecture layers ---------- */
.layers{border:1px solid var(--line2);border-radius:var(--r);overflow:hidden;background:#fff}
.lay{display:grid;grid-template-columns:216px 1fr;border-top:1px solid var(--line)}
.lay:first-child{border-top:0}
.lay-l{padding:16px 18px;background:linear-gradient(135deg,var(--wash) 0%,var(--wash2) 100%);
  border-right:1px solid var(--line);position:relative}
.lay-l::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
  background:linear-gradient(180deg,var(--iris),var(--magenta))}
.lay-l b{display:block;font-family:var(--mono);font-size:.6875rem;font-weight:600;
  letter-spacing:.09em;text-transform:uppercase;color:var(--ink);line-height:1.4}
.lay-l i{display:block;font-style:normal;font-size:.8125rem;color:var(--muted);margin-top:3px;line-height:1.45}
.lay-l u{display:block;text-decoration:none;font-family:var(--mono);font-size:.6875rem;
  color:var(--violet);margin-top:8px;padding-top:7px;border-top:1px solid rgba(107,63,168,.18);line-height:1.5}
.lay.crew .lay-l{background:linear-gradient(135deg,#FAF3E3,#F5EBD2)}
.lay.crew .lay-l::before{background:linear-gradient(180deg,var(--gold-lt),#A57722)}
.lay.crew .lay-l u{color:#8A6416;border-top-color:rgba(138,100,22,.22)}
.lay-c{padding:12px;display:grid;gap:8px;grid-template-columns:repeat(auto-fit,minmax(148px,1fr))}
.cell{border:1px solid var(--line);border-radius:var(--r-sm);padding:10px 12px;min-width:0;
  background:linear-gradient(150deg,#fff 0%,var(--panel) 100%);
  transition:transform .4s var(--ease),box-shadow .4s var(--ease),border-color .35s}
.cell:hover{transform:translateY(-2px);box-shadow:var(--shadow);border-color:var(--line2)}
.cell b{display:block;font-size:.875rem;color:var(--ink);line-height:1.35}
.cell i{display:block;font-style:normal;font-size:.75rem;color:var(--muted);margin-top:2px;line-height:1.45}
html.js .layers.pre .cell{opacity:0;transform:translateY(10px) scale(.98)}
html.js .layers.run .cell{animation:cellin .6s var(--ease) forwards;animation-delay:var(--d,0ms)}
@keyframes cellin{to{opacity:1;transform:none}}
@media(max-width:760px){.lay{grid-template-columns:minmax(0,1fr)}
  .lay-l{border-right:0;border-bottom:1px solid var(--line)}
  .lay-c{grid-template-columns:minmax(0,1fr)}}

/* the gate strip: two honest endings */
.gate2{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:22px}
.gate2>div{border:1px solid var(--line);border-radius:var(--r-sm);padding:14px 16px;background:#fff;font-size:.875rem}
.gate2 .pass{border-left:3px solid var(--violet)}
.gate2 .stop{border-left:3px solid var(--magenta)}
.gate2 b{font-family:var(--mono);font-size:.6875rem;letter-spacing:.08em;text-transform:uppercase;display:block;margin-bottom:5px}
.gate2 .pass b{color:var(--violet)}.gate2 .stop b{color:var(--magenta)}
@media(max-width:640px){.gate2{grid-template-columns:minmax(0,1fr)}}

/* ---------- pipeline (PolicyDesk): stations on a rail ---------- */
.pipe{position:relative;max-width:820px;margin:8px 0 0;padding-left:30px}
.pipe::before{content:"";position:absolute;left:9px;top:14px;bottom:14px;width:1px;background:var(--line2)}
.stn{position:relative;padding:0 0 26px}
.stn:last-child{padding-bottom:0}
.stn::before{content:"";position:absolute;left:-27px;top:8px;width:11px;height:11px;border-radius:50%;
  background:#fff;border:2px solid var(--iris)}
.stn:last-child::before{background:var(--iris)}
.stn .sk{font-family:var(--mono);font-size:.6875rem;font-weight:600;letter-spacing:.09em;
  text-transform:uppercase;color:var(--violet)}
.stn h3{margin:3px 0 3px;font-size:1.1rem}
.stn p{margin:0;font-size:.9375rem;color:var(--muted)}
/* one marker descends the rail, once */
.pipe .runner{position:absolute;left:5.5px;top:14px;width:8px;height:8px;border-radius:50%;
  background:var(--iris);box-shadow:0 0 9px rgba(134,89,196,.55);opacity:0}
html.js .pipe.run .runner{animation:pdesc var(--pd,4.5s) linear forwards}
@keyframes pdesc{0%{top:14px;opacity:0}6%{opacity:1}92%{opacity:1}
  100%{top:calc(100% - 22px);opacity:0}}
html.js .pipe.pre .stn{opacity:.35}
html.js .pipe.run .stn{animation:stin .6s var(--ease) forwards;animation-delay:var(--d,0ms)}
@keyframes stin{to{opacity:1}}

/* ---------- notes, quotes ---------- */
.note{background:var(--wash);border:1px solid var(--line);border-left:3px solid var(--gold);
  border-radius:var(--r);padding:17px 21px;margin:24px 0;font-size:.9375rem;color:var(--body);line-height:1.6}
.note strong{color:var(--ink)}
.quoteband{border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  padding:44px 0;margin:10px 0}
.quoteband .q{font-size:clamp(1.4rem,2.4vw,2rem);line-height:1.3;color:var(--ink);
  font-weight:600;letter-spacing:-.015em;max-width:26ch;position:relative;padding-left:26px}
.quoteband .q::before{content:"";position:absolute;left:0;top:6px;bottom:6px;width:3px;background:var(--gold)}
.quoteband cite{display:block;font-family:var(--mono);font-style:normal;font-size:.75rem;
  letter-spacing:.06em;text-transform:uppercase;color:var(--sec);margin:14px 0 0 26px}

/* ---------- wall ---------- */
.wall{display:flex;flex-wrap:wrap;gap:8px;margin:22px 0 0}
.wall>div{flex:1 1 128px;height:64px;border:1px solid var(--line);border-radius:var(--r-sm);
  display:grid;place-items:center;padding:6px 10px;background:#fff;min-width:0;overflow:hidden;
  transition:transform .4s var(--ease),box-shadow .4s var(--ease)}
.wall>div:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
.wall img{max-height:46px;max-width:100%;width:auto;object-fit:contain}
.wall .nm{font-size:.8125rem;font-weight:600;color:#2A2542;text-align:center;line-height:1.2}
.wall .nm.cap{text-transform:uppercase;letter-spacing:.06em;font-size:.6875rem}
.wall .nm.lc{text-transform:lowercase}

/* ---------- video ---------- */
.vids{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media(max-width:900px){.vids{grid-template-columns:minmax(0,1fr)}}
.vid{border:1px solid var(--line2);border-radius:var(--r);overflow:hidden;background:#fff;display:flex;flex-direction:column;
  transition:transform .4s var(--ease),box-shadow .4s var(--ease)}
.vid:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.vid video{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;background:#141031;flex:none}
.vid .vm{padding:15px 17px;background:#fff;border-top:1px solid var(--line);flex:1}
.vid .vk{font-family:var(--mono);font-size:.6875rem;letter-spacing:.07em;text-transform:uppercase;
  color:var(--violet);display:block;margin-bottom:6px}
.vid h3{font-size:1.05rem;margin-bottom:5px}
.vid p{font-size:.875rem;color:var(--muted);margin:0;line-height:1.55}

/* ---------- problem ledger (PolicyDesk) ---------- */
.probs .lrow p{max-width:66ch}

/* ---------- two-col ruled list ---------- */
.ruled{display:grid;grid-template-columns:1fr 1fr;gap:0 56px;border-top:1px solid var(--line)}
.ruled>div{padding:18px 2px;border-bottom:1px solid var(--line)}
.ruled b{display:block;color:var(--ink);font-weight:600;margin-bottom:4px}
.ruled p{margin:0;font-size:.9075rem;color:var(--muted)}
@media(max-width:860px){.ruled{grid-template-columns:minmax(0,1fr)}}

/* ---------- reveal (gated behind html.js) ---------- */
html.js .rv{opacity:0;transform:translateY(14px)}
html.js .rv.in{opacity:1;transform:none;transition:opacity .8s var(--ease),transform .8s var(--ease)}

/* ---------- CTA + footer ---------- */
.cta{text-align:center;color:#CFC6E6}
.cta h2{max-width:26ch;margin:0 auto 12px}
.cta .lede{color:#B9AED8;margin:0 auto}
.cta .btn-row{justify-content:center}
.foot{background:var(--deep);color:#A79BC6;padding:54px 0 0;font-size:.875rem}
.foot h4{color:#fff;font-family:var(--mono);font-size:.6875rem;letter-spacing:.1em;
  text-transform:uppercase;margin-bottom:14px;font-weight:500}
.foot a{color:#C6BCDD;display:block;margin-bottom:8px}
.foot a:hover{color:#fff;text-decoration:none}
.foot-grid{display:grid;grid-template-columns:1.7fr 1fr 1fr 1fr 1.1fr;gap:28px}
.foot-brand img{height:34px;margin-bottom:14px}
.foot-brand p{color:#9589B4;max-width:34ch;line-height:1.6}
.foot-base{margin-top:42px;border-top:1px solid rgba(255,255,255,.1);padding:18px 0 22px;
  display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;font-size:.8125rem;color:#877BA6}
.foot-base a{display:inline;margin:0 0 0 16px}
@media(max-width:900px){.foot-grid{grid-template-columns:1fr 1fr}}

/* ---------- responsive ---------- */
@media(max-width:980px){
  .hero-grid{grid-template-columns:minmax(0,1fr);gap:40px}
  .hero-stats{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:940px){
  .nav-links{position:absolute;left:0;right:0;top:100%;height:calc(100vh - var(--nav-h));
    height:calc(100dvh - var(--nav-h));background:#fff;flex-direction:column;align-items:stretch;
    gap:0;padding:8px var(--gut) 36px;overflow-y:auto;margin-left:0;
    transform:translateY(-102%);opacity:0;visibility:hidden;
    transition:transform .35s var(--ease),opacity .25s,visibility .35s}
  .nav.open .nav-links{transform:none;opacity:1;visibility:visible}
  .nav-links a{font-size:1.0625rem;padding:15px 4px;border-bottom:1px solid var(--line);border-radius:0}
  .nav-links .btn{margin-top:14px;justify-content:center;border-bottom:0}
  .burger{display:block}
}
@media(max-width:560px){
  :root{--gut:20px;--sect:56px}
  .trace li{grid-template-columns:44px 76px minmax(0,1fr);padding-left:16px;gap:0 8px}
  .duo>div,.flag{padding:22px 20px}
}

/* the headline is hard-broken into exactly three lines — "AI development," /
   "engineered for" / the rotating word — so its height is identical for every
   word at every viewport */
.hero-grid h1{min-height:3.35em}

/* ---------- cycling hero console: three runs, one frame ---------- */
.console.cycle .con-bd{min-height:266px;position:relative}
.crun{display:none}
.crun.on{display:block}
.con-hd .runid{font-family:var(--mono);font-size:.6875rem;color:var(--gold-lt);
  letter-spacing:.06em;margin-left:auto;white-space:nowrap}
.con-hd .runid b{color:#fff;font-weight:600}
.console.cycle .con-hd .st{margin-left:10px}
html.js .console.cycle .crun.on .trace li{opacity:0;transform:translateY(4px)}
html.js .console.cycle.play .crun.on .trace li{animation:tline .5s var(--ease) forwards;
  animation-delay:var(--d,0ms)}


/* ---------- state legend band ---------- */
.legendband{background:var(--wash);border-bottom:1px solid var(--line);padding:13px 0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56'%3E%3Cpath d='M0 28h56M28 0v56' stroke='%236B3FA8' stroke-opacity='.04'/%3E%3C/svg%3E")}
.legendband .legend{margin:0;justify-content:center;row-gap:8px}
.legendband .lbl{margin:0}
@media(max-width:640px){.legendband{padding:11px 0}.legendband .legend{justify-content:flex-start}}

/* ---------- rotating hero word ---------- */
.rot{display:inline-block;position:relative;color:var(--gold-lt);min-width:0}
.rot i{font-style:normal}
html.js .rot i{display:inline-block}
html.js .rot i.swap-out{animation:rotOut .45s var(--ease) forwards}
html.js .rot i.swap-in{animation:rotIn .5s var(--ease)}
@keyframes rotOut{to{opacity:0;transform:translateY(-12px)}}
@keyframes rotIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* ---------- sequential trace consoles ---------- */
.conseq{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;align-items:start}
@media(max-width:980px){.conseq{grid-template-columns:minmax(0,1fr)}}
.conseq .console{transition:opacity .6s var(--ease),filter .6s var(--ease),transform .6s var(--ease)}
html.js .conseq .console.wait{opacity:.38;filter:saturate(.6);transform:translateY(6px)}
.conseq .trace li{grid-template-columns:34px 76px minmax(0,1fr)}
.con-hd .runid{font-family:var(--mono);font-size:.6875rem;color:var(--gold-lt);
  letter-spacing:.06em;margin-left:auto;white-space:nowrap}
.con-hd .runid b{color:#fff;font-weight:600}

/* ---------- ledger rows, sharpened ---------- */
.lrow{position:relative}
.lrow::before{content:"";position:absolute;left:-4px;top:14px;bottom:14px;width:3px;
  background:linear-gradient(180deg,var(--gold-lt),var(--magenta));
  transform:scaleY(0);transform-origin:top;transition:transform .4s var(--ease)}
.lrow:hover::before{transform:scaleY(1)}
.lrow:hover .gly{border-color:var(--violet);color:var(--magenta);transform:translateY(-1px)}
.lrow .gly{transition:border-color .35s,color .35s,transform .35s var(--ease)}
.lrow:hover h3,.lrow:hover h3 a{color:var(--violet)}
.lrow h3,.lrow h3 a{transition:color .3s}

/* ---------- reduced motion: everything lands settled ---------- */
@media(prefers-reduced-motion:reduce){
  html.js .rv,html.js .console.pre .trace li,html.js .layers.pre .cell,html.js .pipe.pre .stn{
    opacity:1;transform:none;animation:none}
  html.js .conseq .console.wait{opacity:1;filter:none;transform:none}
  html.js .rot i.swap-out,html.js .rot i.swap-in{animation:none}
  .lrow::before{transition:none}
  .pipe .runner{display:none}
  .btn,.cell,.vid,.wall>div,.lrow{transition:none}
}

/* ============================================================================
   COMPAT LAYER — the sixteen generated pages speak the original component
   vocabulary (.card, .eyebrow, .arch, .fx …). Everything below restyles that
   vocabulary in the Fable language: 4–5px corners, gold-tick kickers, violet
   wash, ledger borders, IBM Plex. Diagrams render in their settled state.
   ============================================================================ */

/* ---------- section headers ---------- */
.eyebrow{display:flex;align-items:center;gap:10px;font-family:var(--mono);font-size:.75rem;
  font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--violet);margin-bottom:13px}
.eyebrow::before{content:"";width:14px;height:2px;background:var(--gold);flex:none}
.dark .eyebrow{color:#CBB8EE}
.hdr{max-width:72ch;margin-bottom:30px}
.hdr p{margin-bottom:0}
@media(min-width:1040px){
  .sect>.wrap>.hdr:has(h2):has(.lede){display:grid;max-width:none;
    grid-template-columns:minmax(0,1.02fr) minmax(0,1fr);column-gap:54px;align-items:start}
  .sect>.wrap>.hdr:has(h2):has(.lede) .eyebrow{grid-column:1/-1;margin-bottom:10px}
  .sect>.wrap>.hdr:has(h2):has(.lede) h2{margin-bottom:0}
  .sect>.wrap>.hdr:has(h2):has(.lede) .lede{max-width:60ch;padding-top:5px}
}

/* ---------- bands ---------- */
.tinted{background-color:var(--wash);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56'%3E%3Cpath d='M0 28h56M28 0v56' stroke='%236B3FA8' stroke-opacity='.045'/%3E%3Ccircle cx='28' cy='28' r='1.3' fill='%236B3FA8' fill-opacity='.09'/%3E%3C/svg%3E")}
.sect.dark{color:#fff;position:relative;overflow:hidden;
  background:
    radial-gradient(46% 42% at 8% 0%, rgba(214,62,150,.32) 0%, rgba(214,62,150,0) 62%),
    radial-gradient(50% 46% at 96% 100%, rgba(134,89,196,.28) 0%, rgba(134,89,196,0) 64%),
    linear-gradient(152deg,#5E2472 0%,#4A2578 30%,#332765 58%,#1E1B4E 100%)}
.sect.dark::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56'%3E%3Cpath d='M0 28h56M28 0v56' stroke='%23ffffff' stroke-opacity='.045'/%3E%3Ccircle cx='28' cy='28' r='1.4' fill='%23ffffff' fill-opacity='.12'/%3E%3C/svg%3E")}
.sect.dark>.wrap{position:relative;z-index:2}
.dark h1,.dark h2,.dark h3,.dark h4{color:#fff}
.dark .lede{color:#D9D1EE}
.dark p{color:#CFC6E4}
.dark strong,.dark b{color:#fff}
.gd{color:var(--gold-lt);font-style:normal}
.arw{display:inline-block}

/* ---------- grids & cards ---------- */
.grid{display:grid;gap:14px}
.grid>*{min-width:0}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media(max-width:980px){.g4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:860px){.g3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){.g2,.g3,.g4{grid-template-columns:minmax(0,1fr)}}
.card{background:linear-gradient(165deg,#fff 0%,#FCFBFE 55%,#F7F3FC 100%);
  border:1px solid var(--line);border-radius:var(--r);padding:21px 22px;
  position:relative;overflow:hidden;
  transition:border-color .4s var(--ease),box-shadow .45s var(--ease),transform .45s var(--ease)}
.card::after{content:"";position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,var(--iris),var(--magenta));
  transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease)}
.card:hover{border-color:var(--line2);box-shadow:var(--shadow);transform:translateY(-3px)}
.card:hover::after{transform:scaleX(1)}
.card h3{margin-bottom:7px}
.card h3 a{color:inherit}
.card h3 a:hover{color:var(--violet);text-decoration:none}
.card p{margin-bottom:0;font-size:.9375rem;color:var(--muted);max-width:none;line-height:1.6}
.card .tag{font-family:var(--mono);font-size:.6875rem;font-weight:500;letter-spacing:.07em;
  text-transform:uppercase;color:var(--violet);margin-bottom:10px;display:block}
.dark .card{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.14)}
.dark .card::after{display:none}
.dark .card:hover{border-color:rgba(255,255,255,.28);box-shadow:none}
.dark .card p{color:#C6BCDD}
.dark .card .tag{color:#CBB8EE}
.ib{width:40px;height:40px;border-radius:var(--r);display:grid;place-items:center;
  margin-bottom:14px;flex:none;background:#EBE4F7;border:1px solid #DDD2F0;
  transition:transform .5s var(--ease)}
.card:hover .ib{transform:scale(1.07)}
.ib svg{width:20px;height:20px}
.ib.c2{background:#F8EFDA;border-color:#EDDCB4}
.ib.c3{background:#F7E6F3;border-color:#EFD3E8}
.ib.c4{background:#E6E2F4;border-color:#D5CDEB}
.dark .ib{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.22)}
.step .num{font-family:var(--mono);font-size:.75rem;font-weight:500;color:var(--violet);
  letter-spacing:.06em;display:block;margin-bottom:9px}
.dark .step .num{color:var(--gold-lt)}

/* ---------- badges (legacy status vocabulary) ---------- */
.badge{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:.6875rem;
  font-weight:500;letter-spacing:.05em;text-transform:uppercase;padding:3px 10px;
  border-radius:var(--r-sm);white-space:nowrap;border:1px solid}
.badge::before{content:"";width:6px;height:6px;border-radius:1px;background:currentColor;flex:none}
.badge.live{background:#EFE8FA;color:var(--violet);border-color:#D6C7F0}
.badge.uat{background:#FBF3DE;color:#8A6416;border-color:#EBD9AC}
.badge.build{background:#F3F1F8;color:var(--sec);border-color:var(--line)}

/* ---------- metrics ---------- */
.metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin-top:40px;
  border-top:1px solid rgba(255,255,255,.16);gap:0 18px}
.metrics>div{padding:18px 18px 0 0;min-width:0}
.metrics .n{font-family:var(--mono);font-size:clamp(1.5rem,2.1vw,1.9rem);font-weight:600;color:#fff}
.metrics .n.v{color:var(--gold-lt)}
.metrics .l{font-family:var(--mono);font-size:.6875rem;letter-spacing:.07em;color:#B4A8D6;
  text-transform:uppercase;margin-top:5px;line-height:1.45}
.metrics.light{border-top-color:var(--line)}
.metrics.light .n{color:var(--ink)}
.metrics.light .n.v{color:var(--violet)}
.metrics.light .l{color:var(--sec)}
@media(max-width:700px){.metrics{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ---------- tables ---------- */
.tbl{width:100%;border-collapse:collapse;font-size:.9375rem;margin:22px 0;display:block;
  overflow-x:auto;-webkit-overflow-scrolling:touch}
.tbl th{background:var(--wash2);color:var(--ink);text-align:left;padding:10px 14px;
  font-weight:600;font-size:.75rem;border-bottom:1px solid var(--line2);
  font-family:var(--mono);letter-spacing:.05em;text-transform:uppercase}
.tbl td{padding:12px 14px;border-bottom:1px solid var(--line);vertical-align:top;color:var(--muted)}
.tbl td strong{color:var(--ink)}
@media(min-width:760px){.tbl{display:table}}
code{font-family:var(--mono);font-size:.855em;background:var(--wash2);
  padding:1px 6px;border-radius:var(--r-sm);color:var(--indigo);word-break:break-word}

/* ---------- diagram frame + flows (settled state) ---------- */
.dgm{background:linear-gradient(168deg,#FDFCFF 0%,#F6F2FC 100%);border:1px solid var(--line);
  border-radius:var(--r);padding:22px;margin:20px 0;position:relative;min-width:0;width:100%}
.dgm-scroll{width:100%;max-width:100%;min-width:0}
.dgm .cap{margin-top:18px;padding-top:14px;border-top:1px solid var(--line);
  font-size:.875rem;color:var(--muted);line-height:1.55}
.dgm .cap b{color:var(--ink);font-weight:600}
.dark .dgm{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.15)}
.dark .dgm .cap{color:#C6BCDD;border-top-color:rgba(255,255,255,.14)}
.dark .dgm .cap b{color:#fff}
.fx{display:flex;flex-direction:column;align-items:stretch;margin:2px 0}
.fx-n{position:relative;background:linear-gradient(150deg,#fff 0%,var(--panel) 100%);
  border:1px solid var(--line);border-radius:var(--r-sm);padding:12px 14px;min-width:0;flex:1 1 0}
.fx-k{font-family:var(--mono);font-size:.6875rem;font-weight:500;letter-spacing:.07em;
  text-transform:uppercase;color:var(--violet);display:block;margin-bottom:4px}
.fx-t{display:block;font-weight:600;color:var(--ink);font-size:1rem;line-height:1.3}
.fx-s{display:block;font-size:.875rem;color:var(--muted);margin-top:2px;line-height:1.4}
.fx-c{position:relative;flex:0 0 30px;align-self:center;width:1px;height:30px;background:var(--line2)}
.fx-br{display:flex;flex-direction:column;gap:10px;flex:1 1 0;min-width:0}
.fx-n.is-gate{border-color:var(--gold);border-left-width:2px}
.fx-n.is-gate .fx-k{color:#8A6416}
.fx-n.is-refuse{border-left:2px solid var(--magenta)}
.fx-n.is-refuse .fx-k{color:var(--magenta)}
.fx-n.is-end{border-left:2px solid var(--violet)}
.dark .fx-n{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.14)}
.dark .fx-t{color:#fff}.dark .fx-s{color:#C6BCDD}.dark .fx-k{color:#CBB8EE}
.dark .fx-c{background:rgba(255,255,255,.22)}
@media(min-width:1000px){
  .fx:not(.fx-v){flex-direction:row;align-items:stretch}
  .fx:not(.fx-v) .fx-c{width:30px;height:1px;flex:0 0 30px;align-self:center}
  .fx-br{gap:12px}
}
.fxc{display:flex;flex-wrap:wrap;gap:7px;margin:2px 0}
.fxc .st{flex:1 1 118px;min-width:0;display:block;background:#fff;border:1px solid var(--line);
  border-radius:var(--r-sm);padding:9px 8px;text-align:center;font-family:var(--mono);
  font-size:.8125rem;color:var(--ink);text-transform:none;letter-spacing:0;white-space:normal}
.fxc .st::before{display:none}
.fxc .st.is-end{border-left:2px solid var(--violet)}

/* ---------- layered architecture (legacy .arch vocabulary) ---------- */
.arch{border:1px solid var(--line2);border-radius:var(--r);overflow:hidden;
  background:linear-gradient(168deg,#FDFCFF 0%,#F6F2FC 100%)}
.arch-row{display:grid;grid-template-columns:210px minmax(0,1fr);border-top:1px solid var(--line)}
.arch-row:first-child{border-top:0}
.arch-lbl{background:linear-gradient(135deg,var(--wash) 0%,var(--wash2) 100%);
  border-right:1px solid var(--line);padding:15px 16px;position:relative;
  display:flex;flex-direction:column;justify-content:center;gap:3px}
.arch-lbl::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
  background:linear-gradient(180deg,var(--iris),var(--magenta))}
.arch-lbl b{font-family:var(--mono);font-size:.6875rem;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink);line-height:1.4}
.arch-lbl i{font-style:normal;font-size:.8125rem;color:var(--muted);line-height:1.45}
.arch-lbl u{display:block;text-decoration:none;font-family:var(--mono);font-size:.6875rem;
  color:var(--violet);margin-top:7px;padding-top:6px;border-top:1px solid rgba(107,63,168,.18);line-height:1.5}
.arch-cells{padding:12px;display:grid;gap:8px;grid-template-columns:repeat(auto-fit,minmax(146px,1fr))}
.arch-c{border:1px solid var(--line);border-radius:var(--r-sm);padding:10px 12px;min-width:0;
  background:linear-gradient(150deg,#fff 0%,var(--panel) 100%);
  transition:transform .4s var(--ease),box-shadow .4s var(--ease)}
.arch-c:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
.arch-c b{display:block;font-size:.875rem;font-weight:600;color:var(--ink);line-height:1.35}
.arch-c i{font-style:normal;display:block;font-size:.75rem;color:var(--muted);margin-top:2px;line-height:1.45}
.arch-c.acc{border-left:2px solid var(--violet)}
.arch-row.is-flow .arch-lbl{background:linear-gradient(135deg,#EFE7FB 0%,#E7DCF7 100%)}
.arch-row.is-flow .arch-lbl b{color:var(--violet)}
.arch-row.is-crew .arch-lbl{background:linear-gradient(135deg,#FAF3E3 0%,#F5EBD2 100%)}
.arch-row.is-crew .arch-lbl b{color:#8A6416}
.arch-row.is-crew .arch-lbl::before{background:linear-gradient(180deg,var(--gold-lt),#A57722)}
.crew{border:1px solid var(--line);border-radius:var(--r-sm);padding:11px;min-width:0;
  background:linear-gradient(150deg,#FFFDF8 0%,#FDF8EE 100%)}
.crew>b{display:block;font-family:var(--mono);font-size:.6875rem;letter-spacing:.06em;
  text-transform:uppercase;color:#8A6416;margin-bottom:7px;font-weight:600}
.crew ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px}
.crew li{font-size:.8125rem;color:var(--body);padding:6px 9px;background:#fff;
  border-radius:var(--r-sm);border:1px solid var(--line);line-height:1.3}
@media(max-width:759px){
  .arch-row{grid-template-columns:minmax(0,1fr)}
  .arch-lbl{border-right:0;border-bottom:1px solid var(--line)}
  .arch-cells{grid-template-columns:minmax(0,1fr);padding:11px}
}

/* ---------- founder timeline + bio ---------- */
.arc{position:relative;margin:32px 0;padding-left:34px}
.arc::before{content:"";position:absolute;left:8px;top:6px;bottom:6px;width:1px;background:var(--line2)}
.arc-i{position:relative;margin-bottom:26px}
.arc-i::before{content:"";position:absolute;left:-30px;top:6px;width:9px;height:9px;
  border-radius:50%;background:#fff;border:2px solid var(--violet)}
.arc-i h3{margin-bottom:4px}
.arc-i .w{font-size:1rem;color:var(--muted);margin-bottom:7px;max-width:64ch}
.arc-i .now{font-size:.9375rem;color:var(--indigo);background:var(--wash);border:1px solid var(--line);
  border-radius:var(--r-sm);padding:9px 12px;display:block;max-width:64ch;line-height:1.5}
.arc-i .now b{color:var(--ink);font-weight:600}
html.js .arc-i{opacity:0;transform:translateY(14px)}
html.js .arc-i.in{opacity:1;transform:none;transition:opacity .8s var(--ease),transform .8s var(--ease)}
.bio{display:grid;grid-template-columns:172px minmax(0,1fr);gap:28px;align-items:start;margin-bottom:8px}
.bio img{width:172px;height:auto;aspect-ratio:1/1;object-fit:contain;background:var(--wash2);
  border-radius:var(--r);border:1px solid var(--line)}
.bio .nm{font-size:clamp(1.3rem,1.9vw,1.55rem);font-weight:600;color:var(--ink);
  letter-spacing:-.018em;line-height:1.25}
.bio .rl{color:var(--muted);font-size:1rem;margin-top:8px;line-height:1.6}
@media(max-width:640px){.bio{grid-template-columns:minmax(0,1fr)}}
.quote{border-left:3px solid var(--gold);padding:2px 0 2px 20px;margin:24px 0;
  font-size:clamp(1.0625rem,1.4vw,1.25rem);color:var(--ink);line-height:1.5}
.quote cite{display:block;font-family:var(--mono);font-size:.75rem;font-style:normal;
  color:var(--sec);margin-top:11px;letter-spacing:.04em}
.dark .quote{color:#fff;border-left-color:var(--gold-lt)}
.dark .quote cite{color:#B4A8D6}

/* ---------- legacy video card ---------- */
.vid video{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;background:#141031}
.vid-meta{padding:15px 17px;background:#fff;border-top:1px solid var(--line);flex:1}
.vid-meta .tag{font-family:var(--mono);font-size:.6875rem;letter-spacing:.07em;
  text-transform:uppercase;color:var(--violet);display:block;margin-bottom:6px}
.vid-meta h3{font-size:1.05rem;margin-bottom:5px}
.vid-meta p{font-size:.875rem;color:var(--muted);margin:0;line-height:1.55}

/* ---------- conversion ladder ---------- */
.cta-note{margin-top:16px;font-family:var(--mono);font-size:.75rem;letter-spacing:.05em;color:#B9AED8}
.next{border-top:1px solid var(--line);margin-top:46px;padding-top:26px}
.wrap > .next:first-child{margin-top:0}
.next .nx-k{font-family:var(--mono);font-size:.6875rem;letter-spacing:.09em;text-transform:uppercase;
  color:var(--sec);display:block;margin-bottom:14px}
.next-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.next-row a{border:1px solid var(--line);border-radius:var(--r);padding:14px 16px;display:block;
  color:var(--ink);font-weight:600;font-size:.9375rem;background:#fff;
  transition:border-color .3s,transform .35s var(--ease),box-shadow .35s var(--ease)}
.next-row a:hover{text-decoration:none;border-color:var(--violet);transform:translateY(-2px);box-shadow:var(--shadow)}
.next-row a i{display:block;font-style:normal;font-family:var(--mono);font-size:.6875rem;
  letter-spacing:.07em;text-transform:uppercase;color:var(--violet);margin-bottom:5px;font-weight:500}
@media(max-width:760px){.next-row{grid-template-columns:minmax(0,1fr)}}
.steps3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:30px}
.steps3>div{border:1px solid var(--line);border-left:3px solid var(--gold);border-radius:var(--r);
  background:#fff;padding:18px 20px}
.steps3 .sn{font-family:var(--mono);font-size:.6875rem;letter-spacing:.08em;color:#8A6416;
  display:block;margin-bottom:7px;font-weight:600}
.steps3 b{display:block;color:var(--ink);margin-bottom:4px}
.steps3 p{margin:0;font-size:.875rem;color:var(--muted)}
@media(max-width:760px){.steps3{grid-template-columns:minmax(0,1fr)}}
.softask{margin-top:14px;font-size:.9375rem;max-width:none}
.softask a{font-weight:600}

/* ---------- odds and ends ---------- */
.wall .nm.tgt{font-weight:700;letter-spacing:-.02em}
.wall .nm.srf{font-family:Georgia,serif}
.cta .cta-note{color:#B9AED8}
h4{font-size:1rem;line-height:1.45}
small,.small{font-size:.875rem}
@media(prefers-reduced-motion:reduce){
  html.js .arc-i{opacity:1;transform:none}
  .card::after{transition:none}
  .card:hover,.arch-c:hover,.next-row a:hover{transform:none}
}

/* ============================================================================
   DENSITY LAYER — tablet and mobile give back the white space desktop earns.
   Appended last so it wins the cascade at equal specificity.
   ============================================================================ */
@media(max-width:1100px){
  :root{--sect:52px}
  .hero{padding:54px 0 44px}
  .hero-grid{gap:30px}
  .hero-stats{margin-top:32px;gap:16px;padding-top:20px}
  .shd{margin-bottom:26px;padding-bottom:16px}
  .btn-row{margin-top:20px}
  .foot{padding:42px 0 0}
  .foot-grid{gap:22px}
  .quoteband{padding:30px 0}
}
@media(max-width:640px){
  :root{--sect:32px;--gut:18px}
  .hero{padding:32px 0 26px}
  .hero-grid{gap:24px}
  .hero-stats{margin-top:24px;gap:12px;padding-top:16px}
  .shd{margin-bottom:18px;padding-bottom:12px}
  .btn-row{margin-top:16px;gap:10px}
  .grid{gap:10px}
  .card{padding:15px 16px}
  .ib{margin-bottom:10px}
  .lrow{padding:13px 2px;gap:12px}
  .def{padding:12px 2px;gap:11px}
  .flag{padding:17px 16px;gap:18px;margin-bottom:20px}
  .flag .fm{padding-top:14px;gap:12px}
  .duo>div{padding:17px 16px}
  .duo-ft{padding:13px 16px}
  .chips{margin:12px 0;gap:6px}
  .note{padding:12px 14px;margin:14px 0}
  .steps3{gap:10px;margin-top:18px}
  .steps3>div{padding:13px 14px}
  .next{margin-top:26px;padding-top:16px}
  .next-row{gap:8px}
  .next-row a{padding:11px 13px}
  .quoteband{padding:22px 0;margin:6px 0}
  .conseq{gap:12px}
  .pipe .stn{padding-bottom:16px}
  .wall{gap:6px;margin-top:14px}
  .wall>div{height:54px;flex:1 1 100px;padding:5px 8px}
  .wall img{max-height:40px}
  .legend{gap:7px;margin-top:12px}
  .metrics{margin-top:22px}
  .metrics>div{padding:12px 12px 0 0}
  .lay-c,.arch-cells{padding:9px;gap:6px}
  .lay-l,.arch-lbl{padding:11px 13px}
  .dgm{padding:15px;margin:14px 0}
  .tbl td{padding:9px 10px}
  .foot{padding:32px 0 0;font-size:.8125rem}
  .foot-grid{gap:18px}
  .foot-base{margin-top:24px}
  h2{margin-bottom:.4em}
  p{margin-bottom:.85em}
}

/* ============================================================================
   V2.0 additions — same tokens, same rules. Nothing above this line changed.
   ============================================================================ */
/* proof line: which live product proves a capability */
.grid .card{display:flex;flex-direction:column}
.card .proof{margin-top:auto;padding-top:12px;border-top:1px solid var(--line);font-size:.875rem;
  color:var(--muted);display:flex;flex-wrap:wrap;gap:6px 8px;align-items:center}
.card .proof .pk{font-family:var(--mono);font-size:.6875rem;letter-spacing:.08em;text-transform:uppercase;color:var(--gold)}
.card .proof a{color:var(--ink);font-weight:500}
.card .proof .st{margin-left:2px}
/* two entry paths on the home page */
/* (.pway, not .path — .path is the trace console's run label) */
.pways{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.pway{display:block;border:1px solid var(--line2);border-left:3px solid var(--gold);border-radius:var(--r);
  padding:26px 28px;background:linear-gradient(160deg,#fff 0%,var(--panel) 100%);color:inherit;
  transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.pway:hover{text-decoration:none;transform:translateY(-2px);box-shadow:var(--shadow)}
.pway .kicker{margin-bottom:8px}
.pway h3{margin:0 0 8px;color:var(--ink)}
.pway p{color:var(--muted);font-size:.9375rem;margin-bottom:14px}
.pway .go{font-family:var(--mono);font-size:.75rem;letter-spacing:.06em;text-transform:uppercase;color:var(--violet)}
@media(max-width:860px){.pways{grid-template-columns:minmax(0,1fr)}}
@media(max-width:640px){.pway{padding:18px 18px}}
/* case study: challenge beside what was built */
.cs-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:48px;align-items:start}
@media(max-width:900px){.cs-grid{grid-template-columns:minmax(0,1fr);gap:32px}}
.cs-list{list-style:none;margin:8px 0 0;padding:0}
.cs-list li{position:relative;padding:12px 0 12px 22px;border-top:1px solid var(--line);font-size:.9843rem;color:var(--body)}
.cs-list li:last-child{border-bottom:1px solid var(--line)}
.cs-list li::before{content:"";position:absolute;left:2px;top:19px;width:8px;height:8px;background:var(--gold);border-radius:1px}
/* tables on phones: columns keep a readable width and the table scrolls
   sideways inside its own container, instead of squeezing every column into a
   one-word-per-line strip */
@media(max-width:640px){
  .tbl td,.tbl th{min-width:170px}
  .tbl td:first-child,.tbl th:first-child{min-width:130px}
  .tbl{border:1px solid var(--line);border-radius:var(--r-sm)}
}
/* while a table scrolls sideways, a soft shadow on the edge that has more
   content signals it (scroll shadows: the covers move with the content, the
   shadows stay put) */
@media(max-width:759px){
  .tbl{background:
    linear-gradient(to right,#fff 40%,rgba(255,255,255,0)) 0 0,
    linear-gradient(to left,#fff 40%,rgba(255,255,255,0)) 100% 0,
    linear-gradient(to right,rgba(31,24,64,.16),rgba(31,24,64,0)) 0 0,
    linear-gradient(to left,rgba(31,24,64,.16),rgba(31,24,64,0)) 100% 0;
    background-repeat:no-repeat;background-size:36px 100%,36px 100%,14px 100%,14px 100%;
    background-attachment:local,local,scroll,scroll}
  .tbl th{background-color:var(--wash2)}
}

/* workflow lists inside domain cards */
.card ul{margin:10px 0 0;padding-left:18px;color:var(--muted);font-size:.9375rem;line-height:1.75}
.card ul li{padding-left:2px}

/* ---------- running system panels (home): a layer map with a live trace ----------
   Same surface as the trace console. Nodes are real HTML (they reflow at any
   width); the edges and the travelling token are drawn by app.js in two SVG
   overlays, one beneath the nodes, one above. */
.sys-hd{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:14px 40px;align-items:end;margin-top:46px}
.shd+.sys-hd{margin-top:0}
.sys-hd h3{font-size:clamp(1.15rem,1.6vw,1.4rem);margin-bottom:6px}
.sys-hd p{margin:0;color:var(--muted);font-size:.9843rem;max-width:66ch}
.sys-hd .btn-row{margin-top:0}
.sysd{margin-top:20px}
.sys-bd{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr)}
.sys-map{position:relative;padding:14px;border-right:1px solid var(--con-line);min-width:0;font-family:var(--font)}
.sl{display:grid;grid-template-columns:118px minmax(0,1fr);gap:10px;padding:9px 0;border-top:1px solid var(--con-line);align-items:start;position:relative;z-index:1}
.sl:first-child{border-top:0;padding-top:0}
.sl:last-child{padding-bottom:0}
.sl-l{padding-top:2px}
.sl-l b{display:block;font-family:var(--mono);font-size:.6875rem;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:#CBB8EE;line-height:1.4}
.sl-l i{display:block;font-style:normal;font-size:.6875rem;color:var(--con-dim);margin-top:3px;line-height:1.4}
.sl-c{display:grid;gap:8px;grid-template-columns:repeat(auto-fit,minmax(104px,1fr))}
.sn{position:relative;z-index:1;border:1px solid #3F3378;border-radius:var(--r-sm);padding:7px 9px;min-width:0;
  background:#241C55;transition:border-color .35s,background .35s,box-shadow .35s}
.sn b{display:block;font-size:.75rem;font-weight:600;color:#DDD6F3;line-height:1.3}
.sn i{display:block;font-style:normal;font-size:.6875rem;color:var(--con-dim);margin-top:1px;line-height:1.35}
.sn.on{border-color:#8C79D6;background:#2D2468}
.sn.on b{color:#fff}
.sn.now{border-color:var(--gold-lt);box-shadow:0 0 0 1px rgba(227,169,58,.35),0 0 18px rgba(227,169,58,.28)}
.sn.stop{border-color:#E273BD;box-shadow:0 0 0 1px rgba(226,115,189,.35),0 0 16px rgba(226,115,189,.25)}
.sys-ov{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;overflow:visible;display:block}
.sys-ov.lo{z-index:0}
.sys-ov.hi{z-index:3}
.sys-ov .e{fill:none;stroke:var(--gold-lt);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;opacity:.95;transition:stroke .6s,opacity .6s}
.sys-ov .e.old{stroke:#8C79D6;opacity:.5}
.sys-ov .tk1{fill:var(--gold-lt)}
.sys-ov .tk2{fill:rgba(227,169,58,.26)}
.sys-ov .tk{transition:opacity .3s}
.sys-tr{min-width:0;display:flex;flex-direction:column}
.sys-tr .crun{display:none;flex:1;flex-direction:column}
.sys-tr .crun.on{display:flex}
.sys-tr .trace{padding:12px 0 10px;flex:1}
.sys-tr .trace li{grid-template-columns:30px 82px minmax(0,1fr);padding-right:14px}
html.js .sysd .trace li{opacity:.3;transition:opacity .35s}
html.js .sysd .trace li.show{opacity:1}
.sysd .trace li.cur .d{color:#fff}
.sysd .trace li.cur::after{box-shadow:0 0 0 3px rgba(227,169,58,.22)}
.sys-tr .con-ft{margin-top:auto}
@media(max-width:1000px){
  .sys-bd{grid-template-columns:minmax(0,1fr)}
  .sys-map{border-right:0;border-bottom:1px solid var(--con-line)}
}
@media(max-width:860px){.sys-hd{grid-template-columns:minmax(0,1fr);gap:8px}.sys-hd .btn-row{margin-top:6px}}
@media(max-width:640px){
  .sys-hd{margin-top:30px}
  .sysd{margin-top:14px}
  .sys-map{padding:10px}
  .sl{grid-template-columns:minmax(0,1fr);gap:6px;padding:7px 0}
  .sl-l{display:flex;flex-wrap:wrap;gap:2px 10px;align-items:baseline}
  .sl-l i{margin-top:0}
  .sl-c{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
  .sn{padding:6px 8px}
  .sn i{display:none}
  .sys-tr .trace li{grid-template-columns:28px 76px minmax(0,1fr)}
}
@media(prefers-reduced-motion:reduce){
  html.js .sysd .trace li{opacity:1}
  .sys-ov{display:none}
  .sn{transition:none}
}

/* ---------- running panels: narrow screens ----------
   The header wraps instead of pushing its status badge off the edge, and the
   layer label sits on the console ground so a connector passing between two
   stacked layers cannot run through its text. */
@media(max-width:760px){
  .sysd .con-hd{flex-wrap:wrap;row-gap:6px}
  .sysd .con-hd .path{flex:1 1 100%;order:3;white-space:normal;overflow:visible}
  .sysd .con-hd .runid{margin-left:auto}
}
@media(max-width:640px){
  .sl-l{background:var(--console);padding:2px 4px;margin:0 -4px;border-radius:var(--r-sm)}
}