
/* FLY How It Works — Guided Marketplace Flow V2
   Intentionally external/global so these rules cannot be lost to Astro style scoping. */

.marketAskV2,
.marketCategoriesV2{
  box-sizing:border-box;
}

.marketAskV2 *,
.marketCategoriesV2 *{
  box-sizing:border-box;
}

.marketAskV2{
  background:#fff;
  padding:92px 24px 96px;
}

.marketAskV2__inner{
  width:min(100%,1040px);
  margin:0 auto;
  display:grid;
  grid-template-columns:minmax(0,.88fr) minmax(420px,1.12fr);
  gap:72px;
  align-items:center;
}

.marketAskV2__copy{
  max-width:470px;
}

.marketAskV2__title{
  margin:0;
  color:#0a0a0a;
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","Helvetica Neue",Arial,sans-serif;
  font-size:clamp(48px,5.2vw,70px);
  line-height:.94;
  letter-spacing:-.052em;
  font-weight:700;
}

.marketAskV2__lead{
  margin:18px 0 0;
  max-width:29rem;
  color:#707075;
  font-size:18px;
  line-height:1.52;
}

.marketAskV2__composer{
  width:100%;
  padding:12px;
  border:1px solid #e3e3e7;
  border-radius:24px;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:10px;
  align-items:center;
  background:#fff;
  box-shadow:0 20px 55px rgba(0,0,0,.065);
}

.marketAskV2__input{
  min-width:0;
  min-height:76px;
  padding:0 18px;
  border-radius:17px;
  display:flex;
  align-items:center;
  gap:10px;
  background:#f5f5f7;
  overflow:hidden;
}

.marketAskV2__prefix{
  flex:0 0 auto;
  color:#929297;
  font-size:16px;
  font-weight:500;
}

.marketAskV2__query{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:#151515;
  font-size:18px;
  line-height:1;
  font-weight:550;
  letter-spacing:-.015em;
}

.marketAskV2__cursor{
  flex:0 0 2px;
  width:2px;
  height:25px;
  border-radius:2px;
  background:#6c3cff;
}

.marketAskV2__button{
  min-width:104px;
  min-height:76px;
  padding:0 20px;
  border-radius:17px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  background:#0a0a0a;
  color:#fff;
  font-size:15px;
  font-weight:650;
}


/* Marketplace */
.marketCategoriesV2{
  background:#f7f7f8;
  border-top:1px solid #ececef;
  border-bottom:1px solid #ececef;
  padding:104px 24px 102px;
  overflow:hidden;
}

.marketCategoriesV2__inner{
  width:min(100%,1040px);
  margin:0 auto;
}

.marketCategoriesV2__top{
  display:grid;
  grid-template-columns:minmax(0,.92fr) minmax(430px,1.08fr);
  gap:68px;
  align-items:center;
}

.marketCategoriesV2__copy{
  max-width:500px;
}

.marketCategoriesV2__title{
  margin:0;
  color:#0a0a0a;
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","Helvetica Neue",Arial,sans-serif;
  font-size:clamp(46px,5vw,68px);
  line-height:.95;
  letter-spacing:-.05em;
  font-weight:700;
}

.marketCategoriesV2__lead{
  margin:18px 0 0;
  max-width:31rem;
  color:#707075;
  font-size:18px;
  line-height:1.52;
}

.marketCategoriesV2__icons{
  display:grid;
  grid-template-columns:repeat(4,72px);
  gap:22px 20px;
  justify-content:end;
  align-items:start;
}

.marketCategoriesV2__icon{
  display:grid;
  justify-items:center;
  gap:7px;
  min-width:0;
  transform:translateY(var(--offset,0px));
}

.marketCategoriesV2__icon:nth-child(2),
.marketCategoriesV2__icon:nth-child(6){
  --offset:18px;
}

.marketCategoriesV2__square{
  width:66px;
  height:66px;
  border-radius:18px;
  display:grid;
  place-items:center;
  background:var(--cat);
  box-shadow:0 12px 28px rgba(0,0,0,.10);
}

.marketCategoriesV2__square img{
  width:42px;
  height:42px;
  display:block;
  object-fit:contain;
}

.marketCategoriesV2__label{
  max-width:78px;
  color:#7d7d82;
  font-size:10px;
  line-height:1.08;
  font-weight:600;
  text-align:center;
}

.marketCategoriesV2__mixTitle{
  margin:72px 0 0;
  color:#111;
  font-size:28px;
  line-height:1;
  letter-spacing:-.035em;
  font-weight:680;
  text-align:center;
}

.marketCategoriesV2__mixLead{
  margin:10px 0 0;
  color:#7b7b80;
  font-size:15px;
  line-height:1.45;
  text-align:center;
}

.marketCategoriesV2__examples{
  margin-top:30px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px;
}

.marketCategoriesV2__example{
  min-height:176px;
  padding:24px;
  border:1px solid #dfdfe3;
  border-radius:22px;
  background:#fff;
  display:grid;
  align-content:center;
  gap:22px;
}

.marketCategoriesV2__category{
  display:flex;
  align-items:center;
  gap:14px;
}

.marketCategoriesV2__featuredSquare{
  flex:0 0 54px;
  width:54px;
  height:54px;
  border-radius:15px;
  display:grid;
  place-items:center;
}

.marketCategoriesV2__featuredSquare--culinary{background:#f4d03f}
.marketCategoriesV2__featuredSquare--events{background:#0054a3}

.marketCategoriesV2__featuredSquare svg,
.marketCategoriesV2__featuredSquare img{
  width:30px;
  height:30px;
  display:block;
  object-fit:contain;
}

.marketCategoriesV2__featuredSquare svg{
  fill:none;
  stroke:#fff;
  stroke-width:1.9;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.marketCategoriesV2__categoryText small{
  display:block;
  margin:0 0 4px;
  color:#919196;
  font-size:10px;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.marketCategoriesV2__categoryText strong{
  display:block;
  color:#111;
  font-size:23px;
  line-height:1;
  letter-spacing:-.03em;
  font-weight:680;
}

.marketCategoriesV2__types{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-items:center;
}

.marketCategoriesV2__types::before{
  content:"→";
  margin-right:2px;
  color:#b5b5ba;
  font-size:22px;
  font-weight:400;
}

.marketCategoriesV2__types span{
  min-height:36px;
  padding:0 13px;
  border:1px solid #dedee2;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:#fff;
  color:#27272a;
  font-size:12.5px;
  font-weight:620;
}

.marketCategoriesV2__close{
  margin:34px 0 0;
  color:#4b4b50;
  font-size:16px;
  line-height:1.35;
  font-weight:620;
  text-align:center;
  letter-spacing:-.01em;
}


@media(max-width:900px){
  .marketAskV2__inner,
  .marketCategoriesV2__top{
    grid-template-columns:1fr;
    gap:42px;
  }

  .marketAskV2__copy,
  .marketCategoriesV2__copy{
    max-width:650px;
  }

  .marketCategoriesV2__icons{
    justify-content:start;
  }
}

@media(max-width:620px){
  .marketAskV2{
    padding:68px 20px 72px;
  }

  .marketAskV2__title,
  .marketCategoriesV2__title{
    font-size:clamp(42px,11.8vw,54px);
  }

  .marketAskV2__lead,
  .marketCategoriesV2__lead{
    font-size:16px;
  }

  .marketAskV2__composer{
    grid-template-columns:1fr;
    padding:9px;
    border-radius:19px;
  }

  .marketAskV2__input{
    min-height:68px;
    border-radius:13px;
  }

  .marketAskV2__query{
    font-size:16px;
  }

  .marketAskV2__button{
    width:100%;
    min-height:49px;
    border-radius:13px;
  }

  .marketCategoriesV2{
    padding:72px 20px 74px;
  }

  .marketCategoriesV2__top{
    gap:38px;
  }

  .marketCategoriesV2__icons{
    grid-template-columns:repeat(4,58px);
    gap:19px 15px;
  }

  .marketCategoriesV2__icon:nth-child(2),
  .marketCategoriesV2__icon:nth-child(6){
    --offset:0px;
  }

  .marketCategoriesV2__square{
    width:56px;
    height:56px;
    border-radius:15px;
  }

  .marketCategoriesV2__square img{
    width:36px;
    height:36px;
  }

  .marketCategoriesV2__label{
    max-width:62px;
    font-size:9px;
  }

  .marketCategoriesV2__mixTitle{
    margin-top:54px;
    font-size:25px;
  }

  .marketCategoriesV2__examples{
    grid-template-columns:1fr;
    gap:12px;
  }

  .marketCategoriesV2__example{
    min-height:0;
    padding:22px;
    border-radius:19px;
  }
}
