.home--v3 {
  --v3-bg: color-mix(in srgb, var(--brand-2) 30%, #070a0e);
  --v3-panel: color-mix(in srgb, var(--brand-2) 62%, #10151d);
  --v3-line: rgba(255,255,255,.13);
  --v3-line-2: rgba(255,255,255,.06);
  --v3-text: #eef2f7;
  --v3-dim: #adb6c4;
  --v3-mono: ui-monospace, 'SF Mono', 'JetBrains Mono', 'Fira Code', Menlo, Consolas, monospace;
}
/* High specificity so it beats home.css `#home{background:#f2f2f2;color:#131A16}` — without this,
   v3 inherits the light theme (white-on-white / dark-on-dark). */
#home.home--v3 {
  background-color: var(--v3-bg);
  background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: 46px 46px;
  color: var(--v3-text);
}
#home.home--v3 h1, #home.home--v3 h2, #home.home--v3 h3 { color: var(--v3-text) }
/* home.css gives #how/#market a white bg and #start brand-2 via 2-id selectors that beat v3's classes — neutralize so every section shows the dark canvas. */
#home.home--v3 #how, #home.home--v3 #market, #home.home--v3 #start { background: transparent; border-top: 0; border-bottom: 0 }
.home--v3 .u { color: color-mix(in srgb, var(--brand) 55%, #fff) }

/* scroll-snap only while v3 is on the page */
html:has(.home--v3) { scroll-snap-type: y proximity; scroll-padding-top: 62px }

/* ---------- Header (sticky, dark, mono) ---------- */
#home.home--v3 .v3-header { position: sticky; top: 0; z-index: 40; background: color-mix(in srgb, var(--v3-bg) 86%, transparent);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-bottom: 1px solid var(--v3-line) }
.home--v3 .v3-header-inner { max-width: 1320px; margin: 0 auto; display: flex; align-items: center; gap: 26px; padding-top: 14px; padding-bottom: 14px }
#home.home--v3 .v3-logo { display: flex; align-items: center; color: #fff }
.home--v3 .v3-logo .brand-logo-img { filter: brightness(0) invert(1) }
#home.home--v3 .site-powered { color: var(--v3-dim); font-family: var(--v3-mono) }
.home--v3 .v3-clock { margin: 0 0 0 6px; font-family: var(--v3-mono); font-size: 11.5px; color: var(--v3-dim); letter-spacing: .02em; white-space: nowrap }
.home--v3 .v3-nav { display: flex; gap: 26px; margin-left: 10px }
@media (max-width: 860px) { .home--v3 .v3-clock { display: none } }
#home.home--v3 #main-nav a { font-family: var(--v3-mono); color: var(--v3-dim); font-size: 13px; letter-spacing: .02em; text-decoration: none; transition: color .15s }
#home.home--v3 #main-nav a:hover { color: var(--brand) }
.home--v3 .v3-headcta { margin-left: auto; font-family: var(--v3-mono); background: var(--brand); color: #fff; font-size: 13px; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase; padding: 11px 20px; border: 0; border-radius: 2px; cursor: pointer; clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px); transition: background .18s }
.home--v3 .v3-headcta:hover { background: var(--brand-accent) }
#home.home--v3 #nav-toggle { color: #fff; border-color: var(--v3-line); border-radius: 2px; margin-left: auto }

/* Mobile menu — v3 terminal drawer, slides in from the left. */
#home.home--v3 #mobile-nav { display: flex; inset: 0 auto 0 0; width: min(360px, 86vw); align-items: flex-start; justify-content: flex-start; text-align: left;
  background: color-mix(in srgb, var(--v3-bg) 55%, #000); border-right: 2px solid var(--brand); box-shadow: 24px 0 70px rgba(0,0,0,.5);
  padding: 96px 30px 40px; gap: 2px; transform: translateX(-100%); visibility: hidden; transition: transform .34s cubic-bezier(.2,.8,.2,1), visibility 0s .34s }
#home.home--v3 #mobile-nav.is-open { transform: none; visibility: visible; transition: transform .34s cubic-bezier(.2,.8,.2,1) }
#home.home--v3 #mobile-nav a { width: 100%; font-family: var(--v3-mono); color: var(--v3-text); font-size: 17px; letter-spacing: .02em; padding: 15px 0; border-bottom: 1px solid var(--v3-line) }
#home.home--v3 #mobile-nav a::before { content: '/ '; color: var(--brand) }
#home.home--v3 .mobile-nav-cta { margin-top: 26px; width: 100%; text-align: center; font-family: var(--v3-mono); text-transform: uppercase; letter-spacing: .04em; background: var(--brand); color: #fff; border-radius: 2px }
#home.home--v3 .mobile-nav-close { border-color: var(--v3-line); border-radius: 2px; color: #fff }

/* ---------- Panels (100vh scroll-snap) ---------- */
.home--v3 .v3-panel { position: relative; display: flex; align-items: center; border-bottom: 1px solid var(--v3-line-2) }
.home--v3 .v3-panel-inner { width: 100%; max-width: 1320px; margin: 0 auto; padding-top: 88px; padding-bottom: 72px }
.home--v3 .v3-meta { display: flex; align-items: center; gap: 16px; margin-bottom: 40px; font-family: var(--v3-mono); font-size: 12px; letter-spacing: .08em }
.home--v3 .v3-index { color: var(--brand); font-weight: 700 }
.home--v3 .v3-meta-tag { color: var(--v3-dim); position: relative; padding-left: 16px }
.home--v3 .v3-meta-tag::before { content: ""; position: absolute; left: 0; top: 50%; width: 8px; height: 1px; background: var(--v3-dim) }

/* ---------- Shared type ---------- */
.home--v3 .v3-eyebrow { font-family: var(--v3-mono); margin: 0 0 20px; font-size: 12.5px; font-weight: 600; letter-spacing: .16em;
  text-transform: uppercase; color: var(--brand) }
.home--v3 .v3-section-head { max-width: 760px; margin: 0 0 44px }
.home--v3 .v3-section-title { margin: 0 0 16px; font-size: clamp(30px, 3.8vw, 50px); line-height: 1.05; letter-spacing: -.025em; font-weight: 700 }
.home--v3 .v3-section-lead { margin: 0; font-size: 16px; line-height: 1.6; color: #cfd6e1; max-width: 60ch }
.home--v3 .v3-link { font-family: var(--v3-mono); color: var(--v3-text); font-size: 13px; letter-spacing: .04em; text-decoration: none; border-bottom: 1px solid var(--brand); padding-bottom: 2px }
.home--v3 .v3-link:hover { color: var(--brand) }

/* ---------- Buttons (sharp, clipped corner) ---------- */
.home--v3 .v3-btn { font-family: var(--v3-mono); display: inline-flex; align-items: center; gap: 10px; background: var(--brand); color: #fff;
  font-size: 14px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: 16px 28px; border: 0; cursor: pointer; border-radius: 2px;
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px); transition: background .18s, transform .05s }
.home--v3 .v3-btn:hover { background: var(--brand-accent) }
.home--v3 .v3-btn:active { transform: translateY(1px) }
.home--v3 .v3-btn--lg { font-size: 15px; padding: 20px 38px }

/* ---------- Frame (image with corner brackets) ---------- */
.home--v3 .v3-frame { position: relative; padding: 10px }
.home--v3 .v3-frame::before, .home--v3 .v3-frame::after { content: ""; position: absolute; width: 22px; height: 22px; border: 2px solid var(--brand) }
.home--v3 .v3-frame::before { top: 0; left: 0; border-right: 0; border-bottom: 0 }
.home--v3 .v3-frame::after { bottom: 0; right: 0; border-left: 0; border-top: 0 }
.home--v3 .v3-frame img { width: 100%; height: 100%; object-fit: cover; display: block; filter: saturate(1.05) contrast(1.02) }
.home--v3 .v3-frame-cap { position: absolute; left: 18px; bottom: 20px; font-family: var(--v3-mono); font-size: 11px; letter-spacing: .06em;
  color: #fff; background: rgba(0,0,0,.55); padding: 5px 10px; border-left: 2px solid var(--brand) }

/* ---------- Hero ---------- */
.home--v3 .v3-hero { min-height: 100vh }
.home--v3 .v3-hero::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(60% 50% at 80% 20%, color-mix(in srgb, var(--brand) 26%, transparent), transparent 70%) }
.home--v3 .v3-hero-grid { position: relative; display: grid; grid-template-columns: 1.05fr .95fr; gap: 56px; align-items: center }
.home--v3 .v3-hero-title { margin: 0 0 22px; font-size: clamp(40px, 5.4vw, 74px); line-height: .98; letter-spacing: -.035em; font-weight: 700; max-width: 15ch }
.home--v3 .v3-hero-lead { margin: 0 0 30px; font-size: 17px; line-height: 1.62; color: var(--v3-dim); max-width: 52ch }
.home--v3 .v3-hero-actions { display: flex; align-items: center; gap: 24px; flex-wrap: wrap }
.home--v3 .v3-hero-badges { list-style: none; margin: 36px 0 0; padding: 24px 0 0; display: flex; flex-wrap: wrap; gap: 14px 30px; border-top: 1px solid var(--v3-line) }
.home--v3 .v3-hero-badges li { display: flex; align-items: center; gap: 10px; font-size: 13.5px; font-weight: 500; color: var(--v3-text) }
.home--v3 .v3-badge-k { font-family: var(--v3-mono); font-size: 11px; color: var(--brand); border: 1px solid var(--v3-line); padding: 2px 6px; border-radius: 2px }
.home--v3 .v3-hero-media img { height: 480px }
.home--v3 .v3-hero-media .v3-frame { border: 1px solid var(--v3-line); background: var(--v3-panel) }

/* ---------- Estimator (console — overrides home.css estimator internals) ---------- */
.home--v3 .v3-console { border: 1px solid var(--v3-line); background: var(--v3-panel); padding: 34px 34px 34px }
#home.home--v3 .estimator-eyebrow { font-family: var(--v3-mono); color: var(--brand) }
#home.home--v3 .estimator-title { color: var(--v3-text) }
#home.home--v3 .estimator-subnote { color: var(--v3-dim) }
#home.home--v3 #est-row { background: var(--v3-line); border: 1px solid var(--v3-line) }
#home.home--v3 .estimator-field { background: var(--v3-bg) }
#home.home--v3 .estimator-field label, #home.home--v3 .estimator-field > span:first-child { font-family: var(--v3-mono); color: var(--v3-dim) }
#home.home--v3 .estimator-value { color: var(--v3-text); font-family: var(--v3-mono); letter-spacing: -.02em }
#home.home--v3 .estimator-range-labels { color: var(--v3-dim); font-family: var(--v3-mono); font-size: 11px }
#home.home--v3 .term-btn { font-family: var(--v3-mono); background: var(--v3-panel); color: var(--v3-text); border: 1px solid var(--v3-line); border-radius: 2px }
#home.home--v3 .term-btn.active { background: var(--brand); border-color: var(--brand); color: #fff }
#home.home--v3 .term-hint { color: var(--v3-dim); font-family: var(--v3-mono); font-size: 11.5px }
#home.home--v3 input[type=range] { accent-color: var(--brand) }
#home.home--v3 .estimator-results { background: var(--v3-panel); color: var(--v3-text); border: 1px solid var(--v3-line); border-top: 0 }
#home.home--v3 .estimator-out-label { color: var(--v3-dim); font-family: var(--v3-mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase }
#home.home--v3 .estimator-out-value { color: #fff; font-family: var(--v3-mono); letter-spacing: -.02em }
#home.home--v3 .estimator-bar { background: rgba(255,255,255,.08) }
#home.home--v3 .estimator-bar-principal { background: var(--brand) }
#home.home--v3 .estimator-bar-interest { background: rgba(255,255,255,.18) }
#home.home--v3 .estimator-bar-labels { color: var(--v3-dim); font-family: var(--v3-mono); font-size: 11px }
#home.home--v3 .estimator-disclosure { border-top-color: var(--v3-line) }
#home.home--v3 .estimator-disclosure p { color: var(--v3-dim) }
#home.home--v3 .estimator-disclosure strong { color: var(--v3-text) }
#home.home--v3 .estimator-fineprint { color: var(--v3-dim) }

/* ---------- Identity (statement) ---------- */
.home--v3 .v3-identity-eyebrow { font-family: var(--v3-mono); margin: 0 0 20px; font-size: 12.5px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--brand) }
.home--v3 .v3-identity-text { margin: 0; font-size: clamp(22px, 3vw, 38px); line-height: 1.34; font-weight: 500; letter-spacing: -.015em; max-width: 22ch; max-width: 40ch }

/* ---------- Process (stepper nodes) ---------- */
.home--v3 #tl-line, .home--v3 #tl-fill { display: none !important }
.home--v3 .v3-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--v3-line); border: 1px solid var(--v3-line) }
.home--v3 .v3-step { background: var(--v3-bg); padding: 30px 26px; position: relative; opacity: 0; transform: translateY(16px);
  transition: opacity .55s cubic-bezier(.2,.8,.2,1), transform .55s cubic-bezier(.2,.8,.2,1) }
.home--v3 .v3-step[data-in] { opacity: 1; transform: none }
.home--v3 .v3-step:nth-of-type(2) { transition-delay: .06s }
.home--v3 .v3-step:nth-of-type(3) { transition-delay: .12s }
.home--v3 .v3-step:nth-of-type(4) { transition-delay: .18s }
.home--v3 .v3-step-k { font-family: var(--v3-mono); display: block; font-size: 30px; font-weight: 700; color: var(--v3-line); margin-bottom: 18px }
.home--v3 .v3-step--key { background: color-mix(in srgb, var(--brand) 12%, var(--v3-bg)); box-shadow: inset 0 2px 0 var(--brand) }
.home--v3 .v3-step--key .v3-step-k { color: var(--brand) }
.home--v3 .v3-step h3 { margin: 0 0 10px; font-size: 16.5px; font-weight: 700; line-height: 1.28 }
.home--v3 .v3-step p { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--v3-dim) }
.home--v3 .v3-step--key p { color: var(--v3-text) }

/* ---------- Recipients ---------- */
.home--v3 .v3-recip-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 56px; align-items: center }
.home--v3 .v3-recip-lead { margin: 0 0 24px; font-size: 15.5px; line-height: 1.6; color: var(--v3-dim) }
.home--v3 .v3-recip-list { margin: 0; display: grid }
.home--v3 .v3-recip-row { display: grid; grid-template-columns: 160px 1fr; gap: 20px; padding: 15px 0; border-top: 1px solid var(--v3-line) }
.home--v3 .v3-recip-row dt { margin: 0; font-family: var(--v3-mono); font-weight: 600; font-size: 13px; color: var(--v3-text); letter-spacing: .02em }
.home--v3 .v3-recip-row dd { margin: 0; font-size: 14px; color: var(--v3-dim); line-height: 1.5 }
.home--v3 .v3-recip-footnote { margin: 22px 0 0; font-size: 12px; color: var(--v3-dim); line-height: 1.55; max-width: 60ch }
.home--v3 .v3-recip-media img { height: 100%; min-height: 380px }
.home--v3 .v3-recip-media .v3-frame { border: 1px solid var(--v3-line) }

/* ---------- Market (data feed) ---------- */
.home--v3 .v3-market-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--v3-line); border: 1px solid var(--v3-line) }
.home--v3 .v3-stat { background: var(--v3-bg); padding: 26px 22px; display: flex; flex-direction: column }
.home--v3 .v3-stat-k { font-family: var(--v3-mono); font-size: 10.5px; letter-spacing: .1em; color: var(--v3-dim); margin-bottom: 14px }
.home--v3 .v3-stat-num { font-family: var(--v3-mono); font-size: clamp(30px, 3.6vw, 46px); font-weight: 700; letter-spacing: -.03em; line-height: 1; color: var(--brand) }
.home--v3 .v3-stat p { margin: 14px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--v3-dim) }
.home--v3 .v3-rates { margin-top: 22px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px }
.home--v3 .v3-rate-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 8px; font-family: var(--v3-mono); font-size: 12px; color: var(--v3-dim) }
.home--v3 .v3-rate-head strong { color: var(--v3-text) }
.home--v3 .v3-rate-track { height: 6px; background: rgba(255,255,255,.08) }
.home--v3 .v3-rate-fill { height: 100%; width: 0; background: var(--brand); transition: width 1s cubic-bezier(.2,.8,.2,1) }

/* ---------- CTA ---------- */
.home--v3 .v3-cta { text-align: center }
.home--v3 .v3-cta::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(50% 60% at 50% 30%, color-mix(in srgb, var(--brand) 22%, transparent), transparent 72%) }
.home--v3 .v3-cta .v3-panel-inner, .home--v3 .v3-cta-title, .home--v3 .v3-cta-lead { position: relative }
.home--v3 .v3-cta .v3-meta { justify-content: center }
.home--v3 .v3-cta-title { margin: 0 auto 18px; font-size: clamp(34px, 5vw, 62px); line-height: 1.04; letter-spacing: -.03em; font-weight: 700; max-width: 18ch }
.home--v3 .v3-cta-lead { margin: 0 auto 30px; font-size: 16.5px; line-height: 1.6; color: var(--v3-dim); max-width: 46ch }
.home--v3 .v3-cta-note { margin: 16px 0 0; font-family: var(--v3-mono); font-size: 12px; color: var(--v3-dim) }
.home--v3 .v3-cta-steps { list-style: none; margin: 42px auto 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; max-width: 640px; text-align: left }
.home--v3 .v3-cta-steps li { display: flex; align-items: center; gap: 12px; font-size: 13.5px; color: var(--v3-text); border: 1px solid var(--v3-line); padding: 14px 16px; background: var(--v3-panel) }
.home--v3 .v3-cta-steps span { font-family: var(--v3-mono); color: var(--brand); font-weight: 700; font-size: 13px }
.home--v3 .v3-cta-consent { margin: 40px auto 0; padding-top: 24px; border-top: 1px solid var(--v3-line); font-size: 11.5px; line-height: 1.55; color: var(--v3-dim); max-width: 660px }
.home--v3 .v3-cta-consent a { color: color-mix(in srgb, var(--brand) 55%, #fff) }

/* ---------- Footer ---------- */
/* Footer — shared _footer.tpl markup, restyled for v3's terminal-HUD look (distinct from default/v2):
   red accent segment on the top rule, mono brand/support, a labeled "// legal" block, 2-column legal. */
#home.home--v3 .site-footer { position: relative; background: color-mix(in srgb, var(--v3-bg) 52%, #000); border-top: 2px solid var(--brand); color: var(--v3-dim) }
#home.home--v3 .footer-inner { max-width: 1320px; padding: 56px 34px 58px; gap: 34px }
#home.home--v3 .footer-columns { grid-template-columns: 1.4fr 1fr; gap: 44px; align-items: start }
#home.home--v3 .footer-logo-img { height: 26px; opacity: .55 }
#home.home--v3 .footer-brand p { font-family: var(--v3-mono); font-size: 11.5px; line-height: 1.7; color: var(--v3-dim) }
#home.home--v3 .footer-col h3 { font-family: var(--v3-mono); color: var(--v3-text); letter-spacing: .12em; text-transform: lowercase; font-size: 11px }
#home.home--v3 .footer-col h3::before { content: '// '; color: var(--brand) }
#home.home--v3 .footer-col a { font-family: var(--v3-mono); color: color-mix(in srgb, var(--brand) 60%, #fff); font-size: 13px }
#home.home--v3 .footer-legal { position: relative; display: block; columns: 2; column-gap: 40px; padding-top: 34px; margin-top: 6px; border-top: 1px solid var(--v3-line); font-size: 11px; line-height: 1.65; color: var(--v3-dim) }
#home.home--v3 .footer-legal::before { content: '// legal'; position: absolute; top: -7px; left: 0; padding-right: 12px; background: color-mix(in srgb, var(--v3-bg) 78%, #000); font-family: var(--v3-mono); font-size: 10px; letter-spacing: .12em; color: var(--brand) }
#home.home--v3 .footer-legal p { break-inside: avoid; margin: 0 0 12px }
#home.home--v3 .footer-legal a { color: color-mix(in srgb, var(--brand) 60%, #fff) }
@media (max-width: 720px) {
  #home.home--v3 .footer-columns { grid-template-columns: 1fr; gap: 28px }
  #home.home--v3 .footer-legal { columns: 1 }
}

/* ---------- Funnel step buttons — match the v3 homepage button (mono, uppercase, clipped corner) ---------- */
.funnel--v3 .btn--primary { font-family: var(--v3-mono); text-transform: uppercase; letter-spacing: 0.04em; border-radius: 2px;
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px) }

/* ---------- Responsive ---------- */
@media (max-width: 980px) {
  .home--v3 .v3-hero-grid { grid-template-columns: 1fr; gap: 34px }
  .home--v3 .v3-hero-media img { height: 300px }
  .home--v3 .v3-hero-title { max-width: none }
  .home--v3 .v3-steps { grid-template-columns: repeat(2, 1fr) }
  .home--v3 .v3-recip-grid { grid-template-columns: 1fr; gap: 30px }
  .home--v3 .v3-recip-media img { min-height: 260px }
  .home--v3 .v3-market-grid { grid-template-columns: repeat(2, 1fr) }
  .home--v3 .v3-rates { grid-template-columns: 1fr }
  .home--v3 .v3-cta-steps { grid-template-columns: 1fr }
  html:has(.home--v3) { scroll-snap-type: none }
  .home--v3 .v3-panel { min-height: 0 }
  .home--v3 .v3-panel-inner { padding-top: 64px; padding-bottom: 64px }
}
@media (max-width: 900px) {
  #home.home--v3 .v3-estimator { background: var(--v3-panel); display: block; min-height: 0 }
  #home.home--v3 #estimator { max-width: 1300px; margin: 0 auto; padding: 74px 20px }
  #home.home--v3 .v3-estimator .v3-panel-inner { padding: 0 !important }
  #home.home--v3 .v3-console { border: 0; background: transparent; padding: 0 }
  #home.home--v3 #est-row { border: 0; background: transparent; gap: 0 }
  #home.home--v3 .estimator-field { background: transparent; padding: 16px 0 }
  #home.home--v3 .estimator-results { border: 0; padding: 0 }
  #home.home--v3 #est-out { gap: 18px }
  #home.home--v3 .estimator-bar { margin: 18px 0 8px }
  #home.home--v3 .estimator-disclosure { margin-top: 18px; padding-top: 16px; gap: 18px }
}
@media (max-width: 620px) {
  .home--v3 { background-size: 32px 32px }
  .home--v3 .v3-steps { grid-template-columns: 1fr }
  .home--v3 .v3-market-grid { grid-template-columns: 1fr }
  .home--v3 .v3-recip-row { grid-template-columns: 1fr; gap: 4px }
}
