/* The signature ink shared by landing copy and public-page navigation. */
.wm-landing, .wm-public-page {
    --wl-ink-gradient: linear-gradient(90deg, #624984 0%, #20202b 50%, #624984 100%);
}

/* Keep existing solid colors for printing, high contrast, and older browsers. */
@media screen and (forced-colors: none) {
    @supports ((background-clip: text) or (-webkit-background-clip: text)) {
        html:not([data-wm-theme="dark"]) .wm-landing :where(
            .wl-ink-text,
            [data-signature-word],
            .wl-signature-question p,
            .wl-hero-badge-copy,
            .wl-story-heading h3,
            .wl-story-thought strong,
            .wl-bridge-line--promise > span:not(.wl-bridge-blank),
            .wl-content-total dt,
            .wl-guide-copy h3,
            #learning-fit-title,
            .wl-fit-question h3,
            .wl-fit-invitation-title,
            .wl-flow-heading h2,
            .wl-flow-copy h3,
            .wl-makers-heading h2,
            .wl-makers-lead,
            .ws-proof-copy h3,
            #faq-title,
            .wl-faq-question,
            .wl-literacy-description > span,
            .wl-literacy-test-heading p,
            .wl-literacy-test-lines--formula > span,
            .wl-literacy-language-pair > span,
            .wl-literacy-language-lines > div:not(.wl-literacy-language-pair),
            .wl-literacy-practice-heading h3,
            .wl-app-focus-copy h2,
            .wl-app-focus-app-name,
            .wl-app-focus-qa-question,
            .wl-concept-story-heading h2,
            .wl-concept-story-lead strong,
            .wl-concept-story-step > strong,
            .wl-concept-story-method h3,
            .wl-concept-story-description strong,
            .wl-concept-story-method:not(.wl-concept-story-method--blank) .wl-concept-story-note strong,
            .wl-routine-situations li > span,
            .wl-usage-examples h4,
            .wm-pricing-heading-spacing .inline-flex,
            .wm-pricing-price-value,
            .wm-pricing-discount-amount,
            .wm-pricing-comparison-grid .py-2.text-slate-300.border-b,
            .wm-pricing-period-suffix,
            .wm-pricing-list-price,
            .wm-pricing-mobile-row-value-muted,
            .wm-pricing-mobile-row-value:not(.wm-pricing-mobile-row-value-muted),
            [x-text="item.name"],
            [x-text="item.role"],
            .wm-index-cta-title-line:not(:has(.wm-index-word-slot)),
            .wm-index-cta-title-line > span:not(.wm-index-word-slot),
            .wm-site-footer-brand-copy > span
        ),
        html:not([data-wm-theme="dark"]) .wm-public-page .wm-app-install :is(h1, h2) {
            background-image: var(--wl-ink-gradient);
            -webkit-background-clip: text;
            background-clip: text;
            -webkit-text-fill-color: transparent;
        }

        /* Override the legacy profile palette only on these text-only labels. */
        html:not([data-wm-theme="dark"]) .wm-landing :is(
            #usage-title,
            .wm-index-testimonial-quote,
            .wm-pricing-heading-title,
            .wm-membership-plan-title
        ) {
            background-image: var(--wl-ink-gradient) !important;
            -webkit-background-clip: text;
            background-clip: text;
            -webkit-text-fill-color: transparent;
        }

        /* The muted prices and unavailable values retain their hierarchy. */
        html:not([data-wm-theme="dark"]) .wm-landing .wm-pricing-period-suffix { opacity: .72; }
        html:not([data-wm-theme="dark"]) .wm-landing :is(.wm-pricing-list-price, .wm-pricing-mobile-row-value-muted) { opacity: .58; }

        /* Clip the labels, never the account buttons or the logo artwork. */
        html:not([data-wm-theme="dark"]) :is(.wm-landing, .wm-public-page) #site-header :where(
            .wm-index-brand-copy > div,
            .wm-site-desktop-links a:not(:hover):not(:focus-visible),
            .wm-site-mobile-links > li > a:not(.wm-index-brand-mark),
            .wm-index-auth-link > span,
            .wm-index-membership-link > span
        ) {
            background-image: var(--wl-ink-gradient);
            -webkit-background-clip: text;
            background-clip: text;
            -webkit-text-fill-color: transparent;
        }

        html:not([data-wm-theme="dark"]) :is(.wm-landing, .wm-public-page) #site-header :is(
            .wm-index-auth-link, .wm-index-membership-link
        ):is(:hover, :focus-visible) > span {
            background-image: none;
            -webkit-text-fill-color: currentColor;
        }

        /* Preserve filled blanks, accent words and embedded math/SVG artwork. */
        html:not([data-wm-theme="dark"]) .wm-landing :is(
            .wm-pricing-mobile-discount-badge,
            .wm-pricing-mobile-period-inline,
            .wm-pricing-mobile-list-price,
            .wm-pricing-discount-badge,
            .wl-literacy-word-blank,
            .wl-literacy-test-heading strong,
            .wl-literacy-test-lines mjx-container,
            .wl-literacy-test-lines svg
        ) {
            -webkit-text-fill-color: currentColor;
        }

        /* Match the gradient to the title's letters, not the entire section width. */
        .wm-landing #learning-fit-title {
            width: fit-content;
            max-width: 100%;
        }

        /* These child accents use a solid purple rather than their own gradient. */
        html:not([data-wm-theme="dark"]) .wm-landing .wl-flow-heading h2 span,
        html:not([data-wm-theme="dark"]) .wm-landing .ws-proof-copy h3 span {
            -webkit-text-fill-color: currentColor;
        }

        html:not([data-wm-theme="dark"]) .wm-landing .wl-faq summary:hover .wl-faq-question,
        html:not([data-wm-theme="dark"]) .wm-landing .wl-faq details[open] .wl-faq-question {
            background-image: none;
            -webkit-text-fill-color: currentColor;
        }
    }
}