/* The installed app: safe areas, and its few quiet messages. */
/* Installed on iPhone, the page runs under the status bar and notch, so everything inside the app moves clear of them. */
#app{padding-top:env(safe-area-inset-top);padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right)}
.pwapills{position:fixed;z-index:60;bottom:calc(140px + env(safe-area-inset-bottom));left:0;right:0;display:flex;flex-direction:column;align-items:center;gap:6px;pointer-events:none}
.pwapills:empty{display:none}
.pwapill{pointer-events:auto;font:500 13px var(--ui);color:var(--t);background:var(--s2);border:1px solid var(--line2);border-radius:99px;padding:7px 14px;box-shadow:0 6px 18px rgba(0,0,0,.35)}
.pwapill[hidden]{display:none}
button.pwapill{cursor:pointer;min-height:36px}
.pwapill.sig{color:var(--sig)}
.pwapill:focus-visible{outline:2px solid var(--sig);outline-offset:2px}
.offergrid{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:start;gap:10px 12px}
.offergrid .grow{grid-column:2}
.offergrid .dmx{grid-column:3;grid-row:1}
.offergrid .btn{grid-column:2/-1;justify-self:start}
.installcard{position:fixed;z-index:40;left:12px;right:12px;bottom:calc(84px + env(safe-area-inset-bottom));max-width:440px;margin:0 auto;background:var(--s2);border:1px solid var(--line2);box-shadow:0 12px 32px rgba(0,0,0,.45);animation:installin .22s ease-out}
.installcard[hidden]{display:none}
/* A new version matters more than the offer, and they'd sit in the same spot. */
.pwapills:has(.pwapill:not([hidden])) ~ .installcard{display:none}
.installicon{flex:none;width:40px;height:40px;border-radius:10px}
.installsteps{list-style:none;padding:0;margin:10px 0 2px;display:flex;flex-direction:column;gap:8px;font-size:14px}
.installsteps li{display:flex;align-items:flex-start;gap:9px}
.stepnum{flex:none;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font:600 12px var(--ui);background:var(--s3);color:var(--sig)}
@keyframes installin{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.installcard{animation:none}}
@media (min-width:900px){.installcard{left:auto;right:24px;bottom:24px;width:400px}.pwapills{bottom:84px}}