/* ============================================================================
   Microframe Sports — PRODUCT LINES design system
   Immersive, premium, "product-launch" marketing pages.

   Scope: EVERYTHING is scoped under .pl-page so nothing here bleeds into the
   rest of the marketing site (which owns the .mk-* namespace). Two skins:
     .pl-omni   — OMNIBOARD  : sponsor-revenue story. Brand blue + a warm,
                  energetic amber/gold accent. Optimistic, money-in-the-bank.
     .pl-video  — VIDEOBOARDS : Studio OS broadcast platform. Cool, high-tech,
                  electric blue → cyan. Cinematic control-room feel.

   Type system (families already loaded by _MarketingLayout):
     'DM Serif Display'  — big editorial display headings (.pl-h1, section titles)
     'Chakra Petch'      — scoreboard / stat / spec numerals + eyebrows + labels
     'Plus Jakarta Sans' — body copy

   Brand tokens (per the shared contract):
     --mfs-primary #1e3065  --mfs-primary-dk #0d1d47  --mfs-secondary #2952a3
     --mfs-accent  #2f5dff  --mfs-accent-dk  #0f2ccf
   ========================================================================== */

/* ============================================================================
   1. ROOT SCOPE + DESIGN TOKENS
   ========================================================================== */
.pl-page {
    /* Brand anchors (shared contract) */
    --mfs-primary:    #1e3065;
    --mfs-primary-dk: #0d1d47;
    --mfs-secondary:  #2952a3;
    --mfs-accent:     #2f5dff;
    --mfs-accent-dk:  #0f2ccf;

    /* Cinematic dark base — deep navy graded almost to black. */
    --pl-bg:          #060a16;
    --pl-bg-2:        #0a1024;
    --pl-surface:     #0e1730;
    --pl-surface-2:   #131f3d;
    --pl-surface-3:   #182849;

    /* Glass / hairline system */
    --pl-glass:        rgba(18, 30, 60, 0.55);
    --pl-glass-2:      rgba(24, 40, 78, 0.42);
    --pl-glass-border: rgba(120, 150, 220, 0.18);
    --pl-hairline:     rgba(255, 255, 255, 0.08);
    --pl-hairline-2:   rgba(255, 255, 255, 0.045);

    /* Text ramp */
    --pl-ink:        #f3f7ff;   /* headings on dark */
    --pl-text:       #c4d2ee;   /* body */
    --pl-muted:      #8397be;   /* secondary body */
    --pl-faint:      #5f7099;   /* captions / footnotes */

    /* Accent system — overridden per skin below. Default = brand blue. */
    --pl-accent:      var(--mfs-accent);
    --pl-accent-2:    #6d8cff;
    --pl-accent-dk:   var(--mfs-accent-dk);
    --pl-accent-rgb:  47, 93, 255;
    --pl-accent-2-rgb: 109, 140, 255;
    /* Primary-button fill: a SINGLE-HUE gradient + matching ink per skin (no
       dual-tone clash). Overridden in each skin below. */
    --pl-btn-grad:    linear-gradient(120deg, #4b8bff 0%, #2f6bff 100%);
    --pl-btn-ink:     #ffffff;
    --pl-accent-ink:  #1e3a8f;   /* deep accent for small text on paper (skins override) */

    /* Layered radial "aurora" gradient for section backdrops */
    --pl-aurora:
        radial-gradient(1100px 620px at 78% -8%,  rgba(var(--pl-accent-rgb), 0.20), transparent 60%),
        radial-gradient(900px 520px at 8% 12%,    rgba(var(--pl-accent-2-rgb), 0.12), transparent 62%),
        radial-gradient(1200px 900px at 50% 118%, rgba(41, 82, 163, 0.16), transparent 60%);

    /* Glow presets */
    --pl-glow-accent: 0 0 0 1px rgba(var(--pl-accent-rgb), 0.35),
                      0 8px 30px rgba(var(--pl-accent-rgb), 0.35),
                      0 0 60px rgba(var(--pl-accent-rgb), 0.18);
    --pl-shadow-card: 0 1px 0 rgba(255,255,255,0.04) inset,
                      0 20px 50px rgba(0, 0, 0, 0.45);
    --pl-shadow-hi:   0 30px 80px rgba(0, 0, 0, 0.6);

    /* Geometry */
    --pl-radius:      18px;
    --pl-radius-sm:   12px;
    --pl-radius-lg:   26px;
    --pl-maxw:        1200px;
    --pl-gutter:      clamp(1.15rem, 4vw, 2.25rem);

    /* Fonts */
    --pl-font-display: 'DM Serif Display', Georgia, 'Times New Roman', serif;
    --pl-font-mono:    'Chakra Petch', 'Segoe UI', sans-serif;
    --pl-font-body:    'Plus Jakarta Sans', 'Helvetica Neue', Arial, sans-serif;

    /* Base look */
    position: relative;
    color: var(--pl-text);
    background: var(--pl-bg);
    font-family: var(--pl-font-body);
    font-size: 16px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    overflow-x: clip;
}

.pl-page * { box-sizing: border-box; }

/* A subtle fixed film-grain / vignette wash over the whole page so flat
   sections never read as "empty template". Pointer-events off. */
.pl-page::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(120% 90% at 50% 0%, transparent 55%, rgba(0,0,0,0.55) 100%);
    mix-blend-mode: multiply;
}
.pl-page > * { position: relative; z-index: 1; }

/* ---- SKIN: OMNIBOARD — warm, money-in-the-bank ---------------------------- */
.pl-omni {
    --pl-accent:      #ffb547;   /* warm amber (revenue / crowd energy) */
    --pl-accent-2:    #4f7bff;   /* brand blue partner */
    --pl-accent-dk:   #e08a1e;
    --pl-accent-rgb:  255, 181, 71;
    --pl-accent-2-rgb: 79, 123, 255;
    --pl-aurora:
        radial-gradient(1050px 600px at 82% -6%,  rgba(255, 181, 71, 0.16), transparent 60%),
        radial-gradient(950px 560px at 6% 8%,     rgba(79, 123, 255, 0.16), transparent 62%),
        radial-gradient(1200px 900px at 45% 120%, rgba(255, 149, 41, 0.10), transparent 60%);
    /* Dual-tone gradient used on CTAs / stat numbers: amber → blue */
    --pl-grad: linear-gradient(115deg, #ffcf7a 0%, #ffb547 40%, #4f7bff 130%);
    --pl-grad-text: linear-gradient(100deg, #ffe0a3 0%, #ffb547 55%, #7ea0ff 120%);
    --pl-btn-grad: linear-gradient(120deg, #ffd27a 0%, #f5a623 100%);
    --pl-btn-ink:  #221600;
    --pl-accent-ink: #7a4a06;   /* deep amber for accent text on paper */
}

/* ---- SKIN: VIDEOBOARDS — cool broadcast tech ------------------------------ */
.pl-video {
    --pl-accent:      #3f7cff;   /* electric brand blue */
    --pl-accent-2:    #22d3ee;   /* broadcast cyan */
    --pl-accent-dk:   #0f2ccf;
    --pl-accent-rgb:  47, 107, 255;
    --pl-accent-2-rgb: 34, 211, 238;
    --pl-aurora:
        radial-gradient(1100px 640px at 80% -10%, rgba(34, 211, 238, 0.16), transparent 58%),
        radial-gradient(980px 560px at 6% 6%,     rgba(47, 107, 255, 0.20), transparent 60%),
        radial-gradient(1300px 950px at 50% 122%, rgba(20, 60, 190, 0.18), transparent 60%);
    --pl-grad: linear-gradient(115deg, #22d3ee 0%, #2f6bff 55%, #4f46e5 130%);
    --pl-grad-text: linear-gradient(100deg, #7ff0ff 0%, #4f9dff 55%, #6d8cff 120%);
    --pl-btn-grad: linear-gradient(120deg, #4b8bff 0%, #2f6bff 58%, #1e46d6 100%);
    --pl-btn-ink:  #ffffff;
    --pl-accent-ink: #123a8f;   /* deep blue for accent text on paper */
}

/* ============================================================================
   2. LAYOUT PRIMITIVES
   ========================================================================== */
.pl-container {
    width: 100%;
    max-width: var(--pl-maxw);
    margin: 0 auto;
    padding-inline: var(--pl-gutter);
}

.pl-section {
    position: relative;
    padding-block: clamp(4rem, 9vw, 7.5rem);
    isolation: isolate;
}
.pl-section > .pl-container { position: relative; z-index: 1; }

/* Alternating surface treatments so adjacent sections separate cleanly. */
.pl-section--tint   { background: linear-gradient(180deg, var(--pl-bg-2), var(--pl-bg)); }
.pl-section--panel  {
    background:
        linear-gradient(180deg, rgba(255,255,255,0.02), transparent 30%),
        var(--pl-surface);
    border-block: 1px solid var(--pl-hairline);
}
.pl-section--aurora::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background: var(--pl-aurora);
    pointer-events: none;
}
/* Fine tech grid, very faint, on aurora sections */
.pl-section--grid::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(var(--pl-accent-2-rgb), 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(var(--pl-accent-2-rgb), 0.05) 1px, transparent 1px);
    background-size: 66px 66px;
    mask-image: radial-gradient(120% 100% at 50% 0%, #000 40%, transparent 85%);
    -webkit-mask-image: radial-gradient(120% 100% at 50% 0%, #000 40%, transparent 85%);
}

/* Section heading cluster */
.pl-section__head { max-width: 760px; margin-bottom: clamp(2rem, 4vw, 3.25rem); }
.pl-section__head--center { margin-inline: auto; text-align: center; }

.pl-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--pl-font-mono);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--pl-accent);
    padding: 0.36rem 0.9rem;
    border-radius: 100px;
    background: rgba(var(--pl-accent-rgb), 0.10);
    border: 1px solid rgba(var(--pl-accent-rgb), 0.30);
    box-shadow: 0 0 22px rgba(var(--pl-accent-rgb), 0.12) inset;
    margin-bottom: 1.15rem;
}
.pl-eyebrow::before {
    content: "";
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--pl-accent);
    box-shadow: 0 0 10px 1px rgba(var(--pl-accent-rgb), 0.9);
}

.pl-section__title,
.pl-h2 {
    font-family: var(--pl-font-display);
    font-weight: 400;
    font-size: clamp(2rem, 4.4vw, 3.25rem);
    line-height: 1.05;
    letter-spacing: -0.01em;
    color: var(--pl-ink);
    margin: 0 0 0.75rem;
}
.pl-section__sub,
.pl-lede {
    font-size: clamp(1rem, 1.4vw, 1.2rem);
    line-height: 1.66;
    color: var(--pl-muted);
    margin: 0;
}
.pl-section__head--center .pl-section__sub { margin-inline: auto; max-width: 640px; }

/* Accent-fill text — for a highlighted word in a heading. */
.pl-accent-text,
.pl-grad-text {
    background: var(--pl-grad-text);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

/* ============================================================================
   3. HERO
   ========================================================================== */
.pl-hero {
    position: relative;
    min-height: min(94vh, 900px);
    display: flex;
    align-items: center;
    padding-block: clamp(7rem, 12vw, 10rem) clamp(3rem, 7vw, 6rem);
    overflow: hidden;
    isolation: isolate;
}

/* Generative (no-photo) hero backdrop: layered accent aurora over a deep base. */
.pl-hero__bg {
    position: absolute;
    inset: 0;
    z-index: -2;
    background:
        radial-gradient(1000px 560px at 76% 26%,  rgba(var(--pl-accent-rgb), 0.58), transparent 60%),   /* bright focal bloom */
        radial-gradient(1500px 380px at 50% 66%,   rgba(var(--pl-accent-rgb), 0.34), transparent 62%),   /* glowing horizon band */
        radial-gradient(820px 560px at 6% 6%,       rgba(var(--pl-accent-2-rgb), 0.40), transparent 60%),
        radial-gradient(760px 520px at 98% 92%,     rgba(var(--pl-accent-2-rgb), 0.30), transparent 60%),
        linear-gradient(180deg, var(--pl-bg-2) 0%, var(--pl-bg) 58%, #03060e 100%);
}
/* Signature LED "floor grid" flowing toward a glowing horizon — echoes the 3D
   board. Pure CSS; the horizontal lines scroll for a tron-style depth. */
.pl-hero__grid {
    position: absolute;
    left: -25%; right: -25%; bottom: -8%;
    height: 66%;
    z-index: -2;
    background-image:
        repeating-linear-gradient(90deg, rgba(var(--pl-accent-rgb), 0.45) 0 2px, transparent 2px 66px),
        repeating-linear-gradient(0deg,  rgba(var(--pl-accent-2-rgb), 0.36) 0 2px, transparent 2px 66px);
    background-position: 0 0, 0 0;
    transform: perspective(480px) rotateX(70deg);
    transform-origin: bottom center;
    -webkit-mask-image: linear-gradient(to top, #000 8%, rgba(0,0,0,0.55) 40%, transparent 84%);
    mask-image: linear-gradient(to top, #000 8%, rgba(0,0,0,0.55) 40%, transparent 84%);
    pointer-events: none;
    filter: drop-shadow(0 0 7px rgba(var(--pl-accent-rgb), 0.45));
    animation: pl-grid-flow 3s linear infinite;
}
@keyframes pl-grid-flow { to { background-position: 0 0, 0 66px; } }
@media (prefers-reduced-motion: reduce) { .pl-hero__grid { animation: none; } }

/* Optional CMS hero media — an uploaded image or a muted looping video that
   fills the hero behind the copy. Sits below the readability scrim. */
.pl-hero__media {
    position: absolute;
    inset: 0;
    z-index: -2;
    width: 100%;
    height: 100%;
    object-fit: cover;
    background-size: cover;
    background-position: center;
    pointer-events: none;
}
.pl-hero__media-scrim {
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: linear-gradient(100deg,
        rgba(3, 6, 14, 0.92) 0%,
        rgba(3, 6, 14, 0.66) 34%,
        rgba(3, 6, 14, 0.36) 64%,
        rgba(3, 6, 14, 0.24) 100%);
}
/* Light readability scrim on the LEFT only — let the bloom + grid shine. */
.pl-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: linear-gradient(100deg,
        rgba(3, 6, 14, 0.9) 0%,
        rgba(3, 6, 14, 0.55) 24%,
        rgba(3, 6, 14, 0.12) 44%,
        transparent 58%);
}
.pl-hero::after {
    content: "";
    position: absolute;
    inset: auto 0 0 0;
    height: 42%;
    z-index: -1;
    background: linear-gradient(to top, var(--pl-bg) 4%, transparent 100%);
    pointer-events: none;
}

.pl-hero__inner {
    position: relative;
    z-index: 1;
}
/* Keep the hero on the normal page-aligned container (left edge lines up with the
   nav), but cap the statement to a left-hand column so the 3D venue reads on the
   right. */
.pl-hero__inner > * { max-width: 36rem; }
.pl-hero .pl-h1 {
    font-family: var(--pl-font-display);
    font-weight: 400;
    font-size: clamp(2.6rem, 7vw, 5.25rem);
    line-height: 1.0;
    letter-spacing: -0.015em;
    color: var(--pl-ink);
    margin: 0.5rem 0 1.15rem;
    text-shadow: 0 4px 60px rgba(0, 0, 0, 0.5);
}
.pl-hero .pl-lede {
    max-width: 620px;
    font-size: clamp(1.05rem, 1.7vw, 1.35rem);
    color: var(--pl-text);
    margin-bottom: 2.25rem;
}

.pl-cta-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.9rem;
    align-items: center;
}

/* Hero scroll cue */
.pl-hero__cue {
    position: absolute;
    left: 50%;
    bottom: 1.6rem;
    transform: translateX(-50%);
    z-index: 1;
    width: 24px; height: 40px;
    border: 2px solid rgba(var(--pl-accent-rgb), 0.5);
    border-radius: 20px;
    display: flex;
    justify-content: center;
    padding-top: 7px;
}
.pl-hero__cue::before {
    content: "";
    width: 4px; height: 8px;
    border-radius: 4px;
    background: var(--pl-accent);
    animation: pl-scrollcue 1.7s ease-in-out infinite;
}
@keyframes pl-scrollcue {
    0%   { opacity: 0; transform: translateY(-3px); }
    35%  { opacity: 1; }
    70%  { opacity: 0; transform: translateY(9px); }
    100% { opacity: 0; }
}

/* ============================================================================
   4. BUTTONS
   ========================================================================== */
.pl-btn {
    --_pad-y: 0.85rem;
    --_pad-x: 1.7rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    padding: var(--_pad-y) var(--_pad-x);
    font-family: var(--pl-font-mono);
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-decoration: none;
    line-height: 1;
    border: 1px solid transparent;
    border-radius: 100px;
    cursor: pointer;
    transition: transform 0.22s ease, box-shadow 0.22s ease,
                background 0.22s ease, border-color 0.22s ease, color 0.22s ease;
    position: relative;
    overflow: hidden;
    white-space: nowrap;
}
.pl-btn:focus-visible {
    outline: 2px solid var(--pl-accent);
    outline-offset: 3px;
}

.pl-btn--primary {
    color: var(--pl-btn-ink);
    background: var(--pl-btn-grad);
    box-shadow: 0 10px 30px rgba(var(--pl-accent-rgb), 0.35),
                0 0 0 1px rgba(var(--pl-accent-rgb), 0.4) inset;
}
/* Sheen sweep on hover */
.pl-btn--primary::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,0.5) 50%, transparent 70%);
    transform: translateX(-120%);
    transition: transform 0.6s ease;
}
.pl-btn--primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 44px rgba(var(--pl-accent-rgb), 0.5),
                0 0 60px rgba(var(--pl-accent-rgb), 0.28);
    color: var(--pl-btn-ink);
}
.pl-btn--primary:hover::after { transform: translateX(120%); }

.pl-btn--ghost {
    color: var(--pl-ink);
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(var(--pl-accent-rgb), 0.45);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
.pl-btn--ghost:hover {
    color: #fff;
    border-color: var(--pl-accent);
    background: rgba(var(--pl-accent-rgb), 0.12);
    box-shadow: 0 0 26px rgba(var(--pl-accent-rgb), 0.22);
    transform: translateY(-2px);
}

.pl-btn--lg { --_pad-y: 1.05rem; --_pad-x: 2.2rem; font-size: 0.9rem; }
.pl-btn--sm { --_pad-y: 0.6rem;  --_pad-x: 1.2rem; font-size: 0.72rem; }
.pl-btn--block { display: flex; width: 100%; }

/* ============================================================================
   5. STAT STRIP
   ========================================================================== */
.pl-statstrip {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 1px;
    background: var(--pl-hairline);
    border: 1px solid var(--pl-hairline);
    border-radius: var(--pl-radius);
    overflow: hidden;
    box-shadow: var(--pl-shadow-card);
}
.pl-stat {
    padding: clamp(1.4rem, 3vw, 2.1rem) 1.25rem;
    text-align: center;
    background:
        linear-gradient(180deg, rgba(255,255,255,0.03), transparent 60%),
        var(--pl-surface);
}
.pl-stat__num {
    font-family: var(--pl-font-mono);
    font-weight: 700;
    font-size: clamp(1.9rem, 4vw, 2.9rem);
    line-height: 1;
    background: var(--pl-grad-text);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    text-shadow: 0 0 40px rgba(var(--pl-accent-rgb), 0.25);
    margin-bottom: 0.4rem;
}
.pl-stat__label {
    font-family: var(--pl-font-mono);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--pl-muted);
}

/* ============================================================================
   6. CARD GRID
   ========================================================================== */
.pl-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: clamp(1rem, 2.2vw, 1.6rem);
}
.pl-grid--2 { grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); }
.pl-grid--3 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }

.pl-card {
    position: relative;
    padding: clamp(1.5rem, 2.6vw, 2rem);
    border-radius: var(--pl-radius);
    background:
        linear-gradient(180deg, rgba(255,255,255,0.045), transparent 42%),
        var(--pl-glass);
    border: 1px solid var(--pl-glass-border);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow: var(--pl-shadow-card);
    overflow: hidden;
    transition: transform 0.28s ease, border-color 0.28s ease, box-shadow 0.28s ease;
}
/* Accent hairline that lights up on hover, drawn along the top edge. */
.pl-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 2px;
    background: var(--pl-grad);
    opacity: 0;
    transition: opacity 0.28s ease;
}
.pl-card:hover {
    transform: translateY(-6px);
    border-color: rgba(var(--pl-accent-rgb), 0.5);
    box-shadow: var(--pl-shadow-hi), var(--pl-glow-accent);
}
.pl-card:hover::before { opacity: 1; }

.pl-card__icon {
    width: 54px; height: 54px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    margin-bottom: 1.1rem;
    font-size: 1.35rem;
    color: var(--pl-accent);
    background: rgba(var(--pl-accent-rgb), 0.12);
    border: 1px solid rgba(var(--pl-accent-rgb), 0.28);
    box-shadow: 0 0 26px rgba(var(--pl-accent-rgb), 0.12) inset;
}
.pl-card__icon img { width: 28px; height: 28px; object-fit: contain; }

.pl-card__num {
    font-family: var(--pl-font-mono);
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--pl-accent);
    letter-spacing: 0.05em;
    margin-bottom: 0.75rem;
    display: inline-block;
}
.pl-card__title {
    font-family: var(--pl-font-mono);
    font-weight: 700;
    font-size: 1.12rem;
    letter-spacing: 0.01em;
    color: var(--pl-ink);
    margin: 0 0 0.55rem;
}
.pl-card__body {
    font-size: 0.95rem;
    line-height: 1.65;
    color: var(--pl-muted);
    margin: 0;
}

/* ============================================================================
   7. SPLIT (media + text two-column)
   ========================================================================== */
.pl-split {
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    gap: clamp(2rem, 5vw, 4.5rem);
    align-items: center;
}
.pl-split--reverse .pl-split__media { order: 2; }
.pl-split--reverse .pl-split__text  { order: 1; }

.pl-split__text .pl-section__title { font-size: clamp(1.8rem, 3.4vw, 2.7rem); }

.pl-split__media {
    position: relative;
    border-radius: var(--pl-radius-lg);
    overflow: hidden;
    box-shadow: var(--pl-shadow-hi), 0 0 0 1px var(--pl-glass-border);
}
.pl-split__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    aspect-ratio: 4 / 3;
}
/* Glow frame around media */
.pl-split__media::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    box-shadow: 0 0 80px rgba(var(--pl-accent-rgb), 0.18) inset;
    pointer-events: none;
}

/* Compact checked feature list used inside splits */
.pl-checks { list-style: none; margin: 1.5rem 0 0; padding: 0; display: grid; gap: 0.85rem; }
.pl-checks li {
    position: relative;
    padding-left: 2.1rem;
    font-size: 0.98rem;
    line-height: 1.55;
    color: var(--pl-text);
}
.pl-checks li::before {
    content: "";
    position: absolute;
    left: 0; top: 0.15rem;
    width: 22px; height: 22px;
    border-radius: 7px;
    background: rgba(var(--pl-accent-rgb), 0.14);
    border: 1px solid rgba(var(--pl-accent-rgb), 0.4);
}
.pl-checks li::after {
    content: "";
    position: absolute;
    left: 7px; top: 0.4rem;
    width: 6px; height: 10px;
    border: solid var(--pl-accent);
    border-width: 0 2px 2px 0;
    transform: rotate(43deg);
}

/* ============================================================================
   8. 3D SHOWCASE STAGE
   ========================================================================== */
.pl-stage {
    position: relative;
    width: 100%;
    height: min(70vh, 620px);
    min-height: 380px;
    border-radius: var(--pl-radius-lg);
    overflow: hidden;
    background:
        radial-gradient(120% 120% at 50% 0%, rgba(var(--pl-accent-2-rgb), 0.12), transparent 55%),
        linear-gradient(180deg, var(--pl-surface-2), var(--pl-bg-2));
    border: 1px solid var(--pl-glass-border);
    box-shadow: var(--pl-shadow-hi), 0 0 90px rgba(var(--pl-accent-rgb), 0.12) inset;
    isolation: isolate;
}
/* Faint studio-floor grid under the board */
.pl-stage::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(var(--pl-accent-2-rgb), 0.07) 1px, transparent 1px),
        linear-gradient(90deg, rgba(var(--pl-accent-2-rgb), 0.07) 1px, transparent 1px);
    background-size: 48px 48px;
    transform: perspective(700px) rotateX(62deg) scale(1.6);
    transform-origin: bottom;
    mask-image: linear-gradient(to top, #000, transparent 70%);
    -webkit-mask-image: linear-gradient(to top, #000, transparent 70%);
    opacity: 0.7;
}
.pl-stage__canvas {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    height: 100%;
    touch-action: none;   /* let OrbitControls own the gesture */
}
.pl-stage__overlay {
    position: absolute;
    inset: auto 0 0 0;
    z-index: 2;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    padding: clamp(0.9rem, 2vw, 1.4rem);
    background: linear-gradient(to top, rgba(6,10,22,0.85), transparent);
    pointer-events: none;
}
.pl-stage__overlay > * { pointer-events: auto; }

/* "How to manipulate the model" hint — sits top-center, fades after the
   first drag/scroll/touch on the canvas (JS adds .is-dismissed). */
.pl-stage__hint {
    position: absolute;
    z-index: 4;
    top: clamp(0.7rem, 2vw, 1.1rem);
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.3rem 0.9rem;
    max-width: calc(100% - 1.6rem);
    padding: 0.5rem 0.95rem;
    border-radius: 999px;
    background: rgba(8, 13, 28, 0.72);
    border: 1px solid rgba(var(--pl-accent-2-rgb), 0.28);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35);
    pointer-events: none;
    color: #cfe0f5;
    font-size: clamp(0.68rem, 1.4vw, 0.8rem);
    font-weight: 600;
    letter-spacing: 0.01em;
    white-space: nowrap;
    opacity: 0.96;
    animation: plHintIn 0.55s ease 0.5s both, plHintPulse 2.4s ease-in-out 1.3s 3;
}
.pl-stage__hint-item { display: inline-flex; align-items: center; gap: 0.4rem; }
.pl-stage__hint-item i { color: var(--pl-accent-2); font-size: 0.95em; }
.pl-stage__hint.is-dismissed {
    opacity: 0;
    transform: translateX(-50%) translateY(-8px);
    animation: none;
    transition: opacity 0.5s ease, transform 0.5s ease;
}
@keyframes plHintIn {
    from { opacity: 0; transform: translateX(-50%) translateY(-8px); }
    to   { opacity: 0.96; transform: translateX(-50%) translateY(0); }
}
@keyframes plHintPulse {
    0%, 100% { box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35); }
    50%      { box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35), 0 0 0 3px rgba(var(--pl-accent-2-rgb), 0.18); }
}
@media (prefers-reduced-motion: reduce) {
    .pl-stage__hint { animation: none; }
}

/* Non-WebGL fallback */
.pl-stage__fallback {
    display: none;
    position: absolute;
    inset: 0;
    z-index: 3;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 1rem;
    padding: 2rem;
    background: linear-gradient(180deg, var(--pl-surface-2), var(--pl-bg-2));
}
.pl-stage__fallback.is-visible { display: flex; }
.pl-stage__fallback img {
    max-width: min(90%, 640px);
    border-radius: var(--pl-radius);
    box-shadow: var(--pl-shadow-hi);
}
.pl-stage__fallback p { color: var(--pl-muted); font-size: 0.9rem; margin: 0; }

/* ============================================================================
   9. SIZE BAR + CHIPS + READOUT
   ========================================================================== */
/* Showcase container: stacks the 3D stage, the size-chip bar, and the readout
   with clear separation. (Used on the Omniboards page, which wraps all three;
   the Videoboards page puts data-board-showcase on .pl-stage directly.) */
.pl-stage-wrap {
    display: flex;
    flex-direction: column;
    gap: clamp(1rem, 2.4vw, 1.6rem);
}

.pl-sizebar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
    align-items: center;
}
.pl-chip {
    font-family: var(--pl-font-mono);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--pl-text);
    padding: 0.5rem 0.95rem;
    border-radius: 100px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--pl-glass-border);
    cursor: pointer;
    transition: all 0.2s ease;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    white-space: nowrap;
}
.pl-chip:hover {
    border-color: rgba(var(--pl-accent-rgb), 0.55);
    color: #fff;
    transform: translateY(-1px);
}
.pl-chip.is-active {
    color: #05070f;
    background: var(--pl-grad);
    border-color: transparent;
    box-shadow: 0 6px 20px rgba(var(--pl-accent-rgb), 0.4);
}

/* Omniboard add-on controls — the option chips flow into the same flex bar. */
.pl-addon-opts { display: contents; }
.pl-chip--toggle { border-color: rgba(var(--pl-accent-rgb), 0.5); }
.pl-chip--toggle i { margin-right: 0.3em; }
.pl-addonbar, .pl-addon-sizes { margin-top: 0.55rem; }

.pl-readout {
    display: flex;
    gap: 1.4rem;
    flex-wrap: wrap;
    align-items: center;
}
.pl-readout__item { display: flex; flex-direction: column; gap: 0.15rem; }
.pl-readout__label {
    font-family: var(--pl-font-mono);
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--pl-muted);
}
.pl-readout__val {
    font-family: var(--pl-font-mono);
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--pl-accent);
    line-height: 1;
    text-shadow: 0 0 18px rgba(var(--pl-accent-rgb), 0.35);
}

/* ============================================================================
   10. MODE SWITCH (Scoreboard / Sponsors / Game-Hype)
   ========================================================================== */
.pl-modeswitch {
    display: inline-flex;
    padding: 0.3rem;
    gap: 0.25rem;
    border-radius: 100px;
    background: rgba(6, 10, 22, 0.6);
    border: 1px solid var(--pl-glass-border);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}
.pl-mode {
    font-family: var(--pl-font-mono);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--pl-muted);
    padding: 0.5rem 1.05rem;
    border: none;
    background: transparent;
    border-radius: 100px;
    cursor: pointer;
    transition: color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
    white-space: nowrap;
}
.pl-mode:hover { color: #fff; }
.pl-mode.is-active {
    color: #05070f;
    background: var(--pl-grad);
    box-shadow: 0 4px 16px rgba(var(--pl-accent-rgb), 0.4);
}

/* ============================================================================
   11. ROI CALCULATOR
   ========================================================================== */
.pl-roi {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: clamp(1.5rem, 4vw, 3rem);
    align-items: stretch;
    padding: clamp(1.6rem, 3.5vw, 2.75rem);
    border-radius: var(--pl-radius-lg);
    background:
        linear-gradient(180deg, rgba(255,255,255,0.04), transparent 40%),
        var(--pl-glass);
    border: 1px solid var(--pl-glass-border);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    box-shadow: var(--pl-shadow-hi);
}
.pl-roi__controls { display: grid; gap: 1.6rem; align-content: center; }
.pl-roi__control { display: grid; gap: 0.6rem; }
.pl-roi__control-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
}
.pl-roi__control-label {
    font-family: var(--pl-font-mono);
    font-size: 0.74rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--pl-muted);
}
.pl-roi__control-val {
    font-family: var(--pl-font-mono);
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--pl-accent);
    text-shadow: 0 0 16px rgba(var(--pl-accent-rgb), 0.35);
}
.pl-roi__control input[type="number"] {
    width: 110px;
    font-family: var(--pl-font-mono);
    font-size: 1rem;
    font-weight: 700;
    color: var(--pl-ink);
    background: rgba(6, 10, 22, 0.6);
    border: 1px solid var(--pl-glass-border);
    border-radius: 10px;
    padding: 0.4rem 0.6rem;
    text-align: right;
}
.pl-roi__control input[type="number"]:focus {
    outline: none;
    border-color: var(--pl-accent);
    box-shadow: 0 0 0 3px rgba(var(--pl-accent-rgb), 0.18);
}

/* Range slider — cross-browser custom track/thumb */
.pl-roi input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 8px;
    border-radius: 100px;
    background: linear-gradient(90deg,
        var(--pl-accent) 0%, var(--pl-accent) var(--pl-range-fill, 50%),
        rgba(255,255,255,0.08) var(--pl-range-fill, 50%), rgba(255,255,255,0.08) 100%);
    outline: none;
    cursor: pointer;
}
.pl-roi input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 22px; height: 22px;
    border-radius: 50%;
    background: #fff;
    border: 3px solid var(--pl-accent);
    box-shadow: 0 0 0 4px rgba(var(--pl-accent-rgb), 0.2),
                0 4px 14px rgba(0,0,0,0.5);
    cursor: grab;
    transition: transform 0.15s ease;
}
.pl-roi input[type="range"]::-webkit-slider-thumb:active { transform: scale(1.12); cursor: grabbing; }
.pl-roi input[type="range"]::-moz-range-thumb {
    width: 22px; height: 22px;
    border-radius: 50%;
    background: #fff;
    border: 3px solid var(--pl-accent);
    box-shadow: 0 0 0 4px rgba(var(--pl-accent-rgb), 0.2), 0 4px 14px rgba(0,0,0,0.5);
    cursor: grab;
}
.pl-roi input[type="range"]::-moz-range-track {
    height: 8px; border-radius: 100px; background: rgba(255,255,255,0.08);
}

.pl-roi__out {
    display: grid;
    gap: 1rem;
    align-content: center;
    padding: clamp(1.4rem, 3vw, 2rem);
    border-radius: var(--pl-radius);
    background:
        radial-gradient(120% 120% at 80% 0%, rgba(var(--pl-accent-rgb), 0.18), transparent 60%),
        rgba(6, 10, 22, 0.55);
    border: 1px solid rgba(var(--pl-accent-rgb), 0.28);
    box-shadow: 0 0 60px rgba(var(--pl-accent-rgb), 0.14) inset;
    text-align: center;
}
.pl-roi__out-label {
    font-family: var(--pl-font-mono);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(236, 240, 247, 0.72);
}
.pl-roi__big {
    font-family: var(--pl-font-mono);
    font-weight: 700;
    font-size: clamp(2.4rem, 6vw, 4rem);
    line-height: 1;
    background: var(--pl-grad-text);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    text-shadow: 0 0 50px rgba(var(--pl-accent-rgb), 0.3);
}
.pl-roi__sep { height: 1px; background: var(--pl-hairline); margin: 0.2rem 0; }
.pl-roi__note {
    font-size: 0.78rem;
    line-height: 1.5;
    color: var(--pl-faint);
    text-align: center;
    margin-top: 1rem;
}

/* ============================================================================
   12. COMPARISON GRID
   ========================================================================== */
.pl-compare {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: clamp(0.9rem, 2vw, 1.4rem);
}
.pl-compare__col {
    position: relative;
    padding: clamp(1.5rem, 2.6vw, 2rem);
    border-radius: var(--pl-radius);
    background:
        linear-gradient(180deg, rgba(255,255,255,0.03), transparent 40%),
        var(--pl-surface);
    border: 1px solid var(--pl-hairline);
    transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}
.pl-compare__col:hover {
    transform: translateY(-4px);
    border-color: rgba(var(--pl-accent-rgb), 0.4);
    box-shadow: var(--pl-shadow-card);
}
/* Highlighted "our product" column */
.pl-compare__col--feature {
    background:
        radial-gradient(120% 120% at 50% 0%, rgba(var(--pl-accent-rgb), 0.14), transparent 60%),
        var(--pl-surface-2);
    border-color: rgba(var(--pl-accent-rgb), 0.5);
    box-shadow: var(--pl-glow-accent);
}
.pl-compare__tag {
    display: inline-block;
    font-family: var(--pl-font-mono);
    font-size: 0.64rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--pl-accent);
    padding: 0.25rem 0.7rem;
    border-radius: 100px;
    background: rgba(var(--pl-accent-rgb), 0.12);
    border: 1px solid rgba(var(--pl-accent-rgb), 0.3);
    margin-bottom: 0.9rem;
}
.pl-compare__title {
    font-family: var(--pl-font-mono);
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--pl-ink);
    margin: 0 0 0.6rem;
}
.pl-compare__body { font-size: 0.93rem; line-height: 1.6; color: var(--pl-muted); margin: 0; }

/* ============================================================================
   13. SPEC TABLE (the 5 standard sizes)
   ========================================================================== */
.pl-spectable-wrap {
    border-radius: var(--pl-radius);
    overflow: hidden;
    border: 1px solid var(--pl-glass-border);
    box-shadow: var(--pl-shadow-card);
    background: var(--pl-surface);
}
.pl-spectable {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--pl-font-mono);
}
.pl-spectable thead th {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--pl-accent);
    text-align: left;
    padding: 1rem 1.25rem;
    background: rgba(var(--pl-accent-rgb), 0.06);
    border-bottom: 1px solid rgba(var(--pl-accent-rgb), 0.25);
    white-space: nowrap;
}
.pl-spectable tbody td {
    padding: 1rem 1.25rem;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--pl-text);
    border-bottom: 1px solid var(--pl-hairline-2);
    white-space: nowrap;
}
.pl-spectable tbody tr:last-child td { border-bottom: none; }
.pl-spectable tbody td:first-child {
    color: var(--pl-ink);
    font-weight: 700;
    font-size: 1.02rem;
}
/* First column marks the physical size — accent it */
.pl-spectable tbody td:first-child::before {
    content: "";
    display: inline-block;
    width: 8px; height: 8px;
    margin-right: 0.6rem;
    border-radius: 2px;
    background: var(--pl-accent);
    box-shadow: 0 0 10px rgba(var(--pl-accent-rgb), 0.7);
    vertical-align: middle;
}
.pl-spectable tbody tr {
    transition: background 0.18s ease, box-shadow 0.18s ease;
    cursor: default;
}
.pl-spectable tbody tr:hover {
    background: rgba(var(--pl-accent-rgb), 0.08);
    box-shadow: inset 3px 0 0 var(--pl-accent);
}
.pl-spectable tbody tr.is-active {
    background: rgba(var(--pl-accent-rgb), 0.12);
    box-shadow: inset 3px 0 0 var(--pl-accent);
}

@media (max-width: 560px) {
    /* Card-ify the table on very small screens */
    .pl-spectable, .pl-spectable thead, .pl-spectable tbody,
    .pl-spectable th, .pl-spectable td, .pl-spectable tr { display: block; }
    .pl-spectable thead { display: none; }
    .pl-spectable tbody tr {
        padding: 0.75rem 1rem;
        border-bottom: 1px solid var(--pl-hairline);
    }
    .pl-spectable tbody td {
        border: none;
        padding: 0.3rem 0;
        display: flex;
        justify-content: space-between;
        white-space: normal;
    }
    .pl-spectable tbody td::before { content: attr(data-th); color: var(--pl-faint); font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; }
    .pl-spectable tbody td:first-child::before {
        content: ""; width: 8px; height: 8px; margin-right: 0.5rem;
        background: var(--pl-accent); border-radius: 2px;
    }
}

/* ============================================================================
   14. TIMELINE / STEPS (numbered how-it-works)
   ========================================================================== */
.pl-timeline,
.pl-steps {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: clamp(1rem, 2.4vw, 1.75rem);
    counter-reset: pl-step;
}
.pl-step {
    position: relative;
    padding: clamp(1.5rem, 2.6vw, 2rem) clamp(1.35rem, 2.4vw, 1.9rem);
    padding-top: 3.6rem;
    border-radius: var(--pl-radius);
    background:
        linear-gradient(180deg, rgba(255,255,255,0.035), transparent 40%),
        var(--pl-glass);
    border: 1px solid var(--pl-glass-border);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}
.pl-step:hover {
    transform: translateY(-5px);
    border-color: rgba(var(--pl-accent-rgb), 0.45);
    box-shadow: var(--pl-shadow-card), var(--pl-glow-accent);
}
.pl-step::before {
    counter-increment: pl-step;
    content: counter(pl-step, decimal-leading-zero);
    position: absolute;
    top: 1.25rem; left: clamp(1.35rem, 2.4vw, 1.9rem);
    font-family: var(--pl-font-mono);
    font-weight: 700;
    font-size: 1.5rem;
    line-height: 1;
    background: var(--pl-grad-text);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}
/* Connector dot rail on wide layouts */
.pl-step::after {
    content: "";
    position: absolute;
    top: 1.55rem; right: 1.25rem;
    width: 9px; height: 9px;
    border-radius: 50%;
    background: rgba(var(--pl-accent-rgb), 0.35);
    box-shadow: 0 0 10px rgba(var(--pl-accent-rgb), 0.5);
}
.pl-step__title {
    font-family: var(--pl-font-mono);
    font-weight: 700;
    font-size: 1.08rem;
    color: var(--pl-ink);
    margin: 0 0 0.5rem;
}
.pl-step__body { font-size: 0.94rem; line-height: 1.6; color: var(--pl-muted); margin: 0; }

/* ============================================================================
   15. SPORT CHIPS
   ========================================================================== */
.pl-sportchips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.7rem;
    justify-content: center;
}
.pl-sportchip {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    font-family: var(--pl-font-mono);
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--pl-text);
    text-decoration: none;
    padding: 0.65rem 1.15rem;
    border-radius: 100px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--pl-glass-border);
    transition: all 0.2s ease;
}
.pl-sportchip i { color: var(--pl-accent); font-size: 0.9rem; }
.pl-sportchip:hover {
    color: #fff;
    border-color: rgba(var(--pl-accent-rgb), 0.55);
    background: rgba(var(--pl-accent-rgb), 0.1);
    transform: translateY(-2px);
    box-shadow: 0 8px 22px rgba(var(--pl-accent-rgb), 0.2);
}

/* ============================================================================
   16. FINAL CTA BAND
   ========================================================================== */
.pl-ctaband {
    position: relative;
    text-align: center;
    padding: clamp(3rem, 7vw, 5.5rem) clamp(1.5rem, 5vw, 4rem);
    border-radius: var(--pl-radius-lg);
    overflow: hidden;
    background:
        radial-gradient(120% 160% at 50% -20%, rgba(var(--pl-accent-rgb), 0.28), transparent 62%),
        linear-gradient(135deg, var(--mfs-primary-dk), var(--pl-bg-2));
    border: 1px solid rgba(var(--pl-accent-rgb), 0.3);
    box-shadow: var(--pl-shadow-hi), 0 0 100px rgba(var(--pl-accent-rgb), 0.16) inset;
}
.pl-ctaband::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(var(--pl-accent-2-rgb), 0.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(var(--pl-accent-2-rgb), 0.06) 1px, transparent 1px);
    background-size: 54px 54px;
    mask-image: radial-gradient(90% 90% at 50% 50%, #000, transparent 80%);
    -webkit-mask-image: radial-gradient(90% 90% at 50% 50%, #000, transparent 80%);
}
.pl-ctaband > * { position: relative; z-index: 1; }
.pl-ctaband__title {
    font-family: var(--pl-font-display);
    font-weight: 400;
    font-size: clamp(2rem, 5vw, 3.4rem);
    line-height: 1.05;
    color: var(--pl-ink);
    margin: 0 0 1rem;
    text-shadow: 0 4px 50px rgba(0,0,0,0.4);
}
.pl-ctaband__sub {
    font-size: clamp(1rem, 1.6vw, 1.25rem);
    color: var(--pl-text);
    max-width: 620px;
    margin: 0 auto 2rem;
    line-height: 1.6;
}
.pl-ctaband .pl-cta-row { justify-content: center; }

/* Small reserve/availability badge used near CTA */
.pl-flag {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--pl-font-mono);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--pl-accent);
    padding: 0.4rem 0.95rem;
    border-radius: 100px;
    background: rgba(var(--pl-accent-rgb), 0.1);
    border: 1px solid rgba(var(--pl-accent-rgb), 0.32);
    margin-bottom: 1.4rem;
}
.pl-flag i { font-size: 0.8rem; }

/* ============================================================================
   17. MOTION / REVEAL
   ========================================================================== */
.pl-reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: opacity, transform;
}
.pl-reveal.is-in {
    opacity: 1;
    transform: none;
}
/* Optional stagger helpers — author can add pl-reveal--dN */
.pl-reveal--d1 { transition-delay: 0.08s; }
.pl-reveal--d2 { transition-delay: 0.16s; }
.pl-reveal--d3 { transition-delay: 0.24s; }
.pl-reveal--d4 { transition-delay: 0.32s; }

@media (prefers-reduced-motion: reduce) {
    .pl-page * ,
    .pl-page *::before,
    .pl-page *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
    .pl-reveal { opacity: 1; transform: none; }
    .pl-hero__bg { transform: none; }
    .pl-hero__cue { display: none; }
    .pl-btn--primary::after { display: none; }
}

/* ============================================================================
   18. RESPONSIVE PASS  (mobile-first refinements at 1024 / 768 / 560)
   ========================================================================== */
@media (max-width: 1024px) {
    .pl-split { gap: clamp(1.5rem, 4vw, 3rem); }
    .pl-roi   { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
    .pl-page { font-size: 15.5px; }
    .pl-split {
        grid-template-columns: 1fr;
    }
    /* Media always leads on stacked layout regardless of reverse */
    .pl-split__media,
    .pl-split--reverse .pl-split__media { order: 1; }
    .pl-split__text,
    .pl-split--reverse .pl-split__text  { order: 2; }
    .pl-split__media img { aspect-ratio: 16 / 10; }

    .pl-hero { min-height: auto; }
    .pl-hero__cue { display: none; }

    .pl-stage { height: 56vh; min-height: 340px; }
    .pl-stage__overlay {
        flex-direction: column;
        align-items: stretch;
    }
    .pl-readout { justify-content: space-between; width: 100%; }

    .pl-modeswitch { width: 100%; justify-content: center; }
}

@media (max-width: 560px) {
    .pl-page { font-size: 15px; }
    .pl-section { padding-block: clamp(3rem, 12vw, 4rem); }
    .pl-cta-row { flex-direction: column; align-items: stretch; }
    .pl-cta-row .pl-btn { width: 100%; }
    .pl-hero .pl-cta-row .pl-btn { width: 100%; }

    .pl-statstrip { grid-template-columns: 1fr 1fr; }

    .pl-modeswitch { flex-wrap: wrap; border-radius: var(--pl-radius-sm); }
    .pl-mode { flex: 1 1 auto; }

    .pl-sizebar { justify-content: center; }
    .pl-roi__control input[type="number"] { width: 90px; }

    .pl-stage { height: 50vh; min-height: 300px; }
}

/* ============================================================================
   ============================================================================
   19. BROADCAST SPEC-SHEET SYSTEM  (light/dark rhythm + signature motifs +
       bespoke editorial feature sections)

   Everything below is additive and stays scoped under .pl-page. The light
   sections re-declare the --pl-* text/surface/hairline/glass variables so
   every existing component (.pl-eyebrow, .pl-h2, .pl-lede, .pl-btn, .pl-stat,
   .pl-card, .pl-checks, .pl-statstrip, etc.) automatically flips to crisp
   dark-on-light — no per-component overrides required.
   ============================================================================
   ========================================================================== */

/* ---- Extra motif tokens (define once; skins tint them) -------------------- */
.pl-page {
    /* LED pixel-dot texture controls (used by .pl-ledgrid + paper texture) */
    --pl-dot-size:   3px;      /* diameter of each lit pixel */
    --pl-dot-gap:    26px;     /* grid pitch of the dot field (wider = subtler) */
    --pl-dot-color:  rgba(var(--pl-accent-rgb), 0.11);

    /* Light-surface anchors — overridden per skin just below. Warm for Omni,
       cool for Video. These are ONLY consumed inside .pl-section--light. */
    --pl-paper:      #f6f3ec;  /* section background (near-white) */
    --pl-paper-2:    #efe9dd;  /* faint texture / rule tint */
    --pl-ink-dk:     #0d1730;  /* headings on light */
    --pl-text-dk:    #33405c;  /* body on light (slate) */
    --pl-muted-dk:   #45526e;  /* secondary on light (cool gray) */
    --pl-faint-dk:   #566280;  /* captions on light */
    --pl-line-dk:    rgba(13, 23, 48, 0.12);   /* hairline on light */
    --pl-line-dk-2:  rgba(13, 23, 48, 0.06);
    --pl-surf-dk:    #ffffff;                    /* cards/surfaces on light */
    --pl-surf-dk-2:  #f1ece1;                    /* alt surface on light */
    --pl-glass-dk:   rgba(255, 255, 255, 0.72);  /* glass on light */
    --pl-glass-dk-bd:rgba(13, 23, 48, 0.10);
}
.pl-omni {
    --pl-paper:   #f7f2e8;   /* warm ivory */
    --pl-paper-2: #efe6d4;
    --pl-surf-dk-2: #f3ecdd;
}
.pl-video {
    --pl-paper:   #eef2f8;   /* cool porcelain */
    --pl-paper-2: #e2e9f3;
    --pl-surf-dk-2: #e9eff8;
}

/* ============================================================================
   19a. LIGHT SECTION SYSTEM
   .pl-section--light : bright "paper" section. Re-maps the whole text ramp +
   surfaces + hairlines + glass to dark-on-light so descendants flip cleanly.
   ========================================================================== */
.pl-section--light {
    /* Remap the text ramp → crisp dark-on-light */
    --pl-ink:    var(--pl-ink-dk);
    --pl-text:   var(--pl-text-dk);
    --pl-muted:  var(--pl-muted-dk);
    --pl-faint:  var(--pl-faint-dk);

    /* Remap surfaces + hairlines + glass */
    --pl-surface:    var(--pl-surf-dk);
    --pl-surface-2:  var(--pl-surf-dk-2);
    --pl-surface-3:  var(--pl-surf-dk-2);
    --pl-hairline:   var(--pl-line-dk);
    --pl-hairline-2: var(--pl-line-dk-2);
    --pl-glass:        var(--pl-glass-dk);
    --pl-glass-2:      var(--pl-glass-dk);
    --pl-glass-border: var(--pl-glass-dk-bd);

    /* Softer shadows on paper (deep navy shadows look muddy on light) */
    --pl-shadow-card: 0 1px 0 rgba(255,255,255,0.8) inset,
                      0 18px 40px rgba(13, 23, 48, 0.10);
    --pl-shadow-hi:   0 30px 70px rgba(13, 23, 48, 0.16);

    /* On light, keep the accent chip legible: use a slightly deeper accent */
    color: var(--pl-text);
    background: var(--pl-paper);
    isolation: isolate;
}
/* The global page vignette (fixed ::before, multiply) would dirty a light
   section — lift it back to paper-bright with a top scrim on each edge. */
.pl-section--light::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        linear-gradient(180deg, rgba(255,255,255,0.5), transparent 8%, transparent 92%, rgba(255,255,255,0.5));
    mix-blend-mode: screen;
}
.pl-section--light > .pl-container { position: relative; z-index: 1; }

/* --- Component fix-ups so dark-designed pieces look intentional on light --- */
/* Eyebrow: the translucent accent fill reads washed out on paper — give it a
   crisp tinted pill with a readable accent ink. */
.pl-section--light .pl-eyebrow {
    color: var(--pl-accent-dk);
    background: rgba(var(--pl-accent-rgb), 0.14);
    border-color: rgba(var(--pl-accent-rgb), 0.42);
    box-shadow: none;
}
.pl-section--light .pl-eyebrow::before {
    box-shadow: 0 0 8px 1px rgba(var(--pl-accent-rgb), 0.7);
}
/* Kicker + readouts + stat numbers: on Omni the amber gradient can vanish on
   ivory; anchor gradient-text with a subtle dark fallback for contrast. */
.pl-section--light .pl-stat__num,
.pl-section--light .pl-roi__big,
.pl-section--light .pl-grad-text,
.pl-section--light .pl-accent-text {
    text-shadow: none;
}
/* Ghost button on light needs a dark ink + visible border */
.pl-section--light .pl-btn--ghost {
    color: var(--pl-ink);
    background: rgba(13, 23, 48, 0.03);
    border-color: rgba(var(--pl-accent-rgb), 0.5);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}
.pl-section--light .pl-btn--ghost:hover {
    color: var(--pl-ink);
    background: rgba(var(--pl-accent-rgb), 0.12);
    border-color: var(--pl-accent-dk);
    box-shadow: 0 6px 20px rgba(var(--pl-accent-rgb), 0.22);
}
/* Primary button already high-contrast (grad on dark ink) — keep as-is. */
/* Checks: soften the check chip border on light */
.pl-section--light .pl-checks li { color: var(--pl-text); }
/* Accent-colored small text (amber/cyan) is unreadable on paper — deep ink. */
.pl-section--light .pl-measure__label,  .pl-section--paper  .pl-measure__label,
.pl-section--light .pl-roi__control-val, .pl-section--paper  .pl-roi__control-val,
.pl-section--light .pl-kicker--accent,   .pl-section--paper  .pl-kicker--accent {
    color: var(--pl-accent-ink);
}
.pl-section--light .pl-kicker--accent::before,
.pl-section--paper  .pl-kicker--accent::before { background: var(--pl-accent-ink); box-shadow: none; }
/* The site's a:link color outranks .pl-btn's color; pin button text so links
   never fall back to link-blue (--pl-ink / --pl-btn-ink adapt per section). */
.pl-page a.pl-btn--primary,
.pl-page a.pl-btn--primary:hover { color: var(--pl-btn-ink); }
.pl-page a.pl-btn--ghost { color: var(--pl-ink); }
.pl-page a.pl-btn--ghost:hover { color: #fff; }
/* Statstrip on light: hairline grid + white cells */
.pl-section--light .pl-stat {
    background: linear-gradient(180deg, rgba(13,23,48,0.02), transparent 60%), var(--pl-surface);
}

/* ---- .pl-section--paper : light + faint LED-dot texture + edge rules ------ */
.pl-section--paper {
    /* inherits the full light remap */
    --pl-ink:    var(--pl-ink-dk);
    --pl-text:   var(--pl-text-dk);
    --pl-muted:  var(--pl-muted-dk);
    --pl-faint:  var(--pl-faint-dk);
    --pl-surface:    var(--pl-surf-dk);
    --pl-surface-2:  var(--pl-surf-dk-2);
    --pl-surface-3:  var(--pl-surf-dk-2);
    --pl-hairline:   var(--pl-line-dk);
    --pl-hairline-2: var(--pl-line-dk-2);
    --pl-glass:        var(--pl-glass-dk);
    --pl-glass-2:      var(--pl-glass-dk);
    --pl-glass-border: var(--pl-glass-dk-bd);
    --pl-shadow-card: 0 1px 0 rgba(255,255,255,0.8) inset,
                      0 18px 40px rgba(13, 23, 48, 0.10);
    --pl-shadow-hi:   0 30px 70px rgba(13, 23, 48, 0.16);

    color: var(--pl-text);
    background: var(--pl-paper);
    border-block: 1px solid var(--pl-line-dk);
    isolation: isolate;
}
.pl-section--paper .pl-eyebrow {
    color: var(--pl-accent-dk);
    background: rgba(var(--pl-accent-rgb), 0.14);
    border-color: rgba(var(--pl-accent-rgb), 0.42);
    box-shadow: none;
}
.pl-section--paper .pl-eyebrow::before { box-shadow: 0 0 8px 1px rgba(var(--pl-accent-rgb), 0.7); }
.pl-section--paper .pl-btn--ghost {
    color: var(--pl-ink);
    background: rgba(13, 23, 48, 0.03);
    border-color: rgba(var(--pl-accent-rgb), 0.5);
    backdrop-filter: none; -webkit-backdrop-filter: none;
}
.pl-section--paper .pl-btn--ghost:hover {
    color: var(--pl-ink);
    background: rgba(var(--pl-accent-rgb), 0.12);
    border-color: var(--pl-accent-dk);
}
/* Faint LED-dot field baked into the paper background */
.pl-section--paper::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image: radial-gradient(var(--pl-dot-size) var(--pl-dot-size) at center,
        rgba(13, 23, 48, 0.05) 0 var(--pl-dot-size), transparent var(--pl-dot-size));
    background-size: var(--pl-dot-gap) var(--pl-dot-gap);
    mask-image: radial-gradient(90% 70% at 50% 50%, #000 10%, transparent 70%);
    -webkit-mask-image: radial-gradient(90% 70% at 50% 50%, #000 10%, transparent 70%);
    opacity: 0.5;
}
/* thin top/bottom accent rules */
.pl-section--paper::after {
    content: "";
    position: absolute;
    left: 0; right: 0; top: 0;
    height: 1px;
    z-index: 0;
    pointer-events: none;
    background: linear-gradient(90deg, transparent, rgba(var(--pl-accent-rgb), 0.5), transparent);
}
.pl-section--paper > .pl-container { position: relative; z-index: 1; }

/* ============================================================================
   19b. SIGNATURE MOTIFS
   ========================================================================== */

/* ---- .pl-ledgrid : absolutely-positioned LED pixel-dot layer -------------- */
/* Drop inside any position:relative parent. Works dark OR light (dot color
   uses accent so it reads on both). Author can tune with inline
   --pl-dot-gap / --pl-dot-color on the element if desired. */
.pl-ledgrid {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image: radial-gradient(var(--pl-dot-size) var(--pl-dot-size) at center,
        var(--pl-dot-color) 0 var(--pl-dot-size), transparent var(--pl-dot-size));
    background-size: var(--pl-dot-gap) var(--pl-dot-gap);
    mask-image: radial-gradient(85% 85% at 50% 50%, #000 8%, transparent 68%);
    -webkit-mask-image: radial-gradient(85% 85% at 50% 50%, #000 8%, transparent 68%);
    opacity: 0.4;
}
.pl-ledgrid--tr { mask-image: radial-gradient(80% 80% at 100% 0%, #000, transparent 70%);
    -webkit-mask-image: radial-gradient(80% 80% at 100% 0%, #000, transparent 70%); }
.pl-ledgrid--bl { mask-image: radial-gradient(80% 80% at 0% 100%, #000, transparent 70%);
    -webkit-mask-image: radial-gradient(80% 80% at 0% 100%, #000, transparent 70%); }
/* Light sections: use a dark dot so it's visible on paper */
.pl-section--light .pl-ledgrid,
.pl-section--paper  .pl-ledgrid { --pl-dot-color: rgba(13, 23, 48, 0.06); }

/* ---- .pl-kicker : mono micro-label with a leading measure tick ------------ */
.pl-kicker {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    font-family: var(--pl-font-mono);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--pl-muted);
    margin-bottom: 1rem;
}
.pl-kicker::before {
    content: "";
    width: 26px;
    height: 8px;
    flex: none;
    /* tick mark: a baseline with an end riser — a tiny dimension cue */
    background:
        linear-gradient(var(--pl-accent), var(--pl-accent)) left bottom / 100% 1.5px no-repeat,
        linear-gradient(var(--pl-accent), var(--pl-accent)) left bottom / 1.5px 100% no-repeat,
        linear-gradient(var(--pl-accent), var(--pl-accent)) right bottom / 1.5px 100% no-repeat;
}
.pl-kicker--accent { color: var(--pl-accent); }

/* ---- .pl-measure : a dimension line with end ticks + centered mono label -- */
.pl-measure {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 1.4rem;
    width: 100%;
    font-family: var(--pl-font-mono);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--pl-accent);
}
/* the horizontal rule sits behind the label */
.pl-measure::before {
    content: "";
    position: absolute;
    left: 0; right: 0; top: 50%;
    height: 1px;
    background: linear-gradient(90deg,
        rgba(var(--pl-accent-rgb), 0.65),
        rgba(var(--pl-accent-rgb), 0.65));
    transform: translateY(-50%);
    z-index: 0;
}
/* end ticks (both ends) via a repeating pair of verticals painted over ends */
.pl-measure::after {
    content: "";
    position: absolute;
    left: 0; right: 0; top: 50%;
    height: 9px;
    transform: translateY(-50%);
    z-index: 0;
    background:
        linear-gradient(var(--pl-accent), var(--pl-accent)) left center / 1.5px 100% no-repeat,
        linear-gradient(var(--pl-accent), var(--pl-accent)) right center / 1.5px 100% no-repeat;
}
/* the label chip masks the line so text is crisp */
.pl-measure__label {
    position: relative;
    z-index: 1;
    padding: 0 0.7rem;
    background: var(--pl-bg);         /* dark sections */
    white-space: nowrap;
    line-height: 1;
}
.pl-section--light .pl-measure__label,
.pl-section--paper  .pl-measure__label { background: var(--pl-paper); }

/* vertical variant */
.pl-measure--v {
    flex-direction: column;
    width: auto;
    min-height: 0;
    height: 100%;
    min-width: 1.4rem;
    writing-mode: vertical-rl;
    text-orientation: mixed;
}
.pl-measure--v::before {
    left: 50%; right: auto; top: 0; bottom: 0;
    width: 1px; height: auto;
    transform: translateX(-50%);
}
.pl-measure--v::after {
    left: 50%; right: auto; top: 0; bottom: 0;
    width: 9px; height: auto;
    transform: translateX(-50%);
    background:
        linear-gradient(var(--pl-accent), var(--pl-accent)) center top / 100% 1.5px no-repeat,
        linear-gradient(var(--pl-accent), var(--pl-accent)) center bottom / 100% 1.5px no-repeat;
}
.pl-measure--v .pl-measure__label { padding: 0.7rem 0; }

/* ---- .pl-display : oversized DM Serif Display headline scale -------------- */
.pl-display {
    font-family: var(--pl-font-display);
    font-weight: 400;
    font-size: clamp(2.6rem, 7.2vw, 5.6rem);
    line-height: 0.98;
    letter-spacing: -0.02em;
    color: var(--pl-ink);
    margin: 0 0 1rem;
}
.pl-display em {
    font-style: italic;
    background: var(--pl-grad-text);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
}

/* ============================================================================
   19c. BESPOKE FEATURE SECTIONS
   ========================================================================== */

/* ---- .pl-acts : editorial "three-act" band (replaces a 3-card grid) ------- */
.pl-acts {
    display: grid;
    gap: 0;
    counter-reset: pl-act;
}
.pl-act {
    counter-increment: pl-act;
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 0.42fr) minmax(0, 1fr);
    gap: clamp(1.5rem, 5vw, 4rem);
    align-items: start;
    padding: clamp(2rem, 4.5vw, 3.5rem) 0;
    border-top: 1px solid var(--pl-hairline);
}
.pl-act:last-child { border-bottom: 1px solid var(--pl-hairline); }
/* Alternate alignment: even acts flip index to the right for editorial rhythm */
.pl-act:nth-child(even) {
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.42fr);
}
.pl-act:nth-child(even) .pl-act__idx { order: 2; text-align: right; }
.pl-act:nth-child(even) .pl-act__main { order: 1; }
.pl-act__idx {
    font-family: var(--pl-font-mono);
    font-weight: 700;
    font-size: clamp(3rem, 9vw, 6.5rem);
    line-height: 0.85;
    letter-spacing: -0.02em;
    background: var(--pl-grad-text);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
    position: relative;
}
.pl-act__idx::after {
    /* faint LED dots trailing the numeral */
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: -0.4rem;
    height: 10px;
    background-image: radial-gradient(2px 2px at center,
        rgba(var(--pl-accent-rgb), 0.5) 0 2px, transparent 2px);
    background-size: 12px 12px;
    mask-image: linear-gradient(90deg, #000, transparent);
    -webkit-mask-image: linear-gradient(90deg, #000, transparent);
}
.pl-act__main { max-width: 60ch; }
.pl-act__title {
    font-family: var(--pl-font-display);
    font-weight: 400;
    font-size: clamp(1.7rem, 3.4vw, 2.6rem);
    line-height: 1.06;
    letter-spacing: -0.01em;
    color: var(--pl-ink);
    margin: 0.3rem 0 0.9rem;
}
.pl-act__body {
    font-size: clamp(1rem, 1.4vw, 1.18rem);
    line-height: 1.62;
    color: var(--pl-muted);
    margin: 0;
}

/* ---- .pl-flow : horizontal signal-flow diagram with traveling dots -------- */
.pl-flow {
    display: flex;
    align-items: stretch;
    flex-wrap: nowrap;
    gap: 0;
    width: 100%;
}
.pl-flow__node {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.55rem;
    text-align: center;
    padding: clamp(1.1rem, 2.4vw, 1.75rem) clamp(0.8rem, 1.6vw, 1.25rem);
    border-radius: var(--pl-radius);
    background:
        linear-gradient(180deg, rgba(255,255,255,0.04), transparent 45%),
        var(--pl-glass);
    border: 1px solid var(--pl-glass-border);
    box-shadow: var(--pl-shadow-card);
}
.pl-flow__node i,
.pl-flow__node .pl-flow__ico {
    font-size: 1.5rem;
    color: var(--pl-accent);
    width: 54px; height: 54px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 14px;
    background: rgba(var(--pl-accent-rgb), 0.12);
    border: 1px solid rgba(var(--pl-accent-rgb), 0.3);
}
.pl-flow__title {
    font-family: var(--pl-font-mono);
    font-weight: 700;
    font-size: 0.92rem;
    letter-spacing: 0.02em;
    color: var(--pl-ink);
}
.pl-flow__io {
    font-family: var(--pl-font-mono);
    font-size: 0.64rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--pl-muted);
}
/* the connecting link between two nodes */
.pl-flow__link {
    flex: 0 1 clamp(2.5rem, 8vw, 7rem);
    align-self: center;
    position: relative;
    height: 2px;
    margin: 0 -1px;
    background: linear-gradient(90deg,
        rgba(var(--pl-accent-rgb), 0.15),
        rgba(var(--pl-accent-rgb), 0.55),
        rgba(var(--pl-accent-rgb), 0.15));
    overflow: visible;
}
/* the protocol/label chip sits on the link */
.pl-flow__link[data-label]::before {
    content: attr(data-label);
    position: absolute;
    left: 50%; top: 50%;
    transform: translate(-50%, -50%);
    font-family: var(--pl-font-mono);
    font-size: 0.58rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--pl-accent);
    background: var(--pl-bg);
    padding: 0.15rem 0.5rem;
    border-radius: 100px;
    white-space: nowrap;
    z-index: 2;
}
.pl-section--light .pl-flow__link[data-label]::before,
.pl-section--paper  .pl-flow__link[data-label]::before { background: var(--pl-paper); }
/* the traveling "signal" dot */
.pl-flow__link::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    width: 8px; height: 8px;
    margin-top: -4px;
    border-radius: 50%;
    background: var(--pl-accent);
    box-shadow: 0 0 12px 2px rgba(var(--pl-accent-rgb), 0.8);
    animation: pl-signal 2.2s linear infinite;
    z-index: 1;
}
.pl-flow__link:nth-of-type(4)::after { animation-delay: 0.7s; }  /* 2nd link (nodes interleave) */
@keyframes pl-signal {
    0%   { left: 0;    opacity: 0; }
    12%  { opacity: 1; }
    88%  { opacity: 1; }
    100% { left: 100%; opacity: 0; }
}

/* ---- .pl-versus : elevated comparison spec-table -------------------------- */
.pl-versus {
    display: grid;
    /* label column + N product columns; author sets columns via inline style
       or the default assumes 1 label + 2 product cols */
    grid-template-columns: minmax(140px, 1.4fr) repeat(2, minmax(0, 1fr));
    border-radius: var(--pl-radius-lg);
    overflow: hidden;
    border: 1px solid var(--pl-hairline);
    background: var(--pl-surface);
    box-shadow: var(--pl-shadow-card);
    font-family: var(--pl-font-body);
    position: relative;
    isolation: isolate;
}
/* header row */
.pl-versus__head {
    display: contents;
}
.pl-versus__head .pl-versus__cell {
    font-family: var(--pl-font-mono);
    font-weight: 700;
    font-size: 0.82rem;
    letter-spacing: 0.04em;
    color: var(--pl-ink);
    background: var(--pl-surface-2);
    border-bottom: 1px solid var(--pl-hairline);
    align-items: flex-end;
    min-height: 4.2rem;
}
.pl-versus__head .pl-versus__cell:first-child {
    font-size: 0.66rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--pl-faint);
    font-weight: 600;
}
.pl-versus__row { display: contents; }
.pl-versus__cell {
    display: flex;
    align-items: center;
    padding: 0.95rem 1.15rem;
    font-size: 0.95rem;
    color: var(--pl-text);
    border-bottom: 1px solid var(--pl-hairline-2);
    min-width: 0;
}
/* row label (first cell of each row) */
.pl-versus__row .pl-versus__cell:first-child {
    font-family: var(--pl-font-mono);
    font-weight: 600;
    font-size: 0.8rem;
    letter-spacing: 0.03em;
    color: var(--pl-muted);
}
/* check / dash marks */
.pl-versus__cell[data-mark="yes"],
.pl-versus__cell[data-mark="no"] { justify-content: center; }
.pl-versus__cell[data-mark="yes"]::before {
    content: "\2713";  /* ✓ */
    font-weight: 700;
    color: var(--pl-accent);
    font-size: 1.05rem;
    text-shadow: 0 0 14px rgba(var(--pl-accent-rgb), 0.4);
}
.pl-versus__cell[data-mark="no"]::before {
    content: "\2014";  /* — */
    color: var(--pl-faint);
    font-size: 1.05rem;
}
/* the elevated "our product" column — a full-height highlighted band.
   Author marks each cell in that column with .pl-versus__col.is-feature. */
.pl-versus__col.is-feature,
.pl-versus__cell.is-feature {
    background:
        linear-gradient(180deg, rgba(var(--pl-accent-rgb), 0.16), rgba(var(--pl-accent-rgb), 0.05)),
        var(--pl-surface);
    color: var(--pl-ink);
    box-shadow: inset 1px 0 0 rgba(var(--pl-accent-rgb), 0.4),
                inset -1px 0 0 rgba(var(--pl-accent-rgb), 0.4);
}
.pl-versus__head .pl-versus__cell.is-feature {
    background:
        linear-gradient(180deg, rgba(var(--pl-accent-rgb), 0.24), rgba(var(--pl-accent-rgb), 0.10)),
        var(--pl-surface-2);
    color: var(--pl-ink);
    box-shadow: inset 1px 0 0 rgba(var(--pl-accent-rgb), 0.5),
                inset -1px 0 0 rgba(var(--pl-accent-rgb), 0.5),
                inset 0 3px 0 var(--pl-accent);
}
.pl-versus__cell.is-feature[data-mark="yes"]::before {
    color: var(--pl-accent-dk);
}
.pl-section--light .pl-versus__cell.is-feature[data-mark="yes"]::before,
.pl-section--paper  .pl-versus__cell.is-feature[data-mark="yes"]::before { color: var(--pl-accent-dk); }

/* ---- .pl-marquee : auto-scrolling flip-strip of board-face templates ------ */
.pl-marquee {
    position: relative;
    width: 100%;
    overflow: hidden;
    padding-block: 0.5rem;
    mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.pl-marquee__track {
    display: flex;
    align-items: center;
    gap: clamp(0.8rem, 2vw, 1.4rem);
    width: max-content;
    animation: pl-marquee 42s linear infinite;
    will-change: transform;
}
.pl-marquee:hover .pl-marquee__track { animation-play-state: paused; }
.pl-marquee__item {
    flex: none;
    height: clamp(92px, 13vw, 152px);
    border-radius: var(--pl-radius-sm);
    overflow: hidden;
    background: var(--pl-surface-2);
    border: 1px solid var(--pl-glass-border);
    box-shadow: var(--pl-shadow-card),
                0 0 40px rgba(var(--pl-accent-rgb), 0.08) inset;
}
/* Full board shown at its natural aspect — variable width so the different
   sizes read as different widths (no horizontal cropping). */
.pl-marquee__item img {
    display: block;
    height: 100%; width: auto;
}
.pl-pitchbar { margin-top: 0.55rem; }
.pl-pitchbar__label {
    align-self: center;
    font-family: var(--pl-font-mono);
    font-size: 0.62rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--pl-muted);
    margin-right: 0.5rem;
}
/* Duplicate the track content in markup (two identical .pl-marquee__track, or
   double the items) so the loop is seamless; we translate exactly -50%. */
@keyframes pl-marquee {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

/* ---- .pl-sizescale : proportional-width size-comparison bars -------------- */
.pl-sizescale {
    display: grid;
    gap: clamp(0.7rem, 1.6vw, 1.15rem);
}
.pl-sizescale__row {
    display: grid;
    grid-template-columns: minmax(72px, auto) 1fr;
    align-items: center;
    gap: clamp(0.8rem, 2vw, 1.5rem);
}
.pl-sizescale__label {
    font-family: var(--pl-font-mono);
    font-weight: 700;
    font-size: 0.9rem;
    letter-spacing: 0.03em;
    color: var(--pl-ink);
    white-space: nowrap;
    text-align: right;
}
.pl-sizescale__track {
    position: relative;
    height: clamp(2.6rem, 5vw, 3.4rem);
    display: flex;
    align-items: center;
}
.pl-sizescale__bar {
    /* width driven by --pl-w (a %), set inline per row */
    width: var(--pl-w, 50%);
    min-width: 3rem;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0 clamp(0.7rem, 1.6vw, 1.1rem);
    border-radius: var(--pl-radius-sm);
    background:
        linear-gradient(90deg, rgba(var(--pl-accent-rgb), 0.22), rgba(var(--pl-accent-rgb), 0.08)),
        var(--pl-surface-2);
    border: 1px solid rgba(var(--pl-accent-rgb), 0.3);
    box-shadow: 0 0 26px rgba(var(--pl-accent-rgb), 0.1) inset;
    /* pixel-dot texture inside the bar ties it to the LED product */
    position: relative;
    overflow: hidden;
    transform-origin: left center;
    animation: pl-barwipe 0.9s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.pl-sizescale__bar::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(1.5px 1.5px at center,
        rgba(255,255,255,0.18) 0 1.5px, transparent 1.5px);
    background-size: 9px 9px;
    pointer-events: none;
    mask-image: linear-gradient(90deg, #000, transparent 85%);
    -webkit-mask-image: linear-gradient(90deg, #000, transparent 85%);
}
.pl-sizescale__row.is-feature .pl-sizescale__bar {
    background:
        linear-gradient(90deg, rgba(var(--pl-accent-rgb), 0.4), rgba(var(--pl-accent-rgb), 0.14)),
        var(--pl-surface-2);
    border-color: rgba(var(--pl-accent-rgb), 0.6);
    box-shadow: var(--pl-glow-accent);
}
.pl-sizescale__meta {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    line-height: 1.15;
}
.pl-sizescale__ft {
    font-family: var(--pl-font-mono);
    font-weight: 700;
    font-size: clamp(0.82rem, 1.5vw, 1rem);
    color: var(--pl-ink);
    white-space: nowrap;
}
.pl-sizescale__px {
    font-family: var(--pl-font-mono);
    font-weight: 600;
    font-size: 0.66rem;
    letter-spacing: 0.06em;
    color: var(--pl-muted);
    white-space: nowrap;
}
@keyframes pl-barwipe {
    from { transform: scaleX(0); opacity: 0; }
    to   { transform: scaleX(1); opacity: 1; }
}

/* ---- .pl-console : stylized software-window mock (Studio OS) -------------- */
.pl-console {
    position: relative;
    border-radius: var(--pl-radius-lg);
    overflow: hidden;
    background: linear-gradient(180deg, var(--pl-surface-2), var(--pl-bg-2));
    border: 1px solid var(--pl-glass-border);
    box-shadow: var(--pl-shadow-hi), 0 0 90px rgba(var(--pl-accent-rgb), 0.1) inset;
    isolation: isolate;
}
.pl-console__chrome {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    padding: 0.75rem 1.1rem;
    background: rgba(6, 10, 22, 0.6);
    border-bottom: 1px solid var(--pl-hairline);
}
.pl-console__dots {
    display: inline-flex;
    gap: 0.4rem;
}
.pl-console__dots span {
    width: 11px; height: 11px;
    border-radius: 50%;
    background: rgba(255,255,255,0.18);
}
.pl-console__dots span:first-child { background: rgba(var(--pl-accent-rgb), 0.85); }
.pl-console__titlebar {
    font-family: var(--pl-font-mono);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--pl-muted);
}
.pl-console__body {
    position: relative;
    padding: clamp(1rem, 2.4vw, 1.6rem);
    min-height: 260px;
}
.pl-console__body img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--pl-radius-sm);
}
/* a labeled callout anchored over the console body; author positions it with
   inline top/left/right/bottom and drops a .pl-measure inside for the line. */
.pl-console__callout {
    position: absolute;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    max-width: 220px;
    z-index: 2;
}
.pl-console__callout-title {
    font-family: var(--pl-font-mono);
    font-weight: 700;
    font-size: 0.78rem;
    letter-spacing: 0.03em;
    color: var(--pl-ink);
}
.pl-console__callout-body {
    font-size: 0.8rem;
    line-height: 1.5;
    color: var(--pl-muted);
}

/* ---- Studio OS control-room UI (real software mock, not a photo+labels) --- */
.pl-console__body--ui {
    display: grid;
    grid-template-columns: 138px 1fr;
    gap: clamp(0.8rem, 1.8vw, 1.3rem);
    padding: clamp(0.9rem, 2vw, 1.5rem);
    min-height: 400px;
    background:
        radial-gradient(120% 130% at 100% 0%, rgba(var(--pl-accent-2-rgb), 0.12), transparent 55%),
        linear-gradient(180deg, rgba(10, 16, 36, 0.65), rgba(5, 8, 18, 0.8));
}
.pl-cnav {
    display: flex; flex-direction: column; gap: 0.35rem;
    padding: 0.6rem; border-radius: 14px;
    background: rgba(6, 10, 22, 0.55); border: 1px solid var(--pl-hairline);
}
.pl-cnav__brand {
    font-family: var(--pl-font-mono); font-weight: 700;
    letter-spacing: 0.16em; font-size: 0.6rem;
    color: var(--pl-accent-2); padding: 0.35rem 0.5rem 0.7rem;
}
.pl-cnav__item {
    display: flex; align-items: center; gap: 0.6rem;
    padding: 0.55rem 0.6rem; border-radius: 10px;
    font-size: 0.75rem; color: var(--pl-muted); white-space: nowrap;
}
.pl-cnav__item i { width: 1.15rem; text-align: center; font-size: 0.92rem; }
.pl-cnav__item.is-active {
    background: linear-gradient(90deg, rgba(var(--pl-accent-2-rgb), 0.22), transparent);
    color: var(--pl-ink); box-shadow: inset 2px 0 0 var(--pl-accent-2);
}
.pl-cmain { display: flex; flex-direction: column; gap: clamp(0.8rem, 1.6vw, 1.15rem); min-width: 0; }
.pl-cmonitor {
    position: relative; border-radius: 14px; overflow: hidden;
    border: 1px solid var(--pl-glass-border); background: #05070f;
    box-shadow: 0 14px 40px rgba(0, 0, 0, 0.5);
}
.pl-cmonitor img { display: block; width: 100%; height: auto; }
.pl-cmonitor__live, .pl-cmonitor__tag {
    position: absolute; top: 0.7rem; z-index: 2;
    font-family: var(--pl-font-mono); font-size: 0.6rem; font-weight: 700;
    letter-spacing: 0.12em; padding: 0.2rem 0.5rem; border-radius: 6px;
}
.pl-cmonitor__live { left: 0.7rem; color: #fff; background: rgba(220, 44, 44, 0.92); }
.pl-cmonitor__tag  { right: 0.7rem; color: var(--pl-muted); background: rgba(6, 10, 22, 0.72); letter-spacing: 0.18em; }
.pl-cpanels { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.6rem; }
.pl-cpanel {
    display: flex; gap: 0.6rem; padding: 0.7rem 0.75rem; border-radius: 12px;
    background: rgba(255, 255, 255, 0.035); border: 1px solid var(--pl-hairline);
    transition: border-color 0.25s, transform 0.25s;
}
.pl-cpanel:hover { border-color: rgba(var(--pl-accent-2-rgb), 0.5); transform: translateY(-2px); }
.pl-cpanel i { color: var(--pl-accent-2); font-size: 0.98rem; margin-top: 0.15rem; flex: none; }
.pl-cpanel b {
    display: block; font-family: var(--pl-font-mono); font-weight: 700;
    font-size: 0.72rem; letter-spacing: 0.02em; color: var(--pl-ink); margin-bottom: 0.2rem;
}
.pl-cpanel span { font-size: 0.72rem; line-height: 1.45; color: var(--pl-muted); }
@media (max-width: 768px) {
    .pl-console__body--ui { grid-template-columns: 1fr; min-height: 0; }
    .pl-cnav { flex-direction: row; flex-wrap: wrap; }
    .pl-cnav__brand { width: 100%; padding-bottom: 0.3rem; }
    .pl-cpanels { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 520px) { .pl-cpanels { grid-template-columns: 1fr; } }

/* Screenshot variant: frame a real Studio OS UI capture + capability strip below */
.pl-console__body--shot {
    display: flex; flex-direction: column;
    gap: clamp(0.9rem, 1.8vw, 1.35rem);
    padding: clamp(0.9rem, 2vw, 1.45rem);
    background: linear-gradient(180deg, rgba(10, 16, 36, 0.5), rgba(5, 8, 18, 0.72));
}
.pl-console__body--shot .pl-cmonitor img { border-radius: 12px; }

/* ---- .pl-figure-roi : big-number ROI treatment (wraps [data-roi] controls) */
/* This is a LAYOUT WRAPPER placed around the existing .pl-roi controls. It
   supplies the giant accent numeral + revenue bar + the $0 traditional
   contrast; the existing [data-roi]/[data-roi-out]/[data-roi-echo] hooks keep
   working because the JS targets those attributes, not these classes. */
.pl-figure-roi {
    display: grid;
    grid-template-columns: 1fr 1.05fr;
    gap: clamp(1.5rem, 4vw, 3.5rem);
    align-items: center;
}
.pl-figure-roi__viz {
    display: flex;
    flex-direction: column;
    gap: clamp(1rem, 2.4vw, 1.6rem);
}
/* giant accent numeral — author binds the value to [data-roi-out="life"] */
.pl-figure-roi__big {
    font-family: var(--pl-font-mono);
    font-weight: 700;
    font-size: clamp(3rem, 9vw, 6rem);
    line-height: 0.9;
    letter-spacing: -0.02em;
    background: var(--pl-grad-text);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
    text-shadow: 0 0 60px rgba(var(--pl-accent-rgb), 0.25);
}
.pl-figure-roi__caption {
    font-family: var(--pl-font-mono);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--pl-muted);
    margin-top: 0.35rem;
}
/* the filling revenue bar */
.pl-figure-roi__bar {
    position: relative;
    height: clamp(2.2rem, 4vw, 3rem);
    border-radius: 100px;
    background: rgba(var(--pl-accent-rgb), 0.08);
    border: 1px solid rgba(var(--pl-accent-rgb), 0.25);
    overflow: hidden;
}
.pl-figure-roi__bar-fill {
    position: absolute;
    inset: 0 auto 0 0;
    width: var(--pl-roi-fill, 82%);
    border-radius: 100px;
    background: var(--pl-grad);
    box-shadow: 0 0 30px rgba(var(--pl-accent-rgb), 0.4);
    transition: width 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.pl-figure-roi__bar-fill::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(1.5px 1.5px at center,
        rgba(255,255,255,0.25) 0 1.5px, transparent 1.5px);
    background-size: 10px 10px;
    mask-image: linear-gradient(90deg, transparent, #000);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000);
}
/* the "traditional board" contrast row: $0, flat, empty bar */
.pl-figure-roi__zero {
    display: flex;
    align-items: center;
    gap: 1rem;
}
.pl-figure-roi__zero-num {
    font-family: var(--pl-font-mono);
    font-weight: 700;
    font-size: clamp(1.4rem, 3vw, 2rem);
    color: var(--pl-faint);
    line-height: 1;
    white-space: nowrap;
}
.pl-figure-roi__zero-bar {
    flex: 1;
    height: 0.6rem;
    border-radius: 100px;
    background: var(--pl-hairline);
    border: 1px dashed var(--pl-glass-border);
}
.pl-figure-roi__zero-label {
    font-family: var(--pl-font-mono);
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--pl-faint);
    white-space: nowrap;
}

/* ============================================================================
   19d. MOTION / REDUCED-MOTION for the new motifs
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
    .pl-flow__link::after { animation: none; opacity: 1; left: 50%; }
    .pl-marquee__track    { animation: none; }
    .pl-sizescale__bar    { animation: none; transform: none; }
    .pl-figure-roi__bar-fill { transition: none; }
}

/* ============================================================================
   19e. RESPONSIVE for the new components (1024 / 768 / 560)
   ========================================================================== */
@media (max-width: 1024px) {
    .pl-figure-roi { grid-template-columns: 1fr; }
    .pl-versus     { grid-template-columns: minmax(120px, 1fr) repeat(2, minmax(0, 0.9fr)); }
}

@media (max-width: 768px) {
    /* Acts: stack index above copy, kill the alternating flip */
    .pl-act,
    .pl-act:nth-child(even) { grid-template-columns: 1fr; gap: 0.75rem; }
    .pl-act:nth-child(even) .pl-act__idx  { order: 0; text-align: left; }
    .pl-act:nth-child(even) .pl-act__main { order: 0; }
    .pl-act__idx { font-size: clamp(3rem, 16vw, 4.5rem); }
    .pl-act__idx::after { display: none; }

    /* Flow: wrap into a vertical stack; links become short vertical connectors */
    .pl-flow { flex-direction: column; align-items: stretch; }
    .pl-flow__node { flex: none; }
    .pl-flow__link {
        flex: none;
        width: 2px; height: clamp(1.6rem, 5vw, 2.4rem);
        align-self: center;
        margin: 0;
        background: linear-gradient(180deg,
            rgba(var(--pl-accent-rgb), 0.15),
            rgba(var(--pl-accent-rgb), 0.55),
            rgba(var(--pl-accent-rgb), 0.15));
    }
    .pl-flow__link[data-label]::before { font-size: 0.54rem; }
    .pl-flow__link::after {
        left: 50% !important; top: 0; margin: 0 0 0 -4px;
        animation-name: pl-signal-v;
    }
    @keyframes pl-signal-v {
        0%   { top: 0;    opacity: 0; }
        12%  { opacity: 1; }
        88%  { opacity: 1; }
        100% { top: 100%; opacity: 0; }
    }
}

@media (max-width: 560px) {
    .pl-display { font-size: clamp(2.2rem, 12vw, 3.2rem); }

    /* Versus: collapse to label + single feature column comparison is hard in a
       true grid on tiny screens — keep 3 cols but shrink type. */
    .pl-versus {
        grid-template-columns: minmax(90px, 1.2fr) repeat(2, minmax(0, 1fr));
        font-size: 0.85rem;
    }
    .pl-versus__cell { padding: 0.7rem 0.6rem; font-size: 0.82rem; }
    .pl-versus__row .pl-versus__cell:first-child { font-size: 0.68rem; }
    .pl-versus__head .pl-versus__cell { font-size: 0.68rem; min-height: 3.2rem; }

    .pl-sizescale__row { grid-template-columns: 1fr; gap: 0.3rem; }
    .pl-sizescale__label { text-align: left; }
    .pl-sizescale__bar { min-width: 40%; }

    .pl-console__callout { position: static; max-width: none; margin-top: 0.75rem; }
    .pl-console__body { min-height: 0; }

    .pl-figure-roi__zero { flex-wrap: wrap; }
}

/* ============================================================================
   HOME PAGE — .pl-home skin + home-only standout components
   The home page fronts BOTH product lines, so its skin blends the videoboard
   cool-tech blues/cyan with an omniboard "revenue" amber accent.
   ========================================================================== */
.pl-home {
    --pl-accent:       #3f7cff;   /* electric brand blue (shared) */
    --pl-accent-2:     #22d3ee;   /* broadcast cyan (videoboard) */
    --pl-accent-dk:    #0f2ccf;
    --pl-accent-rgb:   47, 107, 255;
    --pl-accent-2-rgb: 34, 211, 238;
    --pl-home-amber:     #ffb547; /* revenue accent (omniboard tie-in) */
    --pl-home-amber-rgb: 255, 181, 71;
    --pl-aurora:
        radial-gradient(1100px 640px at 80% -10%, rgba(34, 211, 238, 0.16), transparent 58%),
        radial-gradient(980px 560px at 6% 6%,     rgba(47, 107, 255, 0.20), transparent 60%),
        radial-gradient(1000px 720px at 50% 120%, rgba(255, 181, 71, 0.08), transparent 60%);
    --pl-grad:      linear-gradient(115deg, #22d3ee 0%, #3f7cff 52%, #ffb547 135%);
    --pl-grad-text: linear-gradient(100deg, #7ff0ff 0%, #6ea0ff 50%, #ffcf7a 122%);
    --pl-btn-grad:  linear-gradient(120deg, #4b8bff 0%, #2f6bff 100%);
    --pl-btn-ink:   #ffffff;
    --pl-accent-ink:#123a8f;
}

/* ---- HERO: full-bleed centered statement --------------------------------- */
.pl-home .pl-hero--home { text-align: center; }
.pl-home .pl-hero--home .pl-hero__inner { margin-inline: auto; }
.pl-home .pl-hero--home .pl-hero__inner > * { max-width: min(62rem, 92vw); margin-inline: auto; }
/* Replace the left-only readability scrim with a soft centered vignette so the
   statement floats over the LED field. */
.pl-home .pl-hero--home::before {
    background: radial-gradient(125% 95% at 50% 42%, transparent 38%, rgba(3, 6, 14, 0.55) 100%);
}
/* Animated LED "pixel field" — a twinkling dot matrix that pans slowly. */
.pl-hero__dots {
    position: absolute; inset: 0; z-index: -2; pointer-events: none;
    background-image: radial-gradient(rgba(var(--pl-accent-2-rgb), 0.55) 1.4px, transparent 1.7px);
    background-size: 34px 34px;
    -webkit-mask-image: radial-gradient(120% 82% at 50% 30%, #000 18%, transparent 74%);
    mask-image: radial-gradient(120% 82% at 50% 30%, #000 18%, transparent 74%);
    opacity: 0.5;
    animation: pl-dots-pan 24s linear infinite;
}
@keyframes pl-dots-pan { to { background-position: 340px 68px; } }
@media (prefers-reduced-motion: reduce) { .pl-hero__dots { animation: none; } }

.pl-home .pl-hero__title {
    font-family: var(--pl-font-display); font-weight: 400;
    font-size: clamp(2.9rem, 8vw, 6rem); line-height: 0.98; letter-spacing: -0.02em;
    color: var(--pl-ink); margin: 0.4rem auto 1.15rem; text-shadow: 0 4px 60px rgba(0, 0, 0, 0.5);
}
.pl-home .pl-hero__title em {
    font-style: normal;
    background: var(--pl-grad-text);
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.pl-home .pl-hero--home .pl-lede { margin-inline: auto; }
.pl-home .pl-hero__pills { display: flex; gap: 0.6rem; justify-content: center; flex-wrap: wrap; margin-top: 1.7rem; }
.pl-home .pl-hero__pill {
    display: inline-flex; align-items: center; gap: 0.5rem;
    padding: 0.5rem 1rem; border-radius: 999px;
    font: 700 0.76rem/1 var(--pl-font-mono); letter-spacing: 0.06em; text-transform: uppercase;
    color: var(--pl-ink); background: var(--pl-glass); border: 1px solid var(--pl-glass-border);
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.pl-home .pl-hero__pill i { color: var(--pl-accent-2); }
.pl-home .pl-hero__pill--omni i { color: var(--pl-home-amber); }

/* ---- PRODUCT SPLIT: two products, together & apart ----------------------- */
.pl-split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1rem, 2.5vw, 1.6rem); }
@media (max-width: 820px) { .pl-split { grid-template-columns: 1fr; } }
.pl-split__col {
    position: relative; overflow: hidden; border-radius: var(--pl-radius-lg);
    padding: clamp(1.6rem, 3vw, 2.5rem); border: 1px solid var(--pl-glass-border);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.03), transparent 40%), var(--pl-surface);
    box-shadow: var(--pl-shadow-card); isolation: isolate;
    transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
}
.pl-split__col:hover { transform: translateY(-4px); border-color: rgba(var(--pl-accent-rgb), 0.4); box-shadow: var(--pl-shadow-hi); }
.pl-split__col::before {
    content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0.55;
    background: radial-gradient(120% 72% at 100% 0%, rgba(var(--_c), 0.28), transparent 60%);
}
.pl-split__col--video { --_c: var(--pl-accent-2-rgb); }
.pl-split__col--omni  { --_c: var(--pl-home-amber-rgb); }
.pl-split__badge {
    display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.4rem 0.85rem; border-radius: 999px;
    font: 700 0.72rem/1 var(--pl-font-mono); letter-spacing: 0.1em; text-transform: uppercase;
    background: rgba(var(--_c), 0.14); color: #fff; border: 1px solid rgba(var(--_c), 0.42); margin-bottom: 1rem;
}
.pl-split__title { font-family: var(--pl-font-display); font-size: clamp(1.8rem, 3.4vw, 2.6rem); line-height: 1.05; color: var(--pl-ink); margin: 0 0 0.5rem; }
.pl-split__tag { color: var(--pl-muted); font-size: 1rem; margin: 0 0 1.25rem; }
.pl-split__list { list-style: none; margin: 0 0 1.5rem; padding: 0; display: grid; gap: 0.6rem; }
.pl-split__list li { display: flex; gap: 0.6rem; align-items: flex-start; color: var(--pl-text); font-size: 0.95rem; }
.pl-split__list i { color: rgb(var(--_c)); margin-top: 0.18rem; flex-shrink: 0; }
.pl-tie {
    margin-top: clamp(1rem, 2.5vw, 1.6rem); border-radius: var(--pl-radius);
    padding: clamp(1.1rem, 2.4vw, 1.6rem) clamp(1.4rem, 3vw, 2rem);
    display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; justify-content: center; text-align: center;
    background: linear-gradient(100deg, rgba(var(--pl-accent-2-rgb), 0.14), rgba(var(--pl-home-amber-rgb), 0.12));
    border: 1px solid var(--pl-glass-border);
}
.pl-tie__plus { font: 700 1.4rem/1 var(--pl-font-mono); color: var(--pl-accent-2); }
.pl-tie__text { color: var(--pl-ink); font-size: clamp(1rem, 2vw, 1.25rem); font-weight: 600; }
.pl-tie__text b { color: var(--pl-home-amber); }

/* ---- CONTROLLER TABLET CAROUSEL ------------------------------------------ */
.pl-tabcar { position: relative; max-width: 940px; margin-inline: auto; }
.pl-tabcar__viewport { overflow: hidden; border-radius: var(--pl-radius-lg); }
.pl-tabcar__track { display: flex; transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1); }
.pl-tabcar__slide { min-width: 100%; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: clamp(0.5rem, 2vw, 1.5rem); }
.pl-tabcar__frame {
    position: relative; border-radius: 22px; padding: 0.7rem;
    background: linear-gradient(180deg, #1a2340, #0c1428);
    border: 1px solid var(--pl-glass-border); box-shadow: var(--pl-shadow-hi);
}
.pl-tabcar__frame img { display: block; width: 100%; max-height: 58vh; object-fit: contain; border-radius: 14px; }
.pl-tabcar__cap { text-align: center; margin-top: 1rem; font: 700 0.8rem/1 var(--pl-font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--pl-muted); }
.pl-tabcar__nav { display: flex; align-items: center; justify-content: center; gap: 1rem; margin-top: 1.4rem; }
.pl-tabcar__btn {
    width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; cursor: pointer;
    background: var(--pl-glass); border: 1px solid var(--pl-glass-border); color: var(--pl-ink);
    transition: background 0.25s, transform 0.25s;
}
.pl-tabcar__btn:hover { background: rgba(var(--pl-accent-rgb), 0.25); transform: scale(1.06); }
.pl-tabcar__dots { display: flex; gap: 0.5rem; }
.pl-tabcar__dot { width: 9px; height: 9px; border-radius: 50%; border: 0; padding: 0; cursor: pointer; background: rgba(255, 255, 255, 0.22); transition: background 0.25s, transform 0.25s; }
.pl-tabcar__dot.is-active { background: var(--pl-accent); transform: scale(1.25); }

/* ---- SPORT GRID (restyled to the pl look) -------------------------------- */
.pl-sportgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: clamp(0.8rem, 2vw, 1.15rem); }
.pl-sportcard {
    position: relative; overflow: hidden; border-radius: var(--pl-radius); min-height: 190px;
    display: flex; align-items: flex-end; text-decoration: none; isolation: isolate;
    border: 1px solid var(--pl-glass-border); background: var(--pl-surface-2);
    box-shadow: var(--pl-shadow-card); transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.pl-sportcard:hover { transform: translateY(-5px); border-color: rgba(var(--pl-accent-rgb), 0.5); box-shadow: var(--pl-glow-accent); }
.pl-sportcard__bg { position: absolute; inset: 0; z-index: -2; background-size: cover; background-position: center; transition: transform 0.5s ease; }
.pl-sportcard:hover .pl-sportcard__bg { transform: scale(1.06); }
.pl-sportcard__scrim { position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgba(3, 6, 14, 0.92) 8%, rgba(3, 6, 14, 0.35) 55%, transparent 100%); }
.pl-sportcard__label { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 1rem 1.15rem; color: #fff; }
.pl-sportcard__name { display: inline-flex; align-items: center; gap: 0.6rem; font-weight: 700; font-size: 1.05rem; }
.pl-sportcard__name i { color: var(--pl-accent-2); }
.pl-sportcard__arrow { opacity: 0; transform: translateX(-6px); transition: opacity 0.3s, transform 0.3s; color: var(--pl-accent); }
.pl-sportcard:hover .pl-sportcard__arrow { opacity: 1; transform: translateX(0); }
.pl-sportcard--all { background: linear-gradient(135deg, #1e3065, #2f5dff); }
.pl-sportcard--all .pl-sportcard__label { justify-content: center; }

/* ---- TESTIMONIALS -------------------------------------------------------- */
.pl-quotes { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: clamp(1rem, 2.5vw, 1.5rem); }
.pl-quote {
    position: relative; border-radius: var(--pl-radius-lg); padding: clamp(1.6rem, 3vw, 2.2rem);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.03), transparent 45%), var(--pl-surface);
    border: 1px solid var(--pl-glass-border); box-shadow: var(--pl-shadow-card);
}
.pl-quote__mark { font-family: var(--pl-font-display); font-size: 3.4rem; line-height: 0.6; color: var(--pl-accent); opacity: 0.55; }
.pl-quote__body { color: var(--pl-ink); font-size: 1.08rem; line-height: 1.55; margin: 0.4rem 0 1.4rem; }
.pl-quote__cite { display: flex; align-items: center; gap: 0.8rem; }
.pl-quote__avatar { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; color: #fff; background: var(--pl-btn-grad); flex-shrink: 0; }
.pl-quote__who { font-weight: 700; color: var(--pl-text); font-size: 0.95rem; }
.pl-quote__role { color: var(--pl-faint); font-size: 0.82rem; }
.pl-quote__stars { color: var(--pl-home-amber); margin-left: auto; letter-spacing: 0.1em; }

/* ---- HERO brightness: the home hero runs brighter + more energetic than the
   default generative backdrop, with a softer vignette so it never crushes to black. */
.pl-home .pl-hero--home .pl-hero__bg {
    background:
        radial-gradient(1100px 620px at 74% 22%, rgba(var(--pl-accent-2-rgb), 0.44), transparent 62%),
        radial-gradient(1500px 480px at 50% 58%, rgba(var(--pl-accent-rgb),   0.42), transparent 64%),
        radial-gradient(920px 620px at 6% 2%,    rgba(var(--pl-accent-rgb),   0.36), transparent 60%),
        radial-gradient(820px 560px at 98% 98%,  rgba(var(--pl-home-amber-rgb), 0.18), transparent 60%),
        linear-gradient(180deg, #12204a 0%, #0d1836 52%, #0a1024 100%);
}
.pl-home .pl-hero--home::before {
    background: radial-gradient(132% 102% at 50% 40%, transparent 56%, rgba(4, 8, 20, 0.32) 100%);
}
.pl-home .pl-hero--home::after {
    height: 30%;
    background: linear-gradient(to top, var(--pl-bg) 6%, transparent 100%);
}
.pl-home .pl-hero__dots { opacity: 0.62; }

/* ---- HERO split: copy on the left, facility render on the right ---------- */
.pl-home .pl-hero--split { text-align: left; }
.pl-home .pl-hero__split {
    display: grid;
    grid-template-columns: 1.02fr 0.98fr;
    gap: clamp(1.5rem, 4.5vw, 3.5rem);
    align-items: center;
    width: 100%;
}
.pl-home .pl-hero--split .pl-hero__copy > * { max-width: 40rem; margin-inline: 0; }
.pl-home .pl-hero--split .pl-hero__title { margin: 0.3rem 0 1.1rem; text-align: left; }
.pl-home .pl-hero--split .pl-lede { margin-inline: 0; }
.pl-home .pl-hero--split .pl-cta-row { justify-content: flex-start; }
.pl-home .pl-hero--split .pl-hero__pills { justify-content: flex-start; }
.pl-home .pl-hero__figure { position: relative; margin: 0; }
.pl-home .pl-hero__figure img {
    display: block; width: 100%; height: auto;
    border-radius: var(--pl-radius-lg);
    border: 1px solid var(--pl-glass-border);
    box-shadow: var(--pl-shadow-hi), 0 0 80px rgba(var(--pl-accent-rgb), 0.22);
}
.pl-home .pl-hero__figcap {
    position: absolute; left: 50%; bottom: -0.9rem; transform: translateX(-50%);
    display: inline-flex; align-items: center; gap: 0.5rem; white-space: nowrap;
    padding: 0.5rem 1rem; border-radius: 999px;
    font: 700 0.76rem/1 var(--pl-font-mono); letter-spacing: 0.05em; text-transform: uppercase;
    color: var(--pl-ink); background: rgba(8, 13, 28, 0.85); border: 1px solid var(--pl-glass-border);
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}
.pl-home .pl-hero__figcap i.fa-bolt { color: var(--pl-accent-2); }
.pl-home .pl-hero__figcap i.fa-dollar-sign { color: var(--pl-home-amber); }
.pl-home .pl-hero__figcap span { color: var(--pl-faint); }
@media (max-width: 900px) {
    .pl-home .pl-hero__split { grid-template-columns: 1fr; gap: 2rem; }
    .pl-home .pl-hero__figure { max-width: 520px; margin-inline: auto; order: 2; }
    .pl-home .pl-hero--split .pl-hero__copy { text-align: center; }
    .pl-home .pl-hero--split .pl-hero__copy > * { margin-inline: auto; }
    .pl-home .pl-hero--split .pl-hero__title { text-align: center; }
    .pl-home .pl-hero--split .pl-cta-row,
    .pl-home .pl-hero--split .pl-hero__pills { justify-content: center; }
}