/* ═══════════════════════════════════════════════════════════════════════
   wsa2.css — loads LAST.
   1) Cleaner seam above "What sets us apart"
   2) "What sets us apart" → two SQUARE cards, each a continuously looping
      product-demo "video" (no slideshow, pure CSS motion, reduced-motion safe)
   3) "Everything you protect" → four high-fidelity glass cards
   ═══════════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────────────
   (1) SEAM FIX — the old white→ink bridge + glowing hairline clashed with
   the lilac WSA. Fade the white #process section straight into the WSA's
   own upper tone, with a single calm lilac hairline.
   ───────────────────────────────────────────────────────────────────── */
.xbridge.l2d {
  height: clamp(64px, 8vw, 110px);
  background: linear-gradient(to bottom, var(--paper) 0%, #F2F2F4 22%, #34343A 78%, #202024 100%);
}
.xbridge.l2d::after {
  content: ""; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%);
  width: min(1040px, 84%); height: 1px; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent);
  animation: none !important;
}
/* drop the WSA section's own top radial seam so the bridge does the work */
.section.dark.wsa { background: #202024 !important; }
.section.dark.wsa::before {
  background: radial-gradient(60% 70% at 50% -6%, rgba(255,255,255,.22), transparent 70%) !important;
  height: 64% !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   (2) WHAT SETS US APART — square cards w/ looping product-video screens
   ═══════════════════════════════════════════════════════════════════════ */
.nw-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 30px; align-items: stretch;
  margin-top: 8px;
}
@media (max-width: 1000px) { .nw-grid { grid-template-columns: 1fr; max-width: 560px; margin: 8px auto 0; } }

.nw-card {
  position: relative; display: flex; flex-direction: column;
  border-radius: 28px; padding: 26px 26px 30px;
  background: linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.018));
  border: 1px solid rgba(255,255,255,.20);
  box-shadow: 0 30px 70px rgba(40,20,90,.34), inset 0 1px 0 rgba(255,255,255,.07);
  overflow: hidden;
}
/* soft lilac bloom behind each card */
.nw-card::before {
  content: ""; position: absolute; left: 50%; top: -30%; width: 120%; height: 70%;
  transform: translateX(-50%); border-radius: 50%; z-index: 0; pointer-events: none;
  background: radial-gradient(closest-side, rgba(255,255,255,.18), transparent 72%);
}
.nw-card > * { position: relative; z-index: 1; }
@media (max-width: 540px) { .nw-card { padding: 20px 18px 24px; } }

.nw-card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.nw-kicker {
  font-family: var(--serif); font-style: italic; font-weight: 400;
  font-size: clamp(19px, 1.8vw, 26px); letter-spacing: -.01em; color: #FFFFFF; line-height: 1.1;
}
.nw-badge {
  flex: none; display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--sans); font-size: 11px; font-weight: 600; letter-spacing: .01em;
  color: #FFFFFF; background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.30); padding: 6px 12px; border-radius: var(--r-pill);
}
.nw-badge i { width: 6px; height: 6px; border-radius: 50%; background: #D8D8DE; flex: none; }

/* ── the looping "screen" (a floating product UI) ── */
.nw-screen {
  --acc: #D8D8DE; --acc-2: #FFFFFF;
  --cyc: 11s;
  position: relative; border-radius: 20px; overflow: hidden;
  background:
    radial-gradient(120% 90% at 50% -10%, rgba(255,255,255,.14), transparent 60%),
    linear-gradient(180deg, #202024, #171719);
  border: 1px solid rgba(255,255,255,.16);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 18px 40px rgba(0,0,0,.34);
  padding: 16px; min-height: 322px;
  display: flex; flex-direction: column;
}
/* faint drifting grid behind the UI */
.nw-screen::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .6;
  background-image:
    linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
  background-size: 26px 26px, 26px 26px;
  -webkit-mask: radial-gradient(120% 90% at 50% 0%, #000, transparent 80%);
          mask: radial-gradient(120% 90% at 50% 0%, #000, transparent 80%);
}
.nw-screen > * { position: relative; z-index: 1; }

/* mock app top bar */
.nw-bar { display: flex; align-items: center; gap: 9px; padding: 2px 4px 14px; }
.nw-bar .dots { display: flex; gap: 5px; }
.nw-bar .dots i { width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,.16); }
.nw-bar .ttl { font-family: var(--sans); font-size: 11px; font-weight: 600; letter-spacing: .02em; color: var(--t-mid-d); }
.nw-bar .live {
  margin-left: auto; display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--sans); font-size: 9.5px; font-weight: 600; letter-spacing: .04em; color: var(--acc-2);
  background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.26);
  padding: 3px 9px; border-radius: var(--r-pill);
}
.nw-bar .live b { width: 5px; height: 5px; border-radius: 50%; background: var(--acc); display: block; }

.nw-foot { margin-top: 22px; }
.nw-foot h3 { margin: 0 0 8px; font-size: 21px; font-weight: 700; color: #fff; letter-spacing: -.015em; }
.nw-foot p { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--t-mid-d); }
.nw-link {
  margin-top: 16px; display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--sans); font-size: 14px; font-weight: 600; color: #fff; text-decoration: none;
}
.nw-link svg { width: 17px; height: 17px; transition: transform .25s var(--ease-snap); }
.nw-link:hover svg { transform: translateX(4px); }

/* ── section CTA ── */
.nw-cta { display: flex; flex-direction: column; align-items: center; gap: 14px; margin-top: 48px; }
.nw-cta-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,.14); border: 1px solid rgba(255,255,255,.34);
  transition: background .22s var(--ease-snap), border-color .22s, transform .22s;
}
.nw-cta-btn svg { width: 16px; height: 16px; }
.nw-cta-btn:hover { background: #D8D8DE; border-color: #D8D8DE; transform: translateY(-2px); }
.nw-cta-note { font-family: var(--sans); font-size: 11px; color: var(--t-lo-d); text-align: center; }

/* ───────────── SCENE 1 · BUNDLE BUILDER ───────────── */
.nw-rows { display: flex; flex-direction: column; gap: 10px; }
.nw-prow {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 13px; border-radius: 13px;
  background: rgba(255,255,255,.035); border: 1px solid rgba(255,255,255,.07);
}
.nw-prow .pic {
  flex: none; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center;
  background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.26); color: var(--acc-2);
}
.nw-prow .pic svg { width: 17px; height: 17px; }
.nw-prow .pt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.nw-prow .pn { display: block; font-size: 14px; font-weight: 600; color: #fff; }
.nw-prow .ps { display: block; font-family: var(--sans); font-size: 10.5px; color: var(--t-lo-d); margin-top: 2px; }
.nw-prow .pck {
  flex: none; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center;
  background: var(--acc); color: #202024;
}
.nw-prow .pck svg { width: 13px; height: 13px; }

.nw-save {
  margin-top: 12px; display: flex; align-items: center; gap: 16px;
  padding: 14px 16px; border-radius: 14px;
  background: linear-gradient(120deg, rgba(255,255,255,.16), rgba(255,255,255,.05));
  border: 1px solid rgba(255,255,255,.26);
}
.nw-ring { position: relative; width: 64px; height: 64px; flex: none; }
.nw-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.nw-ring .trk { fill: none; stroke: rgba(255,255,255,.1); stroke-width: 8; }
.nw-ring .seg { fill: none; stroke: var(--acc); stroke-width: 8; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 82; }
.nw-ring .pct {
  position: absolute; inset: 0; display: grid; place-content: center;
  font-family: var(--sans); font-weight: 700; font-size: 16px; color: #fff;
}
.nw-save-meta .sm-l { font-family: var(--sans); font-size: 10px; letter-spacing: .05em; text-transform: uppercase; color: var(--t-lo-d); }
.nw-save-meta .sm-v { font-size: 22px; font-weight: 700; color: #fff; letter-spacing: -.01em; margin-top: 4px; }
.nw-save-meta .sm-v small { font-size: 12px; font-weight: 600; color: var(--acc-2); margin-left: 4px; }

/* ───────────── SCENE 2 · CARRIER COMPARE ───────────── */
.nw-scan { display: flex; align-items: baseline; justify-content: space-between; padding: 0 2px 12px; }
.nw-scan .l { font-family: var(--sans); font-size: 11px; font-weight: 600; color: var(--t-mid-d); }
.nw-scan .r { font-family: var(--sans); font-size: 11px; font-weight: 700; color: var(--acc-2); font-variant-numeric: tabular-nums; }
.nw-bars {
  position: relative; flex: 1; display: flex; align-items: flex-end; justify-content: space-between;
  gap: 10px; padding: 8px 6px 0; min-height: 132px;
}
.nw-bcol { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 8px; height: 100%; justify-content: flex-end; }
.nw-bcol .bk {
  width: 100%; max-width: 30px; height: var(--h2, 52%); border-radius: 6px 6px 3px 3px;
  background: linear-gradient(180deg, rgba(255,255,255,.30), rgba(255,255,255,.13));
  transform-origin: bottom;
}
.nw-bcol:nth-of-type(1) .bk { --h2: 56%; }
.nw-bcol:nth-of-type(2) .bk { --h2: 94%; }
.nw-bcol:nth-of-type(3) .bk { --h2: 48%; }
.nw-bcol:nth-of-type(4) .bk { --h2: 64%; }
.nw-bcol:nth-of-type(5) .bk { --h2: 52%; }
.nw-bcol .bl { font-family: var(--sans); font-size: 9.5px; font-weight: 600; letter-spacing: .03em; color: var(--t-lo-d); }
.nw-bcol.best .bk { background: linear-gradient(180deg, var(--acc-2), var(--acc)); box-shadow: 0 0 16px rgba(255,255,255,.5); }
.nw-bcol.best .bl { color: #fff; }
/* sweeping scan beam */
.nw-beam {
  position: absolute; top: 4px; bottom: 26px; width: 28%; border-radius: 12px; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.16), transparent);
}
.nw-result {
  margin-top: 12px; display: flex; align-items: center; gap: 12px;
  padding: 13px 15px; border-radius: 14px;
  background: linear-gradient(120deg, rgba(255,255,255,.16), rgba(255,255,255,.05));
  border: 1px solid rgba(255,255,255,.26);
}
.nw-result .rck { flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--acc); color: #202024; }
.nw-result .rck svg { width: 16px; height: 16px; }
.nw-result .rt { flex: 1; min-width: 0; }
.nw-result .rt .a { font-size: 13.5px; font-weight: 600; color: #fff; }
.nw-result .rt .b { font-family: var(--sans); font-size: 10.5px; color: var(--t-lo-d); margin-top: 2px; }
.nw-result .rp { flex: none; text-align: right; }
.nw-result .rp .pv { font-size: 20px; font-weight: 700; color: #fff; letter-spacing: -.01em; }
.nw-result .rp .pu { font-family: var(--sans); font-size: 10px; color: var(--t-lo-d); }

/* reduced-motion: present the finished state, no looping */
.nw-screen .nw-prow, .nw-screen .nw-save, .nw-screen .nw-result { opacity: 1; }

@media (prefers-reduced-motion: no-preference) {
  /* SCENE 1 — rows stay put; checks turn on in sequence, row lights up,
     ring fills + savings settle. All share ONE loop boundary (no per-element
     delay) so the reset is a single clean beat — no half-empty frames. */
  .nw-prow { animation: nwAct var(--cyc) ease infinite; }
  .nw-prow:nth-child(1) { animation-name: nwAct1; }
  .nw-prow:nth-child(2) { animation-name: nwAct2; }
  .nw-prow:nth-child(3) { animation-name: nwAct3; }
  .nw-prow .pck { transform: scale(0); }
  .nw-prow:nth-child(1) .pck { animation: nwCk1 var(--cyc) var(--ease-spring) infinite; }
  .nw-prow:nth-child(2) .pck { animation: nwCk2 var(--cyc) var(--ease-spring) infinite; }
  .nw-prow:nth-child(3) .pck { animation: nwCk3 var(--cyc) var(--ease-spring) infinite; }
  @keyframes nwCk1 { 0%,5%{transform:scale(0)} 11%{transform:scale(1.22)} 15%,90%{transform:scale(1)} 95%,100%{transform:scale(0)} }
  @keyframes nwCk2 { 0%,17%{transform:scale(0)} 23%{transform:scale(1.22)} 27%,90%{transform:scale(1)} 95%,100%{transform:scale(0)} }
  @keyframes nwCk3 { 0%,29%{transform:scale(0)} 35%{transform:scale(1.22)} 39%,90%{transform:scale(1)} 95%,100%{transform:scale(0)} }
  /* row tints to accent as its check lands, then relaxes on reset */
  @keyframes nwAct1 {
    0%,7%   { border-color: rgba(255,255,255,.07); background: rgba(255,255,255,.035); }
    14%,90% { border-color: rgba(255,255,255,.34); background: rgba(255,255,255,.09); }
    96%,100%{ border-color: rgba(255,255,255,.07); background: rgba(255,255,255,.035); }
  }
  @keyframes nwAct2 {
    0%,19%  { border-color: rgba(255,255,255,.07); background: rgba(255,255,255,.035); }
    26%,90% { border-color: rgba(255,255,255,.34); background: rgba(255,255,255,.09); }
    96%,100%{ border-color: rgba(255,255,255,.07); background: rgba(255,255,255,.035); }
  }
  @keyframes nwAct3 {
    0%,31%  { border-color: rgba(255,255,255,.07); background: rgba(255,255,255,.035); }
    38%,90% { border-color: rgba(255,255,255,.34); background: rgba(255,255,255,.09); }
    96%,100%{ border-color: rgba(255,255,255,.07); background: rgba(255,255,255,.035); }
  }
  .nw-save { opacity: 1; }
  @keyframes nwSaveIn {
    0%, 40%  { opacity: 0; transform: translateY(8px); }
    50%, 92% { opacity: 1; transform: none; }
    97%,100% { opacity: 0; }
  }
  .nw-ring .seg { animation: nwRing var(--cyc) var(--ease-out) infinite; }
  @keyframes nwRing {
    0%, 20%  { stroke-dashoffset: 100; }
    38%, 94% { stroke-dashoffset: 82; }   /* 18% filled — held most of the loop */
    99%,100% { stroke-dashoffset: 100; }
  }

  /* SCENE 2 — bars breathe / re-rank, beam sweeps, result settles */
  .nw-bcol .bk { animation: nwBar var(--cyc) var(--ease-out) infinite; }
  @keyframes nwBar {
    0%,100% { height: var(--h2); }
    30%     { height: calc(var(--h2) - 12%); }
    62%     { height: calc(var(--h2) + 4%); }
  }
  .nw-beam { animation: nwBeam var(--cyc) cubic-bezier(.5,0,.3,1) infinite; }
  @keyframes nwBeam {
    0%      { left: -30%; opacity: 0; }
    8%      { opacity: 1; }
    52%     { left: 102%; opacity: 1; }
    60%,100%{ left: 102%; opacity: 0; }
  }
  .nw-bcol.best .bk { animation: nwBar var(--cyc) var(--ease-out) infinite, nwBest var(--cyc) ease-in-out infinite; }
  @keyframes nwBest {
    0%,100% { filter: brightness(1); }
    50%     { filter: brightness(1.18); }
  }
  .nw-result { opacity: 0; animation: nwResult var(--cyc) var(--ease-out) infinite; }
  @keyframes nwResult {
    0%, 10%  { opacity: 0; transform: translateY(10px); }
    20%, 94% { opacity: 1; transform: none; }
    99%,100% { opacity: 0; }
  }
}

/* ring % and price are static labels (robust at any animation frame) */
.nw-ring .pct::after { content: "18%"; }
.nw-result .rp .pv::after { content: "$142"; }

/* ═══════════════════════════════════════════════════════════════════════
   (3) EVERYTHING YOU PROTECT — four high-fidelity glass cards
   (insurance green accent · lives in a .section.dark, NOT .wsa)
   ═══════════════════════════════════════════════════════════════════════ */
.protgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
@media (max-width: 1080px) { .protgrid { grid-template-columns: repeat(2, 1fr); max-width: 720px; margin: 0 auto; gap: 20px; } }
@media (max-width: 560px) { .protgrid { grid-template-columns: 1fr; max-width: 380px; } }

.prot {
  position: relative; display: flex; flex-direction: column; overflow: hidden;
  border-radius: 24px; padding: 26px 24px 24px; min-height: 420px;
  background: linear-gradient(180deg, #121216, #0C0C0F);
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 22px 50px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.05);
  transition: transform .4s var(--ease-out), border-color .4s, box-shadow .4s;
}
.prot::before {
  content: ""; position: absolute; left: 50%; top: -28%; width: 130%; height: 60%;
  transform: translateX(-50%); border-radius: 50%; z-index: 0; pointer-events: none;
  background: radial-gradient(closest-side, var(--i-glow), transparent 72%); opacity: .7;
}
.prot > * { position: relative; z-index: 1; }
@media (hover: hover) {
  .prot:hover { transform: translateY(-6px); border-color: rgba(80,180,90,.4);
    box-shadow: 0 28px 60px rgba(0,0,0,.42), 0 0 0 1px rgba(80,180,90,.16); }
}

.prot-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 20px; }
.prot-ic {
  width: 46px; height: 46px; border-radius: 13px; flex: none; display: grid; place-items: center;
  background: rgba(80,180,90,.14); border: 1px solid rgba(80,180,90,.3); color: #6FD17A;
}
.prot-ic svg { width: 23px; height: 23px; }
.prot-pill {
  display: inline-flex; align-items: center; gap: 6px; flex: none;
  font-family: var(--sans); font-size: 9.5px; font-weight: 600; letter-spacing: .02em;
  color: #7BD986; background: rgba(80,180,90,.12);
  border: 1px solid rgba(80,180,90,.28); padding: 5px 10px; border-radius: var(--r-pill);
}
.prot-pill i { width: 5px; height: 5px; border-radius: 50%; background: #50B45A; }
.prot-pill.muted { color: var(--t-mid-d); background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.12); }
.prot-pill.muted i { background: var(--t-lo-d); }

/* the animated viz block */
.prot-viz {
  flex: 1; border-radius: 16px; padding: 18px;
  background: rgba(255,255,255,.025); border: 1px solid rgba(255,255,255,.06);
  display: flex; flex-direction: column; justify-content: center; gap: 14px;
}

.prot-foot { margin-top: 20px; }
.prot-foot h4 { margin: 0 0 7px; font-size: 19px; font-weight: 700; color: #fff; letter-spacing: -.01em; }
.prot-foot p { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--t-mid-d); }

/* — shared viz atoms — */
.pv-stat { text-align: center; }
.pv-stat .v { font-size: 30px; font-weight: 700; color: #fff; letter-spacing: -.02em; line-height: 1; }
.pv-stat .v small { font-size: 14px; color: #6FD17A; font-weight: 600; }
.pv-stat .k { font-family: var(--sans); font-size: 10px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--t-lo-d); margin-top: 8px; }
.pv-row { display: flex; align-items: center; gap: 10px; }
.pv-row .rl { flex: none; width: 78px; font-family: var(--sans); font-size: 11px; color: var(--t-mid-d); }
.pv-row .rb { flex: 1; height: 6px; border-radius: 4px; background: rgba(255,255,255,.1); overflow: hidden; }
.pv-row .rb i { display: block; height: 100%; border-radius: 4px; background: linear-gradient(90deg,#3C9446,#6FD17A); width: var(--w,60%); transform-origin: left; }
.pv-row .rv { flex: none; font-family: var(--sans); font-size: 11px; font-weight: 700; color: #fff; font-variant-numeric: tabular-nums; }
.pv-chips { display: flex; gap: 8px; }
.pv-chip { flex: 1; border-radius: 11px; padding: 11px 10px; text-align: center; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); }
.pv-chip .cv { font-size: 16px; font-weight: 700; color: #fff; }
.pv-chip .ck { font-family: var(--sans); font-size: 9px; letter-spacing: .03em; color: var(--t-lo-d); margin-top: 4px; text-transform: uppercase; }

/* Home — shield gauge */
.pv-shield { position: relative; width: 108px; height: 108px; margin: 0 auto; }
.pv-shield svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.pv-shield .trk { fill: none; stroke: rgba(255,255,255,.08); stroke-width: 9; }
.pv-shield .seg { fill: none; stroke: #50B45A; stroke-width: 9; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 26; }
.pv-shield .ic { position: absolute; inset: 0; display: grid; place-items: center; color: #6FD17A; }
.pv-shield .ic svg { width: 30px; height: 30px; transform: none; }

/* Life — growth area */
.pv-area { position: relative; width: 100%; height: 104px; }
.pv-area svg { width: 100%; height: 100%; display: block; overflow: visible; }
.pv-area .ln { fill: none; stroke: #6FD17A; stroke-width: 2.5; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.pv-area .pt { position: absolute; right: 3%; top: 14%; width: 9px; height: 9px; border-radius: 50%; background: #fff; border: 2.5px solid #50B45A; transform: translate(50%,-50%); box-shadow: 0 0 0 4px rgba(80,180,90,.18); }

/* Umbrella — stacked allocation bar */
.pv-stack { height: 16px; border-radius: 8px; overflow: hidden; display: flex; background: rgba(255,255,255,.06); }
.pv-stack i { height: 100%; }
.pv-stack i:nth-child(1) { background: #50B45A; width: 46%; }
.pv-stack i:nth-child(2) { background: #3C9446; width: 30%; }
.pv-stack i:nth-child(3) { background: #7FD98A; width: 16%; }
.pv-stack i:nth-child(4) { background: rgba(255,255,255,.28); width: 8%; }
.pv-legend { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 14px; }
.pv-legend .lg { display: flex; align-items: center; gap: 7px; font-family: var(--sans); font-size: 11px; color: var(--t-mid-d); }
.pv-legend .lg .sw { width: 9px; height: 9px; border-radius: 3px; flex: none; }
.pv-legend .lg b { margin-left: auto; color: #fff; font-weight: 600; font-variant-numeric: tabular-nums; }

/* motion for the protect vizes (gentle, reduced-motion safe) */
@media (prefers-reduced-motion: no-preference) {
  .prot .pv-row .rb i, .prot .pv-stack i { transform: scaleX(0); }
  .prot.in .pv-row .rb i, .prot.in .pv-stack i { transition: transform 1s var(--ease-out); transform: scaleX(1); }
  .prot.in .pv-row:nth-child(2) .rb i { transition-delay: .1s; }
  .prot.in .pv-row:nth-child(3) .rb i { transition-delay: .2s; }
  .prot.in .pv-stack i:nth-child(2) { transition-delay: .12s; }
  .prot.in .pv-stack i:nth-child(3) { transition-delay: .24s; }
  .prot.in .pv-stack i:nth-child(4) { transition-delay: .36s; }
  .pv-shield .seg, .pv-ring .seg { stroke-dashoffset: 100; }
  .prot.in .pv-shield .seg { transition: stroke-dashoffset 1.4s var(--ease-out) .2s; stroke-dashoffset: 26; }
  .pv-area .ln { stroke-dasharray: 200; stroke-dashoffset: 200; }
  .prot.in .pv-area .ln { transition: stroke-dashoffset 1.7s var(--ease-out); stroke-dashoffset: 0; }
  .pv-area .pt { opacity: 0; }
  .prot.in .pv-area .pt { transition: opacity .3s 1.4s; opacity: 1; }
  .prot-pill i { animation: wsaPulse 2.4s ease-in-out infinite; }
}
html.reveal-all .pv-row .rb i, html.reveal-all .pv-stack i { transform: scaleX(1) !important; }
html.reveal-all .pv-area .ln { stroke-dashoffset: 0 !important; }
html.reveal-all .pv-area .pt { opacity: 1 !important; }

/* ═══════════════════════════════════════════════════════════════════════
   v4 — batch fixes: WSA graphite theme + alignment · protect 2×2 graphite ·
   hero bigger · trust cycle · forecast align · process bigger · FAQ outline ·
   numbers line graph · donut clip fix
   ═══════════════════════════════════════════════════════════════════════ */

/* ── WSA · graphite "moon grey" matte + white theme (override the lilac) ── */
.section.dark.wsa { background: #2B2B30 !important; }
.section.dark.wsa::before { background: radial-gradient(60% 64% at 50% -4%, rgba(255,255,255,.06), transparent 72%) !important; height: 60% !important; }
.section.dark.wsa::after { opacity: .3 !important; }
.section.dark.wsa .eyebrow,
.section.dark.wsa .h2,
.section.dark.wsa .h2 em,
.section.dark.wsa .h2 .red { color: #fff !important; }
.section.dark.wsa .lede { color: rgba(255,255,255,.72) !important; }
.xbridge.l2d { background: linear-gradient(to bottom, var(--paper) 0%, #F2F2F4 20%, #45454B 78%, #2B2B30 100%) !important; }
.xbridge.l2d::after { background: linear-gradient(90deg, transparent, rgba(255,255,255,.42), transparent) !important; }

/* matte cards — flat graphite, no sheen; equal heights so screens + feet align */
.nw-card { background: #34343A !important; border-color: rgba(255,255,255,.10) !important;
  box-shadow: 0 26px 60px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.05) !important; }
.nw-card::before { background: radial-gradient(closest-side, rgba(255,255,255,.05), transparent 72%) !important; }
.nw-screen { background: #1E1E22 !important; border-color: rgba(255,255,255,.08) !important;
  height: auto; min-height: 384px; }
.nw-card-head { min-height: 58px; align-items: flex-start; }
.nw-kicker { color: #fff !important; font-size: clamp(18px, 1.7vw, 23px); }
.nw-save { margin-top: auto; }
.nw-cta-btn { background: rgba(255,255,255,.08) !important; border-color: rgba(255,255,255,.24) !important; }
.nw-cta-btn:hover { background: #fff !important; border-color: #fff !important; color: #1E1E22 !important; }
.nw-cta-btn:hover svg { color: #1E1E22; }
@media (max-width: 1000px) { .nw-screen { min-height: 384px; } }
@media (max-width: 540px) { .nw-screen { min-height: 360px; } }

/* ── EVERYTHING YOU PROTECT · 2×2 large graphite-matte cards ── */
.protgrid { grid-template-columns: repeat(2, 1fr) !important; max-width: 1000px !important; margin: 0 auto !important; gap: 24px !important; }
@media (max-width: 720px) { .protgrid { grid-template-columns: 1fr !important; max-width: 460px !important; } }
.prot {
  display: flex !important; flex-direction: column; min-height: 0 !important;
  background: #2B2B30 !important; border-color: rgba(255,255,255,.09) !important;
  box-shadow: 0 22px 50px rgba(0,0,0,.36), inset 0 1px 0 rgba(255,255,255,.045) !important;
  padding: 30px 30px 28px !important;
}
.prot::before { background: radial-gradient(closest-side, rgba(80,180,90,.14), transparent 72%) !important; }
.prot-top { margin-bottom: 22px !important; }
.prot-viz { min-height: 188px; }
.prot-foot { margin-top: 24px !important; }
.prot-foot h4 { font-size: 22px !important; }
.prot-foot p { font-size: 14.5px !important; }
.prot-ic { width: 50px; height: 50px; }
.pv-chip .cv, .pv-chip .ck { display: block; }

/* ── HERO · much larger across the board ── */
.hero-c { max-width: 1040px; }
.hero-eyebrow { font-size: 13.5px !important; padding: 10px 20px !important; margin-bottom: 34px !important; letter-spacing: .14em; }
.hero-h, .hero .hero-h { font-size: clamp(60px, 9vw, 132px) !important; }
.hero-h .hr-lead { display: block; }
.hero-sub-strong { font-size: clamp(20px, 2.1vw, 27px) !important; margin: 38px 0 12px !important; }
.hero-sub { font-size: clamp(16.5px, 1.5vw, 20px) !important; max-width: 60ch !important; line-height: 1.6 !important; }
.hero-actions { gap: 16px; margin-top: 34px; }
.hero-actions .btn-lg { font-size: 17px !important; padding: 18px 34px !important; }
.hero-local { font-size: 14.5px !important; margin-top: 22px; }
.laurels { gap: 56px !important; margin-top: 46px !important; }
.laurel svg { width: 38px !important; height: 52px !important; }
.laurel .lt .a { font-size: 17.5px !important; }
.laurel .lt .b { font-size: 9px !important; }

/* ── TRUST CYCLE (below hero) · larger, cleaner, aligned ── */
.trustcycle { padding: clamp(60px, 6.5vw, 96px) 0 !important; }
.tcyc-stage { max-width: 1120px !important; min-height: 244px !important; }
.tcyc-kicker { font-size: 13px !important; }
.tcyc-title { font-size: clamp(30px, 3.6vw, 48px) !important; }
.tcyc-stats { gap: clamp(34px, 4.2vw, 72px) !important; }
.tcyc-stat { min-width: 130px !important; }
.tcyc-stat .n { font-size: clamp(42px, 4.6vw, 62px) !important; letter-spacing: -.02em; }
.tcyc-stat .l { font-size: 13px !important; margin-top: 11px !important; color: var(--t-mid) !important; }
.tcyc-logos { gap: clamp(28px, 3.6vw, 56px) !important; }
.ps-logo { font-size: clamp(20px, 2vw, 27px) !important; }
.tcyc-dots { margin-top: 34px !important; }

/* ── FORECAST · align the panel to the reviews-card width ── */
.forecast .fc-inner { max-width: none !important; }
.forecast .fc-panel { max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; }

/* ── HOW IT WORKS · slightly larger ── */
.proc-step .ps-n { width: 60px !important; height: 60px !important; font-size: 18px !important; }
.proc-step h4 { font-size: clamp(19px, 1.6vw, 22px) !important; margin-bottom: 10px !important; }
.proc-step p { font-size: clamp(15px, 1.2vw, 16.5px) !important; line-height: 1.6 !important; }
.process-track .proc-step:not(:last-child)::after { top: 30px !important; left: 60px !important; }

/* ── FAQ · no focus outline on click ── */
.faq-q { outline: none !important; -webkit-tap-highlight-color: transparent; }
.faq-q:focus, .faq-q:focus-visible, .faq-item:focus-within .faq-q { outline: none !important; box-shadow: none !important; }

/* ── NUMBERS · upgraded line-graph UI ── */
#numbers .cm-line { position: relative; border-radius: 14px; overflow: hidden;
  background: linear-gradient(180deg, rgba(46,94,150,.05), transparent 70%); }
#numbers .cm-line::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background-image: repeating-linear-gradient(to bottom, rgba(8,8,10,.06) 0 1px, transparent 1px 25%);
}
#numbers .cm-line svg { position: relative; z-index: 1; }
#numbers .cm-line .ln { stroke-width: 3.5; filter: drop-shadow(0 8px 14px rgba(46,94,150,.28)); }
#numbers .cm-line-dot { r: 6; filter: drop-shadow(0 2px 6px rgba(46,94,150,.4)); }
#numbers .cm-axis { margin-top: 14px; font-size: 11.5px; color: var(--t-mid); }

/* ── DONUT / PIE · never let the ring clip ── */
.kyn-donut .donut svg, .gm-card .donut svg, .nv-donut svg { overflow: visible !important; }
.growmoney .gm-card, .kyn .gm-card { overflow: visible !important; }

/* ═══════════════════════════════════════════════════════════════════════
   v5 — cross-site polish (wsa2.css now links into ALL FOUR sites)
   ═══════════════════════════════════════════════════════════════════════ */

/* WSA cards: taller / more square · the old 3-segment "slide" track is gone */
.wsa-track { display: none !important; }
.nw-grid { max-width: 1120px; margin: 8px auto 0; }
.nw-screen { min-height: 430px; justify-content: space-between; }
.nw-save { margin-top: 0; }
@media (max-width: 1000px) { .nw-screen { min-height: 404px; } }
@media (max-width: 540px) { .nw-screen { min-height: 360px; } }

/* "Plan before you move" cards — remove the red top accent line */
.kyn-grid .gm-card::before { display: none !important; }

/* WHY VALLEY WEST — same background as "How it works" (plain white),
   larger content, clean graphite→white blend (WSA above is graphite) */
.whyus { background: var(--paper) !important; border-top: 0 !important; }
.whyus::before { background: linear-gradient(to bottom, #2B2B30 0%, rgba(43,43,48,.45) 30%, var(--paper) 100%) !important;
  height: clamp(120px, 13vw, 180px) !important; }
.whyus .h2 { font-size: clamp(38px, 4.9vw, 66px) !important; }
.whyus .lede { font-size: clamp(18px, 1.5vw, 23px) !important; line-height: 1.62 !important; }
.whyus-points li { font-size: clamp(16px, 1.25vw, 19px) !important; }
.whyus-points .wp-t { font-size: clamp(16px, 1.2vw, 18.5px) !important; }
.whyus-points .wp-d { font-size: clamp(14px, 1.02vw, 15.5px) !important; margin-top: 4px !important; }
.whyus-points .wp-ic { width: 46px !important; height: 46px !important; }
.whyus .btn-lg { font-size: 16.5px !important; padding: 17px 32px !important; }

/* ── Smoother section blends ("blurs") ── */
/* above "How it works": longer, softer dark→white fade; drop the hairline glint */
#process { border-top: 0 !important; }
#process::before { height: clamp(120px, 14vw, 190px) !important;
  background: linear-gradient(to bottom, var(--ink) 0%, rgba(8,8,10,.5) 40%, rgba(255,255,255,0) 100%) !important; }
#process::after { display: none !important; }
/* forecast → "Plan before you move": darken the seam so no bright band reads as a bar */
.growmoney::before { height: clamp(130px, 15vw, 200px) !important;
  background: linear-gradient(to bottom, #16365C 0%, rgba(8,8,10,.62) 48%, rgba(8,8,10,0) 100%) !important; }
/* below the FAQ: soft fade down into the dark final section */
#faq { position: relative; }
#faq > .wrap { position: relative; z-index: 1; }
#faq::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; z-index: 0; pointer-events: none;
  height: clamp(90px, 10vw, 150px);
  background: linear-gradient(to bottom, rgba(250,250,248,0) 0%, var(--ink) 100%); }

/* "Your loan, in your pocket" cards — a little tasteful colour beyond red/black/white
   (muted jewel tones on the dark cards; card 1 keeps the brand accent) */
.tcards .tcard:nth-child(2) { --accent: #3E7CB1; }
.tcards .tcard:nth-child(3) { --accent: #3DA46A; }
.tcards .tcard:nth-child(4) { --accent: #C7913A; }

/* ═══════════════════════════════════════════════════════════════════════
   v6 — remove all blur/blend fades · WSA black · hero medium · protect
   aligned to reviews · fix clipped rings · fix $142 overlap
   ═══════════════════════════════════════════════════════════════════════ */

/* (a) kill every section blur/blend fade across all 4 sites */
.forecast::before, .growmoney::before, #process::before, .whyus::before,
.reviews::before, #faq::after, .xbridge.l2d::after,
.section.dark.wsa::before, #process::after { display: none !important; background: none !important; }
.xbridge.l2d { display: none !important; }

/* (b) WHAT SETS US APART — pure black background */
.section.dark.wsa { background: #08080A !important; }

/* (c) fix the carrier-compare result overlap ($142 vs. text) */
.nw-result { gap: 10px; }
.nw-result .rt { min-width: 0; }
.nw-result .rt .a { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nw-result .rt .b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nw-result .rp { flex: none; padding-left: 4px; text-align: right; }
.nw-result .rp .pv { white-space: nowrap; }

/* (d) rings/gauges must never clip at the SVG edge ("pie chart cut off") */
.nw-ring svg, .pv-shield svg { overflow: visible !important; }

/* (e) HERO — medium, centered, title still the focal point (all 4 sites) */
.hero { min-height: 80vh !important; padding: 116px 24px 72px !important; }
.hero-c { max-width: 780px; }
.hero-eyebrow { font-size: 12px !important; padding: 8px 16px !important; margin-bottom: 24px !important; letter-spacing: .12em; }
.hero-h, .hero .hero-h { font-size: clamp(42px, 5.6vw, 80px) !important; }
.hero-sub-strong { font-size: clamp(17px, 1.7vw, 21px) !important; margin: 28px 0 8px !important; }
.hero-sub { font-size: clamp(15px, 1.3vw, 17.5px) !important; max-width: 54ch !important; }
.hero-actions { gap: 14px; margin-top: 28px; }
.hero-actions .btn-lg { font-size: 15.5px !important; padding: 15px 28px !important; }
.hero-local { font-size: 13.5px !important; margin-top: 18px; }
.laurels { gap: 40px !important; margin-top: 34px !important; }
.laurel svg { width: 32px !important; height: 44px !important; }
.laurel .lt .a { font-size: 15px !important; }
.laurel .lt .b { font-size: 8.5px !important; }

/* (f) EVERYTHING YOU PROTECT — align to the reviews container (full wrap),
   four across like the reviews row */
.protgrid { grid-template-columns: repeat(4, 1fr) !important; max-width: none !important; gap: 22px !important; }
@media (max-width: 1024px) { .protgrid { grid-template-columns: repeat(2, 1fr) !important; } }
@media (max-width: 560px) { .protgrid { grid-template-columns: 1fr !important; max-width: 420px !important; } }
.prot { min-height: 432px; }

/* (g) FORECAST — chart sized with more presence (already edge-aligned to the minis) */
.fc-chart { height: clamp(200px, 17vw, 320px) !important; }
/* (h) "...over time" line: drop the distorted oval end-dots (stretched-SVG circles) */
.cm-line-dot { display: none !important; }

/* (i) TRUST STRIP — single clean line of partner logos (replaces the cycler) */
.trustbar { padding: clamp(42px, 5vw, 70px) 0; background: var(--paper);
  border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.trustbar-inner { display: flex; align-items: center; justify-content: center;
  gap: clamp(26px, 4vw, 64px); flex-wrap: nowrap; }
.trustbar-lbl { flex: none; font-family: var(--mono); font-size: 11px; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; color: var(--accent); white-space: nowrap; }
.trustbar-logos { display: flex; align-items: center; gap: clamp(22px, 3.4vw, 52px);
  flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.trustbar-logos::-webkit-scrollbar { display: none; }
.tb-logo { flex: none; font-family: var(--sans); font-weight: 700; font-size: clamp(15px, 1.5vw, 20px);
  letter-spacing: -.01em; color: var(--t-mid); white-space: nowrap; transition: color .2s; }
.tb-logo:hover { color: var(--t-hi); }
.trustbar-disc { text-align: center; font-size: 11px; color: var(--t-lo);
  margin: clamp(18px, 2vw, 26px) auto 0; max-width: 70ch; }
@media (max-width: 820px) {
  .trustbar-inner { flex-direction: column; gap: 18px; }
  .trustbar-logos { max-width: 100%; justify-content: flex-start; }
}

/* ═══════════════════════════════════════════════════════════════════════
   v8 — dark sections = black + brand red/green only (no graphite/extra hues)
        · hero full-screen on landing
   ═══════════════════════════════════════════════════════════════════════ */
.hero { min-height: 100vh !important; }

/* WHAT SETS US APART — black section, dark cards, brand accent */
.section.dark.wsa { background: #08080A !important; }
[data-brand="mortgage"] .section.dark.wsa { --accent: #D0202F !important; --accent-soft: var(--m-soft) !important; }
[data-brand="insurance"] .section.dark.wsa { --accent: #50B45A !important; --accent-soft: var(--i-soft) !important; }
.nw-card { background: #141418 !important; border-color: rgba(255,255,255,.08) !important;
  box-shadow: 0 28px 64px rgba(0,0,0,.52), inset 0 1px 0 rgba(255,255,255,.04) !important; }
.nw-card::before { background: radial-gradient(closest-side, color-mix(in srgb, var(--accent) 18%, transparent), transparent 72%) !important; }
.nw-screen { background: #0A0A0D !important; border-color: rgba(255,255,255,.07) !important;
  --acc: var(--accent); --acc-2: color-mix(in srgb, var(--accent) 60%, #ffffff); }
.nw-kicker { color: #fff !important; }
.nw-cta-btn:hover { background: var(--accent) !important; border-color: var(--accent) !important; color: #fff !important; }
.nw-cta-btn:hover svg { color: #fff; }

/* EVERYTHING YOU PROTECT — dark cards (drop the graphite) */
.prot { background: #141418 !important; border-color: rgba(255,255,255,.08) !important; }
.prot::before { background: radial-gradient(closest-side, color-mix(in srgb, var(--accent) 18%, transparent), transparent 72%) !important; }

/* the old "visualize the numbers" CTA pointed at the removed #numbers section */
.viz-cta { display: none !important; }

/* ═══════════════════════════════════════════════════════════════════════
   v9 — "Your loan, in your pocket" → realistic iPhone app mockup (mortgage)
   ═══════════════════════════════════════════════════════════════════════ */
.appsec { background: #08080A !important; overflow: hidden; }
.appsec-grid { display: grid; grid-template-columns: 1.02fr .98fr; gap: clamp(40px, 5vw, 84px); align-items: center; }
@media (max-width: 940px) { .appsec-grid { grid-template-columns: 1fr; gap: 48px; } .appsec-stage { order: -1; } }
.appsec-copy .eyebrow { color: var(--accent); }
.appsec-copy .h2 { color: #fff; }
.appsec-copy .h2 em { font-style: italic; color: var(--accent); }
.appsec-copy .lede { color: var(--t-mid-d); max-width: 48ch; }
.appsec-feats { list-style: none; margin: 26px 0 30px; padding: 0; display: grid; gap: 13px; }
.appsec-feats li { display: flex; align-items: center; gap: 12px; font-size: clamp(14.5px,1.15vw,16px); color: var(--t-hi-d); }
.af-ic { flex: none; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center;
  background: color-mix(in srgb, var(--accent) 18%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 46%, transparent); color: var(--accent); }
.af-ic svg { width: 13px; height: 13px; }
.appsec-badges { display: flex; gap: 14px; flex-wrap: wrap; }
.store-badge { display: inline-flex; align-items: center; gap: 11px; padding: 10px 20px; border-radius: 14px;
  background: #fff; color: #08080A; text-decoration: none; transition: transform .2s var(--ease-snap), box-shadow .2s; box-shadow: 0 8px 24px rgba(0,0,0,.3); }
.store-badge:hover { transform: translateY(-2px); box-shadow: 0 14px 32px rgba(0,0,0,.4); }
.store-badge svg { width: 23px; height: 23px; flex: none; }
.store-badge span { display: flex; flex-direction: column; line-height: 1.12; }
.store-badge small { font-size: 9px; letter-spacing: .02em; color: #444; }
.store-badge b { font-size: 15px; font-weight: 700; }

/* ── the device ── */
.appsec-stage { display: flex; justify-content: center; align-items: center; perspective: 1900px; padding: 10px 0; }
.iphone { position: relative; width: clamp(258px, 29vw, 322px); aspect-ratio: 322 / 660; border-radius: 54px; padding: 11px;
  background: linear-gradient(145deg, #54545a, #17171a 26%, #34343a 52%, #111114 78%, #44444a);
  box-shadow: inset 0 1px 1px rgba(255,255,255,.25), inset 0 -1px 2px rgba(0,0,0,.6),
    -50px 60px 90px -34px rgba(0,0,0,.85), 0 30px 60px rgba(0,0,0,.5);
  transform: rotateY(-19deg) rotateX(5deg) rotateZ(.4deg); transform-style: preserve-3d; }
@media (max-width: 940px) { .iphone { transform: rotateY(-12deg) rotateX(3deg); } }
.ip-screen { position: relative; width: 100%; height: 100%; border-radius: 44px; overflow: hidden;
  background: radial-gradient(120% 80% at 50% 0%, #161418, #0A0A0C 60%); color: #fff;
  display: flex; flex-direction: column; padding: 13px 13px 0; box-shadow: inset 0 0 0 2px #050505; }
.ip-island { position: absolute; top: 12px; left: 50%; transform: translateX(-50%); width: 84px; height: 25px; background: #000; border-radius: 13px; z-index: 6; }
.ip-status { display: flex; align-items: center; justify-content: space-between; padding: 3px 10px 10px; font-size: 12.5px; position: relative; z-index: 4; }
.ip-time { font-weight: 700; letter-spacing: .02em; }
.ip-stat { display: inline-flex; align-items: center; gap: 5px; color: #fff; }
.ip-stat svg { height: 11px; width: auto; }
.ip-head { display: flex; align-items: center; justify-content: space-between; padding: 4px 6px 12px; }
.ip-brand { display: inline-flex; align-items: center; gap: 8px; font-family: var(--serif); font-style: italic; font-size: 15.5px; color: #fff; white-space: nowrap; }
.ip-brand svg { width: 19px; height: 19px; color: var(--accent); }
.ip-gear { color: rgba(255,255,255,.55); } .ip-gear svg { width: 19px; height: 19px; }
.ip-card { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08); border-radius: 18px; padding: 14px; margin-bottom: 11px; }
.ip-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.ip-lbl { font-family: var(--sans); font-size: 10px; letter-spacing: .04em; text-transform: uppercase; color: rgba(255,255,255,.5); }
.ip-pill { display: inline-flex; align-items: center; gap: 6px; font-size: 10.5px; font-weight: 600; color: var(--accent);
  background: color-mix(in srgb, var(--accent) 16%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent); padding: 4px 9px; border-radius: 999px; }
.ip-pill i { width: 5px; height: 5px; border-radius: 50%; background: var(--accent); }
.ip-step { font-size: 13px; font-weight: 600; color: #fff; margin: 12px 0 9px; }
.ip-prog { height: 6px; border-radius: 4px; background: rgba(255,255,255,.1); overflow: hidden; }
.ip-prog i { display: block; height: 100%; width: 60%; border-radius: 4px; background: var(--accent); }
.ip-amt { font-family: var(--sans); font-size: 24px; font-weight: 800; color: #fff; letter-spacing: -.02em; margin-top: 3px; }
.ip-amt small { font-size: 12px; font-weight: 600; color: rgba(255,255,255,.55); }
.ip-delta { font-size: 10.5px; font-weight: 600; color: var(--accent); align-self: flex-start; }
.ip-chart { height: 64px; margin: 10px 0 8px; color: var(--accent); }
.ip-chart svg { width: 100%; height: 100%; display: block; overflow: visible; }
.ip-tabs { display: flex; gap: 6px; }
.ip-tabs span { flex: 1; text-align: center; font-size: 11px; font-weight: 600; color: rgba(255,255,255,.5); padding: 6px 0; border-radius: 8px; }
.ip-tabs span.on { background: var(--accent); color: #fff; }
.ip-miles { display: grid; gap: 8px; margin-bottom: 12px; }
.ip-mile { display: flex; align-items: center; gap: 10px; font-size: 12.5px; color: rgba(255,255,255,.62); }
.ip-mile .m-ic { flex: none; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.13); }
.ip-mile .m-ic svg { width: 11px; height: 11px; color: #fff; }
.ip-mile.done { color: #fff; } .ip-mile.done .m-ic { background: var(--accent); border-color: var(--accent); }
.ip-mile.active { color: #fff; } .ip-mile.active .m-ic { border-color: var(--accent); position: relative; }
.ip-mile.active .m-ic::after { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
.ip-nav { margin-top: auto; display: flex; justify-content: space-between; padding: 12px 14px calc(12px + env(safe-area-inset-bottom)); border-top: 1px solid rgba(255,255,255,.07); }
.ip-nav span { color: rgba(255,255,255,.4); } .ip-nav span.on { color: var(--accent); }
.ip-nav svg { width: 21px; height: 21px; }
/* side buttons */
.ip-side { position: absolute; background: linear-gradient(180deg, #3a3a3e, #1a1a1d); border-radius: 2px; }
.ip-power { right: -3px; top: 30%; width: 3px; height: 64px; }
.ip-vu { left: -3px; top: 26%; width: 3px; height: 44px; }
.ip-vd { left: -3px; top: 38%; width: 3px; height: 44px; }
.ip-act { left: -3px; top: 18%; width: 3px; height: 26px; }