/* Guide article (builds on styles.css, same components as the landing page) */
.article-hero {
  position: relative;
  padding-top: clamp(56px, 9vw, 120px);
  padding-bottom: clamp(40px, 6vw, 80px);
}
.article-hero .hero-copy {
  max-width: 820px;
}
.article-hero h1 {
  font-size: clamp(2.6rem, 5.8vw, 4.8rem);
}
.article-hero .btn-ghost {
  min-height: 48px;
}
.intro {
  padding-top: 0;
}
.intro-copy {
  max-width: 760px;
}
.intro-copy .h2 {
  margin-bottom: 24px;
}
.intro-copy .intro-lede + .intro-lede,
.local-copy .intro-lede {
  margin-top: 16px;
}
.features-head .intro-lede {
  margin-top: 16px;
}
.bad-quote {
  margin: 24px 0 0;
  padding: 16px 20px;
  border-left: 2px solid var(--lime);
  border-radius: 0 10px 10px 0;
  background: var(--panel);
  color: var(--text);
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.4rem;
}
.local-grid {
  align-items: start;
}
.points.narrow {
  max-width: 760px;
  margin: 0 auto;
}
.feature-icon.is-num {
  font: 500 13px var(--mono);
}
.feature a {
  color: var(--lime);
}
.feature code,
.note code {
  font: 0.86em var(--mono);
  background: var(--raised-2);
  padding: 3px 6px;
  border-radius: 6px;
  overflow-wrap: anywhere;
}
.note {
  padding: 20px 24px;
  border-radius: 14px;
  border: 1px solid rgba(198, 243, 107, 0.25);
  background: rgba(198, 243, 107, 0.05);
}
.note p {
  margin: 0;
  color: var(--muted);
  font-size: 15.5px;
}
.note .note-label {
  margin: 0 0 8px;
  font: 500 12px/1.3 var(--mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--lime);
}
.note-wide {
  margin-top: 24px;
  max-width: 760px;
}
.compare {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
  gap: 24px;
  margin-bottom: 64px;
  align-items: start;
}
.code-card {
  min-width: 0;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: var(--panel);
  overflow: hidden;
}
.code-card.is-good {
  border-color: rgba(198, 243, 107, 0.25);
}
.code-label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0;
  padding: 12px 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  font: 500 12px/1.3 var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.code-label .tag {
  color: var(--faint);
}
.is-good .code-label .tag {
  color: var(--lime);
}
.code-card pre {
  margin: 0;
  padding: 20px;
  overflow-x: auto;
  font: 13px/1.7 var(--mono);
  color: var(--text);
}
.code-card pre code {
  font: inherit;
}
.template-card {
  max-width: 760px;
}
.article-end {
  padding-bottom: 0;
}
.ea-copy .hero-ctas {
  margin: 24px 0 20px;
  animation: none;
}
@media (max-width: 640px) {
  .bad-quote {
    font-size: 1.2rem;
  }
}