/* /ai-videogen-pipeline: the studio-window hero, the assembly line, and what you'd make. Builds on video.css (phones, samples, walkthrough, dialog). */

/* ---------- hero: the studio at work, and what comes out ---------- */
.studio-stage{position:relative;padding:0 7% 30px 0}
.studio-window{background:var(--card);border:1px solid var(--line);border-radius:14px;box-shadow:0 24px 60px -12px rgba(60,45,25,.22);overflow:hidden;transform:rotate(-1.2deg);transition:transform .3s}
.studio-stage:hover .studio-window{transform:rotate(0)}
.studio-bar{display:flex;align-items:center;gap:12px;padding:10px 14px;border-bottom:1px solid var(--line-soft);background:#fbf8f2;font-size:10.5px;color:var(--muted)}
.studio-dots{display:flex;gap:5px;flex-shrink:0}
.studio-dots i{width:8px;height:8px;border-radius:50%;background:#ddd6c7}
.studio-title{flex:1;min-width:0;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:500;color:var(--ink)}
.studio-bar .pill{flex-shrink:0}
.studio-screen{position:relative;display:block;background:#0d0f0c}
.hero-loop{display:block;width:100%;aspect-ratio:16/9;object-fit:cover}
.studio-play{position:absolute;left:14px;top:14px;display:inline-flex;align-items:center;gap:8px;padding:9px 14px;border-radius:22px;background:rgba(255,253,249,.95);color:var(--ink);font-size:12px;font-weight:600;box-shadow:0 8px 20px rgba(0,0,0,.3);transition:transform .15s}
.studio-play .icon{width:13px;height:13px;color:var(--accent)}
.studio-screen:hover .studio-play{transform:translateY(-2px)}
.studio-stage .phone-out{position:absolute;right:0;bottom:0;width:25%;z-index:2;transform:rotate(3deg)}
.studio-stage:hover .phone-out{transform:rotate(0)}
.phone-out .phone-screen{padding:5px;border-radius:22px}
.phone-out .phone-screen video{border-radius:17px}
.phone-out .phone-sound{bottom:10px;padding:5px 10px;font-size:10px;gap:5px}
.phone-out .phone-sound .icon{width:10px;height:10px}
.phone-out figcaption{margin-top:8px;font-size:10.5px;font-weight:600;color:var(--accent-deep)}

/* ---------- the line ---------- */
.line-bar{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:44px}
.path-switch{display:inline-flex;padding:4px;border:1px solid #3c4c40;border-radius:30px;background:var(--dark-deep)}
.path-switch button{padding:9px 18px;border-radius:24px;font-size:13px;font-weight:600;color:var(--on-dark-muted);transition:background .15s,color .15s}
.path-switch button small{margin-left:4px;font-size:11px;font-weight:500;opacity:.75}
.path-switch button[aria-pressed="true"]{background:#fdfcf8;color:var(--ink)}
.line-run{display:inline-flex;align-items:center;gap:8px;padding:8px 13px;border:1px solid #3c4c40;border-radius:20px;font-size:12px;font-weight:600;color:var(--on-dark-muted);transition:color .15s,border-color .15s}
.line-run:hover{color:#fdfcf8;border-color:#5a6a5f}
.line-run .icon{width:13px;height:13px}

/* The belt runs through the centre of every station; the lit part ends where the work currently is. */
.line-rail{position:relative}
.belt{position:absolute;top:28px;left:calc(100% / 14);right:calc(100% / 14);height:4px;margin-top:-2px;border-radius:2px;background:#33433a}
.belt-lit{position:absolute;left:0;top:0;bottom:0;width:calc(100% * var(--p, 0));border-radius:2px;background:repeating-linear-gradient(90deg,#e9a583 0 12px,rgba(233,165,131,.35) 12px 20px);transition:width .7s cubic-bezier(.4,0,.2,1);animation:belt .9s linear infinite}
.belt-lit:after{content:'';position:absolute;right:-6px;top:50%;width:12px;height:12px;margin-top:-6px;border-radius:50%;background:#e9a583;box-shadow:0 0 0 5px rgba(233,165,131,.18)}
@keyframes belt{to{background-position:20px 0}}
.line-track{position:relative;list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(7,minmax(0,1fr))}
.station-node{display:flex;flex-direction:column;align-items:center;gap:7px;width:100%;padding:0 4px;text-align:center}
.node-dot{position:relative;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:56px;height:56px;border-radius:50%;background:var(--dark-deep);border:1.5px solid #4a5a4f;color:#c8d0c8;transition:background .3s,border-color .3s,color .3s,box-shadow .3s}
.node-dot .icon{width:22px;height:22px}
.node-num{margin-top:7px;font:560 12px/1 var(--serif);color:#e9a583}
.node-name{font-size:14.5px;font-weight:600;line-height:1.3;color:#fdfcf8}
.node-skip{font-size:10px;font-weight:600;letter-spacing:.4px;color:var(--on-dark-muted)}
.station-node:hover .node-dot{border-color:#e9a583}
.station.is-done .node-dot{border-color:#9fc3a8;color:#9fc3a8}
.station.is-done .node-dot:after{content:'✓';position:absolute;right:-4px;top:-4px;width:19px;height:19px;border-radius:50%;background:#9fc3a8;color:var(--dark-deep);font-size:10px;font-weight:700;display:flex;align-items:center;justify-content:center}
.station.is-active .node-dot{background:var(--accent);border-color:var(--accent);color:#fff;box-shadow:0 0 0 7px rgba(217,84,43,.22)}
.line[data-path="quick"] [data-only="story"],.line[data-path="story"] [data-only="quick"]{display:none}
.line[data-path="quick"] [data-skip="quick"] .node-dot{border-style:dashed;background:transparent;color:#6f7d72;box-shadow:none}
.line[data-path="quick"] .station[data-skip="quick"] .node-name{color:var(--on-dark-muted)}

/* One station's detail at a time, pointed at by a caret under its node. */
.station-panels{position:relative;margin-top:34px}
.station-panels:before{content:'';position:absolute;z-index:2;top:-8px;left:var(--caret, 60px);width:16px;height:16px;margin-left:-8px;background:var(--dark-deep);border-left:1px solid #3c4c40;border-top:1px solid #3c4c40;transform:rotate(45deg);transition:left .5s cubic-bezier(.4,0,.2,1)}
.station-panel{display:none;grid-template-columns:minmax(0,.75fr) minmax(0,1.7fr);gap:14px 44px;align-items:start;min-height:200px;padding:30px 34px;background:var(--dark-deep);border:1px solid #3c4c40;border-radius:14px}
.station-panel.is-active{display:grid;animation:panel-in .35s ease}
@keyframes panel-in{from{opacity:0;transform:translateY(6px)}}
.panel-head .node-dot{display:none}
.panel-num{display:block;font-size:10px;font-weight:700;letter-spacing:1.6px;color:#9fc3a8}
.panel-head h3{margin:8px 0 0;font-size:30px;line-height:1.2;color:#fdfcf8}
.panel-body p{margin:0;font-size:14.5px;line-height:1.8;color:#c8d0c8}
.panel-body .panel-decide{margin-top:12px;font-size:13.5px;color:var(--on-dark-muted)}
.panel-decide b{font-weight:600;color:#e9a583}
.panel-foot{grid-column:2;display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:4px}
.panel-next{display:inline-flex;align-items:center;gap:8px;margin-left:auto;font-size:12.5px;font-weight:600;color:#e9a583}
.panel-next .icon{width:15px;height:15px}
.panel-next:hover{color:#f3c2a8}

/* ---------- what you'd make ---------- */
.use-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.use-grid .scope-card{display:flex;flex-direction:column;align-items:flex-start}
.use-grid .scope-card h3{margin:18px 0 8px}
.use-grid .scope-card p{flex:1;margin:0 0 16px;font-size:13.5px;line-height:1.65;color:#4a4f45}
.use-where{font-size:10.5px;font-weight:600;letter-spacing:.3px;color:var(--green);background:var(--green-soft);padding:4px 10px;border-radius:20px}
#ads .transfer-banner{margin-top:30px}

/* ---------- book a demo call ---------- */
.book-dialog{max-width:780px}
.book-frame{margin-top:18px;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:#fff}
/* Sized so the dialog itself never scrolls: only the calendar does (the text around it is ~300px tall, more on phones). */
.book-frame iframe{display:block;width:100%;height:min(680px,calc(90vh - 312px));height:min(680px,calc(90dvh - 312px));min-height:320px;border:0}
.book-alt{margin:14px 0 0}

/* ---------- responsive ---------- */
@media(max-width:1100px){.node-name{font-size:13px}.station-panel{padding:26px 28px;gap:12px 32px}}
@media(max-width:900px){
  .use-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .node-dot{width:48px;height:48px}.node-dot .icon{width:19px;height:19px}
  .belt{top:24px}
  .station-panel{grid-template-columns:1fr}
  .panel-foot{grid-column:1}
  .panel-head h3{font-size:25px}
}
/* On phones the line runs down the page: every station is open, joined by a vertical belt. */
@media(max-width:760px){
  .line-bar{margin-bottom:28px}
  .line-rail,.station-panels:before,.panel-next{display:none}
  .station-panels{margin-top:0}
  .station-panel,.station-panel.is-active{display:grid;grid-template-columns:44px minmax(0,1fr);gap:0 16px;min-height:0;padding:0 0 26px;background:none;border:0;border-radius:0;position:relative;animation:none}
  .station-panel:not(:last-child):after{content:'';position:absolute;left:21px;top:50px;bottom:6px;width:2px;background:#33433a}
  .station-panel>*,.panel-head>*{grid-column:2}
  .panel-head{display:contents}
  .panel-head .node-dot{display:inline-flex;grid-column:1;grid-row:1 / span 4;width:44px;height:44px;border-color:#e9a583;color:#e9a583}
  .panel-head .node-dot .icon{width:18px;height:18px}
  .panel-num{margin-top:4px}
  .panel-head h3{margin:4px 0 8px;font-size:21px}
  .panel-body p{font-size:13.5px}
  .panel-foot{margin-top:12px}
  .line[data-path="quick"] .station-panel[data-skip="quick"] .panel-body{opacity:.75}
}
@media(max-width:640px){
  .studio-stage{padding:0 10% 26px 0}
  .studio-stage .phone-out{width:31%}
  .studio-bar{padding:8px 10px;gap:8px;font-size:9px}
  .studio-bar .pill{display:none}
  .studio-play{left:8px;top:8px;padding:6px 10px;font-size:10px}
  .path-switch{display:flex;width:100%}
  .path-switch button{flex:1;padding:9px 8px;font-size:12px}
  .use-grid{grid-template-columns:1fr;gap:12px}
  .use-grid .scope-card{padding:22px 20px}
  .book-frame iframe{height:calc(92vh - 360px);height:calc(92dvh - 360px)}
}
@media(prefers-reduced-motion:reduce){.belt-lit{animation:none}.belt-lit,.station-panels:before{transition:none}.station-panel.is-active{animation:none}}