/* ==========================================================================
   SportReels — marketing site
   "Broadcast" look, matching the app (VB/docs/DESIGN_SYSTEM.md): deep navy,
   one SportReels-blue accent, heavy uppercase Montserrat, crisp 6px corners.
   ========================================================================== */

:root {
    /* App tokens (AppColors.swift) */
    --color-bg: #070B24;            /* srBroadcastBackground */
    --color-surface: #131A3D;       /* srBroadcastSurface */
    --color-surface-raised: #1A2250;
    --color-text: #ffffff;
    --color-text-muted: #94A3B8;    /* srDarkTextSecondary */
    --color-text-body: rgba(255, 255, 255, 0.85); /* sentences, like BroadcastPopupMessage; grey stays for small labels */
    --color-accent: #0090FF;        /* srPrimary, the only accent */
    --color-accent-soft: rgba(0, 144, 255, 0.12);
    --color-error: #EF4444;         /* srError */
    --color-success: #10B981;       /* srSuccess */
    --color-warning: #F59E0B;       /* srWarning */
    --color-star: #EAB308;          /* srYellow, the unselected Epic star */
    --color-epic: #FDE047;          /* srEpicBright, the Epic clip outline on the timeline */
    --color-music: #14B8A6;         /* srMusic: codes songs, like play-type colors; never a second accent */
    --color-border: rgba(255, 255, 255, 0.08);
    --color-border-strong: rgba(255, 255, 255, 0.14);

    /* BroadcastShape: 6pt corners; cards and popups use 20pt */
    --radius: 6px;
    --radius-card: 20px;

    /* In-app background inside the phone mockups */
    --app-bg: #070B24;

    /* White play-tag text with a faint outline (.broadcastOutlinedText) */
    --tag-shadow: 0 0 1px rgba(0, 0, 0, 0.55), 0 1px 2px rgba(0, 0, 0, 0.35);

    --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
    /* Approximates .spring(response: 0.32, dampingFraction: 0.82) */
    --ease-spring: cubic-bezier(0.34, 1.25, 0.64, 1);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: 96px;
}

body {
    font-family: 'Montserrat', sans-serif;
    background: var(--color-bg);
    color: var(--color-text);
    line-height: 1.6;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; }

button { font: inherit; }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.ic {
    width: 1em;
    height: 1em;
    flex-shrink: 0;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    vertical-align: -0.125em;
}

.skip-link {
    position: absolute;
    left: 1rem;
    top: -100px;
    background: var(--color-accent);
    color: #fff;
    padding: 0.6rem 1rem;
    border-radius: var(--radius);
    z-index: 2000;
    text-decoration: none;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.skip-link:focus { top: 1rem; }

a:focus-visible,
button:focus-visible,
summary:focus-visible,
input:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 3px;
}

/* ===== NAV ===== */
nav {
    position: fixed;
    top: 0; left: 0; right: 0;
    padding: 0.9rem 3rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 2rem;
    z-index: 100;
    background: rgba(7, 11, 36, 0.7);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid transparent;
    transition: padding 0.3s ease, background 0.3s ease, border-color 0.3s ease;
}

nav.scrolled {
    padding-top: 0.6rem;
    padding-bottom: 0.6rem;
    background: rgba(7, 11, 36, 0.92);
    border-bottom-color: var(--color-border);
}

.logo {
    text-decoration: none;
    display: flex;
    align-items: center;
}

.logo-img {
    height: 64px;
    width: auto;
    transition: height 0.3s ease;
}

nav.scrolled .logo-img { height: 52px; }

.nav-links {
    display: flex;
    gap: 2rem;
    margin-left: auto;
}

.nav-links a {
    color: var(--color-text-muted);
    text-decoration: none;
    font-size: 0.8rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    transition: color 0.2s ease;
}

.nav-links a:hover { color: var(--color-text); }

.nav-cta {
    background: var(--color-accent);
    color: #fff;
    padding: 0.7rem 1.3rem;
    border-radius: var(--radius);
    text-decoration: none;
    font-weight: 800;
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    transition: transform 0.15s ease, background 0.2s ease;
    white-space: nowrap;
}

.nav-cta:hover { background: #1a9bff; }
.nav-cta:active { transform: scale(0.97); }

/* ===== SHARED ===== */
.section-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 3rem;
}

/* Like BroadcastSectionHeader: blue bar + uppercase label */
.section-label {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--color-text);
    margin-bottom: 1rem;
}

.section-label::before {
    content: '';
    width: 4px;
    height: 1.1em;
    background: var(--color-accent);
    border-radius: 1px;
}

/* Two-tone headlines, like BroadcastHeadline: the last word goes blue */
.section-heading,
.feature-text h3,
.cta-section h2,
.hero h1 {
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.01em;
    text-wrap: balance;
}

.accent { color: var(--color-accent); }

.section-heading {
    font-size: clamp(1.9rem, 3.8vw, 2.6rem);
    line-height: 1.1;
    margin-bottom: 1.25rem;
}

.section-desc {
    font-size: 1.1rem;
    color: var(--color-text-body);
    line-height: 1.7;
    max-width: 560px;
}

.center-head {
    text-align: center;
    max-width: 760px;
    margin: 0 auto 3.5rem;
}

.center-head .section-desc { margin: 0 auto; }

.pro-pill {
    display: inline-block;
    background: var(--color-accent);
    color: #fff;
    font-size: 0.65rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    line-height: 1.4;
}

.app-store-link {
    display: inline-block;
    transition: transform 0.2s ease, opacity 0.2s ease;
}

.app-store-link:hover {
    transform: translateY(-2px);
    opacity: 0.9;
}

.app-store-badge {
    height: 54px;
    width: auto;
}

/* ---------- Broadcast kit, shared by the site and the phone mockups ---------- */

/* BroadcastTagBadge: solid tag color, 4pt corners, white outlined text */
.b-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.3em;
    height: 1.85em;
    min-width: 1.85em;
    padding: 0 0.5em;
    border-radius: 0.34em;
    background: var(--tc, var(--color-accent));
    color: #fff;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    line-height: 1;
    white-space: nowrap;
    text-shadow: var(--tag-shadow);
}

.b-badge .ic { fill: currentColor; stroke: none; filter: drop-shadow(0 0 1px rgba(0, 0, 0, 0.5)); }

/* BroadcastTagTile: navy tile with a 4pt stripe; the color wipes across when on */
.b-tile {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.35em;
    overflow: hidden;
    border-radius: var(--radius);
    background: var(--color-surface);
    box-shadow: inset 0 0 0 1px var(--color-border);
    color: #fff;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    line-height: 1.05;
    text-align: center;
    text-shadow: var(--tag-shadow);
    transition: box-shadow 0.2s ease, transform 0.15s ease;
}

/* The fill sits under the label (text nodes included) inside the tile's own stacking context */
.b-tile { isolation: isolate; }

.b-tile::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: var(--tc);
    clip-path: inset(0 calc(100% - var(--stripe, 4px)) 0 0);
    transition: clip-path 0.34s var(--ease-spring);
}

.b-tile.on { box-shadow: none; }
.b-tile.on::before { clip-path: inset(0 0 0 0); }

.b-tile .star { color: var(--color-star); fill: currentColor; stroke: none; transition: color 0.2s ease; }
.b-tile.on .star { color: #fff; }

/* BroadcastMoreTile: blue outline, "+ MORE", optional NEW badge */
.b-more {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.3em;
    border-radius: var(--radius);
    background: rgba(0, 144, 255, 0.08);
    box-shadow: inset 0 0 0 1.5px rgba(0, 144, 255, 0.85);
    color: #fff;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.b-more .ic { color: var(--color-accent); stroke-width: 3; }

.b-more em {
    position: absolute;
    top: -0.55em;
    right: -0.35em;
    font-style: normal;
    font-size: 0.6em;
    font-weight: 800;
    background: var(--color-accent);
    color: #fff;
    padding: 0.2em 0.45em;
    border-radius: 0.3em;
    letter-spacing: 0.06em;
}

/* Buttons: one blue primary, then outline and text */
.btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    min-height: 48px;
    padding: 0.7rem 1.4rem;
    border-radius: var(--radius);
    border: 0;
    background: var(--color-accent);
    color: #fff;
    font-weight: 800;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    text-decoration: none;
    cursor: pointer;
    transition: transform 0.15s ease, background 0.2s ease, opacity 0.2s ease;
}

.btn-primary .ic { stroke-width: 3; }
.btn-primary:hover { background: #1a9bff; }
.btn-primary:active { transform: scale(0.97); }

.btn-primary:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    transform: none;
}

.btn-ghost {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 48px;
    padding: 0.7rem 1.4rem;
    border-radius: var(--radius);
    border: 1.5px solid rgba(255, 255, 255, 0.25);
    color: var(--color-text);
    font-weight: 800;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    text-decoration: none;
    transition: border-color 0.2s ease, background 0.2s ease, transform 0.15s ease;
}

.btn-ghost:hover { border-color: rgba(255, 255, 255, 0.45); background: rgba(255, 255, 255, 0.03); }
.btn-ghost:active { transform: scale(0.97); }

/* ===== PHONE MOCKUP ===== */
/* The frame is a device illustration. Everything inside .phone-screen is sized in
   container units so the screen scales with the phone: 100cqw = one 402pt-wide
   iPhone screen, so one point is var(--pt). */
.phone {
    --pw: 260px;
    position: relative;
    width: var(--pw);
    aspect-ratio: 260 / 540;
    background: #10142e;
    border-radius: calc(var(--pw) * 0.154);
    padding: calc(var(--pw) * 0.0385);
    box-shadow:
        0 50px 100px -20px rgba(0, 0, 0, 0.6),
        0 0 0 1px rgba(255, 255, 255, 0.07),
        inset 0 1px 0 rgba(255, 255, 255, 0.12);
    flex-shrink: 0;
}

.phone-lg { --pw: 300px; }

.phone-screen {
    --pt: 0.2488cqw;
    position: relative;
    width: 100%;
    height: 100%;
    background: #000;
    border-radius: calc(var(--pw) * 0.123);
    overflow: hidden;
    container-type: inline-size;
    isolation: isolate;
    text-align: left;
    line-height: 1.3;
    user-select: none;
    -webkit-user-select: none;
}

.phone-screen.app { background: var(--app-bg); }

.island {
    position: absolute;
    top: 2.4cqw;
    left: 50%;
    transform: translateX(-50%);
    width: 30cqw;
    height: 8.6cqw;
    background: #000;
    border-radius: 100px;
    z-index: 60;
}

.status {
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 12cqw;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1cqw 8cqw 0;
    font-size: 4.4cqw;
    font-weight: 600;
    color: #fff;
    z-index: 55;
    pointer-events: none;
}

.batt {
    width: 8.6cqw;
    height: 4.2cqw;
    border: 0.5cqw solid rgba(255, 255, 255, 0.9);
    border-radius: 1.4cqw;
    position: relative;
}

.batt::after {
    content: '';
    position: absolute;
    top: 0.5cqw; bottom: 0.5cqw; left: 0.5cqw; right: 1.8cqw;
    background: #fff;
    border-radius: 0.6cqw;
}

.home-bar {
    position: absolute;
    bottom: 2cqw;
    left: 50%;
    transform: translateX(-50%);
    width: 36cqw;
    height: 1.4cqw;
    border-radius: 100px;
    background: rgba(255, 255, 255, 0.85);
    z-index: 60;
}

.phone .b-badge { font-size: calc(var(--pt) * 12); }

/* Tab bar: iOS 26 Liquid Glass. It's a light, clear pane that takes on the colors
   behind it, with a bright rim, white filled glyphs and a darker pill behind the
   selected tab (blue icon and label) */
.tabbar {
    position: absolute;
    left: 5.2cqw; right: 5.2cqw;
    bottom: 4.6cqw;
    height: 15cqw;
    border-radius: 100px;
    background: rgba(0, 0, 0, 0.08);
    backdrop-filter: blur(8px) saturate(1.5);
    -webkit-backdrop-filter: blur(8px) saturate(1.5);
    box-shadow:
        inset 0 0 0 0.3cqw rgba(255, 255, 255, 0.3),
        inset 0 0.5cqw 1cqw rgba(255, 255, 255, 0.12),
        0 1.5cqw 4cqw rgba(0, 0, 0, 0.15);
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    align-items: center;
    padding: 0 1.1cqw;
    z-index: 30;
    transition: opacity 0.25s ease, transform 0.25s ease;
}

/* On the app's flat navy screens the glass reads as a lighter navy */
.phone-screen.app .tabbar { background: rgba(255, 255, 255, 0.07); }

.tab {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5cqw;
    height: 12.8cqw;
    font-size: calc(var(--pt) * 12);
    font-weight: 500;
    color: #fff;
}

.tab .ic { font-size: 7.4cqw; }
.tab .ic use[href="#i-video-fill"] { stroke: none; }

/* A brighter step of SportReels blue so the label reads on the glass pill */
.tab.on {
    color: #45AEFF;
    background: rgba(0, 0, 0, 0.42);
    border-radius: 100px;
    font-weight: 600;
    text-shadow: 0 0 1px rgba(0, 0, 0, 0.5);
}

/* Liquid Glass icon button (circularGlassBackground, darkened over the camera) */
.glass-circle {
    width: calc(var(--pt) * 50);
    height: calc(var(--pt) * 50);
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: rgba(0, 0, 0, 0.32);
    backdrop-filter: blur(10px) saturate(1.3);
    -webkit-backdrop-filter: blur(10px) saturate(1.3);
    border: 0.3cqw solid rgba(255, 255, 255, 0.16);
    font-size: calc(var(--pt) * 22);
    line-height: 1;
    color: #fff;
    flex-shrink: 0;
    transition: opacity 0.25s ease;
}

.glass-circle .ic { stroke-width: 2.4; }

/* Glass pills: 34pt tall, 6pt corners, ExtraBold 13 */
.glass-pill,
.glass-btn {
    display: inline-flex;
    align-items: center;
    gap: calc(var(--pt) * 7);
    height: calc(var(--pt) * 34);
    padding: 0 calc(var(--pt) * 11);
    border-radius: calc(var(--pt) * 6);
    background: rgba(0, 0, 0, 0.32);
    backdrop-filter: blur(10px) saturate(1.3);
    -webkit-backdrop-filter: blur(10px) saturate(1.3);
    border: 0.3cqw solid rgba(255, 255, 255, 0.16);
    font-size: calc(var(--pt) * 13);
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #fff;
    white-space: nowrap;
    transition: opacity 0.25s ease, box-shadow 0.25s ease;
}

.glass-pill .ic { font-size: calc(var(--pt) * 12); stroke-width: 3; opacity: 0.85; }

.glass-btn {
    height: calc(var(--pt) * 44);
    padding: 0 calc(var(--pt) * 14);
    font-size: calc(var(--pt) * 14);
}

/* Colored initial circle (player avatar) */
.avatar {
    width: calc(var(--pt) * 20);
    height: calc(var(--pt) * 20);
    border-radius: 50%;
    background: var(--pc);
    color: var(--ink, #fff);
    display: inline-grid;
    place-items: center;
    font-style: normal;
    font-size: calc(var(--pt) * 10);
    font-weight: 700;
    letter-spacing: 0;
    flex-shrink: 0;
    transition: background 0.3s ease;
}

/* Headline / caption / icon button on flat screens */
.b-headline {
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.01em;
    color: #fff;
    line-height: 1;
    white-space: nowrap;
}

.b-headline span { color: var(--color-accent); }

.b-caption {
    font-size: calc(var(--pt) * 11);
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-text-muted);
    white-space: nowrap;
}

.icon-btn {
    width: calc(var(--pt) * 44);
    height: calc(var(--pt) * 44);
    border-radius: 50%;
    background: var(--color-surface);
    display: grid;
    place-items: center;
    font-size: calc(var(--pt) * 18);
    color: #fff;
    flex-shrink: 0;
}

/* Status bug (PREVIEW) and player badge, centered over full-screen video */
.b-status {
    display: inline-flex;
    align-items: center;
    gap: calc(var(--pt) * 6);
    height: calc(var(--pt) * 26);
    padding: 0 calc(var(--pt) * 10);
    border-radius: calc(var(--pt) * 6);
    background: var(--color-error);
    font-size: calc(var(--pt) * 13);
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #fff;
}

.b-status i {
    width: calc(var(--pt) * 7);
    height: calc(var(--pt) * 7);
    border-radius: 50%;
    background: #fff;
}

.b-player {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: calc(var(--pt) * 6);
    height: calc(var(--pt) * 30);
    padding: 0 calc(var(--pt) * 10) 0 calc(var(--pt) * 14);
    border-radius: calc(var(--pt) * 6);
    overflow: hidden;
    background: rgba(0, 0, 0, 0.55);
    font-size: calc(var(--pt) * 13);
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #fff;
}

.b-player::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: calc(var(--pt) * 4);
    background: var(--pc);
}

.b-player .ic { font-size: calc(var(--pt) * 11); stroke-width: 3; }

/* BroadcastFilterChip: stripe when off, the color wipes across when on */
.b-chip {
    --stripe: calc(var(--pt) * 4);
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: calc(var(--pt) * 6);
    height: calc(var(--pt) * 34);
    padding: 0 calc(var(--pt) * 8) 0 calc(var(--pt) * 12);
    border-radius: calc(var(--pt) * 6);
    overflow: hidden;
    background: var(--color-surface);
    box-shadow: inset 0 0 0 0.25cqw var(--color-border);
    font-size: calc(var(--pt) * 13);
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #fff;
    text-shadow: var(--tag-shadow);
    white-space: nowrap;
    flex-shrink: 0;
}

.b-chip { isolation: isolate; }

.b-chip::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: var(--tc);
    clip-path: inset(0 calc(100% - var(--stripe)) 0 0);
    transition: clip-path 0.34s var(--ease-spring);
}

.b-chip.on::before { clip-path: inset(0 0 0 0); }

.b-chip em {
    display: inline-grid;
    place-items: center;
    min-width: calc(var(--pt) * 18);
    height: calc(var(--pt) * 18);
    padding: 0 calc(var(--pt) * 4);
    border-radius: calc(var(--pt) * 4);
    background: rgba(255, 255, 255, 0.12);
    font-style: normal;
    font-size: calc(var(--pt) * 11);
    text-shadow: none;
    transition: background 0.2s ease;
}

.b-chip.on em { background: rgba(0, 0, 0, 0.15); }

.b-chip .star { color: var(--color-star); fill: currentColor; stroke: none; font-size: calc(var(--pt) * 12); transition: color 0.2s ease; }
.b-chip.on .star { color: #fff; }

/* "All" chips have no stripe and fill blue */
.b-chip.is-all { --tc: var(--color-accent); --stripe: 0px; padding-left: calc(var(--pt) * 10); }

/* Light fills (Volleyball's white) take dark text, like broadcastForeground */
.b-chip.light.on { color: var(--color-bg); text-shadow: none; }

/* BroadcastControlGroup: related header controls in one navy bar */
.b-group {
    display: inline-flex;
    align-items: center;
    gap: calc(var(--pt) * 10);
    height: calc(var(--pt) * 40);
    padding: 0 calc(var(--pt) * 12);
    border-radius: calc(var(--pt) * 6);
    background: var(--color-surface);
    box-shadow: inset 0 0 0 0.25cqw var(--color-border);
    color: #fff;
    font-size: calc(var(--pt) * 16);
}

.b-group i {
    width: 0.25cqw;
    height: calc(var(--pt) * 20);
    background: rgba(255, 255, 255, 0.12);
}

.b-group b {
    font-size: calc(var(--pt) * 13);
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

/* BroadcastToast */
.b-toast {
    position: absolute;
    left: 50%;
    top: 36%;
    transform: translate(-50%, 3cqw);
    display: flex;
    align-items: center;
    gap: calc(var(--pt) * 8);
    background: var(--color-surface);
    box-shadow: inset 0 0 0 0.25cqw rgba(255, 255, 255, 0.1), 0 2cqw 6cqw rgba(0, 0, 0, 0.45);
    color: #fff;
    padding: calc(var(--pt) * 12) calc(var(--pt) * 20);
    border-radius: calc(var(--pt) * 6);
    font-size: calc(var(--pt) * 13);
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    white-space: nowrap;
    opacity: 0;
    transition: opacity 0.3s ease, transform 0.3s var(--ease-spring);
    z-index: 50;
}

.b-toast .ic { color: var(--color-success); stroke-width: 3; font-size: calc(var(--pt) * 14); }
.b-toast.show { opacity: 1; transform: translate(-50%, 0); }

/* Generic stacked slides used by the reel players */
.slide {
    position: absolute;
    inset: 0;
    overflow: hidden;
    opacity: 0;
    background: #000;
}

.slide.is-start { opacity: 1; }

.slide-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1);
    transition: transform 3.4s linear;
}

.slide.is-live .slide-img { transform: scale(1.08); }

.slide-tint { position: absolute; inset: 0; }

.tx-overlay {
    position: absolute;
    inset: 0;
    opacity: 0;
    pointer-events: none;
    z-index: 20;
    background: #000;
}

/* ===== SCROLL ANIMATIONS ===== */
.reveal,
.reveal-left,
.reveal-right {
    opacity: 0;
    transition: opacity 0.7s ease, transform 0.7s ease;
}

.reveal { transform: translateY(40px); }
.reveal-left { transform: translateX(-60px); }
.reveal-right { transform: translateX(60px); }

.reveal.visible,
.reveal-left.visible,
.reveal-right.visible {
    opacity: 1;
    transform: none;
}

/* ===== HERO ===== */
.hero {
    min-height: 100vh;
    display: flex;
    align-items: center;
    padding: 8rem 0 5rem;
    position: relative;
    overflow: hidden;
}

/* Flat: no decorative glow behind the hero */
.hero-bg { display: none; }

.hero .section-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 4rem;
    position: relative;
    z-index: 1;
    width: 100%;
}

.hero-content {
    max-width: 640px;
    flex-shrink: 1;
}

.hero h1 {
    font-size: clamp(2.4rem, 5vw, 3.9rem);
    line-height: 1.02;
    margin-bottom: 1.5rem;
    animation: fadeInUp 0.8s ease 0.1s both;
}

.hero-subtitle {
    font-size: 1.15rem;
    color: var(--color-text-body);
    max-width: 520px;
    margin-bottom: 2rem;
    line-height: 1.65;
    animation: fadeInUp 0.8s ease 0.2s both;
}

.hero-actions {
    display: flex;
    gap: 1.25rem;
    align-items: center;
    flex-wrap: wrap;
    animation: fadeInUp 0.8s ease 0.3s both;
}

.sports-list {
    list-style: none;
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-top: 2.5rem;
    animation: fadeInUp 0.8s ease 0.4s both;
}

.sport-badge {
    background: var(--color-surface);
    box-shadow: inset 0 0 0 1px var(--color-border);
    padding: 0.45rem 0.8rem;
    border-radius: var(--radius);
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-text);
    display: flex;
    align-items: center;
    gap: 0.45rem;
}

.hero-features {
    display: flex;
    gap: 0.6rem;
    margin-top: 1.25rem;
    flex-wrap: wrap;
    animation: fadeInUp 0.8s ease 0.5s both;
}

.hero-feature-card {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    background: var(--color-surface);
    box-shadow: inset 0 0 0 1px var(--color-border);
    padding: 0.55rem 1rem 0.55rem 0.55rem;
    border-radius: var(--radius);
    text-decoration: none;
    color: var(--color-text);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    transition: box-shadow 0.2s ease, transform 0.15s ease;
}

.hero-feature-card:hover { box-shadow: inset 0 0 0 1.5px var(--color-accent); }
.hero-feature-card:active { transform: scale(0.97); }

/* Solid blue icon tile, like the coach-mark cards */
.card-icon {
    font-size: 0.85rem;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-accent);
    border-radius: 4px;
    color: #fff;
    flex-shrink: 0;
}

.hero-visual {
    position: relative;
    flex-shrink: 0;
    padding: 0 2.5rem;
    animation: phoneEntrance 0.8s ease 0.5s backwards;
}

.hero-visual .phone { --pw: 280px; }



@keyframes phoneEntrance {
    from { opacity: 0; transform: translateX(40px) scale(0.95); }
    to { opacity: 1; transform: none; }
}

@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(30px); }
    to { opacity: 1; transform: none; }
}

.scroll-indicator {
    position: absolute;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    animation: fadeInUp 0.6s ease 1s both;
    z-index: 2;
}

.scroll-indicator span {
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-text-muted);
    opacity: 0.6;
}

.scroll-chevron {
    width: 24px;
    height: 24px;
    border-right: 2px solid var(--color-text-muted);
    border-bottom: 2px solid var(--color-text-muted);
    transform: rotate(45deg);
    opacity: 0.4;
    animation: bounce 2s ease-in-out infinite;
}

@keyframes bounce {
    0%, 100% { transform: rotate(45deg) translateY(0); opacity: 0.4; }
    50% { transform: rotate(45deg) translateY(6px); opacity: 0.7; }
}

/* ===== STATS STRIP ===== */
.stats {
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
    background: var(--color-surface);
}

.stats-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    padding-top: 2.25rem;
    padding-bottom: 2.25rem;
}

.stat {
    text-align: center;
    padding: 0 1rem;
    border-left: 1px solid var(--color-border);
}

.stat:first-child { border-left: 0; }

.stat b {
    display: block;
    font-size: clamp(1.8rem, 3vw, 2.4rem);
    font-weight: 800;
    line-height: 1.1;
    color: var(--color-text);
}

/* "Up to" before a figure: small, so the number still leads */
.stat b small {
    font-size: 0.4em;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-text-muted);
    margin-right: 0.35em;
    vertical-align: 0.35em;
}

.stat span {
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-text-muted);
}

/* ===== FEATURES ===== */
.features { padding: 7rem 0 3rem; }

.feature-row {
    display: flex;
    align-items: center;
    gap: 5rem;
    padding: 5rem 0;
}

.feature-row:first-child { padding-top: 0; }
.feature-row.reversed { flex-direction: row-reverse; }

.feature-text { flex: 1; min-width: 0; }

/* BroadcastBadge: a solid blue status bug */
.feature-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    background: var(--color-accent);
    padding: 0.32rem 0.6rem;
    border-radius: 4px;
    font-size: 0.72rem;
    font-weight: 800;
    color: #fff;
    margin-bottom: 1.25rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.feature-text h3 {
    font-size: clamp(1.7rem, 2.8vw, 2.3rem);
    line-height: 1.1;
    margin-bottom: 1rem;
}

.feature-text p {
    font-size: 1.08rem;
    color: var(--color-text-body);
    line-height: 1.7;
    max-width: 480px;
}

.feature-list {
    list-style: none;
    margin-top: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.feature-list li {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    font-size: 1rem;
    color: var(--color-text-body);
    line-height: 1.45;
}

.check {
    width: 22px;
    height: 22px;
    background: var(--color-accent-soft);
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.72rem;
    color: var(--color-accent);
    flex-shrink: 0;
    margin-top: 0.05rem;
}

.check .ic { stroke-width: 3.4; }

.feature-visual {
    position: relative;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.25rem;
}

/* --- Camera mockup (CameraView) --- */
.cam-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Legibility scrim only (no decorative gradients) */
.cam-scrim {
    position: absolute;
    left: 0; right: 0; top: 0;
    height: 45cqw;
    background: linear-gradient(rgba(0, 0, 0, 0.45), transparent);
    pointer-events: none;
    z-index: 5;
}

.cam-top {
    position: absolute;
    top: 19.5cqw;
    left: 5cqw; right: 5cqw;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    z-index: 20;
}

.cam-center {
    position: absolute;
    left: 50%;
    top: -0.2cqw;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1cqw;
}

.cam-logo {
    height: 11.6cqw;
    width: auto;
    max-width: none;
    filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.45));
}

.cam-top .fmt-pill { margin-top: 1.5cqw; }
.fmt-pill i { font-style: normal; opacity: 0.6; }

.player-pill { padding-left: calc(var(--pt) * 7); }

.cam-bottom {
    position: absolute;
    left: 0; right: 0;
    bottom: 23cqw;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3cqw;
    z-index: 20;
}

.rec-chip {
    display: inline-flex;
    align-items: center;
    gap: calc(var(--pt) * 8);
    padding: calc(var(--pt) * 8) calc(var(--pt) * 16);
    border-radius: calc(var(--pt) * 6);
    background: rgba(0, 0, 0, 0.7);
    font-size: calc(var(--pt) * 17);
    font-weight: 800;
    letter-spacing: 0.02em;
    color: #fff;
    opacity: 0;
    transform: translateY(2cqw);
    transition: opacity 0.25s ease, transform 0.25s ease;
    font-variant-numeric: tabular-nums;
}

.rec-chip i {
    width: calc(var(--pt) * 12);
    height: calc(var(--pt) * 12);
    border-radius: 50%;
    background: var(--color-error);
    animation: recPulse 1s ease-in-out infinite alternate;
}

.rec-chip .lbl { color: var(--color-error); }

@keyframes recPulse { to { opacity: 0.35; } }

.cam-buttons {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 10cqw;
}

/* IMPORT / RECOVER tiles: 64pt glass squares */
.cam-tile {
    width: calc(var(--pt) * 64);
    height: calc(var(--pt) * 64);
    border-radius: calc(var(--pt) * 6);
    background: rgba(0, 0, 0, 0.32);
    backdrop-filter: blur(10px) saturate(1.3);
    -webkit-backdrop-filter: blur(10px) saturate(1.3);
    border: 0.3cqw solid rgba(255, 255, 255, 0.16);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: calc(var(--pt) * 5);
    font-size: calc(var(--pt) * 10);
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #fff;
    transition: opacity 0.25s ease;
}

.cam-tile .ic { font-size: calc(var(--pt) * 24); color: var(--color-accent); stroke-width: 1.8; }
.cam-tile.is-empty { visibility: hidden; }

/* Record button: 80pt white ring around a 68pt red circle */
.rec-btn {
    width: calc(var(--pt) * 80);
    height: calc(var(--pt) * 80);
    border-radius: 50%;
    border: calc(var(--pt) * 4) solid #fff;
    display: grid;
    place-items: center;
    transition: transform 0.25s var(--ease-out);
}

.rec-btn span {
    width: calc(var(--pt) * 64);
    height: calc(var(--pt) * 64);
    border-radius: 50%;
    background: var(--color-error);
    transition: width 0.25s var(--ease-out), height 0.25s var(--ease-out), border-radius 0.25s var(--ease-out);
}

.is-recording .rec-chip { opacity: 1; transform: none; }
.is-recording .rec-btn { transform: scale(1.1); }
.is-recording .rec-btn span { width: calc(var(--pt) * 32); height: calc(var(--pt) * 32); border-radius: calc(var(--pt) * 6); }

/* While recording the app hides the sport button, player row, Import and the tab bar */
.is-recording .player-pill,
.is-recording .cam-sport,
.is-recording .cam-tile { opacity: 0; }
.is-recording .tabbar { opacity: 0; transform: translateY(4cqw); }

/* The app draws its sport image at 38pt inside the 50pt glass button */
.cam-sport .sport-ic { width: calc(var(--pt) * 38); height: calc(var(--pt) * 38); }

/* --- Tagging mockup (PlayPreviewView) --- */
.tg-video {
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 144cqw;
    overflow: hidden;
    background: #000;
}

.tg-video img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity 0.3s ease;
}

/* 130pt black → clear scrim under the header */
.tg-scrim {
    position: absolute;
    left: 0; right: 0; top: 0;
    height: 33cqw;
    background: linear-gradient(rgba(0, 0, 0, 0.55), transparent);
}

.tg-replay {
    position: absolute;
    right: 4cqw;
    bottom: 4cqw;
    width: calc(var(--pt) * 44);
    height: calc(var(--pt) * 44);
    border-radius: 50%;
    background: var(--color-accent);
    color: #fff;
    display: grid;
    place-items: center;
    font-size: calc(var(--pt) * 19);
}

.tg-replay .ic { stroke-width: 2.6; }

/* BroadcastProgressBar on the video's bottom edge */
.tg-progress {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: calc(var(--pt) * 4);
    background: rgba(255, 255, 255, 0.15);
}

.tg-progress b {
    display: block;
    height: 100%;
    width: 0%;
    background: var(--color-accent);
}

.tg-head {
    position: absolute;
    top: 13cqw;
    left: 4cqw; right: 4cqw;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    z-index: 20;
}

.tg-center {
    position: absolute;
    left: 50%;
    top: 0;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2cqw;
}

.tg-controls {
    position: absolute;
    top: 147cqw;
    left: 4cqw; right: 4cqw;
    display: flex;
    flex-direction: column;
    gap: 3.5cqw;
}

.tg-title {
    display: flex;
    align-items: center;
    gap: 2.5cqw;
    height: calc(var(--pt) * 44);
}

.tg-title .b-headline { font-size: calc(var(--pt) * 24); margin-right: auto; }

.tg-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2.5cqw 2cqw;
}

.tg-grid .b-tile,
.tg-grid .b-more {
    height: calc(var(--pt) * 52);
    padding: 0 1.4cqw;
    font-size: calc(var(--pt) * 15);
}

.tg-grid .b-tile { --stripe: calc(var(--pt) * 4); }
.tg-grid .b-tile .star { font-size: calc(var(--pt) * 13); }

/* Single words shrink to fit (main.js sets --fit); multi-word labels wrap to two lines */
.tg-name { display: block; max-width: 100%; font-size: calc(1em * var(--fit, 1)); }

.tg-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2.5cqw;
}

.tg-discard,
.tg-save {
    height: calc(var(--pt) * 54);
    border-radius: calc(var(--pt) * 6);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: calc(var(--pt) * 8);
    font-weight: 800;
    text-transform: uppercase;
    white-space: nowrap;
}

.tg-discard {
    box-shadow: inset 0 0 0 calc(var(--pt) * 1.5) rgba(255, 255, 255, 0.25);
    color: var(--color-text-muted);
    font-size: calc(var(--pt) * 15);
    letter-spacing: 0.06em;
}

.tg-save {
    background: var(--color-accent);
    color: #fff;
    font-size: calc(var(--pt) * 17);
    letter-spacing: 0.05em;
    transition: transform 0.15s ease;
}

.tg-discard .ic,
.tg-save .ic { stroke-width: 3; font-size: 0.95em; }

.tg-save.press { transform: scale(0.97); }

#tagScreen .b-toast { top: 30%; }

/* --- Gallery mockup (Clips tab) --- */
.gl-header {
    position: absolute;
    top: 14cqw;
    left: 4cqw; right: 4cqw;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.gl-title {
    display: flex;
    align-items: center;
    gap: calc(var(--pt) * 8);
    color: #fff;
}

.gl-title .b-headline { font-size: calc(var(--pt) * 28); }

.gl-title .avatar {
    width: calc(var(--pt) * 32);
    height: calc(var(--pt) * 32);
    font-size: calc(var(--pt) * 15);
}

.gl-title > .ic { font-size: calc(var(--pt) * 13); stroke-width: 3; }

.chip-row {
    position: absolute;
    left: 4cqw; right: 0;
    display: flex;
    gap: 2cqw;
    overflow: hidden;
    white-space: nowrap;
}

.gl-sports { top: 28cqw; }
.gl-types { top: 39cqw; }

.gl-grid {
    position: absolute;
    top: 50cqw;
    left: 1cqw; right: 1cqw;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1cqw;
    transition: opacity 0.18s ease;
}

.gl-grid.fading { opacity: 0; }

.gl-card {
    position: relative;
    aspect-ratio: 1;
    border-radius: calc(var(--pt) * 6);
    overflow: hidden;
    background: #000;
}

.gl-card[hidden] { display: none !important; }

.gl-card img { width: 100%; height: 100%; object-fit: cover; }

.gl-tags {
    position: absolute;
    top: 2cqw;
    left: 2cqw;
    display: flex;
    gap: 1cqw;
}

.gl-card .b-badge {
    font-size: calc(var(--pt) * 9.5);
    height: calc(var(--pt) * 18);
    min-width: calc(var(--pt) * 18);
    padding: 0 calc(var(--pt) * 4);
    border-radius: calc(var(--pt) * 3);
}

.gl-card .heart {
    position: absolute;
    top: 2cqw;
    right: 2cqw;
    width: calc(var(--pt) * 30);
    height: calc(var(--pt) * 30);
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.5);
    display: grid;
    place-items: center;
    color: rgba(255, 255, 255, 0.8);
    font-size: calc(var(--pt) * 14);
}

.gl-card .heart .ic { stroke-width: 2.4; }
.gl-card .heart.on { color: var(--color-error); }
.gl-card .heart.on .ic { fill: currentColor; }

.gl-card .meta {
    position: absolute;
    right: 2cqw;
    bottom: 2cqw;
    height: calc(var(--pt) * 20);
    display: flex;
    align-items: center;
    padding: 0 calc(var(--pt) * 6);
    border-radius: calc(var(--pt) * 4);
    background: rgba(0, 0, 0, 0.7);
    font-size: calc(var(--pt) * 10);
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #fff;
    white-space: nowrap;
}

/* Favorites button: blue circle with a red count */
.fav-fab {
    position: absolute;
    right: 4cqw;
    bottom: 23cqw;
    width: calc(var(--pt) * 56);
    height: calc(var(--pt) * 56);
    border-radius: 50%;
    background: var(--color-accent);
    display: grid;
    place-items: center;
    color: #fff;
    font-size: calc(var(--pt) * 24);
    box-shadow: 0 2cqw 5cqw rgba(0, 0, 0, 0.4);
    z-index: 25;
}

.fav-fab .ic { stroke-width: 2.4; }

.fav-fab em {
    position: absolute;
    top: -0.4cqw;
    right: -0.4cqw;
    min-width: calc(var(--pt) * 20);
    height: calc(var(--pt) * 20);
    padding: 0 calc(var(--pt) * 5);
    border-radius: 100px;
    background: var(--color-error);
    display: grid;
    place-items: center;
    font-style: normal;
    font-size: calc(var(--pt) * 11);
    font-weight: 800;
}

/* --- Players mockup (camera + PlayerSwitcherDropdown) --- */
.pl-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 0.6s ease;
}

.pl-bg.on { opacity: 1; }

.cam-dim {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0);
    transition: background 0.3s ease;
    z-index: 10;
}

.players.open .cam-dim { background: rgba(0, 0, 0, 0.35); }
.players.open .player-pill { box-shadow: inset 0 0 0 0.5cqw var(--color-accent); }

/* .broadcastMenuCard(): navy, 12pt corners, hairline border, white-8% dividers */
.pl-dropdown {
    position: absolute;
    top: 42cqw;
    left: 50%;
    width: 64cqw;
    transform: translateX(-50%) scale(0.92);
    transform-origin: top center;
    background: var(--color-surface);
    box-shadow: inset 0 0 0 0.25cqw rgba(255, 255, 255, 0.1), 0 3cqw 8cqw rgba(0, 0, 0, 0.5);
    border-radius: calc(var(--pt) * 12);
    overflow: hidden;
    opacity: 0;
    transition: opacity 0.2s ease, transform 0.2s ease-out;
    z-index: 30;
}

.players.open .pl-dropdown { opacity: 1; transform: translateX(-50%) scale(1); }

.pl-row {
    display: flex;
    align-items: center;
    gap: calc(var(--pt) * 12);
    height: calc(var(--pt) * 50);
    padding: 0 calc(var(--pt) * 14);
    font-size: calc(var(--pt) * 16);
    font-weight: 500;
    color: #fff;
    transition: background 0.2s ease;
}

.pl-row + .pl-row { box-shadow: inset 0 0.25cqw 0 rgba(255, 255, 255, 0.08); }

.pl-row .avatar,
.pl-ico {
    width: calc(var(--pt) * 30);
    height: calc(var(--pt) * 30);
    font-size: calc(var(--pt) * 13);
}

.pl-ico {
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.12);
    display: grid;
    place-items: center;
    font-style: normal;
    color: #fff;
    flex-shrink: 0;
}

.pl-ico .ic { font-size: calc(var(--pt) * 14); stroke-width: 2.6; }

.pl-row > .ic {
    margin-left: auto;
    color: var(--color-accent);
    opacity: 0;
    stroke-width: 3;
    font-size: calc(var(--pt) * 14);
    transition: opacity 0.15s ease;
}

.pl-row.on { background: rgba(255, 255, 255, 0.06); }
.pl-row.on > .ic { opacity: 1; }

.pl-add .pl-ico { background: var(--color-accent-soft); color: var(--color-accent); }

/* ===== REEL MAKER ===== */
.reel-section {
    padding: 7rem 0;
    position: relative;
    background: var(--color-bg);
    border-top: 1px solid var(--color-border);
}

.editor-showcase {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 3rem;
    position: relative;
}

.callouts {
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
    position: relative;
}

.callout {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
}

.callouts-left .callout { flex-direction: row-reverse; text-align: right; }

/* Solid blue icon tile, like the reel tip cards */
.callout-icon {
    width: 44px;
    height: 44px;
    border-radius: var(--radius);
    flex-shrink: 0;
    display: grid;
    place-items: center;
    background: var(--color-accent);
    color: #fff;
    font-size: 1.15rem;
}

.callout h4,
.extra h4 {
    font-size: 0.95rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 0.35rem;
}

.callout p {
    font-size: 0.92rem;
    color: var(--color-text-body);
    line-height: 1.6;
}

.editor-phone { position: relative; }

/* --- Editor mockup (HighlightReelEditorView) --- */
.ed-top {
    position: absolute;
    top: 17.5cqw;
    left: 4cqw; right: 4cqw;
    display: flex;
    align-items: center;
    justify-content: space-between;
    z-index: 5;
}

.ed-title {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.2cqw;
    line-height: 1;
    white-space: nowrap;
}

.ed-title b {
    font-size: calc(var(--pt) * 20);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: #fff;
}

.ed-title small {
    display: flex;
    align-items: center;
    gap: 1.6cqw;
    font-size: calc(var(--pt) * 11);
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-text-muted);
}

.ed-title small > i { font-style: normal; }

/* Aspect chip: a tiny outline at the true ratio + "16:9" + chevron */
.ed-aspect {
    display: inline-flex;
    align-items: center;
    gap: calc(var(--pt) * 5);
    height: calc(var(--pt) * 24);
    padding: 0 calc(var(--pt) * 7);
    border-radius: calc(var(--pt) * 4);
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    letter-spacing: 0.04em;
}

.ed-aspect .shape-ico { width: calc(var(--pt) * 14); height: calc(var(--pt) * 14); }
.ed-aspect .shape-ico::before { border-width: calc(var(--pt) * 1.6); border-radius: calc(var(--pt) * 2); width: calc(var(--pt) * 14 * min(1, var(--r))); height: calc(var(--pt) * 14 * min(1, 1 / var(--r))); }
.ed-aspect .ic { font-size: calc(var(--pt) * 10); stroke-width: 3; }

.ed-preview {
    position: absolute;
    top: 33cqw;
    left: 4cqw; right: 4cqw;
    height: 110cqw;
    display: grid;
    place-items: center;
}

.ed-frame {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: calc(var(--pt) * 12);
    background: #000;
}

.ed-full {
    position: absolute;
    top: 2.4cqw;
    left: 2.4cqw;
    width: calc(var(--pt) * 32);
    height: calc(var(--pt) * 32);
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.5);
    display: grid;
    place-items: center;
    color: #fff;
    font-size: calc(var(--pt) * 13);
    z-index: 25;
}

.ed-full .ic { stroke-width: 2.6; }

.ed-play {
    position: absolute;
    inset: 0;
    margin: auto;
    width: 12cqw;
    height: 12cqw;
    display: grid;
    place-items: center;
    color: rgba(255, 255, 255, 0.92);
    font-size: 11cqw;
    filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.45));
    z-index: 25;
    transition: opacity 0.2s ease;
}

.ed-playing .ed-play { opacity: 0; }

.ed-cover-text {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    font-family: 'Kaushan Script', cursive;
    font-size: 8cqw;
    color: #fff;
    text-shadow: 0 0.04em 0.18em rgba(0, 0, 0, 0.55);
}

.ed-timeline {
    position: absolute;
    top: 146cqw;
    left: 4cqw; right: 4cqw;
}

.ed-ruler {
    position: relative;
    display: flex;
    justify-content: space-between;
    height: 7cqw;
    padding-top: 0.6cqw;
    font-size: calc(var(--pt) * 10.5);
    font-weight: 700;
    color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
}

/* Tick dots under the labels */
.ed-ruler::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: 1.2cqw;
    height: 0.8cqw;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.35) 0.3cqw, transparent 0.35cqw) 0 50% / 4.6cqw 100% repeat-x;
}

.ed-track {
    position: relative;
    display: flex;
    gap: 0.4cqw;
    height: calc(var(--pt) * 70);
}

.ed-cover {
    flex: 3 1 0;
    min-width: 0;
    position: relative;
    border-radius: calc(var(--pt) * 6);
    overflow: hidden;
    display: grid;
    place-items: center;
    box-shadow: inset 0 0 0 0.35cqw rgba(255, 255, 255, 0.35);
    background: linear-gradient(rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.45)), url('img/vb-outdoor.jpg') center / cover;
}

.ed-cover span {
    font-size: calc(var(--pt) * 9.5);
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-accent);
    background: rgba(0, 0, 0, 0.55);
    padding: 0.4cqw 1cqw;
    border-radius: 0.8cqw;
}

.ed-clip {
    flex: var(--d) 1 0;
    min-width: 0;
    position: relative;
}

/* Filmstrip: ~50pt thumbnail slots */
.ed-clip-inner {
    position: relative;
    height: 100%;
    border-radius: calc(var(--pt) * 6);
    overflow: hidden;
    background-image: var(--img);
    background-size: auto 100%;
    background-repeat: repeat-x;
    background-position: left center;
    transition: transform 0.3s var(--ease-out), box-shadow 0.3s ease;
}

.ed-clip-inner::after {
    content: '';
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(90deg, transparent 0 12cqw, rgba(0, 0, 0, 0.4) 12cqw 12.4cqw);
}

.ed-tags {
    position: absolute;
    top: 1cqw;
    left: 1cqw;
    display: flex;
    gap: 0.6cqw;
    z-index: 2;
}

.ed-clip .b-badge {
    font-size: calc(var(--pt) * 8.5);
    height: calc(var(--pt) * 15);
    min-width: 0;
    padding: 0 calc(var(--pt) * 3.5);
    border-radius: calc(var(--pt) * 3);
}

.ed-dur {
    position: absolute;
    right: 1cqw;
    bottom: 1cqw;
    z-index: 2;
    font-size: calc(var(--pt) * 9.5);
    font-weight: 800;
    color: #fff;
    background: rgba(0, 0, 0, 0.7);
    padding: 0.5cqw 1cqw;
    border-radius: 1cqw;
    line-height: 1.1;
}

/* Epic clips skip the tag badge and outline the duration in yellow */
.ed-dur.epic { box-shadow: inset 0 0 0 calc(var(--pt) * 2) var(--color-epic); padding: 0.75cqw 1.25cqw; }

/* Transition chip, centered on the cut */
.ed-tx {
    position: absolute;
    left: -0.2cqw;
    top: 50%;
    transform: translate(-50%, -50%);
    width: calc(var(--pt) * 24);
    height: calc(var(--pt) * 24);
    border-radius: 50%;
    background: var(--color-surface);
    border: calc(var(--pt) * 1.5) solid #fff;
    color: #fff;
    display: grid;
    place-items: center;
    font-size: calc(var(--pt) * 11);
    z-index: 4;
    transition: background 0.2s ease;
}

.ed-tx .ic { stroke-width: 2.6; }
.ed-tx.sel { background: var(--color-accent); }

.ed-clip.lifted { z-index: 6; }

.ed-clip.lifted .ed-clip-inner {
    transform: translateY(-2.5cqw) scale(1.1);
    box-shadow: 0 2cqw 4cqw rgba(0, 0, 0, 0.55), inset 0 0 0 calc(var(--pt) * 2) var(--color-accent);
}

.ed-clip .touch {
    position: absolute;
    left: 50%;
    top: 62%;
    width: 9cqw;
    height: 9cqw;
    margin: -4.5cqw 0 0 -4.5cqw;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.35);
    border: 0.4cqw solid rgba(255, 255, 255, 0.75);
    opacity: 0;
    transform: scale(0.6);
    transition: opacity 0.25s ease, transform 0.25s ease;
    pointer-events: none;
    z-index: 7;
}

.ed-clip.lifted .touch { opacity: 1; transform: scale(1); }

.ed-playhead {
    position: absolute;
    top: -2.5cqw;
    bottom: -11cqw; /* runs through the music lane below */
    left: 0;
    width: calc(var(--pt) * 2);
    margin-left: calc(var(--pt) * -1);
    background: #fff;
    box-shadow: 0 0 0 0.25cqw rgba(0, 0, 0, 0.25);
    z-index: 8;
    pointer-events: none;
}

.ed-total {
    position: absolute;
    top: 185cqw;
    left: 4cqw; right: 4cqw;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: calc(var(--pt) * 12);
    font-weight: 800;
    letter-spacing: 0.04em;
    color: #fff;
}

.ed-total b { font-weight: 800; }

/* Glass controls on the editor's flat navy read lighter, as in the app */
#edScreen .glass-btn,
#edScreen .glass-circle { background: rgba(255, 255, 255, 0.08); backdrop-filter: none; -webkit-backdrop-filter: none; }

.ed-total span {
    position: absolute;
    right: 0;
    display: flex;
    align-items: center;
    gap: 1cqw;
    font-size: calc(var(--pt) * 10.5);
    text-transform: uppercase;
    color: var(--color-text-muted);
}

.ed-total span i {
    width: 4.2cqw;
    height: 2.8cqw;
    border-radius: 0.6cqw;
    box-shadow: inset 0 0 0 calc(var(--pt) * 1.5) var(--color-epic);
}

/* Music lane: 30pt under the clip strip */
.ed-lane {
    position: relative;
    height: calc(var(--pt) * 30);
    margin-top: calc(var(--pt) * 6);
}

.ed-lane .ed-song {
    position: absolute;
    top: 0; bottom: 0;
    left: calc(12.5% + 0.2cqw);
    right: 0;
}

/* ---------- Song block (MusicLaneView), shared by the editor and the music demo ---------- */
.song-block {
    position: relative;
    overflow: hidden;
    border-radius: calc(var(--pt, 1px) * 6);
    background: rgba(20, 184, 166, 0.45);
    box-shadow: inset 0 0 0 calc(var(--pt, 1px) * 1) rgba(20, 184, 166, 0.9);
    transition: box-shadow 0.2s ease;
}

.song-block .wave {
    position: absolute;
    inset: 0 0.6cqw;
    display: flex;
    align-items: center;
    gap: var(--wave-gap, calc(var(--pt) * 1));
}

.song-block .wave i {
    flex: 0 0 var(--wave-bar, calc(var(--pt) * 2));
    height: calc(var(--h) * var(--wave-max, calc(var(--pt) * 18)) * var(--vol, 1));
    min-height: 1px;
    border-radius: 1px;
    background: rgba(255, 255, 255, 0.55);
    transition: height 0.2s ease;
}

/* Fade ramps darken the quiet corner at each end */
.song-block .ramp {
    position: absolute;
    top: 0; bottom: 0;
    background: rgba(0, 0, 0, 0.35);
    pointer-events: none;
    transition: width 0.2s ease;
}

.song-block .ramp.out { right: 0; width: var(--fade-out, 0%); clip-path: polygon(0 0, 100% 0, 100% 100%); }

.song-chip,
.drop-line em {
    display: inline-flex;
    align-items: center;
    gap: 0.35em;
    background: rgba(0, 0, 0, 0.45);
    font-style: normal;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #fff;
    white-space: nowrap;
    line-height: 1;
}

.song-chip {
    position: absolute;
    top: 0.6cqw;
    left: 0.6cqw;
    padding: 0.5cqw 0.9cqw;
    border-radius: calc(var(--pt) * 2);
    font-size: calc(var(--pt) * 8.5);
    z-index: 2;
}

.song-chip .ic { stroke-width: 2.4; }

/* The first beat drop: a white line with a ⚡ DROP tag at its foot */
.drop-line {
    position: absolute;
    top: 0; bottom: 0;
    left: var(--drop);
    width: calc(var(--pt) * 2);
    margin-left: calc(var(--pt) * -1);
    background: #fff;
    z-index: 2;
    transition: left 0.35s var(--ease-out);
}

.drop-line em {
    position: absolute;
    left: 100%;
    bottom: calc(var(--pt) * 3);
    padding: calc(var(--pt) * 1.5) calc(var(--pt) * 3);
    border-radius: 0 calc(var(--pt) * 2) calc(var(--pt) * 2) 0;
    font-size: calc(var(--pt) * 8.5);
}

.drop-line em .ic { color: #fff; }

/* Near the end of the lane the tag flips to the line's left, like the app */
.drop-flip .drop-line em {
    left: auto;
    right: 100%;
    border-radius: calc(var(--pt) * 2) 0 0 calc(var(--pt) * 2);
}

/* Selected song: blue 2pt outline and blue trim handles */
.song-block .handle {
    position: absolute;
    top: 0; bottom: 0;
    width: calc(var(--pt) * 14);
    background: var(--color-accent);
    opacity: 0;
    transition: opacity 0.2s ease;
    z-index: 3;
}

.song-block .handle::after {
    content: '';
    position: absolute;
    left: 50%; top: 50%;
    width: calc(var(--pt) * 3);
    height: 45%;
    transform: translate(-50%, -50%);
    border-radius: 2px;
    background: #fff;
}

.song-block .handle.l { left: 0; border-radius: calc(var(--pt) * 6) calc(var(--pt) * 1) calc(var(--pt) * 1) calc(var(--pt) * 6); }
.song-block .handle.r { right: 0; border-radius: calc(var(--pt) * 1) calc(var(--pt) * 6) calc(var(--pt) * 6) calc(var(--pt) * 1); }

.song-block.selected { box-shadow: inset 0 0 0 calc(var(--pt, 1px) * 2) var(--color-accent); }
.song-block.selected .handle { opacity: 1; }
.song-block.selected .song-chip { left: calc(var(--pt) * 17); }

/* Bottom bar: the toolbar, or the transition picker when a cut is selected */
.ed-bars {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 21cqw;
    background: var(--color-surface);
    box-shadow: inset 0 0.25cqw 0 rgba(255, 255, 255, 0.08);
    overflow: hidden;
}

.ed-toolbar,
.ed-txbar {
    position: absolute;
    inset: 0;
    padding: 2.4cqw 3cqw 0;
    transition: opacity 0.25s ease, transform 0.25s var(--ease-out);
}

.ed-toolbar {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    align-items: start;
}

/* The music edit bar replaces the toolbar while a song is selected */
.ed-musicbar { opacity: 0; transform: translateY(3cqw); pointer-events: none; }

.ed-txbar {
    display: flex;
    align-items: flex-start;
    gap: 1.6cqw;
    opacity: 0;
    transform: translateY(3cqw);
    pointer-events: none;
}

.show-tx .ed-toolbar,
.show-music .ed-toolbar:not(.ed-musicbar) { opacity: 0; transform: translateY(3cqw); }
.show-tx .ed-txbar,
.show-music .ed-musicbar { opacity: 1; transform: none; }

.ed-tool {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.2cqw;
    font-size: calc(var(--pt) * 10);
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #fff;
}

.ed-tool .ic { font-size: calc(var(--pt) * 22); stroke-width: 1.8; }
.ed-tool.remove { color: var(--color-error); }

.ed-tool.export b,
.ed-txopt b {
    width: calc(var(--pt) * 48);
    height: calc(var(--pt) * 28);
    border-radius: calc(var(--pt) * 6);
    display: grid;
    place-items: center;
}

.ed-tool.export b { background: var(--color-accent); margin-top: -0.5cqw; }
.ed-tool.export .ic { font-size: calc(var(--pt) * 17); stroke-width: 2.2; }

.ed-txopt {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.2cqw;
    font-size: calc(var(--pt) * 9);
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #fff;
    width: calc(var(--pt) * 56);
}

.ed-txopt b { background: rgba(255, 255, 255, 0.08); }
.ed-txopt .ic { font-size: calc(var(--pt) * 15); }
.ed-txopt.on { color: var(--color-accent); }
.ed-txopt.on b { background: var(--color-accent); color: #fff; }

.ed-txdiv {
    width: 0.25cqw;
    align-self: stretch;
    margin: 0.5cqw 0 5cqw;
    background: rgba(255, 255, 255, 0.12);
    flex-shrink: 0;
}

/* Scrolling tiles fade at the screen edge */
.ed-txrow {
    display: flex;
    gap: 1.6cqw;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, #000 80%, transparent);
    mask-image: linear-gradient(90deg, #000 80%, transparent);
}

/* Small outline at a reel shape's true ratio (the editor's aspect chip) */
.shape-ico {
    width: 16px;
    height: 16px;
    display: inline-grid;
    place-items: center;
}

.shape-ico::before {
    content: '';
    border: 2px solid currentColor;
    border-radius: 3px;
    width: calc(16px * min(1, var(--r)));
    height: calc(16px * min(1, 1 / var(--r)));
}

/* More reel features */
.reel-extras {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
    margin-top: 5rem;
}

.extra {
    background: var(--color-surface);
    box-shadow: inset 0 0 0 1px var(--color-border);
    border-radius: 12px;
    padding: 1.4rem;
}

.extra .callout-icon { width: 40px; height: 40px; font-size: 1.05rem; margin-bottom: 0.9rem; }
.extra p { font-size: 0.88rem; color: var(--color-text-body); line-height: 1.55; }

/* ===== SPORTS GRID ===== */
.sports-section {
    padding: 6rem 0;
    background: var(--color-surface);
    position: relative;
}

/* Navy card with a 4px leading stripe in the sport's color */
.sports-section .center-head { margin-bottom: 0; }

/* ===== PRICING ===== */
.pricing { padding: 7rem 0; }

.plans {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    max-width: 920px;
    margin: 0 auto;
}

.plan {
    position: relative;
    background: var(--color-surface);
    box-shadow: inset 0 0 0 1px var(--color-border);
    border-radius: var(--radius-card);
    padding: 2.25rem;
    display: flex;
    flex-direction: column;
}

/* The selected plan card in the paywall: blue tint + 2px blue border */
.plan-pro {
    background: linear-gradient(rgba(0, 144, 255, 0.12), rgba(0, 144, 255, 0.12)), var(--color-surface);
    box-shadow: inset 0 0 0 2px var(--color-accent);
}

.plan h3 {
    font-size: 1.35rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.plan-sub {
    color: var(--color-text-body);
    font-size: 0.95rem;
    margin: 0.35rem 0 1.5rem;
}

.plan .feature-list { margin-top: 0; flex: 1; align-items: stretch; }
.plan .feature-list li { color: var(--color-text); font-size: 0.95rem; }
.plan .feature-list li span.muted { color: var(--color-text-muted); }

.plan-free .check { background: rgba(255, 255, 255, 0.08); color: var(--color-text); }

.plan-cta { margin-top: 2rem; }

.plan .btn-primary { width: 100%; }

.plans-note {
    text-align: center;
    margin-top: 1.75rem;
    font-size: 0.85rem;
    color: var(--color-text-body);
}

/* ===== FAQ ===== */
.faq {
    padding: 6rem 0;
    background: var(--color-surface);
}

.faq-list {
    max-width: 780px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.faq-list details {
    position: relative;
    overflow: hidden;
    background: var(--color-bg);
    box-shadow: inset 0 0 0 1px var(--color-border);
    border-radius: 12px;
}

/* Open rows get the blue leading stripe */
.faq-list details::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 4px;
    background: var(--color-accent);
    transform: scaleY(0);
    transition: transform 0.25s ease;
}

.faq-list details[open]::before { transform: scaleY(1); }

.faq-list summary {
    list-style: none;
    cursor: pointer;
    padding: 1.15rem 1.4rem;
    font-weight: 700;
    font-size: 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}

.faq-list summary::-webkit-details-marker { display: none; }

.faq-list summary .ic {
    color: var(--color-accent);
    stroke-width: 3;
    transition: transform 0.25s ease;
}

.faq-list details[open] summary .ic { transform: rotate(45deg); }

.faq-list details p {
    padding: 0 1.4rem 1.3rem;
    color: var(--color-text-body);
    font-size: 0.97rem;
    line-height: 1.7;
}

/* ===== FINAL CTA ===== */
.cta-section {
    padding: 8rem 0;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.cta-section .section-container { position: relative; z-index: 1; }

.cta-icon {
    width: 88px;
    height: 88px;
    border-radius: 22%;
    margin: 0 auto 1.75rem;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
}

.cta-section h2 {
    font-size: clamp(1.9rem, 4.2vw, 2.8rem);
    line-height: 1.1;
    margin-bottom: 1rem;
}

.cta-section p {
    font-size: 1.15rem;
    color: var(--color-text-body);
    margin: 0 auto 2.5rem;
    max-width: 520px;
}

/* ===== FOOTER ===== */
footer {
    padding: 2.5rem 3rem;
    border-top: 1px solid var(--color-border);
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2rem;
}

.footer-links { display: flex; gap: 2rem; }

.footer-links a {
    color: var(--color-text-muted);
    text-decoration: none;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    transition: color 0.2s ease;
}

.footer-links a:hover { color: var(--color-text); }

.footer-copy {
    color: var(--color-text-muted);
    font-size: 0.8rem;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 1100px) {
    /* The phone on top, then all six callouts in one grid, so the rows stay even */
    .editor-showcase {
        grid-template-columns: 1fr 1fr;
        gap: 2rem;
        max-width: 760px;
        margin: 0 auto;
    }

    .editor-phone {
        order: -1;
        grid-column: 1 / -1;
        justify-self: center;
        margin-bottom: 1rem;
    }

    .callouts { display: contents; }

    .callouts-left .callout { flex-direction: row; text-align: left; }


    .stats-row { grid-template-columns: repeat(4, 1fr); }
    .stat { padding: 0 0.5rem; }
}

@media (max-width: 960px) {
    .nav-links { display: none; }
}

@media (max-width: 900px) {
    .section-container { padding: 0 2rem; }

    nav { padding: 0.75rem 2rem; }

    .hero { padding: 8rem 0 4rem; min-height: auto; }

    .hero .section-container {
        flex-direction: column;
        text-align: center;
        gap: 0;
    }

    /* Let the text column's pieces join the stack so the phone can sit between them:
       headline, subtitle, phone, then the App Store button, sports and shortcuts */
    .hero-content { display: contents; }
    .hero h1 { order: 1; }
    .hero-subtitle { order: 2; }
    .hero-visual { order: 3; align-self: center; margin-bottom: 2.5rem; }
    .hero-actions { order: 4; }
    .sports-list { order: 5; }
    .hero-features { order: 6; }
    .hero-subtitle { max-width: 100%; margin-left: auto; margin-right: auto; }
    .hero-actions, .sports-list, .hero-features { justify-content: center; }
    .scroll-indicator { display: none; }

    .stats-row {
        grid-template-columns: repeat(2, 1fr);
        row-gap: 1.75rem;
    }

    .stat:nth-child(3) { border-left: 0; }

    .feature-row,
    .feature-row.reversed {
        flex-direction: column;
        align-items: center;
        gap: 0;
        padding: 2.5rem 0; /* 80px between stacked sections, same as phones */
        text-align: center;
    }

    /* The text column's pieces join the stack: badge and headline, then the phone,
       then the description and checklist */
    .feature-text { display: contents; }
    .feature-badge { order: 1; }
    .feature-text h3 { order: 2; margin-bottom: 2rem; }
    .feature-visual { order: 3; margin-bottom: 2rem; }
    .feature-text p { order: 4; }
    .feature-text .feature-list { order: 5; }

    .feature-text p,
    .feature-text h3 { max-width: 100%; margin-left: auto; margin-right: auto; }

    .feature-text .feature-list {
        align-items: flex-start;
        width: fit-content;
        max-width: 100%;
        margin-left: auto;
        margin-right: auto;
    }

    .feature-list li { text-align: left; }


    .reveal-left, .reveal-right { transform: translateY(40px); }


    .plans { grid-template-columns: 1fr; max-width: 520px; }

}

@media (max-width: 600px) {
    nav { padding: 0.65rem 1rem; }

    .logo-img,
    nav.scrolled .logo-img { height: 44px; }

    .nav-cta { padding: 0.55rem 1.1rem; font-size: 0.82rem; }

    .section-container { padding: 0 1rem; }

    .hero { padding: 6.5rem 0 3rem; }
    .hero h1 { font-size: 2.1rem; }
    .hero-subtitle { font-size: 1.05rem; }

    .hero-visual { padding: 0; }
    .hero-visual .phone { --pw: 250px; }

    .hero-features {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0.6rem;
    }

    .app-store-badge { height: 48px; }

    .sport-badge { font-size: 0.75rem; padding: 0.4rem 0.75rem; }

    .stats-row { grid-template-columns: 1fr 1fr; padding-top: 1.75rem; padding-bottom: 1.75rem; }
    .stat { border-left: 0; }

    .features { padding-top: 5rem; }
    .feature-row,
    .feature-row.reversed { padding: 2.5rem 0; } /* 80px between stacked sections */
    .feature-text h3 { font-size: 1.55rem; }
    .section-heading { font-size: 1.75rem; }
    .feature-text p { font-size: 1rem; }

    .phone { --pw: 250px; }
    .phone-lg { --pw: 280px; }



    .reel-section, .pricing { padding: 5rem 0; }

    .editor-showcase { grid-template-columns: 1fr; }




    .reel-extras { grid-template-columns: 1fr; }


    .plan { padding: 1.6rem; }

    .cta-section { padding: 5rem 0; }
    .cta-section h2 { font-size: 1.8rem; }

    footer {
        flex-direction: column;
        gap: 1rem;
        text-align: center;
        padding: 1.5rem 1rem;
    }

    .footer-links {
        flex-wrap: wrap;
        justify-content: center;
        gap: 1rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    .reveal, .reveal-left, .reveal-right { opacity: 1; transform: none; }
}