/* Fortunest — guides (comparison pages under /guides/, /vs/ and /cs/).
   Loaded AFTER styles.css and docs/docs.css: a guide is the docs chrome — the
   same .docs-layout grid, .docs-sidebar list, .docs-main article measure,
   .docs-fig captures and .docs-table — carrying the landing page's .compare
   table and .faq-list. This file adds only what a guide has and a chapter does
   not: the verdict cards, the updated-stamp, the hub grid and the closing
   call-to-action row. Every rule names the component it mirrors. */

/* The kicker line above the H1 — "Guides · Updated 7 September 2026". Same
   uppercase .docs-kicker, with the date in the muted body weight beside it. */
.guide-stamp { font-weight: 300; text-transform: none; letter-spacing: 0; color: var(--muted); }
.guide-stamp a { color: inherit; }

/* The comparison table inside an article column. The landing page's .compare
   is sized for a 1032px section; the article is ~746px, so the table is
   allowed to scroll inside .table-wrap (it already does) and drops the top
   margin the landing gives it under a section heading. */
.docs-main .table-wrap { margin-top: 14px; }
/* No fixed minimum: a two-column /vs/ table fits the column and stretches to
   it, an eight-column "best for" table gets 96px per product and scrolls
   inside .table-wrap (its overflow-x: auto). guides.js appends the
   "scroll sideways" hint under a table that actually overflows. */
.docs-main .compare { min-width: 0; }
.docs-main .compare th:not(:first-child) { min-width: 96px; }
.docs-main .compare th:first-child, .docs-main .compare td:first-child { width: 15%; min-width: 96px; }
.table-hint { font-size: 12.5px; color: var(--muted); font-weight: 300; margin: 6px 0 0; text-align: right; }

/* One verdict per product. Mirrors the landing page's .card (hairline, 14px
   radius, white ground) at article width; the pick carries the same lime rule
   .compare-tip and .docs-note use for "the one thing to act on" — lime as a
   3px rule, never as a fill, which stays the primary button's alone. */
.verdict {
  border: 1px solid var(--hairline); border-radius: 14px; background: #fff;
  padding: 16px 20px; margin: 14px 0; max-width: 72ch;
}
.verdict h3 { margin: 0 0 4px; }
.verdict--pick { border-left: 3px solid var(--accent); }
.verdict-for { font-weight: 450; color: var(--ink); margin: 0 0 6px; }
.verdict-limit { color: var(--muted); font-size: 14px; margin: 8px 0 0; }
.verdict-limit strong { color: var(--head); font-weight: 450; }
.verdict-price { font-size: 13px; color: var(--muted); margin: 0 0 8px; }

/* The two-column "when to pick which" table on a /vs/ page: .docs-table with
   the label column pinned, nothing more. */
.docs-table--vs th:not(:first-child) { color: var(--ink); text-transform: none; font-size: 14px; letter-spacing: 0; }

/* The closing call-to-action: the landing page's .cta-row pair — one lime
   primary, one ghost — at the end of the article, above the sources. */
.guide-cta { display: flex; flex-wrap: wrap; gap: 12px; margin: 28px 0 10px; }

/* The hub (/guides/): one .guide-card per guide, the landing page's .grid of
   .card at article width, grouped under plain h2s. */
.guide-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 14px; margin: 14px 0 28px; }
.guide-card {
  display: block; border: 1px solid var(--hairline); border-radius: 14px; background: #fff;
  padding: 16px 18px; color: var(--body); text-decoration: none;
}
.guide-card:hover { text-decoration: none; border-color: var(--grey-line); background: var(--wash); }
.guide-card h3 { font-size: 15.5px; font-weight: 450; color: var(--ink); margin: 0 0 6px; }
.guide-card p { font-size: 13.5px; font-weight: 250; line-height: 1.55; margin: 0; max-width: none; }
.guide-card .chip { margin-bottom: 8px; }

/* The sidebar on a guide is static HTML rather than docs.js's built list, so
   the group headings inside it are plain: same .docs-side-title, repeated. */
.docs-sidebar .docs-side-title + .docs-side-title { margin-top: 18px; }
.docs-sidebar ol + .docs-side-title { margin-top: 18px; }

/* Czech page: nothing changes but the language — except the glyphs. The site
   ships Outfit's LATIN subset only (styles.css, fonts/outfit-latin.woff2), so
   š, č, ě, ř, ů fell back to the system font and stood out bold in every
   heading of /cs/. This face carries the latin-ext subset (Google Fonts'
   own split, self-hosted — the CSP's font-src is 'self') for exactly those
   code points: declared AFTER styles.css's range-less face, so it wins for a
   character in this range and is never consulted for a plain Latin one. */
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/outfit-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}