/* ───────────────────────────────────────────────────────────────
   Green on black. One accent hue — a neon green — spent on the
   things that act, and on the gap column. Nothing is boxed. Every
   panel is transparent, separated by space and type weight instead
   of chrome, and the black fades in from the edges of the stage.
   ─────────────────────────────────────────────────────────────── */

:root {
  --paper: #050705;
  --paper-2: #080b08;
  --ink: #eaf2ea;
  --ink-2: rgba(226, 240, 228, 0.62);
  --ink-3: rgba(226, 240, 228, 0.38);
  --rule: rgba(226, 240, 228, 0.12);
  --dark: #0b120b;
  --band: #0a0f0a;
  --band-2: #0d130d;
  /* The accent: everything that acts wears it. */
  --accent: #00e676;
  --accent-soft: rgba(0, 230, 118, 0.14);
  --accent-line: rgba(0, 230, 118, 0.34);
  --accent-ink: #04160a;
  /* Semantic only, for the gap column. */
  --up: #00e676;
  --down: #ff5c5c;

  --gutter: clamp(20px, 4.5vw, 64px);
  --measure: 1200px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: -apple-system, system-ui, 'Inter', 'Segoe UI', sans-serif;
  font-size: 18px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/*
  The fade is a page-level vignette rather than a per-section gradient: a fixed
  layer that darkens the left, right and bottom edges of the viewport, so every
  section sits in the same black well no matter how tall it is. `pointer-events`
  keeps it out of the way of the nav and the table.
*/
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 90;
  pointer-events: none;
  background:
    linear-gradient(90deg, #000 0%, transparent 12%, transparent 88%, #000 100%),
    linear-gradient(0deg, #000 0%, transparent 14%);
  opacity: 0.55;
}

h1, h2, h3, h4 { margin: 0; font-weight: 600; letter-spacing: -0.03em; line-height: 1; }
p { margin: 0; }
a { color: inherit; text-decoration: none; }
ul { margin: 0; padding: 0; list-style: none; }

/* ─────────────────────────── Pills ─────────────────────────── */

.pill {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  height: 48px;
  padding: 0 24px;
  border-radius: 999px;
  font-size: 16px;
  font-weight: 500;
  white-space: nowrap;
  transition: transform 0.18s ease, background 0.18s ease;
}
.pill:hover { transform: translateY(-1px); }
.pill:active { transform: translateY(0) scale(0.985); }

.pill-dark { background: var(--accent); color: var(--accent-ink); }
.pill-dark:hover { background: #33eb8f; }
.pill-light { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink); }
.pill-light:hover { background: var(--ink); color: var(--paper); }


/* ─────────────────────────── Nav ─────────────────────────── */

.nav {
  position: fixed;
  top: 18px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 60;
  display: flex;
  align-items: center;
  padding: 8px 8px 8px 22px;
  border-radius: 999px;
  background: rgba(5, 7, 5, 0.72);
  box-shadow: inset 0 0 0 1px var(--rule);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  transition: background 0.3s ease;
}
.nav.stuck { background: rgba(5, 7, 5, 0.92); }

.brand { display: inline-flex; align-items: center; gap: 9px; font-size: 20px; font-weight: 600; letter-spacing: -0.02em; }
.brand-mark { width: 22px; height: 22px; flex: none; display: block; }

.nav-links { display: flex; gap: 4px; margin-left: 18px; }
.nav-links a { padding: 10px 14px; border-radius: 999px; font-size: 17px; color: var(--ink-2); transition: color 0.2s; }
.nav-links a:hover { color: var(--ink); }

/* The mark sits between the links and the CTA, and keeps its own left auto on
   phones so it — not the button — is what takes up the slack when the links go. */
.nav-x {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  margin-left: 8px;
  border-radius: 999px;
  color: var(--ink-2);
  transition: color 0.2s ease, background 0.2s ease;
}
.nav-x:hover { color: var(--ink); background: rgba(226, 240, 228, 0.08); }
.nav-x svg { display: block; }

/* ── Contract address bar, pinned in the gap under the nav pill ──
   Same frosted treatment as the nav so the two read as one stack. The
   address ellipsises when it cannot fit; Copy always takes the full value. */
.ca-bar {
  position: fixed;
  top: 80px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 59;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  max-width: calc(100vw - 2 * var(--gutter));
  padding: 6px 7px 6px 14px;
  border-radius: 999px;
  background: rgba(5, 7, 5, 0.72);
  box-shadow: inset 0 0 0 1px var(--rule);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
}
.ca-label {
  flex: none;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
}
.ca-addr {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13px;
  color: var(--ink-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: min(60vw, 420px);
}
.ca-copy {
  flex: none;
  padding: 7px 13px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
  color: var(--accent-ink);
  background: var(--accent);
  transition: background 0.2s ease, color 0.2s ease;
}
.ca-copy:hover { background: #33eb8f; }
.ca-copy[data-done='1'] {
  background: rgba(226, 240, 228, 0.12);
  color: var(--ink);
}


@media (max-width: 720px) {
  .nav { left: var(--gutter); right: var(--gutter); transform: none; padding-left: 18px; }
  .nav-links { display: none; }
  .nav-x { margin-left: auto; }
}

/* ─────────────────────────── Hero ─────────────────────────── */

.hero {
  position: relative;
  padding: 168px var(--gutter) 0;
  text-align: center;
  overflow: hidden;
  /*
    Two layers: a green bloom behind the headline, over a fade that starts at
    pure black and lands on the page colour by the time the handsets arrive —
    so the top of the document reads as black rather than as a coloured page.
  */
  background:
    radial-gradient(122% 76% at 50% -16%, rgba(0, 230, 118, 0.17), rgba(0, 230, 118, 0.05) 42%, transparent 68%),
    linear-gradient(180deg, #000000 0%, #030503 30%, var(--paper) 100%);
}



.hero-copy { position: relative; z-index: 2; max-width: 1000px; margin: 0 auto; }
.hero h1 { font-size: clamp(46px, 7.4vw, 96px); letter-spacing: -0.03em; line-height: 1; }
/* The second line carries the weight; no accent colour on the page. */
.hero h1 em { font-style: normal; color: var(--ink); }

.hero-sub {
  max-width: 620px;
  margin: 26px auto 0;
  font-size: clamp(18px, 1.9vw, 24px);
  line-height: 1.35;
  color: var(--ink-2);
}
.hero-btn { margin-top: 34px; }

/*
  The contract address. People copy it far more often than they read it, so the
  whole row is the button and the label sits in the same pill rather than above
  it. Mono digits keep the string scannable against a forgery.
*/
.ca {
  position: relative;
  z-index: 2;
  /* Block-level so it takes its own line under the button rather than sitting
     beside it on the hero's centred line. */
  display: flex;
  align-items: center;
  gap: 10px;
  width: fit-content;
  max-width: 100%;
  margin: 18px auto 0;
  padding: 8px 8px 8px 14px;
  border: 0;
  border-radius: 999px;
  background: rgba(226, 240, 228, 0.06);
  font: inherit;
  color: var(--ink-2);
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}
.ca:hover { background: rgba(226, 240, 228, 0.11); color: var(--ink); }
.ca-label { font-size: 13px; font-weight: 600; letter-spacing: 0.02em; color: var(--ink); }
.ca-addr {
  min-width: 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: clamp(11px, 1.5vw, 13.5px);
  letter-spacing: -0.01em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ca-action {
  flex: none;
  padding: 5px 12px;
  border-radius: 999px;
  background: var(--paper);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink);
}
.ca.copied { background: var(--accent-soft); color: var(--accent); }

.ca-foot {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12.5px;
  color: var(--ink-3);
  overflow-wrap: anywhere;
  transition: color 0.2s ease;
}
.ca-foot:hover { color: var(--ink); }

.rating { display: flex; align-items: center; justify-content: center; gap: 9px; margin-top: 20px; font-size: 15px; color: var(--ink-2); }
.dot-live { width: 7px; height: 7px; border-radius: 50%; background: var(--up); }

.hero-stage {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  margin: 20px auto -2px;
  max-width: 760px;
  /*
    Taller than the handsets need, because they are rotated: the corners of a
    rotated box reach past its own height, and a mask is sized to the element's
    box — anything outside it is masked away. Too short a stage and the tops get
    sliced flat. The slack sits above them; `flex-end` keeps them on the floor.
  */
  height: clamp(380px, 56vw, 580px);
  /*
    Masking the stage — shadows included — lets the handsets dissolve into the
    page instead of meeting the section edge on a hard horizontal line.
    `no-repeat` matters: the default would tile the gradient and band them.
  */
  mask-image: linear-gradient(to bottom, #000 0%, #000 76%, rgba(0, 0, 0, 0.35) 93%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 76%, rgba(0, 0, 0, 0.35) 93%, transparent 100%);
  mask-repeat: no-repeat;
  -webkit-mask-repeat: no-repeat;
  mask-size: 100% 100%;
  -webkit-mask-size: 100% 100%;
}
.phone {
  position: relative;
  border-radius: 42px;
  background: #0b120b;
  padding: 7px;
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.75), 0 0 0 1px var(--rule);
  overflow: hidden;
}
.phone img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top center; border-radius: 36px; }
.phone-back { width: clamp(190px, 25vw, 270px); height: clamp(300px, 44vw, 460px); transform: rotate(-7deg) translate(34px, -14px); }
.phone-front { width: clamp(210px, 27vw, 296px); height: clamp(300px, 46vw, 470px); transform: rotate(4deg) translate(-24px, 6px); z-index: 2; }

/* ────────────────────────── Ticker strip ──────────────────── */

.strip { padding: 56px 0 8px; background: var(--paper); }
.strip-label { text-align: center; font-size: 15px; color: var(--ink-3); margin-bottom: 24px; }
.strip-rail {
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.strip-track { display: flex; align-items: center; gap: 46px; width: max-content; animation: marquee 42s linear infinite; }
.strip-track img { width: 34px; height: 34px; border-radius: 9px; object-fit: cover; }
.strip-track span { display: flex; align-items: center; gap: 11px; font-size: 17px; font-weight: 500; color: var(--ink-2); }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ───────────────────────── Sections ──────────────────────── */

.section { max-width: var(--measure); margin: 0 auto; padding: clamp(76px, 9vw, 132px) var(--gutter); }
.center-head { text-align: center; max-width: 760px; margin: 0 auto clamp(40px, 5vw, 64px); }
.center-head h2, .split h2, .get h2 { font-size: clamp(34px, 5vw, 64px); letter-spacing: -0.03em; }
.section-sub { margin-top: 18px; font-size: clamp(17px, 1.6vw, 22px); line-height: 1.4; color: var(--ink-2); }

.fine { font-size: 14px; line-height: 1.6; color: var(--ink-3); }
.fine.center { max-width: 620px; margin: 30px auto 0; text-align: center; }

.band-soft { max-width: none; background: var(--band-2); }
.band-soft > * { max-width: var(--measure); margin-inline: auto; }

.status {
  display: inline-block;
  margin-left: 4px;
  padding: 3px 12px;
  border-radius: 999px;
  background: rgba(226, 240, 228, 0.08);
  color: var(--ink);
  font-size: 14px;
  font-weight: 500;
}

/* ────────────────────────── Table ────────────────────────── */

.table { border-top: 1px solid var(--ink); }
.thead, .row {
  display: grid;
  grid-template-columns: minmax(0, 2.2fr) 1fr 1fr 0.9fr 0.9fr;
  gap: 16px;
  align-items: center;
}
.thead { padding: 14px 0; font-size: 13px; font-weight: 500; color: var(--ink-3); border-bottom: 1px solid var(--rule); }
.row {
  padding: 16px 0;
  border-bottom: 1px solid var(--rule);
  opacity: 0;
  transform: translateY(10px);
  animation: rise 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  animation-delay: var(--d, 0s);
}
@keyframes rise { to { opacity: 1; transform: none; } }

.tick { display: flex; align-items: center; gap: 14px; min-width: 0; }
.tick img { width: 38px; height: 38px; border-radius: 10px; object-fit: cover; }
.tick .sym { font-size: 18px; font-weight: 600; letter-spacing: -0.01em; }
.tick .co { font-size: 15px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.num { text-align: right; font-size: 17px; font-variant-numeric: tabular-nums; }
.num.muted { color: var(--ink-3); }
.gap-pos { color: var(--up); font-weight: 500; }
.gap-neg { color: var(--down); font-weight: 500; }

.skeleton {
  height: 12px; border-radius: 4px; margin-left: auto; width: 68%;
  background: linear-gradient(90deg, rgba(226,240,228,0.08) 25%, rgba(226,240,228,0.04) 50%, rgba(226,240,228,0.08) 75%);
  background-size: 300% 100%;
  animation: shimmer 1.4s linear infinite;
}
@keyframes shimmer { to { background-position: -300% 0; } }

/* ───────────── Product trio — no plate, just the phone ────── */

.cards { display: grid; gap: 40px 28px; grid-template-columns: repeat(3, 1fr); }

.card {
  background: transparent;
  border-radius: 0;
  padding: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  text-align: center;
}
.card h3 { font-size: clamp(24px, 2.2vw, 30px); }
.card p { margin-top: 12px; font-size: 17px; line-height: 1.45; color: var(--ink-2); }

.card-shot { margin-top: 26px; display: flex; justify-content: center; }
.card-shot img {
  width: 74%;
  border-radius: 22px;
  box-shadow: 0 20px 44px rgba(0, 0, 0, 0.6), 0 0 0 1px var(--rule);
  display: block;
}

/* ─────── Feature grid — transparent, three across, ruled ──── */

.grid { display: grid; gap: 44px 40px; grid-template-columns: repeat(3, 1fr); }
.cell { background: transparent; border-radius: 0; padding: 22px 0 0; border-top: 2px solid var(--ink); }
.cell h4 { font-size: 20px; letter-spacing: -0.02em; }
.cell p { margin-top: 10px; font-size: 16.5px; line-height: 1.45; color: var(--ink-2); }

/* ───────────────────────── Split section ─────────────────── */

.split { display: grid; gap: clamp(36px, 6vw, 80px); grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); align-items: start; }
.ticks { margin-top: 28px; display: grid; gap: 12px; }
.ticks li { position: relative; padding-left: 30px; font-size: 17px; color: var(--ink-2); }
.ticks li::before {
  content: '';
  position: absolute;
  left: 0; top: 8px;
  width: 16px; height: 9px;
  border-left: 2px solid var(--ink);
  border-bottom: 2px solid var(--ink);
  transform: rotate(-45deg);
}

/* Also transparent: a ruled list, not four filled tiles. */
.facts { display: grid; gap: 0; margin: 0; background: transparent; border-radius: 0; }
.facts > div { background: transparent; padding: 18px 0; border-bottom: 1px solid var(--rule); }
.facts > div:first-child { border-top: 1px solid var(--rule); }
.facts dt { font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }
.facts dd { margin: 7px 0 0; font-size: 17px; }

/* ─────────────────────────── Get ─────────────────────────── */

.get { text-align: center; padding: clamp(80px, 10vw, 140px) var(--gutter); background: var(--band); }
.get .section-sub { max-width: 560px; margin-inline: auto; }
.get-btns { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 40px; }

/* ────────────────────────── Footer ───────────────────────── */

.footer {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  align-items: center;
  justify-content: space-between;
  max-width: var(--measure);
  margin: 0 auto;
  padding: 40px var(--gutter) 56px;
  border-top: 1px solid var(--rule);
}
.footer .fine { max-width: 62ch; }

.x-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 500;
  color: var(--ink-2);
  transition: color 0.2s ease;
}
.x-link:hover { color: var(--ink); }

/* ───────────────────────── Reveals ───────────────────────── */

.reveal { opacity: 0; transform: translateY(16px); transition: opacity 0.7s cubic-bezier(0.16,1,0.3,1), transform 0.7s cubic-bezier(0.16,1,0.3,1); }
.reveal.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .strip-track { animation: none; }
  .row { animation: none; opacity: 1; transform: none; }
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* ───────────────────────── Responsive ────────────────────── */

@media (max-width: 900px) {
  .thead, .row { grid-template-columns: minmax(0, 2fr) 1fr 1fr; }
  .tablet-hide { display: none; }
  .cards, .grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px) {
  .thead, .row { grid-template-columns: minmax(0, 1.7fr) 1fr 0.9fr; }
  .phone-hide { display: none; }
  .tick .co { display: none; }
  .cards, .grid { grid-template-columns: 1fr; }
  .hero { padding-top: 132px; }
}

/* ═══════════════════ Swapped additions ═══════════════════════ */

/* ─── Coin marks ───
   Five assets ship as real SVG marks; the rest resolve to a lettered disc,
   so both have to line up on the same 34px baseline in every context. */
.coin { width: 34px; height: 34px; flex: none; border-radius: 50%; display: block; }
.mono {
  display: flex; align-items: center; justify-content: center;
  color: var(--accent-ink); font-size: 15px; font-weight: 700; letter-spacing: -0.02em;
}
.tick .coin { width: 38px; height: 38px; }
.tick .mono { font-size: 16px; }

/* ─── Hero route pill ───
   Sits in the slot the contract pill used to hold, on its own line under the
   button rather than beside it on the hero's centred line. */
.route {
  position: relative; z-index: 2;
  display: flex; align-items: center; gap: 12px;
  width: fit-content; max-width: 100%;
  margin: 22px auto 0;
  padding: 9px 18px 9px 12px;
  border-radius: 999px;
  background: rgba(11, 18, 11, 0.72);
  border: 1px solid var(--rule);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  font-size: 16px; font-weight: 600; letter-spacing: -0.01em;
}
.route-leg { display: flex; align-items: center; gap: 8px; }
.route-leg .coin { width: 26px; height: 26px; }
.route-arrow { color: var(--up); font-weight: 700; }
.route-note {
  padding-left: 12px; margin-left: 2px;
  border-left: 1px solid var(--rule);
  font-weight: 400; color: var(--ink-3);
}

/* ─── The four steps Swapped removes ─── */
.steps {
  list-style: none;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0;
  max-width: 900px; margin: 0 auto;
  border-top: 2px solid var(--ink);
}
.steps li {
  padding: 24px 28px 26px 0;
  font-size: clamp(18px, 2vw, 25px); font-weight: 600; letter-spacing: -0.02em;
  /* The steps read as a sequence that is about to be crossed out. */
  color: var(--ink-3);
}
.steps-n {
  display: inline-block; width: 100%; margin-bottom: 10px;
  font-size: 13px; font-weight: 500; letter-spacing: 0.06em;
  color: var(--ink-3); text-decoration: none;
  font-variant-numeric: tabular-nums;
}
.steps-strike {
  max-width: 900px; margin: 34px auto 0;
  font-size: clamp(19px, 2vw, 26px); line-height: 1.35; letter-spacing: -0.02em;
  font-weight: 600; text-align: center;
}

/* ─── Rates table ───
   The receive column carries the longest strings ("1,546.00 USDC"), so it
   takes the width the pool-fee column used to hold. */
.thead, .row { grid-template-columns: minmax(0, 2.1fr) 1.1fr 0.9fr 0.7fr 1.4fr; }
.chain { font-size: 16px; color: var(--ink-2); align-self: center; }
.recv { font-weight: 600; }
.recv-sym { font-weight: 400; color: var(--ink-3); font-size: 15px; }

@media (max-width: 900px) {
  .steps { grid-template-columns: repeat(2, 1fr); }
  .steps li:nth-child(-n + 2) { border-bottom: 1px solid var(--rule); }
}
@media (max-width: 620px) {
  /* 1fr cannot shrink below its content, so the route pill needs minmax. */
  .thead, .row { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1.3fr); }
  .route { gap: 9px; padding: 8px 14px 8px 10px; font-size: 15px; }
  .route-note { padding-left: 9px; }
}

/* ───────────────── App Store button + review state ──────────────── */

.appstore { display: inline-flex; align-items: center; gap: 11px; height: 54px; padding: 0 24px; }
.appstore .apple { width: 22px; height: 22px; flex: none; }
.appstore-copy {
  display: flex; flex-direction: column; align-items: flex-start;
  line-height: 1.05; text-align: left;
  font-size: 18px; font-weight: 600; letter-spacing: -0.01em;
}
.appstore-copy small { font-size: 11px; font-weight: 400; opacity: 0.72; letter-spacing: 0.02em; }

/* The panel is revealed by `hidden`; nothing here may set display, or the
   attribute stops winning. */
.review {
  width: fit-content; max-width: 460px;
  margin: 20px auto 0;
  padding: 18px 22px 20px;
  border-radius: 22px;
  text-align: left;
  background: rgba(11, 18, 11, 0.86);
  border: 1px solid var(--rule);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  opacity: 0; transform: translateY(-6px);
  transition: opacity 0.32s ease, transform 0.32s cubic-bezier(0.16, 1, 0.3, 1);
}
.review.in { opacity: 1; transform: none; }
.review[hidden] { display: none; }

.review-head {
  display: flex; align-items: center; gap: 9px;
  font-size: 16px; font-weight: 600; letter-spacing: -0.01em;
}
.review-body { margin-top: 8px; font-size: 15.5px; line-height: 1.45; color: var(--ink-2); }

.review-steps {
  list-style: none;
  display: flex; align-items: center; gap: 8px;
  margin-top: 16px; padding-top: 14px;
  border-top: 1px solid var(--rule);
  font-size: 13.5px; color: var(--ink-3);
}
.review-steps li { display: flex; align-items: center; gap: 8px; }
.review-steps li + li::before {
  content: ''; width: 14px; height: 1px; background: var(--rule);
}
.review-steps .done { color: var(--ink-2); }
.review-steps .now { color: var(--up); font-weight: 600; }

@media (max-width: 620px) {
  .appstore { height: 50px; padding: 0 20px; }
  .review { margin-left: 0; margin-right: 0; }
}

/* ═════════════════════ Scroll motion ═════════════════════ */

/* ─── Headings, a word at a time ─── */
.w {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.42em);
  transition: opacity 0.62s ease, transform 0.62s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.hero-copy.in .w, h2.in .w { opacity: 1; transform: none; }

/* The hero's supporting elements follow the headline rather than racing it. */
.hero-copy .hero-sub,
.hero-copy .appstore,
.hero-copy .route {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.hero-copy.in .hero-sub { transition-delay: 0.34s; }
.hero-copy.in .appstore { transition-delay: 0.44s; }
.hero-copy.in .route    { transition-delay: 0.54s; }
.hero-copy.in .hero-sub,
.hero-copy.in .appstore,
.hero-copy.in .route { opacity: 1; transform: none; }

/* ─── The strike draws itself across each step ─── */
.steps-label { position: relative; display: inline-block; }
.steps-label::after {
  content: '';
  position: absolute; left: 0; right: 0; top: 52%;
  height: 2px; background: rgba(226, 240, 228, 0.34);
  transform: scaleX(0); transform-origin: left center;
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.steps.in .steps-label::after { transform: scaleX(1); }
.steps.in li:nth-child(1) .steps-label::after { transition-delay: 0.15s; }
.steps.in li:nth-child(2) .steps-label::after { transition-delay: 0.35s; }
.steps.in li:nth-child(3) .steps-label::after { transition-delay: 0.55s; }
.steps.in li:nth-child(4) .steps-label::after { transition-delay: 0.75s; }

/* ─── Table rows arrive with the table, not on page load ─── */
.row {
  animation: none;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.table.in .row { opacity: 1; transform: none; transition-delay: var(--d, 0s); }

/* ─── Hero phones drift as the page moves ───
   --py is written by the scroll handler; the rotation stays here so JS never
   has to restate it. */
.phone-back  { transform: rotate(-7deg) translate(34px, -14px) translateY(var(--py, 0)); }
.phone-front { transform: rotate(4deg) translate(-24px, 6px) translateY(var(--py, 0)); }

@media (prefers-reduced-motion: reduce) {
  .w, .hero-copy .hero-sub, .hero-copy .appstore, .hero-copy .route,
  .row { opacity: 1; transform: none; transition: none; }
  .steps-label::after { transform: scaleX(1); transition: none; }
  .phone-back  { transform: rotate(-7deg) translate(34px, -14px); }
  .phone-front { transform: rotate(4deg) translate(-24px, 6px); }
}

/* ════════════════════ Prose pages ════════════════════ */

.prose {
  max-width: 720px;
  margin: 0 auto;
  padding: 172px var(--gutter) clamp(80px, 9vw, 130px);
}
.prose h1 { font-size: clamp(38px, 5.4vw, 64px); letter-spacing: -0.03em; line-height: 1.05; }
.prose-meta { margin-top: 16px; font-size: 16px; color: var(--ink-3); }
.prose-lead {
  margin-top: 32px;
  font-size: clamp(19px, 2vw, 23px); line-height: 1.45;
  letter-spacing: -0.01em; color: var(--ink);
}
.prose h2 {
  margin-top: 52px; padding-top: 26px;
  border-top: 2px solid var(--ink);
  font-size: clamp(22px, 2.4vw, 28px); letter-spacing: -0.02em;
}
.prose p { margin-top: 16px; font-size: 17.5px; line-height: 1.55; color: var(--ink-2); }
.prose ul { margin-top: 16px; padding-left: 0; list-style: none; display: grid; gap: 10px; }
.prose li {
  position: relative; padding-left: 24px;
  font-size: 17.5px; line-height: 1.5; color: var(--ink-2);
}
.prose li::before {
  content: ''; position: absolute; left: 2px; top: 11px;
  width: 7px; height: 7px; border-radius: 50%; background: var(--up);
}
.prose a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.prose a:hover { color: var(--up); }

.foot-link { font-size: 16px; color: var(--ink-2); transition: color 0.2s; }
.foot-link:hover { color: var(--ink); }

/* ═══════════════════ Swap card ═══════════════════

   Grafted in from the relay build and re-skinned to this page: the pane is
   one dark slab, the two legs are separated by a hairline rather than a
   border each, and the accent only touches what acts — the flip, the primary
   button, the caret. Every class is `swp-` prefixed so none of it can reach
   the landing page's own `.card`, `.steps`, `.row` or `.pill`.
   ─────────────────────────────────────────────── */

.swp {
  position: relative;
  max-width: 560px;
  margin: 0 auto;
  display: grid;
  gap: 16px;
}

/* ── The pane ── */

.swp-pane {
  position: relative;
  display: grid;
  gap: 0;
  padding: 6px;
  border-radius: 26px;
  background:
    linear-gradient(180deg, rgba(0, 230, 118, 0.05), transparent 42%),
    var(--dark);
  box-shadow:
    0 30px 70px rgba(0, 0, 0, 0.6),
    inset 0 0 0 1px var(--rule);
}

/* ── The connect bar ──
   The wallet button sits above the legs, inside the same slab, because it
   changes what the rest of the card means: without it the quote is an
   illustration, with it the same quote becomes the transaction. */

.swp-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px 14px;
  border-bottom: 1px solid var(--rule);
}
.swp-top-label {
  font-size: 12.5px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.swp-connect {
  appearance: none;
  border: 0;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 10px 17px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--accent-ink);
  font: inherit;
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: -0.01em;
  cursor: pointer;
  transition: background 0.16s, color 0.16s;
}
.swp-connect:hover { background: #33eb8f; }
.swp-connect-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  flex: 0 0 auto;
}
.swp-connect[data-linked='1'] {
  background: rgba(226, 240, 228, 0.08);
  color: var(--ink);
}
.swp-connect[data-linked='1']:hover { background: rgba(226, 240, 228, 0.16); }
.swp-connect[data-linked='1'] .swp-connect-dot {
  background: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.swp-connect[data-busy='1'] { opacity: 0.72; cursor: default; }

.swp-wallet {
  margin: 0;
  padding: 11px 18px 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-3);
}
.swp-wallet[data-tone='warn'] { color: #ffb3b3; }

.swp-leg { padding: 16px 18px 18px; }
.swp-leg + .swp-leg {
  border-top: 1px solid var(--rule);
  padding-top: 20px;
}

.swp-leg-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  min-height: 20px;
}
.swp-leg-label {
  font-size: 12.5px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.swp-leg-side { display: flex; align-items: baseline; gap: 10px; }
.swp-balance {
  font-size: 13px;
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
}
.swp-link {
  appearance: none;
  border: 0;
  background: none;
  padding: 0;
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
  cursor: pointer;
}
.swp-link:hover { text-decoration: underline; text-underline-offset: 3px; }

.swp-leg-body {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: 10px;
}

/* The token button: logo, symbol, caret. */
.swp-token {
  appearance: none;
  border: 0;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
  padding: 9px 13px 9px 9px;
  border-radius: 999px;
  background: rgba(226, 240, 228, 0.06);
  color: var(--ink);
  font: inherit;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.16s;
}
.swp-token:hover { background: rgba(226, 240, 228, 0.12); }

.swp-tok-logo {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(0, 230, 118, 0.14);
  color: var(--accent);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  overflow: hidden;
  flex: 0 0 auto;
}
.swp-tok-logo.swp-has-img { background: transparent; }
.swp-tok-logo img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }

.swp-caret {
  width: 8px;
  height: 8px;
  border-right: 1.6px solid var(--ink-3);
  border-bottom: 1.6px solid var(--ink-3);
  transform: rotate(45deg) translate(-1px, -1px);
}

.swp-leg-inputs {
  flex: 1 1 auto;
  min-width: 0;
  text-align: right;
}
.swp-amt {
  width: 100%;
  border: 0;
  background: none;
  padding: 0;
  color: var(--ink);
  font: inherit;
  font-size: clamp(24px, 5.4vw, 32px);
  font-weight: 500;
  letter-spacing: -0.02em;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.swp-amt:focus { outline: none; }
.swp-amt::placeholder { color: var(--ink-3); }
.swp-amt-out { color: var(--ink-2); }
.swp-amt-sub {
  display: block;
  margin-top: 4px;
  font-size: 13px;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
  min-height: 18px;
}

.swp-leg-foot { display: flex; justify-content: flex-start; margin-top: 14px; }
.swp-chain {
  appearance: none;
  border: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px 6px 10px;
  border-radius: 999px;
  background: none;
  box-shadow: inset 0 0 0 1px var(--rule);
  color: var(--ink-2);
  font: inherit;
  font-size: 13.5px;
  cursor: pointer;
  transition: color 0.16s, box-shadow 0.16s;
}
.swp-chain:hover { color: var(--ink); box-shadow: inset 0 0 0 1px var(--accent-line); }
.swp-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
  flex: 0 0 auto;
}

/* The flip sits on the seam between the legs. */
.swp-flip {
  appearance: none;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: var(--accent);
  color: var(--accent-ink);
  cursor: pointer;
  z-index: 2;
  box-shadow: 0 0 0 6px var(--dark);
  transition: background 0.16s, transform 0.2s;
}
.swp-flip:hover { background: #33eb8f; transform: translate(-50%, -50%) rotate(180deg); }

/* ── Advanced ── */

.swp-adv {
  border-radius: 20px;
  background: rgba(11, 18, 11, 0.72);
  box-shadow: inset 0 0 0 1px var(--rule);
  overflow: hidden;
}
.swp-adv > summary {
  list-style: none;
  cursor: pointer;
  padding: 15px 20px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-2);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.swp-adv > summary::-webkit-details-marker { display: none; }
.swp-adv > summary::after {
  content: '';
  width: 8px;
  height: 8px;
  border-right: 1.6px solid currentColor;
  border-bottom: 1.6px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform 0.2s;
}
.swp-adv[open] > summary { color: var(--ink); }
.swp-adv[open] > summary::after { transform: rotate(225deg) translate(-2px, -2px); }
.swp-adv-grid {
  display: grid;
  gap: 14px;
  padding: 4px 20px 20px;
}
.swp-field { display: grid; gap: 7px; }
.swp-field > span {
  font-size: 12.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.swp-field input {
  width: 100%;
  border: 0;
  border-radius: 12px;
  background: rgba(226, 240, 228, 0.06);
  padding: 12px 14px;
  color: var(--ink);
  font: inherit;
  font-size: 14.5px;
}
.swp-field input::placeholder { color: var(--ink-3); }
.swp-field input:focus { outline: none; box-shadow: inset 0 0 0 1px var(--accent-line); }

/* ── Quote ── */

.swp-quote {
  border-radius: 20px;
  padding: 18px 20px;
  background: rgba(11, 18, 11, 0.72);
  box-shadow: inset 0 0 0 1px var(--rule);
}
.swp-q-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--rule);
}
.swp-q-op { font-size: 15px; font-weight: 600; letter-spacing: -0.01em; }
.swp-q-time { font-size: 13px; color: var(--accent); font-variant-numeric: tabular-nums; }

.swp-q-rows { margin: 0; display: grid; gap: 0; }
.swp-q-rows:not(:empty) { padding-top: 6px; }
.swp-q-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 7px 0;
}
.swp-q-row dt { font-size: 14px; color: var(--ink-2); }
.swp-q-row dd {
  margin: 0;
  font-size: 14px;
  text-align: right;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  word-break: break-word;
}
.swp-q-row dd strong { font-weight: 600; color: var(--accent); }

.swp-q-fees { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--rule); }
.swp-q-fees > summary {
  list-style: none;
  cursor: pointer;
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.swp-q-fees > summary::-webkit-details-marker { display: none; }
.swp-q-fees > summary:hover { color: var(--ink-2); }

/* ── Message, button, fine print ── */

.swp-msg {
  margin: 0;
  padding: 13px 16px;
  border-radius: 14px;
  font-size: 14.5px;
  line-height: 1.45;
  background: rgba(226, 240, 228, 0.06);
  color: var(--ink-2);
}
.swp-msg-warn { background: rgba(255, 92, 92, 0.12); color: #ffb3b3; }

.swp-btn {
  appearance: none;
  width: 100%;
  border: 0;
  border-radius: 18px;
  padding: 18px 22px;
  font: inherit;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.01em;
  cursor: pointer;
  transition: background 0.16s, color 0.16s, opacity 0.16s;
}
.swp-btn-primary { background: var(--accent); color: var(--accent-ink); }
.swp-btn-primary:hover:not(:disabled) { background: #33eb8f; }
.swp-btn:disabled { background: rgba(226, 240, 228, 0.08); color: var(--ink-3); cursor: default; }

.swp-fine {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--ink-3);
  text-align: center;
}

/* ── Steps and status ── */

.swp-card {
  border-radius: 22px;
  padding: 24px 24px 26px;
  background: rgba(11, 18, 11, 0.72);
  box-shadow: inset 0 0 0 1px var(--rule);
}
.swp-card-title { margin: 0; font-size: 17px; letter-spacing: -0.01em; }
.swp-card-sub { margin: 8px 0 0; font-size: 14px; line-height: 1.5; color: var(--ink-3); }

.swp-steps { list-style: none; margin: 20px 0 0; padding: 0; display: grid; gap: 14px; }
.swp-step { display: flex; align-items: flex-start; gap: 13px; }
.swp-step-mark {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: rgba(226, 240, 228, 0.08);
  color: var(--ink-3);
  font-size: 12.5px;
  font-weight: 600;
  transition: background 0.2s, color 0.2s;
}
.swp-step-body { display: grid; gap: 3px; min-width: 0; }
.swp-step-label { font-size: 15px; color: var(--ink-2); }
.swp-step-desc { font-size: 13.5px; line-height: 1.45; color: var(--ink-3); }
.swp-step[data-state='active'] .swp-step-mark {
  background: var(--accent);
  color: var(--accent-ink);
  box-shadow: 0 0 0 5px var(--accent-soft);
}
.swp-step[data-state='active'] .swp-step-label { color: var(--ink); }
.swp-step[data-state='done'] .swp-step-mark { background: var(--accent-soft); color: var(--accent); }
.swp-step[data-state='done'] .swp-step-label { color: var(--ink); }

.swp-status-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 16px;
  flex-wrap: wrap;
}
.swp-pill {
  display: inline-flex;
  align-items: center;
  padding: 5px 12px;
  border-radius: 999px;
  background: rgba(226, 240, 228, 0.08);
  color: var(--ink-2);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.swp-pill[data-state='preview'] { background: var(--accent-soft); color: var(--accent); }
.swp-rid {
  font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;
  font-size: 12.5px;
  color: var(--ink-3);
}

/* ── Pickers ── */

.swp-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  padding: 24px;
}
.swp-modal[hidden] { display: none; }
.swp-modal-back {
  position: absolute;
  inset: 0;
  background: rgba(2, 4, 2, 0.76);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.swp-modal-box {
  position: relative;
  width: 100%;
  max-width: 420px;
  max-height: min(72vh, 620px);
  display: flex;
  flex-direction: column;
  padding: 20px;
  border-radius: 24px;
  background: var(--band-2);
  box-shadow:
    0 40px 90px rgba(0, 0, 0, 0.7),
    inset 0 0 0 1px var(--rule);
}
.swp-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}
.swp-modal-head h3 { margin: 0; font-size: 17px; letter-spacing: -0.01em; }
.swp-x {
  appearance: none;
  border: 0;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(226, 240, 228, 0.08);
  color: var(--ink-2);
  cursor: pointer;
  transition: background 0.16s, color 0.16s;
}
.swp-x:hover { background: rgba(226, 240, 228, 0.16); color: var(--ink); }

.swp-search {
  width: 100%;
  border: 0;
  border-radius: 14px;
  background: rgba(226, 240, 228, 0.06);
  padding: 13px 16px;
  color: var(--ink);
  font: inherit;
  font-size: 15px;
}
.swp-search::placeholder { color: var(--ink-3); }
.swp-search:focus { outline: none; box-shadow: inset 0 0 0 1px var(--accent-line); }

.swp-list {
  margin-top: 12px;
  overflow-y: auto;
  overscroll-behavior: contain;
  display: grid;
  gap: 2px;
  padding-right: 4px;
}
.swp-row {
  appearance: none;
  border: 0;
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 14px;
  background: none;
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background 0.14s;
}
.swp-row:hover { background: rgba(226, 240, 228, 0.07); }
.swp-row[aria-selected='true'] { background: var(--accent-soft); }
.swp-row-logo {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: rgba(226, 240, 228, 0.08);
  color: var(--ink-2);
  font-size: 12px;
  font-weight: 700;
  overflow: hidden;
}
.swp-row-logo img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.swp-row-main { display: grid; gap: 2px; min-width: 0; flex: 1 1 auto; }
.swp-row-sym { font-size: 15px; font-weight: 600; }
.swp-row-sub {
  font-size: 13px;
  color: var(--ink-3);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.swp-row-ok { color: var(--accent); font-size: 13px; flex: 0 0 auto; }
.swp-empty {
  margin: 0;
  padding: 22px 12px;
  text-align: center;
  font-size: 14.5px;
  color: var(--ink-3);
}

/* ── Per-step controls ──
   Each step owns its own button: a route can ask for an approval, a deposit
   and a signature, and the visitor signs them one at a time. */

.swp-btn-ghost {
  appearance: none;
  border: 0;
  border-radius: 999px;
  padding: 8px 16px;
  background: rgba(226, 240, 228, 0.08);
  color: var(--ink);
  font: inherit;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.16s, color 0.16s;
}
.swp-btn-ghost:hover:not(:disabled) { background: var(--accent-soft); color: var(--accent); }
.swp-btn-ghost:disabled { color: var(--ink-3); cursor: default; }

.swp-step-act { margin-top: 8px; }
.swp-step-meta { margin-top: 6px; }
.swp-step-meta code,
.swp-step-act code {
  font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;
  font-size: 12.5px;
  color: var(--ink-3);
}
.swp-step-act a { color: var(--accent); font-size: 13.5px; text-decoration: none; }
.swp-step-act a:hover { text-decoration: underline; text-underline-offset: 3px; }
.swp-step-act .swp-fine { font-size: 13px; text-align: left; }

.swp-step[data-state='error'] .swp-step-mark { background: rgba(255, 92, 92, 0.16); color: var(--down); }
.swp-step[data-state='error'] .swp-step-label { color: var(--down); }

.swp-spin {
  display: inline-block;
  width: 11px;
  height: 11px;
  margin-right: 7px;
  vertical-align: -1px;
  border: 1.6px solid var(--rule);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: swp-turn 0.7s linear infinite;
}
@keyframes swp-turn { to { transform: rotate(360deg); } }

.swp-q-row dd a { color: var(--accent); text-decoration: none; }
.swp-q-row dd a:hover { text-decoration: underline; text-underline-offset: 3px; }
.swp-pill[data-state='ok'] { background: var(--accent-soft); color: var(--accent); }
.swp-pill[data-state='bad'] { background: rgba(255, 92, 92, 0.16); color: var(--down); }

/* The pane is already a slab, so the card owns no further chrome. */
#swap .fine.center { margin-top: 34px; }

@media (max-width: 560px) {
  .swp-pane { border-radius: 22px; }
  .swp-leg { padding: 14px 15px 16px; }
  .swp-amt { font-size: 26px; }
  .swp-token { padding: 8px 11px 8px 8px; font-size: 15px; }
  .swp-tok-logo { width: 26px; height: 26px; }
  .swp-modal { padding: 14px; }
  .swp-modal-box { border-radius: 20px; padding: 16px; }
  .swp-top { padding: 10px 12px 12px; }
  .swp-connect { padding: 9px 14px; font-size: 13.5px; }
  .swp-wallet { padding: 10px 15px 0; }
  .ca-bar { top: 76px; gap: 8px; padding-left: 12px; }
  .ca-addr { font-size: 12px; max-width: 44vw; }
  .ca-copy { padding: 7px 11px; font-size: 12.5px; }
}