/* The MiriFX App chapter (Six, 24 Oct 2026): ink and gold, the copy of the promo ads on the left, a real phone on the
   right whose screen follows the medal: each level's panel, Bronze to Pro. Coming soon. */
.appx{padding-block:clamp(80px,12vh,130px)!important}
.appx .appx-in{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(30px,5vw,80px);align-items:center}
.appx .k{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.appx-soon{font:600 10.5px var(--m);font-style:normal;letter-spacing:.2em;text-transform:uppercase;padding:6px 12px;border-radius:999px;border:1px solid rgba(227,192,138,.55);color:#e3c08a}
.appx h2.big{margin:14px 0 0;font-size:clamp(36px,4.4vw,64px);line-height:1}
.appx-f{list-style:none;margin:clamp(24px,4vh,40px) 0 0;padding:0;display:grid;gap:12px}
.appx-f li{display:grid;gap:4px;padding:16px 20px;border-radius:20px;background:linear-gradient(160deg,rgba(255,255,255,.07),rgba(255,255,255,.02));border:1px solid rgba(227,192,138,.22);border-left:2px solid #c69670}
.appx-f b{font-size:17px;color:#f4ead9}.appx-f span{font-size:14.5px;line-height:1.5;color:#b9b1a4}
.appx-r{display:grid;justify-items:center;gap:18px}
.appx-dev{width:min(320px,70vw);aspect-ratio:390/844;padding:10px;box-sizing:content-box;border-radius:56px;position:relative;
 background:linear-gradient(135deg,#6b6d72,#2a2b2e 18%,#1a1b1d 50%,#3d3f43 82%,#8a8c91);
 box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.22),inset 0 0 0 5px #0b0b0c,0 60px 100px -40px rgba(0,0,0,.95),0 0 80px -10px rgba(227,192,138,.25)}
.appx-scr{position:relative;width:100%;height:100%;border-radius:46px;overflow:hidden;background:#e9e5df}
.appx-scr img{position:absolute;left:0;right:0;bottom:0;top:42px;width:100%;height:calc(100% - 42px);object-fit:cover;object-position:top;transition:opacity .22s ease,transform .22s ease}
.appx-scr img.sw{opacity:0;transform:scale(.98)}
.appx-sb{position:absolute;top:15px;left:30px;right:24px;display:flex;justify-content:space-between;align-items:center;font:600 14px -apple-system,var(--f);color:#17191c;z-index:2}
.appx-sb svg{width:50px;height:13px}
.appx-isl{position:absolute;top:11px;left:50%;transform:translateX(-50%);width:96px;height:28px;border-radius:20px;background:#000;z-index:3}
.appx-cap{margin:0;display:grid;justify-items:center;gap:3px;text-align:center}
.appx-cap b{font:600 12px var(--m);letter-spacing:.2em;text-transform:uppercase;color:#e3c08a}.appx-cap span{font-size:13.5px;color:#9d968a}
.appx-meds{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.appx-meds button{width:52px;height:52px;display:grid;place-items:center;border-radius:16px;border:1px solid rgba(227,192,138,.2);background:rgba(255,255,255,.04);cursor:pointer;padding:0;transition:transform .2s,background .2s,border-color .2s}
.appx-meds img{width:34px;height:auto;clip-path:polygon(50% 1%,98% 26%,98% 74%,50% 99%,2% 74%,2% 26%);filter:grayscale(.5) opacity(.7)}
.appx-meds button[aria-pressed=true]{background:rgba(227,192,138,.14);border-color:#e3c08a;transform:translateY(-3px)}
.appx-meds button[aria-pressed=true] img{filter:none}
.appx-meds button:focus-visible{outline:2px solid #e3c08a;outline-offset:3px}
.appx .nps{margin-top:clamp(36px,6vh,60px)}
@media (max-width:900px){
 .appx .appx-in{grid-template-columns:minmax(0,1fr)}
 .appx-r{order:2}
 .appx h2.big{font-size:clamp(32px,9vw,44px)}
 .appx-meds button{width:44px;height:44px;border-radius:13px}.appx-meds img{width:28px}
}
@media (prefers-reduced-motion:reduce){.appx-scr img,.appx-meds button{transition:none}}
/* on the phone the graphics come first: the phone and its medals, then the four lines */
@media (max-width:900px){.appx .appx-l{display:contents}.appx .appx-l .k,.appx .appx-l h2{order:-2}.appx-r{order:-1;margin-top:8px}.appx .appx-l .appx-f{margin-top:22px}}