/* ═══════════════════════════════════════════════════════════════════════
   VALLEY WEST — v2 PRODUCTION UPGRADE
   New / rebuilt sections: trust bar · first-step · big estimate · tall build-equity
   · dual-insight reference · process timeline · why-us · reviews carousel · final CTA
   Loads AFTER site.css. Uses --accent (red mortgage / green insurance).
   ═══════════════════════════════════════════════════════════════════════ */

/* spacing rhythm */
.section.xl { padding: 132px 0; }
@media (max-width: 760px) { .section.xl { padding: 72px 0; } }
.section-head .kicker, .eyebrow.soft { color: var(--t-mid); }

/* ─────────── HERO: dual CTAs + local line (replaces ask-bar usage) ─────────── */
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin-top: 34px; }
.hero-local { display: inline-flex; align-items: center; gap: 8px; margin-top: 22px; font-family: var(--sans); font-weight: 500; font-size: 13px; letter-spacing: 0; text-transform: none; color: rgba(255,255,255,.82); }
.hero-local svg { width: 14px; height: 14px; }

/* ─────────── TRUST BAR ─────────── */
.trustbar { border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); background: #fff; }
.trustbar-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; }
@media (max-width: 900px) { .trustbar-row { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .trustbar-row { grid-template-columns: 1fr; } }
.trust-item { display: flex; align-items: center; gap: 13px; padding: 26px 24px; border-right: 1px solid var(--border); }
.trust-item:last-child { border-right: none; }
@media (max-width: 900px) { .trust-item { border-right: none; border-bottom: 1px solid var(--border); } }
.trust-item .ti-ic { width: 40px; height: 40px; border-radius: 12px; background: var(--accent-soft, var(--m-soft)); color: var(--accent); display: grid; place-items: center; flex: none; }
.trust-item .ti-ic svg { width: 21px; height: 21px; }
.trust-item .ti-t { font-size: 13.5px; font-weight: 600; color: var(--t-hi); line-height: 1.3; }

/* ─────────── FIRST STEP ─────────── */
.steps-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 12px; }
@media (max-width: 900px) { .steps-3 { grid-template-columns: 1fr; max-width: 480px; margin: 12px auto 0; } }
.step-card {
  position: relative; background: #fff; border: 1px solid #ECECE9; border-radius: var(--r-xl);
  padding: 40px 34px 36px; display: flex; flex-direction: column;
  transition: transform .28s var(--ease-out), box-shadow .28s, border-color .28s;
}
.step-card:hover { transform: translateY(-6px); box-shadow: var(--sh-3); border-color: #E0E0DC; }
.step-card .sc-num { font-family: var(--mono); font-size: 12px; letter-spacing: .18em; color: var(--accent); margin-bottom: 22px; }
.step-card .sc-ic { width: 56px; height: 56px; border-radius: 16px; background: var(--accent-soft, var(--m-soft)); color: var(--accent); display: grid; place-items: center; margin-bottom: 22px; }
.step-card .sc-ic svg { width: 28px; height: 28px; }
.step-card h3 { font-size: 21px; font-weight: 700; letter-spacing: -.01em; color: var(--t-hi); margin: 0 0 10px; }
.step-card p { font-size: 15px; line-height: 1.55; color: var(--t-mid); margin: 0; }
.firststep-cta { display: flex; justify-content: center; margin-top: 44px; }

/* ═══ v2.2 — "Start here" rebuild + larger visuals + stronger motion ═══ */
/* Bigger section titles everywhere */
.section-head .h2 { font-size: clamp(34px, 4.7vw, 62px); }
.section-head .lede { font-size: clamp(16px, 1.4vw, 19px); }

/* FIRST STEP — large numbered premium panels */
#first .steps-3 { gap: 28px; }
#first .step-card {
  position: relative; min-height: 440px; padding: 54px 40px 46px;
  border-radius: 28px; overflow: hidden;
  transition: transform .35s var(--ease-out), box-shadow .35s, border-color .35s;
}
#first .step-card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 5px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform .45s var(--ease-out); }
#first .step-card:hover::before { transform: scaleX(1); }
#first .step-card:hover { transform: translateY(-8px); box-shadow: var(--sh-4); border-color: #E2E2DE; }
#first .step-card .sc-num {
  font-family: var(--serif); font-style: italic; font-weight: 300; font-size: 66px; line-height: 1;
  color: var(--accent); letter-spacing: -.03em; margin: 0 0 24px; opacity: .95;
}
#first .step-card .sc-ic {
  position: absolute; top: 44px; right: 38px; width: 60px; height: 60px; border-radius: 18px;
  background: var(--accent-soft, var(--m-soft)); color: var(--accent); display: grid; place-items: center; margin: 0;
}
#first .step-card .sc-ic::after { content: ""; position: absolute; inset: -7px; border-radius: 23px; border: 1.5px solid var(--accent); opacity: .22; }
#first .step-card .sc-ic svg { width: 30px; height: 30px; }

/* ═══ v2.3 — hard fixes: button hover, review/start-here, estimate polish ═══ */
/* Buttons: hover only fills red — no shadow, glow, lift, wipe, or resize */
.btn-m, .btn-i, .btn-dark, .btn-cta {
  box-shadow: none !important; background-image: none !important;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease !important;
}
.btn-m:hover, .btn-i:hover, .btn-dark:hover, .btn-cta:hover,
.btn-m:active, .btn-i:active, .btn-dark:active, .btn-cta:active {
  background-color: var(--accent) !important; color: #fff !important; transform: none !important; box-shadow: none !important;
}
.header-cta { box-shadow: none !important; transition: background-color .18s ease, color .18s ease !important; }
.header-cta:hover { background: var(--accent) !important; color: #fff !important; transform: none !important; box-shadow: none !important; }
.btn-ghost, .btn-on-dark { transition: background-color .18s ease, color .18s ease, border-color .18s ease !important; }
.btn-ghost:hover, .btn-on-dark:hover { background: var(--accent) !important; color: #fff !important; border-color: var(--accent) !important; transform: none !important; box-shadow: none !important; }

/* Reviews: flat, clean — no shadow, no hover lift */
.rev-tile { box-shadow: none !important; }
.rev-tile:hover { transform: none !important; }

/* Start Here: stable cards — no hover animation at all */
#first .step-card { box-shadow: none; border: 1px solid #E8E8E4; background: var(--paper-2); }
#first .step-card::before { display: none !important; }
#first .step-card:hover { transform: none !important; box-shadow: none !important; border-color: #E8E8E4 !important; }

/* Build Your Estimate — more premium dashboard feel */
.estimate2 { gap: 72px; }
.est2-card { padding: 42px; border-radius: 26px; box-shadow: 0 24px 60px rgba(8,8,10,.10); }
.est2-card .ec-head { padding-bottom: 20px; border-bottom: 1px solid var(--border); }
.est2-row { margin-bottom: 26px; }
.est2-result { background: var(--paper-2); border: 1px solid var(--border); border-radius: 18px; padding: 22px 24px; border-top: 1px solid var(--border); margin-top: 28px; }
.est2-result .erv { font-size: 40px; }
.est2-card .btn { padding-top: 17px; padding-bottom: 17px; font-size: 15.5px; }
.est2-disc { border-top: 1px dashed var(--border); padding-top: 14px; margin-top: 16px; }

/* ═══ v2.4 — section depth polish (trust strip, FAQ, process) ═══ */
/* Trust strip — premium hover + cleaner rhythm */
.trust-item .ti-ic { transition: background-color .2s ease, color .2s ease; }
.trustbar-row .trust-item:hover .ti-ic { background: var(--accent); color: #fff; }
.trust-item .ti-t { letter-spacing: -.005em; }
/* FAQ — larger, cleaner, accent on open */
.faq-q { font-size: 17px; }
.faq-item { transition: border-color .2s ease, background-color .2s ease; }
.faq-item.open { border-color: var(--accent); }
.faq-item.open .faq-q { color: var(--accent); }
/* Process timeline — make the connector + number read as a real progression */
.proc-step .ps-n { box-shadow: 0 0 0 6px var(--accent-soft, var(--m-soft)); }
.process-track .proc-step:not(:last-child)::after { background: linear-gradient(90deg, var(--accent), var(--border)); opacity: .5; }
/* Why-us points — subtle premium lift on the icon only */
.whyus-points .wp-ic { transition: background-color .2s ease, color .2s ease; }
.whyus-points li:hover .wp-ic { background: var(--accent); color: #fff; }

/* ═══ v2.5 — pie/donut charts, interactive equity rebuild, slide-in motion ═══ */
/* directional reveals */
@media (prefers-reduced-motion: no-preference) {
  .reveal.from-l { transform: translateX(-60px); }
  .reveal.from-r { transform: translateX(60px); }
  .reveal.from-l.in, .reveal.from-r.in { transform: none; }
}

/* EQUITY rebuild — donut chart + stat panel */
.equity2 { display: grid; grid-template-columns: 1.05fr 1fr; gap: 60px; align-items: center; }
@media (max-width: 920px) { .equity2 { grid-template-columns: 1fr; gap: 44px; } }
.donut-card { background: var(--ink-2); border: 1px solid var(--ink-4); border-radius: var(--r-xl); padding: 40px; }
.donut-card .dc-lbl { font-family: var(--mono); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--t-lo-d); margin-bottom: 26px; }
.donut-wrap { display: flex; align-items: center; gap: 36px; }
@media (max-width: 540px) { .donut-wrap { flex-direction: column; gap: 26px; } }
.donut { position: relative; width: 230px; height: 230px; flex: none; }
.donut svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.donut .ring { fill: none; stroke-width: 26; }
.donut .ring.track { stroke: var(--ink-4); }
.donut .seg { stroke-linecap: butt; stroke-dasharray: var(--pct) 100; }
@media (prefers-reduced-motion: no-preference) { .donut-card.in .seg { animation: donutdraw 1.3s var(--ease-out) both; } }
@keyframes donutdraw { from { stroke-dasharray: 0 100; } }
html.reveal-all .donut .seg { animation: none !important; stroke-dasharray: var(--pct) 100 !important; }
.donut .dctr { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.donut .dctr .cv { font-family: var(--sans); font-weight: 700; font-size: 32px; color: #fff; line-height: 1; }
.donut .dctr .cl { font-family: var(--mono); font-size: 9px; letter-spacing: .14em; text-transform: uppercase; color: var(--t-mid-d); margin-top: 6px; }
.donut-legend { display: grid; gap: 14px; flex: 1; }
.dl { display: flex; align-items: center; gap: 11px; font-size: 14px; color: var(--t-hi-d); cursor: default; }
.dl .sw { width: 13px; height: 13px; border-radius: 4px; flex: none; }
.dl b { margin-left: auto; font-family: var(--mono); color: var(--t-mid-d); font-weight: 500; }
.dl:hover { color: #fff; }
.equity-side { }
.equity-side .es-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 30px 0 28px; }
.equity-side .es-card { background: var(--ink-3); border: 1px solid var(--ink-4); border-radius: var(--r-lg); padding: 22px; }
.equity-side .es-card .v { font-family: var(--sans); font-weight: 700; font-size: 30px; color: #fff; font-variant-numeric: tabular-nums; line-height: 1; }
.equity-side .es-card .v .u { color: var(--accent); }
.equity-side .es-card .l { font-size: 12.5px; color: var(--t-mid-d); margin-top: 9px; line-height: 1.45; }
#first .step-card h3 { font-size: 23px; margin: 0 0 12px; letter-spacing: -.01em; }
#first .step-card p { font-size: 15.5px; }

/* LARGER VISUALS across signature sections */
.pcard { min-height: 520px; }
.gm-chart { height: 210px; }
.fc-chart { height: 200px; }
.fc-panel { max-width: 1040px; padding: 38px 40px 30px; }
.equity-visual { min-height: 580px; }
@media (max-width: 920px) { .equity-visual { min-height: 400px; } }
.rev-tile { flex-basis: clamp(300px, 33%, 410px); }
.testi { border-radius: var(--r-xl); }
.section.xl { padding: 144px 0; }
@media (max-width: 760px) { .section.xl { padding: 76px 0; } .pcard { min-height: 440px; } }

/* STRONGER, SMOOTHER MOTION */
@media (prefers-reduced-motion: no-preference) {
  .reveal { transform: translateY(38px); transition: opacity .8s var(--ease-out), transform .8s var(--ease-out); }
  .reveal[data-d="1"] { transition-delay: .1s; }
  .reveal[data-d="2"] { transition-delay: .2s; }
  .reveal[data-d="3"] { transition-delay: .3s; }
  .gm-card, .step-card, .feat, .offer, .rev-tile, .pcard { will-change: transform; }
}

/* ─────────── BIG ESTIMATE (2-col) ─────────── */
.estimate2 { display: grid; grid-template-columns: 1fr 1.05fr; gap: 64px; align-items: center; }
@media (max-width: 920px) { .estimate2 { grid-template-columns: 1fr; gap: 44px; } }
.est2-copy .h2 { color: var(--t-hi); }
.est2-bullets { list-style: none; margin: 28px 0 32px; padding: 0; display: grid; gap: 15px; }
.est2-bullets li { display: flex; gap: 13px; align-items: flex-start; font-size: 15.5px; line-height: 1.5; color: var(--t-mid); }
.est2-bullets li b { color: var(--t-hi); font-weight: 600; }
.est2-bullets .ci { flex: none; width: 24px; height: 24px; border-radius: 50%; background: var(--accent-soft, var(--m-soft)); color: var(--accent); display: grid; place-items: center; margin-top: 1px; }
.est2-bullets .ci svg { width: 14px; height: 14px; }
.est2-card { background: #fff; border: 1px solid #ECECE9; border-radius: var(--r-xl); box-shadow: var(--sh-3); padding: 38px; }
.est2-card .ec-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 26px; }
.est2-card .ec-eyebrow { font-family: var(--mono); font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--t-mid); }
.est2-card .ec-badge { font-family: var(--mono); font-size: 10.5px; font-weight: 600; color: var(--accent); background: var(--accent-soft, var(--m-soft)); padding: 6px 12px; border-radius: var(--r-pill); }
.est2-row { margin-bottom: 24px; }
.est2-row .er-top { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 12px; }
.est2-row .er-l { font-size: 14px; font-weight: 600; color: var(--t-hi); }
.est2-row .er-v { font-family: var(--mono); font-size: 17px; font-weight: 600; color: var(--accent); font-variant-numeric: tabular-nums; }
.est2-row input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; height: 7px; border-radius: 4px; background: var(--paper-3); outline: none; }
.est2-row input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 26px; height: 26px; border-radius: 50%; background: var(--accent); cursor: grab; border: 4px solid #fff; box-shadow: 0 2px 10px rgba(0,0,0,.18); transition: transform .15s var(--ease-out), box-shadow .2s var(--ease-out); }
.est2-row input[type=range]::-webkit-slider-thumb:hover { transform: scale(1.12); box-shadow: 0 4px 16px color-mix(in srgb, var(--accent) 35%, rgba(0,0,0,.2)); }
.est2-row input[type=range]:active::-webkit-slider-thumb { transform: scale(1.18); cursor: grabbing; }
.est2-row input[type=range]:focus-visible { outline: none; }
.est2-row input[type=range]:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 6px color-mix(in srgb, var(--accent) 28%, transparent); }
.est2-row input[type=range]::-moz-range-thumb { width: 24px; height: 24px; border-radius: 50%; background: var(--accent); cursor: pointer; border: 4px solid #fff; box-shadow: 0 2px 10px rgba(0,0,0,.18); }
.est2-chips { display: flex; gap: 10px; flex-wrap: wrap; }
.est2-chip { flex: 1 1 auto; min-width: 0; text-align: center; padding: 13px 14px; font-size: 13.5px; font-weight: 600; color: var(--t-mid); background: var(--paper-3); border: 1.5px solid transparent; border-radius: var(--r-sm); cursor: pointer; transition: background .22s var(--ease-out), color .22s var(--ease-out), box-shadow .22s var(--ease-out); white-space: nowrap; -webkit-tap-highlight-color: transparent; }
.est2-chip:hover { background: color-mix(in srgb, var(--accent) 9%, var(--paper-3)); color: var(--t-hi); }
.est2-chip:focus { outline: none; }
.est2-chip:focus-visible { outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 38%, transparent); }
.est2-chip.on { background: color-mix(in srgb, var(--accent) 14%, transparent); border-color: transparent; color: var(--t-hi); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 26%, transparent); }
.est2-chip.on:hover { background: color-mix(in srgb, var(--accent) 18%, transparent); }
.est2-result { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 30px; padding-top: 26px; border-top: 1px solid var(--border); }
.est2-result .erl { font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--t-mid); }
.est2-result .erv { font-family: var(--sans); font-weight: 700; font-size: 38px; letter-spacing: -.02em; color: var(--t-hi); font-variant-numeric: tabular-nums; line-height: 1; margin-top: 6px; }
.est2-result .erv small { font-size: 16px; font-weight: 400; color: var(--t-mid); }
.est2-card .btn { width: 100%; margin-top: 22px; }
.est2-disc { font-size: 11.5px; color: var(--t-lo); margin: 14px 0 0; line-height: 1.5; }

/* ─────────── BUILD EQUITY (tall, visual) ─────────── */
.equity { background: var(--ink); color: var(--t-hi-d); overflow: hidden; }
.equity-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: 64px; align-items: center; }
@media (max-width: 920px) { .equity-grid { grid-template-columns: 1fr; gap: 48px; } }
.equity .h2 { color: #fff; }
.equity .h2 .red, .equity .h2 .grn { color: var(--accent); }
.equity-copy .lede { color: var(--t-mid-d); }
.equity-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 36px; }
.eq-stat { background: var(--ink-3); border: 1px solid var(--ink-4); border-radius: var(--r-lg); padding: 24px; }
.eq-stat .es-v { font-family: var(--sans); font-weight: 700; font-size: 34px; letter-spacing: -.02em; color: #fff; font-variant-numeric: tabular-nums; line-height: 1; }
.eq-stat .es-v .u { color: var(--accent); }
.eq-stat .es-l { font-size: 13px; color: var(--t-mid-d); margin-top: 10px; line-height: 1.45; }
.equity-visual { position: relative; border-radius: var(--r-xl); overflow: hidden; min-height: 520px; box-shadow: var(--sh-4); }
@media (max-width: 920px) { .equity-visual { min-height: 380px; } }
.equity-visual img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.equity-visual::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8,8,10,.1), rgba(8,8,10,.55)); }
.equity-float { position: absolute; z-index: 2; background: var(--glass-d-bg); border: 1px solid var(--glass-d-bd); border-radius: var(--r-md); backdrop-filter: var(--glass-blur); padding: 18px 20px; box-shadow: var(--sh-3); color: #fff; }
.equity-float .ef-l { font-family: var(--mono); font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.7); }
.equity-float .ef-v { font-family: var(--mono); font-size: 22px; font-weight: 600; margin-top: 5px; font-variant-numeric: tabular-nums; }
.equity-float .ef-v small { color: var(--up); font-size: 12px; }
.equity-float.top { top: 26px; left: 26px; }
.equity-float.bot { bottom: 26px; right: 26px; }

/* ─────────── DUAL-INSIGHT REFERENCE SECTION (#16) ─────────── */
.insights2 { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }
@media (max-width: 900px) { .insights2 { grid-template-columns: 1fr; } }
.insight-card { border-radius: var(--r-xl); padding: 40px 36px 34px; min-height: 440px; display: flex; flex-direction: column; text-align: center; }
.insight-card.lav { background: var(--grad-lav); }
.insight-card.darkc { background: var(--ink-3); border: 1px solid var(--ink-4); }
.insight-card .ic-h { font-family: var(--serif); font-weight: 300; font-size: 32px; color: #fff; margin: 0 0 10px; }
.insight-card .ic-h em { font-style: italic; }
.insight-card .ic-p { font-size: 14.5px; color: rgba(255,255,255,.74); max-width: 38ch; margin: 0 auto 26px; line-height: 1.55; }
.insight-card .ic-widget { margin-top: auto; border-radius: var(--r-md); padding: 22px; text-align: left; backdrop-filter: var(--glass-blur); }
.insight-card.lav .ic-widget { background: rgba(20,20,28,.4); border: 1px solid rgba(255,255,255,.16); }
.insight-card.darkc .ic-widget { background: rgba(20,20,24,.5); border: 1px solid rgba(255,255,255,.1); }
.ic-widget .iw-star { width: 20px; height: 20px; color: var(--ai-2); }
.ic-widget .iw-h { font-size: 16px; font-weight: 600; color: #fff; margin: 12px 0 8px; line-height: 1.3; }
.ic-widget .iw-p { font-size: 12.5px; line-height: 1.55; color: rgba(255,255,255,.62); margin: 0; }
.ic-widget .iw-recap { font-family: var(--serif); font-size: 20px; color: #fff; line-height: 1.3; }
.ic-widget .iw-l { font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.5); margin: 16px 0 5px; }
.ic-widget .iw-v { font-family: var(--mono); font-size: 20px; font-weight: 600; color: #fff; }
.ic-widget .iw-v small { color: var(--up); font-size: 12px; }

/* ─────────── PROCESS TIMELINE ─────────── */
.process-track { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; position: relative; }
@media (max-width: 900px) { .process-track { grid-template-columns: 1fr 1fr; gap: 32px 24px; } }
@media (max-width: 540px) { .process-track { grid-template-columns: 1fr; } }
.proc-step { position: relative; }
.proc-step .ps-n { width: 52px; height: 52px; border-radius: 50%; border: 1.5px solid var(--border-strong, rgba(10,10,11,.16)); display: grid; place-items: center; font-family: var(--mono); font-weight: 600; font-size: 16px; color: var(--accent); background: #fff; margin-bottom: 20px; position: relative; z-index: 2; }
.proc-step h4 { font-size: 17px; font-weight: 700; color: var(--t-hi); margin: 0 0 8px; }
.proc-step p { font-size: 14px; line-height: 1.55; color: var(--t-mid); margin: 0; }
.process-track .proc-step:not(:last-child)::after { content: ""; position: absolute; top: 26px; left: 52px; right: -24px; height: 1.5px; background: var(--border); z-index: 1; }
@media (max-width: 900px) { .process-track .proc-step::after { display: none; } }

/* ─────────── WHY VALLEY WEST (soft accent) ─────────── */
.whyus { background: var(--accent-soft, var(--m-soft)); }
.whyus-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
@media (max-width: 900px) { .whyus-grid { grid-template-columns: 1fr; gap: 36px; } }
.whyus .h2 { color: var(--t-hi); }
.whyus-points { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; }
.whyus-points li { display: flex; gap: 15px; align-items: flex-start; }
.whyus-points .wp-ic { flex: none; width: 38px; height: 38px; border-radius: 11px; background: #fff; color: var(--accent); display: grid; place-items: center; box-shadow: var(--sh-1); }
.whyus-points .wp-ic svg { width: 19px; height: 19px; }
.whyus-points .wp-t { font-size: 16px; font-weight: 700; color: var(--t-hi); }
.whyus-points .wp-d { font-size: 14px; color: var(--t-mid); margin-top: 3px; line-height: 1.5; }

/* ─────────── REVIEWS CAROUSEL ─────────── */
.reviews { overflow: hidden; }
.rev-viewport { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); }
.rev-track { display: flex; gap: 22px; width: max-content; will-change: transform; }
@media (prefers-reduced-motion: no-preference) {
  .rev-track { animation: revscroll 48s linear infinite; }
  .reviews:hover .rev-track { animation-play-state: paused; }
}
@keyframes revscroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.rev-card { flex: 0 0 360px; max-width: 360px; background: #fff; border: 1px solid #ECECE9; border-radius: var(--r-lg); padding: 30px; box-shadow: var(--sh-1); display: flex; flex-direction: column; }
@media (max-width: 540px) { .rev-card { flex-basis: 300px; } }
.rev-card .rc-stars { color: #F5A623; font-size: 14px; letter-spacing: 2px; margin-bottom: 16px; }
.rev-card .rc-q { font-size: 15.5px; line-height: 1.55; color: var(--t-hi); margin: 0 0 22px; flex: 1; text-wrap: pretty; }
.rev-card .rc-who { display: flex; align-items: center; gap: 12px; }
.rev-card .rc-av { width: 42px; height: 42px; border-radius: 50%; background: var(--accent-soft, var(--m-soft)); color: var(--accent); display: grid; place-items: center; font-weight: 700; font-size: 15px; flex: none; }
.rev-card .rc-n { font-size: 14px; font-weight: 700; color: var(--t-hi); }
.rev-card .rc-r { font-size: 12px; color: var(--t-mid); margin-top: 1px; }

/* ─────────── FINAL CTA (centered) ─────────── */
.final .final-actions { justify-content: center; }
.final { padding: 200px 0; }
@media (max-width: 760px) { .final { padding: 104px 0; } }

/* ─────────── hero + footer imagery: slow ambient ken-burns ─────────── */
@media (prefers-reduced-motion: no-preference) {
  .hero-bg { animation: heroZoom 32s ease-in-out infinite alternate; transform-origin: 50% 45%; will-change: transform; }
  .final .bg img { animation: footPan 40s ease-in-out infinite alternate; transform-origin: 50% 55%; will-change: transform; }
}
@keyframes heroZoom { from { transform: scale(1.01); } to { transform: scale(1.09); } }
@keyframes footPan { from { transform: scale(1.06) translate(-1.2%, 0.6%); } to { transform: scale(1.15) translate(1.4%, -1%); } }

/* ─────────── tighten "minimal" section heads centered variants ─────────── */
.section-head.center { text-align: center; }

/* ═══════════════════════════════════════════════════════════════════════
   v2.1 — Origin-quality polish: simple button hover, scroll motion,
   gradient-tile reviews carousel, chart draw, benefit upgrade
   ═══════════════════════════════════════════════════════════════════════ */

/* 1 · BUTTONS — clean black→accent color change on hover (no directional wipe) */
.btn-m, .btn-i, .btn-dark, .btn-cta {
  background-image: none !important;
  background-color: var(--ink); color: #fff; border: 1px solid rgba(10,10,11,.16);
  box-shadow: var(--sh-1);
  transition: background-color .22s ease, transform .22s ease, box-shadow .22s ease;
}
.btn-m:hover, .btn-i:hover, .btn-dark:hover, .btn-cta:hover {
  background-color: var(--accent); color: #fff; transform: translateY(-2px); box-shadow: var(--sh-3);
}
.btn-m:active, .btn-i:active, .btn-dark:active, .btn-cta:active { transform: translateY(0) scale(.99); }
/* header pill + on-dark ghost keep their own treatment but get the same easing */
.header-cta { transition: background-color .22s ease, color .22s ease, transform .22s ease, box-shadow .22s ease; }
.header-cta:hover { background: var(--accent); color: #fff; }

/* 2 · HERO — remove badges/laurels, keep clean */
.hero .laurels { display: none !important; }

/* 3 · SCROLL MOTION — fade-up reveals (real browsers) with a frozen-safe floor */
@media (prefers-reduced-motion: no-preference) {
  .reveal { opacity: 0; transform: translateY(44px); transition: opacity 1.25s cubic-bezier(0.16,1,0.3,1), transform 1.25s cubic-bezier(0.16,1,0.3,1); will-change: opacity, transform; }
  .reveal.in { opacity: 1; transform: none; }
  .reveal[data-d="1"] { transition-delay: .14s; }
  .reveal[data-d="2"] { transition-delay: .28s; }
  .reveal[data-d="3"] { transition-delay: .42s; }
  .reveal[data-d="4"] { transition-delay: .56s; }
  /* chart line draws when the forecast scrolls in */
  .forecast .fc-line { stroke-dasharray: 1300; stroke-dashoffset: 1300; transition: stroke-dashoffset 2.4s var(--ease-out) .3s; }
  .forecast.in .fc-line { stroke-dashoffset: 0; }
  /* gentle parallax-style float on equity glass cards */
  .equity-float { animation: floaty 6s ease-in-out infinite; }
  .equity-float.bot { animation-delay: -3s; }
}
@keyframes floaty { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
/* FLOOR: force everything visible (no transition) if JS reveal hasn't fired — frozen-preview & no-JS safe */
html.reveal-all .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
html.reveal-all .forecast .fc-line { stroke-dashoffset: 0 !important; }

/* 4 · BENEFITS — premium upgrade (layered, larger, animated accent) */
.section:has(.cards-3) .cards-3 { gap: 26px; }
.section:has(.cards-3) .feat {
  position: relative; padding: 38px 32px 34px; border-radius: var(--r-xl);
  border: 1px solid #ECECE9; overflow: hidden; background: #fff;
}
.section:has(.cards-3) .feat::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform .4s var(--ease-out); }
.section:has(.cards-3) .feat:hover::before { transform: scaleX(1); }
.section:has(.cards-3) .feat:hover { transform: translateY(-6px); box-shadow: var(--sh-4); }
.section:has(.cards-3) .feat .ic { width: 56px; height: 56px; border-radius: 16px; position: relative; }
.section:has(.cards-3) .feat .ic::after { content: ""; position: absolute; inset: -6px; border-radius: 20px; border: 1.5px solid var(--accent); opacity: .25; }
.section:has(.cards-3) .feat .ic svg { width: 28px; height: 28px; }
.section:has(.cards-3) .feat h3 { font-size: 21px; margin-bottom: 11px; }
.section:has(.cards-3) .feat p { font-size: 15px; }

/* 5 · REVIEWS — restored gradient tiles, as a polished carousel */
.reviews .rev-viewport, .reviews .rev-track { all: unset; } /* neutralize old marquee */
.revx { position: relative; display: flex; align-items: center; gap: 8px; }
.rev-rail {
  display: flex; gap: 24px; overflow-x: auto; scroll-snap-type: x mandatory;
  padding: 10px 4px 24px; scroll-behavior: smooth; flex: 1;
  scrollbar-width: none;
}
.rev-rail::-webkit-scrollbar { display: none; }
.rev-tile {
  flex: 0 0 clamp(280px, 31%, 380px); scroll-snap-align: center; aspect-ratio: 1/1.02;
  border-radius: var(--r-xl); padding: 30px; display: flex; flex-direction: column;
  justify-content: space-between; color: #fff; box-shadow: var(--sh-3);
  transition: transform .3s var(--ease-out);
}
.rev-tile:hover { transform: translateY(-6px); }
.rev-tile .rt-stars { font-size: 14px; letter-spacing: 4px; text-align: center; color: rgba(255,255,255,.96); }
.rev-tile .rt-q { font-size: 17px; line-height: 1.5; text-align: center; font-weight: 500; text-wrap: balance; }
.rev-tile .rt-who { font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; text-align: center; color: rgba(255,255,255,.95); }
.rev-arrow {
  flex: none; width: 48px; height: 48px; border-radius: 50%; border: 1px solid rgba(10,10,11,.14);
  background: #fff; color: var(--ink); display: grid; place-items: center; cursor: pointer; z-index: 3;
  box-shadow: var(--sh-2); transition: background-color .22s ease, color .22s ease, transform .22s ease;
}
.reviews.section.dark .rev-arrow { background: var(--ink-3); border-color: var(--ink-4); color: #fff; }
.rev-arrow:hover { background: var(--accent); color: #fff; border-color: var(--accent); transform: translateY(-2px); }
.rev-arrow svg { width: 22px; height: 22px; }
@media (max-width: 760px) { .rev-arrow { display: none; } .rev-tile { flex-basis: 82%; } }

/* explicit gradient backgrounds (re-declared so they reliably apply) */
.rev-tile.t-sky, .testi.t-sky { background: var(--grad-tile-sky); }
.rev-tile.t-moss, .testi.t-moss { background: var(--grad-tile-moss); }
.rev-tile.t-teal, .testi.t-teal { background: var(--grad-tile-teal); }
.rev-tile.t-gold, .testi.t-gold { background: var(--grad-tile-gold); }
.section.forecast { background: var(--grad-forecast); }

/* ═══ "Grow your money" dual dashboard (Origin-style) ═══ */
.growmoney { background: var(--ink); color: var(--t-hi-d); }
.gm-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
@media (max-width: 900px) { .gm-grid { grid-template-columns: 1fr; } }
.gm-card { background: var(--ink-2); border: 1px solid var(--ink-4); border-radius: var(--r-xl); padding: 34px; }
.gm-card h3 { font-family: var(--serif); font-weight: 300; font-size: 27px; color: #fff; margin: 0 0 6px; }
.gm-card h3 em { font-style: italic; }
.gm-card .gm-sub { font-size: 14px; color: var(--t-mid-d); margin: 0 0 24px; line-height: 1.5; }
.gm-balance { font-family: var(--sans); font-weight: 700; font-size: 36px; color: #fff; font-variant-numeric: tabular-nums; line-height: 1; }
.gm-balance small { font-size: 14px; font-weight: 400; color: var(--up); margin-left: 6px; }
.gm-chart { position: relative; height: 170px; margin-top: 18px; }
.gm-chart svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.gm-line { stroke-dasharray: 1400; stroke-dashoffset: 1400; }
@media (prefers-reduced-motion: no-preference) { .gm-card.in .gm-line { stroke-dashoffset: 0; transition: stroke-dashoffset 1.9s var(--ease-out) .2s; } }
html.reveal-all .gm-line { stroke-dashoffset: 0 !important; }
.gm-tabs { display: flex; gap: 6px; margin-top: 16px; }
.gm-tabs span { font-family: var(--mono); font-size: 10px; letter-spacing: .08em; padding: 7px 13px; border-radius: var(--r-pill); color: var(--t-mid-d); }
.gm-tabs span.on { background: var(--ink-4); color: #fff; }
.gm-row { margin-bottom: 20px; }
.gm-row:last-child { margin-bottom: 0; }
.gm-row .gr-top { display: flex; justify-content: space-between; font-size: 13.5px; color: #fff; margin-bottom: 9px; }
.gm-row .gr-top span:last-child { font-family: var(--mono); color: var(--t-mid-d); }
.gm-track { height: 8px; border-radius: 5px; background: var(--ink-4); overflow: hidden; }
.gm-track i { display: block; height: 100%; border-radius: 5px; background: var(--accent); transform-origin: left; }
@media (prefers-reduced-motion: no-preference) { .gm-card.in .gm-track i { transform: scaleX(0); animation: gmbar 1s var(--ease-out) .35s forwards; } }
@keyframes gmbar { to { transform: scaleX(1); } }
html.reveal-all .gm-track i { transform: scaleX(1) !important; animation: none !important; }

/* ═══════════ PHASE 5 — combined "Know your numbers" planning dashboard ═══════════ */
.kyn .section-head .lede { color: var(--t-mid-d); }
.kyn-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: stretch; counter-reset: kcard; }
@media (max-width: 680px) { .kyn-grid { grid-template-columns: 1fr; } }
.kyn-grid .gm-card { display: flex; flex-direction: column; position: relative; overflow: hidden; counter-increment: kcard; padding: 38px; background: linear-gradient(180deg, var(--ink-2), color-mix(in srgb, var(--ink-1) 80%, var(--ink-2))); border: 1px solid rgba(255,255,255,.09); box-shadow: 0 22px 54px rgba(0,0,0,.32), inset 0 1px 0 rgba(255,255,255,.05); }
@media (max-width: 560px) { .kyn-grid .gm-card { padding: 26px; } }
.kyn-grid .gm-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--accent) 58%, transparent), transparent); opacity: .6; }
.kyn-grid .gm-card::after { content: "0" counter(kcard); position: absolute; top: 30px; right: 30px; font-family: var(--mono); font-size: 11px; letter-spacing: .14em; color: var(--t-lo-d); }
.kyn-grid .gm-card h3 { padding-right: 34px; }
/* thin divider between the card grid and the comparison table */
.kyn-table { position: relative; }
.kyn-table::before { content: ""; display: block; height: 1px; max-width: 1040px; margin: 8px auto 28px; background: linear-gradient(90deg, transparent, rgba(255,255,255,.16), transparent); }
/* card 3 — equity / allocation donut inside a gm-card */
.kyn-donut { display: flex; align-items: center; gap: 26px; margin-top: 6px; }
@media (max-width: 540px) { .kyn-donut { flex-direction: column; gap: 22px; } }
.kyn-donut .donut { width: 168px; height: 168px; flex: none; }
.kyn-donut .donut .ring, .kyn-donut .donut .seg { stroke-width: 15 !important; }
.kyn-donut .donut .dctr .cv { font-size: 26px; }
.kyn-donut .donut-legend { display: grid; gap: 12px; flex: 1; }
.kyn-donut .dl { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--t-hi-d); }
.kyn-donut .dl .sw { width: 12px; height: 12px; border-radius: 4px; flex: none; }
.kyn-donut .dl b { margin-left: auto; font-family: var(--mono); color: #fff; font-weight: 600; }
@media (prefers-reduced-motion: no-preference) { .kyn-grid .gm-card.in .donut .seg { animation: donutdraw 1.3s var(--ease-out) both; } }
/* card 4 — stat tiles inside a gm-card */
.kyn-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 6px; }
.kyn-stats .es-card { background: var(--ink-3); border: 1px solid var(--ink-4); border-radius: var(--r-lg); padding: 20px; }
.kyn-stats .es-card .v { font-family: var(--sans); font-weight: 700; font-size: 27px; color: #fff; line-height: 1; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.kyn-stats .es-card .v .u { color: var(--accent); }
.kyn-stats .es-card .l { font-size: 12px; color: var(--t-mid-d); margin-top: 8px; line-height: 1.45; }

/* comparison / info table */
.kyn-table { margin-top: 26px; }
.kyn-table .vw-table { font-size: 15px; }
.kyn-table .vw-table td, .kyn-table .vw-table thead th { padding: 16px 20px; }
.kyn-table .vw-table tbody td:first-child { color: #fff; font-weight: 600; }
@media (prefers-reduced-motion: no-preference) {
  .kyn-table .vw-table tbody tr { opacity: 0; transform: translateY(10px); transition: opacity .6s var(--ease-out), transform .6s var(--ease-out); }
  .kyn-table.in .vw-table tbody tr { opacity: 1; transform: none; }
  .kyn-table.in .vw-table tbody tr:nth-child(2) { transition-delay: .07s; }
  .kyn-table.in .vw-table tbody tr:nth-child(3) { transition-delay: .14s; }
  .kyn-table.in .vw-table tbody tr:nth-child(4) { transition-delay: .21s; }
  .kyn-table.in .vw-table tbody tr:nth-child(5) { transition-delay: .28s; }
  .kyn-table.in .vw-table tbody tr:nth-child(6) { transition-delay: .35s; }
}
html.reveal-all .kyn-table .vw-table tbody tr { opacity: 1 !important; transform: none !important; }

/* liquid-glass CTA card */
.kyn-cta { margin-top: 26px; display: flex; align-items: center; justify-content: space-between; gap: 32px; flex-wrap: wrap; position: relative; overflow: hidden; background: rgba(255,255,255,.045); border: 1px solid rgba(255,255,255,.12); border-radius: var(--r-xl); padding: 38px 42px; box-shadow: inset 0 1px 0 rgba(255,255,255,.06); }
.kyn-cta::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(90% 130% at 0% 0%, color-mix(in srgb, var(--accent) 11%, transparent), transparent 58%); }
.kyn-cta > * { position: relative; z-index: 1; }
.kyn-cta .kyn-cta-copy { max-width: 60ch; }
.kyn-cta h3 { font-family: var(--serif); font-weight: 300; font-size: 30px; color: #fff; margin: 0 0 10px; letter-spacing: -.01em; }
.kyn-cta p { font-size: 15px; color: var(--t-mid-d); margin: 0 0 12px; line-height: 1.55; }
.kyn-cta .kyn-cta-note { font-size: 11.5px; color: var(--t-lo-d); line-height: 1.5; display: block; }
.kyn-cta .btn { flex: none; }
@media (max-width: 640px) { .kyn-cta { padding: 28px 24px; gap: 22px; } .kyn-cta h3 { font-size: 26px; } }

/* compliance note */
.kyn-note { margin: 22px auto 0; max-width: 1040px; font-size: 12.5px; color: var(--t-lo-d); text-align: center; line-height: 1.6; }

/* ═══ v2.6 — bigger scale, eyebrow font, trust marquee, estimate features ═══ */
/* eyebrow font: drop the mono look, use a clean tracked sans across the whole site */
.eyebrow, .ec-eyebrow, .est-eyebrow, .dc-lbl, .gw-lbl, .gm-lbl, .ec-badge { font-family: var(--sans) !important; }
.eyebrow { font-weight: 700; letter-spacing: .14em; font-size: 12.5px; }

/* bigger, more production-level type + spacing */
.hero-h { font-size: clamp(56px, 8.4vw, 120px) !important; }
.hero-sub { font-size: clamp(15px, 1.3vw, 18px); max-width: 54ch; }
.section-head .h2 { font-size: clamp(38px, 5.2vw, 70px); }
.fc-h, .ai-h { font-size: clamp(40px, 5.6vw, 76px); }
.section { padding: 120px 0; }
.section.sm { padding: 72px 0; }
@media (max-width: 760px) { .section { padding: 76px 0; } .section.sm { padding: 52px 0; } }
/* prevent any heading clipping */
.h2, .fc-h, .ai-h, .hero-h, .gm-card h3, .insight-card .ic-h { padding-bottom: .08em; overflow: visible; }
.gm-card h3 { line-height: 1.18; margin-bottom: 12px; }

/* TRUST / AWARDS MARQUEE (replaces the static strip under the hero) */
.trust-marquee { overflow: hidden; background: #fff; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: 26px 0; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.tm-track { display: flex; width: max-content; }
@media (prefers-reduced-motion: no-preference) { .tm-track { animation: tmscroll 34s linear infinite; } .trust-marquee:hover .tm-track { animation-play-state: paused; } }
@keyframes tmscroll { to { transform: translateX(-50%); } }
.tm-item { display: flex; align-items: center; gap: 13px; padding: 0 44px; border-right: 1px solid var(--border); white-space: nowrap; }
.tm-item .tm-ic { width: 34px; height: 34px; border-radius: 10px; background: var(--accent-soft, var(--m-soft)); color: var(--accent); display: grid; place-items: center; flex: none; }
.tm-item .tm-ic svg { width: 19px; height: 19px; }
.tm-item b { font-size: 15.5px; font-weight: 700; color: var(--t-hi); letter-spacing: -.01em; }
.tm-item .tm-s { font-size: 12px; color: var(--t-mid); display: block; margin-top: 1px; }

/* ESTIMATE — built-out features: next-step row + local review mini-card */
.est2-next { display: flex; align-items: center; gap: 10px; margin-top: 18px; padding: 14px 16px; background: var(--accent-soft, var(--m-soft)); border-radius: 14px; font-size: 13px; color: var(--t-hi); }
.est2-next .ns-ic { width: 30px; height: 30px; border-radius: 9px; background: #fff; color: var(--accent); display: grid; place-items: center; flex: none; }
.est2-next .ns-ic svg { width: 16px; height: 16px; }
.est2-next b { font-weight: 700; }
.est2-review { display: flex; gap: 13px; align-items: center; margin-top: 14px; padding: 16px; background: var(--paper-2); border: 1px solid var(--border); border-radius: 14px; }
.est2-review .av { width: 40px; height: 40px; border-radius: 50%; background: var(--accent-soft, var(--m-soft)); color: var(--accent); display: grid; place-items: center; font-weight: 700; font-size: 14px; flex: none; }
.est2-review .rq { font-size: 13px; color: var(--t-hi); line-height: 1.45; }
.est2-review .rq .stars { color: #F5A623; font-size: 11px; letter-spacing: 2px; display: block; margin-bottom: 3px; }
.est2-review .rn { font-size: 11.5px; color: var(--t-mid); margin-top: 3px; }

/* ═══ v2.7 — donut clip fix, calc font, liquid-glass buttons, tables, forecast charts ═══ */
/* donut: thinner stroke so the ring never clips the viewBox */
.donut .ring, .donut .seg { stroke-width: 15 !important; }
.donut { width: 240px; height: 240px; }

/* calc field values: use the sans display font (not mono) */
.est2-row .er-v { font-family: var(--sans) !important; font-weight: 700; letter-spacing: -.01em; }

/* LIQUID-GLASS button — white highlight flows elegantly around the border */
@property --glassangle { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
.btn-glass { position: relative; background: rgba(255,255,255,.10); color: #fff !important; border: 1px solid rgba(255,255,255,.30); backdrop-filter: blur(12px) saturate(160%); -webkit-backdrop-filter: blur(12px) saturate(160%); overflow: hidden; box-shadow: none !important; background-image: none !important; transition: background-color .2s ease; }
.btn-glass:hover { background: var(--accent) !important; color: #fff !important; border-color: var(--accent); }
.btn-glass::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; background: conic-gradient(from var(--glassangle), transparent 0deg, transparent 250deg, rgba(255,255,255,.95) 300deg, rgba(255,255,255,.2) 330deg, transparent 360deg); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; }
@media (prefers-reduced-motion: no-preference) { .btn-glass::before { animation: glassflow 7s linear infinite; } }

/* ═══════════ PHASE 2 — header trust text, animated glass CTA, rotating hero title ═══════════ */
/* header brand: NMLS + Powered by Valley West, tight under the logo */
.site-header .brand { gap: 12px; }
.site-header .brand .mark { width: 40px; height: 40px; }
.site-header .brand .bt { gap: 0; }
.site-header .brand .bs { font-size: 9px; letter-spacing: .06em; margin-top: 3px; line-height: 1.2; }
.site-header .brand .bx { font-family: var(--sans); font-size: 8px; font-weight: 500; letter-spacing: .04em; color: rgba(255,255,255,.5); line-height: 1.25; margin-top: 1px; }
.site-header.scrolled .brand .bx { color: var(--t-lo); }

/* animated glass hero CTA: continuous shimmer + premium hover */
.btn-glass { position: relative; transition: transform .25s var(--ease-out), box-shadow .3s var(--ease-out), background .25s, border-color .25s; }
.btn-glass > * { position: relative; z-index: 1; }
.btn-glass:hover { background: rgba(255,255,255,.18) !important; color: #fff !important; border-color: rgba(255,255,255,.5); transform: translateY(-2px); box-shadow: 0 14px 34px rgba(0,0,0,.28); }
.btn-glass:active { transform: translateY(0) scale(.99); }

/* rotating hero headline: always two lines, large, fits every viewport, fade/slide */
.hero-h.hero-rotating { display: flex; flex-direction: column; align-items: center; text-align: center; gap: .04em; font-size: clamp(16px, 5.7vw, 72px) !important; line-height: 1.05; letter-spacing: -0.03em; }
.hero-h.hero-rotating .hr-lead { display: block; white-space: nowrap; }
.hero-h.hero-rotating .hr-word { display: block; white-space: nowrap; font-style: italic; transition: opacity .5s var(--ease-out), transform .5s var(--ease-out); will-change: opacity, transform; }
.hero-h.hero-rotating .hr-word.out { opacity: 0; transform: translateY(-5px); }
/* eyebrow pill stays on one line for clean alignment with the headline */
.hero-eyebrow { white-space: nowrap; max-width: none; }
@keyframes glassflow { to { --glassangle: 360deg; } }

/* COMPARISON / DETAILS TABLES */
.vw-table { width: 100%; border-collapse: collapse; border-radius: var(--r-md); overflow: hidden; border: 1px solid var(--border); background: #fff; font-size: 14.5px; }
.vw-table thead th { background: var(--paper-3); font-family: var(--sans); font-weight: 700; font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--t-mid); text-align: left; padding: 15px 18px; }
.vw-table thead th.hot { color: var(--accent); }
.vw-table td { padding: 15px 18px; border-top: 1px solid var(--border); color: var(--t-hi); }
.vw-table td:first-child { color: var(--t-mid); font-weight: 500; }
.vw-table td.num, .vw-table th.num { text-align: right; font-family: var(--mono); font-variant-numeric: tabular-nums; }
.vw-table tbody tr:hover { background: var(--accent-soft, var(--m-soft)); }
.vw-table .col-hot { background: var(--accent-soft, var(--m-soft)); font-weight: 700; color: var(--t-hi); }
.section.dark .vw-table { background: var(--ink-2); border-color: var(--ink-4); }

/* ═══ v2.8 — benefits no-hover+larger, glass tables/panels, comparison ═══ */
.section:has(.cards-3) .feat:hover { transform: none !important; box-shadow: none !important; border-color: #ECECE9 !important; }
.section:has(.cards-3) .feat::before { display: none !important; }
.section:has(.cards-3) .feat { padding: 48px 40px 44px; min-height: 320px; }
.section:has(.cards-3) .feat .ic { width: 66px; height: 66px; border-radius: 19px; }
.section:has(.cards-3) .feat .ic svg { width: 33px; height: 33px; }
.section:has(.cards-3) .feat h3 { font-size: 24px; margin-bottom: 13px; }
.section:has(.cards-3) .feat p { font-size: 16px; line-height: 1.6; }
.section:has(.cards-3) .cards-3 { gap: 28px; }

/* glass table for dark sections — futuristic */
.vw-table.glass { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.16); backdrop-filter: var(--glass-blur); }
.vw-table.glass thead th { background: rgba(255,255,255,.06); color: rgba(255,255,255,.72); }
.vw-table.glass thead th.hot { color: #fff; }
.vw-table.glass td { border-color: rgba(255,255,255,.12); color: #fff; }
.vw-table.glass td:first-child { color: rgba(255,255,255,.74); }
.vw-table.glass tbody tr:hover { background: rgba(255,255,255,.06); }
.vw-table.glass .col-hot { background: rgba(255,255,255,.08); color: #fff; box-shadow: inset 3px 0 0 var(--accent); }

/* comparison section */
.compare-sec .cmp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }
@media (max-width: 920px) { .compare-sec .cmp-grid { grid-template-columns: 1fr; } }
.cmp-card .cmp-h { font-family: var(--serif); font-weight: 300; font-size: 24px; color: #fff; margin: 0 0 18px; }
.cmp-card .cmp-h em { font-style: italic; }
@media (max-width: 640px) {
  .vw-table thead { display: none; }
  .vw-table tr { display: grid; grid-template-columns: 1fr; gap: 2px; padding: 6px 0; }
  .vw-table td { border: none; padding: 6px 16px; }
  .vw-table td:first-child { font-weight: 700; color: var(--accent); padding-top: 14px; }
}

/* calc pie */
.cw-pie { display: flex; align-items: center; gap: 22px; margin: 6px 0 22px; }
.cw-pie .donut { width: 130px; height: 130px; }
.cw-pie .donut .ring, .cw-pie .donut .seg { stroke-width: 16 !important; }
.cw-pie-legend { display: grid; gap: 9px; font-size: 13px; color: var(--t-mid); }
.cw-pie-legend .pl { display: flex; align-items: center; gap: 9px; }
.cw-pie-legend .sw { width: 11px; height: 11px; border-radius: 3px; flex: none; }
.cw-pie-legend b { margin-left: auto; font-family: var(--mono); color: var(--t-hi); }

/* ═══ v2.9 — chart modules under calc, dark dividers, larger reviews ═══ */
/* animated divider between adjacent dark sections */
.section.dark + .section.dark, .section.equity + .section.dark, .section.dark + .section.equity, .section.forecast + .section.dark { position: relative; }
.section.dark + .section.dark::before, .section.equity + .section.dark::before, .section.dark + .section.equity::before, .section.forecast + .section.dark::before {
  content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: min(1200px, 88%); height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.28), transparent); background-size: 200% 100%;
}
@media (prefers-reduced-motion: no-preference) {
  .section.dark + .section.dark::before, .section.equity + .section.dark::before, .section.dark + .section.equity::before, .section.forecast + .section.dark::before { animation: shimmer 7s linear infinite; }
}
@keyframes shimmer { to { background-position: -200% 0; } }

/* larger, more important reviews */
.rev-tile { flex-basis: clamp(320px, 36%, 440px); padding: 40px; }
.rev-tile .rt-stars { font-size: 18px; }
.rev-tile .rt-q { font-size: 22px; line-height: 1.55; }
.rev-tile .rt-who { font-size: 12px; }

/* CHART MODULES (separate cards beneath the calculator) */
.charts-mod { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }
@media (max-width: 820px) { .charts-mod { grid-template-columns: 1fr; } }
.chart-card { background: #fff; border: 1px solid #ECECE9; border-radius: 26px; padding: 36px; }
.chart-card .cm-lbl { font-family: var(--sans); font-weight: 700; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--t-hi); }
.chart-card .cm-sub { font-size: 13px; color: var(--t-lo); margin: 5px 0 26px; }
.cm-bars { display: flex; align-items: flex-end; gap: 22px; height: 215px; }
.cm-bar { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; height: 100%; }
.cm-bar .bv { font-family: var(--mono); font-size: 12.5px; color: var(--t-hi); margin-bottom: 8px; }
.cm-bar i { width: 100%; border-radius: 12px 12px 0 0; background: linear-gradient(180deg, var(--accent), var(--accent-soft, var(--m-soft))); transform-origin: bottom; }
@media (prefers-reduced-motion: no-preference) { .chart-card.in .cm-bar i { transform: scaleY(1); } }
@keyframes gmbarY { to { transform: scaleY(1); } }
html.reveal-all .cm-bar i { transform: scaleY(1) !important; animation: none !important; }
.cm-bar .bl { font-size: 12.5px; color: var(--t-mid); margin-top: 14px; text-align: center; line-height: 1.3; }
.cm-pie { display: flex; align-items: center; gap: 30px; }
@media (max-width: 460px) { .cm-pie { flex-direction: column; gap: 20px; } }
.cm-pie .donut { width: 175px; height: 175px; }
.cm-pie .donut .ring, .cm-pie .donut .seg { stroke-width: 17 !important; }
.cm-pie .donut .ring.track { stroke: #ECECE9; }
.cm-legend { display: grid; gap: 11px; font-size: 13.5px; color: var(--t-mid); }
.cm-legend .pl { display: flex; align-items: center; gap: 10px; }
.cm-legend .sw { width: 12px; height: 12px; border-radius: 3px; flex: none; }
.cm-legend b { margin-left: auto; font-family: var(--mono); color: var(--t-hi); }
.cm-line-card { margin-top: 26px; background: #fff; border: 1px solid #ECECE9; border-radius: 26px; padding: 36px; }
.cm-line { position: relative; height: 240px; margin-top: 20px; }
.cm-line svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.cm-line .ln { stroke-dasharray: 1500; stroke-dashoffset: 1500; }
@media (prefers-reduced-motion: no-preference) { .cm-line-card.in .ln { stroke-dashoffset: 0; transition: stroke-dashoffset 2.1s var(--ease-out) .2s; } }
html.reveal-all .cm-line .ln { stroke-dashoffset: 0 !important; }
.cm-axis { display: flex; justify-content: space-between; font-family: var(--mono); font-size: 10px; letter-spacing: .06em; color: var(--t-lo); margin-top: 10px; }
.cm-note { font-size: 12px; color: var(--t-lo); margin-top: 22px; text-align: center; }

/* ═══ v3.0 — review wrap, animated eyebrow shimmer, full dividers, global scale ═══ */
/* reviews: no fixed aspect ratio so text never clips */
.rev-tile { aspect-ratio: auto !important; height: auto; min-height: 480px; padding: 52px; }
.rev-tile .rt-q { text-wrap: pretty; }

/* animated liquid-glass shimmer on small eyebrow labels */
.section.dark .eyebrow, .equity .eyebrow, .forecast .eyebrow, .growmoney .eyebrow, .compare-sec .eyebrow, .reviews.dark .eyebrow { color: #fff; }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  @media (prefers-reduced-motion: no-preference) {
    .section.dark .eyebrow, .equity .eyebrow, .forecast .eyebrow, .growmoney .eyebrow, .compare-sec .eyebrow { background-image: linear-gradient(105deg, rgba(255,255,255,.72) 0%, rgba(255,255,255,.72) 44%, #ffffff 50%, rgba(255,255,255,.72) 56%, rgba(255,255,255,.72) 100%); background-size: 340% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: eyeshine 9s ease-in-out infinite; }
  }
}
@keyframes eyeshine { to { background-position: -240% 0; } }

/* dividers: full content-width and a touch more visible */
.section.dark + .section.dark::before, .section.equity + .section.dark::before, .section.dark + .section.equity::before, .section.forecast + .section.dark::before {
  width: 100% !important; height: 1.5px !important;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.42), transparent) !important; background-size: 200% 100% !important;
}

/* global: everything a little larger */
.wrap { max-width: 1260px; }
.section { padding: 132px 0; }
@media (max-width: 760px) { .section { padding: 80px 0; } }
.section-head { margin-bottom: 62px; }
.section-head .lede { font-size: clamp(17px, 1.5vw, 20px); }
.feat p, .step-card p, .offer .ob p, .gm-card .gm-sub, .checklist li, .est2-bullets li { font-size: 16px; }
.feat h3, .offer .ob h3 { font-size: 22px; }
.mini .ttl { font-size: 18px; }
.eq-stat .es-v, .equity-side .es-card .v, .stat .num { letter-spacing: -.02em; }
.faq-q { font-size: 18px; padding: 24px 26px; }
.trust-item .ti-t { font-size: 14.5px; }
.cov-opt { padding: 22px 24px; }
.cov-opt .txt h5 { font-size: 17px; }

/* ═══ v3.2 — elegant marquee + exactly-3 reviews ═══ */
/* moving banner: refined serif, slower, premium spacing */
.trust-marquee { padding: 30px 0; }
@media (prefers-reduced-motion: no-preference) { .tm-track { animation-duration: 50s; } }
.tm-item { padding: 0 52px; gap: 16px; border-right: none; position: relative; }
.tm-item::after { content: "✦"; position: absolute; right: -7px; top: 50%; transform: translateY(-50%); color: var(--accent); opacity: .5; font-size: 11px; }
.tm-item b { font-family: var(--serif) !important; font-style: italic; font-weight: 400; font-size: 19px; letter-spacing: 0; color: var(--t-hi); }
.tm-item .tm-s { font-family: var(--sans); font-size: 11.5px; letter-spacing: .04em; color: var(--t-mid); margin-top: 2px; }
.tm-item .tm-ic { width: 38px; height: 38px; border-radius: 50%; }
.tm-item .tm-ic svg { width: 20px; height: 20px; }

/* reviews: wider container, EXACTLY 3 full cards, no cutoff */
.reviews .wrap { max-width: 1400px; }
.reviews .revx { gap: 18px; }
.rev-rail { overflow-x: auto; scroll-snap-type: x mandatory; -webkit-mask-image: none !important; mask-image: none !important; gap: 26px; }
.rev-tile { flex: 0 0 calc((100% - 52px) / 3) !important; max-width: none; aspect-ratio: auto !important; min-height: 480px; scroll-snap-align: start; }
@media (max-width: 900px) { .rev-tile { flex: 0 0 calc((100% - 26px) / 2) !important; } }
@media (max-width: 640px) { .rev-tile { flex: 0 0 100% !important; } .reviews .rev-arrow { display: grid; } }

/* ═══ v3.3 — "Always in the know" synced 30s video-style panels ═══ */
.ic-widget .ivid { position: relative; min-height: 188px; }
.ivid-bar { position: relative; height: 3px; border-radius: 3px; background: rgba(255,255,255,.16); overflow: hidden; margin-bottom: 18px; }
.ivid-bar i { position: absolute; inset: 0; background: var(--ai-2); transform-origin: left; transform: scaleX(0); }
.ivid .vp { position: absolute; left: 0; right: 0; top: 26px; opacity: 0; }
.ivid .vp:first-child { opacity: 1; }
.ivid .vp .vk { font-family: var(--mono); font-size: 9px; letter-spacing: .16em; text-transform: uppercase; color: rgba(255,255,255,.5); }
.ivid .vp .vstar { width: 22px; height: 22px; color: var(--ai-2); }
.ivid .vp .vh { font-size: 18px; font-weight: 700; color: #fff; margin: 12px 0 9px; line-height: 1.28; }
.ivid .vp .vt { font-size: 13.5px; color: rgba(255,255,255,.68); line-height: 1.55; margin: 0; }
@media (prefers-reduced-motion: no-preference) {
  .ivid .vp { animation: vidcycle 30s ease-in-out infinite; }
  .ivid .vp:nth-child(2) { animation-delay: 10s; }
  .ivid .vp:nth-child(3) { animation-delay: 20s; }
  .ivid-bar i { animation: vidbar 30s linear infinite; }
}
@keyframes vidcycle { 0% { opacity: 0; transform: translateY(14px) scale(.985); } 3% { opacity: 1; transform: none; } 30% { opacity: 1; transform: none; } 33%,100% { opacity: 0; transform: translateY(-14px) scale(.985); } }
@keyframes vidbar { 0% { transform: scaleX(0); } 33% { transform: scaleX(1); } 33.01%,100% { transform: scaleX(0); } }

/* v3.4 — richer "video" cards: drifting mesh, particles, glow, better type */
.insight-card { min-height: 470px; }
.ic-widget { position: relative; overflow: hidden; }
.ic-widget::before { content: ""; position: absolute; inset: -10%; pointer-events: none; background: radial-gradient(42% 52% at 24% 22%, rgba(139,140,240,.34), transparent 60%), radial-gradient(46% 52% at 82% 74%, rgba(108,118,240,.24), transparent 62%); }
.insight-card.darkc .ic-widget::before { background: radial-gradient(42% 52% at 76% 24%, rgba(255,255,255,.10), transparent 60%), radial-gradient(46% 52% at 18% 76%, rgba(139,140,240,.18), transparent 62%); }
.ic-widget::after { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: radial-gradient(rgba(255,255,255,.16) 1px, transparent 1.6px); background-size: 26px 26px; opacity: .22; }
@media (prefers-reduced-motion: no-preference) {
  .ic-widget::before { animation: meshmove 16s ease-in-out infinite alternate; }
  .ic-widget::after { animation: dotsdrift 22s linear infinite; }
}
@keyframes meshmove { 0% { transform: translate(-6%,-4%) scale(1); } 100% { transform: translate(6%,5%) scale(1.12); } }
@keyframes dotsdrift { to { background-position: 130px 130px; } }
.ivid { position: relative; z-index: 2; min-height: 210px; }
.ivid-bar { z-index: 3; }
.ivid .vp:first-child { animation-delay: -2s; } /* first beat visible immediately */
.ivid .vp .vk { display: inline-block; padding: 5px 12px; border: 1px solid rgba(255,255,255,.22); border-radius: 999px; background: rgba(255,255,255,.07); backdrop-filter: blur(6px); }
.ivid .vp .vstar { width: 26px; height: 26px; margin-top: 14px; filter: drop-shadow(0 0 12px rgba(139,140,240,.75)); }
.ivid .vp .vh { font-size: 23px; letter-spacing: -.01em; margin: 14px 0 10px; }
.ivid .vp .vt { font-size: 14.5px; line-height: 1.6; max-width: 34ch; }
.ivid .vp:first-child { animation: none !important; opacity: 1 !important; transform: none !important; } /* beat 1 always visible */
.ivid .vp:not(:first-child) { background: rgba(20,20,30,.86); border-radius: 14px; padding: 4px 0; backdrop-filter: blur(4px); }
.insight-card.lav .ivid .vp:not(:first-child) { background: rgba(46,44,86,.9); }

/* v3.5 — center video windows + guarantee beat-1 visible + scroll target */
.ivid { text-align: center; }
.ivid .vp { left: 0; right: 0; }
.ivid .vp .vk { margin: 0 auto; }
.ivid .vp .vstar { display: block; margin: 14px auto 0; }
.ivid .vp .vt { margin: 0 auto; }
.insight-card .ivid .vp:first-child { position: relative; opacity: 1 !important; transform: none !important; animation-name: none !important; }
.charts-mod, #numbers, section[id], main [id] { scroll-margin-top: 100px; }

/* v3.6 — combined "Know your numbers" block inside the equity section */
.kyn-wrap { margin-top: 70px; }
.kyn-head { text-align: center; max-width: 720px; margin: 0 auto 46px; }
.kyn-head h3 { font-family: var(--serif); font-weight: 300; font-size: clamp(30px,3.6vw,46px); color: #fff; margin: 12px 0 0; letter-spacing: -.02em; }
.kyn-head h3 em { font-style: italic; }
.kyn-head p { font-size: 16px; color: var(--t-mid-d); margin: 16px auto 0; max-width: 56ch; line-height: 1.6; }
.kyn-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
@media (max-width: 980px) { .kyn-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 680px) { .kyn-grid { grid-template-columns: 1fr; } }
.kyn-card { position: relative; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.16); border-radius: var(--r-xl); backdrop-filter: var(--glass-blur); padding: 30px; overflow: hidden; min-height: 248px; display: flex; flex-direction: column; }
.kyn-card::before { content: ""; position: absolute; inset: -40% -40% auto auto; width: 170px; height: 170px; background: radial-gradient(circle, var(--accent), transparent 70%); opacity: .18; pointer-events: none; }
.kyn-card .kc-ic { width: 46px; height: 46px; border-radius: 13px; background: rgba(255,255,255,.1); color: #fff; display: grid; place-items: center; margin-bottom: 18px; }
.kyn-card .kc-ic svg { width: 23px; height: 23px; }
.kyn-card .kc-l { font-family: var(--sans); font-weight: 700; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.6); }
.kyn-card .kc-v { font-family: var(--serif); font-style: italic; font-weight: 300; font-size: 30px; color: #fff; margin: 8px 0 10px; line-height: 1.1; }
.kyn-card .kc-p { font-size: 13.5px; color: rgba(255,255,255,.72); line-height: 1.5; margin: 0 0 16px; }
.kyn-card .kc-meter { margin-top: auto; height: 6px; border-radius: 4px; background: rgba(255,255,255,.14); overflow: hidden; }
.kyn-card .kc-meter i { display: block; height: 100%; border-radius: 4px; background: var(--accent); }
.kyn-table-wrap { margin-top: 28px; }
.kyn-cta { margin-top: 28px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.18); border-radius: var(--r-xl); backdrop-filter: var(--glass-blur); padding: 34px 40px; display: flex; align-items: center; justify-content: space-between; gap: 26px; flex-wrap: wrap; }
.kyn-cta h3 { font-family: var(--serif); font-weight: 300; font-size: 27px; color: #fff; margin: 0 0 7px; }
.kyn-cta p { font-size: 14px; color: rgba(255,255,255,.74); margin: 0; max-width: 56ch; line-height: 1.55; }
.kyn-cta .cta-side { text-align: right; }
.kyn-cta .cta-note { font-size: 11.5px; color: rgba(255,255,255,.5); margin-top: 10px; }

/* video panel: add a small motion stat-bar set so it's not a flat slideshow */
.ivid .vp .vbars { display: flex; align-items: flex-end; justify-content: center; gap: 7px; height: 38px; margin-top: 16px; }
.ivid .vp .vbars i { width: 12px; border-radius: 4px 4px 0 0; background: rgba(255,255,255,.5); }
@media (prefers-reduced-motion: no-preference) { .ivid .vp .vbars i { animation: vbarpulse 1.8s ease-in-out infinite; } .ivid .vp .vbars i:nth-child(2){animation-delay:.2s} .ivid .vp .vbars i:nth-child(3){animation-delay:.4s} .ivid .vp .vbars i:nth-child(4){animation-delay:.6s} .ivid .vp .vbars i:nth-child(5){animation-delay:.8s} }
@keyframes vbarpulse { 0%,100% { transform: scaleY(.5); opacity:.5; } 50% { transform: scaleY(1); opacity:1; } }
.insight-card .ic-h { font-size: 30px; }
.insight-card .ic-p { font-size: 15px; }

/* ═══ v3.1 — header font, chart detail+titles, stacked compare, forecast tidy, SEO-friendly ═══ */
/* nicer header type */
.nav-links a { font-family: var(--sans) !important; font-weight: 600; letter-spacing: .02em; text-transform: none; font-size: 14px; }
.header-right .login { font-family: var(--sans) !important; text-transform: none; letter-spacing: 0; font-size: 14px; }
.header-cta { font-family: var(--sans) !important; text-transform: none; letter-spacing: .01em; font-weight: 700; font-size: 13.5px; padding: 12px 20px; }
.site-header .brand .bs { font-family: var(--sans) !important; text-transform: none; letter-spacing: .02em; font-size: 11px; }

/* chart titles in the elegant serif (no plain default look) */
.chart-card .cm-lbl, .cm-line-card .cm-lbl { font-family: var(--serif) !important; font-weight: 400; font-style: italic; font-size: clamp(21px, 2vw, 26px); letter-spacing: 0; text-transform: none; color: var(--t-hi); }
.chart-card .cm-sub, .cm-line-card .cm-sub { font-size: 13.5px; margin-top: 6px; }

/* more detail: gridlines on bar + line */
.cm-bars { background-image: repeating-linear-gradient(to top, rgba(10,10,11,.07) 0 1px, transparent 1px 25%); padding-top: 6px; }
.cm-line { background-image: repeating-linear-gradient(to top, rgba(10,10,11,.06) 0 1px, transparent 1px 25%), repeating-linear-gradient(to right, rgba(10,10,11,.05) 0 1px, transparent 1px 20%); border-radius: 12px; }
.cm-bar i { box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); }

/* stacked, expanded comparison tables */
.compare-sec .cmp-grid { grid-template-columns: 1fr !important; gap: 30px; max-width: 1040px; margin: 0 auto; }
.compare-sec .vw-table { font-size: 15.5px; }
.compare-sec .vw-table td, .compare-sec .vw-table thead th { padding: 18px 22px; }
.compare-sec .cmp-card .cmp-h { font-size: 27px; }

/* Compare your options — premium detail pass (frames, accent tick, check column, lift) */
.compare-sec .cmp-card {
  position: relative; padding: 30px 30px 32px; border-radius: var(--r-xl, 26px);
  background: rgba(255,255,255,.035); border: 1px solid rgba(255,255,255,.10);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 18px 44px rgba(0,0,0,.26);
  overflow: hidden; transition: transform .4s var(--ease-out), box-shadow .4s var(--ease-out);
}
@media (max-width: 640px) { .compare-sec .cmp-card { padding: 22px 18px 24px; } }
.compare-sec .cmp-card:hover { transform: translateY(-3px); box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 26px 56px rgba(0,0,0,.34); }
.compare-sec .cmp-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--accent), transparent); opacity: .7; }
.compare-sec .cmp-card .cmp-h { display: flex; align-items: center; gap: 12px; }
.compare-sec .cmp-card .cmp-h::before { content: ""; flex: none; width: 5px; height: .92em; border-radius: 3px; background: var(--accent); box-shadow: 0 0 12px color-mix(in srgb, var(--accent) 60%, transparent); }
/* check-mark down the winning / "how we help" column */
.compare-sec .vw-table.glass tbody td:last-child { position: relative; padding-left: 44px; color: #fff; font-weight: 600; }
.compare-sec .vw-table.glass tbody td:last-child::before {
  content: ""; position: absolute; left: 20px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; background: var(--accent);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/contain no-repeat;
}
@media (max-width: 640px) { .compare-sec .vw-table.glass tbody td:last-child { padding-left: 40px; } .compare-sec .vw-table.glass tbody td:last-child::before { left: 16px; } }
/* a calm illustrative note under the comparison grid */
.compare-sec .cmp-note { margin: 26px auto 0; max-width: 1040px; font-size: 12.5px; color: var(--t-mid-d); text-align: center; }

/* forecast tidy — clean spacing, no overlap glitches */
.fc-chart { margin-bottom: 6px; }
.fc-extra { margin-top: 30px; }
.fc-panel { overflow: hidden; }
.forecast .fc-pin .lbl { display: none; }

/* ── FLICKER FIX (forecast) ──────────────────────────────────────────────
   The forecast panels sit on a SOLID dark-blue gradient, so backdrop-filter
   blur adds nothing visible — but it forced a per-frame GPU re-composite while
   the section's reveal transform animated, which produced the seam / flash.
   Solid translucent fills look identical here and never re-sample → no flash.
   This is scoped to the forecast subtree so other glass surfaces are untouched. */
.forecast .fc-panel, .forecast .fc-mini { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
.forecast .fc-panel { background: rgba(255,255,255,.055); }
.forecast .fc-mini { background: rgba(255,255,255,.06); }
/* release the GPU layer once the entrance has settled so nothing keeps repainting */
.forecast.reveal.in, .forecast .reveal.in { will-change: auto; }
/* the forecast section fades in place (no vertical travel) so its chart/area paths
   never shift under sub-pixel rounding mid-reveal — another flash source removed */
@media (prefers-reduced-motion: no-preference) { .section.forecast.reveal { transform: none; } }
.section.dark .vw-table thead th { background: var(--ink-3); color: var(--t-mid-d); }
.section.dark .vw-table td { border-color: var(--ink-4); color: var(--t-hi-d); }
.section.dark .vw-table td:first-child { color: var(--t-mid-d); }
.section.dark .vw-table tbody tr:hover { background: var(--ink-3); }

/* CALC horizontal layout + live details table */
.calc-wide { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: start; background: #fff; border: 1px solid #ECECE9; border-radius: 26px; box-shadow: 0 24px 60px rgba(8,8,10,.10); padding: 40px; }
@media (max-width: 920px) { .calc-wide { grid-template-columns: 1fr; gap: 30px; padding: 30px; } }
.calc-wide .cw-inputs { border-right: 1px solid var(--border); padding-right: 40px; }
@media (max-width: 920px) { .calc-wide .cw-inputs { border-right: none; padding-right: 0; border-bottom: 1px solid var(--border); padding-bottom: 8px; } }
.cw-results .cw-total { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 18px; }
.cw-results .cw-total .erv { font-family: var(--sans); font-weight: 700; font-size: 44px; color: var(--t-hi); font-variant-numeric: tabular-nums; line-height: 1; }
.cw-results .cw-total .erl { font-family: var(--sans); font-size: 11.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--t-mid); }

/* FORECAST — stat strip + assumptions caption (added detail) */
.fc-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; max-width: 1040px; margin: 22px auto 0; }
@media (max-width: 680px) { .fc-stats { grid-template-columns: 1fr; } }
.fc-stat { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.13); border-radius: var(--r-md); padding: 20px 22px; text-align: left; }
.fc-stat .fs-v { font-family: var(--mono); font-size: clamp(22px, 2.3vw, 28px); font-weight: 600; color: #fff; letter-spacing: -.01em; font-variant-numeric: tabular-nums; line-height: 1; }
.fc-stat .fs-v span { font-size: .52em; color: #BFD4FF; font-weight: 600; margin-left: 3px; }
.fc-stat .fs-l { font-size: 12.5px; line-height: 1.5; color: rgba(255,255,255,.7); margin-top: 10px; }
.fc-assume { max-width: 1040px; margin: 18px auto 0; font-size: 11.5px; line-height: 1.55; color: rgba(255,255,255,.5); text-align: center; }

/* FORECAST mini blue charts (donut + bars) */
.fc-extra { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; max-width: 1040px; margin: 22px auto 0; }
@media (max-width: 760px) { .fc-extra { grid-template-columns: 1fr; } }
.fc-mini { background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.16); border-radius: var(--r-lg); padding: 26px; backdrop-filter: var(--glass-blur); }
.fc-mini .fm-lbl { font-family: var(--sans); font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.7); margin-bottom: 18px; }
.fc-mini .fm-row { display: flex; align-items: center; gap: 24px; }
.fc-bars { display: grid; gap: 14px; }
.fc-bar .fb-top { display: flex; justify-content: space-between; font-size: 13px; color: #fff; margin-bottom: 7px; }
.fc-bar .fb-top span:last-child { font-family: var(--mono); color: #BFD4FF; }
.fc-bar .fb-track { height: 9px; border-radius: 5px; background: rgba(255,255,255,.14); overflow: hidden; }
.fc-bar .fb-track i { display: block; height: 100%; border-radius: 5px; background: linear-gradient(90deg, #6F9BD6, #BFD4FF); transform-origin: left; }
@media (prefers-reduced-motion: no-preference) { .forecast.in .fc-bar .fb-track i { transform: scaleX(0); animation: gmbar 1.1s var(--ease-out) .4s forwards; } }
html.reveal-all .fc-bar .fb-track i { transform: scaleX(1) !important; animation: none !important; }
.fc-donut { width: 120px; height: 120px; flex: none; position: relative; }
.fc-donut svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.fc-donut .ring { fill: none; stroke-width: 14; }
.fc-donut .ring.track { stroke: rgba(255,255,255,.14); }
.fc-donut .seg { stroke: #BFD4FF; stroke-dasharray: var(--pct) 100; }
.fc-donut .dc { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; font-family: var(--sans); font-weight: 700; font-size: 22px; color: #fff; }

/* ═══════════ PHASE 2 — glass "Visualize the numbers" CTA + personalized preview ═══════════ */
/* Glass CTA: spans the full calculator width, sits in the blank space below the inputs/banner */
.viz-cta {
  grid-column: 1 / -1; display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; margin: 4px 0 0; padding: 17px 28px; border-radius: 16px; cursor: pointer;
  font-family: var(--sans); font-weight: 700; font-size: 15px; letter-spacing: -.005em; color: var(--t-hi);
  background: rgba(255,255,255,.5); border: 1.5px solid rgba(10,10,11,.16);
  -webkit-backdrop-filter: blur(14px) saturate(160%); backdrop-filter: blur(14px) saturate(160%);
  transition: background .2s var(--ease-out), color .2s var(--ease-out), border-color .2s var(--ease-out);
}
.viz-cta svg { width: 18px; height: 18px; }
.viz-cta:hover { background: var(--accent); color: #fff; border-color: var(--accent); }
.viz-cta:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
/* on dark/colored panels (insurance card) the glass reads on a tinted surface */
.est2-card .viz-cta { margin-top: 16px; }

/* Personalized preview card at the top of the #numbers section */
.calc-summary { max-width: none; margin: 0 auto 50px; background: #fff; border: 1px solid var(--border); border-radius: 22px; box-shadow: 0 18px 50px rgba(8,8,10,.08); padding: 34px 38px; }
@media (max-width: 640px) { .calc-summary { padding: 24px 22px; margin-bottom: 38px; } }
.calc-summary .cs-eyebrow { display: inline-block; font-family: var(--mono); font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--accent); background: var(--accent-soft, var(--m-soft)); padding: 6px 12px; border-radius: var(--r-pill); margin-bottom: 16px; }
.calc-summary .cs-text { font-family: var(--sans); font-size: clamp(17px, 2vw, 21px); line-height: 1.5; color: var(--t-hi); margin: 0 0 22px; font-weight: 500; text-wrap: pretty; }
.calc-summary .cs-text b { color: var(--accent); font-weight: 700; }
.calc-summary .cs-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 18px; }
.calc-summary .cs-chip { display: flex; flex-direction: column; gap: 3px; padding: 10px 16px; background: var(--paper-2); border: 1px solid var(--border); border-radius: 14px; }
.calc-summary .cs-chip .k { font-family: var(--mono); font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--t-mid); }
.calc-summary .cs-chip .v { font-family: var(--sans); font-weight: 700; font-size: 14.5px; color: var(--t-hi); }
.calc-summary .cs-disc { font-size: 12px; line-height: 1.55; color: var(--t-mid); margin: 0; }

/* ═══════════ POLISH PASS — scroll progress, signature headline wipe, summary motion ═══════════ */

/* (a) Scroll progress — calm WHITE fill on a faint track with a soft glowing leading
   edge (the polished "end piece"). No moving shine, no shimmer. */
.scroll-prog { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 1000; pointer-events: none; background: rgba(255,255,255,.12); }
.scroll-prog > i { display: block; height: 100%; width: 0; border-radius: 0 3px 3px 0; background: linear-gradient(90deg, rgba(255,255,255,.7), #fff); box-shadow: 0 0 10px rgba(255,255,255,.5), 0 0 2px rgba(255,255,255,.75); }
@media (prefers-reduced-motion: no-preference) { .scroll-prog > i { transition: width .16s ease-out; } }

/* (b) Headline key-word wipe reveal removed per request — the red / italic word simply
   shows with the rest of the heading's fade-up. */

/* (c) Phase-2 summary card: answer chips stagger up as the section scrolls in (scroll-driven) */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .calc-summary .cs-chip {
      animation: cschip 1ms linear both;
      animation-timeline: view();
    }
    .calc-summary .cs-chip:nth-child(1) { animation-range: entry 14% entry 52%; }
    .calc-summary .cs-chip:nth-child(2) { animation-range: entry 20% entry 58%; }
    .calc-summary .cs-chip:nth-child(3) { animation-range: entry 26% entry 64%; }
    .calc-summary .cs-chip:nth-child(4) { animation-range: entry 32% entry 70%; }
  }
}
@keyframes cschip { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

/* Print / PDF: never leave scroll-driven content hidden when there is no scroll progression */
@media print {
  .section-head .h2 .red, .section-head .h2 em,
  .calc-summary .cs-chip { animation: none !important; clip-path: none !important; opacity: 1 !important; transform: none !important; }
  .reveal { opacity: 1 !important; transform: none !important; }
  .gm-line, .forecast .fc-line, .cm-line .ln, .wsa-line-path, .wsa-line-2, .tc-spk-line { stroke-dashoffset: 0 !important; }
  .gm-track i, .fc-bar .fb-track i, .cm-bar i, .wsa-bar .bk, .tc-bar i, .donut .seg { animation: none !important; transform: none !important; }
  .scroll-prog { display: none !important; }
}

/* (d) Micro-detail: when a calculator answer changes, its chip value pulses in accent */
@keyframes csbump { 0% { transform: scale(1); } 38% { transform: scale(1.14); } 100% { transform: scale(1); } }
.calc-summary .cs-chip .v { display: inline-block; transition: color .3s var(--ease-out); }
.calc-summary .cs-chip .v.bump { animation: csbump .42s var(--ease-spring); color: var(--accent); }

/* (e) viz-cta: a faint inner sheen so the glass reads as glass on the white card */
.viz-cta { position: relative; overflow: hidden; }
.viz-cta::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(255,255,255,.5), rgba(255,255,255,0) 60%); pointer-events: none; opacity: .9; transition: opacity .2s var(--ease-out); }
.viz-cta:hover::before { opacity: 0; }

/* ═══════════ PHASE 6 — footer lead text + insurance light footer ═══════════ */
.footer-lead { max-width: 760px; margin: 0 0 48px; padding-bottom: 40px; border-bottom: 1px solid rgba(255,255,255,.1); }
.footer-lead h3 { font-family: var(--serif); font-weight: 300; font-size: clamp(28px, 3.4vw, 40px); color: #fff; margin: 0 0 14px; letter-spacing: -.02em; line-height: 1.12; min-height: 2.1em; transition: opacity .48s var(--ease-out), transform .48s var(--ease-out); }
.footer-lead p { font-size: 16px; line-height: 1.6; color: var(--t-mid-d); margin: 0; max-width: 60ch; min-height: 3.2em; transition: opacity .48s var(--ease-out) .04s, transform .48s var(--ease-out) .04s; }
.footer-lead.swapping h3, .footer-lead.swapping p { opacity: 0; transform: translateY(-7px); }
@media (max-width: 640px) { .footer-lead { margin-bottom: 36px; padding-bottom: 30px; } }

/* hero-style rotating footer headline: one fixed lead line + an italic accent phrase
   that alternates between 3 variations, mirroring the hero's rotating word */
.footer-rot { font-family: var(--serif); font-weight: 300; font-size: clamp(28px, 3.6vw, 44px); letter-spacing: -.02em; line-height: 1.1; color: #fff; margin: 0 0 16px; min-height: 2.2em; }
.footer-rot .fr-lead { color: #fff; }
.footer-rot .fr-word { display: inline-block; font-style: italic; color: var(--accent); transition: opacity .5s var(--ease-out), transform .5s var(--ease-out); will-change: opacity, transform; }
.footer-rot .fr-word.out { opacity: 0; transform: translateY(-7px); }
[data-brand="insurance"] .footer-rot .fr-word { color: var(--i); }
@media (prefers-reduced-motion: reduce) { .footer-rot .fr-word { transition: none; } }

/* Insurance footer matches the dark mortgage footers exactly — only the accent is green.
   (Previously it was flipped to a light/paper surface, which read as an inconsistency
   against the three dark mortgage footers. It now inherits the shared dark footer.) */
[data-brand="insurance"] .footer-brand .mark { color: var(--i); }
[data-brand="insurance"] .footer-brand .nap a:hover,
[data-brand="insurance"] .footer-legal a:hover,
[data-brand="insurance"] .footer-col a:hover { color: var(--i); }
[data-brand="insurance"] .footer-soc a:hover { color: #fff; border-color: color-mix(in srgb, var(--i) 55%, var(--ink-4)); }

/* ═══════════ PHASE 6 — Compare Your Options buildout ═══════════ */
.cmp3-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-bottom: 30px; }
@media (max-width: 860px) { .cmp3-grid { grid-template-columns: 1fr; } }
.cmp3-card { position: relative; background: linear-gradient(180deg, var(--ink-2), color-mix(in srgb, var(--ink-1) 80%, var(--ink-2))); border: 1px solid rgba(255,255,255,.09); border-radius: var(--r-xl); padding: 30px; box-shadow: 0 18px 44px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.05); }
.cmp3-card .c3-ic { width: 44px; height: 44px; border-radius: 13px; background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent); display: grid; place-items: center; margin-bottom: 18px; }
.cmp3-card .c3-ic svg { width: 22px; height: 22px; }
.cmp3-card h4 { font-family: var(--serif); font-weight: 300; font-size: 23px; color: #fff; margin: 0 0 10px; letter-spacing: -.01em; }
.cmp3-card p { font-size: 14.5px; line-height: 1.55; color: var(--t-mid-d); margin: 0; }
.cmp-tablewrap { background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.1); border-radius: var(--r-xl); padding: 12px 14px 6px; box-shadow: inset 0 1px 0 rgba(255,255,255,.06); }
.cmp-tablewrap .vw-table { background: transparent; border: none; }
.cmp-checklist { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin: 28px 0 0; }
.cmp-chip { display: inline-flex; align-items: center; gap: 8px; padding: 9px 15px; border-radius: var(--r-pill); background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12); font-size: 13px; color: var(--t-hi-d); }
.cmp-chip svg { width: 14px; height: 14px; color: var(--accent); flex: none; }
.cmp-guide { margin-top: 30px; display: flex; align-items: center; justify-content: space-between; gap: 28px; flex-wrap: wrap; background: rgba(255,255,255,.045); border: 1px solid rgba(255,255,255,.12); border-radius: var(--r-xl); padding: 34px 40px; box-shadow: inset 0 1px 0 rgba(255,255,255,.06); position: relative; overflow: hidden; }
.cmp-guide::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(90% 130% at 0% 0%, color-mix(in srgb, var(--accent) 11%, transparent), transparent 58%); }
.cmp-guide > * { position: relative; z-index: 1; }
.cmp-guide .cg-copy { max-width: 58ch; }
.cmp-guide h3 { font-family: var(--serif); font-weight: 300; font-size: 28px; color: #fff; margin: 0 0 9px; letter-spacing: -.01em; }
.cmp-guide p { font-size: 15px; color: var(--t-mid-d); margin: 0 0 10px; line-height: 1.55; }
.cmp-guide .cg-note { font-size: 11.5px; color: var(--t-lo-d); display: block; line-height: 1.5; }
.cmp-guide .btn { flex: none; }
@media (max-width: 640px) { .cmp-guide { padding: 26px 22px; gap: 20px; } .cmp-guide h3 { font-size: 24px; } }

/* ═══════════════ Premium "Your numbers, visualized" charts rebuild (all 4 sites) ═══════════════ */
/* FIX: donut segment circles were defaulting to fill:black (black center). Never fill. */
.donut circle, .donut .seg, .donut .ring { fill: none; }
/* ── premium card shell (donut / bars / line) ── */
#numbers .wrap { max-width: 1180px; }
#numbers .nv-card, #numbers .cm-line-card {
  background: linear-gradient(180deg,#fff,#FBFAF7); border:1px solid #ECEAE4; border-radius:28px;
  padding:34px 36px; box-shadow:0 26px 64px rgba(8,8,10,.07), inset 0 1px 0 rgba(255,255,255,.8);
  position:relative; overflow:hidden;
}
#numbers .nv-card::before, #numbers .cm-line-card::before {
  content:""; position:absolute; top:0; left:0; right:0; height:3px;
  background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--accent) 55%,transparent),transparent); opacity:.85;
}
@media (max-width:540px){ #numbers .nv-card, #numbers .cm-line-card { padding:24px 20px; } }
#numbers .nv-card-h { margin-bottom:24px; }
#numbers .nv-card-h .cm-lbl { font-family:var(--serif); font-weight:400; font-style:italic; font-size:clamp(20px,2vw,25px); letter-spacing:-.01em; color:var(--t-hi); line-height:1.2; }
#numbers .nv-card-h .cm-sub { font-size:13px; color:var(--t-mid); margin-top:7px; }

/* ── metric strip ── */
#numbers .nv-metrics { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin:0 0 34px; }
@media (max-width:780px){ #numbers .nv-metrics { grid-template-columns:repeat(2,1fr); } }
#numbers .nv-metric { background:#fff; border:1px solid #ECEAE4; border-radius:18px; padding:20px 22px; box-shadow:0 4px 18px rgba(8,8,10,.04); position:relative; overflow:hidden; transition:transform .3s var(--ease-out), box-shadow .3s; }
#numbers .nv-metric::after { content:""; position:absolute; left:0; top:14px; bottom:14px; width:3px; border-radius:0 3px 3px 0; background:var(--accent); opacity:0; transition:opacity .3s; }
#numbers .nv-metric:hover { transform:translateY(-3px); box-shadow:0 16px 36px rgba(8,8,10,.09); }
#numbers .nv-metric:hover::after { opacity:.9; }
#numbers .nv-metric .k { display:block; font-family:var(--mono); font-size:10px; letter-spacing:.13em; text-transform:uppercase; color:var(--t-mid); }
#numbers .nv-metric .v { display:inline-block; font-family:var(--sans); font-weight:800; font-size:clamp(22px,2.4vw,28px); letter-spacing:-.02em; color:var(--t-hi); margin:8px 0 4px; line-height:1; }
#numbers .nv-metric .v.bump { animation:csbump .5s var(--ease-spring); color:var(--accent); }
#numbers .nv-metric .s { display:block; font-size:12px; color:var(--t-lo); }

/* ── two-column grid (donut | bars) ── */
#numbers .nv-grid { display:grid; grid-template-columns:1fr 1fr; gap:24px; }
@media (max-width:960px){ #numbers .nv-grid { grid-template-columns:1fr; } }

/* ── donut ── */
#numbers .nv-donut-wrap { display:flex; align-items:center; gap:30px; }
@media (max-width:480px){ #numbers .nv-donut-wrap { flex-direction:column; gap:24px; text-align:center; } }
#numbers .nv-donut { position:relative; width:200px; height:200px; flex:none; }
#numbers .nv-donut-svg { width:100%; height:100%; transform:rotate(-90deg); overflow:visible; }
#numbers .nv-track { fill:none; stroke:#EEECE6; stroke-width:14; }
#numbers .nv-seg { fill:none; stroke-width:14; stroke-linecap:butt; transition:stroke-dasharray .9s var(--ease-out), stroke-dashoffset .9s var(--ease-out), stroke-width .25s var(--ease-out), opacity .25s; }
#numbers .nv-seg.dim { opacity:.26; }
#numbers .nv-seg.pop { stroke-width:17; }
#numbers .nv-donut-ctr { position:absolute; inset:0; display:grid; place-content:center; text-align:center; pointer-events:none; }
#numbers .nv-donut-ctr .cv { font-family:var(--sans); font-weight:800; font-size:30px; letter-spacing:-.02em; color:var(--t-hi); line-height:1; }
#numbers .nv-donut-ctr .cl { font-family:var(--mono); font-size:9px; letter-spacing:.14em; text-transform:uppercase; color:var(--t-mid); margin-top:7px; }
#numbers .nv-legend { flex:1; min-width:0; display:flex; flex-direction:column; }
#numbers .nv-leg { display:grid; grid-template-columns:auto 1fr auto auto; align-items:center; gap:11px; padding:11px 8px; border-bottom:1px solid #F1EFE9; border-radius:8px; transition:background .2s, opacity .2s; cursor:default; }
#numbers .nv-leg:last-child { border-bottom:none; }
#numbers .nv-leg:hover { background:#FAF8F3; }
#numbers .nv-leg.dim { opacity:.4; }
#numbers .nv-leg .sw { width:12px; height:12px; border-radius:4px; flex:none; }
#numbers .nv-leg .nl { font-size:14px; color:var(--t-mid); line-height:1.3; }
#numbers .nv-leg .nv { font-family:var(--sans); font-weight:700; font-size:14.5px; color:var(--t-hi); }
#numbers .nv-leg .np { font-family:var(--mono); font-size:12px; color:var(--t-lo); min-width:34px; text-align:right; }

/* ── scenario bars ── */
#numbers .nv-bars { display:flex; align-items:flex-end; gap:20px; height:212px; padding-top:6px; background-image:repeating-linear-gradient(to top, rgba(10,10,11,.045) 0 1px, transparent 1px 25%); border-bottom:1px solid #ECEAE4; }
#numbers .nv-bar { flex:1; display:flex; flex-direction:column; justify-content:flex-end; align-items:center; height:100%; min-width:0; }
#numbers .nv-bar .bv { font-family:var(--sans); font-weight:700; font-size:13px; color:var(--t-mid); margin-bottom:10px; white-space:nowrap; }
#numbers .nv-bar.on .bv { color:var(--accent); }
#numbers .nv-bar .bk { width:74%; display:flex; align-items:flex-end; flex:1; }
#numbers .nv-bar .bk i { width:100%; border-radius:12px 12px 4px 4px; background:linear-gradient(180deg,#D8D6CE,#E9E7E0); box-shadow:inset 0 1px 0 rgba(255,255,255,.5); transition:height .9s var(--ease-out); }
#numbers .nv-bar.on .bk i { background:linear-gradient(180deg,var(--accent),color-mix(in srgb,var(--accent) 32%,#fff)); box-shadow:inset 0 1px 0 rgba(255,255,255,.45), 0 10px 26px color-mix(in srgb,var(--accent) 26%,transparent); }
#numbers .nv-bar .bl { font-size:12.5px; font-weight:600; color:var(--t-mid); margin-top:14px; text-align:center; line-height:1.3; display:flex; flex-direction:column; align-items:center; gap:5px; }
#numbers .nv-bar.on .bl { color:var(--t-hi); }
#numbers .nv-bar .bl em { font-family:var(--mono); font-style:normal; font-size:8px; letter-spacing:.12em; text-transform:uppercase; color:#fff; background:var(--accent); padding:2px 8px; border-radius:100px; }

/* ── insight callout ── */
#numbers .nv-insight { display:flex; align-items:flex-start; gap:12px; margin-top:22px; padding:15px 17px; background:color-mix(in srgb,var(--accent) 7%,#fff); border:1px solid color-mix(in srgb,var(--accent) 16%,transparent); border-radius:14px; }
#numbers .nv-insight .ni-ic { flex:none; width:22px; height:22px; color:var(--accent); margin-top:1px; }
#numbers .nv-insight .ni-ic svg { width:100%; height:100%; }
#numbers .nv-insight p { margin:0; font-size:13.5px; line-height:1.5; color:var(--t-hi); }

/* ── line card ── */
#numbers .cm-line-card { margin-top:24px; }
#numbers .cm-line { height:250px; margin-top:4px; }
#numbers .cm-line .ln { stroke:var(--accent)!important; stroke-width:3.5; filter:drop-shadow(0 8px 16px color-mix(in srgb,var(--accent) 20%,transparent)); }
#numbers .cm-line stop:first-child { stop-color:var(--accent); stop-opacity:.18; }
#numbers .cm-line stop:last-child { stop-color:var(--accent); stop-opacity:0; }
#numbers .cm-line-dot { stroke:var(--accent)!important; }
#numbers .cm-line-dots circle:last-child { fill:var(--accent)!important; filter:drop-shadow(0 0 6px color-mix(in srgb,var(--accent) 45%,transparent)); }
#numbers .cm-axis { margin-top:14px; font-size:11px; color:var(--t-mid); }

/* ── CTA band beneath the line chart ── */
#numbers .nv-cta { margin-top:24px; position:relative; overflow:hidden; display:flex; align-items:center; justify-content:space-between; gap:30px; flex-wrap:wrap; background:var(--accent); border-radius:28px; padding:38px 44px; box-shadow:0 26px 64px color-mix(in srgb,var(--accent) 24%, transparent); }
#numbers .nv-cta-glow { position:absolute; inset:0; pointer-events:none; background:radial-gradient(70% 130% at 88% -10%, rgba(255,255,255,.30), transparent 60%); }
#numbers .nv-cta-copy { position:relative; max-width:58ch; }
#numbers .nv-cta-eyebrow { display:inline-block; font-family:var(--mono); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:rgba(255,255,255,.82); margin-bottom:12px; }
#numbers .nv-cta h3 { font-family:var(--serif); font-weight:300; font-size:clamp(26px,3vw,36px); color:#fff; margin:0 0 10px; letter-spacing:-.01em; line-height:1.12; }
#numbers .nv-cta p { margin:0; font-size:15px; line-height:1.55; color:rgba(255,255,255,.9); }
#numbers .nv-cta-actions { position:relative; display:flex; flex-direction:column; align-items:flex-start; gap:12px; }
#numbers .nv-cta-btn { display:inline-flex; align-items:center; gap:9px; background:#fff; color:var(--accent); font-family:var(--mono); font-size:12px; letter-spacing:.1em; text-transform:uppercase; font-weight:700; padding:16px 28px; border-radius:var(--r-pill); box-shadow:0 12px 30px rgba(8,8,10,.2); transition:transform .2s var(--ease-out), box-shadow .2s; white-space:nowrap; }
#numbers .nv-cta-btn svg { width:15px; height:15px; }
#numbers .nv-cta-btn:hover { transform:translateY(-2px); box-shadow:0 18px 40px rgba(8,8,10,.28); }
#numbers .nv-cta-note { font-size:11.5px; color:rgba(255,255,255,.72); max-width:36ch; line-height:1.45; }
@media (max-width:640px){ #numbers .nv-cta { padding:28px 24px; } #numbers .nv-cta-actions { align-items:stretch; width:100%; } #numbers .nv-cta-btn { justify-content:center; } }

#numbers .cm-note { font-size:12px; color:var(--t-lo); margin-top:22px; text-align:center; max-width:760px; margin-left:auto; margin-right:auto; line-height:1.6; }


/* ═══════════ Forecast — fix the disconnected floating endpoint pins (visual bug) ═══════════ */
/* the home/check pins floated at the top of the chart, detached from the line. Remove them
   for a clean line+area; the "$0 today → payoff" stats above already convey the endpoints. */
.forecast .fc-pin { display: none !important; }
.forecast .fc-chart { overflow: hidden; border-radius: 12px; }
/* insurance footer lead now matches the mortgage footers — plain dark, bottom rule only */
[data-brand="insurance"] .footer-lead { background: none; border: 0; border-bottom: 1px solid rgba(255,255,255,.1); border-radius: 0; padding: 0 0 40px; margin-bottom: 44px; }
[data-brand="insurance"] .footer-lead h3 { color: #fff; }
[data-brand="insurance"] .footer-lead p { color: rgba(255,255,255,.72); }
@media (max-width: 640px) { [data-brand="insurance"] .footer-lead { padding: 0 0 30px; margin-bottom: 36px; } }

/* ═══════════ Reviews — the 3rd tile (moss) is a light lilac purple on all 4 sites ═══════════ */
.reviews .rev-disclaimer { text-align: center; font-size: 12px; color: var(--t-mid); margin: 26px auto 0; max-width: 760px; line-height: 1.6; }

/* ════════════════════════════════════════════════════════════════════════
   HEADER POLISH — larger logo, organized brand / NMLS / powered-by hierarchy
   ════════════════════════════════════════════════════════════════════════ */
.site-header .brand { gap: 13px; }
.site-header .brand .mark { width: 42px; height: 42px; }               /* +17% logo */
.site-header .brand .bt { display: flex; flex-direction: row; flex-wrap: wrap; align-items: baseline; column-gap: 7px; row-gap: 2px; max-width: 300px; }
.site-header .brand .bn { flex: 0 0 100%; font-size: 20px; line-height: 1.05; }
.site-header .brand .bs,
.site-header .brand .bx { display: inline; margin-top: 0; font-size: 9px; }
.site-header .brand .bx::before { content: "•"; margin-right: 7px; color: rgba(255,255,255,.34); }
.site-header.scrolled .brand .bx::before { color: rgba(10,10,11,.3); }
/* keep the powered-by line on a tidy single meta row on desktop; hide it as space tightens */
@media (min-width: 1101px) { .site-header .brand .bx { display: inline; } }
@media (max-width: 1100px) { .site-header .brand .bx { display: none; } }
@media (max-width: 600px)  { .site-header .brand .mark { width: 40px; height: 40px; } .site-header .brand .bn { font-size: 18px; } }
@media (max-width: 380px)  { .site-header .brand .mark { width: 36px; height: 36px; } .site-header .brand .bt { max-width: 190px; } }
/* phone + CTA: a touch more breathing room, consistent sizing */
.header-right { gap: 16px; }
.header-cta { padding: 11px 17px; }
.drawer-top .brand .mark { width: 34px; height: 34px; }

/* ════════════════════════════════════════════════════════════════════════
   FLOWER MARQUEE — premium moving strip pinned to the foot of the flower CTA,
   directly above the footer (distinct from the top awards .trust-marquee).
   The footer headline is now static; this is the only moving footer-style band.
   ════════════════════════════════════════════════════════════════════════ */
.flower-marquee { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; overflow: hidden; padding: 17px 0;
  background: linear-gradient(180deg, rgba(8,8,10,0), rgba(8,8,10,.5) 42%, rgba(8,8,10,.82));
  border-top: 1px solid rgba(255,255,255,.12);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); }
.fm-track { display: inline-flex; align-items: center; white-space: nowrap; will-change: transform; }
.fm-item { font-family: var(--sans); font-size: 13px; font-weight: 600; letter-spacing: .015em; color: rgba(255,255,255,.92); padding: 0 4px; }
.fm-sep { width: 5px; height: 5px; border-radius: 50%; background: var(--accent); margin: 0 24px; flex: none; display: inline-block; }
[data-brand="insurance"] .fm-sep { background: var(--i); }
@media (prefers-reduced-motion: no-preference) {
  .fm-track { animation: fmScroll 42s linear infinite; }
  .flower-marquee:hover .fm-track { animation-play-state: paused; }
}
@keyframes fmScroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (max-width: 600px) { .flower-marquee { padding: 13px 0; } .fm-item { font-size: 12px; } .fm-sep { margin: 0 17px; } }
/* give the flower CTA room (the trust content lives up under the hero now) */
.final { padding-bottom: 200px; }
@media (max-width: 760px) { .final { padding-bottom: 104px; } }

/* static footer headline (the moving text moved up into the trust marquee) */
.footer-lead h3 .fl-accent { font-style: italic; color: var(--accent); }
[data-brand="insurance"] .footer-lead h3 .fl-accent { color: var(--i); }

/* ════════════════════════════════════════════════════════════════════════
   TRUST CYCLE — one band under the hero that cross-fades / loops between a
   stats slide and a partners slide (both fade in and out). Reserves height so
   there is no layout shift; reduced-motion shows the first slide statically.
   ════════════════════════════════════════════════════════════════════════ */
.trustcycle { position: relative; overflow: hidden; background: var(--paper-2); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: clamp(38px, 4.2vw, 60px) 0; }
.trustcycle::before { content: ""; position: absolute; left: 50%; top: -38%; width: min(960px, 94vw); height: 540px; transform: translateX(-50%); background: radial-gradient(58% 58% at 50% 50%, color-mix(in srgb, var(--accent) 9%, transparent), transparent 70%); pointer-events: none; }
[data-brand="insurance"] .trustcycle::before { background: radial-gradient(58% 58% at 50% 50%, color-mix(in srgb, var(--i) 9%, transparent), transparent 70%); }
.tcyc-stage { position: relative; max-width: 940px; margin: 0 auto; padding: 0 24px; min-height: 196px; }
.tcyc-slide { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; text-align: center;
  opacity: 0; visibility: hidden;
  transition: opacity .6s var(--ease-out), visibility 0s linear .6s; }
.tcyc-slide.is-active { opacity: 1; visibility: visible;
  transition: opacity .6s var(--ease-out); }
/* two-beat reveal: the titled intro lands first, then the stats / partners */
.tcyc-head { display: flex; flex-direction: column; align-items: center; gap: 13px; }
.tcyc-kicker { font-family: var(--mono); font-size: 12px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--accent); }
[data-brand="insurance"] .tcyc-kicker { color: var(--i); }
.tcyc-title { font-family: var(--serif); font-weight: 300; font-style: italic; font-size: clamp(25px, 2.9vw, 38px); line-height: 1.05; letter-spacing: -.02em; color: var(--t-hi); }
.tcyc-head, .tcyc-stats, .tcyc-logos { opacity: 0; transform: translateY(16px); transition: opacity .6s var(--ease-out), transform .6s var(--ease-out); }
.tcyc-slide.is-active .tcyc-head { opacity: 1; transform: none; transition-delay: .08s; }
.tcyc-slide.is-active .tcyc-stats, .tcyc-slide.is-active .tcyc-logos { opacity: 1; transform: none; transition-delay: .55s; }
.tcyc-eyebrow { font-family: var(--sans); font-size: 12px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--accent); }
[data-brand="insurance"] .tcyc-eyebrow { color: var(--i); }
/* stats slide */
.tcyc-stats { display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(26px,3.2vw,52px); }
.tcyc-stat { display: flex; flex-direction: column; align-items: center; min-width: 122px; opacity: 0; transform: translateY(14px); transition: opacity .5s var(--ease-out), transform .5s var(--ease-out); }
.tcyc-slide.is-active .tcyc-stat { opacity: 1; transform: none; }
.tcyc-slide.is-active .tcyc-stat:nth-child(1) { transition-delay: .60s; }
.tcyc-slide.is-active .tcyc-stat:nth-child(2) { transition-delay: .70s; }
.tcyc-slide.is-active .tcyc-stat:nth-child(3) { transition-delay: .80s; }
.tcyc-slide.is-active .tcyc-stat:nth-child(4) { transition-delay: .90s; }
.tcyc-stat .n { font-family: var(--serif); font-weight: 300; font-size: clamp(34px,3.6vw,48px); line-height: 1; letter-spacing: -.02em; color: var(--accent); font-variant-numeric: tabular-nums; }
[data-brand="insurance"] .tcyc-stat .n { color: var(--i); }
.tcyc-stat .l { font-family: var(--sans); font-size: 13.5px; font-weight: 600; color: var(--t-mid); margin-top: 12px; letter-spacing: .01em; }
/* partners slide */
.tcyc-logos { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: clamp(28px,5vw,64px); }
.ps-logo { font-family: var(--sans); font-weight: 800; font-size: clamp(20px,2.1vw,27px); letter-spacing: -.015em; color: #1c1c26; opacity: .5; white-space: nowrap; transition: opacity .35s var(--ease-out); }
.ps-logo.lc { text-transform: lowercase; letter-spacing: -.03em; }
.ps-logo.uc { text-transform: uppercase; letter-spacing: .06em; font-weight: 700; }
.ps-logo .sl { color: var(--accent); font-weight: 800; }
.ps-logo:hover { opacity: 1; }
[data-brand="insurance"] .ps-logo .sl { color: var(--i); }
/* pagination dots */
.tcyc-dots { position: relative; display: flex; justify-content: center; gap: 10px; margin-top: 42px; }
.tcyc-dot { width: 8px; height: 8px; border-radius: 50%; background: #d0d0d8; border: none; padding: 0; cursor: pointer; transition: background .3s var(--ease-out), transform .3s var(--ease-out); }
.tcyc-dot:hover { background: #b6b6bf; }
.tcyc-dot.on { background: var(--accent); transform: scale(1.35); }
[data-brand="insurance"] .tcyc-dot.on { background: var(--i); }
.tcyc-disc { position: relative; text-align: center; font-family: var(--sans); font-size: 11.5px; color: var(--t-lo); margin-top: 18px; padding: 0 24px; }
@media (prefers-reduced-motion: reduce) { .tcyc-slide { transition: opacity .25s; } .tcyc-head, .tcyc-stats, .tcyc-logos, .tcyc-stat { opacity: 1; transform: none; transition: none; } .tcyc-dots { display: none; } }
@media (max-width: 600px) { .tcyc-stage { min-height: 290px; } .tcyc-slide { gap: 20px; } }

/* harden against transient horizontal scroll from directional (.from-l/.from-r) reveals
   before they animate in — clip the root horizontally without creating a scroll container */
html { overflow-x: clip; }