.fv-finding { border-left-color: #b44343; background: #eaecef; }

.fv-explainer {
  margin: 2.5rem 0 3rem;
  border: 1px solid #9ea4b0;
  border-radius: 18px;
  background: #f7f8fa;
  color: #0d0f12;
  overflow: hidden;
  box-shadow: 0 18px 44px rgba(13, 15, 18, .1);
}

.fv-explainer:focus-visible { outline: 3px solid #b44343; outline-offset: 4px; }
.fv-head { display: grid; grid-template-columns: 1.1fr .9fr; gap: 2rem; padding: 1.5rem 1.5rem 1rem; border-bottom: 1px solid #e2e5ea; }
.fv-head h3 { margin: .25rem 0 0; font-size: clamp(1.3rem, 3vw, 2rem); }
.fv-head p { margin: 0; align-self: end; color: #16191d; font-size: .95rem; }
.fv-eyebrow { color: #b44343; font-size: .72rem; font-weight: 700; letter-spacing: .12em; }
.fv-figure { margin: 0; padding: 1.25rem; }
.fv-stage { display: grid; grid-template-columns: 1.35fr .85fr .8fr; gap: .8rem; min-height: 210px; }
.fv-ledger, .fv-gate, .fv-cash, .fv-document { border: 1px solid #9ea4b0; border-radius: 12px; background: #ffffff; }
.fv-ledger { grid-row: span 2; padding: 1rem; }
.fv-ledger-label, .fv-gate span, .fv-cash span, .fv-document span { display: block; color: #5e646e; font-size: .65rem; font-weight: 700; letter-spacing: .1em; }
.fv-years { display: grid; grid-template-columns: repeat(4, 1fr); align-items: end; gap: .55rem; height: 130px; margin-top: .65rem; }
.fv-years i { position: relative; display: flex; flex-direction: column; justify-content: end; height: 55%; padding: .4rem .2rem; border: 1px solid #9ea4b0; border-radius: 7px 7px 3px 3px; background: #e2e5ea; color: #0d0f12; font-style: normal; text-align: center; transition: height .45s ease, background .45s ease, transform .45s ease; }
.fv-years i:nth-child(2) { height: 68%; }
.fv-years i:nth-child(3) { height: 82%; }
.fv-years i:nth-child(4) { height: 96%; }
.fv-years b { font-size: .86rem; }
.fv-years small { font-size: .65rem; }
.fv-gate, .fv-cash, .fv-document { display: flex; flex-direction: column; justify-content: center; padding: .9rem 1rem; transition: background .35s ease, border-color .35s ease, transform .35s ease; }
.fv-gate b, .fv-document b { margin-top: .35rem; font-size: .84rem; }
.fv-cash { grid-row: span 2; text-align: center; }
.fv-cash b { margin: .25rem 0; font-family: Georgia, serif; font-size: clamp(2.4rem, 7vw, 4.4rem); font-weight: 400; }
.fv-cash small { color: #5e646e; }
.fv-document { grid-column: 2; }
.fv-explainer[data-step="1"] .fv-years i { background: #9ea4b0; transform: translateY(-3px); }
.fv-explainer[data-step="2"] .fv-gate, .fv-explainer[data-step="2"] .fv-document { border-color: #6e747e; background: #eaecef; }
.fv-explainer[data-step="3"] .fv-gate { border-color: #b44343; background: #f4e6e6; transform: translateX(4px); }
.fv-explainer[data-step="4"] .fv-cash { border-color: #107c55; background: #e8f3ee; }
.fv-explainer[data-step="4"] .fv-cash b { color: #107c55; }
.fv-track { display: grid; grid-template-columns: repeat(5, 1fr); gap: .55rem; margin: 1rem 0; padding: 0; list-style: none; }
.fv-track li { min-width: 0; padding: .65rem; border-top: 3px solid #9ea4b0; background: rgba(13, 15, 18, .45); opacity: .64; transition: opacity .3s ease, border-color .3s ease, transform .3s ease; }
.fv-track li.is-active { border-color: #b44343; opacity: 1; transform: translateY(-3px); }
.fv-track span { color: #b44343; font-size: .68rem; font-weight: 700; }
.fv-track strong, .fv-track small { display: block; overflow-wrap: anywhere; }
.fv-track strong { margin-top: .2rem; font-size: .78rem; }
.fv-track small { color: #5e646e; font-size: .66rem; }
.fv-live { min-height: 84px; padding: 1rem; border-radius: 10px; background: #0d0f12; color: #f7f8fa; }
.fv-live > span:first-child { display: block; margin-bottom: .25rem; color: #9ea4b0; font-size: .65rem; font-weight: 700; letter-spacing: .1em; }
.fv-live strong, .fv-live > span:last-child { display: block; }
.fv-live > span:last-child { margin-top: .25rem; color: #e2e5ea; font-size: .88rem; }
.fv-controls { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-top: .85rem; }
.fv-controls button { min-height: 40px; padding: .55rem .8rem; border: 1px solid #5e646e; border-radius: 7px; background: transparent; color: #0d0f12; font: inherit; font-size: .78rem; cursor: pointer; }
.fv-controls button:hover { background: #e2e5ea; }
.fv-controls button:focus-visible { outline: 3px solid #b44343; outline-offset: 2px; }
.fv-counter { margin-left: auto; color: #5e646e; font-size: .78rem; }
.fv-figure figcaption { margin-top: .9rem; color: #5e646e; font-size: .78rem; }
.fv-state-copy { margin: 0; padding: 0 1.25rem 1.25rem; list-style: none; }
.fv-state-copy li { display: grid; grid-template-columns: minmax(145px, .8fr) 2fr; gap: 1rem; padding: .7rem 0; border-top: 1px solid #e2e5ea; }
.fv-state-copy strong { font-size: .82rem; }
.fv-state-copy span { color: #5e646e; font-size: .8rem; }
.fv-state-copy li.is-active strong { color: #b44343; }

@media (max-width: 720px) {
  .fv-head { grid-template-columns: 1fr; gap: .7rem; }
  .fv-stage { grid-template-columns: 1fr 1fr; min-height: 0; }
  .fv-ledger { grid-column: 1 / -1; grid-row: auto; }
  .fv-cash { grid-column: 2; grid-row: 2 / span 2; }
  .fv-document { grid-column: 1; }
  .fv-track { grid-template-columns: 1fr; }
  .fv-track li { display: grid; grid-template-columns: 32px 1fr; column-gap: .4rem; }
  .fv-track small { grid-column: 2; }
  .fv-state-copy li { grid-template-columns: 1fr; gap: .25rem; }
  .fv-counter { width: 100%; margin-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .fv-explainer *, .fv-explainer *::before, .fv-explainer *::after { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
}