.band {
  width: 100%;
  padding: 4rem var(--page-gutter);
  box-sizing: border-box;
}

.band-inner {
  max-width: var(--layout-max-width);
  margin: 0 auto;
}

.band--base {
  background-color: var(--color-bg-base);
  color: var(--color-text-base);
}

.band--base + .band--base {
  border-top: 1px solid var(--color-separator);
}

.band--green {
  background-color: var(--color-bg-green);
  color: var(--color-text-green);
  overflow: hidden;
}

/* ── Shared utility: highlighted image border ── */
.img--highlighted {
  outline: 2px solid var(--color-highlight);
  outline-offset: 6px;
}

/* ── Shared utility: responsive 2-column grid ── */
.grid-2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--grid-gap);
}

.grid-2col > * {
  min-width: 0;
}

@media (max-width: 640px) {
  .grid-2col {
    grid-template-columns: 1fr;
  }
}

/* ── Shared utility: rounded image/media frame ── */
.rounded-frame {
  border-radius: var(--radius-md);
  overflow: hidden;
}

.rounded-frame img,
.rounded-frame iframe {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ── Shared utility: decorative blob/pebble pseudo-elements ── */
.blob-shape::before {
  content: '';
  position: absolute;
  background: var(--color-separator);
  pointer-events: none;
}

.blob-shape::after {
  content: '';
  position: absolute;
  background: transparent;
  border: 2px solid var(--color-highlight);
  opacity: 0.5;
  pointer-events: none;
}

/* ── Legal-style content pages ── */
.legal-page p {
  margin: 0 0 0.45em;
  line-height: 1.4;
}

.legal-page h1:not(.section-heading) {
  margin: 1.4rem 0 0.45rem;
}

.legal-page a {
  color: inherit;
  word-break: break-word;
}