/* Voxden — voxden.app
   The few rules the legal, contact and 404 pages need on top of site.css.
   Same tokens, same easing; loaded after site.css so it only ever adds. */

/* ---------- the summary note inside a prose page ---------- */
.prose .note { margin: 0 0 4px; }
.prose .note p { color: inherit; font-size: inherit; line-height: 1.6; }
.prose .note p + p { margin-top: 10px; }
.prose .note strong { color: var(--text); }

/* ---------- contact cards ----------
   .page-head comes from site.css, where it carries no bottom margin: the
   block under it sets the gap, the way .plans does on the pricing page. */
.contact-grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px;
  margin-top: clamp(32px, 4vw, 52px);
}
.contact-card { display: flex; flex-direction: column; }
.contact-card .h3 { margin-bottom: 10px; }
.contact-card p { color: var(--muted); font-size: 15px; line-height: 1.6; }
.contact-card p + p { margin-top: 12px; }
.contact-links { display: grid; justify-items: start; gap: 10px; margin-top: auto; padding-top: 20px; }
.contact-links a {
  color: var(--mint); font-size: 14.5px;
  border-bottom: 1px solid rgba(var(--mint-rgb), .3);
  transition: color .2s, border-color .2s var(--ease);
}
.contact-links a:hover { color: var(--mint-light); border-bottom-color: rgba(var(--mint-rgb), .7); }

/* ---------- 404 ---------- */
.page-404 { display: grid; place-items: center; min-height: 62vh; padding: clamp(56px, 9vw, 108px) 0; }
.page-404 .cta { width: 100%; max-width: 620px; margin-inline: auto; }

/* ---------- responsive ---------- */
@media (max-width: 1024px) {
  .contact-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 768px) {
  .contact-grid { grid-template-columns: 1fr; }
  .contact-links { padding-top: 16px; }
}