/* "Just one question." closing section on every mini product page
   (iteration 256): the Family Edition version — phone with the four
   steps (Download / Open / Spin / Watch), two bubbles, coral CTA, store
   badges. Ported from family/family.copy.css, scoped to .jo-phone. */
.jo-phone .ophone { position: relative; flex: none; width: min(100%, 340px); max-width: 380px; aspect-ratio: 796 / 1576; container-type: inline-size; filter: drop-shadow(0 20px 36px rgba(26,26,26,.14)); margin-inline: auto; }
.jo-phone .ophone__frame { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; }
.jo-phone .ophone__screen { position: absolute; z-index: 1; left: 4%; right: 4%; top: 2.2%; bottom: 2.2%; border-radius: 12cqw; overflow: hidden; background: #f6f8fa; display: flex; flex-direction: column; padding: 17cqw 5.5cqw 0; }
.jo-phone .ophone__title { margin: 0 0 6cqw; display: flex; justify-content: center; }
.jo-phone .ophone__title img { width: 34cqw; height: auto; display: block; }
.jo-phone .ophone__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4.5cqw; }
.jo-phone .ophone__row { --c: #f06858; position: relative; display: flex; align-items: center; justify-content: space-between; gap: 3cqw; min-height: 27cqw; padding: 0 4cqw 0 9cqw; background: #fff; border-radius: 4cqw; overflow: hidden; box-shadow: 0 1.5cqw 5cqw rgba(26,26,26,.06); }
.jo-phone .ophone__row::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4.5cqw; background: var(--c); }
.jo-phone .ophone__row--yellow { --c: #ffbd48; }
.jo-phone .ophone__row--blue { --c: #94b7d5; }
.jo-phone .ophone__row--teal { --c: #96ccca; }
.jo-phone .ophone__row p { margin: 0; font-family: var(--text); font-size: 4.6cqw; line-height: 1.25; color: #2b2f33; text-align: left; max-width: none; }
.jo-phone .ophone__row strong { font-weight: 800; }
.jo-phone .ophone__ic { flex: none; width: 13cqw; height: 13cqw; border-radius: 50%; background: var(--c); color: #fff; display: grid; place-items: center; }
.jo-phone .ophone__ic svg { width: 6.5cqw; height: 6.5cqw; }
.jo-phone .ophone__tabbar { margin-top: auto; height: 15cqw; display: flex; align-items: center; justify-content: space-around; border-top: 1px solid #e8ecef; background: #fff; margin-inline: -5.5cqw; padding-inline: 8cqw; }
.jo-phone .ophone__tabbar i { width: 6cqw; height: 6cqw; border-radius: 2cqw; border: .6cqw solid #c9ced3; }
.jo-phone .ophone__tabbar i.on { width: 20cqw; border: 0; background: #fff3dc; }

.jo-phone .just-one-q__stage { position: relative; width: 100%; max-width: 440px; min-height: 0; margin-inline: auto; display: flex; justify-content: center; }
.jo-phone .just-one-q__bubble { font-family: var(--display); font-weight: 700; font-size: 1.125rem; text-align: left; white-space: nowrap; max-width: none; }
.jo-phone .jo-phone__cta { margin-top: 0.5rem; background: var(--coral); color: #fff; border-color: var(--coral); }
.jo-phone .jo-phone__cta:hover { background: var(--coral-deep); border-color: var(--coral-deep); color: #fff; }
.jo-phone .store-badges { margin-top: 1.5rem; }

@media (min-width: 48.01rem) {
  .jo-phone .just-one-q__bubble--top { top: -6%; left: 52%; right: auto; bottom: auto; }
  .jo-phone .just-one-q__bubble--bottom { bottom: 4%; right: 82%; left: auto; top: auto; }
}
@media (max-width: 48rem) {
  .jo-phone .just-one-q__stage { max-width: 20rem; }
  .jo-phone .ophone { width: 15rem; }
  .jo-phone .just-one-q__bubble { font-size: 0.95rem; }
  .jo-phone .just-one-q__bubble--top { top: -4%; right: -2%; left: auto; bottom: auto; }
  .jo-phone .just-one-q__bubble--bottom { bottom: 6%; left: -2%; right: auto; top: auto; }
}

/* Phones: centred column, tighter gap under the phone, store badges equal size on one line (house rule). */
@media (max-width: 59.99rem) {
  .jo-phone .just-one-q__grid { row-gap: 2.5rem; }
  .jo-phone .just-one-q__content,
  .jo-phone .just-one-q__content :is(h2, p) { text-align: center; margin-inline: auto; }
  .jo-phone .store-badges { display: flex; flex-wrap: nowrap; justify-content: center; gap: 0.75rem; }
  .jo-phone .store-badge { flex: 0 1 9.75rem; min-width: 0; width: auto; height: 3.25rem; justify-content: flex-start; }
}
@media (max-width: 22.5rem) {
  .jo-phone .store-badge { padding-inline: 0.7rem; gap: 0.5rem; }
}
/* Tablets / small laptops: the stage hugs the page edge, so the bottom
   bubble sits on the phone instead of hanging off-screen to the left. */
@media (min-width: 48.01rem) and (max-width: 80rem) {
  .jo-phone .just-one-q__bubble--bottom { right: auto; left: -1rem; }
}