/* =========================================================
   FLY HOW IT WORKS — COMPACT CATEGORIES V44
   Treat Discover Categories as a subsection of the Ask flow,
   not a full standalone chapter.
   ========================================================= */

/* Make the category area compact and horizontal on desktop. */
.guideIntroV26__categories{
  width:100% !important;
  margin-top:34px !important;
  padding-top:26px !important;
  border-top:1px solid #e4e4e7 !important;

  display:grid !important;
  grid-template-columns:minmax(240px,.34fr) minmax(0,.66fr) !important;
  gap:34px !important;
  align-items:center !important;

  text-align:left !important;
  background:#fff !important;
}

.guideIntroV26__categoriesCopy{
  width:100% !important;
  max-width:360px !important;
  margin:0 !important;
}

.guideIntroV26__categoriesTitle{
  margin:0 !important;
  font-size:clamp(27px,2.45vw,35px) !important;
  line-height:1 !important;
  letter-spacing:-.045em !important;
}

.guideIntroV26__categoriesText{
  margin:10px 0 0 !important;
  max-width:33rem !important;
  font-size:14px !important;
  line-height:1.48 !important;
}

/* One compact horizontal row of categories. */
.guideIntroV26__grid{
  width:100% !important;
  max-width:none !important;
  margin:0 !important;
  padding:4px 2px 5px !important;

  display:flex !important;
  grid-template-columns:none !important;
  justify-content:flex-end !important;
  justify-self:stretch !important;
  align-items:flex-start !important;
  gap:clamp(10px,1.15vw,15px) !important;

  overflow-x:auto !important;
  overflow-y:hidden !important;
  overscroll-behavior-x:contain !important;
  -webkit-overflow-scrolling:touch !important;
  scrollbar-width:none !important;
  -ms-overflow-style:none !important;
}

.guideIntroV26__grid::-webkit-scrollbar{
  display:none !important;
}

.guideIntroV26__item{
  flex:0 0 58px !important;
  min-width:58px !important;
  display:grid !important;
  justify-items:center !important;
  gap:6px !important;
}

.guideIntroV26__square{
  width:48px !important;
  height:48px !important;
  border-radius:14px !important;
  box-shadow:0 7px 18px rgba(0,0,0,.07) !important;
}

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

.guideIntroV26__label{
  width:64px !important;
  max-width:64px !important;
  min-height:20px !important;
  color:#77777c !important;
  font-size:8.5px !important;
  line-height:1.08 !important;
  font-weight:600 !important;
  text-align:center !important;
}

/* Keep the parent Ask intro from feeling too tall now that the
   category subsection has been condensed. */
.guideIntroV26{
  padding-bottom:58px !important;
}

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

@media(max-width:980px){
  .guideIntroV26__categories{
    grid-template-columns:minmax(220px,.36fr) minmax(0,.64fr) !important;
    gap:26px !important;
  }

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

  .guideIntroV26__grid{
    justify-content:flex-start !important;
  }
}

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

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

  .guideIntroV26__categories{
    margin-top:28px !important;
    padding-top:22px !important;

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

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

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

  .guideIntroV26__categoriesText{
    margin-top:8px !important;
    max-width:34rem !important;
    font-size:13.5px !important;
    line-height:1.45 !important;
  }

  /* Mobile still feels horizontal: one compact category rail,
     not a tall 3x3 block. */
  .guideIntroV26__grid{
    width:calc(100% + 18px) !important;
    margin-right:-18px !important;
    padding:2px 18px 6px 0 !important;
    gap:11px !important;

    justify-content:flex-start !important;
    scroll-snap-type:x proximity !important;
  }

  .guideIntroV26__item{
    flex-basis:54px !important;
    min-width:54px !important;
    scroll-snap-align:start !important;
  }

  .guideIntroV26__square{
    width:44px !important;
    height:44px !important;
    border-radius:13px !important;
  }

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

  .guideIntroV26__label{
    width:58px !important;
    max-width:58px !important;
    font-size:8px !important;
  }
}