/* ===========================================================================
   Design tokens for the marketing site.
   ---------------------------------------------------------------------------
   Every colour, typeface and duration used by the marketing pages is named
   here. Page stylesheets should reference these rather than repeating literal
   values; a literal in a page stylesheet is a signal that either the value is
   genuinely one-off, or that a token is missing.

   Breakpoints cannot be expressed as custom properties, so they are only
   documented here.

   The Figma file ships three responsive frames — Desktop 1440, Small 1024 and
   Mobile 380 — but only TWO layouts. Every component in it is a two-variant
   set (`Mobile=No` / `Mobile=Yes`), and the Small 1024 frame instantiates
   `Mobile=No` for all nine of its sections, exactly as Desktop does. Small is
   the desktop layout reflowed to 1024px, not a third tier. So:

       (max-width: 1023px)                         the main "mobile" switch
       (min-width: 1024px)                         desktop

   1024px is therefore the FIRST desktop pixel, not the last mobile one: write
   `max-width: 1023px`, never `max-width: 1024px`, which would put the design's
   own Small frame width into the mobile layout.

   Two sub-bands exist inside mobile. They have no Figma frame of their own,
   and refine the phone layout below what the design specifies:

       (max-width: 640px)                          small phone
       (min-width: 640px) and (max-width: 1023px)  large phone / small tablet

   And one inside desktop, for widths below the max container:

       (min-width: 1024px) and (max-width: 1439px)
   =========================================================================== */

:root {
  /* --- Brand palette ---------------------------------------------------- */
  --mz-ink: #0b0b0a;             /* page background, and text on light panels */
  --mz-white: #fff;
  --mz-paper: #f6f6f4;           /* light panel background (CTA band)         */
  --mz-paper-border: #dbdad2;    /* outline buttons on a light panel          */
  --mz-surface: #1a1a1a;         /* opaque mobile-menu card fill (only use)   */

  /* Frosted panel fill, used by the decorative product panels on several
     pages. Same value as --mz-rule-soft, but a fill rather than a rule, so it
     is named separately — do not use the rule token as a background. */
  --mz-panel: rgba(255, 255, 255, 0.1);

  --mz-lime: #deff85;            /* nav underline, section tag pill           */
  --mz-lilac: #e8bbff;           /* primary button                            */
  --mz-lilac-hover: #d9a8f0;
  --mz-lilac-active: #cf9ae6;

  /* --- Text on the dark background -------------------------------------- */
  --mz-text: var(--mz-white);
  --mz-text-secondary: rgba(255, 255, 255, 0.7);   /* accordion body          */
  --mz-text-tertiary: rgba(255, 255, 255, 0.6);    /* footer links            */
  --mz-text-quiet: rgba(255, 255, 255, 0.5);       /* copyright, social icons */
  --mz-text-faint: rgba(255, 255, 255, 0.4);       /* legal disclosure        */

  /* --- Text on a light panel -------------------------------------------- */
  --mz-text-on-light: var(--mz-ink);
  --mz-text-on-light-secondary: rgba(0, 0, 0, 0.6);

  /* --- Rules and hover washes on the dark background -------------------- */
  --mz-rule: rgba(255, 255, 255, 0.2);        /* outline buttons, accordion   */
  --mz-rule-soft: rgba(255, 255, 255, 0.1);   /* footer dividers              */
  --mz-rule-faint: rgba(255, 255, 255, 0.08); /* mobile menu link separators  */

  --mz-wash: rgba(255, 255, 255, 0.08);       /* :hover on a dark button      */
  --mz-wash-strong: rgba(255, 255, 255, 0.12);/* :active on a dark button     */
  --mz-wash-on-light: rgba(0, 0, 0, 0.08);
  --mz-wash-on-light-strong: rgba(0, 0, 0, 0.12);

  /* --- Scrims layered over hero photography ----------------------------- */
  --mz-scrim: rgba(0, 0, 0, 0.2);
  --mz-scrim-menu: rgba(0, 0, 0, 0.85);       /* behind the open mobile menu  */
  --mz-scrim-panel: rgba(0, 0, 0, 0.7);       /* frosted snippet panels; Figma
                                                 `background/primary-inverse-blur` */

  /* --- Type ------------------------------------------------------------- */
  --mz-font-sans: 'Instrument Sans', sans-serif;

  /* Headline face. The design system's brand typeface is Financier Display
     (`fonts/ft-brand` in Figma) and we have no licence for it, so nothing in
     this stack past the first entry is loaded and headlines resolve to Georgia.

     Lora is listed but not self-hosted either, and deliberately so: measured
     against the design it is 4% WIDER than Georgia, while Financier Display is
     narrower than both — it sets the home headline in two lines where Georgia
     and Lora each need three. Loading Lora would move away from the design,
     not towards it.

     Dropping real Financier Display woff2 files into css/fonts.css is the only
     change needed to switch — this stack already prefers it. */
  --mz-font-serif: 'Financier Display', 'Lora', Georgia, serif;

  /* --- Layout ----------------------------------------------------------- */
  --mz-page-max: 1440px;
  --mz-gutter: 40px;             /* horizontal page padding, desktop          */
  --mz-gutter-mobile: 20px;      /* ...and at <= 1023px                       */

  /* --- Motion ----------------------------------------------------------- */
  --mz-transition: 0.15s ease;        /* button and link colour changes       */
  --mz-transition-slow: 0.3s ease;    /* nav underline, accordion open/close  */
}
/* ===========================================================================
   Site chrome: the header (with its mobile menu) and the footer.
   These wrap every marketing page and come from
   partials/marketing-header.html and partials/marketing-footer.html.
   =========================================================================== */

/* ==========================================================================
   Promo banner
   ========================================================================== */

/* Hidden for everyone by default. js/promo-banner.js adds `is-visible` to the
   readers who arrived with `utm_source=financialsamurai`, and to nobody else.
   Written this way round on purpose: shipping it visible and hiding it from
   script would flash the offer at every visitor before the script ran. */
.mz-promo-banner {
  display: none;
  background: var(--mz-lilac);
  width: 100%;
}

.mz-promo-banner.is-visible {
  display: block;
}

.mz-promo-banner-inner {
  max-width: var(--mz-page-max);
  margin: 0 auto;
  padding: 10px var(--mz-gutter);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

.mz-promo-banner-text {
  font-size: 14px;
  font-weight: 500;
  color: var(--mz-ink);
  text-align: center;
}

.mz-promo-banner-code {
  font-weight: 700;
}

/* The copy button sits at 60% until it is hovered or has just been used, so it
   reads as an affordance beside the code rather than a second call to action. */
.mz-promo-banner-copy {
  appearance: none;
  border: none;
  background: none;
  color: var(--mz-ink);
  cursor: pointer;
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.6;
  transition: opacity 0.2s ease;
}

.mz-promo-banner-copy:hover,
.mz-promo-banner-copy.is-copied {
  opacity: 1;
}

/* `display: flex` above outranks the `hidden` attribute, which promo-banner.js
   sets when the browser has no clipboard to write to. */
.mz-promo-banner-copy[hidden] {
  display: none;
}

/* One icon at a time: the check replaces the clipboard while `is-copied` is on
   the button, which the script clears two seconds after the copy. */
.mz-promo-banner-check-icon {
  display: none;
}

.mz-promo-banner-copy.is-copied .mz-promo-banner-copy-icon {
  display: none;
}

.mz-promo-banner-copy.is-copied .mz-promo-banner-check-icon {
  display: block;
}

/* The copy confirmation for screen readers, which nobody should see. Clipped
   rather than `display: none` or `visibility: hidden`: both of those take the
   element out of the accessibility tree as well, and a live region that is not
   in the tree announces nothing. Absolute, so it stays out of the flex row
   above and adds nothing to its gap. */
.mz-promo-banner-status {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

@media (max-width: 1023px) {
  .mz-promo-banner-inner {
    padding: 10px var(--mz-gutter-mobile);
  }

  .mz-promo-banner-text {
    font-size: 13px;
  }
}

/* ==========================================================================
   Header
   ========================================================================== */

.mz-nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--mz-ink);
  width: 100%;
}

.mz-nav-inner {
  max-width: var(--mz-page-max);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px var(--mz-gutter);
}

/* On desktop the hamburger is hidden and the logo should participate directly
   in the nav's space-between layout, so this wrapper dissolves itself. At
   <= 1023px it becomes a real flex row again (see the mobile block below). */
.mz-nav-left {
  display: contents;
}

.mz-nav-logo img {
  width: 90px;
  height: 26px;
}

.mz-nav-links {
  display: flex;
  align-items: center;
  gap: 32px;
  list-style: none;
}

.mz-nav-links a {
  font-size: 16px;
  font-weight: 600;
  color: var(--mz-white);
  position: relative;
  padding-bottom: 4px;
}

/* The underline grows from the left on hover, and stays put on the current
   page. `is-active` is applied at build time by build.mjs, which matches each
   [data-nav-link] href against the route being emitted. */
.mz-nav-links a::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 2px;
  background: var(--mz-lime);
  transition: width var(--mz-transition-slow);
}
.mz-nav-links a:hover::after,
.mz-nav-links a.is-active::after {
  width: 100%;
}

.mz-nav-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.mz-nav-hamburger {
  display: none;
  padding: 8px;
}

/* ==========================================================================
   Mobile menu — a full-screen overlay, opened by the hamburger.
   Hidden at every width until .is-open is set by js/marketing.js.
   ========================================================================== */

.mz-mobile-menu {
  display: none;
  position: fixed;
  inset: 0;
  background: var(--mz-scrim-menu);
  flex-direction: column;
  /* Above .mz-nav's 100: the nav is sticky, so anything lower leaves the bar
     -- and its hamburger -- painted over the open dialog and still clickable. */
  z-index: 101;
  overflow-y: auto;
}

.mz-mobile-menu.is-open {
  display: flex;
}

.mz-mobile-menu-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px;
  flex-shrink: 0;
}

.mz-mobile-menu-header-left {
  display: flex;
  align-items: center;
  gap: 4px;
}

.mz-mobile-menu-close {
  padding: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
}

/* `.mz-nav-logo img` sets 90x26 on a near-identical element and outranks this
   single-class rule, so the mobile logo's anchor must not gain `mz-nav-logo`. */
.mz-mobile-logo {
  width: 78px;
  height: 22px;
}

.mz-mobile-menu-card {
  background: var(--mz-surface);
  border-radius: 0;
  margin: 0 12px;
  overflow: hidden;
}

.mz-mobile-menu-links {
  display: flex;
  flex-direction: column;
}

.mz-mobile-menu-links a {
  font-size: 20px;
  font-weight: 600;
  color: var(--mz-white);
  padding: 24px;
  border-bottom: 1px solid var(--mz-rule-faint);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.mz-mobile-menu-links a:last-child {
  border-bottom: none;
}

/* The chevron is a text glyph rather than an icon: it is decoration on a
   row that is already a link, and one character costs nothing to ship.

   The empty alt text after the slash keeps the glyph out of the link's
   accessible name, so the row announces "Home" and not "Home ›". The plain
   declaration above it is the fallback: where the alt-text syntax is not
   understood the whole declaration is dropped, which would take the chevron
   with it. */
.mz-mobile-menu-links a::after {
  content: '\203A';
  content: '\203A' / '';
  font-size: 24px;
  color: rgba(255, 255, 255, 0.4);
  font-weight: 400;
}

/* Current page: the whole row fills lime rather than carrying an inset rule
   under it, so the state survives the row's new padding. */
.mz-mobile-menu-links a.is-active {
  background: var(--mz-lime);
  color: var(--mz-ink);
}

.mz-mobile-menu-links a.is-active::after {
  color: rgba(0, 0, 0, 0.4);
}

/* Log in sits outside the card as an outlined button, so it reads as an
   action rather than a fifth destination. */
.mz-mobile-menu-login {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 12px;
  padding: 18px 24px;
  font-size: 20px;
  font-weight: 600;
  color: var(--mz-white);
  border: 1px solid rgba(255, 255, 255, 0.7);
  text-decoration: none;
}

/* ==========================================================================
   Footer
   ========================================================================== */

.mz-footer {
  background: var(--mz-ink);
  color: var(--mz-white);
  font-family: var(--mz-font-sans);
}

.mz-footer-inner {
  max-width: var(--mz-page-max);
  margin: 0 auto;
  padding: 60px var(--mz-gutter);
}

/* Logo beside the link columns, all on a 5-column grid so they align
   with the article columns below. */
.mz-footer-top {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 24px;
}

.mz-footer-logo {
  grid-column: 1;
}

.mz-footer-cols {
  display: contents;
}

.mz-footer-articles {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 24px;
}

.mz-footer-col,
.mz-footer-article-col {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.mz-footer-col-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--mz-white);
  margin-bottom: 8px;
}

.mz-footer-col a,
.mz-footer-article-col a {
  font-size: 14px;
  font-weight: 400;
  color: var(--mz-text-tertiary);
  line-height: 1.6;
  transition: color var(--mz-transition);
}
.mz-footer-col a:hover,
.mz-footer-article-col a:hover {
  color: var(--mz-white);
}

/* Sits under the last link in the Legal column rather than beside it, so the
   number reads as contact detail and not as another nav item. */
.mz-footer-phone {
  font-size: 14px;
  font-weight: 400;
  color: var(--mz-text-tertiary);
  line-height: 1.6;
  margin-top: 12px;
  display: block;
}

.mz-footer-divider {
  border: none;
  border-top: 1px solid var(--mz-rule-soft);
  margin: 40px 0 40px;
}

.mz-footer-divider--wordmark {
  margin-top: 0;
}

.mz-footer-bottom {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 24px;
  align-items: center;
  margin-top: 40px;
  padding-top: 40px;
  border-top: 1px solid var(--mz-rule-soft);
}

.mz-footer-copyright {
  grid-column: 1 / 3;
}

.mz-footer-social {
  grid-column: 5;
  justify-self: end;
}

.mz-footer-bottom .mz-footer-copyright {
  font-size: 14px;
  font-weight: 400;
  color: var(--mz-text-quiet);
}

.mz-footer-social {
  display: flex;
  gap: 16px;
}

.mz-footer-social a {
  color: var(--mz-text-quiet);
  transition: color var(--mz-transition);
}
.mz-footer-social a:hover {
  color: var(--mz-white);
}

.mz-footer-disclosure {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 24px;
  padding-top: 40px;
}

.mz-footer-disclosure-label {
  font-size: 14px;
  font-weight: 600;
  color: var(--mz-white);
  grid-column: 1;
}

.mz-footer-disclosure-text {
  display: flex;
  flex-direction: column;
  gap: 16px;
  grid-column: 2 / -1;
}

.mz-footer-disclosure-text p {
  font-size: 13px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--mz-text-faint);
}

.mz-footer-disclosure-text a {
  text-decoration: underline;
  text-underline-offset: 2px;
}

.home-only-disclosure { display: none; }
.home-page .home-only-disclosure { display: block; }

/* The wordmark is set to the footer's full width and clipped, so it scales
   with the page rather than sitting at one size. */
/* Oversized lilac wordmark, cropped along its baseline.

   The crop is a ratio, not a fixed height: `max-height: 280px` cut a different
   part of the letterforms at every width, and stopped cropping at all once the
   footer was narrow enough that the mark fitted inside 280px. 1360 / 280 is the
   design's own crop — Figma's footer wordmark (65848:6381) is a 1320x382
   drawing shown 1320x280 — so holding that ratio keeps the cut on the same
   point of the glyphs at every breakpoint. */
.mz-footer-wordmark {
  width: 100%;
  overflow: hidden;
  margin-top: 40px;
  margin-bottom: 0;
  aspect-ratio: 1320 / 280;
}

.mz-footer-wordmark img {
  width: 100%;
  height: auto;
  display: block;
}

.mz-footer-wordmark-svg {
  width: 100%;
  height: auto;
  display: block;
  color: var(--mz-lilac);
  /* The dot springs above its rest position, which sits within half a unit of
     the viewBox's top edge and would clip against it. The wrapper's own
     `overflow: hidden` still makes the crop. */
  overflow: visible;
}

/* --- Wordmark entrance ----------------------------------------------------
   The mark assembles itself the first time it is scrolled into view:

     1. the dot fades in, low, where the i's body will be
     2. it springs up past that, then falls back down to meet the body
     3. the body fades in and the two rise into place together
     4. m, e, z, z follow, one every 120ms

   Distances are in the SVG's own user units — the design's 1320x382 frame —
   so the motion scales with the mark and reads the same at 1360px and at
   335px. On a desktop footer one unit is about a pixel; on a phone, a
   quarter of one. They are named here rather than repeated through the
   keyframes, so the three a designer would want to change are in one place.

   Both are bounded by the crop below them. The wrapper shows the top 280 of
   the mark's 382, the letters' tops sit at y=112, and the dot's underside at
   y=83, so `--wm-lift` past ~165 starts the letters below the crop and the
   opening second plays against an empty footer. `--wm-drop` of 37 is what
   puts the dot on the body: the body's top edge is at y=112, and 83 + 37
   lands just inside it. `--wm-spring` of 59 keeps the dot's top (y=0 at rest)
   inside the frame on the way up.

   The dot and the body finish on the same timing function over the same
   window (0.85s-1.55s), which is what makes the last leg read as one object
   rising rather than two things arriving.
   ------------------------------------------------------------------------- */

.mz-footer-wordmark {
  --wm-lift: 71;     /* how far below its rest position each part starts */
  --wm-spring: 59;   /* how far above that the dot springs on the way in */
  --wm-drop: 37;     /* how far below it then falls, to meet the body    */
}

/* Hidden only once js/marketing.js has armed the sequence, so a page that
   never runs it shows the assembled mark rather than an empty gap. */
.mz-footer-wordmark.is-armed .mz-wm-letter,
.mz-footer-wordmark.is-armed .mz-wm-i-body,
.mz-footer-wordmark.is-armed .mz-wm-dot {
  opacity: 0;
}

/* The body and the four letters share one move and differ only in delay. */
@keyframes mz-wm-rise {
  from { opacity: 0; transform: translateY(calc(var(--wm-lift) * 1px)); }
  to   { opacity: 1; transform: translateY(0); }
}

/* The dot's whole path in one animation, so its legs cannot drift apart. */
@keyframes mz-wm-dot {
  0%   { opacity: 0; transform: translateY(calc(var(--wm-lift) * 1px)); }
  16%  { opacity: 1; transform: translateY(calc(var(--wm-lift) * 1px)); }
  35%  { opacity: 1; transform: translateY(calc((var(--wm-lift) - var(--wm-spring)) * 1px)); }
  55%  { opacity: 1; transform: translateY(calc((var(--wm-lift) + var(--wm-drop)) * 1px)); }
  100% { opacity: 1; transform: translateY(0); }
}

.mz-footer-wordmark.is-visible .mz-wm-dot {
  animation: mz-wm-dot 1.55s cubic-bezier(0.33, 0, 0.2, 1) forwards;
}

.mz-footer-wordmark.is-visible .mz-wm-i-body {
  animation: mz-wm-rise 0.7s cubic-bezier(0.33, 0, 0.2, 1) 0.85s forwards;
}

.mz-footer-wordmark.is-visible .mz-wm-letter {
  animation: mz-wm-rise 0.5s cubic-bezier(0.33, 0, 0.2, 1) forwards;
}

.mz-footer-wordmark.is-visible .mz-wm-letter[data-letter="1"] { animation-delay: 1.20s; }
.mz-footer-wordmark.is-visible .mz-wm-letter[data-letter="2"] { animation-delay: 1.32s; }
.mz-footer-wordmark.is-visible .mz-wm-letter[data-letter="3"] { animation-delay: 1.44s; }
.mz-footer-wordmark.is-visible .mz-wm-letter[data-letter="4"] { animation-delay: 1.56s; }

/* Decoration: someone who asked for less motion gets the assembled mark. */
@media (prefers-reduced-motion: reduce) {
  .mz-footer-wordmark.is-armed .mz-wm-letter,
  .mz-footer-wordmark.is-armed .mz-wm-i-body,
  .mz-footer-wordmark.is-armed .mz-wm-dot {
    opacity: 1;
  }

  .mz-footer-wordmark.is-visible .mz-wm-dot,
  .mz-footer-wordmark.is-visible .mz-wm-i-body,
  .mz-footer-wordmark.is-visible .mz-wm-letter {
    animation: none;
  }
}


/* ==========================================================================
   Mobile — the header collapses to hamburger + logo, and the footer's
   five-column grids fold to two.
   ========================================================================== */

@media (max-width: 1023px) {
  .mz-nav-inner { padding: 12px; }
  .mz-nav-links { display: none !important; }
  .mz-nav-actions .mz-btn--outline { display: none; }

  .mz-nav-left {
    display: flex;
    align-items: center;
    gap: 4px;
  }

  .mz-nav-hamburger {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
  }

  .mz-nav-logo img {
    width: 78px;
    height: 22px;
  }

  .mz-footer-inner { padding: 40px var(--mz-gutter-mobile); }
  .mz-footer-top { grid-template-columns: repeat(2, 1fr); gap: 32px 24px; }
  .mz-footer-logo { display: none; }
  .mz-footer-articles { grid-template-columns: repeat(2, 1fr); gap: 32px 24px; }
  /* The copyright row folds to one column. */
  .mz-footer-bottom { grid-template-columns: 1fr; gap: 24px; }
  .mz-footer-bottom .mz-footer-copyright { grid-column: 1; }
  .mz-footer-bottom .mz-footer-social { grid-column: 1; justify-self: start; }

  /* The disclosure label stacks above its text. Both need their desktop
     `grid-column` cleared, or they stay pinned to columns of a track list
     that no longer exists. */
  .mz-footer-disclosure { grid-template-columns: 1fr; gap: 16px; }
  .mz-footer-disclosure-label,
  .mz-footer-disclosure-text { grid-column: auto; }
}

/* ==========================================================================
   Page transitions
   ========================================================================== */

/* The page slides 80px either way, which would otherwise be 80px of
   horizontal scroll. `clip` rather than `hidden`: `hidden` would make this a
   scroll container and trap `position: sticky` inside it. */
.mz-page {
  overflow-x: clip;
}

/* Blog proportions taken from /blog/financial-samurai-partners-with-mezzi. */
:root{--mz-font-sans:Acronym,Arial,sans-serif;--mz-font-serif:Financier,Georgia,serif}
.nav{max-width:1440px;border-bottom:0;padding:26px 40px}
.hero{max-width:1400px;margin:64px auto 0;padding:0 40px}
.hero h1{font-size:56px;line-height:1.05;letter-spacing:-1.12px;max-width:800px}
.deck{font-size:18px;line-height:1.4;letter-spacing:-.18px;max-width:640px;color:var(--mz-text-secondary)}
.byline{font-size:16px;line-height:1.28;color:var(--mz-text-quiet)}
.layout{max-width:1400px;padding:80px 40px 120px;grid-template-columns:300px minmax(0,1fr);gap:150px}
.layout article{font-size:20px;line-height:1.5;letter-spacing:-.2px}
.layout article>p{color:var(--mz-text-secondary)}
.layout article>p:first-child{font-size:24px;line-height:1.4;color:white}
.layout article h2{font-family:Acronym,Arial,sans-serif;font-size:32px;font-weight:600;line-height:1.15;letter-spacing:-.32px;margin:56px 0 24px}
.layout article h3{font-size:24px;line-height:1.2;margin:40px 0 16px}
aside{font-size:14px;top:40px}aside>p{font:600 16px/1.28 Acronym,Arial,sans-serif;letter-spacing:-.16px;text-transform:none;color:white}aside a{line-height:1.28;margin-bottom:12px}
.mz-footer a{text-decoration:none}.mz-footer-disclosure-text a{text-decoration:underline}
.mz-footer p,.mz-footer h2,.mz-footer h3,.mz-footer h4{margin:0}
.mz-footer-disclosure-label{font-family:Acronym,Arial,sans-serif;line-height:1.5;letter-spacing:0}
.mz-footer-disclosure-text h3,.mz-footer-disclosure-text h4{font-family:Acronym,Arial,sans-serif;font-size:13px;line-height:1.5;letter-spacing:0;font-weight:600;color:var(--mz-text-tertiary)}
.mz-footer-disclosure-text h3:not(:first-child){margin-top:24px}
.mz-footer-disclosure-text strong{font-weight:600}
.mz-footer-disclosure-text #fee-assumptions{display:flex;flex-direction:column;gap:16px;margin-top:16px}
.mz-footer-disclosure-text .placeholder{display:inline;color:inherit;background:none;padding:0}
@media(max-width:1200px) and (min-width:1024px){.layout{grid-template-columns:240px minmax(0,1fr);gap:64px}}
@media(max-width:1023px){.nav{padding:20px}.hero{padding:0 20px;margin-top:40px}.hero h1{font-size:36px;letter-spacing:-.72px}.deck{font-size:16px;margin-top:20px}.layout{display:block;padding:40px 20px 80px}.layout aside{display:none}.layout article{font-size:16px}.layout article>p:first-child{font-size:20px}.layout article h2{font-size:26px;margin:40px 0 16px}.layout article h3{font-size:20px;margin:32px 0 12px}}

/* Human context and plain-language investment comparison. */
.lee-personalization h3{font-family:Financier,Georgia,serif!important;font-size:32px!important;font-weight:400;max-width:540px;margin:16px 0 20px!important}
.lee-personalization blockquote p{font:24px/1.45 Acronym,Arial,sans-serif;letter-spacing:-.2px}
.lee-personalization .member-portrait{width:96px;height:96px;object-fit:cover;border-radius:50%}
.plain-investments .purchase-deltas strong{font:34px/1.15 Financier,Georgia,serif;letter-spacing:-.5px}
.plain-investments .purchase-deltas p{font-size:17px;line-height:1.5;margin-top:14px}
.plain-investments figcaption{font-size:13px}
@media(max-width:600px){.lee-personalization blockquote p{font-size:20px}.lee-personalization h3{font-size:28px!important}.plain-investments .purchase-deltas strong{font-size:30px}.plain-investments .purchase-deltas p{font-size:16px}}
.mz-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  padding: 0 16px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  z-index: 0;
  transition: color var(--mz-transition);
}

.mz-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--mz-lime);
  transform: translateY(100%);
  transition: transform 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
  z-index: -1;
}

.mz-btn:hover::before {
  transform: translateY(0);
}

.mz-btn:hover {
  color: var(--mz-ink);
}

/* --- Hover cursor --------------------------------------------------------
   A pill that replaces the pointer while it is over an image link, naming
   what the link does ("Learn more"). Opt in per element with
   `data-hover-cursor="<label>"`; js/marketing.js builds the pill.

   Both the hidden caret and the pill are behind `hover: hover`, so a touch
   device — where there is no pointer to replace and the pill would never be
   positioned — keeps its normal behaviour.
   ------------------------------------------------------------------------- */

@media (hover: hover) {
  [data-hover-cursor] {
    cursor: none;
  }
}

.mz-hover-cursor {
  position: fixed;
  background: var(--mz-white);
  color: var(--mz-ink);
  font-size: 14px;
  font-weight: 600;
  padding: 10px 20px;
  border-radius: 0;
  pointer-events: none;
  z-index: 1000;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.8);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.mz-hover-cursor.is-visible {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

.mz-btn--lg {
  height: 60px;
  padding: 0 20px;
}

.mz-btn--solid {
  background: var(--mz-lilac);
  color: var(--mz-ink);
}
.mz-btn--solid:hover { color: var(--mz-ink); }
.mz-btn--solid:active { background: var(--mz-lilac-active); }

.mz-btn--outline {
  border: 1px solid var(--mz-rule);
  color: var(--mz-white);
}
.mz-btn--outline:hover { background: var(--mz-wash); }
.mz-btn--outline:active { background: var(--mz-wash-strong); }

.mz-btn--outline-on-light {
  border: 1px solid var(--mz-paper-border);
  color: var(--mz-text-on-light);
}
.mz-btn--outline-on-light:hover { background: var(--mz-wash-on-light); }
.mz-btn--outline-on-light:active { background: var(--mz-wash-on-light-strong); }

.mz-cta {
  padding: 20px;
}

.mz-cta-inner {
  background: var(--mz-paper);
  padding: 20px;
  display: flex;
  gap: 40px;
  overflow: hidden;
}

/* The two columns split the row by CONTENT box, not by border box — Figma's
   auto-layout sizes flex children from their content and adds padding on top.
   The copy column carries 60px of horizontal padding (20 left + 40 right) and
   the photo column carries none, so an even split leaves the copy column 60px
   wider than the photo.

   `flex-basis: 60px` reproduces that under CSS's border-box sizing: the basis
   covers exactly this column's own padding, so the free space left to share is
   the same content width both columns then divide evenly.

   At 1440 that resolves to 690 / 630 and a 710-tall band, matching the design
   node for node. Do not simplify this to `flex: 1` on both columns: that
   splits 660 / 660 and produces a 740-tall band with an oversized photo. */
.mz-cta-left {
  flex: 1 1 60px;
  padding: 40px 40px 40px 20px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.mz-cta-headline {
  font-family: var(--mz-font-serif);
  font-weight: 400;
  font-size: 40px;
  line-height: 1.1;
  color: var(--mz-text-on-light);
  margin-bottom: 20px;
}

.mz-cta-body {
  font-size: 20px;
  font-weight: 400;
  line-height: 1.28;
  color: var(--mz-text-on-light-secondary);
  margin-bottom: 32px;
}

.mz-cta-actions {
  display: flex;
  gap: 12px;
}

.mz-cta-right {
  flex: 1 1 0;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  position: relative;
}

.mz-cta-right img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}


.mz-btn{text-decoration:none;border-radius:0;font-family:var(--mz-font-sans)}.mz-cta h2,.mz-cta p{margin-top:0}.mz-cta-right picture{display:block;width:100%;height:100%}.mz-cta-right img{display:block}.mz-cta{max-width:1440px;margin:0 auto}.mz-cta-actions{flex-wrap:wrap}
@media(max-width:1023px){.mz-cta{padding:12px}.mz-cta-inner{flex-direction:column-reverse;padding:12px;gap:20px}.mz-cta-left{flex:0 1 auto;padding:8px 0}.mz-cta-right{flex:0 0 auto;width:100%;aspect-ratio:720 / 620}.mz-cta-actions{flex-direction:row;gap:12px}.mz-cta-actions .mz-btn{flex:1}.mz-cta-headline{font-size:32px}.mz-cta-body{font-size:18px}}

.research-details{border-block:1px solid var(--mz-rule);margin:48px 0 0;padding:24px 0}.research-details>summary{cursor:pointer;font-size:20px;color:white;line-height:1.4}.research-details>summary small{display:block;font-size:14px;color:var(--mz-text-secondary);margin-top:8px}.research-details-body{padding-top:16px}.research-details-body .method{margin-top:20px}.learning-detail .paper-excerpt{margin-bottom:32px}

.lee-personalization blockquote p{font-size:20px;font-weight:400;color:var(--mz-text-secondary);line-height:1.5}.lee-personalization h3{font-weight:400!important}.lee-personalization figcaption strong{font-weight:600}
@media(max-width:600px){.lee-personalization blockquote p{font-size:18px}}

/* Evidence-first opening, inspired by the supplied editorial reference. */
.evidence-summary ul{grid-template-columns:repeat(4,minmax(0,1fr));gap:0}.evidence-summary li{padding:10px 24px;border-right:1px solid var(--rule);max-width:none;font-size:15px;line-height:1.45}.evidence-summary li:first-child{padding-left:0}.evidence-summary li:last-child{border-right:0;padding-right:0}.evidence-summary .summary-number{font:46px/1.1 Financier,Georgia,serif;color:var(--lilac);letter-spacing:-1px;display:block;margin:0 0 18px}.evidence-summary li:nth-child(2) .summary-number{font-size:36px;line-height:1.4}.personalization-result{display:flex;align-items:center;gap:28px;margin:28px 0;padding:24px 0;border-block:1px solid var(--rule)}.personalization-result>strong{font:80px/1 Financier,Georgia,serif;color:var(--lilac);letter-spacing:-2px}.personalization-result p{margin:0;font-size:18px;line-height:1.5}.layout article>h2:first-child{margin-top:0}.result-context{font-size:14px;line-height:1.5;color:var(--muted)}
@media(max-width:1023px){.evidence-summary ul{grid-template-columns:1fr 1fr;gap:28px 0}.evidence-summary li{padding:0 20px;border-top:0}.evidence-summary li:nth-child(odd){padding-left:0}.evidence-summary li:nth-child(even){border-right:0}.evidence-summary .summary-number{font-size:40px}.evidence-summary li:nth-child(2) .summary-number{font-size:30px}.personalization-result{gap:20px}.personalization-result>strong{font-size:64px}.personalization-result p{font-size:16px}}
@media(max-width:390px){.evidence-summary li:nth-child(2) .summary-number{font-size:27px}.personalization-result{display:block}.personalization-result p{margin-top:16px}}