/* =========================================================================
   Component — alternating full-bleed band
   -------------------------------------------------------------------------
   A section that sits on the panel surface instead of the page surface, so a
   long page reads as bands rather than as one scroll. Full-bleed, so it is a
   wrapper with the container INSIDE it:

       <div class="section-alt"><section class="section container"> … </section></div>

   The wrapper is a <div> on purpose: an unnamed <section> is not a landmark,
   and the heading's own sectioning element belongs inside, next to the heading.

   A card or a step inside the band would otherwise be panel-on-panel and
   disappear, so it swaps to the page background. Both values are tokens.
   ========================================================================= */

.section-alt {
  background: var(--doc-panel);
  border-top: 1px solid var(--doc-line);
  border-bottom: 1px solid var(--doc-line);
}

.section-alt .card,
.section-alt .steps > li {
  background: var(--doc-bg);
}