/* "Other Spoofey products" showcase: a carousel of live product mockups
   (IVR builder, AI Suite, Numberprint, REST API). Shared by the
   homepage and /business; showcase.js builds the markup into any
   [data-showcase] element and runs the mocks. Lifted out of index.html so
   both pages draw the same thing. The IVR mock's classes are sx-* (not the
   hx-* the /business hero uses) so the two never style each other.
   Relies on the page defining --r, --glass-brd, --signal, --glow, --ink,
   --muted, --faint, --electric and --ok, which both pages do. */
/* Wider than the page's normal 1120px content column - this section is a
   showcase, not a paragraph, and the extra width is what makes the two
   product mockups feel roomy instead of cropped. */
.secprod .wrap{max-width:1360px}
.secprod-frame{position:relative;padding:40px clamp(24px,4.5vw,64px) clamp(40px,5vw,56px)}
.secprod-frame .sec-head{margin-bottom:clamp(40px,5.5vw,56px)}
/* ============== carousel: one product centered and full, the other two
   peeking half-cut on either side. Peek offsets are in %, which CSS
   transform always resolves against the SLIDE'S OWN width - not the
   viewport, not the frame's padding - so "half-cut" is exactly that at
   every breakpoint and in any host container, no vw/px magic numbers to
   re-tune per screen size (the old vw-based offsets under-shot on narrow
   phones, where the frame's own side padding eats into the vw budget,
   and left the peeks clipped out of the viewport entirely). Slides are
   stacked via absolute position and moved purely with transform/opacity,
   so nothing here ever reflows the frame around it. ============== */
.secprod-carousel{position:relative}
.secprod-viewport{position:relative;height:400px;overflow:hidden}
.secprod-track{position:absolute;inset:0}
/* Width is a % of .secprod-viewport itself, NOT vw - the frame around the
   viewport has its own padding, so the viewport is already narrower than
   the raw device width. Sizing off vw let the card end up WIDER than the
   box that clips it, which meant every peek's transform pushed it fully
   past the clip edge with zero overlap left to show - a worse version of
   the bug the % transform above fixed, just one property over: the
   transform's basis was fixed, but the width feeding it was still
   viewport-relative, and re-broke it. This is genuinely why nothing
   showed on mobile even after that fix; verified by direct pixel/geometry
   inspection, not just a screenshot at a glance. */
.secprod-slide{position:absolute;top:0;left:50%;width:min(600px,84%);height:400px;
  transition:transform .62s cubic-bezier(.16,1,.3,1),opacity .5s ease,filter .5s ease;
  pointer-events:none}
.secprod-slide[data-role="center"]{transform:translateX(-50%) scale(1);opacity:1;z-index:3;pointer-events:auto;filter:none}
/* peeks: faded and softly blurred so they read as glass behind the sharp,
   fully-opaque center card instead of blending into it. contrast(.65)
   brightness(1.3) - not just a plain brightness cut - because the
   REST API and Number intelligence mocks both sit on a near-black
   background (#0b0a18 -> #07060f): a straight brightness(.9)-style dim
   pushes near-black even closer to true black, which is indistinguishable
   from the page behind it. Lowering contrast first pulls those blacks
   toward mid-gray, then the brightness bump lifts the result to
   something that actually shows as a peek instead of just more page. */
.secprod-slide[data-role="left"]{transform:translateX(-100%) scale(.87);opacity:.5;z-index:2;pointer-events:auto;filter:blur(1.5px) saturate(.75) contrast(.65) brightness(1.3)}
.secprod-slide[data-role="right"]{transform:translateX(0%) scale(.87);opacity:.5;z-index:2;pointer-events:auto;filter:blur(1.5px) saturate(.75) contrast(.65) brightness(1.3)}
/* same card wash as .card (feature grid) so this reads as one family, not a
   bolted-on widget — just bigger, with a full gradient-border hairline
   instead of .card's top-only one. */
.secprod-card{position:relative;display:block;width:100%;height:100%;text-align:left;
  border:1px solid transparent;border-radius:var(--r);
  background:linear-gradient(160deg,rgba(37,99,235,.06),rgba(79,70,229,.015));overflow:hidden;
  transition:box-shadow .32s ease,border-color .32s ease}
/* 1px gradient hairline, brighter on hover — no extra markup */
.secprod-card::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;
  background:linear-gradient(150deg,rgba(147,165,255,.45),rgba(147,165,255,.04) 42%,rgba(147,165,255,.03) 66%,rgba(45,212,191,.3));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude;transition:opacity .32s ease,filter .32s ease}
/* cursor glow, identical recipe to .card::after (see the shared mousemove
   listener below) so hovering either card system feels the same */
.secprod-card::after{content:"";position:absolute;inset:0;border-radius:inherit;opacity:0;pointer-events:none;
  transition:opacity .3s;background:radial-gradient(560px circle at var(--mx,50%) var(--my,0%),rgba(37,99,235,.13),transparent 42%)}
.secprod-slide[data-role="center"]:hover .secprod-card{box-shadow:0 42px 90px -42px rgba(79,70,229,.62)}
.secprod-slide[data-role="center"]:hover .secprod-card::before{filter:brightness(1.9) saturate(1.2)}
.secprod-slide[data-role="center"]:hover .secprod-card::after{opacity:1}
/* The screen pushes in on hover - the bezel (.sx/.ax/.iq/.ap, border and
   all) stays put; only the *-content layer (what's actually showing on
   it) zooms and brightens, like a display waking up as you lean toward it.
   Scoped to the content layer specifically so the frame's edge stays a
   crisp static line instead of scaling and blurring with everything else. */
.sx-content{transition:transform .65s cubic-bezier(.16,1,.3,1),filter .65s ease}
.secprod-slide[data-role="center"]:hover .sx-content{transform:scale(1.06);filter:brightness(1.06) saturate(1.1)}
.secprod-slide[data-role="center"]:hover .ax-content,
.secprod-slide[data-role="center"]:hover .iq-content,
.secprod-slide[data-role="center"]:hover .ap-content{transform:scale(1.03);filter:brightness(1.06) saturate(1.1)}
.secprod-kind{position:absolute;top:16px;right:16px;z-index:5;display:inline-flex;align-items:center;gap:6px;
  font-family:'Geist',sans-serif;
  font-size:8.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--signal);
  border:1px solid rgba(45,212,191,.32);background:rgba(45,212,191,.12);border-radius:100px;padding:3px 9px}
/* "going live" reuses the same muted/faint treatment as .soon-badge in the
   Credits section below — one "not yet" language for the whole page,
   instead of a one-off amber that appears nowhere else on the site. */
.secprod-kind.soon{color:var(--faint);border-color:var(--glass-brd);background:rgba(147,165,255,.05)}

/* the one caption below the carousel, swapped per active slide instead of
   living inside each card (peeking cards showing a paragraph of copy at a
   jaunty angle reads as clutter, not as a feature) */
.secprod-meta{max-width:520px;margin:30px auto 0;text-align:center}
.secprod-meta h3{font-size:20px;margin-bottom:8px;letter-spacing:-.01em}
.secprod-meta p{font-size:14.5px;color:var(--muted);margin-bottom:14px}
.secprod-go{display:inline-flex;align-items:center;gap:7px;font-family:'Geist',sans-serif;
  font-weight:600;font-size:13px;color:var(--glow);transition:gap .25s ease}
.secprod-go svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}

/* prev/dots/next, centered under the caption */
.secprod-nav{display:flex;align-items:center;justify-content:center;gap:20px;margin-top:24px}
.secprod-arrow{width:38px;height:38px;flex:0 0 auto;border-radius:50%;display:grid;place-items:center;
  background:rgba(37,99,235,.08);border:1px solid var(--glass-brd);color:var(--ink);cursor:pointer;
  transition:background .2s ease,border-color .2s ease,transform .2s ease}
.secprod-arrow:hover{background:rgba(37,99,235,.18);border-color:rgba(37,99,235,.45);transform:scale(1.07)}
.secprod-arrow svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.secprod-dots{display:flex;align-items:center;gap:9px}
.secprod-dot{width:8px;height:8px;padding:0;border-radius:100px;border:0;background:var(--glass-brd);cursor:pointer;
  transition:background .3s ease,width .3s ease}
.secprod-dot:hover{background:rgba(147,165,255,.4)}
.secprod-dot.on{width:24px;background:linear-gradient(90deg,var(--electric),var(--glow))}

/* ---- left: the /business IVR builder mock (Scratch-style blocks) ---- */
/* The bezel: border, corner radius, background - this never moves. Only
   .sx-content (the actual screen) zooms, like a static phone case around a
   screen that pushes in - not the whole device growing. */
.sx{position:relative;height:100%;width:100%;text-align:left;user-select:none;container-type:inline-size;
  border:1px solid var(--glass-brd);border-radius:14px;overflow:hidden;
  background:
    radial-gradient(72% 46% at 12% -6%,rgba(79,70,229,.16),transparent 70%),
    linear-gradient(180deg,rgba(10,14,30,.72),rgba(6,9,18,.6));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05)}
.sx-content{display:flex;gap:0;width:100%;height:100%;transform-origin:18% 14%}
.sx-pal{flex:0 0 150px;background:rgba(12,18,38,.72);border-right:1px solid var(--glass-brd);padding:12px 12px 0;overflow:hidden}
.sx-cat{font-family:'Geist';font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--faint);
  margin:8px 3px 5px;display:flex;align-items:center;justify-content:space-between;cursor:pointer;user-select:none;
  transition:color .18s ease}
.sx-cat:hover{color:var(--glow)}
.sx-pal>.sx-domain:first-child>.sx-cat{margin-top:2px}
.sx-chev{font-size:11px;opacity:.55;transition:transform .3s cubic-bezier(.16,1,.3,1)}
.sx-domain.open>.sx-cat>.sx-chev{transform:rotate(90deg)}
.sx-chips{overflow:hidden;max-height:0;opacity:0;transition:max-height .38s cubic-bezier(.16,1,.3,1),opacity .28s ease}
.sx-domain.open>.sx-chips{max-height:240px;opacity:1}
.sx-chip{color:#fff;font-family:'Geist';font-weight:600;font-size:11px;background:var(--c);white-space:nowrap;
  border-radius:6px;padding:6px 9px;margin-bottom:5px;width:max-content;max-width:100%;
  clip-path:polygon(0 0,10px 0,13px 4px,22px 4px,25px 0,100% 0,100% calc(100% - 4px),25px calc(100% - 4px),22px 100%,13px 100%,10px calc(100% - 4px),0 calc(100% - 4px))}
.sx-chip.lift{opacity:.35}
.sx-script{flex:1;overflow:hidden;padding:16px 18px}
.sx-blk{position:relative;color:#fff;font-family:'Geist',system-ui,sans-serif;font-weight:600;font-size:12px;
  padding:9px 12px 15px;min-height:18px;max-height:120px;background:var(--c);width:max-content;max-width:100%;
  display:flex;align-items:center;gap:6px;flex-wrap:wrap;line-height:1.5;margin-bottom:-6px;
  clip-path:polygon(0 0,14px 0,17px 6px,29px 6px,32px 0,100% 0,100% calc(100% - 6px),32px calc(100% - 6px),29px 100%,17px 100%,14px calc(100% - 6px),0 calc(100% - 6px));
  transition:opacity .3s ease, max-height .3s ease, transform .3s ease, margin .3s ease}
.sx-blk.hat{clip-path:none;border-radius:13px 13px 0 0;padding:11px 12px 12px;margin-bottom:-6px}
.sx-blk.gone{opacity:0;max-height:0;margin-bottom:-6px;transform:translateY(-6px);pointer-events:none;overflow:hidden;padding-top:0;padding-bottom:0;min-height:0}
.sx-blk.pop{animation:sxpop .34s ease both}
@keyframes sxpop{from{opacity:0;transform:translateY(-8px) scale(.96)}to{opacity:1;transform:none}}
.sx-grip{opacity:.7;font-size:12px}
.sx-x{margin-left:4px;opacity:.7;font-size:11px}
.sx-in{background:#fff;color:#1a1a2e;font-weight:700;font-size:11px;border-radius:11px;padding:2px 8px;min-width:26px;min-height:15px;display:inline-flex;align-items:center;transition:background .18s,box-shadow .18s}
.sx-in.type::after{content:'';display:inline-block;width:1px;height:11px;background:#1a1a2e;margin-left:1px;animation:sxcaret .8s step-end infinite}
@keyframes sxcaret{50%{opacity:0}}
.sx-in.hasvar{background:#FFE6C7;color:#7a3d00}
.sx-in.hasvar.sys{background:#D7EEF7;color:#14506a}
.sx-in.vf-drop{box-shadow:0 0 0 2px var(--glow)}
.sx-in.vf-flash{box-shadow:0 0 0 3px var(--glow)}
.sx-varchip{background:#FF8C1A;color:#fff;font-family:'Geist';font-weight:700;font-size:11px;
  border-radius:999px;padding:4px 12px;margin-bottom:6px;width:max-content;max-width:100%;box-shadow:0 1px 0 rgba(0,0,0,.25)}
.sx-varchip.sys{background:#5CB1D6}
.sx-varchip.lift{opacity:.35}
.sx-slot{height:8px;margin:-1px 0;border-radius:5px;background:transparent;transition:height .15s,background .15s}
.sx-slot.on{height:20px;background:rgba(147,165,255,.35);outline:2px dashed var(--glow)}
.sx-ghost{position:absolute;z-index:6;pointer-events:none;opacity:0;transition:opacity .12s}
.sx-ghost.on{opacity:.92}
.sx-cursor{position:absolute;left:0;top:0;z-index:8;width:22px;height:22px;pointer-events:none;opacity:0;
  transition:transform .55s cubic-bezier(.45,.05,.2,1),opacity .25s;filter:drop-shadow(0 2px 3px rgba(0,0,0,.5))}
.sx-cursor.tap{transition:transform .12s ease,opacity .25s}
.sx-fade{transition:opacity .22s ease}
.sx-fade.out{opacity:0}

/* ---- IVR builder: the AI section, styled like /business/team's own
   (.pgrp-ai / .chip-ai / .blk-ai): the block colour blended into the AI
   gradient, the white AI mark ahead of the label. ---- */
.sx-cat.ai{color:#C4B5FD}
.sx-cat .ai-mark{width:10px;height:10px;margin-right:5px;vertical-align:-1px}
.sx-chip.ai,.sx-blk.ai{background:linear-gradient(135deg,color-mix(in srgb,var(--c) 82%,#2563EB),var(--c) 60%,color-mix(in srgb,var(--c) 75%,#A21CAF))}
.sx-chip .ai-mark{width:9px;height:9px;vertical-align:-1px;margin-right:4px}
.sx-blk .ai-mark{width:12px;height:12px;flex:0 0 auto}
.sx-in.sx-labels{min-width:44px}
/* phone-sized card: no room for a side palette, so the AI chips sit in a
   strip above the script (the flow being built only uses those) */
@container (max-width:380px){
  .sx-content{flex-direction:column}
  .sx-pal{flex:0 0 auto;border-right:0;border-bottom:1px solid var(--glass-brd);padding:9px 10px 4px}
  .sx-domain:not([data-domain="AI"]),.sx-domain[data-domain="AI"] > .sx-cat{display:none}
  .sx-domain[data-domain="AI"] > .sx-chips{display:flex;flex-wrap:wrap;gap:5px;max-height:none;opacity:1}
  .sx-chip{margin:0 0 5px}
  .sx-script{padding:11px 10px}
}

/* ---- the console-style cards (AI Suite, Numberprint, REST API): the same
   deep navy panel as the /lookup report and the /calls console, hairline
   dividers, Geist throughout (Geist Mono only for the code). Each card is a
   size container, so its phone layout follows the card, not the window. ---- */
.ax,.iq,.ap{position:relative;height:100%;border-radius:14px;border:1px solid rgba(147,165,255,.16);overflow:hidden;
  container-type:inline-size;font-family:'Geist',system-ui,sans-serif;color:#EEF1FA;text-align:left;
  background:radial-gradient(90% 60% at 0% 0%,rgba(59,130,246,.12),transparent 62%),linear-gradient(180deg,#0e1328,#090b18);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05)}
.ax-content,.iq-content,.ap-content{position:absolute;inset:0;display:flex;flex-direction:column;
  transition:transform .65s cubic-bezier(.16,1,.3,1),filter .65s ease,opacity .4s ease}
.ax-content{transform-origin:50% 30%}.iq-content{transform-origin:50% 40%}.ap-content{transform-origin:30% 30%}

/* ---- AI Suite: a live call with the AI receptionist ---- */
.ax{background:radial-gradient(70% 55% at 100% 0%,rgba(124,58,237,.2),transparent 70%),
  radial-gradient(60% 50% at 0% 100%,rgba(37,99,235,.12),transparent 70%),linear-gradient(180deg,#0d0f24,#080915)}
.ax.out .ax-content{opacity:0}
.ax-bar{display:flex;align-items:center;gap:11px;padding:11px 88px 11px 14px;border-bottom:1px solid rgba(147,165,255,.12);background:rgba(255,255,255,.02)}
/* the orb: the AI gradient with a light on it; a sheen sweeps round while
   Ava thinks or talks, it breathes while she talks, and rings while she listens */
.ax-orb{position:relative;flex:0 0 auto;width:30px;height:30px;border-radius:50%;
  background:radial-gradient(circle at 32% 28%,rgba(255,255,255,.9) 0,rgba(255,255,255,.18) 20%,transparent 44%),var(--ai-grad,linear-gradient(135deg,#7DD3FC,#818CF8 42%,#C084FC 78%,#F0ABFC));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.16),0 6px 18px -6px rgba(168,85,247,.85)}
.ax-orb i{position:absolute;inset:0;border-radius:50%;opacity:0;transition:opacity .3s;
  background:conic-gradient(from 0deg,transparent,rgba(255,255,255,.6),transparent 32%,transparent 58%,rgba(125,211,252,.55),transparent 84%)}
.ax.s-think .ax-orb i,.ax.s-speak .ax-orb i{opacity:1;animation:axSpin 1.4s linear infinite}
.ax.s-speak .ax-orb{animation:axTalk .45s ease-in-out infinite alternate}
.ax-orb::after{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid rgba(196,181,253,.7);opacity:0}
.ax.s-hear .ax-orb::after{animation:axRing 1.2s ease-out infinite}
@keyframes axSpin{to{transform:rotate(360deg)}}
@keyframes axTalk{from{transform:scale(.93)}to{transform:scale(1.07)}}
@keyframes axRing{from{transform:scale(1);opacity:.75}to{transform:scale(1.7);opacity:0}}
.ax-who{display:flex;flex-direction:column;min-width:0;line-height:1.25}
.ax-who b{font-size:13px;font-weight:600;color:#F4F2FB}
.ax-who small{font-size:10.5px;color:var(--muted,#9A8CB8);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ax-clock{margin-left:auto;display:inline-flex;align-items:center;gap:6px;font-size:11px;color:var(--muted,#9A8CB8);font-variant-numeric:tabular-nums}
.ax.live .ax-clock{color:#A7F3D0}
.ax-main{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,1fr) 188px}
.ax-feed{display:flex;flex-direction:column;gap:10px;padding:14px 16px;min-width:0;overflow:hidden}
.ax-msg{display:flex;gap:8px;align-items:flex-end;opacity:0;transform:translateY(8px);
  transition:opacity .35s ease,transform .45s cubic-bezier(.16,1,.3,1)}
.ax-msg.ai{justify-content:flex-end}
.ax.s-them .ax-msg.them,.ax.s-reply .ax-msg.ai{opacity:1;transform:none}
.ax-av{flex:0 0 auto;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;font-size:10px;font-weight:700;color:#fff;
  background:rgba(147,165,255,.16);border:1px solid rgba(147,165,255,.22)}
.ax-bub{max-width:86%;padding:8px 11px 9px;border-radius:13px 13px 13px 4px;background:rgba(147,165,255,.07);
  border:1px solid rgba(147,165,255,.16);font-size:12.5px;line-height:1.45;color:#EEF1FA}
.ax-msg.ai .ax-bub{border-radius:13px 13px 4px 13px;border-color:rgba(167,139,250,.42);
  background:linear-gradient(135deg,rgba(37,99,235,.22),rgba(124,58,237,.26) 55%,rgba(162,28,175,.2))}
.ax-meta{display:flex;align-items:center;gap:5px;font-size:10px;font-weight:600;color:var(--muted,#9A8CB8);margin-bottom:3px}
.ax-meta em{font-style:normal;font-weight:500;color:var(--faint,#6B5E85);font-variant-numeric:tabular-nums;margin-left:2px}
.ax-msg.ai .ax-meta{color:#DDD6FE}
.ax-meta .ai-mark{width:11px;height:11px}
.ax-txt{display:block}
.ax-wave{display:flex;align-items:center;gap:2px;height:16px;max-height:16px;margin-bottom:3px;overflow:hidden;transition:max-height .3s ease,opacity .3s ease,margin .3s ease}
.ax-wave i{flex:0 0 2.5px;height:14px;border-radius:2px;background:#93A5FF;transform:scaleY(.18)}
.ax.s-hear .ax-wave i{animation:axWave .75s ease-in-out infinite}
.ax-wave i:nth-child(3n){animation-delay:-.2s}.ax-wave i:nth-child(3n+1){animation-delay:-.45s}
.ax-wave i:nth-child(4n){animation-delay:-.1s}.ax-wave i:nth-child(5n){animation-delay:-.6s}
@keyframes axWave{0%,100%{transform:scaleY(.2)}50%{transform:scaleY(1)}}
.ax:not(.s-hear) .ax-wave{max-height:0;opacity:0;margin-bottom:0}
.ax-dots{display:none;gap:4px;padding:5px 0 3px}
.ax.s-think .ax-dots{display:flex}
.ax-dots i{width:5px;height:5px;border-radius:50%;background:#C4B5FD;animation:axDot 1s infinite}
.ax-dots i:nth-child(2){animation-delay:.15s}.ax-dots i:nth-child(3){animation-delay:.3s}
@keyframes axDot{0%,100%{opacity:.25;transform:translateY(0)}50%{opacity:1;transform:translateY(-2px)}}
.ax-kb{display:flex;align-items:flex-start;gap:5px;line-height:1.35;margin-top:0;max-height:0;opacity:0;overflow:hidden;font-size:10px;color:#A5F3FC;
  transition:opacity .35s ease,max-height .35s ease,margin .35s ease}
.ax.s-kb .ax-kb{opacity:1;max-height:40px;margin-top:6px}
.ax-kb svg{width:11px;height:11px;flex:0 0 auto;margin-top:1px}
.ax-kb > span{min-width:0}
.ax-kb b{font-weight:600;color:#E0F2FE}
.ax-sys{align-self:center;display:inline-flex;align-items:center;gap:6px;font-size:11px;color:#99F6E4;padding:5px 11px;border-radius:100px;
  background:rgba(14,165,160,.12);border:1px solid rgba(45,212,191,.3);opacity:0;transform:translateY(6px);
  transition:opacity .35s ease,transform .45s cubic-bezier(.16,1,.3,1)}
.ax-sys svg{width:12px;height:12px}
.ax-sys b{color:#fff;font-weight:600}
.ax.s-route .ax-sys{opacity:1;transform:none}
/* the flow panel: the call's blocks, lit as they run */
.ax-flow{display:flex;flex-direction:column;min-width:0;padding:14px 14px 10px;border-left:1px solid rgba(147,165,255,.12);background:rgba(255,255,255,.015)}
.ax-fh{font-size:10.5px;font-weight:600;color:var(--muted,#9A8CB8);margin-bottom:12px}
.ax-step{position:relative;display:flex;gap:10px;padding-bottom:14px;opacity:.42;transition:opacity .3s ease}
.ax-step:last-child{padding-bottom:0}
.ax-step.on,.ax-step.done{opacity:1}
.ax-step::before,.ax-step::after{content:"";position:absolute;left:7px;top:18px;bottom:1px;width:2px;border-radius:2px}
.ax-step::before{background:rgba(147,165,255,.14)}
.ax-step::after{background:var(--c);transform:scaleY(0);transform-origin:top;transition:transform .5s cubic-bezier(.16,1,.3,1)}
.ax-step.done::after{transform:scaleY(1)}
.ax-step:last-child::before,.ax-step:last-child::after{display:none}
.ax-dot{position:relative;flex:0 0 auto;width:16px;height:16px;border-radius:50%;border:2px solid var(--c);display:grid;place-items:center;
  background:#0b0e1f;transition:background .25s ease}
.ax-dot svg{width:10px;height:10px;fill:none;stroke:#fff;stroke-width:3.4;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:24;stroke-dashoffset:24;transition:stroke-dashoffset .3s ease .05s}
.ax-step.done .ax-dot{background:var(--c)}
.ax-step.done .ax-dot svg{stroke-dashoffset:0}
.ax-step.on .ax-dot::after{content:"";position:absolute;inset:-5px;border-radius:50%;border:2px solid var(--c);animation:axRing 1.1s ease-out infinite}
.ax-sb{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1}
.ax-sb > b{display:flex;align-items:center;gap:5px;font-size:11.5px;font-weight:600;color:#F4F2FB;line-height:16px}
.ax-sb > b .ai-mark{width:11px;height:11px}
.ax-short{display:none}
.ax-sd{font-size:10.5px;color:var(--muted,#9A8CB8);line-height:1.35}
.ax-int{display:flex;flex-direction:column;gap:4px;margin-top:2px}
.ax-il{display:grid;grid-template-columns:50px minmax(0,1fr) 26px;align-items:center;gap:6px;font-size:10px}
.ax-il em{font-style:normal}
.ax-il s{text-decoration:none;text-align:right;font-variant-numeric:tabular-nums}
.ax-il i{display:block;height:4px;border-radius:4px;background:rgba(147,165,255,.12);overflow:hidden}
.ax-il i b{display:block;height:100%;border-radius:inherit;background:rgba(147,165,255,.45);transform:scaleX(0);transform-origin:left;
  transition:transform .9s cubic-bezier(.16,1,.3,1)}
.ax.s-intent .ax-il i b{transform:scaleX(var(--w))}
.ax-il.win{color:#EEF1FA}
.ax-il.win i b{background:linear-gradient(90deg,#6366F1,#A855F7)}
@container (max-width:520px){
  .ax-bar{padding:9px 76px 9px 11px;gap:9px}
  .ax-orb{width:26px;height:26px}
  .ax-main{grid-template-columns:1fr;grid-template-rows:minmax(0,1fr) auto}
  /* chat-style: the newest message stays in view, older ones scroll off the top */
  .ax-feed{padding:11px 12px;gap:8px;justify-content:flex-end}
  .ax-bub{font-size:11.5px;max-width:92%}
  .ax-flow{flex-direction:row;align-items:center;gap:6px;padding:9px 11px;border-left:0;border-top:1px solid rgba(147,165,255,.12)}
  .ax-fh,.ax-sd{display:none}
  .ax-step{flex:1 1 0;min-width:0;gap:5px;padding:0;align-items:center}
  .ax-step::before,.ax-step::after{display:none}
  .ax-sb > b{display:block;font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .ax-full{display:none}.ax-short{display:inline}
  .ax-sb > b .ai-mark{display:none}
  .ax-dot{width:13px;height:13px}
  .ax-dot svg{width:8px;height:8px}
}

/* ---- Numberprint: the report's own layout (lookup.html .dm-card / .rx-*) ---- */
.iq-content{padding:16px 18px 14px;gap:12px}
.iq-head{padding-right:64px}
.iq-num{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:22px;font-weight:500;letter-spacing:-.03em;color:#F4F2FB;line-height:1.15}
.iq-tag{display:inline-flex;align-items:center;font-size:11px;font-weight:500;letter-spacing:0;padding:4px 9px;border-radius:100px;
  color:#BCC5E0;border:1px solid rgba(147,165,255,.3);background:rgba(147,165,255,.07)}
.iq-tag.business{color:#5EEAD4;border-color:rgba(45,212,191,.42);background:rgba(45,212,191,.1)}
.iq-tag.alert{color:#FCA5A5;border-color:rgba(239,68,68,.45);background:rgba(239,68,68,.1)}
.iq-sub{font-size:12px;color:#BCC5E0;margin-top:5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.iq-sub b{color:#EEF1FA;font-weight:600}
.iq-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin:0 -18px;
  border-top:1px solid rgba(147,165,255,.13);border-bottom:1px solid rgba(147,165,255,.13)}
.iq-stats > div{padding:9px 18px 10px;min-width:0}
.iq-stats > div + div{border-left:1px solid rgba(147,165,255,.13)}
.iq-lbl{display:block;font-size:10.5px;font-weight:500;color:#929FC8}
.iq-stats b{display:block;margin-top:5px;font-size:18px;font-weight:500;color:#F4F2FB;line-height:1.15;font-variant-numeric:tabular-nums;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.iq-stats b.iq-sm{font-size:13px;margin-top:8px}
.iq-meter{display:block;height:4px;border-radius:4px;background:rgba(147,165,255,.13);overflow:hidden;margin-top:7px}
.iq-meter i{display:block;height:100%;border-radius:inherit;background:var(--mc,#3B82F6);transform:scaleX(0);transform-origin:left;
  transition:transform 1s cubic-bezier(.16,1,.3,1)}
.iq-head,.iq-stats b,.iq-callout,.iq-maplbl{transition:opacity .35s ease,transform .45s cubic-bezier(.16,1,.3,1)}
.iq:not(.show) .iq-head,.iq:not(.show) .iq-stats b{opacity:0;transform:translateY(4px)}
.iq-map{position:relative;flex:1;min-height:0;border-radius:12px;overflow:hidden;border:1px solid rgba(147,165,255,.12);
  background:radial-gradient(80% 90% at 50% 40%,rgba(59,130,246,.1),transparent 70%),rgba(6,9,20,.55)}
.iq-map::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.55;
  background-image:radial-gradient(rgba(147,165,255,.14) 1px,transparent 1.3px);background-size:14px 14px}
.iq-map svg{position:absolute;inset:0;width:100%;height:100%}
.iq-land path{fill:rgba(147,165,255,.1);stroke:rgba(147,165,255,.26);stroke-width:.6;vector-effect:non-scaling-stroke}
.iq-hl{fill:#3B82F6;fill-opacity:0;stroke:rgba(255,255,255,0);stroke-width:1.1;vector-effect:non-scaling-stroke;transition:fill-opacity .5s ease,stroke .5s ease}
.iq.hl .iq-hl{fill-opacity:.55;stroke:rgba(255,255,255,.55)}
.iq.nomap .iq-map{display:none}
.iq-sample{position:absolute;top:9px;left:10px;z-index:2;font-size:10px;font-weight:600;color:#8793BA;padding:3px 8px;border-radius:100px;
  border:1px solid rgba(147,165,255,.2);background:rgba(9,12,26,.6)}
.iq-pin{position:absolute;left:50%;top:50%;z-index:2;width:0;height:0;opacity:0;transition:opacity .35s ease}
.iq.pinned .iq-pin{opacity:1}
.iq-pin i{position:absolute;left:-7px;top:-7px;width:14px;height:14px;border-radius:50%;background:#fff;border:3px solid #60A5FA;
  box-shadow:0 0 0 4px rgba(11,16,36,.55)}
.iq-pin::before{content:"";position:absolute;left:-18px;top:-18px;width:36px;height:36px;border-radius:50%;background:#60A5FA;opacity:.25}
.iq.pinned .iq-pin::before{animation:iqPulse 2.4s ease-out infinite}
@keyframes iqPulse{0%{transform:scale(.4);opacity:.35}100%{transform:scale(1.4);opacity:0}}
.iq-maplbl{position:absolute;left:10px;right:10px;bottom:9px;z-index:2;display:flex;justify-content:space-between;align-items:flex-end;gap:8px;
  pointer-events:none;opacity:0;transform:translateY(4px)}
.iq.pinned .iq-maplbl{opacity:1;transform:none}
.iq-chip{display:inline-flex;align-items:center;gap:7px;min-width:0;max-width:100%;font-size:11px;color:#EEF1FA;padding:5px 10px;border-radius:100px;
  background:rgba(9,12,26,.8);border:1px solid rgba(147,165,255,.2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.iq-ll{font-size:10.5px;color:#BCC5E0;font-variant-numeric:tabular-nums;flex:0 0 auto}
.iq-callout{border-radius:11px;padding:9px 12px;font-size:12px;line-height:1.5;border:1px solid;opacity:0;transform:translateY(6px)}
.iq.s-callout .iq-callout{opacity:1;transform:none}
.iq-callout b{font-weight:600}
.iq-callout.tone-trust{color:#E4F5EE;background:rgba(52,211,153,.09);border-color:rgba(52,211,153,.3)}
.iq-callout.tone-trust b{color:#6EE7B7}
.iq-callout.tone-warn{color:#FFE2DE;background:rgba(239,68,68,.1);border-color:rgba(239,68,68,.3)}
.iq-callout.tone-warn b{color:#FCA5A5}
.iq-callout.tone-info{color:#E6ECFB;background:rgba(59,130,246,.09);border-color:rgba(59,130,246,.26)}
.iq-callout.tone-info b{color:#93C5FD}
@container (max-width:520px){
  .iq-content{padding:12px 13px 11px;gap:9px}
  .iq-head{padding-right:54px}
  .iq-num{font-size:17px;gap:7px}
  .iq-tag{font-size:10px;padding:3px 7px}
  .iq-sub{font-size:11px;margin-top:4px}
  .iq-stats{margin:0 -13px}
  .iq-stats > div{padding:7px 13px 8px}
  .iq-stats b{font-size:15px;margin-top:4px}
  .iq-stats b.iq-sm{font-size:11.5px;margin-top:6px}
  /* two stats: the area is already on the line above, which may wrap here */
  .iq-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .iq-stats > div:nth-child(3){display:none}
  .iq-sub{white-space:normal}
  .iq-callout{font-size:11px;padding:7px 10px}
  .iq-ct{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  /* the map is short here: the place is already in the stats, keep the pin clear */
  .iq-maplbl{display:none}
  .iq-sample{top:7px;left:8px;font-size:9px;padding:2px 7px}
}

/* ---- REST API: mirrored request / response panes, like /calls ---- */
.ap-bar{display:flex;align-items:center;gap:10px;padding:10px 88px 10px 12px;border-bottom:1px solid rgba(147,165,255,.12);background:rgba(255,255,255,.02)}
.ap-seg{position:relative;display:inline-flex;gap:2px;padding:3px;border-radius:10px;background:rgba(255,255,255,.03);border:1px solid rgba(147,165,255,.16)}
.ap-seg b{position:relative;z-index:1;font-size:11.5px;font-weight:600;color:var(--muted,#9A8CB8);padding:5px 11px;border-radius:7px;transition:color .25s ease}
.ap-seg b.on{color:#fff}
.ap-ind{position:absolute;left:0;top:3px;bottom:3px;width:0;border-radius:7px;background:linear-gradient(135deg,var(--electric,#2563EB),#1D4ED8);
  box-shadow:0 6px 16px -8px rgba(37,99,235,.9);transition:transform .45s cubic-bezier(.16,1,.3,1),width .45s cubic-bezier(.16,1,.3,1)}
.ap-panes{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr)}
.ap-pane{display:flex;flex-direction:column;min-width:0;min-height:0}
.ap-res{border-left:1px solid rgba(147,165,255,.12)}
.ap-ph{display:flex;align-items:center;gap:10px;padding:11px 14px;border-bottom:1px solid rgba(147,165,255,.1)}
.ap-tile{flex:0 0 auto;width:30px;height:30px;border-radius:9px;display:grid;place-items:center;color:#93C5FD;
  background:rgba(59,130,246,.12);border:1px solid rgba(59,130,246,.3)}
.ap-tile svg{width:15px;height:15px}
.ap-tile.ok{color:#6EE7B7;background:rgba(52,211,153,.1);border-color:rgba(52,211,153,.3)}
.ap-tile{transition:color .3s ease,background .3s ease,border-color .3s ease}
.ap:not(.s-res) .ap-tile.ok{color:#6B7599;background:rgba(147,165,255,.05);border-color:rgba(147,165,255,.16)}
.ap-pt{display:flex;flex-direction:column;gap:3px;min-width:0}
.ap-pt > b{font-size:12.5px;font-weight:600;color:#F4F2FB}
.ap-pt small{display:flex;align-items:center;gap:6px;font-size:10.5px;color:var(--muted,#9A8CB8);white-space:nowrap;overflow:hidden}
.ap-pt .mth{min-width:0;font-size:9px;padding:1px 6px}
.ap-pt .ep-path{font-size:11px;color:#C7D2FE}
.ap.s-res .ap-st{color:#A7F3D0}
.ap-code{flex:1;min-height:0;margin:0;overflow:hidden;padding:12px 14px;white-space:pre;
  font:400 10.5px/1.65 'Geist Mono',ui-monospace,SFMono-Regular,Menlo,monospace;color:#C9D1EE}
.ap-ln{display:block;opacity:0;transform:translateX(-4px);transition:opacity .3s ease,transform .35s cubic-bezier(.16,1,.3,1);
  transition-delay:calc(var(--i,0) * 60ms)}
.ap.s-in .ap-src .ap-ln,.ap.s-res .ap-json .ap-ln{opacity:1;transform:none}
.ap:not(.s-in) .ap-src .ap-ln,.ap:not(.s-res) .ap-json .ap-ln{transition-delay:0s}
.ap-code .c-k{color:#C4B5FD}.ap-code .c-s{color:#5EEAD4}.ap-code .c-c{color:#6B7599}.ap-code .c-f{color:#93C5FD}
.ap-code .c-n{color:#FCD34D}.ap-code .c-b{color:#F9A8D4}.ap-code .c-key{color:#93C5FD}
@container (max-width:520px){
  .ap-bar{padding:8px 72px 8px 10px}
  .ap-seg b{font-size:10.5px;padding:4px 8px}
  .ap-panes{grid-template-columns:1fr}
  .ap-res{display:none;border-left:0}
  .ap.s-res .ap-req{display:none}
  .ap.s-res .ap-res{display:flex}
  .ap-ph{padding:9px 12px}
  .ap-code{font-size:9.8px;padding:10px 12px}
}

@media(max-width:860px){
  .secprod-frame{border-radius:22px;padding-top:32px}
  /* peeks shrink to a sliver rather than disappearing - still reads as
     "there's another one over there", just doesn't fight the narrower
     screen for room */
  .secprod-viewport,.secprod-slide{height:360px}
  .secprod-slide[data-role="left"]{transform:translateX(-100%) scale(.86)}
  .secprod-slide[data-role="right"]{transform:translateX(0%) scale(.86)}
  .sx-pal{flex-basis:122px}
  .sx-script{padding:14px 12px}.sx-blk,.sx-chip{font-size:11px}
  .secprod-nav{gap:14px}
}
@media(max-width:520px){
  .secprod-viewport,.secprod-slide{height:320px}
  .secprod-slide[data-role="left"]{transform:translateX(-100%) scale(.84)}
  .secprod-slide[data-role="right"]{transform:translateX(0%) scale(.84)}
  .sx-pal{flex-basis:100px;padding:10px 8px 0}
  .sx-script{padding:12px 10px}
  .sx-blk{font-size:10.5px;padding:8px 10px 14px}
  .sx-chip{font-size:10px}
}
@media(prefers-reduced-motion:reduce){
  .secprod *,.secprod *::before,.secprod *::after{animation:none!important;transition:none!important}
  .secprod .sx-cursor,.secprod .sx-ghost{display:none}
}

/* four slides: whichever is two away from the centre sits hidden behind it */
.secprod-slide[data-role="hidden"]{transform:translateX(-50%) scale(.8);opacity:0;z-index:1;pointer-events:none;filter:blur(2px)}

/* Paused CSS loops, to match the scripted ones in showcase.js: .sp-off is on
   the carousel while it is scrolled out of view or the tab is hidden, and
   .sp-rest on a slide once it has fully faded out behind the centre card.
   Neither state is visible, so pausing changes nothing on screen. */
.secprod.sp-off *,.secprod.sp-off *::before,.secprod.sp-off *::after,
.secprod-slide.sp-rest *,.secprod-slide.sp-rest *::before,.secprod-slide.sp-rest *::after{animation-play-state:paused!important}