/* snaxe.io/archetypes/ quiz.
 *
 * Colour: ONE green, in the app's two shades, plus neutrals. Nothing else.
 * Source = the app's design system (the-snaxe/origin lib/config/theme):
 *   --green       #97c639  AppColors.primary          (buttons, accents, progress, pips)
 *   --green-dark  #6a8a28  primaryButtonShadowColor   (ledges, grass, green text on white)
 *   --ink         #080b08  snaxe.io page background
 *   --text        #1a2112  AppColors.primaryForeground (text on white and on green)
 *   --white       #ffffff  cards (the app's white containers)
 *   --gray        #9ca3af  gray400 (borders, grass on white, muted text on dark)
 *   --gray-ledge  #b3b3b3  answer-button ledge
 *   --orange      #fb923c  AppColors.orange400 (toxic-level scale + reveal paw prints ONLY)
 * Brand logo keeps its own colour (never recoloured).
 */
:root {
  --green: #97c639;
  --green-dark: #6a8a28;
  --ink: #080b08;
  --text: #1a2112;
  --white: #ffffff;
  --gray: #9ca3af;
  --gray-ledge: #b3b3b3;
  --orange: #fb923c;
  --line: rgba(255, 255, 255, 0.14);
  --font: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --grass-green: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 20' preserveAspectRatio='none'%3E%3Cg fill='%236a8a28'%3E%3Cpath d='M2 20 Q1.6 14 1 8 Q3.1 16 4 20 Z'/%3E%3Cpath d='M8 20 Q8 13 8 6 Q9.5 15 10 20 Z'/%3E%3Cpath d='M78 20 Q79.2 14 81 8 Q80.7 16 80 20 Z'/%3E%3Cpath d='M85 20 Q86.6 15.5 89 11 Q88.1 17.5 87 20 Z'/%3E%3Cpath d='M22 20 Q21.6 15 21 10 Q23.1 17 24 20 Z'/%3E%3C/g%3E%3C/svg%3E");
  --grass-gray: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 20' preserveAspectRatio='none'%3E%3Cg fill='%239ca3af'%3E%3Cpath d='M2 20 Q1.6 14 1 8 Q3.1 16 4 20 Z'/%3E%3Cpath d='M8 20 Q8 13 8 6 Q9.5 15 10 20 Z'/%3E%3Cpath d='M78 20 Q79.2 14 81 8 Q80.7 16 80 20 Z'/%3E%3Cpath d='M85 20 Q86.6 15.5 89 11 Q88.1 17.5 87 20 Z'/%3E%3Cpath d='M22 20 Q21.6 15 21 10 Q23.1 17 24 20 Z'/%3E%3C/g%3E%3C/svg%3E");
}

@font-face {
  font-family: "Nunito";
  src: url("fonts/nunito-700.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: "Nunito";
  src: url("fonts/nunito-800.woff2") format("woff2");
  font-weight: 800;
  font-display: swap;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--ink);
  color: var(--white);
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; }
a { color: var(--green); }
button { font: inherit; color: inherit; -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 3px solid var(--green); outline-offset: 3px; }
[hidden] { display: none !important; }

/* Logo always visible: the header stays pinned while the page scrolls. */
.sticky-top {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--ink);
  border-bottom: 1px solid var(--line);
}

.top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 560px;
  margin: 0 auto;
  padding: 16px;
}
.back { background: none; border: 0; color: var(--gray); cursor: pointer; padding: 8px 0 8px 12px; }

#app { max-width: 560px; margin: 0 auto; padding: 0 16px 48px; }

.screen { animation: rise 0.35s ease both; }
@keyframes rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

h1, h2, h3 { line-height: 1.12; margin: 0; letter-spacing: -0.02em; }
h1 { font-size: clamp(34px, 9vw, 48px); font-weight: 900; }
h2 { font-size: clamp(24px, 6.4vw, 30px); font-weight: 800; }

.kicker, .section-label {
  color: var(--green);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin: 0 0 10px;
}
.fine { color: var(--gray); font-size: 13px; margin: 14px 0 0; }

/* ---------- Intro ---------- */
.screen-intro { padding-top: 12px; }
.via {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px 14px;
  margin: 0 0 20px;
  font-weight: 600;
}
/* Ten animals on ONE row at every width: a 10-column grid, emoji sized to the column
   (emoji glyphs render wider than their font-size, so flex + gap overflowed at 375 px). */
.animal-parade { display: grid; grid-template-columns: repeat(10, 1fr); justify-items: center; font-size: clamp(20px, 6vw, 34px); margin: 8px 0 22px; }
.animal-parade span { animation: bob 2.4s ease-in-out infinite; }
.animal-parade span:nth-child(2n) { animation-delay: 0.3s; }
.animal-parade span:nth-child(3n) { animation-delay: 0.6s; }
@keyframes bob { 50% { transform: translateY(-6px) rotate(-4deg); } }
.lede { font-size: 19px; margin: 16px 0 18px; }
.promises { list-style: none; padding: 0; margin: 0 0 28px; color: var(--gray); }
.promises li { padding-left: 26px; position: relative; margin: 6px 0; }
.promises li::before { content: "✓"; position: absolute; left: 0; color: var(--green); font-weight: 900; }

/* ---------- Buttons + answer options ----------
 * The app's AppButton / AppContainer: radius 12, solid 5 px ledge (no blur), grass
 * blades (assets/images/leaves.svg) along the bottom in the ledge colour, press =
 * scale 0.95 over 100 ms ease-out, label = Nunito 700 16 px.
 * Primary = PrimaryAppButton. Secondary + answers = the white answer button
 * (quiz_game question_page), so no second hue enters the page.
 */
.btn,
.option {
  position: relative;
  isolation: isolate;
  border: 0;
  border-radius: 12px;
  cursor: pointer;
  font-family: "Nunito", var(--font);
  font-weight: 700;
  font-size: 16px;
  line-height: 1.25;
  transition: transform 100ms ease-out;
}
.btn::before,
.option::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 8px;
  right: 8px;
  bottom: 0;
  height: 24px;
  background: var(--grass-gray) no-repeat bottom / 100% 100%;
  pointer-events: none;
}
.btn:active, .option:active { transform: scale(0.95); }

.btn { min-height: 56px; padding: 16px 20px; margin-bottom: 5px; }
.btn-big { width: 100%; }

.btn-primary,
.option.picked {
  background: var(--green);
  color: var(--text);
  box-shadow: 0 5px 0 var(--green-dark);
}
.btn-primary::before,
.option.picked::before { background-image: var(--grass-green); }
.btn-primary:hover { filter: brightness(1.05); }

.btn-ghost,
.option {
  background: var(--white);
  color: var(--text);
  border: 2px solid var(--gray);
  box-shadow: 0 5px 0 var(--gray-ledge);
}
.btn-ghost:hover, .option:hover { border-color: var(--green-dark); }
.option.picked { border-color: var(--green); }


/* ---------- Questions ---------- */
.progress { height: 8px; background: var(--line); border-radius: 99px; overflow: hidden; margin: 4px 0 22px; }
.progress-bar { height: 100%; width: 0; background: var(--green); border-radius: 99px; transition: width 0.3s ease; }
.section-label { display: flex; justify-content: space-between; }
.section-label .count { color: var(--gray); }
.question { outline: none; margin-bottom: 10px; }
.options { display: grid; gap: 17px; margin-top: 22px; }
.option {
  min-height: 60px;
  padding: 14px 16px 18px;
  text-align: left;
  animation: answer-in 0.3s ease-out both;
}
.option:nth-child(2) { animation-delay: 0.12s; }
.option:nth-child(3) { animation-delay: 0.24s; }
.option:nth-child(4) { animation-delay: 0.36s; }
@keyframes answer-in { from { opacity: 0; transform: translateY(15%); } to { opacity: 1; transform: none; } }

/* ---------- Reveal ---------- */
.screen-reveal { text-align: center; padding: 18vh 0; }
.tracks { display: flex; justify-content: center; align-items: center; gap: 14px; height: 80px; }
/* Toes point right; left and right feet alternate; each print lands after the one to its left. */
.tracks span { opacity: 0; animation: step 2s ease infinite; }
.tracks svg { display: block; width: 36px; height: 36px; fill: var(--orange); transform: rotate(90deg); }
.tracks span:nth-child(odd) { transform: translateY(-12px); }
.tracks span:nth-child(even) { transform: translateY(12px); }
.tracks span:nth-child(2) { animation-delay: 0.25s; }
.tracks span:nth-child(3) { animation-delay: 0.5s; }
.tracks span:nth-child(4) { animation-delay: 0.75s; }
@keyframes step { 15%, 70% { opacity: 1; } }
.reveal-text { color: var(--gray); font-weight: 700; margin-top: 18px; }

/* ---------- Result: white cards on the dark page, like the app's dialogs ---------- */
.result-card, .tips, .cta {
  background: var(--white);
  color: var(--text);
  border: 2px solid var(--gray);
  border-radius: 16px;
  box-shadow: 0 5px 0 var(--gray-ledge);
  padding: 22px 20px;
}
.result-card { text-align: center; }
.result-card .kicker, .tips .kicker, .cta .kicker { color: var(--green-dark); }
.portrait {
  position: relative;
  width: min(260px, 70vw);
  aspect-ratio: 1;
  margin: 0 auto 12px;
  display: grid;
  place-items: center;
  animation: pop 0.6s cubic-bezier(0.2, 1.6, 0.4, 1) both;
}
.portrait img { width: 100%; height: 100%; object-fit: contain; }
.portrait-emoji { font-size: 110px; line-height: 1; }
.portrait-soon {
  position: absolute;
  bottom: 6px;
  color: var(--gray);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
@keyframes pop { from { transform: scale(0.3) rotate(-8deg); opacity: 0; } to { transform: none; opacity: 1; } }
.sounds-like { color: var(--gray); font-weight: 700; margin: 0; }
.result-name { font-size: clamp(38px, 11vw, 54px); }
.result-label { color: var(--green-dark); font-size: 19px; font-weight: 800; margin: 4px 0 8px; }
.confidence { margin: 0 0 14px; }
.toxic-meter { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 0 0 16px; font-weight: 800; }
.meter-label { font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--gray); }
.pips { display: inline-flex; gap: 5px; }
.pip { width: 18px; height: 18px; border-radius: 5px; background: rgba(156, 163, 175, 0.3); }
.pip.on { background: var(--orange); }
.share-quote {
  border-top: 1px solid rgba(156, 163, 175, 0.4);
  font-size: 21px;
  font-style: italic;
  font-weight: 700;
  margin: 0;
  padding-top: 16px;
}
.signature { color: var(--text); font-size: 15px; margin: 10px 0 0; }

.share-row { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; align-items: center; margin: 24px 0 4px; }
.share-row .btn-primary { flex: 1 1 100%; }
.share-row .btn-ghost { flex: 1 1 100%; }
.toast { min-height: 22px; text-align: center; color: var(--green); font-size: 14px; margin: 4px 0 0; }

.tips, .cta { margin-top: 18px; }
.tips h2, .cta h2 { font-size: 24px; margin-bottom: 6px; }
.tips ol { margin: 0; padding-left: 22px; }
.tips li { margin: 12px 0 0; padding-left: 4px; }
.tips li::marker { color: var(--green-dark); font-weight: 900; }
.cta { border-color: var(--green); box-shadow: 0 5px 0 var(--green-dark); }
.cta p { margin: 10px 0 0; }
.cta .fine { color: var(--text); }
.stores { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 18px; max-width: 360px; }
.store { display: grid; gap: 10px; justify-items: center; align-content: start; text-decoration: none; }
.store img:first-child { height: 44px; width: auto; max-width: 100%; }
.store .qr { width: 100%; max-width: 140px; height: auto; border: 2px solid var(--gray); border-radius: 10px; padding: 6px; background: var(--white); }
.again { display: flex; justify-content: center; margin-top: 22px; }
.small-print { color: var(--gray); font-size: 13px; text-align: center; margin-top: 26px; }
.small-print p { margin: 8px 0; }

.share-canvas { position: absolute; left: -9999px; }

@media (min-width: 720px) {
  .top, #app { max-width: 640px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ---------- Consent banner (injected by /analytics.js) ----------
   Same behaviour and copy as the home page; restyled with the quiz palette because the
   quiz does not load /styles.css. A bar, not a modal: it never traps focus, and while it is
   open the page gets extra bottom room (below) so every answer button can be scrolled clear
   of it. Both choices are full buttons of EQUAL weight, one click each - an unequal banner
   is not valid consent. */
.consent {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: 16px;
  z-index: 20;
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.consent-inner {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 24px;
  align-items: center;
  justify-content: space-between;
  max-width: 560px;
  margin: 0 auto;
  padding: 16px 18px;
  background: #151a14;            /* solid: text over a translucent bar fails contrast */
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.5);
}
.consent-copy { flex: 1 1 300px; }
.consent-copy p { margin: 0; color: var(--gray); font-size: 13px; line-height: 1.5; }
.consent-copy p + p { margin-top: 6px; }
.consent-copy strong { color: var(--white); }
.consent-actions { display: flex; gap: 10px; flex-wrap: wrap; width: 100%; }
.consent .button {
  flex: 1 1 auto;
  min-height: 46px;
  padding: 0 18px;
  border-radius: 12px;
  font: 700 15px "Nunito", var(--font);
  cursor: pointer;
}
.consent .button-primary { background: var(--green); color: var(--text); border: 0; box-shadow: 0 4px 0 var(--green-dark); }
.consent .button-quiet { background: var(--white); color: var(--text); border: 2px solid var(--gray); box-shadow: 0 4px 0 var(--gray-ledge); }
@media (min-width: 600px) { .consent-actions { width: auto; } }
/* Room to scroll the last answer option / store badges above the open banner (~250 px on a phone). */
body:has(.consent) #app { padding-bottom: 300px; }