/* swapcore — the green field. Direction contract: templates/layout.tmpl. */

@font-face {
  font-family: "Golos Text";
  src: url("/static/fonts/golos-text-latin.woff2") format("woff2");
  font-weight: 400 900;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191,
    U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Golos Text";
  src: url("/static/fonts/golos-text-latin-ext.woff2") format("woff2");
  font-weight: 400 900;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
    U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
    U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
    U+A720-A7FF;
}
@font-face {
  font-family: "Golos Text";
  src: url("/static/fonts/golos-text-cyrillic.woff2") format("woff2");
  font-weight: 400 900;
  font-display: swap;
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Golos Text";
  src: url("/static/fonts/golos-text-cyrillic-ext.woff2") format("woff2");
  font-weight: 400 900;
  font-display: swap;
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F,
    U+FE2E-FE2F;
}
/* Valley Sans (Helsinki Type Studio, OFL 1.1) is Latin-only: the display
   tier falls back to Golos for ru/uk rather than render tofu. */
@font-face {
  font-family: "Valley Sans";
  src: url("/static/fonts/valley-sans-var.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191,
    U+2193, U+2212, U+2215, U+FEFF, U+FFFD, U+0100-02BA, U+02BD-02C5,
    U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+1EF2-1EFF;
}
/* Martian Mono (Evil Martians, OFL 1.1): a wide engineered grotesque, so
   every figure reads as measured rather than typed. */
@font-face {
  font-family: "Martian Mono";
  src: url("/static/fonts/martian-mono-latin-400.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191,
    U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Martian Mono";
  src: url("/static/fonts/martian-mono-latin-700.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191,
    U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Martian Mono";
  src: url("/static/fonts/martian-mono-latin-ext-400.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
    U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
    U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
    U+A720-A7FF;
}
@font-face {
  font-family: "Martian Mono";
  src: url("/static/fonts/martian-mono-latin-ext-700.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
    U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
    U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
    U+A720-A7FF;
}
@font-face {
  font-family: "Martian Mono";
  src: url("/static/fonts/martian-mono-cyrillic-400.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Martian Mono";
  src: url("/static/fonts/martian-mono-cyrillic-700.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Martian Mono";
  src: url("/static/fonts/martian-mono-cyrillic-ext-400.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F,
    U+FE2E-FE2F;
}
@font-face {
  font-family: "Martian Mono";
  src: url("/static/fonts/martian-mono-cyrillic-ext-700.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F,
    U+FE2E-FE2F;
}

/* --------------------------------------------------------------------------
   Tokens
   -------------------------------------------------------------------------- */

body.swc {
  color-scheme: dark;

  /* Green-black, not neutral-black: the ground carries the brand hue, which
     is also what separates swapcore from its neutral-dark siblings.
     Measured on paper: ink 16.9:1, ink-2 8.1:1, ink-3 4.9:1 (page ground
     only — panels use ink-2). */
  --color-paper: #0c100e;
  --color-surface: #141b18;
  --color-surface-2: #1b2420;
  --color-ink: #f2f7f4;
  --color-ink-2: #a7b7ae;
  --color-ink-3: #87978d;

  --color-rule: #223029;
  --color-rule-strong: #34473d;
  --color-control: #5a6c62;
  --color-control-hover: #778c80;

  --color-signal: #07c170;
  --color-signal-ink: #06130c;
  --color-signal-wash: rgb(7 193 112 / 0.12);

  --color-ok: #1fce7c;
  --color-ok-wash: rgb(31 206 124 / 0.13);
  --color-warn: #f5b83d;
  --color-warn-wash: rgb(245 184 61 / 0.13);
  --color-bad: #ff6166;
  --color-bad-wash: rgb(255 97 102 / 0.13);
  --color-busy: #58a6ff;
  --color-busy-wash: rgb(88 166 255 / 0.13);

  --grid-line: transparent;
  --color-qr-plate: #fff;

  --radius-plane: 14px;
  --radius-control: 8px;
  --radius-pill: 999px;
  --band-gap: clamp(72px, 9vw, 112px);

  --font-sans: "Golos Text", "Helvetica Neue", "Segoe UI", Roboto, sans-serif;
  --font-display: "Valley Sans", "Golos Text", "Helvetica Neue", sans-serif;
  --font-mono: "Martian Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --shade-card: 0 24px 64px rgb(0 0 0 / 0.45);
  --shade-pop: 0 12px 32px rgb(0 0 0 / 0.5);
}

html:has(body.swc) { color-scheme: dark; scroll-padding-block-start: 84px; }
html:has(body.swc), body.swc { overflow-x: clip; }
@media (max-width: 48rem) {
  html:has(body.swc) { scroll-padding-block-start: 60px; }
}

body.swc {
  background-color: var(--color-paper);
  background-image: radial-gradient(64rem 36rem at 70% -10rem, rgb(7 193 112 / 0.09), transparent 70%);
  background-repeat: no-repeat;
  font-family: var(--font-sans);
}

/* --------------------------------------------------------------------------
   Type and browser surfaces
   -------------------------------------------------------------------------- */

.swc h1, .swc h2, .swc h3, .swc .btn, .swc .nav a, .swc .nav button,
.swc .label, .swc input, .swc select, .swc textarea {
  font-family: var(--font-sans);
}
.swc h1, .swc h2, .swc h3, .swc .section-title { font-family: var(--font-display); }
.swc h1 { font-weight: 830; letter-spacing: -0.02em; line-height: 1.04; }
.swc h2, .swc h3 { font-weight: 700; letter-spacing: -0.01em; line-height: 1.25; }
.swc h2:not(.section-title) { border: 0; padding-block-end: 0; color: var(--color-ink); }

.swc .num, .swc code, .swc .xfield-amount, .swc .xrate b, .swc .address {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.05em;
}
.swc .num, .swc .num b, .swc .num dd, .swc .num dt, .swc b.num { font-weight: 400; }

.swc .label, .swc .xfield-label { text-transform: none; letter-spacing: normal; }

.swc ::selection { background: var(--color-signal); color: var(--color-signal-ink); }
.swc input, .swc textarea { caret-color: var(--color-signal); }
.swc * { scrollbar-color: var(--color-control) transparent; }
.swc *::-webkit-scrollbar { block-size: 10px; inline-size: 10px; }
.swc *::-webkit-scrollbar-thumb { background: var(--color-control); border-radius: var(--radius-pill); }
.swc *::-webkit-scrollbar-track { background: transparent; }
.swc a { color: var(--color-signal); text-underline-offset: 3px; }

.swc :focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--color-paper), 0 0 0 4px var(--color-signal);
}
/* The amount readout and the picker filter sit inside a plane that already
   takes the focus mark; a ring here would draw a control inside a control. */
.swc .xfield-amount:focus,
.swc .xfield-amount:focus-visible,
.swc .picker-filter:focus,
.swc .picker-filter:focus-visible {
  box-shadow: none;
}

/* --------------------------------------------------------------------------
   Header and footer
   -------------------------------------------------------------------------- */

.swc .site-header {
  background: rgb(12 16 14 / 0.88);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--color-rule);
}
.swc .site-header::after { display: none; }
.swc .brand-logo .logo-light { display: none; }
.swc .brand-logo .logo-dark { display: inline; }

.swc .nav :is(a, button) {
  font-weight: 500;
  text-transform: none;
  letter-spacing: normal;
  color: var(--color-ink-2);
}
.swc .nav :is(a, button):hover { color: var(--color-ink); }
.swc .nav a[aria-current="page"] { color: var(--color-signal); }
@media (max-width: 40rem) {
  .swc .site-header:has(.nav-toggle[aria-expanded="true"]) {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: var(--color-paper);
  }
  .swc .nav { background: var(--color-paper); border-block-end: 1px solid var(--color-rule); z-index: 40; }
}

.swc .site-footer { background: transparent; border-top: 1px solid var(--color-rule); }
.swc .footer-group h2 { color: var(--color-ink-3); font-weight: 500; }
.swc .footer-group a { color: var(--color-ink-2); }
.swc .footer-group a:hover { color: var(--color-signal); }
.swc .footer-social a { border-color: var(--color-rule-strong); color: var(--color-ink-2); }
.swc .footer-social a:hover { border-color: var(--color-signal); color: var(--color-signal); }
.swc .footer-end { border-block-start: 1px solid var(--color-rule); color: var(--color-ink-3); }
.swc .lang .input { background: var(--color-surface); border-color: var(--color-rule-strong); }

/* --------------------------------------------------------------------------
   Shared chrome
   -------------------------------------------------------------------------- */

.swc .panel {
  background: var(--color-surface);
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-plane);
  box-shadow: none;
}
.swc .notice { border-radius: var(--radius-control); }
.swc .notice-bad { border-color: var(--color-bad); background: var(--color-bad-wash); color: var(--color-ink); }

.swc .btn {
  background: var(--color-signal);
  color: var(--color-signal-ink);
  border: none;
  font-weight: 700;
  font-size: var(--text-base);
  text-transform: none;
  letter-spacing: normal;
  border-radius: var(--radius-control);
  box-shadow: none;
  transition: filter 0.15s ease, transform 0.15s ease;
}
.swc .btn:hover { filter: brightness(1.09); }
.swc .btn:active { transform: translateY(1px); }
.swc .btn:disabled, .swc .btn[aria-disabled="true"] {
  background: var(--color-surface-2);
  color: var(--color-ink-3);
}
.swc .btn-secondary {
  background: transparent;
  border: 1px solid var(--color-rule-strong);
  color: var(--color-ink);
}
.swc .btn-secondary:hover { border-color: var(--color-signal); color: var(--color-signal); filter: none; }

.swc .input, .swc select:not([class]) {
  background: var(--color-surface-2);
  border-color: var(--color-control);
  color: var(--color-ink);
  border-radius: var(--radius-control);
}
.swc .input:hover { border-color: var(--color-control-hover); }
.swc .input:focus { border-color: var(--color-signal); box-shadow: 0 0 0 3px var(--color-signal-wash); }
.swc .input::placeholder { color: var(--color-ink-3); }

.swc .check input { background: var(--color-surface-2); border-color: var(--color-control); border-radius: 4px; }
.swc .check input:checked { background: var(--color-signal); border-color: var(--color-signal); }
.swc .check input::before { background: var(--color-signal-ink); }

.swc .section-title {
  text-transform: none;
  letter-spacing: -0.015em;
  border: 0;
  padding: 0;
  font-size: clamp(1.35rem, 2.4vw, 1.7rem);
  font-weight: 700;
  color: var(--color-ink);
}
.swc-band { margin-block-start: var(--band-gap); }
.swc-band-sub { margin: 6px 0 24px; max-inline-size: 56ch; color: var(--color-ink-2); }
.swc-band-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px 24px;
  margin-block-end: 24px;
}
.swc-more { color: var(--color-signal); font-weight: 500; text-decoration: none; }
.swc-more:hover { text-decoration: underline; }

/* --------------------------------------------------------------------------
   Hero: claim left, calculator right
   -------------------------------------------------------------------------- */

/* The green is the surface here, not an accent: a full-bleed field carrying
   the whole first viewport, with the dark calculator floating on it. */
.swc-field {
  position: relative;
  margin-inline: calc(50% - 50vw);
  padding-inline: max(24px, calc(50vw - 70rem / 2));
  padding-block: clamp(48px, 7vw, 96px) 0;
  background: var(--color-signal);
  background-image: radial-gradient(120% 100% at 12% 0%, #14e08a, transparent 62%);
  color: var(--color-signal-ink);
  overflow: hidden;
}
.swc-field::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  block-size: 1px;
  background: rgb(0 0 0 / 0.25);
}

.swc-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(22rem, 33rem);
  gap: 40px clamp(40px, 6vw, 88px);
  align-items: center;
  padding-block-end: clamp(40px, 6vw, 72px);
}
.swc-hero-copy h1 {
  margin: 0 0 20px;
  font-size: clamp(3rem, 6.4vw, 5.2rem);
  font-weight: 880;
  letter-spacing: -0.035em;
  line-height: 0.94;
  max-inline-size: 11ch;
  color: var(--color-signal-ink);
  text-wrap: balance;
}
.swc-hero-sub {
  margin: 0 0 30px;
  font-size: 1.15rem;
  line-height: 1.5;
  color: rgb(6 19 12 / 0.78);
  max-inline-size: 40ch;
}
.swc-proof {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.swc-proof li {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px 7px 10px;
  border-radius: var(--radius-pill);
  background: rgb(6 19 12 / 0.1);
  color: var(--color-signal-ink);
  font-size: var(--text-sm);
  font-weight: 600;
}
.swc-proof .icon { flex: none; inline-size: 15px; block-size: 15px; }

/* Rates run along the field's edge as a live band. */
.swc-ticker {
  margin-inline: calc(-1 * max(24px, calc(50vw - 70rem / 2)));
  padding-inline: max(24px, calc(50vw - 70rem / 2));
  border-block-start: 1px solid rgb(6 19 12 / 0.16);
  overflow-x: auto;
  scrollbar-width: none;
}
.swc-ticker::-webkit-scrollbar { display: none; }
.swc-ticker ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
}
.swc-ticker li + li { border-inline-start: 1px solid rgb(6 19 12 / 0.16); }
.swc-ticker a {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 15px clamp(18px, 2.4vw, 30px);
  color: var(--color-signal-ink);
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.15s ease;
}
.swc-ticker a:hover { background: rgb(6 19 12 / 0.09); }
.swc-ticker .swc-rate-pair { font-weight: 700; font-size: var(--text-sm); }
.swc-ticker .swc-rate-pair i { font-style: normal; opacity: 0.55; }
.swc-ticker b { color: rgb(6 19 12 / 0.75); font-size: var(--text-sm); }

/* The calculator is the field's one solid object: a black slab sitting on the
   green, its two amount rows sunk into it like a machine's read-out. */
.swc-hero-calc #wizard { max-inline-size: none; margin: 0; }
.swc-hero-calc .panel {
  background: #080b09;
  border: 1px solid #000;
  border-radius: 20px;
  padding: 10px 10px 22px;
  box-shadow: 0 30px 70px rgb(0 0 0 / 0.4);
}

/* --------------------------------------------------------------------------
   The calculator internals
   -------------------------------------------------------------------------- */

.swc .xstack { gap: 2px; }
.swc .xfield {
  background: #11170f;
  border: 1px solid #1d2a1f;
  border-radius: 14px;
  padding: 18px 18px 16px;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}
.swc .xfield:first-child { border-end-start-radius: 4px; border-end-end-radius: 4px; }
.swc .xstack .xfield:last-of-type { border-start-start-radius: 4px; border-start-end-radius: 4px; }
.swc .xfield:focus-within {
  border-color: var(--color-signal);
  background: #131c14;
  box-shadow: 0 0 0 3px var(--color-signal-wash);
}
.swc .xfield-label {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-ink-3);
}
.swc .xfield-amount {
  font-size: clamp(1.6rem, 3vw, 2.1rem);
  font-weight: 700;
  color: var(--color-ink);
}
.swc .xfield-amount::placeholder { color: #33463a; }

/* The swap control is the one green thing inside the slab. */
.swc .xswap {
  border-radius: 50%;
  inline-size: 42px;
  block-size: 42px;
  background: var(--color-signal);
  color: var(--color-signal-ink);
  border: 4px solid #080b09;
  transition: transform 0.25s var(--ease-out-quart, ease), filter 0.15s ease;
}
.swc .xswap:hover { filter: brightness(1.1); transform: rotate(180deg); }
@media (prefers-reduced-motion: reduce) {
  .swc .xswap:hover { transform: none; }
}

.swc .picker-trigger {
  background: #1a241c;
  border: 1px solid #263528;
  border-radius: var(--radius-pill);
  padding-inline: 14px;
}
.swc .picker-trigger:hover { border-color: var(--color-control-hover); }
.swc .picker-ticker { font-weight: 700; }
.swc .picker-network { font-family: var(--font-mono); font-size: var(--text-2xs); letter-spacing: -0.03em; }
/* Above the swap disc, which the base stacks at 2 — an open list covers the
   controls beneath it, never the other way round. */
.swc .picker-popup {
  z-index: 5;
  background: #0e1410;
  border-color: #263528;
  border-radius: 14px;
  box-shadow: var(--shade-pop);
}
.swc .picker-filter {
  background: #0e1410;
  border-block-end-color: #263528;
}
.swc .picker[data-open="true"] { position: relative; z-index: 5; }
.swc .picker[data-open="true"] .picker-trigger { border-color: var(--color-signal); }
.swc .picker-option[aria-selected="true"] { color: var(--color-signal); }

.swc #place-order .field { padding-inline: 8px; }
.swc #place-order .label { font-size: var(--text-sm); font-weight: 600; }
.swc #place-order .input {
  background: #11170f;
  border-color: #263528;
  border-radius: 12px;
}
.swc #place-order .input:focus { border-color: var(--color-signal); box-shadow: 0 0 0 3px var(--color-signal-wash); }
.swc #place-order hr { border-color: #1b241d; }
.swc .xrate { color: var(--color-ink-2); padding-inline: 8px; }
.swc .xrate b { color: var(--color-signal); font-weight: 700; }
.swc .xlimits { color: var(--color-ink-2); }
.swc .xrate-fault { color: var(--color-bad); background: var(--color-bad-wash); border: 1px solid var(--color-bad); border-radius: 12px; }
.swc .xrate-fix { color: var(--color-bad); border: 1px solid var(--color-bad); border-radius: var(--radius-pill); }
.swc .btn#place-order-submit {
  inline-size: calc(100% - 16px);
  margin-inline: 8px;
  justify-content: center;
  padding-block: 15px;
  border-radius: 12px;
  font-size: 1rem;
}
.swc .btn#place-order-submit:not(:disabled):not([aria-disabled="true"]) {
  box-shadow: 0 10px 28px rgb(7 193 112 / 0.28);
}

.swc .xfield-amount[data-arrived] { animation: swc-resolve 0.28s var(--ease-out-quart, ease-out); }
@keyframes swc-resolve {
  from { opacity: 0.55; transform: translateY(2px); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .swc .xfield-amount[data-arrived] { animation: none; }
}

/* --------------------------------------------------------------------------
   Live rates row
   -------------------------------------------------------------------------- */

.swc-rates { margin-block-start: clamp(40px, 5vw, 64px); }
.swc-rates ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 14px;
}
.swc-rates a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  background: var(--color-surface);
  border: 1px solid var(--color-rule);
  border-radius: 12px;
  color: var(--color-ink);
  text-decoration: none;
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.swc-rates a:hover { border-color: var(--color-signal); transform: translateY(-1px); }
.swc-rate-pair { font-weight: 500; }
.swc-rate-pair i { color: var(--color-ink-3); font-style: normal; }
.swc-rates b { margin-inline-start: auto; color: var(--color-ink-2); }

/* --------------------------------------------------------------------------
   The terms sheet: ruled rows, no cards, no shadow. Hairlines over boxes.
   -------------------------------------------------------------------------- */

.swc-sheet { margin: 0; border-block-start: 1px solid var(--color-rule-strong); }
.swc-sheet > div {
  display: grid;
  grid-template-columns: minmax(7rem, 12rem) minmax(8rem, 14rem) minmax(0, 1.6fr);
  gap: 6px 32px;
  align-items: baseline;
  padding-block: 22px;
  border-block-end: 1px solid var(--color-rule);
}
.swc-sheet dt {
  margin: 0;
  font-size: var(--text-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-ink-3);
}
.swc-sheet dd { margin: 0; }
.swc-sheet-value {
  font-size: clamp(1.05rem, 1.9vw, 1.3rem);
  letter-spacing: -0.03em;
  color: var(--color-signal);
}
.swc-sheet-note { color: var(--color-ink-2); }
@media (max-width: 48rem) {
  .swc-sheet > div { grid-template-columns: 1fr; gap: 4px; padding-block: 18px; }
}

/* --------------------------------------------------------------------------
   The route: one rail, four stops — the path the coins actually take.
   -------------------------------------------------------------------------- */

.swc-route {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  /* auto-fit, so a three-stop route spans the same width as a four-stop one
     instead of hanging off the left edge. */
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  gap: 0 28px;
}
.swc-route li { position: relative; padding-block-start: 30px; }
.swc-route li::before {
  content: "";
  position: absolute;
  inset-block-start: 7px;
  inset-inline: 0 -28px;
  block-size: 1px;
  background: var(--color-rule-strong);
}
.swc-route li:last-child::before { inset-inline-end: 0; }
.swc-route-stop {
  position: absolute;
  inset-block-start: 2px;
  inset-inline-start: 0;
  inline-size: 11px;
  block-size: 11px;
  border-radius: 50%;
  background: var(--color-signal);
  box-shadow: 0 0 0 4px var(--color-paper);
}
.swc-route li:last-child .swc-route-stop {
  background: var(--color-paper);
  border: 2px solid var(--color-signal);
}
.swc-route-n {
  margin: 0 0 8px;
  font-size: var(--text-xs);
  letter-spacing: 0.1em;
  color: var(--color-ink-3);
}
.swc-route h3 { margin: 0 0 6px; font-size: 1.05rem; }
.swc-route-body { margin: 0; color: var(--color-ink-2); font-size: var(--text-sm); line-height: 1.55; }
@media (max-width: 56rem) {
  .swc-route { grid-template-columns: 1fr; gap: 0; }
  .swc-route li { padding: 0 0 26px 26px; }
  .swc-route li::before {
    inset: 6px auto 0 5px;
    inline-size: 1px;
    block-size: auto;
  }
  .swc-route li:last-child::before { inset-block-end: auto; block-size: 0; }
  .swc-route-stop { inset-block-start: 4px; }
  .swc-route-n { margin-block-end: 4px; }
}

/* --------------------------------------------------------------------------
   The desk tally: the catalogue read as one sentence of figures.
   -------------------------------------------------------------------------- */

.swc-tally {
  margin: 0 0 28px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px clamp(28px, 5vw, 56px);
  align-items: baseline;
  font-size: clamp(1rem, 1.6vw, 1.15rem);
  color: var(--color-ink-2);
}
.swc-tally b {
  font-family: var(--font-display);
  font-weight: 850;
  font-size: clamp(2.4rem, 5.4vw, 3.6rem);
  letter-spacing: -0.03em;
  line-height: 0.9;
  color: var(--color-ink);
  margin-inline-end: 10px;
}
.swc-desk .chips { margin: 0; }

/* --------------------------------------------------------------------------
   Affiliate band, figures, listings, teaser
   -------------------------------------------------------------------------- */

.swc-affiliate {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 24px 40px;
  padding: clamp(24px, 4vw, 40px);
  background: var(--color-surface);
  border: 1px solid var(--color-rule);
  border-radius: 16px;
}
.swc-affiliate { border-color: rgb(7 193 112 / 0.3); }
.swc-affiliate-figure {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(2.8rem, 6vw, 4rem);
  line-height: 1;
  color: var(--color-signal);
}
.swc-affiliate-copy { flex: 1 1 24rem; }
.swc-affiliate-copy h2 { margin: 0 0 8px; font-size: 1.25rem; }
.swc-affiliate-copy p { margin: 0; color: var(--color-ink-2); max-inline-size: 52ch; }
.swc-affiliate .btn { padding-inline: 26px; }

.swc-figures {
  margin: 0 0 28px;
  display: flex;
  flex-wrap: wrap;
  gap: 20px clamp(32px, 6vw, 72px);
}
.swc-figures > div { display: flex; flex-direction: column; }
.swc-figures dd {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.9rem, 3.4vw, 2.6rem);
  color: var(--color-ink);
}
.swc-figures dt { margin: 2px 0 0; font-family: var(--font-sans); color: var(--color-ink-3); font-size: var(--text-sm); }

.swc .chips li { background: var(--color-surface); border: 1px solid var(--color-rule); }
.swc .chips li a { color: var(--color-ink-2); }
.swc .chips li a:hover { color: var(--color-signal); }

.swc-listings {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.swc-listings a {
  display: flex;
  align-items: center;
  padding: 10px 18px;
  background: var(--color-surface);
  border: 1px solid var(--color-rule);
  border-radius: 10px;
  color: var(--color-ink-2);
  text-decoration: none;
}
.swc-listings a:hover { border-color: var(--color-signal); color: var(--color-ink); }
.swc-listings img { block-size: 20px; inline-size: auto; filter: grayscale(1) brightness(1.6); opacity: 0.85; }
.swc-listings a:hover img { filter: none; opacity: 1; }

/* The closing question reads as one ruled line, not a card. */
.swc .swc-faq-teaser {
  margin-block-start: var(--band-gap);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 24px;
  padding: 26px 0 0;
  background: none;
  border: 0;
  border-block-start: 1px solid var(--color-rule-strong);
  border-radius: 0;
  box-shadow: none;
}
.swc .swc-faq-teaser .icon-plate { display: none; }
.swc .swc-faq-teaser p {
  margin: 0;
  flex: 1 1 20rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.2rem, 2.4vw, 1.6rem);
  letter-spacing: -0.01em;
  color: var(--color-ink);
}
.swc .swc-faq-teaser .btn { padding-inline: 26px; }

/* --------------------------------------------------------------------------
   Other public pages (base templates under the same tokens)
   -------------------------------------------------------------------------- */

.swc .hero h1 { font-size: clamp(2rem, 4vw, 2.8rem); }
.swc .hero-sub { color: var(--color-ink-2); }
.swc .prose { color: var(--color-ink-2); }
.swc .prose :is(h2, h3) { color: var(--color-ink); }
.swc .faq-item { border-color: var(--color-rule); }
.swc .faq-item summary:hover { color: var(--color-signal); }
.swc .badge-ok { background: var(--color-ok-wash); color: var(--color-ok); }

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 56rem) {
  .swc-hero { grid-template-columns: 1fr; gap: 32px; padding-block-start: 28px; }
  .swc-hero-copy h1 { max-inline-size: none; }
}
@media (max-width: 40rem) {
  .swc-affiliate { flex-direction: column; align-items: flex-start; }
}

/* Last word on focus: the .btn rules above set box-shadow, which would
   otherwise erase the keyboard ring on every button including the CTA. */
.swc .btn:focus-visible,
.swc .xswap:focus-visible,
.swc .picker-trigger:focus-visible,
.swc .swc-pill:focus-visible,
.swc .swc-ticker a:focus-visible {
  box-shadow: 0 0 0 2px var(--color-paper), 0 0 0 4px var(--color-signal);
}
.swc-field .btn:focus-visible,
.swc-field .xswap:focus-visible,
.swc-field .picker-trigger:focus-visible {
  box-shadow: 0 0 0 2px #080b09, 0 0 0 4px var(--color-signal);
}

/* --------------------------------------------------------------------------
   The compact calculator: asset and figure on one row, the rate guarantee on
   the seam, the email folded away until asked for.
   -------------------------------------------------------------------------- */

.swc .xfield {
  display: grid;
  grid-template-columns: minmax(0, auto) minmax(0, 1fr);
  align-items: center;
  gap: 12px 14px;
  padding: 14px 16px;
}
.swc .xfield > div { order: 2; min-inline-size: 0; text-align: end; }
.swc .xfield .picker { order: 1; }
.swc .xfield-label { display: block; margin-block-end: 2px; }
.swc .xfield-amount { text-align: end; }

/* One chip, not two: the base paints the selected state on the label with its
   own surface and an inset ring, so that is switched off and the whole
   treatment lives on the label itself, radii nesting with the container. */
.swc .xflow {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  margin: 14px 0 0;
  padding: 3px;
  border: 1px solid #2a382e;
  border-radius: var(--radius-pill);
  background: #11170f;
}
.swc .xflow-option {
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  background: none;
  box-shadow: none;
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  letter-spacing: -0.02em;
  color: var(--color-ink-3);
  transition: background-color 0.15s ease, color 0.15s ease;
}
.swc .xflow-option span { padding: 0; background: none; }
.swc .xflow-option:hover { color: var(--color-ink-2); }
.swc .xflow-option:has(:checked) {
  background: var(--color-signal);
  box-shadow: none;
  color: var(--color-signal-ink);
  font-weight: 700;
}
.swc .xflow-option:has(:disabled) { opacity: 0.45; }
.swc .xflow-option:has(:disabled):hover { color: var(--color-ink-3); }
.swc .xflow-hint {
  margin: 8px 0 0;
  font-size: var(--text-xs);
  color: var(--color-ink-3);
}
@media (prefers-reduced-motion: reduce) {
  .swc .xflow-option { transition: none; }
}

/* The email is one line until someone wants it. */
.swc .email-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 4px 8px 0;
  padding: 8px 0;
  cursor: pointer;
  color: var(--color-ink-2);
  font-size: var(--text-sm);
  font-weight: 500;
}
.swc .email-toggle:hover { color: var(--color-signal); }
.swc .email-toggle .icon { inline-size: 16px; block-size: 16px; color: var(--color-ink-3); }
.swc .email-toggle:hover .icon { color: var(--color-signal); }
.swc #want-email:focus-visible + .email-toggle {
  box-shadow: 0 0 0 2px #080b09, 0 0 0 4px var(--color-signal);
  border-radius: var(--radius-control);
}
.swc #want-email ~ .field-email { display: none; }
.swc #want-email:checked ~ .field-email { display: block; }
.swc #want-email:checked + .email-toggle { display: none; }

/* --------------------------------------------------------------------------
   The quote strip and the form below it: one instrument, tightly set.
   -------------------------------------------------------------------------- */

/* Three things of three different kinds, so they are set three ways: the rate
   is the answer (green, mono, largest), the bounds are reference (muted mono,
   own line, aligned under it), and the note is a control (sans, quiet, right).
   Set alike they read as one run of text. */
.swc .xrate {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 12px;
  row-gap: 3px;
  margin: 0 8px;
  padding: 9px 12px;
  border: 1px solid #1d2a1f;
  border-radius: 12px;
  background: #0e1410;
}
.swc .xrate b {
  font-size: var(--text-sm);
  font-weight: 400;
  line-height: 1.2;
  color: var(--color-signal);
}
.swc .xinfo {
  margin-inline-start: auto;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font-sans);
  font-size: var(--text-2xs);
  color: var(--color-ink-3);
  text-decoration: none;
  border-block-end: 0;
  cursor: pointer;
}
.swc .xinfo:hover { color: var(--color-signal); }
.swc .xinfo .icon { inline-size: 13px; block-size: 13px; }
/* Its own row, left edge shared with the rate above it. */
.swc .xlimits {
  flex-basis: 100%;
  margin-inline-start: 0;
  font-size: var(--text-2xs);
  line-height: 1.3;
  letter-spacing: -0.04em;
  color: var(--color-ink-3);
}
.swc .xnote {
  margin: 6px 8px 0;
  padding: 10px 12px;
  border: 1px solid #1d2a1f;
  border-radius: 12px;
  background: #0e1410;
}
.swc .xnote p {
  margin: 0;
  color: var(--color-ink-2);
  font-size: var(--text-xs);
  line-height: 1.6;
}
.swc .xnote p + p { margin-block-start: 7px; }

/* Tighter rhythm: the card is one object, not a stack of loose sections. */
.swc #place-order .field { margin-block-end: 12px; }
.swc #place-order > hr { margin-block: 16px 14px; }
.swc #place-order .label {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-block-end: 6px;
  font-size: var(--text-sm);
}
.swc #place-order .label .picker-network,
.swc #place-order .label-optional {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  letter-spacing: -0.03em;
  color: var(--color-ink-3);
  text-transform: none;
}
.swc #place-order .input { min-block-size: 46px; }
.swc #place-order .hint {
  margin-block-start: 6px;
  font-size: var(--text-2xs);
  line-height: 1.5;
  color: var(--color-ink-3);
}
.swc #place-order .check {
  align-items: flex-start;
  gap: 10px;
  font-size: var(--text-xs);
  line-height: 1.55;
  color: var(--color-ink-2);
}
.swc .xstack { margin-block-end: 0; }

/* Martian Mono is wide, and the received figure is the one number that must
   never be clipped: it scales with the viewport and the picker gives way. */
.swc .xfield-amount { font-size: clamp(1.05rem, 4.4vw, 2.1rem); }
.swc .xfield .picker { min-inline-size: 0; }
.swc .picker-trigger { min-inline-size: 0; max-inline-size: 100%; }
.swc .picker-trigger .picker-ticker { overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 26rem) {
  .swc .xfield { gap: 10px 8px; padding: 12px 12px; }
  .swc .picker-trigger { padding-inline: 10px; }
}

/* Before a rate exists the strip is a line of text, not a plate — boxed, it
   read as a third input sitting above the address field. */
.swc .xrate:not(:has(b)) {
  border-color: transparent;
  background: none;
  padding-inline: 0;
  padding-block: 2px;
  color: var(--color-ink-3);
}
/* Three zones with room between them: what you trade, what it costs, where it
   goes. The status region owns the gap so both quote states keep it. */
.swc #place-order > div[role="status"] { margin-block: 12px 16px; }
.swc .xrate { margin: 0 8px; }
.swc .xnote { margin: 10px 8px 0; }

/* --------------------------------------------------------------------------
   Inner pages: every one opens on the green field, then falls to the dark
   ground for the reading. The field is the brand's one recurring gesture.
   -------------------------------------------------------------------------- */

.swc-field-page {
  margin-block-end: clamp(36px, 5vw, 60px);
  padding-block: clamp(44px, 7vw, 88px) clamp(36px, 5vw, 64px);
}
.swc-field-slim { padding-block: clamp(32px, 4.5vw, 56px) clamp(26px, 3.5vw, 40px); }
.swc-page-head { max-inline-size: 46rem; }
.swc-page-head h1 {
  margin: 0;
  font-size: clamp(2.2rem, 5vw, 3.4rem);
  color: var(--color-signal-ink);
  text-wrap: balance;
}
.swc-page-sub {
  margin: 16px 0 0;
  max-inline-size: 46ch;
  font-size: clamp(1rem, 1.7vw, 1.15rem);
  line-height: 1.55;
  color: #0b3d26;
}
.swc-big-figure {
  margin: 0 0 8px;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(3.4rem, 9vw, 6rem);
  line-height: 0.9;
  letter-spacing: -0.04em;
  color: var(--color-signal-ink);
}
.swc-field-void .swc-page-head { text-align: center; margin-inline: auto; }
.swc-field-void .swc-page-sub { margin-inline: auto; }
.swc-void-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px 24px;
  margin-block-start: 28px;
}
.swc .swc-more-dark { color: var(--color-signal-ink); text-decoration: underline; }

.swc-lead {
  margin: 0;
  max-inline-size: 60ch;
  font-size: clamp(1.05rem, 1.9vw, 1.3rem);
  line-height: 1.6;
  color: var(--color-ink);
}

/* A sheet row whose value column is a heading instead of a figure. */
.swc-sheet dt .icon {
  inline-size: 15px;
  block-size: 15px;
  margin-inline-end: 7px;
  color: var(--color-signal);
  vertical-align: -2px;
}
.swc-sheet-wide { grid-column: 2 / -1; }

/* A sheet whose first column is a title, not a field label: the terms sheet
   labels a measurement, these name an idea and read at heading weight. */
.swc-sheet-titled > div { grid-template-columns: minmax(10rem, 18rem) minmax(0, 1.6fr); }
.swc-sheet-titled dt {
  display: flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: -0.01em;
  text-transform: none;
  color: var(--color-ink);
}
.swc-sheet-titled dt .icon {
  inline-size: 18px;
  block-size: 18px;
  margin: 0;
  vertical-align: 0;
}
.swc-sheet-titled .swc-sheet-wide { grid-column: 2; }
.swc-sheet-figures > div { grid-template-columns: minmax(0, 1fr) auto; }
.swc-sheet-figures dd { text-align: end; }
.swc-sheet-total dt { color: var(--color-ink); }
.swc-sheet-total .swc-sheet-value { font-size: clamp(1.3rem, 2.6vw, 1.7rem); }
.swc-fineprint { margin: 14px 0 0; font-size: var(--text-xs); color: var(--color-ink-3); }

/* The long route on how-it-works: same rail, room for the meta line. */
.swc-route-long li { padding-block-start: 34px; }
.swc-route-long h2 { margin: 0 0 8px; font-size: 1.15rem; }
.swc-route-meta {
  margin: 10px 0 0;
  font-size: var(--text-2xs);
  letter-spacing: -0.02em;
  color: var(--color-ink-3);
}

/* Questions read as a ruled list that opens in place. */
.swc-qa { border-block-start: 1px solid var(--color-rule-strong); }
.swc-qa-item { border-block-end: 1px solid var(--color-rule); }
.swc-qa-item summary {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  padding-block: 18px;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.02rem;
  color: var(--color-ink);
}
.swc-qa-item summary::-webkit-details-marker { display: none; }
.swc-qa-item summary:hover { color: var(--color-signal); }
.swc-qa-mark {
  position: relative;
  flex: none;
  inline-size: 12px;
  block-size: 12px;
  align-self: center;
}
.swc-qa-mark::before, .swc-qa-mark::after {
  content: "";
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 0;
  inline-size: 12px;
  block-size: 1.5px;
  background: var(--color-control);
  transition: transform 0.18s var(--ease-out-quart, ease), background-color 0.15s ease;
}
.swc-qa-mark::after { transform: rotate(90deg); }
.swc-qa-item[open] .swc-qa-mark::after { transform: rotate(0deg); }
.swc-qa-item[open] .swc-qa-mark::before,
.swc-qa-item[open] .swc-qa-mark::after { background: var(--color-signal); }
.swc-qa-item > p {
  margin: 0 0 20px;
  max-inline-size: 68ch;
  color: var(--color-ink-2);
  line-height: 1.65;
  white-space: pre-line;
}
@media (prefers-reduced-motion: reduce) {
  .swc-qa-mark::before, .swc-qa-mark::after { transition: none; }
}

/* Contact channels: ruled rows, the address itself set as data. */
.swc-channels { list-style: none; margin: 0; padding: 0; border-block-start: 1px solid var(--color-rule-strong); }
.swc-channels li {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding-block: 22px;
  border-block-end: 1px solid var(--color-rule);
}
.swc-channel-mark {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 40px;
  block-size: 40px;
  border-radius: 12px;
  background: var(--color-signal-wash);
  color: var(--color-signal);
}
.swc-channel-mark .icon { inline-size: 19px; block-size: 19px; }
.swc-channels h2 { margin: 0 0 4px; font-size: 1.02rem; }
.swc-channel-value {
  display: inline-block;
  font-size: var(--text-sm);
  letter-spacing: -0.04em;
  word-break: break-all;
}
.swc-channels p { margin: 6px 0 0; color: var(--color-ink-2); font-size: var(--text-sm); }

.swc-warn {
  display: flex;
  gap: 12px;
  margin-block-start: var(--band-gap);
  padding: 16px 18px;
  border: 1px solid var(--color-warn);
  border-radius: 12px;
  background: var(--color-warn-wash);
  color: var(--color-ink-2);
}
.swc-warn .icon { flex: none; color: var(--color-warn); }
.swc-warn p { margin: 0; }
.swc-warn p + p { margin-block-start: 4px; }
.swc-warn b { color: var(--color-ink); }

.swc-note { max-inline-size: 60ch; }
.swc-note h2 { margin: 0 0 10px; font-size: 1.25rem; }
.swc-note p { margin: 0; color: var(--color-ink-2); line-height: 1.6; }

/* The closing row every inner page ends on. */
.swc-close {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 18px 32px;
  padding-block-start: 28px;
  border-block-start: 1px solid var(--color-rule-strong);
}
.swc-close h2 {
  margin: 0;
  font-size: clamp(1.2rem, 2.4vw, 1.6rem);
}
.swc-close p { margin: 8px 0 0; max-inline-size: 52ch; color: var(--color-ink-2); }
.swc-close-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin: 0; }
.swc-close .btn { padding-inline: 28px; }

/* Legal: a quiet document, measure held for reading. */
.swc-legal-meta { margin: 0 0 22px; font-size: var(--text-xs); color: var(--color-ink-3); }
.swc-doc {
  max-inline-size: 68ch;
  color: var(--color-ink-2);
  line-height: 1.7;
}
.swc-doc :is(h2, h3) { margin-block: 32px 10px; color: var(--color-ink); }
.swc-doc h2 { font-size: 1.3rem; }
.swc-doc h3 { font-size: 1.05rem; }
.swc-doc p { margin-block: 0 14px; }
.swc-doc :is(ul, ol) { margin-block: 0 16px; padding-inline-start: 20px; }
.swc-doc li { margin-block-end: 6px; }
.swc-doc a { text-decoration: underline; }

@media (max-width: 40rem) {
  .swc-channels li { gap: 12px; }
  .swc-close { flex-direction: column; align-items: flex-start; }
}

/* On the field the accent IS the ground, so the primary action inverts to the
   dark ink; green on green reads as plain text. */
.swc .swc-field .btn {
  background: var(--color-signal-ink);
  color: var(--color-signal);
}
.swc .swc-field .btn:hover { filter: brightness(1.35); }

/* The titled sheet's own columns outlive the generic mobile rule, so it
   collapses explicitly — otherwise the body is squeezed into a column too
   narrow to hold a Russian sentence. */
@media (max-width: 48rem) {
  .swc-sheet-titled > div { grid-template-columns: 1fr; gap: 8px; }
  .swc-sheet-titled .swc-sheet-wide { grid-column: 1; }
  .swc-sheet-figures > div { grid-template-columns: 1fr auto; }
}