/* Demo v2: "one click, a whole business kit". Loaded after styles.css. */
.app{--p:#2f6f6a;--a:#e3a868;--d:color-mix(in srgb,var(--p) 40%,#0c1014);--l:color-mix(in srgb,var(--p) 8%,#fff)}
.chip{display:inline-flex;align-items:center;gap:7px}
.chip svg{width:18px;height:18px}
.lmk{display:inline-grid;place-items:center;width:1.5em;height:1.5em;border-radius:30%;background:var(--p);color:#fff;flex:none}
.lmk svg{width:62%;height:62%}

/* nav extras */
.bizchip{flex:none;display:inline-flex;align-items:center;gap:8px;border:1.5px solid var(--line);background:var(--card);border-radius:999px;padding:5px 12px 5px 10px;font-family:Rubik;font-weight:700;font-size:14.5px;cursor:pointer;color:var(--ink);max-width:210px}
.bizchip span:not(.lmk){white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bizchip>svg{width:15px;height:15px;color:var(--flag);flex:none}
.bizchip:hover{border-color:var(--sky);background:var(--sky-pale)}
.tab .cnt{background:var(--flag);color:#fff;border-radius:999px;font-size:11.5px;min-width:19px;height:19px;display:inline-grid;place-items:center;padding:0 5px}

/* ---- brief ---- */
.brief{display:grid;grid-template-columns:1.25fr .75fr;gap:34px;align-items:center;padding:44px clamp(18px,4.5vw,60px) 96px}
.brief h3{font-size:clamp(32px,4.6vw,50px);font-weight:900}
.brief .q{font-size:20px;margin:10px 0 20px}
.brief .fields{margin-bottom:18px}
.brief .form-row{max-width:560px}
.brief .go{margin-top:24px;font-size:23px;padding:20px 40px;animation:glow 2.4s ease-in-out infinite}
.brief .go svg{width:26px;height:26px}
@keyframes glow{50%{box-shadow:4px 4px 0 var(--sky),0 0 0 12px rgba(0,56,184,.08)}}
.brief .hint{margin-top:16px;max-width:520px}
.brief-side .note{transform:rotate(1.2deg);padding:30px 24px 26px}
.gets{list-style:none;margin:6px 0 0;padding:0;display:grid;gap:2px}
.note .gets li{display:flex;gap:10px;align-items:center;font-size:16.5px;color:var(--ink);padding:7px 0;border-bottom:1px dashed rgba(45,62,102,.18)}
.gets li:last-child{border:0}
.gets svg{width:20px;height:20px;color:var(--sky-text);flex:none}

/* ---- build ---- */
.build{padding:38px clamp(18px,4.5vw,60px) 96px;min-height:600px}
.build-head{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.build-head img{width:74px;height:74px;animation:bob 1.1s ease-in-out infinite}
.build-head h3{font-size:clamp(26px,3.6vw,38px);font-weight:900}
.build-head p{color:var(--ink-soft)}
.build-count{margin-inline-start:auto;text-align:center;background:var(--card);border:2px solid var(--ink);border-radius:18px;box-shadow:5px 5px 0 var(--sky);padding:8px 22px}
.build-count b{display:block;font-family:Rubik;font-weight:900;font-size:46px;line-height:1}
.build-count span{font-size:14px;color:var(--ink-soft)}
.build-wall{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:12px;margin-top:26px}
.btile{position:relative;background:var(--card);border:1.5px solid var(--line);border-radius:14px;padding:14px 14px 12px;animation:tile .35s cubic-bezier(.2,1.4,.4,1)}
@keyframes tile{from{opacity:0;transform:translateY(14px) scale(.92) rotate(-2deg)}}
.btile i{width:38px;height:38px;border-radius:11px;background:var(--sky-soft);display:grid;place-items:center;color:var(--ink)}
.btile i svg{width:20px;height:20px}
.btile b{display:block;font-family:Rubik;font-weight:700;font-size:16px;margin-top:8px}
.btile small{font-size:13px;color:var(--ink-soft)}
.btile .ok{position:absolute;top:12px;left:12px;width:22px;height:22px;border-radius:50%;background:var(--green-soft);color:var(--green);display:grid;place-items:center}
.btile .ok svg{width:13px;height:13px;stroke-width:3}

/* ---- kit ---- */
.kit-head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap;margin-bottom:20px}
.kit-head h3{font-size:clamp(28px,3.8vw,40px);font-weight:900}
.kit-head .q{color:var(--ink-soft);margin-top:6px}
.bento{display:grid;gap:16px;margin-top:16px}
.bento.a{grid-template-columns:2fr 1fr 1fr;align-items:stretch}
.bento.b{grid-template-columns:repeat(4,1fr);align-items:start}
.bento.c{grid-template-columns:1fr 1.3fr}
.stack{display:grid;gap:16px;align-content:stretch}
.bt{position:relative;background:var(--card);border:1.5px solid var(--line);border-radius:18px;padding:12px;text-align:right;color:var(--ink);display:flex;flex-direction:column;gap:10px;min-width:0;animation:tile .45s cubic-bezier(.2,1.2,.4,1) backwards}
.bento.a .bt:nth-child(2),.bento.b .bt:nth-child(2){animation-delay:.07s}
.bento.b .bt:nth-child(3){animation-delay:.14s}.bento.b .bt:nth-child(4){animation-delay:.21s}
.bt[role=button]{cursor:pointer;transition:transform .16s,box-shadow .16s,border-color .16s}
.bt[role=button]:hover{transform:translateY(-4px);border-color:var(--flag);box-shadow:5px 5px 0 var(--sky)}
.bt[role=button] .bt-in{pointer-events:none}
.bl{font-family:Rubik;font-weight:700;font-size:14px;color:var(--flag);display:flex;gap:6px;align-items:center}
.bt:not([role=button]) .bl{color:var(--ink-soft)}
.bt-in{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:center}
.thumb-lp{position:relative;aspect-ratio:16/11.4;overflow:hidden;border-radius:10px;border:1px solid var(--line);background:#fff}
.lp-scale{position:absolute;top:0;right:0;width:1100px;transform-origin:top right}
.logo-big{display:flex;align-items:center;gap:10px;font-family:Rubik;font-weight:900;font-size:23px;line-height:1.1}
.logo-big .lmk{font-size:27px}
.bt-brand small{color:var(--ink-soft);font-size:14px;margin-top:6px}
.pal{display:flex;gap:6px;margin-top:10px}
.pal i{flex:1;height:26px;border-radius:7px;border:1px solid rgba(0,0,0,.08)}
.offer-mini{display:grid;gap:2px}
.offer-mini b{font-family:Rubik;font-weight:800;font-size:19px;line-height:1.2}
.offer-mini span{font-size:14.5px;color:var(--ink-soft)}
.offer-mini em{font-style:normal;font-family:Rubik;font-weight:900;font-size:30px;color:var(--p);margin-top:6px}
.offer-mini small{font-size:13px;color:var(--ink-soft)}
.ig-bio{font-size:15.5px;line-height:1.5}
.ig-bio p{margin:0}
.ig-top{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.ig-av{width:46px;height:46px;border-radius:50%;padding:3px;background:conic-gradient(#f9ce34,#ee2a7b,#6228d7,#f9ce34);display:grid;place-items:center;flex:none}
.ig-av .lmk{width:100%;height:100%;border-radius:50%;border:2px solid #fff;font-size:20px}
.ig-top b{font-family:Rubik;display:block;font-size:15px;text-align:right}
.ig-top small{color:var(--ink-soft);font-size:13px}
.lead-mini{list-style:none;margin:0;padding:0}
.lead-mini li{display:flex;align-items:center;gap:8px;padding:8px 2px;border-bottom:1px dashed var(--line);font-size:15.5px}
.lead-mini b{font-family:Rubik;font-weight:600;flex:1}
.src{background:var(--sky-pale);border-radius:999px;padding:2px 10px;font-size:13px;font-weight:700;white-space:nowrap}
.stc{font-size:13px;color:var(--ink-soft);white-space:nowrap}
.fore{margin-top:10px;font-size:15px;color:var(--ink-soft)}
.fore b{font-family:Rubik;color:var(--ink);font-size:18px}
.newtag{background:var(--flag);color:#fff;border-radius:999px;font-size:11.5px;padding:1px 8px;margin-inline-start:8px;font-weight:700}

/* ---- toolbars ---- */
.tools{display:flex;flex-wrap:wrap;gap:12px 22px;align-items:center;background:var(--card);border:1.5px solid var(--line);border-radius:16px;padding:10px 14px;margin-bottom:14px}
.tg{display:flex;align-items:center;gap:8px}
.tg>span{font-size:13.5px;font-weight:700;color:var(--ink-soft)}
.tg.end{margin-inline-start:auto;flex-wrap:wrap}
.seg{display:inline-flex;background:#EFECE4;border-radius:11px;padding:3px;gap:2px}
.seg button{border:0;background:none;border-radius:9px;padding:6px 13px;font-family:Rubik;font-weight:600;font-size:14.5px;cursor:pointer;color:var(--flag);display:grid;place-items:center}
.seg button svg{width:18px;height:18px}
.seg button.on{background:var(--flag);color:#fff;box-shadow:2px 2px 0 var(--sky)}
.tools .sw{width:26px;height:26px}
.live{display:inline-flex;align-items:center;gap:6px;background:var(--green-soft);color:var(--green);font-weight:700;border-radius:999px;padding:7px 14px;font-size:15px}
.live svg{width:16px;height:16px;stroke-width:3}
.live-bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;background:var(--green-soft);border-radius:12px;padding:9px 14px;margin-bottom:14px;font-size:15.5px}
.live-bar svg{width:18px;height:18px;color:var(--green)}
.live-bar .sp{margin-inline-start:auto;color:var(--ink-soft);font-size:14px}
.view-h .seg{flex-wrap:wrap}

/* ---- device frame ---- */
.dev{background:#fff;border:1.5px solid #CFC8B8;border-radius:16px;overflow:hidden;box-shadow:var(--shadow)}
.dev-bar{display:flex;align-items:center;gap:6px;background:#EFECE4;padding:8px 12px;direction:ltr}
.dev-bar i{width:10px;height:10px;border-radius:50%;background:#D9D3C4}
.dev-bar span{flex:1;background:#fff;border-radius:999px;font-size:13px;padding:3px 14px;margin-inline-start:8px;color:var(--ink-soft);text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lp-scroll{max-height:640px;overflow:auto;overscroll-behavior:contain}
.dev.phone{width:min(390px,100%);margin-inline:auto;border:10px solid #2D3E66;border-radius:38px}
.dev.phone .dev-bar i{display:none}

/* ---- the generated landing page ---- */
.lp{--r:18px;--bg:#fff;--ink:#16211f;--mut:#5b6763;--card:#fff;--edge:rgba(0,0,0,.09);--hf:Rubik;container-type:inline-size;background:var(--bg);color:var(--ink);font-family:Assistant,sans-serif;font-size:16px;line-height:1.55;text-align:right}
.lp h1,.lp h2{font-family:var(--hf),sans-serif;color:inherit;margin:0;line-height:1.12}
.lp p{margin:0}
.lp-nav{display:flex;align-items:center;gap:14px;padding:16px 5%}
.lp-logo{display:inline-flex;align-items:center;gap:9px;font-family:Rubik;font-weight:800;font-size:18px}
.lp .ph{font-size:14.5px;color:var(--mut);display:inline-flex;align-items:center;gap:6px;direction:ltr}
.lp .ph svg{width:15px;height:15px}
.lp-nav .ph{margin-inline-start:auto}
.lp-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--p);color:#fff;border:0;border-radius:calc(var(--r)*.7);padding:13px 24px;font-family:Rubik;font-weight:700;font-size:16.5px;cursor:pointer;box-shadow:0 6px 16px color-mix(in srgb,var(--p) 30%,transparent)}
.lp-btn svg{width:18px;height:18px}
.lp-btn.ghost{background:none;color:var(--ink);border:1.5px solid var(--edge);padding:8px 16px;font-size:14px;box-shadow:none}
.lp-btn.acc{background:var(--a);color:var(--d);box-shadow:none}
.lp-hero{display:grid;grid-template-columns:1.15fr .85fr;gap:6%;align-items:center;padding:3% 5% 7%}
.lp .eb{font-weight:700;color:var(--p);font-size:14.5px}
.lp-hero h1{font-size:clamp(30px,5.300cqw,58px);font-weight:900;margin:12px 0 16px}
.lp-hero p{font-size:clamp(15.5px,1.900cqw,20px);color:var(--mut);max-width:540px}
.lp-hero .cta{display:flex;align-items:center;gap:16px;margin-top:24px;flex-wrap:wrap}
.lp .creds{display:flex;gap:6px 18px;flex-wrap:wrap;margin-top:20px;font-size:14px;color:var(--mut)}
.lp .creds span{display:inline-flex;align-items:center;gap:5px}
.lp .creds svg{width:15px;height:15px;color:var(--p);stroke-width:3}
.lp-photo{position:relative;aspect-ratio:4/4.5;border-radius:var(--r);overflow:hidden;background:linear-gradient(155deg,color-mix(in srgb,var(--p) 78%,#fff),var(--d));box-shadow:16px 16px 0 color-mix(in srgb,var(--a) 38%,#fff)}
.lp-photo img,.fl-ph img{width:100%;height:100%;object-fit:cover;display:block}
.ph0{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;color:#fff;background:radial-gradient(circle at 70% 25%,rgba(255,255,255,.22),transparent 45%)}
.ph0 span{font-family:Rubik;font-weight:900;font-size:clamp(46px,9cqw,104px);line-height:1;letter-spacing:2px}
.ph0 small{font-size:13px;opacity:.85;border:1px dashed rgba(255,255,255,.6);border-radius:999px;padding:2px 12px}
.lp-sec{padding:6.500% 5%}
.lp-sec.tint{background:var(--l)}
.lp-sec>h2{font-size:clamp(23px,3.300cqw,36px);font-weight:900;text-align:center;margin-bottom:26px}
.lp-g3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.lp-card{background:var(--card);border:1px solid var(--edge);border-radius:var(--r);padding:20px}
.lp-card.pain{font-size:17.5px;font-weight:600;line-height:1.4;border-inline-start:4px solid var(--a)}
.lp-card.svc{display:flex;flex-direction:column;gap:6px}
.lp-card.svc b{font-family:Rubik;font-weight:800;font-size:18.5px}
.lp-card.svc span{color:var(--mut);font-size:15.5px;flex:1}
.lp-card.svc em{font-style:normal;font-family:Rubik;font-weight:800;color:var(--p);font-size:17px;margin-top:6px}
.lp-band{background:linear-gradient(120deg,var(--d),color-mix(in srgb,var(--p) 80%,#000));color:#fff;padding:8% 5%}
.lp-band .k{color:var(--a);font-weight:700;font-size:clamp(15px,1.800cqw,19px)}
.lp-band .t{font-family:var(--hf),sans-serif;font-weight:900;font-size:clamp(26px,4.400cqw,48px);line-height:1.15;margin:8px 0 22px;max-width:780px}
.lp-step{text-align:center;display:grid;gap:6px;justify-items:center}
.lp-step i{font-style:normal;width:52px;height:52px;border-radius:50%;background:var(--p);color:#fff;display:grid;place-items:center;font-family:Rubik;font-weight:900;font-size:22px;box-shadow:0 0 0 6px color-mix(in srgb,var(--p) 16%,transparent)}
.lp-step b{font-family:Rubik;font-weight:800;font-size:19px;margin-top:8px}
.lp-step span{color:var(--mut);font-size:15.5px;max-width:260px}
.lp-offer{display:grid;grid-template-columns:1.4fr 1fr;gap:28px;align-items:center;border:2px solid var(--p);border-radius:calc(var(--r) + 4px);padding:5%;background:var(--card)}
.lp-offer h2{font-size:clamp(24px,3.400cqw,36px);font-weight:900;margin:6px 0}
.lp-offer p{color:var(--mut)}
.lp-offer ul{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:8px}
.lp-offer li{display:flex;gap:8px;align-items:flex-start}
.lp-offer li svg{width:18px;height:18px;color:var(--p);stroke-width:3;margin-top:4px;flex:none}
.lp-offer .pr{text-align:center;display:grid;gap:6px;justify-items:center;background:var(--l);border-radius:var(--r);padding:22px}
.lp-offer .pr b{font-family:Rubik;font-weight:900;font-size:clamp(34px,4.600cqw,48px);line-height:1}
.lp-offer .pr small{color:var(--mut);margin-bottom:8px}
.lp-about{display:grid;grid-template-columns:.6fr 1.4fr;gap:6%;align-items:center}
.lp-about h2{font-size:clamp(23px,3.300cqw,34px);font-weight:900;margin-bottom:10px}
.lp-about p{font-size:17.5px;color:var(--mut)}
.lp-photo.sm{box-shadow:none;aspect-ratio:1}
.lp-faq{max-width:720px;margin-inline:auto;display:grid;gap:10px}
.lp-faq details{background:var(--card);border:1px solid var(--edge);border-radius:calc(var(--r)*.7)}
.lp-faq summary{cursor:pointer;list-style:none;padding:14px 18px;font-family:Rubik;font-weight:700;font-size:17px}
.lp-faq summary::-webkit-details-marker{display:none}
.lp-faq p{padding:0 18px 16px;color:var(--mut)}
.lp-contact{display:grid;grid-template-columns:1fr 1fr;gap:6%;align-items:center}
.lp-contact h2{font-size:clamp(26px,4cqw,42px);font-weight:900}
.lp-contact p{color:var(--mut);font-size:17.5px;margin:8px 0 14px}
.lp-wa{display:inline-flex;align-items:center;gap:8px;background:#25a366;color:#fff;border-radius:999px;padding:9px 18px;font-weight:700}
.lp-wa svg{width:18px;height:18px}
.lp-form{background:var(--card);border-radius:var(--r);padding:20px;display:grid;gap:10px;box-shadow:0 14px 34px rgba(0,0,0,.10)}
.lp-form input{font:inherit;border:1.5px solid var(--edge);border-radius:calc(var(--r)*.55);padding:12px 14px;background:var(--bg);color:var(--ink);width:100%}
.lp-form input:focus{outline:2px solid var(--p);outline-offset:1px}
.lp-form small{color:var(--mut);font-size:12.5px;text-align:center}
.lp-foot{background:var(--d);color:#fff;display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:18px 5%;font-size:14px}
.lp-foot .by{margin-inline-start:auto;opacity:.6;font-size:12.5px}
/* templates */
.lp.t-personal{--bg:#fbf6ee;--r:28px}
.lp.t-personal .lp-btn{border-radius:999px}
.lp.t-personal .lp-hero{grid-template-columns:1fr;text-align:center;justify-items:center;padding-top:1%}
.lp.t-personal .lp-hero .tx{order:2;display:grid;justify-items:center}
.lp.t-personal .lp-hero .cta,.lp.t-personal .lp-hero .creds{justify-content:center}
.lp.t-personal .lp-hero .lp-photo{width:clamp(150px,24cqw,230px);aspect-ratio:1;border-radius:50%;box-shadow:0 0 0 8px #fff,0 0 0 11px var(--a);margin-bottom:22px}
.lp.t-personal .lp-hero .ph0 small{display:none}
.lp.t-luxe{--bg:#111315;--ink:#f3eee5;--mut:#b4ada1;--card:#1a1d20;--edge:rgba(255,255,255,.13);--r:4px;--hf:Heebo;--l:#181b1e}
.lp.t-luxe h1,.lp.t-luxe h2,.lp.t-luxe .lp-band .t{font-weight:500;letter-spacing:-.5px}
.lp.t-luxe .lp-btn{background:var(--a);color:#111315;box-shadow:none}
.lp.t-luxe .lp-btn.ghost{background:none;color:var(--ink)}
.lp.t-luxe .eb,.lp.t-luxe .lp-card.svc em,.lp.t-luxe .creds svg,.lp.t-luxe .lp-offer li svg{color:var(--a)}
.lp.t-luxe .lp-offer{border-color:var(--a)}
.lp.t-luxe .lp-step i{background:none;border:1px solid var(--a);color:var(--a);box-shadow:none}
.lp.t-luxe .lp-photo{box-shadow:none;border:1px solid var(--a)}
.lp.t-luxe .lp-band{background:#0b0c0d;border-block:1px solid var(--edge)}
.lp.t-luxe .lp-foot{background:#0b0c0d}
.lp.t-bold{--r:0px;--hf:Heebo}
.lp.t-bold .lp-nav{background:var(--p);color:#fff}
.lp.t-bold .lp-nav .ph{color:rgba(255,255,255,.85)}
.lp.t-bold .lp-nav .lp-btn.ghost{color:#fff;border-color:rgba(255,255,255,.5)}
.lp.t-bold .lp-nav .lmk{background:#fff;color:var(--p)}
.lp.t-bold .lp-hero{background:var(--p);color:#fff;padding-top:5%}
.lp.t-bold .lp-hero h1{font-size:clamp(34px,6.400cqw,72px);text-transform:none}
.lp.t-bold .lp-hero p,.lp.t-bold .lp-hero .creds,.lp.t-bold .lp-hero .ph{color:rgba(255,255,255,.88)}
.lp.t-bold .lp-hero .eb{color:var(--a)}
.lp.t-bold .lp-hero .creds svg{color:var(--a)}
.lp.t-bold .lp-hero .lp-btn{background:var(--a);color:var(--d);box-shadow:6px 6px 0 var(--d)}
.lp.t-bold .lp-photo{box-shadow:-14px 14px 0 var(--a);background:var(--d)}
.lp.t-bold .lp-card.pain{border-inline-start-width:8px}
@container (max-width:640px){
  .lp-hero,.lp-about,.lp-contact,.lp-offer{grid-template-columns:1fr}
  .lp-g3{grid-template-columns:1fr}
  .lp-nav .ph{display:none}
  .lp-nav .lp-btn{margin-inline-start:auto}
  .lp-hero .lp-photo{max-width:280px;justify-self:center;width:100%}
  .lp-about .lp-photo{max-width:160px}
  .lp-sec{padding:11% 6%}
  .lp-hero{padding:6% 6% 12%;gap:26px}
  .lp-band{padding:14% 6%}
  .lp-foot .by{margin-inline-start:0}
}

/* ---- content pieces (sized in container units, so they scale anywhere) ---- */
.cc{container-type:inline-size;position:relative;overflow:hidden;border-radius:12px;background:var(--cbg);color:var(--cink);font-family:var(--cf),Rubik,sans-serif;--cbg:var(--l);--cink:var(--d);--cf:"Varela Round";box-shadow:0 8px 20px rgba(45,62,102,.14);isolation:isolate}
.cc.post{aspect-ratio:4/5}.cc.reel{aspect-ratio:9/16}.cc.flyer{aspect-ratio:1/1.414}
.cc.st-clean{--cbg:#fff;--cink:#1d2433;--cf:Heebo}
.cc.st-bold{--cbg:var(--d);--cink:#fff;--cf:"Secular One"}
.cc::before,.cc::after{content:"";position:absolute;z-index:-1;pointer-events:none}
.cc.st-soft::before{width:62cqw;height:62cqw;border-radius:46% 54% 60% 40%/50% 45% 55% 50%;background:color-mix(in srgb,var(--p) 22%,transparent);top:-18cqw;left:-16cqw}
.cc.st-soft::after{width:46cqw;height:46cqw;border-radius:55% 45% 40% 60%/45% 55% 45% 55%;background:color-mix(in srgb,var(--a) 42%,transparent);bottom:-14cqw;right:-12cqw}
.cc.st-clean::before{inset:0;background:linear-gradient(var(--a),var(--a)) top/100% 2.400cqw no-repeat,repeating-linear-gradient(0deg,transparent 0 7.800cqw,rgba(29,36,51,.06) 7.800cqw 8cqw),repeating-linear-gradient(90deg,transparent 0 7.800cqw,rgba(29,36,51,.06) 7.800cqw 8cqw)}
.cc.st-bold::before{width:150%;height:34cqw;background:var(--a);top:-12cqw;left:-40%;transform:rotate(-14deg)}
.cc.st-bold::after{width:26cqw;height:26cqw;border-radius:50%;border:3cqw solid color-mix(in srgb,var(--p) 85%,#fff);bottom:-9cqw;left:-7cqw}
.cc-in{position:absolute;inset:0;padding:8cqw;display:flex;flex-direction:column}
.cc .tag{align-self:flex-start;background:var(--p);color:#fff;border-radius:99px;padding:1.200cqw 3.600cqw;font-size:3.600cqw;font-weight:700}
.cc.st-bold .tag{background:var(--d);color:var(--a)}
.cc .big{font-size:9.200cqw;line-height:1.16;font-weight:800;margin-block:auto}
.cc .big.sm{font-size:7.600cqw}
.cc .foot{display:flex;align-items:center;gap:2.400cqw;font-size:3.800cqw;font-weight:700}
.cc .foot .lmk{font-size:5.200cqw}
.cc.st-bold .foot .lmk{background:var(--a);color:var(--d)}
.cc .pill{align-self:flex-start;background:var(--p);color:#fff;border-radius:99px;padding:2cqw 5cqw;font-size:4.200cqw;font-weight:700;margin-bottom:6cqw}
.cc.st-bold .pill{background:var(--a);color:var(--d)}
.cc .num{font-size:22cqw;line-height:.9;font-weight:900;color:var(--p);font-family:Rubik}
.cc.st-bold .num{color:var(--a);margin-top:16cqw}
.cc .swipe{display:flex;align-items:center;gap:1.500cqw;font-size:3.600cqw;margin-bottom:5cqw;opacity:.75}
.cc .swipe svg{width:4cqw;height:4cqw}
.car .dots{position:absolute;bottom:2.600cqw;inset-inline:0;display:flex;justify-content:center;gap:1.600cqw}
.car .dots i{width:1.800cqw;height:1.800cqw;border-radius:50%;background:currentColor;opacity:.25}
.car .dots i.on{opacity:.9}
.car-b{position:absolute;bottom:8px;width:32px;height:32px;border-radius:50%;border:0;background:rgba(255,255,255,.92);color:var(--flag);display:grid;place-items:center;cursor:pointer;box-shadow:0 2px 8px rgba(0,0,0,.2);z-index:2}
.car-b svg{width:17px;height:17px}
.car-b.prev{right:8px}.car-b.next{left:8px}
.cc.reel{--cbg:var(--d);--cink:#fff;background:linear-gradient(165deg,color-mix(in srgb,var(--p) 88%,#fff),var(--d) 78%)}
.cc.reel::before,.cc.reel::after{display:none}
.reel .bars{position:absolute;top:3cqw;inset-inline:4cqw;display:flex;gap:1.500cqw;z-index:2;direction:ltr}
.reel .bars i{flex:1;height:1cqw;border-radius:9px;background:rgba(255,255,255,.3);transition:background .3s}
.reel .bars i.on{background:#fff}
.reel .cc-in{padding:12cqw 8cqw 8cqw}
.reel .fr{position:absolute;inset:26cqw 8cqw 24cqw;display:flex;align-items:center;font-size:10.500cqw;line-height:1.18;font-weight:800;opacity:0;transform:translateY(4cqw);transition:opacity .35s,transform .35s}
.reel .fr.hook{font-size:11.500cqw}
.reel .fr.on{opacity:1;transform:none}
.reel .fr .pill{background:var(--a);color:var(--d);font-size:7cqw;padding:3cqw 7cqw;margin:0}
.reel .foot{margin-top:auto}
.reel .foot .lmk{background:#fff;color:var(--p)}
.reel-t{position:absolute;bottom:10px;left:10px;width:38px;height:38px;border-radius:50%;border:0;background:rgba(255,255,255,.92);color:var(--flag);display:grid;place-items:center;cursor:pointer;z-index:3}
.reel-t svg{width:18px;height:18px}
.fl-in{position:absolute;inset:0;padding:8cqw 7.500cqw 6cqw;display:flex;flex-direction:column}
.fl-top{display:flex;align-items:center;gap:4.500cqw}
.fl-ph{position:relative;width:31cqw;height:31cqw;border-radius:50%;overflow:hidden;flex:none;background:linear-gradient(155deg,color-mix(in srgb,var(--p) 78%,#fff),var(--d));box-shadow:0 0 0 1.200cqw #fff,0 0 0 2.200cqw var(--a)}
.fl-ph .ph0 span{font-size:12cqw}
.flyer .big{font-size:8.400cqw;margin:0;line-height:1.12}
.flyer .sub{font-size:4.200cqw;opacity:.8;margin-top:1.500cqw;line-height:1.3}
.flyer ul{list-style:none;margin:6cqw 0 0;padding:0;display:grid;gap:2.400cqw;font-size:4.500cqw;line-height:1.3}
.flyer li{display:flex;gap:2cqw;align-items:flex-start}
.flyer li svg{width:4.500cqw;height:4.500cqw;flex:none;margin-top:.800cqw;color:var(--p);stroke-width:3}
.flyer.st-bold li svg{color:var(--a)}
.flyer .price{font-family:Rubik;font-weight:900;font-size:11cqw;margin-top:5cqw;line-height:1.1}
.flyer .price small{font-family:Assistant;font-weight:400;font-size:3.600cqw;opacity:.8;display:block;margin-top:.500cqw}
.flyer .pill{margin:4cqw 0 0;font-size:4.400cqw;padding:2cqw 5.500cqw}
.fl-foot{margin-top:auto;display:flex;align-items:center;gap:3.500cqw;font-size:3.500cqw}
.fl-foot .qr{width:19cqw;height:19cqw;border-radius:1.500cqw;flex:none}
.fl-foot>div{display:grid;gap:.500cqw}
.fl-foot .foot{font-size:4.200cqw}

/* ---- content view ---- */
.pieces{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;align-items:start}
.pieces figure{margin:0}
.pieces figcaption{display:flex;justify-content:space-between;gap:8px;margin-top:10px;font-size:14.5px;color:var(--ink-soft)}
.pieces figcaption b{font-family:Rubik;color:var(--ink)}
.cm-grid{display:grid;grid-template-columns:1.1fr 1.2fr .9fr;gap:14px;margin-top:8px;align-items:start}
.panel h4{display:flex;justify-content:space-between;align-items:center;gap:10px}
.panel h4 small{font-family:Assistant;font-weight:600;font-size:13.5px;color:var(--ink-soft)}
.panel h4 .link,.panel>.link{display:inline-flex;align-items:center;gap:5px;font-size:14.5px;font-family:Assistant}
.panel .link svg{width:15px;height:15px}
.week{display:grid;grid-template-columns:repeat(7,1fr);gap:5px;margin:10px 0 12px}
.week div{background:#F3F0E8;border-radius:10px;min-height:58px;padding:6px 0;display:grid;justify-items:center;align-content:start;gap:5px;font-size:13.5px;font-weight:700;color:var(--ink-soft)}
.week div.has{background:var(--sky-soft);color:var(--ink)}
.week i{width:26px;height:26px;border-radius:8px;background:var(--flag);color:#fff;display:grid;place-items:center}
.week i svg{width:15px;height:15px}
.plan{list-style:none;margin:0 0 12px;padding:0}
.plan li{display:flex;align-items:center;gap:8px;padding:8px 0;border-bottom:1px dashed var(--line);font-size:15px}
.plan li>svg{width:18px;height:18px;color:var(--sky-text);flex:none}
.plan b{font-family:Rubik;font-weight:600}
.plan span{color:var(--ink-soft)}
.plan em{margin-inline-start:auto;font-style:normal;color:var(--green);font-weight:700;font-size:13.5px;display:inline-flex;align-items:center;gap:4px}
.plan em svg{width:13px;height:13px;stroke-width:3}
.okline{display:flex;gap:8px;align-items:center;color:var(--green);font-weight:700;font-size:15.5px}
.okline svg{width:18px;height:18px;stroke-width:3;flex:none}
.cap{white-space:pre-line;font-size:15.5px;line-height:1.55;max-height:250px;overflow:auto;background:#F7F5EF;border-radius:12px;padding:12px 14px}

/* ---- WhatsApp ---- */
.wa-grid{display:grid;grid-template-columns:340px 1fr;gap:26px;align-items:start}
.wa-side{display:grid;gap:14px}
.wa-side .panel{margin-top:0}
.phone{border:9px solid #2D3E66;border-radius:36px;overflow:hidden;background:#ECE5DD;display:flex;flex-direction:column;height:560px;box-shadow:var(--shadow)}
.ph-head{background:#075E54;color:#fff;display:flex;align-items:center;gap:10px;padding:12px 14px;flex:none}
.ph-head .lmk{font-size:24px;border-radius:50%;background:#fff;color:var(--p)}
.ph-head b{font-family:Rubik;font-size:16px;display:block;line-height:1.2}
.ph-head small{font-size:12.5px;opacity:.85}
.ph-chat{flex:1;overflow:auto;padding:12px;display:flex;flex-direction:column;gap:7px;background-image:radial-gradient(rgba(0,0,0,.035) 1px,transparent 1px);background-size:14px 14px}
.ph-empty{margin:auto;background:rgba(255,255,255,.75);border-radius:10px;padding:8px 14px;font-size:14px;color:#54656f;text-align:center}
.wm{max-width:84%;padding:7px 10px 6px;border-radius:10px;font-size:15px;line-height:1.4;white-space:pre-line;box-shadow:0 1px 1px rgba(0,0,0,.12);color:#111b21;animation:pop .22s}
.wm.me{background:#D9FDD3;align-self:flex-end;border-end-end-radius:2px}
.wm.biz{background:#fff;align-self:flex-start;border-start-start-radius:2px}
.wm em{display:block;font-style:normal;font-size:11.5px;color:#128C7E;font-weight:700;margin-top:3px}
.wm.typing{display:flex;gap:4px;padding:12px 14px}
.wm.typing i{width:7px;height:7px;border-radius:50%;background:#9aa7ad;animation:blink 1s infinite}
.wm.typing i:nth-child(2){animation-delay:.15s}.wm.typing i:nth-child(3){animation-delay:.3s}
@keyframes blink{50%{opacity:.25;transform:translateY(-2px)}}
.ph-in{display:flex;gap:8px;padding:8px;background:#F0F2F5;flex:none}
.ph-in input{flex:1;min-width:0;border:0;border-radius:999px;padding:10px 16px;font:inherit;font-size:15px;background:#fff;color:#111b21}
.ph-in input:focus{outline:2px solid #128C7E}
.ph-in button{width:42px;height:42px;border-radius:50%;border:0;background:#00A884;color:#fff;display:grid;place-items:center;cursor:pointer;flex:none}
.ph-in button svg{width:18px;height:18px;transform:scaleX(-1)}
.phone.mini{height:auto;border-width:7px;border-radius:28px;flex:1}
.phone.mini .ph-chat{overflow:hidden}
.phone.mini .wm{font-size:13.5px;animation:none}
.draft{display:flex;gap:12px;align-items:flex-start;background:var(--sky-soft);border:1.5px solid var(--sky);border-radius:16px;padding:14px;animation:pop .3s}
.draft img{width:46px;height:46px;flex:none}
.draft b{font-family:Rubik;font-size:16px}
.draft p{background:var(--card);border-radius:12px;padding:10px 12px;margin:8px 0 6px;font-size:15.5px}
.draft small{color:var(--ink-soft);font-size:13.5px;display:block}
.draft .acts{margin-top:10px}
.log{list-style:none;margin:6px 0 0;padding:0;display:grid;gap:9px}
.log li{display:flex;gap:9px;align-items:flex-start;font-size:15.5px;animation:pop .25s}
.log svg{width:18px;height:18px;color:var(--flag);flex:none;margin-top:4px}

.finish{margin-top:30px}
.app-body.v-kit .finish{margin-top:24px}

/* ---- responsive ---- */
@media (max-width:1000px){
  .bento.a{grid-template-columns:1fr 1fr}
  .bento.a .bt-lp{grid-column:1/-1}
  .bento.b,.pieces{grid-template-columns:1fr 1fr}
  .cm-grid{grid-template-columns:1fr 1fr}
  .cm-grid .panel:first-child{grid-column:1/-1}
}
@media (max-width:900px){
  .brief{grid-template-columns:1fr;padding-top:28px;gap:26px}
  .brief-side .note{transform:none}
  .wa-grid{grid-template-columns:1fr}
  .phone{height:500px;max-width:380px;width:100%;margin-inline:auto}
  .bizchip span:not(.lmk){display:none}
  .dev-t{display:none}
  .tg.end{margin-inline-start:0}
  .dev.phone{border-width:6px;border-radius:26px}
}
@media (max-width:620px){
  .bento.a,.bento.c,.cm-grid{grid-template-columns:1fr}
  .bento.a .stack{grid-template-columns:1fr}
  .brief .go{width:100%;padding:18px 20px;font-size:21px}
  .build-count b{font-size:36px}
  .build-wall{grid-template-columns:1fr 1fr}
  .btile small{display:none}
  .tools{gap:10px 14px}
  .lp-scroll{max-height:560px}
  .kit-head .btn{width:100%}
}
@media (max-width:620px){
  .is-built .tab{font-size:0;gap:0;padding:9px 10px}
  .is-built .tab.on{font-size:14.5px;gap:6px}
  .is-built .tab svg{width:21px;height:21px}
  .is-built .tab .cnt{font-size:11px;margin-inline-start:4px}
}
.cc.flyer.st-bold::before{display:none}
.cc.flyer.st-bold{border-top:3cqw solid var(--a)}