/* Interactive Tidal Ring demo — iframe embed above the hero image.
   The iframe renders as one dark demo window (controls padded inside the
   same dark ground as the canvas), so the wrapper stays transparent and
   only provides height; the demo's flex layout absorbs any slack. */
.tr-demo { margin: 0 0 var(--space-8); }
.tr-demo__stage {
  position: relative;
  width: 100%;
  height: 660px;
}
.tr-demo__stage iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}
.tr-demo__cap {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-4);
  margin-top: var(--space-3);
}
.tr-demo__cap a { color: var(--color-text-muted); border-bottom: 1px solid var(--color-border); transition: color var(--dur-fast) var(--ease-soft), border-color var(--dur-fast) var(--ease-soft); }
.tr-demo__cap a:hover { color: var(--color-text); border-color: var(--color-text); }

/* More vertical room as the demo's internal control grid wraps
   (3 → 2 → 1 columns at ~700px / ~440px iframe width). */
@media (max-width: 900px) { .tr-demo__stage { height: 760px; } }
@media (max-width: 560px) {
  .tr-demo__stage { height: 800px; }
  .tr-demo__cap { flex-direction: column; gap: var(--space-1); }
}
@media (max-width: 440px) { .tr-demo__stage { height: 840px; } }