:root{
  --brand-name:"Aerometrics Buyers Guide";
  --brand-colour:#1e66ff;
  --brand-colour-2:#0f1b2d;

  --text:#e9edf3; --muted:#aab6c6;
  --bg:#0f141b;
  --card:#171e28; --card-soft:#1e2733; --border:#283142;

  --green:#1fc16b; --amber:#f4b73f; --red:#e05252;
  --green-soft: color-mix(in srgb, var(--green) 18%, transparent);
  --amber-soft: color-mix(in srgb, var(--amber) 18%, transparent);
  --red-soft: color-mix(in srgb, var(--red) 18%, transparent);

  --focus:#8fb9ff; --radius:12px;
  --shadow: 0 1px 2px rgba(0,0,0,.35), 0 10px 24px rgba(0,0,0,.35);

  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --sans: system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Apple Color Emoji", "Segoe UI Emoji";
}

/* Optional CloudVisual brand
:root{ --brand-name:"CloudVisual Buyers Guide"; --brand-colour:#111827; --brand-colour-2:#2c3e50; }
*/

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; font-family:var(--sans); color:var(--text); line-height:1.5;
  background: radial-gradient(1100px 700px at 18% -10%, #253044 0%, var(--bg) 42%);
}

/* Header */
header.site{position:sticky;top:0;z-index:10;
  backdrop-filter:saturate(140%) blur(8px);
  background: color-mix(in srgb, #0b111b 80%, transparent);
  border-bottom:1px solid var(--border);
}
.wrap{max-width:1200px;margin:0 auto;padding:18px 20px}
.mast{display:grid;grid-template-columns:1fr auto;gap:16px;align-items:center}
.brand{display:flex;gap:14px;align-items:center}
.brand-logo{width:40px;height:40px;border-radius:10px;
  background:linear-gradient(135deg,var(--brand-colour),var(--brand-colour-2));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.22),0 6px 18px rgba(0,0,0,.35);
}
.brand h1{margin:0;font-size:22px}
.brand small{color:var(--muted);display:block;font-size:13px}

.toolbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.pill{border:1px solid var(--border);background:#0f1520;
  padding:6px 12px;border-radius:999px;font-size:13px;color:#d3d9e3;cursor:pointer}
.pill[aria-pressed="true"]{border-color:color-mix(in srgb, var(--brand-colour) 45%, var(--border));
  background: color-mix(in srgb, var(--brand-colour) 18%, #0f1520)}
.legend{display:flex;gap:14px;align-items:center;color:var(--muted);font-size:13px}
.dot{width:10px;height:10px;border-radius:50%;display:inline-block;vertical-align:-1px;margin-right:6px}
.dot.green{background:var(--green)}
.dot.amber{background:var(--amber)}
.dot.red{background:var(--red)}

.search{
  display:flex; align-items:center; gap:8px;
  background:#0f1520; border:1px solid var(--border); border-radius:999px; padding:6px 10px; color:#d3d9e3;
}
.search input{background:transparent;border:0;outline:0;color:#d3d9e3;min-width:190px}

/* Grid */
main{padding:12px 0 60px}
.grid{
  display:grid; gap:16px;
  grid-template-columns: repeat(12, 1fr);
}
@media (max-width:1200px){.grid{grid-template-columns:repeat(8,1fr)}}
@media (max-width:820px){.grid{grid-template-columns:repeat(4,1fr)}}

/* Two-column cards */
.card{
  grid-column: span 6; /* two across on desktop */
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}
@media (max-width:820px){ .card{ grid-column: span 4 } }

/* media + content split */
.card__inner{
  display:grid;
  grid-template-columns: 180px 1fr; /* tighter media area so two fit nicely */
}
@media (max-width:820px){ .card__inner{ grid-template-columns:1fr } }

.card__media{
  background: var(--card-soft);
  min-height: 170px;
  display:flex; align-items:center; justify-content:center;
  border-right:1px solid var(--border);
}
@media (max-width:820px){ .card__media{ border-right:0; border-bottom:1px solid var(--border) } }

.card__thumb{
  max-width: 88%; max-height: 150px; border-radius: 8px;
  box-shadow: 0 8px 18px rgba(0,0,0,.35);
}
.card__fallback{
  width:120px;height:120px;border-radius:14px;
  background:linear-gradient(145deg,#283447,#1a2231);
  color:#c7d3e5; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:16px;
  border:1px solid var(--border);
}

.card__body{ padding:12px 14px 14px 14px; }
.head{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center;margin-bottom:6px}
.title{font-weight:750;letter-spacing:.2px;font-size:18px}
.meta{color:var(--muted);font-size:12px}

.statuschip{font-size:12px; padding:3px 9px; border-radius:999px; font-weight:700; border:1px solid transparent; margin-right:6px}
.statuschip.green{color:var(--green); background:var(--green-soft); border-color: color-mix(in srgb, var(--green) 40%, transparent)}
.statuschip.amber{color:#8a5a00; background:var(--amber-soft); border-color: color-mix(in srgb, var(--amber) 40%, transparent)}
.statuschip.red{color:#7a1b1b; background:var(--red-soft); border-color: color-mix(in srgb, var(--red) 40%, transparent)}
.badge{font-size:11px;padding:3px 8px;border-radius:999px;border:1px solid var(--border);color:var(--muted);background:#101724}

.blurb{color:#d8e1ee; margin:4px 0 8px; font-size:13px}

/* labelled bars */
.progress{display:grid; gap:8px}
.pitem{display:grid; grid-template-columns: 160px 1fr 48px; gap:10px; align-items:center}
.plabel{color:#c9d3e4; font-size:13px}
.pval{font-variant-numeric: tabular-nums; text-align:right; color:#c9d3e4; font-size:12px}
.bar{height:8px; background:#0f1520; border:1px solid var(--border); border-radius:999px; overflow:hidden; position:relative}
.fill{height:100%; width:0%; background: linear-gradient(90deg, #3e92ff, var(--brand-colour));}

.tags{display:flex; gap:6px; flex-wrap:wrap; margin-top:8px}
.tag{font-size:11px;padding:3px 8px;border:1px solid var(--border);border-radius:999px;color:#aab6c6;background:#101724}

.card__foot{ margin-top:10px; display:flex; gap:10px; align-items:center; color:#aab6c6; font-size:12px }
.card__foot a{ color:#a7c7ff; text-decoration:none }
.card__foot a:hover{ text-decoration:underline }

.kbd{font-family:var(--mono);background:#0f1520;padding:2px 6px;border-radius:6px;border:1px solid var(--border);color:#cbd5e1}

/* Panels under grid */
.panel{margin-top:24px;padding:16px;border:1px solid var(--border);border-radius:12px;background:var(--card);box-shadow:var(--shadow)}
.panel h2{margin:0 0 8px}
.panel ul{margin:0;padding-left:18px}
.panel .small{font-size:12px;color:var(--muted)}