:root {
  --c1: #0a3d62;
  --c2: #1e88e5;
  --on-c1: #ffffff;
  --on-c2: #ffffff;
  --c1-soft: rgba(10, 61, 98, 0.08);
  --c2-soft: rgba(30, 136, 229, 0.08);
  --text: #1a1a1a;
  --text-muted: #555;
  --border: #e5e7eb;
  --bg: #ffffff;
  --bg-soft: #f7f9fc;
  --shadow: 0 4px 20px rgba(0,0,0,0.06);
  --shadow-lg: 0 10px 40px rgba(0,0,0,0.10);
  --radius: 12px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  color: var(--text);
  background: var(--bg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: var(--c2); text-decoration: none; }
a:hover { opacity: 0.85; }

.container { max-width: 1140px; margin: 0 auto; padding: 0 24px; }

/* HEADER */
.site-header {
  position: sticky; top: 0; background: var(--bg);
  border-bottom: 1px solid var(--border); z-index: 50; padding: 14px 0;
}
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.brand-lockup { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--text); }
/* Logo box. Height-capped so the header keeps a consistent bar height, width-capped so a long
   wordmark can't crowd the nav. autoSizeLogo() (site-shell.js) crops any transparent padding baked
   into the file first, so the visible mark actually fills this box instead of floating inside it. */
.brand-logo { height: 56px; width: auto; max-width: 240px; object-fit: contain; }
/* A trimmed mark is measured on its own ink, so it can safely run a little larger. */
.brand-logo.is-trimmed { height: 60px; }
/* Tall/square marks (a badge or stacked lockup) hit the height cap long before the width cap, which
   is what makes them read as "too small" — give them more height and less width. */
.brand-logo.is-tall { height: 68px; max-width: 180px; }
@media (max-width: 860px) {
  .brand-logo { height: 46px; max-width: 170px; }
  .brand-logo.is-trimmed { height: 50px; }
  .brand-logo.is-tall { height: 54px; max-width: 130px; }
}
/* Signature wordmark — the header fallback when an agent has no logo.
   Plain 18px bold text read as an unfinished site; a script signature reads as a deliberate mark,
   and suits the many agents who trade under their own name rather than an LLC. The script face is
   fetched only when this fallback actually renders (see loadSignatureFont), so agents WITH a logo
   pay nothing for it. */
.brand-wordmark { display: flex; flex-direction: column; justify-content: center; line-height: 1; min-width: 0; }
/* Flex items default to min-width:auto, which refuses to shrink below their content — a long
   name then pushed the whole header wider than the viewport (108px of sideways scroll at
   950px). min-width:0 here and on the lockup lets the wordmark give way and ellipsize
   instead, so the nav and Call button always win the space they need. */
.brand-lockup { min-width: 0; }
.brand-script {
  font-family: "Yellowtail", "Segoe Script", "Brush Script MT", cursive;
  /* Scales down on narrow screens; the cap keeps a long agency name from crowding the nav. */
  font-size: clamp(22px, 3.1vw, 31px);
  color: var(--c1);
  line-height: 1.15;
  white-space: nowrap;
  max-width: min(42vw, 340px);
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Until the webfont lands the cursive fallback is much wider; hide rather than flash a reflow. */
.brand-wordmark:not(.is-ready) .brand-script { visibility: hidden; }
.brand-sub {
  font-size: 9.5px; font-weight: 700; letter-spacing: 2.2px; text-transform: uppercase;
  color: var(--text-muted); margin-top: 3px; white-space: nowrap;
  max-width: min(42vw, 340px); overflow: hidden; text-overflow: ellipsis;
}
@media (max-width: 600px) {
  .brand-script { font-size: 22px; max-width: 52vw; }
  .brand-sub { font-size: 8.5px; letter-spacing: 1.6px; max-width: 52vw; }
}
.brand-text { font-weight: 800; font-size: 18px; color: var(--c1); line-height: 1.2; }
.nav-desktop { display: flex; gap: 28px; flex: 1; justify-content: center; }
.nav-desktop a { color: var(--text); font-size: 18px; font-weight: 600; text-decoration: none; white-space: nowrap; transition: color 0.15s; }
.nav-desktop a:hover { color: var(--c2); }
.header-cta {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--c2); color: var(--on-c2);
  padding: 12px 20px; border-radius: 50px; font-weight: 700; font-size: 15px; white-space: nowrap;
}
.header-cta svg { width: 18px; height: 18px; }
.nav-toggle {
  display: none; background: transparent; border: none; cursor: pointer;
  width: 40px; height: 40px; padding: 0;
  flex-direction: column; justify-content: center; align-items: center; gap: 5px;
}
.nav-toggle span { display: block; width: 22px; height: 2.5px; background: var(--c1); border-radius: 2px; transition: transform 0.2s, opacity 0.2s; }
.nav-toggle.open span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity: 0; }
.nav-toggle.open span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }
.nav-mobile {
  display: none; flex-direction: column; background: var(--bg);
  border-top: 1px solid var(--border); padding: 6px 24px 12px;
}
.nav-mobile a {
  color: var(--text); font-size: 16px; font-weight: 600;
  padding: 14px 0; text-decoration: none; border-bottom: 1px solid var(--border);
}
.nav-mobile a:last-child { border-bottom: none; }
.nav-mobile.open { display: flex; }
/* The lead-magnet nav label carries the full registered name, which is ~123px wider than the
   old "Free Guide". Below 1100px that is enough to push the header into horizontal overflow,
   so drop the leading word and show just "Roadblocks®" while the full name still shows on
   roomier screens. */
@media (max-width: 1100px) { .nav-rb-long { display: none; } }

/* 940, not 880: with the full "Retirement Roadblocks®" label the desktop nav has under 5px of
   slack at 890px, so the Call button was pushed past the viewport edge. Switching to the hamburger
   sooner removes that cramped band and leaves room for agencies whose logo is wider than average. */
@media (max-width: 940px) {
  .nav-desktop { display: none; }
  .nav-toggle { display: flex; }
  .header-cta { padding: 10px 14px; font-size: 14px; }
}

/* CONTENT */
main.article {
  max-width: 820px; margin: 0 auto; padding: 56px 24px 80px;
}
main.article .eyebrow {
  font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 2px;
  color: var(--c2); margin-bottom: 12px;
}
main.article h1 {
  font-size: clamp(30px, 5vw, 44px); font-weight: 900; color: var(--c1);
  line-height: 1.15; margin-bottom: 14px;
}
main.article .lede {
  font-size: 19px; color: var(--text-muted); line-height: 1.55;
  margin-bottom: 36px;
}
main.article h2 {
  font-size: 26px; font-weight: 800; color: var(--c1);
  margin-top: 44px; margin-bottom: 14px; line-height: 1.25;
}
main.article h3 {
  font-size: 19px; font-weight: 700; color: var(--c1);
  margin-top: 28px; margin-bottom: 10px;
}
main.article p, main.article li {
  font-size: 17px; color: var(--text); line-height: 1.7;
  margin-bottom: 14px;
}
main.article ul, main.article ol {
  padding-left: 24px; margin-bottom: 18px;
}
main.article li { margin-bottom: 8px; }
main.article strong { color: var(--c1); font-weight: 700; }

.callout {
  background: var(--c2-soft); border-left: 4px solid var(--c2);
  padding: 18px 22px; border-radius: 8px; margin: 24px 0;
}
.callout p { margin-bottom: 0; font-size: 16px; }
.callout strong { color: var(--c2); }

.cta-card {
  background: var(--c2);
  color: var(--on-c1);
  padding: 32px 28px; border-radius: var(--radius);
  margin: 40px 0; text-align: center;
}
.cta-card h3 { color: var(--on-c1); font-size: 22px; margin-bottom: 8px; }
.cta-card p { color: var(--on-c1); opacity: 0.95; margin-bottom: 18px; font-size: 16px; }
.cta-card a {
  display: inline-block; background: #fff; color: var(--c1);
  padding: 14px 28px; border-radius: 50px; font-weight: 700; text-decoration: none;
}
.cta-card a:hover { opacity: 0.92; }

.crumb {
  font-size: 13px; color: var(--text-muted); margin-bottom: 14px;
}
.crumb a { color: var(--text-muted); }
.crumb a:hover { color: var(--c2); }

.read-more {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px; margin-top: 40px;
}
.read-more a {
  display: block; padding: 18px 20px; background: var(--bg-soft);
  border: 1px solid var(--border); border-radius: var(--radius);
  text-decoration: none; transition: transform 0.15s, box-shadow 0.15s;
}
.read-more a:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.read-more .rm-eyebrow { font-size: 12px; font-weight: 700; color: var(--c2); text-transform: uppercase; letter-spacing: 1px; }
.read-more .rm-title { font-size: 16px; font-weight: 700; color: var(--c1); margin-top: 4px; }

/* TABLE of contents (desktop) */
.toc {
  background: var(--bg-soft); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 22px 26px; margin-bottom: 40px;
}
.toc h2 { font-size: 14px; text-transform: uppercase; letter-spacing: 1.5px; color: var(--c2); margin-bottom: 12px; margin-top: 0; }
.toc ul { list-style: none; padding-left: 0; margin-bottom: 0; }
.toc li { margin-bottom: 6px; }
.toc a { font-size: 15px; color: var(--text); }
.toc a:hover { color: var(--c2); }

/* FAQ accordion */
.faq-list { margin-top: 24px; }
.faq-item {
  border-bottom: 1px solid var(--border); padding: 20px 0;
}
.faq-question {
  font-size: 17px; font-weight: 700; color: var(--c1); cursor: pointer;
  display: flex; justify-content: space-between; align-items: flex-start; gap: 16px;
  list-style: none; padding-right: 4px;
}
.faq-question::-webkit-details-marker { display: none; }
.faq-question::after {
  content: '+'; font-size: 22px; font-weight: 400; color: var(--c2);
  transition: transform 0.2s; flex-shrink: 0;
}
details[open] .faq-question::after { content: '−'; }
.faq-answer { padding-top: 12px; color: var(--text); font-size: 16px; line-height: 1.65; }

/* Glossary */
.gloss-letter {
  font-size: 32px; font-weight: 900; color: var(--c2);
  margin-top: 36px; margin-bottom: 8px; padding-bottom: 6px;
  border-bottom: 2px solid var(--c2-soft);
}
.gloss-term { margin-bottom: 18px; }
.gloss-term dt { font-weight: 700; color: var(--c1); margin-bottom: 4px; font-size: 17px; }
.gloss-term dd { color: var(--text); font-size: 16px; line-height: 1.6; padding-left: 0; }

.gloss-jump {
  display: flex; flex-wrap: wrap; gap: 6px; margin: 24px 0 32px;
  background: var(--bg-soft); padding: 14px; border-radius: var(--radius); border: 1px solid var(--border);
}
.gloss-jump a {
  display: inline-block; min-width: 32px; padding: 6px 10px; border-radius: 6px;
  background: var(--bg); color: var(--c1); font-weight: 700; font-size: 13px;
  text-align: center; border: 1px solid var(--border);
}
.gloss-jump a:hover { background: var(--c2); color: var(--on-c2); border-color: transparent; }

/* FOOTER */
.site-footer {
  background: #0a0e1a; color: #c8d0e0; padding: 56px 0 24px; margin-top: 60px;
}
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 40px; margin-bottom: 32px; }
body.holistic .footer-grid { grid-template-columns: 2fr 1fr 1fr 1.4fr 1fr; }
.site-footer h4 {
  color: #fff; font-size: 14px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 1.5px; margin-bottom: 14px;
}
.site-footer .footer-about p { font-size: 14px; line-height: 1.6; opacity: 0.85; }
.site-footer .footer-about address {
  font-style: normal; font-size: 14px; margin-top: 12px; line-height: 1.7; opacity: 0.85;
}
.site-footer ul { list-style: none; padding: 0; }
.site-footer ul li { margin-bottom: 8px; font-size: 14px; }
.site-footer a { color: #c8d0e0; text-decoration: none; }
.site-footer a:hover { color: #fff; text-decoration: underline; }
.footer-licenses {
  border-top: 1px solid rgba(255,255,255,0.1);
  padding-top: 20px; margin-bottom: 16px;
  font-size: 13px; line-height: 1.7; opacity: 0.85;
}
.footer-licenses strong { color: #fff; }
.footer-legal {
  border-top: 1px solid rgba(255,255,255,0.1); padding-top: 20px;
  font-size: 12px; opacity: 0.7; text-align: center; line-height: 1.6;
}
.footer-legal p { margin-bottom: 8px; }
/* CMS/TPMO disclosure. Required to be set no smaller than 12pt (== 16px) and to stay
   legible, so it opts out of the footer's 12px/0.7-opacity fine print. */
.footer-legal .cms-disclaimer { font-size: 16px; line-height: 1.5; opacity: 1; }

@media (max-width: 880px) {
  .footer-grid { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .container { padding: 0 16px; }
  main.article { padding: 36px 16px 60px; }
  main.article h1 { font-size: 28px; }
  main.article h2 { font-size: 22px; }
}

/* ---- Header dropdowns (Learn / Products) ----
   The bar needed ~1279px inside a 1140px container, so the phone CTA clipped below ~1560px.
   Grouping buys that room back. Opens on hover for mouse users and on click everywhere, so a
   touch iPad — which has no hover — can still open it. */
.nav-group { position: relative; }
.nav-trigger { display: inline-flex; align-items: center; gap: 6px; background: none; border: none;
  padding: 0; cursor: pointer; font: inherit; font-size: 18px; font-weight: 600; color: var(--text);
  transition: color 0.15s; }
.nav-trigger:hover { color: var(--c2); }
.nav-caret { width: 14px; height: 14px; flex: none; transition: transform 0.18s ease; }
.nav-group.open .nav-caret { transform: rotate(180deg); }
.nav-menu { position: absolute; top: calc(100% + 14px); left: 50%; transform: translateX(-50%);
  display: none; flex-direction: column; min-width: 210px; padding: 8px; background: var(--bg);
  border: 1px solid var(--border); border-radius: 14px;
  box-shadow: 0 18px 40px -12px rgba(16, 35, 62, 0.22); z-index: 60; }
.nav-group.open .nav-menu { display: flex; }
@media (hover: hover) { .nav-group:hover .nav-menu { display: flex; } }
.nav-group:focus-within .nav-menu { display: flex; }
/* Bridge the trigger→menu gap so the pointer can travel without dropping the hover. */
.nav-menu::before { content: ""; position: absolute; top: -16px; left: 0; right: 0; height: 16px; }
.nav-menu a { display: block; padding: 10px 14px; border-radius: 9px; font-size: 16px;
  font-weight: 600; color: var(--text); text-decoration: none; white-space: nowrap; }
.nav-menu a:hover { background: var(--c1-soft, rgba(10,61,98,.08)); color: var(--c2); }