/* CasaPay vs Stripe — comparison page.
   Extends the partner landing template (rentlink.css) with a side-by-side
   comparison table. Tokens are taken from
   src/data/partner-landing-template.json and rentlink.css. */

.compare-note {
  width: min(100%, 1180px);
  margin: 18px auto 0;
  color: #596970;
  font-size: 13px;
  line-height: 1.55;
  text-align: center;
}

.compare-table-section {
  padding-top: 112px;
  scroll-margin-top: 84px;
}

.compare-table-wrap {
  margin-top: 44px;
  border: 1px solid #d4e0e4;
  border-radius: 28px;
  overflow: hidden;
  background: #fff;
}

.compare-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
  line-height: 1.5;
}

.compare-table caption {
  padding: 18px 24px 0;
  color: #596970;
  font-size: 13px;
  text-align: left;
}

.compare-table thead th {
  padding: 18px 24px;
  border-bottom: 1px solid #d4e0e4;
  background: #f2f6f7;
  color: #596970;
  font-size: 13px;
  font-weight: 850;
  letter-spacing: .06em;
  text-align: left;
  text-transform: uppercase;
}

.compare-table thead th:first-child {
  width: 26%;
}

.compare-table thead th.compare-table__us {
  background: #e7f7fc;
  color: #006d99;
}

.compare-table tbody th {
  width: 26%;
  padding: 22px 24px;
  border-bottom: 1px solid #e4edf0;
  color: #143a45;
  font-size: 16px;
  font-weight: 850;
  line-height: 1.25;
  text-align: left;
  vertical-align: top;
}

.compare-table tbody td {
  padding: 22px 24px;
  border-bottom: 1px solid #e4edf0;
  color: #596970;
  vertical-align: top;
}

.compare-table tbody td:nth-child(3) {
  background: #f8fdff;
  color: #2c4b55;
}

.compare-table tbody tr:last-child th,
.compare-table tbody tr:last-child td {
  border-bottom: 0;
}

.compare-table__win th {
  color: #596970;
}

.compare-table__win td {
  background: #f5f7f8;
}

.compare-table__win td:nth-child(3) {
  background: #f2f6f7;
}

/* Fee table: the pricing detail is the point, so keep it on one screen and
   give the money row and the source note their own weight. */
.compare-table--fees tbody th {
  font-size: 15px;
}

.compare-table--fees tbody td {
  font-size: 14.5px;
  line-height: 1.55;
}

.compare-table--fees .compare-table__money th,
.compare-table--fees .compare-table__money td {
  background: #eef4f6;
  color: #143a45;
  font-size: 15.5px;
}

.compare-table--fees .compare-table__money td:nth-child(2) {
  background: #eef4f6;
}

.compare-table--fees .compare-table__money td:nth-child(3) {
  background: #e2f3fa;
}

.compare-source {
  max-width: 100%;
  margin: 0;
  padding: 16px 24px 18px;
  border-top: 1px solid #d4e0e4;
  color: #596970;
  font-size: 12.5px;
  line-height: 1.55;
}

@media (max-width: 820px) {
  /* The shared hero typography token floors at 52px, which is too large for a
     long comparison headline inside the 540px mobile hero. Re-declare the
     token for this page so the hero copy fits without clipping. */
  .compare-page {
    --casapay-hero-title-size: clamp(38px, 11.4vw, 54px);
    --casapay-hero-description-size: 16px;
    --casapay-hero-action-min-height: 46px;
  }

  .compare-page .rentlink-hero {
    padding: 30px 20px;
  }

  .compare-page .rentlink-hero p {
    margin-top: 16px;
  }

  .compare-page .rentlink-actions {
    gap: 10px;
    margin-top: 20px;
  }

  .compare-note {
    margin-top: 14px;
    text-align: left;
  }

  .compare-table-section {
    padding-top: 80px;
  }

  .compare-table-wrap {
    border-radius: 24px;
  }

  .compare-table,
  .compare-table tbody,
  .compare-table tr,
  .compare-table th,
  .compare-table td {
    display: block;
    width: 100%;
  }

  .compare-table caption {
    display: none;
  }

  .compare-table thead {
    display: none;
  }

  .compare-table tbody tr {
    padding: 6px 20px 18px;
    border-bottom: 1px solid #d4e0e4;
  }

  .compare-table tbody tr:last-child {
    border-bottom: 0;
  }

  .compare-table tbody th {
    width: 100%;
    padding: 18px 0 12px;
    border-bottom: 0;
    font-size: 18px;
  }

  .compare-table tbody td {
    width: 100%;
    padding: 0 0 12px;
    border-bottom: 0;
    background: transparent;
    font-size: 15px;
  }

  .compare-table tbody td:nth-child(3) {
    background: transparent;
    color: #143a45;
  }

  .compare-table tbody td::before {
    display: block;
    margin-bottom: 6px;
    font-size: 12px;
    font-weight: 850;
    letter-spacing: .07em;
    text-transform: uppercase;
  }

  .compare-table tbody td:nth-child(2)::before {
    content: "Stripe";
    color: #596970;
  }

  .compare-table tbody td:nth-child(3)::before {
    content: "CasaPay RentLink";
    color: #006d99;
  }

  .compare-table__win td:nth-child(2),
  .compare-table__win td:nth-child(3) {
    background: transparent;
  }

  .compare-table--fees .compare-table__money th,
  .compare-table--fees .compare-table__money td,
  .compare-table--fees .compare-table__money td:nth-child(2),
  .compare-table--fees .compare-table__money td:nth-child(3) {
    background: transparent;
  }

  .compare-table__money th {
    color: #143a45;
  }

  .compare-source {
    padding: 14px 20px 16px;
  }
}