.brand-process-trigger{box-sizing:border-box;display:block;width:100%;margin:16px 0 0;padding:8px 8px 2px;border:0;border-radius:18px;background:#f0efec;color:#172b33;text-align:left;font:600 15px/1.4 Arial,sans-serif;cursor:pointer;transition:transform 120ms cubic-bezier(.23,1,.32,1)}
.brand-process-trigger[hidden]{display:none}
.brand-process-trigger__cover{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;width:100%}
.brand-process-trigger__stage{position:relative;display:block;min-width:0;width:100%;aspect-ratio:4/3;max-height:130px;overflow:hidden;border-radius:10px;background:#e6e5e1}
.brand-process-trigger .brand-process-trigger__stage img{position:absolute;top:0;left:0;display:block;width:300%;max-width:none;height:100%;object-fit:cover;pointer-events:none}
.brand-process-trigger .brand-process-trigger__stage--1 img{left:-100%}
.brand-process-trigger .brand-process-trigger__stage--2 img{left:-200%}
.brand-process-trigger__play{position:absolute;inset:0;display:grid;place-items:center;margin:auto;width:44px;height:44px;border-radius:50%;background:#fff;color:#164a4b;pointer-events:none}
.brand-process-trigger__play svg{width:26px;height:26px;fill:currentColor}
.brand-process-trigger__label{position:absolute;bottom:5px;left:5px;padding:2px 5px;border-radius:3px;background:#172b33cf;color:#fff;font:500 11px/1.3 Arial,sans-serif;pointer-events:none}
.brand-process-trigger__text{box-sizing:border-box;display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:34px;padding:6px 2px}
.brand-process-trigger__duration{flex-shrink:0;white-space:nowrap;color:#59636a;font-size:13px;font-weight:400}
.brand-process-trigger__duration>span{margin-left:3px}
.brand-process-trigger:active:not(:focus-visible){transform:scale(.99)}
@media(hover:hover) and (pointer:fine){.brand-process-trigger__stage{transition:transform 180ms cubic-bezier(.23,1,.32,1)}.brand-process-trigger__stage:hover{transform:translateY(-3px)}}
@media(prefers-reduced-motion:reduce){.brand-process-trigger,.brand-process-trigger__stage{transition:none}.brand-process-trigger:active:not(:focus-visible),.brand-process-trigger__stage:hover{transform:none}}
.brand-process-trigger:focus-visible,.brand-process-video__header button:focus-visible{outline:2px solid #245a70;outline-offset:3px}
.brand-process-video{box-sizing:border-box;width:min(420px,calc((100dvh - 88px)*.5625));max-width:calc(100vw - 24px);max-height:calc(100dvh - 24px);padding:0;border:0;border-radius:12px;overflow:hidden;background:#fff;color:#172b33;box-shadow:0 18px 70px #0005;font:14px/1.4 Arial,sans-serif}
.brand-process-video::backdrop{background:#000b}
.brand-process-video__header{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:52px;padding:0 8px 0 14px}
.brand-process-video__header button{display:grid;place-items:center;flex:0 0 44px;width:44px;height:44px;padding:10px;border:0;border-radius:6px;background:transparent;color:inherit;cursor:pointer}
.brand-process-video__header svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
.brand-process-video video{display:block;width:100%;height:auto;aspect-ratio:9/16;object-fit:contain;background:#000}
.brand-process-video__error{margin:0;padding:12px 16px}
@media(max-width:767px){.brand-process-trigger{margin-top:12px;padding:6px 6px 2px;border-radius:16px;font-size:14px}.brand-process-trigger__cover{gap:8px}.brand-process-trigger__stage{max-height:84px}.brand-process-trigger__play{width:34px;height:34px}.brand-process-trigger__play svg{width:22px;height:22px}}
@media(max-width:360px){.brand-process-trigger{font-size:13px}.brand-process-trigger__text{gap:6px}.brand-process-trigger__duration{font-size:12px}.brand-process-trigger__play{width:28px;height:28px;bottom:10px}.brand-process-trigger__label{bottom:4px;left:4px;padding:2px 4px}}
