/* overrides: page-specific tweaks go here */

/* === TABBED INSIGHTS HUB === */
.tabbed-insights .carousel__track {
  width: 100% !important;
}
.tabbed-insights .resources-slider__carousel__slide {
  width: 33.3333%;
}
.tabbed-insights .picture,
.tabbed-insights .resource-item__image {
  display: block;
  height: 200px !important;
  max-height: 200px !important;
  width: 100%;
}
.tabbed-insights .picture img,
.tabbed-insights .resource-item__image img {
  display: block;
  height: 100% !important;
  max-width: none;
  object-fit: cover;
  width: 100% !important;
}
.tabbed-insights .resources-slider__carousel__slide__item,
.tabbed-insights .insights-features-block__content__grid__item {
  border: 1px solid #cacfc8 !important;
  box-shadow: none;
  overflow: hidden;
}
.tabbed-insights .resources-slider__carousel .resources-slider__carousel__slide__item {
  margin: 10px;
}
.tabbed-insights .insights-features-block__content__grid__item {
  margin: 0;
}
.tabbed-insights .insights-features-block__content__grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}

.tabbed-insights .c-tabs {
  min-width: 0;
}

@media (max-width: 767px) {
  .tabbed-insights .resources-slider,
  .tabbed-insights .insights-features-block {
    padding-left: 20px;
    padding-right: 20px;
  }
  .tabbed-insights .resources-slider__carousel__slide {
    width: 100%;
  }
  .tabbed-insights .insights-features-block__tabs {
    align-items: stretch;
    flex-direction: column-reverse;
    gap: 16px;
  }
  .tabbed-insights .c-search,
  .tabbed-insights .c-search__field {
    width: 100%;
  }
  .tabbed-insights .c-search__field input {
    min-width: 0;
    width: 100%;
  }
  .tabbed-insights .insights-features-block__content__grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

/* === STORIES ARCHIVE HOME === */
.stories-vest-financial .page-hero--stories-kadence {
  display: none;
}
.stories-body .stories-archive .post-archive {
  display: grid;
  gap: 40px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0;
  padding: 0;
}
.stories-body .stories-archive .entry {
  background: #fff;
  color: #003140;
  flex-basis: auto;
  flex-grow: 0;
  height: auto;
  overflow: hidden;
}
.stories-body .stories-archive .entry-list-item {
  flex-basis: auto;
  height: auto;
}
.stories-body .stories-archive .post-thumbnail img {
  display: block;
  height: 100%;
  object-fit: cover;
  width: 100%;
}
.stories-body .stories-archive .entry-title {
  color: #003140;
  line-height: 1.3;
  margin: 0;
}
.stories-body .stories-archive .entry-title a,
.stories-body .stories-archive .entry-taxonomies a,
.stories-body .stories-archive .entry-meta a,
.stories-body .stories-archive .post-more-link {
  color: #003140;
  text-decoration: none;
}
.stories-body .stories-archive .entry-summary p {
  color: #053141 !important;
  line-height: 1.5;
}

/*Hide navbar and cta button on stories page*/
.is-stories-chrome .navbar .navbar__wrapper__container__left-block__nav-items,
.is-stories-chrome .navbar .navbar__wrapper__container__right-block__cta,
.is-stories-chrome .mobile-navbar .mobile-navbar__top-bar__menu {
	display: none;
}

/*hide header border on stories page*/
.is-stories-chrome .navbar__wrapper {
	border-bottom: 0px;
}

/*adjust navbar height for stories page only*/
.is-stories-chrome .navbar {
	height: 80px !important;
    padding: 10px 0px;
}
.stories-body .stories-archive {
	margin-left: 0px; 
    margin-right: 0px; 
    padding: 5rem 0px;
}
.is-stories-chrome #primary.content-area {
	background-color: #f4f4ef;
}

.stories-archive .entry-list-item .entry {
	border-radius: 0px 0px .25rem .25rem;
	box-shadow: 0px 15px 15px -10px rgba(0, 0, 0, 0.05);
}
.is-stories-chrome .stories-body .entry-header {
	padding-top: 32px !important;
	padding-bottom: 32px;
}
.is-stories-chrome .stories-body .entry-header .post-thumbnail {
	margin-top: 15px !important;
}
.stories-archive .entry-list-item .entry-taxonomies a,
.stories-body .entry-header .category-links span {
	font-size: 11.2px;
	font-weight: 700;
	letter-spacing: 0.56px;
	line-height: 16.8px;
	color: #053141 !important;
}
.stories-archive .entry-list-item .entry-title {
	font-size: 28px !important;
	font-weight: 700;
	line-height: 42px !important;
}
.stories-archive .entry-list-item .entry-meta .meta-label,
.stories-archive .entry-list-item .entry-meta .author,
.stories-archive .entry-list-item .entry-meta .meta-divider,
.stories-archive .entry-list-item .entry-meta .posted-on .entry-date {
	font-size: 12.8px !important;
	font-weight: 400 !important;
	line-height: 19.2px !important;
	color: #053141 !important;
}
.stories-archive .entry-list-item .entry-header {
	margin-bottom: 0px;
}
.stories-archive .entry-list-item .more-link-wrap a {
	letter-spacing: 0.64px !important;
}
.is-stories-chrome .stories-body .faq-accordion--stories p {
	margin-bottom: 32px;
}
.is-stories-chrome .stories-body .post-navigation {
	border: 0px;
}
.is-stories-chrome .stories-body .post-navigation,
.is-stories-chrome .stories-body .more-to-explore {
	padding: 2rem;
}
.is-stories-chrome .stories-body .more-to-explore {
	background-color: #f4f4ef;
}
.is-stories-chrome .stories-body .more-to-explore .related-entry {
	background: #fff;
}
.is-stories-chrome .stories-body .more-to-explore .related-entry a > div {
	padding: 2rem 45px 2rem 2rem;
}
.is-stories-chrome .stories-body .more-to-explore .related-entry img {
	margin-bottom: 0px;
}
.is-stories-chrome .stories-body .content-section li {
	list-style: disc;
}
.is-stories-chrome .stories-body .content-section p.has-medium-font-size {
	font-size: 20px !important;
	line-height: 30px !important;
}
.is-stories-chrome .stories-body .content-section p a {
	text-decoration: underline;
}
.is-stories-chrome a.nav-previous {
	display: flex;
	flex-direction: column;
	text-decoration: none;
	font-weight: 400;
	font-size: 16px;
	flex: 1;
}
.is-stories-chrome a.nav-previous::before {
	content: "← PREVIOUS";
	display: block;
	font-size: 12.8px;
	font-weight: 700;
	letter-spacing: 0.64px;
	text-transform: uppercase;
	color: #003140;
	margin-bottom: 6px;
}
.is-stories-chrome a.nav-next {
	display: flex;
	flex-direction: column-reverse;
	text-decoration: none;
	font-weight: 400;
	font-size: 16px;
	text-align: right;
	align-items: end;
	flex: 1;
	border-left: 1px solid #e5e5e5;
	padding-left: 2rem;
}
.is-stories-chrome a.nav-next::after {
	content: "NEXT →";
	display: block;
	font-size: 12.8px;
	font-weight: 700;
	letter-spacing: 0.64px;
	text-transform: uppercase;
	color: #003140;
	margin-bottom: 6px;
}
/*Hide footer elements for stories*/
.is-stories-chrome section.cta,
.is-stories-chrome section.subfooter {
	display: none;
}

.is-stories-chrome section.adviser-footer {
	background-color: #f4f4ef;
	padding-bottom: 0px;
}
.is-stories-chrome .adviser-footer__inner {
	border-top: 0px;
}
.is-stories-chrome .adviser-footer__inner:before {
	content: "";
    background-color: rgb(202 207 200);
    width: 96%;
    height: 3px;
    margin: 0px auto 40px;
}
.is-stories-chrome .adviser-footer__inner__first-column {
	display: flex;
}
.is-stories-chrome .adviser-footer__inner__first-column p:first-child {
	order: 1;
}
.is-stories-chrome .adviser-footer__inner__first-column a {
	text-decoration: none;
}
.is-stories-chrome .adviser-footer__inner__first-column a:hover {
	text-decoration: underline;
}
.is-stories-chrome .adviser-footer p, 
.is-stories-chrome .adviser-footer a, 
.is-stories-chrome .adviser-footer b, 
.is-stories-chrome .adviser-footer strong, 
.is-stories-chrome .adviser-footer span, 
.is-stories-chrome .adviser-footer li {
	font-family: 'DM Sans', sans-serif !important; 
}
.is-stories-chrome .adviser-footer .adviser-footer__inner__second-column p {
	margin-top: 30px;
	margin-bottom: 30px;
}
.is-stories-chrome .adviser-footer > div._container {
	padding-right: 12px;
    padding-left: 12px;
}

/*Stories single post*/
.is-stories-chrome .stories-body {
	background-color: #fff;
}
@media (max-width: 767px) {
  .stories-body .stories-archive .post-archive {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .stories-body .stories-archive .entry-content-wrap {
    padding: 2rem;
  }
  .stories-body .stories-archive .entry-title {
    font-size: 28px;
  }
  .is-stories-chrome .adviser-footer__inner:before {
    width: 85%;
  }
  .is-stories-chrome section.adviser-footer {
		padding-left: 1.5rem;
		padding-right: 1.5rem;
	}
}

/* === POST BODY TYPOGRAPHY (blog_post / field_note) ===
 * Live Nuxt renders each <p>/<h3>/<img> inside the raw body with inline-like
 * styles: text-[#1b3147] text-xl leading-[1.8] my-5 and word-break: break-word.
 * wp_kses_post() strips class attrs we don't control, so we apply the same
 * visual rhythm via descendant selectors on .post-body-content.
 * Matters because: iter-6 QA found blog posts 30-40% shorter than live (vol-trap
 * 6210 vs 9193 px, etc.). The single largest cause was line-height (prose-lg
 * leading-7 vs live leading-[1.8]) plus the removed sidebar widening the body.
 */
.post-body-content {
  font-size: 20px;
  line-height: 1.8;
  color: #1b3147;
  font-family: 'DM Sans', sans-serif;
}
.post-body-content p {
  margin-top: 20px;
  margin-bottom: 20px;
  overflow-wrap: anywhere;
  word-break: break-word;
  font-size: 20px;
  line-height: 1.8;
}
.post-body-content h2 {
  font-size: 32px;
  line-height: 1.3;
  font-weight: 700;
  margin-top: 40px;
  margin-bottom: 20px;
  color: #1b3147;
}
.post-body-content h3 {
  font-size: 20px;
  line-height: 1.8;
  font-weight: 700;
  margin-top: 20px;
  margin-bottom: 20px;
  color: #1b3147;
}
.post-body-content h4 {
  font-size: 18px;
  font-weight: 700;
  margin-top: 24px;
  margin-bottom: 12px;
  color: #1b3147;
}
.post-body-content img {
  max-width: 100%;
  height: auto;
  display: inline-block;
}
.post-body-content ul,
.post-body-content ol {
  margin-top: 20px;
  margin-bottom: 20px;
  padding-left: 1.5em;
}
.post-body-content ul { list-style: disc; }
.post-body-content ol { list-style: decimal; }
.post-body-content li {
  margin-top: 8px;
  margin-bottom: 8px;
  line-height: 1.8;
}
.post-body-content blockquote {
  border-left: 4px solid #003140;
  padding-left: 24px;
  margin: 32px 0;
  font-style: italic;
  color: #003140;
}
.post-body-content a {
  color: #02334d;
  text-decoration: underline;
}
.post-body-content em { font-style: italic; }
.post-body-content strong { font-weight: 700; }
.post-body-content figure { margin: 20px 0; }
.post-body-content figcaption {
  font-size: 14px;
  opacity: 0.7;
  margin-top: 8px;
  font-style: italic;
}

/* === POST BODY TABLES ===
 * Imported blog tables come from Nuxt CMS with `border:none` inline on <table>
 * and no border styling on cells, so they paint as a wall of unstyled text.
 * Live Nuxt's scoped CSS adds: 1px solid #c6d1d5 outer table border, the same
 * color as inner cell borders (right + bottom), 16px/24px cell padding, 16px
 * cell font-size / 24px line-height, and #003242 text color. Verified via
 * puppeteer on /blog/posts/managing-over-time (2026-05-10).
 * Scope hard to `.post-body-content table` so this never leaks into other
 * partials that may include tables (funds list, etc).
 */
.post-body-content table {
  border-collapse: collapse;
  border: 1px solid #c6d1d5;
  margin: 24px auto;
  max-width: 100%;
  color: #003242;
  font-family: 'DM Sans', sans-serif;
}
.post-body-content table td,
.post-body-content table th {
  padding: 16px 24px;
  border-right: 1px solid #c6d1d5;
  border-bottom: 1px solid #c6d1d5;
  border-top: none;
  border-left: none;
  font-size: 16px;
  line-height: 24px;
  color: #003242;
  vertical-align: middle;
}
.post-body-content table th {
  font-weight: 600;
  text-align: center;
  background-color: transparent;
}
/* Tables imported from CMS use inline width like "width:500pt" which can
 * overflow the 4xl body column on narrow viewports; force responsive. */
.post-body-content table {
  width: 100% !important;
  display: block;
  overflow-x: auto;
}
.post-body-content table tbody {
  display: table;
  width: 100%;
}
/* Strong tags inside cells should still bold but inherit cell sizing. */
.post-body-content table strong { font-weight: 600; }
.post-body-content table span { color: inherit !important; }

/* Back button icon alignment in post header */
.blog-post .back-button .material-icons {
  font-size: 24px;
  line-height: 1;
}

/* === LONG-FORM POST SHELL ===
 * Tailwind CDN utilities are injected late, so pin the shared post shell with
 * post-scoped selectors. This keeps desktop parity while preventing mobile
 * captures from inheriting the oversized desktop display scale and header gap.
 */
.blog-post .post-meta {
  line-height: 1.55;
}
.blog-post .post-cover-image img {
  object-position: center center;
}
@media (max-width: 767px) {
  .blog-post .post-header {
    padding-top: 48px;
    padding-bottom: 48px;
  }
  .blog-post .back-button {
    margin-bottom: 24px;
  }
  .blog-post .post-title {
    font-size: 28px;
    line-height: 1.2;
    margin-bottom: 16px;
  }
  .blog-post .post-subtitle {
    font-size: 20px !important;
    line-height: 1.3 !important;
  }
  .blog-post .post-page {
    padding-top: 48px;
    padding-bottom: 56px;
  }
  .blog-post .post-page__content {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
  .blog-post .post-body-content,
  .blog-post .post-body-content p {
    font-size: 20px;
    line-height: 1.8;
  }
  .blog-post .post-body-content table {
    margin-left: 0;
    margin-right: 0;
  }
  .blog-post .post-body-content table td,
  .blog-post .post-body-content table th {
    padding: 12px 14px;
  }
  .blog-post + .recommended-articles {
    padding-top: 48px;
    padding-bottom: 56px;
  }
  .blog-post + .recommended-articles .recommended-articles__title {
    font-size: 28px !important;
    line-height: 1.2 !important;
    margin-bottom: 24px;
  }
  .blog-post + .recommended-articles .recommended-articles__grid {
    gap: 20px;
  }
  .blog-post + .recommended-articles .post-image {
    height: 200px;
  }
}

/* === PAGE HERO DARK VARIANT ===
 * Live about-us ("Our Firm") hero has a bottom-right pixel/supergraphic pattern
 * at 30% width, no-repeat. Matching via CSS so arbitrary-URL Tailwind JIT can't
 * fail. Served from vestfin.com directly; this is the same origin strategy used
 * for live author photos and cover images (already accepted in current iteration).
 */
.page-hero--dark {
  background-image: url('/wp-content/uploads/2026/05/homepage-header-1.svg');
  background-repeat: no-repeat;
  background-position: 100% 100%;
  background-size: 30% auto;
}
/* Scale the supergraphic down on narrow screens so it doesn't overwhelm title */
@media (max-width: 767px) {
  .page-hero--dark {
    background-size: 50% auto;
  }
}

/* === STRATEGY GUIDE SHARED RHYTHM ===
 * The four strategy pages use a desktop anchor menu but live mobile presents
 * section titles as accordion rows. Scope through #page-menu-section so these
 * rules do not affect generic flex pages.
 */
main.page-content:has(#page-menu-section) #additional-resources .resources-slider__carousel__slide__item,
main.page-content:has(#page-menu-section) #additional-resources .resource-item,
main.page-content:has(#page-menu-section) .additional-resources__card {
  border: 1px solid #cacfc8 !important;
  box-shadow: none !important;
  overflow: hidden;
}
main.page-content:has(#page-menu-section) #additional-resources .resources-slider__carousel__slide__item,
main.page-content:has(#page-menu-section) #additional-resources .resource-item {
  min-height: 420px;
}
main.page-content:has(#page-menu-section) #additional-resources .picture,
main.page-content:has(#page-menu-section) #additional-resources .resource-item__image,
main.page-content:has(#page-menu-section) .additional-resources__image {
  background: #f4f4ef;
  display: block;
  height: 200px !important;
  max-height: 200px !important;
  min-height: 200px !important;
  overflow: hidden;
  width: 100%;
}
main.page-content:has(#page-menu-section) #additional-resources .picture img,
main.page-content:has(#page-menu-section) #additional-resources .resource-item__image img,
main.page-content:has(#page-menu-section) .additional-resources__image img {
  display: block;
  height: 100% !important;
  max-width: none !important;
  object-fit: cover;
  width: 100% !important;
}
main.page-content:has(#page-menu-section) #additional-resources .resource-item__body,
main.page-content:has(#page-menu-section) .additional-resources__card-body {
  min-height: 220px;
}

main.page-content:has(#page-menu-section) .target-income-header__content {
	padding-bottom: 120px !important;
	padding-top: 120px !important;
}
main.page-content:has(#page-menu-section) .target-income-header__title {
	font-size: 60px !important;
}	
main.page-content:has(#page-menu-section) .target-income-sub-header__title {
	font-size: 40px !important;
	font-weight: 700 !important;
	letter-spacing: -.02em !important;
	line-height: 1.3 !important;
	margin: 0 0 2rem !important;
}
@media (max-width: 899px) {
	main.page-content:has(#page-menu-section) .target-income-header__content {
		padding-bottom: 4rem !important;
		padding-top: 2.25rem !important;
	}
	main.page-content:has(#page-menu-section) .target-income-header__title {
		font-size: 40px !important;
		line-height: 1.2 !important;
	}	
	main.page-content:has(#page-menu-section) .target-income-sub-header__title {
		font-size: 32px !important;
	}
}

@media (max-width: 767px) {
  main.page-content:has(#page-menu-section) #page-menu-section {
    display: none;
  }
  main.page-content:has(#page-menu-section) .strategy-header,
  main.page-content:has(#page-menu-section) .buffer-header {
    padding-bottom: 72px !important;
    padding-top: 72px !important;
  }
  main.page-content:has(#page-menu-section) .target-income-header {
    padding-top: 30px;
  }
  main.page-content:has(#page-menu-section) .buffer-header__content {
    padding-bottom: 0 !important;
    padding-top: 40px !important;
  }
  main.page-content:has(#page-menu-section) .buffer-header h1:not(.retirement-sol-title),
  main.page-content:has(#page-menu-section) .strategy-header__title,
  main.page-content:has(#page-menu-section) .page-hero__title {
    /* QA pass (May 16 2026): unify mobile h1 to 48px / 56px LH */
    font-size: 48px !important;
    line-height: 56px !important;
    margin-bottom: 28px !important;
  }
  main.page-content:has(#page-menu-section) .buffer-header__description,
  main.page-content:has(#page-menu-section) .target-income-sub-header__description,
  main.page-content:has(#page-menu-section) .page-hero__subtitle {
    font-size: 20px !important;
    line-height: 1.45 !important;
  }
  main.page-content:has(#page-menu-section) .retirement-solutions-header,
  main.page-content:has(#page-menu-section) .retirement-solutions-header * {
    text-align: left !important;
    text-align-last: left !important;
  }

  main.page-content:has(#page-menu-section) .page-hero {
    min-height: 690px !important;
    padding-bottom: 0 !important;
    padding-top: 0 !important;
  }
  main.page-content:has(#page-menu-section) .page-hero__container {
    background-position: center bottom 64px !important;
    background-size: 45% auto !important;
    min-height: 690px !important;
    padding-top: 90px !important;
  }
  main.page-content:has(#page-menu-section) .page-hero__title,
  main.page-content:has(#page-menu-section) .page-hero__subtitle {
    max-width: 100% !important;
  }

  main.page-content:has(#page-menu-section) section:has(> .content-section > .section-header),
  main.page-content:has(#page-menu-section) section.layout-padding-y:has(> .content-section > .section-header),
  main.page-content:has(#page-menu-section) section.how-it-works:has(.content-section > .section-header),
  main.page-content:has(#page-menu-section) section.how-to-invest:has(.content-section > .section-header),
  main.page-content:has(#page-menu-section) .content-section:has(> .section-header),
  main.page-content:has(#page-menu-section) .additional-resources:has(> .section-header) {
    background: #fff !important;
    padding: 0 !important;
  }
  main.page-content:has(#page-menu-section) .content-section > .section-header,
  main.page-content:has(#page-menu-section) .additional-resources > .section-header {
    align-items: center !important;
    background: #fff !important;
    border-bottom: 1px solid #cacfc8 !important;
    color: #003140 !important;
    display: flex !important;
    font-size: 20px !important;
    font-weight: 700 !important;
    justify-content: space-between !important;
    line-height: 1.25 !important;
    min-height: 64px !important;
    padding: 16px 20px !important;
    text-align: left !important;
    width: 100% !important;
  }
  main.page-content:has(#page-menu-section) .content-section > .section-header:first-child,
  main.page-content:has(#page-menu-section) .additional-resources > .section-header:first-child {
    border-top: 1px solid #cacfc8 !important;
  }
  /* Mobile accordion font parity with live.
   * Inner <div> children of .section-header sometimes carry text-body /
   * text-body-lg / font-sans utility classes from the pattern templates
   * (16px/400). Live emits a bare <div> that inherits the .section-header
   * weight (20px/700). Force consistency so all accordion labels render
   * identically. */
  main.page-content:has(#page-menu-section) .content-section > .section-header > *,
  main.page-content:has(#page-menu-section) .additional-resources > .section-header > * {
    color: inherit !important;
    font-family: inherit !important;
    font-size: inherit !important;
    font-weight: inherit !important;
    line-height: inherit !important;
  }
  main.page-content:has(#page-menu-section) .content-section > .section-header > .section-header__icon,
  main.page-content:has(#page-menu-section) .additional-resources > .section-header > .section-header__icon {
    /* Icon keeps its own dimensions — overridden below. */
    font-size: 0 !important;
  }
  main.page-content:has(#page-menu-section) .section-header__icon {
    border-bottom: 4px solid #000;
    border-right: 4px solid #000;
    display: block;
    flex: 0 0 auto;
    height: 16px;
    margin-left: 18px;
    transform: rotate(45deg);
    width: 16px;
  }
  main.page-content:has(#page-menu-section) .strategy-mobile-open > .section-header {
    border-bottom: 2px solid #ff8d00 !important;
  }
  main.page-content:has(#page-menu-section) .strategy-mobile-open > .section-header .section-header__icon {
    transform: rotate(225deg);
  }
  main.page-content:has(#page-menu-section) .content-section > .section-header + article,
  main.page-content:has(#page-menu-section) .content-section > .section-header + .hidden-content,
  main.page-content:has(#page-menu-section) .additional-resources > .section-header + article {
    display: none !important;
  }
  main.page-content:has(#page-menu-section) .strategy-mobile-open > .section-header + article {
    display: block !important;
  }
  main.page-content:has(#page-menu-section) .strategy-mobile-open > article {
    padding-bottom: 48px;
    padding-top: 48px;
  }
  main.page-content:has(#page-menu-section) .strategy-mobile-open .grid {
    grid-template-columns: 1fr;
  }
  main.page-content:has(.target-income-sub-header) #jumbotron-block + section.content-section {
    background: #fff !important;
    padding: 0 !important;
  }
  main.page-content:has(.target-income-sub-header) #jumbotron-block + section.content-section > div {
    max-width: none !important;
    padding: 0 !important;
  }
  main.page-content:has(.target-income-sub-header) #jumbotron-block + section.content-section h2 {
    align-items: center !important;
    background: #fff !important;
    border-bottom: 1px solid #cacfc8 !important;
    color: #003140 !important;
    display: flex !important;
    font-size: 20px !important;
    font-weight: 700 !important;
    justify-content: space-between !important;
    line-height: 1.25 !important;
    margin: 0 !important;
    min-height: 64px !important;
    padding: 16px 20px !important;
    width: 100% !important;
  }
  main.page-content:has(.target-income-sub-header) #jumbotron-block + section.content-section h2::after {
    border-bottom: 4px solid #000;
    border-right: 4px solid #000;
    content: "";
    display: block;
    flex: 0 0 auto;
    height: 16px;
    margin-left: 18px;
    transform: rotate(45deg);
    width: 16px;
  }
  main.page-content:has(.target-income-sub-header) #jumbotron-block + section.content-section .prose {
    display: none !important;
  }
  main.page-content:has(#page-menu-section) #additional-resources .carousel__track {
    gap: 0 !important;
  }
  main.page-content:has(#page-menu-section) #additional-resources .resources-slider__carousel__slide {
    width: 76vw !important;
    min-width: 280px !important;
  }
  main.page-content:has(#page-menu-section) #additional-resources .resources-slider__carousel__slide__item,
  main.page-content:has(#page-menu-section) #additional-resources .resource-item,
  main.page-content:has(#page-menu-section) .additional-resources__card {
    min-height: 0;
  }
  main.page-content:has(#page-menu-section) #additional-resources .resource-item__body,
  main.page-content:has(#page-menu-section) .additional-resources__card-body {
    min-height: 220px;
    padding: 24px !important;
  }
  main.page-content:has(#page-menu-section) .strategy-mobile-open .resources-slider__carousel__slide:nth-child(n+2),
  main.page-content:has(#page-menu-section) .strategy-mobile-open .additional-resources__card:nth-of-type(n+2) {
    display: none !important;
  }
  main.page-content:has(#page-menu-section) .fund-disclaimer {
    padding: 28px 0 !important;
  }
  main.page-content:has(#page-menu-section) .fund-disclaimer__box {
    background: #fff !important;
    border: 0 !important;
    color: #003140 !important;
    font-size: 16px !important;
    line-height: 1.5 !important;
    padding: 0 !important;
  }
}

/* === FUNDS-LIST PRODUCT CARDS (etfs / mutual-funds) ===
 * Live Nuxt's Vue-scoped CSS adds extra paint that Tailwind CDN utilities
 * alone don't capture: button min-height, h2 line-height, body line-leading.
 * Using !important because Tailwind CDN injects its <style> rules at runtime
 * AFTER overrides.css loads, so plain selectors lose the cascade. These
 * rules close the per-card height delta that drove etfs/mutual-funds
 * sectional SSIM down by Δ~33-50px per card. Wave 2 SSIM-fidelity pass
 * (2026-05-09).
 */
/* product-landing: live has implicit 40px gap between wrapper and container
 * (margin-collapse semantics differ between Nuxt+Vue scoped CSS and our
 * vanilla utility output). Bump pl padding-top to match. */
.product-landing {
  padding-top: 40px;
}
/* etfs cards (.product) */
.product__body {
  padding-top: 15px;
  padding-bottom: 15px;
}
h2.product__name {
  line-height: 1.5 !important;
  font-size: 24px;
}
.product__description p {
  margin: 0 !important;
}
.product__actions__btn,
.product__actions button.orange-btn {
  min-height: 74px !important;
  height: auto !important;
}
.product__actions__btn::after {
  content: '↗';
  margin-left: 0.5rem;
  font-weight: 700;
}
.product__actions {
  align-self: center;
  display: flex;
  align-items: center;
  width: 360px;
  flex: 0 0 360px;
}
.product__actions a {
  width: 100%;
}
.product__actions a > button {
  width: 100%;
}
/* mutual-funds cards (.fund / .funds-item) */
h2.fund-item__name {
  line-height: 1.5 !important;
  font-size: 24px;
}
.fund-item__description p {
  margin: 0 !important;
}
/* mutual-funds button is naturally h-fit ~48px on live (no min-height) */
.funds-item .fund button.orange-btn {
  white-space: nowrap;
}
/* Static ticker chip approximation — live's Vue widget renders ~159×514 */
.fund-ticker-info {
  min-height: 159px;
  min-width: 514px;
  align-items: center;
}
.ticker-container {
  min-width: 514px;
  width: 100%;
}

/* document-list grouped PDF index: live renders grouped fund documents as a
 * dark download block, not the generic white divided-list fallback. */
.document-list--grouped {
  padding-top: 150px;
  padding-bottom: 150px;
}
.document-list--grouped .document-list__heading {
  display: none;
}
.document-list__group {
  align-items: flex-start;
  border-bottom: 1px solid rgba(255, 255, 255, 0.58);
  display: grid;
  gap: 64px;
  grid-template-columns: minmax(340px, 1fr) minmax(420px, 540px);
  padding: 52px 0 68px;
}
.document-list__group:first-of-type {
  padding-top: 0;
}
.document-list__group-title {
  color: #fff;
  font-size: 26px;
  font-weight: 700;
  line-height: 1.55;
  margin: 0;
  max-width: 540px;
}
.document-list__links {
  display: grid;
  gap: 26px 54px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  list-style: none;
  margin: 0;
  padding: 0;
}
.document-list__link-item {
  margin: 0;
}
.document-list__download-link {
  align-items: start;
  color: #fff;
  display: inline-flex;
  font-size: 18px;
  gap: 15px;
  line-height: 1.2;
  text-decoration: none;
}
.document-list__download-link:hover,
.document-list__download-link:focus {
  color: #fff;
  text-decoration: underline;
}
.document-list__download-icon {
  background-color: currentColor;
  display: inline-block;
  flex: 0 0 auto;
  height: 20px;
  mask: url("icons/download.svg") 50% 50% / contain no-repeat;
  width: 25px;
  -webkit-mask: url("icons/download.svg") 50% 50% / contain no-repeat;
}
.document-list__disclosure {
  background: #ffd49c;
  color: #003140;
  font-size: 14px;
  line-height: 1.32;
  margin-top: 70px;
  padding: 36px 40px;
}
.document-list__disclosure p {
  margin: 0 0 16px;
}
.document-list__disclosure p:last-child {
  margin-bottom: 0;
}

@media (max-width: 599px) {
  .document-list--grouped {
    padding-top: 112px;
    padding-bottom: 96px;
  }
  .document-list--grouped .document-list__container {
    padding-left: 20px;
    padding-right: 20px;
  }
  .document-list__group {
    display: block;
    padding: 74px 0 68px;
  }
  .document-list__group:first-of-type {
    padding-top: 0;
  }
  .document-list__group-title {
    font-size: 25px;
    line-height: 1.65;
    margin-bottom: 42px;
  }
  .document-list__links {
    display: grid;
    gap: 22px;
    grid-template-columns: 1fr;
  }
  .document-list__download-link {
    font-size: 20px;
    gap: 13px;
  }
  .document-list__disclosure {
    font-size: 14px;
    line-height: 1.38;
    margin-top: 56px;
    padding: 36px 24px;
  }

  .product-landing .product {
    margin-bottom: 0 !important;
    margin-top: 0 !important;
    padding: 48px 32px !important;
  }
  .product-landing .product__body {
    padding-bottom: 0 !important;
    padding-top: 0 !important;
    width: 100% !important;
  }
  .product-landing .product__actions {
    flex: 0 0 auto !important;
    margin-left: 0 !important;
    margin-top: 42px !important;
    width: 100% !important;
  }
  .product-landing .product__actions__btn,
  .product-landing .product__actions button.orange-btn {
    min-height: 0 !important;
    width: 100% !important;
  }

  .product-landing .fund {
    align-items: stretch !important;
    display: flex !important;
    flex-direction: column !important;
    padding: 32px !important;
  }
  .product-landing .funds-item__body {
    padding-right: 0 !important;
    width: 100% !important;
  }
  .product-landing .fund-ticker-info {
    align-items: stretch !important;
    margin-bottom: 16px !important;
    min-height: 0 !important;
    min-width: 0 !important;
    width: 100% !important;
  }
  .product-landing .ticker-container {
    align-items: stretch !important;
    flex-direction: column !important;
    min-height: 182px !important;
    min-width: 0 !important;
    width: 100% !important;
  }
  .product-landing .ticker-container__ticker {
    padding: 20px !important;
    width: 100% !important;
  }
  .product-landing .ticker-container .body {
    width: auto !important;
  }
  .product-landing .ticker-divider {
    display: block !important;
    width: 100% !important;
  }
  .product-landing .ticker-extra {
    max-width: none !important;
    padding: 0 20px 20px !important;
    width: 100% !important;
  }
  .product-landing .funds-item .fund a {
    display: block !important;
    width: 100% !important;
  }
  .product-landing .funds-item .fund button.orange-btn {
    font-size: 14px !important;
    min-height: 0 !important;
    padding: 8px 12px !important;
    width: 100% !important;
  }
}

/* === BIO TEMPLATE ===
 * The live team-member page changes from a desktop photo/text row into a
 * centered mobile intro: name, role, cropped portrait, then narrow body copy.
 * Scope to .member so these fixes do not affect shared page chrome.
 */
.member__container {
  display: grid !important;
  grid-template-columns: minmax(0, 25%) minmax(0, 66.666667%);
  justify-content: center;
}
.member__container__photo {
  grid-column: 1;
  grid-row: 1 / span 2;
  width: 100% !important;
}
.member__container__info--heading {
  grid-column: 2;
  grid-row: 1;
  width: 100% !important;
  padding-bottom: 0 !important;
}
.member__container__info--bio {
  grid-column: 2;
  grid-row: 2;
  width: 100% !important;
  margin-top: -32px;
  padding-top: 0 !important;
}

@media (max-width: 767px) {
  .member__container {
    display: flex !important;
    flex-direction: column;
    align-items: stretch;
    padding-top: 78px !important;
    max-width: 100% !important;
  }
  .member__container__info--heading {
    order: 1;
    width: 100% !important;
    margin-top: 0 !important;
    padding: 0 36px !important;
    text-align: center;
  }
  .member__container__info__title {
    font-size: 24px !important;
    line-height: 30px !important;
    margin: 0 0 8px !important;
    text-align: center !important;
  }
  .member__container__info__position {
    font-size: 18px !important;
    line-height: 24px !important;
    margin: 0 auto !important;
    text-align: center !important;
  }
  .member__container__photo {
    order: 2;
    width: 100% !important;
    padding: 22px 0 132px !important;
    text-align: center;
  }
  .member__container__photo img {
    display: block;
    width: 192px !important;
    height: 78px !important;
    max-width: calc(100vw - 72px);
    object-fit: cover;
    object-position: top center;
    margin: 0 auto;
  }
  .member__container__info--bio {
    order: 3;
    width: 100% !important;
    margin-top: 0 !important;
    padding: 0 36px 40px !important;
  }
  .member__container__info__bio {
    max-width: 606px;
    margin: 0 auto !important;
    font-size: 16px !important;
    line-height: 20px !important;
    text-align: left !important;
  }
  .member__container__info__bio p {
    margin-top: 0 !important;
    margin-bottom: 20px !important;
    line-height: 20px !important;
  }
}

/* === Footer Pseudo for career === */
.footer-nav a[href="/careers"] {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
@media (min-width: 1401px) {
	.footer-nav a[href="/careers"]::after {
		content: "We're hiring";
		background-color: #ffa523;
		color: inherit;
		font-size: 10px;
		font-weight: 700;
		line-height: 1;
		padding: 6px 8px;
		white-space: nowrap;
	}
}


/* ===========================================================================
 * /careers/ — un-scoped versions of Nuxt's marquee + sticky-scroll rules.
 * Live's compiled CSS uses [data-v-a5cf1e91] attribute selectors that never
 * match our static markup, so we re-declare them here without the scope.
 * Mirrors live verbatim (color list + 80px font + 25s linear loop).
 * ========================================================================= */
.marquee {
  --gap: 4rem;
  display: flex;
  gap: var(--gap);
  overflow: hidden;
  user-select: none;
}
.marquee__content {
  animation: marquee-scroll 25s linear infinite;
  display: flex;
  flex-shrink: 0;
  font-size: 80px;
  font-style: normal;
  font-weight: 500;
  gap: var(--gap);
  justify-content: space-around;
  letter-spacing: -1.6px;
  line-height: 100px;
  min-width: 100%;
}
.marquee__content > li { list-style: none; }
.marquee__content__innovative    { color: #ffa523; }
.marquee__content__empowering    { color: #0fa8ba; }
.marquee__content__transparent   { color: #024d6b; }
.marquee__content__energetic     { color: #e56869; }
.marquee__content__flexible      { color: #2b9d6d; }
.marquee__content__inclusive     { color: #346bef; }
.marquee__content__supportive    { color: #56b70d; }
.marquee__content__collaborative { color: #00808f; }
@keyframes marquee-scroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(calc(-100% - var(--gap))); }
}
@media (max-width: 767px) {
  .marquee__content { font-size: 40px; line-height: 60px; }
}

/* careers hero sticky scroller: re-declare un-scoped */
.careers-header-wrapper .tall-outer-container {
  position: relative;
  width: 100%;
}
.careers-header-wrapper .tall-outer-container__sticky-inner-container {
  background: #003140;
  height: 100vh;
  overflow: hidden;
  position: sticky;
  top: 0;
  width: 100%;
}
.careers-header-wrapper .tall-outer-container__sticky-inner-container__horizontal-translate-container {
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  will-change: transform;
  width: max-content;
}
.careers-header-wrapper .careers-header__slides {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  height: 100%;
  align-items: center;
}
.careers-header-wrapper .careers-header__slides__slide {
  flex-shrink: 0;
  width: 100vw;
}

/* below-the-fold arrow positioning + cursor (live has these as button defaults
 * but our markup lacks the bootstrap classes) */
.industry-awards__navigation__btn,
.carousel-panel__navigation__btn {
  cursor: pointer;
  background: #fff;
  transition: opacity 150ms ease, transform 150ms ease;
}
.industry-awards__navigation__btn:disabled {
  cursor: not-allowed;
  opacity: 0.4;
}
.industry-awards__navigation__btn:hover:not(:disabled),
.carousel-panel__navigation__btn:hover {
  transform: scale(1.05);
}
.industry-awards .carousel__viewport { overflow: hidden; }
.industry-awards .carousel__track { transition: transform 350ms ease-out; }

/* testimonial arrows: live places them centered below the card, ~16px gap. */
#why-we-work-here .carousel-panel__navigation {
  margin-top: 24px;
}

/* Greenhouse iframe — let it fill the open-positions container width */
.open-positions__content,
.greenhouse-widget,
#grnhse_app {
  width: 100%;
  min-height: 500px;
}
#grnhse_app iframe {
  width: 100%;
  border: 0;
  display: block;
}

/* === Vest modal shell (retirement-solutions role-modal + hubspot CTA modal) === */
.vest-modal {
  position: fixed;
  inset: 0;
  z-index: 9998;
  display: none;
  align-items: center;
  justify-content: center;
}
.vest-modal[hidden] { display: none !important; }
.vest-modal.is-open {
  display: flex;
}
.vest-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  cursor: pointer;
}
.vest-modal__container {
  position: relative;
  z-index: 1;
  max-width: calc(100vw - 32px);
  max-height: calc(100vh - 32px);
  overflow: auto;
  background: #fff;
  border-radius: 0;
}
.vest-modal__close {
  position: absolute;
  top: 8px;
  right: 12px;
  background: transparent;
  border: 0;
  color: #003140;
  cursor: pointer;
  font-size: 28px;
  font-weight: 400;
  line-height: 1;
  padding: 4px 8px;
  z-index: 2;
}
.vest-modal__close:hover { color: #007fa6; }
.vest-hubspot-modal__container {
  width: 540px;
  max-width: calc(100vw - 32px);
  padding: 40px 32px 32px;
}
.vest-hubspot-modal__title {
  font-family: 'DM Sans', sans-serif;
  font-size: 24px;
  font-weight: 700;
  color: #003140;
  margin: 0 0 24px;
  line-height: 1.2;
  padding-right: 24px;
}
.vest-hubspot-modal__form { min-height: 320px; }
html.vest-modal-open { overflow: hidden; }

/* Override the static inline overlay box — proper modal positioning takes over. */
.vest-modal .retirement-solutions-header__role-modal,
.vest-modal.retirement-solutions-role-modal .retirement-solutions-header__role-modal {
  position: relative !important;
  left: auto !important;
  top: auto !important;
  transform: none !important;
}

/* Make the choose-your-investment tabs visibly clickable. */
.choose-your-investment .tabs .tab {
  user-select: none;
}
.choose-your-investment .tabs .tab[aria-selected="true"] {
  background: #ffa523 !important;
  font-weight: 700 !important;
}
.choose-your-investment .tabs .tab[aria-selected="false"] {
  background: #f5f5f5 !important;
  font-weight: 500 !important;
}

/* choose-your-investment video modals*/

.choose-your-investment .resource-item__image::before,
.fund-summery .resource-item__image::before {
		display: none;
	}

.choose-your-investment .resource-item__image--video {
	height: 300px !important;
}
.choose-your-investment .resource-item__body {
	display: none;
}
@media (max-width: 767px){
	.choose-your-investment .resource-item__image--video {
		height: 240px !important;
	}
}
/*
 * Stories-pages chrome simplification (2026-05-12).
 *
 * Story pages (stories-vest-financial, karan-sood, jeff-chang,
 * box-spreads-in-practice, box-spreads-5-things) render the MAIN vestfin
 * navbar + footer so the chrome looks consistent with the main site, but
 * the client wants the top-level items kept flat — no dropdown mega-panels
 * and no footer sub-link columns. We scope via `body.is-stories-chrome`,
 * added by the body_class filter in inc/patterns.php.
 *
 * Non-story pages are untouched.
 */

/* Desktop nav: hide the mega-panel container and its per-item panels so
   hover/click on a top-level item does nothing. Also kill the chevron-like
   pointer affordance on triggers. */
body.is-stories-chrome .navbar__options-wrapper,
body.is-stories-chrome [data-nav-panel],
body.is-stories-chrome [data-nav-panel-for] {
  display: none !important;
}
body.is-stories-chrome [data-nav-trigger] {
  cursor: default;
  pointer-events: none;
}
body.is-stories-chrome [data-nav-trigger] > span {
  pointer-events: auto;
}

/* Mobile nav: collapse the accordion expansion. The hamburger drawer still
   opens; each top-level row stays as a flat label with no sub-panel. */
body.is-stories-chrome [data-mobile-acc-panel] {
  display: none;
}
body.is-stories-chrome [data-mobile-acc-toggle] {
  pointer-events: none;
}
body.is-stories-chrome [data-mobile-acc-toggle] [data-mobile-acc-icon] {
  display: none;
}

/* Footer: hide the 4 sub-link columns (Strategies / Products / Tools /
   Company). Keep the brand/address logo-block + the adviser-footer with
   the legal copy. */
body.is-stories-chrome .subfooter .footer-nav {
  display: none;
}

/* === BUFFER-CAPS MOBILE CAROUSEL — neutralize resources-slider bleed ===
 * The cap-level carousel slides (rendered by the Vue widget on /buffer-caps/)
 * also carry the `.resources-slider__carousel__slide` class. That class is
 * styled in base-responsive.css and overrides.css to be 85vw / min-width:280px,
 * which is correct for the *resources slider* (where slides intentionally
 * exceed the viewport so the next card peeks in). On buffer-caps the slide
 * sits inside a card-shaped container (`.cap-level__mobile`) that has
 * `overflow-x: hidden` — so the 85vw/280px slide gets clipped on small
 * viewports (≤414px), cropping "Reference Asset: SPY" to "SF" and
 * "Buffer % -2.5% to -15%" to "-15".
 *
 * Fix: scope to `.cap-level__carousel` and constrain slide width to the
 * mobile container's inner content area:
 *   100vw - 40px (container padding 20+20)
 *         - 48px (cap-level__mobile padding 24+24)
 *         -  2px (cap-level__mobile border 1+1)
 *   = 100vw - 90px
 * This matches the carousel__viewport's clientWidth exactly so the slide
 * never overflows. min-width:0 prevents the resources-slider 280px floor
 * from re-introducing the clip on the narrowest devices. Capped at 100%
 * so wider viewports (where mobile container itself is narrower) don't
 * push the slide past its parent.
 */
.cap-level__carousel .carousel__slide,
.cap-level__carousel .carousel__slide.resources-slider__carousel__slide {
  width: calc(100vw - 90px) !important;
  max-width: 100% !important;
  min-width: 0 !important;
}

/* === H1 TYPOGRAPHY ENFORCEMENT (non-story / non-blog pages) ===
 * Per design spec May 13 2026: all H1s on standard pages (Page post type,
 * e.g. /target-growth-strategy/, /buffer-strategy/) must lock to the
 * canonical scale below. Story chrome (body.is-stories-chrome) and blog/
 * long-form singulars (body.single-post, body.single-field_note) keep
 * their existing Kadence / post-body typography and are explicitly excluded.
 * Breakpoints match the rest of overrides.css: mobile <=767, tablet 768-1023,
 * desktop >=1024.
 *
 * Specificity note: the live H1 markup carries utility classes like
 * `.text-h1`, `.text-display`, `.text-3xl`, `.leading-tight`, etc. — many
 * generated by the Tailwind CDN runtime and injected into <head> AFTER our
 * stylesheets, so equal-specificity selectors lose source-order races. We
 * boost specificity to (0,3,2) by chaining `html body.box-border` (every
 * page body has `box-border`) and explicitly targeting the utility classes
 * on the h1, plus `!important` on every property. This still loses to true
 * inline styles, which the strategy/page partials don't use.
 */
@media (min-width: 1024px) {
  html body.box-border:not(.is-stories-chrome):not(.single-post):not(.single-field_note) h1:not(:is(.syntheticborrow-hero__title, .retirement-sol-title, .page-hero__title)),
html body.box-border:not(.is-stories-chrome):not(.single-post):not(.single-field_note) h1.text-h1:not(.page-hero__title),
html body.box-border:not(.is-stories-chrome):not(.single-post):not(.single-field_note) h1.text-display:not(.page-hero__title) {
  font-size: 60px !important;
  line-height: 72px !important;
  font-weight: 700 !important;
}
	.strategy-header.strategy-header--buffer-strategy .buffer-header__title {
		font-family: DM Sans;
		font-size: 60px !important;
		font-weight: 700 !important;
		letter-spacing: -.02em;
		line-height: 1.2 !important;
		margin: 0 0 46px;
	}
}
@media (min-width: 768px) and (max-width: 1023px) {
  html body.box-border:not(.is-stories-chrome):not(.single-post):not(.single-field_note) h1:not(.page-hero__title),
  html body.box-border:not(.is-stories-chrome):not(.single-post):not(.single-field_note) h1.text-h1,
  html body.box-border:not(.is-stories-chrome):not(.single-post):not(.single-field_note) h1.text-display{
    font-size: 56px !important;
    line-height: 64px !important;
    font-weight: 700 !important;
  }
}
@media (max-width: 767px) {
  /* QA pass (May 16 2026): unify mobile h1 to 48px / 56px LH */
  html body.box-border:not(.is-stories-chrome):not(.single-post):not(.single-field_note) h1:not(.retirement-sol-title):not(.contact-title),
  html body.box-border:not(.is-stories-chrome):not(.single-post):not(.single-field_note) h1.text-h1,
  html body.box-border:not(.is-stories-chrome):not(.single-post):not(.single-field_note) h1.text-display {
    font-size: 48px !important;
    line-height: 56px !important;
    font-weight: 700 !important;
  }
}

/* === PER-PAGE BLUE HERO PADDING (May 13 2026) ===
 *
 * Replaces the prior unified `padding: 200px 0` rule, which clobbered
 * baked-in tailwind classes on every blue hero. Each value below is
 * pulled directly from live (www.vestfin.com), audited at desktop (1440)
 * and mobile (375) on May 13. Audit artifact:
 *   qa/audits/hero-padding-audit-1778715566-both.json
 *
 * Note: most of the hero variants emit tailwind classes that already
 * match live (e.g. `py-16 md:py-36` for the marketing-compact shells).
 * Only the divergences are corrected here. Out of scope:
 *   - careers / copyright / synthetic-borrow heroes (purpose-built)
 *   - buffer-caps / buffer-intraperiod / buffer-scenario tool wrappers
 *     (live's `.buffer-spy / .forward-pricing / .blending-tool` sections
 *      are full-bleed dark surfaces with their own internal padding;
 *      they are not "page heroes" in the chrome sense)
 *
 * Page IDs (from wp post list on WPE, May 13):
 *   60 homepage, 12 about-us, 54 contact-us, 63 mutual-funds,
 *   61 insights-research, 65 target-growth-strategy, 52 buffer-strategy,
 *   66 target-income-strategy, 64 retirement-solutions.
 */

/* Homepage hero — live uses 120px 0 at BOTH desktop and mobile.
 * Baked classes give us pt-16/pb-16 on mobile (64px), so we lift mobile
 * to 120px 0 to match live. Desktop baked = md:pt-[120px] md:pb-[120px],
 * already correct. */
@media (max-width: 767px) {
  html body.page-id-60 .vestfin-homepage-hero {
    padding: 120px 0 !important;
    min-height: 0;
  }
}

/* Target-growth-strategy mobile — live: padding 64px 20px, min-h: 0.
 * The site-wide `main.page-content:has(#page-menu-section) .page-hero`
 * mobile rule (line ~448) forces min-height: 690px and zeroes padding,
 * but live doesn't lock height like that. Restore the live rhythm,
 * scoped to this page only. */
@media (max-width: 767px) {
  html body.page-id-65 main.page-content:has(#page-menu-section) .page-hero,
  html body.page-id-65 main.page-content:has(#page-menu-section) .page-hero__container {
    min-height: 0 !important;
    padding-top: 64px !important;
    padding-bottom: 64px !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
}

/* The page-hero.php partial's inline <style> tags force mobile padding to
 * 48px on the dark/compact variants. Live uses 64px. Lift to match. */
@media (max-width: 767px) {
  html body .page-hero--dark-live,
  html body .page-hero--marketing-compact,
  html body .page-hero--marketing-compact-short {
    padding-top: 64px !important;
    padding-bottom: 64px !important;
  }
}

/* Retirement-solutions mobile — partial forces 72px (line 408 in this
 * file's strategy-rhythm block). Live uses 64px. Scope to page 64. */
@media (max-width: 767px) {
  html body.page-id-64 main.page-content:has(#page-menu-section) .buffer-header {
    padding-top: 64px !important;
    padding-bottom: 64px !important;
  }
}

/* Target-income-strategy mobile — partial sets pt:30 inner pt:120 pb:64.
 * Live uses outer 4px 0 64px / inner pt:32 pb:0. Bring closer to live. */
@media (max-width: 767px) {
  html body.page-id-66 .target-income-header__content {
    padding-top: 32px;
    padding-bottom: 0;
  }
}

/* === HEADING LETTER-SPACING UNIFICATION (May 13 2026) ===
 *
 * Live audit (www.vestfin.com) at 1440 desktop, May 13 2026:
 *
 *   Page                 | Selector                          | LS computed | LS in em
 *   homepage             | .page-hero__title                 | normal      | 0
 *   homepage             | .vertical-tabs__main-title (h1)   | normal      | 0
 *   homepage             | .usp__title                       | normal      | 0
 *   target-income        | .target-income-header__title      | -1.2px @60  | -0.02em
 *   target-income        | .target-income-sub-header__title  | -0.8px @40  | -0.02em
 *   target-income        | .section-title                    | normal      | 0
 *   target-growth        | .page-hero__title                 | normal      | 0
 *   buffer-strategy      | .buffer-header__title             | -1.2px @60  | -0.02em
 *
 * Live is itself inconsistent — only target-income and buffer-strategy headers
 * carry tight tracking; the homepage and target-growth heroes are `normal`.
 * The WPE clone went further and baked `tracking-tighter` (= -0.05em) into the
 * target-income hero, producing -3.4px @ 68px — visibly tighter than live and
 * tighter than every other hero on the site.
 *
 * Per user directive May 13 2026: make headings UNIFORM across the site. We
 * canonicalize on live's `target-income` pattern (the tighter of the two
 * extant patterns on live), applied to all hero H1s and the homepage tagline
 * H2. Result: every hero on every non-story / non-blog page carries the same
 * -0.02em tracking, and the homepage tagline matches. In-content H2/H3 stays
 * `normal` to preserve live's pattern.
 *
 * Scope: matches the H1 typography enforcement rule above —
 *   body.box-border:not(.is-stories-chrome):not(.single-post):not(.single-field_note)
 * Story chrome and blog/field-note singles keep their existing typography.
 *
 * Specificity: same (0,3,2)+ pattern as the H1 size rule. `!important` is
 * required because the partials inline `tracking-tighter` / `tracking-[-0.8px]`
 * Tailwind utilities on the H1/H2 itself, and the Tailwind CDN runtime injects
 * those classes into <head> after our stylesheet loads.
 *
 * Em-based values keep the spacing visually proportional at every breakpoint
 * as the H1/H2 font-size scales (68→56→42 / 40→32→24).
 */

/* Sub-hero H2 — target-income sub-header and homepage tagline (H1-styled H2) */
html body.box-border:not(.is-stories-chrome):not(.single-post):not(.single-field_note) .target-income-sub-header__title,
html body.box-border:not(.is-stories-chrome):not(.single-post):not(.single-field_note) .vertical-tabs__main-title {
  letter-spacing: -0.02em !important;
}

/* In-content H2/H3 — restore to `normal` to match live and override any
 * baked `tracking-tighter` (-0.05em) utilities the Tailwind CDN may emit
 * on these classes. Keeps homepage `.usp__title`, `.section-title`,
 * `.vertical-tabs__content-title`, `.feature-list__title`, `.list-title`
 * consistent with live. */
html body.box-border:not(.is-stories-chrome):not(.single-post):not(.single-field_note) .usp__title,
html body.box-border:not(.is-stories-chrome):not(.single-post):not(.single-field_note) .section-title,
html body.box-border:not(.is-stories-chrome):not(.single-post):not(.single-field_note) .vertical-tabs__content-title,
html body.box-border:not(.is-stories-chrome):not(.single-post):not(.single-field_note) .feature-list__title,
html body.box-border:not(.is-stories-chrome):not(.single-post):not(.single-field_note) .list-title {
  letter-spacing: normal !important;
}

/* === LINK UNDERLINE NORMALIZATION (match live www.vestfin.com) ===
 * Background: live's Nuxt CSS scopes rules with `[data-v-<hash>]`, e.g.
 *   .app-button[data-v-ae572c6f] { text-decoration: none }
 * Our static HTML doesn't carry the data-v attrs, so those scoped rules
 * never match and `a { text-decoration: underline }` (UA + Tailwind preflight
 * + several Nuxt bundles) wins. Result: buttons and footer chrome render with
 * spurious underlines that live does NOT show.
 *
 * Strategy: re-state live's "no underline" intent against the unscoped class
 * names. We use `a.<class>` (specificity 0,1,1) so we beat the bare `a`
 * selector (0,0,1) emitted by Nuxt bundles, but we stay below `!important`
 * so a downstream override can still re-enable an underline if needed.
 *
 * Compliance links (.warn-2 in the footer, .logo-block__contact-email,
 * scenario-analyzer's CSV download) keep their underlines because live keeps
 * them — they fall through this block intentionally.
 *
 * Targets (all confirmed against live on 2026-05-13):
 *   .app-button (all variants)        — no
 *   .cta__button                      — no
 *   .footer-nav .item / .submenu a    — no
 *   .logo-block__brand-logo           — no
 *   .logo-block__contact-number       — no
 *   navbar/mobile-navbar logo wrapper — no
 */
a.app-button,
a.cta__button,
.footer-nav a.item,
.footer-nav a.submenu,
.adviser-footer .submenu a,
.footer-nav .submenu a,
a.logo-block__brand-logo,
a.logo-block__contact-number,
.navbar__wrapper__container__left-block__logo > a,
.mobile-navbar__top-bar__logo > a {
  text-decoration: none;
}

/* Tailwind's `.no-underline` utility (CDN) emits only
 * `text-decoration-line: none`, leaving thickness/color from earlier `a`
 * rules. That produces a 1px transparent underline — invisible on most
 * backgrounds but it can still rasterize as a sub-pixel hairline on hi-DPI.
 * Force the full shorthand off so .no-underline matches author intent. */
a.no-underline {
  text-decoration: none;
}

/* === SMOOTH SCROLL (May 13 2026) ===
 * Synthetic-borrow has in-page anchors (#benefits, #compare-rates,
 * #how-it-works, #faq) plus Start Now CTAs. Without this rule, clicking
 * the in-page menu jump-cuts. Site-wide because smooth in-page scrolling
 * is a sensible default for the rest of the marketing surface too.
 *
 * Wrapped in `prefers-reduced-motion: no-preference` so users who have
 * motion disabled at the OS level keep the instant jump (accessibility).
 *
 * scroll-margin-top on anchor targets keeps the destination clear of the
 * sticky nav on the synthetic-borrow page (where the in-page menu sits
 * at the top of the viewport). 96px ≈ nav height + a little breathing
 * room. Scoped to `[id]` inside main so we do not nudge unrelated
 * fragments (e.g. footer landmarks).
 */
@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}
main [id] {
  scroll-margin-top: 96px;
}


/* === TARGET FINANCING CARDS (homepage strategy tab #4) ===
 * Replicates live's Nuxt-scoped .tf__* rules without the [data-v-d5cba656]
 * attribute scope so the ACF wysiwyg body can render the same grid of
 * feature cards inside the vertical-tabs Target Financing panel. Source
 * spec mirrors live's index.Czjys1ZR.css tf-cards block.
 */
.tf__grid {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(6, 1fr);
}
.tf__item {
  align-items: flex-start;
  background: #f4f4ef;
  display: flex;
  flex-direction: column;
  padding: 24px;
  text-align: left;
}
.tf__item-media {
  height: 32px;
  margin-bottom: 12px;
}
.tf__item-media img {
  height: 32px;
  width: 32px;
}
.tf__item-title {
  font-size: 16px;
  font-weight: 700;
  line-height: 24px;
  margin: 0;
}
.tf__item-desc {
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  margin: 8px 0 0;
}

/* === REDIRECT MODAL PROCEED HOVER (CSS-cleanup Tier 1, 2026-05-19) ===
 * Replaces the inline `onmouseover` / `onmouseout` JS handlers that were
 * previously on the `#redirect-modal-proceed` <a> in subfooter.php.
 * `!important` is required because the element still carries an inline
 * `style="background:#ffa523; text-decoration:none;"` declaration; inline
 * styles outrank everything except !important. Tier 3 will extract the
 * remaining inline styles into proper modal classes, at which point this
 * !important can be removed.
 */
#redirect-modal-proceed:hover {
  background: #FF9A00 !important;
  text-decoration: underline !important;
}

/* === FAQ-ACCORDION FULL-WIDTH (CSS-cleanup Tier 2 T2.1, 2026-05-19) ===
 * Replaces `style="width:100%;max-width:none;margin-left:0;margin-right:0;"`
 * previously on `<section id="faq">` in faq-accordion.php (syntheticborrow
 * variant). The inline style was needed to override the `mx-auto` Tailwind
 * utility on the same element. Using `#faq.faq-full-width` for specificity
 * (0,1,1,0) > `.mx-auto` (0,0,1,0) regardless of source order.
 */
#faq.faq-full-width {
  width: 100%;
  max-width: none;
  margin-left: 0;
  margin-right: 0;
}

/* === MILESTONES-TIMELINE DIVIDER FLIP (CSS-cleanup Tier 2 T2.2, 2026-05-19) ===
 * Replaces `style="transform:scaley(-1);"` on the SVG divider image in
 * milestones-timeline.php. No other rule sets transform on this element.
 */
.milestones-timeline__divider-flipped {
  transform: scaleY(-1);
}

/* === CTA IMAGE-DIVIDER MOBILE (CSS-cleanup Tier 2 T2.3, 2026-05-19) ===
 * Verbatim relocation of the inline <style> block previously at
 * cta.php:65-72 (default CTA variant). Selector and !important preserved
 * exactly so cascade behavior is unchanged.
 */
@media (max-width: 767px) {
  .cta .image-divider img {
    height: 94px !important;
    object-fit: cover !important;
  }
}

/* === HOMEPAGE USP MOBILE (CSS-cleanup Tier 2 T2.4, 2026-05-19) ===
 * Verbatim relocation of the inline <style> block previously at
 * feature-list.php:58-72 (homepage-usp variant). Selectors and !important
 * preserved exactly so cascade behavior is unchanged.
 */
@media (max-width: 768px) {
  #built-for-outcome .usp__item-title {
    font-size: 18px !important;
    margin-bottom: .5rem !important;
  }
  #built-for-outcome .usp__item-desc {
    font-size: 14px !important;
  }
  #built-for-outcome .usp__item {
    padding: 1.5rem !important;
  }
}

/* === HOTFIX: BUFFER-STRATEGY ADDITIONAL-RESOURCES MOBILE SLIDER (2026-05-19) ===
 * The legacy rule at overrides.css:796-799 hides every additional-resources
 * card except the first when `.strategy-mobile-open` is on an ancestor and
 * viewport < 768px. That rule was designed for the OLD grid markup where a
 * mobile accordion toggled card visibility.
 *
 * The buffer-strategy page uses the NEW `.ar-slider` markup (added inside
 * additional-resources.php when `$use_slider = $slug === 'buffer-strategy'`)
 * which expects all cards to be visible in a horizontally-scrollable track.
 * The legacy hide rule was masking cards 2-N inside the new slider, making
 * the swipe/arrow nav appear broken.
 *
 * This counter-override re-shows the cards specifically inside `.ar-slider__track`.
 * Specificity (0,1,4,1) > original (0,1,3,1), so it wins without source-order
 * sensitivity. When the strategy-page mobile block (overrides.css:600-811) is
 * later refactored into its own stylesheet, this rule can be removed by
 * scoping the original hide rule to non-slider markup.
 */
@media (max-width: 767px) {
  main.page-content:has(#page-menu-section) .strategy-mobile-open .ar-slider__track .additional-resources__card:nth-of-type(n+2) {
    display: block !important;
  }
}

/* === AR-SLIDER PREV/NEXT DISABLED STATE (2026-05-19) ===
 * The ar-slider JS in additional-resources.php sets `prev.disabled = true`
 * when scrollLeft is 0 (start of track) and `next.disabled = true` when the
 * track is scrolled to its end. The inline <style> block in that file
 * already has `:disabled { opacity: 0.25; cursor: default; }` but the visual
 * feedback was too subtle on the arrow images.
 *
 * This block strengthens the disabled state:
 *   - Lower opacity (0.3) for clearer differentiation from active state.
 *   - `cursor: not-allowed` so the cursor reinforces the disabled affordance.
 *   - `pointer-events: none` to prevent any accidental click handling on
 *     touch devices where the disabled attribute alone isn't always honored.
 *   - Grayscale + reduced opacity on the inner arrow <img> so the icon
 *     itself reads as inactive, not just dim.
 *
 * Selector uses #additional-resources for specificity (0,1,2,1) to outrank
 * the inline block's plain (0,1,1,1) rule regardless of source order.
 */
#additional-resources .ar-slider__btn:disabled,
#additional-resources .ar-slider__btn[disabled] {
  opacity: 0.3 !important;
  cursor: not-allowed !important;
  pointer-events: none;
}
#additional-resources .ar-slider__btn:disabled img,
#additional-resources .ar-slider__btn[disabled] img {
  filter: grayscale(100%);
  opacity: 0.7;
}

/* === T3.1 — CONTACT-FORM-WRAPPER HUBSPOT FONT CASCADE (Tier 3, 2026-05-19) ===
 * Verbatim relocation of the 1-rule inline <style> block previously at
 * contact-form-wrapper.php:238-241. Matches live's font cascade inside the
 * HubSpot iframe form.
 */
.hs-form, .hs-form * { font-family: "DM Sans", system-ui, sans-serif !important; }

/* === T3.2 — KARAN STORY: HIDE FIRST 4 CONTENT-SECTION PARAGRAPHS (Tier 3, 2026-05-19) ===
 * Verbatim relocation of the inline <style> block previously at
 * executive-quick-facts.php:97-101 (only rendered when $is_karan === true).
 * The selector requires `.executive-quick-facts--karan` to exist on the page,
 * so site-wide loading is harmless on non-karan pages.
 */
.executive-quick-facts--karan ~ .content-section .prose > p:nth-of-type(-n+4) {
  display: none !important;
}

/* === T3.3 + HOTFIX — FUND-DISCLAIMER LEFT-ALIGN (Tier 3 + 2026-05-19 hotfix) ===
 * Original (T3.3): verbatim relocation of the inline <style> block
 *   previously at fund-disclaimer.php:31-42 (retirement-solutions variant).
 *
 * Hotfix (same day): broadened to cover ALL fund-disclaimer variants. The
 *   ACF wysiwyg body field on multiple strategy pages contains markup like
 *   `<div class="_grid ... text-justify [text-align-last:justify]">` (Tailwind
 *   arbitrary value utilities), which makes the disclaimer text render with
 *   justified spacing — words spread across the container width including on
 *   the last line, producing weird wide gaps like "illiquid  secondary  market."
 *
 *   The retirement-solutions-only scope was masking the same problem on the
 *   default and inline-with-funds variants. Broadening to `.fund-disclaimer`
 *   covers all 3 variants without risk: every page that uses fund-disclaimer
 *   wants disclaimer body text left-aligned.
 *
 * The zero-margin rule on `._grid` is kept scoped to retirement-solutions
 * since that variant uses a different container layout than the others.
 */
.fund-disclaimer ._grid,
.fund-disclaimer ._grid *,
.fund-disclaimer p {
  text-align: left !important;
  text-align-last: left !important;
}
.retirement-solutions-disclaimer ._grid {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* === T3.4 — EXECUTIVE-QUICK-FACTS STORIES VARIANT CONTAINER PADDING (Tier 3, 2026-05-19) ===
 * Verbatim relocation of the inline <style> block previously at
 * executive-quick-facts.php:42-53 (only rendered when $is_story_facts === true).
 * The selector requires `.executive-quick-facts--stories` to exist on the page.
 */
.executive-quick-facts--stories > ._container {
  padding-left: 32px !important;
  padding-right: 32px !important;
}
@media (max-width: 767px) {
  .executive-quick-facts--stories > ._container {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }
}

/* === T3.5 — FAQ-ACCORDION STORIES VARIANT CONTAINER + HEADING BREAK (Tier 3, 2026-05-19) ===
 * Verbatim relocation of the inline <style> block previously at
 * faq-accordion.php:114-131 (rendered when $variant === 'default' && $is_story_faq).
 * The selector requires `.faq-accordion--stories` to exist on the page.
 */
.faq-accordion--stories > ._container {
  padding-left: 32px !important;
  padding-right: 32px !important;
}
.faq-accordion--stories .faq-accordion__heading-break {
  display: block;
}
@media (max-width: 767px) {
  .faq-accordion--stories > ._container {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }
  .faq-accordion--stories .faq-accordion__heading-break {
    display: none;
  }
}

/* === T3.6 — HOW-TO-INVEST BUFFER-STRATEGY GRID + CHECKMARKS (Tier 3, 2026-05-19) ===
 * Verbatim relocation of the inline <style> block previously at
 * how-to-invest.php:126-189 (only rendered when slug === 'buffer-strategy').
 * Selectors scoped to #how-to-invest — unique per page emission.
 */
#how-to-invest .our-products__list {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 40px 56px;
  justify-content: center;
}
#how-to-invest .our-products__item {
  align-items: center;
  flex-basis: auto !important;
  min-height: 260px;
  padding: 32px 48px;
  width: 100%;
}
#how-to-invest .our-products__item:nth-child(4) {
  grid-column: auto;
  margin: 0;
}
#how-to-invest .our-products__item-name {
  font-size: 30px;
  line-height: 38px;
}
#how-to-invest .products-description {
  font-size: 18px;
  line-height: 26px;
}
@media (min-width: 1201px) {
	#how-to-invest .our-products__item .orange-btn {
		margin-top: 32px;
		width: 240px;
	}
}

#how-to-invest .checkmark-list li {
  display: table;
  list-style: none;
}
#how-to-invest .checkmark-list li::before {
  content: '✓';
  display: table-cell;
  padding-right: 8px;
  color: #003140;
  font-weight: 700;
}
@media (max-width: 899px) {
  #how-to-invest .our-products__list {
    grid-template-columns: 1fr !important;
    max-width: 100%;
    gap: 24px;
  }
  #how-to-invest .our-products__item__buttons-wrapper__buttons {
    flex-direction: column !important;
    align-items: stretch !important;
  }
  #how-to-invest .our-products__item .orange-btn {
    width: 100% !important;
    text-align: center;
  }
  #how-to-invest .our-products__item__buttons-wrapper__buttons__left,
  #how-to-invest .our-products__item__buttons-wrapper__buttons__right {
    width: 100% !important;
  }
	#how-to-invest .our-products__item__buttons-wrapper__buttons {
		row-gap: 1rem;
	}
	
	#how-to-invest .our-products__item__buttons-wrapper {
		margin-top: 1.5rem;
	}
	
  #how-to-invest .our-products__item__buttons-wrapper__buttons__right .orange-btn {
    margin-top: 0px;
  }
	
	#how-to-invest .section-title,
	#how-it-works .section-title,
	#why-invest .section-title,
	#where-it-fits .section-title,
	#tools-section .section-title,
	#additional-resources .section-title {
		padding-bottom: 8px;
	}
}
/* Restore the horizontal gutter between the Retirement Funds buttons
   (View Mutual Funds / VIEW CITS) on desktop so they aren't flush against
   each other — mirrors live vestfin.com's 15px Bootstrap column padding.
   Scoped to min-width:768px so the mobile stacked layout above is untouched. */
@media (min-width: 1200px) {
  #how-to-invest .our-products__item__buttons-wrapper__buttons__left {
    padding-right: 15px;
  }
  #how-to-invest .our-products__item__buttons-wrapper__buttons__right {
    padding-left: 15px;
  }
}

.tf__item--rect { grid-column: span 3; }
.tf__item--square { grid-column: span 2; }

/* Win against the inline `<style>` in vertical-tabs-strategies.php which sets
 * .vertical-tabs__description p { font-size: 18px !important; line-height: 26px !important }.
 * The wysiwyg renders the .tf__* grid INSIDE that wrapper, so the desc <p>s
 * inherit the 18/26 from the wrap. Re-assert tf desc + title at higher
 * specificity with the same !important weapon.
 */
.vestfin-homepage-tabs .vertical-tabs__description .tf__item-title,
.vestfin-homepage-tabs .vertical-tabs-mobile-panel__detail .tf__item-title {
  font-size: 16px !important;
  line-height: 24px !important;
  font-weight: 700 !important;
  margin: 0 !important;
}
.vestfin-homepage-tabs .vertical-tabs__description .tf__item-desc,
.vestfin-homepage-tabs .vertical-tabs-mobile-panel__detail .tf__item-desc {
  font-size: 16px !important;
  line-height: 24px !important;
  font-weight: 400 !important;
  margin: 8px 0 0 !important;
}

@media (max-width: 767px) {
  .tf__grid {
    gap: 8px;
    grid-template-columns: repeat(2, 1fr);
  }
  .tf__item { padding: 12px; }
  .tf__item--rect:first-of-type { grid-column: 1 / -1; }
  .tf__item--rect:nth-of-type(2),
  .tf__item:nth-of-type(3),
  .tf__item:nth-of-type(4),
  .tf__item:nth-of-type(5) { grid-column: span 1; }
  .tf__item-media { height: 24px; margin-bottom: 10px; }
  .tf__item-media img { height: 24px; width: 24px; }
  .tf__item-title { font-size: 14px; line-height: 20px; }
  .tf__item-desc {
    font-size: 12px;
    line-height: 16px;
    margin-top: 6px;
  }
  .vestfin-homepage-tabs .vertical-tabs__description .tf__item-title,
  .vestfin-homepage-tabs .vertical-tabs-mobile-panel__detail .tf__item-title {
    font-size: 14px !important;
    line-height: 20px !important;
  }
  .vestfin-homepage-tabs .vertical-tabs__description .tf__item-desc,
  .vestfin-homepage-tabs .vertical-tabs-mobile-panel__detail .tf__item-desc {
    font-size: 12px !important;
    line-height: 16px !important;
    margin: 6px 0 0 !important;
  }
}
/* === END TARGET FINANCING CARDS === */

/* === T4.5 — BLOG POST TYPOGRAPHY (Tier 4, 2026-05-19) ===
 * Verbatim relocation of the inline <style> block previously at
 * cpt/post-page.php:164-248. Selectors all scoped to `.blog-post` ancestor
 * so site-wide loading is harmless on non-blog pages.
 *
 * Includes QA fix 2026-05-17 (remove text-align: justify on body
 * paragraphs — caused river/spacing artifacts) and finding #11 (clamp post-title
 * on mobile, was 15-25% larger than live).
 */
.blog-post .post-body-content img {
  height: auto !important;
  max-width: 100% !important;
}
.blog-post .post-body-content,
.blog-post .post-body-content p,
.blog-post .post-body-content li,
.blog-post .post-body-content--fn,
.blog-post .post-body-content--fn p,
.blog-post .post-body-content--fn li {
  text-align: left !important;
}
.blog-post:not(.blog-post--field-note) .post-title {
  font-size: 56px !important;
  line-height: 68px !important;
}
.blog-post:not(.blog-post--field-note) .post-subtitle {
  font-size: 24px !important;
  line-height: 30px !important;
}
.recommended-articles__title {
  font-size: 40px !important;
  line-height: 52px !important;
}
.blog-post .post-body-content h1,
.blog-post .post-body-content h3 {
  color: #1b3147;
  font-size: 23.4px;
  font-weight: 700;
  line-height: 42.12px;
  margin-bottom: 23.4px;
  margin-top: 23.4px;
}
@media only screen and (max-width: 767px) {
  .recommended-articles__title {
    font-size: 30px !important;
    line-height: 44px !important;
  }
  .blog-post:not(.blog-post--field-note) .post-title {
    font-size: clamp(28px, 6vw, 36px) !important;
    line-height: 1.18 !important;
  }
  .blog-post:not(.blog-post--field-note) .post-subtitle {
    font-size: 20px !important;
    line-height: 26px !important;
  }
  .blog-post .post-page {
    padding-top: 32px !important;
  }
  .blog-post .post-body-content,
  .blog-post .post-body-content p,
  .blog-post .post-body-content li {
    font-size: 18px !important;
    line-height: 30.6px !important;
  }
  .blog-post .post-body-content p {
    margin-bottom: 16px !important;
    margin-top: 16px !important;
  }
  .blog-post .post-body-content h1,
  .blog-post .post-body-content h3 {
    font-size: 18.72px !important;
    line-height: 33.7px !important;
    margin-bottom: 18px !important;
    margin-top: 18px !important;
  }
  .blog-post .post-body-content img {
    display: block;
    height: auto !important;
    max-width: 100% !important;
  }
}
@media only screen and (min-width: 600px) and (max-width: 899px) {
  .blog-post:not(.blog-post--field-note) + .recommended-articles .recommended-articles__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}


/* === T4.2 — FIELD-NOTE TYPOGRAPHY (Tier 4, 2026-05-19) ===
 * Verbatim relocation of the inline <style> block previously at
 * cpt/post-page.php:250-297 (only rendered when $is_field_note === true).
 * Selectors all scoped to `.post-body-content--fn` or `.blog-post--field-note`
 * so site-wide loading is harmless on non-field-note pages.
 *
 * Comment from original block: "Field-note typography override: live Nuxt
 * renders FN body tighter than blog_post. Without this, fn-great-derivatization
 * rendered 24138px vs live 20267px (composite 57%)."
 */
.post-body-content--fn { font-size: 20px; line-height: 1.4; color: #003242; font-family: 'DM Sans', sans-serif; }
.post-body-content--fn p { margin-top: 20px; margin-bottom: 0; font-size: 20px; line-height: 1.8; overflow-wrap: anywhere; word-break: break-word; }
.post-body-content--fn h2 { font-size: 30px; line-height: 28px; font-weight: 700; margin-top: 40px; margin-bottom: 40px; color: #003242; }
.post-body-content--fn h3 { font-size: 20px; line-height: 1.4; font-weight: 700; margin-top: 20px; margin-bottom: 0; color: #003242; }
.post-body-content--fn h4 { font-size: 18px; font-weight: 700; margin-top: 20px; margin-bottom: 8px; color: #003242; }
.post-body-content--fn img { max-width: 100%; height: auto; display: inline-block; }
.post-body-content--fn ul, .post-body-content--fn ol { margin-top: 12px; margin-bottom: 0; padding-left: 1.5em; }
.post-body-content--fn ul { list-style: disc; }
.post-body-content--fn ol { list-style: decimal; }
.post-body-content--fn li { margin-top: 4px; margin-bottom: 0; line-height: 1.4; }
.post-body-content--fn blockquote { border-left: 4px solid #003140; padding-left: 24px; margin: 24px 0; font-style: italic; color: #003140; }
.post-body-content--fn a { color: #02334d; text-decoration: underline; }
.post-body-content--fn em { font-style: italic; }
.post-body-content--fn strong { font-weight: 700; }
.post-body-content--fn sup { font-size: 16.6667px; line-height: 28px; vertical-align: super; }
.post-body-content--fn figure { margin: 12px 0; }
.post-body-content--fn figcaption { font-size: 14px; opacity: 0.7; margin-top: 8px; font-style: italic; }
.post-body-content--fn table { border-collapse: collapse; border: 1px solid #c6d1d5; width: 100%; margin: 16px 0; }
.post-body-content--fn th, .post-body-content--fn td { border-right: 1px solid #c6d1d5; border-bottom: 1px solid #c6d1d5; padding: 16px 24px; font-size: 16px; line-height: 24px; color: #003242; text-align: left; vertical-align: top; }
.blog-post--field-note .post-title { font-size: 56px !important; line-height: 68px !important; }
.blog-post--field-note .post-subtitle { font-size: 24px !important; line-height: 30px !important; }
.blog-post--field-note .post-page__content { max-width: 900px !important; }
.blog-post--field-note .post-cover-image img { height: 500px; max-height: 500px; object-fit: cover; }
@media only screen and (max-width: 899px) {
  .blog-post--field-note .post-header { padding-top: 48px !important; padding-bottom: 8px !important; }
  .blog-post--field-note .post-title { font-size: 36px !important; line-height: 43.2px !important; }
  .blog-post--field-note .post-subtitle { font-size: 20px !important; line-height: 26px !important; }
  .blog-post--field-note .post-page { padding-top: 40px !important; padding-bottom: 48px !important; }
  .blog-post--field-note .post-page__content { padding-left: 20px !important; padding-right: 20px !important; }
  .blog-post--field-note .post-body-content--fn,
  .blog-post--field-note .post-body-content--fn p { font-size: 20px; line-height: 28px; }
  .blog-post--field-note .post-body-content--fn h2 { line-height: 24px; }
  .blog-post--field-note .post-cover-image img { height: auto; max-height: none; }
}
@media only screen and (min-width: 600px) and (max-width: 899px) {
  .blog-post--field-note + .recommended-articles { padding-top: 40px !important; padding-bottom: 40px !important; }
  .blog-post--field-note + .recommended-articles .recommended-articles__grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media only screen and (max-width: 599px) {
  .blog-post--field-note .post-title { font-size: 32px !important; line-height: 38.4px !important; }
  .blog-post--field-note .post-subtitle { font-size: 18px !important; line-height: 21.6px !important; }
}

/* === T4.3 — VF-VIDEO-MODAL (Tier 4, 2026-05-19) ===
 * Verbatim relocation of the inline <style> block previously at
 * components/video-modal.php:51-128. The modal starts hidden via CSS
 * (display: none) and JS sets aria-hidden="false" to open. CSS-driven
 * visibility means no FOUC concerns with loading from a head <link>.
 */
.vf-video-modal {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.vf-video-modal[aria-hidden="false"] {
  display: flex;
}
.vf-video-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 20, 28, 0.78);
  cursor: pointer;
}
.vf-video-modal__dialog {
  position: relative;
  width: min(100%, 1100px);
  max-width: 1100px;
  background: #000;
  border-radius: 6px;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.5);
}
.vf-video-modal__close {
  position: absolute;
  top: -44px;
  right: 0;
  background: transparent;
  border: 0;
  color: #fff;
  font-size: 40px;
  line-height: 1;
  cursor: pointer;
  padding: 4px 12px;
  z-index: 1;
}
.vf-video-modal__close:hover,
.vf-video-modal__close:focus {
  outline: 0;
  color: #ffae33;
}
.vf-video-modal__frame-wrap {
  position: relative;
  width: 100%;
  padding-top: 56.25%; /* 16:9 */
  overflow: hidden;
  border-radius: 6px;
}
.vf-video-modal__iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.vf-video-modal .sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
body.vf-video-modal-open {
  overflow: hidden;
}
@media (max-width: 640px) {
  .vf-video-modal { padding: 12px; }
  .vf-video-modal__close { top: -38px; font-size: 32px; }
}

/* === T5.1 — TEAM-GRID LEADER CARDS (Tier 5, 2026-05-19) ===
 * Verbatim relocation of the inline <style> block previously at
 * team-grid.php:52-141. All selectors use `.leader-card__*` or `.team-grid__*`
 * BEM namespace — unique to the team-grid pattern. Site-wide loading is
 * harmless on pages that don't render team-grid.
 */
.leader-card__link {
  display: block;
  text-decoration: none;
  outline: none;
}
.leader-card__link:hover .leader-card__content__left__name {
  text-decoration: underline;
}
.leader-card__media {
  position: relative;
  border: 1px solid #c6d1d5;
  overflow: hidden;
  transition: border-width 0.2s ease;
}
.leader-card__bg {
  display: block;
}
.leader-card__img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: top center;
  filter: grayscale(100%);
  transition: filter 0.4s ease;
}
.leader-card__link:hover .leader-card__img {
  filter: grayscale(0%);
}
.leader-card__content {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: stretch;
}
.leader-card__content__left {
  flex: 1;
  min-width: 0;
  padding: 32px 16px 32px 32px;
  background: #fff;
}
.leader-card__content__left__name {
  align-self: flex-start;
  color: #003242;
  font-size: 24px;
  font-weight: 700;
  line-height: 32px;
  margin: 0;
}
.leader-card__content__left__role {
  align-self: flex-start;
  color: #003242;
  font-size: 18px;
  font-weight: 400;
  line-height: 26px;
  margin: 8px 0 0;
}
.leader-card__content__right {
  width: 89px;
  position: relative;
  overflow: hidden;
}
.leader-card--hidden {
  display: none;
}
.team-grid__toggle-wrap {
  display: flex;
  justify-content: center;
  margin-top: 40px;
}
.team-grid__toggle-btn {
  background: none;
  border: 2px solid #003140;
  color: #003140;
  cursor: pointer;
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
  padding: 14px 40px;
  transition: background 0.2s ease, color 0.2s ease;
}
.team-grid__toggle-btn:hover {
  background: #003140;
  color: #fff;
}

/* === T5.2 — OUR-STORY CAROUSEL (Tier 5, 2026-05-19) ===
 * Verbatim relocation of the inline <style> block previously at
 * our-story.php:23-229. All selectors use `.our-story*` BEM namespace —
 * unique to the our-story pattern. Site-wide loading is harmless on pages
 * that don't render the carousel.
 */
.our-story {
  position: relative;
  overflow-x: hidden;
}

.our-story__viewport {
  position: relative;
  width: 100%;
  overflow: visible;
  outline: none;
}

.our-story__track {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  transition: transform 0.4s ease;
  align-items: stretch;
  gap: 24px;
}

.our-story__panel {
  flex: 0 0 100%;
  min-width: 0;
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  align-items: stretch;
  background: #f4f4ef;
  outline: none;
  overflow: hidden;
}

.our-story__panel:focus-visible {
  outline: 2px solid #003140;
  outline-offset: -2px;
}

.our-story__media {
  order: 2;
  align-self: stretch;
  height: 100%;
  min-height: 100%;
}

.our-story__img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 100%;
  object-fit: cover;
  object-position: center;
}

.our-story__content {
  order: 1;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 32px;
  box-sizing: border-box;
}

.our-story__title {
  font-size: 24px;
  line-height: 32px; /* match canonical .text-h3 ratio (22*1.35=29.7 desktop, 20*1.3=26 mobile override below) */
  font-weight: 700;
  color: #003140;
  margin: 0;
}

.our-story__desc {
  color: #003242;
  font-size: 18px;
  line-height: 26px;
}

.our-story__desc p {
  margin: 0 0 1rem 0;
}

.our-story__desc p:last-child {
  margin-bottom: 0;
}

.our-story__footnote {
  font-size: 0.875rem;
  color: #666;
  margin-top: auto;
}

.our-story__footnote p {
  margin: 0;
}

.our-story__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  margin-bottom: 2.5rem;
}

.our-story__header h2 {
  margin-bottom: 0;
}

.our-story__nav-wrap {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 16px;
  flex-shrink: 0;
}

.our-story__nav {
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  opacity: 1;
  transition: opacity 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
}

.our-story__nav img {
  width: 28px;
  height: 28px;
  display: block;
}

.our-story__nav-prev img {
  transform: rotate(90deg);
}

.our-story__nav-next img {
  transform: rotate(-90deg);
}

.our-story__nav:hover:not(:disabled) {
  opacity: 0.7;
}

.our-story__nav:disabled {
  opacity: 0.25;
  cursor: default;
}

@media (max-width: 768px) {
  .our-story {
    overflow-x: visible;
  }

  .our-story__viewport {
    overflow: visible;
  }

  .our-story__track {
    flex-direction: column;
    transform: none !important;
    gap: 1.5rem;
  }

  .our-story__panel {
    flex: 1;
    width: auto;
    grid-template-columns: 1fr;
    gap: 0;
  }

  .our-story__media {
    order: 2;
  }

  .our-story__content {
    order: 1;
    padding: 1.5rem 1.25rem;
  }

  .our-story__img {
    height: auto;
    min-height: 0;
  }

  .our-story__title {
    font-size: 1.25rem;
    line-height: 1.3; /* canonical h3 mobile ratio: 20*1.3=26 */
  }

  .our-story__desc {
    font-size: 1rem;
  }

  .our-story__nav-wrap {
    display: none;
  }

  .our-story__header {
    margin-bottom: 1.5rem;
  }
}

/* === HOTFIX: SUMMARY VIDEO THUMBNAIL CONTAINER (2026-05-19) ===
 * The ACF wysiwyg body field on some strategy pages (e.g. buffer-strategy
 * summary) contains a video card whose `.resource-item__image` ships as an
 * empty <div>. video-popup.js injects a Wistia popover embed into that
 * container and tags it with `.resource-item__image--video`. This rule
 * gives the container the dimensions it needs so the Wistia thumbnail has
 * room to render. 16:9 aspect ratio matches Wistia's 960x540 default poster.
 */
.resource-item__image--video {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #f4f4ef;
  border: 1px solid #e6e6e0;
  overflow: hidden;
  position: relative;
}
.resource-item__image--video .wistia_embed {
  display: block;
  width: 100%;
  height: 100%;
}

/* === HOTFIX: HIDE WISTIA POPOVER PLAY-BUTTON OVERLAY (2026-05-19) ===
 * The Wistia popover thumbnail normally shows a centered play-button
 * overlay (a colored square with a triangle, using the configured
 * `playerColor=00808f`). Design request: suppress the overlay so the
 * poster image renders cleanly. The thumbnail remains fully clickable —
 * Wistia's popover anchor wraps the entire poster, so clicking anywhere
 * on the image still opens the video.
 *
 * The actual Wistia class is `big_play_button_background` (snake_case,
 * confirmed in rendered DOM 2026-05-19). The previous version of this
 * rule used `bigPlay` (camelCase) and missed. Attribute-substring match
 * on `big_play_button` catches both the background div and any related
 * button elements, and stays robust to Wistia adding sibling classes.
 */
.resource-item__image--video .wistia_embed [class*="big_play_button"] {
  display: none !important;
}

/* === T6.1 — MEMBER BIO DETAIL (Tier 6, 2026-05-19) ===
 * Verbatim relocation of the inline <style> block previously at
 * cpt/team-member.php:24-256. All selectors namespaced under
 * `.member--bio-detail` (with per-member modifiers like
 * `.member--bio-jonaagaard`, `.member--bio-weichien` etc.) — unique to
 * single team-member detail pages. Site-wide load is harmless on pages
 * that don't render a team-member.
 *
 * Includes 2026-05-17 bio-photo fix (mobile object-fit/position).
 */
.member--bio-detail {
  color: #003140;
  font-family: "DM Sans", ui-sans-serif, system-ui, sans-serif;
  font-size: 16px;
  line-height: 24px;
}
.member--bio-detail .member__container {
  box-sizing: border-box;
  display: flex !important;
  flex-wrap: wrap;
  justify-content: center;
  margin: 0 auto;
  max-width: 1260px;
  padding: 96px 0 0 !important;
  position: relative;
  text-align: center;
  width: 100%;
}
.member--bio-detail .member__container__info {
  box-sizing: border-box;
  color: #003140;
  font-family: "DM Sans", ui-sans-serif, system-ui, sans-serif;
  font-size: 16px;
  line-height: 24px;
  padding: 15px !important;
  position: relative;
  text-align: start;
}
.member--bio-detail .member__container__info--mobile-heading {
  display: none !important;
}
.member--bio-detail .member__container__photo {
  box-sizing: border-box;
  flex: 0 0 25%;
  grid-column: auto;
  grid-row: auto;
  overflow: hidden;
  padding: 15px 32px 15px 15px !important;
  position: relative;
  width: 25% !important;
}
/* CV-3145/CV-3131 fix (2026-06-19): keep the natural portrait aspect ratio
   (~0.866) at every width. Was height:360px + object-fit:cover, which forced
   the portrait into a tall-narrow box in the shrinking 25% column at tablet
   widths (e.g. 145x360 @768) → cropped/stretched. height:auto removes the
   distortion (object-fit becomes moot); width tracks the column. */
.member--bio-detail .member__container__photo img {
  display: block;
  height: auto !important;
  max-width: 100%;
  object-fit: contain !important;
  object-position: top center !important;
  width: 100% !important;
}
.member--bio-detail .member__container__info--bio {
  flex: 0 0 66.666667%;
  grid-column: auto;
  grid-row: auto;
  margin-top: 8px !important;
  padding: 15px !important;
  width: 66.666667% !important;
}
/* CV-3145 tablet band (768-1024): the 25% photo column collapses too narrow,
   making the natural-ratio portrait tiny. Give the photo a sensible min so it
   reads as a real headshot without distortion (height stays auto → no crop). */
@media (min-width: 768px) and (max-width: 1024px) {
  .member--bio-detail .member__container__photo {
    flex-basis: 32% !important;
    width: 32% !important;
  }
  .member--bio-detail .member__container__info--bio {
    flex-basis: 60% !important;
    width: 60% !important;
  }
  .member--bio-detail .member__container__photo img {
    max-width: 220px;
  }
}
.member--bio-detail .hidden-xs-down {
  display: block !important;
}
.member--bio-detail .member__container__info__title {
  box-sizing: border-box;
  color: #032535;
  font-size: 40px !important;
  font-weight: 700;
  line-height: 40px !important;
  margin: 3.2px 0 6.4px !important;
  padding: 0;
  text-align: start !important;
}
.member--bio-detail .member__container__info__position {
  box-sizing: border-box;
  color: #00374d;
  font-size: 30px !important;
  font-weight: 500;
  line-height: 28px !important;
  margin: 22.4px 0 48px !important;
  padding: 0;
  text-align: start !important;
}
.member--bio-detail .member__container__info__bio {
  box-sizing: border-box;
  color: #003140;
  font-size: 20px !important;
  line-height: 30px !important;
  margin: 0 !important;
  max-width: none;
  padding: 0;
  text-align: start !important;
}
.member--bio-detail .member__container__info__bio p {
  font-size: 20px !important;
  line-height: 28px !important;
  margin: 0 0 32px !important;
}


@media (max-width: 767px) {
  .member--bio-detail {
    font-size: 14px;
    line-height: 21px;
  }
  .member--bio-detail .member__container {
    align-items: stretch;
    flex-direction: column;
    flex-wrap: nowrap;
    max-width: 100% !important;
    padding: 60px 20px 0 !important;
    width: 100%;
  }
  .member--bio-detail .member__container__info {
    font-size: 14px;
    line-height: 21px;
    padding: 15px !important;
    width: 100% !important;
  }
  .member--bio-detail .member__container__info--mobile-heading {
    display: block !important;
    margin-top: 8px !important;
    order: 1;
    text-align: center;
  }
  .member--bio-detail .member__container__info--bio {
    flex: 0 0 auto;
    margin-top: 8px !important;
    order: 3;
    padding: 15px !important;
    width: 100% !important;
  }
  /* CV-3131 mobile fix (2026-06-19): single template-wide rule — natural
     portrait ratio (~0.866), centered, sanely sized. Removed the per-member
     overrides (autumnpatterson/jeffchang height:0, weichien display:none,
     and the :is(...) object-fit:fill list that distorted 8 members) — they
     were band-aids over the old fixed-aspect crop, no longer needed now the
     image keeps its natural aspect everywhere. */
  .member--bio-detail .member__container__photo {
    align-self: center;
    flex: 0 0 auto;
    height: auto !important;
    margin: 0 auto !important;
    order: 2;
    overflow: visible;
    padding: 0 !important;
    text-align: center;
    width: 240px !important;
  }
  .member--bio-detail .member__container__photo img {
    display: block;
    height: auto !important;
    margin: 0 auto !important;
    max-width: 240px;
    object-fit: contain !important;
    object-position: center center !important;
    width: 100% !important;
  }
  .member--bio-detail .hidden-xs-down {
    display: none !important;
  }
  .member--bio-detail .member__container__info__title {
    font-size: 26px !important;
    line-height: 26px !important;
    margin: 3.2px 0 6.4px !important;
    text-align: center !important;
  }
  .member--bio-detail .member__container__info__position {
    font-size: 18px !important;
    line-height: 28px !important;
    margin: 0 !important;
    text-align: center !important;
  }
  .member--bio-detail .member__container__info__bio {
    font-size: 16px !important;
    line-height: 20px !important;
    max-width: none;
    text-align: start !important;
  }
  .member--bio-detail .member__container__info__bio p {
    font-size: 16px !important;
    line-height: 20px !important;
    margin: 0 0 16px !important;
  }
}

/* === T6.2 — BUFFER-OUTCOME-TOOL / STRATEGY-EMULATION (Tier 6, 2026-05-19) ===
 * Verbatim relocation of the inline <style> block previously at
 * how-it-works.php:260-389 (only rendered when slug is buffer-strategy
 * or retirement-solutions, where the buffer-outcome-tool widget mounts).
 * All selectors target `.strategy-emulation`, `.buffer-outcome-tool`,
 * `.buffer-tool-scroll-wrapper`, `.strategy-selector__btn` — unique to
 * that widget. Site-wide load is harmless on pages without the tool.
 */
/* ── CSS vars the Vue component would have injected ── */
.buffer-outcome-tool {
  --tooltip-width: 130px;
  --tooltip-margin: 10px;
}

/* ── Slider fill track ── */
.strategy-emulation .vue-slider-process {
  background-color: #00808f;
}

/* ── Slider dot transform (centers handle on the track) ── */
.strategy-emulation .vue-slider-dot {
  transform: translate(-50%, 50%) !important;
}

/* ── Indicator containers: explicit height so absolute children
      can use % values (otherwise parent collapses to 0px) ── */
.strategy-emulation .price-indicator_container,
.strategy-emulation .buffer-indicator_container {
  position: relative;
  height: 350px;
  min-width: 40px;
  width: 40px;
}

/* ── Indicator children: all absolutely positioned so JS bottom values work ── */
.strategy-emulation .indicator_bar,
.strategy-emulation .indicator_number,
.strategy-emulation .indicator_name {
  position: absolute;
  left: 0;
  right: 0;
  width: 100%;
  text-align: center;
}

/* ── Overflow: allow negative bars to extend below chart ── */
.strategy-emulation,
.tool-container,
.buffer-outcome-tool {
  overflow: visible !important;
}

/* ── Ticks: switch from flex to absolute positioning so
      &nbsp; text nodes don't affect spacing ── */
.strategy-emulation .ticks {
  display: block !important;
  position: absolute !important;
  left: 0;
  top: 0 !important;
  height: 350px !important;
  font-size: 0; /* collapse &nbsp; text nodes to 0 height */
  pointer-events: none;
}
.strategy-emulation .ticks > div {
  position: absolute !important;
  font-size: 0.875rem;
}
.strategy-emulation .ticks .tick-text {
  width: 36px !important;
  text-align: right;
  transform: translateY(-50%);
}
.strategy-emulation .ticks .tick-line {
  left: 40px !important;
  width: calc(100% - 40px) !important;
  top: inherit;
  border-bottom: 2px dotted #e9e9e9;
  transform: translateY(-50%);
}
/* Precise top positions — nth-child counts element nodes only (not &nbsp;) */
.strategy-emulation .ticks div:nth-child(1),
.strategy-emulation .ticks div:nth-child(2)  { top: 0%; }
.strategy-emulation .ticks div:nth-child(3),
.strategy-emulation .ticks div:nth-child(4)  { top: 14.2857%; }
.strategy-emulation .ticks div:nth-child(5),
.strategy-emulation .ticks div:nth-child(6)  { top: 28.5714%; }
.strategy-emulation .ticks div:nth-child(7),
.strategy-emulation .ticks div:nth-child(8)  { top: 42.8571%; }
.strategy-emulation .ticks div:nth-child(9),
.strategy-emulation .ticks div:nth-child(10) { top: 57.1429%; }
.strategy-emulation .ticks div:nth-child(11),
.strategy-emulation .ticks div:nth-child(12) { top: 71.4286%; }
.strategy-emulation .ticks div:nth-child(13),
.strategy-emulation .ticks div:nth-child(14) { top: 85.7143%; }
.strategy-emulation .ticks div:nth-child(15),
.strategy-emulation .ticks div:nth-child(16) { top: 100%; }

/* Strategy selector (Downside Buffer toggle) — match the design */
.buffer-outcome-tool .strategy-selector {
  background: transparent;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 0;
  width: auto;
  margin: 0 auto;
}
.buffer-outcome-tool .price-indicator_container {
	pointer-events: none;
}
.buffer-outcome-tool .strategy-selector > p { margin: 0 !important; }
.buffer-outcome-tool .strategy-selector__option {
  display: flex;
  gap: 0;
  justify-content: center;
}
.buffer-outcome-tool .strategy-selector__btn {
  background-color: #ebebec;
  color: #003140;
  border-radius: 0;
}
.buffer-outcome-tool .strategy-selector__btn._active {
  background-color: #ffae33;
  color: #003140;
}
@media (min-width: 768px) {
  .buffer-outcome-tool .strategy-selector { flex-direction: row; gap: 24px; }
}

/* Slider handle → amber */
.buffer-outcome-tool .vue-slider-dot-handle { background-color: #ffae33 !important; }

/* Stacked bar + indicator bars → square corners */
.buffer-outcome-tool .strategy-detail .index-state { border-radius: 0 !important; }
.buffer-outcome-tool .indicator_bar { border-radius: 0 !important; }

/* ── Tablet (768-1024): the buffer-outcome-tool keeps its desktop bar sizing,
      but the strategy-emulation + right-edge .buffer-indicator_container is wider
      than the tablet viewport, pushing the page ~124px past the right edge
      (horizontal scroll). Let the scroll-wrapper handle that overflow internally
      (same mechanism as mobile) instead of overflowing the document. Bars keep
      their desktop dimensions — only the wrapper scrolls. >=1025 has room and is
      untouched. ── */
@media (min-width: 768px) and (max-width: 1024px) {
  .buffer-outcome-tool .strategy-emulation {
    margin-left: 96px !important;
    width: auto !important;
  }
  .buffer-outcome-tool .strategy-emulation .strategy-detail {
    margin-left: 44px !important;
  }
  .buffer-outcome-tool .strategy-emulation .price-indicator_container,
  .buffer-outcome-tool .strategy-emulation .buffer-indicator_container {
    width: 96px !important;
    min-width: 96px !important;
    margin-left: 22px !important;
  }
  .buffer-tool-scroll-wrapper {
    overflow-x: visible;
    max-width: 100%;
  }
}
/* ── Mobile: scroll wrapper (added via JS) handles overflow so the
      tool itself stays overflow:visible and bars aren't clipped ── */
@media (max-width: 767px) {
  .buffer-tool-scroll-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
  }
  .buffer-outcome-tool .strategy-emulation {
    --bar-width: 70px;
    --details-width: 70px;
    --tooltip-width: 70px;
    --tooltip-margin: 0px;
    --tick-margin-left: 30px;
    --gap: 5px;
  }
  .strategy-emulation .price-indicator_container,
  .strategy-emulation .buffer-indicator_container {
    min-width: 60px !important;
    width: 60px !important;
  }
  .strategy-emulation .ticks .tick-text {
    font-size: 11px !important;
  }
  .strategy-emulation .indicator_number,
  .strategy-emulation .indicator_name {
    font-size: 11px !important;
  }
  .strategy-emulation .ticks .tick-line {
    width: calc(100% + 40px) !important;
    left: 60px !important;
  }
}

.navbar {
	background-color: #fff;
}

.vestfin-homepage-tabs .vertical-tabs__tab-description {
	font-size: 18px !important;
}

.vestfin-homepage-tabs .vertical-tabs__button {
	font-size: 20px !important;
}

.vestfin-homepage-tabs .vertical-tabs__button svg  {
	width: 24px;
	height: 24px;
}

.cta .cta__title {
	font-family: 'DM Sans';
	font-size: 40px;
	font-weight: 700;
}
.cta .cta__subtitle {
	font-family: 'DM Sans';
	font-size:24px;
	font-weight: 400;
}

@media (max-width: 767px) {
	.cta .cta__title {
		font-size: 30px;
	}
	.cta .cta__subtitle {
		font-size:20px;
	}
	#built-for-outcome .usp__list {
		gap: 1rem
	}
	#built-for-outcome .usp__item-desc {
		line-height: 26px;
	}
	
	.vestfin-homepage-tabs .vertical-tabs-mobile-panel:last-child .vertical-tabs-mobile-panel__footnote {
		display: none;
	}
}

.subfooter .logo-linkedin {
  filter: grayscale(90%);
}

.subfooter .logo-linkedin:hover {
  filter:none;
}

.strategy-header--buffer-strategy .checkmark-list li::before,
.target-income-sub-header .checkmark-list li::before,
.checkmark-icon::before {
	color: #ffa523;
    content: "✓";
    display: table-cell;
    font-weight: 700;
    padding-right: 12px;
}
.strategy-header--buffer-strategy .checkmark-list li,
.target-income-sub-header .checkmark-list li,
.checkmark-icon  {
	display: table;
}
.strategy-header--buffer-strategy .checkmark-list li:not(:last-child) {
	margin-bottom: 16px;
}
.buffer-header__description {
	row-gap: 24px;
	display: flex; 
	flex-direction: column;
}

.strategy-header--buffer-strategy .buffer-header__title {
	font-family: DM Sans;
    font-size: 60px !important;
    font-weight: 700 !important;
    letter-spacing: -.02em;
    line-height: 1.2 !important;
    margin: 0 0 46px;
}

.content-section .fund-summery .video-description {
	font-size: 14px !important;
}

/*Target Growth Strategy Additional Resources*/
#additional-resources .resources-slider__carousel__slide__item {
	min-height: 420px;
}
#additional-resources .resource-item__image,
#additional-resources .resource-item__image .picture {
	min-height: 200px;
	background: #f4f4ef;
}
#additional-resources .resource-item__image img {
	display: block;
	width: 100%;
	height: 200px;
	object-fit: cover;
}
/* Parity polish — live uses a near-invisible hairline above card body
and rounded bottom corners on the whole card, not just the body.
Local body markup ships with `border-t-black rounded-b-3xl`; lighten
and align with the live rendering. */
#additional-resources .resource-item__body {
	border-top-color: rgba(0, 0, 0, 0.1) !important;
	border-bottom-left-radius: 0 !important;
	border-bottom-right-radius: 0 !important;
}
#additional-resources .resources-slider__carousel__slide__item {
	border-radius: 0 !important;
}
/* Live picture__whitepaper has a lime panel with the cover image
centered. The local Tailwind keeps the cover, but live actually
shows the cover image cropped inside the lime panel. Ensure the
cover is contained when whitepaper class is present. */
#additional-resources .picture__whitepaper {
	background-color: #e4ffb3;
}
/* Match live's 3-line clamp on the resource title so long titles
don't push the card body taller than live's. */
#additional-resources .resource-item__title span {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-overflow: ellipsis;
}
#additional-resources .resource-item__title {
	letter-spacing: 0.2px;
}
/* Live caps description at 3 lines too. */
#additional-resources .resource-item__description {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	-webkit-box-orient: vertical;
}
/* ----- Mirrored from buffer-strategy card styling (lines 488-555).
Keeps card min-height, whitepaper logo sizing, professionals
overlay positioning, lock icon, and description typography in
parity across strategy pages. */
#additional-resources .additional-resources__card {
	min-height: 394px;
}
#additional-resources .additional-resources__image {
	height: 200px;
	min-height: 200px;
}
#additional-resources .additional-resources__whitepaper-mark {
	width: 50%;
	height: 50%;
	margin: auto;
	padding: 72px;
	object-fit: contain;
}
#additional-resources .additional-resources__professionals {
	align-items: center;
	background: #f4f4ef;
	bottom: 0;
	display: flex;
	font-size: 16px;
	justify-content: space-around;
	left: 0;
	line-height: 24px;
	min-height: 40px;
	position: absolute;
	right: 0;
}
#additional-resources .additional-resources__lock {
	font-size: 24px;
	line-height: 24px;
}
#additional-resources .additional-resources__description {
	color: #003140;
	font-size: 18px;
	line-height: 28px;
	margin: 0 0 24px;
}
@media only screen and (max-width: 599px) {
	#additional-resources.strategy-mobile-open > article {
		overflow: hidden;
		padding-left: 35px;
		padding-right: 35px;
	}
	#additional-resources.strategy-mobile-open .additional-resources__grid {
		display: flex;
		gap: 22px;
		width: 320px;
	}
	#additional-resources.strategy-mobile-open .additional-resources__card {
		flex: 0 0 320px;
		min-height: 0;
		width: 320px;
	}
	#additional-resources.strategy-mobile-open .additional-resources__image {
		height: 225px !important;
		min-height: 225px !important;
	}
	#additional-resources.strategy-mobile-open .additional-resources__card-body {
		padding: 24px;
	}
	#additional-resources.strategy-mobile-open .resource-item__title {
		font-size: 22px;
		line-height: 30px;
	}
	#additional-resources .additional-resources__description {
		font-size: 16px;
		line-height: 24px;
	}
}
/*End Target Growth Strategy Additional Resources */


/*Buffer Strategy Blue section*/
#how-it-works.content-section .blue-background li,
#how-it-works.content-section .blue-background p,
#why-invest.content-section .blue-background li,
#why-invest.content-section .blue-background p{
	font-size: 16px !important;	
    line-height: 1.5 !important;
}
@media (min-width: 768px) {
	#how-it-works.content-section .blue-background > div,
	#why-invest.content-section .blue-background > div{
		padding: 0px 29px !important;
	}
}
 #how-it-works .blue-background .bullet-list li::before,
 #why-invest .blue-background .bullet-list li::before{
	 content: url('/wp-content/uploads/2026/05/bullet-turquoise.svg');
	 color: currentColor;
	 display: table-cell;
	 font-family: system-ui;
	 padding-right: 12px;
}
#how-it-works .yellow-background .bullet-list li::before {
	content: url('/wp-content/uploads/2026/05/bullet-yellow-bg.svg');
	color: currentColor;
	display: table-cell;
	font-family: system-ui;
	padding-right: 12px;
}

#how-it-works .static-wedding-cake .body p {
	font-size: 16px !important;
	line-height: 1.5 !important;
}
.content-section--strategy .arrow-head {
	transform: translatex(0px) rotate(-135deg) !important;
}

#why-invest .image-slider-title {
	font-size: 16px !important; 
	font-weight: bold; 
	color: #003140; 
	line-height: 28px !important; 
	text-align: center; 
	margin: 10px auto;
	text-transform: uppercase;
}

#how-it-works .buffer-outcome-tool .disclaimer  {
	font-size: 16px !important;
    margin-top: 72px;
    opacity: 0.6;
	text-align: left !important;
	line-height: 1.5 !important;
}
#how-it-works .buffer-outcome-tool .disclaimer.disclaimer-two {
	margin-block-start: 16px;
}


@media (max-width: 767px) {
	main.page-content:has(#page-menu-section) .strategy-header--buffer-strategy .strategy-header__title {
		font-size: 44px !important;
		line-height: 1.2 !important;
		margin-bottom: 60px !important;
		max-width: 270px !important;
		letter-spacing: -.02em;
		font-weight: 700;
	}
	
	#why-invest.content-section .section-subtitle {
		font-size: 22px !important;
	}
}

.syntheticborrow-hero__title {
	font-size: 84px !important;
	line-height: 80px !important;
}

#how-it-works table.loan-pricing tbody tr td:last-child,
#how-it-works table.loan-pricing thead tr th:last-child {
	border-left: 3px solid rgb(149 100 255);	
	border-right: 3px solid rgb(149 100 255);
}
#how-it-works table.loan-pricing thead tr th:last-child {
	border-top: 1px solid rgb(149 100 255);	
}

#how-it-works table.loan-pricing tbody tr td:last-child {
	border-bottom: 1px solid rgb(149 100 255);	
}
#how-it-works table.loan-pricing tbody tr:last-child td:last-child {
	border-bottom: 3px solid rgb(149 100 255);;	
}

#how-it-works table.loan-pricing thead tr th:first-child {
	border-top: 1px solid rgb(244 244 239);
	border-left: 1px solid rgb(244 244 239);
}
@media (max-width: 767px) {
	#compare-rates.syntheticborrow-calculator table tr td {
		padding: 5px 5px;
		font-size: 16px !important;
		line-height: 1.5rem;
	}
}

.risk-disclosure {
	display:flex; 
	flex-wrap:wrap; 
	flex-direction: row;
	column-gap:2rem; 
	row-gap:0; 
	width:100%;
}
.risk-disclosure .disclosure-block {
	flex: 1;
}

@media (max-width: 767px){
	.risk-disclosure {
		flex-direction: column;
	}	
	.risk-disclosure .disclosure-block:last-child {
		margin-top: 2rem;
	}		
	
	.retirement-solutions .buffer-header__container__title h1,
	.retirement-solutions .buffer-header__container__title h1 span {
		font-size: 40px !important;
		line-height: 52px !important;
	}
	.retirement-solutions .buffer-header__container__description {
		font-size: 20px;
		line-height: 28px;
	}
}
/* Retirement-solutions hero — tablet (768-1024): the desktop two-column split
   (col-md-6 title + col-md-5 chart) squeezes the H1 into a ~322-340px column,
   so "...for Retirement Risk Management" wraps one word — even mid-word — per
   line, and the chart crowds it. Stack the two columns full-width through the
   tablet band (matching the <768 mobile stack) so the headline gets the full
   container width; the chart drops below. >=1025 keeps the desktop two-column. */
@media (min-width: 768px) and (max-width: 1024px) {
	.retirement-solutions .buffer-header__container ._grid {
		flex-wrap: wrap;
	}
	.retirement-solutions .buffer-header__container ._grid > .buffer-header__container__title-content,
	.retirement-solutions .buffer-header__container ._grid > .buffer-header__container__content {
		flex: 0 0 100% !important;
		width: 100% !important;
		max-width: 100% !important;
	}
	.retirement-solutions .buffer-header__container__content {
		margin-top: 32px;
	}
}

/* Explicit hide for the closed state — don't rely solely on the browser's
   native [popover] UA-stylesheet default (display:none), which isn't
   guaranteed in every preview/embed context. Shown state is restored via
   the :popover-open pseudo-class once the trigger button opens it. */
.popover-box {
  display: none;
}
.popover-box:popover-open {
  display: block;
}
.popover-box {
  font-size: 14px;
  line-height: 1.4;
  margin-top: 8px;
  transform: translateX(-50%);
  width: 460px;
}
.popover-box p {	
  font-size: 14px !important;
  line-height: 1.4 !important;
}

#popover-box p {
	color:#003140;
	font-size: 14px !important;
	line-height: 20px !important;
}
#additional-resources .ar-slider__viewport {
		padding: 2px;
		margin: -2px;
}
@media(max-width: 768px) {
	#additional-resources .ar-slider__viewport {
		padding: 0px;
		margin: 0px;
	}
}
.member__container__info__bio a {
	text-decoration: underline;
}
.member__container__info__bio a:hover {
	text-decoration: none;
}

.mobile-navbar__top-bar {
	border-bottom: 1px solid #cacfc8;
}

@media (max-width: 767px) {
	.insights-research .page-hero {
		min-height: 400px !important;
	}
}

@media (min-width: 768px) {
	.page-id-66 .additional-resources .ar-slider__nav {
		display: none !important;
	}
	.page-id-66 .additional-resources .ar-slider__track {
		justify-content: center;
	}
}

/*Copyright Page*/
@media (max-width: 767px) {
	.page-hero--copyright {
		height: auto !important;
		min-height: 0 !important;
		padding-top: 32px !important;
		padding-bottom: 32px !important;
	}
	.page-hero--copyright .copyright-header__content {
		padding-top: 16px !important;
		padding-bottom: 16px !important;
	}
	.page-hero--copyright .copyright-header__title {
		font-size: 38px !important;
		line-height: 1.18 !important;
		margin-bottom: 0 !important;
		margin-top: 0 !important;
	}
}

/*Buffer Caps*/
.cap-table table.cap-table__table td:nth-child(2):before {
	display: none !important;
}
.cap-table table.cap-table__table td:nth-child(2) {
	padding-left: 20px !important;
}

/*Blog Post Field Note*/
.blog-post.blog-post--field-note .post-page p {
	font-size: 20px;
	font-weight: 400;
	line-height: 28px;
}
.blog-post.blog-post--field-note .post-page h2 {
	font-size: 30px;
	line-height: 28px;
}
.blog-post.blog-post--field-note .post-page h3 {
	font-size: 1.17em;
	line-height: 28px;
}

.syntheticborrow-contact-section .legal-consent-container .hs-form-booleancheckbox-display span {
	font-size: 12px;
}
.syntheticborrow-contact-section .legal-consent-container .hs-form-booleancheckbox-display {
	margin-top: 10px !important;
    margin-bottom: 10px !important;
}
.syntheticborrow-contact-section .legal-consent-container .hs-form-booleancheckbox-display input{
	transform: translatey(2px);
    margin-right: 5px;
}

/*Hide Stories on navbar*/
.navbar li:has(a[href="/stories/"]),
.navbar li:has(a[href="/stories-vest-financial/"]) {
  display: none;
}

/*Forward Pricing mobile fixes*/
@media (max-width: 767px) {
	.forward-pricing .strategy-result .price-return__row {
		flex-direction: column;
		align-items: center;
	}
	.forward-pricing .strategy-result .price-return__row label {
		width: 100%;
		text-align: left;
	}
	.forward-pricing .strategy-result .price-return__row #tool-price-return-out {
		text-align: right;
		width: 100%;
	}
}

body.field_note-template-default .navbar, body.field_note-template-default .mobile-navbar {
    position: sticky;
    top: 0;
    z-index: 9998;
}

/* target-income-strategy "sources of income" image — ACF wysiwyg strips
   <picture>/<source> on save, so the responsive swap ships as two plain
   <img> tags (.target-income-strategy-growth-income--desktop / --mobile)
   in the body content, toggled here instead of via an inline <style>
   (also stripped from wysiwyg content). */
.target-income-strategy-growth-income--mobile,
.tis-market-yield-img--mobile,
.strategy-image-mobile {
  display: none;
}
@media (max-width: 699px) {
  .target-income-strategy-growth-income--desktop,
  .tis-market-yield-img--desktop,
  .strategy-image-desktop {
    display: none;
  }
  .target-income-strategy-growth-income--mobile,
  .tis-market-yield-img--mobile,
  .strategy-image-mobile {
    display: block;
  }
}

.popover-options-covered-call,
.popover-options-premiums,
.popover-options-target-buffer,
.popover-options-contractual-nature {
  background: transparent;
  border: 0;
  cursor: pointer;
  display: inline;
  font: inherit;
  margin: 0;
  padding: 0;
  text-decoration: underline;
  vertical-align: baseline;
}

.popover-options-covered-call {
  anchor-name: --covered-call-btn;
}
.popover-options-premiums {
  anchor-name: --premium-btn;
}
.popover-options-target-buffer {
  anchor-name: --target-buffer-btn;
}
.popover-options-contractual-nature {
  anchor-name: --contractual-nature-btn;
}

#contractual-nature {
  position-anchor: --contractual-nature-btn;
  top: anchor(bottom);
  left: anchor(left);
}

#covered-call {
  position-anchor: --covered-call-btn;
  top: anchor(bottom);
  left: anchor(left);
}
#premiums {
  position-anchor: --premium-btn;
  top: anchor(bottom);
  left: anchor(left);
}
#target-buffer {
  position-anchor: --target-buffer-btn;
  top: anchor(bottom);
  left: anchor(left);
}
.popover-box {
  font-size: 14px;
  line-height: 1.4;
  margin-top: 8px;
  transform: translateX(-50%);
  width: 460px;
}
.popover-box p {	
  font-size: 14px !important;
  line-height: 1.4 !important;
}


.copyright-header.page-hero--copyright {
	background-color: #003242 !important;
}


.additional-resources__card .wistia_embed img {  
    transition-property: transform;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 300ms;
    top: 0px !important;
    transform: scale(100%, 100%);
}

.additional-resources__card .wistia_embed > div > div > div {
    display: none !important;
}

.additional-resources__card:hover .wistia_embed img {
    transform: scale(110%, 110%);
}
#how-it-works.syntheticborrow-section img[src*="dollar-bill"] {
  width: 45px !important;
  height: 45px !important;
}

/* === STACKED CONTENT BLOCKS ===
   Two default-variant content sections stacked back-to-back double their
   vertical padding (py-12 + py-12 ≈ 96px). Drop the top padding of the
   following block so the seam is ~48px. Scoped with :not() so the strategy /
   marketing / prose band variants (content-section--*) keep their spacing. */
.content-section:not([class*="content-section--"]) + .content-section:not([class*="content-section--"]) {
  padding-top: 0 !important;
}

/* === POST FOOTNOTE LINKS === */
.post-footnote-ref {
  color: inherit;
  text-decoration: underline;
}
.post-footnote-ref:hover {
  text-decoration: none;
}
@keyframes fn-highlight {
  0%   { background-color: #ffc771; }
  75%  { background-color: #ffc771; }
  100% { background-color: transparent; }
}
.fn-highlighted {
  animation: fn-highlight 3s ease forwards;
}

.mobile-filter .mobile-filter__container {
	padding: 0 0 24px !important;
}
.navbar {
    background-color: #fff !important;
}

/* === POST FOOTNOTE LINKS === */
.post-footnote-ref {
  color: inherit;
  text-decoration: underline;
}
.post-footnote-ref:hover {
  text-decoration: none;
}
@keyframes fn-highlight {
  0%   { background-color: #ffc771; }
  75%  { background-color: #ffc771; }
  100% { background-color: transparent; }
}
.fn-highlighted {
  animation: fn-highlight 3s ease forwards;
}
/* === NAVBAR BOTTOM BORDER — every page EXCEPT home (2026-06-19) ===
 * Home is identified by the WP body class `home` (also `.vestfin-front-page`).
 * The `.navbar__wrapper` markup carries `border-b ... border-b-[#cacfc8]`
 * Tailwind utility classes, but the arbitrary-color class isn't in the
 * compiled CSS, so the border computes transparent everywhere. Make it
 * visible on interior pages and keep home borderless. Matches the #cacfc8
 * weight/color used by the mobile-navbar accordion dividers. */
body:not(.home) .navbar__wrapper {
  border-bottom: 1px solid #cacfc8 !important;
}
body.home .navbar__wrapper {
  border-bottom-color: transparent !important;
}
/* Mobile top bar mirrors the same rule (separate element). */
body:not(.home) .mobile-navbar__top-bar {
  border-bottom: 1px solid #cacfc8 !important;
}
body.home .mobile-navbar__top-bar {
  border-bottom-color: transparent !important;
}


.section-body .checkmark-list li::before {
	font-weight: 400;
}

#page-menu-section .menu-items a:last-child {
	margin-right: 0px;
}


section.content-section {
	padding-top: 8px;
	padding-bottom: 8px;
}
@media (min-width: 900px) {
	section.content-section {
		padding-top: 40px;
		padding-bottom: 40px;
	}
}


#why-invest .article-body .section-subtitle,
#how-to-invest .article-body .section-subtitle,
#tools-section .article-body .section-subtitle {
    margin-top: 60px;
    margin-bottom: 40px;
}

@media (max-width: 599px) {
    #why-invest .article-body .section-subtitle,	
    #how-to-invest .article-body .section-subtitle,	
    #tools-section .article-body .section-subtitle {
        margin-top: 0;
        margin-bottom: 16px;
    }
	#why-invest article.section-body,	
	#how-to-invest article.section-body,	
	#tools-section article.section-body {
		padding-top: 36px !important;
		padding-bottom: 36px !important;
	}
	main.page-content:has(#page-menu-section) .strategy-header--buffer-strategy .strategy-header__title {
		max-width: 100% !important;
	}
}

@media (max-width: 900px) {
	main.page-content:has(#page-menu-section) #additional-resources .picture img.additional-resources__whitepaper-mark ,
	main.page-content:has(#page-menu-section) #additional-resources .resource-item__image img.additional-resources__whitepaper-mark ,
	main.page-content:has(#page-menu-section) .additional-resources__image img.additional-resources__whitepaper-mark {
		display: none;
	}
}
@media (max-width: 1023px) {
	.risk-disclosure > div {
		flex-basis: 100% !important;
		max-width: 100% !important;
	}
}

@media (min-width: 900px) {
	.syntheticborrow-footer {
		width: 80% !important;
		margin: 0 auto;
	}
}

.content-image img.image-mobile {
	display: none;
}
@media (max-width: 768px) {
	.content-image img.image-mobile {
		display: block;
	}
	.content-image img:not(.image-mobile) {
		display: none;
	}
	
	.strategy-footnote {
		background: #ccf4ff;
		padding-top: 16px;
	}
}

.faq .item:not(:last-of-type) {
	border-bottom: 1px solid rgba(16, 47, 64, .26);
}

.additional-resources__image .wistia_embed img {
	left: 0 !important;
}

.yellow-background.arrow-bullet .bullet-list::before {
    content: url(/wp-content/uploads/2026/05/bullet-yellow-bg.svg);
    color: currentColor;
    display: table-cell;
    font-family: system-ui;
    padding-right: 12px;
}

.tooltip {
  position: relative;
  display: inline-block;
  cursor: pointer;
}

.tooltip .tooltip-text {
  visibility: hidden;
  opacity: 0;
  background-color: #fff;
  color: #5a5a5a;
  text-align: left;
  padding: 16px;
  border-radius: 12px;
  border: 1px solid #e5e7eb;
  font-size: 14px;
  line-height: 20px;
  width: 600px;
  position: absolute;  
  top: 125%;
  left: 50%;
  transform: translateX(-50%);
  transition: opacity 0.2s;
  z-index: 10;
}

.tooltip.active .tooltip-text {
  visibility: visible;
  opacity: 1;
}

@media (max-width: 960px) {
	.tooltip .tooltip-text {
		left: 10px;
		 transform: translateX(0%);
		width: 400px;
	}
}