/* TradesFolks 18.4.144
   Built for confident sourcing — premium procurement capability cards.
   Exact `.tf-commerce-capabilities-*` implementation; no heuristic selectors.
*/

.tf-homepage .tf-commerce-capabilities{
  width:calc(100% - 56px)!important;
  max-width:none!important;
  margin:18px auto!important;
  padding:24px 0 26px!important;
  overflow:hidden!important;
  border:1px solid #e5ebf2!important;
  border-radius:22px!important;
  background:
    radial-gradient(circle at 92% 7%,rgba(255,191,47,.09),transparent 22%),
    linear-gradient(180deg,#ffffff 0%,#f8fbff 100%)!important;
  box-shadow:0 16px 40px rgba(16,43,87,.045)!important;
}

.tf-homepage .tf-commerce-capabilities>.shell{
  width:100%!important;
  max-width:none!important;
  margin:0!important;
  padding:0 24px!important;
}

/* Header */
.tf-homepage .tf-commerce-capabilities-head{
  display:flex!important;
  align-items:flex-end!important;
  justify-content:space-between!important;
  gap:18px!important;
  margin:0 0 16px!important;
}

.tf-homepage .tf-commerce-capabilities-head .eyebrow{
  display:block!important;
  margin:0 0 5px!important;
  color:#0c64d7!important;
  font-size:9px!important;
  line-height:1!important;
  font-weight:900!important;
  letter-spacing:.12em!important;
}

.tf-homepage .tf-commerce-capabilities-head h2{
  margin:0!important;
  max-width:760px!important;
  color:#0b2347!important;
  font-size:clamp(29px,2.35vw,40px)!important;
  line-height:1.02!important;
  letter-spacing:-.045em!important;
  font-weight:820!important;
}

.tf-homepage .tf-commerce-capabilities-head p{
  max-width:640px!important;
  margin:6px 0 0!important;
  color:#637891!important;
  font-size:11px!important;
  line-height:1.45!important;
}

.tf-homepage .tf-commerce-capabilities-head>a{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:9px!important;
  min-height:40px!important;
  padding:0 15px!important;
  border:1px solid #d6e2ef!important;
  border-radius:999px!important;
  background:#fff!important;
  color:#0b67d8!important;
  font-size:9px!important;
  line-height:1!important;
  font-weight:850!important;
  text-decoration:none!important;
  box-shadow:0 6px 16px rgba(16,43,87,.045)!important;
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease!important;
}

.tf-homepage .tf-commerce-capabilities-head>a:hover{
  transform:translateY(-1px)!important;
  border-color:#bcd3eb!important;
  box-shadow:0 10px 22px rgba(16,43,87,.08)!important;
}

/* Grid */
.tf-homepage .tf-commerce-capabilities-grid{
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:12px!important;
  width:100%!important;
}

.tf-homepage .tf-commerce-capability-card{
  --cap-accent:#0d6edc;
  --cap-soft:#eaf3ff;
  --cap-line:#cfe2f8;
  display:grid!important;
  grid-template-columns:140px minmax(0,1fr)!important;
  min-width:0!important;
  min-height:226px!important;
  overflow:hidden!important;
  border:1px solid #dbe5ef!important;
  border-radius:18px!important;
  background:#fff!important;
  padding:0!important;
  box-shadow:0 10px 24px rgba(16,43,87,.05)!important;
  transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease!important;
}

.tf-homepage .tf-commerce-capability-card.is-trust{
  --cap-accent:#146dd3;
  --cap-soft:#e9f3ff;
  --cap-line:#c7def7;
}
.tf-homepage .tf-commerce-capability-card.is-commerce{
  --cap-accent:#986d00;
  --cap-soft:#fff6d9;
  --cap-line:#f2d887;
}
.tf-homepage .tf-commerce-capability-card.is-discovery{
  --cap-accent:#0a8b69;
  --cap-soft:#e9f8f3;
  --cap-line:#c6eadf;
}
.tf-homepage .tf-commerce-capability-card.is-secure{
  --cap-accent:#6c57c7;
  --cap-soft:#f1edff;
  --cap-line:#dcd3fb;
}

.tf-homepage .tf-commerce-capability-card:hover{
  transform:translateY(-3px)!important;
  border-color:var(--cap-line)!important;
  box-shadow:0 18px 34px rgba(16,43,87,.09)!important;
}

/* Visual rail */
.tf-homepage .tf-commerce-capability-visual{
  position:relative!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  min-width:0!important;
  overflow:hidden!important;
  padding:18px 12px!important;
  background:
    radial-gradient(circle at 50% 28%,rgba(255,255,255,.9),transparent 32%),
    linear-gradient(160deg,var(--cap-soft) 0%,#fff 100%)!important;
  border-right:1px solid #e7edf4!important;
}

.tf-homepage .tf-commerce-capability-visual::before{
  content:""!important;
  position:absolute!important;
  width:140px!important;
  height:140px!important;
  border:1px solid var(--cap-line)!important;
  border-radius:50%!important;
  opacity:.5!important;
  transform:translate(38px,-55px)!important;
}

.tf-homepage .tf-commerce-capability-icon{
  position:relative!important;
  z-index:1!important;
  display:grid!important;
  width:62px!important;
  height:62px!important;
  place-items:center!important;
  border:1px solid var(--cap-line)!important;
  border-radius:18px!important;
  background:#fff!important;
  color:var(--cap-accent)!important;
  box-shadow:0 9px 20px rgba(16,43,87,.08)!important;
}

.tf-homepage .tf-commerce-capability-icon svg{
  width:34px!important;
  height:34px!important;
  stroke:currentColor!important;
  stroke-width:2.2!important;
  stroke-linecap:round!important;
  stroke-linejoin:round!important;
}

.tf-homepage .tf-commerce-capability-visual>span{
  position:relative!important;
  z-index:1!important;
  margin-top:13px!important;
  color:var(--cap-accent)!important;
  font-size:8px!important;
  line-height:1.2!important;
  font-weight:850!important;
  text-align:center!important;
  letter-spacing:.035em!important;
}

.tf-homepage .tf-commerce-capability-visual>i{
  position:absolute!important;
  display:block!important;
  width:44px!important;
  height:5px!important;
  border-radius:99px!important;
  background:var(--cap-line)!important;
  opacity:.55!important;
  bottom:19px!important;
}
.tf-homepage .tf-commerce-capability-visual>i:nth-of-type(1){left:22px!important;width:32px!important}
.tf-homepage .tf-commerce-capability-visual>i:nth-of-type(2){right:18px!important;width:19px!important}

/* Body */
.tf-homepage .tf-commerce-capability-body{
  display:flex!important;
  min-width:0!important;
  flex-direction:column!important;
  padding:18px 18px 15px!important;
}

.tf-homepage .tf-commerce-capability-top{
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:8px!important;
}

.tf-homepage .tf-commerce-capability-top b{
  display:inline-flex!important;
  width:auto!important;
  height:auto!important;
  min-height:28px!important;
  align-items:center!important;
  justify-content:center!important;
  padding:0 9px!important;
  border-radius:9px!important;
  background:var(--cap-soft)!important;
  color:var(--cap-accent)!important;
  font-size:10px!important;
  line-height:1!important;
  font-weight:900!important;
}

.tf-homepage .tf-commerce-capability-top span{
  display:inline-flex!important;
  min-width:0!important;
  min-height:26px!important;
  max-width:46%!important;
  align-items:center!important;
  border:1px solid var(--cap-line)!important;
  border-radius:999px!important;
  background:#fff!important;
  padding:0 8px!important;
  color:var(--cap-accent)!important;
  font-size:7px!important;
  line-height:1!important;
  font-weight:850!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}

.tf-homepage .tf-commerce-capability-card h3{
  max-width:28ch!important;
  margin:17px 0 7px!important;
  color:#0d274b!important;
  font-size:19px!important;
  line-height:1.1!important;
  letter-spacing:-.022em!important;
  font-weight:800!important;
}

.tf-homepage .tf-commerce-capability-card p{
  max-width:50ch!important;
  margin:0!important;
  color:#657a92!important;
  font-size:10px!important;
  line-height:1.45!important;
}

.tf-homepage .tf-commerce-capability-card>a,
.tf-homepage .tf-commerce-capability-body>a{
  display:flex!important;
  min-height:36px!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:10px!important;
  margin-top:auto!important;
  border-top:1px solid #e6edf4!important;
  padding-top:11px!important;
  color:var(--cap-accent)!important;
  font-size:9px!important;
  line-height:1!important;
  font-weight:850!important;
  text-decoration:none!important;
}

.tf-homepage .tf-commerce-capability-body>a span{
  display:grid!important;
  width:24px!important;
  height:24px!important;
  flex:0 0 24px!important;
  place-items:center!important;
  border-radius:50%!important;
  background:var(--cap-soft)!important;
  color:var(--cap-accent)!important;
  transition:transform .18s ease!important;
}

.tf-homepage .tf-commerce-capability-card:hover .tf-commerce-capability-body>a span{
  transform:translateX(2px)!important;
}

/* 4 cards: maintain balanced density */
@media(min-width:1500px){
  .tf-homepage .tf-commerce-capabilities-grid:has(.tf-commerce-capability-card:nth-child(4)){
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
  }
  .tf-homepage .tf-commerce-capabilities-grid:has(.tf-commerce-capability-card:nth-child(4)) .tf-commerce-capability-card{
    grid-template-columns:112px minmax(0,1fr)!important;
  }
}

/* Tablet / zoom */
@media(min-width:821px) and (max-width:1179px){
  .tf-homepage .tf-commerce-capabilities{
    width:calc(100% - 32px)!important;
    padding:20px 0 22px!important;
  }

  .tf-homepage .tf-commerce-capabilities>.shell{
    padding:0 16px!important;
  }

  .tf-homepage .tf-commerce-capabilities-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }

  .tf-homepage .tf-commerce-capability-card{
    grid-template-columns:120px minmax(0,1fr)!important;
    min-height:216px!important;
  }

  .tf-homepage .tf-commerce-capability-card h3{
    font-size:17px!important;
  }
}

/* Mobile app mode */
@media(max-width:820px){
  .tf-homepage .tf-commerce-capabilities{
    width:calc(100% - 16px)!important;
    margin:12px auto!important;
    padding:16px 0 17px!important;
    border-radius:18px!important;
  }

  .tf-homepage .tf-commerce-capabilities>.shell{
    padding:0 10px!important;
  }

  .tf-homepage .tf-commerce-capabilities-head{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) auto!important;
    align-items:end!important;
    gap:8px!important;
    margin-bottom:10px!important;
  }

  .tf-homepage .tf-commerce-capabilities-head .eyebrow{
    margin-bottom:3px!important;
    font-size:7px!important;
  }

  .tf-homepage .tf-commerce-capabilities-head h2{
    font-size:21px!important;
    line-height:1.03!important;
  }

  .tf-homepage .tf-commerce-capabilities-head p{
    max-width:280px!important;
    margin-top:3px!important;
    font-size:9px!important;
    line-height:1.3!important;
  }

  .tf-homepage .tf-commerce-capabilities-head>a{
    min-height:34px!important;
    padding:0 10px!important;
    font-size:8px!important;
  }

  .tf-homepage .tf-commerce-capabilities-grid{
    display:flex!important;
    flex-wrap:nowrap!important;
    gap:9px!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    padding:0 1px 4px!important;
    scroll-snap-type:x mandatory!important;
    scrollbar-width:none!important;
    -webkit-overflow-scrolling:touch!important;
  }

  .tf-homepage .tf-commerce-capabilities-grid::-webkit-scrollbar{
    display:none!important;
  }

  .tf-homepage .tf-commerce-capability-card{
    grid-template-columns:88px minmax(0,1fr)!important;
    flex:0 0 min(86vw,355px)!important;
    width:min(86vw,355px)!important;
    min-width:min(86vw,355px)!important;
    min-height:176px!important;
    border-radius:15px!important;
    scroll-snap-align:start!important;
  }

  .tf-homepage .tf-commerce-capability-visual{
    padding:12px 7px!important;
  }

  .tf-homepage .tf-commerce-capability-icon{
    width:46px!important;
    height:46px!important;
    border-radius:14px!important;
  }

  .tf-homepage .tf-commerce-capability-icon svg{
    width:25px!important;
    height:25px!important;
  }

  .tf-homepage .tf-commerce-capability-visual>span{
    margin-top:8px!important;
    font-size:6.5px!important;
  }

  .tf-homepage .tf-commerce-capability-body{
    padding:12px 12px 10px!important;
  }

  .tf-homepage .tf-commerce-capability-top b{
    min-height:23px!important;
    padding:0 7px!important;
    font-size:8px!important;
  }

  .tf-homepage .tf-commerce-capability-top span{
    min-height:22px!important;
    max-width:48%!important;
    padding:0 6px!important;
    font-size:6px!important;
  }

  .tf-homepage .tf-commerce-capability-card h3{
    margin:11px 0 5px!important;
    font-size:15px!important;
    line-height:1.08!important;
  }

  .tf-homepage .tf-commerce-capability-card p{
    display:-webkit-box!important;
    font-size:8px!important;
    line-height:1.35!important;
    overflow:hidden!important;
    -webkit-line-clamp:2!important;
    -webkit-box-orient:vertical!important;
  }

  .tf-homepage .tf-commerce-capability-body>a{
    min-height:30px!important;
    padding-top:8px!important;
    font-size:7px!important;
  }

  .tf-homepage .tf-commerce-capability-body>a span{
    width:20px!important;
    height:20px!important;
    flex-basis:20px!important;
  }
}

@media(max-width:430px){
  .tf-homepage .tf-commerce-capabilities{
    width:calc(100% - 12px)!important;
  }

  .tf-homepage .tf-commerce-capabilities-head{
    grid-template-columns:1fr!important;
  }

  .tf-homepage .tf-commerce-capabilities-head>a{
    justify-self:start!important;
  }

  .tf-homepage .tf-commerce-capability-card{
    flex-basis:88vw!important;
    width:88vw!important;
    min-width:88vw!important;
  }
}