/* Guides (/guides/<slug>/) and their hub (/guides/). Loaded only there (lib/guides.js),
   after industry.css, whose hub cards and action row they reuse. */

/* Title band: breadcrumb, the question, the updated date. Questions run longer than
   the site's poster headlines, so the type steps down a size. */
.guide-crumbs ol { list-style:none; display:flex; flex-wrap:wrap; gap:4px 0; margin:0 0 20px; padding:0; font-size:15px; font-weight:600; }
.guide-crumbs li + li::before { content:'/'; margin:0 10px; color:var(--tile-muted); }
.guide-crumbs a { color:var(--tile-fg); display:inline-flex; align-items:center; min-height:44px; text-decoration:underline; text-underline-offset:3px; text-decoration-color:var(--tile-hairline); }
.guide-crumbs a:hover, .guide-crumbs a:focus-visible { color:var(--tile-link); text-decoration-color:currentColor; }
.title-band.guide-band h1 { max-width:20ch; font-size:clamp(36px, 6vw, 76px); line-height:0.98; }
.title-band .guide-updated { margin-top:20px; font-size:15px; }

/* One readable column. */
.guide { max-width:720px; margin:0 auto; }
.guide-section { margin:0 0 48px; }
.guide-section h2 { margin:0 0 14px; line-height:1.15; }
.guide-section p, .guide-section li { font-size:17px; line-height:1.6; }
.guide-section p { margin:0 0 14px; }
.guide-section ul { margin:0 0 14px; padding-left:1.25em; display:grid; gap:8px; }

/* The short answer: the line AI tools and skimmers lift, so it gets the cut-card look. */
.guide-answer { margin:0 0 56px; padding:24px 28px; background:#FFF4DE; border:1.5px solid #0B0B0C; border-radius:14px; box-shadow:6px 6px 0 #F2A93B; }
.guide-answer p { margin:0; font-size:19px; line-height:1.55; color:var(--color-text); }
.guide-answer .guide-answer-label { margin:0 0 8px; font-size:15px; font-weight:700; }

/* Comparison table: fits the column on desktop; one card per row on phones (main.css). */
.guide-table { min-width:0; }
.guide-table tbody th { font-weight:600; color:var(--color-text); vertical-align:top; }
.guide-table td { vertical-align:top; }
@media (max-width: 733px) {
  .page-body .guide-table { background:transparent; }
  .guide-table th[scope="row"] { display:block; padding:14px 16px 6px; border-bottom:0; font-size:16px; }
  .guide-table td[data-label] { display:block; text-align:left; padding:6px 16px 10px; font-size:15px; }
  .guide-table td[data-label]::before { display:block; margin-bottom:2px; font-size:13px; font-weight:600; }
}

.guide-sources li { font-size:15px; }
.guide-related ul { list-style:none; padding:0; margin:0; display:grid; gap:4px; }
.guide-related a { display:inline-flex; align-items:center; min-height:44px; font-size:17px; }
.guide-group h2 { margin:0 0 24px; }

/* Hub jump links: one per group, with its guide count. The header is sticky, so a
   group lands below it. */
.guide-jump ul { list-style:none; display:flex; flex-wrap:wrap; gap:0 28px; margin:0 0 40px; padding:0 0 16px; border-bottom:1px solid var(--color-border); }
.guide-jump a { display:inline-flex; align-items:center; gap:8px; min-height:44px; font-size:17px; font-weight:600; }
.guide-jump-count { font-size:14px; font-weight:500; color:var(--color-text-muted); }
.guide-group { scroll-margin-top:72px; }