/* Pricing page — sits on top of style.css, same road-sign system.
   Reuses .b-hero, .f-badge, .f-lede, .f-cta from the benefits vocabulary. */

.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); }

/* ---- Plan cards ---- */
.plans { padding: 10px 0 80px; }
.plan-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  align-items: start;
}
.plan {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: 16px;
  padding: 30px 26px 26px;
}
.plan-premium { border-color: var(--lime); }
.plan-max {
  border: 2px solid var(--lime);
  background: linear-gradient(180deg, rgba(140, 198, 63, 0.08), var(--surface));
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.35);
}
.plan-flag {
  position: absolute;
  top: -13px;
  left: 24px;
  background: var(--lime);
  color: #10140F;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 4px 12px;
  border-radius: 999px;
}
.plan-head { margin-bottom: 20px; }
.plan-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;
}
.plan-head h2 { font-size: 24px; letter-spacing: -0.01em; }
.plan-tag { margin: 4px 0 14px; font-size: 14px; color: var(--ink-dim); }
.plan-price { display: flex; align-items: baseline; gap: 7px; }
.plan-price .amount {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(34px, 4vw, 42px);
  letter-spacing: -0.03em;
  color: var(--lime);
  font-variant-numeric: tabular-nums;
}
.plan .plan-price .amount { color: var(--ink); }
.plan-premium .plan-price .amount,
.plan-max .plan-price .amount { color: var(--lime); }
.plan-price .per { font-size: 14px; color: var(--ink-dim); }
.plan-feats {
  list-style: none;
  margin: 0 0 26px;
  padding: 18px 0 0;
  border-top: 1px solid var(--hairline);
  display: grid;
  gap: 11px;
  flex: 1;
}
.plan-feats li { position: relative; padding-left: 26px; font-size: 15px; }
.plan-feats li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  font-weight: 700;
  color: var(--lime);
}
.plan-feats em { font-style: normal; color: var(--ink-dim); font-size: 13px; }
.plan-cta { width: 100%; }

/* ---- Grand opening special ---- */
.special { background: var(--lime); color: #10140F; padding: 72px 0; }
.special h2 {
  color: #10140F;
  font-size: clamp(30px, 4.6vw, 46px);
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: 16px;
  max-width: 22ch;
}
.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;
}
.f-lede { font-size: 18px; max-width: 62ch; color: rgba(16, 20, 15, 0.86); margin: 0 0 16px; }
.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; }

.special-table-wrap {
  overflow-x: auto;
  margin: 30px 0 0;
  border-radius: 16px;
  border: 2px solid #10140F;
  box-shadow: 6px 6px 0 rgba(16, 20, 15, 0.28);
}
.special-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--bg);
  color: var(--ink);
  font-size: 16px;
}
.special-table th,
.special-table td { padding: 16px 22px; text-align: left; }
.special-table thead th {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-dim);
  border-bottom: 1px solid var(--hairline);
}
.special-table tbody tr + tr td { border-top: 1px solid var(--hairline); }
.special-table .price {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 20px;
  font-variant-numeric: tabular-nums;
}
.special-table .save { color: var(--lime); font-weight: 700; font-variant-numeric: tabular-nums; }
.special-table tr.best td { background: rgba(140, 198, 63, 0.1); }
.best-tag {
  display: inline-block;
  margin-left: 10px;
  background: var(--lime);
  color: #10140F;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 999px;
  vertical-align: middle;
}
.special-lock {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  background: var(--bg);
  color: var(--ink);
  border: 2px solid #10140F;
  border-radius: 16px;
  padding: 20px 24px;
  margin-top: 18px;
}
.special-lock .lock-ico { font-size: 22px; line-height: 1.4; }
.special-lock p { margin: 0; font-size: 15px; color: var(--ink-dim); }
.special-lock strong { color: var(--lime); }

.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; }
  .plan-grid { grid-template-columns: 1fr; }
  .plans { padding-bottom: 56px; }
  .special { padding: 54px 0; }
  .special h2 { max-width: none; }
  .special-table th, .special-table td { padding: 13px 16px; }
  .best-tag { display: block; margin: 6px 0 0; width: fit-content; }
}