/* ===== 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; }

/* --- phone menu ----------------------------------------------------
   At <=780px the nav collapses behind a Menu button (markup and the
   small toggle script are injected by build.py). Opened, it drops down
   as a full-width list of 44px+ rows. .js guards it: no JS, nav shows. */
.navtoggle { display: none; }
@media (max-width: 780px) {
  .js .navtoggle {
    display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px;
    border: 1px solid var(--rule-strong); border-radius: 999px; background: transparent;
    color: var(--ink); font: inherit; font-size: 0.9rem; font-weight: 500; cursor: pointer;
  }
  .js .navtoggle[aria-expanded="true"] { border-color: var(--accent); }
  .js nav.primary { display: none; }
  .js .masthead.open nav.primary {
    display: flex; flex-direction: column; align-items: stretch; flex-wrap: nowrap;
    order: 3; width: 100%; gap: 0; overflow: visible; padding-top: 4px;
    border-top: 1px solid var(--rule);
  }
  .js .masthead.open nav.primary a,
  .js .masthead.open nav.primary a[href="index.html"] {
    display: flex; min-height: 48px; padding: 12px 0; font-size: 1rem;
    border-bottom: 1px solid var(--rule);
  }
  .js .masthead.open nav.primary a:last-child { border-bottom: 0; }
  .js .masthead.open nav.primary a[aria-current="page"] { color: var(--accent); }
}

/* --- readiness table (audit) ---------------------------------------
   Equal score columns, plain headers with a numbered level marker, the
   dimension as a row label. Phones: each dimension becomes a card. */
.readiness { table-layout: fixed; font-size: 0.93rem; }
.readiness col, .readiness thead th:first-child { width: 17%; }
.readiness thead th {
  text-transform: none; letter-spacing: 0; font-size: 0.9rem; color: var(--ink); font-weight: 600;
  padding-bottom: 14px;
}
.readiness tbody th { font-family: var(--serif); font-size: 1.05rem; font-weight: 600; color: var(--ink); }
.readiness td { color: var(--ink-2); line-height: 1.45; }
.readiness th, .readiness td { padding: 18px 22px 18px 0; }
.readiness th:first-child { padding-left: 18px; }
.readiness th:last-child, .readiness td:last-child { padding-right: 18px; }
.readiness td .lvl { display: none; }
.lvl {
  display: inline-grid; place-items: center; width: 22px; height: 22px; margin-right: 9px;
  border-radius: 50%; font-size: 0.74rem; font-weight: 700; color: #fff; vertical-align: 1px;
  font-variant-numeric: tabular-nums;
}
.lvl.lv1 { background: #B4472F; } .lvl.lv3 { background: #B07D1A; } .lvl.lv5 { background: #3B8458; }
@media (max-width: 680px) {
  .readiness, .readiness tbody, .readiness tr, .readiness th, .readiness td { display: block; width: auto; min-width: 0; }
  .readiness { min-width: 0; }
  .tscroll:has(.readiness) { border: 0; border-radius: 0; background: none; padding: 0; box-shadow: none; }
  .readiness thead { display: none; }
  .readiness tr {
    border: 1px solid var(--rule); border-radius: 14px; padding: 14px 16px; margin-bottom: 12px;
    background: var(--card, transparent);
  }
  .readiness tbody th, .readiness tbody th:first-child { border: 0; padding: 0 0 6px; }
  .readiness td:last-child { padding-right: 0; }
  .readiness td { border-top: 1px solid var(--rule); padding: 10px 0; display: flex; gap: 10px; align-items: flex-start; }
  .readiness td .lvl { display: inline-grid; flex: none; margin: 1px 0 0; }
  .readiness td .lvl { order: -1; }
  .readiness td::before { content: attr(data-label); flex: none; width: 74px; font-weight: 600; color: var(--ink); }
}