/* Full-bleed scene illustrations belong to the landing page only. */
.scene-band { position: relative; isolation: isolate; overflow: clip; }
.scene-art { position: absolute; inset: 0; z-index: -2; pointer-events: none; }
.scene-art img { width: 100%; height: 100%; object-fit: cover; object-position: var(--scene-position, center); }
.scene-band::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(0deg, #121112 0%, #12111200 14%, #12111200 86%, #121112 100%), var(--scene-shade); }
.scene-band .section { position: relative; border: 0; }
.scene-band .experience-body>p:first-child { font-size: clamp(19px, 2.1vw, 23px); }
.scene-band h2 { text-shadow: 0 2px 22px #12111266; }
.scene-band .experience-body, .scene-band .gesture-copy>p:not(.eyebrow), .scene-band .create-body { color: #e1d4c7; }
.scene-band .small { color: #d0c1b2; }
.scene-experience { --scene-position: center 55%; --scene-shade: linear-gradient(90deg, #121112b3 0%, #12111285 50%, #121112aa 100%); }
.scene-experience .experience { min-height: 570px; padding-top: 115px; padding-bottom: 115px; }
.scene-gesture { --scene-position: center 65%; --scene-shade: linear-gradient(90deg, #121112cc 0%, #12111288 42%, #12111242 100%); }
.scene-gesture .gesture { min-height: 650px; }
.scene-gesture .gesture-example { background: #191517db; border-color: #ead8c233; backdrop-filter: blur(10px); }
.scene-create { --scene-position: center 55%; --scene-shade: linear-gradient(90deg, #12111288 0%, #121112a6 46%, #121112cf 100%); }
.scene-create .create { min-height: 620px; align-items: center; padding-top: 125px; padding-bottom: 125px; }
.scene-create .create-body { padding-top: 0; }
.scene-finale { --scene-position: 75% center; --scene-shade: linear-gradient(90deg, #121112aa, #121112bf 30%, #121112bf 70%, #12111288); }
.scene-finale .faq { max-width: 1000px; }
.scene-finale .faq-list { border-color: #ead8c24d; }
.scene-finale details { border-color: #ead8c23d; }
.scene-finale details>p { color: #e1d4c7; }
.scene-finale .closing { background: none; }
@media (max-width: 950px) {
  .scene-band .section { padding-top: 90px; padding-bottom: 90px; }
  .scene-gesture .gesture { gap: 5%; }
}
@media (max-width: 620px) {
  .scene-band .section { padding: 78px 24px; min-height: 0; }
  .scene-band::before { background: linear-gradient(0deg, #121112 0%, #12111200 9%, #12111200 91%, #121112 100%), var(--scene-shade); }
  .scene-experience { --scene-position: 26% center; --scene-shade: linear-gradient(90deg, #121112b8, #1211129c 65%, #12111273); }
  .scene-gesture { --scene-position: 70% center; --scene-shade: linear-gradient(90deg, #121112bd, #1211127a); }
  .scene-create { --scene-position: 24% center; --scene-shade: linear-gradient(90deg, #121112b8, #1211128f); }
  .scene-finale { --scene-position: 78% center; --scene-shade: linear-gradient(90deg, #121112b3, #121112bf 65%, #1211128f); }
  .scene-band .experience-body>p:first-child { font-size: 20px; }
  .scene-band .eyebrow { font-size: 13px; letter-spacing: .06em; }
  .scene-gesture .gesture-example { padding: 25px 22px; }
  .scene-finale .closing { padding-top: 55px; }
}
