/* Landing-page feature illustrations, drawn in HTML/CSS/SVG so they stay sharp at
   any size. They replace benefit-0N, workflow-0N and works-0N .webp, keeping each
   one's layout: boxes are placed in percent of the original art, type and radii in
   cqw (each stage is an inline-size container). Decorative only, so every stage is
   aria-hidden and ignores the pointer. Generated by scratchpad illus/build.js. */
/* isolation: its own stacking layer, so a glow at z-index:-1 stays inside the card instead of painting under its black background */
.ill{position:relative;width:100%;container-type:inline-size;overflow:hidden;isolation:isolate;pointer-events:none;user-select:none;
  color:#fff;font-family:var(--font-suisse),"Helvetica Neue",Helvetica,Arial,sans-serif;font-weight:500;letter-spacing:-.01em;line-height:1}
.ill > *{position:absolute}
.ill svg{display:block;width:100%;height:100%;overflow:visible}
.ill-cover{position:absolute;inset:0;z-index:-1;pointer-events:none}
.ill-cover > .ill{position:absolute;top:0;left:0}
/* the dot grid, faded out towards the bottom (and the edges where the art did) */
.ill-dots{inset:0;background-image:radial-gradient(circle at center,rgba(255,255,255,.14) 0 var(--dot,1.3px),transparent calc(var(--dot,1.3px) + .6px));
  background-size:var(--grid) var(--grid);background-position:var(--gx,0) var(--gy,0);
  -webkit-mask-image:var(--fade);mask-image:var(--fade)}
/* placeholder rows */
.ill-ghost{background:rgba(255,255,255,.045);box-shadow:inset 0 0 0 1px rgba(255,255,255,.035)}
.ill-ghost.deep{background:rgba(255,255,255,.065)}
.ill-bar{background:rgba(255,255,255,.07)}
/* the dark pill, and the multicolour glow behind it */
.ill-pill{display:flex;align-items:center;background:#0c0c0e;box-shadow:inset 0 0 0 1px rgba(255,255,255,.12),0 1px 0 rgba(255,255,255,.04)}
.ill-glow{z-index:-1}
.ill-glow::before,.ill-glow::after{content:"";position:absolute;inset:0;border-radius:999px}
.ill-glow::before{background:linear-gradient(90deg,#ffa24c 0%,#5b7cff 26%,#a77bff 50%,#ff5f8f 74%,#ffa24c 100%);filter:blur(var(--blur,18px));opacity:.62}
.ill-glow::after{background:linear-gradient(90deg,rgba(255,162,76,.55),rgba(255,162,76,0) 14%,rgba(255,162,76,0) 86%,rgba(255,162,76,.55));filter:blur(var(--blur,18px))}
.ill-green{color:#97d94b}
.ill-muted{color:#8f9196}
.ill-row{gap:0;white-space:nowrap}
.ill-row > *{position:absolute;top:50%;transform:translateY(-50%)}

.ill-b1{aspect-ratio:1887/1500;--grid:2.067cqw;--gx:1.961cqw;--gy:1.961cqw;
  --fade:linear-gradient(to bottom,#000 0,#000 62%,transparent 92%)}
.ill-b1 .g1{left:3.498%;top:4.4%;width:89.295%;height:11.2%;border-radius:3.286cqw}
.ill-b1 .g2{left:23.847%;top:10%;width:68.362%;height:7.6%;border-radius:2.968cqw;background:rgba(255,255,255,.06)}
.ill-b1 .g3{left:10.493%;top:46%;width:82.035%;height:11.133%;border-radius:3.286cqw}
.ill-b1 .g4{left:15.262%;top:58.4%;width:72.496%;height:35.933%;border-radius:3.392cqw;background:rgba(255,255,255,.035)}
.ill-b1 .glow{left:1.59%;top:20%;width:94.33%;height:16.333%;border-radius:999px;--blur:2.12cqw}
.ill-b1 .pill{left:0.954%;top:23.2%;width:95.39%;height:9.933%;border-radius:999px;font-size:2.438cqw}
.ill-b1 .star{left:6.944%;width:2.491cqw;height:2.491cqw}
.ill-b1 .amt{left:11.667%}
.ill-b1 .chk{left:34.556%;width:2.332cqw;height:2.332cqw}
.ill-b1 .st{left:38.333%}
.ill-b1 .cur{left:66.667%}
.ill-b1 .ago{right:4.722%;font-weight:400}

.ill-b2{aspect-ratio:1848/1500;--grid:2.11cqw;--gx:2.002cqw;--gy:2.002cqw;
  --fade:linear-gradient(to bottom,#000 0,#000 66%,transparent 94%)}
.ill-b2 .g1{left:10.065%;top:28%;width:80.141%;height:10%;border-radius:3.03cqw}
.ill-b2 .g2{left:15.26%;top:33.2%;width:69.751%;height:9.933%;border-radius:3.03cqw;background:rgba(255,255,255,.06)}
.ill-b2 .g3{left:17.857%;top:38.4%;width:64.881%;height:8.733%;border-radius:3.03cqw;background:rgba(255,255,255,.05)}
.ill-b2 .glow{left:8.658%;top:12.333%;width:82.792%;height:15%;border-radius:999px;--blur:2.165cqw}
.ill-b2 .pill{left:7.846%;top:15.267%;width:84.307%;height:9.067%;border-radius:999px;font-size:2.273cqw}
.ill-b2 .app{left:4.172%;width:3.896cqw;height:3.896cqw;border-radius:0.92cqw;
  background:linear-gradient(180deg,#f04848,#c81f24);box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 2px 6px rgba(200,30,36,.35)}
.ill-b2 .app svg{width:46%;height:46%;margin:27%}
.ill-b2 .chk{left:12.131%;width:2.165cqw;height:2.165cqw}
.ill-b2 .st{left:16.496%}
.ill-b2 .amt{right:4.236%;font-weight:400;color:#f2f2f3}
@container (max-width:520px){.ill-b2 .amt .x{display:none}}

.ill-w1,.ill-w2,.ill-w3{aspect-ratio:1209/882;--grid:3.226cqw;--gx:3.06cqw;--gy:3.805cqw;
  --fade:linear-gradient(to bottom,transparent 8%,#000 11%,#000 40%,transparent 51%)}
.ill-w1 .glow{left:23.987%;top:37.415%;width:52.936%;height:22.676%;border-radius:999px;--blur:3.474cqw}
.ill-w1 .pill{left:26.303%;top:42.29%;width:62.448%;height:13.379%;border-radius:999px}
.ill-w1 .slot1{left:29.859%;top:45.011%;width:16.212%;height:7.937%;border-radius:1.241cqw;background:#18181b;box-shadow:inset 0 0 0 1px rgba(255,255,255,.1)}
.ill-w1 .slot2{left:48.222%;top:45.011%;width:16.212%;height:7.937%;border-radius:1.241cqw;background:#18181b;box-shadow:inset 0 0 0 1px rgba(255,255,255,.1)}

.ill-w2 .halo{left:31.431%;top:15.873%;width:37.386%;height:53.288%;border-radius:999px;background:radial-gradient(closest-side,rgba(98,82,214,.38),rgba(98,82,214,0));filter:blur(1.985cqw)}
.ill-w2 .orb{left:36.973%;top:23.469%;width:26.303%;height:36.054%;border-radius:999px;background:linear-gradient(100deg,#837a4c 0%,#4d6098 20%,#2152cf 33%,#4b3fd2 47%,#5c3ccf 55%,#7c389e 68%,#a51f45 84%,#8b3442 100%);box-shadow:0 2.151cqw 4.963cqw rgba(70,60,190,.35),inset 0 1px 0 rgba(255,255,255,.18)}
.ill-w2 .orb svg{position:absolute;left:29%;top:31.5%;width:42%;height:auto;color:#fff}

.ill-w3 .c1{left:16.46%;top:20.522%;width:12.242%;height:16.78%;border-radius:999px;background:rgba(255,255,255,.035);box-shadow:inset 0 0 0 1px rgba(255,255,255,.09)}
.ill-w3 .c2{left:77.998%;top:20.522%;width:12.242%;height:16.78%;border-radius:999px;background:rgba(255,255,255,.035);box-shadow:inset 0 0 0 1px rgba(255,255,255,.09)}
.ill-w3 .c1 svg,.ill-w3 .c2 svg{position:absolute;width:34%;height:34%;left:33%;top:33%;color:rgba(255,255,255,.42)}
.ill-w3 .halo{left:37.221%;top:34.014%;width:25.31%;height:34.694%;border-radius:999px;background:conic-gradient(from 200deg,#ff9b4a,#5b6dff,#a670ff,#ff5f8f,#ff9b4a);filter:blur(3.143cqw);opacity:.55}
.ill-w3 .chat{left:42.266%;top:40.93%;width:15.219%;height:20.862%;border-radius:999px;background:#131315;box-shadow:inset 0 0 0 0.165cqw rgba(255,255,255,.14),0 0.827cqw 2.481cqw rgba(0,0,0,.6)}
.ill-w3 .chat svg{position:absolute;width:33%;height:33%;left:33.5%;top:33%;color:#fff}

.ill-k1,.ill-k2,.ill-k3{--grid:3.683cqw;--gx:3.494cqw;--gy:3.494cqw}
.ill-k1{aspect-ratio:1059/972;--fade:linear-gradient(to bottom,#000 0,#000 78%,transparent 98%)}
.ill-k1 .f1{left:10.198%;top:17.284%;width:79.792%;height:14.095%;border-radius:3.022cqw}
.ill-k1 .f1b{left:14.731%;top:22.222%;width:27.101%;height:3.909%;border-radius:999px;background:rgba(255,255,255,.06)}
.ill-k1 .f2{left:10.198%;top:38.272%;width:79.792%;height:14.095%;border-radius:3.022cqw}
.ill-k1 .dots6{left:14.731%;top:43.621%;height:3.292%;width:27.384%;display:flex;gap:1.794cqw}
.ill-k1 .dots6 i{position:static;flex:0 0 auto;width:3.022cqw;height:3.022cqw;border-radius:50%;background:rgba(255,255,255,.07)}
.ill-k1 .halo{left:18.886%;top:61.728%;width:62.323%;height:23.663%;border-radius:999px;background:radial-gradient(closest-side,rgba(120,80,220,.45),rgba(120,80,220,0));filter:blur(2.833cqw)}
.ill-k1 .btn{left:23.796%;top:64.815%;width:52.597%;height:17.181%;border-radius:999px;display:flex;align-items:center;justify-content:center;gap:2.833cqw;font-size:4.721cqw;font-weight:500;background:linear-gradient(90deg,#c38a34 0%,#8a7c74 16%,#2b56d1 33%,#5b48d6 50%,#7c3fd0 60%,#9c2e86 76%,#b2223f 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.22)}
.ill-k1 .btn svg{position:static;width:2.833cqw;height:2.833cqw}

.ill-k2{aspect-ratio:1059/963}
.ill-k2 .panel{left:28.99%;top:9.346%;width:44.004%;height:49.117%;border-radius:4.533cqw;overflow:hidden;background:radial-gradient(60% 70% at 0% 50%,rgba(64,92,230,.55),rgba(64,92,230,0) 70%),radial-gradient(60% 70% at 100% 50%,rgba(220,50,110,.5),rgba(220,50,110,0) 70%),#0b0b0e;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.ill-k2 .panel::before{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,transparent calc(31% - .5px),rgba(110,120,255,.28) 31%,transparent calc(31% + .5px),transparent calc(67% - .5px),rgba(255,90,140,.28) 67%,transparent calc(67% + .5px)),
  linear-gradient(180deg,transparent calc(41% - .5px),rgba(255,90,140,.22) 41%,transparent calc(41% + .5px))}
.ill-k2 .radar{left:32.2%;top:13.188%;width:37.771%;height:41.537%;border-radius:999px;background:#0a0a0d}
.ill-k2 .radar svg{position:absolute;inset:0}
.ill-k2 .sweep{position:absolute;inset:6%;border-radius:50%;background:conic-gradient(from 0deg,rgba(80,120,255,0) 0deg,rgba(80,120,255,0) 284deg,rgba(80,120,255,.55) 359deg,rgba(80,120,255,0) 360deg);
  transform:rotate(-14deg);-webkit-mask-image:radial-gradient(closest-side,#000 99%,transparent 100%);mask-image:radial-gradient(closest-side,#000 99%,transparent 100%)}
@media (prefers-reduced-motion:no-preference){.ill-k2 .sweep{animation:ill-sweep 5s linear infinite}}
@keyframes ill-sweep{from{transform:rotate(-14deg)}to{transform:rotate(346deg)}}

.ill-k3{aspect-ratio:1059/975;--fade:linear-gradient(to bottom,#000 0,#000 74%,transparent 96%)}
.ill-k3 .glow{left:9.443%;top:26.154%;width:81.209%;height:19.487%;border-radius:999px;--blur:3.211cqw}
.ill-k3 .pill{left:8.026%;top:30.256%;width:83.664%;height:11.487%;border-radius:999px;font-size:3.777cqw}
.ill-k3 .star{left:5.869%;width:3.966cqw;height:3.966cqw}
.ill-k3 .amt{left:14.108%;font-weight:400}
.ill-k3 .win{right:6.208%;font-size:1.04em}
.ill-k3 .card{left:17.564%;top:50.462%;width:65.156%;height:22.667%;border-radius:3.777cqw}
.ill-k3 .b1{left:22.096%;top:55.385%;width:25.401%;height:3.385%;border-radius:999px;background:rgba(255,255,255,.06)}
.ill-k3 .b2{left:22.096%;top:62.154%;width:42.398%;height:3.385%;border-radius:999px;background:rgba(255,255,255,.06)}

/* the dots scale with the art, as the grid already did; a fixed 1.3px turned into a coarse mesh on small cards */
.ill-b1,.ill-b2{--dot:max(.6px,.2cqw)}
.ill-w1,.ill-w2,.ill-w3,.ill-k1,.ill-k2,.ill-k3{--dot:max(.5px,.3cqw)}
/* b1/b2: a tighter glow, quieter ghost rows, the original's lighter type, and a readable floor */
.ill-b1 .ill-ghost,.ill-b2 .ill-ghost{box-shadow:none}
.ill-b1 .g2{background:rgba(255,255,255,.035)}
.ill-b1 .g4{background:rgba(255,255,255,.03);-webkit-mask-image:linear-gradient(#000 15%,transparent 55%);mask-image:linear-gradient(#000 15%,transparent 55%)}
.ill-b2 .g2{background:rgba(255,255,255,.03)}
.ill-b2 .g3{background:rgba(255,255,255,.025)}
.ill-b1 .glow{top:21%;height:13.5%;--blur:1.15cqw}
.ill-b2 .glow{top:13.7%;height:11.6%;--blur:1.1cqw}
.ill-b1 .st,.ill-b1 .ago,.ill-b2 .st,.ill-b2 .amt{font-family:"Suisse Int'l Book",var(--font-suisse),sans-serif;font-weight:500;letter-spacing:0}
.ill-b1 .pill{font-size:max(2.438cqw,9px)}
.ill-b2 .pill{font-size:max(2.273cqw,9px)}
.ill-b1 .star{left:5.82%;width:max(2.67cqw,9.8px);height:max(2.67cqw,9.8px)}
.ill-b1 .chk{width:max(2.332cqw,8.5px);height:max(2.332cqw,8.5px)}
.ill-b2 .app{width:max(3.896cqw,14px);height:max(3.896cqw,14px)}
.ill-b2 .chk{width:max(2.165cqw,8px);height:max(2.165cqw,8px)}
/* w1: a tight rim, not a haze */
.ill-w1 .glow{left:24.4%;top:39.7%;width:52.1%;height:18.6%;--blur:1.8cqw}
.ill-w1 .glow::before{opacity:.42}
.ill-w1 .glow::after{opacity:.8}
/* w3: the glow's colours run left to right as in the original, and the side circles show */
.ill-w3 .halo{left:40.78%;top:38.89%;width:18.2%;height:24.94%;background:linear-gradient(90deg,#d9a46c 0%,#5b6dff 28%,#a670ff 50%,#ff5f8f 72%,#ff8a3d 100%);filter:blur(1.8cqw);opacity:.55}
.ill-w3 .c1,.ill-w3 .c2{background:rgba(255,255,255,.082);box-shadow:inset 0 0 0 max(1px,.25cqw) rgba(255,255,255,.14)}
.ill-w3 .c1 svg,.ill-w3 .c2 svg{color:rgba(255,255,255,.46)}
.ill-w3 .chat svg{width:38%;height:38%;left:31.5%;top:32.4%}
/* How it works: equal columns (the old images gave each the same intrinsic width; plain divs don't), level art, roomier tablets */
#how-it-work .flex.justify-between > div{flex:1 1 0%;min-width:0}
@media (min-width:768px) and (max-width:1279.98px){#how-it-work .works-card h3{min-height:2em}}
@media (min-width:768px) and (max-width:1023.98px){#how-it-work .works-card > .text-center{padding-left:14px;padding-right:14px}}
/* k1: the button floats on a purple shadow, with a full-size chevron and a readable floor */
.ill-k1 .halo{display:none}
.ill-k1 .btn{font-size:max(4.721cqw,9px);box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 2.4cqw 6cqw rgba(110,65,180,.5)}
.ill-k1 .btn svg{width:max(4.2cqw,8px);height:max(4.2cqw,8px)}
/* k2: the beam's bright edge leads and it trails clockwise, as in the original's still frame */
.ill-k2 .sweep{background:conic-gradient(from 286deg,rgba(80,120,255,.55) 0deg,rgba(80,120,255,.1) 74deg,rgba(80,120,255,0) 74.5deg 360deg);transform:none}
@keyframes ill-sweep{from{transform:rotate(0)}to{transform:rotate(-360deg)}}
/* k3: regular-weight amount beside the heavier "Win", and a readable floor */
.ill-k3 .pill{font-size:max(3.777cqw,8px)}
.ill-k3 .star{width:max(3.966cqw,8.4px);height:max(3.966cqw,8.4px)}
.ill-k3 .amt{font-family:"Suisse Intl","Helvetica Neue",Helvetica,Arial,sans-serif;font-weight:400}

/* ── Chargeback Prevention card ("frd-") ─────────────────────────────────────
   Light streaks fly along the lines into the circle, and the circle answers each one
   with a ripple as it enters (js/fraud-card.js, which times them).
   The artwork's own lines and streaks were baked into fraud-shape.webp; fraud-shape-glow.webp is that image without them, and the
   lines are drawn here instead so the streaks can travel along them. Each SVG is
   stretched over the card exactly as the image is (preserveAspectRatio none).
   Phones get their own set, converging on the circle above the text. */
.frd-fx{position:absolute;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none;border-radius:inherit;overflow:hidden}
.frd-m{display:block}.frd-d{display:none}
@media (min-width:768px){.frd-m{display:none}.frd-d{display:block}}
.frd-l path{fill:none;stroke:rgba(255,255,255,.16);stroke-width:1;stroke-dasharray:3 6;vector-effect:non-scaling-stroke}
.frd-s path{fill:none;stroke:#fff;stroke-linecap:round;opacity:0}
.frd-s .t{stroke-width:1.1;stroke-dasharray:90 2000}
.frd-s .m{stroke-width:1.4;stroke-dasharray:40 2000}
.frd-s .h{stroke-width:1.8;stroke-dasharray:14 2000}
.frd-orb{position:relative;width:100%;height:100%}
.frd-icon{position:relative;display:block;width:100%;height:100%}
.frd-hit{position:absolute;inset:0;border-radius:50%;box-shadow:0 0 0 1.5px rgba(255,255,255,.55),0 0 22px rgba(170,130,255,.35);opacity:0;pointer-events:none}
@media (prefers-reduced-motion:no-preference){
  .frd-s .t{animation:frd-t var(--d) cubic-bezier(.5,0,.85,.45) var(--w) infinite}
  .frd-s .m{animation:frd-m var(--d) cubic-bezier(.5,0,.85,.45) var(--w) infinite}
  .frd-s .h{animation:frd-h var(--d) cubic-bezier(.5,0,.85,.45) var(--w) infinite}
  .frd-glow{animation:frd-glow 7s ease-in-out infinite alternate}
}
/* without motion the streaks hold still at scattered points, as in the original artwork */
@media (prefers-reduced-motion:reduce){
  .frd-s g{--p:450}
  .frd-s g:nth-child(1){--p:380}.frd-s g:nth-child(2){--p:640}.frd-s g:nth-child(3){--p:300}
  .frd-s g:nth-child(4){--p:720}.frd-s g:nth-child(5){--p:520}.frd-s g:nth-child(6){--p:250}
  .frd-s g:nth-child(7){--p:600}.frd-s g:nth-child(8){--p:330}.frd-s g:nth-child(9){--p:680}
  .frd-s g:nth-child(10){--p:420}
  .frd-s .t{stroke-dashoffset:calc(90 - var(--p));opacity:.3}
  .frd-s .m{stroke-dashoffset:calc(40 - var(--p));opacity:.6}
  .frd-s .h{stroke-dashoffset:calc(14 - var(--p));opacity:1}
}
/* the dash's leading end runs from the start of its line (0) to the circle's centre (1000),
   lit all the way: it meets the circle's edge before the end, and is hidden under it after */
@keyframes frd-t{0%{stroke-dashoffset:90;opacity:0}15%{opacity:.3}100%{stroke-dashoffset:-910;opacity:.3}}
@keyframes frd-m{0%{stroke-dashoffset:40;opacity:0}15%{opacity:.6}100%{stroke-dashoffset:-960;opacity:.6}}
@keyframes frd-h{0%{stroke-dashoffset:14;opacity:0}15%{opacity:1}100%{stroke-dashoffset:-986;opacity:1}}
@keyframes frd-glow{from{opacity:.78}to{opacity:1}}
