/* "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 card is the builder itself
   (builder-live.js, builder-real.css / .js), as on /business's hero.
   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(720px,84%);height:400px;
  transition:transform .62s cubic-bezier(.16,1,.3,1),opacity .5s ease;will-change:transform,opacity;
  pointer-events:none}
.secprod-slide[data-role="center"]{transform:translateX(-50%) scale(1);opacity:1;z-index:3;pointer-events:auto}
/* 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}
.secprod-slide[data-role="right"]{transform:translateX(0%) scale(.87);opacity:.5;z-index:2;pointer-events:auto}
/* The peek wash: a pale veil that lifts near-black and flattens contrast
   the way the old blur/contrast/brightness filter did, but as a layer that
   only fades - animating that filter re-rendered three big cards on every
   frame of a slide change. */
.secprod-slide::after{content:"";position:absolute;inset:0;border-radius:var(--r);pointer-events:none;z-index:6;
  background:rgba(150,162,215,.16);opacity:0;transition:opacity .5s ease}
.secprod-slide[data-role="left"]::after,.secprod-slide[data-role="right"]::after{opacity:1}
/* 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,197,253,.45),rgba(147,197,253,.04) 42%,rgba(147,197,253,.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(2,6,23,.55)}
.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 (.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. */
.secprod-slide[data-role="center"]:hover .ax-content,
.secprod-slide[data-role="center"]:hover .iq-content,
.secprod-slide[data-role="center"]:hover .ap-content,
.secprod-slide[data-role="center"]:hover .px-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)}
/* "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)}

/* 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;display:grid}
.secprod-meta>div{grid-area:1/1;min-width:0}
.sp-size{visibility:hidden;pointer-events:none}
.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,197,253,.4)}
.secprod-dot.on{width:24px;background:linear-gradient(90deg,var(--electric),var(--glow))}

/* ---- the IVR builder card: the builder itself (builder-live.js / builder-real.css) ---- */
.secprod .sx-hx{height:100%;width:100%}
.secprod .sx-hx > .bdx{border-radius:14px;box-shadow:none}
/* the card's "Live" tag sits at the top right, so the phone bar's arrow keeps clear of it */
.secprod .sx-hx > .bdx.narrow .bx-pal-bar{padding-right:64px}

/* ---- 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 (IBM Plex Mono only for the code). Each card is a
   size container, so its phone layout follows the card, not the window. ---- */
.ax,.iq,.ap,.px,.cq{position:relative;height:100%;border-radius:14px;border:1px solid rgba(147,197,253,.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,.px-content,.cq-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: an AI receptionist's call, played back in the call log
   (/business/team .callcard / .cc-tl / .cc-tr, voice-player.css .vp) ---- */
.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}
.cx-head{display:flex;align-items:center;gap:8px 10px;padding:12px 70px 12px 16px;border-bottom:1px solid rgba(147,197,253,.12);
  background:rgba(255,255,255,.02);font-size:12.5px;white-space:nowrap;min-width:0}
.cx-dir{font:600 11px 'Geist',sans-serif;color:var(--signal,#2DD4BF)}
.cx-from{font:600 14px 'Geist',sans-serif;color:#F4F2FB;font-variant-numeric:tabular-nums}
.cx-meta{color:var(--faint,#6B7396);font-size:11.5px;font-variant-numeric:tabular-nums;overflow:hidden;text-overflow:ellipsis}
.cx-r{margin-left:auto;flex:0 0 auto}
.cx-body{flex:1;min-height:0;display:flex;flex-direction:column;gap:10px;padding:12px 16px 14px}
.cx-vp{padding:7px 10px 7px 7px;gap:10px}
.cx-vp .vp-btn{width:34px;height:34px;cursor:default}
.cx-vp .vp-wave{height:30px}
.cx-vp .vp-wave i{transition:background .1s ease}
.cx-cols{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:12px}
/* the transcript (.cc-tr): who said what, timed */
.cx-tr{display:flex;flex-direction:column;min-height:0;border:1px solid rgba(147,197,253,.13);border-radius:12px;background:rgba(255,255,255,.02)}
.cx-trh{display:flex;align-items:center;gap:7px;padding:8px 11px;border-bottom:1px solid rgba(147,197,253,.1);font:600 11.5px 'Geist',sans-serif;color:#F4F2FB}
.cx-trh svg{width:14px;height:14px;color:#A5B4FC}
.cx-trh em{margin-left:auto;font-style:normal;font-weight:400;font-size:10.5px;color:var(--faint,#6B7396)}
.cx-lines{list-style:none;margin:0;padding:6px 11px 8px;overflow:hidden;flex:1;min-height:0;display:flex;flex-direction:column;gap:5px;justify-content:flex-start}
.cx-lines li{display:grid;grid-template-columns:26px 56px minmax(0,1fr);gap:6px;font-size:10.5px;line-height:1.4;color:#D9DCEB}
.cx-lines time{color:var(--faint,#6B7396);font-variant-numeric:tabular-nums}
.cx-lines b{font-weight:600;color:#A5B4FC;white-space:nowrap}
.cx-lines li.sp1 b{color:#5EEAD4}
/* the event timeline (.cc-tl): the flow's own rows, filling in from the top,
   each led by its medallion (brand blue; green when answered, slate at the
   end, the AI gradient and the AI's mark for what the AI did) */
.cx-tl{list-style:none;margin:0;padding:0;overflow:hidden;min-height:0;display:flex;flex-direction:column;justify-content:flex-start}
.cx-tl li{flex:0 0 auto;display:grid;grid-template-columns:24px 62px minmax(0,1fr);column-gap:8px;align-items:center;padding:4px 6px;border-bottom:1px solid rgba(37,99,235,.08);
  font-size:10.5px;line-height:15px;border-radius:7px}
.cx-tl li:last-child{border-bottom:0}
.cx-ic.hexm{--hs:24px;--c1:#3B82F6;--c2:#2563EB}
.cx-ic.hexm > .ai-mark{width:52%;height:52%}
.cx-tl li.ev-ok .cx-ic{--c1:#34D399;--c2:#0F766E}
.cx-tl li.ev-end .cx-ic{--c1:#64748B;--c2:#334155}
.cx-t{color:var(--faint,#6B7396);font-size:9.5px;font-variant-numeric:tabular-nums;white-space:nowrap}
.cx-x{min-width:0;color:#EEF1FA;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* each new row lands with a flash; the AI's light up violet */
.cx-lines li.new,.cx-tl li.new{animation:cxIn .45s cubic-bezier(.16,1,.3,1) both}
.cx-tl li.ev-ai.new{animation:cxIn .45s cubic-bezier(.16,1,.3,1) both,cxAi 1.6s ease both}
@keyframes cxIn{from{opacity:0;transform:translateY(8px)}}
@keyframes cxAi{0%,30%{background:rgba(139,92,246,.24);box-shadow:inset 2px 0 0 #A78BFA}100%{background:transparent;box-shadow:inset 2px 0 0 transparent}}
@container (max-width:520px){
  .cx-cols{grid-template-columns:minmax(0,1fr)}
  .cx-tr{display:none}
  .cx-head{padding-right:58px;gap:6px 8px}
  .cx-meta:not(.cx-r){display:none}
  .cx-vp .vp-rate{display:none}
}

/* ---- shared by the cards below: the bar along the top ---- */
.px.out .px-content{opacity:0}
.px-content{transform-origin:50% 35%}
.px-bar{display:flex;align-items:center;gap:11px;padding:11px 88px 11px 14px;border-bottom:1px solid rgba(147,197,253,.12);background:rgba(255,255,255,.02)}
.px-ph{flex:0 0 auto;width:30px;height:30px;border-radius:10px;display:grid;place-items:center;color:#93C5FD;
  background:linear-gradient(135deg,rgba(59,130,246,.3),rgba(37,99,235,.1));border:1px solid rgba(96,165,250,.3)}
.px-ph svg{width:16px;height:16px}
.px-who{display:flex;flex-direction:column;min-width:0;line-height:1.25}
.px-who b{font-size:13px;font-weight:600;color:#F4F2FB;font-variant-numeric:tabular-nums}
.px-who small{font-size:10.5px;color:var(--muted,#A9B4D6);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@container (max-width:520px){
  .px-bar{padding:9px 76px 9px 11px;gap:9px}
}

/* ---- Bring your number: checked, documents in, then the track to "Ported" ---- */
.px{background:radial-gradient(70% 55% at 100% 0%,rgba(45,212,191,.12),transparent 70%),
  radial-gradient(60% 50% at 0% 100%,rgba(37,99,235,.14),transparent 70%),linear-gradient(180deg,#0d1226,#080915)}
.px-main{flex:1;min-height:0;display:flex;flex-direction:column;gap:12px;padding:16px 18px 14px}
.px-num{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:46px;padding:10px 14px;border-radius:13px;
  background:rgba(6,8,20,.55);border:1px solid rgba(147,197,253,.2);transition:border-color .35s ease}
.px.s-ok .px-num{border-color:rgba(52,211,153,.45)}
.px-n{font-size:20px;font-weight:600;letter-spacing:-.01em;color:#F4F2FB;font-variant-numeric:tabular-nums;white-space:nowrap}
.px.s-type .px-n::after{content:"";display:inline-block;width:2px;height:18px;margin-left:2px;vertical-align:-3px;background:#93C5FD;animation:pxCaret .8s step-end infinite}
@keyframes pxCaret{50%{opacity:0}}
.px-ok{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:600;color:#34D399;white-space:nowrap;opacity:0;transform:translateX(6px);transition:opacity .35s ease,transform .35s cubic-bezier(.16,1,.3,1)}
.px-ok .hexm.ck{--hs:18px}
.px.s-ok .px-ok{opacity:1;transform:none}
.px-docs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;opacity:0;transform:translateY(8px);transition:opacity .4s ease,transform .4s cubic-bezier(.16,1,.3,1)}
.px.s-docs .px-docs{opacity:1;transform:none}
.px-doc{display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 9px;align-items:center;padding:10px 11px;border-radius:12px;
  background:rgba(147,197,253,.05);border:1px solid rgba(147,197,253,.14);transition:border-color .35s ease,background .35s ease}
.px-doc > svg{width:20px;height:20px;color:#93C5FD}
.px-doc > span{min-width:0;display:flex;flex-direction:column;line-height:1.3}
.px-doc b{font-size:11.5px;font-weight:600;color:#F4F2FB;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.px-doc small{font-size:10px;color:var(--muted,#A9B4D6);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.px-doc em{grid-column:1/-1;display:inline-flex;align-items:center;gap:5px;font-style:normal;font-size:10.5px;font-weight:600;color:#8E9BC4;transition:color .3s ease}
.px-doc em svg{width:11px;height:11px;stroke-width:3;opacity:0;transition:opacity .3s ease}
.px-doc.done{border-color:rgba(52,211,153,.36);background:rgba(52,211,153,.06)}
.px-doc.done em{color:#34D399}.px-doc.done em svg{opacity:1}
.px-track{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin:auto 0;padding:0;list-style:none;opacity:0;transition:opacity .4s ease}
.px.s-track .px-track{opacity:1}
.px-track li{position:relative;display:flex;flex-direction:column;align-items:center;gap:7px;font-size:10.5px;font-weight:500;color:#8E9BC4;text-align:center;transition:color .3s ease}
.px-track li::before{content:"";position:absolute;top:7px;right:50%;width:100%;height:2px;border-radius:2px;background:rgba(147,197,253,.14);transition:background .45s ease}
.px-track li:first-child::before{display:none}
.px-track i{position:relative;z-index:1;width:16px;height:16px;border-radius:50%;background:#141a33;border:2px solid rgba(147,197,253,.24);transition:background .3s ease,border-color .3s ease,box-shadow .3s ease}
.px-track li.done{color:#C9D2EE}
.px-track li.done::before,.px-track li.now::before{background:linear-gradient(90deg,#3B82F6,#60A5FA)}
.px-track li.done i{background:#3B82F6;border-color:#3B82F6}
.px-track li.now{color:#fff;font-weight:600}
.px-track li.now i{border-color:#60A5FA;box-shadow:0 0 0 4px rgba(59,130,246,.2)}
.px.s-done .px-track li i{background:#34D399;border-color:#34D399}
.px.s-done .px-track li::before{background:linear-gradient(90deg,#3B82F6,#34D399)}
.px-say{min-height:34px;display:flex;align-items:center;justify-content:center;padding:8px 12px;border-radius:11px;font-size:11.5px;line-height:1.35;text-align:center;color:#C9D2EE;
  background:rgba(59,130,246,.07);border:1px solid rgba(96,165,250,.2);opacity:0;transition:opacity .4s ease,background .4s ease,border-color .4s ease,color .4s ease}
.px.s-track .px-say{opacity:1}
.px.s-done .px-say{color:#D1FAE5;background:rgba(16,185,129,.09);border-color:rgba(52,211,153,.3)}
@container (max-width:520px){
  .px-main{padding:12px 11px 11px;gap:9px}
  .px-n{font-size:16px}
  .px-num{min-height:40px;padding:8px 11px}
  .px-ok{font-size:10px}
  .px-doc{padding:8px 9px}
  .px-doc small{display:none}
  .px-track li{font-size:9.5px}
  .px-say{font-size:10.5px;padding:7px 9px}
}

/* ---- CLI Check: the dashboard's live check (biz-cli.css .ck-live, .ck-lt,
   .ck-dg; business-team.css .ov-ch, .td-t; cli-check.css .cc-v), its own
   values copied here so the tile looks exactly like the screen ---- */
.cq{--ink:#ECEFF8;--mut:#9AA4C4;--faint:#5E6888;--line:rgba(148,170,230,.085);
  --ok:#34D399;--info:#7DD3FC;--bad:#F87171;--warn:#FBBF24;
  background:linear-gradient(180deg,#0B1022,#090D1A)}
.cq.out .cq-content{opacity:0}
.cq-content{transform-origin:50% 35%}
.cq-ch{display:flex;align-items:center;gap:12px;min-height:48px;padding:0 16px;border-bottom:1px solid var(--line)}
.cq-ch > div{flex:1;min-width:0;display:flex;align-items:baseline;gap:10px;white-space:nowrap;overflow:hidden}
.cq-h{font:600 13.5px/1.2 'Geist',sans-serif;letter-spacing:-.005em;color:var(--ink)}
.cq-ch small{font-size:12px;color:var(--faint);overflow:hidden;text-overflow:ellipsis;font-variant-numeric:tabular-nums}
.cq-left{font-size:12px;color:var(--mut);font-variant-numeric:tabular-nums;white-space:nowrap}
.cq-btn{display:inline-flex;align-items:center;height:26px;padding:0 10px;border-radius:8px;font:500 12px/1 'Geist',sans-serif;color:#C9D2EA;
  border:1px solid rgba(148,170,230,.16);background:rgba(148,170,230,.04);white-space:nowrap}
.cq-fin{display:none}
.cq.s-done .cq-fin{display:inline-flex}
.cq.s-done .cq-end,.cq.s-done .cq-left,.cq.s-done .cq-prog{display:none}
.cq-prog{position:relative;height:2px;margin-top:-2px;overflow:hidden}
.cq-prog i{display:block;height:100%;width:0;background:#3B82F6;border-radius:0 2px 2px 0;transition:width .7s cubic-bezier(.16,1,.3,1)}
.cq-r{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr) minmax(0,1.6fr);align-items:center;column-gap:16px;height:52px;padding:0 16px;
  border-bottom:1px solid rgba(148,170,230,.055);font-size:13px;color:var(--mut)}
.cq-r:last-child{border-bottom:0}
.cq-th{height:34px;font:500 12px/1 'Geist',sans-serif;color:var(--faint);border-bottom-color:var(--line)}
.cq-c{display:inline-flex;align-items:center;gap:10px;min-width:0;color:var(--ink);font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cq-sil{display:inline-grid;place-items:center;flex:0 0 auto;width:18px;height:18px;color:#7F9CD3;transition:color .4s ease}
.cq-sil .cc-sil{display:block;width:100%;height:100%;overflow:hidden}
.cq-sil .cc-sil path{fill:currentColor;stroke:none}
.cq-r.shown[data-i] .cq-sil{color:#A9BDF0}
.cq-tl{font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cq-got{display:inline-flex;align-items:center;gap:12px;min-width:0;color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap}
.cq-dg{display:inline-flex;white-space:pre;font:500 13.5px/1.2 'Geist',sans-serif;font-variant-numeric:tabular-nums;letter-spacing:.005em;color:#DCE3F8}
.cq-dg i{display:inline-block;font-style:normal}
.cq-dg i.m{color:#6EE7B7}.cq-dg i.y{color:#FCD34D}.cq-dg i.d{color:#7DD3FC}.cq-dg i.x{color:#FCA5A5}.cq-dg i.w{color:#FCD34D}.cq-dg i.s{color:#5E6A8F}
.cq-dg.wait,.cq-dg i.was{color:#5E6A8F}
.cq-dg i.flip{animation:cqRoll .38s cubic-bezier(.2,.9,.25,1.15) both}
@keyframes cqRoll{0%{opacity:0;transform:translateY(-.7em) scaleY(.6)}60%{opacity:1}100%{opacity:1;transform:none}}
.cq-st{display:inline-flex;align-items:center;gap:7px;font:500 12px/1 'Geist',sans-serif;font-style:normal;color:var(--faint)}
.cq-st:empty{display:none}
.cq-st::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.55}
.cq-st.on{color:#93C5FD}
.cq-st.on::before{opacity:1;animation:cqPulse 1.1s ease-in-out infinite}
@keyframes cqPulse{50%{opacity:.35}}
.cq-v{--t:var(--info);display:none;align-items:center;gap:6px;flex:0 0 auto;white-space:nowrap;font:600 12px/1 'Geist',system-ui,sans-serif;color:var(--t)}
.cq-v i{display:inline-block;flex:none;width:15px;height:5px;border-radius:99px;background:var(--t)}
.cq-v.t-ok{--t:var(--ok)}.cq-v.t-info{--t:var(--info)}.cq-v.t-bad{--t:var(--bad)}.cq-v.t-warn{--t:var(--warn)}
.cq-r.shown .cq-v{display:inline-flex;animation:cqIn .3s cubic-bezier(.16,1,.3,1) both}
@keyframes cqIn{from{opacity:0;transform:translateX(-6px)}}
/* a phone, as the dashboard lays the live check out there: the country on
   its own line, what arrived under it, no test line */
@container (max-width:520px){
  .cq-ch{padding:0 30px 0 12px;min-height:44px;gap:6px}
  .cq-ch > div{flex-direction:column;align-items:flex-start;gap:3px}
  .cq-from{display:none}
  .cq-btn{height:24px;padding:0 8px;font-size:11.5px}
  .cq-end,.cq.s-done .cq-again{display:none}
  .cq-th{display:none}
  .cq-tl{display:none}
  .cq-r{grid-template-columns:minmax(0,1fr);row-gap:3px;height:auto;padding:6px 30px 6px 12px}
  .cq-c{font-size:12.5px;gap:8px}
  .cq-sil{width:16px;height:16px}
  .cq-got{gap:4px 10px;flex-wrap:wrap}
  .cq-dg{font-size:12.5px}
}
@media (prefers-reduced-motion:reduce){ .cq-dg i.flip,.cq-r.shown .cq-v,.cq-st.on::before{animation:none} .cq-prog i{transition:none} }

/* ---- 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;
  color:#BCC5E0}
.iq-tag.business{color:#5EEAD4}
.iq-tag.alert{color:#FCA5A5}
.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,197,253,.13);border-bottom:1px solid rgba(147,197,253,.13)}
.iq-stats > div{padding:9px 18px 10px;min-width:0}
.iq-stats > div + div{border-left:1px solid rgba(147,197,253,.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-sm2{display:block;margin-top:2px;font-size:10px;color:var(--muted,#A9B4D6);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.iq-meter{display:block;height:4px;border-radius:4px;background:rgba(147,197,253,.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,197,253,.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,197,253,.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,197,253,.1);stroke:rgba(147,197,253,.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}
.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-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,197,253,.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}
  .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}
}

/* ---- 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,197,253,.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,197,253,.16)}
.ap-seg b{position:relative;z-index:1;font-size:11.5px;font-weight:600;color:var(--muted,#A9B4D6);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,197,253,.12)}
.ap-ph{display:flex;align-items:center;gap:10px;padding:11px 14px;border-bottom:1px solid rgba(147,197,253,.1)}
/* the panes' marks are medallions; the response's check waits grey until it lands */
.ap-hex{--hs:32px;transition:filter .3s ease,opacity .3s ease}
.ap:not(.s-res) .ap-hex.ck{filter:grayscale(1);opacity:.55}
.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,#A9B4D6);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 'IBM Plex 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}
  /* the slideshow runs to the screen edges rather than inside the page's
     margins and the frame's padding, which left the centre card under
     two-thirds of a phone's width; the peeks sit at the screen edges */
  .secprod-viewport{width:100vw;margin-left:calc(50% - 50vw)}
  .secprod-slide{width:min(720px,86%)}
  /* 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)}
  .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)}
}
@media(prefers-reduced-motion:reduce){
  .secprod *,.secprod *::before,.secprod *::after{animation:none!important;transition:none!important}
  .secprod .bdx-hand{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}

/* 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}

/* ---- Fraud detection: the business Calls tab's card, live (call-demo.js,
   call-demo.css on top of biz-calls.css) ---- */
.fxc{height:100%}
.secprod .fxc .cv-head{padding-right:74px}
@container (max-width:520px){ .secprod .fxc .cv-head{padding-right:64px} }

/* ======================================================================
   Bento (data-bento, the homepage): every product in its own tile, after
   Stripe's product tiles. Title top left with a small arrow at the right;
   the product's live mock floats underneath on a soft wash of its colour,
   inset from the sides and clear of the bottom edge. The whole tile is the
   link. The mocks are the carousel's own, and each is a size container, so
   a narrow tile gets their phone layout without anything being scaled.
   ====================================================================== */
.sb{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;max-width:1180px;margin:0 auto}
.sb-tile{--wa:#3B82F6;--wb:#38BDF8;--wc:#2DD4BF;
  position:relative;grid-column:span var(--span,1);min-width:0;
  /* title and picture are rows of the bento itself (subgrid), so titles
     that wrap to different lengths still leave the pictures in a row level */
  display:grid;grid-row:span 2;grid-template-rows:auto 1fr;grid-template-rows:subgrid;row-gap:0;
  padding:26px 26px 0;border-radius:var(--card-r);color:inherit;text-decoration:none;overflow:hidden;isolation:isolate;
  background:var(--card-bg);border:1px solid var(--card-brd);
  transition:border-color .25s ease,transform .35s cubic-bezier(.16,1,.3,1)}
.sb-tile::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:-1;
  background:radial-gradient(120% 60% at 0% 0%,rgba(255,255,255,.035),transparent 60%)}
.sb-tile:hover{border-color:var(--card-brd-on)}
.sb-tile:focus-visible{outline:2px solid var(--signal,#2DD4BF);outline-offset:3px}

/* the title: what it is in white, what it does in the muted grey after it */
.sb-head{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;margin-bottom:24px;min-height:52px}
.sb-head h3{margin:0;max-width:34ch;font-family:'Geist',system-ui,sans-serif;font-size:18.5px;line-height:1.38;font-weight:500;letter-spacing:-.012em;color:#9FAACB;text-wrap:pretty}
.sb-head h3 b{font-weight:600;color:#F4F6FC}
.sb-go{flex:none;display:grid;place-items:center;width:32px;height:32px;border-radius:10px;color:#93C5FD;
  background:rgba(59,130,246,.1);border:1px solid rgba(147,197,253,.22);transition:background .2s ease,color .2s ease,border-color .2s ease}
.sb-go .arr{width:15px;height:15px;transform:rotate(-45deg);transition:transform .25s cubic-bezier(.16,1,.3,1)}
.sb-tile:hover .sb-go{background:#2563EB;border-color:#2563EB;color:#fff}
.sb-tile:hover .sb-go .arr{transform:rotate(-45deg) translateX(2px)}

/* the picture: a wash of the product's colour rising from the bottom, the
   mock floating on it */
.sb-pic{position:relative;align-self:end;min-height:440px;margin:0 -26px;padding:0 26px 34px}
.sb-wash{position:absolute;inset:16% 0 0;pointer-events:none;z-index:0;
  background:
    radial-gradient(60% 75% at 12% 100%,color-mix(in srgb,var(--wa) 62%,transparent),transparent 72%),
    radial-gradient(55% 70% at 88% 100%,color-mix(in srgb,var(--wc) 50%,transparent),transparent 72%),
    radial-gradient(70% 80% at 50% 115%,color-mix(in srgb,var(--wb) 55%,transparent),transparent 75%);
  -webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 46%);mask-image:linear-gradient(180deg,transparent 0%,#000 46%);
  opacity:.72;transition:opacity .4s ease}
.sb-tile:hover .sb-wash{opacity:.85}
.sb-card{position:relative;z-index:1;height:400px;border-radius:15px;pointer-events:none;
  box-shadow:0 0 0 1px rgba(147,197,253,.14),0 34px 60px -34px rgba(2,4,14,.95),0 12px 26px -16px rgba(2,4,14,.8)}
.sb .secprod-card{border-radius:15px;background:#0b0f22}
.sb .secprod-card::before,.sb .secprod-card::after,.sb .secprod-kind{display:none}

/* each product its own wash, from the brand's blues and teal (AI keeps its violet) */
.sb-tile[data-wash="ivr"]{--wa:#2563EB;--wb:#38BDF8;--wc:#2DD4BF}
.sb-tile[data-wash="intel"]{--wa:#0EA5E9;--wb:#2DD4BF;--wc:#3B82F6}
.sb-tile[data-wash="api"]{--wa:#3B82F6;--wb:#60A5FA;--wc:#22D3EE}
.sb-tile[data-wash="ai"]{--wa:#7C3AED;--wb:#3B82F6;--wc:#C084FC}
.sb-tile[data-wash="fraud"]{--wa:#3B82F6;--wb:#F87171;--wc:#2DD4BF}
.sb-tile[data-wash="port"]{--wa:#2DD4BF;--wb:#3B82F6;--wc:#38BDF8}
.sb-tile[data-wash="cli"]{--wa:#1D4ED8;--wb:#2DD4BF;--wc:#60A5FA}

/* the screen leans in a touch on hover, as on the carousel */
.sb-tile:hover .ax-content,.sb-tile:hover .iq-content,.sb-tile:hover .ap-content,.sb-tile:hover .px-content,.sb-tile:hover .cq-content{transform:scale(1.03);filter:brightness(1.06) saturate(1.1)}
/* a tile off screen holds still (its mock waits at the gate) */
.sb-tile.sb-rest *{animation-play-state:paused!important}

@media (max-width:980px){
  .sb{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sb-tile{grid-column:span 1}
  .sb-tile[style*="--span:2"]{grid-column:span 2}
}
/* Phones, after Stripe's mobile tiles: near edge to edge, a big title with a
   square expand button, and the product in the same inset frame as the
   feature tiles' pictures above it (index.html .fb, pinlist.css .pv), so the
   tile's light only shows round its edge. Inside the frame the mock is drawn
   a little closer, running off its right and bottom edges. */
@media (max-width:640px){
  .sb{grid-template-columns:minmax(0,1fr);gap:12px}
  .sb-tile,.sb-tile[style*="--span:2"]{grid-column:auto;padding:24px 0 0;border-radius:22px}
  .sb-head{margin:0 0 6px;min-height:0;padding:0 18px 0 22px;gap:14px}
  .sb-head h3{font-size:20.5px;line-height:1.3;letter-spacing:-.02em;max-width:none}
  .sb-go{width:42px;height:42px;border-radius:12px}
  .sb-go .arr{width:17px;height:17px}
  .sb-pic{position:relative;min-height:0;height:auto;margin:0;padding:4px 14px 14px;overflow:visible}
  /* the wash on phones: one smooth arc of light rising from the tile's
     bottom edge (its blue, then its teal or sky), so the mock sits on light;
     no small pools of colour to muddy into each other */
  .sb-wash{inset:auto 0 0 0;height:78%;opacity:1;-webkit-mask-image:none;mask-image:none;
    background:radial-gradient(130% 70% at 50% 100%,color-mix(in srgb,var(--wb) 55%,transparent),transparent 70%),
      linear-gradient(180deg,transparent,color-mix(in srgb,var(--wa) 22%,transparent) 70%,color-mix(in srgb,var(--wc) 30%,transparent))}
  .sb-tile:hover .sb-wash{opacity:1}
  /* the frame: pinlist.css's .pv, a faint dot grid and a strip of light along its top */
  .sb-card{height:auto;aspect-ratio:1/1.08;border-radius:22px;overflow:hidden;isolation:isolate;
    border:1px solid rgba(147,197,253,.15);background:linear-gradient(180deg,rgba(255,255,255,.03),transparent 45%),#080C1D;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 0 0 1px rgba(147,197,253,.12),0 34px 60px -34px rgba(2,4,14,.95)}
  .sb-card::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
    background-image:radial-gradient(circle,rgba(147,197,253,.17) 1px,transparent 1.4px);background-size:20px 20px;background-position:center;
    -webkit-mask-image:radial-gradient(75% 70% at 50% 42%,#000,transparent);mask-image:radial-gradient(75% 70% at 50% 42%,#000,transparent)}
  .sb-card::after{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;border-radius:inherit;
    background:linear-gradient(90deg,transparent,rgba(255,255,255,.5),transparent) 14% 0/72% 1px no-repeat,
      linear-gradient(180deg,transparent 72%,#080C1D 98%)}
  /* the mock, closer: its phone layout, scaled up from the frame's top left
     corner, so it fills the frame and runs off two of its edges */
  .sb .secprod-card{position:absolute;z-index:1;top:12px;left:12px;width:calc(100% - 12px);height:calc(100% - 12px);transform:scale(1.08);transform-origin:0 0}
  /* no bezel of their own: the mock's panels sit on the frame */
  .sb .secprod-card,.sb .ax,.sb .iq,.sb .ap,.sb .px,.sb .cq,.sb .sx-hx > .bdx{background:transparent;border-color:transparent;border-radius:0;box-shadow:none}
}
@media (prefers-reduced-motion:reduce){
  .sb-tile,.sb-wash,.sb-go,.sb-go .arr{transition:none}
}

/* ---- a product's sheet (showcase.js openSheet), Stripe-style: on a phone
   it rises from the bottom with a handle to swipe it away; wider, a panel
   in the middle. Its picture is the tile's own live mock, moved in ---- */
.psh-lock,.psh-lock body{overflow:hidden}
.psh-bg{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;padding:24px;
  background:rgba(3,5,14,calc(.66 * var(--fade,1)));-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  opacity:0;transition:opacity .3s ease}
.psh-bg.on{opacity:1}
.psh{position:relative;width:min(1180px,100%);max-height:calc(100dvh - 48px);overflow-y:auto;overscroll-behavior:contain;outline:0;
  border-radius:22px;background:linear-gradient(180deg,#111733,#0A0E22 340px);border:1px solid rgba(147,197,253,.16);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 40px 120px -30px rgba(0,0,0,.9);font-family:'Geist',system-ui,sans-serif;
  transform:translateY(16px) scale(.98);transition:transform .45s cubic-bezier(.16,1,.3,1)}
.psh-bg.on .psh{transform:none}
.psh.drag{transition:none}
.psh-grab{display:none}
.psh-x{position:absolute;top:16px;right:16px;z-index:4;display:grid;place-items:center;width:36px;height:36px;border-radius:10px;cursor:pointer;
  color:#C7D2FE;background:rgba(99,102,241,.14);border:1px solid rgba(147,197,253,.2);transition:background .2s,color .2s}
.psh-x:hover{background:rgba(99,102,241,.28);color:#fff}
.psh-x svg{width:15px;height:15px}
.psh-in{padding:44px 48px 40px}
/* what it is and where to go on the left, what it gives you on the right */
.psh-top{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:28px 56px;align-items:start}
.psh-top .psh-pts{margin:38px 0 0}
.psh-k{display:inline-block;font-size:13.5px;font-weight:600;background:linear-gradient(90deg,#93C5FD,#5EEAD4);-webkit-background-clip:text;background-clip:text;color:transparent}
.psh h2{margin:10px 0 0;padding-right:44px;font-size:clamp(25px,4vw,31px);line-height:1.12;font-weight:700;letter-spacing:-.03em;color:#F4F6FF;text-wrap:balance}
.psh p{margin:14px 0 0;max-width:none;font-size:16px;line-height:1.6;color:#A6B0D2}
.psh-acts{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}
.psh-pts{list-style:none;margin:28px 0 0;padding:0;display:grid;gap:12px}
.psh-pts li{display:flex;align-items:flex-start;gap:12px;font-size:15px;line-height:1.5;color:#D5DBF2}
.psh-pts .hexm.ck{--hs:22px;margin-top:1px}
/* below the head it flows like a page: one builder to watch, wide; three
   short reasons; more to build, side by side; and the way in */
.psh-demo{position:relative;height:460px;border-radius:14px;overflow:hidden;container-type:inline-size;
  box-shadow:0 0 0 1px rgba(147,197,253,.16),0 30px 70px -30px rgba(0,0,0,.9)}
.psh-demo.sm{height:340px;border-radius:12px}
.psh-demo .sx-hx{height:100%;width:100%}
.psh-demo .sx-hx > .bdx{border-radius:inherit;box-shadow:none}
/* the one to watch, on a wash of the brand's light, bleeding to the sheet's edges */
.psh-hero{margin:44px -48px 0;padding:44px 48px 30px;
  background:radial-gradient(60% 80% at 0% 100%,rgba(37,99,235,.34),transparent 70%),radial-gradient(50% 70% at 100% 0%,rgba(124,58,237,.22),transparent 70%),
    radial-gradient(40% 60% at 85% 100%,rgba(45,212,191,.16),transparent 70%),linear-gradient(180deg,rgba(255,255,255,.02),transparent)}
.psh-hero figcaption{max-width:62ch;margin:18px 0 0;font-size:14.5px;line-height:1.55;color:#9AA4C8}
.psh-hero figcaption b{color:#E7EBFA;font-weight:600}
/* a homepage feature's sheet (feature-sheets.js): its own picture beside how it works, step by step */
.psh-hero.psh-split{display:grid;grid-template-columns:minmax(0,440px) minmax(0,1fr);gap:28px 60px;align-items:center}
.psh-pvbox{width:100%;aspect-ratio:1;border-radius:22px}
.psh-pvbox .pv{width:100%;height:100%;box-shadow:0 0 0 1px rgba(147,197,253,.16),0 30px 70px -30px rgba(0,0,0,.9)}
.psh-split figcaption{max-width:none;margin:0}
.psh-split figcaption h3{margin:0;font-size:22px;font-weight:650;letter-spacing:-.022em;color:#F4F6FF}
.psh-steps{list-style:none;counter-reset:st;margin:22px 0 0;padding:0;display:grid;gap:20px}
.psh-steps li{counter-increment:st;display:grid;grid-template-columns:36px minmax(0,1fr);gap:16px;align-items:start;font-size:15.5px;line-height:1.55;color:#C3CBE6}
.psh-steps li::before{content:counter(st);display:grid;place-items:center;width:36px;height:36px;border-radius:11px;font-weight:650;font-size:15px;color:#BFDBFE;
  background:rgba(59,130,246,.12);border:1px solid rgba(147,197,253,.26)}
.psh-steps li span{padding-top:6px}
@media(max-width:900px){
  .psh-hero.psh-split{grid-template-columns:minmax(0,1fr)}
  .psh-pvbox{max-width:440px;margin:0 auto}
}
.psh-perks{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px;margin:40px 0 0;padding:0}
.psh-perks li{display:flex;flex-direction:column;gap:12px;font-size:14.5px;line-height:1.55;color:#A6B0D2}
.psh-perks .hexm{--hs:34px;--c1:#60A5FA;--c2:#1D4ED8}
.psh-h3{margin:56px 0 0;font-size:21px;font-weight:650;letter-spacing:-.02em;color:#F4F6FF}
.psh-more{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin-top:20px}
.psh-card{min-width:0}
.psh-card h4{margin:16px 0 0;font-size:16px;font-weight:650;letter-spacing:-.012em;color:#F4F6FF}
.psh-card p{margin:6px 0 0;font-size:14px;line-height:1.55;color:#9AA4C8}
.psh-lnk{display:inline-block;margin-top:10px;font-size:14px;font-weight:600;color:#93C5FD;text-decoration:none}
.psh-lnk:hover{color:#fff}
.psh-end{margin:60px -48px -40px;padding:52px 48px 56px;text-align:center;border-top:1px solid rgba(147,197,253,.1);
  background:radial-gradient(50% 90% at 50% 100%,rgba(37,99,235,.16),transparent 70%)}
.psh-end h3{margin:0;font-size:24px;font-weight:650;letter-spacing:-.025em;color:#F4F6FF}
.psh-end .psh-acts{justify-content:center;margin-top:20px}
@media(max-width:640px){
  .psh-bg{align-items:flex-end;padding:0}
  .psh{width:100%;max-height:calc(100dvh - 40px);border-radius:24px 24px 0 0;border-bottom:0;transform:translateY(100%);
    transition:transform .5s cubic-bezier(.16,1,.3,1);padding-bottom:env(safe-area-inset-bottom)}
  .psh-bg.on .psh{transform:none}
  .psh-grab{display:block;position:sticky;top:0;z-index:3;height:28px;margin-bottom:-28px;touch-action:none;cursor:grab}
  .psh-grab i{position:absolute;left:50%;top:10px;width:40px;height:5px;margin-left:-20px;border-radius:3px;background:rgba(199,210,254,.34)}
  .psh-x{top:20px}
  .psh-in{padding:36px 20px 22px}
  .psh-top{grid-template-columns:minmax(0,1fr);gap:0}
  .psh-top .psh-pts{margin:28px 0 0}
  .psh-hero{margin:30px -20px 0;padding:26px 20px 20px}
  .psh-demo{height:420px}
  .psh-perks{grid-template-columns:minmax(0,1fr);gap:18px;margin-top:30px}
  .psh-perks li{flex-direction:row;align-items:flex-start}
  .psh-perks .hexm{--hs:30px}
  .psh-h3{margin-top:40px}
  .psh-more{grid-template-columns:minmax(0,1fr);gap:32px}
  .psh-demo.sm{height:380px}
  .psh-end{margin:44px -20px -22px;padding:40px 20px 44px}
  .psh-end h3{font-size:21px}
  .psh-acts .spf-btn{flex:1 1 100%;justify-content:center}
}
@media(prefers-reduced-motion:reduce){.psh,.psh-bg{transition:none}}
@media(max-width:900px) and (min-width:641px){
  .psh-in{padding:40px 32px 32px}
  .psh-top{grid-template-columns:minmax(0,1fr);gap:0}
  .psh-top .psh-pts{margin:28px 0 0}
  .psh-hero{margin:36px -32px 0;padding:32px 32px 24px}
  .psh-perks,.psh-more{grid-template-columns:minmax(0,1fr)}
  .psh-end{margin:52px -32px -32px;padding:44px 32px 48px}
}

/* ---- Numberprint's sheet: the tile's live lookup as its picture, and a
   slice of a report in each card (showcase.js MINIS), the report's look ---- */
.psh-live{max-width:820px;margin:0 auto;background:#0b0f22}
.psh-live .secprod-card{height:100%;border-radius:inherit}
.psh-mini{height:100%;box-sizing:border-box;padding:18px 18px 0;overflow:hidden;font-family:'Geist',system-ui,sans-serif;color:#EEF1FA;
  background:linear-gradient(180deg,rgba(255,255,255,.035),transparent 50%),#0b0f22}
.pm-stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));margin:-18px -18px 0;border-bottom:1px solid rgba(147,197,253,.13)}
.pm-stats > div{padding:16px 18px;min-width:0}
.pm-stats > div + div{border-left:1px solid rgba(147,197,253,.13)}
.pm-l{display:block;font-size:12px;font-weight:500;color:#929FC8}
.pm-score{display:block;margin-top:6px;font-size:34px;font-weight:600;line-height:1;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.pm-meter{display:block;height:5px;margin-top:10px;border-radius:5px;background:rgba(147,197,253,.13);overflow:hidden}
.pm-meter i{display:block;height:100%;width:35%;border-radius:inherit;background:#FBBF24;transform:scaleX(0);transform-origin:left;transition:transform 1.1s cubic-bezier(.16,1,.3,1)}
.psh-mini.on .pm-meter i{transform:none}
.pm-sm{display:block;margin-top:10px;font-size:17px;font-weight:600}
.pm-stats small,.pm-kv small,.pm-h small{display:block;margin-top:3px;font-size:12px;font-weight:400;color:#929FC8}
.pm-callout{margin-top:16px;padding:12px 14px;border-radius:11px;font-size:13px;line-height:1.5;color:#BCC5E0;
  background:rgba(96,165,250,.07);box-shadow:inset 0 0 0 1px rgba(96,165,250,.22)}
.pm-callout b{color:#EEF1FA;font-weight:600}
.pm-h{margin:-18px -18px 0;padding:14px 18px;font-size:14px;font-weight:600;border-bottom:1px solid rgba(147,197,253,.13)}
.pm-tl{list-style:none;margin:0;padding:6px 0 0;position:relative}
.pm-tl li{position:relative;display:grid;grid-template-columns:96px minmax(0,1fr);gap:2px 12px;padding:10px 0 10px 18px}
.pm-tl li::before{content:"";position:absolute;left:3px;top:15px;width:7px;height:7px;border-radius:50%;background:#60A5FA;box-shadow:0 0 0 3px rgba(96,165,250,.16)}
.pm-tl li::after{content:"";position:absolute;left:6px;top:24px;bottom:-12px;width:1px;background:rgba(147,197,253,.18)}
.pm-tl li:last-child::after{display:none}
.pm-tl li.chg::before{background:#FBBF24;box-shadow:0 0 0 3px rgba(251,191,36,.18)}
.pm-tl li.first::before{background:#64748B;box-shadow:none}
.pm-tl time{grid-row:span 2;font-size:12px;color:#929FC8;font-variant-numeric:tabular-nums}
.pm-tl b{font:600 13px/1.3 'Geist',system-ui,sans-serif;letter-spacing:.02em;font-variant-numeric:tabular-nums}
.pm-tl small{font-size:12px;color:#929FC8}
.pm-tl li.chg small{color:#FCD34D}
.pm-kv{margin:0;display:grid;gap:0}
.pm-kv > div:last-child{border-bottom:0}
.pm-kv > div{display:grid;grid-template-columns:90px minmax(0,1fr);gap:12px;padding:9px 0;border-bottom:1px solid rgba(147,197,253,.09)}
.pm-kv dt{font-size:12.5px;color:#929FC8}
.pm-kv dd{margin:0;font-size:14px;font-weight:600;font-variant-numeric:tabular-nums}
.psh-demo.sm:has(.psh-mini){height:330px}
@media(max-width:640px){ .psh-live{height:470px} .psh-demo.sm:has(.psh-mini){height:auto} .psh-mini{padding-bottom:16px} }

/* AI Suite's fraud card, played (showcase.js runScam): the Calls tab's own
   number, meter and curve (fraud-viz.css), the line being said, and the
   warning once it's a likely scam */
.pm-fr-n{display:flex;align-items:baseline;gap:5px;white-space:nowrap}
.pm-fr-n b{font:700 36px/1 'Geist',sans-serif;letter-spacing:-.03em;font-variant-numeric:tabular-nums;color:#fff;transition:color .3s}
.pm-fr-n > span{font-size:13px;color:#8E9BC4}
.pm-fr-n em{margin-left:4px;align-self:center;font:600 11.5px/1 'Geist',sans-serif;font-style:normal;padding:5px 9px;border-radius:100px;white-space:nowrap}
.pm-fr-n em.b-low{color:#6EE7B7;background:rgba(52,211,153,.12)}
.pm-fr-n em.b-elevated{color:#FCD34D;background:rgba(251,191,36,.12)}
.pm-fr-n em.b-high{color:#FDBA74;background:rgba(249,115,22,.14)}
.pm-fr-n em.b-critical{color:#FDA4AF;background:rgba(244,63,94,.16)}
/* the scam type on its own row, so a longer one never moves the rest */
.pm-fr-type{display:flex;align-items:baseline;gap:8px;margin-top:10px;font-size:13px;white-space:nowrap;overflow:hidden}
.pm-fr-type > span{color:#929FC8}
.pm-fr-type b{font-weight:600;color:#EEF1FA;overflow:hidden;text-overflow:ellipsis}
.pm-fr-type b.wait{font-weight:500;color:#929FC8}
.pm-fr-m{margin:14px 0 6px}
.pm-fr-plot{margin:0 -8px 0 -6px;min-height:118px}
.pm-fr-said{display:grid;grid-template-columns:auto minmax(0,1fr);gap:8px;min-height:38px;margin-top:8px;font-size:13px;line-height:1.45;color:#C9D2EE}
.pm-fr-who{font-weight:600;color:#5EEAD4}
.pm-fr-who.biz{color:#A5B4FC}
.pm-fr-tip{opacity:0;transform:translateY(4px);transition:opacity .35s ease,transform .35s ease}
.pm-fr.alert .pm-fr-tip{opacity:1;transform:none}

/* ---- Fraud detection's, CLI Check's and porting's sheets (showcase.js
   FRAUD_SHEET, CLI_SHEET, PORT_SHEET): their heroes and their cards ---- */
/* the fraud call, whole: as tall as it needs, on the Calls tab's own card */
.psh-live:has(.fxc){height:auto;min-height:0;padding:0;background:#0b0f22}
.psh-live .fxc{height:auto}
.psh-live .fxc .cv{margin:0;border:0;border-radius:inherit}
/* the port request beside its steps, filling the square */
.psh-pvbox .psh-sq{height:100%;max-width:none;border-radius:22px}
/* a chat message */
.pm-msg{display:grid;grid-template-columns:34px minmax(0,1fr);gap:10px;padding:16px 0 0;font-size:13px;line-height:1.5;color:#D5DBF2}
.pm-av{display:grid;place-items:center;width:34px;height:34px;border-radius:9px;font-weight:700;color:#fff;background:linear-gradient(135deg,#3B82F6,#1D4ED8)}
.pm-msg b{font-weight:650;color:#F4F6FF}
.pm-msg time{margin-left:8px;font-size:11.5px;color:#7F8BB3}
.pm-msg p{margin:3px 0 0;font-size:13px;line-height:1.5;color:#D5DBF2}
/* rows: a number and what goes with it */
.pm-rows{list-style:none;margin:0;padding:4px 0 0}
.pm-rows li{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid rgba(147,197,253,.09)}
.pm-rows li:last-child{border-bottom:0}
.pm-rows time{flex:0 0 62px;font-size:12px;color:#929FC8;font-variant-numeric:tabular-nums}
.pm-rows b{flex:1 1 auto;min-width:0;font-size:13.5px;font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pm-rows b small{display:block;margin-top:2px;font-size:12px;font-weight:400;color:#929FC8}
.pm-fp{flex:none;font:650 12px/1 'Geist',sans-serif;font-style:normal;padding:5px 9px;border-radius:100px;font-variant-numeric:tabular-nums}
.pm-fp.b-low{color:#6EE7B7;background:rgba(52,211,153,.12)}
.pm-fp.b-elevated{color:#FCD34D;background:rgba(251,191,36,.12)}
.pm-fp.b-high{color:#FDBA74;background:rgba(249,115,22,.14)}
.pm-fp.b-critical{color:#FDA4AF;background:rgba(244,63,94,.16)}
/* CLI Check's verdicts, digits and hexagons, in the live check's colours */
.pm-vs{list-style:none;margin:0;padding:6px 0 0;display:grid}
.pm-vs li{display:grid;grid-template-columns:104px minmax(0,1fr);align-items:center;gap:10px;padding:11px 0;border-bottom:1px solid rgba(147,197,253,.09)}
.pm-vs li:last-child{border-bottom:0}
.pm-cv{--t:#7DD3FC;display:inline-flex;align-items:center;gap:7px;font:600 12px/1 'Geist',system-ui,sans-serif;color:var(--t);white-space:nowrap}
.pm-cv i{width:15px;height:5px;border-radius:99px;background:var(--t)}
.pm-cv.t-ok,.pm-hx i.t-ok{--t:#34D399}.pm-cv.t-info,.pm-hx i.t-info{--t:#7DD3FC}.pm-cv.t-bad,.pm-hx i.t-bad{--t:#F87171}.pm-cv.t-warn,.pm-hx i.t-warn{--t:#FBBF24}
.pm-dg{white-space:pre;font:500 13.5px/1.2 'Geist',sans-serif;font-variant-numeric:tabular-nums;color:#DCE3F8;overflow:hidden;text-overflow:ellipsis}
.pm-dg i{font-style:normal}
.pm-dg i.m{color:#6EE7B7}.pm-dg i.y{color:#FCD34D}.pm-dg i.x{color:#FCA5A5}.pm-dg i.w{color:#FCD34D}.pm-dg i.s{color:#5E6A8F}
.pm-hx{flex:none;display:inline-flex;gap:4px}
.pm-hx i{--t:rgba(147,197,253,.16);width:15px;height:17px;background:var(--t);clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%)}
/* the letter: a typed-up form on paper, a second sheet under it, the
   fields filled in from the request and the signature drawn on the line */
.psh-mini:has(.pm-loa){padding:20px 20px 0;background:radial-gradient(80% 60% at 50% 100%,rgba(59,130,246,.16),transparent 70%),#0b0f22}
.pm-loa{position:relative;height:100%}
.pm-loa::before{content:"";position:absolute;inset:10px -6px -40px 10px;border-radius:6px;background:#D9DEEC;transform:rotate(2.2deg);box-shadow:0 18px 40px -18px rgba(0,0,0,.8)}
.pm-pg{position:relative;padding:14px 16px 14px;border-radius:6px;color:#1E2340;transform:rotate(-1deg);
  background:linear-gradient(180deg,#FFFFFF,#F5F7FC);box-shadow:0 1px 0 rgba(255,255,255,.8) inset,0 24px 50px -20px rgba(0,0,0,.9)}
.pm-pg-h{display:flex;align-items:center;gap:10px;padding-bottom:10px;border-bottom:2px solid #1E2340}
.pm-pg-m{display:grid;place-items:center;flex:none;width:28px;height:28px;border-radius:7px;color:#fff;background:linear-gradient(135deg,#3B82F6,#1D4ED8)}
.pm-pg-m svg{width:16px;height:16px}
.pm-pg-h b{display:block;font-size:13.5px;font-weight:700;letter-spacing:-.01em}
.pm-pg-h small{display:block;margin-top:1px;font-size:10.5px;color:#6B7494}
.pm-pg-t{margin:9px 0 0 !important;font-size:10.5px !important;line-height:1.45 !important;color:#5F6987 !important}
.pm-pg-f{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px 10px;margin:8px 0 0}
.pm-pg-f > div{min-width:0}
.pm-pg-f > div.w{grid-column:1/-1}
.pm-pg-f dt{font-size:9px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:#8A93B0}
.pm-pg-f dd{margin:2px 0 0;padding:3px 6px;border-radius:3px 3px 0 0;border-bottom:1px solid #93B4F5;background:#EEF3FF;
  font:500 11.5px/1.35 'IBM Plex Mono',ui-monospace,monospace;color:#1E2340;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pm-pg-s{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:14px;align-items:end;margin-top:6px}
.pm-pg-sig svg{display:block;width:100%;max-width:140px;height:30px;overflow:visible}
.pm-pg-sig path{fill:none;stroke:#1D3FAF;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:0}
.pm-pg-sig small,.pm-pg-dt small{display:block;margin-top:3px;padding-top:4px;border-top:1px solid #1E2340;font-size:9px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:#8A93B0}
.pm-pg-dt b{display:block;font:500 11.5px/1 'IBM Plex Mono',ui-monospace,monospace;color:#1E2340}
.pm-pg-ok{position:absolute;top:14px;right:14px;display:inline-flex;align-items:center;gap:4px;padding:4px 8px;border-radius:100px;
  font-size:10.5px;font-weight:650;color:#047857;background:#D1FAE5;border:1px solid #A7F3D0}
.pm-pg-ok svg{width:11px;height:11px}
@media(prefers-reduced-motion:no-preference){
  .psh-mini:has(.pm-loa):not(.on) .pm-pg-sig path{stroke-dashoffset:1}
  .psh-mini:has(.pm-loa):not(.on) .pm-pg-ok{opacity:0;transform:scale(.8)}
  .psh-mini.on .pm-pg-sig path{transition:stroke-dashoffset 1.6s cubic-bezier(.45,.05,.4,1) .5s}
  .psh-mini.on .pm-pg-ok{transition:opacity .3s ease 2.1s,transform .4s cubic-bezier(.2,.9,.25,1.3) 2.1s}
}
.pm-tl li.ok::before{background:#34D399;box-shadow:0 0 0 3px rgba(52,211,153,.18)}
.pm-tl li.ok small{color:#6EE7B7}
/* CLI Check's head has buttons where the badge would sit */
.psh-live .secprod-card:has(.cq) > .secprod-kind{display:none}