/* =========================================
   AMLR MATURITY ASSESSMENT
   MAIN STYLES
========================================= */

* {
  box-sizing: border-box;
}


html {
  font-family:
    Inter,
    Arial,
    sans-serif;
}


body {
  margin: 0;
  background: #FFFFFF;
  color: #1D1D1F;
  font-family:
    Inter,
    Arial,
    sans-serif;
}


.assessment-container {
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
  padding: 50px 30px 70px;
}


/* =========================================
   TYPOGRAPHY
========================================= */

.eyebrow {
  margin-bottom: 14px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: #B65A1C;
}


h1 {
  margin: 0 0 18px;
  font-size: 32px;
  line-height: 1.25;
  font-weight: 700;
  color: #1D1D1F;
}


h2 {
  color: #1D1D1F;
}


p {
  font-size: 17px;
  line-height: 1.65;
  color: #1D1D1F;
}


.intro-text {
  margin-bottom: 40px;
}


.assessment-intro {
  margin: 0 0 32px;
}


.results-intro {
  margin-bottom: 32px;
}


/* =========================================
   PROFILE
========================================= */

.profile-field {
  margin-bottom: 30px;
}


.profile-field label {
  display: block;
  margin-bottom: 10px;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.5;
}


.profile-field select {
  width: 100%;
  padding: 14px 46px 14px 16px;
  border: 1px solid #D9D9D9;
  border-radius: 8px;
  background-color: #FFFFFF;
  font-size: 16px;
  color: #1D1D1F;
  cursor: pointer;
}


.profile-field select:hover {
  border-color: #B65A1C;
}


.profile-field select:focus {
  outline: none;
  border-color: #B65A1C;
  box-shadow:
    0 0 0 3px rgba(182, 90, 28, 0.10);
}


/* =========================================
   BUTTONS
========================================= */

.button-container {
  display: flex;
  justify-content: center;
  margin-top: 38px;
}


.primary-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 30px;
  border: none;
  border-radius: 999px;
  background: #B65A1C;
  color: #FFFFFF;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition:
    background 0.18s ease,
    transform 0.18s ease,
    box-shadow 0.18s ease;
}


.primary-button:hover:not(:disabled) {
  background: #984B17;
  transform: translateY(-1px);
  box-shadow:
    0 5px 14px rgba(182, 90, 28, 0.20);
}


.primary-button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}


.secondary-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 26px;
  border: 1px solid #D9D9D9;
  border-radius: 999px;
  background: #FFFFFF;
  color: #1D1D1F;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}


.secondary-button:hover:not(:disabled) {
  border-color: #B65A1C;
}


.secondary-button:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}


/* =========================================
   ERRORS
========================================= */

.error-message,
.assessment-error {
  display: none;
  margin-top: 18px;
  padding: 14px 18px;
  border-left: 3px solid #B65A1C;
  background: #FAF7F5;
  font-size: 14px;
  line-height: 1.5;
}


.assessment-error {
  text-align: center;
  border-left: none;
  color: #B65A1C;
  background: transparent;
}


/* =========================================
   PROGRESS
========================================= */

.assessment-progress {
  margin-bottom: 32px;
}


#question-counter {
  display: block;
  margin-bottom: 9px;
  font-size: 13px;
  font-weight: 600;
  color: #5F6368;
}


.progress-track {
  width: 100%;
  height: 5px;
  overflow: hidden;
  border-radius: 999px;
  background: #EEEEEE;
}


.progress-bar {
  width: 0%;
  height: 100%;
  border-radius: 999px;
  background: #B65A1C;
  transition: width 0.3s ease;
}


/* =========================================
   QUESTION CARD
========================================= */

.question-card {
  padding: 34px;
  border: 1px solid #E5E5E5;
  border-radius: 14px;
  background: #FFFFFF;
  box-shadow:
    0 4px 18px rgba(0,0,0,0.035);
}


.question-theme {
  margin-bottom: 7px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.3px;
  text-transform: uppercase;
  color: #B65A1C;
}


.question-topic {
  margin-bottom: 16px;
  font-size: 13px;
  font-weight: 600;
  color: #718096;
}


.question-statement {
  margin-bottom: 38px;
  font-size: 21px;
  line-height: 1.5;
  font-weight: 600;
  color: #1D1D1F;
}


/* =========================================
   ASSESSMENT BLOCK
========================================= */

.assessment-block {
  margin-top: 30px;
}


.assessment-block-heading {
  margin-bottom: 16px;
  font-size: 15px;
  font-weight: 700;
  color: #0A1A2F;
}


/* =========================================
   MATURITY ASSESSMENT
========================================= */

.maturity-assessment-panel {
  display: grid;

  grid-template-columns:
    25% 75%;

  width: 100%;

  min-height: 250px;

  border:
    1px solid #E2E5E8;

  border-radius:
    10px;

  overflow: hidden;

  background:
    #FFFFFF;
}


/* =========================================
   MATURITY OPTIONS
   LEFT COLUMN
========================================= */

.maturity-options {
  display: flex;

  flex-direction:
    column;

  gap:
    8px;

  padding:
    18px 16px;

  background:
    #F8F9FA;

  border-right:
    1px solid #E2E5E8;
}


.maturity-option {
  flex: 1;

  display: flex;

  align-items: center;

  gap:
    12px;

  width:
    100%;

  min-height:
    48px;

  padding:
    8px 12px;

  border:
    1px solid #D8A98A;

  border-radius:
    999px;

  background:
    #FFFFFF;

  color:
    #1d1d1f;

  text-align:
    left;

  cursor:
    pointer;

  transition:
    background 0.18s ease,
    border-color 0.18s ease,
    color 0.18s ease,
    transform 0.18s ease;
}


.maturity-option:hover {
  background:
    #FFF8F4;

  border-color:
    #1d1d1f;

  transform:
    translateY(-1px);
}


.maturity-option.selected {
  background:
    #B65A1C;

  border-color:
    #B65A1C;

  color:
    #FFFFFF;
}


.option-number {
  display: flex;

  align-items: center;

  justify-content: center;

  flex:
    0 0 30px;

  width:
    30px;

  height:
    30px;

  border-radius:
    50%;

  background:
    #F7E8DE;

  color:
    #1d1d1f;

  font-size:
    13px;

  font-weight:
    700;
}


.maturity-option.selected .option-number {
  background:
    #FFFFFF;

  color:
    #1d1d1f;
}


.option-label {
  font-size:
    12px;

  line-height:
    1.2;

  font-weight:
    600;
}


/* =========================================
   MATURITY DESCRIPTION
   RIGHT COLUMN
========================================= */

.maturity-description-panel {
  display:
    flex;

  align-items:
    center;

  min-width:
    0;

  padding:
    32px 38px;

  background:
    #FFFFFF;
}


.maturity-description-inner {
  width:
    100%;
}


.selected-value-title {
  margin-bottom:
    14px;

  font-size:
    16px;

  line-height:
    1.35;

  font-weight:
    700;

  color:
    #0A1A2F;
}


.selected-value-description {
  max-width:
    620px;

  font-size:
    15px;

  line-height:
    1.65;

  color:
    #4A5568;
}


/* =========================================
   IMPORTANCE
========================================= */

.importance-block {
  padding-top:
    30px;

  border-top:
    1px solid #E5E5E5;
}


.importance-options {
  display:
    grid;

  grid-template-columns:
    repeat(5, 1fr);

  gap:
    10px;
}


.importance-option {
  min-height:
    72px;

  padding:
    10px 7px;

  border:
    1px solid #D9D9D9;

  border-radius:
    8px;

  background:
    #FFFFFF;

  cursor:
    pointer;

  transition:
    border-color 0.18s ease,
    background 0.18s ease,
    transform 0.18s ease;
}


.importance-option:hover {
  border-color:
    #B65A1C;

  transform:
    translateY(-1px);
}


.importance-option.selected {
  border-color:
    #B65A1C;

  background:
    #FFF7F2;

  box-shadow:
    0 0 0 1px #B65A1C;
}


.importance-number {
  display:
    block;

  margin-bottom:
    4px;

  font-size:
    20px;

  font-weight:
    700;

  color:
    #0A1A2F;
}


.importance-label {
  display:
    block;

  font-size:
    10px;

  line-height:
    1.3;

  color:
    #4A5568;
}


/* =========================================
   IMPORTANCE DESCRIPTION
========================================= */

.importance-description-panel {
  display: flex;

  flex-direction: column;

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

  min-height: 90px;

  margin-top: 16px;

  padding: 18px 22px;

  border-radius: 8px;

  background: #F7F8FA;
}


.importance-description-panel .selected-value-title {
  margin: 0 0 8px;

  font-size: 16px;

  line-height: 1.35;

  font-weight: 700;

  color: #0A1A2F;
}


.importance-description-panel .selected-value-description {
  margin: 0;

  max-width: 100%;

  font-size: 14px;

  line-height: 1.55;

  color: #4A5568;
}


/* =========================================
   NAVIGATION
========================================= */

.assessment-navigation {
  display:
    flex;

  justify-content:
    space-between;

  gap:
    12px;

  margin-top:
    28px;
}


/* =========================================
   RESULTS
========================================= */

#results-section {
  width:
    100%;
}


.overall-result-card {
  margin-bottom:
    28px;

  padding:
    40px 42px 36px;

  border:
    1px solid #E5E5E5;

  border-radius:
    14px;

  background:
    #FFFFFF;

  box-shadow:
    0 4px 18px rgba(0,0,0,0.04);

  text-align:
    center;
}


.overall-result-label {
  margin-bottom:
    10px;

  font-size:
    14px;

  font-weight:
    600;

  color:
    #5F6368;
}


.overall-score-line {
  display:
    flex;

  align-items:
    baseline;

  justify-content:
    center;

  gap:
    5px;
}


.overall-score {
  font-size:
    64px;

  line-height:
    1;

  font-weight:
    700;

  letter-spacing:
    -2px;

  color:
    #B65A1C;
}


.overall-score-outof {
  font-size:
    20px;

  color:
    #5F6368;
}


.overall-maturity {
  display:
    inline-block;

  margin-top:
    17px;

  padding:
    8px 18px;

  border-radius:
    999px;

  background:
    #B65A1C;

  color:
    #FFFFFF;

  font-size:
    13px;

  font-weight:
    700;
}


/* =========================================
   OVERALL SCALE
========================================= */

.maturity-scale-result {
  margin-top:
    42px;
}


.scale-line {
  position:
    relative;

  width:
    100%;

  height:
    6px;

  border-radius:
    999px;

  background:
    #E7E7E7;
}


.scale-line::before {
  content:
    "";

  position:
    absolute;

  inset:
    0;

  border-radius:
    999px;

  background:
    linear-gradient(
      to right,
      #E7E7E7 0%,
      #DCDCDC 25%,
      #D2D2D2 50%,
      #C7C7C7 75%,
      #B65A1C 100%
    );

  opacity:
    0.35;
}


.scale-marker {
  position:
    absolute;

  top:
    50%;

  left:
    0%;

  width:
    18px;

  height:
    18px;

  border:
    4px solid #FFFFFF;

  border-radius:
    50%;

  background:
    #B65A1C;

  box-shadow:
    0 2px 8px rgba(0,0,0,0.18);

  transform:
    translate(-50%, -50%);

  transition:
    left 0.4s ease;

  z-index:
    2;
}


.scale-labels {
  display:
    flex;

  justify-content:
    space-between;

  margin-top:
    14px;
}


.scale-labels span {
  display:
    flex;

  flex-direction:
    column;

  align-items:
    center;

  gap:
    3px;

  min-width:
    45px;

  font-size:
    12px;

  font-weight:
    700;

  color:
    #5F6368;
}


.scale-labels small {
  font-size:
    10px;

  font-weight:
    500;

  color:
    #8A8A8A;
}


/* =========================================
   HIGHLIGHTS
========================================= */

.result-highlights {
  display:
    grid;

  grid-template-columns:
    repeat(2, 1fr);

  gap:
    16px;

  margin-bottom:
    42px;
}


.highlight-card {
  padding:
    22px 24px;

  border:
    1px solid #E5E5E5;

  border-radius:
    12px;

  background:
    #FAFAFA;
}


.highlight-label {
  margin-bottom:
    8px;

  font-size:
    12px;

  font-weight:
    600;

  text-transform:
    uppercase;

  letter-spacing:
    0.8px;

  color:
    #5F6368;
}


.highlight-theme {
  margin-bottom:
    4px;

  font-size:
    18px;

  line-height:
    1.35;

  font-weight:
    700;
}


.highlight-score {
  font-size:
    13px;

  font-weight:
    600;

  color:
    #B65A1C;
}


/* =========================================
   RESULTS HEADINGS
========================================= */

.results-heading {
  margin:
    0 0 18px;

  font-size:
    20px;

  line-height:
    1.35;

  font-weight:
    700;
}


/* =========================================
   THEME RESULTS
========================================= */

.theme-results {
  display:
    flex;

  flex-direction:
    column;

  gap:
    18px;

  margin-bottom:
    44px;
}


.theme-result {
  padding:
    20px 22px;

  border:
    1px solid #E5E5E5;

  border-radius:
    10px;

  background:
    #FFFFFF;
}


.theme-result-header {
  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    15px;

  margin-bottom:
    11px;
}


.theme-result-name {
  font-size:
    15px;

  font-weight:
    700;
}


.theme-result-score {
  display:
    flex;

  align-items:
    center;

  gap:
    10px;
}


.theme-result-number {
  font-size:
    15px;

  font-weight:
    700;

  color:
    #B65A1C;
}


.theme-result-level {
  padding:
    5px 10px;

  border-radius:
    999px;

  background:
    #F3F3F3;

  font-size:
    11px;

  font-weight:
    600;

  color:
    #5F6368;
}


.theme-score-track {
  width:
    100%;

  height:
    8px;

  overflow:
    hidden;

  border-radius:
    999px;

  background:
    #E9E9E9;
}


.theme-score-fill {
  height:
    100%;

  border-radius:
    999px;

  background:
    #B65A1C;

  transition:
    width 0.5s ease;
}


.theme-importance {
  margin-top:
    9px;

  font-size:
    12px;

  color:
    #718096;
}


/* =========================================
   RESPONSE SUMMARY
========================================= */

.response-summary {
  margin-bottom:
    38px;

  border-top:
    1px solid #E5E5E5;
}


.response-item {
  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    20px;

  padding:
    18px 4px;

  border-bottom:
    1px solid #EAEAEA;
}


.response-content {
  flex:
    1;
}


.response-theme {
  margin-bottom:
    5px;

  font-size:
    10px;

  font-weight:
    700;

  letter-spacing:
    0.7px;

  text-transform:
    uppercase;

  color:
    #B65A1C;
}


.response-question {
  font-size:
    14px;

  line-height:
    1.5;
}


.response-scores {
  display:
    flex;

  align-items:
    center;

  gap:
    10px;

  flex:
    0 0 auto;
}


.response-score {
  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  width:
    36px;

  height:
    36px;

  border-radius:
    50%;

  background:
    #0A1A2F;

  color:
    #FFFFFF;

  font-size:
    13px;

  font-weight:
    700;
}


.response-importance {
  font-size:
    11px;

  color:
    #718096;
}


/* =========================================
   RESULTS NOTE
========================================= */

.results-note {
  margin-top:
    30px;

  padding:
    20px 22px;

  border-left:
    3px solid #B65A1C;

  border-radius:
    0 8px 8px 0;

  background:
    #F8F8F8;
}


.results-note strong {
  display:
    block;

  margin-bottom:
    6px;

  font-size:
    14px;
}


.results-note p {
  margin:
    0;

  font-size:
    14px;

  line-height:
    1.55;
}


/* =========================================
   LANDSCAPE
========================================= */

.landscape-heading {
  margin-bottom:
    20px;
}


.landscape-heading p {
  max-width:
    680px;

  margin:
    0;

  font-size:
    14px;

  line-height:
    1.6;

  color:
    #4A5568;
}


.amr-maturity-landscape {
  position:
    relative;

  width:
    100%;

  aspect-ratio:
    1.45 / 1;

  margin-bottom:
    48px;
}


.landscape-grid {
  position:
    absolute;

  left:
    72px;

  right:
    24px;

  top:
    24px;

  bottom:
    64px;

  display:
    grid;

  grid-template-columns:
    repeat(25, 1fr);

  grid-template-rows:
    repeat(25, 1fr);

  overflow:
    visible;

  border:
    1px solid #D9D9D9;

  border-radius:
    10px;
}


.landscape-cell {
  min-width:
    0;

  border-right:
    1px solid rgba(255,255,255,0.35);

  border-bottom:
    1px solid rgba(255,255,255,0.35);
}


/* =========================================
   LANDSCAPE AXES
========================================= */

.landscape-x-label {
  position:
    absolute;

  left:
    72px;

  right:
    24px;

  bottom:
    18px;

  text-align:
    center;

  font-size:
    12px;

  font-weight:
    600;

  color:
    #4A5568;
}


.landscape-y-label {
  position:
    absolute;

  left:
    0;

  top:
    24px;

  bottom:
    64px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  width:
    56px;

  writing-mode:
    vertical-rl;

  transform:
    rotate(180deg);

  font-size:
    12px;

  font-weight:
    600;

  color:
    #4A5568;
}


.landscape-x-values {
  position:
    absolute;

  left:
    72px;

  right:
    24px;

  bottom:
    40px;

  display:
    grid;

  grid-template-columns:
    repeat(5, 1fr);

  text-align:
    center;

  font-size:
    11px;

  color:
    #718096;
}


.landscape-y-values {
  position:
    absolute;

  left:
    40px;

  top:
    24px;

  bottom:
    64px;

  display:
    grid;

  grid-template-rows:
    repeat(5, 1fr);

  align-items:
    center;

  text-align:
    right;

  font-size:
    11px;

  color:
    #718096;
}


/* =========================================
   LANDSCAPE BUBBLES
========================================= */

.landscape-bubble {
  position:
    absolute;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  border:
    2px solid rgba(255,255,255,0.95);

  border-radius:
    50%;

  background:
    #0A1A2F;

  color:
    #FFFFFF;

  box-shadow:
    0 2px 8px rgba(0,0,0,0.20);

  transform:
    translate(-50%, -50%);

  z-index:
    5;
}


.landscape-bubble-number {
  font-size:
    12px;

  font-weight:
    700;
}

/* =========================================
   MATURITY OPTION TEXT
   DEFAULT STATE
========================================= */

.maturity-option,
.maturity-option .option-number,
.maturity-option .option-label {
  color: #1D1D1F;
}


/* SELECTED STATE */

.maturity-option.selected,
.maturity-option.selected .option-label {
  color: #FFFFFF;
}


.maturity-option.selected .option-number {
  color: #1D1D1F;
}
/* =========================================
   MOBILE
========================================= */

@media (max-width: 700px) {

  .assessment-container {
    max-width:
      100%;

    padding:
      35px 20px 50px;
  }


  h1 {
    font-size:
      28px;
  }


  .question-card {
    padding:
      24px 20px;
  }


  .question-statement {
    font-size:
      19px;
  }


  /* -----------------------------------------
     MATURITY MOBILE
  ----------------------------------------- */

  .maturity-assessment-panel {
    grid-template-columns:
      1fr;
  }


  .maturity-options {
    display:
      grid;

    grid-template-columns:
      repeat(5, 1fr);

    gap:
      5px;

    padding:
      8px;

    border-right:
      none;

    border-bottom:
      1px solid #E2E5E8;
  }


  .maturity-option {
    flex-direction:
      column;

    justify-content:
      center;

    gap:
      4px;

    min-height:
      62px;

    padding:
      6px 3px;

    text-align:
      center;
  }


  .option-number {
    flex:
      0 0 25px;

    width:
      25px;

    height:
      25px;
  }


  .option-label {
    font-size:
      8px;
  }


  .maturity-description-panel {
    min-height:
      150px;

    padding:
      24px 20px;
  }


  /* -----------------------------------------
     IMPORTANCE MOBILE
  ----------------------------------------- */

  .importance-options {
    gap:
      6px;
  }


  .importance-option {
    min-height:
      64px;

    padding:
      8px 3px;
  }


  .importance-label {
    font-size:
      9px;
  }


  /* -----------------------------------------
     RESULTS MOBILE
  ----------------------------------------- */

  .result-highlights {
    grid-template-columns:
      1fr;
  }


  .overall-result-card {
    padding:
      32px 20px 30px;
  }


  .overall-score {
    font-size:
      52px;
  }


  .scale-labels small {
    display:
      none;
  }


  .theme-result-header {
    align-items:
      flex-start;
  }


  .theme-result-score {
    flex-direction:
      column;

    align-items:
      flex-end;

    gap:
      5px;
  }


  .response-item {
    align-items:
      flex-start;
  }


  .response-scores {
    flex-direction:
      column;
  }


  /* -----------------------------------------
     LANDSCAPE MOBILE
  ----------------------------------------- */

  .amr-maturity-landscape {
    aspect-ratio:
      1 / 1.05;
  }


  .landscape-grid {
    left:
      48px;

    right:
      8px;

    top:
      20px;

    bottom:
      54px;
  }


  .landscape-x-label {
    left:
      48px;

    right:
      8px;
  }


  .landscape-x-values {
    left:
      48px;

    right:
      8px;
  }


  .landscape-y-label {
    width:
      34px;
  }


  .landscape-y-values {
    left:
      24px;
  }


  .landscape-bubble-number {
    font-size:
      10px;
  }

}
/* =========================================
   RESPONSE SUMMARY
   SCORE COLUMNS
========================================= */

.response-scores {
  display:
    flex;

  align-items:
    flex-start;

  justify-content:
    flex-end;

  gap:
    22px;

  flex:
    0 0 auto;
}


.response-score-column {
  display:
    flex;

  flex-direction:
    column;

  align-items:
    center;

  gap:
    7px;

  min-width:
    64px;

  text-align:
    center;
}


.response-score-label {
  font-size:
    10px;

  line-height:
    1.2;

  font-weight:
    700;

  text-transform:
    uppercase;

  letter-spacing:
    0.7px;

  color:
    #718096;
}


.response-score {
  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  width:
    38px;

  height:
    38px;

  border-radius:
    50%;

  font-size:
    13px;

  line-height:
    1;

  font-weight:
    700;
}


/* -----------------------------------------
   MATURITY
----------------------------------------- */

.response-score-maturity {
  background:
    #B65A1C;

  color:
    #FFFFFF;

  border:
    1px solid #B65A1C;
}


/* -----------------------------------------
   IMPORTANCE
----------------------------------------- */

.response-score-importance {
  background:
    #FFFFFF;

  color:
    #1D1D1F;

  border:
    1px solid #B65A1C;
}


/* =========================================
   THEME NUMBERING
========================================= */

.theme-result-name {
  color:
    #1D1D1F;
}

/* =========================================
   LANDSCAPE BUBBLE SEGMENTS
========================================= */

.landscape-bubble {
  overflow: hidden;
}


.landscape-bubble-segments {
  position: absolute;

  inset: 0;

  display: flex;

  flex-direction: column;

  overflow: hidden;

  border-radius: 50%;
}


.landscape-bubble-segment {
  flex: 1;

  width: 100%;

  min-height: 0;
}


.landscape-bubble-number {
  position: relative;

  z-index: 2;

  display: flex;

  align-items: center;

  justify-content: center;

  width: 100%;

  height: 100%;

  font-size: 12px;

  font-weight: 700;

  color: #FFFFFF;

  text-shadow:
    0 1px 2px rgba(0,0,0,0.25);
}

/* =========================================
   RESPONSE SUMMARY MOBILE
========================================= */

@media (max-width: 700px) {

  .response-scores {
    gap:
      12px;
  }


  .response-score-column {
    min-width:
      48px;
  }


  .response-score-label {
    font-size:
      9px;
  }


  .response-score {
    width:
      34px;

    height:
      34px;
  }

}
/* =========================================
   MANAGEMENT INTERPRETATION
========================================= */

.management-interpretation {

  width: 100%;
  box-sizing: border-box;

  margin-top: 24px;
  margin-bottom: 32px;

  padding: 22px 24px;

  border: 1px solid #e1e1e1;
  border-radius: 12px;

  background: #fafafa;

}


.management-interpretation-label {

  margin-bottom: 10px;

  font-size: 12px;
  font-weight: 700;

  text-transform: uppercase;
  letter-spacing: 0.08em;

  color: #b85f24;

}


.management-interpretation-text {

  font-size: 14px;
  line-height: 1.65;

  color: #1d1d1f;

  max-width: 100%;

}
/* =========================================
   LANDSCAPE LEGEND
========================================= */

.landscape-legend {
  width: 100%;

  margin-top: 8px;
  margin-bottom: 44px;

  padding: 20px 22px;

  border:
    1px solid #E5E5E5;

  border-radius:
    10px;

  background:
    #FAFAFA;
}


.landscape-legend-title {
  margin-bottom:
    16px;

  font-size:
    12px;

  font-weight:
    700;

  text-transform:
    uppercase;

  letter-spacing:
    0.8px;

  color:
    #5F6368;
}


/* =========================================
   LEGEND ROW
========================================= */

.landscape-legend-row {
  display:
    flex;

  align-items:
    center;

  gap:
    18px;

  margin-bottom:
    14px;
}


.landscape-legend-label {
  flex:
    0 0 90px;

  font-size:
    12px;

  font-weight:
    700;

  color:
    #1D1D1F;
}


.landscape-legend-content {
  display:
    flex;

  align-items:
    center;

  gap:
    9px;

  min-width:
    0;

  font-size:
    11px;

  color:
    #718096;
}


/* =========================================
   MATURITY SCALE
========================================= */

.landscape-colour-scale {
  display:
    flex;

  width:
    150px;

  height:
    12px;

  overflow:
    hidden;

  border-radius:
    999px;
}


.landscape-colour-scale span {
  flex:
    1;
}


.landscape-scale-label {
  display:
    flex;

  flex-direction:
    column;

  align-items:
    center;

  min-width:
    24px;

  font-size:
    11px;

  line-height:
    1.1;

  font-weight:
    700;

  color:
    #5F6368;
}


.landscape-scale-label small {
  margin-top:
    3px;

  font-size:
    9px;

  font-weight:
    500;

  color:
    #8A8A8A;
}


.landscape-legend-explanation {
  margin-left:
    5px;

  font-size:
    11px;

  font-weight:
    600;

  color:
    #718096;
}


/* =========================================
   BUBBLE SIZE
========================================= */

.landscape-size-dot {
  display:
    inline-block;

  flex:
    0 0 auto;

  border:
    1px solid #B65A1C;

  border-radius:
    50%;

  background:
    rgba(182, 90, 28, 0.15);
}


.landscape-size-dot.size-small {
  width:
    14px;

  height:
    14px;
}


.landscape-size-dot.size-medium {
  width:
    24px;

  height:
    24px;
}


.landscape-size-dot.size-large {
  width:
    36px;

  height:
    36px;
}


/* =========================================
   SAME POSITION NOTE
========================================= */

.landscape-legend-note {
  margin-top:
    18px;

  padding-top:
    14px;

  border-top:
    1px solid #E5E5E5;

  font-size:
    11px;

  line-height:
    1.55;

  color:
    #718096;
}


.landscape-legend-note strong {
  margin-right:
    4px;

  font-weight:
    700;

  color:
    #4A5568;
}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 700px) {

  .landscape-legend {
    padding:
      18px 16px;
  }


  .landscape-legend-row {
    align-items:
      flex-start;

    gap:
      10px;
  }


  .landscape-legend-label {
    flex:
      0 0 72px;
  }


  .landscape-legend-content {
    flex-wrap:
      wrap;
  }


  .landscape-colour-scale {
    width:
      120px;
  }


  .landscape-legend-explanation {
    width:
      100%;

    margin-left:
      0;

    margin-top:
      2px;
  }

}