.automation-example { display:none; }
@media all {
  .automation-example { background:#e5edf5; color:#274760; padding:64px 0; scroll-margin-top:90px; }
  .automation-example *,.automation-demo * { box-sizing:border-box; letter-spacing:0; }
  .automation-example .container { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); align-items:center; gap:90px; }
  .automation-intro,.automation-demo { min-width:0; }
  .automation-intro .eyebrow { color:#416892; margin:0 0 16px; }
  .automation-intro h2 { font-size:38px; font-weight:500; line-height:1.2; margin:0 0 14px; color:#203d53; }
  .automation-intro > p:not(.eyebrow) { max-width:430px; margin:0; font-size:17px; line-height:1.6; }
  .automation-demo { margin:0; }
  .automation-description { position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
  .automation-status { min-height:52px; margin:0; display:grid; place-items:start center; font-size:18px; line-height:26px; text-align:center; color:#274760; }
  .automation-status-before,.automation-status-after { grid-area:1/1; display:grid; gap:4px; width:100%; }
  .automation-status-label { font-size:14px; line-height:20px; }
  .automation-status-message { font-size:22px; font-weight:500; line-height:28px; }
  .automation-status-after { color:#426035; opacity:0; }
  .automation-status-text { position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
  .automation-stage { height:180px; position:relative; margin-top:20px; }
  .automation-track { position:absolute; height:1px; background:#a7bdcd; left:12.5%; right:12.5%; top:86px; }
  .automation-node { width:64px; height:64px; position:absolute; z-index:1; top:54px; left:var(--position); transform:translateX(-50%); display:grid; place-items:center; border:2px solid var(--tone); border-radius:50%; color:var(--tone); background:#f6f8f3; }
  .automation-node svg { width:27px; height:27px; stroke-width:1.6; }
  .automation-combined { position:absolute; top:8px; left:50%; transform:translateX(-50%); width:min(304px,100%); height:164px; padding:11px; display:grid; grid-template-rows:repeat(4,32px); gap:4px; background:#f6f8f3; border:1px solid #a7bdcd; border-radius:6px; opacity:0; }
  .automation-sheet-row { min-width:0; display:grid; grid-template-columns:28px minmax(0,1fr) 20px; align-items:center; gap:10px; color:var(--tone); }
  .automation-sheet-row + .automation-sheet-row { border-top:1px solid #dbe3df; }
  .automation-sheet-icon { width:28px; height:28px; display:grid; place-items:center; }
  .automation-sheet-icon svg { width:20px; height:20px; stroke-width:1.7; }
  .automation-sheet-lines { display:grid; gap:5px; min-width:0; }
  .automation-sheet-lines span { display:block; height:2px; background:#bbc9c8; border-radius:1px; }
  .automation-sheet-lines span:last-child { width:62%; background:#d5dedb; }
  .automation-sheet-check { width:20px; height:20px; display:grid; place-items:center; color:#526e3d; opacity:0; }
  .automation-sheet-check svg { width:18px; height:18px; stroke-width:2; }
  .automation-tasks { list-style:none; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); padding:0; margin:0; gap:8px; }
  .automation-tasks li { display:flex; flex-direction:column; justify-content:center; align-items:center; gap:4px; text-align:center; font-size:15px; line-height:22px; min-height:76px; position:relative; }
  .automation-task-check { display:block; opacity:0; width:16px; height:16px; color:#526e3d; flex-shrink:0; }
  .automation-task-label { width:100%; max-width:100px; }
  .automation-task-check svg { display:block; width:16px; height:16px; }
  .automation-outcome { margin-top:28px; display:flex; align-items:flex-start; gap:10px; color:#536846; font-size:16px; line-height:1.6; }
  .automation-outcome svg { width:20px; height:20px; margin-top:3px; color:#8b7136; }
}
@media(min-width:641px) {
  .automation-example { display:block; }
  .mobile-automation-demo { display:none; }
}
@media(max-width:640px) {
  .mobile-automation-demo { grid-column:1/-1; margin-top:10px; color:#274760; scroll-margin-top:80px; }
  .mobile-automation-demo .automation-status { text-align:left; }
  .mobile-automation-demo .automation-status-label { font-size:14px; }
  .mobile-automation-demo .automation-status-message { font-size:22px; }
  .mobile-automation-demo .automation-tasks { grid-template-columns:minmax(0,1fr); gap:0; margin-top:16px; }
  .mobile-automation-demo .automation-tasks li { display:grid; grid-template-columns:22px minmax(0,1fr) 20px; text-align:left; gap:12px; min-height:48px; padding:10px 0; font-size:16px; line-height:24px; }
  .mobile-automation-demo .automation-tasks li + li { border-top:1px solid #c4d2dd; }
  .mobile-automation-demo .mobile-task-icon { width:22px; height:22px; stroke-width:1.6; color:#416892; }
  .mobile-automation-demo .automation-task-label { min-width:0; max-width:none; }
  .mobile-automation-demo .automation-task-check,.mobile-automation-demo .automation-task-check svg { width:20px; height:20px; }
  .mobile-automation-demo .automation-description { margin:-1px; }
}
@media(min-width:801px) and (max-width:1100px) {
  .automation-example .container { gap:48px; }
}
@media(min-width:641px) and (max-width:850px) {
  .automation-example { padding-block:48px; }
  .automation-example .container { gap:35px; }
  .automation-intro h2 { font-size:30px; }
  .automation-node { width:52px; height:52px; top:60px; }
  .automation-node svg { width:23px; height:23px; }
}
@media(min-width:641px) and (max-width:959px) {
  .automation-tasks { grid-template-columns:repeat(2,minmax(0,1fr)); }
}