/* ============================================================================
   CARD SYSTEM — surface presets x hover behaviours (registry: APB_Component_Cards).
   FULLY VAR-DRIVEN: presets are pure CSS-variable bundles on [data-apb-card] /
   [data-apb-card-fx]; the primitive below is the ONLY place any property is set —
   including backdrop-filter, clip-path, animation, outline and both pseudo layers.
   Custom properties inherit nearest-ancestor-first, so a section-level attribute
   overrides the page wrapper for EVERY effect (no descendant-selector leakage
   between nested configs). Knobs arrive as inline --apb-rx-card-* vars (inline
   beats the preset stylesheet); a knob-only config activates adoption via the
   neutral data-apb-card-knobs marker.

   ADOPTION CONTRACT (zero-regression guarantee, asserted by tools/apb-cards-smoke.php):
   the canonical .apb-rx-card is ALWAYS token-driven; the three core staples
   (.apb-rx-tile feature cards, .apb-rx-quote testimonials, .apb-rx-tier pricing)
   join the system ONLY under an active config ancestor. With nothing configured
   they keep their exact current look. Family showcase cards are never touched,
   and the FEATURED variants (.apb-rx-quote--feat, .apb-rx-tier--hot) keep their
   designed emphasis under any preset.
   This file loads LAST so its attribute-scoped rules win ties. Zero important-flags.
   ============================================================================ */

/* ---------------------------------------------------------------- primitive + adoption */
.apb-rx-card,
:is([data-apb-card],[data-apb-card-fx],[data-apb-card-knobs]) :is(.apb-rx-tile,.apb-rx-quote:not(.apb-rx-quote--feat),.apb-rx-tier:not(.apb-rx-tier--hot)){
  position:relative;isolation:isolate;
  background:var(--apb-rx-card-bg,var(--apb-rx-surface,#fff));
  color:var(--apb-rx-card-fg,inherit);
  border:var(--apb-rx-card-border,1px solid var(--apb-rx-line,#e7e8ec));
  border-radius:var(--apb-rx-card-radius,var(--apb-rx-radius,16px));
  box-shadow:var(--apb-rx-card-shadow,0 1px 2px rgba(11,13,18,.06));
  padding:var(--apb-rx-card-pad,26px);
  backdrop-filter:var(--apb-rx-card-backdrop,none);
  -webkit-backdrop-filter:var(--apb-rx-card-backdrop,none);
  clip-path:var(--apb-rx-card-clip,none);
  -webkit-mask:var(--apb-rx-card-mask,none);mask:var(--apb-rx-card-mask,none);
  -webkit-mask-composite:var(--apb-rx-card-maskcomp-wk,source-over);mask-composite:var(--apb-rx-card-maskcomp,add);
  outline:var(--apb-rx-card-outline,none);outline-offset:var(--apb-rx-card-outline-off,0);
  animation:var(--apb-rx-card-anim,none);
  transition:transform var(--apb-rx-t,.28s) var(--apb-rx-ease,ease),box-shadow var(--apb-rx-t,.28s) var(--apb-rx-ease,ease),
    border-color var(--apb-rx-t-fast,.16s),background var(--apb-rx-t,.28s)}
.apb-rx-card:hover,.apb-rx-card:focus-within,
:is([data-apb-card],[data-apb-card-fx],[data-apb-card-knobs]) :is(.apb-rx-tile,.apb-rx-quote:not(.apb-rx-quote--feat),.apb-rx-tier:not(.apb-rx-tier--hot)):hover,
:is([data-apb-card],[data-apb-card-fx],[data-apb-card-knobs]) :is(.apb-rx-tile,.apb-rx-quote:not(.apb-rx-quote--feat),.apb-rx-tier:not(.apb-rx-tier--hot)):focus-within{
  transform:var(--apb-rx-card-hover,none);
  box-shadow:var(--apb-rx-card-hover-shadow,var(--apb-rx-card-shadow,0 1px 2px rgba(11,13,18,.06)));
  border-color:var(--apb-rx-card-hover-border,var(--apb-rx-line,#e7e8ec))}
/* dark-fg presets recolor the card's own text — headings/strong/quote text follow fg, prose follows muted */
:is([data-apb-card],[data-apb-card-fx],[data-apb-card-knobs]) :is(.apb-rx-tile,.apb-rx-quote:not(.apb-rx-quote--feat),.apb-rx-tier:not(.apb-rx-tier--hot)) :is(h3,h4,strong,blockquote,figcaption){
  color:var(--apb-rx-card-fg,inherit)}
:is([data-apb-card],[data-apb-card-fx],[data-apb-card-knobs]) :is(.apb-rx-tile,.apb-rx-quote:not(.apb-rx-quote--feat),.apb-rx-tier:not(.apb-rx-tier--hot)) :is(p,li,small){
  color:var(--apb-rx-card-muted,inherit)}
/* feature-tile media stays flush when the padding knob moves (base rule hardcodes -24px) */
:is([data-apb-card],[data-apb-card-fx],[data-apb-card-knobs]) .apb-rx-tile>.apb-rx-thumb{
  margin:calc(var(--apb-rx-card-pad,26px)*-1) calc(var(--apb-rx-card-pad,26px)*-1) 16px}
/* pseudo layers — ONE rule each; presets fill the vars (content none = layer off) */
.apb-rx-card::before,
:is([data-apb-card],[data-apb-card-fx],[data-apb-card-knobs]) :is(.apb-rx-tile,.apb-rx-quote:not(.apb-rx-quote--feat),.apb-rx-tier:not(.apb-rx-tier--hot))::before{
  content:var(--apb-rx-card-b4,none);position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  z-index:var(--apb-rx-card-b4-z,-1);background:var(--apb-rx-card-b4-bg,none);
  border:var(--apb-rx-card-b4-border,0 solid transparent);box-shadow:var(--apb-rx-card-b4-shadow,none);
  transform:var(--apb-rx-card-b4-tf,none);opacity:var(--apb-rx-card-b4-op,1);transition:opacity .3s}
.apb-rx-card:hover::before,.apb-rx-card:focus-within::before,
:is([data-apb-card],[data-apb-card-fx],[data-apb-card-knobs]) :is(.apb-rx-tile,.apb-rx-quote:not(.apb-rx-quote--feat),.apb-rx-tier:not(.apb-rx-tier--hot)):hover::before,
:is([data-apb-card],[data-apb-card-fx],[data-apb-card-knobs]) :is(.apb-rx-tile,.apb-rx-quote:not(.apb-rx-quote--feat),.apb-rx-tier:not(.apb-rx-tier--hot)):focus-within::before{
  opacity:var(--apb-rx-card-b4-op-hover,var(--apb-rx-card-b4-op,1))}
.apb-rx-card::after,
:is([data-apb-card],[data-apb-card-fx],[data-apb-card-knobs]) :is(.apb-rx-tile,.apb-rx-quote:not(.apb-rx-quote--feat),.apb-rx-tier:not(.apb-rx-tier--hot))::after{
  content:var(--apb-rx-card-af,none);position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  z-index:var(--apb-rx-card-af-z,-1);background:var(--apb-rx-card-af-bg,none);
  border:var(--apb-rx-card-af-border,0 solid transparent);box-shadow:var(--apb-rx-card-af-shadow,none);
  transform:var(--apb-rx-card-af-tf,none);opacity:var(--apb-rx-card-af-op,1);mix-blend-mode:var(--apb-rx-card-af-blend,normal);
  animation:var(--apb-rx-card-af-anim,none)}
/* media child for the canonical primitive (flush to the edge, radius follows the card) */
.apb-rx-card-media{margin:calc(var(--apb-rx-card-pad,26px)*-1) calc(var(--apb-rx-card-pad,26px)*-1) 16px;
  border-radius:calc(var(--apb-rx-card-radius,var(--apb-rx-radius,16px)) - 1px) calc(var(--apb-rx-card-radius,var(--apb-rx-radius,16px)) - 1px) 0 0;
  overflow:hidden;aspect-ratio:16/10;background:var(--apb-rx-soft,#f2f3f7)}
.apb-rx-card-media img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform var(--apb-rx-t,.28s) cubic-bezier(.2,.7,.2,1)}
.apb-rx-card:is(:hover,:focus-within) .apb-rx-card-media img{transform:var(--apb-rx-card-img-hover,none)}

/* ---------------------------------------------------------------- 28 surface presets (pure var bundles) */
/* PRESET ISOLATION: a nested [data-apb-card] must not inherit the OUTER preset's vars.
   `initial` makes a custom property guaranteed-invalid, so var() falls back to the primitive
   default; each bundle below then sets only what it customises. radius/pad are EXCLUDED —
   they are knobs and intentionally inherit through section overrides (matches buttons). */
[data-apb-card]{--apb-rx-card-bg:initial;--apb-rx-card-fg:initial;--apb-rx-card-muted:initial;
  --apb-rx-card-border:initial;--apb-rx-card-shadow:initial;--apb-rx-card-backdrop:initial;
  --apb-rx-card-clip:initial;--apb-rx-card-mask:initial;--apb-rx-card-maskcomp:initial;--apb-rx-card-maskcomp-wk:initial;
  --apb-rx-card-outline:initial;--apb-rx-card-outline-off:initial;
  --apb-rx-card-anim:initial;--apb-rx-card-divider:initial;
  --apb-rx-card-b4:initial;--apb-rx-card-b4-z:initial;--apb-rx-card-b4-bg:initial;--apb-rx-card-b4-border:initial;
  --apb-rx-card-b4-shadow:initial;--apb-rx-card-b4-tf:initial;--apb-rx-card-b4-op:initial;--apb-rx-card-b4-op-hover:initial;
  --apb-rx-card-af:initial;--apb-rx-card-af-z:initial;--apb-rx-card-af-bg:initial;
  --apb-rx-card-af-border:initial;--apb-rx-card-af-shadow:initial;--apb-rx-card-af-tf:initial;
  --apb-rx-card-af-op:initial;--apb-rx-card-af-blend:initial;--apb-rx-card-af-anim:initial}
[data-apb-card-fx]{--apb-rx-card-hover:initial;--apb-rx-card-hover-shadow:initial;
  --apb-rx-card-hover-border:initial;--apb-rx-card-img-hover:initial}
[data-apb-card="lifted"]{--apb-rx-card-shadow:0 1px 2px rgba(11,13,18,.06)}
[data-apb-card="flat"]{--apb-rx-card-bg:var(--apb-rx-soft,#f2f3f7);--apb-rx-card-border:0 solid transparent;--apb-rx-card-shadow:none}
[data-apb-card="outlined"]{--apb-rx-card-shadow:none;--apb-rx-card-border:1.5px solid var(--apb-rx-line,#e7e8ec)}
[data-apb-card="sharp"]{--apb-rx-card-radius:0;--apb-rx-card-shadow:none;--apb-rx-card-border:1px solid var(--apb-rx-line,#e7e8ec)}
[data-apb-card="pillowy"]{--apb-rx-card-radius:26px;--apb-rx-card-pad:28px;--apb-rx-card-border:0 solid transparent;
  --apb-rx-card-shadow:0 2px 4px rgba(11,13,18,.04),0 18px 44px -18px rgba(11,13,18,.18)}
[data-apb-card="brutal"]{--apb-rx-card-radius:8px;--apb-rx-card-border:2px solid var(--apb-rx-ink,#0b0d12);
  --apb-rx-card-shadow:6px 6px 0 var(--apb-rx-ink,#0b0d12)}
[data-apb-card="floating"]{--apb-rx-card-border:0 solid transparent;
  --apb-rx-card-shadow:0 2px 6px rgba(11,13,18,.05),0 24px 60px -20px rgba(11,13,18,.28)}
[data-apb-card="inset"]{--apb-rx-card-bg:color-mix(in srgb,var(--apb-rx-ink,#0b0d12) 3.5%,var(--apb-rx-surface,#fff));
  --apb-rx-card-border:1px solid color-mix(in srgb,var(--apb-rx-ink,#0b0d12) 9%,transparent);
  --apb-rx-card-shadow:inset 0 2px 6px rgba(11,13,18,.07)}
[data-apb-card="glass"]{--apb-rx-card-bg:rgba(255,255,255,.55);--apb-rx-card-border:1px solid rgba(255,255,255,.65);
  --apb-rx-card-shadow:0 8px 32px rgba(11,13,18,.12);--apb-rx-card-muted:#3f4650;
  --apb-rx-card-backdrop:blur(14px) saturate(1.3)}
[data-apb-card="liquid"]{--apb-rx-card-radius:24px;--apb-rx-card-bg:rgba(255,255,255,.42);
  --apb-rx-card-border:1px solid rgba(255,255,255,.75);--apb-rx-card-muted:#3f4650;
  --apb-rx-card-shadow:inset 0 1px 0 rgba(255,255,255,.9),inset 0 -1px 0 rgba(255,255,255,.22),0 12px 40px rgba(11,13,18,.14);
  --apb-rx-card-backdrop:blur(22px) saturate(1.6)}
[data-apb-card="underlay"]{--apb-rx-card-border:1px solid var(--apb-rx-line,#e7e8ec);
  --apb-rx-card-shadow:10px 10px 0 color-mix(in srgb,var(--apb-rx-ink,#0b0d12) 6%,transparent)}
[data-apb-card="border"]{--apb-rx-card-border:1px solid transparent;--apb-rx-card-shadow:0 1px 2px rgba(11,13,18,.06);
  --apb-rx-card-bg:linear-gradient(var(--apb-rx-surface,#fff),var(--apb-rx-surface,#fff)) padding-box,
    linear-gradient(135deg,color-mix(in srgb,var(--apb-rx-brand,#4f46e5) 55%,var(--apb-rx-line,#e7e8ec)),var(--apb-rx-line,#e7e8ec) 60%) border-box}
[data-apb-card="dark"]{--apb-rx-card-bg:#101319;--apb-rx-card-fg:#f4f5f8;--apb-rx-card-muted:#9aa1ad;
  --apb-rx-card-border:1px solid rgba(255,255,255,.09);--apb-rx-card-shadow:0 16px 40px -16px rgba(0,0,0,.5)}
[data-apb-card="graphite"]{--apb-rx-card-bg:linear-gradient(180deg,#171b24,#12151d);--apb-rx-card-fg:#f4f5f8;
  --apb-rx-card-muted:#9aa1ad;--apb-rx-card-border:1px solid rgba(255,255,255,.07);
  --apb-rx-card-shadow:inset 0 1px 0 rgba(255,255,255,.13),0 16px 40px -16px rgba(0,0,0,.55)}
[data-apb-card="paper"]{--apb-rx-card-bg:#fdfcf9;--apb-rx-card-border:1px solid #e9e5da;--apb-rx-card-radius:6px;
  --apb-rx-card-shadow:0 1px 3px rgba(60,50,30,.08);
  --apb-rx-card-af:"";--apb-rx-card-af-op:.35;
  --apb-rx-card-af-bg:repeating-linear-gradient(0deg,transparent 0 2px,rgba(60,50,30,.012) 2px 3px)}
[data-apb-card="frame"]{--apb-rx-card-border:1px solid var(--apb-rx-line,#e7e8ec);--apb-rx-card-radius:4px;
  --apb-rx-card-pad:18px;--apb-rx-card-shadow:none;
  --apb-rx-card-outline:1px solid var(--apb-rx-line,#e7e8ec);--apb-rx-card-outline-off:-9px}
[data-apb-card="divided"]{--apb-rx-card-shadow:none;--apb-rx-card-divider:1px solid var(--apb-rx-line,#e7e8ec)}
[data-apb-card="divided"] :is(.apb-rx-card,.apb-rx-tile,.apb-rx-quote:not(.apb-rx-quote--feat),.apb-rx-tier:not(.apb-rx-tier--hot))>:last-child{
  border-top:var(--apb-rx-card-divider,0 solid transparent);padding-top:14px;margin-top:14px}
[data-apb-card="ridge"]{--apb-rx-card-border:1px solid var(--apb-rx-line,#e7e8ec);
  --apb-rx-card-shadow:0 0 0 4px var(--apb-rx-soft,#f2f3f7),0 1px 2px rgba(11,13,18,.06)}
[data-apb-card="spotlight"]{--apb-rx-card-shadow:0 1px 2px rgba(11,13,18,.06);
  --apb-rx-card-b4:"";--apb-rx-card-b4-z:0;--apb-rx-card-b4-op:0;--apb-rx-card-b4-op-hover:1;
  --apb-rx-card-b4-bg:radial-gradient(320px circle at var(--mx,50%) var(--my,38%),color-mix(in srgb,var(--apb-rx-brand,#4f46e5) 9%,transparent),transparent 65%)}
@property --apb-card-angle{syntax:"<angle>";initial-value:0deg;inherits:false}
[data-apb-card="shimmer"]{--apb-rx-card-border:1px solid transparent;--apb-rx-card-shadow:0 1px 2px rgba(11,13,18,.06);
  --apb-rx-card-anim:apbCardSpin 5s linear infinite;
  --apb-rx-card-bg:linear-gradient(var(--apb-rx-surface,#fff),var(--apb-rx-surface,#fff)) padding-box,
    conic-gradient(from var(--apb-card-angle),var(--apb-rx-line,#e7e8ec),color-mix(in srgb,var(--apb-rx-brand,#4f46e5) 70%,#fff),var(--apb-rx-line,#e7e8ec) 40%) border-box}
@keyframes apbCardSpin{to{--apb-card-angle:360deg}}
[data-apb-card="neon"]{--apb-rx-card-bg:#0d1017;--apb-rx-card-fg:#f4f5f8;--apb-rx-card-muted:#9aa1ad;
  --apb-rx-card-border:1px solid color-mix(in srgb,var(--apb-rx-brand,#4f46e5) 60%,#0d1017);
  --apb-rx-card-shadow:0 0 0 1px color-mix(in srgb,var(--apb-rx-brand,#4f46e5) 25%,transparent),0 0 34px -6px var(--apb-rx-glow,rgba(79,70,229,.35)),0 14px 34px -14px rgba(0,0,0,.5)}
[data-apb-card="aurora"]{--apb-rx-card-border:1px solid var(--apb-rx-line,#e7e8ec);--apb-rx-card-shadow:0 1px 2px rgba(11,13,18,.06);
  --apb-rx-card-bg:radial-gradient(120% 90% at 100% 0%,rgba(167,139,250,.14),transparent 55%),
    radial-gradient(110% 80% at 0% 100%,rgba(103,232,249,.12),transparent 50%),var(--apb-rx-surface,#fff)}
[data-apb-card="notched"]{--apb-rx-card-radius:0;--apb-rx-card-border:0 solid transparent;
  --apb-rx-card-bg:color-mix(in srgb,var(--apb-rx-ink,#0b0d12) 4%,var(--apb-rx-surface,#fff));--apb-rx-card-shadow:none;
  --apb-rx-card-clip:polygon(0 0,calc(100% - 22px) 0,100% 22px,100% 100%,0 100%)}
[data-apb-card="metal"]{--apb-rx-card-radius:12px;--apb-rx-card-border:1px solid #d6d9df;
  --apb-rx-card-bg:linear-gradient(180deg,#fdfdfe,#eef0f4 55%,#f7f8fa);
  --apb-rx-card-shadow:inset 0 1px 0 #fff,0 2px 6px rgba(11,13,18,.08)}
[data-apb-card="stacked"]{--apb-rx-card-border:1px solid var(--apb-rx-line,#e7e8ec);--apb-rx-card-shadow:0 1px 2px rgba(11,13,18,.06);
  --apb-rx-card-b4:"";--apb-rx-card-b4-z:-1;--apb-rx-card-b4-bg:var(--apb-rx-surface,#fff);
  --apb-rx-card-b4-border:1px solid var(--apb-rx-line,#e7e8ec);--apb-rx-card-b4-shadow:0 1px 2px rgba(11,13,18,.06);
  --apb-rx-card-b4-tf:translate(9px,9px);
  --apb-rx-card-af:"";--apb-rx-card-af-z:-2;--apb-rx-card-af-bg:var(--apb-rx-surface,#fff);
  --apb-rx-card-af-border:1px solid var(--apb-rx-line,#e7e8ec);--apb-rx-card-af-shadow:0 1px 2px rgba(11,13,18,.06);
  --apb-rx-card-af-tf:translate(18px,18px);--apb-rx-card-af-op:.65}
[data-apb-card="sticker"]{--apb-rx-card-radius:20px;--apb-rx-card-bg:var(--apb-rx-soft,#f2f3f7);--apb-rx-card-border:0 solid transparent;
  --apb-rx-card-shadow:0 0 0 6px var(--apb-rx-surface,#fff),0 4px 10px rgba(11,13,18,.08),0 18px 40px -14px rgba(11,13,18,.28)}
[data-apb-card="grain"]{--apb-rx-card-border:1px solid color-mix(in srgb,var(--apb-rx-brand,#4f46e5) 22%,var(--apb-rx-line,#e7e8ec));--apb-rx-card-shadow:none;
  --apb-rx-card-bg:linear-gradient(340deg,color-mix(in srgb,var(--apb-rx-brand,#4f46e5) 12%,var(--apb-rx-surface,#fff)),var(--apb-rx-surface,#fff) 70%);
  --apb-rx-card-af:"";--apb-rx-card-af-z:0;--apb-rx-card-af-op:.65;--apb-rx-card-af-blend:multiply;
  --apb-rx-card-af-bg:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="120" height="120"><filter id="n"><feTurbulence type="fractalNoise" baseFrequency=".9" numOctaves="2"/><feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .09 0"/></filter><rect width="120" height="120" filter="url(%23n)"/></svg>')}
[data-apb-card="blueprint"]{--apb-rx-card-radius:10px;--apb-rx-card-border:1.5px dashed color-mix(in srgb,var(--apb-rx-ink,#0b0d12) 30%,transparent);
  --apb-rx-card-shadow:none;--apb-rx-card-bg:color-mix(in srgb,var(--apb-rx-brand,#4f46e5) 3%,var(--apb-rx-surface,#fff))}

/* ---------------------------------------------------------------- wave 2 — 15 new surface presets (pure var bundles)
   photographic: vignette softlight film · tactile: emboss ceramic velvet linen ·
   print: offset cropmarks halftone ticket · playful-commerce: holofoil · aura family: mist haze nocturne */
[data-apb-card="vignette"]{--apb-rx-card-border:0 solid transparent;
  --apb-rx-card-shadow:0 2px 8px rgba(11,13,18,.1),0 18px 44px -16px rgba(11,13,18,.22);
  --apb-rx-card-b4:"";--apb-rx-card-b4-z:0;--apb-rx-card-b4-shadow:inset 0 0 64px 8px rgba(11,13,18,.16)}
[data-apb-card="softlight"]{--apb-rx-card-bg:color-mix(in srgb,var(--apb-rx-ink,#0b0d12) 4%,var(--apb-rx-surface,#fff));
  --apb-rx-card-border:1px solid color-mix(in srgb,var(--apb-rx-ink,#0b0d12) 7%,transparent);
  --apb-rx-card-shadow:0 12px 34px -14px rgba(11,13,18,.3),0 2px 6px rgba(11,13,18,.08);
  --apb-rx-card-af:"";--apb-rx-card-af-z:-1;
  --apb-rx-card-af-bg:linear-gradient(180deg,rgba(255,255,255,.9),rgba(255,255,255,0) 38%)}
[data-apb-card="film"]{--apb-rx-card-bg:#f6f3ee;--apb-rx-card-border:0 solid transparent;--apb-rx-card-radius:10px;
  --apb-rx-card-muted:#5c554a;
  --apb-rx-card-shadow:0 2px 6px rgba(40,35,25,.12),0 20px 44px -18px rgba(40,35,25,.3);
  --apb-rx-card-b4:"";--apb-rx-card-b4-z:0;--apb-rx-card-b4-shadow:inset 0 0 54px 6px rgba(35,28,18,.18);
  --apb-rx-card-af:"";--apb-rx-card-af-z:0;--apb-rx-card-af-op:.5;--apb-rx-card-af-blend:multiply;
  --apb-rx-card-af-bg:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="120" height="120"><filter id="n"><feTurbulence type="fractalNoise" baseFrequency=".9" numOctaves="2"/><feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .07 0"/></filter><rect width="120" height="120" filter="url(%23n)"/></svg>')}
[data-apb-card="emboss"]{--apb-rx-card-bg:var(--apb-rx-soft,#f2f3f7);--apb-rx-card-border:0 solid transparent;--apb-rx-card-radius:20px;
  --apb-rx-card-shadow:8px 8px 18px rgba(11,13,18,.12),-8px -8px 18px rgba(255,255,255,.9)}
[data-apb-card="ceramic"]{--apb-rx-card-radius:18px;--apb-rx-card-border:1px solid rgba(255,255,255,.8);
  --apb-rx-card-bg:linear-gradient(175deg,#fff,#eef0f4 60%,#f6f7fa);
  --apb-rx-card-shadow:inset 0 2px 0 rgba(255,255,255,.95),inset 0 -1px 0 rgba(11,13,18,.05),0 3px 8px rgba(11,13,18,.08),0 16px 36px -14px rgba(11,13,18,.2);
  --apb-rx-card-af:"";--apb-rx-card-af-z:0;
  --apb-rx-card-af-bg:linear-gradient(100deg,transparent 20%,rgba(255,255,255,.55) 34%,transparent 46%)}
[data-apb-card="velvet"]{--apb-rx-card-bg:radial-gradient(120% 100% at 24% 0%,color-mix(in srgb,var(--apb-rx-brand,#4f46e5) 34%,#0c0a18),#0c0a18 70%);
  --apb-rx-card-fg:#f5f3ff;--apb-rx-card-muted:#b9b3d6;--apb-rx-card-border:1px solid rgba(255,255,255,.08);
  --apb-rx-card-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 20px 48px -14px rgba(10,6,30,.6)}
[data-apb-card="linen"]{--apb-rx-card-bg:#faf8f4;--apb-rx-card-border:1px solid #e7e2d6;--apb-rx-card-radius:8px;
  --apb-rx-card-shadow:0 1px 3px rgba(60,50,30,.08);
  --apb-rx-card-af:"";--apb-rx-card-af-z:-1;--apb-rx-card-af-op:.55;
  --apb-rx-card-af-bg:repeating-linear-gradient(0deg,rgba(90,80,60,.045) 0 1px,transparent 1px 3px),repeating-linear-gradient(90deg,rgba(90,80,60,.045) 0 1px,transparent 1px 3px)}
/* offset: riso/CMYK misregistration via hard solid shadows — shadows only render outside the
   border-box, so the ghosts peek out at the corners and never cross the content */
[data-apb-card="offset"]{--apb-rx-card-border:1.5px solid var(--apb-rx-ink,#0b0d12);--apb-rx-card-radius:12px;
  --apb-rx-card-shadow:6px 6px 0 0 color-mix(in srgb,var(--apb-rx-brand,#4f46e5) 80%,#fff),
    -5px -5px 0 0 color-mix(in srgb,#ff2d78 65%,#fff)}
[data-apb-card="cropmarks"]{--apb-rx-card-border:0 solid transparent;--apb-rx-card-radius:2px;--apb-rx-card-shadow:none;
  --apb-rx-card-bg:color-mix(in srgb,var(--apb-rx-ink,#0b0d12) 2.5%,var(--apb-rx-surface,#fff));
  --apb-rx-card-af:"";--apb-rx-card-af-z:0;
  --apb-rx-card-af-bg:linear-gradient(var(--apb-rx-ink,#0b0d12),var(--apb-rx-ink,#0b0d12)) 0 0/18px 1.5px no-repeat,
    linear-gradient(var(--apb-rx-ink,#0b0d12),var(--apb-rx-ink,#0b0d12)) 0 0/1.5px 18px no-repeat,
    linear-gradient(var(--apb-rx-ink,#0b0d12),var(--apb-rx-ink,#0b0d12)) 100% 0/18px 1.5px no-repeat,
    linear-gradient(var(--apb-rx-ink,#0b0d12),var(--apb-rx-ink,#0b0d12)) 100% 0/1.5px 18px no-repeat,
    linear-gradient(var(--apb-rx-ink,#0b0d12),var(--apb-rx-ink,#0b0d12)) 0 100%/18px 1.5px no-repeat,
    linear-gradient(var(--apb-rx-ink,#0b0d12),var(--apb-rx-ink,#0b0d12)) 0 100%/1.5px 18px no-repeat,
    linear-gradient(var(--apb-rx-ink,#0b0d12),var(--apb-rx-ink,#0b0d12)) 100% 100%/18px 1.5px no-repeat,
    linear-gradient(var(--apb-rx-ink,#0b0d12),var(--apb-rx-ink,#0b0d12)) 100% 100%/1.5px 18px no-repeat}
/* halftone: dots live ONLY in a bottom-right corner pocket (radial cover fades them out) */
[data-apb-card="halftone"]{--apb-rx-card-border:1px solid var(--apb-rx-line,#e7e8ec);--apb-rx-card-shadow:0 1px 2px rgba(11,13,18,.06);
  --apb-rx-card-af:"";--apb-rx-card-af-z:-1;--apb-rx-card-af-op:.55;
  --apb-rx-card-af-bg:radial-gradient(150% 150% at 100% 100%,rgba(255,255,255,0) 0 15%,var(--apb-rx-surface,#fff) 42%),
    radial-gradient(circle at 2px 2px,color-mix(in srgb,var(--apb-rx-brand,#4f46e5) 60%,transparent) 1.5px,transparent 2px) 0 0/9px 9px}
/* ticket: flat material — the mask primitive cuts the two edge notches; box-shadow off by design */
[data-apb-card="ticket"]{--apb-rx-card-radius:14px;--apb-rx-card-border:0 solid transparent;--apb-rx-card-bg:var(--apb-rx-surface,#fff);
  --apb-rx-card-shadow:none;
  --apb-rx-card-af:"";--apb-rx-card-af-z:0;
  --apb-rx-card-af-bg:repeating-linear-gradient(90deg,rgba(11,13,18,.2) 0 7px,transparent 7px 14px) 16px 62%/calc(100% - 32px) 1.5px no-repeat;
  --apb-rx-card-mask:radial-gradient(circle 11px at 0 62%,transparent 98%,#000 100%),radial-gradient(circle 11px at 100% 62%,transparent 98%,#000 100%);
  --apb-rx-card-maskcomp:intersect;--apb-rx-card-maskcomp-wk:source-in}
[data-apb-card="holofoil"]{--apb-rx-card-radius:16px;--apb-rx-card-border:1px solid rgba(255,255,255,.7);
  --apb-rx-card-bg:linear-gradient(135deg,#f5f6fa,#e9ecf4);
  --apb-rx-card-shadow:0 2px 8px rgba(11,13,18,.1),0 18px 40px -16px rgba(11,13,18,.22);
  --apb-rx-card-af:"";--apb-rx-card-af-z:-1;
  --apb-rx-card-af-bg:linear-gradient(115deg,rgba(255,255,255,0) 28%,rgba(255,255,255,.8) 44%,rgba(255,255,255,0) 60%),
    conic-gradient(from 210deg at 60% 40%,rgba(255,70,175,.55),rgba(60,195,255,.52),rgba(105,255,195,.48),rgba(255,215,80,.52),rgba(150,100,255,.55),rgba(255,70,175,.55))}
/* aura family (Gary's poster reference): soft gradient-mist washes, pure layered radials */
[data-apb-card="mist"]{--apb-rx-card-border:0 solid transparent;--apb-rx-card-radius:14px;
  --apb-rx-card-shadow:0 2px 8px rgba(11,13,18,.07),0 18px 44px -18px rgba(11,13,18,.16);
  --apb-rx-card-bg:radial-gradient(90% 70% at 15% 85%,rgba(255,120,90,.26),transparent 60%),
    radial-gradient(80% 60% at 80% 75%,rgba(120,160,255,.28),transparent 60%),
    radial-gradient(70% 60% at 60% 20%,rgba(160,120,255,.15),transparent 65%),
    radial-gradient(100% 80% at 30% 40%,rgba(140,200,255,.2),transparent 60%),#fdfdfe}
[data-apb-card="haze"]{--apb-rx-card-border:1px solid color-mix(in srgb,var(--apb-rx-brand,#4f46e5) 10%,#eef0f4);--apb-rx-card-radius:14px;
  --apb-rx-card-shadow:0 2px 8px rgba(11,13,18,.06),0 16px 40px -18px rgba(11,13,18,.14);
  --apb-rx-card-bg:radial-gradient(120% 55% at 50% 108%,color-mix(in srgb,var(--apb-rx-brand,#4f46e5) 26%,#cfe0ff),transparent 62%),
    radial-gradient(60% 35% at 30% 105%,rgba(150,190,255,.38),transparent 70%),#fff}
[data-apb-card="nocturne"]{--apb-rx-card-fg:#f2f4f6;--apb-rx-card-muted:#93a0ab;--apb-rx-card-radius:14px;
  --apb-rx-card-border:1px solid rgba(255,255,255,.07);
  --apb-rx-card-shadow:0 2px 4px rgba(0,0,0,.3),0 22px 52px -16px rgba(0,0,0,.55);
  --apb-rx-card-bg:radial-gradient(120% 60% at 50% 112%,rgba(30,160,140,.5),transparent 64%),
    radial-gradient(70% 40% at 70% 108%,rgba(60,120,200,.3),transparent 70%),#07090c}

/* ---------------------------------------------------------------- glass finishes (data-apb-card-glass · registry GLASS_FINISHES)
   finishes: liquid fluted prism etch drop bevel smoke aurora pebble
   Pure var bundles. Real refraction arrives as an inline --apb-rx-card-backdrop:url(#map) set by
   assets/pages/apb-card-glass.js (Chromium only); without it these degrade to the glass/liquid frost.
   liquid/prism/etch/drop differ only in the JS displacement map — no dedicated bundle needed. */
[data-apb-card-glass]{--apb-rx-card-bg:rgba(255,255,255,.16);--apb-rx-card-border:1px solid rgba(255,255,255,.55);
  --apb-rx-card-muted:#3a4150;
  --apb-rx-card-shadow:0 2px 2px rgba(9,9,20,.07),0 16px 40px rgba(9,9,20,.18),inset 0 1px 0 rgba(255,255,255,.6),inset 0 0 0 1px rgba(255,255,255,.12)}
[data-apb-card-glass="fluted"]{--apb-rx-card-af:"";--apb-rx-card-af-z:-1;
  --apb-rx-card-af-bg:repeating-linear-gradient(90deg,rgba(255,255,255,.2) 0 1px,rgba(255,255,255,0) 3px 8px,rgba(10,12,30,.06) 9px 11px,rgba(255,255,255,.08) 12px 14px,rgba(255,255,255,0) 15px 20px)}
[data-apb-card-glass="bevel"]{--apb-rx-card-bg:rgba(255,255,255,.1);
  --apb-rx-card-shadow:0 2px 2px rgba(9,9,20,.09),0 20px 46px rgba(9,9,20,.22),inset 0 0 0 1px rgba(255,255,255,.35),inset 0 0 0 7px rgba(255,255,255,.12),inset 0 0 0 8px rgba(120,140,255,.1),inset 0 2px 0 rgba(255,255,255,.65);
  --apb-rx-card-af:"";--apb-rx-card-af-z:-1;
  --apb-rx-card-af-bg:linear-gradient(115deg,transparent 32%,rgba(255,255,255,.28) 44%,rgba(255,255,255,.05) 52%,transparent 62%)}
[data-apb-card-glass="smoke"]{--apb-rx-card-bg:rgba(10,12,20,.32);--apb-rx-card-fg:#f4f5f8;--apb-rx-card-muted:#a6aebd;
  --apb-rx-card-border:1px solid rgba(255,255,255,.15);
  --apb-rx-card-shadow:0 2px 2px rgba(0,0,0,.28),0 18px 44px rgba(0,0,0,.38),inset 0 1px 0 rgba(255,255,255,.16);
  --apb-rx-card-b4:"";--apb-rx-card-b4-z:0;--apb-rx-card-b4-shadow:inset 0 0 46px 12px rgba(0,0,0,.45)}
@property --apb-card-glass-angle{syntax:"<angle>";initial-value:210deg;inherits:false}
[data-apb-card-glass="aurora"]{--apb-rx-card-af:"";--apb-rx-card-af-z:-1;--apb-rx-card-af-blend:overlay;
  --apb-rx-card-af-anim:apbCardGlassSheen 16s linear infinite;
  --apb-rx-card-af-bg:conic-gradient(from var(--apb-card-glass-angle,210deg) at 32% 22%,rgba(255,44,150,.34),rgba(44,200,255,.28),rgba(90,255,190,.24),rgba(255,215,60,.26),rgba(170,80,255,.3),rgba(255,44,150,.34))}
@keyframes apbCardGlassSheen{to{--apb-card-glass-angle:570deg}}
[data-apb-card-glass="pebble"]{--apb-rx-card-bg:rgba(255,255,255,.3)}
@media (prefers-reduced-motion:reduce){[data-apb-card-glass]{--apb-rx-card-af-anim:none}}
@media (prefers-reduced-transparency:reduce),(forced-colors:active){
  [data-apb-card-glass]{--apb-rx-card-backdrop:none;--apb-rx-card-bg:var(--apb-rx-surface,#fff)}
  [data-apb-card-glass="smoke"]{--apb-rx-card-bg:#101319}}

/* ---------------------------------------------------------------- 9 hover behaviours (pure var bundles) */
[data-apb-card-fx="lift"]{--apb-rx-card-hover:translateY(-4px);
  --apb-rx-card-hover-shadow:0 4px 10px rgba(11,13,18,.06),0 22px 48px -16px rgba(11,13,18,.25)}
[data-apb-card-fx="grow"]{--apb-rx-card-hover:scale(1.018);
  --apb-rx-card-hover-shadow:0 4px 10px rgba(11,13,18,.06),0 20px 44px -16px rgba(11,13,18,.22)}
[data-apb-card-fx="raise"]{--apb-rx-card-hover-shadow:0 3px 8px rgba(11,13,18,.07),0 26px 56px -18px rgba(11,13,18,.3)}
[data-apb-card-fx="glow"]{--apb-rx-card-hover-shadow:0 0 0 1px color-mix(in srgb,var(--apb-rx-brand,#4f46e5) 30%,transparent),0 14px 40px -12px var(--apb-rx-glow,rgba(79,70,229,.35))}
[data-apb-card-fx="outline"]{--apb-rx-card-hover-border:color-mix(in srgb,var(--apb-rx-brand,#4f46e5) 55%,var(--apb-rx-line,#e7e8ec))}
[data-apb-card-fx="press"]{--apb-rx-card-hover:translateY(2px);--apb-rx-card-hover-shadow:0 1px 2px rgba(11,13,18,.06)}
[data-apb-card-fx="tilt"]{--apb-rx-card-hover:perspective(900px) rotateX(1.6deg) rotateY(-1.6deg) translateY(-3px);
  --apb-rx-card-hover-shadow:0 4px 10px rgba(11,13,18,.06),0 24px 50px -16px rgba(11,13,18,.26)}
[data-apb-card-fx="zoom"]{--apb-rx-card-hover:translateY(-2px);--apb-rx-card-img-hover:scale(1.06)}
[data-apb-card-fx="none"]{--apb-rx-card-hover:none;--apb-rx-card-hover-shadow:var(--apb-rx-card-shadow,0 1px 2px rgba(11,13,18,.06))}
/* brutal pairs naturally with press: the hard shadow collapses */
[data-apb-card="brutal"][data-apb-card-fx="press"]{--apb-rx-card-hover:translate(4px,4px);--apb-rx-card-hover-shadow:2px 2px 0 var(--apb-rx-ink,#0b0d12)}

/* ---------------------------------------------------------------- wave 2 — 2 new hover fx (pure var bundle + one attribute-scoped fx) */
/* lean: pointer-following 3D tilt — uses the EXISTING hover transform slot; JS feeds --apb-lx/--apb-ly */
[data-apb-card-fx="lean"]{--apb-rx-card-hover:perspective(700px) rotateX(var(--apb-ly,0deg)) rotateY(var(--apb-lx,0deg)) translateY(-2px);
  --apb-rx-card-hover-shadow:0 6px 14px rgba(11,13,18,.08),0 26px 54px -18px rgba(11,13,18,.3)}
/* sheen: one-shot light sweep on hover. Not a pure var bundle (needs its own ::after content/background/
   transition, same shape as the "divided" precedent above) — temporarily replaces the surface's own
   decorative ::after layer while active. */
[data-apb-card-fx="sheen"] :is(.apb-rx-card,.apb-rx-tile,.apb-rx-quote:not(.apb-rx-quote--feat),.apb-rx-tier:not(.apb-rx-tier--hot))::after{
  content:"";background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.5) 50%,transparent 65%) -160% 0/280% 100% no-repeat;
  border:0 solid transparent;box-shadow:none;transform:none;opacity:1;z-index:1;mix-blend-mode:normal;
  transition:background-position .7s ease}
[data-apb-card-fx="sheen"] :is(.apb-rx-card,.apb-rx-tile,.apb-rx-quote:not(.apb-rx-quote--feat),.apb-rx-tier:not(.apb-rx-tier--hot)):is(:hover,:focus-within)::after{
  background-position:160% 0}

/* ---------------------------------------------------------------- scheme awareness */
/* On a dark section scheme the translucent presets flip to dark glass; light-surface presets
   (brutal, metal, sticker, ...) keep their own readable fg on purpose. Vars only, so the
   nearest data-apb-card still wins inside nested configs. */
:is([data-apb-scheme="dark"][data-apb-card="glass"],[data-apb-card="glass"] [data-apb-scheme="dark"],[data-apb-scheme="dark"] [data-apb-card="glass"]){
  --apb-rx-card-bg:rgba(255,255,255,.06);--apb-rx-card-border:1px solid rgba(255,255,255,.14);
  --apb-rx-card-shadow:0 8px 32px rgba(0,0,0,.35);--apb-rx-card-fg:#f4f5f8;--apb-rx-card-muted:#a6adba}
:is([data-apb-scheme="dark"][data-apb-card="liquid"],[data-apb-card="liquid"] [data-apb-scheme="dark"],[data-apb-scheme="dark"] [data-apb-card="liquid"]){
  --apb-rx-card-bg:rgba(255,255,255,.05);--apb-rx-card-border:1px solid rgba(255,255,255,.18);
  --apb-rx-card-fg:#f4f5f8;--apb-rx-card-muted:#a6adba;
  --apb-rx-card-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 12px 40px rgba(0,0,0,.4)}

/* ---------------------------------------------------------------- reduced motion */
@media (prefers-reduced-motion:reduce){
  .apb-rx-card,.apb-rx-card-media img,
  :is([data-apb-card],[data-apb-card-fx],[data-apb-card-knobs]) :is(.apb-rx-tile,.apb-rx-quote:not(.apb-rx-quote--feat),.apb-rx-tier:not(.apb-rx-tier--hot)){transition:none;animation:none}
  [data-apb-card-fx]{--apb-rx-card-hover:none;--apb-rx-card-img-hover:none}
  [data-apb-card]{--apb-rx-card-anim:none}
  .apb-rx-card::before,
  :is([data-apb-card],[data-apb-card-fx],[data-apb-card-knobs]) :is(.apb-rx-tile,.apb-rx-quote:not(.apb-rx-quote--feat),.apb-rx-tier:not(.apb-rx-tier--hot))::before{transition:none}
  [data-apb-card-fx="sheen"] :is(.apb-rx-card,.apb-rx-tile,.apb-rx-quote:not(.apb-rx-quote--feat),.apb-rx-tier:not(.apb-rx-tier--hot))::after{transition:none}
}