/* ==========================================================================
   DevelopRent - Property Value Partnership (page 1465)
   Every selector is scoped under .pvp so this file cannot reach any other
   page. Scope is a SINGLE class on purpose: it beats the theme's bare tag
   defaults but still loses to Elementor's own per-element rules, so every
   colour, background, padding and margin stays editable from the panel.
   ========================================================================== */

.pvp{
  --ink:#080B12;
  --ink-2:#0D111B;
  --ink-3:#131827;
  --ink-4:#1B2132;
  --line:rgba(255,255,255,.10);
  --line-2:rgba(255,255,255,.16);
  --head:#FFFFFF;
  --txt:#AEB6C6;
  --txt-2:#7F8798;
  --red:#EB2027;
  --red-2:#FF4A51;
  --red-deep:#B3141A;
  --red-wash:rgba(235,32,39,.12);
  --gold:#C9AC74;
  --f-head:"Manrope",ui-sans-serif,system-ui,-apple-system,sans-serif;
  --f-body:"Inter",ui-sans-serif,system-ui,-apple-system,sans-serif;
  --t-display:clamp(2.35rem,1.35rem + 4.1vw,5rem);
  --t-h1:clamp(1.95rem,1.3rem + 2.6vw,3.5rem);
  --t-h2:clamp(1.6rem,1.22rem + 1.6vw,2.6rem);
  --t-h3:clamp(1.15rem,1.04rem + .52vw,1.5rem);
  --t-h4:clamp(1rem,.96rem + .24vw,1.18rem);
  --t-lead:clamp(1.02rem,.96rem + .32vw,1.24rem);
  --t-body:clamp(.96rem,.93rem + .16vw,1.05rem);
  --t-small:clamp(.85rem,.83rem + .1vw,.92rem);
  --t-label:clamp(.66rem,.63rem + .12vw,.76rem);
  --t-num:clamp(2.6rem,1.6rem + 4.2vw,5.6rem);
  --wrap:100%;
  --wrap-narrow:100%;
  --gutter:clamp(20px,3.4vw,58px);
  --section-y:clamp(64px,7vw,132px);
  --r-sm:6px;
  --r-md:12px;
  --r-lg:20px;
  --r-xl:28px;
  --r-pill:999px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --sect-bg:#080B12;
}

.pvp *,.pvp *::before,.pvp *::after{box-sizing:border-box}
.pvp{
  background-color:var(--ink);
  color:var(--txt);
  font-family:var(--f-body);
  font-size:var(--t-body);
  line-height:1.72;
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;
}

/* the theme colours bare tags directly, which would beat the colour Elementor
   writes on a widget wrapper. Let them inherit so the panel wins. */
.pvp p,.pvp li,.pvp span,.pvp b,.pvp strong,.pvp em,.pvp small,.pvp label,.pvp figcaption{color:inherit}
.pvp a{color:inherit;text-decoration:none}
.pvp .elementor-widget,.pvp .elementor-widget-container{color:inherit}
.pvp .elementor-widget-text-editor{color:inherit}
.pvp h1,.pvp h2,.pvp h3,.pvp h4,.pvp h5,.pvp h6{
  color:var(--head);
  font-family:var(--f-head);
  font-weight:800;
  line-height:1.08;
  letter-spacing:-.022em;
  margin:0;
}
.pvp .elementor-widget-heading .elementor-heading-title{color:var(--head);font-family:var(--f-head)}
.pvp p{margin:0 0 1.05em}
.pvp p:last-child{margin-bottom:0}

/* Elementor stacks a default 10px pad and 20px gap on every container, which
   compounds badly four levels deep. Zero them here; the panel still overrides. */
.pvp.e-con,.pvp .e-con,.pvp .e-con-inner{--padding-top:0px;--padding-right:0px;--padding-bottom:0px;--padding-left:0px;--gap:0px}
.pvp .elementor-widget:not(:last-child){margin-bottom:0}

/* ---------- layout rails ---------- */
.pvp .sect{position:relative;width:100%;padding-block:var(--section-y);overflow:clip}
.pvp .wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gutter);position:relative;z-index:2}
.pvp .wrap--narrow{max-width:var(--wrap-narrow)}
.pvp .stack-2{gap:8px}
.pvp .stack-3{gap:14px}
.pvp .stack-4{gap:22px}
.pvp .stack-5{gap:34px}
.pvp .stack-6{gap:52px}

/* ---------- section head ---------- */
.pvp .eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--f-head);font-size:var(--t-label);font-weight:700;
  letter-spacing:.24em;text-transform:uppercase;color:var(--red-2);
  margin:0 0 18px;
}
.pvp .eyebrow::before{content:"";width:30px;height:2px;background:var(--red);border-radius:2px;flex:0 0 auto}
.pvp .shead{max-width:74ch}
.pvp .shead h2{font-size:var(--t-h2);text-transform:uppercase}
.pvp .lead{font-size:var(--t-lead);line-height:1.66;color:var(--txt)}
.pvp .note{font-size:var(--t-small);color:var(--txt-2)}
.pvp .accent{color:var(--red-2)}
.pvp .ital{font-style:italic;color:#E6EAF2}

/* ---------- surfaces ---------- */
.pvp .card{
  position:relative;
  background:linear-gradient(168deg,rgba(255,255,255,.055),rgba(255,255,255,.015));
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  padding:clamp(22px,2.4vw,34px);
  overflow:hidden;
  isolation:isolate;
  transition:transform .55s var(--ease-out),border-color .45s var(--ease),box-shadow .55s var(--ease-out);
}
.pvp .card::before{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:-1;
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,0%),rgba(235,32,39,.16),transparent 62%);
  opacity:0;transition:opacity .5s var(--ease);
}
.pvp .card:hover{transform:translateY(-6px);border-color:var(--line-2);box-shadow:0 30px 60px -34px rgba(0,0,0,.85)}
.pvp .card:hover::before{opacity:1}
.pvp .card h3{font-size:var(--t-h3);margin-bottom:10px}
.pvp .card h4{font-size:var(--t-h4);margin-bottom:8px}

/* a hairline that lights up on hover, drawn with a gradient border */
.pvp .card--edge::after{
  content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;
  background:linear-gradient(140deg,rgba(235,32,39,.75),rgba(255,255,255,.06) 42%,rgba(201,172,116,.5));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  opacity:0;transition:opacity .5s var(--ease);
}
.pvp .card--edge:hover::after{opacity:1}

/* ---------- buttons ---------- */
.pvp .btn .elementor-button,.pvp a.btn{
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:var(--f-head);font-size:var(--t-small);font-weight:700;
  letter-spacing:.11em;text-transform:uppercase;
  padding:17px 34px;border-radius:var(--r-pill);border:0;
  background:linear-gradient(120deg,var(--red),var(--red-deep));
  color:#fff;overflow:hidden;isolation:isolate;
  box-shadow:0 18px 38px -20px rgba(235,32,39,.9);
  transition:transform .4s var(--ease-out),box-shadow .4s var(--ease-out),filter .4s var(--ease);
}
.pvp .btn .elementor-button::after,.pvp a.btn::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(120deg,var(--red-2),var(--red));
  opacity:0;transition:opacity .4s var(--ease);
}
.pvp .btn .elementor-button:hover,.pvp a.btn:hover{transform:translateY(-3px);box-shadow:0 26px 50px -20px rgba(235,32,39,1)}
.pvp .btn .elementor-button:hover::after,.pvp a.btn:hover::after{opacity:1}
.pvp .btn-ghost .elementor-button{
  background:transparent;border:1px solid var(--line-2);color:var(--head);
  box-shadow:none;
}
.pvp .btn-ghost .elementor-button::after{background:rgba(255,255,255,.08)}
.pvp .btn-ghost .elementor-button:hover{box-shadow:0 20px 40px -26px rgba(0,0,0,.9);border-color:rgba(255,255,255,.34)}
/* Elementor containers default to a column, so the two buttons stacked even
   with room to spare. Its own rule reads --flex-direction, so set that rather
   than fight it: a panel change still overrides this. */
.pvp .btnrow.e-con,.pvp .btnrow{--flex-direction:row;--flex-wrap:wrap;--align-items:center;--gap:14px}
.pvp .btnrow.e-con{display:flex;flex-direction:row;flex-wrap:wrap;gap:14px;align-items:center}
.pvp .btnrow > .elementor-widget{width:auto!important}
/* ==========================================================================
   2. Motion primitives
   Elements are visible by default and only hidden once the script has flagged
   itself on <html>, so a blocked or failed script can never leave the page
   blank. Everything collapses to a plain fade under reduced-motion.
   ========================================================================== */
.pvp .rv,.pvp .rv-l,.pvp .rv-r,.pvp .rv-s,.pvp .rv-c{opacity:1;transform:none}
.pvp-js .pvp .rv{opacity:0;transform:translate3d(0,34px,0)}
.pvp-js .pvp .rv-l{opacity:0;transform:translate3d(-44px,0,0)}
.pvp-js .pvp .rv-r{opacity:0;transform:translate3d(44px,0,0)}
.pvp-js .pvp .rv-s{opacity:0;transform:scale(.93)}
.pvp-js .pvp .rv-c{opacity:0;transform:translate3d(0,22px,0) rotateX(12deg)}
.pvp-js .pvp .rv,.pvp-js .pvp .rv-l,.pvp-js .pvp .rv-r,.pvp-js .pvp .rv-s,.pvp-js .pvp .rv-c{
  transition:opacity .9s var(--ease-out),transform .9s var(--ease-out);
  will-change:opacity,transform;
}
.pvp-js .pvp .rv.is-in,.pvp-js .pvp .rv-l.is-in,.pvp-js .pvp .rv-r.is-in,
.pvp-js .pvp .rv-s.is-in,.pvp-js .pvp .rv-c.is-in{opacity:1;transform:none;will-change:auto}
/* stagger children of a marked group */
.pvp-js .pvp .stag > *{opacity:0;transform:translate3d(0,26px,0);transition:opacity .8s var(--ease-out),transform .8s var(--ease-out)}
.pvp-js .pvp .stag.is-in > *{opacity:1;transform:none}
.pvp-js .pvp .stag.is-in > *:nth-child(1){transition-delay:.04s}
.pvp-js .pvp .stag.is-in > *:nth-child(2){transition-delay:.12s}
.pvp-js .pvp .stag.is-in > *:nth-child(3){transition-delay:.2s}
.pvp-js .pvp .stag.is-in > *:nth-child(4){transition-delay:.28s}
.pvp-js .pvp .stag.is-in > *:nth-child(5){transition-delay:.36s}
.pvp-js .pvp .stag.is-in > *:nth-child(6){transition-delay:.44s}
.pvp-js .pvp .stag.is-in > *:nth-child(7){transition-delay:.52s}
.pvp-js .pvp .stag.is-in > *:nth-child(8){transition-delay:.6s}
.pvp-js .pvp .stag.is-in > *:nth-child(n+9){transition-delay:.68s}

/* word-by-word headline reveal, built by the script */
.pvp .tw{display:inline-block;overflow:hidden;vertical-align:top}
.pvp .tw > i{display:inline-block;font-style:inherit;transform:translateY(105%);transition:transform .95s var(--ease-out)}
.pvp .is-in .tw > i,.pvp .tw.is-in > i{transform:none}

/* reading progress rail */
.pvp-prog{position:fixed;left:0;top:0;height:3px;width:100%;z-index:9999;background:transparent;pointer-events:none}
.pvp-prog i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--red-deep),var(--red),var(--gold));box-shadow:0 0 18px rgba(235,32,39,.75)}

@media (prefers-reduced-motion:reduce){
  .pvp-js .pvp .rv,.pvp-js .pvp .rv-l,.pvp-js .pvp .rv-r,.pvp-js .pvp .rv-s,
  .pvp-js .pvp .rv-c,.pvp-js .pvp .stag > *{transform:none!important;transition-duration:.01ms!important}
  .pvp .tw > i{transform:none!important;transition:none!important}
  .pvp *{animation-duration:.01ms!important;animation-iteration-count:1!important}
}

/* ==========================================================================
   3. Hero
   ========================================================================== */
.pvp .hero{
  position:relative;
  min-height:min(86svh,860px);
  display:flex;align-items:center;
  padding-block:calc(var(--section-y) * .72 + 84px) calc(var(--section-y) * .86);
  background-color:var(--ink);
  background-size:cover;background-position:center;
  overflow:clip;
}
/* the picture the client drops in sits behind a scrim so the type stays legible */
.pvp .hero::before{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    radial-gradient(1100px 620px at 82% 6%,rgba(235,32,39,.22),transparent 62%),
    radial-gradient(900px 560px at 4% 94%,rgba(201,172,116,.13),transparent 60%),
    linear-gradient(96deg,rgba(6,9,15,.97) 0%,rgba(6,9,15,.93) 34%,rgba(6,9,15,.70) 60%,rgba(6,9,15,.88) 100%),
    linear-gradient(180deg,rgba(6,9,15,.72) 0%,rgba(6,9,15,.42) 40%,rgba(6,9,15,.95) 100%);
}
/* slow aurora drift, purely decorative */
.pvp .hero::after{
  content:"";position:absolute;z-index:1;pointer-events:none;
  inset:-30%;
  background:
    conic-gradient(from 0deg at 30% 40%,transparent 0deg,rgba(235,32,39,.16) 70deg,transparent 150deg),
    conic-gradient(from 180deg at 72% 62%,transparent 0deg,rgba(201,172,116,.13) 80deg,transparent 170deg);
  filter:blur(80px);
  animation:pvp-aurora 30s linear infinite;
  opacity:.55;
}
@keyframes pvp-aurora{to{transform:rotate(1turn)}}

.pvp .hero__in{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:clamp(30px,4.6vw,72px);align-items:center}
.pvp .hero__copy{max-width:none}
.pvp .hero h1{font-size:var(--t-display);text-transform:uppercase;letter-spacing:-.03em}
.pvp .hero h1 em{font-style:normal;color:var(--red-2);display:inline-block}
.pvp .hero__kick{
  font-family:var(--f-head);font-size:var(--t-lead);font-weight:600;
  font-style:italic;color:#E9EDF4;
}
.pvp .hero__lead{font-size:var(--t-lead);color:var(--txt)}

/* floating visual with a soft mask and a slow bob */
.pvp .hero__art{position:relative}
.pvp .hero__art .elementor-widget-image img,.pvp .art img{
  width:100%;height:auto;display:block;
  border-radius:var(--r-xl);
  border:1px solid var(--line-2);
  box-shadow:0 60px 110px -50px rgba(0,0,0,.95);
}
.pvp .hero__art::before{
  content:"";position:absolute;inset:-14% -10%;z-index:-1;border-radius:50%;
  background:radial-gradient(closest-side,rgba(235,32,39,.30),transparent 72%);
  filter:blur(46px);
}
.pvp-js .pvp .hero__art{animation:pvp-bob 9s ease-in-out infinite}
@keyframes pvp-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-16px)}}

/* the four-word promise, running as a seamless ticker */
.pvp .ticker{
  position:relative;width:100%;overflow:hidden;
  border-block:1px solid var(--line);
  background:linear-gradient(90deg,rgba(235,32,39,.10),transparent 30%,transparent 70%,rgba(201,172,116,.10));
  padding-block:clamp(14px,1.5vw,22px);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
}
.pvp .ticker h3,.pvp .ticker .elementor-heading-title{
  display:inline-block;white-space:nowrap;
  font-size:clamp(1.05rem,.86rem + .82vw,1.7rem);
  letter-spacing:.2em;text-transform:uppercase;color:var(--head);
  padding-inline:1.2em;
}
.pvp .ticker__run{display:flex;width:max-content}
.pvp-js .pvp .ticker__run{animation:pvp-run 28s linear infinite}
.pvp .ticker:hover .ticker__run{animation-play-state:paused}
@keyframes pvp-run{to{transform:translateX(-50%)}}

/* scroll cue */
.pvp .cue{display:inline-flex;align-items:center;gap:12px;font-size:var(--t-label);letter-spacing:.24em;text-transform:uppercase;color:var(--txt-2)}
.pvp .cue::after{content:"";width:44px;height:1px;background:linear-gradient(90deg,var(--red),transparent);animation:pvp-cue 2.4s var(--ease) infinite}
@keyframes pvp-cue{0%,100%{transform:scaleX(.4);opacity:.5}50%{transform:scaleX(1);opacity:1}}
/* ==========================================================================
   4. Grids and repeating blocks
   ========================================================================== */
.pvp .grid{display:grid;gap:clamp(16px,1.7vw,26px)}
.pvp .g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.pvp .g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.pvp .g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.pvp .split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,4vw,66px);align-items:center}
.pvp .split--wide{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr)}

/* tinted section grounds */
.pvp .sect--raise{background:linear-gradient(180deg,var(--ink) 0%,var(--ink-2) 18%,var(--ink-2) 82%,var(--ink) 100%)}
.pvp .sect--deep{background:var(--ink-3)}
.pvp .sect--line{border-top:1px solid var(--line)}
/* a faint grid plate, adds depth without noise */
.pvp .sect--plate::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.5;
  background-image:linear-gradient(rgba(255,255,255,.028) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.028) 1px,transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(70% 60% at 50% 40%,#000,transparent);
  mask-image:radial-gradient(70% 60% at 50% 40%,#000,transparent);
}

/* ---------- reason list (ticked bullets) ---------- */
.pvp .ticks ul{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.pvp .ticks li{
  position:relative;padding:14px 18px 14px 52px;
  background:rgba(255,255,255,.03);
  border:1px solid var(--line);border-radius:var(--r-md);
  font-size:var(--t-body);
  transition:background .4s var(--ease),border-color .4s var(--ease),transform .4s var(--ease-out);
}
.pvp .ticks li::before{
  content:"";position:absolute;left:18px;top:50%;margin-top:-9px;
  width:18px;height:18px;border-radius:50%;
  background:var(--red-wash);border:1px solid rgba(235,32,39,.55);
}
.pvp .ticks li::after{
  content:"";position:absolute;left:23px;top:50%;margin-top:-4px;
  width:7px;height:4px;border-left:2px solid var(--red-2);border-bottom:2px solid var(--red-2);
  transform:rotate(-45deg);
}
.pvp .ticks li:hover{background:rgba(255,255,255,.06);border-color:var(--line-2);transform:translateX(5px)}
.pvp .ticks--2 ul{grid-template-columns:repeat(2,minmax(0,1fr))}

/* ---------- numbered partner / feature cards ---------- */
.pvp .pcard{position:relative;padding-top:clamp(26px,2.6vw,38px)}
.pvp .pcard .kicker{
  display:block;font-family:var(--f-head);font-size:var(--t-label);font-weight:700;
  letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin-bottom:14px;
}
.pvp .pcard .role{font-style:italic;color:#E6EAF2;font-size:var(--t-small);margin-bottom:12px}
.pvp .pcard::after{
  content:"";position:absolute;left:clamp(22px,2.4vw,34px);right:clamp(22px,2.4vw,34px);top:0;height:2px;
  background:linear-gradient(90deg,var(--red),transparent);
  transform:scaleX(0);transform-origin:left;transition:transform .7s var(--ease-out);
}
.pvp .pcard.is-in::after,.pvp .pcard:hover::after{transform:scaleX(1)}

/* big step numerals */
.pvp .num{
  font-family:var(--f-head);font-size:var(--t-num);font-weight:800;line-height:.86;
  letter-spacing:-.05em;
  color:var(--head);
  background-image:linear-gradient(160deg,#FFFFFF 8%,rgba(255,255,255,.18) 78%);
  -webkit-background-clip:text;background-clip:text;
}
.pvp .num--red{color:var(--red-2);background-image:linear-gradient(160deg,var(--red-2) 5%,rgba(235,32,39,.16) 82%);-webkit-background-clip:text;background-clip:text}

/* ---------- the journey chain ---------- */
.pvp .chain{
  display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:center;
  padding:clamp(18px,2vw,26px);
  border:1px dashed rgba(255,255,255,.18);border-radius:var(--r-lg);
  background:rgba(255,255,255,.02);
}
.pvp .chain span{
  font-family:var(--f-head);font-size:var(--t-small);font-weight:600;
  color:var(--txt-2);padding:8px 14px;border-radius:var(--r-pill);
  background:rgba(255,255,255,.04);border:1px solid var(--line);white-space:nowrap;
}

/* ---------- vertical flow with a line that draws in ---------- */
.pvp .flow{position:relative;display:grid;gap:0;padding-left:clamp(28px,4vw,54px)}
.pvp .flow::before{
  content:"";position:absolute;left:clamp(9px,1.4vw,18px);top:6px;bottom:6px;width:2px;
  background:linear-gradient(180deg,var(--red),rgba(235,32,39,.35) 45%,rgba(201,172,116,.5));
  transform:scaleY(0);transform-origin:top;
  transition:transform 1.6s var(--ease-out);
}
.pvp .flow.is-in::before{transform:scaleY(1)}
.pvp .flow > *{position:relative;padding-block:clamp(13px,1.5vw,20px)}
.pvp .flow > *::before{
  content:"";position:absolute;left:calc(-1 * clamp(28px,4vw,54px) + clamp(3px,.9vw,12px));top:calc(50% - 7px);
  width:14px;height:14px;border-radius:50%;
  background:var(--sect-bg);border:2px solid var(--red);
  box-shadow:0 0 0 5px rgba(235,32,39,.14);
  transition:transform .45s var(--ease-out),box-shadow .45s var(--ease);
}
.pvp .flow > *:hover::before{transform:scale(1.34);box-shadow:0 0 0 9px rgba(235,32,39,.2)}
.pvp .flow h3,.pvp .flow .elementor-heading-title{font-size:var(--t-h4);text-transform:uppercase;letter-spacing:.04em}

/* ---------- numbered how-it-works steps ---------- */
.pvp .step{
  position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);
  gap:clamp(20px,3vw,46px);align-items:start;
  padding-block:clamp(30px,3.4vw,54px);
  border-top:1px solid var(--line);
}
.pvp .step:first-child{border-top:0}
.pvp .step__n{min-width:clamp(78px,8vw,150px)}
.pvp .step h3,.pvp .step .elementor-heading-title{font-size:var(--t-h3);text-transform:uppercase;letter-spacing:.01em}
.pvp .step::after{
  content:"";position:absolute;left:0;right:0;top:-1px;height:1px;
  background:linear-gradient(90deg,var(--red),transparent 46%);
  transform:scaleX(0);transform-origin:left;transition:transform .9s var(--ease-out);
}
.pvp .step.is-in::after{transform:scaleX(1)}

/* ---------- before / after comparison ---------- */
.pvp .ba{
  position:relative;width:100%;border-radius:var(--r-xl);overflow:hidden;
  border:1px solid var(--line-2);
  box-shadow:0 60px 110px -56px rgba(0,0,0,.95);
  touch-action:pan-y;
  cursor:ew-resize;
  isolation:isolate;
}
.pvp .ba .elementor-widget-image{margin:0}
.pvp .ba img{display:block;width:100%;height:auto}
/* the second image is clipped to the handle position */
.pvp .ba .ba-after{position:absolute;inset:0;z-index:2;clip-path:inset(0 0 0 var(--ba,50%))}
.pvp .ba .ba-after img{height:100%;object-fit:cover}
.pvp .ba__bar{
  position:absolute;top:0;bottom:0;left:var(--ba,50%);width:2px;z-index:4;
  background:linear-gradient(180deg,transparent,var(--red),transparent);
  pointer-events:none;
}
.pvp .ba__grip{
  position:absolute;top:50%;left:var(--ba,50%);z-index:5;
  width:52px;height:52px;margin:-26px 0 0 -26px;border-radius:50%;
  background:rgba(8,11,18,.78);border:1px solid var(--red);
  backdrop-filter:blur(6px);
  display:grid;place-items:center;pointer-events:none;
  box-shadow:0 0 30px rgba(235,32,39,.55);
}
.pvp .ba__grip::before,.pvp .ba__grip::after{
  content:"";position:absolute;width:7px;height:7px;
  border-top:2px solid var(--red-2);border-right:2px solid var(--red-2);
}
.pvp .ba__grip::before{transform:rotate(-135deg) translate(-4px,-4px)}
.pvp .ba__grip::after{transform:rotate(45deg) translate(-4px,-4px)}
.pvp .ba__tag{
  position:absolute;z-index:6;top:16px;
  font-family:var(--f-head);font-size:var(--t-label);font-weight:700;
  letter-spacing:.2em;text-transform:uppercase;
  padding:7px 14px;border-radius:var(--r-pill);
  background:rgba(8,11,18,.72);border:1px solid var(--line-2);color:#fff;
  pointer-events:none;
}
.pvp .ba__tag--l{left:16px}
.pvp .ba__tag--r{right:16px}
/* ==========================================================================
   5. Principle ladder, FAQ, CTA, video
   ========================================================================== */
.pvp .ladder{display:grid;gap:0;max-width:62ch;margin-inline:auto;text-align:center}
.pvp .ladder > *{position:relative;padding-block:clamp(16px,1.9vw,26px)}
.pvp .ladder > * + *::before{
  content:"";position:absolute;left:50%;top:-14px;width:1px;height:26px;margin-left:-.5px;
  background:linear-gradient(180deg,transparent,var(--red));
}
.pvp .ladder > * + *::after{
  content:"";position:absolute;left:50%;top:8px;width:7px;height:7px;margin-left:-3.5px;
  border-right:2px solid var(--red);border-bottom:2px solid var(--red);transform:rotate(45deg);
}
.pvp .ladder .elementor-widget-text-editor,.pvp .ladder .elementor-heading-title{
  font-family:var(--f-head);font-size:var(--t-h4);font-style:italic;
  font-weight:600;color:#E9EDF4;
}
.pvp .ladder p{margin:0}

/* ---------- transparency checklist ---------- */
.pvp .checks ul{list-style:none;margin:0;padding:0;display:grid;gap:10px;grid-template-columns:repeat(2,minmax(0,1fr))}
.pvp .checks li{
  position:relative;padding-left:30px;font-size:var(--t-body);
  transition:color .35s var(--ease),transform .35s var(--ease-out);
}
.pvp .checks li::before{
  content:"";position:absolute;left:4px;top:.62em;width:8px;height:8px;border-radius:2px;
  background:var(--red);transform:rotate(45deg);
  box-shadow:0 0 14px rgba(235,32,39,.6);
}
.pvp .checks li:hover{color:var(--head);transform:translateX(4px)}

/* ---------- FAQ accordion ---------- */
.pvp .faq{display:grid;gap:12px;max-width:var(--wrap-narrow);margin-inline:auto}
.pvp .qa{
  border:1px solid var(--line);border-radius:var(--r-md);
  background:rgba(255,255,255,.028);overflow:hidden;
  transition:border-color .4s var(--ease),background .4s var(--ease);
}
.pvp .qa:hover{border-color:var(--line-2);background:rgba(255,255,255,.05)}
.pvp .qa.is-open{border-color:rgba(235,32,39,.48);background:rgba(235,32,39,.05)}
.pvp .qa > .elementor-widget-heading,.pvp .qa .qa__q{
  margin:0;cursor:pointer;position:relative;
}
.pvp .qa .qa__q .elementor-heading-title,.pvp .qa .qa__q h3{
  display:block;font-size:var(--t-h4);color:var(--head);
  padding:20px 58px 20px 22px;margin:0;line-height:1.45;letter-spacing:-.01em;
  transition:color .35s var(--ease);
}
.pvp .qa.is-open .qa__q .elementor-heading-title{color:var(--red-2)}
.pvp .qa__q::after,.pvp .qa__q::before{
  content:"";position:absolute;right:24px;top:50%;background:var(--red-2);
  transition:transform .45s var(--ease-out),opacity .35s var(--ease);
}
.pvp .qa__q::before{width:14px;height:2px;margin-top:-1px}
.pvp .qa__q::after{width:2px;height:14px;margin:-7px 6px 0 0}
.pvp .qa.is-open .qa__q::after{transform:rotate(90deg);opacity:0}
.pvp .qa__a{
  max-height:0;opacity:0;overflow:hidden;
  transition:max-height .55s var(--ease-out),opacity .45s var(--ease),padding .5s var(--ease-out);
  padding:0 22px;
}
.pvp .qa.is-open .qa__a{opacity:1;padding:0 22px 22px}
.pvp .qa__a p{color:var(--txt)}

/* ---------- audience / CTA cards ---------- */
.pvp .cta-card{
  display:flex;flex-direction:column;gap:14px;
  padding:clamp(26px,2.8vw,40px);
  border-radius:var(--r-lg);border:1px solid var(--line);
  background:linear-gradient(170deg,rgba(255,255,255,.06),rgba(255,255,255,.015));
  transition:transform .5s var(--ease-out),border-color .45s var(--ease),box-shadow .5s var(--ease-out);
}
.pvp .cta-card:hover{transform:translateY(-7px);border-color:rgba(235,32,39,.5);box-shadow:0 34px 66px -36px rgba(235,32,39,.55)}
.pvp .cta-card h3,.pvp .cta-card .elementor-heading-title{font-size:var(--t-h4);text-transform:uppercase;letter-spacing:.09em}

/* the closing banner */
.pvp .finale{
  position:relative;text-align:center;
  padding-block:clamp(72px,8vw,150px);
  background-color:#0B0710;
  background-image:linear-gradient(160deg,rgba(235,32,39,.10) 0%,transparent 48%,rgba(80,110,190,.07) 100%);
  overflow:clip;
}
.pvp .finale::before{
  content:"";position:absolute;inset:-40% -10%;pointer-events:none;
  background:radial-gradient(closest-side,rgba(235,32,39,.22),transparent 70%);
  filter:blur(60px);animation:pvp-pulse 9s ease-in-out infinite;
}
@keyframes pvp-pulse{0%,100%{opacity:.6;transform:scale(1)}50%{opacity:1;transform:scale(1.08)}}
.pvp .finale h2,.pvp .finale .elementor-heading-title{font-size:var(--t-h1);text-transform:uppercase}
.pvp .finale .btnrow{justify-content:center}
.pvp .triplet .elementor-widget-text-editor,.pvp .triplet .elementor-heading-title{
  font-family:var(--f-head);font-weight:800;text-transform:uppercase;
  font-size:clamp(1.1rem,.9rem + .9vw,1.8rem);letter-spacing:.03em;color:var(--head);line-height:1.25;
}

/* ---------- image + video frames ---------- */
.pvp .frame .elementor-widget-image img,.pvp .frame img{
  width:100%;height:auto;display:block;border-radius:var(--r-lg);
  border:1px solid var(--line);
  box-shadow:0 44px 90px -50px rgba(0,0,0,.95);
  transition:transform .8s var(--ease-out),box-shadow .6s var(--ease-out);
}
.pvp .frame:hover .elementor-widget-image img,.pvp .frame:hover img{transform:scale(1.03)}
.pvp .frame{overflow:hidden;border-radius:var(--r-lg)}
.pvp .vid .elementor-widget-video,.pvp .vid .elementor-wrapper{
  border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line-2);
  box-shadow:0 56px 100px -52px rgba(0,0,0,.95);
}
.pvp .vid .elementor-custom-embed-image-overlay{border-radius:var(--r-lg)}

/* desktop pointer spotlight, switched on by the script */
.pvp-spot{position:fixed;z-index:1;pointer-events:none;width:520px;height:520px;margin:-260px 0 0 -260px;border-radius:50%;
  background:radial-gradient(closest-side,rgba(235,32,39,.10),transparent 70%);
  opacity:0;transition:opacity .6s var(--ease);mix-blend-mode:screen}
.pvp-spot.on{opacity:1}

/* ==========================================================================
   6. Responsive
   ========================================================================== */
@media (max-width:1024px){
  .pvp .hero__in{grid-template-columns:1fr;gap:38px}
  .pvp .hero{min-height:0;padding-block:calc(var(--section-y) + 74px) var(--section-y)}
  .pvp .hero__copy{max-width:none}
  .pvp .g4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pvp .split,.pvp .split--wide{grid-template-columns:1fr;gap:32px}
}
@media (max-width:820px){
  .pvp .g3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pvp .ticks--2 ul{grid-template-columns:1fr}
  .pvp .checks ul{grid-template-columns:1fr}
}
@media (max-width:640px){
  .pvp .g2,.pvp .g3,.pvp .g4{grid-template-columns:1fr}
  .pvp .step{grid-template-columns:1fr;gap:12px}
  .pvp .step__n{min-width:0}
  .pvp .num{font-size:clamp(2.4rem,7vw,3.2rem)}
  .pvp .flow{padding-left:34px}
  .pvp .flow > *::before{left:-31px}
  .pvp .chain{gap:8px;padding:16px}
  .pvp .chain span{font-size:.78rem;padding:7px 11px}
  .pvp .ba__grip{width:42px;height:42px;margin:-21px 0 0 -21px}
  .pvp .ba__tag{font-size:.62rem;padding:6px 10px;top:12px}
  .pvp .ba__tag--l{left:12px}.pvp .ba__tag--r{right:12px}
  .pvp .qa .qa__q .elementor-heading-title,.pvp .qa .qa__q h3{padding:17px 50px 17px 18px}
  .pvp .qa__a,.pvp .qa.is-open .qa__a{padding-inline:18px}
  .pvp .btnrow{gap:11px}
  .pvp .btn .elementor-button,.pvp a.btn{padding:15px 26px;font-size:.78rem;width:100%}
  .pvp .btnrow > .elementor-widget{width:100%!important}
}
/* phones keep every reveal and the ticker; only the pointer effects are dropped */
@media (hover:none){
  .pvp .card:hover,.pvp .cta-card:hover{transform:none}
  .pvp .card::before{display:none}
  .pvp-spot{display:none}
}
/* ==========================================================================
   7. Light sections
   The page alternates dark and off-white. Every component reads its colours
   from the tokens below, so re-declaring them on the section is enough; only
   the few surfaces that are literally built from white transparency need a
   light counterpart of their own.
   ========================================================================== */
.pvp .sect--light{
  --sect-bg:#F6F4F0;
  --head:#0B0E15;
  --txt:#4B5462;
  --txt-2:#6F7788;
  --line:rgba(11,14,21,.13);
  --line-2:rgba(11,14,21,.22);
  background-color:#F6F4F0;
  background-image:none;
  color:#4B5462;
}
.pvp .sect--light h1,.pvp .sect--light h2,.pvp .sect--light h3,
.pvp .sect--light h4,.pvp .sect--light h5,.pvp .sect--light h6,
.pvp .sect--light .elementor-heading-title{color:#0B0E15}
.pvp .sect--light .lead{color:#4B5462}
.pvp .sect--light .note{color:#6F7788}
.pvp .sect--light .eyebrow{color:#C0161C}
.pvp .sect--light .ital,.pvp .sect--light .hero__kick{color:#14181F}

/* surfaces */
.pvp .sect--light .card{
  background:#FFFFFF;
  border-color:rgba(11,14,21,.10);
  box-shadow:0 1px 2px rgba(11,14,21,.04),0 18px 40px -28px rgba(11,14,21,.25);
}
.pvp .sect--light .card::before{background:radial-gradient(420px circle at var(--mx,50%) var(--my,0%),rgba(235,32,39,.10),transparent 62%)}
.pvp .sect--light .card:hover{border-color:rgba(11,14,21,.2);box-shadow:0 28px 56px -32px rgba(11,14,21,.34)}
.pvp .sect--light .card--edge::after{background:linear-gradient(140deg,rgba(235,32,39,.8),rgba(11,14,21,.08) 42%,rgba(168,135,79,.6))}
.pvp .sect--light .pcard .kicker{color:#9A7B42}
.pvp .sect--light .pcard .role{color:#14181F}

.pvp .sect--light .ticks li{background:#FFFFFF;border-color:rgba(11,14,21,.11)}
.pvp .sect--light .ticks li:hover{background:#FFFFFF;border-color:rgba(11,14,21,.22)}
.pvp .sect--light .chain{background:#FFFFFF;border-color:rgba(11,14,21,.18)}
.pvp .sect--light .chain span{background:#F2EFEA;border-color:rgba(11,14,21,.12);color:#4B5462}
.pvp .sect--light .step{border-top-color:rgba(11,14,21,.13)}
.pvp .sect--light .num{color:#0B0E15;background-image:linear-gradient(160deg,#0B0E15 8%,rgba(11,14,21,.16) 80%)}
.pvp .sect--light .num--red{color:#D01A20;background-image:linear-gradient(160deg,#D01A20 5%,rgba(208,26,32,.16) 82%)}
.pvp .sect--light .ladder p,.pvp .sect--light .ladder .elementor-heading-title{color:#14181F}
.pvp .sect--light .checks li:hover{color:#0B0E15}
.pvp .sect--light .qa{background:#FFFFFF;border-color:rgba(11,14,21,.11)}
.pvp .sect--light .qa:hover{background:#FFFFFF;border-color:rgba(11,14,21,.22)}
.pvp .sect--light .qa.is-open{background:#FFF7F7;border-color:rgba(235,32,39,.42)}
.pvp .sect--light .qa .qa__q .elementor-heading-title{color:#0B0E15}
.pvp .sect--light .qa.is-open .qa__q .elementor-heading-title{color:#C0161C}
.pvp .sect--light .qa__a p{color:#4B5462}
.pvp .sect--light .cta-card{
  background:#FFFFFF;border-color:rgba(11,14,21,.11);
  box-shadow:0 1px 2px rgba(11,14,21,.04),0 18px 40px -28px rgba(11,14,21,.25);
}
.pvp .sect--light .cta-card:hover{border-color:rgba(235,32,39,.45);box-shadow:0 30px 60px -34px rgba(235,32,39,.35)}
.pvp .sect--light .frame .elementor-widget-image img,.pvp .sect--light .frame img,
.pvp .sect--light .ba{border-color:rgba(11,14,21,.14);box-shadow:0 30px 64px -38px rgba(11,14,21,.45)}
.pvp .sect--light .btn-ghost .elementor-button{border-color:rgba(11,14,21,.22);color:#0B0E15}
.pvp .sect--light .btn-ghost .elementor-button::after{background:rgba(11,14,21,.06)}
.pvp .sect--light .cue{color:#6F7788}

/* the faint plate turns dark-on-light */
.pvp .sect--light.sect--plate::before{
  background-image:linear-gradient(rgba(11,14,21,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(11,14,21,.035) 1px,transparent 1px);
}

/* a hairline where a light band meets a dark one */
.pvp .sect--light + .pvp .sect,
.pvp .sect--light{border-top:0}
/* ==========================================================================
   8. Inside the Elementor editor
   Anything this page collapses or stacks for effect is opened up while
   editing, otherwise a text change looks like it did nothing: the FAQ answers
   are height-collapsed, and the after image sits on top of the before image.
   ========================================================================== */
body.elementor-editor-active .pvp .qa__a,
body.elementor-editor-preview .pvp .qa__a,
body.elementor-editor-active .pvp .qa .qa__a,
body.elementor-editor-preview .pvp .qa .qa__a{
  transition:none!important;
  max-height:none!important;
  opacity:1!important;
  visibility:visible!important;
  overflow:visible!important;
  padding:0 22px 22px!important;
}
body.elementor-editor-active .pvp .qa__q::before,
body.elementor-editor-active .pvp .qa__q::after{display:none}
body.elementor-editor-active .pvp .qa .qa__q .elementor-heading-title{padding-right:22px}
body.elementor-editor-active .pvp .ba{cursor:default}
body.elementor-editor-active .pvp .ba .ba-after{
  position:static!important;clip-path:none!important;margin-top:8px;
}
body.elementor-editor-active .pvp .rv,
body.elementor-editor-active .pvp .rv-l,
body.elementor-editor-active .pvp .rv-r,
body.elementor-editor-active .pvp .rv-s,
body.elementor-editor-active .pvp .rv-c,
body.elementor-editor-active .pvp .stag > *{opacity:1!important;transform:none!important}
body.elementor-editor-active .pvp .ticker{-webkit-mask-image:none;mask-image:none}
body.elementor-editor-active .pvp .ticker__run{animation:none!important}
body.elementor-editor-active .pvp .hero::after{animation:none}
body.elementor-editor-active .pvp .flow::before{transform:scaleY(1)}
body.elementor-editor-active .pvp .step::after,
body.elementor-editor-active .pvp .pcard::after{transform:scaleX(1)}

/* ==========================================================================
   9. Phone type scale and spacing
   Headings were running large on a 375px screen, and a few blocks sat too
   close together once everything stacked into one column.
   ========================================================================== */
@media (max-width:640px){
  .pvp{
    --t-display:2rem;
    --t-h1:1.72rem;
    --t-h2:1.44rem;
    --t-h3:1.1rem;
    --t-h4:1rem;
    --t-lead:1rem;
    --t-body:.95rem;
    --t-small:.88rem;
    --t-label:.66rem;
    --t-num:2.5rem;
    --section-y:54px;
  }
  .pvp h1,.pvp h2,.pvp h3{line-height:1.16;letter-spacing:-.015em}
  .pvp .sect{padding-block:var(--section-y)}
  .pvp .hero{padding-block:calc(var(--section-y) + 66px) var(--section-y)}
  .pvp .card{padding:20px 17px}
  .pvp .cta-card{padding:22px 18px;gap:12px}
  .pvp .ticks li{padding:12px 14px 12px 44px}
  .pvp .ticks li::before{left:14px}
  .pvp .ticks li::after{left:19px}
  .pvp .grid{gap:14px}
  .pvp .stack-3{gap:12px}
  .pvp .stack-4{gap:18px}
  .pvp .stack-5{gap:26px}
  .pvp .stack-6{gap:34px}
  .pvp .step{padding-block:26px}
  .pvp .shead{max-width:none}
  .pvp .eyebrow{margin-bottom:12px;line-height:1.7}
  .pvp .ladder > *{padding-block:14px}
  .pvp .checks li{padding-left:26px}
  .pvp .finale{padding-block:58px}
  /* buttons stack full width, so they need air between them and the text above */
  .pvp .btnrow.e-con,.pvp .btnrow{margin-top:4px;--flex-direction:column;--align-items:stretch}
  .pvp .btnrow.e-con{flex-direction:column;align-items:stretch}
  .pvp .cue{margin-top:2px}
}
@media (max-width:380px){
  .pvp{--t-display:1.84rem;--t-h1:1.6rem;--t-h2:1.34rem}
  .pvp .btn .elementor-button,.pvp a.btn{padding:14px 18px;font-size:.74rem;letter-spacing:.07em}
}
/* the dark half of the alternation */
.pvp .sect--dark{
  --sect-bg:#0B0F18;
  background-color:#0B0F18;
  background-image:linear-gradient(180deg,rgba(255,255,255,.012) 0%,rgba(255,255,255,.028) 26%,rgba(255,255,255,.028) 74%,rgba(255,255,255,.012) 100%);
}
.pvp .sect--dark.sect--plate::before{
  background-image:linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px);
}
/* The numerals paint a gradient clipped to the glyphs. If a browser cannot do
   that, the plain colour above stays and the number is still readable. */
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .pvp .num{-webkit-text-fill-color:transparent}
}
/* ==========================================================================
   10. Making panel typography actually land
   Elementor writes a text widget's typography onto the widget wrapper and lets
   the paragraph inside inherit it. Any rule of ours on that paragraph blocks
   the inheritance, which is why some panel edits appeared to do nothing. The
   type style therefore lives on the wrapper, and the paragraph inherits it.
   ========================================================================== */
/* the default sits at :where() so it never outranks a style class of ours */
.pvp :where(.elementor-widget-text-editor){font-size:var(--t-body);line-height:1.72}
/* this build of Elementor puts the paragraph directly inside the widget, with
   no .elementor-widget-container in between */
.pvp .elementor-widget-text-editor p,
.pvp .elementor-widget-text-editor li{
  font-size:inherit;
  font-family:inherit;
  font-weight:inherit;
  font-style:inherit;
  line-height:inherit;
  letter-spacing:inherit;
  text-transform:inherit;
  color:inherit;
}
/* the ticked and checked lists keep their own layout, only the type inherits */
.pvp .ticks .elementor-widget-text-editor,
.pvp .checks .elementor-widget-text-editor{font-size:var(--t-body)}
/* The style class now sits on the widget as well as on the paragraph inside it,
   which is what lets a panel edit reach the text. Two of these classes also draw
   a decoration, so the widget copy has to stand down or the rule paints twice. */
.pvp .elementor-widget-text-editor.eyebrow{display:block;margin-bottom:0}
.pvp .elementor-widget-text-editor.eyebrow::before{content:none}
.pvp .elementor-widget-text-editor.cue{display:block}
.pvp .elementor-widget-text-editor.cue::after{content:none}
/* ==========================================================================
   11. The two chain rows
   Both rows put every pill inside a single text widget, so the row was one
   flex item that grew to its content width and ran straight off a phone
   screen. Make the widget itself the wrapping row, and give the pills a real
   surface and a hover state on both phone and desktop.
   ========================================================================== */
.pvp .chain{display:block;padding:clamp(14px,1.8vw,22px)}
.pvp .chain > .elementor-widget,
.pvp .chain .elementor-widget-text-editor{
  width:100%;
  min-width:0;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  gap:10px;
}
.pvp .chain p{display:contents}
.pvp .chain span{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin:0;
  padding:10px 18px;
  border-radius:var(--r-pill);
  background-color:rgba(255,255,255,.055);
  border:1px solid var(--line);
  color:var(--txt);
  font-family:var(--f-head);
  font-size:var(--t-small);
  font-weight:600;
  line-height:1.2;
  white-space:nowrap;
  cursor:default;
  transition:background-color .32s var(--ease),border-color .32s var(--ease),
             color .32s var(--ease),transform .32s var(--ease-out),box-shadow .32s var(--ease-out);
}
.pvp .chain span:hover{
  background-color:rgba(235,32,39,.16);
  border-color:rgba(235,32,39,.65);
  color:#FFFFFF;
  transform:translateY(-3px);
  box-shadow:0 12px 26px -14px rgba(235,32,39,.85);
}
/* the arrows between the journey stages are separators, not pills */
.pvp .chain--flow span:nth-child(even){
  background:none;
  border:0;
  padding:0 2px;
  color:var(--red-2);
  font-size:1.05rem;
  box-shadow:none;
}
.pvp .chain--flow span:nth-child(even):hover{
  background:none;
  border:0;
  transform:none;
  box-shadow:none;
  color:var(--red-2);
}

/* light sections get the same pills on a white surface */
.pvp .sect--light .chain span{
  background-color:#FFFFFF;
  border-color:rgba(11,14,21,.13);
  color:#4B5462;
}
.pvp .sect--light .chain span:hover{
  background-color:#C0161C;
  border-color:#C0161C;
  color:#FFFFFF;
  box-shadow:0 12px 26px -14px rgba(192,22,28,.6);
}
.pvp .sect--light .chain--flow span:nth-child(even),
.pvp .sect--light .chain--flow span:nth-child(even):hover{
  background:none;border:0;color:#C0161C;box-shadow:none;
}

@media (max-width:640px){
  .pvp .chain{padding:14px 12px}
  .pvp .chain > .elementor-widget,
  .pvp .chain .elementor-widget-text-editor{gap:8px}
  .pvp .chain span{padding:9px 13px;font-size:.8rem}
}
/* on a touch screen the hover state fires on tap, so keep it subtle */
@media (hover:none){
  .pvp .chain span:hover{transform:none;box-shadow:none}
}