/* =========================================================
   FLY HOW IT WORKS — CATEGORY RHYTHM V45
   Refines Discover Categories into a lighter subsection of Ask
   and gives the following FLY-type section a cleaner chapter break.
   ========================================================= */

/* Category subsection becomes a compact inset panel, not a full chapter. */
.guideIntroV26__categories{
  margin-top:26px !important;
  padding:22px 24px !important;
  border-top:0 !important;
  border-radius:24px !important;
  background:#f5f5f7 !important;

  grid-template-columns:minmax(230px,.33fr) minmax(0,.67fr) !important;
  gap:28px !important;
  align-items:center !important;
}

.guideIntroV26__categoriesCopy{
  max-width:330px !important;
}

.guideIntroV26__categoriesTitle{
  font-size:clamp(25px,2.2vw,32px) !important;
  line-height:1.02 !important;
}

.guideIntroV26__categoriesText{
  margin-top:8px !important;
  max-width:30rem !important;
  font-size:13.5px !important;
  line-height:1.44 !important;
  color:#6f6f74 !important;
}

/* Keep all category examples, but lighten them so they read as supporting UI. */
.guideIntroV26__grid{
  gap:clamp(8px,1vw,13px) !important;
  padding:2px 0 !important;
  align-items:flex-start !important;
}

.guideIntroV26__item{
  flex-basis:55px !important;
  min-width:55px !important;
  gap:5px !important;
}

.guideIntroV26__square{
  width:44px !important;
  height:44px !important;
  border-radius:13px !important;
  box-shadow:0 5px 14px rgba(0,0,0,.055) !important;
}

.guideIntroV26__square img{
  width:27px !important;
  height:27px !important;
}

.guideIntroV26__label{
  width:60px !important;
  max-width:60px !important;
  min-height:18px !important;
  font-size:8px !important;
  line-height:1.08 !important;
}

/* Pull the overall Ask intro tighter now that Categories is subordinate. */
.guideIntroV26{
  padding-bottom:42px !important;
}

/* The next concept gets a subtle chapter change instead of another long white run. */
.marketMixV24{
  margin-top:0 !important;
  padding-top:58px !important;
  padding-bottom:68px !important;
  background:#fafafa !important;
  border-top:1px solid #ededf0 !important;
}

.marketMixV24__lead{
  margin-top:12px !important;
}

/* Reduce the vertical runway before the diagram begins. */
.marketMixV24__event{
  margin-top:27px !important;
}

/* ---------- TABLET ---------- */

@media(max-width:980px){
  .guideIntroV26__categories{
    grid-template-columns:minmax(205px,.34fr) minmax(0,.66fr) !important;
    gap:22px !important;
    padding:20px 20px !important;
  }

  .guideIntroV26__categoriesCopy{
    max-width:290px !important;
  }
}

/* ---------- MOBILE ---------- */

@media(max-width:700px){
  .guideIntroV26{
    padding-bottom:34px !important;
  }

  .guideIntroV26__categories{
    margin-top:22px !important;
    padding:18px 18px 16px !important;
    border-radius:20px !important;

    grid-template-columns:1fr !important;
    gap:15px !important;
  }

  .guideIntroV26__categoriesCopy{
    max-width:100% !important;
  }

  .guideIntroV26__categoriesTitle{
    font-size:24px !important;
  }

  .guideIntroV26__categoriesText{
    margin-top:7px !important;
    max-width:100% !important;
    font-size:13px !important;
    line-height:1.42 !important;
  }

  .guideIntroV26__grid{
    width:calc(100% + 18px) !important;
    margin-right:-18px !important;
    padding:1px 18px 4px 0 !important;
    gap:9px !important;
  }

  .guideIntroV26__item{
    flex-basis:50px !important;
    min-width:50px !important;
  }

  .guideIntroV26__square{
    width:42px !important;
    height:42px !important;
    border-radius:12px !important;
  }

  .guideIntroV26__square img{
    width:26px !important;
    height:26px !important;
  }

  .guideIntroV26__label{
    width:54px !important;
    max-width:54px !important;
    font-size:7.5px !important;
  }

  .marketMixV24{
    padding-top:46px !important;
    padding-bottom:56px !important;
  }
}