/* Sections below the hero, illustrations, footer and contact modal.
   First-screen styles are inlined by the shared white-label-crypto-wallet Pug template. */
/* ================= TOKENS ================= */
:root{
  --white:#FFFFFF; --glass-2:rgba(255,255,255,.38);
  --r-xl:32px; --r-lg:24px; --r-md:18px;
  --fs-title:clamp(20px,1.6vw,24px); --fs-cardtitle:clamp(24px,2.2vw,32px);
  --fs-caption:14px; --fs-mock:13px;
}
ul{list-style:none}
.h-xl{font-weight:500;font-size:calc(clamp(40px,5.6vw,80px) * var(--hk,1));line-height:1.05;letter-spacing:-.04em}
#contact-title{font-weight:500}
.h-card{font-weight:400;font-size:clamp(28px,3.1vw,45px);line-height:1.1;letter-spacing:-.04em}
.h-sm{font-weight:400;font-size:clamp(22px,2.1vw,30px);line-height:1.3;letter-spacing:-.04em}
.small{font-weight:500;font-size:14px;line-height:1.5;letter-spacing:-.02em}
.muted{color:var(--ink-2)}
.acc{color:var(--acc)}
/* ================= LAYOUT ================= */
.wrap{width:min(1320px,calc(100% - 120px));margin:0 auto}
.section{padding:140px 0}
.center{text-align:center}
.grid{display:grid;gap:20px}
.btn.white{--bg:#fff;--fg:var(--ink)}
.btn.white .dot svg{color:#fff}
.btn.ghost{--bg:transparent;--fg:var(--ink);box-shadow:inset 0 0 0 1px rgba(29,36,51,.25)}
.btn.ghost .dot svg{color:#fff}
.btn.block{width:100%;justify-content:center;padding:0 8px 0 22px}
.btn.block .roll{margin-right:auto;margin-left:auto}
.btn.sm{height:42px;font-size:14px;padding-left:18px}
.btn.sm .dot{width:28px;height:28px}
.chip.on{background:var(--ink);color:#fff}
.up{color:#15935a;font:700 12px/1 var(--font)}
.words.in .w{opacity:1;filter:none;transform:none;transition:opacity .7s var(--ease),filter .7s var(--ease),transform .8s var(--ease);transition-delay:calc(var(--i) * 45ms)}
.statement .micro{color:var(--acc);opacity:0;margin-bottom:26px}
.statement h2{max-width:17ch;color:#12203d}
.statement h2 .sw{opacity:.1;transition:opacity .15s linear}
.statement h2 .sw.b{color:var(--acc)}
/* ================= SECTION HEAD ================= */
.shead{display:grid;grid-template-columns:1.25fr 1fr;gap:40px;align-items:end}
.shead .micro{color:var(--acc);margin-bottom:18px;display:block}
.two{color:var(--ink)}
.two .t2{color:var(--ink-3)}
/* headings marked data-fill: the grey line fills with brand blue word by word while the heading scrolls up the screen (--f is set by script) */
h2[data-fill] .t2 .w{color:color-mix(in srgb,var(--acc) calc(var(--f,0) * 100%),var(--ink-3))}
@media (prefers-reduced-motion:reduce){h2[data-fill] .t2 .w{color:var(--acc)}}
.rv{opacity:0;transform:translateY(40px);filter:blur(8px)}
.rv.in{opacity:1;transform:none;filter:none;transition:opacity .8s var(--ease),transform .9s var(--ease),filter .8s var(--ease);transition-delay:calc(var(--d,0) * 70ms)}
/* the next heading is pinned at mid-screen, so its own offset is ~(100vh - heading)/2: mirror that above the block */
.section.sec-intro{padding:clamp(100px,calc(50vh - 175px),480px) 0 0}
.exec-cards{grid-template-columns:repeat(4,1fr);grid-auto-rows:1fr auto auto;margin-top:64px}
.ecard{background:var(--white);border-radius:var(--r-lg);padding:28px;min-height:280px;display:flex;flex-direction:column;transition:transform .5s var(--spring),box-shadow .4s}
.ecard:hover{transform:translateY(-6px);box-shadow:0 30px 60px -40px rgba(29,60,120,.35)}
.ecard .h-sm{margin-top:0;padding-top:40px;font-size:24px}
/* shared rows across cards so every title and text starts on one line */
@supports (grid-template-rows:subgrid){.exec-cards .ecard{display:grid;grid-row:span 3;grid-template-rows:subgrid;row-gap:0;align-content:start}.exec-cards .ecard .bico{align-self:start}}
.ecard p{margin-top:12px}
/* heading pins in the middle, words fill with scroll, then it dissolves while the cards rise over it */
.ba-intro{height:280vh;text-align:center;position:relative;z-index:0}
.bai-pin{position:sticky;top:0;height:100vh;height:100svh;display:flex;align-items:center}
.bai-pin .wrap{will-change:opacity,filter,transform}
.ba-intro h2 .t2{color:var(--acc)}
.ba-intro h2 .w{opacity:.12;filter:none;transform:none;transition:none}
.ba-intro p{opacity:0}
.ba{margin-top:-156vh;z-index:1}
.ba-intro h2 > span{display:block}
.ba-intro h2 .l2{padding-left:22%}
.ba-intro p{max-width:62ch;margin:36px auto 0}
.ba{position:relative;height:260vh}
.ba-sticky{position:sticky;top:0;height:100vh;display:flex;align-items:center;padding-top:clamp(84px,10vh,104px);padding-bottom:24px}
.ba-cards{display:grid;grid-template-columns:1fr 1fr;gap:16px;width:min(1180px,100%);margin:0 auto}
.bcard{position:relative;border-radius:var(--r-xl);padding:clamp(28px,4vh,44px) clamp(28px,3vw,44px);min-height:min(620px,calc(100vh - 150px));display:flex;flex-direction:column;overflow:hidden;will-change:transform,opacity}
.bcard.before{background:var(--cream);z-index:2}
.bcard.after{z-index:1;color:#fff;background:radial-gradient(120% 70% at 85% 0%,rgba(255,255,255,.22),rgba(255,255,255,0) 55%),linear-gradient(165deg,#6a9df6 0%,#4c83ee 38%,#2f63d2 72%,#1d49a8 100%);box-shadow:0 40px 80px -40px rgba(29,73,168,.55)}
.bcard .mark{display:flex;align-items:center;height:30px}
.bcard .mark img{height:30px;width:auto;display:block}
.bcard.before .mark img{filter:grayscale(1);opacity:.45}
.bcard .mark-t{font:700 clamp(13px,1.05vw,15px)/1 var(--font);letter-spacing:.14em;text-transform:uppercase;color:#7a8394}
/* trial: logo on a white pill, same as in the header */
.bcard.after .mark{align-self:flex-start;height:44px;margin:-7px 0 -7px -4px;padding:0 20px 0 14px;border-radius:40px;background:#fff;box-shadow:0 10px 30px -14px rgba(10,30,90,.5)}
.bcard.after .mark img{height:26px;filter:none}
.bcard h3{margin-top:clamp(22px,4vh,40px);font-weight:400;font-size:clamp(30px,2.9vw,46px);line-height:1.08;letter-spacing:-.04em}
.bcard.before h3{color:#7a8394}
.bcard ul{margin-top:auto;padding-top:28px;display:flex;flex-direction:column;gap:clamp(10px,1.6vh,16px)}
@media (min-width:768px){@supports (grid-template-rows:subgrid){
  .ba-cards{grid-template-rows:auto auto 1fr;row-gap:0}
  .bcard{display:grid;grid-row:span 3;grid-template-rows:subgrid;row-gap:0}
  .bcard .mark{justify-self:start}
  .bcard ul{margin-top:0;align-self:start}
}}
.bcard li{display:flex;gap:14px;align-items:flex-start;font:500 clamp(16px,1.3vw,18px)/1.45 var(--font);letter-spacing:-.02em}
.bcard.before li{color:#5f6878}
.bcard.after li{font-weight:600}
.bcard li i{flex:none;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;margin-top:-1px}
.bcard li i svg{width:12px;height:12px}
.bcard.before li i{background:#8a93a3;color:#fff}
.bcard.after li i{background:#fff;color:#2f63d2}
/* ================= REVENUE ================= */
.rev-head p{margin-top:36px;max-width:52ch}
.stack{margin-top:80px;display:flex;flex-direction:column;gap:28px}
.scard{position:sticky;top:calc(110px + var(--i) * 22px);display:grid;grid-template-columns:1fr 1fr;gap:10px;background:var(--bg);border-radius:var(--r-xl);padding:10px;height:min(620px,74vh);transform-origin:50% 0;box-shadow:0 -1px 0 var(--line)}
.scard .txt{background:var(--white);border-radius:var(--r-lg);padding:32px;display:flex;flex-direction:column}
.scard .top{display:flex;justify-content:space-between;align-items:center}
.scard .tag{display:inline-flex;align-items:center;gap:8px;font:600 12px/1 var(--font);letter-spacing:.1em;text-transform:uppercase;color:var(--acc)}
.scard .tag svg{width:16px;height:16px}
.scard .n{font:600 14px/1 var(--font);color:var(--ink-3)}
.scard h3{margin-top:36px}
.scard p{margin-top:14px;max-width:44ch}
.scard .btn{margin-top:auto}
.scard .ph{border-radius:var(--r-lg);overflow:hidden;position:relative}
/* on-ramp / off-ramp card */
.scard .ph-ramp{container-type:size;background:radial-gradient(55% 50% at 82% 6%,rgba(79,134,240,.22),transparent 70%),radial-gradient(60% 50% at 6% 96%,rgba(169,196,247,.4),transparent 70%),var(--tint)}
.wg{position:absolute;inset:0;display:grid;place-items:center;font:500 min(2.78cqw,2.96cqh)/1.25 var(--font);color:var(--ink)}
/* converter widget that flips between Buy and Sell */
.wg{perspective:70em}
.wg-flip{position:relative;width:21em;height:29.4em;transform-style:preserve-3d;animation:wgflip 9s cubic-bezier(.6,0,.3,1) infinite}
@keyframes wgflip{0%,42%{transform:rotateY(0)}50%,92%{transform:rotateY(180deg)}100%{transform:rotateY(360deg)}}
.wg-face{position:absolute;inset:0;display:flex;flex-direction:column;padding:1.3em;border-radius:1.8em;background:#fff;backface-visibility:hidden;-webkit-backface-visibility:hidden;box-shadow:0 2.6em 4em -2.4em rgba(18,40,110,.6),inset 0 0 0 1px rgba(255,255,255,.9)}
.wg-face.k{transform:rotateY(180deg)}
.wg-tabs{display:grid;grid-template-columns:1fr 1fr;padding:.3em;border-radius:2em;background:var(--bg)}
.wg-tabs b{padding:.7em 0;border-radius:2em;text-align:center;font-size:.95em;font-weight:600;color:var(--ink-2)}
.wg-tabs b.on{background:var(--ink);color:#fff}
.wg-row{display:grid;grid-template-columns:1fr auto;align-items:center;gap:.2em 1em;margin-top:.9em;padding:.9em 1em;border-radius:1.1em;background:var(--bg);box-shadow:inset 0 0 0 1px var(--line)}
.wg-row span{grid-column:1/-1;font-size:.78em;color:var(--ink-3)}
.wg-row b{font-size:1.7em;font-weight:600;letter-spacing:-.04em}
.wg-row i{display:flex;align-items:center;gap:.45em;padding:.4em .8em .4em .4em;border-radius:2em;background:#fff;font-style:normal;font-size:.9em;font-weight:700;box-shadow:0 0 0 1px var(--line)}
.wg-row u{width:1.7em;height:1.7em;border-radius:50%;display:grid;place-items:center;background:var(--c);color:#fff;text-decoration:none;font-size:.9em}
.wg-swap{align-self:center;width:2.4em;height:2.4em;margin:-.55em 0 -1.45em;border-radius:50%;display:grid;place-items:center;background:#fff;color:var(--acc);box-shadow:0 0 0 1px var(--line),0 .6em 1em -.5em rgba(18,40,110,.4);z-index:1}
.wg-swap svg{width:1.1em;height:1.1em}
.wg-rate{display:flex;align-items:center;justify-content:space-between;margin-top:.9em;font-size:.84em;color:var(--ink-2)}
.wg-rate b{padding:.4em .75em;border-radius:2em;background:var(--tint);color:var(--acc);font-weight:700}
.wg-btn{margin-top:.9em;height:3em;border-radius:2em;display:grid;place-items:center;background:var(--acc);color:#fff;font-weight:600}
.wg-rev{display:flex;align-items:center;justify-content:space-between;margin-top:auto;padding:.8em 1em;border-radius:1.1em;background:#e3f5ec;color:#15935a;font-size:.86em;font-weight:600}
.wg-rev b{font-size:1.25em;font-weight:700}
/* two ramps on a tilted plane */
@media (prefers-reduced-motion:reduce){.wg-flip{animation:none}}
/* floating-cards collage: wallet in the centre, pay-in / pay-out cards drifting around it (reusable) */
.scard .ph-float{container-type:size;background:radial-gradient(55% 50% at 80% 8%,rgba(79,134,240,.22),transparent 70%),radial-gradient(60% 50% at 8% 95%,rgba(169,196,247,.4),transparent 70%),var(--tint)}
.fc{position:absolute;inset:0;font:500 min(2.75cqw,2.95cqh)/1.25 var(--font);color:var(--ink)}
.fc-c,.fc-toast{position:absolute;animation:fcf 7s ease-in-out infinite alternate;animation-delay:calc(var(--d,0) * -1s)}
.fc-c{background:#fff;border-radius:1.25em;padding:1.05em 1.15em;box-shadow:0 1.6em 2.6em -1.7em rgba(18,40,110,.5),inset 0 0 0 1px rgba(255,255,255,.9)}
.fc-lb{display:block;font-size:.8em;color:var(--ink-3)}
.fc-main{left:45%;top:49%;width:17.4em;margin:-9.2em 0 0 -8.7em;padding:1.35em;border-radius:1.6em;z-index:2;--d:1;box-shadow:0 2.6em 4em -2.2em rgba(18,40,110,.6),inset 0 0 0 1px rgba(255,255,255,.9)}
.fc-top{display:flex;align-items:center;gap:.6em;margin-bottom:1.1em;font-size:.95em}
.fc-top b{font-weight:600;letter-spacing:-.02em}
.fc-lg{width:2em;height:2em;border-radius:.6em;display:grid;place-items:center;background:var(--acc);color:#fff}
.fc-lg svg{width:1.25em;height:1.25em}
.fc-bal{display:block;margin-top:.15em;font-size:2.1em;font-weight:600;letter-spacing:-.045em}
.fc-btns{display:grid;grid-template-columns:1fr 1fr;gap:.6em;margin-top:1em}
.fc-btns span{display:flex;align-items:center;justify-content:center;gap:.45em;height:2.9em;border-radius:2em;font-size:.95em;font-weight:600}
.fc-btns svg{width:1.05em;height:1.05em}
.fc-btns .in{background:var(--acc);color:#fff}
.fc-btns .out{background:var(--ink);color:#fff}
.fc-as{margin-top:1em;display:grid;gap:.45em}
.fc-as span{display:flex;align-items:center;gap:.6em;padding:.5em .7em;border-radius:.8em;background:var(--bg);font-size:.86em;font-weight:600}
.fc-as i{width:1.7em;height:1.7em;border-radius:50%;display:grid;place-items:center;background:var(--c);color:#fff;font:800 .78em/1 var(--font);font-style:normal}
.fc-as b{margin-left:auto;font-weight:600}
.fc-row{display:flex;align-items:center;gap:.8em;z-index:3}
.fc-row b{display:block;font-size:.98em;font-weight:600;letter-spacing:-.02em}
.fc-row div span{display:block;margin-top:.25em;font-size:.88em;font-weight:600}
.fc-ico{flex:none;width:2.6em;height:2.6em;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.2);color:#fff}
.fc-ico.o{background:var(--tint);color:var(--acc)}
.fc-ico svg{width:1.2em;height:1.2em}
.fc-dep{left:-3%;top:8%;width:13.2em;background:linear-gradient(140deg,#4F86F0,#2F63D2);color:#fff;--d:3;box-shadow:0 1.6em 2.6em -1.5em rgba(47,99,210,.75)}
.fc-dep div span{color:#d9e6ff}
.fc-wd{left:-2%;bottom:7%;width:14.6em;--d:5}
.fc-wd div span{color:var(--ink-2)}
.fc-toast{right:5%;top:6%;z-index:3;display:flex;align-items:center;gap:.6em;height:2.9em;padding:0 1.2em 0 .5em;border-radius:1em;background:#1f9d63;color:#fff;font-size:.95em;font-weight:600;white-space:nowrap;box-shadow:0 1.2em 2em -1em rgba(21,147,90,.7);--d:2}
.fc-toast i{width:1.9em;height:1.9em;border-radius:50%;display:grid;place-items:center;background:#fff;color:#1f9d63}
.fc-toast i svg{width:1em;height:1em}
.fc-mk{right:-6%;top:25%;width:12.4em;z-index:3;--d:4}
.fc-v{display:block;margin-top:.2em;font-size:2em;font-weight:600;letter-spacing:-.045em;color:var(--acc)}
.fc-sl{display:block;position:relative;height:.45em;margin-top:.7em;border-radius:1em;background:var(--tint)}
.fc-sl::before{content:"";position:absolute;left:0;top:0;bottom:0;width:38%;border-radius:1em;background:var(--acc)}
.fc-sl i{position:absolute;left:38%;top:50%;width:1.25em;height:1.25em;margin:-.62em 0 0 -.62em;border-radius:50%;background:#fff;box-shadow:0 0 0 .22em var(--acc),0 .3em .6em rgba(18,40,110,.3)}
.fc-note{display:block;margin-top:.8em;font-size:.76em;color:var(--ink-3)}
.fc-earn{right:4%;bottom:8%;width:14em;z-index:3;background:linear-gradient(140deg,#4F86F0,#2F63D2);color:#fff;--d:6;box-shadow:0 1.6em 2.6em -1.5em rgba(47,99,210,.75)}
.fc-earn .fc-lb{color:#d9e6ff}
.fc-earn b{display:block;margin-top:.25em;font-size:1.8em;font-weight:600;letter-spacing:-.04em}
@keyframes fcf{from{transform:translateY(-.35em)}to{transform:translateY(.45em)}}
@media (prefers-reduced-motion:reduce){.fc-c,.fc-toast{animation:none}}
/* AML check walkthrough: address -> check -> result; the price and the revenue of the business float beside the wallet */
.ac{--T:11s}
.ac-main{left:50%;top:53%;width:22.4em;height:24.4em;margin:-12.2em 0 0 -11.2em;padding:1.35em;border-radius:1.6em;z-index:2;--d:1;display:flex;flex-direction:column;box-shadow:0 2.6em 4em -2.2em rgba(18,40,110,.6),inset 0 0 0 1px rgba(255,255,255,.9)}
.ac-main .fc-top{margin-bottom:.95em}
.ac-main .fc-top em{margin-left:auto;padding:.4em .75em;border-radius:2em;background:var(--tint);color:var(--acc);font-style:normal;font-size:.78em;font-weight:700;white-space:nowrap}
.ac-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:.35em}
.ac-steps i{position:relative;height:.28em;border-radius:1em;background:var(--tint);overflow:hidden}
.ac-steps i::after{content:"";position:absolute;inset:0;border-radius:1em;background:var(--acc);transform-origin:0 50%}
.ac-stages{position:relative;flex:1;margin-top:1.15em}
.ac-st{position:absolute;inset:0;display:flex;flex-direction:column}
.ac-st.s1,.ac-st.s2{opacity:0}
.ac-mono{font:600 .78em/1 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;white-space:nowrap}
.ac-in{display:flex;align-items:center;height:3.1em;margin-top:.5em;padding:0 .85em;border-radius:.9em;background:var(--bg);box-shadow:inset 0 0 0 1px var(--acc-soft),0 0 0 .25em var(--tint);overflow:hidden}
.ac-type{display:inline-block;width:26ch;overflow:hidden;border-right:.14em solid var(--acc);font-size:1em}
.ac-net{align-self:flex-start;display:flex;align-items:center;gap:.5em;margin-top:.85em;padding:.4em .85em .4em .4em;border-radius:2em;background:var(--bg);box-shadow:inset 0 0 0 1px var(--line);font-size:.86em;font-weight:600}
.ac-net u{width:1.7em;height:1.7em;border-radius:50%;display:grid;place-items:center;background:#f7931a;color:#fff;text-decoration:none;font:800 .78em/1 var(--font)}
.ac-fee{display:flex;align-items:center;justify-content:space-between;margin-top:auto;padding-top:.9em;border-top:1px dashed var(--line);font-size:.88em;color:var(--ink-2)}
.ac-fee b{font-size:1.1em;font-weight:700;color:var(--ink)}
.ac-btn{margin-top:.9em;height:3em;border-radius:2em;display:grid;place-items:center;background:var(--acc);color:#fff;font-weight:600}
.ac-st.s2{align-items:center;justify-content:center;text-align:center}
.ac-ring{position:relative;width:5.4em;height:5.4em}
.ac-ring svg{display:block;width:100%;height:100%;transform:rotate(-90deg)}
.ac-ring circle{fill:none;stroke-width:6}
.ac-ring .t{stroke:var(--tint)}
.ac-ring .p{stroke:var(--acc);stroke-linecap:round;stroke-dasharray:100 100;stroke-dashoffset:0}
.ac-ring svg.ic{position:absolute;inset:0;margin:auto;width:2.3em;height:2.3em;transform:none;color:var(--acc)}
.ac-t{margin-top:.85em;font-size:1.05em;font-weight:600;letter-spacing:-.02em}
.ac-addr{position:relative;align-self:center;overflow:hidden;margin-top:.7em;padding:.7em .95em;border-radius:.7em;background:var(--bg);box-shadow:inset 0 0 0 1px var(--line)}
.ac-addr i{position:absolute;top:0;bottom:0;left:0;width:.3em;border-radius:1em;background:var(--acc-soft);box-shadow:0 0 .8em .25em rgba(79,134,240,.45)}
.ac-rows{display:grid;gap:.5em;width:100%;margin-top:1.05em}
.ac-rows span{display:flex;align-items:center;justify-content:space-between}
.ac-rows u{flex:0 0 var(--w,80%);height:.55em;border-radius:1em;background:var(--tint)}
.ac-rows i{width:1.2em;height:1.2em;border-radius:50%;display:grid;place-items:center;background:#1f9d63;color:#fff}
.ac-rows svg{width:.7em;height:.7em}
.ac-st.s3{align-items:center;text-align:center}
.ac-res{display:flex;flex-direction:column;align-items:center;gap:.65em;margin-top:.3em}
.ac-ok{flex:none;width:3.6em;height:3.6em;border-radius:50%;display:grid;place-items:center;background:#e3f5ec;color:#15935a}
.ac-ok svg{width:1.7em;height:1.7em}
.ac-res b{display:block;margin-top:.15em;font-size:1.65em;font-weight:600;letter-spacing:-.04em;color:#15935a;white-space:nowrap}
.ac-st.s3 .ac-addr{align-self:center;margin-top:.75em}
.ac-scale{position:relative;align-self:stretch;height:.55em;margin-top:auto;border-radius:1em;background:linear-gradient(90deg,#1f9d63,#f5c542 55%,#e5484d)}
.ac-scale i{position:absolute;left:10%;top:50%;width:1.15em;height:1.15em;margin:-.575em 0 0 -.575em;border-radius:50%;background:#fff;box-shadow:0 0 0 .22em #1f9d63,0 .3em .6em rgba(18,40,110,.3)}
.ac-sl{display:flex;align-self:stretch;justify-content:space-between;margin-top:.7em;font-size:.8em;font-weight:600;color:var(--ink-3)}
.ac-acts{display:flex;justify-content:center;gap:.5em;margin-top:auto}
.ac-acts span{display:grid;place-items:center;height:2.5em;padding:0 1em;border-radius:2em;background:var(--bg);box-shadow:inset 0 0 0 1px var(--line);font-size:.84em;font-weight:600;color:var(--ink-2);white-space:nowrap}
/* small notifications above the wallet: the price while the address is entered, the revenue after the result */
.ac-note{position:absolute;left:50%;top:calc(53% - 15.3em);transform:translateX(-50%);z-index:3;display:flex;align-items:center;gap:.7em;padding:.6em 1.2em .6em .6em;border-radius:1.15em;background:rgba(255,255,255,.94);backdrop-filter:blur(.7em);-webkit-backdrop-filter:blur(.7em);box-shadow:0 0 0 1px #e2e9f5,0 1em 1.8em -1em rgba(18,40,110,.4);font-size:.98em;color:var(--ink-2);white-space:nowrap}
.ac-note i{flex:none;width:2.3em;height:2.3em;border-radius:50%;display:grid;place-items:center;background:var(--tint);color:var(--acc)}
.ac-note i svg{width:1.1em;height:1.1em}
.ac-note span{display:block;font-weight:500}
.ac-note b{margin-left:.35em;font-weight:700;color:var(--ink)}
.ac-note small{display:block;margin-top:.15em;font-size:.82em;color:var(--ink-3)}
.ac-note.n1{opacity:0}
.ac-note.n2 i{background:#e3f5ec;color:#15935a}
.ac-note.n2 b{color:#15935a}
/* the walkthrough plays once each time the card comes into view and stops on the result (class "play" is set by script);
   without script or with reduced motion the result screen is shown as is */
@media (prefers-reduced-motion:no-preference){
.ac.play .ac-st.s1{animation:acS1 var(--T) 1 both}
.ac.play .ac-st.s2{animation:acS2 var(--T) 1 both}
.ac.play .ac-st.s3{animation:acS3 var(--T) 1 both}
.ac.play .ac-type{animation:acType var(--T) steps(26,end) 1 both,acCaret .7s steps(1) infinite}
.ac.play .ac-net{animation:acNet var(--T) 1 both}
.ac.play .ac-btn{animation:acBtn var(--T) 1 both}
.ac.play .ac-steps i:nth-child(2)::after{animation:acP2 var(--T) 1 both}
.ac.play .ac-steps i:nth-child(3)::after{animation:acP3 var(--T) 1 both}
.ac.play .ac-ring .p{animation:acRing var(--T) linear 1 both}
.ac.play .ac-st.s2 .ac-addr i{animation:acScan 1.1s ease-in-out infinite alternate}
.ac.play .ac-rows span:nth-child(1) i{animation:acT1 var(--T) 1 both}
.ac.play .ac-rows span:nth-child(2) i{animation:acT2 var(--T) 1 both}
.ac.play .ac-rows span:nth-child(3) i{animation:acT3 var(--T) 1 both}
.ac.play .ac-res{animation:acPop var(--T) 1 both}
.ac.play .ac-ok{animation:acPulse var(--T) 1 both}
.ac.play .ac-scale i{animation:acMark var(--T) 1 both}
.ac.play .ac-main{animation:fcf 7s ease-in-out infinite alternate,acBlur var(--T) 1 both;animation-delay:calc(var(--d,0) * -1s),0s}
.ac.play .ac-note.n1{animation:acN1 var(--T) 1 both}
.ac.play .ac-note.n2{animation:acN2 var(--T) 1 both}
/* exit before the next round: the result and its notification fade away, the step bar runs back */
.ac.play.out .ac-st.s3{animation:acOut .7s ease both}
.ac.play.out .ac-note.n2{animation:acNOut .6s ease both}
.ac.play.out .ac-steps i:nth-child(2)::after,.ac.play.out .ac-steps i:nth-child(3)::after{animation:acPOut .7s ease both}
}
@keyframes acS1{0%{opacity:0;transform:translateY(.6em)}5%,38%{opacity:1;transform:none}41%,100%{opacity:0;transform:translateY(-.6em)}}
@keyframes acOut{from{opacity:1;transform:none}to{opacity:0;transform:translateY(-.6em)}}
@keyframes acNOut{from{opacity:1;transform:translate(-50%,0)}to{opacity:0;transform:translate(-50%,-1em) scale(.94)}}
@keyframes acPOut{from{transform:scaleX(1)}to{transform:scaleX(0)}}
@keyframes acS2{0%,41%{opacity:0;transform:translateY(.6em)}44%,66%{opacity:1;transform:none}69%,100%{opacity:0;transform:translateY(-.6em)}}
@keyframes acS3{0%,69%{opacity:0;transform:translateY(.6em)}73%,100%{opacity:1;transform:none}}
@keyframes acType{0%,6%{width:0}25%,100%{width:26ch}}
@keyframes acCaret{50%{border-right-color:transparent}}
@keyframes acNet{0%,26%{opacity:0;transform:scale(.8)}29%,100%{opacity:1;transform:none}}
@keyframes acBtn{0%,33%{transform:none;filter:none}35.5%{transform:scale(.95);filter:brightness(.9)}38%,100%{transform:none;filter:none}}
@keyframes acP2{0%,41%{transform:scaleX(0)}44%,100%{transform:scaleX(1)}}
@keyframes acP3{0%,69%{transform:scaleX(0)}73%,100%{transform:scaleX(1)}}
@keyframes acRing{0%,43%{stroke-dashoffset:100}64%,100%{stroke-dashoffset:0}}
@keyframes acScan{from{left:0}to{left:calc(100% - .3em)}}
@keyframes acT1{0%,49%{transform:scale(0)}51%,100%{transform:scale(1)}}
@keyframes acT2{0%,55%{transform:scale(0)}57%,100%{transform:scale(1)}}
@keyframes acT3{0%,61%{transform:scale(0)}63%,100%{transform:scale(1)}}
@keyframes acPop{0%,70%{transform:scale(.86)}75%,100%{transform:none}}
@keyframes acPulse{0%,72%{box-shadow:0 0 0 0 rgba(31,157,99,.45)}84%,100%{box-shadow:0 0 0 1.1em rgba(31,157,99,0)}}
@keyframes acMark{0%,73%{left:0%}81%,100%{left:10%}}
@keyframes acN1{0%,7%{opacity:0;transform:translate(-50%,-1em) scale(.94)}10%,35%{opacity:1;transform:translate(-50%,0)}38%,100%{opacity:0;transform:translate(-50%,-1em) scale(.94)}}
@keyframes acN2{0%,88%{opacity:0;transform:translate(-50%,-1em) scale(.94)}92%,100%{opacity:1;transform:translate(-50%,0)}}
@keyframes acBlur{0%,7%{filter:none}10%,14%{filter:blur(.22em)}18%,100%{filter:none}}
/* explainer flow: dashboard-style blocks, connectors and a looping walkthrough (reusable) */
.scard .ph-flow{container-type:size;background:radial-gradient(60% 50% at 85% 0%,rgba(79,134,240,.2),transparent 70%),radial-gradient(55% 45% at 0% 100%,rgba(169,196,247,.35),transparent 70%),var(--tint)}
/* mirrored tilt + merge layout (pay-in / pay-out process) */
.scard .ph img{width:100%;height:100%;object-fit:cover;transform:scale(1.06);transition:transform 1.2s var(--ease)}
.scard:hover .ph img{transform:scale(1.1)}
/* ================= COST SAVINGS ================= */
.cost-card{margin-top:16px;background:var(--white);border-radius:var(--r-xl);padding:44px}
/* brand icon set: simple geometry in a thin blue-grey line with solid brand-blue accents, rounded corners and caps, no tile */
.bico{--ico-line:#91A5CA;--ico-acc:var(--acc);--ico-fill:#fff;--ico-w:1.8;flex:none;width:48px;height:48px;display:grid;place-items:center}
.bico.sm{width:40px;height:40px}
.bico svg{width:100%;height:100%;overflow:visible}
.bico .i1{fill:none;stroke:var(--ico-line);stroke-width:var(--ico-w);stroke-linecap:round;stroke-linejoin:round}
.bico .i2{fill:var(--ico-acc);stroke:none}
.bico .i3{fill:var(--ico-fill);stroke:var(--ico-line);stroke-width:var(--ico-w)}
.bico.sm .i1,.bico.sm .i3{stroke-width:calc(var(--ico-w) + .25)}
/* cost cards: the same 40px icons as in the other cards, on every screen (were 48px) */
.cduo .bico{width:40px;height:40px}
.cduo .bico .i1,.cduo .bico .i3{stroke-width:calc(var(--ico-w) + .25)}
.bico .i4{fill:none;stroke:var(--ico-fill);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.cost-h{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
/* scheme 2: money as a ribbon. It thins out after a third party, grows through your own wallet */
.sk2{display:grid;gap:16px;margin-top:32px}
.sk{border-radius:var(--r-lg);padding:clamp(20px,2.4vw,30px) clamp(20px,2.4vw,32px) clamp(18px,2vw,26px);background:var(--cream)}
.sk.good{background:var(--tint)}
.sk.bad .micro{color:#b04444}
.sk.good .micro{color:var(--acc)}
.sk.good .cmp-h i{background:var(--acc)}
.sk{position:relative}
.sk-d{position:relative;height:214px;margin-top:18px}
.sk-d > svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.sk-d .rb,.sk-d .lk{fill:none;stroke-linecap:butt;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1s var(--io)}
.sk-d .rb.s1{stroke-linecap:round}
.sk-d .rb.s2{transition-delay:.7s}
.sk-d .lk{transition-delay:.8s}
.sk.in .rb,.sk.in .lk{stroke-dashoffset:0}
.sk-d .ah{opacity:0;transition:opacity .4s 1.7s}
.sk.in .ah{opacity:1}
/* moving light dashes = money in motion */
.sk-d .fl{fill:none;stroke:rgba(255,255,255,.32);stroke-dasharray:2 30;stroke-linecap:butt;opacity:0;transition:opacity .5s 1.6s;animation:skfl 1.4s linear infinite}
.sk.in .fl{opacity:1}
@keyframes skfl{to{stroke-dashoffset:-32}}
.sk-node{position:absolute;top:55px;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;z-index:1;opacity:0;transition:opacity .5s var(--ease)}
.sk.in .sk-node{opacity:1}
.sk-node.mid{transition-delay:.55s}
.sk-node.end{transition-delay:1.2s}
.sk-node i{width:64px;height:64px;border-radius:50%;display:grid;place-items:center;background:#fff;color:var(--ink);box-shadow:0 14px 28px -16px rgba(29,36,51,.5)}
.sk-node svg{width:28px;height:28px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.sk-node span{position:absolute;top:calc(100% + 10px);font:600 var(--fs-ui,16px)/1.2 var(--font);letter-spacing:-.02em;white-space:nowrap}
.sk.bad .sk-node.mid i{color:#b04444;box-shadow:inset 0 0 0 2px #e9a3a3,0 14px 28px -16px rgba(29,36,51,.5)}
.sk.good .sk-node.mid i{width:76px;height:76px;background:var(--acc);color:#fff;box-shadow:0 0 0 8px rgba(47,99,210,.16),0 18px 30px -14px rgba(47,99,210,.8)}
.sk.good .sk-node.mid svg{width:32px;height:32px}
.sk.good .sk-node.end i{color:var(--acc);box-shadow:inset 0 0 0 2px var(--acc-light),0 14px 28px -16px rgba(47,99,210,.6)}
.sk.bad .sk-node.end i{color:var(--ink-3)}
.sk-tags{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-top:14px}
/* wide layout: tags sit right at the end of their branch */
.sk-tags.abs{position:absolute;margin:0;flex-direction:column;gap:6px;flex-wrap:nowrap;transform:translateY(-50%)}
.sk-tags.abs.r{align-items:flex-start}
.sk-tags.abs.l{align-items:flex-end;transform:translate(-100%,-50%)}
.sk-tags span{display:inline-flex;align-items:center;gap:8px;height:34px;padding:0 14px 0 6px;border-radius:40px;font:600 14px/1 var(--font);white-space:nowrap;opacity:0;transform:translateY(-6px);transition:opacity .5s var(--ease) 1.4s,transform .6s var(--ease) 1.4s}
.sk.in .sk-tags span{opacity:1;transform:none}
.sk-tags svg{width:22px;height:22px;padding:5px;border-radius:50%;color:#fff}
.sk.bad .sk-tags span{background:#fbe7e7;color:#b04444}
.sk.bad .sk-tags svg{background:#d98c8c}
.sk.good .sk-tags span{background:#fff;color:var(--acc)}
.sk.good .sk-tags svg{background:var(--acc)}
@media (max-width:860px){
  .sk{padding:18px 14px}
  .sk-d{height:178px}
  .sk-node i{width:48px;height:48px}.sk-node svg{width:22px;height:22px}
  .sk.good .sk-node.mid i{width:56px;height:56px}.sk.good .sk-node.mid svg{width:24px;height:24px}
  .sk-node span{font-size:12.5px;white-space:normal;width:86px;text-align:center}
  .sk-node:not(.mid):not(.end) span{left:-6px;text-align:left}
  .sk-node.end span{right:-6px;text-align:right}
  .sk-tags span{font-size:12.5px;height:30px;padding-right:11px}
}
@media (prefers-reduced-motion:reduce){.sk-d .fl{animation:none}}
/* side-by-side comparison: money path with a third party vs with your own wallet */
.cmp-h{display:flex;align-items:center;gap:12px}
/* vertical layout of the infographic (class "v" is set by the script on phones): labels to the right of the nodes, tags placed by the script */
.sk-d.v .sk-node:not(.zz):not(.yy) span{left:calc(100% + 12px);right:auto;top:50%;transform:translateY(-50%);width:auto;white-space:nowrap;text-align:left;font-size:14px}
.sk-tags.abs.v{transform:none;align-items:flex-start}
/* vertical layout: the round nodes are clearly wider than the widest ribbon (46px), so it never shows beside them */
.sk-d.v .sk-node i{width:56px;height:56px}
.sk.good .sk-d.v .sk-node.mid i{width:64px;height:64px}
.cmp-h i{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:#e9a3a3;color:#fff}
.cmp-h i svg{width:15px;height:15px}
/* the money flow: full width all the way with your wallet, thinned out after the third party */
.cost-duo{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:64px}
.cduo{border-radius:var(--r-xl);padding:36px;min-height:260px;display:flex;flex-direction:column;background:var(--white)}
.cduo-top{display:flex;align-items:flex-start;justify-content:space-between}
.cduo.a{background:var(--acc-soft);color:#fff}
.cduo.a .muted{color:rgba(255,255,255,.82)}
.cduo.b{background:var(--white)}
.cduo .n{font:600 14px/1 var(--font);opacity:.7}
.cduo h3{margin-top:auto;padding-top:30px}
.cduo p{margin-top:12px;max-width:46ch}
/* ================= GROWTH ================= */
.gro-head h2{max-width:20ch}
.gro-head p{margin-top:24px;max-width:56ch}
.dash{position:absolute;right:28px;top:28px;width:min(520px,44%);border-radius:var(--r-lg);padding:22px;background:var(--glass);backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);box-shadow:inset 0 0 0 1px var(--glass-bd)}
.dash .hd{display:flex;justify-content:space-between;align-items:center;gap:10px}
.dash .kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:16px}
.dash .kpi{background:rgba(255,255,255,.75);border-radius:14px;padding:12px 14px}
.dash .kpi .v{font-weight:400;font-size:22px;letter-spacing:-.04em;margin:6px 0 4px}
.dash .chart{margin-top:12px;background:rgba(255,255,255,.75);border-radius:14px;padding:10px}
.dash .chart svg{width:100%;height:110px;display:block}
.dash .chart path.l{stroke-dasharray:900;stroke-dashoffset:900;transition:stroke-dashoffset 2.2s var(--io)}
.dash.in .chart path.l{stroke-dashoffset:0}
.dash .lists{display:grid;grid-template-columns:1.6fr 1fr;gap:10px;margin-top:10px}
.dash .lst{background:rgba(255,255,255,.75);border-radius:14px;padding:12px 14px;font:500 12px/1.4 var(--font)}
.dash .lst div{display:flex;justify-content:space-between;padding:5px 0;border-top:1px solid rgba(29,36,51,.06)}
.dash .lst div:first-of-type{border-top:0}
/* growth bento: four points in a column on the left, the customer-intelligence dashboard on the right */
.gro-bento{display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1fr);gap:16px;margin-top:64px}
.gro-list{display:flex;flex-direction:column;gap:12px}
.gro-item{flex:1 1 auto;display:grid;grid-template-columns:48px minmax(0,1fr);gap:18px;align-items:start;padding:26px 28px;border-radius:var(--r-lg);background:#E4EBF6;transition:transform .5s var(--spring),box-shadow .4s}
.gro-item .muted{color:var(--ink-2)}
.gro-item:hover{transform:translateY(-4px);box-shadow:0 30px 60px -44px rgba(29,60,120,.4)}
.gro-item h4{font:600 var(--fs-title,20px)/1.3 var(--font);letter-spacing:-.03em}
.gro-item p{margin-top:8px}
.gro-dash{display:flex;border-radius:var(--r-xl);padding:clamp(20px,2.2vw,30px);background:var(--white);box-shadow:0 40px 80px -60px rgba(29,60,120,.45)}
.gro-dash .dash{position:static;flex:1;display:flex;flex-direction:column;width:auto;padding:0;border-radius:0;background:none;backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:none}
.gro-dash .dash .hd b{font-size:clamp(17px,1.4vw,20px)!important;letter-spacing:-.03em}
.gd-sel{height:36px;padding:0 14px;background:var(--bg);box-shadow:inset 0 0 0 1px var(--line);font-size:var(--fs-mock)}
.gro-dash .dash .kpis{gap:12px;margin-top:20px}
.gro-dash .dash .kpi,.gro-dash .dash .chart,.gro-dash .dash .lst{background:var(--bg);box-shadow:inset 0 0 0 1px var(--line);border-radius:var(--r-md)}
.gro-dash .dash .kpi{padding:16px 18px}
.gro-dash .dash .kpi .v{font-weight:600;font-size:clamp(22px,2vw,28px);margin:8px 0 6px}
.gro-dash .dash .chart{flex:1;display:flex;margin-top:12px;padding:16px;min-height:170px;max-height:340px}
.gro-dash .dash .lists{margin-top:auto;padding-top:12px}
.gro-dash .dash .chart svg{height:auto;flex:1}
.gro-dash .dash .lists{gap:12px}
.gro-dash .dash .lst{padding:16px 18px}
.gro-dash .dash .lst div{padding:7px 0}
/* customer-intelligence mock, aligned with the BackOffice dashboard look */
.gd .hd{align-items:flex-start}
.gd .hd b{display:block}
.gd-sub{display:block;margin-top:3px;font:500 13px/1.3 var(--font);color:var(--ink-3)}
.gd-sel svg{width:11px;height:11px}
.gd-lb{display:flex;align-items:center;gap:8px;font:500 var(--fs-mock,13px)/1.3 var(--font);color:var(--ink-2)}
.gd-lb i{width:8px;height:8px;border-radius:50%;background:var(--c)}
.gd .kpi .v{font-variant-numeric:tabular-nums}
.gd-kf{display:flex;align-items:center;justify-content:space-between;gap:8px}
.gd-kf .up{white-space:nowrap}
.gd-sp{flex:0 1 64px;min-width:0;height:22px}
.gd-sp path{fill:none;stroke:var(--acc-soft);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.gro-dash .dash .gd-chart{flex-direction:column;gap:10px}
.gd-ch{display:flex;align-items:center;justify-content:space-between;gap:12px}
.gd-ch b{font:600 15px/1.3 var(--font);letter-spacing:-.02em}
.gd-lg{display:flex;gap:14px;font:500 12px/1 var(--font);color:var(--ink-2)}
.gd-lg span{display:flex;align-items:center;gap:6px}
.gd-lg i{width:10px;height:10px;border-radius:3px;background:var(--acc)}
.gd-lg .u i{background:var(--acc-light)}
.gd-plot{position:relative;flex:1;min-height:130px}
.gro-dash .dash .gd-plot svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.gd-plot .gr{fill:none;stroke:var(--line);stroke-dasharray:3 5;vector-effect:non-scaling-stroke}
.gd-plot .u{fill:none;stroke:var(--acc-light);stroke-width:2;stroke-dasharray:5 5;vector-effect:non-scaling-stroke}
.gd-plot .l{fill:none;stroke:var(--acc);stroke-width:2.4;stroke-linecap:round;vector-effect:non-scaling-stroke}
.gd-pt{position:absolute;left:90%;top:21.2%;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;background:#fff;box-shadow:0 0 0 3px var(--acc),0 0 0 8px rgba(47,99,210,.16);opacity:0;transition:opacity .4s 2s}
.gd-tip{position:absolute;left:90%;top:21.2%;transform:translate(calc(-100% - 16px),-50%);padding:7px 11px;border-radius:11px;background:var(--ink);color:rgba(255,255,255,.65);font:500 11px/1.3 var(--font);white-space:nowrap;text-align:center;opacity:0;transition:opacity .4s 2.1s}
.gd-tip b{display:block;color:#fff;font-size:13px;font-weight:600}
.dash.in .gd-pt,.dash.in .gd-tip{opacity:1}
.gd-x{display:flex;justify-content:space-between;font:500 11px/1 var(--font);color:var(--ink-3)}
.gd .lists{grid-template-columns:1.2fr 1fr}
.gd-t{display:block;font:600 15px/1.3 var(--font);letter-spacing:-.02em}
.gro-dash .dash .lst.gd-act .gd-r{display:flex;align-items:center;gap:10px;padding:8px 0}
.gd-act .gd-r:first-of-type{border-top:0}
.gd-r i{flex:none;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:var(--c);color:#fff;font:800 11px/1 var(--font);font-style:normal}
.gd-r span{flex:1;min-width:0;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gd-r small{display:block;margin-top:1px;font-size:11px;font-weight:500;color:var(--ink-3)}
.gd-r b{white-space:nowrap}
.gd-seg{display:flex;flex-direction:column}
.gro-dash .dash .lst.gd-seg .gd-do{flex:1;display:flex;align-items:center;justify-content:center;gap:16px;padding:8px 0 0;border:0}
.gro-dash .dash .lst.gd-seg .gd-ring{position:relative;flex:none;width:clamp(92px,8vw,116px);aspect-ratio:1;padding:0;border:0;display:block}
.gd-ring svg{display:block;width:100%;height:100%;transform:rotate(-90deg)}
.gd-sp,.gd-sel svg{display:block}
.gd-ring circle{fill:none;stroke-width:14}
.gd-ring .bg{stroke:var(--tint)}
.gd-ring .s{stroke-dasharray:0 100;transition:stroke-dasharray 1.1s var(--io)}
.gd-ring .s1{stroke:#2F63D2}
.gd-ring .s2{stroke:#7ea6f3;stroke-dashoffset:-42;transition-delay:.25s}
.gd-ring .s3{stroke:#c8d9fa;stroke-dashoffset:-68;transition-delay:.5s}
.dash.in .gd-ring .s1{stroke-dasharray:40.6 59.4}
.dash.in .gd-ring .s2{stroke-dasharray:24.6 75.4}
.dash.in .gd-ring .s3{stroke-dasharray:30.6 69.4}
.gro-dash .dash .lst.gd-seg .gd-ring > div{position:absolute;inset:0;display:grid;place-content:center;text-align:center;padding:0;border:0}
.gd-ring b{display:block;font:600 clamp(15px,1.4vw,19px)/1 var(--font);letter-spacing:-.04em}
.gd-ring span{font:500 11px/1.3 var(--font);color:var(--ink-3)}
.gd-seg ul{list-style:none;margin:0;padding:0;display:grid;gap:8px;min-width:0}
.gd-seg li{display:flex;align-items:center;gap:8px;font-weight:500;color:var(--ink-2);white-space:nowrap}
.gd-seg li i{flex:none;width:9px;height:9px;border-radius:3px;background:var(--c)}
.gd-seg li b{margin-left:auto;padding-left:10px;color:var(--ink);font-weight:600}
@media (max-width:1180px){.gro-bento{grid-template-columns:minmax(0,1fr)}.gro-list{display:grid;grid-template-columns:1fr 1fr}.gro-dash .dash .chart{min-height:220px}}
.panel .muted{color:rgba(255,255,255,.8)}
.panel .micro{color:#dfe9ff}
.panel .two{color:#fff}
.panel .two .t2{color:#cfe0ff}
/* reeded-glass logo on top of the security panel, fading into the panel gradient */
#security .shead .lead,#security .shead .two{text-shadow:0 2px 24px rgba(18,52,150,.45)}
.panel .glow{position:absolute;border-radius:50%;filter:blur(80px);pointer-events:none}
.panel .g1{width:50vw;height:50vw;left:-15vw;top:-20vw;background:rgba(255,255,255,.22)}
.panel .g2{width:40vw;height:40vw;right:-10vw;bottom:-15vw;background:rgba(169,196,247,.45)}
.sh-side > div{margin-top:24px}
.nc-cards{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:56px;position:relative}
.nccard{border-radius:var(--r-xl);padding:36px;min-height:360px;display:flex;flex-direction:column}
.nccard.w{background:#fff;color:var(--ink)}
.nccard.w .muted{color:var(--ink-2)}
.nccard.w .micro{color:var(--acc)}
.nccard h3{margin-top:28px;font-size:clamp(26px,2.3vw,34px)}
.nccard p{margin-top:14px;margin-bottom:22px}
/* the bottom margin keeps the text off the divider when a card has no spare height */
.nccard .ok{margin-top:auto;padding-top:26px;display:flex;gap:12px;align-items:flex-start;font:600 14px/1.45 var(--font);letter-spacing:-.02em;border-top:1px solid rgba(255,255,255,.25)}
.nccard.w .ok{border-color:var(--line)}
.nccard .ok i{flex:none;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;background:#fff;color:var(--acc-soft)}
.nccard.w .ok i{background:var(--acc-soft);color:#fff}
.nccard .ok svg{width:11px;height:11px}
/* security sub-head mirrors the section head: glass shield on the left, heading + lead on the right.
   Shield is a transparent image: move it with --sx / --sy, resize with --sw, tilt with --sr */
.sec-head{margin-top:96px;position:relative;grid-template-columns:1fr 1.25fr;align-items:center}
.sec-art{--sw:clamp(190px,19vw,296px);--sx:-6%;--sy:0px;--sr:-5deg;display:flex;justify-content:center;pointer-events:none}
.sec-art img{flex:none;width:var(--sw);height:auto;max-width:none;margin:-28px 0 -8px;translate:var(--sx) var(--sy);rotate:var(--sr);opacity:.92;filter:drop-shadow(0 36px 44px rgba(18,52,150,.26))}
.sec-art img[hidden]{display:none}
.sec-art img.metal{opacity:1;filter:drop-shadow(0 34px 40px rgba(10,30,96,.42))}
.sec-art img.round{width:calc(var(--sw) * 1.12);margin:-20px 0 -4px}
.sec-copy .lead{margin-top:24px;max-width:46ch}
@media (prefers-reduced-motion:no-preference){.sec-art img{animation:secFloat 8s ease-in-out infinite alternate}}
@keyframes secFloat{from{transform:translateY(8px)}to{transform:translateY(-10px)}}
/* security features: one white panel divided into cells */
.sec-feats{margin-top:48px;position:relative}
.sgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-radius:var(--r-xl);background:var(--white);color:var(--ink);overflow:hidden;box-shadow:0 40px 80px -50px rgba(18,52,150,.55)}
.sfeat{display:grid;grid-template-columns:minmax(0,1fr);align-content:start;row-gap:24px;padding:30px 32px 32px;box-shadow:1px 0 0 var(--line),0 1px 0 var(--line);transition:background .3s}
.sfeat:hover{background:var(--bg)}
.sfeat h4{font:600 var(--fs-title)/1.3 var(--font);letter-spacing:-.03em}
.sfeat p{margin-top:8px;font:500 16px/1.5 var(--font);letter-spacing:-.01em;color:var(--ink-2)}
/* ================= WHITE LABEL ================= */
.wl{display:grid;grid-template-columns:1.4fr 1fr;gap:16px;margin-top:64px}
.wl-ph{border-radius:var(--r-xl);overflow:hidden;position:relative;min-height:680px;display:flex;align-items:center;justify-content:center;gap:clamp(28px,3.4vw,56px);padding:56px clamp(28px,3vw,48px);background:radial-gradient(60% 70% at 30% 55%,rgba(79,134,240,.32),rgba(79,134,240,0) 70%),radial-gradient(50% 50% at 90% 10%,rgba(255,255,255,.9),rgba(255,255,255,0) 70%),var(--tint)}
.cust{position:relative;flex:0 1 310px;border-radius:var(--r-lg);padding:26px;background:#fff;box-shadow:0 30px 60px -30px rgba(29,73,168,.35),inset 0 0 0 1px rgba(29,36,51,.05)}
.cust .f{margin-top:12px}
.cust .inp{margin-top:6px;height:44px;border-radius:12px;background:var(--bg);box-shadow:inset 0 0 0 1px rgba(29,36,51,.06);display:flex;align-items:center;padding:0 12px;font:600 13px/1 var(--font)}
.cust .sw{display:flex;gap:8px;margin-top:6px}
.cust .sw{gap:10px}
.cust .sw i{width:32px;height:32px;border-radius:50%;cursor:pointer;box-shadow:0 0 0 3px #fff,0 0 0 4px rgba(29,36,51,.1);transition:box-shadow .3s var(--ease),transform .3s var(--ease)}
.cust .sw i:hover{transform:scale(1.08)}
.cust .sw i.on{box-shadow:0 0 0 3px #fff,0 0 0 5px currentColor}
.cust .btn{margin-top:16px}
/* white-label: phone in hand, static glass control panel floating in front of the hand */
.wl-ph .wlh{position:absolute;inset:0;overflow:hidden}
.wlh-bg{position:absolute;max-width:none}
.wl-ph .cust-glass{position:absolute;z-index:2;left:clamp(20px,6%,56px);top:44%;width:clamp(250px,40%,320px);background:rgba(255,255,255,.58);backdrop-filter:blur(18px) saturate(1.3);-webkit-backdrop-filter:blur(18px) saturate(1.3);box-shadow:inset 0 0 0 1px rgba(255,255,255,.85),inset 0 1px 0 rgba(255,255,255,.9),0 40px 70px -30px rgba(18,40,90,.45);transform:translateY(-50%);pointer-events:none}
.cust-glass .inp{background:rgba(255,255,255,.6)}
.cust-glass .sw i{cursor:default}
.cust-glass .sw i.on{box-shadow:0 0 0 3px #fff,0 0 0 5px currentColor}
@keyframes float{from{transform:translateY(0)}to{transform:translateY(-14px)}}
.screen{position:absolute;left:4.85%;top:2.06%;width:90.3%;height:95.9%;overflow:hidden;border-radius:10.5% / 4.85%;background:linear-gradient(180deg,color-mix(in srgb,var(--scr,#2f63d2) 82%,#fff) 0%,var(--scr,#2f63d2) 100%);transition:background .5s var(--ease);color:#fff;container-type:inline-size}
.screen .isl{position:absolute;left:50%;top:1.6%;transform:translateX(-50%);width:34%;height:4.6%;border-radius:99px;background:#000}
.wallet{padding:17cqw 6.5cqw 0;font:500 4cqw/1.3 var(--font)}
.wallet .br{display:flex;align-items:center;gap:2cqw;font-weight:700}
.wallet .br i{width:4cqw;height:4cqw;border:.5cqw solid #fff;border-radius:1cqw;transform:rotate(45deg)}
.wallet .lb{margin-top:8cqw;opacity:.75;font-size:3.6cqw}
.wallet .bal{font-weight:400;font-size:11.5cqw;letter-spacing:-.04em;margin-top:1cqw}
.wallet .ch{font-size:3.6cqw;color:#c9f5dd;margin-top:1cqw}
.wallet .acts{display:flex;justify-content:space-between;margin-top:8cqw}
.wallet .acts div{display:flex;flex-direction:column;align-items:center;gap:2cqw;font-size:3.3cqw}
.wallet .acts span{width:15cqw;height:15cqw;border-radius:50%;background:rgba(255,255,255,.2);display:grid;place-items:center}
.wallet .acts svg{width:5.5cqw;height:5.5cqw}
.wallet .promo{margin-top:7cqw;border-radius:4.5cqw;background:rgba(255,255,255,.14);padding:4cqw 4.8cqw}
.wallet .promo b{display:block;font-size:3.9cqw}
.wallet .promo span{font-size:3.4cqw;opacity:.85}
.wallet .as{margin-top:5cqw}
.wallet .as div{display:flex;align-items:center;gap:3.5cqw;padding:3.6cqw 0;border-top:.3cqw solid rgba(255,255,255,.15)}
.wallet .as b{margin-left:auto}
.wallet .c{width:9cqw;height:9cqw;border-radius:50%;display:grid;place-items:center;font-weight:700;font-size:3.2cqw}
.c.b{background:#f7931a}
.c.e{background:#627eea}
.wl-card{background:var(--cream);border-radius:var(--r-xl);padding:44px;display:flex;flex-direction:column}
.wl-item{padding:26px 0;border-top:1px solid var(--line);display:grid;grid-template-columns:48px 1fr;gap:18px}
.wl-item:first-of-type{margin-top:auto;border-top:0}
.wl-item h4{font:600 18px/1.3 var(--font);letter-spacing:-.03em}
.wl-item p{margin-top:6px}
.wl-card .btn{margin-top:28px;align-self:flex-start}
/* ================= GO LIVE ================= */
.golive h2 .l2{display:block}
.gl-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:16px;margin-top:64px}
.gcard{grid-column:span 2;background:var(--white);border-radius:var(--r-xl);padding:32px;display:flex;flex-direction:column;min-height:0;transition:transform .5s var(--spring),box-shadow .4s}
.gcard:hover{transform:translateY(-6px);box-shadow:0 30px 60px -40px rgba(29,60,120,.35)}
.gcard.w{grid-column:span 3}
.gcard .top{display:flex;justify-content:space-between;align-items:center}
.gcard .big{font-weight:400;font-size:48px;line-height:1;letter-spacing:-.04em;color:var(--acc-soft)}
.gcard h3{margin-top:30px;font:600 20px/1.3 var(--font);letter-spacing:-.03em}
.gcard p{margin-top:12px}
/* ================= TIMELINE (journey: sticky screen + rail) ================= */
.jr{--sh:clamp(400px,62vh,580px);--stH:clamp(260px,42vh,400px);--pad:max(0px,calc((var(--sh) - var(--stH)) / 2));display:grid;grid-template-columns:1.12fr 1fr;gap:clamp(40px,5vw,80px);margin-top:clamp(48px,5vw,72px)}
.jr-left{position:sticky;top:max(96px,calc(50vh - var(--sh) / 2));height:var(--sh);align-self:start}
.jr-screen{position:relative;height:100%;border-radius:var(--r-xl);overflow:hidden;background:linear-gradient(150deg,#2552b5 0%,#2F63D2 45%,#4F86F0 100%);box-shadow:0 40px 80px -44px rgba(18,40,90,.6);isolation:isolate}
.jr-screen::before{content:"";position:absolute;right:-20%;top:-26%;width:70%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.24),transparent 65%);z-index:-1}
.jr-big{position:absolute;left:clamp(20px,2.4vw,32px);top:clamp(10px,1.6vw,20px);font:600 clamp(64px,7vw,112px)/1 var(--font);letter-spacing:-.06em;color:rgba(255,255,255,.16)}
.jr-count{position:absolute;right:clamp(20px,2.2vw,30px);top:clamp(22px,2.4vw,32px);display:flex;gap:6px;z-index:3}
.jr-count i{width:22px;height:4px;border-radius:4px;background:rgba(255,255,255,.3);transition:background .4s,width .4s var(--ease)}
.jr-count i.on{background:#fff;width:34px}
.jr-vis{position:absolute;inset:0;opacity:0;transform:translateY(22px) scale(.98);transition:opacity .6s var(--ease),transform .7s var(--ease);pointer-events:none}
.jr-vis.on{opacity:1;transform:none}
.jr-brief{position:absolute;left:7%;right:7%;top:clamp(84px,18%,120px);bottom:7%;border-radius:22px;background:#fff;padding:clamp(18px,2vw,28px);display:flex;flex-direction:column;gap:clamp(8px,1vw,12px);box-shadow:0 30px 60px -24px rgba(8,24,70,.6)}
.jr-bh{display:flex;align-items:center;gap:12px;margin-bottom:4px;font:600 clamp(16px,1.3vw,19px)/1.2 var(--font);letter-spacing:-.03em;color:var(--ink)}
.jr-bh span{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:var(--acc);color:#fff}
.jr-bh svg{width:22px;height:22px}
.jr-chk{flex:1;max-height:62px;display:flex;align-items:center;gap:12px;padding:0 16px;border-radius:16px;background:var(--bg);font:600 clamp(14px,1.1vw,16px)/1.2 var(--font);color:var(--ink)}
.jr-chk i{width:26px;height:26px;flex:none;border-radius:50%;display:grid;place-items:center;background:#1f9d63;color:#fff}
.jr-chk i svg{width:13px;height:13px}
.jr-chk.todo{color:var(--ink-3)}
.jr-chk.todo i{background:transparent;box-shadow:inset 0 0 0 2px var(--line)}
.jr-steps{position:relative;padding:var(--pad) 0 var(--pad) clamp(36px,3.4vw,52px)}
.jr-rail{position:absolute;left:0;top:var(--pad);bottom:var(--pad);width:4px;border-radius:4px;background:var(--line)}
.jr-rail i{position:absolute;left:0;top:0;width:100%;height:var(--p,0%);border-radius:4px;background:linear-gradient(0deg,var(--acc) 0,var(--acc-soft) 14vh,var(--acc-light) 34vh,var(--tint) 56vh)}
.jr-rail b{position:absolute;left:50%;top:var(--p,0%);width:18px;height:18px;margin:-9px 0 0 -9px;border-radius:50%;background:#fff;box-shadow:0 0 0 5px var(--acc),0 8px 20px -6px rgba(47,99,210,.7)}
.jr-st{min-height:var(--stH);display:flex;flex-direction:column;justify-content:center;opacity:.32;transition:opacity .5s}
.jr-st.on{opacity:1}
.jr-row{display:flex;align-items:center;gap:14px}
.bico.jr-ic{width:clamp(40px,3.4vw,48px);height:clamp(40px,3.4vw,48px)}
.jr-st h4{margin-top:clamp(16px,1.6vw,22px);font:600 clamp(24px,2.2vw,32px)/1.12 var(--font);letter-spacing:-.04em}
.jr-st p{margin-top:12px;max-width:44ch;font-size:var(--fs-body);line-height:1.55;color:var(--ink-2)}
@media (max-width:767px){
  .jr{--sh:clamp(230px,36vh,320px);--stH:clamp(230px,40vh,320px);--pad:0px;grid-template-columns:1fr;gap:0}
  .jr-left{top:92px;z-index:2}
  .jr-steps{margin-top:20px}
  .jr-brief{top:64px}

  .jr-chk{padding:0 12px}.jr-bh span{width:32px;height:32px}
}
/* mockup stage: children scale with the stage size (container query units) */
.jr-ui{position:absolute;left:7%;right:7%;top:clamp(84px,18%,120px);bottom:7%;container-type:size}
/* step 4: API card */
.api{display:grid;place-items:center;font:500 min(2.6cqw,4.2cqh)/1.3 var(--font);color:var(--ink)}
.jr-ui.jr-mid{top:7%}
.jr-ui.jr-mid>.api{font-size:min(2.6cqw,4.2cqh)}
@media (max-width:860px){.jr-ui.jr-mid>.api{font-size:min(3cqw,4.2cqh)}}
.api-c{width:min(100%,27em);margin-bottom:0;display:flex;flex-direction:column;align-items:center;padding:2.2em 2em 1.8em;border-radius:1.8em;background:#fff;box-shadow:0 2.6em 4.4em -2em rgba(8,24,70,.65),inset 0 0 0 1px rgba(255,255,255,.9);text-align:center}
.api-lg{width:4.6em;height:4.6em;border-radius:50%;display:grid;place-items:center;background:var(--tint);box-shadow:inset 0 0 0 .1em rgba(47,99,210,.14)}
.api-lg img{width:62%;height:62%}
.api-t{display:flex;align-items:center;gap:.5em;margin-top:.9em;font-size:1.5em;font-weight:600;letter-spacing:-.035em}
.api-t em{padding:.32em .6em;border-radius:2em;background:var(--tint);color:var(--acc);font:700 .52em/1 var(--font);letter-spacing:0;font-style:normal}
.api-m{margin-top:.35em;font-size:.9em;color:var(--ink-3)}
.api-l{align-self:stretch;margin-top:1.5em;padding-top:1.3em;border-top:1px solid var(--line);font-size:.98em;font-weight:600;color:var(--ink-2)}
.api-btn{position:relative;align-self:stretch;display:flex;align-items:center;justify-content:center;height:3.4em;margin-top:.9em;border-radius:3em;background:var(--acc);color:#fff;font-size:1.02em;font-weight:600;letter-spacing:-.02em;box-shadow:0 1.2em 2em -1em rgba(47,99,210,.9)}
.api-btn i{position:absolute;right:.5em;top:50%;width:2.4em;height:2.4em;margin-top:-1.2em;border-radius:50%;display:grid;place-items:center;background:#fff;color:var(--acc)}
.api-btn i svg{width:1.05em;height:1.05em}
.jr-ui>*{font-size:min(2.35cqw,4.3cqh);height:100%}
/* shared mini wallet screen + devices */
.dev{position:relative;height:100%;aspect-ratio:9/19.2;border-radius:2.6em;background:#0f1729;padding:.55em;box-shadow:0 2.4em 3.6em -1.8em rgba(8,24,70,.75),inset 0 0 0 .14em #3a4458}
.dev::before{content:"";position:absolute;z-index:2;left:50%;top:1.05em;transform:translateX(-50%);width:28%;height:1.35em;border-radius:1em;background:#0f1729}
.dev.and{border-radius:1.9em}
.dev.and::before{width:1.1em;height:1.1em;border-radius:50%}
.wsc{position:relative;height:100%;border-radius:2.1em;overflow:hidden;background:linear-gradient(170deg,#eef3fb,#fff 45%);padding:2.9em .95em .9em;display:flex;flex-direction:column;gap:.55em;font:600 1em/1.2 var(--font);color:var(--ink)}
.dev.and .wsc{border-radius:1.45em}
.w-top{display:flex;align-items:center;gap:.45em;font-size:.95em}
.w-lg{width:1.6em;height:1.6em;border-radius:.5em;display:grid;place-items:center;background:var(--bc,var(--acc));color:#fff;transition:background .5s}
.w-lg svg{width:1em;height:1em}
.w-bal{padding:.85em;border-radius:1em;background:var(--bc,var(--acc));color:#fff;transition:background .5s}
.w-bal span{display:block;font-size:.72em;opacity:.8}
.w-bal b{display:block;margin-top:.2em;font-size:1.45em;letter-spacing:-.04em}
.w-bal em{font-style:normal;font-size:.72em;opacity:.9}
.w-act{display:flex;justify-content:space-between}
.w-act i{width:2.3em;height:2.3em;border-radius:50%;background:color-mix(in srgb,var(--bc,#2F63D2) 16%,#fff);transition:background .5s}
.w-row{display:flex;align-items:center;gap:.5em;padding:.45em .5em;border-radius:.7em;background:#fff;box-shadow:0 0 0 .08em #e6ebf3;font-size:.82em}
.w-row i{width:1.7em;height:1.7em;border-radius:50%;display:grid;place-items:center;background:var(--c);color:#fff;font:800 .8em/1 var(--font);font-style:normal}
.w-row span{flex:1;height:.55em;border-radius:.3em;background:#eef2f8}
.w-toast{position:absolute;left:.8em;right:.8em;bottom:.9em;display:flex;align-items:center;gap:.5em;padding:.6em .7em;border-radius:1em;background:#fff;box-shadow:0 1em 2em -1em rgba(8,24,70,.5);font-size:.85em;animation:wtoast 4s var(--ease) infinite}
.w-toast.t2{animation-delay:-2s}
.w-toast i{width:1.6em;height:1.6em;border-radius:50%;display:grid;place-items:center;background:#1f9d63;color:#fff}
.w-toast i svg{width:.9em;height:.9em}
@keyframes wtoast{0%,12%{opacity:0;transform:translateY(1em)}22%,78%{opacity:1;transform:none}90%,100%{opacity:0;transform:translateY(1em)}}
/* step 2: brand studio */
.bu{display:grid;grid-template-columns:1fr auto;align-items:center;gap:1.4em;padding:1.4em;border-radius:1.6em;background:#fff;box-shadow:0 2.4em 4em -2em rgba(8,24,70,.6);font:600 min(2.35cqw,4.3cqh)/1.2 var(--font);color:var(--ink)}
.bu-side{display:flex;flex-direction:column;justify-content:center;gap:.5em;min-width:0}
.bu-h{display:flex;align-items:center;gap:.6em;margin-bottom:.4em;font-size:1.2em;letter-spacing:-.03em}
.bu-h span{width:2em;height:2em;border-radius:.6em;display:grid;place-items:center;background:var(--acc);color:#fff}
.bu-h svg{width:1.1em;height:1.1em}
.bu-lbl{margin-top:.35em;font-size:.72em;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.bu-sw{display:flex;gap:.55em}
.bu-sw i{width:2.1em;height:2.1em;border-radius:50%;background:var(--c);box-shadow:0 0 0 .2em #fff,0 0 0 .3em transparent;transition:box-shadow .3s,transform .4s var(--spring)}
.bu-sw i.on{box-shadow:0 0 0 .2em #fff,0 0 0 .34em var(--c);transform:scale(1.08)}
.bu-f{display:flex;align-items:center;gap:.6em;height:2.8em;padding:0 .9em;border-radius:2em;background:var(--bg);box-shadow:inset 0 0 0 .08em var(--line);font-size:.95em}
.bu-f em{margin-left:auto;font-style:normal;font-size:.85em;color:var(--acc)}
.bu-f em.ch{color:var(--ink-2)}
.bu-f em svg{width:1em;height:1em}
.bu-lg{width:1.7em;height:1.7em;border-radius:.5em;display:grid;place-items:center;background:var(--bc,var(--acc));color:#fff;transition:background .5s}
.bu-lg svg{width:1.05em;height:1.05em}
.bu-tg{display:flex;padding:.25em;border-radius:2em;background:var(--bg);width:max-content;font-size:.9em}
.bu-tg span{padding:.55em 1.1em;border-radius:2em;color:var(--ink-2)}
.bu-tg span.on{background:var(--ink);color:#fff}
.bu-prev{display:flex;align-items:center}
.bu-prev .dev{height:calc(100cqh - 2.8em)}
/* step 3: iOS vs Android */
.dv2{display:flex;align-items:stretch;justify-content:center;gap:1.4em}
.dv-col{display:flex;flex-direction:column;align-items:center;gap:.8em;height:100%}
.dv-col .dev{height:auto;flex:1;min-height:0}
.os{display:flex;align-items:center;gap:.5em;height:2.6em;padding:0 1.1em 0 .8em;border-radius:2em;background:#fff;color:var(--ink);font:600 1em/1 var(--font);white-space:nowrap;box-shadow:0 1em 2em -1em rgba(8,24,70,.6)}
.os svg{width:1.3em;height:1.3em}
.dv-col:last-child .os svg{color:#3ddc84}
.dv-vs{align-self:center;margin-bottom:3em}
.dv-vs i{width:3em;height:3em;border-radius:50%;display:grid;place-items:center;background:#1f9d63;color:#fff;box-shadow:0 0 0 .5em rgba(255,255,255,.2)}
.dv-vs svg{width:1.4em;height:1.4em}
/* step 5: store listing */
.store{display:flex;flex-direction:column;gap:1em;padding:1.3em 1.3em 0;border-radius:1.6em;background:#fff;box-shadow:0 2.4em 4em -2em rgba(8,24,70,.6);overflow:hidden;font:600 min(2.35cqw,4.3cqh)/1.2 var(--font);color:var(--ink)}
.st-tabs{display:flex;gap:.3em;padding:.25em;border-radius:2em;background:var(--bg);width:max-content;font-size:.9em}
.st-tabs span{display:flex;align-items:center;gap:.4em;padding:.55em 1em;border-radius:2em;color:var(--ink-2);transition:background .4s,color .4s}
.st-tabs svg{width:1.15em;height:1.15em}
.store[data-s="ios"] .st-tabs .ios,.store[data-s="gp"] .st-tabs .gp{background:var(--ink);color:#fff}
.st-head{display:flex;align-items:center;gap:1em}
.st-ic{width:4.6em;height:4.6em;flex:none;border-radius:1.2em;display:grid;place-items:center;background:linear-gradient(150deg,#4F86F0,#2F63D2);color:#fff;box-shadow:0 .8em 1.6em -.8em rgba(47,99,210,.8)}
.store[data-s="gp"] .st-ic{border-radius:1em}
.st-ic svg{width:2.6em;height:2.6em}
.st-t{min-width:0}
.st-t b{display:block;font-size:1.35em;letter-spacing:-.03em}
.st-t span{display:block;margin-top:.2em;font-size:.85em;color:var(--acc)}
.st-t em{display:block;margin-top:.3em;font-style:normal;font-size:.8em;color:var(--ink-3)}
.st-get{margin-left:auto;position:relative;height:2.5em;min-width:5.6em;border-radius:2em;background:var(--acc);color:#fff;font-size:.95em;overflow:hidden}
.store[data-s="gp"] .st-get{border-radius:.6em;background:#01875f}
.st-get i{position:absolute;inset:0;display:grid;place-items:center;font-style:normal;transition:transform .45s var(--ease)}
.st-get .g2{transform:translateY(110%)}
.store[data-s="gp"] .st-get .g1{transform:translateY(-110%)}
.store[data-s="gp"] .st-get .g2{transform:none}
.st-shots{flex:1;min-height:0;margin:0 -1.3em;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)}
.st-track{display:flex;gap:.8em;height:100%;padding:0 1.3em;width:max-content;animation:stmove 22s linear infinite}
.jr-vis:not(.on) .st-track{animation-play-state:paused}
@keyframes stmove{to{transform:translateX(calc(-50% - .4em))}}
.ss{height:100%;aspect-ratio:9/16.5;border-radius:1.1em 1.1em 0 0;background:linear-gradient(170deg,#4F86F0,#2F63D2);padding:.9em .8em 0;display:flex;flex-direction:column;align-items:center;gap:.7em;color:#fff}
.ss:nth-child(5n+2){background:linear-gradient(170deg,#1d2433,#2F63D2)}
.ss:nth-child(5n+4){background:linear-gradient(170deg,#6f9cf5,#4F86F0)}
.ss>b{font-size:.85em;text-align:center;letter-spacing:-.02em}
.ss-ph{flex:1;width:84%;border-radius:1em 1em 0 0;background:#fff;padding:.9em .6em 0;display:flex;flex-direction:column;gap:.45em;box-shadow:0 0 0 .25em rgba(255,255,255,.3)}
.m-bal{padding:.6em;border-radius:.6em;background:var(--acc)}
.m-bal span,.m-bal b{display:block;height:.4em;border-radius:.3em;background:rgba(255,255,255,.55);width:50%}
.m-bal b{margin-top:.35em;height:.7em;width:80%;background:#fff}
.m-act{display:flex;justify-content:space-between}
.m-act i{width:1.4em;height:1.4em;border-radius:50%;background:var(--tint)}
.m-l{height:1.3em;border-radius:.4em;background:#f0f4fa}
.m-sw{display:flex;flex-direction:column;align-items:center;gap:.3em}
.m-sw i{width:100%;height:2.2em;border-radius:.6em;background:#f0f4fa}
.m-sw span{width:1.6em;height:1.6em;border-radius:50%;display:grid;place-items:center;background:var(--acc);color:#fff;font-size:.8em}
.m-btn{margin-top:auto;margin-bottom:.7em;height:1.8em;border-radius:1em;background:var(--acc)}
.m-card{height:4.2em;border-radius:.7em;background:linear-gradient(135deg,#1d2433,#2F63D2);padding:.5em;display:flex;align-items:flex-end}
.m-card span{width:40%;height:.4em;border-radius:.3em;background:rgba(255,255,255,.6)}
.m-ch{display:flex;align-items:flex-end;gap:.25em;height:5em;padding:.4em;border-radius:.6em;background:#f0f4fa}
.m-ch i{flex:1;height:var(--h);border-radius:.2em .2em 0 0;background:var(--acc)}
.m-sh{margin:.3em auto 0;width:3.6em;height:3.6em;border-radius:50%;display:grid;place-items:center;background:var(--tint);color:var(--acc)}
.m-sh svg{width:2em;height:2em}
.m-ok{margin:0 auto;width:1.6em;height:1.6em;border-radius:50%;display:grid;place-items:center;background:#1f9d63;color:#fff}
.m-ok svg{width:.9em;height:.9em}
@media (max-width:860px){.jr-ui{top:64px}}
@media (prefers-reduced-motion:reduce){.w-toast,.st-track{animation:none}}
/* ================= TIMELINE NOTE ================= */
.phases{display:flex;gap:12px;height:440px;margin-top:64px}
.tl-sum{margin-top:48px;display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap}
.tl-t{display:flex;align-items:center;gap:clamp(16px,1.6vw,24px)}
.tl-clock{flex:none;width:clamp(56px,4.6vw,68px);height:clamp(56px,4.6vw,68px);border-radius:50%;background:var(--tint);color:var(--acc);display:grid;place-items:center}
.tl-clock svg{width:62%;height:62%;overflow:visible}
.tl-clock .hm,.tl-clock .hh{transform-origin:12px 12px;transform-box:view-box}
.tl-clock .hm{animation:tlspin 6s linear infinite}
.tl-clock .hh{animation:tlspin 72s linear infinite}
@keyframes tlspin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.tl-clock .hm,.tl-clock .hh{animation:none}}
.tl-sum p b{color:var(--acc);font-weight:600;white-space:nowrap}
.tl-sum p{max-width:36ch;font-weight:500;font-size:clamp(24px,2.4vw,34px);line-height:1.2;letter-spacing:-.035em}
/* ================= FINAL CTA ================= */
.final{position:relative;margin:0 20px;border-radius:var(--r-frame);overflow:hidden;min-height:100vh;display:flex;align-items:center}
.final > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1.1);will-change:transform}
.final .veil{position:absolute;inset:0;background:linear-gradient(90deg,rgba(247,249,252,.7),rgba(247,249,252,.1) 60%);transition:opacity .4s var(--ease)}
.final .veil{opacity:0}
.final .fcopy{background:rgba(255,255,255,.88)}
.final .final-in{position:relative;width:100%}
.final h2{color:#12203d}
/* ---- final CTA: one wide glass card, phone rises out of it ---- */
.final .final-in{display:block;padding:140px 40px 90px}
.fcopy{position:relative;border-radius:var(--r-xl);padding:clamp(32px,3.4vw,52px);background:var(--glass);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);box-shadow:inset 0 0 0 1px var(--glass-bd),0 40px 80px -50px rgba(29,60,120,.35)}
.fcopy .micro{color:var(--acc);display:block}
.fcopy h2{margin-top:18px;font-size:clamp(34px,3.7vw,58px);line-height:1.06}
.fcopy .lead{margin-top:22px;max-width:44ch}
.fcopy .btns{display:flex;gap:10px;flex-wrap:wrap;margin-top:32px}
/* phone */
.fphone{position:absolute;aspect-ratio:784/1600;filter:drop-shadow(0 40px 50px rgba(18,32,61,.3))}
.fphone .fp-in{position:absolute;inset:0;animation:float 7s ease-in-out infinite alternate}
.fphone .fp-in > img{position:absolute;inset:0;width:100%;height:100%}
.c.x{background:#e5352b}
/* metric cards */
.fstat{position:absolute;z-index:2}
.fstat .fs{border-radius:22px;padding:20px 22px;background:#fff;box-shadow:0 30px 60px -28px rgba(29,60,120,.35),inset 0 0 0 1px rgba(29,36,51,.05);animation:float 6s ease-in-out infinite alternate}
.fstat .lbl{display:block;font:500 var(--fs-caption)/1.3 var(--font);color:var(--ink-3)}
.fstat .v{display:block;margin-top:8px;font-weight:600;font-size:clamp(26px,2.3vw,36px);letter-spacing:-.04em;line-height:1}
.fstat .up{display:block;margin-top:8px;font:600 var(--fs-micro)/1 var(--font);color:#1f9d63}
.fstat .bars{display:flex;align-items:flex-end;gap:6px;height:70px;margin-top:16px}
.fstat .bars i{flex:1;height:var(--h);border-radius:6px 6px 3px 3px;background:linear-gradient(180deg,#4f86f0,#2f63d2);transform:scaleY(0);transform-origin:50% 100%;transition:transform 1s var(--ease);transition-delay:calc(.3s + var(--k) * 80ms)}
.fstat.in .bars i{transform:none}
.fstat .spk{display:block;width:100%;height:38px;margin-top:12px}
.fstat .spk .ar{fill:rgba(79,134,240,.14)}
.fstat .spk .ln{fill:none;stroke:#4f86f0;stroke-width:2;vector-effect:non-scaling-stroke;stroke-dasharray:300;stroke-dashoffset:300;transition:stroke-dashoffset 1.6s var(--io) .3s}
.fstat.in .spk .ln{stroke-dashoffset:0}
.fin{max-width:1320px;margin:0 auto;display:grid;grid-template-columns:1fr;padding-top:clamp(80px,12vh,150px)}
.fin .fcopy{display:grid;grid-template-columns:1.15fr 1fr;gap:40px;clip-path:inset(-600px -600px 0 -600px round 0 0 var(--r-xl) var(--r-xl))}
/* the card is clipped along its bottom edge (to cut the phone), which also cut its own shadow.
   The shadow is drawn by a separate layer under the card instead, so it fades out softly below it */
.fin{position:relative}
.fin .fcopy{box-shadow:inset 0 0 0 1px var(--glass-bd)}
.fin::before{content:"";position:absolute;left:0;right:0;bottom:0;top:clamp(80px,12vh,150px);border-radius:var(--r-xl);box-shadow:0 40px 80px -50px rgba(29,60,120,.35);pointer-events:none;opacity:0;transition:opacity .9s var(--ease) .15s}
.fin:has(.fcopy.in)::before{opacity:1}
@supports not selector(:has(*)){.fin::before{opacity:1}}
.fin .fstage{position:relative;min-height:420px}
.fin .fcopy{min-height:calc(clamp(250px,21vw,310px) * 2.041 + 20px);align-items:center}
.fin .fphone{left:50%;bottom:calc(-1 * clamp(32px,3.4vw,52px) - 130px);width:clamp(250px,21vw,310px);transform:translateX(-50%)}
.fin .p1{right:-7%;top:calc(-30% + 40px);width:clamp(220px,18vw,270px)}
.fin .p3{left:-9%;top:calc(44% + 40px);width:clamp(190px,15vw,230px)}
/* floating stat cards over the phone */
.final .fin .p1{right:auto;left:calc(107% - clamp(220px,18vw,270px));top:calc(-27% + 40px + min(6.94vw,100px));width:clamp(188px,15vw,226px)}
.final .fin .p3{left:calc(-9% + clamp(190px,15vw,230px) - clamp(188px,15vw,226px) + min(2.78vw,40px));top:calc(45% + 40px + min(3.47vw,50px));width:clamp(188px,15vw,226px)}
.final .fstat .fs{padding:16px 18px 17px;border-radius:20px}
.final .fstat .lbl{font-size:13px}
.final .fstat .v{margin-top:6px;font-size:clamp(22px,1.95vw,30px)}
.final .fstat .up{margin-top:6px;font-size:12.5px}
.final .fstat .bars{height:46px;gap:5px;margin-top:13px}
.final .fstat .bars i{border-radius:5px 5px 2px 2px}
.final .fstat .spk{height:28px;margin-top:10px}
/* ================= FOOTER ================= */
.endcap{position:relative}
.endcap .final{position:relative}
.endcap .final .final-in{will-change:transform}
.ft{margin:clamp(20px,3vw,40px) 20px 20px}
.ft-card{background:var(--white);border-radius:var(--r-frame);padding:clamp(36px,4.4vw,72px) clamp(28px,4.4vw,72px) clamp(28px,3vw,44px);box-shadow:inset 0 0 0 1px var(--line)}
.ft-top{display:grid;grid-template-columns:minmax(0,6.6fr) minmax(0,1.6fr) minmax(0,1.9fr) minmax(0,3fr);gap:clamp(24px,3vw,48px)}
.ft h3{font:600 19px/1.2 var(--font);letter-spacing:-.03em;color:var(--ink)}
.ft ul{list-style:none;margin:18px 0 0;padding:0}
.ft li + li{margin-top:9px}
.ft li a,.ft-mail{font:500 15px/1.35 var(--font);letter-spacing:-.01em;color:var(--ink-2);transition:color .2s}
.ft li a:hover,.ft-mail:hover{color:var(--acc)}
.ft-feat ul{column-count:2;column-gap:28px}
.ft-feat li{break-inside:avoid}
.ft-brand{display:flex;flex-direction:column;align-items:flex-start;gap:22px}
.ft-logo{display:flex;align-items:center;gap:14px}
.ft-logo img{height:34px;width:auto}
.ft-logo span{white-space:nowrap;padding-left:14px;border-left:1.5px solid var(--line);font:600 13px/1.2 var(--font);letter-spacing:-.01em;color:var(--ink-2)}
.ft-mail{font-weight:600;color:var(--ink)}
.ft-soc{display:flex;gap:8px}
.ft-soc a,.ft-ic{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:var(--tint);color:var(--acc);transition:background .25s,color .25s,transform .25s var(--ease)}
.ft-soc a:hover,.ft-ic:hover{background:var(--acc);color:#fff;transform:translateY(-2px)}
.ft-soc svg,.ft-ic svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.ft-cta{display:flex;align-items:center;gap:8px}
.ft-ic{width:48px;height:48px}
.ft-legal{margin-top:0!important}
.ft-bot{display:grid;grid-template-columns:minmax(0,10.1fr) minmax(0,3fr);gap:clamp(24px,3vw,48px);margin-top:clamp(36px,4vw,56px);padding-top:clamp(24px,2.4vw,32px);border-top:1px solid var(--line)}
.ft-bot p{font:400 13px/1.55 var(--font);color:var(--ink-3)}
.ft-bot p + p{margin-top:10px}
.ft-addr p:first-child{font-weight:600;color:var(--ink-2)}
@media (max-width:1100px){.ft-top{grid-template-columns:1fr 1fr}.ft-feat{grid-column:1 / -1}.ft-brand{grid-column:1 / -1;order:-1}.ft-bot{grid-template-columns:1fr}}
@media (max-width:860px){.ft{margin:16px 10px 10px}.ft-card{border-radius:26px}.ft-feat ul{column-count:1}}
/* tablets (768-1100px): nothing is left hanging in a single column. The brand block uses both columns (logo, mail, socials and contact buttons
   on the left; legal links on the right), the features list stays in two columns, the address stands beside the disclaimer */
@media (min-width:768px) and (max-width:1100px){
  .ft-brand{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:clamp(24px,3vw,48px);row-gap:18px;align-items:start;justify-items:start;
    grid-template-areas:"logo legal" "mail legal" "soc legal" "cta legal"}
  .ft-logo{grid-area:logo}.ft-mail{grid-area:mail}.ft-soc{grid-area:soc}.ft-cta{grid-area:cta}.ft-legal{grid-area:legal}
  .ft-feat ul{column-count:2}
  .ft-top{row-gap:clamp(48px,6vw,60px)} /* twice the usual gap between the brand block, the features and the two link lists */
  .ft-bot{grid-template-columns:minmax(0,1.7fr) minmax(0,1fr)}
}
.ind{display:flex;flex-wrap:wrap;gap:10px;margin-top:56px}
.ind-chip{display:inline-flex;align-items:center;height:54px;padding:0 22px;border-radius:40px;background:var(--white);font:500 clamp(15px,1.2vw,18px)/1 var(--font);letter-spacing:-.03em;box-shadow:inset 0 0 0 1px var(--line);transition:background .35s var(--ease),color .35s,transform .5s var(--spring),box-shadow .35s}
.ind-chip:hover{background:var(--acc-soft);color:#fff;transform:translateY(-4px);box-shadow:0 20px 40px -24px rgba(47,99,210,.55)}
body.modal-open{overflow:hidden}
.cmodal{position:fixed;inset:0;z-index:100;display:grid;place-items:center;padding:16px;background:rgba(18,32,61,.28);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);opacity:0;visibility:hidden;transition:opacity .35s var(--ease),visibility 0s .35s}
.cmodal.is-open{opacity:1;visibility:visible;transition:opacity .35s var(--ease)}
.cdialog{position:relative;width:min(900px,100%);max-height:calc(100vh - 32px);max-height:calc(100dvh - 32px);overflow:auto;background:var(--bg);border-radius:var(--r-xl);padding:clamp(22px,3.4vh,34px) clamp(22px,2.6vw,36px);transform:translateY(30px) scale(.96);transition:transform .55s var(--spring);box-shadow:0 40px 100px -40px rgba(18,32,61,.5)}
.cmodal.is-open .cdialog{transform:none}
.cclose{position:absolute;right:18px;top:18px;width:44px;height:44px;border-radius:50%;border:0;background:var(--white);display:grid;place-items:center;cursor:pointer;transition:transform .4s var(--spring)}
.cclose:hover{transform:rotate(90deg)}
.cclose svg{width:14px;height:14px}
.chead{margin:0 calc(-1 * clamp(22px,2.6vw,36px));padding:0 clamp(22px,2.6vw,36px) clamp(14px,2.2vh,20px);border-bottom:1px solid var(--line)}
.chead h2{margin-top:8px;font-size:clamp(26px,min(2.6vw,4.4vh),38px);line-height:1.08}
.chead p{margin-top:8px;max-width:62ch;font-size:15px;line-height:1.45}
.fgrid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:clamp(10px,1.7vh,16px) 12px;margin-top:clamp(14px,2.2vh,20px)}
.ff{display:flex;flex-direction:column;gap:6px;grid-column:span 2}
/* both "please specify" fields open: share one row so the form still fits a laptop screen */
.fgrid:has(#other-job-title-field:not([hidden])):has(#other-industry-field:not([hidden])) > [id^="other-"]{grid-column:span 3}
.ff.full{grid-column:1/-1}
.ff.sub{margin-top:8px}
.cmodal [hidden]{display:none!important}
.ff label{font:600 13px/1.3 var(--font);letter-spacing:-.01em;color:var(--ink-2)}
.req{color:var(--acc);margin-left:2px}
.ff input,.ff select,.ff textarea{font:500 15px/1.3 var(--font);color:var(--ink);background:var(--white);border:1px solid var(--line);border-radius:12px;height:clamp(42px,5.6vh,48px);padding:0 14px;width:100%;outline:none;transition:border-color .25s,box-shadow .25s}
.ff textarea{height:clamp(64px,9vh,88px);min-height:56px;padding:11px 14px;resize:vertical}
.ff input:focus,.ff select:focus,.ff textarea:focus{border-color:var(--acc-soft);box-shadow:0 0 0 4px var(--tint)}
.cmrow{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.cmrow > div:not(.csel){grid-column:span 2;min-width:0}
/* custom select: native <select> stays underneath for validation and form data */
.csel{position:relative;min-width:0}
.csel .csel-native{position:absolute;inset:0;opacity:0;pointer-events:none}
.csel-btn{display:block;width:100%;height:clamp(42px,5.6vh,48px);padding:0 42px 0 14px;border:1px solid var(--line);border-radius:12px;background:var(--white);font:500 15px/1.3 var(--font);color:var(--ink);text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer;outline:none;transition:border-color .25s,box-shadow .25s}
.csel-btn.ph{color:#8a93a3}
.csel::after{content:"";position:absolute;right:16px;top:50%;width:14px;height:14px;margin-top:-7px;pointer-events:none;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m4 6 4 4 4-4' fill='none' stroke='%235F6878' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;transition:transform .3s var(--ease)}
.csel.open::after{transform:rotate(180deg)}
.csel-btn:focus-visible,.csel.open .csel-btn{border-color:var(--acc-soft);box-shadow:0 0 0 4px var(--tint)}
.csel-pop{position:fixed;z-index:5;margin:0;padding:6px;list-style:none;overflow:auto;overscroll-behavior:contain;background:var(--white);border-radius:14px;box-shadow:0 0 0 1px var(--line),0 28px 60px -24px rgba(18,32,61,.4);opacity:0;transform:translateY(-6px);transition:opacity .18s var(--ease),transform .25s var(--ease);scrollbar-width:thin;scrollbar-color:#cdd6e4 transparent}
.csel-pop.in{opacity:1;transform:none}
.csel-pop li{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 12px;border-radius:9px;font:500 14.5px/1.3 var(--font);letter-spacing:-.01em;color:var(--ink);cursor:pointer}
.csel-pop li.ph{color:#8a93a3}
.csel-pop li.act{background:var(--tint)}
.csel-pop li[aria-selected="true"]{color:var(--acc);font-weight:600}
.csel-pop li svg{flex:none;width:14px;height:14px;opacity:0}
.csel-pop li[aria-selected="true"] svg{opacity:1}
/* WhatsApp: country code and phone number live in one field */
.cmrow .wa{display:flex;align-items:stretch;height:clamp(42px,5.6vh,48px);border:1px solid var(--line);border-radius:12px;background:var(--white);transition:border-color .25s,box-shadow .25s}
.cmrow .wa:focus-within{border-color:var(--acc-soft);box-shadow:0 0 0 4px var(--tint)}
.cmrow .wa .csel{flex:none;display:flex}
.cmrow .wa .csel::before{content:"";position:absolute;right:0;top:9px;bottom:9px;width:1px;background:var(--line)}
.cmrow .wa .csel::after{right:12px}
.cmrow .wa .csel-btn{width:auto;min-width:92px;height:100%;padding:0 36px 0 14px;border:0;border-radius:11px 0 0 11px;background:transparent;box-shadow:none!important;font-weight:600}
.cmrow .wa .csel-btn.ph{font-weight:500}
.cmrow .wa input{flex:1;min-width:0;height:100%;border:0;border-radius:0 11px 11px 0;background:transparent;box-shadow:none!important;padding-left:14px}
.cmrow [hidden]{display:none}
.cact{margin-top:clamp(14px,2.2vh,20px);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;align-items:center}
.cact .btn{justify-self:end}
.agree{position:relative;display:flex;align-items:flex-start;gap:10px;font:500 13px/1.4 var(--font);color:var(--ink-2);cursor:pointer}
.agree input{position:absolute;opacity:0;width:20px;height:20px;margin:0;cursor:pointer}
.agree i{flex:none;width:20px;height:20px;border-radius:6px;background:var(--white);box-shadow:inset 0 0 0 1px #b9c4d6;display:grid;place-items:center;color:#fff;transition:background .2s,box-shadow .2s}
.agree i svg{width:12px;height:12px;opacity:0;transform:scale(.6);transition:opacity .2s,transform .3s var(--spring)}
.agree input:checked + i{background:var(--acc);box-shadow:none}
.agree input:checked + i svg{opacity:1;transform:none}
.agree input:focus-visible + i{box-shadow:inset 0 0 0 1px var(--acc-soft),0 0 0 4px var(--tint)}
.agree a{color:var(--acc);font-weight:600;text-decoration:underline;text-underline-offset:2px}
.agree .req{font-weight:500}
@media (max-width:860px){.ind-chip{height:52px;padding:0 20px}.cdialog{padding:26px 20px}.chead{margin:0 -20px;padding:0 20px 16px}.fgrid,.cmrow,.cact{grid-template-columns:1fr}.fgrid > .ff,.fgrid > [id^="other-"]{grid-column:1/-1!important}.cmrow > div{grid-column:auto}.cact .btn{justify-self:stretch;justify-content:space-between}.ff input,.ff select,.csel-btn{height:48px}.cmrow .wa{height:48px}.cmrow .wa .csel-btn,.cmrow .wa input{height:100%}.ff textarea{height:96px}}
.small{font-size:var(--fs-body);line-height:1.55}
.h-sm,.ecard .h-sm{font-size:var(--fs-cardtitle)}
.h-card{font-size:clamp(30px,3.1vw,45px)}
.btn.sm{font-size:15px}
/* Repeat the shared badge overrides here to keep their original priority over .gd-sel. */
.chip{font-size:var(--fs-chip)}
.chip{height:38px;padding:0 16px}
/* item titles */
.wl-item h4,.gcard h3{font-size:var(--fs-title);line-height:1.3}
/* body copy inside components */
.nccard .ok{font-size:var(--fs-body);line-height:1.55}
.scard .tag{font-size:var(--fs-micro)}
.scard .n,.cduo .n{font-size:var(--fs-caption)}
/* mock UI (dashboards, stat card, customize panel) */
.up{font-size:var(--fs-mock)}
.dash .lst{font-size:var(--fs-mock)}
.dash .kpi .v{font-size:24px}
.cust .inp{font-size:14px}
/* form */
.ff label{font-size:var(--fs-caption)}
.ff input,.ff select,.ff textarea{font-size:var(--fs-ui)}
@media (max-width:860px){:root{--fs-title:20px;--fs-cardtitle:24px}}
/* ================= REVENUE CARDS (pill tag, bigger number, heavier title) ================= */
.stack .scard .tag{display:inline-flex;align-items:center;gap:10px;height:44px;padding:0 18px 0 5px;border-radius:40px;background:var(--tint);color:var(--acc);font:700 14px/1 var(--font);letter-spacing:.06em;text-transform:uppercase}
/* the tag hugs its text: one line, never stretched or squeezed by the row */
.stack .scard .tag{white-space:nowrap;flex:none}
.scard .top{gap:10px}
@media (min-width:768px) and (max-width:1000px){ /* narrow text column: a smaller tag so the longest label still fits beside the number */
  .stack .scard .tag{height:36px;padding:0 14px 0 4px;gap:8px;font-size:11.5px;letter-spacing:.08em}
  .stack .scard .tag .ti{width:28px;height:28px}
  .stack .scard .tag svg{width:15px;height:15px}
}
@media (max-width:372px){.stack .scard .tag{white-space:normal;flex:0 1 auto}}
/* very narrow phones: the longest label may take two lines */
.stack .scard .tag .ti{width:34px;height:34px;border-radius:50%;background:#fff;display:grid;place-items:center;flex:none;box-shadow:0 2px 8px -4px rgba(47,99,210,.35)}
.stack .scard .tag svg{width:17px;height:17px}
.stack .scard .n{font:500 24px/1 var(--font);letter-spacing:-.03em;color:var(--ink)}
.stack .scard h3{font-weight:500;letter-spacing:-.035em;margin-top:32px}
.stack .scard p{font-weight:500}
/* ================= RESPONSIVE ================= */
@media (max-width:1100px){
  .sgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .section.sec-intro{padding-top:clamp(100px,calc(50vh - 135px),420px)}
  .exec-cards{grid-template-columns:1fr 1fr}

}
@media (max-width:860px){
  /* Pill height for the sections below the hero. */
  :root{
    --m-pill:40px;
  }

  .wrap{width:calc(100% - 32px)}
  .section{padding:90px 0}

  .ft-soc a,.ft-ic{width:var(--m-btn);height:var(--m-btn)}
  .bcard.after .mark{height:var(--m-pill);margin:-5px 0 -5px -4px}
  .ind-chip{height:var(--m-pill);padding:0 16px}
  .shead,.wl,.final .final-in{grid-template-columns:1fr}
  /* the two security cards stay in one row from 768px up, one under the other below that */
  .nccard{padding:28px}
  @media (max-width:767px){.nc-cards{grid-template-columns:1fr}}
  /* the two cost cards stay side by side from 768px up, one under the other below that */
  .cduo{padding:28px}
  @media (max-width:767px){.cost-duo{grid-template-columns:1fr}}
  .section.sec-intro{padding-top:clamp(90px,calc(50vh - 174px),300px)}
  .sec-head{margin-top:72px;gap:20px}
  .sec-feats{margin-top:56px} /* tablets: more air under the heading with the shield (was 32px) */
  @media (max-width:767px){.sec-feats{margin-top:32px}}
  /* security list: two columns from 768px up, one column below */
  .sgrid{border-radius:24px}
  @media (max-width:767px){.sgrid{grid-template-columns:minmax(0,1fr)}}
  .sfeat{grid-template-columns:32px minmax(0,1fr);column-gap:16px;align-items:start;padding:20px}
  /* security list: smaller icons than the card standard (was 40px) */
  .sfeat .bico.sm{width:32px;height:32px}
  /* security heading from 768px up: shield on the left, text on the right, as on wide screens */
  .sec-head{grid-template-columns:.62fr 1.38fr;gap:28px}
  .sec-art{--sw:182px;--sx:4%}
  /* below 768px: shield centred above the text */
  @media (max-width:767px){
  .sec-head{grid-template-columns:1fr}
  .sec-art{--sw:144px;--sx:0px;justify-content:center}
  .sec-art img{margin:-10px 0 0}
  }

  .cost-card{padding:24px 16px}

  /* before/after cards: from 768px up they behave as on wide screens (pinned, parting to the left and right);
     below that they come in as a stack and the second card slides down */
  @media (max-width:767px){
  .ba-cards{grid-template-columns:1fr}
  .ba{height:auto}
  .ba-sticky{position:static;height:auto;padding:0 0 90px}
  .ba-intro{height:200vh}
  /* the cards overlap the end of the pinned heading: the stack reaches the middle of the screen as the heading dissolves (--bah: half of the first card, set by the script) */
  .ba{margin-top:calc(-54vh - var(--bah,260px))}
  /* once the stack is in place the second card slides down from behind the first one into its own place; from there both cards scroll as usual */
  .ba-cards .bcard.after{transition:transform 1s var(--ease)}
  .bcard{min-height:0}
  }
  .ba-intro h2 .l2{padding-left:0}
  /* revenue cards from 768px up: text on the left, illustration on the right, stacking as on wide screens (a little lower and tighter than there) */
  .scard{height:min(420px,74vh);top:calc(84px + var(--i) * 14px)} /* as low as the text column allows (was 500px) */
  .scard .txt{padding:26px}
  /* below 768px: one column, the text and its illustration in a single card */
  @media (max-width:767px){
  /* the cards gather into a deck while scrolling, as on wide screens. Each card stops under the header, a little lower than the previous one;
     a card taller than the screen stops only when its bottom edge is in view (--ch: card height, set by the script).
     Plain list without the deck: position:relative;top:0 */
  .scard{position:sticky;top:calc(68px + var(--i) * 6px);top:min(calc(68px + var(--i) * 6px),calc(100svh - var(--ch,600px) - 10px));grid-template-columns:1fr;height:auto}
  /* one card per item: the text and its illustration share a single white card */
  .scard{background:var(--white);box-shadow:0 -14px 30px -24px rgba(29,60,120,.4)}
  .scard .txt{background:none;border-radius:0}
  /* every illustration block has the height of the photo blocks */
  .scard .ph,.scard .ph-flow,.scard .ph-float,.scard .ph-ramp{height:320px}
  /* on shorter screens the illustration gives up some height so that a whole card fits under the header and the deck stays readable
     (--txh: the tallest text block of the six cards, set by the script; all six illustrations stay equal) */
  @supports (height:100svh){.scard .ph,.scard .ph-flow,.scard .ph-float,.scard .ph-ramp{height:clamp(210px,calc(100svh - var(--txh,300px) - 126px),320px)}}
  /* the drawn illustrations use the block a little more fully */
  .scard .ph-ramp .wg{font-size:min(3cqw,3.08cqh)}
  .scard .ph-flow .fc{font-size:min(3cqw,3.1cqh)}

  }
  /* launch steps from 768px up: pinned screen on the left and steps on the right, as on wide screens (a lower screen and a smaller gap) */
  .jr{--sh:clamp(340px,46vh,460px);--stH:clamp(250px,34vh,340px);gap:32px}
  .jr-steps{padding-left:30px}
  @media (max-width:767px){
  /* launch steps on small screens: no pinned screen and no switching. Each step is its text followed by its own illustration. The pinned, scroll-driven version is for wide screens. */
  .jr{display:flex;flex-direction:column;gap:14px}
  .jr-left,.jr-screen,.jr-steps{display:contents}
  .jr-big,.jr-count,.jr-rail,.jr-screen::before{display:none}
  /* the soft highlight of the screen moves into each illustration, where it is clipped by the card */
  .jr-vis::before{content:"";position:absolute;right:-20%;top:-26%;width:70%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.24),transparent 65%);z-index:-1}
  .jr-st{min-height:0;opacity:1;transition:none;margin-top:26px}
  .jr-steps .jr-st:nth-child(2){margin-top:0}
  .jr-vis{position:relative;inset:auto;height:300px;opacity:1;transform:none;transition:none;pointer-events:auto;border-radius:var(--r-lg);overflow:hidden;isolation:isolate;
    background:linear-gradient(150deg,#2552b5 0%,#2F63D2 45%,#4F86F0 100%)}
  .jr-brief,.jr-ui{top:7%}
  .jr-steps .jr-st:nth-child(2){order:1}.jr-screen .jr-vis:nth-child(3){order:2}
  .jr-steps .jr-st:nth-child(3){order:3}.jr-screen .jr-vis:nth-child(4){order:4}
  .jr-steps .jr-st:nth-child(4){order:5}.jr-screen .jr-vis:nth-child(5){order:6}
  .jr-steps .jr-st:nth-child(5){order:7}.jr-screen .jr-vis:nth-child(6){order:8}
  .jr-steps .jr-st:nth-child(6){order:9}.jr-screen .jr-vis:nth-child(7){order:10}
  }

  .gro-bento{grid-template-columns:minmax(0,1fr);margin-top:40px}
  @media (max-width:767px){.gro-list{display:flex}}
  .gro-dash .dash .chart{min-height:150px}
  .gro-item{padding:20px;grid-template-columns:44px minmax(0,1fr);gap:14px}
  .gro-dash{padding:16px;border-radius:24px}
  .gro-dash .dash .kpi{padding:10px}.gro-dash .dash .kpi .v{font-size:17px}
  /* dashboard: the two lists stand side by side from 768px up, one under the other below that */
  @media (max-width:767px){.gro-dash .dash .lists{grid-template-columns:1fr}}
  .gd-sp{display:none}
  .gd-lg{display:none}
  .dash .kpis{gap:6px}
  .dash .kpi{padding:10px}
  .dash .kpi .v{font-size:17px}
  /* a quarter lower than before (was min-height:560px, panel at top:46%, width:60%) */
  .wl-ph{min-height:420px;padding:0}
  .wl-ph .cust-glass{left:14px;top:50%;width:max(60%,212px);padding:18px}
  .cust-glass .f{margin-top:8px}.cust-glass .inp{height:36px}.cust-glass .sw i{width:24px;height:24px}.cust-glass b.small{font-size:16px!important}

  .tl-t{align-items:flex-start}
  .cust:not(.cust-glass){flex:none;width:100%}

  /* go-live cards: two columns from 768px up (the fifth card takes the full width), one column below */
  .gl-grid{grid-template-columns:1fr 1fr}
  .gcard,.gcard.w{grid-column:auto;min-height:0}
  .gl-grid .gcard:last-child:nth-child(odd){grid-column:1 / -1}
  .gcard{padding:28px}
  @media (max-width:767px){.gl-grid{grid-template-columns:1fr}.gl-grid .gcard:last-child:nth-child(odd){grid-column:auto}}
  .phases{flex-direction:column;height:auto}

  .final{margin:0 10px;border-radius:26px}
  .final .final-in{padding:100px 6px 90px}
  .fin .fcopy{grid-template-columns:1fr;min-height:0}
  .fin .fphone{width:230px}
  .fin .p1{right:-2%;top:2%;width:176px}
  .fin{padding-top:0}
  .fin::before{top:0}
  /* the phone sits close to the text; the floating cards hang over the phone */
  .fin .fstage{min-height:380px}
  .fin .p1{top:0}
  .fin .p3{left:-2%;top:46%;width:156px}
  .fstat .fs{padding:14px 16px;border-radius:18px}
  .fstat .v{font-size:24px}
  .fstat .bars{height:44px;gap:4px}

  .final .fin .p1{left:auto;right:-2%;top:calc(4px + 6.94vw);width:154px}
  .final .fin .p3{left:calc(-2% + 2.78vw);top:calc(202px + 3.47vw);width:154px}
  /* tablets: the stage is much wider than the phone, so the floating cards are tied to the phone instead of the stage edges
     (the phone is 230px wide and centred): one overlaps its top right corner, the other its left side */
  @media (min-width:561px){
    .final .fin .p1{left:calc(50% + 48px);right:auto;top:36px}
    .final .fin .p3{left:calc(50% - 220px);top:232px}
  }
  .final .fstat .fs{padding:12px 14px;border-radius:16px}
  .final .fstat .lbl{font-size:12px}
  .final .fstat .v{font-size:21px}
  .final .fstat .bars{height:32px;gap:3px;margin-top:10px}
  .final .fstat .spk{height:24px;margin-top:8px}
}
@media (prefers-reduced-motion:reduce){
  .section.sec-intro{padding:140px 0 0}
  .ba-intro{height:auto;padding:140px 0 80px}.bai-pin{position:static;height:auto}.ba{margin-top:0}.ba-intro p{opacity:1}.ba-intro h2 .w{opacity:1!important}.rv{opacity:1!important;transform:none!important;filter:none!important}
}
/* phones: headings and text one step smaller */
@media (max-width:560px){
  :root{--fs-title:18px;--fs-cardtitle:21px;--fs-caption:13px}
  .h-xl{font-size:calc(clamp(27px,7.8vw,31px) * var(--hk,1));line-height:1.08}

  .h-card{font-size:23px}
  .nccard h3{font-size:22px}
  .fcopy h2{font-size:27px}
  .jr-st h4{font-size:22px}
  .section{padding:72px 0}
}
/* phones: inner paddings and gaps one step tighter, the remaining large text brought in line with the smaller headings */
@media (max-width:560px){
  /* one place to tune card spacing on phones */
  :root{
    --m-pad:20px 18px;
    --m-frame:6px;
    --m-gap:10px;
    --m-head:20px;
    --m-act:20px;
    --m-ico:40px;
  }
  /* card icons: one size and one line weight (the small icons inside the cost diagram keep their own size) */
  .bico:not(.nb){width:var(--m-ico);height:var(--m-ico)}
  .bico:not(.nb) .i1,.bico:not(.nb) .i3{stroke-width:calc(var(--ico-w) + .25)}
  .section{padding:60px 0}
  .panel .wrap{width:calc(100% - 24px)}
  .rev-head p,.ba-intro p{margin-top:24px}
  .exec-cards{grid-template-columns:1fr;margin-top:40px;gap:var(--m-gap)}
  .ecard{padding:var(--m-pad);min-height:0}
  .ecard .h-sm{padding-top:var(--m-head)}
  .ba-sticky{padding-bottom:56px}
  .ba-cards{gap:var(--m-gap)}
  .bcard{padding:var(--m-pad)}
  .bcard h3,.bcard.before h3{margin-top:var(--m-head);font-size:24px;max-width:none}
  .bcard ul{padding-top:22px;gap:11px}
  .bcard li{font-size:15px;gap:12px}
  .bcard li i{width:24px;height:24px}
  .stack{margin-top:44px;gap:var(--m-gap)}
  .scard{padding:var(--m-frame);gap:var(--m-frame)}
  .scard .txt{padding:var(--m-pad)}
  .stack .scard .tag{height:var(--m-label);padding:0 13px 0 4px;gap:8px}
  .stack .scard .tag .ti{width:24px;height:24px}
  .stack .scard .tag svg{width:14px;height:14px}
  .stack .scard .n{font-size:20px}
  .stack .scard h3{margin-top:var(--m-head)}
  .scard p{margin-top:10px}
  .scard .btn{margin-top:var(--m-act)}
  .shead{gap:24px}
  .cost-duo{margin-top:40px;gap:var(--m-gap)}
  .cduo{padding:var(--m-pad);min-height:0}
  .cduo h3{padding-top:var(--m-head)}
  .cost-card{padding:20px 14px}

  .gro-bento{margin-top:28px;gap:var(--m-gap)}
  .gro-list{gap:var(--m-gap)}
  /* icon on top, then the heading and the text, as in the cards under the first screen */
  .gro-item{padding:var(--m-pad);grid-template-columns:minmax(0,1fr);gap:var(--m-head)}
  .gro-dash{padding:12px}
  .nc-cards{margin-top:36px;gap:var(--m-gap)}
  .nccard{padding:var(--m-pad);min-height:0}
  .nccard h3{margin-top:var(--m-head)}
  .nccard p{margin-bottom:0}
  .nccard .ok{margin-top:22px;padding-top:18px}
  .sec-head{margin-top:48px}
  .sfeat{padding:var(--m-pad);grid-template-columns:32px minmax(0,1fr);column-gap:14px}
  .wl{margin-top:40px;gap:var(--m-gap)}
  .wl-card{padding:var(--m-pad)}
  .wl-card .btn{margin-top:var(--m-act)}
  .wl-item{padding:18px 0;grid-template-columns:40px 1fr;gap:14px}
  /* smaller chips on phones */
  .ind{margin-top:36px;gap:8px}
  .ind-chip{height:var(--m-pill);padding:0 14px;font-size:14px}
  .gl-grid{margin-top:40px;gap:var(--m-gap)}
  .gcard{padding:var(--m-pad)}
  .gcard h3{margin-top:var(--m-head)}
  .gcard .big{font-size:40px}
  .jr{margin-top:32px}
  .tl-sum{margin-top:32px;gap:18px}
  .tl-sum p{font-size:20px}
  .final .final-in{padding:64px 6px 56px}
  .fcopy{padding:var(--m-pad)}
  .fin .fcopy{gap:28px}
  .fcopy .btns{margin-top:24px}
  .chead h2{font-size:23px}
  /* every eyebrow label on phones: one size, weight and tracking */
  .stack .scard .tag,.bcard .mark-t{font:600 var(--fs-micro)/1 var(--font);letter-spacing:.12em}
}
/* narrow phones: industry chips one more step smaller so two fit in a line more often */
@media (max-width:372px){
  .ind{gap:6px}
  .ind-chip{padding:0 12px;font-size:13px}
}
/* longer wording: the button of the glass panel keeps its label in one piece */
@media (max-width:1200px){
  html:not([lang="en"]) .cust-glass .btn{font-size:12.5px;letter-spacing:-.02em;padding:0 6px 0 10px;gap:6px}
  html:not([lang="en"]) .cust-glass .btn .dot{width:24px;height:24px}
}
/* final banner: the heading is longer in Russian and Ukrainian, a smaller size keeps it within five lines */
@media (min-width:861px){html:not([lang="en"]) .fcopy h2{font-size:clamp(27px,3.05vw,45px);line-height:1.08}}
@media (min-width:861px) and (max-width:1120px){html:not([lang="en"]) .fcopy h2{font-size:clamp(24px,2.8vw,32px)}}
@media (max-width:560px){html:not([lang="en"]) .fcopy h2{font-size:23px;line-height:1.12}}
@media (max-width:380px){html:not([lang="en"]) .fcopy h2{font-size:21px}}
@media (max-width:359px){html:not([lang="en"]) .fcopy h2{font-size:19px}}
@media (max-width:327px){html:not([lang="en"]) .fcopy h2{font-size:17.5px}}
/* phones, longer wording: a button never grows past its column */
@media (max-width:560px){
  html:not([lang="en"]) .sh-side .btn{font-size:14px;letter-spacing:-.02em;padding-left:16px;gap:8px}
}
@media (max-width:380px){
  html:not([lang="en"]) .dash .kpis{grid-template-columns:repeat(3,minmax(0,1fr))}
  html:not([lang="en"]) .dash .kpi{padding:8px}
  html:not([lang="en"]) .dash .kpi .gd-lb{font-size:11px;letter-spacing:-.02em}
  html:not([lang="en"]) .dash .kpi .v{font-size:14px}
  html:not([lang="en"]) .gro-dash .dash .hd>div{min-width:0}
  html:not([lang="en"]) .gro-dash .dash .hd b{font-size:15px!important}
  html:not([lang="en"]) .gro-dash .dash .gd-sel{padding:0 10px;flex:none}
  html:not([lang="en"]) .gro-dash .dash .lst.gd-seg .gd-do{gap:10px}
  html:not([lang="en"]) .gd-seg li{white-space:normal;line-height:1.2}
  html:not([lang="en"]) .sh-side .btn{font-size:13px;padding-left:14px;gap:6px}
  html:not([lang="en"]) .cust-glass .btn{font-size:11.5px}
}
/* phones: the language button stays in the header in a compact form */
@media (max-width:599px){
  html:not([lang="en"]) .ft-logo{gap:10px}
  html:not([lang="en"]) .ft-logo img{height:30px}
  html:not([lang="en"]) .ft-logo img{flex:none}
  html:not([lang="en"]) .ft-logo span{padding-left:10px;font-size:12px;letter-spacing:-.02em;white-space:normal;min-width:0;overflow-wrap:anywhere}
}
@media (max-width:1200px){
  html:not([lang="en"]) .stack .scard .tag{white-space:normal;flex:0 1 auto;height:auto;min-height:36px;padding-top:5px;padding-bottom:5px;line-height:1.25}
}
@media (max-width:860px){
  html:not([lang="en"]) .dash .kpi .v{white-space:nowrap;font-size:15px}
}