/* SEOR creative demonstration: one source, its film, and the actual app. */
.header{background:#f7f7fa;height:72px}
.creative-hero{isolation:isolate;position:relative;overflow:hidden;background:#f7f7fa;padding:34px 0 34px}
.creative-hero:before{content:"";position:absolute;z-index:-1;left:0;right:0;top:200px;bottom:0;background:radial-gradient(ellipse at 15% 60%,#f2c8ae99,transparent 45%),radial-gradient(ellipse at 85% 65%,#bbcaf3a3,transparent 48%),linear-gradient(180deg,#f7f7fa00,#e9e9f180 65%,#f7f7fa)}
.creative-intro{text-align:center}
.creative-intro h1{font-size:clamp(46px,4.8vw,70px);font-weight:600;line-height:1.04;letter-spacing:-.04em;color:#18191e}
.zh .creative-intro h1{font-size:clamp(42px,4.2vw,62px);line-height:1.13;letter-spacing:-.035em}
.creative-description{font-size:16px;line-height:1.6;color:#565967;margin:18px auto 0;max-width:650px}
.creative-actions{display:flex;align-items:center;justify-content:center;gap:26px;margin-top:22px}
.creative-actions .button{background:#3155e7;color:#fff;padding:13px 23px;min-height:46px;font-size:13px;gap:16px}
.creative-actions .button:hover{background:#2240bb}
.creative-actions .button svg{width:17px;height:17px}
.creative-watch{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:6px 0;font-size:13px;font-weight:600}
.creative-watch svg{width:16px;height:16px}
.creative-stage{display:grid;grid-template-columns:190px 64px 254px 230px;align-items:start;justify-content:center;gap:28px;margin-top:34px;position:relative}
.proof-label{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:12px;font-weight:600;margin-bottom:12px;color:#303440}
.proof-label>span+span{color:#646978;font-size:12px;font-weight:400}
.input-proof{margin-top:62px;width:190px}
.input-photo{display:block;position:relative;padding:7px;width:100%;background:white;border-radius:12px;box-shadow:0 20px 50px #644a3420;transform:rotate(-4deg);transition:transform .25s ease,opacity .18s}
.input-photo:hover{transform:rotate(-2deg);opacity:1}
.input-photo>img{width:100%;height:auto;aspect-ratio:9/16;object-fit:contain;border-radius:6px}
.proof-expand{position:absolute;bottom:16px;right:15px;display:grid;place-items:center;width:29px;height:29px;border-radius:50%;background:#0009;color:white}
.proof-expand svg{width:15px;height:15px}
.creative-stage figcaption{font-size:12px;line-height:1.5;color:#525968;margin-top:17px;text-align:center}
.creative-connector{align-self:center;color:#717887;display:flex;justify-content:center;margin-top:-20px}
.creative-connector svg{width:44px;height:44px;stroke-width:1}
.output-proof{position:relative;width:254px}
.creative-player{width:100%;aspect-ratio:9/16;border-radius:14px;overflow:hidden;position:relative;box-shadow:0 26px 50px #20203b2b;background:#15151d}
.creative-player video{width:100%;height:100%;object-fit:contain}
.creative-player .player-controls{bottom:14px;left:13px;right:13px}
.app-proof{margin-top:34px;margin-left:35px;width:195px}
.hero-app-screen{display:block;width:100%;padding:5px;background:#25252b;border-radius:25px;box-shadow:0 20px 45px #20253a26;overflow:hidden;transform:rotate(4deg);transition:transform .25s ease,opacity .18s}
.hero-app-screen:hover{transform:rotate(2deg);opacity:1}
.hero-app-screen img{width:100%;height:auto;border-radius:20px}
.app-proof-caption{display:flex;justify-content:center;align-items:center;gap:10px;margin-top:19px}
.app-proof-caption>img{border-radius:6px}
.app-proof-caption strong{display:block;font-size:13px;font-weight:700}
.app-proof-caption span{display:block;margin-top:3px;font-size:12px;color:#525968;line-height:1.5}
.creative-switcher{display:flex;align-items:center;justify-content:center;gap:8px;margin:28px auto 0;width:fit-content;padding:5px;background:#e4e6ec;border-radius:35px}
.example-option{display:flex;align-items:center;gap:9px;padding:6px 17px 6px 7px;border-radius:28px;font-size:12px;font-weight:600;min-height:46px;color:#535967}
.example-option img{width:32px;height:32px;border-radius:50%;object-fit:cover}
.example-option[aria-pressed=true]{background:#fff;color:#1c202b;box-shadow:0 3px 9px #1c243012}
.example-option:hover{background:#f4f5f8;opacity:1}
.example-option:focus-visible{outline-offset:2px}
@media(min-width:1500px){.creative-stage{grid-template-columns:215px 70px 280px 250px;gap:35px;margin-top:42px}.input-proof{width:215px}.output-proof{width:280px}.app-proof{width:215px;margin-left:35px}.creative-intro h1{font-size:70px}}
@media(max-width:1100px) and (min-width:801px){.creative-stage{grid-template-columns:170px 42px 235px 195px;gap:20px}.input-proof{width:170px}.output-proof{width:235px}.app-proof{width:175px;margin-left:20px}.creative-intro h1{font-size:56px}.zh .creative-intro h1{font-size:48px}}
@media(max-width:800px){.header{height:68px}.creative-hero{padding-top:28px}.creative-intro h1{font-size:49px}.zh .creative-intro h1{font-size:43px}.creative-stage{grid-template-columns:150px 28px 210px 170px;gap:15px;margin-top:34px}.input-proof{width:150px;margin-top:50px}.output-proof{width:210px}.app-proof{width:150px;margin-left:20px;margin-top:28px}.hero-app-screen{border-radius:21px;padding:4px}.hero-app-screen img{border-radius:17px}.creative-connector svg{width:27px}.creative-description{font-size:14px}.app-proof-caption{gap:6px}.app-proof-caption>img{width:22px;height:22px}.app-proof-caption span{font-size:12px}.nav nav.is-open{background:#f7f7fa}}
@media(max-width:650px){.creative-hero{padding-top:26px;padding-bottom:28px}.creative-intro h1{font-size:42px}.zh .creative-intro h1{font-size:38px}.creative-description{font-size:13px;max-width:300px;margin-top:15px}.creative-actions{gap:22px;margin-top:18px}.creative-actions .button{min-height:44px;padding:12px 18px;font-size:12px}.creative-watch{font-size:12px}.creative-stage{width:calc(100% - 44px);grid-template-columns:minmax(0,.72fr) 18px minmax(0,1fr);gap:10px;margin-top:30px;align-items:start}.input-proof{width:100%;margin-top:46px}.output-proof{width:100%;grid-column:3;grid-row:1 / 3}.creative-connector{grid-row:1;grid-column:2;align-self:start;margin-top:150px}.creative-connector svg{width:21px;height:21px}.input-photo{padding:5px;transform:rotate(-3deg);border-radius:9px}.input-photo>img{border-radius:4px}.creative-player{border-radius:11px}.creative-stage figcaption{margin-top:12px;font-size:12px}.proof-label{font-size:12px;margin-bottom:10px}.proof-label>span+span{display:none}.app-proof{grid-column:1 / 4;grid-row:3;width:100%;margin:22px 0 0;display:grid;grid-template-columns:95px 1fr;gap:0 20px;align-items:center;padding:18px 24px;background:#ffffffb3;border-radius:14px}.app-proof .proof-label{grid-column:2;grid-row:1;align-self:end;margin-bottom:10px;font-size:14px}.hero-app-screen{grid-column:1;grid-row:1 / 3;transform:rotate(0);width:95px;max-height:170px;border-radius:13px;padding:3px;overflow:hidden}.hero-app-screen img{border-radius:10px}.app-proof-caption{grid-column:2;grid-row:2;justify-content:flex-start;align-self:start;margin:0;gap:8px}.app-proof-caption span{font-size:12px}.creative-switcher{gap:0;margin-top:24px;max-width:calc(100% - 30px);padding:4px}.example-option{padding:6px 10px 6px 6px;gap:6px;font-size:12px}.example-option img{width:26px;height:26px}.creative-hero:before{top:220px}.creative-player .player-controls{left:8px;right:8px;bottom:9px}.creative-player .icon-button{width:30px;height:30px}.creative-player .icon-button svg{width:16px;height:16px}}
@media(max-width:360px){.creative-intro h1{font-size:36px}.zh .creative-intro h1{font-size:34px}.creative-stage{width:calc(100% - 36px);gap:8px}.creative-actions{gap:16px}.example-option{padding-right:7px}.example-option img{width:23px;height:23px}.app-proof{padding:16px;gap:0 15px}.creative-switcher{max-width:calc(100% - 16px)}}
@media(prefers-reduced-motion:reduce){.input-photo,.hero-app-screen{transform:none;transition:none}.input-photo:hover,.hero-app-screen:hover{transform:none}}
@media(min-width:801px){.creative-hero{padding-top:20px}.creative-intro h1{font-size:54px;line-height:1.08}.zh .creative-intro h1{font-size:50px;line-height:1.12}.creative-intro h1 br{display:none}.creative-description{margin-top:12px}.creative-actions{margin-top:16px}.creative-stage{grid-template-columns:185px 58px 240px 225px;gap:28px;margin-top:24px}.input-proof{width:185px;margin-top:44px}.output-proof{width:240px}.app-proof{width:190px;margin-top:20px;margin-left:35px}}
@media(min-width:1500px){.creative-hero{padding-top:30px}.creative-intro h1{font-size:65px}.zh .creative-intro h1{font-size:60px}.creative-stage{grid-template-columns:210px 64px 275px 245px;gap:34px;margin-top:34px}.input-proof{width:210px}.output-proof{width:275px}.app-proof{width:210px}}
@media(min-width:801px) and (max-width:1100px){.creative-intro h1{font-size:43px}.zh .creative-intro h1{font-size:41px}.creative-stage{grid-template-columns:165px 35px 225px 195px;gap:22px}.input-proof{width:165px}.output-proof{width:225px}.app-proof{width:175px;margin-left:20px}}
@media(max-width:650px){.app-proof{grid-template-columns:145px minmax(0,1fr);gap:0 18px;padding:20px 18px}.hero-app-screen{width:145px;max-height:none;border-radius:18px;padding:4px}.hero-app-screen img{border-radius:14px}.app-proof .proof-label{line-height:1.6;font-size:15px}.app-proof-caption{align-items:flex-start;flex-wrap:wrap;gap:10px}.app-proof-caption>img{width:25px;height:25px}.app-proof-caption strong{font-size:15px}.app-proof-caption span{margin-top:7px;line-height:1.7}}
@media(max-width:360px){.app-proof{grid-template-columns:140px minmax(0,1fr);gap:0 14px;padding:18px 14px}.hero-app-screen{width:140px}.app-proof .proof-label{font-size:14px}}

/* V13: the hero explains the process; the gallery shows the films. */
.creative-stage{grid-template-columns:180px 36px 200px 36px 260px;gap:28px;align-items:start;margin-top:32px}
.input-proof{width:180px;margin-top:56px}
.app-proof{width:200px;margin:24px 0 0}
.output-proof{width:260px}
.hero-app-screen{transform:none}
.hero-app-screen:hover{transform:translateY(-3px)}
.creative-connector{margin:0;align-self:center}
.creative-connector svg{width:32px;height:32px}
.proof-label{font-size:13px}
.creative-switcher{margin-top:28px}
.creative-hero{padding-bottom:48px}
.work{padding-top:96px;padding-bottom:96px}
.work .section-heading{margin-bottom:40px;align-items:end}
.work .section-heading>p{max-width:360px}
.work .case-grid{gap:32px;max-width:1080px;margin-inline:auto}
.work .case-art{padding:0;background:none;overflow:visible;border-radius:14px}
.work .case-video{border-radius:14px;max-height:none;aspect-ratio:9/16}
.work .case-video>img{object-fit:contain}
.work .case-video:hover{opacity:1}
.work .case-play{width:48px;height:48px;right:20px;bottom:20px;transition:transform .2s ease}
.work .case-video:hover .case-play{transform:scale(1.08)}
.work .case-play svg{width:20px;height:20px}
.work .duration{top:16px;right:16px}
.work .case-title{margin-top:20px}
.work .case h3{font-size:22px}
.work .case>p{font-size:13px;max-width:none;line-height:1.7;margin-top:4px}
.work .case-source{position:static;display:flex;align-items:center;gap:12px;width:fit-content;padding:8px 0;margin-top:12px;background:transparent;box-shadow:none;transform:none;border-radius:0;min-height:52px;text-align:left;color:#525968}
.work .case-source img{width:32px;height:40px;object-fit:contain;background:#ebe9e5;border-radius:4px}
.work .case-source>span{font-size:12px;padding:0;font-weight:500;text-decoration:underline;text-underline-offset:4px}
.work .credits{max-width:1080px;margin:36px auto 0;padding-top:20px;border-top:1px solid #d9dadd}
@media(min-width:1500px){.creative-stage{grid-template-columns:200px 44px 220px 44px 280px;gap:32px}.input-proof{width:200px}.app-proof{width:220px}.output-proof{width:280px}}
@media(min-width:701px) and (max-width:1100px){.creative-stage{grid-template-columns:140px 24px 165px 24px 220px;gap:20px}.input-proof{width:140px}.app-proof{width:165px}.output-proof{width:220px}.creative-connector svg{width:24px}.proof-label{font-size:12px}.proof-label>span+span{display:none}.work .case-grid{gap:20px}.work .case h3{font-size:19px}}
@media(max-width:800px){.work{padding-block:72px}.work .section-heading{align-items:start}.work .section-heading>p{max-width:440px}}
@media(max-width:700px){
 .creative-stage{width:calc(100% - 44px);grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px 24px;margin-top:32px;align-items:start}
 .input-proof{width:100%;margin:0;grid-column:1;grid-row:1}
 .app-proof{width:100%;margin:0;padding:0;display:block;background:none;border-radius:0;grid-column:2;grid-row:1}
 .hero-app-screen{width:100%;max-height:none;padding:4px;border-radius:18px}
 .hero-app-screen img{border-radius:14px}
 .app-proof .proof-label{font-size:12px;line-height:normal;margin-bottom:10px}
 .app-proof-caption{margin-top:16px;gap:6px;justify-content:center;flex-wrap:nowrap;align-items:center}
 .app-proof-caption>img{display:none}
 .app-proof-caption strong{display:none}
 .app-proof-caption span{font-size:12px;margin:0;line-height:1.5;text-align:center}
 .input-photo{transform:none}.input-photo:hover{transform:none}
 .creative-connector{display:none}
 .output-proof{grid-row:2;grid-column:1 / 3;width:min(240px,85%);justify-self:center}
 .output-proof .proof-label{font-size:13px}.output-proof .proof-label>span+span{display:block}
 .creative-stage figcaption{margin-top:14px}
 .creative-switcher{margin-top:28px}
 .creative-hero{padding-bottom:36px}
 .work{padding-block:64px}
 .work .section-heading{margin-bottom:32px}
 .work .case-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
 .work .case h3{font-size:16px}
 .work .case-title{margin-top:12px}.work .case-title .round-link{display:none}
 .work .case-play{width:36px;height:36px;bottom:12px;right:12px}.work .case-play svg{width:16px;height:16px}
 .work .duration{top:10px;right:10px}
 .work .case>p{font-size:12px}.work .case-source{gap:6px}.work .case-source img{width:24px;height:32px}
}
@media(max-width:560px){
 .work .case-grid{grid-template-columns:1fr;gap:40px;max-width:360px}
 .work .case-video{aspect-ratio:9/16}
 .work .case-title{margin-top:16px}.work .case h3{font-size:22px}
 .work .case-title .round-link{display:grid}
 .work .case>p{font-size:13px}.work .case-source{gap:12px}.work .case-source img{width:32px;height:40px}
 .work .case-play{width:48px;height:48px;right:20px;bottom:20px}.work .case-play svg{width:20px;height:20px}
}
@media(max-width:360px){.creative-stage{width:calc(100% - 36px);gap:24px 16px}.proof-label,.app-proof .proof-label{font-size:12px}.hero-app-screen{width:100%}}
@media(prefers-reduced-motion:reduce){.hero-app-screen:hover,.work .case-video:hover .case-play{transform:none}}