.hw-learning-serving-subtitle {
  max-width: 850px;
  margin: 1rem 0 0;
  color: var(--hw-article-muted);
  font-family: var(--hw-article-serif);
  font-size: clamp(1.3rem, 2.2vw, 1.75rem);
  line-height: 1.35;
}

.hw-learning-serving-objectives,
.hw-learning-serving-definition,
.hw-learning-serving-management,
.hw-learning-serving-training {
  margin: 2rem 0 3rem;
  padding: clamp(1.35rem, 3vw, 2rem);
  border: 1px solid var(--hw-article-line);
  border-radius: 7px;
}

.hw-learning-serving-objectives {
  background: var(--hw-article-cream);
  border-left: 4px solid var(--hw-article-gold);
}

.hw-learning-serving-objectives h2,
.hw-learning-serving-definition h2,
.hw-learning-serving-management h2,
.hw-learning-serving-training h2 {
  margin: .25rem 0 1.15rem;
  font-family: var(--hw-article-serif);
  font-size: clamp(2rem, 3.6vw, 3rem);
  font-weight: 500;
  line-height: 1.05;
}

.hw-learning-serving-objectives ul {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .65rem 1.4rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.hw-learning-serving-objectives li,
.hw-learning-serving-checklist li {
  position: relative;
  padding-left: 1.6rem;
}

.hw-learning-serving-objectives li::before,
.hw-learning-serving-checklist li::before {
  position: absolute;
  top: .15em;
  left: 0;
  color: var(--hw-article-gold);
  font-weight: 700;
  content: "✓";
}

.hw-learning-serving-definition {
  background: var(--hw-article-plum);
  color: var(--hw-article-paper);
}

.hw-learning-serving-definition .hw-article-kicker,
.hw-learning-serving-definition strong { color: var(--hw-article-gold-light); }
.hw-learning-serving-definition h2 { color: var(--hw-article-paper); }
.hw-learning-serving-definition blockquote {
  margin: 1.2rem 0;
  padding: 0 0 0 1.25rem;
  border-left: 2px solid var(--hw-article-gold);
  color: var(--hw-article-paper);
  font-family: var(--hw-article-serif);
  font-size: clamp(1.45rem, 2.5vw, 2rem);
  line-height: 1.35;
}
.hw-learning-serving-definition p { color: rgba(255, 253, 249, .82); }

.hw-learning-serving-compare,
.hw-learning-serving-study-card,
.hw-learning-serving-method-grid,
.hw-learning-serving-pro-con,
.hw-learning-serving-case-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  margin: 1.4rem 0 2rem;
}

.hw-learning-serving-compare article,
.hw-learning-serving-study-card > div,
.hw-learning-serving-method-grid > div,
.hw-learning-serving-pro-con > div,
.hw-learning-serving-case-grid article {
  padding: clamp(1.25rem, 2.5vw, 1.8rem);
  background: var(--hw-article-paper);
  border: 1px solid var(--hw-article-line);
  border-radius: 7px;
}

.hw-learning-serving-compare article:first-child { border-top: 4px solid var(--hw-article-plum); }
.hw-learning-serving-compare article:last-child { border-top: 4px solid var(--hw-article-gold); }
.hw-learning-serving-compare article > span,
.hw-learning-serving-card-grid article > span,
.hw-learning-serving-case-grid article > span {
  color: var(--hw-article-gold);
  font-size: .69rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.hw-learning-serving-compare h3 { margin: .45rem 0 .8rem; font-size: clamp(1.6rem, 3vw, 2.25rem); }
.hw-learning-serving-compare p { font-size: .8rem; }
.hw-learning-serving-compare ul { margin: .8rem 0 0; padding-left: 1.1rem; }
.hw-learning-serving-compare li { margin-bottom: .35rem; }

.hw-learning-serving-photo,
.hw-learning-serving-infographic {
  margin: 1.8rem 0 2.5rem;
}
.hw-learning-serving-photo img,
.hw-learning-serving-infographic img {
  display: block;
  width: 100%;
  height: auto;
  background: var(--hw-article-paper);
  border: 1px solid var(--hw-article-line);
  border-radius: 7px;
  box-shadow: 0 14px 34px rgba(42, 22, 38, .1);
}
.hw-learning-serving-photo img { aspect-ratio: 4 / 3; object-fit: cover; }
.hw-learning-serving-infographic { max-width: 920px; margin-inline: auto; }
.hw-learning-serving-infographic a { display: block; color: inherit; }
.hw-learning-serving-photo figcaption,
.hw-learning-serving-infographic figcaption {
  margin-top: .65rem;
  color: var(--hw-article-muted);
  font-size: .72rem;
  line-height: 1.55;
}

.hw-learning-serving-study-card h3,
.hw-learning-serving-method-grid h3,
.hw-learning-serving-pro-con h3 { margin-top: .2rem; }
.hw-learning-serving-study-card ul,
.hw-learning-serving-method-grid ul,
.hw-learning-serving-pro-con ul { padding-left: 1.1rem; }

.hw-learning-serving-card-grid,
.hw-learning-serving-decision-grid,
.hw-learning-serving-error-grid,
.hw-learning-serving-examples {
  display: grid;
  gap: 1rem;
  margin: 1.5rem 0 2.2rem;
}
.hw-learning-serving-card-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.hw-learning-serving-decision-grid,
.hw-learning-serving-error-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.hw-learning-serving-examples { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.hw-learning-serving-card-grid article,
.hw-learning-serving-decision-grid article,
.hw-learning-serving-error-grid article,
.hw-learning-serving-examples article {
  padding: 1.25rem;
  background: var(--hw-article-paper);
  border: 1px solid var(--hw-article-line);
  border-radius: 7px;
}
.hw-learning-serving-card-grid h3,
.hw-learning-serving-decision-grid h3,
.hw-learning-serving-error-grid h3,
.hw-learning-serving-examples h4 { margin: .45rem 0 .65rem; }
.hw-learning-serving-card-grid p,
.hw-learning-serving-decision-grid p,
.hw-learning-serving-error-grid p,
.hw-learning-serving-examples p { margin-bottom: .7rem; font-size: .79rem; }
.hw-learning-serving-decision-grid span {
  display: inline-grid;
  width: 2rem;
  height: 2rem;
  place-items: center;
  background: var(--hw-article-plum);
  border-radius: 50%;
  color: var(--hw-article-gold-light);
  font-size: .68rem;
  font-weight: 700;
}
.hw-learning-serving-error-grid article { border-left: 3px solid var(--hw-article-gold); }

.hw-learning-serving-steps {
  margin: 1rem 0 1.8rem;
  padding: 0;
  list-style: none;
  counter-reset: serving-step;
}
.hw-learning-serving-steps li {
  position: relative;
  min-height: 2rem;
  margin-bottom: .65rem;
  padding: .35rem 0 .35rem 2.8rem;
  counter-increment: serving-step;
}
.hw-learning-serving-steps li::before {
  position: absolute;
  top: 0;
  left: 0;
  display: grid;
  width: 2rem;
  height: 2rem;
  place-items: center;
  background: var(--hw-article-cream);
  border: 1px solid var(--hw-article-gold-light);
  border-radius: 50%;
  color: var(--hw-article-plum);
  font-size: .68rem;
  font-weight: 700;
  content: counter(serving-step, decimal-leading-zero);
}

.hw-learning-serving-case {
  padding: clamp(1.35rem, 3vw, 2rem);
  background: var(--hw-article-cream);
  border-left: 4px solid var(--hw-article-gold);
}
.hw-learning-serving-case-grid article { box-shadow: 0 8px 22px rgba(42, 22, 38, .06); }
.hw-learning-serving-case-grid ul { margin-bottom: 0; padding-left: 1.1rem; }

.hw-learning-serving-management { background: rgba(42, 22, 38, .045); }
.hw-learning-serving-checklist {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .65rem 1.4rem;
  margin: 1.4rem 0;
  padding: 0;
  list-style: none;
}
.hw-learning-serving-checklist li {
  padding: .8rem .8rem .8rem 2.4rem;
  background: var(--hw-article-paper);
  border: 1px solid var(--hw-article-line);
  border-radius: 5px;
  font-size: .78rem;
}
.hw-learning-serving-checklist li::before { top: .75rem; left: .85rem; }
.hw-learning-serving-training { background: var(--hw-article-cream); }

.hw-learning-serving-quiz .hw-article-faq summary {
  gap: .7rem;
}
.hw-learning-serving-quiz .hw-article-faq summary > strong {
  flex: 0 0 auto;
  color: var(--hw-article-gold);
  font-size: .68rem;
}
.hw-learning-serving-quiz .hw-article-faq summary > span { margin-left: auto; }

.hw-article-table-wrap:focus-visible,
.hw-learning-serving-infographic a:focus-visible {
  outline: 3px solid var(--hw-article-gold-light);
  outline-offset: 3px;
}

@media (max-width: 980px) {
  .hw-learning-serving-card-grid { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
  .hw-learning-serving-objectives ul,
  .hw-learning-serving-compare,
  .hw-learning-serving-study-card,
  .hw-learning-serving-method-grid,
  .hw-learning-serving-pro-con,
  .hw-learning-serving-decision-grid,
  .hw-learning-serving-error-grid,
  .hw-learning-serving-examples,
  .hw-learning-serving-case-grid,
  .hw-learning-serving-checklist {
    grid-template-columns: 1fr;
  }
  .hw-learning-serving-photo,
  .hw-learning-serving-infographic { margin-block: 1.35rem 2rem; }
}

@media (prefers-reduced-motion: reduce) {
  .hw-article-serving * { scroll-behavior: auto !important; }
}