/* Overrides for the precompiled landing; injected into its HTML by services/core/dev.mjs. */

/* Ketmus type: Inter Regular / Medium / SemiBold are the only faces. The precompiled app ships its own
   variable Inter and Geist Mono; this replaces both everywhere it is injected (the 404 page is not). With only
   400/500/600 available and synthesis off, heavier compiled weights render with SemiBold, never a faux bold. */
@font-face { font-family: "Ketmus Inter"; src: url("/_modules/fonts/Inter_Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Ketmus Inter"; src: url("/_modules/fonts/Inter_Medium.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Ketmus Inter"; src: url("/_modules/fonts/Inter_SemiBold.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
html { font-synthesis: none; }
html, body, body *:not(svg):not(svg *) { font-family: "Ketmus Inter", system-ui, sans-serif !important; }
.auth-heading-line { font-weight: 500 !important; }

/* Full-bleed page: no dark frame around the paper on wide screens. */
.landing-v2.lp-reference {
  padding: 0 !important;
  background: #fff !important;
}
.landing-v2.lp-reference > .rf-paper {
  max-width: none !important;
  width: 100% !important;
}

/* Full-bleed hero on wide screens: the legacy hero is a fixed 1.685 aspect box, so past ~1450px
   it grows taller than the viewport and the right-hand composition (cards sized in % / cqi)
   balloons and gets cut off below the fold. Cap the hero at the viewport height and keep the
   art at its designed 0.8425 ratio, centred in its column, so the tiles stay the intended size. */
@media (min-width: 768px) {
  .landing-v2.lp-reference .rf-hero {
    aspect-ratio: auto;
    width: 100%;
    height: min(calc(100vw / 1.685), max(100svh, 640px));
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    background: #fdfdfd;
  }
  .landing-v2.lp-reference .rf-hero-art {
    aspect-ratio: 0.8425;
    width: auto;
    max-width: 100%;
    justify-self: center;
  }
}

/* Bold, tight figures for balances and stats. */
.landing-v2 .rf-balance-card strong,
.landing-v2 .rf-coin-card strong,
.landing-v2 .rf-transfer-card strong,
.landing-v2 .rf-about-stat strong,
.landing-v2 .rf-catalog-card strong {
  font-weight: 600 !important;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.045em;
}
.landing-v2 .rf-transfer-card strong small {
  font-weight: 600;
  letter-spacing: 0.02em;
}
.landing-v2 .rf-payment-notice strong {
  font-weight: 600 !important;
}

/* Amounts are converted to US format after hydration; hide them until then so the old format never flashes. */
html:not(.fx-amounts-ready) .landing-v2 .rf-hero-art strong {
  visibility: hidden;
}

/* Hero sculpture: only the live 3D liquid is shown (the image stays as an error fallback), faded in once its first frame is drawn. */
.landing-v2 .liquid-sculpture-fallback:not(.fx-on) {
  visibility: hidden;
  opacity: 0 !important;
  transition: none !important;
}
.landing-v2 .liquid-sculpture-visual > div {
  opacity: 0;
  transition: opacity 0.25s ease;
}
.landing-v2 .liquid-sculpture[data-ready="true"] .liquid-sculpture-visual > div {
  opacity: 1;
}
.landing-v2 .liquid-sculpture .liquid-motion-control {
  display: none !important;
}

/* Hero figures: Inter SemiBold, tight. */
.landing-v2 .rf-balance-card strong,
.landing-v2 .rf-coin-card strong,
.landing-v2 .rf-transfer-card strong {
  font-weight: 600 !important;
  letter-spacing: -0.04em !important;
  line-height: 1 !important;
  color: #0b0b0b;
}
.landing-v2 .rf-balance-card strong::before,
.landing-v2 .rf-coin-card strong::before,
.landing-v2 .rf-transfer-card strong::before {
  content: "$";
}
.landing-v2 .rf-transfer-card strong {
  color: #fff !important;
  font-weight: 600 !important;
  gap: 0 !important;
}
.landing-v2 .rf-transfer-card strong small {
  display: none;
}
.landing-v2 .rf-coin-card strong + span {
  font-size: 0 !important;
}
.landing-v2 .rf-coin-card strong + span::before {
  content: "\2191\00a0+12.40%";
  font-size: 13px;
  font-weight: 500;
  color: #555;
}
.landing-v2 .rf-balance-card strong + span,
.landing-v2 .rf-coin-card strong + span {
  margin-top: 10px;
  color: #8a8a8a !important;
  font-size: 13px;
  letter-spacing: 0;
}

/* Arrow button: deep matte disc with a soft lift. */
.landing-v2 .rf-round-arrow {
  background: radial-gradient(circle at 35% 30%, #3a3a3a, #141414 70%) !important;
  color: #fff !important;
  box-shadow: 0 12px 24px -10px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

/* Turnover chart: dense dark area fading to the card, thin ink line, ringed dot. */
.landing-v2 .rf-payment-graph stop:nth-child(1) { stop-color: #1c1c1c !important; stop-opacity: 0.92 !important; }
.landing-v2 .rf-payment-graph stop:nth-child(2) { stop-color: #4a4a4a !important; stop-opacity: 0.55 !important; }
.landing-v2 .rf-payment-graph stop:nth-child(3) { stop-color: #9a9a9a !important; stop-opacity: 0 !important; }
.landing-v2 .rf-payment-graph .recharts-area-area { fill-opacity: 1 !important; }
.landing-v2 .rf-payment-graph .recharts-area-curve {
  stroke: #111 !important;
  stroke-width: 1.5px !important;
  stroke-opacity: 0.9 !important;
}
.landing-v2 .rf-payment-graph .recharts-reference-dot-dot {
  r: 7px;
  fill: #111 !important;
  stroke: #fff !important;
  stroke-width: 3.5px !important;
  filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.35));
}

/* Transfer card: success sparkle in the notch instead of a link glyph. */
.landing-v2 .rf-transfer-card > span svg {
  display: none;
}
.landing-v2 .rf-transfer-card > span::before {
  content: "";
  width: 20px;
  height: 20px;
  background: #111;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10 2l1.9 5.6L17.5 9.5l-5.6 1.9L10 17l-1.9-5.6L2.5 9.5l5.6-1.9z'/%3E%3Cpath d='M18.5 13l.9 2.6 2.6.9-2.6.9-.9 2.6-.9-2.6-2.6-.9 2.6-.9zM18 2l.6 1.9 1.9.6-1.9.6L18 7l-.6-1.9-1.9-.6 1.9-.6z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10 2l1.9 5.6L17.5 9.5l-5.6 1.9L10 17l-1.9-5.6L2.5 9.5l5.6-1.9z'/%3E%3Cpath d='M18.5 13l.9 2.6 2.6.9-2.6.9-.9 2.6-.9-2.6-2.6-.9 2.6-.9zM18 2l.6 1.9 1.9.6-1.9.6L18 7l-.6-1.9-1.9-.6 1.9-.6z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.landing-v2 .rf-transfer-card > span {
  display: grid !important;
  place-items: center;
  box-shadow: 0 8px 18px -8px rgba(0, 0, 0, 0.4);
}
.landing-v2 .rf-transfer-card p {
  color: #6b6b6b !important;
}

/* Coin picker as glossy 3D coins in brand colours. */
.landing-v2 .rf-hero-picker {
  display: flex;
  gap: 10px !important;
  padding: 8px !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.72) !important;
  border: 1px solid rgba(0, 0, 0, 0.06);
  box-shadow: 0 18px 40px -18px rgba(0, 0, 0, 0.35), inset 0 1px 0 #fff;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.landing-v2 .rf-hero-picker a {
  position: relative;
  display: grid;
  place-items: center;
  width: 48px !important;
  height: 48px !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 999px;
  background:
    radial-gradient(120% 120% at 30% 20%, #ffffff 0%, #eef0f3 38%, #c9ced6 72%, #9aa1ab 100%) !important;
  box-shadow:
    0 10px 18px -8px rgba(0, 0, 0, 0.45),
    0 2px 0 #8a919b,
    inset 0 2px 1px rgba(255, 255, 255, 0.95),
    inset 0 -3px 6px rgba(0, 0, 0, 0.18) !important;
  transform: translateY(0);
  transition: transform 220ms cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 220ms ease;
}
.landing-v2 .rf-hero-picker a::after {
  content: "";
  position: absolute;
  inset: 5px;
  border-radius: inherit;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.18), inset 0 -1px 0 rgba(255, 255, 255, 0.8);
  pointer-events: none;
}
.landing-v2 .rf-hero-picker a:hover,
.landing-v2 .rf-hero-picker a:focus-visible {
  transform: translateY(-3px) rotate(-6deg);
  box-shadow:
    0 16px 24px -10px rgba(0, 0, 0, 0.5),
    0 2px 0 #8a919b,
    inset 0 2px 1px rgba(255, 255, 255, 0.95),
    inset 0 -3px 6px rgba(0, 0, 0, 0.18) !important;
}
.landing-v2 .rf-hero-picker img {
  position: relative;
  z-index: 1;
  width: 28px !important;
  height: 28px !important;
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.25)) !important;
  opacity: 1 !important;
}
.landing-v2 .rf-payment-notice {
  width: 326px !important;
}

/* ---------- Hero widgets: one material, four tiles ----------
   Solid, flat cards. No 3D tilt, backdrop blur or blended sheen: each of those makes the
   browser rasterise the tile into a layer and resample it, which is what made the text and
   edges look soft. Depth comes from a hairline border and a layered shadow instead. */
.landing-v2 .rf-hero-art {
  perspective: none !important;
  --fx-rim: inset 0 1px 0 #ffffff;
  --fx-lift:
    0 1px 2px rgba(15, 15, 20, 0.06),
    0 6px 14px -4px rgba(15, 15, 20, 0.1),
    0 28px 56px -24px rgba(15, 15, 20, 0.28);
}
.landing-v2 .rf-balance-card,
.landing-v2 .rf-coin-card,
.landing-v2 .rf-transfer-card,
.landing-v2 .rf-payment-notice {
  border-radius: 22px !important;
  border: 1px solid rgba(15, 15, 20, 0.07) !important;
  background: linear-gradient(180deg, #ffffff 0%, #f7f7f9 100%) !important;
  box-shadow: var(--fx-lift), var(--fx-rim) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  transform: none !important;
  transform-style: flat !important;
  filter: none !important;
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
  transition: translate 320ms cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 320ms ease;
  animation: fx-tile-in 700ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
.landing-v2 .rf-balance-card::after,
.landing-v2 .rf-coin-card::after,
.landing-v2 .rf-transfer-card::after,
.landing-v2 .rf-payment-notice::after {
  content: none !important;
}
.landing-v2 .rf-balance-card { animation-delay: 80ms; }
.landing-v2 .rf-coin-card { animation-delay: 200ms; }
.landing-v2 .rf-transfer-card { animation-delay: 320ms; }
.landing-v2 .rf-payment-notice { animation-delay: 440ms; }
.landing-v2 .rf-balance-card:hover,
.landing-v2 .rf-coin-card:hover,
.landing-v2 .rf-transfer-card:hover {
  translate: 0 -4px;
  box-shadow:
    0 1px 2px rgba(15, 15, 20, 0.06),
    0 10px 20px -6px rgba(15, 15, 20, 0.12),
    0 40px 72px -28px rgba(15, 15, 20, 0.34),
    var(--fx-rim) !important;
}
.landing-v2 .rf-payment-graph {
  filter: none !important;
}
@keyframes fx-tile-in {
  from { opacity: 0; translate: 0 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .landing-v2 .rf-balance-card,
  .landing-v2 .rf-coin-card,
  .landing-v2 .rf-transfer-card,
  .landing-v2 .rf-payment-notice {
    animation: none;
    transition: none;
  }
}

/* Dark tiles: the notice and the transfer card header become brushed graphite. */
.landing-v2 .rf-payment-notice,
.landing-v2 .rf-transfer-card {
  background:
    linear-gradient(135deg, #2b2b2e 0%, #141416 48%, #232326 100%) !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
  box-shadow: var(--fx-lift), inset 0 1px 0 rgba(255, 255, 255, 0.22), inset 0 -1px 0 rgba(0, 0, 0, 0.6) !important;
  color: #f4f4f6 !important;
}
.landing-v2 .rf-payment-notice::after,
.landing-v2 .rf-transfer-card::after {
  background: linear-gradient(115deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0) 40%, rgba(255, 255, 255, 0) 75%, rgba(255, 255, 255, 0.08) 100%);
}
.landing-v2 .rf-payment-notice p,
.landing-v2 .rf-payment-notice strong { color: #f4f4f6 !important; }
.landing-v2 .rf-payment-notice strong { opacity: 0.72; }
.landing-v2 .rf-payment-notice > span {
  width: 40px !important;
  height: 40px !important;
  border-radius: 999px !important;
  display: grid;
  place-items: center;
  color: #0e0e10 !important;
  background: radial-gradient(120% 120% at 30% 20%, #ffffff 0%, #d9dbe0 55%, #a8acb5 100%) !important;
  box-shadow: 0 8px 14px -6px rgba(0, 0, 0, 0.7), inset 0 2px 1px rgba(255, 255, 255, 0.95), inset 0 -3px 5px rgba(0, 0, 0, 0.2) !important;
}
.landing-v2 .rf-payment-notice > span svg { width: 18px; height: 18px; stroke-width: 2.6; }

/* Transfer card: graphite amount block over a frosted caption. */
.landing-v2 .rf-transfer-card {
  background: linear-gradient(180deg, #ffffff 0%, #f7f7f9 100%) !important;
  color: #0e0e10 !important;
  border-color: rgba(15, 15, 20, 0.07) !important;
  box-shadow: var(--fx-lift), var(--fx-rim) !important;
  overflow: hidden;
  padding-top: 0 !important;
}
.landing-v2 .rf-transfer-card strong {
  display: block;
  margin: 0 -1px 0 !important;
  padding: 18px 20px 30px !important;
  border-radius: 22px 22px 0 0;
  background: linear-gradient(135deg, #2b2b2e 0%, #141416 48%, #232326 100%) !important;
  color: #ffffff !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22);
}
.landing-v2 .rf-transfer-card strong small { color: rgba(255, 255, 255, 0.6) !important; }
.landing-v2 .rf-transfer-card > span {
  width: 44px !important;
  height: 44px !important;
  margin-top: -22px !important;
  position: relative;
  z-index: 1;
  background: radial-gradient(120% 120% at 30% 20%, #ffffff 0%, #e4e6ea 55%, #b7bcc5 100%) !important;
  box-shadow: 0 10px 16px -6px rgba(0, 0, 0, 0.5), inset 0 2px 1px #fff, inset 0 -3px 5px rgba(0, 0, 0, 0.18) !important;
  color: #0e0e10 !important;
}
.landing-v2 .rf-transfer-card p { color: #3a3a40 !important; letter-spacing: 0.01em; }

/* Balance card: big tabular numerals, pill caption, embossed arrow. */
.landing-v2 .rf-balance-card strong,
.landing-v2 .rf-coin-card strong {
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.03em;
  text-shadow: 0 1px 0 #fff;
}
.landing-v2 .rf-balance-card strong + span,
.landing-v2 .rf-coin-card strong + span {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  padding: 5px 10px !important;
  border-radius: 999px;
  background: rgba(14, 14, 16, 0.06) !important;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.08), inset 0 -1px 0 rgba(255, 255, 255, 0.9);
  color: #3a3a40 !important;
}
.landing-v2 .rf-round-arrow {
  background: linear-gradient(135deg, #2b2b2e 0%, #141416 60%) !important;
  color: #fff !important;
  box-shadow: 0 10px 16px -6px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.25) !important;
  transition: transform 300ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.landing-v2 .rf-balance-card:hover .rf-round-arrow { transform: translate(2px, -2px) rotate(-8deg); }

/* Chart: glossy ink area with a glowing live dot. */
.landing-v2 .rf-payment-graph { filter: drop-shadow(0 10px 10px rgba(0, 0, 0, 0.18)); }
.landing-v2 .rf-payment-graph .recharts-area-curve { stroke: #0e0e10 !important; stroke-width: 2.4 !important; }
.landing-v2 .rf-payment-graph .recharts-reference-dot-dot {
  fill: #0e0e10 !important;
  stroke: #fff !important;
  stroke-width: 4 !important;
  animation: fx-dot 2.2s ease-in-out infinite;
  transform-box: fill-box;
  transform-origin: center;
}
@keyframes fx-dot {
  0%, 100% { filter: drop-shadow(0 0 0 rgba(14, 14, 16, 0)); transform: scale(1); }
  50% { filter: drop-shadow(0 0 8px rgba(14, 14, 16, 0.55)); transform: scale(1.18); }
}

/* Coin picker sits on a graphite tray so it belongs to the same set. */
.landing-v2 .rf-hero-picker {
  background: linear-gradient(135deg, #2b2b2e 0%, #141416 60%) !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
  box-shadow: var(--fx-lift), inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
}

@media (prefers-reduced-motion: reduce) {
  .landing-v2 .rf-hero-picker a { transition: none; }
  .landing-v2 .rf-hero-picker a:hover { transform: none; }
  .landing-v2 .rf-balance-card,
  .landing-v2 .rf-coin-card,
  .landing-v2 .rf-transfer-card,
  .landing-v2 .rf-payment-notice { animation: none; transition: none; transform: none; }
  .landing-v2 .rf-payment-graph .recharts-reference-dot-dot { animation: none; }
}