.pricing { max-width: 1100px; margin: 0 auto; padding: 90px 32px 80px; }
.pricing h1 { margin: 0; color: #215bc5; text-align: center; font-size: clamp(2rem, 4vw, 3rem); letter-spacing: -0.045em; }
.plan-switch { display: flex; width: fit-content; margin: 24px auto 54px; padding: 3px; border-radius: 30px; background: #dedede; }
.plan-switch button { border: 0; border-radius: 30px; padding: 8px 22px; background: transparent; color: #555; }
.plan-switch button[aria-pressed="true"] { background: #fff; color: #222; box-shadow: 0 1px 3px #0002; }
.plan-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.plan-grid[hidden] { display: none; }
.team-grid { grid-template-columns: repeat(2, 1fr); max-width: 700px; margin: auto; }
.plan { display: flex; flex-direction: column; min-height: 410px; padding: 24px; border: 1px solid #8daef6; border-radius: 10px; }
.plan h2 { color: #215bc5; font-size: 27px; margin: 0 0 4px; }
.description { color: #777; line-height: 1.45; margin: 0; min-height: 48px; }
.price { font-size: 30px; font-weight: 700; margin: 28px 0 20px; }
.price span { color: #777; font-size: 14px; font-weight: 400; }
.plan ul { padding-left: 20px; line-height: 1.5; margin: 0 0 28px; }
.plan li { margin-bottom: 10px; }
.plan a, .availability { margin: auto 0 0; padding: 11px; text-align: center; border-radius: 6px; }
.plan a { color: white; background: #215bc5; text-decoration: none; }
.availability { color: #666; background: #f1f3f7; font-size: 14px; }
.pricing-note { color: #777; text-align: center; font-size: 13px; margin: 28px 0 0; }
@media (max-width: 750px) { .pricing { padding: 60px 20px; } .plan-grid, .team-grid { grid-template-columns: 1fr; max-width: 440px; margin: auto; } .plan { min-height: 350px; } }