/*
 * Get Started hero per the design (frame 3428:25749): 524px form column on
 * the right, Inter, white bordered inputs, the loan officer question, the
 * consent box and a pill button. The left side remains a designer slot;
 * columns stack below 48rem.
 */

/* Background intentionally transparent (page background set in Webflow
   shows through). Standard container: 1280px row centered, with 80px→16px
   side padding. */
.dO_SntivFYUuG1dE9sSd {
  font-family: var(--fw-font-family);
  letter-spacing: var(--fw-tracking-tight);
  color: var(--fw-color-ink);
  background: transparent;
  padding: clamp(3.75rem, 5.55vw, 5rem) var(--fw-nav-margin); /* 60px on phones, 80px at 1440 */
}

.BRcVNlAdXcsFvNM5vNn9 {
  max-width: var(--fw-container-wide);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, var(--fw-col-form));
  column-gap: var(--fw-space-8);
  row-gap: var(--fw-space-7);
  align-items: start;
}

@media (max-width: 48rem) {
  .BRcVNlAdXcsFvNM5vNn9 {
    grid-template-columns: 1fr;
    row-gap: calc(var(--fw-space-5) * 2);
  }
}

.UXPsD0M2jcDWIIWWfQih {
  min-width: 0;
}

.qZCGYsGT4nW1XVhruciq {
  padding: var(--fw-space-6);
  background: var(--fw-gradient-page);
  border-radius: var(--fw-radius-input);
  font-size: var(--fw-text-sm);
  line-height: var(--fw-leading-sm);
  color: var(--fw-color-ink-muted);
}

.ggMAhL3p2sLvR4AvMxc6 {
  min-width: 0;
}

.vV5dS8dD9iToMmoMC3k_ {
  margin: 0 0 var(--fw-space-4);
  font-size: var(--fw-text-md);
  line-height: var(--fw-leading-md);
  font-weight: var(--fw-weight-medium);
  color: var(--fw-color-ink);
}

/* "Are you currently or have you worked with someone from Fairway?": question left, No / Yes pills right. */
.nkI5zxOiPFd_5jQFmhCZ {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--fw-space-4);
}

.xRw6hfLC5SrS8P72tZed {
  font-size: var(--fw-text-body);
  line-height: var(--fw-leading-body);
  font-weight: var(--fw-weight-medium);
  color: var(--fw-color-ink);
}

.v7hjzq8ytjxok4fyLRwA {
  flex: 0 0 auto;
  display: flex;
  gap: var(--fw-space-2);
}

.uDUaeNDeXkCLhRZ5_SuG {
  min-height: var(--fw-control-height);
  padding: 0 var(--fw-space-5);
  border: none;
  border-radius: var(--fw-radius-pill);
  background: var(--fw-color-selected-bg);
  font-family: inherit;
  letter-spacing: inherit;
  font-size: var(--fw-text-body);
  line-height: var(--fw-leading-md);
  font-weight: var(--fw-weight-medium);
  color: var(--fw-color-selected-ink);
  cursor: pointer;
  transition: background var(--fw-transition), color var(--fw-transition);
}

.uBTsJm5ujR0ZnkXMxwPq {
  background: var(--fw-color-brand-hover);
  color: var(--fw-color-on-brand);
}

.uDUaeNDeXkCLhRZ5_SuG:focus-visible {
  outline: none;
  box-shadow: var(--fw-focus-ring);
}

/* After a Yes: "Please enter their name below" and the loan officer search
   (the picker's own styles: components/LoanOfficerSearch/OfficerPicker.module.css). */
.B7AG9c9a9gePWzfAjlBC {
  margin-top: var(--fw-space-5);
}

.f1F6hOEpVB4tS32GkkXx {
  display: block;
  margin-bottom: var(--fw-space-2);
  font-size: var(--fw-text-body);
  line-height: var(--fw-leading-body);
  font-weight: var(--fw-weight-medium);
  color: var(--fw-color-ink);
}

/* Fairway's own loan officer search page, under ours (when switched on). */
/* Under Fairway's search, as the hint under ours (OfficerPicker .hint). */
.yuIlnzYrr4p0qL2bZm5V {
  margin: var(--fw-space-2) 0 0;
  font-size: var(--fw-text-body);
  line-height: var(--fw-leading-body);
  color: var(--fw-color-ink-muted);
}

/* Consent box + button sit below the question (design: 24px above, 16px apart). */
.wMyDWVq0_aK8lJCMyuIw {
  display: flex;
  flex-direction: column;
  gap: var(--fw-space-4);
  margin-top: var(--fw-space-5);
}

.T4opEkHvgLYhMVNl0BCf {
  display: flex;
  flex-direction: column;
  gap: var(--fw-space-2);
}

/* Bordered box holding the required consent checkbox + disclosure. The
   whole box is a label so the large area toggles the box. */
.TT2qAVmwjyYy_0gDt_y8 {
  display: flex;
  align-items: flex-start;
  gap: var(--fw-space-2);
  padding: calc(var(--fw-space-4) - var(--fw-border-hairline))
    calc(var(--fw-space-3) - var(--fw-border-hairline));
  background: var(--fw-color-card-bg);
  border: var(--fw-border-hairline) solid var(--fw-color-card-border);
  border-radius: var(--fw-radius-input);
  cursor: pointer;
}

.GW5NLnzAeIrmpUyhCdqy {
  border-color: var(--fw-color-error-border);
}

/* Native checkbox restyled to the 20px square in the design. */
.EpiLo_SSaYtA02c8BRQ8 {
  appearance: none;
  -webkit-appearance: none;
  flex: 0 0 auto;
  box-sizing: border-box;
  width: var(--fw-radio-size);
  height: var(--fw-radio-size);
  margin: 0;
  border: var(--fw-border-hairline) solid var(--fw-color-radio-border);
  border-radius: var(--fw-radius-input);
  background: var(--fw-color-surface);
  cursor: pointer;
  display: grid;
  place-content: center;
  transition: background var(--fw-transition), border-color var(--fw-transition);
}

.EpiLo_SSaYtA02c8BRQ8::before {
  content: "";
  width: 0.3125rem; /* 5px */
  height: 0.5625rem; /* 9px */
  border: solid var(--fw-color-on-brand);
  border-width: 0 0.125rem 0.125rem 0;
  transform: rotate(45deg) scale(0);
  transform-origin: center;
  margin-top: -0.125rem;
  transition: transform var(--fw-transition);
}

.EpiLo_SSaYtA02c8BRQ8:checked {
  background: var(--fw-color-brand);
  border-color: var(--fw-color-brand);
}

.EpiLo_SSaYtA02c8BRQ8:checked::before {
  transform: rotate(45deg) scale(1);
}

.EpiLo_SSaYtA02c8BRQ8:focus-visible {
  outline: none;
  box-shadow: var(--fw-focus-ring);
}

.EiFS81oMVdnwkz3KpnQe {
  margin: 0;
  font-size: var(--fw-text-xs);
  line-height: var(--fw-leading-xs);
  color: var(--fw-color-ink-muted);
}

.FobGJuT8tebsj2eDaxmV {
  color: inherit;
  text-decoration: underline;
}

.FobGJuT8tebsj2eDaxmV:hover {
  color: var(--fw-color-brand);
}

@media (prefers-reduced-motion: reduce) {
  .dO_SntivFYUuG1dE9sSd *,
  .dO_SntivFYUuG1dE9sSd *::before,
  .dO_SntivFYUuG1dE9sSd *::after {
    transition-duration: 0.01ms !important;
  }
}