/* ===========================================================================
   Home page (/).
   Loaded after the shared marketing stylesheets, so it can override them.

   Sections, in document order:
       press        the "as featured in" logo row
       wealth       three product cards
       chat         the conversation collage over a photograph
       compare      three "how Mezzi compares" cards
       testimonial  a single pull quote
       fees         the advisor-fee illustration
   =========================================================================== */

.home-page .mz-hero-text {
  max-width: 840px;
}

.home-page .mz-hero-body {
  max-width: 540px;
}

/* --- Section header ------------------------------------------------------
   Owned per-page rather than shared; see the note in
   css/marketing/elements.css for why. The home page is the only one with a
   desktop size — the other pages set the mobile size only.
   ------------------------------------------------------------------------- */

.mz-section-header {
  font-size: 20px;
  font-weight: 600;
  color: var(--mz-white);
  margin-bottom: 40px;
}

/* ==========================================================================
   Press logos
   ========================================================================== */

.home-press {
  padding: 80px var(--mz-gutter);
}

.home-press-inner {
  max-width: 1320px;
  margin: 0 auto;
}

/* Justified across the full width rather than clustered in the middle, so the
   row reads as a band. The 40px height is what keeps it from reflowing while
   the logos load. */
.home-press-logos {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 40px;
}

.home-press-logos a {
  display: flex;
  align-items: center;
  transition: opacity 0.2s ease;
}
.home-press-logos a:hover { opacity: 0.9; }

/* Each logo keeps its own width and is capped by height, so the marks stay
   optically even rather than all being squeezed to one width. The intrinsic
   width/height in the markup is what makes that safe while they load. */
.home-press-logos img {
  height: auto;
  max-height: 40px;
}

/* ==========================================================================
   "How Mezzi creates wealth" — three product cards
   ========================================================================== */

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

.home-wealth-inner {
  max-width: 1320px;
  margin: 0 auto;
}

.home-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
}

/* Cards rise into place as they scroll in; `is-visible` is set by an
   IntersectionObserver in js/pages/home.js. The staggered delays make the
   three read left-to-right rather than arriving together. */
.home-card {
  display: flex;
  flex-direction: column;
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}
.home-card.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.home-card:nth-child(2) { transition-delay: 0.15s; }
.home-card:nth-child(3) { transition-delay: 0.3s; }

/* Pushes the "Learn more" link to the bottom, so the article links below it
   align across all three cards regardless of description length. */
.home-card .home-learn-more {
  margin-top: auto;
}

.home-card-image {
  display: block;
  position: relative;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  margin-bottom: 40px;
}

/* The pointer itself is replaced by the shared hover-cursor pill; see
   `[data-hover-cursor]` in marketing/elements.css. */
.home-card-image:hover img {
  opacity: 0.7;
  transition: opacity 0.25s ease;
}

.home-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* The title and the copy are one link to the same place the image goes, so
   the whole card body is a target rather than just the picture and the
   "Learn more" row. */
.home-card-title-link {
  text-decoration: none;
  display: block;
}

.home-card-title-link:hover .home-card-title {
  opacity: 0.7;
}

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

.home-card-desc {
  font-size: 20px;
  font-weight: 400;
  line-height: 1.28;
  color: var(--mz-text-secondary);
  margin-bottom: 24px;
}

.home-learn-more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  font-weight: 600;
  color: var(--mz-white);
  margin-bottom: 16px;
}
.home-learn-more img {
  width: 24px;
  height: 24px;
  transition: transform 0.25s ease;
}
.home-learn-more:hover img {
  transform: translateX(4px);
}
.home-learn-more:hover { opacity: 0.7; }

.home-article-link {
  display: block;
  border-top: 1px solid var(--mz-rule);
  padding: 12px 0;
  font-size: 14px;
  font-weight: 400;
  color: var(--mz-text-secondary);
  transition: color var(--mz-transition);
}
.home-article-link:hover { color: var(--mz-white); }

/* ==========================================================================
   Chat collage

   A three-row grid over a photograph: question/answer threads pinned to the
   bottom of the top row, the headline centred in the middle row, and one more
   thread pinned to the top of the bottom row. Threads are placed on a 12
   column grid so they can sit at deliberate, uneven horizontal positions
   without absolute positioning.
   ========================================================================== */

.home-chat {
  padding: 100px var(--mz-gutter);
  overflow: hidden;
}

.home-chat-inner {
  max-width: 1320px;
  margin: 0 auto;
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-rows: 1fr auto 1fr;
  min-height: 660px;
  padding: 60px 40px;
}

.home-chat-bg {
  position: absolute;
  inset: 0;
  background: url('/assets/images/home/chat-bg.d5e7c89f.png') 50% 46% / cover no-repeat;
  opacity: 0.6;
}

/* Darkens top and bottom so the threads keep contrast against the sky and
   the foreground; the middle stays clear for the headline. */
.home-chat-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0.1) 40%, rgba(0,0,0,0.1) 60%, rgba(0,0,0,0.4) 100%);
}

.home-chat-band {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 20px;
}
.home-chat-band--top { align-content: end; padding-bottom: 24px; }
.home-chat-band--bottom { align-content: start; padding-top: 24px; }

.home-chat-headline {
  position: relative;
  z-index: 2;
  grid-column: 1 / -1;
  justify-self: center;
  align-self: center;
  max-width: 1000px;
  padding: 0 40px;
  font-family: var(--mz-font-serif);
  font-weight: 400;
  font-size: 48px;
  line-height: 0.9;
  color: var(--mz-white);
  text-align: center;
}

.home-bubble-group {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-start;
  width: fit-content;
  max-width: 100%;
}

/* The question sits right-aligned above its answer, as in a chat transcript. */
.home-bubble-group .home-bubble {
  align-self: flex-end;
}

/* Column placement, tuned per breakpoint further down. */
.home-bubble-group--1 { grid-column: 1 / 5; }
.home-bubble-group--2 { grid-column: 8 / 13; justify-self: end; }
.home-bubble-group--3 { grid-column: 3 / 8; padding-top: 20px; }

.home-bubble {
  width: fit-content;
  background: var(--mz-lime);
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 100px;
  padding: 10px 20px;
  font-size: 16px;
  font-weight: 600;
  color: var(--mz-ink);
  white-space: nowrap;
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.15));
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.home-bubble.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Answers trail their question by 0.3s, so each exchange reads in order. */
.home-answer {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 366px;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.6s ease 0.3s, transform 0.6s ease 0.3s;
}
.home-answer.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.home-answer-body {
  background: rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: 16px;
  padding: 12px;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.28;
  color: var(--mz-white);
  letter-spacing: -0.16px;
}

/* Below the 1440px container the middle thread would collide with the right
   one, so pull group 2 in by a column. */
@media (min-width: 1024px) and (max-width: 1439px) {
  .home-bubble-group--2 { grid-column: 8 / 13; }
}

/* ==========================================================================
   "How Mezzi compares" — three text cards
   ========================================================================== */

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

.home-compare-inner {
  max-width: 1320px;
  margin: 0 auto;
}

.home-compare-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
}

.home-compare-card {
  display: flex;
  flex-direction: column;
}
.home-compare-card .home-learn-more {
  margin-top: auto;
}

/* `white-space: pre-line` lets the markup choose where the two-line titles
   break, so "To a traditional / advisor" stays balanced at every width. */
.home-compare-card-title {
  font-family: var(--mz-font-serif);
  font-weight: 400;
  font-size: 40px;
  line-height: 1.1;
  color: var(--mz-white);
  margin-bottom: 16px;
  white-space: pre-line;
}

.home-compare-card-desc {
  font-size: 20px;
  font-weight: 400;
  line-height: 1.28;
  color: var(--mz-text-secondary);
  margin-bottom: 24px;
}

/* ==========================================================================
   Testimonial
   ========================================================================== */

.home-testimonial {
  padding: 0 var(--mz-gutter) 100px;
  max-width: var(--mz-page-max);
  margin: 0 auto;
}

.home-testimonial-card {
  border: 1px solid rgba(255, 255, 255, 0.2);
  padding: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Photo and quote travel together; the attribution is pushed to the far end
   by the card's space-between. */
.home-testimonial-left {
  display: flex;
  align-items: center;
  gap: 20px;
  flex: 1;
  max-width: 700px;
  min-width: 0;
  padding-right: 20px;
}

.home-testimonial-photo {
  width: 80px;
  height: 80px;
  object-fit: cover;
  flex-shrink: 0;
}

.home-testimonial-quote {
  flex: 1;
  font-size: 20px;
  font-weight: 400;
  color: var(--mz-white);
  line-height: 1.28;
  letter-spacing: -0.2px;
  min-width: 0;
}

/* `pre` rather than `nowrap`: the separator in the markup is spaced with
   non-breaking spaces that would otherwise collapse. */
.home-testimonial-author {
  font-size: 20px;
  font-weight: 600;
  color: var(--mz-white);
  white-space: pre;
  line-height: 1.28;
  text-align: center;
  letter-spacing: -0.16px;
}

/* ==========================================================================
   Advisor fee illustration

   Two frosted panels: inputs on the left, results and a chart on the right.

   NOTE: the inputs and the Update button are not wired to anything — the
   figures and the chart are static and there is no handler for the button.
   ========================================================================== */

.home-fees {
  /* Greys used only by this panel: the frosted borders and the muted
     "traditional advisor" series. Not part of the site palette. */
  --home-fees-border: #141413;
  --home-fees-input-border: #808073;
  --home-fees-muted: #c2c1b3;

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

.home-fees-inner {
  max-width: var(--mz-page-max);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 40px;
}

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

.home-fees-panels {
  display: flex;
  gap: 2px;
  max-width: 1320px;
}

.home-fees-left {
  width: 400px;
  height: 560px;
  flex-shrink: 0;
  background: var(--mz-panel);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-right: 1px solid var(--home-fees-border);
  padding: 32px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.home-fees-fields {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.home-fees-label {
  display: block;
  font-size: 16px;
  font-weight: 400;
  color: var(--mz-white);
  margin-bottom: 4px;
  letter-spacing: -0.16px;
}

/* Inputs do not inherit the document font, so it is set explicitly. */
.home-fees-input {
  width: 100%;
  height: 40px;
  border: 1px solid var(--home-fees-input-border);
  border-radius: 4px;
  background: transparent;
  color: var(--mz-white);
  font-family: var(--mz-font-sans);
  font-size: 16px;
  padding: 0 12px;
}
.home-fees-input::placeholder {
  color: var(--home-fees-muted);
}

.home-fees-update {
  width: 100%;
}

.home-fees-right {
  flex: 1;
  height: 560px;
  background: var(--mz-panel);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--home-fees-border);
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.home-fees-stats {
  display: flex;
  gap: 12px;
}

/* Each stat is keyed to its series in the chart by the colour of its rule. */
.home-fees-stat {
  padding-left: 12px;
  border-left: 1px solid;
}
.home-fees-stat--manager { border-color: var(--home-fees-muted); }
.home-fees-stat--mezzi { border-color: var(--mz-lilac); }
.home-fees-stat--diff { border-color: var(--mz-lime); }

.home-fees-stat-label {
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 8px;
  letter-spacing: -0.14px;
}
.home-fees-stat--manager .home-fees-stat-label { color: var(--home-fees-muted); }
.home-fees-stat--mezzi .home-fees-stat-label { color: var(--mz-lilac); }
.home-fees-stat--diff .home-fees-stat-label { color: var(--mz-lime); }

.home-fees-stat-value {
  font-size: 24px;
  font-weight: 400;
  color: var(--mz-white);
  letter-spacing: -0.48px;
}

.home-fees-graph {
  flex: 1;
  position: relative;
  background: var(--mz-panel);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* The plot: the chart itself, with the x-axis strip below it. Positioned so
   the difference callout can be placed in percentages of the design's own
   852x400 plot rather than in pixels. */
.home-fees-plot {
  position: relative;
  flex: 1;
  min-height: 0;
}

.home-fees-graph-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* --- Series reveal --------------------------------------------------------
   Both curves grow out of the x-axis when the chart scrolls in. Scaling the
   group about y = 400 -- the foot of the design's own 852x400 plot, which is
   exactly where the axis strip starts -- is what makes them rise from the
   axis rather than fade in place; `transform-box: view-box` keeps that origin
   in the drawing's coordinates however far the plot has been stretched.

   The whole thing hangs off `is-armed`, which js/pages/home.js adds. Without
   JavaScript, or with reduced motion asked for, the class never lands and the
   chart stays drawn, which is what the no-script note in the markup wants.
   The chart sits well below the fold, so the class is always in place before
   the section can be seen.
   ------------------------------------------------------------------------- */
.home-fees-graph.is-armed .home-fees-series {
  transform: scaleY(0);
  transform-box: view-box;
  transform-origin: 0 400px;
  transition: transform 1.1s cubic-bezier(0.22, 1, 0.36, 1);
}
/* The advisor line leads, so the gap between the two is what opens up. */
.home-fees-graph.is-armed .home-fees-series--mezzi { transition-delay: 0.18s; }
.home-fees-graph.is-armed.is-grown .home-fees-series { transform: scaleY(1); }

/* The callout measures the gap between the curves, so it waits for them. */
.home-fees-graph.is-armed .home-fees-callout {
  opacity: 0;
  transition: opacity 0.4s ease 0.9s;
}
.home-fees-graph.is-armed.is-grown .home-fees-callout { opacity: 1; }

/* The lime rule joining the two series at x = 780 over the design's 852x400
   plot, so 780/852 across. `top` and `height` are the defaults only -- the
   calculator overwrites them from the redrawn curves. Percentages, because
   the plot stretches; the dots and the badge below must not. */
.home-fees-callout {
  position: absolute;
  left: 91.5493%;
  top: 21.97%;
  height: 14.17%;
  width: 1px;
  background: var(--mz-lime);
  pointer-events: none;
}

/* Figma strokes the rule with CIRCLE_FILLED caps, which export as 5px dots. */
.home-fees-callout::before,
.home-fees-callout::after {
  content: "";
  position: absolute;
  left: 50%;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--mz-lime);
}
.home-fees-callout::before { top: 0; transform: translate(-50%, -50%); }
.home-fees-callout::after { bottom: 0; transform: translate(-50%, 50%); }

/* Figma's "Differnece badge": a 146x26 pill, radius 100, 4/8 padding, 14px
   type, sitting 7.5px clear of the rule. Real pixels, not a share of the plot,
   because the badge is not part of the stretched drawing. */
.home-fees-callout-badge {
  position: absolute;
  right: 7.5px;
  top: 50%;
  transform: translateY(-50%);
  white-space: nowrap;
  background: var(--mz-lime);
  border-radius: 100px;
  padding: 4px 8px;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.28;
  color: rgba(0, 0, 0, 0.6);
}
.home-fees-callout-badge b {
  font-weight: 600;
  color: var(--mz-ink);
}

.home-fees-xaxis {
  display: flex;
  justify-content: space-between;
  padding: 20px 40px;
  border-top: 1px solid var(--mz-rule);
  font-size: 14px;
  font-weight: 400;
  color: var(--mz-white);
  flex-shrink: 0;
  letter-spacing: -0.14px;
}

.home-fees-disclaimer {
  display: flex;
  gap: 40px;
  max-width: 1320px;
}
.home-fees-disclaimer p {
  flex: 1;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.28;
  color: var(--mz-text-quiet);
  letter-spacing: -0.12px;
}

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

@media (max-width: 1023px) {
  /* The CTA band's type is smaller here than on any other page — the shared
     partial keeps its desktop sizes everywhere else. */
  .mz-cta-headline { font-size: 32px; }
  .mz-cta-body { font-size: 16px; margin-bottom: 20px; }

  .mz-section-header { font-size: 18px; }

  .home-press { padding: 48px var(--mz-gutter-mobile); }
  .home-press-logos { flex-wrap: wrap; gap: 24px 32px; justify-content: center; height: auto; }
  .home-press-logos img { max-height: 28px; }

  .home-wealth { padding: 60px var(--mz-gutter-mobile); }
  .home-cards { gap: 24px; }
  .home-card-image { margin-bottom: 20px; }
  .home-card-desc { font-size: 16px; }

  /* --- Mobile chat: the scroll-stepper --------------------------------
     On desktop the three question/answer groups sit in one grid and are all
     visible. There is no room for that on a phone, so the section instead
     becomes 300vh of scroll room with its contents stuck to the viewport,
     and js/pages/home.js steps through the pairs as the page scrolls past.

     `.mz-page` has `overflow-x: clip` site-wide, which makes it the sticky
     containing block in WebKit and pins `.home-chat-inner` to the page
     rather than the viewport. Clearing it here is what makes the stick
     work on iOS; `.home-chat` takes its own `overflow: clip` so the
     horizontal guarantee is not lost. */
  .mz-page { overflow-x: visible; }
  .home-chat { padding: 0; height: 300vh; position: relative; overflow: clip; }
  .home-chat-inner {
    position: sticky;
    top: 0;
    height: 100vh;
    min-height: auto;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding: 200px 20px 40px;
    overflow: hidden;
  }
  .home-chat-bg { background-position: 62% 58%; }
  .home-chat-bg::after {
    background: linear-gradient(to bottom, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0.2) 30%, rgba(0,0,0,0.2) 60%, rgba(0,0,0,0.5) 100%);
  }

  /* The two bands stop being layout: every group is positioned against
     .home-chat-inner instead, one on top of the other. */
  .home-chat-band { display: contents; }

  .home-chat-headline {
    position: relative; z-index: 2;
    font-size: 28px; max-width: 100%; text-align: left; padding: 0;
    margin-bottom: 0;
    flex-shrink: 0;
  }

  .home-bubble { font-size: 14px; padding: 8px 16px; white-space: normal; max-width: 100%; }

  /* All three groups occupy the same box; only the current one is opaque.
     The desktop grid placement has to be cleared or it fights the absolute
     positioning. */
  .home-bubble-group {
    position: absolute;
    left: 20px;
    right: 20px;
    top: 55%;
    transform: translateY(-50%);
    max-width: none;
    z-index: 3;
    transition: opacity 0.4s ease;
    flex-direction: column;
    gap: 8px;
    align-items: flex-start;
  }
  /* Hidden only once js/pages/home.js has armed the stepper. A page whose
     script never runs shows all three groups stacked, which is cramped but
     legible -- far better than an empty photograph. */
  .home-chat.is-stepping .home-bubble-group { opacity: 0; }
  .home-chat.is-stepping .home-bubble-group.is-step-visible { opacity: 1; }
  .home-bubble-group--1,
  .home-bubble-group--2,
  .home-bubble-group--3 { grid-column: unset; justify-self: unset; padding-top: 0; }

  .home-answer { max-width: 75%; }

  /* The answer trails its question by one step. */
  .home-chat.is-stepping .home-bubble-group .home-answer {
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.3s ease 0.2s, transform 0.3s ease 0.2s;
  }
  .home-chat.is-stepping .home-bubble-group.is-step-answer .home-answer {
    opacity: 1;
    transform: translateY(0);
  }
  .home-answer-body { font-size: 13px; padding: 10px; }

  .home-compare { padding: 60px var(--mz-gutter-mobile); }
  .home-compare-cards { gap: 24px; }

  .home-testimonial { padding: 0 var(--mz-gutter-mobile) 60px; }
  .home-testimonial-card { flex-direction: column; gap: 20px; padding: 20px; }
  .home-testimonial-left { flex-direction: column; align-items: flex-start; max-width: none; padding-right: 0; }
  .home-testimonial-quote { font-size: 20px; }
  .home-testimonial-author { font-size: 20px; text-align: left; align-self: flex-start; }

  .home-fees { padding: 60px var(--mz-gutter-mobile); }
  .home-fees-headline { font-size: 40px; }
  .home-fees-panels { flex-direction: column; gap: 2px; }
  .home-fees-left { width: 100%; height: auto; padding: 12px; gap: 20px; }
  .home-fees-fields { gap: 20px; }
  .home-fees-right { padding: 12px; height: auto; gap: 12px; }
  .home-fees-stats { flex-direction: column; gap: 8px; }
  /* Stacked stats read as label/value rows rather than keyed columns. */
  .home-fees-stat {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-left: none;
    padding-left: 0;
  }
  .home-fees-stat-label { margin-bottom: 0; font-size: 14px; }
  .home-fees-stat-value { font-size: 14px; font-weight: 300; letter-spacing: -0.28px; }
  /* On the desktop layout the plot is sized by the panel it sits in. Here the
     panel has no height to give, so the plot falls back to the 852x400 viewBox's
     own ratio — which the absolutely positioned SVG cannot supply — and `flex`
     grows it from there into the 280px floor on the narrowest screens.

     `width` is stated so the ratio can only ever resolve the height. Below
     about 535px the floor wants the plot taller than the ratio allows at that
     width, and the two readings of that conflict disagree: keep the container
     width and let `flex` override the ratio, or keep the ratio and take the
     width from the grown height — which comes out at 471px whatever the
     viewport, overflowing the panel and being cut off by its `overflow:
     hidden`. That hid the right third of the curve, the callout rule, and all
     but the first few characters of the difference badge. A definite width
     leaves nothing to choose between. */
  .home-fees-plot { aspect-ratio: 852 / 400; width: 100%; }
  .home-fees-graph { min-height: 280px; }
  .home-fees-xaxis { padding: 20px 12px; font-size: 14px; }
  .home-fees-disclaimer { flex-direction: column; gap: 20px; }
}

@media (max-width: 640px) {
  .home-cards { grid-template-columns: 1fr; gap: 40px; }
  .home-card-title { font-size: 32px; }
  .home-compare-cards { grid-template-columns: 1fr; }
  .home-compare-card-title { font-size: 32px; }
}

/* The third thread was flush right, directly under the second one. From here
   up it comes off the right edge and sits a little left of centre.

   Only from here up: below 560px the thread is as wide as the band it is in,
   so there is nothing to move it into, and centre, start and end are all the
   same place. The two margins cancel, so the box keeps the width it would
   have had and the answer wraps exactly as before -- only the centre it is
   measured from moves. */
@media (min-width: 560px) and (max-width: 1023px) {
  .home-bubble-group--3 {
    justify-self: center;
    margin-left: -40px;
    margin-right: 40px;
  }
}

/* The scroll reveals are decorative: with reduced motion requested they land
   in their finished state instead of animating (see js/pages/home.js). */
@media (prefers-reduced-motion: reduce) {
  .home-card,
  .home-bubble,
  .home-answer,
  .home-fees-series,
  .home-fees-callout {
    transition: none;
  }
}