/* LeadForm v3 — design A from the Atelier sketch (rk-a-start-her).
   Colours and fonts are custom properties so the Webflow page can set them;
   the fallbacks are the sketch's values. Inherited fonts cross the shadow root. */
.rk3 {
  --_ink: var(--rk3-ink, #0f2620);
  --_text: var(--rk3-text, #17201d);
  --_muted: var(--rk3-muted, #56635e);
  --_line: var(--rk3-line, #dcd8cc);
  --_accent: var(--rk3-accent, #d4f06a);
  --_accent-hover: var(--rk3-accent-hover, #c7e650);
  --_soft: var(--rk3-soft, #eef5df);
  --_error: var(--rk3-error, #b42318);
  --_warn: var(--rk3-warn, #8a4b12);
  --_display: var(--rk3-display, inherit);
  display: flex;
  flex-direction: column;
  color: var(--_text);
  font: inherit;
  font-size: 16px;
  line-height: 1.5;
  scroll-margin-top: 5rem;
  box-sizing: border-box;
}
.rk3 *, .rk3 *::before, .rk3 *::after { box-sizing: inherit; }

.rk3-progress { display: flex; align-items: center; gap: 12px; font-size: 13px; color: var(--_muted); }
.rk3-count { white-space: nowrap; font-variant-numeric: tabular-nums; }
.rk3-bar { flex: 1; height: 4px; background: #ecebe4; border-radius: 4px; overflow: hidden; }
.rk3-bar i { display: block; height: 100%; background: var(--_ink); border-radius: 4px; transition: width .3s ease; }
.rk3-title { font-family: var(--_display); font-size: 24px; line-height: 1.2; font-weight: 700; letter-spacing: -0.02em; margin: 14px 0; outline: none; }

.rk3-fields { display: grid; gap: 16px; }
.rk3-field { border: 0; margin: 0; padding: 0; min-width: 0; }
.rk3-label { display: block; font-weight: 600; font-size: 15px; margin-bottom: 8px; padding: 0; }
.rk3-label em { font-style: normal; font-weight: 400; color: var(--_muted); font-size: 13px; margin-left: 4px; }
.rk3-hint, .rk3-status { margin: 6px 0 0; font-size: 13px; color: var(--_muted); }
.rk3-status { display: flex; align-items: center; gap: 8px; min-height: 20px; }
.rk3-warn, .rk3-status.rk3-warn { color: var(--_warn); }
.rk3-error { margin: 6px 0 0; font-size: 13px; color: var(--_error); font-weight: 500; }
.rk3-server { margin: 18px 0 0; padding: 12px 14px; border-radius: 10px; background: #fdecea; color: var(--_error); font-size: 14px; font-weight: 500; }

.rk3-input { width: 100%; font: inherit; font-size: 16px; padding: 12px 14px; border: 1.5px solid var(--_line); border-radius: 10px; background: #fff; color: var(--_text); }
.rk3-input:focus { outline: none; border-color: var(--_ink); box-shadow: 0 0 0 3px rgba(15, 38, 32, .12); }
.rk3-input[aria-invalid="true"], .is-invalid .rk3-input { border-color: var(--_error); }
textarea.rk3-input { resize: vertical; }

.rk3-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.rk3-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; }
.rk3-opt { position: relative; cursor: pointer; }
.rk3-opt input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.rk3-opt span { display: block; height: 100%; border: 1.5px solid var(--_line); border-radius: 999px; padding: 9px 16px; font-size: 15px; transition: background .15s, border-color .15s; }
.rk3-tiles .rk3-opt span { border-radius: 10px; padding: 12px 14px; }
.rk3-opt:hover span { border-color: #a9b3ae; }
.rk3-opt input:checked + span { background: var(--_ink); border-color: var(--_ink); color: #fff; }
.rk3-opt input:focus-visible + span { outline: 3px solid var(--_accent); outline-offset: 2px; }
.is-invalid .rk3-opt span { border-color: #e4a29b; }

.rk3-check { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; color: var(--_muted); cursor: pointer; }
.rk3-check input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--_ink); flex: none; }
.rk3-check a { color: inherit; }

.rk3-combo { position: relative; }
.rk3-results { position: absolute; z-index: 20; left: 0; right: 0; top: calc(100% + 6px); margin: 0; padding: 6px; list-style: none; background: #fff; border: 1.5px solid var(--_line); border-radius: 12px; box-shadow: 0 18px 40px -18px rgba(15, 38, 32, .35); max-height: min(320px, 50vh); overflow-y: auto; transition: opacity .15s; }
.rk3-results[hidden] { display: none; }
.rk3-hit { display: flex; flex-direction: column; padding: 10px 12px; border-radius: 8px; cursor: pointer; }
.rk3-hit b { font-weight: 600; font-size: 15px; overflow-wrap: anywhere; }
.rk3-hit span { font-size: 13px; color: var(--_muted); font-variant-numeric: tabular-nums; }
.rk3-hit:hover, .rk3-hit.is-active { background: var(--_soft); }
.rk3-company { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 12px; background: var(--_soft); border: 1.5px solid #c9e39a; }
.rk3-company__tick { flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--_ink); color: var(--_accent); display: grid; place-items: center; font-weight: 700; font-size: 14px; }
.rk3-company__text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.rk3-company__text b { font-size: 16px; overflow-wrap: anywhere; }
.rk3-company__text span { font-size: 13px; color: var(--_muted); }
.rk3-source { margin: 6px 0 0; font-size: 12px; color: var(--_muted); }
.rk3-spin { width: 14px; height: 14px; flex: none; border-radius: 50%; border: 2px solid #d8dcd6; border-top-color: var(--_ink); animation: rk3-spin .8s linear infinite; }
@keyframes rk3-spin { to { transform: rotate(360deg); } }

.rk3-link { background: none; border: 0; padding: 0; font: inherit; font-weight: 500; color: var(--_ink); text-decoration: underline; cursor: pointer; }
.rk3-small { font-size: 13px; white-space: nowrap; }
.rk3-switch { display: inline-block; margin-top: 10px; }
.rk3-add { font-size: 15px; text-decoration: none; text-align: left; justify-self: start; }
.rk3-add:hover { text-decoration: underline; }

/* buttons sit at the bottom; the form only grows (min-height set in JS) */
.rk3-actions { display: flex; gap: 10px; margin-top: auto; padding-top: 24px; }
.rk3-btn { flex: 1; font: inherit; font-weight: 600; font-size: 16px; padding: 15px 22px; border-radius: 12px; border: 1.5px solid transparent; background: var(--_accent); color: var(--_ink); cursor: pointer; }
.rk3-btn:hover { background: var(--_accent-hover); }
.rk3-btn:disabled { opacity: .6; cursor: progress; }
.rk3-btn--ghost { flex: 0 0 auto; background: #fff; border-color: var(--_line); color: var(--_text); font-weight: 500; }
.rk3-btn--ghost:hover { background: #fff; border-color: #a9b3ae; }

.rk3-enter-next { animation: rk3-in-next .26s cubic-bezier(.2,.7,.2,1) both; }
.rk3-enter-back { animation: rk3-in-back .26s cubic-bezier(.2,.7,.2,1) both; }
@keyframes rk3-in-next { from { opacity: 0; transform: translateX(18px); } }
@keyframes rk3-in-back { from { opacity: 0; transform: translateX(-18px); } }

.rk3--done { outline: none; }
.rk3-done__tick { width: 48px; height: 48px; border-radius: 50%; background: var(--_accent); color: var(--_ink); display: grid; place-items: center; font-size: 24px; font-weight: 700; margin: 0 0 16px; }
.rk3-done__body { color: var(--_muted); margin: 8px 0 0; }

@media (max-width: 420px) {
  .rk3-tiles { grid-template-columns: 1fr 1fr; }
  .rk3-tiles .rk3-opt span { font-size: 14px; padding: 10px 12px; }
  .rk3-title { font-size: 21px; }
}
@media (prefers-reduced-motion: reduce) {
  .rk3-enter-next, .rk3-enter-back { animation: none; }
  .rk3-bar i { transition: none; }
  .rk3-spin { animation-duration: 2s; }
}