@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700;800&display=swap');

:root {
  --abai-prose-link-hover: #909090;
}

body {
  margin: 0;
  padding: 0;
  font-family: 'Roboto', sans-serif;
}

/* Sitewide links: smooth state changes; subtle default hover (component :hover stays in charge when more specific) */
a {
  transition: color 0.2s ease, text-decoration-color 0.2s ease,
    border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease,
    opacity 0.2s ease;
}

/* Optional coral utility + inline-styled accent anchors */
a.coral-link,
.coral,
a[style*='color:#ff6b6b'],
a[style*='color: #ff6b6b'] {
  text-decoration: none;
  transition: opacity 0.15s ease, color 0.2s ease, text-decoration-color 0.2s ease,
    border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}

/*
 * Plain `a:hover` loses to `a:link` / `a:visited` (same element, higher specificity when a class is on the left).
 * This rule only catches links without those pseudo-pairs beating it; scoped :hover rules below use --abai-prose-link-hover.
 */
@media (hover: hover) {
  a:where(
    :not(.navbar-brand):not(.navbar-cta):not(.timeline-link):not(.timeline-link-newsletter)
    :not(.company-cta):not(.company-back):not(.company-index-link):not(.company-row)
    :not(.contact-brand-lockup):not(.company-page-link):not(.filters-clear)
    :not(.reject):not(.source-link)
    :not(.btn-primary):not(.btn-secondary):not(.month-link):not(.hero-latest-link)
    :not(.event-card-summary):not(.event-card-company):not(.event-card-source):not(.event-card-flag)
    :not(.coral-link):not(.coral):not(.nav-link):not(.nav-newsletter)
  ):hover {
    color: var(--abai-prose-link-hover);
  }
}

/* Accent (#ff6b6b) links — homepage-style hover: stay coral, no underline, slight dim */
@media (hover: hover) {
  a.coral-link:hover,
  .coral:hover,
  a[style*='color:#ff6b6b']:hover,
  a[style*='color: #ff6b6b']:hover,
  .month-link:hover,
  .hero-latest-link:hover,
  .newsletter-mention a:hover,
  .company-breadcrumb a:hover,
  .company-event-history-link:hover,
  .event-card-summary:hover,
  .event-card-company:hover,
  .event-card-source:hover,
  .event-card-flag:hover {
    color: #ff6b6b;
    text-decoration: none;
    opacity: 0.75;
  }
}

body.home {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  text-align: left;
  padding-top: 54px;
  font-family: 'Roboto', sans-serif;
}

body.home .hero {
  flex: 1 0 auto;
}

/* Homepage hero */
.hero {
  background: #f8f8f6;
  padding: 4rem 2rem 3.5rem;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  box-sizing: border-box;
  width: 100%;
}

.hero-inner {
  max-width: 680px;
  margin: 0 auto;
  text-align: left;
  box-sizing: border-box;
}

.hero-title {
  font-size: 52px;
  font-weight: 800;
  line-height: 1.1;
  color: #1a1a1a;
  margin: 0 0 1.25rem;
}

.hero-title .hero-gradient-text {
  background: linear-gradient(90deg, #ff6b6b, #feca57);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.hero-sub {
  font-size: 17px;
  color: #666662;
  line-height: 1.6;
  margin: 0 0 2rem;
}

.hero-sub em {
  font-style: normal;
  color: #ff6b6b;
}

.hero-month-box {
  background: #ffffff;
  border: 0.5px solid #e0e0de;
  border-radius: 16px;
  padding: 1.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
}

.month-left {
  flex: 1;
  min-width: 0;
}

.month-label {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 1.5px;
  color: #888884;
  text-transform: uppercase;
  margin-bottom: 4px;
}

.month-num {
  font-size: 42px;
  font-weight: 800;
  background: linear-gradient(90deg, #ff6b6b, #feca57);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  line-height: 1;
  margin-bottom: 4px;
}

.month-desc {
  font-size: 13px;
  color: #888884;
}

.month-desc span {
  color: #1a1a1a;
  font-weight: 500;
}

.month-divider {
  width: 0.5px;
  background: #e0e0de;
  height: 60px;
  flex-shrink: 0;
}

.month-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
}

.month-stat {
  font-size: 12px;
  color: #888884;
  text-align: right;
}

.month-stat strong {
  color: #1a1a1a;
  display: block;
  font-size: 22px;
  font-weight: 700;
}

.month-link {
  font-size: 13px;
  color: #ff6b6b;
  text-decoration: none;
}

.hero-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 2rem;
}

.hero-card {
  background: #ffffff;
  border: 0.5px solid #e0e0de;
  border-radius: 16px;
  padding: 1.25rem 1rem 1rem;
  min-width: 0;
}

.hero-card-num {
  font-size: 32px;
  font-weight: 700;
  background: linear-gradient(90deg, #ff6b6b, #feca57);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  line-height: 1;
  margin-bottom: 6px;
}

.hero-card-label {
  font-size: 12px;
  color: #888884;
  line-height: 1.4;
}

.hero-buttons {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 2rem;
}

.btn-primary {
  background: #1a1a1a;
  color: #f8f8f6;
  font-size: 14px;
  font-weight: 500;
  padding: 10px 22px;
  border-radius: 8px;
  text-decoration: none;
  border: none;
  cursor: pointer;
  white-space: nowrap;
}

.btn-primary:hover {
  background: #ff6b6b;
}

.btn-secondary {
  background: transparent;
  color: #1a1a1a;
  font-size: 14px;
  padding: 10px 22px;
  border-radius: 8px;
  text-decoration: none;
  border: 0.5px solid #c0c0be;
  cursor: pointer;
  white-space: nowrap;
}

.btn-secondary:hover {
  border-color: #1a1a1a;
}

.hero-latest {
  padding-top: 1.5rem;
  border-top: 0.5px solid #e0e0de;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.hero-latest-label {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 1.5px;
  color: #888884;
  text-transform: uppercase;
  white-space: nowrap;
}

.hero-latest-event {
  font-size: 13px;
  color: #1a1a1a;
}

.hero-latest-event span {
  color: #ff6b6b;
}

.hero-latest-link {
  font-size: 13px;
  color: #ff6b6b;
  text-decoration: none;
  white-space: nowrap;
  margin-left: auto;
}

@media (max-width: 768px) {
  .hero {
    padding: 2rem 1rem;
  }

  .hero-title {
    font-size: 34px;
  }

  .hero-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .hero-month-box {
    flex-direction: column;
    align-items: flex-start;
  }

  .month-divider {
    width: 100%;
    height: 0.5px;
  }

  .month-right {
    align-items: flex-start;
  }

  .hero-buttons {
    flex-direction: column;
    align-items: flex-start;
  }

  .hero-buttons .btn-primary,
  .hero-buttons .btn-secondary {
    width: 100%;
    text-align: center;
    box-sizing: border-box;
  }
}

@media (max-width: 600px) {
  .month-stat {
    text-align: left;
  }

  .hero-latest-link {
    margin-left: 0;
  }
}

body.timeline {
  margin: 0;
  padding-top: 60px;
  background: #f8f8f6;
  font-family: 'Roboto', sans-serif;
}

body.contact-page {
  background: #f8f8f8;
  color: #222;
  min-height: 100vh;
  text-align: center;
}

/* Below fixed nav: fill viewport and vertically center main; footer stays at bottom */
body.contact-page .community-layout {
  min-height: calc(100vh - 60px);
  display: flex;
  flex-direction: column;
}

body.contact-page .page-centered-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 20px;
  width: 100%;
  box-sizing: border-box;
}

body.contact-page .contact-inner {
  max-width: 560px;
  width: 100%;
  margin: 0 auto;
  padding-top: 8px;
}

body.contact-page .contact-logo-wrap {
  margin: 0 auto 24px;
  display: flex;
  justify-content: center;
}

a.contact-brand-lockup {
  text-decoration: none;
  font-size: 1.35rem;
  font-weight: bold;
}

a.contact-brand-lockup:hover {
  opacity: 0.88;
}

body.contact-page .contact-email a:link,
body.contact-page .contact-email a:visited {
  color: #111;
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 3px;
}

body.contact-page .contact-email a:hover {
  color: #ff6b6b;
}

body.contact-page .contact-inner > p:not(.contact-email) a:not(.timeline-link):link,
body.contact-page .contact-inner > p:not(.contact-email) a:not(.timeline-link):visited {
  color: #111;
  text-decoration: underline;
  text-underline-offset: 2px;
}

body.contact-page .contact-inner > p:not(.contact-email) a:not(.timeline-link):hover {
  color: var(--abai-prose-link-hover);
}

body.contact-page .newsletter-inner h1 {
  margin-bottom: 1rem;
}

body.contact-page .newsletter-subscribe-wrap {
  margin-top: 1.5rem;
  margin-bottom: 0;
}

/* Outline buttons on contact/newsletter (prose link rule must not override .timeline-link) */
body.contact-page .contact-inner .timeline-link:link,
body.contact-page .contact-inner .timeline-link:visited {
  text-decoration: none;
  display: inline-block;
}

/* Newsletter subscribe: match nav CTA — logo “AI” coral + highlight gradient on hover */
body.contact-page .newsletter-inner .timeline-link:link,
body.contact-page .newsletter-inner .timeline-link:visited {
  border-color: #ff4c4c;
  color: #ff4c4c;
  transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

body.contact-page .newsletter-inner .timeline-link:hover {
  background: linear-gradient(90deg, #ff6b6b, #feca57);
  border-color: #ff6b6b;
  color: #fff;
}

/* Site-wide footer */
.footer {
  background: #ffffff;
  border-top: 0.5px solid #e0e0de;
  padding: 1.5rem 2.5rem;
  box-sizing: border-box;
}

body.home .footer {
  margin-top: auto;
}

.footer-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 2rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}

.footer-logo {
  font-size: 15px;
  font-weight: 700;
  color: #1a1a1a;
}

.footer-logo .highlight {
  background: linear-gradient(90deg, #ff6b6b, #feca57);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.footer-links {
  display: flex;
  gap: 1.5rem;
  align-items: center;
  flex-wrap: wrap;
}

.footer-links a {
  font-size: 13px;
  color: #888884;
  text-decoration: none;
}

.footer-links a:hover {
  color: #ff6b6b;
}

.footer-bottom {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding-top: 1rem;
  border-top: 0.5px solid #e0e0de;
}

.footer-copy {
  font-size: 12px;
  color: #aaaaaa;
}

.footer-disclaimer {
  font-size: 11px;
  color: #aaaaaa;
}

.footer-disclaimer a {
  color: #aaaaaa;
  text-decoration: underline;
}

.footer-disclaimer a:hover {
  color: #ff6b6b;
}

@media (max-width: 768px) {
  .footer {
    padding: 1.5rem 1rem;
  }

  .footer-links {
    gap: 1rem;
    flex-wrap: wrap;
  }
}

@media (max-width: 600px) {
  .footer-top {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }

  .footer-links {
    gap: 1rem;
  }
}

.newsletter-strip {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.25rem 0;
  border-top: 0.5px solid #e0e0de;
  border-bottom: 0.5px solid #e0e0de;
  margin: 2rem 0;
  gap: 1rem;
}
.newsletter-strip-label {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #888884;
  display: block;
  margin-bottom: 4px;
}
.newsletter-strip-desc {
  font-size: 14px;
  color: #1a1a1a;
}
.newsletter-strip-links {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-shrink: 0;
}
.btn-subscribe {
  background: #1a1a1a;
  color: #f8f8f6;
  font-size: 13px;
  font-weight: 500;
  padding: 8px 16px;
  border-radius: 20px;
  text-decoration: none;
  white-space: nowrap;
}
.btn-subscribe:hover {
  background: #E76F51;
  color: #fff;
}
a.link-archive:link,
a.link-archive:visited,
a.link-archive:hover,
a.link-archive:active,
a.link-archive:focus {
  font-size: 13px;
  color: #E76F51 !important;
  text-decoration: none !important;
  white-space: nowrap;
  transition: color 0.2s ease;
}

a.link-archive:hover,
a.link-archive:focus {
  color: #cf5f44 !important;
  text-decoration: none !important;
}

body.contact-page .newsletter-subscribe-wrap a.link-archive:hover,
body.contact-page .newsletter-subscribe-wrap a.link-archive:focus {
  color: #cf5f44 !important;
  text-decoration: none !important;
}
.past-issues {
  margin-top: 2rem;
  text-align: left;
}
.past-issues h2 {
  margin: 0 0 0.5rem;
  font-size: 1.2rem;
  font-weight: 500;
}
.past-issues > p {
  margin: 0 0 1rem;
}
.issue-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.75rem 0;
  border-bottom: 0.5px solid #e0e0de;
  text-decoration: none;
  color: #1a1a1a;
}
.issue-row:hover .issue-month {
  color: #E76F51;
}
.issue-month {
  font-size: 15px;
  font-weight: 500;
}
.issue-stats {
  font-size: 13px;
  color: #888884;
  flex: 1;
  text-align: right;
  margin-right: 1rem;
}
.issue-arrow {
  font-size: 13px;
  color: #E76F51;
}
.newsletter-mention {
  padding: 1rem 0;
  margin: 0;
  border-top: 0.5px solid #e0e0de;
  border-bottom: 0.5px solid #e0e0de;
  font-size: 13px;
  color: #888884;
}
.newsletter-mention a {
  color: #ff6b6b;
  text-decoration: none;
  margin-left: 4px;
}
.no-issues {
  font-size: 14px;
  color: #888884;
  font-style: italic;
  padding: 1rem 0;
}

body.disclaimer-page {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

body.disclaimer-page .disclaimer-main {
  flex: 1 0 auto;
}

/* Disclaimer page */
.disclaimer-main {
  max-width: 40rem;
  margin: 0 auto;
  padding: 1.5rem clamp(1rem, 4vw, 1.5rem) 3rem;
  text-align: left;
}

.disclaimer-main h1 {
  font-size: 1.75rem;
  font-weight: 400;
  margin: 0 0 0.35rem;
  text-align: left;
}

.disclaimer-updated {
  font-size: 0.85rem;
  color: #888;
  margin: 0 0 1.75rem !important;
  max-width: none !important;
}

.disclaimer-main section {
  margin-bottom: 1.5rem;
}

.disclaimer-main h2 {
  font-size: 1.05rem;
  font-weight: 600;
  margin: 0 0 0.5rem;
  color: #222;
}

.disclaimer-main p {
  max-width: none !important;
  margin: 0 0 0.75rem;
  font-size: 0.95rem;
  line-height: 1.6;
  color: #444;
}

.disclaimer-main a:link,
.disclaimer-main a:visited {
  color: #111;
  text-decoration: underline;
}

.disclaimer-main a:hover {
  color: var(--abai-prose-link-hover);
}

/* (Homepage disclaimer moved into site footer) */

body.home .home-disclaimer-note a:link,
body.home .home-disclaimer-note a:visited {
  color: #6b7280;
  text-decoration: underline;
  text-underline-offset: 2px;
}

body.home .home-disclaimer-note a:hover {
  color: var(--abai-prose-link-hover);
}

    h1 {
      font-weight: 400;
      margin-bottom: 10px;
      font-size: 2rem;
    }
    p {
      max-width: 600px;
      font-size: 1rem;
          line-height: 1.6;
        color: #555;
        font-weight: 300;
    }

    .counter {
      font-size: 5rem;
      font-weight: bold;
    }
    .global-counter {
      font-size: 1.1rem;
      font-weight: 300;
      color: #555;
      margin-left: 8px;
    }
    .subtitle {
      margin-top: 34px;
      font-size: 1.2rem;
      color: #333;
      line-height: 1.4;
    }
    .estimated {
      font-size: 0.9rem;
      font-weight: 300;
      color: #777;
    }
    .tagline {
      font-size: 0.90rem;
      font-weight: 300;
      color: #555;
      display: block;
      margin-top: 24px;
    }
    .button-group {
      display: flex;
      gap: 10px;
      margin-top: 34px;
      flex-wrap: wrap;
      justify-content: center;
    }
    .timeline-link:link,
    .timeline-link:visited {
      text-decoration: none;
    }
    .timeline-link {
      padding: 12px 20px;
      border: 1px solid #000;
      border-radius: 4px;
      color: #000;
      transition: background 0.3s;
    }
    .timeline-link:visited {
      color: #000;
    }
    .timeline-link:hover {
      background: #000;
      color: #fff;
    }

    /* Homepage CTAs: explicit states so :visited never picks up underline */
    body.home .button-group a.timeline-link:link,
    body.home .button-group a.timeline-link:visited {
      text-decoration: none;
    }

    /* Newsletter button: same as /newsletter “Subscribe on Substack” (coral outline + gradient hover) */
    body.home .button-group a.timeline-link-newsletter:link,
    body.home .button-group a.timeline-link-newsletter:visited {
      background: transparent;
      border-color: #ff4c4c;
      color: #ff4c4c;
      font-weight: 400;
      transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
    }

    body.home .button-group a.timeline-link-newsletter:hover {
      background: linear-gradient(90deg, #ff6b6b, #feca57);
      border-color: #ff6b6b;
      color: #fff;
    }

    body.home .button-group a.timeline-link-newsletter:active {
      font-weight: 400;
    }

    .counter-wrapper {
    width: 100%;
    text-align: center;
    }
.counter-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.counter-main {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.counter-primary-row {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 6px;
}
.counter-label-main {
  font-size: 1rem;
  color: #444;
  margin-top: 2px;
}
.counter-secondary {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.counter-number-small {
  font-size: 1.5rem;
  color: #777;
  font-weight: 500;
}
.counter-label-small {
  font-size: 0.85rem;
  color: #888;
}
    .content-wrapper {
      max-width: 600px;
      width: 90%;
      margin: 0 auto;
    }
      .content-wrapper-timeline {
      width: 100%;
      max-width: 100%;
      margin: 0 auto;
      text-align: left;
    }

    .jobs-text {
          background: linear-gradient(90deg, #ff6b6b, #feca57);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
    margin-left :14px;
    }
    
.navbar {
  width: 100%;
  background: #fff;
  border-bottom: 1px solid #ddd;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 20px;
  box-sizing: border-box;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
}

.navbar-brand:link,
.navbar-brand:visited {
  font-weight: bold;
  font-size: 1.2rem;
  color: #000;
  text-decoration: none;
}

.navbar-brand .navbar-logo-ai {
  background: linear-gradient(90deg, #ff6b6b, #feca57);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* Desktop horizontal nav only — avoids .navbar-links.navbar-nav beating mobile display:none (higher specificity) */
@media (min-width: 769px) {
  .navbar-links.navbar-nav {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 1.5rem;
  }
}

/* :link / :visited required — otherwise browser defaults win over .nav-link alone */
.navbar-links.navbar-nav .nav-link:link,
.navbar-links.navbar-nav .nav-link:visited {
  font-size: 14px;
  font-weight: 400;
  color: #888884;
  text-decoration: none;
  letter-spacing: 0;
  transition: color 0.2s ease;
}

.navbar-links.navbar-nav .nav-link:hover {
  color: #1a1a1a;
  opacity: 1;
}

.navbar-links.navbar-nav a.nav-newsletter:link,
.navbar-links.navbar-nav a.nav-newsletter:visited {
  font-size: 13px;
  font-weight: 500;
  color: #ff6b6b;
  border: 1px solid #ff6b6b;
  padding: 6px 14px;
  border-radius: 6px;
  text-decoration: none;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.navbar-links.navbar-nav a.nav-newsletter:hover {
  background: #ff6b6b;
  color: #ffffff;
}

.navbar-links.navbar-nav a.nav-newsletter:focus-visible {
  outline: 2px solid #ff6b6b;
  outline-offset: 3px;
}

.nav-hamburger {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 20px;
  color: #1a1a1a;
  padding: 0.5rem;
  margin-left: auto;
}

.mobile-menu,
.nav-mobile {
  display: none;
}

.mobile-menu.open,
.nav-mobile.open {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #ffffff;
  z-index: 1000;
  justify-content: center;
}

.mobile-menu nav {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
}

.mobile-menu-close {
  position: absolute;
  top: 1.5rem;
  right: 1.5rem;
  font-size: 20px;
  background: none;
  border: none;
  color: #1a1a1a;
  cursor: pointer;
  padding: 0.5rem;
  z-index: 1001;
}

.mobile-menu a {
  font-size: 22px;
  font-weight: 500;
  color: #1a1a1a;
  text-decoration: none;
}

.mobile-menu a:hover {
  color: #ff6b6b;
}

.mobile-menu .nav-newsletter {
  font-size: 16px;
  color: #ff6b6b;
  border: 1px solid #ff6b6b;
  padding: 10px 24px;
  border-radius: 8px;
}

.mobile-menu .nav-newsletter:hover {
  background: #ff6b6b;
  color: #ffffff;
}

@media screen and (max-width: 768px) {
  .nav-hamburger {
    display: block;
  }

  .navbar-nav {
    display: none;
  }
}

@media (max-width: 480px) {
  .newsletter-strip {
    flex-direction: column;
    align-items: flex-start;
  }
  .issue-stats {
    display: none;
  }
}

/* existing styles ... */




body {
  padding-top: 60px; /* to account for fixed nav */
}

@media screen and (max-width: 768px) {
  .counter {
    font-size: 3.5rem;
  }
}