/* ============ MEMEDEPLOY - neon on near-black ============ */
:root {
  /* surfaces: deep, near-black, slightly cool */
  --bg: #050507;
  --bg-raised: #0a0b0d;
  --bg-card: #0b0c0f;
  --bg-inset: #08090b;
  --border: #191b20;
  --border-strong: #24272e;
  --border-hot: rgba(223, 255, 38, 0.32);

  /* neon yellow accent */
  --neon: #dfff26;
  --neon-soft: #eaff7a;
  --neon-dim: #b4d017;
  --neon-deep: #8ea312;
  --neon-shade: #5a6a15; /* rail connectors - deliberately dim */
  --neon-glow: rgba(223, 255, 38, 0.22);
  --ink: #07080a; /* text that sits on neon */

  --text: #f0f2ec;
  --text-dim: #e0e8dd;
  --text-faint: #858b86;

  --success: #6ee787;
  --danger: #ff7a7a;

  --header-h: 68px; /* sticky offset for the preview bar */
  --pv-bar-h: 77px; /* preview bar height, so the step rail can park below it */

  --radius: 14px;
  --radius-sm: 10px;

  /* Inter for running text; Chivo for display, buttons, labels, anything caps */
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-display: "Chivo", "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
}

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

html { scroll-behavior: smooth; }

/* The page scrollbar is drawn by js/scrollbar.js as an overlay. The native one
   is hidden because its gutter appears only on pages long enough to scroll, and
   that made every centred element jump sideways between pages. */
html {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

html::-webkit-scrollbar { width: 0; height: 0; }

.scrollbar {
  position: fixed;
  top: 0;
  right: 3px;
  bottom: 0;
  width: 10px;
  z-index: 60; /* over the header, under modals */
  display: none;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none; /* only the thumb is grabbable, so content stays clickable */
}

.scrollbar.on { display: block; }
.scrollbar.show { opacity: 1; }

.scrollbar-thumb {
  position: absolute;
  top: 0;
  left: 2px;
  width: 6px;
  border-radius: 99px;
  background: #2b2f36;
  pointer-events: auto;
  cursor: default;
  transition: background 0.15s ease, width 0.15s ease;
}

.scrollbar-thumb:hover,
.scrollbar.dragging .scrollbar-thumb {
  background: #3d434c;
}

/* nested scroll areas keep a native bar, thinned to match */
.pos-body,
.panel-overlay,
.pos-tabs {
  scrollbar-width: thin;
  scrollbar-color: #2b2f36 transparent;
}

body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

/* Chivo is reserved for buttons, always set in caps. Inter carries everything else. */
.btn,
.btn-nav {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.07em;
}

/* darker, subtler backdrop glow */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  background:
    radial-gradient(ellipse 65% 40% at 50% -12%, rgba(223, 255, 38, 0.07), transparent 70%),
    radial-gradient(ellipse 45% 35% at 88% 108%, rgba(180, 208, 23, 0.05), transparent 70%);
  pointer-events: none;
  z-index: 0;
}

main, header, footer { position: relative; z-index: 1; }

a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }

.container { max-width: 1120px; margin: 0 auto; padding: 0 24px; }

/* ============ Icons ============ */
.sprite { display: none; }

.icon {
  width: 1.15em;
  height: 1.15em;
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.icon-lg { width: 22px; height: 22px; }
.icon-sm { width: 14px; height: 14px; stroke-width: 2.4; }

/* ============ Header ============ */
/* transparent over the hero; flat black once scrolled - no border either way */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: transparent;
  transition: background 0.25s ease;
}

.site-header.scrolled { background: var(--bg); }

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 68px;
  gap: 24px;
}

/* MEMEDEPLOY: one word, all caps, heavy italic - MEME neon, DEPLOY white.
   The wordmark is a single flex item so .brand's gap can't split it in two. */
.brand {
  display: flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-body);
  font-size: 1.2rem;
  color: var(--text);
}

.brand-word {
  font-weight: 900;
  font-style: italic;
  text-transform: uppercase;
  letter-spacing: -0.015em;
}

.brand-mark {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: var(--neon);
  color: var(--ink);
  display: grid;
  place-items: center;
  box-shadow: 0 0 16px var(--neon-glow);
}

.brand-mark .icon { width: 16px; height: 16px; stroke-width: 2.4; }

.brand em { font-style: italic; color: var(--neon); }

.nav-links { display: flex; gap: 4px; list-style: none; }

.nav-links a {
  padding: 8px 14px;
  border-radius: 8px;
  color: var(--text-dim);
  font-size: 0.92rem;
  transition: color 0.15s, background 0.15s;
}

.nav-links a:hover { color: var(--text); background: var(--bg-card); }
.nav-links a.active { color: var(--neon); }

/* ============ Buttons ============ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  border: none;
  border-radius: 10px;
  padding: 11px 22px;
  font-size: 0.95rem;
  font-weight: 700;
  transition: transform 0.12s, box-shadow 0.15s, background 0.15s, border-color 0.15s;
}

.btn:active { transform: translateY(1px); }

.btn-primary {
  background: var(--neon);
  color: var(--ink);
  box-shadow: 0 4px 24px var(--neon-glow);
}

.btn-primary:hover { background: var(--neon-soft); box-shadow: 0 4px 34px rgba(223, 255, 38, 0.34); }

/* outlined neon button: yellow border, inner glow, continuous shine sweep */
.btn-shine {
  position: relative;
  overflow: hidden;
  background: rgba(223, 255, 38, 0.05);
  color: var(--neon);
  border: 1.5px solid var(--neon);
  box-shadow:
    inset 0 0 16px rgba(223, 255, 38, 0.16),
    inset 0 0 44px rgba(223, 255, 38, 0.07),
    0 0 26px rgba(223, 255, 38, 0.16);
}

.btn-shine:hover {
  background: rgba(223, 255, 38, 0.1);
  box-shadow:
    inset 0 0 20px rgba(223, 255, 38, 0.24),
    inset 0 0 54px rgba(223, 255, 38, 0.1),
    0 0 38px rgba(223, 255, 38, 0.26);
}

/* the traveling streak: enters fully off the left edge, exits fully off the
   right edge, rests hidden, repeats - never parked half-visible */
.btn-shine::after {
  content: "";
  position: absolute;
  top: -30%;
  bottom: -30%;
  left: 0;
  width: 55%;
  /* soft multi-stop falloff + blur reads as a reflection, not a lit band */
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(234, 255, 122, 0.05) 28%,
    rgba(240, 255, 160, 0.14) 50%,
    rgba(234, 255, 122, 0.05) 72%,
    transparent 100%
  );
  filter: blur(7px);
  transform: translateX(-140%) skewX(-18deg);
  animation: btn-shine-sweep 3.6s ease-in-out infinite;
  pointer-events: none;
}

@keyframes btn-shine-sweep {
  0% { transform: translateX(-140%) skewX(-18deg); }
  /* 55%-wide streak: the button is ~1.8 streak-widths, so 240% clears it fully */
  45%, 100% { transform: translateX(240%) skewX(-18deg); }
}

@media (prefers-reduced-motion: reduce) {
  .btn-shine::after { animation: none; display: none; }
}

.btn-ghost {
  background: var(--bg-card);
  color: var(--text);
  border: 1px solid var(--border-strong);
}

.btn-ghost:hover { border-color: var(--border-hot); color: var(--neon); }

/* header call to action, in the slot the wallet button used to hold - it keeps
   the nav links centred as well as giving the page one obvious next move */
.btn-nav {
  background: var(--neon);
  border: 1px solid var(--neon);
  color: var(--ink);
  border-radius: 10px;
  padding: 9px 16px;
  font-size: 0.9rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  box-shadow: 0 2px 18px var(--neon-glow);
  transition: background 0.15s, border-color 0.15s, box-shadow 0.15s;
}

.btn-nav:hover { background: var(--neon-soft); border-color: var(--neon-soft); }

.btn-lg { padding: 15px 30px; font-size: 1.02rem; border-radius: 12px; }
.btn-block { width: 100%; }
.btn[disabled] { opacity: 0.5; cursor: not-allowed; }

/* ============ Hero ============ */
.hero {
  position: relative;
  /* full first screen: viewport minus the 68px sticky header */
  min-height: calc(100vh - 68px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 24px 0 40px;
  text-align: center;
  overflow: hidden;
}

.hero-inner { position: relative; z-index: 2; }

/* dotted backdrop, faded toward the edges */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(223, 255, 38, 0.14) 1px, transparent 1px);
  background-size: 26px 26px;
  -webkit-mask-image: radial-gradient(ellipse 75% 65% at 50% 40%, #000 25%, transparent 75%);
  mask-image: radial-gradient(ellipse 75% 65% at 50% 40%, #000 25%, transparent 75%);
  pointer-events: none;
}

/* ---- floating token tiles (in the how-it-works band) ---- */
.how-section {
  position: relative;
  /* clip sideways so sliding tiles never widen the page, but let them
     spill upward toward the stats band (clip allows a visible cross-axis) */
  overflow-x: clip;
  overflow-y: visible;
}

.how-section > .container { position: relative; z-index: 2; }

.token-field {
  position: absolute;
  left: 0;
  right: 0;
  top: -260px;   /* reach up into the stats band */
  bottom: -30px;
  pointer-events: none;
  z-index: 1;
  /* deep perspective: enough to read as depth, too weak to foreshorten
     the artwork - tiles tilt without looking stretched */
  perspective: 2600px;
}

.token-tile {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--s);
  height: var(--s);
  /* --px is driven by scroll: starts pushed toward the nearest side, eases to 0 */
  transform: translateX(var(--px, 0));
  opacity: var(--op, 0.9);
  will-change: transform, opacity;
}

.tile-float,
.token-tile img,
.token-tile b {
  border-radius: 24%;
}

.token-tile img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: 1px solid var(--border-strong);
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.6), 0 0 0 4px rgba(223, 255, 38, 0.04);
  animation: tile-float var(--d) ease-in-out var(--dl) infinite;
  /* 3D tilt: two axes of rotation plus a z-roll, varied per tile */
  transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) rotateZ(var(--r, 0deg));
  opacity: 0.9;
}

/* ticker-letter fallback if a coin image can't load */
.token-tile b {
  display: none;
  width: 100%;
  height: 100%;
  place-items: center;
  font-family: var(--font-display);
  font-size: calc(var(--s) * 0.42);
  color: var(--neon);
  background: var(--bg-card);
  border: 1px solid var(--border-hot);
  animation: tile-float var(--d) ease-in-out var(--dl) infinite;
  transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) rotateZ(var(--r, 0deg));
}

.token-tile.fail img { display: none; }
.token-tile.fail b { display: grid; }

@keyframes tile-float {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -12px; }
}

@media (prefers-reduced-motion: reduce) {
  .token-tile img, .token-tile b { animation: none; }
}

/* below this the side margins are too tight for the larger tiles */
@media (max-width: 1023px) {
  .token-field { display: none; }
}


.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: var(--bg-card);
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  padding: 6px 16px;
  font-size: 0.82rem;
  color: var(--text-dim);
  margin-bottom: 28px;
}

.pulse {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--neon);
  animation: pulse 1.8s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 0 var(--neon-glow); }
  50% { box-shadow: 0 0 0 6px transparent; }
}

.hero h1 {
  font-size: clamp(2.4rem, 5.5vw, 4rem);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.12;
  max-width: 760px;
  margin: 0 auto 20px;
}

.neon-text {
  color: var(--neon);
  font-style: italic;
  text-shadow: 0 0 34px var(--neon-glow);
}

.hero p {
  color: var(--text-faint);
  font-size: 1rem;
  max-width: 560px;
  margin: 0 auto 36px;
}

.hero-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* ============ Stats ============ */
.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 18px;
  /* sits immediately below the full-height hero - never breaks the fold */
  margin-top: 0;
  padding: 40px 0 0;
}

.stat-card {
  position: relative;
  z-index: 3; /* tiles reach up into this band and must pass behind the cards */
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 26px 22px;
  text-align: center;
}

.stat-value {
  font-size: 2rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--neon);
}

.stat-label { color: var(--text-dim); font-size: 0.9rem; margin-top: 4px; }

/* ============ Sections ============ */
.section { padding: 104px 0; }
.section-head { text-align: center; max-width: 620px; margin: 0 auto 56px; }

.section-head h2 {
  font-size: clamp(1.7rem, 3.5vw, 2.4rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  margin-bottom: 12px;
}

.section-head p { color: var(--text-dim); font-size: 1.02rem; }

.eyebrow {
  color: var(--neon-dim);
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  margin-bottom: 10px;
}

/* ============ Feature grid ============ */
.features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 18px;
}

.feature-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px 24px;
  transition: border-color 0.2s, transform 0.2s;
}

.feature-card:hover { border-color: var(--border-hot); transform: translateY(-3px); }

.feature-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: rgba(223, 255, 38, 0.08);
  border: 1px solid rgba(223, 255, 38, 0.18);
  color: var(--neon);
  display: grid;
  place-items: center;
  margin-bottom: 18px;
}

.feature-card h3 { font-size: 1.06rem; margin-bottom: 8px; }
.feature-card p { color: var(--text-dim); font-size: 0.92rem; }

/* ============ Steps ============ */
.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
}

.step-card {
  position: relative;
  background: linear-gradient(165deg, #121419, var(--bg-card) 55%);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 28px 26px 30px;
  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

/* chevron connector sitting in the gap, pointing to the next card */
.step-card:not(:last-child)::before {
  content: "";
  position: absolute;
  top: 50%;
  /* 100% is the padding box, so add the 1px right border + half the 40px gap */
  left: calc(100% + 21px);
  width: 11px;
  height: 11px;
  border-top: 2px solid var(--neon);
  border-right: 2px solid var(--neon);
  transform: translate(-50%, -50%) rotate(45deg);
  opacity: 0.5;
}

/* neon hairline along the top edge */
.step-card::after {
  content: "";
  position: absolute;
  top: -1px;
  left: 26px;
  right: 26px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(223, 255, 38, 0.5), transparent);
}

.step-card:hover {
  transform: translateY(-6px);
  border-color: var(--border-hot);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.55), 0 0 44px rgba(223, 255, 38, 0.08);
}

.step-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}

.step-icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 13px;
  background: rgba(223, 255, 38, 0.08);
  border: 1px solid rgba(223, 255, 38, 0.2);
  color: var(--neon);
}

.step-icon .icon { width: 20px; height: 20px; }

/* ghosted numeral, sits back behind the content */
.step-num {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 2rem;
  line-height: 1;
  letter-spacing: -0.02em;
  color: rgba(223, 255, 38, 0.18);
}

.step-card h3 { font-size: 1.08rem; margin-bottom: 8px; }
.step-card p { color: var(--text-dim); font-size: 0.9rem; }

@media (max-width: 880px) {
  .steps { grid-template-columns: 1fr; gap: 18px; }
  .step-card:not(:last-child)::before { display: none; }
}

/* ============ Showcase (phone + stat bubbles + create CTA) ============ */
/* One rounded container rather than a full-bleed band. The phone stands
   upright and flush with the bottom edge; the bubbles cross over it. */
/* same shell as the CTA band: gradient ground, neon hairline, inner bloom */
.showcase {
  position: relative;
  background: linear-gradient(150deg, var(--bg-raised), #0d0f0a);
  border: 1.5px solid rgba(223, 255, 38, 0.55);
  border-radius: 30px;
  padding: 56px 44px 48px;
  overflow: hidden;
  box-shadow:
    inset 0 0 34px rgba(223, 255, 38, 0.1),
    inset 0 0 110px rgba(223, 255, 38, 0.05),
    0 0 60px rgba(223, 255, 38, 0.1);
}

/* faint grid lines, fading toward the centre */
.showcase::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(223, 255, 38, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(223, 255, 38, 0.05) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(ellipse 80% 90% at 50% 50%, transparent 30%, #000 100%);
  mask-image: radial-gradient(ellipse 80% 90% at 50% 50%, transparent 30%, #000 100%);
  pointer-events: none;
}

.showcase-head {
  position: relative;
  text-align: center;
  max-width: 900px; /* wide enough for the heading to hold one line */
  margin: 0 auto;
}

.eyebrow-chip {
  display: inline-block;
  background: var(--bg-card);
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  padding: 6px 15px;
  margin-bottom: 18px;
  color: var(--neon-dim);
  font-size: 0.74rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.16em;
}

.showcase-head h2 {
  font-size: clamp(1.7rem, 3.4vw, 2.5rem);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.15;
}

.showcase-head p {
  color: var(--text-dim);
  font-size: 0.88rem;
  max-width: 580px; /* the sub stays narrow even though the heading is wide */
  margin: 14px auto 0;
}

.showcase-grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(230px, 0.82fr) minmax(320px, 1.3fr);
  gap: 0 24px;
  align-items: center; /* cards sit centred against the phone, not on its baseline */
  margin-top: 44px;
}

.showcase-phone { display: flex; justify-content: center; }

/* device render on a transparent background, so the shadow is a drop-shadow
   filter that follows the phone's silhouette rather than a box-shadow */
.phone-shot {
  display: block;
  max-height: 520px;
  max-width: 100%;
  /* the PNG carries a sliver of empty space under the device, which lands it
     visually on the container edge without clipping the bezel */
  filter:
    drop-shadow(0 34px 58px rgba(0, 0, 0, 0.72))
    drop-shadow(0 0 48px rgba(223, 255, 38, 0.09));
}

.showcase-cards {
  position: relative;
  display: grid;
  gap: 22px;
}

/* two equal cards sitting square above the CTA card, edges aligned with it */
.bubbles {
  display: flex;
  gap: 22px;
}

.bubble {
  flex: 1 1 0;
  min-width: 0;
  border-radius: 22px;
  padding: 26px 20px;
  display: grid;
  place-content: center;
  justify-items: center;
  text-align: center;
}

.bubble b {
  display: block;
  font-size: clamp(2.4rem, 4.2vw, 3.3rem);
  font-weight: 800;
  letter-spacing: -0.045em;
  line-height: 1;
}

.bubble span {
  display: block;
  margin-top: 10px;
  font-size: 0.88rem;
  font-weight: 600;
}

.bubble.neon {
  background: var(--neon);
  color: var(--ink);
  box-shadow: 0 24px 54px rgba(0, 0, 0, 0.6), 0 0 46px var(--neon-glow);
}

.bubble.neon span { color: rgba(7, 8, 10, 0.68); }

.bubble.dark {
  background: var(--bg-card);
  border: 1px solid var(--border-strong);
  box-shadow: 0 24px 54px rgba(0, 0, 0, 0.6);
}

.bubble.dark b { color: var(--neon); }
.bubble.dark span { color: var(--text-dim); }

.showcase-cta {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 22px;
  padding: 30px 28px;
}

.showcase-cta h3 {
  font-size: clamp(1.2rem, 2.2vw, 1.55rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.2;
}

.showcase-cta p {
  color: var(--text-dim);
  font-size: 0.98rem;
  margin: 12px 0 24px;
}

@media (max-width: 900px) {
  .showcase { padding: 44px 22px 40px; }
  .showcase-grid { grid-template-columns: 1fr; gap: 32px; margin-top: 32px; }
  .showcase-phone { order: 2; }
  .showcase-cards { order: 1; }
  .phone-shot { max-height: 430px; }
}

@media (max-width: 560px) {
  .bubbles { flex-direction: column; }
}

/* ============ CTA band ============ */
.cta-band {
  position: relative;
  background: linear-gradient(150deg, var(--bg-raised), #0d0f0a);
  border: 1.5px solid rgba(223, 255, 38, 0.55);
  border-radius: 22px;
  padding: 56px 32px;
  text-align: center;
  margin: 24px 0 72px;
  overflow: hidden;
  /* inner glow bloom hugging the border, plus a soft outer halo */
  box-shadow:
    inset 0 0 34px rgba(223, 255, 38, 0.1),
    inset 0 0 110px rgba(223, 255, 38, 0.05),
    0 0 60px rgba(223, 255, 38, 0.1);
}

/* faint grid lines inside the band, fading toward the center */
.cta-band::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(223, 255, 38, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(223, 255, 38, 0.05) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(ellipse 80% 90% at 50% 50%, transparent 30%, #000 100%);
  mask-image: radial-gradient(ellipse 80% 90% at 50% 50%, transparent 30%, #000 100%);
  pointer-events: none;
}

.cta-band > * { position: relative; }

.cta-band h2 {
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  margin-bottom: 10px;
}

.cta-band p { color: var(--text-dim); margin-bottom: 28px; }

/* ============ Footer ============ */
.site-footer {
  border-top: 1px solid var(--border);
  padding: 36px 0;
  color: var(--text-faint);
  font-size: 0.87rem;
}

.footer-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.footer-links { display: flex; gap: 20px; }
.footer-links a:hover { color: var(--neon); }

/* ============ Forge page ============ */
.forge-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  padding: 40px 0 80px;
}

.page-title { padding: 48px 0 0; }

.page-title h1 {
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.12; /* the body's 1.6 leaves ~12px of empty leading under a 42px heading */
}

/* one line on a desktop width, so the sentence is not broken mid-thought */
.page-title p {
  color: var(--text-faint);
  margin-top: 6px;
  max-width: 780px;
  font-size: 0.9rem;
}

/* ---- wizard: vertical step rail on the left, one pane at a time on the right ---- */
.wizard {
  display: grid;
  grid-template-columns: 196px minmax(0, 1fr); /* fits "Advanced settings" on one line */
  gap: 30px;
  align-items: start;
}

/* the rail follows the page, parking under the header and the preview bar */
.step-nav {
  position: sticky;
  top: calc(var(--header-h) + var(--pv-bar-h) + 20px);
}

.step-list { list-style: none; }

/* No card, no border: a bubble and a label. The bubble is exactly as tall as the
   label block, so its top lines up with the top of the step name and its bottom
   with the bottom of the hint - hence the explicit line heights below, which make
   the label a known 36px (20 + 16) rather than something the font decides. */
.step-item {
  --marker: 36px;
  position: relative;
  display: flex;
  flex-direction: column;
}

/* the connector runs from the bubble's bottom edge to the item's bottom edge, which
   is where the next bubble starts, so it meets both circles with no gap */
.step-item:not(:last-child)::after {
  content: "";
  position: absolute;
  left: calc(var(--marker) / 2 - 0.5px);
  top: var(--marker);
  bottom: 0;
  width: 1px;
  background-image: repeating-linear-gradient(
    to bottom,
    var(--neon-shade) 0 3px,
    transparent 3px 7px
  );
}

.step-btn {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  width: 100%;
  padding: 0 0 44px; /* the run the connector spans */
  text-align: left;
  background: none;
  border: none;
  border-radius: 8px;
  color: inherit;
  font-family: inherit;
  cursor: pointer;
}

.step-item:last-child .step-btn { padding-bottom: 0; }

.step-marker {
  position: relative;
  width: var(--marker);
  height: var(--marker);
  flex-shrink: 0;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1.5px solid var(--border-strong);
  background: var(--bg-inset);
  font-family: var(--font-display);
  font-size: 0.85rem;
  font-weight: 800;
  transition: background 0.18s, border-color 0.18s, color 0.18s, box-shadow 0.18s;
}

/* place-items centres the text box, but digits sit high inside it, so the
   numeral is nudged down onto the circle's optical centre */
.step-index {
  line-height: 1;
  transform: translateY(0.4px);
  color: var(--neon);
  transition: opacity 0.15s, color 0.18s;
}

.step-marker .step-tick {
  position: absolute;
  width: 16px;
  height: 16px;
  stroke-width: 3;
  opacity: 0;
}

.step-label { display: flex; flex-direction: column; min-width: 0; }
.step-name { font-size: 0.92rem; font-weight: 600; line-height: 20px; color: var(--text-dim); }
.step-hint { font-size: 0.75rem; line-height: 16px; color: var(--text-faint); }

.step-btn:hover .step-name { color: var(--text); }
.step-btn:hover .step-marker { border-color: var(--border-hot); }

.step-btn:focus-visible {
  outline: 2px solid var(--border-hot);
  outline-offset: 3px;
}

/* current step: the bubble fills, nothing else changes */
.step-item.is-active .step-marker {
  background: var(--neon);
  border-color: var(--neon);
  box-shadow: 0 0 18px rgba(223, 255, 38, 0.28);
}

.step-item.is-active .step-index { color: var(--ink); }
.step-item.is-active .step-name { color: var(--text); }

/* cleared step: the numeral swaps for a tick */
.step-item.is-done .step-marker {
  background: rgba(223, 255, 38, 0.1);
  border-color: var(--neon);
  color: var(--neon);
}

.step-item.is-done .step-index { opacity: 0; }
.step-item.is-done .step-tick { opacity: 1; }
.step-item.is-done .step-name { color: var(--text-dim); }

/* the in-flow line element is only used by the horizontal tracker below 900px */
.step-line { display: none; }

/* only the current pane is in the document flow */
.step-pane { display: none; }
.step-pane.is-active { display: block; }

.step-actions {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 20px;
}

.step-actions.end { justify-content: flex-end; }
.step-actions .btn { display: inline-flex; align-items: center; gap: 9px; }
.step-actions .btn .icon { width: 16px; height: 16px; }

.panel {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px;
}

.panel + .panel { margin-top: 20px; }
.panel h2 { font-size: 1.04rem; font-weight: 700; margin-bottom: 4px; }
.panel-sub { color: var(--text-faint); font-size: 0.85rem; margin-bottom: 22px; }

.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.field { display: flex; flex-direction: column; gap: 7px; }
.field.full { grid-column: 1 / -1; }

.field label { font-size: 0.85rem; font-weight: 600; color: var(--text-dim); }
.field label .req { color: var(--neon); }

.field input,
.field textarea,
.field select {
  background: var(--bg-inset);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  color: var(--text);
  font-family: inherit;
  font-size: 0.95rem;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.field input::placeholder, .field textarea::placeholder { color: var(--text-faint); }

.field input:focus,
.field textarea:focus,
.field select:focus {
  outline: none;
  border-color: var(--neon);
  box-shadow: 0 0 0 3px rgba(223, 255, 38, 0.13);
}

.field textarea { resize: vertical; min-height: 88px; }

/* no spinner arrows on numeric fields */
.field input[type="number"]::-webkit-outer-spin-button,
.field input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.field input[type="number"] { -moz-appearance: textfield; appearance: textfield; }
.hint { font-size: 0.77rem; color: var(--text-faint); }

/* logo (square) beside description, sharing one row */
.logo-desc-row {
  grid-column: 1 / -1; /* span the whole form grid, not a single column */
  display: grid;
  grid-template-columns: 172px 1fr;
  gap: 18px;
  align-items: stretch;
}

.logo-desc-row .field { height: 100%; }

/* textarea grows to match the square's height */
.desc-field textarea { flex: 1; min-height: 0; }

/* dropzone: a square that the logo fills edge to edge */
.dropzone {
  aspect-ratio: 1 / 1;
  display: grid;
  place-items: center;
  border: 1.5px dashed var(--border-strong);
  border-radius: var(--radius-sm);
  padding: 14px;
  text-align: center;
  color: var(--text-faint);
  font-size: 0.78rem;
  line-height: 1.4;
  cursor: pointer;
  overflow: hidden;
  transition: border-color 0.15s, background 0.15s, color 0.15s;
  background: var(--bg-inset);
}

.dropzone:hover { border-color: var(--neon); color: var(--text-dim); }
.dropzone.dragging { border-color: var(--neon); background: rgba(223, 255, 38, 0.05); color: var(--text); }

.dropzone .icon { width: 20px; height: 20px; margin-bottom: 6px; }
.dz-hint { display: block; }

/* once an image is set it fills the square, flush inside the rounded border */
.dropzone.has-image {
  padding: 0;
  border-style: solid;
  border-color: var(--border-hot);
}

.dropzone.has-image #dropzoneText {
  display: block;
  width: 100%;
  height: 100%;
}

.dropzone img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}

/* hint that the square is still clickable once filled */
.dropzone.has-image::after {
  content: "Change";
  position: absolute;
  inset: auto 0 0 0;
  padding: 6px;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text);
  background: rgba(5, 5, 7, 0.82);
  opacity: 0;
  transition: opacity 0.15s;
}

.dropzone.has-image { position: relative; }
.dropzone.has-image:hover::after { opacity: 1; }

@media (max-width: 620px) {
  .logo-desc-row { grid-template-columns: 1fr; }
  .logo-field .dropzone { max-width: 172px; }
}

/* switch */
.switch { position: relative; width: 44px; height: 25px; flex-shrink: 0; }
.switch input { opacity: 0; width: 0; height: 0; }

.slider {
  position: absolute;
  inset: 0;
  background: var(--border-strong);
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.2s;
}

.slider::before {
  content: "";
  position: absolute;
  width: 19px;
  height: 19px;
  left: 3px;
  top: 3px;
  border-radius: 50%;
  background: var(--text-faint);
  transition: transform 0.2s, background 0.2s;
}

.switch input:checked + .slider { background: var(--neon); }
.switch input:checked + .slider::before { transform: translateX(19px); background: var(--ink); }

/* launch button closes the review, sized to its label, with the charge below.
   The gap matches the panel's 28px padding, so the total sits midway between the
   button and the container's bottom edge. */
.launch-block {
  margin-top: 26px;
  display: grid;
  justify-items: center;
  gap: 28px;
}

.launch-total { font-size: 0.85rem; color: var(--text-dim); }
.launch-total b { color: var(--neon); font-weight: 700; font-variant-numeric: tabular-nums; }

/* ---- advanced settings modules ----
   One card per module: a head that is always shown and a body the switch reveals.
   The body is driven purely by :has(), so nothing toggles a class for it. */
.adv-stack { display: grid; gap: 14px; }

.adv-module {
  background: var(--bg-inset);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px 20px;
  transition: border-color 0.18s, background 0.18s, box-shadow 0.18s;
}

.adv-module:not(.is-lit):hover { border-color: var(--border-strong); }

/* the pool is the one module that is always on, so it is the one that glows */
.adv-module.is-lit {
  border-color: var(--neon);
  background: rgba(223, 255, 38, 0.045);
  box-shadow: inset 0 0 26px rgba(223, 255, 38, 0.06);
}

.adv-head { display: flex; align-items: center; gap: 14px; }

.adv-icon {
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  border-radius: 11px;
  background: rgba(223, 255, 38, 0.08);
  border: 1px solid rgba(223, 255, 38, 0.18);
  color: var(--neon);
}

.adv-icon .icon { width: 19px; height: 19px; }

.adv-tag {
  flex-shrink: 0;
  padding: 4px 11px;
  border-radius: 999px;
  font-family: var(--font-display);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--neon);
  background: rgba(223, 255, 38, 0.1);
  border: 1px solid rgba(223, 255, 38, 0.24);
}

.adv-tag.muted {
  color: var(--text-faint);
  background: rgba(255, 255, 255, 0.03);
  border-color: var(--border-strong);
}

.adv-title { flex: 1; min-width: 0; }
.adv-title h3 { font-size: 1rem; font-weight: 700; line-height: 1.3; }
.adv-title p { margin-top: 2px; color: var(--text-faint); font-size: 0.84rem; line-height: 1.45; }

.adv-body {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--border);
}

/* switched off reads as unavailable rather than absent, so the settings stay legible */
.adv-module:has(.adv-toggle:not(:checked)) .adv-body { opacity: 0.45; }
.adv-body input:disabled { cursor: not-allowed; }

.adv-note { margin-bottom: 12px; color: var(--text-faint); font-size: 0.84rem; }

/* ---- liquidity presets ----
   Five fixed amounts and a free-text box, all in one row. The box is the last
   option rather than a separate control, so only one of them ever reads as set. */
.preset-row { display: flex; flex-wrap: wrap; gap: 10px; }

.preset {
  padding: 11px 18px;
  border-radius: var(--radius-sm);
  background: var(--bg-card);
  border: 1px solid var(--border-strong);
  color: var(--text-dim);
  font-family: var(--font-display);
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}

.preset:hover { border-color: var(--neon); color: var(--neon); }
.preset.is-on { background: var(--neon); border-color: var(--neon); color: var(--ink); }
.preset:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(223, 255, 38, 0.25); }

.preset-custom {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 14px 0 16px;
  border-radius: var(--radius-sm);
  background: var(--bg-card);
  border: 1px solid var(--border-strong);
  transition: border-color 0.15s;
}

.preset-custom:focus-within { border-color: var(--neon); }

.preset-custom input {
  width: 92px;
  padding: 11px 0;
  background: none;
  border: none;
  outline: none;
  color: var(--text);
  font-family: var(--font-display);
  font-size: 0.9rem;
  font-weight: 700;
}

.preset-custom input::placeholder { color: var(--text-faint); font-weight: 600; }
.preset-unit { color: var(--text-faint); font-size: 0.82rem; font-weight: 600; }

/* the three links fit one row, on a tighter gap than the two-column form grid */
.social-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

/* ---- paired min/max inputs ---- */
.pair-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.pair { display: flex; flex-direction: column; gap: 7px; }

/* a hint that introduces the control under it rather than trailing one */
.hint.above { margin-bottom: 2px; }

/* ---- review ----
   Two read-only lists. Same row shape as the payment breakdown, on the inset
   surface the advanced modules use, so the two steps look related.

   They sit side by side to keep the step short enough to read without scrolling.
   Both lists carry four rows, so the columns come out level - minmax(0, 1fr) keeps
   a long value inside its column instead of widening the track. */
.review-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
  align-items: start;
}

/* Side by side, a right-aligned Edit ends up nearer the next column's heading than
   its own, so each button sits against the heading it belongs to instead. */
.review-grid .review-head { justify-content: flex-start; }

/* one column has no room for a label and a value on the same row, and with one
   column there is nothing for a right-aligned Edit to be confused with */
@media (max-width: 620px) {
  .review-grid { grid-template-columns: 1fr; }
  .review-grid .review-head { justify-content: space-between; }
}

.review-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.review-head h3 {
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.review-list {
  list-style: none;
  background: var(--bg-inset);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 4px 18px;
}

.review-list li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 18px;
  padding: 11px 0;
  font-size: 0.87rem;
}

.review-list li + li { border-top: 1px solid var(--border); }
.review-list li span:first-child { flex-shrink: 0; color: var(--text-faint); }

.review-list li span:last-child {
  color: var(--text);
  font-weight: 600;
  text-align: right;
  overflow-wrap: anywhere;
}

/* a state, not a figure - chipped so the eye does not read it as another SOL amount */
.review-list li span.review-tag {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-display);
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-faint);
  background: var(--bg-card);
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  padding: 4px 10px;
}

.review-list li.pay-total { border-top-color: var(--border-strong); }
.review-list li.pay-total span:first-child { color: var(--text); font-weight: 700; }
.review-list li.pay-total span:last-child { color: var(--neon); font-variant-numeric: tabular-nums; }

/* ============ Summary sidebar ============ */
.preview-panel {
  background: linear-gradient(160deg, #0e1009, var(--bg-card));
  border-color: var(--border-hot);
}

/* The bar sticks just under the site header and scrolls over the panels. Its
   background is opaque so the content passing beneath stays hidden. */
.pv-bar {
  position: sticky;
  top: var(--header-h);
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 14px 20px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.6);
}

.pv-bar .pv-logo { width: 46px; height: 46px; border-radius: 13px; font-size: 1.15rem; }

.pv-bar .pv-supply-row {
  border-top: none;
  padding: 0;
  gap: 8px;
  flex-shrink: 0;
}

.pv-bar .pv-badges { margin-left: auto; justify-content: flex-end; }

@media (max-width: 820px) {
  .pv-bar { flex-wrap: wrap; gap: 12px 16px; }
  .pv-bar .pv-badges { margin-left: 0; width: 100%; justify-content: flex-start; }
}

.pv-logo {
  width: 54px;
  height: 54px;
  border-radius: 15px; /* square with rounded corners, matching the upload square */
  flex-shrink: 0;
  display: grid;
  place-items: center;
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--ink);
  background: var(--neon);
  background-size: cover;
  background-position: center;
  box-shadow: 0 0 22px var(--neon-glow);
}

.pv-logo.has-image { color: transparent; }
.pv-id { min-width: 0; }

.pv-name {
  font-weight: 700;
  font-size: 1.04rem;
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pv-name.placeholder { color: var(--text-faint); }

.pv-symbol {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  color: var(--neon);
}

.pv-supply-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 0.87rem;
  color: var(--text-dim);
  padding: 12px 0;
  border-top: 1px solid var(--border);
}

.pv-supply { font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }
.pv-badges { display: flex; flex-wrap: wrap; gap: 6px; }

.pv-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.71rem;
  font-weight: 700;
  color: var(--neon);
  background: rgba(223, 255, 38, 0.08);
  border: 1px solid rgba(223, 255, 38, 0.2);
  border-radius: 999px;
  padding: 3px 9px;
}

.pv-badge .icon { width: 11px; height: 11px; stroke-width: 2.6; }

.pv-badge.muted {
  color: var(--text-faint);
  background: transparent;
  border-color: var(--border);
  font-weight: 400;
}

/* add-ons sit next to the trust badges, dimmer so the two groups stay distinct */
.pv-badge.addon {
  color: var(--text-dim);
  background: rgba(240, 242, 236, 0.05);
  border-color: var(--border-strong);
  font-weight: 600;
}


.summary-note {
  font-size: 0.77rem;
  color: var(--text-faint);
  margin-top: 14px;
  line-height: 1.5;
}

.badge-net {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--neon-dim);
  background: rgba(223, 255, 38, 0.06);
  border: 1px solid rgba(223, 255, 38, 0.18);
  border-radius: 6px;
  padding: 3px 8px;
  margin-bottom: 12px;
}

/* ============ Liquidity page ============ */
.liq-body { padding: 28px 0 90px; }

/* shared empty / loading / error states */
.liq-state { text-align: center; padding: 64px 32px; }
.liq-state h2 { font-size: 1.2rem; margin-bottom: 8px; }
.liq-state p { color: var(--text-dim); font-size: 0.94rem; max-width: 440px; margin: 0 auto; }

.liq-state-icon {
  width: 58px;
  height: 58px;
  border-radius: 16px;
  background: rgba(223, 255, 38, 0.08);
  border: 1px solid rgba(223, 255, 38, 0.2);
  color: var(--neon);
  display: grid;
  place-items: center;
  margin: 0 auto 20px;
}

.liq-state-icon .icon { width: 26px; height: 26px; }

.liq-state-icon.error {
  background: rgba(255, 122, 122, 0.09);
  border-color: rgba(255, 122, 122, 0.3);
  color: var(--danger);
}


/* ============ Modal ============ */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.74);
  backdrop-filter: blur(6px);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 100;
  padding: 24px;
}

.modal-overlay.open { display: flex; }

.modal {
  background: var(--bg-raised);
  border: 1px solid var(--border-strong);
  border-radius: 18px;
  width: 100%;
  max-width: 440px;
  padding: 30px;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.8);
}

.modal h3 { font-size: 1.18rem; margin-bottom: 6px; }
.modal .modal-sub { color: var(--text-dim); font-size: 0.88rem; margin-bottom: 22px; }

/* ---- payment instructions modal ---- */
.pay-modal {
  max-width: 520px; /* enough that the receiving address does not wrap */
  max-height: calc(100vh - 48px);
  overflow-y: auto;
}

.pay-modal h3 span { color: var(--neon); }
.pay-field + .pay-field { margin-top: 14px; }

.pay-label {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 7px;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.11em;
  color: var(--text-faint);
}

.pay-label em {
  font-style: normal;
  font-size: 0.68rem;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0.02em;
  border: 1px solid var(--border-strong);
  border-radius: 5px;
  padding: 1px 6px;
}

.pay-box {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--bg-inset);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 11px 11px 11px 14px;
}

.pay-amount {
  font-family: var(--font-display);
  font-size: 1.45rem;
  font-weight: 800;
  line-height: 1;
  color: var(--neon);
  font-variant-numeric: tabular-nums;
}

.pay-unit { font-size: 0.8rem; letter-spacing: 0.06em; color: var(--text-dim); }

/* SOL reads as a unit of the number, so it sits on the number's baseline. A flex
   baseline group is anchored to cross-start, though, which pushed the pair up out of
   the box's centre - so the two share their own baseline row, and that row is the
   flex item the box centres. */
.pay-amount-group {
  display: flex;
  align-items: baseline;
  gap: 7px;
  transform: translateY(1.5px); /* centres the digits' ink, not their line boxes */
}

/* the one string that has to be copied exactly, so it carries the weight in the box */
.pay-address {
  flex: 1;
  min-width: 0;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1.5;
  color: var(--text);
  word-break: break-all;
}

.pay-copy {
  margin-left: auto;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--bg-card);
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  padding: 7px 10px;
  color: var(--text-dim);
  font-family: var(--font-display);
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}

.pay-copy:hover { border-color: var(--neon); color: var(--neon); }
.pay-copy .icon { width: 14px; height: 14px; }

.pay-breakdown {
  list-style: none;
  margin-top: 20px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}

.pay-breakdown li {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 4px 0;
  font-size: 0.84rem;
  color: var(--text-dim);
}

.pay-breakdown li span:last-child { font-variant-numeric: tabular-nums; }

.pay-breakdown .pay-total {
  margin-top: 8px;
  padding-top: 11px;
  border-top: 1px solid var(--border);
  color: var(--text);
  font-weight: 700;
}

.pay-breakdown .pay-total span:last-child { color: var(--neon); }


.mono {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  color: var(--text-dim);
}

/* live-network warning colour on the summary badge */
.badge-net.live {
  color: #ffb4b4;
  background: rgba(255, 122, 122, 0.09);
  border-color: rgba(255, 122, 122, 0.35);
}

.text-center { text-align: center; }
.mt-16 { margin-top: 16px; }

/* toast */
.toast {
  position: fixed;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%) translateY(80px);
  background: var(--bg-raised);
  border: 1px solid var(--border-hot);
  border-radius: 12px;
  padding: 13px 22px;
  font-size: 0.9rem;
  z-index: 200;
  opacity: 0;
  transition: transform 0.25s, opacity 0.25s;
  max-width: 90vw;
}

.toast.show { transform: translateX(-50%) translateY(0); opacity: 1; }

/* ============ Responsive ============ */
@media (max-width: 900px) {
  .forge-layout { grid-template-columns: 1fr; }
  .nav-links { display: none; }
}

/* the rail turns into a horizontal tracker above the panes */
@media (max-width: 900px) {
  .wizard { grid-template-columns: 1fr; }
  .step-nav { position: static; }
  .step-list { display: flex; align-items: center; }
  .step-item { flex-direction: row; align-items: center; }
  .step-item:not(:last-child)::after { content: none; } /* the row uses .step-line instead */
  .step-btn { width: auto; padding: 0; gap: 10px; align-items: center; }
  .step-hint { display: none; }
  .step-name { white-space: nowrap; } /* names must not wrap, or the row loses its line */
  .step-label { padding-top: 0; }

  /* runs up to the next bubble's edge; the margin only clears the label behind it */
  .step-line {
    display: block;
    flex: 0 0 22px;
    height: 1px;
    margin-left: 10px;
    background-image: repeating-linear-gradient(
      to right,
      var(--neon-shade) 0 3px,
      transparent 3px 7px
    );
  }
}

@media (max-width: 560px) {
  .pair-row { grid-template-columns: 1fr; }
  .social-row { grid-template-columns: 1fr; }
  .preset-row .preset { flex: 1 0 auto; }
  .preset-custom { flex: 1 0 100%; }
  .preset-custom input { width: 100%; }
}

@media (max-width: 560px) {
  .form-grid { grid-template-columns: 1fr; }
  .hero { padding: 64px 0 48px; }
  .step-item:not(.is-active) .step-name { display: none; }
  .step-item:not(.is-active) .step-btn { padding: 9px; }
}

/* ============ confirming a payment ============ */

/* Sits under the payment breakdown: paste the signature, the launch continues. */
.pay-verify {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--border);
}

.verify-row { display: flex; gap: 10px; }

.verify-input {
  flex: 1;
  min-width: 0;
  background: var(--bg-inset);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  color: var(--text);
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 0.78rem;
  transition: border-color 0.15s;
}

.verify-input::placeholder { font-family: var(--font-body); color: var(--text-faint); }
.verify-input:focus { outline: none; border-color: var(--border-hot); }
.verify-input:disabled { opacity: 0.55; }

/* The signature was refused. Red on the field plus the reason under it, because
   the field alone does not say what to do about it. */
.verify-input.is-invalid { border-color: var(--danger); }
.verify-input.is-invalid:focus { border-color: var(--danger); }

.verify-error {
  margin-top: 10px;
  color: var(--danger);
  font-size: 0.8rem;
  line-height: 1.45;
}

.verify-btn {
  flex-shrink: 0;
  padding: 12px 20px;
  font-size: 0.76rem;
  box-shadow: none; /* it sits flush against the input, so no glow to blur the edge */
}

/* ---- the confirmation that replaces the payment details ---- */
.pay-success { text-align: center; }
.pay-success h3 { margin-bottom: 6px; }
.pay-success .modal-sub { margin-bottom: 4px; }
.pay-success .modal-sub b { color: var(--neon); }
.pay-success .pay-breakdown { text-align: left; }
.pay-success .btn .icon { width: 17px; height: 17px; }

.pay-success-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  margin-bottom: 16px;
  border-radius: 50%;
  background: var(--neon);
  color: var(--ink);
  box-shadow: 0 0 0 8px rgba(223, 255, 38, 0.1);
}

.pay-success-mark .icon { width: 26px; height: 26px; stroke-width: 3; }

/* ---- panel heading with an action on the right ---- */
.panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 22px;
}

.panel-head .panel-sub { margin-bottom: 0; }

.btn-sm {
  flex-shrink: 0;
  padding: 9px 16px;
  font-size: 0.74rem;
  border-radius: 9px;
}

.btn-sm .icon { width: 15px; height: 15px; }

@media (max-width: 560px) {
  .panel-head { flex-direction: column; align-items: stretch; }
}