.plans-section { position: relative; z-index: 2; padding: 128px 24px 64px; background: var(--blue); }
.plans-inner { width: min(100%, 960px); margin: 0 auto; }
.plans-inner h2 { margin: 0; color: white; text-align: center; font-size: 48px; line-height: 56px; font-weight: 300; }
.plans-description { margin: 22px auto 0; color: white; text-align: center; font-size: 20px; line-height: 28px; }
.plans-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 74px; }
.plan-card { position: relative; min-width: 0; min-height: 448px; padding: 13px 40px 41px; border-radius: 24px; background: var(--black); color: white; transition: background-color 200ms ease, color 200ms ease; }
.plan-card.is-selected { background: white; color: var(--black); }
.plan-term { display: flex; align-items: baseline; gap: 8px; margin: 0 0 0 -3px; font-size: 88px; font-weight: 400; line-height: 110px; }
.plan-unit { font-size: 16px; line-height: 28px; }
.is-selected .plan-unit { color: var(--gray); }
.plan-price { margin: -6px 0 0; font-size: 20px; line-height: 28px; font-variant-numeric: tabular-nums; }
.plan-badge { position: absolute; top: 36px; right: 40px; width: 58px; height: 70px; }
.plan-badge img { display: block; width: 58px; height: 70px; }
.plan-badge > span { position: absolute; top: 27px; left: 0; width: 100%; color: white; text-align: center; font-size: 16px; line-height: 28px; }
.plan-details { margin: 26px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--gray); font-size: 18px; line-height: 28px; }
.plan-details li { min-height: 53px; padding: 12px 0; border-bottom: 1px solid var(--gray); }
.plan-select { display: block; width: 100%; min-height: 44px; margin-top: 32px; padding: 10px 8px; border: 0; border-radius: 12px; background: white; color: var(--black); font-size: 16px; line-height: 24px; }
.is-selected .plan-select { background: var(--black); color: white; }
.plan-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media (min-width: 768px) and (max-width: 1023px) {
  .plan-card { padding-inline: 24px; }
  .plan-badge { right: 24px; }
  .plan-details { font-size: 16px; }
}
@media (max-width: 767px) {
  .plans-section { padding: 28px 24px 68px; }
  .plans-inner { max-width: 354px; }
  .plans-inner h2 { font-size: 38px; line-height: 44px; }
  .plans-description { max-width: 295px; margin-top: 15px; }
  .plans-grid { grid-template-columns: minmax(0, 1fr); gap: 24px; margin-top: 58px; }
  .plan-card[data-years="3"] .plan-badge { display: none; }
}
@media (prefers-reduced-motion: reduce) { .plan-card { transition: none; } }