/* ==========================================================================
   SuperClassic v2 refresh layer — loaded after index.css
   Light sections, "What's New in 1.2" section, reveal animations,
   and Apple-inspired global polish. Brand tokens unchanged.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Global polish (scoped under body.v2)
   -------------------------------------------------------------------------- */

body.v2 {
    line-height: 1.6;
}

/* index.css puts overflow-x: hidden on html/body, which turns them into
   scroll containers and silently breaks position: sticky (the scrub scene
   never pins). clip prevents horizontal overflow without doing that. */
html,
body.v2 {
    overflow-x: clip;
}

body.v2 .section-title {
    font-size: clamp(30px, 4.4vw, 48px);
    letter-spacing: -0.02em;
}

body.v2 .intro h2,
body.v2 .cta-title {
    letter-spacing: -0.02em;
}

body.v2 .header.scrolled {
    background: rgba(26, 27, 36, 0.72);
    -webkit-backdrop-filter: blur(20px) saturate(1.5);
    backdrop-filter: blur(20px) saturate(1.5);
    box-shadow: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

body.v2 .faq-item,
body.v2 .requirements-footer-card {
    border-radius: 20px;
}

/* Buy buttons: neutral depth shadow on hover instead of the orange glow */
body.v2 .buy-button-header:hover,
body.v2 .centered-buy-button:hover,
body.v2 .hero-cta:hover {
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.35);
}

/* The content wrapper now opens with the light social-proof band directly
   under the video, so no pull-up and no top padding of its own. */
body.v2 .content {
    margin-top: 0;
    padding-top: 0;
}

/* --------------------------------------------------------------------------
   1a. Social proof band — press quotes plus a compact artist strip, on the
   light token set. The press logos are white-on-transparent PNGs, so they
   get inverted here.
   -------------------------------------------------------------------------- */

body.v2 .press-reviews.section-light {
    margin-bottom: 0;
    padding: clamp(80px, 10vh, 130px) 24px;
}

.press-reviews.section-light .press-review-logo {
    filter: invert(1);
    opacity: 0.8;
}

.press-reviews.section-light .press-review-quote {
    color: #1d1d2b;
}

.press-reviews.section-light .press-review-item {
    border-left-color: rgba(0, 0, 0, 0.1);
}

.press-reviews.section-light .press-review-link {
    color: rgba(29, 29, 43, 0.45);
}

.press-reviews.section-light .press-review-link:hover {
    color: #1d1d2b;
}

.proof-eyebrow {
    margin: 72px 0 0;
    font-family: 'Unbounded', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
    font-size: clamp(10px, 0.85vw, 12px);
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    text-align: center;
    color: var(--accent-orange);
}

.proof-strip {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    max-width: 1100px;
    margin: 24px auto 0;
    text-align: left;
}

@media (max-width: 900px) {
    .press-reviews.section-light .press-review-item {
        border-top-color: rgba(0, 0, 0, 0.1);
    }

    .proof-strip {
        grid-template-columns: 1fr;
        max-width: 560px;
    }
}

/* Intro now follows a light band, so it carries its own top padding */
body.v2 .intro-v2 {
    padding-top: clamp(90px, 11vh, 140px);
}

/* --------------------------------------------------------------------------
   1b. "1.2 makes it even bigger" — the What's New block moved below Key
   Features and onto the dark background. Cards stay white; only the loose
   copy around them changes colour. Side padding comes from .content now.
   -------------------------------------------------------------------------- */

body.v2 .content > .whats-new {
    padding-left: 0;
    padding-right: 0;
}

.whats-new.wn-dark .wn-headline {
    color: #ffffff;
}

.whats-new.wn-dark .wn-subhead,
.whats-new.wn-dark .wn-daw-caption,
.whats-new.wn-dark .wn-cta-note {
    color: rgba(255, 255, 255, 0.7);
}

.whats-new.wn-dark .wn-badge {
    background: rgba(243, 116, 33, 0.16);
}

.whats-new.wn-dark .wn-card {
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35);
}

.whats-new.wn-dark .scrub-copy h3 {
    color: #ffffff;
}

.whats-new.wn-dark .scrub-copy p {
    color: rgba(255, 255, 255, 0.78);
}

/* --------------------------------------------------------------------------
   1b. Redesigned hero — photo removed, clean gradient backdrop,
   announcement pill, floating 1.2 GUI card.
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: no-preference) {
    html {
        scroll-behavior: smooth;
    }
}

/* Display type: don't inherit body line-height; tighten tracking */
body.v2 .tagline {
    line-height: 1.15;
    letter-spacing: -0.01em;
    margin-bottom: clamp(16px, 2vw, 24px);
}

body.v2 .subhead {
    margin-bottom: clamp(26px, 3vw, 40px);
}

body.v2 .hero {
    background:
        radial-gradient(900px 600px at 85% 10%, rgba(0, 212, 255, 0.07), transparent 60%),
        radial-gradient(1100px 750px at 8% 95%, rgba(243, 116, 33, 0.12), transparent 60%),
        #16171f;
}

body.v2 .hero::before {
    display: none; /* photo-fade gradient from the old background image */
}

/* Update notice — quiet eyebrow line, no ornament */
.hero-eyebrow {
    display: flex;
    width: fit-content;
    align-items: center;
    gap: 12px;
    margin-bottom: 34px;
    color: var(--text-gray);
    font-family: 'Kantumruy Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
    font-weight: 600;
    font-size: 13px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    text-decoration: none;
}

.hero-eyebrow-sep {
    width: 1px;
    height: 12px;
    background: rgba(255, 255, 255, 0.25);
}

.hero-eyebrow-link {
    color: var(--accent-orange);
    transition: opacity 0.2s ease;
}

.hero-eyebrow:hover .hero-eyebrow-link {
    opacity: 0.75;
}

/* GUI card — in flow inside hero-left (mobile/tablet); a real flex
   column (.hero-right-col) takes over on wide screens */
.hero-gui-wrap {
    margin: clamp(36px, 5vh, 56px) auto clamp(36px, 5vh, 56px);
    max-width: min(92vw, 560px);
}

/* In the stacked layout the buy row follows the card — keep the card's
   caption from visually attaching to it */
@media (max-width: 1100px) {
    body.v2 .hero-cta-stack {
        margin-top: 8px;
    }
}

/* Stacked-but-wide (tablet): the hero column is a left-aligned grid, so
   the card sits on the same left edge instead of floating centered */
@media (min-width: 769px) and (max-width: 1100px) {
    .hero-gui-wrap {
        margin-left: 0;
        margin-right: auto;
        max-width: min(72vw, 620px);
    }

    body.v2 .hero-gui-card {
        text-align: left;
    }
}

.hero-right-col {
    display: none;
}

.hero-gui-card {
    display: block;
    position: relative;
    text-decoration: none;
    text-align: center;
}

.hero-gui-card::before {
    content: '';
    position: absolute;
    inset: -8% -6%;
    background:
        radial-gradient(50% 55% at 30% 75%, rgba(243, 116, 33, 0.18), transparent 70%),
        radial-gradient(45% 50% at 75% 20%, rgba(0, 212, 255, 0.11), transparent 70%);
    filter: blur(28px);
    z-index: 0;
    pointer-events: none;
}

.hero-gui-card img {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    height: auto;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow:
        0 30px 70px rgba(0, 0, 0, 0.55),
        0 10px 26px rgba(0, 0, 0, 0.4);
}

.hero-gui-caption {
    position: relative;
    z-index: 1;
    display: inline-block;
    margin-top: 14px;
    font-size: 13.5px;
    font-weight: 500;
    color: var(--text-gray);
    transition: color 0.25s ease;
}

.hero-gui-card:hover .hero-gui-caption {
    color: var(--accent-orange);
}

/* Hero CTA stack — primary + ghost secondary, quiet metadata, inline trust row */
.hero-cta-stack {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    margin-top: 6px;
}

.hero-cta-row {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}

/* Side by side the buttons keep their own width; once they wrap onto two lines
   (narrow windows just above the 480px phone layout) each fills its line */
.hero-cta-row .centered-buy-button,
.hero-cta-row .hero-demo-button {
    flex: 1 1 auto;
    text-align: center;
    box-sizing: border-box;
}

.hero-demo-button {
    display: inline-block;
    padding: 12px 26px;
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: 30px;
    color: var(--text-light);
    font-family: 'Cal Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
    font-size: 18px;
    text-decoration: none;
    transition: border-color 0.25s ease, background 0.25s ease, transform 0.25s ease;
}

.hero-demo-button:hover {
    border-color: rgba(243, 116, 33, 0.7);
    background: rgba(255, 255, 255, 0.05);
    transform: translateY(-2px);
}

.hero-meta-line {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 2px 0 0;
    font-size: 13px;
    letter-spacing: 0.02em;
    color: var(--text-gray);
}

.hero-meta-line .vst3-logo {
    width: 32px;
    height: auto;
    opacity: 0.8;
}

.hero-trust-row {
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
}

.trust-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    color: var(--text-gray);
}

@media (max-width: 480px) {
    .hero-cta-row {
        width: 100%;
    }

    .hero-cta-row .centered-buy-button,
    .hero-demo-button {
        width: 100%;
        text-align: center;
        box-sizing: border-box;
    }

    .hero-trust-row {
        gap: 10px 16px;
    }
}

/* Wide screens: two real flex columns — content can never overlap */
@media (min-width: 1101px) {
    body.v2 .hero-left {
        flex: 1 1 0;
        min-width: 0;
    }

    /* Never let the wordmark outgrow its column */
    body.v2 .logo-container {
        width: min(704px, 74.8vw, 100%);
    }

    .hero-gui-wrap {
        display: none; /* the flex column below takes over */
    }

    .hero-right-col {
        display: flex;
        flex: 0 1 clamp(380px, 42vw, 660px);
        min-width: 340px;
        align-self: center;
        justify-content: center;
    }

    .hero-right-col .hero-gui-card {
        transform: perspective(1300px) rotateY(-6deg);
        transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .hero-right-col .hero-gui-card:hover {
        transform: perspective(1300px) rotateY(0deg) translateY(-4px);
    }

    @media (prefers-reduced-motion: no-preference) {
        .hero-right-col .hero-gui-card img {
            animation: heroFloat 7s ease-in-out infinite alternate;
        }
    }
}

@keyframes heroFloat {
    from { transform: translateY(-5px); }
    to   { transform: translateY(5px); }
}

/* Staggered hero load-in (elements exist at load; pure CSS) */
@keyframes v2FadeUp {
    from {
        opacity: 0;
        transform: translate3d(0, 18px, 0);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

@media (prefers-reduced-motion: no-preference) {
    body.v2 .hero-content     { animation: none; } /* parent fadeInUp would double the motion */
    body.v2 .hero-eyebrow     { animation: v2FadeUp 0.7s ease 0.05s backwards; }
    body.v2 .press-feature    { animation: v2FadeUp 0.7s ease 0.14s backwards; }
    body.v2 .logo-container   { animation: v2FadeUp 0.7s ease 0.22s backwards; }
    body.v2 .tagline          { animation: v2FadeUp 0.7s ease 0.30s backwards; }
    body.v2 .subhead          { animation: v2FadeUp 0.7s ease 0.38s backwards; }
    body.v2 .hero-gui-wrap,
    body.v2 .hero-right-col   { animation: v2FadeUp 0.9s ease 0.45s backwards; }
    body.v2 .hero-cta-stack,
    body.v2 .purchase-terms,
    body.v2 .hero-audio-section { animation: v2FadeUp 0.7s ease 0.50s backwards; }
}

@media (prefers-reduced-motion: reduce) {
    .hero-gui-card img {
        animation: none;
    }

    .hero-gui-card {
        transition: none;
    }
}

/* --------------------------------------------------------------------------
   2. Reveal-on-scroll system
   Hidden states only apply when JS is running (html.js) so content is
   never invisible without JavaScript.
   -------------------------------------------------------------------------- */

html.js .reveal {
    opacity: 0;
    transform: translateY(24px);
    transition:
        opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
        transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
    transition-delay: calc(var(--reveal-i, 0) * 70ms);
    will-change: opacity, transform;
}

html.js .reveal.reveal-scale {
    transform: translateY(28px) scale(0.97);
    transition-duration: 0.9s, 0.9s;
}

html.js .reveal.is-visible {
    opacity: 1;
    transform: none;
}

@media (prefers-reduced-motion: reduce) {
    html.js .reveal,
    html.js .reveal.reveal-scale {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/* --------------------------------------------------------------------------
   3. Light section theme
   Token override scope; components inside get targeted rules below.
   -------------------------------------------------------------------------- */

.section-light {
    --bg-dark: #f5f5f7;
    --text-light: #1d1d2b;
    --text-gray: #55555f;
    --card-bg: #ffffff;
    --border-subtle: rgba(0, 0, 0, 0.08);
    background: #f5f5f7;
    color: #1d1d2b;
}

/* Full-bleed light band for sections living inside the constrained
   .content wrapper (e.g. FAQ, testimonials): stretch the background,
   keep the layout. */
.section-light.bleed {
    box-shadow: 0 0 0 100vmax #f5f5f7;
    clip-path: inset(0 -100vmax);
}

.section-light .section-title {
    color: #1d1d2b;
}

/* --------------------------------------------------------------------------
   4. "What's New in SuperClassic 1.2" section
   -------------------------------------------------------------------------- */

.whats-new {
    padding: clamp(96px, 12vh, 160px) 24px;
    text-align: center;
}

.wn-container {
    max-width: 1100px;
    margin: 0 auto;
}

.wn-badge {
    display: inline-block;
    padding: 8px 18px;
    border-radius: 999px;
    background: rgba(243, 116, 33, 0.1);
    color: var(--accent-orange);
    font-family: 'Kantumruy Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
    font-weight: 600;
    font-size: 13px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.wn-headline {
    margin: 22px 0 0;
    font-family: 'Cal Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
    font-size: clamp(2.5rem, 6vw, 4.25rem);
    line-height: 1.05;
    letter-spacing: -0.02em;
    color: #1d1d2b;
    font-weight: 400;
}

.wn-subhead {
    margin: 22px auto 0;
    max-width: 46rem;
    font-size: clamp(1.1rem, 2vw, 1.35rem);
    line-height: 1.55;
    color: #55555f;
}

.wn-shot {
    margin: clamp(48px, 7vh, 72px) auto 0;
    max-width: 1000px;
}

.wn-shot img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 18px;
    border: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow:
        0 30px 80px rgba(26, 27, 36, 0.3),
        0 8px 24px rgba(26, 27, 36, 0.12);
}

.wn-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 20px;
    margin-top: clamp(48px, 7vh, 72px);
    text-align: left;
}

.wn-grid .wn-card {
    grid-column: span 2;
    /* grid items default to min-width auto — the fx scroll strip's intrinsic
       width would otherwise blow the card out past the viewport */
    min-width: 0;
}

.wn-grid .wn-card-featured {
    grid-column: 1 / -1;
}

.wn-grid .wn-card-half {
    grid-column: span 3;
}

@media (max-width: 900px) {
    .wn-grid .wn-card,
    .wn-grid .wn-card-half {
        grid-column: 1 / -1;
    }
}

.wn-card {
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 20px;
    padding: 32px 34px;
    box-shadow: 0 8px 30px rgba(26, 27, 36, 0.06);
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease;
}

.wn-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 16px 44px rgba(26, 27, 36, 0.1);
}

/* Effects showcase inside the featured card — tabbed rack */
.wn-fx-rack {
    margin-top: 26px;
}

.wn-fx-tabs {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 4px;
    padding: 4px;
    background: #ececf0;
    border-radius: 12px;
    margin-bottom: 22px;
}

.wn-fx-tab {
    border: none;
    background: transparent;
    padding: 9px 18px;
    border-radius: 9px;
    font-family: 'Kantumruy Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: #55555f;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.wn-fx-tab:hover {
    color: #1d1d2b;
}

.wn-fx-tab.is-active {
    background: #ffffff;
    color: #1d1d2b;
    box-shadow: 0 2px 8px rgba(26, 27, 36, 0.12);
}

.wn-fx-stage {
    position: relative;
}

.wn-fx-panel {
    display: none;
    max-width: 760px;
    margin: 0 auto;
}

.wn-fx-panel.is-active {
    display: block;
}

.wn-fx-nav {
    position: absolute;
    top: 34%;
    z-index: 2;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1px solid rgba(0, 0, 0, 0.1);
    background: #ffffff;
    color: #55555f;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(26, 27, 36, 0.14);
    transition: color 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
}

.wn-fx-nav:hover:not(:disabled) {
    color: #1d1d2b;
    box-shadow: 0 6px 18px rgba(26, 27, 36, 0.2);
}

.wn-fx-nav:disabled {
    opacity: 0.35;
    cursor: default;
}

.wn-fx-prev {
    left: max(4px, calc(50% - 380px - 52px));
}

.wn-fx-next {
    right: max(4px, calc(50% - 380px - 52px));
}

/* Tabbed mode: the six panels sit side by side in a track and the track
   slides, so the outgoing panel leaves as the incoming one arrives. v2.js
   sets the transform and keeps the stage at the active panel's height. */
@media (min-width: 769px) {
    .wn-fx-stage {
        overflow: hidden;
        transition: height 0.45s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .wn-fx-track {
        display: flex;
        align-items: flex-start;
        transition: transform 0.55s cubic-bezier(0.16, 1, 0.3, 1);
        will-change: transform;
    }

    .wn-fx-track .wn-fx-panel {
        display: block;
        flex: 0 0 100%;
        max-width: none;
        margin: 0;
        box-sizing: border-box;
        /* keeps the 760px reading width the centered panel had before */
        padding: 0 max(0px, calc((100% - 760px) / 2));
    }
}

/* Strip mode (mobile): the wrapper steps aside so the stage stays the
   scroll-snap container of the figures */
@media (max-width: 768px) {
    .wn-fx-track {
        display: contents;
    }
}

@media (prefers-reduced-motion: reduce) {
    .wn-fx-stage,
    .wn-fx-track {
        transition: none;
    }
}

/* Mobile: native scroll-snap strip — the next panel peeks in from the
   edge, which is what signals "swipe me". Chevrons retire here. */
@media (max-width: 768px) {
    .wn-fx-stage {
        display: flex;
        gap: 14px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        margin: 0 -24px;
        padding: 0 24px;
        /* Both axes allowed here (browser axis-locks per gesture) so the
           tall strip never traps vertical page scrolling; the image below
           is the dedicated sideways-wins zone. No back-gesture at the ends. */
        touch-action: pan-x pan-y;
        overscroll-behavior-x: contain;
    }

    .wn-fx-stage .wn-fx-panel img {
        touch-action: pan-x;
    }

    .wn-fx-stage::-webkit-scrollbar {
        display: none;
    }

    .wn-fx-panel {
        display: block;
        flex: 0 0 86%;
        max-width: none;
        margin: 0;
        scroll-snap-align: center;
    }

    .wn-fx-nav {
        display: none;
    }
}

.wn-fx-item {
    margin: 0;
}

.wn-fx-item img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 12px;
    border: 1px solid rgba(0, 0, 0, 0.08);
}

.wn-fx-item figcaption {
    margin-top: 14px;
}

.wn-fx-item strong {
    display: block;
    font-family: 'Cal Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
    font-weight: 400;
    font-size: 1.05rem;
    color: #1d1d2b;
    margin-bottom: 6px;
}

.wn-fx-item span {
    font-size: 0.9rem;
    line-height: 1.6;
    color: #55555f;
}


/* Split feature cards (oscillators, filter): copy left, imagery right;
   .wn-card-flip mirrors the sides for scroll rhythm */
.wn-card-osc,
.wn-card-filter {
    display: flex;
    gap: 40px;
    align-items: center;
}

.wn-card-flip {
    flex-direction: row-reverse;
}

.wn-osc-copy {
    flex: 1 1 0;
    min-width: 0;
}

.wn-osc-copy p + p {
    margin-top: 12px;
}

.wn-osc-pair {
    flex: 0 1 400px;
}

.wn-osc-pair img,
.wn-filter-shot img,
.wn-filter-shot video {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 12px;
    border: 1px solid rgba(0, 0, 0, 0.08);
}

.wn-filter-shot {
    flex: 0 1 600px;
    margin: 0;
}

.wn-osc-figure {
    flex: 0 1 400px;
    margin: 0;
}

.wn-osc-figure img,
.wn-osc-figure video {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 12px;
    border: 1px solid rgba(0, 0, 0, 0.08);
}

.wn-shot-caption {
    margin-top: 12px;
    font-size: 0.85rem;
    line-height: 1.55;
    color: #55555f;
    text-align: center;
}

@media (max-width: 900px) {
    .wn-card-osc,
    .wn-card-filter,
    .wn-card-filter.wn-card-flip {
        flex-direction: column;
        align-items: stretch;
    }

    .wn-osc-pair {
        flex-basis: auto;
        max-width: 440px;
    }

    .wn-filter-shot {
        flex-basis: auto;
    }

    .wn-osc-figure {
        flex-basis: auto;
        max-width: 440px;
        margin: 0 auto;
    }
}

/* --------------------------------------------------------------------------
   Scroll-scrub scene (filter section takeover)
   The scene is tall; its child pins for one viewport while scroll progress
   (--scrub, set by v2.js) drives the dark backdrop, the caption reveal and
   the video's currentTime. No scroll-jacking — native scroll throughout.
   -------------------------------------------------------------------------- */

.scrub-scene {
    position: relative;
    margin-top: clamp(48px, 7vh, 72px);
}

html.js .scrub-scene {
    height: 280vh;
}

.scrub-sticky {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 30px;
    padding: 40px 0;
    /* 0 at the scene's edges, 1 through the dark middle */
    --takeover: min(calc(var(--scrub, 0) * 6), calc((1 - var(--scrub, 0)) * 6), 1);
    /* full-bleed backdrop via the shadow+clip trick (no 100vw scrollbar issues) */
    background: rgba(10, 11, 15, var(--takeover));
    box-shadow: 0 0 0 100vmax rgba(10, 11, 15, var(--takeover));
    clip-path: inset(0 -100vmax);
}

html.js .scrub-sticky {
    position: sticky;
    top: 0;
    height: 100vh;
    box-sizing: border-box;
}

.scrub-video {
    display: block;
    width: min(90vw, 1000px);
    height: auto;
    border-radius: 16px;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
}

.scrub-copy {
    max-width: 44rem;
    text-align: center;
}

/* Copy is always readable: dark ink at rest on the light band, crossfading
   to white in lockstep with the backdrop going black */
.scrub-copy h3 {
    font-family: 'Cal Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
    font-weight: 400;
    font-size: clamp(1.6rem, 3vw, 2.2rem);
    letter-spacing: -0.01em;
    color: #1d1d2b;
    color: color-mix(in srgb, #ffffff calc(var(--takeover, 0) * 100%), #1d1d2b);
    margin: 0 0 12px;
}

.scrub-copy p {
    color: #55555f;
    color: color-mix(in srgb, rgba(255, 255, 255, 0.78) calc(var(--takeover, 0) * 100%), #55555f);
    font-size: clamp(0.95rem, 1.4vw, 1.05rem);
    line-height: 1.65;
    margin: 0;
}

/* Reduced motion (or no JS): a normal dark band, video sits on its poster */
@media (prefers-reduced-motion: reduce) {
    html.js .scrub-scene {
        height: auto;
    }

    html.js .scrub-sticky {
        position: static;
        height: auto;
    }

    .scrub-sticky {
        background: #0a0b0f;
        box-shadow: 0 0 0 100vmax #0a0b0f;
    }

    .scrub-copy h3 {
        color: #ffffff;
    }

    .scrub-copy p {
        color: rgba(255, 255, 255, 0.78);
    }
}

html:not(.js) .scrub-sticky {
    background: #0a0b0f;
    box-shadow: 0 0 0 100vmax #0a0b0f;
}

html:not(.js) .scrub-copy h3 {
    color: #ffffff;
}

html:not(.js) .scrub-copy p {
    color: rgba(255, 255, 255, 0.78);
}

/* Wide in-DAW closer */
.wn-daw {
    margin-top: clamp(48px, 7vh, 72px);
}

.wn-daw-caption {
    margin-top: 16px;
    font-size: 0.9rem;
    color: #55555f;
}

.wn-card h3 {
    margin: 0 0 10px;
    font-family: 'Cal Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
    font-size: 1.35rem;
    font-weight: 400;
    letter-spacing: -0.01em;
    color: #1d1d2b;
}

.wn-card h3 .wn-accent {
    color: var(--accent-orange);
}

.wn-card p {
    margin: 0;
    font-size: 0.98rem;
    line-height: 1.65;
    color: #55555f;
}

.wn-cta-wrap {
    margin-top: clamp(48px, 7vh, 64px);
}

.wn-cta-note {
    margin: 14px 0 0;
    font-size: 0.9rem;
    color: #55555f;
}

.wn-cta-note a {
    color: var(--accent-orange);
    text-decoration: none;
    font-weight: 600;
}

.wn-cta-note a:hover {
    text-decoration: underline;
}

@media (max-width: 768px) {
    .whats-new {
        padding: 72px 20px;
    }

    .wn-grid {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .wn-card {
        padding: 26px 24px;
    }

    .wn-shot img {
        border-radius: 12px;
    }
}

/* --------------------------------------------------------------------------
   4b. Key Features — light band on the wn-card system
   -------------------------------------------------------------------------- */

body.v2 .features.section-light {
    margin-bottom: 0;
    perspective: none;
    padding: clamp(80px, 10vh, 130px) 24px;
}

.features-wn-grid {
    max-width: 1100px;
    margin: 56px auto 0;
}

/* --------------------------------------------------------------------------
   4b2. Intro — "The Sound That Defined an Era", aligned with the new language
   -------------------------------------------------------------------------- */

body.v2 .intro-v2 {
    max-width: 900px;
    margin: 0 auto 120px;
    padding: 40px 0 0;
    text-align: center;
    animation: none;
}

/* Kill the old gradient-clip heading treatment; use the shared title style */
body.v2 .intro-v2 .section-title {
    background: none;
    -webkit-background-clip: initial;
    background-clip: initial;
    -webkit-text-fill-color: initial;
    margin-bottom: 34px;
}

.intro-lead {
    max-width: 46rem;
    margin: 0 auto 18px;
    font-size: clamp(15px, 1.6vw, 18px);
    line-height: 1.75;
    color: var(--text-gray);
    text-align: left;
}

.intro-lead b {
    color: var(--text-light);
    font-weight: 600;
}

.intro-video-v2 {
    position: relative;
    max-width: 780px;
    margin: 44px auto 0;
    aspect-ratio: 16 / 9;
    border-radius: 18px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
    background: rgba(255, 255, 255, 0.03);
}

.intro-video-v2 .consent-video-optin,
.intro-video-v2 .consent-video-optout {
    position: absolute;
    inset: 0;
}

.intro-video-v2 iframe {
    width: 100%;
    height: 100%;
    display: block;
}

.intro-video-v2 .intro-video-fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-gray);
    font-size: 14px;
    padding: 20px;
    text-align: center;
}

/* --------------------------------------------------------------------------
   4c. Testimonials — light band grid replacing the carousel
   -------------------------------------------------------------------------- */

.testimonials.section-light {
    padding: clamp(80px, 10vh, 130px) 24px;
}

.testimonials-grid-v2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    max-width: 1100px;
    margin: 56px auto 0;
    text-align: left;
}

.t-card {
    display: flex;
    flex-direction: column;
    gap: 20px;
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 20px;
    padding: 30px 32px;
    box-shadow: 0 8px 30px rgba(26, 27, 36, 0.06);
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease;
}

.t-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 16px 44px rgba(26, 27, 36, 0.1);
}

.t-quote {
    margin: 0;
    font-size: 1rem;
    line-height: 1.7;
    color: #1d1d2b;
    flex: 1;
}

.t-person {
    display: flex;
    align-items: center;
    gap: 14px;
}

.t-person img {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
    object-position: 50% 20%;
    border: 1px solid rgba(0, 0, 0, 0.08);
}

.t-name {
    display: block;
    font-weight: 600;
    font-size: 0.95rem;
    color: #1d1d2b;
}

.t-role {
    display: block;
    font-size: 0.85rem;
    color: #55555f;
    margin-top: 2px;
}

@media (max-width: 820px) {
    .testimonials-grid-v2 {
        grid-template-columns: 1fr;
    }
}

/* --------------------------------------------------------------------------
   4d. Audio players — unified modern chrome (hero mini-players + Sound Demos)
   One accent (orange) instead of per-player orange/cyan themes; card look
   matches the feature/testimonial cards; decorative fake waveforms removed.
   -------------------------------------------------------------------------- */

/* Sound Demos section */
body.v2 .audio-demos .audio-player {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 20px;
    padding: 20px 22px;
    min-height: 0;
}

body.v2 .audio-demos .audio-player:hover {
    transform: translateY(-3px);
    border-color: rgba(243, 116, 33, 0.35);
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.4);
}

body.v2 .audio-demos .audio-title {
    color: var(--text-light);
    font-size: 16px;
    margin-bottom: 12px;
}

body.v2 .audio-demos .play-button {
    width: 48px;
    height: 48px;
    color: var(--accent-orange);
}

body.v2 .audio-demos .progress-fill {
    background: linear-gradient(90deg, var(--accent-orange), #ff5722);
}

body.v2 .audio-demos .waveform {
    display: none;
}

body.v2 .audio-demos .player-controls {
    gap: 14px;
    margin-bottom: 0;
}

/* Hero mini-players: a quiet track list under a small "HEAR IT" label, no card.
   The progress line shows only while a track plays (or on hover, to seek). */
body.v2 .hero-audio-section {
    max-width: 360px;
}

body.v2 .hero-audio-label {
    margin: 0 0 10px;
    font-family: 'Kantumruy Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-gray);
}

body.v2 .hero-audio-frame {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    transform: none;
}

body.v2 .hero-audio-player {
    padding: 8px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.07);
}

body.v2 .hero-audio-player:last-child {
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

body.v2 .hero-audio-player:hover {
    transform: none;
}

body.v2 .hero-player-controls {
    gap: 12px;
}

body.v2 .hero-audio-player .hero-play-button {
    width: 32px;
    height: 32px;
    color: var(--accent-orange);
}

body.v2 .hero-play-button:hover {
    box-shadow: none;
    transform: scale(1.08);
}

body.v2 .hero-audio-info {
    gap: 6px;
}

body.v2 .hero-audio-player .hero-audio-title {
    font-family: 'Kantumruy Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
    font-size: 14px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.85);
    transition: color 0.2s ease;
}

body.v2 .hero-audio-player:hover .hero-audio-title,
body.v2 .hero-audio-player:has(.playing) .hero-audio-title {
    color: #fff;
}

body.v2 .hero-progress-bar {
    height: 2px;
    background: rgba(255, 255, 255, 0.1);
    opacity: 0;
    transition: opacity 0.2s ease;
}

body.v2 .hero-audio-player:has(.playing) .hero-progress-bar,
body.v2 .hero-audio-player:hover .hero-progress-bar {
    opacity: 1;
}

body.v2 .hero-audio-player .hero-progress-fill {
    background: var(--accent-orange);
}

body.v2 .hear-more-link {
    display: inline-block;
    margin-top: 12px;
    font-family: 'Kantumruy Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
    font-size: 13px;
    color: var(--text-gray);
    opacity: 1;
    text-align: left;
    text-decoration: none;
}

body.v2 .hear-more-link span {
    display: inline-block;
    color: var(--accent-orange);
    transition: transform 0.2s ease;
}

body.v2 .hear-more-link:hover {
    color: #fff;
    text-decoration: none;
}

body.v2 .hear-more-link:hover span {
    transform: translateX(3px);
}

/* --------------------------------------------------------------------------
   4e. Light auth/utility overlays — login modal, demo modal, user dropdown
   White cards over the dark page; same language as the light sections.
   -------------------------------------------------------------------------- */

/* Login modal: token flip covers the var()-based rules */
body.v2 .client-login {
    --text-light: #1d1d2b;
    --text-gray: #55555f;
    --border-subtle: rgba(0, 0, 0, 0.1);
}

body.v2 .login-form-container {
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.08);
    backdrop-filter: none;
    box-shadow:
        0 30px 80px rgba(0, 0, 0, 0.45),
        0 8px 24px rgba(0, 0, 0, 0.25);
}

body.v2 .client-login-title {
    color: #1d1d2b;
}

body.v2 .login-form-container .hahmo-logo :is(path, polygon, rect, circle) {
    fill: #16171f;
}

body.v2 .client-login .form-group input {
    background: #f5f5f7;
}

body.v2 .client-login .form-group input:focus {
    background: #ffffff;
}

body.v2 .client-login .close-modal:hover {
    background: rgba(0, 0, 0, 0.06);
}

body.v2 .login-success {
    background: rgba(26, 127, 55, 0.08);
    border-color: rgba(26, 127, 55, 0.3);
}

body.v2 .login-success p {
    color: #1a7f37;
}

/* Logged-in header: the stray margin pushed the user name above the
   row's vertical center, misaligning it with the Buy button */
body.v2 .user-name {
    margin-bottom: 0;
}

/* The icon is inline-block, which leaves baseline/descender space under it
   inside its wrapper — the wrapper grows taller than the icon and the row
   centers the wrapper, floating the icon high. Block display removes it. */
body.v2 .user-icon {
    display: block;
}

body.v2 .user-menu-container {
    display: flex;
    align-items: center;
}

/* Header user dropdown: matches the white overlay language */
body.v2 .user-dropdown-menu {
    background: rgba(255, 255, 255, 0.97);
    border: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow: 0 14px 40px rgba(0, 0, 0, 0.3);
}

body.v2 .user-dropdown-menu .user-menu-item {
    color: #1d1d2b;
}

body.v2 .user-dropdown-menu .user-menu-item:hover {
    background: rgba(0, 0, 0, 0.05);
}

body.v2 .user-dropdown-menu .logout-item {
    color: #d02a20;
}

/* Demo download modal — gray shell, white cards (mirrors the page pattern) */
body.v2 .demo-download-modal .demo-modal-container {
    background: #f5f5f7;
    border: 1px solid rgba(0, 0, 0, 0.08);
}

body.v2 .demo-download-modal .demo-modal-icon {
    box-shadow: none;
}

body.v2 .demo-download-modal .demo-modal-title {
    color: #1d1d2b;
}

body.v2 .demo-download-modal .demo-modal-subtitle {
    color: #55555f;
}

body.v2 .demo-download-modal .demo-modal-close {
    background: rgba(0, 0, 0, 0.05);
}

body.v2 .demo-download-modal .demo-modal-close svg {
    color: #55555f;
}

body.v2 .demo-download-modal .demo-modal-close:hover {
    background: rgba(0, 0, 0, 0.1);
}

body.v2 .demo-download-modal .demo-modal-close:hover svg {
    color: #1d1d2b;
}

body.v2 .demo-download-modal .demo-platform-card {
    background: #ffffff;
    border-color: rgba(0, 0, 0, 0.08);
}

body.v2 .demo-download-modal .demo-platform-card::before {
    display: none;
}

body.v2 .demo-download-modal .demo-platform-card:hover {
    background: #ffffff;
    transform: translateY(-2px);
    box-shadow: 0 14px 34px rgba(26, 27, 36, 0.14);
}

body.v2 .demo-download-modal .demo-platform-icon {
    background: #eef0f3;
}

body.v2 .demo-download-modal .demo-platform-icon svg {
    color: #1d1d2b;
}

body.v2 .demo-download-modal .demo-download-icon {
    color: rgba(0, 0, 0, 0.35);
}

body.v2 .demo-download-modal .demo-platform-card:hover .demo-download-icon {
    color: var(--accent-orange);
}

body.v2 .demo-download-modal .demo-platform-name {
    color: #1d1d2b;
}

body.v2 .demo-download-modal .demo-platform-desc,
body.v2 .demo-download-modal .demo-platform-format {
    color: #55555f;
}

body.v2 .demo-download-modal .demo-requirements {
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.07);
}

body.v2 .demo-download-modal .demo-requirements-title {
    color: #1d1d2b;
}

body.v2 .demo-download-modal .demo-requirements-content,
body.v2 .demo-download-modal .demo-requirement-item {
    color: #55555f;
}

body.v2 .demo-download-modal .demo-requirement-item strong {
    color: #1d1d2b;
}

body.v2 .demo-download-modal .demo-feature {
    color: #55555f;
}

body.v2 .demo-download-modal .demo-form-label {
    color: #1d1d2b;
}

body.v2 .demo-download-modal .demo-form-input {
    background: #ffffff;
    border-color: rgba(0, 0, 0, 0.12);
    color: #1d1d2b;
}

body.v2 .demo-download-modal .demo-form-input:focus {
    background: #ffffff;
    border-color: var(--accent-orange);
    box-shadow: none;
}

body.v2 .demo-download-modal .demo-form-input::placeholder {
    color: #8e8e99;
}

body.v2 .demo-download-modal .demo-skip-btn {
    color: #55555f;
}

body.v2 .demo-download-modal .demo-skip-btn:hover {
    color: #1d1d2b;
}

body.v2 .demo-download-modal .demo-privacy-notice,
body.v2 .demo-download-modal .demo-privacy-notice p {
    color: #6b6b76;
}

/* --------------------------------------------------------------------------
   5. FAQ light conversion
   -------------------------------------------------------------------------- */

.faq-section.section-light .faq-item {
    background: #ffffff;
    border-color: rgba(0, 0, 0, 0.06);
    box-shadow: 0 4px 18px rgba(26, 27, 36, 0.05);
}

.faq-section.section-light .faq-item:hover {
    border-color: rgba(243, 116, 33, 0.55);
    background: #ffffff;
}

.faq-section.section-light .faq-question h3 {
    color: #1d1d2b;
}

.faq-section.section-light .faq-answer {
    background: #fafafa;
    border-top: 1px solid rgba(0, 0, 0, 0.05);
}

.faq-section.section-light .faq-answer p {
    color: #55555f;
}

/* Section title color inherits from the scope; keep the orange underline. */
.faq-section.section-light .section-title {
    color: #1d1d2b;
}

/* --------------------------------------------------------------------------
   6. Price-increase notice (#promoBanner, shown by v2.js)
   Desktop: a frosted pill floating in the header's empty middle.
   Below 1024px: a full-width strip above the header, which moves down.
   -------------------------------------------------------------------------- */

.promo-banner {
    position: fixed;
    top: 16px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1200;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 10px 8px 18px;
    border-radius: 999px;
    background: rgba(26, 27, 36, 0.72);
    -webkit-backdrop-filter: blur(20px) saturate(1.5);
    backdrop-filter: blur(20px) saturate(1.5);
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
    color: var(--text-light);
    font-family: 'Kantumruy Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
    transition: transform 0.35s ease, opacity 0.35s ease;
}

.promo-banner[hidden] {
    display: none;
}

.promo-banner-link {
    color: var(--accent-orange);
    font-weight: 600;
    text-decoration: none;
}

.promo-banner-link:hover {
    text-decoration: underline;
}

.promo-banner-close {
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    color: var(--text-gray);
    cursor: pointer;
    flex: none;
    transition: background 0.2s ease, color 0.2s ease;
}

.promo-banner-close svg {
    width: 10px;
    height: 10px;
    display: block;
}

.promo-banner-close:hover {
    background: rgba(255, 255, 255, 0.16);
    color: #ffffff;
}

@media (max-width: 1023px) {
    .promo-banner {
        top: 0;
        left: 0;
        right: 0;
        transform: none;
        justify-content: center;
        flex-wrap: wrap;
        gap: 4px 12px;
        padding: 9px 44px 9px 14px;
        border-radius: 0;
        border-width: 0 0 1px;
        box-shadow: none;
        white-space: normal;
        text-align: center;
        font-size: 12.5px;
    }

    .promo-banner-close {
        position: absolute;
        right: 10px;
        top: 50%;
        transform: translateY(-50%);
    }

    /* The strip owns the top edge; the fixed header sits below it. !important
       because index.css pins the mobile header to top: 0 !important. */
    body.has-promo .header {
        top: var(--promo-h, 42px) !important;
    }

    /* ...and the hero keeps its distance from the lowered header */
    body.has-promo .hero {
        padding-top: var(--promo-h, 42px);
    }

    /* main.js toggles .hidden on scroll (mobile) together with the header */
    .promo-banner.hidden {
        transform: translateY(-110%);
    }
}

/* Demo modal: no backdrop-filter on the scrolling overlay (blur over the
   animated hero produced GPU streaks on some machines); a solid dim reads
   the same behind an opaque modal. Also sit above the promo pill (1200). */
body.v2 .demo-download-modal {
    z-index: 2000;
}

body.v2 .demo-modal-overlay {
    background: rgba(0, 0, 0, 0.8);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

/* --------------------------------------------------------------------------
   Newsletter offer (scripts/newsletter.js): inline form by the Buy buttons,
   the popup, and the code on the demo modal's thank-you step
   -------------------------------------------------------------------------- */

.nl-inline {
    margin-top: 16px;
    color: #55555f;
}

/* "Get 10% off · Join the newsletter →": one quiet line under the Buy button */
.nl-teaser {
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
    padding: 2px 0;
    border: 0;
    background: none;
    font: inherit;
    font-size: 14px;
    letter-spacing: 0.01em;
    color: rgba(255, 255, 255, 0.6);
    cursor: pointer;
}

.nl-teaser-strong {
    font-weight: 600;
    color: var(--accent-orange);
}

.nl-teaser-sep {
    color: rgba(255, 255, 255, 0.3);
}

.nl-teaser-link {
    background-image: linear-gradient(currentColor, currentColor);
    background-size: 0% 1px;
    background-position: 0 100%;
    background-repeat: no-repeat;
    transition: background-size 0.25s ease, color 0.2s ease;
}

.nl-teaser-arrow {
    display: inline-block;
    transition: transform 0.2s ease;
}

.nl-teaser:hover .nl-teaser-link,
.nl-teaser:focus-visible .nl-teaser-link {
    color: #fff;
    background-size: 100% 1px;
}

.nl-teaser:hover .nl-teaser-arrow {
    transform: translateX(3px);
    color: #fff;
}

.nl-teaser:focus-visible {
    outline: 2px solid rgba(243, 116, 33, 0.6);
    outline-offset: 4px;
    border-radius: 4px;
}

/* The form, opened in place of the line */
.nl-inline .nl-form {
    max-width: 420px;
}

.cta-section .nl-inline .nl-form {
    margin: 0 auto;
}

.nl-inline-dark .nl-input {
    border-color: rgba(255, 255, 255, 0.16);
    border-radius: 30px;
    background: rgba(255, 255, 255, 0.05);
    color: #fff;
    padding: 12px 16px;
    font-size: 15px;
}

/* No glow under the Buy buttons: the orange border alone shows focus */
.nl-inline-dark .nl-input:focus {
    box-shadow: none;
    border-color: rgba(243, 116, 33, 0.7);
}

.nl-inline-dark .nl-input::placeholder {
    color: rgba(255, 255, 255, 0.4);
}

.nl-inline-dark .nl-submit {
    border-radius: 30px;
    padding: 10px 18px;
    font-size: 14px;
}

.nl-inline-dark .nl-consent {
    color: rgba(255, 255, 255, 0.45);
}

.nl-inline-dark .nl-error {
    color: #ff8a80;
}

/* After signing up */
.nl-applied {
    margin: 0;
    font-size: 14px;
    color: #55555f;
}

.nl-inline-dark .nl-applied {
    color: rgba(255, 255, 255, 0.7);
}

.nl-applied-check {
    margin-right: 6px;
    color: #6fdc9b;
}

.nl-applied-code {
    font-family: 'Courier New', monospace;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--accent-orange);
}

.nl-form {
    text-align: left;
}

.nl-row {
    display: flex;
    gap: 8px;
}

.nl-input {
    flex: 1;
    min-width: 0;
    padding: 15px 14px;
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 10px;
    background: #fff;
    color: #1d1d2b;
    font: inherit;
    font-size: 16px;
    /* Not the page's tall line height: iPhone Safari would draw the text at the top
       of the field and the cursor below it */
    line-height: normal;
}

/* Focus: the orange border only, no glow */
.nl-input:focus {
    outline: none;
    border-color: var(--accent-orange);
    box-shadow: none;
}

.nl-submit {
    border: 0;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--accent-orange), #ff5722);
    color: #fff;
    font-family: 'Cal Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
    font-size: 15px;
    font-weight: 400;   /* Cal Sans has one weight; anything heavier is a fake bold */
    cursor: pointer;
    transition: filter 0.2s ease;
}

.nl-submit {
    padding: 12px 18px;
    white-space: nowrap;
}

.nl-submit:hover {
    filter: brightness(1.1);
}

.nl-submit:disabled {
    opacity: 0.7;
    cursor: default;
    transform: none;
    box-shadow: none;
}

/* Honeypot: off-screen, not display:none (some bots skip hidden fields) */
.nl-hp {
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    opacity: 0;
}

.nl-error {
    margin: 8px 0 0;
    font-size: 14px;
    color: #d02a20;
}

.nl-consent {
    margin: 8px 0 0;
    font-size: 12px;
    line-height: 1.5;
    color: #6b6b76;
}

.nl-consent a {
    color: inherit;
    text-decoration: underline;
}

.nl-success {
    text-align: center;
}

.nl-success-title {
    margin: 0 0 10px;
    font-weight: 600;
    color: #1d1d2b;
}

.nl-inline-dark .nl-success-title {
    color: #fff;
}

.nl-code {
    display: inline-block;
    padding: 10px 22px;
    border: 2px dashed var(--accent-orange);
    border-radius: 10px;
    background: rgba(243, 116, 33, 0.08);
    color: var(--accent-orange);
    font-family: 'Courier New', monospace;
    font-size: 24px;
    font-weight: 700;
    letter-spacing: 0.12em;
    line-height: normal;
    user-select: none;   /* clicking copies it; a text selection would only look broken */
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.nl-code:hover,
.nl-code:focus-visible {
    background: rgba(243, 116, 33, 0.16);
    outline: none;
}

.nl-code-hint {
    margin: 6px 0 0;
    font-size: 12px;
    color: #8e8e99;
}

.nl-code-hint.is-copied {
    color: #2e8b57;
}

.nl-success-note {
    margin: 10px 0 14px;
    font-size: 14px;
    color: #55555f;
}

.nl-inline-dark .nl-success-note {
    color: rgba(255, 255, 255, 0.75);
}

/* Under the popup's Buy button: a quiet way to just close it */
.nl-continue {
    display: block;
    margin: 12px auto 0;
    padding: 4px 8px;
    border: 0;
    background: none;
    color: #55555f;
    font: inherit;
    font-size: 14px;
    cursor: pointer;
}

.nl-continue:hover,
.nl-continue:focus-visible {
    color: #1d1d2b;
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* Popup: the demo modal's shell, narrower, and vertically centered on phones too
   (index.css puts the tall demo window at the top there) */
.nl-popup .demo-modal-overlay {
    align-items: center;
}

.nl-popup .demo-modal-container.nl-popup-container {
    margin-top: 0;
}

/* Popup: the demo modal's shell, narrower */
.nl-popup .demo-modal-container.nl-popup-container {
    max-width: 480px;
    background: #f5f5f7;
    border: 1px solid rgba(0, 0, 0, 0.08);
}

.nl-popup .demo-modal-close {
    background: rgba(0, 0, 0, 0.05);
}

.nl-popup .demo-modal-close svg {
    color: #55555f;
}

.nl-popup-body {
    padding: 40px 32px 32px;
    text-align: center;
}

.nl-popup .demo-modal-title {
    margin: 0 0 10px;
    color: #1d1d2b;
}

.nl-popup .demo-modal-subtitle {
    margin: 0 0 22px;
    color: #55555f;
}

.nl-eyebrow {
    margin: 0 0 8px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--accent-orange);
}

.demo-newsletter-code {
    margin: 0 0 24px;
}

.demo-newsletter-code:empty {
    display: none;
}

@media (max-width: 480px) {
    .nl-row {
        flex-direction: column;
    }

    .nl-popup-body {
        padding: 36px 20px 24px;
    }
}

/* With the code's Buy button on the thank-you step, "Continue Exploring" steps back */
body.v2 .demo-download-modal .demo-thank-you-state.has-code .demo-close-btn {
    background: transparent;
    border: 1px solid rgba(0, 0, 0, 0.15);
    color: #55555f;
    padding: 10px 22px;
    font-size: 14px;
    box-shadow: none;
}

body.v2 .demo-download-modal .demo-thank-you-state.has-code .demo-close-btn:hover {
    color: #1d1d2b;
    border-color: rgba(0, 0, 0, 0.3);
    transform: none;
}

/* Buy buttons with the newsletter discount: the regular price struck through, in the
   lighter body font so the discounted price stands out */
.price-display .price-was {
    margin-right: 3px;
    font-family: 'Kantumruy Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
    font-weight: 400;
    opacity: 0.75;
    text-decoration-thickness: 1px;
}

/* Demo window's newsletter step for someone already signed up (newsletter.js adds
   .nl-already): no form, just "your discount is applied" and a Close button */
.demo-newsletter-state .demo-offer-applied,
.demo-newsletter-state.nl-already .demo-offer-ask,
.demo-newsletter-state.nl-already #demoNewsletterForm,
.demo-newsletter-state.nl-already .demo-privacy-notice {
    display: none;
}

.demo-newsletter-state.nl-already .demo-offer-applied {
    display: revert;
}

/* Demo window buttons: no orange glow or lift on hover (as the popup's buttons), and
   Cal Sans's real weight instead of a faked bold */
body.v2 .demo-download-modal .demo-newsletter-btn,
body.v2 .demo-download-modal .demo-close-btn {
    font-weight: 400;
    transition: filter 0.2s ease;
}

body.v2 .demo-download-modal .demo-newsletter-btn:hover,
body.v2 .demo-download-modal .demo-close-btn:hover {
    transform: none;
    box-shadow: none;
    filter: brightness(1.1);
}

/* The Buy Now button after signing up (popup, demo window): only a light-up on hover,
   the same as the "Get my 10% code" buttons; none of the page Buy buttons' lift,
   shadow or shine sweep */
body.v2 .nl-success .centered-buy-button {
    transition: filter 0.2s ease;
}

body.v2 .nl-success .centered-buy-button::before {
    display: none;
}

body.v2 .nl-success .centered-buy-button:hover,
body.v2 .nl-success .centered-buy-button:focus-visible {
    transform: none;
    box-shadow: none;
    filter: brightness(1.1);
}