/* Award-style hero recipes (APB_Section_Components_Heroes2) — partition 5. Tokens only; every brand-tinted
   value derives from --apb-rx-brand; scrolljack heroes read --apb-p and default to their revealed end-state.
   All four heroes here are STATIC (no scrolljack, no cursor-follow JS) — motion is CSS-only auto-animation
   and reuses the shared .apb-rx-h2cta* button system (never redefined per-hero). */

/* ============================ spotlight_orbit ============================ */
.apb-rx-hspt{position:relative;overflow:hidden;padding:clamp(80px,15vh,150px) 24px;background:var(--apb-rx-ink,#0b0d12);color:#fff}
.apb-rx-hspt-tex{position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(color-mix(in srgb,#fff 7%,transparent) 1px,transparent 1px),
    linear-gradient(90deg,color-mix(in srgb,#fff 7%,transparent) 1px,transparent 1px);background-size:56px 56px;
  -webkit-mask:radial-gradient(clamp(220px,30vw,420px) at 52% 42%,#000 0%,rgba(0,0,0,.28) 55%,transparent 78%);
  mask:radial-gradient(clamp(220px,30vw,420px) at 52% 42%,#000 0%,rgba(0,0,0,.28) 55%,transparent 78%)}
.apb-rx-hspt-glow{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(clamp(260px,34vw,480px) at 52% 42%,var(--apb-rx-glow-soft),transparent 70%);
  animation:hsptBreathe calc(7s / var(--apb-rx-dur,1)) ease-in-out infinite}
@keyframes hsptBreathe{0%,100%{opacity:.75}50%{opacity:1}}
.apb-rx-hspt-wrap{position:relative;max-width:1060px;margin:0 auto;display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(36px,7vw,80px);align-items:center}
.apb-rx-hspt-ey{display:inline-flex;align-items:center;gap:9px;font-size:12px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:color-mix(in srgb,var(--apb-rx-brand) 55%,#fff);margin-bottom:18px}
.apb-rx-hspt h1{margin:0 0 18px;font-family:var(--apb-rx-font-display,inherit);font-weight:var(--apb-rx-display-weight,800);
  font-size:clamp(36px,5.4vw,66px);letter-spacing:var(--apb-rx-display-tracking,-.025em);line-height:var(--apb-rx-display-leading,1.03);text-wrap:balance}
.apb-rx-hspt h1 em{font-style:normal;color:transparent;
  background:linear-gradient(95deg,var(--apb-rx-brand),var(--apb-rx-brand2,var(--apb-rx-brand)));-webkit-background-clip:text;background-clip:text}
.apb-rx-hspt-lead{margin:0 0 28px;color:rgba(255,255,255,.72);font-size:clamp(15px,1.6vw,18px);line-height:1.65;max-width:46ch}
.apb-rx-hspt .apb-rx-h2ctas{margin-bottom:6px}
.apb-rx-hspt-proof{display:flex;gap:clamp(20px,3vw,36px);margin-top:34px;padding-top:22px;border-top:1px solid rgba(255,255,255,.14)}
.apb-rx-hspt-proof b{display:block;font-size:21px;font-weight:800}
.apb-rx-hspt-proof span{font-size:12.5px;color:rgba(255,255,255,.6)}
.apb-rx-hspt-orb{position:relative;aspect-ratio:1;max-width:440px;margin:0 auto;width:100%}
.apb-rx-hspt-orb svg{display:block;width:100%;height:auto;overflow:visible}
.apb-rx-hspt-orb .ring{fill:none;stroke:rgba(255,255,255,.18);stroke-width:1}
.apb-rx-hspt-orb .ring--dash{stroke:color-mix(in srgb,var(--apb-rx-brand) 60%,transparent);stroke-dasharray:3 9;stroke-width:1.4}
.apb-rx-hspt-orb .spin{transform-origin:200px 200px;animation:hsptSpin calc(26s / var(--apb-rx-dur,1)) linear infinite}
.apb-rx-hspt-orb .spin--rev{animation-direction:reverse;animation-duration:calc(38s / var(--apb-rx-dur,1))}
@keyframes hsptSpin{to{transform:rotate(360deg)}}
.apb-rx-hspt-orb .sat{fill:var(--apb-rx-brand)}
.apb-rx-hspt-orb .sat--2{fill:var(--apb-rx-brand2,var(--apb-rx-brand))}
.apb-rx-hspt-core{position:absolute;inset:29%;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:4px;
  background:radial-gradient(circle at 32% 28%,color-mix(in srgb,var(--apb-rx-brand) 32%,#14161c),#14161c 70%);
  border:1px solid color-mix(in srgb,var(--apb-rx-brand) 45%,transparent);box-shadow:0 0 70px var(--apb-rx-glow-soft),inset 0 0 40px rgba(0,0,0,.5)}
.apb-rx-hspt-core b{font-size:clamp(18px,2.4vw,24px);font-weight:800}
.apb-rx-hspt-core span{font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.62);max-width:14ch}
.apb-rx-hspt-tag{position:absolute;padding:8px 13px;border-radius:var(--apb-rx-radius-pill,999px);font-size:12px;font-weight:700;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.apb-rx-hspt-tag--a{top:6%;left:2%}
.apb-rx-hspt-tag--b{bottom:10%;right:0%}
@media(max-width:880px){.apb-rx-hspt-wrap{grid-template-columns:1fr}.apb-rx-hspt-orb{max-width:340px}}
@media (prefers-reduced-motion:reduce){.apb-rx-hspt-orb .spin{animation:none}.apb-rx-hspt-glow{animation:none}}

/* ============================ inline_collage ============================ */
.apb-rx-hinl{position:relative;overflow:hidden;padding:clamp(64px,11vh,120px) 24px clamp(56px,9vh,100px);
  background:repeating-linear-gradient(180deg,transparent 0 119px,color-mix(in srgb,var(--apb-rx-ink,#0b0d12) 5%,transparent) 119px 120px),
    color-mix(in srgb,var(--apb-rx-ink,#0b0d12) 3%,var(--apb-rx-surface,#fff))}
.apb-rx-hinl-wrap{max-width:1080px;margin:0 auto;position:relative}
.apb-rx-hinl h1{margin:0;font-family:var(--apb-rx-font-display,inherit);font-weight:600;
  font-size:clamp(52px,10vw,132px);letter-spacing:-.045em;line-height:1.02;color:var(--apb-rx-ink,#0b0d12)}
.apb-rx-hinl-l{display:flex;align-items:center;gap:.18em;flex-wrap:wrap}
.apb-rx-hinl-l--2{padding-left:clamp(30px,14vw,210px)}
.apb-rx-hinl-l--3{padding-left:clamp(0px,3vw,40px)}
.apb-rx-hinl-img{display:inline-block;width:clamp(120px,17vw,240px);height:.82em;border-radius:calc(var(--apb-rx-radius) * .5);
  overflow:hidden;vertical-align:-.08em;position:relative}
.apb-rx-hinl-img img{width:100%;height:100%;object-fit:cover;display:block}
.apb-rx-hinl-img i{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  color:var(--apb-rx-brand);font-style:normal;font-weight:800;font-size:.5em;text-shadow:0 2px 14px rgba(0,0,0,.4)}
.apb-rx-hinl-ghost{color:transparent;-webkit-text-stroke:1.5px color-mix(in srgb,var(--apb-rx-ink,#0b0d12) 40%,transparent)}
.apb-rx-hinl-doodle{width:clamp(56px,7vw,96px);height:auto;margin-left:.1em;flex:none}
.apb-rx-hinl-doodle path,.apb-rx-hinl-doodle circle,.apb-rx-hinl-doodle rect{fill:none;stroke:var(--apb-rx-brand);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.apb-rx-hinl-stack{position:absolute;left:clamp(-10px,-1vw,0px);bottom:clamp(-24px,-3vh,-10px);width:clamp(150px,19vw,250px);z-index:1;transform:rotate(-5deg)}
.apb-rx-hinl-stack::before{content:"";position:absolute;inset:8px -10px -10px 10px;background:color-mix(in srgb,var(--apb-rx-brand) 80%,var(--apb-rx-ink,#0b0d12));transform:rotate(5deg)}
.apb-rx-hinl-stack::after{content:"";position:absolute;inset:4px -4px -4px 6px;background:var(--apb-rx-surface,#fff);transform:rotate(2.5deg);box-shadow:var(--apb-rx-shadow-2)}
.apb-rx-hinl-stack img{position:relative;z-index:1;display:block;width:100%;aspect-ratio:5/4;object-fit:cover;border:8px solid var(--apb-rx-surface,#fff);box-shadow:var(--apb-rx-shadow-3)}
.apb-rx-hinl-note{display:flex;align-items:flex-start;gap:8px;max-width:34ch;margin:26px 0 0 auto;
  font-size:13.5px;line-height:1.6;color:color-mix(in srgb,var(--apb-rx-ink,#0b0d12) 72%,transparent)}
.apb-rx-hinl-note b{color:var(--apb-rx-brand);font-weight:800;flex:none}
.apb-rx-hinl .apb-rx-h2ctas{justify-content:center;margin-top:clamp(30px,6vh,54px)}
.apb-rx-hinl-cue{position:absolute;right:-6px;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;align-items:center;gap:12px;
  font-size:10.5px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:color-mix(in srgb,var(--apb-rx-ink,#0b0d12) 55%,transparent)}
.apb-rx-hinl-cue span{writing-mode:vertical-rl}
.apb-rx-hinl-cue svg{width:20px;height:20px;color:var(--apb-rx-brand);animation:hinlBob calc(1.8s / var(--apb-rx-dur,1)) ease-in-out infinite}
@keyframes hinlBob{0%,100%{transform:translateY(0)}50%{transform:translateY(5px)}}
@media(max-width:820px){
  .apb-rx-hinl-stack{position:relative;left:0;bottom:0;margin:30px auto 0;transform:rotate(-4deg)}
  .apb-rx-hinl-cue{display:none}
  .apb-rx-hinl-note{margin:22px auto 0;max-width:46ch}
}
@media (prefers-reduced-motion:reduce){.apb-rx-hinl-cue svg{animation:none}}

/* ============================ scribble_dark ============================ */
.apb-rx-hscr{position:relative;overflow:hidden;padding:clamp(64px,11vh,120px) 24px;text-align:center;
  background:linear-gradient(color-mix(in srgb,#fff 4%,transparent) 1px,transparent 1px),
    linear-gradient(90deg,color-mix(in srgb,#fff 4%,transparent) 1px,transparent 1px),
    radial-gradient(70vmax 50vmax at 50% -20%,color-mix(in srgb,var(--apb-rx-brand) 14%,transparent),transparent 60%),
    var(--apb-rx-ink,#0b0d12);
  background-size:72px 72px,72px 72px,auto,auto;color:#fff}
.apb-rx-hscr::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(90% 70% at 50% 45%,transparent 55%,rgba(0,0,0,.55))}
.apb-rx-hscr-wrap{position:relative;z-index:1;max-width:920px;margin:0 auto}
.apb-rx-hscr-ey{font-size:12.5px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;
  color:color-mix(in srgb,var(--apb-rx-brand) 60%,#fff);margin-bottom:22px}
.apb-rx-hscr h1{margin:0 auto 24px;font-family:var(--apb-rx-font-display,inherit);font-weight:var(--apb-rx-display-weight,800);
  font-size:clamp(38px,6.2vw,74px);letter-spacing:var(--apb-rx-display-tracking,-.025em);line-height:var(--apb-rx-display-leading,1.08);
  max-width:19ch;text-wrap:balance}
.apb-rx-hscr h1 em{font-style:normal;color:color-mix(in srgb,var(--apb-rx-brand) 72%,#fff)}
.apb-rx-hscr-circ{position:relative;display:inline-block;padding:0 .12em}
.apb-rx-hscr-circ svg{position:absolute;inset:-.28em -.34em;width:calc(100% + .68em);height:calc(100% + .56em);overflow:visible;pointer-events:none}
.apb-rx-hscr-circ path{fill:none;stroke:color-mix(in srgb,var(--apb-rx-brand) 78%,#fff);stroke-width:3;stroke-linecap:round;
  stroke-dasharray:640;stroke-dashoffset:640;animation:hscrDraw calc(1.1s / var(--apb-rx-dur,1)) ease-out forwards;animation-delay:.5s}
@keyframes hscrDraw{to{stroke-dashoffset:0}}
.apb-rx-hscr-lead{margin:0 auto 30px;color:rgba(255,255,255,.7);font-size:clamp(15px,1.6vw,17.5px);line-height:1.65;max-width:56ch}
.apb-rx-hscr-feats{display:inline-flex;gap:4px;flex-wrap:wrap;justify-content:center;padding:7px;margin-bottom:clamp(30px,6vh,46px);
  border-radius:var(--apb-rx-radius-pill,999px);background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1)}
.apb-rx-hscr-feat{display:inline-flex;align-items:center;gap:8px;padding:8px 16px;border-radius:var(--apb-rx-radius-pill,999px);
  font-size:13px;font-weight:600;color:rgba(255,255,255,.82)}
.apb-rx-hscr-feat:hover{background:rgba(255,255,255,.07)}
.apb-rx-hscr-feat svg{width:15px;height:15px;color:color-mix(in srgb,var(--apb-rx-brand) 65%,#fff);flex:none}
.apb-rx-hscr .apb-rx-h2ctas{justify-content:center}
.apb-rx-hscr-urg{margin:16px 0 0;font-size:13.5px;color:rgba(255,255,255,.75)}
.apb-rx-hscr-trust{display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;margin-top:clamp(28px,5vh,40px)}
.apb-rx-hscr-avs{display:flex}
.apb-rx-hscr-avs img{width:36px;height:36px;border-radius:50%;object-fit:cover;border:2px solid var(--apb-rx-ink,#0b0d12);margin-right:-9px}
.apb-rx-hscr-stars{display:flex;flex-direction:column;align-items:flex-start;gap:3px}
.apb-rx-hscr-stars i{display:flex;gap:2px}
.apb-rx-hscr-stars svg{width:15px;height:15px;fill:color-mix(in srgb,var(--apb-rx-brand) 70%,#fff)}
.apb-rx-hscr-stars span{font-size:12.5px;color:rgba(255,255,255,.65)}
.apb-rx-hscr-press{display:flex;align-items:center;justify-content:center;gap:18px;flex-wrap:wrap;margin-top:26px;
  font-size:12px;font-weight:700;letter-spacing:.06em;color:rgba(255,255,255,.45)}
.apb-rx-hscr-press b{display:inline-flex;align-items:center;gap:7px;color:rgba(255,255,255,.6)}
.apb-rx-hscr-press b i{width:18px;height:18px;border-radius:4px;background:rgba(255,255,255,.14);display:inline-flex;align-items:center;justify-content:center;
  font-style:normal;font-size:10px;font-weight:800;color:#fff}
@media (prefers-reduced-motion:reduce){.apb-rx-hscr-circ path{animation:none;stroke-dashoffset:0}}

/* ============================ doodle_grid ============================ */
.apb-rx-hddl{position:relative;padding:clamp(64px,11vh,120px) 24px clamp(48px,8vh,84px);background:var(--apb-rx-surface,#fff)}
.apb-rx-hddl-wrap{max-width:1140px;margin:0 auto;text-align:center}
.apb-rx-hddl h1{margin:0 auto 20px;font-family:var(--apb-rx-font-display,inherit);font-weight:900;
  font-size:clamp(42px,7vw,86px);letter-spacing:var(--apb-rx-display-tracking,-.035em);line-height:var(--apb-rx-display-leading,1.02);
  color:var(--apb-rx-ink,#0b0d12);max-width:16ch;text-wrap:balance}
.apb-rx-hddl-lead{margin:0 auto 22px;color:var(--apb-rx-muted,#6b7280);font-size:clamp(16px,1.8vw,20px);line-height:1.6;max-width:56ch}
.apb-rx-hddl-lead b{color:var(--apb-rx-accent-text,var(--apb-rx-brand));font-weight:700}
.apb-rx-hddl-author{display:inline-flex;align-items:center;gap:9px;font-size:14px;font-weight:600;color:var(--apb-rx-ink,#0b0d12);
  text-decoration:underline;text-underline-offset:3px;margin-bottom:26px}
.apb-rx-hddl-author i{width:30px;height:30px;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center;
  background:var(--apb-rx-soft,#f4f5f7);color:var(--apb-rx-accent-text,var(--apb-rx-brand));font-style:normal;font-size:12px;font-weight:800}
.apb-rx-hddl .apb-rx-h2ctas{justify-content:center;margin-bottom:clamp(36px,7vh,60px)}
.apb-rx-hddl-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,2vw,24px);text-align:left}
.apb-rx-hddl-card{border:var(--apb-rx-border,1px) solid var(--apb-rx-line,#e7e8ec);border-radius:calc(var(--apb-rx-radius) * .9);
  background:var(--apb-rx-surface-2,#fff);overflow:hidden;transition:transform var(--apb-rx-t-fast,.16s),box-shadow var(--apb-rx-t-fast,.16s),border-color var(--apb-rx-t-fast,.16s)}
.apb-rx-hddl-card:hover{transform:translateY(-4px);box-shadow:var(--apb-rx-shadow-2);border-color:var(--apb-rx-line-accent)}
.apb-rx-hddl-fig{aspect-ratio:1;display:flex;align-items:center;justify-content:center;padding:14%}
.apb-rx-hddl-img{padding:0}
.apb-rx-hddl-img img{width:100%;height:100%;object-fit:cover}
.apb-rx-hddl-fig svg{width:100%;height:100%;color:var(--apb-rx-ink,#0b0d12)}
.apb-rx-hddl-fig path,.apb-rx-hddl-fig circle,.apb-rx-hddl-fig rect,.apb-rx-hddl-fig ellipse{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.apb-rx-hddl-fig .acc{stroke:var(--apb-rx-brand)}
.apb-rx-hddl-card figcaption{padding:12px 16px 15px;font-size:14px;font-weight:700;color:var(--apb-rx-ink,#0b0d12);
  border-top:var(--apb-rx-border,1px) solid var(--apb-rx-line,#e7e8ec)}
.apb-rx-hddl-card:hover .apb-rx-hddl-fig svg{animation:hddlWiggle calc(.5s / var(--apb-rx-dur,1)) ease-in-out}
@keyframes hddlWiggle{0%,100%{transform:rotate(0)}30%{transform:rotate(-2.5deg)}65%{transform:rotate(2deg)}}
@media(max-width:880px){.apb-rx-hddl-grid{grid-template-columns:repeat(2,1fr)}}
@media (prefers-reduced-motion:reduce){.apb-rx-hddl-card:hover .apb-rx-hddl-fig svg{animation:none}}