/* Built4More — Snapshot quiz styles
   -------------------------------------------------------------------
   Additive only. Loaded AFTER site.css; uses ONLY the design tokens
   declared in site.css :root — no new colors anywhere. Every new
   class is snap- prefixed so nothing can collide. Mobile-first.
   Reduced motion: site.css already collapses all transitions globally
   under prefers-reduced-motion; nothing here re-introduces motion.
------------------------------------------------------------------- */

/* ---------- quiz section + card ---------- */
.snap-section{ padding: var(--section-y) 0; }

.snap-card{
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 24px;
  box-shadow: var(--shadow-md);
  max-width: 640px;
  margin: 0 auto;
}
@media (min-width: 640px){
  .snap-card{ padding: clamp(28px, 4vw, 44px); }
}

/* quiet trust line under the card (page-level) */
.snap-trust{ max-width: 640px; margin: 18px auto 0; }

/* ---------- progress (reuses .modal-progress segments) ---------- */
.snap-progress .modal-progress{ margin-bottom: 10px; }
.snap-progress-label{
  font-size: 12px;
  letter-spacing: .06em;
  color: var(--ink-mute);
  margin: 0 0 24px;
}

/* ---------- steps ---------- */
.snap-stage{ position: relative; }

.snap-q-title{
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: -.015em;
  font-size: clamp(26px, 2.6vw, 38px);
  line-height: 1.1;
  color: var(--ink);
  margin: 10px 0 18px;
}
.snap-sub-title{
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(21px, 2vw, 27px);
  line-height: 1.15;
  color: var(--ink);
  margin: 26px 0 14px;
}
.snap-q-title:focus,
.snap-sub-title:focus,
.snap-result-title:focus{ outline: none; }

.snap-help{
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 0 0 22px;
}

/* step transitions — incoming fades up 8px, outgoing fades down 8px.
   site.css neutralises these automatically under reduced motion. */
.snap-enter{
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .25s var(--ease), transform .25s var(--ease);
}
.snap-enter.in{ opacity: 1; transform: none; }
.snap-leave{
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity .2s var(--ease), transform .2s var(--ease);
}

/* ---------- options (reuses .opt) ---------- */
.snap-opts{ margin: 0 0 6px; }
.snap-opts .opt{ min-height: 48px; }

/* explicit picked state — same look as hover, so touch users get the
   same confirmation mouse users do */
.snap-opt--picked,
.snap-opt--picked:hover{
  border-color: var(--peach);
  background: var(--peach-soft);
  transform: none;
}

/* ---------- 1–10 tactile chips ---------- */
.snap-chips{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 6px 0 10px;
}
.snap-chip{
  flex: 1 1 calc(20% - 8px);   /* wraps 5 + 5 on narrow screens */
  min-width: 48px;
  min-height: 48px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--white);
  color: var(--ink);
  font-weight: 600;
  font-size: 16px;
  transition: border-color .2s var(--ease), background .2s var(--ease), color .2s var(--ease), transform .15s var(--ease);
}
.snap-chip:hover{
  border-color: var(--peach);
  background: var(--peach-soft);
  transform: translateY(-2px);
}
.snap-chip.picked,
.snap-chip.picked:hover{
  background: var(--blue);
  border-color: var(--blue);
  color: var(--cream);
  transform: none;
}
.snap-chip-labels{
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: var(--ink-mute);
  margin-bottom: 6px;
}

/* ---------- open-text line (Q3) + standalone text questions ---------- */
.snap-owntext{
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--line-soft);
}
.snap-owntext--solo{
  margin-top: 4px;
  padding-top: 0;
  border-top: 0;
}
.snap-owntext-label{
  display: block;
  font-size: 13px;
  letter-spacing: .06em;
  font-weight: 500;
  color: var(--ink-soft);
  margin-bottom: 8px;
}
.snap-owntext input{
  width: 100%;
  padding: 14px 16px;
  font: inherit;
  font-size: 16px;   /* prevents iOS zoom-on-focus */
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--cream);
  color: var(--ink);
  transition: border-color .2s var(--ease), background .2s var(--ease);
}
.snap-owntext input:focus{
  outline: none;
  border-color: var(--peach);
  background: var(--white);
}
.snap-continue{ margin-top: 14px; }

/* ---------- back link ---------- */
.snap-back{
  margin-top: 20px;
  font-size: 14px;
  color: var(--ink-soft);
  border-bottom-color: var(--line);
}
.snap-back:hover{
  color: var(--peach-deep);
  border-color: var(--peach-deep);
}

/* ---------- Q9 closeness block ---------- */
.snap-closeness{ margin-top: 8px; }
.snap-closeness[hidden]{ display: none; }

/* ---------- gate ---------- */
.snap-gate .snap-start{
  width: 100%;
  justify-content: center;
  margin-top: 4px;
}
.snap-gate .form-note a{
  color: var(--blue);
  border-bottom: 1px solid var(--peach);
}
.snap-gate .form-note a:hover{ color: var(--peach-deep); }
.snap-error{
  font-size: 14px;
  color: var(--peach-deep);
  margin: 0 0 14px;
}

/* ---------- result ---------- */
.snap-score{
  display: flex;
  align-items: baseline;
  gap: 4px;
  margin: 6px 0 0;
}
.snap-score-num{
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(56px, 8vw, 84px);
  line-height: 1;
  color: var(--blue);
}
.snap-score-of{
  font-size: 18px;
  font-weight: 600;
  color: var(--ink-mute);
}
.snap-result .result-bar{ margin: 14px 0 26px; }
.snap-result-title{
  font-size: clamp(30px, 3.4vw, 44px);
  line-height: 1.1;
  margin: 0 0 16px;
}
.snap-result-line{
  font-size: 18px;
  line-height: 1.6;
  color: var(--ink-2);
  margin: 0 0 14px;
}
.snap-readback{
  font-size: 16px;
  line-height: 1.65;
  color: var(--ink-soft);
  margin: 0 0 22px;
}
.snap-offer{
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink-2);
  background: var(--blue-tint);
  border-radius: var(--radius);
  padding: 16px 18px;
  margin: 0 0 22px;
}
.snap-cta-row{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  margin-bottom: 10px;
}
.snap-cta-row .btn{
  white-space: normal;
  text-align: center;
  justify-content: center;
}
.snap-mail-note{
  font-size: 13px;
  color: var(--ink-mute);
  text-align: center;
  margin-top: 6px;
}
.snap-mail-note[hidden]{ display: none; }

/* ---------- about block under the quiz (2026-09-09) ----------
   Three short sections so the page has readable text for search engines; the quiz is unchanged. */
.snap-about{ padding-top:0; }
.snap-about-inner{ max-width:68ch; margin:0 auto; }
.snap-about h2{ font-family:var(--font-display); font-weight:500; font-size:clamp(26px,3vw,38px); line-height:1.15; letter-spacing:-.01em; margin:40px 0 12px; color:var(--ink); }
.snap-about h2:first-child{ margin-top:0; }
.snap-about p{ font-size:18px; line-height:1.65; color:var(--ink-2); margin:0 0 18px; }