/* guides.css | the Guides family (Package G6, 12 Oct 2026). Loaded after styles.css, kit.css, learn.css and vis.css.
   Source: instiv2-tools/guides/guides.css, copied to public/instiv2/guides/ by build-guides.mjs. Tokens only, no hex
   text colours; light and dark follow the learn tokens (--page, --page-2, --page-text, --page-muted, --page-line). */
.lm.gd { --c: #3B7BE0; }
/* the fixed header and the floating breadcrumbs sit above the hero: no sticky lm-bar here, so the hero clears them itself */
.lm.gd > .lm-hero { padding-top: calc(var(--hdr) + 56px); }
.gd-key { margin: 18px 0 8px; padding: 18px 20px 6px; border-radius: 16px; background: var(--lm-tint-blue); border: 1px solid color-mix(in srgb, var(--c) 24%, transparent); }
.gd-key .kicker { margin-bottom: 10px; }
.gd-key ul { margin: 0 0 12px; padding-left: 1.2em; font-size: 16px; line-height: 1.55; color: var(--page-text); }
.gd-key li { margin: 0 0 8px; }
.gd-key li::marker { color: var(--c); }
.lm.gd .lm-body table caption { caption-side: top; text-align: left; padding: 12px 14px 0; font-size: 13px; color: var(--page-faint); }
.lm.gd .lm-body tbody th { font-weight: 600; text-align: left; }
.gd-more { max-width: 1240px; margin: clamp(36px, 6vw, 72px) auto 0; padding: 0 var(--pad); }
.gd-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.gd-card { display: grid; gap: 8px; height: 100%; min-height: 44px; padding: 18px 18px 16px; border-radius: 18px; background: var(--page-2); border: 1px solid var(--page-line); color: var(--page-text); text-decoration: none; transition: border-color .2s ease, transform .2s ease; }
.gd-card:hover, .gd-card:focus-visible { border-color: color-mix(in srgb, var(--c) 60%, var(--page-line)); transform: translateY(-2px); }
.gd-card b { font-size: 18px; line-height: 1.25; letter-spacing: -0.01em; }
.gd-card small { font-size: 14px; line-height: 1.5; color: var(--page-muted); }
.gd-k { font: 500 12px/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--page-faint); }
.gd-all { margin: 16px 0 0; }
.gd-all a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-weight: 600; color: var(--page-text); }
.gd-all svg { width: 16px; height: 16px; }
.gd-close { min-height: 0; margin-top: clamp(40px, 7vw, 88px); --text: #F2F5FB; --ink: #05080F; color: var(--text); } /* the kit's dark closing band in both themes: learn.css maps --text to the page text inside .lm, so the band restores the dark plate tokens of styles.css */
.gd-close .h-l { color: var(--text); }
/* learn.css paints .lm buttons in page colours; on the dark band they take the plate colours (same specificity order as learn.css 51 to 53) */
.lm.gd .gd-close .btn-solid:not(.pg-hero .btn-solid) { background: var(--text); color: var(--ink); }
.lm.gd .gd-close .btn-ghost:not(.pg-hero .btn-ghost) { color: var(--text); border-color: rgba(226, 233, 246, .34); background: transparent; }
.gd-close .pg-close-in { padding: clamp(48px, 8vw, 96px) var(--pad); max-width: 860px; }
.gd-close .h-l { font-size: clamp(34px, 5vw, 64px); }
.gd-close-sub { margin: 16px auto 0; max-width: 34em; font-size: 17px; line-height: 1.55; color: var(--muted, rgba(226,233,246,.78)); }
.gd-ctas { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 26px; }
.gd-fine { max-width: 860px; margin: 28px auto 0; padding: 0 var(--pad) 40px; font-size: 12.5px; line-height: 1.55; color: var(--page-faint); }
.gd-hub-hero { grid-template-columns: minmax(0, 1fr); max-width: 980px; }
.gd-hub-hero h1 { font-size: clamp(34px, 4.4vw, 60px); }
.gd-hub-list { margin-top: clamp(28px, 4vw, 48px); }
.gd-hub .lm-wrap { margin-top: clamp(20px, 4vw, 40px); }
@media (max-width: 480px) {
  .gd-grid { grid-template-columns: 1fr; }
  .gd-ctas .btn { width: 100%; justify-content: center; }
}