/* Per-app /bay/<app>/learn/ marketing pages.
   Reuses article-body, feature-grid, faq, accordion, cta-band, breadcrumbs.
   This file holds only the page-scoped chrome: breadcrumb spacing, hero
   proportions, and a status row that echoes the bay-tool look. */

.page-bay-learn__breadcrumbs {
  /* Below the fixed header (it is solid since plan 31, Р2 — at 48 px the trail sat under it, unseen; Р5). */
  padding-top: calc(var(--nav-h, 76px) + var(--sp-5));
  padding-bottom: var(--sp-2);
}

.page-bay-learn__hero {
  padding-top: var(--sp-7);
  padding-bottom: var(--sp-section);
  position: relative;
}

.page-bay-learn__hero-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: var(--radius-md);
  background: var(--c-tint);
  color: var(--c-accent-2);
  margin-bottom: var(--sp-5);
}
.page-bay-learn__hero-icon img { width: 36px; height: 36px; display: block; }

.page-bay-learn__hero h1 {
  font-size: var(--fs-800);
  line-height: 0.96;
  letter-spacing: -0.03em;
  font-variation-settings: "opsz" 144, "SOFT" 50, "wght" 400;
}
.page-bay-learn__hero h1 em {
  font-style: italic;
  font-variation-settings: "opsz" 144, "SOFT" 100, "wght" 400;
  color: var(--c-accent);
}

.page-bay-learn__lead {
  margin-top: var(--sp-4);
  max-width: 60ch;
  font-size: var(--fs-400);
  line-height: var(--lh-snug);
  color: var(--c-text-2);
  letter-spacing: -0.005em;
}

.page-bay-learn__status-row {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  flex-wrap: wrap;
  margin-top: var(--sp-5);
  font-size: var(--fs-100);
}
.page-bay-learn__status-row .bay-tool__status,
.page-bay-learn__status-row .bay-tool__meta {
  /* tokens already defined on bay.css; reused as-is. */
}

.page-bay-learn__actions {
  display: flex;
  gap: var(--sp-3);
  flex-wrap: wrap;
  margin-top: var(--sp-7);
}

/* Slightly tighter section rhythm than the marketing site default. */
.page-bay-learn .section { padding-block: var(--sp-9); }
.page-bay-learn .section + .section { padding-top: 0; }

.page-bay-learn__section-head {
  margin-bottom: var(--sp-7);
  max-width: 26ch;
}
.page-bay-learn__section-head .eyebrow { display: block; margin-bottom: var(--sp-3); }
.page-bay-learn__section-head h2 {
  font-family: var(--ff-display);
  font-variation-settings: "opsz" 144, "SOFT" 50, "wght" 500;
  font-size: var(--fs-700);
  letter-spacing: var(--ls-display);
  line-height: var(--lh-tight);
}
.page-bay-learn__section-head h2 em {
  font-style: italic;
  font-variation-settings: "opsz" 144, "SOFT" 100, "wght" 400;
  color: var(--c-accent);
}