/* Contact only: loaded after styles.css. */
/* only the form: one card, centred at the width of eight grid columns, still crossing the cover's edge */
.mq-formcard{max-width:792px;margin-left:auto;margin-right:auto}
/* each topic: a 20 px icon before its label, in the label's colour (so it turns with the chosen topic) */
.mq-chip{position:relative;display:flex;align-items:center;justify-content:center;gap:10px}
/* the message cap: the count sits under the box at the right in the label's small type, red past the cap */
.mq-msgfoot{display:flex;align-items:flex-start;gap:8px 16px}
.mq-msgfoot .mq-err{flex:1 1 auto;min-width:0;align-items:flex-start}
.mq-msgfoot .mq-err svg{margin-top:2.5px}
.mq-count{flex:none;margin-left:auto;color:var(--ink3);font-size:15px;line-height:1.4;font-variant-numeric:tabular-nums}
.mq-count-over{color:var(--err);font-weight:600}
/* phones: the count stays right under the box and an error takes its own full-width line below it */
@media (max-width:767.98px){
.mq-msgfoot{flex-wrap:wrap}
.mq-count{order:-1;flex:1 0 100%;text-align:right}
/* under the card, the same 64 px every other page's last section keeps on phones */
.mq-cbody{padding-bottom:64px}
}
/* the topics' fieldset has no border (set here: the CSP allows no style attributes) */
.mq-form fieldset{border:0;min-width:0}
/* the topic chips are labels around native radios (one choice: the arrow keys move it, and it posts without
   JavaScript). The radio itself is visually hidden (.mq-vh, clipped to nothing) but spans the chip's box, so keyboard
   focus scrolls the whole chip into view, clear of the sticky header; the chip shows the chosen look and the focus
   ring */
.mq-chip>input{inset:-1px;width:auto;height:auto;margin:0}
.mq-chip:has(input:checked){background:var(--ink);border-color:var(--ink);color:var(--inv)}
.mq .mq-lt .mq-chip:has(input:focus-visible){outline:2px solid var(--ink);outline-offset:2px}
/* browsers without :has() (Firefox before 121) show each chip's native radio, so the chosen topic and keyboard focus
   still show */
@supports not selector(:has(*)){
.mq-chip>input.mq-vh{position:static;clip:auto;overflow:visible;white-space:normal}
}
/* the bot check (Cloudflare Turnstile) sits above Send in a plain block, so while it has nothing to show it takes no
   room (a flex row of the form would still get the 24 px gap). Only when it asks the visitor to tick its box does it
   show, the gap from Send with it (script.js adds .mq-botcheck-shown). Its frame sits on a line of text, so the line
   gets no height of its own: the box is exactly as tall as Turnstile's frame */
.mq-botcheck{line-height:0}
.mq-botcheck-shown{margin-bottom:24px}
/* without JavaScript the form can't send (the bot check needs it): a line under Send says so, and a visitor who sent it
   anyway comes back to that line (#contact-failed), clear of the sticky header */
.mq-target{scroll-margin-top:88px}
/* ...and without JavaScript the empty status line before it hides, so that line keeps the same 24 px gap from Send */
@media (scripting:none){.mq-submit>[data-contact-status]{display:none}}