/* ================================
   PRICING SECTION
   ================================ */

/* Grid container */
#pricing .pricing__container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background-color: var(--stb-border-gray);
  border: 1px solid var(--stb-border-gray);
}

/* Pricing cards */
#pricing .pricing__container .pricing {
  padding: var(--stb-space);
  background-color: var(--stb-white);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Card layout */
#pricing .pricing {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Featured (highlighted) plan */
#pricing .pricing.featured-plan {
  box-sizing: content-box;
  outline: 1px solid var(--stb-orange);
  border: 2px solid var(--stb-orange);
  position: relative;
}

/* Featured header */
#pricing .pricing.featured-plan .featured-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}

/* Badge for featured plan */
#pricing .pricing.featured-plan .featured-header .featured-badge {
  background-color: var(--stb-orange);
  color: var(--stb-white);
  padding: 4px 8px;
  border-radius: 24px;
  font-size: 0.85rem;
}

/* CTA button for featured plan */
#pricing .pricing a.featured {
  color: var(--stb-white) !important;
  border: none;
}

/* Pricing details */
#pricing .price {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

#pricing .price > div {
  display: flex;
  gap: 4px;
  align-items: baseline;
}

/* Offerings list */
#pricing .offerings {
  margin-top: 20px;
}

#pricing .offerings > div {
  display: flex;
  align-items: center;
  gap: 8px;
}

#pricing .offerings > div > span > svg > path {
  stroke: var(--stb-orange);
}

/* ================================
   RESPONSIVE DESIGN
   ================================ */

@media screen and (max-width: 1280px) {
  #pricing .pricing__container {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media screen and (max-width: 640px) {
  #pricing .pricing__container {
    grid-template-columns: 1fr;
  }
}
