:root {
  --blue-dark:   #1a3a6b;
  --blue-mid:    #2563a8;
  --blue-light:  #dce8f5;
  --blue-nav:    #142d54;
  --grey-page:   #f0f0f0;
  --grey-mid:    #888888;
  --grey-border: #cccccc;
  --orange:      #d46b08;
  --orange-hover:#b35a06;
  --white:       #ffffff;
  --text:        #222222;
}

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: 'Segoe UI', Arial, sans-serif;
  font-size: 14px;
  background: var(--grey-page);
  color: var(--text);
  line-height: 1.5;
}

/* ── Header ─────────────────────────────────────────────── */

header {
  background: var(--blue-dark);
  color: var(--white);
}

.header-top {
  padding: 24px 40px 16px;
  border-bottom: 3px solid var(--orange);
}

.header-top h1 {
  font-size: 30px;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
}

.header-top .tagline {
  color: #a8c4e0;
  font-size: 12px;
  margin-top: 4px;
  letter-spacing: 0.5px;
}

/* ── Nav ─────────────────────────────────────────────────── */

nav {
  background: var(--blue-nav);
  padding: 0 40px;
  display: flex;
}

nav a {
  color: #c8d8ed;
  text-decoration: none;
  padding: 11px 20px;
  font-size: 13px;
  display: block;
  border-right: 1px solid #1f3d6e;
}

nav a:hover,
nav a:focus {
  background: var(--orange);
  color: var(--white);
  outline: none;
}

/* ── Main ────────────────────────────────────────────────── */

main {
  max-width: 1100px;
  margin: 0 auto;
  padding: 32px 24px 48px;
}

/* ── About box ───────────────────────────────────────────── */

.about-box {
  background: var(--white);
  border: 1px solid var(--grey-border);
  border-left: 4px solid var(--orange);
  padding: 24px 28px;
  margin-bottom: 40px;
}

.about-box h2 {
  font-size: 13px;
  color: var(--blue-dark);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 10px;
}

.about-box p {
  color: var(--grey-mid);
  font-style: italic;
  font-size: 13px;
}

/* ── Product sections ────────────────────────────────────── */

.product-section {
  margin-bottom: 44px;
}

.product-header {
  background: var(--blue-dark);
  color: var(--white);
  padding: 12px 20px;
  display: flex;
  align-items: baseline;
  gap: 16px;
}

.product-header h2 {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 1px;
}

.product-header .product-desc {
  font-size: 12px;
  color: #a8c4e0;
}

/* ── Table ───────────────────────────────────────────────── */

.table-wrap {
  background: var(--white);
  border: 1px solid var(--grey-border);
  border-top: none;
  overflow-x: auto;
}

table {
  width: 100%;
  border-collapse: collapse;
}

thead th {
  background: var(--blue-light);
  color: var(--blue-dark);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 10px 14px;
  text-align: left;
  border-bottom: 2px solid var(--grey-border);
}

tbody tr {
  border-bottom: 1px solid #e8e8e8;
}

tbody tr:last-child {
  border-bottom: none;
}

tbody td {
  padding: 10px 14px;
  font-size: 13px;
  vertical-align: middle;
}

/* Current/latest row */
tr.current {
  background: #fffaf4;
}

tr.current td {
  font-weight: 500;
}

tr.current:hover {
  background: #fff5e8;
}

/* Archived rows */
tr.archived td {
  color: var(--grey-mid);
}

tr.archived:hover {
  background: inherit;
}

/* Empty state */
td.empty-row {
  text-align: center;
  color: var(--grey-mid);
  font-style: italic;
  padding: 24px 14px;
}

/* ── Badges & download controls ──────────────────────────── */

.version-badge {
  display: inline-block;
  background: var(--orange);
  color: var(--white);
  font-size: 10px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 3px;
  letter-spacing: 0.3px;
  margin-left: 6px;
  vertical-align: middle;
}

.dl-link {
  display: inline-block;
  background: var(--orange);
  color: var(--white);
  text-decoration: none;
  padding: 5px 14px;
  font-size: 12px;
  font-weight: 700;
  border-radius: 3px;
}

.dl-link:hover,
.dl-link:focus {
  background: var(--orange-hover);
  outline: none;
}

.dl-archived {
  color: var(--grey-mid);
  font-size: 12px;
  font-style: italic;
}

/* ── Footer ──────────────────────────────────────────────── */

footer {
  background: var(--blue-dark);
  color: #7a9cc0;
  text-align: center;
  padding: 18px 40px;
  font-size: 12px;
}