/* ============================================================================
   SolvingHealth estate stylesheet — one file, sixty sites
   v1 · 2026-09-10
   
   Drop-in: <link rel="stylesheet" href="https://clinicalswipe.com/estate.css">
   It expects the markup vocabulary already used across the estate
   (.wrap, nav/.nlinks, .hero, .btn, .card, .h2, .label, .lead, footer) —
   so most pages inherit the upgrade without touching their HTML.
   
   Per-site accent: set --accent on :root. Nothing else needs to change.
     ClinicalSwipe  #7c3aed   SurgeonValue #0D7377   co-op.care  #10B981
     SolvingHealth  #3B82F6   HarnessHealth #4edea3
   ============================================================================ */

:root{
  /* --- brand accent (override per site) --- */
  --accent:        #7c3aed;
  --accent-hover:  #8b5cf6;
  --accent-ink:    #5b21b6;   /* accent as text on white — passes 4.5:1 */
  --accent-tint:   #F5F1FE;
  --accent-line:   color-mix(in srgb,var(--accent) 28%,transparent);
  --accent-soft:   color-mix(in srgb,var(--accent) 45%,#fff); /* accent on dark grounds */

  /* --- surface --- */
  --navy:      #1B2A4A;   /* headings, dark chrome */
  --navy-deep: #2A1E4A;   /* hero gradient end */
  --ink:       #1c1b1b;
  --body:      #39424f;   /* long-form body text — 9.8:1 on white */
  --muted:     #56607A;   /* secondary text — 6.4:1 on white */
  --faint:     #6B7488;   /* the lightest text permitted at =14px */
  --line:      #E2E5EC;
  --off:       #F8F9FB;
  --white:     #fff;

  /* --- semantic --- */
  --ok:      #15803D;  --ok-bg:    #EAF7EF;
  --warn:    #B45309;  --warn-bg:  #FBF1E3;
  --stop:    #B03A1A;  --stop-bg:  #FDF3EF;
  --note:    #1D4ED8;  --note-bg:  #E8F0FE;
  --neutral: #475569;  --neutral-bg:#EEF1F6;

  /* --- type --- */
  --font-display: 'Manrope','Inter',-apple-system,system-ui,sans-serif;
  --font-body:    'Inter',-apple-system,'Segoe UI',system-ui,sans-serif;
  --font-mono:    'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;

  --fs-hero:  clamp(30px,5vw,48px);
  --fs-h2:    clamp(24px,3.4vw,34px);
  --fs-h3:    17px;
  --fs-lead:  17px;
  --fs-body:  15px;
  --fs-sm:    13.5px;
  --fs-mono:  11px;

  /* --- shape & motion --- */
  --r-pill: 999px; --r-sm: 8px; --r-md: 10px; --r-lg: 12px; --r-xl: 14px; --r-2xl: 18px;
  --shadow-sm: 0 1px 2px rgba(20,30,50,.06);
  --shadow-md: 0 2px 10px rgba(20,30,50,.06);
  --shadow-lg: 0 18px 44px rgba(20,30,50,.12);
  --ease: cubic-bezier(.25,.46,.45,.94);
  --dur: .15s;

  --maxw: 1040px;
  --maxw-prose: 680px;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  font-family:var(--font-body);
  font-size:var(--fs-body);
  line-height:1.65;
  color:var(--ink);
  background:var(--white);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
h1,h2,h3,h4{font-family:var(--font-display);letter-spacing:-.02em;color:var(--navy);text-wrap:balance}
p{text-wrap:pretty}
img,svg{max-width:100%}
a{color:inherit;text-decoration:none}
a:not([class]){color:var(--accent-ink);text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px}
a:not([class]):hover{color:var(--accent)}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}
::selection{background:var(--accent-tint)}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.prose{max-width:var(--maxw-prose)}
section{padding:70px 0}
@media(max-width:640px){section{padding:52px 0}}

/* --- skip link: every site, no exceptions ------------------------------- */
.skip{position:absolute;left:-9999px;top:0;background:var(--accent);color:#fff;
  padding:12px 18px;border-radius:0 0 var(--r-md) 0;font-weight:700;z-index:200}
.skip:focus{left:0}

/* --- nav ---------------------------------------------------------------- */
nav{position:sticky;top:0;z-index:50;background:rgba(27,42,74,.97);
  backdrop-filter:blur(14px);border-bottom:1px solid rgba(255,255,255,.09)}
nav .wrap{display:flex;align-items:center;justify-content:space-between;min-height:58px;gap:16px}
.logo{font-family:var(--font-display);font-weight:800;font-size:17px;color:#fff;
  letter-spacing:-.02em;display:inline-flex;align-items:center;gap:8px}
.logo .mark{width:22px;height:22px;background:var(--accent);border-radius:6px;
  display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}
.nlinks{display:flex;align-items:center;gap:18px;white-space:nowrap}
.nlinks a{font-size:13.5px;font-weight:500;color:rgba(255,255,255,.78);transition:color var(--dur) var(--ease)}
.nlinks a:hover,.nlinks a.on{color:#fff}
.nlinks a.on{font-weight:700}
.nlinks .cta{background:var(--accent);color:#fff;font-weight:700;padding:8px 18px;border-radius:var(--r-sm)}
.nlinks .cta:hover{background:var(--accent-hover)}
/* collapse before wrapping — count your links, raise if you have 8+ */
@media(max-width:1040px){.nlinks a:not(.cta){display:none}}

/* --- hero --------------------------------------------------------------- */
.hero{background:
    radial-gradient(circle at 50% -10%, color-mix(in srgb,var(--accent) 22%, transparent), transparent 55%),
    linear-gradient(160deg,var(--navy) 0%,var(--navy-deep) 100%);
  padding:86px 0 74px;text-align:center}
.hero h1{font-size:var(--fs-hero);font-weight:800;color:#fff;line-height:1.08;margin-bottom:20px}
.hero h1 .a{color:color-mix(in srgb,var(--accent) 45%,#fff)}
.hero p{font-size:18px;color:rgba(255,255,255,.8);max-width:700px;margin:0 auto 32px;line-height:1.65}
.hero .eyebrow{display:inline-block;font-family:var(--font-mono);font-size:12px;font-weight:700;
  letter-spacing:.09em;text-transform:uppercase;color:#EDE9FE;
  background:color-mix(in srgb,var(--accent) 55%, transparent);
  border:1px solid rgba(255,255,255,.28);padding:5px 14px;border-radius:5px;margin-bottom:26px}
.hero .actions{display:flex;gap:13px;justify-content:center;flex-wrap:wrap}
.hero .fine{font-size:12.5px;color:rgba(255,255,255,.62);margin-top:16px}

/* --- buttons ------------------------------------------------------------ */
.btn{display:inline-block;font-family:var(--font-display);font-size:15px;font-weight:700;
  padding:14px 26px;border:none;border-radius:var(--r-md);cursor:pointer;
  transition:background var(--dur) var(--ease),border-color var(--dur) var(--ease)}
.btn.primary{background:var(--accent);color:#fff}
.btn.primary:hover{background:var(--accent-hover)}
.btn.ghost{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.42);color:#fff}
.btn.ghost:hover{background:rgba(255,255,255,.16)}
.btn.outline{border:1.5px solid var(--accent);color:var(--accent-ink);background:#fff}
.btn.outline:hover{background:var(--accent-tint)}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btn.block{display:block;width:100%;text-align:center}
/* hit targets: never below 44px on touch */
@media(pointer:coarse){.btn{min-height:44px}}

/* --- section headings --------------------------------------------------- */
.label{text-align:center;font-family:var(--font-mono);font-size:11.5px;font-weight:700;
  letter-spacing:.11em;text-transform:uppercase;color:var(--accent-ink);margin-bottom:12px}
.h2{text-align:center;font-size:var(--fs-h2);font-weight:800;margin-bottom:14px}
.lead{text-align:center;font-size:var(--fs-lead);color:var(--muted);
  max-width:var(--maxw-prose);margin:0 auto 38px;line-height:1.7}

/* --- cards & grids ------------------------------------------------------ */
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:18px}
.grid.tight{grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px}
.card{border:1px solid var(--line);border-radius:var(--r-lg);padding:24px;background:#fff;
  transition:border-color var(--dur) var(--ease),transform var(--dur) var(--ease)}
.card:hover{border-color:var(--accent);transform:translateY(-2px)}
.card h3{font-size:16.5px;font-weight:800;margin-bottom:8px}
.card p{font-size:14px;color:var(--muted)}
.card .note{margin-top:11px;font-size:13px;color:var(--body);line-height:1.6;
  border-left:3px solid var(--accent);padding-left:11px}
.card.feature{border-color:var(--accent);background:var(--accent-tint)}

/* --- steps -------------------------------------------------------------- */
.steps{max-width:800px;margin:0 auto}
.step{display:grid;grid-template-columns:46px 1fr auto;gap:18px;align-items:flex-start;
  padding:24px 0;border-bottom:1px solid var(--line)}
.step:last-child{border-bottom:none}
.step .n{width:40px;height:40px;background:var(--navy);border-radius:50%;color:#fff;
  display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-weight:800;font-size:15px}
.step h3{margin-bottom:5px}
.step p{font-size:14.5px;color:var(--muted);line-height:1.7}
.step .t{font-family:var(--font-mono);font-size:10.5px;font-weight:600;color:var(--accent-ink);
  background:var(--accent-tint);padding:4px 9px;border-radius:var(--r-pill);white-space:nowrap}
@media(max-width:620px){.step{grid-template-columns:40px 1fr}.step .t{grid-column:2;justify-self:start;margin-top:8px}}

/* --- outcome pills: the estate's shared vocabulary ---------------------- */
.pill{display:inline-block;font-family:var(--font-mono);font-size:9.5px;font-weight:700;
  letter-spacing:.06em;padding:4px 8px;border-radius:var(--r-pill)}
.pill.recorded{background:var(--neutral-bg);color:var(--neutral)}
.pill.noted   {background:var(--note-bg);color:var(--note)}
.pill.hold    {background:var(--warn-bg);color:var(--warn)}
.pill.no      {background:var(--stop-bg);color:var(--stop)}
.pill.live    {background:var(--ok-bg);color:var(--ok)}
.pill.next    {background:var(--accent-tint);color:var(--accent-ink)}
.pill.exp     {background:#F1F3F7;color:var(--muted)}

/* --- honest-status band: required on any page making a live claim ------- */
.status-band{background:var(--warn-bg);border:1px solid color-mix(in srgb,var(--warn) 30%,var(--line));
  color:#6b4310;border-radius:var(--r-md);padding:11px 15px;font-size:13px;font-weight:600;text-align:center}

/* --- tables ------------------------------------------------------------- */
.table{border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
.table .row{display:grid;grid-template-columns:1.1fr 1fr 1fr;border-bottom:1px solid var(--line)}
.table .row:last-child{border-bottom:none}
.table .row>div{padding:15px 18px;font-size:14px;line-height:1.6;color:var(--muted)}
.table .row>div:first-child{color:var(--navy);font-weight:700}
.table .row.head>div{background:var(--navy);color:#fff;font-family:var(--font-display);font-weight:800;font-size:13px}
@media(max-width:720px){.table .row{grid-template-columns:1fr}}

/* --- callout panels ----------------------------------------------------- */
.panel{background:var(--navy);border-radius:var(--r-xl);padding:36px 38px;color:rgba(255,255,255,.8)}
.panel h3{color:#fff;font-size:22px;font-weight:800;margin-bottom:12px}
.panel p{font-size:15px;line-height:1.75}
.panel p+p{margin-top:12px}
.panel .wl{font-family:var(--font-mono);font-size:11px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:rgba(255,255,255,.62);margin-bottom:12px}
@media(max-width:640px){.panel{padding:26px 22px}}

/* --- forms -------------------------------------------------------------- */
input,select,textarea{width:100%;font-family:inherit;font-size:16px;color:var(--ink);
  background:#fff;border:1.5px solid var(--line);border-radius:var(--r-lg);padding:13px 15px}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--accent)}
label{display:block;font-size:13.5px;font-weight:600;color:var(--muted);margin-bottom:6px}
.option{display:block;width:100%;text-align:left;background:#fff;border:1.5px solid var(--line);
  border-radius:var(--r-lg);padding:13px 15px;font-size:15px;color:var(--body);cursor:pointer;
  transition:border-color var(--dur) var(--ease),background var(--dur) var(--ease)}
.option:hover{border-color:var(--accent);background:var(--accent-tint)}
.option[aria-pressed="true"],.option.on{border-color:var(--accent);background:var(--accent-tint);font-weight:600;color:var(--navy)}

/* --- code / mono -------------------------------------------------------- */
code,.mono{font-family:var(--font-mono);font-size:13px}
.snippet{background:var(--navy);border-radius:var(--r-md);padding:18px 22px;
  font-family:var(--font-mono);font-size:13px;color:#c4b5fd;overflow-x:auto}

/* --- footer ------------------------------------------------------------- */
footer{background:var(--navy);padding:40px 0 26px;color:rgba(255,255,255,.7)}
footer .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:20px;align-items:center}
.fbrand{font-family:var(--font-display);font-weight:800;color:#fff;font-size:16px}
.fbrand span{display:block;font-family:var(--font-body);font-weight:400;font-size:12.5px;
  color:rgba(255,255,255,.62);margin-top:4px}
.flinks{display:flex;gap:18px;flex-wrap:wrap;align-items:center}
.flinks a{font-size:13px;color:rgba(255,255,255,.68)}
.flinks a:hover{color:#fff}
.fbot{border-top:1px solid rgba(255,255,255,.1);margin-top:26px;padding-top:18px;
  font-size:12px;color:rgba(255,255,255,.62);text-align:center;line-height:1.7}

/* --- motion & print ----------------------------------------------------- */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important}
  .card:hover{transform:none}
}
@media print{
  nav,.hero .actions,.btn{display:none}
  body{color:#000;background:#fff}
  .panel,footer{background:#fff;color:#000;border:1px solid #ccc}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:11px}
}