/* Outworkly — visual layer: hero stack, integrations strip, positioning map, flywheel ring */
.hero.dark{background:var(--ink)}
.hero-split{display:grid;gap:48px;align-items:center}
@media(min-width:1040px){.hero-split{grid-template-columns:1.1fr .9fr}}
.gt{color:var(--accent-2)}
.stack{display:grid;gap:14px;width:100%;max-width:460px;margin-inline:auto}
.oc{display:flex;align-items:center;gap:14px;padding:16px 18px;border-radius:16px;background:rgba(255,255,255,.06);border:1px solid var(--line-dark);color:#fff;box-shadow:0 18px 40px -20px rgba(0,0,0,.6);animation:float 7s ease-in-out infinite}
.oc:nth-child(2){margin-left:28px;animation-delay:-2s}.oc:nth-child(3){margin-left:8px;animation-delay:-4s}.oc:nth-child(4){margin-left:36px;animation-delay:-1s}
.oc .ic{flex:none;width:42px;height:42px;border-radius:12px;background:var(--accent-deep);display:flex;align-items:center;justify-content:center}
.oc .ic svg{width:22px;height:22px;fill:none;stroke:#fff;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.oc b{display:block;font:600 16px/1.3 var(--font-d)}.oc small{display:block;font-size:14px;color:var(--text-dark-2)}
.oc em{margin-left:auto;font:600 13px var(--font-b);font-style:normal;color:var(--accent-2);background:rgba(167,139,250,.14);padding:4px 10px;border-radius:999px;white-space:nowrap}
.oc.spark{display:block}.oc.spark .row{display:flex;justify-content:space-between;font-size:14px;color:var(--text-dark-2);margin-bottom:8px}
.oc.spark strong{color:#fff;font:700 22px var(--font-d)}.oc.spark svg{width:100%;height:56px}
@keyframes float{50%{transform:translateY(-6px)}}
.strip{border-block:1px solid var(--line);background:var(--paper-2);padding:22px 0}
.strip .wrap{display:flex;flex-wrap:wrap;align-items:center;gap:12px 32px}
.strip p{margin:0;font:600 13px var(--font-b);text-transform:uppercase;letter-spacing:.14em;color:var(--muted)}
.strip ul{display:flex;flex-wrap:wrap;gap:8px 28px;list-style:none;margin:0;padding:0}
.strip li{font:600 18px var(--font-d);color:var(--text-2);letter-spacing:-.01em}
.pm{width:100%;height:auto;background:var(--paper-2);border:1px solid var(--line);border-radius:20px}
.pm text{fill:var(--text-2);font:500 14px var(--font-b)}.pm .ax{fill:var(--muted);font-size:12px;letter-spacing:.08em;text-transform:uppercase}
.pm .us{fill:var(--accent-deep);font:700 17px var(--font-d)}
.ring{background:var(--ink-2);border:1px solid var(--line-dark);border-radius:20px;padding:16px;max-width:460px;width:100%}
.ring svg{width:100%;height:auto}.ring .n{fill:var(--ink-3);stroke:var(--line-dark)}
.ring text{fill:#fff;font:600 14px var(--font-d);text-anchor:middle}.ring .s{fill:var(--text-dark-2);font:400 12px var(--font-b)}
.hero-card{padding:24px;border-radius:20px;background:rgba(255,255,255,.06);border:1px solid var(--line-dark);color:var(--text-dark-2)}
.hero-card h3{color:#fff;font-size:22px;margin:12px 0 8px}.hero-card p{font-size:16px;margin:0 0 16px}
.hero-card .unit{font:600 13px var(--font-b);text-transform:uppercase;letter-spacing:.12em;color:var(--accent-2);margin:0 0 4px}
.sec.dark{background:var(--ink)}
.band.dark{background:var(--violet-dark)}
@media(prefers-reduced-motion:reduce){.oc{animation:none}}
.hdr .btn-primary{background:var(--accent);color:var(--ink)!important}
.hdr .btn-primary:hover{background:var(--accent-2)}

/* Polish: responsive, flow, small screens */
.ftr .cols{grid-template-columns:1fr 1fr}.ftr .cols>div:first-child{grid-column:1/-1}
@media(min-width:960px){.ftr .cols{grid-template-columns:2fr 1fr 1fr 1fr}.ftr .cols>div:first-child{grid-column:auto}}
.ftr a{display:inline-block;padding:3px 0}
.nav a{min-height:44px;display:inline-flex;align-items:center}
.hdr{transition:box-shadow .2s}.hdr.scrolled{box-shadow:0 6px 24px -12px rgba(0,0,0,.6)}
.card .price{font-size:clamp(1.25rem,1.1rem + .6vw,1.5rem);overflow-wrap:anywhere}
.tw{-webkit-overflow-scrolling:touch}
.tw::after{content:"";}
/* Mobile sticky action bar replaces floating WhatsApp bubble */
.mbar{display:none}
@media(max-width:759px){
  .wa{display:none}
  .mbar{display:grid;grid-template-columns:1fr 1fr;gap:10px;position:fixed;left:0;right:0;bottom:0;z-index:60;padding:10px var(--gutter) calc(10px + env(safe-area-inset-bottom));background:rgba(10,10,10,.96);border-top:1px solid var(--line-dark);backdrop-filter:blur(8px)}
  .mbar .btn{padding:12px 10px;font-size:15px}
  .mbar .btn-wa{background:transparent;border-color:var(--text-dark-2);color:#fff}
  body{padding-bottom:72px}
  body.no-mbar{padding-bottom:0}body.no-mbar .mbar{display:none}
}
/* Scroll reveal (JS adds .rv; content is visible without JS) */
.js .rv{opacity:0;transform:translateY(16px);transition:opacity .5s ease,transform .5s ease}
.js .rv.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.js .rv{opacity:1;transform:none;transition:none}}
/* Small phones */
@media(max-width:480px){
  .btns{flex-direction:column;align-items:stretch}.btns .btn{width:100%}
  .oc:nth-child(n){margin-left:0}.oc em{display:none}
  .trust{gap:20px;margin-top:40px}
  .result{padding:24px}.result .big{font-size:clamp(1.75rem,9vw,2.25rem)}
  .try{flex-direction:column}.try .btn{width:100%}
  .msg{max-width:94%}.chat-b{max-height:60vh;padding:16px}
  .pkg .amt{font-size:2.25rem}
  .flywheel,.ring{max-width:100%}
  .strip ul{gap:6px 18px}.strip li{font-size:1rem}
}
/* Tablet refinements */
@media(min-width:640px) and (max-width:959px){
  .hero-split{gap:40px}.stack{max-width:520px}
  .calc{gap:32px}
  .g3>*:last-child:nth-child(odd){grid-column:1/-1}
}
/* Large screens */
@media(min-width:1600px){:root{--max:1280px}}
/* Landscape phones: avoid oversized heroes */
@media(max-height:500px) and (orientation:landscape){.hero,.page-hero{padding-block:40px}}
.mbar .btn-primary{background:var(--accent);color:var(--ink)}
.pkg .ticks{margin-top:20px}

/* Companion page */
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.demo{display:grid;gap:28px;align-items:start}
@media(min-width:1040px){.demo{grid-template-columns:340px 1fr;gap:36px}}
.demo-side .eyebrow{margin-bottom:12px}
.scn-list{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:6px;margin-inline:calc(-1*var(--gutter));padding-inline:var(--gutter)}
@media(min-width:1040px){.scn-list{display:grid;overflow:visible;margin:0;padding:0}}
.scn-list button{flex:none;scroll-snap-align:start;min-width:230px;display:flex;align-items:center;gap:12px;text-align:left;padding:12px 14px;border-radius:14px;border:1px solid var(--line-dark);background:var(--ink-2);color:var(--text-dark-2);font:400 14px/1.35 var(--font-b);cursor:pointer;transition:border-color .2s,background .2s,transform .2s}
@media(min-width:1040px){.scn-list button{min-width:0}}
.scn-list button:hover{border-color:var(--accent-2);transform:translateY(-1px)}
.scn-list button[aria-pressed=true]{border-color:var(--accent);background:var(--ink-3);box-shadow:0 0 0 1px var(--accent) inset}
.scn-list b{display:block;color:#fff;font:600 16px var(--font-d)}.scn-list small{display:block;color:var(--muted-dark);font-size:13px}
.scn-list .icon{width:38px;height:38px;margin:0;flex:none}.scn-list .icon svg{width:20px;height:20px}
.tracker{list-style:none;margin:0;padding:0;display:grid;gap:0}
.tracker li{position:relative;display:flex;justify-content:space-between;align-items:center;gap:12px;padding:10px 0 10px 34px;color:var(--muted-dark);font-size:15px;min-height:44px}
.tracker li::before{content:"";position:absolute;left:6px;top:50%;width:14px;height:14px;margin-top:-7px;border-radius:50%;border:2px solid var(--line-dark);background:var(--ink);z-index:1}
.tracker li::after{content:"";position:absolute;left:12px;top:calc(50% + 7px);width:2px;height:100%;background:var(--line-dark)}
.tracker li:last-child::after{display:none}
.tracker b{font-weight:600}.tracker .tm{font-size:13px}
.tracker li.on{color:#fff}.tracker li.on::before{border-color:var(--accent);background:var(--accent);box-shadow:0 0 0 4px rgba(167,139,250,.25)}
.tracker li.on .tm{color:var(--accent-2)}
.tracker li.done{color:var(--text-dark-2)}.tracker li.done::before{border-color:var(--accent);background:var(--accent)}.tracker li.done::after{background:var(--accent)}
.tracker li.done .tm{color:var(--accent-2)}
@media(max-width:1039px){
  .tracker{grid-auto-flow:column;grid-auto-columns:1fr;gap:4px}
  .tracker li{flex-direction:column;align-items:flex-start;justify-content:flex-start;padding:22px 0 0;font-size:12px;min-height:0;gap:2px}
  .tracker li::before{left:0;top:0;margin:0}.tracker li::after{left:16px;top:6px;width:calc(100% - 12px);height:2px}
  .tracker .tm{font-size:11px}
}
.demo .chat{border-radius:20px}
.demo .chat-b{height:clamp(380px,62vh,520px);min-height:0;max-height:none}
.chat-h .av{flex:none;width:38px;height:38px;border-radius:50%;background:var(--accent-deep);display:flex;align-items:center;justify-content:center;font:700 17px var(--font-d);color:#fff}
.chat-h .who{display:block;line-height:1.25}.chat-h .who small{display:flex;align-items:center;gap:6px;font:400 13px var(--font-b);color:var(--text-dark-2);margin-top:2px}
.chat-h .tag{margin-left:auto;font:600 11px var(--font-b);letter-spacing:.12em;text-transform:uppercase;padding:4px 10px;border-radius:999px;border:1px solid var(--line-dark);color:var(--muted-dark)}
.chtabs{display:flex;gap:6px;padding:10px 16px;border-bottom:1px solid var(--line-dark)}
.chtabs button{min-height:36px;padding:6px 14px;border-radius:999px;border:0;background:transparent;color:var(--text-dark-2);font:500 14px var(--font-b);cursor:pointer}
.chtabs button[aria-pressed=true]{background:var(--ink-3);color:#fff;box-shadow:0 0 0 1px var(--line-dark) inset}
.msg .tx{display:block}.msg .ts{display:block;text-align:right;font-size:11px;opacity:.7;margin-top:4px}
.msg.u .ts{color:var(--ink)}
.msg.typing{display:flex;gap:5px;padding:14px 16px}.msg.typing i{width:7px;height:7px;border-radius:50%;background:var(--muted-dark);animation:blink 1.2s infinite}
.msg.typing i:nth-child(2){animation-delay:.2s}.msg.typing i:nth-child(3){animation-delay:.4s}
@keyframes blink{0%,60%,100%{opacity:.3;transform:none}30%{opacity:1;transform:translateY(-3px)}}
.invoice{align-self:flex-start;width:min(92%,380px);background:var(--paper-2);color:var(--text);border-radius:14px;padding:14px 16px;animation:in .25s ease both}
.invoice .ih{display:flex;justify-content:space-between;font-size:13px;color:var(--muted);margin-bottom:8px}.invoice .ih b{color:var(--ink);font:600 15px var(--font-d)}
.invoice .ir{display:flex;justify-content:space-between;gap:12px;padding:10px 0;border-block:1px dashed var(--line);font-size:15px}.invoice .ir b{color:var(--ink);font-family:var(--font-d)}
.invoice .ifoot{margin:10px 0 0;font-size:13px;color:var(--accent-deep)}
.cta-in{align-self:flex-start;margin-top:4px}
.chat-f{display:grid;gap:10px}
.acts{display:flex;justify-content:flex-end;gap:12px;min-height:0}.acts:has(button:not([hidden])){min-height:36px}
.lnk{background:none;border:0;color:var(--accent-2);font:500 14px var(--font-b);cursor:pointer;text-decoration:underline;min-height:36px;padding:0 4px}
.sugg{display:flex;gap:8px;overflow-x:auto;padding-bottom:2px}.sugg .chip-b{flex:none;min-height:36px;padding:6px 14px;font-size:14px}
.chip-b:hover{border-color:var(--accent-2)}
.mem{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.mem li{background:var(--paper-2);border:1px solid var(--line);border-radius:var(--r);padding:16px 20px;display:grid;gap:4px}
.mem b{font:600 14px var(--font-b);text-transform:uppercase;letter-spacing:.12em;color:var(--accent-deep)}.mem span{color:var(--text-2);font-size:.9375rem}
@media(prefers-reduced-motion:reduce){.msg.typing i{animation:none;opacity:.7}}
.demo-sec{padding-top:clamp(16px,3vw,32px)}
.demo>*,.demo-side,.chat,.chat-b,.chat-f{min-width:0}.demo-side{max-width:100%}

/* Palette application: violet primary, green for done/success. Flat colour only. */
.tracker li.on::before{border-color:var(--accent);background:var(--accent);box-shadow:0 0 0 4px rgba(167,139,250,.25)}
.tracker li.on .tm{color:var(--accent-2)}
.stat.on{border-color:var(--accent);color:var(--accent-2)}
.stat.done{border-color:var(--accent);color:var(--accent)}
.msg.u{background:var(--accent);color:var(--ink)}
.chat-h .av,.oc .ic{background:var(--accent-deep);color:#fff}
.hero-card .unit{color:var(--accent-2)}
.ring circle.n{stroke:var(--accent);stroke-width:2}
.mem li{border-left:4px solid var(--accent-deep)}
.pm .us{fill:var(--accent-deep)}

/* Single-colour states: done = lilac, in progress = violet */
.tracker li.done::before{border-color:var(--accent-2);background:var(--accent-2)}
.tracker li.done::after{background:var(--accent-2)}
.tracker li.done .tm{color:var(--accent-2)}
.stat.done{border-color:var(--accent-2);color:var(--accent-2)}
.oc em{color:var(--accent-2);background:rgba(167,139,250,.16)}
.invoice .ifoot{color:var(--accent-deep)}

/* FAQ page */
.faq-wrap{max-width:860px}
.faq-nav{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:40px}
.chip-l{display:inline-flex;align-items:center;min-height:44px;padding:8px 18px;border-radius:999px;border:1px solid var(--line);background:var(--paper-2);color:var(--ink);font:500 15px var(--font-b);text-decoration:none}
.chip-l:hover{border-color:var(--accent-deep);color:var(--accent-deep)}
.faq-g{scroll-margin-top:96px;margin-bottom:clamp(36px,5vw,56px)}
.faq-g h2{font-size:clamp(1.375rem,1.2rem + .8vw,1.75rem);margin-bottom:8px;padding-bottom:12px;border-bottom:2px solid var(--ink)}
details a{font-weight:500}