/* ClinicIQ Platform Package — OpenServ-style design system (light) */
:root{
  --canvas:#ffffff; --ink:#000000; --fog:#f5f5f5; --steel:#a6a6a6; --graphite:#4d4d4d;
  --blue:#5f79ff; --green:#01fe93;
  --blue-wash:rgba(95,121,255,.08); --green-wash:rgba(1,254,147,.12);
  --line:#ececec; --line-2:#e2e2e2;
  --font-ui:'OS Studio Grotesk', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-display:'OS Chronik', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --shadow-xl:rgba(0,0,0,.1) 0px 0px 48px 0px;
  --shadow-sm:rgba(0,0,0,.06) 0px 2px 18px 0px;
  --radius-card:16px; --radius-btn:12px; --radius-pill:100px; --radius-hero:40px;
  --maxw:1100px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--canvas); color:var(--ink);
  font-family:var(--font-ui); font-size:15px; line-height:1.5;
  -webkit-font-smoothing:antialiased; font-feature-settings:"cv03" on,"cv04" on,"cv09" on,"cv11" on;
}
a{color:var(--blue); text-decoration:none}
a:hover{text-decoration:underline}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 28px}

/* ---- top nav ---- */
.nav{position:sticky; top:0; z-index:50; backdrop-filter:blur(10px);
  background:#ffffffd9; border-bottom:1px solid var(--line)}
.nav .wrap{display:flex; align-items:center; gap:20px; min-height:62px; max-width:1240px}
.brand{display:flex; align-items:center; gap:9px; font-weight:400; font-size:15px; letter-spacing:-.01em;
  color:var(--ink); flex:none}
.brand:hover{text-decoration:none}
.brand .mark{width:26px; height:26px; border-radius:8px; background:var(--ink); color:#fff;
  display:grid; place-items:center; font-size:12px; font-weight:600}
.brand b{font-weight:600}
.nav .links{display:flex; align-items:center; gap:4px; margin-left:auto; min-width:0;
  overflow-x:auto; -ms-overflow-style:none; scrollbar-width:none; white-space:nowrap;
  -webkit-overflow-scrolling:touch; mask-image:linear-gradient(90deg,#000 92%,transparent)}
.nav .links::-webkit-scrollbar{display:none}
.nav .links a{color:var(--steel); font-size:13px; letter-spacing:.005em; padding:8px 11px;
  border-radius:9px; flex:none; transition:.12s}
.nav .links a:hover{color:var(--ink); background:var(--fog); text-decoration:none}
.nav .links a.active{color:var(--ink); background:var(--fog); font-weight:600;
  box-shadow:inset 0 -2px 0 var(--blue)}
.nav .cta{background:var(--blue) !important; color:#fff !important; padding:9px 15px;
  border-radius:var(--radius-btn); font-size:13px; margin-left:6px; box-shadow:none !important}
.nav .cta:hover{text-decoration:none; opacity:.92}
@media(max-width:560px){.brand span.full{display:none}}

/* ---- hero ---- */
.hero{padding:90px 0 56px; border-bottom:1px solid var(--line)}
.kicker{display:inline-flex; align-items:center; gap:8px; color:var(--blue); font-size:12px;
  letter-spacing:.08em; text-transform:uppercase; margin-bottom:22px}
.kicker .pip{width:7px; height:7px; border-radius:50%; background:var(--green)}
h1.display{font-family:var(--font-display); font-weight:300; font-size:clamp(40px,6vw,72px);
  line-height:.95; letter-spacing:-.02em; margin:0 0 22px}
.lede{font-size:18px; line-height:1.5; color:var(--graphite); max-width:680px}
.hero-actions{display:flex; gap:12px; flex-wrap:wrap; margin-top:34px}

/* ---- buttons ---- */
.btn{display:inline-flex; align-items:center; gap:9px; font-size:15px; padding:12px 24px;
  border-radius:var(--radius-btn); border:1px solid transparent; cursor:pointer; transition:.15s}
.btn:hover{text-decoration:none}
.btn-primary{background:var(--blue); color:#fff}
.btn-primary:hover{opacity:.92}
.btn-green{background:var(--green); color:var(--ink)}
.btn-ghost{background:rgba(244,244,244,.6); color:var(--ink); border-color:var(--line-2)}
.btn-ghost:hover{background:var(--fog)}
.btn-dark{background:rgba(0,0,0,.9); color:#fff; border-radius:var(--radius-pill)}

/* ---- sections ---- */
section{padding:64px 0; border-bottom:1px solid var(--line)}
section.tight{padding:44px 0}
.eyebrow{color:var(--blue); font-size:12px; letter-spacing:.08em; text-transform:uppercase; margin:0 0 12px}
h2{font-family:var(--font-display); font-weight:300; font-size:clamp(28px,3.6vw,40px);
  line-height:1; letter-spacing:-.017em; margin:0 0 16px}
h3{font-size:20px; line-height:1.1; letter-spacing:-.01em; margin:0 0 8px; font-weight:600}
h4{font-size:15px; margin:0 0 6px; font-weight:600}
p.section-lede{font-size:17px; color:var(--graphite); max-width:760px; margin:0 0 36px}
.muted{color:var(--steel)}
.sub{color:var(--graphite)}

/* ---- cards & grids ---- */
.grid{display:grid; gap:16px}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
@media(max-width:860px){.g2,.g3,.g4{grid-template-columns:1fr}}
.card{background:var(--fog); border-radius:var(--radius-card); padding:24px}
.card.elevated{background:#fff; box-shadow:var(--shadow-xl); border:1px solid var(--line)}
.card.outline{background:#fff; border:1px solid var(--line-2)}
.card p{margin:0; color:var(--graphite); font-size:14px}
.card h3{margin-bottom:6px}
.icn{width:38px; height:38px; border-radius:11px; display:grid; place-items:center; margin-bottom:14px;
  background:var(--blue-wash); color:var(--blue); font-size:18px}
.icn.green{background:var(--green-wash); color:#04a564}
.icn.ink{background:#f0f0f0; color:var(--ink)}

/* ---- status pills ---- */
.pill{display:inline-flex; align-items:center; gap:7px; font-size:12px; padding:5px 12px;
  border-radius:var(--radius-pill); border:1px solid var(--line-2); background:#fff; color:var(--graphite)}
.pill .dot{width:8px; height:8px; border-radius:50%}
.dot.live{background:var(--green); animation:pulse 1.8s infinite}
.dot.amber{background:#ffb020}
.dot.blue{background:var(--blue)}
@keyframes pulse{0%,100%{box-shadow:0 0 0 3px var(--green-wash)}50%{box-shadow:0 0 0 7px transparent}}
.badge{font-size:11px; font-weight:600; padding:3px 9px; border-radius:6px; white-space:nowrap; letter-spacing:.02em}
.badge.done{background:var(--green-wash); color:#04935a}
.badge.wip{background:rgba(255,176,32,.14); color:#a06a00}
.badge.next{background:var(--blue-wash); color:var(--blue)}

/* ---- tables ---- */
.tbl{width:100%; border-collapse:collapse; background:#fff; border:1px solid var(--line);
  border-radius:var(--radius-card); overflow:hidden}
.tbl th{text-align:left; font-size:11px; letter-spacing:.07em; text-transform:uppercase; color:var(--steel);
  background:var(--fog); padding:12px 18px; border-bottom:1px solid var(--line); font-weight:600}
.tbl td{padding:14px 18px; border-bottom:1px solid var(--line); font-size:14px; vertical-align:top}
.tbl tr:last-child td{border-bottom:none}
.tbl td .k{font-size:12px; color:var(--steel)}

/* ---- code ---- */
code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:13px;
  background:var(--fog); border:1px solid var(--line); border-radius:6px; padding:2px 7px; color:var(--graphite)}
pre{background:#0c0c10; color:#e8e8ea; border-radius:var(--radius-card); padding:20px 22px; overflow:auto;
  font-family:ui-monospace,Menlo,monospace; font-size:13px; line-height:1.6; margin:0}
pre .c{color:#6e7681} pre .g{color:var(--green)} pre .b{color:#8aa0ff} pre .y{color:#ffd56b}

/* ---- numbered steps ---- */
ol.steps{counter-reset:s; list-style:none; padding:0; margin:0; display:grid; gap:14px}
ol.steps li{counter-increment:s; position:relative; padding:20px 22px 20px 64px;
  background:#fff; border:1px solid var(--line-2); border-radius:var(--radius-card)}
ol.steps li::before{content:counter(s); position:absolute; left:20px; top:19px; width:30px; height:30px;
  border-radius:9px; background:var(--blue); color:#fff; font-weight:600; font-size:14px; display:grid; place-items:center}
ol.steps li b{display:block; margin-bottom:4px; font-size:15px}
ol.steps li span{color:var(--graphite); font-size:14px}

/* ---- flow diagram (CSS boxes + arrows) ---- */
.flow{display:flex; align-items:stretch; gap:0; flex-wrap:wrap; margin:8px 0}
.flow .node{flex:1; min-width:130px; background:#fff; border:1px solid var(--line-2); border-radius:14px;
  padding:16px 14px; text-align:center; position:relative}
.flow .node .t{font-size:14px; font-weight:600; margin-bottom:3px}
.flow .node .d{font-size:12px; color:var(--steel)}
.flow .arrow{display:grid; place-items:center; width:34px; color:var(--blue); font-size:20px; flex:none}
@media(max-width:760px){.flow{flex-direction:column}.flow .arrow{width:100%; height:26px; transform:rotate(90deg)}}
.flow .node.accent{border-color:var(--blue); box-shadow:0 0 0 3px var(--blue-wash)}
.flow .node.green{border-color:var(--green); box-shadow:0 0 0 3px var(--green-wash)}

/* swimlane / stack diagram */
.stack{display:grid; gap:10px; margin:8px 0}
.layer{display:grid; grid-template-columns:160px 1fr; gap:0; border:1px solid var(--line-2); border-radius:14px; overflow:hidden; background:#fff}
.layer .lab{background:var(--fog); padding:16px 18px; font-weight:600; font-size:13px; display:flex; align-items:center}
.layer .body{padding:14px 18px; display:flex; gap:8px; flex-wrap:wrap; align-items:center}
.tag{font-size:12px; padding:5px 11px; border-radius:8px; background:var(--blue-wash); color:var(--blue); border:1px solid rgba(95,121,255,.18)}
.tag.ink{background:#f2f2f2; color:var(--graphite); border-color:var(--line-2)}
.tag.green{background:var(--green-wash); color:#04935a; border-color:rgba(1,254,147,.3)}
@media(max-width:620px){.layer{grid-template-columns:1fr}}

/* callout */
.callout{background:var(--blue-wash); border:1px solid rgba(95,121,255,.2); border-left:3px solid var(--blue);
  border-radius:14px; padding:20px 22px; color:var(--graphite)}
.callout.green{background:var(--green-wash); border-color:rgba(1,254,147,.35); border-left-color:#04a564}
.callout b{color:var(--ink)}
.callout h3{margin-top:0}

/* key-value list */
.kv{display:grid; gap:0; border:1px solid var(--line); border-radius:var(--radius-card); overflow:hidden; background:#fff}
.kv .row{display:grid; grid-template-columns:230px 1fr; border-bottom:1px solid var(--line)}
.kv .row:last-child{border-bottom:none}
.kv .row .k{padding:13px 18px; background:var(--fog); font-size:13px; font-weight:600}
.kv .row .v{padding:13px 18px; font-size:14px; color:var(--graphite)}
@media(max-width:620px){.kv .row{grid-template-columns:1fr}}

ul.clean{list-style:none; padding:0; margin:0; display:grid; gap:10px}
ul.clean li{padding-left:26px; position:relative; color:var(--graphite); font-size:14px}
ul.clean li::before{content:"→"; position:absolute; left:0; color:var(--blue)}
ul.check li::before{content:"✓"; color:#04a564; font-weight:700}

.statgrid{display:grid; grid-template-columns:repeat(4,1fr); gap:16px}
@media(max-width:860px){.statgrid{grid-template-columns:repeat(2,1fr)}}
.stat{background:var(--fog); border-radius:var(--radius-card); padding:22px}
.stat .n{font-family:var(--font-display); font-weight:300; font-size:40px; line-height:1; letter-spacing:-.02em}
.stat .l{font-size:13px; color:var(--steel); margin-top:8px}
.stat .n.blue{color:var(--blue)} .stat .n.green{color:#04a564}

/* footer */
footer{padding:48px 0 70px; background:var(--fog)}
footer .wrap{display:flex; justify-content:space-between; gap:24px; flex-wrap:wrap}
footer .col h4{font-size:13px; margin-bottom:12px}
footer .col a{display:block; color:var(--steel); font-size:13px; margin-bottom:8px}
footer .col a:hover{color:var(--ink); text-decoration:none}
footer .fine{color:var(--steel); font-size:12px; margin-top:28px; width:100%; border-top:1px solid var(--line-2); padding-top:20px}

.crumbs{font-size:12px; color:var(--steel); margin-bottom:18px}
.crumbs a{color:var(--steel)}
.pagenav{display:flex; justify-content:space-between; gap:16px; margin-top:8px; flex-wrap:wrap}
.pagenav a{flex:1; min-width:220px; background:#fff; border:1px solid var(--line-2); border-radius:var(--radius-card);
  padding:18px 20px; color:var(--ink)}
.pagenav a:hover{text-decoration:none; box-shadow:var(--shadow-sm)}
.pagenav a .d{font-size:12px; color:var(--steel)} .pagenav a .t{font-size:16px; font-weight:600; margin-top:3px}
.pagenav a.next{text-align:right}

/* ---- mobile optimization ---- */
@media(max-width:760px){
  .wrap{padding:0 18px}
  .hero{padding:54px 0 38px}
  section{padding:44px 0}
  section.tight{padding:32px 0}
  h1.display{font-size:clamp(34px,9vw,46px)}
  .lede{font-size:16px}
  p.section-lede{font-size:15px; margin-bottom:26px}
  /* tables scroll horizontally instead of squashing */
  .tbl{display:block; overflow-x:auto; -webkit-overflow-scrolling:touch; border-radius:12px}
  .tbl thead,.tbl tbody,.tbl tr{display:table; width:100%; table-layout:fixed}
  .tbl th,.tbl td{white-space:normal; word-break:break-word}
  pre{font-size:12px; padding:16px 16px; border-radius:12px}
  .statgrid .stat{padding:18px}
  .stat .n{font-size:32px}
  ol.steps li{padding:16px 16px 16px 54px}
  ol.steps li::before{left:14px; top:15px}
  .card{padding:20px}
  .callout{padding:18px}
  .hero-actions .btn{width:100%; justify-content:center}
  .pagenav a{min-width:100%}
}
@media(max-width:430px){
  h1.display{font-size:32px; line-height:1}
  .nav .links a{padding:8px 9px; font-size:12px}
  .flow .node{min-width:100%}
}