/* Guide pages (/business-consulting, /osek-patur). Built on base.css (redesign stage 3, 30.10.2026):
   page head, section heads, the light/dark rhythm, the FAQ and the store badges all come from there.
   This file only holds what a long article needs: the answer paragraph, running text, the tables and the
   numbered lists. Sections are centred at every width (Ariel, 19.10); the "how to choose" list and the
   numbered lists are start-aligned blocks inside the centred column. No inline styles: the CSP is style-src 'self'. */

/* Page head: author and date over the title, centred */
.guide-head .wrap { justify-items: center; text-align: center; max-width: calc(var(--col) + 2 * var(--gutter)); }
.guide-head h1 { font-size: var(--fs-h1); }
@media (min-width: 900px) { .guide-head .wrap { justify-items: center; text-align: center; } }

/* The answer paragraph right under the head */
.guide-answer { padding-block: clamp(40px, 6vw, 64px); }
.guide-answer .sub { margin: 0 auto; max-width: var(--measure); text-align: center; text-wrap: pretty; }

/* Centred sections: head, text, notes and table cells in the middle */
.guide-centered { text-align: center; }
.guide-body { max-width: var(--measure); margin: 0 auto; display: grid; gap: 16px; }
.guide-body p { margin: 0; font-size: var(--fs-prose); line-height: var(--lh-prose); color: var(--text); }
.guide-body strong { font-weight: 700; }
.guide-body a, .numlist p a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.guide-list { margin: 0; padding-inline-start: 22px; display: grid; gap: 12px; font-size: var(--fs-prose); line-height: 1.7; color: var(--text); text-align: start; }
.guide-list strong { font-weight: 700; }
.guide-list li::marker { color: var(--faint); font-family: var(--mono); font-size: 14px; }
.tbl + .src-note, .tbl + .guide-body, .numlist + .guide-body { margin-top: var(--s6); }
.src-note { margin: 16px auto 0; max-width: var(--measure); font-size: 14px; line-height: 1.6; color: var(--muted); }
.src-note a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }

/* The MentVerse section: a full-bleed dark band, centred head, the numbered list as a centred block */
.guide-band .head { margin-bottom: var(--s6); }
.guide-band .sub { margin: 0 auto var(--s7); max-width: var(--measure); text-align: center; color: var(--d-body); }
.guide-band .guide-body { margin-top: var(--s7); text-align: center; }
.guide-band .guide-body p { color: var(--d-body); }
.guide-band .guide-body strong { color: #FFFFFF; }
/* on the dark band the site blue is 3.3:1, so links there are white and underlined */
.guide-band .guide-body a, .guide-band .numlist p a { color: #FFFFFF; }
.guide-band .stores { margin-top: var(--s6); justify-content: center; }

/* Badges again after the FAQ, so a reader at the end doesn't scroll back up (Ariel, 21.10) */
.faq-stores { margin-top: var(--s7); justify-content: center; }

/* Sources and byline at the end */
.guide-sources { padding-block: var(--s7) var(--sec-tight); }
.guide-sources .src-note { margin-top: 0; margin-bottom: 8px; }

/* one reading width for the lists and the FAQ too */
.guide-centered .numlist, #faq .faq { max-width: var(--measure); }
/* the "how to choose" steps: the shared numbered rows, start-aligned inside the centred column */
.guide-steps { margin: 0 auto; max-width: var(--measure); }
.guide-steps + p { margin-top: var(--s6); }