:root{
  --bg:#f6f8fb;
  --panel:#ffffff;
  --panel2:#f1f5f9;
  --text:#0f172a;
  --muted:#475569;
  --line:rgba(15,23,42,.12);
  --accent:#2563eb;
  --accent2:#06b6d4;
  --shadow: 0 12px 28px rgba(15,23,42,.08);
  --radius: 16px;
  --radius2: 22px;
  --max: 1120px;
}
*{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";
  background: linear-gradient(180deg, #ffffff 0%, var(--bg) 55%);
  color:var(--text);
  line-height:1.6;
}
a{color:inherit; text-decoration:none}
a:hover{opacity:.92}
.container{max-width:var(--max); margin:0 auto; padding:0 18px}
img{max-width:100%; height:auto}
.skip-link{position:absolute; left:-10000px; top:auto; width:1px; height:1px; overflow:hidden;}
.skip-link:focus{left:18px; top:12px; width:auto; height:auto; padding:10px 12px; z-index:999; background:var(--text); color:white; border-radius:12px; font-weight:800;}
.site-header{position:sticky; top:0; z-index:20; background: rgba(255,255,255,.86); backdrop-filter: blur(10px); border-bottom:1px solid var(--line);}
.header-row{display:flex; align-items:center; justify-content:space-between; padding:14px 0;}
.brand{display:flex; align-items:center; gap:10px; font-weight:900; letter-spacing:.2px}
.brand-mark{width:18px; height:18px; display:inline-grid; place-items:center; border:1px solid var(--line); background: linear-gradient(180deg, rgba(37,99,235,.22), rgba(6,182,212,.14)); border-radius:6px;}
.nav{display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.nav a{padding:8px 10px; border-radius:12px; color:var(--muted);}
.nav a.active{color:var(--text); background: rgba(37,99,235,.10)}
.nav .btn{margin-left:4px}
.hero{padding:54px 0 22px}
.hero-grid{display:grid; grid-template-columns: 1.1fr .9fr; gap:18px; align-items:center;}
.hero h1{font-size: clamp(34px, 4.2vw, 56px); line-height:1.05; margin:0 0 14px}
.lead{color:var(--muted); font-size: 1.1rem; max-width: 70ch}
.hero-actions{display:flex; gap:12px; flex-wrap:wrap; margin:18px 0 18px}
.hero-media{border:1px solid var(--line); border-radius: var(--radius2); overflow:hidden; background: white; box-shadow: var(--shadow);}
.hero-media img{display:block; width:100%}
.kpi-row{display:grid; grid-template-columns: repeat(12, 1fr); gap:12px; margin-top:16px}
.kpi{grid-column: span 4; border:1px solid var(--line); border-radius: var(--radius2); background: rgba(255,255,255,.7); padding:14px; box-shadow: var(--shadow);}
.kpi .k{color:var(--muted); font-size:.9rem}
.kpi .v{font-weight:900; font-size:1.15rem; margin-top:4px}
.search-card{margin-top:18px; background: white; border:1px solid var(--line); border-radius: var(--radius2); padding:16px; box-shadow: var(--shadow); max-width: 760px;}
.search-card input{width:min(540px, 100%); background: #f8fafc; border:1px solid var(--line); color:var(--text); border-radius: 14px; padding:12px 12px; outline:none;}
.search-card button{margin-left:8px}
.micro{color:var(--muted); font-size:.92rem; margin:10px 0 0}
.disclosure{color:var(--muted); font-size:.9rem; margin-top:16px; max-width: 90ch}
.section{padding:22px 0}
.section-head h2{margin:0 0 8px}
.section-head p{margin:0; color:var(--muted)}
.grid{display:grid; grid-template-columns: repeat(12, 1fr); gap:14px; margin-top:14px;}
.card{grid-column: span 6; background: white; border:1px solid var(--line); border-radius: var(--radius2); padding:16px; box-shadow: var(--shadow);}
.card h3{margin:0 0 6px}
.card p{margin:0; color:var(--muted)}
.chip{display:inline-flex; margin-top:12px; padding:6px 10px; background: rgba(37,99,235,.10); border:1px solid rgba(37,99,235,.18); border-radius: 999px; font-size:.85rem; color: #1d4ed8;}
.list{display:flex; flex-direction:column; gap:12px; margin-top:14px}
.item{display:grid; grid-template-columns: 180px 1fr; gap:14px; background: white; border:1px solid var(--line); border-radius: var(--radius2); padding:14px; box-shadow: var(--shadow);}
.item h3{margin:0 0 6px}
.item p{margin:0; color:var(--muted)}
.item .meta{margin-top:10px; display:flex; gap:10px; flex-wrap:wrap}
.thumb{border:1px solid var(--line); border-radius: 16px; overflow:hidden; background:#f8fafc;}
.thumb img{display:block; width:100%; height:100%; object-fit:cover}
.badge{font-size:.82rem; padding:5px 10px; border-radius: 999px; background: rgba(2,6,23,.04); border:1px solid var(--line); color:var(--muted);}
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; background: linear-gradient(90deg, var(--accent), var(--accent2)); color:white; border:1px solid rgba(2,6,23,.10); padding:11px 14px; border-radius: 14px; font-weight:900; cursor:pointer;}
.btn:hover{transform: translateY(-1px)}
.btn:active{transform: translateY(0px)}
.btn-ghost{background: white; border: 1px solid var(--line); color: var(--text);}
.btn-sm{padding:8px 10px; border-radius: 12px; font-size:.95rem}
.page-head{padding:10px 0 8px}
.search-row{display:flex; gap:10px; margin-top:14px; flex-wrap:wrap}
.search-row input{width:min(540px, 100%); background: #f8fafc; border:1px solid var(--line); color:var(--text); border-radius: 14px; padding:12px 12px; outline:none;}
.two-col{display:grid; grid-template-columns: 300px 1fr; gap:16px; margin-top:18px;}
.sidebar{position: sticky; top: 86px; align-self:start; background: white; border:1px solid var(--line); border-radius: var(--radius2); padding:14px; box-shadow: var(--shadow);}
.h6{font-size: .95rem; color: var(--muted); margin: 0 0 8px}
.toc{margin:0; padding-left:18px; color:var(--muted)}
.toc li{margin:6px 0}
.note{margin-top:14px; padding:12px; border-radius: 16px; border:1px solid var(--line); background: rgba(2,6,23,.02);}
.pill{display:inline-flex; align-items:center; gap:8px; padding:7px 10px; border-radius:999px; border:1px solid var(--line); background: rgba(2,6,23,.02); color:var(--muted); font-size:.88rem;}
.dot{width:8px; height:8px; border-radius:999px; display:inline-block; background: rgba(2,6,23,.25)}
.dot.good{background: #16a34a}
.dot.warn{background: #f59e0b}
.dot.bad{background: #ef4444}
.prose{background: white; border:1px solid var(--line); border-radius: var(--radius2); padding:18px; box-shadow: var(--shadow);}
.prose p, .prose li{color:var(--muted)}
.prose h2{margin-top:22px}
.prose h3{margin-top:18px}
.prose a{color: var(--accent); text-decoration:underline; text-decoration-thickness: 2px; text-underline-offset: 3px}
.divider{border:none; border-top:1px solid var(--line); margin:18px 0}
.callout{border:1px solid var(--line); border-radius: var(--radius2); padding:14px 16px; background: rgba(2,6,23,.02);}
.callout.good{border-color: rgba(22,163,74,.25)}
.callout.warn{border-color: rgba(245,158,11,.25)}
.callout.bad{border-color: rgba(239,68,68,.25)}
.callout .t{font-weight:900; margin-bottom:6px}
.cols{display:grid; grid-template-columns: repeat(12, 1fr); gap:12px;}
.col-6{grid-column: span 6}
.col-12{grid-column: span 12}
.table{width:100%; border-collapse: collapse; overflow:hidden; border-radius: 16px; border:1px solid var(--line);}
.table th, .table td{padding:10px 10px; border-bottom:1px solid var(--line); text-align:left; vertical-align:top;}
.table th{color:var(--muted); font-size:.9rem; font-weight:900; background: rgba(2,6,23,.02)}
.table tr:last-child td{border-bottom:none}
.post-hero{padding:16px 0 4px}
.post-title{font-size: clamp(28px, 3.2vw, 44px); line-height:1.1; margin: 10px 0 10px;}
.post-meta{display:flex; gap:10px; flex-wrap:wrap; color:var(--muted); font-size:.92rem}
.post-image{margin-top: 14px; border:1px solid var(--line); border-radius: var(--radius2); overflow:hidden; box-shadow: var(--shadow);}
.post-image img{display:block; width:100%}
.breadcrumbs{color: var(--muted); font-size:.92rem}
.breadcrumbs a{color:inherit; text-decoration:underline; text-underline-offset:3px}
.cta{display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; background: white; border:1px solid var(--line); border-radius: var(--radius2); padding:16px; box-shadow: var(--shadow);}
.cta-form{display:flex; gap:10px; flex-wrap:wrap}
.cta-form input{width:min(320px, 100%); background: #f8fafc; border:1px solid var(--line); color:var(--text); border-radius: 14px; padding:12px 12px; outline:none;}
.site-footer{border-top:1px solid var(--line); margin-top:34px; padding:22px 0}
.footer-row{display:flex; justify-content:space-between; align-items:flex-start; gap:14px; flex-wrap:wrap}
.footer-links{display:flex; gap:12px; flex-wrap:wrap; color:var(--muted)}
.fineprint{padding-top:10px}
.sr-only{position:absolute; left:-10000px; width:1px; height:1px; overflow:hidden}
form label{display:block; margin:10px 0; color:var(--muted); font-weight:700}
input, textarea{width:100%; background:#f8fafc; border:1px solid var(--line); border-radius: 14px; padding:12px; margin-top:6px; font: inherit;}
textarea{resize: vertical}
@media (max-width: 980px){
  .card{grid-column: span 12}
  .two-col{grid-template-columns: 1fr}
  .sidebar{position:relative; top:auto}
  .kpi{grid-column: span 12}
  .col-6{grid-column: span 12}
  .hero-grid{grid-template-columns: 1fr}
  .item{grid-template-columns: 1fr}
}

/* v4 additions */
.split{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:14px;
  margin-top:14px;
}
.panel{
  background:white;
  border:1px solid var(--line);
  border-radius: var(--radius2);
  padding:16px;
  box-shadow: var(--shadow);
}
.feature-grid{
  display:grid;
  grid-template-columns: repeat(12, 1fr);
  gap:14px;
  margin-top:14px;
}
.feature{
  grid-column: span 4;
  background:white;
  border:1px solid var(--line);
  border-radius: var(--radius2);
  padding:16px;
  box-shadow: var(--shadow);
}
.feature h3{margin:0 0 6px}
.feature p{margin:0; color:var(--muted)}
.kicker{
  display:inline-flex;
  padding:6px 10px;
  border-radius:999px;
  background: rgba(37,99,235,.10);
  border:1px solid rgba(37,99,235,.18);
  color:#1d4ed8;
  font-weight:800;
  font-size:.82rem;
}
@media (max-width: 980px){
  .split{grid-template-columns: 1fr}
  .feature{grid-column: span 12}
}