/* Long-form guides, /guides/ (2026-10-26). Loaded AFTER seo.css by the guide templates only, so
   the shared sheet keeps its ?v and no published page goes stale. Palette = seo.css tokens; no new
   accent (no orange, ever). No inline style anywhere: the CSP has no 'unsafe-inline'. */

.g-article { max-width: var(--prose); }
.g-article h2 { margin-top: 44px; }
.g-article h3 { margin-top: 26px; }
.g-article p, .g-article li { font-size: 16px; line-height: 1.65; }
.g-article ul, .g-article ol { max-width: var(--prose); padding-left: 22px; margin: 0 0 18px; }
.g-article li { margin: 0 0 9px; }
.g-article li::marker { color: var(--dim); }
.g-article strong { color: var(--cream); font-weight: 600; }
.g-article a { color: var(--cream); text-decoration: underline; text-decoration-color: var(--line-2); }
.g-article a:hover { text-decoration-color: var(--cyan); }

.g-meta { font-family: var(--mono); font-size: 12px; color: var(--dim); margin: -8px 0 26px; }

/* The one thing a reader must not miss: nobody can unfreeze for a fee. Rose = frozen. */
.g-callout {
  border-left: 3px solid var(--rose); background: var(--bg-2);
  padding: 16px 18px; margin: 22px 0; max-width: var(--prose);
}
.g-callout p { margin: 0; }
.g-callout p + p { margin-top: 10px; }

/* Two-column figure tables (years, results). Narrow enough to stay a table on a phone. */
.g-table { width: 100%; border-collapse: collapse; margin: 6px 0 22px; max-width: var(--prose); }
.g-table th {
  text-align: left; font-family: var(--mono); font-size: 11px; font-weight: 500;
  letter-spacing: .08em; text-transform: uppercase; color: var(--dim);
  padding: 10px 12px 10px 0; border-bottom: 2px solid var(--line);
}
.g-table td { padding: 12px 12px 12px 0; border-bottom: 1px solid var(--line); vertical-align: top; font-size: 15px; line-height: 1.45; }
.g-table td.g-num { font-family: var(--mono); font-size: 14px; white-space: nowrap; }
.g-table tr:last-child td { border-bottom: 0; }

/* Chain comparison: one card per contract instead of a 4-column table, so a phone never loses
   the column headers (seo.css hides thead under 640px). */
.g-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin: 8px 0 26px; }
.g-card { border: 1px solid var(--line-2); background: var(--bg-2); padding: 16px 16px 6px; }
.g-card h3 { margin: 0 0 12px; font-size: 14px; }
.g-card dl { margin: 0; }
.g-card dt { font-family: var(--mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--dim); }
.g-card dd { margin: 3px 0 12px; font-size: 15px; }

/* Index: one row per guide. */
.g-list { list-style: none; padding: 0; margin: 0 0 30px; max-width: var(--prose); border-top: 2px solid var(--line); }
.g-list li { border-bottom: 1px solid var(--line); padding: 18px 0; }
.g-list a { font-size: 18px; font-weight: 600; color: var(--cream); text-decoration: none; }
.g-list a:hover { color: var(--cyan); }
.g-list p { margin: 6px 0 0; color: var(--dim); font-size: 15px; line-height: 1.5; }

.g-next { margin-top: 40px; padding-top: 18px; border-top: 1px solid var(--line); max-width: var(--prose); }