/* Loan landing pages (FHA, Conventional, VA, USDA, Jumbo, Bank Statement,
   Down Payment Assistance, Refinance, Purchase) and /book-a-call/.
   One stylesheet, loaded in <helmet>, so nine pages share one cached file.
   Extends the DSCR page's vocabulary (wcm-cine / wcm-eyebrow / wcm-glow / wcm-pill)
   with the comic-panel treatment: hard offset shadows, halftone dots, starburst badge.
   Generated pages: _tools/build-loan-landing.js. */

.lp-wrap{ max-width:1240px; margin:0 auto; padding-left:24px; padding-right:24px; }
.lp-sec{ padding-top:64px; padding-bottom:8px; }
.lp-eyebrow{ font-size:12px; letter-spacing:.22em; text-transform:uppercase; color:var(--color-accent); font-weight:700; }
.lp-h2{ font-size:clamp(28px,3.4vw,42px); line-height:1.1; letter-spacing:-.015em; margin:10px 0 0; max-width:24ch; }
.lp-lede{ font-size:17px; line-height:1.7; opacity:.86; max-width:64ch; margin-top:14px; }
.lp-glow{ color:var(--color-accent); text-shadow:0 0 34px rgba(212,160,23,.42), 0 0 90px rgba(212,160,23,.18); }

/* ---------- hero ---------- */
.lp-hero{ position:relative; overflow:hidden; isolation:isolate; padding-top:56px; padding-bottom:64px;
  background:#0b0c11; }
.lp-hero-bg{ position:absolute; inset:0; z-index:-2; width:100%; height:100%; object-fit:cover; object-position:center; opacity:.5; }
.lp-hero:before{ content:""; position:absolute; inset:0; z-index:-1;
  background:
    radial-gradient(900px 520px at 78% 8%, rgba(212,160,23,.22), transparent 62%),
    linear-gradient(90deg, rgba(11,12,17,.97) 0%, rgba(11,12,17,.86) 42%, rgba(11,12,17,.42) 100%),
    linear-gradient(180deg, transparent 70%, var(--color-bg) 100%); }
.lp-hero:after{ content:""; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:linear-gradient(90deg, transparent, var(--color-accent) 22%, var(--color-accent) 78%, transparent); opacity:.55; }
.lp-hero-grid{ display:grid; grid-template-columns:1.15fr .85fr; gap:44px; align-items:center; }
.lp-crumbs{ font-size:12px; }
.lp-crumbs a{ padding:0 !important; }
.lp-h1{ font-size:clamp(36px,4.9vw,64px); line-height:1.03; letter-spacing:-.02em; margin:16px 0 0; max-width:19ch; }
.lp-sub{ font-size:19px; line-height:1.6; opacity:.9; max-width:52ch; margin-top:18px; }
.lp-cta-row{ display:flex; gap:13px; flex-wrap:wrap; margin-top:28px; align-items:center; }
.lp-btn{ padding:15px 28px !important; font-size:16px !important; }
.lp-callnote{ font-size:14px; opacity:.75; margin-top:14px; }
.lp-callnote a{ white-space:nowrap; }
.lp-pills{ display:flex; gap:10px; flex-wrap:wrap; margin-top:24px; }
.lp-pill{ display:inline-flex; align-items:center; gap:7px; font-size:13px; padding:7px 13px;
  border:1px solid var(--color-divider); border-radius:999px; background:rgba(212,160,23,.07); }
.lp-pill i{ color:var(--color-accent); }

/* comic panel around the hero character */
.lp-art{ position:relative; margin:0; justify-self:center; width:100%; max-width:400px; }
.lp-art-frame{ border:3px solid var(--color-accent); border-radius:6px; overflow:hidden; background:var(--color-accent-900);
  box-shadow:10px 10px 0 rgba(212,160,23,.9), 0 30px 70px rgba(0,0,0,.6); transform:rotate(1.2deg); }
.lp-art-frame img{ display:block; width:100%; height:auto; }
.lp-art figcaption{ position:absolute; left:-14px; bottom:22px; background:var(--color-accent); color:#14110a;
  font-weight:800; font-size:13px; letter-spacing:.08em; text-transform:uppercase; padding:7px 14px; border:2px solid #14110a;
  box-shadow:4px 4px 0 #14110a; transform:rotate(-3deg); }
.lp-burst{ position:absolute; top:-26px; right:-22px; width:112px; height:112px; display:grid; place-items:center; text-align:center;
  background:var(--color-accent); color:#14110a; font-weight:900; line-height:1; transform:rotate(9deg); z-index:2;
  clip-path:polygon(50% 0%,61% 12%,75% 6%,79% 21%,94% 25%,89% 40%,100% 50%,89% 60%,94% 75%,79% 79%,75% 94%,61% 88%,50% 100%,39% 88%,25% 94%,21% 79%,6% 75%,11% 60%,0% 50%,11% 40%,6% 25%,21% 21%,25% 6%,39% 12%); }
.lp-burst b{ display:block; font-size:30px; letter-spacing:-.02em; }
.lp-burst span{ display:block; font-size:11px; letter-spacing:.1em; text-transform:uppercase; margin-top:3px; font-weight:800; }

/* ---------- trust bar ---------- */
.lp-trust{ border-top:1px solid var(--color-divider); border-bottom:1px solid var(--color-divider);
  background:linear-gradient(180deg, rgba(212,160,23,.08), transparent); }
.lp-trust-in{ display:flex; flex-wrap:wrap; gap:10px 34px; justify-content:center; padding-top:18px; padding-bottom:18px; font-size:14px; }
.lp-trust-in span{ display:inline-flex; align-items:center; gap:8px; }
.lp-trust-in i{ color:var(--color-accent); font-size:18px; }

/* ---------- comic cards ---------- */
.lp-grid{ display:grid; gap:18px; margin-top:30px; }
.lp-g2{ grid-template-columns:repeat(2,minmax(0,1fr)); }
.lp-g3{ grid-template-columns:repeat(3,minmax(0,1fr)); }
.lp-g4{ grid-template-columns:repeat(4,minmax(0,1fr)); }
.lp-card{ position:relative; background:var(--color-surface); border:2px solid rgba(212,160,23,.5); border-radius:12px; padding:24px;
  box-shadow:6px 6px 0 rgba(212,160,23,.2); transition:transform .15s ease, box-shadow .15s ease; overflow:hidden; }
.lp-card:before{ content:""; position:absolute; inset:0; pointer-events:none; opacity:.55;
  background-image:radial-gradient(rgba(212,160,23,.13) 1.2px, transparent 1.5px); background-size:11px 11px;
  -webkit-mask-image:linear-gradient(135deg, #000 0%, transparent 46%); mask-image:linear-gradient(135deg, #000 0%, transparent 46%); }
.lp-card > *{ position:relative; }
.lp-card:hover{ transform:translate(-2px,-2px); box-shadow:8px 8px 0 rgba(212,160,23,.32); }
.lp-card i.lp-ic{ font-size:30px; color:var(--color-accent); }
.lp-card h3{ font-size:19px; margin:12px 0 0; line-height:1.25; }
.lp-card p{ font-size:15.5px; line-height:1.65; opacity:.85; margin:8px 0 0; }
.lp-fact{ text-align:left; }
.lp-fact .k{ font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--color-accent); font-weight:700; }
.lp-fact .v{ font-size:clamp(24px,2.6vw,34px); font-weight:800; line-height:1.1; margin-top:8px; letter-spacing:-.01em; }
.lp-fact .n{ font-size:13.5px; opacity:.72; margin-top:6px; line-height:1.5; }

/* "is this you" speech bubbles */
.lp-bubbles{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:22px 24px; margin-top:34px; }
.lp-bubble{ position:relative; background:#f4efe1; color:#16140d; border:3px solid #16140d; border-radius:18px; padding:20px 22px;
  box-shadow:6px 6px 0 var(--color-accent); font-weight:600; font-size:17px; line-height:1.45; }
.lp-bubble:after{ content:""; position:absolute; left:34px; bottom:-17px; width:26px; height:26px; background:#f4efe1;
  border-right:3px solid #16140d; border-bottom:3px solid #16140d; transform:rotate(45deg); border-radius:0 0 6px 0; }
.lp-bubble small{ display:block; font-weight:500; font-size:14px; opacity:.72; margin-top:8px; line-height:1.5; }
.lp-bubble-ans{ margin-top:30px; }

/* ---------- steps ---------- */
.lp-steps{ counter-reset:lpstep; display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:18px; margin-top:34px; }
.lp-step{ position:relative; padding:24px 22px 22px; border-top:3px solid var(--color-accent); background:linear-gradient(180deg, rgba(212,160,23,.08), transparent 70%); border-radius:0 0 10px 10px; }
.lp-step:before{ counter-increment:lpstep; content:counter(lpstep); position:absolute; top:-22px; left:20px; width:40px; height:40px; display:grid; place-items:center;
  background:var(--color-accent); color:#14110a; font-weight:900; font-size:19px; border:3px solid #14110a; border-radius:50%; box-shadow:3px 3px 0 #14110a; }
.lp-step h3{ font-size:18px; margin:14px 0 0; }
.lp-step p{ font-size:15px; line-height:1.6; opacity:.82; margin:8px 0 0; }

/* ---------- CTA band ---------- */
.lp-band{ position:relative; overflow:hidden; margin-top:64px; border-top:3px solid #14110a; border-bottom:3px solid #14110a;
  background:var(--color-accent); color:#14110a; }
.lp-band:before{ content:""; position:absolute; inset:0; opacity:.5; pointer-events:none;
  background-image:radial-gradient(rgba(20,17,10,.22) 1.6px, transparent 1.9px); background-size:13px 13px; }
.lp-band-in{ position:relative; display:flex; align-items:center; justify-content:space-between; gap:28px; flex-wrap:wrap; padding-top:38px; padding-bottom:38px; }
.lp-band h2{ margin:0; font-size:clamp(26px,3vw,38px); line-height:1.1; max-width:22ch; color:#14110a; }
.lp-band p{ margin:10px 0 0; font-size:17px; max-width:48ch; color:#2a2410; font-weight:500; }
.lp-band .btn{ background:#14110a !important; color:var(--color-accent) !important; border:3px solid #14110a !important; box-shadow:5px 5px 0 rgba(20,17,10,.35); }
.lp-band .btn-alt{ background:transparent !important; color:#14110a !important; }

/* ---------- content sections ---------- */
.lp-split{ display:grid; grid-template-columns:1fr 1fr; gap:46px; align-items:center; margin-top:64px; }
.lp-split.rev .lp-split-img, .lp-split.rev .lp-callout{ order:2; }
.lp-split.solo{ grid-template-columns:1fr; }
.lp-callout{ padding:34px 32px; }
.lp-callout .k{ font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:var(--color-accent); font-weight:700; }
.lp-callout .v{ font-size:clamp(40px,5.4vw,68px); font-weight:900; line-height:1; margin-top:14px; letter-spacing:-.02em; color:var(--color-accent); text-shadow:0 0 34px rgba(212,160,23,.35); }
.lp-callout .n{ font-size:16px; line-height:1.6; opacity:.85; margin-top:14px; }
.lp-split-img{ margin:0; }
.lp-split-img img{ display:block; width:100%; height:auto; border:3px solid var(--color-accent); border-radius:6px; box-shadow:9px 9px 0 rgba(212,160,23,.55); }
.lp-prose h2{ font-size:clamp(26px,3vw,36px); line-height:1.12; margin:0; letter-spacing:-.01em; }
.lp-prose p{ font-size:16.5px; line-height:1.75; opacity:.9; margin:14px 0 0; max-width:62ch; }
.lp-prose ul{ margin:14px 0 0; padding:0; list-style:none; display:grid; gap:10px; }
.lp-prose li{ display:flex; gap:11px; font-size:16px; line-height:1.55; opacity:.92; }
.lp-prose li i{ color:var(--color-accent); font-size:20px; flex:none; margin-top:1px; }
.lp-full{ margin-top:56px; }
.lp-table-wrap{ overflow-x:auto; margin-top:22px; border:2px solid rgba(212,160,23,.5); border-radius:12px; box-shadow:6px 6px 0 rgba(212,160,23,.2); background:var(--color-surface); }
.lp-table{ width:100%; border-collapse:collapse; font-size:15.5px; }
.lp-table th{ text-align:left; padding:14px 18px; background:rgba(212,160,23,.14); font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--color-accent); }
.lp-table td{ padding:14px 18px; border-top:1px solid var(--color-divider); line-height:1.5; vertical-align:top; }
.lp-table td:first-child{ font-weight:700; white-space:nowrap; }
.lp-note{ font-size:13.5px; opacity:.68; margin-top:12px; line-height:1.55; max-width:80ch; }

/* ---------- Matthew ---------- */
.lp-matt{ display:grid; grid-template-columns:200px 1fr; gap:34px; align-items:center; margin-top:64px; padding:30px; border:2px solid rgba(212,160,23,.5); border-radius:14px;
  background:linear-gradient(135deg, rgba(212,160,23,.1), var(--color-surface) 55%); box-shadow:6px 6px 0 rgba(212,160,23,.2); }
.lp-matt img{ display:block; width:200px; height:200px; object-fit:cover; border-radius:50%; border:4px solid var(--color-accent); box-shadow:5px 5px 0 rgba(212,160,23,.5);
  background:radial-gradient(circle at 50% 30%, rgba(212,160,23,.5), rgba(27,29,36,.9) 75%); }
.lp-matt h2{ margin:0; font-size:clamp(24px,2.6vw,32px); line-height:1.15; }
.lp-matt p{ margin:12px 0 0; font-size:16.5px; line-height:1.7; opacity:.9; max-width:62ch; }
.lp-matt .who{ font-size:13px; letter-spacing:.1em; text-transform:uppercase; opacity:.7; margin-top:14px; }

/* ---------- FAQ ---------- */
.lp-faq{ margin-top:26px; display:grid; gap:12px; max-width:900px; }
.lp-faq details{ border:2px solid rgba(212,160,23,.4); border-radius:12px; background:var(--color-surface); overflow:hidden; }
.lp-faq summary{ cursor:pointer; list-style:none; padding:18px 54px 18px 20px; font-weight:700; font-size:17px; line-height:1.4; position:relative; min-height:44px; }
.lp-faq summary::-webkit-details-marker{ display:none; }
.lp-faq summary:after{ content:"+"; position:absolute; right:20px; top:50%; transform:translateY(-50%); font-size:26px; font-weight:400; color:var(--color-accent); line-height:1; }
.lp-faq details[open] summary:after{ content:"\2212"; }
.lp-faq summary:focus-visible{ outline:2px solid var(--color-accent); outline-offset:-2px; }
.lp-faq .a{ padding:0 20px 20px; font-size:16px; line-height:1.7; opacity:.88; max-width:75ch; }

/* ---------- booking ---------- */
.lp-book{ margin-top:64px; display:grid; grid-template-columns:.9fr 1.1fr; gap:36px; align-items:start; padding:34px; border:3px solid var(--color-accent); border-radius:14px;
  background:linear-gradient(135deg, rgba(212,160,23,.12), var(--color-surface) 60%); box-shadow:10px 10px 0 rgba(212,160,23,.28); }
.lp-book h2{ margin:0; font-size:clamp(26px,3vw,38px); line-height:1.1; }
.lp-book ul{ list-style:none; padding:0; margin:18px 0 0; display:grid; gap:11px; }
.lp-book li{ display:flex; gap:11px; font-size:16px; line-height:1.5; }
.lp-book li i{ color:var(--color-accent); font-size:21px; flex:none; }
.lp-book-box{ min-height:260px; border:2px dashed rgba(212,160,23,.55); border-radius:12px; padding:26px; display:flex; flex-direction:column; align-items:flex-start; justify-content:center; gap:14px; background:rgba(11,12,17,.45); }
.lp-book-box.live{ padding:0; border-style:solid; overflow:hidden; background:#fff; display:block; }
.lp-book-box iframe{ display:block; width:100%; height:720px; border:0; }
.lp-book-box h3{ margin:0; font-size:22px; }
.lp-book-box p{ margin:0; font-size:15.5px; line-height:1.6; opacity:.85; }

/* ---------- final CTA / guides / disclosure ---------- */
.lp-final{ position:relative; overflow:hidden; margin-top:64px; text-align:center; padding:56px 24px; border:3px solid var(--color-accent); border-radius:14px;
  background:radial-gradient(700px 320px at 50% 0%, rgba(212,160,23,.24), transparent 70%), var(--color-surface); box-shadow:10px 10px 0 rgba(212,160,23,.28); }
.lp-final h2{ margin:0 auto; font-size:clamp(28px,3.6vw,46px); line-height:1.08; max-width:20ch; }
.lp-final p{ margin:16px auto 0; font-size:18px; line-height:1.6; opacity:.88; max-width:52ch; }
.lp-final .lp-cta-row{ justify-content:center; }
.lp-guides{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; margin-top:24px; }
.lp-guides a{ display:block; text-decoration:none; padding:18px 20px; border:2px solid rgba(212,160,23,.35); border-radius:12px; background:var(--color-surface); color:var(--color-text); }
.lp-guides a:hover{ border-color:var(--color-accent); transform:translate(-2px,-2px); box-shadow:5px 5px 0 rgba(212,160,23,.3); }
.lp-guides b{ display:block; color:var(--color-accent); font-size:16px; line-height:1.35; }
.lp-guides span{ display:block; font-size:14px; opacity:.75; margin-top:6px; line-height:1.5; }
.lp-programs{ display:flex; gap:10px; flex-wrap:wrap; margin-top:18px; }
.lp-disclosure{ margin-top:48px; padding:22px 0 8px; border-top:1px solid var(--color-divider); font-size:12px; line-height:1.65; opacity:.62; max-width:110ch; }
.lp-disclosure p{ margin:0 0 8px; }

/* ---------- responsive ---------- */
@media (max-width:980px){
  .lp-hero-grid, .lp-split, .lp-book, .lp-matt{ grid-template-columns:1fr; }
  .lp-split.rev .lp-split-img, .lp-split.rev .lp-callout{ order:0; }
  .lp-g4, .lp-steps{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .lp-g3, .lp-guides{ grid-template-columns:1fr; }
  .lp-bubbles{ grid-template-columns:1fr; }
  .lp-art{ max-width:340px; margin-top:8px; }
  .lp-matt{ justify-items:start; }
  .lp-hero:before{ background:linear-gradient(180deg, rgba(11,12,17,.9), rgba(11,12,17,.78) 60%, var(--color-bg) 100%); }
}
@media (max-width:620px){
  .lp-g2, .lp-g4, .lp-steps{ grid-template-columns:1fr; }
  .lp-hero{ padding-top:36px; padding-bottom:48px; }
  .lp-btn{ width:100%; text-align:center; justify-content:center; }
  .lp-cta-row{ gap:10px; }
  .lp-book{ padding:22px; }
  .lp-book-box iframe{ height:640px; }
  .lp-burst{ right:-6px; width:96px; height:96px; }
  .lp-burst b{ font-size:25px; }
  .lp-art figcaption{ left:-6px; }
  .lp-table td:first-child{ white-space:normal; }
}
@media (prefers-reduced-motion:reduce){
  .lp-card, .lp-guides a{ transition:none; }
  .lp-card:hover, .lp-guides a:hover{ transform:none; }
}