/* ============================================================================
   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.
       Chilled 20% (each layer ×0.8) now that the glass cards let it read through. */
    background:
        radial-gradient(ellipse 62% 52% at 50% 30%, color-mix(in srgb, var(--indigo) 12.8%, transparent) 0%, transparent 62%),
        radial-gradient(ellipse 44% 46% at 15% 22%, color-mix(in srgb, var(--purple) 10.4%, transparent) 0%, transparent 66%),
        radial-gradient(ellipse 48% 48% at 85% 26%, color-mix(in srgb, var(--blurple) 11.2%, 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: 50%;
    /* Quiet neutral circle, not a red-bordered square. The red outline read as a
       validation error sitting in the header rather than a dismiss control, and a
       destructive hue on the one control that loses no work is the wrong signal.
       Muted at rest, resolving to full ink on a soft fill when reached for —
       same language as the Knowledge Center dialog's close. */
    background: none;
    border: 0;
    color: color-mix(in srgb, var(--inv-bg-color) 45%, transparent); cursor: pointer;
    transition: background .2s var(--surface-ease), 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; }
/* 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,
.expm-close:focus-visible { background: color-mix(in srgb, var(--inv-bg-color) 8%, transparent); color: var(--inv-bg-color); }
.expm-close:focus-visible { outline: 2px solid var(--indigo, #4f46e5); outline-offset: 2px; }
/* The dialog takes focus on open (a11y) but must never show a ring itself. */
.expm:focus { outline: none; }
.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.1rem; padding: .55rem 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;
    /* Hairline closes the header band so the title reads as a header rather than
       text floating above the filters. Inherits the frost when condensed. */
    border-bottom: 1px solid color-mix(in srgb, var(--inv-bg-color) 9%, transparent);
    /* Frost + hairline only. Nothing here may animate a property that affects
       layout — see the note on the removed condense rules below. */
    transition: background .25s var(--surface-ease), backdrop-filter .25s var(--surface-ease),
                border-color .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-railtitle {
    font-family: var(--brand-font, 'Space Grotesk', sans-serif);
    /* Full ink at a slightly larger size: at 88% it read washed out against the
       filter controls below it, which are the loudest thing in the header. */
    font-size: 1.16rem; font-weight: 600; letter-spacing: -.025em;
    /* Explicit, tight leading: the inherited line-height was 1.81, which padded
       a 23px title into a 42px box and left the toolbar looking half-empty. */
    line-height: 1.25;
    color: var(--inv-bg-color); 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;
    /* Frosted glass: a translucent panel with a real backdrop blur so the aurora
       diffuses through. Auto-themes via --main-bg-color (light → frosted
       white, dark → frosted ink). 88% (owner call, up from 66%): the 3D
       carousel stacks other high-contrast cards directly behind the front
       one, and at 66% their headlines ghosted through the front card's copy
       ("too transparent"). Near-opaque + the blur keeps just enough depth. */
    background: color-mix(in srgb, var(--main-bg-color) 88%, transparent);
    -webkit-backdrop-filter: blur(30px) saturate(1.35);
    backdrop-filter: blur(30px) saturate(1.35);
    border: 1px solid var(--surface-glass-border, 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 {
    /* Keep the stronger front-card lift, but restore the glass top-edge sheen the
       base --surface-glass-shadow provides (the plain override dropped it). */
    box-shadow:
        0 1px 0 color-mix(in srgb, #fff 55%, transparent) inset,
        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-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); }
/* 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-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; }

/* 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;
}

/* On-card click affordance (owner call: on the card, bottom-right corner).
   Quiet; warms with the card hover. The card is the positioning context
   (.expm-card is position:absolute in the carousel). */
.expm-card-more {
    position: absolute; right: 1.1rem; bottom: .9rem;
    display: inline-flex; align-items: center;
    font-size: .7rem; font-weight: 600; letter-spacing: .02em;
    /* The primary-CTA gradient (the wall-search placeholder treatment):
       full purple → blurple, slightly dimmed at rest, full on hover. */
    background: linear-gradient(135deg, var(--purple), var(--blurple));
    -webkit-background-clip: text; background-clip: text;
    color: transparent; -webkit-text-fill-color: transparent;
    opacity: .85;
    transition: opacity .2s ease;
    pointer-events: none;   /* the whole card is the click target */
}
.expm-card.is-current:hover .expm-card-more { opacity: 1; }
/* The detail view replaces the body; the hint has done its job there. */
.expm-card.is-detail .expm-card-more { display: 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-gallery-head { margin: .6rem 0 1rem; }
/* The phone disclosure wrapper is invisible to layout above the breakpoint:
   display:contents makes the three dropdowns direct flex children of
   .tg-pivot-bar__filters exactly as before it was added. The toggle button
   that drives it is phone-only. */
.tg-filter-fields { display: contents; }
.tg-filter-toggle { display: none; }
/* The rest-state hairline is dropped once scrolled: the rail and the filter bar
   are meant to read as ONE glass block with a single shadow underneath (see
   below), and a rule between them splits it into two stacked pieces. */
.expm-scrolled .expm-rail { border-bottom-color: transparent; }

/* ── Step 2 filter bar below the single-row threshold ──────────────────────
   The desktop bar is one flex row: three 160px dropdowns + a 240px search
   pushed right by margin-left:auto + the count. Laid out that way it needs
   ~750px of CONTENT width, and the modal shell adds clamp(1.25rem,4vw,3rem)
   per side, so ~1015px of VIEWPORT. Below that it flex-wraps, and the wrap is
   the bug. Measured wrap bands before this fix:

     <=760px    one control per row; 375x640 sticky block = 410px (64% of
                the viewport) before the first template card. The reported bug.
     761-884    search AND count wrapped; bar 134.5px, misaligned.
     885-1014   count wrapped; bar 113.9px.  <- iPad portrait 768/810/834
     >=1015     correct single row; bar 78.6px.

   So the query has to run to 1014px, not 760px.

   NOTE ON UNITS: this page's root font-size is 20px, not 16px, so `.5rem`
   here is 10px and rem-based padding reads ~25% larger than it looks. The
   tight values below are deliberately px so the bar's height is predictable. */
@media (max-width: 1014px) {
    .tg-filter-fields { display: contents; }
}

/* ── Phones: reclaim the screen ────────────────────────────────────────────
   Fixing the wrap got the sticky block from 410px to 256px on a 375x640
   phone, but 256px is still 40% of the screen gone before a single template
   card. Three things were paying for that, and none of them earn it:

     60px  the site header, which the modal was deliberately sitting UNDER
     48px  the rail — a full bar whose only content on a phone is the close
           button (its title is already display:none at 560px)
     ~90px the second and third grid rows, because three dropdowns and a
           count were all permanently on screen

   So on phones: the modal goes full-screen over the nav (it is a full-screen
   takeover on mobile — the site header behind it is unreachable anyway), the
   rail collapses to just its button, and the three dropdowns move behind a
   Filters disclosure leaving one row: [search][Filters]. Measured result at
   375x640: 256px -> 124px, 40% -> 19%. Expanding Filters is user-initiated
   and transient, so it may cost rows; the RESTING state is what matters. */
@media (max-width: 760px) {
    /* Full-screen. .site-header is z-index 100000 !important, and .expm's base
       1200 is why it was inset below it — so going full-bleed means clearing
       the nav's stacking context too, not just its 60px. */
    .expm {
        inset: 0;
        z-index: 100001;
    }
    .expm-shell { width: 100%; padding-left: 16px; padding-right: 16px; }
    /* Rail: shrink-wrap the close button. */
    .expm-rail {
        padding-top: 4px;
        padding-bottom: 4px;
        margin-bottom: 6px;
    }
    .expm-close { width: 34px; height: 34px; }
    .expm-close svg { width: 15px; height: 15px; }
    /* .expm-condensed already trims these on scroll; at phone sizes they are
       trimmed to begin with, so neutralise it or the bar twitches on every
       scroll direction change for no visual gain. */
    /* No condense-driven height change here either — see the note above. */
}

/* ── Short viewports (landscape phones) ────────────────────────────────────
   A second, independent failure: keyed on HEIGHT, because a phone in
   landscape is WIDE and SHORT and no width query catches it. At 844x390 the
   grid fixes the wrap, but pinning both the rail and the bar still left 89px
   of card; 740x360 measured 73% chrome.

   There is no height budget to pin both, so stop pinning the filter bar: it
   scrolls away and you scroll back up to re-filter. The rail (close button)
   stays pinned, so the modal is always dismissable — the one control that
   genuinely must not scroll off.

   position:static is safe for the JS: experience_modal.js only reads
   railEl.offsetHeight into --expm-rail-h, and a static bar simply stops
   consuming that var. Nothing reads the bar's own offset.

   ALSO WIDTH-GATED, deliberately. Keyed on height alone this fires on a
   1440x480 desktop window (devtools docked bottom, split screen), where the
   bar is a single 78.6px row and resting chrome is only 38% — un-pinning
   there is a pure regression. 1014px keeps it to phone-shaped viewports. */
@media (max-height: 500px) and (max-width: 1014px) {
    /* Same full-screen takeover as the phone block — a landscape phone is
       phone-shaped too, and 60px of site header is 15% of a 390px screen. */
    .expm {
        inset: 0;
        z-index: 100001;
    }
    .expm-shell { width: 100%; padding-left: 16px; padding-right: 16px; }
    .expm-rail {
        padding-top: 4px;
        padding-bottom: 4px;
        margin-bottom: 6px;
    }
    .expm-close { width: 34px; height: 34px; }
    .expm-close svg { width: 15px; height: 15px; }
    /* No condense-driven height change here either — see the note above. */
}

.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; }


/* 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.) */