/* Shared marketing primitives, using the same semantic palette as the app. */
.marketing-section { padding: clamp(3rem, 6vw, 5rem) clamp(1rem, 3vw, 2rem); }
.marketing-inner { width: min(100%, 72rem); margin: 0 auto; }
.marketing-heading { max-width: 42rem; text-align: center; margin: 0 auto 2.5rem; }
.marketing-kicker { color: var(--accent-hover); font-size: .7rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.marketing-title { font-size: clamp(1.75rem, 3.5vw, 2.75rem); font-weight: 850; line-height: 1.18; letter-spacing: -.04em; color: var(--text-primary); margin: .75rem 0 1.25rem; }
.marketing-lead { font-size: 1rem; color: var(--text-secondary); line-height: 1.75; margin: 0 0 1.75rem; }
.marketing-heading .marketing-lead { margin-bottom: 0; }
.marketing-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; }
.marketing-btn { display: inline-flex; align-items: center; justify-content: center; gap: .6rem; min-height: 44px; padding: .75rem 1.15rem; border: 1px solid var(--border-strong); border-radius: .75rem; color: var(--text-primary); background: var(--surface-primary); font-size: .85rem; font-weight: 750; text-decoration: none; text-align: center; }
.marketing-btn:hover { border-color: var(--accent-primary); color: var(--accent-hover); text-decoration: none; }
.marketing-btn--primary { background: var(--accent-action); border-color: var(--accent-action); color: var(--text-on-accent); box-shadow: var(--shadow-card); }
.marketing-btn--primary:hover { background: var(--accent-action-hover); border-color: var(--accent-action-hover); color: var(--text-on-accent); }
.marketing-btn--quiet { background: transparent; border-color: transparent; }
.marketing-card { min-width: 0; padding: 1.5rem; border: 1px solid var(--border-subtle); border-radius: 1rem; background: var(--surface-primary); box-shadow: var(--shadow-card); }
.marketing-card h3 { font-size: 1rem; font-weight: 800; margin: 0 0 .65rem; }
.marketing-card p { font-size: .85rem; color: var(--text-secondary); line-height: 1.7; margin: 0; }
.marketing-card a, .final-cta a:not(.marketing-btn) { color: var(--accent-hover); text-underline-offset: .2em; }
.marketing-icon { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin-bottom: 1.25rem; border-radius: .75rem; background: var(--surface-accent); color: var(--accent-hover); font-size: 1.6rem; }
.landing-page a:focus-visible, .auth-layout a:focus-visible, .auth-layout button:focus-visible { outline: 2px solid var(--accent-primary); outline-offset: 3px; box-shadow: 0 0 0 4px var(--focus-ring); }
.marketing-skip { position: fixed; z-index: 1001; top: .75rem; left: 1rem; transform: translateY(-200%); background: var(--surface-primary); color: var(--text-primary); border: 1px solid var(--accent-primary); border-radius: .5rem; padding: .75rem; }
.marketing-skip:focus { transform: none; }
.landing-main:focus { outline: none; }
.landing-page section[id] { scroll-margin-top: 6rem; }
/* Native buttons retain the player's matching, highlight and popover styles. */
[data-landing-story] .vocab-word--preview { appearance: none; font: inherit; line-height: inherit; background: transparent; border-top: 0; border-right: 0; border-left: 0; min-height: 44px; }
[data-landing-story] .vocab-word--preview:focus-visible { outline: 2px solid var(--story-gold); outline-offset: 2px; }
[data-landing-hint] > .word-popover { display: none; }
[data-landing-hint]:is(:hover, :focus-within):not([data-hint-dismissed]) > .word-popover { display: block; }
[data-landing-story] [data-landing-hint][data-hint-dismissed] > .word-popover { visibility: hidden; opacity: 0; pointer-events: none; }
@media (max-width: 520px) { .marketing-actions { align-items: stretch; flex-direction: column; } }