/* ==========================================================================
   contact.css — XiroTV contact page. Reuses tokens from style.css and the
   hero / quick-card styles from faq.css. Only the email card is new here.
   ========================================================================== */

.contact-email-card {
  max-width: 620px; margin: 0 auto; text-align: center;
  padding: clamp(32px, 5vw, 52px) clamp(22px, 4vw, 44px);
  border-radius: var(--radius-lg); background: var(--grad-cta);
  border: 1px solid var(--border); backdrop-filter: blur(10px);
  display: flex; flex-direction: column; align-items: center; gap: 14px;
}
.contact-mail-ico {
  width: 64px; height: 64px; border-radius: 18px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--accent-soft); color: var(--accent); margin-bottom: 4px;
}
.contact-email-card h2 { font-size: clamp(1.4rem, 3vw, 1.9rem); margin: 0; }
.contact-email-card p { color: var(--text-soft); margin: 0; max-width: 44ch; }
.contact-email-link {
  font-size: clamp(1.15rem, 3vw, 1.55rem); font-weight: 700;
  color: var(--accent); word-break: break-word; margin: 2px 0 6px;
}
.contact-email-link:hover { text-decoration: underline; }
.contact-email-card .btn { margin-top: 4px; }

.contact-list { max-width: 860px; margin: 12px 0 16px; padding-left: 22px; color: var(--text-soft); line-height: 1.7; }
.contact-list li { margin-bottom: 8px; }
.contact-note { color: var(--text-mute); font-size: .92rem; }

.contact-page .section h2 { font-size: clamp(1.3rem, 2.6vw, 1.7rem); }
.contact-page .section a { color: var(--accent); }
.contact-page .section a.btn { color: #ffffff; }
.contact-page .section a:hover { text-decoration: underline; }
.contact-page .quick-card,
.contact-page .quick-card:hover { text-decoration: none; }
.contact-page .quick-card h3, .contact-page .quick-card p { color: inherit; }