/* Benefits page — sits on top of style.css, same road-sign system */

.b-hero { padding: 60px 0 40px; max-width: 760px; }
.b-hero h1 {
  font-size: clamp(38px, 6vw, 60px);
  font-weight: 700;
  letter-spacing: -0.03em;
  margin-bottom: 18px;
}
.b-hero .lede { font-size: 19px; max-width: 60ch; }
.nav a[aria-current="page"] { opacity: 1; border-bottom: 3px solid var(--lime); }

/* ---- The math ---- */
.b-math { background: var(--surface); color: var(--ink); padding: 70px 0; }
.b-math .eyebrow { color: var(--lime); }
.b-math .block-sub { color: var(--ink-dim); }
.math-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: 34px;
}
.math-card {
  position: relative;
  background: var(--surface-2);
  border: 1px solid var(--hairline);
  border-radius: 16px;
  padding: 26px 22px;
}
.math-card h3 { font-size: 16px; margin-bottom: 12px; }
.math-card p { font-size: 14px; color: var(--ink-dim); margin: 0; }
.math-num {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(34px, 5vw, 46px);
  letter-spacing: -0.03em;
  margin-bottom: 12px;
  font-variant-numeric: tabular-nums;
}
.math-card.them .math-num { color: var(--red-ink); }
.math-card.us { border-color: var(--lime); }
.math-card.us .math-num { color: var(--lime); }
.math-card.win { background: var(--lime); border-color: var(--lime); }
.math-card.win h3, .math-card.win .math-num { color: #10140F; }
.math-card.win p { color: rgba(16, 20, 15, 0.82); }
.math-flag {
  position: absolute;
  top: -12px; left: 22px;
  background: var(--lime);
  color: #10140F;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 4px 11px;
  border-radius: 999px;
}
.math-note { margin-top: 26px; font-size: 15px; color: var(--ink-dim); }

/* ---- Benefit cards ---- */
.ben-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.ben {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: 16px;
  padding: 26px 22px;
}
.ben-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px; height: 46px;
  border-radius: 12px;
  background: var(--surface-2);
  border: 1px solid var(--hairline);
  font-size: 22px;
  margin-bottom: 14px;
}
.ben h3 { font-size: 19px; margin-bottom: 8px; }
.ben p { margin: 0; font-size: 15px; color: var(--ink-dim); }

/* ---- Founding trucks ---- */
.founding { background: var(--lime); color: #10140F; padding: 72px 0; }
.f-badge {
  display: inline-block;
  background: #10140F;
  color: var(--lime);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 6px 14px;
  border-radius: 999px;
  margin-bottom: 18px;
}
.founding h2 {
  color: #10140F;
  font-size: clamp(30px, 4.6vw, 46px);
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: 16px;
  max-width: 20ch;
}
.f-lede { font-size: 18px; max-width: 62ch; color: rgba(16, 20, 15, 0.86); margin: 0 0 16px; }
.f-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin: 34px 0;
}
.f-card {
  background: var(--bg);
  color: var(--ink);
  border: 2px solid #10140F;
  border-radius: 16px;
  padding: 24px 20px;
  box-shadow: 6px 6px 0 rgba(16, 20, 15, 0.28);
}
.f-num {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 44px;
  line-height: 1;
  letter-spacing: -0.03em;
  margin-bottom: 10px;
}
.f-card h3 { font-size: 16px; margin-bottom: 8px; }
.f-card p { margin: 0; font-size: 14px; color: var(--ink-dim); }
.f-terms {
  background: var(--bg);
  color: var(--ink);
  border-radius: 16px;
  padding: 28px 26px;
  border: 2px solid #10140F;
}
.f-terms h3 { font-size: 18px; margin-bottom: 14px; }
.f-terms ul { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 11px; }
.f-terms li { position: relative; padding-left: 28px; font-size: 15px; }
.f-terms li::before {
  content: "✓";
  position: absolute; left: 0; top: 0;
  font-weight: 700;
  color: var(--lime);
}
.f-legal { font-size: 13px; color: var(--ink-dim); margin: 0; line-height: 1.6; }
.f-cta { text-align: center; margin-top: 34px; }
.f-cta-note { font-size: 14px; color: rgba(16, 20, 15, 0.78); margin: 12px 0 0; }

.b-close { text-align: center; padding: 76px 0 84px; }
.b-close .block-sub { margin-left: auto; margin-right: auto; }
.b-close .hero-ctas { justify-content: center; }

/* ---- Phones ---- */
@media (max-width: 900px) {
  .b-hero { padding: 36px 0 26px; }
  .math-grid, .ben-grid, .f-cards { grid-template-columns: 1fr; }
  .b-math { padding: 52px 0; }
  .founding { padding: 54px 0; }
  .founding h2 { max-width: none; }
  .math-flag { top: -11px; }
  .f-terms { padding: 22px 18px; }
}

/* A benefit that isn't shipped yet says so, plainly */
.ben-soon {
  position: relative;
  border-color: var(--lime);
  background: linear-gradient(180deg, rgba(140, 198, 63, 0.06), var(--surface));
}
.ben-tag {
  display: inline-block;
  background: var(--lime);
  color: #10140F;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 999px;
  margin-bottom: 12px;
}