/* =====================================================================
   Landing page: header links, small cards and the store banner for Remix
   Contests and the Store (media/js/landingExplore.js). Landing only:
   every rule is scoped to body.landing-page (landing.css is shared).
   ===================================================================== */

body.landing-page .landing-header .landing-nav {
    display: flex;
    align-items: center;
    gap: 22px;
    margin-left: auto;
    margin-right: 6px;
}
body.landing-page .landing-header .landing-nav[hidden] { display: none; }
body.landing-page .landing-nav a {
    color: #cbd5f5;
    font: 600 14px 'Outfit', -apple-system, 'Segoe UI', sans-serif;
    text-decoration: none;
    padding: 4px 0;
    border-bottom: 2px solid transparent;
}
body.landing-page .landing-nav a:hover { color: #fff; border-bottom-color: rgba(243, 138, 184, 0.8); }
body.landing-page .landing-nav a:focus-visible { outline: 2px solid rgba(243, 138, 184, 0.85); outline-offset: 3px; border-radius: 2px; }
body.landing-page .landing-nav a[hidden] { display: none; }

/* Small cards */
body.landing-page .explore-module { padding: 14px; }
body.landing-page .explore-cards { display: grid; gap: 14px; }
body.landing-page .explore-cards.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
body.landing-page .explore-card {
    display: grid;
    gap: 4px;
    padding: 16px 18px;
    border-radius: 12px;
    background: rgba(2, 6, 23, 0.4);
    border: 1px solid rgba(203, 213, 245, 0.14);
    color: inherit;
    text-decoration: none;
    transition: background 0.2s, border-color 0.2s;
}
body.landing-page .explore-card:hover { background: rgba(2, 6, 23, 0.6); border-color: rgba(203, 213, 245, 0.3); }
body.landing-page .explore-card:focus-visible { outline: 2px solid rgba(243, 138, 184, 0.85); outline-offset: 2px; }
body.landing-page .explore-card-title { font: 700 17px 'Outfit', -apple-system, 'Segoe UI', sans-serif; color: #fff; }
body.landing-page .explore-card-line { font-size: 14px; color: #cbd5f5; }
body.landing-page .explore-card-cta { font-size: 13px; font-weight: 700; color: #6ee7a8; margin-top: 2px; }

/* Store banner near the bottom */
body.landing-page .store-banner { padding: 0; overflow: hidden; }
body.landing-page .store-banner-card {
    display: flex;
    min-height: 220px;
    color: inherit;
    text-decoration: none;
    background: #1b2233 right center / cover no-repeat;
    border-radius: 16px;
}
body.landing-page .store-banner-body {
    display: grid;
    align-content: center;
    justify-items: start;
    gap: 8px;
    width: 100%;
    padding: 26px;
    background: linear-gradient(90deg, rgba(2, 6, 23, 0.94) 0%, rgba(2, 6, 23, 0.8) 50%, rgba(2, 6, 23, 0.2) 100%);
}
body.landing-page .store-banner-kicker { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #fcd34d; }
body.landing-page .store-banner-body h2 { margin: 0; font: 700 clamp(20px, 3vw, 28px) 'Outfit', -apple-system, 'Segoe UI', sans-serif; color: #fff; }
body.landing-page .store-banner-body p { margin: 0; max-width: 56ch; color: #cbd5f5; font-size: 15px; }
body.landing-page .store-banner-card:focus-visible { outline: 2px solid rgba(243, 138, 184, 0.85); outline-offset: 2px; }

@media (max-width: 700px) {
    body.landing-page .landing-header .landing-nav { gap: 14px; }
    body.landing-page .landing-nav a { font-size: 13px; }
    body.landing-page .explore-cards.two { grid-template-columns: 1fr; }
    body.landing-page .store-banner-body { padding: 18px; background: rgba(2, 6, 23, 0.82); }
}
@media (max-width: 420px) {
    body.landing-page .landing-account-name { display: none; }
}