/* Award-style hero recipes (APB_Section_Components_Heroes2) — partition 6. Tokens only; every brand-tinted
   value derives from --apb-rx-brand; scrolljack heroes read --apb-p and default to their revealed end-state.
   Shared .apb-rx-h2cta* button component is reused (not redefined) for every CTA row here. */

/* ============================ tabbed_app ============================ */
.apb-rx-htab{position:relative;overflow:hidden;padding:clamp(60px,10vh,110px) 24px 0;
  background:linear-gradient(180deg,var(--apb-rx-soft,#f4f5f7),var(--apb-rx-surface,#fff) 70%)}
.apb-rx-htab-wrap{max-width:1060px;margin:0 auto;text-align:center}
.apb-rx-htab h1{margin:0 auto 26px;font-family:var(--apb-rx-font-display,inherit);font-weight:var(--apb-rx-display-weight,800);
  font-size:clamp(40px,6.4vw,76px);letter-spacing:var(--apb-rx-display-tracking,-.03em);line-height:var(--apb-rx-display-leading,1.02);
  color:var(--apb-rx-ink,#0b0d12);max-width:18ch;text-wrap:balance}
.apb-rx-htab h1 em{font-style:normal;color:var(--apb-rx-accent-text,var(--apb-rx-brand))}
.apb-rx-htab .apb-rx-h2ctas{justify-content:center}
.apb-rx-htab-tabs{display:inline-flex;gap:4px;margin:34px auto 0;padding:5px;border-radius:var(--apb-rx-radius-pill,999px);
  background:color-mix(in srgb,var(--apb-rx-ink,#0b0d12) 6%,var(--apb-rx-surface,#fff));
  border:var(--apb-rx-border,1px) solid var(--apb-rx-line,#e7e8ec)}
.apb-rx-htab-tab{padding:9px 20px;border-radius:var(--apb-rx-radius-pill,999px);cursor:pointer;
  font-size:14px;font-weight:600;color:var(--apb-rx-muted,#6b7280);transition:color var(--apb-rx-t-fast,.16s),background var(--apb-rx-t-fast,.16s)}
.apb-rx-htab-tab:hover{color:var(--apb-rx-ink,#0b0d12)}
.apb-rx-htab-radio{position:absolute;opacity:0;pointer-events:none}
.apb-rx-htab-radio:focus-visible + .apb-rx-htab-tab,
.apb-rx-htab-radio:focus-visible ~ .apb-rx-htab-wrap .apb-rx-htab-tab{outline:2px solid var(--apb-rx-ring)}
.apb-rx-htab-win{max-width:1060px;margin:clamp(28px,5vh,48px) auto -2px;border-radius:calc(var(--apb-rx-radius) * 1.2) calc(var(--apb-rx-radius) * 1.2) 0 0;
  overflow:hidden;background:var(--apb-rx-surface-2,#fff);border:var(--apb-rx-border,1px) solid var(--apb-rx-line,#e7e8ec);border-bottom:0;
  box-shadow:0 -8px 24px -12px var(--apb-rx-glow-soft),var(--apb-rx-shadow-3);text-align:left}
.apb-rx-htab-bar{display:flex;align-items:center;gap:8px;padding:11px 14px;border-bottom:var(--apb-rx-border,1px) solid var(--apb-rx-line,#e7e8ec);
  background:color-mix(in srgb,var(--apb-rx-ink,#0b0d12) 3%,var(--apb-rx-surface-2,#fff))}
.apb-rx-htab-bar i{width:11px;height:11px;border-radius:50%;background:color-mix(in srgb,var(--apb-rx-ink,#0b0d12) 14%,var(--apb-rx-surface-2,#fff))}
.apb-rx-htab-bar span{margin-left:8px;padding:5px 14px;border-radius:var(--apb-rx-radius-pill,999px);font-size:11.5px;color:var(--apb-rx-muted,#6b7280);
  background:color-mix(in srgb,var(--apb-rx-ink,#0b0d12) 6%,var(--apb-rx-surface-2,#fff))}
.apb-rx-htab-panel{display:none;min-height:clamp(300px,44vh,460px);grid-template-columns:170px 1fr;
  animation:htabIn calc(.35s / var(--apb-rx-dur,1)) ease}
@keyframes htabIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.apb-rx-htab-shot{grid-column:1/-1}
.apb-rx-htab-shot img{display:block;width:100%;height:auto}
.apb-rx-htab-radio:nth-of-type(1):checked ~ .apb-rx-htab-win .apb-rx-htab-panel:nth-of-type(1),
.apb-rx-htab-radio:nth-of-type(2):checked ~ .apb-rx-htab-win .apb-rx-htab-panel:nth-of-type(2),
.apb-rx-htab-radio:nth-of-type(3):checked ~ .apb-rx-htab-win .apb-rx-htab-panel:nth-of-type(3),
.apb-rx-htab-radio:nth-of-type(4):checked ~ .apb-rx-htab-win .apb-rx-htab-panel:nth-of-type(4){display:grid}
.apb-rx-htab-radio:nth-of-type(1):checked ~ .apb-rx-htab-wrap .apb-rx-htab-tabs .apb-rx-htab-tab:nth-of-type(1),
.apb-rx-htab-radio:nth-of-type(2):checked ~ .apb-rx-htab-wrap .apb-rx-htab-tabs .apb-rx-htab-tab:nth-of-type(2),
.apb-rx-htab-radio:nth-of-type(3):checked ~ .apb-rx-htab-wrap .apb-rx-htab-tabs .apb-rx-htab-tab:nth-of-type(3),
.apb-rx-htab-radio:nth-of-type(4):checked ~ .apb-rx-htab-wrap .apb-rx-htab-tabs .apb-rx-htab-tab:nth-of-type(4)
  {background:var(--apb-rx-surface-2,#fff);color:var(--apb-rx-ink,#0b0d12);box-shadow:var(--apb-rx-shadow-1)}
/* skeleton primitives shared by both placeholder layouts */
.apb-rx-htab-sk{border-radius:calc(var(--apb-rx-radius) * .5);height:11px;
  background:color-mix(in srgb,var(--apb-rx-ink,#0b0d12) 8%,var(--apb-rx-surface-2,#fff))}
.apb-rx-htab-sk--brand{background:color-mix(in srgb,var(--apb-rx-brand) 22%,var(--apb-rx-surface-2,#fff))}
.apb-rx-htab-card{border:var(--apb-rx-border,1px) solid var(--apb-rx-line,#e7e8ec);border-radius:calc(var(--apb-rx-radius) * .8);
  background:var(--apb-rx-surface-2,#fff);padding:14px;display:flex;flex-direction:column;gap:9px}
.apb-rx-htab-side{border-right:var(--apb-rx-border,1px) solid var(--apb-rx-line,#e7e8ec);padding:16px 12px;display:flex;flex-direction:column;gap:10px;
  background:color-mix(in srgb,var(--apb-rx-ink,#0b0d12) 2%,var(--apb-rx-surface-2,#fff))}
.apb-rx-htab-main{padding:18px;display:flex;flex-direction:column;gap:14px}
.apb-rx-htab-stats{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.apb-rx-htab-chart{flex:1;display:flex;align-items:flex-end;gap:7px;padding:14px;border:var(--apb-rx-border,1px) solid var(--apb-rx-line,#e7e8ec);
  border-radius:calc(var(--apb-rx-radius) * .8);min-height:130px}
.apb-rx-htab-chart i{flex:1;border-radius:3px 3px 0 0;background:color-mix(in srgb,var(--apb-rx-brand) 30%,var(--apb-rx-surface-2,#fff));height:calc(var(--h) * 1%)}
.apb-rx-htab-chart i:nth-child(3n){background:var(--apb-rx-brand)}
.apb-rx-htab-doc{padding:26px clamp(24px,8vw,90px);display:flex;flex-direction:column;gap:12px}
@media(max-width:720px){
  .apb-rx-htab-panel{grid-template-columns:1fr}.apb-rx-htab-side{display:none}
  .apb-rx-htab-stats{grid-template-columns:1fr}
  .apb-rx-htab-tabs{flex-wrap:wrap;border-radius:calc(var(--apb-rx-radius) * 1.2)}
}
@media (prefers-reduced-motion:reduce){.apb-rx-htab-panel{animation:none}}

/* ============================ card_marquee family (shared .apb-rx-hcm-* + per-root canvas) ============================ */
.apb-rx-hcmq,.apb-rx-hcmd,.apb-rx-hcmh{position:relative;overflow:hidden;color:#fff;
  background:radial-gradient(80vmax 60vmax at -10% -20%,color-mix(in srgb,var(--apb-rx-brand) 30%,transparent),transparent 55%),
    color-mix(in srgb,var(--apb-rx-brand) 42%,var(--apb-rx-ink,#0b0d12))}
.apb-rx-hcmh{background:radial-gradient(80vmax 60vmax at 50% -30%,color-mix(in srgb,var(--apb-rx-brand) 30%,transparent),transparent 60%),
    color-mix(in srgb,var(--apb-rx-brand) 42%,var(--apb-rx-ink,#0b0d12));padding:clamp(56px,10vh,100px) 0 clamp(40px,7vh,72px)}
.apb-rx-hcm-wrap--split{max-width:1280px;margin:0 auto;display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(32px,5vw,64px);
  align-items:center;min-height:min(760px,92vh)}
.apb-rx-hcm-copy{position:relative;z-index:1;padding:clamp(48px,8vh,80px) 0 clamp(48px,8vh,80px) clamp(24px,4vw,56px)}
.apb-rx-hcm-copy--c{max-width:820px;margin:0 auto;text-align:center;padding:0 24px}
.apb-rx-hcm-ey{display:inline-flex;align-items:center;padding:8px 18px;border-radius:var(--apb-rx-radius-pill,999px);
  border:1px solid rgba(255,255,255,.28);background:rgba(255,255,255,.06);
  font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.85);margin-bottom:24px}
.apb-rx-hcmq h1,.apb-rx-hcmd h1,.apb-rx-hcmh h1{margin:0 0 20px;font-family:var(--apb-rx-font-display,inherit);
  font-weight:var(--apb-rx-display-weight,800);font-size:clamp(38px,5.8vw,70px);letter-spacing:var(--apb-rx-display-tracking,-.02em);
  line-height:var(--apb-rx-display-leading,1.06);text-wrap:balance;max-width:15ch}
.apb-rx-hcmh h1{max-width:none}
.apb-rx-hcm-lead{margin:0 0 30px;color:rgba(255,255,255,.78);font-size:clamp(15px,1.6vw,18px);line-height:1.65;max-width:52ch}
.apb-rx-hcm-copy--c .apb-rx-hcm-lead{margin-left:auto;margin-right:auto}
.apb-rx-hcm-ctas{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:clamp(32px,6vh,52px)}
.apb-rx-hcm-copy--c .apb-rx-hcm-ctas{justify-content:center}
.apb-rx-hcm-feats{display:grid;grid-template-columns:1fr 1fr;gap:clamp(18px,3vw,36px)}
.apb-rx-hcm-feat{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:start}
.apb-rx-hcm-feat svg{width:26px;height:26px;color:#fff;opacity:.9;margin-top:2px}
.apb-rx-hcm-feat b{display:block;font-size:16px;font-weight:700;margin-bottom:5px}
.apb-rx-hcm-feat span{font-size:13.5px;line-height:1.55;color:rgba(255,255,255,.66)}
/* vertical columns (card_marquee, card_marquee_diagonal) */
.apb-rx-hcm-media--v{position:relative;height:min(760px,92vh);display:flex;gap:clamp(14px,1.6vw,22px);padding:0 clamp(16px,3vw,40px) 0 0;
  mask:linear-gradient(180deg,transparent,#000 9%,#000 91%,transparent);-webkit-mask:linear-gradient(180deg,transparent,#000 9%,#000 91%,transparent)}
.apb-rx-hcmd .apb-rx-hcm-media--v{mask:linear-gradient(115deg,transparent 2%,#000 18%,#000 88%,transparent 99%);
  -webkit-mask:linear-gradient(115deg,transparent 2%,#000 18%,#000 88%,transparent 99%)}
.apb-rx-hcm-field{position:absolute;inset:-34% -18% -34% -10%;display:flex;gap:clamp(14px,1.5vw,20px);transform:rotate(-14deg)}
.apb-rx-hcm-col{flex:1;overflow:hidden}
.apb-rx-hcm-colin{display:flex;flex-direction:column;gap:clamp(14px,1.6vw,22px);animation:hcmUpDown calc(34s / var(--apb-rx-dur,1)) linear infinite}
.apb-rx-hcm-col--rev .apb-rx-hcm-colin{animation-name:hcmDownUp;animation-duration:calc(40s / var(--apb-rx-dur,1))}
.apb-rx-hcm-col--slow .apb-rx-hcm-colin{animation-duration:calc(52s / var(--apb-rx-dur,1))}
.apb-rx-hcm-col:hover .apb-rx-hcm-colin,.apb-rx-hcm-row:hover .apb-rx-hcm-rowin{animation-play-state:paused}
@keyframes hcmUpDown{to{transform:translateY(-50%)}}
@keyframes hcmDownUp{from{transform:translateY(-50%)}to{transform:translateY(0)}}
.apb-rx-hcm-card{flex:none;border-radius:calc(var(--apb-rx-radius) * 1.4);overflow:hidden;background:rgba(255,255,255,.06);
  box-shadow:0 18px 44px -18px rgba(11,13,18,.45)}
.apb-rx-hcm-card--sk{background:linear-gradient(135deg,rgba(255,255,255,.14),rgba(255,255,255,.04))}
.apb-rx-hcm-card img{display:block;width:100%;aspect-ratio:var(--ar,3/4);object-fit:cover}
/* horizontal rows (card_marquee_horizontal) */
.apb-rx-hcm-media--h{display:flex;flex-direction:column;gap:clamp(14px,2vh,22px);
  mask:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);-webkit-mask:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.apb-rx-hcm-row{overflow:hidden}
.apb-rx-hcm-rowin{display:flex;gap:clamp(14px,1.6vw,22px);width:max-content;padding-right:clamp(14px,1.6vw,22px);
  animation:hcmLeftRight calc(44s / var(--apb-rx-dur,1)) linear infinite}
.apb-rx-hcm-row--rev .apb-rx-hcm-rowin{animation-name:hcmRightLeft;animation-duration:calc(52s / var(--apb-rx-dur,1))}
@keyframes hcmLeftRight{to{transform:translateX(-50%)}}
@keyframes hcmRightLeft{from{transform:translateX(-50%)}to{transform:translateX(0)}}
.apb-rx-hcm-media--h .apb-rx-hcm-card{height:clamp(150px,24vh,220px);aspect-ratio:var(--ar,4/3)}
@media(max-width:900px){
  .apb-rx-hcm-wrap--split{grid-template-columns:1fr;min-height:0}
  .apb-rx-hcm-wrap--split .apb-rx-hcm-copy{padding:clamp(44px,7vh,64px) clamp(20px,4vw,32px) 8px}
  .apb-rx-hcm-media--v{height:52vh;padding:0 clamp(20px,4vw,32px) 32px}
  .apb-rx-hcm-feats{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  .apb-rx-hcm-colin,.apb-rx-hcm-rowin{animation:none}
  .apb-rx-hcm-media--v,.apb-rx-hcm-media--h{mask:none;-webkit-mask:none}
  .apb-rx-hcm-row{overflow-x:auto;-webkit-overflow-scrolling:touch}
}