/* ==========================================================================
   Find a Loan — Lead form styles
   Scoped under `.lf` so nothing leaks into (or is overridden by) the landing
   page. Reuses the brand tokens defined in styles.css (:root) — no redefining
   of --fire / --ocean / etc. to avoid drift.
   ========================================================================== */

.lf {
  --lf-disabled: #e7d6ce;
  /* Fixed-height shell: every step renders inside the same box, sized to fit
     the tallest step (contact details, with room for its inline validation
     errors). The card therefore never grows or shrinks between steps, so the
     page never reflows or jumps while clicking through.
     On phones (<= 560px, see the bottom of this file) the fixed height is
     replaced by flexing to the viewport-fit card, and every step compacts
     its spacing to fit that box — no in-step scrolling. */
  --lf-height: 604px;
  position: relative;
  color: var(--ocean);
  display: flex;
  flex-direction: column;
  height: var(--lf-height);
}

/* Slim progress bar at the top of the form body */
.lf-progress {
  height: 6px;
  border-radius: 999px;
  background: var(--line);
  overflow: hidden;
  margin: 0 0 22px;
}
.lf-progress span {
  display: block;
  height: 100%;
  width: 20%;
  border-radius: 999px;
  background: var(--fire);
  transition: width 0.35s var(--ease);
}

/* Steps — renamed from the form's original `.step` to avoid clashing with the
   landing page's `.step` ("How it works") cards. */
.lf-step {
  display: none;
}
.lf-step.active {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  /* Defensive fallback only: steps are sized (desktop shell) and compacted
     (phone block below) to always fit their box, so this scrollbar must
     never appear in practice — it exists so content can never become
     unreachable if a future step outgrows the box. */
  overflow-y: auto;
  animation: lf-slide 0.35s var(--ease) both;
}
/* Flex items stretch by default — keep back links at their natural width */
.lf-step.active > .back {
  align-self: flex-start;
}

/* Every step fills the fixed shell: content sits at the top and the CTA
   anchors to the bottom (the auto margin absorbs the free space), so the
   Continue button stays in the same spot from step to step. On the slider
   steps the readout + slider block floats centred between the heading and
   the CTA (the two auto margins split the free space evenly). */
.lf-step.active > .cta {
  margin-top: auto;
}
/* Steps without a CTA (options auto-advance) anchor their back link instead */
.lf-step.active > :not(.cta) + .back {
  margin-top: auto;
}
/* Completion screen floats centred in the shell */
.lf-step.active > .center {
  margin: auto 0;
}
.lf-step--slider.active .readout {
  margin-top: auto;
}
/* Both slider steps reserve two heading lines ("What's your average monthly
   turnover?" wraps; "How much are you after?" doesn't), so the floating
   readout + slider block — and the number above it — sits at exactly the
   same height on step 1 and step 2 instead of shifting with the heading. */
.lf-step--slider .q {
  min-height: 2.4em; /* 2 lines at line-height 1.2 */
}
@keyframes lf-slide {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.lf .eyebrow {
  display: block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 10px;
}
.lf .q {
  font-family: var(--ff-display);
  font-size: clamp(20px, 4.6vw, 26px);
  font-weight: 800;
  line-height: 1.2;
  margin: 0;
  color: var(--ocean);
  letter-spacing: -0.01em;
}
.lf .sub {
  color: var(--muted);
  font-size: 15px;
  line-height: 1.5;
  margin: 8px 0 0;
}

/* Option buttons */
.lf .opt {
  width: 100%;
  text-align: left;
  padding: 16px 18px;
  border-radius: 14px;
  border: 2px solid var(--line);
  background: #fff;
  color: var(--ocean);
  font: 600 16px var(--ff-body);
  cursor: pointer;
  transition: 0.15s;
  margin-top: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.lf .opt:hover {
  border-color: var(--fire);
  background: var(--sand-2);
  transform: translateY(-1px);
}
.lf .opt:focus-visible {
  outline: 3px solid var(--sky);
  outline-offset: 2px;
}
.lf .opt.selected {
  border-color: var(--fire);
  background: var(--fire);
  color: #fff;
}
.lf .opt .arr {
  font-weight: 700;
  opacity: 0.5;
  font-size: 18px;
}
.lf .opt.selected .arr {
  opacity: 1;
}
/* Centred variant — yes/no style questions (property, security) carry no
   arrow glyph and read better with the label centred in the box. */
.lf .opt--center {
  justify-content: center;
  text-align: center;
}
.lf .two {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 10px;
}
/* Follow-up type pickers are secondary — slimmer than the main options so a
   step showing both (the security step) fits the fixed shell with no
   in-step scrolling. */
.lf .two .opt {
  margin-top: 0;
  padding: 12px 14px;
  font-size: 15px;
}
/* Security follow-up panel — the type picker that drops down under "Yes"
   sits in a boxed group between the Yes and No buttons rather than four
   floating options, wearing the same light ocean tint as the ABN
   dropdown's active-business boxes (see abn-lookup.css) — fill only, no
   outline. */
.lf .sec-follow {
  background: #d4e4e3; /* light tint of the ocean teal */
  border-radius: 14px;
  padding: 2px 12px 12px;
  margin-top: 12px;
}
.lf .sec-follow .flabel {
  color: var(--ocean);
}
/* While the picker is open (lead-form.js toggles .sec-open on the step) the
   security step is at its tallest — tighten every block's spacing so the
   whole step always fits the 600px shell with no in-step scrollbar, even
   on 320px-wide phones where the reassure copy wraps to four lines. */
.lf .lf-step.sec-open .opt {
  padding: 12px 16px;
  margin-top: 10px;
}
.lf .lf-step.sec-open .sec-follow {
  margin-top: 10px;
  padding-bottom: 10px;
}
.lf .lf-step.sec-open .sec-follow .flabel {
  margin-top: 6px;
}
.lf .lf-step.sec-open .two .opt {
  padding: 10px 12px;
  margin-top: 0;
}
.lf .lf-step.sec-open .reassure {
  font-size: 13px;
  padding: 10px 13px;
  margin-top: 10px;
}
.lf .lf-step.sec-open .back {
  margin-top: 10px;
}

/* Purpose follow-up — "Something else" opens a text box under the six cards
   (lead-form.js toggles .purpose-open on the step). The Continue button only
   exists on that branch: the named options auto-advance, so showing it there
   would just be a dead button. While it's hidden, the back link re-takes the
   step's bottom anchor (the ":not(.cta) + .back" rule at the top of the file
   can't match a back link that follows the CTA in the markup). */
#cta-purpose {
  display: none;
}
.lf .lf-step.purpose-open #cta-purpose {
  display: block;
}
.lf-step.active:not(.purpose-open) > #cta-purpose + .back {
  margin-top: auto;
}
/* The follow-up body opens INSIDE the "Something else" rectangle: it sits
   flush under the card wearing the same fire border as the selected card,
   sharing a flat edge with it — the card simply grows a body, the same
   expand-in-place vibe as the security picker and the ABN result boxes. */
.lf .opt-drop {
  border: 2px solid var(--fire);
  border-top: none;
  border-radius: 0 0 14px 14px;
  background: var(--sand); /* panel matches the write-ins; input stays white */
  /* Top spacing lives HERE, not on the label: a label margin would collapse
     through the padding-less top edge and shove the whole panel down,
     opening a white gap between it and the card above. */
  padding: 8px 14px 12px;
}
.lf .opt-drop .flabel {
  color: var(--ocean);
  margin-top: 0;
}
/* The panel around it already wears the fire border, so the input itself
   keeps its neutral border on focus instead of the site-wide red ring. */
.lf .opt-drop .field:focus {
  border-color: var(--line);
  box-shadow: none;
}
/* While open, the card above flattens its bottom corners to meet the body */
.lf .lf-step.purpose-open #purpose .opt:last-of-type {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
/* Open state = six dense cards + panel + CTA + back, the form's new tallest
   step — tighten the spacing so it fits the fixed shell with no scrollbar. */
.lf .lf-step.purpose-open .opt {
  padding: 9px 16px;
  margin-top: 6px;
}
.lf .lf-step.purpose-open .cta {
  margin-top: 12px;
  padding-top: 13px;
  padding-bottom: 13px;
}
.lf .lf-step.purpose-open .back {
  margin-top: 8px;
}

/* Sliders */
.lf .readout {
  font-family: var(--ff-display);
  font-size: clamp(26px, 5.5vw, 36px);
  font-weight: 800;
  text-align: center;
  color: var(--ocean);
  letter-spacing: -0.01em;
  margin: 4px 0 0;
  line-height: 1.15;
}
.lf .readout .plus {
  color: var(--fire);
}
/* The turnover readout's "/ mo" suffix: a zero-width inline block whose
   text overflows visibly, so it renders on the number's baseline right
   after it but takes up NO layout width — the dollar figure is what gets
   centred, identical to the amount step, and "/ mo" hangs off its side. */
.lf .readout .mo {
  display: inline-block;
  width: 0;
  white-space: nowrap;
  font-size: 0.5em;
  font-weight: 600;
  color: var(--muted);
}
.lf input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  display: block;
  width: 92%;
  max-width: 340px;
  margin: 20px auto 10px;
  height: 12px;
  border-radius: 999px;
  background: var(--line);
  outline: none;
  cursor: pointer;
}
.lf input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--fire);
  border: 3px solid #fff;
  box-shadow: 0 1px 6px rgba(255, 0, 0, 0.35);
  cursor: pointer;
  transition: transform 0.15s ease;
}
.lf input[type="range"]::-webkit-slider-thumb:hover,
.lf input[type="range"]:active::-webkit-slider-thumb {
  transform: scale(1.15);
}
.lf input[type="range"]::-moz-range-thumb {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--fire);
  border: 3px solid #fff;
  box-shadow: 0 1px 6px rgba(255, 0, 0, 0.35);
  cursor: pointer;
  transition: transform 0.15s ease;
}
.lf input[type="range"]:active::-moz-range-thumb {
  transform: scale(1.15);
}
/* End labels track the same width as the bar so they line up with its ends */
.lf .ends {
  display: flex;
  justify-content: space-between;
  width: 92%;
  max-width: 340px;
  margin: 0 auto;
  font-size: 18px;
  font-weight: 700;
  color: var(--muted);
}

/* Amount follow-up — the optional exact-amount write-in that opens under
   the slider while it sits on "$150,000+" (lead-form.js toggles it). Tracks
   the slider's width; a plain boxed panel with the OPTIONAL tag pinned to
   its top-right corner. */
.lf .amt-follow {
  width: fit-content; /* hugs the short field + label, not the slider */
  max-width: 92%;
  margin: 14px auto 0;
  padding: 10px 22px;
  border: 2px solid var(--line);
  border-radius: 14px;
  background: var(--sand); /* box reads as a panel; the input stays white */
  /* A centred stack: label, the short input, then the "Optional" caption. */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: center;
}
.lf .amt-follow .flabel {
  margin-top: 0;
  font-size: 14px;
}
/* "Optional" is a quiet italic caption under the field — present without
   shouting. */
.lf .amt-follow__tag {
  font: italic 400 12px var(--ff-body);
  color: var(--muted);
  opacity: 0.8;
}
/* The write-in is typed in THOUSANDS: a fixed "$" prefix and a fixed "k"
   suffix ("k / mo" on the turnover box) sit inside the field, so the person
   only ever types the "160" of $160k. Both affixes share one style and are
   kept clear of the typed digits by the field's padding. */
.lf .amt-input {
  position: relative;
  width: 160px; /* only ever three or four digits go in — no need for a full-width box */
}
.lf .amt-input--mo {
  width: 200px;
}
.lf .amt-input .cur,
.lf .amt-input .suf {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font: 600 16px var(--ff-body);
  color: var(--muted);
  pointer-events: none;
}
.lf .amt-input .cur {
  left: 15px;
}
.lf .amt-input .suf {
  right: 15px;
}
/* Digits are right-aligned so they butt up against the "k" and read as one
   figure ("160k"), rather than drifting apart across the box. */
.lf .amt-input .field {
  margin-top: 0;
  padding-left: 32px;
  padding-right: 27px;
  text-align: right;
}
.lf .amt-input--mo .field {
  padding-right: 69px;
}

/* First/last name pair — side by side so the contact step stays the same
   height it had with a single full-name field (the card never scrolls). */
.lf .name-row {
  display: grid;
  /* minmax(0, 1fr) twice = two EQUAL halves, split dead centre — a plain
     1fr lets an input's intrinsic min-width push its column wider. */
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 0 12px;
}
.lf .name-row > div {
  min-width: 0;
}

/* Text inputs */
.lf .field {
  width: 100%;
  padding: 12px 16px;
  border-radius: 12px;
  border: 2px solid var(--line);
  font: 500 16px var(--ff-body);
  color: var(--ocean);
  background: #fff;
  margin-top: 12px;
}
/* A labelled field sits close under its label — the label's own top margin
   already separates the pair from the block above. */
.lf .flabel + .field {
  margin-top: 6px;
}
.lf .field:focus {
  outline: none;
  border-color: var(--fire);
  box-shadow: 0 0 0 3px rgba(255, 0, 0, 0.08);
}
/* A field flagged by the inline contact validation (lead-form.js) */
.lf .field.invalid {
  border-color: var(--fire-2);
  background: #fff8f7;
}
/* Inline per-field error line — hidden until its field fails validation */
.lf .ferr {
  display: none;
  color: var(--fire-2);
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.4;
  margin-top: 3px;
}
.lf .ferr.show {
  display: block;
}
.lf .flabel {
  display: block;
  font: 600 13px var(--ff-body);
  color: var(--muted);
  margin-top: 10px;
}
.lf .hint {
  font-size: 13px;
  color: var(--muted);
  margin-top: 10px;
  line-height: 1.5;
}
.lf .reassure {
  background: var(--sand);
  border-radius: 14px;
  padding: 13px 15px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--ocean);
  margin-top: 14px;
}
.lf .reassure b {
  font-weight: 700;
}

/* Consent / checkboxes */
.lf .consent {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  margin-top: 10px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--muted);
  cursor: pointer;
}
.lf .consent input {
  accent-color: var(--fire);
  width: 18px;
  height: 18px;
  margin-top: 1px;
  flex: 0 0 auto;
}
.lf .consent a {
  color: var(--fire-2);
  text-decoration: underline;
}

/* CTAs */
.lf .cta {
  width: 100%;
  margin-top: 28px;
  padding: 17px;
  border: none;
  border-radius: 14px;
  background: var(--fire);
  color: #fff;
  font: 800 17px var(--ff-body);
  cursor: pointer;
  transition: 0.15s;
}
.lf .cta:hover:not(:disabled) {
  background: var(--fire-2);
  transform: translateY(-1px);
  box-shadow: 0 8px 18px -8px rgba(214, 0, 0, 0.55);
}
.lf .cta:focus-visible {
  outline: 3px solid var(--sky);
  outline-offset: 2px;
}
.lf .cta:disabled {
  background: var(--lf-disabled);
  color: #b6a59b;
  cursor: not-allowed;
}
.lf .back {
  display: inline-block;
  margin-top: 14px;
  background: none;
  border: none;
  color: var(--muted);
  font: 600 14px var(--ff-body);
  cursor: pointer;
  padding: 6px 2px;
}
.lf .back:hover {
  color: var(--ocean);
}
/* The first step's placeholder back link (index.php step 0): invisible and
   inert, but still occupying the real back link's space so the Continue
   button doesn't jump between the first and second steps. */
.lf .back--ghost {
  visibility: hidden;
  pointer-events: none;
}

.lf .hidden {
  display: none;
}

/* Honeypot (anti-spam) — visually hidden, off-screen, kept out of tab order */
.lf .lf-hp {
  position: absolute !important;
  left: -9999px;
  top: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

/* Industry autocomplete */
.lf .acwrap {
  position: relative;
}
.lf .aclist {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 4px);
  background: #fff;
  border: 2px solid var(--line);
  border-radius: 12px;
  max-height: 230px;
  overflow: auto;
  z-index: 20;
  box-shadow: 0 14px 34px rgba(0, 51, 55, 0.14);
}
.lf .acitem {
  padding: 12px 16px;
  font: 500 15px var(--ff-body);
  color: var(--ocean);
  cursor: pointer;
  border-bottom: 1px solid var(--line);
}
.lf .acitem:last-child {
  border-bottom: none;
}
.lf .acitem:hover {
  background: var(--sand);
}
.lf .acitem .add {
  color: var(--fire);
  font-weight: 700;
}

/* The ABN lookup widget's rules (result panel, its dropdown skin) live in
   abn-lookup.css, scoped to .abn-widget — see README § "Portable modules". */

/* Completion screens */
.lf .center {
  text-align: center;
  padding: 10px 0;
}
.lf .mcheck {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: var(--sky);
  color: var(--ocean);
  font-size: 30px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
}
.lf .check {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: var(--fire);
  color: #fff;
  font-size: 38px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 22px;
}
/* ---------- Confirm-mobile step (phone-verify module) ---------- */
/* The code field reads like an OTP box: centred, big, spaced digits. */
.lf .vcode {
  text-align: center;
  font-size: 1.3rem;
  letter-spacing: 0.35em;
}
/* Status line under the code field — reserves its height so the layout
   doesn't jump when a message appears. err uses the site's --fire-2 text
   red; ok the deep confirmation green shared with the ABN result panel. */
.lf .vmsg {
  min-height: 1.3em;
  margin-top: 8px;
  font-size: 0.85rem;
  color: var(--muted);
}
.lf .vmsg.err {
  color: var(--fire-2);
}
.lf .vmsg.ok {
  color: #1a7f37;
}
.lf .resend-row {
  margin-top: 10px;
  font-size: 0.85rem;
  color: var(--muted);
}
/* The resend control is a link-styled button; while the retry buffer runs it
   shows a countdown ("Resend code (30s)") and sits disabled. */
.lf .linkbtn {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: var(--fire);
  text-decoration: underline;
  cursor: pointer;
}
.lf .linkbtn:disabled {
  color: var(--muted);
  text-decoration: none;
  cursor: default;
}

/* Phones — the card is sized to the viewport (styles.css makes .form-card a
   flex column of screen height, with #lead-form-mount flexing between the
   head band and the trust foot), so the shell drops its fixed height and
   fills whatever space that leaves. Every step then compacts its spacing
   with svh-based clamps so its content genuinely fits that box — the form
   itself never shows a scrollbar. svh (small viewport height) is stable
   while mobile browser chrome collapses/expands, so spacing never jumps
   mid-session. Below the card's min-height floor (styles.css) the page
   scrolls natively instead. The slider relaxes to nearly full width (a
   longer bar = more precise dragging with a thumb). */
@media (max-width: 560px) {
  .lf {
    height: auto;
    flex: 1;
    min-height: 0;
  }
  .lf input[type="range"],
  .lf .ends {
    width: 94%;
    max-width: none;
  }
  /* Height-adaptive spacing: each clamp floors at a compact-but-readable
     value on short screens (~640px viewports) and relaxes to the desktop
     spacing on tall ones. The auto margins on .cta/.back (top of file)
     still absorb any slack, so these only bite on the tall steps. */
  .lf-progress {
    margin-bottom: clamp(10px, 2svh, 22px);
  }
  .lf .eyebrow {
    margin-bottom: clamp(6px, 1svh, 10px);
  }
  .lf .opt {
    padding: clamp(10px, 1.6svh, 16px) 16px;
    margin-top: clamp(7px, 1.2svh, 12px);
  }
  .lf .field {
    padding: clamp(9px, 1.4svh, 12px) 16px;
  }
  .lf .flabel {
    margin-top: clamp(6px, 1svh, 10px);
  }
  .lf .cta {
    margin-top: clamp(12px, 2svh, 28px);
    padding-top: clamp(13px, 1.8svh, 17px);
    padding-bottom: clamp(13px, 1.8svh, 17px);
  }
  .lf .back {
    margin-top: clamp(8px, 1.2svh, 14px);
  }
  .lf .reassure {
    padding: clamp(9px, 1.4svh, 13px) 14px;
    font-size: clamp(12.5px, 1.9svh, 14px);
    margin-top: clamp(9px, 1.4svh, 14px);
  }
  .lf .consent {
    font-size: 12.5px;
    margin-top: clamp(7px, 1.1svh, 10px);
  }
  .lf .sub {
    font-size: clamp(13px, 2svh, 15px);
    margin-top: 6px;
  }
  .lf .hint {
    margin-top: clamp(6px, 1svh, 10px);
  }
  /* Purpose step (--dense): six option cards — the tallest list in the
     form — so its cards compress further than the shared clamp above. */
  .lf-step--dense .opt {
    padding: clamp(9px, 1.3svh, 14px) 16px;
    margin-top: clamp(6px, 1svh, 10px);
    font-size: 15px;
  }
  .lf-step--dense .opt .arr {
    font-size: 16px;
  }
  /* Security step with the type picker open — tighten past the base
     .sec-open compaction (mid-file) so Yes/No + four types + reassure all
     fit a short phone. */
  .lf .lf-step.sec-open .two .opt {
    padding: 9px 10px;
  }
  .lf .lf-step.sec-open .sec-follow {
    padding-bottom: 8px;
  }
  .lf .lf-step.sec-open .reassure {
    font-size: 12.5px;
  }
  /* Purpose step with the "Something else" box open — the fixed paddings in
     its mid-file compaction block already undercut the dense clamps, so only
     the panel needs a squeeze here. */
  .lf .lf-step.purpose-open .opt-drop {
    padding-bottom: 8px;
  }
  /* Contact step: smaller error lines so all three showing at once stay
     inside the CTA's auto-margin slack. */
  .lf .ferr {
    font-size: 11.5px;
  }
  /* Dropdowns must never outgrow a short screen (the card clips overflow) */
  .lf .aclist {
    max-height: min(230px, 40svh);
  }
}

/* Short phones (<= 750px tall — iPhone SE/8 class): the step box is far
   smaller than the viewport (page header + card head/foot eat ~250px), so
   the svh clamps above stay near their maxima and don't compress enough.
   This tier pins every block to its compact value outright; taller phones
   never match it and keep the roomier clamp spacing. */
@media (max-width: 560px) and (max-height: 750px) {
  .lf-progress {
    margin-bottom: 6px;
  }
  .lf .eyebrow {
    font-size: 11px;
    margin-bottom: 4px;
  }
  .lf .sub {
    margin-top: 4px;
  }
  .lf .opt {
    padding: 8px 14px;
    margin-top: 6px;
    font-size: 15px;
  }
  .lf .field {
    padding: 8px 14px;
  }
  .lf .flabel {
    font-size: 12px;
    margin-top: 2px;
  }
  .lf .flabel + .field {
    margin-top: 3px;
  }
  .lf .cta {
    margin-top: 8px;
    padding-top: 11px;
    padding-bottom: 11px;
  }
  .lf .back {
    margin-top: 2px;
    padding: 2px;
  }
  .lf .reassure {
    padding: 8px 12px;
    font-size: 12px;
    line-height: 1.4;
    margin-top: 6px;
  }
  .lf .consent {
    font-size: 11.5px;
    line-height: 1.45;
    margin-top: 4px;
  }
  .lf .ferr {
    font-size: 11px;
    line-height: 1.3;
    margin-top: 0;
  }
  .lf .hint {
    font-size: 12px;
    margin-top: 6px;
  }
  .lf .two {
    gap: 8px;
    margin-top: 8px;
  }
  .lf .two .opt {
    padding: 7px 8px;
    font-size: 13px;
  }
  .lf .sec-follow {
    margin-top: 6px;
    padding: 2px 10px 8px;
  }
  .lf .amt-follow {
    margin-top: 8px;
    padding: 8px 18px;
    gap: 4px;
  }
  /* Security step with the picker open — its own mid-file compaction block
     outranks the generic rules above, so re-pin each piece here. */
  .lf .lf-step.sec-open .opt {
    padding: 8px 14px;
    margin-top: 6px;
  }
  .lf .lf-step.sec-open .sec-follow {
    margin-top: 6px;
    padding-bottom: 6px;
  }
  .lf .lf-step.sec-open .two .opt {
    padding: 7px 8px;
  }
  .lf .lf-step.sec-open .reassure {
    font-size: 12px;
    padding: 8px 12px;
    margin-top: 6px;
  }
  .lf .lf-step.sec-open .back {
    margin-top: 4px;
  }
  /* Purpose step with the box open — same re-pin, squeezed hardest of all:
     six cards + panel + CTA + back is the form's tallest state and a short
     phone has ~430px of step box to hold it. */
  .lf .lf-step.purpose-open .opt {
    padding: 6px 14px;
    margin-top: 4px;
    font-size: 14px;
  }
  .lf .lf-step.purpose-open .opt-drop {
    padding-top: 4px;
    padding-bottom: 6px;
  }
  .lf .lf-step.purpose-open .cta {
    margin-top: 6px;
    padding-top: 10px;
    padding-bottom: 10px;
  }
  .lf .lf-step.purpose-open .back {
    margin-top: 2px;
  }
}

/* Very narrow phones (<= 360px): option labels start wrapping to two lines,
   so the dense purpose list squeezes one notch further to keep all six
   cards inside the step box. */
@media (max-width: 360px) {
  .lf-step--dense .opt {
    padding: 7px 12px;
    margin-top: 5px;
    font-size: 14px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .lf * {
    animation: none !important;
    transition: none !important;
  }
}