/* The editing handoff, from a recording to Claude to an agency reel. */
.method .section-heading{align-items:flex-end;margin-bottom:46px}
.method .section-heading>p{max-width:300px;color:var(--muted)}
.edit-workflow{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.15fr) minmax(0,.9fr);gap:clamp(30px,5vw,90px)}
.workflow-stage{min-width:0;position:relative;text-align:center}
.workflow-step{display:flex;align-items:baseline;justify-content:center;gap:10px;min-height:38px}
.workflow-number{font-size:11px;color:var(--red);font-variant-numeric:tabular-nums}
.workflow-step h3{font-size:clamp(18px,1.8vw,26px);line-height:1.35;letter-spacing:-.02em}
.workflow-scene{height:365px;display:flex;align-items:center;justify-content:center;width:100%;position:relative}
.workflow-caption{font-size:13px;line-height:1.55;color:var(--muted);text-wrap:balance}
.recording-phone{height:310px;width:174px;border:6px solid #222221;border-radius:28px;padding:3px;background:#222221;box-shadow:0 12px 28px #00000013;transform:rotate(-4deg);position:relative}
.recording-phone:before{content:"";position:absolute;width:37px;height:7px;background:#222221;inset:0 auto auto 50%;transform:translateX(-50%);border-radius:0 0 8px 8px;z-index:2}
.recording-screen{height:100%;border-radius:20px;background:#d9d5c9;overflow:hidden;position:relative;direction:ltr;background-image:linear-gradient(#ffffff20 1px,transparent 1px),linear-gradient(90deg,#ffffff20 1px,transparent 1px);background-size:52px 91px}
.recording-meta{position:absolute;inset:17px 11px auto;display:flex;justify-content:space-between;align-items:center;font:600 8px/1 PolySans,Arial,sans-serif;color:#232322;z-index:2}
.recording-meta>span:first-child{display:flex;align-items:center;gap:4px}.recording-meta i{height:5px;width:5px;background:var(--red);border-radius:50%}
.capture-person{position:absolute;inset:25px 0 auto;width:100%;height:241px}
.capture-focus{position:absolute;inset:75px 37px 110px;border:1px solid #ffffff8c;border-radius:5px}
.capture-focus:before,.capture-focus:after{content:"";position:absolute;width:14px;height:14px;border-color:var(--red);border-style:solid}
.capture-focus:before{inset:-2px auto auto -2px;border-width:2px 0 0 2px}.capture-focus:after{inset:auto -2px -2px auto;border-width:0 2px 2px 0}
.recording-shutter{position:absolute;bottom:14px;inset-inline-start:50%;transform:translateX(-50%);width:30px;height:30px;border:1px solid #eeeeecb3;border-radius:50%;display:grid;place-items:center}
.recording-shutter span{width:21px;height:21px;background:var(--red);border-radius:50%}
.capture-wave{position:absolute;bottom:56px;left:0;right:0;height:18px;display:flex;gap:3px;align-items:center;justify-content:center}
.capture-wave i{height:6px;width:2px;background:#eeeeec;border-radius:2px}.capture-wave i:nth-child(3n){height:16px}.capture-wave i:nth-child(3n+1){height:10px}
.claude-workbench{width:100%;max-width:360px;min-height:318px;background:#faf9f5;border:1px solid #d2d0c8;border-radius:14px;padding:19px;box-shadow:0 12px 28px #00000008;position:relative}
.workflow-appbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:22px;direction:ltr}
.workflow-appbar>img{width:100px;height:27px;object-fit:contain}.workflow-appbar>span{font:24px/1 Arial,sans-serif;color:#88867d;letter-spacing:3px}
.workflow-upload{display:flex;align-items:center;gap:10px;padding:11px;border:1px solid #e0ded6;border-radius:7px;background:white;text-align:start}
.upload-play{display:grid;place-items:center;width:28px;height:32px;border:1px solid #e4e0d6;border-radius:4px;background:#f3f0e9;flex-shrink:0;color:#9b7460;font-size:21px}
.workflow-upload strong,.workflow-upload small{display:block;font-size:10px;line-height:1.5;font-weight:400}.workflow-upload small{font-size:8px;color:#88867e;margin-top:2px}.upload-check{margin-inline-start:auto;font-size:12px;color:#7a8c6d}
.workflow-engine{display:flex;align-items:center;justify-content:center;height:103px;position:relative;gap:14px}
.workflow-engine img{width:83px;height:83px;object-fit:contain}
.engine-line{width:27px;height:1px;background:#d9c5b7;position:relative}.engine-line:after{content:"";width:4px;height:4px;position:absolute;top:-1.5px;inset-inline-end:0;background:#d57c58;border-radius:50%}
.workflow-inputs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.workflow-input{display:flex;align-items:center;justify-content:center;flex-direction:column;gap:5px;min-height:65px;border:1px solid #e1d8cc;background:#f3efe6;border-radius:7px;color:#5f4e40}
.workflow-input svg{width:23px;height:23px}.workflow-input>span{font-size:10px;line-height:1.4}
.workflow-edit-label{display:flex;align-items:center;justify-content:center;gap:6px;margin-top:15px;font-size:8px;color:#827869;line-height:1.4}.workflow-edit-label .live-dot{width:4px;height:4px;background:#d57c58}
.workflow-connector{position:absolute;inset-inline-end:calc(clamp(30px,5vw,90px)*-1 - 12px);top:207px;width:calc(clamp(30px,5vw,90px) + 24px);height:1px;background:#c5c4bd;z-index:2;pointer-events:none}
.workflow-connector b{position:absolute;inset-inline-end:-2px;top:-11px;font-size:20px;line-height:1;font-weight:400;color:#88877e;background:var(--paper);padding-inline-start:3px}
.workflow-connector i{display:block;width:5px;height:5px;border-radius:50%;background:var(--red);position:absolute;inset-inline-start:0;top:-2px;opacity:0}
.edit-workflow .result-reel{width:186px;border:1px solid #09090922;box-shadow:0 12px 28px #00000013}
.edit-workflow .method-result figcaption{margin-top:0}.workflow-example{display:block;font-size:7px;line-height:1.5;letter-spacing:.06em;color:#898981;margin-top:8px}
.motion .edit-workflow.is-visible .capture-wave i{animation:workflow-wave 1s ease-in-out infinite alternate}.motion .edit-workflow.is-visible .capture-wave i:nth-child(2n){animation-delay:.3s}.motion .edit-workflow.is-visible .capture-wave i:nth-child(3n){animation-delay:.6s}
.motion .edit-workflow.is-visible .workflow-connector i{animation:workflow-transfer 6s ease-in-out infinite}
.motion .edit-workflow.is-visible .workflow-claude .workflow-connector i{animation-delay:2.9s}
.motion .edit-workflow.is-visible .workflow-engine img{animation:workflow-think 6s ease-in-out infinite}
.motion .edit-workflow.is-visible .workflow-input{animation:workflow-gather 6s ease-in-out infinite}.motion .edit-workflow.is-visible .workflow-input-tools{animation-delay:.2s}.motion .edit-workflow.is-visible .workflow-input-assets{animation-delay:.4s}
.page-hidden .edit-workflow *{animation-play-state:paused!important}
@keyframes workflow-wave{to{transform:scaleY(.4);opacity:.55}}
@keyframes workflow-transfer{0%,10%{opacity:0;inset-inline-start:0}15%{opacity:1}37%{opacity:1;inset-inline-start:calc(100% - 12px)}40%,100%{opacity:0;inset-inline-start:calc(100% - 12px)}}
@keyframes workflow-think{0%,25%,75%,100%{transform:translateY(0)}40%,60%{transform:translateY(-5px)}}
@keyframes workflow-gather{0%,20%,75%,100%{transform:translateY(0);border-color:#e1d8cc}40%,60%{transform:translateY(-4px);border-color:#c98260}}
html[lang="ar"] .workflow-step h3{font-size:clamp(20px,1.9vw,28px);line-height:1.6;font-weight:700}
html[lang="ar"] .workflow-number{font-size:14px}html[lang="ar"] .workflow-caption{font-size:16px;line-height:1.8}
html[lang="ar"] .workflow-upload strong{font-size:13px}html[lang="ar"] .workflow-upload small{font-size:11px}
html[lang="ar"] .workflow-input>span{font-size:13px}html[lang="ar"] .workflow-edit-label{font-size:11px}html[lang="ar"] .workflow-example{font-size:11px}
html[lang="ar"] .workflow-connector b{transform:scaleX(-1)}
@media(max-width:1050px) and (min-width:761px){.edit-workflow{gap:25px;grid-template-columns:minmax(0,.85fr) minmax(0,1.2fr) minmax(0,.85fr)}.workflow-step{gap:7px}.workflow-step h3{font-size:18px}.workflow-connector{width:32px;inset-inline-end:-29px}.recording-phone{width:155px;height:282px}.capture-person{height:216px;top:23px}.edit-workflow .result-reel{width:165px}.claude-workbench{padding:13px}.workflow-upload{padding:8px;gap:7px}.workflow-inputs{gap:5px}.workflow-caption{font-size:12px}html[lang="ar"] .workflow-step h3{font-size:20px}}
@media(max-width:760px){
 .method .section-heading{align-items:flex-start;margin-bottom:35px}.method .section-heading>p{max-width:340px}
 .edit-workflow{grid-template-columns:minmax(0,1fr);gap:42px;max-width:460px;margin-inline:auto}
 .workflow-step{min-height:0;justify-content:flex-start;gap:10px;margin-bottom:16px}.workflow-step h3{font-size:23px}
 .workflow-scene{height:auto;min-height:0}.workflow-caption{font-size:13px;text-align:start}
 .workflow-capture{display:grid;grid-template-columns:100px minmax(0,1fr);column-gap:24px;align-items:center}
 .workflow-capture .workflow-step{grid-column:2;grid-row:1;display:block;align-self:end;margin-bottom:9px}.workflow-capture .workflow-number{display:block;margin-bottom:9px}.workflow-capture .workflow-step h3{font-size:23px}
 .workflow-capture .workflow-scene{grid-column:1;grid-row:1/3}.workflow-capture>.workflow-caption{grid-column:2;grid-row:2;align-self:start;max-width:180px}
 .recording-phone{width:95px;height:170px;border-width:4px;padding:1px;border-radius:17px;transform:rotate(-4deg)}.recording-screen{border-radius:12px;background-size:29px 50px}.recording-phone:before{width:23px;height:4px}.recording-meta{inset:10px 6px auto;font-size:5px}.recording-meta i{height:3px;width:3px}.recording-meta>span:first-child{gap:2px}
 .capture-person{inset:14px 0 auto;height:136px}.capture-focus{inset:42px 20px 60px}.capture-focus:before,.capture-focus:after{width:8px;height:8px}.recording-shutter{width:19px;height:19px;bottom:7px}.recording-shutter span{width:13px;height:13px}.capture-wave{bottom:31px;gap:2px;height:11px}.capture-wave i{width:1px;height:4px}.capture-wave i:nth-child(3n){height:10px}.capture-wave i:nth-child(3n+1){height:7px}
 .claude-workbench{max-width:none;padding:18px 20px;min-height:0}.workflow-appbar{margin-bottom:17px}.workflow-upload strong{font-size:11px}.workflow-upload small{font-size:9px}.workflow-engine{height:96px}.workflow-inputs{gap:9px}.workflow-input{min-height:64px}.workflow-input>span{font-size:11px}.workflow-edit-label{font-size:9px;margin-top:14px}
 .workflow-claude>.workflow-caption{margin-top:13px}.workflow-connector{top:auto;bottom:-28px;inset-inline-end:50%;width:1px;height:19px}.workflow-connector b{font-size:17px;top:6px;inset-inline-end:-9px;transform:rotate(90deg);padding:0;background:none}.workflow-connector i{display:none}
 .workflow-finish{display:grid;grid-template-columns:100px minmax(0,1fr);column-gap:24px;align-items:center}.workflow-finish .workflow-step{grid-column:2;grid-row:1;align-self:end;display:block;margin-bottom:9px}.workflow-finish .workflow-number{display:block;margin-bottom:9px}.workflow-finish .method-result{display:contents}.workflow-finish .workflow-scene{grid-column:1;grid-row:1/3}.workflow-finish .method-result figcaption{grid-column:2;grid-row:2;align-self:start;text-align:start}.workflow-example{font-size:6px;max-width:170px}.edit-workflow .result-reel{width:99px;border-radius:8px}.edit-workflow .result-control{width:23px;height:23px;font-size:9px;right:5px;bottom:5px}
 html[lang="ar"] .workflow-step h3,html[lang="ar"] .workflow-capture .workflow-step h3{font-size:23px;line-height:1.6}html[lang="ar"] .workflow-caption{font-size:15px}html[lang="ar"] .workflow-number{font-size:12px}html[lang="ar"] .workflow-example{font-size:10px}html[lang="ar"] .workflow-connector b{transform:rotate(90deg)}
}
@media(max-width:380px){.workflow-capture,.workflow-finish{column-gap:18px;grid-template-columns:90px minmax(0,1fr)}.recording-phone{width:86px;height:155px}.capture-person{height:122px}.edit-workflow .result-reel{width:88px}.workflow-step h3,.workflow-capture .workflow-step h3{font-size:20px}.claude-workbench{padding:15px}.workflow-inputs{gap:6px}.workflow-upload strong{font-size:10px}.workflow-upload small{font-size:8px}.workflow-caption{font-size:12px}html[lang="ar"] .workflow-step h3,html[lang="ar"] .workflow-capture .workflow-step h3{font-size:20px}html[lang="ar"] .workflow-caption{font-size:14px}}