/* ============================================================
   TM3 United — shared layer (loaded after global.css)
   Buttons (pill system), scroll-reveal, generic placeholder.
   Section-specific styling lives in each section's {% style %}.
   ============================================================ */

/* ---- scroll reveal ---- */
.reveal { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  .reveal { opacity: 0; transform: translateY(16px); transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); }
  .reveal.in { opacity: 1; transform: none; }
}

/* ---- TM3 pill buttons — shape here, colors inline (block settings) or via modifier ---- */
.btn {
  border-radius: 1000px;
  font-family: var(--ff-body), sans-serif;
  font-size: 15px;
  font-weight: 500;
  line-height: 1;
  padding: 13px 26px;
  border: 1.5px solid transparent;
  white-space: nowrap;
  gap: 9px;
  transition: background .18s, color .18s, border-color .18s, transform .18s;
}
.btn:active { transform: translateY(1px); }
.btn--filled { background: var(--clr-primary); color: var(--clr-white); border-color: transparent; }
.btn--filled:hover { background: var(--clr-teal-press, #12909A); }
.btn--outline { background: transparent; border-color: currentColor; color: inherit; }
.btn--text {
  background: transparent; border: 0; padding: 6px 2px; color: inherit;
  text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px;
  text-decoration-color: var(--clr-line, rgba(13,58,64,.16));
}
.btn--text:hover { text-decoration-color: currentColor; }
.btn--cream { background: var(--clr-light); color: var(--clr-secondary); border-color: transparent; }
.btn--cream:hover { background: var(--clr-white); }
.btn--ink { background: var(--clr-secondary); color: var(--clr-light); border-color: transparent; }
.btn--ink:hover { background: var(--clr-dark); }

/* ---- generic labelled placeholder (sections may override) ---- */
.tm3-ph {
  background: linear-gradient(135deg, #dfe8e5, #c7dad7);
  border-radius: var(--rounded-lg, 16px);
  display: flex; align-items: center; justify-content: center;
}
.tm3-ph span {
  font-family: var(--ff-accent), monospace;
  font-size: 11px; letter-spacing: .05em; text-transform: uppercase;
  color: var(--clr-muted);
}

/* ---- mono eyebrow with teal dot ---- */
.tm3-eyebrow { display: inline-flex; align-items: center; gap: 10px; }
.tm3-eyebrow::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--clr-primary); flex: none; }
.tm3-eyebrow p { margin: 0; }