/* Automation page: picker of tools, details on the left, the motion graphic large on the right */
.auto-page{min-height:100vh;display:flex;flex-direction:column}
.auto-page .stage-top .grow{flex:1}
.auto-nav{display:flex;gap:18px;margin-inline-start:18px}
.auto-nav a{color:var(--muted);text-decoration:none;font-weight:600;font-size:.94rem}
.auto-nav a:hover{color:var(--text)}
.auto-main{flex:1;width:100%;max-width:1480px;margin:0 auto;padding:6px max(16px,3vw) 40px;box-sizing:border-box}
.auto-hero{padding:6px 0 18px}
.auto-hero .kicker{color:#9b7bff}
.auto-hero h1{margin:4px 0 8px;font-size:clamp(1.9rem,3.6vw,2.9rem);letter-spacing:-.01em}
.auto-hero .sec-lead{max-width:760px;margin:0}

/* picker */
.auto-picker{display:grid;grid-template-columns:7fr 4fr 3fr;gap:14px;margin-bottom:18px}
.auto-group{--g:#14d3bd;min-width:0}
.auto-group h2{margin:0 0 8px;font:700 .72rem var(--mono,monospace);letter-spacing:.1em;text-transform:uppercase;color:var(--g)}
.auto-tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
.auto-tile{display:flex;gap:8px;align-items:flex-start;text-align:start;min-height:58px;padding:9px 10px;border-radius:12px;cursor:pointer;
  background:linear-gradient(180deg,rgba(19,27,31,.9),rgba(12,18,21,.95));border:1px solid rgba(255,255,255,.08);color:var(--text);font:600 .84rem/1.25 var(--font);transition:border-color .2s,transform .2s,background .2s}
.auto-tile:hover{border-color:var(--g);transform:translateY(-1px)}
.auto-tile .n{font:700 .7rem var(--mono,monospace);color:var(--g);padding-top:2px}
.auto-tile.on{border-color:var(--g);background:linear-gradient(180deg,color-mix(in srgb,var(--g) 18%,#131b1f),#0f171a);box-shadow:0 0 0 1px var(--g) inset,0 10px 30px -18px var(--g)}

/* stage */
.auto-stage{display:grid;grid-template-columns:minmax(300px,4fr) 8fr;gap:22px;align-items:start}
.auto-detail{--g:#14d3bd;position:sticky;top:14px;padding:22px;border-radius:18px;background:linear-gradient(180deg,rgba(19,27,31,.92),rgba(10,15,18,.96));
  border:1px solid rgba(255,255,255,.08);border-top:3px solid var(--g)}
.auto-grp{margin:0;font:700 .72rem var(--mono,monospace);letter-spacing:.1em;text-transform:uppercase;color:var(--g)}
.auto-name{margin:6px 0 6px;font-size:1.55rem;line-height:1.2}
.auto-line{margin:0 0 12px;color:var(--muted);font-size:1.02rem}
.auto-cmd{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:0 0 14px}
.auto-cmd span{color:var(--faint,#6f858b);font-size:.8rem}
.auto-cmd code{font:600 .82rem var(--mono,monospace);color:var(--g);background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);border-radius:8px;padding:4px 8px}
.auto-detail h3{margin:6px 0 8px;font-size:.95rem;color:var(--text)}
.auto-does{margin:0 0 14px;padding:0;list-style:none;display:grid;gap:8px}
.auto-does li{position:relative;padding-inline-start:20px;line-height:1.45;color:#c9d7db}
.auto-does li::before{content:"";position:absolute;inset-inline-start:2px;top:.55em;width:8px;height:8px;border-radius:2px;background:var(--g);box-shadow:0 0 10px var(--g)}
.auto-works{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:0 0 18px}
.auto-works span{color:var(--faint,#6f858b);font-size:.8rem;margin-inline-end:4px}
.auto-works b{font:600 .78rem var(--font);border-radius:999px;padding:4px 10px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1)}
.auto-get{width:100%;justify-content:center;font-size:1rem;padding:12px 16px}

.auto-view{min-width:0}
.auto-screen{position:relative;aspect-ratio:16/10;border-radius:18px;overflow:hidden;background:#060a0c;border:1px solid rgba(255,255,255,.08);box-shadow:0 30px 80px -40px rgba(0,0,0,.9)}
#auto-cv{display:block;width:100%;height:100%}
.auto-hud{position:absolute;top:12px;inset-inline:14px;display:flex;justify-content:space-between;gap:10px;pointer-events:none}
.auto-hud-name{font:700 .8rem var(--font);color:#e6eef0;background:rgba(6,10,12,.66);border:1px solid rgba(255,255,255,.1);border-radius:999px;padding:5px 11px;backdrop-filter:blur(4px)}
.auto-hud-n{font:600 .74rem var(--mono,monospace);color:#93a7ad;align-self:center}
.auto-cap{position:absolute;inset-inline:0;bottom:0;padding:26px 18px 14px;background:linear-gradient(180deg,rgba(6,10,12,0),rgba(6,10,12,.85) 55%)}
.auto-cap p{margin:0 0 8px;font:700 clamp(.95rem,1.5vw,1.15rem) var(--font);color:#fff}
.auto-steps{display:flex;gap:6px;list-style:none;margin:0;padding:0}
.auto-steps li{flex:1;height:3px;border-radius:3px;background:rgba(255,255,255,.14);transition:background .4s}
.auto-steps li.on{background:#14d3bd}
.auto-arrow{position:absolute;top:50%;transform:translateY(-50%);width:40px;height:40px;border-radius:50%;border:1px solid rgba(255,255,255,.16);
  background:rgba(6,10,12,.6);color:#e6eef0;font-size:1.6rem;line-height:1;cursor:pointer;opacity:.75;transition:opacity .2s}
.auto-arrow:hover{opacity:1}
.auto-arrow.prev{inset-inline-start:10px}.auto-arrow.next{inset-inline-end:10px}
[dir=rtl] .auto-arrow.prev{transform:translateY(-50%) scaleX(-1)}[dir=rtl] .auto-arrow.next{transform:translateY(-50%) scaleX(-1)}

/* ask for the tool */
.auto-dlg{border:1px solid rgba(255,255,255,.12);border-radius:18px;background:#0f171a;color:var(--text);padding:0;max-width:min(520px,calc(100vw - 32px));width:100%}
.auto-dlg::backdrop{background:rgba(0,0,0,.6);backdrop-filter:blur(3px)}
.auto-dlg-in{position:relative;padding:24px}
.auto-dlg h2{margin:0 0 8px;font-size:1.3rem;padding-inline-end:30px}
.auto-dlg-btns{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:16px}
.auto-dlg-btns .btn{justify-content:center;gap:8px}
.auto-x{position:absolute;top:12px;inset-inline-end:12px;width:34px;height:34px;border-radius:50%;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.04);color:var(--text);font-size:1.3rem;line-height:1;cursor:pointer}
.auto-x:hover{border-color:var(--teal,#14d3bd)}
.auto-dlg-btns .ico{display:inline-flex}

@media (max-width:1180px){.auto-picker{grid-template-columns:1fr 1fr}.auto-group:first-child{grid-column:1/-1}}
@media (max-width:900px){
  .auto-stage{grid-template-columns:1fr}
  .auto-view{order:-1}
  .auto-detail{position:static}
  .auto-nav{display:none}
}
@media (max-width:600px){
  .auto-picker{grid-template-columns:1fr}
  .auto-tiles{grid-template-columns:1fr 1fr}
  .auto-arrow{width:34px;height:34px;font-size:1.3rem}
  .auto-dlg-btns{grid-template-columns:1fr}
  .stage-top .btn.ghost{display:none}
}