/* Explicit surface colours prevent inherited dark copy on dark cards. */
.hero, .question-feature, .first-conversation { color: #f9faf7; }
.question-feature-copy > p, .question-feature .question-reassurance { color: #e6f0f2; }
.question-feature .contact-options, .host, .conversation-grid article { color: #203545; }
.question-feature .contact-options :is(h3, label, summary) { color: #203545; }
.question-feature .contact-options :is(.form-intro, .form-note, .detail-intro) { color: #405461; }
.question-feature .contact-options :is(input, textarea) { color: #203545; border-color: #8299a2; }
.question-feature .contact-options :is(input, textarea):focus-visible { outline: 3px solid #235875; outline-offset: 2px; }
.question-feature :is(a, button, summary):focus-visible, .hero :is(a, button):focus-visible { outline: 3px solid #d3e8ed; outline-offset: 4px; }
.question-feature .contact-options :is(a, button, summary):focus-visible { outline-color: #235875; }
.hero { background: radial-gradient(circle at 88% 16%, #315667 0, #1c3b4b 42%, #172f40 100%); }
.question-feature { background: linear-gradient(140deg, #1b3445, #254a57); }
.host { border-top: 3px solid #50798a; }
.host:nth-child(2) { border-top-color: #967b5f; }
.first-conversation { background: linear-gradient(115deg, #233d4d, #345b64); }

.question-starters { margin: 18px 0 20px; }
.question-starters > span { display: block; margin-bottom: 9px; color: #405461; font-size: 12px; font-weight: 700; }
.question-starters-list { display: flex; flex-wrap: wrap; gap: 8px; }
.question-starters button { width: auto; min-height: 42px; padding: 8px 12px; border: 1px solid #9bb2ba; border-radius: 3px; background: #eef4f4; color: #203545; font: inherit; font-size: 12px; font-weight: 600; line-height: 1.35; text-align: left; cursor: pointer; }
.question-starters button:hover { background: #dce9ec; border-color: #456c7e; }
.question-starters button:focus-visible { outline: 3px solid #235875; outline-offset: 2px; }
@media (max-width: 560px) {
  .question-feature .contact-options :is(input, textarea) { font-size: 16px; }
  .question-feature, .hero { overflow-wrap: anywhere; }
}