html{scroll-padding-top:env(safe-area-inset-top,0px)}body{margin:0}[hidden]:not([hidden=until-found i]){display:none!important}

/* Layout: one flow, five screens. Question on one side, the system assembling on the other; on phones the system sits above as a compact strip. Brand book of 31.10: marshmallow base, galactic violet for action, bubblegum pink as the spark. Single light look by design. */
:root{
  --bg:#F0F0F0; --card:#FFFFFF; --ink:#16141F; --ink-2:#5B5769; --ink-3:#8C889A;
  --violet:#573DFE; --violet-2:#4630D9; --pink:#FF6BD3; --lilac:#E4E0FF; --line:#DEDAEC; --soft:#F6F5FA;
  --ok:#14866A; --ok-bg:#DDF3EC; --warn:#9A5B00; --warn-bg:#FCEBD2;
  --fd:'Varela Round','Assistant',system-ui,sans-serif;
  --fb:'Assistant',system-ui,-apple-system,'Segoe UI',Arial,sans-serif;
  --fm:'JetBrains Mono',ui-monospace,Menlo,Consolas,monospace;
  color-scheme:light;
}
*{box-sizing:border-box}
body{background:var(--bg);color:var(--ink);font-family:var(--fb);font-size:17px;line-height:1.55;overflow-x:hidden;
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.circ{position:fixed;border-radius:50%;z-index:0;pointer-events:none}
.circ.p{width:340px;height:340px;background:var(--pink);top:-190px;left:-150px}
.circ.l{width:460px;height:460px;background:var(--lilac);bottom:-260px;right:-200px}
#app{position:relative;z-index:1;max-width:1080px;margin:0 auto;padding-block:18px 56px}
.top{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:22px}
.logo{font-family:var(--fd);font-size:23px;letter-spacing:-.01em}
.logo i{display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--pink);margin-inline-start:3px;vertical-align:2px}
.pill{font-family:var(--fm);font-size:12.5px;background:var(--violet);color:#fff;border-radius:999px;padding:4px 12px;display:inline-flex;gap:7px;align-items:center;white-space:nowrap;direction:ltr}
.pill::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--pink)}
.pill.ghost{background:var(--card);color:var(--ink);border:1px solid var(--line)}
h1,h2,h3{font-family:var(--fd);font-weight:400;text-wrap:balance;margin:0;letter-spacing:-.01em}
h1{font-size:clamp(32px,6.4vw,58px);line-height:1.12}
h2{font-size:clamp(25px,4.2vw,36px);line-height:1.2}
h3{font-size:22px;line-height:1.25}
p{margin:0}
.lead{font-size:18.5px;color:var(--ink-2);max-width:56ch}
.mark{background:var(--pink);color:var(--ink);padding:0 .2em;border-radius:.28em;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.cur{font-variant-numeric:tabular-nums;unicode-bidi:isolate}
.btn{font:700 17px var(--fb);border:0;border-radius:999px;padding:13px 28px;min-height:50px;background:var(--violet);color:#fff;cursor:pointer;transition:background .15s,transform .15s}
.btn:hover{background:var(--violet-2)}
.btn:active{transform:scale(.98)}
.btn:disabled{background:#B9B3D9;cursor:not-allowed}
.btn.btn-lg{font-size:19px;padding:16px 36px;min-height:60px;justify-self:start}
@media(max-width:599px){.btn.btn-lg{justify-self:stretch}}
.btn.ghost{background:transparent;color:var(--ink);border:1.5px solid var(--line)}
.btn.ghost:hover{background:var(--card)}
.btn.sm{font-size:14.5px;padding:7px 16px;min-height:36px}
button:focus-visible,input:focus-visible,a:focus-visible,summary:focus-visible{outline:3px solid var(--pink);outline-offset:3px}
.link{background:none;border:0;color:var(--violet);font:600 15px var(--fb);cursor:pointer;padding:6px 0;text-decoration:underline;text-underline-offset:3px}

.stage{display:grid;gap:22px;grid-template-columns:minmax(0,1fr)}
@media(min-width:900px){.stage{grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);align-items:start;gap:40px}}

/* preview: the system assembling */
.pv{background:var(--card);border-radius:28px;padding:18px;box-shadow:0 1px 0 var(--line),0 18px 40px -28px rgba(40,24,140,.35);display:grid;gap:14px}
@media(min-width:900px){.pv{position:sticky;top:20px;padding:24px}}
.pv-h{display:flex;align-items:center;gap:12px}
.av{width:42px;height:42px;border-radius:50%;background:var(--violet);color:#fff;display:grid;place-items:center;font-family:var(--fd);font-size:19px;flex:none}
.pv-h .t{min-width:0;flex:1}
.pv-h b{font-family:var(--fd);font-weight:400;font-size:19px;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pv-h small{color:var(--ink-3);font-size:14px}
.tiles{display:flex;flex-wrap:wrap;gap:7px}
.tile{font-size:14px;font-weight:600;padding:6px 13px;border-radius:999px;background:var(--soft);color:var(--ink-3);border:1px dashed var(--line);display:inline-flex;align-items:center;gap:6px;transition:all .35s}
.tile.on{background:var(--violet);color:#fff;border:1px solid var(--violet)}
.tile.on.pain::after{content:"";width:7px;height:7px;border-radius:50%;background:var(--pink)}
.pv-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;border-top:1px solid var(--line);padding-top:14px}
.pv-stats div{min-width:0}
.pv-stats .k{font-size:13px;color:var(--ink-3)}
.pv-stats .v{font-family:var(--fd);font-size:22px;color:var(--violet);font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dots{display:flex;gap:4px;padding-top:6px}
.dots i{width:18px;height:18px;border-radius:50%;background:var(--lilac);border:2px solid var(--card);margin-inline-start:-6px}
.dots i:first-child{margin-inline-start:0}
.dots i.me{background:var(--pink)}
.pv-foot{font-size:13.5px;color:var(--ink-3);display:flex;align-items:center;gap:8px}
.pv-foot::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--pink);animation:blink 1.4s infinite}
@keyframes blink{50%{opacity:.25}}
@media(max-width:599px){.pv-stats,.pv-foot{display:none}.pv{padding:14px;gap:10px}.tile{font-size:13px;padding:5px 11px}}

/* intro */
.intro{display:grid;gap:22px;padding-top:8px}
.facts{display:flex;flex-wrap:wrap;gap:8px}
.facts span{background:var(--card);border:1px solid var(--line);border-radius:999px;padding:6px 14px;font-size:15px;font-weight:600}
.row{display:flex;flex-wrap:wrap;gap:12px;align-items:center}

/* question */
.qbox{display:grid;gap:18px}
.prog{display:grid;grid-template-columns:repeat(9,1fr);gap:5px}
.prog i{height:6px;border-radius:999px;background:var(--line)}
.prog i.done{background:var(--violet)}
.prog i.cur{background:var(--pink)}
.q-enter{animation:qin .38s cubic-bezier(.2,.8,.2,1)}
@keyframes qin{from{opacity:0;transform:translateY(10px)}}
.hint{color:var(--ink-3);font-size:15px;margin-top:-8px}
.opts{display:grid;gap:9px}
@media(min-width:600px){.opts.two{grid-template-columns:1fr 1fr}}
.opt{display:flex;align-items:center;gap:12px;width:100%;text-align:start;background:var(--card);border:1.5px solid var(--line);border-radius:999px;padding:12px 20px;min-height:52px;font:600 16.5px var(--fb);color:var(--ink);cursor:pointer;transition:border-color .15s,background .15s}
.opt:hover{border-color:#B7AEF5}
.opt .tk{width:20px;height:20px;border-radius:50%;border:1.5px solid #C9C4DC;flex:none;display:grid;place-items:center}
.opt.sq .tk{border-radius:6px}
.opt[aria-pressed="true"]{border-color:var(--violet);background:var(--lilac)}
.opt[aria-pressed="true"] .tk{background:var(--violet);border-color:var(--violet)}
.opt[aria-pressed="true"] .tk::after{content:"";width:7px;height:7px;border-radius:50%;background:var(--pink)}
.opt:disabled{opacity:.45;cursor:not-allowed}
.field{width:100%;font:600 19px var(--fb);color:var(--ink);background:var(--card);border:1.5px solid var(--line);border-radius:999px;padding:14px 22px;min-height:56px}
.field:focus{border-color:var(--violet);outline:none}
.qnav{display:flex;justify-content:space-between;align-items:center;gap:12px}
.err{color:#B4235A;font-size:14.5px;min-height:1.2em}

/* gate */
.gate{max-width:560px;margin:0 auto;display:grid;gap:18px;background:var(--card);border-radius:32px;padding:28px 22px;box-shadow:0 18px 40px -28px rgba(40,24,140,.35)}
@media(min-width:600px){.gate{padding:40px}}
.gate label{font-weight:700;font-size:15px;display:grid;gap:7px}
.fine{font-size:14px;color:var(--ink-3)}

/* build */
.build{max-width:560px;margin:0 auto;display:grid;gap:22px;justify-items:center;text-align:center;padding-top:16px}
.ring{width:150px;height:150px;border-radius:50%;background:conic-gradient(var(--violet) calc(var(--p)*1%),var(--lilac) 0);display:grid;place-items:center;transition:--p .3s}
.ring div{width:118px;height:118px;border-radius:50%;background:var(--bg);display:grid;place-items:center;font-family:var(--fd);font-size:32px;font-variant-numeric:tabular-nums}
.log{list-style:none;margin:0;padding:0;display:grid;gap:8px;width:100%;text-align:start}
.log li{display:flex;gap:12px;align-items:center;background:var(--card);border-radius:999px;padding:8px 10px 8px 18px;font-weight:600;font-size:15.5px;animation:qin .3s}
.log li .pill{flex:none}
.log li.done span:last-child::after{content:" ✓";color:var(--ok)}

/* reveal */
.rv-hero{display:grid;gap:14px;margin-bottom:22px}
.navchips{display:flex;gap:8px;overflow-x:auto;padding-bottom:6px;margin-bottom:22px;scrollbar-width:none}
.navchips button{flex:none;font:600 14.5px var(--fb);border-radius:999px;padding:7px 15px;border:1px solid var(--line);background:var(--card);color:var(--ink);cursor:pointer}
.navchips button.pain{border-color:var(--pink);box-shadow:inset 0 0 0 1px var(--pink)}
.mods{display:grid;gap:18px}
.mod{background:var(--card);border-radius:30px;padding:20px;display:grid;gap:16px;scroll-margin-top:16px;box-shadow:0 1px 0 var(--line)}
@media(min-width:700px){.mod{padding:30px}}
.mod-h{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;flex-wrap:wrap}
.mod-h .t{display:grid;gap:6px;min-width:0;flex:1 1 260px}
.mod-h p{color:var(--ink-2);max-width:60ch}
.flag{font-size:13px;font-weight:700;color:var(--ink);background:var(--pink);border-radius:999px;padding:2px 10px;justify-self:start}
.mod-f{display:flex;justify-content:flex-start}
.split{display:grid;gap:16px;grid-template-columns:minmax(0,1fr)}
@media(min-width:760px){.split{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);align-items:start}}

/* whatsapp */
.wa{border-radius:24px;overflow:hidden;border:1px solid var(--line);background:#EFEAE2}
.wa-h{display:flex;gap:10px;align-items:center;background:var(--ink);color:#fff;padding:10px 14px}
.wa-h .av{width:36px;height:36px;font-size:16px}
.wa-h b{display:block;font-weight:700}
.wa-h small{opacity:.7;font-size:13px}
.wa-b{padding:14px 12px;display:flex;flex-direction:column;gap:8px;min-height:330px}
.bub{max-width:84%;padding:8px 12px 6px;border-radius:14px;font-size:15.5px;line-height:1.45;animation:pop .25s ease-out;box-shadow:0 1px 0 rgba(0,0,0,.06)}
.bub small{display:block;text-align:end;font-family:var(--fm);font-size:10.5px;color:#7A7480;margin-top:2px;direction:ltr}
.bub.in{background:#fff;align-self:flex-start;border-start-start-radius:4px}
.bub.out{background:#E4E0FF;align-self:flex-end;border-start-end-radius:4px}
.bub.vid{padding:5px 5px 6px;width:min(230px,84%)}
.vth{height:120px;border-radius:11px;background:linear-gradient(135deg,#573DFE,#8A76FF);position:relative;display:grid;place-items:center;margin-bottom:6px;overflow:hidden}
.vth::before{content:"";position:absolute;width:90px;height:90px;border-radius:50%;background:#FF6BD3;top:-40px;left:-30px;opacity:.8}
.vth .play{width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.95);position:relative}
.vth .play::after{content:"";position:absolute;left:17px;top:13px;border-left:14px solid #573DFE;border-top:9px solid transparent;border-bottom:9px solid transparent}
.vth .dur{position:absolute;bottom:6px;right:8px;font-family:var(--fm);font-size:11px;color:#fff;background:rgba(0,0,0,.35);border-radius:6px;padding:1px 5px}
.bub.typing{display:flex;gap:4px;padding:12px 14px}
.bub.typing i{width:7px;height:7px;border-radius:50%;background:#8C889A;animation:dot 1s infinite}
.bub.typing i:nth-child(2){animation-delay:.15s}.bub.typing i:nth-child(3){animation-delay:.3s}
@keyframes dot{50%{transform:translateY(-4px);opacity:.5}}
@keyframes pop{from{opacity:0;transform:translateY(6px) scale(.98)}}
.side{display:grid;gap:12px;background:var(--soft);border-radius:24px;padding:18px}
.lbl{font-size:14px;color:var(--ink-3);font-weight:600}
.meter{height:12px;border-radius:999px;background:var(--lilac);overflow:hidden}
.meter i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--violet),var(--pink));border-radius:999px;transition:width .7s cubic-bezier(.2,.8,.2,1)}
.big{font-family:var(--fd);font-size:46px;line-height:1;color:var(--violet);font-variant-numeric:tabular-nums}
.chips{display:flex;flex-wrap:wrap;gap:7px}
.chip{font-size:14px;font-weight:700;border-radius:999px;padding:4px 12px;background:var(--card);border:1px solid var(--line);animation:pop .3s}
.chip.hot{background:var(--pink);border-color:var(--pink)}
.chip.ok{background:var(--ok-bg);color:var(--ok);border-color:transparent}
.chip.warn{background:var(--warn-bg);color:var(--warn);border-color:transparent}
.chip.mute{background:var(--soft);color:var(--ink-2)}
.chip.vi{background:var(--violet);color:#fff;border-color:var(--violet)}

/* capi */
.vs{display:grid;gap:12px;grid-template-columns:minmax(0,1fr)}
@media(min-width:620px){.vs{grid-template-columns:1fr 1fr}}
.vs>div{border-radius:24px;padding:18px;display:grid;gap:12px;align-content:start}
.vs .old{background:var(--soft)}
.vs .new{background:var(--lilac)}
.flow{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-weight:700;font-size:15px}
.flow span{background:var(--card);border-radius:999px;padding:4px 12px}
.flow .lit{background:var(--violet);color:#fff}
.flow em{font-style:normal;color:var(--ink-3)}
.bar{height:14px;border-radius:999px;background:rgba(22,20,31,.08);overflow:hidden}
.bar i{display:block;height:100%;border-radius:999px;width:0;transition:width 1s cubic-bezier(.2,.8,.2,1)}
.old .bar i{background:#9C97AE}.new .bar i{background:var(--violet)}
.num{font-family:var(--fd);font-size:30px;font-variant-numeric:tabular-nums}
.sig{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.sig .chip{opacity:.25;transition:opacity .3s;animation:none}
.sig .chip.on{opacity:1}

/* quote */
.doc{border:1px solid var(--line);border-radius:24px;padding:20px;display:grid;gap:14px;background:#fff;max-width:620px}
.doc-h{display:flex;justify-content:space-between;gap:10px;align-items:center;flex-wrap:wrap}
.doc-h .nm{display:flex;gap:10px;align-items:center;font-family:var(--fd);font-size:19px}
.doc-h .nm .av{width:34px;height:34px;font-size:15px}
.mono{font-family:var(--fm);font-size:13px;color:var(--ink-3);direction:ltr;unicode-bidi:isolate}
.lines{display:grid;gap:0}
.ln{display:flex;justify-content:space-between;gap:14px;padding:10px 0;border-bottom:1px solid var(--line);animation:pop .3s}
.ln span:first-child{min-width:0}
.tot{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding-top:4px}
.tot b{font-family:var(--fd);font-weight:400;font-size:30px;color:var(--violet)}
.send{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.fake{font:700 15px var(--fb);background:var(--ink);color:#fff;border-radius:999px;padding:9px 18px;transition:transform .15s,background .3s}
.fake.press{transform:scale(.94);background:var(--violet)}

/* dashboard */
.kpis{display:grid;gap:10px;grid-template-columns:repeat(2,minmax(0,1fr))}
@media(min-width:760px){.kpis{grid-template-columns:repeat(4,minmax(0,1fr))}}
.kpi{background:var(--soft);border-radius:22px;padding:14px 16px;display:grid;gap:2px;min-width:0}
.kpi .k{font-size:14px;color:var(--ink-2);font-weight:600}
.kpi .v{font-family:var(--fd);font-size:clamp(24px,3.4vw,32px);color:var(--violet);font-variant-numeric:tabular-nums;white-space:nowrap}
.kpi .s{font-size:13px;color:var(--ok);font-weight:700}
.dgrid{display:grid;gap:12px;grid-template-columns:minmax(0,1fr)}
@media(min-width:760px){.dgrid{grid-template-columns:1fr 1fr}}
.panel{background:var(--soft);border-radius:22px;padding:16px;display:grid;gap:10px;min-width:0}
.hb{display:grid;grid-template-columns:minmax(0,7.5em) minmax(0,1fr) 3em;gap:10px;align-items:center;font-size:14.5px;font-weight:600}
.hb .bar i{background:var(--violet)}
.hb .bar{height:10px}
.hb span:last-child{font-variant-numeric:tabular-nums;color:var(--ink-2);text-align:end}
.spark{width:100%;height:auto;display:block}

/* content: schedule and simulated social previews */
.content-demo-note{display:flex;align-items:center;gap:8px 12px;flex-wrap:wrap;margin-bottom:15px;font-size:14px;color:var(--ink-2)}
.content-demo-note b{color:var(--ink);font-size:16px}.content-demo-note>span:last-child{margin-inline-start:auto}
.cp-demo-dot{width:8px;height:8px;background:var(--pink);border-radius:50%;flex:none}
.week{display:grid;gap:10px;grid-template-columns:repeat(5,minmax(0,1fr))}
.post{border:1.5px solid transparent;border-radius:18px;background:var(--soft);padding:11px;display:grid;gap:8px;align-content:start;min-width:0;font:inherit;color:var(--ink);text-align:start;cursor:pointer;transition:background .3s,border-color .2s,box-shadow .2s}
.post:hover{border-color:#B2A5FC}.post[aria-pressed="true"]{border-color:var(--violet);box-shadow:0 0 0 1px var(--violet)}
.post.ready{background:var(--lilac)}.post.work .thumb{animation:blink .8s infinite}
.post .d{display:flex;justify-content:space-between;gap:4px;align-items:center;font-weight:700;font-size:13px}.post .d .mono{font-size:11px}
.post .thumb{aspect-ratio:1.2;display:block;border-radius:10px;position:relative;overflow:hidden}
.post .post-title{font-weight:700;font-size:14px;line-height:1.35;overflow-wrap:anywhere;min-height:3.9em}
.post .chip{font-size:11px;white-space:normal;max-width:100%;line-height:1.35}
.cp-card-link{display:flex;align-items:center;justify-content:space-between;gap:5px;font-size:12px;font-weight:700;color:var(--violet);margin-top:2px}
.cp-preview-layout{margin-top:24px;display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1fr);align-items:center;gap:30px;padding:24px;background:var(--soft);border:1px solid var(--line);border-radius:24px}
.cp-preview-info{min-width:0;display:grid;gap:14px}.cp-kicker{color:var(--violet);font-size:13px;font-weight:800;letter-spacing:.02em}
.cp-preview-info h3{font-size:clamp(23px,2.8vw,30px);line-height:1.25;overflow-wrap:anywhere}.cp-preview-info p{font-size:16px;color:var(--ink-2);max-width:34ch}
.cp-preview-info small{font-size:13px;color:var(--ink-2);max-width:34ch}.cp-schedule{font-size:14px;font-weight:700;unicode-bidi:plaintext}
.cp-platforms{display:flex;flex-wrap:wrap;gap:5px;direction:ltr;justify-content:flex-end;border:1px solid #CCC5E4;border-radius:12px;padding:4px;width:fit-content;max-width:100%;background:#fff}
.cp-platforms button{font:700 13px var(--fb);border:0;background:transparent;color:#565063;padding:8px 13px;border-radius:8px;cursor:pointer}.cp-platforms button[aria-pressed="true"]{background:var(--ink);color:#fff}
.cp-preview{min-width:0;width:100%;max-width:380px;justify-self:center}.cp-social{border:1px solid #D7D7DE;border-radius:15px;background:#fff;overflow:hidden;color:#17171C;box-shadow:0 12px 28px -18px #38304433}
.cp-social-top{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:12px 15px;border-bottom:1px solid #EEE;direction:ltr}.cp-social-brand{font-family:Georgia,serif;font-size:23px;font-weight:bold;font-style:italic;letter-spacing:-1px}.cp-social-demo{font:600 10px var(--fb);color:#666;direction:rtl;white-space:nowrap}
.cp-account{display:flex;align-items:center;gap:9px;padding:12px 14px;min-width:0}.cp-avatar{display:grid;place-items:center;width:34px;height:34px;border:2px solid #fff;outline:2px solid #E880AF;border-radius:50%;background:#F4EFFF;font-weight:800;color:var(--violet);flex:none;font-size:15px}
.cp-account-text{display:grid;min-width:0;flex:1;line-height:1.25}.cp-account-text b{font-size:13px;font-weight:800;overflow-wrap:anywhere}.cp-account-text small{font-size:10px;color:#707078;margin-top:4px}.cp-more{font-size:20px;letter-spacing:1px;align-self:flex-start;line-height:1}
.cp-creative{display:block;position:relative;isolation:isolate;overflow:hidden;aspect-ratio:1;background:#EDE4D8;color:#342F40;width:100%}.cp-creative::before{content:"";position:absolute;width:68%;aspect-ratio:1;background:#fff8;left:-19%;top:-14%;border-radius:50%;z-index:-1}.cp-creative::after{content:"";position:absolute;width:78%;height:45%;background:#fff5;right:-33%;bottom:-15%;border-radius:50%;transform:rotate(-25deg);z-index:-1}
.cp-creative-brand{position:absolute;inset:6% 7% auto;display:block;font-size:11px;font-weight:800;overflow-wrap:anywhere;line-height:1.3;max-height:3.9em;overflow:hidden}
.cp-art{position:absolute;width:43%;height:43%;left:7%;top:14%;color:currentColor;opacity:.65;transform:rotate(-6deg)}
.cp-creative-copy{position:absolute;inset:auto 7% 9%;display:grid;gap:9px;max-width:84%;line-height:1.2}.cp-eyebrow{font-size:10px;font-weight:700;letter-spacing:.04em}.cp-creative-copy strong{font-family:var(--fd);font-size:clamp(21px,3vw,30px);font-weight:400;overflow-wrap:anywhere;text-wrap:balance}.cp-creative-rule{height:3px;width:32px;background:currentColor;opacity:.8;margin-top:4px}
.cp-tone-1{background:#273E3A;color:#F9E8CB}.cp-tone-2{background:#E7E0F6;color:#3F2A66}.cp-tone-3{background:#E8EFF0;color:#274B54}.cp-tone-4{background:#E7B1A2;color:#522C36}
.cp-reel-mark{position:absolute;top:7%;left:7%;display:grid;place-items:center;background:#0002;color:#fff;border:1px solid #fff8;border-radius:6px;width:23px;height:25px;font-size:11px}
.post .cp-creative-brand{font-size:6px;max-height:2.6em}.post .cp-creative-copy{gap:3px;bottom:8%}.post .cp-eyebrow{display:none}.post .cp-creative-copy strong{font:800 clamp(9px,1vw,13px)/1.2 var(--fb)}.post .cp-creative-rule{height:2px;width:15px;margin-top:0}
.cp-social-actions{display:flex;align-items:center;gap:13px;padding:11px 14px 5px;direction:ltr}.cp-social-actions span{display:flex}.cp-social-actions svg{width:20px;height:20px}.cp-social-actions .cp-save{margin-left:auto}
.cp-caption{font-size:12px;line-height:1.55;padding:5px 14px 13px;overflow-wrap:anywhere}.cp-caption b{font-weight:800}.cp-caption span{color:#585860}.cp-social-footer{font-size:11px;color:#777;padding:9px 14px;border-top:1px solid #F0F0F0}
.cp-facebook .cp-social-brand{font:800 23px Arial,sans-serif;font-style:normal;color:#1877F2;letter-spacing:-1px}.cp-facebook .cp-avatar{outline-color:#D6DCE4}.cp-facebook .cp-caption-top{padding-top:0}.cp-facebook .cp-social-actions{display:none}.cp-facebook .cp-social-footer{text-align:center;font-size:12px;word-spacing:10px;color:#596474}
@media(max-width:760px){.week{grid-template-columns:repeat(3,minmax(0,1fr))}.cp-preview-layout{grid-template-columns:minmax(0,1fr);gap:20px;padding:18px}.cp-preview-info{gap:10px}.cp-preview-info p,.cp-preview-info small{max-width:none}.cp-creative-copy strong{font-size:28px}.post .cp-creative-copy strong{font-size:12px}}
@media(max-width:420px){.week{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.post{padding:9px}.post .d{font-size:12px}.post .post-title{font-size:13px;min-height:3.9em}.content-demo-note>span:last-child{margin-inline-start:0}.cp-preview-layout{padding:12px;border-radius:18px}.cp-social-top{padding-inline:11px}.cp-account{padding-inline:11px}.cp-creative-copy strong{font-size:25px}.cp-platforms button{padding:7px 11px}.post .cp-creative-copy strong{font-size:12px}}

/* invoices */
.inv{display:grid;gap:8px}
.ir{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:12px;align-items:center;background:var(--soft);border-radius:18px;padding:11px 16px;font-weight:600}
.ir.new{background:var(--lilac);animation:pop .4s}
.ir .mono{font-size:12px}
@media(max-width:520px){.ir{grid-template-columns:minmax(0,1fr) auto}.ir .chip{grid-column:1/-1;justify-self:start}}
.sum{display:flex;justify-content:space-between;align-items:baseline;gap:10px;flex-wrap:wrap}

/* team */
.team{display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
.mem{background:var(--soft);border-radius:22px;padding:14px;display:grid;gap:8px}
.mem .top2{display:flex;gap:10px;align-items:center}
.mem .av{width:34px;height:34px;font-size:15px}
.mem .av.p{background:var(--pink);color:var(--ink)}
.mem b{display:block;font-size:16px}
.mem small{color:var(--ink-3);font-size:13px}
.mem .bar{height:8px}
.mem .bar i{background:var(--violet)}
.mem .ln2{display:flex;justify-content:space-between;font-size:13.5px;color:var(--ink-2);font-weight:600}
.feed{list-style:none;margin:0;padding:0;display:grid;gap:7px}
.feed li{display:flex;gap:10px;align-items:center;font-weight:600;font-size:15px;animation:pop .3s;flex-wrap:wrap}

/* close */
.close{margin-top:26px;background:var(--violet);color:#fff;border-radius:32px;padding:30px 22px;display:grid;gap:16px;position:relative;overflow:hidden}
@media(min-width:700px){.close{padding:44px}}
.close::before{content:"";position:absolute;width:220px;height:220px;border-radius:50%;background:var(--pink);top:-110px;left:-80px}
.close>*{position:relative}
.close p{color:#E9E5FF;max-width:56ch;font-size:18px}
.close .btn{background:#fff;color:var(--violet);justify-self:start}
.close .btn:hover{background:var(--lilac)}
.close .mark{color:var(--ink)}
.done-msg{background:rgba(255,255,255,.12);border-radius:20px;padding:14px 18px;font-weight:700}
details.crm{margin-top:18px;background:var(--card);border-radius:24px;padding:16px 20px}
details.crm summary{cursor:pointer;font-weight:700}
.crm dl{display:grid;grid-template-columns:minmax(0,9em) minmax(0,1fr);gap:6px 14px;margin:14px 0 0;font-size:15px}
.crm dt{color:var(--ink-3)}
.crm dd{margin:0;font-weight:600}
.proto{margin-top:16px;text-align:center;font-size:13.5px;color:var(--ink-3)}
/* system shell */
body.sysmode{overflow:hidden}
body.sysmode .circ,body.sysmode #app>.top{display:none}
body.sysmode #app{max-width:none;padding-block:12px;height:calc(100dvh - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px))}
body.sysmode #s-reveal,body.sysmode #reveal{height:100%}
.sys{height:100%;display:grid;grid-template-columns:250px minmax(0,1fr);gap:12px}
.sb{background:transparent;color:var(--ink);border-radius:28px;padding:18px 0;display:flex;flex-direction:column;gap:14px;overflow:auto}
.sb-h{display:flex;gap:10px;align-items:center;padding:0 8px}
.sb-h b{display:block;font-family:var(--fd);font-weight:400;font-size:18px}
.sb-h small{display:block;color:var(--ink-3);font-size:13px;line-height:1.35}
.sb-nav{display:flex;flex-direction:column;gap:3px}
.nv{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;text-align:start;background:transparent;border:0;color:var(--ink-2);font:600 15.5px var(--fb);padding:10px 14px;border-radius:999px;cursor:pointer}
.nv:hover{background:var(--lilac)}
.nv[aria-current="true"]{background:var(--violet);color:#fff}
.nv .dt{width:8px;height:8px;border-radius:50%;background:var(--pink);flex:none}
.nv.lk{color:var(--ink-3)}
.nv.int{color:var(--ink-3);font-size:13.5px;margin-top:8px}
.sb-sep{font-family:var(--fm);font-size:11.5px;letter-spacing:.06em;color:var(--ink-3);padding:12px 14px 4px}
.sb-30{margin-top:auto;background:var(--card);border-radius:20px;padding:14px;display:grid;gap:8px}
.sb-30 .meter{background:var(--lilac)}
.sb-30 b{font-family:var(--fd);font-weight:400;font-size:28px;color:var(--pink)}
.mn{background:var(--card);border-radius:28px;display:flex;flex-direction:column;min-height:0;min-width:0;overflow:hidden}
.mn-h{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:12px 18px;border-bottom:1px solid var(--line)}
.crumb{display:flex;gap:10px;align-items:center;min-width:0}
.crumb b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.toast{margin:12px 18px 0;background:var(--lilac);border-radius:20px;padding:9px 16px;font-weight:700;font-size:14.5px}
.view{flex:1;overflow:auto;padding:20px;display:grid;gap:16px;align-content:start;outline:none}
@media(min-width:900px){.view{padding:28px 32px}}
.v-h{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;flex-wrap:wrap}
.v-h .t{display:grid;gap:6px;min-width:0;flex:1 1 280px}
.v-h p{color:var(--ink-2);max-width:62ch}
.lgrid{display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(190px,1fr))}
.lc{background:rgba(255,255,255,.1);border-radius:20px;padding:14px;display:grid;gap:6px;font-size:15px;color:#E9E5FF}
.lc b{color:#fff;font-size:16.5px}
.crm{background:var(--soft);border-radius:24px;padding:16px 20px}
.ads{display:grid;gap:8px}
.ad{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;gap:12px;align-items:center;background:var(--soft);border-radius:20px;padding:11px 14px;transition:background .3s,opacity .3s}
.ad.win{background:var(--lilac)}
.ad.off{opacity:.45}
.adk{width:32px;height:32px;border-radius:50%;background:var(--ink);color:#fff;display:grid;place-items:center;font-family:var(--fm);font-size:13px}
.adt{display:grid;min-width:0}
.adt b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.adm{display:grid;text-align:center}
.adm b{font-family:var(--fd);font-weight:400;font-size:22px;font-variant-numeric:tabular-nums}
.wa-b{min-height:290px}
@media(max-width:819px){
  .mn-h{padding:10px 12px}
  .mn-h .btn{font-size:13.5px;padding:6px 12px}
  .view{padding:16px}
  .ad{grid-template-columns:auto minmax(0,1fr) auto}
  .ad .st{grid-column:2/-1;justify-self:start}
}
.ph{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.tbl{overflow-x:auto;margin:0 -4px}
.ct{width:100%;border-collapse:separate;border-spacing:0 6px;font-size:14.5px;min-width:640px}
.ct th{font-weight:600;color:var(--ink-3);text-align:start;padding:0 10px;font-size:13px;white-space:nowrap}
.ct td{background:var(--card);padding:10px;font-variant-numeric:tabular-nums;white-space:nowrap}
.ct td:first-child{border-radius:0 16px 16px 0;white-space:normal;min-width:150px}
.ct td:last-child{border-radius:16px 0 0 16px}
.ct td small{display:block;color:var(--ink-3);font-size:12.5px}
.ct tr.win td{background:var(--lilac)}
.cmp{display:grid;gap:10px;grid-template-columns:minmax(0,1fr)}
@media(min-width:700px){.cmp{grid-template-columns:1fr 1fr}}
.cr{background:var(--card);border-radius:18px;padding:12px 14px;display:grid;gap:8px}
.cmp .hb{grid-template-columns:3.5em minmax(0,1fr) 6.5em}
.bar.sp i{background:#B9B3D0!important}
.dl{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:10px;align-items:center;background:var(--card);border-radius:999px;padding:6px 8px 6px 14px;font-size:14.5px;transition:background .4s}
.dl.flash{background:var(--ok-bg)}
.dn{display:grid;min-width:0}.dn small{color:var(--ink-3);font-size:12.5px}
@media(max-width:520px){.dl .chip{font-size:12px;padding:2px 8px}}
.tm{display:grid;gap:5px}
.tmh{display:flex;gap:8px;align-items:center}.tmh small{color:var(--ink-3);font-size:13px}
.av.sm{width:26px;height:26px;font-size:12px}.av.p{background:var(--pink);color:var(--ink)}
.tk2{display:flex;gap:10px;align-items:center;background:var(--card);border-radius:999px;padding:7px 12px;font-size:14.5px;font-weight:600}
.tk2 .av.sm{width:22px;height:22px;font-size:11px;flex:none}
.tk2 span:last-child{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tk2 .cb{width:18px;height:18px;border-radius:6px;border:1.5px solid #C9C4DC;flex:none;display:grid;place-items:center;transition:all .3s}
.tk2.done{color:var(--ink-3)}.tk2.done span:last-child{text-decoration:line-through}
.tk2.done .cb{background:var(--violet);border-color:var(--violet)}
.tk2.done .cb::after{content:"";width:6px;height:6px;border-radius:50%;background:var(--pink)}
.dtabs{display:flex;gap:4px;background:var(--soft);border-radius:999px;padding:4px}
.dtabs button{flex:1;border:0;background:transparent;border-radius:999px;padding:8px 6px;font:700 14px var(--fb);color:var(--ink-2);cursor:pointer;white-space:nowrap}
.dtabs button[aria-selected="true"]{background:var(--violet);color:#fff}
.dpan{display:grid;gap:12px;grid-template-columns:minmax(0,1fr)}
.dpan .panel{display:none}.dpan .panel.on{display:grid}
@media(min-width:1000px){.dtabs{display:none}.dpan{grid-template-columns:1fr 1fr}.dpan .panel{display:grid}}
.cc{background:var(--card);border-radius:18px;padding:12px 14px;display:grid;gap:9px}
.cc.win{box-shadow:inset 0 0 0 2px var(--lilac)}
.cch{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.cch b{display:block}.cch small{display:block;color:var(--ink-3);font-size:12.5px;line-height:1.3}
.cst{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.cst div{display:grid;min-width:0}.cst span{font-size:12px;color:var(--ink-3);font-weight:600}
.cst b{font-size:16px;font-variant-numeric:tabular-nums;white-space:nowrap}
.cc .hb{grid-template-columns:3.5em minmax(0,1fr) 6.5em;font-size:13.5px}
.kpi .s{font-size:12.5px}
@media(max-width:819px){
  .kpis{gap:8px}.kpi{padding:10px 12px;border-radius:18px}.kpi .v{font-size:24px}.kpi .k{font-size:13px}
  .view[data-v="dash"]{gap:12px}
  .view[data-v="dash"] .v-h p,.view[data-v="dash"] .v-h>.pill{display:none}
  .view[data-v="dash"] .v-h h2{font-size:23px}
}
.money{background:var(--violet);color:#fff;border-radius:26px;padding:20px 22px 0;display:grid;gap:6px;position:relative;overflow:hidden}
.money::before{content:"";position:absolute;width:160px;height:160px;border-radius:50%;background:var(--pink);top:-90px;left:-60px}
.money>*{position:relative}
.mk{font-size:15px;color:#E4E0FF;font-weight:600}
.mv{font-family:var(--fd);font-size:clamp(40px,9vw,58px);line-height:1.05;font-variant-numeric:tabular-nums}
.mrow{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;font-size:15px;color:#E4E0FF}
.mrow b{color:#fff}
.mroas{background:var(--pink);color:var(--ink);font-weight:800;border-radius:999px;padding:3px 12px}
.mspark{width:calc(100% + 44px);margin:4px -22px 0;height:auto;display:block}
.strip{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));background:var(--soft);border-radius:20px}
.strip div{display:grid;justify-items:center;padding:10px 6px;border-inline-start:1px solid var(--line)}
.strip div:first-child{border:0}
.strip span{font-size:13px;color:var(--ink-2);font-weight:600;text-align:center}
.strip b{font-family:var(--fd);font-weight:400;font-size:26px;color:var(--violet);font-variant-numeric:tabular-nums}
.vsc{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.camp{border-radius:22px;padding:14px;display:grid;gap:4px;align-content:start;min-width:0}
.camp.w{background:var(--ok-bg)}.camp.l{background:var(--soft)}
.ct2{font-size:12.5px;font-weight:800;justify-self:start;border-radius:999px;padding:1px 10px}
.camp.w .ct2{background:var(--ok);color:#fff}.camp.l .ct2{background:var(--line);color:var(--ink-2)}
.cn{font-size:15.5px;line-height:1.25}
.cx{font-family:var(--fd);font-size:34px;line-height:1.1}
.camp.w .cx{color:var(--ok)}.camp.l .cx{color:var(--ink-3)}
.cl{font-size:13px;color:var(--ink-2);line-height:1.4}
.cnote{font-size:12.5px;font-weight:700;color:var(--violet);margin-top:2px}
.view[data-v="dash"] .dgrid{grid-template-columns:minmax(0,1fr)}
@media(min-width:900px){.view[data-v="dash"] .dgrid{grid-template-columns:1fr 1fr}}
.done{max-width:560px;margin:0 auto;display:grid;gap:18px;background:var(--card);border-radius:32px;padding:26px 20px;box-shadow:0 18px 40px -28px rgba(40,24,140,.35)}
@media(min-width:600px){.done{padding:38px}}
.nxt{list-style:none;margin:0;padding:0;display:grid;gap:10px;counter-reset:n}
.nxt li{counter-increment:n;display:grid;grid-template-columns:auto 1fr;gap:2px 12px;background:var(--soft);border-radius:20px;padding:12px 14px}
.nxt li::before{content:counter(n);grid-row:1/3;width:30px;height:30px;border-radius:50%;background:var(--violet);color:#fff;display:grid;place-items:center;font-family:var(--fm);font-size:14px}
.nxt b{font-size:16px}.nxt span{color:var(--ink-2);font-size:15px}
.wa-prev{border-radius:22px;overflow:hidden;border:1px solid var(--line);background:#EFEAE2;animation:pop .5s .3s both}
.qr{display:flex;flex-wrap:wrap;gap:6px}
.qr span{background:#fff;color:var(--violet);font-weight:700;font-size:14px;border-radius:999px;padding:5px 12px;border:1px solid var(--line)}
.mn-h .btn{white-space:nowrap;flex:none}
.mn-cta{padding:10px 14px 12px;border-top:1px solid var(--line);background:var(--card)}
.mn-cta .btn{width:100%;font-size:18px;padding:13px 20px;min-height:54px}
.view .done{box-shadow:none;padding:4px 0;margin:0;max-width:600px}
.bk{display:grid;gap:12px}
.days{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
.day{flex:none;display:grid;justify-items:center;min-width:76px;border:1.5px solid var(--line);background:var(--card);border-radius:18px;padding:8px 12px;font:700 15px var(--fb);color:var(--ink);cursor:pointer}
.day small{font:500 12.5px var(--fm);color:var(--ink-3)}
.day[aria-pressed="true"]{background:var(--violet);border-color:var(--violet);color:#fff}
.day[aria-pressed="true"] small{color:var(--lilac)}
.hours{display:grid;grid-template-columns:repeat(auto-fill,minmax(84px,1fr));gap:8px}
.hr{border:1.5px solid var(--line);background:var(--card);border-radius:999px;padding:10px 0;font:500 15px var(--fm);color:var(--ink);cursor:pointer;direction:ltr}
.hr:hover:not(:disabled){border-color:#B7AEF5}
.hr[aria-pressed="true"]{background:var(--pink);border-color:var(--pink)}
.hr:disabled{opacity:.35;text-decoration:line-through;cursor:not-allowed}
.bk-f{display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap;background:var(--soft);border-radius:22px;padding:12px 14px}
.bk-sum{font-weight:700;font-size:16px}
@media(max-width:819px){.mn-cta{padding:8px 10px 10px}.mn-cta .btn{font-size:15px;min-height:50px;padding:12px 8px;white-space:nowrap}}
.nv{justify-content:flex-start;gap:10px}
.nv .ic{display:flex;flex:none}.nv .ic svg{width:19px;height:19px}
.nv .dt{margin-inline-start:auto}
.nv .short{display:none}
@media(max-width:819px){
  .sys{grid-template-columns:70px minmax(0,1fr);gap:8px}
  .sb{padding:10px 0;border-radius:24px;gap:8px;overflow-y:auto;scrollbar-width:none}
  .sb-h{justify-content:center;padding:0}
  .sb-h>div{display:none}
  .sb-h .av{width:36px;height:36px;font-size:16px}
  .sb-nav{gap:2px}
  .nv{flex-direction:column;justify-content:center;gap:3px;padding:8px 2px;border-radius:16px;font-size:11.5px;line-height:1.15;text-align:center;position:relative}
  .nv .full{display:none}.nv .short{display:block}
  .nv .ic svg{width:21px;height:21px}
  .nv .dt{position:absolute;top:6px;left:12px;width:7px;height:7px;margin:0}
  .sb-sep{font-size:0;padding:0;border-top:1px solid var(--line);margin:6px 12px}
  .nv.int{margin-top:4px;font-size:11px}
  .sb-30{padding:8px 4px;border-radius:16px;justify-items:center;gap:4px}
  .sb-30 .lbl{display:none}
  .sb-30 .meter{width:100%;height:6px}
  .sb-30 b{font-size:17px}
  .crumb .pill{display:none}
}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

.honey{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;clip-path:inset(50%)!important;white-space:nowrap!important;border:0!important}.err[role="alert"]{min-height:1.5em}

.qr button{background:#fff;color:var(--violet);font:700 14px var(--fb);border-radius:999px;padding:5px 12px;border:1px solid var(--line);cursor:pointer}.qr button:focus-visible{outline:3px solid var(--violet);outline-offset:2px}

/* Keep the social preview readable inside the compact mobile sidebar layout. */
@media(max-width:420px){
 .view[data-v="content"]{padding-inline:8px}
 .view[data-v="content"] .cp-preview-layout{padding:0;border:0;background:transparent;border-radius:0;gap:18px}
 .cp-social-top{padding:10px;gap:4px 8px;flex-wrap:wrap}
 .cp-social-brand{font-size:20px}.cp-facebook .cp-social-brand{font-size:20px}
 .cp-social-demo{font-size:10px}
 .cp-account{padding:10px;gap:8px}.cp-account-text b{font-size:12px}
 .cp-avatar{width:29px;height:29px;font-size:13px}
 .cp-creative-copy strong{font-size:clamp(18px,5vw,22px)}
 .cp-caption{padding-inline:10px}.cp-social-actions{padding-inline:10px;gap:10px}
 .cp-preview-info h3{font-size:22px}.cp-preview-info p{font-size:15px}
}