/* Contact form styles, shared by the Veskyra marketing sites. */
/* 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}
/* "Looking for a specific platform?" panel beside the form: each platform is
   one row (badge, name in its own color, one line on what it does). The row's
   border takes the platform color on hover, as the platform cards do. */
.contact-platforms h3{font-size:1.15rem;margin-bottom:6px}
.contact-platforms > p{font-size:.92rem;margin:0 0 18px}
.platform-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:8px}
.platform-row{display:flex;align-items:center;gap:14px;padding:12px 14px;border:1px solid var(--border);border-radius:12px;text-decoration:none;color:inherit;background:var(--paper);transition:border-color .15s ease,transform .15s ease}
.platform-row:hover{transform:translateY(-1px)}
.platform-row .platform-badge{width:32px;height:32px}
.platform-row-name{display:block;font-family:"Plus Jakarta Sans",Inter,sans-serif;font-weight:700;font-size:.98rem;line-height:1.25}
.platform-row-line{display:block;font-size:.85rem;line-height:1.4;color:var(--muted)}
.platform-row.card-reskyr:hover{border-color:var(--reskyr-accent)}
.platform-row.card-kyrvec:hover{border-color:var(--kyrvec-accent)}
.platform-row.card-ryskra:hover{border-color:var(--ryskra-accent)}
.platform-row.card-valkred:hover{border-color:var(--valkred-accent)}
.platform-row.card-korlea:hover{border-color:var(--korlea-accent)}