/* ============================================================================
   experience_modal.css — full-page (less topnav) 3-step Experience modal.

   Opened by the three .exp-c cards (data-exp-step → step). Walks Current State
   → Future State → See it Live, each interactive, forward CTAs pull through.
   Sits below the 60px fixed top header. CSP-safe: all styling here, behaviour
   in experience_modal.js (external), illustrations are inline SVG. No em dashes
   in copy (section rule). Matches index_v6 tokens.
   ========================================================================== */

/* The topnav's hover dropdowns lay out their panel even when closed (it's just
   made invisible). In some engines that invisible panel box stays hoverable, so
   moving the mouse near where the menu *would* appear pops it open. Make the
   CLOSED panel non-interactive; only allow interaction when it's actually open.
   Scoped to the homepage (this sheet only loads here). */
.header-nav .options-content { pointer-events: none; }
.header-nav .options:hover .options-content,
.header-nav .options.hovered .options-content { pointer-events: auto; }

.expm[hidden] { display: none !important; }
.expm {
    position: fixed; inset: 60px 0 0 0; z-index: 1200;
    display: flex; flex-direction: column;
    font-family: var(--font-main, 'Satoshi', sans-serif);
}

/* Enter/exit motion — the house pattern (shared/theme/animations.css
   fadeIn + modalEnter, the one --ease-reveal curve): backdrop fades, content
   rises and settles a touch of scale. JS removes [hidden] first, flips
   .is-open next frame to run the transition, and holds display through exit. */
.expm-backdrop {
    position: absolute; inset: 0;
    /* Soft indigo/purple/blurple aurora over the base — same recipe as the pricing
       page, positioned to bloom behind the carousel. Kept below the sticky rail's
       strong zone so the opaque header still reads seamless. Theme-aware tokens. */
    background:
        radial-gradient(ellipse 62% 52% at 50% 30%, color-mix(in srgb, var(--indigo) 16%, transparent) 0%, transparent 62%),
        radial-gradient(ellipse 44% 46% at 15% 22%, color-mix(in srgb, var(--purple) 13%, transparent) 0%, transparent 66%),
        radial-gradient(ellipse 48% 48% at 85% 26%, color-mix(in srgb, var(--blurple) 14%, transparent) 0%, transparent 70%),
        var(--main-bg-color);
    opacity: 0;
    transition: opacity .2s var(--ease-reveal);
}
.expm.is-open .expm-backdrop { opacity: 1; }
.expm-shell::-webkit-scrollbar { width: 12px; }
.expm-shell::-webkit-scrollbar-track { background: transparent; }
.expm-shell::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--inv-bg-color) 20%, transparent); border-radius: 999px; border: 3px solid transparent; background-clip: padding-box; }
.expm-shell::-webkit-scrollbar-thumb:hover { background: color-mix(in srgb, var(--inv-bg-color) 34%, transparent); background-clip: padding-box; }

.expm-shell {
    position: relative; flex: 1; display: flex; flex-direction: column;
    width: min(1120px, 94vw); margin: 0 auto; overflow-y: auto;   /* the ONE scrollbar */
    scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--inv-bg-color) 22%, transparent) transparent;
    padding: 0 clamp(1.25rem, 4vw, 3rem) 2.6rem;
    opacity: 0; transform: translateY(20px) scale(.97);
    transition: opacity .3s var(--ease-reveal) .05s, transform .3s var(--ease-reveal) .05s;
    will-change: opacity, transform;
}
.expm.is-open .expm-shell { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
    .expm-backdrop, .expm-shell { transition: none; opacity: 1; transform: none; }
}

.expm-close {
    z-index: 3; flex: none;
    width: 36px; height: 36px; display: grid; place-items: center; border-radius: 9px;
    background: none;
    border: 1px solid color-mix(in srgb, var(--inv-bg-color) 12%, transparent);
    color: color-mix(in srgb, var(--inv-bg-color) 65%, transparent); cursor: pointer;
    transition: background .2s var(--surface-ease), color .2s var(--surface-ease), border-color .2s var(--surface-ease);
}

/* Right-side rail group: a step-specific CTA + close, pinned right.
   Step 1 → primary "See it in your world" (forward to gallery).
   Step 2 → secondary "Building blocks" (ghost, back to stages). */
.expm-railright { margin-left: auto; flex: none; display: flex; align-items: center; gap: .65rem; }
.expm-railright .expm-railcta { display: none; }
.expm[data-step="1"] .expm-railright .expm-railcta[data-railcta="1"] { display: inline-flex; }
.expm[data-step="2"] .expm-railright .expm-railcta[data-railcta="2"] { display: inline-flex; }
/* Rail CTAs are compact toolbar buttons (not the big page CTA) so they sit in
   scale with the tabs and the close. Double class beats the base .expm-cta. */
.expm-cta.expm-railcta {
    box-sizing: border-box; height: 36px; padding: 0 .95rem;   /* same height as the close + tabs */
    border-radius: 9px; gap: .4rem; font-size: .85rem; font-weight: 600; letter-spacing: -.01em;
}
.expm-cta.expm-railcta svg { width: 15px; height: 15px; }
/* Secondary / ghost CTA — same shape as the primary, quieter weight.
   Double class beats the base .expm-cta (blurple fill) regardless of order. */
.expm-cta.expm-cta--ghost {
    background: none; color: var(--inv-bg-color);
    border: 1px solid var(--surface-glass-border);
}
.expm-cta.expm-cta--ghost:hover { border-color: color-mix(in srgb, var(--blurple) 45%, transparent); }
.expm-cta.expm-cta--ghost:hover svg { transform: translateX(-3px); }   /* back arrow nudges left */
.expm-close:hover { background: color-mix(in srgb, var(--inv-bg-color) 8%, transparent); color: var(--inv-bg-color); border-color: color-mix(in srgb, var(--inv-bg-color) 20%, transparent); }
.expm-close svg { width: 16px; height: 16px; }

/* Sticky toolbar — one coherent bar: calm title left, controls right, all on a
   shared baseline height with a hairline underneath to ground it. */
.expm-rail {
    position: sticky; top: 0; z-index: 6;
    display: flex; align-items: center; gap: clamp(1rem, 3vw, 1.75rem);
    margin: 0 calc(-1 * clamp(1.25rem, 4vw, 3rem)) 1.6rem; padding: .8rem clamp(1.25rem, 4vw, 3rem);
    /* Transparent at rest so the aurora flows through the header; frosts only once
       scrolled (see .expm-condensed) to hide content passing under the sticky bar. */
    background: transparent;
    transition: background .25s var(--surface-ease), backdrop-filter .25s var(--surface-ease);
}
/* Once scrolled, the condensed rail earns a soft drop-shadow instead of a hard
   hairline — reads as a floating header, not an app toolbar. */

@media (max-width: 560px) {
    .expm-rail { gap: 1rem; }
}

/* Per-step header inline on the rail line. CSS shows the one matching the step. */
.expm-railhead { display: none; align-items: center; gap: clamp(1rem, 3vw, 1.75rem); min-width: 0; }
.expm[data-step="1"] .expm-railhead[data-railstep="1"] { display: flex; }
.expm[data-step="2"] .expm-railhead[data-railstep="2"] { display: flex; }
.expm-railtitle {
    font-family: var(--brand-font, 'Space Grotesk', sans-serif);
    font-size: 1.06rem; font-weight: 600; letter-spacing: -.02em;
    color: color-mix(in srgb, var(--inv-bg-color) 88%, transparent); margin: 0; white-space: nowrap;
}
@media (max-width: 560px) { .expm-railtitle { display: none; } }

/* ── Building-blocks stage gallery (step 1) ────────────────────────────────
   Primary / Complementary tabs over a clean grid of stage cards. Each card is
   a single glanceable unit: icon + name + one line. No master-detail. */
/* Sub-header row: one-line lede on the left, Primary/Complementary tabs on the
   right — sits below the toolbar, above the card grid. */
.expm-blockshead {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    margin-bottom: 1.4rem; flex-wrap: wrap;
}
.expm-lede {
    font-family: var(--font-main, 'Satoshi', sans-serif);
    font-size: .95rem; font-weight: 500; line-height: 1.5; margin: 0;
    color: color-mix(in srgb, var(--inv-bg-color) 52%, transparent);
}
/* Tabs as a refined segmented control — one coherent object, 36px to match the
   toolbar's other controls. */
.expm-tabs {
    display: inline-flex; gap: .15rem; padding: .2rem; height: 36px; box-sizing: border-box;
    border-radius: 9px; background: color-mix(in srgb, var(--inv-bg-color) 5%, transparent);
    border: 1px solid color-mix(in srgb, var(--inv-bg-color) 8%, transparent);
}
.expm-tab {
    padding: 0 .8rem; border: none; background: none; cursor: pointer; border-radius: 6px;
    font-family: var(--font-main, 'Satoshi', sans-serif); font-size: .82rem; font-weight: 600; letter-spacing: -.005em;
    color: color-mix(in srgb, var(--inv-bg-color) 52%, transparent);
    transition: color .2s var(--surface-ease), background .2s var(--surface-ease), box-shadow .2s var(--surface-ease);
}
.expm-tab:hover { color: var(--inv-bg-color); }
.expm-tab.is-active {
    color: var(--inv-bg-color); background: var(--main-bg-color);
    box-shadow: 0 1px 2px color-mix(in srgb, var(--inv-bg-color) 14%, transparent), 0 0 0 1px color-mix(in srgb, var(--inv-bg-color) 5%, transparent);
}

/* ── Stage carousel — one stage on stage at a time ─────────────────────────
   Not a grid of labels: each stage gets a full cinematic slide (big name +
   one-liner on the left, a live "collab space + agents" reel on the right).
   The Primary/Complementary tabs pick the active set; a filmstrip + arrows page
   through it. All 15 slides stay in the DOM (SEO) with one visually current. */
.expm-cards { display: none; }
.expm-cards.is-active {
    display: block; position: relative; min-height: 452px; margin-bottom: 1.3rem;
    perspective: 1900px; perspective-origin: 50% 44%;
    /* The 3D neighbour cards project past this box; clip the horizontal spill so it
       never gives the shell a horizontal scrollbar (overflow-x:clip keeps overflow-y
       visible, so the front card's drop shadow still shows). */
    overflow-x: hidden;
    overflow-x: clip; overflow-clip-margin: 1.75rem;
}
.expm-card {
    position: absolute; top: 0; left: 15%; width: 70%; height: 100%; box-sizing: border-box;
    text-align: left; cursor: pointer; font: inherit; color: inherit;
    display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); align-items: stretch; gap: 1.9rem;
    padding: 1.9rem 2rem; border-radius: 24px; overflow: hidden;
    background: linear-gradient(180deg, color-mix(in srgb, var(--inv-bg-color) 2.5%, var(--main-bg-color)), var(--main-bg-color));
    border: 1px solid color-mix(in srgb, var(--inv-bg-color) 10%, transparent);
    box-shadow: var(--surface-glass-shadow, 0 18px 44px -26px color-mix(in srgb, var(--inv-bg-color) 45%, transparent));
    transform-style: preserve-3d; backface-visibility: hidden; will-change: transform, opacity;
    transition: transform .62s cubic-bezier(.34, .11, .16, 1), opacity .5s var(--surface-ease), box-shadow .5s var(--surface-ease);
}
/* JS (placeCards) drives each card's 3D transform/opacity/z by its offset from the
   current index; .is-current just gets a stronger lift so the front card reads. */
.expm-card.is-current { box-shadow: 0 34px 66px -30px color-mix(in srgb, var(--inv-bg-color) 52%, transparent); }
/* Click a stage → the SAME card morphs in place to its positioning detail
   (the reel/headline swap out for the "in your stack vs as a stage" frame). */
.expm-card-detail { display: none; }
.expm-card.is-detail { display: block; position: relative; height: auto; cursor: pointer; overflow: visible; width: 90%; left: 5%; }
.expm-card.is-detail .expm-card-media, .expm-card.is-detail .expm-card-body { display: none; }
.expm-card.is-detail .expm-card-detail { display: flex; flex-direction: column; justify-content: center; height: 100%; animation: expm-in .3s var(--surface-ease); }
/* Detail → a balanced vertical flow that fills the card width: identity on top,
   the before/after side by side in the middle, integrations beneath. Vertically
   centred, so no dead columns or big gaps. */
.expm-card.is-detail .expm-frame {
    max-width: none; margin: 0; display: flex; flex-direction: column; gap: 1.5rem;
}
.expm-card.is-detail .expm-frame-head { margin: 0; align-items: center; }
.expm-card.is-detail .expm-frame-compare { margin: 0; align-items: stretch; }
.expm-card.is-detail .expm-frame-col { padding: 1.1rem 1.3rem; }
.expm-card.is-detail .expm-frame-integrations { margin: 0; padding-top: 0; }
.expm-detail-back {
    flex: none; align-self: flex-start;
    display: inline-flex; align-items: center; gap: .4rem; margin-bottom: .5rem; cursor: pointer;
    padding: .38rem .7rem .38rem .5rem; border-radius: 9px;
    background: none; border: 1px solid color-mix(in srgb, var(--inv-bg-color) 12%, transparent);
    font-family: var(--font-main, 'Satoshi', sans-serif); font-size: .8rem; font-weight: 600;
    color: color-mix(in srgb, var(--inv-bg-color) 62%, transparent);
    transition: color .2s var(--surface-ease), border-color .2s var(--surface-ease), background .2s var(--surface-ease);
}
.expm-detail-back:hover { color: var(--inv-bg-color); border-color: color-mix(in srgb, var(--blurple) 40%, transparent); background: color-mix(in srgb, var(--inv-bg-color) 4%, transparent); }
.expm-detail-back svg { width: 15px; height: 15px; }
/* Left: the stage headline — the epic focal text. */
.expm-card-body {
    display: flex; flex-direction: column; justify-content: center; align-items: flex-start;
    padding: .4rem .3rem .4rem .7rem; min-width: 0;
}
.expm-card-kicker {
    font-family: var(--font-main, 'Satoshi', sans-serif);
    font-size: .72rem; font-weight: 550; letter-spacing: .13em; text-transform: uppercase;
    color: color-mix(in srgb, var(--inv-bg-color) 34%, transparent); margin-bottom: .85rem;
}
.expm-card-name {
    font-family: var(--brand-font, 'Space Grotesk', sans-serif);
    font-size: clamp(1.9rem, 2.8vw, 2.5rem); font-weight: 700; color: var(--inv-bg-color);
    letter-spacing: -.03em; line-height: 1.03;
}
.expm-card-desc {
    font-family: var(--font-main, 'Satoshi', sans-serif);
    font-size: 1rem; line-height: 1.5; margin: .9rem 0 0; max-width: 34ch;
    color: color-mix(in srgb, var(--inv-bg-color) 58%, transparent);
}
.expm-card-go {
    order: -1; margin: 0 0 1.15rem 0; flex: none;
    display: inline-flex; align-items: center; justify-content: center;
    width: 54px; height: 54px; border-radius: 15px;
    color: var(--blurple);
    background: linear-gradient(180deg, color-mix(in srgb, var(--blurple) 22%, transparent), color-mix(in srgb, var(--blurple) 10%, transparent));
    box-shadow:
        inset 0 1px 0 color-mix(in srgb, #fff 30%, transparent),
        inset 0 0 0 1px color-mix(in srgb, var(--blurple) 24%, transparent),
        0 8px 18px -8px color-mix(in srgb, var(--blurple) 50%, transparent);
    transition: transform .4s var(--surface-ease), box-shadow .4s var(--surface-ease);
}
.expm-card-go svg { width: 26px; height: 26px; color: var(--blurple); fill: var(--blurple); }
.expm-card:hover .expm-card-go { transform: translateY(-3px) scale(1.05); }

/* Right: the reel — a collab-space board with the stage's real agents alive around it. */
.expm-card-media {
    position: relative; border-radius: 18px; overflow: hidden; min-height: 344px;
    background:
        radial-gradient(120% 100% at 72% 8%, color-mix(in srgb, var(--blurple) 13%, transparent), transparent 58%),
        color-mix(in srgb, var(--inv-bg-color) 4%, transparent);
    border: 1px solid color-mix(in srgb, var(--inv-bg-color) 8%, transparent);
}
.expm-reel { position: absolute; inset: 0; }
.expm-reel-glow {
    position: absolute; inset: 0;
    background: radial-gradient(56% 46% at 50% 42%, color-mix(in srgb, var(--blurple) 17%, transparent), transparent 70%);
    opacity: .8; animation: reel-pulse 6.5s ease-in-out infinite;
}
/* The reel is a live product-window mockup — chrome + nav + a working canvas + a
   real agents dock — so it reads as evidence the stage is a real, running app. */
.expm-reel-app {
    position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
    width: min(300px, 88%); box-sizing: border-box; z-index: 2; border-radius: 14px; overflow: hidden;
    background: var(--main-bg-color);
    border: 1px solid color-mix(in srgb, var(--inv-bg-color) 11%, transparent);
    box-shadow: 0 32px 60px -30px color-mix(in srgb, var(--inv-bg-color) 55%, transparent),
                0 2px 6px -2px color-mix(in srgb, var(--inv-bg-color) 12%, transparent);
    animation: reel-float 8s ease-in-out infinite;
}
.expm-reel-app-bar {
    display: flex; align-items: center; gap: .5rem; padding: .5rem .6rem;
    border-bottom: 1px solid color-mix(in srgb, var(--inv-bg-color) 8%, transparent);
    background: color-mix(in srgb, var(--inv-bg-color) 3%, transparent);
}
.expm-reel-app-ic {
    display: grid; place-items: center; width: 22px; height: 22px; border-radius: 7px; flex: none;
    color: var(--blurple); background: color-mix(in srgb, var(--blurple) 15%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--blurple) 22%, transparent);
}
.expm-reel-app-ic svg { width: 13px; height: 13px; color: var(--blurple); fill: var(--blurple); }
.expm-reel-app-nm {
    font-family: var(--brand-font, 'Space Grotesk', sans-serif);
    font-size: .78rem; font-weight: 700; letter-spacing: -.02em; color: var(--inv-bg-color);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.expm-reel-app-live {
    margin-left: auto; flex: none; display: inline-flex; align-items: center; gap: .28rem;
    padding: .16rem .42rem .16rem .34rem; border-radius: 999px;
    font-family: var(--font-main, 'Satoshi', sans-serif); font-size: .56rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
    color: var(--sector-green, #2fa36b); background: color-mix(in srgb, var(--sector-green, #2fa36b) 13%, transparent);
}
.expm-reel-app-live i { position: relative; width: 5px; height: 5px; border-radius: 50%; background: var(--sector-green, #2fa36b); }
.expm-reel-app-live i::after { content: ''; position: absolute; inset: -1px; border-radius: 50%; box-shadow: 0 0 0 1.5px var(--sector-green, #2fa36b); animation: reel-ring 2.6s cubic-bezier(.2,.6,.3,1) infinite; }
.expm-reel-app-body { display: flex; min-height: 116px; }
.expm-reel-app-nav {
    display: flex; flex-direction: column; gap: .4rem; padding: .55rem .45rem; flex: none;
    border-right: 1px solid color-mix(in srgb, var(--inv-bg-color) 7%, transparent);
}
.expm-reel-app-nav i { width: 13px; height: 13px; border-radius: 4px; background: color-mix(in srgb, var(--inv-bg-color) 10%, transparent); }
.expm-reel-app-nav .is-on { background: color-mix(in srgb, var(--blurple) 55%, transparent); }
.expm-reel-app-canvas { flex: 1; min-width: 0; position: relative; overflow: hidden; padding: .6rem; display: flex; flex-direction: column; gap: .5rem; }
.expm-reel-scan {
    position: absolute; left: 0; right: 0; top: 0; height: 34px; pointer-events: none;
    background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--blurple) 8%, transparent), transparent);
    animation: reel-scan 4.4s cubic-bezier(.4,0,.2,1) infinite;
}
.expm-reel-r { display: flex; align-items: center; gap: .45rem; position: relative; z-index: 1; }
.expm-reel-rc {
    position: relative; width: 13px; height: 13px; border-radius: 4px; flex: none; box-sizing: border-box;
    border: 1.5px solid color-mix(in srgb, var(--inv-bg-color) 22%, transparent);
}
.expm-reel-r--done .expm-reel-rc { border-color: var(--blurple); background: var(--blurple); }
.expm-reel-r--done .expm-reel-rc::after {
    content: ''; position: absolute; left: 3.6px; top: 1px; width: 2.5px; height: 5.5px;
    border: solid #fff; border-width: 0 1.5px 1.5px 0; transform: rotate(45deg);
}
.expm-reel-r--live .expm-reel-rc { border-color: var(--blurple); animation: reel-blink 1.4s ease-in-out infinite; }
.expm-reel-rl { height: 7px; border-radius: 4px; background: color-mix(in srgb, var(--inv-bg-color) 11%, transparent); }
.expm-reel-rl--1 { width: 82%; } .expm-reel-rl--2 { width: 56%; } .expm-reel-rl--3 { width: 72%; } .expm-reel-rl--4 { width: 46%; }
.expm-reel-r--done .expm-reel-rl { background: color-mix(in srgb, var(--inv-bg-color) 8%, transparent); }
.expm-reel-r--live .expm-reel-rl {
    background: linear-gradient(90deg, color-mix(in srgb, var(--inv-bg-color) 10%, transparent) 0%, color-mix(in srgb, var(--blurple) 42%, transparent) 50%, color-mix(in srgb, var(--inv-bg-color) 10%, transparent) 100%);
    background-size: 220% 100%; animation: reel-shimmer 1.7s linear infinite;
}
.expm-reel-app-agents {
    display: flex; align-items: center; gap: .35rem; padding: .5rem .55rem; overflow: hidden;
    border-top: 1px solid color-mix(in srgb, var(--inv-bg-color) 7%, transparent);
    background: color-mix(in srgb, var(--inv-bg-color) 2.5%, transparent);
}
.expm-reel-ag {
    display: inline-flex; align-items: center; gap: .3rem; flex: none; min-width: 0;
    padding: .26rem .45rem .26rem .3rem; border-radius: 999px;
    background: var(--main-bg-color); border: 1px solid color-mix(in srgb, var(--inv-bg-color) 10%, transparent);
    box-shadow: 0 2px 5px -3px color-mix(in srgb, var(--inv-bg-color) 40%, transparent);
}
.expm-reel-ag-ic { display: grid; place-items: center; width: 17px; height: 17px; border-radius: 5px; flex: none; color: var(--blurple); background: color-mix(in srgb, var(--blurple) 15%, transparent); }
.expm-reel-ag-ic svg { width: 10px; height: 10px; color: var(--blurple); fill: var(--blurple); }
.expm-reel-ag-nm { font-family: var(--font-main, 'Satoshi', sans-serif); font-size: .6rem; font-weight: 600; color: color-mix(in srgb, var(--inv-bg-color) 78%, transparent); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 60px; }
.expm-reel-ag-dot { position: relative; width: 5px; height: 5px; border-radius: 50%; flex: none; background: var(--sector-green, #2fa36b); }
.expm-reel-ag-dot--1::after { content: ''; position: absolute; inset: -1px; border-radius: 50%; box-shadow: 0 0 0 1.5px var(--sector-green, #2fa36b); animation: reel-ring 2.8s cubic-bezier(.2,.6,.3,1) infinite; }
.expm-reel-ag-dot--2 { animation-delay: -.7s; } .expm-reel-ag-dot--3 { animation-delay: -1.4s; }
/* Only the front card's window animates (perf). */
.expm-card:not(.is-current) .expm-reel-glow,
.expm-card:not(.is-current) .expm-reel-app,
.expm-card:not(.is-current) .expm-reel-app *,
.expm-card:not(.is-current) .expm-reel-app *::before,
.expm-card:not(.is-current) .expm-reel-app *::after { animation-play-state: paused; }
@keyframes reel-pulse { 0%, 100% { opacity: .6; } 50% { opacity: 1; } }
@keyframes reel-float { 0%, 100% { transform: translate(-50%, -50%); } 50% { transform: translate(-50%, calc(-50% - 6px)); } }
@keyframes reel-blink { 0%, 100% { opacity: 1; } 50% { opacity: .62; } }
@keyframes reel-ring { 0% { transform: scale(.5); opacity: .55; } 70% { opacity: 0; } 100% { transform: scale(3); opacity: 0; } }
@keyframes reel-scan { 0% { transform: translateY(-34px); opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { transform: translateY(150px); opacity: 0; } }
@keyframes reel-shimmer { 0% { background-position: 220% 0; } 100% { background-position: -120% 0; } }

/* ── Per-tool canvas variants — each stage's window shows its real interface ── */
.expm-reel-rc--on { border-color: var(--blurple); background: var(--blurple); }
.expm-reel-rc--on::after { content: ''; position: absolute; left: 3.6px; top: 1px; width: 2.5px; height: 5.5px; border: solid #fff; border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); }

/* doc + e-sign (Discovery / Commit) */
.expm-reel-canvas--doc, .expm-reel-canvas--esign { gap: .35rem; }
.expm-reel-doc { display: flex; flex-direction: column; gap: .3rem; }
.expm-reel-h { height: 8px; width: 55%; border-radius: 4px; background: color-mix(in srgb, var(--inv-bg-color) 26%, transparent); }
.expm-reel-h.h2 { width: 42%; margin-top: .2rem; }
.expm-reel-l { height: 6px; border-radius: 4px; background: color-mix(in srgb, var(--inv-bg-color) 11%, transparent); }
.expm-reel-l.l1{width:92%}.expm-reel-l.l2{width:98%}.expm-reel-l.l3{width:74%}.expm-reel-l.l4{width:90%}.expm-reel-l.l5{width:40%}
.expm-reel-caret { position: relative; }
.expm-reel-caret::after { content: ''; position: absolute; right: -5px; top: -1px; width: 1.5px; height: 8px; background: var(--blurple); animation: reel-caret 1s steps(1) infinite; }
.expm-reel-sign { margin-top: .4rem; display: flex; align-items: flex-end; gap: .5rem; }
.expm-reel-sign-pad { flex: 1; height: 34px; border-radius: 7px; border: 1px dashed color-mix(in srgb, var(--inv-bg-color) 24%, transparent); background: color-mix(in srgb, var(--inv-bg-color) 2%, transparent); display: grid; place-items: center; overflow: hidden; }
.expm-reel-ink { width: 78%; height: 22px; color: var(--blurple); }
.expm-reel-ink path { stroke-dasharray: 230; stroke-dashoffset: 230; animation: reel-ink 3.6s ease-in-out infinite; }
.expm-reel-sign-btn { flex: none; padding: .34rem .6rem; border-radius: 7px; background: var(--blurple); color: #fff; font-family: var(--font-main,'Satoshi',sans-serif); font-size: .6rem; font-weight: 700; box-shadow: 0 4px 10px -3px color-mix(in srgb, var(--blurple) 55%, transparent); animation: reel-btn 2.6s ease-in-out infinite; }

/* gantt (Deploy) */
.expm-reel-gantt { display: flex; flex-direction: column; gap: .55rem; }
.expm-reel-gt { display: flex; align-items: center; gap: .4rem; }
.expm-reel-gt-l { width: 26px; height: 6px; border-radius: 4px; flex: none; background: color-mix(in srgb, var(--inv-bg-color) 13%, transparent); }
.expm-reel-gt-b { height: 9px; border-radius: 5px; background: color-mix(in srgb, var(--blurple) 30%, transparent); position: relative; }
.expm-reel-gt-b.g1{margin-left:0%;width:34%}.expm-reel-gt-b.g2{margin-left:22%;width:40%}.expm-reel-gt-b.g3{margin-left:40%;width:34%}.expm-reel-gt-b.g4{margin-left:58%;width:28%}
.expm-reel-gt-b.is-live { background: color-mix(in srgb, var(--blurple) 20%, transparent); overflow: hidden; }
.expm-reel-gt-b.is-live::after { content: ''; position: absolute; inset: 0 auto 0 0; border-radius: 5px; background: var(--blurple); animation: reel-gfill 2.8s ease-in-out infinite; }

/* scorecard (Evaluation / POC) */
.expm-reel-score { display: flex; flex-direction: column; gap: .55rem; }
.expm-reel-sc { display: flex; align-items: center; gap: .45rem; }
.expm-reel-sc-l { width: 30%; height: 6px; border-radius: 4px; flex: none; background: color-mix(in srgb, var(--inv-bg-color) 12%, transparent); }
.expm-reel-track { flex: 1; height: 7px; border-radius: 4px; background: color-mix(in srgb, var(--inv-bg-color) 8%, transparent); overflow: hidden; }
.expm-reel-fill { display: block; height: 100%; border-radius: 4px; background: var(--blurple); }
.expm-reel-fill.f45{width:45%}.expm-reel-fill.f60{width:60%}.expm-reel-fill.f80{width:80%}.expm-reel-fill.f92{width:92%}
.expm-reel-fill.is-live { animation: reel-scorefill 3s ease-in-out infinite; }

/* modules / SOW (Scope) */
.expm-reel-mods { display: flex; flex-direction: column; gap: .5rem; }
.expm-reel-mod { display: flex; align-items: center; gap: .45rem; }
.expm-reel-mod .expm-reel-l.mln { flex: 1; width: auto; }
.expm-reel-pr { flex: none; width: 26px; height: 8px; border-radius: 4px; background: color-mix(in srgb, var(--inv-bg-color) 14%, transparent); }
.expm-reel-mod--total { margin-top: .2rem; padding-top: .45rem; border-top: 1px solid color-mix(in srgb, var(--inv-bg-color) 10%, transparent); }
.expm-reel-mod--total .expm-reel-l.mlt { flex: 1; width: 40%; height: 7px; background: color-mix(in srgb, var(--inv-bg-color) 22%, transparent); }
.expm-reel-pr--big { width: 40px; height: 10px; background: color-mix(in srgb, var(--blurple) 42%, transparent); }

/* metrics / dashboard (Success) */
.expm-reel-canvas--metrics { gap: .55rem; }
.expm-reel-stat { display: flex; flex-direction: column; gap: .3rem; }
.expm-reel-num { height: 19px; width: 44%; border-radius: 5px; background: color-mix(in srgb, var(--blurple) 55%, transparent); }
.expm-reel-sub { height: 6px; width: 62%; border-radius: 4px; background: color-mix(in srgb, var(--inv-bg-color) 12%, transparent); }
.expm-reel-chart { display: flex; align-items: flex-end; gap: .3rem; height: 44px; margin-top: auto; }
.expm-reel-chart i { flex: 1; border-radius: 3px 3px 0 0; background: color-mix(in srgb, var(--blurple) 32%, transparent); transform-origin: bottom; animation: reel-bar 3.2s ease-in-out infinite; }
.expm-reel-chart .c1{height:40%;animation-delay:-.1s}.expm-reel-chart .c2{height:66%;animation-delay:-.5s}.expm-reel-chart .c3{height:50%;animation-delay:-.9s}.expm-reel-chart .c4{height:82%;animation-delay:-1.3s}.expm-reel-chart .c5{height:60%;animation-delay:-1.7s}.expm-reel-chart .c6{height:92%;animation-delay:-2.1s}

/* form (Pre-Discovery / Questionnaire) */
.expm-reel-form { display: flex; flex-direction: column; gap: .42rem; }
.expm-reel-field { display: flex; flex-direction: column; gap: .22rem; }
.expm-reel-fl { width: 34%; height: 5px; border-radius: 3px; background: color-mix(in srgb, var(--inv-bg-color) 14%, transparent); }
.expm-reel-fi { height: 13px; border-radius: 5px; border: 1px solid color-mix(in srgb, var(--inv-bg-color) 14%, transparent); background: color-mix(in srgb, var(--inv-bg-color) 2%, transparent); position: relative; }
.expm-reel-fi.is-live { border-color: color-mix(in srgb, var(--blurple) 45%, transparent); }
.expm-reel-fi.is-live::after { content: ''; position: absolute; left: 5px; top: 3px; width: 1.5px; height: 7px; background: var(--blurple); animation: reel-caret 1s steps(1) infinite; }
.expm-reel-form-btn { margin-top: .2rem; height: 15px; width: 42%; border-radius: 6px; background: var(--blurple); box-shadow: 0 4px 10px -3px color-mix(in srgb, var(--blurple) 50%, transparent); }

/* calendar (Meetings) */
.expm-reel-canvas--cal { gap: .45rem; }
.expm-reel-cal-head { display: grid; grid-template-columns: repeat(7,1fr); gap: 4px; }
.expm-reel-cal-head i { height: 4px; border-radius: 2px; background: color-mix(in srgb, var(--inv-bg-color) 13%, transparent); }
.expm-reel-cal-grid { display: grid; grid-template-columns: repeat(7,1fr); gap: 4px; }
.expm-reel-cal-grid i { aspect-ratio: 1; border-radius: 4px; background: color-mix(in srgb, var(--inv-bg-color) 7%, transparent); }
.expm-reel-cal-grid i:nth-child(9), .expm-reel-cal-grid i:nth-child(17) { background: color-mix(in srgb, var(--blurple) 40%, transparent); }
.expm-reel-cal-grid i:nth-child(20) { background: var(--blurple); animation: reel-evt 2s ease-in-out infinite; }

/* config toggles (Deployment Config) */
.expm-reel-cfg { display: flex; flex-direction: column; gap: .55rem; }
.expm-reel-set { display: flex; align-items: center; gap: .45rem; }
.expm-reel-sl { flex: 1; height: 6px; border-radius: 4px; background: color-mix(in srgb, var(--inv-bg-color) 12%, transparent); }
.expm-reel-tog { flex: none; width: 22px; height: 12px; border-radius: 999px; background: color-mix(in srgb, var(--inv-bg-color) 16%, transparent); position: relative; }
.expm-reel-tog::after { content: ''; position: absolute; top: 1.5px; left: 1.5px; width: 9px; height: 9px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.22); }
.expm-reel-tog--on { background: var(--blurple); }
.expm-reel-tog--on::after { transform: translateX(10px); }
.expm-reel-tog.is-live { animation: reel-togbg 3s ease-in-out infinite; }
.expm-reel-tog.is-live::after { animation: reel-togknob 3s ease-in-out infinite; }

/* content grid (Content Hub) */
.expm-reel-canvas--grid { padding: .55rem; }
.expm-reel-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 6px; }
.expm-reel-thumb { aspect-ratio: 4/3; border-radius: 6px; border: 1px solid color-mix(in srgb, var(--inv-bg-color) 8%, transparent); background: linear-gradient(135deg, color-mix(in srgb, var(--blurple) 24%, transparent), color-mix(in srgb, var(--inv-bg-color) 5%, transparent)); }
.expm-reel-thumb:nth-child(2) { animation: reel-thumb 3s ease-in-out infinite; }

/* video player (Experience) */
.expm-reel-canvas--player { gap: .5rem; }
.expm-reel-screen { flex: 1; border-radius: 8px; min-height: 70px; display: grid; place-items: center; background: linear-gradient(150deg, color-mix(in srgb, var(--inv-bg-color) 80%, transparent), color-mix(in srgb, var(--blurple) 34%, transparent)); }
.expm-reel-play { width: 0; height: 0; border-style: solid; border-width: 8px 0 8px 13px; border-color: transparent transparent transparent #fff; margin-left: 3px; filter: drop-shadow(0 2px 4px rgba(0,0,0,.3)); animation: reel-btn 2.4s ease-in-out infinite; }
.expm-reel-pbar { height: 5px; border-radius: 3px; background: color-mix(in srgb, var(--inv-bg-color) 10%, transparent); overflow: hidden; }
.expm-reel-pbar b { display: block; height: 100%; width: 40%; border-radius: 3px; background: var(--blurple); animation: reel-pbar 4.5s linear infinite; }

@keyframes reel-caret { 0%,50% { opacity: 1; } 51%,100% { opacity: 0; } }
@keyframes reel-ink { 0% { stroke-dashoffset: 230; } 55% { stroke-dashoffset: 0; } 82% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 230; } }
@keyframes reel-btn { 0%,100% { transform: scale(1); } 50% { transform: scale(1.07); } }
@keyframes reel-gfill { 0% { width: 18%; } 60% { width: 92%; } 100% { width: 18%; } }
@keyframes reel-scorefill { 0% { width: 12%; } 60% { width: 70%; } 100% { width: 12%; } }
@keyframes reel-bar { 0%,100% { transform: scaleY(.82); } 50% { transform: scaleY(1); } }
@keyframes reel-evt { 0%,100% { opacity: 1; } 50% { opacity: .4; } }
@keyframes reel-togbg { 0%,45% { background: color-mix(in srgb, var(--inv-bg-color) 16%, transparent); } 55%,100% { background: var(--blurple); } }
@keyframes reel-togknob { 0%,45% { transform: translateX(0); } 55%,100% { transform: translateX(10px); } }
@keyframes reel-thumb { 0%,100% { box-shadow: none; } 50% { box-shadow: 0 0 0 2px color-mix(in srgb, var(--blurple) 40%, transparent); } }
@keyframes reel-pbar { 0% { width: 8%; } 100% { width: 96%; } }

/* ── Next-gen collab polish: multiplayer presence, a live teammate cursor, and
   richer window depth. ─────────────────────────────────────────────────────── */
.expm-reel-glow {
    background:
        radial-gradient(50% 42% at 48% 38%, color-mix(in srgb, var(--blurple) 16%, transparent), transparent 68%),
        radial-gradient(46% 40% at 74% 74%, color-mix(in srgb, var(--purple) 13%, transparent), transparent 70%);
}
.expm-reel-app {
    box-shadow:
        0 36px 66px -30px color-mix(in srgb, var(--inv-bg-color) 58%, transparent),
        0 3px 10px -3px color-mix(in srgb, var(--inv-bg-color) 14%, transparent),
        inset 0 1px 0 color-mix(in srgb, #fff 45%, transparent);
}
.expm-reel-app-bar { background: linear-gradient(180deg, color-mix(in srgb, var(--inv-bg-color) 4.5%, transparent), color-mix(in srgb, var(--inv-bg-color) 1.5%, transparent)); }
.expm-reel-pres { display: inline-flex; align-items: center; margin-left: auto; margin-right: .35rem; flex: none; }
.expm-reel-av { width: 15px; height: 15px; border-radius: 50%; border: 1.5px solid var(--main-bg-color); box-sizing: border-box; flex: none; }
.expm-reel-av--1 { background: var(--blurple); }
.expm-reel-av--2 { background: var(--purple, #7873F5); margin-left: -6px; }
.expm-reel-app-live { margin-left: 0; }

/* trial (POC) */
.expm-reel-trial { display: flex; flex-direction: column; gap: .5rem; }
.expm-reel-crit { display: flex; align-items: center; gap: .45rem; }
.expm-reel-crit .expm-reel-l.tc { flex: 1; width: auto; }
.expm-reel-pass, .expm-reel-run { flex: none; padding: .1rem .3rem; border-radius: 4px; font-family: var(--font-main,'Satoshi',sans-serif); font-size: .5rem; font-weight: 800; letter-spacing: .04em; }
.expm-reel-pass { color: var(--sector-green,#2fa36b); background: color-mix(in srgb, var(--sector-green,#2fa36b) 15%, transparent); }
.expm-reel-run { color: var(--blurple); background: color-mix(in srgb, var(--blurple) 15%, transparent); animation: reel-blink 1.4s ease-in-out infinite; }
.expm-reel-trial-bar { margin-top: .2rem; height: 7px; border-radius: 4px; background: color-mix(in srgb, var(--inv-bg-color) 8%, transparent); overflow: hidden; }
.expm-reel-trial-fill { display: block; height: 100%; border-radius: 4px; background: var(--sector-green,#2fa36b); animation: reel-scorefill 3s ease-in-out infinite; }

/* survey (General Questionnaire) */
.expm-reel-survey { display: flex; flex-direction: column; gap: .4rem; }
.expm-reel-survey .expm-reel-h.qh { width: 76%; margin-bottom: .1rem; }
.expm-reel-opt { display: flex; align-items: center; gap: .45rem; padding: .32rem .42rem; border-radius: 6px; border: 1px solid color-mix(in srgb, var(--inv-bg-color) 9%, transparent); }
.expm-reel-opt .expm-reel-l { flex: 1; width: auto; }
.expm-reel-radio { width: 11px; height: 11px; border-radius: 50%; flex: none; box-sizing: border-box; border: 1.5px solid color-mix(in srgb, var(--inv-bg-color) 24%, transparent); }
.expm-reel-radio--on { border-color: var(--blurple); border-width: 3.5px; }
.expm-reel-opt:has(.expm-reel-radio--on) { border-color: color-mix(in srgb, var(--blurple) 35%, transparent); background: color-mix(in srgb, var(--blurple) 6%, transparent); }

/* gate (Pre-Deployment) */
.expm-reel-gate { display: flex; flex-direction: column; gap: .5rem; }
.expm-reel-gate-status { margin-top: .3rem; display: inline-flex; align-items: center; gap: .35rem; padding: .34rem .5rem; border-radius: 7px; font-family: var(--font-main,'Satoshi',sans-serif); font-size: .58rem; font-weight: 700; color: var(--sector-green,#2fa36b); background: color-mix(in srgb, var(--sector-green,#2fa36b) 12%, transparent); }
.expm-reel-gate-status i { width: 6px; height: 6px; border-radius: 50%; background: var(--sector-green,#2fa36b); animation: reel-blink 1.8s ease-in-out infinite; }

/* ── Bespoke stage motion ──────────────────────────────────────────────────── */
/* Discovery — a conversation captured into a Q&A table (sequenced). */
.expm-reel-canvas--conv { gap: .45rem; }
.expm-reel-conv { display: flex; flex-direction: column; gap: .32rem; }
.expm-reel-msg { display: flex; align-items: center; gap: .35rem; max-width: 80%; padding: .3rem .45rem; border-radius: 9px; opacity: 0; animation: reel-pop 5s ease-in-out infinite; }
.expm-reel-msg b { flex: 1; height: 5px; border-radius: 3px; background: currentColor; opacity: .5; }
.expm-reel-msg-av { width: 12px; height: 12px; border-radius: 50%; flex: none; background: var(--blurple); }
.expm-reel-msg--q { align-self: flex-start; background: color-mix(in srgb, var(--inv-bg-color) 7%, transparent); color: color-mix(in srgb, var(--inv-bg-color) 48%, transparent); }
.expm-reel-msg--a { align-self: flex-end; background: color-mix(in srgb, var(--blurple) 14%, transparent); color: var(--blurple); }
.expm-reel-qa { border: 1px solid color-mix(in srgb, var(--inv-bg-color) 9%, transparent); border-radius: 8px; overflow: hidden; margin-top: .15rem; }
.expm-reel-qa-row { display: grid; grid-template-columns: .9fr 1.1fr; gap: .4rem; align-items: center; padding: .3rem .42rem; }
.expm-reel-qa-row + .expm-reel-qa-row { border-top: 1px solid color-mix(in srgb, var(--inv-bg-color) 7%, transparent); }
.expm-reel-qa-row--h { background: color-mix(in srgb, var(--inv-bg-color) 4%, transparent); }
.expm-reel-qa-row--h i { height: 4px; border-radius: 2px; background: color-mix(in srgb, var(--inv-bg-color) 24%, transparent); }
.expm-reel-qa-row--h i:first-child { width: 45%; } .expm-reel-qa-row--h i:last-child { width: 60%; }
.expm-reel-qa-row .qa-q, .expm-reel-qa-row .qa-a { height: 5px; border-radius: 3px; }
.expm-reel-qa-row .qa-q { background: color-mix(in srgb, var(--inv-bg-color) 16%, transparent); }
.expm-reel-qa-row .qa-a { background: color-mix(in srgb, var(--blurple) 34%, transparent); }
.expm-reel-qa-row.cv3, .expm-reel-qa-row.cv4 { opacity: 0; animation: reel-pop 5s ease-in-out infinite; }
.cv1 { animation-delay: .2s; } .cv2 { animation-delay: 1.1s; } .cv3 { animation-delay: 2.1s; } .cv4 { animation-delay: 2.9s; }
@keyframes reel-pop { 0% { opacity: 0; transform: translateY(5px); } 7% { opacity: 1; transform: none; } 84% { opacity: 1; transform: none; } 94%, 100% { opacity: 0; transform: translateY(-3px); } }

/* Experience — click play, then a slide presentation plays. */
.expm-reel-canvas--present { gap: .5rem; }
.expm-reel-present { display: flex; flex-direction: column; gap: .5rem; flex: 1; }
.expm-reel-scr { position: relative; flex: 1; min-height: 78px; border-radius: 9px; overflow: hidden; background: linear-gradient(150deg, color-mix(in srgb, var(--inv-bg-color) 84%, transparent), color-mix(in srgb, var(--blurple) 32%, transparent)); }
.expm-reel-slides { position: absolute; inset: 0; display: flex; width: 300%; animation: reel-slides 8s cubic-bezier(.72,0,.2,1) infinite; }
.expm-reel-slide { width: 33.333%; flex: none; padding: .55rem; display: flex; flex-direction: column; gap: .3rem; }
.expm-reel-slide > b { height: 6px; width: 58%; border-radius: 3px; background: rgba(255,255,255,.85); }
.expm-reel-slide > i { height: 4px; border-radius: 2px; background: rgba(255,255,255,.42); }
.expm-reel-slide > i:nth-of-type(1) { width: 82%; } .expm-reel-slide > i:nth-of-type(2) { width: 62%; }
.expm-reel-slide-chart { display: flex; align-items: flex-end; gap: 3px; height: 34px; margin-top: auto; }
.expm-reel-slide-chart u { flex: 1; border-radius: 2px 2px 0 0; background: rgba(255,255,255,.6); }
.expm-reel-slide-chart u:nth-child(1) { height: 45%; } .expm-reel-slide-chart u:nth-child(2) { height: 78%; } .expm-reel-slide-chart u:nth-child(3) { height: 60%; }
.expm-reel-play3 { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 26px; height: 26px; border-radius: 50%; background: rgba(255,255,255,.94); display: grid; place-items: center; box-shadow: 0 5px 14px rgba(0,0,0,.28); animation: reel-playfade 8s ease-in-out infinite; }
.expm-reel-play3-ring { position: absolute; inset: 0; border-radius: 50%; box-shadow: 0 0 0 2px rgba(255,255,255,.85); animation: reel-clickring 8s ease-out infinite; }
.expm-reel-play3-tri { width: 0; height: 0; border-style: solid; border-width: 5px 0 5px 8px; border-color: transparent transparent transparent var(--inv-bg-color); margin-left: 2px; }
.expm-reel-scrub { position: relative; height: 5px; border-radius: 3px; background: color-mix(in srgb, var(--inv-bg-color) 10%, transparent); }
.expm-reel-scrub-fill { position: absolute; left: 0; top: 0; height: 100%; border-radius: 3px; background: var(--blurple); animation: reel-scrub 8s cubic-bezier(.72,0,.2,1) infinite; }
.expm-reel-scrub-dot { position: absolute; top: 50%; width: 9px; height: 9px; border-radius: 50%; background: #fff; border: 2px solid var(--blurple); box-sizing: border-box; transform: translate(-50%,-50%); box-shadow: 0 1px 3px rgba(0,0,0,.22); animation: reel-scrubdot 8s cubic-bezier(.72,0,.2,1) infinite; }
@keyframes reel-slides { 0%,17% { transform: translateX(0); } 39%,56% { transform: translateX(-33.333%); } 80%,100% { transform: translateX(-66.666%); } }
@keyframes reel-playfade { 0%,15% { opacity: 1; transform: translate(-50%,-50%) scale(1); } 25%,100% { opacity: 0; transform: translate(-50%,-50%) scale(.72); } }
@keyframes reel-clickring { 0%,6% { transform: scale(1); opacity: 0; } 10% { opacity: .85; } 24% { transform: scale(2); opacity: 0; } 100% { opacity: 0; } }
@keyframes reel-scrub { 0%,17% { width: 3%; } 100% { width: 97%; } }
@keyframes reel-scrubdot { 0%,17% { left: 3%; } 100% { left: 97%; } }

/* Evaluation — a fit gauge fills while business goals validate. */
.expm-reel-canvas--fit { gap: .5rem; }
.expm-reel-fit { display: flex; align-items: center; gap: .85rem; flex: 1; }
.expm-reel-gauge { position: relative; width: 62px; height: 62px; flex: none; display: grid; place-items: center; }
.expm-reel-gauge-svg { width: 62px; height: 62px; transform: rotate(-90deg); }
.expm-reel-gauge-tr { fill: none; stroke: color-mix(in srgb, var(--inv-bg-color) 9%, transparent); stroke-width: 4; }
.expm-reel-gauge-pr { fill: none; stroke: var(--blurple); stroke-width: 4; stroke-linecap: round; stroke-dasharray: 113; stroke-dashoffset: 113; animation: reel-gauge 4.5s cubic-bezier(.4,0,.2,1) infinite; }
.expm-reel-gauge-num { position: absolute; width: 20px; height: 8px; border-radius: 4px; background: color-mix(in srgb, var(--blurple) 55%, transparent); }
.expm-reel-fit-goals { flex: 1; display: flex; flex-direction: column; gap: .5rem; }
.expm-reel-goal { display: flex; align-items: center; gap: .45rem; }
.expm-reel-goal b { flex: 1; height: 6px; border-radius: 4px; background: color-mix(in srgb, var(--inv-bg-color) 12%, transparent); }
.expm-reel-goal-ck { position: relative; width: 13px; height: 13px; border-radius: 50%; flex: none; box-sizing: border-box; border: 1.5px solid color-mix(in srgb, var(--inv-bg-color) 20%, transparent); }
.expm-reel-goal-ck::after { content: ''; position: absolute; left: 3.4px; top: 1.4px; width: 2.5px; height: 5px; border: solid var(--blurple); border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); opacity: 0; }
.fg1 .expm-reel-goal-ck::after { animation: reel-check 4.5s ease-in-out infinite; animation-delay: .7s; }
.fg2 .expm-reel-goal-ck::after { animation: reel-check 4.5s ease-in-out infinite; animation-delay: 1.4s; }
.fg3 .expm-reel-goal-ck::after { animation: reel-check 4.5s ease-in-out infinite; animation-delay: 2.1s; }
@keyframes reel-gauge { 0% { stroke-dashoffset: 113; } 62%,88% { stroke-dashoffset: 22; } 100% { stroke-dashoffset: 113; } }
@keyframes reel-check { 0%,12% { opacity: 0; } 22% { opacity: 1; } 90% { opacity: 1; } 100% { opacity: 0; } }

/* Scope — module toggles on polished cards. */
.expm-reel-scope { display: flex; flex-direction: column; gap: .3rem; }
.expm-reel-module { display: flex; align-items: center; gap: .5rem; padding: .28rem .45rem; border-radius: 8px; background: var(--main-bg-color); border: 1px solid color-mix(in srgb, var(--inv-bg-color) 9%, transparent); box-shadow: 0 1px 2px color-mix(in srgb, var(--inv-bg-color) 5%, transparent); }
.expm-reel-module-ic { width: 15px; height: 15px; border-radius: 5px; flex: none; background: color-mix(in srgb, var(--blurple) 14%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--blurple) 20%, transparent); }
.expm-reel-module-nm { flex: 1; height: 6px; border-radius: 4px; background: color-mix(in srgb, var(--inv-bg-color) 13%, transparent); }
.expm-reel-module.is-on { border-color: color-mix(in srgb, var(--blurple) 26%, transparent); background: color-mix(in srgb, var(--blurple) 5%, transparent); }

/* POC polish — pill verdict chips + a cleaner success bar. */
.expm-reel-pass, .expm-reel-run { border-radius: 999px; padding: .12rem .42rem; letter-spacing: .05em; }
.expm-reel-crit .expm-reel-l.tc { height: 6px; }
.expm-reel-trial-bar { height: 8px; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--inv-bg-color) 6%, transparent); }
.expm-reel-trial-fill { background: linear-gradient(90deg, color-mix(in srgb, var(--sector-green,#2fa36b) 80%, transparent), var(--sector-green,#2fa36b)); }

/* Stage navigator — ONE cohesive dock: tier picker · stage strip · counter, all
   on a single bordered surface with hairline dividers between the three zones.
   Consistent pill styling ties the tier toggle and the stage strip together. */
.expm-carobar {
    display: flex; align-items: center; justify-content: center; gap: .9rem;
    margin: 0 auto 1.7rem;
}
.expm-caro-sep { flex: none; width: 1px; align-self: stretch; margin: .28rem .35rem; background: color-mix(in srgb, var(--inv-bg-color) 11%, transparent); }
/* Tier selector — a dropdown (compact on every screen) with a labelled trigger
   and options that explain what each stage set is. */
.expm-tier { position: relative; flex: none; }
.expm-tier-trigger {
    display: inline-flex; align-items: center; gap: .45rem; cursor: pointer;
    padding: .4rem .55rem .4rem .65rem; border-radius: 9px;
    background: var(--main-bg-color); border: 1px solid color-mix(in srgb, var(--inv-bg-color) 15%, transparent);
    box-shadow: 0 1px 2px color-mix(in srgb, var(--inv-bg-color) 6%, transparent);
    font-family: var(--font-main, 'Satoshi', sans-serif); font-size: .8rem; font-weight: 600; letter-spacing: -.01em;
    color: var(--inv-bg-color);
    transition: border-color .2s var(--surface-ease), box-shadow .2s var(--surface-ease);
}
.expm-tier-trigger:hover { border-color: color-mix(in srgb, var(--blurple) 40%, transparent); }
.expm-tier.is-open .expm-tier-trigger { border-color: color-mix(in srgb, var(--blurple) 55%, transparent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--blurple) 14%, transparent); }
.expm-tier-ic { width: 15px; height: 15px; flex: none; color: var(--blurple); }
.expm-tier-label { white-space: nowrap; }
.expm-tier-chev { width: 14px; height: 14px; flex: none; color: color-mix(in srgb, var(--inv-bg-color) 50%, transparent); transition: transform .2s var(--surface-ease); }
.expm-tier.is-open .expm-tier-chev { transform: rotate(180deg); }
.expm-tier-panel {
    position: absolute; top: calc(100% + 8px); left: 0; z-index: 30;
    width: 290px; max-width: calc(100vw - 40px); box-sizing: border-box;
    padding: .35rem; border-radius: 13px;
    background: var(--main-bg-color); border: 1px solid color-mix(in srgb, var(--inv-bg-color) 12%, transparent);
    box-shadow: var(--surface-glass-shadow-active-hover, 0 26px 50px -22px color-mix(in srgb, var(--inv-bg-color) 55%, transparent));
    display: none;
}
.expm-tier.is-open .expm-tier-panel { display: block; animation: expm-in .16s var(--surface-ease); }
.expm-tier-opt {
    display: flex; flex-direction: column; gap: .12rem; width: 100%; text-align: left; cursor: pointer;
    padding: .6rem .65rem; border-radius: 9px; background: none; border: none;
    transition: background .16s var(--surface-ease);
}
.expm-tier-opt + .expm-tier-opt { margin-top: .1rem; }
.expm-tier-opt:hover { background: color-mix(in srgb, var(--inv-bg-color) 4%, transparent); }
.expm-tier-opt.is-active { background: color-mix(in srgb, var(--blurple) 9%, transparent); }
.expm-tier-opt-top { display: flex; align-items: center; gap: .4rem; }
.expm-tier-opt-name {
    font-family: var(--brand-font, 'Space Grotesk', sans-serif);
    font-size: .9rem; font-weight: 700; letter-spacing: -.01em; color: var(--inv-bg-color);
}
.expm-tier-opt.is-active .expm-tier-opt-name { color: var(--blurple); }
.expm-tier-check { width: 15px; height: 15px; margin-left: auto; flex: none; color: var(--blurple); opacity: 0; }
.expm-tier-opt.is-active .expm-tier-check { opacity: 1; }
.expm-tier-opt-desc {
    font-family: var(--font-main, 'Satoshi', sans-serif); font-size: .76rem; line-height: 1.4;
    color: color-mix(in srgb, var(--inv-bg-color) 55%, transparent);
}
.expm-film-pill {
    flex: none; display: inline-flex; align-items: center; gap: .4rem;
    padding: .38rem .8rem .38rem .55rem; border-radius: 9px; cursor: pointer; white-space: nowrap;
    font-family: var(--font-main, 'Satoshi', sans-serif); font-size: .8rem; font-weight: 600; letter-spacing: -.01em;
    color: color-mix(in srgb, var(--inv-bg-color) 52%, transparent);
    background: none; border: 1px solid transparent;
    transition: color .2s var(--surface-ease), background .2s var(--surface-ease), border-color .2s var(--surface-ease);
}
.expm-film-ic { display: inline-flex; flex: none; }
.expm-film-ic svg { width: 15px; height: 15px; color: color-mix(in srgb, var(--blurple) 62%, transparent); fill: color-mix(in srgb, var(--blurple) 62%, transparent); }
.expm-film-pill:hover { color: var(--inv-bg-color); background: color-mix(in srgb, var(--inv-bg-color) 4%, transparent); }
.expm-film-pill.is-current {
    color: var(--inv-bg-color); background: color-mix(in srgb, var(--blurple) 12%, transparent);
    border-color: color-mix(in srgb, var(--blurple) 28%, transparent); box-shadow: none;
}
.expm-film-pill.is-current .expm-film-ic svg { color: var(--blurple); fill: var(--blurple); }
.expm-caro-btn {
    flex: none; display: grid; place-items: center; width: 28px; height: 28px; cursor: pointer;
    background: none; border: none; color: color-mix(in srgb, var(--inv-bg-color) 40%, transparent);
    transition: color .2s var(--surface-ease);
}
.expm-caro-btn:hover { color: var(--blurple); }
.expm-caro-btn svg { width: 18px; height: 18px; }
.expm-filmstrip { flex: none; display: flex; align-items: center; gap: .45rem; }
/* Minimal position dots — current stage is an elongated blurple pill. */
.expm-film-dot {
    flex: none; width: 7px; height: 7px; padding: 0; border-radius: 999px; cursor: pointer; border: none;
    background: color-mix(in srgb, var(--inv-bg-color) 18%, transparent);
    transition: width .3s var(--surface-ease), background .3s var(--surface-ease);
}
.expm-film-dot:hover { background: color-mix(in srgb, var(--inv-bg-color) 42%, transparent); }
.expm-film-dot.is-current { width: 22px; background: var(--blurple); }
.expm-caro-count {
    flex: none; font-family: var(--font-main, 'Satoshi', sans-serif);
    font-size: .78rem; font-weight: 600; color: color-mix(in srgb, var(--inv-bg-color) 38%, transparent);
    font-variant-numeric: tabular-nums;
}

/* Footer CTA — bridges the building-blocks carousel to the live gallery. */
.expm-footcta { display: flex; justify-content: center; margin-top: 1.6rem; }
.expm-footcta-btn {
    letter-spacing: -.01em;
    box-shadow: 0 16px 32px -14px color-mix(in srgb, var(--blurple) 55%, transparent);
    transition: transform .3s var(--surface-ease), box-shadow .3s var(--surface-ease);
}
.expm-footcta-btn:hover { transform: translateY(-2px); box-shadow: 0 22px 42px -14px color-mix(in srgb, var(--blurple) 62%, transparent); }
.expm-footcta-btn svg { width: 17px; height: 17px; transition: transform .3s var(--surface-ease); }
.expm-footcta-btn:hover svg { transform: translateX(3px); }
@media (prefers-reduced-motion: reduce) { .expm-footcta-btn, .expm-footcta-btn svg { transition: none; } .expm-footcta-btn:hover { transform: none; } }
/* "All stages" button opens the browse popup. */
.expm-browse-btn {
    flex: none; display: inline-flex; align-items: center; gap: .38rem; cursor: pointer; white-space: nowrap;
    padding: .35rem .45rem; border-radius: 8px; background: none; border: none; box-shadow: none;
    font-family: var(--font-main, 'Satoshi', sans-serif); font-size: .78rem; font-weight: 600; letter-spacing: -.01em;
    color: color-mix(in srgb, var(--inv-bg-color) 52%, transparent); transition: color .2s var(--surface-ease);
}
.expm-browse-btn:hover { color: var(--blurple); }
.expm-browse-btn svg { width: 15px; height: 15px; flex: none; }

/* Browse popup — all stages as cards, filtered by the Primary/Complementary toggle. */
.expm-browse[hidden] { display: none; }
.expm-browse { position: fixed; inset: 60px 0 0 0; z-index: 1300; }
.expm-browse-backdrop {
    position: absolute; inset: 0; background: color-mix(in srgb, var(--main-bg-color) 78%, transparent);
    -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); animation: expm-in .2s var(--ease-reveal);
}
.expm-browse-panel {
    position: relative; z-index: 1; width: min(940px, 94vw); margin: 7vh auto; max-height: 84vh; overflow-y: auto;
    background: var(--main-bg-color); border: 1px solid color-mix(in srgb, var(--inv-bg-color) 10%, transparent); border-radius: 20px;
    box-shadow: 0 40px 80px -34px color-mix(in srgb, var(--inv-bg-color) 55%, transparent);
    padding: 1.3rem 1.4rem 1.5rem; animation: expm-pop .3s var(--ease-reveal);
}
.expm-browse-head { display: flex; align-items: center; gap: 1rem; }
.expm-browse-close {
    margin-left: auto; flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 9px; cursor: pointer;
    background: none; border: 1px solid color-mix(in srgb, var(--inv-bg-color) 12%, transparent);
    color: color-mix(in srgb, var(--inv-bg-color) 65%, transparent);
    transition: color .2s var(--surface-ease), border-color .2s var(--surface-ease), background .2s var(--surface-ease);
}
.expm-browse-close:hover { color: var(--inv-bg-color); border-color: color-mix(in srgb, var(--inv-bg-color) 22%, transparent); background: color-mix(in srgb, var(--inv-bg-color) 6%, transparent); }
.expm-browse-close svg { width: 16px; height: 16px; }
.expm-bcards { display: none; }
.expm-bcards.is-active { display: grid; grid-template-columns: repeat(auto-fill, minmax(214px, 1fr)); gap: .75rem; margin-top: 1.15rem; }
.expm-bcard {
    display: flex; align-items: center; gap: .75rem; width: 100%; text-align: left; cursor: pointer; font: inherit; color: inherit;
    padding: .8rem .85rem; border-radius: 13px;
    background: var(--main-bg-color); border: 1px solid color-mix(in srgb, var(--inv-bg-color) 11%, transparent);
    box-shadow: 0 1px 2px color-mix(in srgb, var(--inv-bg-color) 6%, transparent);
    transition: transform .25s var(--surface-ease), border-color .25s var(--surface-ease), box-shadow .25s var(--surface-ease);
}
.expm-bcard:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--blurple) 45%, transparent); box-shadow: 0 14px 26px -14px color-mix(in srgb, var(--blurple) 45%, transparent); }
.expm-bcard-ic {
    flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 11px;
    color: var(--blurple);
    background: linear-gradient(180deg, color-mix(in srgb, var(--blurple) 20%, transparent), color-mix(in srgb, var(--blurple) 10%, transparent));
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--blurple) 22%, transparent);
}
.expm-bcard-ic svg { width: 20px; height: 20px; color: var(--blurple); fill: var(--blurple); }
.expm-bcard-tx { display: flex; flex-direction: column; gap: .12rem; min-width: 0; }
.expm-bcard-name { font-family: var(--brand-font, 'Space Grotesk', sans-serif); font-size: .96rem; font-weight: 700; letter-spacing: -.015em; color: var(--inv-bg-color); }
.expm-bcard-desc { font-family: var(--font-main, 'Satoshi', sans-serif); font-size: .78rem; line-height: 1.35; color: color-mix(in srgb, var(--inv-bg-color) 55%, transparent); }
@media (prefers-reduced-motion: reduce) { .expm-browse-backdrop, .expm-browse-panel { animation: none; } .expm-bcard { transition: none; } .expm-bcard:hover { transform: none; } }
@media (max-width: 820px) {
    /* No 3D on small screens — one card, flat, full width (override JS inline styles).
       Swipe navigates; the dock drops its dots so it fits a phone. */
    .expm-cards.is-active { height: auto; min-height: 0; perspective: none; overflow: visible; }
    .expm-card {
        position: relative; top: auto; left: auto; width: 100%; height: auto;
        grid-template-columns: 1fr; gap: 1.2rem; padding: 1.35rem 1.35rem 1.5rem;
        transform: none !important; opacity: 1 !important;
    }
    .expm-card:not(.is-current) { display: none; }
    .expm-card.is-current { display: grid; }
    .expm-card.is-current.is-detail { display: block; }
    .expm-card.is-detail { width: 100%; left: auto; }
    .expm-card-media { min-height: 256px; }
    .expm-card-name { font-size: clamp(1.7rem, 8vw, 2.1rem); }
    /* Detail on phones: stack the before/after cards vertically. */
    .expm-card.is-detail .expm-frame { gap: 1.2rem; }
    .expm-card.is-detail .expm-frame-compare { grid-template-columns: 1fr; row-gap: .6rem; }
    .expm-card.is-detail .expm-frame-link { flex-direction: row; }
    .expm-card.is-detail .expm-frame-link svg { transform: rotate(90deg); }
    /* Dock fits: drop the position dots (swipe handles paging), keep arrows + count + browse. */
    .expm-filmstrip { display: none; }
    .expm-carobar { gap: .7rem; flex-wrap: wrap; margin-bottom: 1.4rem; }
}
@media (prefers-reduced-motion: reduce) {
    .expm-card { transition: none; }
    .expm-reel-glow, .expm-reel-app, .expm-reel-app *, .expm-reel-app *::before, .expm-reel-app *::after { animation: none; }
}

/* ── Stage home (click a card) — PIXEL-MATCH of the product StageLanding card.
   App tokens are scoped here and resolved from the marketing theme:
   --color-contrast == --inv-bg-color (#202F39 light / light-slate dark),
   --blurple == app --color-blurple. Glass/shadow derive from contrast, so the
   whole card auto-themes. CSS ported verbatim from StageLanding.module.css +
   AppGrid.module.css (the AppIcon glyph tiles). ─────────────────────────── */
.expm.is-stagedetail .expm-tabs,
.expm.is-stagedetail .expm-lede,
.expm.is-stagedetail .expm-carobar,
.expm.is-stagedetail .expm-cards.is-active { display: none; }

/* Scoped app design tokens (StageLanding + AppGrid + explorer/explainer).
   Placed on the modal root so overlays outside .expm-home inherit them too. */
.expm {
    --color-contrast: var(--inv-bg-color);
    --color-blurple: var(--blurple);
    --color-purple: #7873F5;
    --color-blurpleblue: #4EACF1;
    --glass-bg: color-mix(in srgb, var(--color-contrast) 2%, transparent);
    --glass-bg-hover: color-mix(in srgb, var(--color-contrast) 4%, transparent);
    --glass-border: color-mix(in srgb, var(--color-contrast) 6%, transparent);
    --glass-border-subtle: color-mix(in srgb, var(--color-contrast) 5%, transparent);
    --shadow-sm: 0 2px 16px color-mix(in srgb, var(--color-contrast) 4%, transparent);
}
.expm-home { display: none; }
.expm-home.is-open { display: block; max-width: 880px; margin: 0 auto; animation: expm-in .35s var(--surface-ease); }

.expm-home-back {
    display: inline-flex; align-items: center; gap: .35rem; margin: 0 0 .9rem;
    padding: .4rem .2rem; border: none; background: none; cursor: pointer;
    font-family: var(--font-main, 'Satoshi', sans-serif); font-size: 13px; font-weight: 600;
    color: color-mix(in srgb, var(--color-contrast) 55%, transparent);
    transition: color .2s var(--surface-ease);
}
.expm-home-back:hover { color: var(--color-contrast); }
.expm-home-back svg { width: 15px; height: 15px; }

/* Home bar: back button (left) + Seller/Customer VIEW toggle (right). The Top
   Pick agent tile swaps with the view (data-aud gates the seller vs customer
   tile); the toggle sets the modal's data-aud, which the explorer also follows.
   Both top-pick tiles are server-rendered (SEO) — CSS only shows one. */
.expm-home-bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.3rem; flex-wrap: wrap; }
.expm-home-bar .expm-home-back { margin: 0; }

/* ── Stage FRAME (positioning, not demo) ──────────────────────────────────
   Clicking a stage frames it: the standalone tool it replaces in today's
   stack → what it becomes as a connected CustomerNode stage → its integration
   points. (The live demo lives in "See it in your world".) */
.expm-frame { max-width: 860px; margin: 0 auto; }
.expm-frame-head { display: flex; align-items: flex-start; gap: 1.1rem; margin-bottom: 1.8rem; }
.expm-frame-ic {
    display: grid; place-items: center; width: 56px; height: 56px; border-radius: 15px; flex: none;
    color: var(--blurple);
    background: color-mix(in srgb, var(--blurple) 13%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--blurple) 16%, transparent);
}
.expm-frame-ic svg { width: 27px; height: 27px; }
.expm-frame-headtext { min-width: 0; }
.expm-frame-kicker {
    display: block; font-family: var(--font-main, 'Satoshi', sans-serif);
    font-size: .68rem; font-weight: 550; letter-spacing: .13em; text-transform: uppercase;
    color: color-mix(in srgb, var(--inv-bg-color) 34%, transparent); margin-bottom: .35rem;
}
.expm-frame-name {
    font-family: var(--brand-font, 'Space Grotesk', sans-serif);
    font-size: 1.6rem; font-weight: 700; color: var(--inv-bg-color); letter-spacing: -.02em; margin: 0 0 .3rem;
}
.expm-frame-desc {
    font-family: var(--font-main, 'Satoshi', sans-serif); font-size: 1rem; line-height: 1.5; margin: 0;
    color: color-mix(in srgb, var(--inv-bg-color) 60%, transparent);
}

/* Old-stack → stage comparison */
.expm-frame-compare { display: grid; grid-template-columns: 1fr auto 1fr; align-items: stretch; gap: 1rem; margin-bottom: 1.8rem; }
@media (max-width: 640px) { .expm-frame-compare { grid-template-columns: 1fr; } .expm-frame-link { justify-self: center; } .expm-frame-link svg { transform: rotate(90deg); } }
.expm-frame-col {
    padding: 1.25rem 1.35rem; border-radius: 14px;
    background: var(--surface-glass-bg); border: 1px solid var(--surface-glass-border);
}
.expm-frame-col--accent {
    background: color-mix(in srgb, var(--blurple) 8%, transparent);
    border-color: color-mix(in srgb, var(--blurple) 32%, transparent);
}
.expm-frame-link { align-self: center; display: flex; flex-direction: column; align-items: center; gap: .4rem; color: color-mix(in srgb, var(--blurple) 62%, transparent); }
.expm-frame-link svg { width: 22px; height: 22px; }
.expm-frame-linktext {
    font-family: var(--font-main, 'Satoshi', sans-serif);
    font-size: .58rem; font-weight: 600; letter-spacing: .07em; text-transform: uppercase;
    white-space: nowrap; text-align: center;
    color: color-mix(in srgb, var(--inv-bg-color) 44%, transparent);
}
.expm-frame-label {
    display: block; font-family: var(--font-main, 'Satoshi', sans-serif);
    font-size: .66rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
    color: color-mix(in srgb, var(--inv-bg-color) 48%, transparent); margin-bottom: .55rem;
}
.expm-frame-col--accent .expm-frame-label { color: var(--blurple); }
.expm-frame-text {
    font-family: var(--font-main, 'Satoshi', sans-serif); font-size: .92rem; line-height: 1.5; margin: 0;
    color: color-mix(in srgb, var(--inv-bg-color) 72%, transparent);
}

/* Integration points */
.expm-frame-integrations { padding-top: .2rem; }
.expm-frame-chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.expm-frame-chip {
    display: inline-flex; align-items: center; padding: .4rem .8rem; border-radius: 999px;
    font-family: var(--font-main, 'Satoshi', sans-serif); font-size: .82rem; font-weight: 600;
    color: color-mix(in srgb, var(--inv-bg-color) 72%, transparent);
    background: var(--surface-glass-bg); border: 1px solid var(--surface-glass-border);
}
.sl-icon[data-aud] { display: none; }
.expm[data-aud="seller"] .sl-icon[data-aud="seller"],
.expm[data-aud="customer"] .sl-icon[data-aud="customer"] { display: flex; }

/* ── The unified glass card ── */
.sl-card {
    position: relative; display: flex; flex-direction: column;
    width: 100%; margin: 0;
    background: var(--glass-bg); border: 1px solid var(--glass-border);
    box-shadow: var(--shadow-sm); border-radius: 20px; overflow: hidden;
}

/* ── Header ── */
.sl-header { display: flex; flex-direction: column; align-items: center; padding: 28px 40px 0; }
.sl-badge {
    display: inline-flex; align-items: center; padding: 3px 14px; border-radius: 9999px;
    font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.16em; margin-bottom: 12px;
    background: linear-gradient(135deg, color-mix(in srgb, var(--color-blurpleblue) 12%, transparent), color-mix(in srgb, var(--color-purple) 8%, transparent));
    color: var(--color-blurpleblue); border: 1px solid color-mix(in srgb, var(--color-blurpleblue) 10%, transparent);
}
.sl-title {
    margin: 0; font-family: var(--brand-font, 'Space Grotesk', sans-serif);
    font-size: 24px; font-weight: 700; letter-spacing: -0.025em; color: var(--color-contrast); text-align: center; line-height: 1.15;
}
.sl-desc {
    margin: 6px 0 0; font-family: var(--font-main, 'Satoshi', sans-serif); font-weight: 500; opacity: 0.5;
    font-size: 12.5px; line-height: 1.5; letter-spacing: 0.01em; color: var(--color-contrast); text-align: center; max-width: 440px;
}

/* ── Body: vertical action sections ── */
.sl-body { display: flex; flex-direction: column; padding: 16px 28px 24px; gap: 12px; }
.sl-section {
    position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center;
    padding: 28px 24px 16px; border-radius: 12px; background: var(--glass-bg); border: 1px solid var(--glass-border-subtle);
    transition: border-color .2s var(--ease-reveal), background .2s var(--ease-reveal);
}
.sl-section:hover { background: var(--glass-bg-hover); border-color: var(--glass-border); }
.sl-section--collab { border-left: 2px solid color-mix(in srgb, var(--color-blurple) 40%, transparent); }
.sl-section--collab:hover { border-left-color: color-mix(in srgb, var(--color-blurple) 60%, transparent); }
.sl-section--agents { border-left: 2px solid color-mix(in srgb, var(--color-purple) 40%, transparent); }
.sl-section--agents:hover { border-left-color: color-mix(in srgb, var(--color-purple) 60%, transparent); }

.sl-section-label {
    position: absolute; top: 8px; left: 16px; margin: 0; font-family: var(--font-main, 'Satoshi', sans-serif);
    font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; opacity: 0.25; pointer-events: none;
    color: var(--color-contrast);
}
.sl-section--collab .sl-section-label { color: var(--color-blurple); opacity: 0.45; }
.sl-section--agents .sl-section-label { color: var(--color-purple); opacity: 0.45; }

/* App-icon row */
.sl-approw { display: flex; align-items: flex-start; justify-content: center; flex-wrap: wrap; gap: 28px 40px; width: 100%; }

/* ── AppIcon (glyph + label) — clickable button ── */
.sl-icon {
    display: flex; flex-direction: column; align-items: center; gap: 8px; cursor: pointer; position: relative;
    width: 132px; text-align: center; -webkit-user-select: none; user-select: none;
    border: none; background: none; font: inherit; color: inherit; padding: 0;
}
.sl-glyphwrap { position: relative; display: flex; align-items: center; justify-content: center; }
.sl-glyph {
    --tint: var(--color-blurple);
    width: 114px; height: 114px; border-radius: 24px; display: flex; align-items: center; justify-content: center;
    background: color-mix(in srgb, var(--tint) 10%, color-mix(in srgb, var(--color-contrast) 3%, transparent));
    border: 0.5px solid color-mix(in srgb, var(--tint) 14%, transparent);
    box-shadow: 0 2px 16px color-mix(in srgb, var(--color-contrast) 5%, transparent), inset 0 1px 0 color-mix(in srgb, white 6%, transparent);
    transition: transform .3s var(--ease-reveal), box-shadow .3s var(--ease-reveal);
}
.sl-glyph svg { width: 45px; height: 45px; color: var(--tint); fill: var(--tint); }
.sl-icon:hover .sl-glyph {
    transform: scale(1.06);
    box-shadow: 0 8px 32px color-mix(in srgb, var(--tint) 16%, transparent), inset 0 1px 0 color-mix(in srgb, white 6%, transparent);
}
.sl-section--agents .sl-glyph { --tint: var(--color-purple); }
.sl-label {
    font-family: var(--font-main, 'Satoshi', sans-serif); font-size: 13.5px; font-weight: 600; letter-spacing: -0.01em;
    color: var(--color-contrast); opacity: 0.85; text-align: center; line-height: 1.3; max-width: 130px;
}
/* "Top Pick" badge on a glyph (product AppIcon badge) */
.sl-badge-top {
    position: absolute; top: -4px; right: -8px; display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 9999px;
    font-family: var(--font-main, 'Satoshi', sans-serif); font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
    background: color-mix(in srgb, var(--color-purple) 18%, color-mix(in srgb, var(--color-contrast) 4%, transparent));
    border: 0.5px solid color-mix(in srgb, var(--color-purple) 25%, transparent);
    box-shadow: 0 0 12px color-mix(in srgb, var(--color-purple) 14%, transparent);
    color: var(--color-purple); white-space: nowrap;
}

/* ── Seller / customer toggle (base; used in the explorer) ── */
.expm-toggle {
    display: inline-flex; gap: .2rem; padding: .2rem; border-radius: 9px;
    background: color-mix(in srgb, var(--color-contrast) 6%, transparent); border: 1px solid var(--glass-border);
}
.expm-toggle-btn {
    padding: .35rem .8rem; border: none; background: none; cursor: pointer; border-radius: 6px; white-space: nowrap;
    font-family: var(--font-main, 'Satoshi', sans-serif); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
    color: color-mix(in srgb, var(--color-contrast) 50%, transparent);
    transition: background .2s var(--surface-ease), color .2s var(--surface-ease);
}
.expm-toggle-btn:hover { color: var(--color-contrast); }
.expm[data-aud="seller"] .expm-toggle-btn[data-aud="seller"],
.expm[data-aud="customer"] .expm-toggle-btn[data-aud="customer"] {
    background: color-mix(in srgb, var(--color-purple) 16%, transparent); color: var(--color-purple);
}

/* ── Agent explorer overlay (pixel-match of StageAgentExplorer) ── */
.expm-xa { position: absolute; inset: 0; z-index: 20; }
.expm-xa-backdrop {
    position: absolute; inset: 0; background: color-mix(in srgb, var(--main-bg-color) 78%, transparent);
    -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); animation: expm-in .2s var(--ease-reveal);
}
.expm-xa-card-wrap {
    position: relative; z-index: 1; max-width: 760px; width: min(760px, 92%); margin: 6vh auto; max-height: 86vh; overflow-y: auto;
    background: var(--main-bg-color); border: 1px solid var(--glass-border); border-radius: 20px;
    box-shadow: 0 24px 64px color-mix(in srgb, var(--color-contrast) 20%, transparent);
    padding: 22px 24px 26px; animation: expm-pop .3s var(--ease-reveal);
}
.expm-xa-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 2px; }
.expm-xa-heading { margin: 0; font-family: var(--brand-font, 'Space Grotesk', sans-serif); font-size: 20px; font-weight: 700; color: var(--color-contrast); }
.expm-xa-close, .expm-xp-close {
    flex: none; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 8px;
    border: 1px solid var(--glass-border); background: none; color: var(--color-contrast); cursor: pointer;
    transition: background .2s var(--surface-ease);
}
.expm-xa-close:hover, .expm-xp-close:hover { background: var(--glass-bg-hover); }
.expm-xa-close svg, .expm-xp-close svg { width: 16px; height: 16px; }
.expm-xa-subtitle { margin: 8px 0 16px; text-align: center; font-family: var(--font-main, 'Satoshi', sans-serif); font-size: 13px; font-weight: 550; color: var(--color-contrast); opacity: 0.5; }
.expm-xa-toggle { display: flex; width: -moz-fit-content; width: fit-content; margin: 0 auto 18px; }
.expm-xa-grid { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; padding: 0 2px 4px; }
.expm-xa-grid[data-aud] { display: none; }
.expm[data-aud="seller"] .expm-xa-grid[data-aud="seller"],
.expm[data-aud="customer"] .expm-xa-grid[data-aud="customer"] { display: grid; }
.expm-xa-card {
    display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 20px 16px 16px; border-radius: 12px;
    background: var(--glass-bg); border: 1px solid var(--glass-border); cursor: pointer; text-align: center; font: inherit; color: inherit;
    transition: background .2s var(--ease-reveal), border-color .2s var(--ease-reveal), transform .2s var(--ease-reveal);
}
.expm-xa-card:hover { background: var(--glass-bg-hover); border-color: color-mix(in srgb, var(--color-purple) 30%, var(--glass-border)); transform: translateY(-2px); }
.expm-xa-ic {
    display: flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 12px; flex-shrink: 0;
    background: linear-gradient(135deg, color-mix(in srgb, var(--color-purple) 12%, transparent), color-mix(in srgb, var(--color-blurple) 8%, transparent));
    color: var(--color-purple);
}
.expm-xa-ic svg { width: 28px; height: 28px; color: var(--color-purple); fill: var(--color-purple); }
.expm-xa-title { font-family: var(--font-main, 'Satoshi', sans-serif); font-size: 14px; font-weight: 600; color: var(--color-contrast); line-height: 1.3; }
.expm-xa-desc {
    font-family: var(--font-main, 'Satoshi', sans-serif); font-size: 12px; font-weight: 500; color: var(--color-contrast); opacity: 0.5; line-height: 1.4;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* ── Explainer overlay (what an agent / collab space does) ── */
.expm-xp { position: absolute; inset: 0; z-index: 30; }
.expm-xp-backdrop {
    position: absolute; inset: 0; background: color-mix(in srgb, var(--main-bg-color) 78%, transparent);
    -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); animation: expm-in .2s var(--ease-reveal);
}
.expm-xp-card {
    position: relative; z-index: 1; max-width: 420px; width: min(420px, 90%); margin: 14vh auto 0; text-align: center;
    background: var(--main-bg-color); border: 1px solid var(--glass-border); border-radius: 18px;
    box-shadow: 0 24px 64px color-mix(in srgb, var(--color-contrast) 20%, transparent);
    padding: 34px 30px 30px; animation: expm-pop .3s var(--ease-reveal);
}
.expm-xp-close { position: absolute; top: 12px; right: 12px; }
.expm-xp-ic {
    --tint: var(--color-blurple);
    display: inline-grid; place-items: center; width: 66px; height: 66px; border-radius: 18px; margin-bottom: 16px;
    background: color-mix(in srgb, var(--tint) 12%, color-mix(in srgb, var(--color-contrast) 3%, transparent));
    border: 0.5px solid color-mix(in srgb, var(--tint) 16%, transparent); color: var(--tint);
    box-shadow: inset 0 1px 0 color-mix(in srgb, white 8%, transparent);
}
.expm-xp.is-agent .expm-xp-ic { --tint: var(--color-purple); }
.expm-xp-ic svg { width: 32px; height: 32px; color: var(--tint); fill: var(--tint); }
.expm-xp-name { margin: 0 0 10px; font-family: var(--brand-font, 'Space Grotesk', sans-serif); font-size: 20px; font-weight: 700; color: var(--color-contrast); }
.expm-xp-desc { margin: 0; font-family: var(--font-main, 'Satoshi', sans-serif); font-size: 14.5px; line-height: 1.55; color: color-mix(in srgb, var(--color-contrast) 65%, transparent); }

@keyframes expm-pop { from { opacity: 0; transform: translateY(10px) scale(.985); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
    .expm-home.is-open, .expm-xa-backdrop, .expm-xa-card-wrap, .expm-xp-backdrop, .expm-xp-card { animation: none; }
    .sl-glyph, .expm-xa-card { transition: none; }
}

/* stage + panels */
.expm-stage { flex: 1; display: flex; align-items: flex-start; }
.expm-panel { display: none; width: 100%; }
.expm-panel.is-active {
    display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: center;
    animation: expm-in .5s var(--surface-ease);
}
@media (max-width: 820px) { .expm-panel.is-active { grid-template-columns: 1fr; gap: 1.5rem; } }
/* Gentle opacity fade — the shell slide carries the motion on open; this just
   cross-fades panels on step change without doubling the travel. */
@keyframes expm-in { from { opacity: 0; } to { opacity: 1; } }

/* Step 3 = the full Journey Gallery: full width, top-aligned, single scroll
   (the shell). The filter bar stays sticky just under the rail so you can
   re-filter from anywhere without scrolling back to the top. */
/* Step 1 (building blocks) is a single full-width column: header + tabs + card
   grid, like the editor's Add-Stage modal — not the 2-col copy/visual split. */
.expm-panel--blocks.is-active { display: block; padding-top: .5rem; }
.expm-panel--full.is-active { display: block; }
.expm[data-step="2"] .expm-stage { display: block; align-items: stretch; }
.expm-gallery-head { margin: .6rem 0 1rem; }
.expm-panel--full .tg-pivot-bar {
    position: sticky; top: var(--expm-rail-h, 66px); z-index: 4; margin: 0 calc(-1 * clamp(1.25rem, 4vw, 3rem)) 1rem; padding: .85rem clamp(1.25rem, 4vw, 3rem);
    /* No bg at rest — the aurora shows straight through the filter row; on scroll,
       .expm-scrolled turns it (and the rail) to frosted glass. */
    background: transparent;
}
/* Grid flows at natural height so the modal shell is the SINGLE scroller —
   no nested grid scrollbar (overrides .tg-grid's own max-height/overflow). */
.expm-panel--full .tg-grid {
    max-height: none; height: auto; overflow: visible;
}

/* ── Condensed sticky header (after the user scrolls) ──────────────────────
   At the top the rail stays spacious (as designed). Once scrolled, .expm-condensed
   collapses the rail into a tight strip and tightens the filter bar so the pinned
   header stops wasting vertical space. (JS re-measures the rail height on scroll so
   the filter bar re-pins flush — no gap.) */
.expm-rail,
.expm-panel--full .tg-pivot-bar { transition: padding .25s var(--surface-ease), font-size .25s var(--surface-ease), background .3s var(--surface-ease), backdrop-filter .3s var(--surface-ease); }

.expm-condensed .expm-rail { padding-top: .3rem; padding-bottom: .35rem; }
.expm-condensed .expm-close { width: 32px; height: 32px; }
.expm-condensed .expm-close svg { width: 15px; height: 15px; }
.expm-condensed .expm-panel--full .tg-pivot-bar { padding-top: .45rem; padding-bottom: .5rem; }
/* On any scroll → frosted glass (both the rail and the filter bar). */
.expm-scrolled .expm-rail,
.expm-scrolled .expm-panel--full .tg-pivot-bar {
    background: color-mix(in srgb, var(--main-bg-color) 80%, transparent);
    -webkit-backdrop-filter: blur(44px) saturate(1.1); backdrop-filter: blur(44px) saturate(1.1);
}
/* Single shadow at the BOTTOM of the sticky block — so the header + filter bar read
   as one continuous glass unit, not two stacked pieces. */
.expm[data-step="1"].expm-scrolled .expm-rail,
.expm-scrolled .expm-panel--full .tg-pivot-bar { box-shadow: 0 10px 22px -16px color-mix(in srgb, var(--inv-bg-color) 42%, transparent); }

.expm-media { display: grid; place-items: center; padding: 1rem; }
.expm-media svg { width: 100%; max-width: 440px; height: auto; }

.expm-eyebrow { font-size: .75rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--blurple); margin-bottom: 1rem; }
.expm-title {
    font-family: var(--brand-font, 'Space Grotesk', sans-serif);
    font-size: clamp(1.8rem, 3.4vw, 2.6rem); font-weight: 700; color: var(--inv-bg-color);
    letter-spacing: -.025em; line-height: 1.08; margin: 0 0 1rem;
}
.expm-text { font-size: 1.05rem; line-height: 1.6; color: color-mix(in srgb, var(--inv-bg-color) 64%, transparent); margin: 0 0 1.8rem; max-width: 46ch; }
.expm-cta {
    display: inline-flex; align-items: center; gap: .5rem; padding: .85rem 1.5rem; border-radius: 12px;
    background: var(--blurple); color: #fff; border: none; cursor: pointer;
    font-family: var(--font-main, 'Satoshi', sans-serif); font-size: 1rem; font-weight: 600;
}
.expm-cta svg { width: 18px; height: 18px; transition: transform .35s var(--surface-ease); }
.expm-cta:hover svg { transform: translateX(3px); }

.expm-rail-label { fill: color-mix(in srgb, var(--inv-bg-color) 72%, transparent); font-family: var(--font-main, 'Satoshi', sans-serif); font-size: 12px; font-weight: 600; }

/* step 3 picker */
.expm-picker { display: flex; flex-direction: column; gap: .9rem; }
.expm-selects { display: flex; gap: .7rem; flex-wrap: wrap; }
.expm-select {
    flex: 1; min-width: 170px; padding: .8rem 1rem; border-radius: 12px;
    background: color-mix(in srgb, var(--inv-bg-color) 7%, transparent);
    border: 1px solid color-mix(in srgb, var(--inv-bg-color) 16%, transparent);
    color: var(--inv-bg-color); font-family: var(--font-main, 'Satoshi', sans-serif); font-size: .95rem; font-weight: 600;
    cursor: pointer;
}
.expm-select:disabled { opacity: .5; cursor: not-allowed; }
.expm-select option { color: #111; }
.expm-results { display: flex; flex-direction: column; gap: .55rem; margin-top: .5rem; max-height: 260px; overflow-y: auto; }
a.expm-result {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem; text-decoration: none; color: var(--inv-bg-color);
    padding: .8rem 1rem; border-radius: 12px;
    background: color-mix(in srgb, var(--inv-bg-color) 4%, transparent);
    border: 1px solid color-mix(in srgb, var(--inv-bg-color) 12%, transparent);
    color: var(--inv-bg-color);
    transition: border-color .3s var(--surface-ease), transform .3s var(--surface-ease);
}
a.expm-result:hover { border-color: color-mix(in srgb, var(--blurple) 50%, transparent); transform: translateX(3px); }
.expm-result-name { font-weight: 600; font-size: .95rem; }
.expm-result-sub { font-size: .8rem; color: color-mix(in srgb, var(--inv-bg-color) 50%, transparent); }
.expm-result svg { width: 16px; height: 16px; color: var(--blurple); flex-shrink: 0; }
.expm-empty { font-size: .92rem; color: color-mix(in srgb, var(--inv-bg-color) 45%, transparent); margin: .3rem 0 0; }

/* Scroll lock: position-fixed the body so the page behind can't scroll
   (works whether the scroller is html or body). JS sets `top` to the saved
   scroll offset and restores it on close so there's no jump. */
/* (scroll lock is now overflow:hidden on <html> via JS — no position:fixed
   reorg; the old body.expm-open rule was removed to fix the topnav paint bug.) */