/* Insight Planning guide detail system
   Shared by every guide page so the reading experience stays consistent. */
:root {
  --guide-navy: #0e1f38;
  --guide-navy-2: #162d4d;
  --guide-blue: #137bb6;
  --guide-blue-soft: #eaf4f9;
  --guide-cream: #f9f6f0;
  --guide-surface: #ffffff;
  --guide-page: #f5f8fb;
  --guide-ink: #243247;
  --guide-muted: #64748b;
  --guide-line: rgba(14, 31, 56, 0.11);
  --guide-gold: #9c8b5e;
}

/* Keep the shared header logo from inheriting the long-form image rules. */
/* Same header logo size as every other page; never wider than the space beside the menu button. */
.nav-logo {
  width: auto !important;
  max-width: min(220px, calc(100vw - 88px)) !important;   /* the same cap as site-responsive.css (Oct 16) */
  flex: 0 0 auto !important;
}
.nav-logo img {
  display: block !important;
  width: auto !important;
  max-width: 100% !important;
  height: 44px !important;
  object-fit: contain !important;
}

body:has(.guide-header) header[role="banner"],
body:has(.guide-header) #mainNav {
  background: var(--guide-navy) !important;
  border-bottom: 1px solid rgba(255,255,255,0.08) !important;
}

/* Basic guide template */
.guide-page {
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  background: var(--guide-page) !important;
}

.guide-header {
  max-width: none !important;
  margin: 0 !important;
  padding: clamp(8rem, 12vw, 10.5rem) 5% 4.5rem !important;
  background: linear-gradient(135deg, var(--guide-navy) 0%, var(--guide-navy-2) 58%, var(--guide-navy) 100%) !important;
  border-bottom: 3px solid var(--guide-gold) !important;
  isolation: isolate;
}

.guide-header::before {
  content: '';
  position: absolute;
  inset: 0;
  width: auto !important;    /* fill the hero; an older 400px glow box showed as a square (Oct 16) */
  height: auto !important;
  z-index: -1;
  background:
    radial-gradient(circle at 82% 12%, rgba(77, 163, 212, 0.18), transparent 35%),
    radial-gradient(circle at 10% 100%, rgba(156, 139, 94, 0.12), transparent 30%);
  pointer-events: none;
}

.guide-header::after {
  height: 100% !important;
  background: linear-gradient(90deg, rgba(255,255,255,0.04), transparent 48%, rgba(255,255,255,0.03)) !important;
  opacity: 0.7;
  z-index: -1;
}

.guide-header > * { position: relative; z-index: 1; }

.guide-header .guide-breadcrumb {
  max-width: 960px;
  margin: 0 auto 1.35rem !important;
  color: rgba(255,255,255,0.68) !important;
  font-size: 0.72rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.14em !important;
  line-height: 1.5 !important;
  text-transform: uppercase !important;
}

.guide-header h1,
.guide-header .guide-tagline-blue,
.guide-header .guide-date,
.guide-header .guide-desc,
.guide-header > div,
.guide-header > p,
.guide-header > .guide-actions {
  max-width: 960px;
  margin-left: auto !important;
  margin-right: auto !important;
}

.guide-header h1 {
  max-width: 960px !important;
  margin-bottom: 1rem !important;
  color: #fff !important;
  font-size: clamp(2.45rem, 5vw, 4.7rem) !important;
  font-weight: 400 !important;
  letter-spacing: -0.035em !important;
  line-height: 1.04 !important;
}

.guide-header .guide-tagline-blue {
  max-width: 760px !important;
  margin-bottom: 1.15rem !important;
  color: rgba(255,255,255,0.84) !important;
  font-size: clamp(1.05rem, 1.6vw, 1.25rem) !important;
  line-height: 1.65 !important;
}

.guide-header .guide-date,
.guide-header .guide-desc {
  color: rgba(255,255,255,0.58) !important;
  font-size: 0.9rem !important;
  line-height: 1.7 !important;
}

.guide-header .guide-desc { max-width: 680px !important; }

.guide-header > div[style*="display:flex"] {
  max-width: 760px !important;
  margin-top: 1.5rem !important;
  margin-bottom: 1.25rem !important;
  padding: 1.25rem 0 !important;
  border-top: 1px solid rgba(255,255,255,0.16) !important;
  border-bottom: 1px solid rgba(255,255,255,0.08) !important;
}

.guide-header > div[style*="display:flex"] img {
  width: 52px !important;
  height: 52px !important;
  border: 2px solid rgba(255,255,255,0.28);
}

.guide-header .guide-actions {
  gap: 0.7rem !important;
  margin-top: 1.35rem !important;
}

.guide-header .btn-download,
.guide-header .btn-clarity,
.guide-header .btn-gold,
.guide-header .cta-btn {
  background: var(--guide-blue) !important;
  border: 1px solid var(--guide-blue) !important;
  border-radius: 7px !important;
  box-shadow: 0 8px 18px rgba(5, 31, 55, 0.2);
  color: #fff !important;
}

.guide-header .btn-download:hover,
.guide-header .btn-clarity:hover,
.guide-header .btn-gold:hover,
.guide-header .cta-btn:hover {
  background: #1a8fd1 !important;
  border-color: #1a8fd1 !important;
}

.guide-header .btn-text {
  border: 1px solid rgba(255,255,255,0.36) !important;
  border-radius: 7px !important;
  color: #fff !important;
  background: rgba(255,255,255,0.03) !important;
}

.guide-header .btn-text:hover {
  border-color: rgba(255,255,255,0.75) !important;
  background: rgba(255,255,255,0.1) !important;
}

.guide-section {
  max-width: 1040px !important;
  margin: 0 auto !important;
  padding: 4.5rem 5% 5.5rem !important;
  background: var(--guide-page) !important;
}

.insight-box,
.article-summary,
.key-takeaway {
  background: var(--guide-surface) !important;
  border: 1px solid var(--guide-line) !important;
  border-left: 4px solid var(--guide-blue) !important;
  border-radius: 0 14px 14px 0 !important;
  box-shadow: 0 8px 26px rgba(14,31,56,0.05);
}

.insight-box { padding: 1.5rem 1.8rem !important; margin-bottom: 2rem !important; }
.insight-label,
.article-summary > p:first-child,
.key-takeaway > p:first-child {
  color: var(--guide-blue) !important;
  font-size: 0.7rem !important;
  letter-spacing: 0.14em !important;
}
.insight-box p,
.article-summary p,
.key-takeaway p { color: var(--guide-ink) !important; line-height: 1.8 !important; }

.for-grid { gap: 1.25rem !important; margin-bottom: 3rem !important; }
.for-card,
.related-resources,
details.faq-card,
details.faq-item {
  background: var(--guide-surface) !important;
  border: 1px solid var(--guide-line) !important;
  border-radius: 14px !important;
  box-shadow: 0 6px 22px rgba(14,31,56,0.045) !important;
}
.for-card { padding: 1.65rem 1.7rem !important; }
.for-card:first-child { border-top: 3px solid var(--guide-blue) !important; }
.for-card:last-child { border-top: 3px solid rgba(14,31,56,0.18) !important; }
.for-card-label { color: var(--guide-blue) !important; font-size: 0.7rem !important; }
.for-card:last-child .for-card-label { color: var(--guide-muted) !important; }
.for-card ul li { color: var(--guide-ink) !important; font-size: 0.93rem !important; line-height: 1.7 !important; }
.for-card ul li::before { background: var(--guide-blue) !important; }
.for-card:last-child ul li::before { background: rgba(14,31,56,0.28) !important; }

.key-questions-section h2 { font-size: clamp(1.8rem, 3vw, 2.35rem) !important; color: var(--guide-navy) !important; }
.key-questions-section .kq-sub { color: var(--guide-muted) !important; font-size: 0.95rem !important; }
.key-questions-section .kq-hint { color: var(--guide-gold) !important; }
details.faq-card { margin-bottom: 0.7rem !important; }
details.faq-card summary,
details.faq-item summary { color: var(--guide-navy) !important; font-size: 0.98rem !important; padding: 1.1rem 1.35rem !important; }
details.faq-card summary::after,
details.faq-item summary::after { color: var(--guide-blue) !important; background: var(--guide-blue-soft) !important; }
details.faq-card .faq-body,
details.faq-item .faq-body { color: var(--guide-ink) !important; line-height: 1.8 !important; }

.related-resources { padding: 1.8rem 2rem !important; }
.related-resources h2 { color: var(--guide-navy) !important; }
.related-resources a,
.guide-section a:not(.btn-download):not(.btn-text):not(.btn-clarity):not(.btn-ghost-sm) { color: var(--guide-blue) !important; }

.next-steps-section {
  margin-top: 3.5rem !important;
  padding: 3rem 2.5rem !important;
  border-radius: 18px !important;
  background: linear-gradient(135deg, var(--guide-navy), var(--guide-navy-2)) !important;
  box-shadow: 0 16px 36px rgba(14,31,56,0.16);
}
.next-steps-section h2 { font-size: clamp(1.8rem, 3vw, 2.45rem) !important; }
.next-steps-section p { max-width: 620px !important; font-size: 0.98rem !important; }
.next-steps-section .btn-clarity { background: var(--guide-blue) !important; border: 1px solid var(--guide-blue) !important; }
.next-steps-section .btn-ghost-sm { color: rgba(255,255,255,0.78) !important; }

/* The AI guide uses the long-form post layout, but shares the same visual language. */
.post-layout {
  max-width: 1180px !important;
  margin: 0 auto !important;
  padding: 4.5rem 5% 5.5rem !important;
  background: var(--guide-page) !important;
}
.post-layout .post-body { max-width: 780px !important; }
.post-body h2 { color: var(--guide-navy) !important; font-size: clamp(1.75rem, 3vw, 2.35rem) !important; }
.post-body h3 { color: var(--guide-navy) !important; }
.post-body p, .post-body li { color: var(--guide-ink) !important; line-height: 1.85 !important; }
.post-body a { color: var(--guide-blue) !important; }
.prompt-box { background: var(--guide-blue-soft) !important; border-left: 4px solid var(--guide-blue) !important; border-radius: 0 12px 12px 0 !important; }
.post-sidebar .sidebar-card { background: var(--guide-surface) !important; border: 1px solid var(--guide-line) !important; border-radius: 14px !important; box-shadow: 0 6px 22px rgba(14,31,56,0.05) !important; }
.post-cta-box { background: linear-gradient(135deg, var(--guide-navy), var(--guide-navy-2)) !important; border-radius: 18px !important; }
.post-cta-box .btn-gold { background: var(--guide-blue) !important; }

@media (max-width: 700px) {
  .guide-header { padding: 7.25rem 5% 3.5rem !important; }
  .guide-header h1 { font-size: clamp(2.2rem, 10vw, 3.2rem) !important; }
  .guide-header .guide-tagline-blue { font-size: 1rem !important; }
  .guide-header .guide-actions > a { flex: 1 1 100%; justify-content: center; }
  .guide-section, .post-layout { padding: 3rem 5% 4rem !important; }
  .for-grid { grid-template-columns: 1fr !important; }
  .next-steps-section { padding: 2.3rem 1.35rem !important; }
  .post-layout { display: block !important; }
  .post-sidebar { margin-top: 2rem !important; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: 0.001ms !important; animation-duration: 0.001ms !important; }
}

/* Accessibility pass (October 2026): tap targets of at least 24px in related links */
.related-resources li a,
.related-reading li a {
  display: inline-block;
  padding: 0.3rem 0;
}

/* Hero alignment (Oct 16): every line in the guide hero starts on the title's left edge.
   Each element keeps its own max-width; only the left margin is shared. */
.guide-header.guide-header > *,
.guide-header.guide-header .guide-breadcrumb {
  margin-left: max(0px, calc((100% - 960px) / 2)) !important;
  margin-right: auto !important;
}