.wide{max-width:72rem;margin:0 auto;padding:0 var(--s3)}
main.wrap{max-width:none;padding:0}
main.wrap>section>.wrap{max-width:46rem}
.hero2{position:relative;overflow:hidden;padding:var(--s5) 0 var(--s6);isolation:isolate}
.hero2 .grid{display:grid;gap:var(--s5);align-items:center}
@media(min-width:960px){.hero2 .grid{grid-template-columns:1.05fr 1fr}}
.layer{position:absolute;z-index:-1;pointer-events:none;will-change:transform}
.l1{width:38rem;height:38rem;right:-12rem;top:-10rem;border-radius:50%;background:radial-gradient(circle at 35% 35%,#dbe4f3,#c9d6ec 60%,transparent 61%)}
.l2{width:9rem;height:9rem;left:4%;bottom:8%;border:2px solid var(--ink);border-radius:24px;transform:rotate(12deg);opacity:.18}
.l3{width:5rem;height:5rem;right:42%;top:12%;background:var(--acc);border:2px solid var(--ink);border-radius:50%;opacity:.9}
.l4{width:14rem;height:2px;left:-2rem;top:30%;background:var(--ink);opacity:.25}
.enter{opacity:0;transform:translateY(28px);animation:enter 1.1s var(--ease) forwards}
.enter.d1{animation-delay:.08s}.enter.d2{animation-delay:.22s}.enter.d3{animation-delay:.36s}.enter.d4{animation-delay:.5s}.enter.d5{animation-delay:.3s;transform:translateY(40px) scale(.96)}
@keyframes enter{to{opacity:1;transform:none}}
.part{padding:var(--s6) 0;position:relative}
.part.alt{background:var(--surf);border-block:1px solid rgba(11,24,48,.12)}
.plabel{display:inline-flex;gap:.6em;align-items:center;font:700 var(--fs-1) "Commissioner",sans-serif;letter-spacing:.08em;text-transform:uppercase}
.plabel b{display:grid;place-items:center;width:2em;height:2em;border-radius:50%;background:var(--ink);color:#fff;letter-spacing:0}
.part h2{margin-top:var(--s2)}
/* app mockup */
.app{background:var(--surf);border:2px solid var(--ink);border-radius:18px;box-shadow:0 30px 60px -30px rgba(11,24,48,.55);overflow:hidden;font:600 .78rem/1.2 "Noto Sans",sans-serif;color:var(--ink)}
.app .bar{display:flex;gap:6px;align-items:center;padding:12px 16px;border-bottom:1.5px solid var(--ink);background:var(--bg)}
.app .bar i{width:10px;height:10px;border-radius:50%;border:1.5px solid var(--ink);display:block}
.app .bar span{margin-left:12px;opacity:.8}
.app .body{display:grid;grid-template-columns:64px 1fr}
.lib{border-right:1.5px solid var(--ink);padding:12px 10px;display:grid;gap:10px;align-content:start;background:#f6f8fc}
.lib div{height:40px;border:1.5px solid var(--ink);border-radius:8px;background:#fff;display:grid;place-items:center}
.stage{position:relative;aspect-ratio:16/9;background:linear-gradient(#cfe0f7,#e9f0fb 62%,#b9c9e2 62%);overflow:hidden}
.sun{position:absolute;right:12%;top:14%;width:14%;aspect-ratio:1;border-radius:50%;background:var(--acc);border:2px solid var(--ink)}
.hill{position:absolute;left:-10%;bottom:30%;width:60%;height:30%;border-radius:50% 50% 0 0;background:#9fb3d3;border:2px solid var(--ink);border-bottom:0}
.char{position:absolute;bottom:14%;left:58%;width:16%}
.char svg{width:100%;display:block;overflow:visible}
.cursor{position:absolute;width:22px;height:22px;left:0;top:0}
.tl{border-top:1.5px solid var(--ink);padding:14px 16px;position:relative;display:grid;gap:6px;background:#f6f8fc}
.trk{height:14px;border-radius:5px;background:#e3e9f3;position:relative;overflow:hidden}
.clip{position:absolute;top:0;bottom:0;border:1.5px solid var(--ink);border-radius:5px;background:#fff}
.clip.a{background:var(--acc)}.clip.k{background:var(--ink)}
.ph{position:absolute;top:4px;bottom:4px;width:2px;background:#d11;left:12%}
.ph::before{content:"";position:absolute;top:-4px;left:-4px;border:5px solid transparent;border-top-color:#d11}
.wave{display:flex;gap:3px;align-items:center;height:46px;padding:0 6px}
.wave i{flex:1;background:var(--ink);border-radius:2px;height:20%;transform-origin:center}
.bubble{position:absolute;left:8%;top:12%;max-width:46%;background:#fff;border:2px solid var(--ink);border-radius:12px;padding:4px 12px;font-size:.72rem}
.typed{display:inline-block;overflow:hidden;white-space:nowrap;vertical-align:bottom;width:0}
.bubble::after{content:"";display:inline-block;width:2px;height:1em;background:var(--ink);vertical-align:bottom;margin-left:1px}
.prog{margin:10px;height:16px;border:2px solid var(--ink);border-radius:99px;overflow:hidden;background:#fff}
.prog b{display:block;height:100%;width:0;background:var(--acc)}
.exp{display:flex;justify-content:space-between;padding:0 12px 12px}
.done{opacity:0}
.note{font-size:var(--fs-1);color:var(--ink2);margin-top:var(--s1)}
/* animations, run when .in */
.mock .ph{animation:ph 6s linear infinite paused}
@keyframes ph{0%{left:4%}100%{left:96%}}
.mock .clip{transform-origin:left;animation:grow 1.2s var(--ease) both paused}
.mock .clip:nth-child(2){animation-delay:.25s}.mock .clip:nth-child(3){animation-delay:.5s}
@keyframes grow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.mock.drag .char{animation:dragc 4.5s var(--ease) infinite paused}
.mock.drag .cursor{animation:dragp 4.5s var(--ease) infinite paused}
@keyframes dragc{0%,12%{left:-12%;bottom:62%;transform:scale(.6)}55%,100%{left:52%;bottom:14%;transform:none}}
@keyframes dragp{0%,12%{left:-4%;top:28%}55%,85%{left:62%;top:62%}100%{left:62%;top:62%;opacity:0}}
.mock.walk .char{animation:walk 3.4s var(--ease) both paused}
@keyframes walk{from{left:-20%}to{left:58%}}
.mock .wave i{animation:wv 1.1s ease-in-out infinite paused}
@keyframes wv{0%,100%{height:18%}50%{height:95%}}
.mock .typed{animation:type 3s steps(28) infinite paused}
@keyframes type{0%{width:0}60%,100%{width:15ch}}
.mock .prog b{animation:fill 4s var(--ease) infinite paused}
@keyframes fill{0%{width:0}80%,100%{width:100%}}
.mock .done{animation:done 4s step-end infinite paused}
@keyframes done{0%,79%{opacity:0}80%,100%{opacity:1}}
.mock.in *{animation-play-state:running!important}
/* steps synced */
.steps2{display:grid;gap:var(--s5);margin-top:var(--s5)}
.step{display:grid;gap:var(--s3);align-items:center}
@media(min-width:900px){.step{grid-template-columns:1fr 1.1fr;gap:var(--s5)}.step:nth-child(even) .txt{order:2}}
.step .num{font:800 var(--fs3)/1 "Commissioner",sans-serif;color:transparent;-webkit-text-stroke:2px var(--ink)}
.step h3{margin-top:var(--s1)}
/* final cta */
.final{background:var(--ink);color:#f2f5fb;border-radius:32px;padding:var(--s5) var(--s4);position:relative;overflow:hidden;text-align:left}
.final h2{color:#fff;margin-top:0}.final p{color:#dfe6f2}.final a{color:#fff}
.final a.btn{color:var(--ink);font-size:var(--fs1);box-shadow:0 6px 0 #000;border-color:#000}
.final .disc{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.4);color:#e7ecf5}
.final .ring{position:absolute;right:-6rem;top:-6rem;width:20rem;height:20rem;border:2px solid rgba(255,255,255,.18);border-radius:50%}
.final .ring.b{right:-2rem;top:-2rem;width:12rem;height:12rem;border-color:var(--acc);opacity:.6}
@media (prefers-reduced-motion:reduce){.enter{opacity:1;transform:none;animation:none}.mock *{animation:none!important}.mock .clip{transform:none}.mock .typed{width:15ch}.mock .prog b{width:100%}.mock .done{opacity:1}.mock .wave i:nth-child(odd){height:70%}.mock .wave i:nth-child(even){height:35%}.mock .ph{left:40%}.mock.drag .cursor{display:none}.layer{transform:none!important}}