/* ===========================================================================
   Shared section patterns: the hero shell, the closing CTA band, and the
   accordion. Every marketing page opens with a hero and closes with the CTA
   band; three of the five use the accordion. Everything between them is
   page-specific and lives in css/pages/.
   =========================================================================== */

/* ==========================================================================
   Hero

   A fixed 700px stage holding a full-bleed photo with three layers stacked
   over it, then the copy pinned to the bottom edge:

       img.mz-hero-bg     the photograph, object-fit: cover
       .mz-img-grain      noise texture (see base.css)
       .mz-hero-overlay   flat scrim, lifts text contrast everywhere
       .mz-hero-gradient  bottom-weighted gradient, for the copy specifically
       .mz-hero-content   the copy, z-index 2

   These are siblings, so DOM order decides the stacking. Pages do vary that
   order deliberately — putting grain above or below the flat scrim reads
   differently — so check the page's markup before rearranging.
   ========================================================================== */

.mz-hero {
  padding: 20px 20px 0 20px;
}

.mz-hero-inner {
  height: 700px;
  overflow: hidden;
  position: relative;
}

.mz-hero-inner img.mz-hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mz-hero-overlay {
  position: absolute;
  inset: 0;
  background: var(--mz-scrim);
}

.mz-hero-gradient {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, transparent 50%, rgba(0, 0, 0, 0.4) 100%);
}

.mz-hero-content {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 40px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  z-index: 2;
}

.mz-hero-text {
  max-width: 540px;
}

.mz-hero-headline {
  font-family: var(--mz-font-serif);
  font-weight: 400;
  font-size: 72px;
  line-height: 0.85;
  /* -0.02em of 72px, per the design (Figma: letterSpacing PERCENT -2), in the
     absolute px the reference ships. Absolute, so it does not follow font-size:
     the mobile rule drops to 48px and must restate its own value or inherit a
     -3% ratio from this one. */
  letter-spacing: -1.44px;
  color: var(--mz-white);
  margin-bottom: 20px;
}

.mz-hero-body {
  font-size: 16px;
  font-weight: 600;
  line-height: 1.28;
  color: var(--mz-white);
}

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

/* ==========================================================================
   CTA band — the light panel that closes every page: copy on the left,
   a square image on the right.

   Figma: component set `CTA` 65618:184952, variants `Mobile=No` (1440x710)
   and `Mobile=Yes` (380x760).

   The band's height is not chosen: the photo is square and as wide as its
   column, so the column width sets the whole band. Getting that width right
   is the whole trick — see .mz-cta-left.
   ========================================================================== */

.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: 0.9;
  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;
}

/* ==========================================================================
   Accordion — used in the "features" sections of /retirement,
   /tax-optimization and /allocation.

   One item is always open. Opening is driven by both hover and click (see
   js/marketing.js), which also swaps the item's icon between minus and
   chevron. The open/close transition animates `max-height` against a fixed
   200px ceiling rather than a content-derived height; that ceiling has to
   clear the tallest body copy, so check it if longer text is added.
   ========================================================================== */

.mz-accordion {
  max-width: 460px;
}

.mz-accordion-item {
  border-top: 1px solid var(--mz-rule);
}

/* A <button>, so the FAQ is reachable and operable from the keyboard. The
   reset below strips the UA styling; the focus ring is deliberately kept. */
.mz-accordion-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  cursor: pointer;
  appearance: none;
  width: 100%;
  margin: 0;
  border: none;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
}

.mz-accordion-header img {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}

.mz-accordion-header span {
  font-size: 16px;
  font-weight: 600;
  color: var(--mz-white);
  line-height: 1.28;
}

.mz-accordion-body {
  padding: 0 0 0 36px;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.28;
  color: var(--mz-text-secondary);
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--mz-transition-slow), padding var(--mz-transition-slow);
}

.mz-accordion-item.is-active .mz-accordion-body {
  max-height: 200px;
  padding-bottom: 16px;
}


/* ==========================================================================
   Split section — copy on the left, artwork on the right.

   Used identically by /retirement, /tax-optimization and /allocation. The left
   column carries a label, a serif title, a button and an accordion; the right
   column carries a page-specific illustration, which each page styles in its
   own stylesheet.
   ========================================================================== */

.mz-split {
  padding: 100px var(--mz-gutter);
}

.mz-split-inner {
  max-width: 1320px;
  margin: 0 auto;
  display: flex;
  gap: 40px;
  align-items: flex-start;
}

.mz-split-left {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 80px;
  padding-right: 40px;
}

.mz-split-primary {
  max-width: 460px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-start;
}

/* The button sits further from the title than the 8px column gap allows. */
.mz-split-primary .mz-btn {
  margin-top: 32px;
}

.mz-split-label {
  font-size: 16px;
  font-weight: 600;
  color: var(--mz-white);
  line-height: 1.28;
}

.mz-split-title {
  font-family: var(--mz-font-serif);
  font-weight: 400;
  font-size: 40px;
  line-height: 0.9;
  color: var(--mz-white);
}

.mz-split-right {
  flex: 1;
}

/* Do not add a `.mz-split-right img` rule here. Being a descendant selector it
   would reach inside the chat snippets and hit their internal graph artwork and
   account icons — stretching a 1px chart rule to full width and a 24px icon to
   the column's height. No page places a bare <img> in this column; all three
   wrap it in their own component, which styles its own images. */

/* ==========================================================================
   Features section — a wide image above a row of short feature blurbs.

   /retirement and /tax-optimization use the whole thing; /allocation uses only
   the outer padding and container, replacing the image and grid with its own
   interactive panel.

   `.mz-features-image` gets its aspect-ratio from the page, not from here:
   /retirement pins it to 1440/810, /tax-optimization lets it follow the
   image's intrinsic ratio.
   ========================================================================== */

.mz-features {
  padding: 100px var(--mz-gutter);
}

.mz-features-inner {
  max-width: 1320px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 48px;
}

.mz-features-image {
  width: 100%;
  overflow: hidden;
}

.mz-features-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mz-features-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 40px;
}

.mz-feature {
  border-top: 1px solid var(--mz-rule);
  padding-top: 20px;
}

.mz-feature-title {
  font-size: 20px;
  font-weight: 600;
  color: var(--mz-white);
  margin-bottom: 8px;
  line-height: 1.28;
}

.mz-feature-desc {
  font-size: 16px;
  font-weight: 400;
  color: var(--mz-text-secondary);
  line-height: 1.28;
}

/* ==========================================================================
   Mobile

   The hero unstacks: the photo stops being a background layer and becomes a
   340px band in the middle of a plain column — copy above it, buttons below.
   `.mz-hero-content { display: contents }` dissolves the desktop wrapper so
   the text and the actions can be ordered against the image directly.
   ========================================================================== */

@media (max-width: 1023px) {
  .mz-hero { padding: 80px var(--mz-gutter-mobile) var(--mz-gutter-mobile); }

  .mz-hero-inner {
    height: auto;
    min-height: auto;
    overflow: visible;
    display: flex;
    flex-direction: column;
    gap: 40px;
  }

  .mz-hero-inner img.mz-hero-bg {
    position: relative;
    height: 340px;
    order: 2;
  }

  /* The scrim, gradient and grain only make sense over a full-bleed photo. */
  .mz-hero-overlay,
  .mz-hero-gradient,
  .mz-hero-inner > .mz-img-grain { display: none; }

  .mz-hero-content { display: contents; }

  .mz-hero-text {
    max-width: 100%;
    order: 1;
    display: flex;
    flex-direction: column;
    gap: 20px;
  }

  .mz-tag { align-self: flex-start; margin-bottom: -6px; }

  .mz-hero-headline {
    font-size: 48px;
    line-height: 0.85;
    /* The design tracks the mobile headline at -1%, not the desktop -2%
       (Figma Mobile frame 65847:3943). This declaration is required: the
       desktop rule's -1.44px is absolute, so without it the 48px headline
       would carry -3%. */
    letter-spacing: -0.48px;
  }

  .mz-hero-body { font-weight: 400; }

  /* Side by side, not stacked: the two buttons are a pair, and at 12px
     gutters a 50/50 split still clears the tap target on the narrowest
     phone we support. `flex: 1` rather than `width: 50%` so the gap comes
     out of the row instead of overflowing it. */
  .mz-hero-actions {
    flex-direction: row;
    width: 100%;
    gap: 12px;
    order: 3;
  }
  .mz-hero-actions .mz-btn { flex: 1; }

  /* The band tightens to a 12px frame and the columns stack, photo first.
     `flex` is reset on both because the desktop rule gives them a 60px basis,
     which is a column-height in a stacked layout rather than a width. */
  .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; }

  /* Split: the artwork drops below the copy. column-reverse, because the
     artwork comes first in the markup so that it leads on desktop. */
  .mz-split { padding: 20px var(--mz-gutter-mobile) 60px; }
  .mz-split-inner { flex-direction: column-reverse; gap: 20px; }
  .mz-split-left { padding-right: 0; gap: 40px; }
  .mz-split-right { width: 100%; }
  .mz-split-primary { max-width: 100%; gap: 8px; }
  .mz-split-primary .mz-btn { margin-top: 32px; }
  .mz-accordion { max-width: 100%; }

  .mz-features { padding: 60px var(--mz-gutter-mobile); }
  .mz-features-grid { grid-template-columns: 1fr; gap: 20px; }
}