@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=Lora:wght@400;500;600;700&family=Playfair+Display:wght@700;800;900&display=swap');

:root {
  --cw-ink: #121c18;
  --cw-muted: #53635d;
  --cw-paper: #f8f4ea;
  --cw-panel: #fffdf8;
  --cw-line: #b9c6bd;
  --cw-rule: #17211d;
  --cw-green: #174c38;
  --cw-green-2: #23684d;
  --cw-gold: #b66f21;
  --cw-gold-soft: #f4e2bc;
  --cw-blue: #1f617d;
  --cw-red: #a63e33;
  --cw-radius: 6px;
  --cw-hard-shadow: 5px 5px 0 #17211d;
}

html {
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

body {
  background-color: var(--cw-paper);
  background-image:
    radial-gradient(rgba(23, 33, 29, .055) 1px, transparent 1px),
    linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,0) 220px);
  background-size: 6px 6px, 100% 100%;
  color: var(--cw-ink);
  font-family: Inter, Outfit, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  overflow-x: hidden;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

img,
svg,
canvas,
video {
  max-width: 100%;
}

a {
  text-underline-offset: 3px;
  text-decoration-thickness: 1.5px;
}

a:hover {
  color: var(--cw-green);
}

.bar,
.cover,
.hero,
.cta-band,
.contact-band,
.mail-head,
.em-head,
.email-mock-header {
  background-image: linear-gradient(135deg, rgba(255,255,255,.06), transparent 40%);
}

.nav-wrap {
  border-bottom: 2px solid rgba(23, 33, 29, .88) !important;
  background: rgba(248, 244, 234, .94) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.8) inset;
}

.nav,
.wrap,
.bar-inner,
.footer-inner {
  max-width: 1220px !important;
}

.hero,
.hero-copy,
.wrap,
.nav,
.bar-inner,
main,
section {
  min-width: 0;
}

.site-orbs {
  display: none !important;
}

.hero-copy > *,
.hero aside {
  animation: none !important;
  opacity: 1 !important;
}

.brand strong,
.footer-brand,
.mark {
  letter-spacing: -.01em;
}

.brand strong {
  font-family: "Playfair Display", Georgia, serif;
  font-size: 19px !important;
  font-weight: 900 !important;
}

.brand span {
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.mark {
  border: 1.5px solid var(--cw-rule);
  border-radius: 4px !important;
  box-shadow: 3px 3px 0 rgba(23, 33, 29, .18);
}

h1,
.hero h1,
.cover h1,
.page-hero h1 {
  font-family: "Playfair Display", Georgia, serif !important;
  font-weight: 900 !important;
  letter-spacing: -.045em !important;
  line-height: .94 !important;
}

h2,
.section-title,
.mail-head h2,
.em-head h2 {
  font-family: "Playfair Display", Georgia, serif !important;
  letter-spacing: -.025em;
}

.lede,
.hero p,
.section-sub,
.cover p {
  color: var(--cw-muted) !important;
}

.eyebrow,
.section-label,
.hero-label,
.kit-tag,
.price-label,
.tag,
.source-type,
.slot-badge,
.price-badge,
.pi-label,
.meta span,
.meta a,
.source-meta span,
.source-meta a {
  border-radius: 3px !important;
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
  letter-spacing: .09em !important;
  text-transform: uppercase;
}

.eyebrow,
.section-label,
.hero-label {
  border-left: 4px solid currentColor;
  padding-left: 10px;
}

.btn,
button,
.slot-cta,
.cta,
input,
select,
textarea,
.chip,
.tag,
.source-type,
.source-meta span,
.source-meta a,
.meta span,
.meta a {
  border-radius: var(--cw-radius) !important;
}

.btn,
.slot-cta,
.cta {
  border: 1.5px solid transparent !important;
  box-shadow: none !important;
  letter-spacing: .015em;
}

.btn:hover,
.slot-cta:hover,
.cta:hover {
  box-shadow: var(--cw-hard-shadow) !important;
  transform: translate(-2px, -2px) !important;
}

.btn-primary,
.btn.primary,
.slot-cta {
  background: var(--cw-ink) !important;
}

.btn-primary:hover,
.btn.primary:hover,
.slot-cta:hover {
  background: var(--cw-panel) !important;
  color: var(--cw-red) !important;
  border-color: var(--cw-rule) !important;
}

.card,
.source-card,
.method,
.pillar,
.slot,
.what-card,
.aud-card,
.placement-item,
.price-card,
.roi,
.faq-item,
.tip-box,
.map-panel,
.mail,
.email-mock,
.std,
.cstat,
.form-card,
.audience-section,
.founding-note,
.signup-band,
.signup-card,
.plan,
.compare-wrap {
  background: var(--cw-panel) !important;
  border: 1.5px solid var(--cw-line) !important;
  border-radius: var(--cw-radius) !important;
  box-shadow: none !important;
}

.card:hover,
.source-card:hover,
.source-card.active,
.method:hover,
.pillar:hover,
.slot:hover,
.what-card:hover,
.aud-card:hover,
.placement-item:hover,
.price-card:hover,
.faq-item:hover,
.plan:hover {
  border-color: var(--cw-rule) !important;
  box-shadow: var(--cw-hard-shadow) !important;
  transform: translate(-2px, -2px);
}

.plan.featured {
  border: 2px solid var(--cw-gold) !important;
  box-shadow: none !important;
}

.card h3,
.source-card h3,
.slot h3,
.what-card h3,
.aud-card h3,
.placement-item h3,
.price-card h3,
.plan h3,
.faq-q,
.item h3 {
  font-family: "Lora", Georgia, serif !important;
}

.card,
.source-card {
  position: relative;
}

.card::before,
.source-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: var(--cw-green);
  opacity: .16;
  border-radius: var(--cw-radius) 0 0 var(--cw-radius);
}

.card.highlighted::before,
.source-card.active::before {
  opacity: 1;
}

.layout,
.grid,
.slots-grid,
.aud-grid,
.placement-grid,
.pricing-grid,
.source-grid,
.pillars,
.steps,
.method-grid {
  gap: 18px !important;
}

.page-hero,
.hero,
.cover,
.section,
section {
  position: relative;
}

.page-hero::after,
.hero::after,
.cover::after {
  content: "";
  display: block;
  margin-top: 26px;
  height: 4px;
  background:
    linear-gradient(90deg, var(--cw-rule) 0 26%, transparent 26% 28%, var(--cw-gold) 28% 44%, transparent 44% 46%, var(--cw-rule) 46% 100%);
}

.map-panel,
.email-mock,
.mail {
  overflow: hidden;
}

.map-head,
.map-panel-head,
.mail-head,
.em-head,
.email-mock-header {
  border-bottom: 2px solid var(--cw-rule) !important;
}

#search,
input,
select,
textarea {
  border: 1.5px solid var(--cw-line) !important;
  background: rgba(255,253,248,.92) !important;
}

#search:focus,
input:focus,
select:focus,
textarea:focus {
  border-color: var(--cw-green) !important;
  outline: 3px solid rgba(35, 104, 77, .18) !important;
  outline-offset: 1px;
}

.chip.active,
.tag.retail,
.tag.utilities,
.source-type.government,
.cat-badge.open {
  background: #e4efe7 !important;
}

.tag.roadwork {
  background: #f4e2bc !important;
}

.tag.hearing {
  background: #edd8d4 !important;
}

footer,
.footer {
  border-top: 2px solid var(--cw-rule) !important;
}

@media (min-width: 920px) {
  .layout {
    grid-template-columns: minmax(0, 1fr) minmax(330px, 380px) !important;
  }

  .hero {
    gap: 54px !important;
  }
}

@media (max-width: 720px) {
  body {
    width: 100%;
  }

  .bar-inner,
  .trust-strip {
    align-items: flex-start !important;
    flex-wrap: wrap !important;
    white-space: normal !important;
  }

  .bar-inner {
    font-size: 12.5px !important;
    line-height: 1.25 !important;
    padding-right: 42px !important;
  }

  .nav,
  .wrap,
  .bar-inner {
    padding-left: 16px !important;
    padding-right: 16px !important;
    width: 100% !important;
    max-width: 100vw !important;
  }

  .nav {
    gap: 10px !important;
  }

  .brand {
    min-width: 0;
  }

  .brand span {
    max-width: 170px;
    white-space: normal;
  }

  .nav .btn {
    flex: 0 0 auto;
    width: auto !important;
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  .hero,
  .hero-copy {
    display: block !important;
    width: 100% !important;
    max-width: calc(100vw - 64px) !important;
    overflow: hidden;
  }

  .hero-copy > *,
  .hero-actions,
  .proof-grid,
  .launch-proof,
  .trust-strip {
    width: calc(100vw - 64px) !important;
    max-width: calc(100vw - 64px) !important;
  }

  h1,
  .hero h1,
  .cover h1,
  .page-hero h1 {
    max-width: 100% !important;
    font-size: clamp(34px, 9.5vw, 38px) !important;
    letter-spacing: -.03em !important;
    line-height: .98 !important;
  }

  .eyebrow,
  .section-label,
  .hero-label {
    font-size: 12px !important;
    line-height: 1.35 !important;
    white-space: normal !important;
  }

  .btn,
  .slot-cta,
  .cta {
    width: 100%;
  }

  .lede,
  .hero p,
  .section-sub,
  .cover p {
    max-width: 100% !important;
    font-size: 16px !important;
    line-height: 1.5 !important;
    overflow-wrap: anywhere;
  }
}