/* ═══════════════════════════════════════════════════════════════════
   RATE-EXPLAINER.CSS — /how-your-rate-works only.
   Self-contained rx-* namespace so it cannot collide with existing
   sheets. All colour comes from the canonical tokens in crane.css.
═══════════════════════════════════════════════════════════════════ */

.rx-section { padding: 68px 0; border-top: 1px solid var(--line); }
.rx-section:first-of-type { border-top: 0; }
.rx-section h2 {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 700;
  font-size: clamp(1.55rem, 3.1vw, 2.35rem);
  line-height: 1.18;
  margin: 0 0 14px;
  color: var(--ink);
  max-width: 26ch;
  text-wrap: balance;
}
.rx-section h2 em { font-style: italic; color: var(--crane-red); }
.rx-lede {
  font-size: 1.06rem;
  line-height: 1.62;
  color: var(--mut);
  max-width: 62ch;
  margin: 0 0 30px;
}
.rx-note {
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--mut-lt);
  margin: 20px 0 0;
  max-width: 64ch;
}

/* ─── the stacked composition bar ─── */
.rx-stack { display: flex; width: 100%; height: 72px; overflow: hidden; }
.rx-stack span {
  display: flex;
  align-items: center;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.13em;
  white-space: nowrap;
}
.rx-stack .rx-ic   { flex: 72; background: var(--ink);       color: var(--on-ink); padding-left: 18px; }
.rx-stack .rx-net  { flex: 8;  background: var(--crane-red); }
.rx-stack .rx-mkp  { flex: 20; background: var(--gold);      color: var(--ink); justify-content: center; }

/* ─── keyed list under a diagram ─── */
.rx-keys { list-style: none; margin: 30px 0 0; padding: 0; display: grid; gap: 22px; }
.rx-keys li { display: grid; grid-template-columns: 20px 1fr; gap: 16px; align-items: start; }
.rx-swatch { width: 20px; height: 20px; margin-top: 6px; }
.rx-swatch--ic  { background: var(--ink); }
.rx-swatch--net { background: var(--crane-red); }
.rx-swatch--mkp { background: var(--gold); }
.rx-keys h3 {
  font-family: 'Playfair Display', Georgia, serif;
  font-style: italic;
  font-weight: 700;
  font-size: 1.22rem;
  margin: 0 0 4px;
  color: var(--ink);
}
.rx-keys p { margin: 0; font-size: 1rem; line-height: 1.55; color: var(--mut); }

/* ─── measured comparison rows ─── */
.rx-rows { display: grid; gap: 26px; margin: 6px 0 0; }
.rx-row-label {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--mut);
  margin-bottom: 9px;
}
.rx-track { display: flex; align-items: center; gap: 18px; }
.rx-bar { height: 52px; background: var(--ink); flex-shrink: 0; }
.rx-bar--mkp { height: 52px; background: var(--gold); flex-shrink: 0; }
.rx-amount {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-weight: 600;
  font-size: 1.16rem;
  color: var(--ink);
  white-space: nowrap;
}

/* flat-rate: an equal outer envelope with the true cost filled in */
.rx-envelope {
  position: relative;
  height: 52px;
  border: 2px dashed var(--line-2);
  background: rgba(var(--ink-rgb), 0.035);
  box-sizing: border-box;
  max-width: 100%;
}
.rx-envelope i { position: absolute; inset: 0 auto 0 0; background: var(--ink); display: block; }

/* ─── the two-model comparison ─── */
.rx-models { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px; margin-top: 8px; }
.rx-model { border: 1px solid var(--line); padding: 30px 28px 32px; background: var(--paper); }
.rx-model h3 {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 700;
  font-size: 1.5rem;
  margin: 0 0 2px;
  color: var(--ink);
}
.rx-model-kicker {
  font-family: 'Playfair Display', Georgia, serif;
  font-style: italic;
  font-size: 1.02rem;
  color: var(--gold-deep);
  margin: 0 0 16px;
}
.rx-model p { font-size: 0.99rem; line-height: 1.58; color: var(--mut); margin: 0 0 18px; }
.rx-model .rx-rows { gap: 18px; }
.rx-tradeoff {
  margin: 22px 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--ink);
}
.rx-tradeoff b { color: var(--crane-red); }

/* ─── legend ─── */
.rx-legend { display: flex; flex-wrap: wrap; gap: 20px; margin-top: 20px; font-size: 0.85rem; color: var(--mut); }
.rx-legend span { display: inline-flex; align-items: center; gap: 9px; }
.rx-legend i { width: 22px; height: 14px; display: block; }
.rx-legend .rx-i-cost { background: var(--ink); }
.rx-legend .rx-i-mkp  { background: var(--gold); }
.rx-legend .rx-i-keep { border: 2px dashed var(--line-2); background: rgba(var(--ink-rgb), 0.035); box-sizing: border-box; }

/* ─── the three deciding factors ─── */
.rx-factors { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px; margin-top: 6px; }
.rx-factor h3 {
  font-family: 'Playfair Display', Georgia, serif;
  font-style: italic;
  font-weight: 700;
  font-size: 1.24rem;
  margin: 0 0 8px;
  color: var(--crane-red);
}
.rx-factor p { margin: 0; font-size: 1rem; line-height: 1.55; color: var(--mut); }

@media (max-width: 860px) {
  .rx-section { padding: 48px 0; }
  .rx-models,
  .rx-factors { grid-template-columns: 1fr; gap: 20px; }
  .rx-stack { height: 62px; }
  .rx-stack .rx-ic { padding-left: 12px; }
  .rx-stack span { font-size: 0.62rem; letter-spacing: 0.08em; }
  .rx-bar, .rx-bar--mkp, .rx-envelope { height: 44px; }
  .rx-track { gap: 12px; }
  .rx-amount { font-size: 1rem; }
}

/* ─── three-model comparison table ─── */
.rx-table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 4px 0 0; }
.rx-table { width: 100%; min-width: 660px; border-collapse: collapse; font-size: 0.97rem; }
.rx-table caption { text-align: left; font-size: 0.85rem; color: var(--mut-lt); padding-bottom: 12px; }
.rx-table th, .rx-table td { text-align: left; vertical-align: top; padding: 16px 18px; border-bottom: 1px solid var(--line); }
.rx-table thead th {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 700;
  font-size: 1.18rem;
  color: var(--ink);
  border-bottom: 2px solid var(--line-2);
  padding-top: 0;
}
.rx-table thead th:first-child { font-family: 'Inter', system-ui, sans-serif; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--mut-lt); }
.rx-table tbody th {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--mut-lt);
  white-space: nowrap;
  width: 1%;
}
.rx-table td { color: var(--mut); line-height: 1.5; }
.rx-table tbody tr:last-child th, .rx-table tbody tr:last-child td { border-bottom: 0; }
.rx-table tr.rx-watch td { color: var(--ink); }
.rx-table tr.rx-watch th { color: var(--crane-red); }
.rx-col-mark { border-top: 3px solid var(--gold); }

@media (max-width: 860px) {
  .rx-table { font-size: 0.92rem; }
  .rx-table th, .rx-table td { padding: 13px 14px; }
}

/* Narrow screens: the amount drops to its own line so a long bar cannot push
   it off the edge. Bars themselves keep their row (interchange-plus needs
   its two segments adjacent). */
@media (max-width: 560px) {
  .rx-track { flex-wrap: wrap; row-gap: 8px; }
  .rx-amount { flex: 0 0 100%; }
}

/* ─── cost-by-card table (bar + figures) ─── */
.rx-cards { width: 100%; min-width: 560px; border-collapse: collapse; font-size: 1rem; }
.rx-cards th, .rx-cards td { padding: 16px 14px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.rx-cards thead th {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 0.7rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--mut-lt); border-bottom: 2px solid var(--line-2); padding-top: 0;
}
.rx-cards tbody th { text-align: left; font-weight: 500; color: var(--ink); white-space: nowrap; }
.rx-cards .rx-c-bar { width: 44%; padding-left: 0; padding-right: 24px; }
.rx-cards .rx-c-bar i { display: block; height: 30px; background: var(--ink); }
.rx-cards tbody tr:last-child .rx-c-bar i { background: var(--crane-red); }
.rx-cards .rx-c-num {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-weight: 600; text-align: right; white-space: nowrap; color: var(--ink);
}
.rx-cards .rx-c-rate { color: var(--crane-red); }
.rx-cards tbody tr:last-child th, .rx-cards tbody tr:last-child td { border-bottom: 2px solid var(--line-2); }
.rx-takeaway {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 700; font-size: clamp(1.15rem, 2.2vw, 1.5rem); line-height: 1.36;
  color: var(--ink); margin: 26px 0 0; max-width: 54ch;
}
.rx-takeaway em { font-style: italic; color: var(--crane-red); }
@media (max-width: 860px) { .rx-cards th, .rx-cards td { padding: 13px 10px; } .rx-cards .rx-c-bar { width: 34%; padding-right: 14px; } }

.rx-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }