/* ============================================================
   BORG SITES, /email (Borg Sites Email, the standalone product)

   Only what this page adds. The cards, the filled-circle checks,
   the compare card and the price typography are the pricing
   revamp's own (components.css + home.css + pricing.css, all
   loaded ahead of this file), so the two pages cannot drift.
   ============================================================ */

/* ---------------- The mailbox tiers ----------------
   Three cards, the same generous rhythm as the plan ladder. */
.email-tiers {
  display: grid; gap: 1.2rem; align-items: stretch;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
}
/* The term line sits directly under the price, before the description, and
   states the condition that makes the price true. Body size on purpose: it is
   the honest statement of what is charged, not fine print. */
.email-tier .price-card__term { margin-top: .1rem; }
/* home.css gives a price card's description a two-line minimum so a row of
   cards lines up. Here the term line already fills that gap. */
.email-tier .price-card__desc { min-height: 0; margin-top: .8rem; }

/* ---------------- The free forwarding lane ----------------
   Same shape as the Domain Dominion callout on /pricing: glyph, the story,
   and the price on the right. */
.email-free {
  display: grid; grid-template-columns: auto 1fr auto; gap: 1.4rem; align-items: center;
  padding: clamp(1.4rem, 1rem + 2vw, 2.2rem);
}
@media (max-width: 680px) { .email-free { grid-template-columns: 1fr; text-align: center; } }
.email-free__icon {
  width: 64px; height: 64px; border-radius: var(--radius); display: grid; place-items: center;
  background: var(--grad-brand); box-shadow: 0 12px 28px -12px rgba(123,63,228,.6);
}
.email-free__icon svg { width: 32px; height: 32px; color: #fff; }
.email-free__price { font-family: var(--font-display); font-weight: 800; font-size: var(--fs-xl); line-height: 1.1; }
.email-free__price small { display: block; margin-top: .35rem; font-size: var(--fs-xs); font-weight: 500; color: var(--text-faint); }

/* ---------------- Email on its own ---------------- */
.email-point { padding: clamp(1.3rem, 1rem + 1vw, 1.8rem); }
.email-point h3 { font-size: var(--fs-md); margin-bottom: .5rem; }
.email-point p { color: var(--text-dim); font-size: var(--fs-sm); margin: 0; }

/* ---------------- The ask ---------------- */
.email-reach { margin-top: 1.4rem; text-align: center; color: var(--text-faint); font-size: var(--fs-sm); }
.email-reach a { color: var(--brand-2); text-decoration: underline; }
.email-reach a:hover { color: var(--text); }