/* ============================================================
 * maisy-flow.css — "How it works" section restyled to match the
 * reference recording: a light periwinkle panel holding three
 * deep-navy / plum gradient cards that flip to a light face,
 * scale up and reveal an "Explore More" link on hover.
 *
 * Every value below was sampled from the reference video frames
 * (1230x550), so the colours, the gradient profile, the 1.12
 * hover scale and the type sizes are measured, not guessed.
 *
 * Purely additive: every rule is scoped under .mx-flow, which is
 * added from script, so nothing else on the page is affected and
 * no authored copy changes.
 * ========================================================== */

.svc-flow.mx-flow{
  /* ---- card palette: two colours, nothing in between ----
     The earlier four-hue ramp was what banded: hand-placed stops across
     magenta -> purple -> blue -> indigo each mark a point where the rate
     of colour change jumps, and the eye reads every one of those as an
     edge. A single magenta-to-blue pair has no interior stops to band on,
     and the straight sRGB line between these two runs through a rich
     purple (both have almost no green), so it never greys out mid-blend. */
  --mxf-glow: #C4006F;   /* glow centre, on the card's top edge */
  --mxf-base: #0005B2;   /* card base */

  --mxf-navy:      var(--mxf-base);
  --mxf-plum:      var(--mxf-glow);
  --mxf-panel:     #ECF1FD;   /* section panel */
  --mxf-title-on:  #172949;   /* title once the card is light */
  --mxf-body-on:   #434E60;
  --mxf-icon-on:   #2E3B52;
  --mxf-link:      #3F63BE;   /* "Explore More" on the light face */
  --mxf-ease:      cubic-bezier(.22,.8,.3,1);

  background:var(--mxf-panel);
  /* The reference panel is full-bleed with a soft corner, so the
     page colour shows as a small wedge above each top corner. */
  border-radius:16px;
}

/* ---- heading: gradient on the lead clause, as in the reference ---- */
.mx-flow .section-head h2 .mx-g{
  background:linear-gradient(90deg,#E35BA0 0%,#B451A8 34%,#6A57AC 64%,#2E50BE 100%);
  -webkit-background-clip:text;
          background-clip:text;
  color:transparent;
}

/* ---- the row ---- */
.mx-flow .flow-steps{
  grid-template-columns:repeat(3,1fr);
  /* wide enough that a card at 1.12 never collides with its neighbour */
  gap:42px;
  margin-top:12px;
}

/* ---- the card ---- */
.mx-flow .flow-card{
  position:relative;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  min-height:300px;
  padding:38px 30px 30px;
  border:0;
  border-radius:16px;
  background:var(--mxf-navy);
  box-shadow:none;
  transition:transform .45s var(--mxf-ease), opacity .5s ease;
  will-change:transform;
}

/* The plum glow and the light face are separate layers so they can
   cross-fade; animating a gradient directly is not interpolable. */
.mx-flow .flow-card::before,
.mx-flow .flow-card::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  pointer-events:none;
  transition:opacity .45s ease;
}

/* Glow geometry traced off the reference frames: the colour peaks on the
   card's top edge at 37% across and falls away as it travels down and out.
   The shape of that falloff now comes from a single interpolation hint
   (the bare `38%`) rather than from intermediate colour stops — it moves
   the 50/50 blend toward the glow, so the magenta drops off quickly and
   then eases into the blue on a long, flat tail. A flat tail is what
   hides the ellipse's edge; with evenly spaced stops the gradient still
   had slope when it hit the base and the boundary showed as a ring.
   The radii are widened past the measured 65%/49% for the same reason:
   the blend finishes beyond the card's corners instead of inside them. */
.mx-flow .flow-card::before{
  background:radial-gradient(78% 62% at 37% -4%,
    var(--mxf-glow) 0%, 38%, var(--mxf-base) 100%);
  opacity:1;
}

/* The light face, revealed on hover. */
.mx-flow .flow-card::after{
  background:linear-gradient(135deg,#EBEBEB 0%,#FAFAFA 100%);
  opacity:0;
}

.mx-flow .flow-card > *{position:relative; z-index:1;}

.mx-flow .flow-card:hover,
.mx-flow .flow-card:focus-within{
  transform:scale(1.12);
  z-index:5;
}
.mx-flow .flow-card:hover::after,
.mx-flow .flow-card:focus-within::after{opacity:1;}

/* ---- icon: bare outline glyph, no tile ---- */
.mx-flow .flow-card .fc-ico{
  width:auto; height:auto;
  background:none;
  border-radius:0;
  display:block;
  margin:0 0 10px;
}
.mx-flow .flow-card .fc-ico .material-icons{
  font-family:'Material Icons Outlined','Material Icons';
  font-size:26px;
  color:#FFFFFF;
  animation:none;              /* the page's bob would fight the scale */
  transition:color .4s ease;
}
.mx-flow .flow-card:hover .fc-ico .material-icons,
.mx-flow .flow-card:focus-within .fc-ico .material-icons{color:var(--mxf-icon-on);}

/* ---- step label ----
   Lightened from the reference's pink now that it sits on the hero's
   magenta rather than a near-black navy, so it keeps its contrast where
   the glow is strongest. */
.mx-flow .flow-card .num{
  color:#F2A6D8;
  transition:color .4s ease;
}
.mx-flow .flow-card:hover .num,
.mx-flow .flow-card:focus-within .num{color:#B451A8;}

/* ---- title + body ---- */
.mx-flow .flow-card h3{
  font-size:20px;
  font-weight:900;
  margin:6px 0 12px;
  color:#FFFFFF;
  transition:color .4s ease;
}
.mx-flow .flow-card:hover h3,
.mx-flow .flow-card:focus-within h3{color:var(--mxf-title-on);}

.mx-flow .flow-card p{
  font-size:14.5px;
  font-weight:600;
  line-height:1.72;
  color:#CFDEEE;
  margin:0;
  transition:color .4s ease;
}
.mx-flow .flow-card:hover p,
.mx-flow .flow-card:focus-within p{color:var(--mxf-body-on);}

/* ---- "Explore More", pinned to the card's bottom edge ---- */
.mx-flow .mx-more{
  margin-top:auto;
  padding-top:20px;
  align-self:flex-start;
  display:inline-flex;
  align-items:center;
  gap:7px;
  font-size:13.5px;
  font-weight:800;
  text-decoration:none;
  color:#FFFFFF;
  opacity:0;
  transform:translateY(6px);
  transition:opacity .4s ease, transform .4s var(--mxf-ease), color .4s ease;
}
.mx-flow .flow-card:hover .mx-more,
.mx-flow .flow-card:focus-within .mx-more{
  opacity:1;
  transform:none;
  color:var(--mxf-link);
}
.mx-flow .mx-more svg{width:14px; height:14px;}

/* ---- touch devices: there is no hover, so the deck stays dark and
        the link is simply always legible ---- */
@media (hover:none){
  .mx-flow .flow-card:hover,
  .mx-flow .flow-card:focus-within{transform:none;}
  .mx-flow .flow-card:hover::after,
  .mx-flow .flow-card:focus-within::after{opacity:0;}
  .mx-flow .mx-more{opacity:1; transform:none; color:#FFFFFF;}
  .mx-flow .flow-card:hover h3,
  .mx-flow .flow-card:hover p,
  .mx-flow .flow-card:hover .num,
  .mx-flow .flow-card:hover .fc-ico .material-icons{color:inherit;}
  .mx-flow .flow-card:hover h3{color:#FFFFFF;}
  .mx-flow .flow-card:hover p{color:#CFDEEE;}
  .mx-flow .flow-card:hover .num{color:#D98BC8;}
  .mx-flow .flow-card:hover .fc-ico .material-icons{color:#FFFFFF;}
}

/* ---- smaller screens ---- */
@media (max-width:991px){
  .mx-flow .flow-steps{gap:26px;}
  .mx-flow .flow-card{min-height:0; padding:28px 26px;}
  /* A scaled card has nowhere to grow into in one column. */
  .mx-flow .flow-card:hover,
  .mx-flow .flow-card:focus-within{transform:none;}
}
@media (max-width:820px){
  .mx-flow .flow-steps{grid-template-columns:1fr;}
}

@media (prefers-reduced-motion: reduce){
  .mx-flow .flow-card,
  .mx-flow .flow-card::before,
  .mx-flow .flow-card::after,
  .mx-flow .mx-more,
  .mx-flow .flow-card h3,
  .mx-flow .flow-card p,
  .mx-flow .flow-card .num,
  .mx-flow .flow-card .fc-ico .material-icons{transition:none !important;}
  .mx-flow .flow-card:hover,
  .mx-flow .flow-card:focus-within{transform:none;}
}