/* pricing-redesign.css — Pricing page (Phase 2), loaded only on /pricing/.
   Requires redesign.css (shared DNA) + <body class="rd pricing">. Elevates the
   plan cards, comparison table, accountant plan and trial strip to the v5 DNA.
   Copy, prices, plan structure and the comparison matrix are unchanged — this is
   purely visual. style.v5.css stays byte-identical. */

/* --- billing / currency toggles — a touch more premium --- */
body.pricing .pricing-controls { margin-bottom: 34px; }
body.pricing .toggle-pill { background: #EEF2F8; border-color: #E1E7F0; }
body.pricing .toggle-pill button.active { background: #fff; color: var(--navy); box-shadow: 0 1px 4px rgba(26,60,94,.14); }

/* --- plan cards — softer, lift on hover, equal-height --- */
body.pricing .plan-card {
    border-radius: 16px;
    padding: 30px 24px;
    box-shadow: var(--shadow-sm);
    transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}
body.pricing .plan-card:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); }

/* --- recommended plan (Growth) — the navy hero card --- */
body.pricing .plan-card.featured {
    border: 1.5px solid var(--navy);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
}
@media (min-width: 1101px) {
    body.pricing .plan-card.featured { transform: translateY(-10px); }
    body.pricing .plan-card.featured:hover { transform: translateY(-14px); }
}
/* accent bar across the top of the recommended card */
body.pricing .plan-card.featured::after {
    content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px;
    background: linear-gradient(90deg, var(--navy), #2B6DA8);
}
body.pricing .plan-card.featured .plan-badge {
    background: var(--navy);
    border-radius: 0 16px 0 10px;
}
body.pricing .plan-card.featured .price-amount { color: var(--navy); }

/* --- price typography — anchor the number --- */
body.pricing .price-amount { letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
body.pricing .plan-name { color: var(--navy); }

/* --- feature checklists — tighter, calmer --- */
body.pricing .plan-features li { font-size: 13.5px; color: var(--body-text); }
body.pricing .plan-features li svg { color: var(--green); }

/* --- accountant plan — premium tonal-navy panel --- */
body.pricing .accountant-banner {
    position: relative;
    background: linear-gradient(135deg, #F2F6FB 0%, #FFFFFF 60%);
    border: 1px solid var(--border);
    border-left: 4px solid var(--navy);
    border-radius: 18px;
    box-shadow: var(--shadow-md);
    overflow: hidden;
}
body.pricing .accountant-eyebrow { color: var(--orange); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; font-size: 12px; }
body.pricing .accountant-text h3 { color: var(--navy); }
body.pricing .accountant-price .price-amount { color: var(--navy); }

/* --- trial strip — clean navy-tinted band --- */
body.pricing .launching-soon-strip {
    background: #F2F6FB;
    border: 1px solid var(--border);
    border-radius: 16px;
}
body.pricing .launching-soon-strip p strong { color: var(--navy); }
body.pricing .launching-soon-strip .strip-link { color: var(--navy); font-weight: 600; }
body.pricing .launching-soon-strip .strip-link:hover { color: #143049; }

/* --- comparison table — premium, readable at scale --- */
body.pricing .pricing-comparison-section { background: var(--section-bg); }
body.pricing .pricing-comparison-wrap {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 18px;
    box-shadow: var(--shadow-md);
    overflow: auto;               /* keep horizontal scroll on narrow screens */
}
body.pricing .pricing-comparison { border-collapse: separate; border-spacing: 0; }
body.pricing .pricing-comparison thead th {
    position: sticky; top: 0; z-index: 2;
    background: var(--navy); color: #fff;
    font-size: 13px; letter-spacing: 0.02em;
    padding: 16px 14px;
}
body.pricing .pricing-comparison thead th:first-child { background: var(--navy); border-top-left-radius: 0; }
/* first column sticks while scrolling wide */
body.pricing .pricing-comparison tbody th {
    position: sticky; left: 0; z-index: 1;
    background: #fff;
    color: var(--body-text); font-weight: 600; font-size: 13.5px;
    box-shadow: 1px 0 0 var(--border);
}
body.pricing .pricing-comparison tbody td {
    text-align: center; padding: 13px 14px; font-size: 13.5px; color: var(--body-text);
    font-variant-numeric: tabular-nums;
}
/* recommended (Growth) column — cool navy highlight instead of warm orange */
body.pricing .pricing-comparison thead th:nth-child(3) { background: var(--navy); color: #fff; }
body.pricing .pricing-comparison tbody td:nth-child(3) { background: #EDF3FB; }
body.pricing .pricing-comparison tbody tr:hover th,
body.pricing .pricing-comparison tbody tr:hover td { background: #F2F6FB; }
body.pricing .pricing-comparison tbody tr:hover td:nth-child(3) { background: #E3ECF8; }
body.pricing .pricing-comparison .check { color: var(--green); font-weight: 700; }
body.pricing .pricing-comparison .cross { color: #C7CDD4; }
body.pricing .comparison-price-cell { color: var(--navy); font-weight: 600; }

/* --- FAQ — clean accordion, navy questions --- */
body.pricing .faq-item {
    background: #fff; border: 1px solid var(--border); border-radius: 12px;
    margin-bottom: 12px; box-shadow: var(--shadow-sm);
    transition: box-shadow .2s ease;
}
body.pricing .faq-item:hover { box-shadow: var(--shadow-md); }
body.pricing .faq-item.open { border-color: #D5DEEA; }
body.pricing .faq-question { color: var(--navy); font-weight: 600; }
body.pricing .faq-question .chevron { color: var(--muted); }

@media (max-width: 600px) {
    body.pricing .plan-card:hover { transform: none; }
}