/* @import must be first — Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Cabin:wght@400;700&family=Slabo+13px&display=swap');

@font-face {
  font-family: 'Playlist Script';
  font-style: normal;
  font-weight: 400;
  src: url('fonts/Playlist-Script.woff2') format('woff2'),
       url('fonts/Playlist-Script.woff') format('woff');
  font-display: swap;
}

/* ============================================================
   Single Help Guide Template — Roche Legal
   Blue split hero + two-column sticky-sidebar article body.
   Scoped to body.single-help-guides
   Tokens: Dark #071E25 · RL Blue #00A0D2 · Gold #FBCC8E
   ============================================================ */

body.single-help-guides {
  --hg-dark:   #071E25;
  --hg-blue:   #00A0D2;
  --hg-blue-d: #008BB8;
  --hg-gold:   #FBCC8E;
  --hg-muted:  #4D4D4F;
  --hg-border: #E2E8EC;
}

html { scroll-behavior: smooth !important; }

/* ---- Bricks / theme container reset — full-bleed sections ---- */
body.single-help-guides #brx-content,
body.single-help-guides .brx-content,
body.single-help-guides main,
body.single-help-guides main#main,
body.single-help-guides .brxe-post-content,
body.single-help-guides article.hg-single,
body.posttype-help-guides #brx-content,
body.posttype-help-guides main {
  max-width: none !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  width: 100% !important;
  overflow: visible !important;
}
/* Guard: full-width bands must not inherit any max-width/side spacing */
body.single-help-guides section.hg-hero,
body.single-help-guides section.hg-body,
body.single-help-guides section.hg-related,
body.single-help-guides section.hg-cta {
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  width: 100% !important;
}
body.single-help-guides .brxe-section,
body.single-help-guides .brxe-container,
body.single-help-guides .brxe-block { overflow: visible !important; }

/* ==============================
   TOP DISCLAIMER BAR (under header)
   ============================== */
body.single-help-guides .hg-topbar {
  background: #EAF6FB !important;
  border-bottom: 1px solid #D3E7F0 !important;
  padding: 12px 40px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}
body.single-help-guides .hg-topbar__inner {
  max-width: 1180px !important;
  margin: 0 auto !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-start !important;
  justify-content: center !important;
  gap: 10px !important;
}
body.single-help-guides .hg-topbar__icon { flex: 0 0 auto !important; color: var(--hg-blue) !important; margin-top: 2px !important; }
body.single-help-guides .hg-topbar p {
  font-family: 'Cabin', sans-serif !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
  color: var(--hg-muted) !important;
  margin: 0 !important;
  text-align: center !important;
}
body.single-help-guides .hg-topbar a { color: var(--hg-blue) !important; text-decoration: underline !important; font-weight: 700 !important; }
@media (max-width: 600px) {
  body.single-help-guides .hg-topbar { padding: 12px 24px !important; }
  body.single-help-guides .hg-topbar__inner { align-items: flex-start !important; }
  body.single-help-guides .hg-topbar p { text-align: left !important; font-size: 13px !important; }
}

/* ---- Buttons ---- */
body.single-help-guides .rl-btn,
body.single-help-guides a.rl-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 50px !important;
  padding: 14px 40px !important;
  border-radius: 5px !important;
  font-family: 'Cabin', sans-serif !important;
  font-weight: 700 !important;
  font-size: 18px !important;
  text-decoration: none !important;
  line-height: 1.3 !important;
  box-sizing: border-box !important;
  cursor: pointer !important;
  border: none !important;
  transition: background 0.2s ease, opacity 0.2s ease !important;
  white-space: nowrap !important;
}
body.single-help-guides a.rl-btn--primary { background: var(--hg-blue) !important; color: #fff !important; }
body.single-help-guides a.rl-btn--primary:hover { background: var(--hg-blue-d) !important; color: #fff !important; }
body.single-help-guides a.rl-btn--about { background: #fff !important; color: var(--hg-blue) !important; }
body.single-help-guides a.rl-btn--about:hover { opacity: 0.9 !important; }

/* ---- Arrow link (dark + light variants) ---- */
body.single-help-guides a.hg-arrow-link {
  display: inline-flex !important;
  align-items: center !important;
  gap: 14px !important;
  text-decoration: none !important;
  color: var(--hg-dark) !important;
  font-family: 'Cabin', sans-serif !important;
  font-weight: 700 !important;
  font-size: 17px !important;
  line-height: 1.4 !important;
  transition: color .25s ease !important;
}
body.single-help-guides .hg-arrow-circle {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 auto !important;
  width: 42px !important;
  height: 42px !important;
  border: 1.5px solid var(--hg-dark) !important;
  border-radius: 50% !important;
  color: var(--hg-dark) !important;
  transition: background-color .25s ease, border-color .25s ease, color .25s ease !important;
}
body.single-help-guides .hg-arrow-circle svg { width: 16px !important; height: 16px !important; }
body.single-help-guides a.hg-arrow-link:hover { color: var(--hg-blue) !important; }
body.single-help-guides a.hg-arrow-link:hover .hg-arrow-circle {
  background: var(--hg-blue) !important; border-color: var(--hg-blue) !important; color: #fff !important;
}
/* light variant (on blue hero) */
body.single-help-guides a.hg-arrow-link--light { color: #fff !important; }
body.single-help-guides a.hg-arrow-link--light .hg-arrow-circle { border-color: #fff !important; color: #fff !important; }
body.single-help-guides a.hg-arrow-link--light:hover { color: #fff !important; }
body.single-help-guides a.hg-arrow-link--light:hover .hg-arrow-circle { background: #fff !important; color: var(--hg-blue) !important; }

/* ==============================
   HERO — blue split
   ============================== */
body.single-help-guides section.hg-hero {
  position: relative !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: stretch !important;
  width: 100% !important;
  min-height: 560px !important;
  overflow: hidden !important;
  gap: 0 !important;
  padding: 0 !important;
}
body.single-help-guides .hg-hero__left {
  flex: 0 0 55% !important;
  width: 55% !important;
  background: var(--hg-blue) !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  padding: 64px !important;
  box-sizing: border-box !important;
}
body.single-help-guides .hg-hero__content { max-width: 620px !important; }
body.single-help-guides .hg-hero__right { flex: 1 1 0 !important; overflow: hidden !important; background: #e8eef1 !important; }
body.single-help-guides .hg-hero__img { width: 100% !important; height: 100% !important; object-fit: cover !important; object-position: center !important; display: block !important; }

/* Breadcrumb (light) */
body.single-help-guides .hg-breadcrumb {
  font-family: 'Cabin', sans-serif !important;
  font-size: 15px !important;
  color: rgba(255,255,255,0.85) !important;
  margin: 0 0 22px 0 !important;
  display: flex !important; flex-wrap: wrap !important; gap: 8px !important; align-items: center !important;
}
body.single-help-guides .hg-breadcrumb a { color: #fff !important; text-decoration: none !important; }
body.single-help-guides .hg-breadcrumb a:hover { text-decoration: underline !important; }

/* Topic eyebrow — gold */
body.single-help-guides p.hg-hero__topic {
  font-family: 'Cabin', sans-serif !important;
  font-weight: 700 !important;
  font-size: 20px !important;
  color: var(--hg-gold) !important;
  margin: 0 0 12px 0 !important;
}
body.single-help-guides h1.hg-hero__heading {
  font-family: 'Cabin', sans-serif !important;
  font-weight: 700 !important;
  font-size: 44px !important;
  line-height: 1.14 !important;
  color: #fff !important;
  margin: 0 0 18px 0 !important;
}
body.single-help-guides p.hg-hero__date {
  font-family: 'Cabin', sans-serif !important;
  font-weight: 700 !important;
  font-size: 16px !important;
  color: rgba(255,255,255,0.9) !important;
  margin: 0 0 12px 0 !important;
}
body.single-help-guides p.hg-hero__author {
  font-family: 'Cabin', sans-serif !important;
  font-size: 16px !important;
  color: rgba(255,255,255,0.9) !important;
  margin: 0 0 12px 0 !important;
}
body.single-help-guides p.hg-hero__author a { color: #fff !important; text-decoration: underline !important; }
body.single-help-guides p.hg-hero__author-bio {
  font-family: 'Cabin', sans-serif !important;
  font-size: 15px !important;
  line-height: 1.6 !important;
  color: rgba(255,255,255,0.85) !important;
  margin: 0 0 20px 0 !important;
  max-width: 540px !important;
}
/* Review / compliance block */
body.single-help-guides .hg-hero__review { margin: 0 0 28px 0 !important; }
body.single-help-guides p.hg-hero__reviewed {
  font-family: 'Cabin', sans-serif !important;
  font-weight: 700 !important;
  font-size: 16px !important;
  color: rgba(255,255,255,0.9) !important;
  margin: 0 0 6px 0 !important;
}
body.single-help-guides p.hg-hero__reviewed span { color: var(--hg-gold) !important; }
body.single-help-guides p.hg-hero__reviewer {
  font-family: 'Cabin', sans-serif !important;
  font-size: 16px !important;
  color: rgba(255,255,255,0.9) !important;
  margin: 0 !important;
}
body.single-help-guides p.hg-hero__reviewer a { color: #fff !important; text-decoration: underline !important; }
body.single-help-guides .hg-hero__actions {
  display: flex !important;
  align-items: center !important;
  gap: 28px !important;
  flex-wrap: wrap !important;
}

/* ==============================
   BODY — two columns (sticky sidebar + article)
   ============================== */
body.single-help-guides .hg-body { background: #fff !important; padding: 64px 0 40px !important; }
body.single-help-guides .hg-body__inner {
  max-width: 1400px !important;
  width: 100% !important;
  margin: 0 auto !important;
  padding: 0 40px !important;
  box-sizing: border-box !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-start !important;
  gap: 48px !important;
}

/* Sticky sidebar */
body.single-help-guides .hg-side {
  flex: 0 0 320px !important;
  position: sticky !important;
  top: 100px !important;
  align-self: flex-start !important;
}
body.single-help-guides .hg-side__card {
  border: 1px solid var(--hg-border) !important;
  border-radius: 10px !important;
  padding: 28px !important;
  background: #fff !important;
  box-shadow: 0 10px 30px rgba(7,30,37,0.06) !important;
}
body.single-help-guides .hg-side__trust {
  border-bottom: 1px solid var(--hg-border) !important;
  padding-bottom: 18px !important;
  margin-bottom: 20px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
}
body.single-help-guides p.hg-side__row {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
  margin: 0 !important;
}
body.single-help-guides .hg-side__k {
  font-family: 'Cabin', sans-serif !important;
  font-size: 13px !important;
  text-transform: uppercase !important;
  letter-spacing: .04em !important;
  color: var(--hg-muted) !important;
}
body.single-help-guides .hg-side__v {
  font-family: 'Cabin', sans-serif !important;
  font-weight: 700 !important;
  font-size: 16px !important;
  color: var(--hg-dark) !important;
}
body.single-help-guides p.hg-side__label {
  font-family: 'Cabin', sans-serif !important;
  font-weight: 700 !important;
  font-size: 20px !important;
  color: var(--hg-dark) !important;
  margin: 0 0 8px 0 !important;
}
body.single-help-guides p.hg-side__text {
  font-family: 'Cabin', sans-serif !important;
  font-size: 15px !important;
  line-height: 1.6 !important;
  color: var(--hg-muted) !important;
  margin: 0 0 18px 0 !important;
}
body.single-help-guides a.hg-side__cta { width: 100% !important; }
body.single-help-guides .hg-side__download { margin-top: 18px !important; }
body.single-help-guides .hg-side__download .hg-arrow-link__text { font-size: 15px !important; }
body.single-help-guides .hg-side__download .hg-arrow-circle { width: 38px !important; height: 38px !important; }

/* Article column */
body.single-help-guides .hg-article { flex: 1 1 auto !important; min-width: 0 !important; max-width: none !important; }

/* Disclaimer */
body.single-help-guides .hg-disclaimer {
  background: rgba(0,160,210,0.08) !important;
  border-left: 4px solid var(--hg-blue) !important;
  padding: 20px 24px !important;
  margin: 0 0 40px 0 !important;
  border-radius: 0 6px 6px 0 !important;
}
body.single-help-guides .hg-disclaimer p {
  font-family: 'Cabin', sans-serif !important;
  font-size: 16px !important;
  line-height: 1.6 !important;
  color: var(--hg-dark) !important;
  margin: 0 !important;
}
body.single-help-guides .hg-disclaimer a { color: var(--hg-blue) !important; text-decoration: underline !important; }

/* Content typography */
body.single-help-guides .hg-content { font-family: 'Cabin', sans-serif !important; color: var(--hg-dark) !important; }
body.single-help-guides .hg-content p {
  font-family: 'Cabin', sans-serif !important;
  font-size: 18px !important;
  line-height: 1.75 !important;
  color: var(--hg-dark) !important;
  margin: 0 0 20px 0 !important;
}
body.single-help-guides .hg-content h2 {
  font-family: 'Cabin', sans-serif !important;
  font-weight: 700 !important;
  font-size: 28px !important;
  line-height: 1.25 !important;
  color: var(--hg-dark) !important;
  margin: 40px 0 16px 0 !important;
}
body.single-help-guides .hg-content h3 {
  font-family: 'Cabin', sans-serif !important;
  font-weight: 700 !important;
  font-size: 22px !important;
  line-height: 1.3 !important;
  color: var(--hg-dark) !important;
  margin: 32px 0 14px 0 !important;
}
body.single-help-guides .hg-content h4 {
  font-family: 'Cabin', sans-serif !important;
  font-weight: 700 !important;
  font-size: 18px !important;
  color: var(--hg-dark) !important;
  margin: 26px 0 12px 0 !important;
}
body.single-help-guides .hg-content a { color: var(--hg-blue) !important; text-decoration: underline !important; }
body.single-help-guides .hg-content ul,
body.single-help-guides .hg-content ol { margin: 0 0 22px 0 !important; padding-left: 26px !important; }
body.single-help-guides .hg-content li {
  font-family: 'Cabin', sans-serif !important;
  font-size: 18px !important;
  line-height: 1.7 !important;
  color: var(--hg-dark) !important;
  margin-bottom: 10px !important;
}
body.single-help-guides .hg-content ul li { list-style: disc !important; }
body.single-help-guides .hg-content ol li { list-style: decimal !important; }
body.single-help-guides .hg-content blockquote {
  border-left: 4px solid var(--hg-gold) !important;
  padding: 8px 0 8px 20px !important;
  margin: 24px 0 !important;
  font-style: italic !important;
  color: var(--hg-muted) !important;
}
body.single-help-guides .hg-content img { max-width: 100% !important; height: auto !important; }
/* Content tables (mirrors flexible free-content) */
body.single-help-guides .hg-content table {
  width: 100% !important; border-collapse: collapse !important; margin: 24px 0 !important;
  font-size: 15px !important; font-family: 'Cabin', sans-serif !important;
}
body.single-help-guides .hg-content th,
body.single-help-guides .hg-content td {
  border: 1px solid #ccc !important; padding: 12px 16px !important; text-align: left !important; vertical-align: top !important; color: var(--hg-dark) !important;
}
body.single-help-guides .hg-content th { font-weight: 700 !important; background: #f5f5f5 !important; }
body.single-help-guides .hg-content tbody tr:nth-child(even) td { background: #fafafa !important; }
body.single-help-guides .hg-content--secondary { margin-top: 32px !important; }

/* Need-further-help callout */
body.single-help-guides .hg-callout {
  background: rgba(251,204,142,0.22) !important;
  border-radius: 8px !important;
  padding: 32px !important;
  margin: 44px 0 0 0 !important;
}
body.single-help-guides h2.hg-callout__heading {
  font-family: 'Cabin', sans-serif !important;
  font-weight: 700 !important;
  font-size: 24px !important;
  color: var(--hg-dark) !important;
  margin: 0 0 12px 0 !important;
}
body.single-help-guides .hg-callout__text {
  font-family: 'Cabin', sans-serif !important;
  font-size: 17px !important;
  line-height: 1.7 !important;
  color: var(--hg-dark) !important;
  margin: 0 0 16px 0 !important;
}

/* ==============================
   FURTHER READING
   ============================== */
body.single-help-guides .hg-related { background: #fff !important; padding: 40px 0 20px !important; }
body.single-help-guides .hg-related__inner { max-width: 1400px !important; width: 100% !important; margin: 0 auto !important; padding: 0 40px !important; box-sizing: border-box !important; }
body.single-help-guides h2.hg-related__heading {
  font-family: 'Cabin', sans-serif !important;
  font-weight: 700 !important;
  font-size: 32px !important;
  color: var(--hg-dark) !important;
  margin: 0 0 32px 0 !important;
}
body.single-help-guides .hg-related__grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 28px !important;
}
body.single-help-guides a.hg-card {
  display: flex !important;
  flex-direction: column !important;
  text-decoration: none !important;
  border: 1px solid var(--hg-border) !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  background: #fff !important;
  transition: box-shadow .25s ease, transform .25s ease !important;
}
body.single-help-guides a.hg-card:hover { box-shadow: 0 12px 30px rgba(7,30,37,0.10) !important; transform: translateY(-3px) !important; }
body.single-help-guides .hg-card__media { width: 100% !important; aspect-ratio: 16 / 10 !important; overflow: hidden !important; background: #e8eef1 !important; }
body.single-help-guides .hg-card__img { width: 100% !important; height: 100% !important; object-fit: cover !important; display: block !important; }
body.single-help-guides .hg-card__body { padding: 24px !important; display: flex !important; flex-direction: column !important; gap: 14px !important; flex: 1 1 auto !important; }
body.single-help-guides h3.hg-card__title {
  font-family: 'Cabin', sans-serif !important;
  font-weight: 700 !important;
  font-size: 20px !important;
  line-height: 1.3 !important;
  color: var(--hg-dark) !important;
  margin: 0 !important;
}
body.single-help-guides .hg-card__more {
  font-family: 'Cabin', sans-serif !important;
  font-style: normal !important;
  font-weight: 700 !important;
  font-size: 16px !important;
  color: var(--hg-blue) !important;
  margin-top: auto !important;
}
body.single-help-guides .hg-related__all {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  width: fit-content !important;
  margin: 44px auto 0 !important;
  padding: 12px 14px 12px 28px !important;
  border: 1.5px solid var(--hg-border) !important;
  border-radius: 999px !important;
  transition: border-color .25s ease, background .25s ease, color .25s ease !important;
}
body.single-help-guides a.hg-related__all:hover {
  border-color: var(--hg-blue) !important;
  background: var(--hg-blue) !important;
  color: #fff !important;
}
body.single-help-guides a.hg-related__all:hover .hg-arrow-link__text { color: #fff !important; }
body.single-help-guides a.hg-related__all:hover .hg-arrow-circle {
  background: transparent !important;
  border-color: #fff !important;
  color: #fff !important;
}

/* ==============================
   CLOSING CTA BAND
   ============================== */
body.single-help-guides .hg-cta { background: var(--hg-blue) !important; padding: 80px 20px !important; margin-top: 60px !important; overflow: hidden !important; }
body.single-help-guides .hg-cta__inner { display: flex !important; flex-direction: column !important; align-items: center !important; gap: 18px !important; max-width: 780px !important; margin: 0 auto !important; text-align: center !important; }
body.single-help-guides p.hg-cta__label { font-family: 'Playlist Script', cursive !important; font-size: 25px !important; color: var(--hg-gold) !important; margin: 0 !important; }
body.single-help-guides h2.hg-cta__heading { font-family: 'Cabin', sans-serif !important; font-weight: 700 !important; font-size: 40px !important; line-height: 1.2 !important; color: #fff !important; margin: 0 !important; }
body.single-help-guides p.hg-cta__text { font-family: 'Cabin', sans-serif !important; font-size: 18px !important; line-height: 1.6 !important; color: rgba(255,255,255,0.9) !important; margin: 0 0 8px 0 !important; }

/* ==============================
   RESPONSIVE
   ============================== */
@media (max-width: 1024px) {
  body.single-help-guides section.hg-hero { flex-direction: column !important; min-height: 0 !important; }
  body.single-help-guides .hg-hero__left { flex: 1 1 100% !important; width: 100% !important; padding: 56px 40px !important; }
  body.single-help-guides .hg-hero__right { flex: 1 1 100% !important; width: 100% !important; height: 360px !important; order: -1 !important; }
  body.single-help-guides h1.hg-hero__heading { font-size: 34px !important; }

  body.single-help-guides .hg-body__inner { flex-direction: column !important; gap: 40px !important; }
  body.single-help-guides .hg-side { position: static !important; top: auto !important; flex: 1 1 100% !important; width: 100% !important; order: 2 !important; }
  body.single-help-guides .hg-article { order: 1 !important; max-width: 100% !important; }

  body.single-help-guides .hg-related__grid { grid-template-columns: repeat(2, 1fr) !important; }
  body.single-help-guides h2.hg-cta__heading { font-size: 32px !important; }
}
@media (max-width: 600px) {
  body.single-help-guides .hg-hero__left { padding: 44px 24px !important; }
  body.single-help-guides .hg-hero__right { height: 260px !important; }
  body.single-help-guides h1.hg-hero__heading { font-size: 27px !important; }
  body.single-help-guides p.hg-hero__topic { font-size: 17px !important; }
  body.single-help-guides .hg-body { padding: 48px 0 32px !important; }
  body.single-help-guides .hg-body__inner,
  body.single-help-guides .hg-related__inner { padding-left: 24px !important; padding-right: 24px !important; }
  body.single-help-guides .hg-content p,
  body.single-help-guides .hg-content li { font-size: 17px !important; }
  body.single-help-guides .hg-content h2 { font-size: 24px !important; }
  body.single-help-guides .hg-related__grid { grid-template-columns: 1fr !important; }
  body.single-help-guides .hg-related__all { margin-left: auto !important; margin-right: auto !important; }
  body.single-help-guides .hg-cta { padding: 60px 24px !important; }
  body.single-help-guides h2.hg-cta__heading { font-size: 26px !important; }
  body.single-help-guides .hg-callout { padding: 24px !important; }
}