/* ============================================================
   LAYOUT — containers, grids, section rhythm
   ============================================================ */

.container {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: clamp(1.1rem, 4vw, 2rem);
  position: relative;
  z-index: 1;
}
.container--narrow { max-width: var(--maxw-narrow); }

.section { padding-block: clamp(3rem, 6vw, 5rem); position: relative; }
.section--surface { background: var(--bg-2); border-block: 1px solid var(--border); }

/* Faded photo backgrounds — a real WFH/office/laptop photo peeking in from
   one edge, masked to fade to nothing toward the opposite edge and toward
   the text column, alternating which side per section so consecutive
   sections don't repeat the same layout rhythm. Decorative only — opacity
   is low enough that it never competes with body text contrast. */
.section__photo-bg {
  position: absolute; inset: 0; z-index: 0;
  background-size: cover; background-position: center;
  opacity: 0.11;
  pointer-events: none;
}
.section__photo-bg--l {
  -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 26%, transparent 70%);
          mask-image: linear-gradient(90deg, #000 0%, #000 26%, transparent 70%);
}
.section__photo-bg--r {
  -webkit-mask-image: linear-gradient(270deg, #000 0%, #000 26%, transparent 70%);
          mask-image: linear-gradient(270deg, #000 0%, #000 26%, transparent 70%);
}
@media (max-width: 720px) { .section__photo-bg { opacity: 0.06; } }

.section__head { max-width: 660px; margin-bottom: clamp(1.8rem, 4vw, 2.6rem); }
.section__head--center { margin-inline: auto; text-align: center; }

.section__title { font-size: var(--step-3); margin-bottom: 0.6rem; }
.section__lead { font-size: var(--step-1); color: var(--muted); }

.grid { display: grid; gap: var(--space); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 900px) {
  .grid--3, .grid--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 680px) {
  .grid--2 { grid-template-columns: 1fr; }
}
/* NOTE: grid--3/--4 deliberately stay 2-column all the way down to phone
   width — small item groups (pain cards, stat chips) should stay compact
   side-by-side, not stack into tall single-column towers. */
@media (max-width: 420px) {
  .grid--3, .grid--4 { gap: 0.7rem; }
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: var(--space-sm);
}
.eyebrow i { width: 15px; height: 15px; }
.eyebrow--live { color: var(--green); }
.eyebrow .dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--green); box-shadow: 0 0 8px var(--green);
  animation: pulse 1.6s var(--ease) infinite;
}