/* plans.css: Plans page typography + hero (scoped to body.page-plans) */

/* Type: General Sans for headings (matches the home hero), Satoshi stays for body copy */
.page-plans { --font-display: 'General Sans', 'Satoshi', 'Helvetica Neue', sans-serif; }
.page-plans h1,
.page-plans h2,
.page-plans h3,
.page-plans .plan__name,
.page-plans .plan__cost b,
.page-plans .addon__price b { font-family: var(--font-display); font-weight: 600; letter-spacing: -0.02em; }
.page-plans .plan__name { font-size: clamp(1.6rem, 1.3rem + 1vw, 2.1rem); }
.page-plans .brand__word { font-family: 'Cabinet Grotesk', 'Satoshi', sans-serif; font-weight: 800; }

/* Hero */
.plans-hero {
  position: relative;
  overflow: hidden;
  color: var(--color-on-navy);
  background:
    radial-gradient(1100px 520px at 88% -12%, rgba(29, 91, 204, .55), transparent 62%),
    radial-gradient(760px 420px at -8% 115%, rgba(255, 122, 26, .16), transparent 60%),
    linear-gradient(160deg, var(--color-navy) 0%, var(--color-navy-2) 100%);
  padding-block: clamp(3rem, 6vw, 5.5rem) clamp(3rem, 5vw, 4.75rem);
}
.plans-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px);
  background-size: 48px 48px;
  -webkit-mask-image: linear-gradient(180deg, #000 20%, transparent 85%);
  mask-image: linear-gradient(180deg, #000 20%, transparent 85%);
  pointer-events: none;
}
.plans-hero .wrap {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: clamp(2rem, 4vw, 4rem);
  align-items: center;
}
.plans-hero .label { color: var(--color-on-navy-link); }
.plans-hero h1 {
  color: #fff;
  font-size: clamp(2.25rem, 1.3rem + 3vw, 3.9rem);
  line-height: 1.04;
  margin: var(--space-4) 0 var(--space-5);
  max-width: 15ch;
}
.plans-hero h1 em { font-style: normal; color: #ff9a4d; }
.plans-hero .lede { color: var(--color-on-navy-muted); font-size: clamp(1.05rem, 1rem + .3vw, 1.22rem); max-width: 54ch; }

.plans-hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-8); }
.btn.plans-hero__ghost {
  color: #fff;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, .38);
}
.btn.plans-hero__ghost:hover { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .6); }

.plans-hero__chips {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-6);
  margin-top: var(--space-6);
  font-size: var(--text-sm);
  color: var(--color-on-navy);
}
.plans-hero__chips li { display: flex; align-items: center; gap: var(--space-2); max-width: none; }
.plans-hero__chips svg,
.plans-hero__list svg { width: 18px; height: 18px; flex: none; color: #4ade80; }

.plans-hero__card {
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: var(--radius-xl);
  padding: clamp(1.5rem, 3vw, 2.25rem);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  box-shadow: 0 30px 60px rgba(0, 0, 0, .28);
}
.plans-hero__badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #fff;
  background: rgba(34, 163, 95, .2);
  border: 1px solid rgba(74, 222, 128, .35);
  padding: 5px 12px;
  border-radius: var(--radius-full);
}
.plans-hero__badge i { width: 8px; height: 8px; border-radius: 50%; background: #4ade80; box-shadow: 0 0 0 4px rgba(74, 222, 128, .2); }
.plans-hero__card h2 { color: #fff; font-size: var(--text-lg); margin: var(--space-4) 0 var(--space-4); }
.plans-hero__list { list-style: none; display: grid; gap: var(--space-3); }
.plans-hero__list li { display: flex; gap: var(--space-3); align-items: flex-start; color: var(--color-on-navy); font-size: var(--text-sm); }
.plans-hero__list svg { margin-top: 3px; }
.plans-hero__list b { color: #fff; font-weight: 700; }

.plans-hero__stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
  margin-top: var(--space-6);
  padding-top: var(--space-5);
  border-top: 1px solid rgba(255, 255, 255, .14);
}
.plans-hero__stats b { display: block; font-family: var(--font-display); font-weight: 600; font-size: var(--text-xl); line-height: 1; color: #fff; }
.plans-hero__stats span { display: block; margin-top: 6px; font-size: var(--text-xs); color: var(--color-on-navy-muted); }

@media (max-width: 900px) {
  .plans-hero .wrap { grid-template-columns: 1fr; }
  .plans-hero h1 { max-width: none; }
}
.plans-hero__badge { white-space: nowrap; }
@media (max-width: 480px) {
  .plans-hero__actions .btn { width: 100%; justify-content: center; }
  .plans-hero__badge { letter-spacing: .02em; font-size: 11px; }
}