/* ============================================================
   JLDigital — service hero: two-column grid + animated visuals
   ============================================================ */

/* --- Shared hero grid ------------------------------------- */
.ga-hero.hero-split{overflow-x:clip;display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:56px;align-items:center;padding-top:104px;padding-bottom:48px}
.ga-hero.hero-split > .hero-copy{min-width:0}
.ga-hero.hero-split .jl-hero-foot{grid-template-columns:1fr;align-items:start;gap:20px}
.ga-hero.hero-split .jl-partner{max-width:400px}
@media(max-width:1080px){.ga-hero.hero-split{gap:36px}}
@media(max-width:900px){
  .ga-hero.hero-split{grid-template-columns:1fr;gap:34px;padding-top:96px}
  .ga-hero.hero-split .hero-art{order:2}
}

/* --- Stage ------------------------------------------------- */
.hv{position:relative;width:100%;max-width:470px;margin-left:auto;margin-right:20px;aspect-ratio:1/1;isolation:isolate}
.hv::before{content:'';position:absolute;inset:6%;border-radius:50%;background:radial-gradient(circle at 50% 45%,#fffdf8 0%,#f4f1ea 58%,rgba(244,241,234,0) 72%);z-index:0}
.hv-ring{position:absolute;border:1px solid #e7e3d9;border-radius:50%;z-index:1}
.hv-ring.r1{inset:12%}
.hv-ring.r2{inset:26%;border-style:dashed;border-color:#eae6dc}
.hv-ring.r3{inset:0;border-color:#efece4}

/* Center medallion */
.hv-core{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:5;width:132px;height:132px;border-radius:34px;background:#fff;border:1px solid #e9e6df;box-shadow:0 30px 60px -38px rgba(0,0,0,.4);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;animation:hv-breathe 9s ease-in-out infinite}
.hv-core img{width:46px;height:46px;object-fit:contain}
.hv-core span{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:#8a8780;font-weight:600}
@keyframes hv-breathe{0%,100%{transform:translate(-50%,-50%) scale(1)}50%{transform:translate(-50%,-50%) scale(1.035)}}

/* Orbit machinery: outer spins, inner counter-spins to stay upright */
.hv-orbit{position:absolute;inset:0;z-index:3;animation:hv-spin 64s linear infinite}
.hv-orbit.rev{animation-duration:88s;animation-direction:reverse}
@keyframes hv-spin{to{transform:rotate(360deg)}}
.hv-node{position:absolute;top:50%;left:50%;width:0;height:0}
.hv-node > .hv-in{position:absolute;transform:translate(-50%,-50%);animation:hv-cspin 64s linear infinite}
.hv-orbit.rev .hv-node > .hv-in{animation-duration:88s;animation-name:hv-cspin-r}
@keyframes hv-cspin{from{transform:translate(-50%,-50%) rotate(0)}to{transform:translate(-50%,-50%) rotate(-360deg)}}
@keyframes hv-cspin-r{from{transform:translate(-50%,-50%) rotate(0)}to{transform:translate(-50%,-50%) rotate(360deg)}}

/* Floating chips / mini-cards */
.hv-chip{display:inline-flex;align-items:center;gap:9px;background:#fff;border:1px solid #e9e6df;border-radius:999px;padding:9px 14px;white-space:nowrap;box-shadow:0 18px 38px -30px rgba(0,0,0,.45);font-size:12px;font-weight:600;color:#1a1916;letter-spacing:-.005em;transition:box-shadow .35s ease,border-color .35s ease}
.hv-chip img,.hv-chip svg{width:17px;height:17px;object-fit:contain;flex-shrink:0}
.hv-chip svg{fill:none;stroke:#6b6557;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.hv-card{background:#fff;border:1px solid #e9e6df;border-radius:16px;padding:12px;width:132px;box-shadow:0 22px 46px -34px rgba(0,0,0,.5);transition:box-shadow .35s ease,border-color .35s ease}
.hv-card .hv-thumb{height:52px;border-radius:10px;background:linear-gradient(150deg,#f1eee6,#e4dfd3);position:relative;overflow:hidden}
.hv-card .hv-thumb.dark{background:linear-gradient(150deg,#26241f,#403c34)}
.hv-card .hv-thumb .play{position:absolute;inset:0;margin:auto;width:0;height:0;border-left:13px solid rgba(255,255,255,.9);border-top:9px solid transparent;border-bottom:9px solid transparent}
.hv-card .hv-l{height:6px;border-radius:3px;background:#e7e3da;margin-top:9px}
.hv-card .hv-l.s{width:56%;background:#efece5}
.hv-card .hv-row{display:flex;align-items:center;justify-content:space-between;margin-top:10px;gap:8px}
.hv-card .hv-tag{font-size:9.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:#8a8780}
.hv-card .hv-btn{background:#1a1916;border-radius:999px;height:16px;width:44px}
.hv-metric{font-family:'Playfair Display',serif;font-size:19px;line-height:1;color:#1a1916}
.hv-metric i{font-style:normal;font-size:11px;color:#4d6a50;font-family:'Inter',sans-serif;font-weight:600;margin-left:5px}
.hv:hover .hv-chip,.hv:hover .hv-card{border-color:#dcd6c8;box-shadow:0 26px 54px -30px rgba(0,0,0,.5)}

/* Gentle float wrapper (applied on .hv-in children) */
.hv-float{animation:hv-float 7s ease-in-out infinite}
.hv-float.d1{animation-delay:-1.6s;animation-duration:8.5s}
.hv-float.d2{animation-delay:-3.2s;animation-duration:9.5s}
.hv-float.d3{animation-delay:-4.8s;animation-duration:7.8s}
@keyframes hv-float{0%,100%{transform:translateY(-5px)}50%{transform:translateY(5px)}}

/* Connector lines */
.hv-lines{position:absolute;inset:0;z-index:2;pointer-events:none}
.hv-lines line,.hv-lines path,.hv-lines circle{vector-effect:non-scaling-stroke}
.hv-lines .ln{stroke:#e0dbcf;stroke-width:1;fill:none}
.hv-lines .dash{stroke:#cfc9b9;stroke-width:1;stroke-dasharray:3 9;fill:none;animation:hv-dash 12s linear infinite}
@keyframes hv-dash{to{stroke-dashoffset:-120}}

/* --- Email flow visual ------------------------------------ */
.hv-flow{position:relative;width:100%;max-width:470px;margin-left:auto;margin-right:20px;aspect-ratio:1/1}
.hv-flow .hv-track{position:absolute;inset:0;z-index:1}
.hv-flow .hv-track path{fill:none;stroke:#e5e1d6;stroke-width:1.2}
.hv-flow .hv-track path.live{stroke:#cfc9b9;stroke-dasharray:4 10;animation:hv-dash 14s linear infinite}
.hv-step{position:absolute;z-index:3;display:inline-flex;align-items:center;gap:9px;background:#fff;border:1px solid #e9e6df;border-radius:14px;padding:10px 14px;font-size:12px;font-weight:600;color:#1a1916;box-shadow:0 20px 40px -32px rgba(0,0,0,.45);opacity:.72;transition:opacity .6s ease,border-color .6s ease,transform .6s ease}
.hv-step .dot{width:7px;height:7px;border-radius:50%;background:#dcd6c8;flex-shrink:0;transition:background .6s ease}
.hv-step.on{opacity:1;border-color:#cfc9b9;transform:translateY(-3px)}
.hv-step.on .dot{background:#1a1916}
.hv-flow .hv-core{width:124px;height:124px;border-radius:32px}
.hv-pulse{position:absolute;z-index:4;width:9px;height:9px;border-radius:50%;background:#1a1916;offset-path:var(--p);offset-rotate:0deg;animation:hv-travel 16s linear infinite}
@keyframes hv-travel{0%{offset-distance:0%;opacity:0}6%{opacity:1}94%{opacity:1}100%{offset-distance:100%;opacity:0}}

/* --- Responsive ------------------------------------------- */
@media(max-width:900px){
  .hv,.hv-flow{max-width:none;margin:0 auto;width:min(100%,420px);aspect-ratio:1/1;max-height:380px}
  .hv-core{width:112px;height:112px;border-radius:28px}
  .hv-core img{width:38px;height:38px}
  .hv-card{width:112px;padding:10px}
  .hv-chip{padding:7px 11px;font-size:11px}
}
@media(max-width:560px){
  .hv,.hv-flow{width:min(100%,340px);max-height:340px}
  .hv-chip{padding:6px 10px;font-size:10.5px;gap:7px}
  .hv-card{width:96px}
  .hv-card .hv-thumb{height:42px}
  .hv-step{padding:8px 11px;font-size:10.5px}
}

@media(prefers-reduced-motion:reduce){
  .hv-orbit,.hv-node > .hv-in,.hv-core,.hv-float,.hv-lines .dash,.hv-flow .hv-track path.live,.hv-pulse{animation:none!important}
  .hv-step{opacity:1}
  .hv-pulse{display:none}
}

/* Compact split-hero typography so the hero stays a controlled height */
.ga-hero.hero-split h1{font-size:clamp(36px,4.35vw,62px);max-width:15ch;margin-bottom:22px}
.ga-hero.hero-split .lead p{max-width:560px;font-size:clamp(15px,1.15vw,16.5px);margin-bottom:12px}
.ga-hero.hero-split .ga-hero-actions{margin-top:26px}
.ga-hero.hero-split .ga-badges{gap:8px}
@media(max-width:900px){.ga-hero.hero-split h1{max-width:none}}

/* --- Shared service orbit: accents, hover + viewport pause --------- */
.hv .hv-dot{width:8px;height:8px;border-radius:50%;background:var(--hv-acc,#1a1916);flex-shrink:0;display:inline-block}
.hv .hv-chip{--hv-acc:#1a1916}
.hv-core .hv-acc-line{width:26px;height:2px;border-radius:2px;background:var(--hv-acc,#1a1916);opacity:.75}
.hv:hover .hv-orbit,
.hv:hover .hv-node > .hv-in,
.hv:hover .hv-float,
.hv.is-off .hv-orbit,
.hv.is-off .hv-node > .hv-in,
.hv.is-off .hv-float,
.hv.is-off .hv-core,
.hv.is-off .hv-lines .dash{animation-play-state:paused}
@media(max-width:560px){.hv .hv-node.hv-opt{display:none}}

/* =============================================================
   Unique service hero visuals — Pinterest / Snapchat / TikTok
   Shared principle: a centred platform core + orbiting elements,
   but each page gets its own geometry and motion signature.
   ============================================================= */
.svz{position:relative;width:100%;max-width:470px;margin-left:auto;margin-right:20px;aspect-ratio:1/1;isolation:isolate}
.svz-glow{position:absolute;inset:4%;border-radius:50%;z-index:0;background:radial-gradient(circle at 50% 46%,var(--gl,rgba(230,0,35,.13)) 0%,rgba(255,255,255,0) 62%);animation:svz-glow 11s ease-in-out infinite}
@keyframes svz-glow{0%,100%{opacity:.7;transform:scale(1)}50%{opacity:1;transform:scale(1.05)}}
.svz-core{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:6;width:128px;height:128px;border-radius:34px;background:#fff;border:1px solid #e9e6df;box-shadow:0 30px 60px -38px rgba(0,0,0,.42);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;animation:svz-breathe 9s ease-in-out infinite}
.svz-core img{width:44px;height:44px;object-fit:contain}
.svz-core span{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:#8a8780;font-weight:600}
@keyframes svz-breathe{0%,100%{transform:translate(-50%,-50%) scale(1)}50%{transform:translate(-50%,-50%) scale(1.03)}}
.svz-chip{display:inline-flex;align-items:center;gap:9px;background:#fff;border:1px solid #e9e6df;border-radius:999px;padding:9px 14px;white-space:nowrap;box-shadow:0 18px 38px -30px rgba(0,0,0,.45);font-size:12px;font-weight:600;color:#1a1916;letter-spacing:-.005em}
.svz-chip i{width:8px;height:8px;border-radius:50%;background:var(--acc,#1a1916);flex-shrink:0;display:inline-block}
.svz-ring{position:absolute;border:1px solid #ebe7dd;border-radius:50%;z-index:1}

/* --- Pinterest: drifting pin board + two orbit levels ------- */
.pv .pv-board{position:absolute;inset:9%;z-index:2;display:grid;grid-template-columns:repeat(3,1fr);gap:10px;overflow:hidden;border-radius:26px;-webkit-mask-image:radial-gradient(circle at 50% 50%,#000 52%,transparent 78%);mask-image:radial-gradient(circle at 50% 50%,#000 52%,transparent 78%)}
.pv .pv-col{overflow:hidden}
.pv .pv-track{display:flex;flex-direction:column;gap:10px;animation:pv-up 26s linear infinite}
.pv .pv-col:nth-child(2) .pv-track{animation-duration:34s;animation-direction:reverse}
.pv .pv-col:nth-child(3) .pv-track{animation-duration:30s}
@keyframes pv-up{from{transform:translateY(0)}to{transform:translateY(-50%)}}
.pv .pin{border-radius:12px;border:1px solid #ece9e1;background:linear-gradient(155deg,#f4f1e9,#e6e1d5);position:relative;flex-shrink:0}
.pv .pin.t1{height:78px}.pv .pin.t2{height:104px}.pv .pin.t3{height:62px}
.pv .pin.vid::after{content:"";position:absolute;inset:0;margin:auto;width:0;height:0;border-left:12px solid rgba(255,255,255,.92);border-top:8px solid transparent;border-bottom:8px solid transparent}
.pv .pin.save::before{content:"";position:absolute;top:7px;right:7px;width:22px;height:9px;border-radius:999px;background:#E60023;opacity:.9}
.pv .pin.dark{background:linear-gradient(155deg,#3b3731,#5c554a);opacity:.9}
.pv-orbit{position:absolute;inset:0;z-index:4;animation:hv-spin 70s linear infinite}
.pv-orbit.in{inset:17%;animation-duration:46s;animation-direction:reverse}
.pv-orbit .nd{position:absolute;top:50%;left:50%;width:0;height:0}
.pv-orbit .nd > span.w{position:absolute;transform:translate(-50%,-50%);animation:hv-cspin 70s linear infinite;display:block}
.pv-orbit.in .nd > span.w{animation-duration:46s;animation-name:hv-cspin-r}

/* --- Snapchat: lens pulses + arc of story cards ------------- */
.sv .sv-pulse{position:absolute;top:50%;left:50%;width:150px;height:150px;margin:-75px 0 0 -75px;border-radius:50%;border:1.5px solid rgba(245,197,24,.55);z-index:2;animation:sv-pulse 6s ease-out infinite}
.sv .sv-pulse.p2{animation-delay:2s}.sv .sv-pulse.p3{animation-delay:4s}
@keyframes sv-pulse{0%{transform:scale(.62);opacity:0}18%{opacity:.85}100%{transform:scale(1.7);opacity:0}}
.sv .sv-core{border-radius:38px;background:#141414;border-color:#141414}
.sv .sv-core span{color:#F5C518}
.sv .sv-arc{position:absolute;inset:0;z-index:4;animation:hv-spin 78s linear infinite}
.sv .sv-arc.rev{inset:19%;animation-duration:52s;animation-direction:reverse}
.sv .sv-arc .nd{position:absolute;top:50%;left:50%;width:0;height:0}
.sv .sv-arc .nd > span.w{position:absolute;transform:translate(-50%,-50%);animation:hv-cspin 78s linear infinite;display:block}
.sv .sv-arc.rev .nd > span.w{animation-duration:52s;animation-name:hv-cspin-r}
.sv .sv-story{position:absolute;z-index:3;width:74px;border-radius:14px;background:#fff;border:1px solid #ebe7dd;box-shadow:0 20px 40px -32px rgba(0,0,0,.5);padding:7px;animation:hv-float 8s ease-in-out infinite}
.sv .sv-story .fr{aspect-ratio:9/16;border-radius:9px;background:linear-gradient(160deg,#F5C518,#f0e3ad)}
.sv .sv-story .bar{height:3px;border-radius:2px;background:#eeeade;margin-top:6px;overflow:hidden}
.sv .sv-story .bar i{display:block;height:100%;width:40%;background:#141414;border-radius:2px;animation:sv-bar 4.5s ease-in-out infinite}
@keyframes sv-bar{0%{width:8%}100%{width:100%}}
.sv .sv-story.s1{left:7%;top:17%}
.sv .sv-story.s2{right:7%;bottom:16%;animation-delay:-3s}
.sv .sv-story.s2 .fr{background:linear-gradient(160deg,#1f1d19,#4b463c)}

/* --- TikTok: equalizer ring + swipe feed ------------------- */
.tv .tv-eq{position:absolute;inset:0;z-index:2;animation:hv-spin 120s linear infinite}
.tv .tv-eq i{position:absolute;top:50%;left:50%;width:2px;height:var(--h,14px);margin-left:-1px;border-radius:2px;background:linear-gradient(180deg,#25F4EE,#FE2C55);opacity:.5;transform-origin:50% 0;transform:rotate(var(--r)) translateY(var(--rad,150px));animation:tv-eq 2.6s ease-in-out infinite;animation-delay:var(--d)}
@keyframes tv-eq{0%,100%{height:8px;opacity:.32}50%{height:22px;opacity:.85}}
.tv .tv-orbit{position:absolute;inset:6%;z-index:4;animation:hv-spin 62s linear infinite}
.tv .tv-orbit.rev{inset:22%;animation-duration:44s;animation-direction:reverse}
.tv .tv-orbit .nd{position:absolute;top:50%;left:50%;width:0;height:0}
.tv .tv-orbit .nd > span.w{position:absolute;transform:translate(-50%,-50%);animation:hv-cspin 62s linear infinite;display:block}
.tv .tv-orbit.rev .nd > span.w{animation-duration:44s;animation-name:hv-cspin-r}
.tv .tv-feed{position:absolute;right:5%;top:50%;transform:translateY(-50%);z-index:3;width:82px;height:150px;border-radius:16px;border:1px solid #ebe7dd;background:#fff;overflow:hidden;box-shadow:0 22px 46px -34px rgba(0,0,0,.5);padding:6px}
.tv .tv-feed .fstack{display:flex;flex-direction:column;gap:6px;animation:tv-swipe 12s cubic-bezier(.7,0,.2,1) infinite}
.tv .tv-feed .fc{height:138px;border-radius:11px;background:linear-gradient(160deg,#2a2723,#4a4439);flex-shrink:0;position:relative}
.tv .tv-feed .fc:nth-child(2){background:linear-gradient(160deg,#25F4EE33,#FE2C5533)}
.tv .tv-feed .fc::after{content:"";position:absolute;left:8px;right:8px;bottom:8px;height:3px;border-radius:2px;background:rgba(255,255,255,.55)}
@keyframes tv-swipe{0%,26%{transform:translateY(0)}33%,59%{transform:translateY(-144px)}66%,92%{transform:translateY(-288px)}100%{transform:translateY(0)}}
.tv .tv-live{position:absolute;left:2%;top:20%;z-index:5;font-size:10px;font-weight:700;letter-spacing:.1em;color:#fff;background:#FE2C55;border-radius:999px;padding:5px 11px;animation:tv-blink 3.4s ease-in-out infinite}
@keyframes tv-blink{0%,100%{opacity:.85}50%{opacity:1;transform:translateY(-3px)}}

/* Perf / accessibility */
.svz:hover [class*="-orbit"],.svz:hover .sv-arc,.svz.is-off *{animation-play-state:paused}
@media(max-width:900px){
  .svz{max-width:none;margin:0 auto;width:min(100%,420px);max-height:380px}
  .svz-core{width:110px;height:110px;border-radius:28px}
  .svz-core img{width:38px;height:38px}
  .svz-chip{padding:7px 11px;font-size:11px}
  .tv .tv-feed{width:70px;height:130px}
  .tv .tv-eq i{--rad:132px}
}
@media(max-width:560px){
  .svz{width:min(100%,340px);max-height:340px}
  .svz-chip{padding:6px 10px;font-size:10.5px}
  .tv .tv-eq i{--rad:106px}
  .svz .nd.opt,.tv .tv-feed,.sv .sv-story.s2{display:none}
}
@media(prefers-reduced-motion:reduce){
  .svz *,.svz{animation:none!important}
  .sv .sv-pulse{opacity:.35}
}

/* =============================================================
   Framework hero — living framework wheel
   ============================================================= */
.page-hero.fw-hero-split{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:52px;align-items:center;overflow-x:clip}
.page-hero.fw-hero-split > div:first-child{min-width:0}
@media(max-width:960px){.page-hero.fw-hero-split{grid-template-columns:1fr;gap:32px}.page-hero.fw-hero-split .fw-art{order:2}}
.fwv{position:relative;width:100%;max-width:470px;margin:0 auto;aspect-ratio:1/1;isolation:isolate}
.fwv .g{position:absolute;inset:5%;border-radius:50%;background:radial-gradient(circle at 50% 46%,#fffdf8 0%,#f3f0e9 58%,rgba(243,240,233,0) 74%);z-index:0;animation:svz-glow 12s ease-in-out infinite}
.fwv .rg{position:absolute;border:1px solid #e7e3d9;border-radius:50%;z-index:1}
.fwv .rg.o{inset:0}.fwv .rg.m{inset:17%;border-style:dashed;border-color:#eae6dc}.fwv .rg.i{inset:27%}
.fwv .web{position:absolute;inset:0;z-index:1;width:100%;height:100%;overflow:visible}
.fwv .web line{stroke:#e2ddd1;stroke-width:.35;stroke-dasharray:2 3;opacity:.9}
.fwv .web circle{fill:none;stroke:#ece8de;stroke-width:.35}
.fwv .sweep{position:absolute;inset:0;z-index:1;border-radius:50%;background:conic-gradient(from 0deg,rgba(26,25,22,.09),rgba(26,25,22,0) 32%);-webkit-mask:radial-gradient(circle,transparent 60%,#000 61%);mask:radial-gradient(circle,transparent 60%,#000 61%);animation:hv-spin 26s linear infinite}
.fwv .ph{position:absolute;z-index:5;transform:translate(-50%,-50%);width:44px;height:44px;border-radius:50%;background:#fff;border:1px solid #ded9cd;display:flex;align-items:center;justify-content:center;font-family:'Playfair Display',serif;font-size:14px;color:#8a8780;box-shadow:0 14px 30px -24px rgba(0,0,0,.5);animation:fwv-seq 14s linear infinite}
@keyframes fwv-seq{0%,10%{border-color:#1a1916;color:#1a1916;background:#fff;transform:translate(-50%,-50%) scale(1.1)}18%,100%{border-color:#ded9cd;color:#8a8780;transform:translate(-50%,-50%) scale(1)}}
.fwv .plat{position:absolute;inset:16%;z-index:4;animation:hv-spin 96s linear infinite}
.fwv .plat.rev{inset:27%;animation-duration:64s;animation-direction:reverse}
.fwv .plat .nd{position:absolute;top:50%;left:50%;width:0;height:0}
.fwv .plat .nd > span{position:absolute;transform:translate(-50%,-50%);display:flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:14px;background:#fff;border:1px solid #e9e6df;box-shadow:0 16px 34px -26px rgba(0,0,0,.5);animation:hv-cspin 96s linear infinite,fwv-breathe 11s ease-in-out infinite}
.fwv .plat.rev .nd > span{animation:hv-cspin-r 64s linear infinite,fwv-breathe 13s ease-in-out infinite;width:auto;min-width:34px;height:26px;padding:0 10px;border-radius:999px;font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:#8a8780;font-weight:600;background:#fdfcfa}
.fwv .plat .nd > span img{width:22px;height:22px;object-fit:contain}
@keyframes fwv-breathe{0%,100%{opacity:.86}50%{opacity:1}}
.fwv .core{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:6;width:158px;height:158px;border-radius:50%;background:#fff;border:1px solid #e9e6df;box-shadow:0 30px 60px -38px rgba(0,0,0,.42);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;text-align:center;animation:svz-breathe 9s ease-in-out infinite}
.fwv .core img{width:112px;height:auto;object-fit:contain}
.fwv .core b{font-size:9.5px;letter-spacing:.22em;text-transform:uppercase;color:#8a8780;font-weight:600}
.fwv:hover .plat,.fwv:hover .sweep,.fwv.is-off *{animation-play-state:paused}
@media(max-width:960px){.fwv{max-width:400px}.fwv .core{width:138px;height:138px}.fwv .core img{width:96px}}
@media(max-width:560px){.fwv{max-width:330px}.fwv .ph{width:34px;height:34px;font-size:11px}.fwv .core{width:118px;height:118px}.fwv .core img{width:82px}.fwv .plat .nd > span{width:38px;height:38px}.fwv .plat .nd > span img{width:19px;height:19px}.fwv .plat.rev .nd > span{height:22px;font-size:8px;padding:0 8px}}
@media(prefers-reduced-motion:reduce){.fwv *{animation:none!important}}

/* Roadmap: sequential pulse so 01 → 07 reads as one flow */
.roadmap .num{animation:fwv-seq 14s linear infinite}
@media(prefers-reduced-motion:reduce){.roadmap .num{animation:none}}

/* --- TikTok phone: real creative player -------------------- */
.tv .tv-feed.tvp{padding:6px;background:#0f0e0c;border-color:#dedacf}
.tvp .tvp-v{position:absolute;inset:6px;width:calc(100% - 12px);height:calc(100% - 12px);object-fit:cover;border-radius:11px;background:#0f0e0c;opacity:0;transition:opacity .55s ease;pointer-events:none}
.tvp .tvp-v.is-on{opacity:1}
.tvp .tvp-dots{position:absolute;left:0;right:0;bottom:11px;z-index:4;display:flex;justify-content:center;gap:5px;pointer-events:none}
.tvp .tvp-dots i{width:4px;height:4px;border-radius:50%;background:rgba(255,255,255,.45);transition:background .4s ease,transform .4s ease}
.tvp .tvp-dots i.on{background:#fff;transform:scale(1.25)}
@media(prefers-reduced-motion:reduce){.tvp .tvp-v{transition:none}}

/* Google Ads hero: live Shopping product rotation + YouTube video preview */
.hv-card .hv-thumb.hv-shop{background:linear-gradient(150deg,#f6f3ec,#ece7dc);height:auto;width:100%;aspect-ratio:1/1}
.hv-card .hv-thumb.hv-shop img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:center;padding:9%;opacity:0;transition:opacity .32s ease;will-change:opacity}
.hv-card .hv-thumb.hv-shop img.wide{padding:14% 7%}
.hv-card .hv-thumb.hv-shop img.tall{padding:6% 20%}
.hv-card .hv-thumb.hv-shop img.sq{padding:8%}
.hv-card .hv-thumb.hv-shop img.is-on{opacity:1}
.hv-card .hv-thumb.hv-vid{height:auto;width:100%;aspect-ratio:16/9;overflow:hidden;padding:0;margin:0;background:transparent;border:0;position:relative;border-radius:10px}
.hv-card:has(.hv-vid){width:172px}
.hv-card .hv-thumb.hv-vid video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;display:block;margin:0;padding:0;border:0;background:transparent;border-radius:inherit;transform:scale(1.02)}
@media(max-width:900px){.hv-card:has(.hv-vid){width:150px}}
@media(max-width:560px){.hv-card:has(.hv-vid){width:126px}}
@media (prefers-reduced-motion: reduce){
  .hv-card .hv-thumb.hv-shop img{transition:none}
}

/* Meta hero creative card — rotating real creatives */
.hv-card .hv-thumb.hv-crv{overflow:hidden;background:#26241f;height:auto;width:100%;aspect-ratio:9/16;border-radius:12px}
.hv-card:has(.hv-crv){width:150px}
@media (max-width:900px){.hv-card:has(.hv-crv){width:124px}}
@media (max-width:640px){.hv-card:has(.hv-crv){width:104px}.hv-card .hv-thumb.hv-crv{height:auto;aspect-ratio:9/16}}
.hv-card .hv-thumb.hv-crv .hv-cm{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center center;display:block;border-radius:inherit;opacity:0;transition:opacity .9s ease;pointer-events:none}
.hv-card .hv-thumb.hv-crv .hv-cm.is-on{opacity:1}

/* Snapchat hero phones — rotating real creatives */
.sv .sv-story .fr[data-sv-crv]{position:relative;overflow:hidden;background:#141414}
.sv .sv-story .fr[data-sv-crv] .sv-cm{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;border-radius:inherit;opacity:0;transition:opacity .7s ease;pointer-events:none}
.sv .sv-story .fr[data-sv-crv] .sv-cm.is-on{opacity:1}
@media(prefers-reduced-motion:reduce){
  .hv-card .hv-thumb.hv-crv .hv-cm,.sv .sv-story .fr[data-sv-crv] .sv-cm{transition:none}
  .sv .sv-story{animation:none}
}