/* The experience: a quiet, scroll-directed product tour. */
.experience-film { border-top: 1px solid var(--soft-line); padding-top: clamp(80px, 10vw, 145px); }
.experience-intro { padding-inline: 20px; margin-bottom: 36px; }
.experience-intro h2 em { font-weight: 400; }
.experience-scene { position: relative; max-width: 1180px; margin: auto; padding: 95px 50px 60px; display: grid; grid-template-columns: 1fr 1fr; gap: 70px; align-items: center; }
.experience-overline { color: var(--faint); font-size: 10px; letter-spacing: .12em; margin: 0 0 40px; }
.experience-chapter { margin-bottom: 36px; }
.chapter-number { font-size: 10px; letter-spacing: .08em; color: var(--muted); }
.experience-chapter h3 { margin: 20px 0; font: 400 clamp(42px, 4.8vw, 70px)/.98 var(--serif); letter-spacing: -.045em; }
.experience-chapter h3 em { font-weight: 400; }
.experience-chapter p { max-width: 410px; color: var(--muted); font-size: 15px; line-height: 1.65; margin: 0; }
.experience-progress { display: none; gap: 12px; margin-top: 32px; }
.experience-progress a { flex: 1; max-width: 64px; color: var(--faint); font-size: 10px; padding: 10px 0; }
.experience-progress a span { display: block; height: 2px; background: #e9e9e6; margin-bottom: 9px; }
.experience-progress a[aria-current] { color: var(--ink); }
.experience-progress a[aria-current] span { background: var(--ink); }
.experience-progress a:focus-visible { outline: 1px solid; outline-offset: 5px; }
.experience-device-stage { position: relative; height: min(650px, calc(100svh - 180px)); display: flex; align-items: center; justify-content: center; isolation: isolate; }
.experience-watermark { position: absolute; z-index: -1; top: 20%; left: -17%; color: #eeeeeb; font: 400 clamp(100px, 15vw, 210px)/.8 var(--serif); letter-spacing: -.06em; transform: translateY(var(--back-drift, 0px)); }
.silver-phone { position: relative; height: 100%; aspect-ratio: .51; padding: 9px; border: 1px solid #bcc0c0; border-radius: 48px; background: linear-gradient(100deg, #fff 0%, #c3c6c7 1%, #fff 3%, #f8f8f8 94%, #9da1a4 98%, #fff); box-shadow: 0 24px 55px -28px #2225, inset 0 0 0 3px #fff; transform: translateY(var(--phone-drift, 0px)); }
.silver-phone::before { position: absolute; left: -3px; top: 21%; height: 44px; width: 2px; background: #b3b6b8; border-radius: 3px; content: ''; }
.silver-screen { position: relative; height: 100%; overflow: hidden; border: 1px solid #929799; border-radius: 39px; background: #000; }
.silver-island { position: absolute; z-index: 3; top: 12px; left: 50%; transform: translateX(-50%); width: 29%; height: 23px; border: 1px solid #525a60; border-radius: 20px; background: linear-gradient(160deg, #424d54, #0a1219 60%, #303a41); box-shadow: 0 1px 3px #0008; }
.silver-island i { position: absolute; right: 8px; top: 6px; width: 9px; height: 9px; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #719bb7, #102638 48%, #03080e 70%); }
.product-window { position: absolute; inset: 47px 0 25px; overflow: hidden; }
.product-focus { display: none; position: absolute; border: 1px solid #ffffff70; border-radius: 12px; box-shadow: 0 0 0 900px #0009; pointer-events: none; transition: top .45s ease, left .45s ease, width .45s ease, height .45s ease; }
.experience-enhanced .product-focus { display: block; }
.experience-product { display: block; width: 100%; height: auto; transform: translateY(var(--screen-shift, 0px)); }
.silver-home { position: absolute; bottom: 10px; left: 35%; width: 30%; height: 3px; border-radius: 10px; background: #e2e2e2; }
.experience-device-caption { position: absolute; bottom: -30px; color: var(--faint); font-size: 9px; letter-spacing: .12em; }
.experience-scroll-hint { display: none; position: absolute; bottom: 12px; left: 50px; font-size: 10px; color: var(--faint); letter-spacing: .06em; }
.experience-scroll-hint span { margin-left: 20px; }
.experience-outro { text-align: center; margin: 70px 20px 110px; font: 400 clamp(36px, 5vw, 64px)/1.05 var(--serif); letter-spacing: -.04em; }
/* Only pin the sequence once its controller is ready. Without JS all copy remains readable. */
.experience-enhanced .experience-scroll { height: 420svh; }
.experience-enhanced .experience-scene { position: sticky; top: 0; height: 100svh; }
.experience-enhanced .experience-chapters { display: grid; }
.experience-enhanced .experience-chapter { grid-area: 1 / 1; margin: 0; opacity: 0; visibility: hidden; transform: translateY(20px); transition: opacity .35s ease, transform .5s ease, visibility .35s; }
.experience-enhanced .experience-chapter.is-current { opacity: 1; visibility: visible; transform: none; }
.experience-enhanced .experience-progress, .experience-enhanced .experience-scroll-hint { display: flex; }
@media (min-width: 721px) and (max-width: 1000px) {
  .experience-scene { gap: 30px; padding-inline: 36px; }
}
@media (max-width: 720px) {
  .experience-scene { padding: 85px 24px 45px; grid-template-columns: 1fr; gap: 22px; }
  .experience-overline { display: none; }
  .experience-chapter h3 { font-size: clamp(34px, 9vw, 48px); margin: 10px 0; }
  .experience-chapter p { font-size: 12px; line-height: 1.5; max-width: 400px; }
  .chapter-number { font-size: 9px; }
  .experience-progress { margin-top: 10px; gap: 10px; }
  .experience-progress a { padding: 5px 0; }
  .experience-progress a span { margin-bottom: 5px; }
  .experience-device-stage { height: min(440px, 49svh); }
  .experience-enhanced .experience-scene { grid-template-rows: auto minmax(0, 1fr); gap: 16px; }
  .experience-enhanced .experience-device-stage { height: 100%; min-height: 0; }
  .silver-phone { border-radius: 34px; padding: 6px; }
  .silver-screen { border-radius: 28px; }
  .silver-island { top: 8px; height: 17px; }
  .silver-island i { top: 4px; right: 5px; width: 7px; height: 7px; }
  .product-window { top: 35px; bottom: 19px; }
  .silver-home { bottom: 8px; height: 2px; }
  .experience-watermark { font-size: 130px; left: 7%; top: 22%; }
  .experience-device-caption { bottom: -24px; font-size: 8px; }
  .experience-enhanced .experience-scroll-hint { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .experience-enhanced .experience-scroll { height: auto; }
  .experience-enhanced .experience-scene { position: relative; height: auto; }
  .experience-enhanced .experience-chapters { display: block; }
  .experience-enhanced .experience-chapter { visibility: visible; opacity: 1; transform: none; transition: none; margin-bottom: 30px; }
  .experience-enhanced .experience-progress, .experience-enhanced .experience-scroll-hint { display: none; }
  .experience-enhanced .experience-device-stage { height: min(650px, 75svh); }
  .experience-product { height: 100%; object-fit: contain; }
  .experience-enhanced .product-focus { display: none; }
  .experience-product, .silver-phone, .experience-watermark { transform: none; }
}