/* Shared page anatomy adopted by PDF workbench tools and the world map. */
.hero { max-width: 850px; margin: 42px auto 54px; text-align: center; }
.eyebrow, .step-label {
  margin: 0 0 12px;
  color: var(--tools-green-strong);
  font: 700 .72rem/1.3 var(--tools-mono);
  letter-spacing: .12em;
  text-transform: uppercase;
}
.hero h1 {
  max-width: 900px;
  margin: 0 auto;
  font-family: var(--tools-serif);
  font-size: clamp(2.7rem, 6vw, 4.9rem);
  font-weight: 500;
  line-height: .98;
  letter-spacing: -.055em;
}
.hero-copy { max-width: 680px; margin: 28px auto 0; color: var(--tools-muted); font-size: clamp(1rem, 2vw, 1.16rem); line-height: 1.75; }
.hero-proof { display: flex; flex-wrap: wrap; justify-content: center; gap: 9px 20px; margin: 22px 0 0; padding: 0; color: var(--tools-green-strong); font-size: .77rem; font-weight: 750; list-style: none; }
.hero-proof li { display: inline-flex; align-items: center; gap: 7px; }
.hero-proof svg { width: 15px; height: 15px; flex: 0 0 auto; }

.guide { margin: 76px 0 44px; }
.guide-heading { max-width: 760px; }
.guide-grid { margin-top: 28px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.guide-grid article { padding: 22px; border: 1px solid var(--tools-line); border-radius: 15px; background: color-mix(in srgb, var(--tools-surface) 82%, transparent); }
.guide-grid article > span { width: 34px; height: 34px; display: grid; place-items: center; color: var(--tools-green-strong); }
.guide-grid svg { width: 28px; height: 28px; }
.guide-grid h3 { margin: 14px 0 8px; font-size: .93rem; }
.guide-grid p, .limits-note { margin: 0; color: var(--tools-muted); font-size: .78rem; line-height: 1.65; }
.limits-note { margin-top: 17px; }
.guide-heading h2 { margin: 0; font-family: var(--tools-serif); font-size: clamp(1.9rem, 5vw, 2.7rem); font-weight: 500; letter-spacing: -.035em; }
.guide-heading > p:last-child { max-width: 650px; margin: 10px 0 0; color: var(--tools-muted); line-height: 1.65; }
@media (max-width: 820px) { .guide-grid { grid-template-columns: 1fr; } }
@media (max-width: 620px) {
  .hero { margin: 28px auto; }
  .hero h1 { font-size: clamp(2.35rem, 13vw, 3.35rem); }
  .guide { margin-top: 58px; }
}