/* =====================================================================
   Caresoft Claim Manager — marketing site
   Navy and blue on white. Serif display against a sans UI face, because
   this product sells to CFOs and billing heads who read reports, not to
   a consumer app audience — and because every competitor is all-sans.
   No framework; the grid here is small enough to own.
   ===================================================================== */

:root {
  --navy-900: #061527;
  --navy-800: #0A2038;
  --navy-700: #10314F;
  --blue-700: #0B4F9E;
  --blue-600: #1266C7;
  --blue-500: #2E86FF;
  --blue-100: #DCEAFB;
  --blue-50:  #F1F6FD;

  --paper: #FFFFFF;
  --mist:  #F5F8FC;
  --line:  #DFE7F0;

  --ink:   #121E2C;
  --muted: #55697F;
  --faint: #8598AD;

  --good:  #0F8B5B; --good-bg: #E6F6EE;
  --warn:  #B7791F; --warn-bg: #FDF3E2;
  --bad:   #C0392B; --bad-bg:  #FCEBE9;

  --serif: "Source Serif 4", Georgia, serif;
  --sans:  Inter, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --r: 10px;
  --shadow: 0 1px 2px rgba(6,21,39,.05), 0 8px 26px rgba(6,21,39,.06);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

body {
  margin: 0;
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { font-family: var(--serif); font-weight: 600; line-height: 1.18; margin: 0 0 .5em; }
h1 { font-size: clamp(2.1rem, 4.6vw, 3.4rem); letter-spacing: -.015em; }
h2 { font-size: clamp(1.55rem, 2.8vw, 2.2rem); letter-spacing: -.01em; }
h3 { font-size: 1.12rem; }
p  { margin: 0 0 1em; }

a { color: var(--blue-600); text-decoration: none; }
a:hover { color: var(--blue-700); text-decoration: underline; }

:focus-visible { outline: 2px solid var(--blue-500); outline-offset: 3px; border-radius: 4px; }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--navy-900); color: #fff; padding: 10px 16px;
}
.skip:focus { left: 8px; top: 8px; }

.wrap { max-width: 1160px; margin: 0 auto; padding: 0 22px; }
.wrap--narrow { max-width: 780px; }

.eyebrow {
  font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  color: var(--blue-600); margin: 0 0 10px;
}
.eyebrow--light { color: var(--blue-500); }
.eyebrow--light a { color: inherit; }

.section { padding: 68px 0; }
.section--tint { background: var(--mist); }

.sec-head { max-width: 700px; margin-bottom: 34px; }
.sec-head__sub { color: var(--muted); font-size: 17px; margin: 0; }
.sec-more { margin-top: 26px; font-weight: 500; }

/* ------------------------------------------------------------- header */

.site-head {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,.94);
  backdrop-filter: saturate(140%) blur(8px);
  border-bottom: 1px solid var(--line);
}
.site-head__in { display: flex; align-items: center; gap: 20px; height: 68px; }

.brand { display: flex; align-items: center; gap: 11px; text-decoration: none; }
.brand:hover { text-decoration: none; }
.brand__mark {
  width: 36px; height: 36px; border-radius: 9px; flex: 0 0 36px;
  background: var(--navy-900); color: #fff;
  display: grid; place-items: center; font-weight: 700; font-size: 13px; letter-spacing: .02em;
}
.brand__text { display: flex; flex-direction: column; line-height: 1.15; }
.brand__text b { font-size: 15px; color: var(--ink); font-weight: 600; }
.brand__text em {
  font-style: normal; font-size: 11px; color: var(--faint);
  text-transform: uppercase; letter-spacing: .1em;
}
.brand--light .brand__text b { color: #fff; }
.brand--light .brand__mark { background: var(--blue-600); }

.site-nav { margin-left: auto; display: flex; align-items: center; gap: 22px; }
.site-nav a { color: var(--ink); font-size: 14.5px; font-weight: 500; }
.site-nav a:hover { color: var(--blue-600); text-decoration: none; }
.site-nav a.is-on { color: var(--blue-700); }

.nav-toggle { display: none; background: none; border: 0; padding: 8px; margin-left: auto; }
.nav-toggle span { display: block; width: 22px; height: 2px; background: var(--ink); margin: 4px 0; }

/* -------------------------------------------------------------- buttons */

.btn {
  display: inline-block; border: 1px solid transparent; border-radius: 8px;
  padding: 12px 22px; font-size: 15px; font-weight: 550; cursor: pointer;
  text-decoration: none; transition: background .15s ease, border-color .15s ease;
}
.btn:hover { text-decoration: none; }
.btn--primary { background: var(--blue-600); color: #fff; }
.btn--primary:hover { background: var(--blue-700); color: #fff; }
.btn--light { background: #fff; color: var(--navy-900); }
.btn--light:hover { background: var(--blue-50); color: var(--navy-900); }
.btn--ghost { border-color: rgba(255,255,255,.35); color: #fff; }
.btn--ghost:hover { border-color: #fff; color: #fff; }
.btn--sm { padding: 8px 15px; font-size: 14px; }

/* ---------------------------------------------------------------- hero */

.hero {
  background:
    radial-gradient(1000px 420px at 82% -8%, rgba(46,134,255,.30), transparent 62%),
    linear-gradient(165deg, var(--navy-900) 0%, var(--navy-700) 100%);
  color: #fff;
  padding: 88px 0 0;
}
.hero__in { display: grid; gap: 44px; }
.hero__copy { max-width: 720px; }
.hero h1 { color: #fff; }
.hero__sub { font-size: 18.5px; color: #B9CFE6; max-width: 62ch; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }

/* Signature: the claim journey rail, carried over from the product UI. */
.hero__rail {
  display: flex; gap: 0; overflow-x: auto;
  border-top: 1px solid rgba(255,255,255,.14);
  padding: 22px 0 30px;
}
.rail-step { flex: 1 1 0; min-width: 130px; position: relative; padding-right: 16px; }
.rail-step::after {
  content: ""; position: absolute; left: 10px; right: 0; top: 5px; height: 1px;
  background: linear-gradient(90deg, var(--blue-500), rgba(46,134,255,.18));
}
.rail-step:last-child::after { display: none; }
.rail-step__dot {
  width: 11px; height: 11px; border-radius: 50%; background: var(--blue-500);
  display: block; margin-bottom: 12px; position: relative; z-index: 1;
  box-shadow: 0 0 0 4px rgba(46,134,255,.22);
}
.rail-step__name {
  font-size: 13px; font-weight: 600; color: #DCEAFB;
  letter-spacing: .02em;
}

.page-hero {
  background: linear-gradient(165deg, var(--navy-900) 0%, var(--navy-700) 100%);
  color: #fff; padding: 76px 0 62px;
}
.page-hero h1 { color: #fff; }
.page-hero__sub { font-size: 18px; color: #B9CFE6; max-width: 62ch; }
.page-hero__sub code { background: rgba(255,255,255,.12); padding: 2px 6px; border-radius: 4px; }
.page-hero--post .post-meta { color: #93AECB; font-size: 14px; margin: 0; }

/* ----------------------------------------------------------- stat band */

.stat-band { background: var(--navy-800); color: #fff; border-top: 1px solid rgba(255,255,255,.08); }
.stat-band__in {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 26px; padding: 26px 22px;
}
.stat b {
  display: block; font-family: var(--serif); font-size: 26px; font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.stat span { font-size: 13px; color: #93AECB; }

/* -------------------------------------------------- AEO: answer block */
/* Short, direct, near the top. This is the paragraph an answer engine
   lifts, so it is written and marked up deliberately rather than left
   to chance in the middle of the body copy. */

.answer {
  border-left: 3px solid var(--blue-600);
  background: var(--blue-50);
  padding: 20px 24px;
  border-radius: 0 var(--r) var(--r) 0;
  margin: 0 0 34px;
}
.answer__label {
  font-size: 11.5px; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--blue-700); margin-bottom: 6px;
}
.answer__text { font-size: 17.5px; line-height: 1.55; margin: 0; color: var(--ink); }

/* ----------------------------------------------------------- journey */

.journey {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 26px;
}
.journey__step { position: relative; padding-top: 26px; border-top: 2px solid var(--blue-100); }
.journey__num {
  position: absolute; top: -13px; left: 0;
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--blue-600); color: #fff;
  display: grid; place-items: center; font-size: 12px; font-weight: 700;
}
.journey__step p { color: var(--muted); font-size: 15px; margin: 0; }

/* ------------------------------------------------------------- cards */

.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; }
.card {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r);
  padding: 24px; box-shadow: var(--shadow);
}
.card h3 { margin-bottom: .35em; }
.card p { color: var(--muted); font-size: 15px; margin: 0; }
.card__meta { font-size: 12.5px; color: var(--faint); text-transform: uppercase; letter-spacing: .06em; }
.card--post h3 { font-size: 1.2rem; }
.card--post h3 a { color: var(--ink); }
.card--post h3 a:hover { color: var(--blue-700); text-decoration: none; }
.card__top { display: flex; align-items: flex-start; gap: 12px; justify-content: space-between; }

/* ---------------------------------------------------------- compare */

.compare { border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.compare__row {
  display: grid; grid-template-columns: 1fr 40px 1fr; align-items: center;
  border-bottom: 1px solid var(--line);
}
.compare__row:last-child { border-bottom: 0; }
.compare__before { padding: 18px 20px; color: var(--muted); background: var(--mist); font-size: 15px; }
.compare__arrow { text-align: center; color: var(--blue-500); font-size: 18px; }
.compare__after { padding: 18px 20px; font-weight: 500; font-size: 15px; }

/* ------------------------------------------------------------- chips */

.chips { display: flex; flex-wrap: wrap; gap: 10px; }
.chip {
  display: inline-flex; align-items: center; gap: 8px;
  border: 1px solid var(--line); background: #fff; border-radius: 999px;
  padding: 8px 15px; font-size: 14px; font-weight: 500; color: var(--ink);
}
.chip:hover { border-color: var(--blue-200, #B9D4F5); text-decoration: none; }
.chip em {
  font-style: normal; font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .06em;
}
.chip--live       { border-color: #BFE6D4; } .chip--live em       { color: var(--good); }
.chip--in_progress{ border-color: #F3DFB8; } .chip--in_progress em{ color: var(--warn); }
.chip--planned    { border-color: var(--line); } .chip--planned em { color: var(--faint); }

.legend { display: flex; flex-wrap: wrap; gap: 14px; align-items: center;
          font-size: 14px; color: var(--muted); }

/* -------------------------------------------------- GEO: fact blocks */
/* Sourced numbers, rendered visibly and repeated in llms.txt. A number
   without a source does not get quoted by anything worth being quoted by. */

.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; }
.fact { background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: 22px; }
.fact__value {
  font-family: var(--serif); font-size: 25px; font-weight: 600;
  color: var(--blue-700); margin-bottom: 8px; font-variant-numeric: tabular-nums;
}
.fact__statement { font-size: 15px; margin-bottom: 10px; }
.fact__source { font-size: 12.5px; color: var(--faint); margin: 0; }

/* --------------------------------------------------------------- FAQ */

.faqs { border-top: 1px solid var(--line); }
.faq { border-bottom: 1px solid var(--line); }
.faq summary {
  cursor: pointer; list-style: none; padding: 18px 40px 18px 0;
  font-weight: 550; font-size: 16.5px; position: relative;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; position: absolute; right: 6px; top: 15px;
  font-size: 22px; color: var(--blue-600); font-weight: 400; line-height: 1;
}
.faq[open] summary::after { content: "−"; }
.faq__body { padding: 0 0 20px; color: var(--muted); font-size: 15.5px; }
.faq__body p:last-child { margin-bottom: 0; }
.faq-cat { font-size: 1.25rem; margin-top: 40px; }

/* ------------------------------------------------------------- prose */

.prose { font-size: 17px; line-height: 1.72; }
.prose h2 { margin-top: 1.6em; }
.prose h3 { margin-top: 1.4em; }
.prose ul, .prose ol { padding-left: 1.3em; margin-bottom: 1.2em; }
.prose li { margin-bottom: .45em; }
.prose blockquote {
  margin: 1.5em 0; padding: 4px 0 4px 20px;
  border-left: 3px solid var(--blue-100); color: var(--muted); font-style: italic;
}
.prose table { width: 100%; border-collapse: collapse; margin: 1.4em 0; font-size: 15px; }
.prose th, .prose td { border: 1px solid var(--line); padding: 10px 12px; text-align: left; }
.prose th { background: var(--blue-50); font-weight: 600; }

.note {
  background: #fff; border: 1px solid var(--line); border-left: 3px solid var(--blue-600);
  border-radius: 0 var(--r) var(--r) 0; padding: 24px 26px;
}
.note h2 { font-size: 1.2rem; }
.note ul { margin: 0; padding-left: 1.2em; color: var(--muted); }
.note li { margin-bottom: .4em; }

.spec { display: grid; grid-template-columns: 190px 1fr; gap: 10px 18px; margin: 0 0 30px; }
.spec dt { color: var(--muted); }
.spec dd { margin: 0; font-weight: 550; text-transform: capitalize; }

/* ------------------------------------------------------------- forms */

.contact-grid { display: grid; grid-template-columns: 1.55fr 1fr; gap: 34px; align-items: start; }
.contact-side { display: grid; gap: 18px; }

.fields { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 22px; }
.field--wide { grid-column: 1 / -1; }
.field label { display: block; font-size: 13px; font-weight: 600; color: var(--navy-700); margin-bottom: 5px; }
.field input, .field select, .field textarea {
  width: 100%; font: inherit; font-size: 15px;
  border: 1px solid var(--line); border-radius: 8px; padding: 10px 13px;
  background: #fff; color: var(--ink);
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--blue-500); box-shadow: 0 0 0 3px var(--blue-100);
}
.field__hint { font-size: 12.5px; color: var(--faint); margin: 5px 0 0; }
.field__err  { font-size: 12.5px; color: var(--bad); margin: 5px 0 0; font-weight: 500; }
.hp { position: absolute; left: -9999px; }

.inline-form { display: flex; gap: 10px; flex-wrap: wrap; }
.inline-form input {
  flex: 1 1 220px; font: inherit; border: 1px solid var(--line);
  border-radius: 8px; padding: 10px 13px;
}

.alert { border-radius: 8px; padding: 12px 16px; font-size: 14.5px; margin-bottom: 18px; }
.alert--bad { background: var(--bad-bg); color: #8c2118; }
.alert--ok  { background: var(--good-bg); color: #0a5f3f; }

.blog-filter { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 28px; }
.blog-filter input, .blog-filter select {
  font: inherit; font-size: 14.5px; border: 1px solid var(--line);
  border-radius: 8px; padding: 9px 13px;
}
.blog-filter input { flex: 1 1 240px; }

.pager { display: flex; gap: 18px; align-items: center; justify-content: center;
         margin-top: 34px; font-size: 14.5px; color: var(--muted); }

/* ---------------------------------------------------------- cta band */

.cta-band { background: linear-gradient(150deg, var(--navy-900), var(--blue-700)); color: #fff; }
.cta-band__in {
  display: flex; align-items: center; justify-content: space-between;
  gap: 30px; flex-wrap: wrap;
}
.cta-band h2 { color: #fff; margin-bottom: .25em; }
.cta-band p { color: #B9CFE6; margin: 0; max-width: 56ch; }

/* ------------------------------------------------------------ footer */

.site-foot { background: var(--navy-900); color: #93AECB; padding: 56px 0 26px; font-size: 14px; }
.foot-grid {
  display: grid; grid-template-columns: 1.8fr 1fr 1fr 1fr; gap: 34px;
  padding-bottom: 32px; border-bottom: 1px solid rgba(255,255,255,.09);
}
.foot-grid h3 { color: #fff; font-family: var(--sans); font-size: 12px;
                text-transform: uppercase; letter-spacing: .1em; margin-bottom: 14px; }
.foot-grid a { display: block; color: #93AECB; margin-bottom: 9px; }
.foot-grid a:hover { color: #fff; text-decoration: none; }
.foot-blurb { color: #7791AF; font-size: 13.5px; max-width: 42ch; margin-top: 16px; }
.foot-blurb a { display: inline; }
.foot-base {
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 14px;
  padding-top: 22px; font-size: 13px; color: #6B87A5;
}
.foot-base__links { display: flex; gap: 18px; }
.foot-base a { color: #6B87A5; }

/* -------------------------------------------------------- responsive */

@media (max-width: 900px) {
  .contact-grid, .foot-grid { grid-template-columns: 1fr; }
  .fields { grid-template-columns: 1fr; }
  .compare__row { grid-template-columns: 1fr; }
  .compare__arrow { display: none; }
  .compare__before { border-bottom: 1px solid var(--line); }
}

@media (max-width: 780px) {
  .nav-toggle { display: block; }
  .site-nav {
    display: none; position: absolute; top: 68px; left: 0; right: 0;
    background: #fff; border-bottom: 1px solid var(--line);
    flex-direction: column; align-items: stretch; gap: 0; padding: 10px 22px 20px;
  }
  .site-nav.is-open { display: flex; }
  .site-nav a { padding: 12px 0; border-bottom: 1px solid var(--line); }
  .site-nav .btn { margin-top: 12px; text-align: center; border-bottom: 0; }
  .section { padding: 52px 0; }
  .hero { padding-top: 62px; }
}

@media print {
  .site-head, .site-foot, .cta-band, .btn { display: none !important; }
  body { color: #000; }
}