/* autyr: everything after the hero. Same brand rules: ink + paper, lime = handled, red = being fixed. */
.eyebrow{display:inline-block;font:500 11px var(--m);letter-spacing:.1em;text-transform:uppercase;color:var(--mute);margin-bottom:18px}
.rv em{font-family:var(--s);font-weight:400}

/* ---------- work: stacked client cards ---------- */
.card{will-change:transform;transform-origin:50% 0}
.card .shade{position:absolute;inset:0;background:var(--ink);opacity:0;pointer-events:none;z-index:3;border-radius:inherit}

/* ---------- automation demo (pinned, scrubbed) ---------- */
.run{position:relative;height:340vh;background:var(--paper)}
.run-stage{position:sticky;top:0;height:100vh;height:100svh;display:grid;align-items:center;overflow:hidden}
.run-grid{display:grid;grid-template-columns:1fr 1.05fr;gap:clamp(30px,6vw,110px);align-items:center;width:100%}
.run h2{font-size:clamp(44px,6.4vw,108px);letter-spacing:-.06em;line-height:.88;font-weight:700}
.steps{list-style:none;margin-top:clamp(28px,5vh,56px);display:grid;gap:6px}
.st{font-size:clamp(24px,2.4vw,38px);font-weight:600;letter-spacing:-.035em;line-height:1.15;color:var(--ink);opacity:.18;transition:opacity .35s}
.st.on{opacity:1}
.app{background:var(--card);border:1.5px solid var(--ink);border-radius:22px;overflow:hidden;box-shadow:0 50px 90px -40px #0d0d0b66;max-width:560px;width:100%;justify-self:end}
.app-bar{display:flex;align-items:center;gap:6px;padding:12px 16px;border-bottom:1.5px solid var(--ink);background:var(--paper)}
.app-bar i{width:9px;height:9px;border-radius:50%;border:1.5px solid var(--ink)}
.app-bar span{margin-left:10px;font:500 11px var(--m);letter-spacing:.06em;color:var(--mute)}
.app-body{position:relative;padding:22px;display:grid;gap:16px;min-height:430px;align-content:start}
.mail{display:grid;grid-template-columns:40px 1fr;gap:12px;align-items:start}
.mail .av{width:40px;height:40px;border-radius:50%;background:var(--ink);color:var(--paper);display:grid;place-items:center;font-weight:700}
.mail b{font-size:17px}
.mail p{margin-top:8px;background:#fff;border:1.5px solid var(--line);border-radius:4px 16px 16px 16px;padding:14px 16px;font-size:18px;line-height:1.4;min-height:4.2em}
.draft{border:1.5px solid var(--ink);border-radius:16px;padding:14px 16px;background:#fff;display:grid;gap:8px}
.dr-h{display:flex;align-items:center;gap:8px;margin-bottom:2px}
.dr-h b{font-size:18px}
.dr-st{margin-left:auto;font:500 10.5px var(--m);letter-spacing:.06em;text-transform:uppercase;font-style:normal;color:var(--mute)}
.spark{width:16px;height:16px;border-radius:5px;background:var(--acc);border:1.5px solid var(--ink)}
.row{display:flex;justify-content:space-between;font:400 16px var(--m);padding:8px 0;border-bottom:1px dashed var(--line)}
.row.tot{border-bottom:0;font-weight:500;font-size:18px}
.row b{font-weight:500}
.act{position:relative;display:flex;justify-content:flex-end}
.ap{position:relative;border:0;border-radius:99px;background:var(--ink);color:var(--acc);font:600 15px var(--d);padding:14px 22px;overflow:hidden;cursor:default;min-width:170px;height:48px}
.ap span{position:absolute;inset:0;display:grid;place-items:center}
.ap .a2{background:var(--acc);color:var(--ink);opacity:0}
.cur{position:absolute;width:22px;height:22px;border-radius:50%;background:#0d0d0b33;border:1.5px solid var(--ink);right:72px;top:13px;opacity:0;pointer-events:none}
.toast{position:absolute;left:22px;right:22px;top:14px;box-shadow:0 20px 40px -16px #0d0d0b88;background:var(--ink);color:var(--paper);border-radius:16px;padding:14px 16px;display:flex;justify-content:space-between;align-items:center;opacity:0}
.toast b{color:var(--acc);font-weight:600;font-size:20px}.toast span{font:400 14px var(--m);color:#bdbab0}

@media (max-width:860px){
  .run{height:300vh}
  .run-grid{grid-template-columns:1fr;gap:18px;align-content:center}
  .run h2{font-size:12vw}
  .run .eyebrow{margin-bottom:8px}
  .steps{margin-top:14px;gap:0}
  .st{display:none;font-size:24px}.st.on{display:block}
  .app{justify-self:stretch}
  .app-body{padding:14px;gap:10px;min-height:360px}
  .mail p{font-size:15px;padding:10px 12px}
  .row{font-size:14px;padding:5px 0}
  .toast{left:14px;right:14px;top:10px}
}
@media (prefers-reduced-motion:reduce){
  .run{height:auto}.run-stage{position:relative;height:auto;padding:100px 0}
  .st{opacity:1;display:block!important}
  .ap .a2,.toast{opacity:1}
}

.c5{background:#5030e0;color:#fff;border-color:#2a1690}
.c5 .img video{border-color:#ffffff40}
.c6{background:#c33000;color:#fff8f2;border-color:#7a1e00}
.c6 .img video{border-color:#ffffff40}