/*
KHITServices reusable webpage template
Version: v26 fixed visual background layer
*/

html { background: #04122a; }

body.full-swirl-preview,
body.khit-template-two-hash {
  background: #04122a !important;
  background-color: #04122a !important;
  position: relative;
  overflow-x: hidden;
}

/* Fixed layer behind content: swirl + two hashes */
.khit-visual-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  background:
    linear-gradient(
      180deg,
      rgba(4,18,42,0.50) 0%,
      rgba(4,18,42,0.64) 42%,
      rgba(4,18,42,0.84) 100%
    ),
    url("../img/khitservices-swirl-bg.png") center top / cover no-repeat;
}

.khit-bg-hash {
  position: absolute;
  display: block;
  width: min(36vw, 520px);
  height: min(36vw, 520px);
  background-image: url("../img/khitservices-mark.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  opacity: 0.14;
  filter: none !important;
  transform: none !important;
  will-change: auto;
}

.khit-bg-hash-tr {
  top: 112px;
  right: 0;
}

.khit-bg-hash-bl {
  display: none !important;
}

body.khit-template-two-hash main,
body.khit-template-two-hash .site-footer {
  position: relative;
  z-index: 1;
}
body.khit-template-two-hash .site-header {
  position: relative;
  z-index: 100;
}

/* Disable every old watermark pseudo-system */
html::before,
html::after,
body.khit-template-two-hash::before,
body.khit-template-two-hash::after,
body.full-swirl-preview.khit-template-two-hash::before,
body.full-swirl-preview.khit-template-two-hash::after,
body.khit-template-two-hash main::before,
body.khit-template-two-hash main::after,
body.khit-template-two-hash main.migrated-page::before,
body.khit-template-two-hash main.migrated-page::after,
body.khit-template-two-hash main.no-page-cta::before,
body.khit-template-two-hash main.no-page-cta::after,
body.khit-template-two-hash .hero::before,
body.khit-template-two-hash .hero::after,
body.khit-template-two-hash .page-hero::before,
body.khit-template-two-hash .page-hero::after,
body.khit-template-two-hash .hero-side::before,
body.khit-template-two-hash .hero-side::after,
body.khit-template-two-hash .hash-watermark::before,
body.khit-template-two-hash .hash-watermark::after {
  content: none !important;
  display: none !important;
  background: none !important;
}

body.khit-template-two-hash main,
body.khit-template-two-hash main.migrated-page,
body.khit-template-two-hash main.no-page-cta,
body.khit-template-two-hash .hero,
body.khit-template-two-hash .page-hero,
body.khit-template-two-hash .section,
body.khit-template-two-hash .service-detail,
body.khit-template-two-hash .pricing-detail,
body.khit-template-two-hash .cta-band {
  background: transparent !important;
}

body.khit-template-two-hash .site-header {
  background: rgba(4,18,42,0.90) !important;
  backdrop-filter: blur(16px);
}

body.khit-template-two-hash .site-footer {
  background: linear-gradient(180deg, rgba(4,18,42,0.72), rgba(4,18,42,0.98)) !important;
}

body.khit-template-two-hash .service-context-card,
body.khit-template-two-hash .pricing-card,
body.khit-template-two-hash .output-route-card,
body.khit-template-two-hash .khit-framework-step,
body.khit-template-two-hash .card,
body.khit-template-two-hash .intro-card,
body.khit-template-two-hash .question-block,
body.khit-template-two-hash .results-card,
body.khit-template-two-hash .result-card,
body.khit-template-two-hash .results-panel,
body.khit-template-two-hash .recommendation-card {
  background: linear-gradient(180deg, rgba(18,43,80,0.62), rgba(12,34,68,0.44)) !important;
  border-color: rgba(255,255,255,0.085) !important;
  backdrop-filter: blur(8px);
}

body.khit-template-two-hash .khit-note,
body.khit-template-two-hash .client-choice-panel,
body.khit-template-two-hash .tier-summary,
body.khit-template-two-hash .quote-summary,
body.khit-template-two-hash .notice,
body.khit-template-two-hash .privacy-disclosure,
body.khit-template-two-hash .error-card,
body.khit-template-two-hash .confirmation-block,
body.khit-template-two-hash #hcGate {
  background: rgba(232,86,26,0.075) !important;
  border-color: rgba(232,86,26,0.18) !important;
  backdrop-filter: blur(8px);
}

/* Keep accepted template spacing; do not rework homepage grid/layout */
body.khit-template-two-hash:not(.home-page) .hero.page-hero,
body.khit-template-two-hash:not(.home-page) .hero {
  padding-top: clamp(52px, 6vw, 76px) !important;
  padding-bottom: clamp(24px, 3.2vw, 42px) !important;
}

body.khit-template-two-hash:not(.home-page) .hero + .section,
body.khit-template-two-hash:not(.home-page) .page-hero + .section,
body.khit-template-two-hash:not(.home-page) .section:first-of-type {
  padding-top: clamp(20px, 2.8vw, 34px) !important;
}

body.khit-template-two-hash:not(.home-page) .service-context-grid,
body.khit-template-two-hash:not(.home-page) .pricing-grid,
body.khit-template-two-hash:not(.home-page) .output-route-grid,
body.khit-template-two-hash:not(.home-page) .khit-framework-strip {
  margin-top: clamp(16px, 2vw, 24px) !important;
}

body.khit-template-two-hash .healthcheck-form-section {
  padding-top: clamp(20px, 2.8vw, 34px) !important;
  padding-bottom: clamp(54px, 7vw, 86px) !important;
}

body.khit-template-two-hash .healthcheck-form-section .container {
  max-width: 1180px;
}

body.khit-template-two-hash .hc-wrap,
body.khit-template-two-hash .booking-wrap,
body.khit-template-two-hash .results-wrap {
  max-width: 860px;
  margin: 0 auto;
}

body.khit-template-two-hash .hc-wrap { padding: 0; }

body.khit-template-two-hash .booking-wrap,
body.khit-template-two-hash .results-wrap {
  padding: clamp(32px, 5vw, 64px) 24px clamp(64px, 8vw, 96px);
}

body.khit-template-two-hash .hc-header { display: none; }

body.khit-template-two-hash .healthcheck-top-hero .hero-side { min-height: 320px; }

body.khit-template-two-hash .healthcheck-top-hero {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  min-height: auto !important;
}

@media (max-width: 820px) {
  .khit-bg-hash {
    width: 68vw;
    height: 68vw;
    opacity: 0.10;
  }
  .khit-bg-hash-tr {
  top: 112px;
  right: 0;
}
  .khit-bg-hash-bl {
  display: none !important;
}
}


/* v27 footer watermark alignment */
body.khit-template-two-hash .site-footer::before,
body.khit-template-two-hash .site-footer::after,
body.full-swirl-preview .site-footer::before,
body.full-swirl-preview .site-footer::after {
  left: 0 !important;
  right: auto !important;
  background-position: left center !important;
}


/* v30: footer watermark alignment only */
body.khit-template-two-hash .site-footer::before,
body.khit-template-two-hash .site-footer::after,
body.full-swirl-preview .site-footer::before,
body.full-swirl-preview .site-footer::after {
  left: 0 !important;
  right: auto !important;
  background-position: left center !important;
}


/* v31: homepage boxes side-by-side restore only */
body.khit-template-two-hash .cards-4 {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 1.25rem !important;
}

body.khit-template-two-hash .cards-3 {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 1.25rem !important;
}

body.khit-template-two-hash .cards-2,
body.khit-template-two-hash .grid-2 {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 1.25rem !important;
}

body.khit-template-two-hash .value-layout {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  gap: 1.5rem !important;
  align-items: stretch !important;
}

@media (max-width: 1000px) {
  body.khit-template-two-hash .cards-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 640px) {
  body.khit-template-two-hash .cards-4,
  body.khit-template-two-hash .cards-3,
  body.khit-template-two-hash .cards-2,
  body.khit-template-two-hash .grid-2,
  body.khit-template-two-hash .value-layout {
    grid-template-columns: 1fr !important;
  }
}


/* v37: Chat page formatting alignment only */
body.chat-page.khit-template-two-hash .hero {
  min-height: auto !important;
  padding-top: clamp(46px, 5vw, 68px) !important;
  padding-bottom: clamp(30px, 4vw, 48px) !important;
}

body.chat-page.khit-template-two-hash .hero-inner {
  min-height: auto !important;
  align-items: center !important;
}

body.chat-page.khit-template-two-hash .hero-copy {
  max-width: 760px !important;
}

body.chat-page.khit-template-two-hash .hero-side {
  min-height: 260px !important;
}

body.chat-page.khit-template-two-hash .section {
  padding-top: clamp(26px, 3vw, 44px) !important;
  padding-bottom: clamp(38px, 4.5vw, 62px) !important;
}

body.chat-page.khit-template-two-hash .section:first-of-type,
body.chat-page.khit-template-two-hash .hero + .section {
  padding-top: clamp(18px, 2.4vw, 30px) !important;
}

body.chat-page.khit-template-two-hash .hero + .section .container {
  max-width: 860px !important;
}

body.chat-page.khit-template-two-hash .chat-box-title {
  font-family: var(--font-display, inherit);
  font-size: clamp(1.45rem, 2.4vw, 2rem);
  line-height: 1.1;
  color: #fff;
  margin: 0 0 1rem;
}

body.chat-page.khit-template-two-hash .privacy-disclosure,
body.chat-page.khit-template-two-hash .notice,
body.chat-page.khit-template-two-hash .chat-panel,
body.chat-page.khit-template-two-hash .chat-card,
body.chat-page.khit-template-two-hash .chat-form,
body.chat-page.khit-template-two-hash .booking-card,
body.chat-page.khit-template-two-hash .availability-card,
body.chat-page.khit-template-two-hash .quote-summary,
body.chat-page.khit-template-two-hash .confirmation-block,
body.chat-page.khit-template-two-hash .error-card {
  max-width: 860px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding: clamp(1.15rem, 2vw, 1.6rem) !important;
  border-radius: 22px !important;
  background: linear-gradient(180deg, rgba(18,43,80,0.72), rgba(12,34,68,0.54)) !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  box-shadow: 0 18px 55px rgba(0,0,0,0.20) !important;
  backdrop-filter: blur(8px);
}

body.chat-page.khit-template-two-hash .privacy-disclosure {
  margin-top: 0 !important;
  margin-bottom: clamp(16px, 2vw, 24px) !important;
}

body.chat-page.khit-template-two-hash form,
body.chat-page.khit-template-two-hash .form-grid,
body.chat-page.khit-template-two-hash .booking-grid,
body.chat-page.khit-template-two-hash .availability-grid,
body.chat-page.khit-template-two-hash .chat-grid,
body.chat-page.khit-template-two-hash .chat-layout {
  gap: 1rem !important;
}

body.chat-page.khit-template-two-hash input,
body.chat-page.khit-template-two-hash select,
body.chat-page.khit-template-two-hash textarea {
  width: 100% !important;
  max-width: 100% !important;
}

body.chat-page.khit-template-two-hash .form-actions,
body.chat-page.khit-template-two-hash .hero-actions {
  gap: 0.75rem !important;
}

@media (max-width: 1000px) {
  body.chat-page.khit-template-two-hash .hero {
    padding-top: 40px !important;
    padding-bottom: 30px !important;
  }

  body.chat-page.khit-template-two-hash .hero-side {
    min-height: 180px !important;
  }

  body.chat-page.khit-template-two-hash .booking-grid,
  body.chat-page.khit-template-two-hash .availability-grid,
  body.chat-page.khit-template-two-hash .chat-grid,
  body.chat-page.khit-template-two-hash .chat-layout,
  body.chat-page.khit-template-two-hash .grid-2 {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 820px) {
  body.chat-page.khit-template-two-hash .hero {
    padding-top: 30px !important;
    padding-bottom: 24px !important;
  }

  body.chat-page.khit-template-two-hash .hero-side {
    display: none !important;
    min-height: 0 !important;
  }

  body.chat-page.khit-template-two-hash .section {
    padding-top: 20px !important;
    padding-bottom: 30px !important;
  }

  body.chat-page.khit-template-two-hash .privacy-disclosure,
  body.chat-page.khit-template-two-hash .notice,
  body.chat-page.khit-template-two-hash .chat-panel,
  body.chat-page.khit-template-two-hash .chat-card,
  body.chat-page.khit-template-two-hash .chat-form,
  body.chat-page.khit-template-two-hash .booking-card,
  body.chat-page.khit-template-two-hash .availability-card,
  body.chat-page.khit-template-two-hash .quote-summary,
  body.chat-page.khit-template-two-hash .confirmation-block,
  body.chat-page.khit-template-two-hash .error-card {
    padding: 1rem !important;
    border-radius: 18px !important;
  }

  body.chat-page.khit-template-two-hash .form-actions,
  body.chat-page.khit-template-two-hash .hero-actions {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
  }
}


/* v38: Chat page matched to Health Check form layout */

/* Make chat hero behave like the other service/detail heroes, not a tall landing panel */
body.chat-page.khit-template-two-hash .hero {
  min-height: auto !important;
  padding-top: clamp(46px, 5vw, 64px) !important;
  padding-bottom: clamp(14px, 2vw, 24px) !important;
}

body.chat-page.khit-template-two-hash .hero-inner {
  min-height: auto !important;
  align-items: start !important;
}

body.chat-page.khit-template-two-hash .hero-copy {
  max-width: 760px !important;
}

body.chat-page.khit-template-two-hash .hero-side {
  min-height: 180px !important;
}

/* Pull the first form/dialogue block close to the hero */
body.chat-page.khit-template-two-hash .hero + .section,
body.chat-page.khit-template-two-hash .section:first-of-type {
  padding-top: 12px !important;
}

body.chat-page.khit-template-two-hash .section {
  padding-top: clamp(18px, 2.4vw, 30px) !important;
  padding-bottom: clamp(30px, 4vw, 48px) !important;
}

/* Health Check-style central dialogue box */
body.chat-page.khit-template-two-hash .hero + .section .container,
body.chat-page.khit-template-two-hash .section:first-of-type .container {
  max-width: 860px !important;
}

/* Title belongs to the booking dialogue, not the disclosure */
body.chat-page.khit-template-two-hash .chat-box-title {
  max-width: 860px !important;
  margin: 0 auto 0.85rem !important;
  font-family: var(--font-display, inherit);
  font-size: clamp(1.65rem, 2.6vw, 2.2rem);
  line-height: 1.08;
  color: #fff;
}

/* Match Health Check-style card proportions */
body.chat-page.khit-template-two-hash .chat-form,
body.chat-page.khit-template-two-hash form,
body.chat-page.khit-template-two-hash .booking-card,
body.chat-page.khit-template-two-hash .chat-card,
body.chat-page.khit-template-two-hash .chat-panel {
  max-width: 860px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding: clamp(1.35rem, 2.2vw, 1.9rem) !important;
  border-radius: 22px !important;
  background: linear-gradient(180deg, rgba(18,43,80,0.78), rgba(12,34,68,0.58)) !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  box-shadow: 0 18px 55px rgba(0,0,0,0.20) !important;
  backdrop-filter: blur(8px);
}

/* Compact secondary disclosure/notice blocks */
body.chat-page.khit-template-two-hash .privacy-disclosure,
body.chat-page.khit-template-two-hash .notice {
  max-width: 860px !important;
  margin: 0 auto 1rem !important;
  padding: 1rem 1.15rem !important;
  border-radius: 18px !important;
  background: rgba(232,86,26,0.075) !important;
  border: 1px solid rgba(232,86,26,0.18) !important;
}

/* Form fields should fill and align like Health Check */
body.chat-page.khit-template-two-hash form label,
body.chat-page.khit-template-two-hash .form-field label {
  display: block !important;
  margin-bottom: 0.35rem !important;
}

body.chat-page.khit-template-two-hash input,
body.chat-page.khit-template-two-hash select,
body.chat-page.khit-template-two-hash textarea {
  width: 100% !important;
  max-width: 100% !important;
  min-height: 44px;
  box-sizing: border-box !important;
}

body.chat-page.khit-template-two-hash textarea {
  min-height: 92px !important;
}

body.chat-page.khit-template-two-hash .form-grid,
body.chat-page.khit-template-two-hash .booking-grid,
body.chat-page.khit-template-two-hash .availability-grid,
body.chat-page.khit-template-two-hash .chat-grid,
body.chat-page.khit-template-two-hash .chat-layout {
  gap: 1rem !important;
}

/* Confirmation panel should not sit visibly under the form before a booking result exists.
   Covers common class/state patterns without touching JS/IDs. */
body.chat-page.khit-template-two-hash .confirmation-block:empty,
body.chat-page.khit-template-two-hash .confirmation-block[hidden],
body.chat-page.khit-template-two-hash .confirmation-block.is-hidden,
body.chat-page.khit-template-two-hash .confirmation-block.hidden,
body.chat-page.khit-template-two-hash .success-card:empty,
body.chat-page.khit-template-two-hash .success-card[hidden],
body.chat-page.khit-template-two-hash .success-card.is-hidden,
body.chat-page.khit-template-two-hash .success-card.hidden {
  display: none !important;
}

/* Specific visible confirmation shell: hide until JS marks it active/complete/success.
   This prevents the "Chat booked" card appearing below the form on initial load. */
body.chat-page.khit-template-two-hash .confirmation-block:not(.active):not(.is-active):not(.show):not(.shown):not(.success),
body.chat-page.khit-template-two-hash .success-card:not(.active):not(.is-active):not(.show):not(.shown):not(.success) {
  display: none;
}

/* If JS writes inline display or active state, allow it to show. */
body.chat-page.khit-template-two-hash .confirmation-block[style*="block"],
body.chat-page.khit-template-two-hash .success-card[style*="block"],
body.chat-page.khit-template-two-hash .confirmation-block.active,
body.chat-page.khit-template-two-hash .confirmation-block.is-active,
body.chat-page.khit-template-two-hash .confirmation-block.show,
body.chat-page.khit-template-two-hash .confirmation-block.shown,
body.chat-page.khit-template-two-hash .confirmation-block.success,
body.chat-page.khit-template-two-hash .success-card.active,
body.chat-page.khit-template-two-hash .success-card.is-active,
body.chat-page.khit-template-two-hash .success-card.show,
body.chat-page.khit-template-two-hash .success-card.shown,
body.chat-page.khit-template-two-hash .success-card.success {
  display: block !important;
  max-width: 860px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Tablet/phone */
@media (max-width: 1000px) {
  body.chat-page.khit-template-two-hash .hero {
    padding-top: 38px !important;
    padding-bottom: 16px !important;
  }

  body.chat-page.khit-template-two-hash .hero-side {
    min-height: 120px !important;
  }

  body.chat-page.khit-template-two-hash .booking-grid,
  body.chat-page.khit-template-two-hash .availability-grid,
  body.chat-page.khit-template-two-hash .chat-grid,
  body.chat-page.khit-template-two-hash .chat-layout,
  body.chat-page.khit-template-two-hash .grid-2 {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 820px) {
  body.chat-page.khit-template-two-hash .hero {
    padding-top: 28px !important;
    padding-bottom: 12px !important;
  }

  body.chat-page.khit-template-two-hash .hero-side {
    display: none !important;
    min-height: 0 !important;
  }

  body.chat-page.khit-template-two-hash .hero + .section,
  body.chat-page.khit-template-two-hash .section:first-of-type {
    padding-top: 10px !important;
  }

  body.chat-page.khit-template-two-hash .section {
    padding-top: 18px !important;
    padding-bottom: 30px !important;
  }

  body.chat-page.khit-template-two-hash .chat-form,
  body.chat-page.khit-template-two-hash form,
  body.chat-page.khit-template-two-hash .booking-card,
  body.chat-page.khit-template-two-hash .chat-card,
  body.chat-page.khit-template-two-hash .chat-panel,
  body.chat-page.khit-template-two-hash .privacy-disclosure,
  body.chat-page.khit-template-two-hash .notice {
    padding: 1rem !important;
    border-radius: 18px !important;
  }

  body.chat-page.khit-template-two-hash .form-actions,
  body.chat-page.khit-template-two-hash .hero-actions {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0.75rem !important;
  }
}


/* v39: Chat hero matches service-page hero pattern */
body.chat-page.khit-template-two-hash .hero {
  min-height: auto !important;
  padding-top: clamp(52px, 6vw, 76px) !important;
  padding-bottom: clamp(24px, 3.2vw, 42px) !important;
}

body.chat-page.khit-template-two-hash .hero-inner {
  align-items: center !important;
}

body.chat-page.khit-template-two-hash .hero-copy {
  max-width: 680px !important;
}

body.chat-page.khit-template-two-hash .hero .eyebrow,
body.chat-page.khit-template-two-hash .hero .label {
  margin-bottom: 1rem !important;
}

body.chat-page.khit-template-two-hash .hero h1 {
  max-width: 760px !important;
}

body.chat-page.khit-template-two-hash .hero .subhead {
  max-width: 780px !important;
}

body.chat-page.khit-template-two-hash .hero-actions {
  margin-top: 1.35rem !important;
}

body.chat-page.khit-template-two-hash .hero-actions .meta-card {
  display: inline-flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  gap: 0.2rem !important;
  min-width: 0 !important;
  padding: 0.8rem 1rem !important;
  border-radius: 18px !important;
  background: rgba(18,43,80,0.52) !important;
  border: 1px solid rgba(255,255,255,0.09) !important;
}

body.chat-page.khit-template-two-hash .hero-actions .meta-card strong {
  display: block !important;
  color: #fff !important;
}

/* Keep chat form close and aligned after the now-normal hero */
body.chat-page.khit-template-two-hash .hero + .section,
body.chat-page.khit-template-two-hash .section:first-of-type {
  padding-top: clamp(18px, 2.4vw, 30px) !important;
}

@media (max-width: 1000px) {
  body.chat-page.khit-template-two-hash .hero-copy {
    max-width: 760px !important;
  }
}

@media (max-width: 820px) {
  body.chat-page.khit-template-two-hash .hero {
    padding-top: 34px !important;
    padding-bottom: 24px !important;
  }

  body.chat-page.khit-template-two-hash .hero-actions {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 0.65rem !important;
  }

  body.chat-page.khit-template-two-hash .hero-actions .meta-card {
    display: block !important;
    width: 100% !important;
  }
  body.chat-page.khit-template-two-hash .hero-actions .meta-card:last-child {
    grid-column: 1 / -1;
  }
}


/* v40: Chat confirmation panel hidden until booking flow reveals it */
body.chat-page.khit-template-two-hash .khit-chat-confirmation[hidden] {
  display: none !important;
}

body.chat-page.khit-template-two-hash .khit-chat-confirmation:not([hidden]) {
  display: block;
  max-width: 860px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Health Check hero summary strip — matches chat.html's meta-card pattern (was missing entirely) */
.hc-summary-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.35rem;
}
.hc-summary-item {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.2rem;
  min-width: 180px;
  flex: 1 1 0;
  padding: 0.8rem 1rem;
  border-radius: 18px;
  background: rgba(18,43,80,0.52);
  border: 1px solid rgba(255,255,255,0.09);
}
.hc-summary-item strong {
  display: block;
  color: #fff;
}
.hc-summary-item span {
  display: block;
  color: var(--khit-text-muted, #8a9bb0);
  font-size: 0.92rem;
}
@media (max-width: 820px) {
  .hc-summary-strip { flex-direction: column; }
  .hc-summary-item { width: 100%; }
}

/* Health Check hero: widen content column so the 3 summary boxes fit on one row */
.healthcheck-top-hero .hero-inner {
  grid-template-columns: minmax(0, 900px) 1fr;
}

/* Value comparison table -> stacked cards on mobile (was overflowing/scrolling horizontally) */
@media (max-width: 700px) {
  .value-table thead { display: none; }
  .value-table, .value-table tbody, .value-table tr, .value-table td {
    display: block;
    width: 100%;
  }
  .value-table {
    min-width: 0 !important;
  }
  .value-table tr {
    background: rgba(18,43,80,0.52);
    border: 1px solid rgba(255,255,255,0.09);
    border-radius: 14px;
    padding: 1rem 1.1rem;
    margin-bottom: 1rem;
  }
  .value-table td {
    border: none !important;
    padding: 0.5rem 0 !important;
  }
  .value-table td[data-label]::before {
    content: attr(data-label);
    display: block;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--khit-orange);
    margin-bottom: 0.2rem;
  }
  .value-comparison {
    overflow-x: visible !important;
  }
}