:root {
  --base-text-size: 18px;
  --base-line-height: 1.5;

  --bg-color: #ffffff;
  --card-bg-color: #ffffff;

  --text-color: #10285c;
  --heading-color: #2f4b8b;

  --border-color: #aebee6;

  --button-bg: #374f8c;
  --button-text: #ffffff;

  --radio-bg: #ffffff;
  --radio-text: #10285c;
  --radio-border: #aebee6;

  --result-bar-bg: #d7deef;  
}

.larger-text {
  --base-text-size: 28px;
}

.wide-line-spacing {
  --base-line-height: 1.9;
}

body.larger-text .form-item__label,
body.larger-text .form-type-radio label,
body.larger-text .js-form-type-radio label,
body.larger-text .webform-options-display-buttons label {
  font-size: 28px !important;
  line-height: 1.5 !important;
}

body.larger-text .form-item__label *,
body.larger-text .form-type-radio label *,
body.larger-text .js-form-type-radio label *,
body.larger-text .webform-options-display-buttons label * {
  font-size: inherit !important;
  line-height: inherit !important;
}


/* High contrast force overrides */

/* High contrast mode */

body.high-contrast {
  --bg-color: #000000;
  --card-bg-color: #111111;
  --muted-bg-color: #1a1a1a;

  --text-color: #ffffff;
  --heading-color: #7db8ff;
  --accent-color: #ffd84d;

  --border-color: #8aa9d6;

  --button-bg: #7db8ff;
  --button-text: #000000;

  --radio-bg: #151515;
  --radio-text: #ffffff;
  --radio-border: #8aa9d6;

  --result-bar-bg: #333333;
}

/* Apply high contrast only to the screening block, including confirmation */

body.high-contrast #block-olivero-content,
body.high-contrast #block-olivero-content > .block__content,
body.high-contrast #block-olivero-content .webform-submission-form,
body.high-contrast #block-olivero-content .webform-confirmation,
body.high-contrast #block-olivero-content .results-page {
  background: var(--bg-color) !important;
  color: var(--text-color) !important;
}

.webform-submission-form {
  word-break: keep-all;
  overflow-wrap: normal;
  hyphens: none;
}

/* Main cards */

body.high-contrast #block-olivero-content .intro-screen,
body.high-contrast #block-olivero-content .info-box,
body.high-contrast #block-olivero-content .how-box,
body.high-contrast #block-olivero-content .scenario-card,
body.high-contrast #block-olivero-content .preference-card,
body.high-contrast #block-olivero-content .preferences-preview,
body.high-contrast #block-olivero-content .pattern-card,
body.high-contrast #block-olivero-content .recommendation-card,
body.high-contrast #block-olivero-content .remember-card,
body.high-contrast #block-olivero-content .tool-card,
body.high-contrast #block-olivero-content .strategy-list li {
  background: var(--card-bg-color) !important;
  color: var(--text-color) !important;
  border-color: var(--border-color) !important;
}

/* Text hierarchy */

body.high-contrast #block-olivero-content h1,
body.high-contrast #block-olivero-content h2,
body.high-contrast #block-olivero-content h3,
body.high-contrast #block-olivero-content .results-title,
body.high-contrast #block-olivero-content .section-heading,
body.high-contrast #block-olivero-content .scenario-label,
body.high-contrast #block-olivero-content .preview-label,
body.high-contrast #block-olivero-content .dilemma-heading h1 {
  color: var(--heading-color) !important;
}

body.high-contrast #block-olivero-content p,
body.high-contrast #block-olivero-content li,
body.high-contrast #block-olivero-content label,
body.high-contrast #block-olivero-content span,
body.high-contrast #block-olivero-content .description,
body.high-contrast #block-olivero-content .webform-element-description,
body.high-contrast #block-olivero-content .read-time,
body.high-contrast #block-olivero-content .subtitle,
body.high-contrast #block-olivero-content .prefs-intro {
  color: var(--text-color) !important;
}

body.high-contrast #block-olivero-content strong,
body.high-contrast #block-olivero-content b {
  color: var(--accent-color) !important;
}

/* Radio / checkbox option cards */

body.high-contrast #block-olivero-content .webform-options-display-buttons .form-item,
body.high-contrast #block-olivero-content .webform-options-display-buttons label,
body.high-contrast #block-olivero-content .form-type-radio,
body.high-contrast #block-olivero-content .js-form-type-radio {
  background: var(--radio-bg) !important;
  color: var(--radio-text) !important;
  border-color: var(--radio-border) !important;
}

body.high-contrast #block-olivero-content .webform-options-display-buttons input:checked + label,
body.high-contrast #block-olivero-content .webform-options-display-buttons .form-item:has(input:checked) {
  background: #23385d !important;
  border-color: var(--heading-color) !important;
  color: var(--radio-text) !important;
}

/* Buttons and links */

body.high-contrast #block-olivero-content .button,
body.high-contrast #block-olivero-content input[type="submit"],
body.high-contrast #block-olivero-content .webform-button--next,
body.high-contrast #block-olivero-content .webform-button--previous,
body.high-contrast #block-olivero-content .webform-button--submit {
  background: var(--button-bg) !important;
  color: var(--button-text) !important;
  border-color: var(--button-bg) !important;
}

body.high-contrast #block-olivero-content a {
  color: var(--heading-color) !important;
}

/* Result-specific elements */

body.high-contrast #block-olivero-content .result-bar {
  background: var(--result-bar-bg) !important;
}

body.high-contrast #block-olivero-content .profile-pill {
  background: #1d2d1d !important;
  color: #9cffb2 !important;
  border: 1px solid var(--border-color);
}

body.high-contrast #block-olivero-content .tool-card span {
  background: #263f2d !important;
  color: #9cffb2 !important;
}

/* Settings icon */

body.high-contrast #block-olivero-content .screening-settings-button {
  background: var(--card-bg-color) !important;
  color: var(--heading-color) !important;
  border-color: var(--border-color) !important;
}

/* Highlighted mark text */

body.high-contrast #block-olivero-content mark {
  background: var(--accent-color) !important;
  color: #000000 !important;
}

body.high-contrast #block-olivero-content .webform-confirmation,
body.high-contrast #block-olivero-content .webform-confirmation__message,
body.high-contrast #block-olivero-content .webform-confirmation__message > p,
body.high-contrast #block-olivero-content .results-page {
  background: var(--bg-color) !important;
  color: var(--text-color) !important;
}

body.high-contrast #block-olivero-content .results-page * {
  color: var(--text-color);
}

body.high-contrast #block-olivero-content .results-page h1,
body.high-contrast #block-olivero-content .results-page h2,
body.high-contrast #block-olivero-content .results-page h3 {
  color: var(--heading-color) !important;
}

body.high-contrast #block-olivero-content .results-page strong,
body.high-contrast #block-olivero-content .results-page b {
  color: var(--accent-color) !important;
}


body.high-contrast .webform-confirmation,
body.high-contrast .webform-confirmation__message,
body.high-contrast .webform-confirmation__message > p,
body.high-contrast .results-page {
  background: #000 !important;
  color: #fff !important;
}

body.high-contrast .results-page .pattern-card,
body.high-contrast .results-page .recommendation-card,
body.high-contrast .results-page .remember-card,
body.high-contrast .results-page .tool-card,
body.high-contrast .results-page .strategy-list li {
  background: #111 !important;
  color: #fff !important;
  border-color: #8aa9d6 !important;
}

body.high-contrast,
body.high-contrast .dialog-off-canvas-main-canvas,
body.high-contrast main,
body.high-contrast .main-content,
body.high-contrast .region-content,
body.high-contrast .webform-confirmation,
body.high-contrast .webform-confirmation__message,
body.high-contrast .results-page {
  background: #000 !important;
  color: #fff !important;
}

body.high-contrast .results-page .pattern-card,
body.high-contrast .results-page .recommendation-card,
body.high-contrast .results-page .remember-card,
body.high-contrast .results-page .tool-card,
body.high-contrast .results-page .strategy-list li {
  background: #111 !important;
  color: #fff !important;
  border-color: #8aa9d6 !important;
}

body.high-contrast .results-page h1,
body.high-contrast .results-page h2,
body.high-contrast .results-page h3,
body.high-contrast .results-title,
body.high-contrast .section-heading {
  color: #7db8ff !important;
}

body.high-contrast #block-olivero-page-title,
body.high-contrast #block-olivero-page-title .title,
body.high-contrast #block-olivero-page-title h1,
body.high-contrast .page-title {
  background: #000 !important;
  color: #7db8ff !important;
}

/* Results page */


.webform-confirmation .webform-confirmation__message > p {
  margin: 0;
}

.webform-confirmation .results-page {
  max-width: 90vw;
  margin: 0 auto;
  padding: 24px 28px 48px;
  color: var(--text-color);
  font-family: Arial, Helvetica, sans-serif;
}

.webform-confirmation .results-title {
  margin: 0 0 22px;
  text-align: center;
  font-size: 42px;
  line-height: 1.1;
  color: var(--heading-color);
}

.webform-confirmation .profile-pill {
  width: fit-content;
  margin: 0 auto 32px;
  padding: 13px 28px;
  border-radius: 999px;
  background: #edf4ef;
  font-size: 22px;
  font-weight: 800;
}

.webform-confirmation .pattern-card,
.webform-confirmation .recommendation-card,
.webform-confirmation .remember-card {
  border: 2px solid var(--border-color);
  border-radius: 16px;
  background: var(--bg-color);
}

.webform-confirmation .pattern-card {
  padding: 28px;
  margin-bottom: 34px;
}

.webform-confirmation .pattern-card h2,
.webform-confirmation .section-heading,
.webform-confirmation .remember-card h2 {
  margin: 0 0 22px;
  color: var(--heading-color);
  font-size: 28px;
}

.webform-confirmation .result-row {
  margin-bottom: 14px;
}

.webform-confirmation .result-row-head {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 7px;
  font-size: var(--base-text-size);
}

.webform-confirmation .result-row-head span {
  color: var(--heading-color);
}

.webform-confirmation .result-bar {
  height: 8px;
  border-radius: 999px;
  background: #d7deef;
  overflow: hidden;
}

.webform-confirmation .result-fill {
  display: block;
  height: 100%;
  border-radius: 999px;
}

.webform-confirmation .section-heading {
  margin: 0 0 16px;
  font-size: 24px;
}

.webform-confirmation .recommendation-card {
  margin-bottom: 24px;
  padding: 28px;
  border-left-width: 5px;
  border-left-style: solid;
}

.webform-confirmation .recommendation-card h2 {
  margin: 0 0 12px;
  font-size: 25px;
}

.webform-confirmation .recommendation-card p {
  margin: 0 0 20px;
  font-size: var(--base-text-size);
  line-height: var(--base-line-height);
}

.webform-confirmation .recommendation-card h3 {
  margin: 24px 0 12px;
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.webform-confirmation .check-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.webform-confirmation .check-list li {
  margin: 8px 0;
  font-size: var(--base-text-size);
}

.webform-confirmation .check-list li::before {
  content: "✓";
  margin-right: 10px;
  font-weight: 800;
}

.webform-confirmation .strategy-list {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: strategies;
}

.webform-confirmation .strategy-list li {
  counter-increment: strategies;
  margin: 8px 0;
  padding: 14px 16px;
  border-left-width: 3px;
  border-left-style: solid;
  border-radius: 8px;
  background: #f7f8fa;
  font-size: var(--base-text-size);
  line-height: 1.5;
}

.webform-confirmation .strategy-list li::before {
  content: counter(strategies) ". ";
  font-weight: 800;
}

.webform-confirmation .tool-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.webform-confirmation .tool-card {
  padding: 14px;
  border: 1px solid #cbd5ee;
  border-radius: 8px;
  background: var(--card-bg-color);
}

.webform-confirmation .tool-card strong {
  display: inline-block;
  margin-right: 6px;
  color: #071b3a;
}

.webform-confirmation .tool-card span {
  display: inline-block;
  padding: 2px 7px;
  border-radius: 5px;
  background: #dceee4;
  color: #006b3f;
  font-size: 12px;
  font-weight: 800;
}

.webform-confirmation .tool-card p {
  margin: 6px 0 0;
  font-size: var(--base-text-size);
}

.webform-confirmation .secondary-intro {
  margin: 0 0 18px;
  line-height: var(--base-line-height);
  font-size: var(--base-text-size);
}

.webform-confirmation .remember-card {
  margin-top: 32px;
  padding: 24px 28px;
  background: #f7f8fc;
}

.webform-confirmation .remember-card p {
  margin: 0;
  font-size: 18px;
  line-height: 1.5;
}

/* Width classes */

.webform-confirmation .result-fill.p0 { width: 0%; }
.webform-confirmation .result-fill.p13 { width: 13%; }
.webform-confirmation .result-fill.p25 { width: 25%; }
.webform-confirmation .result-fill.p38 { width: 38%; }
.webform-confirmation .result-fill.p50 { width: 50%; }
.webform-confirmation .result-fill.p63 { width: 63%; }
.webform-confirmation .result-fill.p75 { width: 75%; }
.webform-confirmation .result-fill.p88 { width: 88%; }
.webform-confirmation .result-fill.p100 { width: 100%; }

/* Profile colors */

.webform-confirmation .profile-color-strategic,
.webform-confirmation .check-color-strategic li::before,
.webform-confirmation .strategy-color-strategic li::before {
  color: #1f7a45;
}

.webform-confirmation .profile-bg-strategic {
  background: #1f7a45;
}

.webform-confirmation .border-color-strategic,
.webform-confirmation .strategy-color-strategic li {
  border-left-color: #1f7a45;
}

.webform-confirmation .profile-color-overloaded,
.webform-confirmation .check-color-overloaded li::before,
.webform-confirmation .strategy-color-overloaded li::before {
  color: #8a5a00;
}

.webform-confirmation .profile-bg-overloaded {
  background: #8a5a00;
}

.webform-confirmation .border-color-overloaded,
.webform-confirmation .strategy-color-overloaded li {
  border-left-color: #8a5a00;
}

.webform-confirmation .profile-color-fragmented,
.webform-confirmation .check-color-fragmented li::before,
.webform-confirmation .strategy-color-fragmented li::before {
  color: #6b3fa0;
}

.webform-confirmation .profile-bg-fragmented {
  background: #6b3fa0;
}

.webform-confirmation .border-color-fragmented,
.webform-confirmation .strategy-color-fragmented li {
  border-left-color: #6b3fa0;
}

.webform-confirmation .profile-color-tech,
.webform-confirmation .check-color-tech li::before,
.webform-confirmation .strategy-color-tech li::before {
  color: #4a5a7c;
}

.webform-confirmation .profile-bg-tech {
  background: #4a5a7c;
}

.webform-confirmation .border-color-tech,
.webform-confirmation .strategy-color-tech li {
  border-left-color: #4a5a7c;
}

.webform-confirmation .profile-color-sequential,
.webform-confirmation .check-color-sequential li::before,
.webform-confirmation .strategy-color-sequential li::before {
  color: #2a6080;
}

.webform-confirmation .profile-bg-sequential {
  background: #2a6080;
}

.webform-confirmation .border-color-sequential,
.webform-confirmation .strategy-color-sequential li {
  border-left-color: #2a6080;
}

.webform-confirmation .profile-color-emotional,
.webform-confirmation .check-color-emotional li::before,
.webform-confirmation .strategy-color-emotional li::before {
  color: #9e2a2a;
}

.webform-confirmation .profile-bg-emotional {
  background: #9e2a2a;
}

.webform-confirmation .border-color-emotional,
.webform-confirmation .strategy-color-emotional li {
  border-left-color: #9e2a2a;
}

.webform-confirmation .profile-color-social,
.webform-confirmation .check-color-social li::before,
.webform-confirmation .strategy-color-social li::before {
  color: #1a5a7c;
}

.webform-confirmation .profile-bg-social {
  background: #1a5a7c;
}

.webform-confirmation .border-color-social,
.webform-confirmation .strategy-color-social li {
  border-left-color: #1a5a7c;
}

@media (max-width: 700px) {
  .webform-confirmation .results-page {
    padding: 18px 14px 36px;
  }

  .webform-confirmation .results-title {
    font-size: 34px;
  }

  .webform-confirmation .tool-grid {
    grid-template-columns: 1fr;
  }

  .webform-confirmation .result-row-head {
    flex-direction: column;
    gap: 4px;
  }
}

.webform-confirmation a[href*="webform"],
.webform-confirmation .webform-confirmation__back a,
.webform-confirmation .webform-confirmation__actions a {
  display: block;
  width: fit-content;
  margin: 32px auto 0;
  padding: 14px 28px;
  border: 2px solid #374f8c;
  border-radius: 10px;
  background: #374f8c;
  color: var(--bg-color) !important;
  font-size: var(--base-text-size);
  font-weight: 700;
  text-decoration: none !important;
  text-align: center;
}

.webform-confirmation a[href*="webform"]:hover,
.webform-confirmation .webform-confirmation__back a:hover,
.webform-confirmation .webform-confirmation__actions a:hover {
  background: #263f82;
  border-color: #263f82;
}


/* Scenarios pages */

.screening-settings-button {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 1000;

  display: flex;
  align-items: center;
  justify-content: center;

  width: 52px;
  height: 52px;

  border-radius: 50%;
  background: var(--bg-color);
  border: 2px solid var(--border-color);

  color: var(--heading-color);
  text-decoration: none;

  box-shadow: 0 2px 8px rgba(0,0,0,.08);
  transition: all .2s ease;
}

.screening-settings-button:hover {
  background: #f4f7fc;
  border-color: #374f8c;
  transform: rotate(20deg);
}

.screening-settings-button svg {
  width: 24px;
  height: 24px;
  fill: currentColor;
}

.dilemma-heading {
  margin: 0 0 24px;
  padding: 0 0 14px;
  border-bottom: 3px solid var(--border-color);
}

.dilemma-label {
  display: inline-block;
  margin-bottom: 8px;
  padding: 4px 10px;
  border-radius: 6px;
  background: var(--card-bg-color);
  color: var(--heading-color);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.dilemma-heading h1 {
  margin: 0;
  color: var(--heading-color);
  font-size: 36px;
  font-weight: 800;
  line-height: 1.1;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.scenario-card {
  max-width: 90vw;
  margin: 0 auto;
  padding: 28px 38px 30px;
  border-left: 6px solid #374f8c;
  border-radius: 16px;
  background: var(--card-bg-color);
  border: 2px solid var(--border-color);
  color: var(--text-color);
  font-family: Arial, Helvetica, sans-serif;
  font-size: var(--base-text-size);
  line-height: var(--base-line-height);
}

.scenario-label {
  margin: 0 0 12px;
  font-size: var(--base-text-size);
  letter-spacing: 1.5px;
  font-weight: 700;
  color: var(--heading-color);
}

.read-time {
  margin: 0 0 10px;
  font-size: var(--base-text-size);
  color: var(--text-color);
}

.clock-icon {
  margin-right: 6px;
}

.scenario-card p {
  margin: 0 0 18px;
}

.unsure-title {
  margin-top: 20px;
}

.scenario-card ul {
  margin: 0;
  padding-left: 36px;
}

.scenario-card li {
  margin: 8px 0;
}

.scenario-card strong {
  font-weight: 700;
  color: #263f82;
}

/* Settings page */

body.larger-text .preferences-preview {
  font-size: 1.25rem;
}

body.high-contrast .preferences-preview {
  background: var(--card-bg-color);
  color: #fff;
}

body.dyslexia-font .preferences-preview {
  font-family: OpenDyslexic, Arial, sans-serif;
}

body.wide-line-spacing .preferences-preview {
  line-height: 1.9;
}


/* Load OpenDyslexic from CDN */

/* Dyslexia-friendly font */

@font-face {
  font-family: 'OpenDyslexic';
  src: url('https://cdn.jsdelivr.net/npm/open-dyslexic@1.0.3/woff/OpenDyslexic-Regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'OpenDyslexic';
  src: url('https://cdn.jsdelivr.net/npm/open-dyslexic@1.0.3/woff/OpenDyslexic-Bold.woff') format('woff');
  font-weight: 700;
  font-style: normal;
}

body.dyslexia-font,
body.dyslexia-font * {
  font-family: 'OpenDyslexic', Arial, Helvetica, sans-serif !important;
}


.prefs-intro {
  max-width: 920px;
  margin: 0 auto 38px;
  text-align: justified;
  font-size: var(--base-text-size);
  line-height: var(--base-line-height);
  color: #06245a;
}

.prefs-intro mark {
  background: #d7d7d7;
  color: inherit;
  padding: 0 3px;
}

.preference-card {
  position: relative;
  display: block;
  min-height: 126px;
  margin: 0 0 18px;
  padding: 28px 120px 24px 126px;
  border: 3px solid var(--border-color);
  border-radius: 17px;
  background: var(--card-bg-color);
}

.preference-card::before {
  position: absolute;
  left: 30px;
  top: 50%;
  width: 72px;
  height: 72px;
  transform: translateY(-50%);
  border-radius: 13px;
  background: #f4f6fb;
  color: #0b1d33;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--base-text-size);
  line-height: 1;
}

.pref-larger-text::before {
  content: "Aa";
}

.pref-high-contrast::before {
  content: "◐";
}

.pref-dyslexia-font::before {
  content: "T";
  font-weight: 700;
}

.pref-wide-line-spacing::before {
  content: "☰";
}

.pref-visual-support::before {
  content: "▧";
  font-size: var(--base-text-size);
}

.pref-audio-support::before {
  content: "🔊";
  font-size: var(--base-text-size);
}


.preference-card .form-item__label {
  display: block;
  margin: 0 0 8px;
  font-size: var(--base-text-size);
  font-weight: 700;
  line-height: var(--base-line-height);
  color: var(--text-color);
}

.preference-card .description {
  display: block;
  margin: 0;
}

.preference-card .webform-element-description {
  display: block;
  font-size: var(--base-text-size);
  line-height: var(--base-line-height);
  color: var(--text-color);
}

.preference-card input[type="checkbox"] {
  position: absolute;
  right: 32px;
  top: 50%;
  width: 78px;
  height: 42px;
  transform: translateY(-50%);
  appearance: none;
  border: 0;
  border-radius: 999px;
  background: #d4ddf0;
  cursor: pointer;
}

.preference-card input[type="checkbox"]::before {
  content: "";
  position: absolute;
  top: 4px;
  left: 5px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.28);
  transition: transform 0.2s ease;
}


.preference-card input[type="checkbox"]:checked {
  background: #374f8c;
}

.preference-card input[type="checkbox"]:checked::before {
  transform: translateX(34px);
}

.preferences-preview {
  margin-top: 30px;
  padding: 26px 30px;
  border: 3px dashed var(--border-color);
  border-radius: 17px;
  background: #f8f9fd;
  color: #08245a;
}

.preview-label {
  margin-bottom: 16px;
  font-size: var(--base-text-size);
  font-weight: 700;
  letter-spacing: 1px;
  color: #263f82;
}

.preferences-preview p {
  margin: 0;
  font-size: var(--base-text-size);
  line-height: var(--base-line-height);
}

/* Preview effects */

.preferences-preview.preview-larger-text p {
  font-size: 28px;
}

.preferences-preview.preview-high-contrast {
  background: #071b3a;
  color: var(--bg-color);
  border-color: var(--border-color);
}

.preferences-preview.preview-high-contrast .preview-label {
  color: var(--bg-color);
}

.preferences-preview.preview-dyslexia-font {
  font-family: OpenDyslexic, Arial, Helvetica, sans-serif;
}

.preferences-preview.preview-wide-line-spacing p {
  line-height: 2;
}


/* Intro page */

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
  background: var(--bg-color);
  color: var(--text-color);
}

.intro-screen {
  width: 100%;
  max-width: 90vw;
  margin: 0 auto;
  padding: 12px 32px 28px;
}

.info-box,
.how-box {
  border: 3px solid var(--border-color);
  border-radius: 16px;
  padding: 32px 36px;
  background: var(--bg-color);
  box-shadow: -6px 0 0 #374f8c;
}

.info-box {
  background: var(--card-bg-color);
  margin-bottom: 26px;
}

.info-box p,
.how-box p {
  margin: 0;
  font-size: var(--base-text-size);
  line-height: var(--base-line-height);
}

.subtitle {
  margin: 0 0 26px;
  text-align: center;
  font-size: var(--base-text-size);
  line-height: var(--base-line-height);
}

.how-box {
  box-shadow: none;
  margin-bottom: 36px;
}

.how-box h2 {
  margin: 0 0 20px;
  font-size: var(--base-text-size);
  color: #263f82;
}

.how-box p + p {
  margin-top: 18px;
}

strong {
  font-weight: 700;
}

.form-item__label,
.form-type-radio label,
.js-form-type-radio label,
.webform-options-display-buttons label {
  font-size: var(--base-text-size) !important;
  line-height: var(--base-line-height) !important;
}

.form-item__label *,
.form-type-radio label *,
.js-form-type-radio label *,
.webform-options-display-buttons label * {
  font-size: inherit !important;
  line-height: inherit !important;
}

/* images for visual support and audio support */

.option-visual {
  display: none !important;
}

body.visual-support .option-visual {
  display: block !important;
}

body.audio-support .tts-btn {
  display: inline-flex !important;
}

.tts-btn {
  display: none !important;
  cursor: pointer;
  margin-right: 8px;
}

.tts-btn:focus-visible {
  outline: 3px solid #005fcc;
  outline-offset: 3px;
  border-radius: 4px;
}

/* Keep wrapped answer text out from under the radio */
.form-type-radio,
.js-form-type-radio {
  position: relative;
  padding-left: 56px;
}

/* Put the radio in the reserved left column */
.form-type-radio input[type="radio"],
.js-form-type-radio input[type="radio"] {
  position: absolute;
  left: 0;
  top: 0.25em;
  margin: 0;
}

/* Let the answer use the full remaining width */
.form-type-radio label,
.js-form-type-radio label {
  display: block !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Keep audio icon inline with the answer */
body.audio-support .form-type-radio label .tts-btn,
body.audio-support .js-form-type-radio label .tts-btn {
  position: static !important;
  display: inline-flex !important;
  margin-right: 8px !important;
}