.hero {
  padding: 96px 32px 88px;
  display: flex;
  justify-content: center;
}
.hero-inner { max-width: 720px; text-align: center; }
.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: var(--color-blue-tint);
  border: 1px solid var(--color-blue-tint-border);
  border-radius: 20px;
  padding: 5px 13px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-blue-tint-text);
  margin-bottom: 26px;
}
.hero h1 {
  font-size: 46px;
  line-height: 1.12;
  font-weight: 600;
  letter-spacing: -0.02em;
  margin: 0 0 20px;
}
.hero-sub {
  font-size: 17px;
  line-height: 1.6;
  color: var(--color-text-secondary);
  margin: 0 0 34px;
}
.hero-ctas { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* ── How it works ─────────────────────────────────────────────────────────
   The first thing a cold visitor needs: what they do, in order. Same white
   band treatment as .privacy-band so the two read as the same kind of
   full-width interruption. */
.how-band {
  background: #fff;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  padding: 76px 32px;
}
.how-inner { max-width: 1080px; margin: 0 auto; }
.how-head { text-align: center; max-width: 560px; margin: 0 auto 48px; }
.how-head h2 { font-size: 28px; font-weight: 600; letter-spacing: -0.015em; margin: 0; text-wrap: balance; }
.how-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; }
.how-num {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--color-text-tertiary);
  margin-bottom: 12px;
}
.how-step h3 { font-size: 16px; font-weight: 600; margin: 0 0 8px; text-wrap: balance; }
.how-step p {
  font-size: 13.5px; line-height: 1.6; color: var(--color-text-secondary);
  margin: 0; text-wrap: pretty;
}
.how-close {
  max-width: 620px;
  margin: 44px auto 0;
  text-align: center;
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--color-text-secondary);
  text-wrap: pretty;
}

@media (max-width: 860px) {
  .how-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .how-band { padding: 56px 20px; }
  .how-grid { grid-template-columns: 1fr; gap: 28px; }
}

.benefits {
  padding: 88px 32px 100px;
  display: flex;
  justify-content: center;
}
.benefits-inner { max-width: 1080px; width: 100%; }
.benefits-head { text-align: center; max-width: 560px; margin: 0 auto 48px; }
.benefits-head h2 { font-size: 28px; font-weight: 600; letter-spacing: -0.015em; margin: 0; }
.benefits-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.benefit-card {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 26px;
}
.benefit-card.dark { background: var(--color-ink); border: none; }
.benefit-icon {
  width: 38px;
  height: 38px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}
.benefit-card h3 { font-size: 16px; font-weight: 600; margin: 0 0 8px; }
.benefit-card.dark h3 { color: #fff; }
.benefit-card p { font-size: 13.5px; line-height: 1.6; color: var(--color-text-secondary); margin: 0; }
.benefit-card.dark p { color: var(--color-text-faint); }

.privacy-band {
  background: #fff;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  padding: 76px 32px;
}
.privacy-inner { max-width: 900px; margin: 0 auto; display: flex; gap: 44px; align-items: center; }
.privacy-icon {
  flex: none;
  width: 84px;
  height: 84px;
  border-radius: 20px;
  background: var(--color-blue-tint);
  border: 1px solid var(--color-blue-tint-border);
  display: flex;
  align-items: center;
  justify-content: center;
}
.privacy-inner h2 { font-size: 24px; font-weight: 600; letter-spacing: -0.015em; margin: 0 0 12px; }
.privacy-inner p { font-size: 14.5px; line-height: 1.65; color: var(--color-text-secondary); margin: 0; }

.for-companies { background: var(--color-ink); padding: 88px 32px; }
.for-companies-inner { max-width: 1080px; margin: 0 auto; display: flex; gap: 56px; align-items: center; }
.for-companies-copy { flex: 1; min-width: 320px; }
.for-companies-copy .eyebrow { color: var(--color-amber); }
.for-companies-copy h2 { font-size: 28px; line-height: 1.2; font-weight: 600; letter-spacing: -0.015em; color: #fff; margin: 0 0 16px; }
.for-companies-copy p { font-size: 14.5px; line-height: 1.65; color: var(--color-text-faint); margin: 0 0 26px; }
.for-companies-cards { flex: 1; min-width: 300px; display: flex; flex-direction: column; gap: 14px; }
.for-companies-cards .card {
  background: var(--color-dark-card-bg);
  border: 1px solid var(--color-dark-card-border);
  border-radius: var(--radius-lg);
  padding: 22px;
}
.for-companies-cards .card-title { font-size: 14px; font-weight: 600; color: #fff; margin-bottom: 6px; }
.for-companies-cards .card p { font-size: 13px; line-height: 1.6; color: var(--color-text-quaternary); margin: 0; }

.closing-cta { padding: 88px 32px; display: flex; justify-content: center; text-align: center; }
.closing-cta-inner { max-width: 520px; }
.closing-cta h2 { font-size: 26px; font-weight: 600; letter-spacing: -0.015em; margin: 0 0 14px; }
.closing-cta p { font-size: 14.5px; color: var(--color-text-secondary); margin: 0 0 26px; }

@media (max-width: 860px) {
  .benefits-grid { grid-template-columns: repeat(2, 1fr); }
  .for-companies-inner { flex-direction: column; }
  .for-companies-copy, .for-companies-cards { min-width: 0; width: 100%; }
  .privacy-inner { flex-direction: column; text-align: center; }
}
@media (max-width: 560px) {
  .benefits-grid { grid-template-columns: 1fr; }
  .hero h1 { font-size: 34px; }
}

/* ── Companies teaser ─────────────────────────────────────────────────────
   The full pitch lives on /companies; this is the handoff from the
   consumer-facing home page. */
.companies-teaser { background: var(--color-ink); padding: 56px 32px; }
.companies-teaser-inner {
  max-width: 1080px; margin: 0 auto;
  display: flex; gap: 40px; align-items: center; justify-content: space-between;
}
.companies-teaser .eyebrow { color: var(--color-amber); }
.companies-teaser h2 {
  font-size: 24px; line-height: 1.25; font-weight: 600;
  letter-spacing: -0.015em; color: #fff; margin: 10px 0 10px;
  text-wrap: balance;
}
.companies-teaser p {
  font-size: 14.5px; line-height: 1.65; color: var(--color-text-faint);
  margin: 0; max-width: 62ch; text-wrap: pretty;
}
.companies-teaser .btn { flex: none; }

@media (max-width: 760px) {
  .companies-teaser-inner { flex-direction: column; align-items: flex-start; gap: 22px; }
}
@media (max-width: 560px) {
  .companies-teaser { padding-left: 20px; padding-right: 20px; }
}

/* Let long headings and paragraphs break sensibly rather than leaving
   one orphaned word on the last line. */
.hero h1, .benefits-head h2, .privacy-inner h2, .closing-cta-inner h2 { text-wrap: balance; }
.hero-sub, .benefit-card p, .privacy-inner p, .closing-cta-inner p { text-wrap: pretty; }