/* The "Keep in touch" box (assets/notify.js), on the home and Store pages,
   in each page's own colors. */
.notify { background: var(--panel); border: 1px solid var(--edge); border-radius: 14px; padding: 28px 26px;
  margin: 30px auto 0; max-width: 760px; text-align: center; }
.notify h3 { margin: 0; font-size: clamp(21px, 3.4vw, 26px); color: var(--ink); }
.notify p { margin: 10px auto 0; color: var(--muted); }
.notify-form { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 20px; }
.notify-form input[type=email] { flex: 1 1 220px; min-width: 0; max-width: 420px; font: inherit; color: var(--ink);
  background: var(--ground); border: 1px solid var(--edge); border-radius: 9px; padding: 13px 15px; min-height: 52px; }
.notify-form input::placeholder { color: var(--faint); }
.notify-form input:focus-visible { outline: 2px solid var(--rose); outline-offset: 2px; }
.notify-form button { flex: 0 0 auto; font: inherit; font-weight: 600; cursor: pointer; background: var(--rose); color: #1B1020;
  border: 0; border-radius: 9px; padding: 13px 26px; min-height: 52px; }
.notify-form button:hover { background: var(--cream); }
.notify-form button:focus-visible { outline: 2px solid var(--cream); outline-offset: 2px; }
.notify-form button:disabled { opacity: .6; cursor: default; }
/* A field only bots fill in (service/src/notify.ts). */
.notify-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.notify .notify-msg { color: var(--ink); font-weight: 600; }
.notify .notify-msg:empty { display: none; }
.notify .notify-msg.bad { color: var(--rose); }
.notify .notify-small { font-size: 14.5px; color: var(--faint); }
.notify .notify-small a { color: inherit; }