/* ============================================================================
   KinectedCare brand layer  —  kc-brand.css
   Sits on top of Bootstrap 5.3. Defines the canonical palette as named tokens,
   the Fraunces + Inter type system, and the site's component vocabulary.
   Source of truth for color: KinectedCare-Color-Palette.docx (palette doc).
   NEVER put raw hex in HTML. Reference tokens by name from here.
   ============================================================================ */

/* ---- 1. Design tokens ---------------------------------------------------- */
:root {
  /* Palette (canonical hex, palette doc) */
  --kc-navy:        #1F3055;
  --kc-navy-deep:   #152544;  /* derived: pressed/hover navy, status bars */
  --kc-offwhite:    #FAFAFA;
  --kc-coral:       #E07856;
  --kc-coral-soft:  #F4E2DA;  /* derived: faint coral wash for editorial fills */
  --kc-crimson:     #C42938;  /* emergency only — effectively absent on marketing */
  --kc-slate:       #1A1F2E;
  --kc-warmgray:    #5C6373;
  --kc-white:       #FFFFFF;  /* dark-canvas text only */
  --kc-navy-light:  #9AAEDA;  /* dark-canvas emphasis only */
  --kc-line:        #E2DFD7;  /* hairline divider on light (warm, not gray-200) */
  --kc-divider:     rgba(255,255,255,0.12); /* derived: translucent divider on dark navy chrome (footer rule) */
  --kc-hairline:    rgba(250,250,250,0.25); /* derived: faint off-white hairline on dark hero */

  /* Type */
  --kc-font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --kc-font-body:    "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* Scale / rhythm */
  --kc-radius:       14px;
  --kc-radius-pill:  999px;
  --kc-section-y:    clamp(3.5rem, 7vw, 6.5rem);
  --kc-shadow-soft:  0 18px 40px rgba(31, 48, 85, 0.14);
  --kc-shadow-card:  0 6px 24px rgba(31, 48, 85, 0.08);

  /* Bootstrap variable overrides (so utilities inherit the brand) */
  --bs-body-font-family: var(--kc-font-body);
  --bs-body-color: var(--kc-slate);
  --bs-body-bg: var(--kc-offwhite);
  --bs-primary: var(--kc-navy);
  --bs-link-color: var(--kc-navy);
  --bs-link-hover-color: var(--kc-navy-deep);
}

/* ---- 2. Base ------------------------------------------------------------- */
html { scroll-behavior: smooth; }
body {
  font-family: var(--kc-font-body);
  color: var(--kc-slate);
  background: var(--kc-offwhite);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, .kc-display {
  font-family: var(--kc-font-display);
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--kc-slate);
  line-height: 1.12;
}
h1 { font-size: clamp(2.1rem, 5vw, 3.25rem); }
h2 { font-size: clamp(1.7rem, 3.5vw, 2.4rem); }
h3 { font-size: clamp(1.25rem, 2vw, 1.55rem); }

p { line-height: 1.65; }
.kc-lead {
  font-family: var(--kc-font-body);
  font-size: clamp(1.05rem, 1.6vw, 1.2rem);
  line-height: 1.6;
  color: var(--kc-warmgray);
}
.kc-muted { color: var(--kc-warmgray); }

a { color: var(--kc-navy); text-decoration: none; }
a:hover { color: var(--kc-navy-deep); }

/* ---- 3. Eyebrow (the Coral accent device) ------------------------------- */
.kc-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-family: var(--kc-font-body);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--kc-coral);
  margin-bottom: 1.1rem;
}
.kc-eyebrow::before {
  content: "";
  width: 26px;
  height: 2px;
  background: var(--kc-coral);
  display: inline-block;
}
.kc-eyebrow--center { justify-content: center; }

/* ---- 4. Buttons (Navy chrome, never Coral) ------------------------------ */
.btn-kc {
  --bs-btn-color: var(--kc-offwhite);
  --bs-btn-bg: var(--kc-navy);
  --bs-btn-border-color: var(--kc-navy);
  --bs-btn-hover-color: var(--kc-offwhite);
  --bs-btn-hover-bg: var(--kc-navy-deep);
  --bs-btn-hover-border-color: var(--kc-navy-deep);
  --bs-btn-active-bg: var(--kc-navy-deep);
  --bs-btn-active-border-color: var(--kc-navy-deep);
  font-family: var(--kc-font-body);
  font-weight: 500;
  border-radius: var(--kc-radius-pill);
  padding: 0.8rem 1.9rem;
  transition: transform .12s ease, background .15s ease;
}
.btn-kc:hover { transform: translateY(-1px); }
.btn-kc-outline {
  --bs-btn-color: var(--kc-navy);
  --bs-btn-border-color: var(--kc-navy);
  --bs-btn-hover-color: var(--kc-offwhite);
  --bs-btn-hover-bg: var(--kc-navy);
  --bs-btn-hover-border-color: var(--kc-navy);
  font-family: var(--kc-font-body);
  font-weight: 500;
  border-width: 1.5px;
  border-radius: var(--kc-radius-pill);
  padding: 0.8rem 1.7rem;
}

/* ---- 5. Navbar (Navy chrome, never bg-dark) ----------------------------- */
.kc-nav {
  background: var(--kc-navy);
  padding: 0.8rem 0;
}
.kc-nav .navbar-brand { display: flex; align-items: center; gap: 0.6rem; }
.kc-nav .navbar-brand img { width: 30px; height: 30px; }
.kc-nav .kc-wordmark {
  font-family: var(--kc-font-body);
  font-weight: 600;
  font-size: 1.08rem;
  color: var(--kc-offwhite);
  letter-spacing: 0.01em;
}
.kc-nav .nav-link {
  color: var(--kc-offwhite) !important;
  font-size: 0.95rem;
  opacity: 0.88;
  transition: opacity .15s ease;
}
.kc-nav .nav-link:hover { opacity: 1; }
.kc-nav .dropdown-menu {
  background: #fff;
  border: 0.5px solid var(--kc-line);
  border-radius: var(--kc-radius);
  box-shadow: var(--kc-shadow-card);
  padding: 0.4rem;
}
.kc-nav .dropdown-item { border-radius: 8px; color: var(--kc-slate) !important; font-size: 0.92rem; opacity: 1; }
.kc-nav .dropdown-item:hover { background: var(--kc-offwhite); color: var(--kc-navy) !important; }
.kc-nav .nav-link.kc-nav-cta {
  background: var(--kc-offwhite);
  color: var(--kc-navy) !important;
  font-weight: 500;
  padding: 0.45rem 1.2rem !important;
  border-radius: var(--kc-radius-pill);
  opacity: 1 !important;
}
.kc-nav .nav-link.kc-nav-cta:hover { background: #fff; color: var(--kc-navy-deep) !important; }
.kc-nav .navbar-toggler { border-color: rgba(250,250,250,0.4); }

/* ---- 6. Sections & surfaces --------------------------------------------- */
.kc-section { padding-top: var(--kc-section-y); padding-bottom: var(--kc-section-y); }
.kc-section--tint { background: var(--kc-offwhite); }
.kc-section--navy {
  background: var(--kc-navy);
  color: var(--kc-offwhite);
}
.kc-section--navy h1, .kc-section--navy h2, .kc-section--navy h3 { color: var(--kc-offwhite); }
.kc-section--navy .kc-lead { color: rgba(250,250,250,0.82); }

.kc-card {
  background: #fff;
  border: 0.5px solid var(--kc-line);
  border-radius: var(--kc-radius);
  box-shadow: var(--kc-shadow-card);
  padding: 1.6rem;
  height: 100%;
}

/* Feature icon chip (custom SVG sits inside) */
.kc-icon {
  width: 46px; height: 46px;
  border-radius: 12px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--kc-coral-soft);
  margin-bottom: 1rem;
}
.kc-icon svg { width: 24px; height: 24px; }
.kc-icon--navy { background: rgba(31,48,85,0.08); }

/* ---- 7. Hero (photo) ---------------------------------------------------- */
.kc-hero-photo {
  position: relative;
  min-height: 580px;
  display: flex;
  align-items: center;
  overflow: hidden;
}
.kc-hero-photo__img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center 28%;
}
.kc-hero-photo__scrim {
  position: absolute; inset: 0;
  background: linear-gradient(90deg,
    rgba(31,48,85,0.94) 0%,
    rgba(31,48,85,0.78) 40%,
    rgba(31,48,85,0.30) 78%,
    rgba(31,48,85,0.12) 100%);
}
.kc-hero-photo__inner { position: relative; z-index: 2; }
.kc-hero-photo h1,
.kc-hero-photo .kc-eyebrow { color: var(--kc-offwhite); }
.kc-hero-photo .kc-eyebrow { color: #F0997B; }
.kc-hero-photo .kc-hero-lead {
  font-family: var(--kc-font-body);
  font-size: clamp(1.05rem, 1.6vw, 1.2rem);
  line-height: 1.6;
  color: rgba(250,250,250,0.92);
  max-width: 480px;
}
.kc-hero-photo .kc-hero-stat { color: var(--kc-offwhite); }
.kc-hero-photo .kc-hero-stat .kc-display { color: var(--kc-offwhite); }
.kc-hero-photo .kc-hero-stat small { color: rgba(250,250,250,0.72); }
.btn-kc-light {
  background: var(--kc-offwhite); color: var(--kc-navy);
  font-family: var(--kc-font-body); font-weight: 500;
  border-radius: var(--kc-radius-pill); padding: 0.8rem 1.9rem;
  transition: transform .12s ease, background .15s ease;
}
.btn-kc-light:hover { background: #fff; color: var(--kc-navy-deep); transform: translateY(-1px); }
.btn-kc-ghost-light {
  color: var(--kc-offwhite); border: 1.5px solid rgba(250,250,250,0.7);
  font-family: var(--kc-font-body); font-weight: 500;
  border-radius: var(--kc-radius-pill); padding: 0.8rem 1.7rem;
  transition: background .15s ease;
}
.btn-kc-ghost-light:hover { background: rgba(250,250,250,0.12); color: var(--kc-offwhite); }
@media (max-width: 991px) {
  .kc-hero-photo { min-height: 0; }
  .kc-hero-photo__img { position: relative; height: 280px; }
  .kc-hero-photo__scrim { background: rgba(31,48,85,0.55); }
  .kc-hero-photo__inner { background: var(--kc-navy); }
}

/* ---- 7b. Hero phone frame ----------------------------------------------- */
.kc-phone {
  width: 250px;
  background: var(--kc-offwhite);
  border: 8px solid var(--kc-navy);
  border-radius: 34px;
  overflow: hidden;
  box-shadow: var(--kc-shadow-soft);
}
.kc-phone__notch { height: 24px; background: var(--kc-navy); display: flex; align-items: center; justify-content: center; }
.kc-phone__notch span { width: 72px; height: 5px; background: var(--kc-navy-deep); border-radius: 3px; }
.kc-hero-glow {
  position: absolute; inset: -18px;
  background: var(--kc-coral);
  opacity: 0.10;
  border-radius: 44px;
  z-index: 0;
}

/* ---- 8. Comparison table ------------------------------------------------ */
.kc-table { border-collapse: separate; border-spacing: 0; width: 100%; }
.kc-table th, .kc-table td {
  padding: 0.95rem 1.1rem;
  font-size: 1rem;
  vertical-align: middle;
  border-bottom: 0.5px solid var(--kc-line);
}
.kc-table thead th {
  font-family: var(--kc-font-body);
  font-weight: 600;
  color: var(--kc-slate);
  background: #fff;
}
.kc-table .kc-col-us { background: rgba(31,48,85,0.04); font-weight: 500; }
.kc-table tbody td:first-child { color: var(--kc-warmgray); }

/* ---- 9. Footnote / footer ----------------------------------------------- */
.kc-footnote { color: var(--kc-warmgray); font-size: 0.86rem; line-height: 1.55; }
.kc-footer { background: var(--kc-navy); color: var(--kc-offwhite); }
.kc-footer a { color: var(--kc-navy-light); }
.kc-footer a:hover { color: #fff; }
.kc-footer .kc-footer-small { color: rgba(250,250,250,0.7); font-size: 0.85rem; }

/* ---- 10. Motion (respectful) -------------------------------------------- */
.kc-reveal { opacity: 0; transform: translateY(16px); transition: opacity .6s ease, transform .6s ease; }
.kc-reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .kc-reveal { opacity: 1; transform: none; transition: none; }
  .btn-kc:hover { transform: none; }
}

/* ---- 11. Trust strip ---------------------------------------------------- */
.kc-trust {
  background: var(--kc-navy);
  color: var(--kc-offwhite);
  padding: 1.1rem 0;
}
.kc-trust .kc-trust-ico { color: var(--kc-navy-light); }

/* ---- 12. Store badges --------------------------------------------------- */
.kc-store {
  display: inline-flex; align-items: center; gap: 0.6rem;
  background: var(--kc-navy);
  color: var(--kc-offwhite);
  border-radius: var(--kc-radius);
  padding: 0.7rem 1.3rem;
  min-width: 200px;
  transition: transform .12s ease, background .15s ease;
}
.kc-store:hover { background: var(--kc-navy-deep); color: var(--kc-offwhite); transform: translateY(-1px); }
.kc-store svg { width: 26px; height: 26px; flex: 0 0 auto; }
.kc-store__small { font-size: 0.7rem; opacity: 0.8; line-height: 1; display: block; }
.kc-store__big { font-size: 1.05rem; font-weight: 500; line-height: 1.2; }

/* ---- 13. Pricing -------------------------------------------------------- */
.kc-price-card {
  background: #fff;
  border: 0.5px solid var(--kc-line);
  border-radius: var(--kc-radius);
  padding: 1.8rem;
  height: 100%;
}
.kc-price-card--feature { border: 2px solid var(--kc-navy); box-shadow: var(--kc-shadow-card); }
.kc-price-amount { font-family: var(--kc-font-display); font-weight: 600; font-size: 2.4rem; color: var(--kc-navy); }
.kc-price-per { color: var(--kc-warmgray); font-size: 0.95rem; }
.kc-price-badge {
  display: inline-block; background: var(--kc-coral-soft); color: #993C1D;
  font-size: 0.72rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 0.3rem 0.8rem; border-radius: var(--kc-radius-pill); margin-bottom: 0.8rem;
}
.kc-check { color: var(--kc-navy); margin-right: 0.55rem; flex: 0 0 auto; }

/* ---- 14. Responsive ----------------------------------------------------- */
@media (max-width: 991px) {
  .kc-phone { width: 220px; }
}
@media (max-width: 575px) {
  .kc-phone { width: 200px; }
  .btn-kc, .btn-kc-outline { width: 100%; }
}

/* ---- 15. Article byline + sources (E-E-A-T) ----------------------------- */
.kc-byline { display:flex; align-items:center; gap:.7rem; margin:1.4rem 0 0; }
.kc-byline__avatar { width:42px; height:42px; border-radius:50%; background:var(--kc-navy);
  color:var(--kc-offwhite); display:flex; align-items:center; justify-content:center;
  font-family:var(--kc-font-body); font-weight:500; font-size:.95rem; flex:0 0 auto; }
.kc-byline__name { font-family:var(--kc-font-body); font-weight:500; color:var(--kc-slate); }
.kc-byline__meta { font-size:.85rem; color:var(--kc-warmgray); }
.kc-sources { max-width:760px; margin:0 auto; }
.kc-sources h2 { font-size:1.25rem; }
.kc-sources ul { line-height:1.9; color:var(--kc-warmgray); font-size:.95rem; }
.kc-sources a { color:var(--kc-navy); }
.kc-faq summary::-webkit-details-marker { display:none; }

/* ---- 16. Real-story testimonials ---------------------------------------- */
.kc-story { background:#fff; border:.5px solid var(--kc-line); border-radius:var(--kc-radius);
  padding:1.6rem 1.7rem; box-shadow:var(--kc-shadow-soft); height:100%; display:flex; flex-direction:column; }
.kc-story__quote { font-family:var(--kc-font-body); color:var(--kc-slate); line-height:1.6;
  font-size:1rem; margin:0 0 1rem; }
.kc-story__quote::before { content:"\201C"; font-family:var(--kc-font-display); color:var(--kc-coral);
  font-size:2.4rem; line-height:0; vertical-align:-.55rem; margin-right:.15rem; }
.kc-story__attr { margin-top:auto; display:flex; align-items:center; gap:.6rem; }
.kc-story__avatar { width:38px; height:38px; border-radius:50%; background:var(--kc-navy-light);
  color:var(--kc-navy); display:flex; align-items:center; justify-content:center;
  font-family:var(--kc-font-body); font-weight:600; font-size:.85rem; flex:0 0 auto; }
.kc-story__name { font-family:var(--kc-font-body); font-weight:500; color:var(--kc-slate); font-size:.95rem; }