/* Scoped checkout story. The existing hero and page grid are untouched. */
.checkout-story { padding: 104px 0 92px; overflow: clip; scroll-margin-top: 100px; background: #05050a; }
.checkout-heading { display: flex; justify-content: space-between; align-items: end; gap: 32px; margin-bottom: 38px; }
.checkout-heading h2 { font-size: clamp(42px, 5.7vw, 76px); line-height: 1.05; letter-spacing: -.06em; font-weight: 700; margin: 16px 0 0; }
.checkout-heading p { color: #aaa5b9; font-size: 16px; line-height: 1.7; margin: 0 0 5px; }
.checkout-film { position: relative; aspect-ratio: 3 / 2; isolation: isolate; overflow: hidden; border-radius: 30px; background: #151316; border: 1px solid #ffffff12; }
.checkout-composition { position: absolute; inset: 0; transform: scale(var(--checkout-zoom,1.015)); transform-origin: 62% 50%; }
.checkout-store { position: absolute; z-index: 0; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.checkout-screen { position: absolute; z-index: 1; left: 51.17%; top: 11.32%; width: 19.21%; height: 60.8%; border-radius: 14% / 6.7%; overflow: hidden; background: #0b0a14; }
.checkout-video { display: block; width: 100%; height: 100%; object-fit: fill; }
.checkout-hand { position: absolute; z-index: 2; width: 78%; height: auto; left: 0; top: -12%; transform-origin: 12% 65%; transform: translate(-45%,18%) rotate(-8deg); opacity: 0; pointer-events: none; filter: drop-shadow(4px 9px 8px #0003); will-change: transform; }
.checkout-tap-light { position: absolute; z-index: 3; left: 61%; top: 18%; width: 6%; aspect-ratio: 1; border: 1px solid #b8efdf; box-shadow: 0 0 24px #6cdabd55; border-radius: 50%; opacity: var(--tap-light,0); transform: translate(-50%,-50%) scale(var(--tap-scale,1)); pointer-events: none; }
.checkout-shade { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(0deg,#05050ae8,transparent 29%,transparent 78%,#05050a70),linear-gradient(90deg,#05050a45,transparent 42%); }
.checkout-scene-label { position: absolute; top: 30px; left: 32px; right: 32px; display: flex; justify-content: space-between; gap: 12px; font-size: 11px; font-weight: 700; letter-spacing: .13em; color: #efedf3; }
.checkout-demo-label { font-size: 11px; font-weight: 500; letter-spacing: .025em; color: #f4f0edb3; }
.checkout-caption { position: absolute; left: 34px; bottom: 47px; display: grid; gap: 8px; max-width: 64%; }
.checkout-counter { font-size: 12px; color: #c2b2ed; letter-spacing: .15em; }
.checkout-current-title { font-size: clamp(24px,3vw,38px); font-weight: 600; letter-spacing: -.035em; }
.checkout-current-description { font-size: 14px; color: #c0bbc9; }
.checkout-controls { position: absolute; bottom: 48px; right: 32px; display: flex; align-items: center; gap: 10px; }
.checkout-controls button { display: inline-flex; justify-content: center; align-items: center; gap: 8px; padding: 0; min-height: 44px; border: 1px solid #ffffff30; color: #fff; background: #14131b99; backdrop-filter: blur(18px); cursor: pointer; transition: background .2s,border-color .2s; }
.checkout-controls button:hover { background: #35303b; border-color: #ffffff70; }
.checkout-controls button:focus-visible, .checkout-chapter:focus-visible { outline: 2px solid #c4b3ff; outline-offset: 5px; }
.checkout-controls .checkout-toggle { border-radius: 99px; padding-inline: 18px; font-size: 13px; }
.checkout-controls .checkout-replay { width: 44px; border-radius: 50%; }
.checkout-controls svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.checkout-controls .checkout-play-icon { width: 16px; fill: currentColor; stroke: none; }
.checkout-controls .checkout-pause-icon { display: none; }
.checkout-film.is-playing .checkout-pause-icon { display: block; }
.checkout-film.is-playing .checkout-play-icon { display: none; }
.checkout-timeline { position: absolute; height: 2px; left: 34px; right: 34px; bottom: 25px; background: #ffffff21; }
.checkout-timeline i { display: block; height: 100%; background: #d1bcff; transform-origin: left; transform: scaleX(var(--checkout-progress,0)); }
.checkout-film[data-checkout-phase="paid"] .checkout-timeline i { background: #a8edcc; }
.checkout-chapters { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 28px; margin-top: 28px; }
.checkout-chapter { position: relative; display: flex; align-items: flex-start; gap: 14px; text-align: left; color: #8e899d; background: transparent; border: 0; padding: 18px 0 25px; cursor: pointer; }
.checkout-chapter-number { font-size: 12px; padding-top: 4px; color: #797282; letter-spacing: .05em; }
.checkout-chapter strong { display: block; font-size: 17px; font-weight: 600; letter-spacing: -.015em; }
.checkout-chapter small { display: block; margin-top: 7px; font-size: 13px; line-height: 1.55; color: #837d92; }
.checkout-chapter i { position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background: #ffffff15; }
.checkout-chapter[aria-current="step"] { color: #f3efff; }
.checkout-chapter[aria-current="step"] .checkout-chapter-number { color: #b69cf6; }
.checkout-chapter[aria-current="step"] i { background: #b69cf6; box-shadow: 0 0 15px #9b65ff26; }
.checkout-chapter:hover { color: #ddd5ee; }
.checkout-downloads { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 13px; margin-top: 35px; }
.checkout-store-link { display: inline-flex; align-items: center; justify-content: center; height: 64px; border-radius: 10px; transition: opacity .2s,transform .2s; }
.checkout-store-link:hover { opacity: .84; transform: translateY(-2px); }
.checkout-store-link:focus-visible { outline: 2px solid #c4b3ff; outline-offset: 5px; }
.checkout-app-store img { display: block; width: 180px; height: 60px; }
.checkout-google-play { width: 203px; }
.checkout-google-play img { display: block; width: 226px; height: auto; max-width: none; }
.checkout-footnote { text-align: right; margin: 19px 0 0; color: #736d83; font-size: 11px; line-height: 1.5; }
@media(max-width:900px) {
  .checkout-story { padding: 75px 0; }
  .checkout-heading { display: block; margin-bottom: 28px; }
  .checkout-heading p { margin-top: 20px; }
  .checkout-chapters { gap: 18px; }
  .checkout-current-description { display: none; }
}
@media(max-width:600px) {
  .checkout-story > .shell { width: calc(100% - 32px); }
  .checkout-heading h2 { font-size: clamp(37px,9.8vw,55px); }
  .checkout-heading p { font-size: 15px; }
  .checkout-film { aspect-ratio: 4/5; border-radius: 22px; }
  .checkout-composition { width: 178%; height: 95%; left: -60%; top: 0; }
  .checkout-shade { background: linear-gradient(0deg,#05050a 2%,#05050adb 17%,transparent 43%,transparent 87%,#05050a66); }
  .checkout-scene-label { top: 20px; left: 20px; right: 20px; font-size: 9px; }
  .checkout-demo-label { font-size: 9px; }
  .checkout-caption { left: 20px; bottom: 94px; max-width: calc(100% - 40px); gap: 6px; }
  .checkout-current-title { font-size: 26px; }
  .checkout-counter { font-size: 10px; }
  .checkout-controls { bottom: 27px; left: 18px; right: auto; }
  .checkout-controls .checkout-toggle { min-height: 40px; font-size: 12px; padding-inline: 15px; }
  .checkout-controls .checkout-replay { min-height: 40px; width: 40px; }
  .checkout-timeline { left: 20px; right: 20px; bottom: 13px; }
  .checkout-chapters { gap: 12px; margin-top: 12px; }
  .checkout-chapter { display: block; padding: 12px 0 18px; }
  .checkout-chapter-number { display: block; margin-bottom: 8px; font-size: 10px; }
  .checkout-chapter strong { font-size: 13px; line-height: 1.5; }
  .checkout-chapter small { display: none; }
  .checkout-footnote { font-size: 10px; text-align: left; }
  .checkout-downloads { gap: 8px; margin-top: 25px; }
  .checkout-store-link { height: 52px; }
  .checkout-app-store img { width: 144px; height: 48px; }
  .checkout-google-play { width: 164px; }
  .checkout-google-play img { width: 182px; }
}
@media(prefers-reduced-motion:reduce) { .checkout-composition { transform: none; } }