/* iPhone answer-engine simulator for the VisibleRev hero.
   Replaces the hero .stage chat card on the homepage. */

.sim{position:relative;display:flex;flex-direction:column;align-items:center;gap:22px;--sys:-apple-system,BlinkMacSystemFont,'SF Pro Text','Segoe UI',system-ui,sans-serif}
.sim::before{content:"";position:absolute;left:50%;top:44%;width:520px;height:520px;transform:translate(-50%,-50%);background:radial-gradient(circle,rgba(15,159,202,.28),rgba(15,159,202,0) 62%);pointer-events:none}

/* ---------- Hardware: "iPhone 18 Pro", Deep Blue finish ---------- */
.iphone{position:relative;width:320px;height:668px;border-radius:58px;padding:4px;
  background:linear-gradient(145deg,#56647c 0%,#27324a 22%,#1a2438 50%,#33425d 78%,#141c2b 100%);
  box-shadow:0 0 0 1px rgba(255,255,255,.08) inset,0 40px 80px rgba(13,30,47,.45),0 12px 24px rgba(13,30,47,.25)}
.iphone .glass{height:100%;border-radius:54px;background:#050608;padding:9px}
.iphone .hw{position:absolute;width:4px;border-radius:2px;background:linear-gradient(90deg,#10182a,#46546d)}
.hw.action{left:-3px;top:118px;height:30px}
.hw.volup{left:-3px;top:170px;height:54px}
.hw.voldn{left:-3px;top:236px;height:54px}
.hw.power{right:-3px;top:190px;height:88px;background:linear-gradient(270deg,#10182a,#46546d)}
.hw.cam{right:-3px;top:400px;height:44px;background:linear-gradient(270deg,#10182a,#5a6883)}

.screen{position:relative;height:100%;border-radius:45px;overflow:hidden;background:#fff;display:flex;flex-direction:column;font-family:var(--sys);color:#0d0d0d;-webkit-font-smoothing:antialiased}
.island{position:absolute;left:50%;top:10px;width:82px;height:25px;margin-left:-41px;border-radius:14px;background:#000;z-index:5}
.statusbar{height:46px;flex:none;display:flex;align-items:center;justify-content:space-between;padding:4px 26px 0 34px;font-size:15px;font-weight:600;letter-spacing:-.01em}
.statusbar span:last-child{display:flex;align-items:center;gap:5px}
.statusbar svg{height:11.5px;width:17px;flex:none}
.statusbar svg:last-child{width:25px;height:12px}
.home-ind{position:absolute;left:50%;bottom:7px;width:118px;height:4.5px;margin-left:-59px;border-radius:3px;background:#0d0d0d;z-index:5}

/* ---------- Shared app regions ---------- */
.app{flex:1;min-height:0;display:flex;flex-direction:column;animation:app-in .35s ease}
@keyframes app-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.hdr{height:44px;flex:none;display:flex;align-items:center;gap:6px;padding:0 12px}
.hdr .ttl{flex:1;display:flex;align-items:center;justify-content:center;gap:4px;font-size:16.5px;font-weight:600}
.ib{width:34px;height:34px;display:grid;place-items:center;flex:none}
.ib svg,.acts svg{width:20px;height:20px}
.thread{flex:1;min-height:0;overflow:hidden;padding:4px 16px 0;display:flex;flex-direction:column;font-size:14.5px;line-height:1.5}
.thread>.ask,.thread>.think,.thread>.reply,.thread>.acts{display:none}
.app.sent .thread>.empty{display:none}
.app.sent .thread>.ask{display:block;animation:app-in .3s ease}
.app.thinking .thread>.think{display:flex}
.app.answering .thread>.reply{display:block}
.app.done .thread>.acts{display:flex;animation:app-in .3s ease}
.empty{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding-bottom:40px}
.reply .w{opacity:0;transition:opacity .22s ease}
.reply .w.on{opacity:1}
.reply p{margin:0 0 9px}
.reply .li{margin:0 0 7px;padding-left:18px;position:relative}
.reply .li>i{position:absolute;left:0;font-style:normal;font-weight:600}
.blur{filter:blur(3.5px);user-select:none}
.hl{background:linear-gradient(transparent 55%,rgba(242,190,68,.55) 55%);font-weight:700;border-radius:2px}
.acts{align-items:center;gap:14px;margin-top:4px;color:#5d5d5d}
.acts .sp{flex:1}
.sfav{width:16px;height:16px;border-radius:50%;display:inline-grid;place-items:center;font-size:8.5px;font-weight:800;color:#fff;border:1.5px solid #fff;flex:none}
.sfav.y{background:#D9A42D}.sfav.g{background:#fff;color:#4285F4;box-shadow:0 0 0 1px #ddd inset}.sfav.b{background:#1A324A}
.favs{display:inline-flex}.favs .sfav+.sfav{margin-left:-6px}
.composer{flex:none;padding:6px 10px 24px}
.qfield:empty::before{content:attr(data-ph);color:#8f8f8f}
.caret{display:inline-block;width:1.5px;height:1.05em;background:currentColor;vertical-align:-2px;margin-left:1px;animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.shimmer{background:linear-gradient(90deg,#9a9a9a 0%,#9a9a9a 40%,#e6e6e6 50%,#9a9a9a 60%,#9a9a9a 100%);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:shim 1.4s linear infinite;font-weight:500}
@keyframes shim{from{background-position:100% 0}to{background-position:-100% 0}}

/* ---------- ChatGPT (iOS, light) ---------- */
.app-chatgpt{font-size:14.5px}
.app-chatgpt .hdr{gap:2px;padding:0 8px}
.app-chatgpt .hdr .ttl{justify-content:flex-start;padding-left:8px;font-size:16.5px;font-weight:600;letter-spacing:-.01em}
.ttl-chev{display:inline-grid;width:13px;color:#9b9b9b;margin-left:2px}
.ttl-chev svg{width:13px;height:13px;stroke-width:2.4}
.ib-sm svg{width:19px;height:19px}
.app-chatgpt .empty{justify-content:flex-end;align-items:stretch;padding:0 0 8px;margin:0 -16px}
.sugs{display:flex;gap:8px;overflow:hidden;padding:0 16px}
.sug{flex:none;width:150px;background:#f4f4f4;border-radius:16px;padding:10px 13px;text-align:left;font-size:13px;line-height:1.3}
.sug b{display:block;font-weight:600;color:#0d0d0d}
.sug span{color:#8f8f8f}
.app.kbd .sugs{display:none}
.app-chatgpt .ask .bub{margin-left:auto;max-width:80%;width:fit-content;background:#f4f4f4;border-radius:19px;padding:8px 14px;font-size:14.5px;line-height:1.4}
.app-chatgpt .think{margin-top:18px;align-items:center;min-height:20px}
.app-chatgpt .think .shimmer{display:none}
.app-chatgpt.searching .think .gdot{display:none}
.app-chatgpt.searching .think .shimmer{display:inline}
.gdot{display:inline-block;width:11px;height:11px;border-radius:50%;background:#0d0d0d;animation:gpulse 1.1s ease-in-out infinite}
.gdot.trail{width:9px;height:9px;margin-left:4px;vertical-align:-1px}
@keyframes gpulse{50%{transform:scale(.72);opacity:.75}}
.app-chatgpt .reply{margin-top:14px;font-size:14.5px;line-height:1.52;color:#0d0d0d}
.app-chatgpt .reply p{margin:0 0 10px}
.app-chatgpt .reply .li{margin:0 0 9px;padding-left:19px}
.app-chatgpt .reply .li>i{font-weight:400}
.app-chatgpt .reply b{font-weight:600}
.app-chatgpt .cite{display:inline-block;background:#f0f0f0;color:#5d5d5d;border-radius:999px;font-size:10.5px;font-weight:500;padding:1px 8px;margin-left:3px;vertical-align:1px;line-height:1.55}
.app-chatgpt .cite em{font-style:normal;color:#8f8f8f;margin-left:2px}
.app-chatgpt .acts{gap:13px;color:#5d5d5d;margin-top:2px}
.app-chatgpt .acts svg{width:18px;height:18px}
.app-chatgpt .srcbtn{display:inline-flex;align-items:center;gap:6px;border:1px solid #e5e5e5;border-radius:999px;padding:3px 10px 3px 5px;font-size:12px;font-weight:500;color:#0d0d0d}
.app-chatgpt .composer{padding:6px 10px 26px}
.app-chatgpt .pill{display:flex;align-items:flex-end;gap:4px;min-height:44px;border:1px solid #e3e3e3;border-radius:24px;padding:5px 5px 5px 4px;background:#fff;box-shadow:0 2px 10px rgba(0,0,0,.06)}
.app-chatgpt .plusbtn,.app-chatgpt .micbtn{width:32px;height:32px;display:grid;place-items:center;flex:none;color:#0d0d0d}
.app-chatgpt .plusbtn svg,.app-chatgpt .micbtn svg{width:20px;height:20px}
.app-chatgpt .qfield{flex:1;min-width:0;align-self:center;font-size:14.5px;line-height:1.38;padding:4px 2px}
.app-chatgpt .go{width:32px;height:32px;border-radius:50%;background:#0d0d0d;color:#fff;display:grid;place-items:center;flex:none}
.app-chatgpt .go svg{width:17px;height:17px}
.app-chatgpt .go .send svg{stroke-width:2.4}
.go .send,.app.typed .go .idle{display:none}
.app.typed .go .send{display:block}

/* ---------- iOS keyboard (shared) ---------- */
.kb{flex:none;height:0;overflow:hidden;background:#d5d7dd;transition:height .3s cubic-bezier(.2,.8,.2,1);font-family:var(--sys)}
.app.kbd .kb{height:204px}
.app.kbd .composer{padding-bottom:6px}
.kb-in{padding:7px 3px 0;display:flex;flex-direction:column;gap:9px;--kw:calc((100% - 36px) / 10)}
.kr{display:flex;gap:4px;justify-content:center}
.k{width:var(--kw);height:33px;flex:none;display:grid;place-items:center;background:#fff;border-radius:5px;box-shadow:0 1px 0 #8e9096;font-size:17px;color:#0d0d0d;transition:background .08s}
.k.down{background:#b4b8c0}
.k.fn{width:auto;flex:1;background:#adb2bb;font-size:13.5px}
.k.fn svg{width:18px;height:18px}
.k.wide{flex:1.35}
.k.space{width:auto;flex:4.6;font-size:14px}
.kr .gap{width:6px;flex:none}
.kb-bot{display:flex;justify-content:space-between;padding:2px 20px 0;color:#50545c}
.kb-bot svg{width:22px;height:22px}

.crow{display:flex;align-items:center;gap:10px;color:#0d0d0d}
.crow svg{width:21px;height:21px}
.crow .sp{flex:1}

/* ---------- Perplexity (iOS, light) ---------- */
.app-perplexity{background:#FCFCF9;color:#13343B}
.app-perplexity .hdr{gap:0;padding:0 6px}
.app-perplexity .hdr .ttl{flex:1}
.app-perplexity:not(.sent) .hdr .ib{visibility:hidden}   /* home screen has no thread actions */
.app-perplexity .empty{padding-bottom:30px}
.plogo svg{width:40px;height:40px;stroke-width:1.5}
.app-perplexity .wordmark{margin-top:10px;font-size:27px;font-weight:500;letter-spacing:-.035em;color:#13343B}
.app-perplexity .ask h2{font-family:var(--sys);font-size:20px;font-weight:500;line-height:1.25;letter-spacing:-.015em;color:#13343B;margin:4px 0 12px}
.ptabs{display:flex;gap:18px;font-size:13.5px;font-weight:600;color:#64645f;border-bottom:1px solid #e8e8e3}
.ptabs>span{display:flex;align-items:center;gap:5px;padding-bottom:8px}
.ptabs svg{width:15px;height:15px;display:block}
.ptab-logo{display:inline-flex;width:15px}
.ptabs .on{color:#13343B;box-shadow:inset 0 -2px 0 #13343B}
.app-perplexity .think{flex-direction:column;gap:8px;margin-top:14px;font-size:13.5px}
.step{display:flex;align-items:center;gap:7px;color:#13343B;font-weight:500}
.step .st{width:15px;height:15px;display:grid;place-items:center;flex:none}
.step .st svg{width:15px;height:15px;color:#20808D;stroke-width:2.4;display:none}
.spin{width:13px;height:13px;border:2px solid #cfe3e5;border-top-color:#20808D;border-radius:50%;animation:rot .8s linear infinite}
@keyframes rot{to{transform:rotate(360deg)}}
.app-perplexity.searching .s1 .spin{display:none}
.app-perplexity.searching .s1 .st svg{display:block}
.app-perplexity .s2{display:none}
.app-perplexity.searching .s2{display:flex;animation:app-in .3s ease}
.s2 .favs{margin-left:4px}
.s2 .sfav{width:15px;height:15px;font-size:6.5px}
.s2 .cnt{font-size:12px;color:#64645f;font-weight:500}
.qchips{display:flex;flex-wrap:wrap;gap:6px;padding-left:22px}
.qchips span{display:inline-flex;align-items:center;gap:4px;background:#f0f0ea;border-radius:8px;padding:3px 9px 3px 7px;font-size:11.5px;color:#64645f}
.qchips svg{width:11px;height:11px;stroke-width:2.4}
.app-perplexity .reply{margin-top:12px;font-size:14.5px;line-height:1.55;color:#13343B}
.app-perplexity .reply p{margin:0 0 10px}
.app-perplexity .reply p.h{font-weight:600;font-size:15px;margin:12px 0 6px}
.app-perplexity .reply b{font-weight:600}
.app-perplexity .reply .li{margin:0 0 6px;padding-left:16px}
.cards{display:flex;gap:7px;margin-bottom:12px}
.card{flex:1;min-width:0;background:#f3f3ee;border-radius:10px;padding:7px 8px;font-size:10.5px;line-height:1.3;color:#13343B}
.card b{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-weight:600;margin-bottom:5px;min-height:2.6em}
.card span{display:flex;align-items:center;gap:4px;color:#64645f}
.card .sfav{width:13px;height:13px;font-size:7px;border:0}
.app-perplexity .cite{display:inline-block;background:#ebebe6;color:#64645f;border-radius:6px;font-size:10.5px;font-weight:500;padding:0 6px;margin-left:2px;vertical-align:1px;line-height:1.65}
.app-perplexity .cite em{font-style:normal;opacity:.75;margin-left:2px}
.app-perplexity .acts{color:#64645f;gap:16px;padding-bottom:10px;border-bottom:1px solid #ecece6}
.app-perplexity .acts svg{width:18px;height:18px}
.thread>.rel{display:none}
.app.done .thread>.rel{display:block;animation:app-in .35s ease .15s both}
.rel-h{display:flex;align-items:center;gap:7px;font-weight:600;font-size:15px;margin:12px 0 4px}
.rel-h svg{width:17px;height:17px;color:#20808D}
.rel-q{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 0;border-bottom:1px solid #ecece6;font-size:13.5px}
.rel-q span{color:#20808D;display:grid}
.rel-q svg{width:16px;height:16px}
.app-perplexity .box{background:#fff;border:1px solid #e3e3dd;border-radius:22px;padding:10px 8px 7px 14px;box-shadow:0 4px 14px rgba(19,52,59,.06)}
.app-perplexity .qfield{display:block;min-height:21px;font-size:14.5px;line-height:1.4;padding-bottom:7px}
.app-perplexity .crow{color:#64645f;gap:9px}
.app-perplexity .crow svg{width:19px;height:19px}
.seg{display:inline-flex;gap:2px;background:#f0f0ea;border-radius:10px;padding:2px;margin-left:-6px}
.seg>span{width:30px;height:26px;display:grid;place-items:center;border-radius:8px;color:#64645f}
.seg>.on{background:#fff;color:#20808D;box-shadow:0 0 0 1px #d7e9ea}
.seg svg{width:16px!important;height:16px!important}
.app-perplexity .go{width:32px;height:32px;border-radius:50%;background:#20808D;color:#fff;display:grid;place-items:center}
.app-perplexity .go svg{width:17px;height:17px}

/* ---------- Gemini (iOS, light) ---------- */
.app-gemini{--gsans:'Google Sans','Product Sans',Roboto,var(--sys);font-family:var(--gsans);color:#1f1f1f}
.app-gemini .hdr .ttl{justify-content:flex-start;font-size:19px;font-weight:500;padding-left:4px;letter-spacing:-.01em}
.avatar{width:30px;height:30px;border-radius:50%;background:#7b5aa6;color:#fff;display:grid;place-items:center;font-size:14px;font-weight:600;margin-left:4px}
.app-gemini .empty{align-items:flex-start;justify-content:flex-end;text-align:left;padding:0 4px 14px}
.app-gemini .empty .hi{display:flex;align-items:center;gap:6px;font-size:17px;font-weight:500;color:#444746;margin:0}
.app-gemini .empty .hi svg{width:18px;height:18px}
.app-gemini .empty h3{font-family:var(--gsans);font-size:27px;font-weight:500;letter-spacing:-.02em;line-height:1.2;color:#1f1f1f;margin:4px 0 18px}
.gchips{display:flex;flex-direction:column;align-items:flex-start;gap:8px}
.gchips span{display:inline-flex;align-items:center;gap:8px;background:#f0f4f9;border-radius:999px;padding:8px 15px 8px 12px;font-size:13.5px;font-weight:500;color:#1f1f1f}
.gchips svg{width:17px;height:17px;color:#444746}
.app.kbd .gchips{display:none}
.app-gemini .ask .bub{margin-left:auto;max-width:78%;width:fit-content;background:#E9EEF6;border-radius:22px 4px 22px 22px;padding:10px 15px;font-size:14.5px;line-height:1.4}
.app-gemini .think{align-items:center;gap:10px;margin-top:18px}
.app-gemini .think svg{width:24px;height:24px;animation:rot 1.6s linear infinite}
.app-gemini .reply{margin-top:14px;font-size:14.5px;line-height:1.6;color:#1f1f1f}
.app-gemini .reply p{margin:0 0 10px}
.app-gemini .reply b{font-weight:700}
.app-gemini .reply .li{margin:0 0 8px;padding-left:18px}
.app-gemini .reply .spark{display:block;width:24px;height:24px;margin-bottom:8px}
.app-gemini .cite{display:inline-flex;align-items:center;gap:4px;background:#f0f4f9;color:#444746;border-radius:999px;font-size:10.5px;font-weight:500;padding:1px 7px 1px 3px;margin-left:2px;vertical-align:1px;line-height:1.5}
.app-gemini .cite .sfav{width:13px;height:13px;font-size:6px;border:0}
.app-gemini .acts{color:#444746;gap:15px}
.app-gemini .acts svg{width:18px;height:18px}
.app-gemini .srcbtn{display:inline-flex;align-items:center;gap:6px;background:#f0f4f9;border-radius:999px;padding:4px 10px 4px 5px;font-size:12px;font-weight:500;color:#1f1f1f}
.app-gemini .box{background:#fff;border:1px solid #dde3ea;border-radius:26px;padding:12px 8px 7px 16px;box-shadow:0 2px 10px rgba(31,31,31,.06)}
.app-gemini .qfield{display:block;min-height:21px;font-size:15px;line-height:1.4;padding-bottom:8px}
.app-gemini .qfield:empty::before{color:#5f6368}
.app-gemini .crow{color:#444746;gap:8px}
.app-gemini .crow svg{width:19px;height:19px}
.app-gemini .tools{font-size:13.5px;font-weight:500;display:flex;align-items:center;gap:5px}
.app-gemini .model{display:inline-flex;align-items:center;gap:1px;font-size:13px;font-weight:500;padding:4px 6px 4px 10px;border-radius:999px}
.app-gemini .model svg{width:14px;height:14px}
.app-gemini .go{width:34px;height:34px;border-radius:50%;background:#f0f4f9;display:grid;place-items:center;color:#1f1f1f}
.app-gemini.typed .go{background:#0b57d0;color:#fff}

/* ---------- Claude (iOS, light) ---------- */
.app-claude{--serif:ui-serif,'New York','Tiempos Text',Georgia,serif;background:#FAF9F5;color:#141413}
.app-claude .hdr .ttl{font-size:16.5px;font-weight:600;letter-spacing:-.01em}
.app-claude .ttl-chev{width:14px}
.app-claude .ttl-chev svg{width:14px;height:14px}
.cmark{display:inline-grid;width:22px;height:22px;flex:none}
.cmark svg{width:100%;height:100%}
.app-claude .empty{padding-bottom:50px}
.app-claude .empty .cmark{width:38px;height:38px;margin-bottom:10px}
.app-claude .empty h3{font-family:var(--serif);font-size:27px;font-weight:400;letter-spacing:-.02em;color:#141413}
.app-claude .ask .bub{margin-left:auto;max-width:80%;width:fit-content;background:#F0EEE6;border-radius:18px;padding:9px 14px;font-size:14.5px;line-height:1.4}
.app-claude .think{align-items:center;gap:9px;margin-top:18px}
.spin-b svg{animation:rot 2.4s linear infinite}
.app-claude .reply{margin-top:14px;font-family:var(--serif);font-size:15px;line-height:1.55;color:#141413}
.app-claude .reply p{margin:0 0 10px}
.app-claude .reply .li{margin:0 0 8px;padding-left:19px}
.app-claude .reply .li>i{font-weight:400}
.app-claude .reply b{font-weight:600}
.tool{display:flex;align-items:center;gap:7px;border:1px solid #e6e3d9;background:#fff;border-radius:10px;padding:7px 10px;margin-bottom:12px;font-family:var(--sys);font-size:12.5px;color:#3d3d3a}
.tool svg{width:14px;height:14px;flex:none}
.tool span{flex:1;font-weight:500}
.tool em{font-style:normal;color:#8c8a82}
.tool i{display:grid}
.app-claude .cite{display:inline-block;font-family:var(--sys);background:#F0EEE6;color:#5e5d59;border-radius:6px;font-size:10.5px;font-weight:500;padding:0 6px;margin-left:2px;vertical-align:1px;line-height:1.65}
.cburst{display:inline-grid;width:15px;height:15px;margin-left:4px;vertical-align:-2px}
.cburst svg{width:100%;height:100%;animation:rot 2.4s linear infinite}
.app-claude .acts{gap:15px;color:#5e5d59}
.app-claude .acts svg{width:18px;height:18px}
.app-claude .acts .cmark{width:20px;height:20px}
.retry{display:inline-flex;align-items:center;gap:4px;font-size:12.5px;font-weight:500}
.retry svg{width:15px!important;height:15px!important}
.app-claude .box{background:#fff;border:1px solid #e6e3d9;border-radius:20px;padding:11px 8px 7px 15px;box-shadow:0 3px 12px rgba(20,20,19,.05)}
.app-claude .qfield{display:block;min-height:21px;font-size:14.5px;line-height:1.4;padding-bottom:8px}
.app-claude .qfield:empty::before{color:#8c8a82}
.app-claude .crow{color:#3d3d3a;gap:10px}
.app-claude .crow svg{width:19px;height:19px}
.app-claude .model{display:inline-flex;align-items:center;gap:2px;font-size:12.5px;font-weight:500;color:#5e5d59}
.app-claude .model svg{width:13px;height:13px}
.app-claude .go{width:32px;height:32px;border-radius:9px;background:#F0EEE6;color:#3d3d3a;display:grid;place-items:center}
.app-claude.typed .go{background:#D97757;color:#fff}
.app-claude .go svg{width:17px;height:17px}

/* ---------- Engine switcher + badge ---------- */
.sim-tabs{position:relative;display:flex;flex-wrap:wrap;justify-content:center;gap:4px;padding:5px;background:var(--navy);border-radius:28px;box-shadow:0 14px 30px rgba(13,30,47,.25)}
.sim-tab{display:flex;align-items:center;gap:7px;border:0;background:transparent;color:rgba(255,255,255,.75);font:700 14.5px/1 var(--body);padding:10px 15px 10px 11px;border-radius:999px;cursor:pointer;transition:background .2s,color .2s}
.sim-tab svg{width:20px;height:20px;flex:none}
.sim-tab:hover{color:#fff;background:rgba(255,255,255,.08)}
.sim-tab[aria-selected="true"]{background:#fff;color:var(--navy-deep)}
.sim-tab:focus-visible{outline:3px solid var(--blue-bright);outline-offset:2px}
.sim-hint{margin:-8px 0 0;font-size:13px;font-weight:600;color:var(--muted)}
.sim .youbadge{top:0;bottom:auto;right:auto;left:calc(50% + 150px);opacity:0;transform:rotate(-4deg) scale(.8);transition:opacity .3s,transform .35s cubic-bezier(.3,1.6,.5,1);pointer-events:none;white-space:nowrap}
.sim .youbadge.on{opacity:1;transform:rotate(-4deg) scale(1)}
@media (max-width:960px){.sim .youbadge{left:auto;right:calc(50% - 190px)}.sim .youbadge::before{display:none}}
@media (max-width:620px){.sim-tab{font-size:13.5px;padding:9px 11px 9px 9px;gap:6px}.sim-tab svg{width:18px;height:18px}}
/* narrow screens: no room beside the phone, so the badge sits on its top corner (like the live site's mobile badge) */
@media (max-width:620px){.sim .youbadge{top:-14px!important;left:auto;right:calc(50% - 170px);font-size:15px;padding:8px 13px}}
@media (max-width:420px){.iphone{transform:scale(.9);margin:-34px 0}.sim .youbadge{right:8px;top:4px!important}}