/* Compare table premium pass (note 15): BTD column as a raised dark card, clearer marks */
.cmp-table{border-collapse:separate;border-spacing:0;font-size:15px;margin-top:48px}
.cmp-table thead th{padding:20px 18px;font-size:11.5px;color:#6b655b;border-bottom:1.5px solid var(--ink,#0E0D0B)}
.cmp-table thead th.us{background:#0E0D0B!important;color:#E8574A;border-radius:16px 16px 0 0;border-bottom-color:#0E0D0B;font-weight:700}
.cmp-table tbody td{padding:20px 18px;vertical-align:middle}
.cmp-table tbody td:first-child{font-size:15.5px}
.cmp-table tbody tr{transition:background .25s}
.cmp-table tbody tr:hover td:not(.us-col){background:rgba(14,13,11,.025)}
.cmp-table .us-col{background:#0E0D0B!important;color:#F5F1EA;border-bottom-color:#25221e!important;box-shadow:0 0 0 0 transparent}
.cmp-table tbody tr:last-child .us-col{border-radius:0 0 16px 16px}
.cmp-table thead th.us,.cmp-table .us-col{text-align:center;position:relative}
.cmp-table thead th.us{box-shadow:0 -14px 40px -18px rgba(14,13,11,.45)}
.cmp-table tbody tr:last-child .us-col{box-shadow:0 22px 40px -22px rgba(14,13,11,.55)}

.cmp-table .chk{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:50%;background:#e6f3ea;color:#2f7a4a;font-size:13px;font-weight:700;line-height:1}
.cmp-table .us-col .chk{background:rgba(111,207,151,.16);color:#6fcf97;box-shadow:0 0 0 1px rgba(111,207,151,.35)}
.cmp-table .dash{display:inline-grid;place-items:center;width:26px;height:26px;color:#b3aa9d;font-weight:500;font-size:12.5px}

.cmp-table .price{font-size:14px;color:#4a453d}
.cmp-table .us-col.price{font:400 26px/1 Fraunces,Georgia,serif;letter-spacing:-.02em;color:#F5F1EA;padding-top:24px;padding-bottom:26px}

@media (max-width:760px){
  .cmp-wrap{margin-left:-20px!important;margin-right:-20px!important;padding:0 20px!important;-webkit-mask-image:linear-gradient(to right,#000 calc(100% - 28px),transparent);mask-image:linear-gradient(to right,#000 calc(100% - 28px),transparent)}
  .cmp-wrap{scrollbar-width:none}
  .cmp-wrap::-webkit-scrollbar{display:none}
  .cmp-table{min-width:600px;font-size:13.5px}
  .cmp-table thead th{padding:14px 10px!important;font-size:10px!important}
  .cmp-table tbody td{padding:14px 10px!important}
  .cmp-table thead th:first-child,.cmp-table tbody td:first-child{position:sticky;left:0;z-index:2;background:var(--paper,#F5F1EA);min-width:150px;box-shadow:8px 0 12px -10px rgba(14,13,11,.25)}
  .cmp-table .chk,.cmp-table .dash{width:22px;height:22px;font-size:11.5px}
  .cmp-table .us-col.price{font-size:20px}
}

/* Mobile fix: pin the feature names, let the dark Before The Data column sit next to them (no sliding under), solid row backgrounds */
@media (max-width:760px){
  .cmp-table thead th:first-child,.cmp-table tbody td:first-child{z-index:4;background:#F5F1EA!important;box-sizing:border-box;width:136px;min-width:136px;max-width:136px;white-space:normal}
  .cmp-table tbody tr:hover td:first-child{background:#F5F1EA!important}
  .cmp-table thead th.us,.cmp-table .us-col{position:sticky;left:136px;z-index:3;box-sizing:border-box;min-width:112px}
  .cmp-table tbody tr:hover td:not(.us-col):not(:first-child){background:transparent}
  .cmp-table thead th.us{box-shadow:none}
  .cmp-table tbody tr:last-child .us-col{box-shadow:none}
}
@media (max-width:760px){
  .cmp-table{table-layout:fixed;width:600px}
  .cmp-table thead th:first-child,.cmp-table tbody td:first-child{width:136px!important}
  .cmp-table thead th.us,.cmp-table .us-col{width:112px!important}
}
