/* Demo video by device (WEBSITE_SPEC_v5). Colours only from tokens.css. Deployed only when VIDEO_ENABLED is "true". */
.device-frame { position: relative; margin: 0 auto; }
.device-screen { position: relative; }
.device-screen video {
  display: block; width: 100%; height: auto; border-radius: var(--radius);
  background: var(--sunken); object-fit: contain;
}

/* Play button: a pine circle on a surface plate. The standard focus ring (3px, 2px offset) lands on the
   plate, never on pine, and stays on the video inside the frame. */
.video-play-plate {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  padding: 8px; border-radius: 50%; background: var(--surface); display: flex;
}
.video-play {
  width: 64px; height: 64px; border-radius: 50%; padding: 0; cursor: pointer; border: 0;
  background: var(--pine); color: var(--on-pine);
  display: flex; align-items: center; justify-content: center;
}
.video-play:hover { background: var(--pine-deep); }
.video-play svg { width: 32px; height: 32px; margin-left: 4px; }

/* Phone: the cut fills the content width (16px gutters), no frame. */
.device-frame[data-device="phone"] { width: 100%; }

/* Tablet (touch, 768px+): no frame. Tablet cut up to 900px; phone cut up to 420px until the tablet cut exists. */
.device-frame[data-device="tablet"][data-cut="tablet"] { max-width: 900px; }
.device-frame[data-device="tablet"][data-cut="phone"] { max-width: 420px; }

/* Laptop and desktop: a plain device frame drawn from tokens. Ink bezel, camera dot in muted,
   1px line edge, no shadow, no buttons, no logo. Orientation follows the cut. */
.device-frame.framed {
  padding: 16px; background: var(--ink); border: 1px solid var(--line); border-radius: 28px;
}
.device-frame.framed .device-screen video { border-radius: 10px; }
.device-frame.framed::before {
  content: ""; position: absolute; width: 8px; height: 8px; border-radius: 50%; background: var(--muted);
  top: 4px; left: 50%; transform: translateX(-50%);
}
.device-frame.framed[data-cut="tablet"] { max-width: 720px; }
.device-frame.framed[data-cut="phone"] { width: 340px; max-width: 100%; }

/* Tablet cut ready: its own section after the steps. */
.video-section h2 { text-align: left; }

/* Tablet cut not ready: the video sits in the "How Countkind will work" section. */
.video-aside { margin-top: var(--s32); }
@media (min-width: 1024px) {
  [data-video-device="desktop"] #how.has-video .wrap {
    display: grid; grid-template-columns: minmax(0, 1fr) 372px; column-gap: var(--s48); align-items: start;
  }
  [data-video-device="desktop"] #how.has-video .wrap > * { grid-column: 1; }
  [data-video-device="desktop"] #how.has-video .steps { grid-template-columns: 1fr; }
  [data-video-device="desktop"] #how.has-video .video-aside { grid-column: 2; grid-row: 1 / span 3; margin-top: 0; }
}