/* Native cross-document transitions retain normal URLs, history and link behavior. */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: md-page-out 180ms ease-out both; mix-blend-mode: normal; }
::view-transition-new(root) { animation: md-page-in 240ms ease-out both; mix-blend-mode: normal; }
@keyframes md-page-out { to { opacity: 0; } }
@keyframes md-page-in { from { opacity: 0; } to { opacity: 1; } }

/* Each cover ends at the first viewport; the white content follows immediately. */
.md-ui.md-public .md-public-main :is(.md-home-cover, .md-about-cover, .md-how-hero, .md-blog-cover, .md-contact-cover) {
    height: 100vh;
    height: 100svh;
    min-height: 0;
    max-height: none;
    align-items: center;
}
.md-ui.md-public .md-public-main :is(.md-home-cover__content, .md-about-cover__content, .md-how-hero__content, .md-blog-cover__content, .md-contact-cover__content) {
    padding-top: 120px;
    padding-bottom: 110px;
}
.md-ui.md-public .md-public-main :is(.md-home-content, .md-about-content, .md-how-steps, .md-blog-content, .md-contact-content) { background: #fff; }
.md-ui.md-public .md-public-main :is(.md-home-cover, .md-about-cover, .md-how-cover, .md-blog-cover, .md-contact-cover) + * { margin-top: 0; }
.md-ui.md-public .md-public-main .md-hero-slide { align-items: center; }

/* Scale the copy to shorter laptops and landscape viewports rather than cropping it. */
@media (max-height: 800px) {
    .md-ui.md-public .md-public-main :is(.md-home-cover h1, .md-hero-slide__title, .md-about-cover__headline, .md-how-hero__headline, .md-contact-cover__headline) {
        font-size: clamp(34px, 10svh, 80px);
    }
    .md-ui.md-public .md-public-main .md-blog-cover h1 { font-size: clamp(42px, 11svh, 84px); }
    .md-ui.md-public .md-public-main .md-blog-featured { margin-top: 24px; }
    .md-ui.md-public .md-public-main .md-blog-featured h2 { font-size: 22px; }
    .md-ui.md-public .md-public-main .md-blog-featured p { font-size: 12px; margin-block: 8px; }
}
@media (max-width: 600px) {
    .md-ui.md-public .md-public-main :is(.md-home-cover h1, .md-hero-slide__title, .md-about-cover__headline, .md-how-hero__headline, .md-contact-cover__headline) { font-size: clamp(34px, 9.5vw, 56px); }
    .md-ui.md-public .md-public-main .md-blog-cover h1 { font-size: clamp(48px, 14vw, 66px); }
    .md-ui.md-public .md-public-main .md-blog-featured { margin-top: 28px; }
    .md-ui.md-public .md-public-main .md-blog-featured h2 { font-size: 20px; }
    .md-ui.md-public .md-public-main .md-blog-featured p { font-size: 12px; }
}
@media (max-height: 600px) {
    .md-ui.md-public .md-public-main :is(.md-home-cover__content, .md-about-cover__content, .md-how-hero__content, .md-blog-cover__content, .md-contact-cover__content) { padding-top: 90px; padding-bottom: 70px; }
    .md-ui.md-public .md-public-main :is(.md-home-cover h1, .md-hero-slide__title, .md-about-cover__headline, .md-how-hero__headline, .md-contact-cover__headline) { font-size: clamp(27px, 8svh, 46px); }
    .md-ui.md-public .md-public-main .md-blog-cover h1 { font-size: clamp(30px, 9svh, 52px); }
    .md-ui.md-public .md-public-main :is(.md-home-cover__eyebrow, .md-blog-cover__eyebrow, .md-about-cover h1, .md-how-hero h1, .md-contact-cover h1) { margin-bottom: 10px; font-size: 14px; }
    .md-ui.md-public .md-public-main :is(.md-home-cover__content > p:not(.md-home-cover__eyebrow), .md-how-hero__lead, .md-blog-cover__lead, .md-contact-cover__lead) { margin-block: 12px; font-size: 16px; }
    .md-ui.md-public .md-public-main :is(.md-home-cover__cta, .md-how-button) { min-height: 42px; padding-block: 8px; font-size: 15px; }
    .md-ui.md-public .md-public-main .md-blog-featured { margin-top: 16px; }
    .md-ui.md-public .md-public-main .md-blog-featured__label { margin-bottom: 6px; font-size: 12px; }
    .md-ui.md-public .md-public-main .md-blog-featured h2 { font-size: 18px; }
    .md-ui.md-public .md-public-main .md-blog-featured p { display: none; }
    .md-ui.md-public .md-public-main .md-blog-featured > a { margin-top: 8px; font-size: 13px; }
    .md-ui.md-public .md-public-main :is(.md-about-cover__foot, .md-how-hero__foot, .md-contact-cover__foot) { bottom: 18px; padding-top: 10px; }
    .md-ui.md-public .md-public-main .md-how-hero__foot > .md-container { padding-bottom: 12px; }
}
@media (prefers-reduced-motion: reduce) {
    @view-transition { navigation: none; }
    ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
}