/* Guide readability layer (2026-10-21).
   Loaded only by /guide/ articles, after blog.css. Scoped to .article-section
   and the FAQ block so product promos, header and footer keep their styles. */

.article-section,
.faq-section {
    --gr-ink: #14213d;
    --gr-text: #2b3442;
    --gr-muted: #556070;
    --gr-link: #1d5fd1;
    --gr-rule: #e3e8ef;
    --gr-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
}

/* One plain typeface for the whole reading area */
.article-section,
.article-section p,
.article-section li,
.article-section td,
.article-section th,
.article-section h1,
.article-section h2,
.article-section h3,
.article-section h4,
.faq-section,
.faq-section h2,
.faq-section h3,
.faq-section p {
    font-family: var(--gr-font);
}

/* Comfortable measure: ~70-80 characters per line instead of ~120 */
.article-section .article-content,
.article-section .col-md-10 > .text-center {
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}
/* Old template (no .article-content): constrain the whole column, not just the intro */
.article-section .col-md-10.col-md-offset-1:not(:has(> .article-content)) {
    float: none;
    width: 100%;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}
.article-section .col-md-10:not(:has(> .article-content)) > .text-center { max-width: none; }

/* Wide comparison tables break out of the text column on desktop so no column is hidden */
@media (min-width: 992px) {
    .article-section .article-content > div:has(> table),
    .article-section .article-content > table {
        position: relative;
        left: 50%;
        width: min(1100px, calc(100vw - 64px));
        max-width: none;
        transform: translateX(-50%);
    }
    .article-section .article-content > div:has(> table) > table { width: 100%; }
}

/* Old template wrapped the whole article in .text-center; long text reads better left-aligned */
.article-section .col-md-10 > .text-center p,
.article-section .col-md-10 > .text-center ul,
.article-section .col-md-10 > .text-center ol,
.article-section .col-md-10 > .text-center h3,
.article-section .col-md-10 > .text-center h4 {
    text-align: left;
}

/* Title */
.article-section h1,
.article-section h1.article-title {
    font-size: 40px;
    line-height: 1.2;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--gr-ink);
}

/* Body copy: lists match paragraphs (were 14px vs 16px) */
.article-section p,
.article-section li {
    font-size: 17px;
    line-height: 1.75;
    color: var(--gr-text);
}
.article-section p { margin: 0 0 20px; }
.article-section p.lead {
    font-size: 19px;
    line-height: 1.65;
    color: var(--gr-muted);
}
.article-section ul,
.article-section ol { padding-left: 1.4em; margin: 0 0 22px; }
.article-section li { margin-bottom: 8px; }
.article-section li > ul,
.article-section li > ol { margin: 8px 0 0; }
.article-section strong,
.article-section b { color: var(--gr-ink); font-weight: 700; }

/* Headings: clear hierarchy and breathing room between sections */
.article-section h2 {
    font-size: 28px;
    line-height: 1.3;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--gr-ink);
    margin: 52px 0 16px;
    scroll-margin-top: 90px;
}
.article-section h3 {
    font-size: 21px;
    line-height: 1.35;
    font-weight: 700;
    color: var(--gr-ink);
    margin: 32px 0 12px;
    scroll-margin-top: 90px;
}
.article-section h4 {
    font-size: 18px;
    line-height: 1.4;
    font-weight: 700;
    color: var(--gr-ink);
    margin: 24px 0 10px;
}

/* Links in running text */
.article-section p a,
.article-section li a,
.article-section td a {
    color: var(--gr-link);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}
.article-section p a:hover,
.article-section li a:hover,
.article-section td a:hover { text-decoration-thickness: 2px; }

/* Tables: readable size, roomy cells, scroll instead of squash on phones */
.article-section table {
    font-size: 15px;
    line-height: 1.5;
}
.article-section table th,
.article-section table td {
    padding: 12px 14px;
    vertical-align: top;
}
.article-section table td { color: var(--gr-text); }

/* Numbered steps: badge hangs in the gutter so wrapped lines align with the text */
.article-section p:has(> .step-number:first-child) {
    position: relative;
    padding-left: 46px;
}
.article-section p > .step-number:first-child {
    position: absolute;
    left: 0;
    top: 0;
    margin: 0;
}

/* Inline code readable inside prose */
.article-section p code,
.article-section li code {
    font-size: 0.88em;
    padding: 2px 6px;
    border-radius: 4px;
    background: #f1f4f8;
    color: #1f2937;
    word-break: break-word;
}

/* FAQ answers match body copy */
.faq-section .faq-answer-content p {
    font-size: 16px;
    line-height: 1.7;
    color: var(--gr-text);
}
.faq-section .faq-question-text h3 {
    font-size: 17px;
    line-height: 1.45;
}

/* Phones */
@media (max-width: 767px) {
    .article-section { padding-top: 32px; padding-bottom: 32px; }
    .article-section h1,
    .article-section h1.article-title { font-size: 29px; }
    .article-section h2 { font-size: 24px; margin-top: 40px; }
    .article-section h3 { font-size: 19px; }
    .article-section p,
    .article-section li { font-size: 16.5px; line-height: 1.7; }
    .article-section p.lead { font-size: 17.5px; }
    .article-section table { font-size: 14px; }
    .article-section table th,
    .article-section table td { padding: 10px; }
}