.home-hero {
  padding-block: var(--space-6) var(--space-5);
}

.home-hero__inner {
  display: grid;
  gap: var(--space-4);
}

.home-hero__copy {
  display: grid;
  gap: var(--space-3);
  justify-items: start;
}

.home-hero__copy p {
  margin-block-end: var(--space-0);
}

/* The one orchestrated moment: hero ledger lines settle in once on load. */
@media (prefers-reduced-motion: no-preference) {
  .js .home-hero .number-ledger__item {
    animation: ledger-settle 500ms ease-out backwards;
  }

  .js .home-hero .number-ledger__item:nth-child(2) {
    animation-delay: 180ms;
  }

  .js .home-hero .number-ledger__item:nth-child(3) {
    animation-delay: 360ms;
  }
}

@keyframes ledger-settle {
  from {
    opacity: 0;
    translate: 0 var(--space-1);
  }

  to {
    opacity: 1;
    translate: 0 0;
  }
}

.difference-list {
  display: grid;
  gap: var(--space-4) var(--space-3);
  margin-block-start: var(--space-4);
}

.local-note {
  display: grid;
  gap: var(--space-4);
}

.local-note__copy p {
  margin-block-end: var(--space-0);
}

.local-note__media {
  display: grid;
  min-height: calc(var(--space-6) * 2);
  place-items: center;
  padding: var(--space-3);
  border: var(--rule);
  border-radius: var(--radius);
  background:
    repeating-linear-gradient(-45deg, transparent 0 10px, var(--line) 10px 11px);
  color: var(--ink-soft);
  font-size: var(--step--1);
  text-align: center;
}

.local-note__media span {
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius);
  background: var(--paper);
}

@media (min-width: 48rem) {
  .home-hero__inner {
    grid-template-columns: minmax(0, 1.3fr) minmax(var(--grid-min-large), 0.7fr);
    align-items: center;
  }

  .home-hero .number-ledger {
    margin-block: var(--space-0);
  }

  .difference-list {
    grid-template-columns: repeat(3, 1fr);
  }

  .local-note {
    grid-template-columns: repeat(3, 1fr);
    align-items: center;
  }

  .local-note__copy {
    grid-column: span 2;
  }
}