:root {
  --bg: #0c1118;
  --surface: #151d28;
  --surface2: #1c2736;
  --border: #2a3848;
  --text: #e8eef4;
  --muted: #8fa3b8;
  --accent: #3d9ee8;
  --gold: #c9a227;
  --green: #3cb87a;
  --radius: 12px;
  --font: "Segoe UI", system-ui, sans-serif;
}

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

body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
}

.hero {
  background: linear-gradient(135deg, #0f1a28, #1a2d42);
  border-bottom: 1px solid var(--border);
  padding: 2rem 1.5rem;
  text-align: center;
}

.hero h1 { font-size: 1.75rem; margin-bottom: 0.5rem; }
.hero .subtitle { color: var(--muted); max-width: 720px; margin: 0.5rem auto; font-size: 0.95rem; }
.hero a { color: var(--accent); }

.page { max-width: 900px; margin: 0 auto; padding: 2rem 1.5rem 4rem; }
.page h2 { font-size: 1.2rem; margin: 2rem 0 0.75rem; color: var(--gold); }
.lead { color: var(--muted); margin-bottom: 1rem; font-size: 0.95rem; }

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.88rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  margin-bottom: 1rem;
}

th, td { padding: 0.65rem 0.85rem; border-bottom: 1px solid var(--border); text-align: left; }
th { background: var(--surface2); color: var(--muted); font-size: 0.78rem; text-transform: uppercase; }
.total-row td { font-weight: 700; color: var(--gold); background: var(--surface2); }

.checklist { list-style: none; }
.checklist li {
  padding: 0.5rem 0 0.5rem 1.5rem;
  position: relative;
  color: var(--muted);
  border-bottom: 1px solid var(--border);
}
.checklist li::before { content: "•"; position: absolute; left: 0; color: var(--accent); }