/* ── the offer ──────────────────────────────────────────────────────────── */

.scene-offer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-space-4);
  margin-top: var(--sp-space-6);
  padding-top: var(--sp-space-6);
  border-top: 1px solid var(--sp-stage-glass-border);
}

.scene-offer-copy {
  flex: 1 1 22rem;
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--sp-stage-text-dim);
}

.scene-offer-copy strong {
  color: var(--sp-stage-text);
  font-weight: 600;
}

.scene-offer-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-space-3);
}

/* Over the stage the filled badge is too loud for a secondary action — the
   demo CTA is the one thing here that should be solid. */
.scene-offer-actions a.download-badge {
  background: oklch(1 0 0 / 0.06);
  border: 1px solid var(--sp-stage-glass-border);
  color: var(--sp-stage-text);
}

.scene-offer-actions a.download-badge:hover {
  background: var(--sp-color-primary);
  color: var(--sp-color-text-on-primary);
}

/* ── narrow ─────────────────────────────────────────────────────────────── */

@media (max-width: 900px) {
  .home-scene-inner {
    padding: var(--sp-space-8) var(--sp-space-4) var(--sp-space-6);
  }

  /* Stacked, the lanes describe a geometry that is no longer on screen. */
  .scene-hosts { grid-template-columns: 1fr; }
  .scene-lanes { display: none; }
  .scene-pipeline { grid-template-columns: 1fr; gap: var(--sp-space-3); }

  .scene-hosts + .scene-pipeline { margin-top: var(--sp-space-4); }

  .scene-offer-actions {
    width: 100%;
  }

  .scene-offer-actions > * {
    flex: 1 1 auto;
    justify-content: center;
  }
}

@media (max-width: 640px) {
  .home-scene-inner {
    padding-inline: var(--sp-space-3);
  }

  /* One column of cards on a phone: side padding eases, vertical rhythm grows,
     so each card reads as its own beat instead of a cramped list. */
  .scene-hosts {
    gap: var(--sp-space-3);
  }

  .scene-host {
    padding: var(--sp-space-4);
  }

  .scene-deck {
    font-size: 1rem;
  }

  .scene-verbs li {
    padding: 0 var(--sp-space-3);
  }
}

@media (prefers-reduced-motion: reduce) {
  /* Motion is the whole content of the pips, so there is nothing to slow down
     — they go. The stages stay lit instead of sweeping, which is the state the
     animation was spending most of its time trying to show anyway. */
  .scene-pip { display: none; }

  .scene-host-live::before,
  .scene-stage::before {
    animation: none;
  }

  .scene-stage::before {
    background: var(--sp-stage-glow);
  }

  .scene-host { transition: none; }
}