/* The approved pricing/home headline treatment for site and tool introductions.
   Explicit selectors keep client artwork, result titles and typography guides separate. */
:root {
    --mlr-hero-font-size: clamp(36px, 4.2vw, 60px);
}

:is(
    .home-page .hero h1.custom-hero-font-1,
    .pricing-main .pricing-intro-copy h1,
    .logo-compare-create-section .logo-compare-intro h1.custom-hero-font-1,
    body:not(.bt-delivery-mode) main.bt-page[data-brand-typography] .bt-intro h1.custom-hero-font-1,
    body:not(.logo-mockup-client-download) .logo-visualizer-intro h1.custom-hero-font-1,
    .logo-export-kit-section.is-tool-page .export-kit-hero h1.custom-hero-font-1,
    .favicon-generator-intro h1.custom-hero-font-1,
    .logo-bg-matcher-intro h1.custom-hero-font-1,
    .explore-page .explore-heading > h1,
    .tool-overview .tool-overview-hero h1,
    .visual-identity-page .vi-hero h1,
    .faq-page .faq-hero-copy > h1,
    .brand-brief-owner .brand-brief-overview > h2,
    .subscription-success-page .subscription-success-header > h1,
    .legal-page h2.custom-hero-font-1
) {
    color: #241e35;
    /* Override the shared heading rule while keeping this fallback title-only. */
    font-family: "Lexend", "Lexend Headline Fallback", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
    font-size: var(--mlr-hero-font-size);
    font-weight: 600;
    letter-spacing: -.055em;
    line-height: 1.12;
    margin-inline: auto;
    max-width: 860px;
    text-transform: none;
}

/* Named accents avoid recoloring spans created by text entrance animations. */
:is(
    .home-page .hero h1.custom-hero-font-1 .home-hero-gradient-text,
    .pricing-main .pricing-intro-copy h1 > span,
    .logo-compare-create-section .logo-compare-intro h1 .home-heading-gradient,
    body:not(.bt-delivery-mode) main.bt-page[data-brand-typography] .bt-intro h1 .home-heading-gradient,
    body:not(.logo-mockup-client-download) .logo-visualizer-intro h1 .home-heading-gradient,
    .logo-export-kit-section.is-tool-page .export-kit-hero h1 .home-heading-gradient,
    .favicon-generator-intro h1 .home-heading-gradient,
    .logo-bg-matcher-intro h1 .home-heading-gradient,
    .explore-page .explore-heading > h1 .home-heading-gradient,
    .tool-overview .tool-overview-hero h1 > span,
    .visual-identity-page .vi-hero h1 > span,
    .faq-page .faq-hero-copy > h1 .faq-heading-gradient,
    .brand-brief-owner .brand-brief-overview > h2 .home-heading-gradient,
    .subscription-success-page .subscription-success-header > h1 > span,
    .legal-page h2.custom-hero-font-1 .home-heading-gradient
) {
    animation: none;
    background: none;
    color: #6b39f4;
    display: inline;
    margin: 0;
    padding: 0;
    vertical-align: baseline;
    -webkit-text-fill-color: currentColor;
}

@media (max-width: 374px) {
    :root { --mlr-hero-font-size: 32px; }
}