.guide-hub { padding: 18px 0 48px; }
.guide-hub-cover {
  background: linear-gradient(135deg, #3a2412 0%, #e07812 72%);
  color: #fff;
  border-radius: 18px;
  padding: 28px 22px 22px;
  margin: 0 0 22px;
}
.guide-hub-kicker {
  margin: 0 0 6px;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.85;
}
.guide-hub-cover h1 {
  margin: 0 0 8px;
  font-size: clamp(28px, 4vw, 42px);
  line-height: 1.1;
  color: #fff;
}
.guide-hub-lead { margin: 0 0 14px; max-width: 40rem; font-size: 1.05rem; }
.guide-hub-search input {
  width: min(100%, 520px);
  border: 0;
  border-radius: 999px;
  padding: 12px 16px;
  font: inherit;
}
.guide-hub-empty { margin: 10px 0 0; }
.guide-hub-h { margin: 22px 0 12px; font-size: 1.35rem; }
.guide-hub-note { color: var(--muted); margin: -6px 0 8px; }
.guide-hub-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: 1fr;
}
@media (min-width: 720px) {
  .guide-hub-grid { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1040px) {
  .guide-hub-grid { grid-template-columns: 1fr 1fr 1fr 1fr; }
}
.guide-hub-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  min-height: 100%;
}
.guide-hub-card[hidden], .guide-hub-li[hidden] { display: none; }
.guide-hub-card-img {
  display: block;
  height: 150px;
  background: var(--cream) center/cover no-repeat;
}
.guide-hub-card-body { display: grid; gap: 6px; padding: 12px 14px 14px; }
.guide-hub-card-title { font-weight: 750; line-height: 1.25; }
.guide-hub-card-excerpt { color: var(--muted); font-size: 14px; }
.guide-hub-card-cta { color: var(--mango-deep); font-weight: 700; font-size: 14px; }
.guide-hub-group { margin: 8px 0 18px; }
.guide-hub-group h2 { margin: 0 0 8px; font-size: 1.25rem; }
.guide-hub-group ul { margin: 0; padding-left: 18px; }
.guide-hub-group li { margin: 0 0 6px; }

.guide-page { padding: 12px 0 48px; max-width: 860px; }
.guide-kicker { margin: 0 0 6px; }
.guide-kicker a { color: var(--mango-deep); font-weight: 700; text-decoration: none; }
.guide-page h1 { margin: 0 0 12px; font-size: clamp(28px, 4vw, 40px); line-height: 1.15; }
.guide-answer {
  margin: 0 0 16px;
  padding: 14px 16px;
  border-radius: 14px;
  background: #fff7ed;
  border: 1px solid #fed7aa;
  line-height: 1.5;
}
.guide-body h2 { margin: 22px 0 8px; font-size: 1.35rem; }
.guide-body h3 { margin: 16px 0 6px; font-size: 1.05rem; }
.guide-body p { margin: 0 0 10px; }
.guide-body ul { margin: 0 0 12px; padding-left: 18px; }
.guide-body table { display: block; width: 100%; max-width: 100%; overflow-x: auto; border-collapse: collapse; margin: 8px 0 14px; font-size: 14px; }
.guide-body th, .guide-body td { border-bottom: 1px solid var(--line); text-align: left; padding: 8px 6px; vertical-align: top; }
.guide-body th { font-size: 13px; }
.guide-picks { margin: 0 0 16px; display: grid; gap: 8px; }
.guide-picks-h { margin: 0; font-weight: 750; }
.guide-pick {
  display: grid;
  grid-template-columns: 64px 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 12px;
  text-decoration: none;
  color: inherit;
  background: #fff;
}
.guide-pick img { width: 64px; height: 64px; object-fit: contain; background: var(--cream); border-radius: 8px; }
.guide-pick img[src=""] { display: none; }
.guide-pick:has(img[src=""]) { grid-template-columns: 1fr auto; }
.guide-pick-name { display: block; font-weight: 700; line-height: 1.3; }
.guide-pick-price { display: block; color: var(--mango-deep); font-weight: 750; }
.guide-pick-go { color: var(--leaf); font-weight: 750; white-space: nowrap; }
.guide-cta { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 4px; }
.guide-cta a {
  display: inline-block;
  background: var(--mango);
  color: #fff;
  text-decoration: none;
  font-weight: 750;
  border-radius: 8px;
  padding: 10px 14px;
}
.guide-related { margin-top: 22px; }
.guide-related ul { padding-left: 18px; }
.guide-cat-link, .guide-lang-link { margin: 14px 0 0; }
.guide-cat-link a, .guide-lang-link a { font-weight: 750; }
.guide-author { color: var(--muted); margin-top: 18px; }
@media (max-width: 640px) {
  .guide-pick { grid-template-columns: 56px 1fr; }
  .guide-pick-go { grid-column: 2; }
}