.price-table-shell {
  overflow: auto;
  border: 2px solid var(--line);
  background: var(--paper);
  box-shadow: var(--shadow);
}

.price-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  color: var(--ink);
  font-size: clamp(14px, 2.6vw, 20px);
  font-variant-numeric: tabular-nums;
}

.price-table col:first-child { width: 35%; }

.price-table th,
.price-table td {
  padding: 12px 16px;
  border-bottom: 2px solid var(--line);
  font-size: inherit;
  font-weight: var(--weight-accent);
  line-height: 1.18;
  overflow-wrap: anywhere;
  text-align: right;
}

.price-table tbody tr { height: 58px; }
.price-table tbody tr:last-child td { border-bottom: 0; }
.price-table th:first-child,
.price-table td:first-child { text-align: left; }

.price-table .our-price { background: var(--accent); }
.price-table .token-price { font-size: inherit; }
.price-table .token-price,
.price-table .competitor-cell { white-space: normal; }

.price-table a,
.price-table a:hover,
.price-table a:focus {
  color: inherit;
  font-size: inherit;
  text-decoration: none;
}

.price-table a:focus-visible,
.price-table-shell:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: -2px;
}

.price-table .comparison-price-line {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 4px 6px;
  white-space: normal;
}

.price-table .markup-badge {
  max-width: 100%;
  margin: 0;
  padding: 3px 5px;
  font-size: clamp(9px, 1.45vw, 14px);
  white-space: normal;
}

.price-table .resolution-cell small {
  display: block;
  margin-top: 3px;
  font-size: .75em;
  font-weight: var(--weight-copy);
}


.study-price-table {
  min-width: 35rem;
  table-layout: auto;
}

.study-price-table :is(th, td) { text-align: left; }

@media (max-width: 640px) {
  .price-table-shell { box-shadow: none; }

  .price-table { font-size: clamp(12px, 3.6vw, 14px); }
  .price-table th,
  .price-table td { padding: 10px 4px; }

  .price-table tbody tr { height: auto; }
  .price-table.video-comparison col:first-child { width: 30%; }
  .price-table.video-comparison col:nth-child(2) { width: 27%; }
  .price-table.video-comparison td:nth-child(n + 3) { padding-inline: 2px; }
}
