/* ============================================================
   APPS STRIP — "Our apps are on Google Play" (added Oct 30, 2026)
   Badge block + dismissible announcement card for the Willow Rain
   app family on Google Play. House palette: ultra white + obsidian
   black; the badge itself is the standard black Google Play badge.
   Motion: gentle rise-in on the card, soft hover lift on badges —
   living, not loud. Respects prefers-reduced-motion.
   ============================================================ */

.apps-strip .apps-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 14px;
  margin-top: 22px;
}
.apps-card {
  background: #fff;
  border: 1px solid rgba(10, 10, 11, .1);
  border-radius: 16px;
  padding: 18px 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  box-shadow: 0 1px 3px rgba(10, 10, 11, .05);
}
.apps-card h3 { margin: 0; font-size: 1.02rem; font-weight: 800; color: #0a0a0b; }
.apps-card p { margin: 0; font-size: .88rem; line-height: 1.45; color: #454b57; flex: 1; }
.apps-card .apps-here {
  align-self: flex-start;
  font-size: .68rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  color: #2563eb; background: rgba(37, 99, 235, .09);
  padding: 3px 8px; border-radius: 999px;
}

/* --- Google Play badge (black pill, Play mark, two-line wordmark) --- */
.gp-badge {
  display: inline-flex; align-items: center; gap: 10px;
  background: #0a0a0b; color: #fff; text-decoration: none;
  border-radius: 10px; padding: 8px 14px 8px 12px;
  border: 1px solid rgba(255, 255, 255, .14);
  transition: transform .18s ease, box-shadow .18s ease;
  max-width: 100%;
}
.gp-badge:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(10, 10, 11, .22); }
.gp-badge svg { width: 22px; height: 22px; flex: none; }
.gp-badge .gp-txt { display: flex; flex-direction: column; line-height: 1.12; }
.gp-badge .gp-txt small { font-size: .58rem; letter-spacing: .14em; font-weight: 600; opacity: .85; }
.gp-badge .gp-txt strong { font-size: .98rem; font-weight: 700; letter-spacing: .01em; }

/* --- Dismissible announcement card --- */
.apps-note {
  position: fixed; right: 16px; bottom: 16px; z-index: 1200;
  width: min(340px, calc(100vw - 32px));
  background: #0a0a0b; color: #fff;
  border-radius: 18px; padding: 18px 18px 16px;
  box-shadow: 0 18px 44px rgba(10, 10, 11, .35);
  animation: apps-note-in .55s cubic-bezier(.2, .9, .25, 1) both;
}
.apps-note h3 { margin: 0 26px 6px 0; font-size: 1rem; font-weight: 800; }
.apps-note p { margin: 0 0 12px; font-size: .87rem; line-height: 1.5; color: rgba(255, 255, 255, .82); }
.apps-note .gp-badge { background: #fff; color: #0a0a0b; border-color: transparent; }
.apps-note .gp-badge .gp-txt small { opacity: .6; }
.apps-note-x {
  position: absolute; top: 8px; right: 10px;
  background: none; border: 0; color: rgba(255, 255, 255, .75);
  font-size: 1.3rem; line-height: 1; cursor: pointer; padding: 6px;
}
.apps-note-x:hover { color: #fff; }
@keyframes apps-note-in {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .apps-note { animation: none; }
  .gp-badge { transition: none; }
}