/* Award-style hero recipes (APB_Section_Components_Heroes2) — shared CTA contract + sticker_pop + portal_layers.
   Tokens only; every brand-tinted value derives from --apb-rx-brand. Scrolljack heroes read --apb-p (set by
   the shared data-apb-pin engine) and default to their revealed end-state so no-JS + reduced-motion fail open. */

/* ---------------- shared flexible CTA row (any number of buttons, per-button style) ---------------- */
.apb-rx-h2ctas{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.apb-rx-h2cta{display:inline-flex;align-items:center;gap:9px;padding:13px 26px;border-radius:var(--apb-rx-radius);
  font-weight:700;font-size:15px;line-height:1;text-decoration:none;
  transition:transform var(--apb-rx-t-fast,.16s),background var(--apb-rx-t-fast,.16s),border-color var(--apb-rx-t-fast,.16s)}
.apb-rx-h2cta:hover{transform:translateY(-2px)}
.apb-rx-h2cta-arw{width:15px;height:15px;flex:none}
.apb-rx-h2cta--primary{background:var(--apb-rx-brand);color:#fff;box-shadow:0 12px 30px -10px var(--apb-rx-glow)}
.apb-rx-h2cta--outline{color:var(--apb-rx-ink,#0b0d12);border:var(--apb-rx-border,1px) solid var(--apb-rx-line,#e7e8ec)}
.apb-rx-h2cta--outline:hover{border-color:var(--apb-rx-line-accent)}
.apb-rx-h2cta--ghost{color:var(--apb-rx-accent-text,var(--apb-rx-brand))}
.apb-rx-h2cta--ghost:hover{background:var(--apb-rx-soft,#f4f5f7)}
.apb-rx-h2cta--soft{background:var(--apb-rx-soft,#f4f5f7);color:var(--apb-rx-accent-text,var(--apb-rx-brand))}
.apb-rx-h2cta--soft:hover{background:color-mix(in srgb,var(--apb-rx-brand) 14%,var(--apb-rx-surface,#fff))}
/* dark-surface palette (heroes on --apb-rx-ink) */
.apb-rx-h2cta--on-dark.apb-rx-h2cta--outline{color:#fff;border-color:rgba(255,255,255,.35)}
.apb-rx-h2cta--on-dark.apb-rx-h2cta--outline:hover{border-color:#fff}
.apb-rx-h2cta--on-dark.apb-rx-h2cta--ghost{color:#fff}
.apb-rx-h2cta--on-dark.apb-rx-h2cta--ghost:hover{background:rgba(255,255,255,.1)}
.apb-rx-h2cta--on-dark.apb-rx-h2cta--soft{background:rgba(255,255,255,.14);color:#fff}
.apb-rx-h2cta--on-dark.apb-rx-h2cta--soft:hover{background:rgba(255,255,255,.2)}

/* fallback (registered-but-unspecialized variant) */
.apb-rx-h2fb{padding:clamp(56px,10vh,110px) 24px;text-align:center}
.apb-rx-h2fb .apb-rx-hero-copy--c{max-width:820px;margin:0 auto}
.apb-rx-h2fb .apb-rx-h2ctas{justify-content:center;margin-top:22px}

/* ============================ sticker_pop ============================ */
.apb-rx-hstk{position:relative;overflow:hidden;padding:clamp(56px,9vh,96px) 24px 0;background:var(--apb-rx-surface,#fff)}
.apb-rx-hstk-wrap{max-width:960px;margin:0 auto;text-align:center;position:relative}
.apb-rx-hstk-coins{display:flex;justify-content:center;margin-bottom:clamp(26px,5vh,44px)}
.apb-rx-hstk-coin{width:clamp(44px,6vw,62px);height:clamp(44px,6vw,62px);border-radius:50%;flex:none;margin:0 -5px;
  display:flex;align-items:center;justify-content:center;background:var(--apb-rx-surface-2,#fff);
  border:2.5px solid var(--ring,var(--apb-rx-brand));box-shadow:2px 3px 0 color-mix(in srgb,var(--apb-rx-ink,#0b0d12) 85%,transparent);
  transition:transform var(--apb-rx-t-fast,.16s);position:relative;z-index:1}
.apb-rx-hstk-coin:hover{transform:translateY(-6px) rotate(-4deg);z-index:2}
.apb-rx-hstk-coin--fill{background:var(--ring,var(--apb-rx-brand))}
.apb-rx-hstk-coin svg{width:58%;height:58%;color:var(--apb-rx-ink,#0b0d12)}
.apb-rx-hstk-coin--fill svg{color:#fff}
.apb-rx-hstk-coin path,.apb-rx-hstk-coin circle,.apb-rx-hstk-coin rect{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.apb-rx-hstk h1{margin:0 auto 22px;font-family:var(--apb-rx-font-display,inherit);font-weight:var(--apb-rx-display-weight,800);
  font-size:clamp(40px,6.6vw,80px);letter-spacing:var(--apb-rx-display-tracking,-.03em);line-height:var(--apb-rx-display-leading,1.04);
  color:var(--apb-rx-ink,#0b0d12);max-width:17ch;text-wrap:balance}
.apb-rx-hstk-pill{display:inline-flex;align-items:center;gap:.22em;padding:.02em .3em;border-radius:var(--apb-rx-radius-pill,999px);
  background:color-mix(in srgb,var(--apb-rx-brand) 14%,var(--apb-rx-surface,#fff));color:var(--apb-rx-accent-text,var(--apb-rx-brand))}
.apb-rx-hstk-pill i{width:.28em;height:.28em;border-radius:50%;background:var(--apb-rx-brand);flex:none}
.apb-rx-hstk-lead{margin:0 auto 30px;color:var(--apb-rx-muted,#6b7280);font-size:clamp(16px,1.8vw,20px);line-height:1.6;max-width:52ch}
.apb-rx-hstk .apb-rx-h2ctas{justify-content:center}
.apb-rx-hstk-stick{position:absolute;width:clamp(44px,5.5vw,74px);height:clamp(44px,5.5vw,74px);border-radius:calc(var(--apb-rx-radius) * .9);
  display:flex;align-items:center;justify-content:center;background:var(--bg,var(--apb-rx-soft,#f4f5f7));
  box-shadow:2px 3px 0 color-mix(in srgb,var(--apb-rx-ink,#0b0d12) 85%,transparent);transform:rotate(var(--rot,0deg));
  animation:hstkFloat calc(5s / var(--apb-rx-dur,1)) ease-in-out infinite;animation-delay:var(--fd,0s)}
.apb-rx-hstk-stick svg{width:56%;height:56%;color:var(--apb-rx-ink,#0b0d12)}
.apb-rx-hstk-stick path,.apb-rx-hstk-stick circle{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.apb-rx-hstk-stick--a{left:-4%;bottom:18%;--rot:-8deg;--bg:color-mix(in srgb,var(--apb-rx-brand) 20%,var(--apb-rx-surface,#fff))}
.apb-rx-hstk-stick--b{right:-5%;bottom:14%;--rot:7deg;--bg:color-mix(in srgb,var(--apb-rx-brand2,var(--apb-rx-brand)) 30%,var(--apb-rx-surface,#fff));--fd:1.2s}
.apb-rx-hstk-stick--b svg{color:#fff}
@keyframes hstkFloat{0%,100%{transform:rotate(var(--rot,0deg)) translateY(0)}50%{transform:rotate(var(--rot,0deg)) translateY(-8px)}}
.apb-rx-hstk-win{max-width:1120px;margin:clamp(36px,7vh,64px) auto -2px;text-align:left;
  border-radius:calc(var(--apb-rx-radius) * 1.2) calc(var(--apb-rx-radius) * 1.2) 0 0;overflow:hidden;
  border:var(--apb-rx-border,1px) solid var(--apb-rx-line,#e7e8ec);border-bottom:0;background:var(--apb-rx-surface-2,#fff);
  box-shadow:0 -10px 40px -18px var(--apb-rx-glow-soft),var(--apb-rx-shadow-3)}
.apb-rx-hstk-bar{display:flex;align-items:center;gap:7px;padding:11px 14px;border-bottom:var(--apb-rx-border,1px) solid var(--apb-rx-line,#e7e8ec)}
.apb-rx-hstk-bar i{width:10px;height:10px;border-radius:50%;background:color-mix(in srgb,var(--apb-rx-ink,#0b0d12) 13%,var(--apb-rx-surface-2,#fff))}
.apb-rx-hstk-bar span{margin-left:8px;padding:4px 14px;border-radius:calc(var(--apb-rx-radius) * .5);font-size:11.5px;color:var(--apb-rx-muted,#6b7280);
  background:color-mix(in srgb,var(--apb-rx-ink,#0b0d12) 5%,var(--apb-rx-surface-2,#fff))}
.apb-rx-hstk-shot img{display:block;width:100%;height:auto}
.apb-rx-hstk-app{display:grid;grid-template-columns:170px 1fr;min-height:150px}
.apb-rx-hstk-nav{border-right:var(--apb-rx-border,1px) solid var(--apb-rx-line,#e7e8ec);padding:14px 12px;display:flex;flex-direction:column;gap:9px;
  background:color-mix(in srgb,var(--apb-rx-ink,#0b0d12) 2%,var(--apb-rx-surface-2,#fff))}
.apb-rx-hstk-sk{height:10px;border-radius:5px;background:color-mix(in srgb,var(--apb-rx-ink,#0b0d12) 7%,var(--apb-rx-surface-2,#fff))}
.apb-rx-hstk-doc{padding:18px 26px;display:flex;flex-direction:column;gap:11px}
.apb-rx-hstk-doc .t{height:20px;width:38%;border-radius:6px;background:color-mix(in srgb,var(--apb-rx-brand) 20%,var(--apb-rx-surface-2,#fff))}
@media(max-width:760px){
  .apb-rx-hstk-stick{display:none}
  .apb-rx-hstk-app{grid-template-columns:1fr}.apb-rx-hstk-nav{display:none}
}
@media (prefers-reduced-motion:reduce){.apb-rx-hstk-stick{animation:none}}

/* ============================ portal_layers (scrolljack, --apb-p) ============================ */
.apb-rx-hprt{padding:0;position:relative}
.apb-rx-hprt-track{height:280vh;position:relative}
.apb-rx-hprt-stage{position:sticky;top:0;height:100vh;overflow:hidden;background:var(--apb-rx-ink,#0b0d12);
  /* phase A opens the foreground aperture; phase B opens the mid-ground + fades copy in */
  --pa:clamp(0, calc(var(--apb-p, 1) / .55), 1);
  --pb:clamp(0, calc((var(--apb-p, 1) - .4) / .6), 1);
  --hprt-r1:calc(12vmin + 160vmin * var(--pa));
  --hprt-r2:calc(160vmax * var(--pb));
  --hprt-copy-o:clamp(0, calc((var(--pb) - .55) / .45), 1);
  --hprt-ring-o:clamp(0, calc(1 - var(--pa) * 1.6), 1)}
.apb-rx-hprt-bg{position:absolute;inset:0;background-size:cover;background-position:center;transform:scale(1.15);
  background-color:color-mix(in srgb,var(--apb-rx-brand) 30%,var(--apb-rx-ink,#0b0d12))}
.apb-rx-hprt-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,13,18,.55),rgba(11,13,18,.25) 40%,rgba(11,13,18,.6))}
.apb-rx-hprt-mid{position:absolute;inset:0;background-size:cover;background-position:center;background-color:color-mix(in srgb,var(--apb-rx-brand2,var(--apb-rx-brand)) 40%,var(--apb-rx-ink,#0b0d12));
  -webkit-mask:radial-gradient(circle var(--hprt-r2,150vmax) at 50% 52%,transparent 98%,#000 100%);
  mask:radial-gradient(circle var(--hprt-r2,150vmax) at 50% 52%,transparent 98%,#000 100%)}
.apb-rx-hprt-fg{position:absolute;inset:0;
  background:
    radial-gradient(60vmax 60vmax at 85% -10%,color-mix(in srgb,var(--apb-rx-brand2,var(--apb-rx-brand)) 40%,transparent),transparent 60%),
    radial-gradient(50vmax 50vmax at 10% 110%,color-mix(in srgb,var(--apb-rx-brand3,var(--apb-rx-brand)) 35%,transparent),transparent 60%),
    color-mix(in srgb,var(--apb-rx-brand) 14%,var(--apb-rx-ink,#0b0d12));
  -webkit-mask:radial-gradient(circle var(--hprt-r1,172vmin) at 50% 52%,transparent 98%,#000 100%);
  mask:radial-gradient(circle var(--hprt-r1,172vmin) at 50% 52%,transparent 98%,#000 100%)}
.apb-rx-hprt-fg::before{content:"";position:absolute;inset:0;opacity:.5;
  background-image:radial-gradient(color-mix(in srgb,#fff 12%,transparent) 1px,transparent 1.5px);background-size:26px 26px}
.apb-rx-hprt-ring{position:absolute;left:50%;top:52%;width:calc(var(--hprt-r1,172vmin) * 2);height:calc(var(--hprt-r1,172vmin) * 2);
  transform:translate(-50%,-50%);border-radius:50%;border:1.5px solid color-mix(in srgb,var(--apb-rx-brand) 70%,#fff);
  box-shadow:0 0 44px var(--apb-rx-glow),inset 0 0 30px var(--apb-rx-glow-soft);pointer-events:none;opacity:var(--hprt-ring-o,0)}
.apb-rx-hprt-eyebrow{position:absolute;left:50%;top:52%;transform:translate(-50%,calc(-50% - var(--hprt-r1,172vmin) - 34px));
  font-size:12px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:color-mix(in srgb,var(--apb-rx-brand) 45%,#fff);opacity:var(--hprt-ring-o,0)}
.apb-rx-hprt-hint{position:absolute;left:50%;bottom:26px;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:6px;
  color:rgba(255,255,255,.65);font-size:11px;letter-spacing:.14em;text-transform:uppercase;opacity:var(--hprt-ring-o,0)}
.apb-rx-hprt-hint svg{width:16px;height:16px;animation:hprtNudge calc(1.6s / var(--apb-rx-dur,1)) ease-in-out infinite}
@keyframes hprtNudge{0%,100%{transform:translateY(0)}50%{transform:translateY(5px)}}
.apb-rx-hprt-copy{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
  padding:24px;opacity:var(--hprt-copy-o,1);transform:translateY(calc((1 - var(--hprt-copy-o,1)) * 26px))}
.apb-rx-hprt-copy h1{font-family:var(--apb-rx-font-display,inherit);font-weight:var(--apb-rx-display-weight,800);color:#fff;
  font-size:clamp(34px,6vw,64px);letter-spacing:var(--apb-rx-display-tracking,-.02em);line-height:var(--apb-rx-display-leading,1.05);margin:0 0 14px;max-width:16ch;text-wrap:balance}
.apb-rx-hprt-copy p{color:rgba(255,255,255,.78);font-size:clamp(15px,1.6vw,18px);line-height:1.6;max-width:52ch;margin:0 0 26px}
.apb-rx-hprt-copy .apb-rx-h2ctas{justify-content:center}
@media (prefers-reduced-motion:reduce){
  .apb-rx-hprt-track{height:100vh}
  .apb-rx-hprt-hint{display:none}
}