.oh {
  position: relative; isolation: isolate; overflow: hidden;
  display: grid; min-height: max(680px, min(100svh, 960px));
}
.oh-aura {
  position: absolute; z-index: -2; top: -34%; right: -22%; width: min(104vw, 1440px); max-width: none; height: auto; aspect-ratio: 5 / 4;
  object-fit: cover; filter: blur(120px) saturate(1.3); opacity: .82; pointer-events: none;
}
.oh::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(62% 70% at 6% 58%, rgba(15,13,13,.6), transparent 72%),
    linear-gradient(to top, var(--bg), transparent 24%);
}
.oh-body {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: clamp(32px, 5vw, 88px);
  padding-top: 112px;
}
.oh-copy { align-self: center; display: grid; justify-items: start; gap: 28px; padding-bottom: 64px; }
.oh h1 { display: grid; margin-left: -0.045em; font-size: clamp(46px, 6.8vw, 104px); line-height: .9; letter-spacing: -0.055em; font-weight: 800; }
.oh .lede { max-width: 34ch; text-wrap: pretty; }
.oh-phone {
  --w: clamp(270px, 25vw, 356px);
  align-self: end; margin-bottom: calc(var(--w) * -.5);
  -webkit-mask-image: linear-gradient(#000 50%, transparent 75%); mask-image: linear-gradient(#000 50%, transparent 75%);
  animation: device-rise .9s cubic-bezier(.2,0,0,1) both;
}

.prep { padding-block: clamp(88px, 11vw, 160px) 0; }
.prep-head, .lost-head {
  display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 20px clamp(32px, 6vw, 96px); align-items: end;
}
.prep-head { margin-bottom: clamp(28px, 3.6vw, 48px); }
.prep-head p, .lost-head p { max-width: 40ch; color: var(--prose); font-size: clamp(17px, 1.3vw, 19px); line-height: 1.6; }
.prep-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.prep-card {
  position: relative; isolation: isolate; overflow: hidden;
  display: grid; grid-template-rows: auto 1fr; min-height: clamp(560px, 44vw, 640px);
  border-radius: 32px; background: var(--raise);
}
.prep-glow {
  position: absolute; z-index: -2; left: 50%; bottom: -34%; width: 124%; max-width: none; height: auto; aspect-ratio: 1; translate: -50% 0;
  object-fit: cover; filter: blur(72px) saturate(1.6); opacity: .72; pointer-events: none;
}
.prep-card::after { content: ""; position: absolute; inset: 0 0 auto; z-index: -1; height: 56%; background: linear-gradient(var(--raise) 42%, transparent); pointer-events: none; }
.prep-copy { display: grid; align-content: start; gap: 12px; padding: clamp(28px, 3vw, 44px) clamp(24px, 3vw, 44px) 0; }
.prep-copy h3 { max-width: 16ch; font-size: clamp(26px, 2.4vw, 36px); line-height: 1.04; letter-spacing: -0.035em; font-weight: 800; }
.prep-copy p { max-width: 38ch; color: var(--mute); font-size: 17px; line-height: 1.55; }
.prep-shot {
  position: relative; align-self: end; justify-self: center; width: calc(100% - clamp(32px, 6vw, 88px)); margin-top: 40px;
  border-radius: 7.05% 7.05% 0 0 / 10.19% 10.19% 0 0; overflow: hidden; box-shadow: 0 -24px 72px -28px rgba(0,0,0,.75);
  transition: translate .9s cubic-bezier(.2,0,0,1), opacity .6s ease;
}
.prep-shot > img:first-child { width: 100%; height: auto; }
.prep-card + .prep-card .prep-shot { transition-delay: .1s; }
.prep-row[data-rise="wait"] .prep-shot { translate: 0 28%; opacity: 0; }

.liked-well {
  position: absolute; left: 7.69%; top: 40.74%; width: 11.28%; height: auto;
  opacity: 0; transition: opacity .3s ease; pointer-events: none;
}
.liked-toggle {
  position: absolute; left: 78.97%; top: 44.44%; width: 13.33%; height: 11.85%; padding: 0;
  border: 0; border-radius: 999px; background: #E2E2E2; cursor: pointer; transition: background-color .3s ease;
}
.liked-toggle span {
  position: absolute; left: 7.69%; top: 12.5%; height: 75%; aspect-ratio: 1; border-radius: 50%;
  background: #fff; box-shadow: 0 2px 4px rgba(0,0,0,.16);
  transition: translate .36s cubic-bezier(.2,0,0,1), box-shadow .3s ease;
}
.liked-toggle:focus-visible { outline-offset: 2px; border-radius: 999px; }
.liked-shot.on .liked-well { opacity: 1; }
.liked-shot.on .liked-toggle { background: #111113; }
.liked-shot.on .liked-toggle span { translate: 83.33% 0; box-shadow: none; }

.lost { padding-block: clamp(64px, 8vw, 120px) 0; }
.lost-band {
  position: relative; isolation: isolate; overflow: hidden; border-radius: 40px; background: var(--raise);
  padding: clamp(28px, 4.4vw, 64px) clamp(24px, 4.4vw, 64px) clamp(36px, 4.4vw, 64px);
}
.lost-glow {
  position: absolute; z-index: -1; left: 50%; bottom: -62%; width: min(1100px, 110%); max-width: none; height: auto; aspect-ratio: 1; translate: -50% 0;
  object-fit: cover; filter: blur(110px) saturate(1.4); opacity: .5; pointer-events: none;
}
.lost-head h2 { display: grid; font-size: clamp(32px, 3.4vw, 50px); line-height: .98; letter-spacing: -0.04em; font-weight: 800; }
.lost-head a { color: var(--ink); text-decoration: underline; text-decoration-color: rgba(255,90,43,.6); text-underline-offset: 3px; }
.lost-head a:hover { text-decoration-color: var(--verm); }
.lost-word { display: block; width: 100%; height: clamp(180px, 14vw, 190px); margin-top: clamp(48px, 7vw, 104px); touch-action: pan-y; }
.lost-player {
  position: relative; width: min(560px, 92%); height: auto; margin: clamp(-34px, -2.4vw, -12px) auto 0;
  filter: drop-shadow(0 28px 44px rgba(0,0,0,.6));
}

.mine { padding-block: 16px 0; }
.mine-card {
  position: relative; isolation: isolate; overflow: hidden; border-radius: 40px; background: var(--raise);
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(24px, 4vw, 64px); min-height: clamp(520px, 44vw, 620px);
}
.mine-glow {
  position: absolute; z-index: -2; right: -16%; top: -10%; width: 74%; max-width: none; height: auto; aspect-ratio: 1;
  object-fit: cover; filter: blur(76px) saturate(1.8); opacity: .62; pointer-events: none;
}
.mine-card::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(90deg, var(--raise) 40%, rgba(25,22,22,.55) 66%, transparent); }
.mine-copy { align-self: center; display: grid; justify-items: start; gap: 20px; padding: clamp(32px, 5vw, 72px) 0 clamp(32px, 5vw, 72px) clamp(28px, 5vw, 72px); }
.mine-copy h2 { max-width: 11ch; font-size: clamp(40px, 5.2vw, 80px); line-height: .92; letter-spacing: -0.05em; font-weight: 800; }
.mine-lead { max-width: 22ch; font: 700 clamp(22px, 2vw, 30px)/1.18 var(--display); letter-spacing: -0.025em; }
.mine-copy p:not(.mine-lead) { max-width: 44ch; color: var(--prose); font-size: clamp(17px, 1.3vw, 19px); line-height: 1.6; }
.mine-card .device { --w: clamp(236px, 22vw, 316px); justify-self: center; align-self: end; margin: 64px 0 calc(var(--w) * -.66); }

@media (max-width: 900px) {
  .oh { min-height: 0; }
  .oh-body { grid-template-columns: minmax(0, 1fr); gap: 40px; padding-top: 112px; }
  .oh-copy { padding-bottom: 0; }
  .oh h1 { font-size: clamp(42px, 11.4vw, 84px); }
  .oh-phone {
    --w: min(66vw, 300px); justify-self: center; margin-bottom: calc(var(--w) * -.62);
    -webkit-mask-image: linear-gradient(#000 44%, transparent 70%); mask-image: linear-gradient(#000 44%, transparent 70%);
  }
  .prep-head, .lost-head { grid-template-columns: minmax(0, 1fr); }
  .prep-row { grid-template-columns: minmax(0, 1fr); }
  .prep-card { min-height: 0; }
  .prep-shot { width: calc(100% - 32px); margin-top: 36px; }
  .mine-card { grid-template-columns: minmax(0, 1fr); }
  .mine-card::after { background: linear-gradient(var(--raise) 42%, rgba(25,22,22,.5) 70%, transparent); }
  .mine-glow { right: auto; left: 0; top: auto; bottom: -30%; width: 120%; }
  .mine-copy { padding: 32px 24px 0; }
  .mine-card .device { --w: min(64vw, 280px); margin: 8px 0 calc(var(--w) * -.9); }
}
@media (max-width: 560px) {
  .oh-aura { top: -6%; right: -80%; width: 230vw; filter: blur(80px) saturate(1.3); }
  .oh-body { padding-top: 104px; }
  .oh .cta { flex-direction: column; align-items: stretch; width: 100%; }
  .oh .cta .btn { justify-content: center; }
  .prep-card { border-radius: 28px; }
  .lost-band, .mine-card { border-radius: 32px; }
  .lost-player { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .oh-phone { animation: none; }
  .prep-shot, .liked-well, .liked-toggle, .liked-toggle span { transition: none; }
}