/* Shared cross-page section primitives: field backgrounds, the centered
   content container, eyebrow labels, CTA buttons, wayfinding links and
   generic body copy. Home and every marketing page built after it share
   these instead of each page redefining its own copies. */

.field {
  padding: var(--space-7) var(--space-4);
  text-align: center;
}

.field--ink {
  background: var(--color-ink);
  color: var(--color-white);
}

.field--terracotta {
  background: var(--color-terracotta);
  color: var(--color-white);
}

.field--darkgreen {
  background: var(--color-dark-green);
  color: var(--color-white);
}

.field--paper {
  background: var(--color-paper);
  color: var(--color-ink);
}

.field-inner {
  max-width: 1100px;
  margin: 0 auto;
}

.eyebrow {
  font-size: var(--step-small);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-light-green);
  margin: 0 0 var(--space-3);
}

.eyebrow--dark {
  color: var(--color-dark-green);
}

.field h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--step-h1);
  line-height: 1.1;
  margin: 0 0 var(--space-4);
  max-width: 20ch;
  margin-left: auto;
  margin-right: auto;
}

.hero-sub {
  font-size: var(--step-body-large);
  max-width: 55ch;
  margin: 0 auto var(--space-5);
  opacity: 0.9;
}

.section-body {
  font-size: var(--step-body-large);
  max-width: 65ch;
  margin: 0 auto var(--space-4);
}

.learn-more {
  margin-top: var(--space-3);
}

.learn-more a {
  color: inherit;
  font-weight: 600;
}

.cta {
  display: inline-block;
  background: var(--color-terracotta);
  color: var(--color-white);
  text-decoration: none;
  padding: var(--space-2) var(--space-4);
  border-radius: 4px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  font-size: var(--step-small);
}

.cta:hover,
.cta:focus-visible {
  background: var(--color-light-green);
  color: var(--color-ink);
}

.cta--large {
  padding: var(--space-3) var(--space-6);
  font-size: var(--step-body-large);
}

.cta--medium {
  font-size: 0.95rem;
}

.cta--onterracotta {
  background: var(--color-ink);
  color: var(--color-white);
}

.cta--onterracotta:hover,
.cta--onterracotta:focus-visible {
  background: var(--color-white);
  color: var(--color-ink);
}

.check-list {
  list-style: none;
  margin: var(--space-3) 0 0;
  padding: 0;
  text-align: left;
}

.check-list li {
  position: relative;
  padding: var(--space-2) 0 var(--space-2) var(--space-4);
  border-bottom: 1px solid rgba(18, 35, 28, 0.08);
}

.check-list li:last-child {
  border-bottom: none;
}

.check-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: calc(var(--space-2) + 0.5em);
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--color-medium-green);
}

.check-list--boundary li::before {
  border-radius: 0;
  width: 9px;
  height: 2px;
  top: calc(var(--space-2) + 0.6em);
  background: var(--color-terracotta);
}

@media (max-width: 699px) {
  .field {
    padding-top: var(--space-6);
    padding-bottom: var(--space-6);
  }
}