/* Pricing: /pricing page and the plan cards on the home page. Loads after landing.css and marketing.css. */

:root { --pc-best: #1e1b4b; --pc-best-text: #eceaff; --pc-best-muted: #b9b5e8; }

/* Hero */
.pr-hero { padding: 56px 0 8px; text-align: center; }
.pr-hero__inner { max-width: 760px; }
.pr-hero__title { margin: 0; font-size: clamp(34px, 5.6vw, 56px); font-weight: 800; line-height: 1.04; color: var(--ink); text-wrap: balance; }
.pr-hero__lede { margin: 16px auto 0; max-width: 34em; font-size: 18px; line-height: 1.55; color: var(--text-muted); text-wrap: pretty; }
.pr-hero__toggle { margin-top: 28px; }
.pr-h2 { margin: 0 0 20px; font-size: clamp(24px, 3.6vw, 34px); font-weight: 800; color: var(--ink); text-wrap: balance; }

/* Plan cards */
.pr-cards { padding-top: 36px; padding-bottom: 24px; }
.pc-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; align-items: stretch; }
.pc {
    position: relative; display: flex; flex-direction: column;
    padding: 26px 22px 24px; border-radius: 20px;
    background: var(--surface); border: 1px solid var(--border);
}
.pc__name { margin: 0; font-family: var(--display); font-size: 22px; font-weight: 800; color: var(--ink); letter-spacing: -.01em; }
.pc__for { margin: 4px 0 0; font-size: 14px; color: var(--text-muted); min-height: 2.6em; }
.pc__price { margin: 18px 0 0; display: flex; align-items: baseline; gap: 4px; }
.pc__amount { font-family: var(--display); font-size: 44px; font-weight: 800; line-height: 1; letter-spacing: -.03em; color: var(--ink); font-variant-numeric: tabular-nums; }
.pc__per { font-size: 15px; color: var(--text-muted); }
.pc__sub { margin: 6px 0 0; font-size: 13px; color: var(--text-muted); min-height: 1.4em; }
.pc__cta { margin-top: 20px; width: 100%; }
.pc__builds { margin: 22px 0 10px; padding-top: 18px; border-top: 1px solid var(--border); font-size: 13px; font-weight: 600; color: var(--text-muted); }
.pc__lines { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; font-size: 15px; line-height: 1.4; }
.pc__lines li { position: relative; padding-left: 26px; }
.pc__lines li::before {
    content: ""; position: absolute; left: 0; top: .2em; width: 16px; height: 16px; border-radius: 50%;
    background: color-mix(in srgb, var(--accent) 18%, transparent);
}
.pc__lines li::after {
    content: ""; position: absolute; left: 5px; top: calc(.2em + 4px); width: 6px; height: 3px;
    border-left: 2px solid var(--accent); border-bottom: 2px solid var(--accent); transform: rotate(-45deg);
}
.pc__more { display: inline-block; margin-top: 12px; font-size: 14px; font-weight: 600; color: var(--primary); }

/* The recommended plan: the one dark card on the page */
.pc--best {
    background:
        radial-gradient(120% 60% at 100% 0%, color-mix(in srgb, var(--primary) 55%, transparent), transparent 60%),
        var(--pc-best);
    border-color: transparent; color: var(--pc-best-text);
    box-shadow: 0 24px 48px -24px color-mix(in srgb, var(--primary) 70%, transparent);
}
.pc--best .pc__name, .pc--best .pc__amount { color: #fff; }
.pc--best .pc__for, .pc--best .pc__per, .pc--best .pc__sub, .pc--best .pc__builds { color: var(--pc-best-muted); }
.pc--best .pc__builds { border-top-color: rgba(255, 255, 255, .14); }
.pc--best .pc__lines li::before { background: rgba(52, 211, 153, .22); }
.pc--best .pc__lines li::after { border-color: #6ee7b7; }
.pc--best .pc__more { color: #c7d2fe; }
.pc__flag {
    position: absolute; top: -13px; left: 22px; margin: 0;
    padding: 4px 12px; border-radius: 999px;
    background: var(--marigold); color: #2a1a00; font-size: 13px; font-weight: 700;
}

/* Reassurance */
.pr-trust { list-style: none; margin: 28px 0 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 24px; font-size: 14px; color: var(--text-muted); }
.pr-trust li { display: inline-flex; align-items: center; gap: 8px; }
.pr-trust li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }

/* Compare table */
.pr-compare { padding-top: 56px; padding-bottom: 8px; }
.cmp-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: 16px; background: var(--surface); }
.cmp-wrap:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.cmp { width: 100%; min-width: 640px; border-collapse: collapse; font-size: 15px; }
.cmp th, .cmp td { padding: 12px 14px; text-align: center; border-bottom: 1px solid var(--border); }
.cmp thead th { padding-top: 18px; padding-bottom: 14px; vertical-align: bottom; }
.cmp__plan { display: block; font-family: var(--display); font-size: 17px; font-weight: 800; color: var(--ink); }
.cmp__price { display: block; margin-top: 2px; font-size: 13px; font-weight: 500; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.cmp .cmp__feature { text-align: left; font-weight: 500; color: var(--text); width: 38%; position: sticky; left: 0; background: var(--surface); z-index: 1; }
.cmp__group th { padding-top: 22px; text-align: left; font-family: var(--display); font-size: 16px; font-weight: 800; color: var(--ink); background: var(--surface); }
.cmp tbody tr:last-child td, .cmp tbody tr:last-child th { border-bottom-color: var(--border); }
.cmp .is-best { background: color-mix(in srgb, var(--primary) 7%, var(--surface)); }
.cmp__yes { color: var(--accent); font-weight: 800; font-size: 17px; }
.cmp__no { color: var(--text-muted); opacity: .6; }
.cmp__text { font-weight: 600; font-size: 14px; font-variant-numeric: tabular-nums; }

/* Questions */
.pr-faq { max-width: 800px; padding-top: 56px; padding-bottom: 64px; }
.pr-faq__more { margin-top: 16px; color: var(--text-muted); }

/* Home page: same cards inside the existing pricing section */
.pricing .pc-grid { margin-top: 32px; text-align: left; }
.pricing__compare { margin: 18px 0 0; text-align: center; }
.pricing__compare a { font-weight: 600; color: var(--primary); }

@media (min-width: 640px) {
    .pc-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1040px) {
    .pc-grid { grid-template-columns: repeat(4, 1fr); gap: 14px; }
    .pc--best { transform: translateY(-10px); }
}
@media (max-width: 639px) {
    .pc__for, .pc__sub { min-height: 0; }
    .pc--best { margin-top: 10px; }
}