.crc-page {
  margin: 0;
  background: #f6f9f8;
  color: #132145;
  font-family: Arial, Helvetica, sans-serif;
}
.crc-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  max-width: 1080px;
  margin: auto;
  padding: 22px clamp(16px, 4vw, 36px);
}
.crc-header img { display: block; width: min(155px, 46vw); height: auto; }
.crc-header a { color: #132145; }
.crc-main { max-width: 1080px; margin: 12px auto 48px; padding: 0 clamp(12px, 4vw, 28px); }
.crc { color: #132145; line-height: 1.55; }
.crc *, .crc { box-sizing: border-box; }
.crc [hidden] { display: none !important; }
.crc-intro {
  padding: clamp(22px, 5vw, 46px);
  border-radius: 12px;
  background: #132145;
  color: #fff;
}
.crc .crc-label { margin: 0 0 8px; color: #99ceaa; font-size: .85rem; font-weight: 700; }
.crc .crc-title { margin: 0 0 12px; color: inherit; line-height: 1.12; font-size: clamp(1.75rem, 4vw, 2.7rem); }
.crc-intro p { max-width: 65ch; margin: 0 0 10px; color: inherit; }
.crc .crc-note { font-size: .87rem; }
.crc-form, .crc-result {
  margin-top: 16px;
  padding: clamp(16px, 4vw, 30px);
  background: #fff;
  border: 1px solid #d7e4e0;
  border-radius: 12px;
}
.crc-question { margin: 0 0 24px; }
.crc .crc-question-text { margin: 0 0 8px; font-weight: 700; color: #132145; }
.crc-options, .crc-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.crc-options label {
  display: flex;
  align-items: center;
  gap: 7px;
  min-height: 44px;
  padding: 6px 11px;
  border: 1px solid #aabeb8;
  border-radius: 6px;
  background: #f6f9f8;
  cursor: pointer;
}
.crc-options input { width: auto; margin: 0; accent-color: #2d6a85; }
.crc .crc-btn {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 9px 14px;
  border: 1px solid #132145;
  border-radius: 6px;
  background: #132145;
  color: #fff;
  font: inherit;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
}
.crc .crc-light { border-color: #99ceaa; background: #99ceaa; color: #132145; }
.crc .crc-secondary { background: #fff; color: #132145; }
.crc :focus-visible { outline: 3px solid #439090; outline-offset: 3px; }
.crc-result h2, .crc-result h3 { margin: 0 0 8px; color: #132145; font-size: 1.35rem; }
.crc-result p { margin: 0 0 12px; }
.crc-result ul { margin: 8px 0 16px; padding-left: 1.3rem; }
.crc-result li { margin-bottom: 8px; }



@container crc-layout (min-width: 720px) {
  .crc-question {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 20px;
  }
  .crc .crc-question-text { margin: 0; }
  .crc-question .crc-options { justify-content: flex-end; }
}
.crc { container: crc-layout / inline-size; }

.crc-result[data-level="red"] { --crc-status: #9e1f29; --crc-status-bg: #fff0f1; }
.crc-result[data-level="amber"] { --crc-status: #784a08; --crc-status-bg: #fff5dd; }
.crc-result[data-level="green"] { --crc-status: #145c40; --crc-status-bg: #eaf6ef; }
.crc .crc-result { border-left: 5px solid var(--crc-status, #d7e4e0); }
.crc .crc-status {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 5px;
  color: var(--crc-status, #132145);
  background: var(--crc-status-bg, #f6f9f8);
  font-weight: 700;
}

.crc .crc-support {
  margin: 16px 0 20px;
  padding: clamp(16px, 4vw, 24px);
  border-left: 4px solid #2d6a85;
  border-radius: 6px;
  background: #edf5f3;
}