/* ================================================================
   BLOG REFINEMENTS — layered over learn.css
   Softer, more readable typography than the technical guides.
   ================================================================ */

/* Hero: keep impact but add breathing room */
.learn-hero { padding: 40px 0 28px; margin-bottom: 8px; }
.learn-hero h1 { font-size: clamp(2rem, 4vw, 3rem); line-height: 1.04; }
.learn-hero .article-lede { font-size: 1.16rem; color: var(--text-2); max-width: 720px; }
.learn-hero .meta-row { font-size: .78rem; color: var(--muted); }
.learn-hero .meta-row .author { color: #fff; }

/* Section headings: sentence-case, blog-sized — not shouty all-caps */
.learn-content h2 {
  text-transform: none;
  font-size: clamp(1.4rem, 2.4vw, 1.72rem);
  line-height: 1.22;
  letter-spacing: -.01em;
  margin: 46px 0 14px;
  display: flex;
  align-items: baseline;
  gap: 12px;
}
.learn-content h2 .num {
  font-size: .8rem;
  flex: none;
  opacity: .9;
  margin-right: 0;
}
.learn-content h3 {
  text-transform: none;
  font-size: 1.12rem;
  letter-spacing: -.005em;
  margin: 30px 0 10px;
}

/* Body copy: comfortable reading rhythm */
.learn-content p { font-size: 1.05rem; line-height: 1.78; color: var(--text-2); margin-bottom: 18px; }
.learn-content ul, .learn-content ol { margin: 0 0 20px; padding-left: 22px; }
.learn-content li { font-size: 1.05rem; line-height: 1.7; color: var(--text-2); margin-bottom: 9px; }
.learn-content li strong, .learn-content p strong { color: #fff; font-weight: 600; }

/* First paragraph after a heading sits a touch closer */
.learn-content h2 + p, .learn-content h3 + p { margin-top: 0; }

/* CTA spacing */
.article-cta { margin: 52px 0 40px; }

/* Mobile */
@media (max-width: 700px) {
  .learn-content { padding: 0 4px 56px; }
  .learn-content h2 { font-size: 1.3rem; }
}


/* Section number chips — clean, professional */
.learn-content h2 {
  display: flex;
  align-items: center;
  gap: 14px;
}
.learn-content h2 .sec-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 26px;
  padding: 0 9px;
  font-family: var(--mono);
  font-size: .74rem;
  font-weight: 700;
  color: var(--red);
  background: rgba(214,31,38,.07);
  border: 1px solid rgba(214,31,38,.32);
  border-radius: 6px;
  letter-spacing: .04em;
  flex: none;
}
@media (max-width: 700px) {
  .learn-content h2 .sec-num { min-width: 28px; height: 23px; font-size: .68rem; }
}