@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;600;700;800&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500;600&display=swap');

/* ============================================================
   APIMatic homepage — hi-fi mockup (stream 3.2, draft 1)
   Design system: APIMatic-Web-Design-System.md (dark-first)
   2026 layer: blueprint grids, restrained glass, scroll-driven
   explanatory motion. HubSpot rules: class selectors only,
   !important on color/font, span-in-button, link+import fonts.
   ============================================================ */

:root{
  --bg:#05080f;
  --surface:#0D0F1E;
  --surface-2:#0A0D18;
  --blue:#0C7FF2;
  --blue-alt:#4F7FFF;
  --teal:#2BD9C7;          /* schematic build-time lane (scoped) */
  --purple:#B47CF5;        /* schematic runtime lane (scoped)    */
  --mint:#8FD9B6;
  --coral:#D97757;
  --white:#FFFFFF;
  --white-80:rgba(255,255,255,.80);
  --body:#A0A8B8;
  --white-35:rgba(255,255,255,.35);
  --border:rgba(255,255,255,.10);
  --border-soft:rgba(255,255,255,.07);
  --radius:14px;
  --radius-lg:18px;        /* marquee/showcase cards — one shared larger radius */
  --radius-sm:8px;
  --col:1280px;
  --font-display:'Plus Jakarta Sans',sans-serif;
  --font-body:'Inter',sans-serif;
  --font-mono:'JetBrains Mono',monospace;
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--bg) !important;
  color:var(--body) !important;
  font-family:var(--font-body) !important;
  font-size:16px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* HubSpot defensive overrides */
h1,h2,h3,h4{font-family:var(--font-display) !important;color:var(--white) !important;margin:0;}
a{color:var(--blue) !important;text-decoration:none;font-family:inherit !important;}
a:hover{font-weight:inherit;}
img{max-width:100% !important;height:auto !important;border:0 !important;}
button{font-family:var(--font-body) !important;cursor:pointer;background:none;border:0;color:inherit !important;}
blockquote{margin:0 !important;padding:0 !important;border:0 !important;background:transparent !important;}
p{margin:0 0 14px;}

.wrap{max-width:var(--col);margin:0 auto;padding:0 40px;}
.section-pad{padding:112px 0;}

/* Blueprint dot grid — the signature background device */
.bp{position:relative;}
.bp::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.055) 1px, transparent 1px);
  background-size:26px 26px;
  mask-image:radial-gradient(ellipse 90% 75% at 50% 35%, black 25%, transparent 78%);
  -webkit-mask-image:radial-gradient(ellipse 90% 75% at 50% 35%, black 25%, transparent 78%);
}
.bp > *{position:relative;z-index:1;}

/* Type scale */
.h1{font-size:clamp(34px,4.4vw,54px);font-weight:800;line-height:1.12;letter-spacing:-.02em;}
.h2{font-size:clamp(26px,3vw,34px);font-weight:700;line-height:1.18;letter-spacing:-.015em;}
.h3{font-size:19px;font-weight:700;line-height:1.3;}
.sub{font-size:18px;line-height:1.65;color:var(--body);}
.small{font-size:13.5px;color:var(--white-35);}

/* Buttons */
.btn{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--font-display) !important;font-weight:700;font-size:15px;
  padding:13px 24px;border-radius:var(--radius);
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease;
  white-space:nowrap;
}
.btn-primary{background:var(--blue);color:var(--white) !important;border:1px solid var(--blue);}
.btn-primary:hover{transform:translateY(-1px);box-shadow:0 6px 24px rgba(12,127,242,.35);}
.btn-ghost{background:transparent;color:var(--white-80) !important;border:1px solid var(--border);}
.btn-ghost:hover{border-color:rgba(255,255,255,.28);color:var(--white) !important;}
.btn-lg{padding:15px 28px;font-size:16px;}

/* Keyboard focus — visible ring on the dark theme (WCAG 2.4.7). Mouse users unaffected (:focus-visible). */
.btn:focus-visible,.eng-tab:focus-visible,.spot-tab:focus-visible,.lang-tab:focus-visible,
.faq-q:focus-visible,.pf-item:focus-visible,.skill-copy:focus-visible,.nav-burger:focus-visible{
  outline:2px solid var(--blue);outline-offset:2px;border-radius:var(--radius-sm);
}
a:focus-visible{outline:2px solid var(--blue-alt);outline-offset:3px;border-radius:4px;}

/* Reveal (IntersectionObserver fallback; CSS scroll-driven below) */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .7s ease, transform .7s ease;}
.reveal.in{opacity:1;transform:none;}
@supports (animation-timeline: view()){
  .reveal{opacity:1;transform:none;transition:none;
    animation:rvl linear both;animation-timeline:view();animation-range:entry 0% entry 42%;}
  @keyframes rvl{from{opacity:0;transform:translateY(18px);}to{opacity:1;transform:none;}}
}

/* ============ NAV (glass moment #1) ============ */
.nav{
  position:sticky;top:0;z-index:200;
  background:rgba(5,8,15,.7);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--border-soft);
}
.nav-inner{display:flex;align-items:center;gap:30px;height:66px;}
.brand{display:flex;align-items:center;gap:10px;font-family:var(--font-display) !important;font-weight:800;font-size:18px;color:var(--white) !important;}
.brand-mark{
  width:28px;height:28px;border-radius:7px;display:inline-flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,var(--blue),var(--blue-alt));color:var(--white);
  font-size:15px;font-weight:800;font-family:var(--font-display);
}
.nav-links{display:flex;gap:26px;font-size:14.5px;font-weight:500;}
.nav-links a{color:var(--body) !important;transition:color .15s ease;}
.nav-links a:hover{color:var(--white) !important;}
.nav-links .caret{font-size:10px;opacity:.55;margin-left:3px;}
.nav-cta{margin-left:auto;display:flex;gap:10px;align-items:center;}
.nav .btn{padding:9px 17px;font-size:14px;border-radius:10px;}
.nav-burger{display:none;flex-direction:column;gap:5px;padding:8px;}
.nav-burger span{display:block;width:20px;height:2px;background:var(--white-80);border-radius:2px;transition:transform .2s ease,opacity .2s ease;}
.nav-mobile{display:none;border-top:1px solid var(--border-soft);padding:14px 40px 20px;}
.nav-mobile a{display:block;padding:10px 0;color:var(--white-80) !important;font-size:16px;font-weight:600;}
.nav.open .nav-mobile{display:block;}
.nav.open .nav-burger span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.nav.open .nav-burger span:nth-child(2){opacity:0;}
.nav.open .nav-burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

/* ============ 1 · HERO ============ */
.hero{padding:84px 0 72px;}
/* Centered stack (Snyk pattern): tagline + CTAs centered, schematic full-width below */
.hero-grid{display:grid;grid-template-columns:1fr;gap:56px;}
.hero-copy{text-align:center;max-width:860px;margin:0 auto;}
.hero-copy .h1{margin-bottom:20px;}
.hero-copy .sub{max-width:54ch;margin:0 auto 30px;}
.cta-row{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;}
.schem{max-width:980px;margin:0 auto;width:100%;}

/* Hero schematic — input/output blueprint */
.schem{
  border:1px solid var(--border);border-radius:var(--radius);
  background:
    radial-gradient(rgba(255,255,255,.05) 1px, transparent 1px) 0 0/22px 22px,
    linear-gradient(180deg,#080b16,#060912);
  padding:26px 26px 22px;
  box-shadow:0 30px 80px rgba(0,0,0,.45);
}
.schem-head{display:flex;justify-content:space-between;align-items:baseline;gap:14px;}
.schem-title{font-family:var(--font-display) !important;font-weight:800;font-size:21px;color:var(--white);letter-spacing:.02em;}
.schem-engine{font-family:var(--font-mono) !important;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--teal);opacity:.85;}
.schem-tag{margin:3px 0 18px;font-size:12.5px;color:var(--white-35);}
.schem-tag em{font-style:italic;color:rgba(255,255,255,.45);}
.schem-tag b{color:rgba(255,255,255,.5);font-weight:600;margin-right:7px;}

.schem-mid{display:grid;grid-template-columns:1fr 34px 1fr;align-items:stretch;gap:0;}
.schem-card{border-radius:12px;padding:15px 16px 14px;background:rgba(255,255,255,.02);}
.schem-card-build{border:1px solid rgba(43,217,199,.4);box-shadow:0 0 22px rgba(43,217,199,.10), inset 0 0 26px rgba(43,217,199,.04);}
.schem-card-run{border:1px solid rgba(180,124,245,.42);box-shadow:0 0 22px rgba(180,124,245,.12), inset 0 0 26px rgba(180,124,245,.05);}
.schem-card-label{font-family:var(--font-mono) !important;font-size:10.5px;font-weight:600;letter-spacing:.12em;color:var(--white);margin-bottom:11px;}
.schem-pills{display:flex;flex-direction:column;gap:7px;}
.pill{
  display:inline-block;align-self:flex-start;
  font-family:var(--font-mono) !important;font-size:10.5px;font-weight:500;letter-spacing:.02em;
  padding:5px 11px;border-radius:999px;color:#04211d;
  background:linear-gradient(135deg,rgba(43,217,199,.95),rgba(43,217,199,.75));
}
.schem-node{
  display:flex;align-items:center;gap:8px;
  border:1px solid rgba(180,124,245,.35);background:rgba(10,8,20,.7);
  border-radius:9px;padding:8px 11px;margin-bottom:7px;
  font-family:var(--font-display) !important;font-weight:600;font-size:13px;color:var(--white);
}
.schem-node:last-child{margin-bottom:0;}
.schem-node .dot{width:7px;height:7px;border-radius:50%;background:var(--purple);box-shadow:0 0 8px rgba(180,124,245,.9);flex:none;}

.schem-flow-x{display:flex;align-items:center;justify-content:center;}
.schem-flow-x svg{overflow:visible;}
.flow-line{stroke-dasharray:60;stroke-dashoffset:60;}
.schem.play .flow-line{animation:draw 1s ease .25s forwards;}
.flow-line-v{stroke-dasharray:80;stroke-dashoffset:80;}
.schem.play .flow-line-v{animation:draw .9s ease .9s forwards;}
@keyframes draw{to{stroke-dashoffset:0;}}

.schem-down{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:16px;position:relative;}
.schem-down::before{
  content:"";position:absolute;top:-16px;left:50%;width:1px;height:16px;
  background:linear-gradient(180deg,rgba(180,124,245,.6),rgba(43,217,199,.4));
}
.delivers{
  grid-column:1 / -1;display:flex;align-items:center;gap:10px;justify-content:center;
}
.delivers-pill{
  font-family:var(--font-mono) !important;font-size:10px;font-weight:600;letter-spacing:.14em;
  color:#04211d;background:var(--teal);border-radius:6px;padding:5px 12px;
  clip-path:polygon(0 0, calc(100% - 9px) 0, 100% 50%, calc(100% - 9px) 100%, 0 100%);
  padding-right:20px;
}
.consumer{
  border:1px solid rgba(43,217,199,.22);border-radius:11px;background:rgba(255,255,255,.02);
  padding:13px 15px;
}
.consumer-run{border-color:rgba(180,124,245,.28);}
.consumer-head{display:flex;align-items:center;gap:9px;margin-bottom:10px;}
.consumer-head svg{flex:none;}
.consumer-title{font-family:var(--font-display) !important;font-weight:700;font-size:13.5px;color:var(--white);}
.tool-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap;}
.tool-chip{display:flex;flex-direction:column;align-items:center;gap:4px;min-width:44px;}
.tool-chip svg{display:block;}
.tool-chip .tname{font-size:9.5px;color:var(--white-35);font-family:var(--font-mono) !important;letter-spacing:.02em;white-space:nowrap;}
.tool-chip.faded{opacity:.38;}
.tool-chip.faded2{opacity:.22;}
.agents-line{font-size:12px;color:var(--body);line-height:1.55;}

/* ============================================================
   LIVE DISTRIBUTION BOARD (v3) — the hero visual.
   Vertical: one OpenAPI spec → APIMatic deterministic engine → two
   lanes (Context Plugins · build-time / MCP Servers · runtime), each
   holding five continuously-swapping full-color tool tiles (Stripe
   cadence: at most one tile mid-swap per lane). Connectors are drawn
   by a JS-measured overlay (see the rb-overlay IIFE near EOF) so the
   lines are pixel-attached to the boxes at every width — no static
   SVG scaling. Surfaces follow the page's neutral card language
   (dark glass, inset white-alpha rings, 14/18px radii); teal/violet
   live ONLY in the beams, landing dots, and eyebrow dots.
   Entrance via [data-schem] .play.
   ============================================================ */
.brails{display:block;width:100%;margin-top:20px;}        /* hero distribution board (resolved single layout) */

.rb{
  position:relative;max-width:720px;margin:6px auto 0;
  border:1px solid rgba(255,255,255,.08);border-radius:var(--radius-lg);
  background:
    radial-gradient(rgba(255,255,255,.035) 1px, transparent 1px) 0 0/22px 22px,
    linear-gradient(180deg,#0a0e1a,#070a13);
  box-shadow:0 40px 100px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.06);
  padding:28px 28px 26px;overflow:hidden;isolation:isolate;
}
.rb::before{  /* soft central bloom, masked vignette — sits under everything */
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;border-radius:inherit;
  background:radial-gradient(90% 60% at 50% 38%, rgba(12,127,242,.09), transparent 62%);
  mask-image:radial-gradient(120% 100% at 50% 42%, #000 55%, transparent 100%);
}
.rb > *{position:relative;z-index:1;}

/* --- measured connector overlay (populated by JS; two-class selector beats .rb > *) --- */
/* width/height are explicit: SVG is a replaced element, so inset:0 alone
   positions it but leaves it at its 300×150 intrinsic size (clipping every
   path). 100% sizing makes user units map 1:1 to panel CSS px. */
.rb .rb-overlay{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;}
.rb-glow{filter:drop-shadow(0 0 4px rgba(43,217,199,.35)) drop-shadow(0 0 4px rgba(180,124,245,.3));}
.rb-line{fill:none;stroke-width:1.6;stroke-linecap:round;
  stroke-dasharray:1;stroke-dashoffset:1;opacity:0;}
.brails.play .rb-line{stroke-dashoffset:0;opacity:1;}
.rb-line-in{stroke:rgba(255,255,255,.32);}
.rb-line-cp{stroke:var(--teal);}
.rb-line-mcp{stroke:var(--purple);}
.brails.play .rb-line-in{animation:rbDraw .45s ease .3s backwards;}
.brails.play .rb-line-cp{animation:rbDraw .55s ease .85s backwards;}   /* teal leads */
.brails.play .rb-line-mcp{animation:rbDraw .55s ease 1s backwards;}
.rb-dot{opacity:0;}
.brails.play .rb-dot{opacity:1;transition:opacity .4s ease 1.3s;}
.rb-dot-cp{fill:var(--teal);}
.rb-dot-mcp{fill:var(--purple);}
.rb-packet{opacity:0;offset-rotate:0deg;}
.rb-packet-cp{fill:var(--teal);}
.rb-packet-mcp{fill:var(--purple);}

/* --- SOURCE: the OpenAPI spec, centered --- */
.rb-source{display:flex;justify-content:center;margin-bottom:26px;}
.rb-emitter{
  display:inline-flex;align-items:center;gap:12px;
  border-radius:var(--radius);background:var(--surface);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.10), inset 0 1px 0 rgba(255,255,255,.07);
  padding:12px 16px 12px 14px;
}
.rb-emitter img{width:26px;height:26px;flex:none;object-fit:contain;}
.rb-emitter-t{display:flex;flex-direction:column;}
.rb-emitter-t b{font-family:var(--font-display) !important;font-weight:700;font-size:14.5px;color:var(--white);line-height:1.2;}

/* --- ENGINE: neutral card, blue lives in the content --- */
.rb-engine{display:flex;justify-content:center;margin-bottom:34px;}
.rb-engine-box{
  display:inline-flex;align-items:center;gap:12px;
  border-radius:var(--radius);padding:12px 20px;
  background:var(--surface-2);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.10), inset 0 1px 0 rgba(255,255,255,.07), 0 0 30px rgba(12,127,242,.10);
}
.rb-engine-dot{
  width:9px;height:9px;border-radius:50%;background:var(--blue);flex:none;
  box-shadow:0 0 0 4px rgba(12,127,242,.16), 0 0 14px rgba(12,127,242,.9);opacity:0;
}
.brails.play .rb-engine-dot{opacity:1;animation:rbDotOn .5s ease .55s backwards;}
.rb-engine-t{display:flex;flex-direction:column;gap:1px;}
.rb-engine-t b{font-family:var(--font-display) !important;font-weight:800;font-size:15px;color:var(--white);line-height:1.1;letter-spacing:.01em;}
/* APIMatic white wordmark replaces the "APIMatic" text; 350×55 viewBox → height sets its scale, width auto keeps ratio. Small bottom gap so it sits above the sublabel like the old text did. */
.rb-engine-logo{height:15px !important;width:auto !important;display:block;margin-bottom:3px;}
.rb-engine-t span{font-family:var(--font-mono) !important;font-size:9.5px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:rgba(150,193,255,.95);}

/* --- LANES: neutral bento-family cards, side by side --- */
.rb-lanes{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.rb-lane{
  border-radius:var(--radius-lg);padding:15px 16px 16px;
  background:
    radial-gradient(130% 90% at 50% -25%, rgba(255,255,255,.045), transparent 58%),
    var(--surface);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10), inset 0 0 0 1px rgba(255,255,255,.065);
  opacity:0;transform:translateY(8px);
}
.brails.play .rb-lane{opacity:1;transform:none;}
.brails.play .rb-lane-cp{animation:rbRise .5s ease 1.2s backwards;}
.brails.play .rb-lane-mcp{animation:rbRise .5s ease 1.35s backwards;}
.rb-eyebrow{
  display:flex;align-items:center;gap:7px;
  font-family:var(--font-mono) !important;font-size:10px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.85);
  margin-bottom:7px;
}
.rb-eyebrow::before{content:"";width:5px;height:5px;border-radius:50%;flex:none;}
.rb-lane-cp .rb-eyebrow::before{background:var(--teal);box-shadow:0 0 7px rgba(43,217,199,.7);}
.rb-lane-mcp .rb-eyebrow::before{background:var(--purple);box-shadow:0 0 7px rgba(180,124,245,.65);}
.rb-lane-n{display:block;font-family:var(--font-display) !important;font-weight:700;font-size:16.5px;color:var(--white);line-height:1.1;}
.rb-lane-role{display:block;margin-top:5px;margin-bottom:12px;font-family:var(--font-body) !important;font-size:11.5px;color:var(--body);line-height:1.45;}

/* --- swap tiles: dio-tool vocabulary, two stacked imgs each --- */
.rb-tiles{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;}
.rb-tile{
  position:relative;aspect-ratio:1;border-radius:12px;background:var(--surface-2);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.10);
  transition:box-shadow .25s ease, transform .25s ease;
  perspective:260px;   /* 3D stage for the flip-clock logo swap */
}
.rb-tile:hover{box-shadow:inset 0 0 0 1px rgba(255,255,255,.2);transform:translateY(-2px);}
.rb-tile img{
  position:absolute;left:50%;top:50%;width:22px;height:22px;margin:-11px 0 0 -11px;
  object-fit:contain;display:block;backface-visibility:hidden;
}
/* genuinely monochrome marks only. The dimming lives in the FILTER chain, not
   the opacity property — the swap keyframes own `opacity`, and a higher-
   specificity opacity here would override the .rb-swap-b hidden base and
   double-expose tiles during animation delays. */
.rb-tile img.is-mono{filter:brightness(0) invert(1) opacity(.85);}
.rb-swap-b{opacity:0;transform:rotateX(90deg);}  /* base = its keyframe 0; no pop at animation start */

/* --------- keyframes --------- */
@keyframes rbDraw{from{stroke-dashoffset:1;}to{stroke-dashoffset:0;}}
@keyframes rbDotOn{from{opacity:0;transform:scale(.4);}to{opacity:1;transform:none;}}
@keyframes rbRise{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:none;}}
/* Flip-clock tile swap, 12s cycle, ~250ms half-flips (2.1%). Split-flap
   sequence: A flips out (0→−90°, edge-on = gone), B flips in from +90°,
   always the same rotation direction — and mirrored for the return swap.
   B's keyframes are A's phase-shifted by half a cycle, so the handoff is
   exact by construction. Both imgs share the tile's stagger delay only. */
@keyframes rbFlipA{
  0%,47.9%{transform:rotateX(0);opacity:1;}
  50%{transform:rotateX(-90deg);opacity:1;}
  50.01%,97.9%{transform:rotateX(90deg);opacity:0;}
  97.91%{transform:rotateX(90deg);opacity:1;}
  100%{transform:rotateX(0);opacity:1;}
}
@keyframes rbFlipB{
  0%,50%{transform:rotateX(90deg);opacity:0;}
  50.01%{transform:rotateX(90deg);opacity:1;}
  52.1%,95.8%{transform:rotateX(0);opacity:1;}
  97.9%{transform:rotateX(-90deg);opacity:1;}
  97.91%,100%{transform:rotateX(-90deg);opacity:0;}
}
@keyframes rbRun{
  0%{offset-distance:0%;opacity:0;}
  3%{opacity:1;}
  27%{opacity:1;}
  30%{offset-distance:100%;opacity:0;}
  100%{offset-distance:100%;opacity:0;}
}

/* --------- ongoing motion: assigned ONLY here (reduced-motion never sees it) --------- */
@media (prefers-reduced-motion: no-preference){
  .brails.play .rb-packet-cp{animation:rbRun 7s ease-in-out 2.4s infinite;}
  .brails.play .rb-packet-mcp{animation:rbRun 7s ease-in-out 2.9s infinite;}
  .brails.play .rb-swap-a{animation:rbFlipA 12s cubic-bezier(.45,0,.55,1) infinite;}
  .brails.play .rb-swap-b{animation:rbFlipB 12s cubic-bezier(.45,0,.55,1) infinite;}
  /* per-tile stagger (positive: first flip ~6s post-entrance) */
  .brails.play .rb-tile:nth-child(2) .rb-swap-a,.brails.play .rb-tile:nth-child(2) .rb-swap-b{animation-delay:2.4s;}
  .brails.play .rb-tile:nth-child(3) .rb-swap-a,.brails.play .rb-tile:nth-child(3) .rb-swap-b{animation-delay:4.8s;}
  .brails.play .rb-tile:nth-child(4) .rb-swap-a,.brails.play .rb-tile:nth-child(4) .rb-swap-b{animation-delay:7.2s;}
  .brails.play .rb-tile:nth-child(5) .rb-swap-a,.brails.play .rb-tile:nth-child(5) .rb-swap-b{animation-delay:9.6s;}
  /* MCP lane offset so the two lanes never flip in sync */
  .brails.play .rb-lane-mcp .rb-swap-a,.brails.play .rb-lane-mcp .rb-swap-b{animation-delay:1.2s;}
  .brails.play .rb-lane-mcp .rb-tile:nth-child(2) .rb-swap-a,.brails.play .rb-lane-mcp .rb-tile:nth-child(2) .rb-swap-b{animation-delay:3.6s;}
  .brails.play .rb-lane-mcp .rb-tile:nth-child(3) .rb-swap-a,.brails.play .rb-lane-mcp .rb-tile:nth-child(3) .rb-swap-b{animation-delay:6s;}
  .brails.play .rb-lane-mcp .rb-tile:nth-child(4) .rb-swap-a,.brails.play .rb-lane-mcp .rb-tile:nth-child(4) .rb-swap-b{animation-delay:8.4s;}
  .brails.play .rb-lane-mcp .rb-tile:nth-child(5) .rb-swap-a,.brails.play .rb-lane-mcp .rb-tile:nth-child(5) .rb-swap-b{animation-delay:10.8s;}
  /* hover a lane → pause its flips (overlay is pointer-events:none, so hover works) */
  .rb-lane:hover .rb-swap-a,.rb-lane:hover .rb-swap-b{animation-play-state:paused;}
}

/* --------- reduced motion / no-JS: fully-drawn static end-state, logo A everywhere --------- */
@media (prefers-reduced-motion: reduce){
  .brails .rb-line{stroke-dashoffset:0;opacity:1;}
  .brails .rb-engine-dot{opacity:1;}
  .brails .rb-dot{opacity:1;}
  .brails .rb-lane{opacity:1;transform:none;}
}

/* --------- responsive --------- */
@media (max-width:560px){
  .rb{padding:22px 16px 20px;border-radius:var(--radius);}
  .rb-source{margin-bottom:22px;}
  .rb-engine{margin-bottom:26px;}
  .rb-lanes{grid-template-columns:1fr;gap:12px;}
  .rb-tile img{width:20px;height:20px;margin:-10px 0 0 -10px;}
}

/* ============ 2 · LOGO WALL (real assets, normalized to white via filter) ============ */
.logos{padding:16px 0 56px;border-bottom:1px solid var(--border-soft);}
.logos-lead{text-align:center;font-size:25px;font-weight:700;line-height:1.3;color:var(--white-80);margin-bottom:40px;}
.logo-row{display:flex;justify-content:center;align-items:center;gap:clamp(30px,4.5vw,56px);flex-wrap:wrap;}
.logo-row img{height:22px !important;width:auto !important;filter:brightness(0) invert(1);opacity:.45;transition:opacity .2s ease;}
.logo-row img:hover{opacity:.75;}
.logo-row img.logo-lg{height:27px !important;}
.logo-row img.logo-sm{height:18px !important;}

/* ============ 3 · CONTEXT PLUGINS MARQUEE ============ */
.marquee-head{text-align:center;margin:0 auto 30px;}
.marquee .stat-hero{display:flex;gap:clamp(30px,5vw,72px);align-items:baseline;flex-wrap:wrap;justify-content:center;margin-bottom:16px;}
.marquee .stat-cap{max-width:24ch;}
.stat{display:flex;flex-direction:column;align-items:center;}
.stat-num{
  font-family:var(--font-display) !important;font-weight:800;line-height:.95;letter-spacing:-.03em;
  font-size:clamp(52px,6.2vw,86px);
  background:linear-gradient(135deg,#fff 30%,rgba(12,127,242,.9));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
.stat-cap{font-family:var(--font-mono) !important;font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--white-35);margin-top:10px;}
.stat-line{font-size:17px;color:var(--body);max-width:62ch;margin-left:auto;margin-right:auto;text-align:center;}
.stat-line a{font-weight:600;white-space:nowrap;}
.beats{display:grid;grid-template-columns:1fr;gap:40px;margin:56px auto 20px;max-width:640px;text-align:center;}
.beat .h3{margin-bottom:10px;}
.beat p{font-size:15.5px;max-width:52ch;margin-left:auto;margin-right:auto;}
.link-row{text-align:center;margin-top:36px;}

/* Illustration: centered never-ending checklist + floating official agent logos (glass moment #2) */
/* padding-bottom reserves the floating field's max downward reach (.agent-field inset:-46px,
   +drift ≈ 50px) so the component's box ends BELOW where the logos drift, not at the board
   edge — otherwise the logos spill into the gap under it and read as clutter. */
.agentscape{position:relative;max-width:600px;margin:52px auto 0;padding-bottom:50px;isolation:isolate;}

/* Floating logo field — official coding-tool marks drift around/over the board.
   Negative inset lets them spill past the card so the agents look gathered around it.
   No z-index on the field itself, so each tier's own z-index competes directly with
   the board (z:3): forefront tier-1 (z:4) sits OVER the card, mid tier-2 (z:1) behind. */
.agent-field{position:absolute;inset:-46px -90px;pointer-events:none;}
.agent{
  position:absolute;left:var(--x);top:var(--y);
  animation:drift var(--dur,15s) ease-in-out infinite;animation-delay:var(--d);
}
.agent img{display:block;width:100%;height:100%;animation:sway var(--sdur,7s) ease-in-out infinite;animation-delay:var(--d);}
/* forefront: popular tools, large + bright, above the card (reading it) */
.tier-1{width:60px;height:60px;transform:translate(-50%,-50%);z-index:4;}
.tier-1 img{filter:drop-shadow(0 6px 16px rgba(0,0,0,.6));}
/* mid: dimmer, further out, behind the card → the set reads as opening outward */
.tier-2{width:44px;height:44px;transform:translate(-50%,-50%);z-index:1;opacity:.55;--dur:19s;--sdur:9s;}
.tier-2 img{filter:drop-shadow(0 6px 14px rgba(0,0,0,.5));}
/* per-logo variety so they don't drift in lockstep */
.ag-claude{--dur:13s;}.ag-cursor{--dur:16s;}.ag-copilot{--dur:14.5s;}.ag-openai{--dur:17s;}

.board{
  position:relative;z-index:3;
  border:1px solid var(--border);border-radius:var(--radius);
  background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.015));
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  padding:28px 32px 6px;
  box-shadow:0 24px 70px rgba(0,0,0,.4);
  overflow:hidden;
}
/* header: title + a small "live artifact" chip, on one row */
.board-head{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding-bottom:15px;margin-bottom:6px;border-bottom:1px solid var(--border-soft);
}
.board-title{
  font-family:var(--font-display) !important;font-weight:700;font-size:20px;color:var(--white);line-height:1.2;
}
.board-chip{
  flex:none;display:inline-flex;align-items:center;gap:6px;
  font-family:var(--font-mono) !important;font-size:10px;font-weight:600;letter-spacing:.11em;text-transform:uppercase;
  color:rgba(143,217,182,.9);
  padding:5px 10px;border-radius:999px;
  background:rgba(143,217,182,.07);border:1px solid rgba(143,217,182,.22);
}
.chip-dot{width:6px;height:6px;border-radius:50%;background:var(--mint);box-shadow:0 0 8px rgba(143,217,182,.7);animation:chippulse 2.4s ease-in-out infinite;}
@keyframes chippulse{0%,100%{opacity:1;}50%{opacity:.4;}}
/* the scroll body fades to nothing at the bottom → the list reads as never-ending */
.board-scroll{
  position:relative;padding-bottom:44px;
  -webkit-mask-image:linear-gradient(180deg,#000 0,#000 56%,rgba(0,0,0,.35) 82%,transparent 100%);
          mask-image:linear-gradient(180deg,#000 0,#000 56%,rgba(0,0,0,.35) 82%,transparent 100%);
}
.board ul{list-style:none;margin:0;padding:0;columns:1;}
.board li{
  display:flex;gap:13px;align-items:center;
  padding:12px 12px 12px 10px;margin:0 -6px;border-radius:10px;font-size:15px;color:var(--white-80);
  border-bottom:1px solid rgba(255,255,255,.045);
  opacity:0;transform:translateX(-8px);transition:opacity .5s ease,transform .5s ease,background .2s ease;
}
.board li:last-child{border-bottom:0;}
.board li:hover{background:rgba(255,255,255,.028);}
.ck-label{line-height:1.35;}
/* the checkbox affordance — a rounded, mint-tinted checked box */
.ck{
  flex:none;width:22px;height:22px;border-radius:7px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(143,217,182,.12);
  border:1px solid rgba(143,217,182,.34);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08), 0 1px 3px rgba(0,0,0,.25);
}
.ck .tick{display:block;}
.ck .tick path{stroke-dasharray:20;stroke-dashoffset:20;transition:stroke-dashoffset .45s ease;}
.board.play li:nth-child(1) .tick path{transition-delay:.15s;}
.board.play li:nth-child(2) .tick path{transition-delay:.25s;}
.board.play li:nth-child(3) .tick path{transition-delay:.35s;}
.board.play li:nth-child(4) .tick path{transition-delay:.45s;}
.board.play li:nth-child(5) .tick path{transition-delay:.55s;}
.board.play li:nth-child(6) .tick path{transition-delay:.65s;}
.board.play li:nth-child(7) .tick path{transition-delay:.75s;}
.board.play li{opacity:1;transform:none;}
.board.play li:nth-child(1){transition-delay:.05s;}
.board.play li:nth-child(2){transition-delay:.15s;}
.board.play li:nth-child(3){transition-delay:.25s;}
.board.play li:nth-child(4){transition-delay:.35s;}
.board.play li:nth-child(5){transition-delay:.45s;}
.board.play li:nth-child(6){transition-delay:.55s;}
.board.play li:nth-child(7){transition-delay:.65s;}
.board.play .tick path{stroke-dashoffset:0;}
/* belt-and-suspenders: a same-color overlay hides the hard card edge if mask misbehaves */
.board::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:88px;
  border-radius:0 0 var(--radius) var(--radius);
  background:linear-gradient(180deg,transparent,var(--surface) 90%);
  pointer-events:none;z-index:5;
}
@keyframes drift{
  0%,100%{transform:translate(-50%,-50%) translate(0,0);}
  20%{transform:translate(-50%,-50%) translate(13px,-16px);}
  45%{transform:translate(-50%,-50%) translate(-11px,12px);}
  70%{transform:translate(-50%,-50%) translate(-16px,-9px);}
  85%{transform:translate(-50%,-50%) translate(9px,10px);}
}
/* inner sway: gentle rotate + scale so the marks feel alive, not sliding rigidly */
@keyframes sway{
  0%,100%{transform:rotate(-3deg) scale(1);}
  50%{transform:rotate(3deg) scale(1.05);}
}
.link-out{display:inline-flex;align-items:center;gap:7px;font-weight:600;font-size:15.5px;}
.link-out:hover{gap:10px;}
.link-out{transition:gap .18s ease;}

/* ============ 2.5 · THE PROBLEM ============ */
/* No border-top: .logos above carries a border-bottom and .marquee below a border-top,
   so this section is already divided on both sides. */
.problem-head{max-width:780px;margin:0 auto;text-align:center;}
.problem-head .h2{margin-bottom:14px;}

/* One shared "guessing loop" — a 3-step cycle (prompt → generate → fails → back to prompt)
   around an "in progress" core whose token counter only ever climbs. The arrow returning to
   "prompt" IS the re-prompt, so there's no separate node for it. Both symptoms (Column A's
   retry loop, Column B's wrong tool call) read off this one image; nobody parses code. Coral is
   the only accent (failure + cost); NO blue here (reserved for the solution beats). Base CSS is
   the static / reduced-motion end-state; motion (incl. the JS token counter) layers on top. */
.problem-cols{display:grid;grid-template-columns:1fr 1fr;gap:24px 44px;max-width:800px;margin:36px auto 0;}
.problem-col{display:flex;flex-direction:column;}
.problem-col-t{position:relative;font-family:var(--font-display) !important;font-size:16px;font-weight:700;color:var(--white);margin:0;padding-left:17px;letter-spacing:-.01em;}
.problem-col-t::before{content:"";position:absolute;left:0;top:.5em;width:6px;height:6px;border-radius:50%;background:var(--coral);box-shadow:0 0 8px rgba(217,119,87,.6);}
.problem-col p{font-size:14.5px;line-height:1.7;color:var(--body);margin:10px 0 0;padding-left:17px;}

/* --- the loop composition (SVG ring behind, 3 HTML stations spaced 120° apart) --- */
.gloop{position:relative;width:min(400px,86vw);aspect-ratio:1;margin:44px auto 6px;
   background:radial-gradient(circle at 50% 50%,rgba(217,119,87,.055),transparent 60%);}
.gloop-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;}
/* arcs stop ~32° short of each node, so lines and arrowheads never touch a station */
.gloop-arc{fill:none;stroke:rgba(255,255,255,.2);stroke-width:2;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:0;}
.gloop-arc.warn{stroke:rgba(217,119,87,.62);}
.gloop-pulse{fill:none;stroke:rgba(233,150,120,.95);stroke-width:2.5;stroke-linecap:round;stroke-dasharray:26 627;stroke-dashoffset:0;opacity:0;filter:drop-shadow(0 0 5px rgba(217,119,87,.55));}
.gloop-node{position:absolute;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:7px;text-align:center;z-index:1;}
.gloop-node.n-prompt{left:50%;top:15.33%;}
.gloop-node.n-generate{left:80.02%;top:67.33%;}
.gloop-node.n-fails{left:16%;top:66.5%;gap:5px;}
.gloop-cap{font-family:var(--font-mono) !important;font-size:9.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--white-35);white-space:nowrap;}
.gloop-tile{display:flex;align-items:center;justify-content:center;gap:7px;min-width:44px;min-height:44px;padding:9px 11px;border-radius:12px;
   background:radial-gradient(120% 90% at 50% -20%,rgba(255,255,255,.05),transparent 60%),var(--surface);
   box-shadow:inset 0 1px 0 rgba(255,255,255,.09),inset 0 0 0 1px rgba(255,255,255,.08);}
.gloop-logo{width:26px;height:26px;flex:none;border-radius:7px;background:var(--surface-2);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);display:flex;align-items:center;justify-content:center;}
.gloop-logo img{width:16px;height:16px;object-fit:contain;}
.gloop-code{display:flex;flex-direction:column;gap:4px;width:28px;}
.gloop-code i{display:block;height:3px;border-radius:2px;background:rgba(255,255,255,.24);}
.gloop-code i:nth-child(2){width:64%;}
.gloop-code i:nth-child(3){width:84%;}
/* two failure pills, each self-labelled with the ✗ icon (no separate "fails" pill) */
.gloop-fail{display:inline-flex;align-items:center;gap:6px;padding:6px 11px;border-radius:9px;
   font-family:var(--font-mono) !important;font-size:10.5px;font-weight:700;color:rgba(233,150,120,.98);
   border:1px solid rgba(217,119,87,.5);background:linear-gradient(0deg,rgba(217,119,87,.1),rgba(217,119,87,.1)),var(--bg);white-space:nowrap;}
.gloop-fail svg{width:11px;height:11px;flex:none;}
/* the arrow home to "prompt" is the re-prompt; a small label names it, just outside the ring */
.gloop-reprompt{position:absolute;left:11.5%;top:30%;transform:translate(-50%,-50%);display:flex;align-items:center;gap:5px;z-index:1;
   font-family:var(--font-mono) !important;font-size:9px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--white-35);white-space:nowrap;}
.gloop-reprompt svg{width:12px;height:12px;flex:none;}
/* core: in-progress + a token counter that only climbs (JS drives the number; never resets) */
.gloop-core{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);min-width:148px;z-index:1;
   display:flex;flex-direction:column;align-items:center;gap:8px;padding:13px 15px;border-radius:14px;
   background:radial-gradient(110% 90% at 50% 0%,rgba(255,255,255,.04),transparent 62%),var(--surface-2);
   box-shadow:inset 0 1px 0 rgba(255,255,255,.07),inset 0 0 0 1px rgba(255,255,255,.07),0 14px 36px rgba(0,0,0,.42);}
.gloop-status{display:flex;align-items:center;gap:8px;font-family:var(--font-display) !important;font-weight:700;font-size:13px;color:var(--white-80);}
.gloop-spin{width:13px;height:13px;flex:none;border-radius:50%;border:2px solid rgba(255,255,255,.15);border-top-color:rgba(233,150,120,.95);}
.gloop-cost{display:flex;flex-direction:column;align-items:center;gap:2px;}
.gloop-cost-lab{font-family:var(--font-mono) !important;font-size:8px;letter-spacing:.14em;text-transform:uppercase;color:var(--white-35);}
.gloop-cost-row{display:flex;align-items:center;gap:6px;}
.gloop-cost-n{font-family:var(--font-mono) !important;font-size:16px;font-weight:700;color:rgba(233,150,120,.98);font-variant-numeric:tabular-nums;letter-spacing:.01em;}
.gloop-cost-up{width:11px;height:11px;flex:none;color:rgba(233,150,120,.92);}

@media (prefers-reduced-motion:no-preference){
  .gloop.play .gloop-arc{animation:glDraw .55s ease backwards;}
  .gloop.play .gloop-arc.a2{animation-delay:.14s;}
  .gloop.play .gloop-arc.a3{animation-delay:.28s;}
  .gloop.play .gloop-pulse{opacity:1;animation:glPulse 3.6s linear .5s infinite;}
  .gloop.play .gloop-fail{animation:glBlink 2.8s ease-in-out infinite;}
  .gloop.play .gloop-fail:last-child{animation-delay:.7s;}
  .gloop.play .gloop-spin{animation:glSpin 1.05s linear infinite;}
  .gloop.play .gloop-cost-up{animation:glUp 1.6s ease-in-out infinite;}
}
@keyframes glDraw{from{stroke-dashoffset:1;}to{stroke-dashoffset:0;}}
@keyframes glPulse{to{stroke-dashoffset:-653.45;}}
/* blink as a coral glow + border brighten, NOT whole-pill opacity, so the pills stay opaque
   and keep occluding the pulse (opacity fade would re-expose the pulse behind them each cycle) */
@keyframes glBlink{0%,100%{box-shadow:0 0 0 0 rgba(217,119,87,0);border-color:rgba(217,119,87,.45);}50%{box-shadow:0 0 11px 1px rgba(217,119,87,.4);border-color:rgba(217,119,87,.9);}}
@keyframes glSpin{to{transform:rotate(360deg);}}
@keyframes glUp{0%,100%{transform:translateY(1px);opacity:.72;}50%{transform:translateY(-2px);opacity:1;}}
/* Below ~459px the loop box shrinks (min(400px,86vw)) but the core/pills/tiles are fixed px,
   so they'd collide. Scale the internals down for phones; node %s scale with the box already. */
@media (max-width:459px){
  .gloop-core{min-width:104px;padding:10px 11px;gap:6px;}
  .gloop-status{font-size:11.5px;gap:6px;}
  .gloop-spin{width:11px;height:11px;}
  .gloop-cost-lab{font-size:7px;}
  .gloop-cost-n{font-size:13px;}
  .gloop-cost-up{width:9px;height:9px;}
  .gloop-fail{font-size:9px;padding:4px 8px;gap:5px;border-radius:8px;}
  .gloop-fail svg{width:9px;height:9px;}
  .gloop-tile{min-width:36px;min-height:36px;padding:7px 8px;}
  .gloop-logo{width:20px;height:20px;}
  .gloop-logo img{width:13px;height:13px;}
  .gloop-code{width:22px;}
  .gloop-cap{font-size:8.5px;}
  .gloop-reprompt{font-size:8px;}
}
.problem-bridge{max-width:54ch;margin:42px auto 0;text-align:center;font-size:18px;line-height:1.6;color:var(--white-80);}
@media (max-width:640px){.problem-cols{grid-template-columns:1fr;}}

/* ============ 3.6 · DETERMINISTIC, NOT PROBABILISTIC ============ */
.detprob{border-top:1px solid var(--border-soft);}
.detprob-head{max-width:780px;margin:0 auto;text-align:center;}
.detprob-head .h2{margin-bottom:14px;}
.detprob-body{font-size:18px;line-height:1.7;color:var(--body);max-width:64ch;margin:0 auto;}
/* Ghosts collapse to one. Probabilistic: the output card as five overlapping, offset,
   semi-transparent copies — a smear of divergent possibilities, none aligned. Deterministic:
   those ghosts collapse behind ONE crisp, solid, blue result with a check. Same output motif
   both sides so it reads as the SAME output, uncertain vs certain. Blue only on the det side. */
.dp{display:flex;align-items:stretch;max-width:820px;margin:52px auto 0;overflow:hidden;
   border:1px solid rgba(255,255,255,.08);border-radius:var(--radius-lg);
   background:linear-gradient(180deg,#0a0e1a,#070a13);box-shadow:0 40px 100px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.06);}
.dp-panel{position:relative;flex:1;display:flex;flex-direction:column;align-items:center;gap:16px;padding:34px 26px 30px;}
.dp-det{background:radial-gradient(92% 74% at 50% 44%,rgba(12,127,242,.08),transparent 66%);}
.dp-label{display:inline-flex;align-items:center;gap:7px;font-family:var(--font-mono) !important;font-size:10px;letter-spacing:.15em;text-transform:uppercase;color:var(--white-35);}
.dp-label::before{content:"";width:5px;height:5px;border-radius:50%;background:currentColor;opacity:.7;}
.dp-det .dp-label{color:var(--blue);}
.dp-spec{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-mono) !important;font-size:11px;color:var(--white);
   padding:6px 13px;border-radius:var(--radius-sm);background:var(--surface);box-shadow:inset 0 0 0 1px rgba(255,255,255,.10);}
.dp-spec img{width:15px;height:15px;flex:none;}
/* small "flows into" cue from the API spec chip toward the output stack */
.dp-flow{display:flex;justify-content:center;color:rgba(255,255,255,.4);margin:-7px 0 -8px;}
.dp-flow svg{width:12px;height:15px;display:block;}
/* stage holds the stacked output-card copies (absolute, inset:0) */
.dp-stage{position:relative;width:174px;height:104px;margin:6px auto 2px;}
.ocard{position:absolute;inset:0;display:flex;flex-direction:column;gap:6px;justify-content:center;
   padding:14px 15px;border-radius:10px;background:var(--surface-2);box-shadow:inset 0 0 0 1px rgba(255,255,255,.09);}
.ocard .oline{height:5px;border-radius:2px;background:rgba(255,255,255,.2);}
.ocard .oline-k{background:rgba(255,255,255,.34);}
/* probabilistic: five offset, rotated, divergent cards, none aligned. Kept clearly legible —
   stronger outline + a drop shadow to separate the overlaps, and a higher opacity floor — so the
   "many different answers" reads at a glance instead of fading into the background. */
.dp-prob .ocard{box-shadow:inset 0 0 0 1px rgba(255,255,255,.24),0 2px 10px rgba(0,0,0,.4);}
.dp-prob .ocard .oline{background:rgba(255,255,255,.3);}
.dp-prob .ocard .oline-k{background:rgba(255,255,255,.5);}
.dp-prob .g1{transform:translate(-15px,-10px) rotate(-5deg);opacity:.55;}
.dp-prob .g2{transform:translate(12px,-6px) rotate(4.5deg);opacity:.67;}
.dp-prob .g3{transform:translate(-9px,8px) rotate(-3deg);opacity:.78;}
.dp-prob .g4{transform:translate(10px,9px) rotate(3.5deg);opacity:.89;}
.dp-prob .g5{transform:translate(2px,-2px) rotate(-1deg);opacity:1;}
/* deterministic: faint ghosts peek behind ONE crisp blue card */
.dp-det .g1{opacity:.1;transform:translate(-4px,-3px) rotate(-1.5deg);}
.dp-det .g2{opacity:.12;transform:translate(4px,-2px) rotate(1.5deg);}
.dp-det .g3{opacity:.14;transform:translate(-3px,3px) rotate(-.6deg);}
.dp-det .g4{opacity:.16;transform:translate(3px,3px) rotate(.8deg);}
.dp-det .g5{opacity:1;transform:none;background:linear-gradient(180deg,rgba(12,127,242,.13),rgba(12,127,242,.03));
   box-shadow:inset 0 0 0 1px rgba(12,127,242,.42),0 0 24px rgba(12,127,242,.14);}
.dp-det .g5 .oline{background:rgba(150,193,255,.5);}
.dp-det .g5 .oline-k{background:var(--blue);}
.dp-det-check{position:absolute;right:-8px;bottom:-8px;width:24px;height:24px;border-radius:50%;background:var(--blue);z-index:6;
   display:flex;align-items:center;justify-content:center;box-shadow:0 0 0 4px rgba(12,127,242,.16),0 4px 12px rgba(0,0,0,.4);}
.dp-det-check svg{width:12px;height:12px;stroke:#fff;}
.dp-div{flex:0 0 1px;background:rgba(255,255,255,.08);}
.dp-cap{margin-top:auto;font-size:12.5px;line-height:1.45;color:var(--white-35);text-align:center;max-width:24ch;}
@media (prefers-reduced-motion:no-preference){
  .dp-prob .g1{animation:ghostA 5s ease-in-out infinite;}
  .dp-prob .g3{animation:ghostB 5.6s ease-in-out infinite;}
  .dp-prob .g4{animation:ghostA 6.2s ease-in-out infinite reverse;}
}
@keyframes ghostA{0%,100%{transform:translate(-15px,-10px) rotate(-5deg);}50%{transform:translate(-19px,-5px) rotate(-8deg);}}
@keyframes ghostB{0%,100%{transform:translate(-9px,8px) rotate(-3deg);}50%{transform:translate(-4px,12px) rotate(1deg);}}
@media (max-width:600px){.dp{flex-direction:column;}.dp-div{flex:0 0 1px;height:1px;width:100%;}}

/* ============ 4 · PLATFORM REVEAL ============ */
.platform{border-top:1px solid var(--border-soft);}
.platform-head{text-align:center;max-width:760px;margin:0 auto 10px;}
.platform-head .h2{margin-bottom:14px;}
/* .sub inherits the 18px token (was 16.5px; standardized) */

/* Bento — hierarchy: CP + MCP marquee (lg), supports (sm). Hover = diorama plays + cursor glow */
.bento{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;margin-top:48px;}
.tile{
  position:relative;display:flex;flex-direction:column;
  border-radius:var(--radius-lg);border:0;overflow:hidden;
  background:
    radial-gradient(130% 90% at 50% -25%, rgba(255,255,255,.045), transparent 58%),
    var(--surface);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10), inset 0 0 0 1px rgba(255,255,255,.065);
  transition:box-shadow .25s ease, transform .25s ease;
}
.tile:hover{
  transform:translateY(-2px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16), inset 0 0 0 1px rgba(255,255,255,.13), 0 18px 48px rgba(0,0,0,.4);
}
.tile-agent{
  background:
    radial-gradient(130% 90% at 50% -25%, rgba(255,255,255,.075), transparent 58%),
    var(--surface);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.20), inset 0 0 0 1px rgba(255,255,255,.12);
}
.tile-agent:hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.28), inset 0 0 0 1px rgba(255,255,255,.2), 0 18px 48px rgba(0,0,0,.4);}

/* Cursor-tracked glow overlay (bento only; JS sets --mx/--my; pointer:fine).
   Sits ABOVE all card layers (z:6) so no internal boundary can clip it. */
.tile-glow{
  position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:6;
  opacity:0;transition:opacity .35s ease;
  background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%), rgba(255,255,255,.075), transparent 70%);
}
.tile:hover .tile-glow{opacity:1;}
@media (pointer:coarse){.tile-glow{display:none;}}

.tile-visual{
  position:relative;flex:auto;min-height:150px;
  display:flex;align-items:center;justify-content:center;
  pointer-events:none;user-select:none;z-index:2;
}
.tile-lg .tile-visual{min-height:280px;}
.tile-text{position:relative;z-index:3;padding:0 24px 22px;display:flex;flex-direction:column;gap:7px;}
.tile-lg .tile-text{padding:0 28px 26px;}
.tile-tag{
  display:flex;align-items:center;gap:7px;
  font-family:var(--font-mono) !important;font-size:9.5px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;
  color:rgba(255,255,255,.6);transition:color .25s ease;
}
.tile-tag::before{content:"";width:5px;height:5px;border-radius:50%;background:rgba(255,255,255,.75);box-shadow:0 0 7px rgba(255,255,255,.55);transition:background .25s ease, box-shadow .25s ease;}
.tile-tag.mixed{color:var(--white-35);}
.tile-tag.mixed::before{background:rgba(255,255,255,.3);box-shadow:none;}
.tile-name{font-family:var(--font-display) !important;font-weight:700;font-size:16.5px;color:var(--white) !important;}
.tile-lg .tile-name{font-size:19px;}
.tile-line{font-size:13.5px;color:var(--body) !important;line-height:1.55;max-width:46ch;}
.tile-lg .tile-line{font-size:14.5px;}
.tile-arrow{
  position:absolute;top:20px;right:20px;z-index:3;color:var(--white-35);
  opacity:0;transform:translateX(-5px);transition:opacity .18s ease, transform .18s ease;
}
.tile:hover .tile-arrow{opacity:1;transform:none;color:rgba(255,255,255,.85);}
.t-span2{grid-column:span 2;}
.t-span3{grid-column:span 3;}

/* Dioramas — §4 palette: neutral grey-glass (the §3 board family); no blue tint */
.dio-chip{
  display:inline-flex;align-items:center;gap:8px;
  border:1px solid rgba(255,255,255,.32);border-radius:10px;background:rgba(255,255,255,.055);
  padding:9px 15px;font-family:var(--font-mono) !important;font-size:11.5px;color:var(--white);
  box-shadow:0 0 18px rgba(255,255,255,.07);
  transition:box-shadow .3s ease, border-color .3s ease, background .3s ease;
}
.dio-chip .sdot{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.85);box-shadow:0 0 8px rgba(255,255,255,.6);transition:background .3s ease, box-shadow .3s ease;}
.tile:hover .dio-chip{box-shadow:0 0 28px rgba(12,127,242,.4);border-color:rgba(12,127,242,.85);background:rgba(12,127,242,.12);}
.tile:hover .dio-chip .sdot{background:var(--blue);box-shadow:0 0 8px rgba(12,127,242,.9);}

/* Context Plugins marquee diorama */
.dio-cp{display:flex;align-items:center;gap:22px;}
.dio-cp svg.cp-fan{overflow:visible;}
.cp-line{stroke-dasharray:5 6;color:rgba(255,255,255,.4);transition:color .3s ease;}
.tile:hover .cp-line{animation:cpflow 1s linear infinite;color:rgba(12,127,242,.95);}
@keyframes cpflow{to{stroke-dashoffset:-22;}}
.dio-tools{display:flex;flex-direction:column;gap:12px;}
.dio-tool{
  display:flex;align-items:center;justify-content:center;
  width:46px;height:46px;border-radius:12px;background:var(--surface-2);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.10);position:relative;
  transition:box-shadow .25s ease, transform .25s ease;
}
.tile:hover .dio-tool{box-shadow:inset 0 0 0 1px rgba(255,255,255,.2);}
.dio-tool .ok{
  position:absolute;right:-6px;top:-6px;width:16px;height:16px;border-radius:50%;
  background:#2a2f42;box-shadow:inset 0 0 0 1px rgba(255,255,255,.35), 0 0 10px rgba(255,255,255,.15);
  display:flex;align-items:center;justify-content:center;
}
.tile:hover .dio-tool .ok{animation:okpop .45s cubic-bezier(.34,1.56,.64,1) both;}
.tile:hover .dio-tool:nth-child(1) .ok{animation-delay:.1s;}
.tile:hover .dio-tool:nth-child(2) .ok{animation-delay:.28s;}
.tile:hover .dio-tool:nth-child(3) .ok{animation-delay:.46s;}
@keyframes okpop{0%{transform:scale(.3);}60%{transform:scale(1.25);}100%{transform:scale(1);}}

/* MCP marquee diorama */
.dio-mcp{display:flex;flex-direction:column;align-items:center;gap:16px;}
.dio-srv{width:280px;border-radius:14px;background:var(--surface-2);box-shadow:inset 0 0 0 1px rgba(255,255,255,.09);padding:14px 18px;position:relative;}
.dio-srv-row{display:flex;align-items:center;gap:10px;padding:8px 0;transition:background .25s ease;}
.dio-srv-row + .dio-srv-row{border-top:1px solid rgba(255,255,255,.05);}
.tile:hover .dio-srv-row{animation:rowlight 1.8s ease infinite;}
.tile:hover .dio-srv-row:nth-child(2){animation-delay:0s;}
.tile:hover .dio-srv-row:nth-child(3){animation-delay:.3s;}
.tile:hover .dio-srv-row:nth-child(4){animation-delay:.6s;}
@keyframes rowlight{0%,100%{background:transparent;}18%{background:rgba(12,127,242,.08);}}
.dio-dot{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.55);flex:none;box-shadow:0 0 6px rgba(255,255,255,.3);}
.dio-dot.b{background:rgba(255,255,255,.75);box-shadow:0 0 6px rgba(255,255,255,.4);transition:background .3s ease, box-shadow .3s ease;}
.tile:hover .dio-dot.b{background:var(--blue);box-shadow:0 0 7px rgba(12,127,242,.8);}
.dio-bar{height:6px;border-radius:3px;background:rgba(255,255,255,.12);}
.dio-bar.dim{background:rgba(255,255,255,.06);}
.dio-lock{
  position:absolute;top:-10px;right:-10px;width:26px;height:26px;border-radius:9px;
  background:#151929;box-shadow:inset 0 0 0 1px rgba(255,255,255,.30);
  display:flex;align-items:center;justify-content:center;
  transition:box-shadow .3s ease;
}
.tile:hover .dio-lock{box-shadow:inset 0 0 0 1px rgba(255,255,255,.55), 0 0 14px rgba(255,255,255,.18);}
.mcp-wire{position:relative;width:200px;height:2px;border-radius:1px;background:rgba(255,255,255,.07);overflow:visible;}
.mcp-pulse{
  position:absolute;top:-2.5px;left:0;width:7px;height:7px;border-radius:50%;
  background:var(--blue);box-shadow:0 0 10px rgba(12,127,242,.9);opacity:0;
}
.tile:hover .mcp-pulse{animation:pulseTravel 1.5s ease-in-out infinite;}
@keyframes pulseTravel{0%{left:0;opacity:0;}12%{opacity:1;}88%{opacity:1;}100%{left:calc(100% - 7px);opacity:0;}}

/* CLI diorama */
.dio-term{width:250px;border-radius:12px;background:#070a13;box-shadow:inset 0 0 0 1px rgba(255,255,255,.09);overflow:hidden;}
.dio-term-bar{display:flex;gap:5px;padding:9px 12px;border-bottom:1px solid rgba(255,255,255,.06);}
.dio-term-bar span{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.14);}
.dio-term-body{padding:13px 14px 16px;font-family:var(--font-mono) !important;font-size:12px;color:rgba(255,255,255,.75);}
.dio-term-body .prompt{color:rgba(255,255,255,.85);font-weight:600;transition:color .3s ease;}
.tile:hover .dio-term-body .prompt{color:var(--blue-alt);}
.dio-caret{display:inline-block;width:7px;height:13px;background:rgba(255,255,255,.8);vertical-align:-2px;margin-left:7px;transition:background .3s ease;}
.tile:hover .dio-caret{background:var(--blue-alt);animation:blink 1.1s steps(1) infinite;}
@keyframes blink{50%{opacity:0;}}
.dio-term-body .dio-bar{margin-top:10px;width:70%;}
.dio-term-body .dio-bar.dim{width:45%;}
.tile:hover .dio-term-body .dio-bar{animation:typebar .5s ease .15s both;}
.tile:hover .dio-term-body .dio-bar.dim{animation:typebar .5s ease .45s both;}
@keyframes typebar{from{width:0;opacity:0;}to{opacity:1;}}

/* Portal diorama */
.dio-browser{width:280px;border-radius:12px;background:var(--surface-2);box-shadow:inset 0 0 0 1px rgba(255,255,255,.09);overflow:hidden;}
.dio-browser-bar{display:flex;align-items:center;gap:6px;padding:8px 12px;border-bottom:1px solid rgba(255,255,255,.06);}
.dio-browser-bar .dio-url{flex:1;height:12px;border-radius:6px;background:rgba(255,255,255,.06);margin-left:6px;}
.dio-browser-bar span{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.14);}
.dio-browser-body{display:grid;grid-template-columns:76px 1fr;gap:0;min-height:96px;}
.dio-side{border-right:1px solid rgba(255,255,255,.06);padding:11px 10px;display:flex;flex-direction:column;gap:8px;}
.tile:hover .dio-side .dio-bar{animation:sidelight 1.6s ease infinite;}
.tile:hover .dio-side .dio-bar:nth-child(2){animation-delay:.25s;}
.tile:hover .dio-side .dio-bar:nth-child(3){animation-delay:.5s;}
.tile:hover .dio-side .dio-bar:nth-child(4){animation-delay:.75s;}
@keyframes sidelight{0%,100%{background:rgba(255,255,255,.06);}20%{background:rgba(12,127,242,.45);}}
.dio-main{padding:11px 14px;display:flex;flex-direction:column;gap:8px;align-items:flex-start;}
.dio-try{
  font-family:var(--font-mono) !important;font-size:9px;letter-spacing:.06em;color:var(--white);
  background:rgba(255,255,255,.13);box-shadow:inset 0 0 0 1px rgba(255,255,255,.35);
  border-radius:6px;padding:4px 9px;margin-top:3px;
  transition:background .3s ease, box-shadow .3s ease;
}
.tile:hover .dio-try{background:var(--blue);box-shadow:none;animation:trypulse .6s ease .3s 1;}
@keyframes trypulse{0%,100%{transform:scale(1);}50%{transform:scale(1.12);box-shadow:0 0 14px rgba(12,127,242,.6);}}

/* SDK diorama */
.dio-langs{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;max-width:280px;}
.dio-lang{
  font-family:var(--font-mono) !important;font-size:11px;font-weight:500;color:var(--white-80);
  background:var(--surface-2);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);
  border-radius:8px;padding:7px 13px;
}
.tile:hover .dio-lang{animation:chipwave .8s ease both;}
.tile:hover .dio-lang:nth-child(1){animation-delay:0s;}
.tile:hover .dio-lang:nth-child(2){animation-delay:.06s;}
.tile:hover .dio-lang:nth-child(3){animation-delay:.12s;}
.tile:hover .dio-lang:nth-child(4){animation-delay:.18s;}
.tile:hover .dio-lang:nth-child(5){animation-delay:.24s;}
.tile:hover .dio-lang:nth-child(6){animation-delay:.3s;}
.tile:hover .dio-lang:nth-child(7){animation-delay:.36s;}
@keyframes chipwave{0%,100%{transform:translateY(0);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);}40%{transform:translateY(-6px);box-shadow:inset 0 0 0 1px rgba(12,127,242,.6), 0 6px 16px rgba(0,0,0,.35);}}

/* ============ 4.5 · THE PROVEN ENGINE (tabbed SDKs | Developer Portal; reuses §6 spotlight-tab grammar with own classes) ============ */
.engine{border-top:1px solid var(--border-soft);}
.engine-head{text-align:center;max-width:820px;margin:0 auto 40px;}
.engine-head .h2{margin-bottom:14px;}
/* .sub inherits the 18px token (was 16.5px; standardized) */
/* Text-label tabs — inherit the .spot-tab box, restyled from logo-chip to display text */
.eng-tabs{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;margin-bottom:28px;}
.eng-tab{
  display:inline-flex;align-items:center;justify-content:center;
  padding:13px 24px;border-radius:12px;
  background:var(--surface);border:1px solid var(--border);
  font-family:var(--font-display) !important;font-weight:700;font-size:14.5px;color:var(--white-80) !important;
  transition:border-color .2s ease, background .2s ease, box-shadow .2s ease, color .2s ease;
}
.eng-tab span{font-family:var(--font-display) !important;color:inherit !important;}
.eng-tab:hover{border-color:rgba(255,255,255,.28);color:var(--white) !important;}
.eng-tab.active{background:rgba(12,127,242,.15);border-color:rgba(12,127,242,.55);box-shadow:0 0 20px rgba(12,127,242,.16);color:var(--white) !important;}
/* Card + panel — copies .spot-card; qfade reused */
.eng-card{
  max-width:980px;margin:0 auto;
  border:1px solid var(--border);border-radius:var(--radius-lg);
  background:linear-gradient(180deg,rgba(255,255,255,.028),rgba(255,255,255,.006)), var(--surface-2);
  padding:clamp(24px,3.2vw,40px);
}
.eng-panel{display:none;}
.eng-panel.active{display:block;animation:qfade .4s ease;}

/* Shared layout: left feature rail + right content (terminal or canvas) — Clerk grammar */
.eng-layout{display:grid;grid-template-columns:clamp(230px,26%,300px) 1fr;gap:clamp(28px,3.5vw,52px);align-items:start;}
/* SDK panel: FIX the layout height so the card is constant across features.
   Feature descriptions differ in length (54–122 chars → different wrapped heights),
   so left to itself the rail drives the card height and it grows/shrinks per feature.
   The height (600px) is sized to contain the tallest rail state; the rail sits
   top-aligned at its natural height (never overflows). The terminal is a fixed
   height CENTERED in the cell, so it has equal padding above and below inside the
   card; code that exceeds it scrolls inside .eng-term-body. */
.eng-panel[data-engpanel="sdks"] .eng-layout{
  height:600px;align-items:center;
}
.eng-panel[data-engpanel="sdks"] .pf-rail{align-self:start;}
.eng-panel[data-engpanel="sdks"] .eng-term{height:540px;}

/* Feature rail (Clerk "pixel-perfect UIs" accordion, recolored to the dark system) */
/* Feature rail — native site typography (display font, sentence case, like the .tile-name card titles),
   NOT the code/data-label mono register. */
.pf-rail{display:flex;flex-direction:column;}
.pf-item{
  display:flex;gap:13px;text-align:left;width:100%;
  padding:17px 0 16px;border-top:1px solid var(--border-soft);
  transition:opacity .2s ease;
}
.pf-rail .pf-item:first-child{border-top:0;}
.pf-bullet{
  flex:none;margin-top:7px;width:9px;height:9px;border-radius:50%;
  box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.28);
  transition:box-shadow .25s ease, background .25s ease;
}
.pf-item.active .pf-bullet{background:var(--blue);box-shadow:0 0 10px rgba(12,127,242,.7);}
.pf-body{display:flex;flex-direction:column;min-width:0;}
.pf-title{
  font-family:var(--font-display) !important;font-size:16px;font-weight:700;letter-spacing:-.01em;
  color:var(--white-35) !important;line-height:1.35;transition:color .2s ease;
}
.pf-item:hover .pf-title{color:var(--white-80) !important;}
.pf-item.active .pf-title{color:var(--white) !important;}
/* Collapsible description — grid-rows 0fr→1fr expand, only the active item's shows */
.pf-desc{display:grid;grid-template-rows:0fr;opacity:0;transition:grid-template-rows .25s ease, opacity .25s ease;}
.pf-item.active .pf-desc{grid-template-rows:1fr;opacity:1;margin-top:8px;}
.pf-desc-inner{overflow:hidden;min-height:0;font-family:var(--font-body) !important;font-size:13.5px;line-height:1.55;color:var(--body);letter-spacing:normal;text-transform:none;}
.pf-rail .eng-link{margin-top:22px;padding-top:20px;border-top:1px solid var(--border-soft);}
.eng-link{font-family:var(--font-body) !important;font-size:14px;font-weight:600;color:var(--blue-alt) !important;display:inline-flex;align-items:center;gap:6px;}
.eng-link:hover{gap:9px;transition:gap .18s ease;}

/* SDK code terminal — window chrome + language tabs + line-numbered code.
   Height is set by the SDK-panel rule above (540px, centered in the 600px cell);
   taller code samples (15–33 lines) scroll inside .eng-term-body, not stretch it.
   height:100% here is the base/fallback (portal panel etc.). */
.eng-term{
  display:flex;flex-direction:column;height:100%;
  border-radius:14px;overflow:hidden;background:#070a13;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.09), 0 18px 44px rgba(0,0,0,.4);
  min-width:0;
}
.eng-term-bar{flex:none;display:flex;align-items:center;gap:8px;padding:0 14px;height:46px;border-bottom:1px solid rgba(255,255,255,.07);background:rgba(255,255,255,.02);}
.eng-dot{width:11px;height:11px;border-radius:50%;background:rgba(255,255,255,.14);flex:none;}
.eng-dot:nth-child(1){background:rgba(255,255,255,.18);}
.lang-tabs{display:flex;gap:3px;margin-left:14px;overflow-x:auto;scrollbar-width:none;}
.lang-tabs::-webkit-scrollbar{display:none;}
.lang-tab{
  flex:none;padding:6px 12px;border-radius:7px;
  font-family:var(--font-mono) !important;font-size:11.5px;color:var(--white-35) !important;
  transition:color .18s ease, background .18s ease;
}
.lang-tab span{font-family:var(--font-mono) !important;color:inherit !important;}
.lang-tab:hover{color:var(--white-80) !important;}
.lang-tab.active{background:rgba(12,127,242,.15);color:var(--white) !important;box-shadow:inset 0 0 0 1px rgba(12,127,242,.4);}
/* Body fills the terminal below the tab bar; the terminal stretches to the card height (equal top/bottom
   padding vs the card). Tall snippets scroll within it; dark-themed scrollbar. */
.eng-term-body{flex:1;position:relative;overflow:auto;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.16) transparent;}
.eng-term-body::-webkit-scrollbar{width:10px;height:10px;}
.eng-term-body::-webkit-scrollbar-track{background:transparent;}
.eng-term-body::-webkit-scrollbar-thumb{background:rgba(255,255,255,.14);border-radius:8px;border:2px solid #070a13;}
.eng-term-body::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.24);}
.lang-code{display:none;margin:0;padding:14px 22px;counter-reset:cl;}
.lang-code.active{display:block;animation:qfade .4s ease;}
.lang-code code{font-family:var(--font-mono) !important;font-size:12px;line-height:1.2;display:block;}
.lang-code .cl{display:block;white-space:pre;counter-increment:cl;padding-left:36px;position:relative;color:rgba(255,255,255,.85);}
.lang-code .cl::before{content:counter(cl);position:absolute;left:0;width:22px;text-align:right;color:var(--white-35);opacity:.45;font-variant-numeric:tabular-nums;}
/* Syntax highlighting tokens */
.lang-code .tk-c{color:#5b6a86;font-style:italic;}      /* comment */
.lang-code .tk-k{color:#4f8fff;}                          /* keyword */
.lang-code .tk-s{color:#4ec9a8;}                          /* string  */
.lang-code .tk-n{color:#d99a63;}                          /* number  */
.lang-code .tk-t{color:#57b6f5;}                          /* type    */
.lang-code .tk-f{color:#c9a6f2;}                          /* function*/

/* Portal canvas — Clerk "pixel-perfect UIs" 2D jigsaw: dense cyclical field, distance-faded, real apimatic mockups.
   The spotlit tile sits front-and-centre, flanked on ALL sides by fainter tiles fading into the distance (infinite feel). */
.eng-portal .jig-viewport{
  position:relative;overflow:hidden;border-radius:var(--radius-lg);min-width:0;
  height:clamp(560px,66vh,740px);
  background:radial-gradient(120% 90% at 50% 45%, rgba(255,255,255,.02), transparent 70%), var(--surface);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);
  /* strong vignette: only the centre reads fully; edges fade to nothing (the "distance") */
  -webkit-mask:radial-gradient(62% 66% at 50% 50%, #000 28%, transparent 85%);
  mask:radial-gradient(62% 66% at 50% 50%, #000 28%, transparent 85%);
}
.jig-track{
  position:absolute;top:50%;left:50%;display:flex;gap:20px;align-items:flex-start;
  transform:translate(-50%,-50%) translate(var(--jx,0px),var(--jy,0px));
  transition:transform 1.05s cubic-bezier(.4,.36,0,1);
  width:max-content;
}
/* Wide columns so the 585×370 mockups render LARGE and legible (+20% over the prior 360px):
   ~432px tiles → a landscape mockup is ~432×273, readable — not a cramped sliver.
   20px gaps ≈ Clerk's 16px-per-352px-tile ratio at our tile width. */
.jig-col{display:flex;flex-direction:column;gap:20px;width:432px;flex:none;}
.jig-col-down{padding-top:144px;}
.jig-col-up{padding-top:0;}
/* Clerk tile treatment: no border — just a soft two-layer drop shadow (their
   0 5px 15px / 0 15px 35px -5px pair, darkened for the dark background). */
.jig-tile{
  display:block;border-radius:13px;overflow:hidden;background:#f4f6fb;
  box-shadow:0 5px 15px rgba(0,0,0,.22), 0 15px 35px -5px rgba(0,0,0,.4);
  /* per-tile opacity/scale set by JS from distance to the spotlit tile; these are the fallbacks */
  opacity:var(--tile-o,.28);transform:scale(var(--tile-s,.9));
  transition:opacity .7s cubic-bezier(.4,.36,0,1), transform .7s cubic-bezier(.4,.36,0,1), box-shadow .7s ease;
  will-change:opacity,transform;
}
.jig-tile img{display:block;width:100% !important;height:auto !important;}
.jig-tile.spot{
  opacity:1 !important;transform:scale(1) !important;
  box-shadow:0 8px 20px rgba(0,0,0,.32), 0 26px 60px -8px rgba(0,0,0,.55);
}

/* ============ 5 · TRUST (same Clerk grammar as §4: inset rings, 8px gaps, dioramas) ============ */
.trust{border-top:1px solid var(--border-soft);}
.trust-head{max-width:720px;margin:0 auto 44px;text-align:center;}
.trust-head .h2{margin-bottom:12px;}
.trust-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;}
.trust-grid .tile{cursor:default;}
.trust-grid .tile:hover{transform:none;}
.trust-grid .tile-visual{min-height:126px;}
.trust-grid .tile-name{font-size:15.5px;}

/* Trust dioramas */
.dio-boundary{
  position:relative;display:flex;align-items:center;justify-content:center;
  width:196px;height:92px;border-radius:12px;border:1.5px dashed rgba(255,255,255,.3);
}
.dio-boundary .dio-node{
  display:flex;flex-direction:column;gap:7px;
  background:var(--surface-2);box-shadow:inset 0 0 0 1px rgba(255,255,255,.09);
  border-radius:10px;padding:12px 16px;
}
.dio-node-row{display:flex;align-items:center;gap:8px;}
.dio-checks{display:flex;flex-direction:column;gap:11px;width:200px;}
.dio-check-row{display:flex;align-items:center;gap:10px;}
.dio-bubbles{display:flex;flex-direction:column;gap:8px;width:196px;}
.dio-bubble{
  height:26px;border-radius:12px;width:72%;
  background:var(--surface-2);box-shadow:inset 0 0 0 1px rgba(255,255,255,.09);
  display:flex;align-items:center;padding:0 11px;gap:7px;
}
.dio-bubble.me{margin-left:auto;background:rgba(255,255,255,.11);box-shadow:inset 0 0 0 1px rgba(255,255,255,.3);}
.dio-avatar{width:16px;height:16px;border-radius:50%;background:rgba(255,255,255,.14);flex:none;}
.dio-sla{display:flex;align-items:center;gap:20px;}
.dio-sla-rows{display:flex;flex-direction:column;gap:10px;}
.dio-roadmap{display:flex;gap:8px;align-items:flex-start;}
.dio-roadcol{display:flex;flex-direction:column;gap:6px;}
.dio-roadcard{width:54px;height:16px;border-radius:5px;background:rgba(255,255,255,.07);box-shadow:inset 0 0 0 1px rgba(255,255,255,.07);}
.dio-roadcard.hot{background:rgba(255,255,255,.18);box-shadow:inset 0 0 0 1px rgba(255,255,255,.5);}

/* ============ 6 · TESTIMONIALS (spotlight — replicates the live apimatic.io section in the dark system) ============ */
.quotes-head{text-align:center;margin-bottom:36px;}
.spot-tabs{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;margin-bottom:28px;}
.spot-tab{
  display:inline-flex;align-items:center;justify-content:center;
  padding:13px 24px;border-radius:12px;
  background:var(--surface);border:1px solid var(--border);
  transition:border-color .2s ease, background .2s ease, box-shadow .2s ease;
}
.spot-tab img{height:20px !important;width:auto !important;filter:brightness(0) invert(1);opacity:.5;transition:opacity .2s ease;}
.spot-tab:hover img{opacity:.85;}
.spot-tab.active{background:rgba(12,127,242,.15);border-color:rgba(12,127,242,.55);box-shadow:0 0 20px rgba(12,127,242,.16);}
.spot-tab.active img{opacity:1;}
.spot-card{
  max-width:980px;margin:0 auto;
  border:1px solid var(--border);border-radius:var(--radius-lg);
  background:linear-gradient(180deg,rgba(255,255,255,.028),rgba(255,255,255,.006)), var(--surface-2);
  padding:54px clamp(28px,5.5vw,76px) 46px;
}
.spot-quote{
  font-family:var(--font-display) !important;font-style:italic;font-weight:500;
  font-size:clamp(19px,2.3vw,26px);line-height:1.58;color:var(--white) !important;
  text-align:center;
}
.spot-quote b{font-weight:800;}
.spot-divider{position:relative;height:1px;background:var(--border-soft);max-width:680px;margin:36px auto 28px;}
.spot-divider .notch{
  position:absolute;left:50%;top:-5px;width:10px;height:10px;
  transform:translateX(-50%) rotate(45deg);
  background:var(--surface-2);
  border-right:1px solid var(--border-soft);border-bottom:1px solid var(--border-soft);
}
.spot-attr{display:flex;align-items:center;justify-content:center;gap:16px;}
.spot-avatar{position:relative;width:58px;height:58px;flex:none;}
.spot-avatar img{width:58px !important;height:58px !important;border-radius:50%;object-fit:cover !important;border:2px solid rgba(255,255,255,.16) !important;}
.spot-avatar .spot-badge{
  position:absolute;top:-3px;right:-6px;width:19px;height:19px;border-radius:50%;
  background:var(--blue);display:inline-flex;align-items:center;justify-content:center;
}
.spot-avatar .spot-badge svg{display:block;}
.spot-avatar.is-logo{display:inline-flex;align-items:center;justify-content:center;background:rgba(255,255,255,.06);border-radius:50%;border:2px solid rgba(255,255,255,.16);}
.spot-avatar.is-logo img{width:32px !important;height:auto !important;border-radius:0;border:0 !important;filter:brightness(0) invert(1);opacity:.8;}
.spot-name{font-family:var(--font-display) !important;font-weight:700;font-size:16.5px;color:var(--blue-alt);display:block;}
.spot-role{font-size:13.5px;color:var(--white-35);}
.spot-panel{display:none;}
.spot-panel.active{display:block;animation:qfade .4s ease;}
@keyframes qfade{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:none;}}

/* ============ 6.5 · BUILT WITH APIMATIC (customer showcase; screenshot-first cards, §4 .tile grammar) ============ */
.showcase{border-top:1px solid var(--border-soft);}
.showcase-head{text-align:center;max-width:760px;margin:0 auto 44px;}
.showcase-head .h2{margin-bottom:12px;}
.showcase-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;}
/* Card — screenshot-first; inset-ring + hover lift from §4's .tile, but its own flow (image on top) */
.sc-card{
  position:relative;display:flex;flex-direction:column;overflow:hidden;
  border-radius:var(--radius-lg);
  background:radial-gradient(130% 90% at 50% -25%, rgba(255,255,255,.045), transparent 58%), var(--surface);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10), inset 0 0 0 1px rgba(255,255,255,.065);
  transition:box-shadow .25s ease, transform .25s ease;
}
.sc-card:hover{
  transform:translateY(-2px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16), inset 0 0 0 1px rgba(255,255,255,.13), 0 18px 48px rgba(0,0,0,.4);
}
/* Screenshot FRAME (light-theme photo — framed, never white-filtered; the focal element) */
.sc-shot{
  display:block;margin:14px 14px 0;border-radius:12px;overflow:hidden;
  border:1px solid rgba(255,255,255,.12);background:#0b0e18;
  aspect-ratio:16 / 10;transition:border-color .25s ease;
}
.sc-shot img{width:100% !important;height:100% !important;object-fit:cover !important;object-position:top center;display:block;}
/* Color rule: blue only on hover, only on the focal element (the frame edge). Never a whole-card wash, never at rest. */
.sc-card:hover .sc-shot{border-color:rgba(12,127,242,.45);}
.sc-body{padding:18px 22px 22px;display:flex;flex-direction:column;gap:12px;position:relative;z-index:3;}
/* Logo — white-filter treatment, same as §2 (marks, not photos) */
.sc-logo img{height:20px !important;width:auto !important;filter:brightness(0) invert(1);opacity:.6;}
.sc-desc{font-size:13.5px;color:var(--body) !important;line-height:1.55;}
.sc-langs{display:flex;flex-wrap:wrap;gap:6px;}
.sc-lang{
  font-family:var(--font-mono) !important;font-size:10.5px;font-weight:500;color:var(--white-80);
  background:var(--surface-2);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);
  border-radius:6px;padding:4px 9px;
}
.sc-arrow{
  position:absolute;top:22px;right:22px;z-index:4;color:var(--white-35);font-size:15px;
  opacity:0;transform:translate(-4px,4px);transition:opacity .18s ease, transform .18s ease;
}
.sc-card:hover .sc-arrow{opacity:1;transform:none;color:rgba(255,255,255,.85);}

/* ============ 7 · TRIAL ============ */
.trial{border-top:1px solid var(--border-soft);}
.trial-inner{max-width:760px;margin:0 auto;text-align:center;}
.trial .h2{margin-bottom:16px;}
.trial .sub{margin-bottom:28px;max-width:64ch;margin-left:auto;margin-right:auto;}
/* Skills install: mono command pill + a link to the repo (the section's action; the trial CTA lives in §9) */
.skill-install{display:flex;flex-direction:column;align-items:center;gap:16px;}
.skill-cmd{
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--font-mono) !important;font-size:14px;color:var(--white-80);
  background:#070a13;border-radius:var(--radius-sm);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.09);
  padding:11px 11px 11px 20px;
}
.skill-prompt{color:var(--blue-alt);font-weight:600;}
/* inline copy button */
.skill-copy{
  position:relative;flex:none;margin-left:5px;
  display:inline-flex;align-items:center;justify-content:center;
  width:30px;height:30px;border-radius:7px;color:var(--white-35);
  border:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.03);
  transition:color .18s ease,border-color .18s ease,background .18s ease;
}
.skill-copy:hover{color:var(--white-80);border-color:rgba(255,255,255,.22);background:rgba(255,255,255,.06);}
.skill-copy .ic-check{display:none;}
.skill-copy.is-copied{color:var(--blue-alt);border-color:rgba(12,127,242,.4);background:rgba(12,127,242,.10);}
.skill-copy.is-copied .ic-copy{display:none;}
.skill-copy.is-copied .ic-check{display:block;}
/* "Copied" floating acknowledgement above the button */
.skill-copied{
  position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%) translateY(4px);
  font-family:var(--font-mono) !important;font-size:10px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  color:var(--blue-alt);background:rgba(12,127,242,.10);border:1px solid rgba(12,127,242,.34);
  padding:3px 8px;border-radius:6px;white-space:nowrap;pointer-events:none;
  opacity:0;transition:opacity .18s ease,transform .18s ease;
}
.skill-copy.is-copied .skill-copied{opacity:1;transform:translateX(-50%) translateY(0);}
.skill-link{display:inline-flex;align-items:center;gap:7px;font-weight:600;font-size:15px;transition:gap .18s ease;}
.skill-link:hover{gap:10px;}

/* ============ 8 · FAQ ============ */
.faq{border-top:1px solid var(--border-soft);}
.faq-head{text-align:center;margin-bottom:40px;}
.faq-list{max-width:840px;margin:0 auto;}
.faq-item{border:1px solid var(--border);border-radius:var(--radius);background:var(--surface-2);margin-bottom:10px;overflow:hidden;}
.faq-q{
  width:100%;display:flex;justify-content:space-between;align-items:center;gap:18px;
  text-align:left;padding:19px 24px;
  font-family:var(--font-display) !important;font-weight:600;font-size:16px;color:var(--white) !important;
}
.faq-q .fx{
  flex:none;width:22px;height:22px;border-radius:6px;position:relative;
  background:rgba(255,255,255,.06);border:1px solid var(--border-soft);
}
.faq-q .fx::before,.faq-q .fx::after{
  content:"";position:absolute;top:50%;left:50%;background:var(--white-80);
  transition:transform .22s ease;
}
.faq-q .fx::before{width:10px;height:1.6px;transform:translate(-50%,-50%);}
.faq-q .fx::after{width:1.6px;height:10px;transform:translate(-50%,-50%);}
.faq-item.open .fx::after{transform:translate(-50%,-50%) scaleY(0);}
.faq-a{max-height:0;overflow:hidden;transition:max-height .3s ease;}
.faq-a-inner{padding:0 24px 22px;font-size:15px;color:var(--body);max-width:70ch;}

/* ============ 9 · CLOSING CTA ============ */
.closing{
  border-top:1px solid var(--border-soft);
  background:
    radial-gradient(ellipse 62% 90% at 50% 115%, rgba(12,127,242,.16), transparent 65%),
    radial-gradient(rgba(255,255,255,.045) 1px, transparent 1px) 0 0/26px 26px,
    var(--bg);
  text-align:center;
}
.closing .h2{max-width:19ch;margin:0 auto 18px;font-size:clamp(28px,3.6vw,42px);}
.closing .sub{max-width:62ch;margin:0 auto 34px;}
.closing .cta-row{justify-content:center;}

/* ============ FOOTER ============ */
.footer{border-top:1px solid var(--border-soft);padding:64px 0 36px;background:var(--surface-2);}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr 1fr;gap:34px;margin-bottom:46px;}
.foot-brand p{font-size:13.5px;color:var(--white-35);margin-top:14px;max-width:26ch;}
.foot-col h4{font-size:13px;font-weight:700;letter-spacing:.04em;margin-bottom:14px;color:var(--white-80) !important;}
.foot-col a{display:block;font-size:13.5px;color:var(--body) !important;padding:4.5px 0;transition:color .15s ease;}
.foot-col a:hover{color:var(--white) !important;}
.foot-bar{
  border-top:1px solid var(--border-soft);padding-top:22px;
  display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;
  font-size:12.5px;color:var(--white-35);
}
.foot-bar a{color:var(--white-35) !important;font-family:var(--font-mono) !important;font-size:11.5px;}
.foot-bar a:hover{color:var(--white-80) !important;}
.foot-agent{display:flex;gap:16px;align-items:center;}

/* ============ RESPONSIVE ============ */
@media (max-width:1000px){
  /* nav reflows to the burger here: the desktop links + CTA cluster need ~992px, so
     collapse before then to stop the nav overflowing and forcing horizontal scroll (641-999px) */
  .nav-links{display:none;}
  .nav-burger{display:flex;}
  .nav-cta .btn-ghost{display:none;}
}
@media (max-width:1024px){
  .hero-grid{gap:44px;}
  .beats{grid-template-columns:1fr;gap:28px;}
}
@media (max-width:960px){
  .bento{grid-template-columns:repeat(2,1fr);}
  .trust-grid{grid-template-columns:repeat(2,1fr);}
  .t-span2,.t-span3{grid-column:span 1;}
  .bento .tile-lg{grid-column:span 2;}
  .tile-lg .tile-visual{min-height:230px;}
  .foot-grid{grid-template-columns:1fr 1fr 1fr;}
  .eng-layout{grid-template-columns:1fr;gap:30px;}
  /* stacked single column: release the fixed cell height so rail + terminal each
     stack at natural height; the terminal keeps a fixed height so code still scrolls. */
  .eng-panel[data-engpanel="sdks"] .eng-layout{height:auto;}
  .eng-panel[data-engpanel="sdks"] .eng-term{height:480px;}
  .pf-slide{flex-basis:90%;}
}
@media (max-width:820px){
  .section-pad{padding:76px 0;}
  .agent-field{inset:-30px -40px;}
  .tier-1{width:50px;height:50px;}
  .tier-2{width:38px;height:38px;}
  .spot-card{padding:36px 24px 32px;}
  .showcase-grid{grid-template-columns:1fr;}
}
@media (max-width:640px){
  .wrap{padding:0 22px;}
  .nav-mobile{padding:14px 22px 20px;}
  .hero{padding:52px 0 56px;}
  .bento{grid-template-columns:1fr;}
  .bento .tile-lg{grid-column:span 1;}
  .tile-lg .tile-visual{min-height:200px;}
  .trust-grid{grid-template-columns:1fr;}
  .schem-mid{grid-template-columns:1fr;gap:10px;}
  .schem-flow-x{transform:rotate(90deg);height:30px;}
  .schem-down{grid-template-columns:1fr;}
  .spot-tab{padding:10px 16px;}
  .spot-tab img{height:16px !important;}
  .spot-quote{font-size:17.5px;}
  .eng-tab{padding:10px 16px;font-size:13px;}
  .eng-card{padding:24px 18px;}
  .showcase-grid{gap:12px;}
  .foot-grid{grid-template-columns:1fr 1fr;}
  .stat-hero{gap:32px;}
  /* checklist: pull logos to the outer margins, shrink, drop the mid-tier so the
     field frames the full-width card instead of covering the list text */
  .agent-field{inset:-24px -14px;}
  .tier-1{width:42px;height:42px;}
  .tier-1.ag-claude{--x:6%;--y:12%;}
  .tier-1.ag-cursor{--x:94%;--y:12%;}
  .tier-1.ag-copilot{--x:8%;--y:96%;}
  .tier-1.ag-openai{--x:92%;--y:96%;}
  .tier-2{display:none;}
  /* Portal jigsaw: fixed 432px columns clip to a sliver on phones. Shrink the columns
     and cap the viewport height so the spotlit portal mockup stays legible. */
  .jig-col{width:78vw;max-width:300px;gap:14px;}
  .jig-track{gap:14px;}
  .jig-col-down{padding-top:90px;}
  .eng-portal .jig-viewport{height:clamp(420px,72vw,520px);}
}

/* ============ REDUCED MOTION ============ */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{animation-duration:.001s !important;animation-delay:0s !important;transition-duration:.001s !important;}
  .reveal{opacity:1 !important;transform:none !important;}
  .board li{opacity:1 !important;transform:none !important;}
  .board .tick path{stroke-dashoffset:0 !important;}
  .chip-dot{animation:none !important;}
  .flow-line,.flow-line-v{stroke-dashoffset:0 !important;}
  .agent,.agent img{animation:none !important;}
  .tile-glow{display:none !important;}
  .mcp-pulse{display:none !important;}
  .dio-caret{animation:none !important;}
  .tile:hover .dio-lang,.tile:hover .dio-srv-row,.tile:hover .dio-side .dio-bar,
  .tile:hover .dio-term-body .dio-bar,.tile:hover .dio-tool .ok,.tile:hover .cp-line,
  .tile:hover .dio-try{animation:none !important;}
}


/* ============================================================
   §3.5 "See it work" — the live interactive demo in its own section,
   after the §3 proof. Full-width divider like .platform/.engine/.trust.
   The demo carries its own browser chrome, so no box around it.
   Blue wash: a faint brand-blue glow bleeding in from both margins,
   anchored at 8%/92% so the bright cores sit in the open margins beside
   the demo (its dark chrome would eat a centered glow); low peak (~.20)
   faded to transparent before the edges, so it reads as atmosphere.
   ============================================================ */
.seework{
  display:block;
  border-top:1px solid var(--border-soft);
  background:
    radial-gradient(ellipse 46% 60% at 8% 40%, rgba(12,127,242,.20), transparent 64%),
    radial-gradient(ellipse 46% 60% at 92% 40%, rgba(79,127,255,.20), transparent 64%),
    var(--bg);
}
.seework-head{max-width:760px;margin:0 auto 36px;text-align:center;}
.seework-head .h2{margin-bottom:0;}
/* the demo sits directly under the heading */
.demo-slot[data-demo-slot="marquee"] .cpx-scope.cpx-embed{margin-top:0;}
/* the marquee (§3 proof) follows §2.5; its own top divider separates it from that section */
.marquee{border-top:1px solid var(--border-soft);}
/* empty slots collapse so they never leave a gap */
.demo-slot:empty{display:none;}


/* ============================================================
   EMBEDDED: Context Plugins interactive demo (hero visual).
   Scoped under .cpx-scope — all component CSS below is isolated
   from the page. .cpx-embed neutralizes the standalone section
   chrome (padding, duplicate blueprint bg) so it sits cleanly
   inside the hero column.
   ============================================================ */
.cpx-scope.cpx-embed{
  position:relative;
  padding:0 !important;background:transparent !important;background-image:none !important;
  /* .cpx-scope is a grid item in .hero-grid; a grid item defaults to min-width:auto,
     so its min-content width (the IDE/terminal chain) grows the track and blows the
     stage past the column. min-width:0 lets the track stay at the column width. */
  min-width:0;
}
/* faint ambient glow behind the stage — the panel sits on a subtly graded surface
   (Linear technique) rather than flat black, so it reads as lifted off the page. */
.cpx-scope.cpx-embed::before{
  content:"";position:absolute;z-index:0;pointer-events:none;
  left:50%;top:44%;transform:translate(-50%,-50%);
  width:88%;height:80%;border-radius:50%;
  background:radial-gradient(ellipse at center, rgba(120,150,255,.10), rgba(120,150,255,.04) 45%, transparent 72%);
  filter:blur(30px);
}
.cpx-scope.cpx-embed > .cpx-wrap{position:relative;z-index:1;}
/* Belt-and-suspenders: the stage cannot exceed the hero content column, period.
   overflow:hidden (already on .cpx-stage) then clips any inner content that can't
   shrink, so long code/prompts scroll inside their own panels instead of stretching. */
.cpx-embed .cpx-wrap{max-width:100%;margin:0;min-width:0;overflow:hidden;}
.cpx-embed .cpx-foot{margin-top:18px;justify-content:center;}
/* Width containment: the IDE screen is a flex/grid whose non-wrapping code has a
   large min-content width. Without min-width:0 in the chain, that flex item refuses
   to shrink and blows the stage past the hero column. Cap the stage to its parent
   and let min-width:0 push the overflow into the editor's own scroll area. */
.cpx-embed .cpx-stage{width:100%;max-width:100%;}
.cpx-embed .cpx-screen{min-width:0;max-width:100%;}
/* Every flex/grid item down the IDE + TERMINAL chain needs min-width:0, or its
   min-content width (non-wrapping code, the 3-up prompt-cards grid, the long
   prompt string) forces the whole stage wider than the hero column. The terminal
   chain was the miss: the ask-state prompt cards + cmdline open on first Copy. */
.cpx-embed .cpx-ide-shell,
.cpx-embed .cpx-ide-body,
.cpx-embed .cpx-ide-main,
.cpx-embed .cpx-ide-editor,
.cpx-embed .cpx-agent-panel,
.cpx-embed .cpx-panel-body,
.cpx-embed .cpx-editor-wrap,
.cpx-embed .cpx-code,
.cpx-embed .cpx-terminal,
.cpx-embed .cpx-term-body,
.cpx-embed .cpx-term-ask,
.cpx-embed .cpx-cmdline{min-width:0;}
.cpx-embed .cpx-term-log{min-width:0;}
.cpx-embed .cpx-log-line{overflow-wrap:anywhere;}
.cpx-embed .cpx-term-head,.cpx-embed .cpx-term-tabs,.cpx-embed .cpx-term-procs{min-width:0;overflow:hidden;}
.cpx-embed .cpx-statusbar{min-width:0;overflow:hidden;}
.cpx-embed .cpx-sb-left,.cpx-embed .cpx-sb-right{min-width:0;overflow:hidden;}
/* Terminal prompt: wrap across multiple lines at the larger install-command size
   (16.5px / 1.5), instead of a single truncated 12.5px line. min-width:0 keeps it
   from stretching the command line; word-break wraps long tokens cleanly. */
.cpx-embed .cpx-prompt-text{
  min-width:0;flex:1 1 0;
  white-space:normal;overflow:visible;text-overflow:clip;
  overflow-wrap:anywhere;word-break:break-word;
  font-size:16.5px;line-height:1.5;
}
/* multiline text makes the cmdline tall — align the > symbol and the buttons to
   the first line (top) rather than vertically centering against the block. */
.cpx-embed .cpx-cmdline{align-items:flex-start;}
.cpx-embed .cpx-cmd-prompt{font-size:16.5px;line-height:1.5;padding-top:1px;}
.cpx-embed .cpx-cmdline .cpx-copy,
.cpx-embed .cpx-cmdline .cpx-run{margin-top:1px;flex:none;}

/* =========================================================================
   Context Plugins interactive demo — standalone prototype
   Design frame: website-2026 tokens (near-black #05080f, one blue accent,
   grey-glass at rest, blue only on hover / animated focal element, blueprint
   grid). No glow orbs. Distinctiveness budget spent on interaction craft.
   HubSpot-safe: classes only (no id styling hooks), <span> inside <button>,
   !important on colors/fonts, fonts via <link> + @import fallback below.
   ========================================================================= */

.cpx-scope {
  --bg: #05080f;
  --surface: #0d0f1e;
  --surface-2: #0a0d16;
  --blue: #0c7ff2;
  --blue-alt: #4f7fff;
  --mint: #8fd9b6;
  --amber: #e3b34a;
  --white: #ffffff;
  --w80: rgba(255,255,255,.80);
  --w55: rgba(255,255,255,.55);
  --w35: rgba(255,255,255,.35);
  --w15: rgba(255,255,255,.12);
  --border: rgba(255,255,255,.10);
  --border-2: rgba(255,255,255,.16);
  --radius: 14px;
  --mono: 'JetBrains Mono', ui-monospace, monospace;
  --display: 'Plus Jakarta Sans', system-ui, sans-serif;
  --body: 'Inter', system-ui, sans-serif;
}

.cpx-scope, .cpx-scope * { box-sizing: border-box; }

/* dark scrollbars everywhere in the component (command box, IDE editor, tabs) */
.cpx-scope *::-webkit-scrollbar { height: 8px; width: 8px; }
.cpx-scope *::-webkit-scrollbar-track { background: transparent; }
.cpx-scope *::-webkit-scrollbar-thumb { background: var(--border-2); border-radius: 4px; }
.cpx-scope *::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.25); }
.cpx-scope * { scrollbar-width: thin; scrollbar-color: var(--border-2) transparent; }

.cpx-scope {
  background: var(--bg) !important;
  color: var(--w55) !important;
  font-family: var(--body) !important;
  -webkit-font-smoothing: antialiased;
  padding: 72px 24px 96px;
  /* blueprint grid */
  background-image:
    linear-gradient(rgba(255,255,255,.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.028) 1px, transparent 1px) !important;
  background-size: 40px 40px !important;
}

.cpx-wrap { max-width: 1080px; margin: 0 auto; }

/* ---- section header ---- */
.cpx-eyebrow {
  font-family: var(--mono) !important;
  font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  color: var(--blue) !important; margin: 0 0 14px;
}
.cpx-h2 {
  font-family: var(--display) !important;
  font-size: clamp(26px, 4vw, 36px); font-weight: 800; line-height: 1.12;
  letter-spacing: -.02em; color: var(--white) !important; margin: 0 0 12px;
}
.cpx-sub {
  font-size: 16px; line-height: 1.6; color: var(--w55) !important;
  max-width: 620px; margin: 0 0 34px;
}
.cpx-sub b { color: var(--w80) !important; font-weight: 600; }

/* =========================================================================
   STAGE — one surface, three swappable screens (idle / picker / ide)
   ========================================================================= */
.cpx-stage {
  position: relative; border: 1px solid rgba(255,255,255,.14); border-radius: var(--radius);
  /* lifted panel — a clearly lighter dark than the page, with light from above, so the
     mock stands off the near-black background (Linear-style elevation). */
  background: linear-gradient(180deg, #1a1e2e, #12151f) !important;
  overflow: hidden; min-height: 720px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    0 2px 8px rgba(0,0,0,.4),
    0 40px 100px -20px rgba(0,0,0,.75),
    0 0 0 1px rgba(255,255,255,.02);
}
.cpx-screen { display: none; }
.cpx-screen.is-on { display: block; }

/* window chrome shared by picker + ide */
.cpx-chrome {
  display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px;
  border-bottom: 1px solid var(--border); background: var(--surface-2) !important;
  font-family: var(--mono) !important; font-size: 12px; color: var(--w35) !important;
}
.cpx-dot { width: 11px; height: 11px; border-radius: 50%; background: #35384a; }
.cpx-dot.r { background: #ff5f57; } .cpx-dot.y { background: #febc2e; } .cpx-dot.g { background: #28c840; }
.cpx-chrome-title { margin-left: 8px; }
.cpx-chrome-right { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; }

/* ---------- SCREEN A: idle / click-to-interact ---------- */
.cpx-idle { position: relative; cursor: pointer; }
.cpx-idle-shot {
  padding: 0; filter: saturate(.7) brightness(.72); transition: filter .4s ease;
  pointer-events: none;
}
.cpx-idle:hover .cpx-idle-shot { filter: saturate(.85) brightness(.86); }
.cpx-idle-veil {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at center, rgba(5,8,15,.28), rgba(5,8,15,.66)); z-index: 4;
}
.cpx-idle-veil .cpx-play {
  display: inline-flex; align-items: center; gap: 12px;
  background: rgba(13,15,30,.72); border: 1px solid var(--border-2); backdrop-filter: blur(8px);
  padding: 14px 22px; border-radius: 999px; color: var(--white); font-family: var(--display);
  font-weight: 600; font-size: 15px; box-shadow: 0 12px 40px rgba(0,0,0,.5);
}
.cpx-play-ring {
  width: 34px; height: 34px; border-radius: 50%; background: var(--blue);
  display: inline-flex; align-items: center; justify-content: center; color: #fff;
  box-shadow: 0 0 0 0 rgba(12,127,242,.6); animation: cpxPulse 2.2s ease-out infinite;
}
@keyframes cpxPulse { 0% { box-shadow: 0 0 0 0 rgba(12,127,242,.55);} 70%{ box-shadow:0 0 0 16px rgba(12,127,242,0);} 100%{box-shadow:0 0 0 0 rgba(12,127,242,0);} }

/* cursor-tracking "click to interact" chip */
.cpx-cursorchip {
  position: fixed; z-index: 60; pointer-events: none; transform: translate(14px, 14px);
  background: var(--blue) !important; color: #fff !important;
  font-family: var(--display) !important; font-weight: 600; font-size: 12.5px;
  padding: 7px 12px; border-radius: 999px; white-space: nowrap; opacity: 0;
  box-shadow: 0 8px 24px rgba(12,127,242,.4); transition: opacity .16s ease;
  display: inline-flex; align-items: center; gap: 7px;
}
.cpx-cursorchip.is-on { opacity: 1; }
.cpx-cursorchip .cpx-cc-dot { width: 6px; height: 6px; border-radius: 50%; background: #fff; }

/* ---------- SCREEN B: DX-portal Context Plugins / tool picker ---------- */
.cpx-portal { padding: 34px 40px 40px; }
.cpx-portal-crumb { font-family: var(--mono) !important; font-size: 12px; color: var(--w35) !important; margin-bottom: 18px; }
.cpx-portal-crumb b { color: var(--blue) !important; font-weight: 600; }
.cpx-portal h3 { font-family: var(--display) !important; font-size: 22px; font-weight: 700; color: var(--white) !important; margin: 0 0 8px; letter-spacing: -.01em; }
.cpx-portal p.lead { font-size: 15px; line-height: 1.55; color: var(--w55) !important; margin: 0 0 26px; max-width: 560px; }
.cpx-portal p.lead .cpx-active-pill { color: var(--mint) !important; font-family: var(--mono); font-size: 12px; border: 1px solid rgba(143,217,182,.3); padding: 2px 8px; border-radius: 999px; margin-left: 4px; }

.cpx-label { font-family: var(--mono) !important; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--w35) !important; margin: 0 0 14px; }

.cpx-tools { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 30px; }
.cpx-tool {
  position: relative; text-align: left; cursor: pointer; font-family: var(--body) !important;
  background: rgba(255,255,255,.03) !important; border: 1px solid var(--border); border-radius: 12px;
  padding: 18px 16px; color: var(--w80) !important; transition: border-color .18s, background .18s, transform .18s;
}
.cpx-tool:hover { border-color: var(--blue) !important; background: rgba(12,127,242,.06) !important; transform: translateY(-2px); }
.cpx-tool .cpx-tool-ic { width: 34px; height: 34px; margin-bottom: 12px; display: block; }
/* real logo <img>s: force size (beat the global img height:auto) + white/mono on the
   colored picker buttons via a brightness/invert filter. */
img.cpx-tool-ic { height: 34px !important; width: 34px !important; object-fit: contain; filter: brightness(0) invert(1); }
.cpx-tool .cpx-tool-name { display: block; font-family: var(--display) !important; font-weight: 600; font-size: 15px; color: var(--white) !important; }
.cpx-tool .cpx-tool-meta { display: block; font-size: 12px; color: var(--w35) !important; margin-top: 3px; }
.cpx-tool .cpx-tool-go { position: absolute; top: 16px; right: 16px; color: var(--w35); opacity: 0; transition: opacity .18s, transform .18s; }
.cpx-tool:hover .cpx-tool-go { opacity: 1; color: var(--blue); transform: translateX(2px); }

/* install command row */
.cpx-install { border: 1px solid var(--border); border-radius: 12px; background: var(--surface-2) !important; overflow: hidden; }
.cpx-install-head { display: flex; align-items: center; gap: 8px; padding: 11px 16px; border-bottom: 1px solid var(--border); font-family: var(--mono) !important; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--w35) !important; }
.cpx-cmd { display: flex; align-items: center; gap: 12px; padding: 14px 16px; }
.cpx-cmd code { flex: 1; font-family: var(--mono) !important; font-size: 13px; color: var(--w80) !important; white-space: nowrap; overflow-x: auto; }
.cpx-cmd code .cpx-prompt-sym { color: var(--blue) !important; }

/* copy button (shared) */
.cpx-copy {
  font-family: var(--display) !important; font-weight: 600; font-size: 12px; cursor: pointer;
  background: rgba(255,255,255,.05) !important; color: var(--w80) !important;
  border: 1px solid var(--border-2); border-radius: 8px; padding: 7px 12px;
  display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; transition: border-color .16s, color .16s, background .16s;
}
.cpx-copy:hover { border-color: var(--blue); color: var(--white) !important; }
.cpx-copy.is-copied { color: var(--mint) !important; border-color: rgba(143,217,182,.4); background: rgba(143,217,182,.08) !important; }
.cpx-copy svg { width: 13px; height: 13px; }

/* =======================================================================
   SCREEN B v2 — portal shell (muted sidebar) + stepped install content.
   Step 1 faded/small, Step 2 + command emphasized, prominent Copy.
   ======================================================================= */
/* full-width site header (brand lives here, above sidebar + content) */
.cpx-portal-header {
  display: flex; align-items: center; gap: 14px; padding: 14px 22px;
  border-bottom: 1px solid var(--blue); background: rgba(0,0,0,.25) !important;
}
.cpx-portal-header .cpx-side-brand { margin: 0; font-size: 15px; }
.cpx-portal-header .cpx-side-mark { width: 24px; height: 24px; font-size: 14px; }

/* two-column portal body: muted sidebar + install content */
.cpx-portal-body { display: grid; grid-template-columns: 210px minmax(0,1fr); min-height: 620px; }

/* muted developer-portal sidebar — quiet, present, non-interactive.
   Same de-emphasis level as Step 1 (opacity ~.5). */
.cpx-side {
  border-right: 1px solid var(--border); background: var(--surface-2) !important;
  padding: 18px 14px; opacity: .5; user-select: none;
  font-family: var(--body) !important;
}
.cpx-side-brand { display: flex; align-items: center; gap: 8px; font-family: var(--display) !important; font-weight: 700; font-size: 12.5px; color: var(--w80) !important; margin-bottom: 16px; }
.cpx-side-mark { width: 20px; height: 20px; border-radius: 5px; background: var(--blue); color: #fff; display: grid; place-items: center; font-size: 12px; font-weight: 800; }
/* real PayPal logo — the monochrome mark tinted PayPal blue; no square container */
.cpx-side-mark-img { width: 20px !important; height: 20px !important; object-fit: contain; display: block;
  filter: brightness(0) saturate(100%) invert(28%) sepia(94%) saturate(1352%) hue-rotate(190deg) brightness(94%) contrast(101%); }
.cpx-portal-header .cpx-side-mark-img { width: 22px !important; height: 22px !important; }
.cpx-side-search { display: flex; align-items: center; gap: 7px; background: var(--bg) !important; border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; font-size: 12px; color: var(--w35) !important; margin-bottom: 12px; }
.cpx-side-search .cpx-side-kbd { margin-left: auto; font-family: var(--mono); font-size: 9.5px; border: 1px solid var(--border-2); border-radius: 4px; padding: 1px 4px; }
.cpx-side-cta { display: flex; gap: 7px; margin-bottom: 18px; }
.cpx-side-btn { flex: 1; text-align: center; font-family: var(--display) !important; font-weight: 600; font-size: 11.5px; padding: 7px; border-radius: 7px; border: 1px solid var(--border-2); color: var(--w55) !important; }
.cpx-side-btn.pri { background: var(--blue); border-color: var(--blue); color: #fff !important; }
.cpx-side-h { font-family: var(--mono) !important; font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--w35) !important; margin: 16px 0 7px; }
.cpx-side-i { font-size: 12.5px; color: var(--w55) !important; padding: 6px 9px; border-radius: 6px; }
.cpx-side-i.is-active { background: rgba(255,255,255,.05) !important; color: var(--w80) !important; }

.cpx-install-screen { padding: 26px 34px 34px; min-width: 0; }

/* portal page + section headings (titles only — matches a real DX-portal page) */
/* portal page + section headings — muted, part of the dimmed portal chrome (not the focus) */
.cpx-portal-title { font-family: var(--display) !important; font-weight: 800; font-size: 22px; letter-spacing: -.02em; color: var(--w55) !important; margin: 0 0 18px; }
.cpx-portal-section { font-family: var(--display) !important; font-weight: 700; font-size: 17px; letter-spacing: -.01em; color: var(--w55) !important; margin: 0 0 18px; }
/* short divider between the toggle and the section heading — roughly the toggle's
   width (not full-width), with generous space above it. */
.cpx-portal-divider { width: 572px; max-width: 100%; height: 1px; background: var(--border); margin: 30px 0 24px; }

/* setup-guide toggle — two option cards below Quickstart (reference grouping). The
   selected one (AI-Tools) is clearly filled + brighter-bordered; the other is a plain
   outlined card. Icons render monochrome white. */
/* two fixed-width tabs (not full-width) — compact, left-aligned. Selected reads like
   the sidebar's active item: a faint fill + slightly-brighter-but-muted text, so it's
   clearly the active guide without popping like an interactive CTA. */
.cpx-guide-toggle { display: grid; grid-template-columns: 280px 280px; gap: 12px; margin: 0 0 4px; opacity: .62; }
.cpx-guide-opt {
  display: flex; align-items: flex-start; gap: 12px; text-align: left;
  border: 1px solid var(--border); border-radius: 12px; padding: 13px 14px;
  background: rgba(255,255,255,.015);
}
.cpx-guide-opt.is-selected {
  border-color: var(--border-2);
  background: rgba(255,255,255,.05);
}
.cpx-guide-ic {
  flex: none; width: 34px; height: 34px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.05); color: var(--w55);
}
.cpx-guide-opt.is-selected .cpx-guide-ic { background: rgba(255,255,255,.08); color: var(--w80); }
.cpx-guide-ic svg { width: 18px; height: 18px; display: block; }
.cpx-guide-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cpx-guide-h { font-family: var(--display) !important; font-weight: 700; font-size: 14px; color: var(--w55) !important; line-height: 1.25; }
.cpx-guide-opt.is-selected .cpx-guide-h { color: var(--w80) !important; }
.cpx-guide-sub { font-size: 11.5px; line-height: 1.4; color: var(--w35) !important; }

.cpx-step { display: grid; grid-template-columns: 44px 1fr; gap: 6px; }
.cpx-step + .cpx-step { margin-top: 8px; }
.cpx-step-rail { display: flex; flex-direction: column; align-items: center; }
.cpx-step-num {
  width: 30px; height: 30px; border-radius: 50%; border: 1.5px solid var(--border-2);
  display: grid; place-items: center; font-family: var(--display) !important; font-weight: 700; font-size: 13px;
  color: var(--w55) !important; background: var(--surface-2) !important;
}
.cpx-step-num-live { border-color: var(--blue); color: var(--white) !important; box-shadow: 0 0 0 4px rgba(12,127,242,.12); }
.cpx-step-line { flex: 1; width: 1.5px; background: var(--border); margin-top: 6px; }
.cpx-step-body { padding-top: 3px; padding-bottom: 22px; min-width: 0; }
.cpx-step-title { font-family: var(--display) !important; font-weight: 700; font-size: 16px; line-height: 1.25; color: var(--w80) !important; margin: 2px 0 16px; letter-spacing: -.01em; }
.cpx-step-title-lg { font-size: 21px; color: var(--white) !important; margin-bottom: 18px; }

/* Step 1 is deliberately faded so emphasis lands on Step 2 (no hover brighten —
   hovering a language icon shouldn't light up the whole section) */
.cpx-step-muted { opacity: .5; }
.cpx-step-muted .cpx-step-title { font-size: 14px; color: var(--w55) !important; margin-bottom: 12px; }

/* smaller language tiles */
.cpx-langs { display: flex; flex-wrap: wrap; gap: 8px; }
.cpx-lang {
  width: 84px; height: 66px; border: 1px solid var(--border); border-radius: 10px; background: rgba(255,255,255,.02) !important;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; position: relative;
}
/* real language logos — monochrome white (brightness/invert), sized (beat global img height:auto) */
/* real brand-color language logos (Devicon) — no mono filter; the colored marks stay recognizable */
.cpx-lang-ic { width: 26px !important; height: 26px !important; object-fit: contain; display: block; }
.cpx-lang-name { font-family: var(--body) !important; font-size: 11px; color: var(--w55) !important; }
.cpx-lang.is-locked { border-color: var(--blue); box-shadow: 0 0 0 1px var(--blue); }
.cpx-lang.is-locked .cpx-lang-name { color: var(--white) !important; }
.cpx-lang.is-off { opacity: .5; }
.cpx-lang-pill { position: absolute; top: -8px; left: 50%; transform: translateX(-50%); background: var(--blue); color: #fff; font-family: var(--display) !important; font-weight: 700; font-size: 8.5px; letter-spacing: .03em; padding: 2px 7px; border-radius: 999px; white-space: nowrap; }

/* Step 2 tool row (horizontal pill buttons, like the reference) */
.cpx-install-screen .cpx-tools { display: flex; grid-template-columns: none; flex-wrap: wrap; gap: 12px; margin-bottom: 16px; }
.cpx-install-screen .cpx-tool {
  display: inline-flex; align-items: center; gap: 10px; width: auto; padding: 13px 20px; border-radius: 11px;
  font-family: var(--display) !important; font-weight: 700; font-size: 15px; color: #fff !important; border: 1px solid transparent;
}
.cpx-install-screen .cpx-tool .cpx-tool-ic { width: 22px !important; height: 22px !important; margin: 0; }
.cpx-install-screen .cpx-tool .cpx-tool-name { display: inline; font-size: 15px; }
.cpx-install-screen .cpx-tool.tool-claude { background: linear-gradient(135deg,#d97757,#c96444) !important; }
.cpx-install-screen .cpx-tool.tool-cursor { background: #0a0a0a !important; border-color: #2c2c2c; }
.cpx-install-screen .cpx-tool.tool-vscode { background: linear-gradient(135deg,#1f9cf0,#0c7fd8) !important; }
.cpx-install-screen .cpx-tool:hover { transform: translateY(-2px); filter: brightness(1.07); border-color: transparent !important; background: none; }
.cpx-install-screen .cpx-tool.tool-claude:hover { background: linear-gradient(135deg,#e08262,#d0704f) !important; }
.cpx-install-screen .cpx-tool.tool-cursor:hover { background: #141414 !important; }
.cpx-install-screen .cpx-tool.tool-vscode:hover { background: linear-gradient(135deg,#2ba3f5,#1288e0) !important; }
.cpx-install-screen .cpx-tool.is-active { box-shadow: 0 0 0 2px var(--white), 0 10px 26px rgba(0,0,0,.5); }

/* install panel starts hidden, revealed on tool select */
.cpx-install { display: none; }
.cpx-install.is-on { display: block; animation: cpxPop .28s ease; }

/* Cursor deeplink panel: the "Add to Cursor" badge (black, white text — Cursor's
   own badge style) + a dim caption. The demo plays the click itself. */
.cpx-deeplink-body { padding: 20px; }
.cpx-cursor-badge {
  display: inline-flex; align-items: center; gap: 10px; cursor: pointer;
  font-family: var(--display) !important; font-weight: 600; font-size: 14.5px; color: #fff !important;
  background: #000 !important; border: 1px solid rgba(255,255,255,.3); border-radius: 10px; padding: 12px 20px;
  transition: transform .18s ease, filter .18s ease, box-shadow .18s ease;
}
.cpx-cursor-badge:hover { border-color: rgba(255,255,255,.55); }
.cpx-cursor-badge .cpx-badge-ic { width: 17px; height: 17px; display: block; }
.cpx-cursor-badge.is-pressed {
  transform: scale(.94); filter: brightness(1.6);
  box-shadow: 0 0 0 5px rgba(255,255,255,.16);
}
.cpx-deeplink-note { margin-top: 12px; font-size: 12.5px; color: var(--w35) !important; }
@keyframes cpxPop { from { opacity: 0; transform: translateY(-6px);} to { opacity: 1; transform: none; } }
/* portal→IDE handoff: the portal fades out, then the IDE fades in with a slight zoom
   (softens the hard display swap). transform-origin centered; clipped by the stage. */
@keyframes cpxScreenOut { to { opacity: 0; } }
@keyframes cpxScreenIn { from { opacity: 0; transform: scale(.98); } to { opacity: 1; transform: none; } }
.cpx-screen.is-leaving { animation: cpxScreenOut .18s ease both; }

/* EMPHASIS: bigger, more readable command */
.cpx-install-screen .cpx-cmd { padding: 20px 16px 20px 20px; align-items: center; }
.cpx-install-screen .cpx-cmd code { flex: 1 1 0; min-width: 0; font-size: 16.5px; line-height: 1.5; padding-bottom: 3px; }
.cpx-install-screen .cpx-cmd code .cpx-fl { color: #6ea8ff; } .cpx-install-screen .cpx-cmd code .cpx-url { color: var(--mint); } .cpx-install-screen .cpx-cmd code .cpx-hd { color: var(--amber); }

/* EMPHASIS: prominent, obviously-clickable Copy button */
.cpx-copy-lg {
  position: relative; font-size: 13.5px !important; padding: 11px 18px !important; border-radius: 10px !important;
  background: var(--blue) !important; color: #fff !important; border: 1px solid var(--blue) !important;
  box-shadow: 0 6px 20px rgba(12,127,242,.35); transition: transform .14s, filter .14s, box-shadow .14s;
}
.cpx-copy-lg:hover { filter: brightness(1.08); transform: translateY(-1px); box-shadow: 0 10px 28px rgba(12,127,242,.45); color: #fff !important; }
.cpx-copy-lg svg { width: 15px !important; height: 15px !important; }
.cpx-copy-lg.is-copied { background: rgba(143,217,182,.14) !important; border-color: rgba(143,217,182,.5) !important; color: var(--mint) !important; box-shadow: none; }

/* =======================================================================
   GUIDE PULSE — sits on the single next action, advances as the user acts.
   Bold radiating blue ring (::after) + gentle scale "breathing" bounce.
   ======================================================================= */
.cpx-guide { position: relative; animation: cpxGuideBounce 1.6s ease-in-out infinite; z-index: 3; }
.cpx-guide::after {
  content: ""; position: absolute; inset: -2px; border-radius: inherit; pointer-events: none;
  box-shadow: 0 0 0 0 rgba(12,127,242,.6); animation: cpxGuideRing 1.6s ease-out infinite;
}
@keyframes cpxGuideRing {
  0%   { box-shadow: 0 0 0 0 rgba(12,127,242,.6); }
  70%  { box-shadow: 0 0 0 18px rgba(12,127,242,0); }
  100% { box-shadow: 0 0 0 0 rgba(12,127,242,0); }
}
@keyframes cpxGuideBounce {
  0%,100% { transform: translateY(0) scale(1); }
  50%     { transform: translateY(-2px) scale(1.03); }
}
/* A guided prompt-menu row is full-width — scaling it (cpxGuideBounce) or the outward
   ::after ring (cpxGuideRing extends 18px) would widen it past the terminal and trip a
   horizontal scrollbar. Use a width-safe pulse for these rows: an inset glow that stays
   inside the row, no scale, no outward shadow. */
.cpx-prompt-opt.cpx-guide { animation: cpxGuidePulseRow 1.6s ease-in-out infinite; }
.cpx-prompt-opt.cpx-guide::after {
  animation: none; box-shadow: none;
}
@keyframes cpxGuidePulseRow {
  0%,100% { background: color-mix(in srgb, var(--term-accent, var(--tool-accent)) 16%, transparent); }
  50%     { background: color-mix(in srgb, var(--term-accent, var(--tool-accent)) 30%, transparent); }
}

.cpx-install-note { margin-top: 14px; font-size: 13px; line-height: 1.55; color: var(--w55) !important; }
.cpx-install-note .cpx-kbd { font-family: var(--mono) !important; font-size: 11px; background: rgba(255,255,255,.05); border: 1px solid var(--border-2); border-radius: 5px; padding: 2px 7px; color: var(--white) !important; }
.cpx-install-note .cpx-slashcmd { font-family: var(--mono) !important; color: var(--blue) !important; }

@media (prefers-reduced-motion: reduce) {
  .cpx-guide { animation: none; }
  .cpx-tui-work .cpx-work-star { animation: none; }
  .cpx-ide-editor { transition: none; }
  .cpx-guide::after { animation: none; box-shadow: 0 0 0 3px rgba(12,127,242,.55); }
  .cpx-ide-shell.is-on { animation: none; }
  .cpx-screen.is-leaving { animation: none; }
}

/* =======================================================================
   SCREEN C: mocked IDE — one shell reskinned per tool (cpx-ide-*).
   --tool-accent recolors the shell interior; site blue stays outside.
   ======================================================================= */
.cpx-ide-shell { --tool-accent: var(--blue); flex-direction: column; min-height: 720px; position: relative; }

/* Cursor MCP install confirmation dialog — centered over the workbench with a
   dim scrim, the way a deeplink approval really appears */
.cpx-ide-dialog {
  position: absolute; inset: 0; z-index: 7;
  display: flex; align-items: center; justify-content: center;
  background: rgba(3,5,10,.55);
}
.cpx-ide-dialog[hidden] { display: none !important; }
.cpx-dialog-card {
  width: min(380px, 86%); padding: 20px 22px;
  background: #16161d !important; border: 1px solid var(--border-2); border-radius: 12px;
  box-shadow: 0 26px 80px rgba(0,0,0,.65);
  font-family: var(--body) !important;
}
.cpx-dialog-title { font-size: 14.5px; font-weight: 700; color: var(--white) !important; }
.cpx-dialog-name { font-family: var(--mono) !important; font-size: 12.5px; color: var(--w80) !important; margin-top: 10px; }
.cpx-dialog-sub { font-family: var(--mono) !important; font-size: 11px; color: var(--w35) !important; margin-top: 4px; }
.cpx-dialog-btns { display: flex; gap: 10px; justify-content: flex-end; margin-top: 18px; }
.cpx-dialog-install, .cpx-dialog-cancel {
  font-family: var(--display) !important; font-size: 12.5px; font-weight: 600;
  border-radius: 8px; padding: 8px 16px;
}
.cpx-dialog-install { background: var(--white) !important; color: #0a0a0a !important; border: none; cursor: pointer; transition: transform .18s ease, filter .18s ease, box-shadow .18s ease; }
.cpx-dialog-install:hover { filter: brightness(.92); }
.cpx-dialog-install.is-pressed { transform: scale(.92); filter: brightness(.8); box-shadow: 0 0 0 5px rgba(255,255,255,.28); }
.cpx-dialog-cancel { background: transparent; color: var(--w55) !important; border: 1px solid var(--border-2); cursor: default; }
/* fade + slight zoom-in as the IDE opens (softens the portal→IDE handoff) */
.cpx-ide-shell.is-on { display: flex; animation: cpxScreenIn .26s cubic-bezier(.4,0,.2,1) both; transform-origin: center; } /* beat the base .cpx-ide-shell so hidden state stays hidden */
/* workbench row: activity bar on the far left, then the editor+terminal column */
.cpx-ide-body { display: flex; flex-direction: row; flex: 1; min-height: 0; }
.cpx-ide-main { display: flex; flex-direction: column; flex: 1; min-width: 0; min-height: 0; }

/* activity bar — the VS Code-family signature strip */
.cpx-abar {
  flex: none; width: 42px; background: var(--surface-2) !important; border-right: 1px solid var(--border);
  display: flex; flex-direction: column; align-items: stretch; padding: 6px 0 8px; gap: 2px;
}
.cpx-abar-ic { height: 40px; display: flex; align-items: center; justify-content: center; color: var(--w35); }
.cpx-abar-ic svg { width: 21px; height: 21px; display: block; }
.cpx-abar-ic.is-active { color: var(--w80); box-shadow: inset 2px 0 0 var(--white); }
.cpx-abar-gear { margin-top: auto; }

/* per-tool chrome logo (in the window title bar) */
.cpx-ide-logo { display: inline-flex; align-items: center; margin-left: 6px; }
.cpx-ide-logo svg { width: 16px; height: 16px; display: block; }
/* IDE title-bar logo <img> — real brand colors (no filter), sized to the chrome. */
.cpx-ide-logo-img { width: 16px !important; height: 16px !important; object-fit: contain; display: block; }
.cpx-chrome-title { color: var(--w55) !important; }

/* upper region: file tree + editor + (optional) agent panel.
   --panel-w drives the third column: 0 for Claude Code (no panel), wide (46%)
   during the prompt-picker / full-prompt phases so nothing truncates, then a
   narrow 280px rail once generation starts so the code panes take focus. */
.cpx-ide-editor {
  display: grid; grid-template-columns: 210px minmax(0,1fr) var(--panel-w, 0px);
  transition: grid-template-columns .55s cubic-bezier(.4,0,.2,1);
  flex: 1; min-height: 0;
}
.cpx-has-panel .cpx-ide-editor { --panel-w: 280px; }
.cpx-has-panel.cpx-panel-wide .cpx-ide-editor { --panel-w: 46%; }

/* ---------- right-side agent panel (Cursor Agent / VS Code Chat) ---------- */
.cpx-agent-panel {
  display: none; flex-direction: column; min-width: 0; min-height: 0; overflow: hidden;
  border-left: 1px solid var(--border); background: var(--surface-2) !important;
}
.cpx-has-panel .cpx-agent-panel { display: flex; }
.cpx-panel-head {
  display: flex; align-items: center; gap: 8px; height: 38px; flex: none; padding: 0 12px;
  border-bottom: 1px solid var(--border); background: rgba(0,0,0,.18) !important;
  font-family: var(--mono) !important; font-size: 10.5px; letter-spacing: .1em; color: var(--w80) !important;
}
.cpx-panel-pill {
  margin-left: auto; font-family: var(--body) !important; font-size: 11px; letter-spacing: 0;
  color: var(--w55) !important; border: 1px solid var(--border-2); border-radius: 5px; padding: 2px 8px; white-space: nowrap;
}
.cpx-panel-body { flex: 1; min-height: 0; min-width: 0; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; }
.cpx-panel-log { font-family: var(--mono) !important; font-size: 12.5px; line-height: 1.9; color: var(--w55) !important; }
.cpx-panel-log:not(:empty) { margin-top: 12px; }

/* ask machinery restyled when it lives in the panel: picker rows become
   suggestion cards, the chosen prompt becomes a sent-message card (wraps fully,
   no > symbol), TUI caret/number hidden. */
.cpx-agent-panel .cpx-ask-label { font-family: var(--body) !important; font-size: 13px; font-weight: 600; color: var(--w80) !important; }
.cpx-agent-panel .cpx-prompt-menu { gap: 8px; }
.cpx-agent-panel .cpx-prompt-opt {
  border: 1px solid var(--border); border-radius: 9px; background: rgba(255,255,255,.03);
  font-family: var(--body) !important; font-size: 13.5px; line-height: 1.45; padding: 10px 12px;
}
.cpx-agent-panel .cpx-prompt-opt:hover, .cpx-agent-panel .cpx-prompt-opt:focus-visible, .cpx-agent-panel .cpx-prompt-opt.is-active {
  border-color: var(--border-2);
}
.cpx-agent-panel .cpx-opt-caret, .cpx-agent-panel .cpx-opt-num { display: none; }
.cpx-agent-panel .cpx-ask-hint { font-family: var(--body) !important; }
.cpx-agent-panel .cpx-cmdline { flex-wrap: wrap; }
.cpx-agent-panel .cpx-cmd-prompt { display: none; }
.cpx-embed .cpx-agent-panel .cpx-prompt-text { font-family: var(--body) !important; font-size: 13.5px; line-height: 1.55; flex: 1 1 100%; }
.cpx-embed .cpx-agent-panel .cpx-cmdline .cpx-copy { margin-top: 8px; }
.cpx-tree {
  border-right: 1px solid var(--border); background: var(--surface-2) !important; padding: 14px 0;
  font-family: var(--body) !important; overflow-y: auto;
}
.cpx-tree-h { font-family: var(--mono) !important; font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--w35) !important; padding: 0 16px 10px; }
.cpx-tree-item {
  display: flex; align-items: center; gap: 9px; padding: 6px 16px; font-size: 13px; color: var(--w55) !important;
  cursor: pointer; opacity: 0; transform: translateX(-6px); transition: background .15s, color .15s;
}
.cpx-tree-item.is-shown { opacity: 1; transform: none; }
.cpx-tree-item.is-active { background: color-mix(in srgb, var(--tool-accent) 12%, transparent) !important; color: var(--white) !important; box-shadow: inset 2px 0 0 var(--tool-accent); }
.cpx-tree-item:hover { color: var(--w80) !important; }
.cpx-tree-item .cpx-file-ic { width: 15px; height: 15px; flex: none; color: var(--tool-accent); }
.cpx-tree-item .cpx-file-badge { margin-left: auto; font-family: var(--mono); font-size: 10.5px; font-weight: 600; color: #73c991 !important; opacity: 0; }
.cpx-tree-item.is-untracked > span:first-of-type { color: #73c991 !important; }
.cpx-tree-item.is-shown .cpx-file-badge { opacity: 1; transition: opacity .3s .2s; }

.cpx-editor-wrap { display: flex; flex-direction: column; min-width: 0; }
.cpx-tabbar { display: flex; align-items: center; gap: 2px; height: 38px; border-bottom: 1px solid var(--border); background: var(--surface-2) !important; padding: 0 8px; overflow-x: auto; }
.cpx-etab { display: inline-flex; align-items: center; gap: 8px; font-family: var(--mono) !important; font-size: 12px; color: var(--w35) !important; padding: 8px 12px; border-radius: 6px 6px 0 0; cursor: pointer; white-space: nowrap; }
.cpx-etab .cpx-etab-x { font-size: 13px; line-height: 1; color: var(--w35) !important; opacity: 0; transition: opacity .12s; }
.cpx-etab.is-active .cpx-etab-x, .cpx-etab:hover .cpx-etab-x { opacity: 1; }
.cpx-etab.is-active { color: var(--white) !important; background: var(--bg) !important; box-shadow: inset 0 -2px 0 var(--tool-accent); }

.cpx-code { flex: 1; padding: 18px 20px; overflow: auto; background: var(--bg) !important; position: relative; min-height: 120px; }
.cpx-code pre { margin: 0; font-family: var(--mono) !important; font-size: 12.5px; line-height: 1.75; color: var(--w80) !important; white-space: pre; }
.cpx-code pre { counter-reset: cpxln; }
.cpx-code .ln { display: block; }
.cpx-code .ln::before {
  counter-increment: cpxln; content: counter(cpxln);
  display: inline-block; width: 2ch; margin-right: 18px; text-align: right;
  color: rgba(255,255,255,.16); user-select: none;
}
.cpx-code .kw { color: #6ea8ff; } .cpx-code .st { color: #8fd9b6; } .cpx-code .fn { color: #e3b34a; }
.cpx-code .cm { color: var(--w35); } .cpx-code .ty { color: #79c0ff; } .cpx-code .n { color: #d99a63; }
.cpx-code-empty { color: var(--w35) !important; font-family: var(--mono) !important; font-size: 12.5px; }
.cpx-caret { display: inline-block; width: 8px; height: 15px; background: var(--term-accent, var(--tool-accent)); vertical-align: text-bottom; animation: cpxBlink 1s step-end infinite; }
@keyframes cpxBlink { 0%,100% { opacity: 1; } 50% { opacity: 0; } }

/* proof annotation callouts — VS Code hover/lint-overlay treatment.
   Amber accent (--cpx-annot) so the production-ready checks read as "attention here",
   distinct from the mint success chips used elsewhere on the page. */
.cpx-scope { --cpx-annot: #e3b34a; --cpx-annot-bg: #2a2416; }
/* squiggle marker on the annotated code line (the VS Code "there's something here" cue).
   Annotated lines reserve vertical clearance so a wrapped tooltip stays within its own
   line and never bleeds into the neighbouring line's tooltip. */
.cpx-code .ln.has-annot {
  background:
    linear-gradient(90deg, rgba(227,179,74,.07), rgba(227,179,74,0) 62%);
  box-shadow: inset 2px 0 0 var(--cpx-annot);
  border-radius: 0 3px 3px 0;
  position: relative; padding: 5px 0; margin: 3px 0;
}
.cpx-annot {
  display: inline-flex; align-items: center; gap: 8px; margin-left: 16px; position: relative; top: -1px;
  font-family: var(--body) !important; font-size: 12px; line-height: 1.25; font-weight: 500;
  color: #f4d488 !important;
  background: var(--cpx-annot-bg);
  border: 1px solid rgba(227,179,74,.42); border-left: 3px solid var(--cpx-annot);
  border-radius: 7px; padding: 5px 11px; vertical-align: middle; white-space: normal; max-width: 40ch;
  box-shadow: 0 6px 18px rgba(0,0,0,.45), 0 0 0 1px rgba(0,0,0,.25);
  opacity: 0; transform: translateX(-6px); transition: opacity .35s, transform .35s;
}
.cpx-annot.is-on { opacity: 1; transform: none; }
/* the agent panel narrows the editor — annotations drop below their code line
   (block, pointer flipped upward) so they can never hide behind the panel edge */
.cpx-has-panel .cpx-annot { display: flex; width: fit-content; margin: 7px 0 2px 3ch; top: 0; }
.cpx-has-panel .cpx-annot::before {
  left: 16px; top: -6px; transform: rotate(135deg);
}
/* little pointer connecting the tooltip back to the code, like VS Code's overlay tail */
.cpx-annot::before {
  content: ""; position: absolute; left: -6px; top: 50%; width: 10px; height: 10px;
  transform: translateY(-50%) rotate(45deg);
  background: var(--cpx-annot-bg);
  border-left: 1px solid rgba(227,179,74,.42); border-bottom: 1px solid rgba(227,179,74,.42);
}
.cpx-annot .cpx-check { width: 13px; height: 13px; flex: none; color: var(--cpx-annot); }

/* ---------- terminal panel (resizable: tall while asking, shrinks on run) ---------- */
.cpx-terminal {
  border-top: 1px solid var(--border-2); background: var(--surface-2) !important; display: flex; flex-direction: column;
  flex: 0 0 auto; height: 440px; transition: height .5s cubic-bezier(.4,0,.2,1); overflow: hidden;
}
.cpx-terminal.is-running { height: 160px; }
.cpx-term-head { display: flex; align-items: center; height: 32px; padding: 0 12px; border-bottom: 1px solid var(--border); background: rgba(0,0,0,.25) !important; }
.cpx-term-tabs { display: inline-flex; gap: 16px; }
.cpx-term-tab { font-family: var(--mono) !important; font-size: 10.5px; letter-spacing: .08em; color: var(--w35) !important; padding: 8px 0; }
.cpx-term-tab.is-active { color: var(--w80) !important; box-shadow: inset 0 -2px 0 var(--tool-accent); }
/* terminal process list (right side of the panel header, VS Code-real) */
.cpx-term-procs { margin-left: auto; display: inline-flex; align-items: center; gap: 12px; font-family: var(--mono) !important; font-size: 11px; color: var(--w35) !important; }
.cpx-proc { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.cpx-proc-star { color: #d97757 !important; font-weight: 700; }
.cpx-proc-claude { display: none; color: var(--w80) !important; }
.cpx-ide-claude .cpx-proc-claude { display: inline-flex; }
.cpx-ide-claude .cpx-proc-shell { color: var(--w35) !important; }
.cpx-proc-shell { color: var(--w80) !important; }
.cpx-proc-ic { width: 13px; height: 13px; opacity: .45; }
.cpx-term-body { flex: 1; min-height: 0; overflow: auto; padding: 14px 16px; font-family: var(--mono) !important; display: flex; flex-direction: column; }

/* ask state (menu, or chosen-prompt command line) */
.cpx-term-ask { display: block; }
.cpx-terminal.is-running .cpx-term-ask { display: none; }
/* building: keep the chosen-prompt command line pinned in view while code streams;
   the file-creation log scrolls below it (overrides is-running's hide). */
.cpx-terminal.cpx-building .cpx-term-ask { display: block; }
.cpx-terminal.cpx-building .cpx-ask-menu { display: none; }
.cpx-terminal.cpx-building .cpx-term-body { justify-content: flex-start; }
.cpx-terminal.cpx-building .cpx-ask-cmd { margin-top: 0; }
.cpx-terminal.cpx-building .cpx-term-log { margin-top: 10px; }
/* install phase — the MCP command "runs" here before prompt selection. Terminal
   stays at its expanded height (editor empty above); ask hidden, log shown. */
.cpx-terminal.cpx-installing .cpx-term-ask { display: none; }
.cpx-terminal.cpx-installing .cpx-term-log { display: block; }
/* menu-ready — install finished: keep the install log visible AND show the prompt
   menu BELOW it (DOM order is ask-then-log, so flex-order flips them), so it reads
   as "plugin installed → now pick what to build". Terminal scrolls if tall. */
.cpx-terminal.cpx-menu-ready .cpx-term-log { display: block; order: 0; }
.cpx-terminal.cpx-menu-ready .cpx-term-ask { display: block; order: 1; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border); }
.cpx-terminal.cpx-menu-ready .cpx-ask-label { margin-top: 0; }
/* in the run state, pin the live log to the bottom so the panel visibly
   collapses from the top down (top edge descends toward the status bar). */
.cpx-terminal.is-running .cpx-term-body { justify-content: flex-end; }
.cpx-cmdline { display: flex; align-items: center; gap: 10px; margin-top: 14px; background: rgba(0,0,0,.3) !important; border: 1px solid var(--border); border-radius: 8px; padding: 11px 12px; }
.cpx-cmd-prompt { color: var(--term-accent, var(--tool-accent)) !important; font-family: var(--mono) !important; font-size: 13px; font-weight: 700; }
.cpx-prompt-text { flex: 1; min-width: 0; font-family: var(--mono) !important; font-size: 12.5px; line-height: 1.5; color: var(--w80) !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cpx-run[hidden] { display: none !important; }   /* dropped from the flow (Sohaib) */
.cpx-run {
  font-family: var(--display) !important; font-weight: 600; font-size: 12.5px; cursor: pointer; flex: none;
  background: var(--tool-accent) !important; color: #fff !important; border: none; border-radius: 8px; padding: 8px 15px;
  display: inline-flex; align-items: center; gap: 7px; transition: filter .16s, transform .16s;
}
.cpx-run:hover { filter: brightness(1.1); transform: translateY(-1px); }
.cpx-run[disabled] { opacity: .5; cursor: default; transform: none; filter: none; }

/* run state (live log) — larger so the install command + status draw attention */
.cpx-term-log { display: none; font-size: 14px; line-height: 1.8; color: var(--w55) !important; }
.cpx-terminal.is-running .cpx-term-log { display: block; }
.cpx-log-line { opacity: 0; transform: translateY(3px); transition: opacity .25s, transform .25s; }
.cpx-log-line.is-on { opacity: 1; transform: none; }
.cpx-log-line .cpx-log-cmd { color: var(--term-accent, var(--tool-accent)) !important; }
.cpx-log-line .cpx-log-ok { color: var(--mint) !important; }
.cpx-log-line .cpx-log-dim { color: var(--w35) !important; }

/* ---------- status bar ---------- */
.cpx-statusbar {
  display: flex; align-items: center; justify-content: space-between; height: 26px; padding: 0 12px;
  background: var(--tool-accent) !important; color: rgba(255,255,255,.92) !important;
  font-family: var(--mono) !important; font-size: 10.5px; flex: none;
}
.cpx-sb-left, .cpx-sb-right { display: inline-flex; align-items: center; gap: 14px; }
.cpx-sb-item { display: inline-flex; align-items: center; gap: 5px; }

/* =======================================================================
   Per-tool identity
   ======================================================================= */
/* VS Code — blue; remote indicator chip shown */
.cpx-ide-vscode { --tool-accent: #0078d4; --term-accent: #0078d4; }
/* Cursor — monochrome/dark; status bar goes dark instead of accent-filled */
.cpx-ide-cursor { --tool-accent: #d0d3da; --term-accent: #d0d3da; }
.cpx-ide-cursor .cpx-statusbar { background: #0a0a0a !important; color: var(--w55) !important; border-top: 1px solid var(--border); }
.cpx-ide-cursor .cpx-run { color: #05070d !important; }
/* Claude Code — the window is VS Code (blue chrome); Claude's coral lives ONLY
   inside the integrated terminal (--term-accent), where the CLI actually runs */
.cpx-ide-claude { --tool-accent: #0078d4; --term-accent: #d97757; }

/* status-bar identity chips: >< remote indicator (VS Code windows), Cursor Tab */
.cpx-sb-remote {
  display: none; align-items: center; height: 26px; padding: 0 9px; margin-left: -12px;
  background: rgba(0,0,0,.22) !important; font-weight: 700; letter-spacing: -.08em;
}
.cpx-ide-vscode .cpx-sb-remote, .cpx-ide-claude .cpx-sb-remote { display: inline-flex; }
.cpx-sb-cursor-tab { display: none; }
.cpx-ide-cursor .cpx-sb-cursor-tab { display: inline-flex; }
.cpx-sb-ic { width: 11px; height: 11px; }

/* ---------- Claude Code TUI cues (terminal only) ---------- */
/* startup banner — Claude Code v2's opener: the orange block-glyph logo beside
   version, model, and cwd lines (replaces the old boxed welcome) */
.cpx-tui-banner { display: flex; align-items: center; gap: 14px; margin: 10px 0 4px; }
.cpx-tui-banner .cpx-tui-logo {
  white-space: pre; flex: none; color: #d97757 !important; font-weight: 700;
  font-size: 12px; line-height: 1.2;
}
.cpx-tui-banner .cpx-tui-bt { min-width: 0; line-height: 1.5; }
.cpx-tui-banner .cpx-tui-b1 { display: block; color: var(--white) !important; font-weight: 700; }
.cpx-tui-banner .cpx-tui-b2 { display: block; color: var(--w35) !important; }
/* input box — Claude Code's signature rounded prompt row (dim grey border, like
   the real one; coral stays on the ✳ marks) */
.cpx-tui-input {
  display: flex; align-items: baseline; gap: 9px; margin-top: 10px; padding: 9px 12px;
  border: 1px solid rgba(255,255,255,.28); border-radius: 8px; min-width: 0;
}
.cpx-tui-input .cpx-tui-gt { color: var(--w80) !important; font-weight: 700; flex: none; }
.cpx-tui-input .cpx-tui-typed { color: var(--w80) !important; overflow-wrap: anywhere; }
/* footer under the input box: shortcuts hint left, mode indicator right */
.cpx-tui-hint { display: flex; justify-content: space-between; gap: 12px; color: var(--w35) !important; font-size: 11.5px; margin-top: 6px; padding: 0 3px; }
.cpx-tui-hint .cpx-tui-mode { text-align: right; }
/* transcript lines: ⏺ tool call + ⎿ result, working spinner */
.cpx-log-line .cpx-log-tool { color: var(--w80) !important; }
.cpx-log-line .cpx-tool-dot { color: var(--mint) !important; }
.cpx-log-line .cpx-log-result { display: block; color: var(--w35) !important; padding-left: 17px; }
/* file-content preview under a ⎿ result + the "+N lines" expand hint */
.cpx-log-line .cpx-log-preview { display: block; color: rgba(255,255,255,.28) !important; padding-left: 34px; overflow-wrap: anywhere; }
.cpx-tui-work .cpx-work-star { display: inline-block; min-width: 1.2ch; color: #d97757 !important; font-weight: 700; animation: cpxStarPulse 1.1s ease-in-out infinite; }
.cpx-tui-work .cpx-work-word { color: var(--w80) !important; }
.cpx-tui-work .cpx-work-dim { color: var(--w35) !important; }
@keyframes cpxStarPulse { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .45; transform: scale(.86); } }
/* numbered TUI select rows (Claude terminal only; hidden in the agent panel) */
.cpx-opt-num { flex: none; color: var(--w35) !important; }

/* prompt cards — the "what should I build?" choice (replaces tiny chips) */
/* ---- terminal prompt menu (TUI: hover-to-select lines, mouse-driven) ---- */
.cpx-ask-label { font-family: var(--mono) !important; font-weight: 600; font-size: 14px; color: var(--w80) !important; margin: 0 0 12px; }
.cpx-ask-hint { font-family: var(--mono) !important; font-size: 11.5px; color: var(--w35) !important; margin: 12px 0 0; }
.cpx-prompt-menu { display: flex; flex-direction: column; gap: 2px; }
/* each line reads as a plain terminal row until hovered; then caret + full-width bar */
.cpx-prompt-opt {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; cursor: pointer;
  font-family: var(--mono) !important; font-size: 15px; line-height: 1.5; color: var(--w55) !important;
  background: transparent; border: 0; border-radius: 7px; padding: 9px 12px;
  transition: background .12s, color .12s;
}
.cpx-opt-caret { flex: none; width: 12px; color: var(--term-accent, var(--tool-accent)) !important; opacity: 0; transition: opacity .12s; font-weight: 700; }
.cpx-prompt-opt:hover, .cpx-prompt-opt:focus-visible, .cpx-prompt-opt.is-active {
  background: color-mix(in srgb, var(--term-accent, var(--tool-accent)) 16%, transparent);
  color: var(--white) !important; outline: none;
}
.cpx-prompt-opt:hover .cpx-opt-caret, .cpx-prompt-opt:focus-visible .cpx-opt-caret, .cpx-prompt-opt.is-active .cpx-opt-caret { opacity: 1; }
/* phase toggle: menu vs the chosen-prompt command line */
.cpx-ask-cmd[hidden], .cpx-ask-menu[hidden] { display: none !important; }

/* ---- footer strip below stage: restart control ---- */
.cpx-foot { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; margin-top: 22px; }
.cpx-foot-cta { display: inline-flex; align-items: center; gap: 16px; }
.cpx-restart { font-family: var(--body) !important; font-size: 12.5px; cursor: pointer; background: none; border: none; color: var(--w35) !important; display: inline-flex; align-items: center; gap: 6px; }
.cpx-restart:hover { color: var(--w80) !important; }

/* Floating post-build CTA — appears bottom-center of the stage once the build finishes.
   Anchored inside .cpx-stage (position:relative), so it never blocks the editor or terminal:
   the chip itself takes pointer events; nothing else is covered. */
.cpx-cta-chip {
  /* just above the collapsed terminal (160px) + status bar (26px), so it never
     covers the Claude Code input box or the transcript */
  position: absolute; left: 50%; bottom: 204px; z-index: 6;
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--body) !important; font-size: 14.5px; font-weight: 700; letter-spacing: -.01em;
  color: #fff !important; background: var(--blue); text-decoration: none;
  padding: 13px 22px; border-radius: 999px; border: 1px solid rgba(255,255,255,.22);
  box-shadow: 0 14px 40px rgba(12,127,242,.5), 0 2px 10px rgba(0,0,0,.45);
  opacity: 0; transform: translate(-50%, 16px); pointer-events: none;
  transition: opacity .45s ease, transform .45s cubic-bezier(.2,.8,.2,1), box-shadow .16s ease;
}
.cpx-cta-chip.is-shown { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
/* a recurring glow so the CTA keeps drawing the eye without nagging */
.cpx-cta-chip.is-shown { animation: cpxChipPulse 2.4s ease-in-out .4s infinite; }
.cpx-cta-chip:hover { filter: brightness(1.08); box-shadow: 0 18px 48px rgba(12,127,242,.62), 0 0 0 4px rgba(12,127,242,.22); }
.cpx-cta-chip .cpx-chip-arrow { transition: transform .16s ease; }
.cpx-cta-chip:hover .cpx-chip-arrow { transform: translateX(3px); }
@keyframes cpxChipPulse {
  0%, 100% { box-shadow: 0 14px 40px rgba(12,127,242,.5), 0 0 0 0 rgba(12,127,242,.6); }
  50% { box-shadow: 0 14px 40px rgba(12,127,242,.5), 0 0 0 22px rgba(12,127,242,0); }
}
@media (prefers-reduced-motion: reduce) {
  .cpx-cta-chip { transition: opacity .001s; transform: translate(-50%, 0); }
  .cpx-cta-chip.is-shown { animation: none; transform: translate(-50%, 0); }
}

/* ---- responsive ---- */
@media (max-width: 780px) {
  .cpx-scope { padding: 48px 16px 64px; }
  .cpx-tools { grid-template-columns: 1fr; }
  .cpx-ide-editor { grid-template-columns: 1fr; }
  .cpx-abar { display: none; }
  .cpx-term-tab:first-child, .cpx-term-tab:last-child { display: none; }  /* PROBLEMS, PORTS */
  .cpx-proc-ic { display: none; }
  .cpx-sb-xtra { display: none !important; }
  .cpx-agent-panel { border-left: none; border-top: 1px solid var(--border); max-height: 280px; }
  .cpx-terminal { height: 300px; }
  .cpx-terminal.is-running { height: 120px; }
  .cpx-tree { border-right: none; border-bottom: 1px solid var(--border); display: flex; gap: 4px; overflow-x: auto; padding: 10px; }
  .cpx-tree-h { display: none; }
  .cpx-tree-item { padding: 6px 10px; white-space: nowrap; }
  .cpx-annot { display: none; } /* annotations move to agent panel note on mobile */
  .cpx-code .ln.has-annot { background: none; box-shadow: none; padding: 0; margin: 0; } /* drop the squiggle marker too */
  .cpx-cta-chip { left: 12px; right: 12px; bottom: 156px; transform: translateY(14px); justify-content: center; font-size: 13px; padding: 12px 16px; text-align: center; }
  .cpx-cta-chip.is-shown { transform: translateY(0); }
  .cpx-portal { padding: 24px 18px 28px; }
  .cpx-portal-body { grid-template-columns: 1fr; } /* drop the sidebar on mobile */
  .cpx-side { display: none; }
  .cpx-install-screen { padding: 22px 18px 26px; }
  .cpx-install-screen .cpx-tools { flex-direction: column; }
  .cpx-foot-cta { margin-left: 0; width: 100%; }
}

/* ---- reduced motion: collapse theatrics, keep flow clickable ---- */
@media (prefers-reduced-motion: reduce) {
  .cpx-scope *, .cpx-scope *::before, .cpx-scope *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .cpx-caret { display: none; }
  .cpx-tree-item { opacity: 1 !important; transform: none !important; }
  .cpx-annot { opacity: 1 !important; transform: none !important; }
}

/* ===================================================================
   HubSpot portal-theme override hardening (module port).
   DevTools confirmed the exact culprit rules (all NON-!important, so
   our !important wins regardless of specificity):
     a:hover, a:focus            { color: #3BBA93 }   -> currentColor bleed
     a:hover svg path,
     a:focus svg path            { fill:  #3BBA93 }   -> fills svg paths green
   =================================================================== */

/* Lock the card's own colour so currentColor can't go green (beats a:hover). */
a.tile, a.tile-agent,
a.tile:hover, a.tile:focus, a.tile:active, a.tile:visited,
a.tile-agent:hover, a.tile-agent:focus, a.tile-agent:active{ color:var(--white) !important; }

/* Kill the forced green FILL on every path inside the cards. In these cards
   every <path> is stroke-only EXCEPT the hexagon body — so blank them all,
   then restore just the hexagon's subtle fill. */
a.tile svg path,
a.tile:hover svg path,
a.tile:focus svg path{ fill:none !important; }
a.tile svg path[d^="M13 2"],
a.tile:hover svg path[d^="M13 2"],
a.tile:focus svg path[d^="M13 2"]{ fill:rgba(255,255,255,.09) !important; }

/* The fan lines are stroke="currentColor"; drive the stroke directly. */
a.tile .cp-fan .cp-line{ stroke:rgba(255,255,255,.4) !important; fill:none !important; transition:stroke .3s ease !important; }
a.tile:hover .cp-fan .cp-line{ stroke:rgba(12,127,242,.95) !important; }

/* §7 "npx skills" copy icon: lock the button colour AND force the icon to
   draw with stroke=currentColor / fill:none so the theme can't hide it. */
.skill-cmd .skill-copy{ color:var(--white-35) !important; }
.skill-cmd .skill-copy:hover{ color:var(--white-80) !important; }
.skill-cmd .skill-copy.is-copied{ color:var(--blue-alt) !important; }
.skill-cmd .skill-copy svg{ color:inherit !important; }
.skill-cmd .skill-copy svg rect,
.skill-cmd .skill-copy svg path{ stroke:currentColor !important; fill:none !important; }

/* §4.5 feature rail: transparent + no border/outline on hover/active (keep top hairline + keyboard focus). */
.eng-card .pf-rail .pf-item,
.eng-card .pf-rail .pf-item:hover,
.eng-card .pf-rail .pf-item:focus,
.eng-card .pf-rail .pf-item:active,
.eng-card .pf-rail .pf-item.active{
  background:transparent !important; box-shadow:none !important;
  border-top:1px solid var(--border-soft) !important;
  border-right:0 !important; border-bottom:0 !important; border-left:0 !important;
  border-radius:0 !important; outline:none !important;
}
.eng-card .pf-rail .pf-item:first-child{ border-top:0 !important; }
.eng-card .pf-rail .pf-item:focus-visible{ outline:2px solid var(--blue) !important; outline-offset:2px !important; }


/* ===================================================================
   §7 copy icon — Rich-Text-proof rebuild.
   The inline <svg> icons inside .skill-copy get stripped by the Rich
   Text module (same sanitiser that ate <code data-install-cmd>), so the
   button rendered empty. Draw the icon from CSS instead — it lives in
   Head HTML and can't be stripped. Hide any inline svg that survives so
   we never double up.
   =================================================================== */
.skill-cmd .skill-copy svg{ display:none !important; }
.skill-cmd .skill-copy{
  background-color:rgba(255,255,255,.03) !important;
  background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2215%22%20height%3D%2215%22%20viewBox%3D%220%200%2016%2016%22%20fill%3D%22none%22%3E%3Crect%20x%3D%225.5%22%20y%3D%225.5%22%20width%3D%228%22%20height%3D%228%22%20rx%3D%221.6%22%20stroke%3D%22%23a7adba%22%20stroke-width%3D%221.4%22%2F%3E%3Cpath%20d%3D%22M3.2%2010.5H2.6A1.1%201.1%200%200%201%201.5%209.4V2.6A1.1%201.1%200%200%201%202.6%201.5h6.8a1.1%201.1%200%200%201%201.1%201.1v.6%22%20stroke%3D%22%23a7adba%22%20stroke-width%3D%221.4%22%2F%3E%3C%2Fsvg%3E") !important;
  background-repeat:no-repeat !important;
  background-position:center !important;
  background-size:15px 15px !important;
}
.skill-cmd .skill-copy:hover{ background-color:rgba(255,255,255,.06) !important; }
.skill-cmd .skill-copy.is-copied{
  background-color:rgba(12,127,242,.10) !important;
  background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2215%22%20height%3D%2215%22%20viewBox%3D%220%200%2016%2016%22%20fill%3D%22none%22%3E%3Cpath%20d%3D%22M3%208.5%20L6.5%2012%20L13%204%22%20stroke%3D%22%234F7FFF%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E") !important;
}

/* ---- SDK code block: syntax colours ------------------------------------
   The portal theme sets a colour on code/pre that overrides the token
   spans, flattening the sample to one colour. Re-assert with !important. */
.eng-term-body .lang-code .tk-c{ color:#5b6a86 !important; font-style:italic !important; }
.eng-term-body .lang-code .tk-k{ color:#4f8fff !important; }
.eng-term-body .lang-code .tk-s{ color:#4ec9a8 !important; }
.eng-term-body .lang-code .tk-n{ color:#d99a63 !important; }
.eng-term-body .lang-code .tk-t{ color:#57b6f5 !important; }
.eng-term-body .lang-code .tk-f{ color:#c9a6f2 !important; }
.eng-term-body .lang-code,
.eng-term-body .lang-code code{ color:#d7dbe6 !important; }   /* base (non-token) code text */

/* ---- SDK code block: show ONLY the active language×feature block ---------
   The theme forces a display on <pre>, overriding .lang-code{display:none},
   so all blocks stay stacked and clicking a tab appears to do nothing (you
   keep seeing the first block). Lock the toggle with !important. */
.eng-term-body .lang-code{ display:none !important; }
.eng-term-body .lang-code.active{ display:block !important; }