@import url("https://fonts.googleapis.com/css2?family=Barlow:ital,wght@0,400;0,600;0,700;0,800&family=Barlow+Condensed:wght@600;700;800&display=swap");

:root {
  --ink: #10231f;
  --muted: #5b6e67;
  --paper: #f3f1e8;
  --surface: #fffef9;
  --line: #cdd8d2;
  --accent: #dfff46;
  --accent-ink: #08251d;
  --deep: #082c25;
  --success: #087753;
  --radius: 10px;
  --font-display: "Barlow Condensed", "Arial Narrow", sans-serif;
  --font-body: "Barlow", Tahoma, sans-serif;
}

.hero { position: relative; }
.hero::before { content: "SWIFT / 01"; position: absolute; right: 0; top: -26px; color: var(--muted); font: 800 11px var(--font-display); letter-spacing: .14em; }
.hero h1 { text-transform: uppercase; }
.hero h1 em { display: block; }
.purchase-section { border-top: 5px solid var(--deep); }
.network-option { border-radius: 4px; }
.network-option:has(input:checked) .network-symbol { color: var(--accent-ink); background: var(--accent); }
.channel-banner { border-radius: 4px; }
.primary-action { border-radius: 3px; text-transform: uppercase; letter-spacing: .04em; }
.metric-grid article:first-child { background: var(--deep); color: #fff; }
.metric-grid article:first-child span, .metric-grid article:first-child small { color: #bdd0c9; }