/* One readable product card at a time, with neighboring cards in view. */
.screen-carousel { --slide-width:min(1040px,calc(100vw - 120px)); }
.screen-carousel .reel {
  position:relative;
  gap:24px;
  padding:12px calc((100% - var(--slide-width)) / 2) 24px;
  scroll-padding-inline:calc((100% - var(--slide-width)) / 2);
  scroll-snap-type:x mandatory;
  scrollbar-width:none;
  overscroll-behavior-x:contain;
  scroll-margin-top:16px;
}
.screen-carousel .reel::-webkit-scrollbar { display:none; }
.screen-carousel .screen-slide {
  width:var(--slide-width);
  min-height:clamp(500px,calc(100svh - 220px),680px);
  margin:0;
  padding:36px 70px;
  display:grid;
  grid-template-columns:1fr 1fr;
  align-items:center;
  gap:48px;
  border:1px solid var(--line);
  border-radius:30px;
  background:var(--card);
  scroll-snap-align:center;
  scroll-snap-stop:normal;
  scroll-margin-top:16px;
}
.screen-carousel .screen-slide figcaption { margin:0; font-size:1rem; }
.screen-slide h3 { font-size:clamp(2rem,3.1vw,2.8rem); line-height:1.12; max-width:420px; color:var(--ink); }
.screen-slide .slide-detail { font:12px 'B612 Mono',monospace; line-height:1.65; color:var(--blue); margin-bottom:20px; }
.screen-slide .slide-description { font-size:1.05rem; line-height:1.6; color:var(--muted); margin-top:22px; max-width:380px; }
.screen-enlarge { margin-top:28px; padding:8px 0; min-height:44px; border:0; background:none; color:var(--blue); font-size:.95rem; font-weight:600; text-align:left; }
.screen-enlarge span { margin-left:8px; }
.screen-enlarge:hover { text-decoration:underline; text-underline-offset:5px; }
.screen-enlarge[data-pointer-focus]:focus { outline:none; }
.screen-carousel .phone { width:clamp(200px,calc((100svh - 270px) * .46),280px); justify-self:center; box-shadow:0 22px 45px -22px #0b264866; }
:root[data-theme="dark"] .screen-carousel .phone { box-shadow:0 22px 45px -22px #000d; }
.carousel-footer { text-align:center; }
.carousel-controls { display:flex; align-items:center; justify-content:center; gap:12px; margin:8px 0 14px; }
.carousel-controls[hidden] { display:none; }
.carousel-controls > button { display:grid; place-items:center; flex:0 0 44px; width:44px; height:44px; border:0; border-radius:50%; background:var(--line); color:var(--ink); font-size:19px; }
.carousel-controls > button:disabled { opacity:.35; cursor:default; }
.carousel-controls > button:hover:not(:disabled) { background:color-mix(in srgb,var(--line) 75%,var(--muted)); }
.carousel-dots { display:flex; align-items:center; padding:2px 12px; min-height:48px; background:var(--line); border-radius:28px; }
.carousel-dot { display:grid; place-items:center; width:24px; height:44px; padding:0; border:0; background:none; color:var(--muted); }
.carousel-dot[hidden] { display:none; }
.carousel-dot:before { content:''; display:block; height:6px; width:6px; border-radius:8px; background:currentColor; transition:width .25s,background .25s; }
.carousel-dot[aria-current="true"]:before { width:22px; color:var(--ink); }
.carousel-dot:hover:before { color:var(--blue); }
.carousel-status { font-size:.8rem; color:var(--muted); min-height:1.5em; max-width:none; }
.carousel-footer .reel-note { font-size:.75rem; margin-top:6px; max-width:none; }
#reel-play .pause-symbol, #reel-play[aria-pressed="true"] .play-symbol { display:none; }
#reel-play[aria-pressed="true"] .pause-symbol { display:block; }
.screen-carousel + .wrap .discovery-note { margin-top:32px; }
@media(max-width:1050px) {
  .screen-carousel { --slide-width:calc(100vw - 80px); }
  .screen-carousel .screen-slide { padding:32px 42px; gap:28px; }
}
@media(max-width:760px) {
  .screen-carousel { --slide-width:calc(100vw - 52px); }
  .screen-carousel .reel { gap:14px; padding-bottom:20px; }
  .screen-carousel .screen-slide { grid-template-columns:1fr; grid-template-rows:auto 1fr; min-height:660px; gap:26px; padding:28px 24px; border-radius:24px; align-items:start; }
  .screen-slide h3 { font-size:1.7rem; }
  .screen-slide .slide-detail { font-size:10px; margin-bottom:12px; }
  .screen-slide .slide-description { font-size:.9rem; line-height:1.5; margin-top:14px; }
  .screen-enlarge { margin-top:10px; font-size:.85rem; }
  .screen-carousel .phone { width:188px; border-width:4px; border-radius:26px; align-self:end; }
  .carousel-controls { gap:8px; }
  .carousel-dots { padding-inline:12px; }
  .carousel-status { font-size:.75rem; }
  .screen-carousel + .wrap .discovery-note { margin-top:24px; }
}
@media(prefers-reduced-motion:reduce) {
  .screen-carousel .reel { scroll-behavior:auto; }
  .carousel-dot:before { transition:none; }
}

/* Only horizontal gestures move the reel. Vertical gestures scroll the page. */
.screen-carousel:focus { outline:none; }
.screen-stage { min-width:0; }
.screen-credit .data-credit { text-align:center; margin:22px auto 0; }
#screen-position { font-size:.8rem; color:var(--muted); text-align:center; margin:0; }
.dialog-nav { align-items:center; }
.dialog-nav[hidden] { display:none; }