/* Product stills: the captures supply every pixel of the reader UI. */
.showcase-heading { max-width: 780px; margin: 0 auto 54px; text-align: center; }
.showcase-heading h2 { font-size: clamp(46px, 5.2vw, 72px); text-wrap: balance; }
.showcase-heading p { color: var(--muted); font-size: 19px; line-height: 1.6; margin: 20px auto 0; max-width: 590px; text-wrap: pretty; }
.showcase-kicker { display: block; color: var(--ember); font-size: 15px; font-weight: 700; margin-bottom: 18px; }
.capture-device { position: relative; width: 100%; aspect-ratio: 1470 / 3000; isolation: isolate; }
.capture-screen { position: absolute; left: 5.10204%; top: 2.2%; width: 89.79592%; height: 95.6%; mask: url('assets/iphone-17-pro-max-mask.png') 0 0 / 100% 100%; mask-mode: luminance; overflow: hidden; }
.capture-screen img { width: 100%; height: 100%; }
.capture-bezel { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.paper-showcase { padding-block: 110px 100px; overflow: hidden; }
.paper-composition { display: grid; grid-template-columns: 1.15fr .85fr; align-items: center; gap: 64px; }
.paper-device-window { height: 620px; position: relative; overflow: hidden; background: var(--recessed); border-radius: 28px; }
.paper-device-window .capture-device { position: absolute; width: 94%; bottom: 28px; left: 3%; filter: drop-shadow(0 18px 14px #171a1f26); }
.paper-macro { margin: 0; min-width: 0; }
.paper-macro-window { aspect-ratio: 1 / 1; position: relative; overflow: hidden; border-radius: 22px; background: #e9e4d8; box-shadow: 0 20px 55px #171a1f12; }
.paper-macro-window img { position: absolute; width: 270%; max-width: none; height: auto; left: -74%; top: -342%; }
.paper-macro figcaption { display: flex; justify-content: space-between; gap: 16px; font-size: 16px; color: var(--muted); margin-top: 20px; }
.paper-macro figcaption span:last-child { color: var(--ember); }
.customization-showcase { padding-block: 110px 84px; overflow: hidden; background: var(--ground); }
.customization-showcase .showcase-heading { padding-inline: 24px; margin-bottom: 48px; }
.customization-showcase .showcase-heading p { max-width: 620px; }
.screenshot-viewport { overflow-x: auto; overflow-y: hidden; scrollbar-width: none; overscroll-behavior-x: contain; padding: 12px max(24px, calc((100vw - 1200px) / 2)) 28px; outline-offset: -5px!important; }
.screenshot-viewport::-webkit-scrollbar { display: none; }
.screenshot-track, .screenshot-group { display: flex; width: max-content; gap: 30px; }
.screenshot-card { width: clamp(270px, 25vw, 340px); margin: 0; flex: 0 0 auto; }
.screenshot-card .capture-screen { position: relative; inset: auto; width: 100%; height: auto; aspect-ratio: 1320 / 2868; mask: url('assets/iphone-17-pro-max-screen.svg') 0 0 / 100% 100% no-repeat; }
.screenshot-card figcaption { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 21px 10px 0; font-size: 17px; }
.screenshot-card figcaption span { color: var(--muted); font-size: 15px; }
.gallery-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 25px; padding-top: 20px; }
.gallery-toolbar p { color: var(--muted); font-size: 16px; }
.gallery-controls { display: flex; gap: 8px; flex-shrink: 0; }
.gallery-controls button { display: grid; place-items: center; min-width: 44px; height: 44px; padding: 0 14px; background: var(--raised); border: 1px solid var(--line); border-radius: 30px; font-size: 18px; }
.gallery-controls button:hover { border-color: var(--ink); }
.gallery-controls #gallery-motion { font-size: 14px; min-width: 91px; }
@media(min-width:1700px) { .screenshot-card { width: 365px; } }
@media(max-width:1000px) {
  .paper-composition { gap: 30px; }
  .paper-device-window { height: 500px; }
}
@media(max-width:700px) {
  .paper-showcase, .customization-showcase { padding-block: 70px; }
  .showcase-heading { margin-bottom: 36px; }
  .showcase-heading p { font-size: 17px; }
  .paper-composition { grid-template-columns: 1fr; gap: 30px; }
  .paper-device-window { height: 430px; }
  .paper-macro { display: none; }
  .screenshot-card { width: min(290px, 78vw); }
  .screenshot-track, .screenshot-group { gap: 20px; }
  .screenshot-viewport { padding-inline: 20px; }
  .gallery-toolbar { flex-wrap: wrap; justify-content: center; text-align: center; gap: 18px; }
}