/* ── Landing hero ───────────────────────────────────────────
   The copy half of the hero (views/landing.js). The product below it is
   landing-stage.css + landing-window.css. Split from landing-page.css to
   keep both under the size ceiling. */

/* Split on wide screens: the promise on the left, the detail and the actions
   on the right, bottoms aligned. Below that, the product rises out of a flat
   stage (landing-window.css) so most of it is on screen before any scroll. */
.lp-hero {
  padding-top: clamp(32px, 5vw, 72px);
}

.lp-hero-grid {
  display: grid;
  grid-template-columns: max-content minmax(0, 440px);
  justify-content: space-between;
  align-items: end;
  gap: 32px 48px;
}

.lp-hero-copy { display: flex; flex-direction: column; align-items: flex-start; }

.lp-hero-note {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 4px 14px 4px 4px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  color: var(--muted);
  font-size: 13.5px;
  transition: border-color 0.2s var(--ease), color 0.2s var(--ease);
}

.lp-hero-note:hover { border-color: var(--line-hi); color: var(--text); }
.lp-hero-note > svg { width: 13px; height: 13px; transition: transform 0.2s var(--ease); }
.lp-hero-note:hover > svg { transform: translateX(2px); }

.lp-hero-note-tag {
  padding: 2px 9px;
  border-radius: var(--r-pill);
  background: var(--lp-accent);
  color: var(--lp-on-accent);
  font-size: 12px;
  font-weight: 600;
}

.lp-hero-title {
  margin-top: 24px;
  font-family: var(--font-geist);
  font-size: clamp(42px, 6vw, 80px);
  line-height: 0.98;
  letter-spacing: -0.042em;
  font-weight: 600;
}

.lp-hero-title > span { display: block; white-space: nowrap; }
.lp-hero-title .lp-hero-accent { color: var(--lp-accent-ink); }

.lp-hero-aside { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; padding-bottom: 6px; }

.lp-hero-sub {
  font-size: clamp(16px, 1.3vw, 18px);
  line-height: 1.55;
  color: var(--muted);
  text-wrap: pretty;
}

.lp-hero-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px 28px;
  flex-wrap: wrap;
}

.lp-hero-aside .lp-hero-cta { justify-content: flex-start; flex-wrap: nowrap; column-gap: 24px; }

.lp-hero-trust {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 18px;
  font-size: 13.5px;
  color: var(--subtle);
}

.lp-hero-trust > span { display: inline-flex; align-items: center; gap: 7px; }
.lp-hero-trust svg { width: 14px; height: 14px; color: var(--lp-cyan); }

.lp-hero-stage { margin-top: clamp(44px, 5.5vw, 72px); width: 100%; }


/* One column once the headline and the aside no longer fit side by side. */
@media (max-width: 1080px) {
  .lp-hero-grid { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .lp-hero-aside { max-width: 560px; padding-bottom: 0; }
}

@media (max-width: 700px) {
  .lp-hero { padding-top: 24px; }
  /* Sized so each line fits a 360px phone whole; balance is the fallback. */
  .lp-hero-title { margin-top: 20px; font-size: clamp(32px, 9.4vw, 44px); }
  .lp-hero-title > span { white-space: normal; text-wrap: balance; }
  .lp-hero-aside { gap: 20px; }
  .lp-hero-cta { flex-direction: column; width: 100%; gap: 6px; }
  .lp-hero-cta .btn { width: 100%; max-width: 380px; }
  .lp-hero-aside .lp-hero-cta .btn { max-width: none; }
}