@layer pages {
/* Lead routing splash (/route/<uri>?v=2) — avatar_banner (bottom-center) + a
   centered hero (vendor name + "Enter your zip code") + one ZIP field + a Next
   button. Same responsive split as psw-suitelink (768/769): mobile carries the
   submit + branding in the sticky `footer`; desktop shows an inline submit +
   stacked powered_by and the footer hides itself. The `--inline` modifier
   (mode=inline embed) drops the banner/footer/branding so a partner can host
   just the field + button; the submit then shows at every width. */

.psw-route {
    --route-column: 450px;     /* content column width, both viewports */
    min-height: 100vh;
    background: var(--color-white);
}

.psw-route__body {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--space-6) var(--space-4) 0;   /* 24px below the avatar banner */
    /* Clear the fixed mobile footer (psw-footer.css's --psw-footer-height)
       plus the 24px content-to-footer gap every mobile screen keeps. */
    padding-bottom: calc(var(--psw-footer-height) + var(--space-6));
}

.psw-route__hero,
.psw-route__field,
.psw-route__submit,
.psw-route__branding {
    width: 100%;
    max-width: var(--route-column);
}

.psw-route__hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);            /* 8px title -> subtitle (mobile) */
    text-align: center;
    margin-bottom: var(--space-10); /* 40px hero -> field, both viewports */
}

.psw-route__title {
    margin: 0;
    font-family: var(--font-sans);
    font-weight: var(--font-weight-bold);
    font-size: var(--text-heading-sm);                 /* mobile 24/32 */
    line-height: var(--text-heading-sm--line-height);
    color: var(--color-gray-700);                      /* #0F0F0F */
}

.psw-route__subtitle {
    margin: 0;
    font-family: var(--font-sans);
    font-weight: var(--font-weight-regular);
    font-size: var(--text-paragraph-lg);               /* mobile 18/28 */
    line-height: var(--text-paragraph-lg--line-height);
    color: var(--color-gray-600);                      /* #545454 */
}

/* Desktop shows the submit inline under the field; mobile uses the sticky
   footer, so it hides here and the footer carries the Next button. */
.psw-route__submit {
    display: none;
    margin-top: var(--space-10);    /* 40px field -> submit */
}

/* Mobile: branding rides in the sticky footer, so the inline copy hides. */
.psw-route__branding {
    display: none;
}

@media (min-width: 769px) {
    .psw-route__body {
        /* No fixed footer to clear; bottom space rides below the branding so
           the submit -> powered_by gap is exactly the branding margin. */
        padding-bottom: 0;
    }

    .psw-route__hero {
        gap: var(--space-4);              /* 16px title -> subtitle */
    }

    .psw-route__title {
        font-size: var(--text-heading-lg);                 /* desktop 32/40 */
        line-height: var(--text-heading-lg--line-height);
    }

    .psw-route__subtitle {
        font-size: var(--text-paragraph-md);               /* desktop 16/24 */
        line-height: var(--text-paragraph-md--line-height);
    }

    .psw-route__submit {
        display: block;
    }

    .psw-route__branding {
        display: block;
        /* auto side margins center the max-width block; it sits outside the
           flex body, so it won't inherit the body's align-items centering. */
        margin: var(--space-6) auto var(--space-8);   /* 24px submit -> branding, 32px page end */
    }
}

/* Inline embed (mode=inline): no banner/footer/branding — just a centered
   field + button card. Submit shows at every width; the host page supplies the
   surrounding chrome. */
.psw-route--inline {
    /* Fill the fixed embed iframe (300x250, widget.js) exactly and clip any
       taller render so the frame itself can never scroll. */
    min-height: auto;
    height: 100vh;
    overflow: hidden;
}

.psw-route--inline .psw-route__body {
    padding: var(--space-6) var(--space-4) var(--space-2);
    margin: 0 auto;
}

.psw-route--inline .psw-route__hero {
    margin-bottom: var(--space-5);
}

.psw-route--inline .psw-route__submit {
    display: block;
    margin-top: var(--space-6);
}
}