/* pricing-v2.css — shared Solo/Team/Agency pricing design (matches the landing page).
   Loaded AFTER each page's inline <style> so these rules win the cascade.
   Relies on the page's existing card shell (.price-card/.price-badge/.price-name/.price-amount)
   and design tokens (--font-mono/--violet/--ink/--ink-3/--line/--green/--paper/--white). */

.price-grid { grid-template-columns: repeat(3, 1fr); max-width: 1060px; }
@media (max-width: 900px) { .price-grid { grid-template-columns: 1fr; max-width: 420px; } }

/* Billing period toggle */
.billing-toggle { display: inline-flex; gap: 4px; margin: 1.7rem auto 0; padding: 4px; background: var(--paper); border: 1px solid var(--line); border-radius: 100px; }
.billing-toggle button { font-family: var(--font-mono); font-size: 0.74rem; font-weight: 600; letter-spacing: 0.02em; padding: 8px 18px; border: none; background: transparent; color: var(--ink-3); border-radius: 100px; cursor: pointer; display: inline-flex; align-items: center; gap: 7px; transition: background .15s, color .15s; }
.billing-toggle button.active { background: var(--ink); color: var(--white); }
.billing-toggle .save-pill { font-size: 0.62rem; padding: 2px 7px; border-radius: 100px; background: var(--green); color: #fff; letter-spacing: 0.03em; }
.billing-toggle button.active .save-pill { background: rgba(255,255,255,.22); color: #fff; }

/* Price header — equalized so feature lists start at the same Y across cards */
.price-annual { font-family: var(--font-mono); font-size: 0.66rem; color: var(--ink-3); margin: 0.35rem 0 0; letter-spacing: 0.02em; min-height: 1.05em; }
.price-kind { min-height: 2.5em; line-height: 1.3; }

/* Uniform comparison rows: icon · label · value — identical rows in every card so
   row N lines up horizontally across Solo / Team / Agency (hairline guides the eye). */
.price-features { list-style: none; margin: 0 0 1.6rem; padding: 0; flex: 1; }
.price-features li {
    display: grid;
    grid-template-columns: 1.2em minmax(0, 1fr) auto;
    gap: 0.5em;
    align-items: start;
    padding: 0.5rem 0;
    border-top: 1px solid var(--line);
    font-size: 0.82rem;
    line-height: 1.3;
    color: var(--ink-2);
}
.price-features li::before { content: none !important; } /* kill the base bullet ✓ */
.price-features li:first-child { border-top: none; }
.price-features li .ft-ic { color: var(--green); font-weight: 700; font-size: 0.82rem; line-height: 1.35; }
.price-features li.off { opacity: .55; }
.price-features li.off .ft-ic { color: var(--ink-3); }
.price-features .ft-val { font-family: var(--font-mono); font-weight: 700; font-size: 0.76rem; color: var(--violet); white-space: nowrap; text-align: right; }

/* ⓘ info icon + hover/focus tooltip */
.feat-info { position: relative; display: inline-flex; vertical-align: middle; margin-left: 3px; }
.feat-i { width: 15px; height: 15px; border-radius: 50%; border: 1px solid #c9c7bf; color: #9c9a92; font-size: 9.5px; font-weight: 700; font-style: italic; font-family: Georgia, serif; display: inline-flex; align-items: center; justify-content: center; cursor: help; line-height: 1; transition: border-color .12s, color .12s; }
.feat-info:hover .feat-i, .feat-info:focus .feat-i { border-color: var(--violet); color: var(--violet); }
.feat-tip { position: absolute; bottom: calc(100% + 9px); left: 50%; transform: translateX(-50%); width: 218px; max-width: 62vw; background: #1a1a18; color: #f7f6f2; font-size: .72rem; font-weight: 400; line-height: 1.45; letter-spacing: 0; padding: 9px 11px; border-radius: 9px; box-shadow: 0 10px 30px rgba(0,0,0,.22); opacity: 0; visibility: hidden; transition: opacity .12s ease; z-index: 60; text-align: left; pointer-events: none; }
.feat-tip::after { content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border: 5px solid transparent; border-top-color: #1a1a18; }
.feat-info:hover .feat-tip, .feat-info:focus .feat-tip, .feat-info:focus-within .feat-tip { opacity: 1; visibility: visible; }