/* ===========================================================================
   prank.css: the character prank call pages (/trump-prank-call,
   /drake-prank-call, /spongebob-prank-call), built by
   tools/build-prank-pages.js. One look for all of them; each page sets only
   its character's three orb colours on :root (--v1 highlight, --v2 body,
   --v3 shade; the same as ai-call.js VOICE_TONE) and everything that's
   theirs (the demo's orb and waves, the name's sheen, the glow behind the
   hero, their speech bubbles) takes it from there. The rest of the page is
   the site's: brand blue for actions, the AI violet for AI, base.css cards.
   =========================================================================== */
*{margin:0;padding:0;box-sizing:border-box}
body{background:var(--void);color:var(--ink);font-family:'Geist',system-ui,sans-serif;min-height:100vh;overflow-x:clip;-webkit-font-smoothing:antialiased;line-height:1.55}
h1,h2,h3{font-family:'Geist',sans-serif;font-weight:600;letter-spacing:-.03em;line-height:1.06}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
::selection{background:color-mix(in srgb,var(--v2) 40%,transparent);color:#fff}
:root{--pk-line:rgba(147,197,253,.13);--pk-mute:#C3CBE6;--pk-dim:#98A2C6;--pk-them1:#93C5FD;--pk-them2:#2DD4BF}

/* the character's light, behind the hero only: faint, so the page stays crisp */
.pk-glow{position:absolute;left:0;right:0;top:0;height:900px;pointer-events:none;z-index:0;overflow:hidden}
.pk-glow::before{content:"";position:absolute;inset:0;
  background:radial-gradient(420px 300px at 76% 30%,color-mix(in srgb,var(--v2) 8%,transparent),transparent 70%),
    radial-gradient(520px 380px at 12% 6%,rgba(37,99,235,.08),transparent 66%)}
.wrap{position:relative;z-index:1;max-width:1180px;margin:0 auto;padding:0 24px}
@media(max-width:560px){.wrap{padding:0 16px}}

/* ---- shared bits ---- */
.pk-k{display:inline-flex;align-items:center;gap:8px;font:600 12.5px/1 'Geist',sans-serif;letter-spacing:.1em;text-transform:uppercase;color:var(--glow)}
.pk-k .ai-mark{width:13px;height:13px}
.pk-h2{font-size:clamp(32px,3.9vw,48px);margin:14px 0 14px;letter-spacing:-.035em}
.pk-sub{font-size:17px;color:var(--pk-mute);max-width:600px;line-height:1.6}
.pk-name{background:linear-gradient(100deg,var(--v1) 0%,var(--v2) 45%,color-mix(in srgb,var(--v2) 55%,#F0ABFC) 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.pk-accent{background:var(--accent-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.pk-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap}
.pk-head > div{max-width:640px}
section.pk-s{padding:clamp(72px,8vw,112px) 0}
@media(max-width:640px){section.pk-s{padding:56px 0}}
.spf-btn .arr{transition:transform .25s var(--ease-out)}
.spf-btn:hover .arr{transform:translateX(3px)}
.spf-btn.ghost .pk-pi{width:14px;height:14px;color:var(--v2)}

/* ============================== hero ============================== */
.pk-hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,540px);gap:clamp(36px,5vw,72px);align-items:center;padding:clamp(28px,4vw,52px) 0 clamp(48px,6vw,80px)}
.pk-hero h1{font-size:clamp(42px,5.6vw,74px);line-height:1;letter-spacing:-.05em;margin:0 0 22px}
.pk-lede{font-size:clamp(16px,1.35vw,18.5px);line-height:1.6;color:var(--pk-mute);max-width:540px}
.pk-lede b{color:var(--ink);font-weight:600}
.pk-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
@media(max-width:560px){.pk-cta{flex-direction:column;align-items:stretch}.pk-cta > *{width:100%}}
.pk-ticks{list-style:none;display:flex;flex-wrap:wrap;gap:10px 22px;margin-top:26px;font-size:13px;color:var(--faint)}
.pk-ticks li{display:inline-flex;align-items:center;gap:7px}
.pk-ticks .hexm.ck{--hs:18px}
/* the other characters, a tap away */
.pk-cast{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin-top:30px;padding-top:24px;border-top:1px solid var(--pk-line);font-size:13px;color:var(--pk-dim)}
.pk-cast > span{margin-right:4px}
.pk-cast a{display:inline-flex;align-items:center;gap:8px;height:34px;padding:0 13px 0 5px;border-radius:99px;font-weight:600;color:var(--ink);
  background:rgba(147,197,253,.05);border:1px solid var(--pk-line);transition:border-color .2s,background .2s,transform .2s}
.pk-cast a:hover{transform:translateY(-1px);border-color:color-mix(in srgb,var(--v2) 60%,transparent);background:color-mix(in srgb,var(--v2) 10%,transparent)}
.pk-cast .aic-ball{width:24px;height:24px}
@media(max-width:960px){.pk-hero{grid-template-columns:minmax(0,1fr)}}

/* ============================== the voice preview ==============================
   His orb and name, then a few of his lines, each in the site's recording
   player (voice-player.css .vp, untouched but for its speed button, which a
   five-second line doesn't need). The line playing lights in his colour and
   its words come up as they're said (prank.js); his orb turns faster and
   rings while he talks. */
.vpv{position:relative;border-radius:28px;padding:22px 22px 18px;isolation:isolate;
  background:radial-gradient(70% 40% at 10% 0,color-mix(in srgb,var(--v2) 8%,transparent),transparent 70%),linear-gradient(180deg,rgba(24,31,62,.94),rgba(10,14,32,.96));
  border:1px solid rgba(147,197,253,.16);
  box-shadow:0 30px 60px -34px color-mix(in srgb,var(--v2) 22%,transparent),0 30px 60px -30px rgba(0,0,0,.85),inset 0 1px 0 rgba(255,255,255,.06)}
/* a rim of his light along the top, and a beam round the edge */
.vpv::before{content:"";position:absolute;top:-1px;left:18%;right:18%;height:1px;background:linear-gradient(90deg,transparent,var(--v1),transparent);opacity:.8}
.vpv::after{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1px;pointer-events:none;z-index:-1;
  background:linear-gradient(150deg,color-mix(in srgb,var(--v2) 55%,transparent),transparent 32%,transparent 70%,rgba(124,58,237,.45));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
.vpv-h{display:flex;align-items:center;gap:16px;padding-bottom:16px;border-bottom:1px solid var(--pk-line)}
.vpv-av{position:relative;flex:none;display:grid;place-items:center;width:58px;height:58px}
.vpv-orb{width:58px;height:58px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.22),0 16px 40px -12px var(--v2)}
.vpv-orb.aic-ball > b{filter:blur(3px)}
.vpv-av::before,.vpv-av::after{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid color-mix(in srgb,var(--v2) 70%,transparent);opacity:0}
.vpv.speaking .vpv-orb.aic-ball > b{animation-duration:1.2s}
.vpv.speaking .vpv-av::before{animation:aicRing 1.8s ease-out infinite}
.vpv.speaking .vpv-av::after{animation:aicRing 1.8s ease-out .9s infinite}
.vpv-id{min-width:0}
.vpv-id b{display:flex;align-items:center;gap:8px;font-size:20px;font-weight:600;letter-spacing:-.02em;color:#fff;white-space:nowrap}
.vpv-id b em{font-style:normal;font-size:11px;font-weight:700;letter-spacing:.04em;padding:3px 7px;border-radius:6px;color:#fff;background:var(--ai-grad-deep)}
.vpv-id small{display:block;margin-top:3px;font-size:13px;color:var(--pk-dim)}
.vpv-rate{margin-left:auto;flex:none;display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 11px;border-radius:99px;font-size:12.5px;font-weight:600;
  color:var(--pk-mute);font-variant-numeric:tabular-nums;background:rgba(139,92,246,.1);border:1px solid rgba(167,139,250,.24);white-space:nowrap}
.vpv-rate .ai-mark{width:12px;height:12px}
.vpv-lines{list-style:none}
.vpv-line{position:relative;padding:15px 0 13px}
.vpv-line + .vpv-line{border-top:1px solid var(--pk-line)}
.vpv-tag{display:inline-flex;align-items:center;gap:7px;font:600 11.5px/1 'Geist',sans-serif;letter-spacing:.1em;text-transform:uppercase;color:var(--pk-dim);transition:color .2s}
.vpv-tag::before{content:"";width:6px;height:6px;border-radius:50%;background:rgba(147,197,253,.3);transition:background .2s,box-shadow .2s}
.vpv-line.on .vpv-tag{color:var(--v1)}
.vpv-line.on .vpv-tag::before{background:var(--v2);box-shadow:0 0 0 3px color-mix(in srgb,var(--v2) 25%,transparent)}
.vpv-q{margin:7px 0 10px;font-size:15.5px;line-height:1.5;font-weight:500;letter-spacing:-.01em;color:#fff}
.vpv-q span{transition:opacity .15s ease}
.vpv-line.on .vpv-q span{opacity:.35}
.vpv-line.on .vpv-q span.lit{opacity:1}
.vpv .vp-rate{display:none}
.vpv .vp{transition:border-color .2s,background .2s}
.vpv-line.on .vp{border-color:color-mix(in srgb,var(--v2) 40%,rgba(147,197,253,.18))}
.vpv-f{display:flex;align-items:center;justify-content:space-between;gap:14px;padding-top:16px;border-top:1px solid var(--pk-line);font-size:12.5px;color:var(--pk-dim)}
.vpv-go{flex:none;display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 15px;border-radius:12px;font-size:14px;font-weight:600;color:#fff;
  background:var(--ai-grad-deep);box-shadow:inset 0 1px 1px rgba(255,255,255,.22),0 10px 24px -12px rgba(109,40,217,.8);transition:transform .15s,filter .2s}
.vpv-go:hover{transform:translateY(-1px);filter:brightness(1.08)}
.vpv-go .ai-mark{width:14px;height:14px;background:#fff}
.vpv-go svg{width:14px;height:14px}
@media(max-width:560px){
  .vpv{border-radius:22px;padding:18px 16px 16px}
  .vpv-av,.vpv-orb{width:52px;height:52px}
  .vpv-id b{font-size:18px}
  .vpv-rate{display:none}
  .vpv-q{font-size:15.5px}
  .vpv-f{flex-direction:column;align-items:stretch;text-align:center}
  .vpv-go{justify-content:center}
}

/* ============================== the live call screen ============================== */
.pk-watch{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,520px);gap:clamp(36px,5vw,72px);align-items:center}
.pk-pts{list-style:none;margin:26px 0 30px;display:grid;gap:14px}
.pk-pts li{display:grid;grid-template-columns:20px minmax(0,1fr);gap:12px;font-size:15.5px;color:var(--pk-mute);line-height:1.55}
.pk-pts li b{color:#fff;font-weight:600}
.pk-pts .hexm.ck{--hs:20px;margin-top:1px}
.aic-demo{position:relative;inset:auto;z-index:auto;display:block;padding:0;background:none;-webkit-backdrop-filter:none;backdrop-filter:none;opacity:1}
.aic-demo .aic{max-width:none;height:600px;max-height:none;transform:none;box-shadow:0 60px 120px -50px rgba(2,6,23,.55),0 40px 80px -40px rgba(0,0,0,.9),0 0 0 1px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.06)}
.aic-demo .aic-body{overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end}
.aic-demo .aic-thread{transition:transform .4s ease}
.aic-demo .aic-btn{cursor:default}
.aic-demo .aic-msg.ai{box-shadow:inset 0 1px 0 rgba(255,255,255,.12)}
.aic-demo .aic-btn.lis{color:#CCFBF1}
@media(max-width:960px){
  .pk-watch{grid-template-columns:minmax(0,1fr)}
  .aic-demo .aic{height:560px}
  .aic-bg.aic-demo .aic{border-radius:24px;border-bottom:1px solid rgba(139,92,246,.26)}
}

/* ============================== how it works ============================== */
.pk-how{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(36px,5vw,72px);align-items:center;margin-top:44px}
.pk-steps{position:relative;list-style:none;display:flex;flex-direction:column;gap:30px}
.pk-steps::before{content:"";position:absolute;left:21px;top:22px;bottom:60px;width:1px;background:linear-gradient(180deg,rgba(96,165,250,.5),color-mix(in srgb,var(--v2) 50%,transparent))}
.pk-steps li{position:relative;display:grid;grid-template-columns:44px minmax(0,1fr);gap:18px;align-items:start}
.pk-steps .hexm{--hs:44px;font:700 15px 'Geist',sans-serif;color:#fff}
.pk-steps h3{font-size:19px;margin:9px 0 6px;letter-spacing:-.02em}
.pk-steps p{font-size:15px;color:var(--pk-mute);line-height:1.6}
.pk-pic{position:relative;padding:44px 40px;border-radius:var(--card-r);overflow:hidden;isolation:isolate;background:var(--card-bg);border:1px solid var(--card-brd)}
.pk-pic::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(60% 70% at 15% 100%,rgba(37,99,235,.42),transparent 72%),radial-gradient(55% 65% at 88% 100%,color-mix(in srgb,var(--v2) 30%,transparent),transparent 72%);
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 60%);mask-image:linear-gradient(180deg,transparent,#000 60%)}
@media(max-width:900px){.pk-how{grid-template-columns:minmax(0,1fr)}}
@media(max-width:620px){.pk-pic{padding:16px 12px}}
/* the AI call form on /calls, filled in for this prank (a still) */
.cf{padding:20px;border-radius:18px;background:linear-gradient(180deg,#121933,#0B1024);border:1px solid rgba(147,197,253,.16);box-shadow:0 30px 60px -30px rgba(0,0,0,.9);text-align:left}
.cf-h{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px}
.cf-h b{display:block;font-size:16px;color:#F3F5FF}
.cf-h small{display:block;margin-top:2px;font-size:12.5px;color:var(--pk-dim)}
.cf-seg{display:flex;padding:3px;border-radius:10px;background:#0A0F24;border:1px solid rgba(147,197,253,.12)}
.cf-seg i{display:inline-flex;align-items:center;gap:5px;font-style:normal;font-size:12.5px;font-weight:600;padding:6px 10px;border-radius:7px;color:var(--pk-dim);white-space:nowrap}
.cf-seg i.on{color:#fff;background:var(--ai-grad-deep)}
.cf-seg .ai-mark{width:12px;height:12px;background:#fff}
.cf-row{margin-bottom:13px}
.cf-row label{display:block;margin-bottom:6px;font-size:13px;color:var(--pk-mute)}
.cf-row label span{color:var(--pk-dim)}
.cf-line{display:flex;align-items:stretch;height:46px;border-radius:12px;background:rgba(6,9,20,.7);border:1px solid rgba(147,197,253,.16)}
.cf-cc{display:flex;align-items:center;gap:7px;padding:0 11px 0 13px;border-right:1px solid rgba(147,197,253,.14);font-size:14px;color:var(--ink)}
.cf-flag{width:18px;height:13px;border-radius:2px;background:linear-gradient(#3C3B6E,#3C3B6E) 0 0/8px 7px no-repeat,repeating-linear-gradient(180deg,#B22234 0 1.86px,#fff 1.86px 3.71px)}
.cf-car{width:11px;height:11px;color:var(--pk-dim)}
.cf-num{display:flex;align-items:center;padding:0 14px;font-size:15px;color:var(--ink);font-variant-numeric:tabular-nums}
.cf-brief{border-radius:12px;background:rgba(6,9,20,.7);border:1px solid rgba(139,92,246,.55);box-shadow:0 0 0 3px rgba(139,92,246,.14)}
.cf-ta{padding:11px 13px 10px;min-height:76px;font-size:14px;line-height:1.55;color:var(--ink)}
.cf-foot{display:flex;padding:0 9px 9px}
/* the voice picker, as the real one draws it (dropdown.css: play, orb, name, price) */
.cf-voice{display:inline-flex;align-items:center;gap:8px;height:34px;padding:0 10px 0 4px;border-radius:9px;font-size:13px;font-weight:600;color:#fff;background:rgba(139,92,246,.08);border:1px solid rgba(139,92,246,.24)}
.cf-voice .cf-pl{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;color:var(--glow);background:rgba(147,197,253,.08);border:1px solid rgba(147,197,253,.22)}
.cf-voice .cf-pl svg{width:10px;height:10px;margin-left:1.5px}
.cf-orb{width:18px;height:18px;flex:none}
.cf-voice em{display:inline-flex;align-items:center;gap:4px;font-style:normal;font-weight:500;color:var(--pk-dim);margin-left:6px}
.cf-voice em .ai-mark{width:11px;height:11px}
.cf-agree{display:flex;gap:10px;align-items:flex-start;margin:4px 0 14px;font-size:12.5px;line-height:1.5;color:var(--pk-mute)}
.cf-agree u{color:#C4B5FD;text-underline-offset:2px}
.cf-box{flex:none;width:18px;height:18px;margin-top:1px;border-radius:5px;display:grid;place-items:center;color:#fff;background:var(--electric,#2563EB)}
.cf-box svg{width:13px;height:13px}
.cf-go{display:flex;align-items:center;justify-content:center;gap:9px;height:50px;border-radius:13px;font:700 15px 'Geist',sans-serif;color:#fff;background:var(--ai-grad-deep);box-shadow:inset 0 1px 1px rgba(255,255,255,.22)}
.cf-go .ai-mark{width:16px;height:16px;background:#fff}
@media(max-width:620px){.cf{padding:16px}.cf-seg i{padding:6px 8px}}

/* ============================== prank ideas ============================== */
.pk-ideas{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:40px}
.pk-idea{position:relative;display:flex;flex-direction:column;padding:22px 22px 18px;border-radius:20px;background:var(--card-bg);border:1px solid var(--card-brd);transition:border-color .2s,transform .2s}
.pk-idea:hover{border-color:color-mix(in srgb,var(--v2) 45%,var(--card-brd));transform:translateY(-2px)}
.pk-idea .tag{display:inline-flex;align-self:flex-start;align-items:center;gap:7px;height:24px;padding:0 10px;border-radius:99px;font-size:12px;font-weight:600;color:var(--glow);background:rgba(59,130,246,.1);border:1px solid rgba(147,197,253,.16)}
.pk-idea h3{font-size:18px;margin:14px 0 14px;line-height:1.3;letter-spacing:-.02em}
.pk-idea blockquote{position:relative;display:flex;gap:10px;align-items:flex-start;margin-bottom:16px}
.pk-idea blockquote .aic-ball{flex:none;width:26px;height:26px;margin-top:2px}
.pk-idea blockquote p{padding:11px 14px;border-radius:4px 16px 16px 16px;font-size:14px;line-height:1.5;color:var(--ink);
  background:rgba(147,197,253,.06);border:1px solid rgba(147,197,253,.14)}
.pk-use{margin-top:auto;display:inline-flex;align-items:center;gap:8px;align-self:flex-start;height:36px;padding:0 4px;border:0;background:none;cursor:pointer;font-size:13.5px;font-weight:600;color:var(--glow)}
.pk-use .ai-mark{width:13px;height:13px}
.pk-use svg{width:13px;height:13px;transition:transform .25s var(--ease-out)}
.pk-use:hover{color:#fff}
.pk-use:hover svg{transform:translateX(3px)}
@media(max-width:960px){.pk-ideas{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:620px){.pk-ideas{grid-template-columns:minmax(0,1fr)}}

/* ============================== why it works ============================== */
.pk-feat{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin-top:40px;border-top:1px solid var(--pk-line)}
.pk-feat > div{padding:30px 24px 32px}
.pk-feat > div + div{border-left:1px solid var(--pk-line)}
.pk-feat .hexm{--c1:#3B82F6;--c2:#1D4ED8;--hs:48px;margin:0 0 16px -2px;color:#fff}
.pk-feat .hexm svg{width:20px;height:20px}
.pk-feat h3{font-size:17px;margin-bottom:8px;letter-spacing:-.02em}
.pk-feat p{font-size:14.5px;color:var(--pk-mute);line-height:1.6}
@media(max-width:900px){
  .pk-feat{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pk-feat > div + div{border-left:0}
  .pk-feat > div:nth-child(2n){border-left:1px solid var(--pk-line)}
  .pk-feat > div:nth-child(n+3){border-top:1px solid var(--pk-line)}
}
@media(max-width:620px){.pk-feat{grid-template-columns:minmax(0,1fr)}.pk-feat > div{padding:24px 4px;border-left:0!important}.pk-feat > div + div{border-top:1px solid var(--pk-line)}}

/* ============================== price ============================== */
.pk-cost{display:grid;grid-template-columns:minmax(0,1fr) 420px;gap:clamp(32px,5vw,64px);align-items:center}
.pk-price{position:relative;padding:30px;border-radius:24px;overflow:hidden;isolation:isolate;background:var(--card-bg);border:1px solid rgba(167,139,250,.3);box-shadow:0 40px 90px -50px rgba(109,40,217,.6)}
.pk-price::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:var(--ai-grad);opacity:.75}
.pk-price-h{display:flex;align-items:center;gap:12px}
.pk-price-h .aic-ball{width:36px;height:36px}
.pk-price-h b{display:block;font-size:15px;color:#fff}
.pk-price-h small{display:block;font-size:12.5px;color:var(--pk-dim)}
.pk-n{display:flex;align-items:baseline;gap:8px;margin:22px 0 4px}
.pk-n b{font-size:52px;font-weight:600;letter-spacing:-.04em;color:#fff;font-variant-numeric:tabular-nums;line-height:1}
.pk-n span{font-size:15px;color:var(--pk-mute)}
.pk-n-note{font-size:13px;color:var(--pk-dim);margin-bottom:22px}
.pk-price ul{list-style:none;display:grid;gap:11px;margin-bottom:24px;padding-top:20px;border-top:1px solid var(--pk-line)}
.pk-price li{display:flex;align-items:center;gap:10px;font-size:14.5px;color:var(--pk-mute)}
.pk-price li .hexm.ck{--hs:18px}
.pk-price .spf-btn{width:100%}
@media(max-width:960px){.pk-cost{grid-template-columns:minmax(0,1fr)}}

/* ============================== faq ============================== */
.pk-faq{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.4fr);gap:56px;align-items:start}
.pk-faq-h{position:sticky;top:110px}
.pk-faq-h p{margin-top:6px;font-size:15px;color:var(--pk-mute)}
.pk-faq-h p a{color:var(--glow);text-decoration:underline;text-underline-offset:3px}
.pk-faq details{border-bottom:1px solid var(--pk-line)}
.pk-faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:20px 2px;font-size:16.5px;font-weight:600}
.pk-faq summary::-webkit-details-marker{display:none}
.pk-faq summary::after{content:"";flex:none;width:22px;height:22px;border-radius:7px;background:rgba(147,197,253,.07) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M11 5h2v14h-2zM5 11h14v2H5z' fill='%2398A2C6'/%3E%3C/svg%3E") center/12px no-repeat;transition:transform .25s ease,background-color .2s}
.pk-faq details[open] summary::after{transform:rotate(45deg);background-color:rgba(147,197,253,.14)}
.pk-faq summary:hover{color:#fff}
.pk-faq details p{padding:0 2px 20px;color:var(--pk-mute);font-size:15.5px;line-height:1.65;max-width:700px}
.pk-faq details p a{text-decoration:underline;text-underline-offset:2px}
@media(max-width:900px){.pk-faq{grid-template-columns:minmax(0,1fr);gap:20px}.pk-faq-h{position:static}}

/* ============================== more voices ============================== */
.pk-voices{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:36px}
.pk-vc{position:relative;display:flex;flex-direction:column;padding:22px;border-radius:20px;overflow:hidden;isolation:isolate;background:var(--card-bg);border:1px solid var(--card-brd);transition:border-color .2s,transform .2s}
.pk-vc::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(90% 70% at 0 0,color-mix(in srgb,var(--c2) 18%,transparent),transparent 65%)}
.pk-vc:hover{transform:translateY(-3px);border-color:color-mix(in srgb,var(--c2) 55%,transparent)}
.pk-vc-top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.pk-vc .aic-ball{--v1:var(--c1);--v2:var(--c2);--v3:var(--c3);width:52px;height:52px}
.pk-vc h3{margin-top:18px;font-size:19px;letter-spacing:-.02em}
.pk-vc p{margin-top:4px;font-size:14px;color:var(--pk-dim)}
.pk-vc .pk-vc-go{margin-top:18px;display:inline-flex;align-items:center;gap:7px;font-size:13.5px;font-weight:600;color:var(--glow)}
.pk-vc .pk-vc-go svg{width:13px;height:13px;transition:transform .25s var(--ease-out)}
.pk-vc:hover .pk-vc-go svg{transform:translateX(3px)}
.pk-vc a.pk-vc-cover{position:absolute;inset:0;z-index:0}
.pk-vc-top,.pk-vc h3,.pk-vc p,.pk-vc .pk-vc-go{position:relative;z-index:1;pointer-events:none}
.pk-hear{pointer-events:auto;position:relative;z-index:2;display:inline-flex;align-items:center;gap:7px;height:32px;padding:0 12px 0 9px;border-radius:99px;cursor:pointer;
  font-size:12.5px;font-weight:600;color:var(--ink);background:rgba(147,197,253,.07);border:1px solid rgba(147,197,253,.2);transition:background .2s,border-color .2s}
.pk-hear:hover{background:rgba(147,197,253,.14);border-color:rgba(147,197,253,.4)}
.pk-hear svg{width:12px;height:12px}
.pk-hear .i-stop{display:none}
.pk-hear.on .i-play{display:none}.pk-hear.on .i-stop{display:block}
.pk-hear.on{color:#fff;background:linear-gradient(135deg,color-mix(in srgb,var(--c2) 60%,#3B82F6),#1D4ED8);border-color:transparent}
.pk-hear.loading svg{animation:pkBlink .9s ease-in-out infinite}
@keyframes pkBlink{50%{opacity:.3}}
@media(max-width:900px){.pk-voices{grid-template-columns:minmax(0,1fr)}}

/* ============================== the last call ============================== */
.pk-final{position:relative;margin:10px 0 0;padding:clamp(48px,6vw,72px) clamp(22px,4vw,40px);border-radius:28px;text-align:center;overflow:hidden;isolation:isolate;
  background:var(--card-bg);border:1px solid var(--card-brd)}
.pk-final::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(50% 70% at 50% 0,color-mix(in srgb,var(--v2) 20%,transparent),transparent 70%),radial-gradient(40% 60% at 50% 110%,rgba(37,99,235,.22),transparent 70%)}
.pk-final .aic-ball{width:72px;height:72px;margin:0 auto 22px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.22),0 20px 50px -14px var(--v2)}
.pk-final .pk-h2{margin-top:0}
.pk-final .pk-sub{margin:0 auto}
.pk-final .pk-cta{justify-content:center}
.pk-fine{margin:24px auto 0;font-size:12.5px;color:var(--pk-dim);max-width:640px;line-height:1.6}

/* phones: the call to action follows you once you're past the top */
.pk-stick{display:none}
@media(max-width:760px){
  .pk-stick{display:flex;position:fixed;left:12px;right:12px;bottom:12px;z-index:50;transform:translateY(140%);transition:transform .35s var(--ease-out)}
  .pk-stick.on{transform:none}
  .pk-stick .spf-btn{flex:1;box-shadow:0 18px 40px -12px rgba(0,0,0,.8)}
}
@media(prefers-reduced-motion:reduce){
  .vpv *,.vpv *::before,.vpv *::after{animation:none!important}
  .pk-idea:hover,.pk-vc:hover,.pk-cast a:hover{transform:none}
}