/* Pricing: three plan cards on a calm, professional layout (navy ink, one violet accent) with a Monthly / Yearly switch. */
.price2 h1 { max-width: 760px; }
.price2 .bill { display: inline-flex; gap: 4px; padding: 4px; margin: 10px 0 8px; border-radius: 14px; background: var(--surface-2, #eef2f8); }
.price2 .bill-opt { height: 40px; padding: 0 18px; border: 0; border-radius: 11px; background: transparent; color: var(--muted, #5b6b82); font: inherit; font-weight: 700; cursor: pointer; transition: background .15s, color .15s, box-shadow .15s; }
.price2 .bill-opt em { font-style: normal; margin-left: 6px; padding: 2px 8px; border-radius: 999px; background: #e8f8ee; color: #15803d; font-size: 11.5px; font-weight: 800; }
.price2 .bill-opt.on { background: #fff; color: var(--text, #10253a); box-shadow: 0 2px 8px -2px rgba(20, 40, 90, .25); }
.price2 .bill-opt:focus-visible { outline: 3px solid rgba(106, 61, 240, .4); outline-offset: 2px; }

.price2 .plans3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin: 22px 0 14px; align-items: stretch; }
.price2 .pcard { position: relative; display: flex; flex-direction: column; padding: 28px 26px; border: 1px solid var(--border, #e1e7f0); border-radius: 20px; background: var(--surface, #fff); box-shadow: 0 1px 2px rgba(35, 52, 76, .05), 0 14px 34px -22px rgba(35, 52, 76, .3); transition: transform .18s ease, box-shadow .18s ease; }
.price2 .pcard:hover { transform: translateY(-3px); box-shadow: 0 2px 4px rgba(35, 52, 76, .08), 0 26px 50px -24px rgba(80, 60, 200, .35); }
.price2 .pcard.best { border: 1.5px solid transparent; background: linear-gradient(var(--surface, #fff), var(--surface, #fff)) padding-box, linear-gradient(135deg, #0a7cff, #6a3df0 60%, #b04dff) border-box; box-shadow: 0 2px 4px rgba(35, 52, 76, .06), 0 26px 54px -26px rgba(106, 61, 240, .5); }
.price2 .ribbon { position: absolute; top: -13px; right: 22px; padding: 4px 12px; border-radius: 999px; background: linear-gradient(90deg, #0a7cff, #6a3df0); color: #fff; font-size: 11.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.price2 .pcard h2 { margin: 0; font-size: 24px; letter-spacing: -.02em; }
.price2 .pdesc { margin: 4px 0 0; color: var(--muted, #5b6b82); font-size: 14px; }
.price2 .pprice { display: flex; align-items: baseline; gap: 8px; margin: 22px 0 2px; }
.price2 .pprice b { font-size: 44px; line-height: 1; letter-spacing: -.04em; }
.price2 .pprice span { color: var(--muted, #5b6b82); font-size: 14px; font-weight: 600; }
.price2 .pwas { margin: 0 0 4px; min-height: 20px; color: var(--muted, #5b6b82); font-size: 13px; }
.price2 .pbtn { display: flex; justify-content: center; align-items: center; height: 46px; margin: 12px 0 22px; border-radius: 12px; font-weight: 700; text-decoration: none; }
.price2 .pcard h3 { margin: 6px 0 8px; font-size: 12px; text-transform: uppercase; letter-spacing: .07em; color: var(--muted, #5b6b82); }
.price2 .plist { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 9px; }
.price2 .plist li { position: relative; padding-left: 26px; font-size: 14.5px; }
.price2 .plist li::before { content: ''; position: absolute; left: 0; top: 4px; width: 16px; height: 16px; border-radius: 50%; background: #efeaff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236a3df0' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12.5 4 4 8-9'/%3E%3C/svg%3E") center / 11px no-repeat; }
.price2 .center { text-align: center; }
.price2 .compare th.hl, .price2 .compare td.hl { background: rgba(106, 61, 240, .05); }
.price2 .compare thead th.hl { color: #5b35e6; }
.price2 .compare td { font-size: 14.5px; }
.price2 .soon-t { padding: 2px 8px; border-radius: 999px; font-size: 12px; background: var(--surface-2, #eef2f8); color: var(--muted, #5b6b82); font-weight: 700; }
@media (max-width: 880px) { .price2 .plans3 { grid-template-columns: 1fr; max-width: 460px; } .price2 .bill-opt em { display: none; } }
@media (prefers-reduced-motion: reduce) { .price2 .pcard { transition: none; } }

/* every card: same rows in the same places (name, description, price, note, button), so prices and buttons line up across the three */
.price2 .pdesc { min-height: 52px; }
.price2 .pprice { min-height: 48px; align-items: flex-end; }
.price2 .pprice span { max-width: 9em; line-height: 1.25; }
.price2 .pwas { min-height: 20px; }
@media (max-width: 880px) { .price2 .pdesc { min-height: 0; } }