/* ---- Page header (shared across all content pages) ---- */
.page-head { background: linear-gradient(180deg, var(--sky-2) 0%, #fff 100%); padding: 52px 0 40px; border-bottom: 1px solid var(--line-2); }
.crumb { font-size: 14px; color: var(--muted); font-weight: 600; margin-bottom: 16px; }
.crumb a:hover { color: var(--blue-600); }
.page-head h1 { font-size: clamp(30px, 4.4vw, 46px); margin-bottom: 12px; }
.page-head p { font-size: 18px; color: var(--ink-2); max-width: 600px; }

/* ---- Help bars ---- */
.helpbar { background: var(--sky); border-radius: var(--r-lg); padding: 32px 40px; display: flex; align-items: center; justify-content: space-between; gap: 28px; flex-wrap: wrap; margin-top: 40px; }
.helpbar h3 { font-size: 22px; margin-bottom: 8px; }
.helpbar p { color: var(--ink-2); font-size: 15px; max-width: 460px; }
.helpbar2 { margin-top: 44px; background: var(--sky); border-radius: var(--r-lg); padding: 34px 40px; display: flex; align-items: center; justify-content: space-between; gap: 28px; flex-wrap: wrap; }
.helpbar2 .hb-copy h3 { font-size: 22px; margin-bottom: 8px; }
.helpbar2 .hb-copy p { color: var(--ink-2); font-size: 15px; max-width: 480px; }

/* ---- Utility ---- */
.is-hidden { display: none !important; }

@media (max-width: 720px) {
  .helpbar, .helpbar2 { padding: 26px 22px; }
  .page-head:has(.shop-wrap) { padding: 14px 0; }
  .page-head .shop-wrap .crumb { margin-bottom: 0; }
  .page-head .shop-wrap h1, .page-head .shop-wrap p { display: none; }
}