/* ── Download (beta) ────────────────────────────────────────
   Split hero like the landing: promise left, the app in a phone right.
   The conversation inside the phone reuses the demo-* message language from
   landing-demo.css, scaled down by the .phone context. */

.dl-hero {
  padding: 56px 0 20px;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(32px, 5vw, 64px);
  align-items: center;
}

@media (max-width: 980px) {
  .dl-hero { grid-template-columns: 1fr; padding-top: 44px; gap: 40px; }
  .dl-hero .hero-copy { align-items: center; text-align: center; }
  .dl-hero .hero-meta { justify-content: center; }
}

/* ── Phone mockup ───────────────────────────────────────── */

.phone {
  position: relative;
  width: min(330px, 86vw);
  margin: 0 auto;
  border: 1px solid var(--line-hi);
  border-radius: 44px;
  padding: 12px;
  background: var(--bg-raised);
  box-shadow:
    var(--shadow-lg),
    0 0 90px rgba(45, 127, 249, 0.09),
    0 0 50px rgba(245, 180, 41, 0.05);
}

.phone-notch {
  position: absolute;
  top: 22px;
  left: 50%;
  transform: translateX(-50%);
  width: 86px;
  height: 24px;
  border-radius: var(--r-pill);
  background: var(--bg);
  z-index: 2;
}

.phone-screen {
  border-radius: 34px;
  border: 1px solid var(--line);
  background: var(--bg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 480px;
}

.phone-top {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 56px 16px 12px;
  border-bottom: 1px solid var(--line);
}

.phone-top-name { flex: 1; font-size: 14px; font-weight: 600; }

.phone-thread {
  flex: 1;
  padding: 16px 14px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 10px;
}

.phone .demo-msg { font-size: 12.5px; padding: 9px 12px; }
.phone .demo-avatar { width: 20px; height: 20px; }
.phone .demo-avatar svg { width: 12px; height: 12px; }

.phone-input {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 12px 14px;
  padding: 7px 7px 7px 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--surface);
}

.phone-input-hint { flex: 1; font-size: 12.5px; color: var(--subtle); }
.phone-input .demo-mic, .phone-input .demo-send { width: 28px; height: 28px; }
.phone-input .demo-mic svg, .phone-input .demo-send svg { width: 13px; height: 13px; }

/* ── Platform cards ─────────────────────────────────────── */

.dl-platforms {
  margin-top: 56px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  align-items: stretch;
}

@media (max-width: 900px) {
  .dl-platforms { grid-template-columns: 1fr; max-width: 560px; margin: 48px auto 0; width: 100%; gap: 12px; }
}

.dl-card {
  --dl: #2d7ff9;
  --dl-wash: rgba(45, 127, 249, 0.07);
  padding: 30px 28px 32px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  position: relative;
  overflow: hidden;
  background-image: radial-gradient(130% 90% at 0% 0%, var(--dl-wash), transparent 55%);
  transition: border-color 0.2s var(--ease), transform 0.2s var(--ease);
}

.dl-card:hover { border-color: var(--line-hi); transform: translateY(-2px); }

.dl-card--ios { --dl: #2d7ff9; --dl-wash: rgba(45, 127, 249, 0.07); }
.dl-card--android { --dl: #1fa463; --dl-wash: rgba(31, 164, 99, 0.07); }

.dl-card::after {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--dl), transparent);
  opacity: 0.45;
}

.dl-glyph {
  width: 44px;
  height: 44px;
  border-radius: 13px;
  background: var(--dl);
  color: #fff;
  display: grid;
  place-items: center;
  margin-bottom: 2px;
}

.dl-glyph svg { width: 22px; height: 22px; }

.dl-card-title { font-size: 21px; font-weight: 600; letter-spacing: -0.015em; }
.dl-card-body { font-size: 14.5px; color: var(--muted); line-height: 1.6; }

.dl-card-cta { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 6px; }
.dl-btn { margin-top: 4px; }
.dl-btn svg { width: 14px; height: 14px; }

.dl-card-fine { font-size: 12.5px; color: var(--subtle); line-height: 1.55; margin-top: 2px; }

/* ── What to test ───────────────────────────────────────── */

.dl-asks { margin-top: 72px; display: flex; flex-direction: column; gap: 26px; }