/* Playaway brand fonts. Exo (display) and Source Sans 3 (body) are the
   closest Google-hosted matches to the Evo / Exo + Source Sans Pro pairing
   the marketing site uses on playaway.com. Imported at the top so font
   files are resolved before any .brochure-shell rules paint. These fonts
   apply ONLY inside .brochure-shell -- the admin/customer portals continue
   to render in Inter so brochure typography is a deliberate marketing
   moment rather than a global rebrand. */
@import url('https://fonts.googleapis.com/css2?family=Exo:wght@600;700;800&family=Source+Sans+3:wght@400;500;600;700&display=swap');

/* ─────────────────────────────────────────────────────────────────────────
   Brochure stylesheet (loaded site-wide, but every rule is scoped under
   .brochure-shell so it's a no-op on every page except /home and /get-started)

   Lives in its own file (not app.css) so the brochure styles can't be tripped
   up by the global cascade in app.css -- the previous arrangement was forcing
   us to defend the brochure with `!important`, `:has()` neutralizers, and an
   inline-style + injected-<style> JS belt-and-suspenders just to keep the
   layout from being warped by global rules on `main`, `body`, etc.

   Selectors that still live in app.css (because they target ancestors of the
   shell, which can't be scoped under it):
     - `#brochure-canvas`            -- fixed-position particle backdrop
     - `html.brochure-active`        -- locks dark canvas + smooth scrolling
     - `body.brochure-active`        -- same
     - `body:has(.brochure-shell) main` / `.content`
                                     -- belt-and-suspenders against MainLayout
   ───────────────────────────────────────────────────────────────────────── */

/* Explicit border-box reset scoped to the brochure tree. We no longer rely
   on Bootstrap's universal box-sizing rule for layout correctness inside
   the brochure -- this guarantees that `width: 100%` always means "fill
   the box, padding included" regardless of CSS loading order or scope. */
.brochure-shell,
.brochure-shell *,
.brochure-shell *::before,
.brochure-shell *::after {
    box-sizing: border-box;
}

/* ── Shell ─────────────────────────────────────────────────────────────── */

.brochure-shell {
    --br-bg-1: #0a0d14;
    --br-bg-2: #161a25;
    --br-text: #f1f5f9;
    --br-text-muted: #94a3b8;
    --br-text-dim: #64748b;
    --br-card-bg: rgba(26, 31, 46, 0.65);
    --br-card-border: rgba(148, 163, 184, 0.16);
    --br-card-border-hi: rgba(150, 201, 62, 0.35);
    --br-accent: #96C93E;
    --br-accent-dim: rgba(150, 201, 62, 0.14);
    --br-purple: #8B7BD9;
    --br-purple-dim: rgba(139, 123, 217, 0.14);
    --br-orange: #F76A0C;
    --br-orange-deep: #C44E07;

    /* Brand typography tokens. --br-font-display is reserved for marketing
       moments (hero h1, section h2 headlines, eyebrows, feature/step h3s);
       --br-font-body powers everything else inside the brochure. Inter
       stays in the body stack as the fallback so Source Sans never hangs
       the render on the first paint if the Google Fonts request stalls. */
    --br-font-display: 'Exo', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --br-font-body: 'Source Sans 3', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

    position: relative;
    min-height: 100vh;
    width: 100%;

    color: var(--br-text);
    background-color: transparent;
    background-image: none;
    z-index: 1;

    font-family: var(--br-font-body);
    line-height: 1.5;
    isolation: isolate;
}

/* Marketing-only display typography. Limited to a handful of selectors so
   the brochure carries the brand without smearing Exo across body text. */
.brochure-shell .brochure-eyebrow,
.brochure-shell .brochure-hero h1,
.brochure-shell .brochure-section-head h2,
.brochure-shell .brochure-cta-band h2,
.brochure-shell .brochure-feature h3,
.brochure-shell .brochure-step h3 {
    font-family: var(--br-font-display);
    letter-spacing: 0.005em;
}

/* Reset the global main rule (background, height, overflow) for the <main>
   element that's nested inside the brochure shell. Without this the shell's
   semantic <main> would inherit the admin app's full-viewport main chrome. */
.brochure-shell main {
    background: transparent;
    height: auto;
    overflow: visible;
    flex: initial;
}

/* Text-color cascade inside the shell. */
.brochure-shell h1,
.brochure-shell h2,
.brochure-shell h3,
.brochure-shell h4,
.brochure-shell p,
.brochure-shell li,
.brochure-shell span,
.brochure-shell a { color: inherit; }
.brochure-shell h1,
.brochure-shell h2,
.brochure-shell h3,
.brochure-shell h4 { color: var(--br-text); }

/* ── Nav ───────────────────────────────────────────────────────────────── */

.brochure-shell .brochure-nav {
    position: sticky; top: 0; z-index: 50;
    background: rgba(10, 13, 20, 0.72);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);

    display: flex; align-items: center; justify-content: space-between;
    padding: 1rem max(2.5rem, calc((100vw - 1280px) / 2 + 2.5rem));
}
.brochure-shell .brochure-brand { height: 32px; width: auto; display: block; }
.brochure-shell .brochure-brand-link { display: inline-flex; align-items: center; }

.brochure-shell .brochure-nav-links { display: flex; gap: 1.75rem; align-items: center; }
.brochure-shell .brochure-nav-links a {
    color: var(--br-text);
    text-decoration: none;
    font-weight: 500;
    font-size: 0.9rem;
    opacity: 0.85;
    transition: opacity 0.15s, color 0.15s;
}
.brochure-shell .brochure-nav-links a:hover { opacity: 1; color: var(--br-accent); }

.brochure-shell .brochure-cta-secondary {
    padding: 0.5rem 1.1rem;
    background: var(--br-accent);
    color: #1a1f2e;
    border-radius: 999px;
    font-weight: 700;
    font-size: 0.85rem;
    opacity: 1;
    transition: transform 0.15s, box-shadow 0.15s;
}
.brochure-shell .brochure-cta-secondary:hover { color: #1a1f2e; transform: translateY(-1px); box-shadow: 0 6px 18px rgba(150, 201, 62, 0.35); }

/* ── Hero ──────────────────────────────────────────────────────────────── */

.brochure-shell .brochure-hero {
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    gap: 4rem;
    padding: 3.5rem 2.5rem 5rem;
    max-width: 1280px;
    width: 100%;
    margin: 0 auto;
    align-items: center;
}

.brochure-shell .brochure-hero-text {
    max-width: 600px;
    background: rgba(15, 23, 42, 0.48);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 24px;
    padding: 2rem 2.25rem;
}

.brochure-shell .brochure-hero-visual {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
}

.brochure-shell .brochure-hero-logo {
    display: block;
    width: clamp(240px, 30vw, 360px);
    height: auto;
    margin: 0 auto;
    filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.45));
}

.brochure-shell .brochure-eyebrow {
    display: inline-block;
    font-size: 0.9rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--br-accent);
    padding: 0.5rem 1rem !important;
    background: var(--br-accent-dim);
    border-radius: 999px;
    margin-bottom: 1.5rem;
}
.brochure-shell .brochure-eyebrow-purple { 
    background: var(--br-purple-dim) !important;
    color: var(--br-purple) !important;
    margin-bottom: 1.5rem;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}

.brochure-shell .brochure-eyebrow-green {
    background: var(--br-green-dim) !important;
    margin-bottom: 1.5rem;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}

.brochure-shell .brochure-eyebrow-orange {
    background: var(--br-orange-dim) !important;
    color: var(--br-orange) !important;
    margin-bottom: 1.5rem;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}

.brochure-shell .brochure-eyebrow-blue {
    background: var(--br-blue-dim) !important;
    color: var(--br-blue) !important;
    margin-bottom: 1.5rem;
}

.brochure-shell .brochure-hero h1 {
    font-size: clamp(2.5rem, 4.5vw, 3.6rem);
    line-height: 1.05;
    margin: 0 0 1.5rem 0;
    font-weight: 800;
    letter-spacing: -0.02em;
}
.brochure-shell .brochure-headline-accent {
    display: block;
}

.brochure-shell .brochure-lede {
    font-size: 1.1rem;
    color: var(--br-text-muted);
    line-height: 1.6;
    margin: 0 0 2rem 0;
    max-width: 540px;
}

.brochure-shell .brochure-cta-row { display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; }
.brochure-shell .brochure-cta-primary {
    display: inline-flex; align-items: center; gap: 0.5rem;
    padding: 0.9rem 1.6rem;
    background: var(--br-accent);
    color: #1a1f2e;
    border-radius: 999px;
    font-weight: 700;
    font-size: 0.95rem;
    text-decoration: none;
    transition: transform 0.15s, box-shadow 0.15s;
    box-shadow: 0 4px 14px rgba(150, 201, 62, 0.25);
}
.brochure-shell .brochure-cta-primary:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(150, 201, 62, 0.4); color: #1a1f2e; }

.brochure-shell .brochure-cta-ghost {
    display: inline-flex; align-items: center; gap: 0.4rem;
    padding: 0.9rem 1.4rem;
    background: transparent;
    color: var(--br-text);
    border: 1.5px solid rgba(255, 255, 255, 0.15);
    border-radius: 999px;
    font-weight: 600;
    font-size: 0.9rem;
    text-decoration: none;
    transition: border-color 0.15s, color 0.15s, transform 0.15s;
}
.brochure-shell .brochure-cta-ghost:hover { border-color: var(--br-accent); color: var(--br-accent); transform: translateY(-1px); }

/* ── Hero product image (photo-realistic Quest tablet) ─────────────────
   Replaced the CSS/SVG-rendered .brochure-device with the actual product
   photo (Quest_Device_Bumper_Portal_p-800.png). The wrap keeps the same
   orange radial halo as the SVG had so the lighting still feels native to
   the brochure canvas. The CSS-rendered tablet styles below are kept for
   any future revival on another section. */
.brochure-shell .brochure-hero-product-wrap {
    position: relative;
    display: flex; align-items: center; justify-content: center;
    padding: 0.5rem 1rem;
}
.brochure-shell .brochure-hero-product {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: min(520px, calc(100vw - 5rem));
    height: auto;
    object-fit: contain;
    filter: drop-shadow(0 30px 60px rgba(0, 0, 0, 0.55))
            drop-shadow(0 4px 12px rgba(247, 106, 12, 0.25));
    animation: brochure-device-float 6s ease-in-out infinite;
}

/* ── Hero device illustration (CSS-rendered, currently unused) ────────── */

.brochure-shell .brochure-device {
    position: relative;
    display: flex; align-items: center; justify-content: center;
    perspective: 1500px;
    padding: 1rem;
}
.brochure-shell .brochure-device-glow {
    position: absolute;
    inset: 8% 4%;
    background:
        radial-gradient(closest-side at 30% 50%, rgba(247, 106, 12, 0.32), transparent 70%),
        radial-gradient(closest-side at 70% 50%, rgba(247, 106, 12, 0.18), transparent 70%);
    filter: blur(48px);
    z-index: 0;
}

.brochure-shell .brochure-device-frame {
    position: relative; z-index: 1;
    width: 100%;
    max-width: min(480px, calc(100vw - 5rem));
    aspect-ratio: 16 / 9;
    background: linear-gradient(155deg, var(--br-orange) 0%, var(--br-orange-deep) 100%);
    border-radius: 28px;
    padding: 14px;
    box-shadow:
        0 30px 60px rgba(0, 0, 0, 0.55),
        0 4px 12px rgba(247, 106, 12, 0.25),
        0 0 0 1px rgba(255, 255, 255, 0.06) inset,
        0 -3px 0 rgba(0, 0, 0, 0.15) inset;
    transform: rotateY(-4deg) rotateX(1deg);
    transform-style: preserve-3d;
    backface-visibility: hidden;
    will-change: transform;
    animation: brochure-device-float 6s ease-in-out infinite;
}

.brochure-shell .brochure-device-frame::before {
    content: "";
    position: absolute; left: 18%; right: 18%; top: 3px; height: 2px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.25), transparent);
    border-radius: 999px;
    pointer-events: none;
}

.brochure-shell .brochure-device-bezel {
    width: 100%; height: 100%;
    background: #06080d;
    border-radius: 14px;
    padding: 4px;
    box-shadow:
        0 0 0 1px rgba(0, 0, 0, 0.6) inset,
        0 1px 0 rgba(255, 255, 255, 0.03) inset;
}

@keyframes brochure-device-float {
    0%, 100% { transform: rotateY(-4deg) rotateX(1deg) translateY(0); }
    50%      { transform: rotateY(-4deg) rotateX(1deg) translateY(-10px); }
}
@media (prefers-reduced-motion: reduce) {
    .brochure-shell .brochure-device-frame { animation: none; }
}

.brochure-shell .brochure-device-stack {
    position: relative;
    width: 100%;
    max-width: min(480px, calc(100vw - 5rem));
    z-index: 1;
}
.brochure-shell .brochure-device-stack .brochure-device-frame {
    max-width: none;
}

.brochure-shell .brochure-device-antenna {
    position: absolute;
    z-index: 0;
    top: -16px;
    right: 16%;
    width: 6px;
    height: 44px;
    background: linear-gradient(180deg, #2c2c2c 0%, #0a0a0a 55%, #1a1a1a 100%);
    border-radius: 3px 3px 1px 1px;
    transform: rotate(45deg);
    transform-origin: 50% 100%;
    box-shadow:
        0 3px 6px rgba(0, 0, 0, 0.55),
        0 0 0 1px rgba(0, 0, 0, 0.4) inset;
}
.brochure-shell .brochure-device-antenna::after {
    content: "";
    position: absolute;
    top: -3px;
    left: 50%;
    width: 9px; height: 9px;
    border-radius: 50%;
    background: #1c1c1c;
    transform: translateX(-50%);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}

.brochure-shell .brochure-device-screen {
    width: 100%; height: 100%;
    background: linear-gradient(160deg, #0d1117 0%, #161a25 100%);
    border-radius: 6px;
    padding: 14px;
    display: flex; flex-direction: column; gap: 10px;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.04) inset;
    overflow: hidden;
    position: relative;
}

.brochure-shell .brochure-device-screen::after {
    content: "";
    position: absolute; inset: 0;
    background: linear-gradient(125deg, rgba(255, 255, 255, 0.06) 0%, transparent 35%, transparent 65%, rgba(255, 255, 255, 0.03) 100%);
    pointer-events: none;
}

.brochure-shell .brochure-device-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: 8px;
    flex: 1;
    min-height: 0;
}

/* When the device screen hosts the Launchpad Quest tagline image (instead of the
   8-tile subject icon grid) we let it fill the available space while preserving
   aspect ratio. `flex: 1` consumes the column inside .brochure-device-screen
   (which is display: flex; flex-direction: column;) so the logo expands to the
   available room rather than collapsing to its intrinsic size. */
.brochure-shell .brochure-device-screen-logo {
    flex: 1;
    width: 100%;
    height: auto;
    max-height: 100%;
    object-fit: contain;
    align-self: center;
    pointer-events: none;
    -webkit-user-drag: none;
}
.brochure-shell .brochure-device-tile {
    display: flex; align-items: center; justify-content: center;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.03);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.03) inset, 0 2px 4px rgba(0, 0, 0, 0.25);
    min-width: 0; min-height: 0;
    overflow: hidden;
    padding: 2px;
}
.brochure-shell .brochure-device-tile img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    pointer-events: none;
    -webkit-user-drag: none;
}

/* ── Spec strip ────────────────────────────────────────────────────────── */

.brochure-shell .brochure-spec-strip {
    background: rgba(15, 23, 42, 0.5);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 20px;
    padding: 2rem 2.5rem 1.5rem;
    max-width: 1280px; margin: 0 auto;
}

.brochure-shell .brochure-spec-grid {
    list-style: none; padding: 0; margin: 0 0 1.25rem;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem 2rem;
}
.brochure-shell .brochure-spec-grid li {
    display: flex; flex-direction: column; gap: 0.2rem;
    padding-left: 1rem;
    border-left: 3px solid var(--br-accent);
}
.brochure-shell .brochure-spec-grid strong {
    font-size: 1.4rem; font-weight: 800; color: var(--br-text);
    letter-spacing: -0.01em;
}
.brochure-shell .brochure-spec-grid span {
    font-size: 0.78rem; color: var(--br-text-muted);
    text-transform: uppercase; letter-spacing: 0.06em;
}

.brochure-shell .brochure-spec-attribution {
    display: flex; align-items: center; justify-content: space-between;
    gap: 1.5rem; flex-wrap: wrap;
    padding-top: 1.25rem;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.brochure-shell .brochure-trust-label {
    font-size: 0.78rem; color: var(--br-text-muted);
    text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600;
}

.brochure-shell .brochure-trust-by {
    display: flex; align-items: center; gap: 0.85rem;
    flex: 0 0 auto;
}
.brochure-shell .brochure-trust-by-label {
    font-size: 0.72rem; color: var(--br-text-muted);
    text-transform: uppercase; letter-spacing: 0.1em; font-weight: 600;
}

.brochure-shell .brochure-trust-by-products {
    list-style: none; margin: 0; padding: 0;
    display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap;
}
.brochure-shell .brochure-trust-by-products li {
    display: flex; align-items: center; gap: 0.6rem;
}
.brochure-shell .brochure-trust-by-products li + li::before {
    content: "";
    width: 3px; height: 3px; border-radius: 50%;
    background: rgba(255, 255, 255, 0.25);
    display: inline-block;
}
.brochure-shell .brochure-trust-by-products a {
    color: var(--br-text);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.85rem;
    letter-spacing: 0.01em;
    transition: color 0.15s ease;
}
.brochure-shell .brochure-trust-by-products a:hover {
    color: var(--br-accent);
}

/* ── Generic section ───────────────────────────────────────────────────── */

.brochure-shell .brochure-section {
    padding: 5rem 2.5rem;
    max-width: 1280px;
    margin: 0 auto;
}
.brochure-shell .brochure-section-alt {
    background: rgba(15, 23, 42, 0.40);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    max-width: none;
}
.brochure-shell .brochure-section-alt > * { max-width: 1280px; margin-left: auto; margin-right: auto; }

.brochure-shell .brochure-section-head { max-width: 680px; margin: 0 auto 3rem; text-align: center; }
.brochure-shell .brochure-section-head h2 {
    font-size: clamp(1.75rem, 3vw, 2.4rem);
    font-weight: 800;
    margin: 0.75rem 0 1rem 0;
    letter-spacing: -0.02em;
    color: var(--br-text);
}
.brochure-shell .brochure-section-head p {
    color: var(--br-text-muted); font-size: 1.05rem; line-height: 1.6; margin: 0;
}

/* ── Feature grid ──────────────────────────────────────────────────────── */

.brochure-shell .brochure-feature-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
}
.brochure-shell .brochure-feature {
    background: var(--br-card-bg);
    backdrop-filter: blur(8px);
    border: 1px solid var(--br-card-border);
    border-radius: 16px;
    padding: 1.75rem;
    transition: transform 0.2s, border-color 0.2s, background 0.2s;
}
.brochure-shell .brochure-feature:hover {
    transform: translateY(-3px);
    border-color: var(--br-card-border-hi);
    background: rgba(26, 31, 46, 0.85);
}
.brochure-shell .brochure-feature h3 { font-size: 1.1rem; margin: 0.9rem 0 0.5rem; font-weight: 700; color: var(--br-text); }
.brochure-shell .brochure-feature p { color: var(--br-text-muted); margin: 0; font-size: 0.92rem; line-height: 1.55; }
.brochure-shell .brochure-feature-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px;
    border-radius: 12px;
    background: var(--br-accent-dim);
    color: var(--br-accent);
    overflow: hidden;
}
.brochure-shell .brochure-feature:nth-child(2) .brochure-feature-icon,
.brochure-shell .brochure-feature:nth-child(5) .brochure-feature-icon {
    background: var(--br-purple-dim); color: var(--br-purple);
}

.brochure-shell .brochure-feature-icon-img {
    background: transparent;
    padding: 0;
}
.brochure-shell .brochure-feature-icon-img img {
    width: 100%; height: 100%; object-fit: contain;
    pointer-events: none; -webkit-user-drag: none;
}

/* ── How-it-works steps ────────────────────────────────────────────────── */

.brochure-shell .brochure-steps {
    list-style: none; padding: 0;
    margin: 0 auto;
    max-width: 1080px;
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem;
    counter-reset: step;
}
.brochure-shell .brochure-step {
    position: relative;
    background: var(--br-card-bg);
    backdrop-filter: blur(8px);
    border: 1px solid var(--br-card-border);
    border-radius: 16px;
    padding: 2rem 1.75rem 1.75rem;
}
.brochure-shell .brochure-step-num {
    position: absolute; top: -16px; left: 1.5rem;
    width: 36px; height: 36px;
    border-radius: 50%;
    background: var(--br-accent);
    color: #1a1f2e;
    font-weight: 800;
    font-size: 1rem;
    display: inline-flex; align-items: center; justify-content: center;
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.3);
}
.brochure-shell .brochure-step h3 { font-size: 1.15rem; font-weight: 700; margin: 0.5rem 0 0.6rem; color: var(--br-text); }
.brochure-shell .brochure-step p { color: var(--br-text-muted); font-size: 0.92rem; line-height: 1.55; margin: 0; }

/* ── Customer testimonial ──────────────────────────────────────────────── */

.brochure-shell .brochure-testimonial {
    padding: 4rem 2.5rem;
    max-width: 1280px; margin: 0 auto;
}
.brochure-shell .brochure-quote {
    max-width: 820px; margin: 0 auto;
    padding: 2.5rem 2.5rem 2rem;
    background: rgba(15, 23, 42, 0.55);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    text-align: left;
    position: relative;
}
.brochure-shell .brochure-quote-mark {
    color: var(--br-purple);
    opacity: 0.45;
    margin-bottom: 0.5rem;
    display: block;
}
.brochure-shell .brochure-quote blockquote {
    font-size: clamp(1.1rem, 1.8vw, 1.4rem);
    line-height: 1.55;
    color: var(--br-text);
    margin: 0 0 1.5rem 0;
    font-weight: 500;
    font-style: italic;
}
.brochure-shell .brochure-quote figcaption {
    display: flex; flex-direction: column; gap: 0.15rem;
    font-size: 0.9rem;
    color: var(--br-text-muted);
}
.brochure-shell .brochure-quote figcaption strong {
    color: var(--br-text);
    font-weight: 700;
    font-size: 0.95rem;
    letter-spacing: 0.01em;
}

/* ── Closing CTA band ──────────────────────────────────────────────────── */

.brochure-shell .brochure-cta-band {
    padding: 5rem 2.5rem;
}
.brochure-shell .brochure-cta-band-inner {
    max-width: 880px; margin: 0 auto;
    text-align: center;
    background: rgba(15, 23, 42, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.06);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border-radius: 24px;
    padding: 3rem 2rem;
    position: relative;
}
.brochure-shell .brochure-cta-band-inner > * { position: relative; }
.brochure-shell .brochure-cta-band-inner h2 {
    font-size: clamp(1.6rem, 3vw, 2.2rem);
    font-weight: 800;
    margin: 0 0 1rem 0;
    letter-spacing: -0.02em;
}
.brochure-shell .brochure-cta-band-inner p { color: var(--br-text-muted); font-size: 1.05rem; margin: 0 0 2rem 0; }
.brochure-shell .brochure-cta-band-inner .brochure-cta-row { justify-content: center; }

/* ── Footer ────────────────────────────────────────────────────────────── */

.brochure-shell .brochure-footer {
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.35) 100%);
    margin-top: 3rem;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}
.brochure-shell .brochure-footer-inner {
    max-width: 1280px; margin: 0 auto;
    padding: 4rem 2.5rem 1.75rem;
}

.brochure-shell .brochure-footer-top {
    /* 3-column layout: brand (wider) | For customers | Company.
       Previously this was a 2-col grid (brand vs. a nested 2-col cols wrapper)
       which left a large dead zone between the brand and the link columns.
       `.brochure-footer-cols` now uses display: contents so its two <div> children
       participate directly in this parent grid and sit evenly distributed. */
    display: grid;
    grid-template-columns: 1.8fr 1fr 1fr;
    gap: 3rem;
    padding-bottom: 3rem;
    align-items: start;
}

.brochure-shell .brochure-footer-brand img { height: 36px; margin-bottom: 1rem; display: block; }
.brochure-shell .brochure-footer-logo { height: 40px; }
.brochure-shell .brochure-footer-brand p {
    color: var(--br-text-muted);
    font-size: 0.9rem; line-height: 1.6; margin: 0 0 1.5rem 0;
    max-width: 340px;
}
.brochure-shell .brochure-footer-social { display: flex; gap: 0.6rem; }
.brochure-shell .brochure-footer-social a {
    display: inline-flex; align-items: center; justify-content: center;
    width: 36px; height: 36px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: var(--br-text-muted);
    transition: color 0.15s, background 0.15s, border-color 0.15s, transform 0.15s;
}
.brochure-shell .brochure-footer-social a:hover {
    color: var(--br-accent);
    border-color: var(--br-card-border-hi);
    background: var(--br-accent-dim);
    transform: translateY(-1px);
}

.brochure-shell .brochure-footer-cols {
    /* `display: contents` lets the two child columns participate directly in the
       parent .brochure-footer-top grid -- producing a single, evenly-distributed
       3-column footer instead of a brand + bunched-up cols-with-gap arrangement. */
    display: contents;
}
.brochure-shell .brochure-footer-col { display: flex; flex-direction: column; gap: 0.7rem; }
.brochure-shell .brochure-footer-col h4 {
    font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em;
    color: var(--br-text); margin: 0 0 0.6rem 0;
}
.brochure-shell .brochure-footer-col a {
    color: var(--br-text-muted);
    text-decoration: none;
    font-size: 0.88rem;
    transition: color 0.15s;
}
.brochure-shell .brochure-footer-col a:hover { color: var(--br-accent); }

.brochure-shell .brochure-footer-base {
    display: flex; justify-content: space-between; align-items: center;
    gap: 1rem; flex-wrap: wrap;
    font-size: 0.78rem;
    color: var(--br-text-dim);
}
.brochure-shell .brochure-footer-base-meta {
    display: inline-flex; align-items: center; gap: 0.75rem;
}
.brochure-shell .brochure-footer-dot {
    width: 3px; height: 3px; border-radius: 50%;
    background: var(--br-text-dim);
    display: inline-block;
}

/* ── GetStarted layout (used by /get-started) ──────────────────────────── */

.brochure-shell .brochure-get-started {
    max-width: 720px;
    margin: 3rem auto;
    text-align: center;
    padding: 0 1.5rem;
}
.brochure-shell .brochure-get-started h1 { font-size: 1.9rem; margin: 0.5rem 0 1rem 0; color: var(--br-text); }
.brochure-shell .brochure-card-emoji { font-size: 3rem; color: var(--br-accent); }

.brochure-shell .brochure-paths {
    display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem;
    margin: 2rem 0;
}
.brochure-shell .brochure-path {
    background: var(--br-card-bg);
    border: 1px solid var(--br-card-border);
    border-radius: 16px;
    padding: 1.5rem;
    text-decoration: none;
    color: var(--br-text);
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    cursor: pointer;
    transition: transform 0.15s, border-color 0.15s;
    text-align: left;
}
.brochure-shell .brochure-path:hover { transform: translateY(-2px); border-color: var(--br-card-border-hi); }
.brochure-shell .brochure-path-button { background: var(--br-card-bg); }
.brochure-shell .brochure-path-icon { color: var(--br-accent); }
.brochure-shell .brochure-path h3 { margin: 0; font-size: 1.05rem; color: var(--br-text); }
.brochure-shell .brochure-path p { margin: 0; color: var(--br-text-muted); font-size: 0.875rem; line-height: 1.45; }
.brochure-shell .brochure-path-cta { margin-top: auto; color: var(--br-accent); font-weight: 600; font-size: 0.875rem; }

.brochure-shell .brochure-help-card {
    background: var(--br-card-bg);
    border: 1px solid var(--br-card-border);
    border-radius: 16px;
    padding: 1.5rem;
    text-align: left;
}
.brochure-shell .brochure-help-card h2 { margin: 0 0 0.75rem 0; font-size: 1.1rem; color: var(--br-text); }
.brochure-shell .brochure-help-card ol { padding-left: 1.25rem; line-height: 1.6; color: var(--br-text-muted); }

/* (Legacy) -- previously held the Playaway-Products lockup graphic. Kept
   here so old screenshots / docs that reference this selector aren't broken,
   but it's no longer applied. */
.brochure-shell .brochure-trust-by-logo {
    height: 30px; width: auto; display: block;
    padding: 6px 10px;
    background: rgba(255, 255, 255, 0.92);
    border-radius: 6px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
    transition: transform 0.15s ease;
}
.brochure-shell .brochure-trust-by a:hover .brochure-trust-by-logo { transform: translateY(-1px); }

/* ── Responsive ────────────────────────────────────────────────────────── */

@media (max-width: 1100px) {
    .brochure-shell .brochure-hero { grid-template-columns: 1fr; padding: 2.5rem 1.5rem 3.5rem; gap: 3rem; text-align: left; }
    .brochure-shell .brochure-feature-grid,
    .brochure-shell .brochure-steps,
    /* Tablet: brand spans the full row above the two link columns. The link cols
       fall through `display: contents` and form the second row evenly. */
    .brochure-shell .brochure-footer-top { grid-template-columns: 1fr 1fr; gap: 2.5rem; }
    .brochure-shell .brochure-footer-brand { grid-column: 1 / -1; }
    .brochure-shell .brochure-device-frame { width: 100%; max-width: min(520px, calc(100vw - 3rem)); }
    .brochure-shell .brochure-device-stack { max-width: min(520px, calc(100vw - 3rem)); }
}
@media (max-width: 700px) {
    .brochure-shell .brochure-nav { padding: 1rem 1.25rem; }
    .brochure-shell .brochure-nav-links { gap: 0.85rem; }
    .brochure-shell .brochure-nav-links a:not(.brochure-cta-secondary) { display: none; }
    .brochure-shell .brochure-hero { padding: 2rem 1.25rem 3rem; }
    .brochure-shell .brochure-section { padding: 3.5rem 1.25rem; }
    .brochure-shell .brochure-section-head { margin-bottom: 2rem; }
    .brochure-shell .brochure-feature-grid,
    .brochure-shell .brochure-steps,
    /* Phone: stack everything so each link column lives on its own row below the brand. */
    .brochure-shell .brochure-footer-top { grid-template-columns: 1fr; }
    .brochure-shell .brochure-footer-brand { grid-column: auto; }
    .brochure-shell .brochure-spec-strip { padding: 1.5rem 1.25rem 1rem; border-radius: 16px; }
    .brochure-shell .brochure-spec-grid { grid-template-columns: 1fr; gap: 1rem; }
    .brochure-shell .brochure-spec-grid strong { font-size: 1.15rem; }
    .brochure-shell .brochure-spec-attribution { flex-direction: column; align-items: flex-start; gap: 0.75rem; }
    .brochure-shell .brochure-cta-band-inner { padding: 2rem 1.25rem; }
    .brochure-shell .brochure-device-frame { width: 100%; max-width: min(380px, calc(100vw - 2.5rem)); }
    .brochure-shell .brochure-device-stack { max-width: min(380px, calc(100vw - 2.5rem)); }
    .brochure-shell .brochure-footer-inner { padding: 3rem 1.25rem 1.5rem; }
    .brochure-shell .brochure-paths { grid-template-columns: 1fr; }
}

/* ════════════════════════════════════════════════════════════════════════
   Browse-catalog section
   Lives in the brochure (anonymous) and renders three live tabs over the
   /api/public/catalog payload. Tab strip + grid + per-item card share the
   brochure surface tokens (glass card, accent green, purple eyebrow).
   ════════════════════════════════════════════════════════════════════════ */
.brochure-shell .brochure-catalog-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0 0 1.5rem;
    padding: 0.35rem;
    background: var(--br-card-bg);
    border: 1px solid var(--br-card-border);
    border-radius: 14px;
    width: max-content;
    max-width: 100%;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
    margin-bottom: 1rem;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}
.brochure-shell .brochure-catalog-tab {
    appearance: none;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.55rem 1.1rem;
    background: transparent;
    border: none;
    border-radius: 10px;
    color: var(--br-text-muted);
    font-weight: 600;
    font-size: 0.875rem;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}
.brochure-shell .brochure-catalog-tab:hover { color: var(--br-text); }
.brochure-shell .brochure-catalog-tab.is-active {
    background: var(--br-accent-dim);
    color: var(--br-text);
    box-shadow: inset 0 0 0 1px var(--br-card-border-hi);
}
.brochure-shell .brochure-catalog-tab-count {
    display: inline-block;
    padding: 0.05rem 0.5rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.06);
    color: var(--br-text-muted);
    font-size: 0.72rem;
    font-weight: 700;
}
.brochure-shell .brochure-catalog-tab.is-active .brochure-catalog-tab-count {
    background: var(--br-accent);
    color: #0a0d14;
}

.brochure-shell .brochure-catalog-empty {
    padding: 2rem 1rem;
    text-align: center;
    color: var(--br-text-muted);
    background: var(--br-card-bg);
    border: 1px dashed var(--br-card-border);
    border-radius: 14px;
}

.brochure-shell .brochure-catalog-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.25rem;
}
.brochure-shell .brochure-catalog-card {
    display: flex;
    flex-direction: column;
    background: var(--br-card-bg);
    border: 1px solid var(--br-card-border);
    border-radius: 16px;
    overflow: hidden;
    transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
    padding: 0 !important;
    margin-top: 1.5rem !important;
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
}
.brochure-shell .brochure-catalog-card:hover {
    transform: translateY(-2px);
    border-color: var(--br-card-border-hi);
    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.35);
}
.brochure-shell .brochure-catalog-card-thumb {
    aspect-ratio: 16 / 9;
    background: rgba(255, 255, 255, 0.04);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.brochure-shell .brochure-catalog-card-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
/* Icon-style thumbs (no cover photo, just a transparent PNG mark) get a neutral
   inset background instead of the previous green tint -- the icon itself carries
   plenty of color and the green band was visually loud against the card body. */
.brochure-shell .brochure-catalog-card-thumb-mark {
    background: rgba(255, 255, 255, 0.03);
    padding: 1rem;
}
.brochure-shell .brochure-catalog-card-thumb-mark img {
    width: auto;
    height: 100%;
    object-fit: contain;
}

/* Horizontal layout modifier -- used by Base Set cards so the 50/100/Quest-mark
   icon sits LEFT of the copy at a compact size, instead of dominating the card
   at full 16:9 width. Side Quest cards keep the default stacked layout because
   their themed icons read better at a larger size. */
.brochure-shell .brochure-catalog-card.brochure-catalog-card-horizontal {
    flex-direction: row;
    align-items: stretch;
}
.brochure-shell .brochure-catalog-card-horizontal .brochure-catalog-card-thumb {
    aspect-ratio: auto;
    width: 110px;
    flex-shrink: 0;
    padding: 0.75rem;
}
.brochure-shell .brochure-catalog-card-horizontal .brochure-catalog-card-thumb img {
    width: 100%;
    height: 100%;
    max-height: 88px;
    object-fit: contain;
}
.brochure-shell .brochure-catalog-card-horizontal .brochure-catalog-card-body {
    padding: 0.85rem 1.1rem 1rem;
}

/* Phones: stack the horizontal card back to vertical so the icon doesn't squeeze
   the text column. The narrow width is fine on desktop but becomes cramped under
   ~480px. */
@media (max-width: 480px) {
    .brochure-shell .brochure-catalog-card.brochure-catalog-card-horizontal {
        flex-direction: column;
    }
    .brochure-shell .brochure-catalog-card-horizontal .brochure-catalog-card-thumb {
        aspect-ratio: 16 / 9;
        width: 100%;
    }
    .brochure-shell .brochure-catalog-card-horizontal .brochure-catalog-card-thumb img {
        max-height: none;
    }
}
.brochure-shell .brochure-catalog-card-body {
    padding: 1rem 1.15rem 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    flex: 1;
}
.brochure-shell .brochure-catalog-card-body h3 {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
}
.brochure-shell .brochure-catalog-card-meta {
    font-size: 0.78rem;
    color: var(--br-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 600;
}
.brochure-shell .brochure-catalog-card-body p {
    margin: 0;
    color: var(--br-text-muted);
    font-size: 0.875rem;
    line-height: 1.5;
}
.brochure-shell .brochure-catalog-card-cta {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--br-accent);
    text-decoration: none;
    transition: color 0.15s;
}
.brochure-shell .brochure-catalog-card-cta:hover { color: var(--br-text); }

/* Card actions row -- holds the "See the X apps" pill (primary CTA, pivots the
   tab to a filtered Apps view) and the "View on shop" text link. Anchored to
   the bottom of the body so cards with varying description lengths still line
   up their CTAs along a common baseline. */
.brochure-shell .brochure-catalog-card-actions {
    margin-top: auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem 1rem;
    padding-top: 0.35rem;
}

.brochure-shell .brochure-catalog-card-pill {
    appearance: none;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.4rem 0.85rem;
    border-radius: 999px;
    background: var(--br-accent-dim, rgba(150, 201, 62, 0.18));
    border: 1px solid rgba(150, 201, 62, 0.4);
    color: var(--br-accent, #96C93E);
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s, transform 0.15s;
    font-family: inherit;
}

.brochure-shell .brochure-catalog-card-pill:hover,
.brochure-shell .brochure-catalog-card-pill:focus-visible {
    background: rgba(150, 201, 62, 0.28);
    border-color: rgba(150, 201, 62, 0.6);
    color: #d1f2a4;
    transform: translateY(-1px);
    outline: none;
}

/* Pack filter chip in the Apps tab -- shows the active pack-membership filter
   so the user always knows why they're seeing a smaller slice of apps, with a
   clear (X) affordance. */
.brochure-shell .brochure-catalog-pack-chip {
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.25rem 0.25rem 0.25rem 0.75rem;
    border-radius: 999px;
    background: rgba(150, 201, 62, 0.15);
    border: 1px solid rgba(150, 201, 62, 0.4);
    color: var(--br-text);
    font-size: 0.8rem;
}

.brochure-shell .brochure-catalog-pack-chip strong {
    font-weight: 700;
    color: var(--br-accent, #96C93E);
}

.brochure-shell .brochure-catalog-pack-chip-close {
    appearance: none;
    border: none;
    background: rgba(255, 255, 255, 0.08);
    color: var(--br-text);
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
    transition: background 0.12s;
}

.brochure-shell .brochure-catalog-pack-chip-close:hover,
.brochure-shell .brochure-catalog-pack-chip-close:focus-visible {
    background: rgba(255, 255, 255, 0.18);
    outline: none;
}

/* Apps tab: filter strip + denser app grid that doesn't try to fill the
   width with the same large cards as the pack tabs. */
.brochure-shell .brochure-catalog-filters {
    /* `position: relative; z-index: ...` raises this row above the app grid that
       follows, so the BrochureSelect popup (absolutely positioned to its trigger)
       can naturally stack above the cards. We deliberately do NOT use
       backdrop-filter here -- that would create a NEW stacking context which
       traps the menu inside the row, and cards (later in DOM order) end up
       painting over the dropdown. */
    position: relative;
    z-index: 20;
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: center;
    margin: 0 auto;
    margin-bottom: 2.5rem;
    justify-content: center;
}
.brochure-shell .brochure-catalog-select {
    appearance: none;
    padding: 0.5rem 2.5rem 0.5rem 0.85rem;
    background: var(--br-card-bg) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%2394a3b8'><path d='M5 8l5 5 5-5z'/></svg>") no-repeat right 0.7rem center / 14px;
    border: 1px solid var(--br-card-border);
    border-radius: 10px;
    color: var(--br-text);
    font-size: 0.85rem;
    cursor: pointer;
}

/* ── BrochureSelect ──────────────────────────────────────────────────
   Custom single-select dropdown matched to the brochure dark-glass surface.
   The native <select> popup ignores theme styling, so we replace it with a
   trigger + popup that we can fully control. *
   ────────────────────────────────────────────────────────────────────── */
.brochure-shell .brochure-select {
    position: relative;
    display: inline-block;
    min-width: 160px;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}

.brochure-shell .brochure-select-trigger {
    appearance: none;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    padding: 0.5rem 0.85rem;
    background: var(--br-card-bg, rgba(15, 23, 42, 0.6));
    border: 1px solid var(--br-card-border, rgba(255, 255, 255, 0.1));
    border-radius: 10px;
    color: var(--br-text, #e2e8f0);
    font-size: 0.85rem;
    font-family: inherit;
    cursor: pointer;
    text-align: left;
    transition: border-color 0.15s, background 0.15s;
}

.brochure-shell .brochure-select-trigger:hover {
    border-color: var(--br-card-border-hi, rgba(255, 255, 255, 0.2));
    background: rgba(255, 255, 255, 0.05);
}

.brochure-shell .brochure-select-open .brochure-select-trigger {
    border-color: var(--quest-green, #96C93E);
    background: rgba(150, 201, 62, 0.08);
}

.brochure-shell .brochure-select-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.brochure-shell .brochure-select-caret {
    flex-shrink: 0;
    color: var(--br-text-muted, #94a3b8);
    transition: transform 0.15s, color 0.15s;
}

.brochure-shell .brochure-select-open .brochure-select-caret {
    transform: rotate(180deg);
    color: var(--quest-green, #96C93E);
}

/* Transparent full-viewport backdrop -- captures outside clicks to close the menu
   without blocking the rest of the page visually. */
.brochure-shell .brochure-select-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1900;
    background: transparent;
}

.brochure-shell .brochure-select-menu {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    min-width: 100%;
    max-width: 320px;
    max-height: 340px;
    overflow-y: auto;
    background: rgba(15, 23, 42, 0.96);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--br-card-border-hi, rgba(255, 255, 255, 0.18));
    border-radius: 12px;
    padding: 0.35rem;
    box-shadow: 0 14px 36px rgba(0, 0, 0, 0.5);
    z-index: 1901;
    display: flex;
    flex-direction: column;
    gap: 1px;
    animation: brochure-select-menu-in 0.12s ease-out;
}

@keyframes brochure-select-menu-in {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
}

.brochure-shell .brochure-select-option {
    appearance: none;
    background: none;
    border: none;
    color: var(--br-text, #e2e8f0);
    font-family: inherit;
    font-size: 0.85rem;
    text-align: left;
    padding: 0.5rem 0.75rem;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.1s, color 0.1s;
}

.brochure-shell .brochure-select-option:hover,
.brochure-shell .brochure-select-option:focus-visible {
    background: rgba(150, 201, 62, 0.12);
    color: #fff;
    outline: none;
}

.brochure-shell .brochure-select-option.is-selected {
    background: rgba(150, 201, 62, 0.2);
    color: var(--quest-green, #96C93E);
    font-weight: 600;
}
.brochure-shell .brochure-catalog-result-count {
    font-size: 0.8rem;
    color: var(--br-text-muted);
}

.brochure-shell .brochure-catalog-app-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 0.85rem;
}
.brochure-shell .brochure-catalog-app {
    display: grid;
    grid-template-columns: 48px 1fr;
    gap: 0.7rem;
    padding: 0.75rem 0.9rem;
    background: var(--br-card-bg);
    border: 1px solid var(--br-card-border);
    border-radius: 12px;
    transition: border-color 0.15s, transform 0.15s;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}
.brochure-shell .brochure-catalog-app:hover {
    border-color: var(--br-card-border-hi);
    transform: translateY(-1px);
}
.brochure-shell .brochure-catalog-app-icon {
    width: 48px;
    height: 48px;
    border-radius: 10px;
    object-fit: cover;
    background: rgba(255, 255, 255, 0.06);
}
.brochure-shell .brochure-catalog-app-icon-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    color: var(--br-text-muted);
}
.brochure-shell .brochure-catalog-app-body { min-width: 0; }
.brochure-shell .brochure-catalog-app-label {
    font-weight: 600;
    font-size: 0.9rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.brochure-shell .brochure-catalog-app-meta {
    display: flex;
    gap: 0.35rem;
    flex-wrap: wrap;
    font-size: 0.72rem;
    color: var(--br-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
    margin-top: 0.2rem;
}
.brochure-shell .brochure-catalog-app {
    cursor: pointer;
}

/* Reset the button element styling so the clickable card looks like a tile, not
   a default browser button. The whole card opens the app detail modal. */
.brochure-shell button.brochure-catalog-app {
    appearance: none;
    text-align: left;
    color: inherit;
    font: inherit;
    width: 100%;
}

.brochure-shell .brochure-catalog-app:focus-visible {
    outline: 2px solid var(--quest-green, #96C93E);
    outline-offset: 2px;
}

/* App category badges -- color-coded pill that replaces the previous plain text
   category label on the app tile. Each `.cat-badge-{slug}` is defined globally
   in app.css (un-scoped from .brochure-shell) so MyLicenses, Apps admin, and any
   other surface can use the same palette without duplicating the rules. */

/* App detail modal -- triggered by clicking a tile. Uses the brochure surface
   palette so it visually belongs to the marketing page, not the admin chrome. */
.brochure-shell .brochure-app-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(2, 6, 23, 0.75);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    animation: brochure-app-modal-in 0.18s ease-out;
}

@keyframes brochure-app-modal-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

.brochure-shell .brochure-app-modal {
    background: var(--br-card-bg);
    border: 1px solid var(--br-card-border-hi);
    border-radius: 18px;
    max-width: 560px;
    width: 100%;
    max-height: calc(100vh - 3rem);
    overflow-y: auto;
    padding: 1.5rem 1.5rem 1.75rem;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
    position: relative;
}

.brochure-shell .brochure-app-modal-close {
    position: absolute;
    top: 0.85rem;
    right: 0.85rem;
    appearance: none;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid var(--br-card-border);
    color: var(--br-text-muted);
    width: 32px;
    height: 32px;
    border-radius: 50%;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    line-height: 1;
    transition: color 0.15s, background 0.15s, border-color 0.15s;
}

.brochure-shell .brochure-app-modal-close:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.12);
    border-color: var(--br-card-border-hi);
}

.brochure-shell .brochure-app-modal-head {
    display: grid;
    grid-template-columns: 80px 1fr;
    gap: 1rem;
    align-items: center;
    margin-bottom: 1rem;
    padding-right: 2rem;
}

.brochure-shell .brochure-app-modal-icon {
    width: 80px;
    height: 80px;
    border-radius: 14px;
    object-fit: cover;
    background: rgba(255, 255, 255, 0.06);
}

.brochure-shell .brochure-app-modal-icon-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--br-text-muted);
}

.brochure-shell .brochure-app-modal-title {
    font-size: 1.25rem;
    font-weight: 700;
    margin: 0 0 0.35rem;
    color: var(--br-text);
}

.brochure-shell .brochure-app-modal-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 0.6rem;
    align-items: center;
    font-size: 0.75rem;
    color: var(--br-text-muted);
}

.brochure-shell .brochure-app-modal-desc {
    font-size: 0.92rem;
    line-height: 1.55;
    color: var(--br-text);
    margin: 0;
    white-space: pre-line;
}

.brochure-shell .brochure-app-modal-desc-empty {
    color: var(--br-text-muted);
    font-style: italic;
}

/* ════════════════════════════════════════════════════════════════════════
   Marketing launch video
   16:9 frame with a poster image that swaps to a YouTube iframe on click.
   We keep the YouTube player off the critical path so anonymous landing
   page loads stay snappy.
   ════════════════════════════════════════════════════════════════════════ */
.brochure-shell .brochure-video-section { padding-top: 0; }

/* Side-by-side video grid -- supports the two YouTube embeds (launch film +
   product spotlight) shown in the "See it in action" section. Stacks to a
   single column under 720px so the videos stay full-width on phones. */
.brochure-shell .brochure-video-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 1.25rem;
    max-width: 1280px;
    margin: 0 auto;
}

.brochure-shell .brochure-video-frame {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: 18px;
    overflow: hidden;
    background: #000;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
    border: 1px solid var(--br-card-border);
}

/* Optional caption rendered inside the poster button, fades up the bottom edge
   so the video title sits over a subtle gradient without obscuring the artwork. */
.brochure-shell .brochure-video-caption {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 1.5rem 1rem 0.85rem;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.85) 100%);
    color: #fff;
    font-size: 0.95rem;
    font-weight: 600;
    text-align: left;
    pointer-events: none;
}

/* "Watch on YouTube" escape-hatch pill -- always pinned to the top-right of every
   video frame so users have a way out when YouTube's player can't embed (Error 153,
   age-gating, region locks). Sits above both the poster button and the iframe via
   z-index. Uses a translucent dark background so it reads on any artwork without
   needing to know the poster's color.

   Designed to be subtle: small, low contrast, but immediately tappable when needed. */
.brochure-shell .brochure-video-fallback {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem 0.65rem;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.18);
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.72rem;
    font-weight: 600;
    text-decoration: none;
    line-height: 1;
    transition: background 0.12s, color 0.12s, border-color 0.12s, transform 0.12s;
}

.brochure-shell .brochure-video-fallback:hover,
.brochure-shell .brochure-video-fallback:focus-visible {
    background: #ff0033;
    border-color: #ff0033;
    color: #fff;
    outline: none;
    transform: translateY(-1px);
}

.brochure-shell .brochure-video-fallback svg {
    opacity: 0.8;
    flex-shrink: 0;
}
.brochure-shell .brochure-video-poster {
    appearance: none;
    position: absolute;
    inset: 0;
    padding: 0;
    border: 0;
    cursor: pointer;
    background: transparent;
}
.brochure-shell .brochure-video-poster img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}
.brochure-shell .brochure-video-poster:hover img { transform: scale(1.02); }
.brochure-shell .brochure-video-play {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.brochure-shell .brochure-video-play svg {
    width: 72px;
    height: 72px;
    color: white;
    padding: 1rem;
    background: rgba(247, 106, 12, 0.92);
    border-radius: 50%;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5);
    transition: transform 0.2s ease, background 0.2s ease;
}
.brochure-shell .brochure-video-poster:hover .brochure-video-play svg {
    transform: scale(1.08);
    background: var(--br-orange);
}
.brochure-shell .brochure-video-iframe {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}

@media (max-width: 700px) {
    .brochure-shell .brochure-catalog-tabs { width: 100%; }
    .brochure-shell .brochure-catalog-tab { flex: 1 1 0; justify-content: center; }
    .brochure-shell .brochure-video-play svg { width: 56px; height: 56px; padding: 0.75rem; }
}