.exchange-savings { --tx-gold: var(--gold); --tx-green: var(--tr-color-diff-added-text); --tx-line: var(--border-default); }
.exchange-savings * { letter-spacing: 0; box-sizing: border-box; }
.exchange-savings .public-wrap { max-width: 1180px; padding: 0 32px 64px; }
.exchange-savings h1, .exchange-savings h2, .exchange-savings p { margin: 0; }
.exchange-savings h1 { font: 650 52px/1.08 var(--font-display); letter-spacing: -0.045em; text-wrap: balance; margin: 18px 0; }
.exchange-savings h2 { font: 550 20px/1.35 var(--font-ui); letter-spacing: -0.025em; text-wrap: balance; }
.exchange-savings p { color: var(--text-body); line-height: 1.6; text-wrap: pretty; }
.exchange-savings a { text-underline-offset: 4px; }
.tx-heading { padding: 32px 0 24px; }
.tx-heading > p { max-width: 720px; font-size: 17px; }
.tx-eyebrow { font-size: 13px; color: var(--text-accent); }
.tx-controls, .tx-routing, .tx-examples { border-top: 1px solid var(--tx-line); padding: 25px 0; }
.tx-section-title { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 22px; }
.tx-inputs { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 36px; }
.tx-inputs > div { min-width: 0; }
.tx-inputs label { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 14px; color: var(--text-display); }
.tx-inputs label span { color: var(--text-muted); font-size: 12px; }
.tx-inputs output { font-variant-numeric: tabular-nums; color: var(--text-accent); }
.tx-inputs input { width: 100%; height: 44px; margin: 12px 0 6px; font: 500 21px var(--font-ui); }
.tx-inputs input[type="number"] { color: var(--text-display); background: var(--surface-raised); padding: 8px 12px; border: 1px solid var(--tx-line); border-radius: 4px; }
.tx-inputs input[type="range"] { accent-color: var(--tx-green); cursor: pointer; padding: 0; }
.tx-inputs p, .tx-caption, .tx-switch-row p { font-size: 12px; color: var(--text-muted); }
.tx-validation { min-height: 22px; padding-top: 5px; font-size: 13px; }
.tx-validation:not(:empty), [aria-invalid="true"] { color: var(--clay); }
.tx-text-button { color: var(--text-accent); background: transparent; border: 0; padding: 10px 0; min-height: 44px; font: inherit; font-size: 13px; cursor: pointer; text-decoration: underline; text-underline-offset: 4px; }
.tx-switch-row p { margin-top: 5px; }
.tx-toggle { position: relative; display: flex; align-items: center; gap: 10px; min-height: 44px; cursor: pointer; flex: 0 0 86px; }
.tx-toggle input { position: absolute; inset: 0; width: 100%; height: 44px; margin: 0; opacity: 0; z-index: 1; cursor: pointer; }
.tx-toggle-track { display: block; width: 48px; height: 28px; background: var(--border-strong); border-radius: 18px; padding: 4px; }
.tx-toggle-track::after { content: ""; display: block; width: 20px; height: 20px; border-radius: 50%; background: var(--text-display); transition: transform 160ms ease; }
.tx-toggle input:checked + .tx-toggle-track { background: var(--tx-green); }
.tx-toggle input:checked + .tx-toggle-track::after { transform: translateX(20px); }
.tx-toggle input:focus-visible + .tx-toggle-track { outline: 3px solid var(--tx-gold); outline-offset: 4px; }
.tx-routing { padding-bottom: 0; }
.tx-flow { position: relative; display: grid; grid-template-columns: 1fr 210px 1fr; gap: 100px; align-items: center; padding: 16px 0 24px; }
#tx-flow-canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.tx-flow > div { position: relative; }
.tx-workloads, .tx-destinations { display: grid; gap: 26px; }
.tx-flow strong { font-size: 15px; font-weight: 500; color: var(--text-display); }
.tx-flow p { font-size: 12px; margin-top: 6px; }
.tx-dot { display: inline-block; width: 8px; height: 8px; flex: 0 0 8px; border-radius: 50%; margin-right: 8px; }
.tx-premium { background: var(--tx-gold); }
.tx-exchange { background: var(--tx-green); }
.tx-route-share { display: block; margin: 7px 0 0 16px; font: 12px var(--font-mono); color: var(--text-accent); }
.tx-destinations p { margin-left: 16px; }
.tx-gateway { min-height: 148px; border: 1px solid var(--tx-line); border-radius: 4px; text-align: center; padding: 18px 12px; background: var(--surface-raised); }
.tx-gateway img { display: block; margin: 0 auto 8px; }
.tx-gateway a { display: block; font-size: 11px; margin-top: 10px; }
.tx-motion-controls { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding-bottom: 16px; }
#tx-motion { display: flex; align-items: center; gap: 8px; min-width: 142px; justify-content: flex-end; text-decoration: none; }
#tx-motion:disabled { color: var(--text-muted); cursor: default; }
.tx-motion-icon { display: inline-block; width: 16px; height: 16px; background: currentcolor; mask: url('/static/icons/lucide-pause.svg') center / contain no-repeat; }
[data-paused="true"] .tx-motion-icon { mask-image: url('/static/icons/lucide-play.svg'); }
[data-active="false"] { opacity: .55; }
.tx-results { display: grid; grid-template-columns: 1.4fr 1fr; border-block: 1px solid var(--tx-line); }
.tx-bill { padding: 30px 34px 30px 0; }
.tx-bar-heading { display: flex; justify-content: space-between; gap: 16px; margin: 24px 0 10px; font-size: 13px; }
.tx-bar-heading strong, .tx-costs dd, .tx-savings strong { font-variant-numeric: tabular-nums; }
.tx-bar { height: 20px; border-radius: 2px; overflow: hidden; background: var(--surface-raised); display: flex; gap: 0; }
.tx-bar > span { height: 100%; transition: width 180ms ease; }
.tx-full { width: 100%; }
.tx-costs { margin: 24px 0 18px; }
.tx-costs > div { display: flex; justify-content: space-between; gap: 16px; margin: 12px 0; font-size: 13px; }
.tx-costs dt { color: var(--text-body); }
.tx-costs dd { margin: 0; flex-shrink: 0; }
.tx-costs dt > span:not(.tx-dot) { color: var(--text-muted); }
.tx-savings { padding: 34px; display: flex; flex-direction: column; justify-content: center; border-left: 1px solid var(--tx-line); background: var(--surface-raised); }
.tx-savings > span:first-child { font-size: 14px; }
.tx-savings > strong { display: block; font: 550 42px/1.25 var(--font-display); letter-spacing: -0.035em; margin-top: 14px; color: var(--tx-green); overflow-wrap: anywhere; }
.tx-savings > span:nth-of-type(2) { color: var(--text-accent); font-size: 13px; margin-top: 8px; }
.tx-annual { margin: 28px 0 20px; display: flex; flex-direction: column; gap: 8px; }
.tx-annual span, .tx-savings p { font-size: 12px; color: var(--text-muted); }
.tx-annual strong { font-size: 23px; font-weight: 500; }
[data-increase="true"] .tx-savings > strong { color: var(--tx-gold); }
.tx-examples { border-top: 0; padding-block: 32px; }
.tx-examples ul { list-style: none; padding: 0; margin: 0; }
.tx-examples li { display: grid; grid-template-columns: 1fr 90px 135px; align-items: center; gap: 18px; padding: 12px 0; min-height: 58px; border-top: 1px solid var(--tx-line); font-size: 13px; }
.tx-examples li > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#tx-request-log { height: 290px; overflow: hidden; }
[data-route="exchange"] strong { color: var(--tx-green); }
.tx-request-arrived { animation: tx-arrival 220ms ease-out; }

@keyframes tx-arrival { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }
.tx-examples li strong { text-align: right; font-weight: 500; }
.tx-request-type { color: var(--text-muted); font-size: 12px; }
.tx-bottom { border-top: 1px solid var(--tx-line); padding: 32px 0 20px; display: grid; grid-template-columns: 1fr 280px; gap: 60px; }
.tx-bottom p { font-size: 14px; margin-top: 10px; max-width: 540px; }
.tx-actions { display: grid; gap: 10px; align-content: start; }
.tx-button { border: 1px solid var(--text-accent); background: var(--text-accent); color: var(--text-inverse); padding: 12px 18px; min-height: 44px; border-radius: 4px; font: 550 14px var(--font-ui); text-align: center; cursor: pointer; text-decoration: none; }
.tx-button:hover { color: var(--text-inverse); background: var(--tr-color-accent-hover); }
.tx-secondary { background: transparent; color: var(--text-display); border-color: var(--tx-line); }
.tx-secondary:hover { background: var(--surface-raised); color: var(--text-display); }
.tx-button:disabled { opacity: .5; cursor: not-allowed; }
.tx-actions p { margin: 0; font-size: 12px; min-height: 19px; }
.tx-actions input { width: 100%; padding: 10px; font-size: 13px; }
.tx-methodology { border-top: 1px solid var(--tx-line); padding-top: 20px; font-size: 13px; }
.tx-methodology summary { cursor: pointer; min-height: 44px; color: var(--text-body); }
.tx-methodology p { margin-bottom: 14px; max-width: 900px; }
.exchange-savings :is(button, a, input):focus-visible { outline: 3px solid var(--tx-gold); outline-offset: 4px; }

@media (max-width: 900px) {
  .tx-flow { grid-template-columns: 1fr 155px 1fr; gap: 36px; }
  .tx-inputs { gap: 20px; }
  .tx-savings { padding: 26px; }
  .tx-savings > strong { font-size: 34px; }
}

@media (max-width: 640px) {
  .exchange-savings .public-wrap { padding-inline: 20px; }
  .exchange-savings h1 { font-size: 38px; }
  .exchange-savings h2 { font-size: 18px; }
  .tx-heading { padding-top: 26px; }
  .tx-inputs { grid-template-columns: 1fr; gap: 20px; }
  .tx-section-title { align-items: flex-start; }
  .tx-flow { grid-template-columns: 1fr; gap: 64px; }
  .tx-workloads, .tx-destinations { grid-template-columns: 1fr 1fr; gap: 18px; }
  .tx-gateway { min-height: 0; padding: 14px; }
  .tx-gateway img { display: inline-block; vertical-align: middle; margin: 0 8px 0 0; }
  .tx-results { grid-template-columns: 1fr; }
  .tx-bill { padding: 26px 0; }
  .tx-savings { border-left: 0; border-top: 1px solid var(--tx-line); padding: 26px 20px; }
  .tx-examples .tx-section-title { flex-direction: column; gap: 8px; }
  .tx-examples li { grid-template-columns: 1fr 108px; gap: 12px; font-size: 12px; }
  .tx-request-type { display: none; }
  .tx-bottom { grid-template-columns: 1fr; gap: 24px; }
}

@media (prefers-reduced-motion: reduce) { .tx-toggle-track::after, .tx-bar > span { transition: none; } .tx-request-arrived { animation: none; } }