.app-showcase {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 76px 0 74px;
  background: radial-gradient(ellipse 70% 160px at 72% 0, #e4b48426, transparent), #f3efe7;
}
.app-showcase::before {
  content: '';
  position: absolute;
  z-index: -1;
  width: min(920px, 85%);
  top: 175px;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 50% 50% 0 0;
  border: 1px solid #b5956e25;
  border-bottom: 0;
  background: linear-gradient(155deg, #e5d5bc90, #f7f3ed30 65%);
  mask: linear-gradient(#000 65%, transparent);
  pointer-events: none;
}
.app-showcase::after {
  content: '';
  position: absolute;
  inset: 25% -20% 0;
  z-index: -1;
  background: radial-gradient(ellipse at 65% 65%, #ddab7936, transparent 58%);
  mask: linear-gradient(transparent, #000 20% 70%, transparent);
  pointer-events: none;
}
.app-showcase .showcase-heading { margin-bottom: 42px; padding-inline: 24px; }
.app-showcase .showcase-heading h2 { font-size: clamp(42px, 4.8vw, 64px); }
/* The carousel is a depth stack, not a turntable: every phone faces you
   square on, and turning the carousel slides the next one into the middle
   while the others fall back and tuck behind it. Three are on screen at once;
   the rest wait at the second slot with nothing drawn. */
.app-carousel {
  --card-h: clamp(360px, 46vw, 580px);
  --card-w: calc(var(--card-h) * .49);
  /* How far a card steps sideways, and how far back it falls, per slot. */
  --shift: calc(var(--card-w) * .86);
  --sink: 280px;
  width: min(1200px, 100% - 48px);
  margin-inline: auto;
}
.app-stage {
  position: relative;
  height: var(--card-h);
  perspective: 1750px;
  perspective-origin: 50% 50%;
  outline-offset: 10px;
}
.app-ring {
  position: absolute;
  inset: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  transform-style: preserve-3d;
  /* The ring's own box sits at z = 0 and would occlude every card pushed
     behind it, so only the cards take the pointer. */
  pointer-events: none;
}
.app-shot {
  position: absolute;
  top: 0;
  left: 50%;
  width: var(--card-w);
  height: 100%;
  margin-left: calc(var(--card-w) / -2);
  transform: translateX(calc(var(--slot, 0) * var(--shift))) translateZ(calc(var(--depth, 0) * var(--sink) * -1));
  transition: transform .7s cubic-bezier(.22, 1, .36, 1), opacity .5s ease;
  pointer-events: auto;
}
.app-shot[data-depth="1"] { opacity: .78; }
/* Everything past the near neighbours waits in the same slot, undrawn, so a
   card that wraps round to the other side never slides across the picture. */
.app-shot[data-depth="2"] { opacity: 0; pointer-events: none; }
.app-shot-button {
  display: block;
  position: relative;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.app-device {
  display: block;
  position: relative;
  height: 100%;
  width: auto;
  margin-inline: auto;
  aspect-ratio: 1470 / 3000;
  filter: drop-shadow(0 22px 18px #39281730);
}
.app-device-screen {
  display: block;
  position: absolute;
  left: 5.10204082%;
  top: 2.2%;
  width: 89.79591837%;
  height: 95.6%;
  overflow: hidden;
  mask: url('assets/iphone-17-pro-max-mask.png') 0 0 / 100% 100% no-repeat;
  mask-mode: luminance;
}
.app-device .app-screen-image { width: 100%; height: 100%; }
.app-device .app-device-frame { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.app-device[data-device="pixel"] { aspect-ratio: 1408 / 2974; }
.app-device[data-device="pixel"] .app-device-screen {
  left: 4.26136364%;
  top: 2.05110962%;
  width: 90.90909091%;
  height: 96.03227976%;
  mask: none;
  border-radius: 8.515625% / 3.81652661%;
}
/* The zoom affordance belongs only to the card you can actually open. */
.app-shot[data-depth="0"] .app-shot-button::after {
  content: '⤢';
  display: grid;
  place-items: center;
  position: absolute;
  right: 50%;
  bottom: 26px;
  translate: calc(var(--card-w) / 2 - 46px) 0;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #15181ddd;
  color: white;
  font: 24px/1 var(--sans);
  opacity: 0;
  transition: opacity .2s;
}
.app-shot[data-depth="0"] .app-shot-button:hover::after,
.app-shot[data-depth="0"] .app-shot-button:focus-visible::after { opacity: 1; }

.app-controls { display: flex; align-items: center; justify-content: center; gap: 22px; margin-top: 30px; }
.app-nav {
  flex: none;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  padding: 0;
  border: 1px solid #2e28201f;
  border-radius: 50%;
  background: #ffffffb0;
  color: var(--ink);
  cursor: pointer;
  transition: border-color .2s, background .2s;
}
.app-nav:hover { border-color: #2e282052; background: #fff; }
.app-nav svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.app-readout { display: flex; align-items: baseline; justify-content: center; gap: 12px; min-width: min(340px, 62vw); margin: 0; text-align: center; }
.app-readout-name { font-family: var(--serif); font-size: 22px; letter-spacing: -.02em; }
.app-readout-platform { font-size: 13px; color: #655f55; }
.app-platforms { display: flex; gap: 12px; margin-block: -10px; }
.app-platforms[hidden] { display: none; }
.app-platforms button { min-height: 44px; min-width: 32px; padding: 0; border: 0; background: transparent; font-size: 13px; cursor: pointer; }
.app-platforms button[aria-pressed="true"] { color: var(--ink); text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px; }
.app-platforms button:hover { color: var(--ink); }

.app-dots { display: flex; align-items: center; justify-content: center; gap: 9px; margin-top: 18px; }
.app-dots button {
  width: 30px;
  height: 22px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.app-dots button::before { content: ''; display: block; width: 100%; height: 3px; border-radius: 2px; background: #2e282026; transition: background .25s; }
.app-dots button[aria-current="true"]::before { background: var(--ember); }
.app-dots button:hover::before { background: #2e282059; }

@media (prefers-reduced-motion: reduce) {
  .app-ring, .app-shot { transition: none; }
}
.motion-paused .app-ring, .motion-paused .app-shot { transition: none; }

@media (max-width: 900px) {
  .app-carousel { --card-h: clamp(300px, 62vw, 440px); --shift: calc(var(--card-w) * .8); --sink: 210px; }
  .app-stage { perspective: 1200px; }
  .app-readout-name { font-size: 19px; }
}
@media (max-width: 560px) {
  /* Pulled in and pushed back, so the two waiting screens keep their edges
     on a narrow display instead of bleeding off it. */
  .app-carousel { --card-h: min(106vw, 440px); --shift: calc(var(--card-w) * .64); --sink: 240px; width: 100%; }
  .app-controls { gap: 10px; margin-top: 22px; }
  .app-readout { flex-wrap: wrap; gap: 8px 10px; min-width: 0; }
  .app-readout-name { font-size: 17px; }
  .app-nav { width: 42px; height: 42px; }
}

.app-image-dialog {
  width: min(650px, calc(100vw - 24px));
  max-width: none;
  max-height: calc(100svh - 24px);
  padding: 0;
  border: 1px solid #ffffff30;
  border-radius: 16px;
  background: var(--dark);
  color: var(--dark-ink);
  overflow: auto;
}
.app-image-dialog::backdrop { background: #080a0de6; backdrop-filter: blur(8px); }
.app-image-bar { position: sticky; top: 0; z-index: 1; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 18px; background: var(--dark); }
.app-image-bar h2 { font: 400 15px/1.5 var(--sans); letter-spacing: 0; }
.app-image-bar button { width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: #ffffff0d; font-size: 27px; line-height: 1; }
.app-image-dialog > :is(img,picture) > img,.app-image-dialog > img { width: 100%; height: auto; margin: 0 auto; }

/* Carry the warmth between product sections while keeping the UI unaltered. */
.paper-playground {
  padding-top: 72px;
  background: radial-gradient(ellipse at 21% 66%, #e1c39938, transparent 49%), linear-gradient(#f3efe7, #f8f6f1);
}
.customization-showcase {
  background: radial-gradient(ellipse 72% 45% at 50% 50%, #e1cfb65c, transparent), #f7f5f0;
}
.features-bento { position: relative; isolation: isolate; }
.features-bento::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: 0 calc((100vw - 100%) / -2);
  background: linear-gradient(#f7f5f0, var(--ground));
  pointer-events: none;
}
@media (max-width: 800px) {
  .app-showcase { padding-block: 64px 48px; }
  .app-showcase::before { top: 160px; width: 125%; }
  .paper-playground { padding-top: 52px; }
  .app-showcase .showcase-heading { margin-bottom: 22px; }
}