/* ============================================
   OFFSEASON - LANDING PAGE
   World Cup 2026 Pick'em
   Based on the Offseason landing template, re-themed
   for the Offseason brand (orange + navy).
   ============================================ */

:root {
    /* Brand Colors — Offseason salmon/coral + Navy (matches iOS logo) */
    --bw-gold: #F59C9C;           /* primary CTA — salmon/coral */
    --bw-gold-bright: #FAB5B5;    /* hover / accent (lighter) */
    --bw-gold-deep: #E07676;      /* deeper variant for subtle accents */
    --bw-navy: #1B2D4F;            /* deep navy from logo stripes */
    --bw-navy-light: #2A3F66;     /* lighter navy */

    /* World Cup Colors */
    --bw-red: #C41E3A;
    --bw-green: #006B3C;
    --bw-blue: #002868;

    /* Light Mode (Default) */
    --bw-bg: #FAFAFA;
    --bw-surface: #FFFFFF;
    --bw-panel: #F4F4F5;
    --bw-text-primary: #18181B;
    --bw-text-secondary: #52525B;
    --bw-text-muted: #A1A1AA;
    --bw-border-subtle: rgba(0, 0, 0, 0.08);
    --bw-border-strong: rgba(0, 0, 0, 0.12);
    --bw-glass-bg: rgba(255, 255, 255, 0.7);
    --bw-glass-border: rgba(0, 0, 0, 0.08);
    --bw-shadow-color: rgba(0, 0, 0, 0.1);
    --bw-glow-opacity: 0.15;

    /* Status Colors */
    --bw-success: #059669;
    --bw-error: #DC2626;
    --bw-live: #EF4444;

    /* Typography */
    --bw-font-display: 'Inter Tight', 'Space Grotesk', -apple-system, BlinkMacSystemFont, sans-serif;
    --bw-font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    --bw-font-mono: 'JetBrains Mono', 'SF Mono', monospace;

    /* Spacing */
    --bw-section-padding: clamp(3rem, 6vw, 5rem);
    --bw-container-max: 1200px;

    /* Transitions */
    --bw-transition-fast: 0.15s ease;
    --bw-transition-base: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --bw-transition-slow: 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    --bw-transition-theme: 0.4s cubic-bezier(0.4, 0, 0.2, 1);

    /* Border Radius */
    --bw-radius-sm: 8px;
    --bw-radius-md: 12px;
    --bw-radius-lg: 20px;
    --bw-radius-xl: 32px;
    --bw-radius-full: 9999px;

    /* Shadows */
    --bw-shadow-sm: 0 2px 8px var(--bw-shadow-color);
    --bw-shadow-md: 0 8px 32px var(--bw-shadow-color);
    --bw-shadow-lg: 0 16px 64px var(--bw-shadow-color);
    --bw-shadow-glow: 0 0 60px rgba(245, 156, 156, 0.4);
}

/* Dark Mode */
[data-theme="dark"] {
    --bw-bg: #0A0E1A;
    --bw-surface: #121826;
    --bw-panel: #1A2234;
    --bw-text-primary: #FFFFFF;
    --bw-text-secondary: rgba(255, 255, 255, 0.72);
    --bw-text-muted: rgba(255, 255, 255, 0.42);
    --bw-border-subtle: rgba(255, 255, 255, 0.08);
    --bw-border-strong: rgba(255, 255, 255, 0.15);
    --bw-glass-bg: rgba(255, 255, 255, 0.03);
    --bw-glass-border: rgba(255, 255, 255, 0.08);
    --bw-shadow-color: rgba(0, 0, 0, 0.5);
    --bw-glow-opacity: 0.35;
    /* Gold stays consistent across themes — single source of truth in :root */
}

/* ============================================
   RESET & BASE
   ============================================ */

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

.bw-landing {
    font-family: var(--bw-font-body);
    background: var(--bw-bg);
    color: var(--bw-text-primary);
    line-height: 1.6;
    min-height: 100vh;
    overflow-x: hidden;
    transition: background var(--bw-transition-theme), color var(--bw-transition-theme);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

html {
    scroll-behavior: smooth;
    /* Belt-and-suspenders with body's overflow-x:hidden — on iOS Safari
       and some Chrome versions, overflow-x:hidden on body alone isn't
       enough to prevent the viewport from scrolling horizontally when a
       child element (blur glow, wide image, decorative layer) extends
       past the viewport. Pinning it on the root element stops the
       viewport from ever growing beyond its container, so no landing
       page can horizontally scroll regardless of what's inside. */
    overflow-x: hidden;
    /* Also cap the root width to 100vw so percent-based widths inside
       deeply-nested layouts can't cause reflow beyond the viewport. */
    max-width: 100vw;
}
body {
    max-width: 100vw;
}

/* ============================================
   ANIMATED BACKGROUND — Soccer Pitch
   ────────────────────────────────────────
   The whole viewport is treated as the pitch:
     • Sidelines/goal lines  = viewport edges (inset box-shadow)
     • Mowing stripes        = full-width repeating gradient
     • Halfway line          = ::before, full-height vertical
     • Center circle + spot  = ::after, scaled via clamp(vmin)

   Seasonal swap: keep this scaffolding and just re-theme the
   three color tokens (stripe / line / dot). Future seasons can
   override them per page (NBA court, March Madness court, etc).
   ============================================ */

.bw-bg-pitch {
    /* Locally-scoped tokens — very subtle so the pitch is an accent,
       not a distraction. Discovered on close look, not in-your-face. */
    --bw-pitch-stripe: rgba(255, 255, 255, 0.012);
    --bw-pitch-line: rgba(255, 255, 255, 0.035);
    --bw-pitch-dot: rgba(255, 255, 255, 0.08);
    --bw-pitch-stripe-h: 96px;
    --bw-pitch-circle: clamp(240px, 26vmin, 420px);

    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;

    /* Mowing stripes — very faint alternating bands */
    background-image: repeating-linear-gradient(
        180deg,
        transparent 0,
        transparent var(--bw-pitch-stripe-h),
        var(--bw-pitch-stripe) var(--bw-pitch-stripe-h),
        var(--bw-pitch-stripe) calc(var(--bw-pitch-stripe-h) * 2)
    );

    /* Subtle outer "sideline" */
    box-shadow: inset 0 0 0 1px var(--bw-pitch-line);

    transition: background var(--bw-transition-theme),
                box-shadow var(--bw-transition-theme);
}

[data-theme="light"] .bw-bg-pitch {
    --bw-pitch-stripe: rgba(0, 0, 0, 0.015);
    --bw-pitch-line: rgba(0, 0, 0, 0.04);
    --bw-pitch-dot: rgba(0, 0, 0, 0.10);
}

/* Halfway line — very faint, only visible if you look for it */
.bw-bg-pitch::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 1px;
    background: var(--bw-pitch-line);
    transform: translateX(-50%);
    opacity: 0.6;
    transition: background var(--bw-transition-theme);
}

/* Center circle — whisper-thin, an Easter egg not a focal point */
.bw-bg-pitch::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: var(--bw-pitch-circle);
    height: var(--bw-pitch-circle);
    border: 1px solid var(--bw-pitch-line);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    opacity: 0.5;
    background: radial-gradient(
        circle at center,
        var(--bw-pitch-dot) 0 3px,
        transparent 3.5px
    );
    transition: border-color var(--bw-transition-theme);
}

/* Legacy .bw-bg-glow and .bw-ambient-orbs removed — they added a pink/warm
   cast to the page that fought with the clean pitch. If we need ambient
   warmth back later, reintroduce with neutral (grey/cream) values only. */

/* ============================================
   NAVIGATION
   ============================================ */

.bw-nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background: var(--bw-glass-bg);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--bw-glass-border);
    transition: background var(--bw-transition-theme), border var(--bw-transition-theme);
}

.bw-nav-content {
    max-width: var(--bw-container-max);
    margin: 0 auto;
    padding: 1rem 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
}

/* mobile nav compaction lives in the consolidated @media (max-width: 480px)
   block lower in the file so it can win the cascade against the broader
   @media (max-width: 768px) rule. */

.bw-nav-logo {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    text-decoration: none;
}

.bw-logo-mark {
    width: 48px;
    height: 48px;
    border-radius: var(--bw-radius-md);
    object-fit: contain;
    filter: drop-shadow(0 4px 18px rgba(245, 156, 156, 0.35));
    transition: filter var(--bw-transition-base), transform var(--bw-transition-base), background var(--bw-transition-theme);
    flex-shrink: 0;
}

/* mobile logo compaction lives in the consolidated @media (max-width: 480px)
   block lower in the file. */

/* Dark mode: give the logo a subtle light backing so the navy kit stripes
   stay visible against the dark background */
[data-theme="dark"] .bw-logo-mark {
    background: #FAFAFA;
    padding: 4px;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 4px 18px rgba(245, 156, 156, 0.5);
}

.bw-nav-logo:hover .bw-logo-mark {
    transform: scale(1.04) rotate(-2deg);
    filter: drop-shadow(0 6px 24px rgba(245, 156, 156, 0.5));
}

.bw-logo-mark.small {
    width: 36px;
    height: 36px;
}

[data-theme="dark"] .bw-logo-mark.small {
    padding: 3px;
}

.bw-logo-text-group {
    display: flex;
    flex-direction: column;
    line-height: 1.1;
}

.bw-logo-text {
    font-family: var(--bw-font-display);
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--bw-text-primary);
    letter-spacing: 2px;
    transition: color var(--bw-transition-theme);
}

.bw-logo-subtext {
    font-family: var(--bw-font-body);
    font-size: 0.65rem;
    font-weight: 400;
    color: var(--bw-text-muted);
    letter-spacing: 0.5px;
    transition: color var(--bw-transition-theme);
}

.bw-nav-links {
    display: none;
    align-items: center;
    gap: 1.5rem;
}

@media (min-width: 768px) {
    .bw-nav-links {
        display: flex;
    }
}

.bw-nav-links a {
    color: var(--bw-text-secondary);
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 500;
    transition: color 0.15s ease;
}

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

.bw-nav-right {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.bw-nav-cta {
    display: inline-flex;
    align-items: center;
    padding: 0.5rem 1rem;
    background: var(--bw-gold);
    color: #1B2D4F;
    font-size: 0.8rem;
    font-weight: 700;
    text-decoration: none;
    border-radius: 6px;
    transition: background 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
    white-space: nowrap;
}

.bw-nav-cta:hover {
    background: var(--bw-gold-bright);
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(245, 156, 156, 0.35);
}

/* mobile CTA compaction lives in the consolidated @media (max-width: 480px)
   block lower in the file. */

/* Nav Status */
.bw-nav-status {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: var(--bw-glass-bg);
    border: 1px solid var(--bw-glass-border);
    border-radius: var(--bw-radius-full);
    transition: var(--bw-transition-theme);
}

.bw-status-dot {
    width: 8px;
    height: 8px;
    background: var(--bw-gold);
    border-radius: 50%;
    animation: wcPulse 2s ease-in-out infinite;
}

@keyframes wcPulse {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.5;
        transform: scale(1.2);
    }
}

.bw-status-text {
    font-size: 0.8rem;
    color: var(--bw-text-secondary);
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Nav Link */
.bw-nav-link {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: var(--bw-glass-bg);
    border: 1px solid var(--bw-glass-border);
    border-radius: var(--bw-radius-full);
    color: var(--bw-text-secondary);
    text-decoration: none;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: var(--bw-transition-base);
}

.bw-nav-link:hover {
    border-color: #FAB5B5;
    color: #FAB5B5;
    background: rgba(250, 181, 181, 0.08);
}

/* Nav Auth Link (e.g. "Log in") */
.bw-nav-auth {
    display: inline-flex;
    align-items: center;
    color: var(--bw-text-secondary);
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 500;
    padding: 0.5rem 0.75rem;
    border-radius: 6px;
    transition: color 0.15s ease, background 0.15s ease;
    white-space: nowrap;
}

.bw-nav-auth:hover {
    color: var(--bw-text-primary);
    background: var(--bw-glass-bg);
}

/* mobile nav-auth hide lives in the consolidated @media (max-width: 480px)
   block lower in the file. */

/* Theme Toggle */
.bw-theme-toggle {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid var(--bw-glass-border);
    background: var(--bw-glass-bg);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--bw-transition-base);
    position: relative;
    overflow: hidden;
}

.bw-theme-toggle:hover {
    border-color: #FAB5B5;
    background: rgba(250, 181, 181, 0.1);
    transform: rotate(15deg);
}

.bw-theme-icon {
    position: absolute;
    font-size: 1.2rem;
    transition: var(--bw-transition-base);
}

.bw-theme-icon.sun {
    opacity: 0;
    transform: translateY(20px) rotate(-90deg);
}

.bw-theme-icon.moon {
    opacity: 1;
    transform: translateY(0) rotate(0deg);
}

[data-theme="light"] .bw-theme-icon.sun {
    opacity: 1;
    transform: translateY(0) rotate(0deg);
}

[data-theme="light"] .bw-theme-icon.moon {
    opacity: 0;
    transform: translateY(-20px) rotate(90deg);
}

/* ============================================
   HERO SECTION
   ============================================ */

.bw-hero {
    min-height: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: calc(70px + 4rem) 2rem 6rem;
    max-width: var(--bw-container-max);
    margin: 0 auto;
    gap: 4rem;
    position: relative;
    z-index: 2;
}

.bw-hero-content {
    flex: 1;
    max-width: 600px;
}

/* Hero Badge */
.bw-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 1.25rem;
    background: var(--bw-glass-bg);
    border: 1px solid var(--bw-glass-border);
    border-radius: var(--bw-radius-full);
    margin-bottom: 2rem;
    animation: wcFadeInUp 0.8s ease-out;
    transition: var(--bw-transition-theme);
}

.bw-badge-icon {
    font-size: 1rem;
}

.bw-hero-badge span:last-child {
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 2px;
    color: var(--bw-text-secondary);
    text-transform: uppercase;
}

/* Hero Title */
.bw-hero-title {
    margin-bottom: 1.5rem;
}

.bw-title-line {
    display: block;
    font-family: var(--bw-font-display);
    font-size: clamp(2.5rem, 6vw, 4.5rem);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -1px;
    opacity: 0;
    animation: wcFadeInUp 0.8s ease-out forwards;
}

.bw-title-line:nth-child(1) {
    animation-delay: 0.1s;
}

.bw-title-line:nth-child(2) {
    animation-delay: 0.2s;
}

.bw-title-line:nth-child(3) {
    animation-delay: 0.3s;
}

.bw-title-line.accent {
    color: var(--bw-gold);
}

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

/* Hero Subtitle */
.bw-hero-subtitle {
    font-size: 1.25rem;
    color: var(--bw-text-secondary);
    margin-bottom: 2.5rem;
    max-width: 400px;
    opacity: 0;
    animation: wcFadeInUp 0.8s ease-out 0.4s forwards;
}

/* App Buttons */
.bw-app-buttons {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    opacity: 0;
    animation: wcFadeInUp 0.8s ease-out 0.5s forwards;
}

.bw-hero-demo-link {
    margin: 1rem 0 0;
    font-size: 0.875rem;
    color: var(--bw-text-muted);
    opacity: 0;
    animation: wcFadeInUp 0.8s ease-out 0.65s forwards;
}

.bw-hero-demo-link a {
    color: var(--bw-gold);
    text-decoration: none;
    font-weight: 600;
    margin-left: 0.25rem;
    border-bottom: 1px solid transparent;
    transition: border-color 0.15s;
}

.bw-hero-demo-link a:hover {
    border-bottom-color: var(--bw-gold);
}

[dir="rtl"] .bw-hero-demo-link a {
    margin-left: 0;
    margin-right: 0.25rem;
}

.bw-app-btn {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.875rem 1.5rem;
    background: var(--bw-panel);
    border: 1px solid var(--bw-glass-border);
    border-radius: var(--bw-radius-md);
    color: var(--bw-text-primary);
    cursor: pointer;
    transition: var(--bw-transition-base);
}

.bw-app-btn:not(.disabled):hover {
    background: var(--bw-surface);
    border-color: #FAB5B5;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px -4px rgba(250, 181, 181, 0.2), var(--bw-shadow-md);
}

.bw-app-btn.disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.bw-app-icon {
    width: 24px;
    height: 24px;
}

.bw-btn-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.bw-btn-small {
    font-size: 0.65rem;
    color: var(--bw-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.bw-btn-large {
    font-size: 1rem;
    font-weight: 600;
}

/* ============================================
   PHONE MOCKUP
   ============================================ */

.bw-hero-visual {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    opacity: 0;
    animation: wcFadeInUp 1s ease-out 0.6s forwards;
}

.bw-device-container {
    position: relative;
    width: 280px;
    height: 580px;
}

.bw-phone-mockup {
    width: 100%;
    height: 100%;
}

.bw-phone-frame {
    width: 100%;
    height: 100%;
    border-radius: 40px;
    padding: 12px;
    position: relative;
    background: #1f2028;
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow:
        0 50px 100px rgba(0, 0, 0, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    animation: wcFloat 6s ease-in-out infinite;
}

[data-theme="light"] .bw-phone-frame {
    background: #dddde2;
    border: 1px solid rgba(0, 0, 0, 0.1);
}

@keyframes wcFloat {
    0%, 100% {
        transform: translateY(0) rotate(0deg);
    }
    50% {
        transform: translateY(-20px) rotate(2deg);
    }
}

.bw-phone-notch {
    position: absolute;
    top: 16px;
    left: 50%;
    transform: translateX(-50%);
    width: 90px;
    height: 26px;
    background: #000;
    border-radius: 14px;
    z-index: 10;
}

[data-theme="light"] .bw-phone-notch {
    background: #1a1a1e;
}

.bw-phone-screen {
    width: 100%;
    height: 100%;
    background: var(--bw-bg);
    border-radius: 28px;
    overflow: hidden;
    position: relative;
    transition: background var(--bw-transition-theme);
}

/* Inner content is designed for a 256×556 "screen" (the inside of the
   280×580 device with 12px frame padding). At smaller device sizes we
   keep the natural layout and scale it uniformly via transform rather
   than re-flowing — the UI reads the same on every breakpoint, just
   shrunk to fit. --phone-scale is overridden per media query below. */
.bw-screen-content {
    width: 256px;
    height: 556px;
    display: flex;
    flex-direction: column;
    background: var(--bw-bg);
    transition: background var(--bw-transition-theme);
    transform: scale(var(--phone-scale, 1));
    transform-origin: top left;
}

.bw-phone-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 460px;
    height: 460px;
    /* Neutral soft glow so the phone has visual lift without any pink bleed */
    background: radial-gradient(circle, rgba(255, 255, 255, 0.14), transparent 72%);
    opacity: 0.7;
    z-index: -1;
}

[data-theme="light"] .bw-phone-glow {
    background: radial-gradient(circle, rgba(0, 0, 0, 0.08), transparent 72%);
}

/* App Preview Content - Matches Real iOS App */
.bw-app-preview {
    width: 100%;
    height: 100%;
    padding: 50px 12px 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    background: var(--bw-bg);
}

/* Live Section */
.bw-app-live-section {
    background: var(--bw-surface);
    border: 1px solid rgba(239, 68, 68, 0.3);
    border-radius: 14px;
    padding: 10px;
}

.bw-app-live-header {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 8px;
}

.bw-app-live-dot {
    width: 8px;
    height: 8px;
    background: var(--bw-live);
    border-radius: 50%;
    animation: wcPulse 1.5s ease-in-out infinite;
}

.bw-app-live-text {
    font-family: var(--bw-font-display);
    font-size: 10px;
    font-weight: 700;
    color: var(--bw-live);
    letter-spacing: 1px;
}

.bw-app-group-tag {
    margin-left: auto;
    font-family: var(--bw-font-mono);
    font-size: 8px;
    font-weight: 600;
    color: var(--bw-text-muted);
    letter-spacing: 0.5px;
}

.bw-app-live-card {
    background: var(--bw-panel);
    border-radius: 10px;
    padding: 12px 8px;
}

.bw-app-live-teams {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.bw-app-live-team {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    min-width: 50px;
}

.bw-app-flag-large {
    font-size: 32px;
    line-height: 1;
}

.bw-app-team-code {
    font-family: var(--bw-font-display);
    font-size: 12px;
    font-weight: 700;
    color: var(--bw-text-primary);
}

.bw-app-live-score {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.bw-app-live-score .bw-app-score-num {
    font-family: var(--bw-font-display);
    font-size: 28px;
    font-weight: 800;
    color: var(--bw-text-primary);
    line-height: 1;
    display: inline;
}

.bw-app-live-score .bw-app-score-sep {
    font-family: var(--bw-font-display);
    font-size: 18px;
    color: var(--bw-text-muted);
    margin: 0 6px;
    display: inline;
}

.bw-app-score-row {
    display: flex;
    align-items: center;
}

.bw-app-minute {
    font-family: var(--bw-font-mono);
    font-size: 11px;
    font-weight: 600;
    color: var(--bw-live);
    background: rgba(239, 68, 68, 0.15);
    padding: 2px 6px;
    border-radius: 4px;
    margin-top: 4px;
}

/* Leaderboard Card */
.bw-app-leaderboard {
    background: var(--bw-surface);
    border: 1px solid var(--bw-border-subtle);
    border-radius: 14px;
    padding: 12px;
    flex: 1;
    display: flex;
    flex-direction: column;
    transition: var(--bw-transition-theme);
}

.bw-app-lb-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--bw-border-subtle);
}

.bw-app-lb-title-group {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.bw-app-lb-label {
    font-family: var(--bw-font-display);
    font-size: 9px;
    font-weight: 500;
    color: var(--bw-text-muted);
    letter-spacing: 1px;
    text-transform: uppercase;
}

.bw-app-lb-league {
    font-family: var(--bw-font-display);
    font-size: 14px;
    font-weight: 700;
    color: var(--bw-text-primary);
}

.bw-app-lb-count {
    font-size: 9px;
    font-weight: 500;
    color: var(--bw-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.bw-app-lb-rows {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.bw-app-lb-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 10px;
    background: var(--bw-panel);
    transition: var(--bw-transition-theme);
}

.bw-app-lb-row.highlight {
    background: rgba(245, 156, 156, 0.12);
    border: 1px solid rgba(245, 156, 156, 0.35);
    padding: 7px 9px; /* compensate for the 1px border so row height matches */
}

/* Avatar + rank badge overlay wrapper */
.bw-app-lb-avatar-wrap {
    position: relative;
    width: 30px;
    height: 30px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.bw-app-avatar {
    font-size: 22px;
    line-height: 1;
}

/* Rank badge overlays the bottom-right of the avatar */
.bw-app-rank {
    position: absolute;
    bottom: -2px;
    right: -3px;
    width: 14px;
    height: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--bw-font-mono);
    font-size: 8px;
    font-weight: 800;
    border-radius: 50%;
    border: 1.5px solid var(--bw-surface);
    color: #1B2D4F;
    flex-shrink: 0;
}

.bw-app-rank.gold {
    background: #FFD700;
}

.bw-app-rank.silver {
    background: #C0C0C0;
}

.bw-app-rank.bronze {
    background: #CD7F32;
    color: #FFFFFF;
}

/* Info column — name + subtitle stacked */
.bw-app-lb-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.bw-app-name-row {
    display: flex;
    align-items: center;
    gap: 6px;
}

.bw-app-name {
    font-size: 13px;
    font-weight: 700;
    color: var(--bw-text-primary);
    line-height: 1.1;
}

.bw-app-you-badge {
    font-family: var(--bw-font-display);
    font-size: 8px;
    font-weight: 700;
    color: var(--bw-gold);
    background: rgba(245, 156, 156, 0.18);
    padding: 1px 5px;
    border-radius: 3px;
    letter-spacing: 0.5px;
    line-height: 1.2;
}

.bw-app-lb-subtitle {
    font-size: 9px;
    font-weight: 500;
    color: var(--bw-text-muted);
    line-height: 1.2;
    font-family: var(--bw-font-mono);
}

/* Points column — big number + label stacked */
.bw-app-lb-points {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0;
    flex-shrink: 0;
}

.bw-app-pts-num {
    font-family: var(--bw-font-display);
    font-size: 16px;
    font-weight: 800;
    color: var(--bw-text-primary);
    line-height: 1;
}

.bw-app-pts-label {
    font-size: 8px;
    font-weight: 500;
    color: var(--bw-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 1px;
}

/* Tab Bar */
.bw-app-tabbar {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: auto;
    padding-top: 8px;
}

.bw-app-tabs {
    flex: 1;
    display: flex;
    background: var(--bw-surface);
    border: 1px solid var(--bw-border-subtle);
    border-radius: 20px;
    padding: 4px;
}

.bw-app-tab {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 6px 4px;
    border-radius: 16px;
    transition: var(--bw-transition-fast);
    color: var(--bw-text-muted);
}

.bw-app-tab.active {
    background: rgba(245, 156, 156, 0.15);
    color: var(--bw-gold);
}

.bw-tab-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.bw-tab-icon svg {
    display: block;
}

.bw-tab-label {
    font-size: 8px;
    font-weight: 600;
    color: var(--bw-text-muted);
    letter-spacing: 0.2px;
}

.bw-app-tab.active .bw-tab-label {
    color: var(--bw-gold);
}

.bw-app-profile-bubble {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bw-surface);
    border: 1px solid var(--bw-border-subtle);
    border-radius: 50%;
    color: var(--bw-text-secondary);
    box-shadow: var(--bw-shadow-sm);
}

/* ============================================
   SECTION STYLES
   ============================================ */

section {
    position: relative;
    z-index: 2;
}

.bw-section-container {
    max-width: var(--bw-container-max);
    margin: 0 auto;
    padding: var(--bw-section-padding) 2rem;
}

.bw-section-header {
    text-align: center;
    margin-bottom: 2.5rem;
}

.bw-section-tag {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--bw-gold);
    margin-bottom: 1rem;
    padding: 0.5rem 1rem;
    background: rgba(245, 156, 156, 0.1);
    border: 1px solid rgba(245, 156, 156, 0.2);
    border-radius: var(--bw-radius-full);
}

.bw-section-title {
    font-family: var(--bw-font-display);
    font-size: clamp(2rem, 5vw, 3.5rem);
    font-weight: 700;
    margin-bottom: 1rem;
    letter-spacing: -0.5px;
    color: var(--bw-text-primary);
}

.bw-section-subtitle {
    font-size: 1.1rem;
    color: var(--bw-text-secondary);
    max-width: 500px;
    margin: 0 auto;
}

/* ============================================
   HOW IT WORKS
   ============================================ */

.bw-how-it-works {
    background: var(--bw-surface);
    transition: background var(--bw-transition-theme);
}

.bw-steps-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
}

.bw-step-card {
    background: var(--bw-bg);
    border: 1px solid var(--bw-glass-border);
    border-radius: var(--bw-radius-lg);
    padding: 2.5rem;
    position: relative;
    transition: var(--bw-transition-base);
    overflow: hidden;
}

.bw-step-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--bw-gold);
    opacity: 0;
    transition: var(--bw-transition-base);
}

.bw-step-card:hover {
    transform: translateY(-5px);
    border-color: #FAB5B5;
    box-shadow: 0 12px 24px -8px rgba(250, 181, 181, 0.15);
}

.bw-step-card:hover::before {
    opacity: 1;
}

.bw-step-number {
    position: absolute;
    top: 1.5rem;
    right: 1.5rem;
    font-family: var(--bw-font-display);
    font-size: 3rem;
    font-weight: 700;
    color: var(--bw-text-primary);
    opacity: 0.05;
}

.bw-step-icon {
    font-size: 2.5rem;
    margin-bottom: 1.5rem;
}

.bw-step-card h3 {
    font-family: var(--bw-font-display);
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 0.75rem;
    color: var(--bw-text-primary);
}

.bw-step-card p {
    color: var(--bw-text-secondary);
    font-size: 0.95rem;
}

/* ============================================
   FEATURES
   ============================================ */

.bw-features {
    background: var(--bw-bg);
    transition: background var(--bw-transition-theme);
}

.bw-features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1.5rem;
}

.bw-feature-card {
    background: var(--bw-surface);
    border: 1px solid var(--bw-border-subtle);
    border-radius: var(--bw-radius-lg);
    padding: 2rem;
    transition: var(--bw-transition-base);
    position: relative;
    overflow: hidden;
}

.bw-feature-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--bw-gold);
    opacity: 0;
    transition: var(--bw-transition-base);
}

.bw-feature-card:hover {
    transform: translateY(-4px);
    border-color: #FAB5B5;
    box-shadow: 0 16px 48px -8px rgba(250, 181, 181, 0.12), var(--bw-shadow-lg);
}

.bw-feature-card:hover::before {
    opacity: 1;
}

.bw-feature-icon {
    font-size: 2.5rem;
    margin-bottom: 1rem;
}

.bw-feature-card h3 {
    font-family: var(--bw-font-display);
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 0.75rem;
    color: var(--bw-text-primary);
}

.bw-feature-card p {
    font-size: 0.95rem;
    color: var(--bw-text-secondary);
    line-height: 1.6;
}

/* ============================================
   PRIVACY SECTION
   ============================================ */

.bw-privacy {
    background: var(--bw-surface);
    transition: background var(--bw-transition-theme);
}

.bw-privacy-content {
    max-width: 700px;
    margin: 0 auto;
}

.bw-privacy-text {
    text-align: center;
}

.bw-privacy-description {
    font-size: 1.1rem;
    color: var(--bw-text-secondary);
    margin-bottom: 2rem;
    line-height: 1.7;
}

.bw-privacy-description em {
    color: var(--bw-gold);
    font-style: normal;
    font-weight: 600;
}

.bw-privacy-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
}

.bw-privacy-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.25rem;
    background: var(--bw-bg);
    border: 1px solid var(--bw-border-subtle);
    border-radius: var(--bw-radius-lg);
    font-size: 0.95rem;
    color: var(--bw-text-primary);
    transition: var(--bw-transition-base);
}

.bw-privacy-item:hover {
    border-color: #FAB5B5;
    background: rgba(250, 181, 181, 0.06);
}

.bw-check {
    color: var(--bw-success);
    font-weight: bold;
}

/* ============================================
   CTA SECTION
   ============================================ */

.bw-cta-section {
    background: var(--bw-surface);
    padding: clamp(2rem, 4vw, 3rem) 2rem;
    transition: background var(--bw-transition-theme);
}

.bw-cta-content {
    max-width: 600px;
    margin: 0 auto;
    text-align: center;
}

.bw-cta-title {
    font-family: var(--bw-font-display);
    font-size: clamp(2.5rem, 5vw, 4rem);
    font-weight: 700;
    margin-bottom: 1rem;
    color: var(--bw-gold);
}

.bw-cta-text {
    font-size: 1.1rem;
    color: var(--bw-text-secondary);
    margin-bottom: 2rem;
}

/* Waitlist Form */
.bw-waitlist-form {
    display: flex;
    gap: 0.75rem;
    max-width: 480px;
    margin: 0 auto 1rem;
    padding: 0 1rem;
}

.bw-waitlist-input {
    flex: 1;
    min-width: 0;
    padding: 0.875rem 1.125rem;
    background: var(--bw-surface);
    border: 1px solid var(--bw-border-strong);
    border-radius: var(--bw-radius-md);
    font-family: var(--bw-font-body);
    font-size: 0.9375rem;
    color: var(--bw-text-primary);
    transition: border-color var(--bw-transition-fast), box-shadow var(--bw-transition-fast), background var(--bw-transition-theme);
    -webkit-appearance: none;
    appearance: none;
}

.bw-waitlist-input::placeholder {
    color: var(--bw-text-muted);
}

.bw-waitlist-input:focus {
    outline: none;
    border-color: var(--bw-gold);
    box-shadow: 0 0 0 3px rgba(245, 156, 156, 0.18);
}

.bw-waitlist-form .bw-nav-cta {
    display: inline-flex;
    align-items: center;
    padding: 0.875rem 1.5rem;
    font-size: 0.9375rem;
    white-space: nowrap;
}

@media (max-width: 540px) {
    .bw-waitlist-form {
        flex-direction: column;
    }
    .bw-waitlist-form .bw-nav-cta {
        justify-content: center;
    }
}

.bw-waitlist-feedback {
    min-height: 1.25rem;
    font-size: 0.875rem;
    color: var(--bw-text-muted);
    margin-bottom: 1.5rem;
    transition: color var(--bw-transition-fast);
}

.bw-cta-platforms {
    display: flex;
    justify-content: center;
    gap: 2rem;
}

.bw-platform-badge {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--bw-text-muted);
}

.bw-platform-badge svg {
    width: 24px;
    height: 24px;
}

.bw-platform-badge span {
    font-size: 0.9rem;
}

/* ============================================
   FOOTER
   ============================================ */

.bw-footer {
    background: var(--bw-bg);
    border-top: 1px solid var(--bw-glass-border);
    padding: 3rem 2rem;
    transition: background var(--bw-transition-theme), border var(--bw-transition-theme);
}

.bw-footer-content {
    max-width: var(--bw-container-max);
    margin: 0 auto;
    text-align: center;
}

.bw-footer-logo {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.bw-footer-text {
    color: var(--bw-text-secondary);
    font-size: 0.9rem;
    margin-bottom: 0.5rem;
}

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

.bw-footer-links {
    margin-top: 1rem;
    display: flex;
    justify-content: center;
    gap: 2rem;
}

.bw-footer-links a {
    color: var(--bw-text-muted);
    font-size: 0.85rem;
    text-decoration: none;
    transition: color var(--bw-transition-fast);
}

.bw-footer-links a:hover {
    color: #FAB5B5;
}

.bw-footer-theme {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1rem;
    color: var(--bw-text-muted);
    padding: 0;
    transition: color var(--bw-transition-fast);
}

.bw-footer-theme:hover {
    color: var(--bw-text-primary);
}

/* ============================================
   AUTH PAGES (Login / Sign Up)
   ============================================ */

.bw-auth-main {
    min-height: calc(100vh - 180px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6rem 1.5rem 3rem;
    position: relative;
    z-index: 1;
}

.bw-auth-card {
    width: 100%;
    max-width: 440px;
    background: var(--bw-surface);
    border: 1px solid var(--bw-border-subtle);
    border-radius: var(--bw-radius-lg);
    overflow: hidden;
    box-shadow: var(--bw-shadow-lg);
    transition: background var(--bw-transition-theme), border var(--bw-transition-theme);
}

.bw-auth-header {
    text-align: center;
    padding: 2.5rem 2rem 1.5rem;
}

.bw-auth-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: var(--bw-radius-md);
    background: rgba(245, 156, 156, 0.1);
    border: 1px solid rgba(245, 156, 156, 0.2);
    margin-bottom: 1.25rem;
}

.bw-auth-icon svg {
    width: 26px;
    height: 26px;
    color: var(--bw-gold);
}

.bw-auth-title {
    font-family: var(--bw-font-display);
    font-size: 1.75rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--bw-text-primary);
    margin-bottom: 0.5rem;
}

.bw-auth-subtitle {
    color: var(--bw-text-secondary);
    font-size: 0.9375rem;
    margin: 0;
}

.bw-auth-body {
    padding: 0 2rem 2rem;
}

.bw-auth-form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.bw-auth-field {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.bw-auth-label {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--bw-text-secondary);
    letter-spacing: 0.01em;
}

.bw-auth-input {
    width: 100%;
    padding: 0.875rem 1rem;
    background: var(--bw-panel);
    border: 1px solid var(--bw-border-subtle);
    border-radius: var(--bw-radius-md);
    font-family: var(--bw-font-body);
    font-size: 0.9375rem;
    color: var(--bw-text-primary);
    transition: border-color var(--bw-transition-fast), box-shadow var(--bw-transition-fast), background var(--bw-transition-theme);
    -webkit-appearance: none;
    appearance: none;
}

.bw-auth-input::placeholder {
    color: var(--bw-text-muted);
}

.bw-auth-input:focus {
    outline: none;
    border-color: var(--bw-gold);
    box-shadow: 0 0 0 3px rgba(245, 156, 156, 0.18);
}

.bw-auth-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin: 0.25rem 0 0.25rem;
    font-size: 0.8125rem;
}

.bw-auth-checkbox {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--bw-text-secondary);
    cursor: pointer;
    user-select: none;
}

.bw-auth-checkbox input {
    width: 1rem;
    height: 1rem;
    accent-color: var(--bw-gold);
    cursor: pointer;
}

.bw-auth-link {
    color: var(--bw-gold);
    text-decoration: none;
    font-weight: 600;
    transition: color var(--bw-transition-fast);
}

.bw-auth-link:hover {
    color: var(--bw-gold-bright);
    text-decoration: underline;
}

.bw-auth-submit {
    width: 100%;
    padding: 0.9375rem 1.5rem;
    margin-top: 0.25rem;
    background: var(--bw-gold);
    color: #1B2D4F;
    border: none;
    border-radius: var(--bw-radius-md);
    font-family: var(--bw-font-body);
    font-size: 0.9375rem;
    font-weight: 700;
    cursor: pointer;
    transition: background var(--bw-transition-fast), transform var(--bw-transition-fast), box-shadow var(--bw-transition-fast);
}

.bw-auth-submit:hover {
    background: var(--bw-gold-bright);
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(245, 156, 156, 0.35);
}

.bw-auth-divider {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin: 1.5rem 0 0.5rem;
}

.bw-auth-divider::before,
.bw-auth-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--bw-border-subtle);
}

.bw-auth-divider span {
    font-size: 0.75rem;
    color: var(--bw-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.bw-auth-footer {
    padding: 1.25rem 2rem;
    background: var(--bw-panel);
    border-top: 1px solid var(--bw-border-subtle);
    text-align: center;
    transition: background var(--bw-transition-theme);
}

.bw-auth-footer p {
    font-size: 0.8125rem;
    color: var(--bw-text-secondary);
    margin: 0;
}

.bw-auth-privacy-note {
    margin-top: 1.25rem;
    text-align: center;
    font-size: 0.75rem;
    color: var(--bw-text-muted);
    line-height: 1.5;
}

/* ============================================
   LEGAL / DOCUMENT PAGES
   (privacy, terms, help — sidebar nav + content)
   ============================================ */

.bw-legal-container {
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: 3rem;
    max-width: 1100px;
    margin: 0 auto;
    padding: 7.5rem 1.5rem 4rem;
    position: relative;
    z-index: 2;
}

/* Sidebar (sticky table of contents) */
.bw-legal-sidebar {
    position: sticky;
    top: 110px;
    align-self: start;
}

.bw-legal-sidebar-label {
    font-family: var(--bw-font-mono);
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--bw-text-muted);
    margin-bottom: 1rem;
    padding-left: 1rem;
}

.bw-legal-nav {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    margin: 0;
    padding: 0;
}

.bw-legal-nav li {
    list-style: none;
}

.bw-legal-nav a {
    display: block;
    padding: 0.5rem 1rem;
    font-size: 0.85rem;
    color: var(--bw-text-secondary);
    text-decoration: none;
    border-left: 2px solid transparent;
    transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease;
    border-radius: 0 6px 6px 0;
}

.bw-legal-nav a:hover {
    color: var(--bw-text-primary);
    background: var(--bw-panel);
}

.bw-legal-nav a.active {
    color: var(--bw-gold);
    border-left-color: var(--bw-gold);
    background: rgba(245, 156, 156, 0.08);
}

/* Content column */
.bw-legal-content {
    max-width: 720px;
    color: var(--bw-text-primary);
}

.bw-legal-label {
    font-family: var(--bw-font-mono);
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--bw-gold);
    margin-bottom: 0.75rem;
}

.bw-legal-content h1 {
    font-family: var(--bw-font-display);
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    margin: 0 0 0.5rem;
    color: var(--bw-text-primary);
    line-height: 1.1;
}

.bw-legal-updated {
    font-size: 0.9rem;
    color: var(--bw-text-muted);
    margin-bottom: 2rem;
    padding-bottom: 2rem;
    border-bottom: 1px solid var(--bw-border-subtle);
}

.bw-legal-content h2 {
    font-family: var(--bw-font-display);
    font-size: 1.375rem;
    font-weight: 700;
    margin: 2.25rem 0 1rem;
    color: var(--bw-text-primary);
    scroll-margin-top: 110px;
    letter-spacing: -0.01em;
}

.bw-legal-content h3 {
    font-family: var(--bw-font-display);
    font-size: 1.0625rem;
    font-weight: 600;
    margin: 1.5rem 0 0.5rem;
    color: var(--bw-text-primary);
}

.bw-legal-content p {
    font-size: 0.975rem;
    line-height: 1.7;
    color: var(--bw-text-secondary);
    margin-bottom: 1rem;
}

.bw-legal-content ul,
.bw-legal-content ol {
    margin: 0 0 1.25rem 1.25rem;
    padding: 0;
}

.bw-legal-content li {
    font-size: 0.975rem;
    line-height: 1.7;
    color: var(--bw-text-secondary);
    margin-bottom: 0.5rem;
}

.bw-legal-content li strong {
    color: var(--bw-text-primary);
    font-weight: 600;
}

.bw-legal-content a {
    color: var(--bw-gold);
    text-decoration: none;
    border-bottom: 1px solid rgba(245, 156, 156, 0.4);
    transition: border-color var(--bw-transition-fast), color var(--bw-transition-fast);
}

.bw-legal-content a:hover {
    color: var(--bw-gold-bright);
    border-bottom-color: var(--bw-gold);
}

/* Highlight callout box */
.bw-legal-callout {
    margin: 1.5rem 0 2rem;
    padding: 1.25rem 1.5rem;
    background: rgba(245, 156, 156, 0.08);
    border: 1px solid rgba(245, 156, 156, 0.25);
    border-radius: var(--bw-radius-lg);
}

.bw-legal-callout p {
    margin: 0;
    font-size: 0.9375rem;
    color: var(--bw-text-primary);
    line-height: 1.6;
}

.bw-legal-callout strong {
    color: var(--bw-gold);
    font-weight: 700;
}

/* Data table (privacy) */
.bw-legal-table {
    width: 100%;
    border-collapse: collapse;
    margin: 1rem 0 1.5rem;
    font-size: 0.875rem;
}

.bw-legal-table th,
.bw-legal-table td {
    padding: 0.875rem 1rem;
    text-align: left;
    border: 1px solid var(--bw-border-subtle);
    vertical-align: top;
}

.bw-legal-table th {
    background: var(--bw-panel);
    font-weight: 600;
    color: var(--bw-text-primary);
    font-family: var(--bw-font-display);
    font-size: 0.8125rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.bw-legal-table td {
    color: var(--bw-text-secondary);
    line-height: 1.6;
}

.bw-legal-table td strong {
    color: var(--bw-text-primary);
    font-weight: 600;
}

/* Contact box (used at end of legal pages) */
.bw-legal-contact {
    margin-top: 2rem;
    padding: 1.5rem;
    background: var(--bw-surface);
    border: 1px solid var(--bw-border-subtle);
    border-radius: var(--bw-radius-lg);
}

.bw-legal-contact p {
    margin-bottom: 0.5rem;
}

.bw-legal-contact p:last-child {
    margin-bottom: 0;
}

/* ============================================
   HELP PAGE — contact cards + common issues
   ============================================ */

.bw-help-section {
    padding: 7.5rem 1.5rem 4rem;
    max-width: 1100px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
}

.bw-help-header {
    text-align: center;
    margin-bottom: 3rem;
}

.bw-help-header h1 {
    font-family: var(--bw-font-display);
    font-size: clamp(2rem, 5vw, 3rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    margin: 0.5rem 0 1rem;
    color: var(--bw-text-primary);
}

.bw-help-header p {
    font-size: 1.0625rem;
    color: var(--bw-text-secondary);
    max-width: 600px;
    margin: 0 auto;
    line-height: 1.6;
}

.bw-help-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1.25rem;
    margin-bottom: 4rem;
}

.bw-help-card {
    background: var(--bw-surface);
    border: 1px solid var(--bw-border-subtle);
    border-radius: var(--bw-radius-lg);
    padding: 1.75rem;
    text-align: center;
    transition: border-color var(--bw-transition-base), transform var(--bw-transition-base);
}

.bw-help-card:hover {
    border-color: var(--bw-gold-bright);
    transform: translateY(-2px);
}

.bw-help-card-icon {
    width: 48px;
    height: 48px;
    border-radius: var(--bw-radius-md);
    background: rgba(245, 156, 156, 0.12);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
}

.bw-help-card-icon svg {
    width: 22px;
    height: 22px;
    color: var(--bw-gold);
}

.bw-help-card h3 {
    font-family: var(--bw-font-display);
    font-size: 1.0625rem;
    font-weight: 700;
    color: var(--bw-text-primary);
    margin: 0 0 0.5rem;
}

.bw-help-card p {
    font-size: 0.875rem;
    color: var(--bw-text-secondary);
    line-height: 1.6;
    margin: 0 0 1rem;
}

.bw-help-card a {
    display: inline-block;
    color: var(--bw-gold);
    font-size: 0.875rem;
    font-weight: 600;
    text-decoration: none;
}

.bw-help-card a:hover {
    color: var(--bw-gold-bright);
}

.bw-help-issues h2 {
    font-family: var(--bw-font-display);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--bw-text-primary);
    margin-bottom: 1.5rem;
    text-align: center;
}

.bw-help-issues-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1rem;
}

.bw-help-issue {
    background: var(--bw-surface);
    border: 1px solid var(--bw-border-subtle);
    border-radius: var(--bw-radius-md);
    padding: 1.25rem 1.5rem;
}

.bw-help-issue h4 {
    font-family: var(--bw-font-display);
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--bw-text-primary);
    margin: 0 0 0.5rem;
}

.bw-help-issue p {
    font-size: 0.875rem;
    color: var(--bw-text-secondary);
    line-height: 1.6;
    margin: 0;
}

.bw-help-issue a {
    color: var(--bw-gold);
    text-decoration: none;
    font-weight: 600;
}

/* ============================================
   FOOTER (4-column grid)
   ============================================ */

.bw-footer-grid {
    display: grid;
    grid-template-columns: 1.5fr repeat(4, 1fr);
    gap: 2rem;
    max-width: var(--bw-container-max);
    margin: 0 auto;
    padding-bottom: 2rem;
    border-bottom: 1px solid var(--bw-border-subtle);
    margin-bottom: 1.5rem;
}

.bw-footer-brand {
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
    max-width: 280px;
}

.bw-footer-brand-row {
    display: flex;
    align-items: center;
    gap: 0.625rem;
}

.bw-footer-brand-text {
    font-size: 0.85rem;
    color: var(--bw-text-secondary);
    line-height: 1.5;
    margin: 0;
}

.bw-footer-col h4 {
    font-family: var(--bw-font-display);
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--bw-text-muted);
    margin: 0 0 0.875rem;
}

.bw-footer-col ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.bw-footer-col a {
    color: var(--bw-text-secondary);
    text-decoration: none;
    font-size: 0.85rem;
    transition: color var(--bw-transition-fast);
}

.bw-footer-col a:hover {
    color: var(--bw-gold);
}

.bw-footer-bottom {
    max-width: var(--bw-container-max);
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.bw-footer-bottom-left {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    color: var(--bw-text-muted);
    font-size: 0.78rem;
}

.bw-footer-bottom-right {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

/* Language switcher */
.bw-lang-switcher {
    position: relative;
}

.bw-lang-button {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.7rem;
    background: var(--bw-glass-bg);
    border: 1px solid var(--bw-glass-border);
    border-radius: var(--bw-radius-md);
    color: var(--bw-text-secondary);
    font-size: 0.78rem;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    transition: border-color var(--bw-transition-fast), color var(--bw-transition-fast);
}

.bw-lang-button:hover {
    color: var(--bw-text-primary);
    border-color: var(--bw-gold-bright);
}

.bw-lang-button svg {
    width: 14px;
    height: 14px;
}

.bw-lang-menu {
    position: absolute;
    bottom: calc(100% + 6px);
    right: 0;
    min-width: 160px;
    background: var(--bw-surface);
    border: 1px solid var(--bw-border-subtle);
    border-radius: var(--bw-radius-md);
    box-shadow: var(--bw-shadow-md);
    padding: 0.4rem;
    list-style: none;
    margin: 0;
    display: none;
    z-index: 200;
}

.bw-lang-menu.open {
    display: block;
}

.bw-lang-menu li {
    list-style: none;
}

.bw-lang-menu button {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.5rem 0.75rem;
    background: none;
    border: none;
    color: var(--bw-text-secondary);
    font-size: 0.85rem;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
    border-radius: 6px;
    transition: background var(--bw-transition-fast), color var(--bw-transition-fast);
}

.bw-lang-menu button:hover,
.bw-lang-menu button.active {
    background: rgba(245, 156, 156, 0.1);
    color: var(--bw-text-primary);
}

.bw-lang-menu button .bw-lang-flag {
    font-size: 1rem;
    line-height: 1;
}

.bw-lang-menu button .bw-lang-check {
    margin-left: auto;
    color: var(--bw-gold);
    opacity: 0;
    font-size: 0.85rem;
}

.bw-lang-menu button.active .bw-lang-check {
    opacity: 1;
}

/* RTL support (Arabic) */
[dir="rtl"] .bw-legal-nav a {
    border-left: none;
    border-right: 2px solid transparent;
    border-radius: 6px 0 0 6px;
}

[dir="rtl"] .bw-legal-nav a.active {
    border-right-color: var(--bw-gold);
    border-left-color: transparent;
}

[dir="rtl"] .bw-lang-menu {
    right: auto;
    left: 0;
}

[dir="rtl"] .bw-footer-bottom-left,
[dir="rtl"] .bw-footer-bottom-right,
[dir="rtl"] .bw-help-card,
[dir="rtl"] .bw-help-header {
    text-align: right;
}

[dir="rtl"] .bw-help-card,
[dir="rtl"] .bw-help-header {
    text-align: center;
}

/* ============================================
   LEGAL / HELP / FOOTER — RESPONSIVE
   ============================================ */

@media (max-width: 900px) {
    .bw-legal-container {
        /* minmax(0, 1fr) instead of plain 1fr so the column can shrink
           below its min-content when children (tables, long tokens) are
           wider than the viewport. */
        grid-template-columns: minmax(0, 1fr);
        gap: 1.5rem;
        padding: 6rem 1.25rem 3rem;
    }

    .bw-legal-sidebar {
        position: relative;
        top: 0;
        padding: 1rem;
        background: var(--bw-surface);
        border: 1px solid var(--bw-border-subtle);
        border-radius: var(--bw-radius-lg);
    }

    .bw-legal-nav {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .bw-legal-nav a {
        padding: 0.5rem 0.75rem;
        border: 1px solid var(--bw-border-subtle);
        border-radius: var(--bw-radius-md);
        font-size: 0.78rem;
    }

    .bw-legal-nav a.active {
        border-color: var(--bw-gold);
        background: rgba(245, 156, 156, 0.1);
    }

    /* Legal tables — force layout to respect container width. Using
       table-layout:fixed makes the browser honor our parent width and
       wrap long cell content instead of expanding the table to fit
       intrinsic content. Works without needing a scroll wrapper. */
    .bw-legal-table {
        width: 100% !important;
        max-width: 100% !important;
        table-layout: fixed;
        word-break: break-word;
        overflow-wrap: anywhere;
    }
    .bw-legal-table th,
    .bw-legal-table td {
        word-break: break-word;
        overflow-wrap: anywhere;
    }

    .bw-footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: 1.75rem;
    }

    .bw-footer-brand {
        grid-column: 1 / -1;
        max-width: none;
    }
}

@media (max-width: 600px) {
    .bw-legal-container,
    .bw-help-section {
        padding: 5.5rem 1rem 3rem;
    }

    .bw-footer-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .bw-footer-bottom {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* ============================================
   ANIMATIONS
   ============================================ */

.bw-fade-in {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.bw-fade-in.visible {
    opacity: 1;
    transform: translateY(0);
}

/* ============================================
   RESPONSIVE
   ============================================ */

@media (max-width: 1024px) {
    .bw-hero {
        flex-direction: column;
        text-align: center;
        padding-top: calc(70px + 3rem);
        padding-bottom: 4rem;
    }

    .bw-hero-content {
        max-width: 100%;
    }

    .bw-hero-subtitle {
        margin: 0 auto 2.5rem;
    }

    .bw-app-buttons {
        justify-content: center;
    }

    .bw-hero-visual {
        margin-top: 2rem;
    }

    .bw-device-container {
        width: 240px;
        height: 500px;
    }
    /* Screen inside the shrunken 240px device is ~216px wide × 476px
       tall. Scale the 256×556 natural content to fit. */
    .bw-phone-frame {
        --phone-scale: 0.844;  /* 216/256 */
    }
    .bw-screen-content {
        width: calc(256px);
        height: calc(556px);
    }
}

@media (max-width: 768px) {
    .bw-nav-content {
        padding: 0.875rem 1rem;
    }

    .bw-logo-text {
        font-size: 0.9rem;
    }

    .bw-status-text {
        display: none;
    }

    .bw-section-container {
        padding: 3rem 1rem;
    }

    .bw-privacy-list {
        flex-direction: column;
        align-items: center;
    }

    .bw-privacy-item {
        width: 100%;
        max-width: 280px;
        justify-content: center;
    }

    .bw-cta-platforms {
        flex-direction: column;
        gap: 1rem;
    }

    .bw-footer-links {
        flex-direction: column;
        gap: 1rem;
    }
}

@media (max-width: 480px) {
    .bw-app-buttons {
        flex-direction: column;
        width: 100%;
    }

    .bw-app-btn {
        width: 100%;
        justify-content: center;
    }

    .bw-device-container {
        width: 200px;
        height: 420px;
    }
    /* Screen inside the 200px device is ~176px × 396px. Scale the
       natural 256×556 content to fit. */
    .bw-phone-frame {
        --phone-scale: 0.688;  /* 176/256 */
    }

    .bw-step-card {
        padding: 1.5rem;
    }

    /* ─── Mobile nav compaction (overrides the broader 768 rule above) ───
       The narrower viewport doesn't have room for "Join Waitlist" + the
       full logo wordmark + safe padding, so we tighten everything and
       hide the decorative subtitle. */
    .bw-nav-content {
        padding: 0.75rem 0.625rem;
        gap: 0.5rem;
    }
    .bw-logo-mark {
        width: 34px;
        height: 34px;
    }
    .bw-logo-text {
        font-size: 0.85rem;
        letter-spacing: 0.5px;
    }
    .bw-logo-subtext {
        display: none;
    }
    .bw-nav-logo {
        gap: 0.5rem;
    }
    .bw-nav-cta {
        padding: 0.45rem 0.7rem;
        font-size: 0.72rem;
    }
    .bw-nav-auth {
        display: none;
    }
}

/* ============================================
   LANDING SUBPAGES STYLES
   ============================================ */

/* Page Hero */
.bw-page-hero {
    padding: 8rem 2rem 4rem;
    text-align: center;
}

.bw-page-title {
    font-family: 'Inter Tight', sans-serif;
    font-size: clamp(2.5rem, 6vw, 4rem);
    font-weight: 900;
    margin: 1rem 0;
    color: var(--bw-text-primary);
}

.bw-page-subtitle {
    font-size: 1.25rem;
    color: var(--bw-text-secondary);
    max-width: 600px;
    margin: 0 auto;
}

/* About Section */
.bw-about-section {
    padding: 4rem 2rem;
}

.bw-about-content {
    max-width: 800px;
    margin: 0 auto;
}

.bw-about-block {
    margin-bottom: 3rem;
}

.bw-about-block h2 {
    font-family: 'Inter Tight', sans-serif;
    font-size: 1.75rem;
    font-weight: 700;
    margin-bottom: 1rem;
    color: var(--bw-text-primary);
}

.bw-about-block p {
    font-size: 1.1rem;
    line-height: 1.8;
    color: var(--bw-text-secondary);
    margin-bottom: 1rem;
}

/* Legal Section */
.bw-legal-section {
    padding: 4rem 2rem;
}

.bw-legal-content {
    max-width: 800px;
    margin: 0 auto;
}

.bw-legal-updated {
    color: var(--bw-text-muted);
    font-size: 0.9rem;
    margin-bottom: 2rem;
}

.bw-legal-content h2 {
    font-family: 'Inter Tight', sans-serif;
    font-size: 1.5rem;
    font-weight: 700;
    margin: 2rem 0 1rem;
    color: var(--bw-text-primary);
}

.bw-legal-content p {
    font-size: 1rem;
    line-height: 1.7;
    color: var(--bw-text-secondary);
    margin-bottom: 1rem;
}

.bw-legal-content ul {
    margin: 1rem 0;
    padding-left: 1.5rem;
}

.bw-legal-content li {
    font-size: 1rem;
    line-height: 1.7;
    color: var(--bw-text-secondary);
    margin-bottom: 0.5rem;
}

/* FAQ Items */
.bw-faq-item {
    margin-bottom: 2rem;
    padding-bottom: 2rem;
    border-bottom: 1px solid var(--bw-border-subtle);
}

.bw-faq-item:last-child {
    border-bottom: none;
}

.bw-faq-item h3 {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--bw-text-primary);
    margin-bottom: 0.5rem;
}

.bw-faq-item p {
    color: var(--bw-text-secondary);
    line-height: 1.6;
}

/* Features Grid Large */
.bw-features-grid-large {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
}

.bw-feature-card-large {
    padding: 2rem;
}

.bw-feature-card-large h3 {
    font-size: 1.5rem;
    margin: 1rem 0;
}

.bw-feature-card-large p {
    font-size: 1rem;
    line-height: 1.7;
    margin-bottom: 1.5rem;
}

.bw-feature-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.bw-feature-list li {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0;
    color: var(--bw-text-secondary);
    font-size: 0.95rem;
}

.bw-feature-list li::before {
    content: "✓";
    color: var(--bw-accent);
    font-weight: bold;
}

/* Detailed Steps */
.bw-how-it-works-detailed {
    padding: 4rem 2rem;
}

.bw-steps-detailed {
    max-width: 800px;
    margin: 0 auto;
}

.bw-step-detailed {
    display: flex;
    gap: 2rem;
    margin-bottom: 4rem;
    padding-bottom: 4rem;
    border-bottom: 1px solid var(--bw-border-subtle);
}

.bw-step-detailed:last-child {
    border-bottom: none;
    margin-bottom: 0;
}

.bw-step-number-large {
    font-family: 'Inter Tight', sans-serif;
    font-size: 4rem;
    font-weight: 900;
    color: var(--bw-accent);
    opacity: 0.3;
    line-height: 1;
}

.bw-step-content {
    flex: 1;
}

.bw-step-icon-large {
    font-size: 3rem;
    margin-bottom: 1rem;
}

.bw-step-content h2 {
    font-family: 'Inter Tight', sans-serif;
    font-size: 1.75rem;
    font-weight: 700;
    margin-bottom: 1rem;
    color: var(--bw-text-primary);
}

.bw-step-content p {
    font-size: 1.1rem;
    line-height: 1.7;
    color: var(--bw-text-secondary);
    margin-bottom: 1.5rem;
}

.bw-step-detail-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.bw-step-detail {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: var(--bw-text-secondary);
}

.bw-step-detail .bw-check {
    color: var(--bw-accent);
    font-weight: bold;
}

/* Scoring Section */
.bw-scoring-section {
    background: var(--bw-bg-subtle);
}

.bw-scoring-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
    max-width: 900px;
    margin: 0 auto;
}

.bw-scoring-card {
    background: var(--bw-bg);
    border: 1px solid var(--bw-border-subtle);
    border-radius: 16px;
    padding: 2rem;
}

.bw-scoring-card h3 {
    font-family: 'Inter Tight', sans-serif;
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
    color: var(--bw-text-primary);
}

.bw-scoring-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--bw-border-subtle);
}

.bw-scoring-item:last-child {
    border-bottom: none;
}

.bw-scoring-pts {
    font-family: 'Inter Tight', sans-serif;
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--bw-accent);
    min-width: 50px;
}

/* Active nav link */
.bw-nav-links a.active {
    color: var(--bw-accent);
}

/* Responsive */
@media (max-width: 768px) {
    .bw-step-detailed {
        flex-direction: column;
        gap: 1rem;
    }
    
    .bw-step-number-large {
        font-size: 2.5rem;
    }
    
    .bw-page-hero {
        padding: 6rem 1rem 2rem;
    }
}

/* ============================================
   OFFSEASON TRANSITION PAGE STYLES
   ============================================ */

.bw-offseason-features {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    margin-top: 1.5rem;
}

.bw-offseason-feature {
    display: flex;
    gap: 1.25rem;
    align-items: flex-start;
    padding: 1.5rem;
    background: var(--bw-bg-subtle);
    border: 1px solid var(--bw-border-subtle);
    border-radius: 12px;
}

.bw-offseason-feature .bw-feature-icon {
    font-size: 2rem;
    flex-shrink: 0;
}

.bw-offseason-feature h3 {
    font-family: 'Inter Tight', sans-serif;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--bw-text-primary);
    margin-bottom: 0.5rem;
}

.bw-offseason-feature p {
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--bw-text-secondary);
    margin: 0;
}

/* Transition CTA Block */
.bw-transition-block {
    background: var(--bw-bg-subtle);
    border: 1px solid var(--bw-border-subtle);
    border-radius: 16px;
    padding: 2rem;
    text-align: center;
}

.bw-transition-cta {
    margin-top: 1.5rem;
}

.bw-btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 2rem;
    background: var(--bw-accent);
    color: white;
    font-size: 1.1rem;
    font-weight: 600;
    border-radius: 12px;
    text-decoration: none;
    transition: all 0.2s ease;
}

.bw-btn-primary:hover {
    background: var(--bw-accent-hover);
    transform: translateY(-2px);
}

.bw-btn-icon {
    font-size: 1.25rem;
}

.bw-transition-note {
    margin-top: 1rem;
    font-size: 0.9rem;
    color: var(--bw-text-muted);
}