/* Store Check. Mobile first, assumed slow connection. Existing tokens only —
   no new colours, no new fonts. Score bands deliberately avoid red/amber/green:
   those are reserved for stock and system states, and a red band would read as
   an accusation, which appendix §0 forbids. */

.sc {
  background: var(--card);
  padding-block: clamp(32px, 6vw, 80px);
  padding-inline: max(var(--pad), calc((100% - var(--content)) / 2));
}
.sc__main > * { max-width: 34rem; }
.sc [hidden] { display: none !important; }

/* ── store gallery ───────────────────────────────────────────────────────
   A deck, not a slideshow: the top card sits square-on with the edges of the
   next two showing behind it, so it reads as more than one. Hidden below the
   breakpoint, and the controller only injects sources at that width, so a
   phone never downloads a byte of it. */
.sc__gallery { display: none; }

@media (min-width: 1100px) {
  .sc {
    display: grid;
    grid-template-columns: minmax(0, 34rem) minmax(0, 1fr);
    column-gap: clamp(36px, 5vw, 72px);
    align-items: start;
  }
  .sc__gallery {
    display: block; position: sticky; top: 96px;
    justify-self: center;        /* centred in the empty column, not hard against the form */
    width: min(100%, 320px);
    aspect-ratio: 3 / 4;
    cursor: pointer;
  }
}

.sc__gallery img {
  position: absolute; top: 0; left: 0;
  width: calc(100% - 28px); height: calc(100% - 28px);
  object-fit: cover;
  border-radius: 18px;
  border: 3px solid var(--card);
  box-shadow: 0 12px 30px -18px rgba(46, 31, 20, .55);
  transform-origin: center;
  transition: transform 520ms cubic-bezier(.22,.61,.36,1), opacity 420ms ease;
}
.sc__gallery img[data-pos="0"] { transform: none;                                    z-index: 4; opacity: 1; }
.sc__gallery img[data-pos="1"] { transform: translate(14px, 14px) rotate(1.6deg) scale(.985); z-index: 3; opacity: 1; }
.sc__gallery img[data-pos="2"] { transform: translate(28px, 28px) rotate(3.2deg) scale(.97);  z-index: 2; opacity: 1; }
.sc__gallery img[data-pos="back"] { transform: translate(28px, 28px) rotate(3.2deg) scale(.97); z-index: 1; opacity: 0; }
/* the card leaving the top slides off before it rejoins the bottom */
.sc__gallery img.is-leaving { transform: translate(-26px, -10px) rotate(-4deg) scale(.97); opacity: 0; z-index: 5; }

@media (prefers-reduced-motion: reduce) {
  .sc__gallery img { transition: none; }
}

.sc__eyebrow {
  margin: 0 0 14px; font-family: var(--mono); font-size: 10.5px;
  text-transform: uppercase; letter-spacing: .1em; color: var(--muted-2);
}
.sc h1 {
  margin: 0 0 16px;
  font-size: clamp(30px, 5vw, 46px); font-weight: 600;
  line-height: 1.05; letter-spacing: -.034em; color: var(--ink-deep);
}
.sc__sub { margin: 0 0 28px; font-size: clamp(16px, 1.4vw, 18px); line-height: 1.55; color: var(--muted); }
.sc__act { margin: 0; }
.sc__act .btn { width: 100%; justify-content: center; }
.sc__reassure { margin: 14px 0 0; font-size: 14px; color: var(--muted-2); }

/* ── progress ── */
.sc__progress { margin-bottom: 22px; }
.sc__pcount {
  margin: 0 0 8px; font-family: var(--mono); font-size: 10.5px;
  text-transform: uppercase; letter-spacing: .1em; color: var(--muted-2);
}
.sc__pbar { height: 3px; background: var(--accent-100); border-radius: 2px; overflow: hidden; }
.sc__pbar span {
  display: block; height: 100%; width: 0;
  background: var(--accent-700); border-radius: 2px;
  transition: width 260ms cubic-bezier(.22,.61,.36,1);
}

.sc__sechead { margin-bottom: 22px; }
.sc__sectitle {
  margin: 0 0 4px; font-size: 19px; font-weight: 600;
  letter-spacing: -.022em; color: var(--ink-deep);
}
.sc__secintro { margin: 0; font-size: 15px; line-height: 1.55; color: var(--muted); }

/* ── questions ── */
.sc__step { border: 0; margin: 0; padding: 0; min-width: 0; }
.sc__q {
  padding: 0; margin: 0 0 6px;
  font-size: clamp(19px, 2.4vw, 23px); font-weight: 600;
  line-height: 1.3; letter-spacing: -.022em; color: var(--ink-deep);
}
.sc__hint { margin: 0 0 14px; font-size: 14.5px; line-height: 1.5; color: var(--muted); }
.sc__q + .sc__opts, .sc__q + .field, .sc__hint + .sc__opts { margin-top: 18px; }

.sc__opts { display: grid; gap: 9px; }
.sc__opt { position: relative; display: block; }
.sc__opt input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.sc__opt span {
  display: block; padding: 15px 17px;
  font-size: 15.5px; line-height: 1.4; color: var(--ink);
  background: var(--card);
  border: 1px solid var(--line); border-radius: var(--r-inset);
  transition: border-color 130ms ease, background 130ms ease;
}
.sc__opt input:hover + span { border-color: var(--accent-400); }
.sc__opt input:focus-visible + span { border-color: var(--accent-700); box-shadow: 0 0 0 3px var(--accent-200); }
.sc__opt input:checked + span {
  border-color: var(--accent-700); background: var(--accent-50); color: var(--accent-900); font-weight: 500;
}

.sc__check { display: flex; gap: 11px; align-items: flex-start; margin-top: 18px; cursor: pointer; }
.sc__check input { width: 18px; height: 18px; margin: 1px 0 0; flex: none; accent-color: var(--accent-700); }
.sc__check span { font-size: 14.5px; line-height: 1.5; color: var(--muted); }
.sc__check a { color: var(--accent-700); text-decoration: underline; text-underline-offset: 2px; }

.sc__err {
  margin: 12px 0 0; padding: 10px 13px;
  font-size: 14px; line-height: 1.45; color: var(--accent-900);
  background: var(--accent-50); border: 1px solid var(--accent-200); border-radius: var(--r-inset);
}

.sc__nav { display: flex; gap: 10px; margin-top: 26px; }
.sc__nav .btn { flex: 1 1 auto; justify-content: center; }
.sc__nav [data-back] { flex: 0 0 auto; }

/* ── completion ── */
.sc__ref {
  display: inline-block; margin: 0 0 26px; padding: 9px 14px;
  font-family: var(--mono); font-size: 14px; letter-spacing: .06em;
  color: var(--card); background: var(--accent-700); border-radius: 8px;
}
.sc__scores { list-style: none; margin: 0 0 28px; padding: 0; display: grid; gap: 26px; }
.sc__scorehead { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin: 0 0 8px; }
.sc__scorelabel { font-size: 16.5px; font-weight: 600; letter-spacing: -.02em; color: var(--ink-deep); }
.sc__scoreval { font-family: var(--mono); font-size: 13px; color: var(--muted-2); }
.sc__bar { height: 8px; background: var(--accent-100); border-radius: 4px; overflow: hidden; }
.sc__bar span {
  display: block; height: 100%; width: 0; background: var(--accent-700); border-radius: 4px;
  transition: width 520ms cubic-bezier(.22,.61,.36,1);
}
.sc__band {
  margin: 8px 0 0; font-family: var(--mono); font-size: 10.5px;
  text-transform: uppercase; letter-spacing: .1em; color: var(--accent-700);
}
.sc__what { margin: 4px 0 8px; font-size: 14px; color: var(--muted-2); }
.sc__para { margin: 0; font-size: 15px; line-height: 1.62; color: var(--ink); }

.sc__gap {
  display: flex; gap: 14px; align-items: flex-start;
  margin: 0 0 28px; padding: 18px 20px;
  font-size: clamp(16px, 1.7vw, 19px); font-weight: 500; line-height: 1.5;
  letter-spacing: -.014em; color: var(--accent-900);
  background: var(--accent-50); border-radius: var(--r-inset);
}

.sc__cannot { margin: 0 0 28px; padding-top: 22px; border-top: 1px solid var(--line); }
.sc__cannot h2, .sc__range h2, .sc__wa h2 {
  margin: 0 0 12px; font-size: 19px; font-weight: 600;
  letter-spacing: -.022em; color: var(--ink-deep);
}
.sc__cannot ul { margin: 0 0 14px; padding-left: 20px; }
.sc__cannot li { margin-bottom: 7px; font-size: 15.5px; line-height: 1.55; color: var(--ink); }
.sc__cannot li::marker { color: var(--accent-400); }
.sc__cannotfoot { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--muted); }

.sc__range { margin: 0 0 28px; padding-top: 22px; border-top: 1px solid var(--line); }
.sc__rangefig {
  margin: 0 0 12px; font-size: clamp(21px, 2.6vw, 27px); font-weight: 600;
  letter-spacing: -.026em; color: var(--accent-900);
}
.sc__method { margin: 0 0 12px; }
.sc__method summary {
  cursor: pointer; font-size: 14px; color: var(--accent-700);
  text-decoration: underline; text-underline-offset: 2px;
}
.sc__method p { margin: 10px 0 0; font-size: 14.5px; line-height: 1.6; color: var(--muted); }
.sc__disclaimer { margin: 0; font-size: 14px; line-height: 1.55; color: var(--muted-2); }

.sc__sent { margin: 0 0 28px; font-size: 15px; color: var(--muted); }
.sc__wa { padding-top: 22px; border-top: 1px solid var(--line); }
.sc__wa p { margin: 0 0 16px; font-size: 15px; line-height: 1.6; color: var(--muted); }
[data-wa-link] { gap: 8px; }

.sc__exit p { margin: 0; font-size: 16px; line-height: 1.62; color: var(--muted); max-width: 46ch; }

@media (min-width: 640px) {
  .sc__act .btn, .sc__nav .btn { width: auto; }
  .sc__nav .btn { flex: 0 0 auto; }
}
@media (prefers-reduced-motion: reduce) {
  .sc__pbar span, .sc__bar span, .sc__opt span { transition: none; }
}

/* ── Q6b slider ─────────────────────────────────────────────────────────── */
.sc__slidval {
  display: block; margin: 18px 0 10px;
  font-size: clamp(20px, 2.6vw, 26px); font-weight: 600;
  letter-spacing: -.024em; color: var(--accent-900);
}
.sc__slidval[data-empty] { color: var(--muted-2); font-weight: 400; font-size: 16px; }
.sc__slider {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 30px; background: transparent; cursor: pointer; margin: 0;
}
.sc__slider::-webkit-slider-runnable-track { height: 6px; border-radius: 3px; background: var(--accent-100); }
.sc__slider::-moz-range-track { height: 6px; border-radius: 3px; background: var(--accent-100); }
.sc__slider::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 28px; height: 28px; margin-top: -11px; border-radius: 50%;
  background: var(--accent-700); border: 3px solid var(--card);
  box-shadow: 0 2px 8px -2px rgba(46,31,20,.5);
}
.sc__slider::-moz-range-thumb {
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--accent-700); border: 3px solid var(--card);
}
.sc__slider:focus-visible { outline: 2px solid var(--accent-700); outline-offset: 4px; border-radius: 4px; }
.sc__slidends {
  display: flex; justify-content: space-between; gap: 12px; margin-top: 4px;
  font-family: var(--mono); font-size: 10px; text-transform: uppercase;
  letter-spacing: .07em; color: var(--muted-2);
}
.sc__skip { margin: 18px 0 0; }
.sc__skipbtn {
  padding: 0; font-family: var(--sans); font-size: 14px;
  color: var(--muted); background: none; border: 0;
  text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}
.sc__skipbtn:hover { color: var(--ink); }
.sc__ppct { float: right; font-variant-numeric: tabular-nums; }

/* ── reference and copy control ─────────────────────────────────────────── */
/* the copy control sits inside the pill, not beside it */
.sc__ref { display: inline-flex; align-items: center; gap: 10px; padding-right: 8px; }
.sc__copy {
  display: grid; place-items: center;
  width: 28px; height: 28px; padding: 0;
  color: var(--accent-100); background: transparent;
  border: 1px solid transparent; border-radius: 7px; cursor: pointer;
  transition: background 140ms ease, color 140ms ease;
}
.sc__copy svg { width: 16px; height: 16px; }
.sc__copy:hover { background: rgba(255,255,255,.12); color: var(--card); }
.sc__copy:focus-visible { outline: 2px solid var(--accent-100); outline-offset: 2px; }
.sc__copy[data-done] { color: var(--card); background: rgba(255,255,255,.18); }
.sc__revealskip { margin: 0 0 18px; }

/* ── staged reveal ──────────────────────────────────────────────────────
   A numbered marker per block with a fill line running down between them. */
.sc__reveal { list-style: none; margin: 0; padding: 0; position: relative; }
.sc__block { position: relative; padding-bottom: 30px;
  opacity: 0; transform: translateY(10px);
  transition: opacity 420ms ease, transform 420ms cubic-bezier(.22,.61,.36,1);
}
.sc__block.is-in { opacity: 1; transform: none; }
.sc__block[data-num] { padding-left: 44px; }
.sc__block[data-num]::before {             /* 1 loss, 2 drag, 3 system */
  content: counter(scblock); counter-increment: scblock;
  position: absolute; left: 0; top: 0;
  width: 26px; height: 26px; display: grid; place-items: center;
  font-family: var(--mono); font-size: 11px;
  color: var(--muted-2); background: var(--card);
  border: 1px solid var(--line); border-radius: 50%;
  z-index: 1; transition: color 300ms ease, border-color 300ms ease;
}
.sc__block[data-num].is-in::before { color: var(--accent-700); border-color: var(--accent-700); }
.sc__block[data-num]::after {               /* the fill line between 1, 2 and 3 */
  content: ""; position: absolute; left: 13px; top: 26px; bottom: 0; width: 1px;
  background: var(--accent-700); transform: scaleY(0); transform-origin: top;
  transition: transform 520ms cubic-bezier(.22,.61,.36,1);
}
.sc__block[data-num].is-in::after { transform: scaleY(1); }
.sc__block[data-num]:last-of-type::after { display: none; }
.sc__block:not([data-num])::before, .sc__block:not([data-num])::after { display: none; }
.sc__reveal { counter-reset: scblock; }

@media (prefers-reduced-motion: reduce) {
  .sc__block { opacity: 1; transform: none; transition: none; }
  .sc__block::after { transform: scaleY(1); transition: none; }
}

.sc__gapicon { width: 22px; height: 22px; flex: none; margin-top: 1px; color: var(--accent-700); }

@media (prefers-reduced-motion: reduce) {
  .sc__copy { transition: none; }
}