/* The Growth Guide - reader additions on top of frontier.css (loaded only by
   /growth/<slug>). Kept in its own file so frontier.css stays spec-synced. */

/* chapter badge - warm tone, distinct from playbook(purple)/deepdive(teal) */
.badge-guide { background: rgba(245, 158, 11, 0.1); color: #fcd34d; border-color: rgba(245, 158, 11, 0.28); }

/* chapter list (reuses .fr-toc structure) */
.fr-toc .gg-toc-n { display: inline-block; min-width: 18px; font-family: var(--mono); font-size: 11px; opacity: 0.55; }
.fr-toc a.active .gg-toc-n { opacity: 0.9; }

/* imported Webflow images: natural size, capped - NOT forced full-width like
   the Frontier readers (the guide mixes small logos with wide screenshots) */
.gg-prose img { width: auto; max-width: 100%; margin: 22px auto 0; }
.gg-prose ol, .gg-prose ul { margin-top: 18px; padding-left: 22px; }
.gg-prose li { margin-top: 8px; }
.gg-prose a { color: inherit; text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; }

/* client-logo wall (intro) - light chips so the dark logos read on the dark
   reader; matches the original Webflow 4-up grid */
.gg-logos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 26px; }
.gg-logo { display: flex; align-items: center; justify-content: center; background: #f6f7f9; border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 8px; padding: 16px 14px; min-height: 58px; }
.gg-prose .gg-logo img { width: auto; max-width: 100%; max-height: 26px; margin: 0; border: none; }
.reader-light .gg-logo { border-color: rgba(0, 0, 0, 0.1); }
@media (max-width: 900px) { .gg-logos { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px) { .gg-logos { grid-template-columns: repeat(2, 1fr); } }

/* prev / next chapter navigation */
.gg-chapter-nav { display: flex; gap: 14px; margin-top: 48px; }
.gg-cnav { flex: 1 1 0; display: flex; flex-direction: column; gap: 4px; padding: 16px 18px; border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 8px; text-decoration: none; transition: border-color 0.15s, background 0.15s; min-width: 0; }
.gg-cnav-empty { border: none; background: none; }
a.gg-cnav:hover { border-color: rgba(255, 255, 255, 0.3); background: rgba(255, 255, 255, 0.04); }
.gg-cnav-next { text-align: right; }
.gg-cnav-k { font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255, 255, 255, 0.5); }
.gg-cnav-t { font-family: var(--display); font-size: 18px; line-height: 1.2; color: #fff; }

.reader-light .gg-cnav { border-color: rgba(0, 0, 0, 0.14); }
.reader-light a.gg-cnav:hover { border-color: rgba(0, 0, 0, 0.3); background: rgba(0, 0, 0, 0.03); }
.reader-light .gg-cnav-k { color: rgba(0, 0, 0, 0.5); }
.reader-light .gg-cnav-t { color: #14161a; }

@media (max-width: 640px) { .gg-chapter-nav { flex-direction: column; } .gg-cnav-next { text-align: left; } }