/* The loyalty section's demo (main.html, #jq-reasons-to-return): the Care Bears × Pudgy
   Penguins blind box, its five character cards as buttons, and the branded experience the
   chosen card opens. Card art is shown whole, at its own proportions. Care Bears' pink and
   purple stay inside the demo phone; the controls use Jellybean's own selected, hover and
   focus styles. character-demo.tsx swaps the featured card. */

html body #jellybean-q-refined .cb-demo-stage {
  padding: 28px 28px 20px;
}
html body #jellybean-q-refined .cb-demo {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.8fr);
  grid-template-rows: auto auto 1fr;
  grid-template-areas:
    "tag tag"
    "product screen"
    "choose screen";
  gap: 18px 24px;
  align-items: start;
  text-align: left;
}
html body #jellybean-q-refined .cb-demo-tag {
  grid-area: tag;
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 30px;
  margin: 0;
  padding: 0 12px 0 10px;
  border-radius: 10px;
  background: rgb(255 255 255 / 0.75);
  box-shadow: inset 0 0 0 1px rgb(21 27 17 / 0.1);
  font-size: 13px;
  font-weight: 500;
  color: var(--jq-ink);
}
html body #jellybean-q-refined .cb-demo-tag::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #758c4d;
  box-shadow: 0 0 0 3px #d8f87f;
}
html body #jellybean-q-refined .cb-product { grid-area: product; }
html body #jellybean-q-refined .cb-choose { grid-area: choose; }
html body #jellybean-q-refined .cb-screen { grid-area: screen; }
html body #jellybean-q-refined .cb-step {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 10px;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.3;
  color: var(--pl-olive, #4c5943);
}
html body #jellybean-q-refined .cb-step span {
  display: grid;
  flex: none;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #151b11;
  color: #f7f8f2;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

/* 1. The physical product, with the code that opens the experience. */
html body #jellybean-q-refined .cb-box {
  position: relative;
  overflow: hidden;
  aspect-ratio: 800 / 607;
  border-radius: 16px;
  background: #cfe7ef;
  box-shadow: 0 1px 2px rgb(16 24 12 / 0.06), 0 14px 32px -16px rgb(16 24 12 / 0.3);
}
html body #jellybean-q-refined .cb-box img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
html body #jellybean-q-refined .cb-scan {
  position: absolute;
  right: 10px;
  bottom: 10px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px 6px 8px;
  border-radius: 10px;
  background: #151b11;
  color: #f7f8f2;
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
}
html body #jellybean-q-refined .cb-scan svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: #d8f87f;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* 2. The five cards, as buttons. Selected: ink outline, lime fill and a check. */
html body #jellybean-q-refined .cb-picks {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
}
html body #jellybean-q-refined .cb-pick {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  min-width: 0;
  min-height: 44px;
  margin: 0;
  padding: 6px 6px 8px;
  border: 1px solid rgb(21 27 17 / 0.16);
  border-radius: 12px;
  background: #fff;
  color: var(--jq-ink);
  font: inherit;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.2;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform 200ms var(--pl-ease, ease), box-shadow 200ms var(--pl-ease, ease),
    border-color 150ms, background-color 150ms;
}
html body #jellybean-q-refined .cb-pick-art {
  display: block;
  width: 100%;
}
html body #jellybean-q-refined .cb-pick-art img,
html body #jellybean-q-refined .cb-feature-art img,
html body #jellybean-q-refined .cb-slots img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 7.7% / 5.6%;
}
html body #jellybean-q-refined .cb-pick-name {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 2.4em;
  text-align: center;
  overflow-wrap: normal;
  hyphens: none;
}
html body #jellybean-q-refined .cb-pick[aria-pressed="true"] {
  padding: 5px 5px 7px;
  border: 2px solid #151b11;
  background: #d8f87f;
  box-shadow: 0 10px 22px -12px rgb(21 27 17 / 0.5);
}
html body #jellybean-q-refined .cb-pick[aria-pressed="true"]::after {
  content: "";
  position: absolute;
  top: -8px;
  right: -8px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #151b11 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d8f87f' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12 4 4 8-8'/%3E%3C/svg%3E") center / 14px no-repeat;
  box-shadow: 0 0 0 2px #fff;
}
@media (hover: hover) {
  html body #jellybean-q-refined .cb-pick:not([aria-pressed="true"]):hover {
    border-color: #6d7f5c;
    background: #f6f8ef;
  }
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  html body #jellybean-q-refined .cb-pick:hover {
    transform: translateY(-2px);
  }
}
html body #jellybean-q-refined .cb-pick:focus-visible {
  outline: 3px solid #7552d8;
  outline-offset: 3px;
}
html body #jellybean-q-refined .cb-pick:active {
  transform: translateY(0) scale(0.98);
}

/* 3. The branded experience the chosen card opens. */
html body #jellybean-q-refined .cb-phone {
  padding: 14px 14px 16px;
  border: 1px solid rgb(0 0 0 / 0.05);
  border-radius: 24px;
  background: linear-gradient(180deg, #ffe9f2 0%, #f2e7ff 100%);
  box-shadow: 0 1px 2px rgb(16 24 12 / 0.06), 0 22px 44px -18px rgb(16 24 12 / 0.32);
  color: #4b2468;
}
/* The co-brand logo is made for the brand's purple, so the app header is a purple band. */
html body #jellybean-q-refined .cb-phone-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 10px 10px 12px;
  border-radius: 14px;
  background: #5a2a86;
}
html body #jellybean-q-refined .cb-phone-logo {
  display: block;
  width: 112px;
  height: auto;
}
html body #jellybean-q-refined .cb-phone-pill {
  flex: none;
  padding: 5px 10px;
  border-radius: 999px;
  background: #e2408c;
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.2;
}
html body #jellybean-q-refined .cb-feature {
  margin-top: 12px;
  text-align: center;
}
html body #jellybean-q-refined .cb-feature-art {
  width: min(100%, 230px);
  margin-inline: auto;
  aspect-ratio: 520 / 721;
}
html body #jellybean-q-refined .cb-feature-art img {
  filter: drop-shadow(0 10px 18px rgb(75 36 104 / 0.22));
  transition: opacity 180ms ease, transform 260ms var(--pl-ease, ease);
}
html body #jellybean-q-refined [data-swapping] .cb-feature-art img {
  opacity: 0;
  transform: translateY(6px) scale(0.98);
}
html body #jellybean-q-refined .cb-feature-kicker {
  margin-top: 12px;
  font-size: 12px;
  font-weight: 500;
  color: #a2569e;
}
html body #jellybean-q-refined .cb-feature-name {
  margin-top: 2px;
  font-size: 21px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: #5b2a86;
}
html body #jellybean-q-refined .cb-feature-line {
  margin-top: 2px;
  font-size: 13px;
  line-height: 1.35;
  color: #7a4f8f;
}
html body #jellybean-q-refined .cb-cloud {
  margin-top: 12px;
  padding: 10px 12px 12px;
  border-radius: 16px;
  background: rgb(255 255 255 / 0.82);
}
html body #jellybean-q-refined .cb-cloud-title {
  font-size: 13px;
  font-weight: 600;
  color: #5b2a86;
}
html body #jellybean-q-refined .cb-slots {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 6px;
  margin: 8px 0;
  padding: 0;
  list-style: none;
}
html body #jellybean-q-refined .cb-slots li {
  aspect-ratio: 160 / 222;
  border: 1.5px dashed #cfaee0;
  border-radius: 8px;
  background: #faf3ff;
}
html body #jellybean-q-refined .cb-slots img {
  height: 100%;
  object-fit: contain;
  opacity: 0;
  transform: scale(0.9);
  transition: opacity 300ms ease, transform 360ms var(--pl-ease, ease);
}
html body #jellybean-q-refined .cb-slots li[data-found] {
  border-color: transparent;
  background: none;
}
html body #jellybean-q-refined .cb-slots li[data-found] img {
  opacity: 1;
  transform: none;
}
html body #jellybean-q-refined .cb-cloud-count {
  font-size: 12px;
  color: #6b4f7a;
}
html body #jellybean-q-refined .cb-cloud-count b {
  color: #5b2a86;
  font-weight: 600;
}
html body #jellybean-q-refined .cb-cloud-done {
  margin-top: 4px;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.4;
  color: #5b2a86;
}

/* One column when the stage is narrow: product, then the cards, then the experience. */
@container scene-stage (max-width: 560px) {
  html body #jellybean-q-refined .cb-demo {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
    grid-template-areas: "tag" "product" "choose" "screen";
    gap: 18px;
  }
  html body #jellybean-q-refined .cb-phone {
    max-width: 340px;
    margin-inline: auto;
  }
  html body #jellybean-q-refined .cb-picks {
    gap: 6px;
  }
  html body #jellybean-q-refined .cb-pick {
    padding: 5px 3px 7px;
    font-size: 10.5px;
    letter-spacing: -0.01em;
  }
  html body #jellybean-q-refined .cb-pick[aria-pressed="true"] {
    padding: 4px 2px 6px;
  }
}
@media (max-width: 650px) {
  html body #jellybean-q-refined .cb-demo-stage {
    padding: 22px 16px 18px;
  }
}
@media (prefers-reduced-motion: reduce) {
  html body #jellybean-q-refined :is(.cb-pick, .cb-feature-art img, .cb-slots img) {
    transition: none;
  }
  html body #jellybean-q-refined [data-swapping] .cb-feature-art img {
    opacity: 1;
    transform: none;
  }
}

/* The demo needs the wide column on desktop: this section takes the Identify section's
   split (narrow copy, wide visual) in place of the old scene's reverse split. */
@media (min-width: 861px) {
  html body #jellybean-q-refined #jq-reasons-to-return {
    grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
  }
}