/* ============================================================
   Savory Marketing — pages/pricing.css
   Pricing tiers, billing toggle, includes grid (pricing page only). Tokens only.
   ============================================================ */
/* .price-card moved to components.css (shared with home). */
.price-includes{margin-top:40px;display:grid;grid-template-columns:repeat(2,1fr);gap:12px 40px;max-width:820px}
.price-includes li{display:flex;gap:12px;font-size:14.5px;color:var(--ink-secondary);line-height:1.55}
@media (max-width:640px){.price-includes{grid-template-columns:1fr}}

/* Billing toggle: the blog .view-toggle segmented-control DNA, centered between
   the hero band and the tier cards. */
.billing-row{display:flex;justify-content:center;margin-block:34px}
.billing-toggle{display:inline-flex;border:1px solid var(--line);border-radius:var(--r-btn);
  background:var(--surface);overflow:hidden}
.billing-toggle button{display:inline-flex;align-items:center;gap:8px;padding:8px 16px;
  font-size:13.5px;color:var(--ink-secondary)}
.billing-toggle button:hover{background:var(--surface-hover)}
.billing-toggle button[aria-pressed="true"]{background:var(--surface-selected);color:var(--accent);font-weight:500}
.save-chip{font-size:11px;font-weight:600;padding:2px 8px;border-radius:var(--r-full);
  background:var(--positive-soft);color:var(--positive-strong)}

/* Tier cards: Free beside Pro; both price lines live in the DOM and [data-billing] swaps them
   (no JS text writes, no layout shift — the note line reserves its height). */
.tier-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;max-width:840px;margin:0 auto}
.tier{position:relative;border:1px solid var(--line);border-radius:var(--r-hero);
  background:var(--surface);padding:30px 28px;display:flex;flex-direction:column}
.tier--pro{border-color:var(--accent-line)}
.tier__ribbon{position:absolute;top:-12px;left:26px;background:var(--accent);color:var(--accent-ink);
  font-size:11.5px;font-weight:600;padding:4px 11px;border-radius:var(--r-full)}
.tier :is(h2,h3){font-size:17px;font-weight:600;letter-spacing:-.01em}
.tier__tag{font-size:13.5px;color:var(--ink-secondary);margin-top:4px}
.tier__price{margin-top:20px;display:flex;align-items:baseline;gap:6px}
.tier__amount{font-size:38px;font-weight:700;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.tier__per{font-size:14px;color:var(--ink-secondary)}
.tier__note{font-size:12.5px;color:var(--ink-secondary);margin-top:6px;min-height:17px;
  font-variant-numeric:tabular-nums}
.tier__list{margin-top:22px;display:grid;gap:11px}
.tier__list li{display:flex;gap:10px;font-size:14px;color:var(--ink-secondary);line-height:1.5}
.tier .btn{margin-top:26px;justify-content:center}
.tier__micro{font-size:12.5px;color:var(--ink-secondary);text-align:center;margin-top:12px}
@media (max-width:700px){.tier-grid{grid-template-columns:1fr}}
[data-billing="monthly"] .bill-annual{display:none}
[data-billing="annual"] .bill-monthly{display:none}