/* The free-scan form (guest/site/scan-form): port of the prototype's .scn-form (site-scan hero) and .scn-cta (dark band).
   Loaded by the partial itself, so the home hero gets it too. */
.scn-form { width: 100%; max-width: 640px; text-align: left; display: grid; gap: 10px; min-width: 0; }
.scn-form-hero { background: var(--panel); border-radius: var(--r-xl); box-shadow: var(--shadow-pop); padding: 18px; margin: 10px auto 0; }
.scn-form p { margin: 0; }
.scn-form .scn-label { font-size: 13px; font-weight: 500; color: var(--ink); }
.scn-row { display: flex; gap: 8px; min-width: 0; }
.scn-row > .btn-lg { height: 48px; flex: none; }
.scn-field { position: relative; flex: 1; min-width: 0; }
.scn-field > svg.lucide { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--ink-3); pointer-events: none; }
.scn-input.input { width: 100%; height: 48px; font-size: 16px; padding: 0 14px 0 40px; border-radius: var(--r-md); }
.scn-input[aria-invalid="true"] { box-shadow: 0 0 0 1.5px var(--bad), var(--shadow-sm); }
.scn-err { display: flex; align-items: flex-start; gap: 6px; font-size: 12.5px; line-height: 1.45; color: var(--bad-ink); }
.scn-err svg.lucide { margin-top: 1px; flex: none; }
.scn-taken { display: grid; grid-template-columns: 14px minmax(0, 1fr) auto; align-items: center; gap: 4px 10px; }
.scn-taken > svg.lucide { align-self: start; margin-top: 2px; }
.scn-taken p { min-width: 0; line-height: 1.45; }
.scn-taken .btn { color: var(--info-ink); }
.scn-taken .btn:hover { background: color-mix(in srgb, var(--info-ink) 10%, transparent); color: var(--info-ink); }
.scn-help { font-size: 12.5px; color: var(--ink-3); }
.scn-form .recaptcha-note { margin-top: 0; }
.scn-marks { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: 12.5px; color: var(--ink-2); padding-top: 10px; border-top: 1px solid var(--hair); }
.scn-mk { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.scn-mk svg.lucide { width: 14px; height: 14px; color: var(--good-ink); }
.scn-sep { color: var(--ink-4); }

/* on the dark band */
.scn-form-dark .scn-label { font-size: 13px; font-weight: 500; color: #f5f5f5; opacity: .75; }
.scn-form-dark .scn-field > svg.lucide { color: color-mix(in srgb, white 55%, transparent); }
.scn-form-dark .scn-input.input { background: color-mix(in srgb, white 7%, transparent); color: color-mix(in srgb, white 94%, black); box-shadow: 0 0 0 1px color-mix(in srgb, white 16%, transparent); }
.scn-form-dark .scn-input::placeholder { color: color-mix(in srgb, white 45%, transparent); }
.scn-form-dark .recaptcha-note { color: color-mix(in srgb, white 45%, transparent); }

@media (max-width: 560px) {
  .scn-form-hero { padding: 14px; }
  .scn-row { flex-direction: column; }
  .scn-row > .btn { width: 100%; justify-content: center; }
  .scn-taken { grid-template-columns: 14px minmax(0, 1fr); }
  .scn-taken .btn { grid-column: 2; justify-self: start; margin-left: -12px; }
  .scn-marks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 10px; }
  .scn-sep { display: none; }
}