:root {
  --navy: #001848;
  --graphite: #1a1d21;
  --graphite-2: #23272c;
  --surface: #f5f4f1;
  --surface-2: #ffffff;
  --cyan: #00c0c8;
  --coral: #ff6058;
  --steel: #3e5c76;
  --green: #2e7d4f;
  --line: #d8d5cf;
  --muted: #6b7076;
  --bg: var(--surface);
  --fg: var(--navy);
  --radius: 6px;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: "Segoe UI", system-ui, sans-serif;
  background: var(--bg);
  color: var(--fg);
  line-height: 1.5;
}
a { color: var(--steel); }
.topbar {
  background: var(--navy);
  color: #f5f4f1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 22px;
}
.topbar a { color: #f5f4f1; text-decoration: none; }
.topbar nav { display: flex; gap: 16px; }
.topbar nav a.on { border-bottom: 2px solid var(--cyan); }
.word { display: inline-flex; align-items: center; gap: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; font-size: 15px; }
.word span { color: #f5f4f1; }
.brand-logo { height: 22px; width: auto; display: block; }
.wrap { max-width: 68rem; margin: 0 auto; padding: 28px 18px 56px; }
.foot { max-width: 68rem; margin: 0 auto; padding: 0 18px 32px; color: var(--muted); font-size: 13px; }
.hero { max-width: 44rem; margin-bottom: 24px; }
.eyebrow { text-transform: uppercase; letter-spacing: .08em; font-size: 12px; font-weight: 700; color: var(--cyan); margin: 0 0 8px; }
h1 { font-size: 32px; line-height: 1.15; margin: 0 0 10px; font-weight: 700; }
h2 { font-size: 20px; margin: 32px 0 12px; }
h3 { font-size: 22px; margin: 0 0 6px; }
.lead { font-size: 18px; color: var(--muted); max-width: 62ch; }
.meta { color: var(--muted); }
.card {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 20px 22px;
  margin-bottom: 16px;
}
.form { max-width: 40rem; }
.form.wide { max-width: 52rem; }
textarea.tall { min-height: 140px; }
.edit-pkg { margin-top: 28px; padding-top: 8px; border-top: 1px solid var(--line); }
label { display: block; font-size: 13px; font-weight: 650; margin: 14px 0 6px; }
.opt { font-weight: 500; color: var(--muted); }
input, textarea {
  width: 100%; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius); font: inherit; background: #fff;
}
textarea { min-height: 88px; }
.row { display: flex; gap: 12px; flex-wrap: wrap; }
.row > * { flex: 1; min-width: 180px; }
.btn {
  display: inline-block; border: 0; border-radius: 8px; padding: 11px 16px; font: inherit; font-weight: 650;
  background: var(--navy); color: #fff; cursor: pointer; text-decoration: none; margin-top: 16px;
}
.btn.ghost { background: #fff; color: var(--fg); border: 1px solid var(--line); }
.hint, .muted { color: var(--muted); font-size: 14px; }
.wait { margin-top: 10px; font-weight: 650; }
.flash { background: #ecfdf3; border: 1px solid #bbf7d0; color: #14532d; padding: 10px 12px; border-radius: 8px; margin-bottom: 12px; }
.flash.err { background: #fef2f2; border-color: #fecaca; color: #7f1d1d; }
.gaps { width: 100%; border-collapse: collapse; background: #fff; border: 1px solid var(--line); }
.gaps th, .gaps td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: top; font-size: 14px; }
.gaps th { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); background: #faf9f6; }
.pill { display: inline-block; font-size: 12px; font-weight: 700; padding: 2px 8px; border-radius: 999px; margin: 0 6px 6px 0; }
.pill.ok { background: #dcfce7; color: var(--green); }
.pill.weak { background: #fef3c7; color: #92400e; }
.pill.missing { background: #fee2e2; color: #991b1b; }
.pkgs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; align-items: stretch; }
.pkg h3 { font-size: 22px; }
.pkg[data-pkg="platinum"] { border-color: var(--graphite); background: #fffdf8; }
.pkg ul { padding-left: 1.1rem; }
.pkg .result { margin-top: 12px; }
.tagline { font-weight: 650; margin: 0 0 10px; }
.notes { max-width: 70ch; }
.notes.dim { color: var(--muted); }
.next { margin-top: 28px; }
.row-links a { margin-right: 12px; white-space: nowrap; }
@media (max-width: 900px) {
  h1 { font-size: 26px; }
  .pkgs { grid-template-columns: 1fr; }
}
@media print {
  .topbar, .foot, .noprint, .flash { display: none !important; }
  body { background: #fff; }
  .wrap { max-width: none; padding: 0; }
  .pkg { break-inside: avoid; }
}