/* The existing device-ink frames move as a whole; recording pixels never crop. */
.phone-showcase { max-width: 1000px; width: 100%; margin: 0 auto; }
.demo-arrangement-controls { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 10px 20px; margin-bottom: 18px; }
.demo-arrangement-controls p { font-size: var(--text-sm); color: var(--text-secondary); margin: 0; }
.demo-arrangement-toggle { background: transparent; border: 1px solid var(--border); border-radius: 24px; padding: 8px 16px; color: var(--primary-ink); font: inherit; font-size: var(--text-sm); cursor: pointer; }
.demo-arrangement-toggle[hidden] { display: none; }
.demo-arrangement-toggle:focus-visible, .demo-preview-link:focus-visible { outline: 3px solid var(--primary); outline-offset: 5px; }
.demo-previews {
  --phone-width: min(280px, calc((100vw - 128px) / 3));
  /* Slightly taller than the recordings, leaving small, even white margins. */
  --phone-height: calc(var(--phone-width) * 920 / 480);
  --card-step: calc(var(--phone-height) + 170px);
  position: relative; height: var(--card-step); width: 100%;
  transition: height 550ms cubic-bezier(.22,.61,.36,1);
  touch-action: pan-y pinch-zoom;
}
.demo-preview {
  position: absolute; top: 10px; left: 50%; width: var(--phone-width);
  pointer-events: none;
  text-align: center; transform-origin: top center;
  transition: transform 550ms cubic-bezier(.22,.61,.36,1);
}
.demo-phone-main { z-index: 3; transform: translateX(-50%); }
.demo-phone-left { z-index: 1; transform: translateX(calc(-150% - 28px)); }
.demo-phone-right { z-index: 2; transform: translateX(calc(50% + 28px)); }
.phone-showcase.is-interactive:not(.is-expanded) .demo-phone-left { transform: translateX(calc(-50% - 155px)) translateY(32px) rotate(-8deg) scale(.88); }
.phone-showcase.is-interactive:not(.is-expanded) .demo-phone-right { transform: translateX(calc(-50% + 155px)) translateY(32px) rotate(8deg) scale(.88); }
.demo-preview-link {
  display: block; position: relative; border-radius: 30px; pointer-events: auto;
  color: var(--text-primary); text-decoration: none;
}
.demo-phone-screen {
  position: relative; display: flex; align-items: center; justify-content: center;
  aspect-ratio: 480 / 920; overflow: hidden; border: 7px solid var(--ink);
  border-radius: 30px; background: var(--bg-card);
  box-shadow: 0 28px 56px -24px rgba(20,20,28,.4);
}
.demo-preview video {
  display: block; width: 100%; height: auto; aspect-ratio: 480 / 854;
  object-fit: contain; background: var(--ink);
}
/* iOS may clear a video's native poster as soon as play() is requested.
   A separate image stays above the video until a decoded frame is presented. */
.demo-preview-poster {
  position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%;
  object-fit: contain; background: var(--bg-card); pointer-events: none;
}
.demo-phone-screen.has-video-frame .demo-preview-poster { opacity: 0; }
.demo-preview h2 {
  font-size: 16px; line-height: 1.45; margin: 6px 0;
  color: var(--text-primary);
}
.demo-preview p { font-size: var(--text-sm); color: var(--text-secondary); }
.demo-play-label {
  display: block; text-align: center; padding: 16px 0 6px;
  color: var(--primary-ink); font-weight: 600;
}
.demo-benefit { pointer-events: auto; }
.demo-benefit, .demo-play-label { opacity: 1; visibility: visible; transition: opacity 250ms ease, visibility 250ms; }
.phone-showcase.is-interactive:not(.is-expanded) .demo-benefit,
.phone-showcase.is-interactive:not(.is-expanded) .demo-play-label { opacity: 0; visibility: hidden; }
.demo-preview-status { margin-top: 6px; }
.demo-preview-status:empty { display: none; }
.demo-motion { display: flex; gap: 12px; align-items: center; justify-content: center; flex-wrap: wrap; }
.demo-motion p { color: var(--text-secondary); font-size: var(--text-sm); }
.hero:has(.demo-previews) { padding-bottom: 48px; }
.hero:has(.demo-previews) .hero-base { display: none; }
.watch-demo { padding: var(--section-pad) 0; scroll-margin-top: 100px; text-align: center; }
.watch-demo .section-subtitle { max-width: 660px; margin-bottom: 24px; }
.watch-demo .hero-actions { justify-content: center; margin-bottom: 0; }
.demo-dialog {
  margin: auto; width: min(960px, calc(100% - 24px)); max-height: calc(100dvh - 24px);
  padding: 24px; border: 1px solid var(--border); border-radius: var(--radius-xl);
  color: var(--text-primary); background: var(--bg-card); overflow-y: auto;
}
.demo-dialog::backdrop { background: rgba(20,20,28,0.8); }
.demo-dialog-top { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.demo-dialog h2 { font-size: 22px; }
.demo-dialog-close { padding: 10px 16px; }
.demo-chapters { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0; }
.demo-chapters .btn { padding: 9px 14px; font-size: var(--text-sm); }
.demo-chapters [aria-pressed="true"] { background: var(--primary); color: var(--bg-card); }
.demo-player {
  display: block; width: 100%; height: min(72dvh, 854px); background: var(--ink);
  object-fit: contain; border-radius: var(--radius-sm);
}
.demo-player-status { margin: 10px 0; color: var(--text-secondary); min-height: 1.5em; }
.demo-player-end { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-top: 16px; }
.demo-player-end p { font-size: var(--text-sm); }
@media (max-width: 820px) {
  .demo-previews { --phone-width: min(300px, calc(100vw - 64px)); --fan-offset: clamp(64px, 20vw, 120px); height: calc(var(--card-step) * 3); }
  .demo-phone-left { transform: translateX(-50%) translateY(var(--card-step)); }
  .demo-phone-right { transform: translateX(-50%) translateY(calc(var(--card-step) * 2)); }
  .phone-showcase.is-interactive:not(.is-expanded) .demo-previews { height: calc(var(--phone-height) * .7 + 70px); }
  .phone-showcase.is-interactive:not(.is-expanded) .demo-phone-main { transform: translateX(-50%) scale(.7); }
  .phone-showcase.is-interactive:not(.is-expanded) .demo-phone-left { transform: translateX(calc(-50% - var(--fan-offset))) translateY(30px) rotate(-6deg) scale(.56); }
  .phone-showcase.is-interactive:not(.is-expanded) .demo-phone-right { transform: translateX(calc(-50% + var(--fan-offset))) translateY(30px) rotate(6deg) scale(.56); }
  .demo-arrangement-controls { gap: 8px; }
}
@media (max-width: 700px) {
  .demo-dialog { padding: 16px; }
  .demo-dialog h2 { font-size: 18px; }
  .demo-player { height: auto; aspect-ratio: 480 / 854; max-height: 75dvh; }
  .demo-player-end { align-items: flex-start; flex-direction: column; }
}
@media (prefers-reduced-motion: reduce) {
  .demo-previews, .demo-preview, .demo-benefit, .demo-play-label { transition: none; }
}