:root {
  --green: #1b4332;
  --deep: #0f281e;
  --mid: #2d6a4f;
  --pale: #e8f0ec;
  --cream: #faf9f6;
  --gold: #b87517;
  --ink: #17261f;
  --muted: #47554e;
  --line: #dbe4de;
  --white: #fff;
  --shadow: 0 16px 42px rgba(15, 40, 30, 0.1);
}
/* Select-and-confirm question controls */
.question {
  min-height: 520px;
  display: flex;
  flex-direction: column;
}
.answer.selected {
  border-width: 3px;
  box-shadow: 0 0 0 3px #d9ebdf;
  padding: 14px;
}
.selection-confirmation {
  min-height: 24px;
  color: var(--green) !important;
  font-size: 0.9rem;
  font-weight: 800;
}
.actions {
  margin-top: auto;
}
.back-link {
  border: 0;
  background: transparent;
  color: var(--green);
  padding: 10px 4px;
  font:
    800 0.95rem "Plus Jakarta Sans",
    sans-serif;
  text-decoration: underline;
  text-underline-offset: 4px;
  cursor: pointer;
}
.primary:not(:disabled) {
  box-shadow: 0 4px 0 #0d2d20;
}
.score-low {
  --score-color: #247a4c;
  --score-bg: #eaf5ee;
}
.score-watch {
  --score-color: #a96c13;
  --score-bg: #fff6df;
}
.score-priority {
  --score-color: #c45112;
  --score-bg: #fff0df;
}
.score-urgent {
  --score-color: #b42323;
  --score-bg: #fde8e8;
}
.score-key {
  grid-column: 1/-1;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-top: 4px;
}
.score-key span {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 0.76rem;
  font-weight: 800;
}
.score-key i {
  display: block;
  width: 11px;
  height: 11px;
  flex: 0 0 11px;
  background: currentColor;
}
.key-low {
  color: #247a4c;
}
.key-watch {
  color: #a96c13;
}
.key-priority {
  color: #c45112;
}
.key-urgent {
  color: #b42323;
}
* {
  box-sizing: border-box;
}
[hidden] {
  display: none !important;
}
html {
  scroll-behavior: smooth;
}
body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font:
    400 1rem/1.65 "Plus Jakarta Sans",
    sans-serif;
}
.wrap {
  width: min(1080px, calc(100% - 36px));
  margin: auto;
}
.skip {
  position: absolute;
  left: -9999px;
}
.skip:focus {
  left: 12px;
  top: 10px;
  background: #fff;
  padding: 10px;
  z-index: 10;
}
.utility {
  background: var(--deep);
  color: #fff;
  font-size: 0.88rem;
  padding: 9px 0;
}
.utility .wrap,
.nav,
footer .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}
.utility a {
  color: #fff;
  font-weight: 700;
  text-decoration: none;
}
nav {
  background: #fff;
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 5;
}
.nav {
  min-height: 76px;
}
.brand img {
  display: block;
  width: 205px;
}
.back {
  color: var(--green);
  font-weight: 800;
  text-decoration: none;
}
.intro {
  padding: 54px 0 46px;
  background: linear-gradient(135deg, #eef5f1, #fbf6eb);
  border-bottom: 1px solid var(--line);
}
.intro-grid {
  display: grid;
  grid-template-columns: 1.5fr 0.7fr;
  gap: 34px;
  align-items: center;
}
.eyebrow {
  display: inline-block;
  background: #fff3d9;
  color: #80520f;
  border: 1px solid #ead39f;
  border-radius: 999px;
  padding: 6px 12px;
  font-size: 0.78rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
h1 {
  color: var(--green);
  font-size: clamp(2.05rem, 5vw, 3.2rem);
  line-height: 1.08;
  letter-spacing: -0.04em;
  margin: 16px 0 14px;
}
.intro p {
  font-size: 1.08rem;
  color: var(--muted);
  max-width: 67ch;
}
.meta {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}
.meta span {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 7px 10px;
  font-size: 0.84rem;
  font-weight: 700;
}
.intro aside {
  background: #fff;
  border: 1px solid #e6d4b0;
  border-radius: 16px;
  padding: 22px;
  box-shadow: var(--shadow);
}
.intro aside strong {
  color: var(--green);
}
.intro aside p {
  font-size: 0.9rem;
  margin: 7px 0;
}
.offer-label {
  display: block;
  color: #80520f;
  font-size: 0.75rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.offer-price {
  display: block;
  font-size: 2.6rem;
  line-height: 1.1;
  margin: 8px 0;
}
.offer small {
  display: block;
  color: var(--muted);
  border-top: 1px solid var(--line);
  padding-top: 10px;
  margin-top: 12px;
}
.workspace {
  padding: 38px 0 62px;
}
.selector {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-bottom: 18px;
}
.selector button {
  border: 1px solid var(--line);
  background: #fff;
  color: var(--green);
  border-radius: 10px;
  padding: 13px 10px;
  font:
    700 0.92rem "Plus Jakarta Sans",
    sans-serif;
  cursor: pointer;
}
.selector button.active {
  background: var(--green);
  border-color: var(--green);
  color: #fff;
}
.assessment-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: clamp(22px, 5vw, 42px);
  box-shadow: var(--shadow);
  min-height: 470px;
}
.progress-row {
  display: flex;
  justify-content: space-between;
  color: var(--muted);
  font-size: 0.86rem;
  font-weight: 700;
}
.progress {
  height: 8px;
  background: #edf1ee;
  border-radius: 99px;
  overflow: hidden;
  margin: 9px 0 30px;
}
.progress span {
  display: block;
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--green), var(--gold));
  transition: width 0.25s;
}
.start h2,
.question h2,
.results h2 {
  color: var(--green);
  font-size: clamp(1.55rem, 3vw, 2.15rem);
  line-height: 1.2;
  margin: 0 0 12px;
}
.start p,
.question p,
.results p {
  color: var(--muted);
}
.start-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin: 25px 0;
}
.start-grid div {
  background: var(--pale);
  border-radius: 12px;
  padding: 16px;
}
.start-grid strong {
  display: block;
  color: var(--green);
  margin-bottom: 4px;
}
.package-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  list-style: none;
  padding: 0;
  margin: 16px 0 24px;
}
.package-list li {
  background: #f7faf8;
  border: 1px solid var(--line);
  border-radius: 9px;
  padding: 10px 12px;
  color: var(--muted);
  font-weight: 600;
}
.checkout-note {
  font-size: 0.82rem;
  margin: 10px 0 0;
}
.answers {
  display: grid;
  gap: 12px;
  margin: 25px 0;
}
.answer {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  width: 100%;
  text-align: left;
  border: 2px solid var(--line);
  background: #fff;
  border-radius: 12px;
  padding: 15px;
  cursor: pointer;
  color: var(--ink);
}
.answer:hover,
.answer.selected {
  border-color: var(--mid);
  background: var(--pale);
}
.answer-mark {
  flex: 0 0 26px;
  width: 26px;
  height: 26px;
  border: 2px solid #9aaba1;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-weight: 900;
}
.selected .answer-mark {
  background: var(--green);
  border-color: var(--green);
  color: #fff;
}
.actions {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 28px;
}
.primary,
.secondary {
  min-height: 50px;
  border-radius: 9px;
  padding: 12px 20px;
  font-weight: 800;
  cursor: pointer;
}
.primary {
  border: 2px solid var(--green);
  background: var(--green);
  color: #fff;
}
.primary:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.secondary {
  border: 2px solid var(--green);
  background: #fff;
  color: var(--green);
}
.result-hero {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 20px;
  align-items: center;
  background: var(--pale);
  border-radius: 15px;
  padding: 22px;
}
.score {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--green);
  color: #fff;
  font-size: 1.65rem;
  font-weight: 900;
  line-height: 1;
}
.score small {
  font-size: 0.7rem;
  margin-left: 2px;
}
.priority-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  margin: 22px 0;
}
.priority {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 17px;
}
.priority h3 {
  color: var(--green);
  margin: 0 0 6px;
  font-size: 1.05rem;
}
.priority p {
  font-size: 0.92rem;
  margin: 0;
}
.next-steps {
  background: #fff8e8;
  border-left: 4px solid var(--gold);
  border-radius: 9px;
  padding: 18px 20px;
}
.next-steps h3 {
  margin: 0 0 8px;
  color: #70480e;
}
.next-steps ol {
  margin: 0;
  padding-left: 20px;
}
.result-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 24px;
}
.result-actions a {
  text-decoration: none;
}
.disclaimer {
  font-size: 0.82rem;
  color: var(--muted);
  max-width: 860px;
  margin: 20px auto 0;
  text-align: center;
}
footer {
  background: #0b1d15;
  color: #cbd5e1;
  padding: 25px 0;
}
footer a {
  color: #fff;
}
.field {
  margin: 14px 0;
}
.field label {
  display: grid;
  gap: 6px;
  font-weight: 700;
  color: var(--green);
}
.field input {
  width: 100%;
  padding: 13px;
  border: 1px solid #aabbb0;
  border-radius: 9px;
  font: inherit;
  color: var(--ink);
}
.field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.consent-box {
  display: grid;
  gap: 12px;
  background: #f7faf8;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 18px;
  margin: 20px 0;
}
.consent {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  color: var(--muted);
  font-size: 0.92rem;
}
.consent input {
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
}
.error {
  color: #a31616;
  font-weight: 700;
}
.delivery {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: center;
  background: #fff4df;
  border: 1px solid #e7c982;
  border-radius: 12px;
  padding: 15px;
  margin-bottom: 18px;
}
.delivery.success {
  background: #eaf5ee;
  border-color: #a8d2b6;
}
.risk-label {
  display: inline-block;
  color: #80520f;
  background: #fff3d9;
  border-radius: 999px;
  padding: 3px 8px;
  font-size: 0.72rem;
  font-weight: 800;
}
.priority small {
  display: block;
  color: var(--muted);
  border-top: 1px solid var(--line);
  padding-top: 8px;
  margin-top: 10px;
}
.consult-agenda {
  background: var(--pale);
  border-radius: 12px;
  padding: 18px 20px;
  margin-top: 18px;
}
.interpretation-note {
  font-size: 0.9rem;
  color: var(--muted);
  margin-top: 18px;
}
@media (max-width: 800px) {
  .intro-grid {
    grid-template-columns: 1fr;
  }
  .selector,
  .start-grid,
  .priority-grid,
  .package-list,
  .field-row {
    grid-template-columns: 1fr;
  }
  .selector {
    overflow: auto;
    display: flex;
  }
  .selector button {
    min-width: 210px;
  }
  .result-hero {
    grid-template-columns: 1fr;
  }
  .score {
    width: 82px;
    height: 82px;
  }
  .utility .wrap,
  footer .wrap {
    align-items: flex-start;
    flex-direction: column;
  }
  .back {
    font-size: 0.88rem;
  }
  .brand img {
    width: 175px;
  }
}
/* Keep the question itself inside the phone viewport; only the category tabs scroll. */
@media (max-width: 600px) {
  .assessment-card, #stage, .question-shell, .question, .answers, .answer {
    min-width: 0;
    max-width: 100%;
  }
  .question-shell { grid-template-columns: minmax(0, 1fr); }
  .question h2, .answer span, .progress-row span { overflow-wrap: anywhere; }
  .progress-row { flex-wrap: wrap; gap: 4px 12px; }
  .actions { flex-wrap: wrap; }
  .actions > button { min-width: 0; max-width: 100%; }
  .actions .primary { margin-left: auto; }
}
.audience-choice {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin: 24px 0;
}
.audience-choice button {
  display: grid;
  gap: 4px;
  text-align: left;
  border: 2px solid var(--line);
  border-radius: 12px;
  background: #fff;
  color: var(--ink);
  padding: 16px;
  cursor: pointer;
  font: inherit;
}
.audience-choice button:hover,
.audience-choice button.active {
  border-color: var(--green);
  background: var(--pale);
}
.audience-choice strong {
  color: var(--green);
  font-size: 1.05rem;
}
.audience-choice span {
  color: var(--muted);
  font-size: 0.88rem;
}
.question-shell {
  display: grid;
  grid-template-columns: minmax(190px, 240px) minmax(0, 1fr);
  gap: 32px;
  align-items: start;
}
.category-nav {
  border-right: 1px solid var(--line);
  padding-right: 22px;
}
.category-nav > strong {
  display: block;
  color: var(--green);
  margin-bottom: 12px;
}
.category-nav ol {
  display: grid;
  gap: 5px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.category-nav li {
  display: grid;
  grid-template-columns: 30px 1fr;
  gap: 9px;
  align-items: center;
  color: var(--muted);
  border-radius: 9px;
  padding: 8px;
}
.category-nav li span {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid #a7b8ae;
  font-size: 0.78rem;
  font-weight: 800;
}
.category-nav li em {
  font-style: normal;
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1.3;
}
.category-nav li.active {
  background: var(--pale);
  color: var(--green);
}
.category-nav li.active span {
  background: var(--green);
  border-color: var(--green);
  color: #fff;
}
.category-nav li.complete span {
  background: #dceddf;
  border-color: #89b49a;
  color: #17613a;
}
.answering-for {
  display: inline-block;
  margin-bottom: 12px;
  border-radius: 999px;
  background: #fff3d9;
  color: #80520f;
  padding: 5px 10px;
  font-size: 0.78rem;
  font-weight: 800;
}
.consent-box h3 {
  margin: 0;
  color: var(--green);
}
.privacy-details {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 14px 16px;
  margin: 16px 0;
}
.privacy-details summary {
  color: var(--green);
  font-weight: 800;
  cursor: pointer;
}
.privacy-details a {
  color: var(--green);
  font-weight: 700;
}
.form-note {
  font-size: 0.82rem;
  color: var(--muted);
}
@media (max-width: 800px) {
  .audience-choice,
  .question-shell {
    grid-template-columns: 1fr;
  }
  .category-nav {
    border-right: 0;
    border-bottom: 1px solid var(--line);
    padding: 0 0 14px;
  }
  .category-nav ol {
    display: flex;
    overflow-x: auto;
    padding-bottom: 4px;
  }
  .category-nav li {
    min-width: 150px;
  }
  .category-nav li em {
    font-size: 0.76rem;
  }
}
.field {
  margin: 14px 0;
}
.calculating {
  min-height: 430px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.spinner {
  width: 68px;
  height: 68px;
  margin-bottom: 24px;
  border: 7px solid #dce9e1;
  border-top-color: var(--green);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}
.calculation-track {
  width: min(540px, 100%);
  height: 10px;
  margin: 22px 0 9px;
  overflow: hidden;
  background: #e7efea;
  border-radius: 999px;
}
.calculation-track span {
  display: block;
  width: 0;
  height: 100%;
  background: linear-gradient(90deg, var(--mid), var(--gold));
  border-radius: inherit;
}
.calculating > strong {
  color: var(--green);
  font-size: 1.2rem;
}
.calculating > p {
  min-height: 24px;
  color: var(--muted);
  font-weight: 700;
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
.result-hero {
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr);
  gap: 20px 34px;
  align-items: center;
  background: var(--score-bg);
  border-radius: 15px;
  padding: 24px 28px;
  margin-bottom: 26px;
}
.result-kicker {
  grid-column: 1/-1;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.07em;
}
.score-ring {
  width: 168px;
  height: 168px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: conic-gradient(var(--score-color) var(--score-angle), #e4e9e6 0);
  position: relative;
}
.score-ring:after {
  content: "";
  position: absolute;
  inset: 32px;
  border-radius: 50%;
  background: #fff;
}
.score-core {
  position: relative;
  z-index: 1;
  display: grid;
  text-align: center;
  color: var(--score-color);
  line-height: 1;
}
.score-core strong {
  font-size: 2.35rem;
}
.score-core span {
  font-size: 0.78rem;
  font-weight: 800;
  color: var(--muted);
  margin-top: 5px;
}
.result-summary {
  min-width: 0;
}
.result-summary .band-label {
  display: block;
  color: var(--score-color);
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  margin-bottom: 8px;
}
.result-summary h2 {
  overflow-wrap: anywhere;
  font-size: clamp(1.55rem, 3vw, 2.1rem);
  margin-bottom: 10px;
}
.result-summary p {
  margin: 0;
  max-width: 56ch;
}
.interpretation-guide {
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 22px;
  margin: 0 0 26px;
}
.interpretation-guide > h3 {
  color: var(--green);
  font-size: 1.35rem;
  margin: 0 0 6px;
}
.interpretation-guide > p {
  margin: 0 0 16px;
}
.interpretation-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.interpretation-grid div {
  display: grid;
  gap: 3px;
  background: #f7faf8;
  border-radius: 9px;
  padding: 13px;
}
.interpretation-grid strong {
  color: var(--green);
}
.interpretation-grid span {
  color: var(--muted);
  font-size: 0.9rem;
}
.priority p {
  margin: 8px 0;
}
@media (max-width: 800px) {
  .intro-grid {
    grid-template-columns: 1fr;
  }
  .selector,
  .start-grid,
  .priority-grid,
  .package-list,
  .field-row,
  .interpretation-grid {
    grid-template-columns: 1fr;
  }
  .selector {
    overflow: auto;
    display: flex;
  }
  .selector button {
    min-width: 210px;
  }
  .result-hero {
    grid-template-columns: 1fr;
    justify-items: start;
    padding: 20px;
  }
  .result-kicker,
  .score-key {
    grid-column: 1;
  }
  .score-key {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
  }
  .score-ring {
    width: 148px;
    height: 148px;
  }
  .score-ring:after {
    inset: 28px;
  }
  .utility .wrap,
  footer .wrap {
    align-items: flex-start;
    flex-direction: column;
  }
  .back {
    font-size: 0.88rem;
  }
  .brand img {
    width: 175px;
  }
}