/*
 * Template-backed comparison brief refinement. The intro content is now a
 * dedicated brief column, so it can sit beside the title instead of stacking.
 */
.comparison-lead.card {
  align-items: start;
  padding-top: clamp(22px, 3vw, 34px);
  padding-bottom: clamp(18px, 2.5vw, 26px);
}

.comparison-lead-copy,
.comparison-lead-brief {
  display: grid;
  gap: 14px;
}

.comparison-lead-copy {
  grid-column: 1;
  align-content: start;
}

.comparison-lead .comparison-lead-copy .section-kicker,
.comparison-lead .comparison-lead-copy h1,
.comparison-lead .comparison-lead-brief {
  grid-column: auto;
}

.comparison-lead .comparison-lead-copy h1 {
  max-width: 14ch;
  font-size: clamp(2.45rem, 4vw, 4.05rem);
  line-height: 0.95;
}

.comparison-lead-brief {
  grid-column: 2;
  align-self: end;
  max-width: 42rem;
  padding: 0 0 0 clamp(18px, 2.4vw, 28px);
  border-left: 1px solid var(--o4-premium-line);
  gap: 10px;
}

.comparison-lead-brief > :first-child {
  margin-top: 0;
}

.comparison-lead-brief h2,
.comparison-lead-brief h3 {
  margin: 0;
  color: #f4f1e9;
  font-size: 0.98rem;
  line-height: 1.2;
}

.comparison-lead-brief p,
.comparison-lead-brief li {
  margin: 0;
  color: rgba(238, 240, 242, 0.66);
  font-size: 0.86rem;
  line-height: 1.42;
}

.comparison-lead-brief ul,
.comparison-lead-brief ol {
  display: grid;
  gap: 4px;
  margin: 0;
  padding-left: 18px;
}

.comparison-lead-brief > p:last-child {
  display: none;
}

.collection-shell-header h1,
.article-shell-use-case .article-header h1,
.article-shell-coverage h1 {
  max-width: 13.5ch;
  font-size: clamp(2.45rem, 4vw, 4.2rem);
  line-height: 0.98;
}

@media (max-width: 1180px) {
  .comparison-lead-copy,
  .comparison-lead-brief {
    grid-column: 1;
  }

  .comparison-lead-brief {
    padding-left: 0;
    border-left: 0;
  }
}