/* "Une conversation. Tout votre workspace." — the full product film (see mission.js and docs/MISSION-SCENARIO.md). */
.mission{background:var(--gallery);padding:104px 28px 56px;scroll-margin-top:68px;color:#29232f;overflow:hidden}
.mission-pin{max-width:1360px;margin:auto}
.mission-heading{text-align:center;margin-bottom:56px}

.mf{--ink:#17141f;--mut:#6c6678;--line:#ececf1;--bg:#f1f1f4;--vio:#5b3de8;--vio2:#7a5cf4;--mint:#dff5ea;--peach:#fdeedd;--lilac:#ebe6fc;--blue:#e2ecfd;--ok:#16a566;font-family:Inter,"SF Pro Text",system-ui,sans-serif}
.mf-stage{position:relative;aspect-ratio:1500/800;isolation:isolate}
.mf-world{position:absolute;left:0;top:0;width:1500px;height:800px;transform-origin:0 0;will-change:transform;--inv:1}

/* ================= desktop app ================= */
.mf-desk{position:relative;width:1162px;height:700px;padding:10px;border-radius:10px;overflow:hidden;background:var(--bg);display:grid;grid-template-columns:54px 188px 1fr 432px;gap:10px;color:var(--ink);font-size:13px;transition:grid-template-columns .9s cubic-bezier(.16,1,.3,1)}
.mf-desk.wide{grid-template-columns:54px 0px 1fr 620px}
.mf-desk.wide .mf-side{opacity:0;padding-left:0;padding-right:0}
.mf-side{transition:opacity .45s,padding .9s}
.mf-desk.no-tr,.mf-desk.no-tr *{transition:none!important}
.mf-rail,.mf-side,.mf-chat,.mf-display{position:relative;background:#fff;border-radius:22px;min-height:0;overflow:hidden}
.mf-rail{display:flex;flex-direction:column;align-items:center;gap:10px;padding:12px 0}
.rl{width:34px;height:34px;border-radius:11px;display:grid;place-items:center;font-size:9px;font-weight:700;letter-spacing:.02em;transition:box-shadow .5s,transform .5s}
.rl-c{background:#141118}.rl-c img{filter:invert(1) brightness(2)}
.rl-sep{width:22px;height:1px;background:var(--line);margin:2px 0}
.rl-app{background:color-mix(in srgb,var(--c) 30%,#fff);color:color-mix(in srgb,var(--c) 70%,#111)}
.rl-app[data-app=crm]{background:var(--c);color:#fff}
.rl-app.active{box-shadow:0 0 0 2px #fff,0 0 0 4px var(--vio),0 8px 16px -6px #5b3de888;transform:scale(1.06)}
.rl-end{margin-top:auto}

.mf-side{padding:16px 12px}
.side-brand{margin:0 4px 14px;font-size:16px;font-weight:700;letter-spacing:-.03em}
.side-bob{display:flex;align-items:center;gap:9px;height:36px;padding:0 10px;border-radius:11px;background:#141118;color:#fff;font-weight:600}
.side-bob img{border-radius:50%;background:#fff;object-fit:cover;object-position:50% 12%}
.side-nav{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:1px}
.side-nav li{height:34px;padding:0 10px;display:flex;align-items:center;justify-content:space-between;font-size:13px;color:#4c4658;border-radius:10px}
.side-badge{min-width:18px;height:18px;border-radius:9px;background:var(--vio);color:#fff;display:grid;place-items:center;font-size:10px;font-weight:700;font-style:normal;opacity:0;transform:scale(.6);transition:opacity .3s,transform .5s cubic-bezier(.2,1.4,.4,1)}
.side-badge.on{opacity:1;transform:none}
.side-label{margin:16px 10px 8px;font-size:10px;font-weight:600;letter-spacing:.14em;color:#9a94a5}
.side-agents{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.side-agents li{display:flex;align-items:center;gap:9px;padding:6px 10px;border-radius:10px}
.side-agents img{flex:none;border-radius:50%;background:#f3f1f8;object-fit:cover;object-position:50% 12%}
.side-agents b{display:block;font-size:12.5px;font-weight:600}
.side-agents small{display:block;margin-top:1px;font-size:10.5px;color:#8a8494}
.side-agents li>div{flex:1;min-width:0}
.dot{flex:none;width:8px;height:8px;border-radius:50%;background:#d9d5e2;transition:background .4s,box-shadow .4s}
.dot[data-s="1"]{background:var(--vio);box-shadow:0 0 0 0 #5b3de888;animation:mf-pulse 1.6s infinite}
.dot[data-s="2"]{background:var(--ok)}
@keyframes mf-pulse{70%{box-shadow:0 0 0 6px #5b3de800}100%{box-shadow:0 0 0 0 #5b3de800}}

/* chat */
.mf-chat{display:flex;flex-direction:column}
.chat-head{flex:none;display:flex;align-items:center;gap:9px;height:54px;padding:0 18px;border-bottom:1px solid var(--line)}
.chat-head img{border-radius:50%;background:#f3f1f8;object-fit:cover;object-position:50% 12%}
.chat-head b{font-size:15px;letter-spacing:-.02em}.chat-head span{font-size:11.5px;color:#8a8494}
.chat-head em{margin-left:auto;font-style:normal;font-size:11px;color:#8a8494;padding:4px 10px;border-radius:99px;background:#f5f3f9;transition:background .4s,color .4s}
.chat-head em[data-s="3"],.chat-head em[data-s="4"]{background:var(--lilac);color:#4a2fa0}
.chat-viewport{position:relative;flex:1;min-height:0;overflow:hidden;padding:0 20px}
.chat-thread{padding:20px 0 0;will-change:transform}
.m{opacity:0;transform:translateY(14px);transition:opacity .55s ease,transform .7s cubic-bezier(.16,1,.3,1);margin-bottom:13px}
.m.on{opacity:1;transform:none}
.m-user{display:flex;justify-content:flex-end}
.m-user p{margin:0;max-width:88%;padding:11px 15px;border-radius:16px;background:#141118;color:#fff;font-size:13.5px;line-height:1.42}
.m-tool{display:flex;align-items:center;gap:10px;font-size:11.5px;color:#8a8494}
.m-tool i{width:22px;height:6px;border-radius:3px;background:linear-gradient(90deg,#5b3de8 0 30%,#dcd6ee 30%);background-size:200% 100%;animation:mf-load 1.2s linear infinite}
@keyframes mf-load{to{background-position:-200% 0}}
.m-bob p,.m-agent p{margin:0;font-size:13.5px;line-height:1.55;color:#221d2b}
.typed{min-height:1.4em}
.m-card{display:flex;align-items:center;gap:12px;padding:12px 12px 12px 14px;border:1px solid var(--line);border-radius:16px;background:#fff;box-shadow:0 14px 28px -22px #2a1f3d66}
.m-card>div{flex:1;min-width:0}.m-card b{display:block;font-size:13px}.m-card small{display:block;margin-top:2px;font-size:11.5px;color:#8a8494}
.spark{flex:none;width:30px;height:30px;border-radius:10px;background:var(--lilac) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3.500l1.900 5.100 5.100 1.900-5.100 1.900L12 17.500l-1.900-5.100L5 10.500l5.100-1.900z' fill='%235b3de8'/%3E%3C/svg%3E") center/16px no-repeat}
.btn-black,.btn-white{flex:none;height:34px;padding:0 16px;border:0;border-radius:99px;font:600 12.5px/1 inherit;cursor:pointer;white-space:nowrap;transition:transform .25s,background .25s,color .25s}
.btn-black{background:#141118;color:#fff}.btn-black:hover{transform:translateY(-1px)}
.btn-black[data-s="1"]{background:#e9f6ef;color:var(--ok)}
.btn-white{background:#fff;color:#141118}.btn-white[data-s="1"]{background:#e9f6ef;color:var(--ok)}
.m-agent{display:flex;gap:11px}
.m-agent>img{flex:none;width:26px;height:26px;border-radius:50%;background:#f3f1f8;object-fit:cover;object-position:50% 12%}
.m-agent b{display:block;font-size:12.5px;margin-bottom:3px}.m-agent b span{font-weight:400;color:#8a8494;font-size:11.5px}
.m-ok{display:flex;align-items:center;gap:14px;padding:14px 14px 14px 16px;border-radius:18px;background:linear-gradient(135deg,#5b3de8,#6f4cf5);color:#fff;box-shadow:0 20px 36px -20px #5b3de8aa}
.m-ok>div{flex:1}.m-ok small{display:block;font-size:10px;font-weight:600;letter-spacing:.14em;opacity:.8}.m-ok b{display:block;margin-top:4px;font-size:13px;line-height:1.35}
.chat-composer{flex:none;margin:0 18px 18px;height:54px;border:1px solid var(--line);border-radius:27px;display:flex;align-items:center;justify-content:space-between;padding:0 8px 0 20px;box-shadow:0 14px 28px -22px #2a1f3d66}
.comp-text{font-size:13.5px;color:#221d2b;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.comp-text.hint{color:#9a94a5}
.comp-send{flex:none;width:36px;height:36px;border-radius:50%;background:#141118;color:#fff;display:grid;place-items:center;font-size:16px;margin-left:10px}

/* display */
.mf-display{display:flex;flex-direction:column}
.disp-head{flex:none;display:flex;align-items:center;gap:10px;height:54px;padding:0 18px;border-bottom:1px solid var(--line)}
.disp-head b{font-size:15px;letter-spacing:-.02em}.disp-head i{font-style:normal;font-size:10.5px;padding:3px 8px;border-radius:99px;background:#f1eefa;color:#6b5fa0}
.disp-app{margin-left:auto;font-size:11.5px;color:#4a2fa0;padding:4px 11px;border-radius:99px;background:var(--lilac);font-weight:600}
.disp-stage{position:relative;flex:1;min-height:0;background:#fbfbfd;overflow:hidden}
.view{position:absolute;inset:0;padding:18px;visibility:hidden;opacity:0;transform:translateY(12px) scale(.99);transition:opacity .22s ease,transform .5s cubic-bezier(.16,1,.3,1),visibility 0s .4s}
.view.on{visibility:visible;opacity:1;transform:none;transition:opacity .45s ease .2s,transform .8s cubic-bezier(.16,1,.3,1) .2s,visibility 0s}
.vh{display:flex;align-items:baseline;gap:10px;margin-bottom:14px}.vh b{font-size:17px;letter-spacing:-.03em}.vh small{font-size:11.5px;color:#8a8494}
.v-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
.v-empty p{margin:22px 0 4px;font-size:15px;font-weight:600;letter-spacing:-.02em}.v-empty small{font-size:12px;color:#8a8494}
.orb{position:relative;width:92px;height:92px}.orb i{position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff,#d9cffa 40%,#8d70f2 100%);opacity:.9;animation:mf-orb 4s ease-in-out infinite}
.orb i:nth-child(2){inset:-14px;opacity:.28;animation-delay:-1.3s}.orb i:nth-child(3){inset:-30px;opacity:.12;animation-delay:-2.6s}
@keyframes mf-orb{50%{transform:scale(1.07)}}

/* animated children */
.step,.shot,.fmt,.acq,.rc,.pg-nav,.pg-hero,.pg-feats,.pg-foot,.bd,.rc-banner,.rc-note,.pa-act,.budget{opacity:0;transform:translateY(10px);transition:opacity .5s ease,transform .7s cubic-bezier(.16,1,.3,1)}
.step.on,.shot.on,.fmt.on,.acq.on,.rc.on,.pg-nav.on,.pg-hero.on,.pg-feats.on,.pg-foot.on,.bd.on,.rc-banner.on,.rc-note.on,.pa-act.on,.budget.on{opacity:1;transform:none}

.steps{display:grid;gap:8px}
.step{display:flex;align-items:center;gap:11px;padding:10px 12px;border:1px solid var(--line);border-radius:14px;background:#fff}
.step img{flex:none;border-radius:50%;background:#f3f1f8;object-fit:cover;object-position:50% 12%}
.step>div{flex:1;min-width:0}.step b{display:block;font-size:12.5px}.step small{font-size:11px;color:#8a8494}
.chip{flex:none;font-style:normal;font-size:10.5px;font-weight:600;padding:4px 9px;border-radius:99px;background:#f1eefa;color:#5a4a9a}
.stt{flex:none;min-width:70px;text-align:right;font-size:11px;font-weight:600;color:#9a94a5}
.stt[data-s="1"]{color:var(--vio)}.stt[data-s="2"]{color:var(--ok)}

.prompt-line{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:12px;background:#f5f3f9;font-size:11.5px;color:#4c4658;margin-bottom:12px}
.prompt-line .spark{width:22px;height:22px;border-radius:8px;background-size:13px}
.shots{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.shot{position:relative;margin:0;aspect-ratio:4/4.2;border-radius:14px;overflow:hidden;background:#e9e4f3}
.shot img{display:block;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.06);transition:opacity .9s ease .2s,transform 1.4s cubic-bezier(.16,1,.3,1) .2s}
.shot.on img{opacity:1;transform:none}
.shot .sweep{position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,#ffffffcc 50%,transparent 70%);transform:translateX(-120%);opacity:0}
.shot.on .sweep{animation:mf-sweep 1.2s ease-out .1s 1 both}
@keyframes mf-sweep{0%{transform:translateX(-120%);opacity:1}100%{transform:translateX(120%);opacity:0}}
.formats{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.fmt{position:relative;overflow:hidden;font-size:11px;font-weight:600;padding:6px 12px;border-radius:99px;background:#e9f6ef;color:var(--ok)}
.fmt::before{content:"✓ "}
.fmt.film{background:#f1eefa;color:#5a4a9a;padding-right:14px}.fmt.film::before{content:"▶ "}
.fmt.film u{position:absolute;left:0;bottom:0;height:3px;width:calc(var(--p,0)*100%);background:var(--vio);text-decoration:none}


.collab{display:inline-flex;align-items:center;gap:6px;margin-left:auto;font-size:10.5px;font-weight:600;color:#5a32c9;padding:3px 9px 3px 4px;border-radius:99px;background:#f1eefa}
.collab img{border-radius:50%;background:#fff;object-fit:cover;object-position:50% 12%}
.devs{display:flex;gap:4px;padding:3px;border-radius:99px;background:#f1eefa}
.dev{width:28px;height:22px;border-radius:99px;display:grid;place-items:center;color:#8a8494;transition:background .4s,color .4s}
.dev svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.badges{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.bd{display:inline-flex;align-items:center;gap:6px;font-size:10.5px;font-weight:600;padding:6px 11px;border-radius:99px;background:#f5f3f9;color:#4c4658}
.bd.ready{background:#e9f6ef;color:var(--ok)}

.budget{opacity:0;transform:translateY(10px);transition:opacity .5s ease,transform .7s cubic-bezier(.16,1,.3,1)}
.step.on,.shot.on,.fmt.on,.acq.on,.rc.on,.pg-nav.on,.pg-hero.on,.pg-feats.on,.pg-foot.on,.bd.on,.rc-banner.on,.rc-note.on,.pa-act.on,.budget.on{opacity:1;transform:none}

.steps{display:grid;gap:8px}
.step{display:flex;align-items:center;gap:11px;padding:10px 12px;border:1px solid var(--line);border-radius:14px;background:#fff}
.step img{flex:none;border-radius:50%;background:#f3f1f8;object-fit:cover;object-position:50% 12%}
.step>div{flex:1;min-width:0}.step b{display:block;font-size:12.5px}.step small{font-size:11px;color:#8a8494}
.chip{flex:none;font-style:normal;font-size:10.5px;font-weight:600;padding:4px 9px;border-radius:99px;background:#f1eefa;color:#5a4a9a}
.stt{flex:none;min-width:70px;text-align:right;font-size:11px;font-weight:600;color:#9a94a5}
.stt[data-s="1"]{color:var(--vio)}.stt[data-s="2"]{color:var(--ok)}

.prompt-line{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:12px;background:#f5f3f9;font-size:11.5px;color:#4c4658;margin-bottom:12px}
.prompt-line .spark{width:22px;height:22px;border-radius:8px;background-size:13px}
.shots{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.shot{position:relative;margin:0;aspect-ratio:4/4.2;border-radius:14px;overflow:hidden;background:#e9e4f3}
.shot img{display:block;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.06);transition:opacity .9s ease .2s,transform 1.4s cubic-bezier(.16,1,.3,1) .2s}
.shot.on img{opacity:1;transform:none}
.shot .sweep{position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,#ffffffcc 50%,transparent 70%);transform:translateX(-120%);opacity:0}
.shot.on .sweep{animation:mf-sweep 1.2s ease-out .1s 1 both}
@keyframes mf-sweep{0%{transform:translateX(-120%);opacity:1}100%{transform:translateX(120%);opacity:0}}
.formats{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.fmt{position:relative;overflow:hidden;font-size:11px;font-weight:600;padding:6px 12px;border-radius:99px;background:#e9f6ef;color:var(--ok)}
.fmt::before{content:"✓ "}
.fmt.film{background:#f1eefa;color:#5a4a9a;padding-right:14px}.fmt.film::before{content:"▶ "}
.fmt.film u{position:absolute;left:0;bottom:0;height:3px;width:calc(var(--p,0)*100%);background:var(--vio);text-decoration:none}

.devs{margin-left:auto;display:flex;gap:4px;padding:3px;border-radius:99px;background:#f1eefa}
.dev{width:26px;height:22px;border-radius:99px;display:grid;place-items:center;color:#8a8494;transition:background .4s,color .4s}
.dev svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.v-site .on-d{background:#fff;color:#17141f}.v-site.mobile .on-d{background:transparent;color:#8a8494}.v-site.mobile .on-m{background:#fff;color:#17141f}
.badges{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.bd{display:inline-flex;align-items:center;gap:6px;font-size:10.5px;font-weight:600;padding:6px 11px;border-radius:99px;background:#f5f3f9;color:#4c4658}
.bd.ready{background:#e9f6ef;color:var(--ok)}

.budget{padding:12px 14px;border:1px solid var(--line);border-radius:14px;background:#fff;margin-bottom:10px}
.b-top{display:flex;justify-content:space-between;align-items:baseline;font-size:11.5px;color:#8a8494}.b-top b{font-size:20px;letter-spacing:-.04em;color:#17141f}
.b-bar{display:flex;height:10px;gap:3px;margin:10px 0 8px}
.b-bar i{height:100%;border-radius:5px;width:calc(var(--p,0)*var(--w))}
.b1{--w:45%;background:#5b3de8}.b2{--w:35%;background:#9db8f5}.b3{--w:20%;background:#d9d5e2}
.b-key{display:flex;gap:14px;font-size:10.5px;color:#6c6678}.b-key u{display:inline-block;width:8px;height:8px;border-radius:3px;margin-right:6px;text-decoration:none}
.k1{background:#5b3de8}.k2{background:#9db8f5}.k3{background:#d9d5e2}
.acq-rows{display:grid;gap:8px}
.acq{display:flex;align-items:center;gap:11px;padding:10px 12px;border:1px solid var(--line);border-radius:14px;background:#fff}
.acq img{flex:none}.acq>div{flex:1}.acq b{display:block;font-size:12.5px}.acq small{font-size:11px;color:#8a8494}
.acq em{flex:none;font-style:normal;font-size:12px;font-weight:700}.acq em.draft{font-size:10.5px;font-weight:600;padding:4px 9px;border-radius:99px;background:#fff4e0;color:#b4690e}

.rc-list{display:grid;gap:9px}
.rc{display:flex;align-items:center;gap:12px;padding:12px 14px;border:1px solid var(--line);border-radius:14px;background:#fff}
.rc>div{flex:1}.rc b{display:block;font-size:12.5px}.rc small{font-size:11px;color:#8a8494}
.rc-dot{flex:none;width:10px;height:10px;border-radius:50%;background:#f0b15c;box-shadow:0 0 0 4px #f0b15c33;transition:background .5s,box-shadow .5s}
.rc-dot[data-s="1"]{background:var(--ok);box-shadow:0 0 0 4px #16a56633}
.rc-st{flex:none;font-size:11px;font-weight:600;color:#b4690e}.rc-st[data-s="1"]{color:var(--ok)}
.rc-banner{display:flex;align-items:center;gap:12px;margin-top:14px;padding:13px 15px;border-radius:14px;background:#e9f6ef}
.rc-banner u{width:26px;height:26px;border-radius:50%;background:var(--ok);color:#fff;display:grid;place-items:center;text-decoration:none;font-weight:800}
.rc-banner b{display:block;font-size:12.5px;color:#0e6a42}.rc-banner small{font-size:11px;color:#3b8f68}
.rc-note{margin:14px 2px 0;font-size:11.5px;color:#8a8494}

.day{margin-left:auto;font-size:10px;font-weight:700;letter-spacing:.14em;padding:4px 9px;border-radius:99px;background:#17141f;color:#fff}
.kpis{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.kpi{padding:12px 13px;border:1px solid var(--line);border-radius:14px;background:#fff}
.kpi.big{grid-column:1/-1;background:linear-gradient(135deg,#5b3de8,#7a5cf4);color:#fff;border:0}
.kpi small{font-size:10.5px;color:#8a8494}.kpi.big small{color:#d6cdfc}
.kpi b{display:block;margin-top:3px;font-size:24px;letter-spacing:-.04em}.kpi b i{font-style:normal;font-size:12px;font-weight:500;opacity:.7;letter-spacing:0}
.kpi em{display:block;margin-top:2px;font-style:normal;font-size:10.5px;color:#8a8494}.kpi.big em{color:#d6cdfc}
.kpi:not(.big) em[data-s="1"]{color:var(--ok);font-weight:600}
.pbar{height:6px;margin:8px 0 6px;border-radius:3px;background:#ffffff30}.pbar u{display:block;height:100%;border-radius:3px;background:#fff;width:calc(var(--p,0)*var(--max,1)*100%);text-decoration:none}
.chart{margin-top:10px;padding:11px 13px 9px;border:1px solid var(--line);border-radius:14px;background:#fff}
.c-head{display:flex;justify-content:space-between;font-size:11px;color:#8a8494;margin-bottom:4px}.c-head b{color:#17141f;font-size:12px}
.chart svg{display:block;width:100%;height:60px}
.chart .line{fill:none;stroke:#5b3de8;stroke-width:2.2;stroke-linecap:round;stroke-dasharray:420;stroke-dashoffset:calc(420 - var(--p,0)*420)}
.chart .area{fill:#5b3de812;opacity:var(--pa,1)}
.mix{margin-top:10px;padding:11px 13px;border:1px solid var(--line);border-radius:14px;background:#fff;display:grid;gap:8px}.mix-title{margin:0 0 2px;font-size:11px;color:#8a8494}
.mix-row{display:grid;grid-template-columns:86px 1fr 34px;align-items:center;gap:8px;font-size:11px;color:#6c6678}
.mix-row>div{height:7px;border-radius:4px;background:#efecf5}.mix-row u{display:block;height:100%;border-radius:4px;text-decoration:none}
.mx-meta{background:#9db8f5;width:45%}.mx-goog{background:#5b3de8;width:35%}.mix-row b{text-align:right;color:#17141f}

/* ================= iPhone ================= */
  .mf-phone{position:absolute;left:1236px;top:124px;width:262px;height:566px;filter:drop-shadow(0 38px 36px rgba(34,20,70,.34)) drop-shadow(0 8px 10px rgba(34,20,70,.22))}
.p-frame{position:absolute;inset:0;border-radius:52px;padding:3px;background:linear-gradient(135deg,#f3efe7 0%,#bdb7ad 18%,#e6e1d8 40%,#9a948a 62%,#d9d4ca 82%,#b2ada3 100%);box-shadow:inset 0 0 0 1px #ffffffaa,inset 0 0 0 2px #7d776d}
.p-bezel{height:100%;border-radius:49px;padding:7px;background:#08080a;box-shadow:inset 0 0 0 1.5px #1c1c20}
.p-screen{position:relative;height:100%;border-radius:42px;overflow:hidden;background:#f6f5fb;container-type:inline-size}
.pb{position:absolute;width:3.5px;border-radius:2px;background:linear-gradient(90deg,#8a847a,#d8d3c9 55%,#8a847a);box-shadow:0 1px 2px #0005}
.pb-a{left:-3px;top:92px;height:24px}.pb-v1{left:-3px;top:140px;height:44px}.pb-v2{left:-3px;top:194px;height:44px}.pb-p{right:-3px;top:160px;height:72px}
.p-glass{position:absolute;inset:0;z-index:12;pointer-events:none;border-radius:inherit;background:linear-gradient(118deg,#ffffff2e 0%,#ffffff0d 22%,transparent 38%),linear-gradient(300deg,#ffffff14,transparent 26%)}
.p-island{position:absolute;z-index:11;left:50%;top:9px;width:78px;height:23px;margin-left:-39px;border-radius:14px;background:#000;box-shadow:0 0 0 1px #1a1a1e}
.p-island i{position:absolute;right:9px;top:50%;width:9px;height:9px;margin-top:-4.5px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#4b4d8f,#14143a 55%,#050510)}
.p-status{position:absolute;z-index:10;left:0;right:0;top:0;height:44px;display:flex;align-items:flex-end;justify-content:space-between;padding:0 24px 8px 26px;font-size:12.5px;font-weight:600;color:#141118;transition:color .4s}
.p-status.light{color:#fff}
.p-icons{display:flex;align-items:center;gap:5px}.p-icons svg{height:10px;fill:currentColor}.p-icons svg:nth-child(3){height:11px}
.p-home{position:absolute;z-index:11;left:50%;bottom:7px;width:96px;height:4px;margin-left:-48px;border-radius:2px;background:#141118;opacity:.9}
.ps{position:absolute;inset:0;padding:52px 15px 20px;opacity:0;visibility:hidden;transform:scale(.985);transition:opacity .5s ease,transform .7s cubic-bezier(.16,1,.3,1),visibility 0s .5s;font-size:11.5px;color:#17141f}
.ps.on{opacity:1;visibility:visible;transform:none;transition-delay:0s}
.pa-top{display:flex;align-items:center;justify-content:space-between}.pa-top img{display:block}
.pa-bell{position:relative;width:26px;height:26px;border-radius:50%;background:#fff;box-shadow:0 0 0 1px #2a1f3d12}.pa-bell i{position:absolute;right:5px;top:5px;width:7px;height:7px;border-radius:50%;background:#ff4d5e;opacity:0;transition:opacity .3s}.pa-bell i.on{opacity:1}
.pa-hello{margin:14px 0 12px;font-size:22px;font-weight:700;letter-spacing:-.04em}
.pa-proj{display:flex;align-items:center;gap:12px;padding:13px;border-radius:20px;background:linear-gradient(145deg,#2a1a78,#5b3de8);color:#fff;box-shadow:0 18px 30px -18px #5b3de8bb}
.pa-proj small{font-size:8.5px;letter-spacing:.14em;opacity:.7}.pa-proj b{display:block;margin:3px 0;font-size:13px;letter-spacing:-.02em}.pa-proj span{font-size:10.5px;opacity:.85}
.ring{position:relative;flex:none;width:52px;height:52px}.ring svg{width:100%;height:100%;transform:rotate(-90deg)}.ring circle{fill:none;stroke:#ffffff30;stroke-width:4}.ring .rg{stroke:#fff;stroke-linecap:round;stroke-dasharray:113.1;stroke-dashoffset:113.1}
.ring b{position:absolute;inset:0;display:grid;place-items:center;margin:0;font-size:11px}
.pa-label{margin:16px 2px 7px;font-size:9px;font-weight:600;letter-spacing:.14em;color:#9a94a5}
.pa-act{display:flex;align-items:center;gap:8px;padding:8px 10px;margin-bottom:6px;border-radius:12px;background:#fff;box-shadow:0 0 0 1px #2a1f3d0d;font-size:11px}
.pa-act img{border-radius:50%;background:#f3f1f8}

.ps-lock{background:linear-gradient(165deg,#241258 0%,#4a2fa0 45%,#c9708a 100%);color:#fff;text-align:center}
.lk-date{margin:30px 0 0;font-size:12px;font-weight:600;opacity:.85}.lk-time{margin:0;font-size:64px;font-weight:700;letter-spacing:-.05em;line-height:1.05}
.lk-notif{margin:116px 0 0;padding:11px 12px;border-radius:20px;background:#ffffffd9;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);color:#141118;text-align:left;opacity:0;transform:translateY(-26px) scale(.96);transition:opacity .5s ease,transform .8s cubic-bezier(.2,1.2,.4,1);box-shadow:0 18px 30px -16px #000a}
.lk-notif.on{opacity:1;transform:none}
.nt-top{display:flex;align-items:center;gap:7px;font-size:9.5px}.nt-top small{margin-left:auto;color:#6c6678}
.nt-ic{width:18px;height:18px;border-radius:5px;background:#141118;display:grid;place-items:center}.nt-ic img{filter:invert(1) brightness(2)}
.lk-notif strong{display:block;margin:6px 0 2px;font-size:12px}.lk-notif p{margin:0;font-size:11px;line-height:1.35;color:#3c3647}
.lk-bottom{position:absolute;left:0;right:0;bottom:30px;display:flex;justify-content:space-between;padding:0 28px}.lk-bottom span{width:38px;height:38px;border-radius:50%;background:#ffffff26}

.ps-ok{background:#f6f5fb}
.ok-top{display:flex;align-items:center;gap:8px;font-size:13px}.ok-top .back{font-size:20px;line-height:1;color:#5b3de8}.ok-top b{letter-spacing:-.02em}
.ok-sub{margin:10px 2px 12px;font-size:11px;color:#8a8494}
.ok-row{display:flex;align-items:center;gap:10px;padding:11px 12px;margin-bottom:8px;border-radius:14px;background:#fff;box-shadow:0 0 0 1px #2a1f3d0d}
.ok-row i{flex:none;width:18px;height:18px;border-radius:50%;background:#e9f6ef url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m6 12.500 4 4 8-9' fill='none' stroke='%2316a566' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat}
.ok-row b{display:block;font-size:12px}.ok-row small{font-size:10.5px;color:#8a8494}
.ok-btn-p{position:absolute;left:15px;right:15px;bottom:26px;height:46px;border:0;border-radius:23px;background:#141118;color:#fff;font:600 13px/1 inherit;cursor:pointer;transition:background .4s,transform .3s}
.ok-btn-p[data-s="1"]{background:#5b3de8}.ok-btn-p[data-s="2"]{background:var(--ok)}
.ok-sync{position:absolute;left:0;right:0;bottom:84px;margin:0;text-align:center;font-size:10.5px;color:var(--ok);font-weight:600;opacity:0;transition:opacity .5s}.ok-sync.on{opacity:1}

.rp-card{padding:14px;border-radius:20px;background:linear-gradient(145deg,#2a1a78,#5b3de8);color:#fff}
.rp-card small{font-size:8.5px;letter-spacing:.14em;opacity:.7}.rp-card b{display:block;margin:4px 0 8px;font-size:34px;letter-spacing:-.05em}.rp-card b i{font-style:normal;font-size:14px;opacity:.6;letter-spacing:0}
.rp-card .pbar u{width:19%}.rp-card span{font-size:10.5px;opacity:.85}
.rp-sug{display:flex;gap:10px;margin-top:12px;padding:12px;border-radius:16px;background:#fff;box-shadow:0 0 0 1px #2a1f3d0d}.rp-sug b{display:block;font-size:12px;line-height:1.3}.rp-sug small{font-size:10.5px;color:#8a8494}
.rp-sug .spark{width:26px;height:26px}

.p-touch{position:absolute;z-index:13;left:0;top:0;width:36px;height:36px;margin:-18px 0 0 -18px;border-radius:50%;background:#ffffffcc;box-shadow:0 0 0 1px #00000014,0 6px 14px #0004;opacity:0;transform:scale(.4);pointer-events:none}
.p-touch.on{opacity:.85;transform:scale(calc(.6 + var(--tp,0)*.6))}

/* ================= pointer + day label ================= */
.mf-cursor{position:absolute;left:0;top:0;width:22px;height:30px;opacity:0;pointer-events:none;z-index:40;will-change:transform}
.mf-cursor svg{position:relative;display:block;width:22px;height:30px;filter:drop-shadow(0 4px 6px rgba(20,10,40,.38));transition:transform .12s ease;transform-origin:2px 2px}
.mf-cursor svg path{fill:#141118;stroke:#fff;stroke-width:1.4;stroke-linejoin:round}
.mf-cursor.press svg{transform:scale(.86)}
.mf-cursor .rip{position:absolute;left:-13px;top:-13px;width:28px;height:28px;border-radius:50%;border:2px solid #5b3de8;opacity:0}
.mf-cursor.clk .rip{animation:mf-rip .65s ease-out}
@keyframes mf-rip{0%{opacity:.8;transform:scale(.3)}100%{opacity:0;transform:scale(1.7)}}
.hov{transform:translateY(-1px);filter:brightness(1.04);box-shadow:0 10px 20px -12px #2a1f3d88}
.mf-label{position:absolute;left:640px;top:410px;z-index:45;transform:translate(-50%,-50%) scale(.9);opacity:0;transition:opacity .5s,transform .8s cubic-bezier(.2,1.2,.4,1);pointer-events:none}
.mf-label.on{opacity:1;transform:translate(-50%,-50%) scale(1)}
.mf-label b{display:block;padding:18px 40px;border-radius:99px;background:#17141fe6;color:#fff;font-size:34px;letter-spacing:.2em;font-weight:700;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:0 40px 60px -30px #000a}

/* ================= controls ================= */
.mf-controls{margin:34px auto 0;max-width:760px;display:flex;flex-direction:column;align-items:center;gap:16px}
.mf-player{width:100%;display:flex;align-items:center;gap:14px;padding:8px 10px 8px 8px;border-radius:99px;background:#fff;box-shadow:0 0 0 1px #2a1f3d10,0 24px 44px -30px #2a1f3d66;font-size:12px;color:#6c6678}
.mf-toggle,.mf-replay{flex:none;width:36px;height:36px;border:0;border-radius:50%;background:#141118;color:#fff;font-size:13px;cursor:pointer;transition:transform .25s}
.mf-replay{background:#f1eefa;color:#4a2fa0;font-size:16px}.mf-toggle:hover,.mf-replay:hover{transform:scale(1.06)}
.mf-status{flex:none;min-width:150px;font-weight:500;color:#4c4658}
.mf-seek{flex:1;min-width:0;height:4px;appearance:none;-webkit-appearance:none;border-radius:2px;background:#e2dded;outline:none}
.mf-seek::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;border-radius:50%;background:#5b3de8;box-shadow:0 0 0 4px #5b3de826;cursor:pointer}
.mf-seek::-moz-range-thumb{width:14px;height:14px;border:0;border-radius:50%;background:#5b3de8;cursor:pointer}
.mf-time{flex:none;font-variant-numeric:tabular-nums;color:#8a8494;min-width:82px;text-align:right}
.mf-chapters{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.mf-chapters button{height:36px;padding:0 18px;border:1px solid #ddd6e8;border-radius:99px;background:transparent;color:#4c4658;font:500 13px/1 inherit;cursor:pointer;transition:background .3s,color .3s,border-color .3s}
.mf-chapters button:hover{background:#fff}.mf-chapters button.now{background:#141118;color:#fff;border-color:#141118}
.mf-transcript{max-width:760px;margin:20px auto 0;color:#6c6678;font-size:14px}
.mf-transcript summary{cursor:pointer;list-style:none;text-align:center;font-size:13px;color:#7a7488}.mf-transcript summary::-webkit-details-marker{display:none}
.mf-transcript summary b{margin-left:6px;font-weight:500}
.mf-transcript ol{margin:14px 0 0;padding:0 0 0 22px;line-height:1.75}
.mf-caption{margin:20px 0 0;text-align:center;font-size:11px;color:#a899b5}

@media(max-width:760px){
 .mission{padding:72px 14px 44px}
 .mission-heading{margin-bottom:32px}
 .mf-stage{aspect-ratio:auto;height:500px;border-radius:26px}
 .mf-status{display:none}
 .mf-player{gap:10px}.mf-time{min-width:70px;font-size:11px}
 .mf-chapters button{height:34px;padding:0 14px;font-size:12px}
}
[dir=rtl] .mf-world{direction:ltr}
@media(prefers-reduced-motion:reduce){.m,.view,.ps,.step,.shot,.fmt,.acq,.rc{transition:none}.orb i,.dot,.m-tool i{animation:none!important}}

.shot .pick{position:absolute;left:8px;bottom:8px;z-index:3;font-style:normal;font-size:10.5px;font-weight:700;color:#fff;background:#5b3de8;padding:5px 10px;border-radius:99px;opacity:0;transform:translateY(6px);transition:opacity .4s,transform .6s cubic-bezier(.16,1,.3,1)}
.shot .pick.on{opacity:1;transform:none}
.shot{transition:opacity .5s ease,transform .7s cubic-bezier(.16,1,.3,1),box-shadow .5s}
.shot:has(.pick.on){box-shadow:0 0 0 3px #5b3de8,0 16px 28px -12px #5b3de899}

/* laptop */
.mf-laptop{position:absolute;left:26px;top:22px;width:1190px}
.lap-lid{position:relative;padding:14px 14px 16px;border-radius:26px 26px 8px 8px;background:#09090b;box-shadow:inset 0 0 0 1.5px #26262b}
.lap-lid::before{content:"";position:absolute;inset:-4px -4px -2px;border-radius:30px 30px 10px 10px;background:linear-gradient(135deg,#f3f0e9 0%,#bdb8ae 30%,#e8e4db 52%,#a39e94 78%,#d8d4ca 100%);z-index:-1;box-shadow:0 2px 0 #8c877d}
.lap-cam{position:absolute;left:50%;top:4px;width:6px;height:6px;margin-left:-3px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#3c3f78,#0b0b1a)}
.lap-base{position:relative;height:20px;margin:-2px -36px 0;border-radius:3px 3px 28px 28px;background:linear-gradient(180deg,#e4e0d7 0%,#c4bfb5 55%,#a7a298 100%);box-shadow:inset 0 1px 0 #fffc,0 38px 46px -14px rgba(30,20,70,.5),0 10px 18px -8px rgba(30,20,70,.35)}
.lap-base i{position:absolute;left:50%;top:0;width:180px;height:8px;margin-left:-90px;border-radius:0 0 14px 14px;background:linear-gradient(180deg,#a09b91,#cfcbc1)}
@media(max-width:760px){.mf-stage{aspect-ratio:auto;height:500px;overflow:hidden}}

/* Phone: lock-screen live activity, then the same conversation with Yochi (approval, then a spoken answer) */
.lk-live{margin:22px 0 0;text-align:left;background:linear-gradient(145deg,#ffffff26,#ffffff12);box-shadow:inset 0 0 0 1px #ffffff2e;-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)}
.lk-notif{margin-top:10px}
.ch-av{width:28px;height:28px;border-radius:50%;background:#e9e4f6;object-fit:cover;object-position:50% 12%}
.ch-who{display:grid;line-height:1.15}.ch-who b{font-size:13px;letter-spacing:-.02em}.ch-who small{font-size:9.5px;color:#8a8494}
.ps-ok .ok-top,.ps-rep .ok-top{gap:8px}
.ps-bub{margin:12px 0 0;padding:10px 12px;max-width:92%;border-radius:16px 16px 16px 5px;background:#fff;box-shadow:0 0 0 1px #2a1f3d0d;font-size:11px;line-height:1.4}
.ps-ok .ps-bub{margin-bottom:2px}
.ps-rep [data-t0]{opacity:0;transform:translateY(10px);transition:opacity .5s ease,transform .7s cubic-bezier(.16,1,.3,1)}
.ps-rep [data-t0].on{opacity:1;transform:none}
.ps-rep .rp-sug{margin-top:10px}
.ps-voice{display:flex;align-items:center;gap:9px;margin:10px 0 0 auto;padding:10px 13px;max-width:78%;width:max-content;border-radius:16px 16px 5px 16px;background:#141118;color:#fff;font-size:11.5px;font-weight:500}
.ps-voice .vw{display:flex;align-items:center;gap:2px;height:14px}.ps-voice .vw i{display:block;width:2.5px;height:5px;border-radius:2px;background:#cdbdff;animation:ps-wave .9s ease-in-out infinite}
.ps-voice .vw i:nth-child(2){animation-delay:.12s}.ps-voice .vw i:nth-child(3){animation-delay:.24s}.ps-voice .vw i:nth-child(4){animation-delay:.36s}.ps-voice .vw i:nth-child(5){animation-delay:.48s}
/* Perf: the wave animates height (a layout each frame); it only needs to run while the message is shown. */
.ps-voice:not(.on) .vw i{animation-play-state:paused}
@keyframes ps-wave{0%,100%{height:4px}50%{height:14px}}
.ps-done{display:grid;gap:6px;margin-top:10px}.ps-done em{justify-self:start;padding:3px 8px;border-radius:99px;background:#e7f6ee;color:#12804f;font-style:normal;font-size:9.5px;font-weight:600}
.ps-comp{position:absolute;left:12px;right:12px;bottom:22px;display:flex;align-items:center;gap:8px;height:42px;padding:0 5px 0 14px;border-radius:21px;background:#fff;box-shadow:0 0 0 1px #2a1f3d14,0 10px 20px -14px #2a1f3d66;color:#9a94a5;font-size:11px}
.ps-comp span{flex:1}
.rp-mic{position:relative;flex:none;width:32px;height:32px;border:0;border-radius:50%;background:#141118;color:#fff;display:grid;place-items:center;padding:0}
.rp-mic svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.rp-mic .mic-live{position:absolute;inset:-5px;border-radius:50%;border:2px solid #7a5cf4;opacity:0;transform:scale(.8)}
.rp-mic .mic-live.on{opacity:1;transform:none;animation:ps-mic 1.1s ease-in-out infinite}
@keyframes ps-mic{50%{transform:scale(1.14);opacity:.45}}

/* Face ID sheet, modelled on the real iPhone sequence: the black square grows out of the Dynamic Island, a green loop scans, the face turns into a green smile, then the square shrinks back into the island. Classes set by mission.js: .on (51.0 s), .ok (52.0 s), .out (52.95 s). */
.faceid{position:absolute;z-index:9;left:50%;top:9px;width:78px;height:23px;margin-left:-39px;border-radius:12px;background:#000;overflow:hidden;display:grid;place-items:center;opacity:0;transition:width .42s cubic-bezier(.3,1.35,.4,1),height .42s cubic-bezier(.3,1.35,.4,1),margin-left .42s cubic-bezier(.3,1.35,.4,1),border-radius .42s cubic-bezier(.3,1.35,.4,1),opacity .08s linear;box-shadow:0 14px 34px rgba(0,0,0,.22)}
.faceid.on{opacity:1;width:98px;height:98px;margin-left:-49px;border-radius:27px}
.faceid.on.out{width:78px;height:23px;margin-left:-39px;border-radius:12px;box-shadow:none;transition:width .34s cubic-bezier(.5,0,.3,1),height .34s cubic-bezier(.5,0,.3,1),margin-left .34s cubic-bezier(.5,0,.3,1),border-radius .34s cubic-bezier(.5,0,.3,1),opacity .06s linear .3s;opacity:0}
.faceid svg{display:block;flex:none;width:98px;height:98px;overflow:visible}
.faceid g{opacity:0;transform-box:view-box;transform-origin:50% 50%}
.fid-prompt path{fill:#87FA89}
.faceid.on .fid-prompt{animation:fid-prompt .62s ease both .1s}
@keyframes fid-prompt{0%{opacity:0;transform:scale(.8)}35%{opacity:1;transform:none}75%{opacity:1}100%{opacity:0;transform:scale(1.04)}}
.fid-ring{fill:none;stroke:#87FA89;stroke-width:4.5;stroke-linecap:round;filter:drop-shadow(0 0 5px rgba(135,250,137,.75));transform-box:fill-box;transform-origin:center}
.faceid.on .fid-scan{animation:fid-scan-in .2s ease both .45s}
.faceid.ok .fid-scan{animation:fid-scan-out .24s ease both}
@keyframes fid-scan-in{from{opacity:0}to{opacity:1}}
@keyframes fid-scan-out{from{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.6)}}
.fid-ring.r1{animation:fid-turn 1.05s linear infinite}
.fid-ring.r2{animation:fid-turn 1.05s linear infinite -.35s;opacity:.85}
.fid-ring.r3{animation:fid-turn 1.05s linear infinite -.7s;opacity:.7}
@keyframes fid-turn{0%{transform:rotate(0deg) scaleX(1)}25%{transform:rotate(45deg) scaleX(.28)}50%{transform:rotate(90deg) scaleX(1)}75%{transform:rotate(135deg) scaleX(.28)}100%{transform:rotate(180deg) scaleX(1)}}
.fid-ok{opacity:0}
.faceid.ok .fid-ok{opacity:1}
.fid-face,.fid-eye,.fid-smile{fill:none;stroke:#87FA89;stroke-width:5;stroke-linecap:round;filter:drop-shadow(0 0 4px rgba(135,250,137,.5))}
.fid-face{stroke-dasharray:214;stroke-dashoffset:214;transform-box:fill-box;transform-origin:center;transform:rotate(-90deg)}
.fid-eye{stroke-dasharray:11;stroke-dashoffset:11}
.fid-smile{stroke-dasharray:44;stroke-dashoffset:44}
.faceid.ok .fid-face{animation:fid-draw .34s cubic-bezier(.3,.7,.3,1) both .06s}
.faceid.ok .fid-eye{animation:fid-draw-eye .16s ease both .32s}
.faceid.ok .fid-eye.e2{animation-delay:.38s}
.faceid.ok .fid-smile{animation:fid-draw-smile .26s ease both .44s}
@keyframes fid-draw{to{stroke-dashoffset:0}}
@keyframes fid-draw-eye{to{stroke-dashoffset:0}}
@keyframes fid-draw-smile{to{stroke-dashoffset:0}}
@media(prefers-reduced-motion:reduce){.fid-ring{animation:none!important}}