/* ==========================================================================
   1604ENT – Mobile-first responsive layer (loads last)
   Base: smallest phones → progressive enhancement via min-width
   Desktop canonical: ≥980px (global.css defaults preserved)
   ========================================================================== */

/* --- Viewport & safe-area tokens --- */
:root {
    --vh-full: 100vh;
    --vh-full: 100dvh;
    --vh-small: 100svh;
    --safe-top: env(safe-area-inset-top, 0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);
    --safe-left: env(safe-area-inset-left, 0px);
    --safe-right: env(safe-area-inset-right, 0px);
    --touch-min: 44px;
    --section-pad-mobile: clamp(12px, 3vw, 20px);
    --section-pad-tablet: clamp(20px, 4vw, 32px);
    /* Shared hero media height: intro image + sell-your-music video */
    --mobile-hero-height: 45vh;
    --mobile-hero-min-height: 200px;
}

/* --- Dynamic viewport heights (address bar, notches) --- */
html {
    height: 100%;
}

body {
    height: var(--vh-full);
    min-height: var(--vh-small);
    padding-top: var(--safe-top);
    padding-left: var(--safe-left);
    padding-right: var(--safe-right);
    font-size: clamp(0.875rem, 2.8vw, 1.1rem);
}

.sections-container,
.fullscreen-section,
.split-layout,
.split-content,
#about-us,
#about-us .about-wrapper,
#terms .terms-wrapper,
#contact-us .contact-wrapper {
    height: var(--vh-full);
    min-height: var(--vh-small);
}

/* Remove legacy tablet-gap blocker */
.unsupported-viewport {
    display: none !important;
}

/* --- Mobile shell: <980px (Mercedes EQ stacked / touch-first) --- */
@media (max-width: 979px) {
    body {
        font-size: clamp(0.875rem, 2.5vw, 1.05rem);
    }

    .section-text,
    .step-content p,
    .benefits-list li {
        font-size: inherit;
    }

    .fullscreen-section {
        padding: var(--section-pad-mobile);
        padding-bottom: calc(56px + var(--safe-bottom));
    }

    .border-frame {
        top: calc(12px + var(--safe-top));
        left: calc(12px + var(--safe-left));
        right: calc(12px + var(--safe-right));
        bottom: calc(12px + var(--safe-bottom));
    }

    .mobile-dots {
        display: flex;
        bottom: calc(12px + var(--safe-bottom));
        transform: translate(-50%, 50%);
        z-index: 101;
    }

    .section-nav {
        display: none;
    }

    .section-vertical-label {
        display: inline-flex !important;
        left: max(4px, var(--safe-left));
        top: 50%;
        font-size: clamp(0.55rem, 2vw, 0.72rem);
        letter-spacing: 0.18em;
        z-index: 100;
    }

    .section-vertical-label-line {
        display: block;
        width: clamp(18px, 4.5vw, 28px);
        min-width: 18px;
        height: 1.5px;
        background: #F46C14;
    }

    /* Intro + Sell: slider nav sits directly under slide content */
    #intro .content-slider-nav,
    #sell-your-music .content-slider-nav {
        position: static !important;
        bottom: auto !important;
        flex: 0 0 auto;
        margin-top: var(--space-3) !important;
        margin-bottom: 0 !important;
        padding: 0 !important;
        gap: var(--space-2) !important;
        z-index: 2;
    }

    #sell-your-music .content-slider-nav {
        margin-top: var(--space-3) !important;
    }

    /* Intro + Sell: hero + balanced content panel */
    #intro .split-layout,
    #sell-your-music .split-layout {
        display: flex;
        flex-direction: column;
        height: var(--vh-small);
        min-height: 0;
        padding-top: 52px;
        padding-bottom: 0;
        box-sizing: border-box;
        overflow: hidden;
    }

    #intro .split-content,
    #sell-your-music .content-section {
        flex: 1 1 0;
        min-height: 0;
        height: auto !important;
        max-height: none;
        margin-top: 0;
        padding: var(--space-2) var(--space-3) 0 !important;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: stretch;
    }

    #intro .content-slider,
    #sell-your-music .content-slider {
        flex: 0 0 auto;
        width: 100%;
        min-height: 0;
        display: flex;
        flex-direction: column;
        overflow: visible;
    }

    #intro .content-slides-container,
    #sell-your-music .content-slides-container {
        flex: 0 1 auto;
        min-height: 0;
        max-height: calc(100svh - var(--mobile-hero-min-height) - 52px - 88px - 56px - var(--safe-bottom));
        overflow-x: hidden;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        padding: var(--space-1) 0 !important;
        display: block;
    }

    #intro .content-slide,
    #sell-your-music .content-slide {
        position: relative;
        top: 0;
        transform: none;
    }

    #intro .section-heading,
    #sell-your-music .content-section .section-heading {
        font-size: clamp(1rem, 4.2vw, 1.12rem) !important;
        line-height: 1.25 !important;
        margin-bottom: 0.35rem !important;
    }

    #intro .section-subheading {
        font-size: clamp(0.88rem, 3.6vw, 1rem) !important;
        margin-bottom: 0.45rem !important;
        line-height: 1.25 !important;
    }

    #intro .section-text,
    #sell-your-music .content-slide p {
        font-size: clamp(0.78rem, 3.2vw, 0.88rem) !important;
        line-height: 1.45 !important;
        margin-bottom: 0.5rem !important;
    }

    #intro .auth-buttons {
        margin-top: 0.75rem;
        gap: var(--space-2);
    }

    #intro .auth-btn {
        padding: 7px 12px;
        font-size: clamp(0.68rem, 2.8vw, 0.75rem);
        min-height: 34px;
    }

    /* Platform logos: single row, 5 logos */
    #intro .platform-logos,
    #sell-your-music .platform-logos-overlay {
        display: flex !important;
        flex-wrap: nowrap !important;
        justify-content: space-between !important;
        align-items: center !important;
        gap: 0.35rem !important;
        margin: 0.5rem 0 0.6rem !important;
        width: 100%;
    }

    #intro .platform-logos .store-logo,
    #sell-your-music .platform-logos-overlay .store-logo {
        flex: 1 1 0;
        min-width: 0;
        width: auto !important;
        height: 14px !important;
        max-height: 16px;
        object-fit: contain;
    }

    #intro .platform-logos .store-logo.spotify,
    #sell-your-music .platform-logos-overlay .store-logo.spotify {
        height: 15px !important;
    }

    #intro .platform-logos .store-logo.soundcloud,
    #sell-your-music .platform-logos-overlay .store-logo.soundcloud {
        height: 16px !important;
    }

    #intro .stores-button {
        margin-top: 0.5rem;
        margin-bottom: 0.25rem;
    }

    #intro .stores-count {
        padding: 6px 14px;
        font-size: clamp(0.62rem, 2.6vw, 0.7rem);
        min-height: 32px;
    }

    #intro .benefits-list {
        margin: 0.5rem 0 0.6rem !important;
        gap: 0.35rem !important;
    }

    #intro .benefits-list li {
        font-size: clamp(0.72rem, 3vw, 0.82rem) !important;
        gap: 0.35rem !important;
        line-height: 1.35 !important;
    }

    #intro .benefits-list li svg {
        min-width: 14px !important;
        width: 14px !important;
        height: 14px !important;
    }

    #intro .app-stores {
        margin-top: 0.5rem;
        margin-bottom: 0;
        flex-shrink: 0;
        gap: var(--space-2);
    }

    #intro .app-store-btn {
        padding: 6px 10px;
        font-size: clamp(0.62rem, 2.6vw, 0.7rem);
        min-height: 32px;
    }

    /* Sell: show full slide 2 copy on mobile (scroll if needed) */
    #sell-your-music .sell-slide2-full {
        display: block;
    }

    #sell-your-music .sell-slide2-mobile {
        display: none;
    }

    #sell-your-music .benefits-list li {
        font-size: clamp(0.72rem, 3vw, 0.82rem) !important;
        line-height: 1.35 !important;
        margin-bottom: 0.2rem;
    }

    #intro .content-slider-controls,
    #sell-your-music .content-slider-controls {
        gap: var(--space-3) !important;
    }

    /* Sell: steps layout */
    #sell-your-music .steps-container {
        gap: 0.5rem;
        margin-bottom: 0;
    }

    #sell-your-music .step {
        display: grid;
        grid-template-columns: 1.25rem 1fr;
        grid-template-rows: auto auto;
        column-gap: 0.5rem;
        row-gap: 0.1rem;
        align-items: start;
    }

    #sell-your-music .step-number {
        grid-row: 1 / 3;
    }

    #sell-your-music .step-content h3 {
        font-size: clamp(0.8rem, 3.2vw, 0.9rem);
        margin: 0;
        line-height: 1.25;
    }

    #sell-your-music .step-content p {
        font-size: clamp(0.74rem, 3vw, 0.84rem);
        line-height: 1.4;
        margin: 0;
    }

    #sell-your-music .benefits-list {
        gap: 0.35rem;
        margin: 0.5rem 0 0;
    }

    /* Mobile navbar: logo + hamburger aligned on one row */
    .navbar {
        justify-content: space-between;
        align-items: center;
        gap: 0;
        padding-left: max(var(--space-3), var(--safe-left));
        padding-right: max(var(--space-3), var(--safe-right));
    }

    .nav-brand {
        display: flex;
        align-items: center;
        flex-shrink: 0;
    }

    .nav-toggle {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 5px;
        width: var(--touch-min);
        height: var(--touch-min);
        min-width: var(--touch-min);
        min-height: var(--touch-min);
        position: static;
        top: auto;
        right: auto;
        transform: none;
        flex-shrink: 0;
        cursor: pointer;
    }

    .nav-toggle span {
        position: relative;
        top: auto !important;
        display: block;
        width: 20px;
        height: 1.5px;
        border-radius: 1px;
        background: #F46C14;
        transition: transform 0.25s ease, opacity 0.2s ease;
    }

    .nav-toggle.active span:nth-child(1) {
        transform: translateY(6.5px) rotate(45deg);
    }

    .nav-toggle.active span:nth-child(2) {
        opacity: 0;
    }

    .nav-toggle.active span:nth-child(3) {
        transform: translateY(-6.5px) rotate(-45deg);
    }

    /* Mobile nav drawer bottom: app stores + footer */
    .nav-menu-bottom {
        margin-top: auto;
        width: 100%;
        padding-top: var(--space-3);
        padding-bottom: calc(var(--space-2) + var(--safe-bottom));
    }

    .nav-menu .nav-app-stores {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        gap: var(--space-2);
        width: fit-content;
        max-width: 100%;
        margin-top: 0;
        margin-bottom: var(--space-3);
        padding-top: 0;
        padding-bottom: 0;
    }

    .nav-menu .nav-app-stores .app-store-btn {
        flex: 0 1 auto;
        width: auto;
        min-width: 0;
        justify-content: center;
        padding: 5px 14px;
        font-size: 0.6rem;
        min-height: 30px;
        gap: 5px;
        border-radius: 18px;
        letter-spacing: 0.25px;
        text-transform: none;
    }

    .nav-menu .nav-app-stores .app-store-btn svg {
        width: 12px;
        height: 12px;
        flex-shrink: 0;
    }

    .nav-menu .nav-app-stores .app-store-btn .btn-text-long {
        display: none;
    }

    .nav-menu .nav-app-stores .app-store-btn .btn-text-short {
        display: inline;
    }

    .nav-menu .nav-link {
        opacity: 1 !important;
        color: #ffffff !important;
        -webkit-text-fill-color: #ffffff;
        font-weight: 500;
    }

    .nav-menu .nav-link.signup-btn {
        color: #ffffff !important;
        -webkit-text-fill-color: #ffffff;
    }

    .nav-menu .nav-right {
        gap: var(--space-2);
        align-items: flex-start;
    }

    .nav-menu .signup-btn {
        width: auto;
        max-width: 220px;
        padding: 0.7rem 1.5rem;
        margin-top: 0.25rem;
        font-size: 0.8rem;
        letter-spacing: 0.06em;
        border-radius: 24px;
        min-height: 40px;
        min-width: auto;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .arrow,
    .video-play-btn,
    .video-sound-btn,
    .contact-next-btn,
    .contact-back-btn,
    .terms-cta-btn,
    .privacy-cta-btn {
        min-width: var(--touch-min);
        min-height: var(--touch-min);
    }

    /* Content slider arrows: compact circles, not full 44px touch targets */
    #intro .content-slider-nav .prev-content,
    #intro .content-slider-nav .next-content,
    #sell-your-music .content-slider-nav .prev-content,
    #sell-your-music .content-slider-nav .next-content {
        width: 28px;
        height: 28px;
        min-width: 28px;
        min-height: 28px;
    }

    #intro .content-slider-nav .prev-content svg,
    #intro .content-slider-nav .next-content svg,
    #sell-your-music .content-slider-nav .prev-content svg,
    #sell-your-music .content-slider-nav .next-content svg {
        width: 11px;
        height: 11px;
    }

    .mobile-dot {
        width: 10px;
        height: 10px;
        min-width: 10px;
        min-height: 10px;
    }

    .explore-btn,
    .auth-btn,
    .video-cta,
    .stores-count,
    .app-store-btn,
    .signup-btn {
        min-height: var(--touch-min);
    }

    .nav-menu .signup-btn {
        min-height: 40px;
        min-width: auto;
    }

    .nav-menu-footer {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-2);
        width: 100%;
    }

    .nav-footer-links {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 0.35rem 0.5rem;
    }

    .nav-footer-link {
        font-family: var(--body-font);
        font-size: 0.7rem;
        font-weight: 400;
        letter-spacing: 0.04em;
        color: rgba(255, 255, 255, 0.85);
        text-decoration: none;
        text-transform: none;
    }

    .nav-footer-link:hover,
    .nav-footer-link:focus-visible {
        color: #ffffff;
    }

    .nav-footer-sep {
        color: rgba(255, 255, 255, 0.35);
        font-size: 0.65rem;
        user-select: none;
    }

    .nav-footer-socials {
        display: flex;
        align-items: center;
        gap: var(--space-2);
    }

    .nav-footer-social {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 32px;
        height: 32px;
        border: 1px solid rgba(255, 255, 255, 0.25);
        border-radius: 50%;
        color: rgba(255, 255, 255, 0.9);
        text-decoration: none;
        transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
    }

    .nav-footer-social i,
    .nav-footer-social-svg {
        font-size: 0.85rem;
        line-height: 1;
        display: block;
    }

    .nav-footer-social-svg {
        width: 14px;
        height: 14px;
    }

    .nav-footer-social:hover,
    .nav-footer-social:focus-visible {
        color: #ffffff;
        border-color: rgba(244, 108, 20, 0.65);
        background: rgba(244, 108, 20, 0.12);
    }

    .nav-footer-copyright {
        margin: 0;
        font-family: var(--body-font);
        font-size: 0.62rem;
        font-weight: 300;
        letter-spacing: 0.03em;
        color: rgba(255, 255, 255, 0.55);
        line-height: 1.4;
        text-transform: none;
    }

    /* Intro compact pills — match Login / Signup sizing, not full touch target */
    #intro .auth-btn,
    #intro .stores-count,
    #intro .app-store-btn,
    #sell-your-music .video-bottom-bar .video-cta,
    #sell-your-music .video-bottom-bar .video-sound-btn--mobile,
    #vevo-service .explore-btn,
    #about-us .about-cta-btn,
    #careers .careers-cta {
        min-height: auto;
        min-width: auto;
    }

    .slide img,
    .video-section video,
    .intro-slide-img-grayscale {
        object-fit: cover;
        width: 100%;
        height: 100%;
    }

    /* Intro image + sell-your-music video: same height on mobile */
    #intro .split-image,
    #intro .split-image .image-slider,
    .split-layout .video-section {
        height: var(--mobile-hero-height);
        min-height: var(--mobile-hero-min-height);
        max-height: none;
        flex: none;
        flex-shrink: 0;
        overflow: hidden;
    }

    #intro .split-image .slide {
        height: 100%;
    }
}

/* --- Mid phones: 401px+ --- */
@media (min-width: 401px) and (max-width: 979px) {
    body {
        font-size: clamp(0.9rem, 2.2vw, 1.1rem);
    }

    .fullscreen-section {
        padding: var(--section-pad-tablet);
        padding-bottom: calc(60px + var(--safe-bottom));
    }
}

/* --- Tablet / iPad: 769–979px (former gap — now supported) --- */
@media (min-width: 769px) and (max-width: 979px) {
    .navbar {
        padding: var(--space-2) var(--space-4);
    }

    .split-layout {
        padding-top: 64px;
    }

    .split-layout .video-section {
        border-radius: 0 120px 0 0;
    }

    .split-layout .video-section video {
        border-radius: 0 120px 0 0;
    }

    .split-content,
    .split-layout .content-section {
        padding: var(--space-4) var(--space-5);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    .section-heading {
        font-size: clamp(1.35rem, 3.5vw, 1.75rem) !important;
    }

    .section-subheading {
        font-size: clamp(1.1rem, 3vw, 1.45rem) !important;
    }

    .mobile-dots {
        bottom: calc(16px + var(--safe-bottom));
        padding: var(--space-2) var(--space-4);
    }

    /* Vevo: tablet — requirements grid only (nav is below content at ≤979px) */
    #vevo-service .vevo-requirements-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* About: taller content panel */
    #about-us .about-content-block {
        min-height: 50%;
        max-height: 58%;
        border-radius: 80px 80px 0 0;
        padding: var(--space-4);
    }
    #about-us .about-cards {
        grid-template-columns: 1fr;
    }

    /* Contact: same stacked layout as phone (form first) */
    #contact-us .contact-panel {
        order: 1;
        flex: 0 0 auto;
        border-radius: 0;
        overflow: visible;
    }
    #contact-us .contact-visual {
        order: 2;
        height: auto;
        min-height: 0;
        flex: 0 0 auto;
        border-radius: 0;
    }

    /* Careers */
    #careers .careers-cards {
        grid-template-columns: repeat(3, 1fr);
        gap: var(--space-3);
    }
    #careers .careers-content {
        padding: var(--space-4) var(--space-5);
    }

    /* Terms / Privacy */
    #terms .terms-content-block,
    #privacy .privacy-content-block {
        padding: var(--space-5);
    }

    /* Testimonials */
    #why-1604ent .testimonials-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-4);
    }
}

/* --- Small phones: ≤480px — match video hero height --- */
@media (max-width: 480px) {
    :root {
        --mobile-hero-height: 40vh;
        --mobile-hero-min-height: 180px;
    }
}

/* --- Small phones: ≤380px --- */
@media (max-width: 380px) {
    .fullscreen-section {
        padding: 10px 12px;
        padding-bottom: calc(52px + var(--safe-bottom));
    }

    .navbar {
        min-height: 48px;
        padding: 0 12px;
    }

    .nav-brand img {
        height: 16px;
    }

    .section-heading {
        font-size: clamp(0.95rem, 4.5vw, 1.1rem) !important;
    }

    .section-subheading {
        font-size: clamp(0.85rem, 4vw, 1rem) !important;
    }

    .mobile-dots {
        gap: 6px;
        padding: 6px 10px;
    }

    .mobile-dot {
        width: 8px;
        height: 8px;
    }
}

/* ==========================================================================
   Section-specific mobile fixes (<980px)
   ========================================================================== */
@media (max-width: 979px) {
    /* --- Vevo --- */
    #vevo-service .vevo-wrapper {
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: var(--space-2) var(--space-2) calc(56px + var(--safe-bottom));
        box-sizing: border-box;
    }

    #vevo-service .vevo-slides-viewport {
        flex: 1 1 auto;
        min-height: 0;
        margin-left: var(--space-1);
        margin-right: var(--space-1);
    }

    #vevo-service .vevo-slide-controls {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: var(--space-2);
        flex-shrink: 0;
        margin-top: var(--space-2);
        padding: 4px 0;
        z-index: 11;
    }

    #vevo-service .vevo-prev,
    #vevo-service .vevo-next {
        position: static;
        top: auto;
        left: auto;
        right: auto;
        bottom: auto;
        transform: none;
        width: 34px;
        height: 34px;
        flex-shrink: 0;
    }

    #vevo-service .vevo-arrow svg {
        width: 16px;
        height: 16px;
    }

    #vevo-service .vevo-slide {
        flex-direction: column;
        padding: var(--space-3) var(--space-1) var(--space-2);
        align-items: stretch;
        justify-content: center;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    #vevo-service .vevo-slide-inner,
    #vevo-service .vevo-steps-inner,
    #vevo-service .vevo-requirements-inner,
    #vevo-service .vevo-pros-inner {
        max-height: none;
        overflow: visible;
        margin-top: auto;
        margin-bottom: auto;
        width: 100%;
    }

    /* Slide numbers — inline with prev/next below content */
    #vevo-service .vevo-pager {
        display: flex;
        flex-direction: row;
        position: static;
        top: auto;
        right: auto;
        left: auto;
        bottom: auto;
        transform: none;
        gap: clamp(0.35rem, 2vw, 0.75rem);
        background: rgba(15, 14, 13, 0.9);
        backdrop-filter: blur(8px);
        padding: 6px 14px;
        border-radius: 24px;
        border: 1px solid rgba(255, 107, 0, 0.25);
    }

    #vevo-service .vevo-pager-item {
        font-size: 0.75rem;
        padding: 2px 6px;
    }

    /* Bottom heading bar redundant on mobile — pager + arrows suffice */
    #vevo-service .vevo-bottom-bar {
        display: none;
    }

    #vevo-service .vevo-bar-prev-heading,
    #vevo-service .vevo-bar-next-heading {
        display: none;
    }

    #vevo-service .vevo-bar-line-dashed {
        display: none;
    }

    /* Compact pros cards */
    #vevo-service .vevo-pros-eyebrow {
        font-size: 0.6rem;
        margin-bottom: 0.25rem;
    }

    #vevo-service .vevo-pros-inner .vevo-slide-heading {
        font-size: clamp(1rem, 4.5vw, 1.25rem);
        margin-bottom: 0.5rem;
    }

    #vevo-service .vevo-pros-grid {
        gap: 0.35rem;
    }

    #vevo-service .vevo-pro-card {
        padding: 0.35rem 0.65rem;
        border-radius: 6px;
    }

    #vevo-service .vevo-pro-icon {
        width: 22px;
        height: 22px;
        margin-bottom: 0.15rem;
        border-radius: 5px;
    }

    #vevo-service .vevo-pro-icon svg {
        width: 12px;
        height: 12px;
    }

    #vevo-service .vevo-pro-title {
        font-size: 0.78rem;
        margin-bottom: 0.1rem;
        line-height: 1.2;
    }

    #vevo-service .vevo-pro-desc {
        font-size: 0.68rem;
        line-height: 1.3;
    }

    /* Compact CTAs */
    #vevo-service .explore-btn {
        padding: 6px 14px;
        font-size: 0.625rem;
        letter-spacing: 0.5px;
        border-radius: 18px;
        margin-top: 0.75rem;
        min-height: auto;
    }

    #vevo-service .vevo-req-cta,
    #vevo-service .vevo-requirements-inner .vevo-req-cta {
        padding: 6px 12px;
        font-size: 0.6rem;
        margin-top: 0.65rem;
    }

    /* Tighter steps slide */
    #vevo-service .vevo-slide-heading {
        font-size: clamp(1.1rem, 4.5vw, 1.35rem);
        margin-bottom: 0.6rem;
    }

    #vevo-service .vevo-slide-text {
        font-size: 0.82rem;
        margin-bottom: 0.65rem;
    }

    #vevo-service .vevo-steps-intro {
        font-size: 0.8rem;
        margin-bottom: 0.65rem;
    }

    #vevo-service .vevo-timeline-item {
        padding-bottom: 0.65rem;
    }

    #vevo-service .vevo-step-title {
        font-size: 0.85rem;
    }

    #vevo-service .vevo-timeline-content .vevo-slide-text {
        font-size: 0.75rem;
    }

    /* Compact requirements slide */
    #vevo-service .vevo-req-eyebrow {
        font-size: 0.6rem;
        margin-bottom: 0.25rem;
    }

    #vevo-service .vevo-requirements-inner .vevo-slide-heading {
        font-size: clamp(1rem, 4.5vw, 1.2rem);
        margin-bottom: 0.5rem;
    }

    #vevo-service .vevo-requirements-grid {
        gap: 0.4rem;
        margin-bottom: 0.85rem;
    }

    #vevo-service .vevo-req-card-header {
        padding: 0.4rem 0.6rem 0.2rem;
        gap: 0.35rem;
    }

    #vevo-service .vevo-req-card {
        border-left: none;
        min-width: 0;
    }

    #vevo-service .vevo-req-card-title {
        font-size: 0.78rem;
        min-width: 0;
        overflow-wrap: break-word;
    }

    #vevo-service .vevo-req-card-icon {
        width: 24px;
        height: 24px;
        border-radius: 6px;
    }

    #vevo-service .vevo-req-card-icon svg {
        width: 14px;
        height: 14px;
    }

    #vevo-service .vevo-req-tags {
        padding: 0 0.6rem 0.45rem;
        gap: 0.2rem 0.3rem;
    }

    #vevo-service .vevo-req-tags li {
        font-size: 0.65rem;
        padding: 0.12rem 0.35rem;
        max-width: 100%;
        overflow-wrap: anywhere;
    }

    /* --- About --- */
    #about-us .about-content-block {
        overflow-x: hidden;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        padding: var(--space-3) var(--space-3) var(--space-3);
        justify-content: center;
        align-items: center;
    }

    #about-us .about-slider {
        flex-direction: column;
        flex-wrap: nowrap;
        flex: 0 1 auto;
        max-width: 100%;
        gap: 0;
        min-height: 0;
        width: 100%;
        justify-content: center;
    }

    #about-us .about-slide-controls {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: var(--space-2);
        flex-shrink: 0;
        margin-top: var(--space-4);
        margin-bottom: calc(44px + var(--safe-bottom));
        padding: 0;
        width: 100%;
    }

    #about-us .about-prev,
    #about-us .about-next {
        order: unset;
        width: 34px;
        height: 34px;
        min-width: 34px;
        min-height: 34px;
        flex-shrink: 0;
    }

    #about-us .about-arrow svg {
        width: 16px;
        height: 16px;
    }

    #about-us .about-slides-viewport {
        order: unset;
        width: 100%;
        flex: 0 1 auto;
        height: auto;
        min-height: 0;
        overflow: hidden;
    }

    #about-us .about-slides-track {
        height: auto;
        align-items: stretch;
    }

    #about-us .about-slide {
        padding: 0;
        align-items: center;
        justify-content: center;
        height: auto;
    }

    #about-us .about-slide-inner,
    #about-us .about-slide-different {
        max-width: 100%;
        width: 100%;
        padding: 0;
        box-sizing: border-box;
        margin: 0 auto;
    }

    #about-us .about-heading {
        font-size: clamp(1.05rem, 4.5vw, 1.3rem);
        margin-bottom: 0.5rem;
    }

    #about-us .about-text {
        font-size: 0.8rem;
        line-height: 1.5;
        margin-bottom: 0.65rem;
    }

    /* Quote: decorative “ instead of border accent */
    #about-us .about-quote {
        font-size: 0.8rem;
        line-height: 1.5;
        margin-bottom: 0.65rem;
        border-left: none;
        padding-left: 0;
        text-align: center;
        position: relative;
        padding-top: 1.15rem;
    }

    #about-us .about-quote::before {
        content: "\201C";
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        font-size: 1.35rem;
        font-style: normal;
        font-weight: 600;
        color: #F46C14;
        line-height: 1;
    }

    /* Full-width stacked cards — stay inside frame, no left accent */
    #about-us .about-cards {
        grid-template-columns: 1fr;
        gap: 0.45rem;
        margin: 0 0 0.25rem;
        width: 100%;
        max-width: 100%;
    }

    #about-us .about-card {
        display: grid;
        grid-template-columns: auto 1fr;
        grid-template-rows: auto auto;
        column-gap: 0.5rem;
        row-gap: 0.12rem;
        padding: 0.45rem 0.55rem;
        border-radius: 6px;
        text-align: left;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-left: none;
    }

    #about-us .about-card-icon {
        grid-row: 1 / 3;
        align-self: start;
        width: 24px;
        height: 24px;
        margin-bottom: 0;
        border-radius: 5px;
    }

    #about-us .about-card-icon svg {
        width: 13px;
        height: 13px;
    }

    #about-us .about-card-title {
        grid-column: 2;
        font-size: 0.72rem;
        line-height: 1.25;
        margin-bottom: 0;
    }

    #about-us .about-card-desc {
        grid-column: 2;
        font-size: 0.65rem;
        line-height: 1.35;
    }

    #about-us .about-pagination {
        order: unset;
        width: auto;
        flex-direction: row;
        align-items: center;
        gap: var(--space-2);
        margin: 0;
        padding: 6px 12px;
        background: rgba(15, 14, 13, 0.9);
        border-radius: 24px;
        border: 1px solid rgba(255, 107, 0, 0.25);
    }

    #about-us .about-dot {
        width: 16px;
        height: 2px;
    }

    #about-us .about-dot.active {
        width: 22px;
    }

    #about-us .about-pagination-numbers {
        font-size: 0.7rem;
        white-space: nowrap;
    }

    /* Global mobile-dots already show section position — avoid duplicate row */
    #about-us .about-pagination-dots {
        display: none;
    }

    #about-us .about-card-title,
    #about-us .about-card-desc {
        min-width: 0;
        overflow-wrap: break-word;
        word-break: break-word;
    }

    #about-us .about-cta-btn {
        padding: 6px 14px;
        font-size: 0.625rem;
        letter-spacing: 0.5px;
        border-radius: 18px;
        min-height: auto;
        margin-top: 0.75rem;
        margin-bottom: var(--space-2);
    }

    /* --- Contact (mobile): form first, community below, vertically centered --- */
    #contact-us {
        justify-content: center;
        align-items: stretch;
        padding: calc(12px + var(--safe-top)) max(12px, var(--safe-right)) calc(56px + var(--safe-bottom)) max(12px, var(--safe-left));
        box-sizing: border-box;
    }

    #contact-us .contact-wrapper {
        flex-direction: column;
        justify-content: center;
        align-items: stretch;
        flex: 1 1 auto;
        min-height: 0;
        height: 100%;
        max-height: calc(var(--vh-small) - 24px - var(--safe-top) - var(--safe-bottom));
        padding-top: 0;
        padding-bottom: calc(32px + var(--safe-bottom));
        box-sizing: border-box;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    #contact-us .contact-panel {
        order: 1;
        flex: 0 0 auto;
        min-height: 0;
        justify-content: flex-start;
        align-items: stretch;
        padding: var(--space-2) var(--space-3);
        padding-right: max(var(--space-3), var(--safe-right));
        border-radius: 0;
        overflow: visible;
        background: transparent;
    }

    #contact-us .contact-visual {
        order: 2;
        flex: 0 0 auto;
        height: auto;
        min-height: 0;
        max-height: none;
        position: relative;
        overflow: visible;
        border-radius: 0;
    }

    #contact-us .contact-visual::before {
        display: none;
    }

    #contact-us .contact-community-overlay {
        position: relative;
        inset: auto;
        padding: var(--space-2) var(--space-3) var(--space-3);
        justify-content: flex-start;
        align-items: stretch;
        background: transparent;
    }

    #contact-us .contact-community-overlay .contact-community-heading {
        font-size: clamp(0.95rem, 3.5vw, 1.15rem);
        margin-bottom: 0.2rem;
        text-align: left;
    }

    #contact-us .contact-community-overlay .contact-community-intro {
        display: block;
        font-size: 0.72rem;
        line-height: 1.4;
        color: rgba(255, 255, 255, 0.82);
        text-align: left;
        margin: 0 0 0.65rem;
    }

    #contact-us .contact-community-grid {
        gap: 0;
        margin-top: 0;
    }

    #contact-us .contact-community-block {
        padding: 0;
    }

    #contact-us .contact-account-block {
        display: none;
    }

    #contact-us .contact-block-title {
        display: none;
    }

    #contact-us .contact-socials-block .contact-socials {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: var(--space-2);
        margin-top: 0;
    }

    #contact-us .contact-socials-block .contact-social-link {
        flex-direction: column;
        gap: 0.3rem;
        padding: 0.5rem 0.35rem;
        font-size: 0.62rem;
        border-radius: 10px;
        background: rgba(255, 255, 255, 0.04);
        border: 1px solid rgba(255, 255, 255, 0.1);
        text-align: center;
        justify-content: center;
    }

    #contact-us .contact-socials-block .contact-social-link span:not(.contact-social-icon) {
        font-size: 0.6rem;
        line-height: 1.2;
    }

    #contact-us .contact-social-icon {
        font-size: 1rem;
    }

    #contact-us .contact-form-column {
        max-width: 100%;
        padding-left: 0;
    }

    #contact-us .contact-heading {
        font-size: clamp(1.05rem, 4.5vw, 1.35rem);
        margin-bottom: 0.35rem;
    }

    #contact-us .contact-intro {
        font-size: 0.78rem;
        line-height: 1.45;
        margin-bottom: 0.5rem;
    }

    #contact-us .contact-form-area {
        padding: 0.65rem 0.75rem;
        margin-top: 0.35rem;
    }

    #contact-us .contact-typeform {
        min-height: auto;
    }

    #contact-us .contact-step-label {
        font-size: 0.78rem;
        margin-bottom: 0.3rem;
    }

    #contact-us .contact-field {
        margin-bottom: 0.45rem;
    }

    #contact-us .contact-field:last-of-type {
        margin-bottom: 0.35rem;
    }

    #contact-us .contact-input,
    #contact-us .contact-textarea {
        padding: 0.5rem 0.7rem;
        margin-bottom: 0;
        font-size: 16px !important; /* prevent iOS zoom on focus */
    }

    #contact-us .contact-textarea {
        min-height: 56px;
    }

    #contact-us .contact-step-actions {
        margin-top: 0.35rem;
        gap: 0.5rem;
    }

    #contact-us .contact-next-btn,
    #contact-us .contact-back-btn {
        width: 36px;
        height: 36px;
        min-width: 36px;
        min-height: 36px;
    }

    #contact-us .contact-next-btn svg,
    #contact-us .contact-back-btn svg {
        width: 18px;
        height: 18px;
    }

    #contact-us .contact-submit-btn {
        padding: 6px 14px;
        font-size: 0.625rem;
        letter-spacing: 0.5px;
        border-radius: 18px;
        min-height: auto;
    }

    #contact-us .contact-form-progress {
        margin: 0.4rem 0 0;
        font-size: 0.7rem;
    }

    #contact-us .contact-form-footer {
        margin-top: 0.35rem;
    }

    /* --- Careers --- */
    #careers {
        align-items: stretch;
        justify-content: center;
    }

    #careers .careers-wrapper {
        position: absolute;
        inset: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: calc(52px + var(--safe-top)) var(--space-3) calc(56px + var(--safe-bottom));
        box-sizing: border-box;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    #careers .careers-content {
        width: 100%;
        max-width: none;
        flex: 0 1 auto;
        margin: auto 0;
        padding: var(--space-3) var(--space-3) var(--space-4);
        border-radius: 16px;
    }

    #careers .careers-heading {
        font-size: clamp(1.15rem, 4.8vw, 1.45rem);
        margin-bottom: 0.45rem;
    }

    #careers .careers-tagline {
        font-size: 0.82rem;
        line-height: 1.5;
        margin-bottom: var(--space-3);
    }

    #careers .careers-cards {
        grid-template-columns: 1fr;
        gap: 0.55rem;
        margin-bottom: var(--space-3);
    }

    #careers .careers-card {
        display: grid;
        grid-template-columns: auto 1fr;
        grid-template-rows: auto auto;
        column-gap: 0.6rem;
        row-gap: 0.15rem;
        padding: 0.55rem 0.65rem;
        border-radius: 8px;
        text-align: left;
    }

    #careers .careers-card-icon {
        grid-row: 1 / 3;
        align-self: start;
        width: 28px;
        height: 28px;
        margin-bottom: 0;
        border-radius: 6px;
    }

    #careers .careers-card-icon svg {
        width: 15px;
        height: 15px;
    }

    #careers .careers-card-title {
        grid-column: 2;
        font-size: 0.78rem;
        line-height: 1.3;
        margin-bottom: 0;
    }

    #careers .careers-card-desc {
        grid-column: 2;
        font-size: 0.7rem;
        line-height: 1.4;
    }

    #careers .careers-cta {
        padding: 8px 18px;
        font-size: 0.6875rem;
        letter-spacing: 0.5px;
        border-radius: 20px;
        min-height: auto;
        width: auto;
        max-width: none;
    }

    /* --- Terms / Privacy --- */
    #terms,
    #privacy {
        padding: var(--space-3);
        padding-bottom: calc(56px + var(--safe-bottom));
        box-sizing: border-box;
    }
    #terms .terms-content-block,
    #privacy .privacy-content-block {
        max-width: 100%;
        padding: var(--space-3);
    }
    #terms .terms-title,
    #privacy .privacy-title {
        font-size: clamp(1.5rem, 6vw, 2.25rem);
    }
    #terms .terms-cta-btn,
    #privacy .privacy-cta-btn {
        width: 100%;
        max-width: 260px;
        padding: 0.65rem 1.5rem;
        font-size: 0.72rem;
        letter-spacing: 0.06em;
        border-radius: 24px;
        box-shadow: 0 3px 16px rgba(244, 108, 20, 0.3);
    }

    /* --- Testimonials (#why-1604ent) --- */
    #why-1604ent {
        padding: var(--space-4) var(--space-3);
        padding-bottom: calc(56px + var(--safe-bottom));
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        align-items: flex-start;
    }
    #why-1604ent .section-content {
        width: 100%;
        max-width: 100%;
    }
    #why-1604ent .testimonials-grid {
        margin-top: var(--space-4);
        gap: var(--space-3);
    }
    #why-1604ent .testimonial img {
        aspect-ratio: 4 / 3;
        object-fit: cover;
    }
    #why-1604ent .testimonial h4 {
        font-size: clamp(0.9rem, 3vw, 1.1rem);
    }
}

@media (max-width: 768px) {
    #vevo-service .vevo-requirements-grid,
    #vevo-service .vevo-pros-grid {
        grid-template-columns: 1fr;
    }
    #about-us .about-cards {
        grid-template-columns: 1fr;
    }
    #careers .careers-cards {
        grid-template-columns: 1fr;
    }
    #why-1604ent .testimonials-grid {
        grid-template-columns: 1fr;
    }
    .terms-modal-box,
    .privacy-modal-box {
        max-height: calc(var(--vh-full) - 2 * var(--space-3));
    }
}

@media (max-width: 480px) {
    #vevo-service .vevo-slides-viewport {
        margin-left: var(--space-1);
        margin-right: var(--space-1);
    }
    #vevo-service .vevo-slide-controls {
        gap: var(--space-1);
        margin-top: var(--space-1);
    }
    #vevo-service .vevo-prev,
    #vevo-service .vevo-next {
        width: 32px;
        height: 32px;
    }
    #vevo-service .vevo-pager {
        padding: 5px 10px;
        gap: 0.35rem;
    }
    #vevo-service .vevo-pager-item {
        font-size: 0.7rem;
    }
    #vevo-service .vevo-slide-heading {
        font-size: clamp(1.05rem, 5vw, 1.25rem);
    }

    #about-us .about-content-block {
        border-radius: 32px 32px 0 0;
        min-height: 58%;
        max-height: 68%;
        padding: var(--space-3) var(--space-3) var(--space-3);
        justify-content: center;
    }

    #about-us .about-slide-controls {
        gap: var(--space-1);
        margin-top: var(--space-3);
    }

    #about-us .about-prev,
    #about-us .about-next {
        width: 32px;
        height: 32px;
        min-width: 32px;
        min-height: 32px;
    }

    #about-us .about-pagination {
        padding: 5px 10px;
        gap: var(--space-1);
    }

    #about-us .about-card-title {
        font-size: 0.65rem;
    }

    #about-us .about-card-desc {
        font-size: 0.6rem;
    }

    #contact-us .contact-visual {
        border-radius: 0;
    }
    #contact-us .contact-panel {
        border-radius: 0;
    }

    #careers .careers-content {
        padding: var(--space-3) var(--space-2) var(--space-3);
        border-radius: 14px;
    }

    #careers .careers-heading {
        font-size: clamp(1.1rem, 5vw, 1.3rem);
    }

    #careers .careers-card {
        padding: 0.5rem 0.55rem;
    }

    #careers .careers-card-title {
        font-size: 0.74rem;
    }

    #careers .careers-card-desc {
        font-size: 0.67rem;
    }
}

/* ==========================================================================
   Intro mobile: compact OVER 200+ STORES + App Store / Play Store (slide 3)
   ========================================================================== */
@media (max-width: 979px) {
    /* Slide 2: small gap below logos, tighter stores pill */
    #intro .platform-logos {
        margin-bottom: 0;
    }

    #intro .stores-button {
        margin-top: 0.5rem;
        display: flex;
        justify-content: center;
    }

    #intro .stores-count {
        padding: 6px 14px;
        font-size: clamp(0.62rem, 2.6vw, 0.7rem);
        letter-spacing: 0.5px;
        border-radius: 18px;
        min-height: 32px;
        line-height: 1.2;
    }

    /* Slide 3: show app buttons — compact row like Login / Signup */
    #intro .app-stores {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        gap: var(--space-2);
        margin-top: 0.5rem;
        margin-bottom: 0;
        width: 100%;
        flex-shrink: 0;
    }

    #intro .app-store-btn {
        flex: 1;
        min-width: 0;
        justify-content: center;
        padding: 6px 10px;
        font-size: clamp(0.62rem, 2.6vw, 0.7rem);
        min-height: 32px;
        gap: 5px;
        border-radius: 18px;
        letter-spacing: 0.3px;
        text-transform: none;
    }

    #intro .app-store-btn svg {
        width: 12px;
        height: 12px;
        flex-shrink: 0;
    }

    #intro .app-store-btn .btn-text-long {
        display: none;
    }

    #intro .app-store-btn .btn-text-short {
        display: inline;
    }

    /* Sell Your Music: centered CTA, tappable volume on left */
    #sell-your-music .video-sound-btn--desktop {
        display: none !important;
    }

    #sell-your-music .video-sound-btn--mobile {
        display: flex;
    }

    #sell-your-music .video-bottom-bar {
        bottom: 8px;
        left: 0;
        right: 0;
        padding: 0 44px;
        display: flex;
        justify-content: center;
        align-items: center;
        min-height: 36px;
        z-index: 25;
        pointer-events: none;
    }

    #sell-your-music .video-content-overlay {
        bottom: calc(8px + 40px + var(--space-2));
        pointer-events: none;
    }

    #sell-your-music .video-bottom-bar .video-sound-btn--mobile {
        position: absolute;
        left: var(--space-2);
        top: 50%;
        transform: translateY(-50%);
        width: 36px;
        height: 36px;
        min-width: 36px;
        min-height: 36px;
        border-width: 1px;
        flex-shrink: 0;
        pointer-events: auto;
        cursor: pointer;
        z-index: 30;
        -webkit-tap-highlight-color: transparent;
        touch-action: manipulation;
    }

    #sell-your-music .video-bottom-bar .video-sound-btn--mobile:hover {
        transform: translateY(-50%) scale(1.05);
    }

    #sell-your-music .video-bottom-bar .video-sound-btn--mobile svg {
        width: 14px;
        height: 14px;
        pointer-events: none;
    }

    #sell-your-music .video-bottom-bar .video-cta {
        padding: 6px 12px;
        font-size: 0.6rem;
        letter-spacing: 0.4px;
        border-radius: 18px;
        min-height: 32px;
        line-height: 1.2;
        white-space: nowrap;
        pointer-events: auto;
        margin: 0;
    }
}

@media (max-width: 400px) {
    #about-us .about-heading {
        font-size: clamp(1rem, 4.5vw, 1.2rem);
    }
    #about-us .about-text,
    #about-us .about-list li {
        font-size: 0.8rem;
    }
    #contact-us .contact-heading {
        font-size: clamp(1rem, 4.5vw, 1.2rem);
    }
}

/* Short viewports: slightly tighter scroll area only */
@media (max-width: 979px) and (max-height: 740px) {
    :root {
        --mobile-hero-height: 38vh;
        --mobile-hero-min-height: 175px;
    }

    #intro .content-slides-container,
    #sell-your-music .content-slides-container {
        max-height: calc(100svh - var(--mobile-hero-min-height) - 48px - 80px - 52px - var(--safe-bottom));
    }

    #about-us .about-content-block {
        min-height: 0;
        max-height: none;
    }

    #contact-us .contact-visual {
        height: auto;
        min-height: 0;
    }
}

/* ==========================================================================
   Desktop preservation: ≥980px — no layout changes (EQ full-bleed desktop)
   ========================================================================== */
@media (min-width: 980px) {
    body {
        font-size: clamp(1.1rem, 2vw, 1.3rem);
        padding-top: 0;
        padding-left: 0;
        padding-right: 0;
    }

    .sections-container,
    .fullscreen-section {
        height: 100vh;
        min-height: 100vh;
    }

    .mobile-dots {
        display: none;
    }

    .mobile-menu-fab {
        display: none !important;
    }

    #intro .platform-logos,
    #sell-your-music .platform-logos-overlay,
    .platform-logos-overlay {
        flex-wrap: nowrap;
        justify-content: center;
        gap: clamp(0.35rem, 0.85vw, 0.85rem);
    }

    .section-nav {
        display: flex;
    }

    .nav-toggle {
        display: none;
    }

    .nav-menu .nav-app-stores {
        display: none !important;
    }

    .nav-menu-bottom {
        display: none !important;
    }

    .site-header {
        z-index: 1100;
    }

    .site-header:not(.visible) {
        pointer-events: none;
    }

    .site-header.visible {
        pointer-events: auto;
    }

    .navbar::before {
        display: none !important;
    }

    .nav-menu {
        position: static !important;
        inset: auto !important;
        width: auto !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        clip-path: none !important;
        pointer-events: auto !important;
        overflow: visible !important;
    }

    .border-frame {
        top: calc(var(--space-5) + var(--space-4));
        left: var(--space-5);
        right: var(--space-5);
        bottom: calc(var(--space-2) + var(--space-3));
        z-index: 1101;
    }

    .unsupported-viewport {
        display: none !important;
    }
}