@import url("https://fonts.googleapis.com/css2?family=Crimson+Pro:opsz,wght@8..144,600;8..144,700&family=Public+Sans:wght@400;500;600;700;800&display=swap");

:root {
  --ink: #27231f;
  --muted: #726b63;
  --paper: #ede8df;
  --surface: #fffaf2;
  --line: #cfc5b8;
  --accent: #b85c38;
  --accent-ink: #fffaf2;
  --deep: #273a36;
  --success: #176553;
  --radius: 8px;
  --font-display: "Crimson Pro", Georgia, serif;
  --font-body: "Public Sans", Avenir, sans-serif;
}

.wordmark { font-family: var(--font-body); letter-spacing: .08em; }
.wordmark-mark { border-radius: 50%; color: #fff; background: var(--deep); font-family: var(--font-display); }
.site-header { border-bottom: 3px solid var(--accent); }
.hero { align-items: center; margin-top: 44px; }
.hero-copy { max-width: 760px; }
.hero h1 { max-width: 760px; font-weight: 600; font-size: clamp(55px, 8vw, 104px); line-height: .91; }
.hero h1 em { color: var(--accent); font-style: normal; }
.hero-note { border-radius: 8px; border-color: var(--deep); box-shadow: 9px 9px 0 rgba(39,58,54,.16); }
.channel-banner { background: var(--deep); color: #fff; border: 0; }
.channel-banner .eyebrow { color: #e8c0ad; }
.channel-banner a { background: var(--accent); color: #fff; }
.purchase-section { border-top: 5px solid var(--accent); box-shadow: 0 20px 58px rgba(39,35,31,.11); }
.network-option { border-radius: 8px; }
.network-option:has(input:checked) { background: #f5e8df; }
.primary-action { background: var(--accent); color: #fff; }
.order-total { background: var(--deep); color: #fff; }
.order-total span, .order-total small { color: #d7e1dd; }
.whatsapp-trigger { background: var(--deep); }
.console-sidebar { background: var(--deep); }
.metric-grid > :nth-child(2) { background: #f1ddd3; }

@media (max-width: 680px) {
  .hero { grid-template-columns: 1fr; }
  .hero-copy { padding-top: 24px; }
  .network-options { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}