/* ==========================================================================
   BOUNCE — Customer discovery survey
   ========================================================================== */

body.survey {
  background: var(--blush);
  min-height: 100svh;
}

/* ---------- Sticky top bar ---------- */
.bar {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(255, 231, 235, .88);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--ink-08);
}
.bar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-block: clamp(.55rem, 2vw, .85rem);
}
.bar__logo { width: clamp(76px, 13vw, 118px); }
.bar__logo img { width: 100%; height: auto; }
.bar__step {
  font-size: .7rem;
  font-weight: var(--w-strong);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-45);
  white-space: nowrap;
}

.progress {
  height: 4px;
  background: var(--ink-08);
  overflow: hidden;
}
.progress__fill {
  height: 100%;
  width: 0;
  background: var(--orange);
  border-radius: 0 4px 4px 0;
  transition: width .55s var(--ease-out);
}

/* ---------- Page shell ---------- */
.survey-main {
  padding-block: clamp(1.75rem, 5vw, 3.25rem) clamp(6rem, 12vw, 7rem);
}
.step { animation: stepIn .5s var(--ease-out) both; }
@keyframes stepIn {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}

.step__head { margin-bottom: clamp(1.75rem, 5vw, 2.75rem); }
.step__kicker {
  color: var(--orange);
  margin-bottom: .7rem;
}
.step__title {
  font-size: clamp(2.1rem, 8vw, 3.6rem);
  font-weight: var(--w-hero);
  letter-spacing: -.025em;
  margin-bottom: .55rem;
}
.step__sub { color: var(--ink-70); max-width: 52ch; margin: 0; }

/* ---------- Question block ---------- */
.q {
  background: var(--paper);
  border-radius: var(--radius-lg);
  padding: clamp(1.25rem, 4vw, 2rem);
  margin-bottom: clamp(.9rem, 2.5vw, 1.25rem);
  border: 1px solid var(--ink-08);
  scroll-margin-top: 96px;
}
.q.is-invalid {
  border-color: #C0341B;
  box-shadow: 0 0 0 3px rgba(192, 52, 27, .12);
}
.q__num {
  font-size: .7rem;
  font-weight: var(--w-strong);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--orange);
  margin: 0 0 .5rem;
}
.q__title {
  font-size: clamp(1.06rem, 3.4vw, 1.28rem);
  font-weight: var(--w-strong);
  line-height: 1.35;
  margin: 0 0 .35rem;
}
.q__pill {
  display: inline-block;
  vertical-align: 2px;
  margin-left: .55em;
  padding: .28em .7em;
  border-radius: 100px;
  background: var(--orange-tint);
  color: var(--orange);
  font-size: .66rem;
  font-weight: var(--w-strong);
  letter-spacing: .1em;
  text-transform: uppercase;
  white-space: nowrap;
}
.q__pill--soft {
  background: var(--ink-08);
  color: var(--ink-45);
}
.q__help {
  margin: 0 0 1.1rem;
  color: var(--ink-45);
  font-size: .88rem;
}
.q__title + .q__help { margin-top: .3rem; }
.q__err {
  display: none;
  margin: .85rem 0 0;
  color: #C0341B;
  font-weight: var(--w-strong);
  font-size: .84rem;
}
.q.is-invalid .q__err { display: block; }

.q__body { margin-top: 1.05rem; }

/* ---------- Option lists (radio + checkbox) ---------- */
.opts { display: grid; gap: .5rem; }
.opts--2 { grid-template-columns: 1fr; }
@media (min-width: 620px) { .opts--2 { grid-template-columns: 1fr 1fr; } }

.opt {
  position: relative;
  display: flex;
  align-items: center;
  gap: .85rem;
  padding: .95rem 1.1rem;
  border: 2px solid var(--ink-15);
  border-radius: var(--radius);
  cursor: pointer;
  min-height: 52px;
  transition: border-color .2s var(--ease), background .2s var(--ease);
  -webkit-tap-highlight-color: transparent;
}
.opt:hover { border-color: var(--ink-45); }
.opt input { position: absolute; opacity: 0; pointer-events: none; }

.opt__mark {
  flex: 0 0 auto;
  width: 22px; height: 22px;
  border: 2px solid var(--ink-15);
  border-radius: 50%;
  display: grid;
  place-items: center;
  transition: border-color .2s var(--ease), background .2s var(--ease);
}
.opt__mark::after {
  content: '';
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--paper);
  transform: scale(0);
  transition: transform .22s var(--ease-out);
}
.opt--check .opt__mark { border-radius: 7px; }
.opt--check .opt__mark::after {
  width: 12px; height: 12px;
  border-radius: 2px;
  background: none;
  border-left: 2.5px solid var(--paper);
  border-bottom: 2.5px solid var(--paper);
  transform: rotate(-45deg) scale(0) translate(1px, -2px);
}
.opt__label { font-size: .96rem; line-height: 1.4; }
.opt__req { color: var(--orange); font-weight: 700; margin-left: .2em; }

.opt:has(input:checked) {
  border-color: var(--orange);
  background: var(--orange-tint);
}
.opt:has(input:checked) .opt__mark {
  border-color: var(--orange);
  background: var(--orange);
}
.opt:has(input:checked) .opt__mark::after { transform: scale(1); }
.opt--check:has(input:checked) .opt__mark::after {
  transform: rotate(-45deg) scale(1) translate(1px, -2px);
}
.opt:has(input:focus-visible) {
  outline: 3px solid var(--orange);
  outline-offset: 3px;
}

/* ---------- Image choice (hair type) ---------- */
.imgopts {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: .6rem;
}
@media (min-width: 560px) { .imgopts { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 900px) { .imgopts { grid-template-columns: repeat(4, 1fr); } }

.imgopt {
  position: relative;
  display: block;
  border: 3px solid transparent;
  border-radius: var(--radius);
  overflow: hidden;
  cursor: pointer;
  background: var(--cream);
  transition: border-color .2s var(--ease), transform .3s var(--ease-out);
  -webkit-tap-highlight-color: transparent;
}
.imgopt:hover { transform: translateY(-3px); }
.imgopt input { position: absolute; opacity: 0; pointer-events: none; }
.imgopt__pic {
  aspect-ratio: 3 / 4;
  background: var(--blush-deep);
  overflow: hidden;
}
.imgopt__pic img { width: 100%; height: 100%; object-fit: cover; }

.imgopt__none {
  display: grid;
  place-items: center;
  aspect-ratio: 3 / 4;
  background: repeating-linear-gradient(
    -45deg, var(--cream), var(--cream) 10px, #F4EDE9 10px, #F4EDE9 20px);
  color: var(--ink-45);
  font-weight: var(--w-body);
  font-size: .88rem;
  text-align: center;
  padding: 1rem;
}

.imgopt__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .4rem;
  padding: .65rem .8rem;
  background: var(--paper);
  border-top: 1px solid var(--ink-08);
}
.imgopt__name {
  flex: 1;
  min-width: 0;
  font-family: var(--display);
  font-weight: var(--w-strong);
  font-size: .95rem;
  line-height: 1.25;
  letter-spacing: .04em;
}
.imgopt__tick {
  width: 20px; height: 20px;
  border: 2px solid var(--ink-15);
  border-radius: 50%;
  flex: 0 0 auto;
  display: grid; place-items: center;
  transition: background .2s var(--ease), border-color .2s var(--ease);
}
.imgopt__tick svg { opacity: 0; transform: scale(.4); transition: all .22s var(--ease-out); }

.imgopt:has(input:checked) { border-color: var(--orange); }
.imgopt:has(input:checked) .imgopt__tick {
  background: var(--orange); border-color: var(--orange);
}
.imgopt:has(input:checked) .imgopt__tick svg { opacity: 1; transform: none; }
.imgopt:has(input:focus-visible) { outline: 3px solid var(--orange); outline-offset: 3px; }

/* ---------- Select ---------- */
.select {
  position: relative;
  display: block;
  max-width: 460px;
}
.select select {
  width: 100%;
  appearance: none;
  -webkit-appearance: none;
  padding: 1.02em 3rem 1.02em 1.15rem;
  border: 2px solid var(--ink-15);
  border-radius: var(--radius);
  background: var(--paper);
  font-size: .96rem;
  cursor: pointer;
  transition: border-color .2s var(--ease);
}
.select select:hover { border-color: var(--ink-45); }
.select select:not([data-empty]) { border-color: var(--orange); background: var(--orange-tint); }
.select::after {
  content: '';
  position: absolute;
  right: 1.15rem; top: 50%;
  width: 9px; height: 9px;
  border-right: 2.5px solid var(--ink);
  border-bottom: 2.5px solid var(--ink);
  transform: translateY(-70%) rotate(45deg);
  pointer-events: none;
}

/* ---------- Text inputs ---------- */
.field {
  width: 100%;
  max-width: 520px;
  padding: 1em 1.15rem;
  border: 2px solid var(--ink-15);
  border-radius: var(--radius);
  background: var(--paper);
  font-size: .96rem;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.field:focus {
  outline: none;
  border-color: var(--orange);
  box-shadow: 0 0 0 4px rgba(255, 107, 26, .16);
}
textarea.field { min-height: 92px; resize: vertical; line-height: 1.5; }

.followup {
  margin-top: .95rem;
  padding-top: .95rem;
  border-top: 1px dashed var(--ink-15);
}
.followup__label {
  display: block;
  font-size: .82rem;
  font-weight: var(--w-strong);
  color: var(--ink-45);
  margin-bottom: .5rem;
}

/* Conditional reveal */
.q[hidden] { display: none; }
.q--conditional { border-left: 4px solid var(--orange); }

/* ---------- Ranking ---------- */
.rank { display: grid; gap: .5rem; counter-reset: rank; }
.rank__item {
  display: flex;
  align-items: center;
  gap: .8rem;
  padding: .8rem .85rem;
  background: var(--paper);
  border: 2px solid var(--ink-15);
  border-radius: var(--radius);
  transition: border-color .2s var(--ease), background .2s var(--ease),
              transform .25s var(--ease-out), opacity .2s var(--ease);
}
.rank__item:hover { border-color: var(--ink-45); }
.rank__item.is-dragging { opacity: .45; border-style: dashed; }
.rank__item.is-over { border-color: var(--orange); background: var(--orange-tint); }

.rank__pos {
  flex: 0 0 auto;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--paper);
  display: grid; place-items: center;
  font-family: var(--display);
  font-weight: var(--w-strong);
  font-size: .9rem;
}
.rank__item:nth-child(1) .rank__pos { background: var(--orange); }
.rank__thumb {
  flex: 0 0 auto;
  width: 52px; height: 52px;
  border-radius: 10px;
  overflow: hidden;
  background: var(--blush-deep);
}
.rank__thumb img { width: 100%; height: 100%; object-fit: cover; }
.rank__label { flex: 1; font-size: .93rem; line-height: 1.35; }
.rank__grip {
  flex: 0 0 auto;
  color: var(--ink-45);
  cursor: grab;
  padding: .2rem;
  touch-action: none;
}
.rank__grip:active { cursor: grabbing; }
.rank__moves { display: flex; flex-direction: column; gap: 2px; flex: 0 0 auto; }
.rank__move {
  width: 32px; height: 25px;
  border: 1.5px solid var(--ink-15);
  border-radius: 6px;
  display: grid; place-items: center;
  transition: background .18s var(--ease), border-color .18s var(--ease);
}
.rank__move:hover:not(:disabled) { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.rank__move:disabled { opacity: .28; cursor: not-allowed; }
.rank__hint {
  margin: .85rem 0 0;
  font-size: .8rem;
  color: var(--ink-45);
}

/* ---------- Packaging image (Q16) ---------- */
.showcase {
  border-radius: var(--radius);
  overflow: hidden;
  margin-bottom: 1.1rem;
  background: var(--blush);
  border: 1px solid var(--ink-08);
}
.showcase img { width: 100%; height: auto; }
.showcase figcaption {
  padding: .7rem .9rem;
  font-size: .78rem;
  color: var(--ink-45);
  background: var(--paper);
  border-top: 1px solid var(--ink-08);
}
.showcase--split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
  background: var(--ink-08);
}
.showcase--split img {
  width: 100%;
  aspect-ratio: 4 / 5;
  height: auto;
  object-fit: cover;
}
@media (min-width: 640px) {
  .showcase--split img { aspect-ratio: 1 / 1; }
}

/* ---------- Footer nav ---------- */
.navbar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 40;
  background: rgba(255, 231, 235, .93);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-top: 1px solid var(--ink-08);
  padding-bottom: env(safe-area-inset-bottom);
}
.navbar__inner {
  display: flex;
  align-items: center;
  gap: .7rem;
  padding-block: .85rem;
}
.navbar__spacer { flex: 1; }
.navbar .btn { padding: .95em 1.9em; }
@media (max-width: 520px) {
  .navbar .btn { padding: .95em 1.35em; font-size: .84rem; }
}

/* ---------- Thank you ---------- */
.done { text-align: center; padding-block: clamp(3rem, 12vw, 6rem); }
.done__mark {
  width: 84px; height: 84px;
  margin: 0 auto 1.75rem;
  border-radius: 50%;
  background: var(--orange);
  display: grid; place-items: center;
  animation: pop .6s var(--ease-out) both;
}
@keyframes pop {
  0%   { transform: scale(.4); opacity: 0; }
  60%  { transform: scale(1.08); }
  100% { transform: scale(1); opacity: 1; }
}
.done__title {
  font-size: clamp(2.4rem, 9vw, 4.2rem);
  font-weight: var(--w-hero);
  letter-spacing: -.03em;
  margin-bottom: .8rem;
}
.done__sub { color: var(--ink-70); max-width: 44ch; margin: 0 auto 2rem; }
.done__tin {
  max-width: 320px;
  aspect-ratio: 4 / 3;
  margin: 2.5rem auto 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.done__tin img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 64%;
}

/* ---------- Intro / hero card ---------- */
.intro {
  background: var(--paper);
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--ink-08);
  margin-bottom: clamp(1.25rem, 3vw, 1.75rem);
  display: grid;
  grid-template-columns: 1fr;
}
@media (min-width: 780px) { .intro { grid-template-columns: 1.15fr .85fr; } }
.intro__copy .lede { font-size: clamp(.95rem, 3.6vw, 1.06rem); }
.intro__copy {
  padding: clamp(1.35rem, 4vw, 2.5rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.intro__pic { min-height: 220px; max-height: 420px; background: var(--blush-deep); }
.intro__pic img { width: 100%; height: 100%; object-fit: cover; }
.intro__facts {
  display: grid;
  grid-template-columns: repeat(3, auto);
  justify-content: start;
  gap: clamp(1rem, 5vw, 2rem);
  margin-top: 1.35rem;
  padding-top: 1.15rem;
  border-top: 1px solid var(--ink-08);
}
.intro__fact strong {
  display: block;
  font-family: var(--display);
  font-weight: var(--w-display);
  font-size: clamp(1.35rem, 5.2vw, 1.65rem);
  letter-spacing: -.01em;
  line-height: 1;
}
.intro__fact span {
  font-size: clamp(.66rem, 2.6vw, .74rem);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-45);
}

/* ---------- Saved-progress toast ---------- */
.toast {
  position: fixed;
  left: 50%;
  bottom: calc(env(safe-area-inset-bottom) + 88px);
  transform: translate(-50%, 20px);
  z-index: 50;
  background: var(--ink);
  color: var(--paper);
  padding: .7em 1.2em;
  border-radius: 100px;
  font-size: .82rem;
  font-weight: var(--w-strong);
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s var(--ease), transform .3s var(--ease-out);
}
.toast.is-on { opacity: 1; transform: translate(-50%, 0); }