/* ============================================================
   LARACY LENDING — site.css
   Design system ported from Concept A ("The Private Study"),
   with Concept B's annotated-statement artifact and Concept C's
   conversion armature (sticky mobile bar, de-risk stacks).
   Zero dependencies. Tokens inlined below (source: src/tokens.css).
   ============================================================ */

:root{
  --ink:#14110b;
  --ink-deep:#100d08;
  --surface:#1c1810;
  --surface-2:#251f13;
  --gold:#b9975b;
  --gold-bright:#d4b878;
  --gold-deep:#8a6f3f;
  --paper:#ece5d8;
  --paper-dim:#5a5140;
  --paper-ink:#241d10;
  --text:#f4efe6;
  --text-dim:#c6bcaa;
  --hair:rgba(185,151,91,.28);
  --hair-strong:rgba(185,151,91,.55);
  --hair-paper:rgba(138,111,63,.35);
  --red-ink:#9d4630;
  --serif:'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --caps:'Marcellus', Georgia, serif;
  --sans:'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --mono:ui-monospace, 'SFMono-Regular', Menlo, 'Courier New', monospace;
  --hdr:88px;
  --bkbar:34px;
  --hdr-total:calc(var(--hdr) + var(--bkbar));
  --wrap:1200px;
}

/* ---------- reset & base ---------- */

*{ margin:0; padding:0; box-sizing:border-box; }
img{ display:block; max-width:100%; height:auto; }
ul,ol{ list-style:none; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
table{ border-collapse:collapse; }

html{ -webkit-text-size-adjust:100%; }
@media (prefers-reduced-motion: no-preference){
  html{ scroll-behavior:smooth; }
}

body{
  background:var(--ink);
  color:var(--text);
  font-family:var(--sans);
  font-size:1rem;
  line-height:1.7;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

::selection{ background:var(--gold); color:var(--ink); }

:focus-visible{
  outline:2px solid var(--gold-bright);
  outline-offset:3px;
}

.skip-link{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--gold); color:var(--ink);
  padding:.7rem 1.2rem; font-family:var(--caps); font-size:.8rem;
  letter-spacing:.12em; text-transform:uppercase;
}
.skip-link:focus{ left:0; }

.wrap{
  width:min(var(--wrap), 100% - clamp(2rem, 6vw, 3rem));
  margin-inline:auto;
}

/* ---------- shared type ---------- */

.eyebrow{
  font-family:var(--caps);
  font-size:.76rem;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--gold);
}

.micro{
  font-size:.78rem;
  letter-spacing:.02em;
  color:rgba(198,188,170,.8);
}

.lede{
  font-size:clamp(1rem, 1.25vw, 1.13rem);
  line-height:1.75;
  color:var(--text-dim);
  max-width:60ch;
}

em{ font-style:italic; }

/* ---------- prose (education-page body copy) ---------- */

.prose > p{ color:var(--text-dim); max-width:64ch; margin-bottom:1.4em; }
.prose > p strong, .prose li strong{ color:var(--text); font-weight:500; }
.prose a:not(.btn):not(.link-quiet){
  color:var(--gold);
  border-bottom:1px solid var(--hair);
  transition:color .3s ease, border-color .3s ease;
}
.prose a:not(.btn):not(.link-quiet):hover{ color:var(--gold-bright); border-color:var(--gold-bright); }
.prose ul{ max-width:64ch; margin-bottom:1.4em; }
.prose ul > li{
  color:var(--text-dim);
  padding-left:1.4em;
  position:relative;
  margin-bottom:.55em;
}
.prose ul > li::before{
  content:'';
  position:absolute; left:.1em; top:.68em;
  width:5px; height:5px;
  background:var(--gold);
  transform:rotate(45deg);
}
.prose h3{
  font-family:var(--serif);
  font-weight:600;
  font-size:1.45rem;
  line-height:1.2;
  margin:2rem 0 .8rem;
}
.cite{
  font-size:.82rem;
  color:rgba(198,188,170,.8);
  max-width:64ch;
}
.cite a{ color:var(--gold); border-bottom:1px solid var(--hair); }
.cite a:hover{ color:var(--gold-bright); border-color:var(--gold-bright); }

/* ---------- buttons & links ---------- */

.btn{
  display:inline-block;
  font-family:var(--caps);
  font-size:.8rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  padding:1.05em 2.1em;
  border:1px solid transparent;
  transition:background-color .35s ease, color .35s ease, border-color .35s ease;
  text-align:center;
}
.btn-gold{
  background:var(--gold);
  color:var(--ink);
  border-color:var(--gold);
}
.btn-gold:hover{ background:var(--gold-bright); border-color:var(--gold-bright); }
.btn-ghost{
  background:transparent;
  color:var(--gold);
  border-color:var(--hair-strong);
}
.btn-ghost:hover{ color:var(--gold-bright); border-color:var(--gold-bright); }
.btn-ink{
  background:var(--paper-ink);
  color:var(--paper);
  border-color:var(--paper-ink);
}
.btn-ink:hover{ background:#3d3320; border-color:#3d3320; }
.btn-sm{ padding:.8em 1.5em; font-size:.72rem; }

.link-quiet{
  font-family:var(--caps);
  font-size:.8rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--gold);
  border-bottom:1px solid var(--hair);
  padding-bottom:.35em;
  transition:color .3s ease, border-color .3s ease;
}
.link-quiet:hover{ color:var(--gold-bright); border-color:var(--gold-bright); }

.call-line{
  font-size:.92rem;
  color:var(--text-dim);
}
.call-line a{
  color:var(--gold);
  border-bottom:1px solid var(--hair);
  transition:color .3s ease, border-color .3s ease;
}
.call-line a:hover{ color:var(--gold-bright); border-color:var(--gold-bright); }

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

.site-head{
  position:sticky; top:0; z-index:100;
  background:rgba(20,17,11,.82);
  -webkit-backdrop-filter:blur(14px);
  backdrop-filter:blur(14px);
  border-bottom:1px solid transparent;
  transition:border-color .4s ease, background-color .4s ease;
}
.site-head.scrolled{
  border-bottom-color:var(--hair);
  background:rgba(20,17,11,.94);
}
.head-in{
  height:var(--hdr);
  display:flex;
  align-items:center;
  gap:2rem;
}
.brand{
  display:flex;
  align-items:center;
  gap:.9rem;
  flex-shrink:0;
}
.brand svg{ width:38px; height:38px; }
.brand-mark{ width:112px; height:44px; display:block; flex-shrink:0; }
.brand-text{
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:.3rem;
}
.brand-name{
  font-family:var(--caps);
  font-size:1.02rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--text);
  white-space:nowrap;
}
/* ---------------------------------------------- brokerage identity band
   Evolv compliance requires the brokerage relationship to be unmistakable in
   the header, not only in the footer. The band sits inside the sticky header
   so it never scrolls away. Styled in the site's own vocabulary — ink-deep
   ground, gold hairline, caps tracking — so it reads as part of the design
   rather than as a legal strip bolted on top. */
.brokerage-bar{
  background:var(--ink-deep);
  border-bottom:1px solid rgba(185,151,91,.22);
}
.brokerage-in{
  min-height:var(--bkbar);
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  gap:.15rem .8rem;
  padding:.3rem 0;
}
.bk-unit{ display:inline-flex; align-items:center; gap:.45rem; }
.bk-label{
  font-family:var(--caps);
  font-size:.57rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--text-dim);
}
.bk-evolv{ display:block; width:56px; height:auto; }
.bk-dlc{
  font-family:var(--caps);
  font-size:.62rem;
  letter-spacing:.17em;
  text-transform:uppercase;
  color:var(--text);
}
.bk-lic{
  font-family:var(--sans);
  font-size:.63rem;
  letter-spacing:.03em;
  color:var(--text-dim);
}
.bk-sep{
  width:3px; height:3px; border-radius:50%;
  background:var(--gold);
  opacity:.55;
  flex-shrink:0;
}
.head-nav{
  display:flex;
  gap:1.4rem;
  margin-left:auto;
}
.head-nav a{
  font-family:var(--caps);
  font-size:.78rem;
  letter-spacing:.15em;
  text-transform:uppercase;
  color:var(--text-dim);
  padding:.4em 0;
  border-bottom:1px solid transparent;
  transition:color .3s ease, border-color .3s ease;
}
.head-nav a:hover{ color:var(--gold-bright); border-bottom-color:var(--hair-strong); }
.head-actions{
  display:flex;
  align-items:center;
  gap:1.2rem;
  flex-shrink:0;
}
.site-head--stripped .head-actions{ margin-left:auto; }
.head-phone{
  font-family:var(--caps);
  font-size:.84rem;
  letter-spacing:.08em;
  color:var(--gold);
  transition:color .3s ease;
  white-space:nowrap;
}
.head-phone:hover{ color:var(--gold-bright); }

.nav-toggle{
  display:none;
  width:44px; height:44px;
  position:relative;
  margin-right:-8px;
}
.nav-toggle span{
  position:absolute; left:11px; right:11px;
  height:1px; background:var(--gold);
  transition:transform .35s ease, opacity .35s ease;
}
.nav-toggle span:nth-child(1){ top:18px; }
.nav-toggle span:nth-child(2){ top:26px; }
.nav-toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(4px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2){ transform:translateY(-4px) rotate(-45deg); }

/* mobile menu */
.mnav{
  position:fixed; inset:0; z-index:99;
  background:var(--ink-deep);
  display:flex; flex-direction:column;
  padding:calc(var(--hdr-total) + 2.5rem) clamp(1.4rem, 6vw, 3rem) 2.5rem;
  opacity:0; visibility:hidden;
  transition:opacity .4s ease, visibility 0s .4s;
  overflow-y:auto;
}
.mnav.open{ opacity:1; visibility:visible; transition:opacity .4s ease; }
.mnav nav{ display:flex; flex-direction:column; }
.mnav nav a{
  font-family:var(--serif);
  font-weight:500;
  font-size:2.1rem;
  line-height:1;
  color:var(--text);
  padding:1.1rem 0;
  border-bottom:1px solid var(--hair);
  display:flex; align-items:baseline; justify-content:space-between;
  transition:color .3s ease;
}
.mnav nav a:hover{ color:var(--gold-bright); }
.mnav nav a small{
  font-family:var(--serif);
  font-style:italic;
  font-size:1.1rem;
  color:var(--gold);
}
.mnav-foot{ margin-top:auto; display:flex; flex-direction:column; gap:1.2rem; padding-top:2.5rem; }
.mnav-foot .btn{ width:100%; }
.mnav-phone{
  font-family:var(--serif);
  font-size:1.5rem;
  color:var(--gold);
  text-align:center;
}
body.nav-open{ overflow:hidden; }

/* ---------- breadcrumb trail ---------- */

.crumbs{
  padding:1.1rem 0 0;
}
.crumbs ol{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:.35em .7em;
  font-family:var(--caps);
  font-size:.68rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--text-dim);
}
.crumbs li{ display:flex; align-items:baseline; gap:.7em; }
.crumbs li + li::before{
  content:'\00b7';
  color:var(--hair-strong);
}
.crumbs a{
  color:var(--gold);
  border-bottom:1px solid transparent;
  transition:color .3s ease, border-color .3s ease;
}
.crumbs a:hover{ color:var(--gold-bright); border-color:var(--hair-strong); }
.crumbs [aria-current="page"]{ color:var(--text-dim); }

/* ---------- hero (home) ---------- */

.hero{
  position:relative;
  min-height:calc(100svh - var(--hdr-total));
  display:flex;
  align-items:flex-end;
  padding:clamp(3rem, 7vh, 5.5rem) 0 clamp(2.8rem, 5vh, 4.5rem);
  overflow:hidden;
}
.hero-media{
  position:absolute;
  top:0; right:0; bottom:0;
  width:min(46vw, 660px);
  z-index:0;
}
.hero-media img{
  width:100%; height:100%;
  object-fit:cover;
  filter:sepia(.24) saturate(.85) contrast(1.02) brightness(.88);
}
.hero-scrim{
  position:absolute; inset:0;
  background:
    linear-gradient(90deg, var(--ink) 0%, rgba(20,17,11,.8) 40%, rgba(20,17,11,.24) 80%, rgba(20,17,11,.42) 100%),
    linear-gradient(0deg, var(--ink) 4%, rgba(20,17,11,0) 46%),
    linear-gradient(180deg, rgba(20,17,11,.75) 0%, rgba(20,17,11,0) 30%);
}
.hero-in{
  position:relative; z-index:1;
  width:100%;
}
.hero-eyebrow{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:.9em;
  font-family:var(--caps);
  font-size:.74rem;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--gold);
  margin-bottom:clamp(1.6rem, 3.5vh, 2.8rem);
}
.hero-eyebrow::before{
  content:'';
  width:3.2rem; height:1px;
  background:var(--gold);
  flex-shrink:0;
}
.hero-eyebrow .sep{ color:var(--hair-strong); }

.hero-h1{
  font-family:var(--serif);
  font-weight:500;
  font-size:clamp(2.5rem, 8.8vw + .6rem, 8.4rem);
  line-height:.98;
  letter-spacing:-.012em;
  color:var(--text);
  margin-bottom:clamp(2.2rem, 5vh, 3.6rem);
  text-shadow:0 2px 30px rgba(16,13,8,.45);
}
.hline{
  display:block;
  overflow:hidden;
  padding-bottom:.11em;
  margin-bottom:-.11em;
}
.hline > span{ display:block; }
.hero-h1 em{
  font-weight:500;
  color:var(--text);
  position:relative;
  padding-bottom:.04em;
}
.hero-h1 em::after{
  content:'';
  position:absolute;
  left:.02em; right:.06em; bottom:-.015em;
  height:1px;
  background:var(--gold);
}

.hero-low{
  display:grid;
  grid-template-columns:minmax(0, 56ch) auto;
  gap:2.5rem clamp(2.5rem, 6vw, 6rem);
  align-items:end;
  margin-bottom:clamp(2rem, 4vh, 3rem);
}
.hero-lede{
  font-size:clamp(1rem, 1.25vw, 1.13rem);
  line-height:1.75;
  color:var(--text-dim);
}
.hero-cta{
  display:flex;
  flex-direction:column;
  gap:1rem;
  align-items:flex-start;
}
.hero-cta-row{
  display:flex;
  flex-wrap:wrap;
  gap:1rem;
}

.chips{
  display:flex;
  flex-wrap:wrap;
  gap:.6rem;
  margin-bottom:1.4rem;
}
.chips li{
  font-family:var(--caps);
  font-size:.66rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--text-dim);
  border:1px solid var(--hair);
  padding:.55em 1em;
  white-space:nowrap;
}

/* ---------- interior page head ---------- */

.page-head{
  padding:clamp(2.4rem, 5vw, 4rem) 0 0;
}
.page-head .eyebrow{
  display:flex;
  align-items:center;
  gap:.9em;
  margin-bottom:1.6rem;
}
.page-head .eyebrow::before{
  content:'';
  width:3.2rem; height:1px;
  background:var(--gold);
  flex-shrink:0;
}
.page-h1{
  font-family:var(--serif);
  font-weight:500;
  font-size:clamp(2.4rem, 5.4vw, 4.6rem);
  line-height:1.04;
  letter-spacing:-.01em;
  max-width:18em;
  margin-bottom:1.6rem;
}
.page-head .lede{ margin-bottom:.6rem; }

/* ---------- chapters ---------- */

.chapter{
  padding:clamp(4.5rem, 9vw, 8rem) 0;
  scroll-margin-top:calc(var(--hdr-total) + 8px);
}
.chapter--tight{ padding:clamp(3rem, 6vw, 5rem) 0; }
.chapter--surface{ background:var(--surface); }
.chapter--paper{
  background:var(--paper);
  color:var(--paper-ink);
}

.chap-head{
  display:flex;
  align-items:baseline;
  gap:1.4rem;
  margin-bottom:clamp(2.6rem, 5.5vw, 4.5rem);
}
.chap-head .eyebrow{ flex-shrink:0; }
.chap-rule{
  flex:1;
  height:1px;
  background:var(--hair);
  align-self:center;
}
.chap-num{
  font-family:var(--serif);
  font-style:italic;
  font-weight:500;
  font-size:1.5rem;
  color:var(--gold-bright);
  flex-shrink:0;
  line-height:1;
}
.chapter--paper .eyebrow{ color:var(--gold-deep); }
.chapter--paper .chap-rule{ background:var(--hair-paper); }
.chapter--paper .chap-num{ color:var(--gold-deep); }

.chap-h2{
  font-family:var(--serif);
  font-weight:500;
  font-size:clamp(2rem, 4.4vw, 3.5rem);
  line-height:1.1;
  letter-spacing:-.008em;
}

/* ---------- the difference (diff grid + pullquote) ---------- */

.diff-grid{
  display:grid;
  grid-template-columns:minmax(0, 5fr) minmax(0, 6fr);
  gap:2.5rem clamp(3rem, 7vw, 7rem);
  margin-bottom:clamp(3.5rem, 7vw, 6rem);
}
.diff-copy p{
  color:var(--text-dim);
  margin-bottom:1.4em;
  max-width:58ch;
}
.diff-copy p:last-of-type{ margin-bottom:2em; }
.diff-copy strong{
  color:var(--text);
  font-weight:500;
}

.pullquote{
  border-top:1px solid var(--hair);
  border-bottom:1px solid var(--hair);
  padding:clamp(2.4rem, 5vw, 4rem) 0;
}
.pullquote blockquote{
  font-family:var(--serif);
  font-style:italic;
  font-weight:500;
  font-size:clamp(1.7rem, 3.8vw, 3.1rem);
  line-height:1.22;
  color:var(--text);
  max-width:26em;
}

/* ---------- three levers (weight increased per contest notes) ---------- */

.levers-intro{
  max-width:60ch;
  color:var(--text-dim);
  font-size:clamp(1rem, 1.2vw, 1.1rem);
  margin-bottom:clamp(3.2rem, 6.5vw, 5.5rem);
}
.levers-grid{
  position:relative;
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:0 clamp(2rem, 4.5vw, 4rem);
}
.levers-grid::before{
  content:'';
  position:absolute;
  top:141px; left:0; right:0;
  height:1px;
  background:linear-gradient(90deg, transparent 0%, var(--hair-strong) 5%, var(--hair-strong) 95%, transparent 100%);
}
.lever-fig{
  height:142px;
  position:relative;
  margin-bottom:2.6rem;
}
.lever-svg{
  display:block;
  width:260px;
  height:142px;
  overflow:visible;
}
.lever-svg line,
.lever-svg path,
.lever-svg circle{
  fill:none;
  stroke:var(--gold);
  stroke-width:1.25;
  vector-effect:non-scaling-stroke;
}
.lever-svg .tick{ stroke:var(--hair); }
.lever-svg .wt, .lever-svg .piv{ stroke:var(--gold-bright); }
.lever-svg .pivdot{ fill:var(--gold-bright); stroke:none; }
.lever-svg .arm{
  transform-box:view-box;
  transform-origin:110px 84px;
  transition:transform .9s cubic-bezier(.3,1.15,.35,1);
}
.lv-a .arm{ transform:rotate(-14deg); }
.lv-b .arm{ transform:rotate(0deg); }
.lv-c .arm{ transform:rotate(9deg); }
.lv-a:hover .arm, .lv-a:focus-within .arm{ transform:rotate(-19deg); }
.lv-b:hover .arm, .lv-b:focus-within .arm{ transform:rotate(-4deg); }
.lv-c:hover .arm, .lv-c:focus-within .arm{ transform:rotate(13deg); }

.lever-label{
  font-family:var(--caps);
  font-size:.78rem;
  letter-spacing:.26em;
  text-transform:uppercase;
  color:var(--gold);
  display:block;
  margin-bottom:.9rem;
}
.lever h3{
  font-family:var(--serif);
  font-weight:600;
  font-size:clamp(1.9rem, 2.6vw, 2.5rem);
  line-height:1.06;
  margin-bottom:1.1rem;
}
.lever p{
  font-size:1rem;
  line-height:1.72;
  color:var(--text-dim);
  max-width:36ch;
}

.levers-close{
  margin-top:clamp(3.5rem, 7vw, 5.5rem);
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  justify-content:space-between;
  gap:2rem;
}
.levers-close p{
  font-family:var(--serif);
  font-style:italic;
  font-weight:500;
  font-size:clamp(1.3rem, 2.4vw, 1.85rem);
  line-height:1.35;
  color:var(--text);
  max-width:30em;
}

/* ---------- strategy toolbox ---------- */

.tools-intro{
  display:grid;
  grid-template-columns:minmax(0, 6fr) minmax(0, 5fr);
  gap:1.5rem clamp(3rem, 7vw, 7rem);
  align-items:end;
  margin-bottom:clamp(2.8rem, 5vw, 4rem);
}
.tools-intro p{
  color:var(--text-dim);
  max-width:52ch;
}

.tools-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:1px;
  background:var(--hair);
  border:1px solid var(--hair);
}
.tool{
  background:var(--surface);
  padding:clamp(1.5rem, 2.6vw, 2.2rem);
  display:flex;
  flex-direction:column;
  min-height:15.5rem;
  transition:background-color .4s ease;
}
.chapter--surface .tool{ background:var(--ink); }
.tool:hover{ background:var(--surface-2); }
.tool-num{
  font-family:var(--serif);
  font-style:italic;
  font-size:1rem;
  color:var(--gold);
  margin-bottom:1.6rem;
}
.tool h3{
  font-family:var(--serif);
  font-weight:600;
  font-size:1.45rem;
  line-height:1.15;
  margin-bottom:.7rem;
  transition:color .3s ease;
}
.tool:hover h3{ color:var(--gold-bright); }
.tool p{
  font-size:.88rem;
  line-height:1.65;
  color:var(--text-dim);
  margin-bottom:1.4rem;
}
.tool-go{
  margin-top:auto;
  font-family:var(--caps);
  font-size:.68rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--gold);
  display:flex;
  align-items:center;
  gap:.6em;
}
.tool-go .arr{
  display:inline-block;
  transition:transform .35s ease;
}
.tool:hover .tool-go .arr{ transform:translateX(6px); }

.tools-foot{
  margin-top:clamp(2.4rem, 4.5vw, 3.5rem);
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  justify-content:space-between;
  gap:1.5rem;
}
.tools-foot p{
  color:var(--text-dim);
  font-size:.95rem;
  max-width:44ch;
}

/* ---------- goal band ("What's your #1 goal?") ---------- */

.goalband{
  border-top:1px solid var(--hair);
  border-bottom:1px solid var(--hair);
  background:var(--surface);
  padding:clamp(2.6rem, 5vw, 4rem) 0;
}
.goalband-head{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  justify-content:space-between;
  gap:.8rem 2rem;
  margin-bottom:1.8rem;
}
.goalband h2{
  font-family:var(--serif);
  font-weight:500;
  font-size:clamp(1.6rem, 2.8vw, 2.3rem);
  line-height:1.1;
}
.goalband-head .micro{ max-width:34ch; }
.goal-chips{
  display:grid;
  grid-template-columns:repeat(6, 1fr);
  gap:.7rem;
}
.goal-chips a{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.8em;
  font-family:var(--caps);
  font-size:.72rem;
  letter-spacing:.13em;
  text-transform:uppercase;
  color:var(--text-dim);
  border:1px solid var(--hair);
  padding:1.1em 1.2em;
  transition:color .3s ease, border-color .3s ease, background-color .3s ease;
}
.goal-chips a .arr{
  color:var(--gold);
  transition:transform .35s ease;
}
.goal-chips a:hover{
  color:var(--gold-bright);
  border-color:var(--hair-strong);
  background:var(--surface-2);
}
.goal-chips a:hover .arr{ transform:translateX(4px); }

/* ---------- study / tax-lens chapter (paper + dark variants) ---------- */

.study-grid{
  display:grid;
  grid-template-columns:minmax(0, 4fr) minmax(0, 7fr);
  gap:3rem clamp(3rem, 7vw, 7rem);
  align-items:start;
}
.portrait{
  position:relative;
  border:1px solid var(--gold-deep);
  aspect-ratio:4 / 5;
  display:flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(160deg, rgba(138,111,63,.10), rgba(138,111,63,.02) 55%);
}
.portrait::before,
.portrait::after{
  content:'';
  position:absolute;
  width:14px; height:14px;
  border-color:var(--gold-deep);
  border-style:solid;
}
.portrait::before{ top:8px; left:8px; border-width:1px 0 0 1px; }
.portrait::after{ bottom:8px; right:8px; border-width:0 1px 1px 0; }
.portrait svg{ width:52%; height:auto; }

/* Portrait with a real photograph — the corner keylines stay above the image. */
.portrait--photo{ overflow:hidden; background:var(--ink-deep); }
.portrait--photo img{
  width:100%; height:100%; object-fit:cover; object-position:50% 16%; display:block;
}
.portrait--photo::before,
.portrait--photo::after{ z-index:2; }
.portrait-cap{
  margin-top:1rem;
  font-family:var(--caps);
  font-size:.7rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--paper-dim);
}
.chapter:not(.chapter--paper) .portrait-cap{ color:var(--text-dim); }

.study-copy .chap-h2{ margin-bottom:2rem; max-width:15em; }
.study-quote{
  font-family:var(--serif);
  font-style:italic;
  font-weight:500;
  font-size:clamp(1.35rem, 2.4vw, 1.8rem);
  line-height:1.35;
  border-left:1px solid var(--gold-deep);
  padding-left:1.6rem;
  margin-bottom:2rem;
  max-width:30em;
}
.chapter--paper .study-quote{ color:var(--paper-ink); }
.chapter:not(.chapter--paper) .study-quote{ color:var(--text); border-left-color:var(--gold); }
.study-copy > p{
  max-width:60ch;
  margin-bottom:1.4em;
}
.chapter--paper .study-copy > p{ color:var(--paper-dim); }
.chapter--paper .study-copy > p strong{ color:var(--paper-ink); font-weight:500; }
.chapter:not(.chapter--paper) .study-copy > p{ color:var(--text-dim); }
.chapter:not(.chapter--paper) .study-copy > p strong{ color:var(--text); font-weight:500; }
.study-honest{
  font-family:var(--serif);
  font-style:italic;
  font-size:1.25rem;
  margin:2rem 0 2.4rem;
}
.chapter--paper .study-honest{ color:var(--paper-ink); }
.chapter:not(.chapter--paper) .study-honest{ color:var(--text); }

.creds{
  border-top:1px solid var(--hair-paper);
  margin-bottom:2.4rem;
}
.creds div{
  display:grid;
  grid-template-columns:minmax(0, 2fr) minmax(0, 3fr);
  gap:1rem;
  padding:.85rem 0;
  border-bottom:1px solid var(--hair-paper);
}
.creds dt{
  font-family:var(--caps);
  font-size:.68rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--gold-deep);
  padding-top:.2em;
}
.creds dd{
  font-size:.92rem;
  color:var(--paper-ink);
}
.chapter:not(.chapter--paper) .creds{ border-top-color:var(--hair); }
.chapter:not(.chapter--paper) .creds div{ border-bottom-color:var(--hair); }
.chapter:not(.chapter--paper) .creds dt{ color:var(--gold); }
.chapter:not(.chapter--paper) .creds dd{ color:var(--text); }

/* ---------- the review steps ---------- */

.review-intro{
  display:grid;
  grid-template-columns:minmax(0, 6fr) minmax(0, 5fr);
  gap:1.5rem clamp(3rem, 7vw, 7rem);
  align-items:end;
  margin-bottom:clamp(3rem, 6vw, 5rem);
}
.review-intro p{
  color:var(--text-dim);
  max-width:48ch;
}

.steps{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  border-top:1px solid var(--hair);
}
.step{
  padding:2.2rem clamp(1.2rem, 2vw, 2rem) 1rem 0;
  border-left:1px solid var(--hair);
  padding-left:clamp(1.2rem, 2vw, 2rem);
}
.step:first-child{ border-left:0; padding-left:0; }
.step-label{
  font-family:var(--caps);
  font-size:.68rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--gold);
  display:block;
  margin-bottom:1rem;
}
.step h3{
  font-family:var(--serif);
  font-weight:600;
  font-size:1.5rem;
  line-height:1.15;
  margin-bottom:.8rem;
}
.step p{
  font-size:.9rem;
  color:var(--text-dim);
}

.review-foot{
  margin-top:clamp(3rem, 5.5vw, 4.5rem);
  display:flex;
  flex-direction:column;
  gap:1.8rem;
  align-items:flex-start;
}
.review-cta-row{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:1.6rem;
}

/* ---------- citable blocks (education pages) ---------- */

.citable{
  padding:clamp(2.2rem, 4.5vw, 3.6rem) 0 0;
  scroll-margin-top:calc(var(--hdr-total) + 8px);
}
.citable > h2{
  font-family:var(--serif);
  font-weight:500;
  font-size:clamp(1.7rem, 3.4vw, 2.7rem);
  line-height:1.12;
  letter-spacing:-.008em;
  max-width:22em;
  margin-bottom:1.3rem;
  padding-top:1.6rem;
  border-top:1px solid var(--hair);
}
.citable-lede{
  color:var(--text-dim);
  max-width:64ch;
  margin-bottom:1.4em;
}
.citable-lede strong{
  color:var(--text);
  font-weight:500;
}

/* ---------- numbered how-it-works steps ---------- */

.how-steps{
  counter-reset:how;
  max-width:66ch;
  margin:.6rem 0 1.6rem;
}
.how-steps > li{
  counter-increment:how;
  position:relative;
  padding:1.3rem 0 1.3rem 4rem;
  border-top:1px solid var(--hair);
  color:var(--text-dim);
}
.how-steps > li:last-child{ border-bottom:1px solid var(--hair); }
.how-steps > li::before{
  content:counter(how, decimal-leading-zero);
  position:absolute;
  left:0; top:1.35rem;
  font-family:var(--serif);
  font-style:italic;
  font-size:1.35rem;
  line-height:1;
  color:var(--gold);
}
.how-steps > li strong{ color:var(--text); font-weight:500; }

/* ---------- tax lens callout ---------- */

.taxlens{
  border:1px solid var(--hair-strong);
  border-left:3px solid var(--gold);
  background:var(--surface);
  padding:clamp(1.6rem, 3vw, 2.4rem);
  max-width:70ch;
  margin:2.2rem 0;
}
.taxlens .eyebrow{ display:block; margin-bottom:.9rem; }
.taxlens p{
  color:var(--text-dim);
  margin-bottom:1em;
}
.taxlens p:last-child{ margin-bottom:0; }
.taxlens p strong{ color:var(--text); font-weight:500; }
.taxlens a{ color:var(--gold); border-bottom:1px solid var(--hair); }
.taxlens a:hover{ color:var(--gold-bright); border-color:var(--gold-bright); }

/* ---------- comparison table ---------- */

.table-scroll{
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  border:1px solid var(--hair);
  margin:1.8rem 0;
}
.cmp-table{
  width:100%;
  min-width:640px;
  font-size:.9rem;
  line-height:1.55;
}
.cmp-table caption{
  text-align:left;
  font-family:var(--caps);
  font-size:.72rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--gold);
  padding:1.1rem 1.2rem .9rem;
  border-bottom:1px solid var(--hair);
}
.cmp-table th,
.cmp-table td{
  text-align:left;
  vertical-align:top;
  padding:.95rem 1.2rem;
  border-bottom:1px solid var(--hair);
  color:var(--text-dim);
}
.cmp-table tr:last-child th,
.cmp-table tr:last-child td{ border-bottom:0; }
.cmp-table thead th{
  font-family:var(--caps);
  font-weight:400;
  font-size:.72rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--text);
  background:var(--surface);
  border-bottom:1px solid var(--hair-strong);
  white-space:nowrap;
}
.cmp-table tbody th[scope="row"]{
  font-family:var(--serif);
  font-weight:600;
  font-size:1.02rem;
  color:var(--text);
  white-space:nowrap;
}
.table-note{
  font-size:.8rem;
  color:rgba(198,188,170,.8);
  margin:-1rem 0 1.8rem;
  max-width:70ch;
}

/* ---------- worked example ---------- */

.example{
  border:1px solid var(--hair);
  background:var(--surface);
  padding:clamp(1.6rem, 3vw, 2.4rem);
  max-width:70ch;
  margin:2.2rem 0;
}
.example .eyebrow{ display:block; margin-bottom:1.1rem; }
.example ol{
  counter-reset:ex;
  margin-bottom:1.2rem;
}
.example ol > li{
  counter-increment:ex;
  position:relative;
  padding:.55rem 0 .55rem 2.6rem;
  color:var(--text-dim);
}
.example ol > li::before{
  content:counter(ex) '.';
  position:absolute; left:.4rem; top:.55rem;
  font-family:var(--serif);
  font-style:italic;
  color:var(--gold);
}
.example ol > li strong{ color:var(--text); font-weight:500; }
.example .micro{ display:block; }

/* ---------- fit / anti-fit ---------- */

.fitgrid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:2rem clamp(2rem, 5vw, 4.5rem);
  margin:1.6rem 0 .6rem;
}
.fit-col h3{
  font-family:var(--caps);
  font-weight:400;
  font-size:.78rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--gold);
  margin-bottom:1.2rem;
  padding-bottom:.8rem;
  border-bottom:1px solid var(--hair);
}
.fit-list li{
  color:var(--text-dim);
  padding:.45em 0 .45em 1.6em;
  position:relative;
}
.fit-list li::before{
  content:'';
  position:absolute; left:.1em; top:1em;
  width:5px; height:5px;
  background:var(--gold);
  transform:rotate(45deg);
}
.fit-list--anti li::before{
  background:transparent;
  border:1px solid var(--hair-strong);
}

/* ---------- pathway diagram (rental pathway chain) ---------- */

.pathway{
  display:flex;
  flex-wrap:wrap;
  align-items:stretch;
  gap:.6rem;
  margin:2rem 0;
}
.pathway li{
  display:flex;
  align-items:center;
  gap:.6rem;
}
.pathway .pw-node{
  font-family:var(--caps);
  font-size:.68rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--text);
  border:1px solid var(--hair-strong);
  background:var(--surface);
  padding:.85em 1.1em;
  text-align:center;
}
.pathway li::after{
  content:'\2192';
  color:var(--gold);
  font-size:1rem;
}
.pathway li:last-child::after{ content:''; }
.pathway li:last-child .pw-node{
  border-color:var(--gold);
  color:var(--gold-bright);
}

/* ---------- author box ---------- */

.authorbox{
  display:flex;
  gap:1.6rem;
  align-items:flex-start;
  border-top:1px solid var(--hair-strong);
  border-bottom:1px solid var(--hair);
  padding:1.8rem 0;
  margin:clamp(2.5rem, 5vw, 4rem) 0 0;
  max-width:74ch;
}
.authorbox-mark{
  flex-shrink:0;
  width:64px; height:64px;
  border:1px solid var(--gold-deep);
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:var(--serif);
  font-style:italic;
  font-size:1.5rem;
  color:var(--gold);
}
.authorbox-face{
  flex-shrink:0;
  width:64px; height:64px;
  border:1px solid var(--gold-deep);
  object-fit:cover;
  object-position:50% 12%;
  background:var(--ink-deep);
}
.authorbox-name{
  font-size:.95rem;
  color:var(--text);
  margin-bottom:.3rem;
}
.authorbox-name a{
  color:var(--gold);
  border-bottom:1px solid var(--hair);
}
.authorbox-name a:hover{ color:var(--gold-bright); border-color:var(--gold-bright); }
.authorbox-note{
  font-size:.85rem;
  color:var(--text-dim);
  margin-bottom:.5rem;
  max-width:60ch;
}
.authorbox-date{
  font-family:var(--caps);
  font-size:.66rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--gold);
}

/* ---------- warning box ---------- */

.warning-box{
  border:1px solid var(--hair-strong);
  padding:clamp(1.6rem, 3vw, 2.4rem);
  margin:clamp(2rem, 4vw, 3rem) 0 0;
  max-width:74ch;
  position:relative;
}
.warning-box::before{
  content:'';
  position:absolute;
  top:8px; left:8px; right:8px; bottom:8px;
  border:1px solid var(--hair);
  pointer-events:none;
}
.warning-box .eyebrow{ display:block; margin-bottom:1.2rem; }
.warning-box ul li{
  color:var(--text-dim);
  font-size:.92rem;
  padding:.4em 0 .4em 1.6em;
  position:relative;
}
.warning-box ul li::before{
  content:'';
  position:absolute; left:.1em; top:.95em;
  width:5px; height:5px;
  background:var(--gold);
  transform:rotate(45deg);
}

/* ---------- page disclaimer (short, links /disclaimer) ---------- */

.page-disclaimer{
  font-size:.82rem;
  line-height:1.75;
  color:rgba(198,188,170,.8);
  max-width:74ch;
  margin:1.6rem 0 0;
}
.page-disclaimer a{
  color:var(--gold);
  border-bottom:1px solid var(--hair);
}
.page-disclaimer a:hover{ color:var(--gold-bright); border-color:var(--gold-bright); }

/* ---------- de-risk stack (Concept C armature, redrawn in gold) ---------- */

.derisk{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:.5rem 1.8rem;
  margin-top:1.2rem;
}
.derisk li{
  font-family:var(--caps);
  font-size:.66rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--text-dim);
  display:flex;
  align-items:center;
  gap:.6em;
}
.derisk .dr-check{
  color:var(--gold);
  flex-shrink:0;
}
.derisk--left{ justify-content:flex-start; }
/* plain variant (no check SVGs): A's diamond tick */
.derisk--plain li::before{
  content:'';
  width:4px; height:4px;
  background:var(--gold);
  transform:rotate(45deg);
  flex-shrink:0;
}

/* ---------- CTA band (inline, mid-page) ---------- */

.cta-band{
  border:1px solid var(--hair-strong);
  background:
    radial-gradient(120% 180% at 85% 0%, rgba(185,151,91,.10), transparent 55%),
    var(--surface);
  padding:clamp(2.2rem, 4.5vw, 3.4rem);
  margin:clamp(3rem, 6vw, 4.5rem) 0 0;
}
.cta-band-in{
  display:grid;
  grid-template-columns:minmax(0, 7fr) auto;
  gap:1.8rem clamp(2rem, 5vw, 4rem);
  align-items:center;
}
.cta-band .eyebrow{ display:block; margin-bottom:1rem; }
.cta-band h2{
  font-family:var(--serif);
  font-weight:500;
  font-size:clamp(1.7rem, 3vw, 2.5rem);
  line-height:1.12;
  margin-bottom:.8rem;
  max-width:18em;
}
.cta-band-sub{
  color:var(--text-dim);
  font-size:.95rem;
  max-width:52ch;
}
.cta-band-actions{
  display:flex;
  flex-direction:column;
  gap:1rem;
  align-items:flex-start;
}
.cta-band .derisk{
  justify-content:flex-start;
  margin-top:1.8rem;
}

/* ---------- finale CTA (end of page) ---------- */

.finale{
  position:relative;
  padding:clamp(6rem, 12vw, 10rem) 0;
  overflow:hidden;
  text-align:center;
  scroll-margin-top:var(--hdr-total);
  background:
    radial-gradient(ellipse 75% 90% at 50% 110%, rgba(185,151,91,.14), transparent 60%),
    linear-gradient(180deg, var(--ink) 0%, var(--surface) 100%);
  border-top:1px solid var(--hair);
}
.finale-media{
  position:absolute; inset:0; z-index:0;
}
.finale-media img{
  width:100%; height:100%;
  object-fit:cover;
  filter:sepia(.3) saturate(.8) brightness(.72);
}
.finale-scrim{
  position:absolute; inset:0;
  background:
    radial-gradient(ellipse 90% 80% at 50% 55%, rgba(20,17,11,.68) 0%, rgba(20,17,11,.94) 100%),
    linear-gradient(180deg, var(--ink) 0%, rgba(20,17,11,.35) 22%, rgba(20,17,11,.35) 78%, var(--ink) 100%);
}
.finale-in{
  position:relative; z-index:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:1.8rem;
}
.finale .eyebrow{ display:flex; align-items:center; gap:1rem; }
.finale .eyebrow::before,
.finale .eyebrow::after{
  content:'';
  width:2.6rem; height:1px;
  background:var(--gold);
}
.finale h2{
  font-family:var(--serif);
  font-weight:500;
  font-size:clamp(2.3rem, 5.6vw, 4.6rem);
  line-height:1.08;
  max-width:14em;
}
.finale h2 em{ font-weight:500; }
.finale-sub{
  color:var(--text-dim);
  max-width:52ch;
  font-size:.98rem;
}
.finale-actions{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:1.1rem;
  margin-top:.6rem;
}

/* ---------- FAQ ---------- */

.faq-grid{
  display:grid;
  grid-template-columns:minmax(0, 4fr) minmax(0, 7fr);
  gap:2.5rem clamp(3rem, 7vw, 7rem);
  align-items:start;
}
.faq-side p{
  color:var(--text-dim);
  max-width:30ch;
  margin:1.4rem 0 2rem;
}
.faq-list{
  border-top:1px solid var(--hair);
}
.faq{
  border-bottom:1px solid var(--hair);
}
.faq summary{
  list-style:none;
  cursor:pointer;
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:2rem;
  padding:1.6rem 0;
  font-family:var(--serif);
  font-weight:600;
  font-size:clamp(1.2rem, 2vw, 1.45rem);
  line-height:1.25;
  transition:color .3s ease;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary:hover{ color:var(--gold-bright); }
.faq-x{
  position:relative;
  width:14px; height:14px;
  flex-shrink:0;
  align-self:center;
}
.faq-x::before,
.faq-x::after{
  content:'';
  position:absolute;
  background:var(--gold);
  transition:transform .35s ease;
}
.faq-x::before{ left:0; right:0; top:6.5px; height:1px; }
.faq-x::after{ top:0; bottom:0; left:6.5px; width:1px; }
.faq[open] .faq-x::after{ transform:scaleY(0); }
.faq-a{
  padding:0 0 1.8rem;
  max-width:58ch;
  overflow:hidden;
}
.faq-a p{
  color:var(--text-dim);
  font-size:.95rem;
}

/* ============================================================
   THE STATEMENT (Concept B transplant, redrawn in A's gold ink)
   A paper document lying on the dark desk. Watermark contained.
   No interest-rate line — Ontario advertising rules.
   ============================================================ */

.stmt-grid{
  display:grid;
  grid-template-columns:minmax(0, 6fr) minmax(0, 5fr);
  gap:3.5rem clamp(3rem, 6vw, 6rem);
  align-items:start;
}
.statement-wrap{ position:relative; max-width:560px; }
.statement{
  position:relative;
  background:var(--paper);
  color:var(--paper-ink);
  border:1px solid rgba(138,111,63,.4);
  padding:clamp(20px, 3vw, 34px) clamp(18px, 2.6vw, 32px) clamp(18px, 2.4vw, 26px);
  box-shadow:0 1px 0 rgba(0,0,0,.2), 0 26px 60px rgba(0,0,0,.5);
  transform:rotate(-.5deg);
  overflow:hidden; /* keeps the SPECIMEN watermark contained (fixes Concept B's overflow bug) */
}
.stmt-watermark{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--mono);
  font-weight:600;
  font-size:clamp(34px, 4.4vw, 50px);
  line-height:1;
  letter-spacing:.32em; text-indent:.32em;
  color:rgba(36,29,16,.06);
  transform:rotate(-16deg);
  pointer-events:none; user-select:none;
}
.stmt-head{
  display:flex; justify-content:space-between; gap:18px; align-items:flex-start;
  border-bottom:1px solid var(--paper-ink);
  padding-bottom:12px; margin-bottom:12px;
  position:relative; z-index:1;
}
.stmt-title{
  font-family:var(--mono); font-weight:600;
  font-size:13px; line-height:1.35;
  letter-spacing:.12em; text-transform:uppercase;
}
.stmt-sub{ font-family:var(--mono); font-size:10.5px; line-height:1.6; color:var(--paper-dim); }
.stmt-meta{ text-align:right; }
.stmt-meta p{ font-family:var(--mono); font-size:9.5px; line-height:1.7; letter-spacing:.08em; color:var(--paper-dim); white-space:nowrap; }
.stmt-prop{
  font-family:var(--mono); font-size:10.5px; line-height:1.6; color:var(--paper-dim);
  border-bottom:1px solid var(--hair-paper);
  padding-bottom:10px; margin-bottom:6px;
  position:relative; z-index:1;
}
.stmt-rows{ position:relative; z-index:1; }
.stmt-row{
  display:flex; align-items:baseline; gap:8px;
  padding:7.5px 0; position:relative;
}
.stmt-row .lbl{ font-family:var(--mono); font-size:12px; line-height:1.45; color:var(--paper-dim); flex:0 1 auto; }
.stmt-row.sub .lbl{ padding-left:16px; }
.stmt-row .dots{ flex:1 1 12px; min-width:12px; border-bottom:1px dotted var(--hair-paper); transform:translateY(-3px); }
.stmt-row .val{ font-family:var(--mono); font-weight:500; font-size:13px; line-height:1.4; white-space:nowrap; font-variant-numeric:tabular-nums; }
.stmt-row.total{ border-top:1px solid var(--hair-paper); border-bottom:3px double rgba(36,29,16,.5); padding:9px 0; }
.stmt-row.total .lbl{ color:var(--paper-ink); font-weight:500; }
.stmt-row.total .val{ font-weight:600; }
.stmt-fine{
  font-family:var(--mono); font-size:8.5px; line-height:1.7; letter-spacing:.04em; color:rgba(90,81,64,.75);
  border-top:1px solid var(--hair-paper);
  margin-top:14px; padding-top:10px;
  position:relative; z-index:1;
}
.stmt-caption{ margin-top:20px; }
.stmt-thesis{
  font-family:var(--serif); font-style:italic; font-weight:500;
  font-size:1.15rem; line-height:1.5;
  color:var(--text);
  max-width:44ch; margin-bottom:8px;
}
.stmt-spec{
  font-family:var(--caps);
  font-size:.62rem; line-height:1.7; letter-spacing:.16em; text-transform:uppercase;
  color:rgba(198,188,170,.8);
}

/* --- the annotations: gold ink, one red use --- */
.tgt{ position:relative; display:inline-block; }
.tgt svg{ position:absolute; pointer-events:none; overflow:visible; }
.ink-o{ left:50%; top:50%; width:calc(100% + 30px); height:calc(100% + 27px); transform:translate(-50%,-50%); }
.ink-u{ left:-7px; bottom:-8px; width:calc(100% + 14px); height:13px; }
.ink path{
  fill:none; stroke:var(--gold-deep); stroke-width:2; stroke-linecap:round;
  vector-effect:non-scaling-stroke; opacity:.92;
}
.ink.red path{ stroke:var(--red-ink); }
.stmt-note{
  font-family:var(--mono); font-weight:500;
  font-size:10.5px; line-height:1.55;
  color:#7a6234;
  padding:2px 0 6px 16px; max-width:52ch;
  transform:rotate(-.6deg); transform-origin:left center;
  position:relative; z-index:1;
}
.stmt-note.red{ color:var(--red-ink); }

@media (max-width:400px){
  .stmt-title{ font-size:11.5px; }
  .stmt-row .lbl{ font-size:11px; }
  .stmt-row .val{ font-size:11.5px; }
  .stmt-note{ font-size:10px; }
}

/* ============================================================
   FOOTER
   ============================================================ */

.site-foot{
  background:var(--ink-deep);
  border-top:1px solid var(--hair);
  padding:clamp(3.5rem, 7vw, 5.5rem) 0 2.5rem;
}
.foot-grid{
  display:grid;
  grid-template-columns:minmax(0, 4fr) minmax(0, 2.5fr) minmax(0, 3fr) minmax(0, 3fr);
  gap:3rem clamp(2rem, 4vw, 4rem);
  padding-bottom:clamp(2.5rem, 5vw, 4rem);
}
.foot-brand .brand{ margin-bottom:1.4rem; }
.foot-brand > p{
  font-family:var(--serif);
  font-style:italic;
  font-size:1.15rem;
  line-height:1.5;
  color:var(--text-dim);
  max-width:22em;
}
.foot-nap{
  margin-top:1.4rem;
  font-size:.84rem;
  color:var(--text-dim);
}
.foot-nap a{
  color:var(--text);
  border-bottom:1px solid var(--hair);
  transition:color .3s ease, border-color .3s ease;
}
.foot-nap a:hover{ color:var(--gold-bright); border-color:var(--gold-bright); }
.foot-h{
  font-family:var(--caps);
  font-size:.7rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--gold);
  margin-bottom:1.3rem;
}
.foot-list li{ margin-bottom:.65rem; }
.foot-list a{
  font-size:.88rem;
  color:var(--text-dim);
  transition:color .3s ease;
}
.foot-list a:hover{ color:var(--gold-bright); }
.foot-contact li{
  font-size:.88rem;
  color:var(--text-dim);
  margin-bottom:.65rem;
}
.foot-contact a{
  color:var(--text);
  border-bottom:1px solid var(--hair);
  transition:color .3s ease, border-color .3s ease;
}
.foot-contact a:hover{ color:var(--gold-bright); border-color:var(--gold-bright); }

.foot-legal{
  border-top:1px solid var(--hair);
  padding-top:2.2rem;
}
.foot-licence{
  font-size:.84rem;
  color:var(--text-dim);
  margin-bottom:.35rem;
}
.foot-licence a{
  color:var(--gold);
  border-bottom:1px solid var(--hair);
  transition:color .3s ease, border-color .3s ease;
}
.foot-licence a:hover{ color:var(--gold-bright); border-color:var(--gold-bright); }
.foot-trade{
  font-size:.8rem;
  line-height:1.75;
  color:rgba(198,188,170,.72);
  max-width:110ch;
  margin:.8rem 0 1rem;
}
.foot-trade strong{ color:var(--text-dim); font-weight:600; }
.foot-disclaimer{
  font-size:.78rem;
  line-height:1.75;
  color:rgba(198,188,170,.78);
  max-width:110ch;
  margin-bottom:1.8rem;
}
.foot-disclaimer a{
  color:var(--gold);
  border-bottom:1px solid var(--hair);
}
.foot-disclaimer a:hover{ color:var(--gold-bright); border-color:var(--gold-bright); }
.foot-base{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
}
.foot-base small{
  font-size:.78rem;
  color:rgba(198,188,170,.78);
}
.foot-base nav{
  display:flex;
  gap:1.8rem;
}
.foot-base nav a{
  font-size:.78rem;
  color:var(--text-dim);
  transition:color .3s ease;
}
.foot-base nav a:hover{ color:var(--gold-bright); }

/* minimal footer for stripped (funnel) layout */
.site-foot--min{
  padding:2rem 0;
  text-align:center;
}
.site-foot--min .foot-licence{ margin-bottom:.5rem; }
.site-foot--min .micro a{
  color:var(--gold);
  border-bottom:1px solid var(--hair);
}

/* ---------- mobile sticky bottom bar (Concept C armature) ---------- */

.mobile-bar{
  display:none;
  position:fixed; left:0; right:0; bottom:0; z-index:110;
  background:rgba(16,13,8,.96);
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
  border-top:1px solid var(--hair-strong);
  padding:10px 14px calc(10px + env(safe-area-inset-bottom));
  gap:10px;
}
.mobile-bar .btn{ flex:1; padding:1em .8em; font-size:.72rem; white-space:nowrap; }
/* The open nav drawer has its own call/CTA row in .mnav-foot — hide this
   bar underneath instead of stacking a second one on top (it was z-index
   110 vs the drawer's 99, so it always painted over the drawer's own
   button, not behind it). */
body.nav-open .mobile-bar{ display:none; }

/* ============================================================
   MOTION — gated behind html.js + prefers-reduced-motion
   ============================================================ */

@media (prefers-reduced-motion: no-preference){

  /* hero entrance */
  .js .hero-eyebrow{ animation:fadeUp .8s cubic-bezier(.22,.7,.2,1) .15s both; }
  .js .hline > span{
    transform:translateY(108%);
    animation:lineUp 1s cubic-bezier(.22,.7,.2,1) both;
  }
  .js .hline:nth-child(1) > span{ animation-delay:.3s; }
  .js .hline:nth-child(2) > span{ animation-delay:.42s; }
  .js .hline:nth-child(3) > span{ animation-delay:.54s; }
  .js .hero-h1 em::after{
    transform:scaleX(0);
    transform-origin:left;
    animation:ruleGrow 1s cubic-bezier(.4,0,.2,1) 1.35s both;
  }
  .js .hero-lede{ animation:fadeUp .8s cubic-bezier(.22,.7,.2,1) .85s both; }
  .js .hero-cta{ animation:fadeUp .8s cubic-bezier(.22,.7,.2,1) .95s both; }
  .js .hero .chips{ animation:fadeUp .8s cubic-bezier(.22,.7,.2,1) 1.08s both; }
  .js .hero .micro{ animation:fadeIn 1s ease 1.25s both; }
  .js .hero-media{ animation:mediaIn 1.6s cubic-bezier(.3,.6,.2,1) .35s both; }

  @keyframes fadeUp{
    from{ opacity:0; transform:translateY(24px); }
    to{ opacity:1; transform:translateY(0); }
  }
  @keyframes fadeIn{
    from{ opacity:0; }
    to{ opacity:1; }
  }
  @keyframes lineUp{
    from{ transform:translateY(108%); }
    to{ transform:translateY(0); }
  }
  @keyframes ruleGrow{
    from{ transform:scaleX(0); }
    to{ transform:scaleX(1); }
  }
  @keyframes mediaIn{
    from{ opacity:0; transform:scale(1.045); }
    to{ opacity:1; transform:scale(1); }
  }

  /* scroll reveals */
  .js .rv{
    opacity:0;
    transform:translateY(26px);
    transition:opacity .9s cubic-bezier(.22,.7,.2,1) var(--d, 0s),
               transform .9s cubic-bezier(.22,.7,.2,1) var(--d, 0s);
  }
  .js .rv.in{
    opacity:1;
    transform:translateY(0);
  }

  /* levers reveal without vertical drift, so stations never cross the rail;
     toolbox cards reveal in place, so the lattice never shows through */
  .js .lever.rv,
  .js .tool.rv{ transform:none; }

  /* the shared rail draws first */
  .js .levers-scope .levers-grid::before{
    transform:scaleX(0);
    transform-origin:left;
    transition:transform 1.4s cubic-bezier(.4,0,.2,1) .05s;
  }
  .js .levers-scope.in .levers-grid::before{ transform:scaleX(1); }

  /* lever instrument draws itself */
  .js .levers-scope .lever-svg line,
  .js .levers-scope .lever-svg path,
  .js .levers-scope .lever-svg circle{
    stroke-dasharray:1;
    stroke-dashoffset:1;
    transition:stroke-dashoffset 1.3s ease var(--ld, 0s);
  }
  .js .levers-scope .lever-svg .pivdot{
    opacity:0;
    transition:opacity .6s ease calc(var(--ld, 0s) + 1.1s);
  }
  .js .levers-scope.in .lever-svg line,
  .js .levers-scope.in .lever-svg path,
  .js .levers-scope.in .lever-svg circle{
    stroke-dashoffset:0;
  }
  .js .levers-scope.in .lever-svg .pivdot{ opacity:1; }

  /* the statement's annotations draw once the document is seen */
  .js .statement-scope .ink path{
    stroke-dasharray:1;
    stroke-dashoffset:1;
    transition:stroke-dashoffset .8s cubic-bezier(.55,0,.35,1) var(--md, 0s);
  }
  .js .statement-scope.in .ink path{ stroke-dashoffset:0; }
  .js .statement-scope .stmt-note{
    opacity:0;
    transform:translateY(5px) rotate(-.6deg);
    transition:opacity .55s ease var(--md, 0s), transform .55s ease var(--md, 0s);
  }
  .js .statement-scope.in .stmt-note{
    opacity:1;
    transform:rotate(-.6deg);
  }
}

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation:none !important;
    transition:none !important;
  }
  html{ scroll-behavior:auto; }
  .statement{ transform:none; }
  .stmt-note{ transform:none; }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 1300px){
  .head-nav{ display:none; }
  .head-actions{ margin-left:auto; }
  .nav-toggle{ display:block; }
  .goal-chips{ grid-template-columns:repeat(3, 1fr); }
}

@media (max-width: 920px){
  .mobile-bar{ display:flex; }
  body.has-mbar{ padding-bottom:74px; }
  body.has-mbar .site-foot{ padding-bottom:3rem; }
}

@media (max-width: 900px){
  .hero{
    align-items:flex-start;
    min-height:0;
  }
  .hero-media{
    position:relative;
    width:100%;
    height:min(52vw, 320px);
    order:2;
    margin-top:3rem;
  }
  .hero-scrim{
    background:
      linear-gradient(180deg, var(--ink) 0%, rgba(20,17,11,.25) 45%, rgba(20,17,11,.55) 100%);
  }
  .hero .wrap{ display:flex; flex-direction:column; }
  .hero-in{ order:1; }
  .hero-low{ grid-template-columns:1fr; }
  .diff-grid,
  .tools-intro,
  .study-grid,
  .stmt-grid,
  .review-intro,
  .faq-grid{ grid-template-columns:1fr; }
  .statement-wrap{ margin-inline:0; }
  .tools-grid{ grid-template-columns:repeat(2, 1fr); }
  .tool{ min-height:0; }
  .steps{
    grid-template-columns:1fr;
    border-top:0;
  }
  .step{
    border-left:0;
    padding-left:0;
    border-top:1px solid var(--hair);
    padding-top:1.8rem;
    padding-bottom:1.8rem;
  }
  .step:first-child{ border-top:1px solid var(--hair); }
  .portrait{ max-width:340px; }
  .foot-grid{ grid-template-columns:repeat(2, 1fr); }
  .cta-band-in{ grid-template-columns:1fr; align-items:start; }

  /* levers stack: each station carries its own rail segment */
  .levers-grid{ grid-template-columns:1fr; gap:0; }
  .levers-grid::before{ display:none; }
  .lever{
    padding-top:1.6rem;
    padding-bottom:2.6rem;
  }
  .lever:last-child{ padding-bottom:0; }
  .lever-fig{
    height:auto;
    width:260px;
    border-bottom:1px solid var(--hair-strong);
  }
  .lever-svg{ width:240px; height:131px; }
  .fitgrid{ grid-template-columns:1fr; }
}

@media (max-width: 640px){
  :root{ --hdr:76px; --bkbar:44px; }
  .brand{ gap:.65rem; }
  .brand svg{ width:34px; height:34px; }
  .brand-mark{ width:92px; height:36px; }
  .brand-name{ font-size:.86rem; letter-spacing:.1em; }
  .powered-by-label{ font-size:.54rem; }
  .powered-by-logo{ width:54px; }
  /* Phone + CTA drop from the top bar on mobile — the sticky bottom bar
     and the nav drawer both already offer Call / Start My Review, so
     keeping them here too would force the brand lockup to compete for
     room or hide, and the lockup (with Evolv named on every screen
     size) matters more than a redundant third copy of these buttons.
     Evolv now sits in the brokerage band above, visible at every width. */
  .site-head:not(.site-head--stripped) .head-actions .head-phone,
  .site-head:not(.site-head--stripped) .head-actions .btn-sm{ display:none; }

  /* The band wraps to two lines on a phone. Dots between groups would then
     float at the start of a line, so they go and the gap carries the
     separation instead. */
  .brokerage-in{ gap:.12rem .6rem; padding:.34rem 0; }
  .brokerage-in .bk-sep{ display:none; }
  .bk-label{ font-size:.52rem; letter-spacing:.15em; }
  .bk-evolv{ width:46px; }
  .bk-dlc{ font-size:.55rem; letter-spacing:.11em; }
  .bk-lic{ font-size:.55rem; }
  .head-in{ gap:1rem; }
  .head-actions{ gap:.8rem; }
  .btn-sm{ padding:.75em 1.1em; font-size:.66rem; }
  .hero-eyebrow{ font-size:.62rem; letter-spacing:.18em; }
  .hero-eyebrow::before{ width:2rem; }
  .tools-grid{ grid-template-columns:1fr; }
  .chips li{ white-space:normal; }
  .goal-chips{ grid-template-columns:1fr 1fr; }
  .foot-grid{ grid-template-columns:1fr; gap:2.2rem; }
  .foot-base{ flex-direction:column; align-items:flex-start; }
  .finale h2{ max-width:11em; }
  .creds div{ grid-template-columns:1fr; gap:.15rem; }
  .pathway{ flex-direction:column; align-items:stretch; gap:.4rem; }
  .pathway li{ flex-direction:column; gap:.4rem; }
  .pathway li::after{ content:'\2193'; }
  .pathway li:last-child::after{ content:''; }
  .pathway .pw-node{ width:100%; }
  .authorbox{ flex-direction:column; gap:1rem; }
  .how-steps > li{ padding-left:3.1rem; }

  /* the statement reflows to a single column, no horizontal overflow */
  .statement-wrap{ max-width:100%; }
  .statement{ transform:none; }
  .stmt-head{ flex-direction:column; gap:6px; }
  .stmt-meta{ text-align:left; }
  .stmt-row{ flex-wrap:wrap; }
  .stmt-row .val{ white-space:normal; }
}

@media (max-width: 460px){
  .goal-chips{ grid-template-columns:1fr; }
  .mobile-bar .btn{ font-size:.66rem; letter-spacing:.1em; }
}

/* ---------------------------------------------- primary-source citation line
   Used by the self-employed lending cluster (src/sources.mjs). Every factual
   claim on those pages ends at a government or agency document, and this is
   how the link back is presented without competing with the body copy. */
.src-line{
  font-size:.78rem;
  line-height:1.7;
  color:var(--text-dim);
  margin:1.4rem 0 0;
}
.src-line a{ color:var(--gold-bright); }


/* ------------------------------------------- brokerage band, 360px and under
   Small Androids and the iPhone SE. The band is allowed to run to three lines
   here rather than forcing any group below legible size. */
@media (max-width: 360px){
  .bk-label{ font-size:.48rem; letter-spacing:.12em; }
  .bk-evolv{ width:40px; }
  .bk-dlc{ font-size:.5rem; letter-spacing:.08em; }
  .bk-lic{ font-size:.5rem; }
  .brokerage-in{ gap:.1rem .45rem; }
}


/* ------------------------------------------------ very small phones (<=360px)
   iPhone SE and small Androids. Three long-standing elements run past the
   right edge at this width and make the whole page scroll sideways: the
   decorative chapter numerals, the statement watermark, and the phone number
   in the stripped funnel header. None of the three is load-bearing here — the
   funnel already offers "Call Mike" inline below the questions. */
@media (max-width: 360px){
  .chap-num{ display:none; }
  .stmt-watermark{ display:none; }
  .site-head--stripped .head-phone{ display:none; }
}