/*
 * Landing hero — three-zone composition
 *
 * The viewport is split into three stacked bands with intentionally
 * unequal flex weights. Each band acts as its own layout rail so the
 * identity, hook, and action content can breathe independently.
 *
 * Zone 1 (Identity):
 *   - Trust header mounts at the top when needed
 *   - GO mark stays centered within the opening band
 *
 * Zone 2 (Hook):
 *   - Headline and subhead sit on the visual center of the page
 *
 * Zone 3 (Proof & Action):
 *   - Trust anchors and CTA hold the lower band without collapsing
 *     the whitespace beneath the primary action
 */

/* ── Hero container ────────────────────────────────── */
.landing-hero {
  /* Explicit viewport height so zone flex ratios resolve to real
     pixels. svh = small viewport height = viewport with Safari's
     expanded chrome visible (the tightest possible fit). Falls
     back to vh for older browsers. */
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  text-align: center;
  padding-bottom: calc(var(--space-6) + env(safe-area-inset-bottom));
  gap: var(--space-2);
}

.landing-identity,
.zone-2-above,
.landing-subhead,
.landing-trust-anchors,
.landing-cta {
  animation: landing-rise 560ms var(--ease-spring) both;
}
.landing-identity { animation-delay: 40ms; }
.zone-2-above { animation-delay: 120ms; }
.landing-subhead { animation-delay: 180ms; }
.landing-trust-anchors { animation-delay: 240ms; }
.landing-cta { animation-delay: 320ms; }

/* ── Zone 1: Identity ──────────────────────────────── */
.zone-1 {
  flex: 0.55;
  position: relative;
}

.zone-1 .trust-header {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

/* Trust header mounts here via home-screen-hint.js on mobile.
   It renders in normal flow at the very top of Zone 1, taking
   its natural 32px. On desktop it doesn't render at all. */

/* Logo: centered exactly on the zone's vertical center line. */
.zone-1 .landing-identity {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  transform: translateY(-50%);
  display: flex;
  justify-content: center;
}
.landing-go-mark {
  width: 56px;
  height: 56px;
}

/* ── Zone 2: Hook ──────────────────────────────────── */
/*
 * The LAST line of text (subhead) sits at the zone's vertical
 * center. The headline floats above it, flush against the subhead.
 * Achieved via two equal flex spacers (.zone-2-above and
 * .zone-2-below) sandwiching the subhead. The headline is inside
 * the top spacer, bottom-aligned so it hugs the subhead from above.
 */
.zone-2 {
  flex: 0.95;
  display: flex;
  flex-direction: column;
  text-align: center;
  padding: 0 var(--space-4);
  align-items: center;
}

.zone-2-above {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: var(--space-3);
  padding-bottom: var(--space-2);
  width: min(100%, 28rem);
}
.zone-2-below {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: var(--space-3);
  width: min(100%, 28rem);
}

.landing-headline {
  font: var(--text-headline);
  color: var(--go-headline);
  letter-spacing: -0.01em;
  margin: 0;
}
.landing-subhead {
  font: var(--text-body);
  color: var(--go-ink);
  margin: 0;
  max-width: 31ch;
  line-height: 1.45;
}

/* ── Zone 3: Proof & Action ────────────────────────── */
/*
 * Trust anchors at the TOP of the zone (not centered in a half).
 * CTA sits below with a proportional gap. The remaining space
 * below the CTA is macro-whitespace.
 */
.zone-3 {
  flex: 0.9;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding-top: var(--space-4);
  gap: var(--space-4);
}

/* Trust anchors — no card, just the two promise lines */
.landing-trust-anchors {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  text-align: center;
  padding: 0 var(--space-4);
  width: min(100%, 23rem);
  margin: 0 auto;
}
.trust-anchor {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font: var(--text-caption);
  color: color-mix(in srgb, var(--go-ink) 88%, var(--go-headline) 12%);
  line-height: 1.35;
}
.trust-anchor img {
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
}

/* CTA — emerald (landing-only), constrained width */
.landing-cta {
  margin: 0 auto;
  width: 100%;
  max-width: 360px;
  padding: 0 var(--space-4);
}
.landing-cta .btn-primary {
  background: var(--go-money);
  box-shadow: 0 14px 28px rgba(16, 185, 129, 0.18);
}
.landing-cta .btn-primary:hover,
.landing-cta .btn-primary:focus-visible {
  background: var(--go-money-hover);
}

@keyframes landing-rise {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-height: 760px) {
  .zone-1 {
    flex: 0.5;
  }

  .zone-2 {
    flex: 0.9;
  }

  .zone-3 {
    flex: 0.85;
    padding-top: var(--space-3);
    gap: var(--space-3);
  }

  .zone-2-above {
    padding-bottom: var(--space-2);
  }

  .zone-2-below {
    padding-top: var(--space-3);
  }
}

@media (prefers-reduced-motion: reduce) {
  .landing-identity,
  .zone-2-above,
  .landing-subhead,
  .landing-trust-anchors,
  .landing-cta {
    animation: none;
  }
}