/* ===========================================================================
   Elements: the small reusable pieces every page builds from.
   =========================================================================== */

/* --- Buttons -------------------------------------------------------------
   The design uses six button treatments, which are really three independent
   choices: a size (default 40px / --lg 60px), a fill (solid or outline), and,
   for outlines, which background they sit on. Expressed as a base class plus
   modifiers so those combinations do not have to be enumerated:

       .mz-btn .mz-btn--solid                    small filled
       .mz-btn .mz-btn--outline                  small outline, dark background
       .mz-btn .mz-btn--lg .mz-btn--solid        large filled
       .mz-btn .mz-btn--lg .mz-btn--outline      large outline, dark background
       .mz-btn .mz-btn--lg .mz-btn--outline-on-light
                                                 large outline, light panel

   Solid buttons are identical on both backgrounds — the lilac fill carries
   its own contrast — so there is no --solid-on-light.
   ------------------------------------------------------------------------- */

.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); }

/* --- Tag pill ------------------------------------------------------------
   The lime category label above a hero headline ("Retirement", "Compare").
   ------------------------------------------------------------------------- */

.mz-tag {
  display: inline-block;
  background: var(--mz-lime);
  color: var(--mz-ink);
  font-size: 16px;
  font-weight: 600;
  padding: 6px 16px;
  border-radius: 100px;
  margin-bottom: 20px;
}

/* --- Section header ------------------------------------------------------
   `.mz-section-header` — the small label that introduces a section ("How
   Mezzi creates wealth", "Go deeper with Mezzi") — has no rule in this file.
   Each page owns the whole component, in css/pages/*.css.

   The pages style it differently: the home page
   gives it 20px/600 with a 40px bottom margin, dropping to 18px below 1024px,
   while /retirement, /tax-optimization and /allocation only set the 18px
   mobile size and let the user-agent <h2> default (24px/700, no margin) stand
   above 1024px.

   Hoisting the shared half here would break the pages that differ: a page
   stylesheet loads after this one, so an unconditional desktop rule there
   would also win inside this file's media query and silently change the
   mobile size.
   ------------------------------------------------------------------------- */