/* Shared page-section patterns (home, /how-it-works, /what-is-my-ip): eyebrow + heading block, alternate full-width
   bands, numbered steps, check list, two-column FAQ, closing call to action. Load only on pages that use them (08 §7.2). */

/* ---------- Section rhythm: eyebrow + heading block, alternate full-width bands ---------- */
.section__head { display: grid; gap: var(--space-2); margin-bottom: var(--space-6); }
.section__head .section__title { margin-bottom: 0; }
.section__head--row { grid-template-columns: minmax(0, 1fr) auto; align-items: end; column-gap: var(--space-4); }
.section__eyebrow {
  font-size: var(--text-tiny); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--color-primary);
}
.section__more { font-weight: 600; white-space: nowrap; }

/* Full-bleed band without extra markup: the shadow paints the band, clip-path trims it to the section height. */
.section--alt {
  background: var(--color-bg-alt);
  box-shadow: 0 0 0 100vmax var(--color-bg-alt); clip-path: inset(0 -100vmax);
}
.section--alt, .section--alt + .section { border-top: 0; }
.page-sections .section__title { font-size: clamp(1.625rem, 3.5vw, 2.25rem); letter-spacing: -0.01em; line-height: 1.15; }

/* ---------- Numbered steps ---------- */
.steps { display: grid; gap: var(--space-4); padding: 0; list-style: none; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 768px) { .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.steps__item {
  display: grid; gap: var(--space-2); align-content: start; padding: var(--space-5);
  background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg);
  color: var(--color-text-muted);
}
.steps__num {
  display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 50%;
  background: var(--color-primary); color: var(--color-on-primary); font-weight: 700;
}
.steps__title { font-size: var(--text-h3); color: var(--color-text); }
.steps-note { margin-top: var(--space-5); color: var(--color-text-muted); }

.check-list { display: grid; gap: var(--space-2); padding: 0; list-style: none; }
.check-list li { position: relative; padding-left: var(--space-5); }
.check-list li::before {
  content: ""; position: absolute; left: 2px; top: .4em; width: 6px; height: 11px;
  border-right: 2px solid var(--color-primary); border-bottom: 2px solid var(--color-primary); transform: rotate(45deg);
}

/* ---------- FAQ: heading left, questions right ---------- */
@media (min-width: 1024px) {
  .faq-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); column-gap: var(--space-8); align-items: start; }
  .faq-split__head { position: sticky; top: calc(var(--header-h) + var(--space-5)); }
}
.faq-split__head { display: grid; gap: var(--space-2); margin-bottom: var(--space-5); }
.faq-split__head .section__title { margin-bottom: 0; }

/* ---------- Final call to action ---------- */
.final-cta {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--space-5);
  margin-block: var(--space-6) var(--space-8); padding: var(--space-6);
  background: var(--color-surface); border: 1px solid var(--color-border-strong); border-radius: var(--radius-xl);
}
.final-cta__title { font-size: var(--text-h2); }
.final-cta__btn { min-height: var(--tap-min); padding-inline: var(--space-6); font-weight: 700; }
@media (max-width: 575.98px) { .final-cta__btn { flex: 1 1 100%; justify-content: center; } }