/* ============================================================
   30 — PROCESSING RATES
   Two priced models set side by side at equal weight, then the fee
   table. The point of the layout is that neither block wins: which
   one is cheaper is a fact about your volume, not a recommendation,
   so nothing here is styled as the better choice.
   ============================================================ */

.prc-rates__head { max-width: 46rem; }
.prc-rates__title { max-width: 22ch; }
.prc-rates__lead { margin-block-start: var(--s-5); }

/* ---------- the two rate blocks ---------- */

.prc-rates__pair {
  display: grid;
  gap: var(--s-6);
  margin-block-start: var(--s-10);
}

@media (min-width: 48em) {
  .prc-rates__pair { grid-template-columns: 1fr 1fr; gap: var(--s-7); }
}

.prc-rates__block {
  padding: var(--s-8);
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--border), var(--sh-xs);
}

/* The second block is the one people arrive sceptical about, so it gets a
   brand-tinted hairline — a border colour, not a badge. */
.prc-rates__block--alt {
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c-brand) 26%, var(--border)),
              var(--sh-sm);
}

.prc-rates__blockhead {
  display: flex;
  align-items: center;
  gap: var(--s-3);
}

.prc-rates__ico {
  flex: none;
  width: var(--s-5);
  height: var(--s-5);
  color: var(--c-brand);
}

.prc-rates__kicker {
  font-size: var(--fs-xs);
  font-weight: var(--fw-semi);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-muted);
}

.prc-rates__figure {
  margin-block-start: var(--s-6);
  color: var(--text-strong);
  font-size: var(--fs-h2);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  font-variant-numeric: tabular-nums;
  /* the figure is the whole point of the block: let it wrap, never clip */
  overflow-wrap: break-word;
}

.prc-rates__word {
  font-size: var(--fs-h3);
  font-weight: var(--fw-semi);
  letter-spacing: var(--tracking-snug);
}

.prc-rates__unit {
  font-size: 0.62em;
  font-weight: var(--fw-semi);
  color: var(--text-muted);
}
.prc-rates__unit--cent { margin-inline-start: 0.04em; }

.prc-rates__op {
  margin-inline: 0.22em;
  font-size: 0.52em;
  font-weight: var(--fw-medium);
  color: var(--text-muted);
  vertical-align: 0.28em;
}

.prc-rates__cap {
  margin-block-start: var(--s-3);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--text-strong);
}

.prc-rates__body {
  margin-block-start: var(--s-4);
  max-width: 44ch;
  font-size: var(--fs-sm);
  line-height: var(--lh-relaxed);
  color: var(--text-body);
}
.prc-rates__body strong {
  font-weight: var(--fw-semi);
  color: var(--text-strong);
  font-variant-numeric: tabular-nums;
}

/* ---------- the "which side of the line" note ---------- */

.prc-rates__switch {
  display: flex;
  gap: var(--s-3);
  margin-block-start: var(--s-7);
  max-width: 68ch;
  font-size: var(--fs-sm);
  line-height: var(--lh-relaxed);
  color: var(--text-body);
}

.prc-rates__switch-ico {
  flex: none;
  width: var(--s-5);
  height: var(--s-5);
  margin-block-start: 0.16em;
  color: var(--c-brand);
}

.prc-rates__switch-link { margin-inline-start: var(--s-2); }

/* ---------- fee table ---------- */

.prc-rates__fees { margin-block-start: var(--s-11); }

.prc-rates__feeh {
  font-size: var(--fs-h4);
  margin-block-end: var(--s-5);
}

.prc-rates__scroll {
  overflow-x: auto;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
}

.prc-rates__table {
  width: 100%;
  min-width: 30rem;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}

.prc-rates__table th,
.prc-rates__table td {
  padding: var(--s-4) var(--s-5);
  border-block-end: 1px solid var(--border);
  text-align: start;
  vertical-align: baseline;
}
.prc-rates__table th:first-child,
.prc-rates__table td:first-child { padding-inline-start: 0; }
.prc-rates__table th:last-child,
.prc-rates__table td:last-child { padding-inline-end: 0; }

.prc-rates__table thead th {
  padding-block: 0 var(--s-3);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semi);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-muted);
}

.prc-rates__table tbody th {
  font-size: var(--fs-sm);
  font-weight: var(--fw-semi);
  color: var(--text-strong);
  white-space: nowrap;
}

.prc-rates__when {
  font-size: var(--fs-sm);
  color: var(--text-body);
}

.prc-rates__rate {
  text-align: end;
  white-space: nowrap;
  font-size: var(--fs-sm);
  font-weight: var(--fw-semi);
  color: var(--text-strong);
}
.prc-rates__table thead .prc-rates__rate { color: var(--text-muted); }

.prc-rates__table tbody tr:last-child th,
.prc-rates__table tbody tr:last-child td { border-block-end: 0; }

.prc-rates__feenote {
  margin-block-start: var(--s-5);
  max-width: 68ch;
  font-size: var(--fs-xs);
  line-height: var(--lh-relaxed);
  color: var(--text-muted);
}

@media (max-width: 30em) {
  .prc-rates__block { padding: var(--s-6); }
}