/* Join the beta (/download/), frames 47d-1 to 47d-5. No effects on this page.
   Colours only from site.css's :root. */

/* ---------- The three states (decision 3978) ----------
   <body data-beta="open | soon | full"> is the only switch.
   .beta-open, .beta-soon and .beta-full show in their own state only;
   .beta-wait (the waitlist in the invite's place) shows in "soon" and "full".
   The two steps are .beta-open: they show only in "open", at every width (decision 4214). */
body:not([data-beta="open"]) .beta-open,
body:not([data-beta="soon"]) .beta-soon,
body:not([data-beta="full"]) .beta-full,
body[data-beta="open"] .beta-wait { display: none; }

/* ---------- First screen ---------- */
.dl-top { padding-top: 52px; }
.dl-strip { margin-top: 26px; }

/* ---------- The two steps ---------- */
.dl-steps { margin-top: 12px; display: flex; flex-direction: column; gap: 12px; }
.dl-step {
  min-width: 0; padding: 22px 20px 24px; border-radius: 24px;
  background: var(--white); box-shadow: inset 0 0 0 1px var(--hairline);
  display: flex; flex-direction: column;
}
.dl-n { font: 800 56px/52px var(--font-head); letter-spacing: -.04em; font-variant-numeric: tabular-nums; color: var(--ink); }
.dl-t { margin-top: 14px; font: 800 24px/30px var(--font-head); letter-spacing: -.02em; color: var(--ink); }
/* "Get TestFlight." is a text link (orangeShadow on white, 5.2:1); a 44 px target that keeps the 30 px line. */
.dl-tf {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px; margin: -7px 0;
  color: var(--orange-shadow); text-decoration: none;
}
.dl-tf:hover { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 2px; }
.dl-d { margin-top: 8px; font: 400 16px/24px var(--font-body); color: var(--ink-2); text-wrap: pretty; }
.dl-shot { margin-top: 22px; display: block; }
/* Step 2's line (copy v3, decision 4215): "tap the button below" wherever the invite pill shows,
   "scan the code below" where the QR card replaces it (from 1080 px, the QR's own breakpoint).
   Only one is ever displayed, so only one is in the accessibility tree. */
.dl-d-scan { display: none; }
.dl-shot .phone { width: 196.5px; }

/* ---------- The invite, the QR, or the waitlist ---------- */
.dl-act { margin-top: 28px; }
.dl-qr { display: none; }

.wl-notes { margin-top: 14px; display: flex; flex-direction: column; gap: 6px; font: 400 14px/21px var(--font-body); color: var(--ink-soft); }

/* "No email app?": a <details>; its summary is the frame's second line. */
.noemail summary {
  display: block; list-style: none; cursor: pointer; padding: 2px 0;
  min-height: 44px; border-radius: 6px;
}
.noemail summary::-webkit-details-marker { display: none; }
.noemail summary b { font-weight: 700; color: var(--orange-shadow); }
.noemail summary:hover b { text-decoration: underline; text-underline-offset: 3px; }

/* Frame 47d-5: the filled-in text on sand, with an ink-outlined Copy pill. */
.panel { margin-top: 12px; padding: 18px; border-radius: 20px; background: var(--sand); color: var(--ink); }
.panel-text { display: flex; flex-direction: column; gap: 6px; font: 400 15px/22px var(--font-body); color: var(--ink); }
.panel-text .panel-subj { margin-bottom: 4px; font-weight: 700; }
.copy-btn {
  margin-top: 16px; display: inline-flex; align-items: center; justify-content: center;
  height: 44px; min-width: 44px; padding: 0 24px; border-radius: 999px;
  box-shadow: inset 0 0 0 1.5px var(--ink); color: var(--ink);
  font: 700 15px/1 var(--font-body); white-space: nowrap;
}
.copy-btn:hover { background: color-mix(in srgb, var(--ink) 6%, transparent); }

/* ---------- What to expect · Better with a friend · On Android ---------- */
.dl-more { margin-top: 120px; }
.dl-col + .dl-col { margin-top: 112px; }
.dl-h { font: 800 26px/30px var(--font-head); letter-spacing: -.025em; color: var(--ink); }
.dl-dots { margin-top: 16px; gap: 12px; }
.dl-p { margin-top: 12px; font: 400 17px/26px var(--font-body); color: var(--ink-2); text-wrap: pretty; }
/* A 44 px target; the margins put the words 12 px under the paragraph, as drawn. */
.dl-wa { margin: 1px 0 -10px; }
.dl-col .waitlist { margin-top: 20px; }

/* ---------- Desktop ---------- */
@media (min-width: 1080px) {
  .dl-top { padding-top: 96px; }
  .dl-top .lede { max-width: 720px; }
  .dl-strip { margin-top: 44px; }

  .dl-steps { margin-top: 16px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  .dl-step { padding: 32px 32px 36px; border-radius: 32px; }
  .dl-n { font-size: 72px; line-height: 66px; }
  .dl-t { font-size: 28px; line-height: 34px; }
  .dl-tf { margin: -5px 0; }
  .dl-tf svg { width: 22px; height: 22px; }
  .dl-d { font-size: 18px; line-height: 28px; }
  .dl-shot .phone { width: 220.1px; }
  .dl-d-tap { display: none; }
  .dl-d-scan { display: block; }

  /* On a computer the QR card takes the invite pill's place (open state only). */
  .dl-act { margin-top: 16px; }
  .dl-invite { display: none; }
  .dl-qr {
    display: flex; align-items: center; gap: 48px; padding: 32px 40px; border-radius: 32px;
    background: var(--white); box-shadow: inset 0 0 0 1px var(--hairline);
  }
  .dl-qr-img { flex: none; width: 200px; height: 200px; border: 1.5px solid var(--ink); border-radius: 18px; background: var(--white); }
  .dl-qr-t { font: 800 40px/46px var(--font-head); letter-spacing: -.03em; color: var(--ink); text-wrap: balance; }

  /* Soon and full: the waitlist where the invite was. */
  .dl-act > .waitlist { margin-top: 32px; }
  .dl-act > .waitlist .wl-notes { max-width: 600px; }

  .wl-notes { font-size: 15px; line-height: 22px; }

  .dl-more { margin-top: 130px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 56px; align-items: start; }
  .dl-col + .dl-col { margin-top: 0; }
  .dl-dots { margin-top: 18px; }
  .dl-p { margin-top: 14px; font-size: 18px; line-height: 28px; }
  .dl-wa { margin: 5px 0 -9px; font-size: 17px; line-height: 25px; }
  .dl-col .waitlist { margin-top: 22px; }
  .dl-col .waitlist .pill { height: 56px; padding: 0 28px; }
}