/* ===========================================================================
   Tax optimization page (/tax-optimization).

   The split section, the accordion and the features grid all come from
   css/marketing/sections.css. Page-specific here: the chat snippet in the
   split's right column, and the "go deeper" bar chart.
   =========================================================================== */

/* --- Section header ------------------------------------------------------
   The mobile size only. Above 1024px this falls through to the user-agent
   default <h2> 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; }
}

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

   A decorative mock conversation over the split section's photograph. The
   answer includes a small breakdown card whose bars grow from zero when the
   section scrolls in.

   Unlike /retirement, `.mz-features-image` is left without an aspect-ratio
   here, so the features image follows its own intrinsic ratio.
   ========================================================================== */
.tax-chat {
  position: relative;
  width: 100%;
  aspect-ratio: 1/1;
  overflow: hidden;
  container-type: size;
}
.tax-chat-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.tax-chat-snippet {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /* Sized from the photograph, not the viewport — see the note on
     .retirement-chat-snippet, which this mirrors. 16px on the design's 620px
     stage is 100cqmin/38.75, floored so the type never drops below 12px;
     every length below is an em of it. */
  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;
  gap: 0.5em;
  align-items: flex-end;
}
.tax-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);
  letter-spacing: -0.01em;
}
.tax-chat-response {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.125em;
  padding-bottom: 0;
}
.tax-chat-sender {
  font-size: 1em;
  font-weight: 600;
  color: var(--mz-white);
  margin-bottom: 0.375em;
  letter-spacing: -0.01em;
}
.tax-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;
}
.tax-chat-card {
  background: var(--mz-panel);
  border-radius: 1em;
  padding: 1em 0.75em 1.5em;
  display: flex;
  flex-direction: column;
  gap: 0.75em;
  width: 100%;
}
.tax-chat-card-row {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.tax-chat-card-row-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.5em 0;
  font-size: 1em;
  color: var(--mz-white);
  line-height: 1.28;
  letter-spacing: -0.01em;
}
.tax-chat-card-label {
  font-weight: 600;
  flex: 1;
}
.tax-chat-card-value {
  font-weight: 400;
  text-align: right;
  white-space: nowrap;
}
/* The unfilled part of the bar. Figma's "Graph" track is a white@0.10 pill;
   it had no background at all here, so only the lime fill was visible. */
.tax-chat-card-bar {
  height: 0.25em;
  border-radius: 100px;
  overflow: hidden;
  width: 100%;
  background: var(--mz-panel);
}
.tax-chat-card-bar-fill {
  height: 0.25em;
  border-radius: 100px;
  background: var(--mz-lime);
  width: 0 !important;
  transition: width 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.tax-chat-card-bar-fill.is-grown {
  width: var(--bar-width) !important;
}
.tax-chat-reply {
  display: flex;
  align-items: center;
  gap: 0.625em;
  background: var(--mz-panel);
  border-radius: 100px;
  padding: 0.75em 0.5em 0.75em 0.75em;
  height: 2.75em;
  width: 100%;
  opacity: 0.8;
}
.tax-chat-reply-text {
  flex: 1;
  font-size: 1em;
  color: var(--mz-text-secondary);
  opacity: 0.6;
  letter-spacing: -0.01em;
}
.tax-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;
}
.tax-chat-reply-send svg { width: 1.5em; height: 1.5em; }

/* Chat animation */
.tax-chat-anim {
  opacity: 0;
  transform: translateY(0.75em);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.tax-chat-anim.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ==========================================================================
   "Go deeper" bar chart

   Three bars — starting position, projected without Mezzi, projected with
   Mezzi — growing from zero when the section scrolls in.

   Each bar is a fixed-height block inside a wrapper that animates its own
   height from 0 with `overflow: hidden`, so the bar is revealed rather than
   stretched: the label and value inside keep their size and stay pinned to
   the bar's bottom edge throughout. Growing the bar itself would scale its
   contents instead.
   ========================================================================== */
.tax-deeper {
  position: relative;
  width: 100%;
  aspect-ratio: 1440/810;
  overflow: hidden;
  min-height: 500px;
}
.tax-deeper-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.tax-deeper-card {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 784px;
  max-width: calc(100% - 32px);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  background: var(--mz-scrim-panel);
  padding: 28px 20px;
  display: flex;
  flex-direction: column;
}
.tax-deeper-header {
  display: flex;
  flex-direction: column;
  gap: 12px;
  /* No gap between the header and the bars: Figma's header ends at y=103 and
     the bars start at y=103. A 20px gap makes the card 458 tall against 438. */
}
.tax-deeper-label {
  font-size: 16px;
  font-weight: 600;
  color: var(--mz-lime);
  letter-spacing: -0.16px;
}
.tax-deeper-title {
  font-family: var(--mz-font-serif);
  font-weight: 400;
  font-size: 48px;
  line-height: 0.9;
  color: var(--mz-white);
  letter-spacing: -0.48px;
}
.tax-deeper-bars {
  display: flex;
  gap: 20px;
  align-items: flex-end;
  width: 100%;
  height: 307px;
}
/* Also the query container for the label and value inside it: below 1024px
   the three columns get narrow enough that a fixed type size runs off the
   end of the bar, and the bar's own width is what decides whether it fits. */
.tax-deeper-bar-wrap {
  flex: 1;
  container-type: inline-size;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  height: 0;
  transition: height 1s cubic-bezier(0.22, 1, 0.36, 1);
}
.tax-deeper-bar-wrap--start.is-grown { height: 201px; }
.tax-deeper-bar-wrap--without.is-grown { height: 251px; }
.tax-deeper-bar-wrap--with.is-grown { height: 307px; }
.tax-deeper-bar {
  width: 100%;
  border-radius: 20px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  /* Figma's 1px inside stroke. Inset shadow so the column keeps its exact
     201 / 251 / 307 height, which the growth animation depends on. */
  box-shadow: inset 0 0 0 1px var(--mz-rule);
}
.tax-deeper-bar--start {
  background: var(--mz-panel);
  height: 201px;
}
.tax-deeper-bar--without {
  background: var(--mz-ink);
  height: 251px;
}
.tax-deeper-bar--with {
  background: var(--mz-lime);
  color: var(--mz-ink);
  height: 307px;
}
.tax-deeper-bar-label {
  font-size: 16px;
  font-weight: 600;
  white-space: nowrap;
  letter-spacing: -0.16px;
}
.tax-deeper-bar--start .tax-deeper-bar-label,
.tax-deeper-bar--without .tax-deeper-bar-label {
  color: var(--mz-lime);
}
.tax-deeper-bar-value {
  font-size: 32px;
  font-weight: 600;
  line-height: 1.28;
  letter-spacing: -0.32px;
}
.tax-deeper-bar--start .tax-deeper-bar-value,
.tax-deeper-bar--without .tax-deeper-bar-value {
  color: var(--mz-white);
}

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

   The bar chart keeps its choreography but every height is reduced; the
   grown heights below must stay in step with the .is-grown wrapper heights.
   ========================================================================== */

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

  .tax-chat { aspect-ratio: auto; height: 420px; }

  .tax-deeper { aspect-ratio: auto; min-height: 400px; }
  /* The card was 24px in from each side and padded another 16px, which left a
     320px screen with 26px of usable width per column — the labels and the
     figures both ran off the end. It now takes as much of the width as it can
     and the three columns share what is left. */
  .tax-deeper-card { width: calc(100% - 8px); padding: 20px 8px; }
  .tax-deeper-title { font-size: 32px; }
  .tax-deeper-bars { height: 210px; gap: 6px; }
  .tax-deeper-bar-wrap--start.is-grown { height: 140px; }
  .tax-deeper-bar-wrap--without.is-grown { height: 170px; }
  .tax-deeper-bar-wrap--with.is-grown { height: 210px; }
  .tax-deeper-bar--start { height: 140px; }
  .tax-deeper-bar--without { height: 170px; }
  .tax-deeper-bar--with { height: 210px; }
  .tax-deeper-bar { border-radius: 14px; padding: 14px 6px; }

  /* The label keeps the design's size and wraps instead of shrinking -- its
     longest word clears the narrowest column at 13px, so there is no reason
     to make it smaller. Only the figure has to scale, because "$100,000"
     cannot break: it runs about 4.5x its own font size, against a column that
     gives it its own width less the padding. */
  .tax-deeper-bar-label {
    font-size: 13px;
    white-space: normal;
  }
  .tax-deeper-bar-value { font-size: clamp(12px, 18cqi, 22px); }
}

/* The snippet, the savings bars and the "Go deeper" chart are decorative: with
   reduced motion requested they land in their finished state instead of
   animating (see js/pages/tax.js). */
@media (prefers-reduced-motion: reduce) {
  .tax-chat-anim,
  .tax-chat-card-bar-fill,
  .tax-deeper-bar-wrap {
    transition: none;
  }
}