/* Bellver Cards by MTG | shared design system
   Palette taken from the official Bellver Card theme so visitors feel no jump when they move to app.bellvercards.com */
:root{
  --ink:#020c06;--ink-2:#04100a;--panel:#08120c;--panel-2:#0c1a12;--panel-3:#10221a;
  --line:rgba(150,255,200,.085);--line-2:rgba(150,255,200,.16);
  --text:#eef5f1;--soft:#c3d2ca;--muted:#8ea39a;--faint:#5f7268;
  --green:#34b070;--green-hi:#34cc88;--green-deep:#1d8a55;--yellow:#fcbe25;--red:#e5484d;
  --basic-1:#1fb5b5;--basic-2:#0b6f73;--prem-1:#e5833a;--prem-2:#8f3a12;--biz-1:#d9dee3;--biz-2:#6c747c;--gold-1:#f6c453;--gold-2:#a8670d;
  --r-xl:30px;--r-lg:22px;--r-md:16px;--r-sm:11px;
  --wrap:1180px;--gut:clamp(16px,4vw,32px);
  --display:'Anton',Impact,'Arial Narrow',sans-serif;--body:'Manrope',system-ui,-apple-system,'Segoe UI',sans-serif;
  --ease:cubic-bezier(.2,.7,.2,1);--spring:cubic-bezier(.34,1.56,.64,1);
  color-scheme:dark;
}
@view-transition{navigation:auto}
::view-transition-old(root){animation:vtOut .28s var(--ease) both}
::view-transition-new(root){animation:vtIn .42s var(--ease) both}
::view-transition-group(bv-header){animation-duration:0s}
@keyframes vtOut{to{opacity:0;transform:translateY(-10px);filter:blur(4px)}}
@keyframes vtIn{from{opacity:0;transform:translateY(14px);filter:blur(4px)}}

*,*:before,*:after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:90px}
body{margin:0;min-width:320px;background:var(--ink);color:var(--text);font:400 16px/1.65 var(--body);overflow-x:hidden;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body:before{content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;background:
  radial-gradient(900px 520px at 78% -6%,rgba(52,176,112,.16),transparent 62%),
  radial-gradient(700px 460px at -8% 38%,rgba(52,176,112,.07),transparent 60%),
  radial-gradient(800px 600px at 110% 92%,rgba(252,190,37,.045),transparent 60%),
  linear-gradient(180deg,#03100a,#020c06 40%,#020a05)}
body:after{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.35;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.45'/%3E%3C/svg%3E")}
img,video,svg{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-decoration:none}
p{margin:0 0 1em}
h1,h2,h3,h4{margin:0;font-weight:400}
strong,b{font-weight:800;color:#fff}
::selection{background:rgba(52,204,136,.35);color:#fff}
:focus-visible{outline:2px solid var(--green-hi);outline-offset:4px;border-radius:6px}
.wrap{width:min(var(--wrap),100% - var(--gut)*2);margin-inline:auto}
.sr-only{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:fixed;left:16px;top:-60px;z-index:200;padding:10px 14px;border-radius:10px;background:var(--green);color:#03140b;font-weight:800;transition:top .2s}
.skip:focus{top:12px}

/* scroll progress */
.progress{position:fixed;left:0;top:0;z-index:120;height:2px;width:100%;transform-origin:0 50%;transform:scaleX(var(--p,0));background:linear-gradient(90deg,var(--green),var(--green-hi),var(--yellow));box-shadow:0 0 12px rgba(52,204,136,.6)}

/* ---------- header + pull-down menu ---------- */
.hdr{position:sticky;top:0;z-index:100;view-transition-name:bv-header;transition:background .3s,border-color .3s,backdrop-filter .3s}
.hdr.scrolled{background:rgba(2,12,6,.78);backdrop-filter:blur(18px) saturate(1.4);-webkit-backdrop-filter:blur(18px) saturate(1.4);border-bottom:1px solid var(--line)}
.hdr-in{display:flex;align-items:center;justify-content:space-between;gap:14px;min-height:76px;transition:min-height .3s var(--ease)}
.hdr.scrolled .hdr-in{min-height:64px}
.brand{display:flex;align-items:center;gap:14px;min-width:0}
.brand img{width:148px;height:auto;transition:width .3s var(--ease)}
.hdr.scrolled .brand img{width:132px}
.brand .by{padding-left:14px;border-left:1px solid var(--line-2);color:var(--muted);font-size:.78rem;font-weight:700;line-height:1.2;white-space:nowrap}
.brand .by b{display:block;color:var(--text);font-size:.86rem}
.hdr-act{display:flex;align-items:center;gap:10px}
.menu-btn{display:inline-flex;align-items:center;gap:9px;min-height:44px;padding:0 16px;border:1px solid var(--line-2);border-radius:999px;background:rgba(12,26,18,.7);color:var(--text);font:800 .86rem var(--body);cursor:pointer;transition:border-color .2s,background .2s,transform .2s var(--ease)}
.menu-btn:hover{border-color:rgba(52,204,136,.45);background:rgba(16,34,26,.9)}
.menu-btn:active{transform:scale(.97)}
.menu-btn .bars{position:relative;width:18px;height:14px;background:linear-gradient(currentColor,currentColor) center/100% 2px no-repeat;border-radius:2px;transition:background-size .2s}
.menu-btn .bars:before,.menu-btn .bars:after{content:"";position:absolute;left:0;right:0;height:2px;border-radius:2px;background:currentColor;transition:transform .35s var(--spring),top .35s var(--ease)}
.menu-btn .bars:before{top:0}.menu-btn .bars:after{top:12px}
.menu-btn[aria-expanded="true"] .bars{background-size:0 2px}
.menu-btn[aria-expanded="true"] .bars:before{top:6px;transform:rotate(45deg)}
.menu-btn[aria-expanded="true"] .bars:after{top:6px;transform:rotate(-45deg)}
.menu-btn .chev{width:12px;height:12px;transition:transform .35s var(--ease)}
.menu-btn[aria-expanded="true"] .chev{transform:rotate(180deg)}
.hdr .btn-sm{display:inline-flex}
.menu{position:absolute;left:0;right:0;top:100%;padding:0 0 18px;visibility:hidden;pointer-events:none}
.menu.open{visibility:visible;pointer-events:auto}
.menu-panel{position:relative;padding:18px;border:1px solid var(--line-2);border-radius:var(--r-lg);background:linear-gradient(180deg,rgba(12,26,18,.97),rgba(5,16,10,.98));backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);box-shadow:0 40px 90px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.05);opacity:0;transform:translateY(-12px) scale(.985);transform-origin:top right;transition:opacity .25s var(--ease),transform .35s var(--ease)}
.menu.open .menu-panel{opacity:1;transform:none}
.menu-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.mlink{display:flex;gap:12px;align-items:flex-start;padding:13px 14px;border:1px solid transparent;border-radius:var(--r-md);transition:background .2s,border-color .2s,transform .25s var(--ease);opacity:0;transform:translateY(8px)}
.menu.open .mlink{opacity:1;transform:none;transition:opacity .4s var(--ease) calc(var(--i)*35ms),transform .45s var(--ease) calc(var(--i)*35ms),background .2s,border-color .2s}
.mlink:hover{background:rgba(52,176,112,.08);border-color:rgba(52,176,112,.22)}
.mlink[aria-current="page"]{background:rgba(52,176,112,.11);border-color:rgba(52,176,112,.3)}
.mlink .ic{flex:none;display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:rgba(52,176,112,.12);color:var(--green-hi)}
.mlink .ic svg{width:18px;height:18px}
.mlink b{display:block;font-size:.92rem;line-height:1.3}
.mlink small{display:block;color:var(--muted);font-size:.78rem;line-height:1.4;margin-top:2px}
.menu-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;margin-top:12px;padding-top:14px;border-top:1px solid var(--line)}
.menu-foot .row{display:flex;flex-wrap:wrap;gap:8px}
.chiplink{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 14px;border:1px solid var(--line-2);border-radius:999px;color:var(--soft);font-size:.82rem;font-weight:700;transition:border-color .2s,color .2s,background .2s}
.chiplink:hover{border-color:rgba(52,204,136,.45);color:#fff;background:rgba(52,176,112,.07)}
.chiplink svg{width:15px;height:15px}
.scrim{position:fixed;inset:0;z-index:90;background:rgba(1,6,3,.55);opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s}
.scrim.on{opacity:1;visibility:visible}

/* ---------- buttons ---------- */
.btn{position:relative;isolation:isolate;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:54px;padding:0 26px;border-radius:14px;font:800 1rem/1 var(--body);letter-spacing:.005em;white-space:nowrap;cursor:pointer;border:0;transition:transform .2s var(--ease),box-shadow .25s,filter .2s;overflow:hidden}
.btn svg{width:18px;height:18px;flex:none}
.btn-go{color:#03140b;background:linear-gradient(180deg,#46d995 0%,#2bb673 52%,#209b5f 100%);box-shadow:0 1px 0 rgba(255,255,255,.45) inset,0 -2px 0 rgba(0,0,0,.18) inset,0 6px 0 #146b41,0 14px 30px rgba(0,0,0,.45),0 0 0 1px rgba(110,240,175,.35)}
.btn-go:before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.55) 50%,transparent 65%);transform:translateX(-120%);animation:shine 5.5s var(--ease) 2s infinite}
.btn-go:hover{transform:translateY(-2px);filter:brightness(1.06);box-shadow:0 1px 0 rgba(255,255,255,.5) inset,0 -2px 0 rgba(0,0,0,.18) inset,0 8px 0 #146b41,0 22px 40px rgba(0,0,0,.5),0 0 34px rgba(52,204,136,.35),0 0 0 1px rgba(140,255,195,.5)}
.btn-go:active{transform:translateY(4px);box-shadow:0 1px 0 rgba(255,255,255,.45) inset,0 2px 0 #146b41,0 8px 18px rgba(0,0,0,.45)}
.btn-ghost{color:var(--text);background:rgba(12,26,18,.55);box-shadow:0 0 0 1px var(--line-2) inset,0 10px 26px rgba(0,0,0,.3)}
.btn-ghost:hover{transform:translateY(-2px);box-shadow:0 0 0 1px rgba(52,204,136,.5) inset,0 16px 32px rgba(0,0,0,.4);background:rgba(16,34,26,.8)}
.btn-ghost:active{transform:translateY(1px)}
.btn-gold{color:#1d1300;background:linear-gradient(180deg,#ffd970,#fcbe25 55%,#e09a0a);box-shadow:0 1px 0 rgba(255,255,255,.5) inset,0 6px 0 #8a5a00,0 14px 30px rgba(0,0,0,.45)}
.btn-gold:hover{transform:translateY(-2px);filter:brightness(1.05)}
.btn-gold:active{transform:translateY(4px);box-shadow:0 2px 0 #8a5a00}
.btn-sm{min-height:42px;padding:0 16px;border-radius:12px;font-size:.86rem}
.btn-sm.btn-go{box-shadow:0 1px 0 rgba(255,255,255,.45) inset,0 4px 0 #146b41,0 10px 22px rgba(0,0,0,.4)}
.btn-sm.btn-go:active{transform:translateY(3px)}
.btn .play{display:grid;place-items:center;width:28px;height:28px;margin-left:-8px;border-radius:50%;background:rgba(52,204,136,.16);color:var(--green-hi)}
.btn .play svg{width:12px;height:12px;margin-left:2px}
.btn-row{display:flex;flex-wrap:wrap;gap:14px;align-items:center}
@keyframes shine{0%,62%{transform:translateX(-120%)}82%,100%{transform:translateX(120%)}}
.tlink{display:inline-flex;align-items:center;gap:8px;color:var(--green-hi);font-weight:800;border-bottom:1px solid rgba(52,204,136,.35);padding-bottom:2px;transition:color .2s,border-color .2s,gap .25s var(--ease)}
.tlink:hover{color:#7dffc0;border-color:#7dffc0;gap:12px}
.tlink svg{width:14px;height:14px}
.inl{color:var(--green-hi);font-weight:700;border-bottom:1px solid rgba(52,204,136,.3);transition:border-color .2s,color .2s}
.inl:hover{color:#7dffc0;border-color:#7dffc0}

/* ---------- type ---------- */
.display{font-family:var(--display);text-transform:uppercase;letter-spacing:.005em;line-height:.94;color:#fff}
.display .pay{color:var(--green-hi);position:relative;display:inline-block}
.display .pay:after{content:"";position:absolute;left:2%;right:2%;bottom:-.04em;height:.07em;border-radius:99px;background:linear-gradient(90deg,var(--green),var(--green-hi));transform-origin:0 50%;transform:scaleX(0);animation:underline 1s var(--ease) 1.1s forwards}
.display .tri{display:inline-block;width:.32em;height:.28em;margin-left:.16em;vertical-align:.42em;background:var(--yellow);clip-path:polygon(50% 0,100% 100%,0 100%);animation:triBob 3.6s ease-in-out 1.6s infinite}
@keyframes underline{to{transform:scaleX(1)}}
@keyframes triBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-.08em)}}
.h2{font-family:var(--display);text-transform:uppercase;font-size:clamp(2.1rem,4.6vw,3.6rem);line-height:.98;color:#fff;letter-spacing:.005em}
.h2 em{font-style:normal;color:var(--green-hi)}
.h3{font-size:1.18rem;font-weight:800;line-height:1.3;color:#fff;letter-spacing:-.01em}
.lead{color:var(--soft);font-size:clamp(1.04rem,1.6vw,1.18rem);line-height:1.6;max-width:62ch}
.muted{color:var(--muted)}
.small{font-size:.86rem}
.kicker{display:inline-flex;align-items:center;gap:9px;margin-bottom:18px;padding:7px 14px 7px 8px;border:1px solid var(--line-2);border-radius:999px;background:rgba(12,26,18,.6);color:var(--soft);font-size:.84rem;font-weight:700}
.kicker i{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:rgba(52,204,136,.16);color:var(--green-hi);font-style:normal}
.kicker i svg{width:12px;height:12px}

/* ---------- sections ---------- */
.sec{padding:clamp(56px,8vw,100px) 0;position:relative}
.sec-tight{padding:clamp(48px,7vw,80px) 0}
.sec-head{display:grid;gap:16px;max-width:760px;margin-bottom:clamp(30px,5vw,52px)}
.sec-head.center{margin-inline:auto;text-align:center;justify-items:center}
.divider{height:1px;background:linear-gradient(90deg,transparent,var(--line-2) 20%,var(--line-2) 80%,transparent)}
.panel{position:relative;border:1px solid var(--line);border-radius:var(--r-xl);background:linear-gradient(160deg,rgba(14,30,21,.85),rgba(6,16,10,.92));box-shadow:0 30px 80px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.04)}

/* ---------- hero ---------- */
.hero{position:relative;padding:clamp(30px,5vw,64px) 0 clamp(50px,7vw,90px)}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.04fr) minmax(0,1fr);gap:clamp(24px,4vw,56px);align-items:center}
.hero h1{font-size:clamp(3.2rem,6.9vw,6.5rem);margin-bottom:26px}
.hero h1 .ln{display:block;overflow:hidden;padding-bottom:.03em}
.hero h1 .ln>span{display:inline-block;transform:translateY(105%);animation:lineUp .9s var(--ease) forwards;animation-delay:calc(.15s + var(--l)*.12s)}
@keyframes lineUp{to{transform:none}}
.hero .lead{margin-bottom:30px;opacity:0;animation:fadeUp .8s var(--ease) .65s forwards}
.hero .btn-row{opacity:0;animation:fadeUp .8s var(--ease) .8s forwards}
@keyframes fadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.stage{position:relative;aspect-ratio:1.18/1;perspective:1400px;opacity:0;animation:fadeIn 1s var(--ease) .3s forwards}
@keyframes fadeIn{to{opacity:1}}
.stage .glow{position:absolute;inset:6% 4% 10%;border-radius:50%;background:radial-gradient(closest-side,rgba(52,204,136,.32),rgba(52,176,112,.08) 60%,transparent);filter:blur(30px);animation:breathe 7s ease-in-out infinite}
@keyframes breathe{0%,100%{opacity:.75;transform:scale(1)}50%{opacity:1;transform:scale(1.06)}}
.stage .ring{position:absolute;left:50%;top:52%;width:92%;aspect-ratio:1;border-radius:50%;border:1px solid rgba(52,204,136,.13);transform:translate(-50%,-50%) rotateX(72deg);box-shadow:0 0 60px rgba(52,204,136,.08) inset}
.stage .ring:nth-of-type(3){width:70%;border-color:rgba(252,190,37,.12);animation:spin 26s linear infinite}
@keyframes spin{to{transform:translate(-50%,-50%) rotateX(72deg) rotate(360deg)}}
.card3d{position:absolute;transform-style:preserve-3d;will-change:transform;transition:transform .5s var(--ease)}
.card3d img{width:100%;filter:drop-shadow(0 34px 40px rgba(0,0,0,.6)) drop-shadow(0 6px 10px rgba(0,0,0,.45))}
.card3d .glare{position:absolute;inset:4% 3%;border-radius:6%;pointer-events:none;background:radial-gradient(circle at var(--gx,30%) var(--gy,20%),rgba(255,255,255,.28),transparent 45%);mix-blend-mode:soft-light;opacity:var(--go,.0);transition:opacity .4s}
.c-main{width:84%;left:9%;top:20%;z-index:2;animation:cardIn 1.3s var(--ease) .35s both}
.c-main .float{animation:float 6s ease-in-out 1.7s infinite}
.c-back{width:62%;right:-2%;top:2%;z-index:1;transform:rotate(9deg);opacity:.95;animation:cardBack 1.4s var(--ease) .55s both}
.c-back img{filter:drop-shadow(0 24px 30px rgba(0,0,0,.55)) brightness(.85)}
@keyframes cardIn{from{opacity:0;transform:translateY(40px) rotateX(28deg) rotateY(-24deg) scale(.9)}to{opacity:1;transform:none}}
@keyframes cardBack{from{opacity:0;transform:translate(30px,30px) rotate(22deg) scale(.9)}to{opacity:.95;transform:rotate(9deg)}}
@keyframes float{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-12px) rotate(-.6deg)}}
.c-main .sweep{position:absolute;inset:3% 2%;overflow:hidden;border-radius:7%;pointer-events:none;transform:rotate(-6.5deg)}
.c-main .sweep:after{content:"";position:absolute;top:-40%;bottom:-40%;width:28%;left:-40%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.16),transparent);transform:skewX(-18deg);animation:sweep 6.5s var(--ease) 2.4s infinite}
@keyframes sweep{0%,70%{left:-40%}100%{left:130%}}
.tagpill{position:absolute;z-index:3;display:flex;align-items:center;gap:10px;padding:10px 14px;border:1px solid var(--line-2);border-radius:14px;background:rgba(6,18,11,.82);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:0 18px 40px rgba(0,0,0,.45);font-size:.82rem;font-weight:700;color:var(--soft);white-space:nowrap;opacity:0;animation:popIn .7s var(--spring) forwards}
.tagpill b{color:#fff;font-size:.95rem}
.tagpill .dot{width:9px;height:9px;border-radius:50%;background:var(--green-hi);box-shadow:0 0 0 4px rgba(52,204,136,.18)}
.tagpill.t1{left:0;bottom:12%;animation-delay:1.5s}
.tagpill.t2{right:2%;bottom:2%;animation-delay:1.75s}
.tagpill.t2 .dot{background:var(--yellow);box-shadow:0 0 0 4px rgba(252,190,37,.18)}
@keyframes popIn{from{opacity:0;transform:translateY(10px) scale(.9)}to{opacity:1;transform:none}}
.facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin-top:clamp(36px,6vw,64px);border:1px solid var(--line);border-radius:var(--r-lg);background:rgba(8,18,12,.65);overflow:hidden}
.fact{display:flex;gap:14px;align-items:center;padding:20px 22px;border-left:1px solid var(--line)}
.fact:first-child{border-left:0}
.fact .ic{flex:none;display:grid;place-items:center;width:42px;height:42px;border-radius:12px;background:rgba(52,176,112,.1);color:var(--green-hi);border:1px solid rgba(52,176,112,.2)}
.fact .ic svg{width:20px;height:20px}
.fact b{display:block;font-size:1.05rem;line-height:1.2}
.fact span{display:block;color:var(--muted);font-size:.82rem;line-height:1.35}

/* ---------- page hero (sub-pages) ---------- */
.phero{padding:clamp(40px,7vw,90px) 0 clamp(30px,5vw,56px)}
.crumbs{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-bottom:22px;color:var(--faint);font-size:.82rem;font-weight:700}
.crumbs a{color:var(--muted);transition:color .2s}.crumbs a:hover{color:var(--green-hi)}
.crumbs svg{width:12px;height:12px}
.phero h1{font-size:clamp(3rem,7.4vw,6rem);margin-bottom:22px}
.phero .ln{display:block;overflow:hidden}.phero .ln>span{display:inline-block;transform:translateY(105%);animation:lineUp .85s var(--ease) forwards;animation-delay:calc(.1s + var(--l)*.1s)}
.phero .lead{opacity:0;animation:fadeUp .8s var(--ease) .45s forwards}
.phero .btn-row{margin-top:28px;opacity:0;animation:fadeUp .8s var(--ease) .6s forwards}
.phero-grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:40px;align-items:center}
.phero-art{position:relative;opacity:0;animation:fadeIn 1s var(--ease) .4s forwards}
.phero-art img{filter:drop-shadow(0 30px 40px rgba(0,0,0,.55))}

/* ---------- reveal ---------- */
.js .rv{opacity:0;transform:translateY(18px);transition:opacity .75s var(--ease),transform .85s var(--ease);transition-delay:var(--d,0s)}
.js .rv.in{opacity:1;transform:none}
.js .rv-scale{transform:translateY(18px) scale(.97)}
.js .rv-scale.in{transform:none}

/* ---------- videos ---------- */
.vgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(18px,3vw,30px)}
.vcard{display:grid;gap:16px}
.vmeta{display:flex;align-items:center;gap:14px}
.vmeta .dur{display:grid;place-items:center;flex:none;width:58px;height:58px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#ffd96b,#fcbe25 55%,#d99400);color:#1d1300;font:400 1.25rem/1 var(--display);box-shadow:0 0 0 4px rgba(252,190,37,.14),0 10px 24px rgba(0,0,0,.4)}
.vmeta .dur small{display:block;font:800 .55rem/1 var(--body);letter-spacing:.04em;margin-top:2px}
.vmeta h3{font-size:1.15rem;font-weight:800;color:#fff;line-height:1.25}
.vmeta p{margin:2px 0 0;color:var(--muted);font-size:.88rem}
.player{position:relative;aspect-ratio:16/9;border-radius:var(--r-lg);overflow:hidden;background:#000;border:1px solid var(--line-2);box-shadow:0 30px 70px rgba(0,0,0,.5),0 0 0 6px rgba(12,26,18,.6);cursor:pointer;isolation:isolate}
.player img,.player video,.player iframe{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border:0}
.player img{transition:transform .8s var(--ease),filter .5s}
.player:hover img{transform:scale(1.035);filter:brightness(1.06)}
.player .pbtn{position:absolute;left:50%;top:50%;z-index:2;display:grid;place-items:center;width:84px;height:84px;margin:-42px 0 0 -42px;border-radius:50%;background:rgba(2,12,6,.55);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,.3);color:#fff;transition:transform .35s var(--spring),background .3s}
.player .pbtn:before{content:"";position:absolute;inset:-10px;border-radius:50%;border:2px solid rgba(52,204,136,.55);animation:ping 2.4s var(--ease) infinite}
.player .pbtn svg{width:30px;height:30px;margin-left:5px}
.player:hover .pbtn{transform:scale(1.1);background:var(--green)}
@keyframes ping{0%{transform:scale(.85);opacity:.9}100%{transform:scale(1.35);opacity:0}}
.player .plabel{position:absolute;left:14px;bottom:14px;z-index:2;padding:7px 12px;border-radius:999px;background:rgba(2,12,6,.75);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);font-size:.78rem;font-weight:800;color:#fff;border:1px solid rgba(255,255,255,.14)}
.player.playing{cursor:default}
.player.playing .pbtn,.player.playing .plabel,.player.playing img{display:none}
.player iframe,.player>div:not(.vlayer){position:absolute;inset:0;width:100%;height:100%;border:0}
.vlayer{position:absolute;z-index:4;display:grid;place-items:center;text-align:center}
.vlayer[hidden]{display:none!important}
.vend{inset:0;padding:20px;background:radial-gradient(500px 260px at 50% 30%,rgba(52,204,136,.22),transparent 70%),rgba(2,12,6,.96);animation:fadeIn .4s var(--ease)}
.vend-k{margin:0 0 4px;color:var(--green-hi);font-size:.82rem;font-weight:800}
.vend h3{margin:0 0 16px;font:400 clamp(1.5rem,3.4vw,2.3rem)/1 var(--display);text-transform:uppercase;color:#fff}
.vend-b{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.vend .btn{width:auto}
.vpause{left:0;right:0;top:0;bottom:54px;gap:10px;align-content:center;background:rgba(2,12,6,.88);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);cursor:pointer;color:var(--soft);font-size:.86rem;font-weight:700}
.vresume{display:grid;place-items:center;width:76px;height:76px;border-radius:50%;border:1px solid rgba(255,255,255,.3);background:var(--green);color:#03140b;cursor:pointer;box-shadow:0 0 0 8px rgba(52,204,136,.15)}
.vresume svg{width:28px;height:28px;margin-left:4px}
.vfs{position:absolute;right:10px;top:10px;z-index:5;display:grid;place-items:center;width:38px;height:38px;border-radius:10px;border:1px solid rgba(255,255,255,.2);background:rgba(2,12,6,.7);color:#fff;cursor:pointer;opacity:.75;transition:opacity .2s}
.vfs:hover{opacity:1}.vfs svg{width:18px;height:18px}
.player:fullscreen{border-radius:0;border:0}
@media (max-width:640px){.vend .btn{width:100%}.vend-b{flex-direction:column;width:100%;max-width:280px}.vpause{bottom:48px}}
.vnote{color:var(--faint);font-size:.74rem;line-height:1.45}

/* ---------- feature list ---------- */
.feat-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r-xl);overflow:hidden}
.feat{position:relative;padding:clamp(26px,3.6vw,40px);background:linear-gradient(160deg,#0a170f,#06110b);transition:background .4s}
.feat:hover{background:linear-gradient(160deg,#0d1d14,#07140c)}
.feat .big{display:block;margin-bottom:14px;font:400 clamp(2.4rem,4.6vw,3.4rem)/1 var(--display);color:var(--green-hi);letter-spacing:.01em}
.feat .big.y{color:var(--yellow)}
.feat .h3{margin-bottom:8px}
.feat p{margin:0;color:var(--muted);max-width:46ch}
.feat .ico{position:absolute;right:clamp(20px,3vw,34px);top:clamp(22px,3vw,34px);width:44px;height:44px;color:rgba(52,204,136,.35);transition:color .4s,transform .5s var(--ease)}
.feat:hover .ico{color:var(--green-hi);transform:translateY(-3px) rotate(-6deg)}

/* ---------- flow ---------- */
.flow{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;counter-reset:st}
.flow:before{content:"";position:absolute;left:6%;right:6%;top:31px;height:2px;background:linear-gradient(90deg,var(--line-2),var(--line-2));border-radius:2px}
.flow .track{position:absolute;left:6%;right:6%;top:31px;height:2px;overflow:hidden;border-radius:2px}
.flow .track:after{content:"";position:absolute;top:0;bottom:0;left:-30%;width:30%;background:linear-gradient(90deg,transparent,var(--green-hi),var(--yellow));box-shadow:0 0 12px var(--green-hi);animation:travel 3.8s var(--ease) infinite}
@keyframes travel{to{left:100%}}
.step{position:relative;text-align:center;padding:0 6px}
.step .n{position:relative;z-index:1;display:grid;place-items:center;width:64px;height:64px;margin:0 auto 18px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#123826,#08170e);border:1px solid rgba(52,204,136,.4);color:var(--green-hi);box-shadow:0 0 0 7px var(--ink),0 14px 30px rgba(0,0,0,.45)}
.step .n svg{width:26px;height:26px}
.step .n:after{counter-increment:st;content:counter(st);position:absolute;top:-4px;right:-4px;display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--yellow);color:#1d1300;font:800 .72rem var(--body)}
.step h3{font-size:1.02rem;font-weight:800;color:#fff;margin-bottom:6px}
.step p{margin:0;color:var(--muted);font-size:.9rem;line-height:1.5}

/* ---------- tiers ---------- */
.tiers{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;align-items:stretch}
.tier{--m1:#888;--m2:#333;position:relative;display:flex;flex-direction:column;border-radius:var(--r-lg);padding:1.5px;background:linear-gradient(160deg,var(--m1),rgba(255,255,255,.05) 40%,var(--m2));box-shadow:0 26px 60px rgba(0,0,0,.45);transition:transform .45s var(--ease),box-shadow .45s;transform-style:preserve-3d}
.tier:hover{transform:translateY(-6px);box-shadow:0 36px 80px rgba(0,0,0,.55),0 0 40px color-mix(in srgb,var(--m1) 18%,transparent)}
.tier-in{position:relative;flex:1;display:flex;flex-direction:column;padding:0 0 22px;border-radius:calc(var(--r-lg) - 1.5px);background:linear-gradient(180deg,#0b1710,#060f0a);overflow:hidden}
.tier .slab{position:relative;padding:26px 22px 22px;background:linear-gradient(150deg,var(--m1),var(--m2));color:#fff;overflow:hidden}
.tier .slab:before{content:"";position:absolute;inset:0;background:linear-gradient(115deg,rgba(255,255,255,.38) 0%,rgba(255,255,255,0) 32%,rgba(255,255,255,.12) 55%,rgba(255,255,255,0) 70%),repeating-linear-gradient(90deg,rgba(255,255,255,.04) 0 1px,transparent 1px 3px)}
.tier .slab:after{content:"";position:absolute;top:-50%;bottom:-50%;width:40%;left:-60%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.35),transparent);transform:skewX(-20deg);transition:left .9s var(--ease)}
.tier:hover .slab:after{left:130%}
.tier .name{position:relative;font:400 2.3rem/1 var(--display);text-transform:uppercase;letter-spacing:.02em;text-shadow:0 2px 0 rgba(0,0,0,.25),0 6px 16px rgba(0,0,0,.25)}
.tier .price{position:relative;display:flex;align-items:baseline;gap:6px;margin-top:10px;font:400 2.9rem/1 var(--display);text-shadow:0 3px 14px rgba(0,0,0,.3)}
.tier .price small{font:800 .78rem var(--body);opacity:.85;text-shadow:none}
.tier .rows{display:grid;gap:0;padding:8px 22px 0}
.tier .row{display:flex;justify-content:space-between;gap:10px;padding:12px 0;border-bottom:1px solid var(--line);font-size:.9rem}
.tier .row span{color:var(--muted)}
.tier .row b{text-align:right}
.tier .row:last-child{border-bottom:0}
.tier .no{color:var(--faint)!important;font-weight:700}
.tier .btn{margin:16px 22px 0;min-height:48px;font-size:.92rem}
.tier.basic{--m1:var(--basic-1);--m2:var(--basic-2)}
.tier.prem{--m1:var(--prem-1);--m2:var(--prem-2)}
.tier.biz{--m1:var(--biz-1);--m2:var(--biz-2)}
.tier.biz .slab{color:#0f1418}
.tier.biz .slab .name,.tier.biz .slab .price{text-shadow:0 1px 0 rgba(255,255,255,.4)}
.tier.gold{--m1:var(--gold-1);--m2:var(--gold-2)}
.tier.gold .slab{color:#2a1700}
.tier.gold .slab .name,.tier.gold .slab .price{text-shadow:0 1px 0 rgba(255,255,255,.35)}
.tier.pop{transform:translateY(-10px)}
.tier.pop:hover{transform:translateY(-16px)}
.tier .flag{position:absolute;right:14px;top:14px;z-index:2;padding:6px 11px;border-radius:999px;background:var(--red);color:#fff;font-size:.72rem;font-weight:800;box-shadow:0 6px 16px rgba(229,72,77,.45);transform:rotate(3deg)}
.tier-note{display:flex;flex-wrap:wrap;gap:10px 26px;justify-content:center;margin-top:30px;color:var(--muted);font-size:.9rem}
.tier-note span{display:inline-flex;align-items:center;gap:8px}
.tier-note svg{width:16px;height:16px;color:var(--green-hi)}

/* ---------- split / media ---------- */
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,5vw,64px);align-items:center}
.split.rev>:first-child{order:2}
.media{position:relative;border-radius:var(--r-xl);overflow:hidden;border:1px solid var(--line-2);box-shadow:0 30px 70px rgba(0,0,0,.5)}
.media img{width:100%;transition:transform 1.2s var(--ease)}
.media:hover img{transform:scale(1.03)}
.media .cap{position:absolute;left:14px;bottom:14px;right:14px;padding:10px 14px;border-radius:12px;background:rgba(2,12,6,.78);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);font-size:.82rem;font-weight:700;color:var(--soft);border:1px solid rgba(255,255,255,.08)}
.media-duo{position:relative;padding:0 0 18% 0}
.media-duo .media:first-child{width:86%}
.media-duo .media:last-child{position:absolute;right:0;bottom:0;width:50%;border:4px solid var(--ink);box-shadow:0 30px 70px rgba(0,0,0,.6)}
.checks{list-style:none;margin:22px 0 30px;padding:0;display:grid;gap:12px}
.checks li{position:relative;padding-left:38px;color:var(--soft);line-height:1.5}
.checks li:before{content:"";position:absolute;left:0;top:1px;width:24px;height:24px;border-radius:50%;background:rgba(52,176,112,.16) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2334cc88' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/13px no-repeat;border:1px solid rgba(52,176,112,.35)}
.checks li b{color:#fff}

/* ---------- rewards ---------- */
.comm{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:26px 0}
.comm div{position:relative;padding:16px 14px;border-radius:var(--r-md);border:1px solid var(--line);background:rgba(8,18,12,.7);text-align:center;overflow:hidden}
.comm div:before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:linear-gradient(90deg,var(--m1),var(--m2))}
.comm span{display:block;color:var(--muted);font-size:.78rem;font-weight:700}
.comm b{display:block;margin-top:4px;font:400 2rem/1 var(--display);color:#fff}
.comm small{display:block;margin-top:6px;color:var(--yellow);font-size:.74rem;font-weight:700}
.calc{padding:clamp(22px,3vw,32px)}
.calc h3{margin-bottom:6px}
.calc .fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin:18px 0}
.field{display:grid;gap:7px}
.field label{color:var(--soft);font-size:.82rem;font-weight:700}
.field select,.field input[type=number]{width:100%;min-height:48px;padding:0 14px;border-radius:12px;border:1px solid var(--line-2);background:#06110b;color:#fff;font:700 1rem var(--body);appearance:none;-webkit-appearance:none}
.field select{background:#06110b url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2334cc88' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") right 12px center/16px no-repeat;padding-right:40px}
.field select:focus,.field input:focus{outline:none;border-color:var(--green-hi);box-shadow:0 0 0 3px rgba(52,204,136,.18)}
.stepper{display:flex;align-items:center;border:1px solid var(--line-2);border-radius:12px;background:#06110b;overflow:hidden}
.stepper button{width:48px;min-height:46px;border:0;background:transparent;color:var(--green-hi);font:800 1.3rem var(--body);cursor:pointer;transition:background .2s}
.stepper button:hover{background:rgba(52,176,112,.12)}
.stepper output{flex:1;text-align:center;font:800 1.1rem var(--body)}
.toggle{display:flex;align-items:center;gap:12px;color:var(--soft);font-size:.9rem;font-weight:700;cursor:pointer;user-select:none}
.toggle input{position:absolute;opacity:0}
.toggle .sw{position:relative;flex:none;width:46px;height:26px;border-radius:99px;background:#183024;border:1px solid var(--line-2);transition:background .25s}
.toggle .sw:after{content:"";position:absolute;left:3px;top:3px;width:18px;height:18px;border-radius:50%;background:#cfe;transition:transform .3s var(--spring)}
.toggle input:checked+.sw{background:var(--green)}
.toggle input:checked+.sw:after{transform:translateX(20px)}
.toggle input:focus-visible+.sw{outline:2px solid var(--green-hi);outline-offset:3px}
.result{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:18px}
.result div{padding:14px;border-radius:14px;background:rgba(2,12,6,.6);border:1px solid var(--line)}
.result span{display:block;color:var(--muted);font-size:.76rem;font-weight:700}
.result b{display:block;margin-top:4px;font:400 1.7rem/1.1 var(--display);color:#fff;letter-spacing:.01em}
.result .ok b{color:var(--green-hi)}
.result .warn b{color:var(--yellow)}
.meter{height:10px;margin-top:16px;border-radius:99px;background:#0f2118;overflow:hidden;border:1px solid var(--line)}
.meter i{display:block;height:100%;width:0;border-radius:99px;background:linear-gradient(90deg,var(--green),var(--green-hi),var(--yellow));transition:width .6s var(--ease)}
.fine{margin-top:14px;color:var(--faint);font-size:.78rem;line-height:1.5}

/* ---------- special edition band ---------- */
.se{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:clamp(24px,5vw,60px);align-items:center;padding:clamp(26px,4vw,48px);overflow:hidden}
.se:before{content:"";position:absolute;inset:0;border-radius:inherit;background:radial-gradient(600px 300px at 20% 50%,rgba(229,72,77,.16),transparent 70%);pointer-events:none}
.se .art{position:relative;perspective:1000px}
.se .art img{filter:drop-shadow(0 30px 40px rgba(0,0,0,.6))}
.badge{display:inline-flex;align-items:center;gap:8px;padding:6px 12px;border-radius:999px;font-size:.78rem;font-weight:800}
.badge svg{width:14px;height:14px;flex:none}
.badge.red{background:rgba(229,72,77,.14);color:#ff8a8d;border:1px solid rgba(229,72,77,.35)}
.badge.green{background:rgba(52,176,112,.14);color:var(--green-hi);border:1px solid rgba(52,176,112,.35)}
.badge.gold{background:rgba(252,190,37,.12);color:var(--yellow);border:1px solid rgba(252,190,37,.35)}

/* ---------- steps (sequence) ---------- */
.steps3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;counter-reset:s3}
.s3{position:relative;padding:28px 26px 26px;border-radius:var(--r-lg);border:1px solid var(--line);background:linear-gradient(170deg,#0b1810,#06100a);overflow:hidden;transition:border-color .3s,transform .4s var(--ease)}
.s3:hover{border-color:rgba(52,204,136,.35);transform:translateY(-4px)}
.s3:before{counter-increment:s3;content:counter(s3);position:absolute;right:16px;top:-14px;font:400 7rem/1 var(--display);color:rgba(52,204,136,.07)}
.s3 .no{display:inline-grid;place-items:center;width:40px;height:40px;margin-bottom:16px;border-radius:12px;background:var(--yellow);color:#1d1300;font:400 1.3rem/1 var(--display)}
.s3 h3{margin-bottom:8px}
.s3 p{margin:0;color:var(--muted)}

/* ---------- mtg help band ---------- */
.help{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:clamp(18px,3vw,32px);align-items:center;padding:clamp(22px,3.4vw,36px)}
.help .face{position:relative;width:88px;height:88px}
.help .face img{width:88px;height:88px;border-radius:50%;object-fit:cover;border:2px solid rgba(252,190,37,.6);box-shadow:0 0 0 6px rgba(252,190,37,.08)}
.help .face:after{content:"";position:absolute;right:3px;bottom:5px;width:16px;height:16px;border-radius:50%;background:var(--green-hi);border:3px solid var(--panel)}
.help h2{font:400 clamp(1.6rem,3vw,2.2rem)/1.05 var(--display);text-transform:uppercase;color:#fff;margin-bottom:6px}
.help p{margin:0;color:var(--muted)}
.btn-wa{color:#032e14;background:linear-gradient(180deg,#5cf08f,#25d366 55%,#1aa851);box-shadow:0 1px 0 rgba(255,255,255,.5) inset,0 6px 0 #0d6b31,0 14px 30px rgba(0,0,0,.45)}
.btn-wa:hover{transform:translateY(-2px);filter:brightness(1.05)}
.btn-wa:active{transform:translateY(4px);box-shadow:0 2px 0 #0d6b31}

/* ---------- faq ---------- */
.faq{display:grid;gap:10px}
.qa{border:1px solid var(--line);border-radius:var(--r-md);background:rgba(8,18,12,.65);transition:border-color .3s,background .3s}
.qa[open]{border-color:rgba(52,204,136,.3);background:rgba(12,26,18,.85)}
.qa summary{position:relative;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 20px;cursor:pointer;list-style:none;font-weight:800;color:#fff;line-height:1.4}
.qa summary::-webkit-details-marker{display:none}
.qa summary .pm{position:relative;flex:none;width:28px;height:28px;border-radius:50%;border:1px solid var(--line-2);transition:transform .4s var(--ease),background .3s}
.qa summary .pm:before,.qa summary .pm:after{content:"";position:absolute;left:50%;top:50%;width:11px;height:2px;margin:-1px 0 0 -5.5px;border-radius:2px;background:var(--green-hi);transition:transform .35s var(--ease)}
.qa summary .pm:after{transform:rotate(90deg)}
.qa[open] summary .pm{transform:rotate(180deg);background:rgba(52,176,112,.15)}
.qa[open] summary .pm:after{transform:rotate(0)}
.qa .ans{padding:0 20px 20px;color:var(--soft)}
.qa .ans p:last-child{margin:0}
.qa .ans ul{margin:0 0 1em;padding-left:20px}
.faq-cols{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(24px,5vw,60px);align-items:start}
.faq-cols .sticky{position:sticky;top:100px}

/* ---------- final cta ---------- */
.final{position:relative;text-align:center;padding:clamp(44px,7vw,84px) clamp(20px,4vw,60px);overflow:hidden}
.final:before{content:"";position:absolute;inset:0;background:radial-gradient(600px 280px at 50% 0%,rgba(52,204,136,.2),transparent 70%);pointer-events:none}
.final h2{font:400 clamp(2.8rem,7vw,5.6rem)/.95 var(--display);text-transform:uppercase;color:#fff;margin-bottom:16px}
.final h2 .hap{color:var(--green-hi)}
.final .lead{margin:0 auto 30px}
.final .btn-row{justify-content:center}
.final .mini{position:relative;width:min(420px,80%);margin:0 auto 26px;animation:float 6s ease-in-out infinite}

/* ---------- tables ---------- */
.tbl-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r-lg);background:rgba(6,16,10,.75);-webkit-overflow-scrolling:touch}
table.tbl{width:100%;border-collapse:collapse;min-width:640px;font-size:.92rem}
.tbl th,.tbl td{padding:14px 16px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}
.tbl thead th{position:sticky;top:0;background:#0b1a12;color:var(--soft);font-size:.8rem;font-weight:800}
.tbl tbody tr{transition:background .2s}
.tbl tbody tr:hover{background:rgba(52,176,112,.05)}
.tbl tbody tr:last-child td{border-bottom:0}
.tbl td b{color:#fff}
.tbl .num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.tbl .dot{display:inline-block;width:10px;height:10px;margin-right:8px;border-radius:3px;background:linear-gradient(135deg,var(--m1),var(--m2));vertical-align:-1px}
.tbl tr.basic{--m1:var(--basic-1);--m2:var(--basic-2)}.tbl tr.prem{--m1:var(--prem-1);--m2:var(--prem-2)}.tbl tr.biz{--m1:var(--biz-1);--m2:var(--biz-2)}.tbl tr.gold{--m1:var(--gold-1);--m2:var(--gold-2)}

/* ---------- info blocks ---------- */
.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.box{position:relative;padding:clamp(22px,3vw,30px);border:1px solid var(--line);border-radius:var(--r-lg);background:linear-gradient(165deg,#0b1810,#06100a)}
.box .h3{margin-bottom:8px}
.box p{color:var(--muted);margin-bottom:0}
.box p+p{margin-top:.8em}
.box .ico{display:grid;place-items:center;width:46px;height:46px;margin-bottom:16px;border-radius:14px;background:rgba(52,176,112,.1);border:1px solid rgba(52,176,112,.22);color:var(--green-hi)}
.box .ico svg{width:22px;height:22px}
.box.warn{border-color:rgba(252,190,37,.28);background:linear-gradient(165deg,#15140a,#0a0d07)}
.box.warn .ico{background:rgba(252,190,37,.1);border-color:rgba(252,190,37,.3);color:var(--yellow)}
.box ul{margin:12px 0 0;padding-left:20px;color:var(--soft)}
.box li{margin-bottom:6px}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.chip{display:inline-flex;align-items:center;gap:7px;padding:8px 13px;border-radius:999px;border:1px solid var(--line-2);background:rgba(12,26,18,.7);font-size:.84rem;font-weight:700;color:var(--soft)}
.chip.hi{border-color:rgba(52,204,136,.45);color:#fff;background:rgba(52,176,112,.12)}
.chip i{width:8px;height:8px;border-radius:50%;background:var(--green-hi)}
.prose{max-width:72ch}
.prose h2{font:400 clamp(1.9rem,3.6vw,2.6rem)/1.02 var(--display);text-transform:uppercase;color:#fff;margin:1.6em 0 .5em}
.prose h3{font-size:1.15rem;font-weight:800;color:#fff;margin:1.4em 0 .4em}
.prose p,.prose li{color:var(--soft)}
.prose ul,.prose ol{padding-left:22px}
.prose li{margin-bottom:.45em}
.note{display:flex;gap:14px;padding:16px 18px;border-radius:var(--r-md);border:1px solid rgba(252,190,37,.25);background:rgba(252,190,37,.05);color:var(--soft);font-size:.92rem}
.note svg{flex:none;width:20px;height:20px;color:var(--yellow);margin-top:2px}
.note.g{border-color:rgba(52,176,112,.25);background:rgba(52,176,112,.05)}
.note.g svg{color:var(--green-hi)}

/* ranks */
.ranks{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.rank{position:relative;padding:22px;border-radius:var(--r-lg);border:1px solid var(--line);background:linear-gradient(170deg,#0b1810,#06100a);overflow:hidden}
.rank:before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:linear-gradient(180deg,var(--m1),var(--m2))}
.rank .top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}
.rank .stars{color:var(--yellow);letter-spacing:2px;font-size:1rem}
.rank .lv{display:grid;place-items:center;min-width:54px;height:54px;padding:0 8px;border-radius:50%;background:#fff;color:#0b1a12;font:400 1.5rem/1 var(--display);box-shadow:0 0 0 4px rgba(255,255,255,.08)}
.rank .lv small{display:block;font:800 .5rem/1 var(--body);margin-top:2px}
.rank h3{font-size:1.1rem;font-weight:800;color:#fff}
.rank .card-lv{color:var(--muted);font-size:.84rem;font-weight:700}
.rank ul{margin:10px 0 0;padding-left:18px;color:var(--soft);font-size:.9rem}
.rank li{margin-bottom:4px}
.rank.basic{--m1:var(--basic-1);--m2:var(--basic-2)}.rank.prem{--m1:var(--prem-1);--m2:var(--prem-2)}.rank.biz{--m1:var(--biz-1);--m2:var(--biz-2)}.rank.gold{--m1:var(--gold-1);--m2:var(--gold-2)}

/* guide steps */
.guide{display:grid;gap:18px;counter-reset:g}
.gstep{display:grid;grid-template-columns:72px minmax(0,1fr);gap:22px;padding:clamp(20px,3vw,30px);border:1px solid var(--line);border-radius:var(--r-lg);background:linear-gradient(165deg,#0b1810,#06100a)}
.gstep .gn{position:relative;display:grid;place-items:center;width:64px;height:64px;border-radius:18px;background:linear-gradient(160deg,#164a31,#0a2116);border:1px solid rgba(52,204,136,.4);color:#fff;font:400 2rem/1 var(--display);box-shadow:0 12px 26px rgba(0,0,0,.4)}
.gstep h2{font:400 clamp(1.5rem,2.6vw,2rem)/1.05 var(--display);text-transform:uppercase;color:#fff;margin-bottom:10px}
.gstep p,.gstep li{color:var(--soft)}
.gstep ol,.gstep ul{padding-left:20px;margin:10px 0}
.gstep li{margin-bottom:6px}
.gstep>div>*:last-child{margin-bottom:0}
.split.guide-split{grid-template-columns:minmax(0,1.45fr) minmax(0,.75fr);align-items:start}
.gstep .path{display:inline-flex;flex-wrap:wrap;align-items:center;gap:6px;padding:4px 10px;border-radius:8px;background:rgba(52,176,112,.1);border:1px solid rgba(52,176,112,.25);color:#cfffe6;font-size:.84rem;font-weight:700}

/* dashboard legend */
.legend{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.lg{display:flex;gap:14px;align-items:flex-start;padding:16px;border-radius:var(--r-md);border:1px solid var(--line);background:rgba(8,18,12,.7)}
.lg i{flex:none;width:34px;height:34px;border-radius:10px;box-shadow:inset 0 1px 0 rgba(255,255,255,.3)}
.lg b{display:block;color:#fff;margin-bottom:2px}
.lg span{color:var(--muted);font-size:.9rem;line-height:1.5}

/* video hub */
.vhub{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
.vtile{display:grid;gap:14px;padding:14px 14px 20px;border:1px solid var(--line);border-radius:var(--r-xl);background:linear-gradient(170deg,#0b1810,#06100a);transition:border-color .3s,transform .45s var(--ease)}
.vtile:hover{border-color:rgba(52,204,136,.35);transform:translateY(-4px)}
.vtile .player{border-radius:18px;box-shadow:none}
.vtile .txt{padding:0 8px}
.vtile h2{font-size:1.2rem;font-weight:800;color:#fff;margin-bottom:6px}
.vtile p{color:var(--muted);margin-bottom:12px}

/* downloads */
.dl{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.doc{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:var(--r-lg);background:linear-gradient(170deg,#0b1810,#06100a);overflow:hidden;transition:transform .45s var(--ease),border-color .3s}
.doc:hover{transform:translateY(-5px);border-color:rgba(52,204,136,.35)}
.doc .thumb{position:relative;aspect-ratio:4/3;overflow:hidden;background:#0e1d15}
.doc .thumb img{width:100%;height:100%;object-fit:cover;object-position:top;transition:transform 1s var(--ease)}
.doc:hover .thumb img{transform:scale(1.04)}
.doc .thumb .ext{position:absolute;right:12px;top:12px;padding:5px 10px;border-radius:8px;background:var(--red);color:#fff;font-size:.72rem;font-weight:800}
.doc .body{flex:1;display:flex;flex-direction:column;gap:8px;padding:20px}
.doc h2{font-size:1.1rem;font-weight:800;color:#fff}
.doc p{color:var(--muted);font-size:.92rem;margin:0}
.doc .meta{color:var(--faint);font-size:.8rem;font-weight:700}
.doc .btn{margin-top:auto;align-self:flex-start;min-height:46px;font-size:.9rem}

/* ---------- footer ---------- */
.ftr{margin-top:clamp(40px,6vw,70px);padding:50px 0 34px;border-top:1px solid var(--line);background:linear-gradient(180deg,transparent,rgba(0,0,0,.35))}
.ftr-top{display:grid;grid-template-columns:minmax(0,1.2fr) repeat(3,minmax(0,.8fr));gap:30px}
.ftr .logo img{width:170px;margin-bottom:12px}
.ftr .tag{font:400 1.3rem/1 var(--display);letter-spacing:.06em;color:#fff;margin-bottom:14px}
.ftr .tag em{font-style:normal;color:var(--green-hi)}
.ftr p{color:var(--muted);font-size:.86rem;line-height:1.6}
.ftr h3{font-size:.86rem;font-weight:800;color:#fff;margin-bottom:12px}
.ftr ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.ftr ul a{color:var(--muted);font-size:.88rem;transition:color .2s}
.ftr ul a:hover{color:var(--green-hi)}
.disc{margin-top:34px;padding:18px 20px;border:1px solid var(--line);border-radius:var(--r-md);background:rgba(6,16,10,.6);color:var(--faint);font-size:.8rem;line-height:1.6}
.disc a{color:var(--muted);text-decoration:underline;text-underline-offset:2px}
.ftr-bot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;margin-top:22px;color:var(--faint);font-size:.8rem}
.ftr-bot .sig{color:var(--muted)}

/* back to top */
.totop{position:fixed;right:18px;bottom:18px;z-index:80;display:grid;place-items:center;width:54px;height:54px;border-radius:50%;border:0;background:rgba(8,18,12,.88);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);color:#fff;cursor:pointer;box-shadow:0 14px 34px rgba(0,0,0,.5);opacity:0;transform:translateY(16px) scale(.9);pointer-events:none;transition:opacity .35s,transform .45s var(--spring)}
.totop.on{opacity:1;transform:none;pointer-events:auto}
.totop:hover{transform:translateY(-3px)}
.totop svg.ring{position:absolute;inset:0;width:54px;height:54px;transform:rotate(-90deg)}
.totop svg.ring circle{fill:none;stroke-width:2.5}
.totop svg.ring .bg{stroke:rgba(150,255,200,.12)}
.totop svg.ring .fg{stroke:var(--green-hi);stroke-linecap:round;stroke-dasharray:157;stroke-dashoffset:calc(157 - 157*var(--p,0))}
.totop .arr{width:20px;height:20px}
.mobile-cta{display:none}

/* ---------- responsive ---------- */
@media (max-width:1060px){
  .menu-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tiers{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tier.pop{transform:none}.tier.pop:hover{transform:translateY(-6px)}
  .facts{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fact:nth-child(3){border-left:0}
  .fact:nth-child(n+3){border-top:1px solid var(--line)}
  .ftr-top{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ranks{grid-template-columns:repeat(2,minmax(0,1fr))}
  .dl{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:860px){
  .hero-grid,.phero-grid,.split,.split.guide-split,.se,.faq-cols{grid-template-columns:minmax(0,1fr)}
  aside.rv[style*=sticky]{position:static!important}
  .split.rev>:first-child{order:0}
  .stage{max-width:560px;margin:8px auto 0;width:100%}
  .phero-art{max-width:460px}
  .vgrid,.vhub,.feat-grid,.grid2,.legend{grid-template-columns:minmax(0,1fr)}
  .flow{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:34px}
  .flow:before,.flow .track{display:none}
  .steps3,.grid3{grid-template-columns:minmax(0,1fr)}
  .comm{grid-template-columns:repeat(2,minmax(0,1fr))}
  .help{grid-template-columns:auto minmax(0,1fr)}
  .help .btn{grid-column:1/-1;justify-self:start}
  .faq-cols .sticky{position:static}
  .brand .by{display:none}
}
@media (max-width:640px){
  body{font-size:15.5px}
  .hdr-act .btn-sm{display:none}
  .brand img{width:126px}.hdr.scrolled .brand img{width:118px}
  .menu-grid{grid-template-columns:minmax(0,1fr)}
  .menu{max-height:calc(100vh - 70px);overflow-y:auto}
  .mlink{padding:11px 12px}
  .hero h1{font-size:clamp(3rem,15.5vw,4.6rem)}
  .facts{grid-template-columns:minmax(0,1fr)}
  .fact{border-left:0!important;border-top:1px solid var(--line)}
  .fact:first-child{border-top:0}
  .tiers,.ranks,.dl,.calc .fields{grid-template-columns:minmax(0,1fr)}
  .result{grid-template-columns:minmax(0,1fr)}
  .btn{width:100%;white-space:normal;text-align:center;line-height:1.2;padding:12px 20px}
  .btn-row{flex-direction:column;align-items:stretch}
  .tagpill{font-size:.74rem;padding:8px 11px}.tagpill b{font-size:.84rem}
  .tagpill.t1{bottom:6%}
  .gstep{grid-template-columns:minmax(0,1fr);gap:14px}
  .gstep .gn{width:52px;height:52px;font-size:1.6rem}
  .media-duo .media:first-child{width:92%}
  .ftr-top{grid-template-columns:minmax(0,1fr)}
  .totop{right:14px;bottom:84px;width:48px;height:48px}
  .totop svg.ring{width:48px;height:48px}
  .mobile-cta{position:fixed;left:12px;right:12px;bottom:12px;z-index:85;display:flex;transform:translateY(140%);transition:transform .45s var(--ease)}
  .mobile-cta.on{transform:none}
  .mobile-cta .btn{min-height:54px;box-shadow:0 1px 0 rgba(255,255,255,.45) inset,0 5px 0 #146b41,0 18px 40px rgba(0,0,0,.6)}
  .player .pbtn{width:68px;height:68px;margin:-34px 0 0 -34px}
}
@media (prefers-reduced-motion:reduce){
  *,*:before,*:after{animation-duration:.001ms!important;animation-delay:0s!important;animation-iteration-count:1!important;transition-duration:.001ms!important;transition-delay:0s!important;scroll-behavior:auto!important}
  .rv{opacity:1;transform:none}
  .hero h1 .ln>span,.phero .ln>span{transform:none}
  ::view-transition-old(root),::view-transition-new(root){animation:none}
}
@media print{.hdr,.totop,.mobile-cta,.progress,.scrim{display:none!important}body{background:#fff;color:#000}}

/* range sliders (rewards estimator) */
.range{-webkit-appearance:none;appearance:none;width:100%;height:8px;border-radius:99px;background:linear-gradient(90deg,var(--green-hi) var(--k,50%),#163024 var(--k,50%));outline:none;margin:6px 0}
.range::-webkit-slider-thumb{-webkit-appearance:none;width:26px;height:26px;border-radius:50%;background:#fff;border:4px solid var(--green);box-shadow:0 4px 14px rgba(0,0,0,.5),0 0 0 6px rgba(52,204,136,.15);cursor:grab;transition:transform .2s var(--spring)}
.range::-webkit-slider-thumb:active{transform:scale(1.15);cursor:grabbing}
.range::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:#fff;border:4px solid var(--green);box-shadow:0 4px 14px rgba(0,0,0,.5);cursor:grab}
.range:focus-visible{box-shadow:0 0 0 3px rgba(52,204,136,.3)}

/* =====================================================================
   CARD GUIDE LAYOUT (inner pages): fixed left sidebar, slim top bar
   ===================================================================== */
::view-transition-group(bv-side),::view-transition-group(bv-top){animation:none}
::view-transition-old(bv-side),::view-transition-new(bv-side),::view-transition-old(bv-top),::view-transition-new(bv-top){animation:none}
.dash{display:grid;grid-template-columns:276px minmax(0,1fr);min-height:100vh}
.side{position:sticky;top:0;height:100vh;height:100dvh;display:flex;flex-direction:column;gap:4px;overflow-y:auto;overscroll-behavior:contain;padding:20px 14px 16px;border-right:1px solid var(--line);background:linear-gradient(180deg,rgba(7,20,12,.97),rgba(3,12,7,.99));view-transition-name:bv-side;scrollbar-width:thin;scrollbar-color:#1c3a2a transparent;z-index:110}
.side-top{display:grid;gap:4px;padding:2px 8px 14px;border-bottom:1px solid var(--line);margin-bottom:4px}
.sbrand img{width:136px;height:auto}
.sby{color:var(--muted);font-size:.76rem;font-weight:700}
.sgroup{display:grid;gap:2px}
.slabel{margin:10px 10px 4px;color:var(--faint);font-size:.74rem;font-weight:800;letter-spacing:.02em}
.snav{position:relative;display:flex;align-items:center;gap:11px;padding:6px 10px;border:1px solid transparent;border-radius:12px;color:var(--soft);transition:background .2s,border-color .2s,color .2s}
.snav .ic{flex:none;display:grid;place-items:center;width:32px;height:32px;border-radius:9px;background:rgba(52,176,112,.08);color:var(--green-hi);transition:background .2s,transform .3s var(--spring)}
.snav .ic svg{width:17px;height:17px}
.snav .tx{min-width:0}
.snav b{display:block;font-size:.88rem;line-height:1.25;color:var(--text)}
.snav small{display:block;color:var(--faint);font-size:.72rem;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.snav:hover{background:rgba(52,176,112,.06);border-color:rgba(52,176,112,.16)}
.snav:hover .ic{transform:scale(1.06)}
.snav[aria-current="page"]{background:linear-gradient(90deg,rgba(52,176,112,.16),rgba(52,176,112,.04));border-color:rgba(52,204,136,.3)}
.snav[aria-current="page"]:before{content:"";position:absolute;left:-14px;top:9px;bottom:9px;width:3px;border-radius:0 3px 3px 0;background:var(--green-hi);box-shadow:0 0 10px var(--green-hi)}
.snav[aria-current="page"] .ic{background:var(--green);color:#03140b}
.snav[aria-current="page"] small{color:var(--muted)}
.side-bot{display:grid;gap:8px;margin-top:auto;padding-top:14px;border-top:1px solid var(--line)}
.side-bot .sorder{width:100%;margin-bottom:4px}
.srow{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.slink{display:flex;align-items:center;justify-content:center;gap:6px;min-height:36px;padding:0 8px;border:1px solid var(--line);border-radius:10px;color:var(--muted);font-size:.74rem;font-weight:700;white-space:nowrap;transition:border-color .2s,color .2s,background .2s}
.slink svg{width:14px;height:14px;flex:none}
.slink:hover{color:#fff;border-color:rgba(52,204,136,.4);background:rgba(52,176,112,.06)}
.dmain{min-width:0;display:flex;flex-direction:column}
.dmain main{flex:1}
.dtop{position:sticky;top:0;z-index:60;display:flex;align-items:center;gap:14px;min-height:64px;padding:0 clamp(16px,3vw,32px);border-bottom:1px solid var(--line);background:rgba(2,12,6,.82);backdrop-filter:blur(16px) saturate(1.3);-webkit-backdrop-filter:blur(16px) saturate(1.3);view-transition-name:bv-top}
.dtop .menu-btn{display:none;min-height:40px;padding:0 14px}
.dcrumb{display:flex;align-items:center;gap:8px;min-width:0;color:var(--muted);font-size:.86rem;font-weight:700}
.dcrumb a{color:var(--muted);transition:color .2s}.dcrumb a:hover{color:var(--green-hi)}
.dcrumb svg{width:13px;height:13px;flex:none;color:var(--faint)}
.dcrumb span{color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dtop-act{margin-left:auto;display:flex;gap:10px}
.dash .wrap{width:min(1080px,100% - var(--gut)*2)}
.dash .phero{padding:clamp(28px,4.5vw,54px) 0 clamp(22px,3vw,38px)}
.dash .phero .crumbs{display:none}
.dash .phero h1{font-size:clamp(2.6rem,5.4vw,4.4rem);margin-bottom:16px}
.dash .phero-grid{grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr)}
.dash .sec{padding:clamp(40px,6vw,76px) 0}
.dash .sec-tight{padding:clamp(28px,4.5vw,52px) 0}
.dash .h2{font-size:clamp(1.9rem,3.8vw,2.9rem)}
.dash .tiers{grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.dash .tier .name{font-size:1.9rem}.dash .tier .price{font-size:2.4rem}
.dash .tier .slab{padding:20px 16px 18px}.dash .tier .rows{padding:6px 16px 0}.dash .tier .btn{margin:14px 16px 0}
.dash .tier .row{font-size:.84rem}
.pager-sec{padding-top:8px!important}
.pager{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.pg{position:relative;display:grid;gap:2px;padding:18px 22px;border:1px solid var(--line);border-radius:var(--r-md);background:linear-gradient(165deg,#0b1810,#06100a);transition:border-color .25s,transform .3s var(--ease),background .25s}
.pg small{color:var(--faint);font-size:.76rem;font-weight:800}
.pg b{font-size:1.02rem;color:#fff}
.pg.next{text-align:right}
.pg:hover{border-color:rgba(52,204,136,.4);transform:translateY(-2px);background:linear-gradient(165deg,#0e1f15,#07130c)}
.pg.prev:before,.pg.next:after{position:absolute;top:50%;transform:translateY(-50%);color:var(--green-hi);font-size:1.3rem;font-weight:800;transition:transform .3s var(--ease)}
.pg.prev{padding-left:48px}.pg.prev:before{content:"‹";left:20px}
.pg.next{padding-right:48px}.pg.next:after{content:"›";right:20px}
.pg.prev:hover:before{transform:translate(-4px,-50%)}.pg.next:hover:after{transform:translate(4px,-50%)}
.dfoot{padding:10px 0 34px;border-top:1px solid var(--line);margin-top:20px}
.dfoot .disc{margin-top:22px}

/* landing: learn more */
.hdr-act .learn-btn svg{width:16px;height:16px}
.learnband{display:grid;grid-template-columns:minmax(0,1.3fr) auto;gap:26px;align-items:center;padding:clamp(24px,3.6vw,40px)}
.learnband:before{content:"";position:absolute;inset:0;border-radius:inherit;background:radial-gradient(500px 220px at 90% 50%,rgba(52,204,136,.14),transparent 70%);pointer-events:none}

/* overview tiles */
.ggrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.gtile{display:flex;flex-direction:column;gap:6px;padding:20px;border:1px solid var(--line);border-radius:18px;background:linear-gradient(165deg,#0c1a12,#06100a);transition:transform .35s var(--ease),border-color .25s,box-shadow .35s}
.gtile:hover{transform:translateY(-4px);border-color:rgba(52,204,136,.38);box-shadow:0 22px 50px rgba(0,0,0,.4)}
.gic{display:grid;place-items:center;width:44px;height:44px;margin-bottom:6px;border-radius:13px;background:rgba(52,176,112,.1);border:1px solid rgba(52,176,112,.22);color:var(--green-hi)}
.gic svg{width:21px;height:21px}
.gg{color:var(--green-hi);font-size:.74rem;font-weight:800}
.gtile b{font-size:1.06rem;color:#fff}
.gtile p{margin:0 0 6px;color:var(--muted);font-size:.86rem;line-height:1.5}
.gtile .go{margin-top:auto;display:inline-flex;align-items:center;gap:6px;color:var(--green-hi);font-size:.84rem;font-weight:800}
.gtile .go svg{width:14px;height:14px;transition:transform .3s var(--ease)}
.gtile:hover .go svg{transform:translateX(4px)}
.docband{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:18px;padding:clamp(20px,3vw,30px)}
.docband .btn-row{gap:10px}
.docband .btn{min-height:46px;font-size:.88rem}

/* presentation playlist */
.vlib{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:24px;align-items:start}
.vstage{min-width:0}
.vpanel.off{display:none}
.vpanel{animation:fadeUp .5s var(--ease)}
.vhead{display:grid;gap:8px;justify-items:start;margin:20px 0 4px}
.vhead h2{font-size:clamp(1.3rem,2.4vw,1.7rem);font-weight:800;color:#fff;line-height:1.2}
.vhead p{margin:0}
.vsum{margin-top:18px;align-items:start;gap:clamp(20px,3vw,36px)}
.vsum .prose h3:first-child{margin-top:0}
.vlist{position:sticky;top:84px;display:grid;gap:10px}
.vlist .slabel{margin:0 4px 2px}
.vitem{display:grid;grid-template-columns:118px minmax(0,1fr);gap:12px;align-items:center;width:100%;padding:8px;border:1px solid var(--line);border-radius:14px;background:rgba(8,18,12,.75);color:inherit;font:inherit;text-align:left;cursor:pointer;transition:border-color .25s,background .25s,transform .3s var(--ease)}
.vitem:hover{border-color:rgba(52,204,136,.3);transform:translateX(2px)}
.vitem[aria-current="true"]{border-color:rgba(52,204,136,.55);background:rgba(52,176,112,.11)}
.vthumb{position:relative;display:block;aspect-ratio:16/9;border-radius:9px;overflow:hidden;background:#000}
.vthumb img{width:100%;height:100%;object-fit:cover}
.vdur{position:absolute;right:5px;bottom:5px;padding:2px 6px;border-radius:6px;background:rgba(0,0,0,.75);color:#fff;font-size:.68rem;font-weight:800}
.vitem[aria-current="true"] .vthumb:after{content:"";position:absolute;inset:0;border:2px solid var(--green-hi);border-radius:9px}
.vtx b{display:block;font-size:.86rem;line-height:1.3;color:#fff}
.vtx small{display:block;margin-top:2px;color:var(--muted);font-size:.74rem}
.vtut{display:flex;gap:10px;align-items:center;padding:14px;border:1px dashed rgba(52,204,136,.3);border-radius:14px;color:var(--soft);transition:border-color .2s,background .2s}
.vtut:hover{border-color:rgba(52,204,136,.6);background:rgba(52,176,112,.06)}
.vtut svg{flex:none;width:22px;height:22px;color:var(--green-hi)}
.vtut b{display:block;font-size:.84rem;color:#fff}.vtut small{color:var(--muted);font-size:.74rem}

/* tutorials */
.featured{display:grid;gap:14px;padding:clamp(18px,3vw,28px);border:1px solid rgba(52,204,136,.22);border-radius:var(--r-xl);background:linear-gradient(165deg,#0c1d13,#06100a);box-shadow:0 30px 70px rgba(0,0,0,.35)}
.fhead{display:grid;gap:10px;justify-items:start}
.fhead p{margin:0}
.qa.more summary{font-size:.95rem}
.qa.more .legend{grid-template-columns:repeat(2,minmax(0,1fr))}
.tgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.tut{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:var(--r-lg);background:linear-gradient(170deg,#0b1810,#06100a);overflow:hidden;transition:transform .4s var(--ease),border-color .25s}
.tut:hover{transform:translateY(-4px);border-color:rgba(52,204,136,.3)}
.tplayer{border-radius:0;border:0;border-bottom:1px solid var(--line);box-shadow:none}
.tposter{position:absolute;inset:0;display:grid;place-items:center;background:radial-gradient(260px 150px at 70% 30%,rgba(52,204,136,.22),transparent 70%),linear-gradient(150deg,#0f2a1c,#05110a)}
.tnum{position:absolute;left:16px;top:8px;font:400 3.6rem/1 var(--display);color:transparent;-webkit-text-stroke:1px rgba(52,204,136,.45)}
.tic{display:grid;place-items:center;width:62px;height:62px;border-radius:18px;background:rgba(52,176,112,.12);border:1px solid rgba(52,204,136,.3);color:var(--green-hi)}
.tic svg{width:28px;height:28px}
.player.playing .tposter{display:none}
.player.soon{cursor:default}
.player.soon .pbtn{display:none}
.player.soon .plabel{background:rgba(252,190,37,.14);border-color:rgba(252,190,37,.35);color:var(--yellow)}
.player.ready .tic{display:none}
.ttx{display:flex;flex-direction:column;gap:6px;padding:18px 18px 20px;flex:1}
.ttx h3{font-size:1.04rem;font-weight:800;color:#fff;line-height:1.3}
.ttx p{margin:0 0 6px;color:var(--muted);font-size:.88rem;line-height:1.5}
.ttx .tlink{margin-top:auto;align-self:flex-start;font-size:.86rem}
.gtut{margin:14px 0 0!important}
.gtut .tlink svg{width:16px;height:16px}
.doc .thumb{display:block}

@media (max-width:1180px){.dash .tiers{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:1060px){
  .dash{grid-template-columns:minmax(0,1fr)}
  .side{position:fixed;left:0;top:0;bottom:0;width:min(300px,86vw);height:100%;transform:translateX(-104%);transition:transform .4s var(--ease);box-shadow:30px 0 80px rgba(0,0,0,.6)}
  .side.open{transform:none}
  .dtop .menu-btn{display:inline-flex}
  .ggrid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .learnband{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:860px){
  .vlib{grid-template-columns:minmax(0,1fr)}
  .vlist{order:-1;position:static;grid-auto-flow:column;grid-auto-columns:minmax(220px,72%);overflow-x:auto;padding-bottom:6px;scroll-snap-type:x mandatory}
  .vlist .slabel,.vtut{display:none}
  .vitem{grid-template-columns:96px minmax(0,1fr);scroll-snap-align:start}
  .dash .phero-grid{grid-template-columns:minmax(0,1fr)}
  .qa.more .legend{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:640px){
  .hdr-act .learn-btn{display:inline-flex;width:auto}
  .hdr-act .btn{width:auto}
  .dtop-act .orderbtn{display:none}
  .dtop-act .gohome{padding:0 12px;min-height:40px}
  .dtop{min-height:58px}
  .dcrumb a,.dcrumb svg{display:none}
  .dash .tiers,.ggrid,.tgrid{grid-template-columns:minmax(0,1fr)}
  .pager{grid-template-columns:minmax(0,1fr)}
  .pg.next{text-align:left}
  .docband .btn{width:100%}
}
@media (prefers-reduced-motion:reduce){.side{transition:none}}

/* affiliate label: full word on wide screens, AFF when space is tight */
.by .aff-s{text-decoration:none;border:0;cursor:help}
.by .aff-l{display:none}
@media (min-width:1200px){.by .aff-l{display:inline}.by .aff-s{display:none}}

/* =====================================================================
   OFFICIAL-STYLE CTA BUTTONS: uppercase, Bellver green gradient (as on
   the official LOGIN / SIGN UP buttons), with our motion kept
   ===================================================================== */
.btn{text-transform:uppercase;letter-spacing:.14em;font-weight:800;font-size:.86rem;border-radius:7px;min-height:52px;padding:0 28px}
.btn-sm{min-height:42px;padding:0 18px;font-size:.74rem;letter-spacing:.12em;border-radius:6px}
.btn-go{color:#fff;background:linear-gradient(90deg,#1f8a5a 0%,#26a06f 55%,#2bab7c 100%);box-shadow:0 10px 26px rgba(33,150,100,.28),0 2px 0 rgba(0,0,0,.25),inset 0 1px 0 rgba(255,255,255,.22);text-shadow:0 1px 1px rgba(0,0,0,.18)}
.btn-go:hover{filter:brightness(1.08);transform:translateY(-2px);box-shadow:0 16px 36px rgba(33,150,100,.38),0 0 0 1px rgba(125,255,192,.35),inset 0 1px 0 rgba(255,255,255,.28)}
.btn-go:active{transform:translateY(1px) scale(.985);box-shadow:0 4px 12px rgba(33,150,100,.3),inset 0 2px 4px rgba(0,0,0,.2)}
.btn-sm.btn-go{box-shadow:0 8px 20px rgba(33,150,100,.25),inset 0 1px 0 rgba(255,255,255,.2)}
.btn-sm.btn-go:active{transform:translateY(1px) scale(.985)}
.btn-ghost{color:var(--green-hi);background:rgba(2,12,6,.35);box-shadow:inset 0 0 0 1.5px rgba(43,171,124,.75)}
.btn-ghost:hover{color:#fff;background:rgba(43,171,124,.14);box-shadow:inset 0 0 0 1.5px #2bab7c,0 12px 28px rgba(0,0,0,.35);transform:translateY(-2px)}
.btn-ghost:active{transform:translateY(1px) scale(.985)}
.btn-ghost svg,.btn-go svg{width:17px;height:17px}
.btn-ghost .play{background:rgba(43,171,124,.18)}
.btn-wa{color:#fff;background:linear-gradient(90deg,#1aa851,#25d366);box-shadow:0 10px 26px rgba(37,211,102,.25),inset 0 1px 0 rgba(255,255,255,.25);text-shadow:0 1px 1px rgba(0,0,0,.18)}
.btn-wa:hover{transform:translateY(-2px);filter:brightness(1.06)}
.btn-wa:active{transform:translateY(1px) scale(.985);box-shadow:0 4px 12px rgba(37,211,102,.25)}
.btn-gold{border-radius:7px}
.mobile-cta .btn{box-shadow:0 14px 34px rgba(0,0,0,.55),0 8px 22px rgba(33,150,100,.35),inset 0 1px 0 rgba(255,255,255,.22)}
.tier .btn{align-self:stretch;width:auto!important;margin-left:16px;margin-right:16px;padding:0 12px;letter-spacing:.1em}
.vend .btn{letter-spacing:.1em}
@media (max-width:640px){
  .btn{letter-spacing:.1em;padding:12px 18px;font-size:.82rem}
  .btn-sm{padding:0 14px;font-size:.72rem}
}
@media (max-width:380px){.btn{letter-spacing:.06em}}

/* =====================================================================
   FOCUSED VIDEO (theater): zoom to centre, dim everything behind,
   close button, landscape on phones
   ===================================================================== */
html.vt-open,html.vt-open body{overflow:hidden}
.pspacer{width:100%;border-radius:var(--r-lg);background:radial-gradient(closest-side,rgba(52,204,136,.12),transparent),#04100a;border:1px dashed var(--line-2)}
.vtheater{position:fixed;inset:0;z-index:300;opacity:0;transition:opacity .28s var(--ease)}
.vtheater.on{opacity:1}
.vback{position:absolute;inset:0;background:radial-gradient(900px 600px at 50% 50%,rgba(6,30,18,.72),rgba(1,5,3,.94));backdrop-filter:blur(10px) saturate(.8);-webkit-backdrop-filter:blur(10px) saturate(.8);cursor:zoom-out}
/* laptop frame: sizes come from the screen (video) width W; bezel and base are fixed so nothing is ever cut off */
.vtheater{--bz:14px;--bs:20px;--oh:22px;--top:116px;--bot:34px;--vh:100dvh}
.vbox{position:absolute;left:50%;top:calc(var(--top) + (var(--vh) - var(--top) - var(--bot)) / 2);
  --W:min(calc(100vw - 2 * var(--oh) - 28px),1240px,calc((var(--vh) - var(--top) - var(--bot) - 2 * var(--bz) - var(--bs)) * 16 / 9 + 2 * var(--bz)));
  width:var(--W);transform:translate(-50%,-50%) scale(.86);transition:transform .45s var(--spring)}
.vtheater.on .vbox{transform:translate(-50%,-50%) scale(1)}
.vlid{position:relative;padding:var(--bz);border-radius:18px 18px 6px 6px;background:linear-gradient(160deg,#47584f,#212f28 50%,#2f3f36);border:1px solid rgba(190,255,220,.38);box-shadow:0 40px 110px rgba(0,0,0,.75),0 0 100px rgba(52,204,136,.22),inset 0 1px 0 rgba(255,255,255,.22)}
.vcam{position:absolute;left:50%;top:calc(var(--bz) / 2 - 2px);width:4px;height:4px;margin-left:-2px;border-radius:50%;background:#0b1410;box-shadow:0 0 0 1px rgba(190,255,220,.25)}
.vscr{position:relative;border-radius:6px;overflow:hidden;background:#000;box-shadow:0 0 0 1px rgba(0,0,0,.8)}
.vbase{position:relative;height:var(--bs);width:calc(100% + 2 * var(--oh));margin:0 calc(-1 * var(--oh));border-radius:0 0 22px 22px / 0 0 14px 14px;background:linear-gradient(180deg,#5b6d63,#2a3830 55%,#121b16);border:1px solid rgba(190,255,220,.3);border-top:0;box-shadow:0 26px 50px rgba(0,0,0,.65),0 0 60px rgba(52,204,136,.12),inset 0 1px 0 rgba(255,255,255,.3)}
.vbase i{position:absolute;left:50%;top:0;width:min(22%,150px);height:7px;margin-left:calc(min(22%,150px) / -2);border-radius:0 0 10px 10px;background:linear-gradient(180deg,#0b1410,#2c3c33);box-shadow:inset 0 -1px 0 rgba(255,255,255,.14)}
.vbox .player{width:100%;max-width:100%;border:0;border-radius:0;box-shadow:none;cursor:default}
.vbox .player:hover img{transform:none}
.vclose{position:fixed;z-index:8;right:max(14px,env(safe-area-inset-right));top:max(14px,env(safe-area-inset-top));display:grid;place-items:center;width:48px;height:48px;border-radius:50%;border:1px solid rgba(255,255,255,.4);background:rgba(2,12,6,.94);color:#fff;cursor:pointer;box-shadow:0 8px 24px rgba(0,0,0,.6),0 0 0 4px rgba(52,204,136,.12);transition:transform .25s var(--spring),background .2s}
.vclose svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round}
.vclose:hover{transform:rotate(90deg) scale(1.06);background:var(--red)}
.vclose:focus-visible{outline:2px solid var(--green-hi);outline-offset:3px}
.vtheater{direction:ltr}
.vtheater>.vfs{position:fixed;z-index:8;left:auto;right:calc(max(14px,env(safe-area-inset-right)) + 58px);top:max(14px,env(safe-area-inset-top));width:48px;height:48px;border-radius:50%;border:1px solid rgba(255,255,255,.4);background:rgba(2,12,6,.94);opacity:1;box-shadow:0 8px 24px rgba(0,0,0,.6)}
.vtheater>.vfs svg{width:20px;height:20px}
.vclose{left:auto!important}
/* desktop full screen: drop the laptop and show the video edge to edge */
.vtheater.ufs:fullscreen{background:#000}
.vtheater.ufs:fullscreen .vbox{--oh:0px;--bz:0px;--bs:0px;--top:0px;--bot:0px;top:50%;--W:min(100vw,calc(100dvh * 16 / 9))}
.vtheater.ufs:fullscreen .vlid{padding:0;border:0;border-radius:0;background:none;box-shadow:none}
.vtheater.ufs:fullscreen .vscr{border-radius:0}
.vtheater.ufs:fullscreen .vcam,.vtheater.ufs:fullscreen .vbase{display:none}
@media (max-width:900px){
  .vtheater{--bz:9px;--bs:13px;--oh:12px;--top:88px;--bot:20px}
  .vlid{border-radius:12px 12px 4px 4px}
  .vscr{border-radius:4px}
  .vbase{border-radius:0 0 14px 14px / 0 0 10px 10px}
  .vclose,.vtheater>.vfs{width:46px;height:46px}
  .vtheater>.vfs{right:calc(max(14px,env(safe-area-inset-right)) + 56px)}
}
/* phone held upright: turn the laptop sideways so the video is as big as possible */
@media (orientation:portrait) and (max-width:640px){
  .vtheater:not(.locked):not(.vt-vert) .vbox{--W:min(calc(var(--vh) - 110px - 2 * var(--oh)),calc((100vw - 28px - 2 * var(--bz) - var(--bs)) * 16 / 9 + 2 * var(--bz)))}
  .vtheater:not(.locked):not(.vt-vert) .vbox{top:calc(50% + 24px);width:var(--W);transform:translate(-50%,-50%) rotate(90deg) scale(.9)}
  .vtheater.on:not(.locked):not(.vt-vert) .vbox{transform:translate(-50%,-50%) rotate(90deg) scale(1)}
}
/* short landscape phones: less chrome so the video keeps its height */
@media (max-height:480px){
  .vtheater{--top:64px;--bot:10px}
  .vclose{width:42px;height:42px}
}
@media (prefers-reduced-motion:reduce){.vbox{transition:none}}

/* hero pills: keep both readable on phones */
@media (max-width:640px){
  .tagpill.t1{left:0;top:2%;bottom:auto}
  .tagpill.t2{right:0;bottom:0}
}
.hero{overflow-x:clip}

/* =====================================================================
   PROGRESSIVE PAGES: peek, Up next bar, section reveal
   ===================================================================== */
.chap-peek{max-height:230px;overflow:hidden;-webkit-mask-image:linear-gradient(#000 0%,rgba(0,0,0,.55) 45%,transparent 100%);mask-image:linear-gradient(#000 0%,rgba(0,0,0,.55) 45%,transparent 100%);pointer-events:none;user-select:none;filter:saturate(.85)}
.chap-peek .rv{opacity:1!important;transform:none!important}
.peek-in{animation:peekIn .7s var(--ease) both}
@keyframes peekIn{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
.chap-opening{overflow:hidden;transition:max-height .85s cubic-bezier(.22,.8,.2,1)}
.chap-opening>*{animation:openGlow .9s var(--ease) both}
@keyframes openGlow{from{opacity:.55;filter:blur(2px)}to{opacity:1;filter:none}}
.chap-in{animation:chapIn .8s var(--ease) both}
@keyframes chapIn{from{opacity:0;transform:translateY(30px) scale(.985);clip-path:inset(0 0 22% 0 round 28px)}to{opacity:1;transform:none;clip-path:inset(0 0 0 0)}}
.upnext{position:relative;z-index:5;display:flex;flex-direction:column;align-items:center;gap:10px;margin:22px auto 8px;padding:0 var(--gut)}
.upnext.un-pop{animation:unPop .6s var(--spring) both}
@keyframes unPop{from{opacity:0;transform:translateY(16px) scale(.94)}to{opacity:1;transform:none}}
.un-go{display:flex;align-items:center;gap:14px;width:min(460px,100%);padding:12px 16px 12px 12px;border:1px solid rgba(52,204,136,.4);border-radius:18px;background:linear-gradient(160deg,rgba(14,36,24,.96),rgba(5,16,10,.97));backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);color:var(--text);font:inherit;text-align:left;cursor:pointer;box-shadow:0 22px 50px rgba(0,0,0,.55),0 0 0 6px rgba(52,204,136,.06),0 0 40px rgba(52,204,136,.12);transition:transform .3s var(--ease),border-color .25s,box-shadow .3s}
.un-go:hover{transform:translateY(-3px);border-color:rgba(52,204,136,.75);box-shadow:0 28px 60px rgba(0,0,0,.6),0 0 0 6px rgba(52,204,136,.1),0 0 60px rgba(52,204,136,.22)}
.un-go:active{transform:translateY(1px) scale(.99)}
.un-ring{position:relative;flex:none;width:44px;height:44px}
.un-ring svg{width:44px;height:44px;transform:rotate(-90deg)}
.un-ring circle{fill:none;stroke-width:3}
.un-ring .bg{stroke:rgba(150,255,200,.12)}
.un-ring .fg{stroke:var(--green-hi);stroke-linecap:round;stroke-dasharray:97.4;stroke-dashoffset:calc(97.4 - 97.4 * var(--p));transition:stroke-dashoffset .8s var(--ease)}
.upnext{--p:0}
.un-ring i{position:absolute;inset:12px;border-radius:50%;background:var(--green);box-shadow:0 0 14px var(--green-hi);animation:breathe 2.4s ease-in-out infinite}
.un-tx{flex:1;min-width:0;display:grid;gap:1px}
.un-tx small{color:var(--green-hi);font-size:.72rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.un-tx b{font-size:1rem;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.un-chev{flex:none;display:grid;place-items:center;width:46px;height:46px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#ffd96b,#fcbe25 55%,#d99400);color:#1d1300;box-shadow:0 0 0 4px rgba(252,190,37,.16),0 10px 24px rgba(0,0,0,.45);animation:unGlow 2s ease-in-out infinite}
@keyframes unGlow{0%,100%{box-shadow:0 0 0 4px rgba(252,190,37,.16),0 10px 24px rgba(0,0,0,.45)}50%{box-shadow:0 0 0 9px rgba(252,190,37,.07),0 0 26px rgba(252,190,37,.45),0 10px 24px rgba(0,0,0,.45)}}
.un-chev svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;animation:unBounce 1.6s ease-in-out infinite}
@keyframes unBounce{0%,100%{transform:translateY(-2px)}50%{transform:translateY(3px)}}
.un-all{border:0;background:none;color:var(--muted);font:700 .78rem var(--body);text-decoration:underline;text-underline-offset:3px;cursor:pointer;padding:4px 8px}
.un-all:hover{color:var(--green-hi)}

/* section navigator: guide pages */
.secnav{position:sticky;top:64px;z-index:55;padding:8px clamp(16px,3vw,32px);border-bottom:1px solid var(--line);background:rgba(2,12,6,.78);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.secnav .sn-toggle{display:none}
.secnav .sn-list{display:flex;flex-wrap:wrap;gap:6px;max-width:1080px;margin:0 auto}
.secnav .sn-i{display:inline-flex;align-items:center;gap:7px;padding:6px 12px;border:1px solid var(--line);border-radius:999px;color:var(--muted);font-size:.76rem;font-weight:700;white-space:nowrap;transition:color .2s,border-color .2s,background .2s}
.secnav .sn-i i{width:7px;height:7px;border-radius:50%;background:var(--faint);transition:background .2s,box-shadow .2s}
.secnav .sn-i:hover{color:#fff;border-color:rgba(52,204,136,.4)}
.secnav .sn-i.on{color:#fff;background:rgba(52,176,112,.14);border-color:rgba(52,204,136,.5)}
.secnav .sn-i.on i{background:var(--green-hi);box-shadow:0 0 8px var(--green-hi)}
.secnav .sn-i.locked{opacity:.6}
/* section rail: landing page, wide screens */
.secrail{position:fixed;right:18px;top:50%;z-index:70;transform:translate(20px,-50%);opacity:0;pointer-events:none;transition:opacity .35s,transform .45s var(--ease)}
.secrail.show{opacity:1;transform:translate(0,-50%);pointer-events:auto}
.secrail .sn-list{display:grid;gap:4px;padding:10px 8px;border:1px solid var(--line);border-radius:16px;background:rgba(4,16,10,.7);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.secrail .sn-i{position:relative;display:flex;align-items:center;justify-content:flex-end;gap:10px;height:22px}
.secrail .sn-i i{width:9px;height:9px;border-radius:50%;background:rgba(150,255,200,.22);transition:transform .25s var(--spring),background .2s,box-shadow .2s}
.secrail .sn-i span{position:absolute;right:26px;padding:5px 10px;border-radius:8px;background:rgba(2,12,6,.92);border:1px solid var(--line-2);color:#fff;font-size:.76rem;font-weight:700;white-space:nowrap;opacity:0;transform:translateX(6px);pointer-events:none;transition:opacity .2s,transform .25s var(--ease)}
.secrail .sn-i:hover span,.secrail .sn-i:focus-visible span{opacity:1;transform:none}
.secrail .sn-i:hover i{transform:scale(1.35);background:var(--green-hi)}
.secrail .sn-i.on i{background:var(--green-hi);transform:scale(1.35);box-shadow:0 0 10px var(--green-hi)}
.secrail .sn-i.locked i{background:transparent;border:1px solid rgba(150,255,200,.3)}
@media (max-width:1100px){.secrail{display:none}}
@media (max-width:860px){
  .secnav{padding:6px 16px;top:58px}
  .secnav .sn-toggle{display:flex;align-items:center;gap:8px;width:100%;min-height:40px;padding:0 12px;border:1px solid var(--line-2);border-radius:12px;background:rgba(8,18,12,.8);color:#fff;font:700 .84rem var(--body);cursor:pointer}
  .secnav .sn-toggle .sn-k{color:var(--green-hi);font-size:.68rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;flex:none}
  .secnav .sn-toggle b{flex:1;min-width:0;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .secnav .sn-toggle svg{flex:none;width:18px;height:18px;fill:none;stroke:var(--green-hi);stroke-width:2.4;transition:transform .3s var(--ease)}
  .secnav.open .sn-toggle svg{transform:rotate(180deg)}
  .secnav .sn-list{display:none;flex-direction:column;flex-wrap:nowrap;gap:2px;margin-top:6px;padding:6px;border:1px solid var(--line);border-radius:12px;background:rgba(4,16,10,.97);max-height:60vh;overflow-y:auto}
  .secnav.open .sn-list{display:flex;animation:fadeUp .3s var(--ease)}
  .secnav .sn-i{border:0;border-radius:10px;padding:10px 12px;font-size:.86rem;white-space:normal}
  .upnext{margin-top:20px}
  .un-tx b{font-size:.92rem}
}
@media (max-width:640px){.dtop{min-height:58px}}
@media (prefers-reduced-motion:reduce){.un-ring i,.un-chev,.un-chev svg{animation:none}}
@media print{[hidden]{display:block!important}.chap-peek{max-height:none;-webkit-mask-image:none;mask-image:none}.upnext,.secnav,.secrail{display:none!important}}

/* playlist: stacked on phones so every video is visible */
@media (max-width:860px){
  .vlist{order:-1;position:static;grid-auto-flow:row;grid-auto-columns:auto;grid-template-columns:minmax(0,1fr);overflow:visible;padding-bottom:0;scroll-snap-type:none;gap:8px}
  .vitem{grid-template-columns:104px minmax(0,1fr);scroll-snap-align:none}
  .vlist .slabel{display:block;margin:0 2px 2px}
}

/* level picker (phones) */
.tierpick{display:none}
@media (max-width:640px){
  .tierpick{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;margin:0 0 14px;padding:5px;border:1px solid var(--line);border-radius:14px;background:rgba(6,16,10,.8)}
  .tierpick .tp{display:grid;gap:1px;justify-items:center;padding:8px 2px;border:0;border-radius:10px;background:transparent;color:var(--muted);font:inherit;cursor:pointer;transition:background .25s,color .25s,transform .2s}
  .tierpick .tp b{font:400 1rem/1 var(--display);letter-spacing:.03em;text-transform:uppercase}
  .tierpick .tp small{font-size:.7rem;font-weight:800}
  .tierpick .tp[aria-selected="true"]{color:#fff;background:linear-gradient(150deg,var(--m1),var(--m2));box-shadow:0 8px 18px rgba(0,0,0,.4)}
  .tierpick .tp.biz[aria-selected="true"],.tierpick .tp.gold[aria-selected="true"]{color:#1a1205}
  .tierpick .tp:active{transform:scale(.96)}
  .tierpick .basic{--m1:var(--basic-1);--m2:var(--basic-2)}.tierpick .prem{--m1:var(--prem-1);--m2:var(--prem-2)}.tierpick .biz{--m1:var(--biz-1);--m2:var(--biz-2)}.tierpick .gold{--m1:var(--gold-1);--m2:var(--gold-2)}
  .tier.tp-off{display:none}
  .tier.tp-in{animation:tierIn .45s var(--ease) both}
  @keyframes tierIn{from{opacity:0;transform:translateX(18px) scale(.98)}to{opacity:1;transform:none}}
}
html.un-vis .totop{opacity:0!important;pointer-events:none!important}
.chap-peek{max-height:170px;-webkit-mask-image:linear-gradient(#000 0%,rgba(0,0,0,.5) 50%,transparent 94%);mask-image:linear-gradient(#000 0%,rgba(0,0,0,.5) 50%,transparent 94%)}
@media (max-width:640px){.chap-peek{max-height:140px}.upnext{margin:18px auto 4px}.un-go{width:100%}}

/* hidden sections keep find-in-page but take no space */
main [hidden]{padding:0!important;margin:0!important;border:0!important;min-height:0!important;height:0!important}
.chap-peek{padding-bottom:0!important}
/* tighter gap before the footer */
.ftr{margin-top:clamp(20px,3vw,32px);padding:34px 0 26px}
.dfoot{margin-top:8px}
/* footer: links run horizontally */
.ftr-top{grid-template-columns:minmax(0,1fr);gap:20px}
.ftr .logo{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:22px;align-items:center}
.ftr .logo img{grid-row:1/3;width:140px;margin:0}
.ftr .logo .tag{margin:0 0 6px}
.ftr .logo p:last-child{margin:0}
.ftr-top>div:not(.logo){display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 16px;padding-top:14px;border-top:1px solid var(--line)}
.ftr h3{margin:0;flex:none;min-width:84px;color:var(--green-hi);font-size:.74rem;letter-spacing:.1em;text-transform:uppercase}
.ftr ul{display:flex;flex-wrap:wrap;gap:6px 18px;flex:1;min-width:0}
.ftr ul a{display:inline-block;padding:4px 0;font-size:.88rem}
@media (max-width:640px){
  .ftr{padding:28px 0 22px}
  .ftr .logo{grid-template-columns:minmax(0,1fr)}
  .ftr .logo img{grid-row:auto;width:120px;margin-bottom:10px}
  .ftr-top>div:not(.logo){display:block;padding-top:12px}
  .ftr h3{margin-bottom:4px}
  .ftr ul{gap:2px 16px}
  .ftr ul a{padding:6px 0;font-size:.86rem}
  .disc{margin-top:22px}
}
.ftr-top>div:not(.logo){padding-top:8px}
.ftr ul a{padding:2px 0}
@media (max-width:640px){.ftr ul{gap:0 14px}.ftr ul a{font-size:.82rem;padding:5px 0}.ftr-top>div:not(.logo){padding-top:10px}}
/* hero with a video instead of artwork: give it more room */
.phero-grid:has(.player){grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.phero-art .player img{filter:none}
@media (max-width:860px){.phero-grid:has(.player){grid-template-columns:minmax(0,1fr)}.phero-art{max-width:none}}
/* sidebar: the bottom links (Member Login, WhatsApp, Bellver Home, All Cards) stay pinned and visible */
.side-bot{position:sticky;bottom:-16px;z-index:2;margin:auto -14px -16px;padding:12px 14px 16px;background:linear-gradient(180deg,rgba(3,12,7,.9),rgba(3,12,7,.99) 22%)}
@media (max-height:720px){.side-bot .sorder{display:none}}
.gohome{white-space:nowrap}
.gohome svg{width:16px;height:16px;flex:none}
@media (max-width:380px){.dtop .menu-btn .lbl{display:none}.dtop .menu-btn{padding:0 12px}.dtop{gap:10px}.dtop .gohome{letter-spacing:.06em;padding:0 10px}}

/* gold play badge: same gold as the 3 MIN / 27 MIN circles, with the pulsing ring used on the video play buttons */
.btn .play,.btn-ghost .play{position:relative;flex:none;display:grid;place-items:center;width:30px;height:30px;margin-left:-8px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#ffd96b,#fcbe25 55%,#d99400);color:#1d1300;box-shadow:0 0 0 3px rgba(252,190,37,.16),0 4px 12px rgba(0,0,0,.35)}
.btn .play:before{content:"";position:absolute;inset:-6px;border-radius:50%;border:2px solid rgba(252,190,37,.6);animation:ping 2.4s var(--ease) infinite;pointer-events:none}
.btn .play svg{position:relative;width:13px;height:13px;margin-left:2px;fill:currentColor}
.btn-sm .play{width:26px;height:26px}.btn-sm .play svg{width:11px;height:11px}
@media (prefers-reduced-motion:reduce){.btn .play:before{animation:none;opacity:.5}}

/* ---- CTA motion: slow orbiting light ring (same effect as the landing page), Bellver colours ---- */
@property --ang{syntax:'<angle>';initial-value:0deg;inherits:false}
.btn{overflow:visible}
.btn:not(.menu-btn):after{content:"";position:absolute;inset:-3px;padding:2px;border-radius:10px;pointer-events:none;z-index:2;background:conic-gradient(from var(--ang),transparent 0 58%,var(--c1) 74%,var(--c2) 82%,transparent 94%);-webkit-mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);-webkit-mask-composite:xor;filter:drop-shadow(0 0 5px var(--c2));animation:ctaSpin 6s linear infinite}
.btn-sm:not(.menu-btn):after{border-radius:9px}
.btn-go{--c1:#c8ffe3;--c2:#34cc88}
.btn-ghost{--c1:#8ff0c0;--c2:#2bab7c}
.btn-gold{--c1:#fff0b8;--c2:#fcbe25}
.btn-wa{--c1:#c9ffdc;--c2:#25d366}
.btn-row .btn:nth-child(2):after{animation-delay:-3s}
.btn-row .btn:nth-child(3):after{animation-delay:-1.5s}
.btn:not(.menu-btn):hover:after{filter:drop-shadow(0 0 9px var(--c2)) brightness(1.2)}
/* shine now lives in the button background so the button itself can stay unclipped for the ring */
.btn-go:before{display:none}
.btn-go{background:linear-gradient(100deg,transparent 38%,rgba(255,255,255,.5) 50%,transparent 62%) no-repeat,linear-gradient(90deg,#1f8a5a 0%,#26a06f 55%,#2bab7c 100%);background-size:260% 100%,100% 100%;background-position:180% 0,0 0;animation:ctaGlint 6.5s ease-in-out 2s infinite}
@keyframes ctaSpin{to{--ang:360deg}}
@keyframes ctaGlint{0%{background-position:180% 0,0 0}24%,100%{background-position:-80% 0,0 0}}
@media (prefers-reduced-motion:reduce){.btn:after,.btn-go{animation:none!important}}

/* ---- Tap to open bar: same orbiting light ring as the CTA buttons, bolder so it is hard to miss ---- */
.un-go{position:relative;overflow:visible;--c1:#fff0b8;--c2:#fcbe25}
.un-go:after{content:"";position:absolute;inset:-4px;padding:3px;border-radius:22px;pointer-events:none;z-index:2;background:conic-gradient(from var(--ang),transparent 0 40%,#34cc88 56%,var(--c1) 72%,var(--c2) 80%,transparent 94%);-webkit-mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);-webkit-mask-composite:xor;filter:drop-shadow(0 0 8px var(--c2));animation:ctaSpin 4s linear infinite}
.un-go{animation:unBeat 2.4s ease-in-out infinite}
@keyframes unBeat{0%,100%{box-shadow:0 22px 50px rgba(0,0,0,.55),0 0 0 0 rgba(252,190,37,0)}50%{box-shadow:0 22px 50px rgba(0,0,0,.55),0 0 26px 2px rgba(252,190,37,.32)}}
.un-go:hover:after{filter:drop-shadow(0 0 12px var(--c2)) brightness(1.2)}
@media (prefers-reduced-motion:reduce){.un-go,.un-go:after{animation:none!important}}

/* ---- Collapsible side menu on every screen size ---- */
.dtop .menu-btn{display:inline-flex}
.side-toggle{display:grid;place-items:center;position:fixed;z-index:130;top:50%;margin-top:-34px;left:calc(min(300px,86vw) - 16px);width:32px;height:68px;padding:0;border-radius:18px;border:1px solid rgba(52,204,136,.55);background:#07150e;color:var(--green-hi);cursor:pointer;-webkit-tap-highlight-color:transparent;box-shadow:0 6px 18px rgba(0,0,0,.55),0 0 0 4px rgba(52,204,136,.1);transition:left .4s var(--ease),width .4s var(--ease),border-radius .4s var(--ease),background .2s,color .2s}
.side-toggle svg{width:20px;height:20px;transition:transform .4s var(--ease)}
.side-toggle:active{background:var(--green-hi);color:#03140b}
.side-toggle[aria-expanded="false"]{left:0;width:26px;border-radius:0 18px 18px 0;border-left-color:transparent}
.side-toggle[aria-expanded="false"] svg{transform:rotate(180deg)}
@media (min-width:1061px){
  .dtop .menu-btn{display:none}
  .side-toggle{display:grid;place-items:center;position:fixed;z-index:130;top:50%;margin-top:-34px;left:258px;width:36px;height:68px;padding:0;border-radius:18px;border:1px solid rgba(52,204,136,.5);background:#07150e;color:var(--green-hi);cursor:pointer;box-shadow:0 6px 18px rgba(0,0,0,.55),0 0 0 4px rgba(52,204,136,.08);transition:left .38s var(--ease),width .38s var(--ease),border-radius .38s var(--ease),background .2s,color .2s,box-shadow .2s}
  .side-toggle svg{width:20px;height:20px;transition:transform .38s var(--ease)}
  .side-toggle:hover{background:var(--green-hi);color:#03140b;box-shadow:0 6px 18px rgba(0,0,0,.55),0 0 0 4px rgba(52,204,136,.22),0 0 22px rgba(52,204,136,.45)}
  .side-toggle:focus-visible{outline:2px solid var(--green-hi);outline-offset:3px}
  .dash.side-off .side-toggle{left:0;width:30px;height:68px;border-radius:0 18px 18px 0;border-left-color:transparent}
  .dash.side-off .side-toggle svg{transform:rotate(180deg)}
  .dash{transition:grid-template-columns .38s var(--ease)}
  .side{transition:opacity .25s,transform .38s var(--ease),visibility 0s}
  .dash.side-off{grid-template-columns:0 minmax(0,1fr)}
  .dash.side-off .side{opacity:0;visibility:hidden;transform:translateX(-24px);border-right-color:transparent;padding-left:0;padding-right:0;overflow:hidden;transition:opacity .2s,transform .38s var(--ease),visibility 0s .38s}
  .dash .wrap{transition:width .38s var(--ease)}
  .dash.side-off .wrap{width:min(1320px,100% - var(--gut)*2)}
  .dash.side-off .tiers{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media (prefers-reduced-motion:reduce){.dash,.dash .wrap,.side,.side-toggle,.side-toggle svg{transition:none!important}}

/* ---- Tutorial videos use the same playlist layout as the presentations ---- */
.vthumb .tposter{border-radius:inherit}
.vthumb .tnum{left:8px;top:2px;font-size:2.1rem}
.vthumb .tic{width:34px;height:34px;border-radius:10px}.vthumb .tic svg{width:17px;height:17px}
.vitem[aria-current="true"] .vthumb .tposter{background:radial-gradient(160px 90px at 70% 30%,rgba(52,204,136,.35),transparent 70%),linear-gradient(150deg,#12331f,#06140c)}
.vsum-d{display:grid;gap:10px;margin-top:14px}
.vpanel .vhead .vwait{margin-top:6px}
.vpanel .player.soon{aspect-ratio:16/9}
.vthumb .tposter{padding-bottom:12px}
@media (max-width:640px){.side-toggle[aria-expanded="false"]{width:15px;border-radius:0 12px 12px 0}.side-toggle[aria-expanded="false"] svg{width:14px;height:14px;margin-left:-2px}}


/* ---- Starter checklist band ---- */
.checklist{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:clamp(18px,3vw,32px);align-items:center;padding:clamp(22px,3.4vw,36px);border-color:rgba(52,204,136,.35);background:linear-gradient(160deg,rgba(14,40,26,.9),rgba(4,16,10,.95))}
.checklist .ck-ico{width:64px;height:64px;border-radius:18px;display:grid;place-items:center;background:rgba(52,204,136,.12);border:1px solid rgba(52,204,136,.4);color:var(--green-hi)}
.checklist .ck-ico svg{width:30px;height:30px}
.checklist h2{margin:0 0 8px}
.checklist p{margin:0;color:var(--muted)}
.ck-pts{display:flex;flex-wrap:wrap;gap:8px 18px;list-style:none;margin:14px 0 0;padding:0;font-weight:700;font-size:.9rem;color:var(--text)}
.ck-pts li{display:flex;align-items:center;gap:6px}
.ck-pts svg{width:16px;height:16px;color:var(--green-hi)}
@media (max-width:860px){.checklist{grid-template-columns:auto minmax(0,1fr)}.checklist .btn{grid-column:1/-1;justify-self:stretch;text-align:center;justify-content:center}}
@media (max-width:520px){.checklist{grid-template-columns:1fr}.checklist .ck-ico{width:52px;height:52px}}

/* ---- Partner page ---- */
.wk{display:grid;gap:14px;counter-reset:wk}
.wk .day{display:grid;grid-template-columns:auto minmax(0,1fr);gap:16px;align-items:start;padding:18px 20px;border:1px solid rgba(52,204,136,.22);border-radius:18px;background:rgba(8,26,17,.7)}
.wk .day b.d{display:grid;place-items:center;min-width:64px;height:64px;border-radius:16px;background:rgba(52,204,136,.12);border:1px solid rgba(52,204,136,.4);color:var(--green-hi);font:400 1.5rem var(--display,Anton),sans-serif;text-align:center;line-height:1}
.wk .day b.d small{display:block;font:800 .6rem var(--body);letter-spacing:.14em;margin-bottom:3px;opacity:.8}
.wk .day h3{margin:0 0 4px;font-size:1.05rem}
.wk .day p{margin:0;color:var(--muted)}
.dd{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.dd .box.do{border-color:rgba(52,204,136,.45)}
.dd .box.dont{border-color:rgba(255,120,100,.4)}
@media (max-width:760px){.dd{grid-template-columns:1fr}}


/* ---- Audience band (TikTok LIVE hosts first) ---- */
.aud{display:grid;gap:18px}
.aud-main{padding:clamp(22px,3.4vw,38px);border:1px solid rgba(252,190,37,.4);border-radius:22px;background:linear-gradient(160deg,rgba(40,32,8,.55),rgba(5,18,11,.92));box-shadow:0 0 0 1px rgba(52,204,136,.1),0 24px 60px rgba(0,0,0,.4)}
.aud-main .h3{font-size:clamp(1.4rem,2.6vw,1.9rem);margin:14px 0 4px}
.aud-main .btn-row{margin-top:20px}
.aud-chips{display:flex;flex-wrap:wrap;gap:10px;list-style:none;margin:0;padding:0}
.aud-chips li{padding:8px 16px;border:1px solid rgba(52,204,136,.35);border-radius:999px;background:rgba(8,26,17,.7);font-weight:700;font-size:.9rem;color:var(--text)}

/* ---- Do not lists: red cross instead of the green tick ---- */
.dd .box.dont .checks li:before{background:rgba(255,100,80,.16) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ff7a66' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E") center/13px no-repeat;border-color:rgba(255,122,102,.55)}

/* partner who-table */
.who-tbl{min-width:760px}.who-tbl th[scope=row]{color:#fff;font-weight:800;width:20%;min-width:150px;background:rgba(52,176,112,.05)}.who-tbl .ctr{text-align:center;width:1%;white-space:nowrap}.who-tbl thead th{text-transform:uppercase;letter-spacing:.06em;font-size:.72rem}.who-tbl tbody tr:nth-child(even) td{background:rgba(255,255,255,.015)}.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* who-table v2 */
.who-filter{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 14px}
.who-filter button{font:inherit;font-size:.82rem;font-weight:700;color:var(--soft);background:rgba(6,16,10,.75);border:1px solid var(--line);border-radius:999px;padding:9px 16px;cursor:pointer;transition:all .2s}
.who-filter button:hover{color:#fff;border-color:rgba(52,176,112,.5)}
.who-filter button.on{color:#06100a;background:linear-gradient(135deg,var(--m1,#34b070),var(--m2,#7be0a8));border-color:transparent}
.who-tbl th[scope=row] .wn{display:flex;align-items:center;gap:10px}
.who-tbl .wi{flex:none;width:30px;height:30px;border-radius:9px;display:grid;place-items:center;background:rgba(52,176,112,.12);color:#7be0a8}.who-tbl .wi svg{width:16px;height:16px}
.who-tbl tbody tr{transition:background .2s,opacity .25s}.who-tbl tbody tr:hover th[scope=row]{background:rgba(52,176,112,.1)}
.who-tbl .bl.off{opacity:.35}.who-tbl tr[hidden]{display:none}
.who-count{margin-top:10px}
@media(max-width:760px){
 table.who-tbl{min-width:0}.who-tbl thead{display:none}
 .who-tbl,.who-tbl tbody{display:block}
 .who-tbl tbody tr{display:block;padding:14px 16px;border-bottom:1px solid var(--line)}
 .who-tbl th[scope=row]{display:block;border:0;padding:0 0 10px;background:none;width:auto;min-width:0;font-size:1.02rem}
 .who-tbl td{display:block;padding:6px 0;border:0;background:none!important}
 .who-tbl td.ctr{display:none}
 .who-tbl td:before{content:attr(data-label);display:block;font-size:.68rem;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--soft);margin-bottom:2px}
 .who-tbl tr[data-bl="1"] th[scope=row] .wn:after{content:"On Bellver's list";margin-left:auto;font-size:.66rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:#7be0a8;border:1px solid rgba(52,176,112,.4);border-radius:999px;padding:3px 9px;white-space:nowrap}
}

/* ================= 2x2 Matrix Explained page (mx-) ================= */
.mx-tree{width:100%;height:auto;overflow:visible}
.mx-tree .ln line{stroke:rgba(150,255,200,.22);stroke-width:2}
.mx-tree .rowlab{fill:var(--faint);font:800 11px var(--body);letter-spacing:.1em;text-anchor:start}
.mx-tree text{text-anchor:middle;font:800 13px var(--body);fill:#fff;pointer-events:none}
.mx-tree .you circle{fill:url(#none);fill:#0d3a24;stroke:var(--green-hi);stroke-width:3}
.mx-tree .you text{font-size:12px;letter-spacing:.06em}
.mx-tree .up circle{fill:#14243a;stroke:#5aa9ff;stroke-width:3}
.mx-tree .up text{font-size:11px}
.mx-tree .seat circle{fill:#08140d;stroke:rgba(150,255,200,.28);stroke-width:2;stroke-dasharray:4 4}
.mx-tree .seat text{fill:var(--muted);font-size:12px}
.mx-tree .seat.full circle{fill:#1a5c3c;stroke:var(--green-hi);stroke-dasharray:none}
.mx-tree .seat.full text{fill:#fff}
.mx-tree .seat.spill circle{fill:#173a63;stroke:#5aa9ff;stroke-dasharray:none;animation:mxPulse 2.4s ease-in-out infinite}
.mx-tree .seat.spill text{fill:#fff}
.mx-tree .drop{fill:none;stroke:#5aa9ff;stroke-width:2.5;stroke-dasharray:7 6;animation:mxDash 1.2s linear infinite}
.mx-tree .tag{text-anchor:start;fill:#9ccbff;font-size:13px}
.mx-fig:not(.x) .mx-tree:not(.mx-spill) .seat circle{fill:#1a5c3c;stroke:var(--green-hi);stroke-dasharray:none}
.mx-fig:not(.x) .mx-tree:not(.mx-spill) .seat text{fill:#fff}
@keyframes mxPulse{50%{filter:drop-shadow(0 0 10px rgba(90,169,255,.8))}}
@keyframes mxDash{to{stroke-dashoffset:-26}}
.mx-fig{margin:0;padding:clamp(18px,3vw,30px);border:1px solid var(--line);border-radius:var(--r-xl);background:radial-gradient(120% 90% at 50% 0%,rgba(52,176,112,.12),transparent 60%),linear-gradient(165deg,#0b1810,#06100a)}
.mx-fig figcaption{margin-top:12px;color:var(--muted);font-size:.86rem;text-align:center}
.mx-checks{margin:0 0 22px}
.mx-step{display:inline-flex;width:max-content;padding:5px 12px;border-radius:99px;background:rgba(252,190,37,.1);border:1px solid rgba(252,190,37,.3);color:var(--yellow);font-size:.74rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase}

.mx-why{position:relative;overflow:hidden}
.mx-wn{position:absolute;right:18px;top:6px;font:400 3.4rem/1 var(--display);color:rgba(252,190,37,.12)}
/* video */
.mx-video{max-width:980px;margin-inline:auto}
.mx-herovid{width:100%;box-shadow:0 40px 90px rgba(0,0,0,.5),0 0 0 1px rgba(52,204,136,.35)}
.mx-vcap{display:flex;gap:8px;align-items:center;justify-content:center;margin:12px 0 0;color:var(--soft);font-weight:800;font-size:.9rem}
.mx-vcap svg{width:18px;height:18px;color:var(--green-hi)}

/* hero */
.mx-hero-wrap{position:relative;padding:clamp(16px,3vw,28px);border:1px solid var(--line-2);border-radius:var(--r-xl);background:radial-gradient(110% 80% at 50% 0%,rgba(52,204,136,.18),transparent 65%),linear-gradient(165deg,#0b1a12,#050e09);box-shadow:0 40px 90px rgba(0,0,0,.45)}
.mx-hero .seat circle{transition:fill .35s,stroke .35s,transform .45s var(--spring);transform-box:fill-box;transform-origin:center}
.mx-hero .seat.on circle{fill:#1a5c3c;stroke:var(--green-hi);stroke-dasharray:none}
.mx-hero .seat.pop circle{transform:scale(1.25)}
.mx-hero .coin{fill:var(--yellow);filter:drop-shadow(0 0 6px rgba(252,190,37,.9))}
.mx-hero-cap{margin-top:10px;text-align:center;color:var(--soft);font-weight:800;font-size:.9rem}
.mx-hero-cap span{color:var(--green-hi);font-variant-numeric:tabular-nums}

/* 30 second version */
.mx-quick{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px;counter-reset:q}
.mx-quick li{position:relative;padding:22px 18px 20px;border:1px solid var(--line);border-radius:var(--r-lg);background:linear-gradient(170deg,#0c1a12,#06100a);overflow:hidden}
.mx-quick li:before{content:"";position:absolute;inset:0 0 auto;height:3px;background:linear-gradient(90deg,var(--green),var(--green-hi),var(--yellow))}
.mx-quick .n{position:absolute;right:14px;top:6px;font:400 3.2rem/1 var(--display);color:rgba(150,255,200,.07)}
.mx-quick .qi{display:grid;place-items:center;width:42px;height:42px;margin-bottom:14px;border-radius:12px;background:rgba(52,176,112,.12);border:1px solid rgba(52,176,112,.3);color:var(--green-hi)}
.mx-quick .qi svg{width:22px;height:22px}
.mx-quick b{display:block;font-size:1.02rem;line-height:1.3;margin-bottom:6px}
.mx-quick p{margin:0;color:var(--muted);font-size:.9rem;line-height:1.5}
.mx-jump{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.mx-jump a{display:grid;padding:9px 14px;border-radius:12px;border:1px solid var(--line-2);background:rgba(8,18,12,.7);font-weight:800;font-size:.86rem;transition:transform .2s,border-color .2s}
.mx-jump a small{color:var(--yellow);font-size:.68rem;letter-spacing:.08em;text-transform:uppercase}
.mx-jump a:hover{transform:translateY(-2px);border-color:rgba(52,204,136,.5)}

/* builder */
.mx-build{padding:clamp(18px,3vw,30px)}
.mx-build-top{display:flex;flex-wrap:wrap;gap:12px 20px;align-items:center;justify-content:space-between}
.mx-build .btn svg{width:16px;height:16px}
.mx-tip{margin:0;color:var(--muted);font-size:.86rem}
.mx-tip svg{display:inline-block;width:16px;height:16px;margin-right:6px;vertical-align:-3px;color:var(--yellow)}
.mx-build-svg{margin:18px auto 6px;max-width:640px}
.mx-build .seat{cursor:default}
.mx-build .seat.full{cursor:pointer}
.mx-build .seat.full:hover circle{filter:brightness(1.25)}
.mx-build .seat.mine circle{fill:#5c4710;stroke:var(--yellow);stroke-dasharray:none}
.mx-build .seat.team circle{fill:#1a5c3c;stroke:var(--green-hi);stroke-dasharray:none}
.mx-build .seat.spillx circle{fill:#173a63;stroke:#5aa9ff;stroke-dasharray:none}
.mx-build .seat.full text{fill:#fff}
.mx-build .seat.new circle{animation:mxIn .55s var(--spring)}
.mx-build .you{cursor:pointer}
@keyframes mxIn{from{transform:scale(.2);opacity:0}}
.mx-build .seat circle{transform-box:fill-box;transform-origin:center}
.mx-legend{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:8px 18px;margin:8px 0 14px;padding:0;color:var(--soft);font-size:.82rem;font-weight:700}
.mx-legend i{display:inline-block;width:12px;height:12px;margin-right:7px;border-radius:50%;vertical-align:-1px;border:2px solid}
.k-you{background:#0d3a24;border-color:var(--green-hi)!important}.k-mine{background:#5c4710;border-color:var(--yellow)!important}.k-team{background:#1a5c3c;border-color:var(--green-hi)!important}.k-spill{background:#173a63;border-color:#5aa9ff!important}
.mx-msg{min-height:58px;padding:14px 16px;border-radius:var(--r-md);background:rgba(2,12,6,.65);border:1px solid var(--line);color:var(--soft);font-size:.94rem;line-height:1.5}
.mx-msg b{color:#fff}
.mx-after{margin-top:18px}

/* doubling */
.mx-dbl{align-items:start;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr)}
table.tbl.mx-tbl{min-width:0}
.mx-tbl th,.mx-tbl td{padding:9px 14px}
.mx-tbl tr.hit{background:rgba(252,190,37,.06)}
.mx-tbl tr.hit td:first-child b{color:var(--yellow)}
.mx-chip{display:inline-block;margin-left:10px;vertical-align:1px;padding:2px 8px;border-radius:99px;background:rgba(252,190,37,.14);color:var(--yellow);font-size:.68rem;font-weight:800;white-space:nowrap}
.mx-tbl td.bar,.mx-tbl th.bar{width:22%;padding-left:0}
.mx-tbl td.bar i{display:block;height:8px;border-radius:99px;background:linear-gradient(90deg,var(--green-deep),var(--green-hi))}
.mx-tbl tr.hit td.bar i{background:linear-gradient(90deg,var(--green-hi),var(--yellow))}
.mx-big{display:grid;gap:2px;padding:18px 0;border-bottom:1px solid var(--line)}
.mx-big b{font:400 clamp(2.4rem,5vw,3.6rem)/1 var(--display);color:var(--green-hi);letter-spacing:.01em}
.mx-big span{color:var(--soft)}
.mx-big+p{margin-top:18px}

/* 0.1% flow */
.mx-coin{display:grid;grid-template-columns:1fr auto 1fr auto 1.3fr;gap:12px;align-items:stretch}
.mx-coin>div:not(.arr){display:grid;align-content:center;gap:4px;padding:22px;border-radius:var(--r-lg);border:1px solid var(--line);background:linear-gradient(170deg,#0c1a12,#06100a);text-align:center}
.mx-coin small{color:var(--muted);font-size:.82rem;font-weight:700}
.mx-coin b{font:400 clamp(2.4rem,5vw,3.4rem)/1 var(--display);color:#fff}
.mx-coin .c2 b{color:var(--yellow)}
.mx-coin .c3{border-color:rgba(52,204,136,.35)!important}
.mx-coin .c3 b{color:var(--green-hi)}
.mx-coin .arr{display:grid;place-items:center;color:var(--green-hi)}
.mx-coin .arr svg{width:30px;height:30px}

/* calculator */
.mx-calc .calc-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 20px}
.mx-calc .mx-span{grid-column:1/-1}
.mx-chips{display:flex;flex-wrap:wrap;gap:6px}
.mx-chips button{min-height:34px;padding:0 12px;border-radius:9px;border:1px solid var(--line-2);background:#06110b;color:var(--soft);font:800 .8rem var(--body);cursor:pointer}
.mx-chips button:hover,.mx-chips button.on{border-color:var(--green-hi);color:#fff}
.mx-fill{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;margin-top:18px;color:var(--soft);font-size:.84rem;font-weight:700}
.mx-fill .meter{margin:0}
.mx-fill b{font-variant-numeric:tabular-nums}

/* ladder */
.mx-ladder{display:grid;gap:10px}
.mx-rung{display:grid;grid-template-columns:200px 1fr 120px;grid-template-rows:auto auto;gap:6px 18px;align-items:center;padding:16px 20px;border-radius:var(--r-lg);border:1px solid var(--line);background:linear-gradient(170deg,#0c1a12,#06100a);position:relative;overflow:hidden}
.mx-rung:before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:linear-gradient(180deg,var(--m1),var(--m2))}
.mx-rung.basic{--m1:var(--basic-1);--m2:var(--basic-2)}.mx-rung.prem{--m1:var(--prem-1);--m2:var(--prem-2)}.mx-rung.biz{--m1:var(--biz-1);--m2:var(--biz-2)}.mx-rung.gold{--m1:var(--gold-1);--m2:var(--gold-2)}
.mx-rung .nm{display:grid;grid-row:1/3}
.mx-rung .st{color:var(--yellow);letter-spacing:.1em;font-size:.95rem;min-height:1.3em}
.mx-rung .nm b{font:400 1.6rem/1.1 var(--display);text-transform:uppercase;letter-spacing:.02em}
.mx-rung .nm small{color:var(--muted);font-weight:700;font-size:.8rem}
.mx-rung ul{margin:0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:4px 18px;color:var(--soft);font-size:.9rem}
.mx-rung li:before{content:"✓";margin-right:7px;color:var(--green-hi);font-weight:800}
.mx-rung .dp{grid-row:1/3;grid-column:3;text-align:right}
.mx-rung .dp b{display:block;font:400 2.4rem/1 var(--display);color:#fff}
.mx-rung .dp small{color:var(--muted);font-size:.72rem;font-weight:800;text-transform:uppercase;letter-spacing:.06em}
.mx-rung .db{grid-column:2;height:8px;border-radius:99px;background:#0f2118;overflow:hidden}
.mx-rung .db i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--m2),var(--m1));transform-origin:0 50%;transform:scaleX(0);transition:transform 1.1s var(--ease) .2s}
.mx-rung.in .db i{transform:none}

/* months */
.mx-months{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:8px;position:relative}
.mx-months li{display:grid;justify-items:center;gap:6px;padding:16px 8px;border-radius:var(--r-md);border:1px solid var(--line);background:linear-gradient(170deg,#0c1a12,#06100a);text-align:center}
.mx-months small{color:var(--muted);font-weight:800;font-size:.72rem;text-transform:uppercase;letter-spacing:.06em}
.mx-months i{display:grid;place-items:center;width:38px;height:38px;border-radius:50%}
.mx-months i svg{width:20px;height:20px}
.mx-months .ok i{background:rgba(52,204,136,.14);color:var(--green-hi)}
.mx-months .miss i{background:rgba(252,190,37,.12);color:var(--yellow)}
.mx-months .gone{border-color:rgba(229,72,77,.45);background:linear-gradient(170deg,#1c0d0e,#0d0606)}
.mx-months .gone i{background:rgba(229,72,77,.16);color:#ff7b7f}
.mx-months b{font-size:.84rem;line-height:1.3}
.mx-months span{font-size:.78rem;font-weight:800}
.mx-months .ok span{color:var(--green-hi)}.mx-months .miss span{color:var(--yellow)}.mx-months .gone span{color:#ff7b7f}

/* payday */
.mx-pay{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;counter-reset:p}
.mx-pay li{position:relative;padding:22px 20px;border-radius:var(--r-lg);border:1px solid var(--line);background:linear-gradient(170deg,#0c1a12,#06100a)}
.mx-pay li:not(:last-child):after{content:"";position:absolute;right:-12px;top:42px;width:10px;height:10px;border-top:2px solid var(--green-hi);border-right:2px solid var(--green-hi);transform:rotate(45deg);z-index:1}
.mx-pay .ic{display:grid;place-items:center;width:44px;height:44px;margin-bottom:12px;border-radius:12px;background:rgba(52,176,112,.12);color:var(--green-hi)}
.mx-pay .ic svg{width:22px;height:22px}
.mx-pay b{display:block;margin-bottom:4px}
.mx-pay p{margin:0;color:var(--muted);font-size:.9rem}

/* myths */
.mx-myths{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;align-items:start}
.mx-myth{border:1px solid var(--line);border-radius:var(--r-lg);background:linear-gradient(170deg,#0c1a12,#06100a);overflow:hidden}
.mx-myth summary{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;padding:16px 18px;cursor:pointer;list-style:none}
.mx-myth summary::-webkit-details-marker{display:none}
.mx-myth .x,.mx-myth .ok{display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:99px;font-size:.7rem;font-weight:800;text-transform:uppercase;letter-spacing:.06em}
.mx-myth .x{background:rgba(229,72,77,.12);color:#ff8a8d}
.mx-myth .ok{background:rgba(52,204,136,.14);color:var(--green-hi);margin-right:10px}
.mx-myth .x svg,.mx-myth .ok svg{width:13px;height:13px}
.mx-myth summary b{font-size:.98rem;line-height:1.35}
.mx-myth .chev{width:20px;height:20px;color:var(--muted);transition:transform .3s}
.mx-myth[open] .chev{transform:rotate(180deg)}
.mx-myth p{margin:0;padding:0 18px 18px;color:var(--soft)}

/* quiz */
.mx-quiz{max-width:760px;margin-inline:auto;padding:clamp(22px,3vw,34px)}
.mx-qhead{display:flex;justify-content:space-between;color:var(--muted);font-weight:800;font-size:.84rem}
.mx-qscore{color:var(--green-hi)}
.mx-quiz .meter{margin:10px 0 22px}
.mx-qa{display:grid;gap:10px;margin-top:16px}
.mx-qa button{display:flex;align-items:center;gap:12px;min-height:54px;padding:12px 16px;border-radius:14px;border:1px solid var(--line-2);background:#06110b;color:#fff;font:700 1rem var(--body);text-align:left;cursor:pointer;transition:border-color .2s,background .2s,transform .2s}
.mx-qa button:hover:not([disabled]){border-color:var(--green-hi);transform:translateX(3px)}
.mx-qa button .l{display:grid;place-items:center;flex:none;width:30px;height:30px;border-radius:9px;background:rgba(150,255,200,.08);font-size:.85rem}
.mx-qa button.right{border-color:var(--green-hi);background:rgba(52,204,136,.12)}
.mx-qa button.wrong{border-color:#e5484d;background:rgba(229,72,77,.1)}
.mx-qa button[disabled]{cursor:default}
.mx-quiz [hidden]{display:none!important}
.mx-qe{min-height:1.6em;margin:16px 0 0;color:var(--soft)}
.mx-qe b.g{color:var(--green-hi)}.mx-qe b.r{color:#ff8a8d}
.mx-qdone{text-align:center}
.mx-qdone b{display:block;font:400 4rem/1 var(--display);color:var(--green-hi)}

/* glossary */
.mx-gloss{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:0}
.mx-gloss>div{padding:16px 18px;border-radius:var(--r-md);border:1px solid var(--line);background:rgba(8,18,12,.6)}
.mx-gloss dt{font-weight:800;color:var(--yellow);margin-bottom:4px}
.mx-gloss dd{margin:0;color:var(--soft);font-size:.94rem}

/* download */
.mx-dl{display:grid;grid-template-columns:260px 1fr;gap:clamp(22px,4vw,44px);align-items:center;padding:clamp(22px,3vw,36px)}
.mx-dl-thumb{display:block;border-radius:18px;overflow:hidden;border:1px solid var(--line-2);box-shadow:0 26px 60px rgba(0,0,0,.5);transform:rotate(-2deg);transition:transform .4s var(--ease)}
.mx-dl-thumb:hover{transform:rotate(0) scale(1.02)}

@media (max-width:1060px){
  .mx-quick{grid-template-columns:repeat(3,minmax(0,1fr))}
  .mx-months{grid-template-columns:repeat(4,minmax(0,1fr))}
  .mx-gloss{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:860px){
  .mx-quick{grid-template-columns:repeat(2,minmax(0,1fr))}
  .mx-coin{grid-template-columns:1fr}
  .mx-dbl{grid-template-columns:minmax(0,1fr)}
  .mx-coin .arr{transform:rotate(90deg);height:30px}
  .mx-pay{grid-template-columns:repeat(2,minmax(0,1fr))}
  .mx-pay li:after{display:none}
  .mx-myths{grid-template-columns:1fr}
  .mx-rung{grid-template-columns:1fr auto;grid-template-rows:auto}
  .mx-rung .nm{grid-row:auto}
  .mx-rung .dp{grid-row:1;grid-column:2}
  .mx-rung ul,.mx-rung .db{grid-column:1/-1}
  .mx-dl{grid-template-columns:1fr}
  .mx-dl-thumb{max-width:240px}
}
@media (max-width:640px){
  .mx-quick{grid-template-columns:1fr}
  .mx-quick li{padding:18px 16px}
  .mx-months{grid-template-columns:repeat(2,minmax(0,1fr))}
  .mx-months .gone{grid-column:1/-1}
  .mx-pay{grid-template-columns:1fr}
  .mx-gloss{grid-template-columns:1fr}
  .mx-calc .calc-grid{grid-template-columns:1fr}
  .mx-fill{grid-template-columns:1fr auto}
  .mx-fill .meter{grid-column:1/-1;grid-row:2}
  .mx-tbl th,.mx-tbl td{padding:8px 10px;font-size:.84rem}
  .mx-tbl td.bar,.mx-tbl th.bar{display:none}
  .mx-build-top .btn-row .btn{width:auto;flex:1 1 auto}
  .mx-tree .rowlab{font-size:14px}
  .mx-tree text{font-size:15px}
}
@media (prefers-reduced-motion:reduce){.mx-tree .seat.spill circle,.mx-tree .drop{animation:none}.mx-rung .db i{transform:none;transition:none}}
@media (max-width:860px){.phero-grid:has(.mx-herovid) .phero-art{order:-1}}

/* ---- hero: "How to browse this guide" tour button (replaces the old kicker pill) ---- */
.tour{display:flex;align-items:center;flex-wrap:wrap;gap:8px 12px;margin-bottom:18px}
.btn-tour{--c1:#fff0b8;--c2:#fcbe25;min-height:38px;padding:0 14px 0 12px;font-size:.78rem;box-shadow:inset 0 0 0 1px rgba(252,190,37,.6)}
.btn-tour:hover{box-shadow:inset 0 0 0 1.5px #fcbe25,0 12px 28px rgba(0,0,0,.35)}
.btn-tour .play{width:24px;height:24px;margin-left:-4px}
.btn-tour .play svg{width:10px;height:10px}
.tour-tip{font-size:.8rem;line-height:1.35;color:var(--soft)}
.tour-tip b{color:#fcbe25;font-weight:800}

/* vertical (9:16) videos: the phone frame is part of the video, so no laptop around it */
.player.vert{aspect-ratio:9/16}
.player.vert video{object-fit:contain;background:#05120c}
.vt-vert{--top:76px;--bot:20px}
.vt-vert .vbox{--W:min(calc(100vw - 28px),calc((var(--vh) - var(--top) - var(--bot)) * 9 / 16))}
.vt-vert .vlid{padding:0;border:0;border-radius:22px;background:none;box-shadow:0 30px 90px rgba(0,0,0,.7),0 0 90px rgba(52,204,136,.18)}
.vt-vert .vscr{border-radius:22px}
.vt-vert .vcam,.vt-vert .vbase{display:none}
.vtheater.vt-vert.ufs:fullscreen .vbox{--W:min(100vw,calc(100dvh * 9 / 16))}
/* 10 reasons people are joining (home full, compact elsewhere) */
.why-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.why-card{position:relative;display:flex;flex-direction:column;gap:8px;padding:clamp(22px,3vw,30px);border:1px solid var(--line);border-radius:var(--r-lg);background:linear-gradient(160deg,#0a170f,#06110b);box-shadow:inset 0 1px 0 rgba(150,255,200,.05),0 18px 40px -28px rgba(0,0,0,.8);transition:border-color .35s,transform .35s var(--ease),background .35s}
.why-card:hover{border-color:var(--line-2);transform:translateY(-3px);background:linear-gradient(160deg,#0c1c13,#07130c)}
.why-card .h3{margin:0}
.why-card p{margin:0 0 6px;color:var(--muted)}
.why-card .tlink{margin-top:auto;align-self:flex-start;font-size:.92rem}
.why-n{font:400 1rem/1 var(--display);letter-spacing:.06em;color:var(--yellow)}
.why-card .why-n{position:absolute;top:clamp(22px,3vw,30px);right:clamp(22px,3vw,30px);font-size:1.25rem;opacity:.9}
.why-ic{display:grid;place-items:center;width:42px;height:42px;border-radius:12px;background:rgba(52,204,136,.12);border:1px solid rgba(52,204,136,.22);color:var(--green-hi)}
.why-ic svg{width:21px;height:21px}
.why-big{display:block;margin-top:6px;font:400 clamp(2rem,3.6vw,2.6rem)/1 var(--display);color:var(--green-hi);letter-spacing:.01em}
.why-cta{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:18px;margin-top:22px;padding:clamp(20px,3vw,28px);border:1px solid rgba(252,190,37,.28);border-radius:var(--r-lg);background:linear-gradient(120deg,rgba(252,190,37,.08),rgba(52,204,136,.06))}
.why-cta b{display:block;font-size:1.12rem;color:#fff}
.why-cta span{color:var(--soft)}
.why-cta .btn-row{margin:0}
.why-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.why-list li{display:flex;align-items:flex-start;gap:12px;padding:14px 16px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--panel)}
.why-list .why-n{flex:none;margin-top:12px;width:24px}
.why-list .why-ic{flex:none;width:38px;height:38px;border-radius:10px}
.why-list .why-ic svg{width:19px;height:19px}
.why-t{display:grid;gap:3px}
.why-t b{color:#fff;font-size:1rem}
.why-t small{color:var(--muted);font-size:.9rem;line-height:1.5}
@media (max-width:760px){.why-grid,.why-list{grid-template-columns:minmax(0,1fr)}.why-cta{flex-direction:column;align-items:flex-start}}
@media (prefers-reduced-motion:reduce){.why-card,.why-card:hover{transition:none;transform:none}}

/* =====================================================================
   CALCULATOR TOOLS: a premium device (glass and brushed panel, tactile keys,
   a dark display screen). Shared by the tool pages and the embedded copies.
   ===================================================================== */
.tool{position:relative;padding:clamp(18px,3vw,28px);border-radius:26px;border:1px solid rgba(150,255,200,.14);
  background:linear-gradient(165deg,#12251a 0%,#0a1710 46%,#07120c 100%);
  box-shadow:inset 0 1px 0 rgba(220,255,236,.12),inset 0 -1px 0 rgba(0,0,0,.6),0 30px 70px -40px rgba(0,0,0,.95),0 0 0 1px rgba(0,0,0,.35)}
.tool:before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:radial-gradient(120% 60% at 20% 0%,rgba(52,204,136,.10),transparent 60%)}
.tool-top{position:relative;display:flex;align-items:center;gap:12px;margin-bottom:18px}
.tool-top h3{margin:0;font-size:clamp(1.05rem,1.8vw,1.2rem);font-weight:800;color:#fff;flex:1}
.tool-led{width:10px;height:10px;border-radius:50%;background:var(--green-hi);box-shadow:0 0 0 3px rgba(52,204,136,.18),0 0 12px rgba(52,204,136,.8)}
.tool-reset{display:inline-flex;align-items:center;gap:7px;min-height:38px;padding:0 14px;border-radius:999px;border:1px solid var(--line-2);background:linear-gradient(180deg,#14281c,#0b1811);color:var(--soft);font:800 .8rem var(--body);cursor:pointer;box-shadow:inset 0 1px 0 rgba(220,255,236,.08),0 3px 0 #040b07;transition:transform .12s,box-shadow .12s,color .2s}
.tool-reset svg{width:14px;height:14px}
.tool-reset:hover{color:#fff}
.tool-reset:active{transform:translateY(2px);box-shadow:inset 0 1px 0 rgba(220,255,236,.05),0 1px 0 #040b07}
.tool-in{position:relative;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px 18px}
.tfield{display:grid;gap:8px;align-content:start}
.tfield.tspan{grid-column:1/-1}
.tfield>label{color:var(--soft);font-size:.82rem;font-weight:800;letter-spacing:.01em}
.tfield select{width:100%;min-height:52px;padding:0 40px 0 14px;border-radius:14px;border:1px solid rgba(150,255,200,.16);color:#fff;font:700 1rem var(--body);appearance:none;-webkit-appearance:none;cursor:pointer;
  background:#050f09 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2334cc88' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") right 14px center/16px no-repeat;
  box-shadow:inset 0 2px 6px rgba(0,0,0,.55),inset 0 -1px 0 rgba(220,255,236,.05);text-overflow:ellipsis}
.tfield select:focus-visible,.tspin input:focus-visible{outline:none;border-color:var(--green-hi);box-shadow:inset 0 2px 6px rgba(0,0,0,.55),0 0 0 3px rgba(52,204,136,.22)}
.tspin{display:flex;align-items:stretch;gap:8px}
.tspin input{flex:1;min-width:0;min-height:52px;padding:0 10px;border-radius:14px;border:1px solid rgba(150,255,200,.16);background:#050f09;color:#fff;text-align:center;font:400 1.55rem/1 var(--display);letter-spacing:.02em;box-shadow:inset 0 2px 6px rgba(0,0,0,.55),inset 0 -1px 0 rgba(220,255,236,.05);-moz-appearance:textfield}
.tspin input::-webkit-outer-spin-button,.tspin input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.tunit{display:grid;place-items:center;padding:0 2px;color:var(--green-hi);font:400 1.4rem var(--display)}
.tspin:has(.tunit) input{text-align:left}
.tkey{flex:none;width:52px;min-height:52px;border-radius:14px;border:1px solid rgba(150,255,200,.16);cursor:pointer;color:var(--green-hi);font:800 1.4rem/1 var(--body);
  background:linear-gradient(180deg,#183324,#0d1d14);box-shadow:inset 0 1px 0 rgba(220,255,236,.14),0 4px 0 #030a06,0 8px 16px -8px rgba(0,0,0,.8);transition:transform .1s,box-shadow .1s,background .2s;touch-action:manipulation;user-select:none}
.tkey:hover{background:linear-gradient(180deg,#1c3b2a,#102419)}
.tkey:active{transform:translateY(3px);box-shadow:inset 0 2px 4px rgba(0,0,0,.5),0 1px 0 #030a06}
.tkey:focus-visible{outline:2px solid var(--green-hi);outline-offset:2px}
.tfield .range{margin:4px 0 0}
.tchips{display:flex;flex-wrap:wrap;gap:6px}
.tchips button,.tex{min-height:34px;padding:0 12px;border-radius:10px;border:1px solid var(--line-2);background:linear-gradient(180deg,#0f1f16,#08130d);color:var(--soft);font:800 .8rem var(--body);cursor:pointer;box-shadow:0 2px 0 #030a06;transition:transform .1s,box-shadow .1s,border-color .2s,color .2s}
.tchips button:hover,.tex:hover{color:#fff;border-color:rgba(52,204,136,.45)}
.tchips button:active,.tex:active{transform:translateY(2px);box-shadow:0 0 0 #030a06}
.tchips button.on,.tex.on{color:#04180e;background:linear-gradient(180deg,#5fe0a6,var(--green-hi));border-color:transparent}
.tse{align-self:end;min-height:52px;align-content:center}
.tool-screen{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;margin-top:22px;border-radius:18px;overflow:hidden;border:1px solid rgba(0,0,0,.6);
  background:rgba(150,255,200,.08);box-shadow:inset 0 3px 14px rgba(0,0,0,.7),0 1px 0 rgba(220,255,236,.06)}
.ts-row{padding:16px 18px;background:radial-gradient(140% 120% at 50% 0%,#071a10,#030b06)}
.ts-row span{display:block;color:var(--muted);font-size:.74rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase}
.ts-row b{display:block;margin-top:6px;font:400 clamp(1.6rem,3vw,2.1rem)/1 var(--display);color:#eafff3;letter-spacing:.02em;font-variant-numeric:tabular-nums;text-shadow:0 0 18px rgba(52,204,136,.18)}
.ts-main b,.ts-row.ok b{color:var(--green-hi);text-shadow:0 0 22px rgba(52,204,136,.45)}
.ts-row.warn b{color:var(--yellow);text-shadow:0 0 20px rgba(252,190,37,.35)}
.ts-fill{grid-column:1/-1;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px;padding:12px 18px;background:#030b06;color:var(--soft);font-size:.8rem;font-weight:700}
.ts-fill .meter{margin:0}
.ts-fill b{color:#fff;font-variant-numeric:tabular-nums}
.tool-how{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin:16px 0 0;color:var(--soft);font-size:.95rem;line-height:1.5}
.badge-ill{display:inline-flex;align-items:center;min-height:26px;padding:0 10px;border-radius:999px;border:1px solid rgba(252,190,37,.35);background:rgba(252,190,37,.08);color:var(--yellow);font-size:.72rem;font-weight:800;letter-spacing:.03em;text-transform:uppercase;white-space:nowrap}
.tool-ex{margin-top:16px;padding-top:14px;border-top:1px dashed var(--line-2)}
.tool-ex p{margin:0 0 8px;color:var(--muted);font-size:.84rem;font-weight:700}
.tool-ex>div{display:flex;flex-wrap:wrap;gap:8px}
.tex{display:grid;gap:1px;min-height:46px;padding:6px 14px;text-align:left}
.tex b{font:400 1.1rem/1 var(--display);letter-spacing:.02em}
.tex small{font-size:.7rem;opacity:.85}
.tool .fine{margin-top:14px}
.tool-open{margin-top:6px}
.tool-wrap{max-width:900px}
@media (max-width:640px){
  .tool-screen{grid-template-columns:minmax(0,1fr)}
  .ts-main{order:-1}
  .ts-row{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:13px 16px}
  .ts-row b{margin:0}
  .ts-fill{grid-template-columns:1fr auto}
  .ts-fill .meter{grid-column:1/-1;grid-row:2}
  .tkey{width:56px;min-height:56px}
  .tspin input{min-height:56px}
}
/* tables that become cards on phones */
@media (max-width:640px){
  .tbl-stack thead{display:none}
  .tbl-stack,.tbl-stack tbody,.tbl-stack tr,.tbl-stack td{display:block;width:100%}
  .tbl-stack tr{padding:12px 14px;border-bottom:1px solid var(--line)}
  .tbl-stack td{display:flex;justify-content:space-between;gap:12px;padding:4px 0;border:0;text-align:right}
  .tbl-stack td:before{content:attr(data-label);color:var(--muted);font-size:.78rem;font-weight:800;text-align:left}
  .tbl-stack td:first-child{font-weight:800;color:#fff}
}
@media (prefers-reduced-motion:reduce){.tkey,.tool-reset,.tchips button,.tex{transition:none}}

/* ---- Tap to open bar: full title, progress dots, clear "Open all sections" pill ---- */
.chap-peek h2{display:none}
.un-tx b{white-space:normal;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;line-height:1.3}
.un-dots{display:flex;gap:5px;margin-top:6px}
.un-dots i{width:7px;height:7px;border-radius:50%;background:rgba(150,255,200,.18);transition:background .3s,transform .3s}
.un-dots i.on{background:var(--green-hi)}
.un-dots i.cur{background:var(--yellow);transform:scale(1.25);box-shadow:0 0 8px rgba(252,190,37,.6)}
.un-go:active .un-chev{transform:scale(.9)}
.un-chev{transition:transform .15s}
.un-all{display:inline-flex;align-items:center;gap:7px;min-height:36px;padding:0 14px;border:1px solid var(--line-2);border-radius:999px;background:rgba(6,17,11,.85);color:var(--soft);font:800 .78rem var(--body);text-decoration:none;box-shadow:0 2px 0 #030a06;transition:color .2s,border-color .2s,transform .1s,box-shadow .1s}
.un-all svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.un-all:hover{color:#fff;border-color:rgba(52,204,136,.45)}
.un-all:active{transform:translateY(2px);box-shadow:none}
/* chapter menu on laptops: one row that scrolls sideways */
@media (min-width:1061px){
  .secnav .sn-list{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding:2px 24px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 24px,#000 calc(100% - 24px),transparent);mask-image:linear-gradient(90deg,transparent,#000 24px,#000 calc(100% - 24px),transparent);scroll-snap-type:x proximity}
  .secnav .sn-list::-webkit-scrollbar{display:none}
  .secnav .sn-i{flex:none;scroll-snap-align:center}
}
/* ---- FAQ: share an answer, highlight a linked answer, search ---- */
.qa-link{display:inline-flex;align-items:center;gap:7px;margin-top:12px;min-height:34px;padding:0 12px;border-radius:999px;border:1px solid var(--line-2);background:transparent;color:var(--muted);font:700 .78rem var(--body);cursor:pointer;transition:color .2s,border-color .2s}
.qa-link svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.qa-link:hover{color:#fff;border-color:rgba(52,204,136,.45)}
.qa-link.done{color:var(--green-hi);border-color:rgba(52,204,136,.6)}
.qa.qa-hl{border-color:var(--yellow);box-shadow:0 0 0 4px rgba(252,190,37,.15);transition:box-shadow .4s,border-color .4s}
.faq-search{display:grid;gap:8px;margin-bottom:26px;padding:16px;border:1px solid var(--line-2);border-radius:18px;background:linear-gradient(165deg,#10221a,#07120c);box-shadow:inset 0 1px 0 rgba(220,255,236,.08)}
.faq-search label{display:flex;align-items:center;gap:8px;color:var(--soft);font-size:.85rem;font-weight:800}
.faq-search label svg{width:18px;height:18px;color:var(--green-hi)}
.faq-search input{width:100%;min-height:52px;padding:0 16px;border-radius:14px;border:1px solid rgba(150,255,200,.16);background:#050f09;color:#fff;font:700 1rem var(--body);box-shadow:inset 0 2px 6px rgba(0,0,0,.55)}
.faq-search input:focus-visible{outline:none;border-color:var(--green-hi);box-shadow:inset 0 2px 6px rgba(0,0,0,.55),0 0 0 3px rgba(52,204,136,.22)}
.faq-count{color:var(--green-hi);font-size:.8rem;font-weight:800;min-height:1em}
.faq-none{margin:0;color:var(--soft)}
section.faq-empty,.faq-cols.faq-empty{display:none}
details.qa[hidden]{display:none}
/* ---- one tactile feel for every button and chip ---- */
.btn:active{transform:translateY(2px)}
.btn:focus-visible,.tchips button:focus-visible,.tex:focus-visible,.tool-reset:focus-visible,.un-go:focus-visible,.un-all:focus-visible,.qa summary:focus-visible,.qa-link:focus-visible{outline:2px solid var(--yellow);outline-offset:3px}
.mx-chips button:active,.secnav .sn-i:active{transform:translateY(1px)}
@media (prefers-reduced-motion:reduce){.btn:active,.un-dots i{transform:none;transition:none}}
/* the tool adapts to its own width (narrow columns on laptops behave like a phone) */
.tool{container-type:inline-size}
@container (max-width:620px){
  .tool-screen{grid-template-columns:minmax(0,1fr)}
  .ts-main{order:-1}
  .ts-row{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:13px 16px}
  .ts-row b{margin:0}
  .ts-fill{grid-template-columns:1fr auto}
  .ts-fill .meter{grid-column:1/-1;grid-row:2}
}

/* section buttons: capitalize each word (MTG, 16 Oct 2026) */
.un-tx b,.un-all{text-transform:capitalize}

/* ---- referral helpers: exchange note and builder traffic (Oct 2026) ---- */
.note.exch{border-color:rgba(52,176,112,.3);background:rgba(52,176,112,.06);color:var(--soft)}
.note.exch>svg{color:var(--green-hi)}
.note.exch b{color:var(--text,#eef5f1)}
.note.exch .btn-row,.note.cbp-band .btn-row{flex-wrap:wrap;gap:10px}
.note.exch .btn svg,.note.cbp-band .btn svg{width:16px;height:16px;margin-right:6px;color:currentColor}
.note.cbp-band{border-color:rgba(252,190,37,.3)}
.note.cbp-band b{color:var(--text,#eef5f1)}
.panel.cbp{display:grid;grid-template-columns:1.35fr 1fr;gap:34px;padding:clamp(24px,4vw,44px);align-items:start}
.panel.cbp .kick{display:inline-flex;align-items:center;gap:8px;margin-bottom:12px;padding:6px 12px;border-radius:999px;background:rgba(252,190,37,.12);color:var(--yellow);font-size:.8rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase}
.panel.cbp .kick svg{width:15px;height:15px}
.panel.cbp .lead{margin-top:12px}
.panel.cbp .checks{margin-top:16px}
.panel.cbp .btn-go svg{width:18px;height:18px;margin-left:8px}
.cbp-rule{display:flex;flex-direction:column;gap:14px}
.note.warn{border-color:rgba(252,190,37,.35);background:rgba(252,190,37,.07)}
.note.warn b{color:var(--yellow)}
@media (max-width:860px){.panel.cbp{grid-template-columns:1fr;gap:20px}}
/* Play button sits in the empty space under the cards so the thumbnail headline stays readable */
.player.pb-low .pbtn{left:60%;top:80%}

/* ---- MTG Dashboard Standard: 🏡 GO HOME wears the orbiting ring like every CTA, same label style on every MTG dashboard ---- */
.gohome{text-transform:uppercase;letter-spacing:.1em;font-size:.74rem}
.gohome .emo{font-size:1.05rem;line-height:1;letter-spacing:0;display:inline-block;transition:transform .35s var(--spring)}
.gohome:hover .emo{transform:translateY(-2px) rotate(-8deg) scale(1.12)}
.btn.gohome:after{animation-delay:-3s}
@media (prefers-reduced-motion:reduce){.gohome:hover .emo{transform:none}}
/* Phone fit for every 16:9 video (class mfit, added by bellver.js): the whole 16:9 frame always shows.
   Full screen keeps the full picture (no cropping of the captions at the bottom), and on phones the
   laptop frame gets slimmer, the top gap shrinks and the close button gets smaller, so the video is as big as the screen allows. */
.player.mfit video{object-fit:contain;background:#000}
.player.mfit video:fullscreen,.player.mfit video:-webkit-full-screen{object-fit:contain!important}
/* phones: a slim laptop frame (thin bezel and base) so the video stays big and the laptop look stays */
@media (orientation:landscape) and (max-height:500px),(orientation:portrait) and (max-width:640px){
  .vtheater.mfit:not(.vt-vert){--bz:6px;--bs:10px;--oh:10px}
  .vtheater.mfit:not(.vt-vert) .vlid{border-radius:10px 10px 3px 3px}
  .vtheater.mfit:not(.vt-vert) .vscr{border-radius:3px}
  .vtheater.mfit:not(.vt-vert) .vcam{width:3px;height:3px;margin-left:-1.5px;top:1.5px}
  .vtheater.mfit:not(.vt-vert) .vbase{border-radius:0 0 12px 12px / 0 0 8px 8px}
  .vtheater.mfit:not(.vt-vert) .vbase i{height:4px}
}
@media (orientation:landscape) and (max-height:500px){
  .vtheater.mfit:not(.vt-vert){--top:6px;--bot:6px}
  .vtheater.mfit:not(.vt-vert) .vbox{top:50%;--W:min(calc(100vw - 2 * max(56px,env(safe-area-inset-left),env(safe-area-inset-right))),calc((var(--vh) - 12px - 2 * var(--bz) - var(--bs)) * 16 / 9 + 2 * var(--bz)))}
  .vtheater.mfit:not(.vt-vert) .vclose{width:36px;height:36px;top:max(8px,env(safe-area-inset-top));right:max(8px,env(safe-area-inset-right))}
  .vtheater.mfit:not(.vt-vert) .vclose svg{width:17px;height:17px}
}
@media (orientation:portrait) and (max-width:640px){
  .vtheater.mfit:not(.locked):not(.vt-vert) .vbox{--W:min(calc(var(--vh) - 70px - 2 * var(--oh)),calc((100vw - 16px - 2 * var(--bz) - var(--bs)) * 16 / 9 + 2 * var(--bz)));top:calc(50% + 27px)}
  .vtheater.mfit:not(.vt-vert) .vclose{width:38px;height:38px;top:max(10px,env(safe-area-inset-top));right:max(10px,env(safe-area-inset-right))}
  .vtheater.mfit:not(.vt-vert) .vclose svg{width:18px;height:18px}
}
.player.pb-mid .pbtn{left:74%;top:46%}

/* ---- Pedestal icons (inspired by Bellver's roadmap: objects on glowing glass pedestals) ---- */
.ped{position:relative;display:block;width:104px;height:92px;margin:-6px 0 2px -6px;flex:none}
.ped:before{content:"";position:absolute;left:8px;right:8px;bottom:9px;height:24px;border-radius:50%;
 background:radial-gradient(ellipse at 50% 30%,#21422f,#0b1d14 62%,#06130c);border:1.5px solid rgba(123,224,168,.8);
 box-shadow:0 6px 0 -1px #0a1d14,0 6px 0 0 rgba(123,224,168,.28),0 0 14px rgba(123,224,168,.45),0 0 36px rgba(52,176,112,.32),inset 0 0 10px rgba(123,224,168,.3);
 transition:box-shadow .4s var(--ease),border-color .4s}
.ped:after{content:"";position:absolute;left:20px;right:20px;bottom:20px;height:58px;border-radius:50% 50% 40% 40%;pointer-events:none;
 background:radial-gradient(ellipse at 50% 100%,rgba(123,224,168,.30),rgba(123,224,168,.08) 45%,transparent 72%);transition:opacity .4s;opacity:.85}
.ped-obj{position:absolute;z-index:1;left:50%;top:2px;width:56px;height:56px;margin-left:-28px;display:grid;place-items:center;border-radius:17px;
 background:linear-gradient(155deg,#2a5c43 0%,#123526 45%,#0a2017 100%);border:1px solid rgba(160,255,205,.38);
 box-shadow:inset 0 1px 0 rgba(255,255,255,.28),inset 0 -5px 10px rgba(0,0,0,.45),0 12px 16px -8px rgba(0,0,0,.9),0 0 20px rgba(52,204,136,.22);
 transition:transform .5s var(--spring),box-shadow .4s;animation:pedFloat 5.5s ease-in-out infinite}
.ped-obj:before{content:"";position:absolute;inset:3px 6px auto;height:40%;border-radius:13px 13px 40% 40%;background:linear-gradient(180deg,rgba(255,255,255,.16),transparent);pointer-events:none}
.ped-obj svg{width:30px;height:30px;stroke-width:2.1;color:#8ff0bd;filter:drop-shadow(0 0 6px rgba(123,224,168,.55))}
.ped-gold .ped-obj{border-color:rgba(252,190,37,.55);background:linear-gradient(155deg,#3a4a22 0%,#15301f 45%,#0a2017 100%);box-shadow:inset 0 1px 0 rgba(255,236,170,.35),inset 0 -5px 10px rgba(0,0,0,.45),0 12px 16px -8px rgba(0,0,0,.9),0 0 22px rgba(252,190,37,.18)}
.ped-gold .ped-obj svg{color:#ffd46a;filter:drop-shadow(0 0 6px rgba(252,190,37,.5))}
:is(.why-card,.gtile,.box):nth-child(2n) .ped-obj{animation-delay:-2.7s}
:is(.why-card,.gtile,.box):nth-child(3n) .ped-obj{animation-delay:-1.4s}
.gstep:nth-of-type(2n) .ped-obj{animation-delay:-2.7s}
:is(.why-card,.gtile,.gstep,.box,.feat,.step,.fact,.checklist,.why-list li,.mx-quick li,.mx-pay li):hover .ped-obj{transform:translateY(-5px) scale(1.04)}
:is(.why-card,.gtile,.gstep,.box,.feat,.step,.fact,.checklist,.why-list li,.mx-quick li,.mx-pay li):hover .ped:before{border-color:#9ff5c8;box-shadow:0 6px 0 -1px #0a1d14,0 6px 0 0 rgba(123,224,168,.38),0 0 20px rgba(123,224,168,.6),0 0 48px rgba(52,176,112,.42),inset 0 0 12px rgba(123,224,168,.4)}
:is(.why-card,.gtile,.gstep,.box,.feat,.step,.fact,.checklist,.why-list li,.mx-quick li,.mx-pay li):hover .ped:after{opacity:1}
@keyframes pedFloat{0%,100%{translate:0 0}50%{translate:0 -4px}}
@media (max-width:760px){.ped{width:92px;height:82px}.ped-obj{width:50px;height:50px;margin-left:-25px;border-radius:15px}.ped-obj svg{width:27px;height:27px}}
@media (prefers-reduced-motion:reduce){.ped-obj{animation:none}:is(.why-card,.gtile,.gstep,.box,.feat,.step,.fact,.checklist,.why-list li,.mx-quick li,.mx-pay li):hover .ped-obj{transform:none}}

/* pedestal variants and placements */
.ped-red .ped-obj{border-color:rgba(255,122,102,.55);background:linear-gradient(155deg,#4a2a22,#2a1712 45%,#160d0a 100%);box-shadow:inset 0 1px 0 rgba(255,200,190,.3),inset 0 -5px 10px rgba(0,0,0,.45),0 12px 16px -8px rgba(0,0,0,.9),0 0 22px rgba(255,110,90,.16)}
.ped-red .ped-obj svg{color:#ff8f7c;filter:drop-shadow(0 0 6px rgba(255,110,90,.45))}
.ped-num .ped-obj{font:400 1.9rem/1 var(--display);color:#fff;text-shadow:0 0 12px rgba(123,224,168,.55),0 2px 0 rgba(0,0,0,.4)}
.ped-sm{width:88px;height:78px;margin:-6px 0 4px -6px}
.ped-sm:before{left:8px;right:8px;bottom:8px;height:20px}
.ped-sm:after{left:18px;right:18px;bottom:17px;height:48px}
.ped-sm .ped-obj{width:48px;height:48px;margin-left:-24px;border-radius:14px}
.ped-sm .ped-obj svg{width:24px;height:24px}
.box .ped{margin:-10px 0 8px -8px}
@media (min-width:641px){.gstep{grid-template-columns:104px minmax(0,1fr)}}
.gstep .ped{margin:-8px 0 0 -8px}
@media (max-width:760px){.gstep .ped{margin:-6px 0 -4px -6px}.ped-sm{width:84px;height:74px}}

/* pedestal sizes and placements, sitewide */
.ped-xs{width:70px;height:62px;margin:-4px -2px -4px -6px}
.ped-xs:before{left:6px;right:6px;bottom:6px;height:16px;box-shadow:0 4px 0 -1px #0a1d14,0 4px 0 0 rgba(123,224,168,.28),0 0 10px rgba(123,224,168,.4),0 0 24px rgba(52,176,112,.28),inset 0 0 8px rgba(123,224,168,.28)}
.ped-xs:after{left:14px;right:14px;bottom:12px;height:38px}
.ped-xs .ped-obj{width:40px;height:40px;margin-left:-20px;border-radius:12px;top:1px}
.ped-xs .ped-obj:before{border-radius:9px 9px 40% 40%}
.ped-xs .ped-obj svg{width:20px;height:20px}
.fact .ped-xs{flex:none}
.why-list .ped-xs{margin-top:-6px}
.ped-step{margin:0 auto 8px;position:relative;z-index:1}
.step .ped-step .ped-obj:after{counter-increment:st;content:counter(st);position:absolute;top:-7px;right:-7px;display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--yellow);color:#1d1300;font:800 .72rem var(--body);box-shadow:0 2px 6px rgba(0,0,0,.5)}
.ped-feat{position:absolute;right:clamp(14px,2.4vw,26px);top:clamp(12px,2vw,22px)}
.ck-ped{margin:-8px 0 -6px -6px}
.mx-quick .ped-sm,.mx-pay .ped-sm{margin:-8px 0 6px -8px}
@media (max-width:760px){.ped-feat{transform:scale(.85);transform-origin:top right}}