/* W2 marketing pages — prototype-derived presentation only. */

:root{--violet:#522C87;--violet-9:#261547;--violet-7:#3B1F67;--lilac:#EFE7FB;--lilac-2:#D4C4E9;--yellow:#FFD23F;--yellow-2:#FEE6AB;--ink:#1F1A2B;--sec:#5F5A6B;--bg:#FFFFFF;--surface:#FFFFFF;--line:#EDE6D6;--cream:#FFFAEB;color-scheme:light;
--rookie:#B6E9EC;--contender:#FFCFE0;--pro:#C4ACEE;--allstar:#FECE62;--r-lg:14px;--r-md:10px;
box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--bg:#FFFFFF;--surface:#FFFFFF;--ink:#1F1A2B;--sec:#5F5A6B;--line:#EDE6D6;--lilac:#F4EEFB}}
:root[data-theme="dark"]{--bg:#FFFFFF;--surface:#FFFFFF;--ink:#1F1A2B;--sec:#5F5A6B;--line:#EDE6D6;--lilac:#F4EEFB}
*,*::before,*::after{box-sizing:border-box}
html{overflow-x:clip;scroll-padding-top:env(safe-area-inset-top,0px);scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:Figtree,system-ui,-apple-system,"Segoe UI",sans-serif;font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit}
:focus-visible{outline:3px solid var(--yellow);outline-offset:3px;border-radius:8px}
.wrap{max-width:1200px;margin:0 auto;padding:0 24px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:52px;padding:0 24px;border-radius:10px;font-weight:800;font-size:16px;text-decoration:none;border:0;cursor:pointer;font-family:inherit;transition:transform .2s ease}
.btn:hover{transform:translateY(-2px)}
.btn-v{background:var(--violet);color:#fff} .btn-y{background:var(--yellow);color:var(--violet-9)} .btn-o{background:#fff;color:var(--ink);box-shadow:inset 0 0 0 2px var(--ink)}
h1,h2,h3{margin:0;font-weight:800;letter-spacing:-0.025em;line-height:1.06}
h2{font-size:clamp(30px,4.2vw,50px)}
.lede{font-size:clamp(17px,1.6vw,20px);color:var(--sec);max-width:34em}
/* hero */
.hero{padding:32px 0 64px;overflow-x:clip;background:var(--yellow);color:var(--ink)}.hero .lede{color:#4A3A10}
.hero .wrap{display:grid;grid-template-columns:1.05fr 1fr;gap:40px;align-items:center}
.hero h1{font-size:clamp(38px,4.8vw,66px)}
.hero h1 span{display:block}
.hero .lede{margin:24px 0 32px}
.cta-row{display:flex;gap:12px;flex-wrap:wrap}
.proof{display:flex;gap:8px;flex-wrap:wrap;margin-top:28px;padding:0;list-style:none}
.proof li{font-size:14px;font-weight:700;background:rgba(255,255,255,.7);padding:8px 12px;border-radius:8px}
@media (max-width:980px){.hero .wrap{grid-template-columns:1fr}}
/* deck */
.deck{position:relative;height:560px;max-width:560px;width:100%;justify-self:center}
.deck-bg{position:absolute;inset:40px 10px 30px;border-radius:20px;background:#fff;transform:rotate(-4deg);box-shadow:0 20px 50px rgba(91,53,22,.18)}
.deck-bg::after{content:"";position:absolute;right:-14px;top:-14px;width:56px;height:56px;border-radius:12px;background:var(--violet);transform:rotate(12deg)}
.dk-card{position:absolute;border-radius:var(--r-lg);overflow:hidden;background:var(--surface);box-shadow:0 18px 40px rgba(91,53,22,.22);transition:transform .7s cubic-bezier(.2,.8,.2,1),opacity .5s ease}
.dk-creator{width:300px;height:430px;left:36px;top:60px}
.dk-creator img{width:100%;height:320px;object-fit:cover;object-position:top}
.dk-meta{height:110px;background:var(--arch);color:var(--violet-9);padding:12px 16px;display:flex;flex-direction:column;gap:1px}
.dk-meta b{font-size:21px;letter-spacing:-.01em} .dk-meta span{font-size:14px;font-weight:600}
.dk-arch{position:absolute;top:14px;left:14px;background:var(--surface);color:var(--violet-9);padding:4px 10px;border-radius:6px;font-size:12px!important;font-weight:800!important}
.dk-town{opacity:.8}
.dk-biz{width:260px;height:300px;right:10px;top:220px;opacity:0;transform:translateX(120px) rotate(10deg)}
.dk-biz>img,.dk-logo-only{width:100%;height:190px;object-fit:cover}
.dk-logo-only{display:flex;align-items:center;justify-content:center;background:var(--lilac);padding:26px} .dk-logo-only img{max-height:120px;object-fit:contain}
.dk-bmeta{display:flex;gap:10px;align-items:center;padding:12px 14px;color:var(--ink)}
.dk-bmeta b{display:block;font-size:17px} .dk-bmeta span{font-size:13px;color:var(--sec)}
.dk-logochip{width:44px;height:44px;border-radius:8px;background:#fff;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;padding:5px;flex-shrink:0}
.dk-logochip img{max-height:100%;object-fit:contain}
.dk-creator{transform:translate(calc(var(--pos,0)*14px),calc(var(--pos,0)*10px)) rotate(calc(var(--pos,0)*-3deg)) scale(calc(1 - var(--pos,0)*.04));z-index:calc(10 - var(--pos,0))}
.dk-creator.is-top{transform:rotate(-4deg)}
.dk-creator.is-out{transform:translate(90px,-10px) rotate(-2deg);z-index:12}
.dk-creator.is-gone{transform:translate(-160%,40px) rotate(-24deg);opacity:0}
.dk-biz.is-in{opacity:1;transform:rotate(5deg);z-index:13}
.dk-biz.is-gone{opacity:0;transform:translate(160%,60px) rotate(24deg)}
.stamp{position:absolute;left:50%;top:60%;z-index:20;transform:translate(-50%,-50%) rotate(-10deg) scale(.3);opacity:0;background:var(--violet);color:#fff;font-weight:900;font-size:clamp(28px,4vw,40px);letter-spacing:-.02em;padding:14px 24px;border-radius:12px;box-shadow:0 0 0 5px #fff,0 18px 40px rgba(38,21,71,.3);pointer-events:none;white-space:nowrap}
.stamp.on{animation:stamp 1.6s cubic-bezier(.2,1.6,.3,1) forwards}
@keyframes stamp{0%{opacity:0;transform:translate(-50%,-50%) rotate(-10deg) scale(.3)}18%{opacity:1;transform:translate(-50%,-50%) rotate(-10deg) scale(1.08)}30%{transform:translate(-50%,-50%) rotate(-10deg) scale(1)}80%{opacity:1}100%{opacity:0;transform:translate(-50%,-50%) rotate(-10deg) scale(1)}}
.burst{position:absolute;left:50%;top:60%;z-index:19;pointer-events:none}
.burst i{position:absolute;width:14px;height:14px;background:var(--violet);clip-path:polygon(0 0,100% 50%,0 100%);opacity:0}
.burst.on i{animation:ray .9s ease-out forwards}
@keyframes ray{0%{opacity:1;transform:rotate(var(--a)) translateX(10px) scale(.6)}100%{opacity:0;transform:rotate(var(--a)) translateX(150px) scale(1.2)}}
.dk-hint{position:absolute;bottom:0;left:0;right:0;text-align:center;font-size:13px;font-weight:700;color:#5B4A10}
@media (max-width:560px){.deck{height:540px}.dk-creator{width:250px;height:370px;left:10px}.dk-creator img{height:270px}.dk-meta{height:100px}.dk-biz{width:210px;height:260px;right:0;top:230px}.dk-biz>img,.dk-logo-only{height:160px}}
/* ribbon */
.ribbon{background:#fff;padding:18px 0;overflow:hidden;border-bottom:1px solid var(--line)}
.rb-track{display:flex;gap:14px;width:max-content;list-style:none;margin:0;padding:0;animation:marq 48s linear infinite}
.ribbon:hover .rb-track{animation-play-state:paused}
.rb-item{display:flex;align-items:center;gap:12px;background:var(--cream);color:var(--ink);border-radius:10px;padding:6px 16px 6px 6px}
.rb-item img{width:46px;height:46px;border-radius:8px;object-fit:cover;object-position:top}
.rb-item b{display:block;font-size:15px} .rb-item small{font-size:13px;color:var(--sec)}
@keyframes marq{to{transform:translateX(-50%)}}
/* sections */
section{padding:110px 0}
.why .wrap{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.why-visual{position:relative;height:560px;overflow-x:clip}
.why-block{position:absolute;inset:40px 40px 0 0;background:var(--yellow);border-radius:20px}
.why-person{position:absolute;left:8%;bottom:0;height:540px;width:auto;z-index:2}
.dms{position:absolute;inset:30px 0 70px 52%;z-index:3}
.dm{position:absolute;left:var(--x);top:var(--y);background:var(--surface);color:var(--ink);font-weight:700;font-size:14px;padding:9px 14px;border-radius:12px 12px 12px 3px;box-shadow:0 10px 24px rgba(38,21,71,.18);transform:rotate(var(--r));transition:all .8s cubic-bezier(.6,-0.2,.3,1) var(--d);white-space:nowrap}
.room{position:absolute;z-index:4;right:0;top:34%;width:300px;background:var(--surface);border-radius:14px;padding:18px;border:1px solid var(--line);box-shadow:0 24px 50px rgba(38,21,71,.3);opacity:0;transform:scale(.6);transition:all .6s cubic-bezier(.2,1.4,.3,1) .7s}
.room b{font-size:16px} .room p{margin:4px 0 12px;font-size:13px;color:var(--sec)}
.room ol{display:flex;gap:4px;padding:0;margin:0;list-style:none} .room ol li{flex:1;height:8px;border-radius:9px;background:var(--line)} .room ol li.d{background:#12A150} .room ol li.c{background:var(--violet)}
.room .rs{display:flex;justify-content:space-between;font-size:12px;font-weight:700;color:var(--sec);margin-top:8px}
.why.tidy .dm{left:30%;top:44%;opacity:0;transform:rotate(0) scale(.4)}
.why.tidy .room{opacity:1;transform:scale(1)}
.why-copy p{color:var(--sec);font-size:18px;max-width:30em}
@media (max-width:900px){.why .wrap{grid-template-columns:1fr}.why-visual{height:480px}.why-person{height:460px}}
/* how */
.how{background:var(--cream);color:var(--ink)}
.how h2{max-width:12em}
.how .grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;margin-top:56px;align-items:start}
.steps{list-style:none;margin:0;padding:0;position:relative}
.steps::before{content:"";position:absolute;left:21px;top:22px;bottom:22px;width:4px;border-radius:4px;background:#EADFBF}
.steps .fill{position:absolute;left:21px;top:22px;width:4px;border-radius:4px;background:var(--violet);height:var(--p,0%);transition:height .3s ease}
.st{position:relative;display:flex;gap:18px;padding:18px 0;opacity:.5;transition:opacity .4s}
.st.on{opacity:1}
.st-dot{width:46px;height:46px;border-radius:12px;background:#fff;color:var(--sec);border:2px solid #EADFBF;display:flex;align-items:center;justify-content:center;font-weight:900;flex-shrink:0;z-index:1;transition:background .4s,color .4s}
.st.on .st-dot{background:var(--violet);color:#fff;border-color:var(--violet)}
.st b{font-size:20px;font-weight:700;letter-spacing:-.01em} .st p{margin:4px 0 0;color:var(--sec);max-width:26em}
.how-panel{position:sticky;top:120px;background:var(--surface);color:var(--ink);border-radius:16px;padding:26px;border:1px solid var(--line);box-shadow:0 20px 40px rgba(91,53,22,.12)}
.how-panel .hp-top{display:flex;gap:12px;align-items:center;margin-bottom:18px}
.hp-pair{display:flex} .hp-pair span{width:48px;height:48px;border-radius:10px;border:3px solid #fff;overflow:hidden;display:block} .hp-pair span+span{margin-left:-14px}
.hp-pair img{width:100%;height:100%;object-fit:cover;object-position:top}
.hp-track{display:flex;gap:6px;margin:14px 0} .hp-track i{flex:1;height:10px;border-radius:10px;background:var(--line);transition:background .4s} .hp-track i.d{background:#12A150} .hp-track i.c{background:var(--violet)}
.hp-state{background:var(--cream);border-radius:10px;padding:16px;min-height:112px}
.hp-state b{display:block;font-size:18px} .hp-state span{color:var(--sec);font-size:15px}
@media (max-width:900px){.how .grid{grid-template-columns:1fr}.how-panel{position:relative;top:0;order:-1}}
/* types (rail) */
.types .head{display:flex;justify-content:space-between;align-items:end;gap:20px;flex-wrap:wrap}
.rail-nav{display:flex;gap:8px} .rail-nav button{width:48px;height:48px;border-radius:10px;border:2px solid var(--ink);background:#fff;color:var(--ink);display:flex;align-items:center;justify-content:center;cursor:pointer}
.rail{display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;padding:36px 24px 20px;margin:0 -24px;list-style:none;scrollbar-width:none}
.rail::-webkit-scrollbar{display:none}
.rl-card{flex:0 0 280px;scroll-snap-align:start;background:var(--bg);border-radius:16px;overflow:hidden;display:flex;flex-direction:column;transition:transform .3s ease}
.rl-card:hover{transform:translateY(-6px) rotate(-1deg)}
.rl-card img{width:100%;height:300px;object-fit:contain;object-position:bottom}
.rl-card div{background:#fff;padding:14px 16px;display:flex;flex-direction:column;gap:2px;flex-grow:1} .rl-card b{font-size:19px} .rl-card span{font-size:14px;font-weight:700;color:var(--violet)} .rl-card small{font-size:14px;line-height:20px;color:var(--sec)}
/* brands */
.brands{padding:80px 0}
.brands ul{list-style:none;padding:0;margin:32px 0 0;display:flex;gap:18px;flex-wrap:wrap}
.brands li{flex:1 1 220px;height:128px;background:var(--surface);border:1px solid var(--line);border-radius:12px;display:flex;align-items:center;justify-content:center;padding:18px 28px}
.brands li img{width:100%;max-width:220px;height:72px;object-fit:contain}
/* pilot */
.pilot .card{background:var(--yellow);border-radius:20px;display:grid;grid-template-columns:1.2fr .8fr;gap:24px;overflow:hidden;padding:64px 0 0 64px;color:var(--violet-9)}
.pilot h2{font-size:clamp(30px,3.8vw,46px)} .pilot p{font-size:18px;max-width:30em}
.pilot img{align-self:end;height:500px;width:auto;justify-self:center}
@media (max-width:900px){.pilot .card{grid-template-columns:1fr;padding:40px 28px 0}.pilot img{height:380px}}
/* final */
.final{text-align:center;padding:120px 0}
.final h2{font-size:clamp(38px,5.6vw,72px);max-width:11em;margin:0 auto}
.final .cta-row{justify-content:center;margin-top:36px}
.faces{display:flex;justify-content:center;margin-top:44px} .faces img{width:64px;height:64px;border-radius:14px;object-fit:cover;object-position:top;border:4px solid var(--bg);margin-left:-14px}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}html{scroll-behavior:auto}}

.hero-c .wrap{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center}
.hero-c h1{font-size:clamp(38px,4.8vw,66px)} .hero-c .sub{font-size:clamp(19px,1.8vw,24px);font-weight:800;margin:18px 0 0}
.phone-scene{position:relative;height:560px}
.pc-card{position:absolute;left:2%;top:40px;width:270px;border-radius:14px;overflow:hidden;background:#fff;transform:rotate(-4deg);box-shadow:0 18px 40px rgba(91,53,22,.22)}
.pc-card img{width:100%;height:320px;object-fit:cover;object-position:top}
.pc-card .dk-meta{height:auto;padding:12px 16px}
.pc-card .dk-arch{position:absolute}
.notes{position:absolute;right:-10px;top:120px;width:300px;display:flex;flex-direction:column;gap:12px}
.nt{display:flex;gap:12px;align-items:center;background:#fff;border-radius:12px;padding:12px 14px;box-shadow:0 14px 30px rgba(91,53,22,.18);opacity:0;transform:translateY(24px) scale(.96);transition:all .5s cubic-bezier(.2,1.3,.3,1)}
.nt.on{opacity:1;transform:none}
.nt-ic{width:40px;height:40px;border-radius:10px;background:var(--nbg);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.nt b{display:block;font-size:15px} .nt small{font-size:13px;color:var(--sec)}
@media (max-width:980px){.hero-c .wrap{grid-template-columns:1fr}.phone-scene{height:620px}.notes{top:auto;bottom:0;left:0;right:0;width:auto}}
.benefits h2{max-width:14em}
.bt-row{display:flex;gap:8px;flex-wrap:wrap;margin:36px 0 20px}
.bt{min-height:48px;padding:0 18px;border:0;border-radius:10px;background:var(--cream);color:var(--ink);font-family:inherit;font-size:16px;cursor:pointer}
.bt[aria-selected="true"]{background:var(--yellow);box-shadow:inset 0 -4px 0 var(--violet)}
.bp{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center;background:var(--cream);border-radius:20px;padding:40px}
.bp[hidden]{display:none}
.bp h3{font-size:clamp(26px,3vw,36px)} .bp p{font-size:18px;color:var(--sec);max-width:30em}
.dm-card{background:#fff;border:1px solid var(--line);border-radius:14px;padding:20px;box-shadow:0 18px 40px rgba(91,53,22,.12);position:relative}
.dm-row{display:flex;justify-content:space-between;gap:12px;align-items:center} .dm-row.sm{font-size:14px;color:var(--sec);margin-top:12px}
.chip{font-size:12px;font-weight:800;padding:4px 10px;border-radius:6px;background:#FEE6AB;color:#5B3516} .chip.g{background:#D3F5DB;color:#104F29;display:inline-block;margin-top:12px}
.meter{height:14px;border-radius:8px;background:var(--line);margin-top:16px;overflow:hidden} .meter-fill{display:block;height:100%;width:0;background:var(--violet);border-radius:8px}
.bp:not([hidden]) .meter-fill{animation:fill 2.4s ease forwards} @keyframes fill{to{width:100%}}
.rel{font-weight:800;color:#12A150;opacity:0} .bp:not([hidden]) .rel{animation:show .4s ease 2.4s forwards} @keyframes show{to{opacity:1}}
.player{height:190px;border-radius:10px;background:linear-gradient(135deg,#3B1F67,#8E41B4);display:flex;align-items:center;justify-content:center;position:relative}
.play{width:60px;height:60px;border-radius:50%;background:#fff;color:var(--violet);display:flex;align-items:center;justify-content:center;font-size:22px}
.lock{position:absolute;left:10px;bottom:10px;background:rgba(0,0,0,.55);color:#fff;font-size:12px;font-weight:700;padding:5px 10px;border-radius:6px}
.doc ul{list-style:none;margin:12px 0 0;padding:0} .doc li{display:flex;justify-content:space-between;padding:9px 0;border-top:1px solid var(--line);font-size:14px} .doc li span{color:var(--sec)}
.stampd{position:absolute;right:16px;top:14px;border:2px solid var(--violet);color:var(--violet);font-weight:800;font-size:12px;padding:3px 8px;border-radius:6px;transform:rotate(8deg) scale(0);} .bp:not([hidden]) .stampd{animation:pop .5s cubic-bezier(.2,1.6,.3,1) .6s forwards} @keyframes pop{to{transform:rotate(8deg) scale(1)}}
.stars i{font-style:normal;font-size:34px;color:var(--line)} .bp:not([hidden]) .stars i{animation:star .3s ease forwards} .stars i:nth-child(2){animation-delay:.15s!important}.stars i:nth-child(3){animation-delay:.3s!important}.stars i:nth-child(4){animation-delay:.45s!important}.stars i:nth-child(5){animation-delay:.6s!important} @keyframes star{to{color:var(--yellow)}}
.q{font-size:16px;margin:10px 0 0}
@media (max-width:900px){.bp{grid-template-columns:1fr;padding:24px}}
.join .head{display:flex;justify-content:space-between;align-items:end;gap:20px;flex-wrap:wrap}
.join .sub{font-size:20px;font-weight:800;margin:12px 0 4px}
/* types */
.join .head{display:flex;justify-content:space-between;align-items:end;gap:24px;flex-wrap:wrap}
.join .stage-wrap{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:40px;margin-top:48px;align-items:center}
.ty-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px}
.ty-btn{width:100%;display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:16px 20px;border:0;border-radius:10px;background:transparent;color:var(--ink);font-family:inherit;cursor:pointer;text-align:left;transition:background .3s}
.ty-btn b{font-size:clamp(19px,2vw,25px);font-weight:700;letter-spacing:-.02em} .ty-btn span{font-size:14px;color:var(--sec);font-weight:600;white-space:nowrap}
.ty-btn:hover{background:var(--cream)}
.ty-btn[aria-pressed="true"]{background:var(--yellow);color:var(--violet-9);box-shadow:inset 5px 0 0 var(--violet)} .ty-btn[aria-pressed="true"] span{color:#4A3A10}
.stage{position:relative;aspect-ratio:1/1;max-height:600px;border-radius:20px;background:var(--cream);overflow:hidden}
.stage::before{content:"";position:absolute;width:78%;aspect-ratio:1;border-radius:50%;background:var(--yellow);left:11%;top:14%;opacity:.9}
.ty-img{position:absolute;left:50%;bottom:0;width:86%;transform:translate(-50%,40px) scale(.9);opacity:0;transition:transform .6s cubic-bezier(.2,1.5,.3,1),opacity .3s}
.ty-img[data-on]{opacity:1;transform:translate(-50%,0) scale(1)}
.ty-cap{position:absolute;left:20px;right:20px;top:20px;display:flex;justify-content:space-between;gap:12px;z-index:2}
.ty-cap p{margin:0;background:var(--surface);color:var(--ink);border-radius:10px;padding:12px 16px;font-size:15px;font-weight:600;max-width:320px;box-shadow:0 10px 24px rgba(38,21,71,.12)}
@media (max-width:900px){.join .stage-wrap{grid-template-columns:minmax(0,1fr)}.stage{order:-1}.ty-btn{padding:12px 14px}.ty-btn span{white-space:normal;text-align:right}}
.early .card{background:var(--yellow);border-radius:20px;display:grid;grid-template-columns:1.2fr .8fr;overflow:hidden;padding:56px 0 0 56px}
.early h2{font-size:clamp(30px,3.8vw,46px)} .early p{font-size:18px;max-width:30em}
.cities{display:flex;gap:8px;flex-wrap:wrap;margin:18px 0 26px;padding:0;list-style:none} .cities li{background:#fff;font-weight:800;padding:8px 14px;border-radius:8px;display:flex;align-items:center;gap:6px}
.cities li::before{content:"";width:8px;height:8px;border-radius:2px;background:var(--violet)}
.early img{align-self:end;height:470px;width:auto;justify-self:center}
@media (max-width:900px){.early .card{grid-template-columns:1fr;padding:36px 24px 0}.early img{height:360px}}

.hero-b .wrap{display:grid;grid-template-columns:.9fr 1.1fr;gap:40px;align-items:center}
.hero-b h1{font-size:clamp(36px,4.4vw,60px)} .hero-b .sub{font-size:clamp(19px,1.8vw,24px);font-weight:800;margin:16px 0 0}
.dash-scene{position:relative;padding:20px 0 40px}
.win{position:relative;background:#fff;border-radius:14px;box-shadow:0 30px 60px rgba(91,53,22,.25);overflow:hidden;transform:rotate(-1.5deg)}
.win-top{display:flex;align-items:center;gap:8px;padding:10px 14px;background:#FFFAEB;border-bottom:1px solid var(--line)}
.win-top i{width:10px;height:10px;border-radius:50%;background:#EADFBF} .win-top b{margin-left:10px;font-size:13px}
.win-body{display:grid;grid-template-columns:120px 1fr;min-height:380px}
.win-side{background:#F4F2F6;padding:12px 8px;display:flex;flex-direction:column;gap:4px}
.win-side span{font-size:12px;font-weight:700;padding:8px 10px;border-radius:8px;color:#5F5A6B} .win-side span.on{background:var(--violet);color:#fff}
.win-main{padding:14px 16px;display:flex;flex-direction:column;gap:12px;min-width:0}
.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.tile{background:#FFFAEB;border-radius:10px;padding:10px 12px} .tile span{display:block;font-size:11px;font-weight:700;color:var(--sec)} .tile b{font-size:22px} .tile em{font-style:normal;font-size:11px;font-weight:800;color:#12A150;margin-left:4px}
.dtabs{display:flex;gap:6px} .dtab{border:0;background:transparent;font-family:inherit;font-size:13px;font-weight:800;padding:7px 12px;border-radius:8px;cursor:pointer;color:var(--sec)} .dtab[aria-selected="true"]{background:var(--yellow);color:var(--ink);box-shadow:inset 0 -3px 0 var(--violet)}
.dpanel{display:none} .dpanel.on{display:block}
.cp-head{display:flex;gap:10px;align-items:center;margin-bottom:8px} .cp-head img{width:48px;height:36px;border-radius:6px;object-fit:cover} .cp-head b{font-size:14px} .cp-head span{font-size:12px;color:var(--sec)}
.aps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.ap{display:grid;grid-template-columns:40px 1fr 100px 108px;gap:10px;align-items:center;padding:6px 8px;border-radius:10px;background:#fff;border:1px solid var(--line);opacity:0;transform:translateX(30px)}
.dpanel.on .ap{animation:slidein .5s cubic-bezier(.2,1.2,.3,1) var(--d) forwards} @keyframes slidein{to{opacity:1;transform:none}}
.ap img{width:40px;height:40px;border-radius:8px;object-fit:cover;object-position:top}
.ap-who b{display:block;font-size:13px} .ap-who span{font-size:11px;color:var(--sec);display:flex;gap:6px;align-items:center} .ap-who i{font-style:normal;font-weight:800;color:var(--violet-9);padding:1px 6px;border-radius:4px}
.ap-m{display:flex;align-items:center;gap:6px} .ap-m b{font-size:12px;color:#12A150} .ap-bar{flex:1;height:6px;border-radius:4px;background:var(--line);overflow:hidden} .ap-bar i{display:block;height:100%;background:#12A150}
.ap-btn{border:0;border-radius:8px;background:var(--violet);color:#fff;font-family:inherit;font-size:12px;font-weight:800;padding:7px 8px} .ap:first-child .ap-btn{background:#D3F5DB;color:#104F29}
.rms{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.rm{display:flex;gap:12px;border:1px solid var(--line);border-radius:12px;padding:10px;opacity:0;transform:translateY(16px)} .dpanel.on .rm{animation:slidein .5s ease forwards} .dpanel.on .rm:nth-child(2){animation-delay:.2s}
.rm-img{position:relative;flex-shrink:0} .rm-img>img:first-child{width:96px;height:72px;border-radius:8px;object-fit:cover} .rm-av{position:absolute;right:-8px;bottom:-8px;width:34px;height:34px;border-radius:8px;border:3px solid #fff;object-fit:cover;object-position:top}
.rm-body{display:flex;flex-direction:column;gap:3px;min-width:0} .rm-body b{font-size:14px} .rm-body>span{font-size:12px;color:var(--sec)}
.rm-bar{display:flex;gap:3px;margin-top:4px} .rm-bar i{width:26px;height:6px;border-radius:3px;background:var(--line)} .rm-bar i.d{background:#12A150} .rm-bar i.c{background:var(--violet)}
.rm-next{font-weight:700;color:var(--ink)!important} .rm-next em{font-style:normal;background:#FEE6AB;color:#5B3516;padding:1px 6px;border-radius:4px;margin-left:4px}
.ins{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:10px}
.chart{background:#FFFAEB;border-radius:10px;padding:10px} .chart path.ln{stroke-dasharray:600;stroke-dashoffset:600} .dpanel.on .chart path.ln{animation:draw 1.8s ease forwards} @keyframes draw{to{stroke-dashoffset:0}}
.toast{position:absolute;right:-14px;bottom:0;background:#fff;border-radius:12px;padding:12px 14px;box-shadow:0 18px 40px rgba(91,53,22,.25);display:flex;gap:10px;align-items:center;width:270px;animation:toast 6s ease infinite}
.toast img{width:40px;height:40px;border-radius:8px;object-fit:cover;object-position:top} .toast b{display:block;font-size:14px} .toast span{font-size:12px;color:var(--sec)}
@keyframes toast{0%,15%{opacity:0;transform:translateY(20px)}25%,85%{opacity:1;transform:none}100%{opacity:0}}
@media (max-width:1000px){.hero-b .wrap{grid-template-columns:1fr}}
@media (max-width:620px){.win-body{grid-template-columns:1fr}.win-side{display:none}.ap{grid-template-columns:36px 1fr 80px}.ap-btn{display:none}.tiles,.ins{grid-template-columns:repeat(2,1fr)}.toast{right:0;width:230px}}
.feats .ft{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;padding:48px 0;border-top:1px solid var(--line)}
.feats .ft:first-of-type{border-top:0}
.ft.rev .ft-copy{order:2}
.ft-n{font-weight:800;color:var(--violet);font-size:15px} .ft h3{font-size:clamp(26px,3vw,38px);margin:6px 0 10px} .ft p{font-size:18px;color:var(--sec);max-width:30em}
.ft-demo{background:var(--cream);border-radius:20px;padding:36px}
@media (max-width:900px){.feats .ft{grid-template-columns:1fr;gap:20px}.ft.rev .ft-copy{order:0}.ft-demo{padding:20px}}
.dm-card{background:#fff;border:1px solid var(--line);border-radius:14px;padding:20px;box-shadow:0 18px 40px rgba(91,53,22,.12);position:relative}
.dm-row{display:flex;justify-content:space-between;gap:12px;align-items:center} .dm-row.sm{font-size:14px;color:var(--sec);margin-top:12px}
.chip{font-size:12px;font-weight:800;padding:4px 10px;border-radius:6px;background:#FEE6AB;color:#5B3516}
.sbar{display:flex;gap:10px;align-items:center;border:2px solid var(--ink);border-radius:10px;padding:12px 14px;font-weight:700}
.typed{display:inline-block;overflow:hidden;white-space:nowrap;width:0;border-right:2px solid var(--violet)} .ft.in .typed{animation:type 1.6s steps(22) forwards}
@keyframes type{to{width:20.5ch}}
.fchips{display:flex;gap:6px;flex-wrap:wrap;margin:12px 0} .fchips span{font-size:13px;font-weight:700;background:var(--yellow);padding:5px 10px;border-radius:6px}
.faces2{display:flex} .faces2 img{width:52px;height:52px;border-radius:10px;border:3px solid #fff;margin-left:-10px;object-fit:cover;object-position:top;opacity:0;transform:scale(.4)} .faces2 img:first-child{margin-left:0}
.ft.in .faces2 img{animation:popf .4s cubic-bezier(.2,1.6,.3,1) calc(1.6s + var(--d)) forwards} @keyframes popf{to{opacity:1;transform:none}}
.res{display:block;margin-top:10px;font-weight:800;font-size:14px;color:var(--violet)}
.camp{display:flex;gap:16px;align-items:center} .camp img{width:140px;height:110px;border-radius:10px;object-fit:cover} .camp-b{display:flex;flex-direction:column;gap:4px} .camp-b span{font-size:14px;color:var(--sec)}
.camp-row{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:6px} .cnt{font-size:30px;font-weight:800;color:var(--ink)!important} .chk{font-size:12px!important;font-weight:800;background:#D3F5DB;color:#104F29!important;padding:3px 8px;border-radius:6px}
.doc ul{list-style:none;margin:12px 0 0;padding:0} .doc li{display:flex;justify-content:space-between;padding:9px 0;border-top:1px solid var(--line);font-size:14px} .doc li span{color:var(--sec)}
.stampd{position:absolute;right:16px;top:14px;border:2px solid var(--violet);color:var(--violet);font-weight:800;font-size:12px;padding:3px 8px;border-radius:6px;transform:rotate(8deg) scale(0)} .ft.in .stampd{animation:pop .5s cubic-bezier(.2,1.6,.3,1) .5s forwards} @keyframes pop{to{transform:rotate(8deg) scale(1)}}
.meter{height:14px;border-radius:8px;background:var(--line);margin-top:16px;overflow:hidden} .meter-fill{display:block;height:100%;width:0;background:var(--violet);border-radius:8px} .ft.in .meter-fill{animation:fill 2.2s ease forwards} @keyframes fill{to{width:100%}}
.rel{font-weight:800;color:#12A150;opacity:0} .ft.in .rel{animation:show .4s ease 2.2s forwards} @keyframes show{to{opacity:1}}
.coupon{margin-top:14px;border:2px dashed var(--violet);border-radius:10px;padding:10px 12px;display:flex;flex-direction:column;gap:2px} .coupon span{font-size:13px;color:var(--sec)}
.ask .card{background:var(--cream);border-radius:20px;padding:48px;display:flex;justify-content:space-between;align-items:center;gap:32px;flex-wrap:wrap}
.ask h2{font-size:clamp(30px,3.8vw,46px)} .ask p{font-size:18px;color:var(--sec);max-width:28em}

/* W2 uses the W1 shared navigation and footer. */
.w2-creators .marketing-nav__links a[href="/for-creators"],
.w2-business .marketing-nav__links a[href="/for-business"]{background:rgba(255,255,255,.55)}
.w2-main{overflow:clip}
.w2-main .wrap{width:100%}
.w2-main .btn-v{color:#fff}
.w2-anchor{display:block;position:relative;top:-76px;visibility:hidden}
@media (max-width:760px){
  .w2-main section{padding:72px 0}
  .w2-main .wrap{padding-inline:20px}
  .w2-main .hero{padding-top:28px;padding-bottom:48px}
  .w2-main .btn{min-height:48px;padding-inline:18px}
  .w2-main .hero h1{font-size:clamp(38px,11vw,48px)}
  .w2-main .hero .lede{font-size:17px}
  .w2-main .phone-scene{height:580px}
  .w2-main .pc-card{width:235px;left:0}
  .w2-main .pc-card img{height:278px}
  .w2-main .notes{left:48px;bottom:0}
  .w2-main .nt{padding:10px 12px}
  .w2-main .bp{padding:22px}
  .w2-main .stage-wrap{margin-top:30px}
  .w2-main .early .card,.w2-main .pilot .card{border-radius:16px}
  .w2-main .final{padding-block:90px}
  .w2-main .final h2{font-size:clamp(38px,12vw,52px)}
  .w2-business .dash-scene{padding-top:34px}
  .w2-business .win{transform:none}
  .w2-business .feats .ft{padding-block:42px}
  .w2-business .brands ul{display:grid;grid-template-columns:1fr;gap:12px}
  .w2-business .brands li{height:108px}
  .w2-business .ask .card{padding:28px 24px}
}
@media (max-width:390px){
  .w2-main .wrap{padding-inline:18px}
  .w2-main .cta-row{align-items:stretch}
  .w2-main .cta-row .btn{min-width:0}
  .w2-main .ty-btn b{font-size:18px}
  .w2-main .ty-btn span{font-size:12px}
  .w2-business .ft-demo{padding:16px}
  .w2-business .camp{align-items:flex-start;flex-direction:column}
  .w2-business .camp img{width:100%;height:150px}
}