/* Selr AI real contact form, ported verbatim from
   selr-forms-staging/assets/forms.css. Every selector is scoped under
   .selr-contact-form so nothing here can leak into the Framer template.
   Values are copied as-is, not re-picked, only the custom-property names
   carry an scf- prefix so they cannot collide with the host page's own
   variables. */

.selr-contact-form {
  --scf-ground:      #f5f5e9;
  --scf-surface:     #fcfcfa;
  --scf-surface-hi:  #fffffa;
  --scf-alt:         #fafaf7;

  --scf-ink-max:     #0d0d0d;
  --scf-display:     #1f1f1f;
  --scf-body:        #242424;
  --scf-ink:         #292929;
  --scf-ink-2:       #3d3d3d;
  --scf-muted:       #616161;

  --scf-accent:      #6736E2;
  --scf-signal-bad:  #c25d5d;

  --scf-hair:        rgba(227, 227, 227, 0.45);
  --scf-ring:        rgba(255, 255, 255, 0.75);
  --scf-field:       rgba(255, 255, 255, 0.35);
  --scf-field-focus: #fafaf7;

  --scf-r-field: 20px;
  --scf-r-card:  30px;
  --scf-r-btn:   40px;

  --scf-spring: cubic-bezier(0.4, 0, 0.2, 1);

  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  color: var(--scf-body);
}

.selr-contact-form *, .selr-contact-form *::before, .selr-contact-form *::after { box-sizing: border-box; }

/* Manrope does display, Inter does body. Neither crosses over. */
.selr-contact-form h2, .selr-contact-form label, .selr-contact-form .btn {
  font-family: Manrope, -apple-system, BlinkMacSystemFont, sans-serif;
}

.selr-contact-form a { color: var(--scf-accent); }

/* ------------------------------------------------------------ form card */

/* NO CARD OF OUR OWN.
 *
 * We mount INSIDE the template's card, the one already holding the Selr AI
 * lockup and "No pitch deck, no pressure". That card is a translucent grey
 * (rgba(227,227,227,.45)) over a blur. Drawing the same fill again inside it
 * stacks two translucent layers, and the form half renders visibly darker than
 * the header above it. Same colour value, different result, which is why it
 * reads as two designs on one page.
 *
 * So this stays transparent and only carries the inset. 27px matches the
 * template's own header inset, measured off the live card, so the fields line
 * up with the text above them instead of sitting on their own grid.
 */
.selr-contact-form .card {
  background: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-radius: 0;
  box-shadow: none;
  padding: 4px 27px 27px;
}

.selr-contact-form .fields { display: flex; flex-direction: column; gap: 16px; }
.selr-contact-form .row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

.selr-contact-form label { display: block; }
.selr-contact-form .label {
  display: block;
  font-weight: 600; font-size: 13px; letter-spacing: -0.025em;
  color: #242424; margin-bottom: 7px;
}
.selr-contact-form .optional { color: var(--scf-muted); font-weight: 500; }

/* the wrapper carries the padding and the surface, the control itself is bare */
.selr-contact-form .field {
  background: var(--scf-field);
  border: 1px solid var(--scf-hair);
  border-radius: var(--scf-r-field);
  padding: 12px 16px;
  transition: background .3s var(--scf-spring), border-color .3s var(--scf-spring);
}
.selr-contact-form .field:focus-within { background: var(--scf-field-focus); border-color: var(--scf-hair); }

.selr-contact-form .field input,
.selr-contact-form .field textarea,
.selr-contact-form .field select {
  width: 100%; border: 0; outline: 0; background: transparent; padding: 0;
  font-family: Manrope, sans-serif;
  font-size: 16px; font-weight: 500; letter-spacing: -0.03em;
  color: #242424; line-height: 1.2;
}
.selr-contact-form .field textarea { resize: vertical; min-height: 100px; line-height: 1.5; }
.selr-contact-form .field select { appearance: none; cursor: pointer; }
.selr-contact-form .field.select { position: relative; }
.selr-contact-form .field.select::after {
  content: ""; position: absolute; right: 18px; top: 50%;
  width: 8px; height: 8px; margin-top: -6px; pointer-events: none;
  border-right: 2px solid var(--scf-muted); border-bottom: 2px solid var(--scf-muted);
  transform: rotate(45deg);
}
.selr-contact-form ::placeholder { color: var(--scf-muted); opacity: 1; }

.selr-contact-form .field.invalid { border-color: var(--scf-signal-bad); }
.selr-contact-form .err {
  display: none; margin: 6px 0 0;
  font-size: 13px; color: var(--scf-signal-bad); letter-spacing: -0.01em;
}
.selr-contact-form .invalid + .err { display: block; }

/* checkbox groups: interest pills, the no-ABN toggle */
.selr-contact-form .choices { display: flex; flex-wrap: wrap; gap: 8px; }
.selr-contact-form .choices.under { margin-top: 10px; }
.selr-contact-form .choice {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 15px;
  background: var(--scf-field);
  border: 1px solid var(--scf-hair);
  border-radius: var(--scf-r-btn);
  font-size: 14px; letter-spacing: -0.01em; cursor: pointer;
  transition: background .2s var(--scf-spring), border-color .2s var(--scf-spring);
}
.selr-contact-form .choice input { position: absolute; opacity: 0; pointer-events: none; }
.selr-contact-form .choice:hover { background: rgba(255, 255, 255, 0.6); }
/* .on is set by selr-contact-form.js on change. :has() alone was not repainting
   reliably in the source template, so both are kept. */
.selr-contact-form .choice.on,
.selr-contact-form .choice:has(input:checked) {
  background: var(--scf-accent); border-color: var(--scf-accent); color: #fff;
}
.selr-contact-form .choice.on:hover, .selr-contact-form .choice:has(input:checked):hover { background: var(--scf-accent); }

/* honeypot. a real person never sees it, a bot fills it in */
.selr-contact-form .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.selr-contact-form .actions { margin-top: 26px; display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }

.selr-contact-form .btn {
  appearance: none; border: 0; cursor: pointer;
  display: inline-flex; align-items: center; gap: 10px;
  height: 44px; padding: 0 26px;
  border-radius: var(--scf-r-btn);
  background: var(--scf-ink-max); color: var(--scf-surface-hi);
  font-weight: 600; font-size: 15px; letter-spacing: -0.02em;
  transition: background .3s var(--scf-spring), transform .3s var(--scf-spring);
}
.selr-contact-form .btn:hover { background: var(--scf-accent); }
.selr-contact-form .btn:active { transform: scale(0.98); }
.selr-contact-form .btn[disabled] { opacity: .5; cursor: default; }
.selr-contact-form .btn .dot {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--scf-accent); transition: background .3s var(--scf-spring);
}
.selr-contact-form .btn:hover .dot { background: var(--scf-surface-hi); }

.selr-contact-form .fineprint { font-size: 13px; color: var(--scf-muted); margin: 0; letter-spacing: -0.01em; }

/* success replaces the form in place, no redirect */
.selr-contact-form .done { display: none; text-align: left; padding: 18px 0 8px; }
.selr-contact-form .done h2 {
  font-weight: 600; font-size: 26px; letter-spacing: -0.03em;
  color: var(--scf-display); margin: 0 0 10px;
}
.selr-contact-form .done p { margin: 0; color: var(--scf-ink-2); }
.selr-contact-form form.sent { display: none; }
.selr-contact-form form.sent + .done { display: block; }
.selr-contact-form .form-error {
  display: none; margin: 14px 0 0;
  font-size: 14px; color: var(--scf-signal-bad); letter-spacing: -0.01em;
}
.selr-contact-form .form-error.show { display: block; }

/* Framer's own breakpoints, 810 and 1200. Not Tailwind's. */
@media (max-width: 810px) {
  .selr-contact-form .row { grid-template-columns: 1fr; }
  .selr-contact-form .card { padding: 26px; }
}

/* ------------------------------------------------ ABN register lookup

   The widget injects its own stylesheet at runtime, after ours, so these
   overrides need enough specificity to win. It ships generic greys, greens
   and blues, none of which belong on this site. Same ground, same hairlines,
   same one accent, same 20px corners as every other field. */

.selr-contact-form .abnw-dropdown {
  background: var(--scf-surface-hi);
  border: 1px solid var(--scf-hair);
  border-radius: var(--scf-r-field);
  box-shadow: none;
  font-family: Inter, sans-serif;
  font-size: 14px;
  overflow: hidden;
}
.selr-contact-form .abnw-item { color: var(--scf-body); border-bottom: 1px solid var(--scf-hair); padding: 11px 16px; }
.selr-contact-form .abnw-item:hover, .selr-contact-form .abnw-item.abnw-active { background: var(--scf-alt); }
.selr-contact-form .abnw-item .abnw-n { font-family: Manrope, sans-serif; font-weight: 600; letter-spacing: -0.02em; }
.selr-contact-form .abnw-item .abnw-m { color: var(--scf-muted); font-size: 12px; }

.selr-contact-form .abnw-badge {
  background: var(--scf-field); color: var(--scf-ink-2);
  border: 1px solid var(--scf-hair); border-radius: var(--scf-r-btn);
  padding: 1px 8px; font-size: 11px;
}
.selr-contact-form .abnw-badge.ok { background: var(--scf-accent); border-color: var(--scf-accent); color: #fff; }

.selr-contact-form .abnw-empty { color: var(--scf-muted); padding: 12px 16px; }
.selr-contact-form .abnw-empty a { color: var(--scf-accent); }

.selr-contact-form .abnw-verified {
  background: var(--scf-field);
  border: 1px solid var(--scf-hair);
  border-radius: var(--scf-r-field);
  padding: 12px 16px;
}
.selr-contact-form .abnw-verified.warn { background: var(--scf-field); border-color: var(--scf-signal-bad); }
.selr-contact-form .abnw-verified.unv  { background: var(--scf-field); border-color: var(--scf-hair); }
.selr-contact-form .abnw-chk { background: var(--scf-accent); }
.selr-contact-form .abnw-verified.warn .abnw-chk { background: var(--scf-signal-bad); }
.selr-contact-form .abnw-verified.unv .abnw-chk  { background: var(--scf-muted); }
.selr-contact-form .abnw-vlabel { color: var(--scf-accent); font-family: Manrope, sans-serif; }
.selr-contact-form .abnw-verified.warn .abnw-vlabel { color: var(--scf-signal-bad); }
.selr-contact-form .abnw-verified.unv .abnw-vlabel  { color: var(--scf-muted); }
.selr-contact-form .abnw-vname { font-family: Manrope, sans-serif; color: var(--scf-display); }
.selr-contact-form .abnw-vdet  { color: var(--scf-ink-2); }
.selr-contact-form .abnw-change { color: var(--scf-accent); }