/* Like Magic - register-your-interest forms (customers + providers). Loaded only by register-interest.html,
   provider-interest.html and thanks.html, after lm.css; it uses lm.css's tokens (--v --ink --mute --line --soft --red).
   Field labels are scoped to ".form .field > label" on purpose: a bare ".form label" (0,1,1) would beat the
   .opt / .trade / .check tiles (0,1,0) and turn them into block labels. Added 15 Oct 2026. */
.form{margin-top:18px}
.form .field{margin:0 0 18px}
.form .field > label,.form legend{display:block;font-weight:650;font-size:15px;margin:0 0 6px}   /* field labels only - never the .opt/.trade/.check tiles */
.form .field > label .mute,.form legend .mute{font-weight:500}
.form fieldset{border:0;padding:0;margin:0 0 18px;min-width:0}
.form input[type=text],.form input[type=tel],.form input[type=email],.form select,.form textarea{width:100%;font:inherit;color:var(--ink);background:#fff;border:1.5px solid var(--line);border-radius:12px;padding:13px 14px;min-height:48px}
.form textarea{min-height:96px;resize:vertical}
.form input:focus-visible,.form select:focus-visible,.form textarea:focus-visible,.form .btn:focus-visible,.form .check input:focus-visible{outline:3px solid var(--v);outline-offset:2px;border-color:var(--v)}
.form [aria-invalid=true]{border-color:var(--red);box-shadow:0 0 0 3px rgba(220,38,38,.12)}
.form .hint{margin:6px 0 0;font-size:14px;color:var(--mute)}
.form .err-msg{margin:6px 0 0;font-size:14px;color:var(--red);font-weight:650}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media (max-width:620px){.row2{grid-template-columns:1fr}}
.opts{display:flex;flex-wrap:wrap;gap:10px}
.form .opt,.form .trade,.form .check{display:flex}   /* belt and braces: the tiles are flex rows whatever a later label rule says */
.form .field > .check{display:flex;font-weight:500;font-size:15.5px;margin:0}   /* a .check tile placed straight under a .field keeps its tile styling (beats .form .field > label) */
.opt{display:flex;align-items:center;gap:10px;flex:1 1 180px;border:1.5px solid var(--line);border-radius:12px;padding:12px 14px;background:#fff;cursor:pointer;font-weight:600;min-height:48px}
.opt input{accent-color:var(--v);width:20px;height:20px;margin:0;flex:none}
.opt:has(input:checked){border-color:var(--v);background:var(--soft)}
.checks2{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:10px}
.trade{display:flex;align-items:center;gap:8px;border:1.5px solid var(--line);border-radius:12px;padding:10px 12px;background:#fff;cursor:pointer;font-size:15px;font-weight:600;min-height:48px}
.trade input{accent-color:var(--v);width:20px;height:20px;margin:0;flex:none}
.trade:has(input:checked){border-color:var(--v);background:var(--soft)}
.check{display:flex;gap:12px;align-items:flex-start;min-height:48px;padding:12px 0;margin:0;font-size:15.5px;line-height:1.45}   /* >= 48 px target (spec 9): one line = 12 + 24 + 12 */
.check input{accent-color:var(--v);width:22px;height:22px;margin:2px 0 0;flex:none}
.form .check + .err-msg{margin:-8px 0 8px 34px}   /* the tile's message sits on its own row under the sentence, lined up with the text (22 px box + 12 px gap) */
.notice{font-size:14.5px;color:var(--mute);margin:22px 0 6px}
.notice summary{color:var(--ink)}
.alert.err{background:#fdeeee;border-left:5px solid var(--red);color:#8a1f1f;border-radius:10px;padding:12px 16px;margin:0 0 18px;font-weight:600}
.alert.err ul{margin:6px 0 0;padding-left:20px;font-weight:500}
.ok-box{border-color:#9fe0b8;background:#f3fbf6;margin-bottom:22px}
.form .btn[aria-busy=true]{opacity:.65;cursor:progress}
.form .btn[disabled]{opacity:.55;cursor:not-allowed;transform:none}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}