.ai-story{background:#FFFFFF;color:#22221e;padding:52px 0 52px}
.ai-story-intro{max-width:1240px;margin:0 auto 38px;text-align:center}.ai-story-intro .eyebrow{font-size:12px;margin:0 0 16px}.ai-story-intro h2{font-size:clamp(30px,3.3vw,46px);line-height:1.18;letter-spacing:-.035em;margin:0 0 20px}.ai-story-intro>p:last-child{font-size:18px;line-height:1.7;width:100%;max-width:760px;margin:0 auto;color:#62625c;text-wrap:balance}
.ai-story-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(48px,7vw,104px);align-items:start}.ai-story-visual{position:sticky;top:calc(76px + (100vh - 76px - 530px)/2);min-width:0;padding-top:12px}.story-stage{position:relative;height:470px;isolation:isolate}.story-visual-panel{position:absolute;inset:0;opacity:0;transform:translateY(16px) scale(.985);transition:opacity .45s ease,transform .6s ease;pointer-events:none}.story-visual-panel.is-active{opacity:1;transform:none;z-index:1}.story-progress{display:flex;justify-content:center;gap:7px;margin:20px 0 10px}.story-progress span{height:3px;width:24px;border-radius:3px;background:#e4e4df;transition:background .3s,width .3s}.story-progress span.is-active{background:#EF5E20;width:48px;color:#FFFFFF}.story-visual-note{text-align:center;font-size:10px;color:#76766e;margin:0}
.ai-story-step{min-height:510px;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;padding:64px 0;scroll-margin-top:120px;transition:opacity .4s}.ai-story.is-enhanced .ai-story-step:not(.is-active){opacity:.48}.ai-story.is-enhanced .ai-story-step:focus-within{opacity:1}.story-step-label{font-size:12px;font-weight:500;letter-spacing:.04em;margin:0 0 20px;display:flex;align-items:center;gap:12px}.story-step-label>span{font-size:12px;border:1px solid #dcdcd7;width:30px;height:30px;display:grid;place-items:center;border-radius:50%;letter-spacing:0}.is-active>.story-step-label>span{border-color:#EF5E20;background:#EF5E20;color:#FFFFFF}.ai-story-step h3{font-size:clamp(30px,3.1vw,44px);line-height:1.15;letter-spacing:-.035em;margin:0 0 22px}.story-description{font-size:18px;line-height:1.7;margin:0 0 26px;color:#55554f}.story-link{font-size:16px;font-weight:500;color:#22221e;display:inline-flex;align-items:center;gap:14px;text-decoration:none;border-bottom:1px solid #a7a7a0;padding-bottom:5px}.story-link:hover{border-color:#22221e}.story-link:focus-visible{outline:2px solid #22221e;outline-offset:6px}
.story-prompt{position:absolute;z-index:3;top:12px;inset-inline-start:0;display:flex;align-items:center;gap:12px;padding:17px 20px;background:#22221e;color:#fff;border-radius:14px;font-size:13px;line-height:1.6;box-shadow:0 14px 28px #00000010;max-width:95%}.story-prompt .ui-icon{color:#EF5E20;width:22px;height:22px}.story-email{position:absolute;top:78px;inset-inline-start:13%;width:74%;background:white;border:1px solid #deded8;border-radius:14px;overflow:hidden;box-shadow:0 18px 40px #22221e0d;transform:rotate(-2deg)}.story-windowbar{display:flex;gap:8px;align-items:center;padding:12px 16px;font-size:11px;font-weight:500;border-bottom:1px solid #ecece8}.story-windowbar>span{margin-inline-start:auto;font-size:10px;color:#666}.story-languages{display:flex;font-size:10px;justify-content:space-around;padding:10px;border-bottom:1px solid #ecece8}.story-languages b{font-weight:500;border-bottom:2px solid #EF5E20;padding-bottom:3px}.story-email-design{position:relative;background:#f6f6f3;padding:20px;min-height:280px;overflow:hidden}.story-email-design small{font-size:8px;letter-spacing:1px}.story-email-design h4{font-size:28px;line-height:1.05;letter-spacing:-1px;position:relative;z-index:2;margin:16px 0}.story-email-design img{position:absolute;inset-inline-end:0;bottom:0;width:53%;height:220px;object-fit:cover;mix-blend-mode:multiply}.story-email-cta{display:inline-block;background:#EF5E20;color:#FFFFFF;padding:9px 10px;font-size:9px;position:relative;z-index:2;margin-top:30px}.story-float{position:absolute;bottom:0;inset-inline-end:0;z-index:4;background:#fff;border:1px solid #deded8;padding:14px 18px;border-radius:12px;font-size:12px;display:flex;gap:10px;align-items:center;box-shadow:0 12px 30px #22221e0a}
.story-workflow{position:absolute;top:109px;inset-inline-start:12%;inset-inline-end:5%;display:grid;gap:14px}.story-flow-node{position:relative;display:flex;flex-direction:column;gap:4px;background:#fff;border:1px solid #deded8;border-radius:10px;padding:10px 18px;box-shadow:0 8px 18px #00000004}.story-flow-node:not(:last-child):after{content:'';position:absolute;width:1px;height:15px;background:#EF5E20;top:100%;inset-inline-start:30px;color:#FFFFFF}.story-flow-node small{font-size:8px;letter-spacing:1px;color:#65655e}.story-flow-node strong{font-size:13px;font-weight:500}.story-flow-node>span{font-size:10px;color:#66665e}.story-flow-node:first-child{border-inline-start:3px solid #EF5E20}.story-language-chips i{font-style:normal;margin-inline:12px}
.story-creative-label{font-size:10px;letter-spacing:1px;position:absolute;top:10px;inset-inline-start:8%}.story-photo{position:absolute;border:8px solid white;border-radius:12px;box-shadow:0 12px 36px #22221e18;overflow:hidden}.story-photo img{width:100%;height:100%;object-fit:cover}.story-photo-back{width:48%;height:300px;top:60px;inset-inline-start:4%;transform:rotate(-9deg)}.story-photo-front{width:53%;height:315px;top:98px;inset-inline-end:3%;transform:rotate(7deg)}.story-photo-front>span{position:absolute;bottom:16px;inset-inline-start:10px;inset-inline-end:10px;font-size:22px;font-weight:500;line-height:1.1;color:#FFFFFF;background:#EF5E20;padding:12px}.story-creative-tools{position:absolute;top:40px;inset-inline-end:0;display:flex;gap:6px;z-index:4}.story-creative-tools>span{font-size:9px;border:1px solid #ddd;background:white;padding:7px;border-radius:6px}.story-creative-prompt{top:auto;bottom:0;inset-inline-start:5%}
.story-assistants{position:absolute;top:30px;inset-inline-start:6%;inset-inline-end:6%;display:flex;justify-content:center;gap:12px}.story-assistants span{padding:12px 18px;border:1px solid #deded8;border-radius:10px;font-size:13px;background:white}.story-assistant-card{position:absolute;top:108px;inset-inline-start:4%;inset-inline-end:4%;border:1px solid #deded8;border-radius:16px;overflow:hidden;background:white;box-shadow:0 18px 38px #22221e0c}.story-query{margin:20px 18px 20px 50px;padding:15px;background:#f2f2ef;font-size:14px;line-height:1.5;border-radius:12px 12px 0 12px}.story-answer{display:flex;gap:12px;margin:0 20px}.story-answer>.ui-icon{margin-top:5px}.story-answer p{font-size:13px;line-height:1.7;margin:0}.story-tool-list{display:flex;flex-wrap:wrap;gap:6px;padding:18px}.story-tool-list span{padding:5px 8px;border:1px solid #deded8;border-radius:6px;font-size:9px}.story-confirmation{background:#22221e;color:white;font-size:11px;padding:14px 20px;border-inline-start:4px solid #EF5E20}.story-mobile-visual{display:none}
@media(max-width:900px),(max-height:650px){.ai-story-layout{display:block}.ai-story-visual{display:none}.ai-story-step{min-height:0;padding:28px 0 44px;max-width:600px;margin:auto}.story-mobile-visual{display:block;position:relative;height:470px;width:100%;margin:0 0 32px}.ai-story.is-enhanced .ai-story-step:not(.is-active){opacity:1}.ai-story-intro{margin-bottom:12px}.ai-story{padding:28px 0 20px}}
@media(max-width:480px){.story-mobile-visual{height:440px}.story-prompt{font-size:11px;padding:14px}.story-email{width:82%;inset-inline-start:9%;top:90px}.story-email-design{min-height:245px}.story-email-design h4{font-size:24px}.story-email-design img{height:185px}.story-float{font-size:10px;padding:12px}.story-assistants{gap:6px;inset-inline-start:0;inset-inline-end:0}.story-assistants span{padding:10px 12px;font-size:12px}.story-assistant-card{top:100px;inset-inline-start:0;inset-inline-end:0}.story-photo-back{height:260px}.story-photo-front{height:280px}.story-description{font-size:17px}.story-step-label{font-size:10px}.story-workflow{top:108px;inset-inline-start:4%;inset-inline-end:0}.story-flow-node{padding:8px 14px}.story-photo-front>span{font-size:18px}}
@media(prefers-reduced-motion:reduce){.ai-story *{transition:none!important;animation:none!important}}

@media(max-width:1100px){.ai-story-intro>p:last-child{font-size:clamp(16px,4vw,18px);line-height:1.6}}

@media(max-width:700px){.ai-story-intro>p:last-child{width:calc(100% - 16px);max-width:36ch}}

/* Same editor and template as the hero demo, scaled as a complete product view. */
.story-real-editor{position:absolute;top:92px;inset-inline-start:0;width:100%;aspect-ratio:680/460;container-type:inline-size;overflow:hidden;border:1px solid #e5e5e5;border-radius:14px;background:#fff;box-shadow:0 16px 40px #22221e12}
.story-real-editor>.faithful-editor{width:680px;height:460px;transform:scale(var(--story-editor-scale,1));transform-origin:top left;animation:none;grid-template-columns:minmax(0,70fr) minmax(0,30fr);font-size:8px}
.story-real-editor .faithful-inspector{display:block}
.story-real-editor .faithful-template{width:82%;max-width:365px}
.story-real-editor .faithful-message h3{font-size:24px}
.story-real-editor .faithful-message p{font-size:10px}
.story-real-editor .faithful-tabs{font-size:8px}
.story-real-editor .faithful-meta{font-size:8px}
@media(max-width:480px){.story-mobile-visual:has(.story-real-editor){height:auto;aspect-ratio:1/1.05}.story-real-editor{top:92px}.story-mobile-visual:has(.story-real-editor) .story-float{bottom:0}}

/* Highlight the multilingual campaign result. */
.story-visual-panel[data-story-panel="0"] .story-float{background:#EF5E20;border-color:#EF5E20;color:#fff}

/* Separate the result from the editor with a clear 16px gap. */
.ai-story-visual,.story-mobile-visual{container-type:inline-size;--story-editor-top:104px}
.story-stage:has([data-story-panel="0"]),.story-mobile-visual:has([data-story-panel="0"]){min-height:calc(var(--story-editor-top) + 67.647059cqw + 76px)}
.story-visual-panel[data-story-panel="0"] .story-float{top:calc(var(--story-editor-top) + 67.647059cqw + 16px);bottom:auto;transform:none}

/* Reveal each card on scroll, staggered by one sixth of a second. */
@media(prefers-reduced-motion:no-preference){
 .ai-story.has-scroll-reveal .story-reveal-layer{
  opacity:0;
  translate:0 18px;
  animation:none;
  transition:opacity .55s ease var(--story-reveal-delay,0s),translate .55s cubic-bezier(.2,.65,.3,1) var(--story-reveal-delay,0s);
 }
 .ai-story.has-scroll-reveal .story-reveal-layer.is-revealed{
  opacity:1;
  translate:0 0;
 }
}


/* Separate cards, restoring the original prompt scale. */
.story-visual-panel[data-story-panel="0"]>.story-real-editor{top:var(--story-editor-top)}
.story-visual-panel[data-story-panel="0"]>.story-prompt{
 top:calc(var(--story-editor-top) - 16px);
 inset-inline-start:0;
 transform:translateY(-100%);
 padding:17px 20px;
 gap:12px;
 font-size:13px;
 line-height:1.6;
 border-radius:14px;
}
.story-visual-panel[data-story-panel="0"]>.story-prompt .ui-icon{width:22px;height:22px;flex:none}
@media(max-width:480px){
 .story-visual-panel[data-story-panel="0"]>.story-prompt{padding:14px;font-size:11px}
}


/* Reuse the Automations page illustration, with the same request card above it. */
.story-automation-art{position:absolute;top:104px;inset-inline-start:0;width:100%}
.story-automation-art>svg{display:block;width:100%;height:auto;overflow:visible;font-family:Poppins,sans-serif;color:#23231f;fill:#23231f}
.story-stage:has(.story-automation-art){min-height:calc(120px + 93.918919cqw)}
.story-mobile-visual:has(.story-automation-art){height:auto;aspect-ratio:740/850;min-height:0}
.story-visual-panel[data-story-panel="1"]>.story-prompt,.story-mobile-visual:has(.story-automation-art)>.story-prompt{top:12px;inset-inline-start:0}

/* Desktop: the first automation step sits beside the request, not below it. */
.story-visual-panel[data-story-panel="1"]>.story-automation-art{top:12px}
.story-stage:has(.story-automation-art){min-height:calc(28px + 93.918919cqw)}
@media(max-width:1199px){
 .story-visual-panel[data-story-panel="1"]>.story-automation-art{top:104px}
 .story-stage:has(.story-automation-art){min-height:calc(120px + 93.918919cqw)}
}

/* A separated collage of template design capabilities. */
.story-creative-collage{display:grid;grid-template-columns:1fr 1fr;gap:16px;padding-top:12px;font-size:12px;line-height:1.5}
.creative-request{grid-column:1/-1;justify-self:start;display:flex;align-items:center;gap:12px;background:#22221e;color:#fff;border-radius:14px;padding:18px 20px;box-shadow:0 12px 28px #22221e0d;font-size:13px}
.creative-request>.ui-icon{color:#EF5E20;width:22px;height:22px;flex:none}
.creative-card{background:#fff;border:1px solid #eeece8;border-radius:18px;box-shadow:0 10px 24px #22221e0b;overflow:hidden;min-width:0}
.creative-card-heading{display:flex;align-items:center;gap:8px;font-size:11px;font-weight:500;padding:14px 16px}
.creative-status{margin-inline-start:auto;font-size:9px;color:#a84318;background:#fff0e6;border-radius:12px;padding:3px 7px;white-space:nowrap}
.creative-template{grid-row:2/4}
.creative-email-preview{margin:0 12px;padding:20px 16px 16px;background:#edf8ff;text-align:center;border-radius:8px;color:#17334a}
.creative-brand{font-size:7px;letter-spacing:2px}
.creative-email-preview h4{font-size:34px;line-height:1.03;letter-spacing:-1.5px;margin:12px 0 9px;font-weight:600}
.creative-email-preview p{font-size:9px;line-height:1.6;margin:0 0 14px}
.creative-design-art{height:91px;position:relative;overflow:hidden;background:#95e6d1;border-radius:5px;text-align:start;padding:14px;color:#17334a}
.creative-design-art span{position:relative;z-index:2;font-size:14px;font-weight:600;line-height:1.1;display:block}
.creative-design-art i{position:absolute;width:85px;height:120px;background:#5368ee;border-radius:60px;inset-inline-end:-5px;top:13px;rotate:35deg}
.creative-design-art b{position:absolute;width:43px;height:88px;border:1px solid #edf8ff;border-radius:40px;inset-inline-end:30px;top:27px;rotate:35deg}
.creative-preview-cta{display:block;background:#17334a;color:white;border-radius:5px;padding:9px 4px;font-size:9px;margin-top:12px}
.creative-preview-footer{display:flex;justify-content:space-between;gap:6px;padding:12px 15px;font-size:8px;color:#75756f}
.creative-palette{align-self:start}
.creative-swatches{display:flex;gap:8px;padding:0 16px 15px}
.creative-swatches i{height:32px;flex:1;border-radius:50%;background:#17334a;max-width:32px}
.creative-swatches i:nth-child(2){background:#5368ee}.creative-swatches i:nth-child(3){background:#95e6d1}.creative-swatches i:nth-child(4){background:#edf8ff;border:1px solid #d7e9f5}
.creative-palette-action{display:flex;align-items:center;justify-content:center;gap:5px;margin:0 12px;padding:9px 4px;border-radius:7px;background:#fff2e9;color:#a4441b;font-size:9px;white-space:nowrap}
.creative-palette-action .ui-icon{width:13px;height:13px}
.creative-card>p{display:flex;align-items:center;gap:6px;font-size:9px;color:#74746d;margin:12px 14px}.creative-card>p .ui-icon{width:12px;height:12px;color:#EF5E20;flex:none}
.creative-canva-name{font-size:20px;font-style:italic;font-family:Georgia,serif;letter-spacing:-1px;color:#287f89}.creative-canva .creative-card-heading{justify-content:space-between;padding-block:10px}.creative-canva .creative-card-heading>span:last-child{font-size:9px;color:#777}
.creative-canva-designs{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:0 12px}
.creative-canva-designs>div{height:101px;overflow:hidden;position:relative;border-radius:5px;background:#95e6d1;padding:11px;font-size:13px;line-height:1.05;font-weight:600;color:#17334a}
.creative-canva-designs>div:nth-child(2){background:#edf8ff;color:#3047b8}.creative-canva-designs span{position:relative;z-index:1}.creative-canva-designs i{position:absolute;border-radius:50%;width:90px;height:90px;background:#edf8ff;bottom:-50px;inset-inline-end:-10px}.creative-canva-designs>div:nth-child(2) i{background:#5368ee;bottom:-45px;inset-inline-end:-35px;width:120px;height:120px}
.creative-toolbox{grid-column:1/-1}.creative-toolbox .creative-card-heading{padding-bottom:10px}
.creative-tools-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:6px;padding:0 12px 14px}.creative-tools-grid>span{display:flex;align-items:center;flex-direction:column;gap:6px;font-size:8px;color:#65655e;white-space:nowrap}.creative-tools-grid b{display:grid;place-items:center;background:#f7f6f3;color:#17334a;border-radius:9px;width:34px;height:30px;font-size:15px;font-weight:400}
.story-mobile-visual:has(.story-creative-collage){height:auto}
@media(max-width:1100px) and (min-width:901px){.story-creative-collage{gap:10px}.creative-palette-action{font-size:8px;gap:3px}.creative-card-heading{padding-inline:12px}.creative-email-preview{padding-inline:10px}}
@media(max-width:480px){.story-creative-collage{gap:10px}.creative-request{font-size:11px;padding:15px 14px}.creative-card-heading{font-size:9px;padding:12px 10px}.creative-status{font-size:7px;padding:2px 4px}.creative-email-preview{margin:0 7px;padding:16px 8px 12px}.creative-email-preview h4{font-size:29px}.creative-palette-action{flex-wrap:wrap;font-size:8px;white-space:normal;margin:0 8px}.creative-swatches{padding:0 10px 12px;gap:5px}.creative-swatches i{height:25px}.creative-card>p{font-size:8px;margin:10px}.creative-canva-designs{padding:0 8px;gap:5px}.creative-canva-designs>div{padding:8px;font-size:10px;height:98px}.creative-tools-grid{grid-template-columns:repeat(3,1fr);row-gap:12px}.creative-preview-footer{padding-inline:8px;font-size:7px}.creative-canva .creative-card-heading{gap:4px}.creative-canva .creative-card-heading>span:last-child{font-size:8px}}

/* Official Canva icon and explicit account connection, within the illustration. */
.creative-canva .creative-card-heading{justify-content:flex-start;gap:10px;padding:12px 16px}
.creative-canva-logo{width:32px;height:32px;flex:none;margin:0 8px 0 0}
.creative-canva .creative-card-heading>.creative-canva-heading:last-child{font-size:12px;line-height:1.4;color:#22221e;font-weight:500}
@media(max-width:480px){.creative-canva .creative-card-heading{padding:12px 10px;gap:4px}.creative-canva .creative-card-heading>.creative-canva-heading:last-child{font-size:10px}.creative-canva-logo{width:28px;height:28px}}

/* Consistent palette-card spacing and clearly separated application options. */
.creative-palette{align-self:stretch;display:flex;flex-direction:column;padding:16px;gap:14px}
.creative-palette .creative-card-heading{padding:0;font-size:12px;line-height:1.4}
.creative-palette .creative-swatches{padding:0;gap:10px;align-items:center}
.creative-palette .creative-swatches i{flex:0 0 32px;width:32px;height:32px;box-sizing:border-box}
.creative-palette .creative-palette-action{display:grid;grid-template-columns:1fr auto 1.55fr;gap:7px;margin:0;padding:0;background:none;white-space:normal;font-size:10px;line-height:1.4}
.creative-palette-action>.creative-palette-option{display:flex;align-items:center;justify-content:center;gap:5px;min-height:34px;padding:7px 5px;border-radius:8px;background:#fff2e9;color:#a4441b;font-size:10px;text-align:center;font-weight:500}
.creative-palette-action>.creative-palette-or{align-self:center;color:#787872;font-size:10px}
.creative-palette .creative-palette-action .ui-icon{flex:none;width:14px;height:14px}
.creative-palette>p{margin:0;margin-top:auto;gap:7px;color:#62625d;font-size:10px;line-height:1.5;align-items:flex-start}
.creative-palette>p .ui-icon{margin-top:2px;width:13px;height:13px}
@media(max-width:1100px) and (min-width:901px), (max-width:480px){
 .creative-palette{padding:12px;gap:12px}
 .creative-palette .creative-card-heading{font-size:11px}
 .creative-palette .creative-swatches{gap:7px}
 .creative-palette .creative-swatches i{flex-basis:25px;width:25px;height:25px}
 .creative-palette .creative-palette-action{grid-template-columns:1fr;gap:4px}
 .creative-palette-action>.creative-palette-or{text-align:center;font-size:9px;line-height:1}
 .creative-palette-action>.creative-palette-option{min-height:28px;padding:5px}
 .creative-palette>p{font-size:9px}
}

/* Match Canva's spacing and text hierarchy to the palette card. */
.creative-canva{padding:16px;display:flex;flex-direction:column;gap:14px}
.creative-canva .creative-card-heading{padding:0;gap:12px;min-height:40px}
.creative-canva-logo{margin:0;flex:0 0 32px;width:32px;height:32px}
.creative-canva .creative-card-heading>.creative-canva-heading:last-child{font-size:12px;line-height:1.45;font-weight:500}
.creative-canva .creative-canva-designs{padding:0;gap:10px}
.creative-canva .creative-canva-designs>div{height:104px;padding:12px;border-radius:8px;font-size:12px;line-height:1.15;letter-spacing:-.15px}
.creative-canva-designs>div:nth-child(2) i{width:95px;height:95px;bottom:-43px;inset-inline-end:-25px}
.creative-canva>p{padding:0;margin:0;gap:7px;font-size:10px;line-height:1.5;color:#62625d;align-items:flex-start}
.creative-canva>p .ui-icon{width:13px;height:13px;margin-top:2px}
@media(max-width:1100px) and (min-width:901px), (max-width:480px){
 .creative-canva{padding:12px;gap:12px}
 .creative-canva .creative-card-heading{gap:8px}
 .creative-canva .creative-card-heading>.creative-canva-heading:last-child{font-size:10px}
 .creative-canva .creative-canva-designs{gap:6px}
 .creative-canva .creative-canva-designs>div{height:100px;padding:8px 6px;font-size:9px;line-height:1.2;letter-spacing:0}
 .creative-canva>p{font-size:9px}
}

/* Canva previews: complete miniature layouts with clear, balanced typography. */
.creative-canva .creative-canva-designs>div{height:124px;padding:12px 10px;border-radius:9px;display:flex;flex-direction:column;align-items:flex-start;gap:7px}
.creative-canva-designs small{position:relative;z-index:1;font-size:6px;letter-spacing:.6px;line-height:1.4;font-weight:500;white-space:nowrap}
.creative-canva .creative-canva-designs>div>span{font-size:15px;font-weight:600;line-height:1.12;letter-spacing:-.45px}
.creative-canva .creative-canva-designs>div>i{width:66px;height:22px;border-radius:20px;inset-inline-end:10px;bottom:12px;background:#edf8ff;transform:rotate(-12deg)}
.creative-canva .creative-canva-designs>div:nth-child(2)>i{width:66px;height:22px;background:#5368ee;inset-inline-end:10px;bottom:12px;transform:rotate(12deg)}
.creative-canva>p{align-items:center}
.creative-canva>p .ui-icon{margin-top:0}
@media(max-width:1100px) and (min-width:901px), (max-width:480px){
 .creative-canva .creative-canva-designs>div{height:108px;padding:9px 6px;gap:7px}
 .creative-canva-designs small{font-size:4px;letter-spacing:.15px}
 .creative-canva .creative-canva-designs>div>span{font-size:10px;line-height:1.2;letter-spacing:-.2px}
 .creative-canva .creative-canva-designs>div>i,.creative-canva .creative-canva-designs>div:nth-child(2)>i{width:40px;height:17px;inset-inline-end:6px;bottom:12px}
 .creative-canva>p{align-items:flex-start}.creative-canva>p .ui-icon{margin-top:2px}
}

/* Keep a clean inset below the template without decorative device labels. */
.creative-template{padding-bottom:12px}

/* AI connections: logos and a compact conversation aligned to its supporting copy. */
.story-visual-panel[data-story-panel="3"]{top:var(--assistant-top,12px);bottom:auto}
.story-visual-panel[data-story-panel="3"].is-active{pointer-events:auto}
.story-ai-conversation{width:100%;padding:0 0 12px}
.story-ai-logos{display:flex;align-items:center;justify-content:center;gap:30px;min-height:32px;margin:0 0 22px}
.story-ai-logos>span{display:flex;align-items:center;gap:8px;font-size:17px;font-weight:500;letter-spacing:-.4px}
.story-ai-logos img{object-fit:contain;flex:none;display:block}
.story-chat-card{border:1px solid #e6e5df;border-radius:18px;background:#fff;overflow:hidden;box-shadow:0 18px 40px #22221e0c}
.story-chat-heading{display:flex;align-items:center;gap:9px;padding:16px 18px;border-bottom:1px solid #ecece7;font-size:11px}
.story-chat-heading small{margin-inline-start:auto;font-size:9px;color:#7b7b73}
.story-chat-scene{padding:22px 20px;min-height:248px}
.story-chat-context{color:#8a5a3d;font-size:9px;font-weight:500;letter-spacing:.8px;margin:0 0 16px}
.story-chat-question{margin-inline-start:28px;background:#f4f4f1;border-radius:13px 13px 3px 13px;padding:14px 16px;font-size:14px;line-height:1.6;min-height:72px;display:flex;align-items:center}
.story-chat-reply{display:flex;align-items:flex-start;gap:12px;margin:20px 0 17px}.story-chat-reply>.ui-icon{color:#EF5E20;width:19px;height:19px;flex:none;margin-top:2px}.story-chat-reply p{font-size:13px;line-height:1.65;margin:0;min-height:43px}
.story-chat-result{display:flex;gap:8px;align-items:center;margin-inline-start:31px;color:#8c411e;font-size:11px;line-height:1.5}.story-chat-result .ui-icon{flex:none;width:14px;height:14px}
.story-chat-bottom{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 16px;border-top:1px solid #ecece7;background:#fafaf8;font-size:10px;color:#66665e;min-height:49px}
.story-chat-controls{display:flex;align-items:center;gap:6px}.story-chat-controls button{display:grid;place-items:center;width:30px;height:30px;border:0;border-radius:7px;background:transparent;color:#22221e;cursor:pointer}.story-chat-controls button[hidden]{display:none}.story-chat-controls button:hover{background:#fff0e5}.story-chat-controls button:focus-visible{outline:2px solid #EF5E20;outline-offset:2px}.story-chat-controls .ui-icon{width:15px;height:15px}
.story-mobile-visual:has(.story-ai-conversation){height:auto}
@media(max-width:1100px){.story-ai-logos{gap:20px}.story-ai-logos>span{font-size:15px}.story-ai-logos>img{width:88px}.story-chat-question{font-size:13px}}
@media(max-width:480px){.story-ai-logos{gap:18px;margin-bottom:18px;justify-content:space-between}.story-ai-logos>span{font-size:13px;gap:5px}.story-ai-logos>img{width:75px;height:23px}.story-ai-logos>span img{width:25px;height:25px}.story-chat-heading{padding:14px 12px;font-size:10px;gap:7px}.story-chat-heading small{font-size:8px}.story-chat-scene{padding:18px 14px;min-height:285px}.story-chat-question{margin-inline-start:18px;font-size:12px;min-height:86px;padding:12px}.story-chat-reply p{font-size:12px;min-height:60px}.story-chat-result{font-size:10px}.story-chat-bottom{padding:9px 12px;font-size:9px}}

/* Natural wrapping without letting the prompt overlap its adjacent flow node. */
.story-visual-panel[data-story-panel="0"]>.story-prompt{max-width:285px}
.story-visual-panel[data-story-panel="1"]>.story-prompt{max-width:46%}
.story-mobile-visual>.story-prompt{max-width:min(95%,285px)}
.story-prompt>span:last-child{text-wrap:balance}

/* Align assistant brands with the conversation card. */
.story-ai-conversation .story-ai-logos{justify-content:flex-start}

/* AI replies appear together, with the same processing indicator as the hero. */
.story-chat-reply.is-processing>.ui-icon{
 background:transparent;mask:none;-webkit-mask:none;
 border:1.5px solid #e4e4e4;border-top-color:#EF5E20;border-radius:50%;
 animation:story-chat-processing .85s linear infinite;
}
.story-ai-conversation.is-paused .story-chat-reply.is-processing>.ui-icon{animation-play-state:paused}
@keyframes story-chat-processing{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.story-chat-reply.is-processing>.ui-icon{animation:none}}

/* A subtle text link from the illustrative AI response to the MCP examples. */
.story-chat-result{display:inline-flex;justify-content:flex-start;max-width:calc(100% - 31px);padding:0;border:0;border-radius:0;background:transparent;color:#EF5E20;font-size:12px;font-weight:500;text-decoration:none;gap:10px;transition:color .2s}
.story-chat-result .ui-icon{order:2}
.story-chat-result:hover{color:#b94312;text-decoration:underline;text-underline-offset:4px}
.story-chat-result:focus-visible{outline:2px solid #22221e;outline-offset:4px}
@media(max-width:480px){.story-chat-result{font-size:11px}}