:root{
/* bright is the default; the product windows (.frame/.console) stay dark on purpose */
--bg:#fff;--bg2:#f5f5f7;--panel:#fff;--panel2:#f5f5f7;--white:#1d1d1f;
--ink:#1d1d1f;--ink2:#424245;--muted:#545458;--muted2:#6e6e73;
--body:#424245;--strong:#1d1d1f;
--line:rgba(0,0,0,.1);--line-soft:rgba(0,0,0,.06);
--line2:rgba(0,0,0,.1);--line2-soft:rgba(0,0,0,.055);
--card:#fff;--card2:#f5f5f7;--tint:#f5f5f7;
--blue:#0071e3;--blue2:#0071e3;--violet:#5b4bc1;--gold:#a76b06;--green:#1a7f45;--amber:#8a6100;--red:#ff5f57;
--max:1120px;--pad:clamp(20px,5vw,44px);--r:26px;
--ease:cubic-bezier(.22,1,.36,1);--ease2:cubic-bezier(.34,1.3,.64,1);
--font:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Helvetica Neue",Helvetica,Arial,sans-serif;
--mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--white);font-family:var(--font);line-height:1.5;
letter-spacing:-.01em;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}
h1,h2,h3,h4{font-weight:600;letter-spacing:-.045em;line-height:1.1;margin:0}
p{margin:0}
a{color:inherit;text-decoration:none}
ul{margin:0;padding:0;list-style:none}
.wrap{width:min(100% - calc(var(--pad) * 2),var(--max));margin-inline:auto}
.mono{font-family:var(--mono);font-size:13px;letter-spacing:0}
.lead{font-size:clamp(17.5px,1.7vw,21px);color:var(--body);letter-spacing:-.015em;line-height:1.6}
.grain{position:fixed;inset:0;z-index:60;pointer-events:none;opacity:.028;mix-blend-mode:multiply;
background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/></filter><rect width='200' height='200' filter='url(%23n)'/></svg>")}

/* ─────────── reveal choreography ─────────── */
[data-reveal]{opacity:0;transform:translateY(26px);transition:opacity .95s var(--ease),transform .95s var(--ease)}
[data-reveal].in{opacity:1;transform:none}
[data-reveal="scale"]{transform:translateY(34px) scale(.965)}
[data-reveal="scale"].in{transform:none}
@media(prefers-reduced-motion:reduce){
html{scroll-behavior:auto}
[data-reveal]{opacity:1!important;transform:none!important;transition:none!important}
.orb,.sheen,.live-dot,.marquee-track{animation:none!important}
}

/* ─────────── nav ─────────── */
.nav{position:fixed;top:0;left:0;right:0;z-index:50;transition:background .4s var(--ease),border-color .4s,backdrop-filter .4s;border-bottom:1px solid transparent}
.nav.solid{background:rgba(255,255,255,.72);backdrop-filter:saturate(180%) blur(22px);-webkit-backdrop-filter:saturate(180%) blur(22px);border-color:var(--line-soft)}
.nav-in{min-height:56px;display:flex;align-items:center;gap:20px;flex-wrap:wrap;padding:6px 0}
.brand{display:inline-flex;align-items:center;gap:9px;font-size:14px;font-weight:600;letter-spacing:-.02em;min-height:44px}
.brand i{width:7px;height:7px;border-radius:50%;background:var(--blue);box-shadow:0 0 0 4px rgba(41,151,255,.16)}
.nav-links{display:flex;align-items:center;flex-wrap:wrap;gap:20px;margin-left:auto;font-size:13.5px;color:var(--body)}
.nav-links a{transition:color .3s;display:inline-flex;align-items:center;min-height:40px}
.nav-links a:hover{color:#000}
.nav-cta{display:inline-flex;align-items:center;gap:6px;padding:7px 15px;border-radius:980px;background:var(--blue2);color:#fff!important;font-weight:500}
.nav-cta:hover{background:#0077ed}
.burger{display:none;margin-left:auto;border:0;background:none;color:var(--white);font-size:20px;padding:8px;cursor:pointer}

/* ─────────── hero ─────────── */
.hero{position:relative;min-height:min(100svh,940px);display:flex;align-items:center;overflow:hidden;padding:clamp(110px,16vh,160px) 0 clamp(60px,9vh,90px)}
.orbs{position:absolute;inset:-20% -10% auto;height:150%;pointer-events:none;filter:blur(30px);will-change:transform}
.orb{position:absolute;border-radius:50%;mix-blend-mode:screen}
.orb.a{width:52vw;height:52vw;left:6%;top:2%;background:radial-gradient(circle,rgba(0,113,227,.20),transparent 68%);animation:drift1 26s ease-in-out infinite}
.orb.b{width:44vw;height:44vw;right:2%;top:14%;background:radial-gradient(circle,rgba(122,92,255,.18),transparent 68%);animation:drift2 32s ease-in-out infinite}
.orb.c{width:38vw;height:38vw;left:38%;bottom:-12%;background:radial-gradient(circle,rgba(247,201,108,.22),transparent 70%);animation:drift3 38s ease-in-out infinite}
@keyframes drift1{50%{transform:translate3d(6%,4%,0) scale(1.12)}}
@keyframes drift2{50%{transform:translate3d(-7%,6%,0) scale(1.08)}}
@keyframes drift3{50%{transform:translate3d(3%,-7%,0) scale(1.14)}}
.spot{position:absolute;inset:0;pointer-events:none;background:radial-gradient(340px 340px at var(--mx,50%) var(--my,20%),rgba(0,113,227,.06),transparent 70%)}
.hero-in{position:relative;z-index:2}
.eyebrow{display:inline-flex;align-items:center;gap:9px;padding:6px 14px;border-radius:980px;border:1px solid var(--line);background:rgba(255,255,255,.04);font-size:12.5px;font-weight:600;letter-spacing:.15em;text-transform:uppercase;color:var(--muted)}
h1{margin:24px 0 0;font-size:clamp(46px,9.2vw,124px);line-height:.96;letter-spacing:-.058em;max-width:24ch;color:var(--strong);
background:linear-gradient(180deg,#1d1d1f 30%,rgba(29,29,31,.62));-webkit-background-clip:text;background-clip:text;color:transparent;background-size:100% 200%}
h1 .shine{background:linear-gradient(100deg,#1d1d1f 18%,#0071e3 42%,#1d1d1f 62%,#6b4bd6 80%,#1d1d1f);-webkit-background-clip:text;background-clip:text;color:transparent;background-size:220% 100%;animation:sheen 7s linear infinite}
@keyframes sheen{to{background-position:-220% 0}}
.hero-sub{margin-top:28px;max-width:62ch;font-size:clamp(17px,1.75vw,22px);color:var(--body);letter-spacing:-.018em}
.hero-sub b{color:var(--strong);font-weight:600}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:36px}
.btn{display:inline-flex;align-items:center;gap:8px;padding:14px 26px;border-radius:980px;font-size:15px;font-weight:500;
letter-spacing:-.01em;border:1px solid transparent;transition:transform .4s var(--ease2),background .3s,box-shadow .4s}
.btn:hover{transform:translateY(-2px)}
.btn-primary{background:var(--blue2);color:#fff;box-shadow:0 14px 40px rgba(0,113,227,.32)}
.btn-primary:hover{background:#0077ed;box-shadow:0 18px 50px rgba(0,113,227,.42)}
.btn-ghost{border-color:var(--line2);background:rgba(0,0,0,.03);color:var(--strong)}
.btn-ghost:hover{background:rgba(0,0,0,.06)}
.btn-quiet{color:var(--blue);padding:14px 8px}
.btn-quiet:hover{text-decoration:underline}
.scroll-hint{margin-top:clamp(40px,7vh,72px);display:flex;align-items:center;gap:10px;font-size:12.5px;color:var(--muted)}
.scroll-hint span{width:22px;height:34px;border:1px solid var(--line2);border-radius:12px;position:relative;flex:none}
.scroll-hint span:before{content:"";position:absolute;left:50%;top:7px;width:3px;height:6px;border-radius:2px;background:var(--muted);transform:translateX(-50%);animation:wheel 1.9s ease-in-out infinite}
@keyframes wheel{50%{transform:translate(-50%,12px);opacity:.35}}

/* ─────────── shared section chrome ─────────── */
section{position:relative}
.sec{padding:clamp(78px,10vw,150px) 0}
.sec-head{max-width:62ch}
.sec-head.center{margin-inline:auto;text-align:center}
.kicker{font-size:12.5px;font-weight:600;letter-spacing:.15em;text-transform:uppercase;color:var(--blue)}
.sec-head h2{margin-top:18px;font-size:clamp(34px,5.4vw,70px);letter-spacing:-.055em;line-height:1.04}
.sec-head .lead{margin-top:24px;font-size:clamp(16.5px,1.9vw,20px);line-height:1.55}
.hairtop{border-top:1px solid var(--line)}

/* metrics rail */
.metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line2-soft);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.metric{background:var(--card);padding:clamp(22px,3vw,34px) clamp(16px,2vw,26px)}
.metric strong{color:var(--strong)}
.metric strong{display:block;font-size:clamp(26px,3.4vw,40px);font-weight:600;letter-spacing:-.05em;line-height:1}
.metric small{display:block;margin-top:10px;font-size:13.5px;color:var(--muted);letter-spacing:-.005em;line-height:1.5}

/* ─────────── venture showcase ─────────── */
.showcase{margin-top:clamp(44px,6vw,76px);border-radius:32px;position:relative;overflow:hidden;box-shadow:0 30px 70px -50px rgba(0,0,0,.4);
border:1px solid var(--line2);background:linear-gradient(170deg,#fff 0%,#fafafc 60%)}
.showcase:before{content:"";position:absolute;inset:-40% -10% auto;height:120%;pointer-events:none;
background:radial-gradient(38% 42% at 18% 8%,rgba(41,151,255,.2),transparent 68%)}
.showcase.v2:before{background:radial-gradient(38% 42% at 82% 8%,rgba(247,201,108,.16),transparent 68%),radial-gradient(34% 38% at 20% 0%,rgba(139,124,255,.18),transparent 70%)}
.showcase.v3:before{background:radial-gradient(38% 42% at 18% 8%,rgba(41,151,255,.18),transparent 68%),radial-gradient(30% 34% at 86% 62%,rgba(255,214,10,.17),transparent 70%)}
.showcase-grid{position:relative;min-width:0;display:grid;grid-template-columns:1fr 1.06fr;gap:clamp(28px,4vw,58px);padding:clamp(28px,4.6vw,64px);align-items:center}
/* grid items must be allowed to shrink below their min-content width, or a long
   nowrap line inside the frame widens the whole track and .showcase clips it */
.sc-copy,.sc-art{min-width:0}
.showcase.v2 .showcase-grid{grid-template-columns:1.06fr 1fr}
.showcase.v2 .sc-art{order:-1;min-width:0}
.sc-copy .tag{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:600;letter-spacing:.15em;text-transform:uppercase;color:var(--muted)}
.sc-copy .tag em{font-style:normal;padding:4px 9px;border-radius:6px;border:1px solid var(--line);color:var(--body)}
.sc-copy h3{margin-top:18px;font-size:clamp(27px,3.4vw,44px);letter-spacing:-.05em}
.sc-copy .domain{margin-top:8px;font-family:var(--mono);font-size:12.5px;color:var(--blue)}
.showcase.v2 .sc-copy .domain{color:var(--gold)}
.sc-copy .lead{margin-top:18px;font-size:16.5px}
.sc-feats{margin-top:26px;display:grid;gap:14px}
.sc-feats li{display:grid;grid-template-columns:20px 1fr;gap:12px;align-items:start;font-size:15.5px;line-height:1.55;color:var(--body)}
.sc-feats svg{width:20px;height:20px;margin-top:1px;color:var(--blue)}
.showcase.v2 .sc-feats svg{color:var(--gold)}
.sc-cta{margin-top:30px;display:flex;flex-wrap:wrap;gap:16px;align-items:center}

/* venture depth: who it is for, the honest edge, and the proof strip */
.sc-for{margin-top:24px;display:flex;flex-wrap:wrap;gap:7px;align-items:center}
.sc-for b{font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted2);margin-right:3px}
.sc-for span{font-size:12.5px;padding:5px 11px;border-radius:999px;border:1px solid var(--line2);background:#fff;color:var(--body)}
.sc-honest{margin-top:14px;font-size:12.5px;line-height:1.6;color:var(--muted);max-width:56ch}
.sc-honest b{color:var(--ink2);font-weight:600}
.sc-stats{margin-top:16px;display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line2-soft);border:1px solid var(--line);border-radius:16px;overflow:hidden}
.sc-stats div{background:#fff;padding:13px 15px}
.sc-stats strong{display:block;font-size:20px;font-weight:600;letter-spacing:-.04em;line-height:1.1;color:var(--strong)}
.sc-stats small{display:block;margin-top:5px;font-size:11.5px;line-height:1.45;color:var(--muted)}
.sc-stats a{color:var(--blue)}

/* ─────────── how we build: the comparison ─────────── */
.cmp{margin-top:clamp(36px,4.5vw,58px);border:1px solid var(--line);border-radius:22px;overflow-x:auto}
.cmp-in{min-width:680px}
.cmp-row{display:grid;grid-template-columns:1.05fr 1fr 1fr 1.22fr;gap:1px;background:var(--line2-soft);border-top:1px solid var(--line2-soft)}
.cmp-row:first-child{border-top:0}
.cmp-row>div{background:#fff;padding:14px 16px;font-size:14px;line-height:1.5;color:var(--body)}
.cmp-row>div:first-child{font-family:var(--mono);font-size:12.5px;color:var(--muted2)}
.cmp-row.head>div{background:var(--tint);font-size:12.5px;font-weight:600;letter-spacing:-.01em;color:var(--strong)}
.cmp-row>div.us{background:#f1f7ff;color:var(--strong);font-weight:500}
.cmp-row.head>div.us{background:#e4f0ff;color:var(--blue)}
.cmp-note{margin-top:14px;font-size:12.5px;color:var(--muted);line-height:1.6;max-width:76ch}
.cmp-close{margin-top:clamp(32px,4vw,48px);font-size:16.5px;line-height:1.62;color:var(--ink2);max-width:76ch}
.cmp-close b{color:var(--strong)}
.methods{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:clamp(38px,5vw,56px)}
.offline{margin-top:clamp(34px,4.4vw,54px);padding:clamp(22px,3vw,32px);border-radius:22px;
border:1px solid rgba(41,151,255,.35);background:linear-gradient(160deg,#f2f8ff,#fff)}
.offline h3{font-size:clamp(19px,2.3vw,25px);letter-spacing:-.035em}
.offline p{margin-top:12px;font-size:15.5px;line-height:1.62;color:var(--ink2);max-width:76ch}

/* ─────────── values: icon tiles ─────────── */
.values{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:clamp(34px,4.4vw,54px)}
.val{display:flex;flex-direction:column;gap:11px;padding:24px;border-radius:22px;border:1px solid var(--line2);background:#fff;
box-shadow:0 16px 42px -36px rgba(0,0,0,.35);transition:transform .45s var(--ease),box-shadow .45s}
.val:hover{transform:translateY(-4px);box-shadow:0 26px 56px -36px rgba(0,0,0,.4)}
.val svg{width:23px;height:23px;color:var(--blue)}
.val b{font-size:16.5px;letter-spacing:-.03em}
.val span{font-size:14px;line-height:1.55;color:var(--body)}

/* ─────────── ways of working: two lanes ─────────── */
.lanes{margin-top:clamp(34px,4.4vw,54px);display:grid;gap:16px}
.lane{padding:clamp(20px,2.6vw,30px);border-radius:22px;border:1px solid var(--line2);background:#fff}
.lane.ours{border-color:rgba(41,151,255,.42);background:linear-gradient(160deg,#f3f9ff,#fff)}
.lane-h{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.lane-h b{font-size:15.5px;letter-spacing:-.025em}
.lane-h em{font-style:normal;font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted2)}
.flow{display:flex;align-items:center;flex-wrap:wrap;gap:7px;margin-top:18px}
.fnode{padding:9px 14px;border-radius:11px;border:1px solid var(--line2);background:var(--tint);font-size:13px;color:var(--strong);white-space:nowrap}
.lane.ours .fnode{border-color:rgba(41,151,255,.34);background:#e9f3ff}
.lane.ours .fnode.gate{border-color:rgba(255,214,10,.5);background:#fff8e4}
.farw{color:var(--muted2);font-size:12.5px}
.lane p{margin-top:15px;font-size:13.5px;line-height:1.55;color:var(--muted)}
@media(max-width:1000px){.values{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.values{grid-template-columns:1fr}.fnode{white-space:normal}}
.sc-strip{margin-top:14px;display:grid;gap:7px;font-family:var(--mono);font-size:12px;line-height:1.6;color:var(--body)}
.sc-strip span{display:block}
.sc-strip .k{color:var(--blue)}
.sc-strip .c{color:var(--muted)}

/* the three ventures side by side: real site captures, not mockups */
.signatures{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:clamp(34px,4vw,52px)}
.sig{display:block;border-radius:20px;overflow:hidden;border:1px solid var(--line2);background:#fff;
box-shadow:0 18px 46px -34px rgba(0,0,0,.45);transition:transform .45s var(--ease),box-shadow .45s}
.sig:hover{transform:translateY(-5px);box-shadow:0 30px 64px -34px rgba(0,0,0,.5)}
.sig-shot{display:block;aspect-ratio:16/10;overflow:hidden;background:#0b0b10;border-bottom:1px solid var(--line2-soft)}
.sig-shot img{display:block;width:100%;height:100%;object-fit:cover;object-position:top center}
.sig-meta{display:flex;align-items:baseline;justify-content:space-between;gap:10px;padding:12px 14px}
.sig-meta b{font-size:13.5px;letter-spacing:-.02em;color:var(--strong)}
.sig-meta em{font-style:normal;font-family:var(--mono);font-size:11.5px;color:var(--muted);text-align:right}
.sig-note{margin-top:16px;font-size:12.5px;color:var(--muted);line-height:1.6;max-width:74ch}

/* device frames */
.frame{max-width:100%;border-radius:18px;overflow:hidden;border:1px solid rgba(255,255,255,.14);
background:#0b0b10;box-shadow:0 40px 90px rgba(0,0,0,.6),0 2px 0 rgba(255,255,255,.06) inset;
transform:perspective(1400px) rotateX(var(--rx,3deg)) rotateY(var(--ry,-4deg));transition:transform .6s var(--ease)}
.frame.flat{transform:none}
.bar{display:flex;align-items:center;gap:7px;padding:11px 14px;background:#16161d;border-bottom:1px solid var(--line-soft)}
.bar i{width:10px;height:10px;border-radius:50%;background:#2f2f38}
.bar i:nth-child(1){background:#ff5f57}.bar i:nth-child(2){background:#febc2e}.bar i:nth-child(3){background:#28c840}
.bar .url{margin-left:10px;flex:1;padding:4px 10px;border-radius:7px;background:#0b0b10;font-family:var(--mono);font-size:12.5px;color:#8e8e93;text-align:center}
.body{padding:16px;font-family:var(--mono);font-size:12.5px;color:#d2d2d7;line-height:1.7;overflow-x:auto}
/* real commands inside a product frame wrap; the fake code lines keep their ellipsis */
.body .ln{white-space:normal;overflow:visible;text-overflow:clip;overflow-wrap:anywhere}
.prompt{display:flex;gap:8px;align-items:center;padding:9px 12px;border-radius:10px;background:#f2f2f5;border:1px solid var(--line)}
.prompt .caret{width:7px;height:14px;background:var(--blue);animation:blink 1.1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.code{margin-top:12px;display:grid;gap:5px}
.ln{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ln .k{color:#c792ea}.ln .s{color:#a5d6a7}.ln .a{color:#82aaff}.ln .c{color:#5f6672}
.ln.w1{width:92%}.ln.w2{width:74%}.ln.w3{width:86%}.ln.w4{width:58%}.ln.w5{width:80%}
.stream{display:inline-block;margin-top:12px;padding:3px 8px;border-radius:6px;background:rgba(41,151,255,.14);color:#8fc7ff;font-size:12.5px}
/* console frame */
/* product windows: real products are dark-first, so these keep their own palette */
.console{display:grid;grid-template-columns:132px 1fr;min-height:330px;background:#0b0b10}
.side{border-right:1px solid var(--line-soft);background:#fafafc;padding:14px 10px;display:grid;gap:3px;align-content:start}
.side b{font-size:12.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted2);padding:4px 8px 10px}
.side span{padding:6px 9px;border-radius:7px;font-size:12.5px;font-family:var(--font);letter-spacing:-.01em;color:#8e8e93}
.side span.on{background:rgba(41,151,255,.14);color:#cfe6ff}
.main{padding:16px;display:grid;gap:14px;align-content:start;font-family:var(--font);font-size:12.5px}
.rows{display:grid;gap:9px}
.row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 12px;border-radius:10px;background:#fafafc;border:1px solid var(--line-soft)}
.row b{font-weight:500;color:var(--strong)}
.row .v{font-family:var(--mono);font-size:12.5px;color:#8e8e93}
.row.ok .v{color:var(--green)}.row.wait .v{color:var(--amber)}
.trace{display:grid;gap:6px;padding:12px;border-radius:12px;background:var(--tint);border:1px solid var(--line-soft);font-family:var(--mono);font-size:12.5px;color:#8e8e93}
.trace div{display:grid;grid-template-columns:64px 1fr;gap:10px}
.trace i{font-style:normal;color:#6f7680}
.trace .t1 i{color:#8fc7ff}.trace .t2 i{color:#c792ea}.trace .t3 i{color:var(--green)}
.live-dot{width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 0 0 rgba(48,209,88,.6);animation:pulse 2.1s infinite}
@keyframes pulse{70%{box-shadow:0 0 0 9px rgba(48,209,88,0)}100%{box-shadow:0 0 0 0 rgba(48,209,88,0)}}
.spark{display:flex;align-items:flex-end;gap:3px;height:44px;margin-top:2px}
.spark i{flex:1;border-radius:3px 3px 0 0;background:linear-gradient(180deg,#0a84ff,#7cc0ff)}

/* ─────────── flow (light) ─────────── */
.flow3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:clamp(38px,5vw,56px)}
.step{background:#fff;border:1px solid var(--line2);border-radius:24px;padding:26px;display:flex;flex-direction:column;
box-shadow:0 1px 2px rgba(0,0,0,.03),0 18px 40px -30px rgba(0,0,0,.3);transition:transform .5s var(--ease),box-shadow .5s}
.step:hover{transform:translateY(-5px);box-shadow:0 1px 2px rgba(0,0,0,.03),0 28px 60px -30px rgba(0,0,0,.35)}
.step .no{font-family:var(--mono);font-size:12.5px;color:var(--muted2);letter-spacing:.06em}
.step h3{margin-top:14px;font-size:19.5px;letter-spacing:-.035em}
.step p{margin-top:10px;font-size:15.5px;line-height:1.6;color:var(--ink2)}
.art{margin-top:22px;border-radius:16px;background:linear-gradient(180deg,#f7f7f9,#f1f1f4);border:1px solid var(--line2-soft);padding:15px;min-height:126px;display:grid;gap:8px;align-content:center}
.tl{height:8px;border-radius:4px;background:#d8d8dd}
.tl.a{width:80%;background:linear-gradient(90deg,#b9c6d6,#8fb6de)}.tl.b{width:54%}.tl.c{width:88%}.tl.d{width:40%}
.chips{display:flex;gap:6px;flex-wrap:wrap}
.chip{font-family:var(--mono);font-size:12.5px;padding:4px 9px;border-radius:7px;background:#fff;border:1px solid var(--line2);color:var(--muted2)}
.chip.on{background:#e8f2ff;border-color:#b9d7ff;color:#0066cc}
.chip.ok{background:#e8f8ee;border-color:#b6e7c8;color:#1a7f45}
.chip.wait{background:#fff6de;border-color:#f4dfa2;color:#8a6100}
.chain{display:flex;gap:4px;align-items:center;font-family:var(--mono);font-size:12px;color:var(--muted2)}
.chain span{width:14px;height:14px;border-radius:4px;background:#d8d8dd;flex:none}
.chain span:nth-child(odd){background:linear-gradient(135deg,#0071e3,#2997ff)}

/* ─────────── architecture ─────────── */
.arch{display:grid;grid-template-columns:1.02fr .98fr;gap:clamp(26px,4vw,56px);align-items:center;margin-top:clamp(40px,5vw,62px)}
.diagram{border-radius:var(--r);background:linear-gradient(175deg,#fff,#fafafc);border:1px solid var(--line);padding:20px}
.drow{display:flex;align-items:stretch;gap:8px}
.dnode{flex:1;min-width:0;border-radius:14px;border:1px solid var(--line);background:#fff;padding:13px 15px;transition:border-color .4s,transform .4s var(--ease)}
.dnode:hover{transform:translateY(-2px)}
.dnode b{display:block;font-size:13.5px;font-weight:600;letter-spacing:-.02em;color:var(--strong)}
.dnode small{display:block;margin-top:5px;font-family:var(--mono);font-size:12.5px;color:var(--muted)}
.dnode.gate{border-color:rgba(255,214,10,.42);background:rgba(255,214,10,.075)}
.dnode.gate b{color:var(--amber)}
.dnode.dev{border-color:rgba(41,151,255,.42);background:rgba(41,151,255,.075)}
.dnode.dev b{color:var(--blue)}
.dnode.rec{border-color:rgba(48,209,88,.36);background:rgba(48,209,88,.07)}
.dnode.rec b{color:var(--green)}
.darrow{display:grid;place-items:center;width:22px;flex:none;color:#4a4a52;font-size:13px}
.dstack{display:grid;gap:8px;margin-top:8px}
.dchain{margin-top:10px;display:flex;align-items:center;gap:6px;padding:12px 14px;border-radius:14px;
border:1px dashed rgba(48,209,88,.34);background:rgba(48,209,88,.05);font-family:var(--mono);font-size:12.5px;color:#a9d8b8;overflow:hidden}
.blk{width:30px;height:18px;border-radius:5px;background:rgba(48,209,88,.22);border:1px solid rgba(48,209,88,.42);flex:none}
.blk.pending{background:transparent;border-style:dashed}
.arch-copy{display:grid;gap:22px}
.arch-copy h4{font-size:15.5px;letter-spacing:-.025em}
.arch-copy p{margin-top:8px;font-size:15.5px;color:var(--body);line-height:1.6}

/* ─────────── worked examples ─────────── */
.stage{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.stage .sn{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font-family:var(--mono);font-size:12.5px;font-weight:600;color:#fff;background:var(--blue2);flex:none}
.stage b{font-size:14.5px;font-weight:600;letter-spacing:-.02em}
.stage span{font-size:12.5px;color:var(--muted);font-family:var(--mono);margin-left:auto}
.stage.gold .sn{background:#8a5800}
.ex{border:1px solid var(--line2);border-radius:26px;padding:26px;background:#fff;box-shadow:0 18px 50px -36px rgba(0,0,0,.3)}
.ex .promptbar{display:flex;align-items:center;gap:10px;padding:12px 14px;border-radius:12px;background:var(--tint);border:1px solid var(--line);font-size:13.5px;color:var(--strong)}
.ex .promptbar i{width:7px;height:7px;border-radius:50%;background:#ff5f57;flex:none}
.ex .promptbar span{font-family:var(--mono);font-size:12.5px;color:var(--blue);margin-left:auto;flex:none}
.ex .meta{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.ex .meta span{font-family:var(--mono);font-size:12.5px;padding:5px 9px;border-radius:7px;border:1px solid var(--line2);color:var(--body);background:#fff}
.ex .meta span.hi{border-color:rgba(0,113,227,.35);background:rgba(0,113,227,.08);color:#0066cc}
.steps{margin-top:20px;display:grid;gap:0}
.steps>div{display:grid;grid-template-columns:104px 1fr;gap:14px;padding:12px 0;border-top:1px solid var(--line2-soft);font-size:14.5px;line-height:1.55;color:var(--body)}
.steps>div:first-child{border-top:0}
.steps b{font-weight:600;font-family:var(--mono);font-size:12.5px;color:var(--muted2);padding-top:3px}
.steps .k-think{color:#0066cc}.steps .k-call{color:#7a4bd0}.steps .k-res{color:var(--green)}.steps .k-ans{color:#8a5800}.steps .k-block{color:#b3261e}
.steps code{font-family:var(--mono);font-size:12.5px;color:var(--strong);background:var(--tint);border:1px solid var(--line-soft);border-radius:6px;padding:2px 6px}
.result{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line2-soft);border:1px solid var(--line);border-radius:16px;overflow:hidden;margin-top:20px}
.result div{background:#fff;padding:14px 16px}
.result strong{display:block;font-size:19px;font-weight:600;letter-spacing:-.035em;color:var(--strong)}
.result small{display:block;margin-top:5px;font-size:12.5px;color:var(--muted)}
.exlink{display:inline-flex;align-items:center;gap:7px;margin-top:20px;color:var(--blue);font-size:14px}
.exlink:hover{text-decoration:underline}
.labnote{margin-top:22px;font-size:12.5px;color:var(--muted);max-width:78ch}

/* ─────────── Dream Machine boot screen (values lifted from llminone's own v2/app.css) ─────────── */
.dm-boot{position:relative;overflow:hidden;padding:34px 26px;display:grid;gap:14px;justify-items:center;text-align:center;color:#16233a;background:radial-gradient(90% 70% at 15% 10%,#d6e7ff 0%,transparent 55%),radial-gradient(80% 70% at 88% 6%,#eadfff 0%,transparent 52%),radial-gradient(100% 100% at 50% 112%,#d5f0f5 0%,transparent 55%),linear-gradient(160deg,#eef2f9 0%,#f7f9fd 55%,#eaf0f8 100%)}
.dm-boot .dm-logo{font-size:40px;line-height:1;color:#8b5cf6;margin-bottom:2px;text-shadow:0 0 18px rgba(139,92,246,.5)}
.dm-boot .dm-brand{font-family:var(--mono);font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;color:#5b6a85}
.stage h3{margin:2px 0 0;font-size:30px;font-weight:700;letter-spacing:.2px;background:linear-gradient(100deg,#0ea5e9,#8b5cf6 35%,#ec4899 65%,#0ea5e9);background-size:200% auto;-webkit-background-clip:text;background-clip:text;color:transparent}
.dm-boot .dm-lead{max-width:44ch;margin:0;font-size:14.5px;line-height:1.5;color:#5b6a85}
.dm-boot .dm-cta{margin-top:4px;border-radius:10px;padding:11px 20px;font-size:14px;font-weight:600;color:#fff;background:linear-gradient(120deg,#0067c0,#5b2fd6);box-shadow:0 8px 26px rgba(34,120,255,.35)}
.dm-boot .dm-composer{display:flex;align-items:center;gap:8px;width:100%;max-width:520px;margin-top:2px;padding:6px 7px 6px 20px;background:rgba(255,255,255,.96);border:1px solid rgba(0,0,0,.14);border-radius:18px;box-shadow:0 0 0 1px rgba(139,92,246,.18),0 22px 60px -16px rgba(34,211,238,.55)}
.dm-boot .dm-composer em{flex:1;text-align:left;font-style:normal;font-size:15.5px;color:#1a1a1a}
.dm-boot .dm-send{display:grid;place-items:center;width:38px;height:38px;flex:none;border-radius:12px;color:#fff;font-size:15px;background:linear-gradient(120deg,#22d3ee,#8b5cf6)}
.dm-boot .dm-chips{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:4px}
.dm-boot .dm-chips span{padding:8px 14px;border-radius:999px;font-size:12.5px;font-weight:500;color:#16233a;background:rgba(255,255,255,.6);border:1px solid rgba(28,48,100,.16)}
.dm-boot .dm-tb{width:100%;margin-top:6px;padding:8px 12px;border-top:1px solid rgba(0,0,0,.08);background:rgba(255,255,255,.86);border-radius:12px;display:flex;align-items:center;gap:10px;font-size:12.5px;color:#8a94a6}
.dm-boot .dm-tb b{font-weight:600;color:#1a1a1a}
.dm-boot .dm-tb .dm-spark{width:16px;height:16px;border-radius:5px;background:linear-gradient(120deg,#22d3ee,#8b5cf6);flex:none}
.dm-boot .dm-tb i{margin-left:auto;font-style:normal}
.dm-boot .dm-how{font-size:12.5px;color:#5b6a85}

/* real product captures: the live site, one to one, in a browser frame */
.shot{margin:0}
.shot img{display:block;width:100%;height:auto}
.shot figcaption{margin-top:12px;font-size:13.5px;color:var(--muted);line-height:1.6}
.shot-more{margin-top:12px;font-size:12.5px;font-weight:600;letter-spacing:.01em;color:var(--strong)}


/* ─────────── what the lab orchestrates ─────────── */
.orch{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;margin-top:clamp(44px,6vw,70px)}
.orch a{display:flex;flex-direction:column;gap:10px;padding:22px;border-radius:22px;border:1px solid var(--line2);background:#fff;
box-shadow:0 18px 50px -40px rgba(0,0,0,.35);transition:transform .45s var(--ease),box-shadow .45s}
.orch a:hover{transform:translateY(-5px);box-shadow:0 28px 60px -40px rgba(0,0,0,.45)}
.orch svg{width:24px;height:24px;color:var(--blue)}
.orch b{font-size:16px;letter-spacing:-.025em}
.orch span{font-size:14px;line-height:1.55;color:var(--ink2)}
@media(max-width:1000px){.orch{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.orch{grid-template-columns:1fr}}

/* ─────────── statement / cta ─────────── */
.pipeline{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:9px;margin-top:40px}
.pipe{padding:11px 19px;border-radius:980px;border:1px solid var(--line);font-size:13px;color:var(--body);background:rgba(255,255,255,.03)}
.pipe b{font-weight:600;color:#fff;margin-right:6px}
.pipe.alt{border-color:rgba(41,151,255,.4);background:rgba(41,151,255,.1)}
.sep{color:#4a4a52;font-size:13px}
.cta{padding:clamp(90px,13vw,170px) 0;text-align:center;position:relative;overflow:hidden}
.cta:before{content:"";position:absolute;inset:auto -10% -60% 20%;height:120%;pointer-events:none;
background:radial-gradient(40% 50% at 50% 60%,rgba(41,151,255,.16),transparent 70%)}
.cta h2{position:relative;font-size:clamp(32px,5.6vw,72px);letter-spacing:-.055em}
.cta p{position:relative;margin:22px auto 0;max-width:52ch;font-size:clamp(16px,1.7vw,20px);color:var(--body)}
.cta .hero-actions{position:relative;justify-content:center;margin-top:36px}

/* ─────────── footer ─────────── */
footer{border-top:1px solid var(--line);padding:60px 0 44px;font-size:12.5px;color:var(--muted)}
.foot{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:36px;padding-bottom:36px;border-bottom:1px solid var(--line)}
.foot-brand{font-size:14px;font-weight:600;color:#fff;letter-spacing:-.02em}
.foot p{margin-top:12px;max-width:38ch;line-height:1.6}
footer h4{margin:0 0 14px;font-size:12.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--muted2)}
.foot-links{display:grid;gap:10px}
.foot-links a:hover{color:#fff}
.foot-bottom{display:flex;flex-wrap:wrap;gap:10px 20px;justify-content:space-between;padding-top:24px}

/* ─────────── responsive ─────────── */
@media(max-width:1000px){
.showcase-grid,.showcase.v2 .showcase-grid{grid-template-columns:1fr}
.showcase.v2 .sc-art{order:0}
.sc-stats{grid-template-columns:1fr 1fr}
.signatures{grid-template-columns:1fr}
.methods{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:900px){
.nav-links{display:none;position:absolute;top:54px;left:var(--pad);right:var(--pad);flex-direction:column;align-items:stretch;gap:0;
padding:8px;border-radius:20px;background:rgba(255,255,255,.97);border:1px solid var(--line);font-size:15px;
backdrop-filter:blur(20px)}
.nav-links.open{display:flex}
.nav-links a{padding:12px}
.nav-cta{margin-top:6px;justify-content:center}
.burger{display:block}
.metrics{grid-template-columns:1fr 1fr}
.flow3,.arch,.foot{grid-template-columns:1fr}
.console{grid-template-columns:106px 1fr}
.drow{flex-direction:column}
.darrow{width:100%;height:20px}
.steps>div{grid-template-columns:1fr;gap:4px;padding:10px 0}
.steps b{padding-top:0}
.steps span,.steps code{overflow-wrap:anywhere}
code{max-width:100%}
.dg-chain,.trace{overflow-x:auto}
}
/* touch — by width OR by pointer type, so a landscape tablet is covered too */
@media(max-width:900px),(hover:none){
.foot-links{gap:0}
.foot-links a{display:flex;align-items:center;min-height:44px}
.exlink{min-height:44px;display:inline-flex;align-items:center;padding:10px 0}
}
@media(max-width:620px){
.methods{grid-template-columns:1fr}
.frame{transform:none}
.hero{min-height:auto}
}
/* ── small screens: restack the comparison instead of scrolling it ── */
@media(max-width:700px){
.cmp-in{min-width:0}
.cmp-row{grid-template-columns:1fr;gap:0}
.cmp-row.head{display:none}
.cmp-row>div{padding:12px 16px}
.cmp-row>div:first-child{background:var(--tint);font-weight:600;color:var(--strong);font-size:12px;letter-spacing:.06em;text-transform:uppercase}
.cmp-row>div:not(:first-child)::before{content:attr(data-c);display:block;margin-bottom:3px;
font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted2)}
.cmp-row>div.us{background:#f1f7ff}
}

/* ═══════════════════════════════════════════════════════════════
   COLOUR SYSTEM — one identity per venture, tinted section bands.
   Appended last so it wins on colour without touching layout.
   Accents are stored as rgb triplets so rgba(var(--acc),.2) works
   everywhere; all three clear 4.5:1 on white as text.
   ═══════════════════════════════════════════════════════════════ */
.showcase{--acc:109,74,255;--acct:#f4f0ff}      /* 01 Creation  · violet */
.showcase.v2{--acc:0,113,227;--acct:#eaf3ff}    /* 02 Operation · blue   */
.showcase.v3{--acc:138,88,0;--acct:#fff6e7}    /* 03 Sovereign · gold   */

.showcase{border-color:rgba(var(--acc),.22)}
.showcase:before{background:radial-gradient(40% 44% at 16% 6%,rgba(var(--acc),.16),transparent 70%)}
.showcase.v2:before{background:radial-gradient(40% 44% at 84% 6%,rgba(var(--acc),.15),transparent 70%)}
.showcase.v3:before{background:radial-gradient(40% 44% at 16% 6%,rgba(var(--acc),.15),transparent 70%)}

.sc-copy .tag em{border-color:rgba(var(--acc),.4);color:rgb(var(--acc));background:rgba(var(--acc),.07)}
.sc-copy .domain{color:rgb(var(--acc))}
.sc-feats svg{color:rgb(var(--acc))}
.sc-for span{border-color:rgba(var(--acc),.22);background:rgba(var(--acc),.05)}
.sc-stats{border-color:rgba(var(--acc),.2)}
.sc-stats strong{color:rgb(var(--acc))}
.sc-strip .k{color:rgb(var(--acc))}
.sc-honest{border-left:2px solid rgba(var(--acc),.35);padding-left:12px}

/* section bands so the page is not one long white sheet */
.band{background:linear-gradient(180deg,#f5f8fd 0%,#fbfcff 100%);border-top:1px solid rgba(0,0,0,.05);border-bottom:1px solid rgba(0,0,0,.05)}
.band .showcase{background:linear-gradient(170deg,#fff 0%,#fdfdff 60%)}

/* numbers get a colour instead of near-black */
.metric strong{color:#0071e3}
.metric:nth-child(2) strong{color:#6d4aff}
.metric:nth-child(3) strong{color:#1a7f45}
.metric:nth-child(4) strong{color:#8a5800}

/* method / value tiles: a coloured icon chip each */
.val{--a:0,113,227}
.val:nth-child(2){--a:26,127,69}
.val:nth-child(3){--a:109,74,255}
.val:nth-child(4){--a:138,88,0}
.val svg{width:44px;height:44px;padding:11px;border-radius:14px;color:rgb(var(--a));background:rgba(var(--a),.1);box-sizing:border-box}
.val{border-color:rgba(var(--a),.16)}

/* the three step cards get a colour cap */
.step{--a:109,74,255}
.step:nth-child(2){--a:0,113,227}
.step:nth-child(3){--a:138,88,0}
.step{border-top:3px solid rgba(var(--a),.55)}
.step .no{color:rgb(var(--a))}

/* lanes: the contrast between the two ways of working, in colour */
.lane{border-color:rgba(0,0,0,.09);background:linear-gradient(180deg,#fafbfd,#fff)}
.lane.ours{border-color:rgba(0,113,227,.35);background:linear-gradient(160deg,#ecf4ff,#f8fbff)}
.lane.ours .fnode{border-color:rgba(0,113,227,.3);background:#fff}
.lane.ours .fnode.gate{border-color:rgba(138,88,0,.5);background:#fff6e7;color:#8a5800}

/* hero wash a touch richer so the first screen has colour */
.hero{background:radial-gradient(70% 55% at 12% 8%,rgba(109,74,255,.10),transparent 62%),radial-gradient(60% 50% at 88% 4%,rgba(0,113,227,.10),transparent 60%)}
.eyebrow{color:#6d4aff}
.shine{background:linear-gradient(100deg,#0071e3,#6d4aff 45%,#a76b06);-webkit-background-clip:text;background-clip:text;color:transparent}

/* the pipeline reads as a colour journey */
.pipe{border-color:rgba(0,0,0,.1);background:#fff}
.pipe.alt{border-color:rgba(0,113,227,.32);background:rgba(0,113,227,.07)}
.pipe.alt b{color:#0071e3}

/* the original per-variant rules (.showcase.v2 .sc-feats svg etc.) outrank a bare
   .sc-feats svg on specificity, so the accent must be stated at the same depth */
.showcase.v2 .sc-feats svg,.showcase.v2 .sc-copy .domain{color:rgb(var(--acc))}
.showcase.v3 .sc-feats svg,.showcase.v3 .sc-copy .domain{color:rgb(var(--acc))}
.showcase.v2 .sc-stats strong,.showcase.v3 .sc-stats strong{color:rgb(var(--acc))}

/* ─────────── cost cards: price as the hero, bar encodes the ratio ─────────── */
.costs{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:20px}
.cost{display:flex;flex-direction:column;gap:11px;padding:24px;border-radius:22px;background:#fff;
border:1px solid rgba(138,88,0,.2);box-shadow:0 18px 48px -40px rgba(0,0,0,.45);transition:transform .45s var(--ease)}
.cost:hover{transform:translateY(-4px)}
.cost .cn{font-size:13.5px;color:var(--muted);letter-spacing:-.01em}
.cost strong{font-size:clamp(28px,3.4vw,40px);font-weight:600;letter-spacing:-.05em;line-height:1;color:#8a5800}
.cost .cbar{display:block;height:8px;border-radius:6px;background:rgba(138,88,0,.12);overflow:hidden;margin-top:2px}
.cost .cbar i{display:block;height:100%;border-radius:6px;background:linear-gradient(90deg,#8a5800,#cf9a2a)}
.cost .ct{display:flex;gap:7px;flex-wrap:wrap}
.cost .ct span{font-family:var(--mono);font-size:11.5px;padding:4px 9px;border-radius:7px;background:var(--tint);
border:1px solid var(--line2-soft);color:var(--muted)}
@media(max-width:760px){.costs{grid-template-columns:1fr}}

/* ─────────── worked-examples index: the section's table of contents, visual ─────────── */
.exindex{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:clamp(30px,3.6vw,46px)}
.exi{display:flex;flex-direction:column;gap:9px;padding:22px;border-radius:22px;background:#fff;
border:1px solid var(--line2);box-shadow:0 18px 46px -40px rgba(0,0,0,.4);transition:transform .45s var(--ease),box-shadow .45s}
.exi:hover{transform:translateY(-4px);box-shadow:0 28px 60px -40px rgba(0,0,0,.45)}
.exi .exn{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;flex:none;
font-family:var(--mono);font-size:11.5px;font-weight:600;color:#fff;background:#0071e3}
.exi:nth-child(2) .exn{background:#6d4aff}
.exi:nth-child(3) .exn{background:#8a5800}
.exi b{font-size:16.5px;letter-spacing:-.03em}
.exi em{font-style:normal;font-size:13.5px;line-height:1.5;color:var(--muted)}
.exi .tagline{margin-top:auto;padding-top:6px;font-family:var(--mono);font-size:11px;letter-spacing:.07em;
text-transform:uppercase;color:#0071e3}
.exi:nth-child(2) .tagline{color:#6d4aff}
.exi:nth-child(3) .tagline{color:#8a5800}
@media(max-width:760px){.exindex{grid-template-columns:1fr}}

/* stage markers pick up the same three colours as the index */
.stage.v2 .sn{background:#6d4aff}

/* ─────────── the trace: make the refusals the visual event they are ─────────── */
.steps>div.blocked{background:rgba(179,38,30,.055);border-radius:10px}
.steps>div.blocked b{color:#b3261e}
.result strong{color:#0071e3}
.result div:nth-child(2) strong{color:#b3261e}
.result div:nth-child(3) strong{color:#8a5800}
/* each example block carries its stage colour along the top */
.ex{border-top:3px solid rgba(0,113,227,.5)}
.ex.s2{border-top-color:rgba(109,74,255,.55)}
.ex.s3{border-top-color:rgba(138,88,0,.5)}

/* ─────────── demo posters: the GIF is 12 MB, so it loads only when asked ─────────── */
.demo{position:relative;display:block;width:100%;padding:0;border:0;margin:0;cursor:pointer;
border-radius:14px;overflow:hidden;background:#0b0b10;aspect-ratio:16/10}
.demo img{display:block;width:100%;height:100%;object-fit:cover;object-position:top center}
.demo .cplay{position:absolute;inset:0;display:grid;place-items:center;
background:linear-gradient(180deg,rgba(0,0,0,.05),rgba(0,0,0,.35))}
.demo .cplay i{width:54px;height:54px;border-radius:50%;display:grid;place-items:center;font-style:normal;
font-size:19px;color:#fff;background:rgba(0,0,0,.55);border:1px solid rgba(255,255,255,.6);
backdrop-filter:blur(6px);transition:transform .3s var(--ease),background .3s}
.demo:hover .cplay i{transform:scale(1.08);background:rgba(0,0,0,.7)}
.demo .cnote{position:absolute;left:10px;bottom:10px;font-family:var(--mono);font-size:11.5px;color:#fff;
background:rgba(0,0,0,.5);padding:3px 8px;border-radius:7px}
.demo.playing .cplay i,.demo.playing .cnote{display:none}
@media(prefers-reduced-motion:reduce){.demo .cplay i{transition:none}}

/* ─────────── ports & upgrades: A → B, and the week it takes ─────────── */
.portmap{display:grid;grid-template-columns:1fr auto 1fr;gap:16px;align-items:center;margin-top:clamp(30px,4vw,48px)}
.portnode{display:flex;flex-direction:column;gap:7px;padding:24px;border-radius:22px;border:1px solid var(--line2);background:#fff;
box-shadow:0 18px 46px -42px rgba(0,0,0,.4)}
.portnode.a{background:linear-gradient(180deg,#f7f7f9,#fff)}
.portnode.b{border-color:rgba(0,113,227,.38);background:linear-gradient(160deg,#ecf4ff,#fff)}
.portnode b{font-family:var(--mono);font-size:30px;font-weight:600;line-height:1;letter-spacing:-.04em;color:var(--muted2)}
.portnode.b b{color:#0071e3}
.portnode span{font-size:16px;font-weight:600;letter-spacing:-.025em;color:var(--strong)}
.portnode em{font-style:normal;font-size:13.5px;line-height:1.55;color:var(--muted)}
.portarrow{font-size:26px;line-height:1;color:#0071e3;text-align:center}
@media(max-width:700px){
  .portmap{grid-template-columns:1fr;gap:10px}
  .portarrow{transform:rotate(90deg);padding:2px 0}
}

/* ─────────── the gate's colour, carried out of the trace ───────────
   Red already marks a refusal in the run (div.blocked, .k-block, the red "2" in
   .result). These two rules carry the same meaning into the examples index and the
   stage marker, so the page has one idea used consistently instead of used once.
   Both intentionally come after the existing violet .exi:nth-child(2) / .stage.v2
   rules so equal specificity resolves in their favour. */
.exi:nth-child(2) .tagline{color:#b3261e}
.stage.v2 .sn{background:#b3261e}