/* Why Choose LandBitt — Figma 2405:1937 / 2406:1921 (component WhyCard 2405:1927).
   Card type and colours follow the live landbitt.com blurbs (.et_pb_blurb.bb-33). */
.why {
  --why-title: #333333;      /* live-site card heading */
  --why-text: #212529;       /* live-site list copy */
  background: linear-gradient(180deg, #eaf2fa 0%, var(--ground) 100%);
  padding-block: 60px;
}
.why__head { margin-bottom: 27px; }

/* Desktop grid: row 1 = 637 | 497, row 2 = 369 | 369 | 370 (26px gutters).
   Seven tracks (gutters as real tracks) let both rows share one grid:
   a 369 · g 26 · b 242 · g 26 · c 101 · g 26 · d 370  = 1160 */
.why__grid {
  display: grid;
  grid-template-columns: 369fr 26px 242fr 26px 101fr 26px 370fr;
  row-gap: 20px;
}
.why__item { display: flex; }
.why__item--fractional { grid-column: 1 / 4; }
.why__item--wide       { grid-column: 5 / 8; }
.why__item--blockchain { grid-column: 1 / 2; }
.why__item--legal      { grid-column: 3 / 6; }
.why__item--smart      { grid-column: 7 / 8; }

.why__card {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  border-radius: 50px;
  overflow: hidden;
  transition: transform var(--t-card) var(--ease), box-shadow var(--t-card) var(--ease);
}
.why__card--feature {
  gap: 24px;
  min-height: 674px;
  padding: 53px 40px 38px;
  background: var(--surface);
}
.why__item--fractional .why__card { padding-top: 120px; }
.why__card--plain {
  gap: 30px;
  min-height: 513px;
  padding: 40px 30px;
  background: linear-gradient(52deg, #fff 52.124%, rgba(255, 255, 255, 0) 85.404%);
}

.why__icon { position: relative; height: 37px; width: auto; object-fit: contain; }
.why__item--wide .why__icon { height: 36px; }

.why__title {
  position: relative;
  font-size: 28px;
  font-weight: 600;
  line-height: 34px;
  color: var(--why-title);
}
.why__list {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-size: 14px;
  font-weight: 500;
  line-height: 22px;
  color: var(--why-text);
}
.why__list li {
  display: flex;
  gap: 10px;
}
.why__list li::before {
  content: "";
  flex: none;
  width: 18px;
  height: 18px;
  background: url("../../assets/img/why-choose/tick.png") center / contain no-repeat;
}
/* Copy column widths from the Figma cards */
.why__item--fractional .why__title,
.why__item--fractional .why__list { max-width: 278px; }
.why__item--wide .why__title,
.why__item--wide .why__list { max-width: 250px; }

/* Decorative app artwork, pinned to the card's bottom-right corner */
.why__art {
  position: absolute;
  right: 0;
  bottom: 0;
  height: auto;
  pointer-events: none;
}
.why__item--fractional .why__art { width: min(319px, 50%); }
.why__item--wide .why__art { width: min(199px, 40%); }

@media (hover: hover) {
  .why__card:hover { transform: translateY(-4px); box-shadow: var(--el-md); }
}

/* Tablet: stack the cards; plain cards keep a 3-up row while there's room */
@media (max-width: 1060px) {
  .why__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 20px; }
  .why__item--fractional,
  .why__item--wide { grid-column: 1 / -1; }
  .why__item--blockchain,
  .why__item--legal,
  .why__item--smart { grid-column: auto; }
  .why__card--plain { min-height: 0; }
  .why__title { font-size: 24px; line-height: 30px; }
}
@media (max-width: 900px) {
  .why__grid { grid-template-columns: minmax(0, 1fr); }
}

/* Mobile 390 frame */
@media (max-width: 720px) {
  /* Figma has 0 top / 84px head gap; rebalanced to 42 / 42 so the colour step
     from Partners doesn't land on the heading (same total gap). */
  .why { padding-block: 42px 30px; }
  .why__head { margin-bottom: 42px; }
  .why__grid { row-gap: 30px; }

  .why__card { border-radius: 50px; }
  .why__card--feature { gap: 20px; min-height: 0; padding: 50px 40px 334px; }
  .why__item--fractional .why__card { padding: 50px 40px 232px; }
  .why__card--plain { gap: 20px; padding: 40px 30px 66px; }

  .why__title { font-size: 22px; line-height: 30px; }
  .why__item--fractional .why__title,
  .why__item--fractional .why__list,
  .why__item--wide .why__title,
  .why__item--wide .why__list { max-width: none; }

  .why__icon--legal { height: 41px; }
  .why__item--fractional .why__art { width: 175px; }
  .why__item--wide .why__art { width: 165px; }
}

/* ======================================================================
   Card refinement — solid surfaces, anchored icons, calmer heights.
   ====================================================================== */
.why__card {
  border-radius: 32px;
  border: 1px solid var(--line);
  background: var(--surface);
  box-shadow: 0 1px 2px rgba(6, 33, 31, .04), 0 18px 40px -28px rgba(6, 33, 31, .25);
  transition: transform var(--t-card) var(--ease), box-shadow var(--t-card) var(--ease), border-color var(--t-card) var(--ease);
}
/* a soft mint glow in the top corner instead of the white→transparent fade */
.why__card::before {
  content: "";
  position: absolute;
  top: -120px;
  right: -120px;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(49, 226, 154, .14), transparent);
  pointer-events: none;
  transition: opacity .4s var(--ease), transform .6s var(--ease);
}
.why__card--feature { min-height: 520px; gap: 20px; padding: 44px 40px 40px; }
.why__item--fractional .why__card { padding-top: 44px; }
.why__card--plain { min-height: 0; gap: 20px; padding: 36px 32px 40px; background: var(--surface); }

/* icon anchored on a tinted tile */
.why__icon,
.why__item--wide .why__icon,
.why__icon--legal {
  box-sizing: content-box;
  width: 30px;
  height: 30px;
  padding: 13px;
  border-radius: 16px;
  background: linear-gradient(145deg, #e7f8f1, #e3f2f7);
  border: 1px solid rgba(25, 154, 172, .15);
  object-fit: contain;
  transition: background .4s var(--ease), border-color .4s var(--ease);
}
.why__title {
  font-size: 26px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -.02em;
  color: var(--ink);
}
.why__list { gap: 12px; font-size: 14.5px; line-height: 1.6; color: #3d4f50; }
.why__list li { padding-bottom: 12px; border-bottom: 1px solid #eef3f6; }
.why__list li:last-child { padding-bottom: 0; border-bottom: 0; }
.why__list li::before { margin-top: 3px; }

@media (hover: hover) {
  .why__card:hover { border-color: rgba(22, 169, 122, .35); box-shadow: 0 1px 2px rgba(6, 33, 31, .04), 0 26px 50px -26px rgba(6, 33, 31, .3); }
  .why__card:hover::before { transform: scale(1.25); }
  .why__card:hover .why__icon { background: linear-gradient(145deg, #c9f5e2, #c7ecf3); border-color: rgba(22, 169, 122, .35); }
}

@media (max-width: 1060px) {
  .why__card--feature { min-height: 0; }
  .why__title { font-size: 23px; }
}
@media (max-width: 720px) {
  .why__card { border-radius: 28px; }
  .why__card--feature { padding: 36px 28px 300px; }
  .why__item--fractional .why__card { padding: 36px 28px 220px; }
  .why__card--plain { padding: 32px 28px 36px; }
  .why__title { font-size: 22px; }
}