/* ════════════════════════════════════════════════════════════════════════════════════════════════════════════════
   THE CONTENT PAGES' STYLES (SEO plan §5): /challan, /challan/{state}, /how-it-works, /faqs, /blog, /blog/{slug}, and the
   new bands of the home and track pages.

   HAND-WRITTEN ON PURPOSE. app.css is a COMPILED Tailwind build: a utility class that is not already in it silently
   does nothing (the trap _Layout's own style block records three times). Markup on these pages therefore uses only
   classes that are already in app.css, and everything new is a named class here, built on the same theme variables
   (--color-navy-900, --color-gold, --font-display …) so the pages read as one site. Served from 'self', so the CSP
   needs no nonce for it, and no rule here may be moved into a style="" attribute (ContentSecurityPolicyTests).

   Every layout is mobile-first and fits a 390px phone without the PAGE scrolling sideways: only a table scrolls, inside
   its own .table-scroll box.
   ════════════════════════════════════════════════════════════════════════════════════════════════════════════════ */

/* ── Shared shells ────────────────────────────────────────────────────────────────────────────────────────────── */
.content-shell,
.content-shell-inner {
    width: 100%;
    max-width: 72rem;
    margin-inline: auto;
    padding-inline: 1.25rem;
}

.content-shell { padding-top: 2.5rem; padding-bottom: 3.5rem; }

.content-section { margin-top: 2.75rem; min-width: 0; }
.content-section:first-child { margin-top: 0; }

/* A full-width band between two shells (/how-it-works' three steps). The shells' own padding would stack with the band's
   (about 220px of empty page above the steps at 1366px), so the shell before the band drops its bottom padding and the
   shell after it its top: the band's padding is then the whole gap. */
.content-band { padding-block: 3rem; }
.content-shell.content-shell-before-band { padding-bottom: 0; }
.content-shell.content-shell-after-band { padding-top: 0; }

/* Running text written on the page keeps the reading width of the rendered sections beside it (.seo-prose). */
.content-measure { max-width: 48rem; }

.content-kicker {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: var(--color-gold-700, #c6841a);
}

.content-kicker-on-dark { color: var(--color-gold, #e9a82c); }

.content-head { padding: 2.5rem 0 0.5rem; background: var(--color-canvas, #f4f6fb); border-bottom: 1px solid var(--color-line, #e2e7f0); }
.content-head .content-shell-inner { padding-bottom: 2rem; }

.content-title,
.content-hero-title,
.article-title {
    font-family: var(--font-display);
    font-weight: 600;
    letter-spacing: -0.018em;
    line-height: 1.12;
    overflow-wrap: anywhere;
}

.content-title { margin-top: .6rem; font-size: 30px; color: var(--color-navy-900, #0a1633); }

.content-lede {
    margin-top: .9rem;
    max-width: 46rem;
    font-size: 15px;
    line-height: 1.65;
    color: var(--color-muted, #5a6585);
}

.content-text { margin-top: .6rem; font-size: 15px; line-height: 1.7; color: var(--color-muted, #5a6585); }

.content-h2 {
    font-family: var(--font-display);
    font-size: 23px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.012em;
    color: var(--color-navy-900, #0a1633);
    overflow-wrap: anywhere;
}

.content-h3 {
    font-family: var(--font-display);
    font-size: 18px;
    font-weight: 600;
    color: var(--color-navy-900, #0a1633);
}

.content-links { margin-top: 1rem; display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; }

.content-link {
    font-weight: 700;
    color: var(--color-navy-500, #1e4598);
    text-decoration: underline;
    text-decoration-color: color-mix(in srgb, var(--color-navy-500, #1e4598) 35%, transparent);
    text-underline-offset: 3px;
    transition: color .15s ease, text-decoration-color .15s ease;
}

.content-link:hover { color: var(--color-navy-900, #0a1633); text-decoration-color: currentColor; }

.content-link-on-dark { color: var(--color-gold-300, #f6ce78); text-decoration-color: rgb(246 206 120 / .45); }
.content-link-on-dark:hover { color: #fff; }

@media (min-width: 768px) {
    .content-title { font-size: 40px; }
    .content-h2 { font-size: 28px; }
    .content-shell { padding-top: 3rem; padding-bottom: 4.5rem; }
    .content-band { padding-block: 3.5rem; }
}

/* ── Breadcrumbs ──────────────────────────────────────────────────────────────────────────────────────────────── */
.crumbs-bar { background: var(--color-paper, #fbfcfe); border-bottom: 1px solid var(--color-line-2, #edf0f7); }

.crumbs ol {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .25rem;
    padding: .7rem 0;
    font-size: 12.5px;
    color: var(--color-faint, #8c95b0);
}

/* Each step is a plain block of inline text, so the "›" before it flows WITH its words: a long last step (a guide's
   title at 390px) wraps as "› Traffic Challan Payment …" and never leaves the separator alone in a column of its own. */
.crumbs li { display: block; min-width: 0; }
.crumbs li + li::before { content: "›"; color: var(--color-faint, #8c95b0); padding-right: .35rem; }
.crumbs a { font-weight: 600; color: var(--color-muted, #5a6585); }
.crumbs a:hover { color: var(--color-navy-900, #0a1633); text-decoration: underline; }
.crumbs [aria-current="page"] { color: var(--color-ink, #0a1633); font-weight: 600; overflow-wrap: anywhere; }

/* ── Dark hero of /challan and the state pages (H1 + search box) ──────────────────────────────────────────────── */
.content-hero { padding: 2.75rem 0 3rem; }

.content-hero-inner {
    position: relative;
    z-index: 1;
    max-width: 48rem;
    margin-inline: auto;
    padding-inline: 1.25rem;
    text-align: center;
}

.content-hero-title { margin-top: .7rem; font-size: 30px; color: #fff; }

.content-hero-lede {
    margin: 1rem auto 0;
    max-width: 40rem;
    font-size: 15px;
    line-height: 1.65;
    color: rgb(255 255 255 / .8);
}

.content-hero-updated { margin-top: 1rem; font-size: 12px; color: rgb(255 255 255 / .6); }

.search-card { margin-top: 1.75rem; padding: 1.1rem; text-align: left; }

@media (min-width: 768px) {
    .content-hero { padding: 3.5rem 0 4rem; }
    .content-hero-title { font-size: 44px; }
    .search-card { padding: 1.4rem; }
}

/* ── The compact search form (_ChallanSearchForm) ─────────────────────────────────────────────────────────────── */
.search-compact-label {
    display: block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--color-faint, #8c95b0);
}

.search-compact-row { margin-top: .45rem; display: flex; flex-direction: column; gap: .6rem; }

.search-compact-input {
    width: 100%;
    min-width: 0;
    border-radius: .75rem;
    padding: .8rem 1rem;
    font-size: 16px;
    font-weight: 700;
    color: var(--color-ink, #0a1633);
    text-transform: uppercase;
}

.search-compact-input::placeholder { font-weight: 500; text-transform: none; letter-spacing: normal; color: var(--color-faint, #8c95b0); }

.search-compact-submit {
    border-radius: .75rem;
    padding: .85rem 1.5rem;
    font-size: .95rem;
    font-weight: 700;
    white-space: nowrap;
}

.search-compact-note { margin-top: .6rem; font-size: .85rem; line-height: 1.4; color: var(--color-navy-700, #122b63); }

.search-compact-error {
    margin-top: .7rem;
    border-radius: .75rem;
    border: 1px solid #f3c2ba;
    background: var(--color-danger-bg, #fceae7);
    padding: .6rem .9rem;
    font-size: .875rem;
    font-weight: 600;
    color: var(--color-danger, #d7402b);
}

.search-compact-hint { margin-top: .6rem; font-size: 12px; color: var(--color-muted, #5a6585); }

@media (min-width: 640px) {
    .search-compact-row { flex-direction: row; align-items: stretch; }
    .search-compact-input { flex: 1 1 auto; font-size: .95rem; }
}

/* ── Table of contents ────────────────────────────────────────────────────────────────────────────────────────── */
.toc { padding: 1.1rem 1.25rem; }
.toc-title { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--color-faint, #8c95b0); }

.toc-list {
    margin-top: .6rem;
    display: grid;
    gap: .35rem 1.5rem;
    list-style: decimal;
    padding-left: 1.25rem;
    font-size: 14px;
    color: var(--color-muted, #5a6585);
}

.toc-list a { font-weight: 600; color: var(--color-navy-500, #1e4598); }
.toc-list a:hover { text-decoration: underline; }

@media (min-width: 768px) {
    .toc-list { grid-template-columns: 1fr 1fr; }
}

/* ── A long page with its "On this page" list (/challan, /challan/{state}) ─────────────────────────────────────────
   Phone and tablet: the list sits above the text, as a card. From 1024px the text keeps its reading measure (.seo-prose,
   48rem) and the list moves into the column beside it and stays in view while the page scrolls — the right side of a
   1366px screen held nothing but white space before. It stops where the sections end (the state grid, FAQs and guides
   below keep the full width). */
.content-main { margin-top: 2.75rem; min-width: 0; }

@media (min-width: 1024px) {
    .content-with-toc {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 16rem;
        gap: 0 3rem;
        align-items: start;
    }

    .content-with-toc > .content-main { grid-column: 1; grid-row: 1; margin-top: 0; }

    .content-with-toc > .content-toc {
        grid-column: 2;
        grid-row: 1;
        position: sticky;
        top: 6rem;
        max-height: calc(100vh - 7.5rem);
        overflow-y: auto;
    }

    .content-toc .toc-list { grid-template-columns: 1fr; gap: .5rem; }
}

/* ── Rendered Markdown (_SeoHtml): readable long-form text ────────────────────────────────────────────────────── */
.seo-prose {
    margin-top: .9rem;
    max-width: 48rem;
    font-size: 15.5px;
    line-height: 1.75;
    color: #2b3654;
    overflow-wrap: anywhere;
}

.seo-prose > :first-child { margin-top: 0; }
.seo-prose p { margin-top: .9em; }
.seo-prose h2 { margin-top: 1.8em; font-family: var(--font-display); font-size: 22px; font-weight: 600; line-height: 1.25; color: var(--color-navy-900, #0a1633); scroll-margin-top: 6rem; }
.seo-prose h3 { margin-top: 1.5em; font-family: var(--font-display); font-size: 18px; font-weight: 600; line-height: 1.3; color: var(--color-navy-900, #0a1633); scroll-margin-top: 6rem; }
.seo-prose h4 { margin-top: 1.3em; font-size: 16px; font-weight: 700; color: var(--color-navy-900, #0a1633); }
.seo-prose ul, .seo-prose ol { margin-top: .9em; padding-left: 1.35rem; }
.seo-prose ul { list-style: disc; }
.seo-prose ol { list-style: decimal; }
.seo-prose li { margin-top: .35em; }
.seo-prose li::marker { color: var(--color-gold-700, #c6841a); }
.seo-prose strong { font-weight: 700; color: var(--color-ink, #0a1633); }
.seo-prose em { font-style: italic; }
.seo-prose a { font-weight: 600; color: var(--color-navy-500, #1e4598); text-decoration: underline; text-underline-offset: 3px; }
.seo-prose a:hover { color: var(--color-navy-900, #0a1633); }

.seo-prose blockquote {
    margin-top: 1.1em;
    border-left: 3px solid var(--color-gold, #e9a82c);
    background: var(--color-canvas, #f4f6fb);
    padding: .8rem 1rem;
    border-radius: 0 .6rem .6rem 0;
    color: var(--color-muted, #5a6585);
}

.seo-prose code { border-radius: .3rem; background: var(--color-canvas, #f4f6fb); padding: .1rem .35rem; font-size: .9em; }
.seo-prose hr { margin: 1.8em 0; border: 0; border-top: 1px solid var(--color-line, #e2e7f0); }
.seo-prose img { max-width: 100%; height: auto; border-radius: .75rem; }

/* A Markdown table scrolls inside itself, never the page. Its cells wrap only BETWEEN words: the prose's
   overflow-wrap: anywhere let a cell shrink below its longest word on a phone ("Refunde|d"), so the cells put it back to
   normal — a column is then at least one word wide and the table scrolls sideways instead. */
.seo-prose table { display: block; max-width: 100%; overflow-x: auto; margin-top: 1.1em; border-collapse: collapse; font-size: 14px; }
.seo-prose th, .seo-prose td { border: 1px solid var(--color-line, #e2e7f0); padding: .5rem .75rem; text-align: left; vertical-align: top; overflow-wrap: normal; word-break: normal; hyphens: manual; }
.seo-prose th { background: var(--color-canvas, #f4f6fb); font-weight: 700; color: var(--color-navy-900, #0a1633); }

/* ── FAQ accordion (_FaqList) ─────────────────────────────────────────────────────────────────────────────────── */
.faq-list .faq-q { margin: 0; font: inherit; color: inherit; text-align: left; }

.faq-answer { margin-top: 0; padding: 0 2.25rem 1.25rem 0; font-size: 14px; line-height: 1.7; color: var(--color-muted, #5a6585); }
.faq-answer p:first-child { margin-top: 0; }

.faq-jump { margin-top: 1.25rem; display: flex; flex-wrap: wrap; gap: .5rem; }

/* An FAQ list under its section heading has the same 1rem below the heading as any other section's text (it sat 4–8px
   under it on /track, /faqs and the challan pages). */
.content-h2 + .faq-list { margin-top: 1rem; }

/* ── Home: the H1's tagline, "Why ROSmart" cards and the unpaid band ──────────────────────────────────────────── */
.hero-tagline {
    margin-top: .6rem;
    font-size: 22px;
    font-weight: 600;
    line-height: 1.2;
}

@media (min-width: 768px) {
    .hero-tagline { font-size: 30px; }
}

.why-grid { display: grid; gap: 1.25rem; }

.why-card { display: flex; flex-direction: column; padding: 1.5rem; min-width: 0; }

.why-card-title {
    font-family: var(--font-display);
    font-size: 18px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--color-navy-900, #0a1633);
}

.why-card-title::before {
    content: "";
    display: block;
    width: 2.25rem;
    height: 3px;
    margin-bottom: .9rem;
    border-radius: 3px;
    background: var(--color-gold, #e9a82c);
}

.why-card-text { margin-top: .6rem; flex: 1 1 auto; font-size: 14px; line-height: 1.65; color: var(--color-muted, #5a6585); }

.why-card-link { margin-top: 1rem; align-self: flex-start; font-size: 13.5px; font-weight: 700; color: var(--color-navy-500, #1e4598); }
.why-card-link:hover { color: var(--color-navy-900, #0a1633); text-decoration: underline; }

/* The "Why ROSmart" cards never leave a row half empty, however many sections are marked for the home page
   (counted with :nth-child / :nth-last-child, so no script and no markup change):
   - phone: one column;
   - 640–1023px: two columns, and an odd last card takes the whole row (3 = 2 + 1, 5 = 2 + 2 + 1);
   - from 1024px: three to a row on a 12-track grid; a last row of one card spans it, a last row of two shares it
     (5 = 3 + 2); exactly four are 2 + 2, and four in a row from 1280px, where each card still has ~270px. */
@media (min-width: 640px) {
    .why-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .why-card:last-child:nth-child(odd) { grid-column: 1 / -1; }
}

@media (min-width: 1024px) {
    .why-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); }
    .why-card,
    .why-card:last-child:nth-child(odd) { grid-column: span 4; }
    .why-card:last-child:nth-child(3n+1) { grid-column: 1 / -1; }
    .why-card:nth-last-child(2):nth-child(3n+1),
    .why-card:nth-last-child(2):nth-child(3n+1) + .why-card { grid-column: span 6; }
    .why-card:first-child:nth-last-child(4),
    .why-card:first-child:nth-last-child(4) ~ .why-card { grid-column: span 6; }
}

@media (min-width: 1280px) {
    .why-card:first-child:nth-last-child(4),
    .why-card:first-child:nth-last-child(4) ~ .why-card { grid-column: span 3; }
}

.unpaid-band { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 1.5rem; }
.unpaid-text { margin-top: .9rem; max-width: 40rem; font-size: 15px; line-height: 1.65; color: rgb(255 255 255 / .8); }
.unpaid-band .content-link { display: inline-block; margin-top: .9rem; }
.unpaid-cta { align-self: flex-start; white-space: nowrap; }

@media (min-width: 768px) {
    .unpaid-band { flex-direction: row; align-items: center; justify-content: space-between; gap: 2.5rem; }
    .unpaid-cta { align-self: center; }
}

/* ── Testimonials (_Testimonials) ─────────────────────────────────────────────────────────────────────────────── */
.quote-grid { display: grid; gap: 1.25rem; }
.quote-card { position: relative; display: flex; flex-direction: column; margin: 0; padding: 1.5rem; min-width: 0; }
.quote-mark { width: 1.75rem; height: 1.75rem; color: var(--color-gold, #e9a82c); }
.quote-text { margin-top: .75rem; flex: 1 1 auto; font-size: 15px; line-height: 1.7; color: var(--color-ink, #0a1633); overflow-wrap: anywhere; }
.quote-by { margin-top: 1.1rem; display: flex; flex-direction: column; border-top: 1px solid var(--color-line-2, #edf0f7); padding-top: .8rem; }
.quote-name { font-size: 14px; font-weight: 700; color: var(--color-navy-900, #0a1633); }
.quote-context { font-size: 12.5px; color: var(--color-muted, #5a6585); }

@media (min-width: 768px) {
    .quote-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ── State pages: the grid on /challan, the fines table ───────────────────────────────────────────────────────── */
.state-grid { margin-top: 1.25rem; display: grid; gap: .75rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.state-card { display: flex; flex-direction: column; gap: .25rem; height: 100%; padding: 1rem 1.1rem; min-width: 0; }
.state-card-name { font-size: 15px; font-weight: 700; color: var(--color-navy-900, #0a1633); overflow-wrap: anywhere; }
.state-card-link { font-size: 12.5px; font-weight: 600; color: var(--color-navy-500, #1e4598); }

@media (min-width: 768px) {
    .state-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.table-scroll {
    position: relative;
    margin-top: 1rem;
    max-width: 100%;
    overflow-x: auto;
    border: 1px solid var(--color-line, #e2e7f0);
    border-radius: 1rem;
    background: #fff;
}

/* The fines table. The Fine column is what people came for, so it is never cut: it wraps like the offence (some fines are
   a sentence — "Up to ₹10,000 and/or up to 6 months in jail") with a floor of 8rem, the section number never wraps, and on
   a phone the cells are tighter so all three columns fit a 390px screen without scrolling. */
.fine-table { width: 100%; min-width: 20rem; border-collapse: collapse; font-size: 14px; }
.fine-table th { background: var(--color-canvas, #f4f6fb); padding: .6rem .75rem; text-align: left; font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--color-muted, #5a6585); }
.fine-table td { border-top: 1px solid var(--color-line-2, #edf0f7); padding: .65rem .75rem; vertical-align: top; color: var(--color-ink, #0a1633); overflow-wrap: normal; }
.fine-table td:nth-child(2) { white-space: nowrap; }
.fine-table td:last-child { min-width: 8rem; font-weight: 700; }
.fine-note { margin-top: .6rem; font-size: 12.5px; color: var(--color-muted, #5a6585); }

@media (min-width: 640px) {
    .fine-table th { padding: .7rem 1rem; }
    .fine-table td { padding: .7rem 1rem; }
    .fine-table td:last-child { min-width: 11rem; }
}

.official-portal { padding: 1.25rem 1.4rem; font-size: 14.5px; line-height: 1.65; color: var(--color-muted, #5a6585); }
.official-portal p { margin-top: .5rem; }

/* ── Blog: topic chips, cards, featured guide, pager ──────────────────────────────────────────────────────────── */
.blog-topics { margin-top: 1.4rem; display: flex; flex-wrap: wrap; gap: .5rem; }

.blog-chip {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    min-height: 2rem;
    border-radius: 9999px;
    border: 1px solid var(--color-line, #e2e7f0);
    background: #fff;
    padding: .3rem .85rem;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--color-navy-700, #122b63);
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.blog-chip:hover { border-color: var(--color-navy-500, #1e4598); color: var(--color-navy-900, #0a1633); }
.blog-chip.is-active { border-color: var(--color-navy-900, #0a1633); background: var(--color-navy-900, #0a1633); color: #fff; }
.blog-chip-count { font-weight: 600; opacity: .65; }

.blog-grid { margin-top: 1.25rem; display: grid; gap: 1.25rem; }

.blog-card { display: flex; flex-direction: column; overflow: hidden; min-width: 0; }
.blog-card-cover { display: block; aspect-ratio: 1200 / 630; background: var(--color-canvas, #f4f6fb); overflow: hidden; }
.blog-card-cover img { display: block; width: 100%; height: 100%; object-fit: cover; }
.blog-card-body { display: flex; flex: 1 1 auto; flex-direction: column; align-items: flex-start; gap: .55rem; padding: 1.2rem 1.25rem 1.3rem; }
.blog-card-title { font-family: var(--font-display); font-size: 17px; font-weight: 600; line-height: 1.3; color: var(--color-navy-900, #0a1633); overflow-wrap: anywhere; }
.blog-card-title a:hover { text-decoration: underline; text-underline-offset: 3px; }
.blog-card-excerpt { flex: 1 1 auto; font-size: 14px; line-height: 1.6; color: var(--color-muted, #5a6585); }
.blog-card-meta { display: flex; flex-wrap: wrap; gap: .4rem; font-size: 12.5px; color: var(--color-faint, #8c95b0); }

@media (min-width: 640px) {
    .blog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
    .blog-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.blog-featured { display: grid; overflow: hidden; min-width: 0; }
.blog-featured-cover { display: block; aspect-ratio: 1200 / 630; background: var(--color-canvas, #f4f6fb); overflow: hidden; }
.blog-featured-cover img { display: block; width: 100%; height: 100%; object-fit: cover; }
.blog-featured-body { display: flex; flex-direction: column; align-items: flex-start; gap: .7rem; padding: 1.5rem; min-width: 0; }
.blog-featured-label { font-size: 11px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--color-gold-700, #c6841a); }
.blog-featured-title { font-family: var(--font-display); font-size: 24px; font-weight: 600; line-height: 1.2; color: var(--color-navy-900, #0a1633); overflow-wrap: anywhere; }
.blog-featured-title a:hover { text-decoration: underline; text-underline-offset: 3px; }

@media (min-width: 900px) {
    .blog-featured { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: stretch; }
    /* The cell sets the size here, not the aspect ratio: with both, the cover took its width from the row height and spilled into the text column. */
    .blog-featured-cover { height: 100%; min-height: 16rem; aspect-ratio: auto; }
    .blog-featured-body { align-self: center; }
    .blog-featured-body { padding: 2rem 2.25rem; }
    .blog-featured-title { font-size: 28px; }
}

.blog-empty { padding: 2rem 1.5rem; text-align: left; }

.pager { margin-top: 2.25rem; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .75rem 1.5rem; }
.pager-link {
    display: inline-flex;
    align-items: center;
    min-height: 2.75rem;
    border-radius: .75rem;
    border: 1px solid var(--color-line, #e2e7f0);
    background: #fff;
    padding: .5rem 1.1rem;
    font-size: 14px;
    font-weight: 700;
    color: var(--color-navy-700, #122b63);
}

.pager-link:hover { border-color: var(--color-navy-500, #1e4598); }
.pager-status { font-size: 13px; color: var(--color-muted, #5a6585); }

/* ── One guide (/blog/{slug}) ─────────────────────────────────────────────────────────────────────────────────── */
.article { max-width: 48rem; margin-inline: auto; padding: 2.25rem 1.25rem 4.5rem; }
/* The guide's closing CTA leaves the same room above the footer as every other content page (72px, measured);
   the related guides that may follow start straight after that room instead of adding their own. */
.article + .content-shell { padding-top: 0; }
.article-head { display: flex; flex-direction: column; align-items: flex-start; gap: .9rem; }
.article-title { font-size: 30px; color: var(--color-navy-900, #0a1633); }
.article-lede { font-size: 17px; line-height: 1.6; color: var(--color-muted, #5a6585); }

.article-byline {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem 1.75rem;
    width: 100%;
    border-top: 1px solid var(--color-line, #e2e7f0);
    border-bottom: 1px solid var(--color-line, #e2e7f0);
    padding: .85rem 0;
    font-size: 13px;
}

.article-byline dt { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--color-faint, #8c95b0); }
.article-byline dd { margin-top: .15rem; font-weight: 600; color: var(--color-ink, #0a1633); }
.article-byline-sub { font-weight: 500; color: var(--color-muted, #5a6585); }

.article-cover { margin: 1.75rem 0 0; overflow: hidden; border-radius: 1.1rem; background: var(--color-canvas, #f4f6fb); }
.article-cover img { display: block; width: 100%; height: auto; }

.article-toc { margin-top: 1.75rem; }
.article-toc .toc-list { grid-template-columns: 1fr; list-style: none; padding-left: 0; }

.article-body { margin-top: 1.75rem; max-width: none; font-size: 16.5px; }

@media (min-width: 768px) {
    .article { padding-top: 3rem; }
    .article-title { font-size: 40px; }
}

/* ── Closing call to action (_ContentCta) ─────────────────────────────────────────────────────────────────────── */
.cta-box {
    margin-top: 3rem;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    overflow: hidden;
    border-radius: 1.25rem;
    padding: 1.75rem 1.5rem;
}

.cta-box > * { position: relative; z-index: 1; }
.cta-box-title { font-family: var(--font-display); font-size: 22px; font-weight: 600; line-height: 1.2; color: #fff; }
.cta-box-text { margin-top: .4rem; font-size: 14.5px; line-height: 1.6; color: rgb(255 255 255 / .78); }
.cta-box-button { align-self: flex-start; white-space: nowrap; }

@media (min-width: 768px) {
    .cta-box { flex-direction: row; align-items: center; justify-content: space-between; padding: 2rem 2.25rem; }
    .cta-box-button { align-self: center; }
}

/* ── Nothing to show (_SeoMissing) ────────────────────────────────────────────────────────────────────────────── */
.content-missing { max-width: 32rem; margin: 3.5rem auto; padding: 2.25rem 1.75rem; text-align: center; }

.content-missing-icon {
    display: grid;
    place-items: center;
    width: 3.5rem;
    height: 3.5rem;
    margin: 0 auto;
    border-radius: 9999px;
    background: var(--color-warn-bg, #fcf1dc);
    color: var(--color-warn-fg, #9a6b0e);
}

.content-missing-title { margin-top: 1rem; font-family: var(--font-display); font-size: 22px; font-weight: 600; color: var(--color-navy-900, #0a1633); }
.content-missing-text { margin-top: .6rem; font-size: 14.5px; line-height: 1.6; color: var(--color-muted, #5a6585); }
.content-missing-actions { margin-top: 1.5rem; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 1rem 1.5rem; }