/* NeatSpeak site: forms and long-form prose on top of /styles.css. */
.q-hero{padding:88px 0 56px}
.q-hero h1{max-width:18ch}
.q-points{display:grid;gap:1px;background:var(--rule);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);margin:0}
@media(min-width:760px){.q-points{grid-template-columns:repeat(3,1fr)}}
.q-point{background:var(--bg-elevated);padding:28px 26px}
.q-point h3{font-size:21px}
.q-point p{margin:0;color:var(--ink-soft);font-size:15.5px;line-height:1.65}

.q-form{display:grid;gap:20px;max-width:620px;margin-top:8px}
.q-field{display:grid;gap:8px}
.q-field label,.q-legend{font-family:var(--mono);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft)}
.q-field input,.q-field select{width:100%;font:inherit;font-size:16px;color:var(--ink);background:var(--bg-elevated);border:1px solid var(--rule-strong);border-radius:2px;padding:13px 14px}
.q-field input:focus,.q-field select:focus{outline:2px solid var(--amber);outline-offset:1px}
.q-row{display:grid;gap:20px}
@media(min-width:640px){.q-row{grid-template-columns:1fr 1fr}}
.q-check{display:flex;gap:12px;align-items:flex-start;color:var(--ink-soft);font-size:15px;line-height:1.55}
.q-check input{margin-top:4px;width:18px;height:18px;accent-color:var(--amber);flex:none}
.q-hp{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
.q-form .btn{border:0;cursor:pointer;justify-self:start;margin-top:4px}
.q-form .btn:disabled{opacity:.6;cursor:progress}
.q-status{min-height:1.6em;margin:0;font-size:15.5px;color:var(--ink-soft)}
.q-status.ok{color:var(--amber-warm)}
.q-status.err{color:#ff8f8f}
.q-note{font-size:14px;color:var(--ink-dim);margin:0}
.q-note a,.q-prose a{color:var(--amber)}

.q-prose{max-width:70ch;color:var(--ink-soft);font-size:16.5px;line-height:1.7}
.q-prose h2{margin:44px 0 14px}
.q-prose h3{font-size:21px;margin:28px 0 8px}
.q-prose p,.q-prose ul{margin:0 0 16px}
.q-prose li{margin-bottom:8px}
.q-prose strong{color:var(--ink)}
.q-prose table{width:100%;border-collapse:collapse;margin:8px 0 20px;font-size:15px}
.q-prose th,.q-prose td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--rule);vertical-align:top}
.q-prose th{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-dim);font-weight:500}
.q-table-scroll{overflow-x:auto}
.q-updated{font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;color:var(--ink-dim)}
@media(max-width:640px){.q-hero{padding:56px 0 40px}.wrap{padding:0 16px}}

/* Before and after examples */
.ba{display:grid;gap:1px;background:var(--rule);border:1px solid var(--rule)}
@media(min-width:760px){.ba{grid-template-columns:1fr 1fr}}
.ba-card{background:var(--bg-elevated);padding:26px 26px 24px;display:grid;gap:14px;align-content:start}
.ba-tag{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--amber);margin:0}
.ba-label{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-dim);margin-bottom:6px}
.ba-before,.ba-after{margin:0;font-size:16px;line-height:1.6}
.ba-before{color:var(--ink-dim);font-style:italic}
.ba-before del{color:#ff8f8f;text-decoration-thickness:1.5px;font-style:italic}
.ba-before .ba-wrong{color:#ff8f8f;text-decoration:underline wavy rgba(255,143,143,.7);text-underline-offset:3px}
.ba-after{color:var(--ink)}
.ba-after mark{background:rgba(244,185,66,.18);color:var(--amber-warm);border-radius:3px;padding:0 3px}
.ba-note{font-size:13.5px;color:var(--ink-dim);margin:0}
.ba-legend{display:flex;flex-wrap:wrap;gap:8px 22px;margin:0 0 22px;font-size:14px;color:var(--ink-soft)}
.ba-legend del{color:#ff8f8f}
.ba-legend mark{background:rgba(244,185,66,.18);color:var(--amber-warm);border-radius:3px;padding:0 3px}