/* teamwork.css (11/02/2026): the "Hand them the work" section on the home pages (English, Spanish, Portuguese) and the features page. */
.tw-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(24px,4vw,56px);align-items:center}
.tw-demo{background:var(--surface);border:1px solid var(--line);border-radius:22px;padding:18px;box-shadow:0 30px 60px -30px rgba(20,30,60,.35);min-height:300px;position:relative;overflow:hidden}
.tw-bar{display:flex;gap:10px;align-items:center;background:var(--bg,#fff);border:1px solid var(--line);border-radius:14px;padding:12px 14px;font-size:16px}
.tw-bar .tw-caret{display:inline-block;width:2px;height:1.1em;background:var(--accent);margin-left:2px;vertical-align:-3px;animation:twblink 1s steps(1) infinite}
.tw-bar .tw-go{margin-left:auto;background:var(--accent);color:var(--accent-ink,#fff);border-radius:10px;padding:6px 12px;font-weight:700;font-size:14px;white-space:nowrap}
.tw-typed{color:var(--ink);min-height:1.2em}
.tw-out{margin-top:14px;border-left:4px solid var(--c,#0E9AA7);background:var(--bg,#fff);border-radius:14px;padding:14px;opacity:0;transform:translateY(10px);transition:opacity .45s ease,transform .45s ease}
.tw-out.on{opacity:1;transform:none}
.tw-head{display:flex;gap:10px;align-items:center}.tw-av{width:34px;height:34px;border-radius:50%;color:#fff;font-weight:800;display:inline-flex;align-items:center;justify-content:center;flex:none;background:var(--c)}
.tw-head b{display:block}.tw-head small{color:var(--muted);font-size:13px}
.tw-lines{margin:10px 0 0;padding:0;list-style:none}.tw-lines li{background:var(--surface);border-radius:10px;padding:8px 10px;margin-top:6px;font-size:14.5px;opacity:0;transform:translateX(-8px);transition:opacity .35s ease,transform .35s ease}
.tw-out.on .tw-lines li{opacity:1;transform:none}.tw-out.on .tw-lines li:nth-child(2){transition-delay:.15s}.tw-out.on .tw-lines li:nth-child(3){transition-delay:.3s}
.tw-ok{display:inline-block;margin-top:10px;font-size:13px;font-weight:700;color:#10A37F}
.tw-dots{display:flex;gap:6px;justify-content:center;margin-top:14px}.tw-dots i{width:8px;height:8px;border-radius:50%;background:var(--line);transition:background .3s,transform .3s}.tw-dots i.on{background:var(--accent);transform:scale(1.25)}
.tw-pills{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}.tw-pills span{border:1px solid var(--line);border-radius:999px;padding:6px 12px;font-size:13.5px;color:var(--ink);background:var(--surface);opacity:0;transform:translateY(6px);animation:twpill .5s ease forwards}
.tw-pills span b{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:6px;background:var(--c)}
.tw-tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:clamp(32px,5vw,56px)}
.tw-tile{background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:20px;transition:transform .2s,box-shadow .2s}.tw-tile:hover{transform:translateY(-3px);box-shadow:0 18px 40px -24px rgba(20,30,60,.4)}
.tw-tile h3{margin:12px 0 6px;font-size:19px;letter-spacing:-.02em}.tw-tile p{margin:0;color:var(--muted);font-size:15px;line-height:1.5}
.tw-ico{height:64px;display:flex;align-items:center}
.tw-ring{width:64px;height:64px}.tw-ring .arc{stroke-dasharray:176;stroke-dashoffset:176;animation:twring 2.4s ease-in-out infinite alternate}
.tw-chat{display:flex;flex-direction:column;gap:5px}.tw-chat i{display:block;height:12px;border-radius:8px;background:var(--line);animation:twgrow 2.2s ease-in-out infinite}.tw-chat i:nth-child(1){width:70px}.tw-chat i:nth-child(2){width:90px;margin-left:24px;background:var(--accent);animation-delay:.4s}.tw-chat i:nth-child(3){width:56px;animation-delay:.8s}
.tw-time{display:flex;gap:10px;align-items:center}.tw-time i{width:14px;height:14px;border-radius:50%;border:3px solid var(--line);background:var(--surface)}.tw-time i.d{border-color:#10A37F;background:#10A37F}.tw-time i.n{border-color:var(--accent);animation:twpulse 1.6s ease infinite}
.tw-time span{height:3px;width:18px;background:var(--line)}
@keyframes twblink{50%{opacity:0}}@keyframes twpill{to{opacity:1;transform:none}}@keyframes twring{to{stroke-dashoffset:44}}@keyframes twgrow{0%,100%{opacity:.55}50%{opacity:1}}
@keyframes twpulse{50%{box-shadow:0 0 0 6px color-mix(in srgb,var(--accent) 22%,transparent)}}
@media (max-width:900px){.tw-grid{grid-template-columns:1fr}.tw-tiles{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){.tw-out,.tw-lines li,.tw-pills span{opacity:1;transform:none;animation:none}.tw-ring .arc{stroke-dashoffset:60}}