/*
  HowManyRightNow — quiet data-first interface
  Keeps the existing information architecture and SEO copy, while making
  the visual hierarchy closer to a practical reference site than a campaign
  landing page.
*/

:root {
  --bg: #f7f7f5;
  --panel: #fff;
  --line: #d9dee7;
  --soft: #f1f4fb;
  --shadow: none;
}

body {
  background: var(--bg) !important;
}

.orb {
  display: none !important;
}

.site-header,
.population-header,
.top {
  min-height: 62px !important;
  height: auto !important;
}

.site-header nav,
.population-header nav {
  gap: 15px !important;
}

main {
  padding-bottom: 64px !important;
}

/* Home: one clear answer above the fold. */
body > main .hero {
  min-height: 510px;
  padding-top: 62px;
  padding-bottom: 58px;
}

body > main .hero h1 {
  max-width: 820px;
  margin-bottom: 25px;
  font-size: clamp(2.25rem, 4.4vw, 3.75rem);
  line-height: 1.02;
  letter-spacing: -.055em;
}

body > main .hero .hero-icon {
  width: 54px;
  height: 54px;
  margin-bottom: 16px;
  border-radius: 12px;
  font-size: 1.55rem;
  box-shadow: none;
}

body > main .hero .counter-wrap > span:first-child {
  font-size: clamp(3rem, 7.2vw, 5.6rem);
  letter-spacing: -.055em;
  text-shadow: none;
}

body > main .hero .truth-label {
  margin-top: 14px;
}

body > main .hero .hero-actions {
  margin-top: 23px;
}

.topic-section,
.method,
.ranking-section,
.compare-section {
  padding-top: 58px !important;
  padding-bottom: 58px !important;
}

.engagement-section {
  padding-bottom: 58px !important;
}

.section-heading h2,
.method h2,
.dialog-head h2,
.engagement-section h2 {
  font-size: clamp(1.7rem, 3vw, 2.55rem) !important;
  letter-spacing: -.035em !important;
}

/* Shared surfaces: thinner borders, smaller radii, no ornamental depth. */
.button,
.primary-action,
.secondary-action,
.next-countries a {
  border-radius: 8px !important;
}

.topic-card,
.since-card,
.discovery-card,
.compare-card,
.card,
.fact,
.related a,
.activity-card a,
.empty-state,
.reviewed-section,
.metric-card,
.counter-shell,
.stat-grid article,
.chart-card,
.explain-grid > article,
.fact-card,
.source-list a,
.faq article,
.trust-band article,
.hero-stat,
.tool-card,
.answer,
.minute-grid div,
.meaning article,
.sources a,
.hero-number,
.country-number,
.feature-grid > a,
.table-wrap,
.pulse-links a,
.source-panel,
.source-links a,
.explain-cards article,
.population-chart,
.growth-list a,
.method-steps article,
.audit-grid article,
.country-stats article,
.download-grid > a,
.dictionary,
.comparison-card,
.definition-grid article {
  box-shadow: none !important;
  border-radius: 12px !important;
}

.topic-card:hover,
.activity-card a:hover,
.feature-grid > a:hover {
  transform: none !important;
}

/* Activity details. */
.top + main,
body:has(.top) main {
  padding-top: 48px !important;
}

.top + main .hero,
body:has(.top) main .hero {
  min-height: 0;
  padding: 14px 0 48px;
}

.top + main .hero h1,
body:has(.top) main .hero h1 {
  max-width: 760px;
  font-size: clamp(2.15rem, 4.3vw, 3.35rem);
  line-height: 1.04;
  letter-spacing: -.05em;
}

.top + main .hero .icon,
body:has(.top) main .hero .icon {
  width: 52px;
  height: 52px;
  margin-bottom: 16px;
  border-radius: 12px;
  font-size: 1.5rem;
}

.top + main .hero .lede,
body:has(.top) main .hero .lede {
  margin: 14px auto;
}

.top + main .hero .counter,
body:has(.top) main .hero .counter {
  margin-top: 24px;
  font-size: clamp(2.9rem, 7vw, 5rem);
  letter-spacing: -.05em;
}

.top + main section,
body:has(.top) main section {
  margin-top: 38px;
}

.top + main h2,
body:has(.top) main h2 {
  font-size: clamp(1.45rem, 3vw, 2rem);
  letter-spacing: -.03em;
}

/* Activities directory. */
.page-hero {
  max-width: 760px !important;
  padding: 46px 0 30px !important;
}

.page-hero h1 {
  font-size: clamp(2.15rem, 4.3vw, 3.4rem) !important;
  line-height: 1.04 !important;
  letter-spacing: -.05em !important;
}

.page-hero label {
  margin-top: 20px !important;
}

.reviewed-section {
  margin-bottom: 38px !important;
  padding: 20px !important;
  background: #fff !important;
}

.activity-group {
  margin-top: 36px !important;
}

/* Live data: number first, explanation immediately beneath. */
.live-hero {
  padding: 38px 0 40px !important;
}

.live-hero h1 {
  max-width: 820px !important;
  margin-bottom: 16px !important;
  font-size: clamp(2.25rem, 4.4vw, 3.55rem) !important;
  line-height: 1.02 !important;
  letter-spacing: -.055em !important;
}

.counter-shell {
  width: min(760px, 100%) !important;
  margin-top: 28px !important;
  padding: 24px !important;
  background: #fff !important;
}

.counter-shell strong {
  font-size: clamp(3rem, 7vw, 5.3rem) !important;
  letter-spacing: -.05em !important;
}

.section {
  margin-top: 58px !important;
}

.section-heading h2,
.section > h2 {
  font-size: clamp(1.7rem, 3.6vw, 2.8rem) !important;
  letter-spacing: -.04em !important;
}

.metric-card {
  min-height: 250px !important;
  padding: 24px !important;
}

.metric-card::before {
  display: none !important;
}

.metric-card h2 {
  font-size: clamp(1.7rem, 3.5vw, 2.7rem) !important;
  letter-spacing: -.04em !important;
}

.hub-intro {
  max-width: 760px !important;
  padding: 48px 0 20px !important;
}

.hub-intro h1 {
  font-size: clamp(2.3rem, 4.6vw, 3.7rem) !important;
  line-height: 1 !important;
  letter-spacing: -.055em !important;
}

.trust-band {
  margin-top: 42px !important;
}

/* Population intelligence. */
.population-hero,
.country-hero {
  gap: 34px !important;
  padding: 52px 0 42px !important;
}

.population-hero h1,
.country-hero h1,
.sub-hero h1 {
  max-width: 720px !important;
  font-size: clamp(2.25rem, 4.4vw, 3.55rem) !important;
  line-height: 1 !important;
  letter-spacing: -.055em !important;
}

.sub-hero {
  padding: 48px 0 18px !important;
}

.hero-number,
.country-number {
  padding: 25px !important;
  background: #fff !important;
}

.hero-number strong,
.country-number strong {
  font-size: clamp(2rem, 3.2vw, 3.15rem) !important;
  letter-spacing: -.045em !important;
}

.population-section {
  margin-top: 58px !important;
}

.population-section .section-heading h2,
.population-section > h2,
.widget-layout h2 {
  font-size: clamp(1.65rem, 3.3vw, 2.7rem) !important;
  line-height: 1.05 !important;
  letter-spacing: -.04em !important;
}

.feature-grid > a {
  min-height: 190px !important;
  padding: 24px !important;
}

.feature-grid h3 {
  margin-top: 18px !important;
  font-size: 1.35rem !important;
}

.source-panel,
.comparison-card {
  padding: 25px !important;
}

/* Humanity Lab. */
body:has(.lab-tools) .hero {
  min-height: 0;
  padding: 50px 0 44px;
}

body:has(.lab-tools) .hero h1 {
  max-width: 760px;
  font-size: clamp(2.25rem, 4.4vw, 3.55rem);
  line-height: 1.02;
  letter-spacing: -.055em;
}

.hero-stat {
  margin-top: 26px !important;
  padding: 20px !important;
  background: #fff !important;
}

.hero-stat strong {
  font-size: clamp(2.7rem, 6vw, 4.5rem) !important;
}

.tool-card {
  padding: 25px !important;
}

.primary-tool {
  background: #fff !important;
}

.meaning,
.sources {
  margin-top: 58px !important;
}

.meaning h2,
.sources h2 {
  font-size: clamp(1.7rem, 3.5vw, 2.7rem) !important;
}

@media (max-width: 700px) {
  .site-header,
  .population-header,
  .top {
    padding-top: 12px !important;
    padding-bottom: 12px !important;
  }

  body > main .hero {
    min-height: 0;
    padding-top: 42px;
    padding-bottom: 42px;
  }

  body > main .hero h1,
  .live-hero h1,
  .population-hero h1,
  .country-hero h1,
  .sub-hero h1,
  body:has(.lab-tools) .hero h1 {
    font-size: clamp(2.15rem, 11vw, 3.15rem) !important;
  }

  .topic-section,
  .method,
  .ranking-section,
  .compare-section,
  .engagement-section {
    padding-top: 44px !important;
    padding-bottom: 44px !important;
  }

  .population-hero,
  .country-hero,
  .live-hero,
  body:has(.lab-tools) .hero {
    padding-top: 40px !important;
    padding-bottom: 34px !important;
  }

  .population-section,
  .section,
  .meaning,
  .sources {
    margin-top: 44px !important;
  }
}