/* ============================================================================
   download.css
   Rules unique to /download/ and /get/. Everything shared with the landing
   page lives in site-shell.css, which this file assumes is already loaded.

   The page used to be a 560px centred column with its own buttons, its own
   headings and its own footer, which made arriving from / feel like landing on
   another site. It now uses the same shell; what stays local is the centred
   hero, since this page has exactly one job.
   ========================================================================= */

.dl-hero {
    position: relative;
    overflow: hidden;
    padding-block: clamp(44px, 7vw, 92px) clamp(48px, 7vw, 84px);
    /* Same ambient light as the landing hero, pink only. The teal that used
       to sit in the bottom-right read as a second, unrelated brand colour. */
    background:
        radial-gradient(90% 65% at 50% -8%, rgba(254, 44, 85, 0.16) 0%, transparent 66%),
        var(--dc-bg);
}

.dl-glow {
    position: absolute;
    top: -180px;
    left: 50%;
    width: min(760px, 110vw);
    height: 460px;
    transform: translateX(-50%);
    background: radial-gradient(closest-side, rgba(254, 44, 85, 0.22), transparent 70%);
    filter: blur(30px);
    pointer-events: none;
}

.dl-hero-inner {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.dl-icon {
    width: 96px;
    height: 96px;
    border-radius: 24px;
    display: block;
    object-fit: cover;
    box-shadow: 0 26px 54px -20px rgba(254, 44, 85, 0.62);
    margin-bottom: 26px;
}

.dl-title { margin-top: 18px; max-width: 16ch; }
.dl-lede { margin-top: 20px; }

/* The store buttons are the point of this page, so let the pair take its full
   460px rather than shrinking to fit its own text as a flex item would. */
.dl-stores { margin-top: 34px; width: 100%; display: flex; justify-content: center; }
.dl-stores .dc-stores { width: 100%; }

.dl-meta { margin-top: 26px; justify-content: center; }
.dl-browse { margin-top: 24px; }

/* ---------------------------------------------------------------- steps --- */
/* Horizontal rows here rather than the landing page's three columns: this page
   is opened on a phone far more often than not, and a row keeps the number
   beside its step rather than stacked above it. */

.dl-steps { display: grid; gap: 12px; max-width: 780px; margin-inline: auto; }

.dl-step {
    display: flex;
    gap: 18px;
    align-items: flex-start;
    padding: 22px 24px;
    border: 1px solid var(--dc-line);
    border-radius: var(--dc-radius);
    background: var(--dc-surface);
    transition: border-color .2s ease, background-color .2s ease;
}
.dl-step:hover { border-color: var(--dc-line-strong); background: var(--dc-surface-2); }
.dl-step .dc-h3 { margin-bottom: 6px; }

.dl-step-num {
    display: grid;
    place-items: center;
    flex: none;
    width: 38px;
    height: 38px;
    border-radius: 11px;
    font-size: 15px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    color: var(--dc-pink);
    background: rgba(254, 44, 85, 0.1);
    border: 1px solid rgba(254, 44, 85, 0.2);
}

/* ----------------------------------------------------------- responsive --- */

@media (max-width: 620px) {
    .dl-icon { width: 82px; height: 82px; border-radius: 21px; margin-bottom: 20px; }
    .dl-step { padding: 18px 18px; gap: 14px; }
}

/* Mobile squaring: see the MOBILE block at the foot of site-shell.css. */
@media (max-width: 620px) {
    .dl-step {
        border-radius: 0;
        border-left: 0;
        border-right: 0;
        margin-inline: -20px;
    }
}