/* ═══════════════════════════════════════════════════════════════════════
   WHAT SETS US APART — premium fintech product cards  (Meridian system)
   Shared by all 4 sites. Brand accent flips red↔green via [data-brand].
   Animations key off `.wsa-card.in` (added by the shared reveal observer).
   ═══════════════════════════════════════════════════════════════════════ */

/* secondary chart hue = the system's lavender "intelligence" tone (reads blue) */
/* authoritative monochrome + single brand accent — no lavender, no rainbow */
.wsa { --wsa-2: rgba(255,255,255,.40); --wsa-2b: rgba(255,255,255,.72); }

/* ── section shell: subtle glow + faint dotted grid over the near-black ── */
.wsa { position: relative; overflow: hidden; }
.wsa .section-head { max-width: 880px; }
.wsa .section-head .h2 { padding-bottom: .12em; }
.wsa::before {
  content: ""; position: absolute; inset: -10% -5% auto; height: 70%;
  background: radial-gradient(46% 58% at 50% 0%, color-mix(in srgb, var(--accent) 9%, transparent), transparent 72%);
  pointer-events: none; z-index: 0;
}
.wsa::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .5;
  background-image: radial-gradient(rgba(255,255,255,.05) 1px, transparent 1.4px);
  background-size: 34px 34px;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 22%, #000 80%, transparent);
          mask-image: linear-gradient(180deg, transparent, #000 22%, #000 80%, transparent);
}
.wsa > .wrap { position: relative; z-index: 1; }

/* ── grid of two large cards ── */
.wsa-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; align-items: stretch; }
@media (max-width: 1000px) { .wsa-grid { grid-template-columns: 1fr; gap: 24px; max-width: 620px; margin: 0 auto; } }

/* ── the card ── */
.wsa-card {
  position: relative; display: flex; flex-direction: column;
  border-radius: var(--r-xl);
  background: var(--ink-1);
  border: 1px solid var(--ink-4);
  padding: 24px;
  box-shadow: var(--sh-2);
}
@media (max-width: 540px) { .wsa-card { padding: 18px; } }

/* card header (outside the device panel) */
.wsa-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 16px; }
.wsa-kicker { font-family: var(--sans); font-size: 10.5px; letter-spacing: .01em; text-transform: none; font-weight: 600; color: var(--t-mid-d); }
.wsa-badge {
  display: inline-flex; align-items: center; gap: 7px; flex: none;
  font-family: var(--sans); font-size: 10px; letter-spacing: .01em; text-transform: none; font-weight: 600;
  color: var(--accent); background: color-mix(in srgb, var(--accent) 13%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 34%, transparent);
  padding: 5px 11px; border-radius: var(--r-pill);
}
.wsa-badge .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.wsa-badge.alt { color: var(--t-mid-d); background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.14); }
.wsa-badge.alt .dot { background: var(--t-lo-d); }

/* ── device / dashboard panel ── */
.wsa-panel {
  position: relative; display: flex; flex-direction: column; flex: 1;
  border-radius: var(--r-lg); overflow: hidden;
  background: var(--ink);
  border: 1px solid rgba(255,255,255,.07);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 14px 36px rgba(0,0,0,.28);
}
.wsa-chrome {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 16px; border-bottom: 1px solid rgba(255,255,255,.06);
  background: rgba(255,255,255,.03);
}
.wsa-dots { display: flex; gap: 6px; }
.wsa-dots i { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,.18); }
.wsa-chrome-lbl { font-family: var(--sans); font-size: 10.5px; letter-spacing: .04em; color: var(--t-lo-d); }
.wsa-chrome-tag {
  margin-left: auto; display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--sans); font-size: 9px; letter-spacing: .01em; text-transform: none;
  color: var(--t-mid-d); background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08);
  padding: 4px 9px; border-radius: var(--r-pill);
}
.wsa-chrome-tag::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); }
.wsa-panel-body { display: flex; flex-direction: column; gap: 18px; padding: 22px; flex: 1; }
@media (max-width: 540px) { .wsa-panel-body { padding: 16px; gap: 14px; } }

/* ── cycling preview stack (3 stationary previews per card) ── */
.wsa-track { display: flex; gap: 5px; padding: 14px 22px 0; }
.wsa-track i { flex: 1; height: 3px; border-radius: 3px; background: rgba(255,255,255,.12); overflow: hidden; }
.wsa-track i b { display: block; height: 100%; width: 0; border-radius: 3px; background: var(--accent); }
.wsa-panel .wsa-panel-body { padding-top: 16px; }
.wsa-stack { display: grid; flex: 1; }
.wsa-prev { grid-area: 1 / 1; display: flex; flex-direction: column; gap: 16px; opacity: 0; visibility: hidden; transform: translateY(12px) scale(.985); filter: blur(4px); transition: opacity .9s cubic-bezier(0.22,1,0.36,1), transform 1s cubic-bezier(0.22,1,0.36,1), filter .7s cubic-bezier(0.22,1,0.36,1), visibility 0s linear 1s; will-change: opacity, transform; }
.wsa-prev.on { opacity: 1; visibility: visible; transform: none; filter: none; transition: opacity .9s cubic-bezier(0.22,1,0.36,1), transform 1s cubic-bezier(0.22,1,0.36,1), filter .7s cubic-bezier(0.22,1,0.36,1), visibility 0s; }
.wsa-prev .wsa-h { font-size: 18px; }
@media (max-width: 540px) { .wsa-prev { gap: 13px; } }
.wsa-cap { font-family: var(--sans); font-weight: 500; font-size: 9px; letter-spacing: 0; color: var(--t-lo-d); text-align: center; }

/* status-card grid (card 1 · preview 2) */
.wsa-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.wsa-stat { border: 1px solid rgba(255,255,255,.07); border-radius: var(--r-md); background: rgba(255,255,255,.022); padding: 14px; }
.wsa-stat .st-l { font-family: var(--sans); font-size: 9px; letter-spacing: .01em; text-transform: none; font-weight: 600; color: var(--t-lo-d); }
.wsa-stat .st-v { font-size: 18px; font-weight: 700; color: #fff; margin-top: 7px; letter-spacing: -.01em; }
.wsa-stat .st-t { display: inline-flex; align-items: center; gap: 6px; margin-top: 9px; font-family: var(--sans); font-size: 9.5px; letter-spacing: .04em; color: var(--accent); }
.wsa-stat .st-t::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); flex: none; }
.wsa-stat.muted .st-t { color: var(--t-mid-d); }
.wsa-stat.muted .st-t::before { background: var(--t-lo-d); }

/* milestone stepper (card 1 · preview 3) */
.wsa-steps { display: flex; align-items: flex-start; padding: 6px 0; }
.wsa-step { flex: 1; display: flex; flex-direction: column; align-items: center; text-align: center; position: relative; }
.wsa-step::before { content: ""; position: absolute; top: 11px; left: -50%; width: 100%; height: 2px; background: rgba(255,255,255,.12); }
.wsa-step:first-child::before { display: none; }
.wsa-step.done::before, .wsa-step.active::before { background: var(--accent); }
.wsa-step .sd { width: 24px; height: 24px; border-radius: 50%; background: var(--ink-2); border: 2px solid rgba(255,255,255,.18); display: grid; place-items: center; position: relative; z-index: 1; color: var(--t-lo-d); }
.wsa-step .sd svg { width: 12px; height: 12px; }
.wsa-step.done .sd { background: var(--accent); border-color: var(--accent); color: #fff; }
.wsa-step.active .sd { border-color: var(--accent); }
.wsa-step.active .sd::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
.wsa-step .sl { font-size: 12px; font-weight: 600; color: var(--t-hi-d); margin-top: 9px; }
.wsa-step .sm { font-family: var(--sans); font-size: 9px; letter-spacing: .04em; color: var(--t-lo-d); margin-top: 3px; }
.wsa-step.upcoming .sl { color: var(--t-mid-d); }

/* side-by-side option cards (card 2 · preview 2) */
.wsa-opts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.wsa-opt { border: 1px solid rgba(255,255,255,.08); border-radius: var(--r-md); background: rgba(255,255,255,.022); padding: 14px 11px; text-align: center; }
.wsa-opt .o-n { font-size: 13px; font-weight: 700; color: #fff; }
.wsa-opt .o-s { font-family: var(--sans); font-size: 8.5px; letter-spacing: .06em; text-transform: none; color: var(--t-lo-d); margin-top: 4px; }
.wsa-opt .o-bar { height: 5px; border-radius: 3px; background: rgba(255,255,255,.1); margin: 14px 0 11px; overflow: hidden; }
.wsa-opt .o-bar i { display: block; height: 100%; width: var(--w,60%); border-radius: 3px; background: var(--accent); transform-origin: left; }
.wsa-opt .o-t { font-family: var(--sans); font-size: 8.5px; letter-spacing: .06em; text-transform: none; color: var(--t-mid-d); }
.wsa-opt.rec { border-color: color-mix(in srgb, var(--accent) 48%, transparent); background: color-mix(in srgb, var(--accent) 12%, rgba(255,255,255,.02)); }
.wsa-opt.rec .o-t { color: #fff; background: var(--accent); border-radius: var(--r-pill); padding: 3px 8px; display: inline-block; }

/* panel title */
.wsa-h { font-family: var(--sans); font-weight: 700; font-size: 20px; color: #fff; line-height: 1.18; letter-spacing: -.015em; }
.wsa-sub { font-family: var(--sans); font-size: 9.5px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--t-lo-d); margin-top: 6px; }

/* ════════ CARD 1 — line chart ════════ */
.wsa-chart {
  border: 1px solid rgba(255,255,255,.07); border-radius: var(--r-md);
  background: rgba(255,255,255,.022);
  padding: 16px 16px 6px;
}
.wsa-chart-top { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 10px; }
.wsa-chart-lbl { font-family: var(--sans); font-size: 10px; letter-spacing: .01em; text-transform: none; font-weight: 600; color: var(--t-mid-d); }
.wsa-chart-meta { font-family: var(--sans); font-size: 11px; font-weight: 600; color: var(--accent); font-variant-numeric: tabular-nums; }
.wsa-line { position: relative; width: 100%; height: 116px; }
.wsa-line svg { width: 100%; height: 100%; display: block; overflow: visible; }
.wsa-grid-ln { stroke: rgba(255,255,255,.06); stroke-width: 1; }
.wsa-area { fill: url(#wsaGrad); opacity: 0; transition: opacity 1s var(--ease-out) .5s; }
.wsa-line-path { fill: none; stroke: var(--accent); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.wsa-line-2 { fill: none; stroke: rgba(255,255,255,.28); stroke-width: 1.5; stroke-dasharray: 2 5; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.wsa-line-dot { fill: #fff; stroke: var(--accent); stroke-width: 2.5; opacity: 0; transition: opacity .3s 1.5s; }
.wsa-card.in .wsa-area { opacity: 1; }
.wsa-card.in .wsa-line-dot { opacity: 1; }

/* checklist / status rows */
.wsa-checklist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.wsa-row {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px; border-radius: var(--r-sm);
  background: rgba(255,255,255,.035); border: 1px solid rgba(255,255,255,.06);
}
.wsa-row .wsa-check {
  flex: none; width: 22px; height: 22px; border-radius: 50%;
  display: grid; place-items: center; font-size: 12px;
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.12); color: var(--t-lo-d);
}
.wsa-row .wsa-check svg { width: 12px; height: 12px; }
.wsa-row.done .wsa-check { background: color-mix(in srgb, var(--accent) 22%, transparent); border-color: color-mix(in srgb, var(--accent) 50%, transparent); color: #fff; }
.wsa-row .wsa-row-l { font-size: 13.5px; color: var(--t-hi-d); font-weight: 500; flex: 1; min-width: 0; }
.wsa-row .wsa-row-v { font-family: var(--sans); font-size: 10.5px; letter-spacing: .04em; color: var(--t-mid-d); flex: none; }
.wsa-row.active { border-color: color-mix(in srgb, var(--accent) 38%, transparent); background: color-mix(in srgb, var(--accent) 8%, rgba(255,255,255,.02)); }
.wsa-row.active .wsa-check { background: transparent; border-color: var(--accent); position: relative; }
.wsa-row.active .wsa-check::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
.wsa-row .wsa-row-mid { flex: 1; min-width: 0; }
.wsa-prog { height: 4px; border-radius: 3px; background: rgba(255,255,255,.1); overflow: hidden; margin-top: 8px; }
.wsa-prog i { display: block; height: 100%; width: var(--w, 60%); border-radius: 3px; background: var(--accent); transform-origin: left; }

/* micro CTA panel pinned to card 1 footer */
.wsa-micro {
  margin-top: auto; display: flex; align-items: center; gap: 14px;
  padding: 15px 18px; border-radius: var(--r-md);
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08);
  text-decoration: none; transition: background .2s var(--ease-snap), border-color .2s;
}
.wsa-micro .wsa-micro-t { font-size: 14px; font-weight: 600; color: #fff; flex: 1; }
.wsa-micro svg { width: 18px; height: 18px; color: #fff; flex: none; transition: transform .25s var(--ease-snap); }
.wsa-micro:hover { background: var(--accent); border-color: var(--accent); }
.wsa-micro:hover svg { transform: translateX(3px); }

/* ════════ CARD 2 — tabs ════════ */
.wsa-tabs { display: flex; gap: 6px; padding: 4px; border-radius: var(--r-pill); background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.07); }
.wsa-tabs button {
  flex: 1; padding: 9px 6px; border: none; cursor: pointer; border-radius: var(--r-pill);
  font-family: var(--sans); font-size: 12.5px; font-weight: 600; color: var(--t-mid-d);
  background: transparent; transition: background .2s, color .2s; white-space: nowrap;
}
.wsa-tabs button.on { background: var(--accent); color: #fff; }
.wsa-tabs button:not(.on):hover { color: #fff; }

/* charts row: donut + bars */
.wsa-charts2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 420px) { .wsa-charts2 { grid-template-columns: 1fr; } }
.wsa-mini { border: 1px solid rgba(255,255,255,.07); border-radius: var(--r-md); background: rgba(255,255,255,.022); padding: 14px; display: flex; flex-direction: column; }
.wsa-mini-lbl { font-family: var(--sans); font-size: 9.5px; letter-spacing: .01em; text-transform: none; font-weight: 600; color: var(--t-mid-d); margin-bottom: 12px; }
.wsa-mini-cap { font-family: var(--sans); font-weight: 500; font-size: 9px; letter-spacing: 0; color: var(--t-lo-d); margin-top: auto; padding-top: 10px; }

/* donut */
.wsa-donut { position: relative; width: 104px; height: 104px; margin: 2px auto 12px; }
.wsa-donut svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.wsa-donut .trk { fill: none; stroke: rgba(255,255,255,.07); stroke-width: 13; }
.wsa-donut .wsa-seg { fill: none; stroke-width: 13; stroke-linecap: butt; }
.wsa-donut-ctr { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.wsa-donut-ctr b { font-family: var(--sans); font-weight: 700; font-size: 21px; color: #fff; line-height: 1; }
.wsa-donut-ctr span { font-family: var(--sans); font-size: 8px; letter-spacing: .01em; text-transform: none; color: var(--t-lo-d); margin-top: 4px; display: block; }
.wsa-legend { display: grid; gap: 7px; margin-top: auto; }
.wsa-legend .lg { display: flex; align-items: center; gap: 8px; font-size: 11.5px; color: var(--t-mid-d); }
.wsa-legend .lg .sw { width: 9px; height: 9px; border-radius: 3px; flex: none; }
.wsa-legend .lg b { margin-left: auto; font-family: var(--sans); font-weight: 500; color: var(--t-hi-d); font-variant-numeric: tabular-nums; }
/* monochrome donut: accent leader + neutral greys (override inline colors) */
.wsa-donut .wsa-seg:nth-child(2) { stroke: var(--accent) !important; }
.wsa-donut .wsa-seg:nth-child(3) { stroke: rgba(255,255,255,.58) !important; }
.wsa-donut .wsa-seg:nth-child(4) { stroke: rgba(255,255,255,.32) !important; }
.wsa-donut .wsa-seg:nth-child(5) { stroke: rgba(255,255,255,.16) !important; }
.wsa-legend .lg:nth-child(1) .sw { background: var(--accent) !important; }
.wsa-legend .lg:nth-child(2) .sw { background: rgba(255,255,255,.58) !important; }
.wsa-legend .lg:nth-child(3) .sw { background: rgba(255,255,255,.32) !important; }
.wsa-legend .lg:nth-child(4) .sw { background: rgba(255,255,255,.16) !important; }

/* bars */
.wsa-bars { display: flex; align-items: flex-end; justify-content: space-between; gap: 9px; height: 104px; padding-top: 4px; }
.wsa-bar { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 7px; height: 100%; justify-content: flex-end; }
.wsa-bar .bk {
  width: 100%; max-width: 26px; height: var(--h, 50%); border-radius: 4px 4px 2px 2px;
  background: rgba(255,255,255,.2);
  transform-origin: bottom;
}
.wsa-bar:first-child .bk { background: var(--accent); }
.wsa-bar .bl { font-family: var(--sans); font-size: 8.5px; letter-spacing: .04em; color: var(--t-lo-d); white-space: nowrap; }
.wsa-bar .bv { font-family: var(--sans); font-size: 10px; font-weight: 600; color: var(--t-hi-d); }

/* comparison table */
.wsa-table { width: 100%; border-collapse: collapse; border: 1px solid rgba(255,255,255,.07); border-radius: var(--r-md); overflow: hidden; }
.wsa-table th { font-family: var(--sans); font-size: 9px; letter-spacing: .01em; text-transform: none; color: var(--t-lo-d); text-align: left; font-weight: 600; padding: 10px 14px; background: rgba(255,255,255,.03); }
.wsa-table th:last-child, .wsa-table td:last-child { text-align: right; }
.wsa-table td { padding: 12px 14px; font-size: 13px; color: var(--t-hi-d); border-top: 1px solid rgba(255,255,255,.06); }
.wsa-table .opt { font-weight: 600; }
.wsa-table .bf { color: var(--t-mid-d); font-size: 12px; }
.wsa-table .pill { font-family: var(--sans); font-size: 9.5px; letter-spacing: .06em; text-transform: none; color: var(--t-mid-d); }
.wsa-table tr.rec td { background: color-mix(in srgb, var(--accent) 11%, transparent); }
.wsa-table tr.rec .opt { color: #fff; }
.wsa-table tr.rec .pill { color: #fff; background: var(--accent); padding: 4px 9px; border-radius: var(--r-pill); font-weight: 600; }

/* insight callout */
.wsa-insight { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: var(--r-md); background: rgba(255,255,255,.025); border: 1px solid rgba(255,255,255,.09); border-left: 2px solid var(--accent); }
.wsa-insight svg { width: 18px; height: 18px; color: var(--accent); flex: none; margin-top: 1px; }
.wsa-insight p { margin: 0; font-size: 13px; line-height: 1.5; color: var(--t-mid-d); }
.wsa-insight p b { color: #fff; font-weight: 600; }

/* ── section CTA row ── */
.wsa-cta { display: flex; flex-direction: column; align-items: center; gap: 14px; margin-top: 44px; }
.wsa-btn {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--sans); font-size: 15px; font-weight: 600;
  color: #fff; text-decoration: none;
  padding: 16px 30px; border-radius: var(--r-pill);
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.18);
  transition: background .2s var(--ease-snap), border-color .2s var(--ease-snap), color .2s;
}
.wsa-btn svg { width: 16px; height: 16px; }
.wsa-btn:hover { background: var(--accent); border-color: var(--accent); color: #fff; }
.wsa-cta-note { font-family: var(--sans); font-weight: 500; font-size: 10px; letter-spacing: 0; color: var(--t-lo-d); text-align: center; }

/* ════════════════════════ MOTION ════════════════════════ */
@media (prefers-reduced-motion: no-preference) {
  /* line draws in — re-runs each time its preview becomes active */
  .wsa-line-path, .wsa-line-2 { stroke-dasharray: 100; stroke-dashoffset: 100; }
  .wsa-prev.on .wsa-line-path { transition: stroke-dashoffset 1.6s var(--ease-out); stroke-dashoffset: 0; }
  .wsa-prev.on .wsa-line-2 { transition: stroke-dashoffset 1.8s var(--ease-out) .12s; stroke-dashoffset: 0; }
  .wsa-area, .wsa-line-dot { opacity: 0; }
  .wsa-prev.on .wsa-area { transition: opacity 1s var(--ease-out) .4s; opacity: 1; }
  .wsa-prev.on .wsa-line-dot { transition: opacity .3s 1.3s; opacity: 1; }

  /* donut segments draw */
  .wsa-prev.on .wsa-donut .wsa-seg { animation: wsaDonut 1.15s var(--ease-out) both; }
  .wsa-prev.on .wsa-donut .wsa-seg:nth-child(3) { animation-delay: .16s; }
  .wsa-prev.on .wsa-donut .wsa-seg:nth-child(4) { animation-delay: .3s; }
  .wsa-prev.on .wsa-donut .wsa-seg:nth-child(5) { animation-delay: .44s; }

  /* bars grow */
  .wsa-bar .bk { transform: scaleY(0); }
  .wsa-prev.on .wsa-bar .bk { transition: transform .85s var(--ease-out); transform: scaleY(1); }
  .wsa-prev.on .wsa-bar:nth-child(2) .bk { transition-delay: .09s; }
  .wsa-prev.on .wsa-bar:nth-child(3) .bk { transition-delay: .18s; }
  .wsa-prev.on .wsa-bar:nth-child(4) .bk { transition-delay: .27s; }

  /* progress + option bars fill */
  .wsa-prog i, .wsa-opt .o-bar i { transform: scaleX(0); }
  .wsa-prev.on .wsa-prog i { transition: transform 1.1s var(--ease-out) .4s; transform: scaleX(1); }
  .wsa-prev.on .wsa-opt .o-bar i { transition: transform .9s var(--ease-out); transform: scaleX(1); }
  .wsa-prev.on .wsa-opt:nth-child(2) .o-bar i { transition-delay: .1s; }
  .wsa-prev.on .wsa-opt:nth-child(3) .o-bar i { transition-delay: .2s; }

  /* rows / table rows / stat cards / steps / option cards reveal in sequence */
  .wsa-row, .wsa-table tbody tr, .wsa-stat, .wsa-step, .wsa-opt { opacity: 0; transform: translateY(10px); }
  .wsa-prev.on .wsa-row, .wsa-prev.on .wsa-table tbody tr, .wsa-prev.on .wsa-stat, .wsa-prev.on .wsa-step, .wsa-prev.on .wsa-opt {
    transition: opacity .5s var(--ease-out), transform .5s var(--ease-out); opacity: 1; transform: none;
  }
  .wsa-prev.on .wsa-row:nth-child(2), .wsa-prev.on .wsa-table tbody tr:nth-child(2),
  .wsa-prev.on .wsa-stat:nth-child(2), .wsa-prev.on .wsa-step:nth-child(2), .wsa-prev.on .wsa-opt:nth-child(2) { transition-delay: .1s; }
  .wsa-prev.on .wsa-row:nth-child(3), .wsa-prev.on .wsa-table tbody tr:nth-child(3),
  .wsa-prev.on .wsa-stat:nth-child(3), .wsa-prev.on .wsa-step:nth-child(3), .wsa-prev.on .wsa-opt:nth-child(3) { transition-delay: .2s; }
  .wsa-prev.on .wsa-stat:nth-child(4), .wsa-prev.on .wsa-step:nth-child(4) { transition-delay: .3s; }

  /* charts row + insight ease in */
  .wsa-charts2, .wsa-insight { opacity: 0; transform: translateY(10px); }
  .wsa-prev.on .wsa-charts2, .wsa-prev.on .wsa-insight { transition: opacity .55s var(--ease-out) .15s, transform .55s var(--ease-out) .15s; opacity: 1; transform: none; }

  /* live status dot + chrome tag breathe softly (opacity only — no positional motion) */
  .wsa-row.active .wsa-check::after, .wsa-chrome-tag::before, .wsa-badge .dot { animation: wsaPulse 2.4s ease-in-out infinite; }
}
@keyframes wsaDonut { from { stroke-dasharray: 0 100; } }
@keyframes wsaPulse { 0%,100% { opacity: 1; } 50% { opacity: .45; } }

/* reduced-motion / no-JS fallback: final chart states (the cycler controls which
   preview is visible — it always runs, so we must NOT force a preview visible here,
   or it would overlap the active one once reveal-all is added) */
html.reveal-all .wsa-line-path, html.reveal-all .wsa-line-2 { stroke-dashoffset: 0 !important; }
html.reveal-all .wsa-donut .wsa-seg { animation: none !important; }
html.reveal-all .wsa-bar .bk { transform: scaleY(1) !important; }
html.reveal-all .wsa-prog i, html.reveal-all .wsa-opt .o-bar i { transform: scaleX(1) !important; }
html.reveal-all .wsa-row, html.reveal-all .wsa-table tbody tr, html.reveal-all .wsa-stat,
html.reveal-all .wsa-step, html.reveal-all .wsa-opt, html.reveal-all .wsa-charts2,
html.reveal-all .wsa-insight, html.reveal-all .wsa-area, html.reveal-all .wsa-line-dot { opacity: 1 !important; transform: none !important; }

/* ═══════════════════════════════════════════════════════════════════════
   TRACK EVERY STEP / PROTECT EVERY PART — premium glass dashboard cards
   (replaces the old stock-photo cards; same fintech vocabulary as .wsa)
   ═══════════════════════════════════════════════════════════════════════ */
.tcards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px; }
.tcards .tcard:nth-child(3):last-child { grid-column: 1 / -1; width: calc(50% - 16px); justify-self: center; }
@media (max-width: 980px) { .tcards { grid-template-columns: 1fr; max-width: 560px; margin: 0 auto; } .tcards .tcard:nth-child(3):last-child { grid-column: auto; width: auto; } }
.tcard {
  display: flex; flex-direction: column; min-height: 600px;
  border-radius: var(--r-xl);
  background: var(--ink-1);
  border: 1px solid var(--ink-4); padding: 40px;
  box-shadow: var(--sh-2);
  transition: transform .4s var(--ease-out), box-shadow .4s var(--ease-out), border-color .4s var(--ease-out);
}
@media (hover: hover) {
  .tcard:hover {
    transform: translateY(-6px);
    border-color: color-mix(in srgb, var(--accent) 40%, var(--ink-4));
    box-shadow: 0 22px 50px rgba(8,8,10,.34), 0 0 0 1px color-mix(in srgb, var(--accent) 12%, transparent);
  }
}
@media (max-width: 540px) { .tcard { padding: 22px; min-height: 0; } }
.tc-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.tc-lbl { font-family: var(--sans); font-size: 10px; letter-spacing: .01em; text-transform: none; font-weight: 600; color: var(--t-mid-d); }
.tc-pill { display: inline-flex; align-items: center; gap: 6px; flex: none; font-family: var(--sans); font-size: 9px; letter-spacing: .01em; text-transform: none; font-weight: 600; color: var(--accent); background: color-mix(in srgb, var(--accent) 13%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 32%, transparent); padding: 4px 10px; border-radius: var(--r-pill); }
.tc-pill .d { width: 5px; height: 5px; border-radius: 50%; background: var(--accent); }
.tc-viz {
  flex: 1; border: 1px solid rgba(255,255,255,.07); border-radius: var(--r-lg);
  background: var(--ink);
  padding: 28px; display: flex; flex-direction: column; gap: 15px;
}
.tc-foot { margin-top: 24px; }
.tc-foot h4 { margin: 0 0 9px; font-size: 24px; font-weight: 700; color: #fff; letter-spacing: -.015em; }
.tc-foot p { margin: 0; font-size: 15px; line-height: 1.58; color: var(--t-mid-d); }

/* step list */
.tc-steps { display: flex; flex-direction: column; gap: 14px; }
.tc-srow { display: flex; align-items: center; gap: 12px; font-size: 14px; color: var(--t-hi-d); }
.tc-srow .ic { width: 20px; height: 20px; border-radius: 50%; flex: none; display: grid; place-items: center; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.12); color: var(--t-lo-d); }
.tc-srow .ic svg { width: 11px; height: 11px; }
.tc-srow.done .ic { background: color-mix(in srgb, var(--accent) 22%, transparent); border-color: color-mix(in srgb, var(--accent) 50%, transparent); color: #fff; }
.tc-srow.live .ic { border-color: var(--accent); }
.tc-srow.live .ic::after { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
.tc-srow .tx { flex: 1; min-width: 0; }
.tc-srow .vv { font-family: var(--sans); font-size: 9.5px; letter-spacing: .04em; color: var(--t-mid-d); flex: none; }
.tc-srow.up { color: var(--t-mid-d); }

/* progress bar */
.tc-bar { height: 5px; border-radius: 3px; background: rgba(255,255,255,.1); overflow: hidden; margin-top: auto; }
.tc-bar i { display: block; height: 100%; width: var(--w, 60%); border-radius: 3px; background: var(--accent); transform-origin: left; }

/* sparkline */
.tc-meta { display: flex; align-items: baseline; justify-content: space-between; }
.tc-meta .k { font-family: var(--sans); font-size: 9.5px; letter-spacing: .01em; text-transform: none; font-weight: 600; color: var(--t-lo-d); }
.tc-meta .v { font-family: var(--sans); font-size: 13px; font-weight: 600; color: var(--t-hi-d); }
.tc-spark { width: 100%; flex: 1; min-height: 180px; position: relative; }
.tc-spark svg { width: 100%; height: 100%; display: block; overflow: visible; }
/* end-of-line marker: a TRUE circle (the old SVG <circle> distorted to an oval inside the
   non-uniformly stretched sparkline SVG). CSS-positioned over the line's last point. */
.tc-spk-pt { position: absolute; left: 98%; top: 28.3%; width: 10px; height: 10px; border-radius: 50%; background: #fff; border: 2.5px solid var(--accent); transform: translate(-50%, -50%); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 16%, transparent); }
.tc-gln { stroke: rgba(255,255,255,.06); stroke-width: 1; }
.tc-spk-line { fill: none; stroke: var(--accent); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.tc-spk-dot { fill: #fff; stroke: var(--accent); stroke-width: 2.5; }
.tc-cap { font-family: var(--sans); font-weight: 500; font-size: 9px; letter-spacing: 0; color: var(--t-lo-d); }

/* calendar */
.tc-cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; }
.tc-cal span { aspect-ratio: 1; border-radius: 6px; background: rgba(255,255,255,.06); display: grid; place-items: center; font-family: var(--sans); font-size: 9px; color: var(--t-lo-d); }
.tc-cal span.mid { background: color-mix(in srgb, var(--accent) 24%, transparent); color: #fff; }
.tc-cal span.hot { background: var(--accent); color: #fff; font-weight: 600; }

/* coverage meter */
.tc-meter { display: flex; flex-direction: column; gap: 8px; }
.tc-meter .mrow { display: flex; align-items: center; gap: 11px; font-size: 12.5px; color: var(--t-hi-d); }
.tc-meter .mrow .mt { flex: none; width: 78px; color: var(--t-mid-d); font-size: 11.5px; }
.tc-meter .mrow .mb { flex: 1; height: 6px; border-radius: 3px; background: rgba(255,255,255,.1); overflow: hidden; }
.tc-meter .mrow .mb i { display: block; height: 100%; width: var(--w,60%); border-radius: 3px; background: var(--accent); transform-origin: left; }

/* track motion */
@media (prefers-reduced-motion: no-preference) {
  .tc-spk-line { stroke-dasharray: 100; stroke-dashoffset: 100; }
  .tcard.in .tc-spk-line { transition: stroke-dashoffset 1.6s var(--ease-out); stroke-dashoffset: 0; }
  .tc-spk-dot, .tc-spk-pt { opacity: 0; }
  .tcard.in .tc-spk-dot, .tcard.in .tc-spk-pt { transition: opacity .3s 1.3s; opacity: 1; }
  .tc-bar i, .tc-meter .mrow .mb i { transform: scaleX(0); }
  .tcard.in .tc-bar i { transition: transform 1.1s var(--ease-out) .3s; transform: scaleX(1); }
  .tcard.in .tc-meter .mrow .mb i { transition: transform .9s var(--ease-out); transform: scaleX(1); }
  .tcard.in .tc-meter .mrow:nth-child(2) .mb i { transition-delay: .1s; }
  .tcard.in .tc-meter .mrow:nth-child(3) .mb i { transition-delay: .2s; }
  .tc-srow, .tc-cal span { opacity: 0; }
  .tcard.in .tc-srow, .tcard.in .tc-cal span { transition: opacity .5s var(--ease-out); opacity: 1; }
  .tcard.in .tc-srow:nth-child(2) { transition-delay: .08s; }
  .tcard.in .tc-srow:nth-child(3) { transition-delay: .16s; }
  .tcard.in .tc-srow:nth-child(4) { transition-delay: .24s; }
  .tc-pill .d, .tc-srow.live .ic::after { animation: wsaPulse 2.4s ease-in-out infinite; }
}
html.reveal-all .tc-spk-line { stroke-dashoffset: 0 !important; }
html.reveal-all .tc-spk-dot, html.reveal-all .tc-spk-pt, html.reveal-all .tc-srow, html.reveal-all .tc-cal span { opacity: 1 !important; }
html.reveal-all .tc-bar i, html.reveal-all .tc-meter .mrow .mb i { transform: scaleX(1) !important; }

/* ═══════════════════════════════════════════════════════════════════════
   HIGH-TECH UPGRADE — panel ambiance, per-slide scan, glowing data
   (purely decorative; layered behind/over content, reduced-motion safe)
   ═══════════════════════════════════════════════════════════════════════ */
.wsa-panel-body { position: relative; }
.wsa-panel-body > * { position: relative; z-index: 1; }
/* faint drifting tech grid + soft accent glow rising from the top of each panel */
.wsa-panel-body::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(92% 64% at 50% -8%, color-mix(in srgb, var(--accent) 11%, transparent), transparent 62%),
    linear-gradient(rgba(255,255,255,.022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.022) 1px, transparent 1px);
  background-size: 100% 100%, 24px 24px, 24px 24px;
  background-position: 0 0, 0 0, 0 0;
  -webkit-mask: linear-gradient(180deg, #000, transparent 90%);
          mask: linear-gradient(180deg, #000, transparent 90%);
}
/* glowing leading dot + neon chart line */
.wsa-line-path { filter: drop-shadow(0 0 3px color-mix(in srgb, var(--accent) 55%, transparent)); }
.wsa-line-dot { filter: drop-shadow(0 0 5px var(--accent)); }
/* glowing progress segments at the panel top */
.wsa-track i b { box-shadow: 0 0 6px color-mix(in srgb, var(--accent) 55%, transparent); }
/* the active milestone node gets a glow ring */
.wsa-step.active .sd { box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 16%, transparent); }

@media (prefers-reduced-motion: no-preference) {
  .wsa-panel-body::before { animation: wsaGridDrift 32s linear infinite; }
  @keyframes wsaGridDrift { to { background-position: 0 0, 24px 24px, 24px 24px; } }

  /* a glowing accent scan-line on slide change was removed per request — slide changes
     now rely on the calm content crossfade + per-element reveals only. */
  .wsa-prev { position: relative; }

  /* live indicators get a soft expanding glow ring (on top of the existing opacity breathe) */
  .wsa-chrome-tag::before, .wsa-badge .dot { animation: wsaPulse 2.4s ease-in-out infinite, wsaLive 2.4s ease-in-out infinite; }
  @keyframes wsaLive { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 55%, transparent); } 55% { box-shadow: 0 0 7px 1px color-mix(in srgb, var(--accent) 60%, transparent); } }

  /* the chart leading dot pulses a glow when its slide is active */
  .wsa-prev.on .wsa-line-dot { animation: wsaDotGlow 2s ease-in-out 1s infinite; }
  @keyframes wsaDotGlow { 0%, 100% { filter: drop-shadow(0 0 3px color-mix(in srgb, var(--accent) 60%, transparent)); } 50% { filter: drop-shadow(0 0 8px var(--accent)); } }
}


/* ═══════════════════════════════════════════════════════════════════════
   v3.2 — PREMIUM TRANSITION & DIVIDER LAYER  (loads last, after wsa.css)
   Softens the three hard background seams the site was missing:
     white → blue   (benefits → forecast)
     blue  → dark   (forecast → grow / protect)
     dark  → white  (compare  → process)
   Plus an animated header light-bar and a reusable divider utility.
   All motion is CSS-only and respects prefers-reduced-motion.
   ═══════════════════════════════════════════════════════════════════════ */

/* --- colour-transition bridges ---------------------------------------- */
.forecast, .growmoney, #process { position: relative; isolation: isolate; }
.forecast > .wrap, .growmoney > .wrap, #process > .wrap { position: relative; z-index: 1; }
.forecast::before, .growmoney::before, #process::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; z-index: 0; pointer-events: none;
}
.forecast::before, .growmoney::before { height: clamp(90px, 11vw, 150px); }
/* dark→white kept short so it never sits under the section's dark heading */
#process::before { height: clamp(60px, 7vw, 104px); }
.forecast::before  { background: linear-gradient(to bottom, #FFFFFF 0%, rgba(255,255,255,0) 100%); }
.growmoney::before { background: linear-gradient(to bottom, #2E5E96 0%, rgba(46,94,150,0) 100%); }
#process::before   { background: linear-gradient(to bottom, var(--ink) 0%, rgba(8,8,10,0) 100%); }
/* a faint hairline glint sitting exactly on the dark→white seam */
#process::after {
  content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: min(1200px, 88%); height: 1px; z-index: 1; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.45), transparent);
}

/* --- animated top light-bar (scrolled header underline) --------------- */
.site-header.scrolled { border-bottom-color: transparent; }
.site-header.scrolled::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(10,10,11,.09), rgba(10,10,11,.09)),
    linear-gradient(90deg, transparent 0%, var(--accent) 50%, transparent 100%);
  background-size: 100% 100%, 34% 100%; background-repeat: no-repeat;
  background-position: 0 0, -45% 0;
}
@media (prefers-reduced-motion: no-preference) {
  .site-header.scrolled::after { animation: hdrSheen 6.5s cubic-bezier(.22,1,.36,1) infinite; }
}
@keyframes hdrSheen { 0% { background-position: 0 0, -45% 0; } 55%, 100% { background-position: 0 0, 145% 0; } }

/* --- reusable premium divider utility --------------------------------- */
.premium-divider-line { position: relative; height: 1px; width: 100%; max-width: 1040px; margin: 0 auto; overflow: hidden; background: rgba(10,10,11,.09); }
.premium-divider-line.on-dark, .section.dark .premium-divider-line { background: rgba(255,255,255,.12); }
.premium-divider-line::after { content: ""; position: absolute; top: 0; left: 0; height: 100%; width: 32%; background: linear-gradient(90deg, transparent, var(--accent), transparent); }
@media (prefers-reduced-motion: no-preference) { .premium-divider-line::after { animation: dividerTravel 5.5s cubic-bezier(.22,1,.36,1) infinite; } }
@keyframes dividerTravel { 0% { transform: translateX(-130%); } 55%, 100% { transform: translateX(430%); } }

/* --- card hover: subtle premium lift + accent-tinted glow ------------- */
@media (hover: hover) {
  .step-card, .section:has(.cards-3) .feat { transition: transform .3s cubic-bezier(.22,1,.36,1), box-shadow .3s, border-color .3s; }
  .step-card:hover, .section:has(.cards-3) .feat:hover { transform: translateY(-4px); box-shadow: 0 18px 44px rgba(10,10,11,.10); border-color: color-mix(in srgb, var(--accent) 26%, #ECECE9); }
}

/* --- reduced-motion: hard-stop the new ambient loops ------------------ */
@media (prefers-reduced-motion: reduce) {
  .site-header.scrolled::after, .premium-divider-line::after { animation: none !important; }
}


/* ═══════════════════════════════════════════════════════════════════════
   v3.3 — SHAPE & DENSITY PASS
   · review tiles → true squares, fewer/tighter
   · header → guaranteed single row (collapse to drawer earlier)
   · trust section below hero → condensed vertically + horizontally
   · drawer → more premium
   ═══════════════════════════════════════════════════════════════════════ */

/* --- reviews: TRUE SQUARES, less room ---------------------------------- */
.reviews .wrap { max-width: 1160px; }
.reviews .revx { gap: 14px; }
.reviews .rev-rail { gap: 20px !important; padding: 8px 4px 20px !important; }
.reviews .rev-tile {
  flex: 0 0 clamp(290px, 31%, 350px) !important; max-width: none !important;
  aspect-ratio: 1 / 1 !important; min-height: 0 !important; height: auto !important;
  padding: 38px 34px !important; justify-content: center; gap: 16px;
}
.reviews .rev-tile .rt-q {
  font-size: 16.5px !important; line-height: 1.5 !important; text-wrap: pretty;
  display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden;
}
.reviews .rev-tile .rt-stars { font-size: 15px !important; margin-bottom: 2px; }
.reviews .rev-tile .rt-who { font-size: 11px !important; }
@media (max-width: 900px) { .reviews .rev-tile { flex: 0 0 clamp(260px, 58%, 320px) !important; } }
@media (max-width: 640px) { .reviews .rev-tile { flex: 0 0 84% !important; } }

/* --- header: never wrap to two lines ----------------------------------- */
.site-header { flex-wrap: nowrap !important; }
.site-header .brand { min-width: 0; }
.site-header .brand .bn, .site-header .brand .bs, .site-header .brand .bx { white-space: nowrap; }
.nav-links { flex-wrap: nowrap; white-space: nowrap; }
.header-right { flex-wrap: nowrap; }
/* collapse the desktop nav into the drawer a touch earlier so long brand
   names (Conventional / Valley West Insurance) never crowd the row */
@media (max-width: 1120px) {
  .nav-links, .header-phone, .header-right .login { display: none; }
  .hamburger { display: grid; }
  .header-right { gap: 12px; }
}

/* --- hamburger + drawer: more premium ---------------------------------- */
.hamburger { border-radius: 13px; }
.site-header.scrolled .hamburger { box-shadow: var(--sh-1); }
.drawer { background: linear-gradient(180deg, var(--ink-1) 0%, var(--ink) 60%); box-shadow: -32px 0 80px rgba(0,0,0,.5); padding: 26px 26px 30px; }
.drawer-top { padding-bottom: 20px; margin-bottom: 22px; border-bottom: 1px solid var(--ink-3); }
.drawer-lbl { margin-top: 6px; }
.drawer-link { padding: 16px 2px; font-size: 17px; }
.drawer-link:hover { padding-left: 10px; }
.drawer .btn { margin-top: 24px; padding: 16px; font-size: 15px; border-radius: var(--r-pill); }

/* --- trust section below hero: condensed ------------------------------- */
.trustcycle { padding: clamp(40px, 4.6vw, 62px) 0; }
.tcyc-stage { min-height: 196px; padding: 0 24px; max-width: 1000px; }
.tcyc-slide { gap: 24px; }
.tcyc-head { gap: 10px; }
.tcyc-kicker { white-space: nowrap; }
.tcyc-title { font-size: clamp(27px, 3.3vw, 44px); }
.tcyc-stats { gap: clamp(24px, 3.2vw, 54px); }
.tcyc-stat { min-width: 104px; }
.tcyc-stat .n { font-size: clamp(36px, 3.9vw, 52px); }
.tcyc-stat .l { margin-top: 9px; font-size: 12.5px; }
.tcyc-logos { gap: clamp(22px, 3.2vw, 46px); }
.ps-logo { font-size: clamp(18px, 1.9vw, 24px); }
.tcyc-dots { margin-top: 28px; }
.tcyc-disc { margin-top: 13px; }
@media (max-width: 600px) { .tcyc-stage { min-height: 300px; } .tcyc-slide { gap: 22px; } }


/* ═══════════════════════════════════════════════════════════════════════
   v3.4 — LOADING SCREEN · TIMED POPUP · 404
   Per-site accent flips red↔green automatically via [data-brand].
   All motion respects prefers-reduced-motion.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── loading screen ── */
#vw-loader { position: fixed; inset: 0; z-index: 9999; display: grid; place-items: center;
  background: #FFFFFF; transition: opacity .5s var(--ease-out), visibility .5s; }
#vw-loader .vwl-inner { display: flex; flex-direction: column; align-items: center; gap: 30px; padding: 24px; }
#vw-loader .vwl-illo { width: clamp(220px, 44vw, 300px); height: auto; display: block; }
#vw-loader .vwl-bar { width: clamp(260px, 60vw, 400px); height: 4px; border-radius: 4px; background: #ECECEC; overflow: hidden; position: relative; }
#vw-loader .vwl-bar i { position: absolute; top: 0; bottom: 0; left: -42%; width: 42%; border-radius: 4px; background: var(--accent); }
#vw-loader .vwl-txt { font-family: var(--sans); font-size: 19px; font-weight: 700; letter-spacing: 0; text-transform: none; color: var(--t-hi); }
@media (prefers-reduced-motion: no-preference) {
  #vw-loader .vwl-bar i { animation: vwlBar 1.5s var(--ease-in-out, ease-in-out) infinite; }
}
@keyframes vwlBar { 0% { left: -42%; } 100% { left: 100%; } }
body.vwl-done #vw-loader { opacity: 0; visibility: hidden; pointer-events: none; }

/* ── timed popup ── */
.vwm-overlay { position: fixed; inset: 0; z-index: 9990; display: flex; align-items: center; justify-content: center; padding: 24px;
  background: rgba(8,8,10,.62); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  opacity: 0; visibility: hidden; transition: opacity .35s var(--ease-out), visibility .35s; }
.vwm-overlay.open { opacity: 1; visibility: visible; }
.vwm-card { position: relative; width: min(860px, 100%); max-height: calc(100vh - 48px); overflow: hidden;
  display: grid; grid-template-columns: 0.92fr 1.08fr; background: #fff; color: var(--t-hi);
  border-radius: 26px; box-shadow: 0 40px 120px rgba(0,0,0,.5);
  transform: translateY(14px) scale(.985); opacity: .5; transition: transform .42s cubic-bezier(.22,1,.36,1), opacity .42s; }
.vwm-overlay.open .vwm-card { transform: none; opacity: 1; }
.vwm-visual { position: relative; background: linear-gradient(165deg, var(--ink-1), var(--ink)); display: grid; place-items: center; padding: 40px 30px; overflow: hidden; }
.vwm-visual::before { content: ""; position: absolute; width: 300px; height: 300px; border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--accent) 42%, transparent), transparent 70%); filter: blur(22px); opacity: .65; }
.vwm-chip { position: relative; width: 100%; max-width: 250px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14);
  border-radius: 18px; padding: 22px; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.vwm-chip-row { display: flex; align-items: center; gap: 8px; }
.vwm-chip-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 22%, transparent); }
.vwm-chip-lbl { font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.6); }
.vwm-chip-big { font-family: var(--sans); font-weight: 700; font-size: 44px; color: #fff; letter-spacing: -.02em; margin: 16px 0 18px; line-height: 1; }
.vwm-chip-big span { font-size: 15px; font-weight: 600; color: rgba(255,255,255,.6); margin-left: 8px; }
.vwm-chip-bars { display: flex; flex-direction: column; gap: 9px; }
.vwm-chip-bars i { height: 7px; border-radius: 4px; background: rgba(255,255,255,.16); width: var(--w); }
.vwm-chip-bars i:first-child { background: var(--accent); }
.vwm-chip-foot { margin-top: 16px; font-size: 10.5px; color: rgba(255,255,255,.45); }
.vwm-body { padding: 46px 44px; display: flex; flex-direction: column; justify-content: center; }
.vwm-eyebrow { font-family: var(--mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--accent); margin-bottom: 14px; }
.vwm-title { font-family: var(--serif); font-weight: 300; font-size: clamp(26px, 3vw, 36px); line-height: 1.08; letter-spacing: -.02em; margin: 0 0 14px; color: var(--t-hi); }
.vwm-title em { font-style: italic; color: var(--accent); }
.vwm-sub { font-size: 15px; line-height: 1.6; color: var(--t-mid); margin: 0 0 26px; max-width: 42ch; }
.vwm-cta { display: inline-flex; align-items: center; justify-content: center; gap: 9px; align-self: flex-start; white-space: nowrap;
  background: var(--ink); color: #fff; font-family: var(--sans); font-weight: 600; font-size: 15px; padding: 15px 28px; border-radius: var(--r-pill);
  transition: background .22s var(--ease-snap), transform .22s; }
.vwm-cta svg { width: 17px; height: 17px; }
.vwm-cta:hover { background: var(--accent); transform: translateY(-2px); }
.vwm-dismiss { align-self: flex-start; white-space: nowrap; margin-top: 14px; background: none; border: none; color: var(--t-lo); font-size: 13px; font-family: var(--sans); cursor: pointer; padding: 4px 0; }
.vwm-dismiss:hover { color: var(--t-mid); }
.vwm-close { position: absolute; top: 16px; right: 16px; z-index: 3; width: 40px; height: 40px; border-radius: 50%; border: none;
  background: var(--ink); color: #fff; cursor: pointer; display: grid; place-items: center; box-shadow: var(--sh-2); transition: background .2s, transform .25s var(--ease-snap); }
.vwm-close:hover { background: var(--accent); transform: rotate(90deg); }
.vwm-close svg { width: 18px; height: 18px; }
@media (max-width: 680px) {
  .vwm-card { grid-template-columns: 1fr; max-width: 430px; }
  .vwm-visual { display: none; }
  .vwm-body { padding: 44px 28px 30px; }
  .vwm-close { background: var(--paper-3); color: var(--ink); box-shadow: none; }
}
@media (prefers-reduced-motion: reduce) {
  .vwm-card { transition: opacity .2s; transform: none; }
  #vw-loader .vwl-txt::after { content: ""; }
}

/* ── custom 404 ── */
.nf-wrap { min-height: 100vh; display: grid; place-items: center; text-align: center; padding: 130px 24px 90px; position: relative; background: var(--ink); color: var(--t-hi-d); overflow: hidden; }
.nf-wrap::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(60% 48% at 50% 0%, color-mix(in srgb, var(--accent) 15%, transparent), transparent 62%); }
.nf-inner { position: relative; max-width: 600px; }
.nf-mark { width: 46px; height: 46px; color: var(--accent); margin: 0 auto 26px; }
.nf-code { font-family: var(--mono); font-size: 12px; letter-spacing: .22em; text-transform: uppercase; color: var(--accent); }
.nf-h { font-family: var(--serif); font-weight: 300; font-size: clamp(32px, 5vw, 54px); line-height: 1.06; letter-spacing: -.02em; margin: 16px 0 16px; color: #fff; }
.nf-h em { font-style: italic; color: var(--accent); }
.nf-sub { font-size: 16px; line-height: 1.6; color: var(--t-mid-d); max-width: 46ch; margin: 0 auto 32px; text-wrap: pretty; }
.nf-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.nf-links { margin-top: 36px; padding-top: 26px; border-top: 1px solid var(--ink-4); display: flex; gap: 8px 26px; justify-content: center; flex-wrap: wrap;
  font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
.nf-links a { color: var(--t-lo-d); transition: color .2s; } .nf-links a:hover { color: #fff; }
.nf-brand { position: absolute; top: 28px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 10px; color: #fff; }
.nf-brand .mark { width: 30px; height: 30px; color: var(--accent); }
.nf-brand .bn { font-family: var(--serif); font-style: italic; font-size: 18px; white-space: nowrap; }
@media (max-width: 480px) { .nf-actions .btn { width: 100%; } }


/* ═══════════════════════════════════════════════════════════════════════
   v3.4 — SQUARE REVIEWS · SINGLE-ROW HEADER · DRAWER POLISH
   ═══════════════════════════════════════════════════════════════════════ */

/* Reviews: true squares on every device · exactly 4 cards · less room */
.reviews .wrap { max-width: 1200px; }
.reviews .revx { gap: 14px; }
.reviews .rev-rail { gap: 24px; }
.reviews .rev-rail .rev-tile:nth-child(n+4) { display: none; }
.reviews .rev-tile {
  flex: 0 0 clamp(266px, 30vw, 348px) !important;
  width: clamp(266px, 30vw, 348px) !important;
  max-width: none !important;
  aspect-ratio: 1 / 1 !important;
  min-height: 0 !important;
  height: auto !important;
  padding: clamp(26px, 2.2vw, 36px) !important;
  justify-content: space-between;
}
.reviews .rev-tile .rt-q { font-size: clamp(15px, 1.12vw, 18px) !important; line-height: 1.46 !important; }
.reviews .rev-tile .rt-stars { font-size: 16px !important; }
.reviews .rev-tile .rt-who { font-size: 11px !important; }
@media (max-width: 760px) {
  .reviews .rev-tile { flex-basis: min(80vw, 350px) !important; width: min(80vw, 350px) !important; }
  .reviews .rev-arrow { display: grid; }
}

/* Header: hard guarantee of a single row — content never wraps to two lines */
.site-header { flex-wrap: nowrap; }
.site-header .brand { min-width: 0; }
.site-header .brand .bt { min-width: 0; }
@media (max-width: 1160px) {
  .nav-links, .header-phone, .header-right .login { display: none; }
  .hamburger { display: grid; }
  .header-right { gap: 12px; }
}

/* Drawer: graceful staggered reveal of links on open (reduced-motion safe) */
@media (prefers-reduced-motion: no-preference) {
  .drawer .drawer-link, .drawer .btn-glass, .drawer .drawer-foot { opacity: 0; transform: translateX(16px); }
  .drawer.open .drawer-link, .drawer.open .btn-glass, .drawer.open .drawer-foot {
    opacity: 1; transform: none;
    transition: opacity .4s var(--ease-out), transform .45s cubic-bezier(.22,1,.36,1);
  }
  .drawer.open .drawer-link:nth-of-type(1) { transition-delay: .10s; }
  .drawer.open .drawer-link:nth-of-type(2) { transition-delay: .15s; }
  .drawer.open .drawer-link:nth-of-type(3) { transition-delay: .20s; }
  .drawer.open .drawer-link:nth-of-type(4) { transition-delay: .25s; }
  .drawer.open .drawer-link:nth-of-type(5) { transition-delay: .30s; }
  .drawer.open .btn-glass { transition-delay: .36s; }
  .drawer.open .drawer-foot { transition-delay: .42s; }
}

/* ═══════════════════════════════════════════════════════════════════════
   v3.5b — SECTION REORG BRIDGES (opaque two-color fades — smooth, not back-loaded)
   Flow: growmoney(dark) → process(white) → wsa(dark) → whyus(soft) →
         track(dark) → compare(dark) → reviews(white)
   ═══════════════════════════════════════════════════════════════════════ */
/* white→dark gradient strip element (process → what-sets-us-apart) */
.xbridge { display: block; width: 100%; border: 0; margin: 0; pointer-events: none; }
.xbridge.l2d { height: clamp(60px, 7.5vw, 100px); background: linear-gradient(to bottom, var(--paper) 0%, var(--ink) 100%); }
.xbridge.d2l { height: clamp(60px, 7.5vw, 100px); background: linear-gradient(to bottom, var(--ink) 0%, var(--paper) 100%); }

/* dark→soft fade at top of WHY VALLEY WEST (follows the dark WSA) */
.whyus { position: relative; }
.whyus > .wrap { position: relative; z-index: 1; }
.whyus::before { content:""; position:absolute; left:0; right:0; top:0; height:clamp(80px,9vw,130px); z-index:0; pointer-events:none;
  background: linear-gradient(to bottom, var(--ink) 0%, var(--accent-soft, var(--m-soft)) 100%); }

/* soft→dark fade at top of the TRACK / PROTECT section (follows whyus) */
.whyus + .section.dark { position: relative; }
.whyus + .section.dark > .wrap { position: relative; z-index: 1; }
.whyus + .section.dark::before { content:""; position:absolute; left:0; right:0; top:0; height:clamp(80px,9vw,130px); z-index:0; pointer-events:none;
  background: linear-gradient(to bottom, var(--accent-soft, var(--m-soft)) 0%, var(--ink) 100%); }

/* dark→white fade at top of REVIEWS (follows the dark COMPARE) */
.reviews { position: relative; }
.reviews > .wrap { position: relative; z-index: 1; }
.reviews::before { content:""; position:absolute; left:0; right:0; top:0; height:clamp(80px,9vw,130px); z-index:0; pointer-events:none;
  background: linear-gradient(to bottom, var(--ink) 0%, var(--paper) 100%); }


/* ═══════════════════════════════════════════════════════════════════════
   v3.6 — Origin-grade pass: sparkline fix · lilac WSA · 3/2/1 reviews ·
          white separator · blur cleanup · slower elegant motion ·
          fuller-height sections
   ═══════════════════════════════════════════════════════════════════════ */

/* ── (a) RATE-WATCH SPARKLINE: clip-path reveal that ALWAYS completes ── */
.tc-spk-line { stroke-dasharray: none !important; stroke-dashoffset: 0 !important; }
@media (prefers-reduced-motion: no-preference) {
  .tc-spark svg { clip-path: inset(0 100% 0 0); }
  .tcard.in .tc-spark svg { transition: clip-path 2.1s cubic-bezier(.22,1,.36,1); clip-path: inset(0 0 0 0); }
}
html.reveal-all .tc-spark svg { clip-path: inset(0 0 0 0) !important; }

/* ── (b) REVIEWS: large square cards — exactly 3 desktop / 2 laptop·iPad / 1 mobile ── */
.reviews .wrap { max-width: 1240px; }
.reviews .revx { gap: 16px; }
.reviews .rev-rail { display: flex; gap: 30px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 8px 2px 22px; }
.reviews .rev-rail .rev-tile {
  flex: 0 0 calc((100% - 60px) / 3) !important;
  width: auto !important; max-width: none !important;
  aspect-ratio: 1 / 1 !important; min-height: 0 !important; height: auto !important;
  scroll-snap-align: center; padding: clamp(30px, 2.6vw, 44px) !important;
}
.reviews .rev-rail .rev-tile:nth-child(n+4) { display: none; }
.reviews .rev-tile .rt-q { font-size: clamp(16px, 1.25vw, 20px) !important; line-height: 1.5 !important; }
.reviews .rev-tile .rt-stars { font-size: 17px !important; }
@media (max-width: 1024px) {
  .reviews .rev-rail .rev-tile { flex-basis: calc((100% - 30px) / 2) !important; }
}
@media (max-width: 640px) {
  .reviews .rev-rail .rev-tile { flex-basis: 100% !important; }
  .reviews .rev-arrow { display: grid; }
}

/* ── (c) WHITE SEPARATOR above "What sets us apart" ── */
.xbridge.l2d { position: relative; }
.xbridge.l2d::after { content: ""; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%);
  width: min(1180px, 86%); height: 1px; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.6), transparent); }
@media (prefers-reduced-motion: no-preference) {
  .xbridge.l2d::after { background: linear-gradient(90deg, transparent, rgba(255,255,255,.6), transparent); background-size: 220% 100%; animation: sepGlow 7s ease-in-out infinite; }
}
@keyframes sepGlow { 0%,100% { background-position: 0% 0; } 50% { background-position: 100% 0; } }

/* ── (d) "WHAT SETS US APART" → Origin Lilac futuristic theme ── */
.section.dark.wsa {
  --accent: #A78BFA; --m: #A78BFA; --accent-hover: #8B6FE8; --accent-glow: rgba(167,139,250,.42);
  --accent-soft: rgba(167,139,250,.12);
  background:
    radial-gradient(130% 100% at 50% -12%, #1B1338 0%, #120D24 46%, #0A0716 100%) !important;
}
.section.dark.wsa::before { background: radial-gradient(48% 60% at 50% 0%, rgba(167,139,250,.20), transparent 72%) !important; }
.section.dark.wsa .eyebrow { color: #C9B6FF !important; }
.section.dark.wsa .h2 em, .section.dark.wsa .h2 .red { color: #B79CFF; }
.section.dark.wsa .wsa-panel, .section.dark.wsa .wsa-card, .section.dark.wsa .wsa-prev {
  border-color: rgba(167,139,250,.20) !important;
}
.section.dark.wsa .wsa-panel { box-shadow: 0 36px 90px rgba(96,60,200,.18), inset 0 1px 0 rgba(255,255,255,.05) !important; }
.section.dark.wsa .vw-table thead th { color: #C9B6FF; }

/* ── (e) BLUR: clean white sections (process/whyus) · richer glass on dark ── */
/* trim the dark haze bleeding into the light sections so they read crisp */
#process::before { height: clamp(30px, 4vw, 56px) !important; }
.whyus::before { height: clamp(30px, 4vw, 56px) !important; }
/* deeper, more dimensional glass on the dark/feature surfaces */
.fc-panel, .pcard .glasswidget, .wsa-panel, .wsa-prev, .gm-card, .tcard, .kyn-card {
  backdrop-filter: blur(26px) saturate(150%); -webkit-backdrop-filter: blur(26px) saturate(150%);
}

/* ── (f) SLOWER, MORE ELEGANT, MORE UNIQUE MOTION ── */
@media (prefers-reduced-motion: no-preference) {
  .reveal { transition-duration: 1.5s, 1.5s !important; transition-timing-function: cubic-bezier(.2,.8,.2,1) !important; }
  .reveal[data-d="1"] { transition-delay: .18s !important; }
  .reveal[data-d="2"] { transition-delay: .36s !important; }
  .reveal[data-d="3"] { transition-delay: .54s !important; }
  .reveal[data-d="4"] { transition-delay: .72s !important; }
}

/* ── (g) FULLER-HEIGHT SECTIONS — present, breathing, centered (Origin pacing) ── */
#first, #estimate, #numbers, .section.forecast, .section.growmoney,
.section.dark.wsa, .whyus, .whyus + .section.dark, .compare-sec, #process, #reviews {
  min-height: 92vh; display: flex; flex-direction: column; justify-content: center;
}
@media (max-width: 760px) {
  #first, #estimate, #numbers, .section.forecast, .section.growmoney,
  .section.dark.wsa, .whyus, .whyus + .section.dark, .compare-sec, #process, #reviews { min-height: 0; }
}


/* ═══════════════════════════════════════════════════════════════════════
   v3.7 — Origin Lilac "video-style" WSA · de-blur white sections ·
          larger Why-Valley-West · 3× reviews
   ═══════════════════════════════════════════════════════════════════════ */

/* ── (a) WHAT SETS US APART → Origin Lilac high-tech video style ── */
.section.dark.wsa .wsa-card { background: transparent !important; border: none !important; box-shadow: none !important; padding: 0 !important; }
.section.dark.wsa .wsa-head { margin: 0 0 18px; padding: 0 4px; }
.section.dark.wsa .wsa-kicker { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: clamp(21px, 1.9vw, 30px); color: #EDE7FF; letter-spacing: -.01em; }
.section.dark.wsa .wsa-badge { background: rgba(167,139,250,.12) !important; border-color: rgba(167,139,250,.28) !important; color: #C9B6FF !important; }
.section.dark.wsa .wsa-badge .dot, .section.dark.wsa .wsa-badge i.dot { background: #A78BFA !important; }

/* the panel becomes a floating glass card sitting in a breathing lilac bloom */
.section.dark.wsa .wsa-panel {
  border-radius: 26px !important;
  border: 1px solid rgba(167,139,250,.22) !important;
  background:
    radial-gradient(125% 95% at 50% 118%, rgba(168,138,255,.40) 0%, rgba(126,96,235,.18) 30%, rgba(22,16,44,.7) 60%, #0C0918 100%) !important;
  box-shadow: 0 40px 110px rgba(96,60,210,.30), inset 0 1px 0 rgba(255,255,255,.06) !important;
  overflow: hidden;
}
/* the breathing bloom */
.section.dark.wsa .wsa-panel::after {
  content: ""; position: absolute; left: 50%; bottom: -14%; width: 130%; height: 78%;
  transform: translateX(-50%); border-radius: 50%; pointer-events: none; z-index: 0;
  background: radial-gradient(closest-side, rgba(176,146,255,.5), rgba(150,120,250,.18) 55%, transparent 78%);
  filter: blur(34px);
}
@media (prefers-reduced-motion: no-preference) {
  .section.dark.wsa .wsa-panel::after { animation: wsaBloom 8.5s ease-in-out infinite; }
}
@keyframes wsaBloom {
  0%, 100% { opacity: .55; transform: translateX(-50%) scale(1); }
  50%      { opacity: 1;   transform: translateX(-50%) scale(1.14); }
}
/* lift content above the bloom */
.section.dark.wsa .wsa-chrome, .section.dark.wsa .wsa-track, .section.dark.wsa .wsa-panel-body { position: relative; z-index: 1; }
/* quiet the "browser window" chrome so it reads as floating product UI */
.section.dark.wsa .wsa-chrome { background: transparent !important; border-bottom: 1px solid rgba(167,139,250,.12) !important; }
.section.dark.wsa .wsa-dots i { background: rgba(199,182,255,.35) !important; }
.section.dark.wsa .wsa-track i b { background: #B79CFF !important; }
/* pure cross-dissolve (kill the slide/scale translate — "video" feel) */
.section.dark.wsa .wsa-prev { transform: none !important; transition: opacity 1.1s cubic-bezier(.22,1,.36,1), filter .9s cubic-bezier(.22,1,.36,1) !important; }
.section.dark.wsa .wsa-prev.on { transform: none !important; }
.section.dark.wsa .wsa-prev:not(.on) { transform: none !important; }
/* lilac accents on inner UI */
.section.dark.wsa .wsa-micro { color: #C9B6FF !important; }

/* ── (b) DE-BLUR the white sections (How it works · Why Valley West) ── */
#process::before { display: none !important; }
.whyus::before { display: none !important; }
/* clean, crisp thin separators in place of the haze */
#process { border-top: 1px solid rgba(10,10,11,.08); }
.whyus { border-top: 1px solid rgba(10,10,11,.06); }

/* ── (c) WHY VALLEY WEST — scale content up to match the larger section ── */
.whyus-grid { gap: clamp(48px, 6vw, 92px) !important; align-items: center; }
.whyus .eyebrow { font-size: 12px; }
.whyus .h2 { font-size: clamp(34px, 4.4vw, 60px) !important; line-height: 1.05; }
.whyus .lede { font-size: clamp(17px, 1.35vw, 21px) !important; line-height: 1.6; margin-top: 22px; }
.whyus-points { gap: 22px !important; margin-top: 30px; }
.whyus-points li { font-size: clamp(15px, 1.15vw, 17.5px); }
.whyus-points li svg, .whyus-points li .ico { transform: scale(1.1); }

/* ── (d) REVIEWS 3× larger — 3 desktop / 2 laptop·iPad / 1 mobile ── */
.reviews .wrap { max-width: min(1680px, 94vw) !important; }
.reviews .rev-rail { gap: 36px; }
.reviews .rev-rail .rev-tile {
  flex: 0 0 calc((100% - 72px) / 3) !important;
  padding: clamp(38px, 3vw, 56px) !important;
}
.reviews .rev-tile .rt-q { font-size: clamp(19px, 1.5vw, 26px) !important; line-height: 1.46 !important; }
.reviews .rev-tile .rt-stars { font-size: 20px !important; letter-spacing: 6px; }
.reviews .rev-tile .rt-who { font-size: 12.5px !important; }
@media (max-width: 1024px) { .reviews .rev-rail .rev-tile { flex-basis: calc((100% - 36px) / 2) !important; } }
@media (max-width: 640px) { .reviews .rev-rail .rev-tile { flex-basis: 100% !important; } }

/* v3.7a — reviews: exactly 3 cards, wrap cleanly, never a partial peek */
.reviews .rev-rail { overflow: visible !important; flex-wrap: wrap; justify-content: center; scroll-snap-type: none !important; -webkit-mask-image: none !important; mask-image: none !important; }
.reviews .rev-arrow { display: none !important; }


/* ═══════════════════════════════════════════════════════════════════════
   v3.8 — WSA fully rebuilt: clean, spacious Origin insight/recap cards ·
          flower-section white text + rotating headline
   ═══════════════════════════════════════════════════════════════════════ */

/* roomy floating panel — one focal element per state, lots of breathing space */
.section.dark.wsa .wsa-panel-body { min-height: 384px; justify-content: center; gap: 24px; padding: clamp(26px, 2.6vw, 40px); }
.section.dark.wsa .wsa-stack { align-content: center; }
.section.dark.wsa .wsa-micro { margin-top: 6px; }

/* insight card (left) */
.section.dark.wsa .wi { gap: 20px; }
.section.dark.wsa .wi-spark { width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 13px; background: rgba(167,139,250,.16); border: 1px solid rgba(167,139,250,.26); color: #C9B6FF; flex: none; }
.section.dark.wsa .wi-spark svg { width: 19px; height: 19px; }
.section.dark.wsa .wi-h { font-family: var(--serif); font-weight: 400; font-size: clamp(23px, 2.05vw, 32px); color: #fff; line-height: 1.16; letter-spacing: -.012em; }
.section.dark.wsa .wi-p { font-size: clamp(14.5px, 1.1vw, 17px); line-height: 1.66; color: rgba(255,255,255,.72); max-width: 44ch; }

/* recap card (right) */
.section.dark.wsa .wr { gap: 16px; }
.section.dark.wsa .wr-l { font-family: var(--mono); font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase; color: rgba(201,182,255,.65); }
.section.dark.wsa .wr-v { font-family: var(--serif); font-weight: 300; font-size: clamp(48px, 5.6vw, 74px); color: #fff; line-height: .98; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.section.dark.wsa .wr-s { font-size: clamp(14px,1.05vw,16px); color: rgba(255,255,255,.66); }
.section.dark.wsa .wr-bar { height: 8px; border-radius: 8px; background: rgba(255,255,255,.1); overflow: hidden; max-width: 300px; }
.section.dark.wsa .wr-bar i { display: block; height: 100%; width: var(--w,60%); border-radius: 8px; background: linear-gradient(90deg, #7E60EB, #C9B6FF); }
@media (prefers-reduced-motion: no-preference) {
  .section.dark.wsa .wr-bar i { transform: scaleX(0); transform-origin: left; }
  .section.dark.wsa .wsa-prev.on .wr-bar i { transition: transform 1.1s cubic-bezier(.22,1,.36,1) .3s; transform: scaleX(1); }
}

/* ── FLOWER (final CTA) — all white text + rotating headline like the hero ── */
.final .footer-rot { font-family: var(--serif); font-weight: 300; font-size: clamp(40px, 6.6vw, 84px); line-height: 1.04; letter-spacing: -.02em; color: #fff; margin: 0; min-height: 0; }
.final .footer-rot .fr-lead { color: #fff; }
.final .footer-rot .fr-word { display: inline-block; font-style: italic; color: #fff; transition: opacity .5s var(--ease-out), transform .5s var(--ease-out); will-change: opacity, transform; }
.final .footer-rot .fr-word.out { opacity: 0; transform: translateY(-8px); }
.final .lede { color: rgba(255,255,255,.92) !important; }
.final .eyebrow { color: #fff !important; }
.final .final-note, .final small, .final .disc { color: rgba(255,255,255,.8) !important; }

/* ═══════════════════════════════════════════════════════════════════════
   v3.9 — Align every section's container to the reviews card width so all
          sections share identical left/right edges. Reviews uses
          .wrap { max-width: min(1680px, 94vw) }; match it everywhere.
   ═══════════════════════════════════════════════════════════════════════ */
.wrap { max-width: min(1680px, 94vw); width: 100%; }
/* #numbers had its own 1180px cap (higher specificity) — match the rest */
#numbers .wrap { max-width: min(1680px, 94vw); }
/* keep the FAQ's deliberately narrow, centered reading column */
.wrap.wrap-narrow { max-width: 920px; }