/*
 * updates.html: the offer panel and the signup form.
 *
 * Everything here is scoped to this page's own classes. The offer panel is
 * the one piece of emphasis on the site that is a commercial claim, so it is
 * marked out as a panel rather than shouted in colour.
 */

.offer {
  border: 2px solid var(--ink, #0E1116);
  border-radius: 10px;
  padding: 1.1rem 1.25rem;
  margin: 1.5rem 0 2rem;
  background: var(--panel, rgba(0, 0, 0, 0.02));
}
.offer__head {
  margin: 0 0 .6rem;
  font-family: 'Barlow Condensed', system-ui, sans-serif;
  letter-spacing: .02em;
  text-transform: uppercase;
  font-size: 1.05rem;
}
.offer__list { margin: 0; padding-left: 1.1rem; }
.offer__list li { margin: .45rem 0; }
.offer__list b { font-variant-numeric: tabular-nums; }
.offer__list s { opacity: .65; }
.offer__fine { margin: .8rem 0 0; font-size: .92rem; opacity: .8; }

.updates-email {
  display: block;
  width: 100%;
  max-width: 28rem;
  margin: .35rem 0 .2rem;
  padding: .55rem .6rem;
  font: inherit;
  border: 1px solid currentColor;
  border-radius: 6px;
  background: transparent;
  color: inherit;
}
.updates-help { margin: .3rem 0 1rem; font-size: .9rem; opacity: .78; }

/* The boxes are the consent record, so they are given room rather than
   squeezed onto one line where a tap can miss them. */
.updates-check {
  display: flex;
  gap: .6rem;
  align-items: flex-start;
  margin: .75rem 0;
  line-height: 1.45;
}
.updates-check input { margin-top: .25rem; flex: 0 0 auto; width: 1.05rem; height: 1.05rem; }

.updates-msg { margin: .9rem 0 0; font-weight: 500; }
.updates-msg.is-ok { color: var(--good, #1a7f37); }
.updates-msg.is-bad { color: var(--bad, #b42318); }

@media (prefers-reduced-motion: no-preference) {
  .updates-msg { transition: opacity .15s ease; }
}