.assess .cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 0px;
  text-align: left;
  border: 1px solid var(--border);
}

.assess .card {
  position: relative;
  background: var(--bg-card);
  padding: 20px;
  border: 1px solid var(--border);
}
.assess .result-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 0px;
  text-align: left;
}

.assess .result-card {
  position: relative;
  background: var(--bg-card);
  padding: 20px;
  border: 1px solid var(--border);
}
.assess .card_with_button {
  padding-bottom: 80px !important;
}
.assess summary {
    }

    /* Tables */
.assess .assess_select_table .table-wrapper,
.assess details .table-wrapper,
.assess .content_list_description .table-wrapper,
.assess .content_item_description .table-wrapper {
      overflow-x: auto;
    }
.assess .assess_select_table table,
.assess details table,
.assess .content_list_description table,
.assess .content_item_description table {
      width: 100%;
      border-collapse: collapse;
/*      margin: 2rem 0; */
      font-size: 16px;
      /* background: #fff; */
    }
.assess details table {
      margin: 0;
    }
.assess details th, 
.assess details td,
.assess .content_list_description th, 
.assess .content_list_description td,
.assess .content_item_description th, 
.assess .content_item_description td {
      padding: 0.75rem 1rem;
      text-align: left;
      border-bottom: 1px solid #e6e6e6;
    }
.assess .assess_select_table th, 
.assess .assess_select_table td {
      padding: 0.4rem 0rem;
      text-align: left;
    }
.assess details th,
.assess .content_list_description th,
.assess .content_item_description th {
background: var(--bg-th);
font-weight: 600;
}
.assess .assess_select_table th {
font-weight: 600;
}
.assess details tr:nth-child(even),
.assess .content_list_description tr:nth-child(even),
.assess .content_item_description tr:nth-child(even) {
background: var(--bg-tr);
}
.assess details tr:hover,
.assess .content_list_description tr:hover,
.assess .content_item_description tr:hover {
background: var(--bg-tr-hover);
}
/*
*/
.assess .generated_image img {
display: block;
margin: 1.5rem auto;
max-width: 100%;
height: auto;
}
.assess .generated_progress img {
display: block;
max-width: 100%;
height: auto;
}
/*
.assess input[type=submit][disabled],
.assess .btn-primary[disabled],
.assess .btn-secondary[disabled] {
background: var(--bg-button-disabled);
color: var(--text-button-disabled);
}

.assess input[type=submit],
.assess .btn-primary,
.assess .btn-secondary {
display: inline-block;
padding: 10px 20px;
text-decoration: none;
border: 0px;
font-size: inherit;
font-weight: 600;
letter-spacing: inherit;
margin-right: 1em;
cursor: pointer;
}

.assess .btn-secondary {
  background: var(--bg-button-secondary) !important;
  color: var(--text-button-secondary) !important;
}

.assess .btn-primary {
  background: var(--bg-button-primary) !important;
  color: var(--text-button-primary) !important;
}
*/
.assess .button_done,
.assess .button_notlocked,
.assess .button_unlocked,
.assess .button_ongoing {
  background: var(--bg-button-secondary) !important;
}
.assess .on_bottom_div {
    position: absolute;
    bottom: 5px;
}
.assess .assess_scale_table,
.assess .assess_select_table,
.assess .assess_valuing_table,
.assess .assess_draganddrop_table {
    margin-bottom: 1em;
}
.assess .assess_scale_table td,
.assess .assess_select_table td,
.assess .assess_valuing_table td,
.assess .assess_draganddrop_table td {
    padding: 0;
    padding-right: 1em;
    padding-bottom: 0.2em;
}
.assess .assess_options_table {
    margin-top: 1em;
    margin-bottom: 2em;
}
.assess .assess_option_table {
    margin-bottom: 0;
}
.assess .assess_option_table td {
    padding-right: 0;
    padding-bottom: 0;
}
.assess .assess_testing_cell {
    background: #ddd;
/*  display: none; */    
}
.assess canvas {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: 100%;
  margin: 0;
  background-color: var(--bg-container);
}

/* =========================================================
   HSP System Scan Result Page
   Applies to assessment result / insight pages
   ========================================================= */

.assess_do_insight {
  --result-bg: #f7f3ea;
  --result-card: #ffffff;
  --result-border: rgba(120, 92, 45, 0.22);
  --result-border-strong: rgba(120, 92, 45, 0.42);
  --result-soft: rgba(176, 133, 66, 0.10);
  --result-gold: #b08542;
  --result-gold-dark: #7a5523;
  --result-text: #161616;
  --result-muted: #5f5a50;

  max-width: 1120px;
  margin: 0 auto;
  /* padding: clamp(1.5rem, 3vw, 3rem); */
}

/* Page heading */
.assess_do_insight .weblet_header {
  margin-bottom: 2rem;
  padding: clamp(1.5rem, 4vw, 3rem);
  border: 1px solid var(--result-border);
  border-radius: 28px;
  background:
    radial-gradient(circle at top left, rgba(176, 133, 66, 0.18), transparent 34%),
    linear-gradient(135deg, #fffaf0 0%, #f6efe3 100%);
  box-shadow: 0 22px 60px rgba(0, 0, 0, 0.07);
}

.assess_do_insight .weblet_header h2 {
  max-width: 820px;
  margin: 0;
  font-size: clamp(2rem, 5vw, 4rem);
  line-height: 1.02;
  letter-spacing: -0.045em;
  color: var(--result-text);
}

/* Card groups */
.assess_do_insight .result-cards {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(1rem, 2vw, 1.35rem);
  margin: 1.35rem 0;
}

/* Default result card */
.assess_do_insight .result-card {
  grid-column: span 12;
  position: relative;
  padding: clamp(1.25rem, 2.5vw, 2rem);
  border: 1px solid var(--result-border);
  border-radius: 24px;
  background: var(--result-card);
  box-shadow: 0 16px 44px rgba(0, 0, 0, 0.055);
  overflow: hidden;
}

/* Subtle gold accent line */
.assess_do_insight .result-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 5px;
  background: linear-gradient(180deg, var(--result-gold), rgba(176, 133, 66, 0.2));
  opacity: 0.85;
}

/* Two-card rows */
.assess_do_insight .result-cards:has(.result-card:nth-child(2)) .result-card {
  grid-column: span 6;
}

/* Three or more cards */
.assess_do_insight .result-cards:has(.result-card:nth-child(3)) .result-card {
  grid-column: span 4;
}

/* Important content cards with lead text */
.assess_do_insight .result-card:has(.lead) {
  border-color: var(--result-border-strong);
  background:
    linear-gradient(180deg, rgba(176, 133, 66, 0.10), rgba(255, 255, 255, 0.94)),
    #ffffff;
}

/* Headings inside cards */
.assess_do_insight .result-card h3 {
  margin: 0 0 0.75rem;
  font-size: clamp(1.15rem, 2vw, 1.45rem);
  line-height: 1.18;
  letter-spacing: -0.025em;
  color: var(--result-text);
}

.assess_do_insight .result-card p {
  color: var(--result-muted);
}

.assess_do_insight .result-card .lead {
  color: var(--result-text);
  font-size: clamp(1.05rem, 2vw, 1.22rem);
  line-height: 1.55;
}

/* System blocks inside scan result */
.assess_do_insight .system-block {
  margin: 1rem 0;
  padding: 1rem 1.15rem;
  border-left: 4px solid var(--result-gold);
  border-radius: 16px;
  background: var(--result-soft);
  color: var(--result-text);
}

/* Result image / diagram */
.assess_do_insight .generated_image {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 320px;
}

.assess_do_insight .generated_image img {
  display: block;
  width: min(100%, 520px);
  height: auto;
  margin: 0 auto;
  border-radius: 20px;
}

/* Final CTA card */
.assess_do_insight .result-cards:last-of-type .result-card,
.assess_do_insight .result-card:has(a.btn-direct) {
  border-color: var(--result-border-strong);
  background:
    radial-gradient(circle at top right, rgba(176, 133, 66, 0.18), transparent 34%),
    linear-gradient(135deg, #161616 0%, #2a241b 100%);
  color: #fff;
}

.assess_do_insight .result-card:has(a.btn-direct)::before {
  background: var(--result-gold);
}

.assess_do_insight .result-card:has(a.btn-direct) h3,
.assess_do_insight .result-card:has(a.btn-direct) p,
.assess_do_insight .result-card:has(a.btn-direct) .lead {
  color: #fff;
}

.assess_do_insight .result-card:has(a.btn-direct) .eyebrow {
  color: var(--structure-soft) !important;
}

/* Buttons inside result cards */
.assess_do_insight .result-card .btn-direct {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0.4rem 0.4rem 0 0;
  padding: 0.78rem 1.05rem;
  border-radius: 999px;
  background: var(--result-gold);
  color: #111;
  font-weight: 700;
  text-decoration: none;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.assess_do_insight .result-card .btn-direct:hover {
  transform: translateY(-1px);
  background: #c2954d;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.18);
}

.assess_do_insight .result-card .btn-secondary,
.assess_do_insight .result-card .btn-direct.btn-secondary {
  border: 1px solid rgba(255, 255, 255, 0.34);
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}

/* Close button area */
.assess_do_insight > .weblet_content > div[style*="clear"] {
  margin-top: 1.5rem !important;
  text-align: center;
}

.assess_do_insight > .weblet_content > div[style*="clear"] .btn-secondary {
  display: inline-flex;
  padding: 0.7rem 1rem;
  border-radius: 999px;
  border: 1px solid var(--result-border);
  color: var(--result-muted);
  text-decoration: none;
}

/* Mobile */
@media (max-width: 860px) {
  .assess_do_insight {
    padding: 1rem;
  }

  .assess_do_insight .result-cards,
  .assess_do_insight .result-cards:has(.result-card:nth-child(2)),
  .assess_do_insight .result-cards:has(.result-card:nth-child(3)) {
    display: block;
  }

  .assess_do_insight .result-card {
    margin: 1rem 0;
  }

  .assess_do_insight .generated_image {
    min-height: auto;
  }

  .assess_do_insight .result-card .btn-direct {
    width: 100%;
    margin-right: 0;
  }
}
/* =========================================================
   HSP Scan Result Layout Refinement
   Radar wide, explanation below, findings in 2 columns
   ========================================================= */

/* 1. Radar/image row: make both cards full width, stacked */
.assess_do_insight .weblet_content > .result-cards:nth-of-type(2) .result-card {
  grid-column: 1 / -1;
}

/* Make the radar itself wider */
.assess_do_insight .weblet_content > .result-cards:nth-of-type(2) .generated_image {
  min-height: 420px;
  padding: clamp(1rem, 3vw, 2rem);
}

.assess_do_insight .weblet_content > .result-cards:nth-of-type(2) .generated_image img {
  width: min(100%, 780px);
  max-width: 780px;
}

/* 2. Findings/result cards: use 2 columns instead of 3 */
.assess_do_insight .weblet_content > .result-cards:nth-of-type(3) .result-card {
  grid-column: span 6;
}

/* Optional: if there is an uneven final findings card, make it full width */
.assess_do_insight .weblet_content > .result-cards:nth-of-type(3) .result-card:last-child:nth-child(odd) {
  grid-column: 1 / -1;
}

/* 3. CTA card stays full width */
.assess_do_insight .weblet_content > .result-cards:nth-of-type(4) .result-card {
  grid-column: 1 / -1;
}

/* Mobile: everything stacked */
@media (max-width: 860px) {
  .assess_do_insight .weblet_content > .result-cards:nth-of-type(2) .result-card,
  .assess_do_insight .weblet_content > .result-cards:nth-of-type(3) .result-card,
  .assess_do_insight .weblet_content > .result-cards:nth-of-type(4) .result-card {
    grid-column: 1 / -1;
  }

  .assess_do_insight .weblet_content > .result-cards:nth-of-type(2) .generated_image {
    min-height: auto;
  }

  .assess_do_insight .weblet_content > .result-cards:nth-of-type(2) .generated_image img {
    width: 100%;
    max-width: 100%;
  }
}
.assess_do_insight .save-result-note {
  margin: 1.25rem 0;
  padding: 1rem 1.1rem;
  border: 1px solid rgba(176, 133, 66, 0.35);
  border-radius: 18px;
  background: rgba(176, 133, 66, 0.2);
}

.assess_do_insight .save-result-note p {
  margin: 0;
  font-size: 0.98rem;
  line-height: 1.55;
}