/* Site palette (navy + olive + cream, Inter) with W-mark motion. Load last. */
:root{
  --bg:#080B12; --surface:#12161F; --surface2:#171E27;
  --line:rgba(255,255,255,.08); --line2:rgba(255,255,255,.16);
  --text:#F4F0E6; --muted:#8B94A6;
  --lime:#A3B863; --ink:#151B0C; --limebg:rgba(143,160,80,.16);
  --amber:#E4BA7D; --amberbg:rgba(228,186,125,.12);
  --red:#E0957D; --redbg:rgba(224,149,125,.10);
}
.page{background:radial-gradient(900px 520px at 72% -8%,rgba(143,160,80,.11),transparent 62%),radial-gradient(700px 400px at 0% 0%,rgba(80,110,160,.08),transparent 60%),var(--bg)}
.eyebrow,.lbl{letter-spacing:.14em}
.logo{font-weight:700;font-size:15px;letter-spacing:.03em;gap:12px}
.card{border-radius:20px;background:linear-gradient(180deg,rgba(255,255,255,.025),rgba(255,255,255,0) 40%),var(--surface)}
.btn{border-radius:12px;font-weight:650}
.btn-p{background:var(--lime);color:var(--ink)}
.page a.btn-p{color:var(--ink)}
.btn-p:hover{background:#B3C673}
.nav a.on{box-shadow:inset 0 0 0 1px rgba(163,184,99,.35)}
.navlbl{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);padding:0 14px 10px}
.navnote{margin-top:22px;padding:18px 14px 0;border-top:1px solid var(--line);font-size:13px;color:var(--muted);line-height:1.5}
.navnote b{display:block;color:var(--text);font-size:14px;margin-bottom:6px;font-weight:600}
.nav a{transition:background-color .2s ease,color .2s ease,transform .2s ease}
.nav a:hover{color:var(--text);transform:translateX(3px)}
.ktab.on,.chip.on{border-color:rgba(163,184,99,.45)}
.slot.full{border-color:rgba(163,184,99,.35)}
.arow .btn.bound{border-color:rgba(163,184,99,.45)}
.pm.on{box-shadow:0 14px 34px -16px rgba(163,184,99,.55),0 0 0 1px var(--lime)}
.term.on{box-shadow:0 12px 32px -14px rgba(163,184,99,.5)}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(163,184,99,.45)}50%{box-shadow:0 0 0 10px rgba(163,184,99,0)}}
.keyicon{width:36px;height:36px;border-radius:11px;background:var(--surface2);border:1px solid var(--line);display:grid;place-items:center;color:var(--lime);flex:none}
.keyicon svg{animation:spark 4s ease-in-out infinite}
@keyframes spark{0%,100%{transform:rotate(0) scale(1)}50%{transform:rotate(90deg) scale(1.12)}}
.tariff{display:inline-flex;gap:8px;align-items:center;margin-top:8px;color:var(--muted);font-size:14px}
.tariff b{color:var(--text);font-weight:600}

/* W mark (traced from the approved logo): tile, metal W, draw-in, shine, glow */
.wtile{--s:40px;position:relative;display:inline-block;width:var(--s);height:var(--s);flex:none;border-radius:24%;transition:transform .35s cubic-bezier(.3,1.5,.5,1);animation:wpop .7s cubic-bezier(.3,1.5,.5,1) backwards}
.wtile svg{width:100%;height:100%;display:block;overflow:visible}
.wtile .w-out{fill:none;stroke:#C9DB8A;stroke-width:6;stroke-dasharray:1;stroke-dashoffset:1;filter:drop-shadow(0 0 6px rgba(163,184,99,.9));animation:wdraw .9s .2s cubic-bezier(.6,0,.2,1) forwards,woutfade .5s 1.1s ease forwards}
.wtile .w-fill{opacity:0;animation:wfill .7s .95s ease forwards}
.wtile .w-metal{filter:drop-shadow(0 0 0 rgba(163,184,99,0));animation:wglow 4s 1.8s ease-in-out infinite}
.wtile .w-shine{transform:translateX(0) skewX(-20deg);animation:wsh 7s 1.6s ease-in-out infinite}
.wtile:hover{transform:scale(1.06)}
.wtile:hover .w-metal{animation:wflash .8s ease-out}
.wtile:hover .w-shine{animation:wsh2 .9s ease-out}
@keyframes wpop{from{transform:scale(.6);opacity:0}to{transform:none;opacity:1}}
@keyframes wdraw{to{stroke-dashoffset:0}}
@keyframes woutfade{to{opacity:0}}
@keyframes wfill{to{opacity:1}}
@keyframes wsh{0%{transform:translateX(0) skewX(-20deg)}18%,100%{transform:translateX(640px) skewX(-20deg)}}
@keyframes wsh2{from{transform:translateX(0) skewX(-20deg)}to{transform:translateX(640px) skewX(-20deg)}}
@keyframes wglow{0%,100%{filter:drop-shadow(0 0 0 rgba(163,184,99,0))}50%{filter:drop-shadow(0 0 10px rgba(163,184,99,.55))}}
@media (prefers-reduced-motion:reduce){.wtile .w-out{display:none}.wtile .w-fill{opacity:1}}

/* Logo board */
.stage{position:relative;overflow:hidden;margin-top:24px;min-height:420px;display:grid;place-items:center;padding:56px 32px}
.glowbg{position:absolute;inset:0;background:radial-gradient(520px 260px at 28% 50%,rgba(163,184,99,.16),transparent 70%);animation:glowpulse 5s ease-in-out infinite}
@keyframes glowpulse{0%,100%{opacity:.6}50%{opacity:1}}
.lockup{position:relative;display:flex;align-items:center;gap:40px;flex-wrap:wrap;justify-content:center}
.lockup .wtile{border-radius:26%}
.wword{display:flex;font-family:'Barlow Condensed','Inter',sans-serif;font-weight:700;font-size:112px;line-height:.95;letter-spacing:.01em;text-transform:uppercase}
.wword .w1,.wword .w2{display:flex}
.wword .w1{color:var(--text)}
.wword .w2{color:var(--lime)}
.wword span span{display:inline-block;opacity:0;transform:translateY(40px);animation:letter .6s cubic-bezier(.2,.9,.3,1) forwards;animation-delay:calc(.9s + var(--i)*.07s)}
@keyframes letter{to{opacity:1;transform:none}}
.rule{height:2px;margin-top:18px;background:linear-gradient(90deg,var(--lime),rgba(163,184,99,0));transform-origin:left;transform:scaleX(0);animation:rulein .9s 1.7s cubic-bezier(.2,.9,.3,1) forwards;position:relative}
.rule::after{content:"";position:absolute;right:0;top:-3px;width:8px;height:8px;border-radius:50%;background:var(--lime);box-shadow:0 0 12px var(--lime)}
@keyframes rulein{to{transform:scaleX(1)}}
.lgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:20px;margin-top:20px}
.lgrid .card+.card{margin-top:0}
.sizes{display:flex;align-items:flex-end;gap:20px;margin-top:22px}
.hdr{display:flex;align-items:center;gap:14px;margin-top:22px}
.hdr b{display:block;font-size:15px;letter-spacing:.03em}
.hdr small{color:var(--muted);font-size:12px}
.loader{position:relative;display:grid;place-items:center;width:112px;height:112px;margin-top:20px}
.appicon{margin-top:20px}
.appicon .wtile{border-radius:26%}
.wtile.noglow .w-metal{animation:none}
@media (max-width:640px){.wword{font-size:64px}}
/* palette overrides for the purchase flow (fonts stay Unbounded + Onest) */
.step.done{border-top-color:rgba(163,184,99,.45)}
.tabs a.on{border-color:rgba(163,184,99,.35)}
.check input{accent-color:#A3B863}
.pm.on::before{background:linear-gradient(100deg,transparent,rgba(163,184,99,.25),transparent)}
.cbx.on{background:var(--lime);border-color:var(--lime)}
.ic{color:var(--lime)}
.alert{border-color:rgba(224,149,125,.4)}
.alert span{color:#E7CFC6}
.card{box-shadow:0 1px 0 rgba(255,255,255,.03) inset}

/* Hero block of the cabinet */
.hero{padding:34px 36px;gap:40px}
.hglow{position:absolute;right:-80px;top:-120px;width:420px;height:420px;border-radius:50%;background:radial-gradient(circle,rgba(163,184,99,.18),transparent 65%);animation:glowpulse 5s ease-in-out infinite;pointer-events:none}
.kring{width:176px;height:176px}
.kring svg{overflow:visible}
.rbase{fill:none;stroke:rgba(255,255,255,.07);stroke-width:7}
.rtick{fill:none;stroke:rgba(163,184,99,.35);stroke-width:1.2;stroke-dasharray:1.5 5.5;transform-origin:60px 60px;animation:slowspin 40s linear infinite}
@keyframes slowspin{to{transform:rotate(360deg)}}
.ringfg{fill:none;stroke:url(#rg);stroke-width:7;filter:drop-shadow(0 0 6px rgba(163,184,99,.55))}
.ringfg.off{stroke:var(--amber);filter:none}
.dotg{transform-origin:0 0}
.rdot{fill:#EAF3C8;filter:drop-shadow(0 0 5px rgba(200,230,120,.9));animation:dotpulse 2s ease-in-out infinite}
@keyframes dotpulse{0%,100%{r:3.4}50%{r:4.6}}
.kring .rnum{text-align:center;padding:0}
.kring .rnum>*{display:block;text-align:center;width:100%}
.kring .rnum .num{font-size:54px!important}
.rnum .num{font-family:var(--display);font-weight:700;font-size:54px;line-height:1;letter-spacing:-.03em;display:block}
.rnum span{font-size:15px;color:var(--text);margin-top:6px}
.rnum em{font-style:normal;font-size:12px;color:var(--muted);margin-top:2px}
.hname{display:flex;align-items:center;gap:14px;flex-wrap:wrap;font-family:var(--display);font-weight:500;font-size:30px;letter-spacing:-.01em}
.keyicon.big{width:46px;height:46px;border-radius:14px}
.chips2{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.pchip{display:inline-flex;align-items:center;gap:8px;height:34px;padding:0 14px;border-radius:999px;border:1px solid var(--line);background:rgba(255,255,255,.03);font-size:14px;color:var(--text);animation:rise .55s cubic-bezier(.2,.9,.3,1) both}
.pchip i{width:6px;height:6px;border-radius:50%;background:var(--lime)}
.pchip small{color:var(--muted);font-size:13px}
.pchip:nth-child(2){animation-delay:.08s}.pchip:nth-child(3){animation-delay:.16s}
.hinfo .actions{margin-top:26px}

/* loader */
.arc{position:absolute;inset:0;border-radius:50%;background:conic-gradient(from 0deg,rgba(163,184,99,0) 0 55%,rgba(163,184,99,.15) 70%,#C9DB8A 100%);-webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 4px),#000 calc(100% - 3px));mask:radial-gradient(farthest-side,transparent calc(100% - 4px),#000 calc(100% - 3px));animation:arcspin 1.1s linear infinite;filter:drop-shadow(0 0 6px rgba(163,184,99,.6))}
.arc2{inset:8px;opacity:.45;animation-duration:1.8s;animation-direction:reverse}
@keyframes arcspin{to{transform:rotate(360deg)}}
.loader .wtile{animation:lbreath 1.6s ease-in-out infinite}
@keyframes lbreath{0%,100%{transform:scale(.94)}50%{transform:scale(1)}}
.loader .w-out{animation:wdrawloop 1.6s ease-in-out infinite}
.loader .w-fill{animation:wfillloop 1.6s ease-in-out infinite}
@keyframes wdrawloop{0%{stroke-dashoffset:1;opacity:1}55%{stroke-dashoffset:0;opacity:1}80%,100%{stroke-dashoffset:0;opacity:0}}
@keyframes wfillloop{0%,45%{opacity:0}70%,92%{opacity:1}100%{opacity:0}}

.devn button{display:grid;place-items:center;line-height:1}
.devn button svg{display:block}
.dvinf{display:inline-grid;place-items:center;height:42px;margin-left:6px}
.dvinf svg{display:block}

/* motion effect card */
.fx{position:relative;display:grid;place-items:center;width:100%;height:150px;margin-top:14px}
.fx .wtile{position:relative;z-index:2;animation:wpop .7s cubic-bezier(.3,1.5,.5,1) backwards,fxfloat 3.6s 1s ease-in-out infinite}
.fx .rp{position:absolute;left:50%;top:50%;width:70px;height:70px;margin:-35px 0 0 -35px;border-radius:22%;border:1.5px solid rgba(163,184,99,.6);animation:ripple 3.6s ease-out infinite;z-index:1}
.fx .rp:nth-of-type(2){animation-delay:1.2s}
.fx .rp:nth-of-type(3){animation-delay:2.4s}
.fx .sp{position:absolute;left:50%;top:50%;width:5px;height:5px;margin:-2.5px;border-radius:50%;background:#C9DB8A;box-shadow:0 0 8px #C9DB8A;opacity:0;animation:spark2 3.6s ease-out infinite;z-index:1}
.fx .sp:nth-of-type(4){--x:-70px;--y:-40px;animation-delay:.2s}
.fx .sp:nth-of-type(5){--x:72px;--y:-34px;animation-delay:.9s}
.fx .sp:nth-of-type(6){--x:-56px;--y:44px;animation-delay:1.6s}
.fx .sp:nth-of-type(7){--x:64px;--y:48px;animation-delay:2.3s}
.fx .sp:nth-of-type(8){--x:0px;--y:-66px;animation-delay:2.9s}
@keyframes ripple{0%{transform:scale(1);opacity:.8}100%{transform:scale(2.6);opacity:0}}
@keyframes spark2{0%{transform:translate(0,0) scale(.4);opacity:0}15%{opacity:1}100%{transform:translate(var(--x),var(--y)) scale(1);opacity:0}}
@keyframes fxfloat{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-8px) rotate(-3deg)}}
/* invite page */
.statrow{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:28px}
.sbox{padding:20px 22px}
.sbox b{display:block;font-family:var(--display);font-size:34px;font-weight:700;line-height:1.1;letter-spacing:-.02em}
.sbox span{color:var(--muted);font-size:14px}
.sbox.hl b{color:var(--lime)}
.bonus-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-top:18px}
.bonus{padding:20px 18px;border-radius:16px;border:1px solid var(--line);background:rgba(255,255,255,.025);animation:rise .55s cubic-bezier(.2,.9,.3,1) both;transition:transform .25s cubic-bezier(.3,1.5,.5,1),border-color .2s ease,box-shadow .3s ease}
.bonus:nth-child(2){animation-delay:.08s}.bonus:nth-child(3){animation-delay:.16s}.bonus:nth-child(4){animation-delay:.24s}
.bonus:hover{transform:translateY(-4px);border-color:rgba(163,184,99,.5);box-shadow:0 14px 30px -16px rgba(163,184,99,.5)}
.bonus strong{display:block;font-family:var(--display);font-size:24px;font-weight:700;color:var(--lime);letter-spacing:-.02em}
.bonus span{display:block;margin-top:6px;color:var(--muted);font-size:14px}
.notei{display:flex;gap:12px;align-items:flex-start;margin-top:18px;padding:14px 16px;border-radius:14px;background:var(--amberbg);border:1px solid rgba(228,186,125,.3);color:var(--text);font-size:14px;line-height:1.5}
.notei svg{flex:none;color:var(--amber);margin-top:2px}
.applyrow{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin-top:16px}
.sel{height:52px;min-width:220px;padding:0 16px;border-radius:12px;border:1px solid var(--line2);background:var(--bg);color:var(--text);font:inherit;font-size:16px}
.okline{margin-top:14px;color:var(--lime);font-size:15px;animation:rise .5s ease both}
@media (max-width:700px){.statrow{grid-template-columns:1fr}}

.statrow .card{margin-top:0}
.statrow{align-items:stretch}
.sbox{display:flex;flex-direction:column;justify-content:center;gap:6px;min-height:104px}
.sbox .num{font-family:var(--display);font-weight:700;font-size:36px;line-height:1.1;letter-spacing:-.02em;display:block}
.sbox.hl .num{color:var(--lime)}

/* ===== phone ===== */
.mob{overflow-x:hidden;position:relative}
.mob .wrap{min-width:0;width:100%}
.mob .grid{display:block;margin-top:24px}
.mob .aside{max-width:none;margin-top:16px}
.mob .who span{display:none}
.mob .cab{display:block;margin-top:0}
.mob .hero{padding:24px 20px;gap:20px;flex-direction:column;align-items:flex-start}
.mob .kring{align-self:center}
.mob .hname{font-size:24px;gap:10px}
.mob .keyicon.big{width:38px;height:38px}
.mob .hinfo{width:100%}
.mob .hinfo .actions{flex-direction:column;align-items:stretch}
.mob .hinfo .actions .btn{width:100%}
.mob .hglow{right:-160px}
.mob .statrow{grid-template-columns:1fr 1fr 1fr;gap:8px}
.mob .sbox .num{font-size:26px}
.mob .addp .actions{flex-direction:row}
.mob .slots{grid-template-columns:1fr 1fr 1fr;gap:8px}
.mob .sublink{flex-direction:column;align-items:stretch}
.mob .sublink code{white-space:normal;word-break:break-all}
.mob .sum .tot{font-size:30px}
.mob .pm{min-width:0}
.mob .rise{animation:rise .6s cubic-bezier(.2,.9,.3,1) both}
.mob .card{animation:rise .55s cubic-bezier(.2,.9,.3,1) both}
.mob .card:nth-of-type(2){animation-delay:.08s}.mob .card:nth-of-type(3){animation-delay:.16s}
.mob .btn-p{position:relative;overflow:hidden}
.mob .btn-p::after{content:"";position:absolute;top:0;bottom:0;width:40%;left:-60%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.35),transparent);transform:skewX(-20deg);animation:btnshine 4.5s ease-in-out 1.2s infinite}
@keyframes btnshine{0%,60%{left:-60%}100%{left:130%}}
.hinfo .actions{gap:10px}
.hinfo .actions .btn{padding-left:20px;padding-right:20px}
.mob .steps{display:grid;grid-template-columns:repeat(5,1fr);gap:4px}
.mob .step{font-size:10.5px;min-width:0;overflow:hidden;text-overflow:ellipsis}
.mob .grid .card .h2{display:none}
.mob .grid .card .lbl{margin-bottom:12px}
.mob .head .t{font-size:26px}
.hinfo .actions{flex-wrap:nowrap}
.hinfo .actions .btn{padding-left:16px;padding-right:16px;font-size:15px;white-space:nowrap}
.mob .hinfo .actions{flex-wrap:wrap}

/* ===== liquid bottom nav (phone) ===== */
@property --r{syntax:'<length>';inherits:false;initial-value:0px}
.mob .wrap{padding-bottom:120px}
.lnav{position:absolute;left:14px;right:14px;bottom:16px;height:68px;z-index:20;display:grid;grid-template-columns:repeat(4,1fr);--r:37px;animation:notch .7s cubic-bezier(.2,.9,.3,1) .15s backwards}
@keyframes notch{from{--r:0px}to{--r:37px}}
.lnav::before{content:"";position:absolute;inset:0;border-radius:24px;background:linear-gradient(180deg,#171E27,#10151D);box-shadow:0 18px 30px rgba(0,0,0,.45),inset 0 0 0 1px rgba(255,255,255,.08);-webkit-mask:radial-gradient(circle var(--r) at calc((var(--i) + .5) * 25%) 4px,transparent calc(var(--r) - 1px),#000 var(--r));mask:radial-gradient(circle var(--r) at calc((var(--i) + .5) * 25%) 4px,transparent calc(var(--r) - 1px),#000 var(--r))}
.lnav .li{position:relative;display:flex;align-items:flex-end;justify-content:center;color:var(--muted);text-decoration:none;-webkit-tap-highlight-color:transparent}
.lnav .b{position:absolute;left:50%;top:50%;width:46px;height:46px;margin:-23px 0 0 -23px;border-radius:50%;display:flex;align-items:center;justify-content:center;transition:transform .45s cubic-bezier(.3,1.5,.5,1),background .3s,color .3s,box-shadow .3s}
.lnav .li:active .b{transform:scale(.88)}
.lnav .li:hover{color:var(--text)}
.lnav em{font-style:normal;font-size:11px;font-weight:500;letter-spacing:.02em;opacity:0;transform:translateY(6px);transition:opacity .3s,transform .3s;padding-bottom:9px}
.lnav .li.on{color:var(--ink)}
.lnav .li.on .b{width:58px;height:58px;margin:-29px 0 0 -29px;top:4px;background:linear-gradient(145deg,#D6E7A0,#A3B863);color:var(--ink);box-shadow:0 8px 20px rgba(163,184,99,.45),0 0 0 6px rgba(8,11,18,.0);animation:bpop .65s cubic-bezier(.3,1.6,.5,1) .2s backwards}
.lnav .li.on .b::after{content:"";position:absolute;inset:-5px;border-radius:50%;border:1.5px solid rgba(163,184,99,.5);animation:bring 2.6s ease-out 1s infinite}
.lnav .li.on em{opacity:1;transform:none;color:var(--lime)}
@keyframes bpop{from{transform:translateY(34px) scale(.3);opacity:0}}
@keyframes bring{0%{transform:scale(.9);opacity:.8}100%{transform:scale(1.35);opacity:0}}
/* nav stays on screen while scrolling */
.mob>.lnav{position:sticky;left:auto;right:auto;bottom:16px;margin:auto 14px 16px;flex:none}
.mob>.wrap{flex:1 0 auto}
/* phone polish */
.mob .sublink{flex-direction:column;align-items:stretch;gap:12px;padding:14px;margin-top:16px}
.mob .sublink code{display:block;width:100%;white-space:nowrap;word-break:normal;overflow:hidden;text-overflow:ellipsis;text-align:center;font-size:13px}
.mob .sublink .btn{width:100%;height:48px;font-size:15px;margin:0}
.mob .statrow{gap:10px}
.mob .statrow .sbox{min-height:112px;padding:16px 8px;align-items:center;text-align:center;gap:8px;justify-content:center}
.mob .statrow .sbox .num{font-size:34px !important;line-height:1}
.mob .statrow .sbox span:not(.num){font-size:13px;line-height:1.25;color:var(--muted);text-wrap:balance;max-width:9ch}
.mob .steps{display:none}
.mob .statrow .sbox{justify-content:flex-start;padding-top:20px}
.mob .statrow .sbox span:not(.num){min-height:2.5em;display:block}
.mob .bonus-grid{grid-template-columns:1fr 1fr;gap:10px}
.mob .applyrow{flex-direction:column;align-items:stretch}
.mob .applyrow .sel,.mob .applyrow select,.mob .applyrow .btn{width:100%}
.mob .bonus{padding:16px 14px}
.mob .bonus strong{font-size:19px;white-space:nowrap}

/* phone purchase v3: price inside each step card */
.mob .pflow .aside{display:none}
.mob .grid{margin-top:20px}
.mob .pfoot{display:flex;align-items:center;justify-content:space-between;gap:14px;margin:22px -4px -4px;padding:14px 14px 14px 16px;border-radius:16px;background:rgba(163,184,99,.08);border:1px solid rgba(163,184,99,.22)}
.mob .pfoot .pp{min-width:0;flex:1}
.mob .pfoot .tot{font-family:var(--display);font-weight:700;font-size:26px;line-height:1.1;letter-spacing:-.02em;white-space:nowrap}
.mob .pfoot .hint{margin:4px 0 0;font-size:12.5px;white-space:nowrap}
.mob .pfoot .btn{flex:none;width:150px;height:48px;padding:0;font-size:15px}
.mob .terms{gap:8px}
.mob .terms .term{padding:12px 14px}
.mob .devn{grid-template-columns:repeat(5,1fr);gap:8px}
.mob .devn button{height:50px}
.mob .main{width:100%;max-width:none;min-width:0}
.mob .aside{max-width:none;width:100%;flex:none}
/* combined flow */
.flowv{max-width:640px;margin:0 auto;padding-top:8px}
.mob .flowv{max-width:none}
.pfoot{display:flex;align-items:center;justify-content:space-between;gap:14px;margin:22px -4px -4px;padding:14px 14px 14px 16px;border-radius:16px;background:rgba(163,184,99,.08);border:1px solid rgba(163,184,99,.22)}
.pfoot .pp{min-width:0;flex:1}
.pfoot .tot{font-family:var(--display);font-weight:700;font-size:26px;line-height:1.1;letter-spacing:-.02em;white-space:nowrap}
.pfoot .hint{margin:4px 0 0;font-size:12.5px}
.pfoot .btn{flex:none;width:150px;height:48px;padding:0;font-size:15px}
.slot.fresh{border-color:var(--lime);box-shadow:0 0 0 0 rgba(163,184,99,.6);animation:dvin .45s cubic-bezier(.3,1.5,.5,1) both,freshp 1.8s ease-out .3s 2}
@keyframes freshp{0%{box-shadow:0 0 0 0 rgba(163,184,99,.55)}100%{box-shadow:0 0 0 16px rgba(163,184,99,0)}}
.slot .sico{font-size:22px}
.pfoot .hint{white-space:normal}
.steps{display:none !important}

/* extra device icons (4+) */
.dvx svg{transition:transform .25s cubic-bezier(.3,1.6,.5,1)}
.dvrow{gap:8px 6px}

/* logo hover: squash-bounce + glow flash (no rotate) */
@keyframes wbump{0%{transform:none}25%{transform:scale(1.16,.88)}55%{transform:translateY(-6px) scale(.95,1.08)}80%{transform:translateY(-1px) scale(1.09,.97)}100%{transform:translateY(-2px) scale(1.07)}}
@keyframes wflash{0%{filter:drop-shadow(0 0 0 rgba(163,184,99,0)) brightness(1)}35%{filter:drop-shadow(0 0 12px rgba(201,219,138,.95)) brightness(1.35)}100%{filter:drop-shadow(0 0 0 rgba(163,184,99,0)) brightness(1)}}

/* device icons: each one moves its own way on hover */
.dvx svg{transform-origin:50% 60%}
.dvx:hover .k-phone{animation:k-buzz .6s ease-in-out}
.dvx:hover .k-laptop{animation:k-nod .6s ease-in-out}
.dvx:hover .k-tablet{animation:k-flip .7s cubic-bezier(.4,.1,.3,1)}
.dvx:hover .k-pc,.dvx:hover .k-tv{animation:k-nod .6s ease-in-out}
.dvx:hover .k-router .rt-arcs{animation:k-arc .5s ease-in-out 2}
.dvx:hover .k-router .rt-dots{animation:k-dots .9s steps(1,end)}
.dvx .k-fridge{transform-origin:22% 50%}
.dvx:hover .k-fridge{animation:k-door .7s ease-in-out}
.dvx .k-cat{transform-origin:50% 92%}
.dvx:hover .k-cat{animation:k-tilt .7s ease-in-out}
.dvx .k-dog{transform-origin:50% 100%}
.dvx:hover .k-dog{animation:k-jump .6s ease-out}
.dvx:hover .k-robot{animation:k-robo .7s steps(1,end)}
.dvx .mm-shades{transform-box:fill-box}
.dvx:hover .k-meme .mm-shades{animation:k-shades .6s cubic-bezier(.3,1.6,.5,1)}
@keyframes k-buzz{0%,70%,100%{transform:none}10%{transform:translateX(-2px) rotate(-5deg)}20%{transform:translateX(2px) rotate(5deg)}30%{transform:translateX(-2px) rotate(-4deg)}40%{transform:translateX(2px) rotate(4deg)}50%{transform:translateX(-1px) rotate(-2deg)}60%{transform:translateX(1px)}}
@keyframes k-nod{0%,100%{transform:none}35%{transform:scale(1,.8)}65%{transform:scale(1.05,1.1)}}
@keyframes k-flip{from{transform:perspective(160px) rotateY(0)}to{transform:perspective(160px) rotateY(360deg)}}
@keyframes k-arc{0%,100%{opacity:1}45%{opacity:.08}}
@keyframes k-dots{0%{opacity:1}22%{opacity:.1}44%{opacity:1}66%{opacity:.1}88%,100%{opacity:1}}
@keyframes k-door{0%,100%{transform:none}45%{transform:perspective(200px) rotateY(-42deg)}}
@keyframes k-tilt{0%,100%{transform:none}25%{transform:rotate(-13deg)}55%{transform:rotate(11deg)}80%{transform:rotate(-4deg)}}
@keyframes k-jump{0%,100%{transform:none}30%{transform:translateY(-8px) scale(.95,1.07)}55%{transform:translateY(0) scale(1.1,.9)}75%{transform:translateY(-3px)}}
@keyframes k-robo{0%{transform:none}20%{transform:rotate(-10deg)}40%{transform:rotate(8deg) translateY(-1px)}60%{transform:rotate(-5deg) translateY(-2px)}80%{transform:rotate(3deg)}100%{transform:none}}
@keyframes k-shades{0%{transform:translateY(-9px);opacity:0}60%{transform:translateY(1.5px);opacity:1}100%{transform:none;opacity:1}}

/* payment method icons: also one move each */
.pm:hover .ic{transform:scale(1.06)}
.pm:nth-child(1):hover .ic{animation:pm-swipe .6s ease-in-out}
.pm:nth-child(2):hover .ic{animation:pm-fast .6s ease-in-out}
.pm:nth-child(3):hover .ic{animation:pm-coin .7s cubic-bezier(.4,.1,.3,1)}
.pm:nth-child(4):hover .ic{animation:pm-gem .7s ease-in-out}
@keyframes pm-swipe{0%,100%{transform:none}30%{transform:translateX(-6px) rotate(-6deg)}65%{transform:translateX(6px) rotate(4deg)}}
@keyframes pm-fast{0%,100%{transform:none}35%{transform:translateX(-5px)}70%{transform:translateX(7px)}85%{transform:translateX(2px)}}
@keyframes pm-coin{from{transform:perspective(140px) rotateY(0)}to{transform:perspective(140px) rotateY(360deg)}}
@keyframes pm-gem{0%,100%{transform:none}35%{transform:scale(1.18) rotate(8deg)}65%{transform:scale(.94) rotate(-5deg)}}
@media (prefers-reduced-motion:reduce){.dvx svg,.dvx .mm-shades,.wtile,.pm .ic{animation:none !important}}

/* logo hover v2: radar rings from the tile + glow flash */
.wtile::before,.wtile::after{content:"";position:absolute;inset:0;border-radius:inherit;border:2px solid #C9DB8A;opacity:0;pointer-events:none;transform:scale(1)}
.wtile:hover::before{animation:wping 1s ease-out}
.wtile:hover::after{animation:wping 1s .28s ease-out}
@keyframes wping{0%{opacity:.85;transform:scale(1);border-width:3px}100%{opacity:0;transform:scale(1.7);border-width:1px}}
@media (prefers-reduced-motion:reduce){.wtile::before,.wtile::after{display:none}}

/* phone purchase: term rows never wrap the badge */
.mob .terms .term .name{font-size:16px;white-space:nowrap}
.mob .terms .term .badge{padding:2px 7px;font-size:11px;margin-left:6px;white-space:nowrap}

/* QR codes: subscription link and payment */
.qrbox{display:inline-grid;place-items:center;padding:14px;border-radius:20px;background:#F4F0E6;box-shadow:0 18px 40px -18px rgba(0,0,0,.6)}
.qrbox .qr{display:block;width:196px;height:196px}
.qrcard{text-align:center}
.qrcard .lbl{text-align:left}
.qrcard .qrbox{margin:18px auto 0;animation:qrin .55s cubic-bezier(.3,1.4,.5,1) both}
.qrsum{font-family:var(--display);font-weight:700;font-size:34px;letter-spacing:-.02em;margin-top:18px}
.qrhint{max-width:420px;margin:8px auto 0;color:var(--muted);font-size:15px;line-height:1.5}
.qrwait{display:inline-flex;align-items:center;gap:10px;margin-top:18px;padding:8px 14px;border-radius:999px;background:rgba(163,184,99,.1);color:var(--lime);font-size:14px;font-weight:500}
.qrwait i{width:8px;height:8px;border-radius:50%;background:var(--lime);animation:qrpulse 1.4s ease-in-out infinite}
.qractions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:22px}
.subqr{display:flex;align-items:center;gap:22px;margin-top:18px;padding:18px;border-radius:20px;background:rgba(255,255,255,.03);border:1px solid var(--line)}
.subqr .qrbox{padding:10px;border-radius:16px;flex:none}
.subqr .qr{width:128px;height:128px}
.subqrt{display:flex;flex-direction:column;gap:6px;min-width:0}
.subqrt b{font-weight:600;font-size:16px}
.subqrt span{color:var(--muted);font-size:14px;line-height:1.45}
.mob .subqr{flex-direction:column;text-align:center;padding:18px 16px}
.mob .subqr .qr{width:168px;height:168px}
.mob .qrbox .qr{width:184px;height:184px}
@keyframes qrin{from{opacity:0;transform:scale(.88)}to{opacity:1;transform:none}}
@keyframes qrpulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.7)}}

/* bonus balance on the cabinet home */
.bonus-chip{text-decoration:none;border-color:rgba(163,184,99,.4);background:rgba(163,184,99,.1);color:var(--lime);transition:transform .25s cubic-bezier(.3,1.5,.5,1),background-color .2s}
.bonus-chip svg{flex:none}
.bonus-chip b{font-family:var(--display);font-weight:700;font-size:15px;color:var(--text)}
.bonus-chip:hover{transform:translateY(-1px);background:rgba(163,184,99,.16)}
.pchip:nth-child(4){animation-delay:.24s}
.bcnt{display:inline-grid;place-items:center;min-width:22px;height:22px;padding:0 6px;margin-left:10px;border-radius:999px;background:var(--lime);color:var(--ink);font-family:var(--display);font-weight:700;font-size:12px;line-height:1}
.hinfo{min-width:0}
.hinfo .actions{flex-wrap:wrap;gap:10px}

/* phone cabinet = a real app frame: content scrolls inside, the bottom nav stays put */
.mob.app{position:relative;overflow:hidden}
.mob.app>.wrap{height:100%;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;scrollbar-width:none;padding-bottom:116px}
.mob.app>.wrap::-webkit-scrollbar{display:none}
.mob.app .lnav{position:absolute;left:14px;right:14px;bottom:16px;margin:0;z-index:30}
.mob.app:has(.lnav)::after{content:"";position:absolute;left:0;right:0;bottom:0;height:110px;pointer-events:none;background:linear-gradient(180deg,rgba(8,11,18,0),rgba(8,11,18,.92) 70%);z-index:25}

.mob.app{width:100%!important;max-width:none;height:100vh!important;height:100dvh!important;min-height:480px}
.mob.app>.wrap{padding-bottom:116px}