/* Mobile landing layout correction — 2026-08-25 */
@media (width <= 600px) {
  .landing-shots, .landing-features, .landing-steps { padding: 56px 20px; gap: 28px; }
  .landing-features > .reveal, .landing-features .features-grid, .features-grid > .reveal { box-sizing: border-box; width: 100%; min-width: 0; max-width: 100%; }
  .features-grid { grid-template-columns: minmax(0, 1fr); }
  .feature-card { min-width: 0; padding: 22px 18px; }
}

/* Keep the three-step section in the mobile viewport. */
@media (width <= 600px) {
  .landing-steps > .reveal, .landing-steps .steps-grid, .steps-grid > .reveal { box-sizing: border-box; width: 100%; min-width: 0; max-width: 100%; }
  .steps-grid { grid-template-columns: minmax(0, 1fr); }
  .steps-grid article { min-width: 0; padding: 24px 18px; }
}

/* Layered product showcase — no horizontal scrolling. */
.landing-shots .showcase-gallery { position: relative; display: block; height: clamp(470px, 126vw, 560px); padding: 0; overflow: hidden; scroll-snap-type: none; }
.showcase-gallery .shot { position: absolute; top: 8px; left: 50%; width: clamp(164px, 55vw, 238px); margin: 0; pointer-events: none; transform-origin: center center; transition: transform 780ms cubic-bezier(.22,.8,.22,1), opacity 520ms ease, filter 520ms ease; }
.showcase-gallery .shot img { width: 100%; display: block; }
.showcase-gallery .shot figcaption { transition: opacity 360ms ease, transform 360ms ease; }
.showcase-gallery .shot[data-showcase="center"] { z-index: 3; opacity: 1; filter: none; transform: translate3d(-50%, 0, 0) scale(1); }
.showcase-gallery .shot[data-showcase="left"] { z-index: 2; opacity: .42; filter: saturate(.65) blur(.2px); transform: translate3d(calc(-50% - min(43vw, 215px)), 30px, 0) scale(.72); }
.showcase-gallery .shot[data-showcase="right"] { z-index: 2; opacity: .42; filter: saturate(.65) blur(.2px); transform: translate3d(calc(-50% + min(43vw, 215px)), 30px, 0) scale(.72); }
.showcase-gallery .shot[data-showcase="hidden"] { z-index: 1; opacity: 0; filter: blur(3px); transform: translate3d(-50%, 56px, 0) scale(.58); }
.showcase-gallery .shot:not([data-showcase="center"]) figcaption { opacity: 0; transform: translateY(-6px); }
.gallery-toggle { display: block; margin: 14px auto 0; min-height: 44px; color: #c4b5fd; background: #ffffff0d; border: 1px solid #ffffff26; border-radius: 999px; padding: 0 16px; font: inherit; font-size: 12px; cursor: pointer; }
.gallery-toggle:hover { background: #ffffff18; }
.landing-hero-visual .phone.real.float-a { box-sizing: border-box; width: min(286px, 72vw); padding: 9px; overflow: hidden; isolation: isolate; border: 7px solid #15131d; border-radius: 46px; background: linear-gradient(145deg, #34303f, #08070c 48%, #292631); box-shadow: -28px 34px 66px rgba(0,0,0,.48), 0 0 42px rgba(124,58,237,.24); transform-style: preserve-3d; animation: iphoneFloat 7s ease-in-out infinite; }
.landing-hero-visual .phone.real::before { content: ""; position: absolute; z-index: 4; top: 7px; left: 50%; width: 76px; height: 19px; background: #09080d; border-radius: 0 0 15px 15px; transform: translateX(-50%); box-shadow: inset 0 -1px rgba(255,255,255,.06); }
.landing-hero-visual .phone.real::after { content: ""; position: absolute; z-index: 3; inset: 9px; pointer-events: none; border-radius: 32px; background: linear-gradient(118deg, rgba(255,255,255,.18), transparent 24%, transparent 72%, rgba(167,139,250,.12)); }
.landing-hero-visual .phone.real img { position: relative; z-index: 1; border-radius: 31px; }
@keyframes iphoneFloat { 0%, 100% { transform: perspective(1100px) rotateY(-10deg) rotateZ(-3deg) translateY(0); } 50% { transform: perspective(1100px) rotateY(-6deg) rotateZ(-1.5deg) translateY(-15px); } }
@media (prefers-reduced-motion: reduce) { .landing-hero-visual .phone.real.float-a { animation: none; } .showcase-gallery .shot { transition: none; } }