/* ══════════════════════════════════════════════════════════════════
   Playbook cards — BENTO BLOOM  (2026-11-08  ·  v5 mobile pass)

   Direction chosen: variation 01. 4-column asymmetric bento, one 2×2
   hero tile, glass navy panels, purple bloom behind each panel.

   NO backdrop-filter and NO JS: depth comes from the gradient panel
   plus a blurred radial behind it. Nothing to feature-detect.

   MOBILE FIXES IN THIS REVISION (v5):
     · hover effects moved inside @media (hover:hover) — on touch they
       used to fire on tap and STICK (iOS keeps :hover after touchend,
       leaving a card lifted with a lit border until you tap elsewhere).
     · labels were 9.4px / 9.6px / 12.2px on phones → now 10.9 / 10.9 / 13.3px.
     · the section bloom used filter:blur(34px) over a 76%-height layer
       plus 6 blurred card blooms = 7 blurred layers, which janks scroll
       on low-end Android. Blur is off on phones and the blooms are smaller.
     · .pb-hero padding override on ≤620px relied on source order alone;
       now declared explicitly so reordering the file cannot break it.

   Works inside both of the site's design systems:
     · root pages  → .section .container   (Space Grotesk / Jakarta)
     · white-label → .sec .wrap .kicker    (mono kicker + display h2)

   NAMESPACE WARNING: style.min.css already owns .pb-num (a 2.8rem
   circular process-step badge) plus .pb-step / .pb-arrow. This file
   loads AFTER it, so those names must never be reused here. The card
   index is .pb-idx for exactly that reason.
   ══════════════════════════════════════════════════════════════════ */

/* ── section shell + ambient bloom ──────────────────── */
.pb-sec{position:relative;overflow:hidden;isolation:isolate}
.pb-sec::before{content:"";position:absolute;top:-32%;left:-8%;right:-8%;height:76%;z-index:0;
  pointer-events:none;filter:blur(34px);
  background:
    radial-gradient(36% 56% at 10% 26%,rgba(124,58,237,.22),transparent 70%),
    radial-gradient(30% 48% at 88% 6%,rgba(255,138,216,.10),transparent 72%)}
[data-theme="light"] .pb-sec::before{
  background:
    radial-gradient(36% 56% at 10% 26%,rgba(124,58,237,.11),transparent 70%),
    radial-gradient(30% 48% at 88% 6%,rgba(236,72,153,.07),transparent 72%)}

/* ── head ───────────────────────────────────────────── */
.pb-head{position:relative;z-index:1;max-width:740px;margin:0 auto 3rem;text-align:center}
.pb-head .badge{margin-bottom:1.1rem}
.pb-head h2{font-family:'Space Grotesk',system-ui,sans-serif;font-size:clamp(1.75rem,3.3vw,2.7rem);
  font-weight:700;letter-spacing:-.025em;line-height:1.1;color:var(--fg);margin-bottom:.85rem}
.pb-head p{color:var(--muted-fg);font-size:1rem;line-height:1.72;max-width:560px;margin:0 auto}
.pb-head--wl{text-align:left;margin:0 0 2.25rem;max-width:none}
.pb-head--wl p{max-width:62ch;margin:0}
@media(max-width:700px){.pb-head{margin-bottom:2.2rem}}

/* ── bento grid ─────────────────────────────────────── */
.pb-grid{position:relative;z-index:1;display:grid;grid-template-columns:repeat(4,1fr);
  grid-auto-rows:minmax(148px,auto);gap:.9rem}
.pb-hero{grid-column:span 2;grid-row:span 2}
.pb-w2{grid-column:span 2}
.pb-w1{grid-column:span 1}

/* ── tile ───────────────────────────────────────────── */
.pb-card{position:relative;display:flex;flex-direction:column;padding:1.3rem 1.25rem 1.1rem;
  border-radius:24px;overflow:hidden;isolation:isolate;
  background:linear-gradient(168deg,rgba(30,25,66,.90),rgba(13,11,34,.94));
  border:1px solid rgba(167,139,250,.17);
  -webkit-tap-highlight-color:transparent;
  transition:transform .5s cubic-bezier(.22,1,.36,1),border-color .4s,box-shadow .5s}

/* the bloom — blurred radial parked behind the panel */
.pb-card::before{content:"";position:absolute;top:-96px;right:-72px;width:232px;height:232px;
  border-radius:50%;z-index:-1;pointer-events:none;filter:blur(14px);opacity:.55;
  background:radial-gradient(circle at 50% 50%,rgba(167,139,250,.62),rgba(124,58,237,.22) 55%,transparent 72%);
  transition:opacity .5s,transform .8s cubic-bezier(.22,1,.36,1)}
/* top hairline that draws in from the left */
.pb-card::after{content:"";position:absolute;top:0;left:0;right:0;height:2px;pointer-events:none;
  border-radius:inherit;transform:scaleX(0);transform-origin:left;
  background:linear-gradient(90deg,var(--brand-pink,#A78BFA),var(--brand-purple,#7C3AED),#FF8AD8);
  transition:transform .6s cubic-bezier(.22,1,.36,1)}

[data-theme="light"] .pb-card{
  background:linear-gradient(168deg,#FFFFFF,rgba(247,245,253,.96));
  border-color:rgba(109,40,217,.16)}
[data-theme="light"] .pb-card::before{
  opacity:.4;
  background:radial-gradient(circle at 50% 50%,rgba(124,58,237,.30),rgba(124,58,237,.10) 55%,transparent 72%)}

/* hero tile — bigger voice, badge pinned top, copy pushed to the floor */
.pb-hero{padding:1.7rem 1.6rem 1.35rem;
  background:linear-gradient(158deg,rgba(124,58,237,.28),rgba(13,11,34,.95) 64%)}
.pb-hero::before{top:-120px;right:-90px;width:300px;height:300px;opacity:.7}
[data-theme="light"] .pb-hero{background:linear-gradient(158deg,rgba(124,58,237,.13),#FFFFFF 64%)}
.pb-hero .pb-top{margin-bottom:auto}

/* ── top row: badge left, index right ───────────────── */
.pb-top{display:flex;align-items:center;justify-content:space-between;gap:.6rem;margin-bottom:.95rem}
.pb-badge{display:inline-flex;align-items:center;gap:.42rem;white-space:nowrap;
  font:800 .62rem/1 ui-monospace,'JetBrains Mono',Consolas,monospace;letter-spacing:.14em;
  text-transform:uppercase;color:#D9D3FF;background:rgba(167,139,250,.15);
  border:1px solid rgba(167,139,250,.30);border-radius:999px;padding:.4rem .68rem}
.pb-badge s{width:5px;height:5px;border-radius:50%;background:#D4FF4F;text-decoration:none;flex:0 0 auto}
.pb-hero .pb-badge{color:#0B0A1F;background:#D4FF4F;border-color:#D4FF4F}
.pb-hero .pb-badge s{background:#0B0A1F}
.pb-idx{font:800 .62rem/1 ui-monospace,'JetBrains Mono',Consolas,monospace;letter-spacing:.14em;
  color:#5B5589;transition:color .3s}
[data-theme="light"] .pb-badge{color:#5B21B6;background:rgba(109,40,217,.08);border-color:rgba(109,40,217,.22)}
[data-theme="light"] .pb-badge s{background:#7C3AED}
[data-theme="light"] .pb-hero .pb-badge{color:#0B0A1F;background:#7C3AED;border-color:#7C3AED}
[data-theme="light"] .pb-hero .pb-badge s{background:#D4FF4F}
[data-theme="light"] .pb-idx{color:#9A93C9}

/* ── body ───────────────────────────────────────────── */
.pb-card h3{font-family:'Space Grotesk',system-ui,sans-serif;
  font-size:1.05rem;font-weight:700;line-height:1.32;letter-spacing:-.015em;
  color:var(--fg);margin-bottom:.42rem;transition:color .3s}
.pb-hero h3{font-size:clamp(1.45rem,2.5vw,2.05rem);line-height:1.14;letter-spacing:-.03em;
  margin-bottom:.6rem;max-width:22ch}
.pb-card p{color:var(--muted-fg);font-size:.85rem;line-height:1.6;margin-bottom:.95rem}
.pb-hero p{font-size:.95rem;line-height:1.65;max-width:46ch}

/* ── CTA row ────────────────────────────────────────── */
.pb-go{display:inline-flex;align-items:center;gap:.5rem;margin-top:auto;
  font-family:'Plus Jakarta Sans',system-ui,sans-serif;font-size:.79rem;font-weight:800;
  letter-spacing:.01em;color:var(--primary)}
.pb-go svg{width:.85rem;height:.85rem;flex:0 0 auto;
  transition:transform .4s cubic-bezier(.22,1,.36,1)}
[data-theme="light"] .pb-go{color:#6D28D9}

/* ── footer link ────────────────────────────────────── */
.pb-foot{position:relative;z-index:1;display:flex;justify-content:center;margin-top:2.4rem}

/* ── HOVER: pointer devices only ────────────────────────
   On touch, :hover sticks after touchend on iOS, leaving the card
   lifted with a lit border until something else is tapped.
   Keyboard users still get the same affordance via :focus-visible. */
@media (hover:hover) and (pointer:fine){
  .pb-card:hover{transform:translateY(-6px);border-color:rgba(167,139,250,.55);
    box-shadow:0 34px 70px -40px rgba(124,58,237,.85)}
  .pb-card:hover::before{opacity:1;transform:scale(1.16)}
  .pb-card:hover::after{transform:scaleX(1)}
  .pb-card:hover h3{color:var(--primary)}
  .pb-card:hover .pb-idx{color:var(--primary)}
  .pb-card:hover .pb-go svg{transform:translateX(5px)}
  [data-theme="light"] .pb-card:hover{border-color:rgba(109,40,217,.42);
    box-shadow:0 28px 60px -38px rgba(109,40,217,.5)}
  [data-theme="light"] .pb-card:hover h3{color:#6D28D9}
}
/* keyboard parity for every state the hover block carries */
.pb-card:focus-visible{transform:translateY(-6px);border-color:rgba(167,139,250,.55);
  box-shadow:0 34px 70px -40px rgba(124,58,237,.85);outline:2px solid var(--primary);outline-offset:3px}
.pb-card:focus-visible::before{opacity:1;transform:scale(1.16)}
.pb-card:focus-visible::after{transform:scaleX(1)}
.pb-card:focus-visible h3{color:var(--primary)}
.pb-card:focus-visible .pb-go svg{transform:translateX(5px)}

/* ── responsive ─────────────────────────────────────── */
/* 4-across only from 1120px up. At the old 1000px cutover a 4-col card was
   227px wide with a 195px text column — narrower than the 247px you get at
   621px in 2-col mode, so the mid-range tablets/laptops were the worst case. */
@media(max-width:1120px){
  .pb-grid{grid-template-columns:repeat(2,1fr)}
  .pb-hero{grid-column:span 2;grid-row:span 1;
    padding:1.55rem 1.4rem 1.25rem}
  .pb-hero .pb-top{margin-bottom:.95rem}   /* no spare height to push against */
  .pb-hero h3{font-size:clamp(1.32rem,4vw,1.75rem);max-width:none}
  .pb-w2{grid-column:span 2}
  .pb-w1{grid-column:span 1}
}
@media(max-width:620px){
  /* perf: one unblurred gradient layer instead of seven blurred ones */
  .pb-sec::before{filter:none;opacity:.62}
  .pb-card::before{width:172px;height:172px;top:-72px;right:-56px;filter:blur(10px)}
  .pb-hero::before{width:214px;height:214px;top:-92px;right:-70px}

  .pb-grid{grid-template-columns:1fr;grid-auto-rows:auto;gap:.75rem}
  .pb-hero,.pb-w2,.pb-w1{grid-column:span 1;grid-row:auto}

  .pb-card{padding:1.15rem 1.1rem 1rem;border-radius:20px}
  .pb-hero{padding:1.3rem 1.15rem 1.1rem}   /* explicit — do not rely on source order */

  /* readable labels — these were 9.4 / 9.6 / 12.2px */
  .pb-badge{font-size:.685rem;letter-spacing:.12em;padding:.42rem .66rem}
  .pb-idx{font-size:.685rem}
  .pb-go{font-size:.835rem}
  .pb-card h3{font-size:1.1rem;line-height:1.3;margin-bottom:.4rem}
  .pb-hero h3{font-size:1.32rem;line-height:1.22;margin-bottom:.5rem}
  .pb-card p{font-size:.875rem;line-height:1.58;margin-bottom:.85rem}
  .pb-hero p{font-size:.9rem;line-height:1.6}
  .pb-foot{margin-top:1.9rem}
}

/* ── motion ─────────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  .pb-card,.pb-card::before,.pb-card::after,.pb-card h3,.pb-go,.pb-go svg,.pb-idx{transition:none}
  .pb-card:hover,.pb-card:focus-visible{transform:none}
  .pb-card:hover::before,.pb-card:focus-visible::before{transform:none}
  .pb-card:hover .pb-go svg,.pb-card:focus-visible .pb-go svg{transform:none}
}