/* =========================================================
   HOW IT WORKS — FLATICON UICONS
   Content icons only. Shared navigation/footer iconography stays
   untouched so the global chrome remains consistent site-wide.
   ========================================================= */

.how-page .path-membership-section .fi{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:1em;
  height:1em;
  line-height:1;
  font-style:normal;
  vertical-align:middle;
}
.how-page .path-membership-section .fi::before{
  display:block;
  line-height:1;
}

/* Level labels: outline star and rocket as shown in the mockup. */
.how-page .level-kicker-icon{
  display:grid;
  place-items:center;
}
.how-page .level-kicker-icon .how-fi-kicker{
  font-size:22px;
  color:currentColor;
}
.how-page .accelerator-card .level-kicker-icon .how-fi-kicker{
  font-size:23px;
}

/* Hexagonal membership emblems. Keep the dark hexagon, but use the
   matching Flaticon key/rocket glyphs instead of bespoke SVG art. */
.how-page .level-emblem{
  position:relative;
  width:82px;
  height:82px;
  display:grid;
  place-items:center;
  margin:0 auto 2px;
  color:var(--level);
}
.how-page .level-emblem::before{
  content:"";
  position:absolute;
  inset:5px;
  background:#06172a;
  border:1.7px solid var(--level);
  clip-path:polygon(50% 0, 92% 24%, 92% 76%, 50% 100%, 8% 76%, 8% 24%);
  filter:drop-shadow(0 2px 2px rgba(0,0,0,.08));
}
.how-page .level-emblem .how-fi-emblem{
  position:relative;
  z-index:1;
  font-size:35px;
  color:var(--level);
}
.how-page .accelerator-card .level-emblem .how-fi-emblem{
  font-size:37px;
  color:#f7fbff;
}

/* Flaticon checks preserve the original list alignment. */
.how-page .level-benefit-box .check{
  display:grid;
  place-items:start center;
  width:18px;
  min-width:18px;
  color:var(--level);
}
.how-page .level-benefit-box .how-fi-check{
  font-size:15px;
  color:var(--level);
}

/* Real-world example icon in the reference is a report + calculator.
   Build that exact visual language from two Flaticon UIcons. */
.how-page .example-icon{
  position:relative;
  width:64px;
  height:62px;
  display:block;
  justify-self:end;
  color:var(--level);
}
.how-page .example-icon .how-fi-example-file{
  position:absolute;
  left:0;
  top:0;
  font-size:49px;
  color:var(--level);
}
.how-page .example-icon .how-fi-example-calc{
  position:absolute;
  right:0;
  bottom:0;
  z-index:2;
  width:27px;
  height:27px;
  display:grid;
  place-items:center;
  border:2px solid #fff;
  border-radius:4px;
  background:#fff;
  color:var(--level);
  font-size:24px;
  box-shadow:0 1px 2px rgba(0,0,0,.08);
}

/* CTA arrow uses the same clean Flaticon line arrow in both cards. */
.how-page .level-cta .cta-arrow{
  width:26px;
  display:grid;
  place-items:center;
  font-size:inherit;
}
.how-page .level-cta .how-fi-cta-arrow{
  font-size:22px;
  color:#fff;
}

/* Investor journey: home, key, two homes, rocket. */
.how-page .journey-icon{
  position:relative;
  overflow:visible;
}
.how-page .journey-icon .how-fi-journey{
  font-size:37px;
  color:#fff;
}
.how-page .journey-step:nth-of-type(1) .journey-icon .how-fi-journey,
.how-page .journey-step:nth-of-type(2) .journey-icon .how-fi-journey{
  color:#e0a02b;
}
.how-page .journey-step:nth-of-type(3) .journey-icon .how-fi-journey,
.how-page .journey-step:nth-of-type(4) .journey-icon .how-fi-journey{
  color:#fff;
}
.how-page .journey-icon .journey-house-primary{
  position:absolute;
  left:13px;
  bottom:13px;
  font-size:32px;
}
.how-page .journey-icon .journey-house-secondary{
  position:absolute;
  right:10px;
  top:14px;
  font-size:28px;
}
.how-page .journey-star{
  display:grid;
  place-items:center;
  width:30px;
  height:30px;
  flex:0 0 30px;
}
.how-page .journey-star .how-fi-journey-star{
  font-size:25px;
  color:#dfa12e;
}

@media (max-width:760px){
  .how-page .level-emblem{
    width:76px;
    height:76px;
  }
  .how-page .level-emblem .how-fi-emblem{
    font-size:32px;
  }
  .how-page .example-icon{
    width:58px;
    height:58px;
  }
  .how-page .example-icon .how-fi-example-file{font-size:44px;}
  .how-page .example-icon .how-fi-example-calc{
    width:25px;
    height:25px;
    font-size:22px;
  }
}