/*
  MedQuant Analytics – Styles
  Lightweight, accessible, responsive CSS with system fonts.
*/
:root{
  --bg: #ffffff;
  --text: #0b1220;
  --muted: #5b6474;
  --primary: #0b6e99; /* med blue */
  --accent: #00a6a6;  /* teal */
  --surface: #f4f7fb;
  --border: #e1e6ef;
  --shadow: 0 4px 12px rgba(10, 30, 60, 0.08);
  --radius: 12px;
  --maxw: 1120px;
}
@media (prefers-color-scheme: dark){
  :root{
    --bg: #0b1220;
    --text: #eef2f7;
    --muted: #b7c1d1;
    --surface: #121a2a;
    --border: #263147;
    --shadow: 0 6px 16px rgba(0,0,0,0.35);
  }
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, Apple Color Emoji, Segoe UI Emoji;
  line-height:1.6; color:var(--text); background:var(--bg);
}
a{color:var(--primary); text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%; height:auto;}
.container{width:100%; max-width:var(--maxw); margin-inline:auto; padding:0 1rem}
.skip-link{position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden}
.skip-link:focus{left:1rem; top:1rem; width:auto; height:auto; background:#fff; color:#000; padding:.5rem .75rem; border-radius:.5rem}

/* Header */
.site-header{position:sticky; top:0; z-index:10; background:var(--bg); border-bottom:1px solid var(--border)}
.header-inner{display:flex; align-items:center; justify-content:space-between; height:64px}
.brand{display:flex; align-items:center; gap:.5rem; color:inherit; font-weight:700}
.brand:hover{text-decoration:none}
.site-nav{display:flex; align-items:center; gap:1rem}
.site-nav a{padding:.5rem .25rem; border-radius:.5rem}
.site-nav .btn{margin-left:.25rem}
.nav-toggle{display:none; background:none; border:1px solid var(--border); border-radius:.5rem; padding:.4rem .6rem}
@media (max-width: 760px){
  .nav-toggle{display:block}
  .site-nav{position:absolute; right:1rem; top:64px; background:var(--bg); padding:.75rem; border:1px solid var(--border); border-radius:.75rem; box-shadow:var(--shadow); display:none; flex-direction:column; align-items:flex-start}
  .site-nav.open{display:flex}
}

/* Hero */
.hero{padding:4rem 0; background:linear-gradient(180deg, rgba(11,110,153,0.06), transparent)}
.hero-inner{display:grid; grid-template-columns: 1.1fr .9fr; gap:2rem; align-items:center}
.hero-copy h1{font-size: clamp(1.8rem, 1.2rem + 2vw, 3rem); line-height:1.2; margin:.2rem 0 1rem}
.hero-copy p{max-width: 60ch}
.hero-ctas{display:flex; gap:.75rem; margin-top:1rem}
.hero-art{justify-self:end}
@media (max-width: 960px){
  .hero-inner{grid-template-columns: 1fr}
  .hero-art{justify-self:start}
}

/* Sections */
.features{padding:2.5rem 0}
.features h2{margin-bottom:1rem}
.grid{display:grid; gap:1rem}
.grid.two{grid-template-columns: repeat(2, minmax(0,1fr))}
.grid.three{grid-template-columns: repeat(3, minmax(0,1fr))}
@media (max-width: 900px){
  .grid.two{grid-template-columns: 1fr}
  .grid.three{grid-template-columns: 1fr}
}
.card{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:1rem; box-shadow:var(--shadow)}
.panel{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:1rem}
.cta{padding:2rem 0}
.cta .panel{display:flex; align-items:center; justify-content:space-between; gap:1rem}
@media (max-width: 760px){ .cta .panel{flex-direction:column; align-items:flex-start}}

/* Prose */
.prose{padding:2rem 0}
.lead{font-size:1.125rem; color:var(--muted)}
.micro{font-size:.85rem}
.muted{color:var(--muted)}
.mt-sm{margin-top:.75rem}
.mt-lg{margin-top:2rem}

/* Buttons */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:.5rem; padding:.6rem 1rem; border-radius:.6rem; border:1px solid var(--border); background:var(--bg); color:var(--text); text-decoration:none; cursor:pointer}
.btn:hover{text-decoration:none; box-shadow:var(--shadow)}
.btn-primary{background:var(--primary); color:white; border-color:transparent}
.btn-primary:hover{filter:brightness(.95)}
.btn-ghost{background:transparent}

/* Forms */
.form label{display:block; margin:.75rem 0}
.form label span{display:block; font-weight:600; margin-bottom:.35rem}
input, textarea{width:100%; padding:.6rem .7rem; border-radius:.5rem; border:1px solid var(--border); background:var(--bg); color:var(--text)}
input:focus, textarea:focus{outline:2px solid color-mix(in oklab, var(--primary) 55%, transparent)}
.checkbox{display:flex; gap:.5rem; align-items:flex-start}
.form-actions{display:flex; align-items:center; gap:1rem; margin-top:.5rem}

/* Footer */
.site-footer{border-top:1px solid var(--border); margin-top:3rem}
.footer-inner{display:flex; gap:1rem; align-items:center; justify-content:space-between; padding:1.25rem 0}
.footer-nav{display:flex; gap:1rem}
.footer-brand{display:flex; align-items:center; gap:.6rem}
@media (max-width:760px){
  .footer-inner{flex-direction:column; align-items:flex-start}
}