/* Essentials */
.features { padding-top: 112px; }
.section-title {
  max-width: 14em;
  margin-inline: auto;
  font-size: var(--fs-5);
  font-weight: 560;
  letter-spacing: -.035em;
  line-height: 1.1;
  text-align: center;
}
.section-title span { color: var(--ink-2); }

/* essentials.js holds a card back only if the visitor scrolls while it is still below the fold; without it, and in print, nothing is hidden */
@media screen and (prefers-reduced-motion: no-preference) {
  .feat.is-pending { opacity: 0; translate: 0 14px; }
  .feat.is-entering { animation: feat-in .7s var(--ease) calc(var(--d, 0) * 70ms) both; }
}
@keyframes feat-in {
  from { opacity: 0; translate: 0 14px; }
  to { opacity: 1; translate: 0 0; }
}
.nowrap { white-space: nowrap; }

/* Add-ons band */
.addons { padding-top: 120px; }
.addons-band {
  display: grid;
  justify-items: center;
  gap: 16px;
  padding-block: 48px;
  border-block: 1px solid var(--line-2);
  text-align: center;
}
.addons h2 {
  font-size: var(--fs-4);
  font-weight: 600;
  letter-spacing: -.025em;
}
.addon-names {
  --sep: 14px;
  font-size: var(--fs-2);
  font-weight: 500;
  line-height: 1.9;
  color: var(--ink-2);
  text-wrap: balance;
}
.addon-names li { display: inline; white-space: nowrap; }
.addon-names li + li::before {
  content: '';
  display: inline-block;
  width: 1px;
  height: 12px;
  margin: 0 var(--sep);
  vertical-align: -1px;
  background: var(--line-2);
}

.band-importer { margin-top: -8px; font-size: var(--fs-1); color: var(--ink-2); }
.band-importer a {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0 4px;
  min-height: 44px;
  border-radius: var(--r-sm);
}
.band-importer span {
  text-decoration: underline;
  text-decoration-color: rgba(28, 27, 25, .28);
  text-underline-offset: 3px;
  transition: text-decoration-color .2s var(--ease), color .2s var(--ease);
}
.band-importer a:hover span { color: var(--ink); text-decoration-color: currentColor; }

/* The name breaks below depend on the band's order: Peer-to-Peer, Event Tickets, AI Assistant, Donor CRM, Embedded Forms, Donation Recovery, Gift Aid, Tributes, Payment Gateways, Conversion Tracking, Connect. The eleven run five and six down to 800px, four, three and four to 501px, three, two, three and three to 420px, three and then two a line to 360px, and two a line with one line of three below that, set closer below 340px. */
.addon-names li:nth-child(6)::before { content: '\A'; display: inline; margin: 0; white-space: pre; }

@media (max-width: 799px) {
  .addon-names li:nth-child(6)::before { content: ''; display: inline-block; margin: 0 var(--sep); white-space: normal; }
  .addon-names li:nth-child(5)::before,
  .addon-names li:nth-child(8)::before { content: '\A'; display: inline; margin: 0; white-space: pre; }
}

@media (max-width: 1099px) {
  .features { padding-top: 104px; }
}

@media (max-width: 880px) {
  .lede { max-width: 36em; }
  .addons { padding-top: 96px; }
}

@media (max-width: 560px) {
  .features { padding-top: 88px; }
  .addon-names { --sep: 10px; }
  .addons { padding-top: 88px; }
  .addons-band { padding-block: 40px; }
}

@media (max-width: 500px) {
  .addon-names li:nth-child(5)::before,
  .addon-names li:nth-child(8)::before { content: ''; display: inline-block; margin: 0 var(--sep); white-space: normal; }
  .addon-names li:nth-child(4)::before,
  .addon-names li:nth-child(6)::before,
  .addon-names li:nth-child(9)::before { content: '\A'; display: inline; margin: 0; white-space: pre; }
}

@media (max-width: 419px) {
  .addon-names li:nth-child(9)::before { content: ''; display: inline-block; margin: 0 var(--sep); white-space: normal; }
  .addon-names li:nth-child(8)::before,
  .addon-names li:nth-child(10)::before { content: '\A'; display: inline; margin: 0; white-space: pre; }
}

@media (max-width: 359px) {
  .addon-names li:nth-child(4)::before,
  .addon-names li:nth-child(6)::before,
  .addon-names li:nth-child(8)::before { content: ''; display: inline-block; margin: 0 var(--sep); white-space: normal; }
  .addon-names li:nth-child(3)::before,
  .addon-names li:nth-child(5)::before,
  .addon-names li:nth-child(7)::before { content: '\A'; display: inline; margin: 0; white-space: pre; }
}

@media (max-width: 339px) {
  .addon-names { --sep: 6px; }
}