/* ═══════════════════════════════════════════════════════════════════════
   POLISH PASS  (loads LAST — after wsa2.css)
   Shared by all 4 sites. Surgical refinements only:
     1. iPhone → iPhone 17 Pro Max, ultra-realistic titanium
     2. "What sets us apart" → de-shine + cleaner, calmer UI
     3. Forecast → main chart sized to align with the stat-card row
     4. Trusted partners → company-stats credibility band above the logos
   All motion respects prefers-reduced-motion.
   ═══════════════════════════════════════════════════════════════════════ */

/* ───────────────────────────────────────────────────────────────────────
   1 · iPHONE 17 PRO MAX — ultra-realistic titanium device
   Layered build:  titanium rail  →  thin polished chamfer  →  uniform
   black bezel (glass)  →  active display.  Bezels are thin + even, the
   way the Pro models actually look.
   ─────────────────────────────────────────────────────────────────────── */
.appsec-stage { perspective: 2400px; padding: 28px 0; }

.appsec .iphone {
  width: clamp(272px, 30vw, 352px);
  aspect-ratio: 1320 / 2868;            /* 17 Pro Max display ratio */
  border-radius: 64px;
  padding: 7px;                          /* visible titanium rail thickness */
  /* faceted, polished natural-titanium rail — bright catches + dark facets */
  background:
    linear-gradient(118deg,
      #e9eaee 0%, #babcc2 5%, #5c5e64 12%, #9fa1a7 18%, #3a3b40 30%,
      #7a7c82 44%, #2b2c30 58%, #6c6e74 70%, #2f3034 82%, #8e9096 90%,
      #cfd1d5 96%, #4a4b50 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.30),     /* crisp outer chamfer line */
    inset 0 2px 1px rgba(255,255,255,.55),
    inset 0 -2px 3px rgba(0,0,0,.6),
    -46px 64px 96px -40px rgba(0,0,0,.85),     /* grounding contact shadow */
    0 46px 88px -16px rgba(0,0,0,.55);
  transform: rotateY(-16deg) rotateX(3deg) rotateZ(.3deg);
  transition: transform .9s var(--ease-out), box-shadow .9s var(--ease-out);
}
@media (max-width: 940px) { .appsec .iphone { transform: rotateY(-9deg) rotateX(2deg); } }
@media (prefers-reduced-motion: reduce) { .appsec .iphone { transform: none !important; } }
/* gentle settle toward the viewer when the section enters */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .appsec-stage:hover .iphone { transform: rotateY(-9deg) rotateX(2deg) translateY(-6px); }
}

/* black front glass + the bezel: the metal rail wraps a uniform black border */
.appsec .iphone::before {
  content: ""; position: absolute; inset: 7px; border-radius: 57px;
  background: #000; z-index: 0; pointer-events: none;
  box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.06);   /* inner chamfer glint */
}

/* the active display — sits inside the black glass with a thin, even bezel */
.appsec .ip-screen {
  border-radius: 49px;
  margin: 4px;                           /* the uniform black bezel gap */
  width: calc(100% - 8px);
  height: calc(100% - 8px);
  padding: 13px 14px 0;
  background: radial-gradient(135% 90% at 50% -8%, #18161b, #0A0A0C 58%);
  box-shadow: inset 0 0 0 1px #000, inset 0 0 30px rgba(0,0,0,.6);
  z-index: 1;
}
/* faint, static screen reflection across the top corner — restrained, not gaudy */
.appsec .ip-screen::after {
  content: ""; position: absolute; inset: 0; z-index: 5; pointer-events: none;
  border-radius: inherit;
  background: linear-gradient(146deg, rgba(255,255,255,.06) 0%, rgba(255,255,255,0) 20%);
}

/* Dynamic Island — true pill with a hinted front camera lens */
.appsec .ip-island {
  top: 14px; width: 96px; height: 28px; border-radius: 16px;
  background: #000; z-index: 7;
  box-shadow: 0 0 0 1px rgba(255,255,255,.05);
}
.appsec .ip-island::after {
  content: ""; position: absolute; top: 50%; right: 10px; transform: translateY(-50%);
  width: 9px; height: 9px; border-radius: 50%;
  background: radial-gradient(circle at 38% 34%, #36405a 0 24%, #0a0c12 62%);
  box-shadow: inset 0 0 0 1px rgba(120,140,180,.22);
}

/* iOS home indicator */
.appsec .ip-screen::before {
  content: ""; position: absolute; bottom: 8px; left: 50%; transform: translateX(-50%);
  width: 116px; height: 5px; border-radius: 3px;
  background: rgba(255,255,255,.42); z-index: 8;
}

/* titanium side buttons — dimensional rails catching the same light */
.appsec .ip-side { border-radius: 2px 3px 3px 2px;
  background: linear-gradient(180deg, #d6d7db 0%, #7c7e84 26%, #3a3b40 64%, #19191c 100%);
  box-shadow: -1.5px 0 2px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.5), inset 0 -1px 0 rgba(0,0,0,.4); }
.appsec .ip-vu  { left: -4px; top: 23%; width: 4px; height: 30px; }   /* volume up */
.appsec .ip-vd  { left: -4px; top: 31.5%; width: 4px; height: 52px; } /* volume down */
.appsec .ip-act { left: -4px; top: 15%; width: 4px; height: 26px; }   /* Action button */
.appsec .ip-power { right: -4px; top: 26%; width: 4px; height: 84px; }/* side / power */
/* Camera Control button (new on 16/17) — short, lower on the right rail */
.appsec .ip-power::after {
  content: ""; position: absolute; right: 0; top: 108px; width: 4px; height: 30px;
  border-radius: 2px; background: inherit; box-shadow: inherit;
}

/* ── on-screen UI refinements: no awkward wraps, calmer native-iOS feel ── */
.appsec .ip-pill, .appsec .ip-delta { white-space: nowrap; }
.appsec .ip-delta {
  align-self: center; font-size: 10px; font-weight: 700; letter-spacing: .02em;
  color: var(--accent); background: color-mix(in srgb, var(--accent) 15%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 38%, transparent);
  padding: 4px 9px; border-radius: 999px;
}
.appsec .ip-card { border-radius: 20px; padding: 15px 15px 16px; }
.appsec .ip-amt { font-size: 27px; margin-top: 5px; }
.appsec .ip-chart { height: 56px; margin: 12px 0 10px; opacity: .96; }
.appsec .ip-tabs span { padding: 7px 0; border-radius: 9px; }
.appsec .ip-tabs span.on { box-shadow: 0 4px 12px color-mix(in srgb, var(--accent) 36%, transparent); }
.appsec .ip-nav { padding-bottom: 26px; }   /* clear the home indicator */

/* ───────────────────────────────────────────────────────────────────────
   2 · WHAT SETS US APART — de-shine + cleaner, calmer UI
   ─────────────────────────────────────────────────────────────────────── */
/* (a) kill the soft bloom behind every card + the top inset gloss */
.wsa .nw-card::before { display: none !important; }
.wsa .nw-card {
  background: #131317 !important;
  border-color: rgba(255,255,255,.07) !important;
  box-shadow: 0 24px 56px rgba(0,0,0,.5) !important;
}
/* (b) screen panel: flat, crisp — no top white glow */
.wsa .nw-screen {
  background: #0A0A0D !important;
  border-color: rgba(255,255,255,.06) !important;
  box-shadow: 0 14px 34px rgba(0,0,0,.34) !important;
}
.wsa .nw-screen::before { opacity: .35 !important; }   /* fainter tech grid */

/* (c) flatten the Live / Scanning tag pills — no glossy fill, no glow, calm dot */
.wsa .nw-badge,
.wsa .nw-bar .live {
  background: transparent !important;
  border-color: rgba(255,255,255,.16) !important;
  color: var(--t-mid-d) !important;
  font-weight: 600 !important;
}
.wsa .nw-badge i,
.wsa .nw-bar .live b {
  background: color-mix(in srgb, var(--accent) 78%, #fff) !important;
  box-shadow: none !important;
}

/* (d) de-shine the "best lender" bar + soften the scan beam */
.wsa .nw-bcol.best .bk { box-shadow: none !important; background: var(--accent) !important; }
.wsa .nw-bcol .bk { background: rgba(255,255,255,.16); }
.wsa .nw-beam { background: linear-gradient(90deg, transparent, rgba(255,255,255,.08), transparent) !important; }

/* (e) callouts: flat accent-tinted surfaces instead of white-gloss gradients */
.wsa .nw-save,
.wsa .nw-result {
  background: color-mix(in srgb, var(--accent) 9%, rgba(255,255,255,.022)) !important;
  border-color: color-mix(in srgb, var(--accent) 26%, transparent) !important;
}
.wsa .nw-prow .pic {
  background: rgba(255,255,255,.05) !important;
  border-color: rgba(255,255,255,.12) !important;
}

/* (f) gentle, premium hover lift on the two cards */
@media (hover: hover) {
  .wsa .nw-card { transition: transform .4s var(--ease-out), border-color .4s var(--ease-out), box-shadow .4s var(--ease-out); }
  .wsa .nw-card:hover {
    transform: translateY(-5px);
    border-color: color-mix(in srgb, var(--accent) 30%, rgba(255,255,255,.07)) !important;
    box-shadow: 0 32px 64px rgba(0,0,0,.55), 0 0 0 1px color-mix(in srgb, var(--accent) 14%, transparent) !important;
  }
}

/* ───────────────────────────────────────────────────────────────────────
   3 · FORECAST — size the main chart panel to the stat-card row width
   (left edge aligns with the "3.5% down" card, right edge with "100% payoff")
   ─────────────────────────────────────────────────────────────────────── */
.forecast .fc-panel {
  max-width: 1040px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
.forecast .fc-chart { height: clamp(176px, 13.5vw, 248px) !important; }

/* ───────────────────────────────────────────────────────────────────────
   4 · TRUSTED PARTNERS — company-stats credibility band above the logos
   ─────────────────────────────────────────────────────────────────────── */
.trust-stats {
  display: flex; justify-content: center; align-items: flex-start;
  gap: clamp(26px, 5vw, 88px); flex-wrap: wrap;
  margin: 0 auto clamp(26px, 3vw, 40px);
  padding-bottom: clamp(26px, 3vw, 40px);
  border-bottom: 1px solid var(--border);
}
.ts-item { text-align: center; min-width: 92px; }
.ts-n {
  font-family: var(--mono); font-weight: 600;
  font-size: clamp(30px, 3.5vw, 46px); line-height: 1;
  letter-spacing: -.02em; color: var(--t-hi);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.ts-n small { font-size: .56em; font-weight: 600; color: var(--accent); margin-left: 1px; }
.ts-l {
  margin-top: 11px; font-family: var(--sans); font-size: 12.5px; font-weight: 600;
  letter-spacing: .01em; color: var(--t-mid); text-wrap: balance; max-width: 15ch; margin-inline: auto;
}
@media (max-width: 640px) {
  .trust-stats { gap: 22px 30px; }
  .ts-item { min-width: 38%; }
  .ts-n { font-size: clamp(28px, 9vw, 38px); }
}

/* simple, clean entrance — the container fades via the site's standard .reveal;
   each stat then rises in with a gentle stagger. Items keep opacity:1 so the
   no-JS / print fallback (html.reveal-all) and reduced-motion always show them. */
@media (prefers-reduced-motion: no-preference) {
  .trust-stats.reveal .ts-item { transform: translateY(13px); transition: transform .7s var(--ease-out); }
  .trust-stats.reveal.in .ts-item { transform: none; }
  .trust-stats.reveal.in .ts-item:nth-child(2) { transition-delay: .08s; }
  .trust-stats.reveal.in .ts-item:nth-child(3) { transition-delay: .16s; }
  .trust-stats.reveal.in .ts-item:nth-child(4) { transition-delay: .24s; }
}
html.reveal-all .trust-stats .ts-item { transform: none !important; }


/* ═══════════════════════════════════════════════════════════════════════
   PART A · COMBINED CREDIBILITY BAND — stats + Trusted Partners in ONE unit.
   Static and calm: NO animated/cycling/"typewriter" headline (see CLAUDE.md).
   ═══════════════════════════════════════════════════════════════════════ */
:root { --jb: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
        --ub-e: cubic-bezier(0.16, 1, 0.3, 1); }

.uband { padding: clamp(54px, 6.5vw, 96px) 0 !important; background: var(--paper);
  border-top: 1px solid rgba(10,10,11,.06); border-bottom: 1px solid rgba(10,10,11,.06); }
.uband > .wrap { max-width: 1080px; }

/* the 4 stats and the partner logos read as ONE combined credibility block */
.uband .trust-stats { border-bottom: none; padding-bottom: 0; margin: 0 auto; }

.ub-partners { display: flex; flex-direction: column; align-items: center; gap: clamp(12px, 1.4vw, 18px);
  margin-top: clamp(22px, 2.4vw, 34px); }
.ub-eyebrow { font-family: var(--jb); font-size: 11px; font-weight: 600; letter-spacing: .2em;
  text-transform: uppercase; color: var(--t-lo); }
.ub-logos { display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
  gap: clamp(22px, 3.6vw, 58px); }
.ub-logos .tb-logo { font-family: var(--sans); font-weight: 600; font-size: clamp(14px, 1.3vw, 17px);
  letter-spacing: .01em; color: #9A9AA2; opacity: .82;
  transition: color .3s var(--ub-e), opacity .3s var(--ub-e); }
.ub-logos .tb-logo:hover { color: var(--t-hi); opacity: 1; }
.ub-disc { margin: clamp(20px, 2.4vw, 30px) auto 0; max-width: 64ch; text-align: center;
  font-family: var(--sans); font-size: 12px; line-height: 1.5; color: var(--t-lo); }

/* gentle entrance via the site's standard reveal — no headline motion */
@media (prefers-reduced-motion: no-preference) {
  .ub-partners.reveal { transform: translateY(14px); transition: transform .6s var(--ub-e); }
  .ub-partners.reveal.in { transform: none; }
}
html.reveal-all .ub-partners { transform: none !important; }


/* ═══════════════════════════════════════════════════════════════════════
   PART B · WHAT SETS US APART — rebuilt Stripe-grade windows
   Near-black surface · two clean frames · zero badge noise · restrained motion.
   ═══════════════════════════════════════════════════════════════════════ */
/* darken the section to near-black, drop the lilac seam/bloom */
.section.dark.wsa { background: #0A0A0C !important; }
.section.dark.wsa::before { display: none !important; }
.xbridge.l2d { background: linear-gradient(to bottom, var(--paper) 0%, #F2F2F4 20%, #14141A 80%, #0A0A0C 100%) !important; }

/* the card: a calm dark-glass holder for the window + footer copy */
.wsa .nw-card {
  background: linear-gradient(180deg, #0E0E13, #0B0B0E) !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  border-radius: 22px !important;
  padding: 22px 22px 26px !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 30px 64px -22px rgba(0,0,0,.72) !important;
  overflow: hidden;
}
.wsa .nw-card::before { display: none !important; }
.wsa .nw-card-head { display: none !important; }   /* badge noise removed */
@media (hover: hover) {
  .wsa .nw-card { transition: transform .42s var(--ub-e), border-color .42s var(--ub-e), box-shadow .42s var(--ub-e); }
  .wsa .nw-card:hover { transform: translateY(-5px);
    border-color: color-mix(in srgb, var(--accent) 26%, rgba(255,255,255,.08)) !important;
    box-shadow: 0 38px 70px -24px rgba(0,0,0,.78), inset 0 1px 0 rgba(255,255,255,.05) !important; }
}

/* the window frame */
.sx-win {
  position: relative; display: flex; flex-direction: column; min-height: 304px;
  border-radius: 16px; overflow: hidden;
  background: linear-gradient(180deg, #131319, #0C0C11);
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 18px 42px -18px rgba(0,0,0,.6);
}
.sx-win::after {   /* faint top-edge highlight */
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.20), transparent);
}
.sx-head { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 13px 16px; border-bottom: 1px solid rgba(255,255,255,.06); }
.sx-label { font-family: var(--jb); font-size: 10.5px; font-weight: 600; letter-spacing: .16em;
  text-transform: uppercase; color: rgba(245,245,242,.9); }
.sx-meta { font-family: var(--jb); font-size: 9.5px; font-weight: 500; letter-spacing: .12em;
  text-transform: uppercase; color: rgba(245,245,242,.4); white-space: nowrap; }
.sx-body { flex: 1; display: flex; flex-direction: column; padding: 4px 16px 16px; }

/* card 1 — file line items */
.sx-row { display: flex; align-items: center; gap: 13px; padding: 13px 2px;
  border-bottom: 1px solid rgba(255,255,255,.05); }
.sx-row .sx-ic { flex: none; width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center;
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08); color: rgba(245,245,242,.82); }
.sx-row .sx-ic svg { width: 15px; height: 15px; }
.sx-row .sx-rt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.sx-row .sx-rt .n { font-family: var(--sans); font-size: 14px; font-weight: 600; color: #F5F5F2; }
.sx-row .sx-rt .d { font-family: var(--jb); font-size: 9.5px; letter-spacing: .05em; text-transform: uppercase;
  color: rgba(245,245,242,.42); }
.sx-row .sx-ck { flex: none; color: rgba(245,245,242,.5); }
.sx-row .sx-ck svg { width: 16px; height: 16px; }
.sx-sum { margin-top: auto; display: flex; align-items: flex-end; justify-content: space-between; gap: 12px;
  padding: 16px 2px 2px; border-top: 1px solid rgba(255,255,255,.09); }
.sx-sum .sl { font-family: var(--jb); font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase;
  color: rgba(245,245,242,.46); max-width: 14ch; line-height: 1.4; }
.sx-sum .sv { font-family: var(--serif); font-weight: 400; font-size: 30px; line-height: 1; color: var(--accent);
  letter-spacing: -.01em; white-space: nowrap; display: flex; align-items: baseline; }
.sx-sum .sv small { font-family: var(--sans); font-size: 12px; font-weight: 600; color: rgba(245,245,242,.5); margin-left: 4px; }

/* card 2 — rate comparison bars */
.sx-cap { font-family: var(--jb); font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase;
  color: rgba(245,245,242,.42); padding: 12px 2px 12px; }
.sx-bars { display: flex; flex-direction: column; gap: 12px; padding: 0 2px; }
.sx-brow { display: flex; align-items: center; gap: 12px; }
.sx-brow .bl { flex: none; width: 58px; font-family: var(--jb); font-size: 9.5px; letter-spacing: .07em;
  text-transform: uppercase; color: rgba(245,245,242,.42); }
.sx-brow .bt { flex: 1; height: 8px; border-radius: 5px; background: rgba(255,255,255,.06); overflow: hidden; }
.sx-brow .bt i { display: block; height: 100%; border-radius: 5px; width: var(--w, 60%);
  background: rgba(255,255,255,.22); }
.sx-brow .tag { flex: none; width: 64px; text-align: right; font-family: var(--jb); font-size: 8.5px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: transparent; }
.sx-brow.best .bl { color: var(--accent); font-weight: 700; }
.sx-brow.best .bt { box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 42%, transparent); }
.sx-brow.best .bt i { background: var(--accent); }
.sx-brow.best .tag { color: var(--accent); }
.sx-res { display: flex; align-items: center; gap: 12px; margin-top: auto; padding: 13px 14px;
  border-radius: 12px; background: color-mix(in srgb, var(--accent) 8%, rgba(255,255,255,.02));
  border: 1px solid color-mix(in srgb, var(--accent) 24%, transparent); }
.sx-res .rck { flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
  background: var(--accent); color: #0A0A0C; }
.sx-res .rck svg { width: 14px; height: 14px; }
.sx-res .rt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.sx-res .rt .a { font-family: var(--sans); font-size: 13.5px; font-weight: 600; color: #F5F5F2; }
.sx-res .rt .b { font-family: var(--jb); font-size: 9px; letter-spacing: .06em; text-transform: uppercase;
  color: rgba(245,245,242,.46); }
.sx-res .rp { flex: none; text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: 3px; }
.sx-res .rp .pv { font-family: var(--serif); font-size: 21px; color: #F5F5F2; }
.sx-res .rp .pu { font-family: var(--jb); font-size: 8px; letter-spacing: .08em; text-transform: uppercase;
  color: rgba(245,245,242,.42); }
.sx-bars + .sx-res { margin-top: 16px; }

/* restrained one-shot motion on reveal (the cards carry .reveal → .in) */
@media (prefers-reduced-motion: no-preference) {
  .sx-body .sx-row, .sx-sum, .sx-cap, .sx-brow, .sx-res {
    opacity: 0; transform: translateY(10px);
    transition: opacity .55s var(--ub-e), transform .55s var(--ub-e); }
  .nw-card.in .sx-row, .nw-card.in .sx-sum, .nw-card.in .sx-cap,
  .nw-card.in .sx-brow, .nw-card.in .sx-res { opacity: 1; transform: none; }
  .sx-row:nth-of-type(2) { transition-delay: .07s; }
  .sx-row:nth-of-type(3) { transition-delay: .14s; }
  .sx-sum { transition-delay: .2s; }
  .sx-brow:nth-of-type(2) { transition-delay: .06s; }
  .sx-brow:nth-of-type(3) { transition-delay: .12s; }
  .sx-brow:nth-of-type(4) { transition-delay: .18s; }
  .sx-brow:nth-of-type(5) { transition-delay: .24s; }
  .sx-res { transition-delay: .28s; }
  /* bars grow once */
  .sx-brow .bt i { width: 0; transition: width .82s var(--ub-e); }
  .nw-card.in .sx-brow .bt i { width: var(--w, 60%); }
  .nw-card.in .sx-brow:nth-of-type(2) .bt i { transition-delay: .1s; }
  .nw-card.in .sx-brow:nth-of-type(3) .bt i { transition-delay: .16s; }
  .nw-card.in .sx-brow:nth-of-type(4) .bt i { transition-delay: .22s; }
  .nw-card.in .sx-brow:nth-of-type(5) .bt i { transition-delay: .28s; }
}


/* ═══════════════════════════════════════════════════════════════════════
   PART C · iPhone 17 PRO (silver titanium) — fintech hero, 3D perspective.
   Flat phone + single 3D transform (renders reliably); thickness faked with a
   slab + shadow. Polished finance UI on a real device, brand-accent themed.
   ═══════════════════════════════════════════════════════════════════════ */
.appsec-stage { padding: 36px 0; overflow: visible; perspective: 1500px; perspective-origin: 50% 46%; }
.appsec .phonewrap { position: relative; width: clamp(264px, 31vw, 372px); margin: 0 auto;
  transform: rotateY(-20deg) rotateX(5deg) rotateZ(1.2deg);
  transform-style: preserve-3d;
  transition: transform 1s var(--ub-e); }
.appsec .phone-real { display: block; width: 100%; height: auto;
  filter: drop-shadow(-30px 40px 52px rgba(0,0,0,.66)); }
.appsec .phone-ui { position: absolute; left: 5.2%; top: 1.1%; width: 89.6%; height: 97.9%;
  border-radius: 10% / 4.9%; overflow: hidden; background: #050507; z-index: 2;
  backface-visibility: hidden; -webkit-font-smoothing: antialiased; transform: translateZ(0.01px); }
@media (max-width: 940px) { .appsec .phonewrap { transform: rotateY(-12deg) rotateX(3deg); width: clamp(244px, 60vw, 330px); } }
@media (prefers-reduced-motion: no-preference) and (hover: hover) {
  .appsec-stage:hover .phonewrap { transform: rotateY(-12deg) rotateX(3deg) translateY(-8px); }
}

/* fintech UI */
.appsec .ui { position: absolute; inset: 0; display: flex; flex-direction: column;
  background: radial-gradient(130% 70% at 70% 0%, #15171c, #050507 62%); color: #fff;
  font-family: var(--sans); padding: 14px 15px 0; }
.appsec .ui-island { position: absolute; top: 13px; left: 50%; transform: translateX(-50%); width: 88px; height: 27px; background: #000; border-radius: 14px; z-index: 5; }
.appsec .ui-island::after { content: ""; position: absolute; top: 50%; right: 9px; transform: translateY(-50%); width: 9px; height: 9px; border-radius: 50%;
  background: radial-gradient(circle at 38% 34%, #36405a 0 24%, #0a0c12 62%); box-shadow: inset 0 0 0 1px rgba(120,140,180,.22); }
.appsec .ui-status { display: flex; justify-content: space-between; align-items: center; font-size: 12px; font-weight: 700; padding: 2px 6px 12px; }
.appsec .ui-status .r { display: flex; gap: 6px; align-items: center; }
.appsec .ui-status svg { height: 11px; width: auto; fill: #fff; }
.appsec .ui-top { display: flex; align-items: center; justify-content: space-between; padding: 2px 4px 14px; }
.appsec .ui-top .lbl { font-family: var(--jb); font-size: 9px; letter-spacing: .18em; color: rgba(255,255,255,.4); }
.appsec .ui-av { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; font-weight: 700;
  background: color-mix(in srgb, var(--accent) 26%, #222); border: 1.5px solid var(--accent); color: #fff; }
.appsec .ui-icons { display: flex; gap: 14px; color: rgba(255,255,255,.55); }
.appsec .ui-icons svg { width: 18px; height: 18px; }
.appsec .ui-tabs { display: flex; gap: 22px; padding: 0 4px 14px; font-size: 14px; }
.appsec .ui-tabs .t { color: rgba(255,255,255,.4); font-weight: 600; }
.appsec .ui-tabs .t.on { color: #fff; }
.appsec .ui-recap { display: flex; align-items: center; gap: 10px; padding: 11px 13px; border-radius: 14px; margin-bottom: 14px;
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08); }
.appsec .ui-recap .st { color: var(--accent); flex: none; } .appsec .ui-recap .st svg { width: 15px; height: 15px; }
.appsec .ui-recap .rx { flex: 1; min-width: 0; }
.appsec .ui-recap .rk { font-family: var(--jb); font-size: 8.5px; letter-spacing: .12em; color: rgba(255,255,255,.5); display: block; }
.appsec .ui-recap .rt { font-size: 12px; color: rgba(255,255,255,.82); margin-top: 3px; display: block; }
.appsec .ui-recap .cl { color: rgba(255,255,255,.35); flex: none; } .appsec .ui-recap .cl svg { width: 13px; height: 13px; }
.appsec .ui-eq { font-family: var(--jb); font-size: 9px; letter-spacing: .14em; color: rgba(255,255,255,.45); padding: 0 4px; display: flex; align-items: center; gap: 6px; }
.appsec .ui-eq svg { width: 11px; height: 11px; }
.appsec .ui-val { display: flex; align-items: baseline; gap: 10px; padding: 4px 4px 0; }
.appsec .ui-val .v { font-size: 34px; font-weight: 300; letter-spacing: -.02em; }
.appsec .ui-val .d { font-size: 13px; font-weight: 700; color: #34D17C; }
.appsec .ui-chart { height: 104px; margin: 8px 0 6px; color: var(--accent); }
.appsec .ui-chart svg { width: 100%; height: 100%; display: block; overflow: visible; }
.appsec .ui-range { display: flex; justify-content: space-between; padding: 6px 6px 0; }
.appsec .ui-range span { font-family: var(--jb); font-size: 10px; letter-spacing: .06em; color: rgba(255,255,255,.4); padding: 5px 9px; border-radius: 8px; }
.appsec .ui-range span.on { background: rgba(255,255,255,.1); color: #fff; }
.appsec .ui-add { margin: 14px 0 0; text-align: center; font-size: 13px; font-weight: 600; color: #fff;
  padding: 13px; border-radius: 12px; border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.04); }
.appsec .ui-nav { margin-top: auto; display: flex; justify-content: space-between; padding: 14px 20px 20px; border-top: 1px solid rgba(255,255,255,.07); }
.appsec .ui-nav svg { width: 21px; height: 21px; color: rgba(255,255,255,.4); }
.appsec .ui-nav .on svg { color: var(--accent); }
.appsec .ui::after { content: ""; position: absolute; bottom: 7px; left: 50%; transform: translateX(-50%); width: 108px; height: 5px; border-radius: 3px; background: rgba(255,255,255,.4); }


/* ═══════════════════════════════════════════════════════════════════════
   PART D · WHAT SETS US APART — relieve cramped spacing / prevent overlap
   ═══════════════════════════════════════════════════════════════════════ */
.wsa .nw-grid { gap: clamp(26px, 3vw, 46px) !important; max-width: none !important; }
.wsa > .wrap { max-width: min(1680px, 94vw) !important; }
.wsa .nw-card { padding: clamp(22px, 2vw, 30px) clamp(22px, 2vw, 30px) clamp(26px, 2.2vw, 34px) !important; }
.wsa .sx-win { min-height: 328px; }
.wsa .sx-body { padding: 8px 18px 18px; }
.wsa .sx-row { padding: 14px 4px; }
.wsa .sx-cap { padding: 14px 4px 14px; }
.wsa .sx-bars { gap: 14px; padding: 2px 4px; }
.wsa .sx-brow .bl { width: 64px; }
.wsa .sx-sum { padding-top: 18px; }
.wsa .sx-res { margin-top: 18px; padding: 14px 15px; }
.wsa .nw-foot { margin-top: clamp(22px, 2vw, 30px) !important; }
.wsa .nw-foot h3 { margin-bottom: 10px; font-size: clamp(19px, 1.7vw, 22px); }
.wsa .nw-foot p { line-height: 1.62; }


/* ── Valley West Insurance — real logo mark (transparent, no chip) ── */
img.mark-img { height: 30px; width: auto; object-fit: contain; display: block;
  background: none; border: none; box-shadow: none; padding: 0; }
.footer-brand img.mark-img { height: 34px; }
.drawer img.mark-img { height: 28px; }
/* insurance loading bar stays red (not brand green) */
[data-brand="insurance"] #vw-loader .vwl-bar i,
[data-brand="insurance"] .vwl-bar i { background: #DC2626 !important; }

/* ═══════════════════════════════════════════════════════════════════════
   PART E · round-6 polish (corners · larger band · squares · alignment · loader · review arrows)
   ═══════════════════════════════════════════════════════════════════════ */
/* (1) phone screen-corner cutoff — overshoot into the bezel + squarer radius so
   the real photo's rounded screen hole defines the corner (no wallpaper peek) */
.appsec .phone-ui { left: 5.2% !important; top: 2.1% !important; width: 89.6% !important; height: 95.7% !important; border-radius: 11.5% / 5.6% !important; }

/* (2) Trusted-partners band — larger, readable */
.uband { padding: clamp(64px, 7.5vw, 112px) 0 !important; }
.uband .trust-stats { gap: clamp(30px, 5.5vw, 96px); }
.ts-n { font-size: clamp(40px, 4.6vw, 62px) !important; }
.ts-n small { font-size: .5em !important; }
.ts-l { font-size: clamp(13px, 1.05vw, 15.5px) !important; margin-top: 13px !important; max-width: 16ch; }
.ub-partners { margin-top: clamp(46px, 4.6vw, 72px); gap: clamp(18px, 2vw, 28px); }
.ub-eyebrow { font-size: 13px !important; letter-spacing: .22em !important; }
.ub-logos { gap: clamp(28px, 4.2vw, 70px) !important; }
.ub-logos .tb-logo { font-size: clamp(19px, 1.9vw, 26px) !important; opacity: .9 !important; }
/* partner logos are now links — show the affordance, keep the brand styling */
.ub-logos a.tb-logo { cursor: pointer; text-decoration: none; }
.ub-logos a.tb-logo:hover { opacity: 1 !important; color: var(--t-hi); }
.ub-disc { font-size: 13px !important; max-width: 66ch; }

/* (3) loading animation — slightly larger */
#vw-loader .vwl-illo { width: clamp(300px, 34vw, 430px) !important; height: auto !important; }
#vw-loader .vwl-bar { width: clamp(260px, 30vw, 380px) !important; }
#vw-loader .vwl-txt { font-size: 16px !important; }

/* (4) What-sets-us-apart cards — taller, more square */
.wsa .sx-win { min-height: clamp(372px, 31vw, 468px) !important; }

/* (5) Insurance "everything you protect" — high-quality squares, 2×2 */
.protgrid .prot { aspect-ratio: auto !important; min-height: clamp(360px, 40vw, 480px) !important; height: auto !important;
  justify-content: space-between; }
@media (max-width: 600px) { .protgrid .prot { min-height: 340px !important; } }

/* ── FAQ: remove card outlines/borders (all sites) ── */
.faq-item { border: none !important; outline: none !important; box-shadow: none !important; }
.faq-item.open { border: none !important; outline: none !important; box-shadow: none !important; }
.faq-q:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ── insurance "Provide for family" line: render the full line (was drawing incomplete) ── */
.pv-area svg { overflow: visible; }
.pv-area .ln { fill: none !important; stroke: #50B45A !important; stroke-width: 2.2 !important;
  stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke;
  stroke-dasharray: none !important; stroke-dashoffset: 0 !important; opacity: 1 !important; }
.pv-area .pt { opacity: 1 !important; }

/* ── forecast: align the 3 stat cards edge-to-edge with the panel above ── */
.forecast .fc-panel, .forecast .fc-stats { width: 100% !important; max-width: none !important;
  margin-left: 0 !important; margin-right: 0 !important; box-sizing: border-box; }

/* (6) Forecast savings cards — align end-to-end with the review cards */
.forecast > .wrap, .forecast .fc-inner { max-width: min(1680px, 94vw) !important; }
.forecast .fc-panel { max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; }

/* ── Everything you protect — 2 large cards on top, 2 on the bottom ── */
.protgrid { grid-template-columns: repeat(2, 1fr) !important; gap: clamp(20px, 2.4vw, 32px) !important;
  max-width: 960px; margin: 0 auto; }
@media (max-width: 600px) { .protgrid { grid-template-columns: 1fr !important; max-width: 420px; } }


/* ── phone: cycle between the 2 app screens ── */
.appsec .phone-ui .ui:nth-child(2){ opacity:0; }
@media (prefers-reduced-motion: no-preference){
  .appsec .phone-ui .ui:nth-child(1){ animation: phCyc 13s ease-in-out infinite; }
  .appsec .phone-ui .ui:nth-child(2){ animation: phCyc 13s ease-in-out infinite; animation-delay: 6.5s; }
  @keyframes phCyc { 0%,40%{opacity:1;} 47%,93%{opacity:0;} 100%{opacity:1;} }
}
.appsec .ui-mileset{ display:grid; gap:11px; margin-top:14px; }
.appsec .ui-mile{ display:flex; align-items:center; gap:11px; font-family:var(--sans); font-size:13px; color:rgba(255,255,255,.5); }
.appsec .ui-mile::before{ content:""; width:18px; height:18px; border-radius:50%; border:1.5px solid rgba(255,255,255,.22); flex:none; }
.appsec .ui-mile.done{ color:#fff; } .appsec .ui-mile.done::before{ background:var(--accent); border-color:var(--accent); }
.appsec .ui-mile.active{ color:#fff; } .appsec .ui-mile.active::before{ border-color:var(--accent); box-shadow:inset 0 0 0 3px var(--accent); }

/* ── header: nav tabs truly centered in the bar (absolute at wide widths where
   there is guaranteed clearance; auto-margins keep them centered-in-flow below) ── */
.site-header .nav-links { margin-left: auto; margin-right: auto; }
@media (min-width: 1200px) {
  .site-header .nav-links { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); margin: 0; }
}

/* ── round-final a11y + minor UI polish ── */
a:focus-visible, button:focus-visible, .btn:focus-visible, .faq-q:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }
.btn, .nw-cta-btn, .ty-cta { transition: background-color .2s var(--ub-e), color .2s var(--ub-e), transform .2s var(--ub-e), box-shadow .2s var(--ub-e); }
img { max-width: 100%; }


/* ═════════════════════════════════════════════════════════════════
   LIVE RATES SECTION (BankingBridge standalone table) — mortgage sites
   Frame, skeleton shimmer, graceful fallback. Loads last; overrides safe.
   ═════════════════════════════════════════════════════════════════ */
.rates-sec { scroll-margin-top: 90px; }
/* rate table aligned to the reviews container width below it (much wider) */
.rates-sec > .wrap { max-width: min(1680px, 94vw) !important; }
.rates-sec .eyebrow { white-space: nowrap; }
.rates-sec .section-head { margin-bottom: 44px; }
.rates-sec .section-head .lede { margin-top: 20px; }
.rates-head { display: flex; align-items: center; justify-content: space-between; gap: 12px 20px; flex-wrap: wrap; padding-bottom: 16px; margin-bottom: 18px; border-bottom: 1px solid var(--border); }
.rates-head .rh-lbl { font-family: var(--mono); font-weight: 700; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--t-lo); white-space: nowrap; }
.rates-head .rates-live { margin: 0; font-size: 12.5px; justify-content: flex-start; }
.rates-live { display: flex; align-items: center; justify-content: center; gap: 9px; margin: -18px 0 28px; font-weight: 600; font-size: 13.5px; color: var(--t-mid); }
.rates-live .rl-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--ok); flex: none; }
@media (prefers-reduced-motion: no-preference) {
  .rates-live .rl-dot { animation: rlPulse 2.4s ease-out infinite; }
  @keyframes rlPulse { 0% { box-shadow: 0 0 0 0 rgba(22,163,74,.45); } 70% { box-shadow: 0 0 0 10px rgba(22,163,74,0); } 100% { box-shadow: 0 0 0 0 rgba(22,163,74,0); } }
}
.rates-frame { position: relative; max-width: none; margin: 0 auto; background: var(--paper); border: 1px solid var(--border); border-radius: var(--r-card); box-shadow: var(--sh-2); padding: clamp(16px, 3vw, 32px); min-height: 480px; }
.rates-skel { position: absolute; inset: clamp(16px, 3vw, 32px); top: calc(clamp(16px, 3vw, 32px) + 58px); display: grid; gap: 13px; align-content: start; pointer-events: none; }
.rates-skel i { display: block; height: 54px; border-radius: 12px; background: linear-gradient(90deg, #F1F0EB 25%, #FAFAF8 40%, #F1F0EB 60%); background-size: 300% 100%; }
.rates-skel i:first-child { height: 30px; width: 44%; }
.rates-skel i:nth-child(2) { height: 42px; width: 72%; }
@media (prefers-reduced-motion: no-preference) {
  .rates-skel i { animation: rSkel 1.5s linear infinite; }
  @keyframes rSkel { from { background-position: 100% 0; } to { background-position: -100% 0; } }
}
.rates-skel[hidden], .rates-fallback[hidden] { display: none; }
#bb-aafd8 { position: relative; z-index: 1; }
.rates-fallback { position: relative; z-index: 2; display: grid; place-content: center; justify-items: center; text-align: center; min-height: 416px; gap: 4px; }
.rates-fallback .rf-ic { width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); margin-bottom: 10px; }
.rates-fallback .rf-ic svg { width: 26px; height: 26px; }
.rates-fallback h3 { font-family: var(--serif); font-weight: 300; font-size: clamp(24px, 2.6vw, 32px); letter-spacing: -.01em; color: var(--t-hi); margin: 0; }
.rates-fallback p { font-size: 14.5px; color: var(--t-mid); max-width: 46ch; line-height: 1.55; margin: 8px 0 18px; }
.rates-fallback .rf-row { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
.rates-callbtn { display: inline-flex; align-items: center; gap: 9px; white-space: nowrap; padding: 13px 24px; border-radius: var(--r-pill); border: 1.5px solid var(--border-strong); font-weight: 700; font-size: 15px; color: var(--t-hi); text-decoration: none; transition: border-color .2s, transform .2s; }
.rates-callbtn:hover { border-color: var(--t-hi); transform: translateY(-2px); }
.rates-callbtn svg { width: 16px; height: 16px; }
.rates-disc { max-width: 900px; margin: 16px auto 0; font-size: 12px; line-height: 1.6; color: var(--t-lo); text-align: center; }
.rates-cta { display: flex; justify-content: center; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 26px; }
@media (max-width: 680px) { .rates-frame { min-height: 540px; } .rates-fallback { min-height: 470px; } }


/* ═════════════════════════════════════════════════════════════════
   MOBILE ALIGNMENT PASS — consistent gutters, centered heads,
   tidy 2×2 stats, full-width CTAs, no sideways scroll. (≤760px)
   ═════════════════════════════════════════════════════════════════ */
@media (max-width: 760px) {
  html, body { overflow-x: clip; }
  .wrap { padding-left: 20px; padding-right: 20px; }
  .hero { padding-left: 20px; padding-right: 20px; }
  /* section heads: one centered rhythm everywhere */
  .section-head { margin-left: auto; margin-right: auto; margin-bottom: 40px; text-align: center; }
  .section-head .lede { margin-left: auto; margin-right: auto; font-size: 16.5px; }
  .h2 { font-size: clamp(30px, 8.6vw, 38px); }
  /* hero: centered composition, full-width actions */
  .hero-c { text-align: center; margin: 0 auto; min-width: 0; max-width: 100%; }
  /* the rotating headline must WRAP on narrow screens — the nowrap lead was
     forcing the whole hero (a flex container) to its 492px min-content width,
     spilling the heading, sub-copy and buttons off both edges. */
  .hero-h.hero-rotating { max-width: 100% !important; }
  .hero-h.hero-rotating .hr-lead,
  .hero-h.hero-rotating .hr-word { white-space: normal !important; max-width: 100% !important; overflow-wrap: break-word; text-wrap: balance; }
  .hero-actions { justify-content: center; }
  .hero-actions .btn { width: 100%; max-width: 380px; justify-content: center; }
  .hero-local { justify-content: center; text-align: center; text-wrap: balance; }
  /* footer rotating headline: wrap cleanly, never clip the band */
  .final { overflow: hidden; }
  .footer-rot .fr-lead, .footer-rot .fr-word { white-space: normal !important; overflow-wrap: break-word; }
  /* credibility band: clean 2×2 */
  .trust-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 28px 14px; justify-items: center; }
  .trust-stats .ts-item { min-width: 0; width: 100%; }
  /* CTA rows stack, centered */
  .final-actions, .firststep-cta, .rates-cta { display: flex; flex-direction: column; align-items: center; gap: 12px; }
  .final-actions .btn, .firststep-cta .btn, .rates-cta .btn, .rates-cta .rates-callbtn { width: 100%; max-width: 380px; justify-content: center; }
  /* footer: centered brand block, even columns */
  .footer-top { gap: 36px 24px; }
  .footer-brand { grid-column: 1 / -1; text-align: center; }
  .footer-brand .mark, .footer-brand img.mark-img { margin-left: auto; margin-right: auto; }
  .footer-legal { text-align: center; }
  .footer-legal .ehl { justify-content: center; }
  .footer-bot { flex-direction: column; align-items: center; gap: 16px; text-align: center; }
  /* media + tables never push the page sideways */
  img, video { max-width: 100%; height: auto; }
  .cmp-tablewrap { overflow-x: auto; }
  /* rates section mobile polish */
  .rates-frame { padding: 16px; }
  .rates-head { flex-direction: column; align-items: flex-start; gap: 8px; }
}
@media (max-width: 600px) {
  /* hero proportions tuned for phones — heading fits without clipping,
     comfortable vertical rhythm, no wasted full-height viewport */
  .hero { min-height: auto !important; padding: 100px 20px 60px !important; }
  .hero-h.hero-rotating { font-size: clamp(26px, 7.6vw, 34px) !important; line-height: 1.08 !important; gap: .02em; }
  .hero-eyebrow { margin-bottom: 18px !important; white-space: normal !important; }
  .hero-sub-strong { font-size: 16px !important; margin: 20px 0 6px !important; }
  .hero-sub { font-size: 15px !important; line-height: 1.55 !important; }
  .hero-actions { margin-top: 24px !important; }
  .scroll-cue { display: none; }
  /* footer rotating headline scaled to match the mobile h2 rhythm */
  .h2.footer-rot { font-size: clamp(28px, 8.2vw, 36px) !important; }
}
@media (max-width: 480px) {
  .hero-actions .btn, .final-actions .btn { max-width: none; }
}


/* ═══════════════════════════════════════════════════════════════════════
   SECTION-LEVEL UPDATE — new CTAs, forecast rework, protect redesign
   (loads last; all shared by the 4 sites; accent flips red↔green per brand)
   ═══════════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────────────
   TASK 1 · MID-PAGE CTA BAND — full-width, between Forecast & Plan.
   Distinct from the photo final-CTA and the in-card kyn-cta: near-black
   band, faint accent radial glow, centered serif headline.
   ───────────────────────────────────────────────────────────────────── */
/* LIGHT contrast band (a deliberate warm break between the dark sections) */
.cta-band { position: relative; background: #F5F2EC; color: var(--t-hi);
  overflow: hidden; isolation: isolate; padding: clamp(64px, 9vw, 124px) 0;
  border-top: 1px solid rgba(10,10,11,.08); border-bottom: 1px solid rgba(10,10,11,.08); }
.cta-band::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(120% 92% at 50% -6%, color-mix(in srgb, var(--accent) 9%, transparent), transparent 58%); }
.cta-band > .wrap { position: relative; z-index: 1; }
.cta-band-inner { max-width: 760px; margin: 0 auto; text-align: center; display: flex; flex-direction: column; align-items: center; }
.cta-band .cta-kick { font-family: var(--sans); font-size: 12px; font-weight: 700; letter-spacing: .2em;
  text-transform: uppercase; color: var(--accent); }
.cta-band .cta-h { font-family: var(--serif); font-weight: 300; font-size: clamp(32px, 4.6vw, 54px);
  line-height: 1.08; letter-spacing: -.02em; color: var(--t-hi); margin: 18px 0 0; text-wrap: balance; }
.cta-band .cta-h em { font-style: italic; color: var(--accent); }
.cta-band .cta-sub { font-size: clamp(15px, 1.4vw, 18px); color: var(--t-mid); line-height: 1.55;
  margin: 18px 0 0; max-width: 52ch; }
.cta-band .cta-row { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; margin-top: 34px; }
/* dark-on-light primary = the site's standard pill button (no override needed) */
.cta-band .cta-ghost { display: inline-flex; align-items: center; gap: 9px; padding: 15px 26px; border-radius: var(--r-pill);
  border: 1.5px solid rgba(10,10,11,.2); color: var(--t-hi); font-weight: 700; font-size: 15.5px; text-decoration: none; white-space: nowrap;
  transition: border-color .2s var(--ub-e), background .2s var(--ub-e), transform .2s var(--ub-e); }
.cta-band .cta-ghost svg { width: 17px; height: 17px; }
.cta-band .cta-ghost:hover { border-color: var(--t-hi); background: rgba(10,10,11,.04); transform: translateY(-2px); }
.cta-band .cta-trust { font-family: var(--sans); font-size: 12px; color: var(--t-lo); line-height: 1.5; margin: 22px 0 0; max-width: 62ch; }
@media (max-width: 600px) {
  .cta-band .cta-row { flex-direction: column; width: 100%; }
  .cta-band .cta-row .btn, .cta-band .cta-ghost { width: 100%; max-width: 360px; justify-content: center; }
}

/* ─────────────────────────────────────────────────────────────────────
   TASK 2 · MINI CTA — compact light strip below the phone/app section.
   Deliberately the inverse of the Task-1 band: light, single-line,
   left hook + right action. No copy or layout overlap with Task 1.
   ───────────────────────────────────────────────────────────────────── */
.cta-mini { background: var(--paper-2); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
  padding: clamp(32px, 4.2vw, 54px) 0; }
.cta-mini-inner { display: flex; align-items: center; justify-content: space-between; gap: clamp(20px, 4vw, 56px);
  flex-wrap: wrap; max-width: 1080px; margin: 0 auto; }
.cta-mini-hook { font-family: var(--serif); font-weight: 300; font-style: italic; font-size: clamp(24px, 3vw, 38px);
  line-height: 1.12; letter-spacing: -.01em; color: var(--t-hi); margin: 0; text-wrap: balance; flex: 1 1 300px; }
.cta-mini-hook em { font-style: italic; color: var(--accent); }
.cta-mini-act { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.cta-mini-phone { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 15.5px;
  color: var(--t-hi); text-decoration: none; white-space: nowrap; transition: color .2s var(--ub-e); }
.cta-mini-phone svg { width: 16px; height: 16px; color: var(--accent); }
.cta-mini-phone:hover { color: var(--accent); }
@media (max-width: 620px) {
  .cta-mini-inner { flex-direction: column; align-items: flex-start; }
  .cta-mini-act { width: 100%; }
  .cta-mini-act .btn { flex: 1; justify-content: center; }
}

/* ─────────────────────────────────────────────────────────────────────
   TASK 7 · "CHECK TODAY'S RATES" anchor — subordinate ghost button under
   the Monitor-rates card; smooth-scrolls to #rates (mortgage sites).
   ───────────────────────────────────────────────────────────────────── */
.kyn-grid .gm-card .rates-anchor { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; margin-top: 18px;
  font-size: 10.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--t-mid-d); text-decoration: none; padding: 9px 15px; border-radius: var(--r-pill);
  border: 1px solid var(--ink-4); background: rgba(255,255,255,.02); font-family: var(--sans);
  transition: color .2s var(--ub-e), border-color .2s var(--ub-e), transform .2s var(--ub-e); }
/* the small "what to review / why it matters / how we help" comparison table is
   removed from the planning sections (Plan before you move / Before you renew) */
.kyn-table { display: none !important; }
.kyn-grid .gm-card .rates-anchor svg { width: 13px; height: 13px; }
.kyn-grid .gm-card .rates-anchor:hover { color: #fff;
  border-color: color-mix(in srgb, var(--accent) 50%, var(--ink-4)); transform: translateY(-1px); }
/* Plan-before-you-move rate chart: add horizontal separating gridlines (all devices) */
.gm-chart { background-image: repeating-linear-gradient(to bottom, rgba(255,255,255,.08) 0, rgba(255,255,255,.08) 1px, transparent 1px, transparent 25%); background-position: 0 0; border-radius: 8px; }
.gm-chart::after { content: ""; position: absolute; inset: 0; border-bottom: 1px solid rgba(255,255,255,.12); pointer-events: none; }

/* ─────────────────────────────────────────────────────────────────────
   TASK 6 · FORECAST — main panel full-width on top; the two sub-cards
   ("Equity" + "Where a payment goes") become a matched pair BELOW it.
   ───────────────────────────────────────────────────────────────────── */
.forecast .fc-axis span { font-family: var(--sans) !important; font-size: 10px; letter-spacing: .1em; font-weight: 600; }
.forecast .fc-extra { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(16px, 1.8vw, 24px);
  width: 100% !important; max-width: none !important; margin: clamp(16px, 1.8vw, 22px) 0 0 !important; align-items: stretch; }
@media (max-width: 720px) { .forecast .fc-extra { grid-template-columns: 1fr; } }
.forecast .fc-mini { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.14); border-radius: var(--r-lg);
  padding: clamp(22px, 2.2vw, 30px); backdrop-filter: var(--glass-blur);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 18px 42px -22px rgba(0,0,0,.5);
  display: flex; flex-direction: column; min-height: 184px; }
.forecast .fc-mini .fm-lbl { font-family: var(--jb); font-size: 10.5px; font-weight: 600; letter-spacing: .16em;
  text-transform: uppercase; color: rgba(255,255,255,.62); margin-bottom: 18px; }
.forecast .fc-mini .fm-row { margin-top: auto; }

/* ─────────────────────────────────────────────────────────────────────
   TASK 5 · "EVERYTHING YOU PROTECT" — flagship grid (Valley West Insurance)
   Custom thin-stroke illustrations on glass tiles · equal-height cards.
   ───────────────────────────────────────────────────────────────────── */
.protgrid2 { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(18px, 1.8vw, 26px);
  max-width: min(1320px, 94vw); margin: 0 auto; }
@media (max-width: 980px) { .protgrid2 { grid-template-columns: repeat(2, 1fr); max-width: 760px; } }
@media (max-width: 540px) { .protgrid2 { grid-template-columns: 1fr; max-width: 420px; } }
.prot2 { position: relative; display: flex; flex-direction: column;
  background: linear-gradient(180deg, var(--ink-2), var(--ink-1));
  border: 1px solid var(--ink-4); border-radius: var(--r-xl); padding: clamp(24px, 2vw, 30px); overflow: hidden;
  transition: transform .42s var(--ub-e), border-color .42s var(--ub-e), box-shadow .42s var(--ub-e); }
.prot2::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0;
  background: radial-gradient(120% 72% at 50% -10%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 62%);
  transition: opacity .42s var(--ub-e); }
.prot2 > * { position: relative; z-index: 1; }
@media (hover: hover) {
  .prot2:hover { transform: translateY(-6px); border-color: color-mix(in srgb, var(--accent) 42%, var(--ink-4));
    box-shadow: 0 32px 62px -28px rgba(0,0,0,.72); }
  .prot2:hover::before { opacity: 1; }
}
.prot2-tile { aspect-ratio: 1 / 1; width: 100%; border-radius: var(--r-lg); display: grid; place-items: center; margin-bottom: 22px;
  background: radial-gradient(130% 100% at 50% 0%, rgba(255,255,255,.06), rgba(255,255,255,.015));
  border: 1px solid rgba(255,255,255,.08); box-shadow: inset 0 1px 0 rgba(255,255,255,.06); }
.prot2-illo { width: 54%; height: 54%; color: var(--accent); display: block; }
.prot2-illo [fill="none"], .prot2-illo path, .prot2-illo circle, .prot2-illo rect, .prot2-illo line, .prot2-illo polyline { stroke-width: 1.25; }
/* category label → editorial serif italic; title → confident sans (distinct from the
   mono-label + serif-title rhythm used elsewhere on the page) */
.prot2-cat { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 15px;
  letter-spacing: .005em; text-transform: none; color: color-mix(in srgb, var(--accent) 72%, #fff); }
.prot2-h { font-family: var(--sans); font-weight: 700; font-size: clamp(18px, 1.55vw, 22px); line-height: 1.2;
  letter-spacing: -.012em; color: #fff; margin: 9px 0 8px; text-wrap: balance; }
.prot2-p { font-family: var(--sans); font-size: 13.5px; line-height: 1.55; color: var(--t-mid-d); margin: 0; }
@media (prefers-reduced-motion: no-preference) {
  .prot2.reveal { transform: translateY(16px); }
  .prot2.reveal.in { transform: none; }
}
html.reveal-all .prot2 { transform: none !important; }

/* ─────────────────────────────────────────────────────────────────────
   WHY-US VIDEO SECTION — provided film in a 16:9 glass frame (all 4 sites)
   ───────────────────────────────────────────────────────────────────── */
.vidsec .section-head { margin-bottom: clamp(34px, 4vw, 52px); }
.vidsec .vid-frame { position: relative; max-width: min(1360px, 100%); margin: 0 auto; aspect-ratio: 16 / 9;
  border-radius: var(--r-xl); overflow: hidden; background: #000; contain: content; transform: translateZ(0); }
.vidsec .vid-el { width: 100%; height: 100%; display: block; object-fit: cover; background: #08080A; }

/* film fullscreen button (all devices) — bottom-LEFT so it clears the in-film
   volume button at bottom-right */
.vidsec .film-frame .film-fs { position: absolute; z-index: 6; left: 16px; bottom: 16px; width: 42px; height: 42px;
  border-radius: 50%; display: grid; place-items: center; cursor: pointer; padding: 0;
  border: 1px solid rgba(255,255,255,.3); background: rgba(8,8,10,.5);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); color: #fff;
  opacity: 0; transition: background .2s, transform .2s, opacity .3s; }
.vidsec .film-frame.loaded .film-fs { opacity: 1; }
.vidsec .film-frame .film-fs:hover { background: rgba(8,8,10,.82); transform: translateY(-1px); }
.vidsec .film-frame .film-fs svg { width: 18px; height: 18px; }
.vidsec .film-frame:fullscreen { width: 100vw; height: 100vh; border-radius: 0; max-width: none; }

/* self-contained film embed — rendered at a capped 1280×720 (16:9) then
   GPU-scaled to fill the frame, so the browser paints far fewer pixels (smoother
   FPS) and the upscale rides the compositor. JS sets the scale to the frame. */
.vidsec .film-frame .film-embed { position: absolute; top: 50%; left: 50%; width: 1920px; height: 1080px;
  transform: translate(-50%, -50%) scale(1); transform-origin: center center;
  border: 0; display: block; background: #000; z-index: 1; will-change: transform; backface-visibility: hidden; }
.vidsec .film-frame .film-poster { position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: radial-gradient(120% 120% at 50% 38%, #15151c 0%, #08080A 72%);
  display: grid; place-items: center; transition: opacity .7s var(--ub-e); }
.vidsec .film-frame .film-poster::after { content: ""; width: 34px; height: 34px; border-radius: 50%;
  border: 2px solid rgba(255,255,255,.16); border-top-color: rgba(255,255,255,.7); animation: filmspin .9s linear infinite; }
.vidsec .film-frame.loaded .film-poster { opacity: 0; }
@keyframes filmspin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .vidsec .film-frame .film-poster::after { animation: none; } }
.vid-ctrl { position: absolute; bottom: 14px; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(8,8,10,.55); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,.22); color: #fff; cursor: pointer; z-index: 3;
  transition: background .2s var(--ub-e), transform .2s var(--ub-e); }
.vid-ctrl:hover { background: rgba(8,8,10,.82); transform: translateY(-1px); }
.vid-ctrl svg { width: 18px; height: 18px; }
.vid-mute { right: 14px; } .vid-replay { right: 62px; }
.vid-play { position: absolute; inset: 0; margin: auto; width: 76px; height: 76px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(8,8,10,.5); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,.32); color: #fff; cursor: pointer; z-index: 4;
  transition: background .2s var(--ub-e), transform .2s var(--ub-e); }
.vid-play:hover { background: rgba(8,8,10,.78); transform: scale(1.04); }
.vid-play svg { width: 30px; height: 30px; margin-left: 4px; }
.vid-frame.playing .vid-play { display: none; }
.vid-ctrl[hidden], .vid-play[hidden] { display: none; }
.vidsec .mgx-cta { display: flex; justify-content: center; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: clamp(26px, 3vw, 40px); }
.vidsec .mgx-callbtn { display: inline-flex; align-items: center; gap: 9px; padding: 14px 26px; border-radius: var(--r-pill);
  border: 1.5px solid var(--border-strong); color: var(--t-hi); font-family: var(--sans); font-weight: 700; font-size: 15px;
  text-decoration: none; white-space: nowrap; transition: border-color .2s var(--ub-e), background .2s var(--ub-e), transform .2s var(--ub-e); }
.vidsec .mgx-callbtn:hover { background: #fff; border-color: var(--t-hi); transform: translateY(-2px); }
.vidsec .mgx-callbtn svg { width: 16px; height: 16px; }
@media (max-width: 600px) { .vidsec .mgx-cta { flex-direction: column; } .vidsec .mgx-cta .btn, .vidsec .mgx-callbtn { width: 100%; max-width: 360px; justify-content: center; } }

/* ─────────────────────────────────────────────────────────────────────
   BARE LOGO MARKS — no chip, no background. The brand mark sits directly
   on the chrome. In the header it cross-fades light↔dark with scroll
   (light over the dark hero · dark over the white scrolled bar).
   ───────────────────────────────────────────────────────────────────── */
.mark-logo, img.mark-img { height: 32px; width: auto; display: block; flex: none;
  background: none !important; border: none !important; box-shadow: none !important; border-radius: 0 !important; padding: 0 !important; }

/* header: stacked light + dark, cross-faded on scroll */
.mark-stack { position: relative; display: inline-flex; flex: none; line-height: 0; }
.mark-stack .mk-dark { position: absolute; left: 0; top: 0; }
.mark-stack img { transition: opacity .3s var(--ub-e); }
/* Always show the full-colour brand mark in the header (never the white-text
   variant) — keeps the logo identical over the hero photo and the scrolled bar.
   A soft drop-shadow lifts the navy mark off the bright hero sky. */
.site-header .mark-stack .mk-dark { opacity: 1; }
.site-header .mark-stack .mk-light { opacity: 0; }
.site-header.scrolled .mark-stack .mk-dark { opacity: 1; }
.site-header.scrolled .mark-stack .mk-light { opacity: 0; }
.site-header:not(.scrolled) .mark-stack img { filter: drop-shadow(0 1px 3px rgba(0,0,0,.38)); }
.site-header.scrolled .mark-stack img { filter: none; }
/* apply / thank-you pages render the header permanently in its solid (white) state */
body.page-apply .site-header .mark-stack .mk-dark,
body.page-ty .site-header .mark-stack .mk-dark { opacity: 1; }
body.page-apply .site-header .mark-stack .mk-light,
body.page-ty .site-header .mark-stack .mk-light { opacity: 0; }

.site-header .brand .mark-logo, .site-header .brand img.mark-img,
.site-header .brand .mark-stack img { height: 36px; }
.drawer .drawer-top .mark-logo, .drawer .drawer-top img.mark-img { height: 30px; }
.footer-brand .mark-logo, .footer-brand img.mark-img { height: 46px; margin-bottom: 6px; }

/* ── Logo aspect-lock: these brand marks are NOT square (CM 1.57, FHA 1.28,
   VA 1.03, VWI 1.51). The base .mark rule forces a fixed square size which
   stretches them. Force true aspect everywhere: fixed height, auto width. ── */
.site-header .brand .mark-stack img,
.site-header .brand img.mark-img, .site-header .brand .mark-logo,
.footer-brand img.mark-img, .footer-brand .footer-lockup img.mark-img, .footer-brand .mark-logo,
.drawer .mark-img, .drawer .drawer-top img.mark-img, .drawer .mark-logo {
  width: auto !important; height: 36px; object-fit: contain !important; flex: none;
}
.footer-brand img.mark-img, .footer-brand .footer-lockup img.mark-img { height: 36px !important; }
.drawer .mark-img, .drawer .drawer-top img.mark-img { height: 30px !important; }
@media (max-width: 600px) {
  .site-header .brand .mark-stack img, .site-header .brand img.mark-img { height: 30px; }
}

/* footer brand lockup — mirror the header: icon + wordmark on one row, same
   sizing, so the footer logo reads as the exact same brand mark as the header
   (light variant, because the footer surface is near-black) */
.footer-brand .footer-lockup { display: inline-flex; align-items: center; gap: 11px; text-decoration: none; margin-bottom: 14px; }
.footer-brand .footer-lockup .mark-img, .footer-brand .footer-lockup .mark-logo { height: 36px; width: auto; margin-bottom: 0; flex: none; display: block; }
.footer-brand .footer-lockup .bn { font-family: var(--serif); font-style: italic; font-size: 22px; color: #fff; white-space: nowrap; }
@media (max-width: 760px) {
  .footer-brand .mark-logo, .footer-brand img.mark-img { margin-left: auto; margin-right: auto; }
}
@media (max-width: 600px) {
  .site-header .brand .mark-logo, .site-header .brand img.mark-img,
  .site-header .brand .mark-stack img { height: 30px; }
}

/* ═══════════════════════════════════════════════════════════════════════
   HERO — instantly visible on landing (no entrance fade) + a permanent
   frosted-glass backing panel behind the copy so it always reads premium
   and legible over the photo, on every device.
   ═══════════════════════════════════════════════════════════════════════ */
/* the hero copy must never start hidden — kill its reveal animation entirely
   (overrides site2.css .reveal{opacity:0} at any breakpoint) so the hero is
   fully visible the instant the page lands */
.hero .hero-c .reveal,
.hero .hero-c.reveal { opacity: 1 !important; transform: none !important; transition: none !important; }

/* ═══════════════════════════════════════════════════════════════════════
   HEADER — ALWAYS a white frosted-glass bar (not only after scroll).
   The bar carries the same treatment at the top of the page as it does
   scrolled: frosted white surface, dark nav text, full-colour logo, ink CTA.
   ═══════════════════════════════════════════════════════════════════════ */
.site-header {
  background: rgba(255,255,255,.82) !important;
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  border-bottom: 1px solid rgba(10,10,11,.08) !important;
  box-shadow: var(--sh-1);
}
.site-header .brand .bn { color: var(--t-hi); }
.site-header .brand .bs { color: var(--t-mid); }
.site-header .brand .bx { color: var(--t-lo); }
.site-header .nav-links a { color: var(--t-mid); }
.site-header .nav-links a:hover { color: var(--t-hi); }
.site-header .header-phone { color: var(--t-hi); border-color: rgba(10,10,11,.18); }
.site-header .header-phone:hover { background: var(--accent); color: #fff; border-color: var(--accent); }
.site-header .header-cta { background: var(--ink); color: #fff; }
.site-header .header-cta:hover { background: var(--accent); color: #fff; }
.site-header .hamburger { background: var(--paper-3); border-color: rgba(10,10,11,.1); color: var(--ink); }
.site-header .hamburger:hover { background: var(--accent); border-color: var(--accent); color: #fff; }
/* logo: full-colour mark on the white bar at all times; no drop-shadow needed now */
.site-header .mark-stack .mk-dark { opacity: 1 !important; }
.site-header .mark-stack .mk-light { opacity: 0 !important; }
.site-header .mark-stack img { filter: none !important; }
/* slightly tighter top padding so the always-solid bar reads as a real toolbar */
.site-header:not(.scrolled) { padding-top: 16px; padding-bottom: 16px; }

/* ═══════════════════════════════════════════════════════════════════════
   CALCULATOR REWORK + RATE-SECTION CARD REMOVAL  (loads after site2.css)
   ═══════════════════════════════════════════════════════════════════════ */

/* ── RATE SECTION — remove the card chrome entirely (all 3 mortgage sites,
   all devices): the BankingBridge embed sits flush on the page. ── */
.rates-frame {
  background: none !important; border: 0 !important; box-shadow: none !important;
  border-radius: 0 !important; padding: 0 !important;
}
.rates-frame .rates-skel { inset: 0 !important; top: 0 !important; }

/* ── CALCULATOR — fully reworked: sliders on the left (the only control),
   a clean self-contained result panel on the right. No table header, no
   clipping, no floating void. ── */
/* hide only the non-numeric qualitative chips + the next banner + viz button;
   KEEP coverage/tier (insurance) and the injected term/credit (mortgage) visible */
.calc-wide .est2-next, .calc-wide .viz-cta,
.calc-wide .est2-row:has(.est2-chips[data-est-q="purpose"]),
.calc-wide .est2-row:has(.est2-chips[data-est-q="timeline"]),
.calc-wide .est2-row:has(.est2-chips[data-est-q="priority"]) { display: none !important; }

.calc-wide {
  display: grid !important; grid-template-columns: 1fr 1fr !important;
  gap: clamp(48px, 4.5vw, 80px) !important; align-items: start !important;
  width: 100%; max-width: 1680px !important; margin: 0 auto !important;
  background: var(--surface, #fff) !important; border: 1px solid var(--border) !important;
  border-radius: var(--r-xl) !important; box-shadow: 0 18px 50px rgba(8,8,10,.08) !important;
  padding: clamp(40px, 3.6vw, 72px) !important;
}
/* let the estimate card break out of the standard 1200px content column so it
   reads ~1.5× larger on desktop; sizes back down on tablet/mobile */
.calc-section .wrap { max-width: 1760px !important; }
@media (max-width: 1180px) { .calc-section .wrap { max-width: 1280px !important; } }
/* the two sliders STACK on separate lines; left content aligns with the top of
   the result card (match its inner padding) */
.calc-wide { align-items: start !important; }
.calc-wide .cw-inputs {
  border-right: 0 !important; padding: clamp(28px, 2.8vw, 40px) 0 0 !important;
  display: flex; flex-direction: column; justify-content: flex-start; gap: 30px; margin-bottom: 0;
}
.cw-sliders { display: flex; flex-direction: column; gap: 26px; }
.cw-sliders .est2-row { margin: 0 !important; }
/* slider header: label left, value right (full width now, so no cramped wrap) */
.cw-sliders .est2-row .er-top { display: flex !important; flex-direction: row; align-items: baseline !important;
  justify-content: space-between; gap: 12px; margin-bottom: 14px !important; }
.cw-sliders .est2-row .er-l { font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--t-mid) !important; line-height: 1.2; white-space: nowrap; }
.cw-sliders .est2-row .er-v { font-size: 21px !important; line-height: 1.1; white-space: nowrap; }
/* result header: keep the eyebrow off the big number */
.cw-results .cw-total .erl { white-space: nowrap; margin-bottom: 4px; }
/* option button groups: organized, evenly spaced, consistent rhythm */
.cw-opts { display: flex; flex-direction: column; gap: 26px; padding-top: 30px; border-top: 1px solid var(--border); }
.calc-wide .est2-row.calc-opt { margin: 0 !important; }
.calc-wide .est2-row.calc-opt .er-top { display: block !important; margin-bottom: 12px; }
.calc-wide .est2-row.calc-opt .er-l { font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--t-mid); }
.calc-wide .est2-row .est2-chips { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 10px; }
.calc-wide .est2-row .est2-chip {
  min-height: 48px; padding: 0 12px; border-radius: var(--r-md); border: 0;
  background: var(--paper-2); color: var(--t-mid); font-family: var(--sans); font-weight: 600; font-size: 13.5px;
  cursor: pointer; transition: background .18s var(--ub-e), color .18s var(--ub-e); white-space: nowrap;
}
.calc-wide .est2-row .est2-chip:hover { background: var(--paper-3); color: var(--t-hi); }
.calc-wide .est2-row .est2-chip.on { background: var(--accent-soft); border: 0; color: var(--t-hi); font-weight: 700; }
@media (max-width: 560px) {
  .calc-wide .est2-row .est2-chips { grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)); }
}
.calc-wide .cw-inputs .est2-row { margin-bottom: 0 !important; }
.calc-wide .est2-row .er-top { margin-bottom: 14px; }
.calc-wide .est2-row .er-l { font-size: 14.5px; }
.calc-wide .est2-row .er-v { font-size: 21px; color: var(--accent); }

/* filled accent track (driven by --p from polish.js) */
.calc-wide input[type=range], .est2-card input[type=range] {
  height: 6px !important; border-radius: 999px !important; transition: none !important;
  background: linear-gradient(90deg, var(--accent) 0 var(--p,50%), var(--paper-3) var(--p,50%) 100%) !important;
}
.calc-wide input[type=range]::-moz-range-track, .est2-card input[type=range]::-moz-range-track { background: transparent; height: 6px; }
.calc-wide input[type=range]::-moz-range-progress, .est2-card input[type=range]::-moz-range-progress { background: var(--accent); height: 6px; border-radius: 999px; }
/* clean thumb — no glow, no scale jump, smooth drag */
.calc-wide input[type=range]::-webkit-slider-thumb, .est2-card input[type=range]::-webkit-slider-thumb {
  width: 22px !important; height: 22px !important; border: 3px solid #fff !important;
  background: var(--accent) !important; box-shadow: 0 1px 4px rgba(8,8,10,.22) !important; transition: none !important; }
.calc-wide input[type=range]:hover::-webkit-slider-thumb, .calc-wide input[type=range]:active::-webkit-slider-thumb,
.calc-wide input[type=range]:focus-visible::-webkit-slider-thumb,
.est2-card input[type=range]:hover::-webkit-slider-thumb, .est2-card input[type=range]:active::-webkit-slider-thumb,
.est2-card input[type=range]:focus-visible::-webkit-slider-thumb {
  transform: none !important; box-shadow: 0 1px 4px rgba(8,8,10,.22) !important; }
.calc-wide input[type=range]::-moz-range-thumb, .est2-card input[type=range]::-moz-range-thumb {
  width: 22px !important; height: 22px !important; border: 3px solid #fff !important; background: var(--accent) !important;
  box-shadow: 0 1px 4px rgba(8,8,10,.22) !important; }

/* right: a self-contained result panel */
.calc-wide .cw-results {
  background: var(--paper-2) !important; border: 1px solid var(--border) !important;
  border-radius: var(--r-lg) !important; padding: clamp(28px, 2.8vw, 40px) !important;
  display: flex; flex-direction: column;
}
.cw-results .cw-total { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px;
  margin-bottom: 4px; padding-bottom: 20px; border-bottom: 1px solid var(--border); }
.cw-results .cw-total .erl { font-family: var(--sans); font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--t-mid); }
.cw-results .cw-total .erv { font-family: var(--sans); font-weight: 700; font-size: clamp(44px, 4.6vw, 60px); letter-spacing: -.03em; color: var(--t-hi); line-height: 1; margin-top: 8px; }
.cw-results .cw-total .ec-badge { margin-bottom: 5px; flex: none; }

/* breakdown — clean borderless rows, no table chrome, no header */
.cw-results .vw-table { width: 100%; border: 0 !important; background: none !important; border-radius: 0 !important; overflow: visible !important; }
.cw-results .vw-table thead { display: none !important; }
.cw-results .vw-table td { padding: 13px 0 !important; border: 0 !important; border-top: 1px solid var(--border) !important; font-size: 14.5px; color: var(--t-mid) !important; background: none !important; }
.cw-results .vw-table tbody tr:first-child td { border-top: 0 !important; }
.cw-results .vw-table td.num { text-align: right; font-family: var(--sans) !important; font-weight: 700; color: var(--t-hi) !important; font-variant-numeric: tabular-nums; }
.cw-results .vw-table tbody tr:hover { background: none !important; }
.cw-results .vw-table tr.col-hot { background: none !important; }
.cw-results .vw-table tr.col-hot td { border-top: 1.5px solid var(--border-strong) !important; padding-top: 15px !important; font-weight: 700; color: var(--t-hi) !important; font-size: 15px; }
.cw-results .vw-table tr.col-hot td.num { color: var(--accent) !important; font-size: 20px; }
.cw-results .btn { width: 100%; margin-top: 22px; }
.cw-results .est2-disc { margin-top: 14px; }

@media (max-width: 920px) {
  .calc-wide { grid-template-columns: 1fr !important; max-width: 600px !important; gap: 26px !important; }
  .calc-wide .cw-inputs { justify-content: flex-start; margin-bottom: 2px; }
}

/* ═══════════════════════════════════════════════════════════════════════
   QUICK-ANSWER + CREDIBILITY BAND — thin strip between hero and the stats
   band. Snippet-friendly factual answer (SEO/featured-snippet/LLM) plus the
   founder credibility line (E-E-A-T). All 4 sites.
   ═══════════════════════════════════════════════════════════════════════ */
/* ── QUICK-ANSWER + CREDIBILITY: ONE thin centered card (AI snippet + E-E-A-T) ── */
.qa-band { background: var(--bg, #FAFAFA); padding: clamp(18px, 2.2vw, 28px) 0; }
.qa-inner { display: flex; align-items: center; justify-content: space-between; gap: 10px 28px; flex-wrap: wrap; text-align: left;
  background: var(--surface, #fff); border: 1px solid var(--border); border-radius: var(--r-lg, 16px);
  padding: 13px clamp(18px, 2vw, 28px); box-shadow: 0 1px 3px rgba(8,8,10,.05); max-width: 1080px; margin: 0 auto; }
.qa-a { position: relative; font-family: var(--sans); font-size: 12.5px; line-height: 1.5; color: var(--t-mid); margin: 0; flex: 0 1 auto; max-width: 62ch; text-wrap: pretty; }
.qa-a b { color: var(--accent); font-weight: 700; letter-spacing: .01em; }
.qa-cred { display: inline-flex; align-items: center; gap: 8px; font-family: var(--sans); font-size: 11.5px; font-weight: 600;
  color: var(--t-mid); white-space: nowrap; flex: 0 0 auto; padding-left: 18px; border-left: 1px solid var(--border); }
.qa-cred svg { width: 14px; height: 14px; color: var(--accent); flex: none; }
.qa-cred b { color: var(--t-hi); font-weight: 700; }
@media (max-width: 760px) {
  .qa-band { padding: 14px 0; }
  .qa-inner { flex-direction: column; align-items: center; text-align: center; gap: 9px; padding: 13px 16px; }
  .qa-a { font-size: 12px; flex-basis: auto; }
  .qa-cred { white-space: normal; font-size: 11px; line-height: 1.4; padding-left: 0; border-left: 0; padding-top: 9px; border-top: 1px solid var(--border); width: 100%; justify-content: center; }
}

/* ═══════════════════════════════════════════════════════════════════════
   DESKTOP +20% — content reads larger on big monitors (live-site feedback).
   `zoom` reflows (no overflow, unlike transform:scale). Gated at ≥1024px so
   tablet/mobile breakpoints are untouched. Hero title reverts to its original
   size and gets the same uniform +20% as everything else.
   ═══════════════════════════════════════════════════════════════════════ */
@media (min-width: 1024px) {
  body { zoom: 1.2; }
  /* hero fills EXACTLY the first screen on landing (zoom-adjusted: 100vh visual) */
  .hero { min-height: calc(100vh / 1.2) !important; padding-top: 104px !important; padding-bottom: 56px !important; }
}
/* tablet: full first screen too */
@media (min-width: 769px) and (max-width: 1023px) {
  .hero { min-height: 100vh !important; }
}

/* Hero scrim — deepen so the white headline stays crisp over busy/bright urban
   imagery (center-weighted dark veil + stronger bottom gradient). */
.hero-bg::after { background:
  radial-gradient(80% 70% at 50% 46%, rgba(8,8,10,.62) 0%, rgba(8,8,10,.34) 55%, rgba(8,8,10,.18) 80%),
  linear-gradient(180deg, rgba(8,8,10,.42) 0%, rgba(8,8,10,.30) 42%, rgba(8,8,10,.52) 100%) !important; }

/* ── HERO shooting stars — 3 minimal streaks, distinct paths, gentle cadence ── */
.hero-stars { position: absolute; inset: 0 0 auto 0; height: 30%; z-index: 2; overflow: hidden; pointer-events: none; }
.hero-stars i { position: absolute; height: 1px; border-radius: 2px;
  background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.42));
  filter: drop-shadow(0 0 2px rgba(255,255,255,.22)); opacity: 0; }
.hero-stars i::after { content: ""; position: absolute; right: 0; top: -1px; width: 2.5px; height: 2.5px; border-radius: 50%;
  background: rgba(255,255,255,.65); box-shadow: 0 0 4px 1px rgba(255,255,255,.3); }
.hero-stars i:nth-child(1) { top: 14%; left: -100px; width: 95px; transform: rotate(7deg); }
.hero-stars i:nth-child(2) { top: 52%; left: 18%; width: 70px; transform: rotate(13deg); }
.hero-stars i:nth-child(3) { top: 30%; right: -100px; width: 85px; transform: rotate(173deg); }
@media (prefers-reduced-motion: no-preference) {
  .hero-stars i:nth-child(1) { animation: vwshootA 30s cubic-bezier(.4,0,.2,1) infinite; }
  .hero-stars i:nth-child(2) { animation: vwshootB 30s cubic-bezier(.4,0,.2,1) 10s infinite; }
  .hero-stars i:nth-child(3) { animation: vwshootC 30s cubic-bezier(.4,0,.2,1) 20s infinite; }
}
@keyframes vwshootA {
  0% { opacity: 0; transform: translate(0,0) rotate(7deg); }
  2.5% { opacity: .45; } 8% { opacity: .45; }
  13% { opacity: 0; transform: translate(64vw, 6vw) rotate(7deg); }
  100% { opacity: 0; transform: translate(64vw, 6vw) rotate(7deg); }
}
@keyframes vwshootB {
  0% { opacity: 0; transform: translate(0,0) rotate(13deg); }
  2% { opacity: .38; } 6.5% { opacity: .38; }
  10.5% { opacity: 0; transform: translate(38vw, 7vw) rotate(13deg); }
  100% { opacity: 0; transform: translate(38vw, 7vw) rotate(13deg); }
}
@keyframes vwshootC {
  0% { opacity: 0; transform: translate(0,0) rotate(173deg); }
  2.5% { opacity: .42; } 7.5% { opacity: .42; }
  12% { opacity: 0; transform: translate(-58vw, 5vw) rotate(173deg); }
  100% { opacity: 0; transform: translate(-58vw, 5vw) rotate(173deg); }
}


/* ═══════════════════════════════════════════════════════════════════════
   REVIEWS — CANONICAL BLOCK (single source of truth · DO NOT add any other
   .reviews/.rev-* rules anywhere). 3 visible desktop · 2 tablet · 1 mobile.
   Starts at the first card, scrolls right; arrows under the rail step 1 card.
   No clones, no auto-scroll, no masks.
   ═══════════════════════════════════════════════════════════════════════ */
.reviews .revx { display: flex !important; flex-wrap: wrap; justify-content: center; align-items: flex-start; position: relative; }
.reviews .rev-rail { order: 0; flex: 1 1 100%; width: 100%; display: flex !important; flex-wrap: nowrap !important;
  overflow-x: auto !important; overflow-y: hidden; justify-content: flex-start !important; gap: 24px !important;
  padding: 8px 2px 4px !important; scroll-snap-type: x mandatory; scroll-behavior: auto !important; scroll-padding-left: 0; direction: ltr;
  -webkit-mask-image: none !important; mask-image: none !important; -ms-overflow-style: none; scrollbar-width: none; touch-action: pan-y; cursor: grab; }
.reviews .rev-rail.dragging { cursor: grabbing; }
.reviews .rev-rail::-webkit-scrollbar { display: none; }
.reviews .rev-rail .rev-tile { display: flex !important; flex: 0 0 calc((100% - 48px) / 3) !important; width: calc((100% - 48px) / 3) !important;
  min-width: 0 !important; max-width: none !important; scroll-snap-align: start !important; }
/* beats wsa.css's nth-child(n+4){display:none} */
.reviews .rev-rail .rev-tile:nth-child(n+4) { display: flex !important; }
.reviews .rev-rail .rev-tile.rev-clone { display: none !important; }
.reviews .rev-arrow { display: grid !important; place-items: center; order: 1; width: 46px; height: 46px; border-radius: 50%;
  background: #0a0a0a; color: #fff; border: 0; cursor: pointer; margin-top: 26px; padding: 0; transition: transform .18s ease, background .18s; }
.reviews .rev-arrow svg { width: 20px; height: 20px; }
.reviews .rev-arrow:hover { transform: translateY(-2px); }
.reviews .rev-arrow:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.reviews .rev-arrow.prev { margin-right: 10px; }
.reviews .rev-arrow.next { order: 2; }
.reviews.section.dark .rev-arrow { background: #fff; color: #0a0a0a; }
@media (max-width: 1024px) {
  .reviews .rev-rail .rev-tile, .reviews .rev-rail .rev-tile:nth-child(n+4) { flex: 0 0 calc((100% - 24px) / 2) !important; width: calc((100% - 24px) / 2) !important; }
}
@media (max-width: 768px) {
  .reviews .rev-rail .rev-tile, .reviews .rev-rail .rev-tile:nth-child(n+4) { flex: 0 0 100% !important; width: 100% !important; }
}