/* ==========================================================================
   /industries/seo-for-finance: this page's own pictures
   (industries/seo/finance/*.blade.php). Loaded after ind-seox.css.
   Every rule is scoped to the page. Everything rests in its finished state
   without JS and under reduced motion; loops pause off screen (ind-wdp).
   ========================================================================== */

/* ---- why it matters, the competition: a keyword skyline ---- */
main[data-seo-page="finance"] .sxw--sky{display:grid;gap:12px;padding:20px 20px 16px}
main[data-seo-page="finance"] .sxw-sky__k{font-weight:600;color:var(--text-soft)}
main[data-seo-page="finance"] .sxw-sky__city{position:relative}
main[data-seo-page="finance"] .sxw-sky__city svg{display:block;width:100%;height:auto;aspect-ratio:520 / 224;overflow:visible}
main[data-seo-page="finance"] .sxw-sky__wall{fill:#171A20;stroke:rgba(255,255,255,.1);stroke-width:1}
main[data-seo-page="finance"] #sxf-sky-win rect{fill:rgba(255,255,255,.075)}
main[data-seo-page="finance"] .sxw-sky__wins{fill:url(#sxf-sky-win)}
main[data-seo-page="finance"] .sxw-sky__lit{fill:rgba(255,122,107,.8)}
main[data-seo-page="finance"] .sxw-sky__roof{fill:#1B1F27;stroke:rgba(255,122,107,.55);stroke-width:1.2;stroke-linejoin:round}
main[data-seo-page="finance"] .sxw-sky__cols{stroke:rgba(255,122,107,.5);stroke-width:2.2;stroke-linecap:round}
main[data-seo-page="finance"] .sxw-sky__mast{stroke:rgba(255,255,255,.3);stroke-width:1.5}
main[data-seo-page="finance"] .sxw-sky__beacon{fill:var(--coral)}
main[data-seo-page="finance"] .sxw-sky__wall.is-you{fill:#1E1A10;stroke:var(--gold-line)}
main[data-seo-page="finance"] .sxw-sky__gold{fill:var(--gold)}
main[data-seo-page="finance"] .sxw-sky__demand{fill:none;stroke:rgba(255,255,255,.3);stroke-width:1.4;stroke-dasharray:4 5}
main[data-seo-page="finance"] .sxw-sky__ground{stroke:rgba(255,255,255,.2);stroke-width:1.5}
main[data-seo-page="finance"] .sxw-sky__q{position:absolute;padding:3px 10px;border-radius:100px;font-size:11.5px;font-weight:700;line-height:1.5;white-space:nowrap}
main[data-seo-page="finance"] .sxw-sky__q.is-them{left:30%;top:4%;background:var(--coral-soft);color:var(--coral);border:1px solid var(--coral-line)}
main[data-seo-page="finance"] .sxw-sky__q.is-you{right:3%;top:50%;background:var(--gold-soft);color:var(--gold);border:1px solid var(--gold-line)}
main[data-seo-page="finance"] .sxw-sky__legend{display:flex;flex-wrap:wrap;gap:6px 18px;font-size:12px;color:var(--text-dim)}
main[data-seo-page="finance"] .sxw-sky__legend span{display:inline-flex;align-items:center;gap:7px}
main[data-seo-page="finance"] .sxw-sky__legend i{width:10px;height:10px;border-radius:3px}
main[data-seo-page="finance"] .sxw-sky__legend .is-them i{background:var(--coral)}
main[data-seo-page="finance"] .sxw-sky__legend .is-you i{background:var(--gold)}
/* the city rises tower by tower; then the demand runs down the long tail and your windows answer */
main[data-seo-page="finance"] .sx-card :is(.sxw-sky__tower,.sxw-sky__shop){transform-box:fill-box;transform-origin:50% 100%;transition:transform .8s var(--ease);transition-delay:calc(var(--i) * .07s + .25s)}
main[data-seo-page="finance"] .sx-card .sxw-sky__shop{transition-delay:calc(var(--i) * .07s + .6s)}
html.el8-js main[data-seo-page="finance"] .sx-card:not(.is-in) :is(.sxw-sky__tower,.sxw-sky__shop){transform:scaleY(0)}
main[data-seo-page="finance"] .sx-card.is-in .sxw-sky__demand{animation:sxfDemand 2.4s linear infinite}
@keyframes sxfDemand{to{stroke-dashoffset:-18}}
main[data-seo-page="finance"] .sx-card.is-in .sxw-sky__gold{animation:sxfWin 5s ease infinite;animation-delay:calc(var(--n) * .14s + 1.6s)}
@keyframes sxfWin{0%,52%,100%{opacity:1}64%{opacity:.3}}
main[data-seo-page="finance"] .sx-card.is-in .sxw-sky__beacon{animation:sxBlink 1.8s steps(2) infinite}

/* ---- the trade-off: a trading chart; search plus ads trends up, ads alone stop with the budget ---- */
main[data-seo-page="finance"] .sxvf{height:300px}
main[data-seo-page="finance"] .sxvf svg{top:0;bottom:0;height:100%;clip-path:none;transition:none}
main[data-seo-page="finance"] .sxvf-grid line{stroke:rgba(255,255,255,.05);vector-effect:non-scaling-stroke}
main[data-seo-page="finance"] .sxvf-grid .sxvf-split{stroke:rgba(255,255,255,.1)}
main[data-seo-page="finance"] .sxvf-wick{stroke:var(--gold);stroke-width:1.5;vector-effect:non-scaling-stroke}
main[data-seo-page="finance"] .sxvf-body{fill:var(--gold)}
main[data-seo-page="finance"] .sxvf-c.is-down .sxvf-body{fill:#0A0C10;stroke:var(--gold);stroke-width:1.5;vector-effect:non-scaling-stroke}
main[data-seo-page="finance"] .sxvf-c.is-live .sxvf-body{filter:drop-shadow(0 0 6px rgba(244,160,0,.7))}
main[data-seo-page="finance"] .sxvf-last{stroke:var(--gold);stroke-width:1.5;stroke-dasharray:3 5;vector-effect:non-scaling-stroke}
main[data-seo-page="finance"] .sxvf-ad{fill:rgba(255,122,107,.5)}
main[data-seo-page="finance"] .sxvf-ban path{stroke:var(--coral);stroke-width:2;stroke-linecap:round;vector-effect:non-scaling-stroke}
main[data-seo-page="finance"] .sxvf-budget{stroke:var(--coral);stroke-width:1.2;stroke-dasharray:4 4;vector-effect:non-scaling-stroke;opacity:.7}
main[data-seo-page="finance"] .sxvf-flat{fill:none;stroke:var(--coral);stroke-width:2;stroke-dasharray:6 6;vector-effect:non-scaling-stroke}
main[data-seo-page="finance"] .sxvf-base{stroke:rgba(255,122,107,.4);stroke-width:1.5;vector-effect:non-scaling-stroke}
main[data-seo-page="finance"] .sxvf-stop{position:absolute;left:var(--x);top:calc(284 / 300 * 100%);width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;background:var(--coral);box-shadow:0 0 0 4px rgba(255,122,107,.18)}
main[data-seo-page="finance"] .sxvf .sx-vs__tag--own{left:22px;right:auto;top:18px}
main[data-seo-page="finance"] .sxvf .sx-vs__tag--rent{left:auto;right:22px;top:auto;bottom:36px}
main[data-seo-page="finance"] .sxvf :is(.sxvf-c,.sxvf-ad,.sxvf-ban){transform-box:fill-box;transform-origin:50% 100%;transition:opacity .45s ease,transform .7s var(--ease);transition-delay:calc(var(--i) * .08s + .2s)}
main[data-seo-page="finance"] .sxvf :is(.sxvf-last,.sxvf-flat,.sxvf-budget,.sxvf-stop){transition:opacity .5s ease 1.5s}
html.el8-js main[data-seo-page="finance"] .sxvf:not(.is-in) :is(.sxvf-c,.sxvf-ad,.sxvf-ban){opacity:0;transform:scaleY(.2)}
html.el8-js main[data-seo-page="finance"] .sxvf:not(.is-in) :is(.sxvf-last,.sxvf-flat,.sxvf-budget,.sxvf-stop){opacity:0}
main[data-seo-page="finance"] .sxvf.is-in .sxvf-c.is-live .sxvf-body{transform-box:fill-box;transform-origin:50% 100%;animation:sxfTick 2.8s ease-in-out 2.2s infinite}
@keyframes sxfTick{0%,100%{transform:none}30%{transform:scaleY(1.12)}62%{transform:scaleY(.95)}}
main[data-seo-page="finance"] .sxvf.is-in .sxvf-last{animation:sxfLast 2.8s ease-in-out 2.2s infinite}
@keyframes sxfLast{0%,100%{opacity:.9}50%{opacity:.4}}
main[data-seo-page="finance"] .sxvf.is-in .sxvf-stop{animation:sxStop 2s ease 2s infinite}

/* ---- approach pillar 3: the sources that point at the firm ---- */
main[data-seo-page="finance"] .sxvf-web{position:relative;height:150px;border-bottom:1px solid var(--edge);background:#0E1115}
main[data-seo-page="finance"] .sxvf-web__links{position:absolute;inset:0;width:100%;height:100%}
main[data-seo-page="finance"] .sxvf-link{fill:none;stroke:rgba(255,255,255,.16);stroke-width:1.4;stroke-dasharray:3 4}
main[data-seo-page="finance"] .sxvf-pulse{fill:none;stroke:var(--gold);stroke-width:3;stroke-linecap:round;stroke-dasharray:8 120;stroke-dashoffset:8;opacity:0}
main[data-seo-page="finance"] .sxvf-node{position:absolute;left:var(--x);top:var(--y);display:grid;place-items:center;width:42px;height:42px;margin:-21px 0 0 -21px;border-radius:12px;border:1px solid var(--edge-2);background:#171B22;color:var(--teal)}
main[data-seo-page="finance"] :is(.sxvf-node,.sxvf-hub,.sxvf-src) svg{fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
main[data-seo-page="finance"] .sxvf-node svg{width:21px;height:21px}
main[data-seo-page="finance"] .sxvf-hub{position:absolute;left:50%;top:50%;display:grid;place-items:center;width:60px;height:60px;margin:-30px 0 0 -30px;border-radius:50%;background:var(--gold);color:#111;
  box-shadow:0 0 0 7px rgba(244,160,0,.12),0 0 32px rgba(244,160,0,.45)}
main[data-seo-page="finance"] .sxvf-hub svg{position:relative;width:28px;height:28px;stroke-width:1.9}
main[data-seo-page="finance"] .sxvf-hub__ring{position:absolute;inset:0;border-radius:50%;border:1.5px solid var(--gold);opacity:0}
main[data-seo-page="finance"] .sxvf-hub__ring + .sxvf-hub__ring{inset:-16px;border:1px dashed var(--gold-line);opacity:.6}
main[data-seo-page="finance"] .sxvf-src{display:inline-flex;align-items:center;gap:11px}
main[data-seo-page="finance"] .sxvf-src > i{flex:0 0 auto;display:grid;place-items:center;width:28px;height:28px;border-radius:9px;background:rgba(79,191,160,.1);color:var(--teal)}
main[data-seo-page="finance"] .sxvf-src svg{width:17px;height:17px}
/* each source sends its signal in turn; the hub rings as each one lands */
main[data-seo-page="finance"] :is(.wdp-vis.is-on,.wdp-chap__vis) .sxvf-pulse{animation:sxfPulse 4.4s ease-in infinite;animation-delay:calc(var(--i) * 1.1s)}
@keyframes sxfPulse{0%{stroke-dashoffset:8;opacity:1}33%{stroke-dashoffset:-94;opacity:1}36%,100%{stroke-dashoffset:-94;opacity:0}}
main[data-seo-page="finance"] :is(.wdp-vis.is-on,.wdp-chap__vis) .sxvf-node{animation:sxfNode 4.4s ease infinite;animation-delay:calc(var(--i) * 1.1s)}
@keyframes sxfNode{0%,30%,100%{border-color:var(--edge-2);box-shadow:none}7%{border-color:var(--teal-line);box-shadow:0 0 18px -3px rgba(79,191,160,.65)}}
main[data-seo-page="finance"] :is(.wdp-vis.is-on,.wdp-chap__vis) .sxvf-hub__ring:first-child{animation:sxfRing 1.1s ease-out 1.45s infinite}
@keyframes sxfRing{0%{transform:scale(1);opacity:.85}100%{transform:scale(1.8);opacity:0}}
main[data-seo-page="finance"] :is(.wdp-vis.is-on,.wdp-chap__vis) .sxvf-hub__ring + .sxvf-hub__ring{animation:sxfSpin 24s linear infinite}
@keyframes sxfSpin{to{transform:rotate(360deg)}}

@media (max-width:700px){
  main[data-seo-page="finance"] .sxw--sky{padding:14px 14px 12px;gap:10px}
  main[data-seo-page="finance"] .sxw-sky__q{padding:1px 7px;font-size:9.5px}
  main[data-seo-page="finance"] .sxw-sky__q.is-them{top:0}
  main[data-seo-page="finance"] .sxw-sky__legend{font-size:11.5px}
  main[data-seo-page="finance"] .sxvf{height:230px}
  main[data-seo-page="finance"] .sxvf .sx-vs__tag--own{left:12px;top:12px}
  main[data-seo-page="finance"] .sxvf .sx-vs__tag--rent{right:12px;bottom:26px}
  main[data-seo-page="finance"] .sxvf-stop{width:10px;height:10px;margin:-5px 0 0 -5px}
  /* the phone stage is short: like the other pillars it drops the picture above the panel; the rows keep their icons */
  main[data-seo-page="finance"] .sx-appr .wdp-story__stage .sxvf-web{display:none}
  main[data-seo-page="finance"] .sxvf-src{gap:9px}
  main[data-seo-page="finance"] .sxvf-src > i{width:24px;height:24px;border-radius:8px}
  main[data-seo-page="finance"] .sxvf-src svg{width:15px;height:15px}
}