/* ══════════════════════════════════════════════════════════════
   pages.css — homepage additions + the subpage kit
   Loaded AFTER styles.css/overrides.css on every route. Everything
   here builds on the existing tokens (--bg, --ink, --line, --blue,
   --dev-* screen tokens) so light/dark re-theme for free.
   ══════════════════════════════════════════════════════════════ */

/* ── Homepage: hero platform note ─────────────────────────────── */
.hero-note{
  margin-top:18px;
  font-size:.83rem; font-weight:600; letter-spacing:.01em;
  color:var(--mut);
}
[data-theme="dark"] .hero-note{color:#8d95a8}

/* ── Homepage: miniature app-window demos (QA + parallel work) ───
   Faithful miniatures of the REAL ClodexIDE renderer: chassis metal
   (#2c2c2e→#19191b), a recessed term-col chat panel, glassy user
   bubbles (15/15/7/15), verb-gray → target-bright tool lines, dark
   inset wells, the glass composer, and the app's desaturated LED
   palette (--led-ok #8fae96, --led-busy #c9aa6e, --led-err #c97b84).
   Font: Hanken Grotesk — the app's own. Fixed dark, both themes. ── */
:where(a,button,summary):focus-visible{
  outline:2px solid var(--blue);
  outline-offset:3px;
}

:root{
  --motion-frame-bg:#09090b;
  --motion-frame-radius:19px;
  --motion-frame-border:rgba(255,255,255,.08);
}
.remotion-demo{
  width:100%; aspect-ratio:4/3; margin:0;
  overflow:hidden; border-radius:var(--motion-frame-radius);
  background:var(--motion-frame-bg);
  border:1px solid var(--motion-frame-border);
  box-shadow:0 24px 60px -40px rgba(0,0,0,.72);
  user-select:none; -webkit-user-select:none;
}
.remotion-video{
  width:100%; height:100%; display:block; object-fit:cover;
  pointer-events:none; -webkit-user-drag:none;
}
.mini{
  width:100%;
  aspect-ratio:4/3.1;   /* same footprint as the bx/dz demo windows */
  display:flex; flex-direction:column;
  background:linear-gradient(180deg,#2c2c2e,#232325 40%,#19191b);
  border-radius:19px; padding:9px;
  font-family:"Hanken Grotesk",var(--sans);
  user-select:none; -webkit-user-select:none;
}
.mini > .mterm, .mini > .mws{flex:1; min-height:0}
.mws .mterm{min-height:0}
.mini-top{display:flex; align-items:center; gap:8px; padding:5px 7px 10px}
.mini-dots{display:flex; gap:5px}
.mini-dots i{width:8px; height:8px; border-radius:50%}
.mini-dots i:first-child{background:#ff6159}
.mini-dots i:nth-child(2){background:#ffbd2e}
.mini-dots i:nth-child(3){background:#28c840}
.mini-fill{flex:1}
.msk{display:block; height:5px; border-radius:3px; background:#2f3033; flex:none}
.msk-hi{background:#3a3b3f}
.msk-m{margin-left:auto; opacity:.6}

/* the recessed chat panel — the app's .term-col */
.mterm{
  flex:1; min-width:0;
  display:flex; flex-direction:column;
  border-radius:14px; overflow:hidden;
  background:rgba(0,0,0,.22);
  box-shadow:inset 0 1px 4px rgba(0,0,0,.35), inset 0 -1px 0 rgba(255,255,255,.025);
}
.mws{display:grid; grid-template-columns:1fr 1fr; gap:8px; align-items:stretch}

/* pane header — the app's .term-head: title left, provider centered
   white, Chat/Terminal segment right */
.mth{
  flex:none; height:34px; position:relative;
  display:flex; align-items:center; gap:8px;
  padding:0 11px;
  border-bottom:1px solid rgba(255,255,255,.13);
}
.mth-title{font-weight:500; font-size:.58rem; color:#9d9e9a; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.mth-model{font-weight:600; font-size:.58rem; color:#e9eae6; letter-spacing:.02em; white-space:nowrap}
.mth-model.is-c{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%)}
.mws .mth-model{margin-left:auto}
.mth-seg{
  margin-left:auto; display:inline-flex; gap:2px; padding:2px; flex:none;
  border-radius:999px; background:rgba(0,0,0,.3);
  box-shadow:inset 0 1px 3px rgba(0,0,0,.35);
}
.mth-seg i{font-style:normal; font-weight:600; font-size:.42rem; color:#626360; padding:2px 7px; border-radius:999px}
.mth-seg i:empty{width:34px; height:15px; padding:0}
.mth-seg i.on{background:rgba(255,255,255,.14); color:#e9eae6}

/* messages column — like the app, the conversation lives in a centered
   MAX-WIDTH column, it never runs edge to edge */
.mmsgs{flex:1; display:flex; flex-direction:column; gap:9px; padding:12px 12px 8px}
.qa-loop .mmsgs{width:100%; max-width:76%; margin-inline:auto}
.qa-loop .mcomposer{width:76%; margin-left:auto; margin-right:auto}
/* the animation wrappers must stay flex columns so bubbles can keep
   their right-side alignment */
.mini-loop .lp{display:flex; flex-direction:column; align-items:stretch; min-width:0}

/* user bubble — glassy, tucked bottom-right, SHRINKS to its text and
   sits on the RIGHT, exactly the app's */
.mbub{
  align-self:flex-end; max-width:78%;
  font-weight:460; font-size:.66rem; line-height:1.5; color:#e2e3df;
  background:linear-gradient(180deg,rgba(255,255,255,.075),rgba(255,255,255,.05));
  border:1px solid rgba(255,255,255,.09);
  border-radius:12px 12px 5px 12px;
  padding:7px 12px;
  box-shadow:0 8px 22px -12px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.07);
}
.mbub-sk{display:flex; flex-direction:column; gap:4px; min-width:56%; padding:8px 10px}

/* tool status line — the app's .tg-status: gray verb, bright target,
   faint meta; the verb shimmers while running */
.mtg{display:flex; align-items:baseline; gap:6px; font-weight:600; font-size:.62rem; white-space:nowrap; min-width:0}
.mtg b{color:#9d9e9a; font-weight:600; flex:none}
.mtg-t{color:#e2e3df; overflow:hidden; text-overflow:ellipsis}
.mtg-m{color:#626360; font-weight:500; flex:none}
.mtg-ok{color:#8fae96; font-weight:600; flex:none}
.mtg b.run{
  background:linear-gradient(90deg,rgba(157,158,154,.45),rgba(255,255,255,.95),rgba(157,158,154,.45));
  background-size:200% auto;
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
  animation:mshimmer 1.8s linear infinite;
}
@keyframes mshimmer{to{background-position:-200% center}}
@media (prefers-reduced-motion:reduce){.mtg b.run{animation:none; -webkit-text-fill-color:#c9c9c5; color:#c9c9c5; background:none}}

/* assistant reply = plain text (no box), skeleton at mini scale */
.mreply{display:flex; flex-direction:column; gap:6px; padding:1px 1px}
.mdone{display:flex; align-items:center; gap:6px; font-weight:600; font-size:.62rem; color:#8fae96}
.mled{flex:none; width:7px; height:7px; border-radius:50%; background:#8fae96; box-shadow:0 0 0 2px rgba(143,174,150,.14)}

/* dark inset well — the app's .now-well / gen cells */
.mwell{
  align-self:stretch; padding:10px 11px; border-radius:12px;
  background:rgba(0,0,0,.3);
  box-shadow:inset 0 1px 3px rgba(0,0,0,.45), inset 0 -1px 0 rgba(255,255,255,.03);
}
.mwell-h{display:flex; align-items:baseline; gap:6px; margin-bottom:8px; font-weight:600; font-size:.56rem; color:#9d9e9a}
.mnow-p{font-weight:460; font-size:.62rem; line-height:1.45; color:#e2e3df; margin:1px 0 5px}
.mstop{
  margin-left:auto; flex:none; align-self:center;
  width:14px; height:14px; border-radius:5px;
  display:grid; place-items:center;
  font-style:normal; font-weight:600; font-size:.5rem; line-height:1; color:#c97b84;
  background:rgba(201,123,132,.1); border:1px solid rgba(201,123,132,.3);
}

/* composer — EXACTLY the bx demo's chatbar: dark inset input where the
   message TYPES with a caret, skeleton chips, blue model chip, blue
   ring + blue send dot */
.mcomposer{
  flex:none; margin:6px 9px 9px;
  display:flex; flex-direction:column; gap:5px;
  padding:6px 7px;
  background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.032));
  border:1px solid rgba(255,255,255,.1);
  border-radius:11px 11px 6px 6px;
  box-shadow:0 12px 30px -14px rgba(0,0,0,.75), inset 0 1px 0 rgba(255,255,255,.07);
}
.mcin{
  position:relative; display:flex; align-items:center;
  min-height:28px; padding:6px 9px;
  background:rgba(0,0,0,.25);
  border:1px solid rgba(255,255,255,.06); border-radius:8px;
  box-shadow:inset 0 1px 3px rgba(0,0,0,.3);
}
.mph{
  position:absolute; left:9px; top:50%; transform:translateY(-50%);
  font-size:.58rem; font-weight:500; color:#5c5d62; white-space:nowrap;
}
.mtype{
  font-size:.58rem; font-weight:500; color:#c8c9c5;
  white-space:nowrap; overflow:hidden; width:0; flex:none;
}
.mcaret{width:1.5px; height:.85em; background:#7fb0ff; flex:none; opacity:0}
.mcrow{display:flex; align-items:center; gap:5px}
.chip-g{
  flex:none; display:flex; align-items:center; width:16%;
  background:#232326; border:1px solid rgba(255,255,255,.07);
  border-radius:999px; padding:5px 9px;
}
.chip-g .msk{width:100%; height:4px}
.chip-b{
  flex:none; display:flex; align-items:center;
  background:rgba(61,148,255,.14); border:1px solid rgba(61,148,255,.3);
  border-radius:999px; padding:5px 10px;
}
.chip-b .msk{width:6em; height:4px; background:rgba(127,176,255,.4)}
.mring{
  flex:none; width:11px; height:11px; border-radius:50%;
  background:conic-gradient(#3d94ff 0 62%, #2b2c30 62% 100%);
  -webkit-mask:radial-gradient(farthest-side,transparent 54%,#000 56%);
  mask:radial-gradient(farthest-side,transparent 54%,#000 56%);
}
.msend{
  flex:none; width:15px; height:15px; border-radius:50%;
  background:linear-gradient(180deg,#55a2ff,#1f74e6);
}

/* the Do-this-now cell — as in the app: a SENT bubble on the right whose
   inside carries the live feed well + a quiet finish stamp */
.mnow{align-self:flex-end; max-width:82%; min-width:56%}
.mfeed{
  margin-top:8px; padding:8px 10px;
  background:rgba(0,0,0,.3); border-radius:9px;
  box-shadow:inset 0 1px 3px rgba(0,0,0,.45), inset 0 -1px 0 rgba(255,255,255,.03);
  display:flex; flex-direction:column; gap:6px;
}
.mstamp{
  display:flex; align-items:center; gap:6px;
  margin-top:7px; font-size:.54rem; font-weight:600; color:#8fae96;
}
.mstamp em{font-style:normal; color:#5c5d62; font-weight:500; margin-left:auto}

/* QA window: light page thumbnails at three viewports — the same light
   skeleton page the bx preview pane uses, sitting in the dark chrome */
.qa-shots{display:flex; gap:7px; align-items:stretch}
.qa-vp{display:flex; flex-direction:column; gap:5px; min-width:0}
.qa-vp.v1{flex:1}
.qa-vp.v2{flex:1.7}
.qa-vp.v3{flex:2.7}
.qa-shot{
  height:92px;
  background:linear-gradient(180deg,#fdfdfe,#f2f4f9);
  border-radius:7px;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.28);
  padding:7px 7px 6px; display:flex; flex-direction:column; gap:4px;
  overflow:hidden;
}
.pk{display:block; height:4px; border-radius:2px; background:#dde2ec; flex:none}
.pk-nav{display:flex; align-items:center; gap:3px; margin-bottom:1px}
.pk-nav .pk-dot{width:5px; height:5px; border-radius:2px; background:var(--grad-ui); flex:none}
.pk-nav .pk{height:3px}
.pk-grow{flex:1 !important}
.pk-hero{height:20px; border-radius:4px; background:#e7ebf4}
.pk-cta{height:6px; width:38%; border-radius:3px; background:var(--grad-ui)}
.pk-cols{display:flex; gap:3px}
.pk-cols .pk{flex:1; height:13px; border-radius:3px; background:#e7ebf4}
.qa-cap{
  display:flex; align-items:center; justify-content:center; gap:5px;
  font-size:.54rem; font-weight:600; color:#85868a;
}
.mini-ok-s{
  flex:none; width:6px; height:6px; border-radius:50%;
  background:#8fae96; box-shadow:0 0 0 2px rgba(143,174,150,.14);
}

/* Workers window: progress lanes */
.wk-prog{
  flex:1; height:4px; min-width:40px;
  border-radius:3px; background:#2b2c30; overflow:hidden;
}
.wk-prog i{display:block; height:100%; border-radius:3px; background:#28c840}
.mini-row.is-done .wk-prog i{background:#4a4b52}
.wk-pct{flex:none; font-size:.48rem; font-weight:600; color:#85868a; min-width:22px; text-align:right}

/* ── looping choreography — pure CSS on an 18s loop, the bx pattern:
      the message TYPES in the composer, sends as a bubble, work unfolds,
      then the WHOLE conversation exits in one quiet fade (no per-item
      fade tails) before the loop restarts ───────────────────────── */
.mini-loop .lp{opacity:0; animation:18s var(--ease) infinite; will-change:opacity,transform}
.mini-loop .mmsgs{animation:18s linear infinite kexit}
.mini-loop .mtype,.mini-loop .mph,.mini-loop .mcaret{animation-duration:18s; animation-iteration-count:infinite}
@keyframes kexit{0%,92%{opacity:1} 96.5%,100%{opacity:0}}

/* QA window — type → send → review → responsive well → states →
   lighthouse → reply → all-clear */
.qa-loop .mtype{animation-name:kqaT; animation-timing-function:steps(35,end)}
.qa-loop .mph{animation-name:kqaPh}
.qa-loop .mcaret{animation-name:kqaCar}
@keyframes kqaT  {0%,3%{width:0} 13%,15.5%{width:16.8em} 16%,100%{width:0}}
@keyframes kqaPh {0%,2.5%{opacity:1} 3.5%,15.9%{opacity:0} 16.5%,100%{opacity:1}}
@keyframes kqaCar{0%,2.5%{opacity:0} 3%,15.8%{opacity:1} 16.2%,100%{opacity:0}}
.qa-loop .lp1{animation-name:kqa1}   .qa-loop .lp2{animation-name:kqa2}
.qa-loop .lp3{animation-name:kqa3}   .qa-loop .lp3a{animation-name:kqa3a}
.qa-loop .lp3b{animation-name:kqa3b} .qa-loop .lp3c{animation-name:kqa3c}
.qa-loop .lp4{animation-name:kqa4}   .qa-loop .lp5{animation-name:kqa5}
.qa-loop .lp5b{animation-name:kqa5b} .qa-loop .lp6{animation-name:kqa6}
.qa-loop .lp7{animation-name:kqa7}
@keyframes kqa1 {0%,16%{opacity:0;transform:translateY(6px)} 19%,100%{opacity:1;transform:none}}
@keyframes kqa2 {0%,23%{opacity:0;transform:translateY(8px)} 27%,100%{opacity:1;transform:none}}
@keyframes kqa3 {0%,31%{opacity:0;transform:translateY(8px)} 35%,100%{opacity:1;transform:none}}
@keyframes kqa3a{0%,36%{opacity:0;transform:translateY(6px)} 40%,100%{opacity:1;transform:none}}
@keyframes kqa3b{0%,39%{opacity:0;transform:translateY(6px)} 43%,100%{opacity:1;transform:none}}
@keyframes kqa3c{0%,42%{opacity:0;transform:translateY(6px)} 46%,100%{opacity:1;transform:none}}
@keyframes kqa4 {0%,50%{opacity:0;transform:translateY(8px)} 54%,100%{opacity:1;transform:none}}
@keyframes kqa5 {0%,57%{opacity:0;transform:translateY(8px)} 61%,100%{opacity:1;transform:none}}
@keyframes kqa5b{0%,63%{opacity:0} 67%,100%{opacity:1}}
@keyframes kqa6 {0%,71%{opacity:0;transform:translateY(8px)} 75%,100%{opacity:1;transform:none}}
@keyframes kqa7 {0%,78%{opacity:0;transform:translateY(8px)} 82%,100%{opacity:1;transform:none}}

/* Parallel window — left pane types twice (the second send IS the
   Do-this-now), the Codex pane splits in and works */
.par-loop .t1{animation-name:kpT1; animation-timing-function:steps(28,end)}
.par-loop .t2{animation-name:kpT2; animation-timing-function:steps(24,end)}
.par-loop .p1 .mph{animation-name:kpPh}
.par-loop .p1 .mcaret{animation-name:kpCar}
.par-loop .t3{animation-name:kpT3; animation-timing-function:steps(23,end)}
.par-loop .p2 .mph{animation-name:kpPh3}
.par-loop .p2 .mcaret{animation-name:kpCar3}
@keyframes kpT1 {0%,2%{width:0} 9%,11%{width:13.5em} 11.5%,100%{width:0}}
@keyframes kpT2 {0%,22%{width:0} 28%,30%{width:11.5em} 30.5%,100%{width:0}}
@keyframes kpPh {0%,1.5%{opacity:1} 2.5%,10.9%{opacity:0} 12%,21.5%{opacity:1} 22.5%,29.9%{opacity:0} 31%,100%{opacity:1}}
@keyframes kpCar{0%,1.5%{opacity:0} 2%,11%{opacity:1} 11.5%,21.5%{opacity:0} 22%,30%{opacity:1} 30.5%,100%{opacity:0}}
@keyframes kpT3 {0%,46%{width:0} 52%,53.5%{width:11em} 54%,100%{width:0}}
@keyframes kpPh3{0%,45.5%{opacity:1} 46.5%,53.7%{opacity:0} 54.5%,100%{opacity:1}}
@keyframes kpCar3{0%,45.5%{opacity:0} 46%,53.8%{opacity:1} 54.3%,100%{opacity:0}}
.par-loop .pp1{animation-name:kpp1}  .par-loop .pp2{animation-name:kpp2}
.par-loop .pp3{animation-name:kpp3}  .par-loop .pp3b{animation-name:kpp3b}
.par-loop .ppst{animation-name:kppst}
.par-loop .pp5{animation-name:kpp5}  .par-loop .pp6{animation-name:kpp6}
.par-loop .pp7{animation-name:kpp7}  .par-loop .pp8{animation-name:kpp8}
.par-loop .pp9{animation-name:kpp9}
@keyframes kpp1 {0%,11.5%{opacity:0;transform:translateY(6px)} 14.5%,100%{opacity:1;transform:none}}
@keyframes kpp2 {0%,17%{opacity:0;transform:translateY(8px)} 21%,100%{opacity:1;transform:none}}
@keyframes kpp3 {0%,30.5%{opacity:0;transform:translateY(6px)} 33.5%,100%{opacity:1;transform:none}}
@keyframes kpp3b{0%,40%{opacity:0} 44%,100%{opacity:1}}
@keyframes kppst{0%,74%{opacity:0} 78%,100%{opacity:1}}
@keyframes kpp5 {0%,54%{opacity:0;transform:translateY(6px)} 57%,100%{opacity:1;transform:none}}
@keyframes kpp6 {0%,60%{opacity:0;transform:translateY(8px)} 64%,100%{opacity:1;transform:none}}
@keyframes kpp7 {0%,66%{opacity:0;transform:translateY(8px)} 70%,100%{opacity:1;transform:none}}
@keyframes kpp8 {0%,73%{opacity:0;transform:translateY(8px)} 77%,100%{opacity:1;transform:none}}
@keyframes kpp9 {0%,80%{opacity:0;transform:translateY(8px)} 84%,100%{opacity:1;transform:none}}

/* the second session SPLITS IN mid-loop, exits with the same fade */
.mws-anim{display:flex; gap:0}
.mws-anim>.mterm{flex:1; min-width:0}
.mws-p2{
  flex:0 0 0%; min-width:0; margin-left:0; overflow:hidden;
  opacity:0; display:flex;
  animation:kppPane 18s var(--ease) infinite; will-change:flex-basis,opacity;
}
.mws-p2>.mterm{flex:1; min-width:236px}
/* The pane must CLOSE as it fades, on the same beat as the message exit —
   not merely fade and keep holding its width. It used to sit at 49.5% until
   the loop wrapped, so the restart snapped it to 0% in a single frame and the
   left window jumped 286px → 582px. Ending the exit at the same values as 0%
   makes the wrap a no-op, and the close mirrors the 38→44% split-in. */
@keyframes kppPane{
  0%,38%{flex-basis:0%; opacity:0; margin-left:0}
  44%{flex-basis:49.5%; opacity:1; margin-left:8px}
  /* the close gets its OWN S-curve: the sitewide --ease is a hard ease-out
     that dumps ~70% of the travel into the first 180ms, which reads as a
     lurch even though it is continuous. Ease-in-out over the same beat as
     the message fade (92→96.5%) makes the pane glide shut. */
  92%{flex-basis:49.5%; opacity:1; margin-left:8px; animation-timing-function:cubic-bezier(.65,0,.35,1)}
  96.5%,100%{flex-basis:0%; opacity:0; margin-left:0}
}

@media (prefers-reduced-motion:reduce){
  .mini-loop .lp,.mini-loop .mmsgs{animation:none; opacity:1; transform:none}
  .mini-loop .mtype{animation:none; width:0}
  .mini-loop .mph{animation:none; opacity:1}
  .mini-loop .mcaret{animation:none; opacity:0}
  .mws-p2{animation:none; opacity:1; flex-basis:49.5%; margin-left:8px}
}

/* ── exploded-UI capability showcase — a full-bleed transparent
      asset over the page background, copy beside it on desktop ──── */
.explode{padding:20px 24px 40px}
.explode-in{
  max-width:1180px; margin:0 auto;
  display:grid; grid-template-columns:1.55fr 1fr; gap:24px; align-items:center;
}
.explode-img{
  display:block; width:100%; height:auto;
  -webkit-user-drag:none;
  filter:drop-shadow(0 40px 80px rgba(0,0,0,.45));
}
.explode-h{
  font-family:var(--disp); font-weight:800; letter-spacing:-.02em;
  font-size:clamp(1.6rem,3vw,2.3rem); line-height:1.1; color:var(--ink);
  margin-bottom:20px;
}
.explode-list{list-style:none; padding:0; display:grid; gap:12px}
.explode-list li{
  position:relative; padding-left:26px;
  color:var(--body-c); font-size:1rem; font-weight:600; line-height:1.5;
}
.explode-list li::before{
  content:""; position:absolute; left:0; top:.34em;
  width:15px; height:15px; border-radius:50%;
  background:rgba(61,149,255,.14); box-shadow:inset 0 0 0 1.6px var(--blue);
}
.explode-list li::after{
  content:""; position:absolute; left:4.5px; top:calc(.34em + 4.5px);
  width:5px; height:3px;
  border-left:1.7px solid var(--blue); border-bottom:1.7px solid var(--blue);
  transform:rotate(-45deg);
}
@media (max-width:900px){
  .explode-in{grid-template-columns:1fr; gap:8px}
  .explode-copy{max-width:520px; margin:0 auto}
}

/* ── the design-rail tool chips — the app's actual seven tools,
      named with their real icons; theme-aware ───────────────────── */
.dtools{display:flex; flex-wrap:wrap; gap:8px; margin:16px 0 6px}
.dtool{
  display:inline-flex; align-items:center; gap:7px;
  padding:7px 13px; border-radius:10px;
  background:var(--dev-row); border:1px solid var(--dev-row-bd);
  font-size:.82rem; font-weight:700; color:var(--dev-text);
  user-select:none;
}
.dtool svg{width:13px; height:13px; flex:none; fill:none; stroke:var(--blue); stroke-width:2; stroke-linecap:round; stroke-linejoin:round}

/* the features/visual-workspace spec rows keep their own styling */
.see-row{
  display:flex; align-items:center; gap:10px;
  padding:11px 12px; margin-top:8px;
  background:var(--dev-row);
  border:1px solid var(--dev-row-bd);
  border-radius:12px;
  font-size:.83rem; line-height:1.3;
}
.see-verb{
  flex:none; font-weight:800; color:var(--blue);
  font-size:.78rem; letter-spacing:.01em; min-width:86px;
}
.see-t{color:var(--dev-text); font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.see-m{margin-left:auto; flex:none; color:var(--dev-mut); font-size:.76rem; font-weight:600}
.see-ok{
  flex:none; width:16px; height:16px; border-radius:50%;
  background:#3fbf77;
  position:relative;
}
.see-ok::after{
  content:""; position:absolute; left:4.5px; top:4.5px;
  width:6px; height:3.5px;
  border-left:2px solid #fff; border-bottom:2px solid #fff;
  transform:rotate(-45deg);
}
.see-row.is-live{border-color:rgba(61,149,255,.45)}

/* ── Homepage: proof strip ────────────────────────────────────── */
.proofstrip{padding:34px 24px}
.proofstrip-in{
  max-width:1080px; margin:0 auto; list-style:none;
  display:flex; flex-wrap:wrap; justify-content:center;
  gap:10px 14px; padding:0;
}
.proofstrip-in li{
  display:inline-flex; align-items:center; min-height:44px;
  padding:8px 20px; border-radius:999px;
  border:1px solid var(--line); background:var(--dev-screen);
  color:var(--body-c); font-size:.85rem; font-weight:700;
  box-shadow:var(--card-sh);
  user-select:none;
}
.ps-plus{color:var(--blue); margin:0 .35em; font-weight:800}

/* ── Homepage: pricing teaser + FAQ preview ───────────────────── */
.price-grid-teaser{grid-template-columns:1.15fr 1fr; max-width:880px; margin-inline:auto}
.pcard .price-num{white-space:nowrap}
.pcard-price .price-txt{font-size:1.7rem !important; letter-spacing:-.01em !important}
.faq-more{display:flex; justify-content:center; margin-top:28px}

/* ═══ Homepage feature showcase — image-led alternating rows ═════
   Replaces the old animated demos. Each row pairs copy with one
   generated feature render; during design, .imgph blockouts stand
   in so placement can be judged before spending image credits. ══ */
.showcase{padding:8px 24px 24px}
.showcase-in{max-width:1120px; margin:0 auto}
.showcase-head{margin-bottom:8px}
.feat{
  display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,4vw,60px);
  align-items:center; padding:clamp(40px,5vw,64px) 0;
}
.feat + .feat{border-top:1px solid var(--line)}
.feat:nth-child(even) .feat-copy{order:2}
.feat-kicker{
  display:inline-flex; align-items:center; gap:8px;
  font-size:.74rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
  color:var(--blue); margin-bottom:12px;
}
.feat-kicker i{width:22px; height:1px; background:var(--blue); display:inline-block}
.feat-h{
  font-family:var(--disp); font-weight:800; letter-spacing:-.02em;
  font-size:clamp(1.5rem,3vw,2.15rem); line-height:1.12; color:var(--ink); margin-bottom:14px;
}
.feat-p{color:var(--body-c); line-height:1.7; margin-bottom:18px; font-size:1.02rem}
.feat-list{list-style:none; padding:0; display:grid; gap:10px}
.feat-list li{position:relative; padding-left:26px; color:var(--body-c); font-size:.96rem; line-height:1.55}
.feat-list li b{color:var(--ink); font-weight:700}
.feat-list li::before{content:""; position:absolute; left:0; top:.42em; width:14px; height:14px; border-radius:50%; background:rgba(61,149,255,.14); box-shadow:inset 0 0 0 1.5px var(--blue)}
.feat-list li::after{content:""; position:absolute; left:4px; top:calc(.42em + 4.5px); width:5px; height:3px; border-left:1.6px solid var(--blue); border-bottom:1.6px solid var(--blue); transform:rotate(-45deg)}
.feat-more{margin-top:18px; display:inline-block}

/* the final image slot */
.feat-media img{display:block; width:100%; height:auto; border-radius:16px; -webkit-user-drag:none; pointer-events:none; filter:drop-shadow(0 30px 60px rgba(0,0,0,.42))}

/* ── Composed feature renders (visual-tool edits) ─────────────────
   Each render is enlarged, nudged toward its copy, edge-faded with a
   mask, and muted toward a neutral gray. Translate/scale are % of the
   image's own box and masks are % of its edges, so the composition
   holds as the column resizes. Desktop only — stacked mobile rows get
   the plain render. */
.showcase{overflow-x:clip}
.feat-copy{position:relative; z-index:1}
@media (min-width:901px){
  .feat img[src*="feat-rail"]{
    transform:translate(10.6%,33%) scale(1.83);
    filter:grayscale(1) sepia(1) hue-rotate(202deg) saturate(.3) brightness(.97) drop-shadow(0 30px 60px rgba(0,0,0,.42));
    -webkit-mask-image:linear-gradient(to bottom,#000 0,#000 41%,transparent 68.9%),linear-gradient(to right,#000 0,#000 63.6%,transparent 76.2%);
    mask-image:linear-gradient(to bottom,#000 0,#000 41%,transparent 68.9%),linear-gradient(to right,#000 0,#000 63.6%,transparent 76.2%);
    -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
    -webkit-mask-size:100% 100%; mask-size:100% 100%;
    -webkit-mask-composite:source-in; mask-composite:intersect;
  }
  .feat img[src*="feat-qa"]{
    transform:translate(-10.8%,11.3%) scale(1.77);
    filter:grayscale(1) sepia(1) hue-rotate(202deg) saturate(.3) brightness(.93) drop-shadow(0 30px 60px rgba(0,0,0,.42));
    -webkit-mask-image:linear-gradient(to bottom,#000 0,#000 67.1%,transparent 82.2%),linear-gradient(to right,transparent 21.3%,#000 34.2%);
    mask-image:linear-gradient(to bottom,#000 0,#000 67.1%,transparent 82.2%),linear-gradient(to right,transparent 21.3%,#000 34.2%);
    -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
    -webkit-mask-size:100% 100%; mask-size:100% 100%;
    -webkit-mask-composite:source-in; mask-composite:intersect;
  }
  .feat img[src*="feat-build"]{
    transform:translate(17.9%,14.7%) scale(1.85);
    filter:grayscale(1) sepia(1) hue-rotate(202deg) saturate(.3) brightness(.95) drop-shadow(0 30px 60px rgba(0,0,0,.42));
    -webkit-mask-image:linear-gradient(to bottom,#000 0,#000 57.8%,transparent 80.5%),linear-gradient(to right,#000 0,#000 50.6%,transparent 70.4%);
    mask-image:linear-gradient(to bottom,#000 0,#000 57.8%,transparent 80.5%),linear-gradient(to right,#000 0,#000 50.6%,transparent 70.4%);
    -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
    -webkit-mask-size:100% 100%; mask-size:100% 100%;
    -webkit-mask-composite:source-in; mask-composite:intersect;
  }
  .feat img[src*="feat-parallel"]{
    transform:translate(-32.3%,14.2%) scale(2.05);
    filter:grayscale(1) sepia(1) hue-rotate(202deg) saturate(.3) brightness(.95) drop-shadow(0 30px 60px rgba(0,0,0,.42));
    -webkit-mask-image:linear-gradient(to bottom,transparent 9.9%,#000 9.9%,#000 86.1%,transparent 86.1%),linear-gradient(to right,transparent 34.9%,#000 40%);
    mask-image:linear-gradient(to bottom,transparent 9.9%,#000 9.9%,#000 86.1%,transparent 86.1%),linear-gradient(to right,transparent 34.9%,#000 40%);
    -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
    -webkit-mask-size:100% 100%; mask-size:100% 100%;
    -webkit-mask-composite:source-in; mask-composite:intersect;
  }
}

/* ROUGH-DRAFT placeholder — data-art-prototype, deleted once the real
   render lands. Shows the target aspect, position and a description so
   the composition can be approved before any image is generated. */
.imgph{
  position:relative; aspect-ratio:4/3; border-radius:16px; overflow:hidden;
  background:linear-gradient(180deg,rgba(61,149,255,.05),rgba(61,149,255,.015)), var(--dev-screen);
  border:1.5px dashed rgba(61,149,255,.42);
  box-shadow:var(--card-sh);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:26px;
}
.imgph::before{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.6;
  background-image:linear-gradient(rgba(120,140,190,.09) 1px,transparent 1px),linear-gradient(90deg,rgba(120,140,190,.09) 1px,transparent 1px);
  background-size:24px 24px;
}
.imgph-badge{
  position:relative; font-size:.62rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase;
  color:var(--blue); background:rgba(61,149,255,.12); border:1px solid rgba(61,149,255,.3);
  border-radius:999px; padding:5px 12px; margin-bottom:14px;
}
.imgph-t{position:relative; font-family:var(--disp); font-weight:800; color:var(--ink); font-size:1.05rem; margin-bottom:7px}
.imgph-d{position:relative; color:var(--body-c); font-size:.85rem; line-height:1.55; max-width:360px}

@media (max-width:900px){
  .feat{grid-template-columns:1fr; gap:22px; padding:36px 0}
  .feat:nth-child(even) .feat-copy{order:0}
}

/* ══════════════════════════════════════════════════════════════
   SUBPAGE KIT — shared by /features/, /pricing/, /faq/, etc.
   ══════════════════════════════════════════════════════════════ */

/* page header band */
.subhero{
  padding:150px 24px 64px;
  text-align:center;
  background:
    radial-gradient(720px 340px at 50% -80px, rgba(61,149,255,.14), transparent 70%),
    var(--bg);
  border-bottom:1px solid var(--line);
}
.subhero-in{max-width:820px; margin:0 auto}
.subhero .sec-tag{margin-bottom:18px}
.subhero-h1{
  font-family:var(--disp); font-weight:800; letter-spacing:-.02em;
  font-size:clamp(2.1rem,5.4vw,3.4rem); line-height:1.08;
  color:var(--ink); margin:14px 0 18px;
}
.subhero-sub{
  font-size:clamp(1rem,1.6vw,1.13rem); color:var(--body-c);
  max-width:640px; margin:0 auto; line-height:1.65;
}
.subhero-ctas{display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-top:28px}
.subhero-note{margin-top:16px; font-size:.83rem; font-weight:600; color:var(--mut)}

/* generic page body container */
.pagebody{max-width:1080px; margin:0 auto; padding:64px 24px 20px}
.pagebody-narrow{max-width:780px}

/* feature story rows — alternating copy/visual */
.story{
  display:grid; grid-template-columns:1fr 1fr; gap:48px;
  align-items:center; padding:56px 0;
}
.story + .story{border-top:1px solid var(--line)}
.story:nth-child(even) .story-copy{order:2}
.story-kicker{
  display:inline-flex; align-items:center; gap:8px;
  font-size:.74rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
  color:var(--blue); margin-bottom:12px;
}
.story-kicker i{width:22px; height:1px; background:var(--blue); display:inline-block}
.story-h{
  font-family:var(--disp); font-weight:800; letter-spacing:-.015em;
  font-size:clamp(1.5rem,3vw,2.1rem); line-height:1.15; color:var(--ink);
  margin-bottom:14px;
}
.story-p{color:var(--body-c); line-height:1.7; margin-bottom:18px}
.story-list{list-style:none; padding:0; display:grid; gap:10px}
.story-list li{
  position:relative; padding-left:26px;
  color:var(--body-c); font-size:.95rem; line-height:1.55;
}
.story-list li b{color:var(--ink); font-weight:700}
.story-list li::before{
  content:""; position:absolute; left:0; top:.42em;
  width:14px; height:14px; border-radius:50%;
  background:rgba(61,149,255,.14);
  box-shadow:inset 0 0 0 1.5px var(--blue);
}
.story-list li::after{
  content:""; position:absolute; left:4px; top:calc(.42em + 4.5px);
  width:5px; height:3px;
  border-left:1.6px solid var(--blue); border-bottom:1.6px solid var(--blue);
  transform:rotate(-45deg);
}

/* story visual: framed panel reusing the device tokens */
.story-visual{
  background:var(--dev-screen);
  border:1px solid var(--dev-row-bd); border-radius:var(--r);
  box-shadow:var(--card-sh); padding:16px;
  user-select:none;
}
.story-visual img{display:block; width:100%; height:auto; border-radius:12px; -webkit-user-drag:none}
.story-visual .see-row{margin-top:8px}
.story-visual .see-row:first-child{margin-top:0}

/* simple card grids (integrations, FAQ topics, download facts) */
.cardgrid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; padding:8px 0 56px}
.cardgrid-2{grid-template-columns:repeat(2,1fr)}
.kcard{
  background:var(--dev-screen); border:1px solid var(--line);
  border-radius:var(--r); box-shadow:var(--card-sh);
  padding:26px 24px;
}
.kcard h3{
  font-family:var(--disp); font-weight:800; font-size:1.05rem;
  color:var(--ink); margin-bottom:8px; letter-spacing:-.01em;
}
.kcard p{color:var(--body-c); font-size:.92rem; line-height:1.65}
.kcard ul{list-style:none; padding:0; margin-top:12px; display:grid; gap:8px}
.kcard ul li{color:var(--body-c); font-size:.9rem; padding-left:20px; position:relative}
.kcard ul li::before{content:"·"; position:absolute; left:6px; color:var(--blue); font-weight:800}
.kcard .kcard-note{margin-top:12px; font-size:.8rem; color:var(--mut); font-weight:600}

/* numbered steps (how it works) */
.steps-col{display:grid; gap:0; padding-bottom:56px}
.stepx{
  display:grid; grid-template-columns:56px 1fr; gap:20px;
  padding:30px 0; border-top:1px solid var(--line);
}
.stepx:first-child{border-top:0}
.stepx-num{
  width:44px; height:44px; border-radius:14px;
  display:flex; align-items:center; justify-content:center;
  background:var(--dev-row); border:1px solid var(--dev-row-bd);
  color:var(--blue); font-weight:800; font-family:var(--disp);
}
.stepx h3{font-family:var(--disp); font-weight:800; color:var(--ink); font-size:1.12rem; margin-bottom:6px}
.stepx p{color:var(--body-c); line-height:1.68; font-size:.96rem}
.stepx p code{white-space:nowrap}

/* fact/spec table (pricing disclosures, security data-flow) */
.facts{
  border:1px solid var(--line); border-radius:var(--r);
  overflow:hidden; margin:8px 0 56px;
  background:var(--dev-screen); box-shadow:var(--card-sh);
}
.fact{
  display:grid; grid-template-columns:240px 1fr; gap:18px;
  padding:18px 24px; border-top:1px solid var(--line);
}
.fact:first-child{border-top:0}
.fact b{color:var(--ink); font-weight:700; font-size:.95rem}
.fact p{color:var(--body-c); font-size:.93rem; line-height:1.6}
.fact p + p{margin-top:6px}

/* prose block */
.prose{padding-bottom:40px}
.prose h2{
  font-family:var(--disp); font-weight:800; letter-spacing:-.015em;
  color:var(--ink); font-size:1.45rem; margin:40px 0 12px;
}
.prose p{color:var(--body-c); line-height:1.72; margin-bottom:14px}
.prose ul{margin:0 0 14px 20px; color:var(--body-c); line-height:1.7}
.prose li{margin-bottom:6px}
.prose a{color:var(--blue); font-weight:600; text-decoration:none}
.prose a:hover{text-decoration:underline}

/* bottom CTA band for subpages */
.subcta{
  text-align:center; padding:56px 24px 88px;
}
.subcta h2{
  font-family:var(--disp); font-weight:800; letter-spacing:-.02em;
  font-size:clamp(1.6rem,3.4vw,2.3rem); color:var(--ink); margin-bottom:12px;
}
.subcta p{color:var(--body-c); margin-bottom:24px}
.subcta .hero-ctas{justify-content:center}

/* nav active state */
.nav-pill a[aria-current="page"],.nav-menu a[aria-current="page"]{color:var(--ink); font-weight:700}

/* ── Accessibility: comfortable tap targets on touch layouts ──── */
@media (max-width:900px){
  .nav-pill a,.nav-menu a,.foot-col a{
    display:inline-flex; align-items:center; min-height:44px;
  }
  .foot-col a{padding:4px 0}
  .qa summary{min-height:44px; display:flex; align-items:center}
  .brand{min-height:44px; display:inline-flex; align-items:center}
  .nav-login{display:inline-flex; align-items:center; min-height:44px; padding-inline:10px}
  .theme-btn,.nav-burger{min-width:44px; min-height:44px}
  .btn{min-height:44px}
  .foot-base span,.foot-led{min-height:auto}
  .pv-tab,.bx-tabadd{min-height:0}
}

/* ── Responsive ───────────────────────────────────────────────── */
@media (max-width:960px){
  .story{grid-template-columns:1fr; gap:28px; padding:44px 0}
  .story:nth-child(even) .story-copy{order:0}
  .cardgrid{grid-template-columns:1fr 1fr}
  .price-grid-teaser{grid-template-columns:1fr; max-width:520px}
}
@media (max-width:640px){
  .cardgrid,.cardgrid-2{grid-template-columns:1fr}
  .fact{grid-template-columns:1fr; gap:6px; padding:16px 18px}
  .stepx{grid-template-columns:44px 1fr; gap:14px}
  .subhero{padding:124px 20px 48px}
  .pagebody{padding:44px 20px 12px}
  .see-verb{min-width:70px}
  .see-m{display:none}
  .mtg-m{display:none}
}