/* Contrast corrections: keep the bright brand palette for surfaces,
   use darker ink wherever those surfaces carry small text. */
:root {
  --accent-ink: #ad205f;
  --teal-ink: #00685c;
}
.logo small { color: var(--teal-ink); }
h2.title .hl { color: var(--accent-ink); }
.btn-pink, .pill-cart em { color: var(--navy); }
.add:hover { color: var(--navy); }
.step:nth-child(2) .num,
.step:nth-child(3) .num,
.step:nth-child(4) .num { color: var(--navy); }
.result > div:first-child { color: var(--teal-ink) !important; }
#illatbar .eyebrow,
.ticket.pop > div:first-child { color: var(--navy) !important; }
.rev .stars { color: #876000; }
.machine-card button:disabled {
  opacity: 1;
  background: #e2e8f0;
  color: #34435b;
  border: 1px solid #9aa8bc;
}
#game-area > div { color: #4b5e7c !important; }
.light-form input::placeholder,
.light-form textarea::placeholder { color: #58657b; opacity: 1; }

/* Keep the whole label on a solid background, including its end letters. */
.scard .tag {
  top: 16px;
  right: 14px;
  transform: none;
  padding: 4px 10px;
  max-width: calc(100% - 100px);
  border-radius: 999px;
  background: #ffe0ee;
  color: #8d184d;
  font-size: 11px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

/* Opaque backing protects text from animated bubbles and gradient peaks. */
.hero .badge,
.hero .mini,
.hero .btn-ghost { background: #173b72; }
.hero p.lead { color: #f0f6ff; }
.hero .stat > span { color: #f0f6ff !important; }

/* Reserve space for the floating cards instead of covering the display.
   Their existing floating animation is preserved. */
.machine { padding-top: 100px; }
.machine .fc1 { top: 22px; left: 18px; }
.machine .fc2 { bottom: 78px; right: 18px; }
.machine .drum { margin-bottom: 74px; max-width: 100%; }
.machine-top { flex-wrap: wrap; gap: 10px; }
.machine-screen {
  flex: 1 0 auto;
  text-align: center;
  white-space: nowrap;
  font-size: clamp(12px, 3.3vw, 15px);
  background: #0a1a3c;
  color: #83f5e2;
}
.machine-btns button { padding-inline: 12px; }

/* Responsive navigation also works when viewing the unbuilt source. */
@media (max-width: 600px) {
  .bubbles-laundry > nav {
    display: grid;
    grid-template-columns: 1fr;
    gap: 9px;
    padding: 10px 12px;
  }
  .bubbles-laundry > nav > .logo { font-size: 20px; gap: 9px; }
  .bubbles-laundry .logo-mark { width: 34px; height: 34px; }
  .bubbles-laundry .logo small { font-size: 9px; letter-spacing: .13em; }
  .bubbles-laundry .nav-cta { width: 100%; justify-content: space-between; gap: 7px; }
  .bubbles-laundry .pill { padding: 7px 10px; font-size: 13px; white-space: nowrap; }
  .bubbles-laundry #hamb { flex: 0 0 40px; width: 40px; height: 40px; }
  .bubbles-laundry .nav-links.open { top: 100%; margin-top: 6px; }
  .bubbles-laundry .hero { padding-top: 190px; }
  .machine { width: 100%; padding-inline: 18px; }
  .machine-top .dots { width: 100%; }
  .machine-screen { flex-basis: 100%; padding-inline: 8px; }
  .book-grid > *, .form-card, .calc > * { min-width: 0; }
  .form-card input { min-width: 0; }
}