/* ============================================================================
   /experts/ — the live Experts+ booking system.

   Band rhythm: dark hero → LIGHT booking → dark reassurance → LIGHT what-this-is.

   MATERIAL RULE (PREMIUM_DOCTRINE §2), enforced by _tools/qa/exp_material_qa.py:
     · dark bands  → real glass: backdrop-filter blur+saturate, bright top rim, deep shadow.
     · .cz-light   → NO backdrop-filter anywhere. It blurs nothing on a near-white field and
                     costs a paint. Depth is layered elevation: tinted gradient field, bright
                     top rim, brand hairline, BRAND-TINTED shadow, and a blurred aura.
     The aura is always a SIBLING of the card inside a position:relative;isolation:isolate
     stage — never a z-index:-1 child of the card, which paints above the card's own
     background and reads as a purple smear rather than a shadow.
   ========================================================================== */

html{overflow-x:clip}   /* clip, not hidden — hidden creates a scroll container and kills sticky */

/* ── per-section LIGHT band · re-declares the foundation light tokens in scope ───
   Mirrors :root[data-theme="light"]; lets a single section render light inside the
   dark-default page, so every --w-* component inside flips. Kept byte-consistent with
   the sibling page sheets (experts.css) on purpose — if this drifts, the two pages
   render different whites. */
.cz-light{
  background:var(--w-bg);color:var(--w-text);
  --w-bg:#f5f5f5; --w-bg-deep:#ebebeb; --w-bg-elev:#fafafa;
  --w-card:#ffffff; --w-card-lo:#efefef; --w-card-hi:#ffffff;
  --w-text:var(--w-charcoal); --w-text-2:rgba(28,26,36,0.66); --w-text-3:rgba(28,26,36,0.62);
  --w-text-prose:#302d2e; --w-text-on-brand:#ffffff; --w-icon-ink:var(--w-charcoal);
  --w-line-soft:rgba(28,26,36,0.06); --w-line:rgba(28,26,36,0.10); --w-line-strong:rgba(28,26,36,0.16); --w-edge-top:rgba(255,255,255,0.9);
  --w-brand:var(--w-purple-ink); --w-brand-2:var(--w-purple); --w-brand-soft:rgba(152,135,244,0.10); --w-brand-line:rgba(152,135,244,0.28);
  --w-shadow-raise:0 8px 18px -8px rgba(28,26,36,0.07), inset 0 1px 0 rgba(255,255,255,0.9);
  --w-shadow-raise-soft:0 4px 10px -6px rgba(28,26,36,0.05), inset 0 1px 0 rgba(255,255,255,0.85);
  --w-shadow-recess:inset 0 1px 3px rgba(28,26,36,0.05), inset 0 -1px 0 rgba(255,255,255,0.8);
  --w-shadow-recess-deep:inset 0 2px 5px rgba(28,26,36,0.07), inset 0 -1px 0 rgba(255,255,255,0.7);
  --w-shadow-sm:0 1px 2px rgba(28,26,36,0.04); --w-shadow-md:0 4px 12px rgba(28,26,36,0.05); --w-shadow-lg:0 12px 28px rgba(28,26,36,0.07);
  --w-glow-brand:0 2px 8px rgba(28,26,36,0.05); --w-glow-brand-strong:0 6px 16px rgba(28,26,36,0.07);
  --w-glass-fill:rgba(255,255,255,0.66); --w-glass-fill-strong:rgba(255,255,255,0.86); --w-glass-tint:rgba(28,26,36,0.90);
  --w-glass-fill-soft:rgba(28,26,36,0.03); --w-glass-line:rgba(28,26,36,0.10); --w-glass-line-bright:rgba(28,26,36,0.16);
  --w-glass-rim-top:rgba(255,255,255,0.95); --w-glass-rim-bottom:rgba(28,26,36,0.05);
  --w-glass-shadow:0 10px 24px rgba(28,26,36,0.06); --w-glass-shadow-soft:0 4px 12px rgba(28,26,36,0.05);
  --w-cta-fill:var(--w-glass-tint); --w-cta-text:#ffffff; --w-cta-glow:var(--w-shadow-md); --w-cta-glow-strong:var(--w-shadow-lg);
  --w-card-brand-wash:linear-gradient(160deg, rgba(28,26,36,0.06), rgba(28,26,36,0.015)); --w-card-brand-line:var(--w-line-strong);
  --w-tag-brand-bg:rgba(28,26,36,0.06); --w-tag-brand-fg:var(--w-text); --w-focus:rgba(28,26,36,0.55);
  --w-grad-surface:linear-gradient(180deg, #ffffff 0%, #f5f5f5 100%);
  --w-grad-surface-hi:linear-gradient(180deg, #ffffff 0%, #fafafa 100%);
  --w-grad-recess:linear-gradient(180deg, #ededed 0%, #e3e3e3 100%);

  /* ⚠ These two MUST be declared, and must be `none`.
     The sibling sheets set them to a real blur; OMITTING them does not disable glass, it
     makes every DS7 component inside the band inherit the ROOT (dark) value and quietly
     apply an 18px backdrop blur over a near-white field — .w-btn--primary and
     .w-btn--glass in §4 did exactly that until exp_page_qa.py caught it. Fixing it at the
     TOKEN rather than per component avoids a specificity fight with ds7.css, which the
     page sheet would win only on load-order tie-break. */
  --w-glass-blur:none;
  --w-glass-blur-lg:none;
}

.xlb-stack{position:relative}

/* shared eyebrow — mono, uppercase, tracked (doctrine §2 typography) */
.xlb-eyebrow{
  display:block;font-family:var(--w-font-mono,ui-monospace,monospace);
  font-size:11px;line-height:1;letter-spacing:.14em;text-transform:uppercase;
  color:var(--w-brand);margin-bottom:var(--w-s-4)}
/* On a light band --w-brand is --w-purple-ink #6f5fe0, which measures 4.78:1 on pure white
   but only 4.07:1 against #efeaff — the DARKEST stop of the card gradient this eyebrow
   actually sits on — and fails the 4.5:1 bar for 11px text. #5b4bd4 is 5.26:1 there.
   Measured, not assumed: reading the ratio against the gradient's lightest stop is how a
   contrast check passes on text that renders below AA. */
.cz-light .xlb-eyebrow{color:#5b4bd4}

/* The Experts+ lockup. The "+" glyph itself is `.w-icon.ep-plus`, which ds7.css already
   sizes and nudges — do NOT reinvent it here (an earlier local `.xlb-plus` rendered the
   mark with visibly wrong spacing next to the wordmark).
   The nowrap wrapper is the standing ep-plus gotcha: the inline <svg> creates a line-break
   opportunity, so "Experts+, running on our own site." broke immediately after the glyph
   and left a comma orphaned at the start of the next line. Caught in a screenshot; no
   automated check on this page could see it. Wrap the wordmark, the glyph AND any
   punctuation glued to it. */
.xlb-wm{white-space:nowrap}

/* ══ §1 HERO — dark band ═══════════════════════════════════════════════════ */
/* Tighter than the DS7 default `--w-section-y-hero` (clamp(96px,6rem+5vw,160px)), which
   left a visibly dead band between the nav and the badge — this hero is a short run-up to
   the widget, not a full marketing hero, so it should not reserve a full hero's air.
   Measured, because the first attempt at this was justified by a wrong assumption: the DS7
   nav is `position:sticky` and 68px tall, so it OCCUPIES FLOW — `main` starts at y=68 with
   no padding of its own. The hero therefore cannot tuck underneath it at any width, and
   every pixel of this padding is visible whitespace, one-for-one. The floor is simply the
   least breathing room the badge should ever have, not nav clearance (never pad a page for
   the nav — see the DS7 hero/badge note).
   Visible gap below the nav: 160px before → ~77px at 1440, ~56px at 375. */
.xlb-hero.w-section--hero{padding-block:clamp(56px, 3rem + 2vw, 84px) var(--w-section-y)}
.xlb-hero{position:relative;overflow:hidden;isolation:isolate}
.xlb-hero::before{                       /* ambient ground so the glass has something to blur */
  content:"";position:absolute;inset:-10% -20% auto;height:120%;
  background:
    radial-gradient(48% 46% at 22% 8%, rgba(152,135,244,.28), transparent 68%),
    radial-gradient(42% 40% at 82% 26%, rgba(193,140,255,.20), transparent 70%);
  filter:blur(8px);pointer-events:none;z-index:0;
  animation:xlb-drift 14s var(--w-ease-in-out,ease-in-out) infinite}
.xlb-hero__inner{position:relative;z-index:1;max-width:900px}

.xlb-hero__h{margin:var(--w-s-5) 0 0;max-width:16ch}
.xlb-hero__lead{margin:var(--w-s-5) 0 0;max-width:60ch}

/* stat pair — D79: numeral → claim → hairline → translation. Never restates its number. */
.xlb-hero__stats{
  list-style:none;margin:var(--w-s-8) 0 0;padding:0;
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--w-s-5)}
.xlb-stat{
  position:relative;padding:var(--w-s-5) var(--w-s-5) var(--w-s-5) var(--w-s-6);
  border-radius:var(--w-r-lg,20px);
  background:var(--w-glass-fill);
  -webkit-backdrop-filter:blur(18px) saturate(140%);
  backdrop-filter:blur(18px) saturate(140%);   /* honest: dark band, busy ground behind */
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28), 0 18px 40px -22px rgba(0,0,0,.55);
  border:1px solid var(--w-glass-line)}
.xlb-stat::before{                        /* brand rule marking the numeral's column */
  content:"";position:absolute;left:0;top:var(--w-s-5);bottom:var(--w-s-5);width:2px;
  border-radius:var(--w-r-pill);background:var(--w-grad-brand)}
.xlb-stat__v{
  display:block;font-size:clamp(38px,4.4vw,56px);font-weight:var(--w-fw-black,800);
  line-height:1;letter-spacing:var(--w-ls-tight,-.02em);
  font-variant-numeric:tabular-nums lining-nums;
  background:var(--w-grad-brand);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent}
.xlb-stat__k{
  display:block;margin-top:var(--w-s-3);padding-bottom:var(--w-s-3);
  font-size:var(--w-fs-sm,14px);font-weight:600;line-height:1.4;color:var(--w-text);
  border-bottom:1px solid var(--w-line)}
.xlb-stat__b{display:block;margin-top:var(--w-s-3);font-size:13px;line-height:1.5;color:var(--w-text-3)}

.xlb-hero__src{margin:var(--w-s-4) 0 0;font-size:12px;color:var(--w-text-3);letter-spacing:.01em}

.xlb-hero__cue{
  display:inline-flex;align-items:center;gap:var(--w-s-3);
  margin-top:var(--w-s-7);min-height:44px;padding:0 var(--w-s-4) 0 0;   /* ≥44px touch target */
  font-size:var(--w-fs-sm,14px);font-weight:600;color:var(--w-text-2);text-decoration:none;
  transition:color var(--w-dur) var(--w-ease)}
.xlb-hero__cue:hover,.xlb-hero__cue:focus-visible{color:var(--w-text)}
.xlb-hero__cue:focus-visible{outline:none;box-shadow:0 0 0 3px var(--w-focus);border-radius:var(--w-r-md,12px)}
.xlb-hero__cue .w-icon{transition:transform var(--w-dur) var(--w-ease);animation:xlb-bob 2.4s var(--w-ease-in-out,ease-in-out) infinite}
.xlb-hero__cue:hover .w-icon,.xlb-hero__cue:focus-visible .w-icon{transform:translateY(3px)}

/* ══ §2 BOOKING — .cz-light. Layered elevation, no glass. ══════════════════ */
/* overflow-x:clip keeps the stage aura's 2% horizontal bleed from widening the document.
   `clip` not `hidden`: `hidden` creates a scroll container and would break the sticky nav. */
.xlb-book{position:relative;overflow-x:clip}
/* Standard 1200px measure, matching .w-container. A near-full-width variant was tried so
   the vendor grid might fit two expert cards per row; at 1760px the band read far too wide
   for the page and was reeled back in (Jeff, 2026-08-12). The widget is a 900px centred
   object inside it — deliberately narrower than the band. */
.xlb-book__wide{width:100%;max-width:var(--w-container);margin-inline:auto;
  padding-inline:var(--w-container-pad)}
.xlb-book__head{max-width:64ch;margin:0 auto var(--w-s-8);text-align:center}
.xlb-book__h{font-size:clamp(28px,3.4vw,44px);font-weight:var(--w-fw-black,800);
  line-height:1.1;letter-spacing:var(--w-ls-tight,-.02em);margin:0}
.xlb-book__lead{margin:var(--w-s-4) auto 0;max-width:60ch;
  font-size:var(--w-fs-lead,18px);color:var(--w-text-2);line-height:1.6}

/* stage = the isolation context. aura and frame are SIBLINGS; no negative z-index.
   900px is the widget's visible box at ordinary widths; the vendor grid sizes its cards
   against the ~836px inside the frame padding, LESS the widget's own 320px Filters
   sidebar. That leaves ~500px for cards, which is why 900px can only ever be 1-up. */
.xlb-stage{position:relative;isolation:isolate;max-width:900px;margin-inline:auto}

/* Large screens: let the widget have the room the cards need, in two steps. Anything the
   stage does not use here comes straight out of the card width, and the cards are already
   at the edge of truncating. Card widths these produce, after the 320px sidebar:
     ≥1200 → band 1200, stage 1104, cards ~349px  (fits the 337px longest name)
     ≥1440 → band 1320, stage 1224, cards ~409px  (comfortable) */
@media (min-width:1200px){
  .xlb-stage{max-width:none}      /* fill the band; the band is now the only constraint */
}
@media (min-width:1440px){
  .xlb-book__wide{max-width:var(--w-container-wide)}   /* 1320px */
}
.xlb-stage__aura{
  position:absolute;inset:6% -2% -4%;z-index:0;pointer-events:none;
  border-radius:48px;
  background:
    radial-gradient(58% 52% at 26% 22%, rgba(111,95,224,.34), transparent 70%),
    radial-gradient(52% 48% at 78% 74%, rgba(152,135,244,.26), transparent 72%);
  filter:blur(46px);
  animation:xlb-aura 13s var(--w-ease-in-out,ease-in-out) infinite}

.xlb-frame{
  position:relative;z-index:1;
  padding:clamp(16px,2.4vw,32px);
  border-radius:var(--w-r-2xl,36px);
  /* 1 tinted gradient field (not flat white) */
  background:linear-gradient(158deg,#ffffff 0%,#f7f5ff 52%,#efeaff 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),           /* 2 bright top rim              */
    inset 0 0 0 1px rgba(111,95,224,.20),          /* 3 brand hairline, low alpha   */
    0 18px 40px -18px rgba(111,95,224,.45),        /* 4 BRAND-TINTED shadow         */
    0 2px 6px -2px rgba(28,26,36,.06)}

/* ── the vendor widget ────────────────────────────────────────────────────
   Third-party markup we do not control. Everything here is scoped to our own
   wrapper and sets the widget's OWN custom-property API rather than reaching into
   its class names, so a bundle update cannot silently unstyle the page.
   The one exception is the container id, which is the vendor's mount contract. */
.xlb-widget{
  min-height:420px;                 /* the band can never collapse if the bundle fails */
  border-radius:var(--w-r-xl,28px);overflow:hidden;
  /* widget's documented brand API — AA-safe on its near-white cards.
     #6f5fe0 is --w-purple-ink (4.78:1 on white); --w-purple #9887f4 would fail. */
  --se-accent:#6f5fe0;
  --se-accent-dark:#5b4bd4;
  --se-accent-light:#c7bdf6;
  --se-accent-bg:rgba(111,95,224,.10);
  --se-accent-bg-hover:rgba(111,95,224,.18);
  --se-card-bg:#ffffff;
  --se-card-hover:#f7f5ff;
  --se-border:rgba(28,26,36,.10);
  --se-text-primary:#1c1a24;
  --se-text-secondary:rgba(28,26,36,.66);
  --se-card-border-radius:20px;
  --se-container-padding:0px;
  /* the vendor bundle self-caps at 1400px by default; our 900px stage is well inside that,
     so 100% simply hands it the box we chose rather than a second, competing cap. */
  --se-container-max-width:100%;
  --se-font-family:var(--w-font-sans,'Plus Jakarta Sans',system-ui,sans-serif)}
.xlb-widget #experts-directory-container{min-height:inherit}

/* ── expert-card grid ─────────────────────────────────────────────────────
   VERIFIED against the live bundle 2026-08-12: the S3 stylesheet contains **zero**
   `grid-template-columns` rules. The multi-column layout was never the widget's — it lived
   entirely in experts-widget-override.css, which is why removing that sheet took the cards
   from 3-up straight to 1-up. Its native fallback is `flex flex-wrap`, and an un-normalised
   card claims a full row.
   So the grid is lifted here — ~20 lines instead of that file's 4,675 — WITHOUT the
   unscoped body{} rule that turned the page white and broke sticky.
   Two deliberate departures from the original:
     · every selector is scoped under `.xlb-widget`, so nothing can escape the container;
     · the breakpoint is CONTAINER-appropriate, not viewport-based. The original switched
       columns on `@media screen and (max-width:1200px)` — a viewport test, which is simply
       wrong for a fixed 900px stage: on a 1920 monitor it asked a 836px box to hold three
       cards. Our stage is a known width, so desktop is flatly 2-up.
   Arithmetic at the 900px stage: 900 − 2×32 frame padding = 836 inner; less one 22px gap,
   two columns of 407px against a card whose own height the sheet below fixes at 406px. */
.xlb-widget .flex.flex-wrap.justify-center.gap-3,
.xlb-widget .widget-root .flex.flex-wrap.justify-center.gap-3,
.xlb-widget div.flex.flex-wrap.p-0\.5.md\:p-6.justify-center.w-full.gap-3{
  display:grid !important;
  grid-template-columns:1fr !important;          /* 1-up is the SAFE default; 2-up is opt-in */
  gap:var(--se-card-gap,22px) !important;
  align-items:stretch !important;   /* equal-height cards per row, without a magic number */
  width:100% !important;margin:0 auto !important;
  padding:8px 0 0 !important;box-sizing:border-box !important}

/* 2-up only from 1200px, and the number is derived, not chosen.
   MEASURED on the live widget: the expert-name node is `.truncate` (nowrap + ellipsis) and
   was being handed 24px while needing up to 126px for "Kris Rudeegraap" — 102px short — so
   every name rendered as "K…". A card therefore needs ≈340px of its own width, which is
   also what the widget's own `sm:min-w-[22rem]` (352px) asks for.
   Working back through the layout, where S=320px Filters sidebar, g=22px gap and the frame
   adds 2×32px padding:  band content = S + 2·card + g + 64.
   At 2×349px cards that is 1104px of content, i.e. a 1200px band — so 1200 is the width
   below which a second column cannot be shown without truncating names again. Below it one
   full-width card is strictly better than two cramped ones. */
@media (min-width:1200px){
  .xlb-widget .flex.flex-wrap.justify-center.gap-3,
  .xlb-widget .widget-root .flex.flex-wrap.justify-center.gap-3,
  .xlb-widget div.flex.flex-wrap.p-0\.5.md\:p-6.justify-center.w-full.gap-3{
    grid-template-columns:repeat(2, minmax(0,1fr)) !important}
}

/* The card must be told to fill its grid cell. Left native it keeps a `sm:min-w-[22rem]`
   flex basis wide enough to force one per row, which is the 1-up we are fixing.
   ⚠ NO FIXED HEIGHT. The override sheet hard-set `height:406px !important`, and lifting
   that verbatim was a mistake: measured on the live page the card's content ends at 247px,
   so every card carried **159px of dead space** — the whitespace gap Jeff spotted. That
   406px was a magic number chosen to align cards in a row, and a grid does that for free:
   `align-items:stretch` is the default, so every card in a row already matches the tallest
   in that row, at whatever height the content actually needs. Measured after the fix:
   406px → 264px tall, 159px dead → 17px. */
.xlb-widget article.flex.flex-col.grow.shrink{
  flex-grow:0 !important;flex-shrink:0 !important;
  min-width:unset !important;max-width:unset !important;width:100% !important;
  height:auto !important;min-height:0 !important}

@media (max-width:768px){
  .xlb-widget .flex.flex-wrap.justify-center.gap-3,
  .xlb-widget .widget-root .flex.flex-wrap.justify-center.gap-3,
  .xlb-widget div.flex.flex-wrap.p-0\.5.md\:p-6.justify-center.w-full.gap-3{
    gap:16px !important}
}
.xlb-widget.is-idle{min-height:0}      /* state panel owns the height until the widget mounts */

/* loading / fallback panel */
.xlb-widget__state{
  min-height:420px;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:var(--w-s-3);text-align:center;padding:var(--w-s-7) var(--w-s-5)}
.xlb-widget__state[hidden]{display:none}
.xlb-spinner{
  width:34px;height:34px;border-radius:var(--w-r-full);   /* 50% is correct on a circle */
  border:2px solid rgba(111,95,224,.18);border-top-color:#6f5fe0;
  animation:xlb-spin 900ms linear infinite}
.xlb-widget__msg{margin:var(--w-s-4) 0 0;font-size:var(--w-fs-body,16px);font-weight:600;color:var(--w-text)}
.xlb-widget__sub{margin:0;font-size:13px;color:var(--w-text-3);max-width:44ch}
.xlb-widget__state.is-error .xlb-spinner{display:none}
.xlb-widget__fallback{
  display:inline-flex;align-items:center;gap:var(--w-s-2);margin-top:var(--w-s-4);
  min-height:44px;padding:0 var(--w-s-5);border-radius:var(--w-r-pill);
  background:#1c1a24;color:#fff;font-size:14px;font-weight:600;text-decoration:none;
  transition:transform var(--w-dur) var(--w-ease),box-shadow var(--w-dur) var(--w-ease)}
.xlb-widget__fallback:hover,.xlb-widget__fallback:focus-visible{
  transform:translateY(-2px);box-shadow:0 12px 24px -12px rgba(111,95,224,.6)}
.xlb-widget__fallback:focus-visible{outline:none;box-shadow:0 0 0 3px var(--w-focus)}

/* ══ §3 WHAT TO EXPECT — dark band, real glass ════════════════════════════ */
.xlb-expect{position:relative}
.xlb-expect__head{max-width:60ch;margin:0 0 var(--w-s-8)}
.xlb-expect__h{font-size:clamp(28px,3.4vw,44px);font-weight:var(--w-fw-black,800);
  line-height:1.1;letter-spacing:var(--w-ls-tight,-.02em);margin:0}

.xlb-cards{list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--w-s-5)}
.xlb-card{
  padding:var(--w-s-6);border-radius:var(--w-r-xl,28px);
  background:var(--w-glass-fill);
  -webkit-backdrop-filter:blur(18px) saturate(140%);
  backdrop-filter:blur(18px) saturate(140%);
  border:1px solid var(--w-glass-line);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28), 0 22px 44px -26px rgba(0,0,0,.6);
  transition:transform var(--w-dur-slow) var(--w-ease),box-shadow var(--w-dur-slow) var(--w-ease)}
.xlb-card:hover{transform:translateY(-3px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.34), 0 28px 52px -26px rgba(111,95,224,.55)}
.xlb-card__i{
  display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;
  border-radius:var(--w-r-md,14px);margin-bottom:var(--w-s-5);
  background:var(--w-brand-soft);border:1px solid var(--w-brand-line);color:var(--w-brand-2)}
.xlb-card__i svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}
.xlb-card__h{margin:0;font-size:var(--w-fs-lg,19px);font-weight:700;line-height:1.25;color:var(--w-text)}
.xlb-card__p{margin:var(--w-s-3) 0 0;font-size:var(--w-fs-sm,15px);line-height:1.6;color:var(--w-text-2)}

/* ══ §4 WHAT THIS IS — .cz-light, layered elevation ═══════════════════════ */
.xlb-meta{position:relative}
.xlb-meta__stage{position:relative;isolation:isolate}
.xlb-meta__aura{
  position:absolute;inset:10% 4% -6%;z-index:0;pointer-events:none;border-radius:48px;
  background:radial-gradient(60% 60% at 50% 40%, rgba(111,95,224,.30), transparent 72%);
  filter:blur(50px);
  animation:xlb-aura 15s var(--w-ease-in-out,ease-in-out) infinite}
.xlb-meta__card{
  position:relative;z-index:1;max-width:820px;margin-inline:auto;text-align:center;
  padding:clamp(32px,4.4vw,64px) clamp(24px,4vw,56px);
  border-radius:var(--w-r-2xl,36px);
  background:linear-gradient(158deg,#ffffff 0%,#f7f5ff 52%,#efeaff 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    inset 0 0 0 1px rgba(111,95,224,.20),
    0 18px 40px -18px rgba(111,95,224,.45),
    0 2px 6px -2px rgba(28,26,36,.06)}
.xlb-meta__card .xlb-eyebrow{text-align:center}
.xlb-meta__h{margin:0;font-size:clamp(26px,3.2vw,40px);font-weight:var(--w-fw-black,800);
  line-height:1.14;letter-spacing:var(--w-ls-tight,-.02em)}
.xlb-meta__p{margin:var(--w-s-5) auto 0;max-width:62ch;font-size:var(--w-fs-body,16px);
  line-height:1.65;color:var(--w-text-2)}
.xlb-meta__cta{display:flex;flex-wrap:wrap;gap:var(--w-s-4);justify-content:center;margin-top:var(--w-s-7)}
.xlb-meta__cta .w-btn{min-height:44px}

/* ══ motion ═══════════════════════════════════════════════════════════════
   Compositor properties only — transform / opacity / filter. Ambient loops 13–15s. */
@keyframes xlb-drift{
  0%,100%{transform:translate3d(0,0,0) scale(1);opacity:.9}
  50%    {transform:translate3d(0,-2.5%,0) scale(1.05);opacity:1}}
@keyframes xlb-aura{
  0%,100%{transform:translate3d(0,0,0) scale(1);opacity:.85}
  50%    {transform:translate3d(0,-2%,0) scale(1.06);opacity:1}}
@keyframes xlb-spin{to{transform:rotate(360deg)}}
@keyframes xlb-bob{
  0%,100%{transform:translateY(0)}
  50%    {transform:translateY(3px)}}

/* ══ responsive ═══════════════════════════════════════════════════════════
   Arithmetic: --w-container is 1200px + 2×clamp(20px,4vw,48px) pad = 1296px at the
   widest. Three cards at 1024 → (1024 − 2×41) − 2×24 gap = 894 / 3 = 298px each,
   which still fits a 3-word H3 and an 18-word paragraph. Below 900 the widget's own
   card grid drops to one column, so the frame padding tightens with it. */
@media (max-width:900px){
  .xlb-cards{grid-template-columns:1fr;gap:var(--w-s-4)}
  .xlb-hero__stats{grid-template-columns:1fr;gap:var(--w-s-4)}
  .xlb-hero__h{max-width:none}
}
@media (max-width:600px){
  .xlb-frame{padding:12px;border-radius:var(--w-r-xl,28px)}
  .xlb-widget,.xlb-widget__state{min-height:360px}
  .xlb-stage__aura{inset:8% 0 -2%;filter:blur(34px)}
  .xlb-meta__aura{filter:blur(36px)}
  .xlb-meta__cta .w-btn{width:100%;justify-content:center}
}
@media (max-width:380px){
  .xlb-frame{padding:8px}
  .xlb-stat{padding-left:var(--w-s-5)}
  .xlb-widget,.xlb-widget__state{min-height:320px}
}

/* ══ reduced motion — mandatory on every animation and transition above ═══ */
@media (prefers-reduced-motion:reduce){
  .xlb-hero::before,
  .xlb-stage__aura,
  .xlb-meta__aura,
  .xlb-hero__cue .w-icon,
  .xlb-spinner{animation:none !important}
  /* fail open: anything that animates must be left in its FINAL state, never mid-fade */
  .xlb-hero::before,.xlb-stage__aura,.xlb-meta__aura{opacity:1;transform:none}
  .xlb-spinner{border-top-color:#6f5fe0;opacity:.55}
  .xlb-card,.xlb-hero__cue,.xlb-hero__cue .w-icon,.xlb-widget__fallback{
    transition:none !important}
  .xlb-card:hover{transform:none}
}