/* ==========================================================================
   GOATMAXX — guides
   Article typography only. Every colour and font below resolves to the tokens
   already defined in main.css, so the guides inherit the site's look and any
   future change to the palette carries over here for free.
   ========================================================================== */

.guide-wrap { width: 100%; max-width: 760px; margin: 0 auto; padding: 0 1.25rem; }
@media (min-width: 640px) { .guide-wrap { padding: 0 2rem; } }

.crumbs { padding: 2rem 0 0; font-size: .82rem; color: var(--text-dim); }
.crumbs a { color: var(--text-dim); text-decoration: none; }
.crumbs a:hover { color: var(--accent-amber); }
.crumbs span { margin: 0 .45rem; opacity: .5; }

.guide-head { padding: 1.5rem 0 2.25rem; border-bottom: 1px solid var(--border-subtle); margin-bottom: 2.5rem; }
.guide-head h1 { font-size: clamp(2rem, 5vw, 3rem); line-height: 1.12; color: var(--text-primary); text-wrap: balance; }
.guide-meta { margin-top: 1rem; font-size: .84rem; color: var(--text-dim); }
.guide-meta b { font-weight: 600; color: var(--text-muted); }

.guide-body { font-size: 1.0625rem; line-height: 1.75; color: var(--text-secondary); }
@media (min-width: 640px) { .guide-body { font-size: 1.125rem; } }
.guide-body > p:first-child {
  font-size: 1.15em; line-height: 1.65; color: var(--text-primary);
  padding: 1.25rem 1.35rem; border-radius: 14px;
  background: rgba(245,158,11,.10); border-left: 3px solid var(--accent-amber);
}
.guide-body p { margin: 0 0 1.35rem; color: inherit; }
.guide-body h2 {
  margin: 3rem 0 1rem; font-size: clamp(1.45rem, 3vw, 1.85rem); line-height: 1.2; color: var(--text-primary);
}
.guide-body h3 { margin: 2.25rem 0 .75rem; font-size: 1.2rem; line-height: 1.3; color: var(--text-primary); }
.guide-body ul, .guide-body ol { margin: 0 0 1.35rem 1.15rem; display: grid; gap: .5rem; }
.guide-body li { padding-left: .35rem; }
.guide-body li::marker { color: var(--accent-amber); }
.guide-body strong { color: var(--text-primary); font-weight: 600; }
.guide-body a { color: var(--accent-amber-light); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.guide-body a:hover { color: var(--accent-amber); }
.guide-body blockquote {
  margin: 0 0 1.35rem; padding: .25rem 0 .25rem 1.15rem;
  border-left: 3px solid var(--accent-amber); color: var(--text-muted);
}
.guide-body hr { border: none; border-top: 1px solid var(--border-subtle); margin: 2.5rem 0; }

/* download card at the end of every guide */
.guide-cta {
  margin: 3.5rem 0 0; padding: 2.25rem 1.75rem; border-radius: 20px; text-align: center;
  background: var(--bg-card); border: 1px solid var(--border-subtle);
}
.guide-cta img.cta-icon { width: 64px; height: 64px; border-radius: 16px; }
.guide-cta h2 { margin: 1rem 0 .5rem; font-size: 1.6rem; color: var(--text-primary); }
.guide-cta p { margin: 0 auto; max-width: 34rem; color: var(--text-muted); font-size: 1rem; }
.guide-cta .store { display: inline-block; margin-top: 1.5rem; line-height: 0; }
.guide-cta .store img { height: 54px; width: auto; }
.guide-cta .store:hover { opacity: .85; }

.guide-more { margin: 3.5rem 0 4.5rem; }
.guide-more h2 { font-size: 1.3rem; color: var(--text-primary); margin-bottom: 1.1rem; }
.guide-more ul { list-style: none; display: grid; gap: .7rem; }
.guide-more a {
  display: block; padding: .95rem 1.1rem; border-radius: 12px;
  background: var(--bg-card); border: 1px solid var(--border-subtle); color: var(--text-secondary);
  text-decoration: none; font-weight: 500; transition: border-color 200ms, background 200ms;
}
.guide-more a:hover { border-color: var(--accent-amber); background: var(--bg-card-hover); color: var(--text-primary); }

/* hub */
.hub-head { padding: 3.5rem 0 2.5rem; }
.hub-head h1 { font-size: clamp(2.2rem, 5.5vw, 3.2rem); color: var(--text-primary); }
.hub-head p { margin-top: 1rem; max-width: 46rem; color: var(--text-muted); font-size: 1.1rem; }
.hub-list { list-style: none; display: grid; gap: 1rem; padding-bottom: 4.5rem; }
@media (min-width: 760px) { .hub-list { grid-template-columns: 1fr 1fr; } }
.hub-card {
  display: block; height: 100%; padding: 1.5rem 1.4rem; border-radius: 16px;
  background: var(--bg-card); border: 1px solid var(--border-subtle); text-decoration: none;
  transition: border-color 200ms, background 200ms, transform 200ms;
}
.hub-card:hover { border-color: var(--accent-amber); background: var(--bg-card-hover); transform: translateY(-2px); }
.hub-card h2 { font-size: 1.25rem; line-height: 1.3; color: var(--text-primary); }
.hub-card p { margin-top: .55rem; font-size: .95rem; color: var(--text-muted); line-height: 1.6; }