.rz-diagnosis {
  --rz-ink: #2d332f;
  --rz-muted: #68706b;
  --rz-green: #3f765e;
  --rz-green-dark: #285440;
  --rz-green-soft: #edf3ef;
  --rz-orange: #b95f3d;
  --rz-orange-soft: #fbf0eb;
  --rz-border: #d9d3c9;
  --rz-paper: #fffdf9;
  color: var(--rz-ink);
  margin: 1.5rem auto;
  max-width: 780px;
  scroll-margin-top: 3rem;
}

/* The diagnosis provides its own heading and share action. Remove Cocoon's
   duplicate page chrome so visitors reach the questions without extra scroll. */
.rz-diagnosis-page .article-header,
.rz-diagnosis-page .article-footer {
  display: none;
}

.rz-diagnosis-page .entry-content {
  margin-top: 0;
}

.rz-diagnosis *,
.rz-diagnosis *::before,
.rz-diagnosis *::after {
  box-sizing: border-box;
}

.rz-diagnosis__card {
  background: var(--rz-paper);
  border: 1px solid var(--rz-border);
  border-radius: 20px;
  box-shadow: 0 12px 34px rgba(45, 51, 47, .07);
  padding: clamp(1.25rem, 4vw, 2.75rem);
}

.rz-diagnosis__intro,
.rz-diagnosis__result {
  text-align: center;
}

.rz-diagnosis h2,
.rz-diagnosis h3 {
  color: var(--rz-ink);
  line-height: 1.45;
}

.rz-diagnosis h2 {
  font-size: clamp(1.55rem, 5vw, 2.2rem);
  margin: .7rem 0 1rem;
}

.rz-diagnosis .rz-diagnosis__intro h2,
.rz-diagnosis .rz-diagnosis__result h2 {
  margin: .7rem 0 1rem !important;
}

.rz-diagnosis h3 {
  font-size: 1.16rem;
  margin: 0 0 .7rem;
}

.rz-diagnosis p,
.rz-diagnosis li {
  line-height: 1.9;
}

.rz-diagnosis__tag {
  background: var(--rz-orange-soft);
  border-radius: 999px;
  color: #8d432a;
  display: inline-block;
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .05em;
  padding: .4rem .85rem;
}

.rz-diagnosis__lead {
  font-size: 1.08rem;
  margin: 0 auto 1rem;
  max-width: 620px;
}

.rz-diagnosis__intro-list {
  display: inline-block;
  margin: .5rem auto 1.2rem;
  text-align: left;
}

.rz-diagnosis__privacy,
.rz-diagnosis__note {
  color: var(--rz-muted);
  font-size: .88rem;
}

.rz-diagnosis__count {
  color: var(--rz-muted);
  font-size: .88rem;
  font-weight: 700;
}

.rz-diagnosis__progress {
  background: #ebe8e1;
  border-radius: 999px;
  height: 8px;
  margin: .65rem 0 1.8rem;
  overflow: hidden;
}

.rz-diagnosis__progress span {
  background: var(--rz-green);
  display: block;
  height: 100%;
  transition: width .25s ease;
}

.rz-diagnosis__options {
  display: grid;
  gap: .75rem;
  margin: 1.35rem 0;
}

.rz-diagnosis__option {
  align-items: flex-start;
  background: #fff;
  border: 1px solid var(--rz-border);
  border-radius: 12px;
  cursor: pointer;
  display: flex;
  gap: .75rem;
  padding: 1rem 1.05rem;
  transition: border-color .15s ease, background-color .15s ease, transform .15s ease;
}

.rz-diagnosis__option:hover {
  border-color: var(--rz-green);
  transform: translateY(-1px);
}

.rz-diagnosis__option:has(input:checked) {
  background: var(--rz-green-soft);
  border-color: var(--rz-green-dark);
  box-shadow: 0 0 0 1px var(--rz-green-dark);
}

.rz-diagnosis__option input {
  accent-color: var(--rz-green-dark);
  flex: 0 0 auto;
  height: 1.15rem;
  margin-top: .35rem;
  width: 1.15rem;
}

.rz-diagnosis__option span {
  line-height: 1.7;
}

.rz-diagnosis__option input:focus-visible,
.rz-diagnosis__button:focus-visible,
.rz-diagnosis a:focus-visible {
  outline: 3px solid #f2ad6f;
  outline-offset: 3px;
}

.rz-diagnosis__error {
  color: #a42f25;
  font-size: .9rem;
  font-weight: 700;
}

.rz-diagnosis__actions {
  align-items: center;
  display: flex;
  gap: .75rem;
  justify-content: space-between;
  margin-top: 1.5rem;
}

.rz-diagnosis__intro .rz-diagnosis__actions {
  justify-content: center;
}

.rz-diagnosis__button {
  appearance: none;
  background: var(--rz-green-dark);
  border: 2px solid var(--rz-green-dark);
  border-radius: 999px;
  color: #fff;
  cursor: pointer;
  font: inherit;
  font-weight: 700;
  min-height: 48px;
  padding: .7rem 1.35rem;
}

.rz-diagnosis__button:hover {
  background: #183f2e;
  border-color: #183f2e;
}

.rz-diagnosis__button--ghost {
  background: #fff;
  color: var(--rz-green-dark);
}

.rz-diagnosis__button--ghost:hover {
  background: var(--rz-green-soft);
  border-color: var(--rz-green-dark);
  color: var(--rz-green-dark);
}

/* This stylesheet is loaded site-wide so article diagnosis links retain the
   same accessible colors even before the child-theme CSS is refreshed. */
.rz-diagnosis-cta .wp-block-button__link,
.rz-diagnosis-cta .wp-block-button__link:visited {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 13px 24px;
  color: #fff !important;
  background: #285440 !important;
  border: 2px solid #285440;
  border-radius: 999px;
  font-weight: 700;
  line-height: 1.5;
  text-align: center;
  text-decoration: none;
  box-shadow: 0 5px 14px rgba(40, 84, 64, .18);
}

.rz-diagnosis-cta .wp-block-button__link:hover,
.rz-diagnosis-cta .wp-block-button__link:focus-visible {
  color: #fff !important;
  background: #183f2e !important;
  border-color: #183f2e;
}

.rz-diagnosis__illustration {
  margin: 1.15rem auto 1.35rem;
  max-width: 420px;
}

.rz-diagnosis__illustration img {
  aspect-ratio: 1 / 1;
  border-radius: 18px;
  display: block;
  height: auto;
  object-fit: cover;
  width: 100%;
}

.rz-diagnosis__eyebrow {
  color: var(--rz-muted);
  font-size: .9rem;
  font-weight: 700;
  margin: 0;
}

.rz-diagnosis__conclusion {
  font-size: 1.08rem;
  font-weight: 600;
  margin: 0 auto 1.4rem;
  max-width: 630px;
}

.rz-diagnosis__secondary {
  background: var(--rz-green-soft);
  border-left: 4px solid var(--rz-green);
  border-radius: 8px;
  line-height: 1.75;
  margin: 1.3rem 0;
  padding: 1rem 1.1rem;
  text-align: left;
}

.rz-diagnosis__result-section,
.rz-diagnosis__articles {
  border-top: 1px solid var(--rz-border);
  margin-top: 1.4rem;
  padding-top: 1.35rem;
  text-align: left;
}

.rz-diagnosis__result-section--caution {
  background: var(--rz-orange-soft);
  border: 0;
  border-radius: 12px;
  padding: 1.1rem 1.2rem;
}

.rz-diagnosis__result ul {
  margin-bottom: 0;
  padding-left: 1.35rem;
}

.rz-diagnosis__articles a {
  color: #8d432a;
  font-weight: 700;
  text-decoration-thickness: 1px;
  text-underline-offset: .2em;
}

.rz-diagnosis__share-status {
  color: var(--rz-green-dark);
  font-size: .9rem;
  min-height: 1.8em;
}

.rz-diagnosis__matching-entry {
  background: var(--rz-green-soft);
  border: 1px solid #bfd1c6;
  border-radius: 14px;
  margin-top: 1.5rem;
  padding: 1.25rem;
  text-align: center;
}

.rz-diagnosis__matching-entry h3 {
  margin-top: .35rem;
}

.rz-diagnosis__matching-form {
  text-align: left;
}

.rz-diagnosis__matching-form > h2,
.rz-diagnosis__matching-form > .rz-diagnosis__lead,
.rz-diagnosis__company-results > h2,
.rz-diagnosis__company-results > .rz-diagnosis__lead {
  text-align: center;
}

.rz-diagnosis__field {
  border: 0;
  display: block;
  margin: 1.35rem 0 0;
  padding: 0;
}

.rz-diagnosis__field > span,
.rz-diagnosis__field legend {
  color: var(--rz-ink);
  display: block;
  font-weight: 700;
  margin-bottom: .55rem;
  padding: 0;
}

.rz-diagnosis__field b {
  color: #a42f25;
  font-size: .75rem;
  margin-left: .3rem;
}

.rz-diagnosis__field select {
  appearance: none;
  background: #fff;
  border: 1px solid var(--rz-border);
  border-radius: 10px;
  color: var(--rz-ink);
  font: inherit;
  min-height: 50px;
  padding: .7rem 2.6rem .7rem .9rem;
  width: 100%;
}

.rz-diagnosis__field select:focus-visible {
  outline: 3px solid #f2ad6f;
  outline-offset: 2px;
}

.rz-diagnosis__field label {
  align-items: flex-start;
  display: flex;
  gap: .5rem;
  line-height: 1.6;
  margin: .55rem 0;
}

.rz-diagnosis__field input {
  accent-color: var(--rz-green-dark);
  height: 1.1rem;
  margin-top: .22rem;
  width: 1.1rem;
}

.rz-diagnosis__field small {
  color: var(--rz-muted);
  display: block;
  line-height: 1.65;
  margin-top: .45rem;
}

.rz-company-list {
  display: grid;
  gap: 1rem;
  margin-top: 1.4rem;
}

.rz-company-card {
  background: #fff;
  border: 1px solid var(--rz-border);
  border-radius: 14px;
  padding: 1.25rem;
  text-align: left;
}

.rz-company-card__head {
  align-items: center;
  display: flex;
  gap: .6rem;
  justify-content: space-between;
}

.rz-company-card__rank {
  color: var(--rz-muted);
  font-size: .82rem;
  font-weight: 700;
}

.rz-company-card__score {
  background: var(--rz-green-soft);
  border-radius: 999px;
  color: var(--rz-green-dark);
  font-size: .88rem;
  padding: .35rem .7rem;
}

.rz-company-card h3 {
  font-size: 1.3rem;
  margin: .7rem 0 .35rem;
}

.rz-company-card__summary {
  margin: 0 0 .8rem;
}

.rz-company-card dl {
  border-bottom: 1px solid var(--rz-border);
  border-top: 1px solid var(--rz-border);
  margin: .8rem 0;
  padding: .4rem 0;
}

.rz-company-card dl > div {
  display: grid;
  gap: .7rem;
  grid-template-columns: 6.5rem minmax(0, 1fr);
  padding: .35rem 0;
}

.rz-company-card dt {
  color: var(--rz-muted);
  font-weight: 700;
}

.rz-company-card dd {
  margin: 0;
}

.rz-company-card__reasons ul {
  margin: .45rem 0 .7rem;
  padding-left: 1.25rem;
}

.rz-company-card__unknown,
.rz-company-card__checked {
  color: var(--rz-muted);
  font-size: .82rem;
}

.rz-company-card__link {
  display: block;
  margin-top: 1rem;
  text-align: center;
  text-decoration: none !important;
}

.rz-diagnosis__no-match {
  background: var(--rz-orange-soft);
  border-radius: 12px;
  margin: 1.2rem 0;
  padding: 1rem 1.2rem;
}

@media (max-width: 560px) {
  .rz-diagnosis {
    margin: 1rem auto;
  }

  .rz-diagnosis .rz-diagnosis__intro h2 {
    font-size: 1.3rem;
    text-wrap: balance;
  }

  .rz-diagnosis__card {
    border-radius: 14px;
    padding: 1.15rem;
  }

  .rz-diagnosis__actions {
    align-items: stretch;
    flex-direction: column-reverse;
  }

  .rz-diagnosis__actions > * {
    width: 100%;
  }

  .rz-diagnosis__button {
    width: 100%;
  }

  .rz-diagnosis__illustration {
    max-width: 330px;
  }

  .rz-company-card {
    padding: 1rem;
  }

  .rz-company-card dl > div {
    gap: .15rem;
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .rz-diagnosis *,
  .rz-diagnosis *::before,
  .rz-diagnosis *::after {
    scroll-behavior: auto !important;
    transition: none !important;
  }
}
.rz-diagnosis-entry {
  box-sizing: border-box;
  margin: 42px 0 16px;
  padding: 28px;
  border: 1px solid #d8cfc2;
  border-radius: 14px;
  background: #f6f1e9;
  color: #2d332f;
  text-align: center;
}

.rz-diagnosis-entry__tag {
  display: inline-block;
  margin-bottom: 8px;
  color: #a64f36;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .08em;
}

.rz-diagnosis-entry__title {
  display: block;
  margin-bottom: 8px;
  font-size: clamp(20px, 2.3vw, 28px);
  line-height: 1.5;
  line-break: strict;
  text-wrap: balance;
}

.rz-diagnosis-entry p {
  margin: 0 auto 18px;
  color: #646b66;
  line-height: 1.8;
  line-break: strict;
  text-wrap: pretty;
}

.rz-diagnosis-entry__button {
  display: inline-block;
  min-width: 220px;
  padding: 13px 24px;
  border-radius: 999px;
  background: #245d48;
  color: #fff !important;
  font-weight: 700;
  text-decoration: none !important;
}

.rz-diagnosis-entry__button:hover,
.rz-diagnosis-entry__button:focus-visible {
  background: #194735;
}

.rz-diagnosis-entry--compact {
  margin: 0;
  padding: 22px 18px;
}

.rz-diagnosis-entry--compact .rz-diagnosis-entry__title {
  font-size: 18px;
  line-height: 1.55;
}

.rz-diagnosis-entry--compact p {
  font-size: 15px;
  line-height: 1.75;
}

.rz-diagnosis-entry--compact .rz-diagnosis-entry__button {
  min-width: 0;
  width: 100%;
  box-sizing: border-box;
}

.rz-diagnosis-footer-entry {
  padding: 16px 20px;
  border-top: 1px solid rgba(255, 255, 255, .18);
  background: #2d332f;
  text-align: center;
}

.rz-diagnosis-footer-entry a {
  color: #fff !important;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 4px;
}

@media (max-width: 834px) {
  .rz-diagnosis-entry {
    margin-top: 32px;
    padding: 22px 18px;
  }

  .rz-diagnosis-entry__button {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }
}