/* Scroll story: the original screenshots remain the accessible/mobile fallback. */
.motion-stage { display: none; }
@media (min-width: 901px) and (prefers-reduced-motion: no-preference) {
  .motion-ready .story-section {
    position: relative; top: auto; height: auto; min-height: 110vh;
    border-radius: 0; box-shadow: none; border-top: 0; overflow: hidden;
    padding: 120px 0; background: #090c0b !important;
  }
  .motion-ready #hero { min-height: 100vh; }
  .motion-ready .story-section::after {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(ellipse at 75% 50%, rgba(198,230,51,.055), transparent 60%);
  }
  .motion-ready #features::after, .motion-ready #pickup::after {
    background: radial-gradient(ellipse at 25% 50%, rgba(198,230,51,.065), transparent 60%);
  }
  .motion-ready .story-section .container { position: relative; z-index: 1; }
  .motion-ready .story-section .phone-wrap { opacity: 0 !important; pointer-events: none; }
  .motion-ready .story-section .split-grid,
  .motion-ready .story-section .snap-grid { grid-template-columns: 1fr 1fr; gap: 90px; }
  .motion-ready #features .snap-content, .motion-ready #pickup .snap-content { grid-column: 2; grid-row: 1; padding-right: 0; }
  .motion-ready #features .snap-visual, .motion-ready #pickup .snap-visual { grid-column: 1; grid-row: 1; }
  .motion-ready .story-section .section-label::before { content: attr(data-chapter); margin-right: 18px; opacity: .5; }
  .motion-ready .story-section .snap-title { font-size: clamp(3rem, 5.7vw, 5.5rem); }
  .motion-ready .story-section .snap-desc { max-width: 420px; }
  .motion-ready .motion-stage { display: block; position: fixed; inset: 0; pointer-events: none; z-index: 8; overflow: hidden; }
  .motion-device { position: absolute; top: 0; left: 0; width: min(270px, 32vh); will-change: transform; }
  .motion-device::before { content: ''; position: absolute; inset: -80px; border-radius: 50%; background: radial-gradient(ellipse, #c6e63319, transparent 66%); }
  .motion-device .phone { width: 100%; max-width: none; transform: none; filter: drop-shadow(0 30px 35px #0009); }
  .motion-screen { position: relative; aspect-ratio: 860 / 1864; overflow: hidden; border-radius: 8px; background: #f7f7f5; }
  .motion-screen img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; will-change: opacity; }
  .motion-caption { position: relative; display: flex; justify-content: space-between; margin-top: 20px; color: #c6e633; font: 10px/1.5 monospace; letter-spacing: .14em; text-transform: uppercase; }
  .motion-track { height: 2px; margin-top: 10px; background: #ffffff20; }
  .motion-track span { display: block; height: 100%; background: #c6e633; transform-origin: left; }
  .motion-sample { margin-top: 10px; color: #7c837b; font-size: 10px; text-align: center; }
  .motion-ready #reviews, .motion-ready #download { position: relative; top: auto; height: auto; min-height: 90vh; border-radius: 0; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal { opacity: 1 !important; transform: none !important; }
  .card-stack { position: relative; top: auto; height: auto; min-height: 100vh; }
}

/* Editorial details and a restrained, scroll-linked orbit. */
.story-chapters { display: none; }
.story-detail { display: flex; align-items: center; gap: 16px; margin-top: 32px; padding-top: 22px; border-top: 1px solid #ffffff18; max-width: 420px; text-align: left; }
.story-detail-icon { display: grid; place-items: center; flex-shrink: 0; width: 42px; height: 42px; border-radius: 50%; border: 1px solid #c6e63355; color: #c6e633; font-size: 22px; }
.story-detail strong { font-size: 14px; font-weight: 500; color: #edf1e8; }
.story-detail p { margin: 5px 0 0; font-size: 12px; line-height: 1.6; color: #8c9389; }
@media (min-width: 901px) and (prefers-reduced-motion: no-preference) {
  .motion-ready .story-section { background: #080b09 !important; }
  .motion-ready .story-section::before {
    content: attr(data-story); position: absolute; inset: auto auto 3% -1%;
    width: auto; height: auto; border-radius: 0; filter: none;
    font-size: clamp(110px, 17vw, 260px); font-weight: 900; letter-spacing: -.075em;
    white-space: nowrap; line-height: 1; color: transparent;
    -webkit-text-stroke: 1px #c6e63313; background: none;
    transform: translate3d(0, var(--story-drift, 0px), 0); pointer-events: none;
  }
  .motion-ready .story-section::after {
    background-image: radial-gradient(ellipse at 75% 50%, #c6e6330d, transparent 60%), linear-gradient(#ffffff03 1px, transparent 1px), linear-gradient(90deg, #ffffff03 1px, transparent 1px);
    background-size: auto, 80px 80px, 80px 80px;
    mask-image: linear-gradient(transparent, black 25%, black 75%, transparent);
  }
  .motion-ready #features::after, .motion-ready #pickup::after {
    background-image: radial-gradient(ellipse at 25% 50%, #c6e63314, transparent 60%), linear-gradient(#ffffff03 1px, transparent 1px), linear-gradient(90deg, #ffffff03 1px, transparent 1px);
  }
  .motion-ready .story-section .snap-title { letter-spacing: -.065em; }
  .motion-ready .hero h1 em { background: linear-gradient(110deg, #ecff9b, #c6e633 60%, #88ad38); background-clip: text; -webkit-text-fill-color: transparent; }
  .motion-ready .hero .trust-row { margin-top: 28px; }
  .motion-ready #hero .story-detail { display: none; }
  .motion-orbit { position: absolute; z-index: -1; width: 175%; aspect-ratio: 1; left: -37.5%; top: 13%; border: 1px solid #c6e63320; border-radius: 50%; transform: rotate(-30deg) scaleY(.8); box-shadow: 0 0 90px #c6e63309, inset 0 0 90px #c6e63307; }
  .motion-orbit::before { content: ''; position: absolute; inset: -35px; border: 1px dashed #c6e63315; border-radius: 50%; }
  .motion-orbit::after { content: ''; position: absolute; top: 18%; left: 10%; width: 9px; height: 9px; border-radius: 50%; background: #c6e633; box-shadow: 0 0 25px #c6e63380; }
  .motion-device .phone { border-color: #363b32; box-shadow: inset 0 0 0 2px #939d7d66, 0 0 0 1px #050704, 15px 30px 70px #000a; }
  .motion-ready .story-chapters { position: fixed; z-index: 20; display: flex; gap: 18px; bottom: 24px; left: 50%; transform: translateX(-50%); padding: 10px 18px; border: 1px solid #ffffff15; border-radius: 30px; background: #10150ee6; backdrop-filter: blur(16px); }
  .story-chapters a { display: flex; gap: 9px; align-items: center; color: #a0a598; font: 10px monospace; padding: 6px 2px; text-decoration: none; }
  .story-chapters i { width: 5px; height: 5px; border-radius: 50%; background: #565e4c; transition: background .25s, box-shadow .25s; }
  .story-chapters a[aria-current] { color: #d5f36a; }
  .story-chapters a[aria-current] i { background: #d5f36a; box-shadow: 0 0 12px #d5f36a80; }
  .story-chapters a:focus-visible { outline: 2px solid #c6e633; outline-offset: 5px; }
  .motion-caption { font-size: 9px; }
  .motion-ready .story-section { scroll-margin-top: 70px; }
}
@media (max-width: 900px) {
  .story-detail { margin: 24px auto 0; }
}
@media (min-width: 901px) and (prefers-reduced-motion: no-preference) {
  .motion-ready .story-section { min-height: 100vh; padding: 100px 0 80px; }
  .motion-ready .story-section .phone-wrap { height: min(560px, 65vh); }
  .motion-ready .story-section .snap-desc { font-size: clamp(1rem, 1.5vw, 1.2rem); line-height: 1.65; }
}

/* Two-sided handset: the screen stays upright while the chassis turns. */
@media (min-width: 901px) and (prefers-reduced-motion: no-preference) {
  .device-perspective { perspective: 1100px; }
  .device-body { position: relative; transform-style: preserve-3d; will-change: transform; }
  .motion-device .device-front {
    position: relative; transform: translateZ(7px); backface-visibility: hidden;
    border: 3px solid #a5aaa8; border-radius: 37px; padding: 27px 6px 19px;
    background: #080a0b; filter: none;
    box-shadow: inset 0 0 0 2px #323638, 0 0 0 1px #191d20;
  }
  .motion-device .device-front::before {
    top: 9px; width: 47px; height: 12px; border-radius: 12px; background: #010203;
    box-shadow: inset -8px 0 0 -3px #142335; z-index: 3;
  }
  .motion-device .device-front::after { bottom: 7px; width: 66px; height: 3px; background: #cbd0d1; }
  .motion-device .motion-screen { border-radius: 15px; }
  .device-back {
    position: absolute; inset: 0; border-radius: 37px; border: 3px solid #a5aaa8;
    transform: rotateY(180deg) translateZ(7px); backface-visibility: hidden;
    background: linear-gradient(125deg, #48504e 0%, #232b28 32%, #343e38 68%, #151b18);
    box-shadow: inset 0 0 0 2px #101713, inset 12px 0 30px #ffffff08;
  }
  .device-back::after { content: ''; position: absolute; inset: 3px; border-radius: 30px; background: linear-gradient(115deg, transparent 25%, #ffffff09 45%, transparent 65%); pointer-events: none; }
  .camera-island { position: absolute; top: 15px; left: 13px; width: 91px; height: 99px; border-radius: 24px; border: 1px solid #818b80; background: linear-gradient(135deg, #4c574f, #29332c); box-shadow: 4px 4px 8px #0006; }
  .camera-island i { position: absolute; width: 33px; height: 33px; border-radius: 50%; border: 3px solid #7e897e; background: radial-gradient(circle at 43% 40%, #304f6b 0 9%, #070b12 12% 28%, #1c2e38 32%, #030507 50%); box-shadow: 0 0 0 2px #111813, 2px 3px 5px #000a; }
  .camera-island i:nth-child(1) { top: 9px; left: 8px; }
  .camera-island i:nth-child(2) { bottom: 9px; left: 8px; }
  .camera-island i:nth-child(3) { top: 33px; right: 7px; }
  .camera-island b { position: absolute; top: 10px; right: 16px; width: 12px; height: 12px; border-radius: 50%; background: #e4e1c8; box-shadow: 0 0 0 2px #1a241e; }
  .device-brand { position: absolute; top: 47%; left: 0; width: 100%; text-align: center; font-weight: 900; font-size: 34px; letter-spacing: -3px; color: #b6c1ae; opacity: .65; }
  .device-back-label { position: absolute; bottom: 35px; width: 100%; text-align: center; font: 6px monospace; letter-spacing: 1.5px; color: #8b978d; }
  .device-edge { position: absolute; top: 33px; bottom: 33px; width: 14px; background: linear-gradient(90deg, #3d4445, #bdc3be 50%, #555d58); }
  .edge-left { left: -7px; transform: rotateY(90deg); }
  .edge-right { right: -7px; transform: rotateY(90deg); }
  .device-button { position: absolute; width: 5px; background: linear-gradient(90deg, #a6aea8, #424b45); border: 1px solid #89948c; border-radius: 3px; transform: translateZ(3px); }
  .button-power { right: -4px; top: 120px; height: 45px; }
  .button-volume { left: -4px; top: 95px; height: 62px; }
}