/* Top-of-page notice bar, the closing card, and the recent-order toasts.
   Loaded by every page.

   Was launch.css. When the launch offer came down, the offer-only rules
   (.was-price, .launch-tag, .launch-line and the countdown clock) went with it
   — but the toast styles below are used by recent-orders.js on all four pages,
   so the file had to survive under an honest name rather than be deleted.

   launch.js and its countdown are no longer referenced by any page. The file is
   kept for the next launch; nothing here depends on it.

   Everything is built from the tokens in styles.css so it retints with
   body[data-product] like the rest of the site. */

/* ── the bar above the nav ── */
.notice-bar {
  position: relative;
  z-index: 60;
  background: linear-gradient(100deg, #131313 0%, #2a2a2e 55%, #131313 100%);
  color: #fff;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.notice-in {
  max-width: var(--max);
  margin: 0 auto;
  padding: 10px 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px 16px;
  font-size: 14px;
}
.notice-flag {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-weight: 700;
  letter-spacing: 0.01em;
}
.notice-flag .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #34d399;
  box-shadow: 0 0 0 0 rgba(52, 211, 153, 0.7);
  animation: notice-ping 2s ease-out infinite;
}
@keyframes notice-ping {
  70%,
  100% {
    box-shadow: 0 0 0 7px rgba(52, 211, 153, 0);
  }
}
.notice-copy {
  color: rgba(255, 255, 255, 0.78);
}
.notice-copy b {
  color: #fff;
  font-weight: 700;
}
.notice-bar .btn {
  padding: 7px 15px;
  font-size: 13.5px;
  border: 0;
  background: #fff;
  color: #131313;
}
.notice-bar .btn:hover {
  transform: none;
  filter: brightness(0.94);
}

/* ── offer pricing ──
   Back in use for the free-first-month offer. The old price stays in the markup
   inside the <s>, so ending the offer is a delete rather than a re-typing
   exercise: remove the <s> and the badge, and put that number back as the
   price. See the README. */
.was-price {
  display: block;
  font-size: 15px;
  font-weight: 600;
  color: var(--text-3);
  text-decoration: line-through;
  text-decoration-thickness: 1.5px;
  margin-bottom: 2px;
}
.launch-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-bottom: 10px;
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(var(--accent-rgb), 0.12);
  color: rgb(var(--accent-rgb));
  font-size: 12px;
  font-weight: 750;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
/* "Free" earns green rather than the product accent — it is the one word on the
   page doing the selling, and it should not read as just another badge. */
.launch-tag.free {
  background: var(--ok-wash);
  color: var(--ok);
}
.plan.best .launch-tag {
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
}

/* ── the closing card above the final CTA ── */
.closer {
  margin-top: 22px;
  padding: 26px;
  border-radius: 20px;
  border: 1px dashed rgba(var(--accent-rgb), 0.4);
  background: rgba(var(--accent-rgb), 0.05);
  text-align: center;
}
.closer h3 {
  font-size: 20px;
  font-weight: 750;
  letter-spacing: -0.02em;
}
.closer p {
  margin: 8px auto 0;
  max-width: 520px;
  color: var(--text-2);
  font-size: 15px;
}

/* ── recent-order toasts ──
   Rendered by recent-orders.js from recent-orders.json. With an empty JSON the
   container is never created, so none of this ever paints. */
.order-toasts {
  position: fixed;
  left: 18px;
  bottom: 18px;
  z-index: 70;
  display: grid;
  gap: 10px;
  pointer-events: none;
}
.order-toast {
  display: flex;
  align-items: center;
  gap: 11px;
  max-width: 330px;
  padding: 11px 15px 11px 12px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: var(--surface);
  box-shadow: 0 18px 44px -18px rgba(19, 19, 19, 0.4);
  opacity: 0;
  transform: translateY(12px);
  transition:
    opacity 0.38s var(--ease),
    transform 0.38s var(--ease);
}
.order-toast.is-in {
  opacity: 1;
  transform: none;
}
.ot-check {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  flex: none;
  border-radius: 50%;
  background: var(--ok-wash);
  color: var(--ok);
  font-weight: 800;
  font-size: 14px;
}
.ot-body {
  min-width: 0;
  display: grid;
}
.ot-line {
  font-size: 14px;
  color: var(--text-2);
}
.ot-line b {
  color: var(--text);
  font-weight: 700;
}
.ot-prod {
  color: rgb(var(--accent-rgb)) !important;
}
.ot-meta {
  font-size: 12.5px;
  color: var(--text-3);
}

/* The WhatsApp bubble owns the bottom-right; on a phone the toast would sit on
   top of the sticky CTA, so it steps aside. */
@media (max-width: 760px) {
  .order-toasts {
    left: 12px;
    right: 12px;
    bottom: 84px;
  }
  .order-toast {
    max-width: none;
  }
}

@media (max-width: 760px) {
  .notice-in {
    padding: 9px 16px;
    font-size: 13px;
    gap: 6px 10px;
  }
  /* On a phone the bar has to stay one tidy line of meaning, so the long
     sentence goes and the flag + button remain. */
  .notice-copy {
    display: none;
  }
}