/* ══════════════════════════════════════════════════
   DOWNLOAD PAGE  (/download)
   Mobile-first landing page for store traffic. Layered on top of
   style.css, so it inherits the cosmic tokens (--bg, --purple, --orange…),
   the Nunito/Space Grotesk pairing, the starfield and the fixed footer.

   Brand Identity Guidelines v1.3:
     · glass surfaces  — 5–10% fill, 10–15% white border, blur 12–20px
     · corners         — 12–24px radius
     · type            — Nunito 700–900 headings, Space Grotesk 400–500 body
     · body text       — white at 80% / 45% tiers on dark
     · motion          — ease-out 200–400ms, subtle float and pulse only
   ══════════════════════════════════════════════════ */

.dl {
    position: relative;
    z-index: 2;
    padding: 2.5rem 0 1rem;
}

.dl-wrap {
    width: 100%;
    max-width: 1040px;
    margin: 0 auto;
    padding: 0 1.25rem;
}
/* Narrower measure for anything the reader actually reads. */
.dl-wrap--text { max-width: 620px; }

.dl-section { padding: 3rem 0; }

.dl-section-head {
    text-align: center;
    margin-bottom: 2rem;
}
.dl-eyebrow {
    font-size: .68rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .12em;
    color: var(--orange);
    margin-bottom: .6rem;
}
.dl-h2 {
    font-family: var(--font-h);
    font-size: clamp(1.5rem, 5.5vw, 2rem);
    font-weight: 900;
    color: #fff;
    line-height: 1.2;
    margin: 0;
}
.dl-sub {
    color: rgba(255,255,255,.62);
    font-size: .95rem;
    line-height: 1.7;
    margin: .75rem auto 0;
    max-width: 480px;
}

/* ══ Hero ══ */
.dl-hero { text-align: center; }

.dl-mark {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 132px;
    margin-bottom: 1.5rem;
}
/* Scale the shared logo ring down for a page that leads with copy. */
.dl-mark .hero-logo-wrap { padding: 22px; margin: -22px; }
.dl-mark .hero-logo-ring { width: 92px; height: 92px; border-radius: 26px; }
.dl-mark .hero-logo-ring::before { border-radius: 29px; }
.dl-mark .hero-logo-ring::after  { inset: -14px; border-radius: 42px; }
.dl-mark .hero-logo-inner        { border-radius: 24px; padding: 9px; }
.dl-mark .od-1 { --r: 64px; }
.dl-mark .od-2 { --r: 67px; }
.dl-mark .od-3 { --r: 65px; }

/* Wordmark — brand colour rendering: get/plain white, X purple gradient
   with glow, dot orange, ai orange→gold. Sized down from the homepage hero. */
.dl-wordmark {
    display: block;
    white-space: nowrap;
    line-height: 1.05;
    margin-bottom: 1.1rem;
}
.dl-wordmark .wm-get,
.dl-wordmark .wm-xplain,
.dl-wordmark .wm-x,
.dl-wordmark .wm-dot,
.dl-wordmark .wm-ai {
    font-size: clamp(2.1rem, 10vw, 3rem);
}

.dl-tagline {
    font-family: var(--font-h);
    font-size: clamp(1.55rem, 7vw, 2.4rem);
    font-weight: 900;
    color: #fff;
    line-height: 1.15;
    margin: 0 0 1rem;
}
.dl-tagline .dl-grad {
    background: linear-gradient(135deg, var(--purple), var(--blue));
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    background-clip: text;
}
.dl-tagline .dl-orange { color: var(--orange); }

.dl-lede {
    color: rgba(255,255,255,.72);
    font-size: 1rem;
    line-height: 1.75;
    margin: 0 auto 1.75rem;
    max-width: 460px;
}

/* ══ Store badges ══ */
.dl-stores {
    display: flex;
    flex-wrap: wrap;
    gap: .85rem;
    justify-content: center;
    align-items: center;
}
/* style.css stretches store badges to width:100% under 768px for the homepage
   CTA strip, which would force one badge per row here. Let them keep their
   natural width instead: the pair fits one line down to ~380px, and below that
   flex-wrap stacks them centred on its own. */
.dl-stores .store-badge-link { width: auto; }

.dl-trust {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: .5rem .85rem;
    margin-top: 1.5rem;
    font-size: .8rem;
    font-weight: 600;
    color: rgba(255,255,255,.55);
}
.dl-trust-dot {
    width: 3px; height: 3px; border-radius: 50%;
    background: rgba(255,255,255,.25);
}
.dl-rating {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    color: var(--orange);
    font-weight: 700;
}
.dl-rating svg { flex-shrink: 0; }

/* ══ Stats ══ */
.dl-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .75rem;
    margin-top: 3rem;
}
.dl-stat {
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 18px;
    backdrop-filter: blur(14px);
    padding: 1.1rem .75rem;
    text-align: center;
}
.dl-stat-num {
    display: block;
    font-family: var(--font-h);
    font-size: 1.75rem; font-weight: 900;
    line-height: 1;
    background: linear-gradient(135deg, var(--orange), #FFD700);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    background-clip: text;
}
.dl-stat-label {
    display: block;
    margin-top: .4rem;
    font-size: .68rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .08em;
    color: rgba(255,255,255,.5);
}

/* ══ Screenshot strip ══
   Scroll-snaps horizontally on phones and becomes a three-up row from
   tablet width. The strip is deliberately full-bleed so the next card
   peeks in and invites the swipe. */
.dl-strip {
    display: flex;
    gap: 1rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: .5rem 1.25rem .9rem;
    margin: 0 -1.25rem;
}
.dl-strip::-webkit-scrollbar { display: none; }

.dl-shot {
    flex: 0 0 auto;
    width: min(63vw, 236px);
    scroll-snap-align: center;
    text-align: center;
}
.dl-shot-phone {
    position: relative;
    background: linear-gradient(160deg, #18182c, #28284a);
    border-radius: 34px;
    padding: 8px;
    box-shadow:
        0 24px 60px rgba(0,0,0,.5),
        0 0 0 2px rgba(255,255,255,.12),
        inset 0 0 0 1px rgba(255,255,255,.06);
}
.dl-shot-notch {
    width: 60px; height: 15px;
    background: #0a0a14;
    border-radius: 0 0 12px 12px;
    margin: 0 auto 3px;
}
.dl-shot-screen {
    border-radius: 27px;
    overflow: hidden;
    background: var(--bg);
    line-height: 0;
}
.dl-shot-screen img { width: 100%; height: auto; display: block; }

.dl-shot-title {
    font-family: var(--font-h);
    font-size: 1rem; font-weight: 800;
    color: #fff;
    margin: 1rem 0 .35rem;
}
.dl-shot-desc {
    font-size: .82rem;
    color: rgba(255,255,255,.58);
    line-height: 1.6;
    margin: 0;
}

.dl-swipe-hint {
    text-align: center;
    font-size: .72rem; font-weight: 600;
    letter-spacing: .06em; text-transform: uppercase;
    color: rgba(255,255,255,.3);
}

/* ══ Feature cards ══ */
.dl-features {
    display: grid;
    grid-template-columns: 1fr;
    gap: .85rem;
}
.dl-feature {
    display: flex;
    align-items: flex-start;
    gap: .9rem;
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 18px;
    backdrop-filter: blur(14px);
    padding: 1.1rem 1.15rem;
    transition: transform .28s ease-out, box-shadow .28s ease-out, border-color .28s ease-out;
}
.dl-feature:hover {
    transform: translateY(-3px);
    border-color: rgba(var(--dl-c), .4);
    box-shadow: 0 18px 40px rgba(0,0,0,.35);
}
.dl-feature-icon {
    width: 40px; height: 40px;
    border-radius: 13px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    background: rgba(var(--dl-c), .16);
    border: 1px solid rgba(var(--dl-c), .32);
    color: rgb(var(--dl-c));
}
.dl-feature h3 {
    font-family: var(--font-h);
    font-size: 1rem; font-weight: 800;
    color: #fff;
    margin: .1rem 0 .3rem;
}
.dl-feature p {
    font-size: .85rem;
    color: rgba(255,255,255,.6);
    line-height: 1.65;
    margin: 0;
}

/* ══ Safety panel ══ */
.dl-safe {
    background: rgba(16,185,129,.07);
    border: 1px solid rgba(16,185,129,.25);
    border-radius: 22px;
    backdrop-filter: blur(14px);
    padding: 1.5rem 1.25rem;
}
.dl-safe-head {
    display: flex;
    align-items: center;
    gap: .6rem;
    justify-content: center;
    font-family: var(--font-h);
    font-size: 1.05rem; font-weight: 800;
    color: #fff;
    margin-bottom: 1.1rem;
}
.dl-safe-head svg { color: var(--green); flex-shrink: 0; }
.dl-safe-list {
    list-style: none;
    display: grid;
    grid-template-columns: 1fr;
    gap: .65rem;
    margin: 0;
}
.dl-safe-list li {
    display: flex;
    align-items: flex-start;
    gap: .55rem;
    font-size: .875rem;
    color: rgba(255,255,255,.72);
    line-height: 1.55;
}
.dl-safe-tick {
    width: 18px; height: 18px;
    border-radius: 6px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0; margin-top: 1px;
    background: rgba(16,185,129,.16);
    border: 1px solid rgba(16,185,129,.35);
    color: #6ee7b7;
}

/* ══ Closing CTA ══ */
.dl-cta {
    position: relative;
    text-align: center;
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 24px;
    backdrop-filter: blur(16px);
    padding: 2.25rem 1.25rem 2rem;
    overflow: hidden;
}
.dl-cta::before {
    content: "";
    position: absolute;
    left: 50%; top: -30%;
    transform: translateX(-50%);
    width: 420px; height: 420px;
    max-width: 130%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(123,77,255,.4) 0%, rgba(245,166,35,.12) 45%, transparent 70%);
    filter: blur(55px);
    pointer-events: none;
}
.dl-cta > * { position: relative; z-index: 1; }
.dl-cta-mascot {
    width: 116px; height: auto;
    margin: 0 auto 1rem;
    display: block;
    animation: dlFloat 5s ease-in-out infinite;
}
@keyframes dlFloat {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-9px); }
}
.dl-cta h2 {
    font-family: var(--font-h);
    font-size: clamp(1.4rem, 6vw, 1.9rem);
    font-weight: 900;
    color: #fff;
    margin: 0 0 .6rem;
}
.dl-cta p {
    color: rgba(255,255,255,.65);
    font-size: .95rem;
    line-height: 1.7;
    margin: 0 auto 1.5rem;
    max-width: 380px;
}

.dl-more {
    text-align: center;
    margin-top: 2rem;
    font-size: .85rem;
    color: rgba(255,255,255,.45);
}
.dl-more a {
    color: #a78bfa;
    font-weight: 700;
    text-decoration: none;
    border-bottom: 1px solid rgba(167,139,250,.35);
    transition: color .2s ease-out, border-color .2s ease-out;
}
.dl-more a:hover { color: #c4b0ff; border-color: rgba(196,176,255,.7); }

/* ══════════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════════ */
/* Narrow phones: trim the badges and the gap just enough that the pair still
   reads as one row of two choices — inside the closing CTA card too, which has
   its own padding eating into the available width. */
@media (max-width: 480px) {
    .dl-stores { gap: .5rem; }
    .dl-stores .store-badge-appstore-img--cta,
    .dl-stores .store-badge-play-img--cta { height: 46px; }
    .dl-cta { padding-left: 1rem; padding-right: 1rem; }
}

@media (min-width: 576px) {
    .dl-stats { grid-template-columns: repeat(4, 1fr); }
    .dl-safe-list { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 768px) {
    .dl { padding-top: 3.5rem; }
    .dl-section { padding: 4rem 0; }
    .dl-mark { height: 152px; }
    .dl-mark .hero-logo-ring { width: 108px; height: 108px; border-radius: 30px; }
    .dl-mark .hero-logo-ring::before { border-radius: 33px; }
    .dl-mark .hero-logo-ring::after  { inset: -16px; border-radius: 48px; }
    .dl-mark .od-1 { --r: 74px; }
    .dl-mark .od-2 { --r: 77px; }
    .dl-mark .od-3 { --r: 75px; }

    /* Three-up, no scrolling — the swipe hint is only for touch widths. */
    .dl-strip {
        overflow: visible;
        justify-content: center;
        gap: 1.75rem;
        padding: .5rem 0 0;
        margin: 0;
    }
    .dl-shot { width: 216px; }
    .dl-swipe-hint { display: none; }

    .dl-features { grid-template-columns: 1fr 1fr; }
    .dl-cta { padding: 3rem 2rem 2.75rem; }
    .dl-cta-mascot { width: 140px; }
}

@media (min-width: 992px) {
    .dl-features { grid-template-columns: repeat(3, 1fr); }
    .dl-shot { width: 244px; }
}

@media (prefers-reduced-motion: reduce) {
    .dl-cta-mascot { animation: none; }
}

/* ══════════════════════════════════════════════════
   LIGHT THEME
   ══════════════════════════════════════════════════ */
[data-theme="light"] .dl-h2,
[data-theme="light"] .dl-tagline,
[data-theme="light"] .dl-shot-title,
[data-theme="light"] .dl-feature h3,
[data-theme="light"] .dl-safe-head,
[data-theme="light"] .dl-cta h2 { color: #110D2B; }

[data-theme="light"] .dl-sub,
[data-theme="light"] .dl-lede,
[data-theme="light"] .dl-shot-desc,
[data-theme="light"] .dl-feature p,
[data-theme="light"] .dl-safe-list li,
[data-theme="light"] .dl-cta p { color: #3D3760; }

[data-theme="light"] .dl-trust     { color: #3D3760; }
[data-theme="light"] .dl-trust-dot { background: rgba(61,55,96,.3); }
[data-theme="light"] .dl-swipe-hint { color: rgba(61,55,96,.45); }
[data-theme="light"] .dl-more      { color: #3D3760; }
[data-theme="light"] .dl-more a    { color: #5A2EE0; border-bottom-color: rgba(90,46,224,.35); }
[data-theme="light"] .dl-more a:hover { color: #4B2EAA; border-bottom-color: rgba(75,46,170,.7); }

[data-theme="light"] .dl-stat,
[data-theme="light"] .dl-feature,
[data-theme="light"] .dl-cta {
    background: #fff;
    border-color: rgba(123,77,255,.18);
    backdrop-filter: none;
    box-shadow: 0 4px 20px rgba(123,77,255,.06);
}
[data-theme="light"] .dl-feature:hover { box-shadow: 0 18px 44px rgba(123,77,255,.12); }
[data-theme="light"] .dl-stat-label { color: #3D3760; }

[data-theme="light"] .dl-safe {
    background: rgba(16,185,129,.06);
    border-color: rgba(16,185,129,.28);
    backdrop-filter: none;
}
[data-theme="light"] .dl-safe-tick { background: rgba(16,185,129,.12); border-color: rgba(16,185,129,.35); color: #059669; }

[data-theme="light"] .dl-cta::before {
    background: radial-gradient(circle, rgba(123,77,255,.16) 0%, rgba(245,166,35,.06) 45%, transparent 70%);
}

/* The screenshots are dark-UI captures, so the phone shell keeps its own
   light-mode chrome rather than inheriting the dark gradient. */
[data-theme="light"] .dl-shot-phone {
    background: linear-gradient(160deg, #e9e5f5, #d5cfe8);
    box-shadow:
        0 24px 60px rgba(123,77,255,.2),
        0 0 0 2px rgba(123,77,255,.14),
        inset 0 0 0 1px rgba(255,255,255,.7);
}
[data-theme="light"] .dl-shot-notch { background: #ddd8ec; }