html { scroll-behavior: smooth; }
body { font-family: 'Inter', sans-serif; color: #000; }
h1, h2, h3, .font-heading { font-family: 'Outfit', sans-serif; }

/* Answer cards (radio + checkbox) */
.opt { display: flex; align-items: center; gap: 12px; padding: 14px 12px; border: 2px solid #000; border-radius: 6px; background: #fff; cursor: pointer; font-weight: 600; font-size: 15px; line-height: 1.3; transition: background .2s; }
.opt:hover { background: #D6E3FF; }
.opt input { position: absolute; opacity: 0; pointer-events: none; }
.opt .dot { flex: none; width: 26px; height: 26px; border-radius: 9999px; border: 3px solid #004DFF; background: #fff; box-shadow: inset 0 0 0 4px #fff; }
.opt.is-check .dot { border-radius: 6px; }
.opt:has(input:checked) { background: #D6E3FF; border-color: #004DFF; }
.opt:has(input:checked) .dot { background: #004DFF; }
.opt:has(input:focus-visible) { outline: 3px solid #004DFF; outline-offset: 2px; }
.opts-error .opt { border-color: #ef4444; }

/* Text inputs */
.field { display: block; width: 100%; border: 2px solid #000; border-radius: 6px; padding: 12px; font-size: 16px; font-weight: 500; background: #fff; }
.field:focus { outline: 3px solid #004DFF; outline-offset: 1px; }
.field.has-error { border-color: #ef4444; }
.field-msg { display: none; color: #dc2626; font-size: 14px; margin-bottom: 6px; }
.field-msg.show { display: block; }

.spinner { width: 72px; height: 72px; border-radius: 9999px; border: 4px solid rgba(3,54,169,.25); border-top-color: #0336A9; animation: spin 1s linear infinite; margin: 16px auto 0; }
@keyframes spin { to { transform: rotate(360deg); } }

/* FAQ */
.faq details { border-bottom: 1px solid #E5E5E5; }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 18px 0; font-family: 'Outfit', sans-serif; font-weight: 600; font-size: 18px; color: #000; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; flex: none; width: 24px; height: 24px; border: 1.5px solid #000; border-radius: 9999px; display: grid; place-items: center; font-size: 18px; line-height: 1; }
.faq details[open] summary::after { content: '\2212'; }
.faq .answer { padding: 0 0 18px; color: #333; line-height: 1.65; }

/* Pulsing ring on the hero CTA (same effect as nationaldisrepairhelp.org) */
@keyframes pulse-ring {
  0% { box-shadow: 0 0 0 0 rgba(255, 38, 26, 1); }
  70% { box-shadow: 0 0 0 15px rgba(255, 38, 26, 0); }
  100% { box-shadow: 0 0 0 15px rgba(255, 38, 26, 0); }
}
.pulse-cta { animation: pulse-ring 2s linear infinite; }
.pulse-cta:disabled { animation: none; }
@media (prefers-reduced-motion: reduce) { .pulse-cta { animation: none; } }

/* Long strings (emails, URLs) must wrap rather than push the page wider than the screen */
p, li, a, h1, h2, h3, summary, label { overflow-wrap: anywhere; }