/* The Curveball comparison bar.
   Deliberately not styled like the cafe: this is the wrapper, and a visitor
   should never mistake it for part of the site being demonstrated. It sits in
   Curveball's ink and coral, pinned to the bottom, and stays put while you
   scroll and click through either version. */

.cb-compare {
  position: fixed;
  left: 50%;
  bottom: 18px;
  translate: -50% 0;
  z-index: 2147483000;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px;
  border-radius: 999px;
  background: #0D1024;
  color: #fff;
  box-shadow: 0 2px 6px rgba(13, 16, 36, .28), 0 18px 44px rgba(13, 16, 36, .42);
  font-family: "Instrument Sans", system-ui, "Segoe UI", sans-serif;
  font-size: 14px;
  line-height: 1;
  max-width: calc(100vw - 24px);
}

.cb-compare__label {
  padding: 0 12px 0 14px;
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .62);
  white-space: nowrap;
}

.cb-compare__switch { display: flex; gap: 3px; background: rgba(255,255,255,.08); border-radius: 999px; padding: 3px; }

.cb-compare__btn {
  appearance: none;
  border: 0;
  min-height: 44px;
  padding: 0 18px;
  border-radius: 999px;
  background: transparent;
  color: rgba(255, 255, 255, .78);
  font: inherit;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
}
.cb-compare__btn:hover { color: #fff; background: rgba(255,255,255,.1); }
.cb-compare__btn[aria-pressed="true"] { background: #fff; color: #0D1024; font-weight: 600; }
.cb-compare__btn[aria-pressed="true"]:hover { background: #fff; }
.cb-compare__btn:focus-visible { outline: 3px solid #FF6A3D; outline-offset: 2px; }

.cb-compare__cta {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  padding: 0 18px;
  margin-left: 2px;
  border-radius: 999px;
  background: #FF6A3D;
  color: #0D1024;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}
.cb-compare__cta:hover { background: #FF7F59; }
.cb-compare__cta:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }

/* On a shared page there is nothing to compare, so the switch is replaced by a
   plain statement of that and a way back. Better than a control that lies. */
.cb-compare__note {
  padding: 0 14px;
  font-size: 13px;
  color: rgba(255,255,255,.8);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* A tier with no example yet. Visible, so you can see the ladder, but plainly
   not a thing you can press. */
.cb-compare__btn.is-soon { opacity: .38; cursor: not-allowed; }
.cb-compare__btn.is-soon:hover { background: transparent; color: rgba(255,255,255,.78); }

/* Original is not a package, it is what the cafe already had. It sits in the
   same row because that is where you want it when you are comparing, but it is
   marked out so the row does not read as six products. */
.cb-compare__btn.is-aside { color: rgba(255,255,255,.6); }
.cb-compare__btn.is-aside::after {
  content: "";
  display: inline-block;
  width: 1px;
  height: 18px;
  margin: 0 -10px 0 16px;
  vertical-align: -4px;
  background: rgba(255,255,255,.22);
}
.cb-compare__btn.is-aside[aria-pressed="true"] { color: #0D1024; }
.cb-compare__btn.is-aside[aria-pressed="true"]::after { background: rgba(13,16,36,.16); }

/* Said once, when a switch could not keep your place. */
.cb-compare__toast {
  position: fixed;
  left: 50%;
  bottom: 84px;
  translate: -50% 0;
  z-index: 2147482999;
  max-width: min(46ch, calc(100vw - 32px));
  padding: 10px 16px;
  border-radius: 12px;
  background: #241d2b;
  color: #fff;
  font-family: "Instrument Sans", system-ui, sans-serif;
  font-size: 13px;
  line-height: 1.45;
  box-shadow: 0 12px 30px rgba(13,16,36,.4);
}
.cb-compare__toast[data-go="true"] { opacity: 0; visibility: hidden; transition: opacity 500ms ease, visibility 500ms; }

/* Keep the bar clear of the page's own content. */
body { padding-bottom: 86px; }

@media (max-width: 1080px) {
  .cb-compare { left: 10px; right: 10px; translate: 0 0; bottom: 10px; }
  .cb-compare__label { display: none; }
  /* The tier list scrolls sideways instead of wrapping into a block that eats
     the page. The current tier is scrolled into view on load. */
  .cb-compare__switch { overflow-x: auto; scrollbar-width: none; max-width: 100%; }
  .cb-compare__switch::-webkit-scrollbar { display: none; }
  .cb-compare__btn { padding: 0 14px; font-size: 13px; }
  .cb-compare__note { display: none; }
  .cb-compare__cta { padding: 0 14px; font-size: 13px; }
  body { padding-bottom: 92px; }
}
@media (max-width: 560px) {
  .cb-compare { flex-wrap: wrap; row-gap: 6px; justify-content: center; }
  .cb-compare__switch { order: 1; flex: 1 1 100%; }
  .cb-compare__cta { order: 3; flex: 0 0 auto; }
  .cb-compare__toast { bottom: 112px; }
  body { padding-bottom: 130px; }
}

@media (prefers-reduced-motion: no-preference) {
  .cb-compare { transition: box-shadow 200ms ease; }
}