/* ===========================================================================
   Retirement page (/retirement).

   Everything structural — the split section, the accordion, the features grid
   — comes from css/marketing/sections.css. What is left here is the chat
   snippet that sits in the split's right column, plus the two places this page
   differs from the shared defaults.
   =========================================================================== */

/* --- Section header ------------------------------------------------------
   The mobile size only. Above 1024px this falls through to the user-agent
   default <h2> (24px/700, no margin) rather than the 20px/600 the home page
   uses; see the note in css/marketing/elements.css.
   ------------------------------------------------------------------------- */

@media (max-width: 1023px) {
  .mz-section-header { font-size: 18px; }
}

/* --- Features image ------------------------------------------------------
   Pinned to the source image's ratio; /tax-optimization leaves this to the
   image's intrinsic ratio instead.
   ------------------------------------------------------------------------- */

.mz-features-image {
  aspect-ratio: 1440 / 810;
}

/* ==========================================================================
   Chat snippet

   A mock conversation floating over the split section's photograph: a
   question, Mezzi's answer, a projection card, and a disabled reply bar.
   Everything is decorative — none of it is interactive.

   The card is sized from the photograph rather than from the viewport. The
   photo is a square that follows the column width, so a card in fixed pixels
   overflows it wherever the column is narrower than the design's 620px stage
   — which is the whole 1024–1255px band. `.retirement-chat` is therefore a
   size container and the card carries one fluid `font-size`; every length
   below is an `em`, so the card, its type and its spacing all scale together.
   The floor stops the type going below 12px on the smallest photographs.
   ========================================================================== */

.retirement-chat {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  container-type: size;
}

.retirement-chat-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.retirement-chat-snippet {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /* 16px on the design's 620px photograph, i.e. 620/16 = 38.75 of them across
     it. cqmin, not cqw — below 1024px the photo becomes a wide fixed-height
     band, and there it is the height the card has to fit inside. */
  font-size: clamp(12px, calc(100cqmin / 38.75), 16px);
  width: 25em;
  max-width: calc(100% - 32px);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  background: var(--mz-scrim-panel);
  padding: 1.75em 1.25em;
  display: flex;
  flex-direction: column;
  /* Figma 65595:123900: the snippet's own stack is 20px. The answer and the
     projection card sit 2px apart because they share `.retirement-chat-response`
     below, not because this gap is small. */
  gap: 1.25em;
  align-items: flex-end;
}

.retirement-chat-question {
  background: var(--mz-lime);
  color: var(--mz-ink);
  font-size: 1em;
  font-weight: 600;
  padding: 0.75em;
  border-radius: 100px;
  white-space: nowrap;
  border: 1px solid rgba(0, 0, 0, 0.12);
  box-shadow: 0 12px 20px rgba(0, 0, 0, 0.12);
  line-height: 1.28;
  letter-spacing: -0.01em;
}

/* Sender + answer + projection card. The design groups all three so the card
   follows the answer by 2px, while the question above and the reply bar below
   keep the snippet's 20px rhythm. */
.retirement-chat-response {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.125em;
  padding-bottom: 0.75em;
}

.retirement-chat-response-body {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.5em;
}

.retirement-chat-sender {
  font-size: 1em;
  font-weight: 600;
  color: var(--mz-white);
  line-height: 1.28;
  letter-spacing: -0.01em;
}

.retirement-chat-answer {
  background: var(--mz-panel);
  border-radius: 1em;
  padding: 0.75em;
  font-size: 1em;
  font-weight: 400;
  color: var(--mz-white);
  line-height: 1.28;
  letter-spacing: -0.01em;
}

/* --- Projection card ----------------------------------------------------- */

.retirement-chat-card {
  background: var(--mz-panel);
  border-radius: 1em;
  padding: 1em 0.75em 0.75em;
  display: flex;
  flex-direction: column;
  gap: 0.5em;
  width: 100%;
}

.retirement-chat-card-title {
  font-size: 0.75em;
  font-weight: 600;
  color: var(--mz-white);
  line-height: 1.28;
  letter-spacing: -0.01em;
}

/* The chart is assembled from two absolutely positioned SVGs plus text labels.
   The design places them at fixed pixel offsets inside the 376px-wide graph
   you get from the 400px snippet; they are expressed here as percentages of
   that box so the chart stays proportional when the snippet is narrower than
   its design width, instead of overflowing its own clipping box. */
.retirement-chat-graph {
  background: var(--mz-panel);
  border-radius: 0.75em;
  width: 100%;
  height: 8.375em;
  position: relative;
  overflow: hidden;
}

.retirement-chat-graph img {
  position: absolute;
  max-width: none;
}

.retirement-chat-graph-area {
  left: 50%;
  transform: translateX(calc(-50% + 0.5px));
  top: 17.91%;
  width: 81.65%;
  height: 58.21%;
}

.retirement-chat-graph-line {
  left: 9%;
  top: 15.67%;
  width: 1px;
  height: 60.45%;
  transition: left 1.5s cubic-bezier(0.25, 0.1, 0.25, 1);
}

.retirement-chat-graph.is-animated .retirement-chat-graph-line {
  left: 68.88%;
}

.retirement-chat-graph-label {
  position: absolute;
  font-size: 0.625em;
  font-weight: 600;
  color: var(--mz-white);
  line-height: 1.28;
  top: 84.33%;
  letter-spacing: -0.01em;
}

.retirement-chat-graph-badge {
  position: absolute;
  background: var(--mz-lime);
  color: var(--mz-ink);
  font-size: 0.625em;
  font-weight: 600;
  padding: 0 0.4em;
  border-radius: 1em;
  line-height: 1.28;
  left: 5%;
  top: 8.209%;
  letter-spacing: -0.01em;
  opacity: 0;
  transition: left 1.5s cubic-bezier(0.25, 0.1, 0.25, 1), opacity 0.3s ease;
}

.retirement-chat-graph.is-animated .retirement-chat-graph-badge {
  left: 64.89%;
  opacity: 1;
}

/* --- Reply bar -----------------------------------------------------------
   Decorative only: held at 0.8 opacity to read as disabled.
   ------------------------------------------------------------------------- */

.retirement-chat-reply {
  width: 100%;
  height: 2.75em;
  background: var(--mz-panel);
  border-radius: 100px;
  display: flex;
  align-items: center;
  padding: 0.75em 0.5em 0.75em 0.75em;
  gap: 0.625em;
  opacity: 0.8;
}

.retirement-chat-reply-text {
  flex: 1;
  font-size: 1em;
  font-weight: 400;
  color: var(--mz-text-secondary);
  opacity: 0.6;
  letter-spacing: -0.01em;
}

.retirement-chat-reply-send {
  width: 2em;
  height: 2em;
  background: var(--mz-ink);
  border-radius: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* Figma's `arrow-up` at its drawn size: a 24px icon inset in the 32px
   button, i.e. 4px of padding all round. */
.retirement-chat-reply-send svg {
  width: 1.5em;
  height: 1.5em;
}

/* --- Reveal --------------------------------------------------------------
   Each part of the snippet rises into place 150ms after the one before it;
   the stagger is applied in js/pages/retirement.js.
   ------------------------------------------------------------------------- */

.retirement-chat-anim {
  opacity: 0;
  transform: translateY(0.75em);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.retirement-chat-anim.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ==========================================================================
   "Go deeper" panel

   Built from the Figma frame "Retirement deeper" (node 65595:123875 in the
   Mezzi Design System file). It replaces a 6.4 MB flat PNG export of that same
   frame — which could not reflow, carried stale figures, and rendered its text
   as pixels.

   Geometry from the design, on its 1320 x 742.5 stage:

       accounts panel   400 wide, content height (lands at ~439)
       projection panel 421 x 439
       both vertically centred, 1px apart, the pair centred horizontally

   The 1px gap is deliberate: both panels are the same translucent black, so
   the photograph showing through reads as a hairline divider between them.

   Sizes below map to the design's tokens — sz-4/8/12/20/28/32,
   radius/rd-card 20px, ts-16/48/100 — via the shared token names where one
   exists.
   ========================================================================== */

.retirement-deeper {
  position: relative;
  width: 100%;
  aspect-ratio: 1320 / 742.5;
  overflow: hidden;
  /* The panels below 1024px size themselves from this box rather than from the
     viewport, so the pair scales with the photograph it sits on. inline-size
     only: the height is the aspect-ratio's business. */
  container-type: inline-size;
}

.retirement-deeper-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.retirement-deeper-panels {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  /* A hairline of photograph between the panels, so it stays 1px at every
     scale rather than growing with the em below. */
  gap: 1px;
  max-width: calc(100% - 40px);
  /* Every length inside the two panels is an em of this one size, so the pair
     shrinks as a unit instead of reflowing. 16px is the design's own base;
     the mobile block below is the only place it changes. */
  font-size: 16px;
}

/* Both panels share the frosted-black treatment. */
.retirement-deeper-accounts,
.retirement-deeper-projection {
  background: var(--mz-scrim-panel);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

.retirement-deeper-accounts {
  width: 25em;
  flex-shrink: 0;
  padding: 1.75em 1.25em;
  display: flex;
  flex-direction: column;
  gap: 2em;
}

.retirement-deeper-projection {
  width: 26.3125em;
  height: 27.4375em;
  flex-shrink: 0;
  padding: 1.75em 0.75em;
  display: flex;
  flex-direction: column;
}

/* The projection panel's contents sit on their own translucent card, inset
   from the panel — the accounts panel has no equivalent inner card. */
/* Insets taken from the design: the header sits 20px from the left edge and
   is 360px wide; the stats row sits 15px from the left, is 365px wide, and
   clears the bottom by 15px. Expressed as card padding plus a 5px nudge on the
   header rather than four absolute offsets. */
.retirement-deeper-projection-inner {
  flex: 1;
  min-height: 0;
  background: var(--mz-panel);
  border-radius: 1.25em;
  padding: 1.625em 1.0625em 0.9375em 0.9375em;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
}

.retirement-deeper-projection-inner .retirement-deeper-header {
  padding-left: 0.3125em;
}

/* --- Shared header: neon eyebrow above a serif figure -------------------- */

.retirement-deeper-header {
  display: flex;
  flex-direction: column;
  gap: 0.75em;
}

.retirement-deeper-eyebrow {
  font-size: 1em;
  font-weight: 600;
  line-height: 1.28;
  color: var(--mz-lime);
}

.retirement-deeper-total {
  font-family: var(--mz-font-serif);
  font-weight: 400;
  font-size: 3em;
  line-height: 0.9;
  color: var(--mz-white);
}

.retirement-deeper-years {
  font-family: var(--mz-font-serif);
  font-weight: 400;
  font-size: 6.25em;
  line-height: 0.9;
  /* -0.02em in em so the mobile font-size override rescales it. */
  letter-spacing: -0.02em;
  color: var(--mz-white);
  /* Design value. Georgia fits "60 years" in the panel's 360px at this size;
     the nowrap guards against a substitute face that would not. */
  white-space: nowrap;
}

/* --- Account rows -------------------------------------------------------- */

.retirement-deeper-rows {
  display: flex;
  flex-direction: column;
  gap: 0.25em;
  list-style: none;
}

.retirement-deeper-row {
  display: flex;
  align-items: center;
  gap: 0.75em;
  padding: 0.5em 1.25em 0.5em 0.5em;
  border-radius: 1.25em;
  background: var(--mz-panel);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.retirement-deeper-row.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.retirement-deeper-row-icon {
  flex-shrink: 0;
  width: 2.25em;
  height: 2.25em;
  border-radius: 0.75em;
  background: var(--mz-panel);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Icons are normalised to a 24 box carrying an 18px glyph at 1.5px stroke,
   which is how the design system draws them. */
.retirement-deeper-row-icon img {
  width: 1.5em;
  height: 1.5em;
}

.retirement-deeper-row-name {
  flex: 1;
  min-width: 0;
  font-size: 1em;
  font-weight: 600;
  line-height: 1.28;
  color: var(--mz-white);
}

.retirement-deeper-row-value {
  flex-shrink: 0;
  font-size: 1em;
  font-weight: 400;
  line-height: 1.28;
  color: var(--mz-white);
  text-align: right;
  white-space: nowrap;
}

/* --- Projection stats ---------------------------------------------------- */

.retirement-deeper-stats {
  display: flex;
  gap: 0.25em;
  border-radius: 1.25em;
  overflow: hidden;
}

.retirement-deeper-stat {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.25em;
  padding: 0.75em;
  background: var(--mz-panel);
}

.retirement-deeper-stat-label {
  font-size: 1em;
  font-weight: 600;
  line-height: 1.28;
  color: var(--mz-white);
}

.retirement-deeper-stat-value {
  font-size: 1em;
  font-weight: 400;
  line-height: 1.28;
  color: var(--mz-lime);
}

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

@media (max-width: 1023px) {
  .mz-features-image { aspect-ratio: 1 / 1; }

  /* A fixed-height band rather than a square, so the photo is stretched to
     fill it rather than keeping the desktop aspect ratio. */
  .retirement-chat { aspect-ratio: auto; height: 440px; overflow: hidden; }
  img.retirement-chat-bg { position: absolute; inset: 0; height: 100%; }

  /* The grain reads as noise at this size, so it is dropped. */
  .retirement-chat > .mz-img-grain { display: none; }

  /* --- "Go deeper" panel ---------------------------------------------------
     The desktop layout is two fixed-width panels overlaid on a 1320x742.5
     photograph. Below 1024px the photo stops being a stage and becomes a
     banner, but the pair stays side by side: stacking them here is what made
     the accounts panel a 928px-wide slab with the name and the value at
     opposite ends of the screen.

     Instead the em base shrinks and the two panels come down together, keeping
     the design's proportions. 51.3125em is the pair's own width (25 + 26.3125)
     and the 1px is the hairline between them, so the divisor is exactly what
     the two panels need. The 12px floor is where the type stops being worth
     reading; the block below stacks them from there down.
     ------------------------------------------------------------------------- */
  /* Sticky scroll-stepper: photo stays pinned, panels swap as user scrolls */
  .retirement-deeper {
    aspect-ratio: auto;
    min-height: auto;
    height: 200vh;
    position: relative;
    overflow: clip;
  }

  .retirement-deeper-bg {
    position: sticky;
    top: 0;
    height: 100vh;
    width: 100%;
    object-fit: cover;
  }

  .retirement-deeper-panels {
    position: sticky;
    top: 0;
    height: 100vh;
    left: auto;
    transform: none;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    max-width: 100%;
    padding: 20px;
    margin-top: -100vh;
    font-size: 16px;
  }

  .retirement-deeper-accounts,
  .retirement-deeper-projection {
    width: calc(100% - 40px);
    flex-shrink: 1;
    position: absolute;
    left: 20px;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    transition: opacity 0.4s ease;
  }

  .retirement-deeper-accounts { opacity: 1; }
  .retirement-deeper-projection {
    height: auto;
    min-height: 300px;
    opacity: 0;
  }

  .retirement-deeper-accounts.is-panel-hidden { opacity: 0; }
  .retirement-deeper-projection.is-panel-visible { opacity: 1; }

  /* The 100px display figure is the first thing to break; it has to clear the
     panel's own padding at 360px. */
  .retirement-deeper-years {
    font-size: 4em;
    line-height: 0.86;
  }

  .retirement-deeper-total { font-size: 2.5em; }

  .retirement-deeper-projection-inner {
    gap: 2.5em;
    padding: 1.25em 1em 1em;
  }

  .retirement-deeper-stats { flex-direction: column; }
}

/* The snippet reveal is decorative: with reduced motion requested it lands in
   its finished state instead of animating (see js/pages/retirement.js). */
@media (prefers-reduced-motion: reduce) {
  .retirement-chat-anim {
    transition: none;
  }
}