/* Contact form styles, shared by every Veskyra marketing site.
   Canonical copy: veskyra/workers/forms/client/contact-form.css. Each site
   ships a verbatim copy in its public/ folder; edit here and re-copy.
   Uses only tokens every site defines (--ink, --paper, --surface, --border,
   --accent, --accent-ink, --muted); --danger and --btn-ink fall back. */
/* The form and its sent state both set display, which would override the
   [hidden] attribute the script toggles. Keep hidden meaning hidden. */
.contact-form[hidden],.form-sent[hidden]{display:none !important}
.contact-wrap-form{display:grid;gap:24px;margin-top:40px}
@media(min-width:900px){.contact-wrap-form{grid-template-columns:1.25fr .75fr;align-items:start}}
.contact-form{display:grid;grid-template-columns:1fr;gap:16px;position:relative}
@media(min-width:640px){.contact-form{grid-template-columns:1fr 1fr}.contact-form .span-2{grid-column:1 / -1}}
.contact-form .field{display:flex;flex-direction:column;gap:6px;min-width:0}
.contact-form label{font-size:.9rem;font-weight:600;color:var(--ink)}
.contact-form .req{color:var(--accent-ink);margin-left:2px}
.contact-form .opt{font-weight:400;color:var(--muted);font-size:.82rem;margin-left:4px}
.contact-form input,.contact-form select,.contact-form textarea{
  font:inherit;font-size:1rem;font-weight:400;padding:12px 14px;border-radius:10px;
  border:1px solid var(--border);background:var(--paper);color:var(--ink);width:100%;
  box-sizing:border-box;transition:border-color .15s ease
}
.contact-form textarea{resize:vertical;min-height:132px}
.contact-form input:hover,.contact-form select:hover,.contact-form textarea:hover{border-color:var(--muted)}
.contact-form input:focus-visible,.contact-form select:focus-visible,.contact-form textarea:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-color:var(--accent)}
.contact-form [aria-invalid="true"]{border-color:var(--danger,#B3382C)}
.contact-form .err{font-size:.82rem;color:var(--danger,#B3382C)}
.contact-form .err:empty{display:none}
.contact-form .hp{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}
.contact-form .ts-field{min-height:65px}
.contact-form .form-status{font-size:.9rem;color:var(--danger,#B3382C);margin:0}
.contact-form .form-status:empty{display:none}
.contact-form .form-status a{color:inherit;font-weight:600}
.contact-form .form-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;margin-top:4px}
.contact-form .form-foot .btn{min-width:180px}
.contact-form .form-foot .btn[disabled]{opacity:.65;cursor:progress;transform:none}
.contact-form .fine{font-size:.82rem;color:var(--muted);margin:0;max-width:46ch}
.contact-form .fine a{color:var(--accent-ink)}
.form-sent{display:flex;flex-direction:column;gap:12px;padding:8px 0}
.form-sent:focus{outline:none}
.form-sent .sent-mark{width:44px;height:44px;border-radius:50%;background:var(--accent);color:var(--btn-ink,#fff);display:grid;place-items:center}
.form-sent h3{font-size:1.35rem;margin:4px 0 0}
.form-sent p{margin:0;color:var(--muted);max-width:52ch}
.form-sent .mono{font-family:"JetBrains Mono",ui-monospace,monospace}