/* TwoStaff website. Colors are tokens on :root; the dark blocks only redefine tokens. */
/* Layout: TwoStaff's poster rhythm. Cream sections with soft sage circles, white cards with a
   dark outline and a slight tilt (as in the brand's carousel posts), one forest band to close. */
:root{
  --bg:#F6F4ED; --surface:#FFFFFF; --ink:#223222; --ink-2:#3A4A38; --muted:#56624F;
  --line:#E3E6D8; --line-strong:#C5CCB8; --outline:#223222;
  --accent:#E84B1D; --accent-text:#A8300F; --accent-tint:#FDE3D8;
  --sage:#ECEFE1; --sage-2:#E4E8D8; --panel:#F1F2E8; --dot:#4B5E44; --free:#485C44;
  --btn-bg:#223222; --btn-fg:#F6F4ED;
  --band-bg:#223222; --band-fg:#F6F4ED; --band-muted:#AAB6A1; --band-shape:#2C3F2A; --band-shape-2:#2A3C28;
  --band-line:#4B5E44; --band-field:#2A3C29; --band-btn-bg:#F6F4ED; --band-btn-fg:#223222;
  --lead-bg:#223222; --lead-fg:#FFFFFF;
  --tint-1:#DFE6D3; --tint-2:#F7D9CC; --tint-3:#EFE5C4; --tint-4:#D3E2DF; --tint-ink:#223222;
  --logo:url(assets/twostaff-logo-dark.png); --logo-light:url(assets/twostaff-logo-light.png);
  --font:'Montserrat','Avenir Next','Segoe UI',system-ui,sans-serif;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){
  --bg:#223222; --surface:#2A3C29; --ink:#F6F4ED; --ink-2:#D9DFCF; --muted:#AAB6A1;
  --line:#3A4D37; --line-strong:#4B5E44; --outline:#8FA086;
  --accent:#E84B1D; --accent-text:#FF9B78; --accent-tint:#4D2B1F;
  --sage:#2B3E2A; --sage-2:#34462F; --panel:#263727; --dot:#A9C29B; --free:#C3CFB8;
  --btn-bg:#F6F4ED; --btn-fg:#223222;
  --band-bg:#172218; --band-shape:#1E2C1F; --band-shape-2:#1C291D; --band-line:#3A4D37; --band-field:#223222;
  --lead-bg:#F6F4ED; --lead-fg:#223222;
  --logo:url(assets/twostaff-logo-light.png);
  color-scheme:dark } }
:root[data-theme="dark"]{
  --bg:#223222; --surface:#2A3C29; --ink:#F6F4ED; --ink-2:#D9DFCF; --muted:#AAB6A1;
  --line:#3A4D37; --line-strong:#4B5E44; --outline:#8FA086;
  --accent:#E84B1D; --accent-text:#FF9B78; --accent-tint:#4D2B1F;
  --sage:#2B3E2A; --sage-2:#34462F; --panel:#263727; --dot:#A9C29B; --free:#C3CFB8;
  --btn-bg:#F6F4ED; --btn-fg:#223222;
  --band-bg:#172218; --band-shape:#1E2C1F; --band-shape-2:#1C291D; --band-line:#3A4D37; --band-field:#223222;
  --lead-bg:#F6F4ED; --lead-fg:#223222;
  --logo:url(assets/twostaff-logo-light.png);
  color-scheme:dark }

*{box-sizing:border-box}
img{max-width:100%}
[hidden]{display:none!important}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font);font-size:17px;font-weight:500;line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:clip}
h1,h2,h3,p,ol,ul{margin:0;padding:0}
h1,h2,h3{font-weight:700;line-height:1.1;letter-spacing:-0.025em;text-wrap:balance}
ol,ul{list-style:none}
a{color:inherit}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:4px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.skip-link{position:fixed;left:16px;top:12px;z-index:100;padding:12px 18px;background:var(--btn-bg);color:var(--btn-fg);border-radius:12px;transform:translateY(-180%)}
.skip-link:focus{transform:translateY(0)}
#top{scroll-margin-top:76px}
.wrap{max-width:1160px;margin-inline:auto;padding-inline:clamp(16px,4vw,40px)}
.section{position:relative;padding-block:clamp(56px,8vw,104px);overflow:clip}
.section[id]{scroll-margin-top:76px}
.shape{position:absolute;border-radius:50%;pointer-events:none}
.section > .wrap{position:relative}
.head{max-width:720px;margin-bottom:clamp(28px,4vw,48px)}
.head h2{font-size:clamp(30px,3.8vw,48px)}
.head p{margin-top:14px;font-size:clamp(17px,1.4vw,19px);color:var(--ink-2)}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:50px;padding:0 24px;border-radius:14px;border:1.5px solid transparent;font:inherit;font-size:16px;font-weight:600;text-decoration:none;white-space:nowrap;cursor:pointer}
.btn--primary{background:var(--btn-bg);color:var(--btn-fg)}
.btn--small{min-height:44px;padding:0 16px;font-size:15px;border-radius:12px}
.btn{transition:transform .15s ease,opacity .15s ease}
.btn:hover{transform:translateY(-2px)}
.btn:disabled{cursor:wait;opacity:.7;transform:none}
.text-link{font-weight:600;text-underline-offset:5px;text-decoration-thickness:1.5px}

/* header */
.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:var(--bg);border-bottom:1px solid var(--line)}
.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:68px}
.logo{display:block;width:138px;height:32px;flex-shrink:0;background:var(--logo) left center/contain no-repeat}
.nav{display:flex;gap:30px;font-size:15px;font-weight:600}
.nav a{color:var(--ink-2);text-decoration:none}
.nav a:hover{color:var(--ink);text-decoration:underline;text-underline-offset:6px}
@media (max-width:880px){.nav{display:none}}
.mobile-menu{display:none}
@media (max-width:880px){
  .top .wrap{gap:8px}
  .top .btn{margin-left:auto}
  .mobile-menu{display:block}
  .mobile-menu summary{display:flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;cursor:pointer;list-style:none;border:1px solid var(--line-strong);border-radius:12px}
  .mobile-menu summary::-webkit-details-marker{display:none}
  .mobile-menu[open] summary{background:var(--sage-2)}
  .mobile-menu nav{position:absolute;top:100%;left:0;right:0;display:grid;padding:12px max(16px,4vw) 18px;background:var(--bg);border-bottom:1px solid var(--line-strong);box-shadow:0 12px 20px #0000000d}
  .mobile-menu nav a{padding:12px 4px;font-size:16px;font-weight:600;text-decoration:none}
  .mobile-menu nav a:hover{color:var(--accent-text)}
}
@media (max-width:420px){.top .logo{width:104px}.top .btn--small{font-size:13px;padding-inline:10px}}

/* hero */
.hero{padding-block:clamp(36px,6vw,84px) clamp(32px,5vw,64px)}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:clamp(36px,5vw,76px);align-items:center}
@media (max-width:920px){.hero-grid{grid-template-columns:minmax(0,1fr)}}
.eyebrow{font-size:16px;font-weight:700;color:var(--accent-text)}
.hero h1{margin-top:14px;font-size:clamp(40px,5.7vw,72px);line-height:1.03;letter-spacing:-0.035em}
.swash{display:block;margin-top:16px;color:var(--accent);max-width:100%}
.swash path{stroke-dasharray:260;stroke-dashoffset:0;animation:draw .9s .25s ease-out backwards}
@keyframes draw{from{stroke-dashoffset:260}}
.lede{margin-top:22px;max-width:33em;font-size:clamp(17px,1.5vw,20px);color:var(--ink-2)}
.cta-row{margin-top:30px;display:flex;flex-wrap:wrap;align-items:center;gap:14px 24px}

/* small product pieces, shared by the hero and the control demos */
.av{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:40px;height:40px;border-radius:12px;font-weight:700;font-size:18px;color:var(--tint-ink)}
.av--s{width:28px;height:28px;border-radius:9px;font-size:13px}
.av--l{width:64px;height:64px;border-radius:18px;font-size:30px}
.av--lead{background:var(--lead-bg);color:var(--lead-fg)}
.t1{background:var(--tint-1)}.t2{background:var(--tint-2)}.t3{background:var(--tint-3)}.t4{background:var(--tint-4)}
.pill{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 10px;border-radius:13px;font-size:13px;font-weight:600;white-space:nowrap}
.pill i{width:7px;height:7px;border-radius:50%}
.pill--needs{background:var(--accent-tint);color:var(--accent-text)}.pill--needs i{background:var(--accent)}
.pill--working{background:var(--sage-2);color:var(--ink)}.pill--working i{background:var(--dot);animation:pulse 1.6s ease-in-out infinite}
.pill--free{background:var(--sage-2);color:var(--free)}
@keyframes pulse{50%{opacity:.3}}
.mini{display:inline-flex;align-items:center;height:38px;padding:0 14px;border-radius:11px;border:1px solid var(--line-strong);background:var(--surface);font-size:14px;font-weight:600;white-space:nowrap}
.mini--primary{background:var(--btn-bg);border-color:var(--btn-bg);color:var(--btn-fg)}
.row{display:flex;align-items:center;gap:10px;min-width:0}
.row--wrap{flex-wrap:wrap}
.push{margin-left:auto}
.name{font-weight:700;line-height:1.2}
.sub{font-size:13px;color:var(--muted)}

/* hero illustration */
.vig{position:relative;display:flex;flex-direction:column;padding:28px 0 12px;font-size:15px;line-height:1.45}
.vig > :not(.shape){position:relative}
.vig-circle{width:86%;aspect-ratio:1;right:-22%;top:-6%;background:var(--sage)}
.vig-ring{width:38%;aspect-ratio:1;left:-12%;bottom:-8%;border:clamp(18px,2.6vw,30px) solid var(--sage)}
.card{background:var(--surface);border:1.5px solid var(--outline);border-radius:20px;padding:18px}
.vig-chat{width:min(100%,470px);display:flex;flex-direction:column;gap:14px;transform:rotate(-1.4deg)}
.bubble{align-self:flex-end;max-width:84%;padding:10px 14px;border-radius:14px 14px 4px 14px;background:var(--sage-2)}
.reply{display:flex;gap:10px;align-items:flex-start;max-width:88%;padding-bottom:26px}
.reply span:last-child{padding-top:3px}
.vig-approve{width:min(88%,370px);align-self:flex-end;margin-top:-30px;display:flex;flex-direction:column;gap:12px;transform:rotate(1.6deg)}
.vig-approve > .row:first-child{flex-wrap:wrap;gap:6px}
.q{font-weight:600;font-size:16px;line-height:1.3}
.vig-team{align-self:flex-start;margin-top:18px;display:flex;flex-wrap:wrap;gap:8px}
.chip{display:inline-flex;align-items:center;gap:8px;padding:6px 8px 6px 6px;border-radius:14px;background:var(--surface);border:1px solid var(--line-strong);font-weight:600}

/* Product screenshots retain their original colors in both site themes. */
.product-preview{padding-top:clamp(32px,5vw,64px);background:var(--panel);border-block:1px solid var(--line)}
.product-preview .head{max-width:820px}
.product-preview .head .eyebrow{margin:0 0 16px;color:var(--accent-text);font-size:15px}
.product-tabs{display:flex;gap:8px;padding:6px;margin-bottom:24px;width:fit-content;max-width:100%;border:1px solid var(--line-strong);border-radius:16px;background:var(--bg)}
.product-tabs button{min-height:46px;padding:10px 20px;border:0;border-radius:11px;background:transparent;color:var(--ink-2);font:inherit;font-size:15px;font-weight:600;cursor:pointer}
.product-tabs button[aria-selected="true"]{background:var(--btn-bg);color:var(--btn-fg)}
.product-tabs button:hover:not([aria-selected="true"]){background:var(--sage-2)}
.product-panel{margin:0 0 36px}
.product-preview[data-tabs-ready] .product-panel{margin-bottom:0}
.product-image{display:block;overflow:hidden;border:1px solid var(--line-strong);border-radius:18px;background:#F6F4ED;box-shadow:0 8px 0 var(--sage-2)}
.product-image img{display:block;width:100%;height:auto}
.product-caption{padding-top:28px}
.product-caption h3{font-size:21px;line-height:1.25}
.product-caption p{max-width:43em;margin-top:8px;color:var(--ink-2);font-size:16px}
.product-note{margin-top:24px;color:var(--muted);font-size:13px}
@media (max-width:600px){
  .product-tabs{width:100%;gap:4px}
  .product-tabs button{flex:1;padding-inline:10px;font-size:13px}
  .product-image{border-radius:10px;box-shadow:0 5px 0 var(--sage-2)}
  .product-caption{padding-top:22px}
  .product-caption h3{font-size:20px}
  .product-caption p{font-size:15px}
  .product-note{margin-top:20px;font-size:12px}
}

/* teammates */
.team-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:20px;align-items:stretch}
@media (max-width:880px){.team-grid{grid-template-columns:minmax(0,1fr)}}
.lead-card{position:relative;overflow:hidden;border-radius:24px;padding:clamp(24px,3vw,36px);background:var(--band-bg);color:var(--band-fg);display:flex;flex-direction:column;gap:16px;isolation:isolate}
.lead-card .shape{z-index:-1}
.lead-card .av{background:var(--band-btn-bg);color:var(--band-btn-fg)}
.lead-card h3{font-size:clamp(28px,3vw,38px);display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px}
.tag{display:inline-flex;align-items:center;height:26px;padding:0 10px;border-radius:13px;border:1px solid var(--band-line);font-size:13px;font-weight:600;letter-spacing:0;color:var(--band-fg)}
.lead-card p{color:var(--band-muted);max-width:26em}
.lead-card p strong{color:var(--band-fg);font-weight:600}
.ask{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:56px;padding:0 16px 0 18px;border-radius:16px;border:1.5px solid var(--band-line);background:var(--band-field);color:var(--band-muted);font-size:15px}
.wide-only{display:block}
@media (max-width:880px){.wide-only{display:none}}
.roles-label{font-size:14px;font-weight:600;color:var(--muted);margin-bottom:12px}
.roles{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(230px,100%),1fr));gap:14px}
.role{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:20px;display:flex;flex-direction:column;gap:10px}
.role h3{font-size:19px;letter-spacing:-0.01em}
.role p{font-size:15.5px;color:var(--ink-2)}
.role--own{background:transparent;border:1.5px dashed var(--line-strong)}
.ico{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:13px;color:var(--tint-ink)}
.ico--plain{background:transparent;border:1.5px dashed var(--line-strong);color:var(--ink)}

/* how it works */
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr));gap:clamp(18px,2.4vw,28px)}
.step{background:var(--surface);border:1.5px solid var(--outline);border-radius:24px;padding:26px 26px 28px;display:flex;flex-direction:column;gap:10px}
.step:nth-child(1){transform:rotate(-1.2deg)}
.step:nth-child(2){transform:rotate(.8deg)}
.step:nth-child(3){transform:rotate(-.6deg)}
.step-top{display:flex;align-items:flex-start;justify-content:space-between;color:var(--ink)}
.num{font-size:54px;font-weight:800;line-height:.9;letter-spacing:-0.04em;color:var(--accent)}
.step h3{margin-top:8px;font-size:24px}
.step p{color:var(--ink-2)}

/* control */
.ctrl-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(420px,100%),1fr));gap:20px}
.ctrl{background:var(--surface);border:1px solid var(--line);border-radius:22px;padding:14px 14px 24px;display:flex;flex-direction:column}
.demo{min-height:168px;border-radius:14px;background:var(--panel);padding:18px;display:flex;flex-direction:column;justify-content:center;gap:10px;font-size:15px;line-height:1.4}
.demo .line{display:flex;align-items:center;gap:10px;min-width:0;padding:8px 10px;border-radius:12px;background:var(--surface);border:1px solid var(--line)}
.demo .line b{font-weight:600}
.ctrl h3{margin:22px 10px 0;font-size:21px;letter-spacing:-0.015em}
.ctrl p{margin:8px 10px 0;color:var(--ink-2);font-size:16px}
.meter{height:8px;border-radius:4px;background:var(--line)}
.meter i{display:block;width:38%;height:8px;border-radius:4px;background:var(--accent)}
.nums{font-variant-numeric:tabular-nums}

/* faq */
.faq{max-width:780px}
.faq details{border-top:1.5px solid var(--line-strong)}
.faq details:last-child{border-bottom:1.5px solid var(--line-strong)}
.faq summary{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:68px;padding:14px 4px;font-size:19px;font-weight:600;letter-spacing:-0.01em;cursor:pointer;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex-shrink:0;width:11px;height:11px;margin-right:6px;border-right:2px solid var(--ink);border-bottom:2px solid var(--ink);transform:rotate(45deg) translate(-3px,-3px);transition:transform .2s}
.faq details[open] summary::after{transform:rotate(-135deg) translate(-2px,-2px)}
.faq details p{padding:0 4px 22px;max-width:62ch;color:var(--ink-2)}

/* closing band */
.band{background:var(--band-bg);color:var(--band-fg);text-align:center;isolation:isolate}
.band .shape{z-index:-1}
.band :focus-visible{outline-color:var(--band-fg)}
.band h2{font-size:clamp(32px,4.6vw,58px);letter-spacing:-0.03em}
.band .swash{margin-inline:auto}
.band .lede{margin-inline:auto;color:var(--band-muted)}
.signup{margin:30px auto 0;max-width:520px;display:flex;flex-wrap:wrap;gap:10px}
.signup input{flex:1 1 220px;min-width:0;height:54px;padding:0 18px;border-radius:14px;border:1.5px solid var(--band-line);background:var(--band-field);color:var(--band-fg);font:inherit;font-size:16px}
.signup input::placeholder{color:var(--band-muted)}
.signup .btn{flex:1 1 180px;min-height:54px;background:var(--band-btn-bg);color:var(--band-btn-fg)}
.note{min-height:1.6em;margin-top:14px;font-size:15px;color:var(--band-muted)}
.signup .honeypot{display:none}
.signup input[aria-invalid="true"]{border-color:#FF9B78;outline-color:#FF9B78}
.signup-help{margin-top:10px;color:var(--band-muted);font-size:14px}
.signup-help a{text-underline-offset:4px;color:var(--band-fg)}
@media (max-width:360px){.demo .line{padding:8px 6px;gap:6px}.demo .pill{font-size:12px;padding-inline:7px}}

/* footer */
.foot{padding-block:28px 36px}
.foot .wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 32px;font-size:15px;color:var(--muted)}
.foot nav{display:flex;flex-wrap:wrap;gap:8px 24px;font-weight:600}
.foot nav a{color:var(--ink-2);text-decoration:none}
.foot nav a:hover{text-decoration:underline;text-underline-offset:5px}

@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}