/* Automations (MKT-11): the homepage workflow card grown into the hero builder, three pinned idea cards,
   the plan strip and the real Studio Ideas screen. Page CSS only; shared pieces come from site.css. */

/* 01 Hero: headline and copy side by side, then the builder card */
.aut-hero{position:relative;padding:54px 0 104px;overflow:hidden}
.aut-hero-head{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);gap:48px;align-items:end}
.aut-hero h1{font-size:clamp(44px,5.2vw,78px);margin:22px 0 0}
.aut-hero-copy .sd-lead{margin-bottom:10px}
.aut-hero-copy>p:not(.sd-lead){max-width:31em}
.aut-plan-line{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:18px!important;font-size:13.5px;font-weight:800;color:var(--sd-ink-soft)!important}

/* 02 The builder: one big pinned card, kept straight because you work inside it */
.aut-builder{margin-top:64px;padding:34px 32px 26px;color:var(--sd-ink)}
.aut-builder.sd-card:hover,.aut-builder.sd-card:focus-within{transform:none;box-shadow:var(--sd-print-lg)}
.aut-note{position:absolute;z-index:4;top:-24px;right:36px;width:178px;padding:13px 14px 12px;background:#f8e27a;border-radius:3px 3px 12px 3px;box-shadow:var(--sd-print);transform:rotate(4deg);font:800 14.5px/1.25 var(--sd-font);color:var(--sd-ink);letter-spacing:-.01em}
.aut-note::before{content:"";position:absolute;top:-9px;left:50%;width:56px;height:18px;margin-left:-28px;background:rgba(255,255,255,.55);transform:rotate(-4deg)}
.aut-builder-head{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:18px 40px;align-items:end}
.aut-builder-head h2{font-size:clamp(26px,2.6vw,38px);margin-top:18px}
.aut-builder-head h2 span{display:block;color:#3b6f61}

.aut-app{margin-top:26px;border:1.5px solid var(--sd-ink);border-radius:14px;background:#fff;box-shadow:var(--sd-print);overflow:hidden;color:var(--sd-ink)}
.aut-app-bar{display:flex;align-items:center;gap:12px;padding:11px 16px;border-bottom:1.5px solid var(--sd-line);background:var(--sd-paper)}
.aut-app-bar em{margin-left:auto;font:700 12px var(--sd-font);font-style:normal;color:var(--sd-ink-faint)}
.aut-app-body{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr) minmax(0,1fr)}
.aut-pane-head{display:flex;align-items:center;gap:10px;min-height:42px;padding:9px 14px;border-bottom:1.5px solid var(--sd-line);font-size:13px}
.aut-pane-head span{margin-left:auto;font-size:11.5px;font-weight:800;color:var(--sd-ink-faint)}

/* The conversation */
.aut-chat{display:grid;gap:10px;align-content:start;padding:18px 16px;background:#f5f7f2}
.aut-chat .label-sm{margin-bottom:2px}
.aut-chat .bub{max-width:100%}
.aut-go{margin-top:6px}
.aut-builder[data-step="0"] .aut-chat .s2,.aut-builder[data-step="1"] .aut-chat .s2,
.aut-builder[data-step="0"] .aut-chat .s3,.aut-builder[data-step="1"] .aut-chat .s3,.aut-builder[data-step="2"] .aut-chat .s3{display:none}
.aut-builder[data-step="5"] .aut-go{display:none}
.aut-chat .bub.s2,.aut-chat .bub.s3{animation:aut-pop .45s var(--sd-settle) backwards}

/* The Visual Builder: the steps connect in stage 3, the approval step lights up in stage 4 */
.aut-canvas-wrap{display:flex;flex-direction:column;border-left:1.5px solid var(--sd-line);border-right:1.5px solid var(--sd-line)}
.aut-canvas.flow-canvas{position:relative;flex:1;padding:18px 18px 20px;align-content:start}
.aut-canvas .node{max-width:340px}
.aut-canvas .branches{max-width:340px}
.aut-canvas>.link:nth-child(6){height:36px}
.aut-review-wrap{position:relative;width:100%;max-width:340px}
.aut-review-wrap .node{max-width:none}
#autReview{background:#fff;transition:background .2s,box-shadow .3s var(--sd-ease)}
#autReview[aria-pressed="true"]{background:#fff7cf}
.aut-callout{position:absolute;z-index:2;right:-6px;top:-31px;padding:5px 10px;border-radius:999px;background:var(--sd-gold);border:1.5px solid var(--sd-ink);font:800 11.5px var(--sd-font);color:var(--sd-ink);box-shadow:2px 2px 0 var(--sd-ink);transform:rotate(2deg);opacity:0;transition:opacity .3s}
.aut-builder[data-step="4"] .aut-callout{opacity:1}
.aut-builder[data-step="4"] #autReview{box-shadow:0 0 0 4px rgba(234,197,27,.55),2px 2px 0 rgba(16,61,54,.18);animation:aut-glow 1.6s var(--sd-ease) 2}
.aut-builder[data-step="5"] .aut-finish{background:#e6efe8}
.aut-builder[data-step="0"] .aut-canvas>:not(.aut-empty),.aut-builder[data-step="1"] .aut-canvas>:not(.aut-empty),.aut-builder[data-step="2"] .aut-canvas>:not(.aut-empty){opacity:0;transform:translateY(8px);visibility:hidden}
.aut-builder[data-step="3"] .aut-canvas>:nth-child(2){transition-delay:.1s}
.aut-builder[data-step="3"] .aut-canvas>:nth-child(3){transition-delay:.25s}
.aut-builder[data-step="3"] .aut-canvas>:nth-child(4){transition-delay:.4s}
.aut-builder[data-step="3"] .aut-canvas>:nth-child(5){transition-delay:.55s}
.aut-builder[data-step="3"] .aut-canvas>:nth-child(6){transition-delay:.7s}
.aut-builder[data-step="3"] .aut-canvas>:nth-child(7){transition-delay:.85s}
.aut-builder[data-step="3"] .aut-canvas>:nth-child(8){transition-delay:1s}
.aut-builder[data-step="3"] .aut-canvas>:nth-child(9){transition-delay:1.15s}
.aut-empty{position:absolute;inset:18px;display:grid;place-content:center;justify-items:center;gap:8px;text-align:center;opacity:0;visibility:hidden;transition:opacity .3s}
.aut-builder[data-step="0"] .aut-empty,.aut-builder[data-step="1"] .aut-empty,.aut-builder[data-step="2"] .aut-empty{opacity:1;visibility:visible}
.aut-empty>.icon{font-size:40px;color:#2b7a55}
.aut-empty b{font-size:20px;letter-spacing:-.02em;line-height:1.15}
.aut-empty span{font-size:13px;font-weight:700;color:var(--sd-ink-faint)}
.aut-ghost{display:flex;gap:10px;margin-top:8px}
.aut-ghost i{width:54px;height:36px;border:1.5px dashed var(--sd-line);border-radius:8px;background:rgba(16,61,54,.035)}

/* The first run's content */
.aut-out{display:flex;flex-direction:column;background:var(--sd-paper)}
.aut-on-dot{display:inline-flex;align-items:center;gap:6px;color:#1f6b49!important;visibility:hidden}
.aut-on-dot::before{content:"";width:8px;height:8px;border-radius:50%;background:#2b9a66}
.aut-builder[data-step="5"] .aut-on-dot{visibility:visible}
.aut-out-wait{flex:1;display:grid;place-content:center;justify-items:center;gap:6px;padding:28px 22px;text-align:center}
.aut-out-wait>.icon{font-size:34px;color:var(--sd-ink-faint)}
.aut-out-wait b{font-size:17px}
.aut-out-wait span{font-size:13px;font-weight:700;color:var(--sd-ink-faint);max-width:20em}
.aut-out-ready{display:none;gap:14px;padding:16px;align-items:flex-start}
.aut-builder[data-step="5"] .aut-out-wait{display:none}
.aut-builder[data-step="5"] .aut-out-ready{display:flex}
.aut-reel{position:relative;flex:none;width:136px;aspect-ratio:9/16;margin:0;border:1.5px solid var(--sd-ink);border-radius:16px;overflow:hidden;background:#0b2420;box-shadow:var(--sd-print)}
.aut-reel img,.aut-reel video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.aut-reel video{z-index:1}
.aut-reel::after{content:"";position:absolute;z-index:2;inset:45% 0 0;background:linear-gradient(transparent,rgba(5,20,17,.8))}
.aut-reel-brand,.aut-reel strong,.aut-reel .sd-ai-tag{position:absolute;z-index:3}
.aut-reel-brand{top:12px;left:10px;font:800 9.5px var(--sd-font);letter-spacing:.14em;color:#fff;text-shadow:0 1px 6px rgba(0,0,0,.5)}
.aut-reel strong{left:10px;right:10px;bottom:36px;color:#fff;font-size:16px;line-height:1.1;letter-spacing:-.02em}
.aut-reel .sd-ai-tag{left:8px;bottom:9px;font-size:10px}
.aut-out-list{flex:1;min-width:0}
.aut-out-list h3{font-size:19px;margin-top:2px}
.aut-out-list ul{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:7px}
.aut-out-list li{display:flex;align-items:center;gap:8px;padding:7px 9px;border:1.5px solid var(--sd-line);border-radius:9px;background:#fff;font-size:13px;animation:aut-pop .45s var(--sd-settle) backwards}
.aut-out-list li:nth-child(2){animation-delay:.12s}.aut-out-list li:nth-child(3){animation-delay:.24s}.aut-out-list li:nth-child(4){animation-delay:.36s}
.aut-out-list li .icon{font-size:15px;color:#2b7a55}
.aut-out-list li .ok{margin-left:auto;color:#1f6b49}
.aut-marks{display:flex;gap:9px;margin-top:12px}
.aut-marks img{width:18px;height:18px}

/* The five stages */
.aut-app-foot{padding:12px;border-top:1.5px solid var(--sd-line);background:var(--sd-paper)}
.aut-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}
.aut-steps button{width:100%;min-height:44px;display:flex;align-items:center;gap:9px;padding:8px 10px;border:1.5px solid var(--sd-line);border-radius:10px;background:#fff;font:800 13px/1.2 var(--sd-font);color:var(--sd-ink);text-align:left;cursor:pointer;transition:background .2s,border-color .2s,box-shadow .2s}
.aut-steps button:hover{border-color:var(--sd-ink)}
.aut-steps b{flex:none;width:24px;height:24px;display:grid;place-items:center;border-radius:6px;border:1.5px solid var(--sd-ink);background:var(--sd-canvas);font-size:12px}
.aut-steps button.is-done b{background:var(--sd-ink);color:var(--sd-canvas)}
.aut-steps button[aria-current="step"]{background:var(--sd-gold);border-color:var(--sd-ink);box-shadow:2px 2px 0 var(--sd-ink)}
.aut-step-now{display:none;margin-top:10px!important;font-size:13px;font-weight:800;color:var(--sd-ink)!important;text-align:center}

.aut-status{display:flex;flex-wrap:wrap;align-items:center;gap:8px 20px;margin-top:16px}
.aut-on-note{display:none;align-items:center;gap:7px;font-size:13.5px;font-weight:800;color:#1f6b49!important}
.aut-builder[data-on="true"] .aut-on-note{display:inline-flex}
.aut-status small{font-size:12.5px;font-weight:700;color:var(--sd-ink-faint)}

@keyframes aut-pop{from{opacity:0;transform:translateY(6px)}}
@keyframes aut-glow{50%{box-shadow:0 0 0 8px rgba(234,197,27,.35),2px 2px 0 rgba(16,61,54,.18)}}

/* 03 Three pinned ideas */
.aut-how{padding:112px 0 96px;background:var(--sd-paper);border-top:1.5px solid var(--sd-line-soft);border-bottom:1.5px solid var(--sd-line-soft)}
.aut-how-head{max-width:760px}
.aut-how-head h2{margin:22px 0 14px}
.aut-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,330px),1fr));gap:52px 40px;align-items:start;margin-top:64px}
.aut-card{padding:32px 28px 28px}
.aut-card>p{margin-top:10px}
.aut-card:nth-child(2){margin-top:34px}

.aut-chain{list-style:none;margin:20px 0 0;padding:0}
.aut-chain li{position:relative;display:flex;align-items:center;gap:9px;padding:8px 11px;border:1.5px solid var(--sd-ink);border-radius:10px;background:#fff;font-size:13px;font-weight:800;box-shadow:2px 2px 0 rgba(16,61,54,.18)}
.aut-chain li+li{margin-top:14px}
.aut-chain li+li::before{content:"";position:absolute;left:21px;top:-15.5px;height:14px;border-left:1.5px solid var(--sd-ink)}
.aut-chain li.is-last{background:#fff7cf}
.aut-chain .icon{font-size:16px;color:#2b7a55}

.aut-say-list{display:grid;gap:11px;margin-top:20px}
.aut-say-list fieldset{display:flow-root;margin:0;padding:0 0 11px;border:0;border-bottom:1.5px dashed var(--sd-line)}
.aut-say-list fieldset:last-child{border-bottom:0;padding-bottom:0}
.aut-say-list legend{float:left;padding:0;margin:8px 12px 0 0;font-size:13.5px;font-weight:800}
.seg{float:right;display:inline-flex;gap:2px;padding:3px;border:1.5px solid var(--sd-ink);border-radius:999px;background:#fff}
.seg label{position:relative;display:block}
.seg input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.seg span{display:block;padding:6px 10px;border-radius:999px;font:800 12px/1.1 var(--sd-font);color:var(--sd-ink);white-space:nowrap}
.seg input:checked+span{background:var(--sd-gold)}
.seg input:focus-visible+span{outline:3px solid var(--sd-ink);outline-offset:1px}

.aut-cal{margin-top:20px}

.aut-plans{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.7fr) auto;gap:20px 36px;align-items:center;margin-top:84px;padding:26px 0;border-top:1.5px dashed var(--sd-line);border-bottom:1.5px dashed var(--sd-line)}
.aut-plans-title{margin-top:6px!important;font-size:20px;font-weight:800;letter-spacing:-.02em;line-height:1.2;color:var(--sd-ink)!important}
.aut-plans-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 28px}
.aut-plans-row p{margin-top:8px;font-size:14px;line-height:1.5}

/* 04 Ideas into content: the real Ideas screen, pinned on the mat */
.aut-ideas{padding:112px 0 120px}
.aut-ideas-head{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:24px 48px;align-items:end}
.aut-ideas-head h2{margin-top:22px;font-size:clamp(32px,3.6vw,50px)}
.aut-ideas-head .sd-lead{margin-bottom:16px}
.aut-shot{max-width:1060px;margin:64px auto 0}
.aut-shot-frame{background:#fff}
.aut-shot-bar{display:flex;align-items:center;gap:12px;padding:10px 16px;border-bottom:1.5px solid var(--sd-line);font-size:12.5px;font-weight:800}
.aut-shot-bar span{display:inline-flex;align-items:center;gap:8px}
.aut-shot-bar i{width:8px;height:8px;border-radius:50%;background:#2b9a66}
.aut-shot-bar em{margin-left:auto;font-style:normal;font-weight:700;color:var(--sd-ink-faint)}
.aut-shot img{width:100%;height:auto}
.aut-pin{position:absolute;z-index:3;padding:11px 13px 10px;background:#f8e27a;border-radius:3px 3px 12px 3px;box-shadow:var(--sd-print);font:800 14px/1.2 var(--sd-font);color:var(--sd-ink);letter-spacing:-.01em;pointer-events:none}
.aut-pin--a{top:30%;left:-26px;transform:rotate(-4deg)}
.aut-pin--b{bottom:24%;right:-26px;transform:rotate(3deg)}
.aut-shot figcaption{margin-top:28px;text-align:center;font-size:13.5px;font-weight:700;color:var(--sd-ink-faint)}
.aut-shot figcaption b{color:var(--sd-ink)}

/* Responsive */
@media (max-width:1160px){
  .aut-app-body{grid-template-columns:minmax(0,1fr) minmax(0,1.15fr)}
  .aut-canvas-wrap{border-right:0}
  .aut-out{grid-column:1/-1;border-top:1.5px solid var(--sd-line)}
  .aut-out-wait{padding:22px}
}
@media (max-width:1024px){
  .aut-hero-head,.aut-builder-head,.aut-ideas-head{grid-template-columns:minmax(0,1fr);gap:18px}
  .aut-hero h1{margin-bottom:6px}
  .aut-builder{margin-top:72px}
  .aut-plans{grid-template-columns:minmax(0,1fr)}
  .aut-card:nth-child(2){margin-top:0}
}
@media (max-width:760px){
  .aut-app-body{grid-template-columns:minmax(0,1fr)}
  .aut-canvas-wrap{border-left:0;border-top:1.5px solid var(--sd-line)}
  .aut-steps{gap:6px}
  .aut-steps button{justify-content:center;padding:8px 4px}
  .aut-steps .lbl{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .aut-step-now{display:block}
  .aut-plans-row{grid-template-columns:minmax(0,1fr)}
  .aut-pin{display:none}
}
@media (max-width:620px){
  .aut-hero{padding:34px 0 76px}
  .aut-hero h1{font-size:10.4vw;margin-top:18px}
  .hero-actions .sd-btn{flex:1 1 auto}
  .aut-builder{margin-top:60px;padding:28px 16px 20px}
  .aut-note{width:148px;right:12px;top:-30px;font-size:13px;padding:10px 11px 9px}
  .aut-app-bar{flex-wrap:wrap;padding:10px 12px}
  .aut-chat{padding:16px 12px}
  .aut-canvas.flow-canvas{padding:16px 12px 18px}
  .aut-out-ready{padding:14px 12px}
  .aut-reel{width:118px}
  .aut-how,.aut-ideas{padding:80px 0 76px}
  .aut-cards{margin-top:44px;gap:44px}
  .aut-card{padding:28px 18px 22px}
  .aut-plans{margin-top:56px}
  .aut-shot{margin-top:44px}
}
@media (max-width:360px){
  .aut-note{display:none}
  .seg span{padding:6px 8px}
  .aut-reel{width:104px}
  .aut-out-list li{font-size:12.5px;padding:6px 7px}
}
@media (prefers-reduced-motion:reduce){
  .aut-builder[data-step="4"] #autReview{animation:none}
}

/* Look 2 ("studio lights"): the builder stays a light card under the hero's spotlight */
.opt2 .aut-hero{--spot-x:50%;--spot-y:74%}
.opt2 .aut-plan-line{color:var(--sd-on-night-soft)!important}
.opt2 .aut-builder{box-shadow:0 34px 70px -34px rgba(0,0,0,.9),var(--sd-night-print)}
.opt2 .aut-builder .sd-tab{border-color:var(--sd-ink);box-shadow:var(--sd-print)}
.opt2 .aut-builder .sd-tab b{background:var(--sd-ink);color:var(--sd-canvas)}
.opt2 .aut-builder .sd-btn{border-color:var(--sd-ink);box-shadow:2px 2px 0 var(--sd-ink)}
.opt2 .aut-builder .label-sm{color:var(--sd-ink-faint)}
.opt2 .aut-builder .aut-status small{color:var(--sd-ink-faint)}
/* The dark "Keep the final say" card */
.opt2 .aut-say.sd-night legend{color:var(--sd-on-night)}
.opt2 .aut-say.sd-night fieldset{border-bottom-color:var(--sd-night-line)}
.opt2 .aut-say .seg{background:transparent;border-color:rgba(255,253,247,.6)}
.opt2 .aut-say .seg span{color:var(--sd-on-night)}
.opt2 .aut-say .seg input:checked+span{background:var(--sd-gold);color:var(--sd-night)}
.opt2 .aut-say .seg input:focus-visible+span{outline-color:var(--sd-on-night)}
/* The Ideas screen on its own lit stage */
.opt2 .aut-shot.sd-night{--spot-x:50%;--spot-y:45%;padding:48px 48px 30px;border-radius:22px}
.opt2 .aut-shot .aut-shot-frame{border-color:rgba(255,253,247,.7);box-shadow:0 30px 60px -30px rgba(0,0,0,.85)}
.opt2 .aut-shot figcaption{color:var(--sd-on-night-faint)}
.opt2 .aut-shot figcaption b{color:var(--sd-on-night)}
@media (max-width:620px){
  .opt2 .aut-shot.sd-night{padding:26px 14px 20px;border-radius:16px}
}

/* Growth-only example (26 Sep repack): three outputs; the third spans the row */
.aut-three>div:last-child{grid-column:1/-1}