/* Pricing (/pricing/, /us/pricing/, /pricing/rates/). Every class is prefixed pr-.
   The fee calculator keeps site.js's contract ([data-fees], [data-fees-amount], [data-surcharge],
   [data-fees-out]); everything here is presentation. Its rate meter reads the ticked boxes with
   :has(), so it needs no script of its own. */

/* ---- Segment colours: one per part of a rate, used by the legend, the bars and the meter ---- */
.pr-seg--base {
  --seg: var(--blue-500);
  --w: 15.8%; /* 0.79% on a 5% scale */
}
.pr-seg--amex {
  --seg: var(--lilac-500);
  --w: 20%;
}
.pr-seg--commercial {
  --seg: var(--sunrise-400);
  --w: 40%;
}
.pr-seg--foreign {
  --seg: var(--mint-500);
  --w: 40%;
}
.pr-seg--flat {
  --seg: var(--blue-500);
  --w: 49.8%; /* 2.49% on a 5% scale (the fixed fee is shown in words) */
}
.pr-seg--intl {
  --seg: var(--mint-500);
  --w: 30%;
}

/* ---- Hero ---- */
.pr-hero {
  padding-bottom: 152px;
}
.pr-hero__grid {
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.92fr);
  gap: 64px;
}
.pr-hero__title {
  font-size: clamp(40px, 4.6vw, 62px);
  line-height: 1.04;
  letter-spacing: -0.035em;
  font-weight: 800;
  font-family: var(--font-display);
}
.pr-hero__plus {
  display: block;
  background: linear-gradient(100deg, var(--mint-300) 0%, var(--mint-400) 40%, var(--blue-200) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Country switch: three links styled as a segmented control. */
.pr-region {
  display: inline-flex;
  align-self: flex-start;
  flex-wrap: wrap;
  gap: 2px;
  padding: 4px;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.14);
}
.pr-region a {
  padding: 7px 14px;
  border-radius: var(--radius-pill);
  font-size: var(--fs-label);
  font-weight: 500;
  line-height: 1.2;
  color: var(--ink-200);
  text-decoration: none;
  transition:
    background 0.2s ease,
    color 0.2s ease;
}
.pr-region a:hover {
  color: var(--text-inverse);
  background: rgba(255, 255, 255, 0.08);
}
.pr-region a[aria-current="page"] {
  background: var(--surface-card);
  color: var(--ink-900);
}
.pr-region--light {
  background: var(--surface-card);
  border-color: var(--ink-200);
  box-shadow: var(--shadow-sm);
}
.pr-region--light a {
  color: var(--ink-600);
}
.pr-region--light a:hover {
  color: var(--ink-900);
  background: var(--ink-50);
}
.pr-region--light a[aria-current="page"] {
  background: var(--ink-900);
  color: var(--text-inverse);
}

/* The hero figure: a payment's breakdown, with the Tuppence card behind it. */
.pr-fig {
  position: relative;
  max-width: 500px;
  margin: 0 0 0 auto;
  padding: 128px 0 40px;
}
.pr-slip {
  position: relative;
  z-index: 2;
  width: 88%;
  padding: 24px 26px 20px;
  border-radius: 22px;
  background: var(--surface-card);
  color: var(--ink-900);
  box-shadow:
    0 40px 80px -24px rgba(5, 8, 30, 0.6),
    0 0 0 1px rgba(11, 16, 32, 0.04);
}
.pr-slip__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}
.pr-slip__shop {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.pr-slip__shop b {
  display: block;
  font-size: var(--fs-label);
}
.pr-slip__shop small {
  display: block;
  font-size: var(--fs-caption);
  color: var(--ink-500);
  white-space: nowrap;
}
.pr-slip__logo {
  display: grid;
  place-items: center;
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: linear-gradient(150deg, var(--blue-400), var(--blue-700));
  color: var(--text-inverse);
  font-weight: 700;
  font-size: 15px;
}
.pr-slip__amount {
  margin: 18px 0 10px;
  font-size: 46px;
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.pr-slip__rows {
  display: flex;
  flex-direction: column;
}
.pr-slip__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding: 11px 0;
  border-top: 1px dashed var(--ink-200);
  font-size: var(--fs-label);
  color: var(--ink-600);
}
.pr-slip__row b {
  color: var(--ink-900);
  font-variant-numeric: tabular-nums;
}
.pr-slip__row small {
  margin-left: 6px;
  font-size: var(--fs-caption);
  color: var(--ink-400);
}
.pr-slip__row--net {
  color: var(--ink-900);
  font-weight: 600;
}
.pr-slip__row--net b {
  font-size: 20px;
  color: var(--mint-700);
}
/* The fee at its true size: 0.79% of the bar. */
.pr-slip__meter {
  position: relative;
  display: flex;
  justify-content: flex-end;
  height: 8px;
  margin-top: 6px;
  border-radius: var(--radius-pill);
  background: linear-gradient(90deg, var(--mint-300), var(--mint-500));
  overflow: hidden;
}
.pr-slip__fee {
  width: 0.79%;
  min-width: 3px;
  background: var(--blue-600);
}
.pr-slip__foot {
  margin-top: 12px;
  font-size: var(--fs-caption);
  color: var(--ink-500);
}
[data-sequence][data-step] .pr-slip__row:not(.is-on) {
  transform: translateY(8px);
}

/* The Tuppence card, drawn in CSS. */
.pr-tcard {
  position: absolute;
  z-index: 1;
  top: 0;
  right: 0;
  width: 64%;
  aspect-ratio: 1.586;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 18px 20px;
  border-radius: 18px;
  background:
    radial-gradient(80% 90% at 100% 0%, rgba(0, 209, 167, 0.55) 0%, transparent 60%),
    linear-gradient(145deg, var(--ink-900) 0%, var(--blue-800) 55%, var(--blue-600) 100%);
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: var(--text-inverse);
  transform: rotate(7deg);
  box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.55);
}
.pr-tcard__top {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: -0.01em;
}
.pr-tcard__wave {
  position: absolute;
  top: 18px;
  right: 18px;
  opacity: 0.7;
}
.pr-tcard__label {
  margin-top: 18px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mint-200);
}
.pr-tcard__rate {
  font-size: 34px;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.05;
}
[data-sequence][data-step] .pr-tcard:not(.is-on) {
  transform: translate(-6%, 14%) rotate(-2deg);
}
.pr-fig__chip {
  z-index: 3;
  right: -4%;
  bottom: 0;
}
[data-sequence][data-step] .pr-fig__chip:not(.is-on) {
  transform: translateY(10px);
}
.pr-fig__toggle {
  position: absolute;
  left: 0;
  bottom: 0;
}

/* ---- What you never pay (overlaps the hero's lower edge) ---- */
.pr-never {
  position: relative;
  z-index: 2;
  margin-top: -64px;
}
.pr-never__card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 40px;
  padding: 28px 36px;
  border-radius: var(--radius-panel);
  background: var(--surface-card);
  box-shadow:
    0 30px 60px -30px rgba(11, 16, 32, 0.35),
    0 0 0 1px rgba(11, 16, 32, 0.05);
}
.pr-never__title {
  max-width: 7em;
  font-size: var(--fs-h4);
  line-height: 1.2;
  letter-spacing: -0.01em;
}
.pr-never__list {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
}
.pr-never__list li {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 4px 20px;
  border-left: 1px solid var(--ink-100);
}
.pr-never__list b {
  font-size: 34px;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.05;
  color: var(--blue-500);
  font-variant-numeric: tabular-nums;
}
.pr-never__list span {
  font-size: var(--fs-label);
  line-height: 1.35;
  color: var(--ink-600);
}

/* ---- The rate card: the headline rate beside every card's rate, drawn as a bar ---- */
.pr-rates__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.4fr);
  gap: 24px;
  align-items: stretch;
}
.pr-feature {
  gap: 18px;
  padding: 40px 36px;
}
.pr-feature__rate {
  font-size: clamp(64px, 7vw, 96px);
  letter-spacing: -0.05em;
}
.pr-feature__rate small {
  display: block;
  margin: 10px 0 0;
}
.pr-stack {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 36px;
  border-radius: var(--radius-panel);
  background: var(--surface-card);
  border: 1px solid var(--ink-100);
  box-shadow: var(--shadow-sm);
}
.pr-stack__head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 32px;
  align-items: end;
}
.pr-stack__head > p {
  color: var(--text-secondary);
  max-width: 420px;
}
.pr-stack__big {
  margin-top: 8px;
  font-size: var(--fs-h2);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1;
}
.pr-stack__big small {
  margin-left: 8px;
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: 0;
  color: var(--ink-500);
}
.pr-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--fs-caption);
  color: var(--ink-600);
}
.pr-legend li {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.pr-legend i {
  width: 10px;
  height: 10px;
  border-radius: 3px;
  background: var(--seg);
}
.pr-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-label);
}
.pr-table thead th {
  padding: 0 0 10px;
  font-size: var(--fs-caption);
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--ink-500);
  text-align: left;
  border-bottom: 1px solid var(--ink-100);
}
.pr-table thead th:last-child {
  text-align: right;
}
.pr-table tbody th,
.pr-table tbody td {
  padding: 14px 0;
  border-bottom: 1px solid var(--ink-100);
  vertical-align: middle;
}
.pr-table tbody tr:last-child th,
.pr-table tbody tr:last-child td {
  border-bottom: 0;
}
.pr-table tbody th {
  width: 40%;
  padding-right: 20px;
  text-align: left;
  font-weight: 500;
  color: var(--ink-900);
}
.pr-table tbody td {
  display: flex;
  align-items: center;
  gap: 16px;
}
.pr-table__rate {
  flex: none;
  min-width: 11.5em;
  text-align: right;
  color: var(--ink-500);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.pr-table__rate strong {
  color: var(--ink-900);
  font-size: var(--fs-body);
}
.pr-bar {
  flex: 1 1 auto;
  display: flex;
  gap: 2px;
  height: 10px;
  min-width: 60px;
  border-radius: var(--radius-pill);
  background: var(--ink-50);
  box-shadow: inset 0 0 0 1px var(--ink-100);
  overflow: hidden;
}
.pr-bar i {
  flex: none;
  width: var(--w);
  background: var(--seg);
}
.pr-bar--sm {
  height: 6px;
  margin-top: 16px;
}

/* ---- Fee calculator ---- */
.pr-calc {
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  max-width: 1040px;
  margin: 0 auto;
  border: 0;
  box-shadow:
    0 40px 80px -40px rgba(11, 16, 32, 0.35),
    0 0 0 1px rgba(11, 16, 32, 0.06);
}
.pr-calc__inputs {
  padding: 40px;
  gap: 28px;
}
.pr-money {
  position: relative;
}
.pr-money__sign {
  position: absolute;
  left: 20px;
  top: 50%;
  transform: translateY(-52%);
  font-size: 28px;
  font-weight: 600;
  color: var(--ink-400);
  pointer-events: none;
}
.pr-money .input {
  height: 72px;
  padding-left: 48px;
  font-size: 32px;
  font-weight: 700;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.pr-calc__checks {
  gap: 10px;
}
/* The calculator's method choice (the UK: card or Direct Debit), and its one-line hints. */
/* The store calculator (93-08): a platform's fields stay hidden until a person confirms a row. */
.pr-calc [data-store-theirs][hidden],
.pr-calc [data-fees-for][hidden] {
  display: none;
}
.pr-method {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px;
  padding: 4px;
  border-radius: 14px;
  background: var(--ink-50);
  box-shadow: inset 0 0 0 1px var(--ink-100);
}
.pr-method button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--ink-700);
}
.pr-method button[aria-pressed="true"] {
  background: var(--surface-card);
  color: var(--ink-900);
  box-shadow:
    0 1px 2px rgba(11, 16, 32, 0.08),
    0 0 0 1px rgba(11, 16, 32, 0.06);
}
.pr-method button:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
}
.pr-calc__hint {
  margin: 0;
  font-size: var(--fs-caption);
  line-height: 1.45;
  color: var(--ink-600);
}
.pr-toggle--renewal {
  --seg: var(--blue-500);
}
/* A Direct Debit has no card surcharges: the meter shows the base only. */
.pr-calc[data-method="bacs_debit"] .pr-meter i:not(.pr-seg--base) {
  display: none;
}
.pr-calc__checks legend {
  margin-bottom: 10px;
}
.pr-calc__checks .pr-toggle {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid var(--ink-200);
  border-radius: 14px;
  background: var(--surface-card);
  cursor: pointer;
  transition:
    border-color 0.2s ease,
    background 0.2s ease,
    box-shadow 0.2s ease;
}
.pr-toggle:hover {
  border-color: var(--ink-300);
}
.pr-toggle input {
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: var(--blue-500);
}
.pr-toggle__name {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--ink-900);
  font-weight: 500;
}
.pr-toggle__name::before {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 3px;
  background: var(--seg);
}
.pr-toggle .muted {
  font-variant-numeric: tabular-nums;
}
.pr-toggle--amex {
  --seg: var(--lilac-500);
}
.pr-toggle--commercial {
  --seg: var(--sunrise-400);
}
.pr-toggle--foreign {
  --seg: var(--mint-500);
}
.pr-toggle:has(input:checked) {
  border-color: var(--seg);
  background: color-mix(in srgb, var(--seg) 8%, #fff);
  box-shadow: 0 0 0 1px var(--seg);
}
.pr-toggle:has(input:focus-visible) {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
}
.pr-calc__out {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding: 40px;
  gap: 12px;
  justify-content: center;
}
.pr-calc__out::before {
  content: "";
  position: absolute;
  z-index: -1;
  width: 70%;
  height: 80%;
  right: -22%;
  top: -36%;
  border-radius: var(--radius-panel);
  transform: skewY(-22deg);
  background: linear-gradient(
    160deg,
    var(--mint-300) 0%,
    var(--mint-500) 50%,
    rgba(59, 91, 255, 0.6) 100%
  );
  opacity: 0.22;
}
.pr-calc__out .calc__big {
  font-size: clamp(52px, 6vw, 76px);
  letter-spacing: -0.045em;
}
.pr-calc__out .calc__note {
  color: var(--ink-300);
}
.pr-calc__out [data-fees-out="rate"] {
  font-size: var(--fs-label);
  color: var(--ink-200);
}
/* The rate, drawn: the base always, each surcharge as its box is ticked. */
.pr-meter {
  display: flex;
  gap: 0;
  height: 12px;
  margin: 8px 0 6px;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.1);
  overflow: hidden;
}
.pr-meter i {
  flex: none;
  width: 0;
  background: var(--seg);
  transition:
    width 0.45s cubic-bezier(0.2, 0.7, 0.2, 1),
    margin 0.45s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.pr-meter .pr-seg--base,
.pr-meter .pr-seg--flat,
.pr-calc:has([data-surcharge="amex"]:checked) .pr-meter .pr-seg--amex,
.pr-calc:has([data-surcharge="commercial"]:checked) .pr-meter .pr-seg--commercial,
.pr-calc:has([data-surcharge="foreign"]:checked) .pr-meter .pr-seg--foreign,
.pr-calc:has([data-surcharge="foreign"]:checked) .pr-meter .pr-seg--intl {
  width: var(--w);
}
.pr-calc:has([data-surcharge="amex"]:checked) .pr-meter .pr-seg--amex,
.pr-calc:has([data-surcharge="commercial"]:checked) .pr-meter .pr-seg--commercial,
.pr-calc:has([data-surcharge="foreign"]:checked) .pr-meter .pr-seg--foreign,
.pr-calc:has([data-surcharge="foreign"]:checked) .pr-meter .pr-seg--intl {
  margin-left: 2px;
}
.pr-calc__net {
  margin-top: 6px;
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  align-items: baseline;
  font-size: var(--fs-body);
}
.pr-calc__net strong {
  font-size: 26px;
  letter-spacing: -0.02em;
  color: var(--mint-300);
}

/* Worked examples under the calculator */
.pr-examples {
  display: grid;
  grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr));
  gap: 20px;
  max-width: 1040px;
  margin: 32px auto 0;
}
.pr-examples--2 {
  --cols: 2;
}
.pr-example {
  padding: 24px 26px;
  border-radius: var(--radius-lg);
  background: var(--surface-card);
  border: 1px solid var(--ink-100);
}
.pr-example .h3 {
  margin: 6px 0 2px;
  font-variant-numeric: tabular-nums;
}
.pr-example p:not(.h3) {
  color: var(--text-secondary);
  font-size: var(--fs-label);
}

/* ---- Everything else: the price list as grouped panels ---- */
.pr-lists {
  columns: 2 380px;
  column-gap: 24px;
}
.pr-list {
  break-inside: avoid;
  margin: 0 0 24px;
  padding: 28px 30px 20px;
  border-radius: var(--radius-panel);
  background: var(--surface-card);
  border: 1px solid var(--ink-100);
  box-shadow: var(--shadow-sm);
  scroll-margin-top: 96px;
}
.pr-list__title {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 8px;
  font-size: var(--fs-h4);
  line-height: 1.25;
  letter-spacing: -0.01em;
}
.pr-list__title .card__icon {
  flex: none;
  width: 40px;
  height: 40px;
  margin: 0;
  border-radius: 12px;
}
.pr-list__title a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--ink-200);
  text-underline-offset: 4px;
}
.pr-list__title a:hover {
  text-decoration-color: currentColor;
}
.pr-list dl {
  margin: 0;
}
.pr-list dl > div {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: 16px;
  padding: 14px 0;
  border-top: 1px solid var(--ink-100);
  font-size: var(--fs-label);
}
.pr-list dl > div:first-child {
  border-top: 0;
}
.pr-list dt {
  font-weight: 500;
  color: var(--ink-900);
}
.pr-list dd {
  margin: 0;
  color: var(--text-secondary);
}
.pr-list__soon dt,
.pr-list__soon dd {
  color: var(--ink-500);
}
.pr-list__soon dd {
  padding: 6px 10px;
  border: 1px dashed var(--ink-300);
  border-radius: 10px;
}
.pr-list__note {
  margin: 4px 0 8px;
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--ink-50);
  font-size: var(--fs-caption);
  line-height: 1.5;
  color: var(--ink-600);
}
.pr-list:target {
  border-color: var(--blue-300);
  box-shadow: 0 0 0 3px var(--blue-100);
}

/* ---- Payouts: the settlement track over the payout rows ---- */
.pr-payouts {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 36px 32px;
  border-radius: var(--radius-panel);
  background: linear-gradient(160deg, var(--blue-50) 0%, var(--lilac-100) 100%);
}
.pr-payouts::before {
  content: "";
  position: absolute;
  z-index: -1;
  width: 60%;
  height: 80%;
  right: -16%;
  top: -30%;
  border-radius: var(--radius-panel);
  transform: skewY(-22deg);
  background: linear-gradient(160deg, var(--blue-300) 0%, var(--blue-500) 100%);
  opacity: 0.3;
}
/* The settlement track: T+7 → T+3 (→ T+1). `ol.pr-track` outranks site.css's `ol[class]` reset,
   which otherwise zeroes the padding. Each step after the first draws the connector back to the
   previous step's pill, so the line always runs centre to centre, whatever the number of steps. */
ol.pr-track {
  --pill: 34px;
  position: relative;
  display: grid;
  grid-auto-columns: minmax(0, 1fr);
  grid-auto-flow: column;
  align-items: start;
  margin: 0;
  padding: 22px 16px 20px;
  list-style: none;
  border-radius: var(--radius-lg);
  background: var(--surface-card);
  box-shadow:
    0 12px 30px -18px rgba(11, 16, 32, 0.25),
    0 0 0 1px rgba(11, 16, 32, 0.05);
}
.pr-track li {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 0 8px;
  text-align: center;
}
.pr-track li + li::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: calc(var(--pill) / 2 - 1px);
  right: 50%;
  width: 100%;
  height: 2px;
  border-radius: 1px;
  background: linear-gradient(90deg, var(--ink-200), var(--blue-300));
}
.pr-track li.is-now + li::before {
  background: linear-gradient(90deg, var(--blue-300), var(--ink-200));
}
.pr-track b {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  min-width: 64px;
  height: var(--pill);
  padding: 0 14px;
  border-radius: var(--radius-pill);
  background: var(--surface-card);
  border: 1px solid var(--ink-200);
  font-size: var(--fs-label);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--ink-900);
}
.pr-track span {
  max-width: 15em;
  font-size: var(--fs-caption);
  line-height: 1.4;
  color: var(--ink-600);
  text-wrap: balance;
}
.pr-track .is-now b {
  background: var(--blue-500);
  border-color: var(--blue-500);
  color: var(--text-inverse);
  box-shadow: 0 0 0 5px rgba(59, 91, 255, 0.18);
}

/* ---- Cashback panel: the card above the worked example ---- */
.pr-cash {
  padding-top: 40px;
}
.pr-tcard--static {
  position: relative;
  justify-content: space-between;
  top: auto;
  right: auto;
  width: min(300px, 80%);
  margin: 0 0 28px;
  transform: rotate(-3deg);
}
.pr-tcard--static .pr-tcard__label {
  margin-top: auto;
}

/* ---- /us/pricing/: the worked example card ---- */
.pr-compare {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 36px;
  border-radius: var(--radius-panel);
  background: var(--surface-card);
  border: 1px solid var(--ink-100);
  box-shadow: var(--shadow-sm);
}
/* ---- /us/pricing/: payouts and cashback side by side ---- */
.pr-duo {
  gap: 24px;
  align-items: stretch;
}
.pr-duo__card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  padding: 40px;
  border-radius: var(--radius-panel);
  background: var(--surface-card);
  border: 1px solid var(--ink-100);
  box-shadow: var(--shadow-sm);
}
.pr-duo__card .pr-track {
  align-self: stretch;
  background: var(--ink-50);
  box-shadow: none;
}
.pr-duo__card--dark {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: var(--gradient-hero);
  border-color: transparent;
  color: var(--text-inverse);
}
.pr-duo__card--dark .eyebrow {
  color: var(--mint-300);
}
.pr-duo__card--dark .lead {
  color: var(--ink-200);
}
.pr-duo__card--dark .small {
  color: var(--ink-300);
}
.pr-duo__card--dark .pr-tcard--static {
  margin: 4px 0 4px 8px;
}

/* ---- /pricing/rates/: the two models and the territory tables ---- */
.pr-models {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}
.pr-model {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 32px;
  border-radius: var(--radius-panel);
  background: var(--surface-card);
  border: 1px solid var(--ink-100);
  box-shadow: var(--shadow-sm);
}
.pr-model p {
  color: var(--text-secondary);
}
.pr-model__art {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 8px;
  padding: 20px;
  border-radius: var(--radius-lg);
  background: var(--ink-50);
}
.pr-model__art .pr-bar {
  height: 14px;
  background: var(--surface-card);
}
.pr-model__art small {
  display: flex;
  justify-content: space-between;
  font-size: var(--fs-caption);
  color: var(--ink-500);
}
.pr-territory .table {
  min-width: 720px;
}
.pr-territory .table tbody th {
  white-space: nowrap;
}
.pr-territory .table td:nth-child(2) {
  background: var(--blue-50);
}
.pr-territory .table thead th:nth-child(2) {
  background: var(--blue-100);
  color: var(--blue-800);
}
.pr-territory .table td,
.pr-territory .table th {
  font-variant-numeric: tabular-nums;
}
.pr-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  font-size: var(--fs-caption);
  font-weight: 600;
  background: var(--mint-50);
  color: var(--mint-800);
}
.pr-pill--off {
  background: var(--ink-50);
  color: var(--ink-600);
}
.pr-model .card__title {
  display: flex;
  align-items: center;
  gap: 12px;
}
.pr-model .card__title .card__icon {
  width: 40px;
  height: 40px;
  margin: 0;
  border-radius: 12px;
}
.pr-rules-panel {
  margin-top: 24px;
  padding: 32px;
  border-radius: var(--radius-panel);
  background: var(--ink-50);
}
.pr-rules-panel .h4 {
  margin-bottom: 20px;
}
.pr-rules {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 48px;
}
.pr-rules li {
  font-size: var(--fs-label);
  color: var(--text-secondary);
}
.pr-model__where {
  margin-left: auto;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  background: var(--ink-50);
  font-size: var(--fs-caption);
  font-weight: 600;
  letter-spacing: 0;
  color: var(--ink-600);
}

/* The model bars fill from the left once their card is revealed, one segment after another. */
.pr-model .pr-bar i {
  transform-origin: left center;
  transition: transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.pr-model .pr-bar i:nth-child(2) {
  transition-delay: 0.15s;
}
.pr-model .pr-bar i:nth-child(3) {
  transition-delay: 0.3s;
}
.js .pr-model.reveal:not(.is-visible) .pr-bar i {
  transform: scaleX(0);
}

/* ---- /pricing/rates/: the hero's two headline rates ---- */
.pr-rates-hero.page-hero {
  padding-bottom: 56px;
}
.pr-hero-rates {
  position: relative;
  display: grid;
  gap: 16px;
  max-width: 400px;
  margin-left: auto;
}
.pr-hero-rate {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 24px 28px;
  border-radius: var(--radius-panel);
  background: var(--surface-card);
  box-shadow:
    0 24px 48px -28px rgba(11, 16, 32, 0.35),
    0 0 0 1px rgba(11, 16, 32, 0.05);
  animation: pr-rise 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
.pr-hero-rate:first-child {
  margin-right: 40px;
}
.pr-hero-rate--us {
  margin-left: 40px;
  animation-delay: 0.12s;
}
.pr-hero-rate__tag {
  font-size: var(--fs-caption);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--blue-600);
}
.pr-hero-rate--us .pr-hero-rate__tag {
  color: var(--mint-700);
}
.pr-hero-rate strong {
  font-size: 40px;
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1.1;
  color: var(--ink-900);
  font-variant-numeric: tabular-nums;
}
.pr-hero-rate small {
  font-size: var(--fs-caption);
  color: var(--ink-500);
}
@keyframes pr-rise {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
}

/* ---- /pricing/rates/: the tables' titles and notes ---- */
#rates .section-head {
  margin-bottom: 40px;
}
.pr-table-title {
  margin-bottom: 16px;
}
.pr-table-title--next {
  margin-top: 64px;
}
.pr-notes {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
  font-size: var(--fs-caption);
  line-height: 1.5;
  color: var(--ink-600);
}
.pr-notes li {
  padding-left: 14px;
  background:
    radial-gradient(circle, var(--blue-300) 2.5px, transparent 3px) 0 0.45em / 6px 6px no-repeat;
}
.pr-notes strong {
  color: var(--ink-800);
}

/* ---- /pricing/rates/: other countries and the fine print ---- */
.pr-soon__card {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px 48px;
  padding: 40px;
  border-radius: var(--radius-panel);
  background: linear-gradient(160deg, var(--blue-50) 0%, var(--lilac-100) 100%);
}
.pr-soon__card .stack {
  gap: 12px;
  max-width: 640px;
}
.pr-soon__card .btn {
  flex: none;
}
.pr-fineprint {
  max-width: 880px;
  margin-top: 32px;
}
.pr-cash-side {
  display: flex;
  flex-direction: column;
  gap: 28px;
  padding: 36px;
  border-radius: var(--radius-panel);
  background: linear-gradient(160deg, var(--blue-50) 0%, var(--lilac-100) 100%);
}
.pr-cash-side .pr-tcard--static {
  margin: 0 auto;
}
.pr-cashback-tiles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin: 0;
}
dl.pr-cashback-tiles > div {
  padding: 22px 24px;
  border-radius: var(--radius-lg);
  background: var(--surface-card);
  box-shadow: 0 0 0 1px rgba(11, 16, 32, 0.05);
}
.pr-cashback-tiles dt {
  font-size: var(--fs-label);
  color: var(--ink-600);
}
.pr-cashback-tiles dd {
  margin: 6px 0 0;
  font-size: 44px;
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--ink-900);
}
.pr-cashback-tiles small {
  display: block;
  margin-top: 8px;
  font-size: var(--fs-caption);
  font-weight: 400;
  letter-spacing: 0;
  color: var(--ink-500);
}

/* ---- Responsive ---- */
/* Direct Debit compared (59-13, {{compare_table:bacs_debit}}): Tuppence's column tinted; on a
   phone the table scrolls inside its own frame, its row labels pinned. */
.pr-dd {
  margin-top: 48px;
}
.pr-dd__title {
  margin: 0 0 16px;
}
.pr-dd__table {
  min-width: 600px;
  table-layout: fixed;
  font-variant-numeric: tabular-nums;
}
.pr-dd__table thead th:first-child {
  width: 22%;
}
.pr-dd__table td {
  white-space: nowrap;
}
.pr-dd__table tbody tr:first-child td {
  white-space: normal;
  color: var(--ink-600);
}
.pr-dd__table th:first-child {
  position: sticky;
  left: 0;
  z-index: 1;
  background: var(--surface-card);
}
.pr-dd__table thead th:first-child {
  background: var(--ink-50);
}
.pr-dd__table .pr-dd__us {
  background: var(--mint-50);
  color: var(--ink-900);
}
.pr-dd__table thead .pr-dd__us {
  background: var(--mint-100);
  color: var(--mint-900);
}
.pr-dd__table tbody tr:first-child .pr-dd__us {
  color: var(--ink-900);
  font-weight: 600;
}
.pr-dd__notes {
  margin-top: 16px;
  max-width: 88ch;
}

@media (max-width: 1100px) {
  .pr-hero__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 48px;
  }
  .pr-fig {
    margin: 0 auto;
  }
  .pr-never__card {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
  }
  .pr-never__title {
    max-width: none;
  }
  .pr-never__list li:first-child {
    padding-left: 0;
    border-left: 0;
  }
  .pr-rates__grid {
    grid-template-columns: minmax(0, 1fr);
  }
}
@media (max-width: 900px) {
  .pr-hero {
    padding-bottom: 128px;
  }
  .pr-never__list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px 0;
  }
  .pr-never__list li:nth-child(4) {
    padding-left: 0;
    border-left: 0;
  }
  .pr-stack__head {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }
  .pr-calc,
  .pr-duo,
  .pr-examples,
  .pr-models {
    grid-template-columns: minmax(0, 1fr);
  }
}
@media (max-width: 640px) {
  .pr-dd__table th,
  .pr-dd__table td {
    padding: 12px 14px;
  }
  .pr-dd__table th:first-child {
    white-space: normal;
    min-width: 7em;
  }
  .pr-region {
    display: flex;
    width: 100%;
  }
  .pr-region a {
    flex: 1 1 auto;
    padding: 7px 8px;
    font-size: 13px;
    text-align: center;
  }
  .pr-slip__shop small {
    white-space: normal;
  }
  .pr-fig {
    padding-top: 96px;
  }
  .pr-slip {
    width: 94%;
    padding: 20px 18px 16px;
  }
  .pr-slip__amount {
    font-size: 38px;
  }
  .pr-slip__row small {
    display: block;
    margin: 2px 0 0;
  }
  .pr-tcard {
    width: 62%;
    padding: 14px 16px;
  }
  .pr-tcard__rate {
    font-size: 26px;
  }
  .pr-tcard__top {
    font-size: 13px;
  }
  .pr-tcard__label {
    font-size: 9px;
  }
  .pr-tcard--static {
    width: 78%;
  }
  .pr-never {
    margin-top: -48px;
  }
  .pr-never__card {
    padding: 24px 20px;
  }
  .pr-never__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .pr-never__list li {
    padding: 2px 14px;
  }
  .pr-never__list li:nth-child(4) {
    padding-left: 14px;
    border-left: 1px solid var(--ink-100);
  }
  .pr-never__list li:nth-child(odd) {
    padding-left: 0;
    border-left: 0;
  }
  .pr-never__list b {
    font-size: 28px;
  }
  .pr-stack,
  .pr-duo__card,
  .pr-feature,
  .pr-compare,
  .pr-model {
    padding: 24px 20px;
  }
  .pr-table thead {
    display: none;
  }
  .pr-table,
  .pr-table tbody,
  .pr-table tr,
  .pr-table tbody th {
    display: block;
    width: auto;
  }
  .pr-table tr {
    padding: 14px 0;
    border-bottom: 1px solid var(--ink-100);
  }
  .pr-table tr:last-child {
    border-bottom: 0;
  }
  .pr-table tbody th,
  .pr-table tbody td {
    padding: 0;
    border: 0;
  }
  .pr-table tbody td {
    margin-top: 8px;
    gap: 12px;
  }
  .pr-table__rate {
    min-width: 0;
  }
  .pr-calc__inputs,
  .pr-calc__out {
    padding: 24px 20px;
  }
  .pr-list {
    padding: 22px 20px 14px;
  }
  .pr-list dl > div {
    grid-template-columns: minmax(0, 1fr);
    gap: 4px;
  }
  ol.pr-track {
    padding: 18px 4px 16px;
  }
  .pr-track li {
    padding: 0 4px;
  }
}

/* ---- /pricing/rates/: tablet and phone ---- */
@media (max-width: 900px) {
  .pr-hero-rates {
    max-width: none;
    margin: 8px 0 0;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .pr-hero-rate:first-child,
  .pr-hero-rate--us {
    margin: 0;
  }
  .pr-soon__card {
    flex-direction: column;
    align-items: flex-start;
  }
}
@media (max-width: 640px) {
  .pr-hero-rates {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }
  .pr-hero-rate {
    padding: 18px 20px;
  }
  .pr-hero-rate strong {
    font-size: 30px;
  }
  .pr-rules-panel,
  .pr-soon__card {
    padding: 24px 20px;
  }
  .pr-rules {
    grid-template-columns: minmax(0, 1fr);
  }
  /* Each country becomes a card of label–value rows, so nothing scrolls sideways. */
  .pr-territory {
    overflow: visible;
  }
  .pr-territory .table {
    min-width: 0;
  }
  .pr-territory .table thead {
    display: none;
  }
  .pr-territory .table,
  .pr-territory .table tbody,
  .pr-territory .table tr {
    display: block;
  }
  .pr-territory .table tr + tr {
    border-top: 1px solid var(--ink-100);
  }
  .pr-territory .table tbody th {
    display: block;
    padding: 16px 18px 8px;
    border: 0;
    font-size: var(--fs-body);
  }
  .pr-territory .table tbody td {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 8px 18px;
    border: 0;
    background: none;
    text-align: right;
  }
  .pr-territory .table tbody td:last-child {
    padding-bottom: 16px;
  }
  .pr-territory .table td[data-label]::before {
    content: attr(data-label);
    text-align: left;
    color: var(--ink-500);
  }
  .pr-territory .table td:nth-child(2) strong {
    color: var(--blue-700);
  }
  .pr-table-title--next {
    margin-top: 48px;
  }
  .pr-cashback-tiles {
    gap: 12px;
  }
  dl.pr-cashback-tiles > div {
    padding: 18px;
  }
  .pr-cashback-tiles dd {
    font-size: 34px;
  }
}
/* The fine print sits right above the closing CTA band, whose own section brings the top space. */
.pr-soon.section {
  padding-bottom: 0;
}

/* The row for a country that doesn't offer a method yet: muted, without the rate column's tint. */
.pr-territory .table .pr-territory__off th,
.pr-territory .table .pr-territory__off td {
  color: var(--ink-500);
  background: none;
}
@media (max-width: 640px) {
  .pr-territory .table .pr-territory__off td {
    justify-content: flex-start;
  }
}

/* ==== The UK page's sales layout (Oct 2026): hero ticks, the card-by-card panel, the
   "included" band, the calculator's keep bar and the fine print. Motion is transform and
   opacity only, and stops under prefers-reduced-motion. ==== */
.pr-grad {
  background: linear-gradient(
    100deg,
    var(--blue-500) 0%,
    var(--lilac-500) 55%,
    var(--mint-600) 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Hero: what's included, as ticks; and a slow light drifting behind the figure. */
.pr-hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.pr-hero::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -30% -10% auto auto;
  width: 70vw;
  max-width: 900px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(
    closest-side,
    rgba(0, 209, 167, 0.22),
    rgba(59, 91, 255, 0.12) 55%,
    transparent 75%
  );
  animation: pr-drift 18s ease-in-out infinite alternate;
  pointer-events: none;
}
@keyframes pr-drift {
  from {
    transform: translate3d(0, 0, 0) scale(1);
  }
  to {
    transform: translate3d(-8%, 10%, 0) scale(1.12);
  }
}
.pr-ticks {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 10px;
  margin: 4px 0 8px;
  padding: 0;
  list-style: none;
}
.pr-ticks li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px 6px 9px;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.14);
  font-size: var(--fs-label);
  font-weight: 500;
  color: var(--ink-100);
  animation: pr-rise 0.6s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
.pr-ticks li:nth-child(2) {
  animation-delay: 0.08s;
}
.pr-ticks li:nth-child(3) {
  animation-delay: 0.16s;
}
.pr-ticks li:nth-child(4) {
  animation-delay: 0.24s;
}
.pr-ticks svg {
  color: var(--mint-300);
}
@keyframes pr-rise {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
}

/* The headline rate card: a soft light sweeping across, and its own call to action. */
.pr-feature {
  overflow: hidden;
  isolation: isolate;
}
.pr-feature__glow {
  position: absolute;
  z-index: -1;
  inset: 0;
  background: linear-gradient(
    115deg,
    transparent 30%,
    rgba(255, 255, 255, 0.12) 45%,
    transparent 60%
  );
  transform: translateX(-100%);
  animation: pr-sweep 7s ease-in-out 1.2s infinite;
  pointer-events: none;
}
@keyframes pr-sweep {
  0% {
    transform: translateX(-100%);
  }
  35%,
  100% {
    transform: translateX(100%);
  }
}
.pr-feature__rate {
  background: linear-gradient(180deg, #fff 30%, var(--mint-200) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.pr-feature__rate small {
  color: var(--ink-200);
  -webkit-text-fill-color: var(--ink-200);
}
.pr-feature__cta {
  align-self: flex-start;
  margin-top: auto;
}

/* Card by card: each card type with its price, the headline rows first. */
.pr-cards {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 32px;
  border-radius: var(--radius-panel);
  background: var(--surface-card);
  border: 1px solid var(--ink-100);
  box-shadow:
    0 30px 60px -36px rgba(11, 16, 32, 0.3),
    var(--shadow-sm);
}
.pr-cards__head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px 24px;
}
.pr-cards__head p {
  max-width: 380px;
  font-size: var(--fs-label);
  color: var(--text-secondary);
}
.pr-cards__table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0 8px;
  margin: -8px 0;
}
.pr-cards__table th,
.pr-cards__table td {
  padding: 14px 18px;
  background: var(--ink-50);
  transition:
    background 0.25s ease,
    transform 0.25s ease;
}
.pr-cards__table th {
  border-radius: 16px 0 0 16px;
  text-align: left;
  font-weight: 400;
}
.pr-cards__name {
  display: flex;
  align-items: center;
  gap: 14px;
}
.pr-cards__name > span:last-child {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.pr-cards__table th b {
  font-weight: 600;
  color: var(--ink-900);
}
.pr-cards__table th small {
  font-size: var(--fs-caption);
  color: var(--ink-500);
}
.pr-cards__table td {
  border-radius: 0 16px 16px 0;
  text-align: right;
  white-space: nowrap;
}
.pr-cards__table td strong {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink-900);
  font-variant-numeric: tabular-nums;
}
.pr-cards__table tr:hover th,
.pr-cards__table tr:hover td {
  background: var(--blue-50);
}
.pr-cards__table tr.is-hero th,
.pr-cards__table tr.is-hero td {
  background: var(--blue-50);
}
.pr-cards__table tr.is-hero td strong {
  color: var(--blue-600);
}
.pr-cards__tag {
  display: inline-block;
  margin-right: 12px;
  padding: 3px 9px;
  border-radius: var(--radius-pill);
  background: var(--mint-100);
  color: var(--mint-800);
  font-size: 12px;
  font-weight: 600;
  vertical-align: 3px;
}
.pr-cards__icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: var(--blue-100);
  color: var(--blue-700);
}
.pr-cards__icon--lilac {
  background: var(--lilac-100);
  color: var(--lilac-700);
}
.pr-cards__icon--sunrise {
  background: var(--sunrise-100);
  color: var(--sunrise-700);
}
.pr-cards__icon--mint {
  background: var(--mint-100);
  color: var(--mint-800);
}
/* The rows arrive one after another as the panel is revealed. */
.js .pr-cards.reveal tbody tr {
  opacity: 0;
  transform: translateY(10px);
  transition:
    opacity 0.5s ease,
    transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.js .pr-cards.reveal.is-visible tbody tr {
  opacity: 1;
  transform: none;
}
.js .pr-cards.reveal.is-visible tbody tr:nth-child(2) {
  transition-delay: 0.07s;
}
.js .pr-cards.reveal.is-visible tbody tr:nth-child(3) {
  transition-delay: 0.14s;
}
.js .pr-cards.reveal.is-visible tbody tr:nth-child(4) {
  transition-delay: 0.21s;
}
.js .pr-cards.reveal.is-visible tbody tr:nth-child(5) {
  transition-delay: 0.28s;
}

/* The fine print. */
.pr-fine {
  font-size: 12px;
  line-height: 1.5;
  color: var(--ink-500);
}
.pr-fine--center {
  text-align: center;
}
.pr-calc__checks .pr-fine {
  margin: 2px 2px 0;
}
.faq .pr-fine {
  margin-top: 8px;
}

/* Included as standard: four reasons, each lifting on hover. */
.pr-why__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
}
.pr-why__card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 28px 26px;
  border-radius: var(--radius-panel);
  background: var(--surface-card);
  border: 1px solid var(--ink-100);
  box-shadow: var(--shadow-sm);
  transition:
    transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1),
    box-shadow 0.35s ease,
    border-color 0.35s ease;
}
.pr-why__card:hover {
  transform: translateY(-4px);
  border-color: var(--blue-100);
  box-shadow: 0 24px 48px -28px rgba(42, 69, 230, 0.35);
}
.pr-why__card p {
  font-size: var(--fs-label);
  color: var(--text-secondary);
}
.pr-why__icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-bottom: 6px;
  border-radius: 14px;
  background: var(--blue-50);
  color: var(--blue-600);
}
.pr-why__icon--mint {
  background: var(--mint-50);
  color: var(--mint-700);
}
.pr-why__icon--lilac {
  background: var(--lilac-50);
  color: var(--lilac-600);
}
.pr-why__icon--sunrise {
  background: var(--sunrise-50);
  color: var(--sunrise-600);
}

/* The calculator: what you keep, as a bar that eases to its new width. */
.pr-keep {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 10px 0 4px;
}
.pr-keep__bar {
  display: block;
  height: 12px;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.1);
  overflow: hidden;
}
.pr-keep__bar i {
  display: block;
  height: 100%;
  width: var(--keep, 0%);
  border-radius: inherit;
  background: linear-gradient(90deg, var(--mint-400), var(--mint-200));
  box-shadow: 0 0 16px rgba(77, 226, 195, 0.5);
  transition: width 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.pr-keep__label {
  font-size: var(--fs-label);
  color: var(--ink-200);
}
.pr-keep__label b {
  color: var(--mint-300);
  font-variant-numeric: tabular-nums;
}
.pr-calc__out [data-fees-out="fee"] {
  transition: color 0.3s ease;
}

.pr-example .h3 span {
  font-size: var(--fs-label);
  font-weight: 500;
  color: var(--ink-500);
}
.pr-example {
  transition:
    transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1),
    box-shadow 0.35s ease;
}
.pr-example:hover {
  transform: translateY(-3px);
  box-shadow: 0 20px 40px -28px rgba(11, 16, 32, 0.35);
}

@media (max-width: 1100px) {
  .pr-why__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 640px) {
  .pr-why__grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .pr-cards {
    padding: 20px 16px;
  }
  .pr-cards__table th,
  .pr-cards__table td {
    padding: 12px;
  }
  .pr-cards__name {
    gap: 10px;
  }
  .pr-cards__icon {
    width: 32px;
    height: 32px;
    border-radius: 10px;
  }
  .pr-cards__tag {
    display: none;
  }
  .pr-cards__table td strong {
    font-size: 18px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .pr-hero::after,
  .pr-feature__glow,
  .pr-ticks li {
    animation: none;
  }
  .pr-keep__bar i,
  .pr-why__card,
  .pr-example,
  .js .pr-cards.reveal tbody tr {
    transition: none;
  }
  .js .pr-cards.reveal tbody tr {
    opacity: 1;
    transform: none;
  }
}
.pr-cards__foot {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: auto;
  padding: 16px 18px;
  border-radius: 16px;
  border: 1px dashed var(--ink-200);
  color: var(--ink-900);
  text-decoration: none;
  transition:
    border-color 0.25s ease,
    background 0.25s ease;
}
.pr-cards__foot > span:nth-child(2) {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
}
.pr-cards__foot small {
  font-size: var(--fs-caption);
  color: var(--ink-500);
}
.pr-cards__foot > svg {
  color: var(--blue-500);
  transition: transform 0.25s ease;
}
.pr-cards__foot:hover {
  border-color: var(--blue-300);
  background: var(--blue-50);
}
.pr-cards__foot:hover > svg {
  transform: translateX(4px);
}
.pr-cards__icon--dark {
  background: var(--ink-900);
  color: var(--mint-300);
}

/* ---- Phones (mobile audit, Oct 2026) ---- */
@media (max-width: 640px) {
  /* /us/pricing/: the foreign card's sum (rate + surcharge = total) was one unbreakable line that
     pushed the page to 367px at 320px; it now wraps under its bar when it doesn't fit beside it. */
  .pr-table tbody td {
    flex-wrap: wrap;
    row-gap: 6px;
  }
  .pr-table__rate {
    flex: 1 0 auto;
    max-width: 100%;
    white-space: normal;
  }
  /* A very large amount in the calculator wraps inside the panel instead of running off it. */
  .pr-calc__out .calc__big {
    overflow-wrap: break-word;
  }
}
@media (max-width: 400px) {
  /* The hero's payment slip: the "Succeeded" badge drops under the shop's name rather than
     squeezing it to three lines. */
  .pr-slip__head {
    flex-wrap: wrap;
    row-gap: 10px;
  }
}
/* The price list, grouped by product family (M106). */
.pr-group {
  column-span: all;
  margin: 8px 0 14px;
  padding-top: 18px;
  border-top: 1px solid var(--ink-100);
  font-size: var(--fs-caption);
  font-weight: 600;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
}
.pr-group:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}
.pr-group a {
  color: var(--blue-600);
}