/* The five steps, built the way the hero tiles are built: a lit panel with a
   working piece of the product inside, a sheen that crosses it, and motion that
   belongs to the content - the signature draws, the phase bar fills, the balance
   ticks, the payout tracker runs. Every figure is either measured or a rule. */
#answers{padding:clamp(44px,5vw,88px) 0;background:rgba(255,255,255,.55)}
#answers .jny-head{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(20px,3vw,48px);align-items:end;margin-bottom:clamp(26px,3vw,42px)}
#answers .jny-head h2{margin:.3em 0 0;font-size:clamp(28px,3.4vw,44px);line-height:1.05;letter-spacing:-1.3px}
#answers .jny-eyebrow{margin:0;font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--dv-blue)}
#answers .jny-lede{margin:0;font-size:16px;line-height:1.62;color:var(--ink-2)}
#answers .jny{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}

#answers .jstep{position:relative;display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);
  border-radius:20px;overflow:hidden;opacity:0;transform:translateY(12px);
  box-shadow:0 10px 30px rgba(15,23,42,.06);
  transition:opacity .5s ease,transform .5s var(--ease-emphasis),box-shadow var(--dur-base),border-color var(--dur-base)}
#answers .jny.is-in .jstep{opacity:1;transform:none}
#answers .jny.is-in .jstep:nth-child(2){transition-delay:.1s}
#answers .jny.is-in .jstep:nth-child(3){transition-delay:.2s}
#answers .jny.is-in .jstep:nth-child(4){transition-delay:.3s}
#answers .jny.is-in .jstep:nth-child(5){transition-delay:.4s}
#answers .jstep:hover{transform:translateY(-4px);box-shadow:0 26px 54px rgba(15,23,42,.14);border-color:rgba(37,84,212,.24)}

/* ---- the panel ---- */
#answers .jmock{position:relative;height:148px;padding:16px 14px 14px;display:flex;flex-direction:column;justify-content:center;gap:9px;
  background:linear-gradient(168deg,#eef4ff 0%,#e4ecfa 62%,#dde7f8 100%);border-bottom:1px solid var(--line);overflow:hidden}
#answers .jmock::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:radial-gradient(circle, rgba(37,84,212,.16) 1px, transparent 1px);background-size:14px 14px;
  -webkit-mask-image:radial-gradient(120% 90% at 30% 0%,#000 20%,transparent 78%);mask-image:radial-gradient(120% 90% at 30% 0%,#000 20%,transparent 78%)}
#answers .jmock::after{content:"";position:absolute;inset:-40%;pointer-events:none;z-index:0;filter:blur(20px);
  background:radial-gradient(closest-side,var(--glow,rgba(79,125,240,.28)),transparent 72%);animation:j-glow 9s ease-in-out infinite}
@keyframes j-glow{0%,100%{transform:translate3d(-6%,-4%,0) scale(1)}50%{transform:translate3d(6%,4%,0) scale(1.06)}}
#answers .jstep--green .jmock{--glow:rgba(0,182,122,.26)}
#answers .jsheen{position:absolute;inset:0;z-index:2;pointer-events:none;overflow:hidden}
#answers .jsheen i{position:absolute;top:-40%;left:-45%;width:34%;height:180%;transform:rotate(16deg);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.75),transparent);animation:j-sheen 8s var(--ease-emphasis) infinite}
@keyframes j-sheen{0%,74%{left:-45%}92%,100%{left:125%}}
#answers .jstep:hover .jsheen i{animation-duration:2.6s}

#answers .jrow{position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:8px;
  background:rgba(255,255,255,.96);border:1px solid rgba(15,23,42,.07);border-radius:11px;padding:8px 10px;
  font-family:var(--font-mono);font-size:10.5px;color:var(--ink-3);box-shadow:0 8px 18px rgba(15,23,42,.07)}
#answers .jrow b{font-size:12.5px;color:var(--ink-1);font-weight:700;font-variant-numeric:tabular-nums}
#answers .jrow--tight{padding:7px 10px}
/* the same chip the product mocks use elsewhere on the page */
#answers .jpill{display:inline-flex;align-items:center;gap:6px;border-radius:var(--radius-pill);padding:5px 11px;
  background:#0d1424;color:#fff;font-family:var(--font-body);font-size:10px;font-weight:600;white-space:nowrap;
  box-shadow:0 10px 20px -10px rgba(7,12,22,.6)}
#answers .jpill--ok{background:#0a7d57}
#answers .jpill--blue{background:linear-gradient(180deg,#4f7df0,#2554d4)}
#answers .jpill i{width:6px;height:6px;border-radius:50%;background:#fff;opacity:.9;animation:pulse-live 2.4s ease-out infinite}
#answers .jcheck path{stroke:#fff}
#answers .jmeta{position:relative;z-index:1;display:flex;align-items:center;gap:7px;font-family:var(--font-mono);
  font-size:9.5px;letter-spacing:.06em;color:var(--ink-3)}
#answers .jmeta .dot{width:6px;height:6px;border-radius:50%;background:var(--dv-green)}

/* 01 - the tick draws itself once the tile is in view */
#answers .jcheck{width:14px;height:14px;flex:0 0 14px}
#answers .jcheck path{fill:none;stroke:#0e9c6f;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:22;stroke-dashoffset:22;transition:stroke-dashoffset .5s var(--ease-emphasis) .8s}
#answers .jstep.is-play .jcheck path{stroke-dashoffset:0}
/* 02 - the signature is written, then the seal presses in */
#answers .jsig{position:relative;z-index:1;height:30px;width:100%;margin-top:-2px}
#answers .jsigname{position:relative;z-index:1;display:flex;align-items:baseline;gap:7px;margin-top:-6px;
  padding-left:2px;font-family:var(--font-mono);font-size:9.5px;letter-spacing:.04em;color:var(--ink-4)}
#answers .jsigname b{font-family:var(--font-body);font-size:11.5px;font-weight:700;color:var(--ink-2);letter-spacing:0}
#answers .jsig path{fill:none;stroke:var(--dv-blue-deep);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:620;stroke-dashoffset:620;transition:stroke-dashoffset 2.1s var(--ease-emphasis) .3s}
#answers .jstep.is-play .jsig path{stroke-dashoffset:0}
#answers .jseal{position:absolute;right:12px;bottom:10px;z-index:3;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;
  color:#fff;background:linear-gradient(180deg,#4f7df0,#2554d4);box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 10px 20px rgba(37,84,212,.34);
  opacity:0;transform:scale(1.6) rotate(-12deg)}
#answers .jstep.is-play .jseal{animation:j-stamp .5s var(--ease-emphasis) 1.5s forwards}
#answers .jseal svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
@keyframes j-stamp{0%{opacity:0;transform:scale(1.6) rotate(-12deg)}60%{opacity:1;transform:scale(.92) rotate(-12deg)}100%{opacity:1;transform:scale(1) rotate(-12deg)}}
/* 03 - the phase bar fills and the day pips light up one by one */
#answers .jbar{position:relative;z-index:1;height:8px;border-radius:100px;background:rgba(15,23,42,.09);overflow:hidden}
#answers .jbar i{display:block;height:100%;width:0;border-radius:100px;background:linear-gradient(90deg,#4f7df0,#2554d4);
  transition:width 1.4s var(--ease-emphasis) .4s}
#answers .jstep.is-play .jbar i{width:var(--w,41%)}
#answers .jpips{display:flex;gap:4px;margin-left:auto}
#answers .jpips span{width:9px;height:4px;border-radius:2px;background:rgba(15,23,42,.14);transition:background .3s ease}
#answers .jstep.is-play .jpips span.on{background:var(--dv-green)}
#answers .jstep.is-play .jpips span.on:nth-child(1){transition-delay:.6s}
#answers .jstep.is-play .jpips span.on:nth-child(2){transition-delay:.75s}
#answers .jstep.is-play .jpips span.on:nth-child(3){transition-delay:.9s}
/* 04 - a small equity line under the balance */
#answers .jspark{position:relative;z-index:1;width:calc(100% - 8px);margin:0 4px;height:26px;display:block}
#answers .jspark .ln{fill:none;stroke:#2554d4;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:190;stroke-dashoffset:190;transition:stroke-dashoffset 1.5s var(--ease-emphasis) .4s}
#answers .jspark .ar{fill:url(#jnyGrad);opacity:0;transition:opacity .8s ease .9s}
#answers .jstep.is-play .jspark .ln{stroke-dashoffset:0}
#answers .jstep.is-play .jspark .ar{opacity:1}
/* 05 - the payout tracker runs from requested to sent */
#answers .jtrack{position:relative;z-index:1;display:flex;align-items:center;gap:0;padding:2px 6px 0}
#answers .jtrack .node{width:9px;height:9px;border-radius:50%;background:rgba(15,23,42,.16);flex:0 0 9px;transition:background .3s ease,box-shadow .3s ease}
#answers .jtrack .line{flex:1 1 auto;height:2px;background:rgba(15,23,42,.12);position:relative;overflow:hidden}
#answers .jtrack .line i{position:absolute;inset:0;width:0;background:linear-gradient(90deg,#4f7df0,#00b67a);transition:width .8s var(--ease-emphasis)}
#answers .jstep.is-play .jtrack .node{background:var(--dv-green);box-shadow:0 0 0 3px rgba(0,182,122,.16)}
#answers .jstep.is-play .jtrack .node:nth-child(3){transition-delay:.9s}
#answers .jstep.is-play .jtrack .node:nth-child(5){transition-delay:1.4s}
#answers .jstep.is-play .jtrack .line:nth-child(2) i{width:100%;transition-delay:.5s}
#answers .jstep.is-play .jtrack .line:nth-child(4) i{width:100%;transition-delay:1s}
#answers .jtlabels{display:flex;justify-content:space-between;padding:0 2px;font-family:var(--font-mono);font-size:8.5px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-4);padding-top:5px}

/* ---- the body ---- */
#answers .jbody{padding:16px 16px 18px;display:flex;flex-direction:column;gap:7px;flex:1}
#answers .jnum{position:absolute;top:10px;left:10px;z-index:3;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;
  font-family:var(--font-mono);font-size:10px;font-weight:700;color:#fff;background:linear-gradient(180deg,#4f7df0,#2554d4);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 6px 14px rgba(37,84,212,.3)}
#answers .jstep--green .jnum{background:linear-gradient(180deg,#22c58e,#0e9c6f);box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 6px 14px rgba(14,156,111,.3)}
#answers .jstep h3{margin:0;font-size:16px;letter-spacing:-.2px}
#answers .jv{font-size:clamp(22px,2.2vw,30px);font-weight:800;letter-spacing:-1.1px;line-height:1.05;color:var(--dv-blue-deep);font-variant-numeric:tabular-nums}
#answers .jstep--green .jv{color:#0e9c6f}
#answers .jstep--plain .jv{color:var(--ink-1)}
#answers .jv small{font-size:14px;font-weight:700;color:var(--ink-3);letter-spacing:0;margin-left:3px}
#answers .jk{font-family:var(--font-mono);font-size:10px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  color:var(--dv-blue-deep);opacity:.8}
#answers .jstep p{margin:4px 0 0;font-size:13.5px;line-height:1.58;color:var(--ink-2)}
#answers .jny-foot{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;
  margin-top:clamp(22px,2.6vw,34px);padding-top:20px;border-top:1px solid var(--line)}
#answers .jny-foot p{margin:0;max-width:62ch;font-size:14px;line-height:1.6;color:var(--ink-3)}
@media (max-width:1200px){#answers .jny{grid-template-columns:repeat(3,1fr)}}
@media (max-width:820px){#answers .jny{grid-template-columns:repeat(2,1fr)}#answers .jny-head{grid-template-columns:1fr}}
@media (max-width:560px){#answers .jny{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){
  #answers .jstep{opacity:1;transform:none;transition:none}
  #answers .jsheen i,#answers .jmock::after{animation:none}
  #answers .jbar i{width:var(--w,41%);transition:none}
  #answers .jsig path,#answers .jspark .ln{stroke-dashoffset:0;transition:none}
  #answers .jspark .ar{opacity:1;transition:none}
  #answers .jseal{opacity:1;transform:rotate(-12deg);animation:none}
  #answers .jtrack .line i{width:100%;transition:none}
}


/* Xoala's stage, but the choices have to produce something you can look at. The
   right-hand panel is a live account card: venue, size, and the corridor the
   account is judged inside, drawn in the money that account actually risks. */
#compare{padding:clamp(40px,5vw,84px) 0}
#compare .cf-top{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(20px,3vw,48px);align-items:end;margin-bottom:clamp(22px,2.6vw,34px)}
#compare .cf-top h2{color:#fff;margin:.3em 0 0;font-size:clamp(28px,3.4vw,44px);line-height:1.06;letter-spacing:-1.2px}
#compare .cf-eyebrow{margin:0;font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#8fb2e6}
#compare .cf-lede{margin:0;font-size:15px;line-height:1.62;color:rgba(255,255,255,.66)}
#compare .cf-note{display:inline-flex;align-items:center;gap:9px;margin-top:14px;font-size:13px;color:rgba(255,255,255,.72)}
#compare .cf-note i{width:7px;height:7px;border-radius:50%;background:var(--dv-green);animation:pulse-live 2.4s ease-out infinite}

#compare .cf-panel{display:grid;grid-template-columns:1.2fr .8fr;gap:0;background:#fff;color:var(--ink-1);
  border-radius:22px;overflow:hidden;box-shadow:0 26px 60px rgba(4,8,18,.34)}
#compare .cf-build{padding:clamp(20px,2.4vw,30px)}
#compare .cf-sum{padding:clamp(20px,2.4vw,28px);background:linear-gradient(180deg,#f6f9fe,#eaf1fb);
  border-left:1px solid rgba(15,23,42,.08);display:flex;flex-direction:column;gap:14px}
#compare .cf-tabs{position:relative;display:flex;gap:6px;padding:5px;border-radius:100px;background:rgba(15,23,42,.05);
  margin-bottom:20px;flex-wrap:nowrap;overflow:hidden}
/* the active pill slides between markets instead of blinking on and off */
#compare .cf-thumb{position:absolute;top:5px;bottom:5px;left:0;width:0;border-radius:100px;pointer-events:none;
  background:linear-gradient(180deg,#4f7df0,#2554d4);box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 6px 16px rgba(37,84,212,.3);
  transform:translateX(0);transition:transform .42s var(--ease-emphasis),width .42s var(--ease-emphasis)}
@media (max-width:760px){#compare .cf-tabs{flex-wrap:wrap;overflow:visible}#compare .cf-thumb{display:none}}
#compare .cf-tab{flex:1 1 auto;display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;background:none;
  cursor:pointer;border-radius:100px;padding:9px 14px;font-family:var(--font-display);font-size:14px;font-weight:650;color:var(--ink-3);
  transition:color var(--dur-quick),background var(--dur-quick)}
#compare .cf-tab img{width:18px;height:18px;border-radius:50%;filter:grayscale(1);opacity:.55;transition:filter var(--dur-quick),opacity var(--dur-quick)}
#compare .cf-tab:hover{color:var(--ink-1)}
#compare .cf-tab:hover img{filter:none;opacity:.9}
#compare .cf-tab{position:relative;z-index:1}
#compare .cf-tab.is-on{color:#fff}
@media (max-width:760px){#compare .cf-tab.is-on{background:linear-gradient(180deg,#4f7df0,#2554d4);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 6px 16px rgba(37,84,212,.3)}}
#compare .cf-tab.is-on img{filter:none;opacity:1}
#compare .cf-row{margin-bottom:18px}
#compare .cf-row + .cf-row{border-top:1px solid rgba(15,23,42,.07);padding-top:16px}
#compare .cf-lbl{display:flex;align-items:baseline;justify-content:space-between;gap:10px;font-family:var(--font-mono);font-size:10px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);margin-bottom:9px}
#compare .cf-lbl .n{display:inline-flex;align-items:center;justify-content:center;width:17px;height:17px;border-radius:50%;
  margin-right:8px;font-size:9px;color:#fff;background:var(--dv-blue-deep)}
#compare .cf-lbl em{font-style:normal;letter-spacing:.04em;text-transform:none;font-size:11px;color:var(--ink-4)}
#compare .cf-opts{display:flex;flex-wrap:wrap;gap:8px}
#compare .cf-opt{position:relative;border:1px solid rgba(15,23,42,.12);background:#fff;border-radius:12px;padding:9px 14px;cursor:pointer;
  font-family:var(--font-display);font-size:13.5px;font-weight:650;color:var(--ink-2);
  transition:border-color var(--dur-quick),color var(--dur-quick),transform var(--dur-quick),box-shadow var(--dur-quick)}
#compare .cf-opt small{display:block;font-weight:500;font-size:11px;color:var(--ink-3);margin-top:2px}
#compare .cf-opt:hover{border-color:rgba(37,84,212,.4);transform:translateY(-1px);box-shadow:0 8px 18px rgba(15,23,42,.08)}
#compare .cf-opt.is-on{color:#fff;border-color:transparent;background:linear-gradient(180deg,#4f7df0,#2554d4);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 8px 20px rgba(37,84,212,.28)}
#compare .cf-opt.is-on small{color:rgba(255,255,255,.8)}
#compare .cf-opt b{color:#2554d4;font-weight:800}
#compare .cf-opt.is-on b{color:#fff}
#compare .cf-opt.is-minus b{color:#0e9c6f}
/* the platform row carries the real marks; the chip stays white in both states
   so a dark logo survives the blue selected fill */
#compare .cf-opts[data-opts="platform"] .cf-opt{display:flex;align-items:center;gap:11px;padding:8px 15px 8px 8px;text-align:left}
#compare .cf-plogo{flex:0 0 auto;display:grid;place-items:center;width:30px;height:30px;border-radius:10px;background:#fff;
  border:1px solid rgba(15,23,42,.10);box-shadow:0 1px 2px rgba(15,23,42,.06);
  transition:border-color var(--dur-quick),box-shadow var(--dur-quick),transform var(--dur-quick)}
#compare .cf-plogo img{width:20px;height:20px;object-fit:contain;display:block}
#compare .cf-opt:hover .cf-plogo{transform:scale(1.04)}
#compare .cf-opt.is-on .cf-plogo{border-color:transparent;box-shadow:0 3px 8px rgba(9,20,48,.22)}
#compare .cf-ptx{display:block;min-width:0}
@media (max-width:520px){#compare .cf-opts[data-opts="platform"] .cf-opt{width:100%}}
/* what every account carries, whatever the selection - fills the column and says
   the thing the price alone does not */
#compare .cf-incl{list-style:none;margin:26px 0 0;padding:18px 0 0;border-top:1px solid rgba(15,23,42,.08);
  display:grid;gap:10px}
#compare .cf-incl li{position:relative;padding-left:26px;font-size:13.5px;line-height:1.5;color:var(--ink-2)}
#compare .cf-incl li::before{content:"";position:absolute;left:0;top:2px;width:17px;height:17px;border-radius:50%;
  background:rgba(0,182,122,.12);border:1px solid rgba(0,182,122,.3)}
#compare .cf-incl li::after{content:"";position:absolute;left:5px;top:7px;width:7px;height:4px;
  border-left:2px solid #0e9c6f;border-bottom:2px solid #0e9c6f;transform:rotate(-45deg)}

/* ---- the live account card ----
   Same anatomy as the tiles in the payment-to-payout row: a pale panel with the
   product laid on white rows inside it. Only two accents on this page, the brand
   blue and the green - the corridor uses slate for the loss side rather than a
   red that appears nowhere else. */
#compare .cf-card{position:relative;overflow:hidden;border-radius:16px;padding:14px;
  background:linear-gradient(168deg,#eef4ff 0%,#e4ecfa 62%,#dde7f8 100%);border:1px solid rgba(15,23,42,.07);
  box-shadow:0 14px 30px rgba(15,23,42,.1)}
#compare .cf-card::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:radial-gradient(circle, rgba(37,84,212,.16) 1px, transparent 1px);background-size:14px 14px;
  -webkit-mask-image:radial-gradient(120% 90% at 25% 0%,#000 18%,transparent 78%);mask-image:radial-gradient(120% 90% at 25% 0%,#000 18%,transparent 78%)}
#compare .cf-sheen{position:absolute;inset:0;z-index:2;pointer-events:none;overflow:hidden}
#compare .cf-sheen i{position:absolute;top:-40%;left:-45%;width:34%;height:180%;transform:rotate(16deg);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.75),transparent);animation:cf-sheen 9s var(--ease-emphasis) infinite}
@keyframes cf-sheen{0%,76%{left:-45%}94%,100%{left:125%}}
#compare .cf-card__h{position:relative;z-index:1;display:flex;align-items:center;gap:11px;
  background:rgba(255,255,255,.96);border:1px solid rgba(15,23,42,.07);border-radius:11px;padding:9px 11px;
  box-shadow:0 8px 18px rgba(15,23,42,.07)}
#compare .cf-card__h img{width:28px;height:28px;border-radius:50%}
#compare .cf-card__h b{display:block;font-size:14px;letter-spacing:-.2px;color:var(--ink-1)}
#compare .cf-card__h span{display:block;font-family:var(--font-mono);font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-3);margin-top:2px}
#compare .cf-corr{position:relative;z-index:1;margin-top:9px;background:rgba(255,255,255,.96);border:1px solid rgba(15,23,42,.07);
  border-radius:11px;padding:11px;box-shadow:0 8px 18px rgba(15,23,42,.07)}
#compare .cf-bar{position:relative;height:10px;border-radius:100px;background:rgba(15,23,42,.07);overflow:hidden;display:flex}
#compare .cf-bar i{display:block;height:100%;width:0;transition:width .7s var(--ease-emphasis)}
#compare .cf-bar .loss{background:linear-gradient(90deg,#33527d,#5b7aa8)}
#compare .cf-bar .gain{margin-left:auto;background:linear-gradient(90deg,#22c58e,#0e9c6f)}
#compare .cf-bar .daily{position:absolute;top:-3px;bottom:-3px;width:2px;background:var(--dv-blue-deep);border-radius:2px;
  left:0;transition:left .7s var(--ease-emphasis);box-shadow:0 0 0 3px rgba(51,82,125,.16)}
#compare .cf-corr__l{display:flex;justify-content:space-between;gap:8px;margin-top:10px;font-family:var(--font-mono);font-size:9.5px;
  letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
#compare .cf-corr__l b{display:block;font-family:var(--font-body);font-size:12.5px;font-weight:700;letter-spacing:0;margin-top:3px;
  font-variant-numeric:tabular-nums;color:var(--ink-1)}
#compare .cf-corr__l .loss b{color:var(--dv-blue-deep)}
#compare .cf-corr__l .mid{text-align:center}
#compare .cf-corr__l .gain{text-align:right}
#compare .cf-corr__l .gain b{color:#0e9c6f}
#compare .cf-daily{position:relative;z-index:1;margin-top:9px;display:flex;align-items:center;justify-content:space-between;gap:8px;
  background:rgba(255,255,255,.96);border:1px solid rgba(15,23,42,.07);border-radius:11px;padding:9px 11px;
  font-family:var(--font-mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);
  box-shadow:0 8px 18px rgba(15,23,42,.07)}
#compare .cf-daily b{font-family:var(--font-body);font-size:12.5px;color:var(--dv-blue-deep);letter-spacing:0;font-variant-numeric:tabular-nums}
#compare .cf-price{display:flex;align-items:baseline;gap:10px}
#compare .cf-price .v{font-size:clamp(32px,3.8vw,46px);font-weight:800;letter-spacing:-2px;line-height:1;font-variant-numeric:tabular-nums}
#compare .cf-price .o{font-size:13px;color:var(--ink-3)}
#compare .cf-kick{font-family:var(--font-mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
#compare .cf-specs{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
#compare .cf-specs li{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:8px 0;
  border-top:1px solid rgba(15,23,42,.08);font-size:13px;color:var(--ink-3)}
#compare .cf-specs li b{font-size:13.5px;font-weight:700;color:var(--ink-1);text-align:right;font-variant-numeric:tabular-nums}
#compare .cf-specs li b em{display:block;font-style:normal;font-family:var(--font-mono);font-size:10px;font-weight:500;color:var(--ink-3);margin-top:1px}
#compare .cf-specs li{opacity:0;transform:translateY(6px);animation:cf-rowin .42s var(--ease-emphasis) forwards}
#compare .cf-specs li:nth-child(1){animation-delay:.02s}
#compare .cf-specs li:nth-child(2){animation-delay:.06s}
#compare .cf-specs li:nth-child(3){animation-delay:.1s}
#compare .cf-specs li:nth-child(4){animation-delay:.14s}
#compare .cf-specs li:nth-child(5){animation-delay:.18s}
#compare .cf-specs li:nth-child(6){animation-delay:.22s}
#compare .cf-specs li:nth-child(7){animation-delay:.26s}
#compare .cf-specs li:nth-child(8){animation-delay:.3s}
#compare .cf-specs li:nth-child(9){animation-delay:.34s}
#compare .cf-specs li:nth-child(10){animation-delay:.38s}
@keyframes cf-rowin{to{opacity:1;transform:none}}
/* the panel keeps the height of its tallest combination, measured once, so the
   section does not jump when the market changes */
#compare .cf-panel{min-height:var(--cf-h,0px)}
#compare .cf-specs{min-height:var(--cf-sh,0px)}
#compare .cf-card{transition:box-shadow .4s ease}
#compare .cf-card.is-pulse{box-shadow:0 14px 30px rgba(15,23,42,.1),0 0 0 3px rgba(37,84,212,.16)}
#compare .cf-sum .x-cta{height:50px;padding:0 60px 0 24px;font-size:15px;margin-top:2px}
#compare .cf-fine{font-size:12px;line-height:1.55;color:var(--ink-3);margin:0}
@media (max-width:1000px){
  #compare .cf-top{grid-template-columns:1fr}
  #compare .cf-panel{grid-template-columns:1fr}
  #compare .cf-sum{border-left:0;border-top:1px solid rgba(15,23,42,.08)}
}
@media(prefers-reduced-motion:reduce){#compare .cf-sheen i{animation:none}#compare .cf-note i{animation:none}
  #compare .cf-specs li{opacity:1;transform:none;animation:none}#compare .cf-thumb{transition:none}}


#card{overflow:hidden}
#card .dcx-top{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(24px,4vw,64px);align-items:end}
#card .dcx-head h2{margin:.35em 0 0}
#card .dcx-intro{display:flex;flex-direction:column;align-items:flex-start;gap:22px;padding-bottom:6px}
#card .dcx-intro .lead{margin:0}
#card .dcx-cta{display:inline-flex;align-items:center;gap:9px;border:1px solid rgba(15,23,42,.18);border-radius:100px;padding:12px 22px;font-weight:650;font-size:15px;color:var(--ink-1);text-decoration:none;transition:background .2s,border-color .2s}
#card .dcx-cta:hover{background:rgba(15,23,42,.04);border-color:rgba(15,23,42,.32)}
#card .dcx-stage{display:grid;grid-template-columns:1fr minmax(340px,620px) 1fr;gap:clamp(18px,3vw,52px);align-items:center;margin-top:clamp(28px,4vw,54px)}
#card .dcx-col{display:flex;flex-direction:column;gap:clamp(30px,4vw,56px);justify-content:center}
#card .dcx-left{text-align:right}
#card .dcx-feat .t{font-weight:700;font-size:18px;color:var(--ink-1);letter-spacing:-.2px}
#card .dcx-feat .d{margin-top:7px;font-size:14.5px;line-height:1.5;color:rgba(15,23,42,.6)}
#card .dcx-cardwrap{position:relative;display:flex;align-items:center;justify-content:center;padding:14px 0}
#card .dcx-card{position:relative;z-index:2;width:100%;transform-style:preserve-3d;will-change:transform;
  transition:transform var(--dur-slow,.55s) var(--ease-emphasis,cubic-bezier(.22,1,.36,1))}
#card .dcx-card img{display:block;width:100%;height:auto;filter:drop-shadow(0 34px 46px rgba(15,23,42,.34))}
#card .dcx-banner{display:flex;align-items:center;gap:22px;margin-top:clamp(34px,4vw,56px);
  border:1px solid rgba(15,23,42,.1);border-radius:18px;padding:20px 24px;background:rgba(15,23,42,.022)}
#card .dcx-banner .b-badge{flex:0 0 auto;width:56px;height:56px;border-radius:14px;border:1px dashed rgba(15,23,42,.22);
  display:flex;align-items:center;justify-content:center;color:rgba(15,23,42,.4)}
#card .dcx-banner .b-badge svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.7}
#card .dcx-banner .b-body{flex:1 1 auto;min-width:0}
#card .dcx-banner .b-kick{display:inline-flex;align-items:center;gap:8px;font-size:11.5px;font-weight:700;
  letter-spacing:1.1px;text-transform:uppercase;color:#3550e6}
#card .dcx-banner .b-kick::before{content:"";width:7px;height:7px;border-radius:50%;background:#3550e6}
#card .dcx-banner .b-text{margin-top:6px;font-size:14.5px;line-height:1.5;color:rgba(15,23,42,.64)}
#card .dcx-banner .b-text b{color:var(--ink-1);font-weight:700}
#card .dcx-banner .b-cta{flex:0 0 auto;display:inline-flex;align-items:center;gap:8px;border:1px solid rgba(15,23,42,.18);
  border-radius:100px;padding:12px 22px;font-weight:650;font-size:14px;color:var(--ink-1);text-decoration:none;
  transition:background .2s,border-color .2s}
#card .dcx-banner .b-cta:hover{background:rgba(15,23,42,.04);border-color:rgba(15,23,42,.32)}
@media (max-width:720px){#card .dcx-banner{flex-direction:column;align-items:flex-start;gap:16px}
  #card .dcx-banner .b-cta{width:100%;justify-content:center}}
@media (max-width:900px){
  #card .dcx-top{grid-template-columns:1fr}
  #card .dcx-stage{grid-template-columns:1fr;gap:26px}
  #card .dcx-left{text-align:left}
  #card .dcx-col{gap:26px}
  #card .dcx-cardwrap{order:-1}
}


#card .dcx-cardwrap{overflow:visible}
#card .dcx-cardfloat{position:relative;animation:dcx-float 6s ease-in-out infinite;will-change:transform}
#card .dcx-card{position:relative;z-index:2;background:transparent!important}
#card .dcx-cur{position:absolute;z-index:3;display:grid;place-items:center;width:46px;height:46px;border-radius:14px;
  background:#fff;color:var(--dv-blue-deep);font-weight:800;font-size:20px;line-height:1;
  box-shadow:0 16px 34px -12px rgba(15,23,42,.32);border:1px solid rgba(15,23,42,.05)}
#card .dcx-cur--usd{left:-5%;top:10%;animation:dcx-drA 7s ease-in-out infinite}
#card .dcx-cur--eur{left:0%;bottom:8%;animation:dcx-drB 8s ease-in-out infinite}
#card .dcx-cur--gbp{right:-4%;top:18%;animation:dcx-drB 6.5s ease-in-out infinite}
#card .dcx-cur--btc{right:0%;bottom:12%;color:#e0820a;animation:dcx-drA 7.5s ease-in-out infinite}
/* blue ledger button highlight */
#card .dcx-ledger{position:relative;border-radius:100px;animation:dcx-cta-pulse 2.8s ease-in-out infinite}
@keyframes dcx-cta-pulse{0%,100%{box-shadow:0 10px 26px rgba(37,84,212,.34)}50%{box-shadow:0 14px 36px rgba(37,84,212,.55),0 0 0 7px rgba(37,84,212,.10)}}
/* feature texts: pulsing accent + hover lift + colour shift */
#card .dcx-feat{transition:transform .25s var(--ease-emphasis,ease)}
#card .dcx-feat:hover{transform:translateY(-3px)}
#card .dcx-feat .t{transition:color .2s}
#card .dcx-feat:hover .t{color:#2554d4}
#card .dcx-feat .t::before{content:"";display:inline-block;width:7px;height:7px;margin-right:9px;border-radius:50%;background:#2554d4;vertical-align:middle;animation:dcx-dot 2.6s ease-out infinite}
#card .dcx-right .dcx-feat .t::before{background:#00b67a}
@keyframes dcx-dot{0%{box-shadow:0 0 0 0 rgba(37,84,212,.55)}70%{box-shadow:0 0 0 8px rgba(37,84,212,0)}100%{box-shadow:0 0 0 0 rgba(37,84,212,0)}}
#card .dcx-right .dcx-feat .t::before{animation-name:dcx-dot-g}
@keyframes dcx-dot-g{0%{box-shadow:0 0 0 0 rgba(0,182,122,.55)}70%{box-shadow:0 0 0 8px rgba(0,182,122,0)}100%{box-shadow:0 0 0 0 rgba(0,182,122,0)}}
@keyframes dcx-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
@keyframes dcx-pulse{0%,100%{opacity:.55;transform:translate(-50%,-50%) scale(1)}50%{opacity:.9;transform:translate(-50%,-50%) scale(1.06)}}
@keyframes dcx-drA{0%,100%{transform:translateY(0)}50%{transform:translateY(-11px)}}
@keyframes dcx-drB{0%,100%{transform:translateY(0)}50%{transform:translateY(9px)}}
@media(prefers-reduced-motion:reduce){#card .dcx-cardfloat,#card .dcx-cur,#card .dcx-ledger,#card .dcx-feat .t::before{animation:none}}
@media(max-width:860px){#card .dcx-cur{display:none}}


/* ---- DRAMATIC DARK CARD SHOWCASE ---- */
#card{position:relative;overflow:hidden;color:#fff;
  background:radial-gradient(130% 100% at 50% -12%, #1a2c4f 0%, #0d1526 46%, #070a12 100%) !important}
/* ---- moving background (shared drift look, dark aurora) ---- */
#card .cardbg{position:absolute;inset:0;z-index:0;overflow:hidden}
#card .bg__canvas{position:absolute;inset:0;width:100%;height:100%;display:block;opacity:0;transition:opacity 1.1s ease}
#card .bg__canvas.is-live{opacity:1}
body.gl-on #card .bg__aurora{display:none}
#card .bg__aurora{position:absolute;inset:-25%;filter:blur(90px);opacity:.9}
#card .blob{position:absolute;border-radius:50%;mix-blend-mode:screen;will-change:transform}
#card .blob--a{width:64vmax;height:64vmax;left:-16%;top:-24%;background:radial-gradient(circle at 36% 36%, rgba(37,84,212,.7) 0%, rgba(37,84,212,.24) 42%, transparent 68%);animation:driftA 52s ease-in-out infinite}
#card .blob--b{width:54vmax;height:54vmax;right:-14%;top:0%;background:radial-gradient(circle at 60% 40%, rgba(79,125,240,.55) 0%, rgba(79,125,240,.16) 44%, transparent 70%);animation:driftB 64s ease-in-out infinite}
#card .blob--c{width:50vmax;height:50vmax;left:18%;bottom:-26%;background:radial-gradient(circle at 50% 50%, rgba(147,184,255,.3) 0%, rgba(74,111,165,.12) 46%, transparent 72%);animation:driftC 46s ease-in-out infinite}
#card .blob--d{width:38vmax;height:38vmax;left:44%;top:22%;background:radial-gradient(circle at 50% 50%, rgba(28,47,79,.8) 0%, rgba(28,47,79,.26) 50%, transparent 74%);animation:driftD 58s ease-in-out infinite}
#card .bg__grid{position:absolute;inset:0;background-image:radial-gradient(circle, rgba(255,255,255,.05) 1px, transparent 1px);background-size:24px 24px;-webkit-mask:radial-gradient(120% 80% at 50% 24%,#000 28%,transparent 74%);mask:radial-gradient(120% 80% at 50% 24%,#000 28%,transparent 74%)}
@media(prefers-reduced-motion:reduce){#card .blob{animation:none}}
#card > .wrap{position:relative;z-index:1}
/* text -> light */
#card .eyebrow{color:#8fb0da !important}
#card .dcx-top h2{color:#fff !important;font-size:clamp(36px,5vw,64px) !important;letter-spacing:-1.6px;line-height:1.02}
#card .dcx-intro .lead{color:rgba(255,255,255,.68) !important}
#card .dcx-feat .t{color:#fff !important;font-size:19px !important}
#card .dcx-feat .d{color:rgba(255,255,255,.6) !important}
/* banner -> dark */
#card .dcx-banner{background:rgba(255,255,255,.04) !important;border-color:rgba(255,255,255,.12) !important}
#card .dcx-banner .b-text{color:rgba(255,255,255,.62) !important}
#card .dcx-banner .b-text b{color:#fff !important}
#card .dcx-banner .b-badge{border-color:rgba(255,255,255,.22) !important;color:rgba(255,255,255,.55) !important}
#card .dcx-banner .b-cta{color:#fff !important;border-color:rgba(255,255,255,.24) !important}
#card .dcx-banner .b-cta:hover{background:rgba(255,255,255,.08) !important;border-color:rgba(255,255,255,.4) !important}
/* BIG card */
#card .dcx-stage{grid-template-columns:1fr minmax(460px,820px) 1fr !important;gap:clamp(16px,2.4vw,44px) !important}
#card .dcx-card{background:transparent !important}
#card .dcx-card img{filter:drop-shadow(0 50px 70px rgba(0,0,0,.65)) drop-shadow(0 0 30px rgba(60,110,240,.10)) !important}
/* BIG glow behind card (reads as light on dark, never a box) */
#card .dcx-glow{position:absolute;left:50%;top:50%;width:128%;height:118%;transform:translate(-50%,-50%);z-index:0;border-radius:50%;
  background:radial-gradient(closest-side, rgba(64,120,245,.5), rgba(37,84,212,.2) 44%, rgba(37,84,212,0) 72%);filter:blur(34px);
  animation:dcx-pulse 6s ease-in-out infinite}
#card .dcx-cardfloat{position:relative;animation:dcx-float 6s ease-in-out infinite;will-change:transform}
/* currency chips glow on dark */
#card .dcx-cur{box-shadow:0 18px 40px -10px rgba(0,0,0,.5),0 0 0 1px rgba(255,255,255,.06) !important}
/* feature hover on dark */
#card .dcx-feat:hover .t{color:#9db8e8 !important}
@keyframes dcx-pulse{0%,100%{opacity:.7;transform:translate(-50%,-50%) scale(1)}50%{opacity:1;transform:translate(-50%,-50%) scale(1.05)}}
@media(prefers-reduced-motion:reduce){#card .dcx-glow{animation:none}}
/* the drama grid above is !important; on narrow screens it has to fold back to one column */
@media(max-width:900px){#card .dcx-stage{grid-template-columns:1fr !important;gap:26px !important}#card .dcx-cardwrap{max-width:520px;margin:0 auto;width:100%}}


/* Why Dolvero. Xoala's bento: one dark hero tile, white tiles around it, an arrow in
   every corner, a chip row of facts under the headline. Every tile carries its own
   motion, started only when the section is on screen; nothing here is a stat the
   ledger section below already prints. */
#why .why-head{text-align:center;max-width:900px;margin:0 auto var(--space-9)}
#why .why-head h2{margin:var(--space-4) 0 0}
#why .why-head .lead{margin:var(--space-5) auto 0;max-width:66ch}
#why .why-chips{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin:var(--space-7) 0 0;padding:0}
#why .why-chips .chip{font-size:13px;padding:8px 14px;opacity:0;transform:translateY(10px);transition:opacity .5s,transform .5s}
#why.is-in .why-chips .chip{opacity:1;transform:none}
#why.is-in .why-chips .chip:nth-child(2){transition-delay:.06s}#why.is-in .why-chips .chip:nth-child(3){transition-delay:.12s}
#why.is-in .why-chips .chip:nth-child(4){transition-delay:.18s}#why.is-in .why-chips .chip:nth-child(5){transition-delay:.24s}#why.is-in .why-chips .chip:nth-child(6){transition-delay:.3s}
#why .why-chips .chip svg{width:14px;height:14px;stroke:var(--dv-green);fill:none;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}

#why .why-bento{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));grid-auto-rows:minmax(200px,auto);gap:16px}
#why .wt{position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--radius-xl);padding:24px;overflow:hidden;display:flex;flex-direction:column;gap:12px;min-width:0;
  box-shadow:0 22px 44px -34px rgba(15,23,42,.28);transition:transform .55s cubic-bezier(.2,.7,.2,1),box-shadow .55s}
#why .wt:hover{transform:translateY(-4px);box-shadow:0 34px 60px -34px rgba(15,23,42,.36)}
#why .wt::before{content:"";position:absolute;top:-40%;bottom:-40%;left:-30%;width:26%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.7),transparent);transform:skewX(-18deg) translateX(-160%);pointer-events:none;z-index:1;opacity:0}
#why.is-in .wt::before{animation:why-sweep 9s cubic-bezier(.4,0,.2,1) infinite;animation-delay:calc(var(--k,0)*1.1s)}
@keyframes why-sweep{0%{transform:skewX(-18deg) translateX(-160%);opacity:0}6%{opacity:1}22%{transform:skewX(-18deg) translateX(620%);opacity:0}100%{transform:skewX(-18deg) translateX(620%);opacity:0}}
#why .wt>*{position:relative;z-index:2}
#why .wt h3{font-family:var(--font-display);font-size:19px;font-weight:700;letter-spacing:-.01em;margin:0;color:var(--ink-1);padding-right:44px}
#why .wt p{margin:0;font-size:14px;line-height:1.55;color:var(--ink-2)}
#why .wt-arrow{position:absolute;top:18px;right:18px;width:34px;height:34px;border-radius:50%;border:1px solid var(--line);background:#fff;display:grid;place-items:center;color:var(--ink-1);transition:background .3s,color .3s,transform .3s}
#why .wt-arrow svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
#why .wt:hover .wt-arrow{background:var(--dv-blue);color:#fff;border-color:var(--dv-blue);transform:translate(2px,-2px)}
#why .wt-vis{margin-top:auto;position:relative}
#why .wt--spread .wt-vis{margin:auto 0;padding:26px 0 14px}
#why .wt--spread .sp-rows{gap:24px}
#why .wt--spread .sp-rows li i{height:12px}
#why .wt--spread .sp-rows li{font-size:14.5px}
#why .sp-strip{margin-top:auto;padding-top:16px;border-top:1px solid var(--line-2);overflow:hidden;-webkit-mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
#why .sp-strip ul{list-style:none;margin:0;padding:0;display:flex;gap:28px;width:max-content;animation:why-strip 38s linear infinite}
#why .sp-strip li{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-mono);font-size:12px;color:var(--ink-3);white-space:nowrap}
#why .sp-strip li b{color:var(--ink-1);font-weight:600}#why .sp-strip li img{width:16px;height:16px}
@keyframes why-strip{to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){#why .sp-strip ul{animation:none}}
#why .wt--dark{background:linear-gradient(160deg,#101c38 0%,#0b1120 70%);border-color:rgba(147,184,255,.18);color:#fff}
#why .wt--dark h3{color:#fff}#why .wt--dark p{color:rgba(255,255,255,.7)}
#why .wt--dark .wt-arrow{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.16);color:#fff}
#why .wt--spread::after{content:"";position:absolute;inset:auto -20% -40% auto;width:60%;aspect-ratio:1;border-radius:50%;background:radial-gradient(closest-side,rgba(74,111,165,.16),transparent);pointer-events:none}

/* tile placement */
#why .wt--spread{grid-column:span 7;grid-row:span 2}
#why .wt--backed{grid-column:span 5}
#why .wt--markets{grid-column:span 5}
#why .wt--platform,#why .wt--rules,#why .wt--venue{grid-column:span 4}
#why .wt--sign{grid-column:span 12;flex-direction:row;align-items:center;gap:28px;flex-wrap:wrap}
@media(max-width:1080px){#why .wt--spread{grid-column:span 12;grid-row:span 1}#why .wt--backed,#why .wt--markets{grid-column:span 6}#why .wt--platform,#why .wt--rules,#why .wt--venue{grid-column:span 4}}
@media(max-width:820px){#why .wt--platform,#why .wt--rules,#why .wt--venue{grid-column:span 6}}
@media(max-width:600px){#why .why-bento>.wt{grid-column:span 12}#why .wt--sign{flex-direction:column;align-items:flex-start}}

/* 1 · spreads: the number falls to the raw feed, the tape ticks, the bars fill */
#why .sp{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:28px;align-items:center}
@media(max-width:600px){#why .sp{grid-template-columns:1fr}}
#why .sp-big{display:flex;flex-direction:column;gap:6px;min-width:0;overflow:hidden}
#why .sp-num{font-family:var(--font-display);font-size:clamp(48px,6.2vw,92px);font-weight:700;letter-spacing:-.04em;line-height:.95;color:var(--dv-blue);font-variant-numeric:tabular-nums;white-space:nowrap}
#why .sp-num small{font-size:.32em;font-weight:600;letter-spacing:0;color:var(--ink-3);margin-left:8px}
#why .sp-sym{font-size:12px;letter-spacing:.11em;text-transform:uppercase;color:var(--ink-3);font-weight:600}
#why .sp-tape{display:inline-flex;align-items:center;gap:10px;margin-top:14px;padding:8px 12px;border-radius:var(--radius-pill);background:var(--dv-blue-soft);border:1px solid var(--line);font-family:var(--font-mono);font-size:13px;color:var(--ink-1);width:max-content;max-width:100%}
#why .sp-tape .b{color:var(--dv-blue)}#why .sp-tape .a{color:#0a7d57}
#why .sp-tape .live{display:inline-flex;align-items:center;gap:6px;white-space:nowrap;font-family:var(--font-body);font-size:11px;color:var(--ink-3);letter-spacing:.04em}
#why .sp-tape .live i{width:7px;height:7px;border-radius:50%;background:var(--dv-green);box-shadow:0 0 0 0 rgba(0,182,122,.6);animation:why-ping 1.8s infinite}
@keyframes why-ping{0%{box-shadow:0 0 0 0 rgba(0,182,122,.55)}100%{box-shadow:0 0 0 9px rgba(0,182,122,0)}}
#why .sp-rows{list-style:none;margin:0;padding:0;display:grid;gap:14px}
#why .sp-rows li{display:grid;grid-template-columns:68px 1fr 78px;align-items:center;gap:12px;font-size:13.5px;color:var(--ink-2)}
#why .sp-rows li span{font-family:var(--font-mono);font-weight:600;color:var(--ink-1)}
#why .sp-rows li i{display:block;height:8px;border-radius:3px;background:rgba(15,23,42,.07);overflow:hidden}
#why .sp-rows li i b{display:block;height:100%;width:0;border-radius:3px;background:linear-gradient(90deg,#2554d4,#4f7df0 60%,#8ec5ff);transition:width 1.1s cubic-bezier(.2,.7,.2,1)}
#why.is-in .sp-rows li i b{width:var(--w)}
#why.is-in .sp-rows li:nth-child(2) i b{transition-delay:.1s}#why.is-in .sp-rows li:nth-child(3) i b{transition-delay:.2s}#why.is-in .sp-rows li:nth-child(4) i b{transition-delay:.3s}#why.is-in .sp-rows li:nth-child(5) i b{transition-delay:.4s}
#why .sp-rows li em{font-style:normal;font-family:var(--font-mono);text-align:right;color:var(--ink-1)}
#why .sp-big{transition:opacity .3s,transform .3s}#why .sp-big.is-swap{opacity:0;transform:translateY(6px)}
#why .sp-tape img{width:18px;height:18px;margin-right:2px}
#why .sp-ribbon{width:100%;height:auto;display:block;margin-top:16px;border-radius:12px;background:var(--dv-blue-soft);border:1px solid var(--line-2)}
#why .sp-gapfill{fill:rgba(74,111,165,.22)}#why .sp-askline{stroke:#0a7d57;stroke-width:1.6;fill:none;stroke-linejoin:round}#why .sp-bidline{stroke:var(--dv-blue);stroke-width:1.6;fill:none;stroke-linejoin:round}
#why .sp-lbl{font:600 9px var(--font-mono);fill:var(--ink-3);letter-spacing:.06em}
#why .sp-tagbox{fill:#fff;stroke:rgba(74,111,165,.45)}#why .sp-tagtxt{font:600 9.5px var(--font-mono);fill:var(--dv-blue)}
#why .sp-rows li{transition:transform .4s}#why .sp-rows li.is-on{transform:translateX(4px)}#why .sp-rows li.is-on span,#why .sp-rows li.is-on em{color:var(--dv-blue)}#why .sp-rows li.is-on i b{box-shadow:0 0 0 3px rgba(74,111,165,.18)}
#why .wt-cert{display:inline-flex;align-items:center;gap:6px;width:max-content;font-size:11.5px;font-weight:600;color:#0a7d57;background:var(--dv-green-soft);border-radius:var(--radius-pill);padding:4px 10px}
#why .wt-cert svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
#why .sp-foot{margin-top:12px;font-size:12px;color:rgba(255,255,255,.55)}
#why .sp-foot b{color:rgba(255,255,255,.85);font-weight:600}

/* 2 · backed: flow runs brokerage → Dolvero ← hedge fund, pulses leave the centre */
#why .bk{margin-top:4px}
#why .bk svg{width:100%;height:auto;display:block;overflow:visible}
#why .bk-line{stroke:rgba(74,111,165,.35);stroke-width:2;fill:none}
#why .bk-flow{stroke:var(--dv-blue);stroke-width:2;fill:none;stroke-dasharray:6 10;stroke-linecap:round;animation:why-flow 1.6s linear infinite}
@keyframes why-flow{to{stroke-dashoffset:-32}}
#why .bk-node{fill:#fff;stroke:rgba(15,23,42,.14);stroke-width:1}
#why .bk-t{font:600 11px var(--font-body);fill:var(--ink-1)}
#why .bk-s{font:500 9.5px var(--font-body);fill:var(--ink-3)}
#why .bk-pulse{fill:none;stroke:var(--dv-blue);stroke-width:1.5;opacity:0;transform-origin:160px 62px;animation:why-pulse 2.8s ease-out infinite}
#why .bk-pulse:nth-of-type(2){animation-delay:1.4s}
#why .bk-core{transform-origin:160px 62px;animation:why-breathe 2.8s ease-in-out infinite}
@keyframes why-breathe{50%{transform:scale(1.045)}}
#why .bk-pkt{fill:var(--dv-blue)}#why .bk-pkt.alt{fill:var(--dv-green)}
@keyframes why-pulse{0%{transform:scale(.55);opacity:.55}100%{transform:scale(1.9);opacity:0}}

/* 3 · markets: the ring of instruments turns, the core names the market */
#why .mk{position:relative;display:grid;place-items:center;padding:6px 0 2px}
#why .mk-ring{position:relative;width:196px;height:196px;animation:why-spin 32s linear infinite}
#why .mk-ic{position:absolute;top:50%;left:50%;width:36px;height:36px;margin:-18px 0 0 -18px;border-radius:50%;background:#fff;border:1px solid var(--line);box-shadow:0 6px 14px -8px rgba(15,23,42,.3);display:grid;place-items:center;
  transform:rotate(calc(var(--i)*45deg)) translateX(84px) rotate(calc(var(--i)*-45deg))}
#why .mk-ic img{width:22px;height:22px;display:block;animation:why-unspin 32s linear infinite}
#why .mk-ic::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:1.5px solid rgba(74,111,165,.45);opacity:0;animation:why-bob 3.2s ease-out infinite;animation-delay:calc(var(--i)*.4s)}
@keyframes why-bob{0%{transform:scale(.7);opacity:.8}60%{transform:scale(1.35);opacity:0}100%{opacity:0}}
@keyframes why-spin{to{transform:rotate(360deg)}}@keyframes why-unspin{to{transform:rotate(-360deg)}}
#why .mk-core{position:absolute;inset:50% auto auto 50%;transform:translate(-50%,-50%);width:112px;height:112px;border-radius:50%;background:linear-gradient(180deg,#4f7df0,#2554d4);color:#fff;display:grid;place-content:center;text-align:center;box-shadow:0 18px 30px -18px rgba(37,84,212,.7)}
#why .mk-core b{display:block;font-family:var(--font-display);font-size:17px;font-weight:700;letter-spacing:-.01em;transition:opacity .35s,transform .35s}
#why .mk-core small{display:block;font-size:10.5px;color:rgba(255,255,255,.75);margin-top:2px;transition:opacity .35s}
#why .mk-core.is-swap b{opacity:0;transform:translateY(6px)}#why .mk-core.is-swap small{opacity:0}
#why .mk-ring::before{content:"";position:absolute;inset:0;border-radius:50%;border:1px dashed rgba(74,111,165,.35)}

/* 4 · platform: the knob walks between our terminal and MT5 */
#why .pf-switch{position:relative;display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--line);border-radius:var(--radius-pill);padding:5px;background:var(--dv-blue-soft)}
#why .pf-knob{position:absolute;top:5px;bottom:5px;left:5px;width:calc(50% - 5px);border-radius:var(--radius-pill);background:#fff;box-shadow:0 8px 18px -10px rgba(15,23,42,.35);transition:transform .6s cubic-bezier(.2,.7,.2,1)}
#why .pf-switch.is-mt5 .pf-knob{transform:translateX(100%)}
#why .pf-opt{position:relative;display:flex;align-items:center;justify-content:center;gap:8px;padding:9px 6px;font-size:13px;font-weight:600;color:var(--ink-3);transition:color .4s;white-space:nowrap}
#why .pf-opt img{width:20px;height:20px;transition:transform .5s}
#why .pf-switch:not(.is-mt5) .pf-opt:first-child img,#why .pf-switch.is-mt5 .pf-opt:last-child img{transform:scale(1.18)}
#why .pf-switch:not(.is-mt5) .pf-opt:first-child,#why .pf-switch.is-mt5 .pf-opt:last-child{color:var(--ink-1)}
#why .pf-line{margin-top:12px;font-size:13px;color:var(--ink-2);min-height:2.6em}
#why .pf-line span{display:block;transition:opacity .35s,transform .35s}#why .pf-line.is-swap span{opacity:0;transform:translateY(5px)}

/* 5 · rules: the equity line draws, a sample walks along it, the clock counts the minute */
#why .rl svg{width:100%;height:auto;display:block}
#why .rl-floor{stroke:var(--dv-red);stroke-width:1.2;stroke-dasharray:4 5;opacity:.7}
#why .rl-fl{font:600 9px var(--font-mono);fill:var(--dv-red)}
#why .rl-line{stroke:var(--dv-blue);stroke-width:2.2;fill:none;stroke-linecap:round;stroke-linejoin:round}
#why .rl-fill{fill:url(#why-rl-g);opacity:0;transition:opacity 1s .9s}#why.is-in .rl-fill{opacity:1}
#why .rl-dot{fill:#fff;stroke:var(--dv-blue);stroke-width:2.2}
#why .rl-ping{fill:none;stroke:var(--dv-blue);stroke-width:1.5;opacity:0}
#why .rl-meta{display:flex;align-items:center;gap:8px;margin-top:10px;font-size:12.5px;color:var(--ink-2);flex-wrap:wrap}
#why .rl-meta b{font-family:var(--font-mono);color:var(--ink-1);font-weight:600;min-width:2ch;display:inline-block;text-align:right}
#why .rl-ev{margin-left:auto;font-family:var(--font-mono);font-size:11px;color:var(--ink-3);white-space:nowrap}

/* 6 · venue: three rows, the event contract flips from its price to its settlement */
#why .vn-rows{list-style:none;margin:0;padding:0;display:grid;gap:8px}
#why .vn-rows li{display:grid;grid-template-columns:30px 1fr auto;align-items:center;gap:10px;padding:8px 10px;border:1px solid var(--line-2);border-radius:var(--radius-md);background:var(--dv-blue-soft);transition:background .5s,border-color .5s,transform .5s}
#why .vn-rows li.is-hot{background:#fff;border-color:rgba(74,111,165,.45);transform:translateX(4px)}
#why .vn-rows img{width:26px;height:26px;display:block}
#why .vn-rows b{display:block;font-size:13px;color:var(--ink-1)}#why .vn-rows small{display:block;font-size:11px;color:var(--ink-3)}
#why .vn-flip{position:relative;width:104px;height:26px;perspective:400px;font-family:var(--font-mono);font-size:11.5px}
#why .vn-flip i{position:absolute;inset:0;display:grid;place-items:center;border-radius:6px;font-style:normal;backface-visibility:hidden;transition:transform .7s cubic-bezier(.2,.7,.2,1)}
#why .vn-flip i:first-child{background:#fff;border:1px solid var(--line);color:var(--ink-1)}
#why .vn-flip i:last-child{background:var(--dv-green-soft);color:#0a7d57;transform:rotateX(180deg)}
#why .vn-flip.is-set i:first-child{transform:rotateX(-180deg)}#why .vn-flip.is-set i:last-child{transform:rotateX(0)}
#why .vn-tag{font-family:var(--font-mono);font-size:11px;color:var(--ink-3)}

/* 7 · sign: the signature writes itself, the stamp lands */
#why .sg{flex:0 0 280px;position:relative;height:92px;border:1px solid var(--line);border-radius:var(--radius-lg);background:#fff;overflow:hidden}
#why .sg-ink{position:absolute;inset:8px 24px 8px 18px;background:url(/assets/home/cert-signature-ink.png) left center/contain no-repeat;clip-path:inset(0 100% 0 0);transition:clip-path 1.7s cubic-bezier(.3,.6,.2,1) .2s}
#why.is-in .sg-ink{clip-path:inset(0 0 0 0)}
#why .sg.is-replay .sg-ink{clip-path:inset(0 100% 0 0);transition:none}
#why .sg.is-replay .sg-stamp{opacity:0;transform:rotate(-9deg) scale(1.8);transition:none}
#why .sg-rule{position:absolute;left:18px;right:18px;bottom:16px;border-top:1px solid var(--line)}
#why .sg-stamp{position:absolute;right:14px;top:12px;padding:4px 8px;border:2px solid var(--dv-blue);border-radius:6px;color:var(--dv-blue);font-family:var(--font-mono);font-size:10px;letter-spacing:.14em;font-weight:700;transform:rotate(-9deg) scale(1.8);opacity:0;transition:transform .45s cubic-bezier(.2,.9,.3,1.4) 1.9s,opacity .3s 1.9s}
#why.is-in .sg-stamp{transform:rotate(-9deg) scale(1);opacity:1}
#why .sg-copy{flex:1 1 320px;display:flex;flex-direction:column;gap:10px}
#why .sg-ctas{display:flex;gap:10px;flex-wrap:wrap;margin-left:auto}
@media(max-width:600px){#why .sg{flex-basis:auto;width:100%}#why .sg-copy{flex-basis:auto}#why .sg-ctas{margin-left:0}}
@media(prefers-reduced-motion:reduce){
  #why .mk-ring,#why .mk-ic img,#why .mk-ic::after,#why .bk-flow,#why .bk-pulse,#why .bk-core,#why .sp-tape .live i,#why.is-in .wt::before{animation:none}
  #why .rl-line{stroke-dashoffset:0;transition:none}#why .sg-ink{clip-path:none;transition:none}#why .sg-stamp{opacity:1;transform:rotate(-9deg);transition:none}
  #why .sp-rows li i b{width:var(--w);transition:none}#why .why-chips .chip{opacity:1;transform:none;transition:none}
}


/* Xoala's anatomy: one dark stage, eyebrow and headline left, the paragraph and
   the button right, a moving strip of facts under it, then a bento of white
   cards. What is different here is that the board is not a mock: the rows and
   the two figures are read from the public ledger when the section scrolls in. */
#transparency{padding:clamp(40px,5vw,84px) 0}
#transparency .tp-stage{position:relative;overflow:hidden;border-radius:28px;color:#fff;
  background:radial-gradient(120% 120% at 88% -14%, #16264a 0%, #0b1221 48%, #070b13 100%);
  padding:clamp(26px,3.4vw,52px) 0;box-shadow:0 30px 70px rgba(7,12,22,.28)}
#transparency .tp-pad{padding:0 clamp(22px,3.4vw,52px)}
/* the hero's ground, drifting behind the cards */
#transparency .tp-bg{position:absolute;inset:0;z-index:0;overflow:hidden;
  background:radial-gradient(120% 120% at 88% -14%, #16264a 0%, #0b1221 48%, #070b13 100%)}
#transparency .tp-bg .bg__canvas,#reviews .tp-bg .bg__canvas,#compare .tp-bg .bg__canvas{position:absolute;inset:0;width:100%;height:100%;display:block;opacity:0;transition:opacity 1.1s ease}
#transparency .tp-bg .bg__canvas.is-live,#reviews .tp-bg .bg__canvas.is-live,#compare .tp-bg .bg__canvas.is-live{opacity:1}
body.gl-on #transparency .tp-bg .bg__aurora,body.gl-on #reviews .tp-bg .bg__aurora,body.gl-on #compare .tp-bg .bg__aurora{display:none}
#transparency .tp-bg .bg__aurora,#reviews .tp-bg .bg__aurora,#compare .tp-bg .bg__aurora{position:absolute;inset:-25%;filter:blur(90px);opacity:.85}
#transparency .tp-bg .blob,#reviews .tp-bg .blob,#compare .tp-bg .blob{position:absolute;border-radius:50%;mix-blend-mode:screen;will-change:transform}
#transparency .tp-bg .blob--a,#reviews .tp-bg .blob--a,#compare .tp-bg .blob--a{width:60vmax;height:60vmax;left:-18%;top:-28%;background:radial-gradient(circle at 36% 36%, rgba(37,84,212,.62) 0%, rgba(37,84,212,.2) 42%, transparent 68%);animation:driftA 52s ease-in-out infinite}
#transparency .tp-bg .blob--b,#reviews .tp-bg .blob--b,#compare .tp-bg .blob--b{width:50vmax;height:50vmax;right:-16%;top:-6%;background:radial-gradient(circle at 60% 40%, rgba(79,125,240,.5) 0%, rgba(79,125,240,.14) 44%, transparent 70%);animation:driftB 64s ease-in-out infinite}
#transparency .tp-bg .blob--c,#reviews .tp-bg .blob--c,#compare .tp-bg .blob--c{width:46vmax;height:46vmax;left:22%;bottom:-30%;background:radial-gradient(circle at 50% 50%, rgba(0,182,122,.22) 0%, rgba(74,111,165,.1) 46%, transparent 72%);animation:driftC 46s ease-in-out infinite}
#transparency .tp-bg .blob--d,#reviews .tp-bg .blob--d,#compare .tp-bg .blob--d{width:34vmax;height:34vmax;left:46%;top:10%;background:radial-gradient(circle at 50% 50%, rgba(28,47,79,.7) 0%, rgba(28,47,79,.22) 50%, transparent 74%);animation:driftD 58s ease-in-out infinite}
#transparency .tp-bg .bg__grid,#reviews .tp-bg .bg__grid,#compare .tp-bg .bg__grid{position:absolute;inset:0;background-image:radial-gradient(circle, rgba(255,255,255,.05) 1px, transparent 1px);background-size:22px 22px;
  -webkit-mask-image:radial-gradient(115% 85% at 50% 40%,#000 35%,transparent 78%);mask-image:radial-gradient(115% 85% at 50% 40%,#000 35%,transparent 78%)}
#transparency .tp-pad,#transparency .tp-rail{position:relative;z-index:1}
#transparency .tp-top{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(20px,3vw,48px);align-items:end}
#transparency .tp-top h2{color:#fff;margin:.3em 0 0;font-size:clamp(28px,3.4vw,44px);line-height:1.06;letter-spacing:-1.2px}
#transparency .tp-eyebrow{margin:0;font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#8fb2e6}
#transparency .tp-intro{display:flex;flex-direction:column;align-items:flex-start;gap:20px}
#transparency .tp-intro p{margin:0;font-size:15px;line-height:1.62;color:rgba(255,255,255,.66)}
#transparency .tp-intro .x-cta{height:48px;padding:0 58px 0 24px;font-size:15px}
/* the moving strip of facts, on the component the benefits rail already uses */
#transparency .tp-rail{margin:clamp(22px,2.6vw,34px) 0 clamp(20px,2.4vw,30px);overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
#transparency .tp-rail .cfb-track{animation-duration:52s}
#transparency .tp-rail .cfb-item{display:inline-flex;align-items:center;gap:9px;white-space:nowrap;
  font-size:13.5px;font-weight:600;color:rgba(255,255,255,.82)}
#transparency .tp-rail .cfb-tick{display:grid;place-items:center;width:20px;height:20px;border-radius:50%;
  background:linear-gradient(180deg,#4f7df0,#2554d4);border:0;box-shadow:inset 0 1px 0 rgba(255,255,255,.35)}
#transparency .tp-rail .cfb-tick svg{width:11px;height:11px;fill:none;stroke:#fff;stroke-width:2.8;stroke-linecap:round;stroke-linejoin:round}
/* the bento */
#transparency .tp-bento{display:grid;grid-template-columns:repeat(12,1fr);gap:14px}
#transparency .tp-card{background:#fff;color:var(--ink-1);border-radius:20px;padding:20px 22px;
  box-shadow:0 18px 40px rgba(4,8,18,.28);min-width:0;display:flex;flex-direction:column;gap:12px}
#transparency .tp-card--ledger{grid-column:span 6;grid-row:span 2}
#transparency .tp-stat{grid-column:span 3}
#transparency .tp-methods{grid-column:span 6;justify-content:center;gap:14px}
#transparency .tp-head{display:flex;align-items:center;justify-content:space-between;gap:10px}
#transparency .tp-kick{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-mono);font-size:10.5px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
#transparency .tp-kick i{width:7px;height:7px;border-radius:50%;background:var(--dv-green);animation:pulse-live 2.4s ease-out infinite}
#transparency .tp-rows{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;justify-content:flex-start}
#transparency .tp-rows li{display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:12px;
  padding:11px 0;border-top:1px solid var(--line);font-size:13.5px}
#transparency .tp-rows li:first-child{border-top:0}
#transparency .tp-rows .id{font-family:var(--font-mono);font-size:11.5px;color:var(--ink-3);overflow:hidden;text-overflow:ellipsis}
#transparency .tp-rows b{font-family:var(--font-mono);font-weight:700;color:var(--ink-1)}
#transparency .tp-rows .via{font-size:11px;font-weight:600;color:var(--ink-3);background:rgba(15,23,42,.05);
  border:1px solid rgba(15,23,42,.08);border-radius:100px;padding:3px 9px;white-space:nowrap}
#transparency .tp-note{margin-top:auto;padding-top:6px;font-size:12px;color:var(--ink-3)}
#transparency .tp-stat .k{font-size:12px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-3)}
#transparency .tp-stat .v{font-size:clamp(28px,3vw,40px);font-weight:800;letter-spacing:-1.4px;line-height:1.05}
#transparency .tp-stat p{margin:0;font-size:13px;line-height:1.5;color:var(--ink-3)}
#transparency .tp-bar{display:flex;height:12px;border-radius:100px;overflow:hidden;background:rgba(15,23,42,.06)}
#transparency .tp-bar span{display:block;height:100%}
#transparency .tp-legs{display:flex;flex-wrap:wrap;gap:8px 18px;font-size:12.5px;color:var(--ink-3)}
#transparency .tp-leg{display:inline-flex;align-items:center;gap:7px}
#transparency .tp-leg i{width:9px;height:9px;border-radius:3px}
#transparency .tp-leg b{color:var(--ink-1);font-weight:700}
@media (max-width:1000px){
  #transparency .tp-top{grid-template-columns:1fr}
  #transparency .tp-card--ledger,#transparency .tp-methods{grid-column:span 12;grid-row:auto}
  #transparency .tp-stat{grid-column:span 4}
}
@media (max-width:640px){
  #transparency .tp-stat{grid-column:span 12}
  #transparency .tp-stage{border-radius:22px}
}
/* Each card carries its own figure drawn from the ledger, and each has its own
   colour: blue for money, green for speed, amber for the rails. The charts are
   real - the curve is what was actually paid month by month since launch, the
   histogram is how long those payouts actually took. */
#transparency .tp-kick--blue{color:#2554d4}
#transparency .tp-kick--green{color:#0e9c6f}
#transparency .tp-kick--amber{color:#b57905}
#transparency .tp-kick--blue::before,#transparency .tp-kick--green::before,#transparency .tp-kick--amber::before{
  content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
/* the method on a ledger row is a small blue pill */
#transparency .tp-rows .via{color:#fff;font-weight:700;background:linear-gradient(180deg,#4f7df0,#2554d4);
  border:0;box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 4px 12px rgba(37,84,212,.28)}
#transparency .tp-rows .via--crypto{background:linear-gradient(180deg,#22c58e,#0e9c6f);box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 4px 12px rgba(14,156,111,.28)}
#transparency .tp-rows .via--wise{background:linear-gradient(180deg,#f9c04a,#d59206);color:#2b1c03;box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 4px 12px rgba(213,146,6,.26)}
#transparency .tp-rows .via--paypal{background:linear-gradient(180deg,#93b6ff,#5f86e6);box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 4px 12px rgba(95,134,230,.26)}
/* the cumulative curve under the money */
#transparency .tp-spark{display:block;width:100%;height:56px;margin-top:2px;overflow:visible}
#transparency .tp-spark .ln{fill:none;stroke:#2554d4;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:var(--len);stroke-dashoffset:var(--len);transition:stroke-dashoffset 1.8s var(--ease-emphasis)}
#transparency .tp-spark .ar{fill:url(#tpGrad);opacity:0;transition:opacity 1s ease .5s}
#transparency .tp-spark .hd{fill:#2554d4;opacity:0;transition:opacity .4s ease 1.5s}
#transparency .tp-spark .hdr{fill:none;stroke:#2554d4;stroke-width:1.5;opacity:0}
#transparency .is-in .tp-spark .hdr{animation:tp-ping 2.6s ease-out infinite 1.6s}
@keyframes tp-ping{0%{r:3;opacity:.55}70%{r:9;opacity:0}100%{r:9;opacity:0}}
#transparency .is-in .tp-spark .ln{stroke-dashoffset:0}
#transparency .is-in .tp-spark .ar,#transparency .is-in .tp-spark .hd{opacity:1}
/* how long they took */
#transparency .tp-hist{display:flex;align-items:flex-end;gap:10px;height:62px;margin-top:4px}
#transparency .tp-hbar{position:relative;flex:1;display:flex;flex-direction:column;justify-content:flex-end;height:100%;gap:6px}
#transparency .tp-hbar i{display:block;height:var(--h);border-radius:7px 7px 3px 3px;background:rgba(0,182,122,.28);
  transform:scaleY(0);transform-origin:bottom;transition:transform .8s var(--ease-emphasis)}
#transparency .tp-hbar.is-mode i{background:linear-gradient(180deg,#22c58e,#0e9c6f)}
#transparency .tp-hbar em{font-style:normal;font-size:10.5px;font-weight:600;color:var(--ink-3);text-align:center;white-space:nowrap}
#transparency .tp-hbar:nth-child(2) i{transition-delay:.1s}
#transparency .tp-hbar:nth-child(3) i{transition-delay:.2s}
#transparency .tp-hbar:nth-child(4) i{transition-delay:.3s}
#transparency .is-in .tp-hbar i{transform:scaleY(1)}
/* the ledger card shows its own heartbeat: the line fills up to the next refresh */
/* the board runs like a feed: the rows climb continuously and loop, and stop
   under the cursor so a row can be read */
#transparency .tp-feed{position:relative;flex:1 1 auto;min-height:216px;overflow:hidden;
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 12%,#000 88%,transparent);
  mask-image:linear-gradient(180deg,transparent,#000 12%,#000 88%,transparent)}
#transparency .tp-feed .tp-rows{position:absolute;inset:0 0 auto;animation:tp-climb 26s linear infinite}
#transparency .tp-card--ledger:hover .tp-feed .tp-rows{animation-play-state:paused}
@keyframes tp-climb{from{transform:translateY(0)}to{transform:translateY(-50%)}}
@media(prefers-reduced-motion:reduce){
  #transparency .tp-feed .tp-rows{animation:none}
  #transparency .tp-spark .ln{stroke-dashoffset:0}
  #transparency .tp-spark .ar,#transparency .tp-spark .hd{opacity:1}
  #transparency .tp-hbar i{transform:scaleY(1)}
  #transparency .is-in .tp-spark .hdr{animation:none}
}
/* movement: the cards lift under the cursor, the rows deal themselves in like a
   statement printing, the split bar grows from nothing and both figures count up */
#transparency .tp-card{transition:transform var(--dur-base) var(--ease-emphasis),box-shadow var(--dur-base)}
#transparency .tp-card:hover{transform:translateY(-4px);box-shadow:0 26px 54px rgba(4,8,18,.36)}
#transparency .tp-rows{transition:opacity .22s var(--ease-standard)}
#transparency .tp-rows.is-swapping{opacity:0}
#transparency .tp-rows.is-dealt li{opacity:0;transform:translateY(8px);animation:tp-deal .5s var(--ease-emphasis) forwards}
#transparency .tp-rows.is-dealt li:nth-child(1){animation-delay:.04s}
#transparency .tp-rows.is-dealt li:nth-child(2){animation-delay:.12s}
#transparency .tp-rows.is-dealt li:nth-child(3){animation-delay:.2s}
#transparency .tp-rows.is-dealt li:nth-child(4){animation-delay:.28s}
#transparency .tp-rows.is-dealt li:nth-child(5){animation-delay:.36s}
@keyframes tp-deal{to{opacity:1;transform:none}}
#transparency .tp-bar span{width:0;transition:width 1.1s var(--ease-emphasis)}
#transparency .tp-bar span:nth-child(2){transition-delay:.12s}
#transparency .tp-bar span:nth-child(3){transition-delay:.24s}
#transparency .tp-bar span:nth-child(4){transition-delay:.36s}
#transparency .tp-methods.is-in .tp-bar span{width:var(--w)}
@media(prefers-reduced-motion:reduce){
  #transparency .tp-rail .cfb-track{animation:none}#transparency .tp-kick i{animation:none}
  #transparency .tp-rows.is-dealt li{animation:none;opacity:1;transform:none}
  #transparency .tp-bar span{transition:none;width:var(--w)}
}


#payout-wall{position:relative;overflow:hidden;height:960px;font-family:Inter,system-ui,-apple-system,sans-serif;
  isolation:isolate;background:#070b13}
#payout-wall *{box-sizing:border-box}
/* The wall's own ground is the hero's: the shader sits BEHIND the scrolling
   certificates, so the drift shows in the space around the wall and through the
   gaps. Nothing of it is laid over the photographs. */
#payout-wall .pw-bg{position:absolute;inset:0;z-index:0;overflow:hidden;
  background:radial-gradient(120% 90% at 50% 2%, #101c31 0%, #0b1221 44%, #070b13 82%)}
#payout-wall .bg__canvas{position:absolute;inset:0;width:100%;height:100%;display:block;opacity:0;transition:opacity 1.1s ease}
#payout-wall .bg__canvas.is-live{opacity:1}
body.gl-on #payout-wall .bg__aurora{display:none}
#payout-wall .bg__aurora{position:absolute;inset:-25%;filter:blur(90px);opacity:.92}
#payout-wall .blob{position:absolute;border-radius:50%;mix-blend-mode:screen;will-change:transform}
#payout-wall .blob--a{width:64vmax;height:64vmax;left:-16%;top:-24%;background:radial-gradient(circle at 36% 36%, rgba(37,84,212,.7) 0%, rgba(37,84,212,.24) 42%, transparent 68%);animation:driftA 52s ease-in-out infinite}
#payout-wall .blob--b{width:54vmax;height:54vmax;right:-14%;top:0%;background:radial-gradient(circle at 60% 40%, rgba(79,125,240,.55) 0%, rgba(79,125,240,.16) 44%, transparent 70%);animation:driftB 64s ease-in-out infinite}
#payout-wall .blob--c{width:50vmax;height:50vmax;left:18%;bottom:-26%;background:radial-gradient(circle at 50% 50%, rgba(147,184,255,.3) 0%, rgba(74,111,165,.12) 46%, transparent 72%);animation:driftC 46s ease-in-out infinite}
#payout-wall .blob--d{width:38vmax;height:38vmax;left:44%;top:22%;background:radial-gradient(circle at 50% 50%, rgba(28,47,79,.8) 0%, rgba(28,47,79,.26) 50%, transparent 74%);animation:driftD 58s ease-in-out infinite}
@media(prefers-reduced-motion:reduce){#payout-wall .blob{animation:none}}
#payout-wall .pw-cols{position:absolute;inset:-80px 0;display:flex;gap:16px;justify-content:center}
#payout-wall .pw-col{display:flex;flex-direction:column;gap:16px;width:250px;flex:0 0 250px;
  animation-name:pw-scroll;animation-timing-function:linear;animation-iteration-count:infinite;will-change:transform}
@keyframes pw-scroll{from{transform:translateY(0)}to{transform:translateY(-50%)}}
#payout-wall .pw-card{flex:0 0 auto;border-radius:18px;overflow:hidden}
#payout-wall .pw-cert{border:1px solid rgba(120,150,210,.18);box-shadow:0 18px 44px rgba(0,0,0,.5)}
#payout-wall .pw-cert img{display:block;width:100%;height:auto}
#payout-wall .pw-card.pw-rev{background:#fff;border:0;padding:16px 16px 14px;display:flex;flex-direction:column;gap:9px;box-shadow:0 14px 34px rgba(0,0,0,.35)}
#payout-wall .pw-rev-stars{display:inline-flex;gap:2px}
#payout-wall .pw-rev-stars svg{width:13px;height:13px;fill:#00b67a}
#payout-wall .pw-rev-stars svg.off{fill:#d7dbe3}
#payout-wall .pw-rev-q{margin:0;font-size:12.5px;line-height:1.45;color:#1a2233;font-weight:500}
#payout-wall .pw-rev-by{display:flex;align-items:center;gap:8px;margin-top:auto;font-size:11.5px}
#payout-wall .pw-rev-by b{color:#0b1220;font-weight:700}
#payout-wall .pw-rev-by span{color:#6b7688}
#payout-wall .pw-rev-by span::before{content:"\00b7";margin-right:8px;color:#c2c8d2}
#payout-wall .pw-face{position:relative;height:250px;box-shadow:0 14px 34px rgba(0,0,0,.45)}
#payout-wall .pw-face img{width:100%;height:100%;object-fit:cover;object-position:center 28%;display:block}
#payout-wall .pw-face::after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);border-radius:18px}
#payout-wall::before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:radial-gradient(ellipse 540px 460px at 50% 50%, #080d1a 0%, #080d1a 48%, rgba(8,13,26,.9) 62%, rgba(8,13,26,.45) 80%, rgba(8,13,26,0) 100%)}
#payout-wall::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(90deg,rgba(6,9,15,.55) 0%,rgba(6,9,15,0) 14%,rgba(6,9,15,0) 86%,rgba(6,9,15,.55) 100%),
             linear-gradient(180deg,#080d18 0%,rgba(8,13,24,0) 12%,rgba(8,13,24,0) 88%,#06090f 100%)}
#payout-wall .pw-center{position:absolute;inset:0;z-index:3;display:flex;align-items:center;justify-content:center}
#payout-wall .pw-panel{text-align:center;max-width:620px;padding:0 24px}
/* A firm whose pitch is "on the record" should not claim it in a badge; it should
   show the record. This strip reads the public payout ledger at /transparency
   (same origin) once the section is in view and cycles the settled payouts it
   finds. If the read fails it keeps the plain claim, so nothing is ever invented. */
#payout-wall .pw-ledger{display:inline-flex;align-items:stretch;height:38px;margin-bottom:26px;border-radius:10px;
  background:#fff;border:1px solid rgba(255,255,255,.5);text-decoration:none;overflow:hidden;
  box-shadow:0 10px 28px rgba(4,8,18,.34)}
#payout-wall .pw-ledger:hover{box-shadow:0 12px 32px rgba(4,8,18,.42)}
#payout-wall .pw-ledger__live{display:inline-flex;align-items:center;gap:8px;padding:0 13px;
  font-family:var(--font-mono);font-size:10.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--dv-blue-deep);
  background:rgba(37,84,212,.07);border-right:1px solid rgba(15,23,42,.12)}
#payout-wall .pw-ledger__live i{width:7px;height:7px;border-radius:50%;background:var(--dv-green);animation:pulse-live 2.4s ease-out infinite}
#payout-wall .pw-ledger__feed{position:relative;display:flex;align-items:center;padding:0 15px;overflow:hidden;
  min-width:0;width:clamp(210px,34vw,330px)}
#payout-wall .pw-ledger__row{display:inline-flex;align-items:center;gap:10px;white-space:nowrap;
  font-family:var(--font-mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:rgba(15,23,42,.55);
  transition:transform .26s var(--ease-emphasis),opacity .26s var(--ease-standard)}
#payout-wall .pw-ledger__row b{color:var(--dv-blue-deep);font-weight:700;letter-spacing:.02em}
#payout-wall .pw-ledger__row.is-out{transform:translateY(-14px);opacity:0}
#payout-wall .pw-ledger__row.is-in{transform:translateY(14px);opacity:0;transition:none}
@media (max-width:820px){
  #payout-wall .pw-ledger__live span{display:none}
  #payout-wall .pw-ledger__live{padding:0 11px}
  #payout-wall .pw-ledger__feed{width:min(80vw,296px);padding:0 12px}
  /* the payment method is the first thing to drop when the phone runs out of room */
  #payout-wall .pw-ledger__row span:last-of-type{display:none}
}
@media (prefers-reduced-motion:reduce){#payout-wall .pw-ledger__live i{animation:none}}
#payout-wall .pw-h2{font-size:56px;line-height:1.04;font-weight:800;letter-spacing:-1.8px;color:#fff;margin:0}
#payout-wall .pw-h2 .pw-accent{color:#7ca3d9}
#payout-wall .pw-sub{font-size:18px;line-height:1.55;color:#a7b4cc;margin:22px auto 0;max-width:470px}
#payout-wall .pw-chips{position:relative;left:50%;transform:translateX(-50%);width:min(92vw,840px);
  display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin:28px 0 0}
/* The page already has one pill for this: glass, hairline, 100px, the same one
   the closing band uses. These four use it too; the only colour is the dot, so
   the row reads as one family with the rest of the site. */
/* White pills, the same fill as the button in the closing band. On white the dot
   can carry a proper colour instead of a pastel one. */
#payout-wall .pw-chip{--dot:#2554d4;display:inline-flex;align-items:center;gap:9px;font-size:13.5px;font-weight:600;
  color:var(--dv-blue-deep);background:#fff;border:1px solid rgba(255,255,255,.4);padding:9px 17px;border-radius:100px;
  box-shadow:0 6px 18px rgba(4,8,18,.28)}
#payout-wall .pw-chip::before{content:"";width:7px;height:7px;flex:0 0 7px;border-radius:50%;background:var(--dot)}
#payout-wall .pw-chip--green{--dot:#0e9c6f}
#payout-wall .pw-chip--blue{--dot:#2554d4}
#payout-wall .pw-chip--amber{--dot:#d89406}
#payout-wall .pw-chip--plain{--dot:#33527d}
#payout-wall .pw-chip b{color:var(--dv-blue-deep);font-weight:600}
#payout-wall .pw-cta{margin-top:34px}
#payout-wall .pw-cta .x-cta{height:54px;padding:0 66px 0 30px;font-size:16px}
#payout-wall .pw-cta .x-cta-bg-pill{box-shadow:0 16px 40px rgba(53,80,230,.4)}
#payout-wall .pw-cta .x-cta-bg-orb{width:40px;height:40px;margin-top:-20px;right:7px}
#payout-wall .pw-cta .x-cta-arrow{right:22px}
#payout-wall .pw-foot{margin-top:16px;font-size:13px;color:#7d89a1}
@media (max-width:820px){
  #payout-wall{height:820px}
  #payout-wall .pw-h2{font-size:38px;letter-spacing:-1.1px}
  #payout-wall .pw-sub{font-size:16px}
}
@media (prefers-reduced-motion:reduce){#payout-wall .pw-col{animation:none}}


/* The ask stands still on the left, the answers open on the right. Every row is
   numbered and tagged, and the open one lifts off the panel as a white card, so
   the list reads as a rulebook index rather than a stack of grey lines. */
#faq{padding:clamp(40px,5vw,84px) 0}
#faq .fq-stage{position:relative;overflow:hidden;border-radius:28px;padding:clamp(26px,3.4vw,54px);
  background:linear-gradient(180deg,#f7f9fe,#eaf0fa);border:1px solid rgba(15,23,42,.06)}
#faq .fq-stage::before{content:"";position:absolute;left:-10%;top:-40%;width:60%;height:120%;pointer-events:none;
  background:radial-gradient(closest-side,rgba(79,125,240,.16),transparent 72%)}
#faq .fq-grid{position:relative;display:grid;grid-template-columns:.86fr 1.14fr;gap:clamp(24px,4vw,64px);align-items:start}
#faq .fq-side{position:sticky;top:96px;display:flex;flex-direction:column;align-items:flex-start;gap:16px}
#faq .fq-kick{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-mono);font-size:10.5px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--dv-blue-deep);background:rgba(37,84,212,.08);
  border:1px solid rgba(37,84,212,.16);border-radius:100px;padding:7px 14px}
#faq .fq-side h2{margin:0;font-size:clamp(28px,3.4vw,44px);line-height:1.05;letter-spacing:-1.3px}
#faq .fq-side p{margin:0;font-size:15px;line-height:1.62;color:var(--ink-2);max-width:40ch}
/* a white action on a light panel, the way their secondary button works */
#faq .fq-btn{display:inline-flex;align-items:center;gap:14px;height:52px;padding:0 8px 0 24px;border-radius:100px;
  background:#fff;border:1px solid rgba(15,23,42,.1);color:var(--ink-1);text-decoration:none;
  font-family:var(--font-display);font-weight:650;font-size:15px;box-shadow:0 10px 26px rgba(15,23,42,.08);
  transition:transform var(--dur-quick) var(--ease-emphasis),box-shadow var(--dur-quick),border-color var(--dur-quick)}
#faq .fq-btn:hover{transform:translateY(-2px);box-shadow:0 16px 34px rgba(15,23,42,.14);border-color:rgba(37,84,212,.35)}
#faq .fq-btn i{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;
  background:linear-gradient(180deg,#4f7df0,#2554d4);box-shadow:inset 0 1px 0 rgba(255,255,255,.3)}
#faq .fq-btn i svg{width:14px;height:14px;fill:none;stroke:#fff;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;
  transition:transform var(--dur-base) var(--ease-emphasis)}
#faq .fq-btn:hover i svg{transform:translateX(2px)}
#faq .fq-support{display:inline-flex;align-items:center;gap:9px;font-size:13px;color:var(--ink-3)}
#faq .fq-support i{width:8px;height:8px;border-radius:50%;background:var(--dv-green);animation:pulse-live 2.4s ease-out infinite}

#faq .fq-list{display:flex;flex-direction:column;gap:2px}
#faq .fq{border-radius:16px;transition:background var(--dur-quick)}
#faq .fq + .fq{box-shadow:0 -1px 0 rgba(15,23,42,.09)}
#faq .fq:hover{background:rgba(255,255,255,.6)}
#faq .fq.is-open{background:#fff;box-shadow:0 18px 44px rgba(15,23,42,.12);
  box-shadow:0 18px 44px rgba(15,23,42,.12),0 -1px 0 transparent}
#faq .fq.is-open + .fq{box-shadow:none}
#faq .fq-q{display:flex;align-items:center;gap:16px;width:100%;background:none;border:0;cursor:pointer;
  text-align:left;padding:20px;font-family:var(--font-display);color:var(--ink-1)}
#faq .fq-n{flex:0 0 auto;font-family:var(--font-mono);font-size:11px;color:var(--ink-3);letter-spacing:.06em;
  transition:color var(--dur-quick)}
#faq .fq.is-open .fq-n{color:var(--dv-blue-deep)}
#faq .fq-t{flex:1 1 auto;display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  font-size:clamp(15.5px,1.3vw,18px);font-weight:650;letter-spacing:-.2px;transition:color var(--dur-quick)}
#faq .fq-q:hover .fq-t{color:var(--dv-blue-deep)}
#faq .fq-tag{font-family:var(--font-mono);font-size:9.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  padding:4px 9px;border-radius:100px;border:1px solid currentColor;opacity:.85}
#faq .fq-tag--blue{color:#2554d4;background:rgba(37,84,212,.07)}
#faq .fq-tag--green{color:#0e9c6f;background:rgba(0,182,122,.08)}
#faq .fq-tag--amber{color:#b57905;background:rgba(251,191,36,.12)}
#faq .fq-tag--red{color:#b91c1c;background:rgba(185,28,28,.07)}
/* the same stroke language as the rest of the page: 24 grid, rounded caps, no fill */
#faq .fq-tag{display:inline-flex;align-items:center;gap:6px}
#faq .fq-tag svg,#faq .fq-kick svg{width:12px;height:12px;flex:0 0 12px;fill:none;stroke:currentColor;
  stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
#faq .fq-kick svg{width:13px;height:13px;flex:0 0 13px}
#faq .fq-i{flex:0 0 34px;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;
  background:#fff;border:1px solid rgba(15,23,42,.12);color:var(--dv-blue-deep);
  transition:transform .45s var(--ease-emphasis),background var(--dur-quick),color var(--dur-quick),box-shadow var(--dur-quick)}
#faq .fq-i svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round}
#faq .fq.is-open .fq-i{transform:rotate(135deg);background:linear-gradient(180deg,#4f7df0,#2554d4);color:#fff;
  border-color:transparent;box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 8px 20px rgba(37,84,212,.3)}
#faq .fq-a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .45s var(--ease-emphasis)}
#faq .fq.is-open .fq-a{grid-template-rows:1fr}
#faq .fq-inner{overflow:hidden;opacity:0;transform:translateY(-4px);transition:opacity .35s ease,transform .35s var(--ease-emphasis)}
#faq .fq.is-open .fq-inner{opacity:1;transform:none}
#faq .fq-inner p{margin:0 0 20px;padding:0 60px 0 56px;font-size:15px;line-height:1.7;color:var(--ink-2)}
@media (max-width:900px){
  #faq .fq-grid{grid-template-columns:1fr;gap:26px}
  #faq .fq-side{position:static}
  #faq .fq-stage{border-radius:22px;padding:22px 16px}
  #faq .fq-q{padding:18px 14px;gap:12px}
  #faq .fq-inner p{padding:0 14px 0 14px}
  #faq .fq-n{display:none}
}
@media(prefers-reduced-motion:reduce){
  #faq .fq-a,#faq .fq-inner,#faq .fq-i,#faq .fq-btn,#faq .fq-btn i svg{transition:none}
  #faq .fq-support i{animation:none}
}


#faq .fq-tag{display:inline-flex!important;align-items:center;gap:7px;background:none!important;padding:0!important;border:0!important;border-radius:0!important;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--c)}
#faq .fq-ic{width:19px;height:19px;border-radius:50%;background:var(--c);display:grid;place-items:center;flex:0 0 19px;box-shadow:0 2px 6px -1px color-mix(in srgb,var(--c) 55%,transparent)}
#faq .fq-ic svg{width:11px;height:11px;stroke:#fff;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
#faq .fq-kick svg{fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
#faq .fq-more{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:10px;padding:16px 18px;
  border:1px dashed rgba(15,23,42,.16);border-radius:14px;text-decoration:none;color:var(--ink-2);font-size:14px;font-weight:600;
  transition:border-color .2s,background .2s}
#faq .fq-more:hover{border-color:rgba(37,84,212,.4);background:rgba(37,84,212,.03)}
#faq .fq-more b{color:var(--ink-1)}
#faq .fq-more i{flex:0 0 auto;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:#2554d4;color:#fff}
#faq .fq-more i svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}


/* The page ends on one continuous ground: the closing call to action and the
   footer sit on a single canvas, so the animation runs from the white page all
   the way to the last line of legal text without a seam in the middle. */
.closing{position:relative;isolation:isolate;overflow:hidden;background:#070b13;color:#fff;
  border-radius:var(--section-radius) var(--section-radius) 0 0}
.closing .closing-bg{position:absolute;inset:0;z-index:0;overflow:hidden;
  background:radial-gradient(120% 70% at 50% 6%, #101c31 0%, #0b1221 44%, #070b13 80%)}
.closing .bg__canvas{position:absolute;inset:0;width:100%;height:100%;display:block;opacity:0;transition:opacity 1.1s ease}
.closing .bg__canvas.is-live{opacity:1}
body.gl-on .closing .bg__aurora{display:none}
.closing .bg__aurora{position:absolute;inset:-25%;filter:blur(90px);opacity:.92}
.closing .blob{position:absolute;border-radius:50%;mix-blend-mode:screen;will-change:transform}
.closing .blob--a{width:64vmax;height:64vmax;left:-16%;top:-30%;background:radial-gradient(circle at 36% 36%, rgba(37,84,212,.7) 0%, rgba(37,84,212,.24) 42%, transparent 68%);animation:driftA 52s ease-in-out infinite}
.closing .blob--b{width:54vmax;height:54vmax;right:-14%;top:-8%;background:radial-gradient(circle at 60% 40%, rgba(79,125,240,.55) 0%, rgba(79,125,240,.16) 44%, transparent 70%);animation:driftB 64s ease-in-out infinite}
.closing .blob--c{width:50vmax;height:50vmax;left:18%;bottom:-30%;background:radial-gradient(circle at 50% 50%, rgba(147,184,255,.3) 0%, rgba(74,111,165,.12) 46%, transparent 72%);animation:driftC 46s ease-in-out infinite}
.closing .blob--d{width:38vmax;height:38vmax;left:44%;top:14%;background:radial-gradient(circle at 50% 50%, rgba(28,47,79,.8) 0%, rgba(28,47,79,.26) 50%, transparent 74%);animation:driftD 58s ease-in-out infinite}
.closing .bg__grid{position:absolute;inset:0;background-image:radial-gradient(circle, rgba(255,255,255,.05) 1px, transparent 1px);background-size:22px 22px;
  -webkit-mask-image:radial-gradient(115% 85% at 50% 30%,#000 35%,transparent 78%);mask-image:radial-gradient(115% 85% at 50% 30%,#000 35%,transparent 78%)}
.closing .bg__scrim{position:absolute;inset:0;background:radial-gradient(62% 34% at 50% 26%, rgba(3,6,12,.66) 0%, rgba(3,6,12,.34) 48%, transparent 78%)}
/* the footer keeps its type and spacing and loses only its own black */
.closing .foot{position:relative;z-index:1;background:none;border-top:1px solid rgba(255,255,255,.08)}
.cta-band{position:relative;z-index:1;background:none;color:#fff;text-align:center;
  padding:clamp(76px,9vw,136px) 0 clamp(72px,8vw,120px)}
.cta-band .wrap{position:relative;z-index:1}
/* Filled in the same blue as the buttons, with the same lit top edge and its own
   coloured shadow, just smaller: it labels the block, it does not compete with it. */
.cta-band .cta-eyebrow{display:inline-flex;align-items:center;gap:9px;font-size:12px;font-weight:700;letter-spacing:1.3px;
  text-transform:uppercase;color:#fff;background:linear-gradient(180deg,#4f7df0,#2554d4);border:0;
  padding:10px 20px;border-radius:100px;margin-bottom:24px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 8px 22px rgba(37,84,212,.32)}
.cta-band .cta-eyebrow::before{content:"";width:7px;height:7px;border-radius:50%;background:#fff;
  box-shadow:0 0 0 0 rgba(255,255,255,.6);animation:pulse-white 2.4s ease-out infinite}
@keyframes pulse-white{0%{box-shadow:0 0 0 0 rgba(255,255,255,.6)}70%{box-shadow:0 0 0 10px rgba(255,255,255,0)}100%{box-shadow:0 0 0 0 rgba(255,255,255,0)}}
@keyframes pulse-blue{0%{box-shadow:0 0 0 0 rgba(79,125,240,.5)}70%{box-shadow:0 0 0 12px rgba(79,125,240,0)}100%{box-shadow:0 0 0 0 rgba(79,125,240,0)}}
@media(prefers-reduced-motion:reduce){.cta-band .cta-eyebrow::before{animation:none}}
.cta-band h2{margin:0;color:#fff;font-size:clamp(32px,4.6vw,56px);line-height:1.04;letter-spacing:-1.6px}
.cta-band .cta-accent{color:#fff}
.cta-band p{margin:20px auto 0;max-width:56ch;color:rgba(255,255,255,.78)}
.cta-band .cta-chips{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin:26px auto 0;max-width:640px}
.cta-band .cta-chips span{font-size:13.5px;font-weight:600;color:var(--dv-blue-deep);
  background:#fff;border:1px solid rgba(255,255,255,.4);padding:9px 17px;border-radius:100px;
  box-shadow:0 6px 18px rgba(4,8,18,.26)}
.cta-band .cta-row{display:flex;gap:var(--space-3);justify-content:center;flex-wrap:wrap;margin-top:34px}
.cta-band .x-cta{height:52px;padding:0 64px 0 28px;font-size:15.5px}
.cta-band .x-cta-bg-orb{width:38px;height:38px;margin-top:-19px;right:7px}
.cta-band .x-cta-arrow{right:21px}

.cta-band .btn-ghost{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.28);color:#fff}
.cta-band .btn-ghost:hover{background:rgba(255,255,255,.12)}
@media(prefers-reduced-motion:reduce){.closing .blob{animation:none}}


.evt{position:relative;z-index:1;background:none;color:#fff;padding:clamp(46px,5.5vw,84px) 0 clamp(24px,3vw,40px)}
.evt-top{margin-bottom:clamp(22px,2.4vw,32px)}
.evt-kick{display:inline-flex;align-items:center;gap:9px;font-size:12px;font-weight:700;letter-spacing:1.4px;text-transform:uppercase;color:#9fb8e6}
.evt-kick i{width:8px;height:8px;border-radius:50%;background:#3ddc84;box-shadow:0 0 10px rgba(61,220,132,.8)}
.evt-top h2{margin:14px 0 0;color:#fff;font-size:clamp(28px,3.4vw,46px);letter-spacing:-1.3px;line-height:1.05}
.evt-banner{position:relative;display:block;border-radius:24px;overflow:hidden;min-height:clamp(260px,26vw,320px);
  background:#0a1430 center 42%/cover no-repeat;box-shadow:0 30px 70px -30px rgba(0,0,0,.7)}
.evt-banner::after{content:"";position:absolute;inset:0;
  background:linear-gradient(100deg, rgba(6,10,20,.96) 0%, rgba(6,10,20,.9) 30%, rgba(8,14,28,.55) 62%, rgba(8,14,28,.18) 100%),
             linear-gradient(0deg, rgba(6,10,20,.5) 0%, transparent 40%)}
.evt-in{position:relative;z-index:1;display:flex;align-items:center;gap:clamp(22px,2.6vw,44px);
  min-height:inherit;padding:clamp(26px,3vw,46px) clamp(28px,3.4vw,52px)}
.evt-date{flex:0 0 auto;text-align:center;padding-right:clamp(22px,2.6vw,42px);border-right:1px solid rgba(255,255,255,.16)}
.evt-date .d-num{display:block;font-size:clamp(38px,4.6vw,60px);font-weight:800;line-height:.95;letter-spacing:-1.5px;color:#fff}
.evt-date .d-mo{display:block;margin-top:8px;font-size:13px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:#9fb8e6}
.evt-info{flex:1 1 auto;min-width:0;text-align:left}
.evt-tag{display:block;font-size:12px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;color:#7ea4e6;margin-bottom:10px}
.evt-info h3{margin:0;color:#fff;font-size:clamp(21px,2.2vw,30px);letter-spacing:-.5px;line-height:1.14;max-width:22ch}
.evt-where{display:flex;align-items:center;gap:8px;margin-top:14px;font-size:14.5px;color:rgba(255,255,255,.74)}
.evt-where svg{width:16px;height:16px;color:#9fb8e6;flex:0 0 auto}
.evt-go{flex:0 0 auto;align-self:center}
.evt-cta{display:inline-flex;align-items:center;gap:10px;font-weight:700;font-size:15px;color:#fff;text-decoration:none;
  background:linear-gradient(180deg,#4f7df0,#2554d4);padding:15px 26px;border-radius:100px;box-shadow:0 14px 32px rgba(37,84,212,.42);transition:transform .2s}
.evt-cta:hover{transform:translateY(-1px)}
.evt-cta svg{width:16px;height:16px}
@media(max-width:860px){
  .evt-in{flex-direction:column;align-items:flex-start;gap:18px;padding:24px}
  .evt-date{display:flex;align-items:baseline;gap:10px;padding:0 0 14px;border-right:0;border-bottom:1px solid rgba(255,255,255,.16);width:100%;text-align:left}
  .evt-date .d-mo{margin-top:0}
  .evt-go{width:100%}.evt-cta{width:100%;justify-content:center}
}


/* The expo banner is a rotator: every event Dolvero attends, in date order, the past ones
   dropped on load, the section gone when none is left. Two background layers crossfade,
   the content slides, the date flips; the cards under it are the schedule and the controls. */
.evt[hidden]{display:none}
.evt-banner{background-image:none!important}
.evt-bg{position:absolute;inset:0;background:center/cover no-repeat #0f1a33;opacity:0;transform:scale(1.06);transition:opacity .9s ease,transform 6.5s linear;z-index:0}
.evt-bg.is-on{opacity:1;transform:scale(1)}
.evt-bg.is-gradient{background-image:linear-gradient(135deg,#1a2d55 0%,#0f1a33 55%,#0b1120 100%)}
.evt-banner::after{z-index:1}
.evt-in{z-index:2}
.evt-in>*{transition:opacity .42s cubic-bezier(.2,.7,.2,1),transform .42s cubic-bezier(.2,.7,.2,1)}
.evt-in.is-out>*{opacity:0;transform:translateX(-28px)}
.evt-in.is-out .evt-go{transform:translateX(28px)}
.evt-in.is-prep>*{transition:none;opacity:0;transform:translateX(34px)}
.evt-in.is-prep .evt-go{transform:translateX(-34px)}
.evt-date .d-num{display:inline-block;transform-origin:50% 100%}
.evt-in.is-flip .d-num{animation:evt-flip .55s cubic-bezier(.2,.7,.2,1)}
@keyframes evt-flip{0%{transform:rotateX(90deg);opacity:0}100%{transform:rotateX(0);opacity:1}}
.evt-count{display:inline-flex;align-items:center;gap:7px;margin-top:12px;padding:6px 12px;border-radius:999px;background:#fff;color:#0f172a;font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;box-shadow:0 8px 20px -10px rgba(0,0,0,.6)}
.evt-count::before{content:"";width:7px;height:7px;border-radius:50%;background:#3ddc84;box-shadow:0 0 0 0 rgba(61,220,132,.6);animation:evt-ping 1.8s infinite}
@keyframes evt-ping{100%{box-shadow:0 0 0 8px rgba(61,220,132,0)}}
.evt-next{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-top:12px}
.evt-card{position:relative;display:grid;gap:4px;padding:14px 16px 16px;border-radius:16px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.05);color:rgba(255,255,255,.72);text-align:left;cursor:pointer;overflow:hidden;transition:background .35s,color .35s,transform .35s,border-color .35s;font:inherit}
.evt-card b{font-family:var(--font-mono);font-size:12px;font-weight:600;letter-spacing:.04em;color:#9fb8e6}
.evt-card strong{font-size:14px;font-weight:700;color:#fff;letter-spacing:-.01em;line-height:1.2}
.evt-card small{font-size:12px;color:rgba(255,255,255,.55)}
.evt-card i{position:absolute;left:0;right:0;bottom:0;height:3px;background:rgba(255,255,255,.12)}
.evt-card i::after{content:"";position:absolute;inset:0;background:#4f7df0;transform:scaleX(0);transform-origin:left}
.evt-card.is-on{background:rgba(255,255,255,.1);border-color:rgba(159,184,230,.45);transform:translateY(-2px)}
.evt-card.is-on i::after{animation:evt-fill var(--evt-ms,5500ms) linear forwards}
.evt-card:hover{background:rgba(255,255,255,.12)}
@keyframes evt-fill{to{transform:scaleX(1)}}
.evt-dots{display:none}
.evt-credit{position:absolute;right:14px;bottom:10px;z-index:3;font-size:10px;color:rgba(255,255,255,.45);letter-spacing:.02em}.evt-credit:empty{display:none}
@media(max-width:900px){.evt-next{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){.evt-date{flex-wrap:wrap;align-items:center}.evt-count{margin-top:0;margin-left:auto}.evt-next{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.evt-bg{transition:none;transform:none}.evt-in>*{transition:none}.evt-in.is-flip .d-num{animation:none}.evt-card.is-on i::after{animation:none;transform:scaleX(1)}.evt-count::before{animation:none}}


@property --fn-a{syntax:"<angle>";inherits:false;initial-value:0deg}
.foot-news{position:relative;isolation:isolate;overflow:hidden;grid-template-columns:auto minmax(0,1.05fr) minmax(0,1fr)!important;gap:clamp(20px,3vw,40px)!important;border-color:transparent!important;background:linear-gradient(140deg,#0e1a3a 0%,#0b1226 60%,#0d1834 100%)!important;box-shadow:0 40px 80px -40px rgba(37,84,212,.55)}
.foot-news::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1.5px;background:conic-gradient(from var(--fn-a),rgba(147,184,255,0) 0deg,rgba(147,184,255,.9) 40deg,rgba(79,125,240,.2) 90deg,rgba(147,184,255,0) 140deg,rgba(147,184,255,0) 360deg);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:fnSpin 7s linear infinite;pointer-events:none;z-index:2}
@keyframes fnSpin{to{--fn-a:360deg}}
.fn-bg{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.fn-bg i{position:absolute;border-radius:50%;filter:blur(50px);opacity:.7}
.fn-bg i:nth-child(1){width:340px;height:340px;left:-80px;top:-160px;background:radial-gradient(circle,#2554d4,transparent 70%);animation:fnB1 14s ease-in-out infinite}
.fn-bg i:nth-child(2){width:300px;height:300px;right:-60px;bottom:-170px;background:radial-gradient(circle,#4f7df0,transparent 70%);animation:fnB2 17s ease-in-out infinite}
.fn-bg i:nth-child(3){width:220px;height:220px;left:40%;top:-120px;background:radial-gradient(circle,rgba(126,226,184,.45),transparent 70%);animation:fnB1 19s ease-in-out infinite reverse}
.fn-bg b{position:absolute;inset:0;background-image:radial-gradient(circle,rgba(255,255,255,.07) 1px,transparent 1px);background-size:20px 20px;-webkit-mask:radial-gradient(80% 90% at 30% 50%,#000,transparent 80%);mask:radial-gradient(80% 90% at 30% 50%,#000,transparent 80%)}
@keyframes fnB1{0%,100%{transform:translate(0,0)}50%{transform:translate(120px,60px)}}
@keyframes fnB2{0%,100%{transform:translate(0,0)}50%{transform:translate(-140px,-50px)}}
.foot-news h2 .fn-acc{background:linear-gradient(120deg,#b9d0ff,#6d95ff);-webkit-background-clip:text;background-clip:text;color:transparent}
.fn-art{position:relative;width:210px;height:176px;align-self:center}
.fn-env{position:absolute;left:50%;bottom:0;width:120px;height:78px;margin-left:-60px;border-radius:12px;background:linear-gradient(180deg,#4f7df0,#2554d4);box-shadow:0 20px 40px -16px rgba(37,84,212,.9),inset 0 1px 0 rgba(255,255,255,.3);z-index:3}
.fn-env::before{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(155deg,transparent 49%,rgba(255,255,255,.22) 50%,transparent 51%),linear-gradient(205deg,transparent 49%,rgba(255,255,255,.22) 50%,transparent 51%)}
.fn-env::after{content:"1";position:absolute;right:-8px;top:-8px;width:22px;height:22px;border-radius:50%;background:#7ee2b8;color:#0b3d2c;font:700 12px/22px Inter,sans-serif;text-align:center;box-shadow:0 0 0 3px #0b1226;animation:fnBadge 9s ease infinite}
@keyframes fnBadge{0%,8%{transform:scale(0)}12%{transform:scale(1.3)}16%,100%{transform:scale(1)}}
.fn-mail{position:absolute;left:50%;bottom:86px;width:190px;margin-left:-95px;padding:10px 12px;border-radius:12px;background:rgba(255,255,255,.97);color:#0f172a;display:grid;grid-template-columns:auto 1fr;gap:2px 9px;align-items:center;box-shadow:0 16px 30px -14px rgba(0,0,0,.6);opacity:0;animation:fnMail 9s ease-in-out infinite;animation-delay:calc(var(--i) * 3s);z-index:2}
.fn-mail i{grid-row:1/span 2;width:26px;height:26px;border-radius:8px;background:linear-gradient(180deg,#4f7df0,#2554d4) center/60% no-repeat;position:relative}
.fn-mail i::after{content:"";position:absolute;inset:7px 6px;border:2px solid #fff;border-radius:2px;border-top-color:transparent}
.fn-mail b{font:600 12px/1.25 Inter,sans-serif;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fn-mail small{font:500 10.5px Inter,sans-serif;color:rgba(15,23,42,.55)}
@keyframes fnMail{0%{opacity:0;transform:translateY(64px) scale(.85)}8%{opacity:1;transform:translateY(0) scale(1)}28%{opacity:1;transform:translateY(-6px) scale(1)}36%{opacity:0;transform:translateY(-34px) scale(.94)}100%{opacity:0}}
.foot-news-form input{transition:border-color .25s,background .25s,box-shadow .25s!important}
.foot-news-form input:focus{box-shadow:0 0 0 5px rgba(79,125,240,.25)}
.foot-news-form button{position:relative;overflow:hidden}
.foot-news-form button::after{content:"";position:absolute;top:0;bottom:0;left:-60%;width:40%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.4),transparent);transform:skewX(-18deg);animation:fnSheen 5s ease-in-out infinite;pointer-events:none}
@keyframes fnSheen{0%,70%{left:-60%}90%,100%{left:130%}}
@media(max-width:980px){.foot-news{grid-template-columns:1fr!important}.fn-art{width:100%;height:170px}}
@media (prefers-reduced-motion:reduce){.foot-news::before,.fn-bg i,.fn-mail,.fn-env::after,.foot-news-form button::after{animation:none!important}.fn-mail[style*="--i:0"]{opacity:1}}


/* Company panel: the Programs anatomy, each tile layered -- animated art, a mock with several
   moving parts, a floating badge. All loops, all off under prefers-reduced-motion. */
.mega .svc.cm{text-decoration:none;color:inherit;display:flex}
.mega .svc.cm .svc-tile{display:grid;place-items:start center;padding:10px 12px 34px}
.svc-tile.t-trn{--glow:rgba(94,224,176,.34)}
.svc-tile.t-blg{--glow:rgba(147,184,255,.40)}
.svc-tile.t-car{--glow:rgba(247,147,26,.30)}
.svc-tile.t-cnt{--glow:rgba(167,139,250,.34);background:linear-gradient(158deg,#16233c 0%,#2a3a6e 52%,#4c5fd8 100%)}
.svc-tile.t-chg{--glow:rgba(56,189,248,.34)}
.mega .svc.cm .mock{font-size:10px;padding:8px 9px}
.cm-tick{width:9px;height:9px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
/* shared */
.cm-live{display:flex;align-items:center;gap:6px;margin-bottom:6px}
.cm-live i{width:6px;height:6px;border-radius:50%;background:var(--dv-green);box-shadow:0 0 0 0 rgba(0,182,122,.5);animation:cm-ping 1.8s infinite}
.cm-live i.b{background:#38bdf8;box-shadow:0 0 0 0 rgba(56,189,248,.5)}
.cm-cap-r{margin-inline-start:auto;font-size:7.5px;letter-spacing:.1em;color:#0a7d57;background:var(--dv-green-soft);border-radius:4px;padding:2px 5px}
@keyframes cm-ping{100%{box-shadow:0 0 0 6px rgba(0,182,122,0)}}
.cm-float{position:absolute;z-index:3;display:inline-flex;align-items:center;gap:5px;font-size:8.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;border-radius:var(--radius-pill);padding:4px 9px;box-shadow:0 10px 22px -10px rgba(7,12,22,.7)}
/* rolling feeds: 26px rows + 5px gap, three visible, the tail repeats the head so the snap is invisible */
.cm-feed{height:70px;overflow:hidden;position:relative}
.cm-roll{display:grid;gap:5px}
.cm-feed .mk-row{height:26px}
.cm-feed .mk-row>span:nth-child(2){min-width:0;flex:1;display:grid}
.cm-feed .mk-t,.cm-feed .mk-s{line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cm-feed .mk-t{font-size:10.5px}
.cm-feed::before,.cm-feed::after{content:"";position:absolute;left:0;right:0;height:12px;pointer-events:none;z-index:1}
.cm-feed::before{top:0;background:linear-gradient(#fff,transparent)}.cm-feed::after{bottom:0;background:linear-gradient(transparent,#fff)}
.cm-feed--ledger .cm-roll{animation:cm-roll4 14s cubic-bezier(.2,.7,.2,1) infinite}
@keyframes cm-roll4{0%,20%{transform:translateY(0)}25%,45%{transform:translateY(-31px)}50%,70%{transform:translateY(-62px)}75%,95%{transform:translateY(-93px)}100%{transform:translateY(-124px)}}
.cm-feed--log .cm-roll{animation:cm-roll4 14s cubic-bezier(.2,.7,.2,1) infinite}
/* transparency */
.cm-bars rect{transform-origin:50% 100%;transform:scaleY(0);animation:cm-bar 9s var(--ease-standard) infinite}
.cm-bars rect:nth-child(2){animation-delay:.15s}.cm-bars rect:nth-child(3){animation-delay:.3s}.cm-bars rect:nth-child(4){animation-delay:.45s}.cm-bars rect:nth-child(5){animation-delay:.6s}.cm-bars rect:nth-child(6){animation-delay:.75s}.cm-bars rect:nth-child(7){animation-delay:.9s}
@keyframes cm-bar{0%{transform:scaleY(0)}12%,84%{transform:scaleY(1)}94%,100%{transform:scaleY(0)}}
.cm-trend{stroke-dasharray:4 3;animation:cm-dash 1.2s linear infinite}
@keyframes cm-dash{to{stroke-dashoffset:-14}}
.cm-st{position:relative;flex:none;width:50px;height:16px;font-size:7.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.cm-st i,.cm-st b{position:absolute;inset:0;display:inline-flex;align-items:center;justify-content:center;gap:3px;border-radius:4px;font-style:normal}
.cm-st i{background:#eef2f7;color:var(--ink-3);animation:cm-st-a 7s infinite}
.cm-st b{background:var(--dv-green-soft);color:#0a7d57;animation:cm-st-b 7s infinite}
.cm-feed .mk-row:nth-child(2n) .cm-st i,.cm-feed .mk-row:nth-child(2n) .cm-st b{animation-delay:-3.5s}
@keyframes cm-st-a{0%,40%{opacity:1}52%,100%{opacity:0}}
@keyframes cm-st-b{0%,44%{opacity:0;transform:scale(.8)}56%,100%{opacity:1;transform:none}}
.cm-feed .mk-v{font-size:10px;margin-inline-start:0}
.cm-stamp{right:10px;bottom:8px;background:#fff;color:#0a7d57;transform-origin:100% 0;animation:cm-stamp 9s var(--ease-emphasis) infinite}
@keyframes cm-stamp{0%,52%{opacity:0;transform:scale(1.5) rotate(-6deg)}58%,88%{opacity:1;transform:none}94%,100%{opacity:0}}
/* blog */
.cm-lines rect{transform-origin:0 50%;animation:cm-type 8s var(--ease-standard) infinite}
.cm-lines rect:nth-child(2){animation-delay:.5s}.cm-lines rect:nth-child(3){animation-delay:1s}.cm-lines rect:nth-child(4){animation-delay:1.5s}
@keyframes cm-type{0%{transform:scaleX(0)}14%,80%{transform:scaleX(1)}92%,100%{transform:scaleX(0)}}
.mock-stack.cm-wrap{width:100%}
.cm-post--back{position:absolute;inset:6px -6px auto 6px;height:100%;opacity:.55;transform:translateY(8px) scale(.97);z-index:0}
.cm-post{position:relative;z-index:1}
.cm-thumb{position:relative;height:30px;border-radius:7px;background:linear-gradient(135deg,#22406e,#2554d4 60%,#5ee0b0);overflow:hidden;margin-bottom:7px}
.cm-thumb svg{position:absolute;inset:6px 10px 5px;width:calc(100% - 20px);height:calc(100% - 14px)}
.cm-spk{fill:none;stroke:rgba(255,255,255,.85);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:160;stroke-dashoffset:160;animation:cm-draw 8s var(--ease-standard) infinite}
@keyframes cm-draw{0%{stroke-dashoffset:160}25%,85%{stroke-dashoffset:0}95%,100%{stroke-dashoffset:160}}
.cm-thumb::after{content:"";position:absolute;left:-40%;top:-60%;width:50%;height:220%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.35),transparent);transform:rotate(18deg);animation:mk-sheen 5s var(--ease-standard) infinite}
.cm-tag{position:absolute;left:6px;top:6px;width:52px;height:14px}
.cm-tag i,.cm-title i{position:absolute;inset:0;opacity:0;font-style:normal;animation:cm-cyc3 12s var(--ease-standard) infinite}
.cm-tag i:nth-child(2),.cm-title i:nth-child(2){animation-delay:4s}.cm-tag i:nth-child(3),.cm-title i:nth-child(3){animation-delay:8s}
@keyframes cm-cyc3{0%{opacity:0;transform:translateY(4px)}4%,30%{opacity:1;transform:none}34%,100%{opacity:0;transform:translateY(-4px)}}
.cm-tag i{display:inline-flex;align-items:center;font-size:7.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;background:rgba(255,255,255,.92);color:var(--dv-blue-deep);border-radius:4px;padding:0 5px;width:max-content;height:14px}
.cm-title{position:relative;height:26px;font-weight:600;font-size:11px;line-height:1.2;color:var(--ink-1);margin-bottom:4px}
.cm-meta{display:flex;align-items:center;gap:6px}
.cm-av{width:16px;height:16px;border-radius:50%;background:var(--dv-blue);color:#fff;font-size:7px;font-weight:700;display:grid;place-items:center;flex:none}
.cm-newdot{margin-inline-start:auto;font-size:7.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#0a7d57;background:var(--dv-green-soft);border-radius:4px;padding:2px 5px;animation:cm-blink 12s infinite}
@keyframes cm-blink{0%,3%{background:var(--dv-green);color:#fff}9%,100%{background:var(--dv-green-soft);color:#0a7d57}}
.cm-read span{background:var(--dv-blue);animation:cm-read 12s linear infinite}
@keyframes cm-read{0%{width:0}30%{width:100%}33.4%{width:0}63%{width:100%}66.7%{width:0}97%,100%{width:100%}}
.cm-langs{left:10px;bottom:8px;gap:3px;padding:3px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.3);backdrop-filter:blur(6px)}
.cm-langs i{font-style:normal;padding:2px 7px;border-radius:999px;color:#fff;position:relative}
.cm-langs i::before{content:"";position:absolute;inset:0;border-radius:999px;background:#fff;opacity:0;z-index:-1}
.cm-langs i:nth-child(1)::before{animation:cm-lang 6s infinite}.cm-langs i:nth-child(2)::before{animation:cm-lang 6s infinite 3s}
.cm-langs i{mix-blend-mode:normal}
@keyframes cm-lang{0%,45%{opacity:1}50%,95%{opacity:0}100%{opacity:1}}
.cm-langs i:nth-child(1){animation:cm-langc 6s infinite}.cm-langs i:nth-child(2){animation:cm-langc 6s infinite 3s}
@keyframes cm-langc{0%,45%{color:var(--dv-blue-deep)}50%,95%{color:#fff}100%{color:var(--dv-blue-deep)}}
/* careers */
.cm-links path{animation:cm-dash 1.6s linear infinite}
.cm-nodes circle{animation:cm-node 5s infinite}
.cm-nodes circle:nth-child(2){animation-delay:1s}.cm-nodes circle:nth-child(3){animation-delay:2s}.cm-nodes circle:nth-child(4){animation-delay:3s}.cm-nodes circle:nth-child(5){animation-delay:4s}
@keyframes cm-node{0%,100%{opacity:.5;r:5}10%{opacity:1;r:7}20%{opacity:.5;r:5}}
.cm-hub{animation:cm-hub 2.4s ease-in-out infinite}
@keyframes cm-hub{0%,100%{r:9;opacity:.9}50%{r:11;opacity:1}}
.cm-jobs{display:grid;gap:4px}
.cm-tabs{position:relative;display:flex;gap:2px;margin-bottom:4px;padding:2px;background:#eef2f7;border-radius:6px}
.cm-tabs span{position:relative;z-index:1;flex:1;text-align:center;font-size:7.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);padding:3px 0}
.cm-tabs i{position:absolute;top:2px;bottom:2px;left:2px;width:calc((100% - 4px)/3);border-radius:4px;background:#fff;box-shadow:0 2px 6px rgba(7,12,22,.12);animation:cm-tab 9s var(--ease-emphasis) infinite}
@keyframes cm-tab{0%,28%{transform:translateX(0)}33%,61%{transform:translateX(100%)}66%,94%{transform:translateX(200%)}100%{transform:translateX(0)}}
.cm-job{border-radius:6px;padding:3px 5px;margin:0 -5px;position:relative;height:24px}
.cm-job>span:first-child{display:grid;line-height:1.15}
.cm-job::before{content:"";position:absolute;inset:0;border-radius:6px;background:rgba(74,111,165,.14);opacity:0}
.cm-job:nth-child(2)::before{animation:cm-hl 6s infinite}.cm-job:nth-child(3)::before{animation:cm-hl 6s infinite 3s}
@keyframes cm-hl{0%,4%{opacity:0}10%,44%{opacity:1}52%,100%{opacity:0}}
.cm-open{position:relative;font-size:8px;padding:2px 6px 2px 12px}
.cm-open::before{content:"";position:absolute;left:5px;top:50%;width:4px;height:4px;margin-top:-2px;border-radius:50%;background:#0a7d57;animation:cm-ping 2.2s infinite}
.cm-remote{right:10px;bottom:8px;background:rgba(247,147,26,.92);color:#fff}
/* contact */
.cm-sonar circle{transform-origin:110px 100px;animation:cm-sonar 4.5s ease-out infinite}
.cm-sonar circle:nth-child(2){animation-delay:1.5s}.cm-sonar circle:nth-child(3){animation-delay:3s}
@keyframes cm-sonar{0%{transform:scale(.4);opacity:.9}100%{transform:scale(3.2);opacity:0}}
.cm-chat{position:relative;z-index:1;width:100%;display:grid;gap:5px;align-content:start;font-size:9.5px;line-height:1.3}
.cm-chead{display:flex;align-items:center;gap:6px;padding:0 2px 5px;border-bottom:1px solid rgba(255,255,255,.18);margin-bottom:2px;color:#fff}
.cm-chead>span:nth-child(2){display:flex;align-items:center;gap:4px;font-size:8.5px;color:rgba(255,255,255,.7)}
.cm-chead b{font-weight:600;color:#fff}
.cm-chead i{width:5px;height:5px;border-radius:50%;background:var(--dv-green);box-shadow:0 0 0 0 rgba(0,182,122,.5);animation:cm-ping 1.8s infinite}
.cm-av--d{background:#fff;color:var(--dv-blue-deep)}
.cm-time{margin-inline-start:auto;font-family:var(--font-mono);font-size:8px;color:rgba(255,255,255,.55)}
.cm-bub{position:relative;max-width:80%;padding:6px 8px 6px;border-radius:10px;box-shadow:0 10px 22px -12px rgba(7,12,22,.6);opacity:0}
.cm-bub em{display:block;font-style:normal;font-size:7px;opacity:.6;margin-top:2px;text-align:right;font-family:var(--font-mono)}
.cm-bub--in{background:#fff;color:var(--ink-1);border-bottom-left-radius:3px;justify-self:start;animation:cm-b1 12s var(--ease-standard) infinite}
.cm-bub--typing{background:#fff;justify-self:start;display:flex;gap:3px;padding:8px 9px;border-bottom-left-radius:3px;animation:cm-b2 12s var(--ease-standard) infinite;position:absolute;left:0;bottom:2px}
.cm-bub--typing i{width:5px;height:5px;border-radius:50%;background:var(--ink-4);animation:cm-dot 1s infinite}
.cm-bub--typing i:nth-child(2){animation-delay:.15s}.cm-bub--typing i:nth-child(3){animation-delay:.3s}
@keyframes cm-dot{0%,100%{transform:translateY(0);opacity:.5}50%{transform:translateY(-3px);opacity:1}}
.cm-bub--out{background:var(--dv-blue);color:#fff;border-bottom-right-radius:3px;justify-self:end;animation:cm-b3 12s var(--ease-standard) infinite}
.cm-ticks{color:rgba(255,255,255,.55);letter-spacing:-2px;animation:cm-ticks 12s infinite}
@keyframes cm-ticks{0%,62%{color:rgba(255,255,255,.55)}66%,100%{color:#5ee0b0}}
@keyframes cm-b1{0%{opacity:0;transform:translateY(8px)}6%,90%{opacity:1;transform:none}96%,100%{opacity:0}}
@keyframes cm-b2{0%,12%{opacity:0;transform:translateY(6px)}17%,44%{opacity:1;transform:none}49%,100%{opacity:0}}
@keyframes cm-b3{0%,48%{opacity:0;transform:translateY(8px) scale(.96)}54%,90%{opacity:1;transform:none}96%,100%{opacity:0}}
.cm-chans{right:10px;bottom:8px;gap:4px;padding:3px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.3);backdrop-filter:blur(6px)}
.cm-chans i{width:20px;height:20px;border-radius:50%;display:grid;place-items:center;color:#fff;animation:cm-chan 6s infinite}
.cm-chans i:nth-child(2){animation-delay:2s}.cm-chans i:nth-child(3){animation-delay:4s}
.cm-chans svg{width:11px;height:11px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
@keyframes cm-chan{0%,28%{background:#fff;color:var(--dv-blue-deep)}34%,100%{background:transparent;color:#fff}}
/* changelog */
.cm-tl{animation:cm-tl 9s var(--ease-standard) infinite}
@keyframes cm-tl{0%{stroke-dashoffset:200}30%,88%{stroke-dashoffset:0}96%,100%{stroke-dashoffset:200}}
.cm-tldots circle{opacity:0;animation:cm-tldot 9s infinite}
.cm-tldots circle:nth-child(2){animation-delay:1s}.cm-tldots circle:nth-child(3){animation-delay:2s}
@keyframes cm-tldot{0%,8%{opacity:0;r:2}14%,86%{opacity:1;r:4}94%,100%{opacity:0}}
.cm-diff{margin-inline-start:auto;font-family:var(--font-mono);font-size:8px;display:inline-flex;gap:4px}
.cm-diff b{color:#0a7d57;font-weight:600}.cm-diff s{color:var(--dv-red);text-decoration:none}
.cm-ver{font-family:var(--font-mono);font-size:8.5px;font-weight:600;color:#38bdf8;background:rgba(56,189,248,.12);border-radius:4px;padding:2px 4px;flex:none}
.cm-cat{font-style:normal;font-size:7px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;border-radius:3px;padding:1px 4px;margin-right:4px}
.cm-cat--r{background:var(--dv-green-soft);color:#0a7d57}.cm-cat--p{background:#e8efff;color:#2554d4}.cm-cat--y{background:#fff4e0;color:#b45309}
.cm-new{font-size:8px;animation:cm-newflash 14s infinite}
@keyframes cm-newflash{0%,3%{background:var(--dv-green);color:#fff}10%,100%{background:var(--dv-green-soft);color:#0a7d57}}
.cm-toast{right:10px;bottom:8px;background:#fff;color:var(--ink-1);animation:cm-toast 14s var(--ease-emphasis) infinite}
.cm-toast .cm-tick{color:#0a7d57}
@keyframes cm-toast{0%,4%{opacity:0;transform:translateY(10px)}9%,34%{opacity:1;transform:none}40%,100%{opacity:0;transform:translateY(10px)}}
@media(prefers-reduced-motion:reduce){
  .cm-live i,.cm-roll,.cm-bars rect,.cm-trend,.cm-st i,.cm-st b,.cm-stamp,.cm-lines rect,.cm-spk,.cm-thumb::after,.cm-tag i,.cm-title i,.cm-newdot,.cm-read span,.cm-langs i,.cm-langs i::before,.cm-links path,.cm-nodes circle,.cm-hub,.cm-tabs i,.cm-job::before,.cm-open::before,.cm-sonar circle,.cm-chead i,.cm-bub,.cm-bub--typing i,.cm-ticks,.cm-chans i,.cm-tl,.cm-tldots circle,.cm-new,.cm-toast{animation:none}
  .cm-bars rect{transform:none}.cm-st b{opacity:0}.cm-stamp,.cm-toast,.cm-bub--in,.cm-bub--out,.cm-tldots circle{opacity:1}.cm-bub--typing{display:none}.cm-spk{stroke-dashoffset:0}.cm-tl{stroke-dashoffset:0}.cm-read span{width:60%}.cm-tag i:first-child,.cm-title i:first-child{opacity:1}.cm-sonar circle{transform:scale(1.6);opacity:.4}
}


#curMenu{min-width:372px;display:grid;grid-template-columns:1fr 1fr;gap:0 4px}
#curMenu .pick-note{grid-column:1/-1}
@media(max-width:480px){#curMenu{min-width:min(92vw,372px);grid-template-columns:1fr}}


/* dashboard mock rows never wrap: names ellipsise, sparkline gives way first */
.acc-r{flex-wrap:nowrap}.acc-n{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;flex:1 1 auto}.acc-n i{white-space:nowrap}.acc-v,.acc-d{white-space:nowrap;flex:none}.acc-s{flex:0 4 54px;min-width:18px}.acc-r{gap:6px;padding:0 10px}
.svc-badge--soon{left:auto;right:12px;background:#fff;border-color:#fff;color:var(--dv-blue-deep)}
.soon-pill{display:inline-block;vertical-align:middle;margin-left:6px;font-style:normal;font-size:9px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;background:rgba(37,84,212,.14);color:#2554d4;border-radius:999px;padding:2px 7px;line-height:1.4}
.foot .soon-pill{background:rgba(255,255,255,.12);color:#9fb8e6}
.cf-tab .soon-pill{margin-left:4px;padding:1px 6px}
/* Widow control: headings balance, paragraphs wrap "pretty"; the script below also glues the last two words. */
h1,h2,h3,h4{text-wrap:balance}
p,li,.lead,.svc-desc,.jny-lede,.cf-lede,.pw-sub,.wt p,.fq-inner p,.disclaimer p{text-wrap:pretty}


/* Company is a narrow dropdown anchored under its button, not a full-width panel. */
.mega--menu{left:auto;right:auto;width:300px;top:calc(100% - 6px);padding:8px;border-radius:18px;border:1px solid rgba(255,255,255,.1);box-shadow:0 30px 60px -20px rgba(7,12,22,.7)}
.mega--menu .mm{display:grid;gap:2px;padding:10px 12px;border-radius:12px;text-decoration:none;color:#fff;transition:background var(--dur-quick)}
.mega--menu .mm:hover{background:rgba(255,255,255,.08)}
.mega--menu .mm b{font-size:14px;font-weight:600;letter-spacing:-.01em}
.mega--menu .mm span{font-size:12px;color:rgba(255,255,255,.5)}
.mega--menu .mm--cta{margin-top:6px;padding:11px 12px;display:flex;align-items:center;justify-content:space-between;border-top:1px solid rgba(255,255,255,.1);border-radius:0 0 12px 12px;font-size:13.5px;font-weight:600;color:#9fb8e6}
.mega--menu .mm--cta:hover{color:#fff;background:transparent}
.mega--menu .mm--cta svg{width:13px;height:13px}
/* grouped mobile drawer */
.nav-links .nl-h{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:rgba(15,23,42,.42);padding:16px 0 6px}
.nav-links .nl-h:first-child{padding-top:8px}
.nav-links a{padding:9px 0}


/* Footer mirrors the live dolvero.com footer: five link columns, the newsletter form,
   trust badges, the Divitae group line and the legal texts. The nav gets a Company panel. */
.foot-grid{grid-template-columns:1.5fr repeat(5,minmax(0,1fr))}
.foot-grid>div:first-child{grid-column:1}
@media(max-width:1180px){.foot-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.foot-grid>div:first-child{grid-column:1/-1}}
@media(max-width:640px){.foot-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.foot ul li a{color:rgba(255,255,255,.62);text-decoration:none;transition:color var(--dur-quick)}
.foot ul li a:hover{color:#fff}
.foot-news{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:var(--space-8);align-items:center;margin-top:var(--space-10);padding:28px 32px;border-radius:22px;border:1px solid rgba(255,255,255,.1);background:linear-gradient(135deg,rgba(37,84,212,.16),rgba(255,255,255,.03) 60%)}
.foot-news h4{margin-bottom:8px}
.foot-news p{margin:0;max-width:44ch}
.foot-news-form{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:center}
.foot-news-form input{height:48px;border-radius:100px;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.06);color:#fff;padding:0 20px;font:inherit;font-size:14.5px;min-width:0;outline:0;transition:border-color var(--dur-quick),background var(--dur-quick)}
.foot-news-form input::placeholder{color:rgba(255,255,255,.4)}
.foot-news-form input:focus{border-color:#4f7df0;background:rgba(255,255,255,.09)}
.foot-news-form button{height:48px;display:inline-flex;align-items:center;gap:8px;border:0;border-radius:100px;padding:0 22px;background:var(--dv-blue,#2554d4);color:#fff;font:inherit;font-weight:650;font-size:14.5px;cursor:pointer;box-shadow:0 10px 26px rgba(37,84,212,.34);transition:transform var(--dur-quick),box-shadow var(--dur-quick)}
.foot-news-form button:hover{transform:translateY(-1px);box-shadow:0 14px 32px rgba(37,84,212,.5)}
.foot-news-form button svg{width:13px;height:13px}
.foot-news-note{grid-column:1/-1;margin:2px 0 0!important;font-size:12px!important;color:rgba(255,255,255,.42)!important}
.foot-news-note a{color:rgba(255,255,255,.62)}
.foot-news-note.is-ok{color:#3ddc84!important}.foot-news-note.is-err{color:#ff7a7a!important}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media(max-width:860px){.foot-news{grid-template-columns:1fr;padding:22px 20px}}
@media(max-width:480px){.foot-news-form{grid-template-columns:1fr}.foot-news-form button{justify-content:center}}
.foot-trustlist{display:flex;flex-wrap:wrap;gap:8px}
.foot-trustlist li{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 14px;border-radius:12px;border:1px solid rgba(79,125,240,.3);background:rgba(37,84,212,.12);color:#fff;font-size:12.5px;font-weight:600;white-space:nowrap}
.foot-trustlist li svg{width:15px;height:15px;fill:none;stroke:#4f7df0;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.foot-group{display:inline-flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:11.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.4)}
.foot-group span{color:rgba(255,255,255,.22)}
.foot-group a{color:rgba(255,255,255,.7);text-decoration:none;letter-spacing:.06em}
.foot-group a:hover{color:#fff}
.disclaimer p b{color:rgba(255,255,255,.7);font-weight:600}
.mega-list--3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:940px){.mega-list--3{grid-template-columns:1fr}}

/* 2 Nov 2026: hero glow layers anchored in px. They were sized in % of the hero box, so any change in hero height (web font swap
   re-wrapping the heading, buttons wrapping) moved these viewport-sized layers and counted as a large layout shift. */
.hero .bg__aurora{inset:auto -25%;top:-200px;height:1200px}
.hero::before{top:-155px;height:540px}
@media (max-width:900px){.hero .bg__aurora{top:-290px;height:1720px}.hero::before{top:-228px;height:797px}}
/* fallback faces sized to the web fonts (median width ratios measured on the hero texts), so text keeps its line breaks when
   Poppins / Plus Jakarta Sans swap in; landing pages override them per page */
@font-face{font-family:"Poppins Fallback";src:local("Arial"),local("ArialMT"),local("Helvetica"),local("Roboto");font-weight:100 549;size-adjust:111.7%;ascent-override:94%;descent-override:31.3%;line-gap-override:8.95%}
@font-face{font-family:"Poppins Fallback";src:local("Arial Bold"),local("Arial-BoldMT"),local("Helvetica Bold"),local("Roboto Bold");font-weight:550 900;size-adjust:106.9%;ascent-override:98.2%;descent-override:32.7%;line-gap-override:9.35%}
@font-face{font-family:"Jakarta Fallback";src:local("Arial"),local("ArialMT"),local("Helvetica"),local("Roboto");font-weight:100 549;size-adjust:103.7%}
@font-face{font-family:"Jakarta Fallback";src:local("Arial Bold"),local("Arial-BoldMT"),local("Helvetica Bold"),local("Roboto Bold");font-weight:550 900;size-adjust:98.2%}
:root{--font-display:"Poppins","Poppins Fallback",system-ui,sans-serif;--font-body:"Plus Jakarta Sans","Jakarta Fallback",system-ui,-apple-system,sans-serif}

/* 2 Nov 2026: sheens move with transform instead of left (a moving left is a layout shift on every frame); same path and timing */
@media (prefers-reduced-motion:no-preference){
.dcard::before{left:-40%;animation-name:sheen-tx}
@keyframes sheen-tx{0%,72%{transform:translateX(0) rotate(18deg)}100%{transform:translateX(212.5%) rotate(18deg)}}
.mk-card::before{left:-45%;animation-name:mk-sheen-tx}
@keyframes mk-sheen-tx{0%,65%{transform:translateX(0) rotate(18deg)}100%{transform:translateX(309.1%) rotate(18deg)}}
.cm-thumb::after{left:-45%;animation-name:cm-sheen-tx}
@keyframes cm-sheen-tx{0%,65%{transform:translateX(0) rotate(18deg)}100%{transform:translateX(340%) rotate(18deg)}}
.sheen i{left:-45%;animation-name:sheen-run-tx}
@keyframes sheen-run-tx{0%,64%{transform:translateX(0) rotate(16deg)}100%{transform:translateX(460.5%) rotate(16deg)}}
#answers .jsheen i{left:-45%;animation-name:j-sheen-tx}
@keyframes j-sheen-tx{0%,74%{transform:translateX(0) rotate(16deg)}92%,100%{transform:translateX(500%) rotate(16deg)}}
#compare .cf-sheen i{left:-45%;animation-name:cf-sheen-tx}
@keyframes cf-sheen-tx{0%,76%{transform:translateX(0) rotate(16deg)}94%,100%{transform:translateX(500%) rotate(16deg)}}
}
/* hero text widths in em instead of ch (ch follows the fallback font until the web font arrives, so the text re-wrapped) */
.lead{max-width:45.38em}
.hero-mid .lead,.hero .lead{max-width:43.92em}
#why .why-head .lead{max-width:48.31em}
.mh-copy .lead{max-width:40.99em}
.ch .ch-lead{max-width:40.99em}
.ra-h1{max-width:18.84em}
.ch h1{max-width:13.82em}
.ar-hero h1{max-width:11.3em}
.hero-trust{min-height:64px}