/* =====================================================================
   DesignTech AI — Scroll Story (pinned cinematic scenes)
   Relies on colors_and_type.css for tokens, fonts, .grad-text.
   Motion is driven by JS writing per-scene --p (0..1) and inline styles.
   Initial hidden states only apply once body.js is set (progressive
   enhancement: no-JS / print shows everything).
   ===================================================================== */

html{overflow-x:clip;}
*{box-sizing:border-box;}
html{scroll-behavior:auto;}
body{
  margin:0;color:#fff;
  font-family:var(--font-sans);
  /* page-scoped type: Roboto Slab headlines, Poppins body */
  --font-display:'Roboto Slab','Poppins',serif;
  --font-sans:'Poppins','Inter',sans-serif;
  /* ONE ambient glow, fixed to the viewport — identical behind every scene */
  background-color:var(--navy-900);
  background-image:radial-gradient(115% 80% at 50% -12%,rgba(101,65,206,.16),transparent 64%);
  background-attachment:fixed;
  background-repeat:no-repeat;
  /* clip (not hidden): `overflow-x:hidden` forces overflow-y to compute to `auto`,
     turning body into a scroll container — which silently breaks the .pin sticky
     (scenes then animate only as they leave the top). `clip` suppresses the
     horizontal scrollbar without establishing a scrollport, matching html above. */
  overflow-x:clip;
  /* signature gradient as editable stops (Tweaks can rewrite these) */
  --g1:#40E0F0; --g2:#20B0C0; --g3:#4080E0; --g4:#6541CE; --g5:#A050D0;
  --grad:linear-gradient(115deg,var(--g1) 0%,var(--g2) 18%,var(--g3) 48%,var(--g4) 72%,var(--g5) 100%);
  --mo:1; /* motion multiplier, set by Tweaks */
}
img{display:block;max-width:100%;}
.grad-text{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;}

/* progress rail — the only persistent UI */
.rail{position:fixed;top:0;left:0;height:3px;width:100%;z-index:90;background:rgba(255,255,255,.06);}
.rail .fill{height:100%;width:0;background:var(--grad);box-shadow:0 0 18px rgba(101,65,206,.6);}

/* ---------------- SCENE SHELL ---------------- */
.scene{position:relative;}
.pin{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;display:grid;place-items:center;}
.stage{width:100%;max-width:1180px;padding:0 48px;position:relative;}
/* fit-to-viewport: each scene's content container scales to never overflow the pinned 100vh.
   --fit is set by JS per scene; --ey carries the exit drift so the two never fight. */
/* --rz is a per-scene depth scale the engine drives on exit, so a leaving scene
   recedes slightly as it fades — a cinematic hand-off, not a flat cut. It multiplies
   the fit scale so the two never fight. */
.scene .stage,.hero-stack,.prob-stack,.cta-stack{transform-origin:center center;transform:translateY(var(--ey,0px)) scale(calc(var(--fit,1) * var(--rz,1)));}
.s-supply .stage{width:1040px;max-width:1040px;}
/* beat 1 hides the reply stack via inline display (set per-frame, like .cc-card);
   force them visible only while measuring so fit-to-viewport sizes for the full beat-2 layout */
.measuring #s-loop .cc-card{display:flex!important;}
.measuring #s-loop .msg.user,.measuring #s-loop .toolcall{display:block!important;}
.measuring #s-loop .suggest{display:flex!important;}

/* full-bleed scene backgrounds */
.scene .bg{position:absolute;inset:0;z-index:0;}
.aura{display:none;}

/* shared bits */
.eyebrow{font-family:var(--font-sans);font-weight:600;font-size:12.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--g1);}
.pill{display:inline-flex;align-items:center;gap:9px;font-size:13.5px;font-weight:600;padding:6px 14px 6px 8px;border-radius:999px;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.05);backdrop-filter:blur(6px);}
.pill .tag{font-size:11px;letter-spacing:.1em;text-transform:uppercase;font-weight:700;color:#fff;background:var(--grad);padding:3px 9px;border-radius:999px;}

.btn{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-sans);font-weight:600;cursor:pointer;border:1px solid transparent;white-space:nowrap;font-size:15px;padding:13px 22px;border-radius:var(--radius-lg);transition:transform .2s,box-shadow .2s;text-decoration:none;}
.btn svg{width:17px;height:17px;}
.btn-grad{background:var(--grad);background-size:160% 160%;color:#fff;box-shadow:0 10px 26px rgba(101,65,206,.34);}
.btn-grad:hover{transform:translateY(-2px);box-shadow:0 0 0 1px rgba(64,128,224,.4),0 14px 34px rgba(101,65,206,.4);}

/* ============ SCENE — INTRO (full-screen opening hero video) ============ */
.s-intro .pin{background:#000;}
/* Fit the full video WIDTH at every size (never wider than the viewport) so the
   on-screen text in the clip is never cropped horizontally, and center it VERTICALLY.
   Height follows the clip's own aspect ratio: when the screen is taller than the clip,
   equal black bands show above & below (the #000 .pin background) and the top/bottom
   fades blend the edges into them; when taller than the screen, .pin{overflow:hidden}
   clips top & bottom equally. The wrapper shrink-wraps the clip (video is in-flow) so
   the fades pin to its real top/bottom edges regardless of the dynamic auto height. */
.intro-media{position:absolute;top:50%;left:0;transform:translateY(-50%);width:100%;z-index:0;}
.intro-video{display:block;width:100%;height:auto;}
/* Soft ~100px fades so the clip's top & bottom edges melt into the #000 surround
   instead of meeting it on a crisp line. Pinned to the video's edges on all sizes. */
.intro-fade{position:absolute;left:0;right:0;bottom:0;height:100px;background:linear-gradient(to bottom,rgba(0,0,0,0),#000);pointer-events:none;z-index:1;}
.intro-fade-top{position:absolute;left:0;right:0;top:0;height:100px;background:linear-gradient(to top,rgba(0,0,0,0),#000);pointer-events:none;z-index:1;}
.s-intro .scroll-hint{z-index:2;}

/* --- intro video: large tap-for-sound + minimal controls --- */
/* Sit just above the playback controls (which are at bottom:92px) rather than centered. */
.iv-unmute{position:absolute;left:50%;bottom:150px;transform:translateX(-50%);z-index:3;display:flex;flex-direction:column;align-items:center;gap:15px;padding:0;background:none;border:0;color:#fff;cursor:pointer;transition:opacity .45s ease,transform .45s ease,visibility .45s;}
.iv-unmute.hidden{opacity:0;transform:translateX(-50%) scale(.85);pointer-events:none;visibility:hidden;}
.iv-unmute-ring{position:relative;width:96px;height:96px;border-radius:50%;display:grid;place-items:center;background:rgba(8,12,30,.42);border:1.5px solid rgba(255,255,255,.55);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);box-shadow:0 12px 44px rgba(0,0,0,.38);transition:transform .25s ease,background .25s ease,border-color .25s ease;}
.iv-unmute:hover .iv-unmute-ring{transform:scale(1.06);background:rgba(8,12,30,.62);border-color:#fff;}
.iv-unmute-ring::after{content:"";position:absolute;inset:0;border-radius:50%;border:1.5px solid rgba(255,255,255,.5);animation:ivpulse 2.4s ease-out infinite;}
.iv-unmute-ring svg{width:40px;height:40px;}
.iv-unmute-label{font-size:11.5px;letter-spacing:.24em;text-transform:uppercase;color:rgba(255,255,255,.85);}
@keyframes ivpulse{0%{transform:scale(1);opacity:.6;}100%{transform:scale(1.55);opacity:0;}}

.iv-controls{position:absolute;left:50%;bottom:92px;transform:translateX(-50%);z-index:2;display:flex;align-items:center;gap:11px;padding:8px 14px;border-radius:999px;background:rgba(8,12,30,.44);border:1px solid rgba(255,255,255,.16);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);}
.iv-btn{flex:none;width:30px;height:30px;display:grid;place-items:center;padding:0;background:none;border:0;border-radius:50%;color:#fff;cursor:pointer;transition:background .2s ease;}
.iv-btn:hover{background:rgba(255,255,255,.16);}
.iv-btn svg{width:18px;height:18px;}
.iv-progress{position:relative;width:150px;height:4px;border-radius:999px;background:rgba(255,255,255,.22);cursor:pointer;}
.iv-progress-fill{position:absolute;left:0;top:0;height:100%;width:0;border-radius:999px;background:#fff;}
/* icon visibility follows the control state classes */
.iv-controls .ic-play,.iv-controls.is-paused .ic-pause{display:none;}
.iv-controls .ic-pause,.iv-controls.is-paused .ic-play{display:block;}
.iv-controls .ic-muted,.iv-controls.is-muted .ic-unmuted{display:none;}
.iv-controls .ic-unmuted,.iv-controls.is-muted .ic-muted{display:block;}
@media(max-width:600px){
  .iv-unmute-ring{width:84px;height:84px;}
  .iv-unmute-ring svg{width:34px;height:34px;}
  .iv-controls{bottom:104px;}
  .iv-progress{width:120px;}
  .iv-unmute{bottom:162px;}
}

/* ============ Shared stat rows (THE PROBLEM scene) ============ */
.hero-stats{display:flex;flex-direction:column;gap:20px;margin:38px auto 0;width:max-content;max-width:100%;}
.hstat{display:flex;align-items:center;gap:22px;}
.hstat .num{font-family:var(--font-display);font-weight:700;font-size:clamp(32px,4.2vw,50px);line-height:1;letter-spacing:-.02em;min-width:170px;text-align:right;}
.hstat .hdiv{width:1px;height:46px;background:rgba(255,255,255,.22);flex:none;}
.hstat .txt{font-size:14.5px;line-height:1.35;color:rgba(255,255,255,.72);text-align:left;}
@media(max-width:600px){
  .stage{padding:0 20px;}
  .prob-stack,.concept-stack{padding-left:20px;padding-right:20px;}
  .hero-stats{width:auto;max-width:100%;margin-top:30px;gap:16px;}
  .hstat{gap:12px;max-width:100%;}
  .hstat .num{min-width:80px;font-size:26px;}
  .hstat .txt{font-size:12px;}
}
/* problem scene */
.s-problem .pin{background:transparent;}
.prob-stack{text-align:center;max-width:940px;margin:0 auto;position:relative;z-index:2;padding:0 48px;}
.prob-h{font-family:var(--font-display);font-weight:700;font-size:clamp(30px,4.6vw,58px);line-height:1.06;letter-spacing:-.03em;margin:18px 0 0;color:#fff;}
.prob-stack .hero-stats{margin-top:42px;}
.prob-em,.s-problem .hstat .num{background:linear-gradient(100deg,#FF8A5B 0%,#F2563E 45%,#D6356B 100%);-webkit-background-clip:text;background-clip:text;color:transparent;}
.scroll-hint{position:absolute;bottom:42px;left:50%;transform:translateX(-50%);z-index:2;font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:rgba(255,255,255,.5);display:flex;flex-direction:column;align-items:center;gap:10px;}
.scroll-hint .sh-line{width:1px;height:42px;background:linear-gradient(rgba(255,255,255,.6),transparent);animation:shpulse 1.8s ease-in-out infinite;}
@keyframes shpulse{0%,100%{transform:scaleY(.5);opacity:.4;transform-origin:top;}50%{transform:scaleY(1);opacity:1;transform-origin:top;}}

/* ============ SCENE — WHY NOW (3-column market shifts) ============ */
.s-why .pin{background:transparent;color:#fff;}
.s-why .stage{max-width:1060px;}
.why-head{text-align:center;max-width:720px;margin:0 auto 44px;}
.why-head .eyebrow{color:var(--g1);}
.why-head h2{font-family:var(--font-display);font-weight:700;font-size:clamp(26px,3.2vw,42px);line-height:1.1;letter-spacing:-.02em;margin:12px 0 0;color:#fff;}
.why-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
.why-col{display:flex;flex-direction:column;align-items:center;text-align:center;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.03);border-radius:16px;padding:40px 26px;will-change:transform,opacity;}
.why-vis{width:112px;height:112px;color:var(--g1);margin-bottom:26px;}
.why-col h3{font-family:var(--font-display);font-weight:600;font-size:20px;line-height:1.25;letter-spacing:-.01em;margin:0;color:#fff;max-width:15ch;}
@media(max-width:880px){.why-cols{grid-template-columns:1fr;}.why-col{padding:32px 24px;}.why-vis{width:92px;height:92px;}}
/* No-Co-Pilots statement (replaces the old why-cols) */
.s-why .ncp{max-width:780px;margin:0 auto;text-align:center;}
.ncp-lede{font-size:clamp(17px,1.95vw,23px);line-height:1.5;color:rgba(255,255,255,.82);margin:0 auto 18px;max-width:62ch;}
.ncp-lede strong{color:#fff;font-weight:700;}
/* the crossed-out co-pilot graphic, sitting just under the headline */
.ncp-img{display:block;width:100%;max-width:560px;height:auto;margin:30px auto 26px;}
.ncp-tag{font-family:var(--font-display);font-weight:700;font-size:clamp(18px,2.3vw,28px);line-height:1.15;color:#fff;margin-top:18px;}
@media(max-width:880px){.ncp-img{max-width:440px;margin:24px auto 20px;}}

/* ============ SCENE — CONTENT-AS-CODE (founding principle + ingest graphic) ============ */
.s-concept .pin{background:transparent;}
.s-concept .stage{max-width:1060px;}
.concept-stack{text-align:center;max-width:880px;margin:0 auto;}
.concept-stack .eyebrow{color:var(--g1);}
/* paired with the ingest graphic now, so the headline is dialled back from its solo size */
.concept-h{font-family:var(--font-display);font-weight:700;font-size:clamp(30px,4.4vw,54px);line-height:1.04;letter-spacing:-.03em;margin:14px 0 0;color:#fff;}
.concept-p{font-size:clamp(16px,1.9vw,21px);line-height:1.55;color:rgba(255,255,255,.72);max-width:620px;margin:28px auto 0;}
.s-concept .imp-row{max-width:1000px;margin:30px auto 0;}

/* ============ SCENE — DECOMPOSE & REASSEMBLE (white paper → blocks → social) ============ */
.s-decompose .pin{background:transparent;color:#fff;}
.s-decompose .stage{max-width:1160px;}
.dc-head{text-align:center;max-width:760px;margin:0 auto 30px;}
.dc-head .eyebrow{color:var(--g1);}
.dc-head h2{font-family:var(--font-display);font-weight:700;font-size:clamp(26px,3.2vw,42px);line-height:1.1;letter-spacing:-.02em;margin:12px 0 12px;color:#fff;}
.dc-head p{font-size:16px;line-height:1.55;color:rgba(255,255,255,.66);margin:0 auto;max-width:620px;}

/* per-type block colors (the legend, the tower bricks, and the rebuilt graphic all share them) */
.s-decompose [data-type="head"]{--c:#40E0F0;}
.s-decompose [data-type="para"]{--c:#4080E0;}
.s-decompose [data-type="image"]{--c:#A050D0;}
.s-decompose [data-type="quote"]{--c:#2FE6A0;}
.s-decompose [data-type="stat"]{--c:#F2A33C;}
.s-decompose [data-type="list"]{--c:#6541CE;}

/* source pair and the (now mirrored) output pair flank the legend; the output
   column is the widest because [blocks] = [card] is the longest row. */
.dc-flow{display:grid;grid-template-columns:1.1fr 46px 0.95fr 46px 1.45fr;gap:14px;align-items:center;}
.dc-stage{display:flex;flex-direction:column;align-items:center;gap:14px;min-width:0;}
.dc-cap{font-family:var(--font-mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.5);text-align:center;}

/* the flow arrows, each with a step label */
.dc-arrow{display:flex;flex-direction:column;align-items:center;gap:7px;color:rgba(255,255,255,.4);}
.dc-arrow svg{width:24px;height:24px;}
.dc-arrow span{font-family:var(--font-mono);font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:var(--g1);}

/* A — the PDF stack, equals a tower of blocks */
.dc-pair{display:flex;align-items:center;justify-content:center;gap:14px;}
.dc-eq{font-family:var(--font-display);font-weight:700;font-size:30px;color:rgba(255,255,255,.4);flex:none;}
.dc-paper{position:relative;width:104px;height:132px;flex:none;will-change:transform,opacity;}
.dc-sheet{position:absolute;inset:0;border-radius:9px;background:#EEF2F8;box-shadow:0 8px 22px rgba(0,0,0,.34);}
.dc-sheet.s3{transform:translate(10px,11px) rotate(4deg);background:#C2CCDB;}
.dc-sheet.s2{transform:translate(5px,5px) rotate(2deg);background:#D8DFEA;}
.dc-sheet.s1{display:flex;flex-direction:column;gap:6px;padding:14px 12px;}
.dc-pdf{align-self:flex-start;font-family:var(--font-mono);font-size:9px;font-weight:800;letter-spacing:.06em;color:#fff;background:#E0443B;border-radius:4px;padding:3px 6px;margin-bottom:2px;}
.dc-pl{height:5px;border-radius:3px;background:#AEB8C8;}
.dc-pl.s{width:58%;}
/* the jenga tower — tidy stack of color-coded blocks */
.dc-tower{display:flex;flex-direction:column;gap:4px;width:152px;flex:none;}
.dc-brick{height:16px;border-radius:4px;background:var(--c);box-shadow:0 2px 5px rgba(0,0,0,.32),inset 0 1px 0 rgba(255,255,255,.34);will-change:transform,opacity;}
/* alternate rows carry the 3-piece jenga grout so the tower reads as interlocked */
.dc-brick.seg{background:linear-gradient(90deg,var(--c) 0 31%,rgba(8,16,30,.6) 31% 34%,var(--c) 34% 65%,rgba(8,16,30,.6) 65% 68%,var(--c) 68% 100%);}

/* B — every block, by color + type */
.dc-legend{width:100%;}
.dc-legend-grid{display:flex;flex-direction:column;gap:9px;width:100%;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.03);border-radius:14px;padding:15px 14px;}
.dc-type{display:flex;align-items:center;gap:10px;will-change:transform,opacity;}
.dc-tn{display:flex;align-items:center;gap:8px;font-family:var(--font-display);font-weight:600;font-size:12.5px;color:#fff;min-width:96px;flex:none;}
.dc-sw{width:12px;height:12px;border-radius:4px;background:var(--c);box-shadow:0 0 8px var(--c);flex:none;}
.dc-set{display:flex;gap:4px;flex-wrap:wrap;}
.dc-set i{width:13px;height:13px;border-radius:3px;background:var(--c);opacity:.92;box-shadow:inset 0 1px 0 rgba(255,255,255,.34);}

/* C — the reassembled social graphic; each element keeps the color of the block it came from */
.dc-card{width:212px;max-width:100%;aspect-ratio:1/1;background:#0C1424;border:1px solid rgba(255,255,255,.12);border-radius:16px;padding:14px;display:flex;flex-direction:column;gap:9px;box-shadow:0 18px 44px rgba(0,0,0,.42);}
.dc-ci{will-change:transform,opacity;}
.dc-ci-img{flex:1;min-height:0;border-radius:10px;background:linear-gradient(135deg,#3A2B6B,#7A2E86 55%,#B23A6B);border-left:3px solid var(--c);}
.dc-ci-head{display:flex;flex-direction:column;gap:5px;}
.dc-ci-head span{height:8px;border-radius:3px;background:var(--c);}
.dc-ci-head span.s{width:60%;opacity:.55;}
.dc-ci-stat{display:flex;align-items:baseline;gap:8px;border-left:3px solid var(--c);padding-left:8px;}
.dc-ci-stat b{font-family:var(--font-display);font-weight:800;font-size:23px;color:var(--c);line-height:1;flex:none;}
.dc-ci-stat span{font-size:9.5px;line-height:1.25;color:rgba(255,255,255,.62);}
.dc-ci-cta{align-self:flex-start;font-family:var(--font-display);font-weight:600;font-size:11px;color:#08111F;background:var(--c);border-radius:999px;padding:6px 13px;}
/* the rebuilt asset, shown as its own little tower of blocks */
.dc-built-tower{display:flex;flex-direction:column;gap:4px;width:118px;margin:0 auto;}

@media(max-width:880px){
  .dc-flow{grid-template-columns:1fr;gap:16px;}
  .dc-arrow{flex-direction:row;gap:10px;}
  .dc-arrow svg{transform:rotate(90deg);}
}
@media(max-width:560px){
  .dc-pair{gap:10px;}
  .dc-tower{width:128px;}
  .dc-built-tower{width:84px;}
  .dc-paper{width:88px;height:112px;}
  .dc-card{width:178px;}
}

/* ============ SCENE — THE POWER OF A BLOCK (one tile, capabilities radiate out) ============ */
.s-block .pin{background:transparent;color:#fff;}
.s-block .stage{max-width:1120px;}
.blk-head{text-align:center;max-width:740px;margin:0 auto 14px;}
.blk-head .eyebrow{color:var(--g1);}
.blk-head h2{font-family:var(--font-display);font-weight:700;font-size:clamp(26px,3.2vw,42px);line-height:1.1;letter-spacing:-.02em;margin:12px 0 12px;color:#fff;}
.blk-head p{font-size:16px;line-height:1.55;color:rgba(255,255,255,.66);margin:0 auto;max-width:600px;}

.blk-board{position:relative;width:100%;max-width:1120px;margin:6px auto 0;aspect-ratio:1180/660;}
.blk-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:1;}
.blk-svg line{stroke:#6E63C8;stroke-width:1.5;fill:none;stroke-linecap:round;filter:drop-shadow(0 0 4px rgba(110,99,200,.6));}

/* the block, dead center — kept out of [data-anim] so the reduced-motion transform reset
   never strips its translate(-50%,-50%) centering (the engine drives opacity + scale) */
.blk-core{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:5;width:208px;display:flex;flex-direction:column;align-items:center;gap:9px;text-align:center;padding:24px 22px;border-radius:20px;background:linear-gradient(#0b1322,#0b1322) padding-box,var(--grad) border-box;border:2px solid transparent;box-shadow:0 20px 60px rgba(0,0,0,.5);will-change:transform,opacity;}
.blk-core::before{content:"";position:absolute;inset:-3px;border-radius:inherit;background:var(--grad);background-size:220% 220%;filter:blur(18px);opacity:0;z-index:-1;transition:opacity .6s ease;animation:glow 6s ease infinite;}
.blk-core.on::before{opacity:.5;}
.blk-core-badge{width:52px;height:52px;border-radius:15px;background:var(--grad);display:grid;place-items:center;box-shadow:0 10px 26px rgba(101,65,206,.4);}
.blk-core-badge svg{width:27px;height:27px;color:#fff;}
.blk-core-name{font-family:var(--font-display);font-weight:700;font-size:21px;letter-spacing:-.01em;color:#fff;}
.blk-core-sub{font-family:var(--font-mono);font-size:11px;letter-spacing:.03em;color:rgba(255,255,255,.5);}

.blk-caps{position:absolute;inset:0;z-index:3;}
.blk-cap{position:absolute;transform:translate(-50%,-50%);width:198px;display:flex;align-items:center;gap:11px;padding:12px 14px;border-radius:14px;border:1px solid rgba(255,255,255,.12);background:rgba(13,20,34,.92);box-shadow:0 12px 30px rgba(0,0,0,.34);will-change:transform,opacity;}
.blk-cap.left{flex-direction:row-reverse;}
.blk-cap .blk-ic{flex:none;width:36px;height:36px;border-radius:11px;background:rgba(64,224,240,.1);display:grid;place-items:center;color:var(--g1);}
.blk-cap .blk-ic svg{width:18px;height:18px;}
.blk-cap .blk-tx{display:flex;flex-direction:column;gap:2px;min-width:0;text-align:left;}
.blk-cap.left .blk-tx{text-align:right;}
.blk-cap .blk-tx b{font-family:var(--font-display);font-weight:600;font-size:14px;color:#fff;letter-spacing:-.01em;line-height:1.1;}
.blk-cap .blk-tx span{font-size:11px;line-height:1.3;color:rgba(255,255,255,.6);}

/* hidden initial state (matches [data-anim]); engine reveals per frame */
body.js .blk-core,body.js .blk-cap{opacity:0;}

/* mobile: drop the radial wiring, stack the tile over a 2-up capability grid */
@media(max-width:760px){
  .s-block .blk-board{aspect-ratio:auto;height:auto;display:flex;flex-direction:column;align-items:center;gap:16px;}
  .s-block .blk-svg{display:none;}
  .s-block .blk-core{position:static;transform:none!important;order:-1;width:auto;max-width:280px;}
  .s-block .blk-caps{position:static;display:grid;grid-template-columns:1fr 1fr;gap:10px;width:100%;}
  .s-block .blk-cap{position:static!important;left:auto!important;top:auto!important;transform:none!important;width:auto;flex-direction:row!important;}
  .s-block .blk-cap.left .blk-tx{text-align:left;}
}

/* ============ SCENE — IMPORT ============ */
.s-import .pin{background:transparent;color:#fff;}
.s-import .stage{max-width:1060px;}
.imp-head{text-align:center;max-width:760px;margin:0 auto 34px;}
.imp-head .eyebrow{color:var(--g1);}
.imp-head h2{font-family:var(--font-display);font-weight:700;font-size:clamp(26px,3.2vw,42px);line-height:1.12;letter-spacing:-.02em;margin:12px 0 0;color:#fff;}
.imp-row{display:grid;grid-template-columns:1fr 44px 0.82fr;gap:22px;align-items:center;}
.imp-sources{display:flex;flex-wrap:wrap;gap:10px;}
.imp-chip{display:flex;align-items:center;gap:9px;font-size:13.5px;font-weight:500;color:rgba(255,255,255,.86);background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.12);border-radius:11px;padding:10px 14px;will-change:transform,opacity;}
.imp-chip svg{width:16px;height:16px;color:var(--g1);flex:none;}
.imp-arrow{display:grid;place-items:center;color:rgba(255,255,255,.4);}
.imp-arrow svg{width:26px;height:26px;}
.imp-blocks-wrap{border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.03);border-radius:16px;padding:16px;}
.imp-blocks-h{display:flex;align-items:center;gap:8px;font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--g1);margin-bottom:12px;}
.imp-blocks-h .ic{width:15px;height:15px;}
.imp-blocks{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;}
.imp-block{display:flex;flex-direction:column;gap:7px;background:#0E1626;border:1px solid rgba(255,255,255,.08);border-radius:9px;padding:11px;will-change:transform,opacity;}
.imp-block .bt{font-size:9.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:rgba(255,255,255,.5);}
.imp-block .bl{height:5px;border-radius:3px;background:rgba(255,255,255,.14);}
.imp-block .bl.s{width:62%;}
@media(max-width:880px){.imp-row{grid-template-columns:1fr;}.imp-arrow svg{transform:rotate(90deg);}.imp-sources{justify-content:center;}}

/* ============ SCENE — COMPILE / ANY FORMAT (one source fans out to formats) ============ */
.s-compile .pin{background:transparent;color:#fff;}
.s-compile .stage{max-width:1040px;}
/* flip the import row: a narrow source on the left fans out to a wide bank of formats */
.s-compile .imp-row.cmp-row{grid-template-columns:0.74fr 44px 1fr;}
.s-compile .cmp-outs{align-content:center;}
.s-compile .cmp-outs .imp-chip{font-size:14px;font-weight:600;}
.s-compile .cmp-outs .imp-chip svg{color:var(--g5);}     /* output formats glow violet vs cyan inputs */
.cmp-note{text-align:center;max-width:680px;margin:30px auto 0;font-size:15px;line-height:1.55;color:rgba(255,255,255,.62);}
@media(max-width:880px){.s-compile .imp-row.cmp-row{grid-template-columns:1fr;}.s-compile .cmp-outs{justify-content:center;}}

/* ============ SCENE — EDITORS / EVERY MEDIUM (a mini editor per medium) ============ */
.s-editors .pin{background:transparent;color:#fff;}
.s-editors .stage{max-width:1120px;}
.ed-head{text-align:center;max-width:760px;margin:0 auto 38px;}
.ed-head .eyebrow{color:var(--g1);}
.ed-head h2{font-family:var(--font-display);font-weight:700;font-size:clamp(26px,3.2vw,42px);line-height:1.1;letter-spacing:-.02em;margin:12px 0 12px;color:#fff;}
.ed-head p{font-size:16px;line-height:1.55;color:rgba(255,255,255,.66);margin:0 auto;max-width:580px;}
.ed-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;}
.ed-card{display:flex;flex-direction:column;align-items:center;will-change:transform,opacity;}
/* the little editor window chrome */
.ed-win{width:100%;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.03);border-radius:14px;overflow:hidden;box-shadow:0 14px 34px rgba(0,0,0,.32);}
.ed-bar{display:flex;align-items:center;gap:5px;padding:9px 11px;border-bottom:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.02);}
.ed-bar .ed-dot{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.22);}
.ed-bar .ed-tools{margin-left:auto;display:flex;gap:4px;}
.ed-bar .ed-tools i{width:12px;height:7px;border-radius:2px;background:rgba(255,255,255,.1);}
.ed-body{position:relative;height:120px;padding:16px;display:flex;flex-direction:column;justify-content:center;gap:8px;background:#0C1424;overflow:hidden;}
.ed-label{font-family:var(--font-display);font-weight:600;font-size:15px;color:#fff;margin-top:14px;letter-spacing:-.01em;}
.ed-sub{font-family:var(--font-mono);font-size:11px;letter-spacing:.01em;color:rgba(255,255,255,.45);margin-top:3px;text-align:center;}

/* image — a photo with crop handles */
.ed-img{align-items:center;justify-content:center;}
.ed-img .ed-photo{width:80%;height:76%;border-radius:8px;background:linear-gradient(135deg,#3A2B6B,#7A2E86 55%,#B23A6B);}
.ed-img .ed-handle{position:absolute;width:9px;height:9px;border:2px solid var(--g1);border-radius:2px;background:#0C1424;}
.ed-img .ed-handle.tl{left:8%;top:10%;}.ed-img .ed-handle.tr{right:8%;top:10%;}
.ed-img .ed-handle.bl{left:8%;bottom:10%;}.ed-img .ed-handle.br{right:8%;bottom:10%;}

/* document — heading + text lines + a live caret */
.ed-doc{justify-content:center;gap:8px;}
.ed-doc .ed-h{height:9px;width:56%;border-radius:3px;background:var(--grad);opacity:.9;}
.ed-doc .ed-tl{height:6px;border-radius:3px;background:rgba(255,255,255,.16);}
.ed-doc .ed-tl.s{width:64%;}
.ed-doc .ed-docline{display:flex;align-items:center;gap:5px;}
.ed-doc .ed-docline .ed-tl{flex:1;}
.ed-doc .ed-caret{width:2px;height:13px;background:var(--g1);box-shadow:0 0 8px rgba(64,224,240,.7);animation:caretBlink 1.05s steps(1,end) infinite;flex:none;}

/* graphic — shapes on a canvas with a selection box */
.ed-gfx .ed-shape{position:absolute;}
.ed-gfx .circ{width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg,#40E0F0,#4080E0);left:18%;top:22%;}
.ed-gfx .rect{width:44px;height:28px;border-radius:6px;background:linear-gradient(135deg,#6541CE,#A050D0);right:15%;bottom:20%;}
.ed-gfx .sel{left:13%;top:17%;width:46px;height:46px;border:1.5px dashed var(--g1);border-radius:4px;}

/* video — a filmstrip + a scrubbing playhead */
.ed-vid{justify-content:center;gap:13px;}
.ed-vid .ed-strip{display:grid;grid-template-columns:repeat(5,1fr);gap:4px;}
.ed-vid .ed-strip span{aspect-ratio:16/10;border-radius:4px;background:linear-gradient(135deg,#23365E,#3F47C9 60%,#6541CE);}
.ed-vid .ed-strip span:nth-child(even){background:linear-gradient(135deg,#1B2650,#3A2B6B);}
.ed-vid .ed-track{position:relative;height:4px;border-radius:3px;background:rgba(255,255,255,.14);}
.ed-vid .ed-play-h{position:absolute;top:50%;width:11px;height:11px;border-radius:50%;background:var(--g1);box-shadow:0 0 10px rgba(64,224,240,.7);transform:translate(-50%,-50%);animation:edScrub 3.4s var(--ease-standard) infinite;}
@keyframes edScrub{0%{left:4%;}50%{left:96%;}100%{left:4%;}}

/* audio — a live waveform with a playhead (bars injected by JS) */
.ed-aud{justify-content:center;}
.ed-aud .ed-wave{display:flex;align-items:center;justify-content:space-between;height:60px;gap:2px;}
.ed-aud .ed-wave span{flex:1;border-radius:2px;background:var(--grad);opacity:.85;transform-origin:center;animation:edWave 1.5s ease-in-out infinite;}
@keyframes edWave{0%,100%{transform:scaleY(.4);}50%{transform:scaleY(1);}}
.ed-aud .ed-aud-h{position:absolute;top:16px;bottom:16px;width:2px;background:rgba(255,255,255,.55);left:50%;}

@media(max-width:980px){.ed-grid{grid-template-columns:repeat(3,1fr);}}
@media(max-width:560px){.ed-grid{grid-template-columns:repeat(2,1fr);gap:12px;}.ed-body{height:108px;}}
/* honour reduced-motion: kill the idle micro-animations inside the editor mocks */
@media(prefers-reduced-motion:reduce){.ed-doc .ed-caret,.ed-vid .ed-play-h,.ed-aud .ed-wave span{animation:none;}}

/* ============ SCENE 2 — CONTENTCANVAS ============ */
.s-canvas .pin{background:transparent;}
.s-canvas .stage{display:grid;grid-template-columns:0.92fr 1.08fr;gap:56px;align-items:center;}
.cv-copy{position:relative;z-index:3;}
.cv-copy h2{font-family:var(--font-display);font-weight:700;font-size:clamp(30px,3.4vw,46px);line-height:1.06;letter-spacing:-.025em;margin:14px 0 18px;}
.cv-copy p{font-size:17px;line-height:1.6;color:rgba(255,255,255,.78);margin:0 0 22px;max-width:480px;}
.cv-points{display:grid;gap:14px;margin:0 0 28px;padding:0;}
.cv-points li{list-style:none;display:flex;gap:12px;align-items:flex-start;font-size:15px;color:rgba(255,255,255,.9);}
.cv-points .ic{flex:none;width:26px;height:26px;border-radius:8px;background:rgba(255,255,255,.08);display:grid;place-items:center;}
.cv-points .ic svg{width:15px;height:15px;color:var(--g1);}

.graph{position:relative;width:100%;aspect-ratio:1/.92;}
.graph svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;}
/* edges — soft, rounded graph wires linking every vertex */
.gmesh line{stroke:rgba(150,156,205,.2);stroke-width:.32;fill:none;stroke-linecap:round;}
.gdep line{stroke:#7B6CD8;stroke-width:.7;fill:none;stroke-linecap:round;filter:drop-shadow(0 0 1.5px rgba(123,108,216,.8));}
.gdep line.teal{stroke:#2FE6A0;filter:drop-shadow(0 0 1.5px rgba(47,230,160,.8));}

/* dots */
.gdot{position:absolute;transform:translate(-50%,-50%);border-radius:50%;will-change:transform,opacity;}
.gdot.asset{width:22px;height:22px;background:#F2A33C;box-shadow:0 0 0 4px rgba(242,163,60,.18);}
.gdot.hub{width:22px;height:22px;background:#A99CEC;}
.gdot.cyan{width:22px;height:22px;background:#3FA6DE;}
.gdot.green{width:17px;height:17px;background:#2FE6A0;}
/* quiet graph vertices — neutral slate with a faint ring so they read as nodes */
.gdot.muted{width:11px;height:11px;background:#5b6488;opacity:.55;box-shadow:0 0 0 3px rgba(120,132,178,.07);}
.gdot.muted.b{background:#454d6b;}
/* selected */
.gdot.sel{width:24px;height:24px;background:#B9A9F4;z-index:6;}
.gdot.sel .ring{position:absolute;inset:-7px;border-radius:50%;border:2.5px solid #fff;opacity:0;transform:scale(.4);transition:transform .5s var(--ease-entrance),opacity .4s;box-shadow:0 0 22px rgba(185,169,244,.7);}
.gdot.sel.on .ring{opacity:1;transform:scale(1);}
/* dependency highlight state */
.gdot.dep{transition:box-shadow .35s,transform .35s;}
.gdot.dep.lit{box-shadow:0 0 0 4px rgba(242,163,60,.32),0 0 16px rgba(242,163,60,.55);}
.gdot.green.dep.lit{box-shadow:0 0 0 4px rgba(47,230,160,.3),0 0 16px rgba(47,230,160,.55);}

/* selected node label tooltip */
.glabel{position:absolute;z-index:7;opacity:0;transform:translate(-50%,12px);white-space:nowrap;font-size:12.5px;font-weight:500;color:#fff;background:rgba(6,10,22,.92);border:1px solid rgba(255,255,255,.12);border-radius:7px;padding:6px 11px;box-shadow:0 8px 22px rgba(0,0,0,.4);pointer-events:none;}
.glabel .k{color:rgba(255,255,255,.5);}

/* selected node's content cards, layered on top to the right */
.gcards{position:absolute;inset:0;z-index:8;pointer-events:none;}
.gcard{position:absolute;width:40%;border-radius:16px;box-shadow:0 26px 64px rgba(0,0,0,.55);will-change:transform,opacity;}
.gcard.c1{left:-3%;top:-2%;z-index:8;}     /* source — top-left, over the nodes */
.gcard.c2{right:-3%;top:32%;z-index:9;}    /* published social post — to the right */

/* the connection: a drawn path from the source to the published post */
.gflow{position:absolute;inset:0;width:100%;height:100%;overflow:visible;z-index:7;pointer-events:none;}
.gflow-line{stroke:var(--g1);stroke-width:1.4;fill:none;stroke-linecap:round;filter:drop-shadow(0 0 4px rgba(64,224,240,.7));}
.gflow-arrow{stroke:var(--g1);stroke-width:1.4;fill:none;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 4px rgba(64,224,240,.7));}
.gflow-tag{position:absolute;left:43%;top:42%;transform:translate(-50%,-50%);z-index:8;opacity:0;display:flex;align-items:center;gap:6px;white-space:nowrap;font-size:11px;font-weight:600;color:#fff;background:rgba(6,10,22,.92);border:1px solid rgba(64,224,240,.4);border-radius:8px;padding:5px 10px;box-shadow:0 8px 22px rgba(0,0,0,.4);pointer-events:none;}
.gflow-tag svg{width:13px;height:13px;color:var(--g1);flex:none;}

/* ============ SCENE — PROVENANCE / CHANGE PROPAGATION (edit a source, watch it flow) ============ */
.s-provenance .pin{background:transparent;color:#fff;}
.s-provenance .stage{max-width:1100px;}
.prov-head{text-align:center;max-width:740px;margin:0 auto 28px;}
.prov-head .eyebrow{color:var(--g1);}
.prov-head h2{font-family:var(--font-display);font-weight:700;font-size:clamp(26px,3.2vw,42px);line-height:1.08;letter-spacing:-.025em;margin:12px 0 12px;color:#fff;}
.prov-head p{font-size:16px;line-height:1.55;color:rgba(255,255,255,.66);margin:0 auto;max-width:600px;}

.prov-board{position:relative;width:100%;max-width:1000px;margin:0 auto;aspect-ratio:1000/560;}
.prov-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:1;}
.prov-base path{stroke:rgba(255,255,255,.12);stroke-width:2;fill:none;}
.prov-flow path{stroke:var(--g1);stroke-width:3;fill:none;stroke-linecap:round;filter:drop-shadow(0 0 5px rgba(64,224,240,.7));}

/* the source block — vertically centered so the edges leave its right port cleanly */
.prov-src{position:absolute;left:1%;top:50%;transform:translateY(-50%);width:27%;display:flex;flex-direction:column;gap:9px;border:1px solid rgba(64,224,240,.4);background:rgba(18,40,62,.55);border-radius:14px;padding:16px;z-index:3;box-shadow:0 0 0 1px rgba(64,224,240,.22),0 14px 34px rgba(0,0,0,.4);transition:box-shadow .4s;}
body.js .prov-src{opacity:0;}   /* engine fades it in (kept out of [data-anim] to preserve the translateY centering) */
.prov-tag{font-family:var(--font-mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--g1);}
.prov-tagline{position:relative;min-height:26px;}
.prov-tagline .pt-old,.prov-tagline .pt-new{font-family:var(--font-display);font-weight:700;font-size:clamp(14px,1.7vw,20px);letter-spacing:-.01em;line-height:1.2;color:#fff;}
.prov-tagline .pt-new{position:absolute;inset:0;opacity:0;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;}
.prov-edit{position:absolute;top:13px;right:13px;font-family:var(--font-mono);font-size:9px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#08111F;background:var(--grad);border-radius:999px;padding:3px 8px;opacity:0;}
.prov-src.changed{box-shadow:0 0 0 1px var(--g1),0 0 24px rgba(64,224,240,.4),0 14px 34px rgba(0,0,0,.4);}

.prov-port{position:absolute;top:50%;transform:translateY(-50%);width:12px;height:12px;border-radius:50%;border:2px solid #0A1322;z-index:4;}
.prov-port.s{right:-7px;background:var(--g1);box-shadow:0 0 10px rgba(64,224,240,.7);}
.prov-port.a{left:-7px;background:#37324b;transition:background .4s,box-shadow .4s;}

.prov-assets{position:absolute;inset:0;z-index:2;}
.prov-asset{position:absolute;width:36%;height:17%;display:flex;flex-direction:column;justify-content:center;overflow:hidden;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.03);border-radius:12px;padding:0 14px;transition:border-color .4s,box-shadow .4s,background .4s;will-change:transform,opacity;}
.pa-title{font-family:var(--font-display);font-weight:600;font-size:clamp(11px,1.35vw,15px);color:#fff;letter-spacing:-.01em;line-height:1.1;}
.pa-line{position:relative;min-height:16px;margin-top:4px;}
.pa-old,.pa-new{font-size:12px;color:rgba(255,255,255,.55);line-height:1.25;white-space:nowrap;}
.pa-new{position:absolute;inset:0;opacity:0;color:#fff;font-weight:500;}
.pa-status{display:inline-flex;align-items:center;gap:6px;margin-top:7px;font-size:10px;font-weight:700;letter-spacing:.03em;}
.pa-status .dot{width:7px;height:7px;border-radius:50%;background:#2FE6A0;box-shadow:0 0 8px rgba(47,230,160,.6);transition:background .35s,box-shadow .35s;}
.pa-status .txt{color:#2FE6A0;transition:color .35s;}
/* out of date (amber) */
.prov-asset.stale{border-color:rgba(242,163,60,.55);background:rgba(38,28,12,.42);box-shadow:0 0 0 1px rgba(242,163,60,.28);}
.prov-asset.stale .pa-status .dot{background:#F2A33C;box-shadow:0 0 8px rgba(242,163,60,.7);}
.prov-asset.stale .pa-status .txt{color:#F2A33C;}
/* updated (brand cyan) */
.prov-asset.updated{border-color:rgba(64,224,240,.5);background:rgba(18,40,62,.5);box-shadow:0 0 0 1px rgba(64,224,240,.3),0 8px 24px rgba(64,224,240,.16);}
.prov-asset.updated .pa-status .dot{background:var(--g1);box-shadow:0 0 8px rgba(64,224,240,.7);}
.prov-asset.updated .pa-status .txt{color:var(--g1);}
.prov-asset.updated .prov-port.a{background:var(--g1);box-shadow:0 0 10px rgba(64,224,240,.7);}

/* mobile: drop the wiring, stack the source over a 2-up asset grid */
@media(max-width:760px){
  .s-provenance .prov-board{aspect-ratio:auto;height:auto;display:flex;flex-direction:column;gap:12px;}
  .s-provenance .prov-svg{display:none;}
  .s-provenance .prov-src{position:static!important;transform:none!important;left:auto!important;top:auto!important;width:auto!important;}
  .s-provenance .prov-assets{position:static!important;display:grid;grid-template-columns:1fr 1fr;gap:10px;}
  .s-provenance .prov-asset{position:static!important;left:auto!important;top:auto!important;width:auto!important;height:auto!important;padding:12px 14px;}
  .s-provenance .pa-old,.s-provenance .pa-new{white-space:normal;}
  .s-provenance .prov-port{display:none;}
}

/* ============ SCENE — COMPOSE / THE COMPOSE EQUATION (source + layout + style + format = asset) ============ */
.s-compose .pin{background:transparent;color:#fff;}
.s-compose .stage{max-width:1140px;}
.cmp-head{text-align:center;max-width:760px;margin:0 auto 34px;}
.cmp-head .eyebrow{color:var(--g1);}
.cmp-head h2{font-family:var(--font-display);font-weight:700;font-size:clamp(26px,3.2vw,42px);line-height:1.08;letter-spacing:-.025em;margin:12px 0 12px;color:#fff;}
.cmp-head p{font-size:16px;line-height:1.55;color:rgba(255,255,255,.66);margin:0 auto;max-width:560px;}

/* the equation row: ingredient cards separated by + / = operators */
.cmp-eq{display:flex;align-items:stretch;justify-content:center;gap:8px;flex-wrap:nowrap;}
.cmp-op{flex:0 0 auto;align-self:center;font-family:var(--font-display);font-weight:700;font-size:clamp(20px,2.4vw,30px);color:rgba(255,255,255,.5);will-change:transform,opacity;}
.cmp-op.eq{color:var(--g1);}

/* each ingredient / asset card */
.cmp-ing{flex:0 1 168px;min-width:0;display:flex;flex-direction:column;gap:9px;will-change:transform,opacity;}
.cmp-cap{font-family:var(--font-mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.5);text-align:center;}
.cmp-box{position:relative;flex:1;min-height:158px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.03);border-radius:14px;padding:14px;overflow:visible;}
.cmp-name{font-family:var(--font-display);font-weight:600;font-size:12.5px;color:#fff;letter-spacing:-.01em;text-align:center;}

/* SOURCE — a little document */
.cmp-doc{width:78px;display:flex;flex-direction:column;gap:6px;padding:12px 11px;border-radius:8px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);box-shadow:0 8px 20px rgba(0,0,0,.3);}
.cmp-doc .cd-h{height:9px;width:60%;border-radius:3px;background:var(--grad);}
.cmp-doc .cd-l{height:5px;border-radius:3px;background:rgba(255,255,255,.32);}
.cmp-doc .cd-l.s{width:62%;}

/* LAYOUT — the grid of nine with named, color-coded cells (mirrors ROLE_COLOR) */
.cmp-grid{display:grid;width:118px;aspect-ratio:1/1;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);gap:5px;}
.cmp-grid .cg{display:flex;align-items:center;justify-content:center;border-radius:5px;font-family:var(--font-mono);font-size:8.5px;font-weight:600;letter-spacing:.02em;border:1.5px solid;}
.cmp-grid .cg.head {color:#b79cff;border-color:rgba(139,92,246,.55);background:rgba(139,92,246,.16);}
.cmp-grid .cg.image{color:#6fd2f3;border-color:rgba(14,165,233,.55);background:rgba(14,165,233,.16);}
.cmp-grid .cg.body {color:#aab6c8;border-color:rgba(100,116,139,.55);background:rgba(100,116,139,.18);}
.cmp-grid .cg.cta  {color:#f7c270;border-color:rgba(245,158,11,.6);background:rgba(245,158,11,.18);}

/* STYLE PRESET — rendered mini-preview + the 5 slot swatches + a live picker popover */
.cmp-style .cmp-box{justify-content:flex-start;gap:10px;}
.cmp-style-prev{width:100%;display:flex;flex-direction:column;align-items:flex-start;gap:6px;padding:10px;border-radius:9px;background:#0E1626;border:1px solid rgba(255,255,255,.1);}
.csp-title{font-family:var(--font-display);font-weight:800;font-size:15px;line-height:1;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;}
.csp-body{height:4px;width:80%;border-radius:2px;background:rgba(255,255,255,.3);}
.csp-body.s{width:55%;}
.csp-btn{margin-top:3px;font-size:8.5px;font-weight:700;letter-spacing:.04em;color:#0E1626;background:#F2A33C;border-radius:999px;padding:3px 9px;}
.cmp-swatches{display:flex;align-items:center;gap:5px;flex-wrap:wrap;justify-content:center;}
.csw{width:15px;height:15px;border-radius:50%;background:var(--c);border:1.5px solid rgba(255,255,255,.18);}
.csw.light{border-color:rgba(255,255,255,.4);}
.csw.sel{box-shadow:0 0 0 2px rgba(242,163,60,.9),0 0 10px rgba(242,163,60,.55);border-color:#fff;}
.cmp-font{font-family:var(--font-mono);font-size:8.5px;color:rgba(255,255,255,.6);padding:3px 7px;border:1px solid rgba(255,255,255,.16);border-radius:6px;background:rgba(255,255,255,.04);white-space:nowrap;}
/* the color picker popover that opens over the accent slot */
.cmp-pick{position:absolute;right:-14px;bottom:-12px;width:88px;display:flex;flex-direction:column;gap:5px;padding:7px;border-radius:10px;background:#0b1322;border:1px solid rgba(64,224,240,.4);box-shadow:0 14px 30px rgba(0,0,0,.5),0 0 0 1px rgba(64,224,240,.18);z-index:6;will-change:transform,opacity;}
.cp-sat{height:40px;border-radius:6px;background:linear-gradient(180deg,rgba(0,0,0,0),#000),linear-gradient(90deg,#fff,#F2A33C);position:relative;}
.cp-sat::after{content:"";position:absolute;right:11px;top:9px;width:8px;height:8px;border-radius:50%;border:2px solid #fff;box-shadow:0 0 4px rgba(0,0,0,.6);}
.cp-row{display:block;height:7px;border-radius:4px;background:linear-gradient(90deg,#f00,#ff0,#0f0,#0ff,#00f,#f0f,#f00);}
.cp-hex{font-family:var(--font-mono);font-size:8.5px;color:#fff;letter-spacing:.03em;}

/* DIMENSIONS — pick the output size / aspect ratio; each chip is a proportional frame */
.cmp-dims{display:flex;flex-wrap:wrap;gap:11px;justify-content:center;align-items:flex-end;}
.cmp-dim{display:flex;flex-direction:column;align-items:center;gap:5px;}
.cdm-frame{width:28px;aspect-ratio:var(--ar);border:1.5px solid rgba(255,255,255,.24);border-radius:4px;transition:border-color .35s,background .35s,box-shadow .35s;}
.cdm-lab{font-family:var(--font-mono);font-size:10px;font-weight:600;letter-spacing:.03em;color:rgba(255,255,255,.6);transition:color .35s;}
.cmp-dim.on .cdm-frame{border-color:rgba(64,224,240,.7);background:rgba(18,40,62,.6);box-shadow:0 0 0 1px rgba(64,224,240,.3),0 0 14px rgba(64,224,240,.22);}
.cmp-dim.on .cdm-lab{color:var(--g1);}

/* ASSET — the rendered output; lights up (brand border + glow) once rendered */
.cmp-asset .cmp-box{transition:border-color .45s,box-shadow .45s,background .45s;}
.cmp-render{width:100%;display:flex;flex-direction:column;align-items:flex-start;gap:6px;padding:11px;border-radius:9px;background:#0E1626;border:1px solid rgba(255,255,255,.1);filter:saturate(.55) opacity(.82);transition:filter .5s;}
.cr-title{font-family:var(--font-display);font-weight:800;font-size:13.5px;line-height:1.05;color:#fff;}
.cr-img{width:100%;height:26px;border-radius:6px;background:linear-gradient(135deg,#23365E,#3F47C9 60%,#6541CE);}
.cr-body{height:4px;width:88%;border-radius:2px;background:rgba(255,255,255,.3);}
.cr-body.s{width:60%;}
.cr-btn{margin-top:3px;font-size:8.5px;font-weight:700;letter-spacing:.04em;color:#0E1626;background:rgba(255,255,255,.55);border-radius:999px;padding:3px 9px;transition:background .5s;}
.cmp-fmt-badge{position:absolute;top:9px;right:9px;font-family:var(--font-mono);font-size:8.5px;font-weight:700;letter-spacing:.06em;color:#08111F;background:var(--g1);border-radius:999px;padding:2px 7px;opacity:0;transition:opacity .4s;}
.cmp-asset.rendered .cmp-box{border-color:rgba(64,224,240,.5);background:rgba(18,40,62,.5);box-shadow:0 0 0 1px rgba(64,224,240,.3),0 12px 30px rgba(64,224,240,.16);}
.cmp-asset.rendered .cmp-render{filter:none;}
.cmp-asset.rendered .cr-title{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;}
.cmp-asset.rendered .cr-btn{background:#F2A33C;}

/* mobile: let the equation wrap; operators rotate to read top-to-bottom */
@media(max-width:900px){
  .cmp-eq{flex-wrap:wrap;gap:12px;}
  .cmp-ing{flex:1 1 150px;max-width:200px;}
}
@media(max-width:540px){
  .cmp-eq{flex-direction:column;align-items:center;}
  .cmp-ing{flex:none;width:100%;max-width:260px;}
  .cmp-pick{right:6px;}
}

/* ============ SCENE 3 — THE LOOP / PRODUCT CHAT (matches real app) ============ */
@keyframes spin{to{transform:rotate(360deg);}}
.s-loop .pin{background:transparent;color:#fff;}
.s-loop .stage{max-width:740px;}
.loop-head{text-align:center;}
.loop-head .eyebrow{display:block;}
.loop-head .eyebrow{color:var(--g1);}
.loop-head h2{font-family:var(--font-display);font-weight:700;font-size:clamp(26px,3.2vw,40px);line-height:1.08;letter-spacing:-.025em;margin:12px 0 18px;color:#fff;}
.loop-steps{display:inline-flex;gap:10px;margin-top:18px;margin-bottom:30px;}
.loop-steps .ls{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:rgba(255,255,255,.55);padding:7px 15px;border-radius:999px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.03);transition:color .3s,border-color .3s;}
.loop-steps .ls .dot{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.25);transition:background .3s,box-shadow .3s;}
.loop-steps .ls.on{color:#fff;border-color:rgba(64,224,240,.5);}
.loop-steps .ls.on .dot{background:var(--g1);box-shadow:0 0 0 4px rgba(64,224,240,.18);}

/* chat */
.chat{display:flex;flex-direction:column;gap:15px;text-align:left;}
.msg{max-width:84%;font-size:16px;line-height:1.5;border-radius:20px;padding:13px 18px;}
.msg.user{align-self:flex-end;background:linear-gradient(180deg,#6FD2F3,#52C1EC);color:#08111F;font-weight:500;border-bottom-right-radius:7px;box-shadow:0 8px 22px rgba(82,193,236,.22);}
.msg.bot{align-self:flex-start;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);color:rgba(255,255,255,.92);border-bottom-left-radius:7px;}

/* tool call block */
.toolcall{border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.025);border-radius:18px;padding:16px;}
.tc-line{display:flex;align-items:center;gap:9px;font-family:var(--font-mono);font-size:13.5px;}
.tc-check{width:17px;height:17px;color:#3FD98A;flex:none;}
.tc-spin{width:15px;height:15px;border-radius:50%;border:2px solid rgba(255,255,255,.2);border-top-color:var(--g1);animation:spin .7s linear infinite;flex:none;}
.tc-fn{color:var(--g1);font-weight:600;}
.tc-args{color:rgba(255,255,255,.4);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1;min-width:0;}
.tc-result{margin-top:14px;border:1px solid rgba(255,255,255,.08);background:rgba(0,0,0,.28);border-radius:14px;padding:16px;}
.tc-rhead{font-family:var(--font-display);font-weight:700;font-size:16px;margin-bottom:14px;color:#fff;}
.cc-grid{display:flex;flex-direction:column;gap:10px;}
.cc-card{display:flex;align-items:center;gap:14px;border:1px solid rgba(255,255,255,.1);border-radius:14px;overflow:hidden;background:#0E1626;padding:11px;will-change:transform,opacity;}
.cc-thumb{position:relative;width:104px;flex:none;aspect-ratio:16/10;border-radius:9px;display:grid;place-items:center;overflow:hidden;}
.cc-thumb.g1{background:linear-gradient(135deg,#3A2B6B,#7A2E86 55%,#B23A6B);}
.cc-thumb.g2{background:linear-gradient(135deg,#23365E,#3F47C9 60%,#6541CE);}
.cc-thumb.g3{background:linear-gradient(135deg,#0E1A33,#1B2650);}
.cc-thumb .ini{font-family:var(--font-display);font-weight:800;font-size:22px;color:#fff;letter-spacing:.02em;text-shadow:0 2px 14px rgba(0,0,0,.35);}
.cc-thumb .badge{display:none;}
.cc-thumb .chk{position:absolute;top:6px;left:6px;width:13px;height:13px;border-radius:4px;border:1.5px solid rgba(255,255,255,.55);background:rgba(0,0,0,.18);}
.cc-body{flex:1;min-width:0;padding:0;}
.cc-body h4{font-family:var(--font-display);font-weight:600;font-size:14.5px;margin:0 0 9px;color:#fff;letter-spacing:-.01em;line-height:1.25;}
.cc-meta{display:flex;align-items:center;gap:12px;}
.cc-tag{font-family:var(--font-mono);font-size:9.5px;letter-spacing:.08em;font-weight:600;color:var(--g1);border:1px solid rgba(64,224,240,.45);border-radius:999px;padding:3px 9px;}
.cc-open{font-size:12.5px;font-weight:600;color:var(--g1);display:inline-flex;align-items:center;gap:4px;}
.tc-foot{display:flex;justify-content:flex-end;margin-top:14px;}
.tc-foot a{font-size:13.5px;font-weight:600;color:var(--g1);}

/* suggested action chips */
.suggest{display:flex;gap:10px;flex-wrap:wrap;}
.suggest .chip{font-size:13.5px;font-weight:500;color:rgba(255,255,255,.85);background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.16);border-radius:999px;padding:9px 16px;}

/* gradient-glow input (signature) */
.cc-input{position:relative;display:flex;align-items:center;gap:14px;margin-top:4px;padding:11px 11px 11px 22px;border-radius:38px;background:linear-gradient(#0b1322,#0b1322) padding-box,var(--grad) border-box;border:2px solid transparent;background-size:auto,200% 200%;}
.cc-input::before{content:"";position:absolute;inset:-3px;border-radius:inherit;background:var(--grad);background-size:220% 220%;filter:blur(14px);opacity:.5;z-index:-1;animation:glow 6s ease infinite;}
@keyframes glow{0%,100%{background-position:0% 50%;}50%{background-position:100% 50%;}}
.cc-input .plus{font-size:27px;font-weight:300;color:rgba(255,255,255,.7);line-height:1;}
.cc-input .ph{flex:1;min-width:0;display:flex;align-items:center;white-space:nowrap;overflow:hidden;font-family:var(--font-display);font-weight:500;font-size:clamp(16px,2vw,21px);color:rgba(255,255,255,.5);}
.cc-input .typed{color:rgba(255,255,255,.96);}
.cc-input .hint{color:inherit;}
.cc-input.is-typing .hint{display:none;}             /* once the caret starts, the resting placeholder is gone */
.cc-input .caret{display:none;width:2px;height:1.05em;margin:0 1px;border-radius:1px;background:var(--g1);box-shadow:0 0 8px rgba(64,224,240,.7);}
.cc-input.is-typing .caret{display:inline-block;animation:caretBlink 1.05s steps(1,end) infinite;}
@keyframes caretBlink{0%,49%{opacity:1;}50%,100%{opacity:0;}}
.cc-input .send{width:48px;height:48px;flex:none;border-radius:50%;border:none;background:linear-gradient(180deg,#5FC8F0,#3DAEDC);color:#08111F;display:grid;place-items:center;cursor:pointer;transition:transform .12s ease,box-shadow .2s ease,filter .12s ease;}
.cc-input .send svg{width:21px;height:21px;}
.cc-input .send.pressed{transform:scale(.84);filter:brightness(1.12);box-shadow:0 0 0 7px rgba(64,224,240,.22);} /* simulated click */
/* The Approve action replaces the typed composer: a full-width pill instead of the round send icon. */
.cc-input .send.approve{width:100%;height:48px;border-radius:24px;font-family:var(--font-display);font-weight:600;font-size:clamp(15px,1.8vw,19px);letter-spacing:.01em;}
.cc-input .send.approve.pressed{transform:scale(.97);} /* gentler press on the wide button */

/* ============ SCENE — CONTENT SUPPLY CHAIN (pipeline board) ============ */
.s-supply .pin{background:transparent;color:#fff;}
.s-supply .stage{max-width:1180px;}
.sc-head-copy{text-align:center;max-width:720px;margin:0 auto;}
.sc-head-copy .eyebrow{color:var(--g1);}
.sc-head-copy h2{font-family:var(--font-display);font-weight:700;font-size:clamp(26px,3.2vw,42px);line-height:1.08;letter-spacing:-.025em;margin:12px 0 12px;color:#fff;}
.sc-head-copy p{font-size:16px;line-height:1.55;color:rgba(255,255,255,.66);margin:0 auto;max-width:600px;}

.sc-board{position:relative;width:100%;max-width:1180px;margin:26px auto 0;aspect-ratio:1180/600;}
.sc-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:1;}
.sc-svg .faint{stroke:rgba(255,255,255,.09);stroke-width:1.4;fill:none;}
.sc-svg .active{stroke:var(--g1);stroke-width:2.6;fill:none;stroke-linecap:round;filter:drop-shadow(0 0 5px rgba(64,224,240,.7));}

.sc-head{position:absolute;top:0;font-size:clamp(10px,1.1vw,12.5px);font-weight:700;letter-spacing:.13em;text-transform:uppercase;display:flex;align-items:center;gap:8px;z-index:3;}
.sc-head .plus{width:19px;height:19px;border-radius:50%;border:1.5px solid currentColor;display:grid;place-items:center;flex:none;}
.sc-head .plus svg{width:10px;height:10px;display:block;}

.sc-node{position:absolute;width:20%;height:13.5%;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.03);border-radius:13px;padding:0 14px;display:flex;flex-direction:column;justify-content:center;z-index:2;will-change:transform,opacity;}
.sc-node .sc-x{position:absolute;top:8px;right:10px;color:rgba(255,255,255,.22);font-size:13px;line-height:1;}
.sc-title{font-family:var(--font-display);font-weight:600;font-size:clamp(11px,1.32vw,16px);color:rgba(255,255,255,.5);letter-spacing:-.01em;line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.sc-sub{font-size:clamp(9px,1vw,12px);color:rgba(255,255,255,.3);margin-top:3px;}
.sc-port{position:absolute;top:50%;transform:translateY(-50%);width:11px;height:11px;border-radius:50%;background:#37324b;border:2px solid #0A1322;z-index:4;}
.sc-port.l{left:-6px;}.sc-port.r{right:-6px;}
.sc-port.v{background:#A050D0;}.sc-port.g{background:#2FE6A0;}.sc-port.c{background:#40E0F0;}
.sc-node.lit{border-color:var(--g1);background:rgba(18,40,62,.55);box-shadow:0 0 0 1px var(--g1),0 10px 30px rgba(64,224,240,.22);}
.sc-node.lit .sc-title{color:#fff;}
.sc-node.lit .sc-port{box-shadow:0 0 10px rgba(64,224,240,.75);}

@media(max-width:880px){
  .sc-title{font-size:11px;}
  .sc-sub{font-size:9px;}
}
/* mobile: show only the two middle columns (Deliverables + Channels) */
@media(max-width:760px){
  .s-supply .stage{width:100%;max-width:460px;}
  .s-supply .sc-board{aspect-ratio:auto;height:400px;}
  .s-supply .sc-svg{display:none;}
  .s-supply .sc-node[data-col="0"],.s-supply .sc-node[data-col="3"],
  .s-supply .sc-head[data-col="0"],.s-supply .sc-head[data-col="3"]{display:none;}
  .s-supply .sc-node[data-col="1"]{left:3%!important;width:45%!important;}
  .s-supply .sc-node[data-col="2"]{left:52%!important;width:45%!important;}
  .s-supply .sc-head[data-col="1"]{left:3%!important;}
  .s-supply .sc-head[data-col="2"]{left:52%!important;}
  .s-supply .sc-node .sc-port{display:none;}
  .s-supply .sc-title{font-size:13px;}
  .s-supply .sc-sub{font-size:10px;}
}

/* ============ SCENE — CONFIGURABLE / REPEATABLE OUTPUTS ============ */
.s-config .pin{background:transparent;color:#fff;}
.s-config .stage{max-width:1060px;}
.cfg-head{text-align:center;max-width:720px;margin:0 auto 34px;}
.cfg-head .eyebrow{color:var(--g1);}
.cfg-head h2{font-family:var(--font-display);font-weight:700;font-size:clamp(26px,3.2vw,42px);line-height:1.08;letter-spacing:-.02em;margin:12px 0 12px;color:#fff;}
.cfg-head p{font-size:16px;line-height:1.55;color:rgba(255,255,255,.66);margin:0 auto;max-width:600px;}
.cfg-row{display:grid;grid-template-columns:1fr 44px 1fr;gap:22px;align-items:center;}

/* format config card (left) */
.cfg-card{border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.03);border-radius:18px;padding:20px;will-change:transform,opacity;}
.cfg-ct{display:flex;align-items:center;gap:10px;margin-bottom:6px;}
.cfg-ct .tag{font-family:var(--font-mono);font-size:10px;letter-spacing:.1em;font-weight:600;color:var(--g1);border:1px solid rgba(64,224,240,.4);border-radius:6px;padding:3px 8px;}
.cfg-ct h3{font-family:var(--font-display);font-weight:600;font-size:16px;margin:0;color:#fff;letter-spacing:-.01em;}
.cfg-spec{font-family:var(--font-mono);font-size:12px;color:rgba(255,255,255,.45);margin-bottom:16px;}
.cfg-fields{display:grid;gap:9px;margin:0 0 16px;padding:0;}
.cfg-fields li{list-style:none;display:flex;align-items:center;gap:10px;font-size:13.5px;color:rgba(255,255,255,.86);will-change:transform,opacity;}
.cfg-fields .fi{width:22px;height:22px;flex:none;border-radius:6px;background:rgba(64,224,240,.12);display:grid;place-items:center;color:var(--g1);}
.cfg-fields .fi svg{width:13px;height:13px;}
.cfg-fields .ft{font-family:var(--font-mono);font-size:11px;color:rgba(255,255,255,.4);}
.cfg-fields .req{margin-left:auto;font-size:10px;font-weight:700;letter-spacing:.08em;color:#F2A33C;border:1px solid rgba(242,163,60,.4);border-radius:999px;padding:2px 7px;}
.cfg-toggles{display:flex;flex-direction:column;gap:9px;border-top:1px solid rgba(255,255,255,.08);padding-top:14px;}
.cfg-tg{display:flex;align-items:center;justify-content:space-between;font-size:13px;color:rgba(255,255,255,.82);}
.cfg-tg .sw{width:34px;height:19px;border-radius:999px;background:var(--grad);position:relative;flex:none;}
.cfg-tg .sw::after{content:"";position:absolute;top:2px;right:2px;width:15px;height:15px;border-radius:50%;background:#fff;}

/* arrow between */
.cfg-arrow{display:grid;place-items:center;color:rgba(255,255,255,.4);}
.cfg-arrow svg{width:26px;height:26px;}

/* repeatable outputs (right) */
.cfg-outs{display:grid;grid-template-columns:1fr 1fr;gap:11px;}
.cfg-out{border:1px solid rgba(255,255,255,.1);background:#0E1626;border-radius:12px;padding:12px;will-change:transform,opacity;}
.cfg-out .oimg{aspect-ratio:1200/627;border-radius:8px;background:linear-gradient(135deg,#23365E,#3F47C9 60%,#6541CE);display:grid;place-items:center;margin-bottom:10px;}
.cfg-out .oimg span{font-family:var(--font-display);font-weight:700;font-size:13px;color:rgba(255,255,255,.92);}
.cfg-out .orow{display:flex;align-items:center;gap:7px;}
.cfg-out .ok{width:15px;height:15px;flex:none;color:#3FD98A;}
.cfg-out .ol{font-size:11px;color:rgba(255,255,255,.6);}
.cfg-out .obar{height:5px;border-radius:4px;background:rgba(255,255,255,.12);margin-top:8px;}
.cfg-out .obar.w70{width:70%;}

@media(max-width:880px){
  .cfg-row{grid-template-columns:1fr;gap:18px;}
  .cfg-arrow svg{transform:rotate(90deg);}
}

/* ============ SCENE — MULTI-MODEL ============ */
.s-model .pin{background:transparent;color:#fff;}
.s-model .stage{max-width:920px;text-align:center;}
.mdl-head{max-width:680px;margin:0 auto 36px;}
.mdl-head .eyebrow{color:var(--g1);}
.mdl-head h2{font-family:var(--font-display);font-weight:700;font-size:clamp(26px,3.2vw,42px);line-height:1.1;letter-spacing:-.02em;margin:12px 0 12px;color:#fff;}
.mdl-head p{font-size:16px;line-height:1.55;color:rgba(255,255,255,.66);margin:0 auto;max-width:540px;}
.mdl-row{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;}
.mdl-chip{display:flex;align-items:center;gap:9px;font-family:var(--font-display);font-weight:600;font-size:16px;color:rgba(255,255,255,.7);background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.12);border-radius:13px;padding:14px 18px;will-change:transform,opacity;}
.mdl-chip .mdot{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.3);flex:none;}
.mdl-chip .msub{font-family:var(--font-sans);font-weight:500;font-size:12px;color:rgba(255,255,255,.42);}
.mdl-chip svg{width:18px;height:18px;color:var(--g1);}
.mdl-chip.on{color:#fff;border-color:rgba(64,224,240,.5);background:rgba(18,40,62,.5);box-shadow:0 0 0 1px rgba(64,224,240,.35);}
.mdl-chip.on .mdot{background:var(--g1);box-shadow:0 0 0 4px rgba(64,224,240,.18);}
.mdl-chip.auto{border-style:dashed;border-color:rgba(101,65,206,.5);color:#fff;}
.mdl-chip.auto .msub{color:rgba(255,255,255,.5);}

/* ============ SCENE — SECURITY ============ */
.s-secure .pin{background:transparent;color:#fff;}
.s-secure .stage{max-width:1000px;}
.sec-head{text-align:center;max-width:680px;margin:0 auto 38px;}
.sec-head .eyebrow{color:var(--g1);}
.sec-head h2{font-family:var(--font-display);font-weight:700;font-size:clamp(26px,3.2vw,42px);line-height:1.1;letter-spacing:-.02em;margin:12px 0 0;color:#fff;}
.sec-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;}
.sec-cell{display:flex;flex-direction:column;gap:6px;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.03);border-radius:14px;padding:20px;will-change:transform,opacity;}
.sec-cell .sic{width:40px;height:40px;border-radius:11px;background:rgba(64,224,240,.1);display:grid;place-items:center;color:var(--g1);margin-bottom:8px;}
.sec-cell .sic svg{width:20px;height:20px;}
.sec-cell b{font-family:var(--font-display);font-weight:600;font-size:15.5px;color:#fff;letter-spacing:-.01em;}
.sec-cell span{font-size:13px;line-height:1.4;color:rgba(255,255,255,.6);}
@media(max-width:880px){.sec-grid{grid-template-columns:1fr 1fr;}.mdl-chip{font-size:14px;padding:12px 14px;}}
@media(max-width:560px){.sec-grid{grid-template-columns:1fr;}}

/* ============ SCENE 4 — INTEGRATIONS ============ */
.s-integ .pin{background:transparent;}
.s-integ .stage{max-width:1080px;text-align:center;}
.s-integ h2{font-family:var(--font-display);font-weight:700;font-size:clamp(28px,3.4vw,44px);line-height:1.08;letter-spacing:-.025em;margin:12px 0 14px;color:#fff;}
.s-integ p{font-size:17px;line-height:1.55;color:rgba(255,255,255,.6);max-width:620px;margin:0 auto 36px;}
.itiles{display:grid;grid-template-columns:repeat(10,1fr);gap:13px;}
.itiles img{width:100%;aspect-ratio:1;border-radius:18px;will-change:transform,opacity;}
.bidir{display:inline-flex;align-items:center;gap:12px;margin-top:34px;font-family:var(--font-display);font-weight:600;color:rgba(255,255,255,.72);font-size:17px;}
.bidir svg{width:24px;height:24px;color:var(--g1);}

/* ============ SCENE 5 — PROOF ============ */
.s-proof .pin{background:transparent;}
.s-proof .stage{max-width:1020px;text-align:center;}
.metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:30px;margin-bottom:56px;}
.metric .big{font-family:var(--font-display);font-weight:700;font-size:clamp(40px,5.4vw,72px);line-height:1;letter-spacing:-.02em;}
.metric .lab{font-size:14px;color:rgba(255,255,255,.6);margin-top:10px;}
.pquote{max-width:760px;margin:0 auto;}
.pquote .mk{font-family:var(--font-display);font-weight:700;font-size:60px;line-height:.3;color:rgba(255,255,255,.18);}
.pquote p{font-family:var(--font-display);font-weight:600;font-size:clamp(20px,2.6vw,30px);line-height:1.35;letter-spacing:-.02em;color:#fff;margin:18px 0 22px;}
.pquote .who{display:flex;align-items:center;justify-content:center;gap:12px;}
.pquote .av{width:42px;height:42px;border-radius:50%;background:var(--grad);}
.pquote .who b{font-size:14.5px;}
.pquote .who span{font-size:13px;color:rgba(255,255,255,.6);}
.pquote .who .txt{text-align:left;}

/* ============ SCENE — ACCESS EVERYWHERE ============ */
.s-access .pin{background:transparent;}
.s-access .stage{max-width:980px;text-align:center;}
.acc-head{max-width:700px;margin:0 auto 34px;}
.acc-head .eyebrow{color:var(--g1);}
.acc-head h2{font-family:var(--font-display);font-weight:700;font-size:clamp(26px,3.2vw,42px);line-height:1.08;letter-spacing:-.02em;margin:12px 0 12px;color:#fff;}
.acc-head p{font-size:16px;line-height:1.55;color:rgba(255,255,255,.66);margin:0 auto;max-width:600px;}
.acc-group{display:grid;grid-template-columns:repeat(4,1fr);gap:13px;}
.acc-tile{border:1px solid rgba(255,255,255,.11);background:rgba(255,255,255,.03);border-radius:15px;padding:20px 14px;display:flex;flex-direction:column;align-items:center;gap:10px;will-change:transform,opacity;}
.acc-tile .ic{width:46px;height:46px;border-radius:12px;background:rgba(64,224,240,.1);display:grid;place-items:center;color:var(--g1);}
.acc-tile .ic svg{width:23px;height:23px;}
.acc-tile b{font-family:var(--font-display);font-weight:600;font-size:14.5px;color:#fff;letter-spacing:-.01em;}
.acc-tile span{font-size:11.5px;color:rgba(255,255,255,.5);}
.acc-label{display:flex;align-items:center;gap:14px;margin:26px 0 18px;color:rgba(255,255,255,.5);font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;}
.acc-label::before,.acc-label::after{content:"";flex:1;height:1px;background:rgba(255,255,255,.12);}
.acc-tile.plug .ic{background:rgba(160,80,208,.13);color:#C49BE8;}
@media(max-width:880px){.acc-group{grid-template-columns:repeat(2,1fr);}}

/* ============ SCENE 6 — CTA ============ */
.s-cta .pin{background:transparent;}
.s-cta .aura-c{width:560px;height:560px;left:50%;top:-200px;transform:translateX(-50%);background:radial-gradient(circle,var(--g4),transparent 62%);opacity:.4;}
.cta-stack{text-align:center;max-width:640px;margin:0 auto;position:relative;z-index:2;}
.cta-stack h2{font-family:var(--font-display);font-weight:700;font-size:clamp(32px,4.4vw,56px);line-height:1.05;letter-spacing:-.03em;color:#fff;margin:18px 0 16px;}
.cta-stack p{font-size:17px;line-height:1.55;color:rgba(255,255,255,.78);margin:0 0 30px;}
.access{display:flex;justify-content:center;gap:10px;max-width:480px;margin:0 auto;}
.access .btn-grad{font-size:16px;padding:15px 30px;}
.access input{flex:1;border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.06);color:#fff;border-radius:var(--radius-md);padding:14px 16px;font-family:var(--font-sans);font-size:15px;outline:none;transition:border-color .15s;}
.access input::placeholder{color:rgba(255,255,255,.5);}
.access input:focus{border-color:var(--g1);}
.cta-note{margin-top:16px;font-size:13.5px;color:rgba(255,255,255,.6);}

/* ---------- Founding Partner wall ---------- */
.fp{margin-top:34px;}
.fp-head{display:flex;align-items:center;justify-content:center;gap:8px 16px;flex-wrap:wrap;margin-bottom:14px;}
.fp-eyebrow{font-family:var(--font-sans);font-weight:600;font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--g1);}
.fp-count{font-size:13px;color:rgba(255,255,255,.6);}
.fp-count b{color:#fff;font-weight:700;}
.fp-count .fp-open{color:var(--g1);font-weight:600;}
.fp-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;}
.fp-slot{position:relative;display:flex;align-items:center;justify-content:center;height:58px;border-radius:var(--radius-md);border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.04);}
.fp-slot.filled{background:rgba(255,255,255,.06);}
.fp-logo{max-width:78%;max-height:54%;object-fit:contain;filter:grayscale(1) brightness(1.7);opacity:.72;transition:filter .2s,opacity .2s;}
.fp-slot.filled:hover .fp-logo{filter:grayscale(0) brightness(1);opacity:1;}
.fp-slot.open{flex-direction:column;gap:6px;font-family:var(--font-sans);font-size:11px;font-weight:600;letter-spacing:.01em;color:rgba(255,255,255,.5);text-decoration:none;border-style:dashed;border-color:rgba(255,255,255,.18);cursor:pointer;transition:border-color .2s,color .2s,background .2s,transform .2s;}
.fp-slot.open:hover{border-color:var(--g1);color:#fff;background:rgba(64,224,240,.06);transform:translateY(-2px);}
.fp-plus{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;background:var(--grad);}
.fp-plus svg{width:13px;height:13px;color:#fff;}
@media (max-width:560px){
  .fp-grid{grid-template-columns:repeat(2,1fr);gap:8px;}
  .fp-slot{height:52px;}
}
.cta-brand{display:flex;align-items:center;justify-content:center;gap:10px;margin-bottom:6px;}
.cta-brand img{width:38px;height:38px;}

/* ---------------- progressive enhancement: hidden initial states ---------------- */
body.js [data-anim]{opacity:0;}

/* scene nav — glass prev/next, pinned bottom-center */
.scene-nav{position:fixed;left:50%;bottom:26px;transform:translateX(-50%);z-index:80;display:flex;align-items:center;gap:0;padding:5px;border-radius:999px;background:rgba(10,18,32,.42);backdrop-filter:blur(16px) saturate(1.3);-webkit-backdrop-filter:blur(16px) saturate(1.3);border:1px solid rgba(255,255,255,.18);box-shadow:0 10px 34px rgba(0,0,0,.32),inset 0 1px 0 rgba(255,255,255,.16);animation:navIn .6s var(--ease-entrance) both;animation-delay:.5s;}
@keyframes navIn{from{opacity:0;transform:translate(-50%,14px);}to{opacity:1;transform:translate(-50%,0);}}
.scene-nav .nv{width:44px;height:44px;border-radius:50%;border:none;background:transparent;color:rgba(255,255,255,.94);display:grid;place-items:center;cursor:pointer;transition:background .2s,transform .12s,opacity .2s;}
.scene-nav .nv svg{width:20px;height:20px;}
.scene-nav .nv:hover{background:rgba(255,255,255,.15);}
.scene-nav .nv:active{transform:scale(.9);}
.scene-nav .nv:disabled{opacity:.3;cursor:default;}
.scene-nav .nv-div{width:1px;height:22px;background:rgba(255,255,255,.2);margin:0 4px;}
/* back-to-top button — hidden until the user reaches the bottom */
.scene-nav .top-div,.scene-nav .nv.top{opacity:0;width:0;margin:0;padding:0;overflow:hidden;transform:scale(.6);pointer-events:none;transition:width .38s var(--ease-entrance),margin .38s var(--ease-entrance),opacity .3s,transform .38s var(--ease-entrance);}
.scene-nav.at-bottom .top-div{opacity:1;width:1px;margin:0 4px;}
.scene-nav.at-bottom .nv.top{opacity:1;width:44px;transform:scale(1);pointer-events:auto;}
.scene-nav .nv.top{color:var(--g1);}
.scene-nav .nv.play{color:var(--g1);position:relative;}
.scene-nav .nv.play .i-pause{display:none;}
.scene-nav.playing .nv.play .i-play{display:none;}
.scene-nav.playing .nv.play .i-pause{display:block;}
/* auto-scroll progress ring — a brand-gradient stroke that draws around the play button over
   each HOLD, completing exactly as autoplay glides to the next scene (the stroke-dashoffset is
   driven from JS). Shown only while playing. The .play-ring size rule must out-specify the
   `.scene-nav .nv svg{width:20px}` rule above, hence the three-class selector. */
.scene-nav .nv .play-ring{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible;opacity:0;transition:opacity .3s ease;}
.scene-nav.playing .nv .play-ring{opacity:1;}
.play-ring .pr-fill{fill:none;stroke:url(#playRingGrad);stroke-width:2.5;stroke-linecap:round;stroke-dasharray:100;stroke-dashoffset:100;transform-box:fill-box;transform-origin:center;transform:rotate(-90deg);filter:drop-shadow(0 0 4px rgba(101,65,206,.55));}
body.reduced .scene-nav{display:none;}

/* ── Left section rail: a minimal scrollspy nav. Dots track scroll; the active dot
   lights with the brand gradient, and labels reveal as a glass pill that matches the
   host "Back to chat" button (same navy glass, border, blur, light text). Desktop only. ── */
.story-rail-nav{position:fixed;left:20px;top:50%;transform:translateY(-50%);z-index:80;display:flex;flex-direction:column;gap:9px;align-items:flex-start;animation:srnIn .6s var(--ease-entrance) both;animation-delay:.5s;}
@keyframes srnIn{from{opacity:0;transform:translate(-10px,-50%);}to{opacity:1;transform:translate(0,-50%);}}
.srn-item{position:relative;display:flex;align-items:center;justify-content:center;width:18px;height:18px;padding:0;background:none;border:0;cursor:pointer;-webkit-tap-highlight-color:transparent;}
.srn-dot{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.26);transition:width .3s var(--ease-entrance),height .3s var(--ease-entrance),background .3s,box-shadow .3s;}
/* the fly-out label — styled to match .showcase-clear ("Back to chat") in the host app */
.srn-label{position:absolute;left:20px;top:50%;white-space:nowrap;font-family:var(--font-sans);font-size:12.5px;font-weight:500;color:hsl(210 32% 86%);background:hsl(219 42% 13% / .8);border:1px solid hsl(219 30% 34% / .7);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 6px 20px hsl(220 60% 4% / .45);border-radius:999px;padding:6px 13px;opacity:0;transform:translate(-6px,-50%);pointer-events:none;transition:opacity .2s ease,transform .22s var(--ease-entrance);}
.srn-item:hover .srn-dot{background:rgba(255,255,255,.62);}
.srn-item:hover .srn-label{opacity:1;transform:translate(0,-50%);}
.srn-item.is-active .srn-dot{width:9px;height:9px;background:var(--grad);box-shadow:0 0 0 4px rgba(64,224,240,.16),0 0 12px rgba(101,65,206,.6);}
.srn-item.is-active .srn-label{color:#fff;}
/* Labels reveal on hover by default (no overlap with left-aligned content). On wide
   screens there's gutter room, so the current section's label stays pinned open. */
@media(min-width:1440px){.srn-item.is-active .srn-label{opacity:1;transform:translate(0,-50%);}}
/* roomy desktops only — phones/tablets use the bottom scene-nav and have no left gutter */
@media(max-width:1024px){.story-rail-nav{display:none;}}
body.reduced .story-rail-nav{display:none;}

/* ---------------- reduced / no-pin fallback ---------------- */
body.reduced .pin{position:relative;height:auto;min-height:auto;padding:90px 0;}
body.reduced [data-anim]{opacity:1!important;}
body.reduced [data-anim]:not(.gnode){transform:none!important;}
body.reduced .scene{height:auto!important;}
body.reduced .scroll-hint,body.reduced .rail{display:none;}
body.reduced .iv-unmute-ring::after{animation:none;}
@media(prefers-reduced-motion:reduce){.iv-unmute-ring::after{animation:none;}}

@media(max-width:880px){
  .s-canvas .stage{grid-template-columns:1fr;gap:30px;}
  .graph{max-width:440px;margin:0 auto;}
  .itiles{grid-template-columns:repeat(6,1fr);}
  .metrics{grid-template-columns:repeat(2,1fr);gap:24px;}
  .stage{padding:0 28px;}
  .cc-grid{grid-template-columns:1fr;}
}
@media(max-width:560px){
  .stage{padding:0 18px;}
  .itiles{grid-template-columns:repeat(5,1fr);gap:9px;}
  /* the compile source + its format bank read better with a touch more breathing room */
  .s-compile .cmp-outs{gap:8px;}
  .s-compile .cmp-outs .imp-chip{padding:9px 12px;font-size:13px;}
}

/* ── Section titles: ONE uniform size across every scene, balanced across two lines.
   Each scene styled its own headline (.prob-h 58 / .concept-h 54 / .cv-copy h2 46 /
   .s-integ h2 44 / .loop-head h2 40 / the rest 42), so they jumped size scene-to-scene.
   This override layer (placed last → wins on equal specificity) normalizes every scene
   <h2> to the common clamp and balances the wrap so two-line titles split evenly. The
   hero <h1> (.hero-h) is set to the SAME clamp directly, so every headline matches. ── */
.scene h2{
  font-size:clamp(26px,3.2vw,42px);
  text-wrap:balance;   /* even out the two lines (graceful no-op on older engines) */
}