/* ==========================================================================
   XDNA Presale — DNA Protocol
   Design implemented from XDNA-Presale.dc.html.
   All copy is the live content of xdna.dnaprotocol.org.
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. Fonts — self-hosted Inter
   xdna.dnaprotocol.org sets everything in Inter, so this does too. One
   latin-subset variable file covers weights 400-900 (SIL Open Font License).
   Addresses use the system monospace stack, exactly as the live site does.
   -------------------------------------------------------------------------- */

@font-face {
  font-family: "Inter";
  src: url("../fonts/inter-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Metric-matched fallback so the swap costs no layout shift. */
@font-face {
  font-family: "Inter Fallback";
  src: local("Helvetica Neue"), local("Helvetica"), local("Arial"), local("Liberation Sans");
  size-adjust: 107%;
  font-display: swap;
}

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */

:root {
  /* Surfaces */
  --bg: #0b111e;
  --bg-deep: #070c16;
  --bg-inset: rgba(8, 14, 26, 0.85);
  --bg-inset-soft: rgba(8, 14, 26, 0.6);
  --panel: linear-gradient(180deg, rgba(17, 26, 44, 0.7), rgba(11, 17, 30, 0.8));
  --panel-solid: rgba(14, 22, 37, 0.6);

  /* Ink */
  --ink: #ffffff;
  --ink-2: #d1d5db;
  --muted: #d1d5db;
  --dim: #9ca3af;
  /* Live site's gray-500 (#6b7280) lands at 3.9:1 on this navy — below AA for
     the 10–12px captions it is used on, so lifted to the nearest tone that
     clears 4.5:1 while staying in the same gray family. */
  --faint: #7d8695;
  --fainter: #626c7d;

  /* Accent */
  --blue: #2094f3;
  --cyan: #00d4ff;
  --cyan-br: #33ffff;
  --cyan-soft: #33bbff;
  /* Green appears in exactly three places on the live site: the "Public" and
     "1 XRP = 30 XDNA" values, and the progress-bar fill. Nowhere else. */
  --teal-lt: #4ade80;
  --live-dot: #ef4444;   /* the STAGE 1 LIVE dot is red on the live site */
  --track-bg: #374151;   /* gray-700 progress track */
  --on-accent: #06101f;

  /* Hairlines */
  --hair: rgba(0, 212, 255, 0.1);
  --hair-2: rgba(0, 212, 255, 0.13);
  --hair-3: rgba(0, 212, 255, 0.16);
  --hair-4: rgba(0, 212, 255, 0.2);

  /* Single-family treatments, each taken from the live site verbatim:
     buttons are SOLID primary blue with white text, progress readouts are the
     blue family (bar, gauges, scroll hairline), headline/logo gradients stay
     inside the cyan family. */
  --grad-accent: #2094f3;
  --grad-brand: linear-gradient(135deg, #00d4ff, #1affff, #00aaff);
  --grad-text: linear-gradient(135deg, #00d4ff, #33ffff, #33bbff 60%, #00f7ff);
  --grad-bar: linear-gradient(90deg, #00d4ff, #2094f3, #00d4ff);

  /* Type */
  --sans: "Inter", "Inter Fallback", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Elevation: tier-1 rows are border-only, tier-2 feature cards float,
     tier-3 hero surfaces carry the deep shadow. One shared top keyline. */
  --keyline: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  --elev-2: 0 12px 40px rgba(0, 0, 0, 0.35);
  --elev-3: 0 30px 80px rgba(0, 0, 0, 0.5);

  /* Layout */
  --maxw: 1200px;
  --gut: 24px;
  --section-y: 96px;
}

/* --------------------------------------------------------------------------
   2. Base
   -------------------------------------------------------------------------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 24px;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
  color: var(--cyan-br);
  text-decoration: none;
}

a:hover {
  color: #66ffff;
}

::selection {
  background: rgba(0, 212, 255, 0.35);
}

/* Form controls opt out of font inheritance by default, so the payment page's
   primary "Copy Wallet Address" CTA and both trustline copy buttons were
   rendering in Arial at the UA default size while everything around them was
   Inter. */
button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

img,
svg,
canvas {
  display: block;
  max-width: 100%;
}

:focus-visible {
  outline: 2px solid var(--cyan-br);
  outline-offset: 3px;
  border-radius: 6px;
}

.page {
  min-height: 100vh;
  background: var(--bg);
  overflow-x: clip;
}

.shell {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: var(--section-y) var(--gut);
}

html {
  scrollbar-color: #1c2a44 var(--bg);
}

::-webkit-scrollbar {
  width: 13px;
}

::-webkit-scrollbar-track {
  background: var(--bg);
}

::-webkit-scrollbar-thumb {
  background: #1c2a44;
  border-radius: 8px;
  border: 3px solid var(--bg);
}

::-webkit-scrollbar-thumb:hover {
  background: #27395c;
}

/* --------------------------------------------------------------------------
   3. Animations
   -------------------------------------------------------------------------- */

@keyframes pulse {
  0%,
  100% { opacity: 1; }
  50% { opacity: 0.3; }
}

@keyframes shimmer {
  from { transform: translateX(-130%); }
  to { transform: translateX(340%); }
}

@keyframes spinC {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

@keyframes marquee {
  to { transform: translateX(-50%); }
}

/* --------------------------------------------------------------------------
   4. Buttons
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: var(--grad-accent);
  color: #fff;
  font-weight: 700;
  font-size: 15.5px;
  padding: 15px 28px;
  border: 0;
  border-radius: 12px;
  cursor: pointer;
  box-shadow: 0 0 34px rgba(32, 148, 243, 0.45);
  transition: box-shadow 0.2s, transform 0.2s;
}

.btn:hover {
  color: #fff;
  background: #3ba2f5;
  transform: translateY(-2px);
  box-shadow: 0 0 56px rgba(32, 148, 243, 0.7);
}

.btn--sm {
  font-size: 13.5px;
  padding: 10px 18px;
  border-radius: 10px;
  box-shadow: 0 0 26px rgba(32, 148, 243, 0.4);
}

.btn--sm:hover {
  transform: translateY(-1px);
  box-shadow: 0 0 42px rgba(32, 148, 243, 0.65);
}

.btn--block {
  display: flex;
  width: 100%;
  gap: 9px;
  padding: 15px;
  box-shadow: 0 0 30px rgba(32, 148, 243, 0.4);
}

.btn--block:hover {
  transform: translateY(-1px);
  box-shadow: 0 0 50px rgba(32, 148, 243, 0.65);
}

.btn--xl {
  position: relative;
  overflow: hidden;
  font-size: 16.5px;
  padding: 17px 36px;
  border-radius: 13px;
  box-shadow: 0 0 44px rgba(32, 148, 243, 0.5);
}

.btn--xl:hover {
  box-shadow: 0 0 70px rgba(32, 148, 243, 0.75);
}

.btn__sheen {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 40%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.35), transparent);
  animation: shimmer 3s infinite;
  pointer-events: none;
}

.btn__label {
  position: relative;
}

.btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border: 1px solid rgba(0, 212, 255, 0.3);
  color: var(--ink-2);
  font-weight: 600;
  font-size: 15.5px;
  padding: 15px 26px;
  border-radius: 12px;
  background: rgba(15, 25, 42, 0.5);
  transition: border-color 0.2s, color 0.2s;
}

.btn-ghost:hover {
  border-color: rgba(0, 212, 255, 0.7);
  color: #fff;
}

/* --------------------------------------------------------------------------
   5. Nav
   -------------------------------------------------------------------------- */

.nav {
  position: relative;
  z-index: 60;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  background: linear-gradient(180deg, #192d46, #122239);
  border-bottom: 1px solid rgba(51, 187, 255, 0.22);
}

.nav__inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 7px var(--gut);
  display: flex;
  align-items: center;
  gap: 28px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--ink);
}

.brand:hover {
  color: var(--ink);
}

.brand__logo {
  /* Bigger presence, same 92px header: the logo gained exactly what the
     bar padding gave up (64+28 = 78+14). */
  height: 78px;
  width: auto;
  display: block;
}

.footer .brand__logo {
  height: 54px;
}

@media (max-width: 720px) {
  .brand__logo {
    height: 56px;
  }

  .nav__inner {
    padding-top: 10px;
    padding-bottom: 10px;
  }
}

.brand__mark {
  width: 30px;
  height: 30px;
  border-radius: 9px;
  background: var(--grad-brand);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  color: var(--on-accent);
  font-size: 15px;
  flex-shrink: 0;
  box-shadow: 0 0 22px rgba(0, 212, 255, 0.45);
}

.brand__name {
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.nav__links {
  display: flex;
  gap: 22px;
  margin-left: auto;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.nav__link {
  font-size: 14.5px;
  font-weight: 500;
  color: var(--muted);
  transition: color 0.2s;
}

.nav__link:hover {
  color: var(--ink);
}

/* --- Mobile menu ----------------------------------------------------------
   A <details>/<summary> disclosure: opens and closes natively with zero
   JavaScript, and is keyboard accessible for free. Hidden above 900px. */

.nav__menu {
  display: none;
  position: relative;
}

.nav__menu > summary {
  list-style: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 11px;
  border: 1px solid var(--hair-4);
  background: rgba(0, 212, 255, 0.07);
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
}

.nav__menu > summary::-webkit-details-marker {
  display: none;
}

.nav__menu > summary:hover {
  border-color: var(--cyan);
  background: rgba(0, 212, 255, 0.14);
}

.nav__menu-ic {
  width: 18px;
  height: 14px;
  position: relative;
}

.nav__menu-ic span {
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  border-radius: 2px;
  background: var(--cyan-br);
  transition: transform 0.25s, opacity 0.2s;
}

.nav__menu-ic span:nth-child(1) { top: 0; }
.nav__menu-ic span:nth-child(2) { top: 6px; }
.nav__menu-ic span:nth-child(3) { top: 12px; }

.nav__menu[open] .nav__menu-ic span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav__menu[open] .nav__menu-ic span:nth-child(2) { opacity: 0; }
.nav__menu[open] .nav__menu-ic span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.nav__sheet {
  list-style: none;
  margin: 0;
  position: absolute;
  right: 0;
  top: calc(100% + 12px);
  min-width: 224px;
  max-height: calc(100vh - 112px);
  max-height: calc(100dvh - 112px);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px;
  border-radius: 15px;
  background: #122239;
  border: 1px solid var(--hair-4);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6), 0 0 40px rgba(0, 212, 255, 0.1);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.nav__sheet li {
  display: block;
}

.nav__sheet a {
  display: block;
  padding: 12px 14px;
  border-radius: 10px;
  font-size: 14.5px;
  color: var(--muted);
  transition: background 0.2s, color 0.2s;
}

.nav__sheet a:hover {
  background: rgba(0, 212, 255, 0.1);
  color: var(--ink);
}

/* --------------------------------------------------------------------------
   6. Hero
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid rgba(0, 212, 255, 0.08);
}

.hero__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0.9;
  pointer-events: none;
}

.hero__glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(900px 480px at 18% 8%, rgba(32, 148, 243, 0.16), transparent 65%),
    radial-gradient(760px 520px at 88% 92%, rgba(0, 212, 255, 0.1), transparent 65%);
}

.hero__inner {
  position: relative;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 76px var(--gut) 88px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: 56px;
  align-items: center;
}

.badge-live {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  border-radius: 999px;
  padding: 8px 16px;
  background: rgba(17, 24, 39, 0.5);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--ink);
}

.badge-live__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--live-dot);
  box-shadow: 0 0 10px rgba(239, 68, 68, 0.7);
  animation: pulse 1.6s infinite;
  flex-shrink: 0;
}

.hero__title {
  text-wrap: balance;
  margin: 22px 0 0;
  font-size: clamp(40px, 5.4vw, 66px);
  line-height: 1.04;
  letter-spacing: -0.02em;
  font-weight: 900;
}

.grad-text {
  background: linear-gradient(110deg, #00d4ff, #33ffff, #33bbff, #00f7ff, #00d4ff);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: rateflow 8s linear infinite;
}

.hero__lede {
  margin: 20px 0 0;
  max-width: 54ch;
  color: var(--muted);
  font-size: 17px;
  line-height: 1.65;
  text-wrap: pretty;
}

.hero__actions {
  display: flex;
  gap: 14px;
  margin-top: 30px;
  flex-wrap: wrap;
}

.chip-row {
  display: flex;
  gap: 10px;
  margin-top: 30px;
  flex-wrap: wrap;
}

.chip {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--dim);
  border: 1px solid var(--hair-3);
  border-radius: 999px;
  padding: 7px 13px;
}

/* --- Presale card --------------------------------------------------------- */

.widget {
  background: linear-gradient(180deg, rgba(17, 26, 44, 0.92), rgba(11, 17, 30, 0.94));
  border: 1px solid rgba(0, 212, 255, 0.2);
  border-radius: 22px;
  padding: 26px 26px 24px;
  box-shadow: var(--elev-3), var(--keyline), 0 0 60px rgba(32, 148, 243, 0.12) inset;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.widget__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.widget__head-label {
  font-family: var(--sans);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--dim);
}

.rate-pill {
  font-size: 14px;
  font-weight: 700;
  color: #4ade80;
}

.raise {
  margin-top: 18px;
}

.raise__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}

.raise__label {
  font-size: 13px;
  color: var(--muted);
  white-space: nowrap;
}

.raise__label strong {
  color: var(--ink);
  font-weight: 600;
}

.raise__pct {
  font-family: var(--sans);
  font-size: 12px;
  color: var(--dim);
  white-space: nowrap;
}

/* --- Progress as a DNA strand -------------------------------------------
   The sale's headline metric drawn as a coil. Depth is what sells it: each
   strand is split into runs that pass in FRONT of or BEHIND the other, and
   the back runs are thinner and dimmer. Without that separation the shape
   flattens into a zigzag. Colours are the live site's progress green; the
   percentage stays exposed via role="progressbar" on the wrapper. */

.dnabar {
  position: relative;
  margin-top: 12px;
  width: 100%;
  /* Height follows width: this is the conduit's SVG at its own 720:110, not a
     strip stretched to fit. Uniform scale is what keeps the official mark, the
     ellipse pocket and the real drop-shadow filters valid inside the SVG. */
  height: auto;
  max-height: 96px;
}

.dnabar path,
.dnabar line {
  vector-effect: non-scaling-stroke;
}

.dnabar__svg {
  width: 100%;
  height: auto;
  max-height: 96px;   /* same ceiling .trust__conduit svg uses */
  display: block;
  overflow: visible;
}

.dnabar__svg path {
  fill: none;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}

/* --- unsold remainder --- */
.dnabar__track-back { stroke: var(--track-bg); stroke-width: 1.1; opacity: 0.5; }
.dnabar__track-front { stroke: var(--track-bg); stroke-width: 2.4; }
.dnabar__track .dnabar__rungs line {
  stroke: var(--track-bg);
  stroke-width: 1.2;
  vector-effect: non-scaling-stroke;
}

/* --- sold portion ---
   The green layer is not a private styling of this bar: it is the conduit
   component itself (tlc-* classes, section 19) clipped to the sold
   percentage, over the grey track. One stroke language, three instances. */

/* Fill sweeps to the real value on entry; drawn state is the default so
   no-JS and reduced motion both land correct. */
.dnabar__clip { transition: width 1.5s cubic-bezier(0.22, 1, 0.36, 1); }
.dnabar.is-pending .dnabar__clip { width: 0; }


/* --- Spec lists (Token Details / Presale Info) ---------------------------- */

.spec {
  margin-top: 20px;
  border-top: 1px solid rgba(0, 212, 255, 0.12);
  padding-top: 18px;
}

.spec__h {
  margin: 0;
  font-family: var(--sans);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--cyan);
  text-transform: uppercase;
}

.spec__list {
  margin: 11px 0 0;
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.spec__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 14px;
  background: var(--bg-inset-soft);
  border: 1px solid rgba(0, 212, 255, 0.12);
  border-radius: 11px;
  padding: 12px 14px;
  transition: border-color 0.2s;
}

.spec__row:hover {
  border-color: rgba(0, 212, 255, 0.32);
}

.spec__k {
  font-size: 14.5px;
  font-weight: 500;
  color: var(--muted);
  line-height: 1.4;
}

.spec__v {
  margin: 0; /* dd */
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--ink);
  text-align: right;
  overflow-wrap: anywhere;
  line-height: 1.4;
}

.widget .btn--block {
  margin-top: 20px;
}

/* --------------------------------------------------------------------------
   6b. Payment console
   -------------------------------------------------------------------------- */

.pay__inner {
  position: relative;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 64px var(--gut) 88px;
}

.pay__head {
  text-align: center;
  max-width: 720px;
  margin: 0 auto;
}

.pay__title {
  font-size: clamp(36px, 4.6vw, 56px);
}

.pay__lede {
  margin-left: auto;
  margin-right: auto;
}

.console {
  position: relative;
  overflow: hidden;
  margin: 44px auto 0;
  max-width: 980px;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 40px;
  align-items: start;
  background: linear-gradient(180deg, rgba(17, 26, 44, 0.92), rgba(11, 17, 30, 0.94));
  border: 1px solid rgba(0, 212, 255, 0.22);
  border-radius: 24px;
  padding: 34px 38px;
  box-shadow: var(--elev-3), var(--keyline), 0 0 60px rgba(32, 148, 243, 0.12) inset;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.console__h {
  margin: 0;
  font-family: var(--sans);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--cyan);
  text-transform: uppercase;
}

.console__qr {
  position: relative;
  text-align: center;
}

.console__cap {
  margin: 14px 0 0;
  font-size: 13px;
  color: var(--dim);
}

/* --- QR frame ------------------------------------------------------------- */

.qr {
  position: relative;
  /* Above the film grain (z-index 90). The grain is a mix-blend-mode overlay
     and this is a payment address — the code stays optically untouched. */
  z-index: 95;
  display: inline-block;
  margin-top: 16px;
  padding: 14px;
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 0 0 1px rgba(0, 212, 255, 0.25), 0 0 44px rgba(0, 212, 255, 0.25);
}

.qr__img {
  display: block;
  width: 232px;
  height: 232px;
  border-radius: 8px;
}

/* --- Address display ------------------------------------------------------ */

.console__addr {
  min-width: 0;
  /* Heading aligns with SCAN QR CODE; the address block centres in the
     remaining column height so neither edge feels stranded. */
  align-self: stretch;
  display: flex;
  flex-direction: column;
}

.console__addr .addr {
  margin-top: auto;
}

.console__addr .copy-live {
  margin-bottom: auto;
}

.addr {
  position: relative;
  margin-top: 16px;
  border-radius: 14px;
}

.addr__glow {
  position: absolute;
  inset: -1px;
  border-radius: 14px;
  background: linear-gradient(90deg, rgba(0, 212, 255, 0.55), rgba(51, 255, 255, 0.55), rgba(51, 187, 255, 0.55), rgba(0, 247, 255, 0.55), rgba(0, 212, 255, 0.55));
  background-size: 300% 100%;
  animation: rateflow 9s linear infinite;
  filter: blur(0.5px);
  pointer-events: none;
}

.addr__val {
  position: relative;
  display: block;
  background: rgba(8, 14, 26, 0.96);
  border-radius: 13px;
  margin: 1.5px;
  padding: 18px 20px;
  font-family: var(--sans);
  font-size: clamp(15px, 1.9vw, 21px);
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--cyan-br);
  overflow-wrap: anywhere;
  text-shadow: 0 0 18px rgba(51, 255, 255, 0.35);
}

.copy-main {
  margin-top: 16px;
  gap: 10px;
}

.copy-main__ic {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.copy-main.is-done {
  background: #22c55e;
}

/* --------------------------------------------------------------------------
   6c. How-to-buy steps
   -------------------------------------------------------------------------- */

.steps {
  list-style: none;
  margin: 44px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 0 18px;
}

.step {
  display: flex;
  flex-direction: column;
}

.step__rail {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.step__node {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  flex-shrink: 0;
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  background: var(--grad-accent);
  box-shadow: 0 0 22px rgba(32, 148, 243, 0.5);
}

/* The rail between steps is a strand, not a rule. */
.step__helix {
  flex: 1;
  height: 18px;
  min-width: 0;
  overflow: visible;
}

.step__helix path {
  fill: none;
  stroke: rgba(0, 212, 255, 0.5);
  stroke-width: 1.6;
  vector-effect: non-scaling-stroke;
  stroke-linecap: round;
}

.step__helix-rungs line {
  stroke: rgba(0, 212, 255, 0.28);
  stroke-width: 1.2;
  vector-effect: non-scaling-stroke;
}

/* Stage-card strand: sits along the card base; the live card's strand
   carries the proof-light, locked cards stay static and dim. */
.phase__strand {
  position: absolute;
  left: 22px;
  right: 22px;
  bottom: 12px;
  height: 16px;
  width: auto;
  flex: none;
  opacity: 0.55;
  pointer-events: none;
}

.phase__card {
  padding-bottom: 40px;
}

.phase--live .phase__card {
  padding-bottom: 26px;
}

.phase--live .phase__strand {
  position: static;
  margin-top: 18px;
  height: 18px;
  opacity: 0.9;
  display: block;
}

.step__helix .step__pulse {
  stroke: #ccf6ff;
  stroke-width: 2.2;
  filter: drop-shadow(0 0 4px rgba(0, 212, 255, 0.9));
  opacity: 0;
  animation: proofTravel 3.4s linear infinite;
}

/* When steps sit side by side, the connector spans the grid gap and lands on
   the next node instead of stopping 18px short. */
@media (min-width: 900px) {
  .step__helix {
    margin-right: -18px;
  }
}

.step__card {
  flex: 1;
  position: relative;
  overflow: hidden;
  background: var(--panel);
  border: 1px solid var(--hair-2);
  border-radius: 18px;
  padding: 22px 24px;
  transition: border-color 0.25s, transform 0.25s;
}

.step__card:hover {
  border-color: rgba(0, 212, 255, 0.45);
  transform: translateY(-3px);
}

.step__n {
  margin: 0;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: var(--cyan);
  text-transform: uppercase;
}

.step__body {
  margin: 10px 0 0;
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--ink-2);
  text-wrap: pretty;
}

/* --------------------------------------------------------------------------
   6d. Info notes (allotment / notice / support)
   -------------------------------------------------------------------------- */

.notes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
}

.note {
  position: relative;
  overflow: hidden;
  background: var(--panel);
  border: 1px solid var(--hair-2);
  border-radius: 18px;
  padding: 24px;
  box-shadow: var(--elev-2), var(--keyline);
  transition: border-color 0.25s, transform 0.25s;
}

.note:hover {
  border-color: rgba(0, 212, 255, 0.45);
  transform: translateY(-3px);
}

.note__ic {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: rgba(0, 212, 255, 0.1);
  border: 1px solid rgba(0, 212, 255, 0.3);
}

.note__ic img {
  width: 26px;
  height: 26px;
  display: block;
}

.note__h {
  margin: 15px 0 0;
  font-size: 17.5px;
  font-weight: 700;
}

.note__body {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 14.5px;
  line-height: 1.65;
  text-wrap: pretty;
}

.pay__back {
  margin-top: 40px;
}

/* --------------------------------------------------------------------------
   7. Ticker
   -------------------------------------------------------------------------- */

.ticker {
  border-bottom: 1px solid rgba(0, 212, 255, 0.08);
  background: rgba(9, 14, 24, 0.8);
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}

.ticker__rail {
  display: flex;
  width: max-content;
  animation: marquee 32s linear infinite;
}

.ticker__group {
  display: flex;
  align-items: center;
  gap: 34px;
  padding: 13px 17px;
}

.ticker__item {
  font-family: var(--sans);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--dim);
  white-space: nowrap;
}

.ticker__item--hot {
  color: var(--ink);
}

.ticker__sep {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(0, 212, 255, 0.55);
  flex-shrink: 0;
}

/* --------------------------------------------------------------------------
   8. Section chrome
   -------------------------------------------------------------------------- */

.section {
  position: relative;
  border-bottom: 1px solid rgba(0, 212, 255, 0.08);
}

.section--phases {
  background:
    radial-gradient(rgba(0, 212, 255, 0.07) 1px, transparent 1.4px) 0 0 / 30px 30px,
    radial-gradient(800px 400px at 50% 0%, rgba(32, 148, 243, 0.07), transparent 70%);
}

.section--cta {
  background: radial-gradient(700px 340px at 50% 50%, rgba(32, 148, 243, 0.13), transparent 70%);
}

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

.eyebrow--center {
  display: inline-flex;
  gap: 10px;
}

.eyebrow__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 12px var(--cyan);
  animation: pulse 2.4s infinite;
  flex-shrink: 0;
}

.eyebrow__label {
  font-family: var(--sans);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--cyan);
}

.eyebrow__rule {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, rgba(0, 212, 255, 0.45), transparent);
}

.eyebrow__num {
  font-family: var(--sans);
  font-size: 12px;
  color: var(--fainter);
}

.section__title {
  text-wrap: balance;
  margin: 14px 0 0;
  font-size: clamp(30px, 3.6vw, 44px);
  line-height: 1.1;
  letter-spacing: -0.015em;
  font-weight: 900;
}

.section__lede {
  margin: 16px 0 0;
  max-width: 62ch;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.65;
  text-wrap: pretty;
}

.hint {
  margin: 14px 0 0;
  color: var(--faint);
  font-size: 13.5px;
  font-family: var(--sans);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.grid {
  display: grid;
  gap: 16px;
  margin-top: 44px;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

/* --------------------------------------------------------------------------
   9. Price progression chart
   -------------------------------------------------------------------------- */

.chart {
  margin: 40px 0 0;
  background: linear-gradient(180deg, rgba(17, 26, 44, 0.72), rgba(11, 17, 30, 0.86));
  border: 1px solid var(--hair-2);
  border-radius: 22px;
  padding: 24px 24px 10px;
  position: relative;
  overflow: hidden;
  box-shadow: var(--elev-2), var(--keyline);
}

.chart::before {
  content: "";
  position: absolute;
  top: 0;
  left: 28px;
  right: 28px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(51, 255, 255, 0.45), transparent);
}

.chart__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}

.chart__title {
  margin: 0;
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.chart__sub {
  margin: 5px 0 0;
  font-family: var(--sans);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: var(--faint);
  text-transform: uppercase;
}

.chart__legend {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.chart__plot {
  position: relative;
  margin-top: 14px;
}

.chart__svg {
  width: 100%;
  min-width: 520px;
  height: auto;
  display: block;
  overflow: visible;
}

.chart__val {
  font-family: var(--sans);
  font-size: 42px;
  font-weight: 800;
  fill: #6b7686;
  text-anchor: middle;
  transition: fill 0.3s, opacity 0.45s ease;
}

.chart__val.is-live { fill: var(--ink); }

.chart.is-pending .chart__val {
  opacity: 0;
}

.chart__val[data-stage-val="1"] { transition-delay: 0.25s; }
.chart__val[data-stage-val="2"] { transition-delay: 0.6s; }
.chart__val[data-stage-val="3"] { transition-delay: 0.95s; }

/* Plot legend, top-left, red dot — matching the original chart's legend */
.chart__live {
  position: absolute;
  left: 14px;
  top: 6px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--ink);
}

.chart__live-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #ef4444;
  box-shadow: 0 0 10px rgba(239, 68, 68, 0.7);
}

.chart__grid line {
  /* Faint and dashed: these are only a reading aid for the value axis. The
     solid rail is the data, and a solid full-width line at each level read as
     if the price held there across the whole chart, which is the opposite of
     what a step schedule says. */
  stroke: rgba(255, 255, 255, 0.09);
  stroke-width: 1;
  stroke-dasharray: 2 7;
  vector-effect: non-scaling-stroke;
}

.chart__grid .chart__base {
  stroke: rgba(0, 212, 255, 0.22);
  stroke-dasharray: none;
}

.chart__xlab text {
  font-family: var(--sans);
  font-size: 12px;
  fill: var(--faint);
}

.chart__xlab text {
  text-anchor: middle;
  letter-spacing: 0.08em;
}

.chart__guides line {
  stroke: rgba(0, 212, 255, 0.14);
  stroke-width: 1;
  opacity: 0;
  transition: opacity 0.25s;
}

.chart__guides line.is-hot {
  stroke: rgba(51, 255, 255, 0.5);
  opacity: 1;
}

/* The trend drawn as a molecule: front runs bright with the chart's own
   cyan-to-gold gradient, back runs dim — the same depth trick as the bar.
   Draw-in is a left-to-right clip sweep; the drawn state is the default so
   no JS, no observer and reduced motion all land complete. */
.coil-front {
  fill: none;
  stroke: var(--track-bg);
  stroke-width: 2.4;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
  /* No glow: this coil is the UNSOLD schedule now, the exact counterpart of
     .dnabar__track-front. Light belongs to the sold strand only. */
}

.coil-back {
  fill: none;
  stroke: var(--track-bg);
  stroke-width: 1.1;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
  opacity: 0.28;
}

.coil-rungs line {
  stroke: var(--track-bg);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

/* --- the price schedule, as columns ----------------------------------------
   Three stages, three rates. Column height is proportional to the rate on a
   ZERO-based scale (100% / 90% / 83% of each other), because the whole drop
   from 30 to 25 is 17% and a truncated axis would sell it as far larger. The
   live column carries the sold 96.1% as the conduit strand; future columns are
   an empty vessel with the coil drawn in track grey. */
.chart__col {
  fill: rgba(255, 255, 255, 0.022);
  stroke: rgba(255, 255, 255, 0.07);
  transition: fill 0.3s, stroke 0.3s;
}

.chart__col--live {
  fill: rgba(32, 148, 243, 0.07);
  stroke: rgba(0, 212, 255, 0.32);
}

.chart__base { stroke: rgba(255, 255, 255, 0.12); }

/* What waiting costs: the slice of the live column a later stage does not give
   you. Invisible until you ask for it. */
.chart__delta {
  fill: rgba(0, 212, 255, 0.1);
  stroke: rgba(0, 212, 255, 0.5);
  stroke-dasharray: 3 4;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.chart[data-look="2"] .chart__delta[data-drop="1"],
.chart[data-look="3"] .chart__delta[data-drop="2"] { opacity: 1; }

.chart__sold .tlc-front {
  fill: none;
  stroke: url(#cFlow);
  stroke-width: 2.4;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
  filter: drop-shadow(0 0 3px rgba(32, 148, 243, 0.32));
}

.chart__sold .tlc-back {
  fill: none;
  stroke: url(#cFlow);
  stroke-width: 1.1;
  opacity: 0.3;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}

.chart__sold .tlc-rungs line {
  stroke: url(#cFlow);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

/* Sweeps up with the hero bar and the Stage 1 gauge — one observer callback
   toggles is-pending on #chart, .stages and .dnabar together. */
.chart__fill { transition: y 1.5s cubic-bezier(0.22, 1, 0.36, 1), height 1.5s cubic-bezier(0.22, 1, 0.36, 1); }
.chart.is-pending .chart__fill { y: 258; height: 0; }

.chart__unit {
  font-size: 13px;
  font-weight: 700;
  fill: var(--faint);
  letter-spacing: 0.1em;
}

.chart__pct {
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 800;
  fill: var(--cyan);
  text-anchor: middle;
}

.chart__xlab-t {
  font-family: var(--sans);
  font-size: 12.5px;
  font-weight: 600;
  fill: var(--faint);
  text-anchor: middle;
  letter-spacing: 0.08em;
}

.chart__sweep {
  transition: width 1.7s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Where scroll-timelines exist, the sweep is scrubbed by scroll position —
   the coil assembles as the section crosses the viewport and reverses on the
   way back. The clipPath rect itself is never rendered, so a view() timeline
   cannot resolve on it: the scrub drives a registered custom property on the
   rendered figure instead, and the rect just reads it. */
@property --sweep {
  syntax: "<length>";
  inherits: true;
  initial-value: 760px;
}

@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .chart {
      animation: chartScrub linear both;
      animation-timeline: view();
      animation-range: entry 25% cover 60%;
    }

    .chart__sweep {
      transition: none;
      width: var(--sweep, 760px);
    }

    @keyframes chartScrub {
      from { --sweep: 0px; }
      to { --sweep: 760px; }
    }
  }
}

.chart.is-pending .chart__sweep {
  width: 0;
}

/* One proof-light travels the descending strand, stage 1 to stage 3. */
.chart__proofpulse {
  stroke: #d8f8ff;
  stroke-width: 2.8;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
  filter: drop-shadow(0 0 4px rgba(0, 212, 255, 0.7));
  opacity: 0;
  animation: proofTravel 7s linear infinite;
}

/* Stage tooltip — follows the active node via --tx/--ty set by script */
.chart__tip {
  position: absolute;
  left: 0;
  top: 0;
  transform: translate(-50%, -118%);
  min-width: 172px;
  padding: 12px 15px;
  border-radius: 13px;
  background: rgba(11, 17, 30, 0.96);
  border: 1px solid rgba(0, 212, 255, 0.35);
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.55), 0 0 24px rgba(0, 212, 255, 0.12);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.18s ease, transform 0.18s ease;
  pointer-events: none;
  z-index: 5;
}

.chart__tip.is-on {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, -128%);
}

.chart__tip-name {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--ink);
}

.chart__tip-rate {
  margin-top: 5px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--ink);
}

.nd:focus-visible {
  outline: 2px solid var(--cyan-br);
  outline-offset: 4px;
}

.nd {
  opacity: 1;
  cursor: pointer;
  transition: opacity 0.45s ease;
}

.nd[data-stage="1"] { transition-delay: 0.2s; }
.nd[data-stage="2"] { transition-delay: 0.5s; }
.nd[data-stage="3"] { transition-delay: 0.8s; }

.chart.is-pending .chart__area { opacity: 0; }
.chart.is-pending .nd { opacity: 0; }

/* A future stage is closed: its node is the track, not the signal. Only the
   live stage is lit, so "you are here" is carried by colour as well as
   position. */
.nd__halo {
  fill: transparent;
  transition: fill 0.25s, r 0.25s;
}

.nd__core {
  fill: var(--track-bg);
  transition: fill 0.25s;
}

.nd--live .nd__core { fill: var(--cyan); }

.nd--live .nd__halo {
  fill: rgba(0, 212, 255, 0.16);
}

.nd.is-hot .nd__halo { fill: rgba(51, 255, 255, 0.3); }
.nd.is-hot .nd__core { fill: #66ffff; }

.chart__hit rect {
  fill: transparent;
  cursor: pointer;
}

/* --------------------------------------------------------------------------
   10. Stage cards
   -------------------------------------------------------------------------- */

/* Each stage inherits its exact position color from the chart gradient:
   cyan at stage 1, the green-gold midpoint at stage 2, gold at stage 3. */
.phase[data-stage="1"] { --stage-accent: #00d4ff; }
.phase[data-stage="2"] { --stage-accent: #85d38a; }
.phase[data-stage="3"] { --stage-accent: #ffd21f; }

.phase .phase__strand path {
  stroke: var(--stage-accent, rgba(0, 212, 255, 0.5));
  opacity: 0.6;
}

.phase .phase__strand .step__helix-rungs line {
  stroke: var(--stage-accent, rgba(0, 212, 255, 0.28));
  opacity: 0.45;
}

.stages {
  margin-top: 20px;
  /* Cards size to their own content — the live stage carries the gauge and is
     meant to stand taller than the two ahead of it. */
  align-items: start;
}

.phase.is-hot .phase__card {
  border-color: rgba(0, 212, 255, 0.55);
  box-shadow: 0 0 34px rgba(0, 212, 255, 0.12);
}

.phase {
  position: relative;
  border-radius: 20px;
  padding: 1.5px;
  transition: transform 0.25s;
}

.phase:hover {
  transform: translateY(-4px);
}

.phase__ring {
  position: absolute;
  inset: 0;
  border-radius: 20px;
  overflow: hidden;
  pointer-events: none;
}

.phase__ring::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 260%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  background: conic-gradient(
    transparent 0deg,
    rgba(51, 255, 255, 0.95) 35deg,
    rgba(32, 148, 243, 0.75) 75deg,
    transparent 115deg
  );
  animation: spinC 4.5s linear infinite;
}

.phase__card {
  position: relative;
  border-radius: 19px;
  padding: 26px;
  height: 100%;
  box-sizing: border-box;
  background: linear-gradient(180deg, #0e1626, #080e18);
  border: 1px solid rgba(0, 212, 255, 0.12);
  border-top: 2px solid var(--stage-accent, rgba(0, 212, 255, 0.12));
  box-shadow: var(--elev-2), var(--keyline);
}

.phase--live .phase__card {
  background: linear-gradient(180deg, #12233f, #0b1526);
  border-color: rgba(0, 212, 255, 0.5);
}

.phase__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  /* The live card carries a status pill (26px); matching min-height keeps the
     three rate lines on one shared baseline. */
  min-height: 26px;
}

.phase__n {
  font-family: var(--sans);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--dim);
}

.phase__status {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--sans);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  border-radius: 999px;
  padding: 5px 11px;
  color: var(--ink);
  background: rgba(17, 24, 39, 0.6);
  white-space: nowrap;
}

.phase__status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--live-dot);
  flex-shrink: 0;
  animation: pulse 1.6s infinite;
}

.phase__name {
  margin: 18px 0 0;
  font-size: 21px;
  font-weight: 700;
}

.phase__rate {
  margin: 16px 0 0;
  font-family: var(--sans);
  font-size: 30px;
  font-weight: 700;
  color: var(--ink-2);
}

.phase--live .phase__rate {
  color: var(--ink);
}

.phase__rate .eq {
  color: var(--faint);
  font-size: 20px;
}

.phase__rate .unit {
  font-size: 15px;
  color: var(--dim);
}

/* Radial progress gauge (Stage 1) */

.gauge {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid rgba(0, 212, 255, 0.14);
  display: flex;
  align-items: center;
  gap: 15px;
}

.gauge__svg {
  width: 68px;
  height: 68px;
  flex-shrink: 0;
  transform: rotate(-90deg);
  overflow: visible;
  filter: drop-shadow(0 0 12px rgba(32, 148, 243, 0.35));
}

.gauge__track {
  fill: none;
  stroke: rgba(8, 14, 26, 0.9);
  stroke-width: 8;
}

.gauge__fill {
  fill: none;
  stroke: #2094f3;
  stroke-width: 8;
  stroke-linecap: round;
}

/* 213.6 is the circumference at r=34; offset shrinks as the arc fills.
   Filled by default so the real figure shows even if the animation never runs. */
.gauge__fill {
  stroke-dashoffset: calc(213.6 - (213.6 * var(--pct) / 100));
  transition: stroke-dashoffset 1.6s cubic-bezier(0.22, 1, 0.36, 1) 0.3s;
}

.stages.is-pending .gauge__fill {
  stroke-dashoffset: 213.6;
}

.gauge__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.gauge__k {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--dim);
  text-transform: uppercase;
}

.gauge__v {
  font-family: var(--sans);
  font-size: 24px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.1;
}

/* --------------------------------------------------------------------------
   10. Fact tiles
   -------------------------------------------------------------------------- */

.facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
  margin-top: 32px;
}

.fact {
  background: rgba(14, 22, 37, 0.55);
  border: 1px solid var(--hair);
  border-radius: 13px;
  padding: 15px 17px;
  transition: border-color 0.2s;
}

.fact:hover {
  border-color: rgba(0, 212, 255, 0.35);
}

.fact__k {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--faint);
}

.fact__v {
  font-family: var(--sans);
  font-size: 14.5px;
  font-weight: 700;
  color: var(--ink-2);
  margin-top: 6px;
  overflow-wrap: anywhere;
}

/* --------------------------------------------------------------------------
   11. Closing CTA
   -------------------------------------------------------------------------- */

.cta__shell {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: var(--section-y) var(--gut);
  text-align: center;
  position: relative;
  overflow: hidden;
}

/* Layered scene, back to front:
   aurora blobs → dot matrix → orbit rings → scrolling grid floor → vignette.
   Every layer is decorative, aria-hidden, and frozen under reduced motion. */

.cta__bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* -- aurora: two blurred color fields drifting against each other -------- */

.cta__aurora {
  position: absolute;
  width: 60%;
  aspect-ratio: 1;
  border-radius: 50%;
  filter: blur(70px);
  opacity: 0.5;
}

.cta__aurora--a {
  left: -8%;
  top: -22%;
  background: radial-gradient(circle at 35% 40%, rgba(32, 148, 243, 0.5), rgba(0, 212, 255, 0.22) 55%, transparent 75%);
  animation: auroraA 19s ease-in-out infinite alternate;
}

.cta__aurora--b {
  right: -10%;
  bottom: -28%;
  background: radial-gradient(circle at 60% 55%, rgba(0, 140, 170, 0.4), rgba(0, 212, 255, 0.16) 55%, transparent 75%);
  animation: auroraB 23s ease-in-out infinite alternate;
}

@keyframes auroraA {
  from { transform: translate(0, 0) scale(1); }
  to { transform: translate(9%, 14%) scale(1.18); }
}

@keyframes auroraB {
  from { transform: translate(0, 0) scale(1.12); }
  to { transform: translate(-10%, -12%) scale(0.94); }
}

/* -- fine dot matrix, faded to the center so text stays clean ------------ */

.cta__dots {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(0, 212, 255, 0.2) 1px, transparent 1.4px);
  background-size: 26px 26px;
  mask-image: radial-gradient(75% 75% at 50% 50%, transparent 28%, #000 62%, transparent 92%);
  -webkit-mask-image: radial-gradient(75% 75% at 50% 50%, transparent 28%, #000 62%, transparent 92%);
  opacity: 0.6;
}

/* -- DNA strands: the same helix canvas as the hero, dimmed to sit back -- */

.cta__helix {
  opacity: 0.55;
}

/* -- grid floor, now scrolling toward the viewer ------------------------- */

.cta__grid {
  position: absolute;
  inset: auto 0 0;
  height: 46%;
  opacity: 0.55;
  background-image:
    linear-gradient(rgba(51, 255, 255, 0.18) 1px, transparent 1px),
    linear-gradient(90deg, rgba(51, 255, 255, 0.18) 1px, transparent 1px);
  background-size: 46px 46px;
  transform: perspective(340px) rotateX(58deg);
  transform-origin: bottom center;
  mask-image: linear-gradient(to top, #000, transparent 78%);
  -webkit-mask-image: linear-gradient(to top, #000, transparent 78%);
  animation: gridScroll 2.6s linear infinite;
}

@keyframes gridScroll {
  to { background-position: 0 46px, 0 0; }
}

/* -- vignette keeps the edges dark so the copy owns the center ----------- */

.cta__vignette {
  position: absolute;
  inset: 0;
  background: radial-gradient(90% 80% at 50% 46%, transparent 45%, rgba(7, 12, 22, 0.75) 100%);
}

.cta__title {
  position: relative;
  margin: 16px 0 0;
  font-size: clamp(28px, 3.4vw, 40px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  font-weight: 900;
  color: var(--ink-2);
}

/* The rate is the payload — oversized, mono, with a moving gradient. */
.cta__rate {
  position: relative;
  margin: 14px 0 0;
  font-family: var(--sans);
  font-size: clamp(30px, 6vw, 74px);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.05;
  white-space: nowrap;
}

.cta__rate-in {
  background: linear-gradient(90deg, #00d4ff, #33ffff, #33bbff, #00f7ff, #00d4ff);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: rateflow 7s linear infinite;
  filter: drop-shadow(0 0 34px rgba(0, 212, 255, 0.38));
}

@keyframes rateflow {
  to { background-position: 220% 0; }
}

.cta__lede {
  position: relative;
  margin: 18px auto 0;
  max-width: 54ch;
  color: var(--muted);
  font-size: 16.5px;
  line-height: 1.65;
}

.cta__btn {
  position: relative;
  margin-top: 32px;
}

/* --------------------------------------------------------------------------
   11b. Trustline module
   -------------------------------------------------------------------------- */

.section--trust {
  background:
    radial-gradient(rgba(0, 212, 255, 0.05) 1px, transparent 1.4px) 15px 15px / 30px 30px,
    radial-gradient(700px 360px at 50% 100%, rgba(0, 212, 255, 0.06), transparent 70%);
}

.trust-grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 48px;
  align-items: center;
}

@media (max-width: 979px) {
  .trust-grid {
    grid-template-columns: 1fr;
    gap: 0;
  }
}

.trust {
  position: relative;
  overflow: hidden;
  margin-top: 34px;
  max-width: 760px;
  background: linear-gradient(180deg, rgba(17, 26, 44, 0.9), rgba(11, 17, 30, 0.94));
  border: 1px solid rgba(0, 212, 255, 0.22);
  border-radius: 20px;
  padding: 24px;
  box-shadow: var(--elev-3), var(--keyline), 0 0 50px rgba(32, 148, 243, 0.1) inset;
}

.trust__rows {
  position: relative;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.trust__row {
  background: rgba(8, 14, 26, 0.78);
  border: 1px solid rgba(0, 212, 255, 0.14);
  border-radius: 13px;
  padding: 13px 15px;
  transition: border-color 0.2s;
}

.trust__row:hover {
  border-color: rgba(0, 212, 255, 0.4);
}

.trust__k {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--faint);
  text-transform: uppercase;
}

.trust__v {
  margin: 7px 0 0;
  display: flex;
  align-items: center;
  gap: 12px;
}

.trust__val {
  flex: 1;
  min-width: 0;
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  overflow-wrap: anywhere;
}

.trust__val--addr {
  font-size: 13.5px;
  letter-spacing: 0.01em;
  color: var(--cyan-br);
}

.copy {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: rgba(0, 212, 255, 0.08);
  border: 1px solid var(--hair-4);
  color: var(--cyan-soft);
  cursor: pointer;
  transition: border-color 0.2s, color 0.2s, background 0.2s;
}

.copy:hover {
  border-color: var(--cyan);
  color: #fff;
}

.copy svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.copy.is-done {
  border-color: rgba(74, 222, 128, 0.6);
  background: rgba(74, 222, 128, 0.14);
  color: var(--teal-lt);
}

.copy .copy__ic,
.copy .copy__check {
  transition: opacity 0.18s, transform 0.18s;
  transform-box: fill-box;
  transform-origin: center;
}

.copy .copy__check {
  opacity: 0;
  transform: scale(0.5);
}

.copy.is-done .copy__ic {
  opacity: 0;
  transform: scale(0.5);
}

.copy.is-done .copy__check {
  opacity: 1;
  transform: scale(1);
}

.trust__cta {
  position: relative;
  margin-top: 16px;
}

.copy-live {
  margin: 12px 0 0;
  font-family: var(--sans);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--teal-lt);
  min-height: 1em;
  text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   12. Footer
   -------------------------------------------------------------------------- */

.footer {
  position: relative;
  background: linear-gradient(180deg, var(--bg) 0, var(--bg-deep) 64px);
}

.footer__shell {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 40px var(--gut) 36px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  flex-wrap: wrap;
}

.footer__links {
  display: flex;
  gap: 22px;
  font-size: 14.5px;
  flex-wrap: wrap;
}

.footer__links a {
  color: var(--muted);
  transition: color 0.2s;
}

.footer__links a:hover {
  color: var(--cyan-br);
}

/* --------------------------------------------------------------------------
   12b. Advanced layer — progress bar, spotlight, tilt, page enter
   -------------------------------------------------------------------------- */

/* The reading line scrolls away with the header instead of staying pinned. */
.nav-progress {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  z-index: 70;
  pointer-events: none;
}

.nav-progress span {
  display: block;
  height: 100%;
  width: 100%;
  background: var(--grad-bar);
  box-shadow: 0 0 12px rgba(0, 212, 255, 0.6);
  transform: scaleX(var(--scroll, 0));
  transform-origin: left center;
}

/* Cursor spotlight: JS feeds --mx/--my; the glow follows the pointer.
   Without JS the ::after simply never lights up — zero cost. */
.spot {
  position: relative;
}

.spot::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.35s;
  background: radial-gradient(
    280px circle at var(--mx, 50%) var(--my, 50%),
    rgba(51, 255, 255, 0.1),
    transparent 65%
  );
}

.spot:hover::after {
  opacity: 1;
}

/* Gentle 3D tilt (JS-driven). */
.tilt {
  transform: perspective(700px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  will-change: transform;
}

/* Stage cards: tilt in 3D and let the rate float above the card plane. */
.phase.tilt {
  transform: perspective(700px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
}

.phase.tilt:hover {
  transform: perspective(700px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(-4px);
}

.phase.tilt .phase__card {
  transform-style: preserve-3d;
}

.phase__rate {
  transition: transform 0.3s;
}

.phase.tilt:hover .phase__rate {
  transform: translateZ(24px);
}

/* Flagship CTA button is magnetic — JS feeds --tx/--ty, spring settles it. */
.btn--xl,
.btn--xl:hover {
  transform: translate(var(--tx, 0px), var(--ty, 0px));
}

.btn:active {
  transform: translateY(0) scale(0.97);
}
.btn--xl:active {
  transform: translate(var(--tx, 0px), var(--ty, 0px)) scale(0.97);
}


/* Film grain: static SVG noise over everything at 4% — its only job is to
   kill gradient banding on the big navy washes. Hidden on phones. */
.page::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 90;
  pointer-events: none;
  opacity: 0.045;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

@media (max-width: 720px) {
  .page::after {
    display: none;
  }
}

/* Page enter — one quiet rise, no layout shift. */
.page--enter {
  animation: pageenter 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes pageenter {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}

/* Ticker: pause while the reader is on it. */
.ticker:hover .ticker__rail {
  animation-play-state: paused;
}

/* --------------------------------------------------------------------------
   13. Scroll reveal
   -------------------------------------------------------------------------- */

[data-reveal] {
  transition: opacity 0.6s ease, transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

[data-reveal].is-veiled {
  opacity: 0;
  transform: translateY(26px);
}

/* --------------------------------------------------------------------------
   14. Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 900px) {
  /* Inline links move into the disclosure menu; brand + CTA stay in the bar. */
  .nav__links > a:not(.btn) {
    display: none;
  }

  /* A long CTA label ("← Back to Presale Info") squeezes the brand onto two
     lines and shoves the menu button out of the bar. Long CTAs drop out of the
     bar entirely — the disclosure menu still carries them, in full. */
  .nav__links > .btn--long {
    display: none;
  }

  .nav__menu {
    display: block;
  }

  .nav__inner {
    gap: 12px;
  }
}

@media (max-width: 720px) {
  :root {
    --gut: 16px;
    --section-y: 56px;
  }

  /* The single biggest mobile bug: minmax(340px,1fr) makes the column a rigid
     340px, so below ~376px the card overhangs the gutter and gets clipped.
     min() lets it collapse to the container instead. */
  .hero__inner {
    grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr));
    padding: 34px var(--gut) 44px;
    gap: 28px;
  }

  .hero__title {
    font-size: clamp(28px, 7.6vw, 38px);
    line-height: 1.1;
  }

  .hero__lede {
    font-size: 15.5px;
    line-height: 1.6;
    margin-top: 14px;
  }

  .badge-live {
    font-size: 10px;
    padding: 6px 12px;
  }

  .hero__actions {
    margin-top: 22px;
    gap: 10px;
  }

  /* Full-width stacked CTAs beat two cramped side-by-side buttons. */
  .hero__actions .btn,
  .hero__actions .btn-ghost {
    width: 100%;
    justify-content: center;
    padding: 14px 18px;
    font-size: 15px;
  }

  /* Backdrop must not compete with body copy on a small screen. */
  .hero__canvas {
    opacity: 0.38;
  }

  .widget {
    padding: 18px 15px 16px;
  }

  .widget__head-label {
    font-size: 10px;
  }

  /* Keep label and value on ONE line — stacking them doubled the card height
     (804px, taller than the viewport) for no readability gain. */
  .spec__row {
    padding: 9px 12px;
    gap: 10px;
  }

  .spec__k {
    font-size: 13px;
  }

  .spec__v {
    font-size: 13.5px;
  }

  .spec {
    margin-top: 16px;
    padding-top: 14px;
  }

  .section__title {
    font-size: clamp(24px, 6.4vw, 32px);
  }

  .section__lede {
    font-size: 14.5px;
  }

  .eyebrow__label {
    font-size: 10px;
    letter-spacing: 0.18em;
  }

  .eyebrow__num {
    display: none;
  }

  .chart {
    padding: 18px 14px 8px;
  }

  .chart__head {
    gap: 14px;
  }

  /* Fit the whole chart rather than making it scroll sideways. SVG font sizes
     are in user units, so they shrink with the viewBox — scale them back up
     so the axis stays legible at roughly half size. */
  .chart__svg {
    min-width: 0;
  }

  .chart__xlab text {
    font-size: 17px;
  }

  .chart__val {
    font-size: 21px;
  }

  .trust {
    padding: 18px 15px;
  }

  .trust__val--addr {
    font-size: 12.5px;
  }

  .cta__rate {
    /* The rate must never truncate — it is the whole point of the section. */
    white-space: normal;
    font-size: clamp(23px, 7.2vw, 38px);
    letter-spacing: -0.01em;
  }

  .stages,
  .grid {
    margin-top: 22px;
  }

  .phase__card {
    padding: 20px 20px 42px;
  }

  .phase--live .phase__card {
    padding-bottom: 24px;
  }

  .phase__rate {
    font-size: 26px;
  }

}

/* Very narrow phones (iPhone SE and small Android). */
@media (max-width: 380px) {
  .hero__title {
    font-size: 27px;
  }

  .spec__k,
  .spec__v {
    font-size: 12.5px;
  }

  .rate-pill {
    font-size: 11px;
    padding: 5px 9px;
  }

  .brand__name {
    font-size: 14px;
  }
}

@media (max-width: 860px) {
  .console {
    grid-template-columns: 1fr;
    gap: 26px;
    padding: 22px 16px;
    text-align: center;
  }

  .console__addr {
    text-align: left;
  }

  .console__addr .console__h {
    text-align: center;
  }

  .qr__img {
    width: min(232px, 62vw);
    height: auto;
  }

  .pay__inner {
    padding: 34px var(--gut) 48px;
  }

  .pay__title {
    font-size: clamp(28px, 7.6vw, 40px);
  }

  .step {
    margin-bottom: 16px;
  }

  .steps {
    margin-top: 26px;
  }

  .notes {
    gap: 12px;
  }
}

/* --------------------------------------------------------------------------
   15. Reduced motion
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .badge-live__dot,
  .eyebrow__dot,
  .phase__status-dot,
  .btn__sheen,
  .ticker__rail,
  .grad-text,
  .phase__ring::before,
  .cta__rate-in,
  .cta__aurora,
  .cta__grid,
  .addr__glow,
  .page--enter,
  .nd__ring,
  .nd--live .nd__halo {
    animation: none !important;
  }

  .tilt {
    transform: none !important;
  }

  .spot::after {
    display: none;
  }

  [data-reveal],
  .dnabar__clip,
  .chart__fill,
  .dnabar__pulse path {
    animation: none !important;
    transition: none !important;
  }


  .btn,
  .phase {
    transition: border-color 0.25s, box-shadow 0.25s;
  }

  .btn:hover,
  .phase:hover {
    transform: none;
  }
}

/* --------------------------------------------------------------------------
   16. Cutting-edge layer — view transitions & scroll-driven animation
   Both are pure progressive enhancement: browsers without support simply
   navigate and scroll normally, and JS keeps its own fallbacks.
   -------------------------------------------------------------------------- */

/* Cross-page morph between index and payment. The nav bar is a shared
   element, so it glides while the rest of the page cross-fades. */
@view-transition {
  navigation: auto;
}

.nav {
  view-transition-name: site-nav;
}

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 0.28s;
}

/* The primary Buy Now morphs into the payment console across pages. */
#presale .hero__actions .btn {
  view-transition-name: buy-cta;
}

.console {
  view-transition-name: buy-cta;
}

::view-transition-group(buy-cta) {
  animation-duration: 0.4s;
  animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
}

@media (prefers-reduced-motion: reduce) {
  @view-transition {
    navigation: none;
  }
}

@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: scroll()) {
    /* Reading progress with zero JS — the bar is literally the scrollbar.
       main.js detects support and stays out of the way. */
    .nav-progress span {
      animation: navGrow linear both;
      animation-timeline: scroll(root);
    }

    @keyframes navGrow {
      from { transform: scaleX(0); }
      to { transform: scaleX(1); }
    }

    /* Depth parallax: background layers drift at different rates while
       their sections cross the viewport. */
    .cta__dots {
      animation: parDots linear both;
      animation-timeline: view();
      animation-range: entry 0% exit 100%;
    }

    @keyframes parDots {
      from { transform: translateY(-28px); }
      to { transform: translateY(28px); }
    }

    .cta__helix {
      animation: parHelix linear both;
      animation-timeline: view();
      animation-range: entry 0% exit 100%;
    }

    @keyframes parHelix {
      from { transform: translateY(-16px); }
      to { transform: translateY(16px); }
    }

    /* The hero is the first thing on the page, so a default `cover` range
       starts this animation already half-applied at scroll 0 — which pushed
       the glow 35px down and left a dead unlit band under the nav. `exit`
       anchors 0% to "hero top reaches viewport top", so the glow sits flush
       until the hero actually begins scrolling away. */
    .hero__glow {
      animation: parGlow linear both;
      animation-timeline: view();
      animation-range: exit;
    }

    @keyframes parGlow {
      from { transform: translateY(0); opacity: 1; }
      to { transform: translateY(70px); opacity: 0.55; }
    }
  }
}

/* --------------------------------------------------------------------------
   17. Typeface policy
   The live site sets all data in its sans face — no monospace anywhere.
   Mono is kept ONLY for the two payment addresses, where fixed-width glyphs
   make character-by-character verification easier.
   -------------------------------------------------------------------------- */

.addr__val,
.trust__val--addr {
  font-family: var(--mono);
}

.spec__v--green {
  color: #4ade80;
}

/* --------------------------------------------------------------------------
   18. XRPL layer
   A trustline is an XRP Ledger object, so the trustline card is where the
   chain belongs. Timings are the real thing: the XRPL closes a ledger roughly
   every 3.5 seconds, and that cadence drives everything here — the validator
   row agrees, then the mark confirms, once per close.

   Brand assets are used exactly as shipped in the XRPL kit: the official
   white symbol and the official "Built on XRPL" badge, never recoloured,
   redrawn or distorted. Only opacity and scale are animated.
   -------------------------------------------------------------------------- */

:root {
  --ledger-close: 3.5s;
}

/* Official "Built on XRPL" badge — accurate attribution, used unmodified. */
/* The official lockup is a single-ink badge with knocked-out type, so it must
   render at full opacity to stay legible and on-brand — restraint comes from
   size, not from dimming or recolouring the mark. */




/* --------------------------------------------------------------------------
   18b. XDNA Allotment — the allotment.dnaprotocol.org tool in this site's
   own vocabulary: the trustline card's surface, the spec list used for the
   currency/issuer rows, and the same solid-blue primary button.
   -------------------------------------------------------------------------- */

.section--allot {
  --allot-muted: #a3b2c6;
  padding-top: 52px;
  background: radial-gradient(ellipse at 90% 0, rgba(0, 212, 255, 0.07), transparent 46%);
}
.section--allot > .shell { padding-top: 0; }
.allot__intro { display: flex; align-items: center; justify-content: space-between; gap: 32px; margin: 25px 0 34px; }
.allot__intro h1 { margin: 0; font-size: clamp(52px, 6vw, 84px); line-height: 1.04; letter-spacing: -0.055em; font-weight: 750; }
.allot__intro h1 span { color: var(--cyan); }
.allot__lede { margin: 16px 0 0; color: var(--allot-muted); font-size: 16px; line-height: 1.65; }
.allot__chain { display: flex; align-items: center; gap: 18px; padding: 20px 0 20px 30px; border-left: 1px solid var(--hair-4); flex-shrink: 0; }
.allot__chain span { font-size: 11px; font-weight: 700; letter-spacing: 0.15em; }
.allot__chain small { display: block; margin-top: 7px; color: var(--allot-muted); font-size: 12px; font-weight: 400; letter-spacing: 0; }
.allot__dashboard { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 22px; align-items: stretch; }
.allot { min-width: 0; position: relative; border: 1px solid var(--hair-3); border-radius: 20px; background: linear-gradient(135deg, #111e30, #0c1422 70%); }
.allot--lookup { padding: 28px; border-top-color: rgba(0, 212, 255, 0.4); }

/* Static corner accents leave the content transparent and never catch input. */
@supports (mask-composite: exclude) or (-webkit-mask-composite: xor) {
  .page-allotment :is(.allot--lookup, .allot__overview, .allot--table) {
    position: relative;
    isolation: isolate;
  }

  .page-allotment :is(.allot--lookup, .allot__overview, .allot--table)::before {
    content: "";
    position: absolute;
    inset: -1px;
    padding: 1.5px;
    border-radius: inherit;
    pointer-events: none;
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask-composite: exclude;
  }

  .page-allotment :is(.allot--lookup, .allot__overview, .allot--table)::before {
    background:
      radial-gradient(64px at 0 0, #00d4ff, transparent),
      radial-gradient(64px at 100% 0, #00d4ff, transparent),
      radial-gradient(64px at 100% 100%, #00d4ff, transparent),
      radial-gradient(64px at 0 100%, #00d4ff, transparent);
    opacity: 0.48;
  }

}

.allot__search-head { display: flex; align-items: center; gap: 14px; margin-bottom: 26px; }
.allot__search-head h2 { margin: 0; font-size: 22px; line-height: 1.2; letter-spacing: -0.025em; }
.allot__search-head p { margin: 7px 0 0; color: var(--allot-muted); font-size: 12.5px; line-height: 1.5; }
.allot__search-icon { display: grid; place-items: center; width: 44px; height: 44px; flex-shrink: 0; border: 1px solid var(--hair-4); border-radius: 13px; background: rgba(0, 212, 255, 0.07); }
.allot__search-icon svg { width: 23px; height: 23px; stroke: var(--cyan); stroke-width: 1.7; }
.allot__form { margin: 0; }
.allot__label { display: block; margin-bottom: 10px; font-size: 13px; font-weight: 600; color: var(--ink-2); }
.allot__row { display: flex; gap: 10px; }
.allot__input { flex: 1; width: 100%; min-width: 0; min-height: 52px; padding: 13px 14px; border: 1px solid #34465e; border-radius: 10px; background: #080f1c; color: var(--ink); font: 16px var(--sans); }
.allot__input::placeholder { color: #8b9bb0; font-size: 13px; }
.allot__input:focus { outline: 2px solid var(--cyan); outline-offset: 2px; }
.allot__input[aria-invalid="true"] { border-color: #fbbf24; }
.allot__go { flex-shrink: 0; min-height: 52px; padding: 13px 18px; font-size: 13px; background: #0875c9; box-shadow: 0 5px 22px rgba(8, 117, 201, 0.16); }
.allot__go[disabled] { opacity: 0.5; pointer-events: none; }
.allot__help { margin: 12px 0 0; font-size: 12px; line-height: 1.5; color: var(--allot-muted); }
.allot__status { margin: 12px 0 0; font-size: 13px; line-height: 1.6; color: var(--allot-muted); overflow-wrap: anywhere; }
.allot__status:empty { margin: 0; }
.allot__status.is-warn { color: #fbd68a; }
.allot__retry { margin-top: 14px; min-height: 44px; }
.allot__retry[hidden], .allot__result[hidden] { display: none; }
.allot__result { margin-top: 24px; padding: 22px 0 0; border-top: 1px solid var(--hair-4); scroll-margin-top: 100px; }
.allot__rlabel { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin: 0; color: var(--allot-muted); font-size: 12px; }
.allot__found { color: var(--teal-lt); font-size: 11px; padding: 4px 8px; border-radius: 5px; background: rgba(74, 222, 128, 0.07); border: 1px solid rgba(74, 222, 128, 0.2); }
.allot__balance { margin: 13px 0 20px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 9px; font-size: clamp(23px, 3vw, 36px); line-height: 1.3; font-weight: 700; letter-spacing: -0.035em; color: var(--cyan); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.allot__balance-unit { font-size: 12px; color: var(--allot-muted); font-weight: 600; letter-spacing: 0.06em; }
.allot__grid { display: grid; grid-template-columns: 1fr 1.4fr; gap: 16px; margin: 0 0 16px; }
.allot__cell dt { font-size: 11px; color: var(--allot-muted); line-height: 1.5; }
.allot__cell dd { margin: 5px 0 0; font-size: 17px; font-weight: 600; }
.allot__identity { margin: 0; padding-top: 14px; border-top: 1px solid var(--hair); }
.allot__identity dt { font-size: 11px; color: var(--allot-muted); }
.allot__identity dd { margin: 7px 0 0; font: 12px/1.7 var(--mono); overflow-wrap: anywhere; }
.allot__overview { min-width: 0; padding: 25px 26px; border-radius: 20px; border: 1px solid rgba(147, 180, 211, 0.14); background: linear-gradient(145deg, rgba(18, 31, 49, 0.65), rgba(11, 20, 34, 0.6)); }
.allot__overview h2 { margin: 0 0 19px; font-size: 13px; font-weight: 500; color: var(--allot-muted); }
.allot__metrics { display: grid; gap: 16px; margin: 0 0 22px; }
.allot__metrics dt { font-size: 11px; color: var(--allot-muted); }
.allot__metrics dd { margin: 5px 0 0; font-size: 30px; letter-spacing: -0.045em; line-height: 1.2; font-weight: 650; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.allot__metrics .allot__metric-amount { font-size: clamp(20px, 2.3vw, 28px); }
.allot__terms { border-top: 1px solid var(--hair); padding-top: 16px; display: flex; gap: 10px; justify-content: space-between; flex-wrap: wrap; font-size: 11px; color: var(--allot-muted); }
.allot__terms strong { font-weight: 600; color: var(--teal-lt); }
.allot__minimum { margin: 12px 0 0; color: var(--allot-muted); font-size: 11px; line-height: 1.65; }
.allot__minimum strong { color: var(--ink-2); font-weight: 600; }
.allot__verification { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px; margin: 19px 0 32px; font-size: 11px; line-height: 1.7; color: var(--allot-muted); }
.allot__verification p { margin: 0; }
.allot__feed-label { display: inline-flex; align-items: center; gap: 7px; font-weight: 600; }
.allot__feed-label::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--allot-muted); }
[data-allot-feed="verified"] .allot__feed-label { color: var(--teal-lt); }
[data-allot-feed="verified"] .allot__feed-label::before { background: var(--teal-lt); }
[data-allot-feed="offline"] .allot__feed-label { color: #fbd68a; }
[data-allot-feed="offline"] .allot__feed-label::before { background: #fbd68a; }
.allot--table { padding: 25px 26px 20px; scroll-margin-top: 105px; }
.allot__thead { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 22px; }
.allot__ttitle { margin: 0; font-size: 20px; font-weight: 650; letter-spacing: -0.025em; line-height: 1.4; scroll-margin-top: 110px; }
.allot__ttitle [data-allot-total]:not(:empty) { margin-left: 8px; padding: 3px 7px; vertical-align: middle; border-radius: 5px; font-size: 11px; font-weight: 500; color: var(--cyan); background: rgba(0, 212, 255, 0.08); letter-spacing: 0; }
.allot__table-help { margin: 6px 0 0; font-size: 12px; color: var(--allot-muted); }
.allot__controls { display: flex; gap: 12px; }
.allot__ctl { display: flex; flex-direction: column; gap: 7px; font-size: 11px; color: var(--allot-muted); }
.allot__select { appearance: none; -webkit-appearance: none; height: 44px; min-height: 44px; max-width: 100%; padding: 9px 32px 9px 12px; border: 1px solid #34465e; border-radius: 8px; background: #0c1422 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='m1 1 5 5 5-5' fill='none' stroke='%23a3b2c6' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat right 12px center; color: var(--ink-2); font: 13px var(--sans); }
.allot__scroll { border-top: 1px solid var(--hair-4); }
.allot__table { width: 100%; border-collapse: collapse; font-size: 13px; }
.allot__table th { text-align: left; padding: 14px 12px; font-size: 10px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--allot-muted); border-bottom: 1px solid var(--hair-3); }
.allot__table td { padding: 3px 12px; height: 60px; border-bottom: 1px solid rgba(147, 180, 211, 0.08); }
.allot__table th:first-child, .allot__table td:first-child { padding-left: 0; }
.allot__table th:last-child, .allot__table td:last-child { padding-right: 0; }
.allot__table tr:last-child td { border-bottom: 0; }
.allot__table .is-rank { color: var(--allot-muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.allot__table .is-key { color: var(--ink-2); }
.allot__wallet { display: inline-block; max-width: 100%; min-height: 44px; padding: 12px 0; border: 0; background: transparent; color: inherit; cursor: pointer; text-align: left; font: 12px/1.5 var(--mono); overflow-wrap: anywhere; }
.allot__wallet:hover { color: var(--cyan); }
.allot__wallet:focus-visible { outline-offset: 3px; }
.allot__table .is-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--cyan); }
.allot__empty td { padding: 32px 12px; text-align: center; color: var(--allot-muted); height: auto; line-height: 1.65; }
.allot__foot { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin-top: 18px; }
.allot__count { margin: 0; font-size: 11px; color: var(--allot-muted); line-height: 1.6; }
.allot__pager { display: flex; align-items: center; gap: 12px; }
.allot__pager .btn-ghost { min-height: 44px; padding: 10px 14px; font-size: 12px; border-radius: 9px; }
.allot__pager .btn-ghost[disabled] { opacity: 0.4; pointer-events: none; }
.allot__page { color: var(--allot-muted); font-size: 11px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.allot__guidance { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-top: 22px; }
.allot__guidance details { border-top: 1px solid var(--hair-3); }
.allot__guidance summary { padding: 18px 28px 18px 0; position: relative; list-style: none; cursor: pointer; font-size: 13px; color: var(--ink-2); line-height: 1.5; }
.allot__guidance summary::-webkit-details-marker { display: none; }
.allot__guidance summary::after { content: "+"; position: absolute; right: 4px; top: 18px; color: var(--cyan); }
.allot__guidance details[open] summary::after { content: "-"; }
.allot__guidance p, .allot__note { font-size: 13px; line-height: 1.8; color: var(--allot-muted); margin: 0 0 16px; }
.nav__link.is-current { color: var(--cyan); }
@media (max-width: 1000px) {
  .allot__dashboard { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 16px; }
  .allot__row { flex-wrap: wrap; }
  .allot__go { width: 100%; }
  .allot__thead { align-items: flex-start; }
}
@media (max-width: 720px) {
  .section--allot { padding-top: 30px; }
  .allot__intro { margin: 19px 0 25px; }
  .allot__intro h1 { font-size: clamp(44px, 11.5vw, 64px); }
  .allot__intro h1 span { display: block; }
  .allot__lede { font-size: 14px; margin-top: 13px; }
  .allot__chain { display: none; }
  .allot__dashboard { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .allot--lookup { padding: 21px 18px; }
  .allot__search-head { margin-bottom: 22px; gap: 12px; }
  .allot__search-head h2 { font-size: 19px; }
  .allot__search-head p { font-size: 11px; }
  .allot__search-icon { width: 38px; height: 38px; border-radius: 11px; }
  .allot__go { font-size: 14px; }
  .allot__help { font-size: 11px; }
  .allot__overview { padding: 20px; }
  .allot__overview h2 { margin-bottom: 16px; }
  .allot__metrics { grid-template-columns: minmax(0, 0.65fr) minmax(0, 1.35fr); gap: 12px; margin-bottom: 18px; }
  .allot__metrics dd, .allot__metrics .allot__metric-amount { font-size: clamp(17px, 4.6vw, 26px); letter-spacing: -0.035em; }
  .allot__verification { margin: 16px 0 25px; font-size: 10px; }
  .allot--table { padding: 20px 16px 16px; }
  .allot__thead { flex-direction: column; gap: 18px; margin-bottom: 18px; }
  .allot__ttitle { font-size: 19px; }
  .allot__controls { width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.5fr); gap: 12px; }
  .allot__select { width: 100%; height: 46px; min-height: 46px; padding: 10px 32px 10px 10px; font-size: 16px; }
  /* Retain explicit table roles while presenting each record as a mobile card. */
  .allot__table, .allot__table tbody { display: block; width: 100%; }
  .allot__table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .allot__table tbody tr { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 3fr); gap: 5px 12px; padding: 17px 0; border-bottom: 1px solid var(--hair-3); }
  .allot__table tbody tr:last-child { border-bottom: 0; }
  .allot__table td { display: block; height: auto; min-width: 0; padding: 0; border: 0; }
  .allot__table .is-rank { grid-column: 1; grid-row: 1; align-self: start; padding: 4px 0; font-size: 11px; }
  .allot__table .is-key { grid-column: 1 / -1; grid-row: 2; }
  .allot__wallet { display: block; width: 100%; min-height: 44px; padding: 9px 0 1px; font-size: 12px; color: #bcc9db; }
  .allot__table .is-num { grid-column: 2; grid-row: 1; font-size: 16px; font-weight: 600; letter-spacing: -0.025em; }
  .allot__table .is-num::after { content: "XDNA"; display: block; margin-top: 3px; font-size: 9px; letter-spacing: 0.09em; color: var(--allot-muted); font-weight: 500; }
  .allot__table .allot__empty { display: block; }
  .allot__empty td { padding: 16px 0; }
  .allot__foot { flex-direction: column; gap: 16px; margin-top: 20px; }
  .allot__pager { width: 100%; justify-content: space-between; }
  .allot__pager .btn-ghost { padding: 12px 16px; }
  .allot__guidance { grid-template-columns: minmax(0, 1fr); gap: 0; margin-top: 20px; }
  .allot__balance { font-size: clamp(21px, 6vw, 32px); }
}

/* Comfortable touch targets on every mobile presale surface. */
@media (max-width: 900px) {
  .nav__menu > summary { width: 44px; height: 44px; }
  .nav__sheet a { min-height: 44px; display: flex; align-items: center; }
}
@media (max-width: 720px) {
  .btn, .step__node { background: #0875c9; }
  .nav__links { gap: 12px; flex-wrap: nowrap; }
  .nav__links > .btn { min-height: 44px; padding: 11px 15px; }
  .copy { width: 44px; height: 44px; flex: 0 0 44px; }
  .footer__links { gap: 4px 20px; }
  .footer__links a { display: inline-flex; align-items: center; min-height: 44px; }
}

/* --------------------------------------------------------------------------
   19. Trustline conduit — a purpose-built masthead, not a floating band
   Lives INSIDE the trustline card: the helix threads the official XRPL
   symbol, turning from cyan (raw) to green (anchored) at the gate, and the
   five validator nodes ride the anchored side of the strand, reaching
   consensus on the real ~3.5s ledger-close cadence. Symbol unmodified;
   placement is an SVG attribute so CSS animation can never displace it.
   -------------------------------------------------------------------------- */

.trust__conduit {
  margin: -6px 0 14px;
  pointer-events: none;
}

.trust__conduit svg {
  display: block;
  width: 100%;
  height: auto;
  max-height: 96px;
  overflow: visible;
}

.trust__conduit path,
.trust__conduit line {
  vector-effect: non-scaling-stroke;
}

.tlc-front,
.tlc-back {
  fill: none;
  stroke: url(#tlcFlow);
  stroke-linecap: round;
}

/* The console instance carries suffixed ids so two mastheads can coexist
   on payment.html without their gradients/masks colliding. */
.console__conduit .tlc-front,
.console__conduit .tlc-back {
  stroke: url(#tlcFlow-pc);
}

.console__conduit .tlc-rungs line {
  stroke: url(#tlcFlow-pc);
}

/* The EARLY GENESIS PHASE bar is the third instance (ids suffixed -eg). It is
   the conduit's own SVG, copied verbatim — same viewBox, same gate transform,
   same pocket — with one addition: a clipPath that reveals the sold fraction
   over a grey copy of the identical coil. Nothing about the drawing is
   re-derived, so the two can never drift apart. */
.dnabar .tlc-front,
.dnabar .tlc-back {
  stroke: url(#tlcFlow-eg);
}

.dnabar .tlc-rungs line {
  stroke: url(#tlcFlow-eg);
}

/* This instance runs BLUE, not green: the bar is analytics, and the site's
   analytics colour is --blue. Only the paint changes — geometry, gate, pocket,
   validators and pulse are the conduit's own, untouched. The trustline card
   keeps cyan-to-green because there the colour means raw-becoming-anchored,
   which is information rather than styling. */
.dnabar .tlc-val {
  fill: rgba(32, 148, 243, 0.35);
  animation-name: valAgreeBlue;
}

@keyframes valAgreeBlue {
  0%, 46% { fill: rgba(32, 148, 243, 0.35); }
  56% { fill: #dbeeff; }
  78% { fill: #2094f3; }
  100% { fill: rgba(32, 148, 243, 0.35); }
}

.dnabar .tlc-gate-inner {
  animation-name: tlcGlowBlue;
}

@keyframes tlcGlowBlue {
  0%, 58% { filter: drop-shadow(0 0 4px rgba(51, 255, 255, 0.3)); }
  72% { filter: drop-shadow(0 0 10px rgba(51, 255, 255, 0.9)) drop-shadow(0 0 20px rgba(32, 148, 243, 0.5)); }
  100% { filter: drop-shadow(0 0 4px rgba(51, 255, 255, 0.3)); }
}

/* Unsold remainder: the same coil, same stroke weights, in the track grey. */
.dnabar__track-front,
.dnabar__track-back {
  fill: none;
  stroke: var(--track-bg);
  stroke-linecap: round;
}

.dnabar__track-front { stroke-width: 2.4; }
.dnabar__track-back { stroke-width: 1.1; opacity: 0.28; }

.dnabar__track-rungs line {
  stroke: var(--track-bg);
  stroke-width: 1;
}

.dnabar__track-val { fill: var(--track-bg); }

.tlc-front {
  stroke-width: 2.4;
  filter: drop-shadow(0 0 3px rgba(0, 212, 255, 0.28));
}

.tlc-back {
  stroke-width: 1.1;
  opacity: 0.28;
}

.tlc-rungs line {
  stroke: url(#tlcFlow);
  stroke-width: 1;
}

/* Consensus rides the anchored strand. */
.tlc-val {
  fill: rgba(74, 222, 128, 0.35);
  animation: valAgree var(--ledger-close) ease-in-out infinite;
}

@keyframes valAgree {
  0%, 46% { fill: rgba(74, 222, 128, 0.35); }
  56% { fill: #d9ffe7; }
  78% { fill: #4ade80; }
  100% { fill: rgba(74, 222, 128, 0.35); }
}

/* The proof light rides each strand's full measured length. Every consumer sets
   its own --plen (path length + dash) on the element, so one keyframe set drives
   the step rails, the chart and all three conduit instances. Kept opaque for the
   whole cycle: the dash pattern, not a fade, is what makes it read as travel. */
@keyframes proofTravel {
  from { stroke-dashoffset: var(--plen); opacity: 0.95; }
  to { stroke-dashoffset: 0; opacity: 0.95; }
}

.tlc-pulse {
  stroke: #eaffff;
  stroke-width: 2.6;
  stroke-linecap: round;
  filter: drop-shadow(0 0 4px rgba(51, 255, 255, 0.8));
  opacity: 0;
  animation: proofTravel 6s linear infinite;
}

.tlc-gate path {
  fill: #fff;
}

.tlc-gate {
  opacity: 0.94;
}

.tlc-gate-inner {
  transform-box: fill-box;
  transform-origin: center;
  animation: tlcGlow var(--ledger-close) ease-in-out infinite;
}

@keyframes tlcGlow {
  0%, 58% { filter: drop-shadow(0 0 4px rgba(51, 255, 255, 0.3)); }
  72% { filter: drop-shadow(0 0 10px rgba(51, 255, 255, 0.9)) drop-shadow(0 0 20px rgba(74, 222, 128, 0.45)); }
  100% { filter: drop-shadow(0 0 4px rgba(51, 255, 255, 0.3)); }
}

@media (max-width: 720px) {
  .trust__conduit svg {
    max-height: 64px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .tlc-val,
  .tlc-pulse,
  .tlc-gate-inner {
    animation: none !important;
  }

  .tlc-gate-inner {
    filter: drop-shadow(0 0 4px rgba(51, 255, 255, 0.3));
  }
}

/* Console masthead: spans both columns above the QR and the address, so the
   card opens by showing what sending XRP actually does — data through the
   ledger. Same component as the trustline card, scaled for a wider surface. */
.console__conduit {
  grid-column: 1 / -1;
  margin: -6px 0 6px;
  pointer-events: none;
}

.console__conduit svg {
  display: block;
  width: 100%;
  height: auto;
  max-height: 88px;
  overflow: visible;
}

.console__conduit path,
.console__conduit line {
  vector-effect: non-scaling-stroke;
}

@media (max-width: 860px) {
  .console__conduit svg {
    max-height: 62px;
  }
}

/* Keep the payment masthead proportional instead of letterboxing its strands. */
.page-payment .console {
  row-gap: 24px;
}

.page-payment .console__conduit {
  width: min(100%, 760px);
  min-width: 0;
  justify-self: center;
  margin: -6px 0 0;
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}

.page-payment .console__conduit svg {
  max-height: none;
}

.page-payment #how .step__helix {
  height: 32px;
  overflow: hidden;
  color: var(--cyan);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.page-payment #how .step:nth-child(2) .step__helix {
  color: var(--teal-lt);
}

.page-payment #how .step__front {
  stroke: currentColor;
  stroke-width: 2.4;
}

.page-payment #how .step__back {
  stroke: currentColor;
  stroke-width: 1.1;
  opacity: 0.32;
}

.page-payment #how .step__helix-rungs line {
  stroke: currentColor;
  stroke-width: 1;
  opacity: 0.25;
}

.page-payment #how .step__pulse {
  animation-duration: 6s;
  stroke-width: 2.6;
}

@media (min-width: 900px) {
  .page-payment #how .step__helix { margin-right: -6px; }
}

@media (max-width: 540px) {
  /* Crop the outer coils, not the centered mark, to keep mobile detail legible. */
  .page-payment .console__conduit svg {
    width: calc(100% + 120px);
    max-width: none;
    margin-left: -60px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-payment #how .step__pulse { animation: none !important; }
}

/* Footer structure: identity (logo + attribution) reads as one cluster on the
   left, navigation on the right. Previously brand, badge and links were three
   loose siblings in a space-between row, which stranded the badge in ~360px of
   dead space on desktop and collided them on mobile. */
.footer__identity {
  display: flex;
  align-items: center;
  gap: 20px;
  min-width: 0;
}


@media (max-width: 720px) {
  .footer__shell {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    padding: 34px var(--gut) 30px;
  }

  .footer__identity {
    gap: 14px;
  }


  .footer__links {
    gap: 18px;
  }
}

/* Available to assistive tech, removed from the visual layout. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* A scrollable box must be reachable by keyboard, and must show where it is. */
.allot__scroll:focus-visible {
  outline: 2px solid var(--cyan-br);
  outline-offset: 2px;
}

.allot__input[aria-invalid="true"] {
  border-color: rgba(239, 68, 68, 0.55);
}

.allot__select:focus-visible,
.allot__input:focus-visible {
  outline: 2px solid var(--cyan-br);
  outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   Homepage price sequence
   One ledger-grade genome rail connects all three rates. The visual language
   intentionally mirrors the Early Genesis widget: layered strands, measured
   rungs, a bare official XRPL mark and a single traveling proof signal.
   -------------------------------------------------------------------------- */

.section--phases {
  position: relative;
  isolation: isolate;
  background:
    radial-gradient(760px 460px at 12% 35%, rgba(0, 212, 255, 0.075), transparent 72%),
    radial-gradient(720px 440px at 90% 72%, rgba(255, 210, 31, 0.035), transparent 74%),
    radial-gradient(rgba(0, 212, 255, 0.052) 1px, transparent 1.3px) 0 0 / 30px 30px,
    #0b111e;
}

.section--phases::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(0, 212, 255, 0.025) 50%, transparent);
  mask-image: linear-gradient(transparent, #000 14%, #000 86%, transparent);
}

.pricepath {
  margin-top: 36px;
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(0, 212, 255, 0.18);
  border-radius: 24px;
  background:
    radial-gradient(580px 270px at 10% 20%, rgba(32, 148, 243, 0.12), transparent 74%),
    linear-gradient(145deg, rgba(16, 28, 48, 0.97), rgba(7, 13, 24, 0.98));
  box-shadow:
    0 28px 82px rgba(0, 0, 0, 0.42),
    inset 0 1px 0 rgba(255, 255, 255, 0.055);
}

.pricepath::before {
  content: "";
  position: absolute;
  z-index: 4;
  top: -1px;
  left: 8%;
  right: 8%;
  height: 2px;
  background: linear-gradient(90deg, transparent, #00d4ff 24%, #67e8a5 55%, #ffd21f 84%, transparent);
  box-shadow: 0 0 18px rgba(0, 212, 255, 0.28);
}

.pricepath::after {
  content: "";
  position: absolute;
  inset: 88px 0 0;
  pointer-events: none;
  opacity: 0.52;
  background:
    linear-gradient(rgba(255, 255, 255, 0.017) 1px, transparent 1px) 0 0 / 100% 38px,
    linear-gradient(90deg, rgba(255, 255, 255, 0.014) 1px, transparent 1px) 0 0 / 38px 100%;
  mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}

.pricepath > * {
  position: relative;
  z-index: 2;
}

.pricepath__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 26px 30px 22px;
  border-bottom: 1px solid rgba(0, 212, 255, 0.1);
  background: linear-gradient(90deg, rgba(0, 212, 255, 0.025), transparent 58%);
}

.pricepath__kicker {
  display: block;
  margin-bottom: 8px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.2em;
  color: var(--cyan);
}

.pricepath .chart__title {
  font-size: 25px;
  letter-spacing: -0.025em;
}

.pricepath .chart__sub {
  margin-top: 7px;
  color: #99a4b4;
}

.pricepath__live {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  flex: 0 0 auto;
  padding: 8px 12px;
  border: 1px solid rgba(239, 68, 68, 0.24);
  border-radius: 999px;
  background: rgba(239, 68, 68, 0.07);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.pricepath__live-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--live-dot);
  box-shadow: 0 0 12px rgba(239, 68, 68, 0.85);
  animation: pulse 1.6s infinite;
}

.pricepath__plot {
  position: relative;
  z-index: 2;
  isolation: isolate;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: start;
  gap: 44px;
  min-height: 392px;
  padding: 38px 44px 168px;
}

.pricepath__point {
  --stage-accent: #67e8a5;
  --stage-rgb: 103, 232, 165;
  appearance: none;
  position: relative;
  z-index: 3;
  display: flex;
  min-width: 0;
  min-height: 166px;
  padding: 19px 20px;
  flex-direction: column;
  align-items: stretch;
  text-align: left;
  overflow: visible;
  border: 1px solid rgba(var(--stage-rgb), 0.24);
  border-radius: 17px;
  background:
    radial-gradient(230px 130px at 14% 0%, rgba(var(--stage-rgb), 0.105), transparent 72%),
    linear-gradient(180deg, rgba(14, 24, 41, 0.985), rgba(8, 14, 25, 0.985));
  color: var(--ink);
  box-shadow:
    0 18px 44px rgba(0, 0, 0, 0.34),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
  cursor: pointer;
  transition: transform 0.28s ease, border-color 0.28s ease, box-shadow 0.28s ease, opacity 0.28s ease;
}

.pricepath__point::before {
  content: "";
  position: absolute;
  left: 18px;
  right: 18px;
  top: -1px;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, var(--stage-accent), transparent);
}

.pricepath__point::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 100%;
  width: 1px;
  height: 96px;
  background: linear-gradient(180deg, rgba(var(--stage-rgb), 0.5), rgba(var(--stage-rgb), 0.08));
  box-shadow: 0 0 10px rgba(var(--stage-rgb), 0.16);
  pointer-events: none;
}

.pricepath__point[data-stage="1"] {
  --stage-accent: #00d4ff;
  --stage-rgb: 0, 212, 255;
}

.pricepath__point[data-stage="3"] {
  --stage-accent: #ffd21f;
  --stage-rgb: 255, 210, 31;
}

.pricepath__point--live {
  border-color: rgba(0, 212, 255, 0.52);
  background:
    radial-gradient(250px 145px at 14% 0%, rgba(0, 212, 255, 0.16), transparent 72%),
    linear-gradient(180deg, rgba(16, 36, 62, 0.99), rgba(8, 16, 29, 0.99));
  box-shadow:
    0 20px 48px rgba(0, 0, 0, 0.38),
    0 0 30px rgba(0, 212, 255, 0.065),
    inset 0 1px 0 rgba(255, 255, 255, 0.07);
}

.pricepath__point:hover,
.pricepath__point.is-hot,
.pricepath__point:focus-visible {
  border-color: rgba(var(--stage-rgb), 0.78);
  box-shadow:
    0 23px 56px rgba(0, 0, 0, 0.42),
    0 0 28px rgba(var(--stage-rgb), 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.07);
  transform: translateY(-4px);
}

.pricepath[data-look]:not([data-look=""]) .pricepath__point:not(.is-hot) {
  opacity: 0.44;
}

.pricepath__point-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.pricepath__index {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.19em;
  color: var(--stage-accent);
}

.pricepath__state {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.16em;
  color: #aeb8c7;
  text-transform: uppercase;
}

.pricepath__point--live .pricepath__state {
  color: #fca5a5;
}

.pricepath__rate {
  display: flex;
  align-items: baseline;
  gap: 9px;
  margin-top: auto;
  line-height: 1;
}

.pricepath__rate strong {
  font-size: clamp(42px, 4.4vw, 60px);
  letter-spacing: -0.055em;
  color: var(--ink);
  text-shadow: 0 5px 24px rgba(var(--stage-rgb), 0.13);
}

.pricepath__rate span {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.16em;
  color: var(--stage-accent);
}

.pricepath__basis {
  margin-top: 9px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.17em;
  color: #8f9aaa;
  text-transform: uppercase;
}

/* One continuous rail and one XRPL gate, matching the hero widget. */
.pricepath__genome {
  position: absolute;
  z-index: 1;
  left: 0;
  right: 0;
  bottom: 28px;
  height: 120px;
  color: var(--cyan);
  pointer-events: none;
  opacity: 1;
  transition: opacity 0.75s ease, filter 0.3s ease;
}

.pricepath__genome::before {
  content: "";
  position: absolute;
  inset: 22% 7%;
  background: radial-gradient(ellipse at center, rgba(0, 212, 255, 0.07), transparent 70%);
  filter: blur(8px);
}

.pricepath__genome svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  overflow: visible;
}

.pricepath__genome path,
.pricepath__genome line {
  vector-effect: non-scaling-stroke;
}

.pricepath__genome-aura,
.pricepath__genome-strand,
.pricepath__genome-signal {
  fill: none;
  stroke-linecap: round;
}

.pricepath__genome-aura {
  stroke: url(#priceGenomeFlow);
  stroke-width: 15;
  opacity: 0.045;
  filter: blur(4px);
}

.pricepath__genome-strand {
  stroke: url(#priceGenomeFlow);
}

.pricepath__genome-strand--front {
  stroke-width: 2.4;
  opacity: 0.9;
  filter: drop-shadow(0 0 4px rgba(0, 212, 255, 0.34));
}

.pricepath__genome-strand--back {
  stroke-width: 1.1;
  opacity: 0.3;
}

.pricepath__genome-rungs line {
  stroke: url(#priceGenomeFlow);
  stroke-width: 1;
  opacity: 0.3;
}

.pricepath__genome-signal {
  stroke: #efffff;
  stroke-width: 2.7;
  stroke-dasharray: 0.035 0.965;
  stroke-dashoffset: 1;
  opacity: 0.92;
  filter: drop-shadow(0 0 4px rgba(51, 255, 255, 0.95));
  animation: genomeTravel 5.6s linear infinite;
}

.pricepath__ledger {
  position: absolute;
  z-index: 3;
  left: 50%;
  top: 50%;
  display: grid;
  width: 104px;
  height: 76px;
  place-items: center;
  transform: translate(-50%, -50%);
  background: radial-gradient(ellipse, #091321 0 54%, rgba(9, 19, 33, 0.94) 61%, transparent 73%);
}

.pricepath__ledger img {
  width: 49px;
  height: 37px;
  object-fit: contain;
  opacity: 0.98;
  filter: drop-shadow(0 0 7px rgba(51, 255, 255, 0.42));
  transition: filter 0.28s ease, transform 0.28s ease;
}

.pricepath__node {
  position: absolute;
  z-index: 2;
  top: 50%;
  width: 9px;
  height: 9px;
  border: 1px solid currentColor;
  border-radius: 50%;
  background: #0b1727;
  box-shadow:
    0 0 0 6px rgba(0, 212, 255, 0.06),
    0 0 14px rgba(0, 212, 255, 0.35);
  transform: translate(-50%, -50%);
  transition: box-shadow 0.28s ease, transform 0.28s ease;
}

.pricepath__node--one {
  left: 20%;
  color: #00d4ff;
}

.pricepath__node--three {
  left: 80%;
  color: #ffd21f;
  box-shadow:
    0 0 0 6px rgba(255, 210, 31, 0.05),
    0 0 14px rgba(255, 210, 31, 0.25);
}

.pricepath[data-look="1"] .pricepath__node--one,
.pricepath[data-look="3"] .pricepath__node--three {
  box-shadow:
    0 0 0 9px rgba(255, 255, 255, 0.06),
    0 0 21px currentColor;
  transform: translate(-50%, -50%) scale(1.28);
}

.pricepath[data-look="2"] .pricepath__ledger img {
  filter: drop-shadow(0 0 10px rgba(103, 232, 165, 0.78));
  transform: scale(1.08);
}

.pricepath.is-pending .pricepath__genome {
  opacity: 0;
}

.pricepath__drop {
  --drop-rgb: 103, 232, 165;
  position: absolute;
  z-index: 4;
  top: 59%;
  padding: 5px 8px;
  border: 1px solid rgba(var(--drop-rgb), 0.17);
  border-radius: 999px;
  background: rgba(7, 13, 24, 0.94);
  color: #909cab;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.12em;
  white-space: nowrap;
}

.pricepath__drop--one { left: 32.8%; }
.pricepath__drop--two {
  --drop-rgb: 255, 210, 31;
  left: 66.1%;
}

.pricepath__footer {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 30px 24px;
  color: #7f8998;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.pricepath__footer-line {
  position: relative;
  width: 96px;
  height: 1px;
  background: linear-gradient(90deg, #00d4ff, #67e8a5, #ffd21f);
}

.pricepath__footer-line::after {
  content: "";
  position: absolute;
  right: -1px;
  top: -3px;
  width: 7px;
  height: 7px;
  border-top: 1px solid #ffd21f;
  border-right: 1px solid #ffd21f;
  transform: rotate(45deg);
}

/* Stage cards ------------------------------------------------------------- */

.stages {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
  gap: 16px;
  margin-top: 20px;
}

.section--phases .phase {
  --stage-rgb: 0, 212, 255;
  min-width: 0;
  height: 100%;
  padding: 1px;
  border-radius: 22px;
}

.section--phases .phase[data-stage="2"] { --stage-rgb: 103, 232, 165; }
.section--phases .phase[data-stage="3"] { --stage-rgb: 255, 210, 31; }

.section--phases .phase__ring {
  opacity: 0.45;
  border-radius: 22px;
}

.section--phases .phase__card {
  position: relative;
  isolation: isolate;
  display: flex;
  min-height: 366px;
  height: 100%;
  padding: 24px;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid rgba(var(--stage-rgb), 0.2);
  border-top: 2px solid var(--stage-accent);
  border-radius: 21px;
  background:
    radial-gradient(280px 165px at 94% 0%, rgba(var(--stage-rgb), 0.085), transparent 72%),
    linear-gradient(155deg, rgba(15, 26, 44, 0.99), rgba(7, 13, 24, 0.99));
  box-shadow:
    0 20px 48px rgba(0, 0, 0, 0.32),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
  transition: border-color 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
}

.section--phases .phase__card::before {
  content: "";
  position: absolute;
  z-index: -1;
  right: -46px;
  top: -46px;
  width: 150px;
  height: 150px;
  border: 1px solid rgba(var(--stage-rgb), 0.06);
  border-radius: 50%;
  box-shadow: 0 0 0 28px rgba(var(--stage-rgb), 0.018);
}

.section--phases .phase--live .phase__card {
  padding-bottom: 24px;
  border-color: rgba(0, 212, 255, 0.43);
  background:
    radial-gradient(300px 175px at 94% 0%, rgba(0, 212, 255, 0.135), transparent 72%),
    linear-gradient(155deg, rgba(17, 38, 65, 0.99), rgba(8, 17, 31, 0.99));
}

.section--phases .phase.is-hot .phase__card,
.section--phases .phase:focus-visible .phase__card {
  border-color: rgba(var(--stage-rgb), 0.7);
  box-shadow:
    0 24px 58px rgba(0, 0, 0, 0.38),
    0 0 30px rgba(var(--stage-rgb), 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.section--phases .phase__head {
  min-height: 32px;
}

.section--phases .phase__n {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #a7b1bf;
}

.phase__index {
  display: inline-grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border: 1px solid rgba(var(--stage-rgb), 0.25);
  border-radius: 9px;
  color: var(--stage-accent);
  background: rgba(var(--stage-rgb), 0.055);
  font-size: 10px;
  letter-spacing: 0.08em;
}

.section--phases .phase__status {
  padding: 6px 9px;
  border: 1px solid rgba(239, 68, 68, 0.2);
  background: rgba(239, 68, 68, 0.06);
  font-size: 9px;
  color: #f4f6f9;
  text-transform: uppercase;
}

.section--phases .phase__status--future {
  border-color: rgba(var(--stage-rgb), 0.17);
  background: rgba(var(--stage-rgb), 0.04);
  color: #9fa9b8;
}

.section--phases .phase__rate {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-top: 25px;
  color: var(--ink);
  line-height: 1;
}

.phase__rate-prefix {
  font-size: 13px;
  font-weight: 700;
  color: #b4bdca;
}

.phase__rate-number {
  font-size: clamp(44px, 4vw, 58px);
  font-weight: 850;
  letter-spacing: -0.055em;
  color: var(--ink);
  text-shadow: 0 6px 24px rgba(var(--stage-rgb), 0.12);
}

.phase__rate-unit {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.15em;
  color: var(--stage-accent);
}

.section--phases .phase__name {
  margin-top: 14px;
  font-size: 20px;
  letter-spacing: -0.02em;
}

.phase__copy {
  margin: 7px 0 0;
  color: #959faf;
  font-size: 13px;
  line-height: 1.52;
}

/* Exact card-level echo of the hero treatment: no badge or orbit around XRPL. */
.section--phases .phase__strand {
  position: relative;
  left: auto;
  right: auto;
  bottom: auto;
  display: block;
  flex: none;
  width: 100%;
  height: 54px;
  margin: 17px 0 0;
  color: var(--stage-accent);
  opacity: 0.88;
  pointer-events: none;
  background: none;
  mask-image: none;
}

.section--phases .phase__strand svg {
  width: 100%;
  height: 100%;
  max-width: none;
  overflow: visible;
}

.phase__strand-front,
.phase__strand-back,
.phase__strand-signal {
  fill: none;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}

.phase__strand-front,
.phase__strand-back {
  stroke: currentColor;
}

.phase__strand-front {
  stroke-width: 2;
  opacity: 0.78;
  filter: drop-shadow(0 0 3px rgba(var(--stage-rgb), 0.4));
}

.phase__strand-back {
  stroke-width: 1;
  opacity: 0.27;
}

.phase__strand-rungs line {
  stroke: currentColor;
  stroke-width: 0.9;
  opacity: 0.28;
  vector-effect: non-scaling-stroke;
}

.phase__strand-signal {
  stroke: #efffff;
  stroke-width: 2.3;
  stroke-dasharray: 0.055 0.945;
  stroke-dashoffset: 1;
  opacity: 0;
  filter: drop-shadow(0 0 4px rgba(var(--stage-rgb), 0.9));
}

.phase--live .phase__strand-signal,
.phase.is-hot .phase__strand-signal,
.phase:focus-visible .phase__strand-signal {
  opacity: 0.92;
  animation: strandTravel 3.7s linear infinite;
}

.phase__strand-ledger {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 50%;
  display: grid;
  width: 66px;
  height: 48px;
  place-items: center;
  transform: translate(-50%, -50%);
  background: radial-gradient(ellipse, #0a1423 0 54%, rgba(10, 20, 35, 0.95) 62%, transparent 74%);
}

.phase__strand-ledger img {
  width: 36px;
  height: 27px;
  object-fit: contain;
  opacity: 0.88;
  filter: drop-shadow(0 0 5px rgba(var(--stage-rgb), 0.4));
  transition: opacity 0.28s ease, filter 0.28s ease, transform 0.28s ease;
}

.phase--live .phase__strand-ledger img {
  opacity: 1;
  filter: drop-shadow(0 0 7px rgba(0, 212, 255, 0.55));
}

.phase.is-hot .phase__strand-ledger img,
.phase:focus-visible .phase__strand-ledger img {
  opacity: 1;
  filter: drop-shadow(0 0 8px rgba(var(--stage-rgb), 0.7));
  transform: scale(1.06);
}

.phase__progress,
.phase__availability {
  min-height: 56px;
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid rgba(var(--stage-rgb), 0.13);
}

.phase__progress-head,
.phase__availability {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.phase__progress-head span,
.phase__availability span {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.15em;
  color: #7f8a99;
  text-transform: uppercase;
}

.phase__progress-head strong,
.phase__availability strong {
  font-size: 12px;
  color: #dbe2eb;
}

.phase__progress-track {
  height: 7px;
  margin-top: 11px;
  overflow: hidden;
  border: 1px solid rgba(0, 212, 255, 0.1);
  border-radius: 999px;
  background: rgba(3, 8, 16, 0.85);
}

.phase__progress-track span {
  display: block;
  width: var(--progress);
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #2094f3, #00d4ff, #8af6ff);
  box-shadow: 0 0 16px rgba(0, 212, 255, 0.45);
  transition: width 1.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.stages.is-pending .phase__progress-track span {
  width: 0;
}

@keyframes genomeTravel {
  from { stroke-dashoffset: 1; }
  to { stroke-dashoffset: 0; }
}

@keyframes strandTravel {
  from { stroke-dashoffset: 1; }
  to { stroke-dashoffset: 0; }
}

@media (max-width: 900px) {
  .stages {
    grid-template-columns: 1fr;
    gap: 13px;
  }

  .section--phases .phase__card,
  .section--phases .phase--live .phase__card {
    min-height: 328px;
  }
}

@media (max-width: 720px) {
  .pricepath {
    margin-top: 28px;
    border-radius: 20px;
  }

  .pricepath__head {
    align-items: flex-start;
    padding: 20px 18px 18px;
  }

  .pricepath__kicker {
    margin-bottom: 6px;
    font-size: 8px;
  }

  .pricepath .chart__title {
    font-size: 21px;
  }

  .pricepath .chart__sub {
    font-size: 10px;
    letter-spacing: 0.09em;
  }

  .pricepath__live {
    padding: 6px 8px;
    gap: 6px;
    font-size: 8px;
    letter-spacing: 0.11em;
  }

  .pricepath__plot {
    gap: 7px;
    min-height: 296px;
    padding: 30px 12px 119px;
  }

  .pricepath__point {
    min-height: 140px;
    padding: 13px 10px;
    border-radius: 14px;
  }

  .pricepath__point::before {
    left: 9px;
    right: 9px;
  }

  .pricepath__point::after {
    height: 54px;
  }

  .pricepath__point:hover,
  .pricepath__point.is-hot,
  .pricepath__point:focus-visible {
    transform: none;
  }

  .pricepath__point-head {
    gap: 5px;
  }

  .pricepath__index,
  .pricepath__state {
    font-size: 8px;
  }

  .pricepath__rate {
    display: block;
  }

  .pricepath__rate strong {
    font-size: clamp(31px, 10vw, 40px);
  }

  .pricepath__rate span {
    display: block;
    margin-top: 6px;
    font-size: 8px;
  }

  .pricepath__basis {
    margin-top: 7px;
    font-size: 8px;
    letter-spacing: 0.1em;
  }

  .pricepath__genome {
    bottom: 14px;
    height: 86px;
  }

  .pricepath__ledger {
    width: 70px;
    height: 52px;
  }

  .pricepath__ledger img {
    width: 35px;
    height: 26px;
  }

  .pricepath__node--one { left: 17%; }
  .pricepath__node--three { left: 83%; }

  .pricepath__drop {
    display: none;
  }

  .pricepath__footer {
    gap: 9px;
    padding: 0 18px 18px;
    font-size: 7px;
    letter-spacing: 0.1em;
  }

  .pricepath__footer-line {
    width: 44px;
  }

  .section--phases .phase__card,
  .section--phases .phase--live .phase__card {
    min-height: 328px;
    padding: 20px;
  }

  .section--phases .phase__rate {
    margin-top: 22px;
  }

  .phase__rate-number {
    font-size: 46px;
  }

  .section--phases .phase__name {
    margin-top: 12px;
    font-size: 19px;
  }

  .section--phases .phase__strand {
    height: 52px;
    margin-top: 13px;
  }

  .phase__strand-ledger {
    width: 62px;
    height: 46px;
  }

  .phase__strand-ledger img {
    width: 34px;
    height: 25px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pricepath__live-dot,
  .pricepath__genome-signal,
  .phase__strand-signal {
    animation: none !important;
  }

  .pricepath__point,
  .pricepath__genome,
  .pricepath__ledger img,
  .phase__strand-ledger img,
  .phase__progress-track span,
  .section--phases .phase__card {
    transition: none;
  }

  .pricepath__genome-signal,
  .phase--live .phase__strand-signal {
    stroke-dasharray: 0.06 0.94;
    stroke-dashoffset: 0.34;
    opacity: 0.84;
  }
}

/* Owner-requested footer treatment, scoped to the three presale pages. */
.page-home .section--trust,
.page-allotment .section--allot,
.page-payment .section--support { border-bottom: 0; }
.page-home .section--trust::after,
.page-allotment .section--allot::after,
.page-payment .section--support::after { display: none; }
.page-home .section--trust > .shell,
.page-payment .section--support > .shell { padding-bottom: 56px; }
.page-allotment .section--allot > .shell { padding-bottom: 46px; }

.footer--refined {
  background: radial-gradient(ellipse at 15% 0, rgba(0, 212, 255, 0.045), transparent 60%), #080f1b;
}
.footer--refined .footer__shell {
  position: relative;
  display: block;
  padding: 0 var(--gut);
}
.footer--refined .footer__shell::before {
  content: "";
  position: absolute;
  top: 0;
  left: var(--gut);
  right: var(--gut);
  height: 1px;
  background: linear-gradient(90deg, rgba(0, 212, 255, 0.65), rgba(0, 212, 255, 0.16) 60%, transparent);
}
.page-payment .footer--refined::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 1px;
  background: rgba(0, 212, 255, 0.3);
  pointer-events: none;
}
.page-payment .footer__shell::before { display: none; }
.footer__main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 36px;
  padding: 36px 0 30px;
}
.footer--refined .footer__identity { gap: 18px; }
.footer__token { display: block; width: 64px; height: 64px; flex-shrink: 0; object-fit: contain; }
.footer__name { font-size: 30px; font-weight: 750; letter-spacing: -0.04em; line-height: 1; }
.footer__tagline { max-width: 280px; margin: 10px 0 0; color: #9daec2; font-size: 13px; line-height: 1.6; }
.footer--refined .footer__links { gap: 14px 28px; }
.footer--refined .footer__links a {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 44px;
  font-size: 14px;
  font-weight: 550;
  color: #d8e2ee;
}
.footer--refined .footer__links a:first-child { color: var(--cyan); }
.footer--refined .footer__links a:hover { color: #fff; }
.footer--refined .footer__links svg { flex-shrink: 0; color: var(--cyan); }
.footer__base {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 24px;
  padding: 16px 0 20px;
  border-top: 1px solid rgba(169, 196, 227, 0.1);
  font-size: 12px;
}
.footer__protocol { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; color: #c0cddd; font-weight: 600; }
.footer__protocol span { color: var(--cyan); }
.footer__network { display: inline-flex; align-items: center; gap: 12px; color: #a6b7ca; }
.footer__network img { display: block; object-fit: contain; }
.footer__network-separator { color: #42576e; }

/* One set of rate cards. The original stage controls and helix stay connected. */
.stage-sequence { overflow: visible; }
.stage-sequence::after { display: none; }
.stage-sequence .pricepath__head { padding: 28px; border-radius: 24px 24px 0 0; }
.stage-sequence__identity { display: flex; align-items: center; gap: 16px; min-width: 0; }
.stage-sequence__token { display: block; flex-shrink: 0; width: 52px; height: 52px; object-fit: contain; }
.stage-sequence .pricepath__kicker { font-size: 10px; }
.stage-sequence .chart__title { font-size: 24px; }
.stage-sequence__caption { margin: 0; font-size: 13px; line-height: 1.6; text-align: right; color: #a8b8cb; }
.stage-sequence .stages {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
  gap: 18px;
  min-height: 0;
  margin: 0;
  padding: 28px 28px 0;
}
.stage-sequence .phase { padding: 0; transform: none; }
.stage-sequence .phase[data-stage="2"] { --stage-accent: #85e3a4; }
.stage-sequence .phase[data-stage="3"] { --stage-accent: #ffdb58; }
.stage-sequence .phase__card {
  min-height: 390px;
  padding: 24px;
  border-radius: 18px;
  overflow: visible;
  box-shadow: none;
  background: radial-gradient(ellipse at 0 0, rgba(var(--stage-rgb), 0.09), transparent 75%), #0c1726;
}
.stage-sequence .phase__card::before { display: none; }
.stage-sequence .phase--live .phase__card { background: radial-gradient(ellipse at 0 0, rgba(0, 212, 255, 0.16), transparent 80%), #0c192b; }
.stage-sequence .pricepath__point {
  --stage-accent: inherit;
  --stage-rgb: inherit;
  display: block;
  width: 100%;
  min-height: 0;
  padding: 0 0 24px;
  margin: 0;
  border: 0;
  border-radius: 4px;
  background: none;
  box-shadow: none;
  color: #fff;
  opacity: 1;
  transform: none;
}
.stage-sequence .pricepath__point::before,
.stage-sequence .pricepath__point::after { display: none; }
.stage-sequence[data-look]:not([data-look=""]) .pricepath__point:not(.is-hot) { opacity: 1; }
.stage-sequence .pricepath__point:focus-visible { outline: 2px solid var(--stage-accent); outline-offset: 8px; }
.stage-sequence .phase__head { gap: 8px; }
.stage-sequence .phase__n { gap: 8px; font-size: 11px; letter-spacing: 0.07em; color: #c0cddd; }
.stage-sequence .phase__index { width: 27px; height: 27px; border-radius: 8px; }
.stage-sequence .phase__status { font-size: 9px; padding: 5px 7px; letter-spacing: 0.05em; white-space: nowrap; }
.stage-sequence .phase__status--future { color: var(--stage-accent); border-color: rgba(var(--stage-rgb), 0.3); }
.stage-sequence__quote { display: flex; align-items: baseline; gap: 12px; margin-top: 28px; line-height: 1; }
.stage-sequence .phase__rate-number { font-size: clamp(76px, 8vw, 108px); font-weight: 650; letter-spacing: -0.065em; }
.stage-sequence .phase__rate-unit { font-size: 13px; letter-spacing: 0.12em; }
.stage-sequence .pricepath__basis { display: block; margin: 10px 0 0; color: #afbed0; font-size: 11px; font-weight: 500; letter-spacing: 0.08em; }
.stage-sequence .phase__name { margin: 0; font-size: 20px; line-height: 1.3; }
.stage-sequence .phase__copy { margin: 10px 0 26px; color: #a7b6c8; font-size: 13px; line-height: 1.65; }
.stage-sequence .phase__progress,
.stage-sequence .phase__availability { min-height: 60px; }
.stage-sequence .phase__progress-head span,
.stage-sequence .phase__availability span { color: #a7b6c8; font-size: 9px; letter-spacing: 0.1em; }

/* Animate the light, never the recorded progress or the unfilled track. */
@media (prefers-reduced-motion: no-preference) {
  .page-home .stage-sequence .phase--live .phase__progress-track > span {
    position: relative;
    overflow: hidden;
  }

  .page-home .stage-sequence .phase--live .phase__progress-track > span::after {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 24%;
    border-radius: inherit;
    background: linear-gradient(90deg, transparent, rgba(234, 255, 255, 0.9), transparent);
    pointer-events: none;
    animation: stageProgressSweep 4.8s ease-in-out infinite;
  }
}

@keyframes stageProgressSweep {
  0%, 12% { transform: translateX(-110%); opacity: 0; }
  20%, 68% { opacity: 0.85; }
  80%, 100% { transform: translateX(430%); opacity: 0; }
}

.stage-sequence .phase__availability strong { text-align: right; }
.stage-sequence__connection { padding: 22px 28px 24px; }
.stage-sequence .pricepath__genome { position: relative; inset: auto; width: 100%; height: 92px; }
.stage-sequence .pricepath__conduit { overflow: hidden; }
.pricepath__coil--early :is(.tlc-front, .tlc-back, .tlc-rungs line) { stroke: url(#priceGenomeEarlyFlow); }
.pricepath__coil--final :is(.tlc-front, .tlc-back, .tlc-rungs line) { stroke: url(#priceGenomeFinalFlow); }
.pricepath__coils { transform-box: view-box; transform-origin: center; }
/* Tall mobile groups may never meet the legacy chart's 25% reveal threshold. */
.stage-sequence.is-pending .pricepath__genome { opacity: 1; }
.stage-sequence .stages.is-pending .phase__progress-track span { width: var(--progress); }
.stage-sequence__legend { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 4px 0 0; font-size: 10px; color: #9aadc4; letter-spacing: 0.09em; text-transform: uppercase; }
.stage-sequence__legend span:nth-child(2) { color: #d6e3f1; text-align: center; }

@media (max-width: 1050px) {
  .footer__main { grid-template-columns: 1fr; gap: 24px; }
  .footer--refined .footer__links { justify-content: space-between; gap: 16px; }
  .stage-sequence .stages { gap: 12px; padding: 20px 18px 0; }
  .stage-sequence .phase__card { padding: 20px 16px; }
  .stage-sequence .phase__name { font-size: 18px; }
  .stage-sequence .phase__rate-number { font-size: 84px; }
  .stage-sequence .phase__rate-unit { font-size: 11px; }
}
@media (max-width: 760px) {
  .stage-sequence .stages { grid-template-columns: 1fr; gap: 18px; padding: 20px 18px 0; }
  .stage-sequence .pricepath__head { padding: 22px 18px; }
  .stage-sequence .chart__title { font-size: 20px; }
  .stage-sequence .pricepath__kicker { font-size: 8px; letter-spacing: 0.12em; }
  .stage-sequence__identity { gap: 12px; }
  .stage-sequence__token { width: 44px; height: 44px; }
  .stage-sequence__caption { display: none; }
  .stage-sequence .phase__card { min-height: 0; padding: 24px; }
  .stage-sequence .phase__n { font-size: 12px; }
  .stage-sequence__quote { margin-top: 24px; }
  .stage-sequence .phase__rate-number { font-size: 96px; }
  .stage-sequence .phase__name { font-size: 21px; }
  .stage-sequence .phase__copy { margin-bottom: 24px; }
  .stage-sequence__connection { padding: 20px 18px; }
  .stage-sequence .pricepath__genome { height: 68px; }
  .stage-sequence .pricepath__coils { transform: scaleX(2); }
  .stage-sequence__legend { justify-content: center; margin-top: 8px; }
  .stage-sequence__legend span:first-child,
  .stage-sequence__legend span:last-child { display: none; }
}
@media (max-width: 720px) {
  .page-home .section--trust > .shell,
  .page-payment .section--support > .shell { padding-bottom: 40px; }
  .page-allotment .section--allot > .shell { padding-bottom: 30px; }
  .footer__main { padding: 28px 0 18px; gap: 22px; }
  .footer--refined .footer__identity { gap: 16px; }
  .footer__token { width: 56px; height: 56px; }
  .footer__name { font-size: 27px; }
  .footer__tagline { font-size: 12px; margin-top: 8px; }
  .footer--refined .footer__links { display: grid; grid-template-columns: 1fr; gap: 0; }
  .footer--refined .footer__links a { min-height: 48px; border-bottom: 1px solid rgba(169, 196, 227, 0.08); }
  .footer--refined .footer__links a:last-child { border: 0; }
  .footer__base { gap: 4px 20px; padding: 10px 0 24px; }
  .footer__network { gap: 9px; font-size: 11px; min-height: 36px; }
}
/* Desktop allotment workspace. Mobile and other pages retain their geometry. */
@media (min-width: 1024px) {
  .page-allotment { --gut: clamp(32px, 2.5vw, 48px); }
  .page-allotment .section--allot > .shell,
  .page-allotment .nav__inner,
  .page-allotment .footer__shell { max-width: 1440px; }
  .page-allotment .allot__dashboard { align-items: start; }

  .page-allotment .allot__search-head h2 { font-size: 26px; }
  .page-allotment .allot__search-head p,
  .page-allotment .allot__help { font-size: 14px; }
  .page-allotment .allot__label,
  .page-allotment .allot__go { font-size: 16px; }
  .page-allotment .allot__input { font-size: 17px; }
  .page-allotment .allot__input::placeholder { font-size: 15px; }
  .page-allotment .allot__status { font-size: 15px; }

  .page-allotment .allot__overview h2 { font-size: 16px; }
  .page-allotment .allot__metrics dt { font-size: 14px; }
  .page-allotment .allot__metrics dd { font-size: 36px; }
  .page-allotment .allot__metrics .allot__metric-amount { font-size: clamp(26px, 2vw, 34px); }
  .page-allotment .allot__terms,
  .page-allotment .allot__minimum,
  .page-allotment .allot__verification { font-size: 13px; }
  .page-allotment .allot__rlabel,
  .page-allotment .allot__cell dt,
  .page-allotment .allot__identity dt { font-size: 14px; }
  .page-allotment .allot__identity dd { font-size: 16px; }

  .page-allotment .allot__ttitle { font-size: 26px; }
  .page-allotment .allot__ttitle [data-allot-total]:not(:empty) { font-size: 13px; }
  .page-allotment .allot__table-help,
  .page-allotment .allot__ctl { font-size: 14px; }
  .page-allotment .allot__select { font-size: 15px; }
  .page-allotment .allot__table th { padding-top: 18px; padding-bottom: 18px; font-size: 13px; }
  .page-allotment .allot__table td { height: 72px; }
  .page-allotment .allot__table .is-rank { width: 8%; font-size: 14px; }
  .page-allotment .allot__wallet { font-size: 16px; }
  .page-allotment .allot__table td.is-num { font-size: 18px; font-weight: 550; }
  .page-allotment .allot__count,
  .page-allotment .allot__page { font-size: 13px; }
  .page-allotment .allot__pager .btn-ghost { font-size: 14px; }
  .page-allotment .allot__guidance summary,
  .page-allotment .allot__guidance p { font-size: 15px; }

  /* Decorative token identity; the amount text and accessible labels stay intact. */
  .page-allotment .allot__table td.is-num::before,
  .page-allotment .allot__metric-amount::before,
  .page-allotment [data-allot="amount"]:not(:empty)::before {
    content: "";
    display: inline-block;
    width: 24px;
    height: 24px;
    margin-inline-end: 10px;
    vertical-align: -5px;
    background: url("../img/xdna-token.png") center / contain no-repeat;
    pointer-events: none;
  }
  .page-allotment [data-allot="amount"]:not(:empty)::before {
    width: 30px;
    height: 30px;
    vertical-align: -3px;
  }
}

/* Keep token identity visible below the desktop breakpoint without shortening values. */
@media (max-width: 1023px) {
  .page-allotment .allot__table td.is-num::before,
  .page-allotment .allot__metric-amount::before,
  .page-allotment [data-allot="amount"]:not(:empty)::before {
    content: "";
    display: inline-block;
    width: 20px;
    height: 20px;
    margin-inline-end: 8px;
    vertical-align: -4px;
    background: url("../img/xdna-token.png") center / contain no-repeat;
    pointer-events: none;
  }
  .page-allotment [data-allot="amount"]:not(:empty)::before {
    width: 24px;
    height: 24px;
  }
}
@media (max-width: 720px) {
  .page-allotment .allot__metric-amount::before {
    width: 18px;
    height: 18px;
    margin-inline-end: 6px;
    vertical-align: -3px;
  }
}