/* W383/W392 niche landing pages (/sleep /breathing /guided-meditation /calm; web_templates/_niche_hero.html, _niche_sessions.html). Tokens from brand.css; light and dark follow them.
   The .niche-* classes had no rule at all (R2-3 #26), so the cards rendered as a bare list. Loaded by learn_page.html only when the page is a niche. */
.niche-hero { margin: var(--space-4, 16px) 0; }
.niche-hero .sample-btn { width: 100%; }
.niche-hero .sample-pre, .niche-hero .sample-fine { margin: 6px 0 0; }
.niche-hero .fv-after { margin: var(--space-3, 12px) 0 0; padding: var(--space-3, 12px) var(--space-4, 16px); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-card, 14px); }
.niche-sessions { list-style: none; margin: var(--space-4, 16px) 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.niche-session { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; padding: var(--space-3, 12px) var(--space-4, 16px);
  background: var(--surface); color: var(--text); border: 1px solid var(--line); border-radius: var(--radius-card, 14px); }
.niche-session a { color: inherit; display: inline-flex; align-items: center; min-height: 44px; }
.niche-session .sample-btn { min-height: 44px; }
@media (min-width: 700px) { .niche-hero .sample-btn { width: auto; min-width: 16rem; } .niche-sessions { grid-template-columns: repeat(2, minmax(0, 1fr)); } }