/* Install-the-app pill + instructions sheet. Shared by the site and the member portal.
   Uses each page's own tokens, with fallbacks so it also works where a token is missing. */

.app-pill{
  display:inline-flex; align-items:center; gap:12px;
  background:var(--surface,#fff);
  border:1px solid var(--line,#e7e2db);
  border-radius:var(--pill,999px);
  padding:7px 20px 7px 8px;
  font-family:inherit; text-align:left; cursor:pointer;
  box-shadow:var(--shadow-sm, 0 1px 2px rgba(28,25,23,.05), 0 6px 16px -6px rgba(28,25,23,.08));
  transition:transform .2s var(--ease,ease), box-shadow .2s var(--ease,ease), border-color .2s var(--ease,ease);
}
.app-pill:hover{
  border-color:rgba(208,44,34,.35);
  transform:translateY(-2px);
  box-shadow:var(--shadow-lg, 0 2px 4px rgba(28,25,23,.05), 0 20px 40px -18px rgba(28,25,23,.28));
}
.app-pill:active{transform:translateY(0) scale(.985)}
.app-pill img{width:36px; height:36px; border-radius:10px; flex-shrink:0; box-shadow:0 2px 6px rgba(28,25,23,.22)}
.app-pill .pill-txt{display:flex; flex-direction:column; line-height:1.2}
.app-pill b{font-size:14.5px; font-weight:800; color:var(--ink,#1c1917); letter-spacing:.005em}
.app-pill i{font-style:normal; font-size:11.5px; font-weight:600; color:var(--ink-2,#6b6258); margin-top:1px}
.app-pill .pill-ico{
  width:16px; height:16px; margin-left:2px; flex-shrink:0;
  background:var(--brand-text,#c22c23);
  -webkit-mask:var(--pill-glyph) center/contain no-repeat;
  mask:var(--pill-glyph) center/contain no-repeat;
  --pill-glyph:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v12'/%3E%3Cpath d='m7 10 5 5 5-5'/%3E%3Cpath d='M4 20h16'/%3E%3C/svg%3E");
}
.app-pill.is-installed{border-color:rgba(30,125,56,.35); cursor:default}
.app-pill.is-installed:hover{transform:none; box-shadow:var(--shadow-sm, 0 1px 2px rgba(28,25,23,.05))}
.app-pill.is-installed .pill-ico{
  background:#1e7d38;
  --pill-glyph:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 12.5 5.2 5.2L20 7'/%3E%3C/svg%3E");
}

/* Hero placement: its own line under the two main calls to action. */
.hero-app{margin:-34px 0 46px; display:flex; justify-content:center}
@media (max-width:760px){
  .hero-app{margin:-26px 0 38px}
  .app-pill{padding:7px 16px 7px 7px; gap:10px}
  .app-pill b{font-size:13.5px}
  .app-pill i{font-size:11px}
}

/* Inline placement, used inside the member portal. */
.pwa-inline{display:flex; justify-content:center; margin:0 0 24px}

/* ---------- Instructions sheet ---------- */
.pwa-modal{
  border:none; padding:0; color:var(--ink,#1c1917);
  background:var(--surface,#fff);
  width:min(420px, calc(100% - 32px)); max-width:none;
  max-height:92vh; overflow:auto;   /* short laptop screens must never clip the top of the sheet */
  border-radius:22px;
  box-shadow:0 30px 70px -20px rgba(12,10,9,.5);
}
.pwa-modal::backdrop{background:rgba(12,10,9,.55); backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px)}
.pwa-modal[open]{animation:pwa-in .26s var(--ease,cubic-bezier(.3,.7,.3,1))}
@keyframes pwa-in{from{opacity:0; transform:translateY(12px) scale(.98)} to{opacity:1; transform:none}}
@media (prefers-reduced-motion: reduce){ .pwa-modal[open]{animation:none} }

/* Home-screen preview: this is what the icon looks like on the phone. */
.pwa-preview{
  position:relative;
  background:radial-gradient(120% 100% at 25% 0%, #3a3330 0%, #1c1917 45%, #0c0a09 100%);
  padding:26px 20px 22px; text-align:center;
}
.pwa-preview .home{display:inline-flex; flex-direction:column; align-items:center; gap:9px}
.pwa-preview img{width:68px; height:68px; border-radius:16px; box-shadow:0 10px 24px rgba(0,0,0,.5)}
.pwa-preview span{font-size:12.5px; font-weight:600; color:#fff; letter-spacing:.01em; text-shadow:0 1px 3px rgba(0,0,0,.5)}
.pwa-preview .cap{display:block; margin-top:16px; font-size:11px; font-weight:700; letter-spacing:.11em; text-transform:uppercase; color:#a8a29e}

.pwa-body{padding:22px 24px 24px}
.pwa-body h3{
  margin:0 0 6px; font-family:var(--font-display,inherit);
  font-size:19px; font-weight:800; letter-spacing:-.01em;
}
.pwa-body>p{margin:0 0 18px; font-size:14px; line-height:1.55; color:var(--ink-2,#6b6258)}
.pwa-steps{list-style:none; margin:0; padding:0; counter-reset:s}
.pwa-steps li{
  counter-increment:s; position:relative;
  padding:0 0 14px 40px; font-size:14.5px; line-height:1.5;
}
.pwa-steps li::before{
  content:counter(s); position:absolute; left:0; top:-1px;
  width:26px; height:26px; border-radius:50%;
  background:var(--brand-soft,#fbeeec); color:var(--brand-text,#c22c23);
  font-size:13px; font-weight:800; display:grid; place-items:center;
}
.pwa-steps li:last-child{padding-bottom:0}
.pwa-steps b{font-weight:800}
/* Step glyphs live here, not in an inline style: the data URIs carry quotes of their own. */
.pwa-glyph{
  display:inline-block; width:17px; height:17px; vertical-align:-3.5px; margin:0 1px;
  background:var(--ink,#1c1917);
  -webkit-mask:var(--g) center/contain no-repeat; mask:var(--g) center/contain no-repeat;
}
.pwa-glyph.g-share{--g:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v13'/%3E%3Cpath d='m8 7 4-4 4 4'/%3E%3Cpath d='M5 12v7a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-7'/%3E%3C/svg%3E")}
.pwa-glyph.g-menu{--g:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Ccircle cx='12' cy='5' r='2'/%3E%3Ccircle cx='12' cy='12' r='2'/%3E%3Ccircle cx='12' cy='19' r='2'/%3E%3C/svg%3E")}
.pwa-glyph.g-plus{--g:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M12 5v14'/%3E%3Cpath d='M5 12h14'/%3E%3C/svg%3E")}
.pwa-qr{display:block; width:190px; height:190px; margin:4px auto 14px; border-radius:12px; border:1px solid var(--line,#e7e2db)}
.pwa-url{
  display:block; text-align:center; font-size:12.5px; font-weight:700;
  color:var(--ink-2,#6b6258); word-break:break-all; margin:0 0 4px;
}
.pwa-actions{display:flex; gap:10px; margin-top:20px}
.pwa-actions button{
  flex:1; font-family:inherit; font-size:14.5px; font-weight:700; cursor:pointer;
  padding:12px 16px; border-radius:var(--pill,999px); border:none;
  transition:background .2s var(--ease,ease), color .2s var(--ease,ease), border-color .2s var(--ease,ease);
}
.pwa-actions .primary{background:var(--brand,#d02c22); color:#fff}
.pwa-actions .primary:hover{background:var(--brand-press,#b3251c)}
.pwa-actions .ghost{background:transparent; color:var(--ink-2,#6b6258); border:1.5px solid var(--line,#e7e2db)}
.pwa-actions .ghost:hover{color:var(--ink,#1c1917); border-color:var(--ink-2,#6b6258)}
.pwa-note{margin:14px 0 0; font-size:12.5px; line-height:1.5; color:var(--ink-2,#6b6258); text-align:center}
.pwa-steps + .pwa-note{margin-top:18px; padding-top:15px; border-top:1px solid var(--line,#e7e2db)}

/* Phones get a bottom sheet, which is where this control lives on a real device. */
@media (max-width:560px){
  .pwa-modal{
    width:100%; margin:auto auto 0;
    border-radius:22px 22px 0 0; max-height:92vh; overflow:auto;
  }
  .pwa-modal[open]{animation:pwa-up .28s var(--ease,cubic-bezier(.3,.7,.3,1))}
  @keyframes pwa-up{from{transform:translateY(100%)} to{transform:none}}
  .pwa-preview{padding:22px 20px 18px}
  .pwa-body{padding:20px 20px 26px}
}