/* ==========================================================================
   Life Happens Here — site.css

   Overrides of core.css, loaded by every page AFTER core.css so they win on
   source order. Kept here rather than edited into core.css, which is a
   verbatim copy of the Claude Design export and gets overwritten on re-sync.
   ========================================================================== */

/* Play affordance: a square frosted panel with the triangle above a label,
   replacing the round white badge core.css draws. */
.play-badge {
  flex-direction: column;
  gap: 14px;
  width: clamp(180px, 34%, 300px);
  height: auto;
  aspect-ratio: 1;
  border-radius: 0;
  padding-left: 0;
  background: rgba(10, 24, 14, 0.32);
  color: #fff;
  text-align: center;
}

.play-badge svg { display: block; }

.play-badge__label {
  font-family: var(--lph-font-sans);
  font-weight: 500;
  font-size: clamp(15px, 1.5vw, 21px);
  line-height: 1;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.hero__media:hover .play-badge,
.hero__media:focus-visible .play-badge {
  background: rgba(10, 24, 14, 0.44);
  transform: translate(-50%, -50%) scale(1.03);
}

/* Wide column gutters are negative row margins that the container's padding
   cannot absorb once the halves stack, which pushed both pages past the
   viewport below 576px. Back to Bootstrap's gutter wherever they stack. */
@media (max-width: 991.98px) {
  .split { --bs-gutter-x: 24px; }
  .faq-head .row { --bs-gutter-x: 24px; }
}