/* WAI Mail: only what components.css does not have. */
.hero { padding-top: clamp(48px, 6vw, 104px); text-align: center; }
.hero .display { max-width: 13ch; margin: 20px auto 0; }
.hero .lead { max-width: 560px; margin: var(--s-6) auto 0; }
.hero .btn-row { margin-top: var(--s-7); }
.hero-visual { margin-top: clamp(64px, 8vw, 120px); margin-bottom: 0; }

.mail-demo { max-width: 720px; margin-inline: auto; }
.mail-demo-chat { padding: var(--s-6) clamp(16px, 4vw, 40px) var(--s-7); }
.mail-demo .chat-card { display: flex; gap: 14px; align-items: flex-start; }
.mail-demo .chat-card .emoji { font-size: 28px; }

.closing .lead { margin-top: var(--s-5); }

.form-col { max-width: 520px; margin-inline: auto; }
.request-form { display: flex; flex-direction: column; gap: var(--s-5); padding: var(--s-6); }
.request-form .btn { align-self: flex-start; }
.form-error { color: var(--adult-ink); }
.trap { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.request-sent { display: flex; flex-direction: column; gap: var(--s-3); padding: var(--s-6); text-align: center; align-items: center; }
.request-sent .emoji { font-size: 40px; }

.howto { max-width: 760px; margin: 0 auto; padding: 0; list-style: none; counter-reset: step; }
.howto-step { position: relative; padding: 0 0 var(--s-8) 72px; counter-increment: step; }
.howto-step::before {
  content: counter(step); position: absolute; left: 0; top: -4px;
  width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
  background: var(--paper); font-size: 19px; font-weight: 500;
}
.howto-step:last-child { padding-bottom: 0; }
.howto-step .body-l { margin-top: var(--s-3); }
.howto-action { margin-top: var(--s-5); }
.howto-note { margin-top: var(--s-4); padding: var(--s-4) var(--s-5); border-radius: var(--r-m); background: var(--paper); color: var(--ink-2); }
.mock { margin-top: var(--s-5); padding: var(--s-5); display: flex; flex-direction: column; gap: var(--s-3); }
.mock-row { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: var(--s-4); align-items: center; }
.mock-row + .mock-row { padding-top: var(--s-3); border-top: 1px solid var(--hair-soft); }
.mock-label { font-size: var(--text-caption); color: var(--ink-3); }
.mock-value { font-weight: 500; min-width: 0; }
.mock-value.copy-row { margin-top: 0; }
.mock-title { font-weight: 500; margin-bottom: var(--s-1); }
.mock-check { color: var(--ink-2); }
.mock-check.is-key { color: var(--ink); font-weight: 500; }
.mock-buttons { display: flex; gap: var(--s-2); margin-top: var(--s-2); }

.faq { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--wgap); max-width: 960px; margin: 0 auto; }
.faq-item { padding: var(--s-6); border-radius: var(--r-xl); background: var(--paper); }
.faq-item .muted { margin-top: var(--s-2); }
.faq-item:last-child:nth-child(odd) { grid-column: 1 / -1; }

.copy-row { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; margin-top: var(--s-2); }
.copy-row code { font-family: var(--font-mono); font-size: 14px; padding: 8px 12px; border-radius: var(--r-xs); background: var(--canvas); box-shadow: var(--ring-soft); word-break: break-all; }

.message { min-height: 60vh; }
.message-emoji { font-size: 56px; margin-bottom: var(--s-5); }
.message .lead { margin-top: var(--s-5); }
.message .lead ol { text-align: left; margin: var(--s-5) auto 0; max-width: 520px; padding-left: 1.2em; }
.message .lead li + li { margin-top: var(--s-2); }
.message .btn-row { margin-top: var(--s-7); }

.admin .lead { margin-top: var(--s-4); max-width: 640px; }
.admin-list { margin-top: var(--s-7); padding: var(--s-2) var(--s-5); }
.admin-row { display: flex; align-items: center; gap: var(--s-4); padding: var(--s-5) 0; flex-wrap: wrap; }
.admin-row + .admin-row { border-top: 1px solid var(--hair-soft); }
.admin-who { flex: 1; min-width: 220px; }
.admin-who .muted { margin-top: 2px; }
.admin-who .caption { margin-top: 4px; }
.admin-actions { display: flex; gap: var(--s-2); }

@media (max-width: 700px) {
  .faq { grid-template-columns: 1fr; }
  .request-form, .faq-item { padding: var(--s-5); }
  .howto-step { padding-left: 56px; padding-bottom: var(--s-7); }
  .howto-step::before { width: 36px; height: 36px; font-size: 16px; }
  .mock-row { grid-template-columns: 1fr; gap: var(--s-1); }
  .request-form .btn { align-self: stretch; }
}
.admin { padding-top: var(--s-8); }