/* One navbar logo scale across marketing, authentication and member pages.
   Keep it independent of the legacy compact-header and brand-theme rules. */
body .site-header.site-header-pro {
    --pro-header-logo-width: 160px;
    min-height: 84px;
    padding-block: 8px;
}

body .site-header.site-header-pro .brand .brand-logo-lockup {
    flex: 0 0 var(--pro-header-logo-width);
    height: 68px;
    min-height: 0;
    padding: 0;
    width: var(--pro-header-logo-width);
}

body .site-header.site-header-pro .brand .brand-logo-lockup img {
    height: auto;
    max-height: 68px;
    object-fit: contain;
    width: 100%;
}

.site-header-pro .pro-header-action-icon { display: none; }

@media (max-width: 767px) {
    body .site-header.site-header-pro {
        --pro-header-logo-width: 130px;
    }
    body .site-header.site-header-pro:has(.pro-header-action) { gap: 12px; padding-inline: 24px; }
    body .site-header.site-header-pro:has(.pro-header-action) .brand { max-width: 100%; }
    body .site-header.site-header-pro:has(.pro-header-action) .brand .brand-logo-lockup { flex-shrink: 1; max-width: 100%; }
    body .site-header.site-header-pro:has(.pro-header-action) .nav-actions { gap: 8px; }
    body .site-header.site-header-pro .nav-actions .pro-header-action {
        align-items: center; background: var(--mpb-color-rose); border: 0; border-radius: 50%; box-shadow: none;
        color: var(--mpb-color-bordeaux); display: inline-flex; flex: 0 0 44px; height: 44px;
        justify-content: center; min-height: 44px; min-width: 44px; padding: 0; position: relative; width: 44px;
    }
    body .site-header.site-header-pro .nav-actions .pro-header-action-profile { background: var(--mpb-color-peche); }
    body .site-header.site-header-pro .pro-header-action-icon { display: block; flex: none; }
    body .site-header.site-header-pro .pro-header-action-label { border: 0; clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; white-space: nowrap; width: 1px; }
    body .site-header.site-header-pro .pro-header-action .profile-public-action-status { background: var(--mpb-color-bordeaux); border-color: var(--mpb-color-fond); box-shadow: none; position: absolute; right: 1px; top: 1px; }
    body .site-header.site-header-pro .pro-header-action:focus-visible { outline: 2px solid var(--mpb-color-bordeaux); outline-offset: 3px; }
    body .site-header.site-header-pro:has(.pro-header-action) .mobile-nav-toggle { flex: 0 0 44px; height: 44px; min-height: 44px; width: 44px; }
    body .site-header.site-header-pro:has(.pro-header-action) .mobile-nav-toggle span { left: 13px; }
    body .site-header.site-header-pro:has(.pro-header-action) .mobile-nav-toggle span:first-child { top: 16px; }
    body .site-header.site-header-pro:has(.pro-header-action) .mobile-nav-toggle span:last-child { top: 27px; }
    body .site-header.site-header-pro.mobile-nav-is-open:has(.pro-header-action) .mobile-nav-toggle span { top: 21px; }
}

/* Shared public Pro scale. Private workspaces keep their compact UI scale. */
:is(.pro-community-landing, .pro-how-page, .pro-library-page,
    .pro-registration-page, .contact-page-professional, .pro-resource-article,
    .pro-resource-footer-cta, .pro-login-page, .pro-password-page, .mpb-mode-pro) {
    --pro-font-display: var(--font-display);
    --pro-font-heading: var(--font-heading);
    --pro-font-body: var(--font-body);
    --pro-title-size: clamp(2.25rem, 1.5rem + 2.1vw, 3.5rem);
    --pro-section-title-size: clamp(1.625rem, 1.2rem + 1.2vw, 2.25rem);
    --pro-card-title-size: clamp(1.0625rem, 1rem + .25vw, 1.25rem);
    --pro-title-line-height: 1.1;
    --pro-heading-line-height: 1.3;
    --pro-heading-letter-spacing: -.025em;
    --pro-body-size: .875rem;
    --pro-lead-size: clamp(.9375rem, .875rem + .2vw, 1.0625rem);
    --pro-small-size: .8125rem;
    --pro-label-size: .6875rem;
    --pro-number-size: clamp(2rem, 1.5rem + 1.5vw, 3rem);
    --pro-section-space: clamp(2.5rem, 2rem + 2vw, 4rem);
    --pro-ink: #302a27;
    --pro-copy: #65594f;
    --pro-accent: #985456;
    --pro-accent-hover: #804447;
    --pro-surface: #faf7f3;
    --pro-border: #e8ded5;
    --pro-pink: var(--pro-accent);
    --pro-pink-dark: var(--pro-accent-hover);
    font-family: var(--pro-font-body);
    font-size: var(--pro-body-size);
    line-height: 1.65;
}

:is(.pro-community-landing, .pro-how-page, .pro-library-page,
    .pro-registration-page, .contact-page-professional, .pro-resource-article,
    .pro-resource-footer-cta) .button {
    border-radius: 999px;
    box-shadow: none;
    font-family: var(--pro-font-body);
    font-size: var(--pro-small-size);
    font-weight: 600;
    letter-spacing: 0;
    line-height: 1.4;
    min-height: 46px;
    padding: 12px 22px;
    text-transform: none;
}

:is(.pro-community-landing, .pro-how-page, .pro-library-page,
    .pro-registration-page, .contact-page-professional, .pro-resource-article,
    .pro-resource-footer-cta) .button-accent {
    background: var(--pro-accent);
    border-color: var(--pro-accent);
    color: #fff;
}

:is(.pro-community-landing, .pro-how-page, .pro-library-page,
    .pro-registration-page, .contact-page-professional, .pro-resource-article,
    .pro-resource-footer-cta) .button-accent:hover {
    background: var(--pro-accent-hover);
    border-color: var(--pro-accent-hover);
}

/* Fallbacks for new public Pro sections; page layouts consume the same tokens. */
:is(.pro-community-landing, .pro-how-page, .pro-library-page,
    .pro-registration-page, .contact-page-professional, .pro-resource-article,
    .pro-resource-footer-cta) :where(h1, h2, h3, h4) {
    color: var(--pro-ink);
    font-family: var(--pro-font-heading);
    font-weight: 600;
    letter-spacing: var(--pro-heading-letter-spacing);
    line-height: var(--pro-heading-line-height);
    text-wrap: balance;
}

:is(.pro-community-landing, .pro-how-page, .pro-library-page,
    .pro-registration-page, .contact-page-professional, .pro-resource-article) :where(h1) {
    font-family: var(--pro-font-display);
    font-size: var(--pro-title-size);
    line-height: var(--pro-title-line-height);
}

/* Other public Pro screens use the canonical charter. The two approved
   marketing layouts deliberately do not carry this explicit surface class. */
.pro-public-surface {
    --pro-font-body: var(--font-body);
    --pro-font-heading: var(--pro-font-body);
    --pro-font-display: var(--pro-font-body);
    --pro-title-size: var(--mpb-font-size-hero);
    --pro-section-title-size: var(--mpb-font-size-section);
    --pro-card-title-size: var(--mpb-font-size-block);
    --pro-title-line-height: var(--mpb-font-line-hero);
    --pro-heading-line-height: var(--mpb-font-line-section);
    --pro-heading-letter-spacing: normal;
    --pro-body-size: var(--mpb-font-size-body);
    --pro-lead-size: var(--mpb-font-size-lead);
    --pro-small-size: var(--mpb-font-size-small);
    --pro-label-size: var(--mpb-font-size-label);
    --pro-number-size: var(--mpb-font-size-step);
    --pro-section-space: var(--mpb-section-space);
    --pro-ink: var(--mpb-color-encre);
    --pro-copy: var(--mpb-color-texte);
    --pro-accent: var(--mpb-color-bordeaux);
    --pro-accent-hover: var(--mpb-color-bordeaux);
    --pro-surface: var(--mpb-color-fond-poudre);
    --pro-border: var(--mpb-color-trait);
    --pro-cream: var(--mpb-color-fond-poudre);
    --pro-pink: var(--mpb-color-bordeaux);
    --pro-pink-dark: var(--mpb-color-bordeaux);
    --pro-pink-soft: var(--mpb-color-rose);
    background: var(--mpb-color-fond);
    color: var(--pro-copy);
    font-family: var(--pro-font-body);
    font-size: var(--pro-body-size);
    font-weight: 300;
    line-height: 1.65;
}

.pro-public-surface *,
.pro-public-surface *::before,
.pro-public-surface *::after { box-sizing: border-box; }

.pro-public-surface :is(h1, h2, h3, h4) {
    color: var(--pro-ink);
    font-family: var(--pro-font-body);
    font-style: normal;
    letter-spacing: normal;
    overflow-wrap: break-word;
}
.pro-public-surface h1 { font-size: var(--pro-title-size); font-weight: 200; line-height: 1.18; }
.pro-public-surface h2 { font-size: var(--pro-section-title-size); font-weight: 200; line-height: 1.25; }
.pro-public-surface :is(h3, h4) { font-size: 20px; font-weight: 600; line-height: 1.3; }
.pro-public-surface :is(p, li) { color: var(--pro-copy); font-size: 17px; font-weight: 300; line-height: 1.65; }
.pro-public-surface :is(strong, b, label) { font-weight: 600; }
.pro-public-surface .eyebrow {
    color: var(--pro-accent);
    font-family: var(--pro-font-body);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .16em;
    line-height: 16px;
    text-transform: uppercase;
}
.pro-public-surface .container,
.pro-public-surface.container {
    margin-inline: auto;
    max-width: 1240px;
    padding-inline: 64px;
    width: 100%;
}
.pro-public-surface .button {
    align-items: center;
    border: 0;
    border-radius: 999px;
    box-shadow: none;
    display: inline-flex;
    flex-direction: row;
    font-family: var(--pro-font-body);
    font-size: 13px;
    font-weight: 600;
    gap: 12px;
    justify-content: center;
    letter-spacing: .07em;
    line-height: 16px;
    max-width: 100%;
    min-height: 52px;
    min-width: 0;
    padding: 17px 24px;
    text-align: center;
    text-transform: uppercase;
    white-space: normal;
}
.pro-public-surface .button-accent,
.pro-public-surface .button-accent:hover { background: var(--pro-accent); color: var(--mpb-color-sur-bordeaux); }
.pro-public-surface .button-secondary,
.pro-public-surface .button-secondary:hover { background: var(--mpb-color-gris-bouton); color: var(--pro-ink); }
.pro-public-surface .button:hover { text-decoration: underline; text-underline-offset: 4px; transform: none; }
.pro-public-surface :is(a, button, input, select, textarea, summary):focus-visible { outline: 2px solid var(--pro-accent); outline-offset: 4px; }
.pro-public-surface :is(input, select, textarea) { font-family: var(--pro-font-body); font-weight: 300; }
.pro-public-surface a { color: var(--pro-accent); }

@media (max-width: 767px) {
    .pro-public-surface { --pro-title-size: clamp(32px, 7.5vw, 44px); --pro-section-title-size: 28px; }
    .pro-public-surface .container,
    .pro-public-surface.container { padding-inline: 24px; }
    .pro-public-surface :is(input, select, textarea) { font-size: 16px; }
}

/* Keep member labels consistent with the workspace on public Pro pages. */
body .site-header.site-header-pro .pro-member-navigation > a { letter-spacing: normal; text-transform: none; }

/* Keep the shared 1120px mobile breakpoint on every public Pro page. */
@media (min-width: 1121px) and (max-width: 1380px) {
    body .site-header.site-header-pro { gap: 12px; grid-template-columns: 160px minmax(0, 1fr) max-content; }
    body .site-header.site-header-pro .main-nav { max-width: 100%; min-width: 0; }
    body .site-header.site-header-pro .main-nav a { padding-inline: 8px; text-align: center; white-space: normal; }
    body .site-header.site-header-pro .nav-actions :is(.button, .pro-access-trigger) { font-size: 13px; padding-inline: 12px; }
    body .site-header.site-header-pro:has(.pro-admin-access-form) .nav-actions { gap: 6px; }
    body .site-header.site-header-pro:has(.pro-admin-access-form) .nav-actions .button { padding-inline: 8px; }
    body.brand-site:not(.member-area):not(.pro-marketing) .site-header-pro .nav-actions > .pro-public-site-link .pro-public-site-link-mark,
    body.brand-site:not(.member-area):not(.pro-marketing) .site-header-pro .nav-actions > .pro-public-site-link .pro-public-site-link-copy { display: none; }
    body.brand-site:not(.member-area):not(.pro-marketing) .site-header-pro .nav-actions > .pro-public-site-link .pro-public-site-link-compact-label { display: inline; font-size: 13px; font-weight: 600; line-height: 16px; }
}

/* The additional administration action needs the same room on wider laptops. */
@media (min-width: 1381px) and (max-width: 1600px) {
    body .site-header.site-header-pro:has(.pro-admin-access-form) { gap: 12px; grid-template-columns: 160px minmax(0, 1fr) max-content; }
    body .site-header.site-header-pro:has(.pro-admin-access-form) .main-nav { max-width: 100%; min-width: 0; }
    body .site-header.site-header-pro:has(.pro-admin-access-form) .main-nav a { padding-inline: 8px; text-align: center; white-space: normal; }
    body .site-header.site-header-pro:has(.pro-admin-access-form) .nav-actions .button { font-size: 13px; padding-inline: 12px; }
}