/*
 * SwrlSite public UI corrections after the AI-first redesign.
 *
 * This file intentionally loads after page-level marketing CSS. It restores
 * normal document scrolling, tightens the public navigation, and keeps the
 * marketing type scale bold without letting a headline consume the viewport.
 */

/* The redesign originally applied `overflow: clip` to the body. A body with
   clipped overflow cannot become the page scroll container, so every public
   marketing page appeared frozen at the first viewport. Keep only horizontal
   overflow contained and explicitly preserve vertical scrolling. */
body.mkt-page {
    min-height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
}

body.mkt-page main {
    overflow: visible;
}

/* Keep the header as one compact right-aligned cluster instead of placing the
   language control in the visual center of the page. */
.site-header {
    justify-content: flex-start;
    gap: clamp(10px, 1.35vw, 20px);
    padding: 12px 20px;
}

.site-header .brand {
    flex: 0 0 auto;
}

.site-header .nav-lang {
    flex: 0 0 auto;
    margin-left: auto;
}

.nav-lang-switch {
    min-width: 36px;
    min-height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(16, 16, 20, .14);
    border-radius: 999px;
    padding: 5px 9px;
    background: rgba(255, 255, 255, .72);
    color: #34323a;
    font: 800 .74rem/1 Inter, Arial, sans-serif;
    letter-spacing: .06em;
    transition: border-color .18s ease, background .18s ease, transform .18s ease;
}

.nav-lang-switch:hover {
    border-color: rgba(16, 16, 20, .32);
    background: #fff;
    transform: translateY(-1px);
}

.site-header .main-nav {
    margin-left: 0;
    gap: clamp(10px, 1.1vw, 17px);
    font-size: .9rem;
}

.site-header .main-nav .nav-account {
    border: 1px solid rgba(16, 16, 20, .12);
    border-radius: 999px;
    padding: 7px 10px;
    background: rgba(255, 255, 255, .55);
    font-size: .84rem;
    font-weight: 750;
}

.site-header .nav-cta {
    padding: 10px 15px;
}

/* Public marketing type scale. These selectors are deliberately more specific
   than marketing-v2.css so later component rules cannot restore the oversized
   legacy hero headings. */
.mkt-page .mkt-hero-copy h1 {
    max-width: 760px;
    font-size: clamp(2.65rem, 4.25vw, 4.5rem);
    line-height: .96;
    letter-spacing: -.055em;
}

.mkt-page .ai-product-hero h1 {
    max-width: 780px;
    font-size: clamp(2.75rem, 4.55vw, 4.75rem);
    line-height: .95;
    letter-spacing: -.055em;
}

.mkt-page .about-hero-v2 h1 {
    max-width: 780px;
    font-size: clamp(2.65rem, 4.25vw, 4.5rem);
    line-height: .96;
    letter-spacing: -.055em;
}

.mkt-page .pricing-hero-v2 h1 {
    max-width: 760px;
    font-size: clamp(2.2rem, 3.7vw, 3.5rem);
    line-height: 1;
}

.mkt-page .mkt-heading h2 {
    font-size: clamp(1.95rem, 3.35vw, 3.1rem);
    line-height: 1.02;
}

.mkt-page .dual-final-cta h2,
.mkt-page .proof-feature h2,
.mkt-page .ai-price-main h2,
.mkt-page .pricing-ai-feature h2 {
    font-size: clamp(1.95rem, 3.2vw, 3rem);
    line-height: 1.02;
}

/* Slightly tighter first sections and page rhythm. The pages remain spacious,
   but the next useful section is visible sooner. */
.mkt-page .mkt-section {
    padding: clamp(3.75rem, 6.25vw, 6rem) 0;
}

.mkt-page .mkt-hero {
    min-height: min(700px, calc(100svh - 68px));
    padding: clamp(3.5rem, 5.75vw, 5.75rem) 0;
}

.mkt-page .free-site-hero,
.mkt-page .about-hero-v2 {
    padding: clamp(3.5rem, 5.75vw, 5.75rem) 0;
}

.mkt-page .ai-product-hero {
    min-height: 640px;
    padding: clamp(3.75rem, 5.75vw, 5.75rem) 0;
}

.mkt-page .free-site-visual {
    min-height: 430px;
}

@media (max-width: 820px) {
    .site-header {
        gap: 10px;
        padding: 11px 15px;
    }

    .nav-lang-switch {
        min-width: 34px;
        min-height: 32px;
        padding: 5px 8px;
    }

    .mkt-page .mkt-hero-copy h1,
    .mkt-page .ai-product-hero h1,
    .mkt-page .about-hero-v2 h1 {
        font-size: clamp(2.35rem, 10.5vw, 3.35rem);
        line-height: .98;
    }

    .mkt-page .pricing-hero-v2 h1,
    .mkt-page .mkt-heading h2 {
        font-size: clamp(1.95rem, 8.8vw, 2.75rem);
    }

    .mkt-page .mkt-hero,
    .mkt-page .free-site-hero,
    .mkt-page .about-hero-v2,
    .mkt-page .ai-product-hero {
        min-height: auto;
        padding: 3.25rem 0;
    }
}

@media (max-width: 620px) {
    .mkt-page .mkt-section {
        padding: 3.25rem 0;
    }

    .mkt-page .mkt-hero-copy h1,
    .mkt-page .ai-product-hero h1,
    .mkt-page .about-hero-v2 h1 {
        font-size: clamp(2.2rem, 11vw, 2.9rem);
    }
}