/* ============================================================
   HELP GUIDE PAGES — new-tone refresh
   Applies to /guide, /rca-guide, /agent-guide on help.raiseaticket.com
   Loaded AFTER help.css / agent-guide.css so it wins.
   Opt-in per page via:
     <header id="header" class="gd-modern">   (hero + pill nav)
     <section class="... guide gd-body">        (body polish)
   Keeps the existing markup + scroll-spy JS hooks (.main_block,
   .mynav, .scroll-nav, #navbar) intact. Mulish headings +
   Instrument Sans body, brand blue #0302B0 / teal #01A9E0.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Instrument+Sans:wght@400;500;600;700&family=Mulish:wght@400;500;600;700;800&display=swap');

:root {
  --gd-blue: #0302B0;
  --gd-teal: #01A9E0;
  --gd-strong: #212738;
  --gd-text: #36465f;
  --gd-border: #E5E7EB;
  --gd-head: 'Mulish','Segoe UI',Arial,sans-serif;
  --gd-body: 'Instrument Sans','Segoe UI',Arial,sans-serif;
  --gd-grad: linear-gradient(95deg,#0302B0 1.34%,#01A9E0 97.22%);
}

/* ============ HERO HEADER ============ */
#header.gd-modern {
  background:
    radial-gradient(760px 420px at 90% 40%, #BFE0FA 0%, rgba(191,224,250,0) 72%),
    linear-gradient(105deg,#FAFAFF 0%, #F1F5FE 46%, #DDEDFB 100%);
  border-bottom: 1px solid rgba(1,169,224,.16);
}
#header.gd-modern .main_block { background: transparent; }
#header.gd-modern .section-header.heading { padding: 40px 16px 14px; text-align: center; }
#header.gd-modern .section-title {
  font-family: var(--gd-head); font-weight: 800; letter-spacing: -.02em;
  color: var(--gd-strong); font-size: 40px; line-height: 1.14;
  display: inline-flex; align-items: center; gap: 14px; justify-content: center; flex-wrap: wrap;
}
#header.gd-modern .section-title img { width: 42px !important; height: auto; }

/* ── pill scroll-nav ── */
#header.gd-modern .mynav { padding: 6px 12px 20px; }
#header.gd-modern .scroll-nav {
  display: flex; flex-wrap: wrap; gap: 10px; justify-content: center;
  border: 0; list-style: none; margin: 0; padding: 0;
}
#header.gd-modern .scroll-nav .nav-item { margin: 0; }
#header.gd-modern .scroll-nav .nav-link {
  display: inline-flex; align-items: center; gap: 8px;
  background: #fff; border: 1px solid var(--gd-border) !important;
  border-radius: 999px !important; padding: 9px 18px !important;
  font-family: var(--gd-head); font-weight: 600; font-size: 14.5px;
  color: var(--gd-strong) !important; text-decoration: none;
  box-shadow: 0 2px 8px rgba(16,24,40,.05);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, color .18s ease;
}
#header.gd-modern .scroll-nav .nav-link:hover,
#header.gd-modern .scroll-nav .nav-link.active {
  transform: translateY(-2px); border-color: var(--gd-teal) !important;
  color: var(--gd-blue) !important; box-shadow: 0 8px 20px rgba(3,2,176,.16);
}
#header.gd-modern .scroll-nav .nav-prefix {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 50%; flex: none;
  background: var(--gd-grad); color: #fff; font-size: 12px; font-weight: 700;
}
#header.gd-modern .scroll-nav .nav-link.active .nav-prefix { box-shadow: 0 2px 8px rgba(3,2,176,.35); }

/* sticky/compact state (JS adds .header-fixed to .main_block on scroll) */
#header.gd-modern .main_block.header-fixed {
  background: rgba(255,255,255,.92); backdrop-filter: blur(8px);
  box-shadow: 0 6px 20px rgba(16,24,40,.10);
}
#header.gd-modern .main_block.header-fixed .section-header.heading { display: none; }
#header.gd-modern .main_block.header-fixed .mynav { padding: 12px; }

/* ============ BODY POLISH ============ */
.gd-body { font-family: var(--gd-body); color: var(--gd-text); }
.gd-body .container { max-width: 1040px; }
.gd-body .sg_row { margin-bottom: 34px; }

.gd-body .nav_heading {
  position: relative; font-family: var(--gd-head); font-weight: 800;
  color: var(--gd-strong); font-size: 27px; letter-spacing: -.01em;
  padding-bottom: 12px; margin-bottom: 20px; border-bottom: 2px solid #e7eef6;
}
.gd-body .nav_heading::after {
  content: ""; position: absolute; left: 0; bottom: -2px; width: 54px; height: 2px;
  background: var(--gd-grad);
}
.gd-body h3 { font-family: var(--gd-head); font-weight: 700; color: #0c2c4a; font-size: 20px; line-height: 1.3; margin: 22px 0 8px; }
.gd-body h4 { font-family: var(--gd-head); font-weight: 700; color: var(--gd-teal); font-size: 17px; margin: 18px 0 6px; }
.gd-body p { font-family: var(--gd-body); color: var(--gd-text); line-height: 1.75; }
.gd-body strong { color: var(--gd-strong); }
.gd-body a { color: var(--gd-teal); }
.gd-body a:hover { color: var(--gd-blue); text-decoration: none; }

/* content images framed as cards */
.gd-body .guide_img {
  max-width: 100%; height: auto; border: 1px solid var(--gd-border);
  border-radius: 14px; box-shadow: 0 8px 26px rgba(16,24,40,.08); background: #fff; padding: 6px;
}
.gd-body .no_reply_image { border: 0 !important; box-shadow: none !important; padding: 0 !important; border-radius: 4px; vertical-align: middle; }

/* tables (guide + rca) */
.gd-body table, .gd-body .rca_table {
  width: 100%; border-collapse: collapse; margin: 14px 0;
  border-radius: 12px; overflow: hidden; box-shadow: 0 6px 20px rgba(16,24,40,.07);
}
.gd-body table th, .gd-body .rca_table th {
  background: var(--gd-grad); color: #fff; text-align: left; padding: 14px 18px;
  font-family: var(--gd-head); font-weight: 700; border: 0;
}
.gd-body table td, .gd-body .rca_table td { padding: 13px 18px; border-top: 1px solid #eef1f6; }
.gd-body table tbody tr:nth-child(even),
.gd-body .rca_table tbody tr:nth-child(even) { background: #F8FAFE; }

/* callouts */
.gd-body .rca_note, .gd-body .guide_note {
  border-radius: 12px; padding: 15px 18px; margin: 18px 0; font-size: 15px; line-height: 1.7;
  border-left: 4px solid var(--gd-teal); background: #EAF7FC;
}
.gd-body .rca_note--warn { background: #FFF6E6; border-left-color: #f4a100; }
.gd-body .rca_subblock { background: #F8FAFE; border: 1px solid #e7eef6; border-radius: 14px; padding: 10px 26px 24px; margin-top: 22px; }

/* CTA button — new-tone gradient pill */
.gd-body .rca_cta, .gd-body .guide_cta {
  display: inline-flex; align-items: center; gap: 8px; background: var(--gd-grad);
  color: #fff !important; padding: 13px 28px; border: 1.5px solid var(--gd-teal);
  border-radius: 999px; font-family: var(--gd-head); font-weight: 700; text-decoration: none;
  margin-top: 12px; transition: transform .18s ease, box-shadow .18s ease, opacity .18s ease;
}
.gd-body .rca_cta:hover, .gd-body .guide_cta:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(3,2,176,.32); opacity: .95; color: #fff !important; }

/* numbered-step markers — fix: guide.css sizes .circle:before as a FIXED
   35x35 circle, so multi-level counters ("2.3.1") overflow it. Make it an
   auto-width pill that grows with the number, in the new-tone gradient. */
.gd-body .circle:before {
  width: auto !important; min-width: 35px; height: 35px !important;
  line-height: 35px !important; padding: 0 12px !important;
  border-radius: 999px !important; box-sizing: border-box; white-space: nowrap;
  background: var(--gd-grad) !important; color: #fff !important; vertical-align: middle;
  font-family: var(--gd-head); font-weight: 700;
}
.gd-body ol > li ol .circle:before {
  font-size: 14px; height: 30px !important; line-height: 30px !important;
  min-width: 30px; padding: 0 11px !important;
}

/* ============ RESPONSIVE ============ */
@media (max-width: 768px) {
  #header.gd-modern .section-title { font-size: 27px; }
  #header.gd-modern .section-header.heading { padding: 28px 14px 10px; }
  #header.gd-modern .scroll-nav .nav-link { font-size: 13px; padding: 8px 14px !important; }
  .gd-body .nav_heading { font-size: 22px; }
  .gd-body h3 { font-size: 18px; }
}