/* Directional scroll-reveal for two hero sections — swap slides in from the left,
   the mobile-app pitch slides in from the right. Overrides the default
   translateY reveal from site.css ([data-reveal] / .reveal-ready), which still
   applies to every other data-reveal section on the page untouched. */
.landing--cosmos { overflow-x: hidden; }
.landing--cosmos #swap[data-reveal],
.landing--cosmos .landing__section.mobile-app[data-reveal] {
  transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1), transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal-ready .landing--cosmos #swap[data-reveal] { transform: translateX(-160px); }
.reveal-ready .landing--cosmos #swap[data-reveal].is-revealed { transform: translateX(0); }
.reveal-ready .landing--cosmos .landing__section.mobile-app[data-reveal] { transform: translateX(160px); }
.reveal-ready .landing--cosmos .landing__section.mobile-app[data-reveal].is-revealed { transform: translateX(0); }

/* Public pages — same graphite / signal tokens as LK. Cosmos class kept as a CSS namespace. */
html.cosmos {
  --violet: var(--signal-strong);
  --mint: var(--signal);
  --indigo: var(--ink);
  --carbon: var(--bone);
  --paper: var(--panel);
  --lavender: var(--panel-2);
  --radius-btn: 100px;
  --radius-card: 24px;
  --radius-other: 48px;
  --color-signal-violet: var(--signal-strong);
  --gradient-signal-violet: linear-gradient(154deg, color-mix(in srgb, var(--signal) 35%, var(--panel)) 11%, var(--signal-strong) 62%);
  --color-mint-pulse: var(--signal);
  --color-terminal-green: var(--ok);
  --color-deep-indigo: var(--ink);
  --gradient-deep-indigo: linear-gradient(124deg, var(--ink) 0%, var(--signal-strong) 180%);
  --surface-cosmic-canvas: var(--ink);
  --surface-signal-field: var(--signal);
}
html.cosmos,
html.cosmos body {
  background: var(--ink);
  color: var(--bone);
  color-scheme: dark;
  font-family: var(--font);
}
html.cosmos-home,
html.cosmos-home body {
  background: #0F0F0F;
  /* Kill any horizontal scrollbar on the home page: decorative glows/orbs bleed
     past the viewport edge and .landing--cosmos is overflow-x:visible here for
     them, which also let real content (or a font-swap reflow) trigger a phantom
     left/right scroll. `clip` blocks the scroll without creating a scroll
     container, so the sticky nav still works. */
  overflow-x: clip;
  max-width: 100%;
}
html.cosmos .site-shader { display: none !important; }
html.cosmos .cosmos-sky { display: none !important; }

.landing--cosmos {
  --violet: var(--signal-strong);
  --mint: var(--signal);
  --indigo: var(--ink);
  --carbon: var(--bone);
  --paper: var(--panel);
  --lavender: var(--panel-2);
  --radius-btn: 100px;
  --radius-card: 24px;
  --radius-other: 48px;
  --color-signal-violet: var(--signal-strong);
  --gradient-signal-violet: linear-gradient(154deg, color-mix(in srgb, var(--signal) 35%, var(--panel)) 11%, var(--signal-strong) 62%);
  --color-mint-pulse: var(--signal);
  --color-terminal-green: var(--ok);
  --color-deep-indigo: var(--ink);
  --gradient-deep-indigo: linear-gradient(124deg, var(--ink) 0%, var(--signal-strong) 180%);
  --surface-cosmic-canvas: var(--ink);
  --surface-signal-field: var(--signal);
  font-family: var(--font);
  background: var(--ink);
  overflow-x: clip;
  position: relative;
}
html.cosmos-home .landing--cosmos {
  --hero-nav: 48px;
  background: #0F0F0F;
  overflow-x: visible;
}
html.cosmos-home .landing--cosmos .cosmos-slab {
  overflow-x: clip;
}
html.cosmos-home .landing--cosmos::before,
html.cosmos-home .landing--cosmos .landing__hero::before,
html.cosmos-home .landing--cosmos .landing__hero-art::before,
html.cosmos-home .landing--cosmos .cosmos-slab--violet::before,
html.cosmos-home .landing--cosmos .cosmos-slab--violet::after,
html.cosmos-home .landing--cosmos .cosmos-orb,
html.cosmos-home .landing--cosmos .spark,
html.cosmos-home .landing--cosmos .cosmos-fx {
  display: none;
}

/* Homepage hero only — instrument column: compressed headline, graphite
   sub, field + one filled signal CTA. Does not restyle the rest of landing. */
html.cosmos-home .landing--cosmos .landing__hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: calc(100vh - var(--hero-nav));
  min-height: calc(100lvh - var(--hero-nav));
  padding: 28px 16px 40px;
  overflow: hidden;
  background: var(--ink);
}
html.cosmos-home .landing--cosmos .landing__hero-voxel {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  background: var(--ink);
}
html.cosmos-home .landing--cosmos .landing__hero-voxel canvas {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--ink);
}
html.cosmos-home .landing--cosmos .landing__hero-voxel::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse 74% 60% at 50% 44%,
    color-mix(in srgb, var(--ink) 84%, transparent) 0%,
    color-mix(in srgb, var(--ink) 46%, transparent) 48%,
    color-mix(in srgb, var(--ink) 14%, transparent) 100%
  );
  pointer-events: none;
}
html.cosmos-home .landing--cosmos .landing__hero-inner {
  position: relative;
  z-index: 1;
  width: min(1200px, 100%);
  max-width: 1200px;
  margin: 0 auto;
  padding: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  justify-items: center;
  align-items: center;
  text-align: center;
}
html.cosmos-home .landing--cosmos .landing__hero-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  width: 100%;
  max-width: 680px;
  min-width: 0;
  margin-inline: auto;
}
html.cosmos-home .landing--cosmos .landing__hero h1 {
  margin: 0;
  max-width: none;
  font-family: var(--display);
  font-size: clamp(28px, 8vw, 36px);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.03em;
  color: var(--bone);
  font-feature-settings: "calt" 0, "liga" 0;
  overflow-wrap: break-word;
}
html.cosmos-home .landing--cosmos .landing__hero h1 span {
  display: block;
  white-space: normal;
}
html.cosmos-home .landing--cosmos .landing__hero h1 em {
  font-style: normal;
  color: inherit;
}
html.cosmos-home .landing--cosmos .landing__hero-sub {
  margin: 0 auto;
  max-width: none;
  white-space: nowrap;
  font-family: var(--font);
  font-size: clamp(12.5px, 3.5vw, 14.5px);
  font-weight: 400;
  line-height: 1.45;
  letter-spacing: -0.01em;
  color: var(--stone);
}
html.cosmos-home .landing--cosmos .landing__hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px 16px;
  margin: 0;
  width: 100%;
}
html.cosmos-home .landing--cosmos .landing__join {
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 100%;
  max-width: 520px;
  height: auto;
  margin-inline: auto;
  padding: 0;
  gap: 8px;
  background: transparent;
  border: 0;
  border-radius: 0;
  overflow: visible;
}
html.cosmos-home .landing--cosmos .landing__join-input {
  flex: 1 1 auto;
  min-width: 0;
  width: auto;
  height: 48px;
  padding: 0 16px;
  border: 1px solid color-mix(in srgb, var(--bone) 18%, transparent);
  border-radius: 12px;
  background: color-mix(in srgb, var(--bone) 4%, transparent);
  color: var(--bone);
  font-family: var(--font);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.01em;
}
html.cosmos-home .landing--cosmos .landing__join-input::placeholder {
  color: var(--faint);
}
html.cosmos-home .landing--cosmos .landing__join-input:focus {
  outline: none;
  border-color: var(--signal);
}
html.cosmos-home .landing--cosmos .landing__hero .btn,
html.cosmos-home .landing--cosmos .landing__hero .landing__join-go {
  height: 48px;
  padding: 0 16px;
  border-radius: 12px;
  font-family: var(--font);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.01em;
  box-shadow: none;
}
html.cosmos-home .landing--cosmos .landing__hero .btn--primary,
html.cosmos-home .landing--cosmos .landing__hero .landing__join-go {
  flex-shrink: 0;
  align-self: auto;
  width: auto;
  background: var(--signal);
  border: 0;
  border-left: 0;
  color: #fff;
}
html.cosmos-home .landing--cosmos .landing__hero .landing__join-go {
  flex: 0 0 auto;
  width: auto;
  padding: 0 12px;
  font-size: 13px;
  white-space: nowrap;
}
html.cosmos-home .landing--cosmos .landing__hero .btn--primary::before,
html.cosmos-home .landing--cosmos .landing__hero .landing__join-go::before {
  content: none;
}
html.cosmos-home .landing--cosmos .landing__hero .btn--primary:hover,
html.cosmos-home .landing--cosmos .landing__hero .btn--primary:focus-visible,
html.cosmos-home .landing--cosmos .landing__hero .landing__join-go:hover,
html.cosmos-home .landing--cosmos .landing__hero .landing__join-go:focus-visible {
  background: var(--signal-strong);
  border-color: transparent;
  border-radius: 12px;
  color: #fff;
  transform: none;
}
html.cosmos-home .landing--cosmos .landing__hero .btn--primary:active:not(:disabled),
html.cosmos-home .landing--cosmos .landing__hero .landing__join-go:active:not(:disabled) {
  transform: none;
}

@media (min-width: 640px) {
  html.cosmos-home .landing--cosmos .landing__join {
    width: min(100%, 520px);
  }
  html.cosmos-home .landing--cosmos .landing__hero .landing__join-go {
    padding: 0 16px;
    font-size: 14px;
  }
}

@media (min-width: 901px) {
  html.cosmos-home .landing--cosmos {
    --hero-nav: 70px;
  }
  html.cosmos-home .landing--cosmos .landing__hero {
    align-items: center;
    min-height: calc(100vh - var(--hero-nav));
    min-height: calc(100lvh - var(--hero-nav));
    padding: 72px 24px 80px;
  }
  html.cosmos-home .landing--cosmos .landing__hero-inner {
    width: min(1200px, 100%);
    max-width: 1200px;
  }
  html.cosmos-home .landing--cosmos .landing__hero-content {
    max-width: 680px;
    gap: var(--spacing-32, 32px);
  }
  html.cosmos-home .landing--cosmos .landing__hero h1 {
    font-size: 64px;
    line-height: 1.05;
    letter-spacing: -0.03em;
    margin: 0;
  }
  html.cosmos-home .landing--cosmos .landing__hero-sub {
    font-size: 20px;
    line-height: 1.4;
    max-width: none;
    white-space: nowrap;
  }
  html.cosmos-home .landing--cosmos .landing__hero .btn,
  html.cosmos-home .landing--cosmos .landing__hero .landing__join-go {
    height: 48px;
    padding: 0 16px;
    font-size: 14px;
  }
}

.landing--cosmos::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background: radial-gradient(ellipse 80% 50% at 72% -8%, color-mix(in srgb, var(--signal) 16%, transparent), transparent 58%);
}
html.cosmos:has(.doc-page) .landing--cosmos::before {
  display: none;
}

.landing--cosmos .btn {
  height: 48px;
  padding: 0 24px;
  border-radius: var(--radius-btn);
  font-size: 16px;
  font-weight: 700;
  box-shadow: none;
}
.landing--cosmos .btn--primary {
  background: transparent;
  border-color: color-mix(in srgb, var(--bone) 28%, transparent);
  color: var(--bone);
}
.landing--cosmos .btn--primary:hover,
.landing--cosmos .btn--primary:focus-visible {
  background: transparent;
  border-color: transparent;
  color: #fff;
}
.landing--cosmos .btn--ghost {
  background: transparent;
  border: 1px solid color-mix(in srgb, var(--bone) 22%, transparent);
  color: var(--bone);
}
.landing--cosmos .btn--ghost:hover {
  background: color-mix(in srgb, var(--signal) 12%, transparent);
  color: var(--bone);
}

.landing--cosmos .eyebrow {
  color: var(--signal);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
}

.landing--cosmos > .landing__nav-bar {
  position: sticky;
  top: 0;
  z-index: 80;
  background: transparent;
  padding: 14px max(6vw, calc((100% - 1200px) / 2)) 0;
}
.landing--cosmos .landing__nav-bar.is-scrolled {
  background: transparent;
  border-bottom-color: transparent;
  box-shadow: none;
}

.landing--cosmos .landing__nav {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  background: color-mix(in srgb, var(--ink) 48%, transparent);
  backdrop-filter: blur(22px) saturate(1.15);
  -webkit-backdrop-filter: blur(22px) saturate(1.15);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  box-shadow: none;
  transition: background 0.25s ease;
}
.landing--cosmos .landing__nav-bar.is-scrolled .landing__nav {
  background: color-mix(in srgb, var(--ink) 72%, transparent);
}

html.cosmos .landing--cosmos {
  --hero-nav: 48px;
}
html.cosmos .landing--cosmos > .landing__nav-bar,
html.cosmos .landing--cosmos .landing__nav-bar.is-scrolled {
  background: var(--ink);
  padding: 10px 16px 0;
}
@media (max-width: 900px) {
  html.cosmos .landing--cosmos:not(.landing--auth) {
    padding-top: var(--hero-nav);
  }
  html.cosmos .landing--cosmos > .landing__nav-bar,
  html.cosmos .landing--cosmos .landing__nav-bar.is-scrolled {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    padding: 0 16px;
    box-shadow: none;
  }
}
html.cosmos .landing--cosmos .landing__nav,
html.cosmos .landing--cosmos .landing__nav-bar.is-scrolled .landing__nav {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: 0;
  border-radius: 0;
  width: 100%;
  max-width: none;
}
html.cosmos .landing--cosmos .landing__nav-row {
  grid-template-columns: minmax(0, 1fr) auto;
  width: 100%;
  padding: 0;
  gap: 8px;
  min-height: 48px;
  align-items: center;
}
html.cosmos .landing--cosmos .landing__brand {
  min-width: 0;
}
html.cosmos .landing--cosmos .landing__nav-links {
  justify-self: start;
}
html.cosmos .landing--cosmos .landing__nav-actions {
  justify-self: end;
  gap: 4px;
}
html.cosmos .landing--cosmos .landing__nav-actions .btn {
  height: 36px;
  padding: 0 12px;
  font-size: 13px;
}
@media (min-width: 901px) {
  html.cosmos .landing--cosmos > .landing__nav-bar,
  html.cosmos .landing--cosmos .landing__nav-bar.is-scrolled {
    padding: 14px 20px 0;
  }
  html.cosmos .landing--cosmos .landing__nav-row {
    grid-template-columns: auto auto 1fr;
    gap: 12px 28px;
    min-height: 56px;
  }
  html.cosmos .landing--cosmos .landing__nav-actions {
    gap: 8px;
  }
  html.cosmos .landing--cosmos .landing__nav-actions .btn {
    height: 40px;
    padding: 0 18px;
    font-size: 14px;
  }
}

.landing--cosmos .landing__brand { color: #fff; font-weight: 800; }
.landing--cosmos .landing__brand-name { letter-spacing: 0.06em; text-transform: uppercase; }
.landing--cosmos .landing__brand-logo {
  height: 32px;
  width: 32px;
  max-width: 32px;
  margin-right: 0;
  border-radius: 10px;
  object-fit: contain;
  vertical-align: middle;
  flex-shrink: 0;
}
.landing--cosmos .landing__brand .mark {
  width: 32px;
  height: 32px;
  background: var(--signal);
  border: 0;
  color: #fff;
  border-radius: 10px;
  font-size: 15px;
}
.landing--cosmos .landing__nav-links a {
  color: rgba(255, 255, 255, 0.72);
  border-radius: var(--radius-btn);
}
.landing--cosmos .landing__nav-links a:hover,
.landing--cosmos .landing__nav-links a.is-active { color: #fff; }
.landing--cosmos .landing__nav-actions form { margin: 0; display: inline-flex; }
.landing--cosmos .landing__nav-actions .btn {
  height: 40px;
  font-size: 14px;
  border-radius: var(--radius-btn);
}
.landing--cosmos .landing__nav-actions .btn--ghost {
  border-color: transparent;
  color: #fff;
}
.landing--cosmos .landing__nav-actions .btn--ghost:hover {
  background: color-mix(in srgb, var(--bone) 8%, transparent);
}

.landing--cosmos .cosmos-stars {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    radial-gradient(1.5px 1.5px at 8% 18%, var(--signal) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 18% 64%, #fff 50%, transparent 51%),
    radial-gradient(2px 2px at 28% 12%, #fff 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 41% 78%, var(--signal) 50%, transparent 51%),
    radial-gradient(1px 1px at 52% 22%, #fff 50%, transparent 51%),
    radial-gradient(2px 2px at 63% 48%, var(--signal) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 74% 14%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 82% 68%, #fff 50%, transparent 51%),
    radial-gradient(2px 2px at 91% 32%, var(--signal) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 96% 82%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 12% 88%, #fff 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 35% 40%, var(--signal) 50%, transparent 51%);
  opacity: 0.85;
  animation: cosmos-star-twinkle 4.8s ease-in-out infinite;
}
.landing--cosmos .cosmos-orb {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  filter: blur(8px);
}
.landing--cosmos .cosmos-orb--a {
  width: 420px; height: 420px; left: -80px; top: -120px;
  background: radial-gradient(circle, rgba(108, 116, 209, 0.7), transparent 68%);
}
.landing--cosmos .cosmos-orb--b {
  width: 280px; height: 280px; right: 6%; top: 18%;
  background: radial-gradient(circle, rgba(108, 116, 209, 0.22), transparent 70%);
}
.landing--cosmos .spark {
  position: absolute;
  color: var(--mint);
  font-size: 18px;
  line-height: 1;
  pointer-events: none;
  z-index: 2;
  text-shadow: 0 0 12px rgba(108, 116, 209, 0.8);
}
.landing--cosmos .spark--1 { left: 8%; top: 12%; }
.landing--cosmos .spark--2 { left: 38%; top: 78%; font-size: 12px; }
.landing--cosmos .spark--3 { right: 42%; top: 8%; font-size: 14px; }

.landing--cosmos .landing__hero {
  display: flex;
  align-items: center;
  min-height: calc(100vh - 88px);
  padding: 48px 0;
  overflow: visible;
  background: transparent;
}
.landing--cosmos .landing__hero-inner { width: 100%; }
.landing--cosmos .landing__hero-inner { z-index: 1; overflow: visible; grid-template-columns: minmax(0, 1fr); gap: 0; }
.landing--cosmos .landing__hero-art { position: relative; isolation: isolate; }
.landing--cosmos .landing__hero-art::before {
  content: '';
  position: absolute;
  inset: -22%;
  z-index: -1;
  background: radial-gradient(
    closest-side,
    color-mix(in srgb, var(--signal) 22%, transparent) 0%,
    transparent 70%
  );
  filter: blur(90px);
  pointer-events: none;
}
.landing--cosmos .landing__hero-phone {
  width: 100%;
  max-width: 460px;
  height: auto;
  display: block;
  backface-visibility: hidden;
}
.landing--cosmos .landing__hero-content { min-width: 0; max-width: 100%; }
.landing--cosmos .landing__hero h1 {
  font-size: clamp(36px, 4.6vw, 80px);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: #fff;
  margin: 0 0 28px;
  max-width: 100%;
  overflow-wrap: break-word;
}
.landing--cosmos .landing__hero h1 span {
  display: block;
  white-space: nowrap;
}
.landing--cosmos .landing__hero h1 em {
  font-style: normal;
  color: var(--signal);
}
.landing--cosmos .landing__hero-actions { gap: 12px; margin-bottom: 18px; }
.landing--cosmos .landing__join {
  width: min(100%, 540px);
  height: 58px;
  padding: 0 0 0 20px;
  gap: 0;
  background: transparent;
  border: 1.5px solid color-mix(in srgb, var(--bone) 22%, transparent);
  overflow: hidden;
}
.landing--cosmos .landing__join-input {
  font-size: 15px;
  color: var(--bone);
}
.landing--cosmos .landing__join-input::placeholder {
  color: color-mix(in srgb, var(--bone) 45%, transparent);
}
.landing--cosmos .landing__hero .btn { height: 50px; padding: 0 26px; font-size: 16px; }
.landing--cosmos .landing__hero .landing__join-go {
  flex-shrink: 0;
  align-self: stretch;
  height: auto;
  padding: 0 26px;
  font-size: 14.5px;
  font-weight: 700;
  background: transparent;
  border: 0;
  border-left: 1.5px solid color-mix(in srgb, var(--bone) 22%, transparent);
  border-radius: 999px 0 0 999px;
  color: var(--bone);
  box-shadow: none;
}
.landing--cosmos .landing__hero .landing__join-go:hover,
.landing--cosmos .landing__hero .landing__join-go:focus-visible {
  background: transparent;
  border-color: transparent;
  border-radius: 999px 0 0 999px;
  color: #fff;
}
.landing--cosmos .landing__hero-trust { color: rgba(255, 255, 255, 0.78); font-size: 14px; }
.landing--cosmos .landing__hero-trust__stars { color: #00b67a; letter-spacing: 2px; }
.landing--cosmos .landing__hero-trust__text strong { color: #fff; }
.landing--cosmos .landing__hero-trust__brand { color: #00b67a; }
.landing--cosmos .landing__hero-lead {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  padding-top: 22px;
  max-width: 540px;
}
.landing--cosmos .landing__hero-lead p {
  margin: 0;
  max-width: none;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.7;
  color: rgba(238, 236, 231, 0.48);
}
.landing--cosmos .landing__hero-lead em {
  font-family: var(--display);
  font-style: normal;
  font-weight: 600;
  letter-spacing: -0.025em;
  color: var(--signal);
}
/* Per-coin brand colors, tuned for legibility on the dark hero background.
   Only the coins the user asked to keep highlighted (sol/ada/gram/ltc/
   xlm/dash + eth in plain blue) get a color — everything else in the list
   reads as plain muted text, same gray as the rest of the sentence. */
.landing--cosmos .landing__hero-lead em.coin-eth { color: #4C8DF6; }
.landing--cosmos .landing__hero-lead em.coin-sol { color: #B466FF; }
.landing--cosmos .landing__hero-lead em.coin-ltc { color: #6E9FE0; }
.landing--cosmos .landing__hero-lead em.coin-gram { color: #37AEE2; }
.landing--cosmos .landing__hero-lead em.coin-ada { color: #4C6FFF; }
.landing--cosmos .landing__hero-lead em.coin-xlm { color: #2FB6E0; }
.landing--cosmos .landing__hero-lead em.coin-dash { color: #4A9FEA; }
.landing--cosmos .landing__hero-lead em.coin-btc,
.landing--cosmos .landing__hero-lead em.coin-usdt,
.landing--cosmos .landing__hero-lead em.coin-bnb,
.landing--cosmos .landing__hero-lead em.coin-bch,
.landing--cosmos .landing__hero-lead em.coin-doge,
.landing--cosmos .landing__hero-lead em.coin-xrp,
.landing--cosmos .landing__hero-lead em.coin-trx,
.landing--cosmos .landing__hero-lead em.coin-shib,
.landing--cosmos .landing__hero-lead em.coin-etc,
.landing--cosmos .landing__hero-lead em.coin-zec,
.landing--cosmos .landing__hero-lead em.coin-xmr {
  color: inherit;
}
.landing--cosmos .landing__hero-lead__end {
  display: block;
  margin-top: 12px;
  color: rgba(238, 236, 231, 0.78);
}

.landing--cosmos .landing__section,
.landing--cosmos .landing__strip,
.landing--cosmos .cta-bleed {
  max-width: none;
  width: 100%;
  margin-left: 0;
  margin-right: 0;
  border: 0;
  background: transparent;
  padding: 113px max(6vw, calc((100% - 1200px) / 2));
  box-shadow: none;
}

.landing--cosmos .cosmos-slab {
  position: relative;
  z-index: 2;
  overflow: visible;
  background: transparent;
}
/* The hero already carries a 113px bottom pad; the section right after it
   doesn't need its own full 113px on top too — that stacked up to ~226px
   of dead air between the hero content and the swap board. */
.landing--cosmos .landing__hero + .cosmos-slab .landing__section {
  padding-top: 40px;
}
.landing--cosmos .cosmos-slab--violet {
  background: transparent;
}
.landing--cosmos .cosmos-slab--signal {
  background: transparent;
}

.landing--cosmos .band-violet { background: transparent; }
.landing--cosmos .band-indigo { background: transparent; }
.landing--cosmos .landing__section-head h2 { color: var(--bone); }
.landing--cosmos .cosmos-slab--violet .eyebrow { color: var(--mint); }
.landing--cosmos .cosmos-slab--violet .landing__section-head h2 { color: #fff; }
.landing--cosmos .cosmos-slab--violet .landing__section-head p { color: rgba(255, 255, 255, 0.82); }
.landing--cosmos .mobile-app__copy h2 { color: var(--bone); }

.landing--cosmos .landing__section-head {
  max-width: 720px;
  margin: 0 auto 48px;
}
.landing--cosmos .landing__section-head.head-center { text-align: center; }
.landing--cosmos .landing__section-head h2 {
  font-size: clamp(32px, 4.4vw, 48px);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.03em;
  font-feature-settings: "calt" 0, "liga" 0;
}
.landing--cosmos .landing__section-head p { font-size: 16px; line-height: 1.57; }

.landing--cosmos .cosmos-grid {
  display: grid;
  gap: 24px;
}
.landing--cosmos .cosmos-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.landing--cosmos .cosmos-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 980px) {
  .landing--cosmos .cosmos-grid--4 { grid-template-columns: 1fr 1fr; }
  .landing--cosmos .cosmos-grid--3 { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .landing--cosmos .cosmos-grid--4 { grid-template-columns: 1fr; }
}

.landing--cosmos .cosmos-card {
  background: var(--paper);
  border-radius: var(--radius-card);
  padding: 24px;
  box-shadow: none;
  border: 1px solid var(--line);
  color: var(--carbon);
}
.landing--cosmos .cosmos-card h3 {
  margin: 0 0 10px;
  font-size: 24px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--carbon);
}
.landing--cosmos .cosmos-card p {
  margin: 0 0 16px;
  font-size: 16px;
  line-height: 1.57;
  color: #666;
}
.landing--cosmos .cosmos-card a {
  color: var(--violet);
  font-weight: 700;
  font-size: 14px;
}
.landing--cosmos .cosmos-card__tag {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 10px;
  margin-bottom: 12px;
  border-radius: 100px;
  background: var(--lavender);
  color: var(--violet);
  font-size: 12px;
  font-weight: 700;
}
.landing--cosmos .cosmos-card__icon {
  width: 56px;
  height: 56px;
  border-radius: 12px;
  background: transparent;
  color: var(--violet);
  display: grid;
  place-items: center;
  margin-bottom: 16px;
}
.landing--cosmos .cosmos-card__icon img {
  width: 56px;
  height: 56px;
  object-fit: contain;
}
.landing--cosmos .cosmos-card__num {
  display: block;
  font-family: var(--display);
  font-size: 32px;
  font-weight: 800;
  line-height: 1;
  color: var(--violet);
  margin-bottom: 16px;
}
.landing--cosmos .cosmos-card--stat {
  text-align: center;
  padding: 32px 24px;
}
.landing--cosmos .cosmos-card--stat .n {
  font-family: var(--display);
  font-size: 32px;
  font-weight: 800;
  line-height: 1;
  color: var(--carbon);
}
.landing--cosmos .cosmos-card--stat .l {
  margin-top: 8px;
  font-size: 14px;
  color: #666;
}
.landing--cosmos .cosmos-card--stat .strip-avatars {
  justify-content: center;
  margin-bottom: 16px;
}

.landing--cosmos .swap-board {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(300px, 1fr);
  gap: 48px 56px;
  align-items: center;
}
.landing--cosmos .swap-board__copy .eyebrow { margin-bottom: 16px; }
.landing--cosmos .swap-board__copy h2 {
  margin: 0 0 18px;
  color: #fff;
  font-size: clamp(32px, 4.2vw, 48px);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.03em;
  white-space: nowrap;
}
.landing--cosmos .swap-board__copy p {
  margin: 0 0 28px;
  max-width: 520px;
  color: rgba(255, 255, 255, 0.82);
  font-size: 16px;
  line-height: 1.57;
}
.landing--cosmos .swap-board__stage {
  --swap-r: 170px;
  --swap-coin: 156px;
  --swap-mark: 188px;
  position: relative;
  height: 440px;
  overflow: visible;
  pointer-events: none;
  user-select: none;
}
.landing--cosmos .swap-orbit {
  position: absolute;
  inset: 0;
  transform-origin: 50% 50%;
  animation: swap-orbit-spin 56s linear infinite;
}
.landing--cosmos .swap-orbit__slot {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0;
  height: 0;
  transform: rotate(var(--a)) translateX(var(--swap-r));
}
.landing--cosmos .swap-orbit__slot .swap-coin {
  position: absolute;
  left: 0;
  top: 0;
  width: var(--swap-coin);
  height: var(--swap-coin);
  object-fit: contain;
  object-position: center;
  display: block;
  mix-blend-mode: lighten;
  animation: swap-orbit-face 56s linear infinite;
}
.landing--cosmos .swap-coin--mark {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 4;
  width: var(--swap-mark);
  height: var(--swap-mark);
  object-fit: contain;
  object-position: center;
  display: block;
  mix-blend-mode: lighten;
  transform: translate(-50%, -50%);
}
@keyframes swap-orbit-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
@keyframes swap-orbit-face {
  from { transform: translate(-50%, -50%) rotate(calc(-1 * var(--a))); }
  to { transform: translate(-50%, -50%) rotate(calc(-1 * var(--a) - 360deg)); }
}
@media (max-width: 900px) {
  .landing--cosmos .swap-board {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .landing--cosmos .swap-board__copy {
    min-width: 0;
  }
  .landing--cosmos .swap-board__copy h2 {
    white-space: normal;
  }
  .landing--cosmos .swap-board__stage {
    --swap-r: 118px;
    --swap-coin: 112px;
    --swap-mark: 132px;
    height: 320px;
  }
  /* .landing__section/.landing__strip/.cta-bleed carry a flat 113px
     top+bottom padding at every width — on a narrow phone that reads as a
     huge dead stretch between adjacent sections (e.g. hero to swap to
     mobile-app). Halve it below the desktop breakpoint. */
  .landing--cosmos .landing__section,
  .landing--cosmos .landing__strip,
  .landing--cosmos .cta-bleed {
    padding-top: 56px;
    padding-bottom: 56px;
  }
  /* .landing__hero carries its own separate 113px BOTTOM padding (not
     covered by the .landing__section rule above) — that's a second, empty
     113px stretch of nothing between hero-lead's last line and the swap
     section's own top padding right after it. */
  .landing--cosmos .landing__hero {
    padding-bottom: 48px;
  }
  .landing--cosmos .landing__hero-art {
    display: none;
  }
  /* The coin list ("Trade across Bitcoin, Litecoin, ...") wraps to 3 lines
     at the desktop 16px size on a ~345px phone column. Shrink it enough to
     fit 2. */
  .landing--cosmos .landing__hero-lead p {
    font-size: 13.5px;
    line-height: 1.55;
  }
}

.landing--cosmos .mobile-app {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: 48px;
  align-items: center;
}
.landing--cosmos .mobile-app__copy {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 420px;
}
.landing--cosmos .mobile-app__brand {
  color: var(--mint);
  font-size: 24px;
  font-weight: 800;
  font-family: var(--display);
}
.landing--cosmos .mobile-app__copy h2 {
  font-weight: 600;
  color: #fff;
  font-size: clamp(28px, 8.4cqi, 48px);
  margin: 0 0 22px;
  line-height: 1.05;
  letter-spacing: -0.03em;
  white-space: nowrap;
}
.landing--cosmos .mobile-app__copy p {
  font-size: 20px;
  line-height: 1.55;
  max-width: 22em;
  margin: 0 0 36px;
  color: rgba(255, 255, 255, 0.72);
}
.landing--cosmos .mobile-app__em { color: #fff; }
.landing--cosmos .mobile-app__cta { gap: 10px 14px; }
.landing--cosmos .store-badge {
  filter: blur(2.5px);
  pointer-events: none;
}
.landing--cosmos .mobile-app__copy p.mobile-app__soon {
  flex: 1 0 100%;
  margin: 0;
  max-width: none;
  width: auto;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--stone);
  white-space: nowrap;
}
.landing--cosmos .mobile-app__copy p.mobile-app__note {
  max-width: none !important;
  width: max-content;
  color: var(--faint) !important;
  font-size: 15px !important;
  margin: 0 !important;
  white-space: nowrap;
}

.landing--cosmos .markets-board {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(280px, 360px);
  gap: 24px;
  align-items: stretch;
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
  overflow: visible;
}
.landing--cosmos .markets-board .price-chart {
  margin: 0;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 22px;
  overflow: hidden;
  padding: 14px 14px 10px;
  min-width: 0;
  min-height: 440px;
  display: flex;
  flex-direction: column;
}
.landing--cosmos .markets-board .price-chart > #home-chart,
.landing--cosmos .markets-board .trade-chart {
  flex: 1;
  min-height: 320px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.landing--cosmos .markets-board .trade-chart__bar {
  display: flex;
  align-items: center;
  min-height: 32px;
  margin: 0;
  padding: 2px 0 8px;
  flex-shrink: 0;
}
.landing--cosmos .markets-board .trade-chart__tools {
  display: flex;
  align-items: center;
  gap: 2px;
  width: 100%;
}
.landing--cosmos .markets-board .trade-chart__tf {
  display: flex;
  align-items: center;
  gap: 2px;
}
.landing--cosmos .markets-board .trade-chart__tf-btn {
  height: 26px;
  padding: 0 9px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--stone);
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
.landing--cosmos .markets-board .trade-chart__tf-btn:hover {
  color: var(--bone);
  background: color-mix(in srgb, var(--bone) 7%, transparent);
}
.landing--cosmos .markets-board .trade-chart__tf-btn.is-active {
  color: var(--bone);
  background: color-mix(in srgb, var(--bone) 11%, transparent);
}
.landing--cosmos .markets-board .trade-chart__stage {
  position: relative;
  flex: 1;
  min-height: 280px;
  min-width: 0;
}
.landing--cosmos .markets-board .trade-chart__canvas {
  position: relative;
  height: 100%;
  min-height: 280px;
}
.landing--cosmos .markets-board .trade-chart__legend {
  position: absolute;
  top: 6px;
  left: 8px;
  z-index: 4;
  pointer-events: none;
  max-width: calc(100% - 72px);
}
.landing--cosmos .markets-board .trade-chart__legend-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 10px;
  font-size: 11.5px;
  color: var(--faint);
}
.landing--cosmos .markets-board .trade-chart__legend-pair {
  color: var(--bone);
  font-weight: 650;
}
.landing--cosmos .markets-board .trade-chart__legend-tf {
  color: var(--stone);
  font-family: var(--mono);
  font-weight: 600;
}
.landing--cosmos .markets-board .trade-chart__legend-when { color: var(--stone); }
.landing--cosmos .markets-board .trade-chart__legend-ohlc {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 10px;
  font-family: var(--mono);
}
.landing--cosmos .markets-board .trade-chart__legend-ohlc b {
  color: var(--bone);
  font-weight: 600;
}
.landing--cosmos .markets-board .trade-chart__legend-ohlc.pos b { color: var(--ok); }
.landing--cosmos .markets-board .trade-chart__legend-ohlc.neg b { color: var(--bad); }
.landing--cosmos .markets-board .trade-chart__legend-row--metrics {
  margin-top: 4px;
}
.landing--cosmos .markets-board .trade-chart__legend-row--metrics b {
  font-family: var(--mono);
  font-weight: 600;
  color: var(--bone);
}
.landing--cosmos .markets-board .trade-chart__legend-row--metrics .pos { color: var(--ok); }
.landing--cosmos .markets-board .trade-chart__legend-row--metrics .neg { color: var(--bad); }
.landing--cosmos .markets-board .trade-chart__empty {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--faint);
  font-size: 12.5px;
  text-align: center;
  padding: 0 20px;
  pointer-events: none;
  z-index: 2;
}
.landing--cosmos .markets-board .trade-chart__empty[hidden] { display: none; }
.landing--cosmos .markets-board .price-chart__head { margin-bottom: 10px; }
.landing--cosmos .markets-board .price-chart__sym span { color: var(--stone); font-size: 13px; }
.landing--cosmos .markets-board .candle-chart {
  margin: 0;
  padding: 0;
  border: 0;
  flex: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "price tf"
    "ohlc ohlc"
    "canvas canvas";
  align-items: start;
  gap: 0 16px;
}
.landing--cosmos .markets-board .candle-chart__head {
  display: flex;
  grid-area: tf;
  margin: 0;
  padding-top: 4px;
}
.landing--cosmos .markets-board .candle-chart__id { display: none; }
.landing--cosmos .markets-board .candle-chart__tf {
  border: 1px solid var(--line);
  background: transparent;
  border-radius: var(--radius-sm);
  padding: 2px;
  gap: 2px;
}
.landing--cosmos .markets-board .candle-chart__tf-btn {
  color: var(--stone);
  border-radius: 5px;
  padding: 5px 10px;
  font-family: var(--mono);
  font-size: 11.5px;
  font-weight: 600;
}
.landing--cosmos .markets-board .candle-chart__tf-btn:hover { color: var(--bone); }
.landing--cosmos .markets-board .candle-chart__tf-btn.is-active {
  background: var(--panel-2);
  color: var(--bone);
}
.landing--cosmos .markets-board .candle-chart__price-row {
  grid-area: price;
  margin: 6px 0 8px;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}
.landing--cosmos .markets-board .candle-chart__price {
  font-family: var(--mono);
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--bone);
  line-height: 1;
}
.landing--cosmos .markets-board .candle-chart__chg {
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 700;
  border-radius: 0;
  padding: 0;
  background: transparent;
}
.landing--cosmos .markets-board .candle-chart__chg.pos {
  color: var(--ok);
  background: transparent;
}
.landing--cosmos .markets-board .candle-chart__chg.neg {
  color: var(--bad);
  background: transparent;
}
.landing--cosmos .markets-board .candle-chart__when {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--faint);
}
.landing--cosmos .markets-board .candle-chart__ohlc {
  grid-area: ohlc;
  display: flex;
  flex-wrap: wrap;
  gap: 12px 16px;
  margin: 0 0 12px;
  font-size: 11px;
  font-family: var(--mono);
  color: var(--faint);
}
.landing--cosmos .markets-board .candle-chart__ohlc strong { color: var(--stone); }
.landing--cosmos .markets-board .candle-chart__canvas {
  grid-area: canvas;
  height: 260px;
  margin: 0;
  min-height: 240px;
}

.landing--cosmos .markets-pair {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 22px;
  width: 100%;
  max-width: 100%;
  margin: 0 0 10px;
  min-width: 0;
}
.landing--cosmos .markets-pair__label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--bone);
  flex-shrink: 0;
}
.landing--cosmos .markets-pair__label .asset-ico { width: 28px; height: 28px; }
.landing--cosmos .markets-pair__text {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.landing--cosmos .markets-pair__text strong { font-size: 15px; font-weight: 650; line-height: 1.15; letter-spacing: -0.02em; }
.landing--cosmos .markets-pair__text em {
  font-style: normal;
  font-size: 12.5px;
  color: var(--stone);
}
.landing--cosmos .markets-pair__last {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  flex-shrink: 0;
}
.landing--cosmos .markets-pair__last strong {
  font-family: var(--mono);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1;
}
.landing--cosmos .markets-pair__last span {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.2;
}
.landing--cosmos .markets-pair__last.pos strong,
.landing--cosmos .markets-pair__last.pos span { color: var(--ok); }
.landing--cosmos .markets-pair__last.neg strong,
.landing--cosmos .markets-pair__last.neg span { color: var(--bad); }
.landing--cosmos .markets-pair__stats {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 16px 22px;
  margin-left: auto;
  min-width: 0;
}
.landing--cosmos .markets-pair__stats > div {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.landing--cosmos .markets-pair__stats span {
  font-size: 11px;
  font-weight: 550;
  color: var(--stone);
  white-space: nowrap;
}
.landing--cosmos .markets-pair__stats span b {
  font-weight: 550;
  color: inherit;
}
.landing--cosmos .markets-pair__stats strong {
  font-family: var(--mono);
  font-size: 13.5px;
  font-weight: 650;
  color: var(--bone);
}

.landing--cosmos .markets-board__list {
  display: block;
  min-width: 0;
  height: 440px;
  min-height: 440px;
  max-height: 440px;
  overflow: hidden;
  padding: 8px;
  border: 1px solid var(--line);
  background: var(--panel);
  border-radius: 22px;
}
.landing--cosmos .markets-board__track {
  display: flex;
  flex-direction: column;
  width: 100%;
  animation: markets-tape 42s linear infinite;
}
.landing--cosmos .markets-board__list:hover .markets-board__track,
.landing--cosmos .markets-board__list:focus-within .markets-board__track {
  animation-play-state: paused;
}
@keyframes markets-tape {
  from { transform: translateY(-50%); }
  to { transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .landing--cosmos .markets-board__track { animation: none; }
  .landing--cosmos .markets-board__list { overflow-y: auto; }
}
.landing--cosmos .markets-board__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  width: 100%;
  height: 48px;
  min-height: 48px;
  padding: 8px 10px;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
  font: inherit;
}
.landing--cosmos .markets-board__row:last-child {
  margin-bottom: 0;
}
.landing--cosmos .markets-board__row:hover { background: var(--panel-2); }
.landing--cosmos .markets-board__row.is-active { background: color-mix(in srgb, var(--signal) 10%, transparent); }
.landing--cosmos .markets-board__asset {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.landing--cosmos .markets-board__asset .asset-ico { width: 26px; height: 26px; flex-shrink: 0; }
.landing--cosmos .markets-board__asset span {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.landing--cosmos .markets-board__asset strong {
  font-size: 13.5px;
  font-weight: 650;
  color: var(--bone);
  line-height: 1.2;
}
.landing--cosmos .markets-board__asset em {
  font-style: normal;
  font-size: 12px;
  color: var(--stone);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.landing--cosmos .markets-board__quote {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  line-height: 1.2;
}
.landing--cosmos .markets-board__quote strong {
  font-size: 13.5px;
  font-weight: 600;
  font-family: var(--mono);
  color: var(--bone);
  font-variant-numeric: tabular-nums;
}
.landing--cosmos .markets-board__quote b {
  font-size: 12px;
  font-weight: 650;
  font-family: var(--mono);
  border-radius: 0;
  padding: 0;
  background: transparent;
}
.landing--cosmos .markets-board__quote b.pos {
  color: var(--ok);
  background: transparent;
}
.landing--cosmos .markets-board__quote b.neg {
  color: var(--bad);
  background: transparent;
}

.landing--cosmos .landing__markets {
  background: var(--paper);
  border-radius: var(--radius-card);
  padding: 8px 4px 12px;
  box-shadow: none;
}
@media (max-width: 980px) {
  .landing--cosmos .markets-board {
    grid-template-columns: 1fr;
  }
  .landing--cosmos .markets-board .price-chart { min-height: 0; }
  .landing--cosmos .markets-board__list {
    height: 360px;
    min-height: 0;
    max-height: 360px;
    padding: 10px 10px 14px;
  }
  /* The chart's floating legend (pair/tf/when + full OHLC + change/amplitude/
     volume/turnover) wraps to ~6 lines at phone width — on this compact
     ~280px-tall canvas that's over a third of the chart buried under text,
     reading as a pile-up on top of the candles. The .markets-pair header
     above the chart already shows price/change/volume/turnover, so drop the
     redundant OHLC + metrics rows here and keep just the compact pair/tf/
     when line. The full /app/trade terminal's legend is untouched — this is
     scoped to the home-page widget only. */
  .landing--cosmos .markets-board .trade-chart__legend-ohlc,
  .landing--cosmos .markets-board .trade-chart__legend-row--metrics {
    display: none;
  }
  /* label + last + stats together need ~520px — more than any phone has, and the horizontal
     scroll this used to fall back to read as broken (content scrolls sideways and still doesn't
     quite fit). Wrap onto a second row instead: stats drop the margin-left:auto that used to
     shove them to the right edge, so they line up flush under .markets-pair__label. */
  .landing--cosmos .markets-pair {
    flex-wrap: wrap;
  }
  .landing--cosmos .markets-pair__stats {
    margin-left: 0;
    flex-shrink: 1;
  }
  /* Drop the turnover stat on phone — volume + price/change already cover
     the essentials in the one-row layout above, turnover just adds width. */
  .landing--cosmos .markets-pair__stats > div:nth-child(2) {
    display: none;
  }
}
.landing--cosmos .landing__markets th {
  color: var(--faint);
  border-bottom-color: var(--line-ghost);
}
.landing--cosmos .landing__markets td {
  color: var(--bone);
  border-bottom-color: var(--line-ghost);
}
.landing--cosmos .landing__markets td.net { color: var(--stone); }
.landing--cosmos .landing__markets .sym span { color: var(--stone); }
.landing--cosmos .landing__markets .sym strong { color: var(--bone); }
.landing--cosmos .landing__markets .sym:hover strong { color: var(--signal); }
.landing--cosmos .landing__markets tbody tr:hover { background: var(--panel-2); }
.landing--cosmos .landing__markets .num.pos span {
  color: #fff;
  background: var(--signal);
  border-radius: 100px;
}
.landing--cosmos .landing__markets .num.neg span { border-radius: 100px; }
.landing--cosmos .cosmos-slab--violet .btn--ghost {
  border-color: var(--mint);
  color: var(--mint);
}

.landing--cosmos .stake-board {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(320px, 1.05fr);
  gap: 48px 64px;
  align-items: center;
}
.landing--cosmos .stake-board__orbit {
  display: flex;
  justify-content: center;
  width: 100%;
  margin: 0 0 12px;
  line-height: 0;
  pointer-events: none;
  user-select: none;
}
.landing--cosmos .stake-board__orbit img {
  display: block;
  width: 100%;
  height: auto;
}
.landing--cosmos .stake-board__copy .eyebrow { margin-bottom: 16px; }
.landing--cosmos .stake-board__copy h2 {
  margin: 0 0 18px;
  color: #fff;
  font-size: clamp(32px, 4.2vw, 48px);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.03em;
}
.landing--cosmos .stake-board__copy p {
  margin: 0 0 28px;
  max-width: 520px;
  color: rgba(255, 255, 255, 0.82);
  font-size: 16px;
  line-height: 1.57;
}
.landing--cosmos .stake-board__panel {
  position: relative;
  min-width: 0;
}
.landing--cosmos .stake-blot__print {
  margin: 0 0 10px;
  font-family: var(--display);
  font-size: clamp(40px, 5.2vw, 64px);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.05;
  color: #fff;
  font-variant-numeric: tabular-nums;
}
.landing--cosmos .stake-blot__lede {
  margin: 0 0 32px;
  font-size: 15px;
  line-height: 1.45;
  color: rgba(238, 236, 231, 0.58);
}
.landing--cosmos .stake-blot__lede span { color: rgba(238, 236, 231, 0.88); }
.landing--cosmos .stake-blot__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 8px;
}
.landing--cosmos .stake-blot__row span {
  font-size: 14px;
  color: rgba(238, 236, 231, 0.48);
}
.landing--cosmos .stake-blot__row strong {
  font-family: var(--display);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: #fff;
  font-variant-numeric: tabular-nums;
}
.landing--cosmos .stake-board__panel .stake-calc__slider { margin: 2px 0 22px; }
.landing--cosmos .stake-blot__terms {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 20px;
  margin: 2px 0 28px;
}
.landing--cosmos .stake-blot__terms button {
  height: auto;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: rgba(238, 236, 231, 0.34);
  font-size: 15px;
  font-weight: 650;
  letter-spacing: -0.02em;
  cursor: pointer;
}
.landing--cosmos .stake-blot__terms button:hover { color: #fff; }
.landing--cosmos .stake-blot__terms button.is-on {
  background: none;
  color: var(--signal);
}
.landing--cosmos .stake-blot__line {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 28px;
  margin: 0;
  font-size: 14px;
  color: rgba(238, 236, 231, 0.48);
}
.landing--cosmos .stake-blot__line b {
  font-family: var(--display);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--signal);
  font-variant-numeric: tabular-nums;
}
.landing--cosmos .stake-calc { position: relative; z-index: 1; }
.landing--cosmos .stake-calc__head {
  display: flex;
  align-items: baseline;
  margin-bottom: 22px;
}
.landing--cosmos .stake-calc__head span {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--mint);
}
.landing--cosmos .stake-calc__head em {
  font-style: normal;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.4);
}
.landing--cosmos .stake-calc__field {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}
.landing--cosmos .stake-calc__field span {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.5);
}
.landing--cosmos .stake-calc__field strong {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: #fff;
  font-variant-numeric: tabular-nums;
}
.landing--cosmos .stake-calc__slider { display: block; height: 20px; margin: 4px 0 22px; }
.landing--cosmos .stake-calc__slider input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  display: block;
  width: 100%;
  height: 20px;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  outline: none;
  cursor: pointer;
}
.landing--cosmos .stake-calc__slider input[type="range"]::-webkit-slider-runnable-track {
  height: 4px;
  border: 0;
  border-radius: 100px;
  background: linear-gradient(to right, var(--signal) var(--p, 0%), rgba(255, 255, 255, 0.12) var(--p, 0%));
}
.landing--cosmos .stake-calc__slider input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  margin-top: -6px;
  box-sizing: border-box;
  border: 3px solid var(--ink);
  border-radius: 50%;
  background: var(--signal);
  box-shadow: 0 0 0 1px var(--signal);
  cursor: grab;
}
.landing--cosmos .stake-calc__slider input[type="range"]::-moz-range-track {
  height: 4px;
  border: 0;
  border-radius: 100px;
  background: linear-gradient(to right, var(--signal) var(--p, 0%), rgba(255, 255, 255, 0.12) var(--p, 0%));
}
.landing--cosmos .stake-calc__slider input[type="range"]::-moz-range-thumb {
  width: 16px;
  height: 16px;
  box-sizing: border-box;
  border: 3px solid var(--ink);
  border-radius: 50%;
  background: var(--signal);
  box-shadow: 0 0 0 1px var(--signal);
  cursor: grab;
}
.landing--cosmos .stake-calc__terms {
  display: flex;
  gap: 6px;
  margin: 4px 0 24px;
}
.landing--cosmos .stake-calc__terms button {
  flex: 1;
  height: 36px;
  padding: 0 4px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--radius-btn);
  background: transparent;
  color: rgba(255, 255, 255, 0.7);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}
.landing--cosmos .stake-calc__terms button:hover { color: #fff; border-color: rgba(255, 255, 255, 0.35); }
.landing--cosmos .stake-calc__terms button.is-on {
  background: var(--mint);
  border-color: var(--mint);
  color: #fff;
}
.landing--cosmos .stake-calc__out {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 12px;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.landing--cosmos .stake-calc__out span {
  display: block;
  margin-bottom: 4px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.45);
}
.landing--cosmos .stake-calc__out b {
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--mint);
  font-variant-numeric: tabular-nums;
}
.landing--cosmos .stake-calc__out strong {
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: #fff;
  font-variant-numeric: tabular-nums;
}
.landing--cosmos .stake-ticket__mark {
  position: absolute;
  right: -24px;
  bottom: -56px;
  height: 180px;
  width: auto;
  opacity: 0.28;
  pointer-events: none;
}
@media (max-width: 980px) {
  .landing--cosmos .stake-board { grid-template-columns: 1fr; gap: 32px; }
  .landing--cosmos .stake-board__orbit {
    width: 100%;
    margin: 0 0 12px;
  }
  .landing--cosmos .stake-ticket__mark { height: 140px; }
  /* Move "Open staking" below the calculator panel on phone instead of
     between the copy text and the panel. The button is nested inside
     .stake-board__copy, a sibling of .stake-board__panel — display:contents
     lifts copy's children into the grid directly so each can get its own
     `order` alongside the panel, without touching desktop's markup/DOM. */
  .landing--cosmos .stake-board__copy {
    display: contents;
  }
  .landing--cosmos .stake-board__panel {
    order: 2;
  }
  .landing--cosmos .stake-board__copy .btn--primary {
    order: 3;
    margin-top: 4px;
  }
}

.landing--cosmos .stake-page { position: relative; z-index: 1; }
.landing--cosmos .stake-flash {
  margin: 0 0 20px;
  padding: 12px 16px;
  border-radius: 16px;
  font-size: 14px;
  font-weight: 700;
}
.landing--cosmos .stake-flash--bad {
  background: color-mix(in srgb, var(--bad) 16%, transparent);
  color: #ffc4ba;
}
.landing--cosmos .stake-flash--ok {
  background: color-mix(in srgb, var(--mint) 14%, transparent);
  color: var(--mint);
}
.landing--cosmos .stake-desk {
  display: grid;
  grid-template-columns: minmax(240px, 0.8fr) minmax(280px, 1.2fr);
  gap: 16px;
  align-items: start;
}
.landing--cosmos .stake-usdt {
  display: flex;
  flex-direction: column;
  background: var(--paper);
  border-radius: var(--radius-card);
  padding: 28px 24px;
}
.landing--cosmos .stake-usdt__coin {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--line-ghost);
}
.landing--cosmos .stake-usdt__coin .asset-ico { width: 40px; height: 40px; }
.landing--cosmos .stake-usdt__coin strong {
  display: block;
  font-size: 18px;
  font-weight: 800;
  color: var(--carbon);
  line-height: 1.1;
}
.landing--cosmos .stake-usdt__coin em {
  font-style: normal;
  font-size: 13px;
  color: #888;
}
.landing--cosmos .stake-usdt__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px 16px;
}
.landing--cosmos .stake-usdt__grid span {
  display: block;
  margin-bottom: 6px;
  font-size: 12px;
  color: #888;
}
.landing--cosmos .stake-usdt__grid strong,
.landing--cosmos .stake-usdt__grid b {
  display: block;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--carbon);
  font-variant-numeric: tabular-nums;
  line-height: 1.15;
}
.landing--cosmos .stake-usdt__grid b { color: var(--violet); }
.landing--cosmos .stake-usdt__go {
  display: inline-flex;
  margin-top: 20px;
  font-size: 13px;
  font-weight: 700;
  color: var(--violet);
}
.landing--cosmos .stake-ticket {
  background: var(--indigo);
  border-radius: var(--radius-card);
  padding: 28px 28px 24px;
  color: #fff;
}
.landing--cosmos .stake-ticket .stake-calc__head { margin-bottom: 18px; }
.landing--cosmos .stake-ticket__coin {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}
.landing--cosmos .stake-ticket__coin .asset-ico { width: 36px; height: 36px; }
.landing--cosmos .stake-ticket__coin strong {
  display: block;
  font-size: 18px;
  font-weight: 800;
  line-height: 1.1;
}
.landing--cosmos .stake-ticket__coin em {
  font-style: normal;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.5);
}
.landing--cosmos .stake-ticket__avail {
  margin: 0 0 18px;
  font-size: 13px;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.55);
}
.landing--cosmos .stake-ticket .stake-calc__field { margin-bottom: 4px; }
.landing--cosmos .stake-ticket__max {
  border: 0;
  background: transparent;
  color: var(--mint);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  padding: 0;
}
.landing--cosmos .stake-ticket__qty {
  width: 100%;
  height: 48px;
  margin: 0 0 18px;
  padding: 0;
  border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 0;
  background: transparent;
  color: #fff;
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  outline: none;
}
.landing--cosmos .stake-ticket__qty::placeholder { color: rgba(255, 255, 255, 0.28); }
.landing--cosmos .stake-ticket .stake-calc__terms { margin: 0 0 16px; }
.landing--cosmos .stake-ticket__rate {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 8px;
}
.landing--cosmos .stake-ticket__rate span { font-size: 13px; color: rgba(255, 255, 255, 0.5); }
.landing--cosmos .stake-ticket__rate strong {
  font-size: 22px;
  font-weight: 800;
  color: #fff;
  font-variant-numeric: tabular-nums;
}
.landing--cosmos .stake-ticket .stake-calc__out { margin-bottom: 20px; }
.landing--cosmos .stake-ticket .btn--block { width: 100%; }
.landing--cosmos .stake-ticket .btn--primary:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.landing--cosmos .stake-ticket__alt {
  display: block;
  margin-top: 12px;
  text-align: center;
  font-size: 13px;
  font-weight: 700;
  color: var(--mint);
}
.landing--cosmos .stake-locks {
  margin-top: 20px;
  background: var(--paper);
  border-radius: var(--radius-card);
  padding: 22px 24px 16px;
}
.landing--cosmos .stake-locks__title {
  font-size: 16px;
  font-weight: 800;
  color: var(--carbon);
  margin-bottom: 12px;
}
.landing--cosmos .stake-locks__title--sub { margin-top: 22px; }
.landing--cosmos .stake-locks__empty {
  margin: 0;
  padding: 12px 0 8px;
  color: #888;
  font-size: 14px;
}
.landing--cosmos .stake-locks__head,
.landing--cosmos .stake-locks__row {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr 0.6fr 1fr 1.1fr 1.2fr;
  gap: 10px;
  align-items: center;
}
.landing--cosmos .stake-locks__head {
  padding: 0 4px 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #888;
}
.landing--cosmos .stake-locks__row {
  padding: 12px 4px;
  border-top: 1px solid var(--line-ghost);
  color: var(--carbon);
  font-size: 13px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.landing--cosmos .stake-locks__row.is-past { color: #888; font-weight: 600; }
.landing--cosmos .stake-locks__asset {
  display: flex;
  align-items: center;
  gap: 8px;
}
.landing--cosmos .stake-locks__asset .asset-ico { width: 24px; height: 24px; }
.landing--cosmos .stake-locks__earn i {
  display: block;
  font-style: normal;
  font-size: 11px;
  font-weight: 600;
  color: #888;
}
.landing--cosmos .stake-locks__acts {
  display: flex;
  justify-content: flex-end;
  gap: 6px;
  flex-wrap: wrap;
}
.landing--cosmos .stake-locks__acts button {
  height: 32px;
  padding: 0 12px;
  border: 1px solid var(--line-ghost);
  border-radius: 100px;
  background: transparent;
  color: var(--carbon);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}
.landing--cosmos .stake-locks__acts button.is-mint {
  background: var(--mint);
  border-color: var(--mint);
  color: #fff;
}
.landing--cosmos .stake-locks__acts button.is-quiet { color: #888; }
@media (max-width: 980px) {
  .landing--cosmos .stake-desk { grid-template-columns: 1fr; }
  .landing--cosmos .stake-locks__head { display: none; }
  .landing--cosmos .stake-locks__row,
  .landing--cosmos .stake-locks__table--past .stake-locks__row {
    grid-template-columns: 1fr 1fr;
    gap: 8px 12px;
  }
  .landing--cosmos .stake-locks__acts { grid-column: 1 / -1; justify-content: flex-start; }
}

.landing--cosmos .coin-strip { gap: 16px; padding-bottom: 4px; }
.landing--cosmos .coin-strip__item {
  width: 120px;
  border-radius: var(--radius-card);
  border: 0;
  background: var(--paper);
  box-shadow: none;
  padding: 20px 12px;
}
.landing--cosmos .coin-strip__item strong { color: var(--carbon); }
.landing--cosmos .coin-strip__item span { color: #666; }
.landing--cosmos .coin-strip__item:hover { background: var(--lavender); }

.landing--cosmos .landing__faq {
  max-width: 840px;
  margin: 0 auto;
}
.landing--cosmos .landing__faq.faq3 {
  max-width: 840px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 28px;
}
.landing--cosmos .faq3__tabs {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 6px 32px;
  width: 100%;
  position: static;
}
.landing--cosmos .faq3__tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  height: auto;
  margin: 0;
  padding: 0 0 8px;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  background: none;
  color: var(--stone);
  font-family: var(--display);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
  text-align: center;
  cursor: pointer;
}
.landing--cosmos .faq3__tab:hover {
  color: #fff;
  background: none;
}
.landing--cosmos .faq3__tab.is-on {
  background: none;
  color: var(--mint);
  border-bottom-color: var(--mint);
}

.landing--cosmos #how.quotes {
  padding-left: 0;
  padding-right: 0;
  overflow: hidden;
}
.landing--cosmos #how.quotes .landing__section-head {
  max-width: none;
  padding-left: max(6vw, calc((100% - 1200px) / 2));
  padding-right: max(6vw, calc((100% - 1200px) / 2));
}
.landing--cosmos #how.quotes .landing__section-head h2 {
  white-space: nowrap;
  margin-bottom: 0;
}
.landing--cosmos .quotes-marquee {
  position: relative;
  display: flex;
  overflow: hidden;
  width: 100%;
  margin-top: 8px;
  padding: 8px 0;
}
.landing--cosmos .quotes-marquee__track {
  display: flex;
  flex-shrink: 0;
  gap: var(--gap, 1rem);
  width: max-content;
  animation: quotes-marquee-right var(--duration, 200s) linear infinite;
}
.landing--cosmos .quotes-marquee:hover .quotes-marquee__track {
  animation-play-state: paused;
}
.landing--cosmos .quotes-card {
  flex: 0 0 320px;
  width: 320px;
  max-width: 320px;
  padding: 20px 22px;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: var(--paper);
  color: var(--carbon);
  box-shadow: none;
  text-align: left;
}
.landing--cosmos .quotes-card__who {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}
.landing--cosmos .quotes-card__ava {
  position: relative;
  width: 48px;
  height: 48px;
  flex-shrink: 0;
}
.landing--cosmos .quotes-card__ava img {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}
.landing--cosmos .quotes-card__ava-fb {
  display: none;
  position: absolute;
  inset: 0;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--signal);
  color: #fff;
  font-family: var(--display);
  font-size: 18px;
  font-weight: 800;
}
.landing--cosmos .quotes-card__meta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  min-width: 0;
}
.landing--cosmos .quotes-card__meta strong {
  font-family: var(--display);
  font-size: 15px;
  font-weight: 700;
  color: var(--carbon);
  letter-spacing: -0.02em;
}
.landing--cosmos .quotes-card p {
  margin: 0;
  font-size: 15px;
  line-height: 1.55;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.88);
}
.landing--cosmos .quotes-marquee__fade {
  pointer-events: none;
  position: absolute;
  top: 0;
  bottom: 0;
  width: min(18%, 160px);
  z-index: 1;
}
.landing--cosmos .quotes-marquee__fade--l {
  left: 0;
  background: linear-gradient(to right, var(--ink), transparent);
}
.landing--cosmos .quotes-marquee__fade--r {
  right: 0;
  background: linear-gradient(to left, var(--ink), transparent);
}
@keyframes quotes-marquee-right {
  from { transform: translateX(calc(-50% - var(--gap, 1rem) / 2)); }
  to { transform: translateX(0); }
}

@media (prefers-reduced-motion: reduce) {
  .landing--cosmos .quotes-marquee__track {
    animation: none;
    transform: none;
  }
}
@media (max-width: 640px) {
  /* Cards are a fixed 320px — on a phone that's basically the whole
     viewport per card, one giant slab drifting by. Shrink them enough that
     ~3 fit in frame at once, so it reads as a moving wall of reviews
     instead of a single oversized card. --gap drives both the flex gap and
     the marquee's translateX keyframe math, so overriding it keeps the
     scroll distance consistent with the new card width. */
  .landing--cosmos .quotes-marquee {
    --gap: 8px !important;
  }
  .landing--cosmos .quotes-card {
    flex-basis: 132px;
    width: 132px;
    max-width: 132px;
    padding: 10px 12px;
  }
  .landing--cosmos .quotes-card__who {
    gap: 7px;
    margin-bottom: 6px;
  }
  .landing--cosmos .quotes-card__ava,
  .landing--cosmos .quotes-card__ava img {
    width: 20px;
    height: 20px;
  }
  .landing--cosmos .quotes-card__meta strong {
    font-size: 11.5px;
  }
  .landing--cosmos .quotes-card p {
    font-size: 10.5px;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
  }
}
.landing--cosmos .faq3__panels {
  min-width: 0;
}
.landing--cosmos .faq3__panel {
  display: none;
  flex-direction: column;
}
.landing--cosmos .faq3__panel.is-on {
  display: flex;
}
.landing--cosmos .landing__faq-item {
  background: none;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  padding: 22px 0;
  margin: 0;
  box-shadow: none;
  cursor: default;
}
.landing--cosmos .faq3 .landing__faq-item:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}
.landing--cosmos .landing__faq-item h3 {
  font-size: 18px;
  font-weight: 700;
  color: #fff;
  margin: 0;
}
.landing--cosmos .landing__faq-item p {
  font-size: 16px;
  color: var(--stone);
  margin: 12px 0 0;
}
.landing--cosmos .faq3 .landing__faq-item__q svg { display: none; }
.landing--cosmos .faq3 .landing__faq-item__a {
  display: block !important;
  margin: 0;
}
@media (max-width: 800px) {
  .landing--cosmos .landing__faq.faq3 {
    gap: 20px;
  }
  .landing--cosmos .faq3__tabs {
    gap: 6px 20px;
  }
}

.landing--cosmos .cta-bleed {
  padding: 113px max(6vw, calc((100% - 1200px) / 2));
}
.landing--cosmos .band-signal {
  background: transparent;
}
.landing--cosmos .landing__cta h2 {
  font-size: clamp(40px, 6vw, 80px);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: var(--bone);
}
.landing--cosmos .band-signal .landing__cta h2 { color: var(--bone); }
.landing--cosmos .band-signal .landing__cta p { color: var(--stone); }
.landing--cosmos .landing__cta {
  border: 0;
  padding: 0;
  text-align: center;
}
.landing--cosmos .landing__cta p { font-size: 18px; color: var(--stone); }

.landing--cosmos .landing__foot2 {
  background: var(--paper);
  color: var(--carbon);
  border-top: 0;
  margin-top: 0;
  position: relative;
  z-index: 3;
  border-top-left-radius: 64px;
  border-top-right-radius: 64px;
  overflow: hidden;
}
.landing--cosmos .landing__foot2-brand .landing__brand { color: var(--carbon); }
.landing--cosmos .landing__foot2-brand .mark {
  background: var(--signal);
  color: #fff;
}
.landing--cosmos .landing__foot2-brand p { color: var(--faint); }
.landing--cosmos .landing__foot2-marks img { opacity: 0.78; }
.landing--cosmos .landing__foot2-col h4 { color: var(--faint); }
.landing--cosmos .landing__foot2-col a { color: var(--carbon); }
.landing--cosmos .landing__foot2-col a:hover { color: var(--signal); }
.landing--cosmos .landing__foot2-desk { border-top-color: var(--line-ghost); }
.landing--cosmos .landing__foot2-desk-col h4 { color: var(--faint); }
.landing--cosmos .landing__foot2-desk-col p,
.landing--cosmos .landing__foot2-desk-col dd { color: var(--carbon); }
.landing--cosmos .landing__foot2-desk-col strong { color: var(--carbon); }
.landing--cosmos .landing__foot2-desk-col dt { color: var(--faint); }
.landing--cosmos .landing__foot2-desk-col a { color: var(--carbon); }
.landing--cosmos .landing__foot2-desk-col a:hover { color: var(--signal); }
.landing--cosmos .landing__foot2-bottom {
  color: var(--faint);
  border-top-color: var(--line-ghost);
}
.landing--cosmos .landing__foot2-notice strong { color: var(--carbon); }

@media (max-width: 900px) {
  .landing--cosmos .mobile-app { grid-template-columns: 1fr; }
  .landing--cosmos .mobile-app__copy { min-height: 0; }
  .landing--cosmos .mobile-app__copy h2 { font-size: clamp(32px, 8.4vw, 44px); }
  .landing--cosmos .mobile-app__copy p { font-size: 16px; margin-bottom: 24px; }
}

/* ── One page sky; color field changes on scroll, no section seams ─── */
.cosmos-sky {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.cosmos-sky__fill {
  position: absolute;
  inset: 0;
}
.cosmos-sky__fill.is-base {
  opacity: 1;
  z-index: 0;
}
.cosmos-sky__fill.is-overlay {
  opacity: 0;
  z-index: 1;
  transition: opacity 0.65s ease;
}
.cosmos-sky__fill.is-overlay.is-on { opacity: 1; }
.cosmos-sky__fill[data-sky-layer="indigo"] {
  background: linear-gradient(124.15deg, var(--ink) 0%, var(--signal-strong) 218.07%);
}
.cosmos-sky__fill[data-sky-layer="violet"] {
  background: var(--signal);
}
.cosmos-sky__fill[data-sky-layer="canvas"] {
  background: var(--ink);
}
.cosmos-sky__fill[data-sky-layer="signal"] {
  background: linear-gradient(154.24deg, color-mix(in srgb, var(--signal) 40%, var(--panel)) 11.19%, var(--signal-strong) 62.38%);
}
.landing--cosmos { position: relative; z-index: 1; }
.landing--cosmos .landing__nav-bar { z-index: 80; }

.cosmos-stars--page { opacity: 0.55; }
.cosmos-orb--page-a {
  width: 520px; height: 520px; left: -140px; top: 18%;
  background: radial-gradient(circle, rgba(108, 116, 209, 0.55), transparent 68%);
}
.cosmos-orb--page-b {
  width: 360px; height: 360px; right: -80px; bottom: 8%;
  background: radial-gradient(circle, rgba(108, 116, 209, 0.18), transparent 70%);
}

/* ── Section atmosphere: stars + orbs on every band ───────────────────── */
.landing--cosmos .landing__hero,
.landing--cosmos .landing__section,
.landing--cosmos .landing__strip,
.landing--cosmos .cta-bleed {
  position: relative;
  overflow: hidden;
}
.landing--cosmos .landing__hero { overflow: visible; }
.landing--cosmos .landing__section.mobile-app { overflow: visible; }
.landing--cosmos .landing__hero > *:not(.cosmos-fx),
.landing--cosmos .landing__section > *:not(.cosmos-prop),
.landing--cosmos .landing__strip > *,
.landing--cosmos .cta-bleed > *:not(.cosmos-prop) {
  position: relative;
  z-index: 1;
}

.landing--cosmos .cosmos-slab--violet::before,
.landing--cosmos .landing__hero::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    radial-gradient(1.5px 1.5px at 7% 16%, var(--signal) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 16% 72%, #fff 50%, transparent 51%),
    radial-gradient(2px 2px at 29% 10%, #fff 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 44% 84%, var(--signal) 50%, transparent 51%),
    radial-gradient(1px 1px at 55% 24%, #fff 50%, transparent 51%),
    radial-gradient(2px 2px at 68% 52%, var(--signal) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 79% 18%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 88% 66%, #fff 50%, transparent 51%),
    radial-gradient(2px 2px at 94% 36%, var(--signal) 50%, transparent 51%),
    radial-gradient(1px 1px at 11% 48%, #fff 50%, transparent 51%);
  opacity: 0.7;
  animation: cosmos-star-twinkle 4.8s ease-in-out infinite;
}
.landing--cosmos .cosmos-slab--violet::after {
  content: "";
  position: absolute;
  width: 420px;
  height: 420px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  filter: blur(8px);
  right: -120px;
  top: -80px;
  background: radial-gradient(circle, rgba(108, 116, 209, 0.28), transparent 70%);
  animation: cosmos-orb-drift 18s ease-in-out infinite;
}

/* ── FX layer: stars, orbs, isometric objects ───────────────────── */
.landing--cosmos .cosmos-fx {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}
.landing--cosmos .cosmos-stars--drift {
  opacity: 0.55;
  background-image:
    radial-gradient(1.5px 1.5px at 22% 30%, var(--signal) 50%, transparent 51%),
    radial-gradient(1px 1px at 48% 58%, #fff 50%, transparent 51%),
    radial-gradient(2px 2px at 71% 41%, var(--signal) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 85% 88%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 5% 52%, #fff 50%, transparent 51%);
  animation: cosmos-star-drift 28s linear infinite;
}
.landing--cosmos .cosmos-orb--p1 {
  width: 340px; height: 340px; left: -90px; top: 8%;
  background: radial-gradient(circle, rgba(108, 116, 209, 0.65), transparent 68%);
}
.landing--cosmos .cosmos-orb--p2 {
  width: 240px; height: 240px; right: -40px; bottom: 6%;
  background: radial-gradient(circle, rgba(108, 116, 209, 0.22), transparent 70%);
}
.landing--cosmos .cosmos-orb--drift { animation: cosmos-orb-drift 16s ease-in-out infinite; }
.landing--cosmos .cosmos-orb--p2 { animation-duration: 21s; animation-delay: -6s; }

.landing--cosmos .spark--float { animation: cosmos-sparkle 2.8s ease-in-out infinite; }
.landing--cosmos .spark--a { left: 6%; top: 14%; animation-delay: 0s; }
.landing--cosmos .spark--b { right: 10%; top: 22%; font-size: 13px; animation-delay: 0.7s; }
.cosmos-sky .spark { z-index: 1; }

.landing--cosmos .spark--1 { animation: cosmos-sparkle 2.6s ease-in-out infinite; }
.landing--cosmos .spark--2 { animation: cosmos-sparkle 3.1s ease-in-out infinite 0.8s; }
.landing--cosmos .spark--3 { animation: cosmos-sparkle 2.4s ease-in-out infinite 1.5s; }

@keyframes cosmos-star-twinkle {
  0%, 100% { opacity: 0.55; }
  50% { opacity: 0.95; }
}
@keyframes cosmos-star-drift {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(-40px, -28px, 0); }
}
@keyframes cosmos-orb-drift {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(36px, -28px) scale(1.08); }
}
@keyframes cosmos-sparkle {
  0%, 100% { opacity: 0.25; transform: scale(0.75) rotate(0deg); }
  50% { opacity: 1; transform: scale(1.28) rotate(18deg); }
}
@keyframes cosmos-iso-float {
  0%, 100% { transform: translateY(0) rotate(-8deg); }
  50% { transform: translateY(-22px) rotate(10deg); }
}

@keyframes cosmos-btn-glow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(108, 116, 209, 0); }
  50% { box-shadow: 0 0 0 7px rgba(108, 116, 209, 0.18); }
}

/* ── Scroll rise + card stagger ──────────────────────────────────────── */
html.cosmos.reveal-ready [data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1), transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
html.cosmos.reveal-ready [data-reveal].is-revealed {
  opacity: 1;
  transform: none;
}
html.cosmos.reveal-ready [data-reveal]:not(.is-revealed) .cosmos-card,
html.cosmos.reveal-ready [data-reveal]:not(.is-revealed) .landing__faq-item,
html.cosmos.reveal-ready [data-reveal]:not(.is-revealed) .coin-strip__item {
  opacity: 0;
  transform: translateY(28px);
}
html.cosmos.reveal-ready [data-reveal].is-revealed .cosmos-card,
html.cosmos.reveal-ready [data-reveal].is-revealed .landing__faq-item {
  animation: cosmos-card-rise 0.72s cubic-bezier(0.22, 1, 0.36, 1) both;
}
html.cosmos.reveal-ready [data-reveal].is-revealed .cosmos-card:nth-child(2),
html.cosmos.reveal-ready [data-reveal].is-revealed .landing__faq-item:nth-child(2) { animation-delay: 0.08s; }
html.cosmos.reveal-ready [data-reveal].is-revealed .cosmos-card:nth-child(3),
html.cosmos.reveal-ready [data-reveal].is-revealed .landing__faq-item:nth-child(3) { animation-delay: 0.16s; }
html.cosmos.reveal-ready [data-reveal].is-revealed .cosmos-card:nth-child(4),
html.cosmos.reveal-ready [data-reveal].is-revealed .landing__faq-item:nth-child(4) { animation-delay: 0.24s; }
html.cosmos.reveal-ready [data-reveal].is-revealed .landing__faq-item:nth-child(5) { animation-delay: 0.32s; }
html.cosmos.reveal-ready [data-reveal].is-revealed .coin-strip__item {
  animation: cosmos-card-rise 0.6s cubic-bezier(0.22, 1, 0.36, 1) both;
}
html.cosmos.reveal-ready [data-reveal].is-revealed .coin-strip__item:nth-child(2) { animation-delay: 0.04s; }
html.cosmos.reveal-ready [data-reveal].is-revealed .coin-strip__item:nth-child(3) { animation-delay: 0.08s; }
html.cosmos.reveal-ready [data-reveal].is-revealed .coin-strip__item:nth-child(4) { animation-delay: 0.12s; }
html.cosmos.reveal-ready [data-reveal].is-revealed .coin-strip__item:nth-child(5) { animation-delay: 0.16s; }
html.cosmos.reveal-ready [data-reveal].is-revealed .coin-strip__item:nth-child(6) { animation-delay: 0.2s; }
html.cosmos.reveal-ready [data-reveal].is-revealed .coin-strip__item:nth-child(7) { animation-delay: 0.24s; }
html.cosmos.reveal-ready [data-reveal].is-revealed .coin-strip__item:nth-child(8) { animation-delay: 0.28s; }
@keyframes cosmos-card-rise {
  from { opacity: 0; transform: translateY(32px); }
  to { opacity: 1; transform: none; }
}

/* ── Inner marketing pages (markets / docs) ──────────────────────────── */
.landing--cosmos .doc-page {
  position: relative;
  z-index: 1;
  max-width: none;
  padding: 100px max(6vw, calc((100% - 760px) / 2)) 80px;
}
.landing--cosmos .doc-page__eyebrow,
.landing--cosmos .doc-page .eyebrow { color: var(--mint); }
.landing--cosmos .doc-page h1 {
  font-family: var(--display);
  font-size: clamp(32px, 5vw, 48px);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: #fff;
}
.landing--cosmos .doc-page > p.lead {
  color: rgba(255, 255, 255, 0.78);
  font-size: 16px;
  line-height: 1.57;
}
.landing--cosmos .doc-page .doc-toc a {
  border-radius: 100px;
  border-color: rgba(255, 255, 255, 0.2);
  color: #fff;
}
.landing--cosmos .doc-page .doc-toc a:hover {
  border-color: var(--mint);
  color: var(--mint);
}
.landing--cosmos .doc-page section {
  background: none;
  border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 0;
  padding: 28px 0;
  margin-bottom: 0;
  box-shadow: none;
}
.landing--cosmos .doc-page section:last-of-type { border-bottom: 0; }
.landing--cosmos .doc-page section:first-of-type { margin-top: 8px; }
.landing--cosmos .doc-page h2 {
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -0.03em;
  color: #fff;
}
.landing--cosmos .doc-page h3 { color: rgba(255,255,255,0.92); font-weight: 700; font-size: 16px; }
.landing--cosmos .doc-page p,
.landing--cosmos .doc-page li { color: rgba(255,255,255,0.65); font-size: 16px; }
.landing--cosmos .doc-page a { color: var(--mint); font-weight: 700; }
.landing--cosmos .doc-page th { color: rgba(255,255,255,0.5); border-bottom-color: rgba(255,255,255,0.08); }
.landing--cosmos .doc-page td { color: rgba(255,255,255,0.85); border-bottom-color: rgba(255,255,255,0.06); }
.landing--cosmos .doc-page__toc {
  background: none;
  border-color: rgba(255,255,255,0.08);
}
.landing--cosmos .doc-page__toc-label { color: rgba(255,255,255,0.4); }
.landing--cosmos .doc-page__toc a { color: rgba(255,255,255,0.6); }
.landing--cosmos .doc-page__toc a:hover { color: var(--mint); }
.landing--cosmos .placeholder-panel {
  background: var(--paper);
  border: 0;
  border-radius: var(--radius-card);
  box-shadow: none;
}
.landing--cosmos .placeholder-panel strong { color: var(--carbon); }
.landing--cosmos .placeholder-panel span { color: #666; }
.landing--cosmos .placeholder-panel__icon {
  background: var(--lavender);
  border: 0;
  color: var(--violet);
  border-radius: 12px;
}

.landing--cosmos .markets-page__toolbar { position: relative; z-index: 1; }
.landing--cosmos .markets-page__search {
  background: var(--paper);
  border: 0;
  border-radius: 100px;
  color: var(--carbon);
}
.landing--cosmos .markets-page__search:focus { outline: 2px solid var(--mint); }
.landing--cosmos .markets-page__count { color: rgba(255, 255, 255, 0.7); }

.landing--cosmos .cosmos-prop {
  position: absolute;
  pointer-events: none;
  z-index: 2;
  max-width: none;
  height: auto;
  animation: cosmos-iso-float 9s ease-in-out infinite;
}
.landing--cosmos .cta-bleed .cosmos-prop--cloud-3 { width: 108px; right: 7%; top: 16%; animation-duration: 12s; }

@media (max-width: 900px) {
  .landing--cosmos .cta-bleed .cosmos-prop { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .landing--cosmos .landing__hero-phone,
  .landing--cosmos .btn--primary,
  .landing--cosmos .spark,
  .landing--cosmos .cosmos-iso,
  .landing--cosmos .cosmos-prop,
  .landing--cosmos .cosmos-orb,
  .landing--cosmos .cosmos-stars,
  .landing--cosmos .cosmos-sky__fill,
  .landing--cosmos .cosmos-slab--violet::before,
  .landing--cosmos .cosmos-slab--violet::after,
  .landing--cosmos::before,
  .landing--cosmos .landing__hero::before,
  .landing--cosmos .swap-orbit,
  .landing--cosmos .swap-orbit__slot .swap-coin {
    animation: none !important;
  }
  .landing--cosmos .swap-orbit__slot .swap-coin {
    transform: translate(-50%, -50%) rotate(calc(-1 * var(--a)));
  }
  .cosmos-sky__fill { transition: none; }
}

/* ── Auth (login / register) ─────────────────────────────────────────── */
.landing--cosmos .auth {
  position: relative;
  z-index: 1;
  background: transparent;
}
.landing--auth {
  min-height: 100dvh;
  overflow: hidden;
  background: transparent;
}
.landing--cosmos .auth--split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  align-items: stretch;
  justify-content: stretch;
  position: relative;
  margin: 16px;
  padding: 0;
  max-width: none;
  width: auto;
  min-height: calc(100dvh - 32px);
  overflow: hidden;
  border-radius: var(--radius-card);
  background: rgba(22, 20, 74, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 40px 100px -30px rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(28px);
  -webkit-backdrop-filter: blur(28px);
  color: var(--bone);
  container-type: size;
}
.landing--cosmos .auth__jade {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  width: 100%;
  height: 100%;
  container-type: size;
  pointer-events: none;
  border-radius: inherit;
}
.landing--cosmos .auth__jade-wash {
  position: absolute;
  inset: -0.8cqmin;
  filter: blur(3cqmin);
  opacity: 0.55;
  background-image:
    radial-gradient(circle at 12% 12%, rgba(108, 116, 209, 0.55) 0%, rgba(108, 116, 209, 0) 42%),
    radial-gradient(circle at 88% 82%, rgba(108, 116, 209, 0.35) 0%, rgba(108, 116, 209, 0) 46%),
    radial-gradient(circle at 70% 15%, rgba(108, 116, 209, 0.18) 0%, rgba(108, 116, 209, 0) 40%);
}
@supports not (width: 1cqmin) {
  .landing--cosmos .auth__jade-wash {
    inset: -8px;
    filter: blur(30px);
  }
}
.landing--cosmos .auth__pane {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px 6vw;
  min-width: 0;
}
.landing--cosmos .auth--split .auth__box {
  width: 100%;
  max-width: 420px;
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.landing--cosmos .auth__brand {
  justify-content: flex-start;
  color: var(--bone);
  text-decoration: none;
  font-weight: 800;
  margin-bottom: 36px;
}
.landing--cosmos .auth__mark {
  background: var(--violet);
  border: 0;
  color: var(--mint);
  border-radius: 12px;
}
.landing--cosmos .auth--split .auth__intro { text-align: left; margin-bottom: 28px; }
.landing--cosmos .auth--split .auth__box h1 {
  font-size: clamp(32px, 4vw, 44px);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.05;
  color: var(--bone);
}
.landing--cosmos .auth--split .auth__box p.hint {
  margin-top: 10px;
  font-size: 15px;
  color: var(--stone);
}
.landing--cosmos .auth--split .auth__field {
  margin-bottom: 18px;
}
.landing--cosmos .auth--split .auth__field label {
  display: block;
  margin-bottom: 8px;
  font-size: 13px;
  font-weight: 700;
  color: var(--faint);
}
.landing--cosmos .auth__glass {
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--radius-card);
  background: rgba(255, 255, 255, 0.06);
  transition: border-color 0.15s ease, background 0.15s ease;
}
.landing--cosmos .auth__glass:focus-within {
  border-color: var(--mint);
  background: rgba(255, 255, 255, 0.1);
}
.landing--cosmos .auth__glass input {
  display: block;
  width: 100%;
  height: 52px;
  padding: 0 18px;
  border: 0;
  border-radius: var(--radius-card);
  background: transparent;
  color: var(--bone);
  font-size: 15px;
  font-weight: 500;
  outline: none;
}
.landing--cosmos .auth__glass input::placeholder {
  color: var(--faint);
}
.landing--cosmos .auth__glass input:-webkit-autofill,
.landing--cosmos .auth__glass input:-webkit-autofill:hover,
.landing--cosmos .auth__glass input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--bone);
  box-shadow: 0 0 0 1000px rgba(28, 25, 96, 0.9) inset;
  transition: background-color 9999s ease-out;
}
.landing--cosmos .auth__pw { position: relative; }
.landing--cosmos .auth__pw input { padding-right: 48px; }
.landing--cosmos .auth__eye {
  position: absolute;
  top: 0;
  right: 4px;
  width: 48px;
  height: 52px;
  border: 0;
  background: transparent;
  color: var(--faint);
  cursor: pointer;
  display: grid;
  place-items: center;
}
.landing--cosmos .auth__eye:hover { color: var(--bone); }
.landing--cosmos .auth--split .auth__row {
  justify-content: flex-end;
  margin: -4px 0 22px;
}
.landing--cosmos .auth__submit {
  height: 52px;
  border-radius: var(--radius-btn);
  background: var(--signal);
  color: #fff;
  font-weight: 700;
  box-shadow: none;
}
.landing--cosmos .auth__submit:hover { background: var(--signal-strong); }
.landing--cosmos .auth--split .auth__form:not(:has(.auth__check)) .auth__submit,
.landing--cosmos .auth__form:has(.auth__check input:checked) .auth__submit {
  opacity: 1;
  pointer-events: auto;
}
.landing--cosmos .auth__form:has(.auth__check):not(:has(.auth__check input:checked)) .auth__submit {
  opacity: 0.45;
  pointer-events: none;
}
.landing--cosmos .auth__row a,
.landing--cosmos .auth__foot a,
.landing--cosmos .auth__check a {
  color: var(--mint);
  font-weight: 700;
}
.landing--cosmos .auth--split .auth__foot {
  text-align: left;
  color: var(--stone);
}
.landing--cosmos .auth--split .auth__check {
  color: var(--stone);
}
.landing--cosmos .auth--split .auth__check input {
  border-color: rgba(255, 255, 255, 0.28);
}
.landing--cosmos .auth--split .auth__error {
  color: #ffb4a8;
  background: rgba(255, 138, 122, 0.14);
  border-color: rgba(255, 138, 122, 0.4);
}
.landing--cosmos .auth__check input:checked {
  background-color: var(--mint);
  border-color: var(--mint);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230d0b33' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>");
}
.landing--cosmos .auth__check input:focus-visible { outline-color: var(--mint); }

.landing--cosmos .auth__stage {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-end;
  margin: 0;
  padding: 48px 6vw 40px;
  border-radius: 0;
  background: transparent;
  overflow: hidden;
  min-height: 100%;
  pointer-events: none;
}
.landing--cosmos .auth__stage::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(108, 116, 209, 0.28), transparent 55%);
  pointer-events: none;
}
.landing--cosmos .auth__stage-scene {
  position: absolute;
  right: 6vw;
  top: 6%;
  width: min(480px, 40vw);
  height: min(340px, 38vh);
}
.landing--cosmos .auth__stage-iso {
  position: absolute;
  width: auto;
  pointer-events: none;
}
.landing--cosmos .auth__stage-iso--chart {
  right: 0;
  top: 0;
  height: 100%;
  opacity: 1;
}
.landing--cosmos .auth__stage-iso--lock {
  left: 0;
  bottom: -6%;
  height: 62%;
  opacity: 1;
}
.landing--cosmos .auth__stage-copy,
.landing--cosmos .auth__stage-notes {
  position: relative;
  z-index: 1;
  width: min(440px, 42vw);
}
.landing--cosmos .auth__stage-kicker {
  margin: 0 0 12px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--mint);
}
.landing--cosmos .auth__stage-copy h2 {
  margin: 0 0 12px;
  font-size: clamp(28px, 3.4vw, 40px);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.05;
  color: var(--bone);
}
.landing--cosmos .auth__stage-copy p {
  margin: 0 0 28px;
  max-width: 420px;
  font-size: 15px;
  line-height: 1.55;
  color: var(--stone);
}
.landing--cosmos .auth__stage-notes {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}
.landing--cosmos .auth__stage-notes li {
  padding: 14px 16px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-card);
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(6px);
}
.landing--cosmos .auth__stage-notes strong {
  display: block;
  margin-bottom: 4px;
  font-size: 13px;
  font-weight: 800;
  color: #fff;
}
.landing--cosmos .auth__stage-notes span {
  display: block;
  font-size: 12px;
  line-height: 1.45;
  color: color-mix(in srgb, var(--indigo) 55%, transparent);
}
@media (max-width: 960px) {
  .landing--cosmos .auth--split { grid-template-columns: 1fr; }
  .landing--cosmos .auth__stage-scene,
  .landing--cosmos .auth__stage-copy,
  .landing--cosmos .auth__stage-notes { display: none; }
  .landing--cosmos .auth__pane { padding: 36px 22px 48px; }
}

/* ── LK / app chrome ─────────────────────────────────────────────────── */
.landing--cosmos-app {
  height: 100%;
  min-height: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.landing--cosmos-app .lk-layout {
  flex: 1;
  min-height: 0;
  background: transparent;
  --shadow-pop: none;
  --card-bg: var(--panel);
  --bg-elevated: var(--panel-2);
  --surface-1: var(--panel);
  --surface-2: var(--panel-2);
  --primary: var(--mint);
  --text-accent: var(--mint);
}
.landing--cosmos-app .lk-layout__content {
  display: flex;
  flex-direction: column;
  padding-bottom: 0;
  background-image: none;
}
.landing--cosmos-app .lk-layout__content > .landing__foot2 {
  margin: auto -20px 0;
  width: auto;
  flex-shrink: 0;
}
@media (max-width: 650px) {
  .landing--cosmos-app .lk-layout__content > .landing__foot2 {
    margin-left: -12px;
    margin-right: -12px;
  }
}
.landing--cosmos-app .landing__nav-bar.is-scrolled {
  background: transparent;
  border-bottom-color: transparent;
  box-shadow: none;
}
.landing--cosmos-app .landing__nav-bar.is-scrolled .landing__nav {
  background: color-mix(in srgb, var(--ink) 78%, transparent);
}

.landing--cosmos .lk-app-tabs .profile-page__tab {
  height: 36px;
  min-height: 36px;
  padding: 0 16px;
  border-radius: var(--radius-btn);
  border: 1px solid var(--line);
  background: transparent;
  color: var(--stone);
  font-weight: 700;
}
.landing--cosmos .lk-app-tabs .profile-page__tab:hover {
  color: #fff;
  background: color-mix(in srgb, var(--mint) 10%, transparent);
  border-color: var(--mint);
}
.landing--cosmos .lk-app-tabs .profile-page__tab--active {
  background: var(--mint);
  border-color: var(--mint);
  color: #fff;
}

.landing--cosmos .pm-lk__card,
.landing--cosmos .pm-lk__orders,
.landing--cosmos .settings-card,
.landing--cosmos .form-panel,
.landing--cosmos .terminal__form-col {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  box-shadow: none;
}
.landing--cosmos .ref-link .btn {
  height: 44px;
}
.landing--cosmos .ref-stats__cell {
  background: var(--panel-2);
  border-color: var(--line);
}
.landing--cosmos .form-panel,
.landing--cosmos .terminal__form-col {
  padding: 22px 22px 18px;
}
.landing--cosmos .pm-lk__btn--withdraw,
.landing--cosmos .lk-layout .btn {
  height: 44px;
  border-radius: var(--radius-btn);
  font-weight: 700;
  box-shadow: none;
}
.landing--cosmos .lk-layout .btn--sm {
  height: 32px;
  padding: 0 14px;
  font-size: 12px;
}
.landing--cosmos .lk-layout .btn--primary {
  background: transparent;
  border: 1.5px solid color-mix(in srgb, var(--bone) 28%, transparent);
  color: var(--bone);
}
.landing--cosmos .lk-layout .btn--primary:hover,
.landing--cosmos .lk-layout .btn--primary:focus-visible {
  background: transparent;
  border-color: transparent;
  color: #fff;
}
.landing--cosmos .pm-lk__btn--withdraw,
.landing--cosmos .pm-lk__cta .pm-lk__btn[data-bw-lk-action="withdraw"] {
  background: var(--signal);
  border-color: var(--signal);
  color: #fff;
}
.landing--cosmos .pm-lk__btn--withdraw:hover,
.landing--cosmos .pm-lk__cta .pm-lk__btn[data-bw-lk-action="withdraw"]:hover {
  background: var(--signal-strong);
  border-color: var(--signal-strong);
  color: #fff;
}
.landing--cosmos .pm-lk__btn--credit {
  color: var(--bone) !important;
  background: transparent !important;
  border: 1px solid var(--line) !important;
}
.landing--cosmos .pm-lk__btn--credit:hover {
  color: #fff !important;
  background: color-mix(in srgb, var(--mint) 12%, transparent) !important;
  border-color: var(--mint) !important;
}
.landing--cosmos .profile-page--pm .pm-lk__range-btn {
  border-radius: var(--radius-btn);
  border: 1px solid var(--line);
}
.landing--cosmos .profile-page--pm .pm-lk__range-btn.is-active {
  background: var(--mint) !important;
  border-color: var(--mint) !important;
  color: #fff !important;
}
.landing--cosmos .filter-tabs a,
.landing--cosmos .deposit-chip,
.landing--cosmos .candle-chart__tf {
  border-radius: var(--radius-btn);
}
.landing--cosmos .filter-tabs a.is-active,
.landing--cosmos .deposit-chip.is-active,
.landing--cosmos .candle-chart__tf-btn.is-active {
  background: var(--mint);
  border-color: var(--mint);
  color: #fff;
}
.landing--cosmos .deposit-step__num {
  background: var(--violet);
  border: 0;
  color: var(--mint);
}
.landing--cosmos .lk-layout input,
.landing--cosmos .lk-layout select,
.landing--cosmos .lk-layout textarea {
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 16px;
  color: #fff;
}
.landing--cosmos .lk-layout input:focus,
.landing--cosmos .lk-layout select:focus,
.landing--cosmos .lk-layout textarea:focus {
  border-color: var(--mint);
  outline: none;
}
.landing--cosmos table.holdings,
.landing--cosmos table.grid {
  background: var(--panel);
  border-radius: var(--radius-card);
  overflow: hidden;
}
.landing--cosmos table.holdings th,
.landing--cosmos table.grid th {
  color: var(--stone);
  border-bottom-color: var(--line);
}
.landing--cosmos .terminal__tabs button.is-active,
.landing--cosmos .pm-lk__subtab.is-active {
  color: var(--mint);
  border-bottom-color: var(--mint);
}
.landing--cosmos .terminal__side-tabs button {
  border-radius: var(--radius-btn);
}
.landing--cosmos .terminal__form-col .btn.is-buy {
  background: var(--mint);
  border-color: var(--mint);
  color: #fff;
  border-radius: 10px;
  transform: none;
}
.landing--cosmos .terminal__form-col .btn.is-buy::before {
  content: none;
}
.landing--cosmos .lk-layout__legal {
  border-top-color: var(--line);
  color: var(--stone);
}
.landing--cosmos .lk-layout__legal a:hover { color: var(--mint); }
.landing--cosmos .notice--ok {
  background: color-mix(in srgb, var(--mint) 14%, transparent);
  color: var(--mint);
  border-color: color-mix(in srgb, var(--mint) 32%, transparent);
  border-radius: 16px;
}
.landing--cosmos .profile-page__title { color: #fff; font-weight: 600; letter-spacing: -0.03em; }
.landing--cosmos .profile-page__hash { color: var(--stone); }
.landing--cosmos .mem-hero__card {
  background: var(--panel-2);
  border-color: var(--line);
}
.landing--cosmos .mem-hero__card.is-on {
  border-color: color-mix(in srgb, var(--mint) 42%, transparent);
  background: linear-gradient(180deg, color-mix(in srgb, var(--mint) 12%, transparent) 0%, var(--panel-2) 72%);
}
.landing--cosmos .mem-hero__card--prem.is-on {
  border-color: rgba(212, 175, 55, 0.46);
  background: linear-gradient(180deg, rgba(212, 175, 55, 0.12) 0%, var(--panel-2) 72%);
}
.landing--cosmos .mem-table th { color: var(--stone); }
.landing--cosmos .mem-table td { border-bottom-color: var(--line); }
.landing--cosmos .mem-table tr.is-you td {
  background: color-mix(in srgb, var(--mint) 12%, transparent);
  color: #fff;
}
.landing--cosmos .mem-list li {
  background: color-mix(in srgb, var(--panel-2) 80%, transparent);
  border-color: var(--line);
}
.landing--cosmos .hmenu__panel,
.landing--cosmos .nb__panel,
.landing--cosmos .lk-user__dropdown {
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  box-shadow: none;
}
.landing--cosmos .mbn {
  background: color-mix(in srgb, var(--ink) 92%, transparent);
  border-top-color: var(--line);
  box-shadow: none;
}
.landing--cosmos .mbn__tab--active { color: var(--mint); }
.landing--cosmos .asset-select.is-ready .asset-select__btn,
.landing--cosmos .quick-row a {
  border-radius: 16px;
  box-shadow: none;
}
.landing--cosmos .asset-select.is-open .asset-select__btn { border-color: var(--mint); }

/* Coin pickers: terminal overlay, not consumer pills */
.landing--cosmos .terminal__pair-menu,
.landing--cosmos .asset-select__menu {
  background: var(--ink);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 8px;
  box-shadow: none;
}
.landing--cosmos .terminal__pair-menu-search,
.landing--cosmos .asset-select__search {
  padding: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.landing--cosmos .terminal__pair-menu-search input,
.landing--cosmos .asset-select__search input {
  width: 100%;
  height: 36px;
  margin: 0;
  padding: 0 12px;
  box-sizing: border-box;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #fff;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.01em;
}
.landing--cosmos .terminal__pair-menu-search input::placeholder,
.landing--cosmos .asset-select__search input::placeholder {
  color: rgba(255, 255, 255, 0.32);
}
.landing--cosmos .terminal__pair-menu-search input:focus,
.landing--cosmos .asset-select__search input:focus {
  outline: none;
  border: 0;
  background: transparent;
}
.landing--cosmos .terminal__pair-menu-list,
.landing--cosmos .asset-select__list {
  padding: 4px 0;
}
.landing--cosmos .terminal__pair-menu-row,
.landing--cosmos .asset-select__row {
  height: 36px;
  padding: 0 12px;
  border-radius: 0;
  box-sizing: border-box;
}
.landing--cosmos .terminal__pair-menu-row:hover,
.landing--cosmos .asset-select__row:hover {
  background: rgba(255, 255, 255, 0.04);
}
.landing--cosmos .terminal__pair-menu-row.is-active,
.landing--cosmos .asset-select__row.is-active {
  background: rgba(108, 116, 209, 0.28);
  box-shadow: inset 2px 0 0 var(--mint);
  color: #fff;
}
.landing--cosmos .terminal__pair-menu-row.is-active .terminal__pair-menu-sym strong,
.landing--cosmos .asset-select__row.is-active .asset-select__sym strong {
  color: #fff;
}
.landing--cosmos .terminal__pair-menu-row.is-active .terminal__pair-menu-name {
  display: block;
}
.landing--cosmos .terminal__pair-menu-sym {
  font-size: 12.5px;
  letter-spacing: 0.02em;
}
.landing--cosmos .terminal__pair-menu-name,
.landing--cosmos .asset-select__name {
  font-size: 11.5px;
  color: rgba(255, 255, 255, 0.38);
}
.landing--cosmos .terminal__pair-menu-row .asset-ico,
.landing--cosmos .asset-select__row .asset-ico {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  overflow: hidden;
}
.landing--cosmos .terminal__pair-menu-row .asset-ico img,
.landing--cosmos .asset-select__row .asset-ico img {
  width: 18px;
  height: 18px;
  object-fit: cover;
}
.landing--cosmos .asset-select__check,
.landing--cosmos .terminal__pair-menu-row > svg {
  display: none;
}

.landing--cosmos .terminal__pair-menu-list,
.landing--cosmos .asset-select__list,
.landing--cosmos .markets-board__list {
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.18) transparent;
}
.landing--cosmos .terminal__pair-menu-list::-webkit-scrollbar,
.landing--cosmos .asset-select__list::-webkit-scrollbar,
.landing--cosmos .markets-board__list::-webkit-scrollbar {
  width: 4px;
}
.landing--cosmos .terminal__pair-menu-list::-webkit-scrollbar-track,
.landing--cosmos .asset-select__list::-webkit-scrollbar-track,
.landing--cosmos .markets-board__list::-webkit-scrollbar-track {
  background: transparent;
}
.landing--cosmos .terminal__pair-menu-list::-webkit-scrollbar-thumb,
.landing--cosmos .asset-select__list::-webkit-scrollbar-thumb,
.landing--cosmos .markets-board__list::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.18);
  border-radius: 4px;
}
.landing--cosmos .terminal__pair-menu-list::-webkit-scrollbar-thumb:hover,
.landing--cosmos .asset-select__list::-webkit-scrollbar-thumb:hover,
.landing--cosmos .markets-board__list::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.32);
}
.landing--cosmos .markets-board__list {
  scrollbar-color: rgba(19, 19, 21), 0.22) transparent;
}
.landing--cosmos .markets-board__list::-webkit-scrollbar-thumb {
  background: rgba(19, 19, 21), 0.22);
}
.landing--cosmos .markets-board__list::-webkit-scrollbar-thumb:hover {
  background: rgba(19, 19, 21), 0.38);
}
.landing--cosmos .quick-row a.is-primary {
  background: var(--mint);
  border-color: var(--mint);
  color: #fff;
}
.landing--cosmos .quick-row a.is-primary svg { color: #fff; }

.landing--cosmos .live-room {
  background: color-mix(in srgb, var(--panel) 88%, transparent);
  border-color: var(--line);
  backdrop-filter: blur(10px);
}
.landing--cosmos .live-room__live span {
  background: var(--mint);
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--mint) 55%, transparent);
}
.landing--cosmos .live-room__composer input {
  background: color-mix(in srgb, var(--panel-2) 70%, transparent);
  border-color: var(--line);
  color: #fff;
}
.landing--cosmos .live-room__composer input:focus {
  border-color: var(--mint);
}
.landing--cosmos .live-msg--me .live-msg__meta strong { color: var(--mint); }
.landing--cosmos .live-msg__quote { border-left-color: var(--mint); }
.landing--cosmos .live-msg__reply:hover { color: var(--mint); }

.landing--cosmos .lk-sup__fab {
  background: var(--mint);
  color: #fff;
  box-shadow: none;
}
.landing--cosmos .lk-sup__fab:hover { background: var(--signal-strong); }

/* ── Help center (public cosmos chrome) ──────────────────────────────── */
.landing--cosmos .help-hc { padding-top: 72px; padding-bottom: 80px; }
.landing--cosmos .help-hc__eyebrow { color: var(--mint); }
.landing--cosmos .help-hc h1 {
  font-family: var(--display);
  font-weight: 600;
  letter-spacing: -0.03em;
  color: #fff;
}
.landing--cosmos .help-hc__lead,
.landing--cosmos .help-hc__dek,
.landing--cosmos .help-hc__meta,
.landing--cosmos .help-hc__empty { color: rgba(255, 255, 255, 0.78); }
.landing--cosmos .help-hc__updated { color: rgba(255, 255, 255, 0.45); }
.landing--cosmos .help-hc__h { color: rgba(255, 255, 255, 0.55); }
.landing--cosmos .help-hc__crumbs { color: rgba(255, 255, 255, 0.45); }
.landing--cosmos .help-hc__crumbs a { color: rgba(255, 255, 255, 0.72); }
.landing--cosmos .help-hc__crumbs a:hover { color: #fff; }
.landing--cosmos .help-hc__search input[type="text"] {
  background: var(--paper);
  border: 0;
  color: var(--carbon);
  border-radius: 100px;
  height: 56px;
  padding-left: 48px;
}
.landing--cosmos .help-hc__search input:focus { box-shadow: 0 0 0 2px var(--mint); }
.landing--cosmos .help-hc__search-ico { color: #888; left: 18px; }
.landing--cosmos .help-hc__search--mini input[type="text"] {
  height: 42px;
  border-radius: 100px;
}
.landing--cosmos .help-hc__suggest {
  background: var(--paper);
  border: 0;
  box-shadow: 0 22px 50px rgba(19, 19, 21), 0.28);
}
.landing--cosmos .help-hc__suggest a { color: var(--carbon); }
.landing--cosmos .help-hc__suggest a:hover { background: var(--panel-2); }
.landing--cosmos .help-hc__suggest em { color: var(--violet); }
.landing--cosmos .help-hc__suggest-empty { color: #666; }
.landing--cosmos .help-hc__cat,
.landing--cosmos .help-hc__popular a {
  background: var(--paper);
  border: 0;
  box-shadow: none;
}
.landing--cosmos .help-hc__paper,
.landing--cosmos .help-hc__toc,
.landing--cosmos .help-hc__aside-card,
.landing--cosmos .help-hc__list a,
.landing--cosmos .help-hc__contact {
  background: transparent;
}
.landing--cosmos .help-hc__cat:hover,
.landing--cosmos .help-hc__list a:hover,
.landing--cosmos .help-hc__popular a:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 28px rgba(19, 19, 21), 0.12);
}
.landing--cosmos .help-hc__cat strong,
.landing--cosmos .help-hc__list strong,
.landing--cosmos .help-hc__popular strong,
.landing--cosmos .help-hc__paper h1,
.landing--cosmos .help-hc__contact h2,
.landing--cosmos .help-hc__body h2 { color: var(--carbon); }
.landing--cosmos .help-hc__cat span,
.landing--cosmos .help-hc__list span,
.landing--cosmos .help-hc__popular span,
.landing--cosmos .help-hc__body p,
.landing--cosmos .help-hc__body li,
.landing--cosmos .help-hc__contact p,
.landing--cosmos .help-hc__aside-card p { color: #666; }
.landing--cosmos .help-hc__cat em,
.landing--cosmos .help-hc__popular a::before { color: #999; }
.landing--cosmos .help-hc__cat-ico {
  background: var(--lavender);
  color: var(--violet);
}
.landing--cosmos .help-hc__kicker { color: var(--violet); }
.landing--cosmos .help-hc__body a { color: var(--violet); }
.landing--cosmos .help-hc__body code {
  background: var(--panel-2);
  color: var(--carbon);
}
.landing--cosmos .help-hc__toc a { color: #666; }
.landing--cosmos .help-hc__toc a:hover { color: var(--violet); }
.landing--cosmos .help-hc__toc h2,
.landing--cosmos .help-hc__aside-card h2 { color: #888; }
.landing--cosmos .help-hc__paper .help-hc__eyebrow { color: var(--violet); }
.landing--cosmos .help-hc__paper .help-hc__dek { color: #666; }
.landing--cosmos .help-hc__paper .help-hc__updated { color: #999; }
.landing--cosmos .help-hc__contact .btn--ghost,
.landing--cosmos .help-hc__aside-card .btn--ghost {
  color: #fff;
}
.landing--cosmos .help-hc__contact .btn--ghost:hover,
.landing--cosmos .help-hc__aside-card .btn--ghost:hover {
  color: #fff;
  background: color-mix(in srgb, var(--mint) 18%, var(--paper));
}
@media (max-width: 720px) {
  /* The mini search field goes full-width on phone (site.css) — its 42px
     compact sizing was for a 280px sidebar box and reads thin stretched
     this wide. This rule otherwise wins over site.css's mobile fix by
     specificity, so it needs the same bump here. */
  .landing--cosmos .help-hc__search--mini input[type="text"] {
    height: 48px;
    border-radius: 14px;
  }
}

/* ── Bigger desktop typography + spacing pass (home page) ──────────────
   User-requested: headings/body text/breathing room across the whole
   landing page should read larger on desktop. Scoped to min-width:901px —
   one pixel above every phone/tablet breakpoint this project uses for the
   landing page (900px) — so none of it reaches mobile. Every rule here
   only raises a size/space already set elsewhere; nothing structural. */
@media (min-width: 901px) {
  .landing--cosmos .landing__hero {
    padding-left: 20px;
    padding-right: 20px;
  }
  .landing--cosmos .landing__hero-inner {
    width: min(1100px, 100%);
    max-width: 1100px;
    padding: 0;
    margin-left: auto;
    margin-right: auto;
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }
  .landing--cosmos .landing__hero-art {
    transform: none;
  }
  .landing--cosmos .landing__hero-phone {
    max-width: 100%;
  }
  .landing--cosmos .landing__hero h1 {
    font-size: clamp(42px, 5.4vw, 92px);
    margin-bottom: 32px;
  }
  .landing--cosmos .landing__hero-lead {
    max-width: 620px;
    padding-top: 26px;
  }
  .landing--cosmos .landing__hero-lead p {
    font-size: 18px;
  }
  .landing--cosmos .landing__hero .btn {
    height: 54px;
    padding: 0 30px;
    font-size: 17px;
  }
  .landing--cosmos .landing__hero .landing__join-go {
    height: auto;
    padding: 0 26px;
    font-size: 14.5px;
  }
  .landing--cosmos .landing__hero-trust {
    font-size: 15px;
  }

  .landing--cosmos .landing__section-head {
    max-width: 820px;
    margin-bottom: 56px;
  }
  .landing--cosmos .landing__section-head h2 {
    font-size: clamp(36px, 5vw, 56px);
  }
  .landing--cosmos .landing__section-head p {
    font-size: 18px;
    line-height: 1.6;
  }

  .landing--cosmos .swap-board__copy h2,
  .landing--cosmos .stake-board__copy h2 {
    font-size: clamp(36px, 4.8vw, 54px);
  }
  .landing--cosmos .swap-board__copy p,
  .landing--cosmos .stake-board__copy p {
    font-size: 18px;
    max-width: 560px;
  }

  .landing--cosmos .mobile-app__copy h2 {
    font-size: clamp(32px, 9.6cqi, 54px);
  }
  .landing--cosmos .mobile-app__copy p {
    font-size: 22px;
  }
  .landing--cosmos .mobile-app__brand {
    font-size: 27px;
  }
  .landing--cosmos .mobile-app__copy p.mobile-app__note {
    font-size: 16px !important;
  }

  .landing--cosmos .quotes-card {
    flex-basis: 360px;
    width: 360px;
    max-width: 360px;
    padding: 24px 26px;
  }
  .landing--cosmos .quotes-card__meta strong {
    font-size: 16.5px;
  }
  .landing--cosmos .quotes-card p {
    font-size: 16px;
  }

  .landing--cosmos .landing__faq-item h3 {
    font-size: 20px;
  }
  .landing--cosmos .landing__faq-item p {
    font-size: 17px;
    margin-top: 14px;
  }
  .landing--cosmos .faq3__tab {
    font-size: 17px;
  }
}

/* ==========================================================================
   LANDING CARD SURFACE  ·  matches the LK card recolor — dark neutral, sits
   close to the page background (--ink), no colour tint. Revert: delete this
   whole block (down to the end marker) and set landing-cosmos.css?v= in
   landing-head.ejs + auth-head.ejs back to app167.
   ========================================================================== */
.landing--cosmos {
  --card: color-mix(in srgb, var(--ink) 62%, var(--panel));
}
.landing--cosmos .markets-board .price-chart,
.landing--cosmos .markets-board__list,
.landing--cosmos .quotes-card,
.landing--cosmos .landing__foot2 {
  background: var(--card);
}
/* ===== end LANDING CARD SURFACE ===== */

/* ==========================================================================
   LANDING HEADER — sized to match the logged-in (LK) header: brand name 21px,
   36px mark/logo, 15px nav links with LK padding, 40px action buttons.
   Revert: delete this whole block (down to the end marker) and set
   landing-cosmos.css?v= in landing-head.ejs + auth-head.ejs back to app167.
   ========================================================================== */
/* Brand — exact values from .lk-app .lk-header__brand-name */
.landing--cosmos .landing__brand { font-size: 21px; font-weight: 700; }
.landing--cosmos .landing__brand-name {
  font-family: var(--font);
  font-size: 21px;
  font-weight: 700;
  letter-spacing: 0.03em;
  line-height: 1;
}
/* Logo mark — from .lk-app .lk-header__logo-mark */
.landing--cosmos .landing__brand-logo,
.landing--cosmos .landing__brand .mark {
  width: 36px;
  height: 36px;
  max-width: 36px;
  border-radius: 10px;
}
.landing--cosmos .landing__brand .mark {
  font-family: var(--display);
  font-weight: 700;
  font-size: 16px;
}
/* Nav links — from .lk-app .lk-nav__a */
.landing--cosmos .landing__nav-links a {
  height: 36px;
  padding: 0 13px;
  display: inline-flex;
  align-items: center;
  font-family: var(--font);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1;
  border-radius: 10px;
}
html.cosmos .landing--cosmos .landing__nav-actions .btn {
  height: 40px;
  padding: 0 18px;
  font-size: 15px;
}
/* Flat single 64px bar, full width, content vertically centered — 1:1 with
   .lk-app .lk-header (no top gap, spans the whole header). */
html.cosmos .landing--cosmos > .landing__nav-bar,
html.cosmos .landing--cosmos .landing__nav-bar.is-scrolled {
  padding: 0 24px;
}
.landing--cosmos .landing__nav {
  width: 100%;
  margin: 0;
}
html.cosmos .landing--cosmos .landing__nav-row {
  min-height: 64px;
  padding: 0;
  align-items: center;
}
/* ===== end LANDING HEADER ===== */