/* Brasilll page-header identity: breadcrumb → eyebrow → H1 → intro */
section.page-hero,
.page-main .destination-guide-hero,
.page-main .guide-index-hero,
.page-main .guide-article-hero,
.page-main .compare-hero,
.page-main .legal-hero {
    padding-top: 58px;
    padding-bottom: 48px;
}

.page-heading {
    min-width: 0;
}

.page-main .page-breadcrumbs,
.page-main .breadcrumbs,
.page-main .guide-breadcrumbs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 7px;
    margin: 0 0 18px;
    color: var(--muted);
    font-size: .82rem;
    line-height: 1.35;
}

.page-main .page-breadcrumbs a,
.page-main .breadcrumbs a,
.page-main .guide-breadcrumbs a {
    color: inherit;
    text-decoration: none;
}

.page-main .page-breadcrumbs a:hover,
.page-main .breadcrumbs a:hover,
.page-main .guide-breadcrumbs a:hover {
    color: var(--forest);
}

.page-main .page-breadcrumbs [aria-current="page"],
.page-main .breadcrumbs [aria-current="page"],
.page-main .guide-breadcrumbs [aria-current="page"],
.page-main .breadcrumbs > span:last-child {
    color: var(--ink);
    font-weight: 720;
}

.page-main .page-breadcrumbs__separator {
    opacity: .55;
}

.page-heading .page-eyebrow,
.page-main .destination-guide-hero .eyebrow,
.page-main .guide-index-hero .eyebrow,
.page-main .guide-article-hero .eyebrow,
.page-main .compare-hero .eyebrow,
.page-main .legal-hero .eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin: 0 0 14px;
    color: var(--green);
    font-size: .76rem;
    font-weight: 850;
    line-height: 1.25;
    letter-spacing: .13em;
    text-transform: uppercase;
}

.page-heading .page-eyebrow::before,
.page-main .destination-guide-hero .eyebrow::before,
.page-main .guide-index-hero .eyebrow::before,
.page-main .guide-article-hero .eyebrow::before,
.page-main .compare-hero .eyebrow::before,
.page-main .legal-hero .eyebrow::before {
    content: "";
    width: 28px;
    height: 2px;
    flex: 0 0 auto;
    background: var(--sun);
}

.page-heading h1.page-title,
.page-main .destination-guide-hero h1,
.page-main .guide-index-hero h1,
.page-main .guide-article-hero h1,
.page-main .compare-hero h1,
.page-main .legal-hero h1 {
    max-width: 900px;
    margin: 0;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(2.8rem, 5vw, 4.6rem);
    font-weight: 600;
    line-height: .98;
    letter-spacing: -.04em;
}

.page-heading .page-intro {
    max-width: 760px;
    margin: 22px 0 0;
    color: var(--muted);
    font-size: clamp(1.05rem, 1.8vw, 1.22rem);
    line-height: 1.62;
}

/* Shared secondary hierarchy: major section H2s should support the page title, not compete with it. */
.page-main .section-heading h2,
.page-main .cta-panel h2,
.page-main .compare-page .compare-section-heading h2,
.page-main .compare-page .compare-empty-copy h2,
.page-main .guide-intro-copy h2,
.page-main .guide-gallery-heading h2,
.page-main .guide-editorial-heading h2,
.page-main .guide-section-heading h2,
.page-main .guide-verdict h2 {
    font-size: clamp(2.15rem, 4vw, 3rem);
    line-height: 1.03;
    letter-spacing: -.035em;
}

.page-main .compare-page .compare-section-heading-compact h2 {
    font-size: clamp(2rem, 3.5vw, 2.65rem);
}

.page-hero-dark .page-heading .page-breadcrumbs,
.page-main .guide-article-hero .guide-breadcrumbs,
.page-main .guide-article-hero .page-breadcrumbs {
    color: rgba(255,255,255,.66);
}

.page-hero-dark .page-heading .page-breadcrumbs a:hover,
.page-hero-dark .page-heading .page-breadcrumbs [aria-current="page"],
.page-main .guide-article-hero .guide-breadcrumbs a:hover,
.page-main .guide-article-hero .guide-breadcrumbs [aria-current="page"],
.page-main .guide-article-hero .page-breadcrumbs a:hover,
.page-main .guide-article-hero .page-breadcrumbs [aria-current="page"] {
    color: var(--white);
}

.page-hero-dark .page-heading .page-eyebrow,
.page-main .guide-index-hero .eyebrow,
.page-main .guide-article-hero .eyebrow {
    color: var(--sun);
}

.page-hero-dark .page-heading h1.page-title,
.page-main .guide-index-hero h1,
.page-main .guide-article-hero h1 {
    color: var(--white);
}

.page-hero-dark .page-heading .page-intro {
    color: rgba(255,255,255,.82);
}

@media (max-width: 720px) {
    section.page-hero,
    .page-main .destination-guide-hero,
    .page-main .guide-index-hero,
    .page-main .guide-article-hero,
    .page-main .compare-hero,
    .page-main .legal-hero {
        padding-top: 40px;
        padding-bottom: 36px;
    }

    .page-main .page-breadcrumbs,
    .page-main .breadcrumbs,
    .page-main .guide-breadcrumbs {
        margin-bottom: 15px;
        font-size: .78rem;
    }

    .page-heading .page-eyebrow,
    .page-main .destination-guide-hero .eyebrow,
    .page-main .guide-index-hero .eyebrow,
    .page-main .guide-article-hero .eyebrow,
    .page-main .compare-hero .eyebrow,
    .page-main .legal-hero .eyebrow {
        margin-bottom: 12px;
    }

    .page-heading h1.page-title,
    .page-main .destination-guide-hero h1,
    .page-main .guide-index-hero h1,
    .page-main .guide-article-hero h1,
    .page-main .compare-hero h1,
    .page-main .legal-hero h1 {
        font-size: clamp(2.5rem, 10.5vw, 3.6rem);
    }

    .page-heading .page-intro {
        margin-top: 18px;
    }
}