/* Spread 'Em: inviting, accessible Home Screen installation card and instructions. */
.pwa-install-card {
  position: relative;
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;
  padding: 21px 23px;
  margin: 24px 0 0;
  border: 1px solid rgba(214,255,89,.35);
  border-radius: 19px;
  background: radial-gradient(ellipse at 8% 12%, rgba(214,255,89,.14), transparent 40%), linear-gradient(125deg,#152825,#101b26 75%);
  box-shadow: 0 15px 45px rgba(0,0,0,.13);
}
.pwa-icon-frame {
  width: 88px;
  height: 88px;
  flex: none;
  overflow: hidden;
  border-radius: 21px;
  box-shadow: 0 8px 22px rgba(0,0,0,.26);
}
.pwa-icon-frame img { display: block; width: 100%; height: 100%; object-fit: cover; }
.pwa-card-text { min-width: 0; }
.pwa-card-eyebrow { display: block; margin-bottom: 7px; color: #d6ff59; font-size: .62rem; font-weight: 900; letter-spacing: .12em; line-height: 1.4; }
.pwa-install-card h2 { margin: 0 0 7px; font-size: clamp(1.05rem,2vw,1.28rem); line-height: 1.25; color: #f3f6ec; letter-spacing: -.015em; }
.pwa-install-card p { margin: 0; color: #b5c8c0; font-size: .8rem; line-height: 1.6; }
.pwa-install-button { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 46px; white-space: nowrap; }
.pwa-install-button svg { width: 17px; height: 17px; flex: none; }
.pwa-install-button:disabled { opacity: .7; cursor: default; }
.pwa-install-card.pwa-is-installed { border-color: #395d4a; }

.pwa-install-dialog {
  position: fixed;
  inset: 0;
  width: min(94vw, 500px);
  max-width: 500px;
  max-height: min(92dvh, 690px);
  padding: 0;
  border: 1px solid #415b4b;
  border-radius: 23px;
  background: #101d23;
  color: #f3f6ec;
  box-shadow: 0 32px 110px rgba(0,0,0,.55);
  overflow-y: auto;
}
.pwa-install-dialog::backdrop { background: rgba(3,8,13,.74); backdrop-filter: blur(5px); }
.pwa-dialog-inner { position: relative; padding: 27px; }
.pwa-dialog-close { position: absolute; top: 12px; right: 15px; width: 36px; height: 36px; display: grid; place-items: center; border: none; border-radius: 11px; background: rgba(255,255,255,.08); color: #f3f6ec; font-size: 23px; cursor: pointer; }
.pwa-dialog-brand { display: flex; align-items: center; gap: 15px; padding-right: 21px; margin-bottom: 24px; }
.pwa-dialog-brand img { width: 72px; height: 72px; flex: none; border-radius: 17px; box-shadow: 0 6px 20px rgba(0,0,0,.3); }
.pwa-dialog-brand h2 { margin: 0; line-height: 1.2; font-size: 1.4rem; }
.pwa-dialog-brand p { margin: 6px 0 0; color: #b5c8c0; font-size: .79rem; }
.pwa-install-steps { list-style: none; counter-reset: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.pwa-install-steps li { display: flex; gap: 13px; padding: 13px 14px; border: 1px solid #2e4141; border-radius: 12px; background: #17262b; }
.pwa-step-number { width: 27px; height: 27px; flex: none; display: grid; place-items: center; background: #d6ff59; color: #102021; font-size: .8rem; font-weight: 900; border-radius: 9px; }
.pwa-install-steps strong { font-size: .84rem; color: #f3f6ec; }
.pwa-install-steps p { margin: 5px 0 0; font-size: .76rem; line-height: 1.55; color: #bdcec6; }
.pwa-dialog-footnote { margin: 17px 0; color: #a7b8b3; font-size: .72rem; line-height: 1.5; }
.pwa-browser-note { margin: 0 0 16px; padding: 12px 14px; background: #283625; border: 1px solid #637946; border-radius: 10px; color: #ecf8d8; font-size: .79rem; line-height: 1.5; }
.pwa-dialog-done { width: 100%; min-height: 45px; }
.pwa-install-dialog button:focus-visible, .pwa-install-button:focus-visible { outline: 2px solid #d6ff59; outline-offset: 3px; }
@media (max-width: 760px) {
  .pwa-install-card { grid-template-columns: 70px minmax(0,1fr); gap: 12px; padding: 17px; }
  .pwa-icon-frame { width: 70px; height: 70px; border-radius: 17px; }
  .pwa-install-button { grid-column: 1/-1; width: 100%; }
}
@media (max-width: 430px) {
  .pwa-install-card { grid-template-columns: 61px minmax(0,1fr); padding: 14px; }
  .pwa-icon-frame { width: 61px; height: 61px; border-radius: 14px; }
  .pwa-card-eyebrow { font-size: .55rem; }
  .pwa-install-card h2 { font-size: 1rem; }
  .pwa-dialog-inner { padding: 21px 17px; }
  .pwa-dialog-brand img { width: 60px; height: 60px; }
  .pwa-dialog-brand h2 { font-size: 1.2rem; }
}
@media (prefers-reduced-motion: reduce) {
  .pwa-install-dialog { scroll-behavior: auto; }
}