/* Guide article styles */

.guide-hero {
  background: var(--navy);
  padding: 120px 0 64px;
}

.guide-hero__inner {
  max-width: 760px;
}

.guide-back {
  display: inline-block;
  color: var(--blue-l);
  font-size: .875rem;
  font-weight: 500;
  text-decoration: none;
  margin-bottom: 24px;
  opacity: .8;
  transition: opacity var(--trans);
}

.guide-back:hover {
  opacity: 1;
}

.guide-hero .section__tag {
  margin-bottom: 16px;
}

.guide-hero h1 {
  font-size: clamp(1.75rem, 3.5vw, 2.75rem);
  font-weight: 800;
  color: var(--white);
  line-height: 1.2;
  margin-bottom: 20px;
}

.guide-hero__sub {
  font-size: 1.1rem;
  color: var(--dark-text);
  line-height: 1.75;
  max-width: 660px;
}

.guide-body {
  padding: 72px 0 96px;
  background: var(--white);
}

.guide-body__inner {
  max-width: 760px;
}

.guide-article h2 {
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--navy);
  margin: 48px 0 16px;
}

.guide-article h2:first-child {
  margin-top: 0;
}

.guide-article h3 {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--navy);
  margin: 32px 0 12px;
}

.guide-article p {
  font-size: 1rem;
  color: var(--text);
  line-height: 1.8;
  margin-bottom: 20px;
}

.guide-article ul,
.guide-article ol {
  margin: 0 0 24px 0;
  padding-left: 24px;
}

.guide-article li {
  font-size: 1rem;
  color: var(--text);
  line-height: 1.75;
  margin-bottom: 10px;
}

.guide-article pre {
  background: var(--off);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 16px 20px;
  overflow-x: auto;
  margin: 24px 0;
}

.guide-article code {
  font-family: 'Courier New', Courier, monospace;
  font-size: .875rem;
  color: var(--navy);
}

.guide-cta {
  background: var(--sky);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 40px 36px;
  margin-top: 56px;
}

.guide-cta h3 {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 12px;
}

.guide-cta p {
  color: var(--muted);
  margin-bottom: 24px;
}