/* CPG Canary — marketing site styles.
 * The page markup carries the design's exact inline styles (from the Claude
 * Design handoff). This file holds the global base, the one keyframe the
 * animations reference, accessibility niceties, and responsive overrides.
 * Responsive rules target the design's fixed inline grid strings via
 * [style*="…"] so the generated markup never has to be edited. */

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: 76px; }
body { background: #0a0a0a; -webkit-font-smoothing: antialiased; font-family: 'Inter', sans-serif; overflow-x: hidden; }
img, svg { max-width: 100%; }

@keyframes pulse-gold { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }

/* FAQ <details> — hide the default marker (matches the design's +/− chrome) */
details > summary { list-style: none; }
details > summary::-webkit-details-marker { display: none; }

/* keyboard focus — gold ring, never on mouse */
a:focus-visible, button:focus-visible, summary:focus-visible {
  outline: 2px solid #e8b931;
  outline-offset: 3px;
  border-radius: 4px;
}

/* skip-to-content — off-screen until focused */
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: #e8b931; color: #1a1500;
  font-family: 'Inter', sans-serif; font-weight: 600; font-size: 0.95rem;
  padding: 10px 16px; border-radius: 0 0 8px 0; text-decoration: none;
}
.skip-link:focus { left: 0; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* ---------- Tablet / mobile ---------- */
@media (max-width: 860px) {
  /* multi-column feature/source grids → single column */
  [style*="grid-template-columns:repeat(3,1fr)"] { grid-template-columns: 1fr !important; }
  [style*="grid-template-columns:1fr 1fr"] { grid-template-columns: 1fr !important; }
  /* pricing: stack price rail above the feature list */
  [style*="grid-template-columns:340px 1fr"] { grid-template-columns: 1fr !important; }
  [style*="grid-template-columns:340px 1fr"] > div:first-of-type { border-right: none !important; border-bottom: 1px solid #23232a !important; }
}

@media (max-width: 760px) {
  /* hide the center nav links; keep logo + log in + Start free trial */
  header nav { display: none !important; }
  /* tighten the big section rhythm + gutters */
  [style*="padding:104px 0"] { padding: 64px 0 !important; }
  [style*="padding:120px 0 96px"] { padding: 84px 0 60px !important; }
  [style*="padding:110px 0 90px"] { padding: 72px 0 56px !important; }
  [style*="padding:0 32px"] { padding: 0 20px !important; }
  /* analysis report window: drop the 240px nav tree, show just the document */
  [style*="grid-template-columns:240px 1fr"] { grid-template-columns: 1fr !important; }
  [style*="grid-template-columns:240px 1fr"] > div:first-child { display: none !important; }
}

@media (max-width: 480px) {
  /* trim the nav action gap so the CTA never clips on narrow phones */
  header [style*="gap:18px"] { gap: 12px !important; }
}