/* ---------- Fonts ---------- */
@font-face {
  font-family: 'Hyperspace Race';
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url('../assets/fonts/hyperspace-race-light.otf') format('opentype');
}
@font-face {
  font-family: 'Hyperspace Race';
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  src: url('../assets/fonts/hyperspace-race-light.otf') format('opentype');
}

/* ---------- Base ---------- */
:root {
  --red: #ff3a3a;
  --red-hero: #ff4e4e;
  --white: #fafafa;
  --gray: #cccccc;
  --card: #090909;
  --pill: #151515;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Hyperspace Race', 'Arial Narrow', sans-serif;
  font-weight: 400;
  color: var(--white);
  background: #000000;
  min-width: 1440px;
}

img {
  display: block;
}

a {
  text-decoration: none;
  color: inherit;
}

ul {
  list-style: none;
}

button {
  font: inherit;
  border: none;
  background: none;
  cursor: pointer;
  color: inherit;
}

.container {
  width: 994px;
  margin: 0 auto;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  background: var(--red);
  border-radius: 4px;
  color: var(--white);
  font-size: 15px;
  font-weight: 400;
  line-height: 21px;
  text-transform: uppercase;
  width: 160px;
  height: 40px;
  transition: opacity 0.2s ease;
}

.btn:hover {
  opacity: 0.88;
}

/* ---------- Section headers ---------- */
.section-label {
  font-size: 20px;
  font-weight: 400;
  line-height: 28px;
  color: var(--red);
  text-transform: uppercase;
  text-align: center;
}

.section-title {
  font-size: 36px;
  font-weight: 700;
  line-height: 50.4px;
  color: var(--white);
  text-align: center;
}

/* ---------- Nav ---------- */
.nav {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  height: 56px;
  margin-top: 16px;
}

.nav__logo {
  display: flex;
  align-items: center;
}

.nav__links {
  display: flex;
  gap: 30px;
  margin-left: 133px;
}

.nav__links a {
  font-size: 15px;
  font-weight: 400;
  line-height: 21px;
  color: var(--gray);
  transition: color 0.2s ease;
}

.nav__links a:hover,
.nav__links a.active {
  color: var(--white);
}

.nav__btn {
  margin-left: auto;
  width: 145px;
}

.nav__divider {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background: rgba(204, 204, 204, 0.25);
}

/* ---------- Hero ---------- */
.hero__media {
  position: relative;
  width: 1001px;
  margin: -1px auto 0;
}

.hero__photo {
  width: 1001px;
  height: 564px;
  object-fit: cover;
}

.hero__fade {
  position: absolute;
  inset: 0;
  background: radial-gradient(50% 50% at 50% 50%, transparent 80%, #000000 100%);
}

.hero__roadster {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 78px;
  width: 274px;
  height: 20px;
}

.hero__content {
  position: relative;
  z-index: 2;
  margin-top: -63px;
  text-align: center;
}

.hero__content h1 {
  font-size: 52px;
  font-weight: 700;
  line-height: 57.2px;
  color: var(--white);
}

.hero__content p {
  margin-top: 15px;
  font-size: 20px;
  font-weight: 400;
  line-height: 24px;
  color: var(--gray);
}

.btn--hero {
  margin-top: 25px;
  background: var(--red-hero);
}

/* ---------- How event works ---------- */
.how {
  margin-top: 100px;
}

.how__steps {
  display: flex;
  gap: 47px;
  margin-top: 50px;
}

.how__step {
  width: 300px;
  text-align: center;
}

.how__step img {
  margin: 0 auto;
}

.how__step h3 {
  margin-top: 20px;
  font-size: 24px;
  font-weight: 700;
  line-height: 28.8px;
  color: var(--white);
}

.how__step p {
  margin-top: 10px;
  font-size: 18px;
  font-weight: 400;
  line-height: 25.2px;
  color: var(--gray);
}

/* ---------- Quote ---------- */
.quote {
  position: relative;
  margin-top: 100px;
}

.quote__x {
  position: absolute;
  left: 142px;
  top: 128px;
  width: 272px;
  height: 245px;
  pointer-events: none;
}

.quote__card {
  position: relative;
  width: 605px;
  margin: 44px 0 0 287px;
}

.quote__avatar {
  position: absolute;
  left: 0;
  top: 0;
  border-radius: 50%;
}

.quote__head {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: 55px;
  padding-top: 5px;
}

.quote__name {
  font-size: 20px;
  font-weight: 700;
  line-height: 24px;
  color: var(--white);
}

.quote__handle {
  margin-left: 55px;
  margin-top: 1px;
  font-size: 18px;
  font-weight: 400;
  line-height: 25.2px;
  color: var(--gray);
}

.quote__text {
  margin-left: 55px;
  margin-top: 1px;
  font-size: 18px;
  font-weight: 400;
  line-height: 25.2px;
  color: var(--gray);
}

.quote__stats {
  display: flex;
  gap: 48px;
  margin-left: 55px;
  margin-top: 20px;
}

.quote__stats span {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 18px;
  font-weight: 400;
  line-height: 25.2px;
  color: var(--gray);
}

/* ---------- Rules (How much) ---------- */
.rules {
  margin-top: 110px;
}

.rules .section-title {
  line-height: 35px;
}

.crypto-tiles {
  display: flex;
  gap: 5px;
  justify-content: center;
  margin-top: 25px;
}

.rules__row {
  display: flex;
  justify-content: space-between;
}

.rules__card {
  width: 444px;
  padding-top: 81px;
}

.rules__card h3 {
  font-size: 36px;
  font-weight: 700;
  line-height: 43.2px;
  color: var(--white);
}

.rules__card p {
  margin-top: 10px;
  font-size: 18px;
  font-weight: 400;
  line-height: 25.2px;
  color: var(--gray);
}

.rules__card .btn {
  margin-top: 25px;
}

.rules__media {
  position: relative;
  width: 487px;
  height: 380px;
}

.rules__media img {
  width: 487px;
  height: 380px;
}

.rules__fade {
  position: absolute;
  inset: 0;
  background: radial-gradient(50% 50% at 50% 50%, transparent 70%, #000000 100%);
}

/* ---------- Calculator ---------- */
.calc {
  position: relative;
  margin-top: 100px;
}

.calc__panels {
  display: flex;
  width: 1440px;
  margin: 50px auto 0;
}

.calc__send {
  width: 780px;
  height: 360px;
  background: linear-gradient(to left, #090909 0%, #000000 100%);
}

.calc__send-inner {
  position: relative;
  width: 437px;
  margin: 0 auto;
  padding-top: 52px;
}

.calc__panel-title {
  font-size: 20px;
  font-weight: 700;
  line-height: 24px;
  color: var(--white);
}

.calc__top {
  display: flex;
  align-items: center;
  gap: 12px;
}

.crypto-tiles--calc {
  margin-top: 0;
}

.calc__amount {
  display: inline-block;
  margin-top: 48px;
  background: var(--red);
  border-radius: 4px;
  padding: 5px 16px 6px;
}

.calc__amount span {
  font-family: 'Hyperspace Race', sans-serif;
  font-size: 40px;
  font-weight: 700;
  line-height: 48.4px;
  color: var(--white);
}

.calc__amount .sym {
  opacity: 0.75;
}

.calc__scale {
  display: flex;
  gap: 14px;
  margin-top: 23px;
  font-size: 16px;
  font-weight: 400;
  line-height: 22.4px;
}

.calc__scale button {
  color: var(--gray);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  padding: 0;
  transition: color 0.2s ease;
}

.calc__scale button:hover,
.calc__scale button.active {
  color: var(--white);
}

.calc__slider {
  position: relative;
  margin-top: 43px;
  height: 20px;
}

.calc__track,
.calc__track-fill {
  position: absolute;
  top: 9px;
  left: 0;
  height: 2px;
  border-radius: 4px;
}

.calc__track {
  width: 100%;
  background: rgba(204, 204, 204, 0.5);
}

.calc__track-fill {
  width: 50%;
  background: var(--red);
}

.calc__slider input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 20px;
  background: transparent;
  cursor: pointer;
}

.calc__slider input[type="range"]::-webkit-slider-runnable-track {
  background: transparent;
}

.calc__slider input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  margin-top: 0;
  background: #050505;
  border: 2px solid var(--red);
  border-radius: 4px;
}

.calc__slider input[type="range"]::-moz-range-track {
  background: transparent;
}

.calc__slider input[type="range"]::-moz-range-thumb {
  width: 16px;
  height: 16px;
  background: #050505;
  border: 2px solid var(--red);
  border-radius: 4px;
}

.calc__limits {
  display: flex;
  justify-content: space-between;
  margin-top: 15px;
  font-size: 16px;
  font-weight: 400;
  line-height: 19.2px;
  color: rgba(204, 204, 204, 0.75);
}

.calc__receive {
  position: relative;
  width: 660px;
  height: 360px;
  background: linear-gradient(to right, #ff3a3a 0%, #000000 100%);
  overflow: hidden;
}

.calc__car {
  position: absolute;
  left: 116px;
  top: -34px;
  width: 320px;
  height: 427px;
  opacity: 0.6;
  pointer-events: none;
  visibility: hidden;
}
.calc__car.is-active {
  visibility: visible;
}


.calc__panel-title--receive {
  margin-left: 52px;
  padding-top: 46px;
}

.calc__result {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: 52px;
  margin-top: 26px;
}

.calc__result-value {
  font-size: 48px;
  font-weight: 700;
  line-height: 57.6px;
  color: var(--white);
}



.calc__usd {
  margin-left: 52px;
  margin-top: 5px;
  font-size: 36px;
  font-weight: 700;
  line-height: 43.2px;
  color: rgba(250, 250, 250, 0.75);
}

.calc__rate {
  margin-left: 52px;
  margin-top: 68px;
  font-size: 16px;
  font-weight: 400;
  line-height: 19.2px;
  color: rgba(250, 250, 250, 0.75);
}

/* ---------- Participate ---------- */
.participate {
  margin-top: 100px;
}

.participate__grid {
  display: grid;
  grid-template-columns: 487px 487px;
  gap: 20px;
  margin-top: 50px;
}

.pcard {
  display: flex;
  width: 487px;
  height: 198px;
  background: var(--card);
  border-radius: 4px;
  overflow: hidden;
}

.pcard__qr {
  width: 198px;
  height: 198px;
  background: var(--white);
  border-radius: 4px;
  flex: none;
}

.pcard__content {
  flex: 1;
  min-width: 0;
  padding: 16px 20px 0;
}

.pcard__content h3 {
  font-size: 22px;
  font-weight: 600;
  line-height: 25px;
  color: var(--white);
}

.pcard__address {
  margin-top: 6px;
  overflow: hidden;
  font-size: 16px;
  font-weight: 400;
  line-height: 22.4px;
  color: var(--gray);
  white-space: nowrap;
  text-overflow: ellipsis;
}

.pcard__btn {
  margin-top: 10px;
  width: 131px;
  height: 39px;
  font-size: 14px;
  line-height: 19.6px;
}

.pcard__waiting {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
  font-size: 16px;
  font-weight: 400;
  line-height: 22.4px;
  color: var(--white);
}

/* ---------- Transactions ---------- */
.transactions {
  margin-top: 100px;
}

.transactions .section-title {
  line-height: 35px;
}

.table {
  margin-top: 50px;
}

.table__head {
  position: relative;
  height: 25px;
  margin-bottom: 25px;
}

.pill {
  position: absolute;
  top: 0;
  display: inline-flex;
  align-items: center;
  height: 25px;
  padding: 0 14px;
  background: var(--pill);
  border-radius: 4px;
  font-size: 16px;
  font-weight: 400;
  line-height: 22.4px;
  color: rgba(204, 204, 204, 0.5);
  text-transform: uppercase;
  white-space: nowrap;
}

.table__row {
  position: relative;
  height: 75px;
  background: var(--card);
  border-radius: 4px;
  margin-top: 20px;
}

.table__row .pill {
  top: 20px;
  height: 35px;
  padding: 6px 14px;
  color: var(--white);
  text-transform: none;
}

.pill--status img {
  margin-right: 6px;
}

.pill--date {
  background: rgba(255, 58, 58, 0.15);
  color: var(--red);
}

/* ---------- Footer ---------- */
.footer__inner {
  position: relative;
  height: 172px;
}

.footer__glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(50% 100% at 50% 100%, rgba(255, 58, 58, 0.25) 0%, transparent 100%);
  pointer-events: none;
}

.footer__divider {
  position: absolute;
  top: 100px;
  left: 0;
  width: 100%;
  height: 1px;
  background: rgba(204, 204, 204, 0.25);
}

.footer__row {
  position: absolute;
  bottom: 25px;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
}

.footer__copy {
  margin-left: 178px;
  font-size: 15px;
  font-weight: 400;
  line-height: 21px;
  color: var(--white);
  text-transform: uppercase;
}

.footer__links {
  display: flex;
  gap: 30px;
  margin-left: 60px;
}

.footer__links a {
  font-size: 15px;
  font-weight: 400;
  line-height: 21px;
  color: var(--gray);
  transition: color 0.2s ease;
}

.footer__links a:hover,
.footer__links a.active {
  color: var(--white);
}

/* ---------- Mobile-only elements (hidden on desktop) ---------- */
.nav__burger,
.mmenu,
.calc__decor-mob {
  display: none;
}

.pcard__qr img {
  display: block;
  width: 100%;
  height: 100%;
}

.hero__content .br-mob {
  display: none;
}

/* ---------- Mobile menu overlay ---------- */
.mmenu {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: #000000;
}

.mmenu.open {
  display: block;
}

.mmenu__head {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 41px;
  margin: 10px 18px 0;
}

.mmenu__close {
  position: absolute;
  right: 0;
  top: 5px;
  display: flex;
}

.mmenu__divider {
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 100%;
  height: 1px;
  background: rgba(204, 204, 204, 0.25);
}

.mmenu__links {
  margin-top: 80px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 26px;
}

.mmenu__links a {
  font-size: 18px;
  font-weight: 400;
  line-height: 25.2px;
  color: var(--gray);
}

.mmenu__links a.active,
.mmenu__links a:hover {
  color: var(--white);
}

.mmenu__btn {
  display: flex;
  margin: 80px auto 0;
}

/* ==========================================================
   Phone (design ref: 360px)
   ========================================================== */
@media (max-width: 700px) {
  html,
  body {
    min-width: 0;
    overflow-x: hidden;
  }

  .container {
    width: 100%;
    max-width: 360px;
    padding: 0 18px;
  }

  /* Nav */
  .nav {
    justify-content: center;
    height: 41px;
    margin-top: 10px;
  }

  .nav__links,
  .nav__btn {
    display: none;
  }

  .nav__burger {
    display: flex;
    position: absolute;
    right: 0;
  }

  /* Hero */
  .hero__media {
    width: 770px;
    margin: 0;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
  }

  .hero__photo {
    width: 770px;
    height: 435px;
  }

  .hero__roadster {
    width: 247px;
    height: 18px;
    bottom: 106px;
  }

  .hero__content {
    margin-top: -91px;
  }

  .hero__content h1 {
    font-size: 36px;
    line-height: 39.6px;
  }

  .hero__content .br-mob {
    display: block;
  }

  .hero__content p {
    max-width: 324px;
    margin-left: auto;
    margin-right: auto;
  }

  .btn--hero {
    display: flex;
    margin: 15px auto 0;
  }

  /* How event works */
  .how {
    margin-top: 70px;
  }

  .how .section-title {
    font-size: 28px;
    line-height: 39.2px;
  }

  .how__steps {
    flex-direction: column;
    align-items: center;
    gap: 30px;
    margin-top: 30px;
  }

  .how__step {
    width: 324px;
  }

  /* Quote */
  .quote {
    margin-top: 70px;
  }

  .quote .section-title {
    font-size: 28px;
    line-height: 39.2px;
  }

  .quote__x {
    display: none;
  }

  .quote__card {
    width: 100%;
    margin: 30px 0 0 0;
    text-align: center;
  }

  .quote__avatar {
    position: static;
    margin: 0 auto;
    width: 50px;
    height: 50px;
  }

  .quote__head {
    margin-left: 0;
    justify-content: center;
    padding-top: 0;
    margin-top: 10px;
  }

  .quote__handle {
    margin-left: 0;
    margin-top: 10px;
  }

  .quote__text {
    margin-left: 0;
    margin-top: 20px;
  }

  .quote__stats {
    margin-left: 0;
    margin-top: 20px;
    justify-content: space-between;
    padding: 0 20px;
  }

  .quote__stats span {
    white-space: nowrap;
  }

  /* Rules */
  .rules {
    margin-top: 70px;
  }

  .rules .section-title {
    font-size: 28px;
    line-height: 30px;
  }

  .rules .section-title br {
    display: none;
  }

  .crypto-tiles {
    margin-top: 20px;
  }

  .rules__row {
    flex-direction: column;
  }

  .rules__card {
    position: relative;
    z-index: 2;
    width: 100%;
    padding-top: 30px;
    text-align: center;
  }

  .rules__card p br {
    display: none;
  }

  .rules__card .btn {
    display: flex;
    margin: 25px auto 0;
  }

  .rules__media {
    position: relative;
    z-index: 1;
    width: 100vw;
    height: auto;
    margin-top: -20px;
    margin-left: calc(-50vw + 50%);
  }

  .rules__media img {
    width: 100%;
    height: auto;
  }

  /* Calculator */
  .calc {
    margin-top: 70px;
  }

  .calc .section-label {
    font-family: 'D-DIN', sans-serif;
    font-size: 18px;
    line-height: 25.2px;
  }

  .calc .section-title {
    font-family: 'D-DIN', sans-serif;
    font-size: 28px;
    line-height: 39.2px;
  }

  .calc__panels {
    flex-direction: column;
    width: 100%;
    margin-top: 30px;
  }

  .calc__send {
    width: 100%;
    height: auto;
    min-height: 320px;
    padding-bottom: 26px;
    box-sizing: border-box;
    background: linear-gradient(180deg, #000000 0%, #090909 100%);
  }

  .calc__send-inner {
    width: 324px;
    max-width: calc(100% - 36px);
    margin: 0 auto;
    padding-top: 26px;
  }

  .calc__send-inner .calc__panel-title {
    margin-top: 0;
    font-size: 20px;
    line-height: 24px;
    white-space: nowrap;
  }

  .calc__top {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 15px;
    margin: 0;
  }

  .calc__amount {
    display: block;
    width: fit-content;
    margin: 45px auto 0;
  }

  .calc__scale {
    justify-content: center;
    gap: 12px;
    margin-top: 25px;
    font-size: 12px;
    white-space: nowrap;
  }

  .calc__slider {
    margin-top: 45px;
  }

  .calc__limits {
    margin-top: 10px;
  }

  .calc__receive {
    width: 100%;
    height: 320px;
    text-align: center;
    overflow: hidden;
    background: linear-gradient(180deg, #ff3a3a 0%, #000000 100%);
}

  .calc__car {
    display: none;
  }

  .calc__decor-mob {
    display: block;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    pointer-events: none;
    visibility: hidden;
  }

  .calc__decor-mob[data-coin="ETH"],
  .calc__decor-mob[data-coin="SOL"],
  .calc__decor-mob[data-coin="XRP"] {
    opacity: 0.35;
    transform: translate(-7%, -10%) scale(1.35);
  }
  .calc__decor-mob.is-active {
    visibility: visible;
  }


  .calc__panel-title--receive,
  .calc__result,
  .calc__usd,
  .calc__rate {
    position: relative;
    z-index: 1;
  }

  .calc__panel-title--receive {
    margin-left: 0;
    padding-top: 26px;
  }

  .calc__result {
    flex-direction: column;
    gap: 5px;
    margin-left: 0;
    margin-top: 39px;
  }

  .calc__usd {
    margin-left: 0;
    margin-top: 10px;
  }

  .calc__rate {
    margin-left: 0;
    margin-top: 44px;
  }

  /* Participate */
  .participate {
    margin-top: 70px;
  }

  .participate .section-title {
    font-size: 28px;
    line-height: 39.2px;
  }

  .participate__grid {
    grid-template-columns: 1fr;
    gap: 20px;
    margin-top: 30px;
  }

  .pcard {
    width: 100%;
    height: auto;
    flex-direction: column;
    align-items: center;
    border-radius: 15px;
    padding: 20px 20px 30px;
  }

  .pcard__qr {
    width: 284px;
    height: 284px;
    background: var(--pill);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .pcard__qr img {
    display: block;
    width: 244px;
    height: 244px;
    border-radius: 5px;
  }

  .pcard__content {
    width: 284px;
    padding: 0;
    margin-top: 30px;
    text-align: center;
  }

  .pcard__btn {
    width: 100%;
  }

  .pcard__waiting {
    justify-content: center;
  }

  /* Transactions */
  .transactions {
    margin-top: 70px;
  }

  .transactions .section-title {
    font-size: 28px;
    line-height: 30px;
  }

  .table-scroll {
    overflow-x: auto;
    margin-top: 30px;
  }

  .table {
    width: 994px;
    margin-top: 0;
  }

  /* Footer */
  .footer__inner {
    height: 100px;
  }

  .footer__divider {
    top: 50px;
  }

  .footer__row {
    bottom: 15px;
    justify-content: center;
  }

  .footer__links {
    display: none;
  }

  .footer__copy {
    margin-left: 0;
  }
}

/* ---------- Coin tiles (switchable) ---------- */
.tile {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 35px;
  height: 35px;
  border-radius: 4px;
  background: rgba(255, 58, 58, 0.25);
  color: var(--red);
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.tile:hover {
  background: rgba(255, 58, 58, 0.45);
}

.tile.active,
.tile.active:hover {
  background: var(--red);
  color: var(--white);
}

/* tile glyph balance: BTC glyph is the biggest in figma, even out the rest */
.tile[data-coin="ETH"] svg { transform: scale(1.4); }
.tile[data-coin="XRP"] svg { transform: scale(1.3); }

/* ---------- Participate cards: coin accents ---------- */
.pcard__content h3 b {
  color: var(--red);
  font-weight: 600;
}

.pcard__memo {
  margin-top: 2px;
  font-size: 16px;
  font-weight: 400;
  line-height: 22.4px;
  color: var(--gray);
}

.pcard--xrp .pcard__address {
  margin-top: 6px;
}

.pcard__btns {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}

.pcard--xrp .pcard__btns .pcard__btn {
  margin-top: 0;
  width: auto;
  min-width: 0;
  flex: 1;
  padding: 0 10px;
}

.pcard--xrp .pcard__waiting {
  margin-top: 10px;
}

.pcard__waiting img {
  animation: pcard-spin 1.4s linear infinite;
}

@keyframes pcard-spin {
  to { transform: rotate(360deg); }
}

.btn.is-copied {
  background: #151515;
  color: var(--red);
}

/* XRP card fine-tuning */
.pcard--xrp .pcard__address {
  margin-top: 4px;
  line-height: 20px;
}

.pcard--xrp .pcard__memo {
  margin-top: 1px;
  line-height: 20px;
}

.pcard--xrp .pcard__btns {
  margin-top: 8px;
}

.pcard--xrp .pcard__waiting {
  margin-top: 6px;
}

/* ---------- Calc edge fades on wide screens ---------- */
@media (min-width: 1441px) {
  .calc::before,
  .calc::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: calc(50% - 720px + 200px);
    pointer-events: none;
    z-index: 2;
  }

  .calc::before {
    left: 0;
    background: linear-gradient(90deg, #000000 0%, transparent 100%);
  }

  .calc::after {
    right: 0;
    background: linear-gradient(-90deg, #000000 0%, transparent 100%);
  }
}