/* =========================
   RESET (IMPORTANT)
   ========================= */
html, body {
    margin: 0;
    padding: 0;
    height: 100%;
}

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

/* =========================
   BASE
   ========================= */
body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background: var(--bg);
    color: var(--text);
    line-height: 1.6;
    /* IMP-0370: dvh/svh tracks the visible viewport (100vh includes the space behind the
       mobile URL bar). The vh line above each one is the fallback for browsers without it. */
    min-height: 100vh;
    min-height: 100dvh;
    overflow-x: hidden;
    position: relative;
}

a { color: var(--primary); text-decoration: none; }
a:hover { color: var(--primary-dark); }

.skip-to-content {
    position: absolute;
    top: -100px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--primary);
    color: white;
    padding: 0.75rem 1.5rem;
    border-radius: 10px;
    z-index: 9999;
    font-weight: 600;
    transition: top 0.2s ease;
}

.skip-to-content:focus {
    top: 1rem;
    color: white;
    outline: 2px solid var(--primary-dark);
    outline-offset: 2px;
}

/* =========================
   BACKGROUND (FIXED)
   ========================= */
.welcome-bg {
    /* One knob controls where portal slice ends */
    /* Audit #3604 (BUG-2899): dvh/dvw track the visible viewport, where vh hides behind
       the mobile URL bar and vw counts the scrollbar gutter. The bare line is the
       fallback for browsers that cannot parse the dynamic unit. */
    --hero-bg-h: clamp(420px, 78vh, 760px);
    --hero-bg-h: clamp(420px, 78dvh, 760px);

    position: absolute;
    inset: 0;
    z-index: 0;              /* DO NOT use -1 */
    overflow: hidden;
    pointer-events: none;
}

/* Ensure real content sits above background */
.welcome-header,
.welcome {
    position: relative;
    z-index: 1;
}

.welcome-bg-image {
    position: absolute;
    inset: 0;
    background: var(--brand-abyss);

    /* Endless page background */
    /* IMP-0728: same 865x285 artwork, encoded as a 34KB WebP instead of 410KB PNG. */
    background-image: url('../assets/music/mystrix_layer3.webp?v=6e2e1567d865a8c4');
    background-repeat: repeat-y;
    background-size: 100% auto;
    background-position: center var(--hero-bg-h);

    filter: saturate(1.06) contrast(1.10);
}

/* Top hero portal slice */
.welcome-bg-image::before {
    content: '';
    position: absolute;
    inset-inline-start: 0;
    inset-inline-end: 0;
    top: 0;
    height: var(--hero-bg-h);

    /* IMP-0728: same 865x417 artwork, encoded as a 60KB WebP instead of 655KB PNG. */
    background-image: url('../assets/music/mystrix_top.webp?v=0d63759b7ec47721');
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;

    filter: saturate(1.06) contrast(1.08);
}

/* Blend seam so join is invisible */
.welcome-bg-image::after {
    content: '';
    position: absolute;
    inset-inline-start: 0;
    inset-inline-end: 0;
    top: calc(var(--hero-bg-h) - 220px);
    height: 280px;
    background: linear-gradient(
        to bottom,
        var(--tint-abyss-0) 0%,
        var(--brand-abyss) 100%
    );
}

.welcome-bg-overlay {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(1100px 700px at 58% 18%, var(--tint-text-100) 0%, var(--tint-text-0) 60%),
        radial-gradient(900px 700px at 18% 22%, var(--tint-primary-260) 0%, var(--tint-primary-0) 60%),
        radial-gradient(900px 700px at 86% 30%, var(--tint-secondary-220) 0%, var(--tint-secondary-0) 62%),
        linear-gradient(180deg, var(--tint-nightshade-620) 0%, var(--tint-nightshade-780) 48%, var(--tint-nightshade-900) 100%);
}

.welcome-bg-gradient {
    position: absolute;
    inset: -20%;
    background:
        radial-gradient(900px 600px at 20% 10%, var(--tint-primary-220) 0%, var(--tint-primary-0) 55%),
        radial-gradient(900px 600px at 80% 20%, var(--tint-secondary-200) 0%, var(--tint-secondary-0) 55%),
        radial-gradient(900px 600px at 50% 90%, var(--tint-accent-blue-120) 0%, var(--tint-accent-blue-0) 55%);
    filter: blur(8px);
}

.welcome-bg-grid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(var(--tint-text-50) 1px, transparent 1px),
        linear-gradient(90deg, var(--tint-text-50) 1px, transparent 1px);
    background-size: 40px 40px;
    opacity: 0.08;
    mask-image: radial-gradient(70% 60% at 50% 30%, var(--brand-black) 40%, var(--tint-black-0) 75%);
}

.welcome-bg-orb {
    position: absolute;
    width: 520px;
    height: 520px;
    border-radius: 999px;
    background: radial-gradient(circle at 30% 30%, var(--tint-text-150), var(--tint-text-0) 60%);
    opacity: 0.25;
    filter: blur(18px);
}

.orb-1 { top: -200px; inset-inline-start: -150px; background-color: var(--tint-primary-280); }
.orb-2 { top: 90px; inset-inline-end: -220px; background-color: var(--tint-secondary-220); }
.orb-3 { bottom: -260px; inset-inline-start: 40%; background-color: var(--tint-success-150); }

/* =========================
   HEADER
   ========================= */
.welcome-header {
    position: sticky;
    top: 0;
    z-index: 20;
    background: var(--tint-nightshade-300);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--tint-text-100);
}

.welcome-header-inner {
    max-width: 1200px;
    margin: 0 auto;
    /* IMP-0737: welcome.html uses viewport-fit=cover. Preserve the intended
       gutter beyond any notch or rounded display edge. */
    padding: calc(0.9rem + env(safe-area-inset-top, 0px))
             calc(1.25rem + env(safe-area-inset-right, 0px))
             0.9rem
             calc(1.25rem + env(safe-area-inset-left, 0px));
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.welcome-logo {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    color: var(--text);
    font-weight: 800;
    letter-spacing: 0.01em;
    font-size: 1.05rem;
}

.welcome-logo i {
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: 1.35rem;
}

.welcome-nav {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.nav-link {
    color: var(--tint-text-860);
    padding: 0.5rem 0.35rem;
    border-radius: 10px;
    border: 1px solid transparent;
    background: transparent;
}

.nav-link:hover {
    background: var(--tint-text-50);
    color: var(--text);
}

.welcome {
    width: 100%;
    padding-bottom: env(safe-area-inset-bottom, 0px);
}

/* =========================
   HERO
   ========================= */
.hero {
    padding: 3.25rem
             calc(1.25rem + env(safe-area-inset-right, 0px))
             2.5rem
             calc(1.25rem + env(safe-area-inset-left, 0px));
    /* Audit #3604 (BUG-2899): dvh/dvw track the visible viewport, where vh hides behind
       the mobile URL bar and vw counts the scrollbar gutter. The bare line is the
       fallback for browsers that cannot parse the dynamic unit. */
    min-height: clamp(420px, 78vh, 760px);
    min-height: clamp(420px, 78dvh, 760px);
}

.hero-inner {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 2.25rem;
    align-items: start;
}

.hero-kicker {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-bottom: 1.25rem;
}

.kicker-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.7rem;
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 650;
    background: linear-gradient(135deg, var(--tint-primary-180), var(--tint-secondary-160));
    border: 1px solid var(--tint-text-120);
    color: var(--tint-text-940);
}

.kicker-pill.subtle {
    background: var(--tint-text-40);
    color: var(--tint-text-820);
}

.hero-title {
    /* IMP-0619: Fraunces, the design brief's display face, replacing the
       generic `ui-serif` stack — whichever serif the OS happened to have. */
    font-family: var(--rd-font-display);
    font-optical-sizing: auto;
    /* Audit #3604 (BUG-2899): dvh/dvw track the visible viewport, where vh hides behind
       the mobile URL bar and vw counts the scrollbar gutter. The bare line is the
       fallback for browsers that cannot parse the dynamic unit. */
    font-size: clamp(2.15rem, 4.2dvw, 3.45rem);
    line-height: 1.05;
    letter-spacing: -0.02em;
    margin-bottom: 1rem;
}

.hero-title-accent {
    display: block;
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.hero-subtitle {
    font-size: 1.06rem;
    color: var(--tint-text-840);
    max-width: 52ch;
}

.hero-subtitle strong {
    color: var(--text);
    font-weight: 750;
}

.hero-cta {
    margin-top: 1.6rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.85rem;
    align-items: center;
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    padding: 0.8rem 1.05rem;
    border-radius: 12px;
    border: 1px solid var(--tint-text-120);
    cursor: pointer;
    transition: transform 0.12s ease, background 0.12s ease, border-color 0.12s ease, opacity 0.12s ease;
    font-weight: 700;
}

.btn:active { transform: translateY(1px); }

.btn-lg { padding: 0.95rem 1.15rem; }

.btn-primary {
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    color: var(--text);
    border-color: var(--tint-text-0);
    box-shadow: 0 18px 44px var(--tint-primary-140);
}

.btn-primary:hover {
    opacity: 0.97;
}

.btn-ghost {
    background: var(--tint-text-50);
    color: var(--tint-text-920);
}

.btn-ghost:hover {
    background: var(--tint-text-80);
}

.btn-badge {
    margin-inline-start: 0.2rem;
    font-size: 0.8rem;
    font-weight: 750;
    padding: 0.18rem 0.55rem;
    border-radius: 999px;
    background: var(--tint-black-220);
    border: 1px solid var(--tint-text-180);
}

.hero-trust {
    margin-top: 0.9rem;
}

.hero-guest-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    color: var(--text-secondary);
    min-height: 44px;
    padding: 0.6rem 0.75rem;
    border-radius: 10px;
    border: 1px solid var(--tint-text-100);
    width: fit-content;
    justify-self: start;
}

.hero-guest-link:hover {
    color: var(--text);
    background: var(--tint-text-60);
}

.trust-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem 1rem;
    color: var(--tint-text-700);
    font-size: 0.92rem;
}

.trust-item {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.25rem 0;
}

/* =========================
   HERO VISUAL
   ========================= */
.hero-visual {
    display: grid;
    gap: 1rem;
}

.scene-card {
    background: linear-gradient(180deg, var(--tint-umbra-620), var(--tint-void-500));
    border: 1px solid var(--tint-text-140);
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 34px 90px var(--tint-black-400);
    backdrop-filter: blur(16px);
}

.scene-top {
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.9rem 1rem;
    border-bottom: 1px solid var(--tint-text-80);
    background: var(--tint-black-180);
}

.scene-chip {
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-weight: 800;
    padding: 0.35rem 0.55rem;
    border-radius: 999px;
    border: 1px solid var(--tint-text-140);
    color: var(--tint-text-800);
    background: var(--tint-text-30);
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    white-space: nowrap;
}

.chip-live { color: var(--tint-text-920); }

.scene-chip .dot {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: var(--tint-success-900);
    box-shadow: 0 0 0 4px var(--tint-success-180);
}

/* IMP-0619: .choices / .choice / .choice-key used to live here — a three-pill
   list with gradient keycaps. The reader design system's forking rule
   (css/reader.css §8) is what a choice looks like on this product now, and the
   hero renders the real component. */
.scene-body {
    padding: 1rem;
}

.scene-narration {
    font-family: var(--rd-font-reading);
    font-size: var(--rd-prose-sm);
    line-height: var(--rd-leading-prose);
    color: var(--tint-text-880);
    max-width: none;
}

.scene-divider {
    height: 1px;
    background: var(--tint-text-100);
    margin: 1rem 0;
}

.demo-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
    justify-content: flex-start;
}

.demo-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.45rem 0.7rem;
    border-radius: 999px;
    border: 1px solid var(--tint-text-120);
    background: var(--tint-nightshade-300);
    color: var(--tint-text-840);
    font-weight: 750;
    font-size: 0.92rem;
    backdrop-filter: blur(14px);
}

.mini-cards {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.75rem;
}

.mini-card {
    background: var(--tint-nightshade-400);
    border: 1px solid var(--tint-text-120);
    border-radius: 16px;
    padding: 0.9rem 1rem;
    box-shadow: 0 22px 60px var(--tint-black-280);
    backdrop-filter: blur(16px);
}

.mini-title {
    font-weight: 850;
    letter-spacing: -0.01em;
}

.mini-body {
    margin-top: 0.25rem;
    color: var(--tint-text-740);
    font-size: 0.95rem;
}

.scene-footer {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 0.9rem 1rem;
    border-top: 1px solid var(--tint-text-80);
    background: var(--tint-black-140);
}

.scene-signal {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.35rem 0.6rem;
    border-radius: 999px;
    border: 1px solid var(--tint-text-120);
    background: var(--tint-text-30);
    font-size: 0.85rem;
    color: var(--text-secondary);
}

/* =========================
   SECTIONS + FEATURES
   ========================= */
.section {
    padding: 2.5rem
             calc(1.25rem + env(safe-area-inset-right, 0px))
             2.5rem
             calc(1.25rem + env(safe-area-inset-left, 0px));
    /* IMP-0728: the feature art and glass effects sit below the hero. Supporting browsers
       can skip their first-frame layout/paint until they approach the viewport; the
       intrinsic placeholder preserves scroll geometry, and unsupported browsers keep the
       exact existing rendering path. */
    content-visibility: auto;
    contain-intrinsic-size: auto 640px;
}

.section-inner {
    max-width: 1200px;
    margin: 0 auto;
}

.section-header {
    margin-bottom: 1.25rem;
}

.section-title {
    font-family: var(--rd-font-display);
    font-optical-sizing: auto;
    font-size: 1.65rem;
    letter-spacing: -0.01em;
    margin-bottom: 0.35rem;
}

.section-subtitle {
    color: var(--tint-text-720);
    max-width: 60ch;
}

.feature-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.9rem;
}

.feature {
    background: var(--tint-nightshade-400);
    border: 1px solid var(--tint-text-120);
    border-radius: 16px;
    padding: 1rem;
    min-height: 170px;
    backdrop-filter: blur(16px);
}

.feature-image {
    padding: 0;
    overflow: hidden;
    min-height: 200px;
    display: grid;
    grid-template-rows: 120px 1fr;
}

.feature-media {
    position: relative;
    background-image: url('../assets/music/mystrix_middle.webp?v=5dcae6a07029d319');
    background-size: 400% 100%;
    background-repeat: no-repeat;
    filter: saturate(1.06) contrast(1.06);
}

.feature-media::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, var(--tint-black-0) 0%, var(--tint-black-420) 100%);
}

.feature-content {
    padding: 0.95rem 1rem 1.05rem;
}

.feature-agency .feature-media { background-position: 0% 50%; }
.feature-creativity .feature-media { background-position: 33.333% 50%; }
.feature-progression .feature-media { background-position: 66.666% 50%; }
.feature-immersion .feature-media { background-position: 100% 50%; }

.feature-title {
    font-family: var(--rd-font-display);
    font-optical-sizing: auto;
    font-size: 1.05rem;
    margin-bottom: 0.35rem;
}

.feature-body {
    color: var(--tint-text-740);
    font-size: 0.95rem;
}

/* =========================
   MOONSHOT / TRUTH / CTA
   ========================= */
.moonshot {
    margin-top: 1rem;
}

.moonshot-inner {
    background: linear-gradient(135deg, var(--tint-primary-120), var(--tint-secondary-100));
    border: 1px solid var(--tint-text-120);
    border-radius: 18px;
    padding: 1.15rem 1.25rem;
}

.moonshot-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.35rem 0.6rem;
    border-radius: 999px;
    font-weight: 850;
    font-size: 0.85rem;
    background: var(--tint-black-180);
    border: 1px solid var(--tint-text-140);
    color: var(--tint-text-920);
}

.moonshot-title {
    margin-top: 0.8rem;
    font-family: var(--rd-font-display);
    font-optical-sizing: auto;
    font-size: 1.25rem;
}

.moonshot-body {
    margin-top: 0.5rem;
    color: var(--text-secondary);
    max-width: 80ch;
}

.moonshot-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
    margin-top: 0.9rem;
}

.moonshot-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.45rem 0.7rem;
    border-radius: 999px;
    border: 1px solid var(--tint-text-120);
    background: var(--tint-text-40);
    color: var(--tint-text-820);
    font-weight: 700;
    font-size: 0.92rem;
}

.truth {
    margin-top: 1rem;
}

.truth-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.9rem;
}

.truth-card {
    background: var(--tint-bg-card-700);
    border: 1px solid var(--tint-text-100);
    border-radius: 16px;
    padding: 1rem;
}

.truth-card-muted {
    background: var(--tint-bg-card-550);
}

.truth-title {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    font-weight: 850;
    margin-bottom: 0.6rem;
}

.truth-title i {
    color: var(--tint-text-880);
}

.truth-list {
    padding-inline-start: 1.1rem;
    color: var(--tint-text-750);
    display: grid;
    gap: 0.45rem;
}

.pricing-panel {
    margin-top: 1rem;
    background: var(--tint-bg-card-720);
    border: 1px solid var(--tint-text-120);
    border-radius: 18px;
    padding: 1rem 1.05rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.pricing-title {
    font-weight: 850;
    margin-bottom: 0.25rem;
}

.pricing-body {
    color: var(--tint-text-740);
    max-width: 85ch;
}

.cta-panel {
    background: var(--tint-bg-card-720);
    border: 1px solid var(--tint-text-120);
    border-radius: 18px;
    padding: 1.2rem 1.25rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}

.cta-title {
    font-family: var(--rd-font-display);
    font-optical-sizing: auto;
    font-size: 1.45rem;
    letter-spacing: -0.01em;
    margin-bottom: 0.25rem;
}

.cta-subtitle {
    color: var(--tint-text-740);
    max-width: 66ch;
}

.cta-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    justify-content: flex-end;
}

.fineprint {
    margin-top: 1rem;
    color: var(--tint-text-620);
    font-size: 0.92rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
}

.fineprint a { color: var(--tint-text-720); }
.fineprint a:hover { color: var(--text); }

.sep { opacity: 0.7; }

/* =========================
   RESPONSIVE
   ========================= */
@media (max-width: 1000px) {
    .hero-inner {
        grid-template-columns: 1fr;
    }

    .hero-visual {
        order: 2;
    }

    .feature-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .truth-grid {
        grid-template-columns: 1fr;
    }

    .pricing-panel {
        flex-direction: column;
        align-items: flex-start;
    }

    .cta-panel {
        flex-direction: column;
        align-items: flex-start;
    }

    .cta-actions {
        width: 100%;
        justify-content: flex-start;
    }
}

@media (max-width: 520px) {
    .welcome-header-inner {
        padding: calc(0.8rem + env(safe-area-inset-top, 0px))
                 calc(0.9rem + env(safe-area-inset-right, 0px))
                 0.8rem
                 calc(0.9rem + env(safe-area-inset-left, 0px));
        gap: 0.5rem;
    }

    .hero {
        padding: 2.5rem
                 calc(0.9rem + env(safe-area-inset-right, 0px))
                 2rem
                 calc(0.9rem + env(safe-area-inset-left, 0px));
    }

    .section {
        padding: 2rem
                 calc(0.9rem + env(safe-area-inset-right, 0px))
                 2rem
                 calc(0.9rem + env(safe-area-inset-left, 0px));
    }

    .feature-grid {
        grid-template-columns: 1fr;
    }

    .btn,
    .btn-lg {
        width: 100%;
    }

    /* IMP-1476: registration and discovery share the one action row. The latter no
       longer inserts a secondary strip between this composition and the scene. */
    .hero-cta {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.5rem;
        align-items: stretch;
    }

    .hero-cta .btn {
        width: 100%;
        min-width: 0;
        padding: 0.75rem 0.5rem;
        justify-content: center;
        text-align: center;
        line-height: 1.25;
    }

    /* Audit #3760 fixes BUG-2966. This block used to hide `.nav-link` outright, and the
       header's two `.nav-link` anchors are Get-app and Log In. Nothing else on this page
       links to /login, so a returning reader on a phone — cleared cookies, new device —
       saw Sign Up as the only account action and had to register a duplicate account or
       edit the URL by hand.

       The reason the links were hidden is the `.btn, .btn-lg { width: 100% }` rule above:
       it applies to the header's Sign Up button too, which leaves a full-width button and
       no room for anything beside it. Exempting the header's buttons is what makes space,
       so Log In can stay. Get-app is the one that goes: it is genuinely secondary here and
       the page's fineprint still links /download at the bottom. */
    .welcome-nav {
        gap: 0.4rem;
    }

    .welcome-header .btn,
    .welcome-header .btn-lg {
        width: auto;
    }

    .welcome-nav .nav-link {
        padding: 0.5rem 0.25rem;
        font-size: 0.95rem;
    }

    .welcome-nav .nav-link--secondary {
        display: none;
    }
}