/* Large, sequential product screenshots on the AI Tools page. */
.studio #workflow{--sp:48px;padding-top:0}
.studio .workflow-steps{display:grid;gap:40px;margin-top:32px}
.studio .workflow-step{min-width:0}
.studio .workflow-step h3{font-size:clamp(22px,2.8vw,30px);line-height:1.15;letter-spacing:-.025em;display:flex;align-items:center;gap:12px}
.studio .step-number{color:var(--electric);font-size:16px;letter-spacing:.06em}
.studio .workflow-step p{font:500 clamp(16px,1.8vw,18px)/1.5 var(--body);color:var(--navy);margin:12px 0 20px;max-width:66ch}
.studio .workflow-step img{display:block;width:100%;height:auto;border:1px solid rgba(5,49,122,.16);border-radius:18px;box-shadow:0 10px 28px rgba(5,49,122,.08)}
@media(max-width:719px){.studio .workflow-steps{gap:32px}.studio .workflow-step img{border-radius:12px}}

/* Product workspace replaces the trailer in this page's hero only. */
.studio .hero .wrap{grid-template-columns:minmax(0,1fr);gap:32px}
.studio .hero .wrap>div:first-child{max-width:880px}
.studio .hero h1{font-size:clamp(42px,5.8vw,76px);max-width:18ch;text-wrap:balance}
.studio .hero .sub{max-width:64ch}
.studio .tools-hero-preview{width:100%;border:1px solid rgba(5,49,122,.2);border-radius:20px;overflow:hidden;box-shadow:0 16px 40px rgba(5,49,122,.18);background:var(--white)}
.studio .tools-hero-preview img{display:block;width:100%;height:auto}
@media(max-width:719px){.studio .tools-hero-preview{border-radius:12px}.studio .hero .wrap{gap:24px}}

/* Compact text hero leads straight into the product demonstration. */
.studio .hero{padding-bottom:40px}
.studio #create{padding-top:40px}
.studio #create .tools-hero-preview{margin:28px 0}
@media(max-width:719px){.studio .hero{padding-bottom:28px}.studio #create{padding-top:28px}}

/* Pricing details and useful next steps form one compact reading flow. */
.studio #pricing{padding-bottom:28px}
.studio #pricing .sub2,.studio #pricing .pnote{max-width:none;white-space:normal;text-wrap:wrap}
.studio #pricing .pnote{margin-top:24px;line-height:1.6}
.studio #learn{padding-top:28px;padding-bottom:48px}
.studio #learn h2{font-size:clamp(28px,3.5vw,40px);line-height:1.1}
.studio #create .loop{counter-reset:create-step;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin:24px 0}
.studio #create .loop li{counter-increment:create-step;display:flex;flex-direction:column;gap:12px;align-items:flex-start;justify-content:center;min-height:104px;padding:18px;border-radius:16px;border:1px solid rgba(5,49,122,.16);background:#eef7ff;font-size:16px;line-height:1.25;white-space:normal}
.studio #create .loop li::before{content:"0" counter(create-step);font:700 12px/1 var(--body);letter-spacing:.08em;color:var(--link)}
.studio #create .loop li::after{content:none}
.studio #create .loop li:last-child{background:var(--green)}
.studio #create .pnote{max-width:none;margin-top:0}
@media(max-width:719px){.studio #create .loop{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.studio #create .loop li{min-height:96px;padding:16px;font-size:15px}}

/* Explain script upload with a lightweight document-to-dropzone animation. */
.studio .script-upload-demo{position:relative;isolation:isolate;overflow:hidden;border-radius:18px}
.studio .upload-drop-target{position:absolute;left:26.3%;top:18.7%;width:47.5%;height:21.5%;border:2px dashed #4095ff;border-radius:12px;background:rgba(64,149,255,.07);opacity:0;animation:upload-target 6s ease-in-out infinite;pointer-events:none}
.studio .upload-document{position:absolute;left:46%;top:16%;width:10%;aspect-ratio:3/4;display:flex;flex-direction:column;justify-content:center;gap:9%;padding:1.4%;border:1px solid #b8d4fa;border-radius:8px;background:#fff;box-shadow:0 12px 26px rgba(5,49,122,.2);color:var(--ink);animation:upload-document 6s ease-in-out infinite;pointer-events:none;will-change:transform,opacity}
.studio .upload-document b{font:700 clamp(7px,1.1vw,14px)/1 var(--body);letter-spacing:.08em;margin-bottom:6%}
.studio .document-line{display:block;width:100%;height:3px;border-radius:2px;background:#b7cff1}
.studio .document-line.short{width:64%}
.studio .document-fold{position:absolute;right:0;top:0;width:24%;aspect-ratio:1;background:linear-gradient(45deg,#deedff 49%,#fff 50%);border-bottom-left-radius:4px}
@keyframes upload-document{
 0%,8%{opacity:0;transform:translate(110%,-45%) rotate(12deg) scale(1)}
 18%{opacity:1;transform:translate(90%,-35%) rotate(10deg) scale(1)}
 44%,55%{opacity:1;transform:translate(0,0) rotate(-3deg) scale(1)}
 68%{opacity:0;transform:translate(0,22%) rotate(0) scale(.65)}
 100%{opacity:0;transform:translate(0,22%) rotate(0) scale(.65)}
}
@keyframes upload-target{0%,20%{opacity:0}36%,62%{opacity:1}78%,100%{opacity:0}}
@media(max-width:719px){.studio .script-upload-demo{border-radius:12px}.studio .upload-document{border-radius:5px;box-shadow:0 5px 12px rgba(5,49,122,.18)}.studio .document-line{height:2px}.studio .upload-drop-target{border-width:1px;border-radius:6px}}
@media(prefers-reduced-motion:reduce){.studio .upload-document{animation:none;opacity:1;transform:rotate(-3deg)}.studio .upload-drop-target{animation:none;opacity:.6}}

/* French hero: use the full text column instead of an English-sized measure. */
html[lang="fr"] .studio .hero .wrap>div:first-child{max-width:none}
html[lang="fr"] .studio .hero h1{max-width:none;font-size:clamp(40px,4.4vw,64px);line-height:1.02}
html[lang="fr"] .studio .hero .sub{max-width:none;font-size:clamp(18px,1.6vw,20px);text-wrap:pretty}
html[lang="fr"] .studio .upload-document b{font-size:clamp(5px,.9vw,12px)}