/* ============================================================================
   site-shell.css
   The shared surface for the public marketing pages: the landing page (/) and
   the get-the-app page (/download/, /get/).

   WHY IT EXISTS
     Those two pages sit either side of the most important click on the site,
     and they used to be built from two unrelated sets of rules: one a 1200px
     two-column grid, the other a 560px centred column with its own buttons,
     its own section headings and its own footer. Landing to download read as a
     jump between two different products. Everything shared now lives here, so
     a change to a button or a section rhythm moves both pages at once.
     Page-specific rules stay in landing.css / download.css.

   NAMING
     Every class is prefixed dc-. Nothing here leans on theme.css tokens: these
     pages are always dark, and the palette below is tuned for that rather than
     inherited from the app chrome.
   ========================================================================= */

.dc {
    /* surfaces */
    --dc-bg:          #0b0b0d;
    --dc-bg-raised:   #101014;
    --dc-surface:     #151519;
    --dc-surface-2:   #1b1b21;
    --dc-line:        #26262e;
    --dc-line-strong: #35353f;

    /* text */
    --dc-fg:   #f6f6f8;
    --dc-fg-2: #b6b6c0;
    --dc-fg-3: #83838e;

    /* brand */
    --dc-pink:      #FE2C55;
    --dc-pink-lift: #ff4a6d;
    --dc-cyan:      #25F4EE;

    --dc-radius:    16px;
    --dc-radius-sm: 12px;
    --dc-max:       1180px;

    background: var(--dc-bg);
    color: var(--dc-fg);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
}

.dc *,
.dc *::before,
.dc *::after { box-sizing: border-box; }

/* theme.css paints body #121212 and the navbar rgba(18,18,18,.95), both a
   shade lighter than these pages. Without this the overscroll bounce and the
   strip under the sticky navbar flash a different grey. Purely cosmetic, so
   :has is fine: a browser without it simply keeps the old shade. */
body:has(.dc) { background: #0b0b0d; }
body:has(.dc) .navbar {
    background: rgba(11, 11, 13, 0.88);
    border-bottom-color: rgba(255, 255, 255, 0.06);
}

/* SPECIFICITY MATTERS HERE, so both halves are wrapped in :where().
   `.dc ol { margin: 0 }` scores 0,1,1 -- a class AND a type -- which beats a
   plain single-class rule like `.dl-steps { margin-inline: auto }` at 0,1,0.
   Written that way the reset silently won every spacing argument on the page:
   the centred step list sat hard against the left gutter, and margin-top on
   .hero-title, .hero-lede, .dc-checks, .dc-meta and .dc-footer-tagline all
   evaluated to zero. :where() contributes no specificity at all, so this
   scores 0,0,0 and any class rule beats it, which is what a reset should do.
   Do not unwrap it. */
:where(.dc) :where(h1, h2, h3, h4, p, ul, ol, figure, blockquote) {
    margin: 0;
    padding: 0;
}

:where(.dc) :where(ul, ol) { list-style: none; }

.dc ::selection { background: rgba(254, 44, 85, 0.32); color: #fff; }

/* ---------------------------------------------------------------- layout -- */

.dc-shell { max-width: var(--dc-max); margin: 0 auto; padding-inline: 20px; }
.dc-shell--narrow { max-width: 760px; }

.dc-section { padding-block: clamp(44px, 4.6vw, 68px); position: relative; }
.dc-section--tight { padding-block: clamp(36px, 3.6vw, 54px); }

/* A hairline between sections instead of alternating background blocks. The
   old page changed background colour at every seam, which chopped the scroll
   into unrelated slabs. */
.dc-section + .dc-section { border-top: 1px solid rgba(255, 255, 255, 0.045); }

/* ------------------------------------------------------------- type scale -- */

.dc-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--dc-fg-3);
}
.dc-eyebrow::before {
    content: "";
    width: 18px;
    height: 1px;
    background: var(--dc-pink);
}

.dc-h1 {
    font-size: clamp(38px, 6.2vw, 66px);
    font-weight: 800;
    line-height: 1.03;
    letter-spacing: -0.035em;
}

.dc-h2 {
    font-size: clamp(28px, 4vw, 40px);
    font-weight: 800;
    line-height: 1.12;
    letter-spacing: -0.03em;
}

.dc-h3 {
    font-size: 19px;
    font-weight: 700;
    letter-spacing: -0.015em;
    line-height: 1.3;
}

.dc-lede {
    font-size: clamp(16.5px, 1.5vw, 19px);
    line-height: 1.6;
    color: var(--dc-fg-2);
    max-width: 54ch;
}

.dc-body { font-size: 15.5px; line-height: 1.62; color: var(--dc-fg-2); }
.dc-small { font-size: 13.5px; line-height: 1.55; color: var(--dc-fg-3); }

.dc-accent {
    background: linear-gradient(96deg, var(--dc-pink) 12%, var(--dc-cyan) 96%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.dc-section-head { max-width: 70ch; margin-bottom: clamp(22px, 2.6vw, 34px); }
.dc-section-head .dc-h2 { margin-top: 14px; }
.dc-section-head .dc-lede { margin-top: 14px; }
.dc-section-head--center { margin-inline: auto; text-align: center; }
.dc-section-head--center .dc-lede { margin-inline: auto; }

/* --------------------------------------------------------------- buttons -- */

.dc-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 15px 26px;
    border: 1px solid transparent;
    border-radius: var(--dc-radius-sm);
    font-family: inherit;
    font-size: 15.5px;
    font-weight: 650;
    letter-spacing: -0.012em;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
    transition: background-color .18s ease, border-color .18s ease,
                transform .18s ease, box-shadow .18s ease, color .18s ease;
}
.dc-btn svg { width: 18px; height: 18px; flex: none; }

.dc-btn--primary {
    background: var(--dc-pink);
    color: #fff;
    box-shadow: 0 12px 30px -14px rgba(254, 44, 85, 0.95);
}
.dc-btn--primary:hover {
    background: var(--dc-pink-lift);
    transform: translateY(-1px);
    box-shadow: 0 16px 36px -14px rgba(254, 44, 85, 1);
}

.dc-btn--ghost {
    background: rgba(255, 255, 255, 0.04);
    border-color: var(--dc-line-strong);
    color: var(--dc-fg);
}
.dc-btn--ghost:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: #4b4b58;
    transform: translateY(-1px);
}

.dc-btn--light { background: #fff; color: #101014; }
.dc-btn--light:hover { background: #ececf0; transform: translateY(-1px); }

.dc-btn--wide { width: 100%; }

.dc-btn:active { transform: translateY(0); }

/* Third actions use .dc-btn--ghost like every other button on the site, so a
   hero row reads as one set of controls. The bespoke pill that used to live
   here matched nothing else and looked like it came from another page.
   ------------------------------------------------------------------------ */

/* A plain forward link, used under sections that continue somewhere else. */
.dc-textlink {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--dc-fg);
    font-size: 15px;
    font-weight: 650;
    text-decoration: none;
    border-bottom: 1px solid rgba(254, 44, 85, 0.5);
    padding-bottom: 2px;
    transition: border-color .18s ease, color .18s ease;
}
.dc-textlink:hover { border-color: var(--dc-pink); color: #fff; }
.dc-textlink svg { width: 15px; height: 15px; transition: transform .18s ease; }
.dc-textlink:hover svg { transform: translateX(3px); }

.dc-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

/* --------------------------------------------------------- store buttons -- */
/* Identical styling for both stores on purpose. The script on the download
   page reorders them to lead with the visitor's platform; it never restyles
   one, because a demoted store button reads as an unsupported platform. */

/* A two-column grid rather than a flex row, so both buttons come out exactly
   the same width regardless of how long "App Store" and "Google Play" happen
   to render. Equal tracks are the only way to guarantee that; flex sizes each
   one to its own text. */
.dc-stores {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    max-width: 460px;
}
@media (max-width: 460px) {
    .dc-stores { grid-template-columns: 1fr; }
}

.dc-store {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    justify-content: center;
    padding: 12px 18px;
    border-radius: 14px;
    background: #fff;
    color: #0b0b0d;
    text-decoration: none;
    border: 1px solid #fff;
    transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease;
    box-shadow: 0 14px 34px -20px rgba(0, 0, 0, 0.9);
}
.dc-store:hover { background: #ededf1; transform: translateY(-2px); box-shadow: 0 18px 40px -20px rgba(0, 0, 0, 1); }
.dc-store svg { width: 25px; height: 25px; flex: none; }
.dc-store-labels { display: flex; flex-direction: column; line-height: 1.08; text-align: left; }
.dc-store-labels small {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    opacity: 0.62;
}
.dc-store-labels span { font-size: 16.5px; font-weight: 700; letter-spacing: -0.02em; }

/* ------------------------------------------------------------ meta strip -- */

.dc-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 22px;
    font-size: 13.5px;
    color: var(--dc-fg-3);
}
.dc-meta li { display: inline-flex; align-items: center; gap: 8px; }
.dc-meta svg { width: 15px; height: 15px; color: var(--dc-pink); flex: none; }
.dc-meta b { color: var(--dc-fg); font-weight: 700; font-variant-numeric: tabular-nums; }

/* ----------------------------------------------------------------- cards -- */

.dc-card {
    background: var(--dc-surface);
    border: 1px solid var(--dc-line);
    border-radius: var(--dc-radius);
    padding: 26px 24px 28px;
    transition: border-color .2s ease, transform .2s ease, background-color .2s ease;
}
.dc-card:hover { border-color: var(--dc-line-strong); background: var(--dc-surface-2); transform: translateY(-3px); }
.dc-card .dc-h3 { margin-bottom: 9px; }

/* ------------------------------------------------------------------- FAQ -- */

.dc-faq { display: grid; gap: 10px; }
.dc-faq-item {
    background: var(--dc-surface);
    border: 1px solid var(--dc-line);
    border-radius: var(--dc-radius-sm);
    overflow: hidden;
    transition: border-color .2s ease;
}
.dc-faq-item:hover { border-color: var(--dc-line-strong); }
.dc-faq-q {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 19px 22px;
    background: transparent;
    border: 0;
    cursor: pointer;
    text-align: left;
    font-family: inherit;
    font-size: 16px;
    font-weight: 650;
    letter-spacing: -0.012em;
    color: var(--dc-fg);
}
.dc-faq-sign { position: relative; width: 14px; height: 14px; flex: none; }
.dc-faq-sign::before,
.dc-faq-sign::after {
    content: "";
    position: absolute;
    inset: 0;
    margin: auto;
    background: var(--dc-pink);
    border-radius: 1px;
}
.dc-faq-sign::before { width: 14px; height: 1.8px; }
.dc-faq-sign::after  { width: 1.8px; height: 14px; transition: transform .25s ease, opacity .25s ease; }
.dc-faq-q[aria-expanded="true"] .dc-faq-sign::after { transform: scaleY(0); opacity: 0; }

/* grid-template-rows 0fr to 1fr animates to the content's real height, so a
   long answer is never clipped the way a guessed max-height clips it. */
.dc-faq-a {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows .28s ease;
}
.dc-faq-a > div { overflow: hidden; }
.dc-faq-item.is-open .dc-faq-a { grid-template-rows: 1fr; }
.dc-faq-a p {
    font-size: 15px;
    line-height: 1.65;
    color: var(--dc-fg-2);
    padding: 0 22px 20px;
}

/* -------------------------------------------------------------- app band -- */
/* The panel that carries the store buttons. It is the same component on both
   pages, which is what makes the landing to download step feel continuous. */

.dc-band {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--dc-line);
    border-radius: 24px;
    background: var(--dc-surface);
    padding: clamp(32px, 5vw, 54px);
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: clamp(28px, 5vw, 56px);
    align-items: center;
}
.dc-band-copy .dc-lede { margin-top: 14px; }
.dc-band-copy .dc-meta { margin-top: 22px; }
.dc-band-art { display: flex; flex-direction: column; gap: 16px; align-items: flex-start; }

.dc-appicon {
    width: 74px;
    height: 74px;
    border-radius: 19px;
    display: block;
    object-fit: cover;
    box-shadow: 0 20px 44px -18px rgba(254, 44, 85, 0.6);
}

@media (max-width: 820px) {
    .dc-band { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------- footer -- */

.dc-footer { border-top: 1px solid rgba(255, 255, 255, 0.055); padding: 54px 0 46px; }
.dc-footer-top {
    display: flex;
    flex-wrap: wrap;
    gap: 32px;
    justify-content: space-between;
    align-items: flex-start;
    padding-bottom: 34px;
}
.dc-footer-brand { display: flex; align-items: center; gap: 11px; }
.dc-footer-brand img { width: 32px; height: 32px; border-radius: 9px; display: block; }
.dc-footer-name { font-size: 18px; font-weight: 800; letter-spacing: -0.02em; }
.dc-footer-tagline { font-size: 13.5px; color: var(--dc-fg-3); margin-top: 3px; }

.dc-footer-nav {
    display: grid;
    grid-template-columns: repeat(3, minmax(120px, auto));
    gap: 26px 48px;
}
.dc-footer-col h4 {
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    color: var(--dc-fg-3);
    margin-bottom: 12px;
}
.dc-footer-col a {
    display: block;
    font-size: 14.5px;
    color: var(--dc-fg-2);
    text-decoration: none;
    padding: 4px 0;
    transition: color .16s ease;
}
.dc-footer-col a:hover { color: var(--dc-pink); }

.dc-footer-bottom {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    justify-content: space-between;
    align-items: center;
    padding-top: 26px;
    border-top: 1px solid rgba(255, 255, 255, 0.055);
}
.dc-footer-copy { font-size: 13px; color: var(--dc-fg-3); }
.dc-footer-copy a { color: var(--dc-fg-3); text-decoration: none; }
.dc-footer-copy a:hover { color: var(--dc-pink); }
.dc-social { display: flex; gap: 10px; }
.dc-social a {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    border: 1px solid var(--dc-line);
    color: var(--dc-fg-3);
    transition: color .18s ease, border-color .18s ease, background-color .18s ease;
}
.dc-social a:hover { color: #fff; border-color: var(--dc-line-strong); background: rgba(255, 255, 255, 0.05); }

@media (max-width: 760px) {
    .dc-footer-nav { grid-template-columns: repeat(2, minmax(120px, 1fr)); width: 100%; }
}

/* ---------------------------------------------------------------- focus --- */

.dc a:focus-visible,
.dc button:focus-visible {
    outline: 2px solid var(--dc-cyan);
    outline-offset: 3px;
    border-radius: 8px;
}

@media (prefers-reduced-motion: reduce) {
    .dc *, .dc *::before, .dc *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
    }
}

/* ================================================================= MOBILE ==
   On a phone the inset, round-cornered panels stacked one under another read
   as a pile of unrelated cards, and the corner arcs put slivers of page
   background between every block. Below this width the full-width panels run
   edge to edge with square corners instead, so the page reads as one column of
   sections. Grid cards keep their gutter (they sit two-up) but lose the radius
   with everything else.

   margin-inline: -20px cancels .dc-shell's padding, which is what takes a
   panel out to the screen edge.
   ========================================================================= */

@media (max-width: 620px) {
    .dc-band,
    .dc-card,
    .dc-faq-item {
        border-radius: 0;
        border-left: 0;
        border-right: 0;
        margin-inline: -20px;
    }

    .dc-store { border-radius: 10px; }
    .dc-btn { border-radius: 10px; }
    .dc-social a { border-radius: 8px; }
}