/* ══════════════════════════════════════════════════════════════════════════
   lp.css — shared components for the two paid-traffic landing pages,
   /income and /bank-statement-loans-los-angeles.

   Loaded by those two pages only. styles.css is shared by every page on the
   site and is deliberately NOT touched here, so nothing outside these two
   URLs can change appearance.

   Written mobile-first around a 390px viewport, because that is where the
   Instagram traffic actually lands. Everything reuses the site's existing
   tokens (--blue, --gray-*, --radius-*, --shadow-*) so these sections read as
   the same product as the rest of LiveLendLA rather than a bolted-on funnel.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Typographic hero ──
   No photography. The visitor arrived from an ad that asked one question, and
   the fastest possible answer is the question itself set large, with the CTA
   that leads to the answer directly underneath. Text renders as soon as the
   stylesheet does, which is the point: there is no image to wait for. */
.lp-hero {
  padding: calc(var(--nav-height) + 34px) 0 34px;
  background: var(--white);
}
.lp-hero__eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .19em;
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: 18px;
}
.lp-hero__title {
  margin: 0;
  font-size: clamp(33px, 8.6vw, 68px);
  font-weight: 700;
  letter-spacing: -.04em;
  line-height: 1.04;
  color: var(--black);
  max-width: 17em;
}
.lp-hero__sub {
  margin: 20px 0 0;
  font-size: clamp(17px, 4.4vw, 23px);
  font-weight: 500;
  letter-spacing: -.012em;
  line-height: 1.4;
  color: var(--gray-500);
  max-width: 26em;
}
.lp-hero__support {
  margin: 14px 0 0;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--gray-400);
  max-width: 30em;
}
.lp-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 30px;
}
@media (max-width: 560px) {
  .lp-hero__actions { flex-direction: column; }
  .lp-hero__actions .btn { width: 100%; justify-content: center; }
}

/* ── Proof points ──
   Three numbers, stated plainly, with the unit under the figure so the number
   itself carries the hierarchy. Row of three on desktop; on a phone they stack
   into a hairline-separated list rather than three identical cards. */
.lp-proof {
  display: grid;
  gap: 0;
  margin-top: 38px;
  border-top: 1px solid var(--gray-200);
}
.lp-proof__item {
  padding: 20px 0;
  border-bottom: 1px solid var(--gray-200);
}
.lp-proof__value {
  font-size: clamp(28px, 7.5vw, 38px);
  font-weight: 700;
  letter-spacing: -.035em;
  line-height: 1;
  color: var(--black);
  font-variant-numeric: tabular-nums;
}
.lp-proof__label {
  margin-top: 8px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--gray-500);
}
@media (min-width: 700px) {
  .lp-proof { grid-template-columns: repeat(3, 1fr); gap: 34px; }
  .lp-proof__item { border-bottom: none; padding: 24px 0 0; }
}

/* ── Section shell for the fast-path blocks ──
   Deliberately quieter than styles.css's .section: shorter, and separated by a
   background shift rather than a border, so scrolling the page reads as a
   sequence of short chapters. */
.lp-sec { padding: 62px 0; background: var(--white); }
.lp-sec--tint { background: var(--gray-50); }
.lp-sec--dark { background: var(--gray-700); color: var(--white); }
.lp-sec--tight { padding-top: 0; }
@media (min-width: 800px) { .lp-sec { padding: 88px 0; } }

.lp-eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .19em;
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: 14px;
}
.lp-sec--dark .lp-eyebrow { color: #5eb3ff; }
.lp-h2 {
  margin: 0;
  font-size: clamp(27px, 6.8vw, 44px);
  font-weight: 700;
  letter-spacing: -.036em;
  line-height: 1.1;
  color: var(--black);
}
.lp-sec--dark .lp-h2 { color: var(--white); }
.lp-lede {
  margin: 16px 0 0;
  font-size: clamp(16px, 4.1vw, 19px);
  line-height: 1.6;
  color: var(--gray-500);
  max-width: 34em;
}
.lp-sec--dark .lp-lede { color: rgba(255,255,255,.72); }
.lp-fine {
  margin: 22px 0 0;
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--gray-400);
  max-width: 42em;
}

/* ── Three-step flow ──
   A vertical sequence on a phone with a hairline running between the steps, so
   the order is legible without an icon set or numbered bubbles competing with
   the words. */
.lp-flow { margin-top: 34px; display: grid; gap: 0; }
.lp-flow__step {
  position: relative;
  padding: 26px 0 26px 46px;
  border-top: 1px solid var(--gray-200);
}
.lp-flow__step:last-child { border-bottom: 1px solid var(--gray-200); }
.lp-flow__num {
  position: absolute;
  left: 0;
  top: 26px;
  width: 28px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--blue);
  font-variant-numeric: tabular-nums;
}
.lp-flow__num::after {
  content: "";
  position: absolute;
  left: 6px;
  top: 26px;
  bottom: -52px;
  width: 1px;
  background: var(--gray-200);
}
.lp-flow__step:last-child .lp-flow__num::after { display: none; }
.lp-flow__title {
  font-size: clamp(19px, 4.8vw, 23px);
  font-weight: 600;
  letter-spacing: -.022em;
  line-height: 1.25;
  color: var(--black);
}
.lp-flow__text {
  margin: 9px 0 0;
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--gray-500);
}
@media (min-width: 860px) {
  .lp-flow { grid-template-columns: repeat(3, 1fr); gap: 30px; }
  .lp-flow__step { padding: 26px 0 0; border-bottom: none !important; }
  .lp-flow__num { position: static; display: block; margin-bottom: 12px; width: auto; }
  .lp-flow__num::after { display: none; }
}

/* ── Worked example ──
   Two inputs and one answer. The answer is the only figure in the accent
   colour and the only one set large, because it is the thing being explained. */
.lp-ex {
  margin-top: 32px;
  padding: 28px 24px;
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  max-width: 560px;
}
.lp-sec--tint .lp-ex { background: var(--white); }
.lp-ex__label {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--gray-400);
}
.lp-ex__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 0;
  border-bottom: 1px solid var(--gray-200);
}
.lp-ex__row:first-of-type { border-top: 1px solid var(--gray-200); margin-top: 16px; }
.lp-ex__row--answer { border-bottom: none; padding-bottom: 4px; }
.lp-ex__k { font-size: 14.5px; line-height: 1.45; color: var(--gray-500); }
.lp-ex__v {
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -.025em;
  color: var(--gray-700);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.lp-ex__row--answer .lp-ex__k { color: var(--gray-700); font-weight: 600; }
.lp-ex__row--answer .lp-ex__v {
  font-size: clamp(28px, 7.5vw, 36px);
  font-weight: 700;
  letter-spacing: -.038em;
  color: var(--blue);
}
.lp-ex__note {
  margin: 18px 0 0;
  font-size: 13px;
  line-height: 1.65;
  color: var(--gray-400);
}

/* ── Two-option comparison ──
   Side by side, no table chrome. Each option is a short claim and a short
   explanation, which is all that is needed before the deeper table further
   down the page. */
.lp-split { margin-top: 34px; display: grid; gap: 18px; }
@media (min-width: 760px) { .lp-split { grid-template-columns: 1fr 1fr; gap: 24px; } }
.lp-split__item {
  padding: 26px 24px;
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
}
.lp-split__tag {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: 12px;
}
.lp-split__title {
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1.3;
  color: var(--black);
}
.lp-split__text {
  margin: 10px 0 0;
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--gray-500);
}

/* ── Scannable list of who this suits ──
   Chips, not bullet points: the visitor is looking for themselves in the list
   and should be able to find the word in one pass. */
.lp-tags { margin: 30px 0 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 9px; }
.lp-tags li {
  padding: 9px 16px;
  font-size: 15px;
  font-weight: 500;
  color: var(--gray-600);
  background: var(--white);
  border: 1px solid var(--gray-300);
  border-radius: 999px;
}
.lp-sec--tint .lp-tags li { background: var(--white); }

/* ── Educational callout ──
   One point that matters enough to be set apart, marked with a rule rather
   than a coloured box. */
.lp-callout {
  margin-top: 34px;
  padding: 4px 0 4px 22px;
  border-left: 2px solid var(--blue);
  max-width: 44em;
}
.lp-callout__title {
  font-size: clamp(19px, 4.6vw, 24px);
  font-weight: 600;
  letter-spacing: -.024em;
  line-height: 1.3;
  color: var(--black);
}
.lp-callout__text { margin: 12px 0 0; font-size: 15.5px; line-height: 1.7; color: var(--gray-500); }

/* ── The answer, set as the star ──
   Used by the income calculator. The figure is the largest thing on the
   screen; everything that produced it is one tap away rather than stacked
   underneath it. */
.lp-answer { margin-top: 30px; padding: 30px 0 4px; border-top: 1px solid var(--gray-200); }
.lp-answer__label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--gray-400);
}
.lp-answer__value {
  margin-top: 14px;
  font-size: clamp(44px, 13vw, 88px);
  font-weight: 700;
  letter-spacing: -.05em;
  line-height: .98;
  color: var(--black);
  font-variant-numeric: tabular-nums;
}
.lp-answer__unit { font-size: .38em; font-weight: 600; letter-spacing: -.02em; color: var(--gray-400); }
.lp-answer__alt { margin-top: 14px; font-size: 17px; font-weight: 500; color: var(--gray-500); font-variant-numeric: tabular-nums; }
.lp-answer.is-fresh { animation: lpFade .5s cubic-bezier(.25,.1,.25,1) both; }
@keyframes lpFade { from { opacity: .35; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .lp-answer.is-fresh { animation: none; } }

/* Plain-English inputs. Labels are full sentences where a label alone would
   need mortgage vocabulary to make sense. */
.lp-fields { margin-top: 6px; display: grid; gap: 18px; }
@media (min-width: 680px) { .lp-fields { grid-template-columns: 1fr 1fr; gap: 20px 24px; } }
.lp-field { display: flex; flex-direction: column; }
.lp-field--full { grid-column: 1 / -1; }
.lp-field > label {
  font-size: 14px;
  font-weight: 600;
  color: var(--gray-700);
  margin-bottom: 8px;
  line-height: 1.4;
}
.lp-field__hint { display: block; font-size: 12.5px; font-weight: 400; color: var(--gray-400); margin-top: 3px; }
.lp-input {
  width: 100%;
  padding: 15px 16px;
  font-family: inherit;
  font-size: 17px; /* 16px+ so iOS Safari does not zoom the page on focus */
  font-weight: 500;
  color: var(--gray-700);
  background: var(--white);
  border: 1px solid var(--gray-300);
  border-radius: var(--radius-sm);
  -webkit-appearance: none;
  appearance: none;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.lp-input:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px var(--blue-light);
}
.lp-input::placeholder { color: var(--gray-300); }
select.lp-input { background-image: none; }

/* Progressive disclosure of the arithmetic behind the answer. */
.lp-why { margin-top: 26px; border-top: 1px solid var(--gray-200); }
.lp-why > summary {
  list-style: none;
  cursor: pointer;
  padding: 18px 0;
  font-size: 15.5px;
  font-weight: 600;
  color: var(--blue);
  display: flex;
  align-items: center;
  gap: 8px;
}
.lp-why > summary::-webkit-details-marker { display: none; }
.lp-why > summary::after {
  content: "";
  width: 7px; height: 7px;
  border: solid currentColor;
  border-width: 0 1.6px 1.6px 0;
  transform: rotate(45deg) translateY(-2px);
  transition: transform var(--transition);
}
.lp-why[open] > summary::after { transform: rotate(225deg) translateY(0); }
.lp-why__body { padding-bottom: 22px; }
.lp-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  padding: 13px 0;
  border-top: 1px solid var(--gray-200);
  font-size: 15px;
  color: var(--gray-500);
}
/* A class-based display value outranks the browser's own [hidden] rule, so
   the rows lp.js hides when a figure is zero need this to actually disappear. */
.lp-row[hidden] { display: none; }
.lp-row__v { font-weight: 600; color: var(--gray-700); white-space: nowrap; font-variant-numeric: tabular-nums; }
.lp-row--total { border-top: 1px solid var(--gray-300); }
.lp-row--total .lp-row__k { font-weight: 600; color: var(--gray-700); }
.lp-row--total .lp-row__v { color: var(--blue); }

/* ── Conversion moment ──
   The ask, once, after the page has already been useful. */
.lp-cta { padding: 68px 0; background: var(--gray-50); border-top: 1px solid var(--gray-200); }
@media (min-width: 800px) { .lp-cta { padding: 96px 0; } }
.lp-cta__title {
  margin: 0;
  font-size: clamp(27px, 6.6vw, 44px);
  font-weight: 700;
  letter-spacing: -.036em;
  line-height: 1.1;
  color: var(--black);
  max-width: 22em;
}
.lp-cta__text { margin: 18px 0 0; font-size: clamp(16px, 4.1vw, 19px); line-height: 1.6; color: var(--gray-500); max-width: 32em; }
.lp-cta__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
@media (max-width: 560px) {
  .lp-cta__actions { flex-direction: column; }
  .lp-cta__actions .btn { width: 100%; justify-content: center; }
}

/* ── Lead form ──
   Opens in place. Five fields at most, because this is a request for Derek to
   look at a scenario, not a mortgage application. */
.lp-form-wrap {
  margin-top: 28px;
  max-height: 0;
  overflow: hidden;
  transition: max-height .45s cubic-bezier(.25,.1,.25,1);
}
.lp-form-wrap.is-open { max-height: 1400px; }
@media (prefers-reduced-motion: reduce) { .lp-form-wrap { transition: none; } }
.lp-form {
  padding: 28px 22px;
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  max-width: 620px;
}
@media (min-width: 680px) { .lp-form { padding: 34px 32px; } }
.lp-form__hp { position: absolute; left: -9999px; }
.lp-form__submit { margin-top: 24px; }
.lp-form__submit .btn { width: 100%; justify-content: center; }
.lp-form__error {
  display: none;
  margin-top: 16px;
  padding: 12px 14px;
  font-size: 14px;
  line-height: 1.5;
  color: #8a1c1c;
  background: rgba(191,38,38,.07);
  border-radius: var(--radius-sm);
}
.lp-form__error.is-visible { display: block; }
.lp-form__note { margin: 20px 0 0; font-size: 13px; line-height: 1.7; color: var(--gray-400); }
.lp-form__note strong { color: var(--gray-600); font-weight: 600; }

/* Radio row for "what are you trying to do?" — real radios, styled as a row
   of choices so it reads as one question rather than three fields. */
.lp-choice { display: flex; flex-wrap: wrap; gap: 8px; }
.lp-choice input { position: absolute; opacity: 0; pointer-events: none; }
.lp-choice label {
  padding: 11px 18px;
  font-size: 15px;
  font-weight: 500;
  color: var(--gray-600);
  background: var(--white);
  border: 1px solid var(--gray-300);
  border-radius: 999px;
  cursor: pointer;
  transition: border-color var(--transition), color var(--transition), background var(--transition);
}
.lp-choice input:checked + label { border-color: var(--blue); color: var(--blue); background: var(--blue-light); }
.lp-choice input:focus-visible + label { outline: 2px solid var(--blue); outline-offset: 2px; }

/* ── Derek ──
   A name and a licence number under the form, at the scale of a signature.
   Subtle on purpose: the page is about the borrower's numbers. */
.lp-derek { display: flex; align-items: center; gap: 13px; margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--gray-200); }
.lp-derek__img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; object-position: top; background: var(--gray-100); flex: none; }
.lp-derek__name { font-size: 14.5px; font-weight: 600; color: var(--gray-700); line-height: 1.35; }
.lp-derek__role { font-size: 13px; color: var(--gray-400); line-height: 1.45; }

/* ── Submitted state ── */
.lp-done { display: none; max-width: 620px; padding: 34px 26px; background: var(--white); border: 1px solid var(--gray-200); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); }
.lp-done.is-visible { display: block; }
.lp-done__title { font-size: clamp(22px, 5.4vw, 28px); font-weight: 700; letter-spacing: -.03em; color: var(--black); margin: 0; }
.lp-done__text { margin: 14px 0 0; font-size: 16px; line-height: 1.65; color: var(--gray-500); }

/* ── Sticky bottom CTA ──
   Phone widths only, and only after the visitor has scrolled past the hero.
   One line tall, translucent, dismissible, and it releases its space back to
   the page as soon as it hides. */
.lp-sticky {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 90;
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
  background: rgba(255,255,255,.86);
  -webkit-backdrop-filter: saturate(180%) blur(18px);
  backdrop-filter: saturate(180%) blur(18px);
  border-top: 1px solid var(--gray-200);
  transform: translateY(110%);
  transition: transform .42s cubic-bezier(.32,.72,0,1);
}
.lp-sticky.is-in { transform: none; }
.lp-sticky__inner { display: flex; align-items: center; gap: 12px; max-width: 640px; margin: 0 auto; }
.lp-sticky__cta { flex: 1; justify-content: center; }
.lp-sticky__text { flex: none; display: none; font-size: 13.5px; color: var(--gray-500); }
@media (min-width: 560px) { .lp-sticky__text { display: block; } }

/* Dismiss. Deliberately a real, finger-sized target rather than a hairline
   cross, because the bar is easier to forgive when it is easy to get rid of. */
.lp-sticky__close {
  flex: none;
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: transparent;
  border: 1px solid var(--gray-200);
  border-radius: 50%;
  color: var(--gray-400);
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transition: color .18s ease, border-color .18s ease;
}
.lp-sticky__close:hover { color: var(--gray-700); border-color: var(--gray-300); }
@media (min-width: 1000px) { .lp-sticky { display: none; } }
@media (prefers-reduced-motion: reduce) { .lp-sticky { transition: none; } }
body.lp-has-sticky { padding-bottom: 0; }

/* ── Early conversion moment ──
   Sits directly under the worked income example. Intentionally quiet: the same
   tinted card the rest of the page uses, one heading, one line, one button. It
   is a note between two chapters, not a sales banner. */
.lp-nudge {
  margin-top: 34px;
  padding: 26px 22px;
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
}
.lp-nudge__title {
  margin: 0;
  font-size: clamp(19px, 4.6vw, 22px);
  font-weight: 700;
  letter-spacing: -.022em;
  line-height: 1.25;
  color: var(--black);
  max-width: 24em;
}
.lp-nudge__text {
  margin: 10px 0 0;
  font-size: clamp(15px, 3.9vw, 16.5px);
  line-height: 1.6;
  color: var(--gray-500);
  max-width: 34em;
}
.lp-nudge__cta { margin-top: 20px; }
.lp-nudge__note {
  margin: 14px 0 0;
  font-size: 13px;
  line-height: 1.6;
  color: var(--gray-400);
}
@media (min-width: 700px) { .lp-nudge { padding: 30px 32px; } }
@media (max-width: 560px) {
  .lp-nudge__cta { width: 100%; justify-content: center; }
}

/* ── Deep content ──
   Everything the page had before, kept in full, below a divider that says so.
   On a phone the long chapters are collapsed; the markup ships expanded so a
   crawler (and anyone without JavaScript) sees all of it. */
.lp-deep-head { padding: 56px 0 0; background: var(--white); }
.lp-deep-head__rule { border-top: 1px solid var(--gray-200); padding-top: 34px; }
.lp-deep-head__title {
  margin: 0;
  font-size: clamp(23px, 5.4vw, 34px);
  font-weight: 700;
  letter-spacing: -.032em;
  color: var(--black);
}
.lp-deep-head__text { margin: 12px 0 0; font-size: 15.5px; line-height: 1.6; color: var(--gray-400); max-width: 36em; }

/* The optional-reading variant, used on /bank-statement-loans-los-angeles.
   The guide underneath is long enough that, with only the standard rule above
   it, the transition read as if the page had started over at the top. So it
   gets treated as an interstitial instead: more air, a centred block narrower
   than the page, a question rather than a headline first, and a title set
   below hero scale. The content below is unchanged. */
.lp-deep-head--optional { padding: 60px 0 6px; }
@media (min-width: 800px) { .lp-deep-head--optional { padding: 92px 0 8px; } }
.lp-deep-head--optional .lp-deep-head__rule { padding-top: 40px; text-align: center; }
@media (min-width: 800px) { .lp-deep-head--optional .lp-deep-head__rule { padding-top: 52px; } }
.lp-deep-head--optional .lp-deep-head__kicker {
  margin: 0 0 10px;
  font-size: clamp(16px, 4.1vw, 18px);
  font-weight: 600;
  letter-spacing: -.012em;
  color: var(--blue);
}
.lp-deep-head--optional .lp-deep-head__title {
  font-size: clamp(22px, 5vw, 30px);
  letter-spacing: -.028em;
  line-height: 1.18;
}
.lp-deep-head--optional .lp-deep-head__text { margin: 14px auto 0; max-width: 34em; }

/* The summary sits at top level, outside the section it opens, so the sections
   themselves keep their own full-bleed backgrounds and internal containers
   untouched. It is aligned to the site container so the collapsed chapters read
   as one list. */
.lp-acc > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 21px 24px;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -.015em;
  color: var(--gray-700);
  box-shadow: inset 0 -1px 0 var(--gray-200);
  background: var(--white);
}
.lp-acc[open] > summary { color: var(--black); }
.lp-acc > summary::-webkit-details-marker { display: none; }
.lp-acc > summary::after {
  content: "";
  flex: none;
  width: 8px; height: 8px;
  border: solid var(--gray-400);
  border-width: 0 1.6px 1.6px 0;
  transform: rotate(45deg) translateY(-2px);
  transition: transform var(--transition);
}
.lp-acc[open] > summary::after { transform: rotate(225deg) translateY(0); }
/* Above the phone breakpoint the chapters are simply open, and the toggle that
   opened them is not shown at all. */
@media (min-width: 861px) {
  .lp-acc > summary { display: none; }
}

/* ── Room for the sticky bar ──
   Added by lp.js at load time on paid visits only, and applied to the footer
   so the reserved strip keeps the footer's own background rather than showing
   a bare gap under it. */
body.has-lp-sticky .footer { padding-bottom: calc(72px + env(safe-area-inset-bottom)); }
@media (min-width: 1000px) {
  body.has-lp-sticky .footer { padding-bottom: 0; }
}

/* Once the lead form is open the sticky bar is redundant, so it slides back
   out of the way rather than repeating a request the visitor already accepted. */
body.lp-form-engaged .lp-sticky { transform: translateY(110%); }

/* Same reasoning while a section making the identical ask is on screen. */
body.lp-sticky-yield .lp-sticky { transform: translateY(110%); }

/* ── Paired next steps ──
   The site's primary pill alongside the quieter ghost button. Stacked and
   near-full-width on a phone, side-by-side once there is room, and always
   inside the existing content column rather than in a card or banner. The
   561px breakpoint is the same one the hero actions stack at. */
.lp-actband {
  background: var(--white);
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}
/* The hero already carries two in-page anchors, so the outbound pair is set
   below a hairline — the same divider the sections further down use — rather
   than piling a third and fourth pill onto the hero's own stack. */
.lp-actband--hero {
  border-top: 1px solid var(--gray-200);
  padding: 34px 0 44px;
}
.lp-actband--end { padding: 56px 0 60px; }
.lp-acts {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.lp-acts .btn { width: 100%; min-width: 0; min-height: 52px; }
@media (min-width: 561px) {
  .lp-acts { flex-direction: row; align-items: center; }
  .lp-acts .btn { width: auto; flex: 0 1 250px; }
}
@media (min-width: 800px) {
  .lp-actband--end { padding: 76px 0 80px; }
}


/* ══════════════════════════════════════════════════════════════════════════
   PREMIUM LANDING LAYER
   Everything below is scoped to body.lp-page, which only /income and
   /bank-statement-loans-los-angeles carry, so none of it can reach another
   URL even though it overrides site-wide component classes by name.

   Three ideas, and deliberately nothing else:

     1. A Los Angeles house used as texture, not as photography. The asset is
        the site's own Spanish Revival photograph, re-encoded soft and small
        and laid in at ~7% behind the first screen, fading to solid white.
     2. One glass CTA, elevated, with a restrained blue light under it — and
        a quieter glass secondary that reads as subordinate at a glance.
     3. Tertiary actions demoted to small, quiet controls so the primary
        button is the only loud thing above the fold.
   ══════════════════════════════════════════════════════════════════════════ */

/* iPhone safe areas. The site container is a fixed 24px gutter; on a notched
   phone in landscape that can sit under the rounded corner, so the gutter
   becomes "24px, or the inset if the inset is larger". */
.lp-page .container {
  padding-left: max(24px, env(safe-area-inset-left));
  padding-right: max(24px, env(safe-area-inset-right));
}

/* ── The house, as texture ──
   .lp-top wraps the hero and whatever sits immediately under it. The photo is
   a negative-z-index pseudo-element inside an isolated stacking context, so it
   paints above .lp-top's own white background and below every word on the
   page. It is a CSS background rather than an <img>, which means it can never
   contribute layout shift and never delays the headline: the text is in normal
   flow and paints with the stylesheet.

   The mask does the "fade into solid white" — by the bottom of .lp-top the
   image is gone and the page is plain white again, with nothing to line up
   against the sections below. */
.lp-page .lp-top {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--white);
}
.lp-page .lp-top::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: url("/assets/lp-la-home.webp");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 50% 62%;
  /* ~7% perceived visibility. Enough that the shape of a Spanish Revival
     house registers somewhere below conscious attention; not enough to cost
     the headline a single point of contrast. */
  opacity: .058;
  filter: saturate(.62);
  -webkit-mask-image: linear-gradient(to bottom,
    rgba(0,0,0,1) 0%, rgba(0,0,0,.94) 40%, rgba(0,0,0,.6) 72%, rgba(0,0,0,0) 100%);
  mask-image: linear-gradient(to bottom,
    rgba(0,0,0,1) 0%, rgba(0,0,0,.94) 40%, rgba(0,0,0,.6) 72%, rgba(0,0,0,0) 100%);
}
/* The sections inside the wrapper paint their own white, which would cover the
   texture, so inside .lp-top they are transparent and the wrapper owns the
   background. */
.lp-page .lp-top .lp-hero,
.lp-page .lp-top .lp-actband,
.lp-page .lp-top .lp-strip-wrap { background: transparent; }

/* The breadcrumb, where one exists, now sits inside .lp-top below the fixed
   nav. Its own gray band and border would cut the texture in half, so up here
   it is just a line of small type over the photograph. */
.lp-page .lp-top .breadcrumb {
  background: transparent;
  border-bottom: none;
  padding-top: var(--nav-height);
}
.lp-page .lp-top .breadcrumb__inner { padding-top: 12px; padding-bottom: 0; font-size: 12.5px; }
/* With the breadcrumb already clearing the nav, the hero no longer needs to. */
.lp-page .lp-top .breadcrumb + .lp-hero { padding-top: 30px; }
@media (min-width: 800px) {
  .lp-page .lp-top .breadcrumb + .lp-hero { padding-top: 54px; }
}

/* ── Hero composition ──
   Centred, with more air than before, because the headline and the numbers are
   the only things meant to carry weight up here. */
.lp-page .lp-hero {
  padding: calc(var(--nav-height) + 54px) 0 34px;
  text-align: center;
}
.lp-page .lp-hero__eyebrow {
  font-size: 10px;
  letter-spacing: .17em;
  margin-bottom: 22px;
  color: rgba(0,113,227,.92);
}
.lp-page .lp-hero__title {
  margin-inline: auto;
  max-width: 16em;
  font-size: clamp(32px, 8.4vw, 64px);
  line-height: 1.055;
  letter-spacing: -.042em;
  text-wrap: balance;
}
.lp-page .lp-hero__sub {
  margin: 22px auto 0;
  max-width: 21em;
  font-size: clamp(16.5px, 4.25vw, 22px);
  color: var(--gray-500);
  text-wrap: pretty;
}
.lp-page .lp-hero__support {
  margin: 17px auto 0;
  max-width: 25em;
  font-size: 14px;
  color: var(--gray-400);
  text-wrap: pretty;
}
.lp-page .lp-hero__actions {
  margin-top: 36px;
  align-items: center;
  justify-content: center;
}
@media (min-width: 800px) {
  .lp-page .lp-hero { padding: calc(var(--nav-height) + 84px) 0 52px; }
  .lp-page .lp-hero__actions { margin-top: 44px; gap: 14px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   GLASS CTAs
   The site's .btn stays exactly as it is everywhere else; these rules only
   re-surface it on the two landing pages. A polished physical control:
   translucent, a hairline blue edge, one inner highlight along the top, a
   contact shadow, a soft elevation shadow, and one restrained blue shadow
   spread under the button so it reads as lit from beneath rather than
   outlined in neon.
   ══════════════════════════════════════════════════════════════════════════ */
.lp-page .btn {
  border-radius: 16px;
  min-width: 0;
  letter-spacing: -.012em;
  transition: transform .2s cubic-bezier(.32,.72,0,1),
              box-shadow .24s cubic-bezier(.32,.72,0,1),
              background-color .24s ease;
}
.lp-page .btn--lg { padding: 17px 30px; font-size: 17.5px; }
.lp-page .btn--sm { padding: 0 18px; min-height: 44px; font-size: 14.5px; border-radius: 12px; }

/* Primary. Slightly deeper than the site blue so white type clears 4.5:1
   against the surface rather than sitting just under it. */
.lp-page .btn--primary {
  color: var(--white);
  background-color: #0068cd;
  background-image:
    linear-gradient(180deg, rgba(255,255,255,.13), rgba(255,255,255,0) 46%),
    linear-gradient(180deg, rgba(0,114,228,.95), rgba(0,96,198,.97));
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  backdrop-filter: blur(14px) saturate(160%);
  border: none;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.26),
    0 0 0 1px rgba(0,88,186,.5),
    0 2px 4px rgba(15,30,55,.10),
    0 12px 24px -12px rgba(15,30,55,.30),
    0 16px 34px -14px rgba(0,113,227,.40);
}

/* Secondary. The same material with the light turned down: no blue tint, no
   backlight, a hairline neutral edge. Subordinate on sight. */
.lp-page .btn--ghost-dark {
  color: var(--gray-700);
  background-color: rgba(255,255,255,.58);
  background-image: linear-gradient(180deg, rgba(255,255,255,.88), rgba(255,255,255,.46));
  -webkit-backdrop-filter: blur(12px) saturate(150%);
  backdrop-filter: blur(12px) saturate(150%);
  border: none;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    0 0 0 1px rgba(20,32,54,.11),
    0 1px 2px rgba(15,30,55,.05),
    0 8px 18px -12px rgba(15,30,55,.18);
}

/* Desktop hover lifts; the touch target compresses. Both small enough to feel
   like the control moved rather than the page. */
@media (hover: hover) and (pointer: fine) {
  .lp-page .btn--primary:hover {
    background-color: #0071e3;
    transform: translateY(-1.5px);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.40),
      0 0 0 1px rgba(0,88,186,.6),
      0 3px 6px rgba(15,30,55,.11),
      0 18px 32px -14px rgba(15,30,55,.30),
      0 22px 44px -16px rgba(0,113,227,.48);
  }
  .lp-page .btn--ghost-dark:hover {
    background-color: rgba(255,255,255,.76);
    transform: translateY(-1.5px);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.95),
      0 0 0 1px rgba(20,32,54,.16),
      0 2px 4px rgba(15,30,55,.06),
      0 14px 26px -14px rgba(15,30,55,.22);
  }
}
.lp-page .btn--primary:active,
.lp-page .btn--ghost-dark:active {
  transform: translateY(1px) scale(.986);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.22),
    0 0 0 1px rgba(20,32,54,.16),
    0 1px 2px rgba(15,30,55,.10);
}
.lp-page .btn:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 3px;
}

/* ── Mobile CTA geometry ──
   ~84% of the viewport, centred, 58px tall, with real space around it. Not
   edge to edge, and not a 999px pill. */
@media (max-width: 560px) {
  .lp-page .lp-hero__actions,
  .lp-page .lp-cta__actions {
    flex-direction: column;
    align-items: center;
    gap: 13px;
  }
  .lp-page .lp-hero__actions .btn,
  .lp-page .lp-cta__actions .btn,
  .lp-page .lp-form__submit .btn,
  .lp-page .lp-nudge__cta,
  .lp-page .inc-bridge__cta {
    display: inline-flex;
    width: min(84vw, 392px);
    min-height: 58px;
    padding-top: 0;
    padding-bottom: 0;
    padding-left: 20px;
    padding-right: 20px;
    margin-left: auto;
    margin-right: auto;
    font-size: 17px;
  }
  .lp-page .lp-hero__actions .btn--ghost-dark { min-height: 56px; }
  .lp-page .lp-cta__actions { margin-top: 30px; }
}

/* ── Tertiary controls ──
   Today's Rates and Text a Question. Small, quiet glass; the same material as
   the secondary button at about three-quarters the size, so they never read as
   a third and fourth primary CTA. */
.lp-page .lp-quiet {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}
.lp-page .lp-quiet__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 46px;
  padding: 0 18px;
  font-family: inherit;
  font-size: 14.5px;
  font-weight: 500;
  letter-spacing: -.008em;
  white-space: nowrap;
  color: var(--gray-600);
  background-color: rgba(255,255,255,.5);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  backdrop-filter: blur(10px) saturate(140%);
  border: none;
  border-radius: 13px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.85),
    0 0 0 1px rgba(20,32,54,.085);
  transition: transform .2s cubic-bezier(.32,.72,0,1),
              box-shadow .22s cubic-bezier(.32,.72,0,1),
              color .2s ease;
}
@media (hover: hover) and (pointer: fine) {
  .lp-page .lp-quiet__btn:hover {
    color: var(--gray-700);
    transform: translateY(-1px);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.95),
      0 0 0 1px rgba(20,32,54,.14),
      0 8px 16px -10px rgba(15,30,55,.2);
  }
}
.lp-page .lp-quiet__btn:active { transform: translateY(.5px) scale(.99); }
.lp-page .lp-quiet__btn:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
/* At the narrowest phone widths the two labels stop fitting side by side, so
   they wrap onto their own lines rather than shrinking below a readable size. */
@media (max-width: 359px) {
  .lp-page .lp-quiet__btn { width: min(84vw, 392px); }
}

/* The band that holds them. Quieter than the old paired-pill band: a hairline,
   air, two small controls. */
.lp-page .lp-actband--hero {
  border-top: 1px solid rgba(20,32,54,.09);
  padding: 26px 0 40px;
}
.lp-page .lp-actband--end { padding: 46px 0 54px; }
@media (min-width: 800px) {
  .lp-page .lp-actband--hero { padding: 32px 0 56px; }
  .lp-page .lp-actband--end { padding: 64px 0 72px; }
}

/* ── Bank statement proof strip ──
   Three facts, set as small caps on hairlines. Not cards, not icons, not
   numbers competing with the headline above them. */
.lp-page .lp-strip-wrap { padding: 4px 0 40px; }
.lp-page .lp-strip {
  display: grid;
  gap: 0;
  border-top: 1px solid rgba(20,32,54,.09);
}
.lp-page .lp-strip__item {
  padding: 15px 2px;
  border-bottom: 1px solid rgba(20,32,54,.09);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  line-height: 1.4;
  color: var(--gray-500);
  text-align: center;
}
@media (min-width: 620px) {
  .lp-page .lp-strip { grid-template-columns: repeat(3, 1fr); }
  .lp-page .lp-strip__item {
    padding: 18px 10px;
    border-bottom: none;
  }
  .lp-page .lp-strip__item + .lp-strip__item { border-left: 1px solid rgba(20,32,54,.09); }
}
@media (min-width: 800px) { .lp-page .lp-strip-wrap { padding: 8px 0 56px; } }

/* ══════════════════════════════════════════════════════════════════════════
   RESULT SCREENS
   The figure is the point of the screen, so nothing near it is allowed to be
   louder than it. The numbers keep the sizes they already had; the buttons
   under them come down to small quiet controls, and only the lead-form opener
   keeps a trace of the blue light.
   ══════════════════════════════════════════════════════════════════════════ */
.lp-page .afford-lead { margin-top: 48px; padding-top: 40px; }
.lp-page .afford-lead__value { letter-spacing: -.05em; }
.lp-page .afford-keys { margin-top: 40px; }

.lp-page .afford-actions {
  gap: 10px;
  margin: 30px 0 4px;
  justify-content: flex-start;
}
.lp-page .afford-actions .btn,
.lp-page .afford-actions--tight .btn {
  flex: 0 0 auto;
  width: auto;
  min-width: 0;
  min-height: 44px;
  padding: 0 15px;
  font-size: 14.5px;
  border-radius: 12px;
}
/* A small button under a result does not need a backlight. */
.lp-page .afford-actions .btn--primary {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.26),
    0 0 0 1px rgba(0,88,186,.5),
    0 1px 2px rgba(15,30,55,.09),
    0 8px 16px -10px rgba(0,113,227,.26);
}
@media (hover: hover) and (pointer: fine) {
  .lp-page .afford-actions .btn--primary:hover {
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.32),
      0 0 0 1px rgba(0,88,186,.56),
      0 2px 4px rgba(15,30,55,.10),
      0 12px 22px -10px rgba(0,113,227,.34);
  }
}
/* The continuation link into /loan-estimate is the quietest of the three: it
   keeps the glass, drops the blue, and leaves one blue button under a result. */
.lp-page .afford-actions--le .btn {
  font-size: 14px;
  color: var(--gray-700);
  background-color: rgba(255,255,255,.58);
  background-image: linear-gradient(180deg, rgba(255,255,255,.88), rgba(255,255,255,.46));
  -webkit-backdrop-filter: blur(12px) saturate(150%);
  backdrop-filter: blur(12px) saturate(150%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    0 0 0 1px rgba(20,32,54,.11),
    0 1px 2px rgba(15,30,55,.05);
}
@media (hover: hover) and (pointer: fine) {
  .lp-page .afford-actions--le .btn:hover {
    background-color: rgba(255,255,255,.72);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.95),
      0 0 0 1px rgba(20,32,54,.14),
      0 2px 4px rgba(15,30,55,.07);
  }
}

/* On a dark section the blue backlight would read as a glow rather than as
   light, so the primary keeps its edge and elevation and loses the backlight. */
.lp-page .section--dark .btn--primary {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.22),
    0 0 0 1px rgba(255,255,255,.14),
    0 2px 4px rgba(0,0,0,.24),
    0 14px 28px -14px rgba(0,0,0,.5);
}
@media (hover: hover) and (pointer: fine) {
  .lp-page .section--dark .btn--primary:hover {
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.28),
      0 0 0 1px rgba(255,255,255,.2),
      0 3px 6px rgba(0,0,0,.26),
      0 18px 34px -14px rgba(0,0,0,.55);
  }
}

/* ── Motion ──
   A visitor who has asked for less gets the material without the movement. */
@media (prefers-reduced-motion: reduce) {
  .lp-page .btn,
  .lp-page .lp-quiet__btn { transition: none; }
  .lp-page .btn--primary:hover,
  .lp-page .btn--ghost-dark:hover,
  .lp-page .btn--primary:active,
  .lp-page .btn--ghost-dark:active,
  .lp-page .lp-quiet__btn:hover,
  .lp-page .lp-quiet__btn:active { transform: none; }
}