/* Landing: no chrome padding — hero owns the first viewport */
.main-container:has(.landing-page) {
    max-width: none;
    width: 100%;
    margin: 0;
    padding: 0 !important;
    background: #fff;
    overflow-x: clip;
}

html:has(.landing-page),
body:has(.landing-page) {
    background: #fff;
    overflow-x: hidden;
    max-width: 100%;
    scrollbar-width: none !important;
    scrollbar-color: transparent transparent;
    -ms-overflow-style: none;
    scrollbar-gutter: auto;
}

body.has-app-tab-bar .main-container:has(.landing-page) {
    padding: 0 !important;
}

html:has(.landing-page)::-webkit-scrollbar,
body:has(.landing-page)::-webkit-scrollbar {
    width: 0 !important;
    height: 0 !important;
    display: none !important;
}

/*
  Section map:
  - Hero: black, full viewport, rounded bottom
  - Page base: white
  - YouTube: white (no band)
  - Offer: black, rounded top + bottom
  - FAQ: white
  - Footer: black, rounded top
*/
.landing-page {
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0;
    background: #fff;
    color: var(--label-on-accent);
    overflow-x: clip;
    box-sizing: border-box;
}

.landing-page > .lh-hero,
.landing-page > .lh-youtube,
.landing-page > .lh-features,
.landing-page > .lh-faq,
.landing-page > .lh-cta {
    width: 100%;
    max-width: 100%;
    margin: 0;
    box-sizing: border-box;
}

.landing-page > .lh-hero {
    /* Extra height pushes bottom radius below the first viewport */
    min-height: calc(100svh + clamp(48px, 10vw, 112px));
    padding: 0;
    margin: 0;
    background: #000;
    color: var(--text);
    corner-shape: squircle;
    border-radius: 0 0 clamp(48px, 10vw, 112px) clamp(48px, 10vw, 112px);
}

.landing-page > .lh-youtube {
    padding: clamp(16px, 2.5vw, 32px) clamp(20px, 4vw, 40px);
    background: #fff;
}

.landing-page > .lh-features {
    padding: clamp(36px, 4.5vw, 56px) clamp(20px, 4vw, 40px);
    background: #000;
    color: var(--text);
    corner-shape: squircle;
    border-radius: clamp(48px, 10vw, 112px);
}

.landing-page > .lh-faq {
    padding: clamp(56px, 8vw, 96px) clamp(20px, 4vw, 40px);
    background: #fff;
    color: var(--label-on-accent);
    overflow: visible;
    position: relative;
    z-index: 2;
}

.landing-page > .lh-cta {
    padding: clamp(24px, 4vw, 48px) clamp(20px, 4vw, 40px) clamp(48px, 7vw, 80px);
    background: #fff;
    color: var(--label-on-accent);
}

/* FAQ on white: dark type. CTA card keeps its own dark theme. */
.landing-page > .lh-faq .lh-faq__title,
.landing-page > .lh-faq .lh-faq__question {
    color: var(--label-on-accent);
}

.landing-page > .lh-faq .lh-faq__support,
.landing-page > .lh-faq .lh-faq__answer p {
    color: color-mix(in srgb, var(--label-on-accent) 62%, transparent);
}

.landing-page > .lh-faq .lh-faq__support a {
    color: var(--label-on-accent);
}

.landing-page > .lh-faq .lh-faq__list,
.landing-page > .lh-faq .lh-faq__item {
    border-color: color-mix(in srgb, var(--label-on-accent) 14%, transparent);
}

.landing-page > .lh-faq .lh-faq__toggle::before,
.landing-page > .lh-faq .lh-faq__toggle::after {
    background: var(--label-on-accent);
}

/* Offer section headings stay light on black */
.landing-page > .lh-features .lh-features__eyebrow {
    color: var(--text-secondary);
}

.landing-page > .lh-features .lh-features__title {
    color: var(--text);
}

/* Site footer under landing: black, rounded top */
body:has(.landing-page) > footer {
    background: #000;
    color: var(--text);
    corner-shape: squircle;
    border-radius: clamp(48px, 10vw, 112px) clamp(48px, 10vw, 112px) 0 0;
    margin-top: 0;
    padding-top: clamp(40px, 6vw, 64px);
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow-x: clip;
}

@media (max-width: 960px) {
    body.has-app-tab-bar .main-container:has(.landing-page) {
        padding: 0 !important;
    }

    .main-container:has(.landing-page) {
        padding: 0 !important;
        max-width: none;
        width: 100%;
        overflow-x: hidden;
    }

    .landing-page {
        margin: 0;
        padding: 0;
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
        box-sizing: border-box;
    }

    .landing-page > .lh-hero {
        min-height: auto;
        margin: 0;
        padding: 0;
        width: 100%;
        max-width: 100%;
        border-radius: 0 0 clamp(32px, 8vw, 56px) clamp(32px, 8vw, 56px);
    }

    .landing-page > .lh-youtube {
        padding: clamp(20px, 4vw, 32px) 16px;
    }

    .landing-page > .lh-features {
        padding: clamp(32px, 6vw, 48px) 16px;
        border-radius: clamp(32px, 8vw, 56px);
    }

    .landing-page > .lh-faq {
        padding: clamp(40px, 8vw, 72px) 16px;
    }

    .landing-page > .lh-cta {
        padding: clamp(24px, 5vw, 40px) 16px clamp(40px, 8vw, 64px);
    }

    .landing-page .lh-youtube__card,
    .landing-page .lh-cta__card,
    .landing-page .lh-features__grid,
    .landing-page .lh-features__head,
    .landing-page .lh-faq__layout {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

    body:has(.landing-page) > footer > div {
        padding-left: 16px !important;
        padding-right: 16px !important;
        box-sizing: border-box;
    }
}

@media (max-width: 520px) {
    .landing-page > .lh-hero {
        border-radius: 0 0 clamp(24px, 6vw, 32px) clamp(24px, 6vw, 32px);
    }

    .landing-page > .lh-features {
        border-radius: clamp(24px, 6vw, 32px);
    }

    body:has(.landing-page) > footer {
        border-radius: clamp(24px, 6vw, 32px) clamp(24px, 6vw, 32px) 0 0;
    }
}