@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;450;500;600;650;700;750;800;900&family=DM+Mono:wght@400;500&display=swap');
:root {
  --color-keyhr-red: oklch(47% .22 25);
  --color-keyhr-red-dark: oklch(38% .2 25);
  --color-keyhr-charcoal: #293238;
  --color-keyhr-dark: #f5f6f7;
  --color-keyhr-offwhite: #fcfcfb;
  --primary: var(--color-keyhr-red);
  --ring: var(--color-keyhr-red);
  --font-sans: 'Montserrat', sans-serif;
}
body { font-family: 'Montserrat', sans-serif !important; color: #293238; background: #fcfcfb; }
h1,h2,h3,h4,button,input,select,textarea { font-family: 'Montserrat',sans-serif !important; }
h1,h2,h3 { text-transform: none !important; letter-spacing: -.045em !important; line-height: 1.12 !important; }
h1 { font-weight: 750 !important; }
h2 { font-weight: 700 !important; }
h3 { font-weight: 650 !important; }
header { background: rgba(255,255,255,.97) !important; border-bottom: 1px solid #e9eaeb; box-shadow: 0 3px 20px #29323808; }
header > div { background: transparent !important; }
header [class*='text-white'] { color: #4c565d !important; }
header [class*='border-white'] { border-color: #e4e8e9 !important; }
header img[src*='keyhr-logo'] { width: 108px !important; height: 69px !important; object-fit: contain; }
header nav { gap: 24px; }
header .btn-keyhr, .btn-keyhr, .btn-keyhr * { color: #fff !important; }
.btn-keyhr { background: var(--color-keyhr-red) !important; border-color: var(--color-keyhr-red) !important; border-radius: 4px; font-size: 11px; }
.btn-keyhr:hover { background: var(--color-keyhr-red-dark) !important; }
.btn-ghost { border-radius: 4px; }
header [class*='bg-[#'] { background: #fff !important; }
header button[class*='bg-[var(--color-keyhr-red)]'] { color: #fff !important; }
#home { min-height: 100vh; }
#home h1 { font-size: clamp(42px, 5.7vw, 82px) !important; max-width: 1050px; line-height: 1.08 !important; }
#home h1 > span:first-child { color: #fff !important; }
#home h1 > span:last-child { color: var(--color-keyhr-red) !important; }
#home h1,#home p,#home .btn-ghost,#home .btn-ghost * { color: #fff !important; }
#home p { max-width: 560px; }
#services { background: #f0f3f4 !important; }
.replica-light { background: #f7f8f8 !important; color: #293238 !important; }
.replica-light [class*='text-white'] { color: #46535a !important; }
.replica-light [class*='border-white'] { border-color: #dce2e5 !important; }
.replica-light [class*='bg-white/'] { background: #fff !important; }
.replica-light .btn-keyhr,.replica-light .btn-keyhr * { color: #fff !important; }
.replica-light .btn-ghost { color: #46535a !important; border-color: #bdc8ce !important; }
footer { background: #f5f7f8 !important; color: #46535a !important; }
footer [class*='text-white'] { color: #53616a !important; }
footer [class*='border-white'] { border-color: #dce2e5 !important; }
footer img[src*='keyhr-logo'] { width: 125px !important; height: auto !important; }
svg.lucide-check, svg.lucide-circle-check, svg.lucide-check-circle { color: #328363 !important; }
svg.lucide-x, svg.lucide-circle-x { color: var(--color-keyhr-red); }
table { background: #fff; color: #33434d; }
thead { background: #f5f7f8; }
td, th { border-color: #e4eaed !important; }
.replica-integration-note { display: block; padding: 12px 16px; border: 1px solid #e5d0c7; background: #fff9f5; color: #665146; font-size: 12px; line-height: 1.65; margin-bottom: 16px; }
.replica-dialog { position: fixed; inset: 0; z-index: 99999; background: #20303880; display: flex; align-items: center; justify-content: center; padding: 24px; }
.replica-dialog > div { background: #fff; width: 520px; max-width: 100%; padding: 32px; border-radius: 8px; box-shadow: 0 20px 90px #20303833; }
.replica-dialog h2 { font-size: 24px; margin-bottom: 14px; }
.replica-dialog p { font-size: 14px; line-height: 1.7; margin-bottom: 18px; }
.replica-dialog button,.replica-dialog a { margin: 4px 8px 4px 0; }
@media(min-width:1024px) { header .container { max-width: 1440px; } header nav { gap: 18px; } }
@media(max-width:767px) { header img[src*='keyhr-logo'] { width: 84px !important; height: 58px !important; } #home h1 { font-size: 43px !important; } h2 { font-size: clamp(28px, 7vw, 40px) !important; } }
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto !important; animation-duration:.01ms !important; transition-duration:.01ms !important; } }

[aria-label='Key HR strength'] { background: #e4f1eb !important; color: #328363 !important; }
.hero-heading { line-height: 1.1 !important; }
main > div.bg-white > section:first-child { padding-top: 52px; }

/* Homepage-only simplification: retain the brand, reduce repetition and scroll. */
.compact-home #home { min-height: 620px; height: min(82vh, 760px); }
.compact-home #home > .container { padding-top: 126px; padding-bottom: 72px; }
.compact-home-trust { padding: 25px 0; border-bottom: 1px solid #e4eaed; background: #fff; }
.compact-home-trust-items { display: flex; align-items: center; justify-content: space-between; gap: 24px; max-width: 1000px; }
.compact-home-trust-items > div { display: flex; align-items: center; gap: 12px; }
.compact-home-trust strong { font-size: 22px; font-weight: 750; color: var(--color-keyhr-red); }
.compact-home-trust span { font-size: 12px; color: #53616a; }
.compact-home-section { padding: 60px 0; }
.compact-home-section > .container { max-width: 1200px; }
.compact-home-heading { margin-bottom: 28px; max-width: 800px; }
.compact-home-heading .section-label { margin-bottom: 12px; }
.compact-home-heading h2,.compact-home-close h2 { font-size: clamp(30px, 3.3vw, 46px); margin-bottom: 14px; }
.compact-home-intro { max-width: 720px; color: #53616a; font-size: 15px; line-height: 1.75; }
.compact-home-service-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 16px; }
.compact-home-service { display: block; padding: 22px 24px; border: 1px solid #e0e6e9; background: #fff; transition: border-color .2s,transform .2s; }
.compact-home-service:hover { border-color: var(--color-keyhr-red); transform: translateY(-3px); }
.compact-home-index { display: block; font-family: 'DM Mono',monospace; font-size: 11px; color: var(--color-keyhr-red); letter-spacing: .08em; margin-bottom: 12px; }
.compact-home-service h3,.compact-home-step h3 { font-size: 18px; margin-bottom: 7px; }
.compact-home-service p,.compact-home-step p { font-size: 13px; line-height: 1.65; color: #53616a; }
.compact-home-link { display: inline-flex; align-items: center; gap: 9px; font-size: 12px; font-weight: 700; margin-top: 24px; color: var(--color-keyhr-red); }
.compact-home-link:hover { color: var(--color-keyhr-red-dark); }
.compact-home-step-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 32px; list-style: none; padding: 0; margin: 0; }
.compact-home-step { padding-top: 20px; border-top: 2px solid #e0e6e9; }
.compact-home-step .compact-home-index { font-size: 24px; }
.compact-home-industries { background: #f0f3f4; }
.compact-home-industry-list { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; }
.compact-home-industry-list a { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 18px; background: #fff; border: 1px solid #e0e6e9; font-size: 13px; font-weight: 600; transition: border-color .2s,color .2s; }
.compact-home-industry-list a:hover { border-color: var(--color-keyhr-red); color: var(--color-keyhr-red); }
.compact-home-industry-list a span[aria-hidden='true'] { color: var(--color-keyhr-red); }
.compact-home-close { background: var(--color-keyhr-red); color: #fff; }
.compact-home-close .section-label,.compact-home-close .compact-home-intro { color: #fff; }
.compact-home-close .section-label { margin-bottom: 12px; opacity: .85; }
.compact-home-close h2 { max-width: 800px; }
.compact-home-actions { display: flex; align-items: center; gap: 24px; margin-top: 25px; }
.compact-home-close .btn-keyhr { background: #fff !important; border-color: #fff !important; color: var(--color-keyhr-red) !important; }
.compact-home-close .btn-keyhr * { color: var(--color-keyhr-red) !important; }
.compact-home-close .btn-keyhr:hover { background: #fff4f2 !important; }
.compact-home-phone { font-size: 14px; color: #fff; text-decoration: underline; text-underline-offset: 4px; }
body:has(.compact-home) footer:not(.elegant-footer) > .container { padding-top: 40px; padding-bottom: 32px; }
@media(max-width:767px) {
  .compact-home #home { height: 78vh; min-height: 580px; }
  .compact-home #home > .container { padding-top: 100px; padding-bottom: 60px; }
  .compact-home-trust-items { gap: 14px; }
  .compact-home-trust-items > div { flex-direction: column; align-items: flex-start; gap: 4px; }
  .compact-home-trust strong { font-size: 18px; }
  .compact-home-trust span { font-size: 10px; }
  .compact-home-section { padding: 40px 0; }
  .compact-home-service-grid,.compact-home-industry-list { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .compact-home-service { padding: 18px; }
  .compact-home-service h3 { font-size: 16px; }
  .compact-home-step-grid { grid-template-columns: 1fr; gap: 22px; }
  .compact-home-step { padding-top: 14px; }
  .compact-home-step .compact-home-index { font-size: 20px; margin-bottom: 8px; }
  .compact-home-actions { flex-wrap: wrap; gap: 18px; }
}
@media(max-width:420px) {
  .compact-home-service-grid { grid-template-columns: 1fr; gap: 10px; }
  .compact-home-service { padding: 16px 18px; }
  .compact-home-service .compact-home-index { display: none; }
  .compact-home-industry-list a { padding: 14px 12px; font-size: 12px; }
}

/* Light cards must not inherit the original dark-overlay white-text hover. */
main a.group.bg-white:has([class*='group-hover:text-white']) {
  background: #fff !important;
  color: #293238;
  transition: background-color .2s, border-color .2s;
}
main a.group.bg-white:has([class*='group-hover:text-white']):is(:hover,:focus-visible,:focus-within) {
  background: #fff4f2 !important;
}
main a.group.bg-white:has([class*='group-hover:text-white']) > .absolute.inset-0 {
  background: transparent !important;
  pointer-events: none;
}
main a.group.bg-white:has([class*='group-hover:text-white']) :is(h2,h3) {
  color: #293238 !important;
}
main a.group.bg-white:has([class*='group-hover:text-white']) p {
  color: #53616a !important;
}
main a.group.bg-white:has([class*='group-hover:text-white']):is(:hover,:focus-visible,:focus-within) :is(h2,h3) {
  color: var(--color-keyhr-red) !important;
}
main a.group.bg-white:has([class*='group-hover:text-white']):focus-visible {
  outline: 2px solid var(--color-keyhr-red);
  outline-offset: 4px;
}

/* Approved elegance pass: calm light content, original red, charcoal footer. */
:root {
  --elegant-border: #e2e7e9;
  --elegant-muted: #59656e;
  --elegant-radius: 8px;
}
.btn-keyhr, .btn-ghost {
  min-height: 44px;
  padding: 13px 21px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 650;
  letter-spacing: .035em;
  transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}
.btn-keyhr:focus-visible, .btn-ghost:focus-visible {
  outline: 2px solid var(--color-keyhr-red);
  outline-offset: 4px;
}
.compact-home-heading h2, .compact-home-close h2 {
  font-weight: 650 !important;
  letter-spacing: -.032em !important;
}
.compact-home-service, .compact-home-industry-list a {
  border-radius: var(--elegant-radius);
  border-color: var(--elegant-border);
  box-shadow: none;
}
.compact-home-service:hover { transform: translateY(-2px); }
.compact-home-service h3 { font-weight: 600 !important; }
.compact-home-service p, .compact-home-step p {
  font-size: 14px;
  line-height: 1.7;
  color: var(--elegant-muted);
}
.elegant-inner h1 {
  font-size: clamp(36px, 4.2vw, 58px) !important;
  font-weight: 650 !important;
  line-height: 1.14 !important;
  letter-spacing: -.035em !important;
  text-wrap: balance;
}
.elegant-inner h2 {
  font-size: clamp(27px, 2.8vw, 38px) !important;
  font-weight: 600 !important;
  line-height: 1.22 !important;
  letter-spacing: -.025em !important;
  text-wrap: balance;
}
.elegant-inner h3 {
  font-weight: 600 !important;
  line-height: 1.35 !important;
  letter-spacing: -.015em !important;
}
.elegant-inner p:not(.section-label):not([class*='text-xs']):not([class*='text-[10px]']) {
  font-size: 15px;
  line-height: 1.75;
  max-width: 70ch;
}
.elegant-inner section .container { max-width: 1200px; }
.elegant-inner > div > section:not(:first-child) {
  padding-top: 64px;
  padding-bottom: 64px;
}
.elegant-inner :where(a.group.bg-white, div.bg-white.rounded-lg, div.bg-white.border) {
  border-radius: var(--elegant-radius);
  border-color: var(--elegant-border);
  box-shadow: 0 3px 16px #29323804;
}
.elegant-inner :where(a.group.bg-white, div.bg-white.rounded-lg, div.bg-white.border):hover {
  box-shadow: 0 5px 20px #29323808;
}
.elegant-inner .section-label { letter-spacing: .1em; }
.elegant-faq {
  border: 1px solid var(--elegant-border) !important;
  border-radius: var(--elegant-radius);
  background: #fff;
  padding: 0 !important;
  box-shadow: none !important;
  margin-bottom: 12px;
}
.elegant-faq > summary {
  position: relative;
  cursor: pointer;
  padding: 18px 54px 18px 22px;
  list-style: none;
  font-size: 15px;
  line-height: 1.55;
  font-weight: 600;
  color: #293238;
}
.elegant-faq > summary::-webkit-details-marker { display: none; }
.elegant-faq > summary::after {
  content: '+';
  position: absolute;
  right: 22px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 22px;
  font-weight: 450;
  color: var(--color-keyhr-red);
}
.elegant-faq[open] > summary::after { content: '−'; }
.elegant-faq > summary:hover { background: #fafbfb; border-radius: var(--elegant-radius); }
.elegant-faq > summary:focus-visible {
  outline: 2px solid var(--color-keyhr-red);
  outline-offset: 3px;
  border-radius: var(--elegant-radius);
}
.elegant-faq > :not(summary), .elegant-faq-answer {
  padding: 0 22px 20px;
  color: var(--elegant-muted);
  line-height: 1.75;
}
.elegant-faq-answer > :last-child { margin-bottom: 0; }
.elegant-footer {
  background: #151515 !important;
  color: #bfc4ca !important;
  border-top: 0 !important;
}
.elegant-footer-main {
  display: grid;
  grid-template-columns: minmax(210px, 1.3fr) minmax(130px, 1fr) minmax(140px, 1fr) minmax(190px, 1.1fr);
  gap: 38px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 54px 24px 38px;
}
.elegant-footer h2, .elegant-footer h3, .elegant-footer h4 {
  color: #f5f5f5 !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: .09em !important;
  text-transform: uppercase !important;
  margin-bottom: 17px;
}
.elegant-footer p {
  color: #bfc4ca;
  font-size: 13px;
  line-height: 1.8;
  max-width: 32ch;
}
.elegant-footer img[src*='keyhr-logo'] { width: 140px !important; height: auto !important; }
.elegant-footer-brand > p { margin: 17px 0 22px; }
.elegant-footer ul { list-style: none; padding: 0; margin: 0; }
.elegant-footer li { margin-bottom: 11px; }
.elegant-footer a:not(.btn-keyhr) {
  color: #c4c8cd;
  font-size: 13px;
  line-height: 1.7;
  text-decoration: none;
  text-underline-offset: 4px;
  transition: color .18s ease;
}
.elegant-footer a:not(.btn-keyhr):hover { color: #fff; text-decoration: underline; }
.elegant-footer a:focus-visible {
  outline: 2px solid #f4f4f4;
  outline-offset: 5px;
  border-radius: 3px;
}
.elegant-footer [class*='text-white'] { color: #c4c8cd !important; }
.elegant-footer [class*='border-white'] { border-color: #ffffff1c !important; }
.elegant-footer .btn-keyhr, .elegant-footer .btn-keyhr * { color: #fff !important; }
.elegant-footer-contact a { display: inline-block; overflow-wrap: anywhere; }
.elegant-footer-contact p { margin: 0 0 13px; }
.elegant-footer-contact svg { vertical-align: middle; margin-right: 9px; }
.elegant-footer-meta {
  max-width: 1200px;
  margin: 0 auto;
  padding: 22px 24px 28px;
  border-top: 1px solid #ffffff1c;
}
.elegant-footer-memberships {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 18px;
  margin-bottom: 21px;
}
.elegant-footer-memberships a { display: inline-flex; align-items: center; gap: 9px; }
.elegant-footer-badge {
  display: inline-block;
  padding: 5px 8px;
  border: 1px solid #ffffff40;
  color: #e0e3e6;
  font-size: 11px;
  font-weight: 650;
  letter-spacing: .06em;
}
.elegant-footer-legal {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px 24px;
  padding-top: 19px;
  border-top: 1px solid #ffffff12;
}
.elegant-footer-legal p { margin: 0; max-width: none; font-size: 12px; color: #aeb4bb; }
.elegant-footer-legal ul { display: flex; flex-wrap: wrap; gap: 9px 21px; }
.elegant-footer-legal li { margin: 0; }
.elegant-footer-legal a:not(.btn-keyhr) { font-size: 12px; color: #b8bec5; }
@media(max-width: 1000px) {
  .elegant-footer-main { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 34px 40px; }
}
@media(max-width: 767px) {
  .elegant-inner h1 { font-size: clamp(34px, 8vw, 46px) !important; }
  .elegant-inner h2 { font-size: 28px !important; }
  .elegant-inner > div > section:not(:first-child) { padding-top: 42px; padding-bottom: 42px; }
  .elegant-footer-main { padding-top: 40px; gap: 28px; }
  .elegant-footer-legal { align-items: flex-start; flex-direction: column; }
}
@media(max-width: 480px) {
  .elegant-footer-main { grid-template-columns: 1fr; gap: 25px; padding: 34px 20px 27px; }
  .elegant-footer-brand > p { max-width: 38ch; }
  .elegant-footer-meta { padding: 20px; }
  .elegant-faq > summary { padding-left: 18px; }
  .elegant-faq > :not(summary) { padding-left: 18px; padding-right: 18px; }
}

.elegant-footer-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.elegant-footer .elegant-footer-cta { display: inline-flex; align-items: center; justify-content: center; }
.elegant-footer-memberships h2 { margin: 0; }
.elegant-footer-badges { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.elegant-footer .elegant-footer-badges li { margin: 0; }
.elegant-footer .elegant-footer-badges a {
  padding: 5px 10px;
  border: 1px solid #ffffff40;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 650;
  letter-spacing: .06em;
  color: #e0e3e6;
}

.elegant-faq > summary {
  margin: 0 !important;
  font-family: 'Montserrat', sans-serif;
  text-transform: none;
  letter-spacing: -.01em;
}

.elegant-faq > summary h3 {
  margin: 0 !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  line-height: 1.55 !important;
  color: inherit !important;
}

/* Coherent, readable comparison layouts; do not recolor the homepage AI/footer. */
.keyhr-comparison-page { background: #fff; color: #202c33; }
.keyhr-comparison-page .comparison-strength-section { padding-top: 40px; padding-bottom: 40px; }
.keyhr-comparison-page .comparison-strength-section h2 {
  color: #202c33 !important;
  font-size: clamp(25px, 2.3vw, 32px) !important;
}
.keyhr-comparison-page .comparison-strength-section > .container > p {
  color: #4b5862 !important;
  max-width: 70ch;
  margin-bottom: 24px;
}
.comparison-strength-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.comparison-strength-card {
  padding: 23px 24px !important;
  border: 1px solid #dce3e7 !important;
  border-radius: 8px;
  background: #fff !important;
  box-shadow: none !important;
}
.comparison-strength-head { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 12px; }
.comparison-strength-head h3 { color: #202c33 !important; font-size: 16px !important; line-height: 1.4 !important; }
.comparison-strength-copy { color: #4b5862 !important; font-size: 14px !important; line-height: 1.7 !important; }
.keyhr-comparison-page .comparison-close { padding: 12px 0 40px !important; background: #fff !important; border: 0; }
.comparison-close-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 32px;
  padding: 30px 32px;
  max-width: 1120px;
  margin: 0 auto;
  background: #f2f5f6;
  border: 1px solid #dce3e7;
  border-left: 3px solid var(--color-keyhr-red);
  border-radius: 8px;
}
.keyhr-comparison-page .comparison-close-panel h2 { color: #202c33 !important; font-size: clamp(23px, 2.2vw, 29px) !important; margin-bottom: 12px; }
.comparison-close-copy > p { color: #43525c !important; font-size: 15px; line-height: 1.7; }
.comparison-close-copy > .comparison-pricing-note { color: #4b5862 !important; font-size: 13px !important; margin-top: 12px; line-height: 1.65; }
.comparison-close-actions { align-self: center; white-space: nowrap; }
.keyhr-sources-shell { max-width: 1168px; margin: 0 auto; padding: 0 24px 36px; background: transparent !important; }
.keyhr-sources {
  background: #fff !important;
  color: #293740 !important;
  border: 1px solid #dce3e7;
  border-radius: 8px;
  box-shadow: none;
}
.keyhr-sources-summary {
  display: flex;
  align-items: center;
  gap: 10px;
  position: relative;
  padding: 17px 48px 17px 22px;
  color: #293740 !important;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}
.keyhr-sources-summary > svg { color: var(--color-keyhr-red); }
.keyhr-sources-summary::-webkit-details-marker { display: none; }
.keyhr-sources-summary::after { content: '+'; position: absolute; right: 22px; font-size: 20px; color: #44535e; }
.keyhr-sources[open] > summary::after { content: '−'; }
.keyhr-sources-summary:hover { background: #f4f6f7; border-radius: 8px; }
.keyhr-sources-summary:focus-visible { outline: 2px solid var(--color-keyhr-red); outline-offset: 3px; border-radius: 8px; }
.keyhr-sources-body { padding: 0 22px 18px; }
.keyhr-sources-note { color: #4b5862 !important; font-size: 13px !important; line-height: 1.65 !important; margin: 0 0 14px; }
.keyhr-sources-list { list-style: none; margin: 0; padding: 0; }
.keyhr-sources-list li { border-top: 1px solid #e2e7e9; padding: 12px 0; background: transparent !important; }
.keyhr-sources-list a { display: flex; align-items: baseline; gap: 9px; color: #283842 !important; font-size: 14px; font-weight: 600; line-height: 1.6; text-underline-offset: 4px; }
.keyhr-sources-list a svg { flex-shrink: 0; }
.keyhr-sources-list a:hover { color: var(--color-keyhr-red) !important; text-decoration: underline; }
.keyhr-sources-list a:focus-visible { outline: 2px solid var(--color-keyhr-red); outline-offset: 3px; }
@media(max-width: 767px) {
  .comparison-strength-grid { grid-template-columns: 1fr; gap: 12px; }
  .comparison-close { padding-left: 20px !important; padding-right: 20px !important; }
  .comparison-close-panel { grid-template-columns: 1fr; gap: 20px; padding: 24px; }
  .comparison-close-actions { white-space: normal; }
  .keyhr-sources-shell { padding-left: 20px; padding-right: 20px; }
}

/* Shared control foregrounds beat legacy light-theme white-text overrides. */
html body [data-keyhr-control-contrast][data-keyhr-control-contrast='white'],
html body #root [data-keyhr-control-contrast][data-keyhr-control-contrast='white'] { color: #fff !important; }
html body [data-keyhr-control-contrast][data-keyhr-control-contrast='ink'],
html body #root [data-keyhr-control-contrast][data-keyhr-control-contrast='ink'] { color: #293238 !important; }
html body [data-keyhr-control-contrast][data-keyhr-control-contrast] :is(span,strong,b,em,i,h2,h3,h4,p):not([aria-label='Key HR strength']):not([aria-hidden='true']):not([data-keyhr-positive-check]),
html body #root [data-keyhr-control-contrast][data-keyhr-control-contrast] :is(span,strong,b,em,i,h2,h3,h4,p):not([aria-label='Key HR strength']):not([aria-hidden='true']):not([data-keyhr-positive-check]) {
  color: inherit !important;
  opacity: 1 !important;
}
html body [data-keyhr-control-contrast] svg:not(.lucide-check):not(.lucide-circle-check):not(.lucide-check-circle),
html body #root [data-keyhr-control-contrast] svg:not(.lucide-check):not(.lucide-circle-check):not(.lucide-check-circle) { color: inherit !important; }
html body :is(button,input[type='submit'],input[type='button'])[disabled][disabled],
html body :is(button,input[type='submit'],input[type='button'])[aria-disabled='true'][aria-disabled='true'],
html body #root :is(button,input[type='submit'],input[type='button'])[disabled][disabled],
html body #root :is(button,input[type='submit'],input[type='button'])[aria-disabled='true'][aria-disabled='true'] {
  opacity: 1 !important;
  background: #e4e8eb !important;
  border-color: #bdc6cd !important;
  color: #43515c !important;
  cursor: not-allowed;
}
html body :is(button,input[type='submit'],input[type='button'])[disabled] :is(span,strong,b,svg),
html body :is(button,input[type='submit'],input[type='button'])[aria-disabled='true'] :is(span,strong,b,svg) { color: #43515c !important; }
:where(button,input[type='submit'],input[type='button'],summary,[data-keyhr-control-contrast]):focus-visible {
  outline: 2px solid var(--color-keyhr-red);
  outline-offset: 4px;
  box-shadow: 0 0 0 2px #fff;
}
/* Green is positive: never inherit the brand's red on KeyHR strengths. */
[aria-label='Key HR strength'], .comparison-strength-head [aria-hidden='true'] {
  color: #287a59 !important;
  background: #e4f1eb !important;
}

html body #root :is([role='checkbox'],[role='radio'])[data-keyhr-control-contrast][data-keyhr-control-contrast] svg { color: inherit !important; }

html body #root :is([role='checkbox'],[role='radio'])[data-state='checked'] svg { color: currentColor !important; }

html body [data-keyhr-control-contrast][data-keyhr-control-contrast='black'],
html body #root [data-keyhr-control-contrast][data-keyhr-control-contrast='black'] { color: #000 !important; }
html body [data-keyhr-control-contrast][data-keyhr-control-contrast='backplate'],
html body #root [data-keyhr-control-contrast][data-keyhr-control-contrast='backplate'] {
  color: #293238 !important;
  background: #fff !important;
  border-color: #b8c3ca !important;
}

/* Foreground/background pairing is immediate; retain motion on shape/shadow. */
html body :is(button,input[type='submit'],input[type='button'],summary,[role='button'],[role='tab'],[role='checkbox'],[role='radio'],[role='combobox']),
html body a:is([class*='btn-'],.inline-flex,[data-keyhr-control-contrast]) {
  transition-property: transform, box-shadow, border-color !important;
}
html body #root a.btn-ghost:hover,
html body #root a.btn-ghost:focus-visible,
html body #root button.btn-ghost:hover,
html body #root button.btn-ghost:focus-visible {
  color: #fff !important;
  background: var(--color-keyhr-red) !important;
  border-color: var(--color-keyhr-red) !important;
}
html body :is(a,button).bg-white.text-red-600,
html body :is(a,button).bg-white.text-red-500 { color: var(--color-keyhr-red) !important; }
html body [data-keyhr-positive-check],
html body #root [data-keyhr-positive-check] { color: #287a59 !important; }

/* Video imagery is variable: secondary actions have their own dark backplate. */
#home .btn-ghost {
  background: rgba(12, 15, 18, .92) !important;
  color: #fff !important;
  border-color: rgba(255, 255, 255, .6) !important;
}

/* Comparison feature chart (comparison + alternative pages) */
.kc-section{background:#fff;padding:2.5rem 0 1rem}
.kc-title{font-size:1.5rem;line-height:2rem;font-weight:700;letter-spacing:-.01em;color:#020617}
.kc-intro{margin:.5rem 0 1.25rem;max-width:48rem;line-height:1.75rem;color:#334155}
.kc-wrap{overflow-x:auto;border:1px solid #e2e8f0;border-radius:.5rem;background:#fff;box-shadow:0 1px 2px rgba(15,23,42,.05)}
.kc-table{width:100%;min-width:560px;border-collapse:collapse;font-size:.9375rem;text-align:left}
.kc-table thead th{background:#f8fafc;border-bottom:1px solid #e2e8f0;padding:.875rem 1rem;font-weight:700;color:#0f172a}
.kc-table thead .kc-keyhr-col{color:var(--color-keyhr-red,#b91c1c)}
.kc-keyhr-col,.kc-comp-col,.kc-keyhr,.kc-comp{width:9.5rem;text-align:center!important}
.kc-group th{background:#f1f5f9;padding:.55rem 1rem;font-size:.72rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#475569;border-bottom:1px solid #e2e8f0}
.kc-row th,.kc-row td{padding:.7rem 1rem;border-bottom:1px solid #f1f5f9;vertical-align:middle}
.kc-row:last-child th,.kc-row:last-child td{border-bottom:0}
.kc-feature{font-weight:500;color:#1e293b}
.kc-row:hover{background:#fafafa}
.kc-mark{display:inline-flex;align-items:center;justify-content:center}
.kc-yes{color:#16a34a}
.kc-no{color:#94a3b8}
.kc-text{display:inline-block;font-size:.8rem;line-height:1.1rem;color:#64748b}
.kc-note{margin-top:.75rem;font-size:.8125rem;line-height:1.25rem;color:#64748b}
@media (max-width:640px){.kc-keyhr-col,.kc-comp-col,.kc-keyhr,.kc-comp{width:5.5rem}.kc-row th,.kc-row td{padding:.6rem .65rem}.kc-table{font-size:.875rem}}