/* How Money Works for Special Needs Families book page.
   The page is the HMW4NG export with its content swapped; these rules recolour NG's navy
   (taken from NG's navy cover) to the SNF cover's orange, and style the sections NG doesn't have. */
:root {
  --snf-orange: #F1672A;
  --snf-orange-deep: #EA5D27;
  --snf-ink: #1C1B1A;
  --snf-cream: #F4F1EB;
  --snf-yellow: #F9B51F;
}

/* ---------- hero ---------- */
.header.header-book-next-gen { background: var(--snf-orange) url('/images/hmw4snf/orange-pattern.svg') 50% 0 / cover no-repeat; }
.header-book-next-gen .text-color-orange { color: var(--snf-ink); }
.button.nextgen { background-color: var(--snf-ink); color: #fff; }
.headther-women-cta-wrapper { align-items: start; }
.snf-hero-art { pointer-events: none; position: absolute; left: 50%; transform: translateX(-50%); top: 0; margin-top: 300px; width: 1100px; max-width: 100%; height: 640px; z-index: 1; }
.snf-hero-spread { position: absolute; left: 40px; top: 110px; width: 620px; border-radius: 4px; transform: perspective(1400px) rotateX(38deg) rotateZ(-14deg); box-shadow: 0 40px 60px rgba(70, 20, 0, .35); }
.snf-hero-cover { position: absolute; right: 150px; top: 40px; width: 360px; border-radius: 3px; box-shadow: 0 30px 60px rgba(70, 20, 0, .45); }
@media screen and (max-width: 991px) {
  .snf-hero-art { position: absolute; top: auto; bottom: -230px; margin-top: 0; width: 100%; height: 400px; }
  .snf-hero-spread { display: none; }
  .snf-hero-cover { right: auto; left: 50%; top: 0; transform: translateX(-50%); width: 260px; }
}
@media screen and (max-width: 479px) {
  .snf-hero-art { bottom: -200px; height: 330px; }
  .snf-hero-cover { width: 210px; }
}

/* ---------- stats + topics band ----------
   Kim's four statistics run as one row of four above the questions (two by two on tablets, one column with the icon
   beside the text on phones). Each stat is a three-row subgrid (icon, claim, source), so the four sources start on the
   same line however the claims wrap. The section's own 273px top padding (186px on phones) clears the hero cover. */
.section.first---book-next-gen,
.section.book-fifth-next-gen { background-image: url('/images/hmw4snf/orange-pattern.svg'); background-color: var(--snf-orange); }
.first---book-next-gen .text-color-orange { color: var(--snf-ink); }
.next-gen-footnotes-text { color: #FFE3D1; }
.book-next-gen---list li::marker { color: var(--snf-ink) !important; }
.snf-stats { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: auto; column-gap: 40px; row-gap: 56px; }
.snf-stat { display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: 0; align-content: start; min-width: 0; }
.snf-stat-icon { display: block; width: 6rem; height: 6rem; margin-bottom: 24px; }
.snf-stat-claim { margin: 0; color: #fff; font-family: Proximasoft, sans-serif; font-size: 1.25rem; line-height: 1.4; font-weight: 600; }
.snf-stat-figure { display: block; margin-bottom: 8px; font-size: 2rem; line-height: 1.12; font-weight: 700; letter-spacing: -1px; }
.next-gen-footnotes-text.snf-stat-source { margin: 18px 0 0; font-size: 1rem; line-height: 1.4; }
.snf-topics { margin-top: 96px; padding-top: 80px; padding-bottom: 60px; border-top: 1px solid rgba(255, 255, 255, .35); }
.snf-topics .book-first-women-heading.snf-topics-heading { margin: 0 0 40px; max-width: 54rem; }
@media screen and (min-width: 992px) {
  /* two columns of questions under the two halves of the stats row */
  .book-next-gen---list.snf-topics-list { display: block; columns: 2; column-gap: 40px; margin-bottom: 0; }
  .snf-topics-list .bulletitem-womenspage { break-inside: avoid; -webkit-column-break-inside: avoid; margin-bottom: 20px; }
}
@media screen and (max-width: 991px) {
  .snf-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 40px; }
  .snf-topics { margin-top: 72px; padding-top: 64px; padding-bottom: 40px; }
  .snf-topics .book-first-women-heading.snf-topics-heading { margin-bottom: 32px; }
}
@media screen and (max-width: 767px) {
  /* NG pushes this heading down to clear the hero cover, which the stats now do */
  .snf-topics .book-first-women-heading.snf-topics-heading { margin-top: 0; }
  .snf-stats { grid-template-columns: minmax(0, 1fr); row-gap: 40px; }
  .snf-stat { grid-row: auto; grid-template-rows: none; grid-template-columns: 4.5rem minmax(0, 1fr); column-gap: 20px; }
  .snf-stat-icon { grid-row: 1 / span 2; width: 4.5rem; height: 4.5rem; margin: 0; }
  .snf-stat-claim, .next-gen-footnotes-text.snf-stat-source { grid-column: 2; }
  .snf-stat-claim { font-size: 1.125rem; }
  .snf-stat-figure { font-size: 1.625rem; margin-bottom: 4px; }
  .next-gen-footnotes-text.snf-stat-source { margin-top: 12px; margin-bottom: 0; font-size: .9375rem; line-height: 1.35; }
}
@media screen and (max-width: 479px) {
  .snf-stats { padding-top: 44px; }
  .snf-stat { grid-template-columns: 3.75rem minmax(0, 1fr); column-gap: 16px; }
  .snf-stat-icon { width: 3.75rem; height: 3.75rem; }
  .snf-topics { margin-top: 56px; padding-top: 48px; }
}

/* ---------- the book's two financial curves ----------
   Both charts are crops of the same book page (p.9) at the same scale, so stacked they read as that page. The second
   crop starts 4.1pt above the first one's bottom edge (438pt wide), hence the -0.936% (of the card's width) overlap.
   The card's dark fill continues the strip under "The need for planning can last two lifetimes." so the band
   doesn't sit on the card's edge. */
.snf-ink { color: var(--snf-ink); }
.snf-orange { color: var(--snf-orange); }
.snf-lede { font-size: 1.25rem; line-height: 1.6; color: #3d3f3f; }
.section.snf-charts { background: var(--snf-cream); padding-top: 100px; padding-bottom: 100px; }
.snf-chart-card { max-width: 1040px; margin: 0 auto; padding-bottom: 2.5%; overflow: hidden; border-radius: 20px; background: #1B1C1C; box-shadow: 0 1px 2px rgba(28, 27, 26, .06), 0 18px 48px rgba(28, 27, 26, .10); }
.snf-chart { display: block; width: 100%; height: auto; }
.snf-chart.is-second { margin-top: -0.936%; }
.snf-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; }
@media screen and (max-width: 767px) {
  .section.snf-charts { padding-top: 64px; padding-bottom: 64px; }
  .snf-chart-card { border-radius: 14px; }
}
@media screen and (max-width: 479px) {
  .section.snf-charts { padding-top: 48px; padding-bottom: 48px; }
  .snf-chart-card { border-radius: 10px; }
}

/* ---------- authors / endorsements ----------
   The three back-cover endorsements run in full (Kim, 10/13), too long for NG's narrow column beside the authors.
   From 992px the authors take the full width and the endorsements follow them: stacked below 1200px, three
   across from 1200px. Each name keeps NG's capitals; the credit under it is set in sentence case. */
.quotes.next-gen { color: var(--snf-orange); }
.snf-quote-credit { margin: 4px 0 0; font-size: 1rem; line-height: 1.45; font-weight: 400; color: #5c5f5f; }
@media screen and (min-width: 992px) {
  .book-third-next-gen .book-third-women-wrapper { flex-direction: column; row-gap: 20px; }
  .book-third-next-gen .max-width-717 { max-width: none; }
  .book-third-next-gen .book-third-women-wrapper-left > div { max-width: 44rem; }
  .book-third-next-gen .max-width-366px { max-width: none; }
  .book-third-next-gen .max-width-300 { max-width: none; margin-bottom: 28px; }
}
@media screen and (min-width: 1200px) {
  .book-third-next-gen .quotes-box { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 48px; align-items: start; }
  .book-third-next-gen .quotes-box > div { margin-bottom: 40px; }
  .book-third-next-gen .quotes-box .text-normal-31px-line-height { font-size: 1.125rem; line-height: 1.7; }
}
/* phones: NG centres these and sets them at 1.2rem on a 1.4rem line, which suits a sentence, not a paragraph */
@media screen and (max-width: 767px) {
  .book-third-next-gen .quotes-box { text-align: left; }
  .book-third-next-gen .quotes-box .text-normal-31px-line-height { font-size: 1.0625rem; line-height: 1.65; }
}

/* ---------- families who walk this road ----------
   The quotes run in full (Kim, 10/13) and differ a lot in length, so the cards flow down balanced columns
   (three, two on tablets, one on phones) rather than a row grid that would stretch every short quote to its row. */
.snf-families { background: #fff; padding-top: 100px; padding-bottom: 76px; }
.snf-families-head { max-width: 760px; margin-bottom: 44px; }
.snf-families-head .book-first-women-heading { margin-bottom: 14px; }
.snf-families-grid { columns: 3; column-gap: 24px; }
.snf-family-quote { margin: 0 0 24px; break-inside: avoid; -webkit-column-break-inside: avoid; background: var(--snf-cream); border-radius: 16px; padding: 28px 26px 26px; display: flex; flex-direction: column; min-width: 0; }
.snf-family-mark { font-family: Proximasoft, sans-serif; font-weight: 900; font-size: 4rem; line-height: .7; height: 2.2rem; color: var(--snf-orange); }
.snf-family-text { margin: 0; padding: 0; border: 0; font-size: 1.125rem; line-height: 1.55; color: var(--snf-ink); }
.snf-family-by { margin-top: 20px; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: left; }
.snf-family-name { font-family: Proximasoft, sans-serif; font-weight: 700; font-size: 1.05rem; color: var(--snf-ink); }
.snf-family-place { font-size: .9rem; color: #6d665f; }
@media screen and (max-width: 991px) { .snf-families-grid { columns: 2; } }
@media screen and (max-width: 767px) { .snf-families-grid { columns: 1; } .snf-families { padding-top: 70px; padding-bottom: 46px; } }

/* ---------- dark bands ---------- */
.section.book-fourth-next-gen,
.section.book-sixth-next-gen { background-color: var(--snf-ink); }
.book-fourth-heading-text { color: var(--snf-orange); }

/* ---------- book spreads (the 2x2 grid with captions) ----------
   NG's .womenbookimage forces a 491:297 box with no object-fit, which stretched our 1348x1018 spreads ~25% wide.
   Keep the spreads' own proportions, give both columns the same width (NG's "auto auto" sized them from content,
   so the two spreads in a row came out different heights below 1280px), and undo NG's negative bottom margins:
   they left the captions touching the spreads at 768-991px and overlapping them at 479px and below. */
.book-fourth-next-gen .womenbookimage { width: 100%; height: auto; aspect-ratio: 1348 / 1018; object-fit: contain; }
@media screen and (min-width: 768px) {
  .book-fourth-next-gen .book-fourth-wrapper { grid-template-columns: repeat(2, minmax(0, 490px)); }
}
/* tablet: the same 18px gap as desktop. Phones: the caption's own 32px top padding is the gap, as on NG. */
@media screen and (max-width: 991px) { .book-fourth-next-gen .womenbookimage { margin-bottom: 0; } }
@media screen and (max-width: 767px) { .book-fourth-next-gen .womenbookimage { margin-bottom: -18px; } }

/* ---------- four parts: Val in place of NG's lightbulb illustration ---------- */
.image-18.snf-val { width: 100%; max-width: 420px; border-radius: 50%; border: 10px solid rgba(255, 255, 255, .22); margin-top: 180px; margin-bottom: 0; }
@media screen and (max-width: 767px) { .image-18.snf-val { max-width: 220px; margin-top: 60px; } }

/* ---------- cast ---------- */
.snf-cast { display: flex; flex-wrap: wrap; justify-content: center; gap: 34px 26px; margin-top: 30px; padding-bottom: 0; }
.section.book-sixth-next-gen .padding-top---100 { padding-bottom: 80px; }
.snf-cast-item { width: 170px; text-align: center; }
.snf-cast-ring { display: block; width: 140px; height: 140px; margin: 0 auto 14px; border-radius: 50%; border: 7px solid #4a4443; background: #fff; }
.snf-lead .snf-cast-ring { border-color: var(--snf-orange); }
.snf-cast-name { font-family: Proximasoft, sans-serif; color: #fff; font-weight: 700; font-size: 1.5rem; line-height: 1.2; }
.snf-cast-role { color: #cfc7c0; font-size: .95rem; line-height: 1.35; margin-top: 4px; }
@media screen and (max-width: 479px) {
  .snf-cast { gap: 26px 12px; }
  .snf-cast-item { width: 140px; }
  .snf-cast-ring { width: 112px; height: 112px; }
  .snf-cast-name { font-size: 1.25rem; }
}

/* ---------- CTA: the cover on the orange pattern in place of NG's photographed cover ---------- */
.snf-cta-cover { position: absolute; inset: 0; background: var(--snf-orange) url('/images/hmw4snf/orange-pattern.svg') 50% 50% / cover; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 56px; }
.snf-cta-cover img { width: 36%; max-width: 260px; border-radius: 3px; box-shadow: 0 30px 60px rgba(70, 20, 0, .45); }
@media screen and (max-width: 479px) { .snf-cta-cover img { width: 46%; } }

/* ---------- educational disclaimer ---------- */
.section.snf-disclaimer { background: #fff; padding-top: 28px; padding-bottom: 28px; border-top: 1px solid #e6e0d8; }
.snf-disclaimer-text { font-size: .9rem; line-height: 1.5; color: #6d665f; text-align: center; margin: 0; }

/* ---------- "Read the book" request popup ----------
   NG's request popup, re-purposed (see setupSnfBookGate in replicated_websites.js): the SNF cover and title on the
   orange pattern in place of NG's speech-bubble panel, one column of fields and no version checkboxes. The card
   scrolls inside the viewport rather than running off it, and the close button stays in reach while it scrolls. */
.popup-overlay { padding-top: 1rem; padding-bottom: 1rem; }
.popup-overlay .popup-wrapper.next-gen { max-width: 66rem; max-height: 100%; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.popup-overlay .popup-close-button { position: sticky; top: .5rem; right: auto; bottom: auto; left: auto; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin: .5rem .5rem -52px auto; border-radius: 50%; background: rgba(255, 255, 255, .92); z-index: 3; }
.popup-overlay .popup-close-button:focus-visible { outline: 2px solid var(--snf-ink); outline-offset: 2px; }
.popup-overlay .popup-form-wrapper.next-gen { grid-template-columns: minmax(0, .72fr) minmax(0, 1fr); min-height: 0; }
.popup-overlay .popup-left.is-nextgen { background: var(--snf-orange) url('/images/hmw4snf/orange-pattern.svg') 50% 0 / cover no-repeat; padding: 3rem 2rem 2.5rem; justify-content: center; gap: 1.5rem; }
.snf-popup-book { display: flex; flex-direction: column; align-items: center; gap: 1.25rem; text-align: center; }
.snf-popup-cover { display: block; width: 150px; height: auto; border-radius: 3px; box-shadow: 0 18px 36px rgba(70, 20, 0, .4); }
.snf-popup-title { margin: 0; max-width: 15em; color: var(--snf-ink); font-size: 1.6rem; line-height: 1.2; }
.popup-overlay .popup-quote-wrap { width: 100%; max-width: 22rem; padding: 1rem 1.5rem; }
.popup-overlay .popup-quote-wrap .text-s { font-size: 1rem; line-height: 1.4; }
.popup-overlay .popup-profile.is-nextgen { margin-top: .75rem; margin-bottom: .75rem; }
.popup-overlay .popup-agent-wrap { color: var(--snf-ink); }
/* the bubble only points at someone on a member's page */
body:not([data-agent]) .popup-overlay .quote-triangle { display: none; }
.popup-overlay .popup-right.is-nextgen { padding: 3.5rem 3rem 3rem; justify-content: center; }
.popup-overlay .form-block.is-nextgen { flex-direction: column; align-items: stretch; justify-content: center; }
.popup-overlay .w-input:focus, .popup-overlay .w-select:focus { outline: 2px solid var(--snf-orange); outline-offset: 0; }
.popup-overlay [aria-invalid="true"] { box-shadow: inset 0 0 0 2px #b42318; }
.snf-field-error { margin-top: .3rem; color: #b42318; font-size: .8125rem; line-height: 1.3; }
#wf-form-SNF-Book-Form .next-gen-btn-wrap { display: block; margin-top: .75rem; }
.popup-overlay .button.submit-small.is-nextgen { width: 100%; background-color: var(--snf-ink); border-color: var(--snf-ink); color: #fff; }
.popup-overlay .button.submit-small.is-nextgen:hover { background-color: #3a3735; }
.popup-overlay .button.submit-small.is-nextgen[disabled] { opacity: .6; cursor: default; }
.popup-overlay .error-message.w-form-fail { position: static; margin-top: 1rem; padding: .75rem 1rem; border-radius: 4px; background: #fdecea; color: #8a1c12; text-align: left; }
.popup-overlay .success-message-2 { height: auto; padding: 0; }
.popup-overlay [data-success="snf"] { justify-content: center; align-items: center; gap: 1rem; padding: 2rem 0; text-align: center; }
.popup-overlay [data-success="snf"] h3, .popup-overlay [data-success="snf"] p { margin: 0; }
.popup-overlay [data-book-open] { max-width: 20rem; padding-top: 1rem; padding-bottom: 1rem; font-size: 1.125rem; }
/* the floating language switcher would otherwise sit on top of the form */
html.snf-book-open .weglot-container { display: none !important; }
@media screen and (max-width: 991px) {
  .popup-overlay .popup-right.is-nextgen { padding: 3rem 2rem 2rem; }
  .popup-overlay .popup-left.is-nextgen { padding-left: 1.5rem; padding-right: 1.5rem; }
}
@media screen and (max-width: 767px) {
  .popup-overlay .popup-form-wrapper.next-gen { grid-template-columns: minmax(0, 1fr); }
  .popup-overlay .popup-left.is-nextgen { align-items: stretch; gap: 1rem; padding: 1.25rem 3.75rem 1.25rem 1.25rem; }
  .snf-popup-book { flex-direction: row; justify-content: flex-start; gap: 1rem; text-align: left; }
  .snf-popup-cover { flex: none; width: 64px; box-shadow: 0 8px 18px rgba(70, 20, 0, .35); }
  .snf-popup-title { font-size: 1.25rem; }
  .popup-overlay .popup-quote-wrap { max-width: none; padding: .75rem 1rem; }
  .popup-overlay .popup-quote-wrap .text-s { font-size: .9375rem; }
  .popup-overlay .popup-agent-wrap { margin-top: .25rem; }
  .popup-overlay .popup-right.is-nextgen { padding: 1.5rem 1.25rem; }
}
@media screen and (max-width: 359px) {
  .popup-overlay .popup-quote-wrap { padding: .7rem .75rem; }
  .popup-overlay .popup-quote-wrap .text-s { font-size: .875rem; }
}

/* ---------- the digital book viewer ----------
   Built by snfBookViewer() in replicated_websites.js: the digital book (FlipHTML5) in a frame over the page, on a white
   card 24px in from the edges on larger screens and edge to edge on phones, under a slim bar with the title, an
   "Open in a new tab" fallback and the close button. Sits above the request popup it replaces. */
.snf-viewer { position: fixed; inset: 0; z-index: 100001; background: rgba(28, 27, 26, .82); animation: snf-viewer-fade .2s ease-out; }
.snf-viewer[hidden] { display: none; }
.snf-viewer-edge { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.snf-viewer-frame { position: absolute; inset: 24px; display: flex; flex-direction: column; overflow: hidden; border-radius: 12px; background: #fff; box-shadow: 0 30px 80px rgba(0, 0, 0, .45); animation: snf-viewer-rise .28s cubic-bezier(.2, .8, .2, 1); }
.snf-viewer-bar { flex: none; display: flex; align-items: center; gap: .75rem; min-height: 56px; padding: 6px 8px 6px 16px; border-bottom: 1px solid #e6e0d8; background: #fff; color: var(--snf-ink); }
.snf-viewer-cover { flex: none; display: block; width: 26px; height: auto; border-radius: 2px; box-shadow: 0 2px 6px rgba(70, 20, 0, .3); }
.snf-viewer-title { flex: 1 1 auto; min-width: 0; margin: 0; color: var(--snf-ink); font-size: .9375rem; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.snf-viewer-book { font-weight: 700; }
.snf-viewer-sep, .snf-viewer-kind { color: #6d665f; }
.snf-viewer-newtab { flex: none; display: inline-flex; align-items: center; gap: .45rem; min-height: 44px; padding: 0 .9rem; border-radius: 22px; color: var(--snf-ink); font-size: .875rem; font-weight: 600; line-height: 1; text-decoration: none; }
.snf-viewer-newtab:hover { background: var(--snf-cream); color: var(--snf-ink); }
.snf-viewer-close { flex: none; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin: 0; padding: 0; border: 0; border-radius: 50%; background: var(--snf-cream); color: var(--snf-ink); cursor: pointer; }
.snf-viewer-close:hover { background: #e9e3d9; }
.snf-viewer-newtab:focus-visible, .snf-viewer-close:focus-visible { outline: 2px solid var(--snf-ink); outline-offset: 2px; }
.snf-viewer-body { position: relative; flex: 1 1 auto; min-height: 0; background: var(--snf-cream); }
.snf-viewer-iframe { position: absolute; inset: 0; display: block; width: 100%; height: 100%; border: 0; }
.snf-viewer-loading { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem; color: #6d665f; font-size: 1rem; text-align: center; }
.snf-viewer.is-loaded .snf-viewer-loading { display: none; }
.snf-viewer-spinner { width: 36px; height: 36px; border: 3px solid rgba(28, 27, 26, .14); border-top-color: var(--snf-orange); border-radius: 50%; animation: snf-viewer-spin .9s linear infinite; }
/* the floating language switcher would otherwise sit on top of the book */
html.snf-viewer-open .weglot-container { display: none !important; }
@keyframes snf-viewer-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes snf-viewer-rise { from { opacity: 0; transform: translateY(12px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes snf-viewer-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .snf-viewer, .snf-viewer-frame { animation: none; }
  .snf-viewer-spinner { animation-duration: 2.4s; }
}
@media screen and (max-width: 767px) {
  .snf-viewer-frame { inset: 0; border-radius: 0; box-shadow: none; }
  .snf-viewer-bar { gap: .625rem; min-height: 56px; padding: max(6px, env(safe-area-inset-top)) max(8px, env(safe-area-inset-right)) 6px max(12px, env(safe-area-inset-left)); }
  .snf-viewer-cover { width: 24px; }
  .snf-viewer-title { display: flex; flex-direction: column; gap: 1px; font-size: .875rem; line-height: 1.25; white-space: normal; }
  .snf-viewer-book { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
  .snf-viewer-sep { display: none; }
  .snf-viewer-kind { font-size: .8125rem; }
  .snf-viewer-newtab { justify-content: center; width: 44px; padding: 0; }
  .snf-viewer-newtab-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

/* ---------- money milestones mountain ----------
   NG's desktop artwork has no label on the top flag; ours (images/hmw4snf/mountain-trek*.png) adds "Protect Wealth".
   Between 992px and 1279px the mountain sits low enough that the new label would run into the
   "Explore the Money Milestones" link, so the artwork is drawn a little smaller there. */
.book-seventh-women-bg-image.hide-tablet.is-snf { width: 88%; }
@media screen and (min-width: 1280px) { .book-seventh-women-bg-image.hide-tablet.is-snf { width: 100%; } }