/* ============================================================
   UTILITIES — small, generic, reused-as-is helper classes.
   Not components: no single one owns a visual identity of its
   own, they only save re-typing a handful of declarations that
   showed up identically in 5+ places during the CSS audit.
   ============================================================ */

/* flex column, centered on the cross axis — hero-grid, hero-copy,
   simplicity-grid, simplicity-figure, transparency-grid (mobile flow)
   and the mobile menu list all hand-rolled this exact trio before.
   Gap/other layout props stay with each call site since those
   genuinely differ. */
.flex-col-center {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* shared "feature label" typography — count-word (simplicity) and the
   ingredient-list rows use this exact combination (weight/size/tracking/
   case); only color differs per call site, so it stays a per-selector
   override, not baked into this class. .card-title/.editorial-intro-label
   used to be part of this group but now intentionally match "Join the
   waitlist" (.cta-head-lg) instead, a different (slightly larger, less
   tracked) scale — don't fold them back onto --t-feature-label. Membership's
   .feature-title is also deliberately NOT this class — it's a fixed 14px,
   not this fluid clamp. */
.type-label {
  font-weight: 500;
  font-size: var(--t-feature-label);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

/* content/lines.mjs's br() renders a `{default, lg}` content value as BOTH
   variants at once, each wrapped in one of these marker spans — CSS alone
   picks which is visible, so no JS breakpoint-detection is needed and the
   swap survives the i18n runtime language toggle. display:contents keeps
   the wrapper out of the box tree (so a `.line-group` block or a bare <br>
   inside behaves exactly as if it weren't wrapped); white-space:nowrap on
   the landscape variant is an explicit style on that element, so it always
   beats whatever white-space the containing headline/sub class inherits —
   the landscape line breaks are meant to be exact, not a re-wrappable
   suggestion. */
.lg-default { display: contents; }
.lg-landscape { display: none; white-space: nowrap; }
@media (min-width: 768px) and (max-height: 600px) {
  .lg-default { display: none; }
  .lg-landscape { display: contents; }
}