/* The landing page uses the shared palette, filters, deck items, and card tiles. */
.landing-hero h1,
.landing-row-heading h2,
.landing-tags-intro h2,
.landing-section-heading h2,
.landing-salt-copy h2,
.landing-cta-inner h2,
.landing-tags-heading h3 {
    font-family: var(--font-display);
    font-weight: 400;
    font-synthesis: none;
    letter-spacing: -.035em;
    line-height: 1.12;
}

.landing-page .eyebrow {
    margin: 0 0 1.05rem;
    color: var(--focus);
    font-size: .625rem;
    font-weight: 750;
    letter-spacing: .16em;
}

.landing-hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding-block: 3.375rem 2.875rem;
}

.landing-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-image: linear-gradient(90deg, transparent 15%, var(--canvas) 100%), url('/static/images/maelstrom_potal-1672x941.webp');
    background-position: center;
    background-size: cover;
    transform: scaleX(-1);
    filter: saturate(.55);
    opacity: .14;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 15%, #000 45%, transparent 100%);
    mask-image: linear-gradient(to bottom, transparent 0%, #000 15%, #000 45%, transparent 100%);
}

:root[data-theme="dark"] .landing-hero::before { opacity: .22; }
.landing-hero-copy { padding-block: .75rem; }
.landing-hero h1 { max-width: 53rem; margin: 0; font-size: clamp(2.625rem, 4.6vw, 4.125rem); }
.landing-hero h1 em { color: var(--focus); font-style: normal; }
.landing-lead { max-width: 41.25rem; margin: 1.375rem 0 0; font-size: .9375rem; line-height: 1.85; color: var(--muted); }
.landing-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.5625rem; }
.landing-fineprint { margin: .875rem 0 0; font-size: .625rem; color: var(--muted); }
.landing-decks-section { padding-block: .625rem 2.6875rem; }
.landing-row-heading { margin-bottom: 1.3125rem; }
.landing-row-heading h2 { margin: 0; font-size: 2rem; line-height: 1.2; letter-spacing: -.025em; }
.landing-row-heading .eyebrow { margin-bottom: .5625rem; }
.landing-empty { margin: 0; color: var(--muted); }
.landing-empty a { color: var(--focus); }
.landing-features { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.75rem; padding-block: 2.625rem 2.8125rem; border-top: 1px solid var(--line); }
.landing-feature-icon { margin-bottom: .875rem; color: var(--focus); }
.landing-features h3 { margin: 0 0 .5rem; font-size: .875rem; letter-spacing: -.025em; }
.landing-features p { margin: 0; color: var(--muted); font-size: .75rem; line-height: 1.8; }
.landing-tags-section { padding-block: 4.0625rem 4.5rem; border-top: 1px solid var(--line); background: color-mix(in srgb, var(--surface) 50%, var(--canvas)); }
.landing-tags-intro { display: grid; grid-template-columns: 1fr 1fr; gap: 4.375rem; align-items: center; }
.landing-tags-intro h2, .landing-section-heading h2 { margin: 0; font-size: clamp(2rem, 3.2vw, 2.75rem); }
.landing-tags-intro > p, .landing-section-heading > p:not(.eyebrow) { color: var(--muted); font-size: .875rem; line-height: 1.85; }
.landing-tags-panel { margin-top: 2rem; padding: 1.5625rem 1.75rem 0; border: 1px solid var(--line); border-radius: .6rem; background: var(--surface); }
.landing-tags-heading { display: flex; align-items: center; justify-content: space-between; gap: 1.25rem; margin-bottom: 1.25rem; }
.landing-tags-heading h3 { margin: 0; font-size: 1.5rem; }
.landing-tiny-label { color: var(--muted); font-size: .5625rem; letter-spacing: .1em; text-transform: uppercase; }
.all-tags { display: flex; flex-wrap: wrap; gap: .5625rem .5rem; margin: 0 0 1.625rem; padding: 0; list-style: none; }
.all-tags li { max-width: 100%; padding: .375rem .6875rem; border: 1px solid var(--line); border-radius: 1.25rem; background: color-mix(in srgb, var(--surface) 50%, var(--canvas)); font-size: .6875rem; line-height: 1.4; }
.landing-custom-tags { display: flex; align-items: center; gap: .75rem; padding-block: 1.25rem; border-top: 1px solid var(--line); }
.landing-custom-tags svg { color: var(--focus); }
.landing-custom-tags p { margin: 0; color: var(--muted); font-size: .6875rem; line-height: 1.8; }
.landing-custom-tags strong { color: var(--text); font-weight: 650; }
.landing-legends-section { padding-block: 3.375rem 3.625rem; border-top: 1px solid var(--line); background: var(--surface); }
.landing-legends-section h2 { font-size: 1.9375rem; }
.landing-legends-row { align-items: flex-start; padding-inline: 0; scroll-padding-inline: 0; }
.landing-legends-row .unified-card-tile { background: transparent; }
.landing-filters-section { padding-block: 4rem; border-top: 1px solid var(--line); }
.landing-filters-layout { display: grid; grid-template-columns: .85fr 1.15fr; gap: 4.375rem; align-items: center; }
.landing-section-heading > p:not(.eyebrow) { margin: 1.25rem 0 0; }
.landing-filter-panel { min-width: 0; padding: 1.5rem; border: 1px solid var(--line); border-radius: .6rem; background: var(--surface); }
.landing-filter-panel form { margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.landing-filter-panel .card-search-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.landing-salt-section { padding-block: 4.5rem 4.75rem; border-top: 1px solid var(--line); background: color-mix(in srgb, var(--surface) 30%, var(--canvas)); scroll-margin-top: 3.6rem; }
.landing-salt-layout { display: grid; grid-template-columns: .85fr 1.15fr; align-items: center; gap: 5rem; }
.landing-salt-copy h2 { margin: 0; font-size: clamp(2.125rem, 3.3vw, 2.875rem); }
.landing-salt-copy h2 em { color: var(--focus); font-style: normal; }
.landing-salt-lead { max-width: 26rem; margin: 1.25rem 0 1.5rem; color: var(--muted); font-size: .875rem; line-height: 1.85; }
.landing-salt-example { min-width: 0; }
.landing-salt-card-stack { position: relative; isolation: isolate; width: min(52%, 14rem); margin: 1.25rem auto 1.5rem; }
.landing-salt-card-stack > img { display: block; width: 100%; height: auto; border-radius: .6rem; box-shadow: 0 4px 12px #00000020; }
.landing-salt-card-image { position: relative; z-index: 1; }
.landing-salt-card-back { position: absolute; inset: 0; }
.landing-salt-card-back.is-left { transform: translate(-30%, .5rem) rotate(-12deg) scale(.95); }
.landing-salt-card-back.is-right { transform: translate(30%, .5rem) rotate(12deg) scale(.95); }
.landing-cta-section { padding-block: 2.75rem; border-top: 1px solid var(--line); background: var(--surface); }
.landing-cta-inner { display: flex; align-items: center; justify-content: space-between; gap: 2rem; }
.landing-cta-inner h2 { margin: 0; font-size: 1.875rem; }
.landing-cta-inner p { margin: .5625rem 0 0; color: var(--muted); font-size: .75rem; }
.landing-cta-inner > .button { flex-shrink: 0; }

@media (max-width: 70rem) {
    .landing-salt-layout { gap: 2.5rem; }
}

@media (max-width: 65.625rem) {
    .landing-tags-intro, .landing-filters-layout { gap: 2.5rem; }
}

@media (max-width: 47.5rem) {
    .landing-hero { padding-block: 2.6875rem 2.25rem; }
    .landing-hero::before { opacity: .1; background-position: 55% center; }
    :root[data-theme="dark"] .landing-hero::before { opacity: .17; }
    .landing-hero h1 { font-size: 2.75rem; }
    .landing-lead { margin-top: 1.1875rem; font-size: .8125rem; }
    .landing-decks-section { padding-block: .25rem 1.875rem; }
    .landing-row-heading { margin-bottom: 1.0625rem; }
    .landing-row-heading h2 { font-size: 1.6875rem; }
    .landing-features { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.75rem 1.25rem; padding-block: 2rem; }
    .landing-tags-section, .landing-filters-section { padding-block: 2.5rem; }
    .landing-tags-intro, .landing-filters-layout { grid-template-columns: 1fr; gap: 1.5rem; }
    .landing-tags-intro > p { margin: 0; }
    .landing-tags-intro h2, .landing-section-heading h2 { font-size: 2.125rem; }
    .landing-tags-panel { margin-top: 1.625rem; padding: 1.375rem 1.1875rem 0; }
    .landing-tags-heading { display: block; margin-bottom: 1.125rem; }
    .landing-tiny-label { display: block; margin-top: .4375rem; }
    .all-tags { gap: .5rem .375rem; margin-bottom: 1.4375rem; }
    .all-tags li { padding: .375rem .5625rem; font-size: .625rem; }
    .landing-custom-tags { align-items: flex-start; padding-block: 1.125rem; }
    .landing-custom-tags svg { margin-top: .125rem; }
    .landing-legends-section { padding-block: 2.375rem 2.5rem; }
    .landing-legends-section h2 { overflow-wrap: anywhere; }
    .landing-legends-row > .unified-card-tile { flex-basis: 11rem; }
    .landing-filter-panel { padding: 1.25rem; }
    .landing-filter-panel .card-search-grid { grid-template-columns: minmax(0, 1fr); }
    .landing-salt-section { padding-block: 2.5rem 3.75rem; }
    .landing-salt-layout { grid-template-columns: 1fr; gap: 2rem; }
    .landing-salt-copy h2 { font-size: 2.125rem; }
    .landing-salt-lead { max-width: 27rem; margin-block: 1rem 1.25rem; font-size: .8125rem; }
    .landing-salt-card-stack { width: min(52%, 12rem); }
    .landing-cta-inner { align-items: flex-start; flex-direction: column; gap: 1.5rem; }
}

@media (max-width: 22.5rem) {
    .landing-hero h1 { font-size: 2.5rem; }
    .landing-row-heading h2 { font-size: 1.5625rem; }
}