/* Caravel Pay landing: interactive layer (hero checkout demo, payment flow, fee calculator,
   brand marks). Loaded after landing.css; demo.js drives the states. Without JS everything
   here still renders as a static picture. */

/* =========================================================
   BRAND MARKS: unaltered files on a uniform white badge face
   ========================================================= */
.mbadges { display: inline-flex; flex-wrap: wrap; gap: 5px; }
.mbadge {
  flex: none;
  display: block;
  width: 36px;
  height: 24px;
  border-radius: 5px;
  background: #fff;
  box-shadow: 0 0 0 1px rgba(20, 24, 33, 0.12), 0 1px 1px rgba(20, 24, 33, 0.04);
  object-fit: contain;
}
.mbadge-lg { width: 48px; height: 32px; border-radius: 6px; }
.mbadge-sm { width: 27px; height: 18px; border-radius: 4px; }
.usdc-mark { flex: none; width: 24px; height: 24px; }
.pg-mark { flex: none; width: 14px; height: 14px; }

/* Currency "$" in large amounts, same size, never a superscript. Measured from rendered ink at 3x:
   inline, Inter Tight's "$" is already centred on the digits (its S body sags ~0.01em), but inside the
   demo coin face (a centred 40px box) it sat 0.07em low, which is what showed in the hero. */
.cur { position: relative; top: -0.01em; }
.coin-usd .cur { top: -0.07em; }

/* methods strip */
.pm-chips { gap: 10px; }
.pm-chips li { height: auto; padding: 0; border: 0; background: none; }
.usdc-chip { gap: 8px; padding: 0 16px 0 7px !important; height: 40px !important; }
.usdc-chip .on { color: var(--ink-3); font-weight: 450; }
.usdc-chip .pg-mark { width: 15px; height: 15px; margin-right: -2px; }

/* =========================================================
   HERO: the ship can be dragged and nudged
   ========================================================= */
.sea { z-index: 4; }
.ship-drag {
  pointer-events: auto;
  cursor: grab;
  touch-action: pan-y;
  -webkit-user-select: none;
  user-select: none;
}
.ship-drag.is-held { cursor: grabbing; }
html:not(.js) .ship-drag { pointer-events: none; cursor: default; }

/* =========================================================
   HERO: checkout demo
   ========================================================= */
.mockup-body { position: relative; }
.mockup[data-demo] { margin-top: 44px; }
.mockup-body.is-held { cursor: grabbing; }
.demo-hint {
  position: absolute;
  top: -31px;
  left: 4px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--moon-2);
  transition: opacity 0.4s ease;
}
.demo-hint .dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--amber);
  box-shadow: 0 0 0 0 rgba(242, 181, 68, 0.5);
  animation: hint-ping 2.4s ease-out infinite;
}
@keyframes hint-ping {
  0% { box-shadow: 0 0 0 0 rgba(242, 181, 68, 0.55); }
  70%, 100% { box-shadow: 0 0 0 8px rgba(242, 181, 68, 0); }
}
.mockup.was-used .demo-hint { opacity: 0; }
html:not(.js) .demo-hint { display: none; }
.is-offscreen .demo-hint .dot { animation-play-state: paused; }

/* The window drags with a mouse or trackpad only (demo.js). No touch-action here: a finger on the window bar
   must scroll the page like anywhere else. */
.window-bar[data-drag-handle] { cursor: grab; }
.is-held .window-bar[data-drag-handle] { cursor: grabbing; }
html:not(.js) .window-bar[data-drag-handle] { cursor: default; }
@media (hover: none) and (pointer: coarse) {
  .window-bar[data-drag-handle] { cursor: default; }
  .window-bar[data-drag-handle] .window-grip { visibility: hidden; }   /* no drag, so no grip */
}
.window-grip {
  justify-self: end;
  display: grid;
  gap: 3px;
  opacity: 0.5;
}
.window-grip span {
  width: 14px; height: 2px;
  border-radius: 2px;
  background: #cfc6b4;
}

/* payment method radios: native inputs, styled rows */
.co-method {
  position: relative;
  cursor: pointer;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease;
}
.co-method input {
  position: absolute;
  opacity: 0;
  width: 1px; height: 1px;
  margin: 0;
  pointer-events: none;
}
.co-method:hover { border-color: rgba(20, 24, 33, 0.3); }
.co-method:has(input:checked),
.co-method.is-selected { border: 1.5px solid var(--ink); }
.co-method:has(input:checked) .radio,
.co-method.is-selected .radio { border: 5px solid var(--ink); }
.co-method .radio { transition: border-width 0.18s ease; }
.co-method:has(input:focus-visible) { outline: 2px solid var(--ink); outline-offset: 3px; }
.co-method .mbadges { margin-left: auto; }
.mockup.is-busy .co-method { cursor: default; }
.mockup.is-busy .co-method:not(.is-selected) { opacity: 0.5; }

/* pay button: a real button with a progress fill */
.co-button {
  position: relative;
  width: 100%;
  border: 0;
  overflow: hidden;
  cursor: pointer;
  font-family: var(--font-sans);
  transition: background-color 0.35s ease, transform 0.12s ease;
}
.co-button:hover { background: #000; }
.co-button:active { transform: scale(0.985); }
.co-button:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.co-progress {
  position: absolute;
  inset: 0;
  background: rgba(246, 242, 233, 0.16);
  transform: scaleX(var(--p, 0));
  transform-origin: left;
  transition: transform 0.9s cubic-bezier(0.3, 0.6, 0.3, 1);
}
.co-btn-label { position: relative; display: inline-flex; align-items: center; gap: 8px; }
.co-btn-label svg { width: 15px; height: 15px; }
.mockup.is-busy .co-button { cursor: progress; }
.mockup.is-busy .co-btn-label svg { animation: btn-spin 0.9s linear infinite; }
@keyframes btn-spin { to { transform: rotate(360deg); } }
.mockup.s5 .co-button { background: var(--green); cursor: default; }
.mockup.s5 .co-progress { opacity: 0; }
.mockup.s5 .co-btn-label svg { animation: none; }

.co-fine { min-height: 34px; display: grid; place-items: center; }
.co-fine > * { grid-area: 1 / 1; }
.co-replay {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 32px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--ink);
  font-size: 13px;
  font-weight: 550;
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}
.co-replay:hover { border-color: rgba(20, 24, 33, 0.3); background: var(--cream); }
.co-replay svg { width: 14px; height: 14px; }
.co-replay[hidden] { display: none; }
.mockup.s5 .fine-idle { visibility: hidden; }

/* left column: label + amount morph */
.co-label { display: grid; }
.co-label > span { grid-area: 1 / 1; transition: opacity 0.35s ease, transform 0.35s ease; }
.co-label-b { opacity: 0; transform: translateY(6px); }
.mockup.s2 .co-label-a { opacity: 0; transform: translateY(-6px); }
.mockup.s2 .co-label-b { opacity: 1; transform: none; }

.co-amount { display: flex; align-items: center; }
.co-amount .amt-unit { align-self: flex-end; margin-bottom: 7px; }
.coin {
  position: relative;
  flex: none;
  width: 0.56em;
  height: 40px;
  perspective: 300px;
  transition: width 0.5s cubic-bezier(0.3, 0.7, 0.2, 1), margin 0.5s cubic-bezier(0.3, 0.7, 0.2, 1);
}
.coin-face {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 40px;
  height: 40px;
  margin: -20px 0 0 -20px;
  border-radius: 50%;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transition: transform 0.75s cubic-bezier(0.35, 0.1, 0.2, 1), background-color 0.35s ease, color 0.35s ease, font-size 0.35s ease, box-shadow 0.35s ease;
}
.coin-usd {
  display: grid;
  place-items: center;
  font: inherit;
  line-height: 1;
  color: var(--ink);
}
.coin-usdc { transform: rotateY(-180deg); }
.mockup.s1 .coin { width: 40px; margin-right: 10px; }
.mockup.s1 .coin-usd {
  background: var(--ink);
  color: var(--cream);
  font-size: 21px;
  box-shadow: 0 6px 14px -6px rgba(20, 24, 33, 0.5);
}
.mockup.s2 .coin-usd { transform: rotateY(180deg); }
.mockup.s2 .coin-usdc { transform: rotateY(0deg); }
.amt-num { display: inline-block; transition: transform 0.4s ease; }
.amt-c {
  display: inline-block;
  max-width: 0;
  overflow: hidden;
  vertical-align: bottom;
  opacity: 0;
  transition: max-width 0.4s ease 0.3s, opacity 0.4s ease 0.3s;
}
.mockup.s2 .amt-c { max-width: 1ch; opacity: 1; }
.mockup.s2 .amt-unit { color: var(--ink); }
.amt-unit { transition: color 0.4s ease 0.3s; }

/* left column stage: idle lines -> route on Polygon -> 98 / 2 split */
.co-stage { display: grid; margin-top: 26px; }
.co-stage > * { grid-area: 1 / 1; }
.co-stage .co-lines { margin-top: 0; transition: opacity 0.35s ease, transform 0.35s ease; }
.co-lines .v { display: inline-flex; align-items: center; gap: 7px; }
.co-lines li { align-items: center; min-height: 45px; padding-block: 8px; }
.mockup.s3 .co-lines { opacity: 0; transform: translateY(-6px); pointer-events: none; }
.co-route {
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity 0.4s ease, transform 0.4s ease, visibility 0s linear 0.4s;
  border-top: 1px solid var(--line-2);
  padding-top: 12px;
  font-size: 13.5px;
}
.mockup.s3 .co-route { opacity: 1; visibility: visible; transform: none; transition-delay: 0.1s, 0.1s, 0s; }
.route-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; color: var(--ink-2); }
.route-head > span:first-child { display: inline-flex; align-items: center; gap: 7px; font-weight: 550; color: var(--ink); }
.route-state { display: grid; font-family: var(--font-mono); font-size: 12px; }
.route-state > span { grid-area: 1 / 1; text-align: right; transition: opacity 0.3s ease; }
.route-sending { color: var(--amber-ink); }
.route-done { color: var(--green); opacity: 0; }
.mockup.s4 .route-sending { opacity: 0; }
.mockup.s4 .route-done { opacity: 1; }
.route-track {
  position: relative;
  height: 8px;
  margin: 16px 0 14px;
  border-radius: 99px;
  background: var(--cream-2);
}
.route-fill-a,
.route-fill-b {
  position: absolute;
  top: 0; bottom: 0;
  border-radius: 99px;
}
.route-fill-a {
  left: 0;
  width: calc(98% - 3px);
  background: var(--green);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.6s cubic-bezier(0.3, 0.7, 0.2, 1);
}
.route-fill-b {
  right: 0;
  width: max(2%, 7px);
  background: var(--amber);
  opacity: 0;
  transform: scale(0.2);
  transition: opacity 0.3s ease 0.45s, transform 0.4s cubic-bezier(0.3, 1.6, 0.4, 1) 0.45s;
}
.mockup.s4 .route-fill-a { transform: scaleX(1); }
.mockup.s4 .route-fill-b { opacity: 1; transform: none; }
.route-coin {
  position: absolute;
  top: 50%;
  left: 0;
  width: 24px;
  height: 24px;
  margin-top: -12px;
  filter: drop-shadow(0 3px 6px rgba(11, 83, 191, 0.35));
  transform: translateX(var(--rx, 0px));
  transition: transform 1.05s cubic-bezier(0.55, 0.05, 0.3, 1), opacity 0.3s ease;
}
.mockup.s3 .route-coin { --rx: calc(var(--route-w, 300px) - 24px); }
.mockup.s4 .route-coin { opacity: 0; }
.route-split { display: grid; gap: 6px; margin: 0; }
.rs-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.35s ease, transform 0.35s ease;
}
.rs-row:nth-child(2) { transition-delay: 0.12s; }
.rs-row:nth-child(3) { transition-delay: 0.24s; }
.mockup.s4 .rs-row { opacity: 1; transform: none; }
.rs-row dt { display: inline-flex; align-items: center; gap: 8px; color: var(--ink-2); min-width: 0; }
.rs-row dt i { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.rs-row.is-you dt i { background: var(--green); }
.rs-row.is-fee dt i { background: var(--amber); }
.rs-row .mono { font-size: 12px; color: var(--ink-3); }
.rs-row dd { margin: 0; font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--ink-2); }
.rs-row dd b { font-weight: 650; color: var(--ink); }
.rs-row.is-you dd b { color: var(--green); }
.rs-row.is-buyer { font-size: 12.5px; }
.rs-row.is-buyer dt { padding-left: 16px; color: var(--ink-3); }
.rs-row.is-buyer dd { color: var(--ink-3); }

/* foot: expiry -> webhook delivered */
.co-foot { display: grid; }
.co-foot > span { grid-area: 1 / 1; display: flex; align-items: center; justify-content: space-between; gap: 12px; transition: opacity 0.35s ease, transform 0.35s ease; }
.foot-hook { opacity: 0; transform: translateY(6px); justify-content: flex-start !important; font-family: var(--font-mono); font-size: 12px; color: var(--ink-2); }
.foot-hook b { margin-left: auto; font-weight: 500; color: var(--green); }
.foot-hook code { padding: 1px 6px; border-radius: 5px; background: var(--cream-2); color: var(--ink); }
.mockup.s5 .foot-idle { opacity: 0; transform: translateY(-6px); }
.mockup.s5 .foot-hook { opacity: 1; transform: none; }

/* store order card: Pending payment -> Processing */
.mockup[data-demo] { padding-bottom: 104px; }
.order-card {
  position: absolute;
  left: -44px;
  top: calc(100% - 20px);
  z-index: 2;
  width: 300px;
  padding: 14px 16px 15px;
  border-radius: 16px;
  background: var(--paper);
  border: 1px solid var(--line-2);
  box-shadow: 0 1px 2px rgba(20, 24, 33, 0.06), 0 24px 50px -24px rgba(20, 24, 33, 0.4);
  font-size: 13.5px;
  text-align: left;
  color: var(--ink);
}
.oc-top {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding-bottom: 10px;
  margin-bottom: 10px;
  border-bottom: 1px solid var(--line-2);
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-3);
  white-space: nowrap;
}
.oc-app { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-2); }
.oc-app svg { width: 13px; height: 13px; }
.oc-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.oc-row b { font-weight: 600; }
.oc-flip { display: grid; perspective: 400px; }
.oc-flip > .status {
  grid-area: 1 / 1;
  justify-self: end;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transition: transform 0.6s cubic-bezier(0.35, 0.1, 0.2, 1);
}
.oc-paid { transform: rotateX(-180deg); }
.mockup.s5 .oc-pending { transform: rotateX(180deg); }
.mockup.s5 .oc-paid { transform: rotateX(0deg); }
.oc-note {
  margin-top: 0;
  max-height: 0;
  overflow: hidden;
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--ink-3);
  opacity: 0;
  transition: max-height 0.4s ease 0.3s, margin 0.4s ease 0.3s, opacity 0.4s ease 0.4s;
}
.mockup.s5 .oc-note { max-height: 40px; margin-top: 8px; opacity: 1; }
.oc-note-idle { display: none; }   /* only where the card is in the flow (phones): see RESPONSIVE */

/* example-payments toast: flips through illustrative payouts */
.paid-toast { z-index: 3; }
.paid-toast .toast-coin { flex: none; width: 34px; height: 34px; }
.paid-toast .toast-ok { display: inline-flex; align-items: center; gap: 5px; color: var(--green); }
.paid-toast .toast-ok svg { width: 14px; height: 14px; }
.paid-toast .toast-ok strong { color: var(--ink); }
.paid-toast .sub { display: flex; align-items: center; gap: 7px; }
/* One text run next to the badge: it wraps like a sentence on narrow screens. */
.paid-toast .sub .mbadge-sm { flex: none; }
.paid-toast .sub-text { min-width: 0; }
.paid-toast .sub .mbadge-sm { box-shadow: 0 0 0 1px rgba(20, 24, 33, 0.12); }
.toast-body { perspective: 500px; min-width: 0; }
.toast-tag {
  position: absolute;
  top: -9px;
  right: 14px;
  padding: 2px 7px;
  border-radius: 5px;
  background: var(--cream-2);
  border: 1px solid var(--line-2);
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.paid-toast:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; }
.toast-body > p { transform-origin: 50% 50% -12px; }
.toast-body.is-out > p { animation: toast-flip-out 0.28s cubic-bezier(0.5, 0, 0.8, 0.4) both; }
.toast-body.is-in > p { animation: toast-flip-in 0.42s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.toast-body.is-in > p.sub { animation-delay: 0.05s; }
@keyframes toast-flip-out { to { opacity: 0; transform: rotateX(70deg) translateY(-4px); } }
@keyframes toast-flip-in { from { opacity: 0; transform: rotateX(-70deg) translateY(4px); } to { opacity: 1; transform: none; } }

.js .paid-toast {
  animation: none;
  opacity: 0;
  transform: translateY(12px) scale(0.98);
  transition: opacity 0.5s ease, transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.js .paid-toast.is-shown { opacity: 1; transform: none; }

/* =========================================================
   HOW A PAYMENT MOVES: a coin rides the track with the scroll
   ========================================================= */
.flow-wrap { position: relative; }
.js .flow-wrap .flow::before { display: none; }
html:not(.js) .flow-track { display: none; }
.flow-track { position: absolute; inset: 0; pointer-events: none; }
.flow-line,
.flow-fill {
  position: absolute;
  left: var(--x0, 16px);
  top: var(--y0, 15px);
  width: var(--len, 0px);
  height: 0;
  border-top: 1.5px dashed rgba(20, 24, 33, 0.2);
}
.flow-fill {
  border-top: 2px solid var(--ink);
  margin-top: -0.25px;
  transform: scaleX(var(--p, 0));
  transform-origin: left;
}
.flow-wrap.is-vertical .flow-line,
.flow-wrap.is-vertical .flow-fill {
  width: 0;
  height: var(--len, 0px);
  border-top: 0;
  border-left: 1.5px dashed rgba(20, 24, 33, 0.2);
}
.flow-wrap.is-vertical .flow-fill {
  border-left: 2px solid var(--ink);
  margin: 0 0 0 -0.25px;
  transform: scaleY(var(--p, 0));
  transform-origin: top;
}
.flow li { position: relative; }
.flow-dot { z-index: 1; transition: background-color 0.35s ease, color 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease; }
.flow li:last-child .flow-dot { background: var(--cream); color: var(--ink-2); border-color: rgba(20, 24, 33, 0.22); }
.flow li.is-on .flow-dot { background: var(--ink); color: var(--cream); border-color: var(--ink); }
.flow li.is-here .flow-dot { box-shadow: 0 0 0 6px rgba(242, 181, 68, 0.28); }
html:not(.js) .flow li:last-child .flow-dot { background: var(--ink); color: var(--cream); border-color: var(--ink); }
.flow-coin {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 2;
  width: 30px;
  height: 30px;
  perspective: 240px;
  transform: translate(calc(var(--cx, 16px) - 15px), calc(var(--cy, 15px) - 15px));
  will-change: transform;
}
.flow-coin .coin-face { width: 30px; height: 30px; margin: -15px 0 0 -15px; }
.flow-coin .coin-usd {
  background: var(--ink);
  color: var(--cream);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 15px;
  box-shadow: 0 6px 14px -6px rgba(20, 24, 33, 0.55);
}
.flow-wrap.is-usdc .flow-coin .coin-usd { transform: rotateY(180deg); }
.flow-wrap.is-usdc .flow-coin .coin-usdc { transform: rotateY(0deg); }
.flow-coin .coin-usdc { filter: drop-shadow(0 4px 8px rgba(11, 83, 191, 0.3)); }
.flow-fee {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 2;
  padding: 2px 7px;
  border-radius: 6px;
  background: var(--amber);
  color: #1b1406;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  opacity: 0;
  transform: translate(calc(var(--fx, 0px) - 50%), calc(var(--fy, 0px) - 50%)) scale(0.4);
  transition: opacity 0.35s ease, transform 0.6s cubic-bezier(0.25, 1.4, 0.4, 1);
}
.flow-wrap.is-split .flow-fee {
  opacity: 1;
  transform: translate(calc(var(--fx, 0px) - 50% + var(--fdx, 26px)), calc(var(--fy, 0px) - 50% + var(--fdy, -26px))) rotate(-6deg);
}
/* Stacked layout: the step title starts 27px right of the dot, so the 2% tag sits up and to the
   right of the dot, in the gap above the title, instead of on top of its first letter. */
.flow-wrap.is-vertical .flow-fee { --fdx: 27px; --fdy: -24px; }

.flow-ledger {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  margin-top: 14px !important;
  font-size: 13.5px !important;
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
  transition: opacity 0.4s ease;
}
.flow-ledger b { font-weight: 650; color: var(--ink); }
.flow-ledger > span:last-child { display: inline-flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.flow-ledger .pg-mark { width: 13px; height: 13px; }
.flow-ledger .mbadges { gap: 4px; }
.fl-conv { position: relative; display: inline-flex; width: 24px; height: 24px; }
.fl-conv > * { position: absolute; inset: 0; }
.fl-usd {
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--ink);
  color: var(--cream);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 12px;
  transition: opacity 0.4s ease, transform 0.5s ease;
}
.fl-conv .usdc-mark { transition: opacity 0.4s ease 0.1s, transform 0.5s ease 0.1s; }
.js .flow-wrap li:not(.is-on) .fl-conv .usdc-mark { opacity: 0; transform: scale(0.6); }
.js .flow-wrap li.is-on .fl-usd { opacity: 0; transform: scale(0.6); }
html:not(.js) .fl-usd { display: none; }
.fl-bar { display: flex; gap: 2px; width: 74px; height: 8px; }
.fl-bar i { border-radius: 99px; }
.fl-bar i:first-child { flex: 49; background: var(--green); }
.fl-bar i:last-child { flex: 1; min-width: 5px; background: var(--amber); }
.fl-order { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; background: var(--cream-2); color: var(--ink); }
.fl-order svg { width: 14px; height: 14px; }
.js .flow-wrap li:not(.is-on) .flow-ledger { opacity: 0.45; }
.js .flow-wrap li:not(.is-on) .status { opacity: 0.45; }
.flow .status { transition: opacity 0.4s ease; }

@media (max-width: 1100px) {
  .flow-wrap .flow {
    grid-template-columns: minmax(0, 1fr);
    max-width: 660px;
    row-gap: 44px;
  }
  .flow-wrap .flow li { padding-left: 58px; }
  .flow-wrap .flow-dot { position: absolute; left: 0; top: -3px; }
  .flow-wrap .flow h3 { margin-top: 0; }
}

/* =========================================================
   PRICING: whose fee is whose, calculator, comparison
   ========================================================= */
.price-tag { font-size: clamp(15px, 1.5vw, 19px); }
.price-sub { max-width: 34ch; }
.fee-pair { display: grid; gap: 0; margin: 26px 0 0; border-top: 1px solid var(--line); }
.fee-row { padding: 16px 0; border-bottom: 1px solid var(--line); }
.fee-row dt { display: flex; align-items: center; gap: 12px; font-weight: 600; font-size: 16px; }
.fee-row dd { margin: 8px 0 0; padding-left: 70px; color: var(--ink-2); font-size: 14.5px; line-height: 1.6; }
.fee-chip {
  display: inline-grid;
  place-items: center;
  min-width: 58px;
  height: 28px;
  padding: 0 9px;
  border-radius: 8px;
  background: var(--ink);
  color: var(--cream);
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 500;
}
.fee-chip.is-plus { background: transparent; color: var(--ink-2); border: 1.5px dashed rgba(20, 24, 33, 0.3); }
.price-checks {
  grid-column: 1 / -1;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 330px), 1fr));
  column-gap: 32px;
  padding-top: 8px;
  border-top: 1px solid var(--line);
}
.price-checks li { font-size: 15px; padding: 10px 0; border-bottom: 0; }
.price-main .price-cta { margin-top: 28px; }
.price-side { display: grid; gap: 16px; align-content: start; }
/* =========================================================
   LOGO WALL: the platforms with a ready-made plugin. Official logos, unaltered,
   each on the same light tile (sources: assets/img/brands/SOURCE.md)
   ========================================================= */
.logo-wall {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 12px;
  margin: 44px 0 0;
  padding: 0;
  list-style: none;
}
.logo-tile {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 88px;
  padding: 0 14px;
  border-radius: var(--radius);
  background: #fff;
  border: 1px solid var(--line);
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}
.logo-tile img { display: block; max-width: 100%; height: auto; }
.logo-tile:hover { transform: translateY(-2px); border-color: rgba(20, 24, 33, 0.26); box-shadow: 0 10px 22px -16px rgba(20, 24, 33, 0.4); }
.wall-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 26px; margin-top: 28px; }
.wall-alt { font-size: 15px; color: var(--ink-3); }
.wall-alt a { color: var(--ink-2); text-decoration: underline; text-decoration-color: rgba(20, 24, 33, 0.3); text-underline-offset: 3px; }
.wall-alt a:hover { color: var(--ink); text-decoration-color: currentColor; }
@media (prefers-reduced-motion: reduce) {
  .logo-tile { transition: none; }
  .logo-tile:hover { transform: none; }
}
@media (max-width: 1100px) { .logo-wall { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
@media (max-width: 760px) {
  .logo-wall { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 32px; }
  .logo-tile { height: 76px; padding: 0 12px; }
}
@media (max-width: 520px) { .logo-wall { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* the short list under the price, the one-line note, and the comparison sentence */
.price-list { margin-top: 26px; border-top: 1px solid var(--line); }
.price-list li { font-size: 15.5px; padding: 11px 0; }
.price-note { margin-top: 18px; max-width: 46ch; font-size: 14px; line-height: 1.55; color: var(--ink-3); }
.price-main .price-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; }
/* two columns: the comparison sits level with the middle of the price column */
@media (min-width: 901px) { .price-side { align-content: center; } }
.price-vs {
  font-family: var(--font-display);
  font-size: clamp(20px, 2.1vw, 26px);
  line-height: 1.32;
  letter-spacing: -0.02em;
  color: var(--ink-2);
  text-wrap: balance;
}
.price-vs b { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.price-vs strong { color: var(--ink); font-weight: 600; background: linear-gradient(transparent 64%, var(--amber-wash) 64%); }
.price-vs a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 4px; text-decoration-color: rgba(20, 24, 33, 0.35); }
.price-vs a:hover { text-decoration-color: var(--ink); }

.price-example { margin-top: 0; }
.price-example .kv dd { display: inline-flex; align-items: center; justify-content: flex-end; gap: 7px; }

.compare { margin-top: 22px; }
.compare-title {
  font-family: var(--font-display);
  font-weight: 550;
  font-size: 22px;
  letter-spacing: -0.02em;
}
.compare-table {
  width: 100%;
  margin-top: 16px;
  border-collapse: separate;
  border-spacing: 0;
  border-radius: 18px;
  background: var(--paper);
  border: 1px solid var(--line-2);
  overflow: hidden;
  font-size: 14.5px;
  text-align: left;
}
.compare-table th,
.compare-table td { padding: 16px 20px; vertical-align: top; border-top: 1px solid var(--line-2); }
.compare-table thead th {
  border-top: 0;
  padding-block: 12px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
  background: var(--cream);
}
.compare-table tbody th { width: 22%; font-weight: 600; white-space: nowrap; }
.compare-table td { color: var(--ink-2); line-height: 1.6; }
.compare-table td b { color: var(--ink); font-weight: 650; }
.compare-est {
  display: block;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed var(--line);
  color: var(--ink-2);
}
.compare-table tr.is-us th,
.compare-table tr.is-us td { background: rgba(242, 181, 68, 0.1); }
.compare-table tr.is-us th { box-shadow: inset 3px 0 0 var(--amber); }
.compare-table sup { font-size: 0.7em; margin-left: 2px; }
.compare-table sup a { color: var(--ink-3); text-decoration: none; }
.compare-table sup a:hover { color: var(--ink); text-decoration: underline; }
.compare-notes {
  margin: 12px 0 0;
  padding-left: 20px;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--ink-3);
}
.compare-notes a { color: var(--ink-2); text-underline-offset: 3px; }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 1100px) {
  .order-card { left: 16px; }
}

@media (max-width: 900px) {
  .demo-hint { left: 50%; transform: translateX(-50%); white-space: nowrap; }
  .co-stage .co-lines { display: block; }
  .co-stage { margin-top: 16px; }
  .co-lines li { min-height: 40px; padding-block: 6px; }
  .co-foot { display: grid !important; padding-top: 16px; }
  .co-foot .foot-idle code { display: none; }
  /* Stacked layout: the window, then the order card, then the toast, each clear of the next. All three are in
     the flow here, so NOTHING in them may change height while the demo plays or the toast cycles, or the page
     below would jump (owner, 2026-11-10). scripts check it: see site/README.md, "Mobile demo". */
  .mockup[data-demo] { padding-bottom: 56px; }
  .order-card {
    position: relative;
    left: auto;
    top: auto;
    width: min(360px, calc(100% - 24px));
    margin: 18px auto 0;
  }
  /* the note line is always there: "awaiting payment" turns into "paid" in place */
  .oc-note { display: grid; max-height: none; margin-top: 8px; opacity: 1; overflow: visible; transition: none; }
  .oc-note > span { grid-area: 1 / 1; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: opacity 0.35s ease; }
  .oc-note-paid { opacity: 0; }
  .mockup.s5 .oc-note { max-height: none; }
  .mockup.s5 .oc-note-idle { opacity: 0; }
  .mockup.s5 .oc-note-paid { opacity: 1; transition-delay: 0.3s; }
  /* top: auto undoes the desktop offset, which pulled the toast 24px up into the card above it */
  .paid-toast { top: auto; margin-top: 26px !important; }
  /* every example takes the same three lines, whatever its numbers: "Paid · 126.86 USDC", "sent to 0x…", the order */
  .paid-toast .toast-body > p:first-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .paid-toast .toast-body > p:first-child > .nowrap { display: block; overflow: hidden; text-overflow: ellipsis; }
  .paid-toast .sub-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .compare-table thead { display: none; }
  .compare-table,
  .compare-table tbody,
  .compare-table tr,
  .compare-table th,
  .compare-table td { display: block; width: auto; }
  .compare-table tbody tr + tr { border-top: 1px solid var(--line); }
  .compare-table tbody th { width: auto; padding: 16px 18px 4px; border-top: 0; white-space: normal; }
  .compare-table td { padding: 6px 18px; border-top: 0; }
  .compare-table td:last-child { padding-bottom: 16px; }
  .compare-table td::before {
    content: attr(data-label);
    display: block;
    font-family: var(--font-mono);
    font-size: 10.5px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink-3);
  }
}

@media (max-width: 640px) {
  .pm-chips { justify-content: center; }
  .usdc-chip { font-size: 14px; }
  .co-amount .coin-face { width: 36px; height: 36px; margin: -18px 0 0 -18px; }
  .mockup.s1 .coin { width: 36px; margin-right: 8px; }
  .rs-row .mono { display: none; }
  .fee-row dd { padding-left: 0; }
  .toast-tag { right: 12px; }
}
@media (max-width: 480px) {
  .paid-toast .sub-chain { display: none; }   /* "· Polygon" doesn't fit on the order line of a narrow phone */
}

/* =========================================================
   REDUCED MOTION: final states, no travel (demo.js sets them)
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
  .mockup *, .mockup *::before, .mockup *::after,
  .flow-wrap *, .paid-toast, .order-card {
    transition: none !important;
    animation: none !important;
  }
}