/*
 * Styles scoped to the quiz container.  All colours reference our
 * bespoke palette variables defined below.  The aim is to polish
 * the interface without bloating the stylesheet.  Use CSS custom
 * properties to centralise tokens (colours, radii, spacing) and
 * leverage flex layouts for simple positioning.  Transitions are
 * shortened and respect prefers‑reduced‑motion.
 */

/*
 * Colour and spacing tokens
 *
 * Light mode definitions.  These values sample the existing
 * Protein Pitstop brand.  Dark mode overrides appear in a
 * prefers‑color‑scheme block below.  Adjusting these values
 * will cascade throughout the quiz components.
 */
:root {
  --pp-bg: #FFFDF8;
  --pp-card: #FFFFFF;
  --pp-text: #0F172A;
  --pp-muted: #6B7280;
  --pp-accent: #F3A01C;
  --pp-accent-600: #E38E00;
  --pp-accent-700: #C87800;
  --pp-accent-100: #FFF2D6;
  --pp-ring: rgba(243,160,28,0.35);
  --pp-success: #22C55E;
  --pp-border: #EAEAEA;
  --pp-shadow: 0 1px 2px rgba(0,0,0,0.06), 0 8px 24px rgba(0,0,0,0.06);
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 20px;
  --r-2xl: 28px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --pp-bg: #0B0F14;
    --pp-card: #131821;
    --pp-text: #F8FAFC;
    --pp-muted: #A3ABB8;
    --pp-accent: #F3A01C;
    --pp-accent-100: rgba(243,160,28,0.12);
    --pp-border: #1F2937;
    --pp-shadow: 0 1px 2px rgba(0,0,0,0.35), 0 8px 24px rgba(0,0,0,0.25);
  }
}

/*
 * Layout for the main quiz container.  On wider screens the
 * questions remain centered and constrained.  We move the max width
 * to a custom property so it’s easy to tweak without repeating
 * values throughout the stylesheet.
 */
/*
 * Main quiz container
 */
#quiz-app {
  --quiz-max-width: 680px;
  max-width: var(--quiz-max-width);
  margin: 0 auto;
  padding: 2rem 1rem;
  color: var(--pp-text);
  background: var(--pp-bg);
}

/* Progress bar */
#quiz-app .progress {
  height: 8px;
  background: var(--pp-border);
  border-radius: var(--r-md);
  overflow: hidden;
  margin-bottom: 1.4rem;
}
#quiz-app .progress > div {
  height: 100%;
  background: var(--pp-accent);
  width: 0;
  transition: width 0.25s ease;
}

/* Step chip indicating current step and showing context icon */
#quiz-app .step-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.85rem;
  color: var(--pp-muted);
  margin-bottom: 1rem;
}
#quiz-app .step-chip svg {
  width: 1rem;
  height: 1rem;
  color: var(--pp-accent);
}

/* Question title */
#quiz-app .question-title {
  font-size: clamp(1.1rem, 2vw, 1.4rem);
  font-weight: 600;
  margin-bottom: 1.2rem;
}

/* Question card wrapper */
#quiz-app .question-card {
  background: var(--pp-card);
  border: 1px solid var(--pp-border);
  border-radius: var(--r-xl);
  padding: 1.6rem;
  box-shadow: var(--pp-shadow);
  margin-bottom: 1.5rem;
}
#quiz-app .question-card h2 {
  font-size: clamp(1.4rem,2.6vw,1.8rem);
  font-weight: 700;
  margin-bottom: 0.4rem;
}
#quiz-app .question-helper {
  font-size: 0.9rem;
  color: var(--pp-muted);
  margin-bottom: 1.2rem;
}

/* Option buttons */
#quiz-app .options {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.6rem;
}
@media (min-width: 640px) {
  #quiz-app .options {
    grid-template-columns: 1fr 1fr;
  }
}
#quiz-app .option {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  border: 1px solid var(--pp-border);
  background: var(--pp-card);
  padding: 0.8rem 0.9rem;
  border-radius: var(--r-lg);
  cursor: pointer;
  transition: background 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
  line-height: 1.45;
  box-shadow: var(--pp-shadow);
  color: var(--pp-text);
}
#quiz-app .option:hover:not(.selected) {
  background: var(--pp-accent-100);
}
#quiz-app .option.selected {
  background: var(--pp-accent-100);
  border-color: var(--pp-accent-700);
  color: var(--pp-accent-700);
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}
#quiz-app .option-icon {
  width: 1.4rem;
  height: 1.4rem;
  flex-shrink: 0;
  color: var(--pp-muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
#quiz-app .option.selected .option-icon {
  color: var(--pp-accent-700);
}
#quiz-app .option-text {
  flex: 1;
}

/* Navigation buttons */
#quiz-app .navigation-buttons {
  display: flex;
  justify-content: space-between;
  margin-top: 1.8rem;
  gap: 0.5rem;
  position: sticky;
  bottom: 0;
  background: var(--pp-bg);
  padding-top: 1rem;
  padding-bottom: 1rem;
  z-index: 1;
}
#quiz-app .navigation-buttons button {
  padding: 0.75rem 1.5rem;
  border: none;
  border-radius: var(--r-lg);
  background: var(--pp-accent);
  color: #fff;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}
#quiz-app .navigation-buttons button:disabled {
  opacity: 0.5;
  cursor: default;
}
#quiz-app .navigation-buttons button:not(:disabled):hover {
  background: var(--pp-accent-600);
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}
#quiz-app .navigation-buttons button:not(:disabled):active {
  background: var(--pp-accent-700);
  transform: translateY(0);
}

/* Result styles */
/* Wrapper holds summary, advice and reading cards */
#quiz-app .result-wrapper {
  margin-top: 2rem;
  display: flex;
  flex-direction: column;
  gap: 2.2rem;
}
/* Summary card */
#quiz-app .result-summary {
  background: var(--pp-card);
  border-radius: var(--r-xl);
  padding: 1.8rem;
  box-shadow: var(--pp-shadow);
}
#quiz-app .result-title {
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  font-weight: 700;
  margin-bottom: 0.8rem;
}
/* Intro paragraph */
#quiz-app .result-intro {
  font-size: clamp(1.05rem, 1.5vw, 1.25rem);
  line-height: 1.6;
  margin-bottom: 1.4rem;
}
/* CTA block */
#quiz-app .result-cta {
  font-size: 1rem;
  line-height: 1.5;
  margin-bottom: 1.2rem;
}

/* Hide the old result-cta paragraph – we'll replace it with a custom CTA container via JS */
#quiz-app .result-cta {
  display: none;
}
#quiz-app .result-cta a {
  color: var(--pp-accent);
  text-decoration: underline;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  transition: color 0.18s ease, transform 0.18s ease;
}
#quiz-app .result-cta a:hover {
  text-decoration: none;
  color: var(--pp-accent-600);
  transform: translateX(2px);
}
#quiz-app .cta-icon {
  width: 0.9rem;
  height: 0.9rem;
  flex-shrink: 0;
}
/* Chips */
#quiz-app .chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  /* Provide breathing room both above and below the chips.  The top margin
   * separates the tag pills from the call‑to‑action buttons, as requested
   * in the specification. */
  margin-top: 0.8rem;
  margin-bottom: 0.8rem;
}
#quiz-app .chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.8rem;
  background: var(--pp-accent-100);
  border: 1px solid var(--pp-accent-700);
  border-radius: 999px;
  font-size: 0.8rem;
  color: var(--pp-accent-700);
}
#quiz-app .chip svg {
  width: 0.9rem;
  height: 0.9rem;
}
/* Confidence caption */
#quiz-app .confidence {
  font-size: 0.8rem;
  color: var(--pp-muted);
  margin-bottom: 0.2rem;
}
/* Advice card */
#quiz-app .result-advice {
  background: var(--pp-card);
  border-radius: var(--r-xl);
  padding: 1.6rem;
  box-shadow: var(--pp-shadow);
}
#quiz-app .result-advice h3 {
  font-size: clamp(1.3rem, 2.5vw, 1.6rem);
  margin-bottom: 0.8rem;
}
#quiz-app .result-advice ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
#quiz-app .result-advice li {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  margin-bottom: 0.6rem;
  font-size: 0.95rem;
  line-height: 1.5;
}
#quiz-app .list-icon {
  width: 1.2rem;
  height: 1.2rem;
  flex-shrink: 0;
  color: var(--pp-accent-700);
  background: var(--pp-accent-100);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
/* Show more button */
#quiz-app .result-advice .show-more {
  margin-top: 0.6rem;
  background: none;
  border: none;
  color: var(--pp-accent-700);
  font-weight: 600;
  cursor: pointer;
  text-decoration: underline;
  font-size: 0.9rem;
  padding: 0;
  transition: color 0.18s ease;
}
#quiz-app .result-advice .show-more:hover {
  text-decoration: none;
  color: var(--pp-accent-600);
}
/* Related reading */
#quiz-app .related-wrap {
  background: var(--pp-card);
  border-radius: var(--r-xl);
  padding: 1.6rem;
  box-shadow: var(--pp-shadow);
}

/* Hide the large related reading card in favour of a smaller link list */
#quiz-app .related-wrap {
  display: none;
}
#quiz-app .related-wrap h3 {
  font-size: clamp(1.3rem, 2.5vw, 1.6rem);
  margin-bottom: 0.8rem;
}
#quiz-app .related-cards {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}
#quiz-app .related-card {
  flex: 1 1 calc(50% - 0.5rem);
  background: var(--pp-accent-100);
  border-radius: var(--r-lg);
  padding: 1rem;
  text-decoration: none;
  color: var(--pp-text);
  box-shadow: 0 1px 4px rgba(0,0,0,0.05);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
#quiz-app .related-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 3px 8px rgba(0,0,0,0.08);
}
#quiz-app .related-card h4 {
  font-size: 1.1rem;
  margin-bottom: 0.4rem;
  font-weight: 600;
}
#quiz-app .related-card p {
  font-size: 0.9rem;
  line-height: 1.4;
  color: var(--pp-muted);
}
/* Disclosure */
#quiz-app .disclosure {
  font-size: 0.75rem;
  color: var(--pp-muted);
  margin-top: 1.5rem;
  text-align: center;
  line-height: 1.4;
}

/* New CTA layout */
#quiz-app .cta-container {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  margin-top: 1.2rem;
}

/* Articles you might be interested in section */
#quiz-app .articles-interest {
  background: var(--pp-card);
  border-radius: var(--r-xl);
  padding: 1.2rem;
  box-shadow: var(--pp-shadow);
  margin-top: 1rem;
}
#quiz-app .articles-interest h3 {
  font-size: clamp(1.2rem, 2.5vw, 1.4rem);
  margin-bottom: 0.6rem;
}
#quiz-app .article-cards {
  /* Lay out article cards in a two‑column grid.  Use flexbox with wrap so
   * the cards share the available width.  Align items to stretch so each
   * card grows to the same height regardless of its content length.  Without
   * align-items: stretch the cards would be as tall as their content and
   * could appear lopsided when snippets differ slightly. */
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: stretch;
}
#quiz-app .article-card {
  /* Ensure each card occupies half the width minus the gap and grows to
   * match the tallest sibling via align-items: stretch on the parent.  Use
   * a column flexbox so the image and text stack neatly, and allow the
   * text container to expand to fill available space. */
  flex: 1 1 calc(50% - 0.5rem);
  display: flex;
  flex-direction: column;
  background: var(--pp-accent-100);
  border-radius: var(--r-lg);
  padding: 1rem;
  text-decoration: none;
  color: var(--pp-text);
  box-shadow: 0 1px 4px rgba(0,0,0,0.05);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
#quiz-app .article-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 3px 8px rgba(0,0,0,0.08);
}
#quiz-app .article-card img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--r-lg);
  margin-bottom: 0.6rem;
  display: block;
}
#quiz-app .article-card h4 {
  font-size: 1.05rem;
  margin-bottom: 0.4rem;
  font-weight: 600;
}
#quiz-app .article-card p {
  font-size: 0.9rem;
  line-height: 1.4;
  color: var(--pp-muted);
  /* Allow the snippet to take up remaining vertical space so that both
   * article cards finish at the same height. */
  flex-grow: 1;
}
#quiz-app .cta-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}
#quiz-app .cta-buttons a {
  text-decoration: none;
  border-radius: var(--r-lg);
  padding: 0.75rem 1.4rem;
  font-weight: 600;
  font-size: 0.95rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--pp-shadow);
  transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease;
}
#quiz-app .primary-cta {
  /* Use the success colour for the primary CTA to maximise contrast and positive sentiment */
  background: var(--pp-success);
  color: #fff;
  font-size: 1.05rem;
  padding: 0.9rem 1.6rem;
  border-radius: var(--r-lg);
  font-weight: 600;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.18s ease, transform 0.18s ease;
}
#quiz-app .primary-cta:hover {
  background: #16a34a; /* darker success */
  transform: translateY(-2px);
}
#quiz-app .primary-cta:active {
  background: #15803d;
  transform: translateY(0);
}
#quiz-app .alt-cta {
  background: var(--pp-accent-100);
  color: var(--pp-accent-700);
  border: 1px solid var(--pp-accent-700);
  font-size: 1rem;
  padding: 0.8rem 1.4rem;
  border-radius: var(--r-lg);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.18s ease, color 0.18s ease;
}
#quiz-app .alt-cta:hover {
  background: var(--pp-accent-100);
  color: var(--pp-accent-600);
}
#quiz-app .related-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  font-size: 0.9rem;
}
#quiz-app .related-links .secondary-link {
  color: var(--pp-accent-700);
  text-decoration: underline;
  transition: color 0.18s ease;
}
#quiz-app .related-links .secondary-link:hover {
  color: var(--pp-accent-600);
  text-decoration: none;
}

/* =============================================================
 * Result Enhancements
 *
 * The following styles support the revamped results screen. They
 * improve visual hierarchy, accessibility and scannability by
 * introducing a match gauge, rich detail sections and product
 * recommendations. These rules sit near the bottom of the
 * stylesheet so they can override earlier generic selectors.
 */

/* Match gauge container */
#quiz-app .match-gauge {
  margin: 0.6rem 0 1.4rem 0;
}
/* Outer bar providing contrast behind the coloured fill */
#quiz-app .match-bar {
  background: var(--pp-accent-100);
  height: 0.5rem;
  border-radius: var(--r-lg);
  overflow: hidden;
}
/* Filled portion reflecting the match percentage */
#quiz-app .match-fill {
  background: var(--pp-success);
  height: 100%;
  width: 0%;
  transition: width 0.4s ease;
}
/* Label below the bar describing the match */
#quiz-app .match-label {
  /* Hide the separate percentage label when the score is baked into the title.
     The gauge itself still conveys relative confidence. */
  display: none;
}

/*
 * Enhance the result title by separating the category name and match
 * percentage into styled spans.  The match indicator is highlighted
 * using the success colour and a larger font size so it immediately
 * communicates confidence in the recommendation.
 */
#quiz-app .result-title .category-name {
  font-weight: 700;
}
#quiz-app .result-title .match-big {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--pp-success);
  margin-left: 0.4rem;
}
@media (min-width: 640px) {
  #quiz-app .result-title .match-big {
    font-size: 1.6rem;
  }
}

/* Considerations (cons) section */
#quiz-app .cons-section {
  margin-top: 1.2rem;
}
#quiz-app .cons-section h3 {
  font-size: 1.2rem;
  font-weight: 600;
  margin-bottom: 0.4rem;
}
#quiz-app .cons-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
#quiz-app .cons-list li {
  font-size: 0.95rem;
  line-height: 1.5;
  margin-bottom: 0.5rem;
  padding-left: 1.4rem;
  position: relative;
  color: var(--pp-muted);
}
#quiz-app .cons-list li::before {
  content: '⚠';
  position: absolute;
  left: 0;
  top: 0;
  font-size: 0.9rem;
  color: var(--pp-accent-700);
}

/* Detailed guidance wrapper */
#quiz-app .result-details {
  background: var(--pp-card);
  border: 1px solid var(--pp-border);
  border-radius: var(--r-xl);
  padding: 1.4rem;
  box-shadow: var(--pp-shadow);
  margin-top: 1.6rem;
}
#quiz-app .result-details h3 {
  font-size: 1.2rem;
  margin-bottom: 0.4rem;
  margin-top: 0.8rem;
  font-weight: 600;
}
#quiz-app .result-details h3:first-of-type {
  margin-top: 0;
}
#quiz-app .result-details p {
  font-size: 0.95rem;
  line-height: 1.6;
  margin-bottom: 0.8rem;
}
#quiz-app .result-details ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
#quiz-app .result-details li {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin-bottom: 0.6rem;
}
#quiz-app .result-details .list-icon svg {
  width: 0.9rem;
  height: 0.9rem;
  color: var(--pp-success);
  margin-top: 0.2rem;
}
#quiz-app .result-details .list-text {
  font-size: 0.95rem;
  line-height: 1.4;
}

/* Product recommendations */
#quiz-app .product-recs {
  margin-top: 2rem;
}
#quiz-app .product-recs h3 {
  font-size: 1.2rem;
  font-weight: 600;
  margin-bottom: 0.8rem;
}
#quiz-app .product-cards {
  /* Use a responsive grid for product tiles: 3 across on desktops,
     2 on tablets and 1 on mobile. */
  display: grid;
  gap: 1rem;
  align-items: stretch;
}

@media (min-width: 1024px) {
  #quiz-app .product-cards {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (min-width: 640px) and (max-width: 1023px) {
  #quiz-app .product-cards {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 639px) {
  #quiz-app .product-cards {
    grid-template-columns: 1fr;
  }
}
#quiz-app .product-card {
  flex: 1 1 calc(50% - 0.5rem);
  display: flex;
  flex-direction: column;
  background: var(--pp-card);
  border: 1px solid var(--pp-border);
  border-radius: var(--r-lg);
  padding: 1rem;
  text-decoration: none;
  color: var(--pp-text);
  box-shadow: var(--pp-shadow);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
#quiz-app .product-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0,0,0,0.08);
}
#quiz-app .product-card img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--r-lg);
  margin-bottom: 0.6rem;
}
#quiz-app .product-card h4 {
  font-size: 1.05rem;
  margin-bottom: 0.3rem;
  font-weight: 600;
}
#quiz-app .product-card p {
  font-size: 0.9rem;
  line-height: 1.4;
  color: var(--pp-muted);
  margin-top: auto;
}

/*
 * When product tiles are styled like blog article cards (image on top and
 * CTA link at the bottom) apply these overrides.  These styles are added
 * for elements with both product-card and article-card classes.
 */
#quiz-app .product-card.article-card {
  display: block;
  background: var(--pp-card);
  border: 1px solid var(--pp-border);
  border-radius: var(--r-lg);
  overflow: hidden;
  text-decoration: none;
  color: var(--pp-text);
  box-shadow: var(--pp-shadow);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  padding: 0;
}
#quiz-app .product-card.article-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 4px 8px rgba(0,0,0,0.08);
}
#quiz-app .product-card.article-card img {
  /* Show the entire product packaging instead of cropping it.  When
   * using `object-fit: cover` on tall cylindrical tubs the image
   * becomes zoomed in and important branding is lost.  Switch to
   * `object-fit: contain` so the whole product fits within the
   * allotted aspect ratio.  A neutral background ensures any
   * letter‑boxing blends in with the card. */
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: contain;
  background: var(--pp-bg);
  display: block;
}
#quiz-app .product-card.article-card h4 {
  font-size: 1.05rem;
  font-weight: 600;
  margin-top: 0.6rem;
  margin-left: 1rem;
  margin-right: 1rem;
}
#quiz-app .product-card.article-card p {
  font-size: 0.9rem;
  line-height: 1.4;
  color: var(--pp-muted);
  margin: 0.4rem 1rem 0;
}
#quiz-app .product-card.article-card .card-cta {
  display: inline-block;
  margin: 0.6rem 1rem 1rem;
  font-weight: 600;
  color: var(--pp-accent);
}

/* Divider used in the why section to separate benefits from features */
#quiz-app .card-divider {
  border-top: 1px solid var(--pp-border);
  margin: 1rem 0;
}

/* Feature list resets default list styles when key features are inside why card */
#quiz-app .feature-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

/*
 * Hero styling for version 2.  The hero hosts an abstract
 * background image behind the text.  Using absolute positioning
 * allows the picture to fill the section while keeping the text
 * centered above it.  A subtle overlay ensures the heading
 * remains legible over the bright artwork.
 */
.quiz-hero {
  position: relative;
  overflow: hidden;
  padding: 3.2rem 1rem;
  text-align: center;
  color: var(--pp-text);
  /* 0-byte hero: layered gradients using brand tones */
  background:
    radial-gradient(120% 70% at 50% 0%, rgba(243,160,28,.16), transparent 60%),
    linear-gradient(180deg, #FFF7EA 0%, var(--pp-bg) 60%, transparent 100%);
}
.quiz-hero .hero-bg picture,
.quiz-hero .hero-bg img {
  display: none;
}
.quiz-hero::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom right, rgba(255,255,255,0.65), rgba(255,255,255,0.45));
  z-index: -1;
}
.quiz-hero .hero-content {
  position: relative;
  z-index: 1;
}
.quiz-hero h1 {
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: 0.7rem;
}
.quiz-hero p {
  font-size: 1rem;
  margin-top: 0.4rem;
  line-height: 1.5;
}