/* =====================================================================
   JHL REPAIR PACK F - mortgage-types.html / new-vs-existing-homes.html
                       reality-check.html / appraisal-process.html
                       home-inspection-guide.html / title-and-survey.html
                       pre-approval-process.html
   TEMPORARY file, loaded after jhl-redesign.min.css for preview only.
   To be folded into jhl-redesign.css later - do not delete without
   migrating these rules first.

   Every selector below is scoped with [data-page="..."] because these
   pages use jhl-* BEM class names that look like design-system
   components but were never actually written into jhl-redesign.css
   (jhl-loan-card, jhl-pmi-calculator, jhl-quiz__*, jhl-calc-*, etc).
   NEVER remove the data-page scope when editing this file - other
   agents are editing repairs/tools-a.css, tools-b.css, tools-c.css
   concurrently for other pages.

   Design tokens (matches jhl-redesign.css :root, hardcoded here so
   this file has zero dependency on other repair packs):
     navy #0D2240   blue #1565A0   sky #EEF4FA   green #00C853
     green-dark #00A843   electric green #00FF85 (navy backgrounds only)
     coral #FF6B5B (warnings/hard)   amber #F59E0B (medium)   purple #6B46C1
     charcoal/text #2D3436 / #33404F   slate/muted #5F6C7B   mist/line #E8EAED
     cream #FBF9F6   warm-white #FEFEFE
     font-display: 'Fraunces', Georgia, serif
     font-body: 'Plus Jakarta Sans', -apple-system, sans-serif
     radius: 16px cards, 12px inner, 8px small tags, 999px pills (functional only)

   v3 flat design rules: 1px solid border cards (#DCE4EE-equivalent /
   var(--mist)), no gradients/glow on cards, no uppercase labels, no
   wide letter-spacing, sentence case everywhere.
   ===================================================================== */

/* =====================================================================
   PAGE: mortgage-types.html
   "Which Mortgage Type Is Right for You?" quiz, loan-type comparison
   table, deep-dive loan cards, PMI calculator, DFW program cards,
   real-scenario tabs.
   ===================================================================== */

/* --- Quiz: progress dots --- */
[data-page="mortgage-types"] .progress-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #E8EAED;
  transition: background .2s ease, transform .2s ease;
}
[data-page="mortgage-types"] .progress-dot.active {
  background: #1565A0;
  transform: scale(1.3);
}
[data-page="mortgage-types"] .progress-dot.completed {
  background: #00C853;
}

/* --- Quiz: question panels (hidden until .active) --- */
[data-page="mortgage-types"] .jhl-quiz__question {
  display: none;
}
[data-page="mortgage-types"] .jhl-quiz__question.active {
  display: block;
}
[data-page="mortgage-types"] .jhl-quiz__question h3 {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 20px;
  font-weight: 700;
  color: #0D2240;
  margin-bottom: 16px;
}
[data-page="mortgage-types"] .jhl-quiz__intro {
  font-size: 16px;
  color: #5F6C7B;
  margin-bottom: 20px;
}

/* --- Quiz: option list --- */
[data-page="mortgage-types"] .jhl-quiz__options {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
[data-page="mortgage-types"] .jhl-quiz__option {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  min-height: 48px;
  background: #fff;
  border: 1px solid #DCE4EE;
  border-radius: 12px;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
  font-size: 16px;
  color: #33404F;
}
[data-page="mortgage-types"] .jhl-quiz__option:hover {
  border-color: #1565A0;
  background: #EEF4FA;
}
[data-page="mortgage-types"] .jhl-quiz__option.selected {
  border-color: #1565A0;
  background: #EEF4FA;
  color: #0D2240;
  font-weight: 600;
}
[data-page="mortgage-types"] .jhl-quiz__option input[type="radio"] {
  width: 20px;
  height: 20px;
  accent-color: #1565A0;
  flex-shrink: 0;
  pointer-events: none;
}
[data-page="mortgage-types"] .jhl-quiz__option label {
  cursor: pointer;
  flex: 1;
}

/* --- Quiz: navigation buttons --- */
[data-page="mortgage-types"] .jhl-quiz__navigation {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 24px;
}
[data-page="mortgage-types"] .jhl-quiz__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 12px 28px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 16px;
  font-weight: 700;
  color: #0D2240;
  background: #00C853;
  border: none;
  border-radius: 999px;
  cursor: pointer;
  transition: background .15s ease, opacity .15s ease;
}
[data-page="mortgage-types"] .jhl-quiz__btn:hover:not(:disabled) {
  background: #00A843;
}
[data-page="mortgage-types"] .jhl-quiz__btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
[data-page="mortgage-types"] .jhl-quiz__btn--secondary {
  background: #fff;
  color: #33404F;
  border: 1px solid #DCE4EE;
}
[data-page="mortgage-types"] .jhl-quiz__btn--secondary:hover:not(:disabled) {
  border-color: #1565A0;
  color: #1565A0;
  background: #fff;
}

/* --- Quiz: result panel (hidden until .show) --- */
[data-page="mortgage-types"] .jhl-quiz__result {
  display: none;
  margin-top: 24px;
  padding: 28px;
  background: #EEF4FA;
  border: 1px solid #DCE4EE;
  border-radius: 16px;
  text-align: center;
}
[data-page="mortgage-types"] .jhl-quiz__result.show {
  display: block;
  animation: jhlFadeIn .4s ease;
}
[data-page="mortgage-types"] .jhl-quiz__result h3 {
  font-size: 15px;
  font-weight: 600;
  color: #5F6C7B;
  margin-bottom: 8px;
}
[data-page="mortgage-types"] .jhl-quiz__result__loan {
  font-family: 'Fraunces', Georgia, serif;
  font-size: clamp(28px, 5vw, 40px);
  font-weight: 800;
  color: #0D2240;
  margin-bottom: 12px;
}
[data-page="mortgage-types"] .jhl-quiz__result__explanation {
  font-size: 16px;
  line-height: 1.6;
  color: #33404F;
  max-width: 560px;
  margin: 0 auto;
}
@keyframes jhlFadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* --- Comparison table (div-based grid "table") --- */
/* Real <table> markup elsewhere on the site is wrapped for scroll;
   this one is built from divs, so the scroll container is the table
   itself and each header/row gets a matching min-width so all rows
   scroll together at 375px instead of wrapping into mush. */
[data-page="mortgage-types"] .jhl-comparison-table {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid #DCE4EE;
  border-radius: 16px;
  background: #fff;
}
[data-page="mortgage-types"] .jhl-comparison-table__header,
[data-page="mortgage-types"] .jhl-comparison-table__row {
  display: grid;
  grid-template-columns: 160px repeat(4, 130px);
  min-width: 660px;
}
[data-page="mortgage-types"] .jhl-comparison-table__header {
  background: #0D2240;
  color: #fff;
  font-weight: 700;
  font-size: 14px;
}
[data-page="mortgage-types"] .jhl-comparison-table__header > div {
  padding: 14px 12px;
}
[data-page="mortgage-types"] .jhl-comparison-table__row {
  border-top: 1px solid #DCE4EE;
}
[data-page="mortgage-types"] .jhl-comparison-table__row:nth-child(even) {
  background: #FBF9F6;
}
[data-page="mortgage-types"] .jhl-comparison-table__cell {
  padding: 14px 12px;
  font-size: 14px;
  color: #33404F;
  display: flex;
  align-items: center;
  gap: 6px;
}
[data-page="mortgage-types"] .jhl-comparison-table__cell:first-child {
  font-weight: 600;
  color: #0D2240;
}
[data-page="mortgage-types"] .jhl-highlight {
  font-weight: 700;
  color: #1565A0;
}
[data-page="mortgage-types"] .jhl-checkmark {
  color: #00C853;
  font-weight: 700;
}
[data-page="mortgage-types"] .jhl-xmark {
  color: #FF6B5B;
  font-weight: 700;
}

/* --- Deep-dive loan cards --- */
[data-page="mortgage-types"] .jhl-loan-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
}
[data-page="mortgage-types"] .jhl-loan-card {
  background: #fff;
  border: 1px solid #DCE4EE;
  border-radius: 16px;
  padding: 24px;
}
[data-page="mortgage-types"] .jhl-loan-card h3 {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 22px;
  font-weight: 700;
  color: #0D2240;
  margin-bottom: 4px;
}
[data-page="mortgage-types"] .jhl-loan-card__tagline {
  font-size: 14px;
  color: #5F6C7B;
  margin-bottom: 16px;
}
[data-page="mortgage-types"] .jhl-loan-card__stat {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 14px 16px;
  background: #EEF4FA;
  border-radius: 10px;
  margin-bottom: 16px;
}
[data-page="mortgage-types"] .jhl-loan-card__stat__label {
  font-size: 13px;
  font-weight: 600;
  color: #5F6C7B;
}
[data-page="mortgage-types"] .jhl-loan-card__stat__value {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 24px;
  font-weight: 800;
  color: #1565A0;
}
[data-page="mortgage-types"] .jhl-loan-card__pros-cons {
  margin-bottom: 14px;
}
[data-page="mortgage-types"] .jhl-loan-card__pros-cons h4 {
  font-size: 13px;
  font-weight: 700;
  color: #0D2240;
  margin-bottom: 8px;
}
[data-page="mortgage-types"] .jhl-loan-card__pros,
[data-page="mortgage-types"] .jhl-loan-card__cons {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
[data-page="mortgage-types"] .jhl-loan-card__pros li,
[data-page="mortgage-types"] .jhl-loan-card__cons li {
  font-size: 14px;
  line-height: 1.5;
  color: #33404F;
  padding-left: 22px;
  position: relative;
}
[data-page="mortgage-types"] .jhl-loan-card__pros li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 2px;
  width: 16px;
  height: 16px;
  background: #00C853;
  border-radius: 50%;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/10px no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/10px no-repeat;
}
[data-page="mortgage-types"] .jhl-loan-card__cons li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 2px;
  width: 16px;
  height: 16px;
  background: #FF6B5B;
  border-radius: 50%;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 6 6 18M6 6l12 12'/%3E%3C/svg%3E") center/10px no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 6 6 18M6 6l12 12'/%3E%3C/svg%3E") center/10px no-repeat;
}
[data-page="mortgage-types"] .jhl-loan-card__best-for {
  font-size: 13px;
  font-weight: 600;
  color: #0D2240;
  padding-top: 14px;
  border-top: 1px solid #DCE4EE;
}

/* --- PMI calculator --- */
[data-page="mortgage-types"] .jhl-pmi-calculator {
  background: #fff;
  border: 1px solid #DCE4EE;
  border-radius: 16px;
  padding: 28px;
}
[data-page="mortgage-types"] .jhl-pmi-calculator h3 {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 20px;
  font-weight: 700;
  color: #0D2240;
  margin-bottom: 18px;
}
[data-page="mortgage-types"] .jhl-calculator-inputs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 16px;
  align-items: end;
  margin-bottom: 24px;
}
[data-page="mortgage-types"] .jhl-input-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
[data-page="mortgage-types"] .jhl-input-group label {
  font-size: 13px;
  font-weight: 600;
  color: #0D2240;
}
[data-page="mortgage-types"] .jhl-input-group input,
[data-page="mortgage-types"] .jhl-input-group select {
  min-height: 48px;
  padding: 0 14px;
  font-size: 16px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  color: #0D2240;
  background: #FBF9F6;
  border: 1px solid #DCE4EE;
  border-radius: 10px;
}
[data-page="mortgage-types"] .jhl-input-group input:focus,
[data-page="mortgage-types"] .jhl-input-group select:focus {
  outline: none;
  border-color: #1565A0;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(21, 101, 160, 0.15);
}
[data-page="mortgage-types"] .jhl-pmi-results {
  display: none;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 16px;
}
[data-page="mortgage-types"] .jhl-pmi-results.show {
  display: grid;
  animation: jhlFadeIn .4s ease;
}
[data-page="mortgage-types"] .jhl-pmi-result-item {
  text-align: center;
  padding: 18px 12px;
  background: #EEF4FA;
  border-radius: 12px;
}
[data-page="mortgage-types"] .jhl-pmi-result-item__label {
  font-size: 13px;
  font-weight: 600;
  color: #5F6C7B;
  margin-bottom: 6px;
}
[data-page="mortgage-types"] .jhl-pmi-result-item__value {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 26px;
  font-weight: 800;
  color: #0D2240;
}

/* --- DFW program cards --- */
[data-page="mortgage-types"] .jhl-program-card {
  background: #fff;
  border: 1px solid #DCE4EE;
  border-radius: 16px;
  padding: 24px;
  margin-bottom: 20px;
}
[data-page="mortgage-types"] .jhl-program-card h3 {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 20px;
  font-weight: 700;
  color: #0D2240;
  margin-bottom: 8px;
}
[data-page="mortgage-types"] .jhl-program-card__type {
  display: inline-block;
  padding: 4px 10px;
  background: #EEF4FA;
  color: #1565A0;
  font-size: 12px;
  font-weight: 700;
  border-radius: 6px;
  margin-bottom: 12px;
}
[data-page="mortgage-types"] .jhl-program-card__description {
  font-size: 15px;
  line-height: 1.6;
  color: #33404F;
  margin-bottom: 18px;
}
[data-page="mortgage-types"] .jhl-program-details {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 14px;
  padding-top: 16px;
  border-top: 1px solid #DCE4EE;
}
[data-page="mortgage-types"] .jhl-program-detail {
  display: flex;
  flex-direction: column;
}
[data-page="mortgage-types"] .jhl-program-detail__label {
  font-size: 12px;
  font-weight: 600;
  color: #5F6C7B;
  margin-bottom: 4px;
}
[data-page="mortgage-types"] .jhl-program-detail__value {
  font-size: 15px;
  font-weight: 700;
  color: #0D2240;
}

/* --- Real-scenario tabs (jhl-tab / jhl-tab-content, distinct from
   the site-wide .jhl-tabs__nav/__btn/__panel component) --- */
[data-page="mortgage-types"] .jhl-tabs {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 4px;
  margin-bottom: 24px;
}
[data-page="mortgage-types"] .jhl-tab {
  flex: 0 0 auto;
  min-height: 48px;
  display: flex;
  align-items: center;
  padding: 0 20px;
  background: #fff;
  border: 1px solid #DCE4EE;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 700;
  color: #33404F;
  cursor: pointer;
  white-space: nowrap;
  transition: border-color .15s ease, color .15s ease, background .15s ease;
}
[data-page="mortgage-types"] .jhl-tab:hover {
  border-color: #1565A0;
  color: #1565A0;
}
[data-page="mortgage-types"] .jhl-tab.active {
  background: #0D2240;
  border-color: #0D2240;
  color: #fff;
}
[data-page="mortgage-types"] .jhl-tab-content {
  display: none;
  background: #fff;
  border: 1px solid #DCE4EE;
  border-radius: 16px;
  padding: 24px;
}
[data-page="mortgage-types"] .jhl-tab-content.active {
  display: block;
  animation: jhlFadeIn .3s ease;
}
[data-page="mortgage-types"] .jhl-tab-content h3 {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 20px;
  font-weight: 700;
  color: #0D2240;
  margin-bottom: 16px;
}
[data-page="mortgage-types"] .jhl-scenario__profile {
  padding: 14px 16px;
  background: #FBF9F6;
  border-radius: 10px;
  margin-bottom: 16px;
  font-size: 15px;
  color: #33404F;
}
[data-page="mortgage-types"] .jhl-scenario__recommendation {
  padding: 16px;
  background: #EEF4FA;
  border-radius: 12px;
  margin-bottom: 16px;
}
[data-page="mortgage-types"] .jhl-scenario__recommendation h4 {
  font-size: 16px;
  font-weight: 700;
  color: #0D2240;
  margin-bottom: 6px;
}
[data-page="mortgage-types"] .jhl-scenario__recommendation p {
  font-size: 15px;
  color: #33404F;
  margin: 0;
}
[data-page="mortgage-types"] .jhl-scenario__why h4 {
  font-size: 15px;
  font-weight: 700;
  color: #0D2240;
  margin-bottom: 10px;
}
[data-page="mortgage-types"] .jhl-scenario__why ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
[data-page="mortgage-types"] .jhl-scenario__why li {
  font-size: 15px;
  line-height: 1.5;
  color: #33404F;
  padding-left: 22px;
  position: relative;
}
[data-page="mortgage-types"] .jhl-scenario__why li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 3px;
  width: 16px;
  height: 16px;
  background: #00C853;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/10px no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/10px no-repeat;
}

@media (max-width: 480px) {
  [data-page="mortgage-types"] .jhl-comparison-table__header,
  [data-page="mortgage-types"] .jhl-comparison-table__row {
    min-width: 600px;
  }
}

/* =====================================================================
   PAGE: new-vs-existing-homes.html
   Quick-comparison do/dont-style columns, 8-question decision quiz
   with meter result, true-cost calculator, side-by-side timelines,
   builder-questions checklist grid with progress bar.
   ===================================================================== */

/* --- Quick comparison: new/existing color variants (base
   .jhl-comparison/__column/__header/__list is already sitewide,
   only the --new/--existing modifiers are missing here) --- */
[data-page="new-vs-existing-homes"] .jhl-comparison__column--new {
  background: linear-gradient(135deg, rgba(21, 101, 160, 0.06) 0%, rgba(21, 101, 160, 0.02) 100%);
  border: 2px solid #1565A0;
}
[data-page="new-vs-existing-homes"] .jhl-comparison__column--existing {
  background: linear-gradient(135deg, rgba(107, 70, 193, 0.06) 0%, rgba(107, 70, 193, 0.02) 100%);
  border: 2px solid #6B46C1;
}
[data-page="new-vs-existing-homes"] .jhl-comparison__column--new .jhl-comparison__header {
  color: #1565A0;
}
[data-page="new-vs-existing-homes"] .jhl-comparison__column--existing .jhl-comparison__header {
  color: #6B46C1;
}
[data-page="new-vs-existing-homes"] .jhl-comparison__column--new .jhl-comparison__list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 6px;
  width: 14px;
  height: 14px;
  background: #1565A0;
  border-radius: 50%;
}
[data-page="new-vs-existing-homes"] .jhl-comparison__column--existing .jhl-comparison__list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 6px;
  width: 14px;
  height: 14px;
  background: #6B46C1;
  border-radius: 50%;
}

/* --- Decision quiz (question panels, button options, result meter) --- */
[data-page="new-vs-existing-homes"] .jhl-quiz__question {
  display: none;
}
[data-page="new-vs-existing-homes"] .jhl-quiz__question.active {
  display: block;
}
[data-page="new-vs-existing-homes"] .jhl-quiz__question > p {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 19px;
  font-weight: 600;
  color: #0D2240;
  margin-bottom: 16px;
}
[data-page="new-vs-existing-homes"] .jhl-quiz__intro {
  font-size: 16px;
  color: #5F6C7B;
  margin-bottom: 20px;
}
[data-page="new-vs-existing-homes"] .jhl-quiz__progress-text {
  font-size: 13px;
  font-weight: 600;
  color: #5F6C7B;
  white-space: nowrap;
}
[data-page="new-vs-existing-homes"] .jhl-quiz__options {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
[data-page="new-vs-existing-homes"] .jhl-quiz__option {
  display: block;
  width: 100%;
  text-align: left;
  min-height: 48px;
  padding: 14px 16px;
  background: #fff;
  border: 1px solid #DCE4EE;
  border-radius: 12px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 16px;
  color: #33404F;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}
[data-page="new-vs-existing-homes"] .jhl-quiz__option:hover {
  border-color: #1565A0;
  background: #EEF4FA;
}
[data-page="new-vs-existing-homes"] .jhl-quiz__option.selected {
  border-color: #1565A0;
  background: #EEF4FA;
  color: #0D2240;
  font-weight: 600;
}
[data-page="new-vs-existing-homes"] .jhl-quiz__result {
  display: none;
  margin-top: 8px;
  padding: 28px;
  background: #EEF4FA;
  border: 1px solid #DCE4EE;
  border-radius: 16px;
  text-align: center;
}
[data-page="new-vs-existing-homes"] .jhl-quiz__result.active {
  display: block;
  animation: jhlFadeIn2 .4s ease;
}
[data-page="new-vs-existing-homes"] .jhl-quiz__result h4 {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 24px;
  font-weight: 800;
  color: #0D2240;
  margin-bottom: 20px;
}
[data-page="new-vs-existing-homes"] .jhl-quiz__result p {
  font-size: 16px;
  line-height: 1.6;
  color: #33404F;
  max-width: 560px;
  margin: 20px auto 20px;
}
[data-page="new-vs-existing-homes"] .jhl-quiz__meter {
  display: grid;
  grid-template-columns: 70px 1fr 70px;
  align-items: center;
  gap: 10px;
}
[data-page="new-vs-existing-homes"] .jhl-quiz__meter-label {
  font-size: 12px;
  font-weight: 700;
  color: #5F6C7B;
}
[data-page="new-vs-existing-homes"] .jhl-quiz__meter-label.jhl-text-right {
  text-align: right;
}
[data-page="new-vs-existing-homes"] .jhl-quiz__meter-bar {
  height: 14px;
  background: #E8EAED;
  border-radius: 999px;
  overflow: hidden;
}
[data-page="new-vs-existing-homes"] .jhl-quiz__meter-fill {
  height: 100%;
  transition: width .5s ease;
}
[data-page="new-vs-existing-homes"] .jhl-quiz__meter-fill--new {
  background: #1565A0;
}
[data-page="new-vs-existing-homes"] .jhl-quiz__meter-fill--existing {
  background: #6B46C1;
}
[data-page="new-vs-existing-homes"] .jhl-quiz__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 12px 28px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 16px;
  font-weight: 700;
  color: #0D2240;
  background: #00C853;
  border: none;
  border-radius: 999px;
  cursor: pointer;
  transition: background .15s ease;
}
[data-page="new-vs-existing-homes"] .jhl-quiz__btn:hover {
  background: #00A843;
}
@keyframes jhlFadeIn2 {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* --- True cost calculator --- */
[data-page="new-vs-existing-homes"] .jhl-calculator__inputs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 16px;
  margin-bottom: 20px;
}
[data-page="new-vs-existing-homes"] .jhl-calculator__group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
[data-page="new-vs-existing-homes"] .jhl-calculator__group label {
  font-size: 13px;
  font-weight: 600;
  color: #0D2240;
}
[data-page="new-vs-existing-homes"] .jhl-calculator__group input {
  min-height: 48px;
  padding: 0 14px;
  font-size: 16px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  color: #0D2240;
  background: #FBF9F6;
  border: 1px solid #DCE4EE;
  border-radius: 10px;
}
[data-page="new-vs-existing-homes"] .jhl-calculator__group input:focus {
  outline: none;
  border-color: #1565A0;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(21, 101, 160, 0.15);
}
[data-page="new-vs-existing-homes"] .jhl-calculator__results {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  margin: 24px 0;
}
[data-page="new-vs-existing-homes"] .jhl-calculator__result-box {
  padding: 20px;
  border-radius: 14px;
  text-align: center;
}
[data-page="new-vs-existing-homes"] .jhl-calculator__result-box h4 {
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 8px;
}
[data-page="new-vs-existing-homes"] .jhl-calculator__result-box--new {
  background: rgba(21, 101, 160, 0.07);
  border: 1px solid #1565A0;
}
[data-page="new-vs-existing-homes"] .jhl-calculator__result-box--new h4 {
  color: #1565A0;
}
[data-page="new-vs-existing-homes"] .jhl-calculator__result-box--existing {
  background: rgba(107, 70, 193, 0.07);
  border: 1px solid #6B46C1;
}
[data-page="new-vs-existing-homes"] .jhl-calculator__result-box--existing h4 {
  color: #6B46C1;
}
[data-page="new-vs-existing-homes"] .jhl-calculator__amount {
  font-family: 'Fraunces', Georgia, serif;
  font-size: clamp(26px, 4vw, 34px);
  font-weight: 800;
  color: #0D2240;
  margin-bottom: 4px;
}
[data-page="new-vs-existing-homes"] .jhl-calculator__detail {
  font-size: 13px;
  color: #5F6C7B;
}
[data-page="new-vs-existing-homes"] .jhl-calculator__note {
  font-size: 14px;
  line-height: 1.6;
  color: #33404F;
  padding: 14px 16px;
  background: #FBF9F6;
  border-left: 3px solid #1565A0;
  border-radius: 0 10px 10px 0;
}

/* --- Side-by-side buying timelines --- */
[data-page="new-vs-existing-homes"] .jhl-timeline-compare {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
}
[data-page="new-vs-existing-homes"] .jhl-timeline-track {
  background: #fff;
  border: 1px solid #DCE4EE;
  border-radius: 16px;
  padding: 24px;
}
[data-page="new-vs-existing-homes"] .jhl-timeline-track h4 {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 19px;
  font-weight: 700;
  color: #0D2240;
  margin-bottom: 18px;
}
[data-page="new-vs-existing-homes"] .jhl-timeline-track--new h4 {
  color: #1565A0;
}
[data-page="new-vs-existing-homes"] .jhl-timeline-track--existing h4 {
  color: #6B46C1;
}
[data-page="new-vs-existing-homes"] .jhl-timeline-steps {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding-left: 20px;
  border-left: 2px solid #E8EAED;
  margin-bottom: 18px;
}
[data-page="new-vs-existing-homes"] .jhl-timeline-step {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
[data-page="new-vs-existing-homes"] .jhl-timeline-step::before {
  content: '';
  position: absolute;
  left: -25px;
  top: 4px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #1565A0;
}
[data-page="new-vs-existing-homes"] .jhl-timeline-track--existing .jhl-timeline-step::before {
  background: #6B46C1;
}
[data-page="new-vs-existing-homes"] .jhl-timeline-step strong {
  font-size: 15px;
  color: #0D2240;
}
[data-page="new-vs-existing-homes"] .jhl-timeline-step span {
  font-size: 14px;
  color: #5F6C7B;
}
[data-page="new-vs-existing-homes"] .jhl-timeline-summary {
  padding: 14px 16px;
  background: #FBF9F6;
  border-radius: 10px;
  font-size: 14px;
  color: #33404F;
  line-height: 1.6;
}
[data-page="new-vs-existing-homes"] .jhl-timeline-summary strong {
  color: #0D2240;
}

/* --- Builder-questions checklist grid with progress bar --- */
[data-page="new-vs-existing-homes"] .jhl-checklist-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
  margin-bottom: 20px;
}
[data-page="new-vs-existing-homes"] .jhl-checklist-progress {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 20px;
  background: #fff;
  border: 1px solid #DCE4EE;
  border-radius: 12px;
}
[data-page="new-vs-existing-homes"] .jhl-checklist-progress__bar {
  flex: 1;
  height: 10px;
  background: #E8EAED;
  border-radius: 999px;
  overflow: hidden;
}
[data-page="new-vs-existing-homes"] .jhl-checklist-progress__fill {
  height: 100%;
  background: linear-gradient(90deg, #1565A0, #00C853);
  border-radius: 999px;
  transition: width .3s ease;
}
[data-page="new-vs-existing-homes"] .jhl-checklist-progress__text {
  font-size: 13px;
  font-weight: 600;
  color: #5F6C7B;
  white-space: nowrap;
}

/* .jhl-card--blue/--purple/--orange are used bare on this page (no
   .jhl-card--bordered companion class), so the sitewide
   .jhl-card--bordered.jhl-card--purple/--blue compound rules never
   match here and the cards render with zero color accent. undef.py
   reports these as "defined" only because OTHER agents' page-scoped
   repair files also mention the class name string - verified by
   direct render check, not by the checker output. */
[data-page="new-vs-existing-homes"] .jhl-card--blue {
  border-left: 4px solid #1565A0;
}
[data-page="new-vs-existing-homes"] .jhl-card--purple {
  border-left: 4px solid #6B46C1;
}

/* =====================================================================
   PAGE: reality-check.html
   Buyer-profile stat cards (empty icon slots), county price cards,
   down-payment myth/reality cards + bar chart, FHA/Conventional
   comparison columns + second bar chart, affordability calculator.
   ===================================================================== */

/* Empty .jhl-stat__icon placeholders carry no emoji/SVG content in
   the markup - hide rather than invent new icon assets. */
[data-page="reality-check"] .jhl-stat__icon {
  display: none;
}
[data-page="reality-check"] .jhl-stat__context {
  font-size: 13px;
  line-height: 1.5;
  color: #5F6C7B;
  margin-top: 6px;
}

/* County price cards use a bare .price div inside .jhl-card */
[data-page="reality-check"] .price {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 28px;
  font-weight: 800;
  color: #1565A0;
  margin: 4px 0;
}

/* --- Myth vs reality cards --- */
[data-page="reality-check"] .jhl-myth-reality {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
  margin-bottom: 28px;
}
[data-page="reality-check"] .jhl-myth-card,
[data-page="reality-check"] .jhl-reality-card {
  padding: 24px;
  border-radius: 16px;
  text-align: center;
}
[data-page="reality-check"] .jhl-myth-card {
  background: rgba(255, 107, 91, 0.06);
  border: 2px solid #FF6B5B;
}
[data-page="reality-check"] .jhl-reality-card {
  background: rgba(0, 200, 83, 0.06);
  border: 2px solid #00C853;
}
[data-page="reality-check"] .jhl-myth-card h4 {
  font-size: 13px;
  font-weight: 700;
  color: #FF6B5B;
  margin-bottom: 10px;
}
[data-page="reality-check"] .jhl-reality-card h4 {
  font-size: 13px;
  font-weight: 700;
  color: #00A843;
  margin-bottom: 10px;
}
[data-page="reality-check"] .jhl-myth-card .big-number,
[data-page="reality-check"] .jhl-reality-card .big-number {
  font-family: 'Fraunces', Georgia, serif;
  font-size: clamp(36px, 6vw, 52px);
  font-weight: 800;
  color: #0D2240;
  line-height: 1;
  margin-bottom: 10px;
}
[data-page="reality-check"] .jhl-myth-card p,
[data-page="reality-check"] .jhl-reality-card p {
  font-size: 15px;
  color: #33404F;
  margin: 0;
}

/* --- Horizontal bar charts (down payment / credit score breakdowns) --- */
[data-page="reality-check"] .jhl-bar-chart {
  background: #fff;
  border: 1px solid #DCE4EE;
  border-radius: 16px;
  padding: 24px;
  margin-bottom: 20px;
}
[data-page="reality-check"] .jhl-bar-chart__title {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 17px;
  font-weight: 700;
  color: #0D2240;
  margin-bottom: 18px;
}
[data-page="reality-check"] .jhl-bar-item {
  margin-bottom: 16px;
}
[data-page="reality-check"] .jhl-bar-item:last-child {
  margin-bottom: 0;
}
[data-page="reality-check"] .jhl-bar-label {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  font-size: 14px;
  color: #33404F;
  margin-bottom: 6px;
}
[data-page="reality-check"] .jhl-bar-label strong {
  color: #0D2240;
}
[data-page="reality-check"] .jhl-bar-track {
  height: 12px;
  background: #E8EAED;
  border-radius: 999px;
  overflow: hidden;
}
[data-page="reality-check"] .jhl-bar-fill {
  height: 100%;
  border-radius: 999px;
  transition: width .5s ease;
}
[data-page="reality-check"] .jhl-bar-fill.green { background: #00C853; }
[data-page="reality-check"] .jhl-bar-fill.blue { background: #1565A0; }
[data-page="reality-check"] .jhl-bar-fill.purple { background: #6B46C1; }
[data-page="reality-check"] .jhl-bar-fill.orange { background: #F59E0B; }

/* --- FHA vs Conventional comparison columns (base .jhl-comparison /
   __column / __header is sitewide; this page uses no --do/--dont
   modifier so the column needs its own flat-card treatment plus the
   .comparison-row / __label / __value row layout, which is new). --- */
[data-page="reality-check"] .jhl-comparison__column {
  background: #fff;
  border: 1px solid #DCE4EE;
}
[data-page="reality-check"] .jhl-comparison__header {
  margin-bottom: 12px;
}
[data-page="reality-check"] .jhl-comparison__header h3 {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 19px;
  font-weight: 700;
  color: #0D2240;
  margin-bottom: 4px;
}
[data-page="reality-check"] .jhl-comparison__header span {
  font-size: 13px;
  color: #5F6C7B;
}
[data-page="reality-check"] .comparison-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  border-top: 1px solid #DCE4EE;
  gap: 12px;
}
[data-page="reality-check"] .jhl-comparison__label {
  font-size: 14px;
  color: #5F6C7B;
}
[data-page="reality-check"] .jhl-comparison__value {
  font-size: 15px;
  font-weight: 700;
  color: #0D2240;
  text-align: right;
}
[data-page="reality-check"] .jhl-comparison__value.highlight {
  color: #1565A0;
  font-size: 18px;
}

/* --- Affordability calculator --- */
[data-page="reality-check"] .jhl-calculator__inputs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 16px;
  margin-bottom: 20px;
}
[data-page="reality-check"] .jhl-calculator__group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
[data-page="reality-check"] .jhl-calculator__group label {
  font-size: 13px;
  font-weight: 600;
  color: #0D2240;
}
[data-page="reality-check"] .jhl-calculator__group input,
[data-page="reality-check"] .jhl-calculator__group select {
  min-height: 48px;
  padding: 0 14px;
  font-size: 16px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  color: #0D2240;
  background: #FBF9F6;
  border: 1px solid #DCE4EE;
  border-radius: 10px;
}
[data-page="reality-check"] .jhl-calculator__group input:focus,
[data-page="reality-check"] .jhl-calculator__group select:focus {
  outline: none;
  border-color: #1565A0;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(21, 101, 160, 0.15);
}
[data-page="reality-check"] .jhl-calculator__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  width: 100%;
  padding: 12px 28px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 16px;
  font-weight: 700;
  color: #0D2240;
  background: #00C853;
  border: none;
  border-radius: 999px;
  cursor: pointer;
  transition: background .15s ease;
}
[data-page="reality-check"] .jhl-calculator__button:hover {
  background: #00A843;
}
[data-page="reality-check"] .jhl-calculator__results {
  display: none;
  margin-top: 20px;
  padding: 24px;
  background: #EEF4FA;
  border-radius: 14px;
  text-align: center;
}
[data-page="reality-check"] .jhl-calculator__results h4 {
  font-size: 14px;
  font-weight: 600;
  color: #5F6C7B;
  margin-bottom: 8px;
}
[data-page="reality-check"] .result-value {
  font-family: 'Fraunces', Georgia, serif;
  font-size: clamp(32px, 5vw, 44px);
  font-weight: 800;
  color: #0D2240;
  margin-bottom: 8px;
}
[data-page="reality-check"] .result-breakdown {
  font-size: 14px;
  color: #33404F;
}
[data-page="reality-check"] .data-note {
  margin-top: 20px;
  padding: 14px 16px;
  background: #FBF9F6;
  border-radius: 10px;
  font-size: 12px;
  line-height: 1.6;
  color: #5F6C7B;
}

/* =====================================================================
   PAGE: appraisal-process.html
   Appraisal cost breakdown, low-appraisal option cards, appraisal gap
   calculator, prep tip cards.
   ===================================================================== */

/* The inline gap-calculator JS (see script near the end of the page)
   sets text color with var(--vibrant-orange), but that token is never
   defined anywhere in jhl-redesign.css - only --orange and --amber
   exist. Without this the warning text silently renders in the
   inherited body color instead of orange. Defining it here on the
   page's own body scope fixes the inline styles without touching JS. */
[data-page="appraisal-process"] {
  --vibrant-orange: #F59E0B;
}

/* --- Appraisal cost breakdown list --- */
[data-page="appraisal-process"] .jhl-cost-breakdown {
  background: #fff;
  border: 1px solid #DCE4EE;
  border-radius: 16px;
  padding: 24px;
  margin: 20px 0;
}
[data-page="appraisal-process"] .jhl-cost-breakdown h3 {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 18px;
  font-weight: 700;
  color: #0D2240;
  margin-bottom: 12px;
}
[data-page="appraisal-process"] .jhl-cost-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  border-top: 1px solid #DCE4EE;
  font-size: 15px;
  color: #33404F;
}
[data-page="appraisal-process"] .jhl-cost-value {
  font-weight: 700;
  color: #1565A0;
  text-align: right;
  white-space: nowrap;
}

/* --- Low-appraisal option cards --- */
[data-page="appraisal-process"] .jhl-options-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
}
[data-page="appraisal-process"] .jhl-option-card {
  background: #fff;
  border: 1px solid #DCE4EE;
  border-radius: 16px;
  padding: 22px;
}
[data-page="appraisal-process"] .jhl-option-number {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #0D2240;
  color: #00FF85;
  font-family: 'Fraunces', Georgia, serif;
  font-size: 16px;
  font-weight: 800;
  border-radius: 10px;
  margin-bottom: 14px;
}
[data-page="appraisal-process"] .jhl-option-card h4 {
  font-size: 17px;
  font-weight: 700;
  color: #0D2240;
  margin-bottom: 8px;
}
[data-page="appraisal-process"] .jhl-option-card p {
  font-size: 14px;
  line-height: 1.6;
  color: #33404F;
  margin: 0;
}

/* --- Appraisal gap calculator --- */
[data-page="appraisal-process"] .jhl-calc-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 16px;
  margin-bottom: 16px;
}
[data-page="appraisal-process"] .jhl-calc-input-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
[data-page="appraisal-process"] .jhl-calc-input-group label {
  font-size: 13px;
  font-weight: 600;
  color: #0D2240;
}
[data-page="appraisal-process"] .jhl-calc-input-group input {
  min-height: 48px;
  padding: 0 14px;
  font-size: 16px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  color: #0D2240;
  background: #FBF9F6;
  border: 1px solid #DCE4EE;
  border-radius: 10px;
}
[data-page="appraisal-process"] .jhl-calc-input-group input:focus {
  outline: none;
  border-color: #1565A0;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(21, 101, 160, 0.15);
}
[data-page="appraisal-process"] .jhl-calc-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  width: 100%;
  padding: 12px 28px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 16px;
  font-weight: 700;
  color: #0D2240;
  background: #00C853;
  border: none;
  border-radius: 999px;
  cursor: pointer;
  transition: background .15s ease;
  margin-top: 4px;
}
[data-page="appraisal-process"] .jhl-calc-button:hover {
  background: #00A843;
}
/* Navy results panel - lets the electric-green "no gap" message and
   the orange "uncovered gap" warning from the inline JS both read
   clearly (electric green is an accent reserved for navy backgrounds
   per the v3 design system). */
[data-page="appraisal-process"] .jhl-calc-result {
  margin-top: 20px;
  padding: 24px;
  background: #0D2240;
  border-radius: 16px;
  text-align: center;
}
[data-page="appraisal-process"] .jhl-calc-result-value {
  font-family: 'Fraunces', Georgia, serif;
  font-size: clamp(32px, 5vw, 44px);
  font-weight: 800;
  color: #fff;
}
[data-page="appraisal-process"] .jhl-calc-result-label {
  font-size: 13px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.7);
  margin-top: 4px;
  margin-bottom: 16px;
}
[data-page="appraisal-process"] .jhl-calc-explanation {
  text-align: left;
  font-size: 14px;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.9);
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
}
[data-page="appraisal-process"] .jhl-calc-explanation ul {
  list-style: none;
  margin: 10px 0;
}
[data-page="appraisal-process"] .jhl-calc-explanation li {
  padding: 3px 0;
}
[data-page="appraisal-process"] .jhl-calc-explanation strong {
  color: #fff;
}

/* --- Appraisal-day prep tip cards --- */
[data-page="appraisal-process"] .jhl-tips-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
}
[data-page="appraisal-process"] .jhl-tip-card {
  background: #EEF4FA;
  border-radius: 14px;
  padding: 20px;
}
[data-page="appraisal-process"] .jhl-tip-card h5 {
  font-size: 15px;
  font-weight: 700;
  color: #0D2240;
  margin-bottom: 8px;
}
[data-page="appraisal-process"] .jhl-tip-card p {
  font-size: 14px;
  line-height: 1.6;
  color: #33404F;
  margin: 0;
}

/* .jhl-card--blue/--purple/--orange used bare (no --bordered
   companion) - see the note in the new-vs-existing-homes block above
   for why undef.py doesn't catch this. */
[data-page="appraisal-process"] .jhl-card--blue {
  border-left: 4px solid #1565A0;
}
[data-page="appraisal-process"] .jhl-card--purple {
  border-left: 4px solid #6B46C1;
}
[data-page="appraisal-process"] .jhl-card--orange {
  border-left: 4px solid #F59E0B;
}

/* =====================================================================
   PAGE: home-inspection-guide.html
   Inspection timeline step badges, cost stat modifier, interactive
   day-of checklist (collapsible categories, progress bar, reset/print
   buttons).
   ===================================================================== */

[data-page="home-inspection-guide"] .jhl-step__badge {
  display: inline-block;
  margin-top: 10px;
  padding: 4px 10px;
  background: #EEF4FA;
  color: #1565A0;
  font-size: 12px;
  font-weight: 700;
  border-radius: 6px;
}
[data-page="home-inspection-guide"] .jhl-stat__value--orange {
  color: #F59E0B;
}

/* --- Checklist progress bar --- */
[data-page="home-inspection-guide"] .jhl-checklist__progress {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 20px;
}
[data-page="home-inspection-guide"] .jhl-progress-bar {
  flex: 1;
  height: 10px;
  background: #E8EAED;
  border-radius: 999px;
  overflow: hidden;
}
[data-page="home-inspection-guide"] .jhl-progress-bar__fill {
  height: 100%;
  background: linear-gradient(90deg, #1565A0, #00C853);
  border-radius: 999px;
  transition: width .3s ease;
}
[data-page="home-inspection-guide"] .jhl-progress-text {
  font-size: 13px;
  font-weight: 700;
  color: #0D2240;
  white-space: nowrap;
}

/* --- Collapsible category accordion --- */
[data-page="home-inspection-guide"] .jhl-category-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 48px;
  padding: 14px 16px;
  margin-top: 16px;
  background: #EEF4FA;
  border-radius: 10px;
  cursor: pointer;
  font-size: 15px;
  font-weight: 700;
  color: #0D2240;
}
[data-page="home-inspection-guide"] .jhl-category-toggle {
  font-size: 12px;
  color: #1565A0;
  transition: transform .2s ease;
}
[data-page="home-inspection-guide"] .jhl-category-header.collapsed .jhl-category-toggle {
  transform: rotate(-90deg);
}
[data-page="home-inspection-guide"] .jhl-category-items {
  padding: 8px 4px 4px;
}
[data-page="home-inspection-guide"] .jhl-category-items.hidden {
  display: none;
}

/* --- Checklist items: this page toggles a .completed class (not the
   sitewide .checked), and its checkbox svg ships with no width/height
   attributes, so without sizing here it renders at the SVG default
   (300x150) and blows out the 22px checkbox. --- */
[data-page="home-inspection-guide"] .jhl-checklist__checkbox {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
[data-page="home-inspection-guide"] .jhl-checklist__checkbox svg {
  width: 14px;
  height: 14px;
  opacity: 0;
  transition: opacity .15s ease;
}
[data-page="home-inspection-guide"] .jhl-checklist__item.completed .jhl-checklist__checkbox {
  background: #00C853;
  border-color: #00C853;
}
[data-page="home-inspection-guide"] .jhl-checklist__item.completed .jhl-checklist__checkbox svg {
  opacity: 1;
}
[data-page="home-inspection-guide"] .jhl-checklist__item.completed .jhl-checklist__text {
  color: #5F6C7B;
  text-decoration: line-through;
}
[data-page="home-inspection-guide"] .jhl-checklist__note {
  font-size: 13px;
  color: #5F6C7B;
  margin-top: 2px;
}

/* --- Reset / print action buttons (their svgs need the same
   explicit sizing fix as the checkbox icons above) --- */
[data-page="home-inspection-guide"] .jhl-action-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid #DCE4EE;
}
[data-page="home-inspection-guide"] .jhl-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 48px;
  padding: 0 20px;
  background: #fff;
  border: 1px solid #DCE4EE;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 700;
  color: #33404F;
  cursor: pointer;
  transition: border-color .15s ease, color .15s ease;
}
[data-page="home-inspection-guide"] .jhl-action-btn:hover {
  border-color: #1565A0;
  color: #1565A0;
}
[data-page="home-inspection-guide"] .jhl-action-btn svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

/* .jhl-card--blue/--purple/--orange used bare (no --bordered
   companion) - see the note in the new-vs-existing-homes block above
   for why undef.py doesn't catch this. */
[data-page="home-inspection-guide"] .jhl-card--blue {
  border-left: 4px solid #1565A0;
}
[data-page="home-inspection-guide"] .jhl-card--purple {
  border-left: 4px solid #6B46C1;
}
[data-page="home-inspection-guide"] .jhl-card--orange {
  border-left: 4px solid #F59E0B;
}

/* =====================================================================
   PAGE: title-and-survey.html
   Title-search timeline badges, lender vs owner insurance comparison
   cards, Texas-specifics callout, cost table, survey-type cards,
   native-checkbox progress checklist.
   ===================================================================== */

/* The inline updateChecklist() JS (near end of page) sets status text
   color with var(--electric-green) and var(--trust-purple). Neither
   --trust-purple nor a white-background-safe --electric-green exists
   sitewide (electric green is a navy-background accent per the v3
   design system and would fail contrast on this white checklist card).
   Scoping overrides to this page fixes the inline colors without
   touching the JS or affecting electric green anywhere else on site. */
[data-page="title-and-survey"] {
  --trust-purple: #6B46C1;
  --electric-green: #00A843;
}

/* --- Title search timeline: "Days X-Y" badge above each step title --- */
[data-page="title-and-survey"] .timing {
  display: inline-block;
  margin-bottom: 6px;
  padding: 3px 10px;
  background: #EEF4FA;
  color: #1565A0;
  font-size: 12px;
  font-weight: 700;
  border-radius: 6px;
}

/* --- Lender vs owner title insurance comparison cards --- */
[data-page="title-and-survey"] .jhl-comparison__card {
  background: #fff;
  border: 1px solid #DCE4EE;
  border-radius: 16px;
  overflow: hidden;
}
[data-page="title-and-survey"] .jhl-comparison__header {
  padding: 20px;
  margin-bottom: 0;
}
[data-page="title-and-survey"] .jhl-comparison__header h3 {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 19px;
  font-weight: 700;
  margin-bottom: 4px;
}
[data-page="title-and-survey"] .jhl-comparison__header p {
  font-size: 13px;
  margin: 0;
}
[data-page="title-and-survey"] .jhl-comparison__header--lender {
  background: #EEF4FA;
}
[data-page="title-and-survey"] .jhl-comparison__header--lender h3 {
  color: #1565A0;
}
[data-page="title-and-survey"] .jhl-comparison__header--lender p {
  color: #1565A0;
}
[data-page="title-and-survey"] .jhl-comparison__header--owner {
  background: rgba(0, 200, 83, 0.08);
}
[data-page="title-and-survey"] .jhl-comparison__header--owner h3 {
  color: #00A843;
}
[data-page="title-and-survey"] .jhl-comparison__header--owner p {
  color: #00A843;
}
[data-page="title-and-survey"] .jhl-comparison__body {
  padding: 20px;
}
[data-page="title-and-survey"] .jhl-comparison__body ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
[data-page="title-and-survey"] .jhl-comparison__body li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  line-height: 1.5;
  color: #33404F;
}
[data-page="title-and-survey"] .jhl-comparison__check {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #00C853;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  border-radius: 50%;
  margin-top: 1px;
}

/* --- Texas-specifics callout --- */
[data-page="title-and-survey"] .jhl-callout {
  background: #0D2240;
  border-radius: 16px;
  padding: 28px;
  color: #fff;
}
[data-page="title-and-survey"] .jhl-callout h3 {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 16px;
}
[data-page="title-and-survey"] .jhl-callout ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
[data-page="title-and-survey"] .jhl-callout li {
  font-size: 15px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.9);
  padding-left: 20px;
  position: relative;
}
[data-page="title-and-survey"] .jhl-callout li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 8px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #00FF85;
}
[data-page="title-and-survey"] .jhl-callout strong {
  color: #00FF85;
}

/* --- Cost table (real <table>, wrapped for horizontal scroll at
   375px since it has 3 columns of DFW pricing data) --- */
[data-page="title-and-survey"] .jhl-table-wrapper {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid #DCE4EE;
  border-radius: 16px;
  background: #fff;
}
[data-page="title-and-survey"] .jhl-table {
  width: 100%;
  min-width: 520px;
  border-collapse: collapse;
  font-size: 14px;
}
[data-page="title-and-survey"] .jhl-table thead {
  background: #0D2240;
}
[data-page="title-and-survey"] .jhl-table th {
  padding: 14px 16px;
  text-align: left;
  font-size: 13px;
  font-weight: 700;
  color: #fff;
}
[data-page="title-and-survey"] .jhl-table td {
  padding: 14px 16px;
  border-top: 1px solid #DCE4EE;
  color: #33404F;
}
[data-page="title-and-survey"] .jhl-table tbody tr:nth-child(even) {
  background: #FBF9F6;
}
[data-page="title-and-survey"] .cost-value {
  font-weight: 700;
  color: #1565A0;
}

/* --- Survey type cards --- */
[data-page="title-and-survey"] .jhl-survey-type {
  background: #fff;
  border: 1px solid #DCE4EE;
  border-radius: 14px;
  padding: 20px;
  margin-bottom: 16px;
}
[data-page="title-and-survey"] .jhl-survey-type h4 {
  font-size: 17px;
  font-weight: 700;
  color: #0D2240;
  margin-bottom: 8px;
}
[data-page="title-and-survey"] .jhl-survey-type p {
  font-size: 14px;
  line-height: 1.6;
  color: #33404F;
  margin-bottom: 10px;
}
[data-page="title-and-survey"] .jhl-survey-type .cost {
  display: inline-block;
  padding: 4px 10px;
  background: #EEF4FA;
  color: #1565A0;
  font-size: 13px;
  font-weight: 700;
  border-radius: 6px;
}

/* --- Title & survey checklist: native <input type="checkbox">, not
   the custom .jhl-checklist__checkbox div pattern used elsewhere. --- */
[data-page="title-and-survey"] .jhl-checklist__item input[type="checkbox"] {
  width: 22px;
  height: 22px;
  min-width: 22px;
  accent-color: #00C853;
  margin-top: 2px;
  cursor: pointer;
}
[data-page="title-and-survey"] .jhl-checklist__item label {
  font-size: 15px;
  color: #33404F;
  cursor: pointer;
}
[data-page="title-and-survey"] .jhl-checklist__progress {
  height: 10px;
  background: #E8EAED;
  border-radius: 999px;
  overflow: hidden;
  margin-top: 16px;
}
[data-page="title-and-survey"] .jhl-checklist__progress-bar {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #1565A0, #00C853);
  border-radius: 999px;
  transition: width .3s ease;
}
[data-page="title-and-survey"] .jhl-checklist__status {
  margin-top: 10px;
  font-size: 14px;
  font-weight: 600;
  color: #5F6C7B;
  text-align: center;
}

/* .jhl-card--blue/--purple/--orange used bare (no --bordered
   companion) - see the note in the new-vs-existing-homes block above
   for why undef.py doesn't catch this. */
[data-page="title-and-survey"] .jhl-card--blue {
  border-left: 4px solid #1565A0;
}
[data-page="title-and-survey"] .jhl-card--purple {
  border-left: 4px solid #6B46C1;
}
[data-page="title-and-survey"] .jhl-card--orange {
  border-left: 4px solid #F59E0B;
}

/* =====================================================================
   PAGE: pre-approval-process.html
   Is/isn't and pre-qual/pre-approval comparison cards, timeline step
   titles, document/question checklists (asterisk + question-mark
   markers), key-takeaways numbered list, next-steps card grid.
   ===================================================================== */

/* --- Comparison cards (plain / --green variant; base .jhl-comparison
   grid is sitewide, .jhl-comparison__plus/__minus already have their
   colors defined sitewide too - only the card shell is missing) --- */
[data-page="pre-approval-process"] .jhl-comparison__card {
  background: #fff;
  border: 1px solid #DCE4EE;
  border-radius: 16px;
  padding: 24px;
}
[data-page="pre-approval-process"] .jhl-comparison__card--green {
  border-color: #00C853;
  background: rgba(0, 200, 83, 0.05);
}
[data-page="pre-approval-process"] .jhl-comparison__card h4 {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 18px;
  font-weight: 700;
  color: #0D2240;
  margin-bottom: 14px;
}
[data-page="pre-approval-process"] .jhl-comparison__card ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
[data-page="pre-approval-process"] .jhl-comparison__card li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  line-height: 1.5;
  color: #33404F;
}
[data-page="pre-approval-process"] .jhl-comparison__plus,
[data-page="pre-approval-process"] .jhl-comparison__minus {
  flex-shrink: 0;
  width: 18px;
  text-align: center;
}

/* Bare .jhl-info-box (no --tip/--warning/etc modifier used on this
   page) only has a currentColor border-left and no background from
   the sitewide base rule - give it the same note treatment as the
   --note modifier elsewhere on the site. */
[data-page="pre-approval-process"] .jhl-info-box {
  background: rgba(21, 101, 160, 0.05);
  border-left-color: #1565A0;
  display: block;
}
[data-page="pre-approval-process"] .jhl-info-box h4 {
  color: #0D2240;
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 6px;
}
[data-page="pre-approval-process"] .jhl-info-box p {
  margin: 0;
}

/* --- Timeline step titles (base .jhl-timeline/__item/__marker/
   __content is sitewide; this page uses __title instead of an h4
   inside __content) --- */
[data-page="pre-approval-process"] .jhl-timeline__title {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 17px;
  font-weight: 700;
  color: #0D2240;
  margin-bottom: 6px;
}

/* --- Document / question checklists (bare <ul><li> inside
   .jhl-checklist, marked with a "*" or "?" character span rather
   than the site's checkbox-item pattern) --- */
[data-page="pre-approval-process"] .jhl-checklist h4 {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 17px;
  font-weight: 700;
  color: #0D2240;
  margin-bottom: 12px;
}
[data-page="pre-approval-process"] .jhl-checklist ul {
  list-style: none;
  padding: 0;
}
[data-page="pre-approval-process"] .jhl-checklist li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 10px 0;
  border-top: 1px solid #DCE4EE;
  font-size: 15px;
  line-height: 1.5;
  color: #33404F;
}
[data-page="pre-approval-process"] .jhl-checklist li:first-child {
  border-top: none;
}
[data-page="pre-approval-process"] .jhl-checklist__icon {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #EEF4FA;
  color: #1565A0;
  font-size: 13px;
  font-weight: 800;
  border-radius: 50%;
  margin-top: 1px;
}

/* --- Key takeaways (numbered items instead of the sitewide checkmark
   <ul><li> pattern; base .jhl-takeaways navy card + h2 is sitewide) --- */
[data-page="pre-approval-process"] .jhl-takeaways__list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
[data-page="pre-approval-process"] .jhl-takeaways__item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}
[data-page="pre-approval-process"] .jhl-takeaways__icon {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #00FF85;
  color: #0D2240;
  font-family: 'Fraunces', Georgia, serif;
  font-size: 14px;
  font-weight: 800;
  border-radius: 50%;
}
[data-page="pre-approval-process"] .jhl-takeaways__text {
  font-size: 16px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.92);
  padding-top: 2px;
}

/* --- Next-steps card grid (base .jhl-next-steps section + __inner is
   sitewide; this page uses a 2-card grid instead of the __links/__link
   pill row) --- */
[data-page="pre-approval-process"] .jhl-next-steps__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
  margin-bottom: 28px;
  text-align: left;
}
[data-page="pre-approval-process"] .jhl-next-steps__card {
  display: block;
  background: #fff;
  border: 1px solid #DCE4EE;
  border-radius: 16px;
  padding: 22px;
  text-decoration: none;
  transition: border-color .15s ease, transform .15s ease;
}
[data-page="pre-approval-process"] .jhl-next-steps__card:hover {
  border-color: #1565A0;
  transform: translateY(-2px);
}
[data-page="pre-approval-process"] .jhl-next-steps__label {
  display: inline-block;
  margin-bottom: 10px;
  padding: 3px 10px;
  background: #EEF4FA;
  color: #1565A0;
  font-size: 11px;
  font-weight: 700;
  border-radius: 6px;
}
[data-page="pre-approval-process"] .jhl-next-steps__card h3 {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 18px;
  font-weight: 700;
  color: #0D2240;
  margin-bottom: 6px;
}
[data-page="pre-approval-process"] .jhl-next-steps__card p {
  font-size: 14px;
  line-height: 1.5;
  color: #5F6C7B;
  margin: 0;
}