/* Guide and comparison pages (best-personal-crm-apps-iphone, cardhop-alternative, …): long-form
   text on the site's Impreza template. Only what the theme has no component for; colors and fonts
   come from the theme's variables. */
.guide-intro { max-width: 720px; margin: 0 auto; text-align: center; font-size: 1.15rem; }
.guide-updated { margin: 0.75rem 0 0; text-align: center; font-size: 0.9rem; color: var(--color-content-faded); }

.guide-body { max-width: 760px; margin: 0 auto; }
.guide-body h2 { margin: 2.2rem 0 0.8rem; font-size: 1.8rem; }
.guide-body h2:first-child { margin-top: 0; }
.guide-body h3 { margin: 1.8rem 0 0.5rem; font-size: 1.3rem; }
.guide-body h3:first-child { margin-top: 0; }
.guide-body p, .guide-body li { font-size: 1.05rem; }
.guide-body ul, .guide-body ol { margin-bottom: 1.2rem; }
.guide-body li { margin-bottom: 0.4rem; }
.guide-note { font-size: 0.9rem !important; color: var(--color-content-faded); }
.guide-sources li { font-size: 0.9rem; margin-bottom: 0.2rem; }

/* Comparison tables scroll sideways on phones instead of squeezing the columns. */
/* Wider than the text column on large screens, so five columns have room. */
.guide-table { position: relative; left: 50%; width: min(1040px, calc(100vw - 3rem)); transform: translateX(-50%); margin: 0 0 1.2rem; overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--color-content-border); border-radius: 16px; }
.guide-table table { width: 100%; min-width: 560px; margin: 0; border-collapse: collapse; font-size: 0.95rem; }
.guide-table th, .guide-table td { padding: 0.7rem 0.9rem; border: 0; border-bottom: 1px solid var(--color-content-border); text-align: left; vertical-align: top; }
.guide-table tbody tr:last-child th, .guide-table tbody tr:last-child td { border-bottom: 0; }
.guide-table thead th { background: var(--color-content-bg-alt); color: var(--color-content-heading); font-weight: 600; white-space: nowrap; }
.guide-table tbody th { font-weight: 600; color: var(--color-content-heading); }

.guide-card { border: 1px solid var(--color-content-border); }
.guide-cta .guide-cta-icon { width: 88px; height: 88px; border-radius: 20px; box-shadow: 0 6px 18px rgba(0, 0, 0, .12); }
.guide-cta p { max-width: 640px; margin-left: auto; margin-right: auto; }
.guide-fine { margin: 0; text-align: center; font-size: 0.9rem; color: var(--color-content-faded); }