/* FlowBiz scroll landing: the demo plays itself as the page scrolls (app.js, scroll mode v2). */
#demo{padding-top:26px}
#demo .demo-head{margin-bottom:6px}
#demo .demo-head .hand{margin-top:6px}

/* the tall box the visitor scrolls through (app.js sets its real height), and the stage that stays put inside it */
.sc-host{position:relative;height:1400vh}
.sc-stick{position:sticky;top:0;height:100vh;height:100svh;box-sizing:border-box;width:min(1340px,100% - 32px);margin-inline:auto;padding-block:18px;
  display:grid;grid-template-columns:210px minmax(0,1fr);grid-template-rows:minmax(0,1fr);gap:28px}
.sc-stick .app{height:100%;min-height:0;overflow:hidden;pointer-events:none;scrollbar-width:none}
.sc-stick .app::-webkit-scrollbar{display:none}
/* nothing scrolls on its own inside the stage, so the wheel and the finger always move the page */
.sc-stick .lp-scroll,.sc-stick .ph-chat{overflow:hidden}

/* one scene at a time: first its title, big, then the output; both fade, nothing jumps */
.sc-screen{min-height:100%;box-sizing:border-box;padding:clamp(16px,2.6vw,36px);animation:sc-in .5s ease-out;transition:opacity .45s ease}
@keyframes sc-in{from{opacity:0}}
.sc-title{position:absolute;inset:0;z-index:3;display:grid;place-items:center;padding:24px;text-align:center;opacity:0;transition:opacity .45s ease;pointer-events:none}
.sc-title h3{margin:0;font-family:Rubik,sans-serif;font-weight:900;font-size:clamp(36px,5.4vw,80px);line-height:1.15;color:var(--ink);max-width:14ch;text-wrap:balance;
  transform:translateY(16px);transition:transform .6s cubic-bezier(.2,.8,.3,1)}
#app.t-on .sc-title{opacity:1}
#app.t-on .sc-title h3{transform:none}
#app.t-on .sc-screen{opacity:0}
.sc-screen.sc-brief,.sc-screen.sc-build{padding:0}
.sc-screen.sc-brand,.sc-screen.sc-lp,.sc-screen.sc-cm,.sc-screen.sc-wa,.sc-screen.sc-leads{height:100%;display:grid;place-items:center}

/* the form: only the names, the style and the button */
.sc-stick .brief{grid-template-columns:1fr;padding-bottom:40px}
.sc-stick .brief-side,.sc-stick .ph-pick{display:none}
.sc-stick .brief .form-row{max-width:760px}
.sc-stick .brief input.sc-type{border-color:var(--flag);box-shadow:0 0 0 4px rgba(0,56,184,.12)}
.sc-stick .brief .go{animation:none;transition:transform .2s,box-shadow .2s}
.sc-stick .brief .go.sc-press{transform:scale(.95);box-shadow:0 0 0 7px rgba(0,56,184,.16)}
.sc-stick .sty{transition:transform .3s}
.sc-stick .build{min-height:0;padding-bottom:40px}

/* brand, offer and numbers: three cards that arrive one after the other */
.sc-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;width:min(1120px,100%);align-items:stretch}
.sc-card{background:var(--card);border:1.5px solid var(--line);border-radius:24px;box-shadow:var(--shadow);padding:34px 30px;display:flex;flex-direction:column;gap:16px;min-height:clamp(300px,50vh,440px);box-sizing:border-box;
  opacity:0;transform:translateY(26px);transition:opacity .5s,transform .5s cubic-bezier(.2,.8,.3,1)}
.sc-card.in{opacity:1;transform:none}
.sc-k{font-family:Rubik,sans-serif;font-weight:700;font-size:17px;color:var(--ink-soft)}
.sc-card .logo-big{font-size:clamp(28px,3vw,42px);margin-top:auto}
.sc-card .logo-big .lmk{font-size:clamp(36px,3.6vw,52px)}
.sc-card>small{font-size:17.5px;color:var(--ink-soft)}
.sc-card .pal{margin-top:auto}
.sc-card .pal i{height:48px;border-radius:12px}
.sc-card .offer-mini{gap:6px;margin-block:auto}
.sc-card .offer-mini b{font-size:clamp(23px,2.3vw,30px)}
.sc-card .offer-mini span,.sc-card .offer-mini small{font-size:17px}
.sc-card .offer-mini em{font-size:clamp(38px,4vw,54px)}
.sc-card .num-mini{margin-block:auto}
.sc-card .num-mini small{font-size:16px}
.sc-card .num-mini>b{font-size:clamp(38px,4vw,54px)}
.sc-card .num-mini .eq span{font-size:15px}
.sc-card .num-mini .eq i{font-size:22px}

/* the landing page in a browser window that fills the stage */
.sc-screen.sc-lp{align-items:stretch;justify-items:center}
.sc-lp .dev{width:min(1060px,100%);height:100%;display:flex;flex-direction:column;min-height:0}
.sc-lp .lp-scroll{flex:1;min-height:0;max-height:none}

/* the week of content, large */
.sc-cm .pieces{width:min(1040px,100%);gap:22px}
.sc-cm .pieces figcaption{justify-content:center;font-size:16px}
.sc-cm .car-b{display:none}

/* the WhatsApp chat on a phone */
.sc-wa .phone{width:min(400px,100%);height:min(640px,100%)}
.sc-wa .wm{font-size:16px}
.sc-wa .wm{animation:sc-msg .35s ease-out}
@keyframes sc-msg{from{opacity:0;transform:translateY(8px)}}

/* the leads board */
.sc-screen.sc-leads{align-content:center}
.sc-leads .kpis,.sc-leads .sc-table{width:min(940px,100%);box-sizing:border-box}
.sc-leads .kpi b{font-size:clamp(26px,2.6vw,34px)}
.sc-leads table.leads{font-size:17px}
.sc-leads tr.sc-new{animation:sc-msg .4s ease-out}
.sc-leads tr td{transition:background .4s}
.sc-leads .stc{transition:background .4s,color .4s}
.sc-leads .stc{display:inline-block;background:var(--sky-pale);color:var(--ink);border-radius:999px;padding:3px 12px;font-size:14.5px;font-weight:700}
.sc-leads .stc.st-won{background:#DDF1E7;color:var(--green)}

/* the steps beside the stage */
.sc-side{align-self:center}
.sc-rail{list-style:none;margin:0;padding:0;display:grid;gap:2px;position:relative}
.sc-rail::before{content:"";position:absolute;top:22px;bottom:22px;right:17px;width:2px;background:#DDE6F6;border-radius:2px}
.sc-rail button{position:relative;display:flex;align-items:center;gap:12px;width:100%;border:0;background:none;padding:8px 0;cursor:pointer;text-align:right;font:inherit;color:var(--ink-soft)}
.sc-rail i{flex:none;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;font-style:normal;font-family:Rubik,sans-serif;font-weight:800;font-size:15px;
  background:var(--paper);border:2px solid #C9D6EE;color:var(--ink-soft);transition:background .25s,border-color .25s,color .25s,transform .25s}
.sc-rail span{font-family:Rubik,sans-serif;font-weight:600;font-size:16.5px;line-height:1.25;position:relative;padding-bottom:5px}
.sc-rail span::after{content:"";position:absolute;bottom:0;right:0;height:3px;border-radius:3px;width:calc(var(--q,0) * 100%);background:var(--sky);opacity:0}
.sc-rail button:hover span{color:var(--flag)}
.sc-rail li.done i{background:var(--sky-soft);border-color:var(--sky);color:var(--ink)}
.sc-rail li.on i{background:var(--ink);border-color:var(--ink);color:#fff;transform:scale(1.1)}
.sc-rail li.on span{color:var(--ink);font-weight:800}
.sc-rail li.on span::after{opacity:1}
.sc-now{display:none}

/* the last card: the logo, one button and the slogan */
.final-card .fc-logo{display:block;width:clamp(150px,16vw,210px);height:auto;margin:0 auto 22px}
.final-card .btn{margin-top:0}

@media (max-width:899px){
  .sc-stick{grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);gap:8px;padding-block:10px;width:calc(100% - 20px)}
  .sc-side{align-self:auto;display:grid;gap:4px;justify-items:center}
  .sc-rail{display:flex;gap:6px}
  .sc-rail::before{top:50%;bottom:auto;right:14px;left:14px;width:auto;height:2px}
  .sc-rail button{padding:0}
  .sc-rail span{display:none}
  .sc-rail i{width:30px;height:30px;font-size:13.5px}
  .sc-now{display:block;margin:0;font-family:Rubik,sans-serif;font-weight:700;font-size:16px;color:var(--ink)}
  .sc-screen{padding:12px}
  .sc-cards{grid-template-columns:1fr;gap:12px}
  .sc-card{padding:16px 18px;gap:8px;border-radius:18px;min-height:0}
  .sc-card .logo-big{margin-top:0}
  .sc-card .pal i{height:28px}
  .sc-card .offer-mini em,.sc-card .num-mini>b{font-size:30px}
  .sc-card .num-mini .eq{margin:4px 0 0}
  .sc-cm .pieces{grid-template-columns:1fr 1fr;gap:12px}
  .sc-cm .pieces figcaption{margin-top:5px;font-size:14.5px}
  .sc-lp .dev{border-radius:12px}
  .sc-leads .kpis{grid-template-columns:repeat(3,1fr);gap:8px}
  .sc-leads .kpi{padding:10px}
  .sc-leads .kpi small{font-size:12.5px}
  .sc-leads .kpi b{font-size:19px}
  .sc-leads table.leads{font-size:15px}
}
@media (prefers-reduced-motion:reduce){.sc-rail i,.sc-card,.sc-title,.sc-title h3,.sc-screen{transition:none}.sc-screen,.sc-wa .wm,.sc-leads tr.sc-new{animation:none}}