/* =====================================================================
   LUXE LAYER — Cap Rate Funding (2026-10-15)
   Loaded last on every page. Midnight + champagne palette, Fraunces display
   serif, Manrope text, calmer spacing, hero photography, and cross-device
   bug fixes. Page-level CSS stays untouched underneath; everything here
   wins by being later / more specific. Remove this file + the <!-- luxe -->
   tags in <head> to roll back the look.
   ===================================================================== */

/* ---------- fonts (self-hosted, latin subset) ----------
   Weight ranges are deliberately capped: page CSS asks for 800 everywhere,
   and the capped range renders those requests as an elegant ~540 serif /
   700 sans instead of a heavy black weight. */
@font-face{font-family:'Fraunces Lux';src:url(/fonts/fraunces-opsz-normal.woff2) format('woff2');font-weight:300 560;font-style:normal;font-display:swap}
@font-face{font-family:'Fraunces Lux';src:url(/fonts/fraunces-opsz-italic.woff2) format('woff2');font-weight:300 560;font-style:italic;font-display:swap}
@font-face{font-family:'Manrope Lux';src:url(/fonts/manrope-wght-normal.woff2) format('woff2');font-weight:300 700;font-style:normal;font-display:swap}

/* ---------- tokens ---------- */
html:root{
  --ink:#F4EFE6;--navy:#F4EFE6;--muted:#D9D2C4;
  --bg:#090E1A;--bg-soft:#0F1626;
  --line:rgba(212,175,110,.14);--line-strong:rgba(212,175,110,.30);
  --brass:#D4AF6E;--brass-deep:#E6CB95;
  --gold-grad:linear-gradient(135deg,#EBD3A0 0%,#D4AF6E 48%,#B8904F 100%);
  --gold-ink:#17110A;
  --approve:#5FC59A;
  --radius:10px;
  --shadow:0 30px 60px -30px rgba(0,0,0,.7);
  --serif:'Fraunces Lux',Georgia,'Times New Roman',serif;
  --sans:'Manrope Lux',system-ui,-apple-system,'Segoe UI',sans-serif;
}

/* ---------- base ---------- */
html body{
  font-family:var(--sans);background:var(--bg);
  font-size:16px;letter-spacing:.003em;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;font-feature-settings:"lnum" 1;
}
/* subtle film grain — the "print" texture that keeps flat navy from feeling digital */
html body::after{
  content:"";position:fixed;inset:0;z-index:2147483000;pointer-events:none;opacity:.05;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
::selection{background:rgba(212,175,110,.35);color:#fff}

/* ---------- type ---------- */
html body h1,html body h2,html body h3,html body .qq,html body .qhead-title{
  font-family:var(--serif);font-optical-sizing:auto;font-weight:500;letter-spacing:-.012em;
}
html body h1{line-height:1.04;letter-spacing:-.02em;text-wrap:balance}
html body h2,html body .qq{text-wrap:balance}
html body h2{line-height:1.12}
html body h3{letter-spacing:-.005em}
html body h1 em,html body h2 em{font-style:italic;font-weight:400;color:var(--brass-deep) !important;letter-spacing:-.01em}
html body .hero h1{font-size:clamp(2.35rem,4.6vw,3.7rem)}
html body .eyebrow,html body .tag,html body .qstep-label,html body .qhead-note{
  font-family:var(--sans) !important;font-weight:600;letter-spacing:.24em !important;font-size:.68rem;
}
html body .eyebrow{color:var(--brass-deep)}
html body .eyebrow::before{width:32px;background:var(--gold-grad)}
html body p{line-height:1.7}
html body .hero-sub{font-size:1.06rem;line-height:1.7;color:#E4DED2 !important}

/* ---------- buttons ---------- */
html body .btn{
  font-family:var(--sans);font-weight:700;letter-spacing:.02em;border-radius:6px;
  transition:transform .2s ease,box-shadow .2s ease,background .2s ease,border-color .2s ease,color .2s ease;
}
html body .btn-brass,html body a.btn-brass,html body .call-link,html body a.call-link{
  background:var(--gold-grad) !important;color:var(--gold-ink) !important;border:0 !important;
  box-shadow:0 1px 0 rgba(255,255,255,.35) inset,0 10px 26px -14px rgba(212,175,110,.7);
}
html body .btn-brass:hover,html body .call-link:hover{
  filter:brightness(1.06);transform:translateY(-1px);
  box-shadow:0 1px 0 rgba(255,255,255,.35) inset,0 16px 30px -14px rgba(212,175,110,.8);
}
html body .call-link svg{fill:var(--gold-ink) !important}
html body .btn-ghost{border:1px solid rgba(212,175,110,.38) !important;color:#F4EFE6 !important;background:rgba(255,255,255,.015) !important}
html body .btn-ghost:hover{border-color:var(--brass) !important;color:var(--brass-deep) !important;background:rgba(212,175,110,.06) !important}
html body .btn-navy,html body a.btn-navy{background:#141B2C !important;border:1px solid rgba(212,175,110,.28) !important;color:#F4EFE6 !important}

/* ---------- top bar + loan tabs ---------- */
html body .topbar{
  background:rgba(9,14,26,.82) !important;backdrop-filter:saturate(140%) blur(14px);-webkit-backdrop-filter:saturate(140%) blur(14px);
  border-bottom:1px solid transparent !important;
  border-image:linear-gradient(90deg,transparent,rgba(212,175,110,.35),transparent) 1 !important;
}
html body .call-link{border-radius:999px !important;letter-spacing:.03em}
html body .loan-tabs{background:#0B1120 !important;border-bottom:1px solid rgba(212,175,110,.10) !important}
html body .loan-tabs::after{background:linear-gradient(90deg,rgba(11,17,32,0),#0B1120 78%) !important}
html body .ltab{
  font-family:var(--sans) !important;font-weight:600 !important;letter-spacing:.03em;text-decoration:none !important;
  background:transparent !important;border:1px solid rgba(212,175,110,.22) !important;color:#E9E3D7 !important;
}
html body .ltab:hover{border-color:var(--brass) !important;color:var(--brass-deep) !important}
html body .ltab.active{background:var(--gold-grad) !important;border-color:transparent !important;color:var(--gold-ink) !important}
html body .ltab[href="landlord-insurance.html"]:not(.active){background:rgba(212,175,110,.07) !important;border-color:rgba(212,175,110,.45) !important;color:var(--brass-deep) !important}
html body .ltab-1003:not(.active){background:#141B2C !important;border-color:rgba(244,239,230,.35) !important;color:#F4EFE6 !important}

/* ---------- hero with photography ---------- */
html body .hero{
  background-color:var(--bg);
  background-image:
    linear-gradient(90deg,rgba(9,14,26,.96) 0%,rgba(9,14,26,.86) 34%,rgba(9,14,26,.45) 62%,rgba(9,14,26,.30) 100%),
    linear-gradient(180deg,rgba(9,14,26,.35) 0%,rgba(9,14,26,0) 22%,rgba(9,14,26,0) 72%,rgba(9,14,26,1) 100%),
    var(--hero-img,none);
  background-size:cover;background-position:center 40%;background-repeat:no-repeat;
  border-bottom:1px solid rgba(212,175,110,.12) !important;
}
html body .hero::before{
  background:radial-gradient(900px 480px at 85% -10%,rgba(212,175,110,.10),transparent 60%) !important;
}
html body .res-hero{
  background-image:
    linear-gradient(180deg,rgba(9,14,26,.80) 0%,rgba(9,14,26,.66) 55%,rgba(9,14,26,1) 100%),
    var(--hero-img,none);
}
@media (max-width:760px){
  html body .hero{
    background-image:
      linear-gradient(180deg,rgba(9,14,26,.70) 0%,rgba(9,14,26,.86) 45%,rgba(9,14,26,1) 100%),
      var(--hero-img-m,var(--hero-img,none));
    background-size:100% auto;background-position:center top;
  }
}
html body .hero-points li::before{background:transparent !important;border:1px solid rgba(212,175,110,.55);color:var(--brass-deep) !important;border-radius:50%}
html body .trust-chip{font-family:var(--sans) !important;letter-spacing:.06em}

/* ---------- qualifier card ---------- */
html body .qcard{
  background:linear-gradient(180deg,rgba(18,26,44,.94),rgba(12,18,32,.97)) !important;
  border:1px solid rgba(212,175,110,.22) !important;border-radius:14px !important;
  box-shadow:0 40px 80px -40px rgba(0,0,0,.85),0 0 0 1px rgba(255,255,255,.02) inset !important;
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
}
html body .qhead{background:transparent !important;border-bottom:1px solid rgba(212,175,110,.14) !important}
html body .qhead-title{font-size:1.2rem !important;letter-spacing:-.005em}
html body .meter{background:rgba(255,255,255,.07) !important;height:3px !important}
html body .meter-fill{background:var(--gold-grad) !important}
html body .qq{font-size:1.45rem;line-height:1.2;font-weight:500 !important}
html body .opt{
  background:rgba(255,255,255,.018) !important;border:1px solid rgba(212,175,110,.20) !important;border-radius:8px !important;
}
html body .opt:hover{border-color:rgba(212,175,110,.7) !important;background:rgba(212,175,110,.05) !important;box-shadow:none !important}
html body .opt.active{border-color:var(--brass) !important;background:rgba(212,175,110,.10) !important}
html body .opt-title{font-weight:600 !important;letter-spacing:.01em}
html body .opt-desc,html body .opt-sub{color:#CFC8BA !important}
html body .field input,html body .field select{border-radius:6px !important;border:1px solid rgba(212,175,110,.25) !important;background:#0B1120 !important}
html body .field input:focus,html body .field select:focus{border-color:var(--brass) !important;box-shadow:0 0 0 3px rgba(212,175,110,.18) !important;outline:none}
html body .qfoot{background:transparent !important;border-top:1px solid rgba(212,175,110,.12) !important;flex-wrap:wrap;gap:.4rem 1rem;align-items:center}
html body .qfoot .lock{display:block;line-height:1.5;font-family:var(--sans) !important}
html body .qfoot .lock svg{display:inline-block;vertical-align:-1px;margin-right:.3rem}
html body .qfoot a[href^="tel:"]{white-space:nowrap}
html body .qtrust{background:transparent !important;border-color:rgba(212,175,110,.12) !important}

/* ---------- cards & sections ---------- */
html body .path-card,html body .calc-card,html body .prog,html body .step,html body .rev,html body .lend-card,
html body .use,html body .ben,html body .card,html body .about-chip,html body .band-table{
  background:linear-gradient(180deg,rgba(255,255,255,.025),rgba(255,255,255,.008)) !important;
  border:1px solid rgba(212,175,110,.16) !important;border-radius:12px;
}
html body .path-card:hover,html body .prog:hover,html body .card:hover{border-color:rgba(212,175,110,.38) !important}
html body .stats{background:#0B1120 !important;border-top:1px solid rgba(212,175,110,.12);border-bottom:1px solid rgba(212,175,110,.12)}
html body .stat .num{font-family:var(--serif) !important;font-weight:500 !important;font-size:1.9rem !important;background:var(--gold-grad);-webkit-background-clip:text;background-clip:text;color:transparent !important}
html body .stat .lbl{letter-spacing:.16em !important;font-size:.66rem !important;color:#BDB6A8 !important}
html body .final{background:radial-gradient(800px 300px at 50% 0%,rgba(212,175,110,.10),transparent 70%),#0B1120 !important;border-top:1px solid rgba(212,175,110,.14)}
html body .sec-head h2,html body section > .wrap > h2{font-size:clamp(1.85rem,3.4vw,2.7rem)}
html body .sec-head{margin-bottom:2.8rem}
html body .sec-head p{color:#DCD5C8 !important;font-size:1.04rem}
html body .faq details{border-color:rgba(212,175,110,.16) !important;border-radius:10px}
html body .faq summary{font-family:var(--sans)}
html body table,html body td,html body th{border-color:rgba(212,175,110,.14) !important}
html body th{font-family:var(--sans) !important;letter-spacing:.12em;font-weight:600}
html body footer,html body .site-footer{background:#070B15 !important;border-top:1px solid rgba(212,175,110,.14)}
html body .sticky-cta{background:rgba(9,14,26,.92) !important;border-top:1px solid rgba(212,175,110,.22) !important;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
html body .sticky-cta .btn{border-radius:6px}
html body a:not(.btn):not(.ltab):not(.call-link):not(.logo){text-decoration-thickness:1px;text-underline-offset:3px}

/* more air between sections on larger screens */
@media (min-width:900px){
  html body section{padding-top:5.4rem;padding-bottom:5.4rem}
  html body .hero-grid{padding-top:4.2rem !important;padding-bottom:4.8rem !important;gap:4rem !important}
}

/* =====================================================================
   BUG FIXES (2026-10-15 audit)
   ===================================================================== */

/* 1. Phones: html/body overflow-x:hidden turned body into a scroll container,
      which silently broke the sticky top bar (it scrolled away with the page).
      `clip` stops sideways scroll without breaking position:sticky. */
@supports (overflow:clip){
  @media (max-width:860px){html,body{overflow-x:clip !important;overflow-y:visible !important}}
}

/* 2. Tablet widths (641–1000px): four header actions + logo overflowed the
      viewport (Check My Options was cut off, page scrolled sideways). */
@media (min-width:641px) and (max-width:1000px){
  html body .topbar .top-actions{gap:.45rem !important}
  html body .topbar .top-actions .btn-sm{padding:.5rem .7rem !important;font-size:.78rem !important}
  html body .topbar .call-link{padding:.5rem .8rem !important;font-size:.85rem !important}
  html body .topbar .logo img{height:34px !important}
}
@media (min-width:641px) and (max-width:860px){
  html body .topbar .top-actions .save-top{font-size:0 !important;padding:.5rem .6rem !important}
  html body .topbar .top-actions .save-top::before{content:"Save";font-size:.78rem;font-weight:700}
}

/* 3. Phones: keep the header to logo + call + save + 1003; the rest lives in the
      sticky bottom bar (landlord-insurance was missing this and overflowed). */
@media (max-width:640px){
  html body .topbar .top-actions .btn:not(.save-top):not(.app-top){display:none !important}
  html body .topbar-in{gap:.5rem}
  html body .topbar .logo{flex-shrink:1;min-width:0}
}

/* 4. 360px phones: path cards (HEA / reverse "doors") were 28px wider than the screen. */
html body .path-card{min-width:0;overflow-wrap:anywhere}
html body .path-grid,html body .prog-grid,html body .rev-grid{min-width:0}
html body .path-grid > *,html body .prog-grid > *{min-width:0}

/* 5. About / resource pages: portrait photo sat flush-left with a dead gap on phones. */
@media (max-width:760px){
  html body .about-grid img{margin-left:auto !important;margin-right:auto !important}
}

/* 6. Chat bubble was covering funnel answer text on phones — smaller and tucked in. */
@media (max-width:640px){
  html body #ccBtn{width:50px !important;height:50px !important;right:12px !important}
}
html body #ccBtn{background:#141B2C !important;border:1px solid rgba(212,175,110,.45) !important;box-shadow:0 14px 30px -12px rgba(0,0,0,.7) !important}

/* reduced motion */
@media (prefers-reduced-motion:reduce){html body .btn,html body .opt{transition:none !important}}

/* wordmark: tracked sans caps (serif caps read as a different brand) */
html body .logo-word{font-family:var(--sans) !important;font-weight:700 !important;letter-spacing:.14em !important}
/* hyphenated tokens in headings (W-2, 1-4 units) never split across lines */
.nw{white-space:nowrap}
/* eyebrow: tighter tracking so it fits one line more often */
@media (max-width:1200px){html body .eyebrow{letter-spacing:.18em !important}}

/* headshots on dark: hairline champagne frame */
html body .about-grid img,html body .qtrust img{box-shadow:0 0 0 1px rgba(212,175,110,.35),0 24px 50px -24px rgba(0,0,0,.8)}
/* text on the photo side keeps a soft shadow for legibility */
html body .hero h1,html body .hero .hero-sub,html body .res-hero p{text-shadow:0 1px 2px rgba(5,8,15,.55)}

/* phones: call pill collapses to its icon everywhere (landlord page was missing this) */
@media (max-width:640px){
  html body .topbar .call-link{font-size:0 !important;gap:0 !important;padding:.5rem .7rem !important}
  html body .topbar .call-link svg{width:18px;height:18px}
}
/* two-column fact tables (licensing, quick facts) don't need the 640px scroll width */
html body .tbl:not(:has(td:nth-child(3))):not(:has(th:nth-child(3))){min-width:0}
html body .tbl td{overflow-wrap:break-word}
html body .tbl:not(:has(td:nth-child(3))) td{overflow-wrap:anywhere}
html body .tbl th{background:#0C1321 !important;font-family:var(--sans) !important;letter-spacing:.08em}
html body .tbl-wrap{border-color:rgba(212,175,110,.18) !important}
@media (max-width:640px){
  html body .topbar .btn{letter-spacing:0 !important}
  html body .topbar .logo-word{letter-spacing:.1em !important}
}

/* 7. Card bullet lists: li was display:flex, so a bold lead-in and its sentence
      became two side-by-side columns ("Proper / ty:" split mid-word on phones).
      Flow them as normal text with the arrow hung in the margin. */
html body .path-card li,html body .pledge li{display:block !important;position:relative;padding-left:1.45rem;line-height:1.55}
html body .path-card li::before,html body .pledge li::before{position:absolute;left:0;top:0}

/* 8. Hero checklists on guide/product pages: same two-column flex split as #7
      (bold lead-in in one column, sentence in another, links squeezed to one word
      per line). The homepage already had this fix; now every page gets it. */
html body .hero-points li{display:block !important;position:relative;padding-left:30px}
html body .hero-points li::before{position:absolute !important;left:0;top:3px}
/* phone numbers never split across lines */
html body a[href^="tel:"]{white-space:nowrap}
/* the gold "Fastest answer" strip is a full sentence — let it wrap, and match the gold */
html body div[style*="background:var(--brass)"]{background:var(--gold-grad) !important}
html body div[style*="background:var(--brass)"] > a[href^="tel:"]{white-space:normal;color:var(--gold-ink) !important}