/* ============================================================
   Britannica Money Quiz Widget — 06.26.26_v1.css
   Merged from Webflow Designer export + global embed
   ============================================================ */

:root {
  --font-sans: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-serif: Georgia, "Times New Roman", Times, serif;
  --max-width--main: 850px;
  --radius--main: .5em;
  --radius--small: .25em;
  --radius--round: 100vw;
  --border-width--main: .094rem;
  --max-width--rail: 250px;
  --max-width--number: 0;
  --button-size--medium: 3rem;
  --button-size--large: 5rem;
  --swatches--transparent: transparent;
  --_spacing---0: 0px;
  --_spacing---1: 8px;
  --_spacing---2: 12px;
  --_spacing---3: 16px;
  --_spacing---4: 24px;
  --_spacing---5: 32px;
  --_spacing---6: 40px;
  --_spacing---7: 48px;
  --_spacing---8: 64px;
  --swatches--dark-900: #071c2e;
  --swatches--dark-900-o40: color-mix(in srgb, var(--swatches--dark-900) 40%, transparent);
  --swatches--dark-800: #0c406c;
  --swatches--dark-300: #a5c4ce;
  --swatches--dark-300-o40: color-mix(in srgb, var(--swatches--dark-300) 40%, transparent);
  --swatches--light-100: white;
  --swatches--light-100-o40: color-mix(in srgb, var(--swatches--light-100) 40%, transparent);
  --swatches--light-150: #f6f9fa;
  --swatches--light-200: #e9f0f2;
  --swatches--light-300: #e1ebef;
  --swatches--blue-500: #0063ce;
  --swatches--blue-400: #0091f4;
  --swatches--blue-200: #84c4ef;
  --swatches--blue-100: #dff1f7;
  --swatches--red-500: #ce0b0b;
  --swatches--red-400: red;
  --swatches--red-100: #ffdcdc;
  --swatches--green-500: #09aa09;
  --swatches--green-400: #07d807;
  --swatches--green-100: #e1ffe1;
  --swatches--grey-800: #424a56;
  --swatches--grey-300: #99a2ad;
  --swatches--marigold-500: #ff8d28;
  --swatches--sun-500: #fc0;
  --swatches--aqua-500: #00c3d0;
  --swatches--grape-500: #6155f5;
  --_theme---base--background: var(--swatches--light-200);
  --_theme---base--text: var(--swatches--dark-900);
  --_theme---base--text-muted: var(--swatches--grey-800);
  --_theme---base--link-dark: var(--swatches--blue-200);
  --_theme---base--link-blue: var(--swatches--blue-500);
  --_theme---states--border: var(--swatches--dark-300);
  --_theme---states--background: var(--swatches--light-100);
  --_theme---states--correct-border: var(--swatches--green-500);
  --_theme---states--correct-background: var(--swatches--green-100);
  --_theme---states--incorrect-border: var(--swatches--red-500);
  --_theme---states--incorrect-background: var(--swatches--red-100);
  --_theme---states--border-selected: var(--swatches--blue-500);
  --_theme---states--background-faded: var(--swatches--light-100-o40);
  --_theme---states--border-faded: var(--swatches--dark-300-o40);
  --_theme---states--text-faded: var(--swatches--dark-900-o40);
  --_theme---card--background: var(--swatches--light-300);
  --_theme---card--input-background: var(--swatches--light-150);
  --_theme---card--input-border: var(--swatches--blue-400);
  --_theme---card--error-border: var(--swatches--red-500);
  --_theme---button-main--bg: var(--swatches--blue-500);
  --_theme---button-main--border: var(--swatches--blue-500);
  --_theme---button-main--text: var(--swatches--light-100);
  --_theme---button-main--bg-hover: var(--swatches--blue-400);
  --_theme---button-main--border-hover: var(--swatches--blue-400);
  --_theme---button-main--text-hover: var(--swatches--light-100);
  --_theme---button-green--bg: var(--swatches--green-500);
  --_theme---button-green--border: var(--swatches--green-500);
  --_theme---button-green--text: var(--swatches--light-100);
  --_theme---button-green--bg-hover: var(--swatches--green-400);
  --_theme---button-green--border-hover: var(--swatches--green-400);
  --_theme---button-green--text-hover: var(--swatches--light-100);
  --_theme---button-red--bg: var(--swatches--red-500);
  --_theme---button-red--border: var(--swatches--red-500);
  --_theme---button-red--text: var(--swatches--light-100);
  --_theme---button-red--bg-hover: var(--swatches--red-400);
  --_theme---button-red--border-hover: var(--swatches--red-400);
  --_theme---button-red--text-hover: var(--swatches--light-100);
  --_theme---button-ghost--bg: var(--swatches--transparent);
  --_theme---button-ghost--border: var(--swatches--blue-500);
  --_theme---button-ghost--text: var(--swatches--dark-900);
  --_theme---button-ghost--bg-hover: var(--swatches--blue-400);
  --_theme---button-ghost--border-hover: var(--swatches--blue-400);
  --_theme---button-ghost--text-hover: var(--swatches--light-100);
  --_theme---multichoice--border-hover: var(--swatches--blue-400);
  --_theme---multichoice--correct-border: var(--_theme---states--correct-border);
  --_theme---multichoice--success-correct-background: var(--_theme---states--correct-background);
  --_theme---multichoice--incorrect-border: var(--_theme---states--incorrect-border);
  --_theme---multichoice--danger-incorrect-background: var(--_theme---states--incorrect-background);
  --_typography---size--text-2xl: 1.6rem;
  --_typography---size--text-xl: 1.4rem;
  --_typography---size--text-lg: 1.3rem;
  --_typography---size--text-main: 1.15rem;
  --_typography---size--text-medium: 1.025rem;
  --_typography---size--text-sm: .9rem;
  --_typography---size--text-xsm: .75rem;
  --_typography---weight--regular: 400;
  --_typography---weight--medium: 500;
  --_typography---weight--bold: 700;
  --_typography---letter-spacing--tight: -.02em;
  --_typography---letter-spacing--normal: 0em;
  --_typography---letter-spacing--loose: .03em;
  --_typography---letter-spacing--x-loose: .07em;
  --_typography---line-height--small: 1;
  --_typography---line-height--medium: 1.1;
  --_typography---line-height--large: 1.3;
  --_typography---line-height--x-large: 1.5;
}

/* ----------------------------------
   Screen reader utility
---------------------------------- */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ----------------------------------
   Base Reset
---------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }
html { background: transparent; }
body {
  margin: 0;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg, video { max-width: 100%; }
video { width: 100%; object-fit: cover; }
button {
  background: unset;
  border: 0;
  padding: unset;
  font: inherit;
  color: inherit;
  text-align: inherit;
}
button:not(:disabled) { cursor: pointer; }
a:not([class]) { text-decoration: underline; }

/* ----------------------------------
   Text Reset
---------------------------------- */
p, blockquote, label {
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  margin: 0;
}

/* ----------------------------------
   Text Wrap Defaults
---------------------------------- */
h1, h2, h3, .display-title, .text-serif-xlarge { text-wrap: balance; }
p, li, blockquote, .text-sans-main, .text-serif { text-wrap: pretty; }
* { overflow-wrap: break-word; }

/* ----------------------------------
   Focus States
---------------------------------- */
a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible,
input:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}

/* ----------------------------------
   Line Clamp Utilities
---------------------------------- */
.u-line-clamp-1,
.u-line-clamp-2,
.u-line-clamp-3,
.u-line-clamp-4 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.u-line-clamp-1 { -webkit-line-clamp: 1; }
.u-line-clamp-2 { -webkit-line-clamp: 2; }
.u-line-clamp-3 { -webkit-line-clamp: 3; }
.u-line-clamp-4 { -webkit-line-clamp: 4; }

/* ----------------------------------
   Layout
---------------------------------- */
.page-wrap {
  flex-flow: column;
  display: flex;
  overflow: visible;
}

.quiz-container {
  width: 100%;
  max-width: var(--max-width--main);
  flex-flow: column;
  margin-left: auto;
  margin-right: auto;
  display: flex;
}

.interactive-wrapper {
  width: 100%;
  max-width: var(--max-width--main);
  border-radius: var(--radius--main);
  position: relative;
  overflow: auto;
}

.interactive-layout {
  padding: var(--_spacing---4);
  grid-column-gap: var(--_spacing---3);
  grid-row-gap: var(--_spacing---3);
  border-top-left-radius: var(--radius--main);
  border-top-right-radius: var(--radius--main);
  background-color: var(--_theme---base--background);
  flex-flow: column;
  display: flex;
  position: relative;
}

.interactive-layout.is-cover {
  border-radius: var(--radius--main);
  justify-content: space-between;
  min-height: auto;
  padding-top: 0;
  padding-left: 0;
  padding-right: 0;
}

.interactive-layout.is-results {
  min-height: 500px;
}

.quiz-header {
  grid-column-gap: var(--_spacing---5);
  grid-row-gap: var(--_spacing---5);
  flex-flow: wrap;
  justify-content: space-between;
  align-items: center;
  display: flex;
}

.quiz-title-wrap {
  grid-column-gap: var(--_spacing---1);
  grid-row-gap: var(--_spacing---1);
  flex-flow: column;
  display: flex;
}

.brit-logo { width: 12rem; }

.counter-wrapper {
  padding-top: var(--_spacing---3);
  display: flex;
}

.counter-layout {
  border-radius: var(--radius--small);
  background-color: var(--swatches--grey-800);
  padding: 1px 4px;
}

.counter-text-layout {
  grid-column-gap: 3px;
  grid-row-gap: 3px;
  display: flex;
}

.question-wrapper {
  grid-column-gap: var(--_spacing---1);
  grid-row-gap: var(--_spacing---1);
  flex-flow: column;
  padding-bottom: 0;
  display: flex;
}

.answers-wrapper {
  padding-top: var(--_spacing---1);
  grid-column-gap: var(--_spacing---2);
  grid-row-gap: var(--_spacing---2);
  flex-flow: column;
  display: flex;
}

.answer-item {
  grid-column-gap: var(--_spacing---2);
  grid-row-gap: var(--_spacing---2);
  justify-content: flex-start;
  align-items: center;
  cursor: pointer;
  display: flex;
}

.answer-border {
  padding: var(--_spacing---2);
  border: 1px solid var(--_theme---states--border);
  border-radius: var(--radius--main);
  background-color: var(--_theme---states--background);
  cursor: pointer;
  flex: 1;
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
}

.feedback-wrapper {
  margin-top: var(--_spacing---1);
  grid-column-gap: 6px;
  grid-row-gap: 6px;
  flex-flow: column;
  display: flex;
}

.feedback-wrapper.is-hide { display: none; }
.feedback-wrapper.is-match { margin-top: var(--_spacing---0); }

.quiz-btn-wrap {
  padding-top: var(--_spacing---1);
  grid-column-gap: var(--_spacing---3);
  grid-row-gap: var(--_spacing---3);
  flex-flow: wrap;
  flex: 1;
  justify-content: flex-end;
  align-items: flex-end;
  display: flex;
}

.quiz-btn-wrap.is-match { padding-top: var(--_spacing---1); }

.percent-wrapper { display: flex; }
.percent-wrapper.is-hide { display: none; }

.button-main {
  padding: var(--_spacing---1) var(--_spacing---3);
  grid-column-gap: var(--_spacing---2);
  grid-row-gap: var(--_spacing---2);
  border: 1px solid var(--_theme---button-main--border);
  border-radius: var(--radius--main);
  background-color: var(--_theme---button-main--bg);
  justify-content: space-between;
  align-items: center;
  text-decoration: none;
  display: flex;
}

.button-text {
  font-family: var(--font-sans);
  font-weight: var(--_typography---weight--bold);
  font-size: var(--_typography---size--text-main);
  letter-spacing: var(--_typography---letter-spacing--normal);
  line-height: var(--_typography---line-height--large);
  color: white;
  text-decoration: none;
}

.arrow-wrap {
  flex-flow: column;
  justify-content: center;
  align-items: center;
  display: flex;
  position: relative;
  transition: transform 0.2s ease;
}

.quiz-start-btn:hover .arrow-wrap,
.button-main:hover .arrow-wrap {
  transform: translateX(4px);
}

.image-2 { width: 1.5rem; }

.source-wrapper {
  padding: var(--_spacing---4);
  grid-column-gap: var(--_spacing---1);
  grid-row-gap: var(--_spacing---1);
  border-bottom-left-radius: var(--radius--main);
  border-bottom-right-radius: var(--radius--main);
  background-color: var(--_theme---base--text);
  flex-flow: column;
  flex: 0 auto;
  display: flex;
  position: static;
}

.two-col-wrapper {
  grid-column-gap: var(--_spacing---1);
  grid-row-gap: var(--_spacing---1);
  display: flex;
}

.left-wrap {
  grid-column-gap: var(--_spacing---1);
  grid-row-gap: var(--_spacing---1);
  flex-flow: column;
  display: flex;
}

.right-wrap {
  grid-column-gap: var(--_spacing---1);
  grid-row-gap: var(--_spacing---1);
  flex-flow: column;
  flex: 1;
  display: flex;
}

.correct-wrapper {
  padding-bottom: var(--_spacing---2);
  grid-column-gap: var(--_spacing---1);
  grid-row-gap: var(--_spacing---1);
  flex-flow: column;
  display: flex;
}

.correct-wrapper.is-hide { display: none; }

.correct-tile {
  padding: var(--_spacing---2);
  grid-column-gap: 3px;
  grid-row-gap: 3px;
  border: var(--border-width--main) solid var(--_theme---states--correct-border);
  border-radius: var(--radius--main);
  background-color: var(--_theme---states--correct-background);
  cursor: auto;
  display: flex;
}

.correct-colon-wrap { display: flex; }
.end-feedback.is-hide { display: none; }

.match-feedback-conclude {
  grid-column-gap: 6px;
  grid-row-gap: 6px;
  flex-flow: column;
  padding-top: 0;
  display: flex;
}

.match-feedback-conclude.is-hide { display: none; }

.cover-title-wrap {
  z-index: 2;
  grid-column-gap: var(--_spacing---3);
  grid-row-gap: var(--_spacing---3);
  text-align: center;
  flex-flow: column;
  display: flex;
  position: relative;
}

.cover-title-flex {
  grid-column-gap: var(--_spacing---3);
  grid-row-gap: var(--_spacing---3);
  flex-flow: column;
  display: flex;
}

.cover-header-stack {
  grid-column-gap: var(--_spacing---1);
  grid-row-gap: var(--_spacing---1);
  flex-flow: column;
  order: 9999;
  display: flex;
}

.quiz-start-btn {
  padding: var(--_spacing---1) var(--_spacing---3);
  grid-column-gap: var(--_spacing---2);
  grid-row-gap: var(--_spacing---2);
  border: 1px solid var(--_theme---button-main--border);
  border-radius: var(--radius--main);
  background-color: var(--_theme---button-main--bg);
  justify-content: space-between;
  align-items: center;
  text-decoration: none;
  display: flex;
}

.quiz-btn-combo {
  padding-top: var(--_spacing---0);
  grid-column-gap: var(--_spacing---3);
  grid-row-gap: var(--_spacing---3);
  flex-flow: wrap;
  justify-content: space-between;
  align-items: flex-end;
  display: flex;
}

.quiz-btn-combo.is-matching { padding-top: 0; }

.cover-img-wrapper {
  z-index: 1;
  aspect-ratio: 64 / 50;
  margin-top: 0;
  position: relative;
  inset: 0% 0% auto;
}

.cover-btn-wrap {
  padding-right: var(--_spacing---4);
  padding-left: var(--_spacing---4);
  justify-content: center;
  align-items: flex-end;
  display: flex;
}

.cover-image {
  border-top-left-radius: var(--radius--main);
  border-top-right-radius: var(--radius--main);
  object-fit: cover;
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0% auto auto 0%;
}

.results-layout {
  grid-column-gap: var(--_spacing---2);
  grid-row-gap: var(--_spacing---2);
  text-align: center;
  flex-flow: column;
  flex: 1;
  justify-content: center;
  align-items: center;
  height: 100%;
  display: flex;
}

.results-button-wrap {
  width: 100%;
  margin-top: var(--_spacing---4);
  justify-content: center;
  align-items: flex-start;
  display: flex;
}

.results-cta-wrap { margin-top: 0; }
.question-margin-wrap { margin-top: -8px; }

/* ----------------------------------
   tile-error-label — multichoice only
   Hidden by default; revealed by data attribute selectors.
   Note: match questions use .small-error-wrap instead.
---------------------------------- */
.tile-error-label,
.tile-error-label.is-correct {
  display: none;
}

/* Multichoice: show incorrect label */
.answer-item[data-answer-state="incorrect"] .tile-error-label:not(.is-correct) {
  display: block;
}

/* Multichoice: show correct label */
.answer-item[data-answer-state="correct"] .tile-error-label.is-correct {
  display: block;
}

/* ----------------------------------
   small-error-wrap — match question absolute error badge
   Sits above tile content, zero height impact.
   Hidden by default; revealed when tile is incorrect.
---------------------------------- */
.small-error-wrap {
  left: var(--_spacing---2);
  z-index: 5;
  background-color: var(--_theme---states--incorrect-border);
  border-radius: 4px;
  padding: 2px 6px 3px;
  display: none;
  position: absolute;
  top: -8px;
}

.small-error-text {
  font-family: var(--font-sans);
  font-weight: var(--_typography---weight--bold);
  font-size: var(--_typography---size--text-xsm);
  line-height: var(--_typography---line-height--large);
  color: var(--_theme---button-main--text);
}

.match-tile[data-match-state="incorrect"] .small-error-wrap {
  display: block;
}


/* ----------------------------------
   Match question type — interaction states
---------------------------------- */
.match-tile {
  width: 100%;
  min-width: 7rem;
  min-height: var(--tile-height, auto);
  padding: var(--_spacing---2);
  border: var(--border-width--main) solid var(--_theme---states--border);
  border-radius: var(--radius--small);
  background-color: var(--swatches--light-100);
  text-align: left;
  cursor: pointer;
  position: relative;
}

.match-tile[data-match-state="default"] {
  background-color: var(--_theme---states--background);
  border-color: var(--_theme---states--border);
}
.match-tile[data-match-state="selected"] {
  background-color: var(--_theme---states--background) !important;
  border-color: var(--_theme---states--border-selected);
}
.match-tile[data-match-state="faded"] {
  background-color: var(--_theme---states--background-faded);
  border-color: var(--_theme---states--border-faded);
  color: var(--_theme---states--text-faded);
}
.match-tile[data-match-state="incorrect"] {
  background-color: var(--_theme---states--incorrect-background) !important;
  border-color: var(--_theme---states--incorrect-border);
}
.match-tile[data-match-state="correct"] {
  background-color: var(--_theme---states--correct-background) !important;
  border-color: var(--_theme---states--correct-border);
  pointer-events: none;
}
.match-tile[data-match-state="target"] {
  background-color: transparent;
  border-color: var(--_theme---states--border);
  color: var(--_theme---base--text);
}

[data-match-feedback="incorrect"] { color: var(--swatches--red-500); }
[data-match-feedback="encourage"] { color: var(--swatches--blue-500); }
[data-match-feedback="hidden"]    { display: none; }

/* ----------------------------------
   Answer behavior
---------------------------------- */
.answer-item:hover .answer-border {
  border-color: var(--_theme---multichoice--border-hover);
}
.answer-item[data-answer-state="correct"] .answer-border {
  border-color: var(--_theme---multichoice--correct-border);
  background-color: var(--_theme---multichoice--success-correct-background);
}
.answer-item[data-answer-state="incorrect"] .answer-border {
  border-color: var(--_theme---multichoice--incorrect-border);
  background-color: var(--_theme---multichoice--danger-incorrect-background);
}
.answer-item[data-answer-state="disabled"] {
  pointer-events: none;
  opacity: 0.6;
}

/* ----------------------------------
   Rich text styles
---------------------------------- */
.text-main-bold {
  font-family: var(--font-sans);
  font-weight: var(--_typography---weight--bold);
  font-size: var(--_typography---size--text-main);
  letter-spacing: var(--_typography---letter-spacing--normal);
  line-height: var(--_typography---line-height--large);
  color: var(--_theme---base--text);
}
.text-mouse-bold {
  font-family: var(--font-sans);
  font-weight: var(--_typography---weight--bold);
  font-size: var(--_typography---size--text-sm);
  letter-spacing: var(--_typography---letter-spacing--normal);
  line-height: var(--_typography---line-height--large);
  color: var(--_theme---base--text-muted);
}
.text-counter {
  font-family: var(--font-sans);
  font-weight: var(--_typography---weight--bold);
  font-size: var(--_typography---size--text-sm);
  letter-spacing: var(--_typography---letter-spacing--normal);
  line-height: var(--_typography---line-height--large);
  color: white;
}
.eyebrow {
  font-family: var(--font-sans);
  font-weight: var(--_typography---weight--bold);
  font-size: var(--_typography---size--text-sm);
  letter-spacing: var(--_typography---letter-spacing--x-loose);
  line-height: var(--_typography---line-height--small);
  text-transform: uppercase;
  color: var(--_theme---base--text);
  margin-bottom: var(--_spacing---0);
}
.source-head-style {
  font-family: var(--font-sans);
  font-weight: var(--_typography---weight--bold);
  font-size: var(--_typography---size--text-medium);
  letter-spacing: var(--_typography---letter-spacing--loose);
  line-height: var(--_typography---line-height--small);
  color: white;
}
.source-link {
  font-family: var(--font-sans);
  font-weight: var(--_typography---weight--regular);
  font-size: var(--_typography---size--text-medium);
  letter-spacing: var(--_typography---letter-spacing--loose);
  line-height: var(--_typography---line-height--small);
  text-decoration: underline;
  color: var(--_theme---base--link-dark);
  cursor: pointer;
}
.source-link:hover { color: var(--swatches--light-100); }
.display-title {
  font-family: var(--font-sans);
  font-weight: var(--_typography---weight--bold);
  font-size: var(--_typography---size--text-2xl);
  letter-spacing: var(--_typography---letter-spacing--tight);
  line-height: var(--_typography---line-height--small);
  text-wrap: balance;
  color: var(--_theme---base--text);
  margin-top: 0;
  margin-bottom: 0;
}
.display-title strong { font-weight: var(--_typography---weight--bold); }
.display-title em { font-style: italic; }
.text-serif-xlarge {
  font-family: var(--font-serif);
  font-weight: var(--_typography---weight--regular);
  font-size: var(--_typography---size--text-2xl);
  letter-spacing: var(--_typography---letter-spacing--normal);
  line-height: var(--_typography---line-height--large);
  text-wrap: balance;
  color: var(--_theme---base--text);
  margin-top: 0;
  margin-bottom: 0;
}
.text-serif-xlarge strong { font-weight: var(--_typography---weight--bold); }
.text-serif-xlarge em { font-style: italic; }
.text-sans-xlarge {
  font-family: var(--font-sans);
  font-weight: var(--_typography---weight--regular);
  font-size: var(--_typography---size--text-2xl);
  letter-spacing: var(--_typography---letter-spacing--normal);
  line-height: var(--_typography---line-height--medium);
  color: var(--_theme---base--text);
}
.text-sans-xlarge strong { font-weight: var(--_typography---weight--bold); }
.text-sans-xlarge em { font-style: italic; }
.text-sans-large {
  font-family: var(--font-sans);
  font-weight: var(--_typography---weight--regular);
  font-size: var(--_typography---size--text-lg);
  letter-spacing: var(--_typography---letter-spacing--tight);
  line-height: var(--_typography---line-height--medium);
  color: var(--_theme---base--text);
}
.text-sans-large strong { font-weight: var(--_typography---weight--bold); }
.text-sans-large em { font-style: italic; }
.text-sans-main {
  font-family: var(--font-sans);
  font-weight: var(--_typography---weight--regular);
  font-size: var(--_typography---size--text-main);
  letter-spacing: var(--_typography---letter-spacing--normal);
  line-height: var(--_typography---line-height--large);
  color: var(--_theme---base--text);
  margin-bottom: 0;
}
.text-sans-main strong { font-weight: var(--_typography---weight--bold); }
.text-sans-main em { font-style: italic; }
.cta-link {
  color: var(--_theme---base--link-blue);
  text-decoration: underline;
  -webkit-text-decoration-color: var(--_theme---base--link-blue);
  text-decoration-color: var(--_theme---base--link-blue);
}
.text-mouse {
  font-family: var(--font-sans);
  font-weight: var(--_typography---weight--medium);
  font-size: var(--_typography---size--text-sm);
  letter-spacing: var(--_typography---letter-spacing--normal);
  line-height: var(--_typography---line-height--large);
  color: var(--_theme---base--text-muted);
}
.text-mouse strong { font-weight: var(--_typography---weight--bold); }
.text-mouse em { font-style: italic; }
.text-serif {
  font-family: var(--font-serif);
  font-weight: var(--_typography---weight--regular);
  font-size: var(--_typography---size--text-main);
  letter-spacing: var(--_typography---letter-spacing--normal);
  line-height: var(--_typography---line-height--large);
  color: var(--_theme---base--text-muted);
  margin-bottom: 0;
}
.text-serif strong { font-weight: var(--_typography---weight--bold); }
.text-serif em { font-style: italic; }

.tile-error-label {
  font-family: var(--font-sans);
  font-weight: var(--_typography---weight--bold);
  font-size: var(--_typography---size--text-sm);
  letter-spacing: var(--_typography---letter-spacing--normal);
  line-height: var(--_typography---line-height--large);
  color: var(--swatches--red-500);
  padding-top: var(--_spacing---1);
}

.tile-error-label.is-correct {
  color: var(--swatches--green-500);
}

/* ----------------------------------
   Media Queries
---------------------------------- */
@media screen and (max-width: 991px) {
  .page-wrap {
    width: 100%;
    min-height: auto;
    overflow: visible;
  }

  .interactive-layout.is-cover {
    min-height: auto;
  }
}

@media screen and (max-width: 767px) {
  .interactive-layout.is-cover {
    min-height: auto;
  }

  .quiz-header {
    grid-row-gap: var(--_spacing---3);
    flex-flow: wrap-reverse;
  }
}

@media screen and (max-width: 479px) {
  .interactive-layout {
    padding-right: var(--_spacing---2);
    padding-left: var(--_spacing---2);
  }
  .interactive-layout.is-cover {
    min-height: auto;
  }
  .quiz-header {
    flex-flow: wrap-reverse;
  }
  .brit-logo {
    width: 11rem;
  }
  .right-wrap {
    grid-column-gap: var(--_spacing---1);
    grid-row-gap: var(--_spacing---1);
  }
  .match-tile {
    border-radius: var(--radius--main);
    padding-top: 8px;
    padding-bottom: 9px;
  }
  .correct-wrapper {
    padding-bottom: var(--_spacing---2);
    grid-column-gap: var(--_spacing---1);
    grid-row-gap: var(--_spacing---1);
    flex-flow: column;
    display: flex;
  }
  .correct-colon-wrap {
    display: flex;
  }
}