.kh {
  position: relative; isolation: isolate; overflow: hidden;
  display: grid; min-height: max(700px, min(100svh, 960px));
}
.kh::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(rgba(15,13,13,.2), transparent 30%, transparent 70%, var(--bg));
}
.kh-body {
  display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: clamp(40px, 7vw, 120px);
  padding-block: 112px clamp(56px, 6vw, 88px);
}
.kh-stage { position: relative; display: grid; place-items: center; padding-inline: clamp(8px, 2vw, 32px); }
.kh-glow {
  position: absolute; z-index: -2; left: 50%; top: 50%; width: 260%; max-width: none; height: auto; aspect-ratio: 1; translate: -50% -50%;
  object-fit: cover; filter: blur(110px) saturate(1.5); opacity: .78; pointer-events: none;
  transition: opacity 1.2s ease, scale 1.2s ease;
}
.kh-stage[data-sleep="off"] .kh-glow { opacity: .22; scale: .86; }
.kh-phone { --w: clamp(260px, 23vw, 330px); animation: device-rise .9s cubic-bezier(.2,0,0,1) both; }
.kh-copy { display: grid; justify-items: start; gap: 28px; }
.kh h1 { display: grid; margin-left: -0.045em; font-size: clamp(44px, 6.4vw, 100px); line-height: .9; letter-spacing: -0.055em; font-weight: 800; }
.kh .lede { max-width: 36ch; text-wrap: pretty; }

.aod {
  position: absolute; inset: 0; z-index: 1; display: grid; align-content: center; justify-items: center; gap: calc(var(--w) * .02);
  padding-bottom: 18%; background: #000; color: rgba(255,255,255,.88); text-align: center;
  opacity: 0; transition: opacity .7s ease;
}
.aod-time { font: 400 calc(var(--w) * .2)/1 var(--display); letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.aod-date { font-size: calc(var(--w) * .042); color: rgba(255,255,255,.5); }
.aod-track {
  display: inline-flex; align-items: center; gap: calc(var(--w) * .024); margin-top: calc(var(--w) * .06);
  padding: calc(var(--w) * .022) calc(var(--w) * .04) calc(var(--w) * .022) calc(var(--w) * .022);
  border-radius: 999px; background: rgba(255,255,255,.07); font-size: calc(var(--w) * .04); color: rgba(255,255,255,.72);
}
.aod-track img { position: static; width: calc(var(--w) * .08); height: auto; aspect-ratio: 1; border-radius: 50%; }
.kh-stage[data-sleep="off"] .aod { opacity: 1; }

.flow { padding-block: clamp(88px, 11vw, 160px) 0; }
.flow-band { position: relative; isolation: isolate; overflow: hidden; border-radius: 40px; background: var(--raise); padding-block: clamp(32px, 5vw, 72px) clamp(40px, 5vw, 72px); }
.flow-glow {
  position: absolute; z-index: -1; left: 50%; bottom: -70%; width: min(1200px, 120%); max-width: none; height: auto; aspect-ratio: 1; translate: -50% 0;
  object-fit: cover; filter: blur(110px) saturate(1.4); opacity: .42; pointer-events: none;
}
.flow-head {
  display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 20px clamp(32px, 6vw, 96px); align-items: end;
  padding-inline: clamp(24px, 4.4vw, 64px);
}
.flow-head h2 { max-width: 15ch; font-size: clamp(34px, 4vw, 60px); line-height: .98; letter-spacing: -0.04em; font-weight: 800; }
.flow-head p { max-width: 40ch; color: var(--prose); font-size: clamp(17px, 1.3vw, 19px); line-height: 1.6; }
.flow-lines {
  display: grid; gap: clamp(6px, 1vw, 14px); margin-top: clamp(40px, 6vw, 80px);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.flow-line {
  display: flex; width: max-content; white-space: nowrap;
  font: 800 clamp(44px, 6.6vw, 104px)/1.02 var(--display); letter-spacing: -0.045em; color: rgba(243,239,236,.13);
  animation: flow 70s linear infinite;
}
.flow-line.back { animation-direction: reverse; animation-duration: 84s; }
.flow-line span { display: inline-flex; align-items: center; }
.flow-line span::after { content: ""; width: .16em; height: .16em; margin-inline: .42em; border-radius: 50%; background: rgba(243,239,236,.16); }
.flow-line .now { color: var(--ink); }
.flow-line .now::before { content: ""; width: .2em; height: .2em; margin-right: .28em; border-radius: 50%; background: var(--verm); }
@keyframes flow { to { transform: translateX(-50%); } }

.crew { padding-block: clamp(64px, 8vw, 120px) 0; }
.crew-card { position: relative; isolation: isolate; overflow: hidden; border-radius: 40px; background: var(--raise); padding-top: clamp(32px, 5vw, 72px); }
.crew-card::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(60% 56% at 50% 100%, rgba(232,70,30,.3), rgba(232,70,30,.1) 50%, transparent 78%);
}
.crew-head {
  display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 20px clamp(32px, 6vw, 96px); align-items: end;
  padding-inline: clamp(24px, 4.4vw, 64px);
}
.crew-head h2 { max-width: 14ch; font-size: clamp(34px, 4vw, 60px); line-height: .98; letter-spacing: -0.04em; font-weight: 800; }
.crew-head p { max-width: 42ch; color: var(--prose); font-size: clamp(17px, 1.3vw, 19px); line-height: 1.6; }
.crew-head p + p { margin-top: 12px; }
.crew-head a { color: var(--ink); text-decoration: underline; text-decoration-color: rgba(255,90,43,.6); text-underline-offset: 3px; }
.crew-stage {
  --pw: clamp(200px, 20vw, 290px);
  display: flex; justify-content: center; align-items: flex-start; gap: clamp(12px, 2.4vw, 40px);
  height: calc(var(--pw) * 1.5); margin-top: clamp(40px, 6vw, 80px); overflow: hidden;
}
.crew-stage .device { --w: var(--pw); flex: none; margin: 0; }
.crew-stage .device:nth-child(odd) { margin-top: calc(var(--pw) * .22); }
.crew-stage .device:nth-child(odd) .device-screen img { filter: brightness(.86); }

.lack { padding-block: clamp(64px, 8vw, 120px) 0; }
.lack-card {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 24px clamp(32px, 6vw, 96px);
  padding: clamp(32px, 5vw, 72px); border-radius: 40px; border: 1px solid rgba(255,255,255,.07);
}
.lack-card h2 { font-size: clamp(36px, 4.4vw, 64px); line-height: .96; letter-spacing: -0.045em; font-weight: 800; }
.lack-text { display: grid; justify-items: start; gap: 18px; }
.lack-text p { max-width: 54ch; color: var(--prose); font-size: clamp(17px, 1.3vw, 19px); line-height: 1.65; }
.lack-text a:not(.btn) { color: var(--ink); text-decoration: underline; text-decoration-color: rgba(255,90,43,.6); text-underline-offset: 3px; }
.lack-text a:not(.btn):hover { text-decoration-color: var(--verm); }
.lack-text .btn { margin-top: 6px; }

@media (max-width: 900px) {
  .kh { min-height: 0; }
  .kh-body { grid-template-columns: minmax(0, 1fr); gap: 56px; padding-block: 112px 64px; }
  .kh-copy { order: -1; }
  .kh h1 { font-size: clamp(42px, 11.4vw, 84px); }
  .kh-phone { --w: min(62vw, 290px); }
  .flow-head, .crew-head, .lack-card { grid-template-columns: minmax(0, 1fr); }
  .crew-stage { --pw: min(40vw, 240px); gap: 0; }
  .crew-stage .device:nth-child(1) { margin-right: calc(var(--pw) * -.18); }
  .crew-stage .device:nth-child(2) { z-index: 1; }
  .crew-stage .device:nth-child(3) { margin-left: calc(var(--pw) * -.18); }
}
@media (max-width: 560px) {
  .kh-body { padding-top: 104px; }
  .kh .cta { flex-direction: column; align-items: stretch; width: 100%; }
  .kh .cta .btn { justify-content: center; }
  .flow-band, .crew-card, .lack-card { border-radius: 32px; }
  .crew-stage { --pw: 44vw; }
}
@media (prefers-reduced-motion: reduce) {
  .kh-phone { animation: none; }
  .flow-line { animation: none; }
  .kh-glow, .aod { transition: none; }
}