/* Pricing page. Loaded after marketing-home.css. */
.pricing-intro {
  max-width:760px;
  padding-block:72px 32px
}
.pricing-intro h1 {
  font-size:clamp(2.4rem,4vw,3.6rem);
  margin-bottom:18px
}
.pricing-grid {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:18px;
  padding-block:16px 48px
}
.plan {
  background:var(--white);
  border:1px solid var(--line);
  border-radius:6px;
  padding:26px 22px;
  display:flex;
  flex-direction:column;
  gap:10px
}
.plan h2 {
  font-size:1.6rem;
  margin:0
}
.plan p {
  margin:0;
  color:var(--muted)
}
.plan .plan-pages {
  font-family:Arial,Helvetica,sans-serif;
  font-size:.9rem;
  font-weight:700;
  color:var(--ink)
}
.plan .plan-price {
  color:var(--ink);
  margin-block:6px
}
.plan .plan-price strong {
  font-size:2.1rem
}
.plan .plan-price span {
  font-family:Arial,Helvetica,sans-serif;
  font-size:.9rem;
  color:var(--muted)
}
.plan-featured {
  border-color:var(--ink);
  box-shadow:inset 0 0 0 1px var(--ink)
}
.plan .plan-flag {
  align-self:flex-start;
  font-family:Arial,Helvetica,sans-serif;
  font-size:.75rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.06em;
  background:var(--accent);
  color:var(--ink);
  padding:4px 8px;
  border-radius:3px
}
.pricing-notes {
  max-width:760px;
  padding-block:8px 64px
}
.pricing-notes h2 {
  font-size:1.9rem;
  margin-bottom:16px
}
.pricing-notes li {
  margin-bottom:12px;
  line-height:1.55
}
@media(max-width:850px) {
  .pricing-grid {
    grid-template-columns:repeat(2,minmax(0,1fr))
  }
}
@media(max-width:540px) {
  .pricing-grid {
    grid-template-columns:1fr
  }
  .pricing-intro {
    padding-block:48px 24px
  }
}