/* Fall Preorder campaign layer.
 *
 * Additive seasonal styling that sits ON TOP of the shipped site.css / pages.css.
 * Every value is drawn from the existing design tokens (--green, --forest, --line,
 * --mono, …) so the campaign matches the ported mockup exactly. Nothing here
 * overrides a base mockup style — retiring the campaign is just deleting these
 * classes and flipping PREORDER_ACTIVE. (The strikethrough "was" price uses the
 * design's own .price-block .price-was class, already in pages.css.) */

/* Announcement strip across the very top of the marketing pages. */
.preorder-strip { background: var(--forest-700); color: #eaf3dc; }
.preorder-strip .wrap {
  display: flex; align-items: center; justify-content: center; gap: 14px;
  min-height: 44px; padding: 9px 24px; text-align: center;
}
.preorder-strip p { margin: 0; font-size: 13.5px; font-weight: 600; letter-spacing: 0.01em; }
.preorder-strip b { color: #fff; }
.preorder-strip a {
  color: #bfe38a; font-weight: 700; white-space: nowrap;
  text-decoration: underline; text-underline-offset: 2px; transition: color .15s;
}
.preorder-strip a:hover { color: #fff; }

/* Preorder pill badge — sits where an eyebrow would, on light sections. */
.preorder-badge {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--green-tint); color: var(--green-700);
  font-family: var(--mono); font-size: 12px; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase;
  padding: 7px 13px; border-radius: 999px;
}
.preorder-badge .dot {
  width: 7px; height: 7px; border-radius: 999px; background: var(--green);
  box-shadow: 0 0 0 3px rgba(103, 153, 31, 0.18);
}

/* Inline "why preorder" note used under heroes / near CTAs. */
.preorder-note {
  display: inline-flex; align-items: center; gap: 9px;
  color: var(--ink-500); font-size: 14.5px; font-weight: 600;
}
.preorder-note svg { color: var(--green-700); flex: none; }
.preorder-note b { color: var(--ink-900); font-weight: 800; }

/* Ships / testing timeline chips. */
.preorder-timeline { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }
.preorder-timeline .pt {
  display: flex; align-items: center; gap: 10px;
  background: var(--green-tint-2); border: 1px solid var(--line);
  border-radius: 12px; padding: 11px 14px;
  font-size: 13.5px; color: var(--ink-700); font-weight: 600;
}
.preorder-timeline .pt svg { color: var(--green-700); flex: none; }
.preorder-timeline .pt b {
  display: block; color: var(--ink-900); font-weight: 800;
  font-size: 12px; letter-spacing: 0.02em;
}

/* On the dark forest final-CTA band, tint the note/anchor for contrast. */
.pdp-cta .preorder-note { color: #c2d3ae; }
.pdp-cta .preorder-note svg,
.pdp-cta .preorder-note b { color: #fff; }
.pdp-cta .cta-price .price-was { color: #9fb488; }

@media (max-width: 720px) {
  .preorder-strip .wrap { flex-direction: column; gap: 6px; padding: 10px 16px; }
}