/* ==========================================================================
   /industries/web-design-for-finance: this page's illustration kit
   (resources/views/industries/wd/finance). Loaded on this page only, after
   ind-wdp.css. Every selector is scoped to the finance page, new classes are
   wdf-, keyframes wdf*. Scene motion runs only once a tile is revealed
   (.wdp-tile.is-in) or a visual is showing (.wdp-vis.is-on); without it
   every scene rests complete and readable.
   ========================================================================== */

/* ---- S3 shared: the scene panel, its browser strip, its footer, tags ---- */
.wdp[data-wd-page="finance"] .wdf-box{padding-top:0;border-radius:16px;border:1px solid var(--edge);background:#0A0B0E;overflow:hidden}
.wdp[data-wd-page="finance"] .wdf-bar{display:flex;align-items:center;gap:12px;min-width:0;padding:10px 14px;border-bottom:1px solid var(--edge);color:var(--text-dim);white-space:nowrap}
.wdp[data-wd-page="finance"] .wdf-bar .wdp-dots{flex:0 0 auto}
.wdp[data-wd-page="finance"] .wdf-bar .wdp-dots i{width:7px;height:7px}
.wdp[data-wd-page="finance"] .wdf-bar > span:last-child{min-width:0;overflow:hidden;text-overflow:ellipsis}
.wdp[data-wd-page="finance"] .wdf-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 14px;border-top:1px solid var(--edge);color:var(--text-dim)}
.wdp[data-wd-page="finance"] .wdf-tag{flex:0 0 auto;display:inline-block;padding:4px 10px;border-radius:100px;font-size:11px;font-weight:700;line-height:1.2;
  letter-spacing:.08em;text-transform:uppercase;white-space:nowrap}
.wdp[data-wd-page="finance"] .wdf-tag--coral{color:var(--coral);background:var(--coral-soft)}
.wdp[data-wd-page="finance"] .wdf-tag--teal{color:var(--teal);background:var(--teal-soft)}

/* ---- 01: the first paragraph, drowned in fine print. Disclaimer lines pile
   up under the warning until the actual point is pushed out of view; the
   scrollbar thumb shrinks as the page grows. ---- */
.wdp[data-wd-page="finance"] .wdf-fine__view{position:relative;height:132px;padding:13px 32px 0 14px;overflow:hidden}
.wdp[data-wd-page="finance"] .wdf-fine__view::after{content:"";position:absolute;left:0;right:0;bottom:0;height:20px;pointer-events:none;
  background:linear-gradient(rgba(10,11,14,0),#0A0B0E)}
.wdp[data-wd-page="finance"] .wdf-fine__page{display:grid;gap:9px}
.wdp[data-wd-page="finance"] .wdf-fine__warn{margin:0;padding-left:10px;border-left:2px solid var(--coral-line);font-size:13px;line-height:1.4;font-style:italic;color:var(--text-soft)}
.wdp[data-wd-page="finance"] .wdf-fine__lines{display:grid;align-content:start;gap:5px;height:40px;overflow:hidden}
.wdp[data-wd-page="finance"] .wdf-fine__lines i{display:block;height:4px;border-radius:2px;
  background:repeating-linear-gradient(90deg,rgba(255,255,255,.15) 0 22px,transparent 22px 26px,rgba(255,255,255,.15) 26px 38px,transparent 38px 42px,rgba(255,255,255,.15) 42px 71px,transparent 71px 75px)}
.wdp[data-wd-page="finance"] .wdf-fine__lines i:nth-child(3n+2){width:93%}
.wdp[data-wd-page="finance"] .wdf-fine__lines i:nth-child(4n+3){width:86%}
.wdp[data-wd-page="finance"] .wdf-fine__lines i:nth-child(5n){width:58%}
.wdp[data-wd-page="finance"] .wdf-fine__lines i:nth-child(2n){background-position:-17px 0}
.wdp[data-wd-page="finance"] .wdf-fine__lines i:nth-child(3n){background-position:-44px 0}
.wdp[data-wd-page="finance"] .wdf-fine__lines i:nth-child(7n+1){background-position:-29px 0}
.wdp[data-wd-page="finance"] .wdf-fine__point{display:grid;gap:6px;padding:10px 12px;border-radius:10px;border:1px solid var(--gold-line);background:var(--gold-soft)}
.wdp[data-wd-page="finance"] .wdf-fine__point i{display:block;width:46%;height:7px;border-radius:4px;background:var(--gold)}
.wdp[data-wd-page="finance"] .wdf-fine__point i + i{width:74%;height:5px;background:rgba(255,255,255,.28)}
.wdp[data-wd-page="finance"] .wdf-fine__point b{display:block;width:62px;height:14px;margin-top:2px;border-radius:7px;background:var(--gold)}
.wdp[data-wd-page="finance"] .wdf-fine__scroll{position:absolute;top:12px;bottom:12px;right:13px;width:4px;border-radius:2px;background:rgba(255,255,255,.06)}
.wdp[data-wd-page="finance"] .wdf-fine__scroll i{position:absolute;left:0;right:0;top:0;height:34%;border-radius:2px;background:rgba(255,255,255,.3)}
.wdp[data-wd-page="finance"] .wdp-tile.is-in .wdf-fine__lines{animation:wdfFineLines 9s cubic-bezier(.45,0,.4,1) infinite}
.wdp[data-wd-page="finance"] .wdp-tile.is-in .wdf-fine__page{animation:wdfFinePage 9s ease infinite}
.wdp[data-wd-page="finance"] .wdp-tile.is-in .wdf-fine__scroll i{animation:wdfFineThumb 9s cubic-bezier(.45,0,.4,1) infinite}
.wdp[data-wd-page="finance"] .wdp-tile.is-in .wdf-fine__tag{animation:wdfPulse 9s ease infinite}
@keyframes wdfFineLines{0%,10%{height:0}72%,94%{height:121px}96%,100%{height:0}}
@keyframes wdfFinePage{0%,88%{opacity:1}92%,96%{opacity:0}100%{opacity:1}}
@keyframes wdfFineThumb{0%,10%{height:82%}72%,94%{height:16%}96%,100%{height:82%}}
@keyframes wdfPulse{0%,70%,94%,100%{box-shadow:0 0 0 0 rgba(255,122,107,0)}78%,88%{box-shadow:0 0 0 4px rgba(255,122,107,.14);background:rgba(255,122,107,.2)}}

/* ---- 02: two firms' pages slide together and line up exactly; only the
   logo tells them apart. ---- */
.wdp[data-wd-page="finance"] .wdf-twin{--tw:20px;display:grid;justify-items:center;gap:14px;padding:18px 16px 16px}
.wdp[data-wd-page="finance"] .wdf-twin__row{display:grid;grid-template-columns:minmax(0,1fr) 24px minmax(0,1fr);gap:8px;align-items:center;width:100%;max-width:440px}
.wdp[data-wd-page="finance"] .wdf-twin__card{grid-row:1;position:relative;display:grid;gap:7px;padding:10px 11px 12px;border-radius:12px;
  border:1px solid var(--edge-2);background:rgba(255,255,255,.035)}
.wdp[data-wd-page="finance"] .wdf-twin__card--a{grid-column:1}
.wdp[data-wd-page="finance"] .wdf-twin__card--b{grid-column:3;z-index:1}
.wdp[data-wd-page="finance"] .wdf-twin__top{display:flex;align-items:center;gap:5px}
.wdp[data-wd-page="finance"] .wdf-twin__top i{display:block;width:16px;height:4px;border-radius:2px;background:rgba(255,255,255,.12)}
.wdp[data-wd-page="finance"] .wdf-twin__top i.wdf-twin__logo{width:12px;height:12px;margin-right:auto;border-radius:50%;background:none;border:2px solid rgba(255,255,255,.55)}
.wdp[data-wd-page="finance"] .wdf-twin__card--b i.wdf-twin__logo{border-radius:3px;border-color:rgba(255,255,255,.4);transform:rotate(45deg) scale(.84)}
.wdp[data-wd-page="finance"] .wdf-twin__img{display:block;height:26px;border-radius:7px;background:linear-gradient(135deg,rgba(255,255,255,.1),rgba(255,255,255,.025))}
.wdp[data-wd-page="finance"] .wdf-twin__q{font-family:var(--font-head);font-weight:700;font-size:13px;line-height:1.25;color:var(--text)}
.wdp[data-wd-page="finance"] .wdf-twin__l{display:block;height:4px;border-radius:2px;background:rgba(255,255,255,.12)}
.wdp[data-wd-page="finance"] .wdf-twin__l--s{width:62%}
.wdp[data-wd-page="finance"] .wdf-twin__eq{grid-column:2;grid-row:1;position:relative;display:block;width:24px;height:24px;border-radius:50%;
  border:1px solid var(--coral-line);background:#140F10}
.wdp[data-wd-page="finance"] .wdf-twin__eq::before,.wdp[data-wd-page="finance"] .wdf-twin__eq::after{content:"";position:absolute;left:7px;right:7px;top:9px;height:1.5px;
  border-radius:1px;background:var(--coral)}
.wdp[data-wd-page="finance"] .wdf-twin__eq::after{top:13px}
.wdp[data-wd-page="finance"] .wdp-tile.is-in .wdf-twin__card--a{animation:wdfTwinA 8s var(--ease) infinite}
.wdp[data-wd-page="finance"] .wdp-tile.is-in .wdf-twin__card--b{animation:wdfTwinB 8s var(--ease) infinite}
.wdp[data-wd-page="finance"] .wdp-tile.is-in .wdf-twin__eq{animation:wdfTwinEq 8s ease infinite}
.wdp[data-wd-page="finance"] .wdp-tile.is-in .wdf-twin__tag{animation:wdfTwinTag 8s ease infinite}
@keyframes wdfTwinA{0%,14%{transform:none;border-color:var(--edge-2)}
  36%{transform:translateX(calc(50% + var(--tw)));border-color:var(--edge-2)}
  44%,62%{transform:translateX(calc(50% + var(--tw)));border-color:var(--coral-line)}
  70%{transform:translateX(calc(50% + var(--tw)));border-color:var(--edge-2)}88%,100%{transform:none}}
@keyframes wdfTwinB{0%,14%{transform:none;border-color:var(--edge-2);box-shadow:none}
  36%{transform:translateX(calc(-50% - var(--tw)));border-color:var(--edge-2);box-shadow:none}
  44%,62%{transform:translateX(calc(-50% - var(--tw)));border-color:var(--coral-line);box-shadow:0 16px 34px -14px rgba(255,122,107,.55)}
  70%{transform:translateX(calc(-50% - var(--tw)));border-color:var(--edge-2);box-shadow:none}88%,100%{transform:none}}
@keyframes wdfTwinEq{0%,12%,90%,100%{opacity:1;transform:none}24%,78%{opacity:0;transform:scale(.6)}}
@keyframes wdfTwinTag{0%,40%,66%,100%{transform:none;box-shadow:0 0 0 0 rgba(255,122,107,0)}
  48%,58%{transform:translateY(-2px);box-shadow:0 0 0 4px rgba(255,122,107,.14);background:rgba(255,122,107,.2)}}

/* ---- 03: a prospect's lens goes looking for reassurance. The register
   link's place is empty; the licence is a 9px footnote (found, it grows to
   a readable size). ---- */
.wdp[data-wd-page="finance"] .wdf-dig__body{display:grid;grid-template-columns:92px minmax(0,1fr);gap:14px;align-items:center;padding:14px}
.wdp[data-wd-page="finance"] .wdf-dig__page{--l1:32px;--l2:99px;position:relative;display:flex;flex-direction:column;gap:6px;height:136px;padding:9px 8px 8px;
  border-radius:10px;border:1px solid var(--edge-2);background:#101217}
.wdp[data-wd-page="finance"] .wdf-dig__page > i{display:block;flex:0 0 auto;height:4px;border-radius:2px;background:rgba(255,255,255,.12)}
.wdp[data-wd-page="finance"] .wdf-dig__page > i.wdf-dig__nav{height:5px;margin-bottom:2px;background:rgba(255,255,255,.07)}
.wdp[data-wd-page="finance"] .wdf-dig__page > i.wdf-dig__h{height:6px;width:86%;background:rgba(255,255,255,.5)}
.wdp[data-wd-page="finance"] .wdf-dig__page > i.wdf-dig__h--s{width:56%;background:var(--gold)}
.wdp[data-wd-page="finance"] .wdf-dig__page > i.wdf-dig__slot{height:13px;width:72%;margin:2px 0 3px;border-radius:6px;border:1px dashed var(--coral-line);background:transparent}
.wdp[data-wd-page="finance"] .wdf-dig__page > i.wdf-dig__l--s{width:66%}
.wdp[data-wd-page="finance"] .wdf-dig__fine{display:grid;gap:3px;margin-top:auto;padding-top:6px;border-top:1px solid var(--edge)}
.wdp[data-wd-page="finance"] .wdf-dig__fine i{display:block;height:2px;border-radius:1px;background:rgba(255,255,255,.2)}
.wdp[data-wd-page="finance"] .wdf-dig__fine i:nth-child(2){width:78%}
.wdp[data-wd-page="finance"] .wdf-dig__fine i:nth-child(3){width:52%}
.wdp[data-wd-page="finance"] .wdf-dig__lens{position:absolute;left:50%;top:var(--l2);width:40px;height:40px;margin-left:-20px;border-radius:50%;
  border:2px solid var(--gold);background:radial-gradient(circle,rgba(244,160,0,.12),rgba(244,160,0,.03) 72%);box-shadow:0 0 18px -4px rgba(244,160,0,.65)}
.wdp[data-wd-page="finance"] .wdf-dig__lens::after{content:"";position:absolute;right:-9px;bottom:-3px;width:12px;height:3px;border-radius:2px;background:var(--gold);transform:rotate(45deg)}
.wdp[data-wd-page="finance"] .wdf-dig__finds{display:grid;gap:8px;min-width:0}
.wdp[data-wd-page="finance"] .wdf-dig__find{display:grid;justify-items:start;gap:7px;min-width:0;padding:10px 12px;border-radius:12px;
  border:1px solid var(--edge);background:rgba(255,255,255,.02);color:var(--text-soft)}
.wdp[data-wd-page="finance"] .wdf-dig__find .wdf-tag{margin-left:27px}
.wdp[data-wd-page="finance"] .wdf-dig__what{display:flex;align-items:center;gap:9px;min-width:0;line-height:1.3}
.wdp[data-wd-page="finance"] .wdf-dig__ic{flex:0 0 auto;display:block;width:18px;height:18px;border-radius:6px;border:1px dashed var(--coral-line)}
.wdp[data-wd-page="finance"] .wdf-dig__ic--fine{border-style:solid;border-color:var(--edge-2);
  background:linear-gradient(rgba(255,255,255,.3),rgba(255,255,255,.3)) 4px 11px/8px 1.5px no-repeat,linear-gradient(rgba(255,255,255,.3),rgba(255,255,255,.3)) 4px 7px/6px 1.5px no-repeat}
.wdp[data-wd-page="finance"] .wdf-dig__small{display:inline-block;transform-origin:left center}
.wdp[data-wd-page="finance"] .wdp-tile.is-in .wdf-dig__lens{animation:wdfLens 8s var(--ease) infinite}
.wdp[data-wd-page="finance"] .wdp-tile.is-in .wdf-dig__slot{animation:wdfSlot 8s ease infinite}
.wdp[data-wd-page="finance"] .wdp-tile.is-in .wdf-dig__fine i{animation:wdfFineHit 8s ease infinite}
.wdp[data-wd-page="finance"] .wdp-tile.is-in .wdf-dig__find--1{animation:wdfFind1 8s ease infinite}
.wdp[data-wd-page="finance"] .wdp-tile.is-in .wdf-dig__find--2{animation:wdfFind2 8s ease infinite}
.wdp[data-wd-page="finance"] .wdp-tile.is-in .wdf-dig__small{animation:wdfSmall 8s var(--ease) infinite}
@keyframes wdfLens{0%{top:-8px;opacity:0}6%{top:-8px;opacity:1}20%,38%{top:var(--l1)}58%,88%{top:var(--l2);opacity:1}95%,100%{top:var(--l2);opacity:0}}
@keyframes wdfSlot{0%,20%,42%,100%{background:transparent;border-color:var(--coral-line)}26%,36%{background:rgba(255,122,107,.16);border-color:var(--coral)}}
@keyframes wdfFineHit{0%,58%,90%,100%{background:rgba(255,255,255,.2)}64%,84%{background:rgba(244,160,0,.8)}}
@keyframes wdfFind1{0%,18%,96%,100%{opacity:.4;border-color:var(--edge);background:rgba(255,255,255,.02)}
  24%,40%{opacity:1;border-color:var(--coral-line);background:var(--coral-soft)}48%,90%{opacity:1;border-color:var(--edge);background:rgba(255,255,255,.02)}}
@keyframes wdfFind2{0%,58%,96%,100%{opacity:.4;border-color:var(--edge);background:rgba(255,255,255,.02)}
  64%,90%{opacity:1;border-color:var(--coral-line);background:var(--coral-soft)}}
@keyframes wdfSmall{0%,60%,97%,100%{transform:scale(.72)}68%,92%{transform:none}}

/* ---- 04: the five pages are scanned and passed over; a guide climbs the
   results to the top. ---- */
.wdp[data-wd-page="finance"] .wdf-reach__body{display:grid;grid-template-columns:minmax(0,.4fr) minmax(0,.6fr);gap:14px;align-items:center;padding:14px}
.wdp[data-wd-page="finance"] .wdf-reach__site{position:relative;padding:10px;border-radius:12px;border:1px dashed var(--edge-2);overflow:hidden}
.wdp[data-wd-page="finance"] .wdf-reach__site::after{content:"";position:absolute;top:0;bottom:0;left:0;width:36%;pointer-events:none;
  background:linear-gradient(90deg,rgba(255,122,107,0),rgba(255,122,107,.18),rgba(255,122,107,0));transform:translateX(-110%)}
.wdp[data-wd-page="finance"] .wdf-reach__pages{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.wdp[data-wd-page="finance"] .wdf-reach__pages span{display:inline-flex;align-items:center;gap:6px;padding:5px 9px;border-radius:8px;border:1px solid var(--edge);
  background:rgba(255,255,255,.035);color:var(--text-soft);font-size:12px;line-height:1.2;max-width:100%}
.wdp[data-wd-page="finance"] .wdf-reach__pages span i{flex:0 0 auto;width:8px;height:10px;border-radius:2px;border:1px solid rgba(255,255,255,.3)}
.wdp[data-wd-page="finance"] .wdf-reach__serp{display:grid;gap:8px;min-width:0}
.wdp[data-wd-page="finance"] .wdf-reach__q{display:flex;align-items:center;gap:9px;height:30px;padding:0 12px;border-radius:100px;border:1px solid var(--edge-2);
  background:rgba(255,255,255,.04);color:var(--text-dim)}
.wdp[data-wd-page="finance"] .wdf-reach__q svg{flex:0 0 auto}
.wdp[data-wd-page="finance"] .wdf-reach__q i{display:block;width:58%;height:5px;border-radius:3px;background:rgba(255,255,255,.3);transform-origin:left}
.wdp[data-wd-page="finance"] .wdf-reach__list{--oh:30px;--gh:36px;--g:6px;--down:calc((var(--oh) + var(--g)) * 2);position:relative;
  height:calc(var(--oh) * 2 + var(--gh) + var(--g) * 2)}
.wdp[data-wd-page="finance"] .wdf-reach__res{position:absolute;left:0;right:0;display:flex;align-items:center;gap:8px;height:var(--oh);padding:0 11px;border-radius:9px;
  border:1px solid var(--edge);background:rgba(255,255,255,.02)}
.wdp[data-wd-page="finance"] .wdf-reach__res i{flex:0 0 auto;display:block;width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.2)}
.wdp[data-wd-page="finance"] .wdf-reach__res b:empty{display:block;width:40%;height:5px;border-radius:3px;background:rgba(255,255,255,.14)}
.wdp[data-wd-page="finance"] .wdf-reach__res b:empty + b:empty{width:20%;background:rgba(255,255,255,.08)}
.wdp[data-wd-page="finance"] .wdf-reach__res--1{top:calc(var(--gh) + var(--g))}
.wdp[data-wd-page="finance"] .wdf-reach__res--2{top:calc(var(--gh) + var(--oh) + var(--g) * 2)}
.wdp[data-wd-page="finance"] .wdf-reach__res.wdf-reach__you{top:0;z-index:1;height:var(--gh);justify-content:space-between;gap:10px;border-color:var(--teal-line);
  background:linear-gradient(90deg,rgba(79,191,160,.16),rgba(79,191,160,.05));box-shadow:0 10px 26px -14px rgba(79,191,160,.7)}
.wdp[data-wd-page="finance"] .wdf-reach__url{display:flex;align-items:center;gap:8px;min-width:0;font-weight:600;color:var(--text);overflow-wrap:anywhere}
.wdp[data-wd-page="finance"] .wdf-reach__url i{background:var(--teal);box-shadow:0 0 8px rgba(79,191,160,.8)}
.wdp[data-wd-page="finance"] .wdp-tile.is-in .wdf-reach__q i{animation:wdfQuery 9s ease infinite}
.wdp[data-wd-page="finance"] .wdp-tile.is-in .wdf-reach__site::after{animation:wdfScan 9s ease-in-out infinite}
.wdp[data-wd-page="finance"] .wdp-tile.is-in .wdf-reach__five{animation:wdfFive 9s ease infinite}
.wdp[data-wd-page="finance"] .wdp-tile.is-in .wdf-reach__list{animation:wdfListFade 9s ease infinite}
.wdp[data-wd-page="finance"] .wdp-tile.is-in .wdf-reach__res{animation:wdfDrop 9s var(--ease) infinite}
.wdp[data-wd-page="finance"] .wdp-tile.is-in .wdf-reach__res.wdf-reach__you{animation:wdfClimb 9s var(--ease) infinite}
@keyframes wdfQuery{0%,4%{transform:scaleX(0)}20%,92%{transform:scaleX(1)}97%,100%{transform:scaleX(0)}}
@keyframes wdfScan{0%,8%{transform:translateX(-110%)}32%,100%{transform:translateX(290%)}}
@keyframes wdfFive{0%,30%,48%,100%{box-shadow:0 0 0 0 rgba(255,122,107,0)}35%,43%{box-shadow:0 0 0 4px rgba(255,122,107,.14);background:rgba(255,122,107,.2)}}
@keyframes wdfListFade{0%{opacity:0}4%,90%{opacity:1}95%,100%{opacity:0}}
@keyframes wdfDrop{0%,40%{transform:translateY(calc(-1 * (var(--gh) + var(--g))))}60%,96%{transform:none}97%,100%{transform:translateY(calc(-1 * (var(--gh) + var(--g))))}}
@keyframes wdfClimb{0%,40%{transform:translateY(var(--down));opacity:.5;box-shadow:none}60%,96%{transform:none;opacity:1}
  97%,100%{transform:translateY(var(--down));opacity:.5;box-shadow:none}}

/* ==========================================================================
   S4: the Sterling Wealth mock (the shared .wdp-site__* parts, plus a team
   with credentials and a resource hub)
   ========================================================================== */
/* the nav keeps its links (they are this page's copy); on a narrow mock they
   take a row of their own */
.wdp[data-wd-page="finance"] .wdf-site .wdf-site__links{display:flex}
.wdp[data-wd-page="finance"] .wdf-site .wdp-site__nav{flex-wrap:wrap;row-gap:8px}
.wdp[data-wd-page="finance"] .wdf-site__svc i{display:grid;place-items:center;color:var(--gold)}
.wdp[data-wd-page="finance"] .wdf-site__svc i svg{display:block;width:10px;height:10px}
.wdp[data-wd-page="finance"] .wdf-site__svc span::after{content:"";display:block;width:68%;height:4px;border-radius:2px;background:rgba(255,255,255,.09)}
.wdp[data-wd-page="finance"] .wdf-site__team{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
.wdp[data-wd-page="finance"] .wdf-site__pp{display:grid;grid-template-columns:18px minmax(0,1fr);column-gap:7px;row-gap:1px;align-items:center;padding:6px 8px;
  border-radius:9px;border:1px solid var(--edge);background:rgba(255,255,255,.02)}
.wdp[data-wd-page="finance"] .wdf-site__pp:first-child{border-color:var(--gold-line);background:var(--gold-soft)}
.wdp[data-wd-page="finance"] .wdf-site__av{grid-row:span 2;display:block;width:18px;height:18px;border-radius:50%;
  background:radial-gradient(circle at 50% 36%,rgba(255,255,255,.5) 0 21%,transparent 22%),radial-gradient(circle at 50% 108%,rgba(255,255,255,.36) 0 44%,transparent 45%),
    linear-gradient(135deg,rgba(79,191,160,.45),rgba(244,160,0,.3))}
.wdp[data-wd-page="finance"] .wdf-site__pp b{font-size:10.5px;font-weight:600;line-height:1.2;color:var(--text-soft);white-space:nowrap}
.wdp[data-wd-page="finance"] .wdf-site__pp em{font-style:normal;font-size:10px;line-height:1.2;color:var(--gold);white-space:nowrap}
.wdp[data-wd-page="finance"] .wdf-site__more{grid-column:1 / -1;justify-self:end;font-size:10.5px;color:var(--text-dim)}
.wdp[data-wd-page="finance"] .wdf-site__hub{display:grid;grid-template-columns:repeat(3,minmax(0,1fr)) auto;gap:6px;padding:10px 16px;border-top:1px solid var(--edge)}
.wdp[data-wd-page="finance"] .wdf-site__read{display:flex;align-items:center;gap:7px;padding:7px 9px;border-radius:9px;border:1px solid var(--edge);
  background:rgba(255,255,255,.02);color:var(--text-soft);font-size:10.5px;font-weight:600;line-height:1.25}
.wdp[data-wd-page="finance"] .wdf-site__read svg{flex:0 0 auto;color:var(--gold)}
.wdp[data-wd-page="finance"] .wdf-site__book{display:grid;place-items:center;padding:0 12px;border-radius:9px;background:var(--gold);color:#111;font-size:11px;font-weight:700;white-space:nowrap}
@container (max-width:470px){
  .wdp[data-wd-page="finance"] .wdf-site .wdf-site__links{order:3;flex-basis:100%;margin-left:0}
  .wdp[data-wd-page="finance"] .wdf-site .wdp-site__cta{margin-left:auto}
  .wdp[data-wd-page="finance"] .wdf-site__svc span::after{display:none}
  .wdp[data-wd-page="finance"] .wdf-site__team{grid-template-columns:repeat(2,minmax(0,1fr))}
  .wdp[data-wd-page="finance"] .wdf-site__pp{padding:5px 8px}
  .wdp[data-wd-page="finance"] .wdf-site__hub{grid-template-columns:repeat(2,minmax(0,1fr));padding:9px 12px}
  .wdp[data-wd-page="finance"] .wdf-site__book{padding:7px 12px}
}

/* ==========================================================================
   S5: the approach visuals
   ========================================================================== */
.wdp[data-wd-page="finance"] .wdf-panel__note{display:flex;align-items:center;gap:10px;padding:12px 18px;border-top:1px solid var(--edge);
  background:rgba(255,255,255,.02);font-size:13px;line-height:1.45;color:var(--text-mid)}
.wdp[data-wd-page="finance"] .wdf-panel__note::before{content:"";flex:0 0 auto;width:7px;height:7px;border-radius:2px;transform:rotate(45deg);background:var(--gold);
  box-shadow:0 0 10px rgba(244,160,0,.6)}
.wdp[data-wd-page="finance"] .wdp-vis .wdf-panel__note{transition:opacity .6s .5s var(--ease),transform .7s .5s var(--ease)}
.wdp[data-wd-page="finance"] .wdp-vis:not(.is-on) .wdf-panel__note{opacity:0;transform:translateY(8px)}

/* rank: type and real photography speak first; layout guides show the
   measure, then fade */
.wdp[data-wd-page="finance"] .wdf-rank__hero{position:relative;display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:16px;align-items:center;padding:20px 18px 12px}
.wdp[data-wd-page="finance"] .wdf-rank__h{font-family:var(--font-head);font-weight:800;font-size:25px;line-height:1.06;letter-spacing:-.035em;color:var(--text)}
.wdp[data-wd-page="finance"] .wdf-rank__h em{display:block;font-style:normal;color:var(--gold)}
.wdp[data-wd-page="finance"] .wdf-rank__btn{display:block;width:96px;height:20px;margin-top:14px;border-radius:10px;background:var(--gold);box-shadow:0 0 16px rgba(244,160,0,.35)}
.wdp[data-wd-page="finance"] .wdf-rank__photo{position:relative;display:flex;align-items:flex-end;justify-content:center;gap:7px;height:96px;padding:0 12px;border-radius:12px;
  overflow:hidden;border:1px solid var(--edge);
  background:radial-gradient(90% 80% at 72% 0%,rgba(244,160,0,.22),transparent 70%),linear-gradient(160deg,rgba(79,191,160,.24),rgba(12,14,18,.9))}
.wdp[data-wd-page="finance"] .wdf-rank__photo i{position:relative;display:block;width:24%;border-radius:22px 22px 4px 4px;background:rgba(255,255,255,.22)}
.wdp[data-wd-page="finance"] .wdf-rank__photo i::before{content:"";position:absolute;left:50%;bottom:calc(100% + 4px);width:60%;aspect-ratio:1;border-radius:50%;
  transform:translateX(-50%);background:rgba(255,255,255,.32)}
.wdp[data-wd-page="finance"] .wdf-rank__photo i:nth-child(1){height:36%}
.wdp[data-wd-page="finance"] .wdf-rank__photo i:nth-child(2){height:48%}
.wdp[data-wd-page="finance"] .wdf-rank__photo i:nth-child(3){height:32%}
.wdp[data-wd-page="finance"] .wdf-rank__grid{position:absolute;inset:12px 10px 6px;pointer-events:none;opacity:0;border-inline:1px solid rgba(244,160,0,.45);
  background:linear-gradient(90deg,transparent calc(54.5% - .5px),rgba(244,160,0,.4) calc(54.5% - .5px) calc(54.5% + .5px),transparent calc(54.5% + .5px)),
    repeating-linear-gradient(180deg,transparent 0 13px,rgba(244,160,0,.16) 13px 14px)}
.wdp[data-wd-page="finance"] .wdp-vis.is-on .wdf-rank__grid{animation:wdfGuides 3.6s .5s ease both}
.wdp[data-wd-page="finance"] .wdp-vis.is-on .wdf-rank__h{animation:wdfTrack 1.4s .2s var(--ease) both}
.wdp[data-wd-page="finance"] .wdp-vis.is-on .wdf-rank__photo i{animation:wdfFocus 1.6s .4s ease both}
@keyframes wdfGuides{0%{opacity:0}28%,58%{opacity:1}100%{opacity:0}}
@keyframes wdfTrack{from{letter-spacing:.03em;opacity:.3}}
@keyframes wdfFocus{from{filter:blur(4px);opacity:.4}}

/* convert: a page under review. The claim is struck, the warning kept
   clear, the compliance pass stamped; the bar's steps fill draft to live */
.wdp[data-wd-page="finance"] .wdf-steps{flex:0 0 auto;display:inline-flex;gap:4px;margin-left:auto}
.wdp[data-wd-page="finance"] .wdf-steps i{display:block;width:16px;height:4px;border-radius:2px;background:var(--gold)}
.wdp[data-wd-page="finance"] .wdf-steps i:last-child{background:var(--teal)}
.wdp[data-wd-page="finance"] .wdp-vis.is-on .wdf-steps i{animation:wdfStep .5s ease both}
.wdp[data-wd-page="finance"] .wdp-vis.is-on .wdf-steps i:nth-child(1){animation-delay:.4s}
.wdp[data-wd-page="finance"] .wdp-vis.is-on .wdf-steps i:nth-child(2){animation-delay:1.1s}
.wdp[data-wd-page="finance"] .wdp-vis.is-on .wdf-steps i:nth-child(3){animation-delay:1.8s}
@keyframes wdfStep{from{background:rgba(255,255,255,.12)}}
.wdp[data-wd-page="finance"] .wdf-rv{justify-content:flex-start}
.wdp[data-wd-page="finance"] .wdf-rv > span{flex:1 1 auto;min-width:0}
.wdp[data-wd-page="finance"] .wdf-rv__m{flex:0 0 auto;display:grid;place-items:center;width:22px;height:22px;border-radius:7px;font-style:normal;font-size:12px;font-weight:800;line-height:1}
.wdp[data-wd-page="finance"] .wdf-rv--no .wdf-rv__m{color:var(--coral);background:var(--coral-soft)}
.wdp[data-wd-page="finance"] .wdf-rv--ok .wdf-rv__m{color:var(--teal);background:var(--teal-soft)}
.wdp[data-wd-page="finance"] .wdf-rv--pass .wdf-rv__m{color:var(--gold);background:var(--gold-soft)}
.wdp[data-wd-page="finance"] .wdf-rv s{text-decoration:none;color:var(--text-dim);
  background:linear-gradient(var(--coral),var(--coral)) no-repeat 0 56%/100% 1.5px;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.wdp[data-wd-page="finance"] .wdf-rv b.is-coral{background:var(--coral-soft);color:var(--coral)}
.wdp[data-wd-page="finance"] .wdp-vis.is-on .wdf-rv s{animation:wdfStrike .8s 1s var(--ease) both}
.wdp[data-wd-page="finance"] .wdp-vis.is-on .wdf-rv--pass b{animation:wdfStamp .55s 1.6s var(--ease) both}
@keyframes wdfStrike{from{background-size:0 1.5px}}
@keyframes wdfStamp{from{opacity:0;transform:scale(1.45) rotate(-5deg)}}

/* grow: each credential chained to the place it shows; the links draw in */
.wdp[data-wd-page="finance"] .wdf-chain{padding-top:4px}
.wdp[data-wd-page="finance"] .wdf-chain .wdp-flow__dot{display:grid;place-items:center;color:var(--gold)}
.wdp[data-wd-page="finance"] .wdf-chain .wdp-flow__dot svg{display:block;width:10px;height:10px}
.wdp[data-wd-page="finance"] .wdf-chain li:last-child .wdp-flow__dot{color:#0A1512}
.wdp[data-wd-page="finance"] .wdf-chain li + li::before{transform-origin:top}
.wdp[data-wd-page="finance"] .wdp-vis.is-on .wdf-chain li + li::before{animation:wdfLink .7s var(--ease) both}
.wdp[data-wd-page="finance"] .wdp-vis.is-on .wdf-chain li:nth-child(2)::before{animation-delay:.35s}
.wdp[data-wd-page="finance"] .wdp-vis.is-on .wdf-chain li:nth-child(3)::before{animation-delay:.6s}
.wdp[data-wd-page="finance"] .wdp-vis.is-on .wdf-chain li:last-child b{animation:wdfLinked 3.2s 1.4s ease-in-out infinite}
@keyframes wdfLink{from{transform:scaleY(0)}}
@keyframes wdfLinked{0%,100%{box-shadow:0 0 0 0 rgba(79,191,160,0)}50%{box-shadow:0 0 0 4px rgba(79,191,160,.14)}}

/* ==========================================================================
   Phones
   ========================================================================== */
@media (max-width:700px){
  /* S3: each scene fits a 286px card, 200px tall at most */
  .wdp[data-wd-page="finance"] .wdf-bar{padding:9px 12px;gap:10px}
  .wdp[data-wd-page="finance"] .wdf-foot{padding:9px 12px}
  .wdp[data-wd-page="finance"] .wdf-tag{padding:3px 8px;font-size:10.5px;letter-spacing:.06em}
  .wdp[data-wd-page="finance"] .wdf-fine__view{height:120px;padding:11px 26px 0 12px}
  .wdp[data-wd-page="finance"] .wdf-fine__warn{font-size:12.5px}
  .wdp[data-wd-page="finance"] .wdf-fine__lines{height:22px}
  .wdp[data-wd-page="finance"] .wdf-fine__scroll{right:10px}
  .wdp[data-wd-page="finance"] .wdf-twin{--tw:16px;gap:12px;padding:14px 12px}
  .wdp[data-wd-page="finance"] .wdf-twin__row{grid-template-columns:minmax(0,1fr) 20px minmax(0,1fr);gap:6px}
  .wdp[data-wd-page="finance"] .wdf-twin__eq{width:20px;height:20px}
  .wdp[data-wd-page="finance"] .wdf-twin__eq::before,.wdp[data-wd-page="finance"] .wdf-twin__eq::after{left:5px;right:5px;top:7px}
  .wdp[data-wd-page="finance"] .wdf-twin__eq::after{top:11px}
  .wdp[data-wd-page="finance"] .wdf-twin__card{padding:9px 9px 10px;gap:6px}
  .wdp[data-wd-page="finance"] .wdf-twin__img{height:20px}
  .wdp[data-wd-page="finance"] .wdf-twin__q{font-size:12.5px}
  .wdp[data-wd-page="finance"] .wdf-dig__body{grid-template-columns:72px minmax(0,1fr);gap:12px;padding:12px}
  .wdp[data-wd-page="finance"] .wdf-dig__page{--l1:30px;--l2:89px;height:124px;padding:8px 7px 7px;gap:5px}
  .wdp[data-wd-page="finance"] .wdf-dig__lens{width:34px;height:34px;margin-left:-17px}
  .wdp[data-wd-page="finance"] .wdf-dig__finds{gap:7px}
  .wdp[data-wd-page="finance"] .wdf-dig__find{gap:6px;padding:8px 10px}
  .wdp[data-wd-page="finance"] .wdf-dig__find .wdf-tag{margin-left:0}
  .wdp[data-wd-page="finance"] .wdf-dig__what{gap:7px}
  .wdp[data-wd-page="finance"] .wdf-dig__ic{width:16px;height:16px;border-radius:5px}
  .wdp[data-wd-page="finance"] .wdf-dig__ic--fine{background-position:3px 10px,3px 6px}
  .wdp[data-wd-page="finance"] .wdf-reach__body{grid-template-columns:minmax(0,1fr);gap:8px;padding:9px 12px 10px}
  .wdp[data-wd-page="finance"] .wdf-reach__site{padding:6px}
  .wdp[data-wd-page="finance"] .wdf-reach__pages{gap:5px}
  .wdp[data-wd-page="finance"] .wdf-reach__pages span{padding:3px 7px}
  .wdp[data-wd-page="finance"] .wdf-reach__pages span i{display:none}
  .wdp[data-wd-page="finance"] .wdf-reach__q,.wdp[data-wd-page="finance"] .wdf-reach__res--2{display:none}
  .wdp[data-wd-page="finance"] .wdf-reach__list{--oh:24px;--gh:46px;--down:calc(var(--oh) + var(--g));height:calc(var(--oh) + var(--gh) + var(--g))}
  .wdp[data-wd-page="finance"] .wdf-reach__res.wdf-reach__you{flex-direction:column;align-items:flex-start;justify-content:center;gap:5px;padding:0 10px}
  .wdp[data-wd-page="finance"] .wdf-reach__url{font-size:12px}

  /* S4: the mock stays short beside its part card */
  .wdp[data-wd-page="finance"] .wdf-site__hub{padding:8px 12px}
  .wdp[data-wd-page="finance"] .wdf-site__team{padding-top:8px;padding-bottom:8px}

  /* S5: the stage is short, so the visuals tighten */
  .wdp[data-wd-page="finance"] .wdp-story__stage .wdf-rank__hero{grid-template-columns:minmax(0,1fr) 96px;gap:12px;padding:14px 14px 8px}
  .wdp[data-wd-page="finance"] .wdp-story__stage .wdf-rank__h{font-size:20px}
  .wdp[data-wd-page="finance"] .wdp-story__stage .wdf-rank__btn{margin-top:10px;height:16px;width:80px}
  .wdp[data-wd-page="finance"] .wdp-story__stage .wdf-rank__photo{height:72px}
  .wdp[data-wd-page="finance"] .wdp-story__stage .wdp-panel__title{padding:12px 14px 2px;font-size:18px}
  .wdp[data-wd-page="finance"] .wdp-story__stage .wdp-panel__rows{padding:2px 8px 6px}
  .wdp[data-wd-page="finance"] .wdp-story__stage .wdp-panel__row{padding:9px 6px}
  .wdp[data-wd-page="finance"] .wdp-story__stage .wdf-chain{padding:2px 14px 8px}
  .wdp[data-wd-page="finance"] .wdp-story__stage .wdf-chain li{padding:9px 0}
  .wdp[data-wd-page="finance"] .wdp-story__stage .wdf-chain li + li::before{top:-9px;height:18px}
  .wdp[data-wd-page="finance"] .wdf-panel__note{padding:10px 14px;font-size:12.5px}
}

@media (prefers-reduced-motion:reduce){
  .wdp[data-wd-page="finance"] [class*="wdf-"],.wdp[data-wd-page="finance"] [class*="wdf-"]::before,.wdp[data-wd-page="finance"] [class*="wdf-"]::after,
  .wdp[data-wd-page="finance"] [class*="wdf-"] i{animation:none!important;transition:none!important}
}