/* Pact brand fonts */
@font-face { font-family: 'Manuka'; src: url('fonts/Manuka-Bold.otf') format('opentype'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Feature Deck'; src: url('fonts/FeatureDeck-Light.otf') format('opentype'); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: 'Sohne'; src: url('fonts/Sohne-Buch.otf') format('opentype'); font-weight: 400; font-style: normal; font-display: swap; }

:root {
  --font-display: 'Manuka', 'Impact', 'Haettenschweiler', 'Franklin Gothic Bold', sans-serif;
  --font-lead:    'Feature Deck', 'Fraunces', 'GT Sectra', Georgia, serif;
  --font-sans:    'Sohne', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
}

/* Baseline (Pact design system, adapted for the dark page) */
html, body {
  margin: 0;
  background: #0B070B; color: #FFF4E6;
  font-family: var(--font-sans); font-size: 20px;
  line-height: 1.5; font-weight: 400;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
html { scroll-behavior: smooth; }
h1, h2 { font-weight: 700; letter-spacing: 0; line-height: .84; text-wrap: balance; }
h3 { font-weight: 400; line-height: 1.2; }
h1, h2, h3, p { margin: 0; max-width: none; font-family: inherit; color: inherit; text-transform: none; }
p { font-size: 20px; line-height: 1.5; }
a { color: #FFF4E6; text-decoration: none; transition: color 160ms cubic-bezier(.22,.61,.36,1); }
a:hover { color: #FF8A57; }
::selection { background: #FF6A2B; color: #0B070B; }

/* Copy button hover (inline styles need !important to override) */
#copy-btn:hover { border-color: #FF8A57 !important; box-shadow: 0 0 70px rgba(255,140,80,.45) !important; }
#copy-btn:focus-visible { outline: 2px solid #FF8A57; outline-offset: 4px; }

/* Responsive switches (were JS-driven at 720px in the prototype) */
.nav-links { display: flex; }
.tracker-h { display: block; }
.tracker-v { display: none; }
.tracker-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; }
.tracker-node { flex-direction: column; align-items: flex-start; }

@media (max-width: 720px) {
  .nav-links { display: none; }
  .tracker-h { display: none; }
  .tracker-v { display: block; }
  .tracker-grid { grid-template-columns: 1fr; gap: 22px; }
  .tracker-node { flex-direction: row; align-items: center; }
}