/* =========================================================================
   Genyad landing page
   Served at /. Every selector here is prefixed .v2- so it can never collide
   with landing_page.min.css (which base.html still loads for the shared
   header/footer).
   ========================================================================= */

.v2 {
    /* Ink: near-black, cooled slightly toward the brand blue rather than neutral grey. */
    --v2-ink: #07090f;
    --v2-ink-raised: #0d1220;
    --v2-ink-card: #111827;
    --v2-hairline: rgba(140, 170, 220, 0.14);
    --v2-hairline-bright: rgba(140, 190, 255, 0.32);

    --v2-text: #eef3fb;
    --v2-text-dim: #94a3bd;
    --v2-text-faint: #64748b;

    /* Accent tracks the logo's light blue so the shared header still reads as one brand. */
    --v2-accent: #4dd8ff;
    --v2-accent-deep: #1b9fd8;
    --v2-accent-glow: rgba(77, 216, 255, 0.28);
    --v2-accent-ink: #04252f;

    /* Single warm counterpoint, used sparingly — never next to the accent. */
    --v2-hot: #ff6b5d;

    --v2-radius: 18px;
    --v2-radius-lg: 26px;

    /* Shared card surface. Translucent rather than a solid fill so the drifting
       orbs in .v2-bg show through and every card picks up a slightly different
       tint depending on where it sits — that's what stops a page of dark
       rectangles reading as flat. The inset highlight is a 1px lit top edge,
       so cards look struck by the same light source as the hero. */
    --v2-surface: linear-gradient(168deg,
        rgba(255, 255, 255, 0.065) 0%,
        rgba(255, 255, 255, 0.022) 44%,
        rgba(255, 255, 255, 0.008) 100%);
    --v2-surface-border: rgba(190, 215, 255, 0.11);
    --v2-surface-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.085),
        0 1px 2px rgba(0, 0, 0, 0.34),
        0 20px 44px -26px rgba(0, 0, 0, 0.8);
    --v2-surface-shadow-hover:
        inset 0 1px 0 rgba(255, 255, 255, 0.17),
        0 0 0 1px rgba(77, 216, 255, 0.3),
        0 26px 58px -24px rgba(77, 216, 255, 0.32);

    background: var(--v2-ink);
    color: var(--v2-text);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    /* clip, NOT hidden. overflow-x: hidden forces overflow-y to compute as
       auto, which makes this element a scroll container — and that silently
       breaks position: sticky on every descendant, because the sticky rail
       then anchors to this box (which never scrolls) instead of the viewport.
       overflow: clip still clips without creating a scroll container.
       Everything that could overflow sideways already clips itself anyway
       (.v2-bg, .v2-hero, .v2-marquee, .v2-close), so if a browser drops this
       declaration the worst case is a stray pixel of horizontal scroll rather
       than a broken sticky rail. */
    overflow-x: clip;
    position: relative;
    isolation: isolate;
}

.v2 *,
.v2 *::before,
.v2 *::after { box-sizing: border-box; }

/* Everything except .v2-bg sits above the ambient layers. */
.v2 > * { position: relative; z-index: 1; }

.v2-container {
    width: 100%;
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 32px;
}

/* =========================================================================
   Ambient background
   A fixed stack that stays behind every section, so depth carries through the
   whole page instead of dying after the hero: three slow-drifting colour
   orbs, a fine engineering grid, and a film-grain layer to stop the large
   flat areas from banding.
   ========================================================================= */

.v2-bg {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}

.v2-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(90px);
    opacity: 0.5;
    will-change: transform;
}

.v2-orb-1 {
    width: 46vw; height: 46vw;
    top: -14vw; left: -10vw;
    background: radial-gradient(circle, rgba(77, 216, 255, 0.42) 0%, transparent 66%);
    animation: v2-drift-a 26s ease-in-out infinite alternate;
}

.v2-orb-2 {
    width: 40vw; height: 40vw;
    top: 8vw; right: -12vw;
    background: radial-gradient(circle, rgba(120, 110, 255, 0.36) 0%, transparent 68%);
    animation: v2-drift-b 32s ease-in-out infinite alternate;
}

.v2-orb-3 {
    width: 52vw; height: 52vw;
    bottom: -22vw; left: 22vw;
    background: radial-gradient(circle, rgba(27, 159, 216, 0.28) 0%, transparent 70%);
    animation: v2-drift-c 38s ease-in-out infinite alternate;
}

@keyframes v2-drift-a {
    from { transform: translate3d(0, 0, 0) scale(1); }
    to   { transform: translate3d(6vw, 5vh, 0) scale(1.12); }
}
@keyframes v2-drift-b {
    from { transform: translate3d(0, 0, 0) scale(1.08); }
    to   { transform: translate3d(-7vw, 7vh, 0) scale(1); }
}
@keyframes v2-drift-c {
    from { transform: translate3d(0, 0, 0) scale(1); }
    to   { transform: translate3d(4vw, -6vh, 0) scale(1.15); }
}

.v2-grid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(to right, rgba(150, 190, 240, 0.05) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(150, 190, 240, 0.05) 1px, transparent 1px);
    background-size: 74px 74px;
    mask-image: radial-gradient(100% 80% at 50% 0%, #000 0%, transparent 78%);
    -webkit-mask-image: radial-gradient(100% 80% at 50% 0%, #000 0%, transparent 78%);
}

/* Grain keeps the wide dark gradients from banding on cheap panels. */
.v2-noise {
    position: absolute;
    inset: 0;
    opacity: 0.028;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- shared type ---------- */

.v2 h1, .v2 h2, .v2 h3 {
    margin: 0;
    letter-spacing: -0.035em;
    line-height: 1.02;
    font-weight: 800;
    text-wrap: balance;
}

.v2-display {
    font-size: clamp(2.6rem, 6.4vw, 6rem);
}

.v2-h2 {
    font-size: clamp(2rem, 4.2vw, 3.7rem);
}

.v2-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--v2-accent);
}

.v2-eyebrow::before {
    content: '';
    width: 22px;
    height: 1px;
    background: var(--v2-accent);
    opacity: 0.7;
}

.v2-lede {
    font-size: clamp(1.02rem, 1.5vw, 1.22rem);
    line-height: 1.6;
    color: var(--v2-text-dim);
    margin: 18px 0 0;
    max-width: 62ch;
}

/* The one place a gradient is allowed: a single clause of the hero headline. */
.v2-grad {
    background: linear-gradient(105deg, var(--v2-accent) 0%, #a8e8ff 45%, #ffffff 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

/* ---------- buttons ---------- */

.v2-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 15px 26px;
    border-radius: 999px;
    border: 1px solid transparent;
    font-family: inherit;
    font-size: 0.97rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.15;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: transform 0.16s ease, box-shadow 0.16s ease, background 0.16s ease, border-color 0.16s ease;
}

.v2-btn-primary {
    background: var(--v2-accent);
    color: var(--v2-accent-ink);
    box-shadow: 0 0 0 0 var(--v2-accent-glow);
}

.v2-btn-primary:hover {
    background: #6fe1ff;
    transform: translateY(-2px);
    box-shadow: 0 12px 34px var(--v2-accent-glow);
}

.v2-btn-ghost {
    background: rgba(255, 255, 255, 0.04);
    border-color: var(--v2-hairline-bright);
    color: var(--v2-text);
}

.v2-btn-ghost:hover {
    background: rgba(255, 255, 255, 0.09);
    border-color: var(--v2-accent);
    transform: translateY(-2px);
}

.v2-btn-lg { padding: 18px 34px; font-size: 1.04rem; }

.v2-btn:active { transform: translateY(0); }

/* ---------- hero ---------- */

.v2-hero {
    position: relative;
    /* The site header is position: fixed at a constant ~91px tall regardless of
       viewport, so the floor here has to clear that plus a gap, not just look
       reasonable in isolation. A 72px floor let the "New" badge render partly
       under the header on every screen narrower than ~830px. */
    padding: clamp(116px, 11vw, 132px) 0 clamp(56px, 7vw, 84px);
    overflow: hidden;
    isolation: isolate;
}

/* One concentrated light source right behind the headline. The page-wide grid
   and drifting orbs live in .v2-bg — deliberately not repeated here, since two
   grids at different scales moiré against each other. */
.v2-hero::before {
    content: '';
    position: absolute;
    inset: -34% -10% auto -10%;
    height: 132%;
    background: radial-gradient(48% 46% at 30% 14%, rgba(77, 216, 255, 0.16) 0%, transparent 70%);
    z-index: -1;
    pointer-events: none;
}

.v2-badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 7px 8px 7px 14px;
    border-radius: 999px;
    border: 1px solid var(--v2-hairline-bright);
    background: rgba(77, 216, 255, 0.07);
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--v2-text);
    margin-bottom: 26px;
}

.v2-badge b {
    padding: 3px 10px;
    border-radius: 999px;
    background: var(--v2-accent);
    color: var(--v2-accent-ink);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.v2-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 36px;
}

.v2-hero-note {
    margin: 18px 0 0;
    font-size: 0.85rem;
    color: var(--v2-text-faint);
}

/* ---------- stat strip ---------- */

.v2-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    margin-top: clamp(52px, 7vw, 78px);
    border: 1px solid var(--v2-surface-border);
    border-radius: var(--v2-radius-lg);
    background: var(--v2-surface);
    box-shadow: var(--v2-surface-shadow);
    backdrop-filter: blur(16px) saturate(125%);
    -webkit-backdrop-filter: blur(16px) saturate(125%);
    overflow: hidden;
}

.v2-stat {
    padding: 32px 28px;
    border-right: 1px solid var(--v2-surface-border);
    transition: background 0.22s ease;
}

.v2-stat:hover { background: rgba(77, 216, 255, 0.045); }

.v2-stat:last-child { border-right: none; }

.v2-stat-n {
    font-size: clamp(2.1rem, 4vw, 3rem);
    font-weight: 800;
    letter-spacing: -0.045em;
    line-height: 1;
    color: var(--v2-accent);
    font-variant-numeric: tabular-nums;
}

.v2-stat-l {
    margin-top: 9px;
    font-size: 0.87rem;
    font-weight: 600;
    color: var(--v2-text-dim);
}

/* ---------- marquee ---------- */

.v2-marquee {
    border-top: 1px solid var(--v2-hairline);
    border-bottom: 1px solid var(--v2-hairline);
    padding: 17px 0;
    overflow: hidden;
    background: var(--v2-ink-raised);
}

.v2-marquee-track {
    display: flex;
    align-items: center;
    gap: 46px;
    width: max-content;
    animation: v2-scroll 34s linear infinite;
}

.v2-marquee-track span {
    font-size: 0.83rem;
    font-weight: 700;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--v2-text-faint);
    white-space: nowrap;
}

.v2-marquee-track span::after {
    content: '◆';
    margin-left: 46px;
    color: var(--v2-accent);
    opacity: 0.45;
}

@keyframes v2-scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

.v2-marquee:hover .v2-marquee-track { animation-play-state: paused; }

/* ---------- generic section ---------- */

.v2-section {
    padding: clamp(54px, 6.5vw, 88px) 0;
}

.v2-section-head {
    max-width: 780px;
    margin-bottom: clamp(38px, 5vw, 58px);
}

.v2-section-head .v2-h2 { margin-top: 14px; }

.v2-center { margin-left: auto; margin-right: auto; text-align: center; }
.v2-center .v2-lede { margin-left: auto; margin-right: auto; }

/* ---------- problem cards ---------- */

.v2-problem-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 18px;
}

.v2-problem {
    position: relative;
    padding: 30px 26px 32px;
    border: 1px solid var(--v2-surface-border);
    border-radius: var(--v2-radius);
    background: var(--v2-surface);
    box-shadow: var(--v2-surface-shadow);
    overflow: hidden;
    transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}

.v2-problem:hover {
    transform: translateY(-4px);
    border-color: rgba(255, 107, 93, 0.42);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.17),
        0 0 0 1px rgba(255, 107, 93, 0.26),
        0 26px 58px -24px rgba(255, 107, 93, 0.3);
}

/* These three are the "here's what hurts" cards, so they get the warm
   counterpoint colour rather than the accent — a corner bloom instead of a
   flat bar across the top. */
.v2-problem::before {
    content: '';
    position: absolute;
    width: 200px;
    height: 200px;
    left: -80px;
    top: -90px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 107, 93, 0.3) 0%, transparent 68%);
    pointer-events: none;
}

.v2-problem h3 {
    font-size: 1.16rem;
    letter-spacing: -0.02em;
}

.v2-problem p {
    margin: 12px 0 0;
    font-size: 0.95rem;
    line-height: 1.62;
    color: var(--v2-text-dim);
}

/* =========================================================================
   Scroller: sticky rail + scrolling panels
   The rail on the left stays pinned and highlights whichever panel is
   currently in view, so it doubles as a table of contents and a set of tabs
   (clicking an item jumps to its panel). The panels on the right are just
   normal document flow — the scroll position drives the rail, not the other
   way round, so there is no scroll hijacking and deep links still work.
   ========================================================================= */

.v2-scroller {
    display: grid;
    grid-template-columns: minmax(230px, 0.82fr) 1.18fr;
    gap: clamp(28px, 4vw, 68px);
    align-items: start;
}

/* Clears the fixed site header (position: fixed, ~1rem padding).
   align-self: start is load-bearing, not decorative: a stretched grid item
   would fill the whole row, leaving the sticky box no room to travel inside
   its containing block. Stated locally so it survives changes to the
   container's align-items. */
.v2-scroller-rail {
    position: sticky;
    top: 104px;
    align-self: start;
}

.v2-rail-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    border-left: 1px solid var(--v2-surface-border);
}

.v2-rail-item {
    position: relative;
    display: flex;
    align-items: baseline;
    gap: 14px;
    width: 100%;
    padding: 15px 16px 15px 22px;
    background: none;
    border: none;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
    color: var(--v2-text-faint);
    transition: color 0.2s ease;
}

/* The moving indicator is a bar over the list's own left border, so the
   active row reads as a position on a track rather than a floating pill. */
.v2-rail-item::before {
    content: '';
    position: absolute;
    left: -1px;
    top: 8px;
    bottom: 8px;
    width: 2px;
    border-radius: 2px;
    background: var(--v2-accent);
    opacity: 0;
    transform: scaleY(0.4);
    transform-origin: center;
    transition: opacity 0.24s ease, transform 0.24s ease;
}

.v2-rail-item:hover { color: var(--v2-text-dim); }

.v2-rail-item.is-active { color: var(--v2-text); }

.v2-rail-item.is-active::before { opacity: 1; transform: scaleY(1); }

.v2-rail-num {
    flex: none;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    font-variant-numeric: tabular-nums;
    color: var(--v2-text-faint);
    transition: color 0.2s ease;
}

.v2-rail-item.is-active .v2-rail-num { color: var(--v2-accent); }

.v2-rail-label {
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: -0.015em;
    line-height: 1.3;
}

.v2-rail-item:focus-visible {
    outline: 2px solid var(--v2-accent);
    outline-offset: -2px;
    border-radius: 8px;
}

/* =========================================================================
   Tabs
   Used for the agent capabilities, deliberately a different mechanic from the
   scroll-driven rail above it. The five "how it works" steps are a sequence,
   so scrolling through them in order is right. These four are parallel
   capabilities with no inherent order, and each one has an animation that is
   the actual payload — so they're explored on click, one at a time, and
   switching restarts the animation from frame one.
   ========================================================================= */

.v2-tablist {
    display: flex;
    gap: 4px;
    overflow-x: auto;
    border-bottom: 1px solid var(--v2-surface-border);
    margin-bottom: 22px;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.v2-tablist::-webkit-scrollbar { display: none; }

.v2-tab {
    position: relative;
    display: flex;
    align-items: baseline;
    gap: 9px;
    flex: none;
    padding: 14px 18px 16px;
    background: none;
    border: none;
    font-family: inherit;
    font-size: 0.97rem;
    font-weight: 700;
    letter-spacing: -0.015em;
    white-space: nowrap;
    color: var(--v2-text-faint);
    cursor: pointer;
    transition: color 0.2s ease;
}

.v2-tab:hover { color: var(--v2-text-dim); }

.v2-tab[aria-selected="true"] { color: var(--v2-text); }

/* Underline rides on the tablist's own border rather than floating. */
.v2-tab::after {
    content: '';
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: -1px;
    height: 2px;
    border-radius: 2px;
    background: var(--v2-accent);
    transform: scaleX(0);
    transition: transform 0.24s ease;
}

.v2-tab[aria-selected="true"]::after { transform: scaleX(1); }

.v2-tab-num {
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    font-variant-numeric: tabular-nums;
    color: var(--v2-text-faint);
    transition: color 0.2s ease;
}

.v2-tab[aria-selected="true"] .v2-tab-num { color: var(--v2-accent); }

.v2-tab:focus-visible {
    outline: 2px solid var(--v2-accent);
    outline-offset: -3px;
    border-radius: 8px;
}

/* Sized to fill most of the screen, and — critically — to clear the TALLEST
   panel. The stage is the sticky element, so if its height changed with the
   active tab, the scroll-to-tab mapping below would divide by a moving number
   and land on the wrong tab. A viewport-relative value is safe here because
   it's constant for a given viewport; it's variation *between tabs* that
   breaks the mapping. The clamp keeps it from outgrowing a short laptop
   screen, where a taller stage than the viewport would defeat the pinning. */
/* Floor sits just above the tallest panel's content (~415px) rather than higher:
   a larger floor wins over the vh term on short laptop screens and pushes the
   pinned stage taller than the viewport, which defeats the pinning. */
.v2-tabpanels { min-height: clamp(440px, 68vh, 760px); }

/* ---------- scroll-driven pinning ----------
   The tabs also advance as you scroll. That needs scroll distance to map onto,
   so the track is deliberately taller than the viewport and the stage sticks
   inside it: one tab per screenful of scrolling. The scroll drives the tab, the
   tab never drives the scroll except on an explicit click, so the page never
   fights the user's wheel. */

.v2-pin-track {
    /* --tab-count is set in the markup so the height always matches the number
       of tabs rather than being a magic number here. */
    height: calc(var(--tab-count, 4) * 85vh);
}

.v2-pin-stage {
    position: sticky;
    top: 96px;
}

/* Below this, or with reduced motion, pinning is dropped entirely and the tabs
   go back to being plain click-only tabs in normal flow. A pinned section on a
   short or narrow screen eats the whole viewport and feels like a trap. */
@media (max-width: 900px), (prefers-reduced-motion: reduce) {
    .v2-pin-track { height: auto; }
    .v2-pin-stage { position: static; }
    /* Unpinned there's no mapping to protect, so the reserved height would just
       leave dead space under the shorter panels. */
    .v2-tabpanels { min-height: 0; }
}

/* ---------- panels ---------- */

.v2-scroller-panels {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Copy on one side, the animation on the other. This isn't only cosmetic: with
   everything stacked, the richest panel ran to ~800px, which both overflowed a
   short laptop viewport and made the stage height vary between tabs — and a
   varying stage height is what breaks the scroll-to-tab mapping. Splitting the
   columns roughly halves the height and uses width that was sitting empty. */
.v2-panel {
    position: relative;
    display: grid;
    grid-template-columns: 1.02fr 0.98fr;
    column-gap: clamp(28px, 3.4vw, 52px);
    align-items: center;
    align-content: center;
    min-height: 300px;
    padding: 38px 36px 40px;
    border: 1px solid var(--v2-surface-border);
    border-radius: var(--v2-radius-lg);
    background: var(--v2-surface);
    box-shadow: var(--v2-surface-shadow);
    backdrop-filter: blur(16px) saturate(125%);
    -webkit-backdrop-filter: blur(16px) saturate(125%);
    overflow: hidden;
    scroll-margin-top: 120px;
    transition: border-color 0.3s ease, box-shadow 0.3s ease, opacity 0.3s ease;
}

/* display:flex above beats the hidden attribute's UA display:none, so the
   inactive tab panels would all stay visible without this. Using display
   (rather than opacity) is also what gives the animation restart for free:
   an element in display:none has no running animations, so it replays from
   frame one when its tab is selected. */
.v2-panel[hidden] { display: none; }

.v2-panel-copy { min-width: 0; }
.v2-panel-media { min-width: 0; }

/* The visual already sits in its own column, so the stacked top margin would
   just push it off-centre. */
.v2-panel-media .v2-viz { margin-top: 0; }

/* One column below this — two narrow columns would squash both the copy and
   the animation. */
@media (max-width: 1000px) {
    .v2-panel {
        grid-template-columns: 1fr;
        row-gap: 24px;
        align-items: start;
    }
}

/* On desktop, side-by-side leaves .v2-tabpanels' reserved height (up to 760px,
   sized so switching tabs doesn't change the pinned stage's height) mostly
   empty under any panel whose copy+graphic don't reach that ceiling. Stacking
   the graphic under bigger copy fills that budget instead of leaving it dead,
   and still lands well under the 760px cap. */
@media (min-width: 1001px) {
    .v2-panel {
        grid-template-columns: 1fr;
        row-gap: 36px;
    }

    .v2-panel-media {
        width: 100%;
        max-width: 620px;
        margin: 0 auto;
    }

    .v2-panel h3 {
        font-size: clamp(1.6rem, 2.6vw, 2.15rem);
    }

    .v2-panel p {
        font-size: 1.125rem;
        max-width: 62ch;
    }

    .v2-panel-points li {
        font-size: 1.05rem;
    }
}

.v2-panel::after {
    content: '';
    position: absolute;
    width: 280px;
    height: 280px;
    right: -90px;
    top: -100px;
    border-radius: 50%;
    background: radial-gradient(circle, var(--v2-accent-glow) 0%, transparent 68%);
    opacity: 0.5;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

/* The in-view panel is brought forward; the others recede rather than
   disappear, so you keep the sense of a list you're moving through. */
.v2-panel.is-active {
    border-color: rgba(77, 216, 255, 0.4);
    box-shadow: var(--v2-surface-shadow-hover);
}

.v2-panel.is-active::after { opacity: 1; }

.v2-panel-num {
    display: block;
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    color: var(--v2-accent);
    font-variant-numeric: tabular-nums;
    margin-bottom: 16px;
    position: relative;
}

.v2-panel h3 {
    font-size: clamp(1.3rem, 2.1vw, 1.75rem);
    letter-spacing: -0.025em;
    position: relative;
}

.v2-panel p {
    margin: 14px 0 0;
    font-size: 1rem;
    line-height: 1.66;
    color: var(--v2-text-dim);
    max-width: 52ch;
    position: relative;
}

/* Concrete specifics under the summary line — what the step actually does,
   rather than leaving the card as one vague sentence. */
.v2-panel-points {
    list-style: none;
    margin: 20px 0 0;
    padding: 0;
    display: grid;
    gap: 10px;
    position: relative;
    max-width: 56ch;
}

.v2-panel-points li {
    position: relative;
    padding-left: 26px;
    font-size: 0.94rem;
    line-height: 1.55;
    color: var(--v2-text-dim);
}

.v2-panel-points li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.42em;
    width: 13px;
    height: 7px;
    border-left: 2px solid var(--v2-accent);
    border-bottom: 2px solid var(--v2-accent);
    transform: rotate(-45deg);
    opacity: 0.85;
}

/* Names what the animation below is showing, so the visual isn't left to
   speak entirely for itself. */
.v2-viz-cap {
    margin: 10px 0 0;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--v2-text-faint);
    position: relative;
}

/* =========================================================================
   Panel visualisations
   Each agent capability gets a small abstract animation of the thing it
   actually does. They loop, but are paused unless their panel is the one in
   view — so nothing animates off-screen burning battery, and the motion
   reads as a consequence of scrolling to that step.
   ========================================================================= */

.v2-viz {
    position: relative;
    margin-top: 26px;
    padding: 20px;
    border: 1px solid var(--v2-surface-border);
    border-radius: 14px;
    background: rgba(4, 8, 16, 0.5);
    overflow: hidden;
}

.v2-viz * { animation-play-state: paused; }
.v2-panel.is-active .v2-viz * { animation-play-state: running; }

/* ---- 1. script: lines typing themselves in ---- */

.v2-viz-script {
    display: flex;
    flex-direction: column;
    gap: 11px;
}

.v2-viz-line {
    height: 9px;
    border-radius: 5px;
    background: linear-gradient(90deg, var(--v2-accent), rgba(77, 216, 255, 0.25));
    width: 0;
    animation: v2-type 5.6s steps(28, end) infinite;
}

.v2-viz-line:nth-child(1) { --w: 92%; animation-delay: 0s; }
.v2-viz-line:nth-child(2) { --w: 74%; animation-delay: 0.5s; }
.v2-viz-line:nth-child(3) { --w: 86%; animation-delay: 1s; }
.v2-viz-line:nth-child(4) { --w: 58%; animation-delay: 1.5s; }

@keyframes v2-type {
    0%        { width: 0; opacity: 0.85; }
    26%, 78%  { width: var(--w); opacity: 1; }
    96%, 100% { width: var(--w); opacity: 0.18; }
}

.v2-viz-caret {
    position: absolute;
    left: 20px;
    bottom: 20px;
    width: 2px;
    height: 15px;
    background: var(--v2-accent);
    animation: v2-blink 1s steps(2, end) infinite;
}

@keyframes v2-blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }

/* ---- 2. visuals: clips picked from the library and assembled into
   hook / product demo / CTA. Colour is the connective tissue — the tile that
   lights up cyan is the one that lands in the cyan Hook slot, so you can read
   which clip became which part of the ad rather than just "something got
   selected". One 8s loop; each element has explicit absolute timings inside
   it rather than shared keyframes plus delays, so the three picks and the
   three fills stay in lockstep. ---- */

.v2-viz-compose {
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.v2-compose-cap {
    font-size: 0.63rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--v2-text-faint);
}

.v2-compose-lib {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 6px;
}

.v2-lib-clip {
    aspect-ratio: 1 / 1;
    border-radius: 6px;
    border: 1px solid var(--v2-surface-border);
    background: rgba(255, 255, 255, 0.045);
}

/* The three that get chosen. --c is set per clip in the markup. */
.v2-lib-clip.is-hook { animation: v2-pick-hook 8s ease-in-out infinite; }
.v2-lib-clip.is-body { animation: v2-pick-body 8s ease-in-out infinite; }
.v2-lib-clip.is-cta  { animation: v2-pick-cta  8s ease-in-out infinite; }

@keyframes v2-pick-hook {
    0%, 4%    { border-color: var(--v2-surface-border); background: rgba(255,255,255,0.045); transform: scale(1); box-shadow: none; }
    9%, 16%   { border-color: var(--c); background: rgba(255,255,255,0.045); transform: scale(1.14); box-shadow: 0 0 0 3px rgba(77,216,255,0.22); }
    22%, 88%  { border-color: var(--c); background: var(--c); transform: scale(1); box-shadow: none; }
    96%, 100% { border-color: var(--v2-surface-border); background: rgba(255,255,255,0.045); transform: scale(1); box-shadow: none; }
}

@keyframes v2-pick-body {
    0%, 26%   { border-color: var(--v2-surface-border); background: rgba(255,255,255,0.045); transform: scale(1); box-shadow: none; }
    31%, 38%  { border-color: var(--c); background: rgba(255,255,255,0.045); transform: scale(1.14); box-shadow: 0 0 0 3px rgba(120,110,255,0.24); }
    44%, 88%  { border-color: var(--c); background: var(--c); transform: scale(1); box-shadow: none; }
    96%, 100% { border-color: var(--v2-surface-border); background: rgba(255,255,255,0.045); transform: scale(1); box-shadow: none; }
}

@keyframes v2-pick-cta {
    0%, 48%   { border-color: var(--v2-surface-border); background: rgba(255,255,255,0.045); transform: scale(1); box-shadow: none; }
    53%, 60%  { border-color: var(--c); background: rgba(255,255,255,0.045); transform: scale(1.14); box-shadow: 0 0 0 3px rgba(255,107,93,0.24); }
    66%, 88%  { border-color: var(--c); background: var(--c); transform: scale(1); box-shadow: none; }
    96%, 100% { border-color: var(--v2-surface-border); background: rgba(255,255,255,0.045); transform: scale(1); box-shadow: none; }
}

/* Chevron hinting the library-to-timeline direction. */
.v2-compose-flow {
    display: flex;
    justify-content: center;
    color: var(--v2-text-faint);
    line-height: 0;
    margin: 1px 0;
}

.v2-compose-flow svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.2; }

/* Slot widths echo a real ad: short hook, long demo, short CTA. */
.v2-compose-slots {
    display: flex;
    gap: 6px;
    height: 34px;
}

.v2-slot {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 7px;
    border: 1px dashed var(--v2-surface-border);
    overflow: hidden;
    font-size: 0.6rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--v2-text-faint);
}

.v2-slot-hook { flex: 1.15; }
.v2-slot-body { flex: 3; }
.v2-slot-cta  { flex: 1; }

/* The fill sweeps in from the left as that part of the ad is placed. */
.v2-slot::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--c);
    opacity: 0.9;
    transform: scaleX(0);
    transform-origin: left center;
}

.v2-slot span { position: relative; }

.v2-slot-hook::before { animation: v2-fill-hook 8s ease-out infinite; }
.v2-slot-body::before { animation: v2-fill-body 8s ease-out infinite; }
.v2-slot-cta::before  { animation: v2-fill-cta  8s ease-out infinite; }

.v2-slot-hook span { animation: v2-lit-hook 8s ease-out infinite; }
.v2-slot-body span { animation: v2-lit-body 8s ease-out infinite; }
.v2-slot-cta  span { animation: v2-lit-cta  8s ease-out infinite; }

@keyframes v2-fill-hook {
    0%, 16%   { transform: scaleX(0); }
    24%, 88%  { transform: scaleX(1); }
    96%, 100% { transform: scaleX(0); }
}
@keyframes v2-fill-body {
    0%, 38%   { transform: scaleX(0); }
    46%, 88%  { transform: scaleX(1); }
    96%, 100% { transform: scaleX(0); }
}
@keyframes v2-fill-cta {
    0%, 60%   { transform: scaleX(0); }
    68%, 88%  { transform: scaleX(1); }
    96%, 100% { transform: scaleX(0); }
}

/* Label flips to the dark ink once its slot is filled, so it stays readable
   against the fill instead of vanishing into it. */
@keyframes v2-lit-hook {
    0%, 20%   { color: var(--v2-text-faint); }
    26%, 88%  { color: var(--v2-accent-ink); }
    96%, 100% { color: var(--v2-text-faint); }
}
@keyframes v2-lit-body {
    0%, 42%   { color: var(--v2-text-faint); }
    48%, 88%  { color: #fff; }
    96%, 100% { color: var(--v2-text-faint); }
}
@keyframes v2-lit-cta {
    0%, 64%   { color: var(--v2-text-faint); }
    70%, 88%  { color: #2a0b07; }
    96%, 100% { color: var(--v2-text-faint); }
}


/* ---- 3. voiceover: a waveform ---- */

.v2-viz-wave {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 3px;
    height: 74px;
}

.v2-viz-wave i {
    flex: 1;
    min-width: 2px;
    border-radius: 3px;
    background: linear-gradient(180deg, var(--v2-accent), var(--v2-accent-deep));
    transform: scaleY(0.16);
    transform-origin: center;
    /* Each bar carries its own --i and --h from the markup, so one keyframe
       set drives every bar without 28 separate rules. */
    animation: v2-wave 1.5s ease-in-out infinite alternate;
    animation-delay: calc(var(--i) * 55ms);
    height: 100%;
}

@keyframes v2-wave {
    from { transform: scaleY(0.16); opacity: 0.55; }
    to   { transform: scaleY(var(--h)); opacity: 1; }
}

/* ---- 4. edit: segments assembling, playhead sweeping ---- */

.v2-viz-timeline {
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.v2-track-row {
    display: flex;
    gap: 6px;
    height: 17px;
}

.v2-seg {
    border-radius: 5px;
    transform-origin: left center;
    transform: scaleX(0);
    animation: v2-assemble 5.2s ease-out infinite;
    animation-delay: calc(var(--i) * 300ms);
}

.v2-seg-a { flex: 2; background: linear-gradient(90deg, var(--v2-accent), var(--v2-accent-deep)); }
.v2-seg-b { flex: 3; background: linear-gradient(90deg, rgba(120, 110, 255, 0.85), rgba(120, 110, 255, 0.4)); }
.v2-seg-c { flex: 1.4; background: linear-gradient(90deg, rgba(255, 107, 93, 0.8), rgba(255, 107, 93, 0.35)); }

@keyframes v2-assemble {
    0%        { transform: scaleX(0); opacity: 0; }
    18%, 88%  { transform: scaleX(1); opacity: 1; }
    100%      { transform: scaleX(1); opacity: 0.25; }
}

.v2-playhead {
    position: absolute;
    top: 12px;
    bottom: 12px;
    width: 2px;
    background: #fff;
    box-shadow: 0 0 12px rgba(255, 255, 255, 0.7);
    animation: v2-sweep 5.2s ease-in-out infinite;
}

@keyframes v2-sweep {
    0%, 14%   { left: 20px; opacity: 0; }
    22%       { opacity: 1; }
    88%       { left: calc(100% - 22px); opacity: 1; }
    100%      { left: calc(100% - 22px); opacity: 0; }
}


/* ---------- platforms ---------- */

.v2-platforms {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 16px;
}

.v2-platform {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 122px;
    height: 122px;
    border: 1px solid var(--v2-surface-border);
    border-radius: var(--v2-radius);
    background: var(--v2-surface);
    box-shadow: var(--v2-surface-shadow);
    transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}

.v2-platform:hover {
    transform: translateY(-5px);
    border-color: rgba(77, 216, 255, 0.5);
    box-shadow: var(--v2-surface-shadow-hover);
}

/* Logos sit slightly desaturated until hovered, so the row reads as one set
   rather than four competing brand colours. */
.v2-platform img {
    filter: grayscale(0.35) brightness(1.05);
    transition: filter 0.22s ease, transform 0.22s ease;
}

.v2-platform:hover img {
    filter: none;
    transform: scale(1.06);
}

.v2-platform img {
    width: 52px;
    height: 52px;
    object-fit: contain;
    display: block;
}

/* ---------- demos ---------- */

.v2-demo-layout {
    display: grid;
    grid-template-columns: 0.82fr 1.18fr;
    gap: clamp(30px, 5vw, 62px);
    align-items: start;
}

.v2-demo-copy { position: sticky; top: 110px; }

.v2-demo-cards {
    display: grid;
    gap: 16px;
}

.v2-demo-card {
    border: 1px solid var(--v2-surface-border);
    border-radius: var(--v2-radius);
    background: var(--v2-surface);
    box-shadow: var(--v2-surface-shadow);
    overflow: hidden;
    transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}

.v2-demo-card:hover {
    transform: translateY(-4px);
    border-color: rgba(77, 216, 255, 0.45);
    box-shadow: var(--v2-surface-shadow-hover);
}

.v2-demo-thumb {
    position: relative;
    aspect-ratio: 16 / 9;
    background: #05070c;
    cursor: pointer;
}

/* Once playing, the native control bar owns clicks/taps on the video itself. */
.v2-demo-card.v2-playing .v2-demo-thumb { cursor: auto; }

.v2-demo-thumb img,
.v2-demo-thumb video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Decorative only — the <video> underneath owns the interaction, so this must
   never intercept the click that starts playback. */
.v2-demo-play {
    position: absolute;
    inset: 0;
    margin: auto;
    width: 58px;
    height: 58px;
    border-radius: 50%;
    background: var(--v2-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.42);
    pointer-events: none;
    transition: opacity 0.2s ease;
}

.v2-demo-card.v2-playing .v2-demo-play { opacity: 0; }

.v2-demo-play svg {
    width: 21px;
    height: 21px;
    fill: var(--v2-accent-ink);
    margin-left: 3px;
}

.v2-demo-meta {
    display: flex;
    align-items: baseline;
    gap: 12px;
    padding: 18px 20px 20px;
}

.v2-demo-meta h3 {
    font-size: 0.83rem;
    font-weight: 800;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    color: var(--v2-accent);
    white-space: nowrap;
}

.v2-demo-meta p {
    margin: 0;
    font-size: 0.92rem;
    line-height: 1.55;
    color: var(--v2-text-dim);
}

/* ---------- pricing ---------- */

.v2-pricing {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
    gap: 18px;
    align-items: start;
}

.v2-plan {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 34px 28px 32px;
    border: 1px solid var(--v2-surface-border);
    border-radius: var(--v2-radius-lg);
    background: var(--v2-surface);
    box-shadow: var(--v2-surface-shadow);
    transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}

.v2-plan:hover {
    transform: translateY(-4px);
    border-color: rgba(77, 216, 255, 0.4);
    box-shadow: var(--v2-surface-shadow-hover);
}

/* The recommended plan gets lift + a ring, not a scale transform (which blurs text). */
.v2-plan-featured {
    border-color: rgba(77, 216, 255, 0.5);
    background:
        linear-gradient(180deg, rgba(77, 216, 255, 0.11), rgba(77, 216, 255, 0.02) 52%, rgba(255, 255, 255, 0.012));
    backdrop-filter: blur(16px) saturate(125%);
    -webkit-backdrop-filter: blur(16px) saturate(125%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.2),
        0 0 0 1px rgba(77, 216, 255, 0.22),
        0 28px 64px -26px rgba(77, 216, 255, 0.4);
}

.v2-plan-tag {
    position: absolute;
    top: -12px;
    left: 28px;
    padding: 5px 13px;
    border-radius: 999px;
    background: var(--v2-accent);
    color: var(--v2-accent-ink);
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.v2-plan h3 {
    font-size: 1.02rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--v2-text-dim);
}

.v2-price {
    display: flex;
    align-items: baseline;
    gap: 7px;
    margin: 15px 0 6px;
}

.v2-price-amt {
    font-size: clamp(2.3rem, 4vw, 3rem);
    font-weight: 800;
    letter-spacing: -0.045em;
    line-height: 1;
}

.v2-price-per {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--v2-text-faint);
}

.v2-plan-for {
    margin: 0 0 22px;
    font-size: 0.9rem;
    line-height: 1.55;
    color: var(--v2-text-dim);
    min-height: 2.8em;
}

.v2-plan ul {
    list-style: none;
    margin: 0 0 26px;
    padding: 22px 0 0;
    border-top: 1px solid var(--v2-hairline);
    display: grid;
    gap: 11px;
}

.v2-plan li {
    position: relative;
    padding-left: 26px;
    font-size: 0.92rem;
    line-height: 1.5;
    color: var(--v2-text);
}

.v2-plan li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.42em;
    width: 13px;
    height: 7px;
    border-left: 2px solid var(--v2-accent);
    border-bottom: 2px solid var(--v2-accent);
    transform: rotate(-45deg);
}

.v2-plan .v2-btn { margin-top: auto; width: 100%; }

/* ---------- faq ---------- */

.v2-faq {
    max-width: 820px;
    margin: 0 auto;
    border-top: 1px solid var(--v2-hairline);
}

.v2-faq-item { border-bottom: 1px solid var(--v2-hairline); }

.v2-faq-q {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 23px 4px;
    background: none;
    border: none;
    font-family: inherit;
    font-size: clamp(1rem, 1.5vw, 1.1rem);
    font-weight: 700;
    letter-spacing: -0.015em;
    color: var(--v2-text);
    text-align: left;
    cursor: pointer;
}

.v2-faq-q:hover { color: var(--v2-accent); }

.v2-faq-ico {
    flex: none;
    width: 27px;
    height: 27px;
    border-radius: 50%;
    border: 1px solid var(--v2-hairline-bright);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    font-weight: 400;
    line-height: 1;
    color: var(--v2-accent);
    transition: transform 0.22s ease, background 0.22s ease;
}

.v2-faq-item.v2-open .v2-faq-ico {
    transform: rotate(45deg);
    background: rgba(77, 216, 255, 0.14);
}

.v2-faq-a {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.28s ease;
}

.v2-faq-item.v2-open .v2-faq-a { grid-template-rows: 1fr; }

.v2-faq-a > div { overflow: hidden; }

.v2-faq-a p {
    margin: 0;
    padding: 0 4px 24px;
    font-size: 0.97rem;
    line-height: 1.68;
    color: var(--v2-text-dim);
    max-width: 68ch;
}

/* ---------- closing cta ---------- */

.v2-close {
    position: relative;
    margin: 0 24px clamp(66px, 8vw, 104px);
    padding: clamp(52px, 7vw, 88px) 28px;
    border: 1px solid var(--v2-hairline-bright);
    border-radius: 30px;
    text-align: center;
    overflow: hidden;
    background:
        radial-gradient(64% 118% at 50% 0%, rgba(77, 216, 255, 0.17) 0%, transparent 72%),
        var(--v2-ink-card);
}

.v2-close .v2-lede { margin-left: auto; margin-right: auto; }

.v2-close-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    justify-content: center;
    margin-top: 34px;
}

/* The one intentionally unprefixed rule in this file. base.html's footer ends
   with its own "Ready to Transform Your Video Marketing?" block carrying the
   same two buttons as .v2-close directly above it, so on this page it reads as
   the same call to action twice. Safe to hide here because this stylesheet is
   only ever linked by landing.html — no other page loads it, so its footer
   CTA is untouched. */
.footer .footer-cta { display: none; }

/* ---------- responsive ---------- */

@media (max-width: 900px) {
    .v2-demo-layout { grid-template-columns: 1fr; }
    .v2-demo-copy { position: static; }
}

@media (max-width: 768px) {
    .v2-container { padding: 0 16px; }
    .v2-stats { grid-template-columns: 1fr; }
    .v2-stat {
        border-right: none;
        border-bottom: 1px solid var(--v2-hairline);
        padding: 22px 20px;
    }
    .v2-stat:last-child { border-bottom: none; }
    .v2-hero-actions { flex-direction: column; align-items: stretch; }
    .v2-hero-actions .v2-btn { width: 100%; }
    .v2-close-actions { flex-direction: column; align-items: stretch; }
    .v2-close-actions .v2-btn { width: 100%; }
    .v2-close { margin-left: 16px; margin-right: 16px; padding: 44px 20px; border-radius: 22px; }
    .v2-panel { padding: 28px 22px 30px; min-height: 0; }
    .v2-plan { padding: 26px 22px; }
    .v2-demo-meta { flex-direction: column; gap: 6px; }
    .v2-marquee-track { gap: 30px; animation-duration: 26s; }
    .v2-marquee-track span::after { margin-left: 30px; }
}

@media (max-width: 480px) {
    .v2-badge { font-size: 0.76rem; padding: 6px 7px 6px 11px; }
    .v2-platform { width: 92px; height: 92px; }
    .v2-platform img { width: 40px; height: 40px; }
    .v2-faq-q { font-size: 0.97rem; padding: 19px 2px; }
    .v2-problem { padding: 22px 18px 24px; }
}

/* Below this width a sticky side rail has nowhere to sit, so the two columns
   stack and the rail becomes a horizontally scrollable tab strip pinned under
   the fixed header — still a working table of contents, just laid out along
   the other axis. */
@media (max-width: 900px) {
    /* minmax(0, 1fr), not 1fr: a bare fr track keeps min-width: auto, so the
       track floors at the widest item's min-content. Once the rail is a
       horizontal strip that min-content is all five tabs laid end to end
       (~889px), which dragged the whole section — panels included — far past
       a phone's viewport. Letting the track reach zero is what allows the
       strip to scroll instead of inflating its own column. */
    .v2-scroller { grid-template-columns: minmax(0, 1fr); gap: 20px; }

    /* Same reason, one level down: these are the grid items themselves. */
    .v2-scroller-rail,
    .v2-scroller-panels { min-width: 0; }

    .v2-scroller-rail {
        top: 74px;
        z-index: 2;
        margin: 0 -16px;
        padding: 10px 16px;
        background: rgba(7, 9, 15, 0.86);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        border-bottom: 1px solid var(--v2-surface-border);
    }

    .v2-rail-list {
        flex-direction: row;
        border-left: none;
        gap: 8px;
        overflow-x: auto;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .v2-rail-list::-webkit-scrollbar { display: none; }

    .v2-rail-item {
        flex: none;
        gap: 8px;
        padding: 9px 14px;
        border: 1px solid var(--v2-surface-border);
        border-radius: 999px;
        white-space: nowrap;
    }

    .v2-rail-item.is-active {
        border-color: rgba(77, 216, 255, 0.5);
        background: rgba(77, 216, 255, 0.09);
    }

    /* Vertical track indicator makes no sense on a horizontal strip. */
    .v2-rail-item::before { display: none; }

    .v2-rail-label { font-size: 0.9rem; }

    .v2-panel { scroll-margin-top: 150px; }
}

/* Honour the same reduced-motion contract the rest of the site follows. The
   panel visualisations are decorative, so they resolve to their finished state
   rather than looping. */
@media (prefers-reduced-motion: reduce) {
    .v2-marquee-track,
    .v2-orb,
    .v2-viz * { animation: none !important; }
    .v2-viz-line { width: var(--w); }
    .v2-viz-wave i { transform: scaleY(var(--h)); opacity: 1; }
    .v2-seg { transform: scaleX(1); opacity: 1; }
    .v2-viz-caret, .v2-playhead { opacity: 0; }
    /* Composition viz resolves to its finished state: all three clips picked,
       all three slots filled, labels legible against their fills. */
    .v2-lib-clip.is-hook,
    .v2-lib-clip.is-body,
    .v2-lib-clip.is-cta { background: var(--c); border-color: var(--c); }
    .v2-slot::before { transform: scaleX(1); }
    .v2-slot-hook span { color: var(--v2-accent-ink); }
    .v2-slot-body span { color: #fff; }
    .v2-slot-cta span { color: #2a0b07; }
    .v2 * { transition: none !important; }
}