/* Desk Studio Co. site: mobile-first. Base = phones (360-430px); 768px tablet; 1024px+ desktop. */
@font-face{font-family:"Poppins";font-weight:600;font-display:swap;src:url(../fonts/Poppins-SemiBold.woff2) format("woff2")}
@font-face{font-family:"Poppins";font-weight:700;font-display:swap;src:url(../fonts/Poppins-Bold.woff2) format("woff2")}
@font-face{font-family:"Poppins";font-weight:800;font-display:swap;src:url(../fonts/Poppins-ExtraBold.woff2) format("woff2")}
@font-face{font-family:"Nunito";font-weight:400;font-display:swap;src:url(../fonts/Nunito-Regular.woff2) format("woff2")}
@font-face{font-family:"Nunito";font-weight:700;font-display:swap;src:url(../fonts/Nunito-Bold.woff2) format("woff2")}
@font-face{font-family:"Nunito";font-weight:800;font-display:swap;src:url(../fonts/Nunito-ExtraBold.woff2) format("woff2")}
:root{--navy:#1d3a6e;--navy2:#2a4f8f;--coral:#d4422a;--coral-d:#a8341b;--mustard:#f4b63e;--cream:#fbf6ec;--card:#fff;--ink:#1b2236;--muted:#545d70;--line:#e7e0d2;--green:#24785a;--green-l:#e2f2ea;
--r:20px;--sb:env(safe-area-inset-bottom,0px);--st:env(safe-area-inset-top,0px);--tabh:74px;--maxw:1340px}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{background:var(--cream);color:var(--ink);font:400 16px/1.5 "Nunito",system-ui,-apple-system,"Segoe UI",sans-serif;-webkit-font-smoothing:antialiased;min-height:100vh;overflow-x:hidden}
h1,h2,h3,h4,.btn,.chip,.tab,.h{font-family:"Poppins",system-ui,sans-serif}
img{max-width:100%;display:block}
a{color:var(--navy)}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--mustard);outline-offset:3px;border-radius:10px}
.skip{position:absolute;left:-999px;top:8px;z-index:99;background:#fff;padding:12px 16px;border-radius:12px;font-weight:800}
.skip:focus{left:12px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 16px}
main{display:block;padding-bottom:calc(var(--tabh) + var(--sb) + 24px)}
body.flow main{padding-bottom:calc(120px + var(--sb))}

/* app bar */
.appbar{position:sticky;top:0;z-index:30;background:rgba(251,246,236,.94);backdrop-filter:saturate(1.4) blur(10px);-webkit-backdrop-filter:saturate(1.4) blur(10px);padding-top:var(--st);border-bottom:1px solid transparent}
.appbar.scrolled{border-bottom-color:var(--line)}
.appbar .in{height:64px;display:flex;align-items:center;justify-content:space-between;gap:12px;max-width:var(--maxw);margin:0 auto;padding:0 16px}
.brand{display:flex;align-items:center;min-height:48px;min-width:48px}
.brand img{height:30px;width:auto}
.iconbtn{width:48px;height:48px;border-radius:14px;display:grid;place-items:center;background:#fff;border:1.5px solid var(--line);color:var(--navy);cursor:pointer;flex:none;text-decoration:none}
.iconbtn svg{width:24px;height:24px}
.topnav{display:none}
.price-pill{display:none}
.menu{position:fixed;inset:0;z-index:60;background:rgba(27,34,54,.45);display:none}
.menu.open{display:block}
.menu .sheet{position:absolute;right:12px;top:calc(var(--st) + 70px);background:#fff;border-radius:20px;padding:8px;min-width:240px;box-shadow:0 20px 50px rgba(0,0,0,.2)}
.menu .sheet a{display:flex;align-items:center;min-height:52px;padding:0 16px;border-radius:14px;text-decoration:none;font:600 17px "Poppins";color:var(--ink)}
.menu .sheet a:hover,.menu .sheet a:focus-visible{background:var(--cream)}

/* buttons */
.btn{display:flex;align-items:center;justify-content:center;gap:10px;min-height:56px;border-radius:16px;font-weight:700;font-size:18px;border:0;width:100%;padding:0 20px;cursor:pointer;text-decoration:none;text-align:center;transition:transform .12s ease,box-shadow .12s ease,background .15s}
.btn:active{transform:translateY(2px)}
.btn.primary{background:var(--coral);color:#fff;box-shadow:0 5px 0 var(--coral-d),0 10px 24px rgba(224,73,44,.22)}
.btn.primary:active{box-shadow:0 2px 0 var(--coral-d)}
.btn.navy{background:var(--navy);color:#fff}
.btn.ghost{background:#fff;color:var(--navy);border:2px solid var(--navy)}
.btn.small{min-height:48px;font-size:16px;border-radius:14px;width:auto}
.btn[disabled],.btn[aria-disabled=true]{opacity:.55;cursor:not-allowed}
.btn svg{width:22px;height:22px;flex:none}
.pill{display:inline-flex;align-items:center;gap:6px;background:var(--mustard);color:var(--ink);font:700 14px "Poppins";padding:6px 12px;border-radius:999px}
.price-badge{display:flex;flex-direction:column;align-items:center;justify-content:center;background:var(--coral);color:#fff;border-radius:50%;width:96px;height:96px;font-family:"Poppins";transform:rotate(-8deg);box-shadow:0 6px 16px rgba(224,73,44,.35);border:4px solid #fff;flex:none}
.price-badge b{font-size:14px;letter-spacing:1.5px;font-weight:700;line-height:1.2}.price-badge strong{font-size:28px;font-weight:800;line-height:1}
.section-t{font:700 21px/1.25 "Poppins";color:var(--navy);margin:28px 0 12px}
.lead{color:var(--muted);font-size:17px}
.card{background:#fff;border-radius:var(--r);border:1.5px solid var(--line)}

/* hero */
.hero{background:var(--navy);border-radius:24px;padding:22px 20px 20px;color:#fff;position:relative;overflow:hidden;margin-top:6px}
.hero:before{content:"";position:absolute;right:-60px;top:-60px;width:200px;height:200px;border-radius:50%;background:rgba(244,182,62,.16)}
.hero h1{font-size:30px;line-height:1.15;font-weight:800;margin:14px 0 10px;max-width:220px;position:relative}
.hero h1 em{font-style:normal;color:var(--mustard)}
.hero p{font-size:16px;color:#e3e9f4;max-width:320px;position:relative}
.hero .price-badge{position:absolute;right:14px;top:64px}
.covers{display:flex;margin:18px 0 20px;align-items:flex-end;position:relative}
.covers img{width:92px;height:92px;border-radius:12px;border:3px solid #fff;object-fit:cover;box-shadow:0 6px 14px rgba(0,0,0,.25);background:#fff}
.covers img+img{margin-left:-14px}
.covers img:nth-child(1){transform:rotate(-4deg)}
.covers img:nth-child(2){transform:translateY(-8px) rotate(2deg)}
.covers .more{margin-left:12px;font:600 14px/1.3 "Poppins";color:#e3e9f4}
.hero .btn{font-size:19px}
.hero .hero-note{font-size:14px;color:#cfd8ea;margin-top:12px;text-align:center}

/* category tiles */
.cats{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.cats .cat:last-child:nth-child(odd){grid-column:1/-1}
.cat{background:#fff;border:1.5px solid var(--line);border-radius:20px;padding:14px;min-height:112px;display:flex;flex-direction:column;justify-content:space-between;gap:10px;position:relative;text-decoration:none;color:var(--ink);cursor:pointer;text-align:left;width:100%}
.cat .e{font-size:28px;width:52px;height:52px;border-radius:16px;display:grid;place-items:center}
.cat b{font:700 17px "Poppins";color:var(--ink);display:block}
.cat small{font-size:14px;color:var(--muted);font-weight:700}
.cat .soon{position:absolute;right:10px;top:12px;background:#efeae0;color:var(--muted);font:600 14px "Poppins";padding:2px 10px;border-radius:999px}
.cat[aria-disabled=true]{cursor:default;opacity:.85}
a.cat:hover{border-color:var(--coral)}

/* how it works */
.how{display:flex;flex-direction:column;gap:10px;list-style:none}
.how li{display:flex;gap:14px;align-items:center;background:#fff;border:1.5px solid var(--line);border-radius:18px;padding:14px}
.how .n{width:44px;height:44px;flex:none;border-radius:50%;background:var(--mustard);display:grid;place-items:center;font:800 20px "Poppins";color:var(--navy)}
.how b{font:700 17px "Poppins";display:block}
.how span{font-size:16px;color:var(--muted)}

/* video */
.demo{display:grid;gap:16px;align-items:center}
.demo .vid{width:100%;max-width:300px;margin:0 auto;aspect-ratio:9/16;border-radius:28px;overflow:hidden;background:#e9e1cf;box-shadow:0 18px 40px rgba(29,58,110,.22);border:6px solid #fff}
.demo video,.demo .vid img{width:100%;height:100%;object-fit:cover;display:block}
.demo .ph{width:100%;height:100%;display:grid;place-items:center;text-align:center;color:var(--muted);font:600 15px "Poppins";padding:20px}
.demo .txt p{color:var(--muted)}

/* product cards */
.grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.pcard{background:#fff;border:1.5px solid var(--line);border-radius:18px;overflow:hidden;display:flex;flex-direction:column;text-decoration:none;color:var(--ink);position:relative;min-height:48px}
.pcard img{width:100%;height:auto;aspect-ratio:1;object-fit:cover;background:#f3eee3}
.pcard .b{padding:10px 12px 12px;display:flex;flex-direction:column;gap:4px;flex:1}
.pcard h3{font:700 15px/1.3 "Poppins";color:var(--ink)}
.pcard p{font-size:14px;color:var(--muted);line-height:1.35}
.pcard .pr{margin-top:auto;padding-top:6px;display:flex;align-items:center;justify-content:space-between;gap:6px;font:800 16px "Poppins";color:var(--coral-d)}
.pcard .pr .go{font:700 14px "Poppins";color:var(--navy)}
.pcard .tag{position:absolute;z-index:1;left:8px;top:8px;font:700 14px "Poppins";padding:3px 10px;border-radius:999px;background:var(--mustard);color:var(--ink)}
.pcard .tag.free{background:var(--green);color:#fff}
.pcard .tag.new{background:var(--navy);color:#fff}
.pcard .tag.soon{background:var(--navy);color:#fff;max-width:calc(100% - 16px)}
a.pcard:hover{border-color:var(--coral)}
.shop-cta{margin:18px 0 8px;display:flex;align-items:center;gap:14px;background:#fff5e0;border:1.5px solid #f2dca8;border-radius:18px;padding:14px;min-height:72px;text-decoration:none;color:var(--ink)}
.shop-cta img{width:56px;height:56px;border-radius:12px;border:1.5px solid #f2dca8;background:#fff}
.shop-cta b{font:700 16px "Poppins";display:block}.shop-cta span{font-size:15px;color:var(--muted)}
.shop-cta .ar{font:700 24px "Poppins";color:var(--navy)}
.chips{display:flex;gap:8px;overflow-x:auto;padding:4px 16px 8px;margin:0 -16px;scrollbar-width:none;scroll-snap-type:x proximity}
.chips::-webkit-scrollbar{display:none}
.chips.wrap{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));overflow:visible;margin:0;padding:4px 0 12px}
.chips.wrap .chip{flex-direction:column;justify-content:center;gap:2px;min-height:72px;padding:8px 6px;text-align:center;line-height:1.2;font-size:16px;border-width:2px}
.chips.wrap .chip>span[aria-hidden]{font-size:22px;line-height:1}
.chips.wrap .chip[aria-pressed=true]{box-shadow:0 4px 12px rgba(29,58,110,.28)}
.inp.ta{min-height:120px;padding-top:12px;padding-bottom:12px;line-height:1.4;resize:vertical;font-family:inherit}
.field .opt{font-weight:600;color:var(--muted)}
.stepper.locked button{opacity:.4}
.chip{flex:none;display:flex;align-items:center;gap:8px;min-height:52px;padding:0 16px;border-radius:16px;background:#fff;border:1.5px solid var(--line);font-weight:700;font-size:16px;color:var(--ink);cursor:pointer;text-decoration:none;scroll-snap-align:start}
.chip[aria-pressed=true],.chip.on{background:var(--navy);border-color:var(--navy);color:#fff}
.chip .soonb{font-size:14px;font-weight:600;color:var(--muted);background:#efeae0;border-radius:999px;padding:0 8px}
.chip[aria-disabled=true]{opacity:.7;cursor:default}

/* bottom tab bar */
.tabbar{position:fixed;left:0;right:0;bottom:0;z-index:40;background:#fff;border-top:1px solid var(--line);box-shadow:0 -8px 24px rgba(29,58,110,.08);padding:4px 8px calc(6px + var(--sb))}
.tabbar ul{display:flex;justify-content:space-around;list-style:none;max-width:560px;margin:0 auto}
.tab{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-width:60px;min-height:56px;font-size:14px;font-weight:600;color:var(--muted);text-decoration:none;border-radius:14px}
.tab svg{width:26px;height:26px}
.tab[aria-current=page]{color:var(--coral-d)}
.tab.create .ti{width:58px;height:58px;margin-top:-26px;border-radius:50%;background:var(--coral);color:#fff;display:grid;place-items:center;box-shadow:0 6px 16px rgba(224,73,44,.4);border:4px solid #fff}
.tab.create .ti svg{width:28px;height:28px}

/* footer */
.foot{background:var(--navy);color:#dfe6f3;margin-top:36px;padding:28px 0 calc(var(--tabh) + var(--sb) + 28px)}
body.flow .foot{display:none}
.foot img{height:30px;width:auto;margin-bottom:10px}
.foot p{font-size:15px}
.foot nav{display:flex;flex-wrap:wrap;gap:4px 8px;margin:14px 0}
.foot nav a{color:#fff;font:600 15px "Poppins";min-height:48px;display:inline-flex;align-items:center;padding:0 8px;margin-left:-8px;border-radius:10px}
.foot .small{font-size:14px;color:#c3cde2}

/* content pages */
.page-h{margin:10px 0 6px;font:800 28px/1.2 "Poppins";color:var(--navy)}
.prose{font-size:17px}
.prose p{margin:10px 0}
.prose h2{font:700 20px "Poppins";color:var(--navy);margin:26px 0 8px}
.faq details{background:#fff;border:1.5px solid var(--line);border-radius:18px;margin:10px 0;overflow:hidden}
.faq summary{list-style:none;cursor:pointer;min-height:60px;padding:14px 52px 14px 16px;font:700 17px/1.35 "Poppins";position:relative;display:flex;align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary:after{content:"+";position:absolute;right:16px;top:50%;transform:translateY(-50%);font:700 26px "Poppins";color:var(--coral-d)}
.faq details[open] summary:after{content:"\2212"}
.faq .a{padding:0 16px 16px;color:#333b4f;font-size:16px}
.faq .a p+p{margin-top:8px}
.note{display:flex;gap:10px;align-items:flex-start;background:var(--green-l);color:#14513b;border-radius:16px;padding:12px 14px;font-size:15px;font-weight:700}
.note svg{flex:none;width:22px;height:22px;margin-top:1px}

/* ---------------- tool ---------------- */
.flowhead{display:flex;align-items:center;gap:12px;padding:6px 0 4px}
.flowhead .t{flex:1;min-width:0}
.flowhead .sub{font:600 14px "Poppins";color:var(--muted)}
.flowhead h1{font:700 21px/1.2 "Poppins";color:var(--navy)}
.steps{display:flex;gap:8px;margin:8px 0 6px;list-style:none}
.steps li{flex:1}
.steps .bar{height:6px;border-radius:3px;background:#e3dbc9}
.steps .done .bar,.steps .on .bar{background:var(--coral)}
.steps .lbl{font:600 14px "Poppins";color:var(--muted);margin-top:6px}
.steps .on .lbl{color:var(--ink)}
.price-mini{flex:none;background:var(--coral);color:#fff;font:800 14px "Poppins";padding:8px 12px;border-radius:999px;white-space:nowrap}
.seg{display:flex;background:#ece5d6;border-radius:14px;padding:4px;flex:none}
.seg button{min-width:60px;min-height:44px;display:grid;place-items:center;border-radius:11px;font:700 15px "Poppins";color:var(--muted);padding:0 10px;border:0;background:transparent;cursor:pointer}
.seg button[aria-pressed=true]{background:#fff;color:var(--navy);box-shadow:0 2px 6px rgba(0,0,0,.08)}
.step{display:none;animation:slidein .28s ease}
.step.active{display:block}
@keyframes slidein{from{opacity:0;transform:translateX(18px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.step{animation:none}*{scroll-behavior:auto!important;transition:none!important}}
.sets{display:grid;gap:12px;margin-top:12px}
.set{display:flex;gap:12px;align-items:center;background:#fff;border:2px solid var(--line);border-radius:20px;padding:10px;cursor:pointer;text-align:left;width:100%;min-height:104px;position:relative}
.set img{width:84px;height:84px;border-radius:14px;object-fit:cover;flex:none;background:#f3eee3}
.set .i{flex:1;min-width:0}
.set b{font:700 17px "Poppins";display:block}
.set .m{font-size:14px;color:var(--muted);font-weight:700}
.set .s{font-size:14px;color:var(--green);font-weight:800}
.set .p{font:800 15px "Poppins";color:var(--coral-d)}
.set .ck{width:30px;height:30px;border-radius:50%;border:2px solid #cfc6b4;flex:none;display:grid;place-items:center;color:#fff}
.set[aria-checked=true]{border-color:var(--coral);box-shadow:0 0 0 4px rgba(224,73,44,.12)}
.set[aria-checked=true] .ck{background:var(--coral);border-color:var(--coral)}
.set .ck svg{width:18px;height:18px;opacity:0}.set[aria-checked=true] .ck svg{opacity:1}
.soonbox{background:#fff;border:1.5px dashed #d8cfbd;border-radius:20px;padding:18px;text-align:center;color:var(--muted);margin-top:12px}
.soonbox b{display:block;font:700 17px "Poppins";color:var(--ink);margin-bottom:4px}
.ctabar{position:fixed;left:0;right:0;bottom:0;z-index:40;background:#fff;border-top:1px solid var(--line);box-shadow:0 -8px 24px rgba(29,58,110,.1);padding:12px 16px calc(12px + var(--sb))}
.ctabar .in{max-width:560px;margin:0 auto}
.ctabar .sub2{font-size:14px;color:var(--muted);margin:10px 0 6px;font-weight:700}
.setchip{display:flex;align-items:center;gap:10px;background:#fff;border:1.5px solid var(--line);border-radius:16px;padding:6px 6px 6px 6px;margin-top:10px;min-height:60px}
.setchip img{width:46px;height:46px;border-radius:10px;object-fit:cover}
.setchip .i{flex:1;min-width:0}.setchip b{font:700 15px "Poppins";display:block}.setchip small{font-size:14px;color:var(--muted);font-weight:700}
.linkbtn{background:none;border:0;font:600 15px "Poppins";color:var(--coral-d);min-height:48px;padding:0 10px;cursor:pointer;border-radius:12px;display:inline-flex;align-items:center;gap:6px;text-decoration:underline;text-underline-offset:3px}
.mic{margin-top:12px;background:var(--navy);border-radius:22px;padding:18px 16px;color:#fff;display:flex;gap:18px;align-items:center}
.micbtn{width:84px;height:84px;flex:none;border-radius:50%;background:var(--coral);display:grid;place-items:center;color:#fff;border:0;cursor:pointer;transition:box-shadow .2s}
.micbtn svg{width:42px;height:42px}
.mic.listening .micbtn{box-shadow:0 0 0 10px rgba(224,73,44,.3),0 0 0 20px rgba(224,73,44,.12);animation:pulse 1.4s infinite}
@keyframes pulse{50%{box-shadow:0 0 0 14px rgba(224,73,44,.22),0 0 0 26px rgba(224,73,44,.08)}}
.mic .ml{display:flex;flex-direction:column;align-items:center;gap:10px}
.mic .ml span{font:600 14px "Poppins";color:#e4eaf5}
.mic .t{flex:1;min-width:0}
.mic .t b{font:700 17px "Poppins";display:flex;align-items:center;gap:8px}
.mic .t b i{width:10px;height:10px;border-radius:50%;background:#ff7a62;display:none;box-shadow:0 0 0 4px rgba(255,122,98,.3)}
.mic.listening .t b i{display:inline-block}
.mic .t p{font-size:16px;color:#e4eaf5;margin-top:4px;line-height:1.4}
.wave{display:none;gap:3px;align-items:center;height:22px;margin-top:6px}.wave i{width:4px;border-radius:2px;background:var(--mustard);display:block;animation:wv 1s ease-in-out infinite}
.mic.listening .wave{display:flex}
@keyframes wv{50%{transform:scaleY(.4)}}
.heard{margin-top:14px;font:700 16px "Poppins";color:var(--navy);display:flex;justify-content:space-between;align-items:center;gap:8px}
.fchips{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}
.fc{display:flex;align-items:center;gap:8px;min-height:48px;background:#fff;border:2px solid #bfe0d0;border-radius:14px;padding:4px 12px;cursor:pointer}
.fc small{font:600 14px "Poppins";color:var(--green)}.fc b{font-size:16px;font-weight:800}
.fc svg{width:18px;height:18px;color:var(--muted)}
.fc.new{animation:pop .35s ease}
@keyframes pop{0%{transform:scale(.85);opacity:0}100%{transform:none;opacity:1}}
.fields{display:grid;gap:14px;margin-top:14px}
.field label,.field .lab{font:600 15px "Poppins";color:var(--ink);display:block;margin-bottom:6px}
.field .hint{font-size:14px;color:var(--muted);margin-top:4px}
.inp{width:100%;min-height:56px;background:#fff;border:2px solid var(--line);border-radius:14px;padding:0 16px;font-size:17px;font-weight:700;color:var(--ink);-webkit-appearance:none;appearance:none}
.inp::placeholder{color:#6b7180;font-weight:600}
.inp:focus{border-color:var(--navy);box-shadow:0 0 0 4px rgba(29,58,110,.12);outline:none}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.stepper{display:flex;align-items:center;justify-content:space-between;background:#fff;border:2px solid var(--line);border-radius:18px;padding:8px}
.stepper button{width:56px;height:56px;border-radius:14px;background:#f2ede3;display:grid;place-items:center;font:600 30px "Poppins";color:var(--navy);border:0;cursor:pointer}
.stepper button.plus{background:var(--navy);color:#fff}
.stepper .mid{text-align:center}.stepper .mid b{font:800 26px "Poppins";display:block;line-height:1.1}.stepper .mid span{font-size:14px;color:var(--muted);font-weight:700}
.stepper input{width:70px;text-align:center;border:0;font:800 26px "Poppins";background:transparent;-moz-appearance:textfield}
.stepper input::-webkit-outer-spin-button,.stepper input::-webkit-inner-spin-button{-webkit-appearance:none}
.more-toggle{margin-top:6px}
.privacy{font-size:14px;color:var(--muted);text-align:center;margin-top:14px;font-weight:700}
/* preview */
.pv-wrap{position:relative;margin:8px -16px 0}
.carousel{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;padding:8px calc(50% - 120px) 14px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.carousel::-webkit-scrollbar{display:none}
.paper{flex:none;width:240px;scroll-snap-align:center;background:#fff;border-radius:6px;box-shadow:0 10px 30px rgba(29,58,110,.18),0 2px 6px rgba(0,0,0,.08);overflow:hidden;position:relative;transition:transform .25s,opacity .25s}
.paper canvas{width:100%;height:auto;display:block}
.paper.side{transform:scale(.9);opacity:.85}
.paper .ph{aspect-ratio:8.5/11;display:grid;place-items:center;color:var(--muted);font:600 14px "Poppins";background:repeating-linear-gradient(135deg,#fff,#fff 10px,#f7f3ea 10px,#f7f3ea 20px)}
.plabel{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:2px}
.plabel b{font:700 16px "Poppins";color:var(--navy)}
.dots{display:flex;gap:6px;justify-content:center;align-items:center}
.dots button{width:24px;height:24px;border:0;background:transparent;display:grid;place-items:center;cursor:pointer;padding:0}
.dots button i{width:8px;height:8px;border-radius:4px;background:#cfc5b0;display:block;transition:width .2s}
.dots button[aria-current=true] i{width:22px;background:var(--coral)}
.inc{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px;list-style:none}
.inc li{display:flex;gap:8px;align-items:center;background:#fff;border:1.5px solid var(--line);border-radius:14px;padding:8px 10px;font-size:15px;font-weight:700;line-height:1.25;min-height:52px}
.inc .ckm{width:26px;height:26px;flex:none;border-radius:50%;background:var(--green-l);color:var(--green);display:grid;place-items:center}
.inc .ckm svg{width:16px;height:16px}
.lic{display:flex;gap:8px}
.lic .inp{flex:1;min-height:52px;font-size:16px;background:#f7f3ea;border-style:dashed;border-color:#cfc4ad}
.lic .btn{width:auto;min-width:92px;min-height:52px}
.msg{font-size:15px;font-weight:700;margin-top:8px;min-height:0}
.msg.err{color:#a3271a}.msg.ok{color:var(--green)}
.unlocked{display:none}
.is-unlocked .unlocked{display:block}.is-unlocked .locked{display:none}
.btnrow{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:10px}
.progress{height:6px;border-radius:3px;background:#ece5d6;overflow:hidden;margin-top:10px;display:none}
.progress.on{display:block}.progress i{display:block;height:100%;width:0;background:var(--coral);transition:width .2s}
.upsell{margin-top:14px;font-size:15px;color:var(--muted);text-align:center}
.toast{position:fixed;left:50%;bottom:calc(150px + var(--sb));transform:translateX(-50%) translateY(20px);background:var(--ink);color:#fff;padding:12px 18px;border-radius:14px;font-weight:700;font-size:15px;opacity:0;pointer-events:none;transition:all .25s;z-index:80;max-width:90vw;text-align:center}
.toast.on{opacity:1;transform:translateX(-50%)}
.desk-only{display:none}
.side-col{display:none}

/* ---------------- tablet ---------------- */
@media (min-width:768px){
  .wrap{padding:0 28px}
  .hero{padding:34px 36px 30px}
  .hero h1{font-size:40px;max-width:420px}
  .hero p{font-size:18px;max-width:460px}
  .hero .price-badge{width:120px;height:120px;right:40px;top:40px}.hero .price-badge strong{font-size:34px}
  .hero .btn{max-width:420px}
  .covers img{width:120px;height:120px}
  .cats{grid-template-columns:repeat(3,1fr)}
  .cats .cat:last-child:nth-child(odd){grid-column:auto}
  .how{flex-direction:row}.how li{flex:1;flex-direction:column;align-items:flex-start}
  .grid{grid-template-columns:repeat(3,1fr);gap:16px}
  .sets{grid-template-columns:1fr 1fr}
  .demo{grid-template-columns:300px 1fr;gap:32px}
  .ctabar .in{max-width:560px}
  .carousel{padding-left:calc(50% - 250px);padding-right:calc(50% - 250px)}
  .page-h{font-size:34px}
}
/* ---------------- desktop ---------------- */
@media (min-width:1024px){
  :root{--tabh:0px}
  .tabbar{display:none}
  .appbar .in{height:76px;padding:0 32px}
  .brand img{height:36px}
  .topnav{display:flex;gap:6px;flex:1;margin-left:28px}
  .topnav a{font:600 16px "Poppins";color:var(--ink);text-decoration:none;min-height:48px;display:flex;align-items:center;padding:0 14px;border-radius:12px}
  .topnav a[aria-current=page]{background:#efe7d6}
  .topnav a:hover{background:#f3ecdf}
  .price-pill{display:flex;align-items:center;background:var(--coral);color:#fff;font:800 16px "Poppins";padding:0 20px;min-height:48px;border-radius:999px;text-decoration:none}
  .menubtn{display:none}
  .wrap{padding:0 32px}
  main{padding-bottom:40px}
  body.flow main{padding-bottom:40px}
  .foot{padding-bottom:36px}
  .home-top{display:grid;grid-template-columns:1.25fr 1fr;gap:28px;align-items:stretch;margin-top:10px}
  .hero{margin:0;padding:44px 44px 36px}
  .hero h1{font-size:48px;max-width:520px}
  .home-side .section-t{margin-top:0}
  .grid{grid-template-columns:repeat(4,1fr)}
  .grid.six{grid-template-columns:repeat(6,1fr)}
  .cats{grid-template-columns:repeat(3,1fr)}
  .demo{grid-template-columns:320px 1fr;gap:48px}
  /* tool: desktop merges details + preview */
  body.flow .ctabar{position:static;box-shadow:none;border:0;padding:0;background:transparent}
  body.flow .ctabar .in{max-width:none}
  .tool{display:grid;grid-template-columns:420px 1fr;gap:24px;align-items:start;margin-top:16px}
  .tool .panel{background:#fff;border:1.5px solid var(--line);border-radius:24px;padding:24px}
  .tool.pick{grid-template-columns:1fr}
  .tool.pick .side-col{display:none!important}
  .tool .side-col{display:block;background:#fff;border:1.5px solid var(--line);border-radius:24px;padding:20px;position:sticky;top:96px}
  .sets{grid-template-columns:repeat(3,1fr)}
  .desk-only{display:block}
  .mob-only{display:none!important}
  .step[data-step=preview].active{display:none}
  .live{display:grid;grid-template-columns:1fr 250px;gap:20px}
  .live .stage{background:#f3eddf;border-radius:20px;padding:20px;display:flex;flex-direction:column;align-items:center;gap:12px;min-height:560px}
  .live .stage .badge{align-self:flex-start;background:#fff;border-radius:999px;padding:6px 14px;font:600 14px "Poppins";color:var(--green);display:flex;gap:8px;align-items:center}
  .live .stage .badge i{width:8px;height:8px;border-radius:50%;background:var(--green);display:block}
  .live .big{width:100%;max-width:420px;background:#fff;border-radius:6px;box-shadow:0 14px 36px rgba(29,58,110,.2)}
  .live .big canvas{width:100%;height:auto;display:block;border-radius:6px}
  .thumbs{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;margin:10px 0 12px}
  .thumbs button{border:2px solid var(--line);border-radius:8px;background:#fff;padding:3px;cursor:pointer;min-height:48px}
  .thumbs button[aria-current=true]{border-color:var(--coral)}
  .thumbs canvas{width:100%;height:auto;display:block}
  .bigprice{font:800 40px/1 "Poppins";color:var(--coral-d);margin-top:12px}
}
@media (min-width:1280px){.tool{grid-template-columns:460px 1fr}.live{grid-template-columns:1fr 270px}}
/* flow pages: on phones the step header replaces the app bar */
@media (max-width:1023px){
  body.flow .appbar{display:none}
  body.flow .flowhead{position:sticky;top:0;z-index:20;background:var(--cream);padding-top:calc(6px + var(--st));margin:0 -16px;padding-left:16px;padding-right:16px}
  .tool .panel{background:none;border:0;padding:0}
}
@media (min-width:768px) and (max-width:1023px){body.flow .flowhead{margin:0 -28px;padding-left:28px;padding-right:28px}}
.cat small{display:block}
.sub2{font-size:14px;color:var(--muted);margin:10px 0 6px;font-weight:700}
.unlockbox .msg svg{width:18px;height:18px;vertical-align:-3px}
/* tap-target + desktop polish */
.seg button{min-height:48px}
.dots{gap:0}.dots button{width:48px;height:48px}
.stepper input{min-height:48px}
@media (min-width:1024px){
  .tool .side-col{position:static}
  .live .stage{min-height:0;padding:16px}
  .live .big{max-width:min(440px,calc((100vh - 230px) * .773))}
  .side-col .inc{gap:2px;margin-top:4px}
  .side-col .inc li{border:0;background:none;padding:3px 0;min-height:0;font-size:15px}
  .side-col .bigprice{margin-top:8px}
  .mic{padding:14px 16px;gap:16px}.micbtn{width:68px;height:68px}.micbtn svg{width:34px;height:34px}
  .tool .panel .flowhead{padding-top:0}
  .tool .panel{padding:22px 24px}
  .fields{gap:12px}
  .unlockbox .btn.primary{font-size:17px}
}
.plabel{flex-direction:column;align-items:center;gap:0;text-align:center}.plabel b{min-height:24px}
.carousel:empty{justify-content:center;padding-left:0;padding-right:0}
.carousel:empty::before{content:"";flex:0 0 min(260px,62vw);aspect-ratio:8.5/11;border-radius:6px;background:linear-gradient(100deg,#fff 30%,#f3eee3 50%,#fff 70%) 0 0/300% 100%;box-shadow:0 6px 18px rgba(29,58,110,.12);animation:shim 1.2s linear infinite}
@keyframes shim{to{background-position:-150% 0}}
@media (prefers-reduced-motion:reduce){.carousel:empty::before{animation:none}}
.demo-h{font:800 22px/1.25 "Poppins";color:var(--navy);margin:0 0 8px}
.demo-steps{list-style:none;counter-reset:ds;padding:0;margin:14px 0 0;display:grid;gap:10px}
.demo-steps li{counter-increment:ds;display:grid;grid-template-columns:34px 1fr;gap:10px;align-items:start;color:var(--ink,#1b2236);font-size:16px;line-height:1.45}
.demo-steps li::before{content:counter(ds);width:34px;height:34px;border-radius:50%;background:var(--mustard);color:#1b2236;font:800 16px/34px "Poppins";text-align:center}
@media (min-width:1024px){.demo{background:#fff;border-radius:24px;padding:28px 40px;box-shadow:0 8px 30px rgba(29,58,110,.08)}.demo-h{font-size:28px}}