/*
 * Quiz styling per the design ("Fairway - Pages", frame 3428:25749):
 * gradient page, pill progress bar with close button, centered content
 * column (416px steps / wider review), radio option cards, pill buttons.
 * Every value routes through tokens.
 */

.kjNxiCjq79znWl58XscJ {
  font-family: var(--fw-font-family);
  letter-spacing: var(--fw-tracking-tight);
  color: var(--fw-color-ink);
  background: var(--fw-gradient-page);
  padding: var(--fw-space-4) var(--fw-page-margin) var(--fw-space-8);
  min-height: 100%;
}

@media (max-width: 37.5rem) {
  .kjNxiCjq79znWl58XscJ {
    padding-top: var(--fw-space-5);
  }
}

.sNwjvD5s044oJ5dD93Zh {
  max-width: var(--fw-container-max);
  margin: 0 auto;
}

/* Thank-you frame (505:6612) uses 80px margins / 1280px content instead of
   the quiz steps' narrower 188px margins — so the image reaches its Figma
   740px width. */
.XIdC5N0QmfiCwAp3B_nq {
  padding-left: var(--fw-nav-margin);
  padding-right: var(--fw-nav-margin);
}

.yrH1HxnLJKeVJ0KNeK3T {
  max-width: var(--fw-container-wide);
}

/* ---- Progress row: bar + close button ---- */

/* The bar starts on the content margin; the close button sits out on the
   page's 80px nav margin, so the row overhangs the content row on the right. */
.Ds1rykSmt9v8xC5MAqzB {
  display: flex;
  align-items: center;
  gap: var(--fw-space-5);
  margin-bottom: var(--fw-space-5);
  margin-right: calc(var(--fw-nav-margin) - var(--fw-page-margin));
}

.PVfferDvNJJeRx4BaUue {
  flex: 1 1 auto;
  height: var(--fw-progress-height);
  background: var(--fw-color-track);
  border-radius: var(--fw-radius-pill);
  overflow: hidden;
}

.fyyK1VgCZLLyt955HGHg {
  height: 100%;
  width: var(--fw-progress-pct, 0%);
  background: var(--fw-color-brand);
  border-radius: var(--fw-radius-pill);
  transition: width var(--fw-transition);
}

.KLbcBmGuGXB35QufQkfO {
  flex: 0 0 auto;
  display: grid;
  place-content: center;
  width: var(--fw-control-height);
  height: var(--fw-control-height);
  border: none;
  border-radius: var(--fw-radius-pill);
  background: transparent;
  color: var(--fw-color-brand-hover);
  cursor: pointer;
  transition: background var(--fw-transition);
}

.KLbcBmGuGXB35QufQkfO:hover {
  background: var(--fw-color-surface);
}

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

/* Sits below each step's Continue button (centered column). */
.ANuz8Rq8FMbCiM1gwVO1 {
  display: inline-block;
  margin-top: var(--fw-space-4);
  background: none;
  border: none;
  padding: var(--fw-space-2) var(--fw-space-4);
  font-family: inherit;
  letter-spacing: inherit;
  font-size: var(--fw-text-body);
  line-height: var(--fw-leading-body);
  font-weight: var(--fw-weight-medium);
  color: var(--fw-color-ink-muted);
  cursor: pointer;
}

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

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

/* ---- Centered content column ---- */

.U2CR20gByKuddWFi3RUZ {
  max-width: var(--fw-col-step);
  margin: calc(var(--fw-space-8) - var(--fw-space-1)) auto 0;
  text-align: center;
}

.U2CR20gByKuddWFi3RUZ:focus {
  outline: none;
}

@media (max-width: 37.5rem) {
  .U2CR20gByKuddWFi3RUZ {
    margin-top: calc(var(--fw-space-8) + var(--fw-space-2));
  }
}

/* No progress row above the review, so it starts a little lower. */
.hykL4CdcWH0Y7T5Mfoow {
  max-width: var(--fw-col-review);
  margin-top: var(--fw-space-8);
  text-align: left;
}

/* Thank-you spans the full content row for the two-column text + image. */
.OemZNQpWXIKmRpriR6Jz {
  max-width: none;
  margin-top: calc(var(--fw-space-8) - var(--fw-space-1));
  text-align: left;
}

/* First step sits lower than the rest (design: 20px on desktop, and close
   to vertically centred on a phone). */
.uB0vMDyvHYYr0qO0EoNz {
  margin-top: calc(var(--fw-space-8) + var(--fw-space-4));
}

@media (max-width: 37.5rem) {
  .uB0vMDyvHYYr0qO0EoNz {
    margin-top: min(11.75rem, 23vh);
  }
}

/* Property step: 632px column, centered header. */
.qI7CHacmE_mtqZrmQ0OK {
  max-width: var(--fw-col-step-wide);
}

/* Finances step (frame 10:1710): 442px column. */
.h1vs1Q_KlUT_f9w3nPlH {
  max-width: var(--fw-col-finances);
}

/* ---- Step header ---- */

/* Heading and subtitle keep their own measure on the wider steps too, so
   they wrap the way the design does. */
.fPUcKGREF2VLIbmeEbLe,
.zIBV1wx74MNIEwmZQsdL {
  max-width: var(--fw-col-step);
  margin-left: auto;
  margin-right: auto;
}

.fPUcKGREF2VLIbmeEbLe {
  max-width: var(--fw-col-heading);
  margin-top: 0;
  margin-bottom: var(--fw-space-4);
  font-size: var(--fw-text-xl);
  line-height: var(--fw-leading-xl);
  letter-spacing: var(--fw-tracking-heading);
  font-weight: var(--fw-weight-medium);
  color: var(--fw-color-ink);
}

/* The review header is centred over its column, on one line (frame
   "4 - Change Officer"); the subtitle keeps a 480px measure. */
.hykL4CdcWH0Y7T5Mfoow .fPUcKGREF2VLIbmeEbLe,
.hykL4CdcWH0Y7T5Mfoow .zIBV1wx74MNIEwmZQsdL {
  max-width: none;
  text-align: center;
}

.hykL4CdcWH0Y7T5Mfoow .zIBV1wx74MNIEwmZQsdL {
  max-width: var(--fw-col-review-subtitle);
}

@media (max-width: 37.5rem) {
  .fPUcKGREF2VLIbmeEbLe {
    margin-bottom: var(--fw-space-3);
    font-size: var(--fw-text-xl-mobile);
  }
}

.zIBV1wx74MNIEwmZQsdL {
  margin-top: 0;
  margin-bottom: var(--fw-space-7);
  font-size: var(--fw-text-body);
  line-height: var(--fw-leading-body);
  color: var(--fw-color-ink-muted);
}

@media (max-width: 37.5rem) {
  .zIBV1wx74MNIEwmZQsdL {
    margin-bottom: var(--fw-space-6);
  }
}

.TXR8RVmuaA9DZWMI0pyQ {
  display: block;
  margin: var(--fw-space-7) 0 var(--fw-space-4);
  font-size: var(--fw-text-body);
  line-height: var(--fw-leading-body);
  font-weight: var(--fw-weight-medium);
  color: var(--fw-color-ink);
  text-align: left;
}

/* A question with a hint under it (finances step, design 2026-10-21): the
   hint sits between the question and its control. */
.TXR8RVmuaA9DZWMI0pyQ.Bq9u9sKqEfQsrIuIZfXQ {
  margin-bottom: var(--fw-space-1);
}

.EeUxdquGvbAjWjZ7suEV {
  margin: 0 0 var(--fw-space-3);
  font-size: var(--fw-text-sm);
  line-height: var(--fw-leading-sm);
  color: var(--fw-color-ink-muted);
  text-align: left;
}

/* ---- Radio option cards (frame 10:1382) ---- */

.VR_1qn6UFS4manYlnhO2 {
  display: flex;
  flex-direction: column;
  gap: var(--fw-space-3);
  text-align: left;
}

/* Side-by-side cards: 2-up grid, odd card takes its own row. */
.P890imIEgEOMaOkb8Xdk {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--fw-space-3) var(--fw-space-2);
  text-align: left;
}

@media (max-width: 37.5rem) {
  .TXR8RVmuaA9DZWMI0pyQ {
    margin: var(--fw-space-6) 0 var(--fw-space-3);
  }

  .P890imIEgEOMaOkb8Xdk {
    grid-template-columns: 1fr;
    gap: var(--fw-space-2);
  }
}

/* Muted description directly beneath a question. */
.TqT6n6SFaB99hFvf1i3E {
  margin: calc(-1 * var(--fw-space-4)) 0 var(--fw-space-4);
  font-size: var(--fw-text-sm);
  line-height: var(--fw-leading-sm);
  color: var(--fw-color-ink-muted);
  text-align: left;
}

@media (max-width: 37.5rem) {
  .TqT6n6SFaB99hFvf1i3E {
    margin: calc(-1 * var(--fw-space-3)) 0 var(--fw-space-3);
  }
}

.mo7_oglXWUiu0jSjU8T9 {
  display: flex;
  align-items: center;
  gap: var(--fw-space-2);
  min-height: var(--fw-control-height);
  /* The border counts toward the 12px inset, keeping the card at 48px. */
  padding: calc(var(--fw-space-3) - var(--fw-border-hairline));
  border: var(--fw-border-hairline) solid var(--fw-color-card-border);
  border-radius: var(--fw-radius-input);
  background: var(--fw-color-card-bg);
  font-family: inherit;
  letter-spacing: inherit;
  font-size: var(--fw-text-body);
  line-height: var(--fw-leading-body);
  font-weight: var(--fw-weight-medium);
  color: var(--fw-color-ink);
  text-align: left;
  cursor: pointer;
  transition: background var(--fw-transition), border-color var(--fw-transition);
}

.mo7_oglXWUiu0jSjU8T9:hover {
  background: var(--fw-option-hover-bg);
}

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

.IAojB9NGNfzW2994ENYh {
  background: var(--fw-color-selected-bg);
  color: var(--fw-color-selected-ink);
}

.IAojB9NGNfzW2994ENYh:hover {
  background: var(--fw-color-selected-bg);
}

.C0mSnLh1a8nQyNTXAlUA {
  flex: 0 0 var(--fw-radio-size);
  box-sizing: border-box;
  width: var(--fw-radio-size);
  height: var(--fw-radio-size);
  border: var(--fw-border-hairline) solid var(--fw-color-radio-border);
  border-radius: 50%;
  background: transparent;
  display: grid;
  place-content: center;
  color: var(--fw-color-selected-ink);
}

.IAojB9NGNfzW2994ENYh .C0mSnLh1a8nQyNTXAlUA {
  background: var(--fw-color-surface);
}

/* ---- Form fields ---- */

.w843dz2Nj_QmJIDLxkmr {
  display: flex;
  gap: var(--fw-field-gap);
}

.w843dz2Nj_QmJIDLxkmr > * {
  flex: 1 1 0;
  min-width: 0;
}

/* Stacked, each field's own bottom margin is the gap. */
@media (max-width: 37.5rem) {
  .w843dz2Nj_QmJIDLxkmr {
    flex-direction: column;
    gap: 0;
  }
}

.lyBdVHwZOiGtCwKCGTJD {
  margin-bottom: var(--fw-field-gap);
  text-align: left;
}

.qGQRGvOQym9aLlLUdm2A {
  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);
}

.AQsWzQcLJ2tM6PgjHC_g,
.IafUBYXQTWMMWzXtqUB_ {
  width: 100%;
  height: var(--fw-control-height);
  padding: 0 var(--fw-space-3);
  border: var(--fw-border-hairline) solid var(--fw-color-input-border);
  border-radius: var(--fw-radius-input);
  background: var(--fw-color-input-bg-rest);
  font-family: inherit;
  letter-spacing: inherit;
  font-size: var(--fw-text-md);
  line-height: var(--fw-leading-md);
  font-weight: var(--fw-weight-medium);
  color: var(--fw-color-ink);
  box-sizing: border-box;
  transition: background var(--fw-transition), border-color var(--fw-transition);
}

.avpDJE8K4NBoPBNQi2nq {
  background: var(--fw-color-input-bg-active);
}

/* Focused field (frame 3428:25749): dark green border and text, no ring. */
.AQsWzQcLJ2tM6PgjHC_g:focus,
.IafUBYXQTWMMWzXtqUB_:focus {
  outline: none;
  background: var(--fw-color-input-bg-active);
  border-color: var(--fw-color-input-border-focus);
  color: var(--fw-color-input-border-focus);
}

.AQsWzQcLJ2tM6PgjHC_g::placeholder {
  color: var(--fw-color-placeholder);
  opacity: 1;
}

/* Neutralize the browser's blue/yellow autofill wash: paint the input's
   own fill via an inset shadow and keep the ink text color. */
.AQsWzQcLJ2tM6PgjHC_g:-webkit-autofill,
.AQsWzQcLJ2tM6PgjHC_g:-webkit-autofill:hover,
.AQsWzQcLJ2tM6PgjHC_g:-webkit-autofill:focus,
.AQsWzQcLJ2tM6PgjHC_g:-webkit-autofill:active {
  -webkit-text-fill-color: var(--fw-color-ink);
  -webkit-box-shadow: 0 0 0 100rem var(--fw-color-input-bg-active) inset;
  box-shadow: 0 0 0 100rem var(--fw-color-input-bg-active) inset;
  caret-color: var(--fw-color-ink);
  transition: background-color 9999s ease 0s;
}

._CFLH45Z905rXgCV6neC {
  color: var(--fw-color-placeholder);
}

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

.IafUBYXQTWMMWzXtqUB_ {
  appearance: none;
  padding-right: var(--fw-space-6);
  cursor: pointer;
}

/* Chevron drawn via mask so its color routes through the ink token
   (a background-image data-URI cannot reference custom properties). */
.n6mhtVRHKD8sMlZd6Eum {
  position: relative;
}

.n6mhtVRHKD8sMlZd6Eum::after {
  content: "";
  position: absolute;
  right: var(--fw-space-3);
  top: 50%;
  transform: translateY(-50%);
  width: 0.75rem;
  height: 0.5rem;
  background-color: var(--fw-color-ink);
  mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2712%27 height=%278%27 fill=%27none%27%3E%3Cpath d=%27M1.5 1.75 6 6.25l4.5-4.5%27 stroke=%27%23000%27 stroke-width=%271.5%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27/%3E%3C/svg%3E")
    no-repeat center / contain;
  -webkit-mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2712%27 height=%278%27 fill=%27none%27%3E%3Cpath d=%27M1.5 1.75 6 6.25l4.5-4.5%27 stroke=%27%23000%27 stroke-width=%271.5%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27/%3E%3C/svg%3E")
    no-repeat center / contain;
  pointer-events: none;
}

.ZPWynnbqKeHtx3SAKyw7 {
  margin: var(--fw-space-2) 0 0;
  font-size: var(--fw-text-sm);
  line-height: var(--fw-leading-sm);
  font-weight: var(--fw-weight-medium);
  color: var(--fw-color-error);
  text-align: left;
}

/* ---- Primary pill button ---- */

.YZGo7Jb7qr68Ju2Z8T_Y {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--fw-space-2);
  min-height: var(--fw-control-height);
  padding: var(--fw-space-3) var(--fw-space-5);
  border: none;
  border-radius: var(--fw-radius-pill);
  background: var(--fw-color-brand);
  color: var(--fw-color-on-brand);
  font-family: inherit;
  letter-spacing: inherit;
  font-size: var(--fw-text-md);
  line-height: var(--fw-leading-md);
  font-weight: var(--fw-weight-medium);
  cursor: pointer;
  transition: background var(--fw-transition);
}

.YZGo7Jb7qr68Ju2Z8T_Y:hover:not(:disabled) {
  background: var(--fw-color-button-hover);
}

.YZGo7Jb7qr68Ju2Z8T_Y:disabled {
  opacity: var(--fw-opacity-disabled);
  cursor: not-allowed;
}

.TEm6CMh3h7HcbOHBDkZA {
  width: 100%;
}

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

.dseAoaXYCFZoqFhJmaMw {
  margin-top: var(--fw-space-7);
}

/* Phones: Continue spans the column. */
@media (max-width: 37.5rem) {
  .dseAoaXYCFZoqFhJmaMw {
    margin-top: var(--fw-space-6);
  }

  .dseAoaXYCFZoqFhJmaMw .YZGo7Jb7qr68Ju2Z8T_Y {
    width: 100%;
  }
}

.dffUjB0IUcyPG_FdsO1R {
  display: inline-block;
  background: none;
  border: none;
  padding: 0;
  font-family: inherit;
  font-size: var(--fw-text-md);
  line-height: var(--fw-leading-md);
  color: var(--fw-color-ink-muted);
  cursor: pointer;
  text-decoration: underline;
}

/* ---- Themed dropdown ---- */

.TavMkSY48lm2LwTJ0n10 {
  position: relative;
  text-align: left;
}

.KOmk_X69ZSm3oTWnhoSj {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--fw-space-3);
  width: 100%;
  min-height: var(--fw-control-height);
  padding: 0 var(--fw-space-3);
  border: var(--fw-border-hairline) solid var(--fw-color-input-border);
  border-radius: var(--fw-radius-input);
  background: var(--fw-color-input-bg-rest);
  font-family: inherit;
  letter-spacing: inherit;
  font-size: var(--fw-text-md);
  line-height: var(--fw-leading-md);
  font-weight: var(--fw-weight-medium);
  color: var(--fw-color-ink);
  text-align: left;
  cursor: pointer;
  transition: background var(--fw-transition);
}

.KOmk_X69ZSm3oTWnhoSj:focus,
.M4xbLJg_0hEUvuYMeoI6 {
  outline: none;
  background: var(--fw-color-input-bg-active);
  border-color: var(--fw-color-input-border-focus);
}

/* Compact variant used inside review rows (design frame 10:2090). */
.EA7bLikzULMcjjHu0rK_ {
  min-height: var(--fw-control-height-compact);
  padding: 0 var(--fw-space-2) 0 var(--fw-space-3);
}

/* Compact 40px inputs/selects for in-row contact editing on the review. */
.KO2FuJU8__Q08tNThetH {
  height: var(--fw-control-height-compact);
}

.ea0qqo8FtUYUpoZcQCrN {
  color: var(--fw-color-placeholder);
}

.CTFN_SDL99FtRP6lcwnp {
  flex: 0 0 auto;
  display: grid;
  place-content: center;
  color: var(--fw-color-ink);
  transition: transform var(--fw-transition);
}

.ShHxJaWEgRF5rcwgbqpG {
  transform: rotate(180deg);
}

.nscTzEy_ijTiTQNK4d45 {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 20;
  margin-top: var(--fw-space-1);
  background: var(--fw-color-input-bg-active);
  border: var(--fw-border-hairline) solid var(--fw-color-input-border);
  border-radius: var(--fw-radius-input);
  box-shadow: var(--fw-shadow-panel);
  max-height: var(--fw-panel-max-height);
  overflow-y: auto;
}

.vollNQRX9GykxD7xbHjY {
  padding: var(--fw-space-3);
  font-size: var(--fw-text-md);
  line-height: var(--fw-leading-md);
  color: var(--fw-color-ink);
  cursor: pointer;
}

.UdrGVuoZWxKGlgWWnIAm {
  background: var(--fw-option-hover-bg);
}

.o_LfIRU1r1Lv8fqAW_nN {
  background: var(--fw-color-selected-bg);
  color: var(--fw-color-selected-ink);
  font-weight: var(--fw-weight-medium);
}

.rcApUxNFLonlIZo9CkiD {
  margin-bottom: var(--fw-space-5);
}

/* ---- Review screen ---- */

/* Fairway's own loan officer search page, under ours (when switched on). */
.SlIx3DZUj3eSbh9QfUNE {
  margin-top: var(--fw-space-7);
}

.udq0wq2TKe9prpkMP6gT {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--fw-space-4);
  margin-bottom: var(--fw-space-2);
}

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

/* Rows are 56px, hairline included: 16px padding around 24px text. */
.Z8ODX2F7B9yIJKEYGjQv {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--fw-space-4);
  padding: var(--fw-space-4) 0 calc(var(--fw-space-4) - var(--fw-border-hairline));
  border-bottom: var(--fw-border-hairline) solid var(--fw-color-card-border);
  font-size: var(--fw-text-md);
  line-height: var(--fw-leading-md);
}

@media (max-width: 37.5rem) {
  .Z8ODX2F7B9yIJKEYGjQv {
    flex-direction: column;
    align-items: stretch;
    gap: var(--fw-space-2);
  }
}

.mtJpkAdxCaDpdeHFjFQu {
  color: var(--fw-color-ink-muted);
}

.px2BnOlU_Ew4x46qbLJ3 {
  font-weight: var(--fw-weight-medium);
  color: var(--fw-color-ink);
  text-align: right;
}

/* ---- Loan officer section (the picker itself: components/LoanOfficerSearch/OfficerPicker.module.css) ---- */

.Wqf4RoFOBWxkLL9zPD39 .udq0wq2TKe9prpkMP6gT {
  margin-bottom: var(--fw-space-4);
}

.Zd7Clfm8VGIFvuSDj467 {
  width: 100%;
}

.AHzMGEcK390xZxoiiS9T {
  margin: var(--fw-space-7) 0;
  font-size: var(--fw-text-body);
  line-height: var(--fw-leading-body);
  color: var(--fw-color-ink-muted);
  text-align: center;
}

.admYqvjfY4HVpNL1gETl {
  text-align: center;
}

.q3_2AfI3V6JkEMA2IZbS {
  margin: var(--fw-space-3) 0 0;
  text-align: center;
}

/* Rating strip beneath submit (frame 16:2700). */
.r2xsrjqjC6kG7ADzqk0P {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--fw-space-4);
  margin-top: var(--fw-space-5);
  font-size: var(--fw-text-md);
  line-height: var(--fw-leading-md);
  color: var(--fw-color-ink-muted);
}

.PlI8VX48yjmHPZ35jySx {
  display: flex;
  align-items: center;
  gap: 0.125rem;
  color: var(--fw-color-brand);
}

.anS2AMgtUnW9F_DyBVEd {
  display: inline-flex;
  line-height: 0;
}

/* ---- Success (thank-you) ---- */

/* ---- Thank-you screen (frame 505:6612): text column + image ---- */

/* 12-column grid matching the Figma frame (503:6205: count 12, gutter 16px,
   80px margins). Text spans columns 1-4, image spans 6-12, column 5 is the
   whitespace between — so at the 1280px content width the image is 740px. */
.LA0h_vURHEdOTgKlcBYj {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--fw-space-4);
  row-gap: var(--fw-space-6);
  align-items: center;
  text-align: left;
}

/* No image set — collapse to a single centered text column. */
.opUb2ichR2YZ4behIVyV {
  grid-template-columns: minmax(0, 40rem);
  justify-content: center;
}

.opUb2ichR2YZ4behIVyV .uR7fTRMYxYX4H4yCYXzB {
  grid-column: 1 / -1;
}

.uR7fTRMYxYX4H4yCYXzB {
  grid-column: 1 / span 4;
  display: flex;
  flex-direction: column;
  gap: var(--fw-space-5);
  min-width: 0;
}

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

.Xurl6JHjdEWkhmEtWIzY {
  margin: 0;
  font-size: var(--fw-text-xl);
  line-height: var(--fw-leading-xl);
  letter-spacing: var(--fw-tracking-heading);
  font-weight: var(--fw-weight-medium);
  color: var(--fw-color-ink);
}

@media (max-width: 37.5rem) {
  .Xurl6JHjdEWkhmEtWIzY {
    font-size: var(--fw-text-xl-mobile);
  }
}

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

.efOCz5rMr9xw2ukU9jXG {
  width: 100%;
  height: 0;
  margin: 0;
  border: none;
  border-top: var(--fw-border-hairline) solid var(--fw-color-divider);
}

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

.w6Chl597r4ul3gYJh2Tb {
  margin: 0;
  font-size: var(--fw-text-lg);
  line-height: var(--fw-leading-xl);
  font-weight: var(--fw-weight-medium);
  color: var(--fw-color-ink);
}

.DsTGrv4BZSRKi1RaUNRI {
  display: flex;
  flex-direction: column;
  gap: var(--fw-space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.ylIU2_7RnjeRwpXu3fV9 {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: var(--fw-space-4);
}

/* A hairline joins each number to the next one (frame "Frame 335"). */
.ylIU2_7RnjeRwpXu3fV9:not(:last-child)::before {
  content: "";
  position: absolute;
  top: var(--fw-space-6);
  bottom: calc(-1 * var(--fw-space-4));
  left: calc((var(--fw-space-6) - var(--fw-border-hairline)) / 2);
  width: var(--fw-border-hairline);
  background: var(--fw-color-divider);
}

.NquL6H53UHUuGlRqy6uK {
  flex: 0 0 auto;
  width: var(--fw-space-6); /* 32px */
  height: var(--fw-space-6);
  box-sizing: border-box;
  display: grid;
  place-content: center;
  border-radius: var(--fw-radius-pill);
  background: var(--fw-color-surface);
  border: var(--fw-border-hairline) solid var(--fw-color-divider);
  font-size: var(--fw-text-md);
  line-height: 1;
  color: var(--fw-color-ink-muted);
}

.q6cdERMOnjt64_Vx0i4G {
  font-size: var(--fw-text-md);
  line-height: var(--fw-leading-body);
  color: var(--fw-color-ink-muted);
}

.SlIysgnh4OWNRVwYhojQ {
  grid-column: 6 / span 7;
  min-width: 0;
  aspect-ratio: 740 / 562;
}

.LeaMWtQIY0bKM_MWWChw {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--fw-radius-lg);
}

/* Phones and tablets (< 64rem) stack into one column — a 4/12 text column is
   too cramped for the heading below desktop widths. Placed after the base
   .thankYouText/.thankYouMedia rules so these resets win at the breakpoint. */
@media (max-width: 64rem) {
  .LA0h_vURHEdOTgKlcBYj,
  .opUb2ichR2YZ4behIVyV {
    grid-template-columns: 1fr;
  }

  .uR7fTRMYxYX4H4yCYXzB,
  .SlIysgnh4OWNRVwYhojQ {
    grid-column: 1 / -1;
  }

  .SlIysgnh4OWNRVwYhojQ {
    max-width: 40rem;
  }
}

/* ---- Accessibility ---- */

.exQ3ij8fIqRrCoPb6YIL {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

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

/*
 * Fairway design tokens — extracted from the design handoff
 * ("Fairway Designs (User Testing)", frames 10:634 / 10:1239 / 10:1382,
 * 2026-08-06). Every visual value lives here; components never use raw
 * colors, sizes, or radii directly.
 *
 * Layout reference: 1440 frame, 188px side margins → 1064px content row;
 * quiz step column 416px, Get Started form column 524px.
 *
 * `:host` covers the Webflow Shadow DOM boundary; `.fw-scope` covers the
 * local playground (no shadow root). Site-level CSS variables pierce the
 * shadow boundary, so tokens can later be remapped to Webflow variables.
 */
:host,
.fw-scope {
  /* Chrome's default subpixel antialiasing renders text heavier than
   * Figma's grayscale rasterizer — keep browser output matching design. */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  /* Typography — Inter (loaded at runtime by ensureInterFont) */
  --fw-font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial,
    sans-serif;
  --fw-text-xl: 2.375rem; /* 38px heading */
  --fw-text-xl-mobile: 2rem; /* 32px heading below 37.5rem */
  --fw-text-hero: 3.9375rem; /* 63px hero heading (frame 3428:25749) */
  --fw-text-hero-mobile: 3rem; /* 48px */
  --fw-leading-xl: 1.09;
  --fw-tracking-heading: -0.04em;
  --fw-tracking-hero: -0.048em; /* -3px at 63px */
  --fw-text-lg: 1.25rem; /* 20px sub-heading ("What happens next") */
  --fw-text-md: 1rem; /* 16px labels, inputs, buttons */
  --fw-text-body: 1rem; /* labels, option cards, subtitles: 16px, 14px below 37.5rem */
  --fw-leading-body: 1.5rem; /* body copy keeps its 24px line at both sizes */
  --fw-leading-md: 1.5;
  --fw-leading-subtitle: 1.6;
  --fw-text-sm: 0.875rem; /* 14px descriptions, errors */
  --fw-leading-sm: 1.5;
  --fw-text-xs: 0.75rem; /* 12px compliance text */
  --fw-leading-xs: 1.5;
  --fw-weight-regular: 400;
  --fw-weight-medium: 500;
  --fw-weight-semibold: 600;
  --fw-weight-bold: 700;

  /* Color */
  --fw-color-ink: #282828;
  --fw-color-ink-muted: #575359;
  --fw-color-brand: #0c9748;
  --fw-color-brand-hover: #003200; /* selected pills, link hovers */
  --fw-color-button-hover: #087932; /* primary button hover, matches the site's other buttons */
  --fw-color-on-brand: #fafaf9;
  --fw-color-selected-bg: #c5e7d1;
  --fw-color-selected-ink: #003200;
  --fw-color-surface: #ffffff;
  --fw-color-input-bg-rest: #ffffff;
  --fw-color-input-bg-active: #ffffff;
  --fw-color-input-border: #e7e5e4;
  --fw-color-input-border-focus: #003200;
  --fw-color-card-bg: #fafaf9; /* option cards, consent box */
  --fw-color-card-border: #e7e5e4;
  --fw-color-divider: rgba(40, 40, 40, 0.1); /* hairline divider + step badge border */
  --fw-color-radio-border: #e7e5e4;
  --fw-color-placeholder: rgba(40, 40, 40, 0.6);
  --fw-color-error: #d60000;
  --fw-color-error-border: rgba(214, 0, 0, 0.25);
  --fw-color-track: #ffffff;
  --fw-gradient-page: linear-gradient(180deg, #e5f2ea 0%, #ffffff 100%);
  --fw-option-hover-bg: rgba(197, 231, 209, 0.4);

  /* Spacing (4px base scale) */
  --fw-space-1: 0.25rem;
  --fw-space-2: 0.5rem;
  --fw-space-3: 0.75rem;
  --fw-space-4: 1rem;
  --fw-space-5: 1.5rem;
  --fw-space-6: 2rem;
  --fw-space-7: 2.5rem; /* 40px — design's block gap */
  --fw-space-8: 4rem;

  /* Controls */
  --fw-control-height: 3rem; /* 48px inputs, buttons, option cards */
  --fw-control-height-compact: 2.5rem; /* 40px review-row controls (frame 10:2090) */
  --fw-radius-input: 0.25rem; /* 4px */
  --fw-radius-lg: 0.75rem; /* 12px thank-you image corners */
  --fw-radius-pill: 6.25rem; /* buttons, progress bar, close button */
  --fw-radio-size: 1.25rem; /* 20px circle */
  --fw-badge-size: 2.75rem; /* 44px lime icon badge (frame 10:422) */
  --fw-border-hairline: 0.0625rem;
  --fw-progress-height: 0.5rem; /* 8px */
  --fw-focus-ring: 0 0 0 0.1875rem rgba(12, 151, 72, 0.35);
  --fw-shadow-panel: 0 0.5rem 1.5rem rgba(40, 40, 40, 0.12); /* open dropdown panel */
  --fw-panel-max-height: 20rem; /* dropdown panel scroll clamp */
  --fw-opacity-disabled: 0.45;
  --fw-transition: 150ms ease;
  --fw-tracking-tight: -0.01875rem; /* -0.3px, body text in the "Fairway - Pages" frames */
  --fw-radius-md: 0.5rem; /* 8px */

  /* Location search ("Fairway - Pages" → Technical Features Designs, frames 2865:27626 / 2891:34105) */
  --fw-search-width: 38.875rem; /* 622px box */
  --fw-search-surface: rgba(255, 253, 249, 0.95); /* over an 8px backdrop blur */
  --fw-search-blur: 0.5rem;
  --fw-search-section-divider: rgba(40, 40, 40, 0.2);
  --fw-search-active-bg: #c5e7d1; /* highlighted row */
  --fw-search-row-height: 3.5rem; /* 56px */
  --fw-search-thumb: 2.5rem; /* 40px picture */
  --fw-search-thumb-bg: #d9d9d9;
  --fw-search-person-bg: #e8e5df; /* profile silhouette when a headshot is missing */
  --fw-search-person-ink: #b5b0a7;
  --fw-search-initials-bg: #6b8f78;
  --fw-search-icon: 1.25rem; /* 20px search, clear and arrow icons */
  --fw-search-results-max-height: min(28.25rem, 62vh); /* 452px, five rows plus the fade */
  --fw-search-fade-height: 4.5rem;
  --fw-search-fade: linear-gradient(to bottom, rgba(255, 253, 249, 0), #fffdf9 86%);
  --fw-search-heading-ink: #000000;

  /* Loan officer picker on the review screen (frames "4 - Search Officer", "4 - Change Officer") */
  --fw-officer-row-height: 4rem; /* 64px */
  --fw-officer-photo: 6.25rem; /* 100px photo on the review screen's officer card */
  --fw-officer-photo-mobile: 5rem; /* 80px */
  --fw-officer-panel-max: 15.875rem; /* 254px: four rows, the last one under the fade */
  --fw-officer-panel-gap: 0.75rem; /* 12px between the box and its list */
  --fw-officer-scrollbar: #555555;
  --fw-officer-fade: linear-gradient(to bottom, rgba(250, 250, 249, 0), #fafaf9 90%);

  /* Layout (1440 frame: 188px margins, 1064px row) */
  --fw-container-max: 66.5rem;
  --fw-container-wide: 80rem; /* 1280px page-composition row (Start frame) */
  --fw-page-margin: clamp(1rem, 20.48vw - 6.68rem, 11.75rem); /* 16px up to 600, 188px at 1440 */
  --fw-nav-margin: clamp(1rem, 7.62vw - 1.857rem, 5rem); /* 16px up to 600, 80px at 1440 */
  --fw-col-step: 26rem; /* 416px quiz column (step 1) */
  --fw-col-heading: 9.7em; /* step heading measure: 368px at 38px, 310px at 32px */
  --fw-col-step-wide: 39.5rem; /* 632px column (property step, review) */
  --fw-col-finances: 27.625rem; /* 442px finances column (frame 10:1710) */
  --fw-col-form: 32.75rem; /* 524px Get Started form column */
  --fw-col-review: 39.5rem; /* 632px review column (frame 16:2527) */
  --fw-col-review-control: 19.625rem; /* 314px review-row edit control (frame 10:2090) */
  --fw-col-review-subtitle: 30rem; /* 480px review subtitle (frame "4 - Change Officer") */
  --fw-field-gap: 1rem; /* 16px between paired fields and field blocks */

  /*
   * Breakpoints (CSS custom properties are invalid inside @media, so these
   * are documented literals — keep every media query on one of them):
   *   37.5rem (600px)  — stack paired fields / mobile heading size
   *   48rem   (768px)  — stack the two-column Get Started layout
   */
}

/* Phones: the design sets body copy at 14px. */
@media (max-width: 37.5rem) {
  :host,
  .fw-scope {
    --fw-text-body: 0.875rem;
  }
}