/* learn-hero.css — shared hero chrome for every /learn/* Resources page.
 *
 * WHY THIS EXISTS (s228 b04): the eyebrow pill + hero centering used to be COPY-PASTED
 * into each page's own CSS (4 per-page learn-*.css files + inline <style> on features
 * and ota-onboarding). Because it was duplicated, it drifted — features + ota-onboarding
 * were missing the `text-align:center`, so their pill sat left while the other pages were
 * centered. Defining it ONCE here, linked by every Resources page AFTER its own stylesheet,
 * makes the format a single source of truth so it can't drift again.
 *
 * `.hero .label` is used ONLY on /learn/* pages (verified s228 b04), so this is safe to
 * share without colliding with the app pages' unrelated `.label` usage.
 */

.hero { text-align: center; }

.hero .label {
  display: inline-block;
  margin-bottom: 12px;
  padding: 4px 12px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  background: rgba(15, 95, 95, 0.10);
  border: 1px solid rgba(15, 95, 95, 0.22);
  color: #0f5f5f;
  border-radius: 999px;
}

/* s228 content-strategy — shared main-page template: one-line TL;DR + 3 key
 * bullets + a "read more" collapse. Defined ONCE here so every /learn/* page
 * that links this file gets the identical treatment (no per-page drift). */
.hero .tldr {
  font-size: 16px; color: #2b2b28; max-width: 640px; margin: 0 auto 12px;
  font-weight: 500; line-height: 1.45;
}
.hero .key-points {
  list-style: none; display: flex; flex-wrap: wrap; justify-content: center;
  gap: 6px 20px; padding: 0; margin: 0 auto; max-width: 680px;
  font-size: 13.5px; color: #57564f;
}
.hero .key-points li { display: flex; align-items: center; gap: 6px; }
.hero .key-points li::before { content: "\2713"; color: #0f5f5f; font-weight: 700; }
/* collapse block for long explanations moved below the fold / into detail */
details.stm-more { margin: 12px 0; text-align: left; }
details.stm-more > summary {
  cursor: pointer; color: #0f5f5f; font-weight: 600; font-size: 14.5px;
  list-style-position: inside;
}
details.stm-more[open] > summary { margin-bottom: 8px; }