/* Pricing page specific styles (lean; reuse base classes where possible) */

/* Hero figure rounding */
.hero-figure img { border-radius: var(--radius-xl); box-shadow: var(--shadow-lg); }

/* Billing toggle as segmented control */
.billing-toggle { display: flex; align-items: center; grid-auto-flow: column; gap: 0; border: 1px solid var(--gray-300); border-radius: var(--radius-pill); background: #fff; box-shadow: var(--shadow-sm); width: max-content; }
.billing-toggle input { position: absolute; opacity: 0; pointer-events: none; }
.billing-toggle label { padding: 10px 16px; font-weight: var(--weight-medium); cursor: pointer; color: var(--gray-700); border-radius: var(--radius-pill); transition: background-color var(--transition-fast), color var(--transition-fast); }
.billing-toggle input:focus + label { box-shadow: var(--focus-ring); }
.billing-toggle input:checked + label { background: var(--color-primary); color: #fff; }
/* layout for two radios: input+label pairs */
.billing-toggle > input + label + input + label { border-left: 1px solid var(--gray-200); }

/* Pricing cards */
.pricing-card { position: relative; }
.pricing-card.is-popular { border-color: var(--color-primary); box-shadow: var(--shadow-md); }
.pricing { display: grid; gap: var(--space-3); margin-bottom: var(--space-7); }
.price-line { display: flex; align-items: baseline; gap: var(--space-5); }
.price strong { font-size: var(--text-4xl); letter-spacing: -0.02em; }
.price small { color: var(--gray-600); }
/* Hide yearly by default; JS toggles */
.price--yearly, .alt-avg.price--yearly { display: none; }
.shadow-none {
  box-shadow: none !important;
  padding: 23px;
}
/* Feature list with checks */
.feature-list { display: grid; gap: var(--space-4); margin-top: var(--space-5); padding-left: 0; list-style: none; }
.feature-list li { position: relative; padding-left: 28px; }
.feature-list li::before { content: '\2713'; position: absolute; left: 0; top: 0.15em; width: 20px; height: 20px; display: grid; place-items: center; background: rgba(34,197,94,0.15); color: var(--color-success); border: 1px solid rgba(34,197,94,0.4); border-radius: 50%; font-size: 12px; }

/* Simple bullet list */
.list-bullets { display: grid; gap: var(--space-4); padding-left: 20px; }
.list-bullets li { list-style: disc; }

/* FAQ */
.faq { display: grid; gap: var(--space-5); }
.faq-item { background: var(--color-surface); border: 1px solid var(--gray-200); border-radius: var(--radius-md); padding: var(--space-7); }
.faq-item > summary { cursor: pointer; font-weight: var(--weight-semibold); outline: none; }
.faq-item[open] { box-shadow: var(--shadow-sm); }
.faq-content { margin-top: var(--space-5); color: var(--gray-700); }

/* Responsive tweaks */
@media (max-width: 767px) {
  .price strong { font-size: var(--text-3xl); }
}