/* ═══════════════════════════════════════════════════════════════
   Moneyvest shared chrome — header (.mvh) and footer (.mvf)
   One file for every page. Uses each page's :root tokens, with
   fallbacks so it still renders if a token is missing.
   ═══════════════════════════════════════════════════════════════ */
.mvf { --c-forest: var(--mv-forest, #1e1b4b); --c-sage: var(--mv-sage, #4338CA); --c-gold: var(--mv-gold, #dea223);
  --c-gold-l: var(--mv-gold-light, #f0c04a); --c-cream: var(--mv-cream, #faf7f0); --c-text: var(--mv-text, #3d3d3d);
  --c-muted: var(--mv-text-light, #6b6b6b); --c-border: var(--mv-border, #e8e2d6);
  --f-display: var(--font-display, 'DM Serif Display', Georgia, serif); --f-body: var(--font-body, -apple-system, 'Segoe UI', sans-serif);
  --ease: cubic-bezier(0.16, 1, 0.3, 1); }

/* Pages with a light background at the top (marked by the build step):
   keep the logo, menu icon and Log In readable before the visitor scrolls. */
.nav.nav--light-top:not(.scrolled) .nav-logo-img { filter: none !important; }
.nav.nav--light-top:not(.scrolled) .nav-mobile-toggle span { background: var(--mv-forest, #1e1b4b) !important; }
.nav.nav--light-top:not(.scrolled) .nav-login { color: var(--mv-forest, #1e1b4b) !important; border-color: var(--mv-border, #e8e2d6) !important; }
.nav.nav--light-top:not(.scrolled) .nav-links > li > a:not(.nav-cta):not(.nav-login) { color: var(--mv-text, #3d3d3d); }

/* Desktop: whatever shape the logo file is, it can never push the nav onto two rows */
@media (min-width: 769px) {
  .nav .nav-logo { flex: 0 1 auto; min-width: 0; margin-right: 1.5rem; }
  .nav .nav-logo-img { max-width: clamp(160px, 22vw, 330px); object-fit: contain; object-position: left center; }
  .nav .nav-links { flex-shrink: 0; }
}

/* ─── HEADER DROPDOWNS ───
   Adds dropdowns to the site's original nav. The nav's own look (transparent over the
   hero, colour change on scroll, light/dark handling) still comes from each page. */
.nav .nav-links li.nav-drop { position: relative; }
.nav .nav-links .nav-drop-trigger { display: inline-flex; align-items: center; gap: 0.3rem; }
.nav-chev { width: 11px; height: 11px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
  transition: transform 0.25s cubic-bezier(0.16,1,0.3,1); }
.nav-drop.open .nav-chev { transform: rotate(180deg); }

.nav .mvh-panel { --c-forest: var(--mv-forest, #1e1b4b); --c-sage: var(--mv-sage, #4338CA); --c-gold: var(--mv-gold, #dea223);
  --c-cream: var(--mv-cream, #faf7f0); --c-muted: var(--mv-text-light, #6b6b6b); --c-border: var(--mv-border, #e8e2d6);
  --f-display: var(--font-display, 'DM Serif Display', Georgia, serif); --ease: cubic-bezier(0.16, 1, 0.3, 1);
  position: absolute; top: calc(100% + 18px); left: 50%; transform: translate(-50%, 6px); z-index: 1002; min-width: 300px; text-align: left;
  background: #fff; border-radius: 16px; padding: 0.5rem; box-shadow: 0 24px 60px rgba(15,14,42,0.18), 0 0 0 1px rgba(15,14,42,0.05);
  opacity: 0; visibility: hidden; transition: opacity 0.2s, transform 0.25s var(--ease), visibility 0.2s; }
.nav .mvh-panel::before { content: ''; position: absolute; left: 0; right: 0; top: -20px; height: 20px; } /* hover bridge */
.nav .nav-drop.open > .mvh-panel { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
@media (hover: hover) and (min-width: 769px) {
  .nav .nav-drop:hover > .mvh-panel, .nav .nav-drop:focus-within > .mvh-panel { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
  .nav .nav-drop:hover .nav-chev, .nav .nav-drop:focus-within .nav-chev { transform: rotate(180deg); }
}
/* panel content is immune to the page's nav-link colours, sizes and gold underline */
.nav .nav-links .mvh-panel a { position: static; color: var(--c-forest) !important; font-weight: 400; text-decoration: none; }
.nav .nav-links .mvh-panel a::after { display: none !important; }
.nav .mvh-link { display: flex; flex-direction: column; gap: 0.1rem; padding: 0.7rem 0.85rem; border-radius: 10px; transition: background 0.15s; }
.nav .mvh-link:hover, .nav .mvh-link:focus-visible { background: var(--c-cream); }
.nav .mvh-link .t, .nav .mvh-res .t { font-size: 0.92rem; font-weight: 600; color: var(--c-forest); }
.nav .mvh-link .d, .nav .mvh-res .d { font-size: 0.8rem; color: var(--c-muted); line-height: 1.4; }
.nav .nav-links .mvh-panel a.mvh-all { display: block; margin: 0.35rem 0.35rem 0.15rem; padding: 0.65rem 0.5rem 0.35rem; border-top: 1px solid var(--c-border);
  font-size: 0.82rem !important; font-weight: 600; color: var(--c-sage) !important; }
.nav .nav-links .mvh-panel a.mvh-all:hover { color: var(--c-forest) !important; }

/* Free Resources: two equal cards */
.nav .mvh-panel-res { width: 520px; min-width: 0; padding: 0.6rem; }
.nav .mvh-res-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; }
.nav .mvh-res { display: flex; flex-direction: column; gap: 0.15rem; padding: 0.55rem 0.55rem 0.85rem; border-radius: 12px; transition: background 0.15s; }
.nav .mvh-res:hover, .nav .mvh-res:focus-visible { background: var(--c-cream); }
.nav .mvh-res-media { display: flex; align-items: center; justify-content: center; height: 150px; margin-bottom: 0.7rem; border-radius: 10px; overflow: hidden;
  position: relative; background: linear-gradient(135deg, var(--c-forest), #12103a); }
.nav .mvh-res-media img { position: relative; max-height: 122px; max-width: 88%; width: auto; height: auto; border-radius: 5px;
  box-shadow: 0 10px 24px rgba(0,0,0,0.45); transition: transform 0.35s var(--ease); }
.nav .mvh-res:hover .mvh-res-media img { transform: translateY(-3px) rotate(-1.5deg); }
.nav .mvh-res-fallback { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; text-align: center; padding: 1rem;
  font-family: var(--f-display); font-size: 1.45rem; line-height: 1.1; color: var(--c-cream); }
.nav .mvh-res-fallback em { color: var(--c-gold); }
.nav .mvh-res .k { font-size: 0.66rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--c-sage); padding: 0 0.3rem; }
.nav .mvh-res .t, .nav .mvh-res .d { padding: 0 0.3rem; }

/* narrower desktops: keep the wide panel inside the window */
@media (min-width: 769px) and (max-width: 1180px) {
  .nav .nav-drop-res > .mvh-panel { left: auto; right: -2rem; transform: translateY(6px); }
  .nav .nav-drop-res.open > .mvh-panel { transform: translateY(0); }
}
@media (hover: hover) and (min-width: 769px) and (max-width: 1180px) {
  .nav .nav-drop-res:hover > .mvh-panel, .nav .nav-drop-res:focus-within > .mvh-panel { transform: translateY(0); }
}

/* tightest desktop widths: the dropdown arrows need a little more room */
@media (min-width: 769px) and (max-width: 860px) {
  .nav .nav-links { gap: 0.7rem; }
  .nav .nav-links > li > a { font-size: 0.78rem; }
  .nav .nav-links .nav-cta, .nav .nav-links .nav-login { padding-left: 0.75rem !important; padding-right: 0.75rem !important; }
  .nav-chev { width: 9px; height: 9px; }
}

/* phones: the large top-of-page logo must always leave room for the menu button */
@media (max-width: 768px) {
  .nav .nav-inner { gap: 1rem; }
  .nav .nav-logo { min-width: 0; flex: 0 1 auto; }
  .nav .nav-logo-img { max-width: calc(100vw - 7rem); max-height: 120px; height: auto; object-fit: contain; object-position: left center; }
  .nav .nav-mobile-toggle { flex-shrink: 0; }
}

/* mobile: the original full-screen menu, with each dropdown opening in place */
@media (max-width: 768px) {
  /* The header's blur (backdrop-filter) makes it the containing box for the fixed
     full-screen menu, squashing the menu into the 56px header bar. Drop the blur
     while the menu is open. */
  .nav:has(.nav-links.open) { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; transition: none !important; }
  .nav .nav-links.open { justify-content: flex-start; padding: 6.5rem 1.25rem 2.5rem; overflow-y: auto; gap: 1.5rem; }
  .nav .nav-links .nav-drop { display: flex; flex-direction: column; align-items: center; width: 100%; }
  .nav .mvh-panel, .nav .mvh-panel-res { position: static; transform: none !important; width: min(360px, 100%); margin-top: 0.9rem;
    display: none; opacity: 1; visibility: visible; box-shadow: 0 10px 30px rgba(15,14,42,0.10); }
  .nav .mvh-panel::before { display: none; }
  .nav .nav-drop.open > .mvh-panel { display: block; }
  .nav .nav-links.open .mvh-panel a { font-size: 0.92rem !important; }
  .nav .nav-links.open .mvh-panel a.mvh-all { font-size: 0.85rem !important; }
  .nav .mvh-res-media { height: 110px; } .nav .mvh-res-media img { max-height: 90px; }
  .nav .mvh-res-fallback { font-size: 1.15rem; }
}

/* ─── FOOTER ─── */
.mvf { background: #0f0e2a; color: rgba(250,247,240,0.6); font-family: var(--f-body); position: relative; }
.mvf-rule { height: 4px; background: linear-gradient(90deg, var(--c-gold) 0 22%, transparent 22% 23.5%, #6366f1 23.5% 49%, transparent 49% 50.5%, var(--c-gold) 50.5% 62%, transparent 62% 63.5%, #9481F7 63.5% 100%); }
.mvf-wrap { max-width: 1280px; margin: 0 auto; padding: 3.5rem 2rem 2rem; }
.mvf-signup { display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem; align-items: center; padding: 2rem 2.25rem; border-radius: 20px;
  background: rgba(250,247,240,0.04); border: 1px solid rgba(250,247,240,0.08); margin-bottom: 3.5rem; }
.mvf-eyebrow { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--c-gold); margin-bottom: 0.4rem; }
.mvf-h em { color: var(--c-gold); }
.mvf-h { font-family: var(--f-display); font-weight: 400; font-size: clamp(1.45rem, 2.4vw, 1.85rem); line-height: 1.15; color: var(--c-cream); margin: 0 0 0.5rem; }
.mvf-signup p { margin: 0; font-size: 0.92rem; line-height: 1.6; }
.mvf-form { display: flex; gap: 0.4rem; padding: 0.35rem; background: #fff; border-radius: 50px; }
.mvf-form input[type=email] { flex: 1; min-width: 0; border: 0; outline: none; background: none; padding: 0 1rem; font: inherit; font-size: 0.92rem; color: var(--c-text); }
.mvf-form button { border: 0; border-radius: 50px; padding: 0.8rem 1.5rem; background: var(--c-gold); color: var(--c-forest); font: inherit; font-weight: 700;
  font-size: 0.9rem; cursor: pointer; transition: background 0.2s; }
.mvf-form button:hover { background: var(--c-gold-l); }
.mvf-form.invalid { box-shadow: 0 0 0 2px #e5484d; }
.mvf-fine, .mvf-ok { font-size: 0.78rem !important; margin-top: 0.7rem !important; padding-left: 1rem; color: rgba(250,247,240,0.45); }
.mvf-ok { color: var(--c-cream); font-size: 0.9rem !important; line-height: 1.6; }
.mvf .mvf-fine a, .mvf .mvf-ok a { color: var(--c-gold); font-size: inherit; text-decoration: underline; text-underline-offset: 2px; }
.mvf [hidden] { display: none !important; }
.mvf-hp { position: absolute; left: -9999px; }
.mvf-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

.mvf-cols { display: grid; grid-template-columns: 1.6fr repeat(4, 1fr); gap: 2.5rem; padding-bottom: 2.75rem; border-bottom: 1px solid rgba(250,247,240,0.08); }
.mvf-logo img { height: 42px; width: auto; filter: brightness(0) invert(1); }
.mvf-brand p { font-size: 0.9rem; line-height: 1.65; margin: 1rem 0 1.1rem; max-width: 290px; }
.mvf-contact { list-style: none; margin: 0; padding: 0; font-size: 0.85rem; line-height: 1.9; }
.mvf h3 { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(250,247,240,0.35); margin: 0.3rem 0 1.1rem; }
.mvf ul { list-style: none; margin: 0; padding: 0; }
.mvf-cols > div:not(.mvf-brand) li { margin-bottom: 0.7rem; }
.mvf a { color: rgba(250,247,240,0.62); text-decoration: none; font-size: 0.9rem; transition: color 0.2s; }
.mvf a:hover { color: var(--c-gold); }
.mvf-bottom { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 1rem; padding-top: 1.75rem; font-size: 0.8rem; }
.mvf-legal { display: flex; gap: 1.5rem; } .mvf-legal a { font-size: 0.8rem; color: rgba(250,247,240,0.45); }

@media (max-width: 1024px) { .mvf-cols { grid-template-columns: repeat(2, 1fr); } .mvf-brand { grid-column: 1 / -1; } }
@media (max-width: 768px) {
  .mvf-wrap { padding: 2.5rem 1.25rem 1.5rem; }
  .mvf-signup { grid-template-columns: minmax(0, 1fr); gap: 1.25rem; padding: 1.5rem 1.25rem; }
  .mvf-signup > *, .mvf-cols > * { min-width: 0; }
  .mvf-form input[type=email] { width: 100%; padding: 0 0.75rem; }
  .mvf-form button { padding: 0.8rem 1.1rem; }
  .mvf a { overflow-wrap: anywhere; }
  .mvf-bottom { flex-direction: column; }
}
/* Schools lead pop-up: fit small phones, and never cover the open mobile menu */
@media (max-width: 768px) { #leadCapture { right: 1rem !important; bottom: 1rem !important; } }
body:has(.nav-links.open) #leadCapture { display: none !important; }

@media (prefers-reduced-motion: reduce) { .nav .mvh-panel, .nav .mvh-panel *, .nav-chev, .mvf * { transition: none !important; } }

/* Substack sign-up boxes (Dollhairs & Sense).
   The box runs on Substack's own site, so its "By subscribing..." notice can't be restyled from here.
   Substack centres its content (field + notice, about 100px tall) in whatever height it's given, and
   shows a scrollbar if that's too short. So the frame is given 130px (no scrollbar) and only the band
   where the email field lands is shown; the notice below it is cut off.
   If the crop ever needs nudging, change these two numbers:
     --sub-top   how much to hide above the field
     --sub-show  how tall a band to show */
.mv-substack-wrap { --sub-top: 5px; --sub-show: 60px;
                    height: var(--sub-show); overflow: hidden;
                    width: calc(100% + 16px); max-width: 376px; margin-left: -8px; }
.mv-substack { display: block; width: 100%; height: 130px; margin-top: calc(var(--sub-top) * -1); border: 0; background: transparent; }

/* Dropdowns: the section overview is the first item, with a line under it */
.nav .nav-links .mvh-panel a.mvh-link.mvh-overview { border-bottom: 1px solid rgba(30,27,75,0.1); border-radius: 10px 10px 0 0; margin-bottom: 0.35rem; }