/* Guides (/guides, /guides/alternatives/*): long-form landing pages. Loaded only when Nav = "guides". */
.gd { max-width: 860px; }
.gd-head { padding: 15px 0 6px; }
.gd-head h1 { margin: 0; font: 700 28px/1.2 var(--f-ui); color: var(--red-soft); }
.gd-updated { margin: 6px 0 0; font-size: 13px; }
.gd-intro p, .gd-sec p { margin: 0 0 10px; font-size: 15px; line-height: 1.6; }
.gd-intro { padding-bottom: 6px; }
.gd-sec { margin: 18px 0 0; padding-top: 14px; border-top: 1px solid var(--line); }
.gd-sec h2 { margin: 0 0 10px; font: 700 20px/1.3 var(--f-ui); color: var(--ink); }
.gd-sec h3 { margin: 16px 0 8px; font: 600 17px/1.3 var(--f-ui); }
.gd-sec h3 a { color: var(--red); }

.gd-table-wrap { overflow-x: auto; }
.gd-table { width: 100%; border-collapse: collapse; font-size: 14px; line-height: 1.45; }
.gd-table th, .gd-table td { text-align: left; vertical-align: top; padding: 9px 10px; border-bottom: 1px solid var(--line); }
.gd-table thead th { font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); border-bottom: 2px solid var(--line-strong); }
.gd-table tbody th { font-weight: 600; white-space: nowrap; }
.gd-table .gd-self { background: color-mix(in srgb, var(--red-soft) 8%, transparent); }
.gd-table .gd-self th { color: var(--red); }

.gd-shelf .fic-list { margin: 0; }
.gd-why { margin: -2px 0 8px; font-size: 14px; color: var(--muted); }
.gd-group { margin: 18px 0 4px; font: 600 14px/1.3 var(--f-ui); text-transform: uppercase; color: var(--muted); }
.hub-list h3 { display: inline; margin: 0; font: 600 17px/1.3 var(--f-ui); }
.hub-list h3 a { color: var(--red); }
.gd .gx-related .rr-label { white-space: normal; max-width: 100%; overflow-wrap: anywhere; text-align: left; }
.gd-more { margin: 6px 0 0; font-size: 14px; }

/* phones: the table turns into one card per site */
@media (max-width: 640px) {
  .gd-head h1 { font-size: 23px; }
  .gd-table thead { display: none; }
  .gd-table, .gd-table tbody, .gd-table tr, .gd-table th, .gd-table td { display: block; width: 100%; }
  .gd-table tr { padding: 8px 0; border-bottom: 1px solid var(--line-strong); }
  .gd-table th, .gd-table td { border: 0; padding: 3px 8px; white-space: normal; }
  .gd-table tbody th { font-size: 16px; }
  .gd-table td::before { content: attr(data-l) ": "; font-weight: 600; color: var(--muted); }
}