/* The Alignment / Control cards. A tidy-up of the captured markup, and the
   drift-in from either side. behaviours.js arms the drift, so without scripting
   or with reduced motion the cards are simply there. */
.pillars > article { padding: 32px; box-shadow: inset 0 0 0 .5px rgba(10, 11, 13, .06); }
/* 23px is the largest size at which both subtitles hold one line side by side,
   which keeps the two lists starting level */
.pillars h3 > span:last-child { font-size: 23px; text-wrap: balance; }
.pillars ul { display: grid; gap: 14px; }
.pillars li { gap: 12px; line-height: 22px; }
.pillars li > span:last-child { text-wrap: pretty; }
/* the chip is 24px on a 22px line: lift it so it centres on the first line */
.pillars li > .pillar-icon-chip { margin-top: -1px; }
@media (min-width: 1024px) {
  .pillars { gap: 20px; }
  .pillars > article { padding: 40px; }
}

/* Each card waits off to its own side and drifts in the first time it scrolls
   into view: a straight slide and a fade, nothing else.
   The waiting state is written as :not(.is-in), so arriving is just the
   absence of it and no later rule can pin a card off to the side. */
.pillars.is-armed > article {
  transition: opacity 1.1s cubic-bezier(.22, 1, .36, 1), transform 1.4s cubic-bezier(.16, 1, .3, 1);
}
.pillars.is-armed > article:not(.is-in) { opacity: 0; }
.pillars.is-armed > article:first-child:not(.is-in) { transform: translateX(-96px); }
.pillars.is-armed > article:last-child:not(.is-in) { transform: translateX(96px); }

@media (max-width: 1023px) {
  /* stacked: a shorter reach, so neither card pokes out past a narrow screen */
  .pillars.is-armed > article:first-child:not(.is-in) { transform: translateX(-40px); }
  .pillars.is-armed > article:last-child:not(.is-in) { transform: translateX(40px); }
}