.theme-blue{--blue:#2457d6;--pale:#f1f4fb;--hover:#1c48b6;--dark-label:#b4c6f7}
.theme-purple{--blue:#655df5;--pale:#f3f2fb;--hover:#554ced;--dark-label:#c8c4ff}
.theme-purple .btn:hover{background:var(--hover)}
.theme-purple .btn-white:hover{background:#eceff4}
.theme-purple .workflow .eyebrow,.theme-purple .step-label{color:var(--dark-label)}
.theme-purple a:focus-visible,.theme-purple button:focus-visible,.theme-purple input:focus-visible,.theme-purple summary:focus-visible{outline-color:var(--blue)}
.variant-switch{color:var(--blue)}
.guide-visual{min-width:0}
.guide-viewport{position:relative;width:100%;aspect-ratio:1.05;overflow:hidden;background:#f4f5f6}
.guide-viewport .guide-tour-image{position:absolute;top:0;left:0;width:100%;max-height:none;height:auto;max-width:none;object-fit:fill;transform-origin:0 0;animation:guide-tour 24s ease-in-out infinite}
@keyframes guide-tour{
0%,14%,100%{transform:translate(0,0) scale(1)}
30%,44%{transform:translate(-12%,-32%) scale(1.45)}
60%,79%{transform:translate(-13%,-52%) scale(1.45)}
93%{transform:translate(0,0) scale(1)}
}
.guide-viewport.is-paused .guide-tour-image{animation-play-state:paused}
.tour-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 13px;border-top:1px solid var(--line);background:#fff;font-size:8px;letter-spacing:.7px;color:#7b8493}
.tour-toggle{border:1px solid var(--line);color:var(--ink);background:#fff;font-size:10px;padding:6px 9px;min-height:30px;border-radius:3px;cursor:pointer;white-space:nowrap}
.guide-visual .visual-foot{flex-wrap:wrap;font-size:9px;gap:6px}
.guide-visual .visual-foot a{color:var(--blue);margin-left:auto}
@media(max-width:1100px){.header nav{gap:14px}.header nav a{font-size:11px}.nav-row{gap:20px}}
@media(max-width:850px){.header nav a{font-size:15px}.guide-viewport .guide-tour-image{max-height:none;height:auto}.guide-visual{width:100%;max-width:620px}}
@media(prefers-reduced-motion:reduce){.guide-viewport .guide-tour-image{animation:none;transform:translate(-10%,-24%) scale(1.2)}}

/* Five-second workflow */
.sequence-stage{position:relative;width:100%;aspect-ratio:1.15;background:#f5f6fa;overflow:hidden}
.sequence-panel{position:absolute;inset:0;opacity:0;visibility:hidden;animation-duration:var(--sequence-duration);animation-timing-function:linear;animation-iteration-count:infinite;background:#fff}
.source-panel{display:flex;align-items:stretch;animation-name:show-source}
.source-picture{width:43%;background:#20242e;overflow:hidden}
.guide-visual .source-picture img{width:100%;height:100%;max-height:none;object-fit:cover;object-position:center}
.source-description{flex:1;padding:40px 20px 20px;align-self:center}
.sequence-number{font-size:8px;letter-spacing:1.3px;font-weight:700;color:var(--blue)}
.source-description h3{font-size:25px;line-height:1.12;letter-spacing:-.7px;margin:18px 0}
.source-description p{font-size:11px;color:var(--muted);line-height:1.7}
.sequence-arrow{font-size:38px;color:var(--blue);font-weight:300}
.plan-panel{animation-name:show-plan}
.sequence-label{padding:16px 20px 13px;background:#fff;border-bottom:1px solid var(--line);position:relative;z-index:1}
.sequence-label h3{font-size:21px;line-height:1.2;margin:7px 0 0;letter-spacing:-.5px}
.plan-picture{position:absolute;top:102px;bottom:0;left:0;right:0;overflow:hidden;background:#f4f5f6}
.guide-visual .plan-picture img{position:absolute;width:124%;max-width:none;height:auto;max-height:none;left:-17%;top:-65%;animation:plan-drift var(--sequence-duration) linear infinite}
.capcut-panel{animation-name:show-capcut;background:#151515}
.capcut-panel .sequence-label{background:#191b20;border-bottom:1px solid #393c44}
.capcut-panel .sequence-number{color:#d7dce8}
.capcut-panel h3{color:#fff}
.capcut-picture{position:absolute;top:85px;left:0;right:0;bottom:31px;overflow:hidden;display:flex;align-items:center}
.capcut-picture img{width:100%;height:auto;max-height:none;animation:capcut-drift var(--sequence-duration) linear infinite}
.capcut-caption{position:absolute;bottom:0;left:0;right:0;padding:8px 13px;background:#191b20;color:#b7c0cf;font-size:9px;margin:0}
@keyframes show-source{0%,20%{opacity:1;visibility:visible}23%,97%{opacity:0;visibility:hidden}100%{opacity:1;visibility:visible}}
@keyframes show-plan{0%,20%{opacity:0;visibility:hidden}23%,54%{opacity:1;visibility:visible}57%,100%{opacity:0;visibility:hidden}}
@keyframes show-capcut{0%,54%{opacity:0;visibility:hidden}57%,96%{opacity:1;visibility:visible}100%{opacity:0;visibility:hidden}}
@keyframes plan-drift{0%,20%{transform:translateY(0)}54%,100%{transform:translateY(-4%)}}
@keyframes capcut-drift{0%,54%{transform:scale(1)}96%,100%{transform:scale(1.035)}}
.sequence-progress{width:70px;height:3px;background:#e5e8f0;overflow:hidden}
.sequence-progress i{display:block;width:100%;height:100%;background:var(--blue);transform-origin:left;animation:sequence-progress var(--sequence-duration) linear infinite}
@keyframes sequence-progress{0%{transform:scaleX(0)}100%{transform:scaleX(1)}}
.sequence-window.is-paused *{animation-play-state:paused!important}
.tour-toolbar{letter-spacing:.5px}
@media(max-width:580px){.sequence-label{padding:14px 15px 11px}.sequence-label h3{font-size:18px}.sequence-number{font-size:7px;letter-spacing:.8px}.source-description{padding:23px 13px}.source-description h3{font-size:21px;margin:13px 0}.source-description p{font-size:10px}.plan-picture{top:91px}.capcut-picture{top:75px;bottom:29px}.capcut-caption{font-size:8px}.tour-toolbar{gap:7px}.sequence-progress{width:40px}}
@media(prefers-reduced-motion:reduce){.sequence-panel,.plan-picture img,.capcut-picture img,.sequence-progress i{animation:none!important}.sequence-panel{opacity:0;visibility:hidden}.capcut-panel{opacity:1;visibility:visible}.sequence-progress i{transform:scaleX(1)}}

/* Clean frame and responsive presentation */
:root{--sequence-duration:8s}
.guide-visual .sequence-window{border:1px solid #dce1eb;border-radius:18px;box-shadow:0 16px 44px #17294e0c;overflow:hidden}
.sequence-stage{aspect-ratio:1.15}
.guide-visual>.tour-toolbar{border:0;background:transparent;padding:12px 0 8px;display:flex;flex-wrap:wrap;gap:10px 14px;position:relative}
.tour-toolbar .tour-toggle{min-height:44px;padding:9px 13px;font-size:12px;border-radius:8px;background:#ffffffa0}
.sequence-choices{display:flex;align-items:center;gap:4px;flex:1;white-space:nowrap}
.sequence-choices button{font:inherit;font-size:11px;font-weight:600;letter-spacing:0;min-height:44px;padding:7px 5px;background:transparent;border:0;border-radius:5px;color:var(--muted);cursor:pointer}
.sequence-choices button:hover,.sequence-choices button[aria-pressed="true"]{color:var(--blue);background:#ffffff80}
.sequence-choices>span{font-size:10px;color:#a2a9b7}
.sequence-progress{width:100%;height:2px;order:3}
.guide-visual .visual-foot{font-size:9px;line-height:1.8;padding-top:6px}
.sequence-label{border:0;padding:20px 22px 14px}
.sequence-number{font-size:9px}
.capcut-mobile{display:none}
.guide-visual.is-paused *{animation-play-state:paused!important}
.sequence-stage[data-static] .sequence-panel{animation:none!important;opacity:0;visibility:hidden}
.sequence-stage[data-static="0"] .source-panel,.sequence-stage[data-static="1"] .plan-panel,.sequence-stage[data-static="2"] .capcut-panel{opacity:1;visibility:visible}
@media(max-width:850px){
 .hero-grid{gap:30px}
 .hero-visual.guide-visual{max-width:620px;width:100%}
 .hero-copy .offer{margin-bottom:18px}
 .mini-flow{padding-top:15px}
}
@media(max-width:580px){
 .hero{padding:32px 0 36px}
 .hero-grid{gap:26px}
 .hero-sub{font-size:17px;margin-bottom:22px}
 .hero-actions{gap:15px}
 .hero-actions .btn{min-height:48px}
 .hero-actions .text-link{font-size:12px}
 .guide-visual .sequence-window{border-radius:14px}
 .sequence-stage{aspect-ratio:1}
 .source-picture{width:51%}
 .source-description{padding:18px 13px}
 .source-description .sequence-number{font-size:10px;letter-spacing:.8px}
 .source-description .sequence-number{font-size:0}
 .source-description .sequence-number:after{content:'REFERENCE';font-size:10px}
 .source-description h3{font-size:22px;margin:13px 0}
 .source-description p,.sequence-arrow{display:none}
 .sequence-label{padding:15px 17px 12px;min-height:54px}
 .sequence-label .sequence-number{display:none}
 .sequence-label h3{font-size:20px;margin:0;line-height:1.3}
 .plan-panel .sequence-label h3{font-size:0}
 .plan-panel .sequence-label h3:after{content:'Your production plan';font-size:20px}
 .plan-picture{top:54px}
 .guide-visual .plan-picture img{width:145%;left:-25%;top:-55%;animation:none}
 .capcut-panel .sequence-label h3{font-size:20px}
 .capcut-picture,.capcut-caption{display:none}
 .capcut-mobile{display:flex;gap:15px;position:absolute;top:63px;left:14px;right:14px;bottom:14px;align-items:center}
 .capcut-mobile-preview{position:relative;overflow:hidden;width:51%;aspect-ratio:211/375;background:#262626;border-radius:4px}
 .guide-visual .capcut-mobile-preview img{position:absolute;width:771.6%;max-width:none;height:auto;max-height:none;left:-344.5%;top:-22.4%}
 .capcut-mobile-details{flex:1;min-width:0}
 .capcut-mobile-details>span{font-size:8px;letter-spacing:1px;color:#b9c2d4}
 .capcut-mobile-timeline{position:relative;overflow:hidden;width:100%;aspect-ratio:470/296;margin-top:11px;border:1px solid #414754;border-radius:4px}
 .guide-visual .capcut-mobile-timeline img{position:absolute;width:346.4%;max-width:none;height:auto;max-height:none;left:-41.1%;top:-219.6%}
 .capcut-mobile-details p{font-size:13px;line-height:1.5;color:#d1d7e1;margin:12px 0 0}
 .sequence-choices{gap:2px}
 .sequence-choices button{font-size:11px;padding:6px 3px}
 .tour-toolbar .tour-toggle{min-height:44px;padding:7px 10px;font-size:11px}
 .guide-visual>.tour-toolbar{gap:6px 9px}
 .guide-visual .visual-foot{font-size:9px}
 .guide-visual .visual-foot a{margin-left:0;display:block}
}
@media(max-width:360px){.sequence-choices button{font-size:10px}.tour-toolbar .tour-toggle{font-size:10px;padding:7px}.source-description h3{font-size:19px}}
@media(prefers-reduced-motion:reduce){.sequence-stage[data-static] .sequence-panel{opacity:0;visibility:hidden}.sequence-stage[data-static="0"] .source-panel,.sequence-stage[data-static="1"] .plan-panel,.sequence-stage[data-static="2"] .capcut-panel{opacity:1;visibility:visible}}

@media(max-width:850px){.guide-visual .source-picture img{height:100%;max-height:none;object-fit:cover}.guide-visual .plan-picture img,.guide-visual .capcut-mobile-preview img,.guide-visual .capcut-mobile-timeline img{object-fit:fill;object-position:top;max-height:none}}