/* Device showcase: the iPhone leads, the family fans out, one check syncs. */
.device-chapter {
  --dc-paper: #fff;
  --dc-ink: #10121a;
  --dc-muted: #6b6e76;
  --dc-metal-light: #e8e9eb;
  --dc-metal-mid: #989ba1;
  --dc-metal-dark: #30333a;
  --dc-glass: #111317;
  /* Sampled from the app screenshots so overlays sit invisibly on them. */
  --dc-app-blue: rgb(49 131 251);
  --dc-app-green: rgb(5 150 105);
  --dc-scene-w: 1120px;
  --dc-scene-h: 600px;
  --dc-caption: 1;
  --dc-glow: 1;
  --dc-fold-w: 400px;
  --dc-fold-h: 303.921569px;
  --dc-fold-depth: 12px;
  --dc-half-depth: 6px;
  --dc-screen-inset: 4px;
  position: relative;
  background: var(--dc-paper);
  color: var(--dc-ink);
  isolation: isolate;
}
.device-sticky {
  position: relative;
  padding-block: clamp(40px, 5vw, 72px);
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
}
.dc-heading { text-align: center; position: relative; z-index: 4; padding: 20px 20px 6px; flex: none; }
.dc-heading h2 { margin: 0; color: var(--dc-ink); font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-size: clamp(36px, 4.5vw, 64px); line-height: 1.08; font-weight: 680; letter-spacing: -.055em; }
.dc-heading p { margin: 18px 0 0; font-size: clamp(16px, 1.65vw, 23px); line-height: 1.45; letter-spacing: -.025em; color: var(--dc-muted); }
.dc-viewport { width: min(100% - 40px, 1280px); height: var(--dc-render-h, 520px); margin-top: clamp(16px, 3vw, 40px); flex: none; position: relative; }
.dc-scene { width: var(--dc-scene-w); height: var(--dc-scene-h); position: absolute; top: 0; left: 50%; transform: translateX(-50%) scale(var(--dc-scale, .78)); transform-origin: center top; perspective: 1400px; perspective-origin: 50% 40%; }
.dc-stage { position: absolute; inset: 0; transform-style: preserve-3d; transform: rotateX(var(--dc-tilt-x, 0deg)) rotateY(var(--dc-tilt-y, 0deg)); transition: transform .7s cubic-bezier(.2, .7, .2, 1); }

/* Final lineup. JS measures these boxes and animates towards them. */
.dc-device { position: absolute; margin: 0; transform-origin: center center; will-change: transform, opacity; }
.dc-android { left: 100px; top: 130px; width: 180px; z-index: 2; }
.dc-ios { left: 326px; top: 30px; width: 236px; z-index: 3; }
.dc-foldable { left: 618px; top: 220px; width: var(--dc-fold-w); z-index: 1; }
.dc-float { position: relative; }
.dc-device figcaption { margin: 22px 0 0; color: var(--dc-muted); font: 400 17px/1.3 -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; text-align: center; letter-spacing: -.018em; opacity: var(--dc-caption); }

.dc-frame { position: relative; padding: 4px; background: linear-gradient(128deg, var(--dc-metal-light) 0%, var(--dc-metal-mid) 16%, var(--dc-metal-dark) 42%, var(--dc-metal-light) 58%, var(--dc-metal-mid) 76%, var(--dc-metal-dark) 100%); box-shadow: 0 1px 0 1px rgb(12 15 20 / .88), inset 0 0 0 1px rgb(255 255 255 / .55), 0 30px 40px -24px rgb(10 14 22 / .38); }
.dc-graphite { background: linear-gradient(132deg, #a9acb0 0%, #555960 17%, #202328 42%, #777b80 69%, #272a30 100%); }
.dc-phone-frame { border-radius: 34px; padding: 5px; }
.dc-phone-frame::after { content: ''; position: absolute; inset: 3px; border: 1px solid var(--dc-glass); border-radius: 31px; pointer-events: none; }
.dc-screen { position: relative; overflow: hidden; border-radius: 29px; background: var(--dc-glass); }

/* The foldable from the original showcase, unchanged: thin borders, solid
   metal side walls built by devices.js, and WebGL glass (fold-screen.js).
   Here it stands open in the lineup and folds shut as the page moves on.
   Its folding screens use the "-checked" captures, so the synced check stays. */
.dc-fold-perspective { width: var(--dc-fold-w); height: var(--dc-fold-h); perspective: 1800px; perspective-origin: 50% 45%; }
.dc-fold-object { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transform: translateX(-25%) rotateY(-10deg) rotateX(3deg); }
.dc-fold-leaf { position: absolute; width: 50%; height: 100%; transform-style: preserve-3d; }
.dc-right-leaf { left: 50%; }
.dc-left-leaf { left: 0; transform-origin: right center var(--dc-half-depth); transform: translateZ(1px) rotateY(180deg); }
.dc-metal-wall { position: absolute; left: 0; top: 0; height: var(--dc-fold-depth); transform-origin: 0 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; pointer-events: none; background: var(--dc-metal-dark); box-shadow: inset 0 .45px 0 rgb(255 255 255 / .12), inset 0 -.55px 0 rgb(255 255 255 / .42); }
.dc-fold-face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; background: linear-gradient(130deg, var(--dc-metal-light), var(--dc-metal-mid) 24%, var(--dc-metal-dark) 58%, var(--dc-metal-light) 89%); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .55), 0 0 0 1px rgb(15 18 23 / .9); }
.dc-inside-left { border-radius: 23px 3px 3px 23px; transform: translateZ(var(--dc-half-depth)); }
.dc-inside-right { border-radius: 3px 23px 23px 3px; transform: translateZ(var(--dc-half-depth)); }
.dc-inner-screen { position: absolute; top: var(--dc-screen-inset); bottom: var(--dc-screen-inset); overflow: hidden; background: var(--dc-glass); }
.dc-inside-left .dc-inner-screen { left: var(--dc-screen-inset); right: 0; border-radius: 19px 0 0 19px; }
.dc-inside-right .dc-inner-screen { left: 0; right: var(--dc-screen-inset); border-radius: 0 19px 19px 0; }
.dc-inner-screen img { width: 200%; height: 100%; max-width: none; display: block; }
.dc-inside-right .dc-inner-screen img { transform: translateX(-50%); }
.dc-cover-face { border-radius: 3px 23px 23px 3px; transform: rotateY(180deg) translateZ(var(--dc-half-depth)); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .55), 0 0 0 1px rgb(15 18 23 / .9), 0 10px 22px -12px rgb(15 18 23 / .34); }
.dc-rear-face { border-radius: 23px 3px 3px 23px; transform: rotateY(180deg) translateZ(var(--dc-half-depth)); background: linear-gradient(125deg, #51555c, #26292f 70%, #454951); }
.dc-cover-screen { position: absolute; inset: var(--dc-screen-inset); border-radius: 0 19px 19px 0; background: var(--dc-glass); overflow: hidden; }
.dc-cover-screen img { display: block; width: 100%; height: 100%; object-fit: contain; max-width: none; }
.dc-fold-glass { position: absolute; inset: 0; display: block; width: 100%; height: 100%; visibility: hidden; pointer-events: none; }
[data-fold-fx="ready"] > .dc-fold-glass { visibility: visible; }
[data-fold-fx="ready"] > img { visibility: hidden; }
.dc-screen-shade { display: none; }
.dc-hinge { position: absolute; left: calc(50% - 1px); width: 2px; top: 5px; bottom: 5px; transform: translateZ(calc(var(--dc-half-depth) + .05px)); background: rgb(12 15 20 / .25); pointer-events: none; opacity: var(--dc-seam-opacity, .5); }
/* A single final surface removes split-layer joins, outlines and subpixel gaps. */
.dc-flat-surface { position: absolute; inset: 0; border-radius: 23px; transform: translateZ(calc(var(--dc-half-depth) + .15px)); backface-visibility: hidden; -webkit-backface-visibility: hidden; pointer-events: none; opacity: var(--dc-flat-opacity, 0); background: linear-gradient(130deg, var(--dc-metal-light), var(--dc-metal-mid) 24%, var(--dc-metal-dark) 58%, var(--dc-metal-light) 89%); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .55), 0 0 0 1px rgb(15 18 23 / .9); }
.dc-flat-screen { position: absolute; inset: var(--dc-screen-inset); overflow: hidden; border-radius: 19px; }
.dc-flat-screen img { display: block; width: 100%; height: 100%; max-width: none; }
.device-chapter[data-device-state="open"] .dc-inside-face { visibility: hidden; }
.dc-screen img { width: 100%; height: auto; display: block; max-width: none; }
.dc-dynamic-island { position: absolute; z-index: 2; top: 13px; left: 50%; width: 30%; aspect-ratio: 3.4; border-radius: 999px; background: var(--dc-glass); transform: translateX(-50%); pointer-events: none; }

/* A moving specular sheen; JS slides it across as each device turns. */
.dc-glare { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(105deg, transparent 38%, rgb(255 255 255 / .55) 50%, transparent 62%) no-repeat; background-size: 260% 100%; background-position: var(--dc-glare-x, 120%) 0; opacity: var(--dc-glare-o, 0); mix-blend-mode: soft-light; }

.dc-glow { position: absolute; left: 50%; top: 52%; width: 900px; height: 460px; margin: -230px 0 0 -450px; border-radius: 50%; background: radial-gradient(closest-side, rgb(49 131 251 / .16), rgb(49 131 251 / .06) 55%, transparent); transform: translateZ(-200px) scale(calc(.7 + .3 * var(--dc-glow))); opacity: var(--dc-glow); pointer-events: none; }

/* The check that lands on the iPhone and reaches every other screen. Each
   overlay is placed in screenshot percentages, measured from the PNGs. */
.dc-bar, .dc-tick, .dc-touch, .dc-ripple { position: absolute; pointer-events: none; }
/* Each bar spans the capture's fill from 0 to 2 of 4, and grows from a
   rounded clip that matches its 1 of 4. */
.dc-bar { border-radius: 999px; background: var(--dc-app-blue); opacity: 0; clip-path: inset(0 50% 0 0 round 999px); transition: clip-path .25s ease-in, opacity 0s .25s; }
.dc-ios .dc-bar { left: 4.62%; width: 45.38%; top: 22.77%; height: 1.255%; }
.dc-android .dc-bar { left: 8.89%; width: 35.74%; top: 33.29%; height: 1.125%; }
.dc-foldable .dc-bar { left: 44.28%; width: 26.92%; top: 25.92%; height: 1.515%; }
.dc-tick, .dc-touch, .dc-ripple { aspect-ratio: 1; border-radius: 50%; translate: -50% -50%; }
.dc-ios :is(.dc-tick, .dc-touch, .dc-ripple) { left: 12.99%; top: 34.57%; width: 10.8%; }
.dc-foldable .dc-tick { left: 47.86%; top: 40.07%; width: 4.46%; }
.dc-tick { display: grid; place-items: center; background: var(--dc-app-green); color: #fff; transform: scale(0); transition: transform .2s ease-in; }
.dc-tick svg { width: 58%; height: 58%; stroke-width: 3.2; }
.dc-touch { background: rgb(16 18 26 / .22); opacity: 0; }
.dc-ripple { border: 2px solid var(--dc-app-green); opacity: 0; }
.dc-ping { position: absolute; inset: 0; border-radius: 34px; pointer-events: none; opacity: 0; box-shadow: 0 0 0 0 rgb(49 131 251 / .5); }
.dc-foldable .dc-ping { border-radius: 23px; }

.dc-sync { display: inline-flex; align-items: center; gap: 10px; margin: 6px 0 0; padding: 10px 18px 10px 12px; border-radius: 999px; background: #fff; border: 1.5px solid #e4e6eb; box-shadow: 0 10px 24px -14px rgb(16 18 26 / .35); font-size: 15px; font-weight: 600; letter-spacing: -.015em; color: var(--dc-ink); opacity: 0; transform: translateY(10px); transition: opacity .25s, transform .25s; }
.dc-sync svg { width: 22px; height: 22px; padding: 4px; border-radius: 50%; background: var(--dc-app-green); color: #fff; stroke-width: 3; }

.device-chapter[data-synced="true"] .dc-touch { animation: dc-touch .55s ease-out both; }
.device-chapter[data-synced="true"] .dc-ios .dc-tick { transform: scale(1); transition: transform .5s cubic-bezier(.34, 1.7, .5, 1) .18s; }
.device-chapter[data-synced="true"] .dc-ripple { animation: dc-ripple .8s cubic-bezier(.2, .7, .3, 1) .22s both; }
.device-chapter[data-synced="true"] .dc-ios .dc-bar { opacity: 1; clip-path: inset(0 0 0 0 round 999px); transition: clip-path .6s cubic-bezier(.2, .8, .2, 1) .35s, opacity 0s .35s; }
.device-chapter[data-synced="true"] .dc-android .dc-ping { animation: dc-ping .9s ease-out .7s both; }
.device-chapter[data-synced="true"] .dc-android .dc-bar { opacity: 1; clip-path: inset(0 0 0 0 round 999px); transition: clip-path .6s cubic-bezier(.2, .8, .2, 1) .8s, opacity 0s .8s; }
.device-chapter[data-synced="true"] .dc-foldable .dc-ping { animation: dc-ping .9s ease-out .9s both; }
.device-chapter[data-synced="true"] .dc-foldable .dc-tick { transform: scale(1); transition: transform .5s cubic-bezier(.34, 1.7, .5, 1) .95s; }
.device-chapter[data-synced="true"] .dc-foldable .dc-bar { opacity: 1; clip-path: inset(0 0 0 0 round 999px); transition: clip-path .6s cubic-bezier(.2, .8, .2, 1) 1.05s, opacity 0s 1.05s; }
.device-chapter[data-synced="true"] .dc-sync { opacity: 1; transform: none; transition: opacity .5s 1.35s, transform .6s cubic-bezier(.2, .8, .2, 1) 1.35s; }
@keyframes dc-touch { 0% { opacity: 0; transform: scale(.4); } 35% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(1.1); } }
@keyframes dc-ripple { 0% { opacity: .9; transform: scale(1); } 100% { opacity: 0; transform: scale(2.6); } }
@keyframes dc-ping { 0% { opacity: 1; box-shadow: 0 0 0 0 rgb(49 131 251 / .55); } 100% { opacity: 1; box-shadow: 0 0 0 22px rgb(49 131 251 / 0); } }
@keyframes dc-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
.dc-ios .dc-float { animation: dc-float 6s ease-in-out infinite; }
.dc-android .dc-float { animation: dc-float 7s ease-in-out -2.4s infinite; }
.dc-foldable .dc-float { animation: dc-float 8s ease-in-out -4.8s infinite; }

/* Phones: the foldable rises behind, both phones stand in front of it. */
@media (max-width: 600px) {
  .device-chapter { --dc-scene-w: 360px; --dc-scene-h: 490px; --dc-fold-w: 280px; --dc-fold-h: 213.333333px; --dc-fold-depth: 7.2px; --dc-half-depth: 3.6px; }
  .dc-heading { padding-top: 22px; padding-bottom: 6px; }
  .dc-heading h2 { max-width: 310px; margin-inline: auto; font-size: clamp(34px, 10vw, 43px); line-height: 1.08; }
  .dc-heading p { max-width: 290px; margin: 14px auto 0; font-size: 16px; }
  .dc-viewport { width: calc(100% - 32px); }
  .dc-foldable { left: 40px; top: 0; }
  .dc-ios { left: 48px; top: 140px; width: 152px; }
  .dc-android { left: 192px; top: 172px; width: 128px; }
  .dc-device figcaption { display: none; }
  .dc-phone-frame { padding: 3px; border-radius: 22px; }
  .dc-phone-frame::after { inset: 2px; border-radius: 20px; }
  .dc-screen { border-radius: 19px; }
  .dc-fold-face { border-radius: 16px; }
  .dc-inside-left { border-radius: 16px 3px 3px 16px; }
  .dc-inside-right { border-radius: 3px 16px 16px 3px; }
  .dc-inside-left .dc-inner-screen { border-radius: 12px 0 0 12px; }
  .dc-inside-right .dc-inner-screen { border-radius: 0 12px 12px 0; }
  .dc-cover-face { border-radius: 3px 16px 16px 3px; }
  .dc-rear-face { border-radius: 16px 3px 3px 16px; }
  .dc-cover-screen { border-radius: 0 12px 12px 0; }
  .dc-flat-surface { border-radius: 16px; }
  .dc-flat-screen { border-radius: 12px; }
  .dc-dynamic-island { top: 8px; }
  .dc-ping { border-radius: 22px; }
  .dc-foldable .dc-ping { border-radius: 16px; }
  .dc-glow { width: 420px; height: 360px; margin: -180px 0 0 -210px; }
  .dc-sync { font-size: 14px; margin-top: 4px; }
}
@media (prefers-reduced-motion: reduce) {
  .dc-device { will-change: auto; }
  .dc-float, .dc-touch, .dc-ripple, .dc-ping { animation: none !important; }
  .dc-stage, .dc-bar, .dc-tick, .dc-sync { transition: none !important; }
}