/* Free and Pro (free-and-pro-plans D16), loaded only by the Free and Pro pages after site.css.
   Included features keep the cobalt tick from site.css. Fold this into site.css once the capacity pages retire. */
.plan-lead { margin: 2px 0 -6px; color: var(--ink); font-size: 15px; font-weight: 700; }
.plan-estimate-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 10px; }
.home-estimate-total .plan-name { padding: 3px 10px; border-radius: var(--r-pill); color: var(--cobalt-700); background: #fff; font-size: 12px; font-weight: 800; letter-spacing: .04em; }
.plan-examples { margin-top: 20px; }
.plan-cards .price-card-pro { box-shadow: inset 0 0 0 2px var(--cobalt-500), 4px 24px 56px rgb(47 70 168 / .14); }
.plan-extras { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: 36px; }
.plan-extra { display: grid; align-content: start; justify-items: start; gap: 12px; padding: clamp(22px, 3vw, 32px); border-radius: var(--r-hero); background: var(--frost); box-shadow: var(--tile); }
.plan-extra h2 { margin: 0; font-size: clamp(22px, 2.6vw, 28px); line-height: 1.2; }
.plan-extra p { margin: 0; }
.plan-extra .eyebrow { margin: 0; }
.plan-extra .home-plan-ticks { margin: 4px 0; }
.plan-extra-note { color: var(--ink-3); font-size: 13px; line-height: 1.6; }
.plan-extras-section .plan-extras { margin-top: 0; }
@media (max-width: 860px) { .plan-extras { grid-template-columns: minmax(0, 1fr); } }