/* home.css — the scroll story */

/* hero */
.hero {
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding-top: var(--nav-h);
  overflow: hidden;
}
.hero__glow {
  position: absolute;
  top: -20%; left: 50%;
  transform: translateX(-50%);
  width: 130vmax; height: 80vmax;
  background: radial-gradient(closest-side, var(--glow-soft), transparent 70%);
  pointer-events: none;
}
.hero__inner { position: relative; display: grid; gap: 2rem; justify-items: center; text-align: center; }
.hero__line { overflow: hidden; display: block; }
.hero__line > span { display: block; will-change: transform; }
.hero__line--flip > span { color: var(--accent); }
.hero__sub { max-width: 34em; margin-inline: auto; }
.hero__ctas { display: flex; gap: 1rem; flex-wrap: wrap; justify-content: center; }
.hero__cue {
  position: absolute;
  bottom: 2rem; left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
  display: grid;
  justify-items: center;
  gap: .5rem;
}
.hero__cue::after {
  content: '';
  width: 1px; height: 34px;
  background: linear-gradient(var(--accent), transparent);
  animation: cue-drop 1.8s ease-in-out infinite;
}
@keyframes cue-drop { 0% { transform: scaleY(0); transform-origin: top; } 50% { transform: scaleY(1); } 100% { transform: scaleY(0); transform-origin: bottom; } }

/* pinned scenes shared layout */
.scene {
  min-height: 100svh;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: clamp(1.5rem, 4vw, 4rem);
  padding-block: 0;
}
.scene__side { display: grid; gap: 1rem; }
.scene__side--left { justify-items: end; text-align: right; }
.scene__side--right { justify-items: start; text-align: left; }
@media (max-width: 900px) {
  .scene { grid-template-columns: 1fr; justify-items: center; text-align: center !important; }
  .scene__side { justify-items: center !important; text-align: center !important; }
}

/* missed scene */
.missed { background: radial-gradient(90% 60% at 50% 110%, color-mix(in srgb, var(--miss) 9%, transparent), transparent 70%); }
.missed__caption { max-width: 20em; }
.missed__punch { display: grid; gap: .8rem; max-width: 22em; }
.missed__punch .t-h2 { color: var(--miss); }

/* rescue scene — captions + phone as a centered pair (no empty balancing column).
   Captions reserve enough height that the absolutely stacked variants never spill
   onto the phone, including when the grid collapses to one column on small screens. */
.rescue { background: radial-gradient(90% 60% at 50% 110%, var(--glow-soft), transparent 70%); }
@media (min-width: 901px) {
  .rescue .scene { grid-template-columns: minmax(0, 24em) auto; justify-content: center; }
}
.rescue__captions { position: relative; min-height: clamp(11em, 24vh, 15em); max-width: 22em; }
.rescue__caption { position: absolute; inset: 0; display: grid; gap: .7rem; align-content: start; }
/* CSS-only fallback: without JS/motion, show ONLY the first caption (they are
   absolutely stacked; JS drives visibility when motion is available). */
.rescue__caption { opacity: 0; visibility: hidden; }
.rescue__caption:first-child { opacity: 1; visibility: visible; }
html.motion-ok .rescue__caption { visibility: visible; }
.rescue__toast {
  position: absolute;
  top: 84px; left: 50%;
  transform: translateX(-50%);
  width: calc(100% - 44px);
  background: var(--surface);
  border: 1px solid var(--good);
  border-radius: var(--radius-sm);
  padding: .7rem .9rem;
  font-size: .8rem;
  font-family: var(--font-mono);
  color: var(--good);
  box-shadow: 0 12px 30px -12px rgba(0,0,0,.5);
  z-index: 2;
}
.rescue .phone { position: relative; }

/* pain */
.pain__list { display: grid; gap: 0; border-top: 1px solid var(--line); }
.pain__item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1.4rem;
  align-items: baseline;
  padding: 1.4rem 0;
  border-bottom: 1px solid var(--line);
}
.pain__vertical {
  font-family: var(--font-mono);
  font-size: .74rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent);
  min-width: 9em;
}
.pain__text { font-size: clamp(1.05rem, 2vw, 1.35rem); color: var(--ink-dim); font-family: var(--font-display); font-weight: 600; }

/* feature rows */
.feat {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 6vw, 5rem);
  align-items: center;
  padding-block: clamp(3rem, 7vw, 5.5rem);
}
.feat:nth-child(even) .feat__media { order: -1; }
@media (max-width: 860px) { .feat { grid-template-columns: 1fr; } .feat:nth-child(even) .feat__media { order: 0; } }
.feat__copy { display: grid; gap: 1rem; }
.feat__media { display: grid; justify-items: center; }
.feat__mock {
  width: 100%;
  max-width: 430px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.3rem;
  box-shadow: var(--shadow-card);
  display: grid;
  gap: .8rem;
}
.feat__mock .chat-msg { max-width: 100%; }
.mock-mail {
  display: grid;
  gap: .35rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  padding: .9rem 1rem;
  font-size: .85rem;
}
.mock-mail__from { font-family: var(--font-mono); font-size: .7rem; color: var(--muted); }
.mock-mail__subject { font-weight: 700; }
.mock-mail__body { color: var(--muted); font-size: .82rem; }
.mock-guard {
  display: flex; align-items: center; gap: .7rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  padding: .8rem 1rem;
  font-size: .85rem;
}
.mock-guard--no { border-color: color-mix(in srgb, var(--miss) 50%, transparent); }
.mock-guard--no .mock-guard__tag { color: var(--miss); }
.mock-guard__tag { font-family: var(--font-mono); font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: var(--good); white-space: nowrap; }

/* numbers strip */
.numbers { border-block: 1px solid var(--line); background: var(--bg-elev); }
.numbers__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 2rem; }
.numbers__item { display: grid; gap: .3rem; justify-items: center; text-align: center; }
.numbers__value {
  font-family: var(--font-display);
  font-weight: 850;
  font-size: clamp(2.6rem, 6vw, 4rem);
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  color: var(--accent);
}
.numbers__value small { font-size: .45em; font-weight: 700; color: var(--ink-dim); }
.numbers__label { font-family: var(--font-mono); font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }

/* proof */
.proof .card { display: grid; gap: .6rem; }

/* final CTA */
.finale { text-align: center; display: grid; gap: 2rem; justify-items: center; padding-block: clamp(7rem, 16vw, 12rem); }
.finale .t-display { font-size: clamp(2.6rem, 7vw, 5.6rem); }