/* ===== Full-page composition =========================================
   Section rhythm, so a page reads as composed rather than as a themed
   hero over plain text. Applied to every page, not just the home page.

   Sections are tagged by role via nth-of-type and the .band/.feature
   classes the markup carries. Backgrounds alternate paper / paper-2,
   one dark band carries the differentiator, and content blocks get
   real surfaces instead of sitting on bare page.
   ==================================================================== */

/* --- alternating ground ------------------------------------------- */
/* Exclude .hero and .band from the alternating rule entirely — setting
   any background on them (even `initial`) wipes the theme's gradient. */
main > section:not(.hero):not(.band) { background: var(--paper); }
main > section:not(.hero):not(.band):nth-of-type(even) { background: var(--paper-2); }

/* --- the dark band: our differentiator section --------------------- */
main > section.band {
  background: linear-gradient(160deg, var(--ground, #141B24) 0%, var(--ground-2, #222D3A) 100%);
  color: var(--on-ground, #FAF8F4);
}
.band h2, .band h3, .band .pull { color: var(--on-ground, #FAF8F4); }
.band p, .band li { color: var(--on-ground-2, #BDC7D1); }
.band a:not(.btn) { color: var(--patina, #51B8A0); }
.band .btn:not(.ghost) { background: var(--patina, #51B8A0); color: var(--ground, #141B24); border-color: var(--patina, #51B8A0); }
.band .btn.ghost { background: transparent; color: var(--on-ground, #FAF8F4); border-color: rgba(250,248,244,.42); }
.band .ticks li { color: var(--on-ground-2, #BDC7D1); }
.band .note { background: rgba(250,248,244,.055); border-color: rgba(250,248,244,.16); }

/* --- content surfaces ---------------------------------------------- */
.rows > div {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 14px;
  padding: 20px 22px;
}
main > section:nth-of-type(even) .rows > div { background: var(--paper); }
.rows { display: grid; gap: 12px; }
.rows > div:hover { border-color: var(--rule-strong); }

.note {
  background: var(--paper); border: 1px solid var(--rule);
  border-radius: 14px; padding: 18px 20px;
}

/* --- numbered steps get a real surface and an accent numeral ------- */
.steps > li { padding: 18px 0; border-bottom: 1px solid var(--rule); }
.steps > li:last-child { border-bottom: 0; }
.steps > li::before { color: var(--accent); font-weight: 650; }

/* --- pull quotes become a stated moment ---------------------------- */
.pull {
  border-left: 3px solid var(--accent);
  padding-left: 22px;
}
.band .pull { border-left-color: var(--patina, #51B8A0); }

/* --- section heads get air and a rule ------------------------------ */
.sec-head { position: relative; }
main > section:not(.hero):not(.band) .sec-head h2::after {
  content: ""; display: block; width: 40px; height: 2px;
  background: var(--accent); margin-top: 14px; opacity: .55;
}

/* --- tables sit on a surface --------------------------------------- */
.tscroll { background: var(--paper); border: 1px solid var(--rule); border-radius: 14px; }
main > section:nth-of-type(even) .tscroll { background: var(--paper); }

/* --- closing section: lift it off the page ------------------------- */
main > section:last-of-type:not(.band):not(.hero) { background: var(--paper-2); }

/* --- rhythm: vary the vertical measure so pages do not metronome --- */
main > section { padding-block: clamp(26px, 3vw, 41px); }
main > section.band { padding-block: clamp(30px, 3.5vw, 48px); }


/* --- closing CTA: give the last section a surface of its own -------- */
main > section:last-of-type:not(.band):not(.hero) {
  background: var(--card);
  border-top: 1px solid var(--rule);
}
main > section:last-of-type:not(.band):not(.hero) .wrap.narrow,
main > section:last-of-type:not(.band):not(.hero) > .wrap {
  text-align: center;
}
main > section:last-of-type:not(.band):not(.hero) .actions { justify-content: center; }
main > section:last-of-type:not(.band):not(.hero) h2 { margin-inline: auto; }
main > section:last-of-type:not(.band):not(.hero) .lede { margin-inline: auto; }
main > section:last-of-type:not(.band):not(.hero) .sec-head h2::after { margin-inline: auto; }