/*
 * Page structure.
 *
 * The old home page was three equal columns — rail, headline, panel — at
 * 400px / 1fr / 400px. Three things of the same weight side by side is why the
 * eye had nowhere to land. Here the statement takes the full width on its own,
 * and below it the page is deliberately lopsided: the create panel is a fixed,
 * heavy column on the right and the rails are the wide, quiet remainder.
 */

.shell {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 28px;
}

@media (max-width: 760px) {
  .shell {
    padding: 0 16px;
  }
}

/* ---- Header ------------------------------------------------------------- */

.header {
  position: sticky;
  top: 0;
  z-index: 50;
  height: 72px;
  background: var(--bg);
  border-bottom: 1px solid var(--border-soft);
}

.header__inner {
  display: flex;
  align-items: center;
  gap: 28px;
  height: 100%;
}

.header__brand {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.header__wordmark {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.header__nav {
  display: flex;
  align-items: center;
  gap: 2px;
  min-width: 0;
}

.header__actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
  flex-shrink: 0;
}

.header__social {
  display: flex;
  align-items: center;
  gap: 14px;
  color: var(--text-3);
}

.header__social a {
  transition: color var(--t-fast) ease;
}

.header__social a:hover {
  color: var(--text);
}

@media (max-width: 1080px) {
  .header__social { display: none; }
}

@media (max-width: 900px) {
  .header__nav { display: none; }
}

/* ---- Hero --------------------------------------------------------------- */

/*
 * The surface is the ground, not an illustration further down.
 *
 * The page used to open with a sentence and half a screen of black. Putting
 * the curve behind the words fills that emptiness, gives the flat page its
 * only depth, and means the first thing a stranger sees is the machine
 * running rather than a claim that one exists.
 */
.hero {
  position: relative;
  padding: 0 0 24px;
}

.hero__stage {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 560px;
  padding: 76px 0 40px;
  /* The surface is larger than the opening screen on purpose — a mesh cut off
     by the frame reads as bigger than the frame. Without this it ran down over
     the rails below. */
  overflow: hidden;
}

.hero__backdrop {
  position: absolute;
  /* Held to the right of the statement rather than sprawled behind it. An
     object with air around it is looked at; one that runs off three edges is
     wallpaper. */
  inset: auto -6% 0 -6%;
  height: 74%;
  z-index: 0;
  pointer-events: none;
  /* The plotted area is a polygon and a polygon has a right edge. Left alone
     it drew a visible vertical seam down the page where the fill stopped;
     feathered at both ends it reads as a ground rather than as a chart that
     was cropped. */
  -webkit-mask-image: linear-gradient(
    90deg,
    transparent 0%,
    var(--mask-keep) 8%,
    var(--mask-keep) 46%,
    transparent 100%
  );
  mask-image: linear-gradient(
    90deg,
    transparent 0%,
    var(--mask-keep) 8%,
    var(--mask-keep) 46%,
    transparent 100%
  );
}

@media (max-width: 1180px) {
  /* Dimmed once it has to sit under the sentence rather than beside it. */
  .hero__backdrop { opacity: 0.55; }
}

/* The canvas takes pointers back, so the surface can be dragged while the
   scrim above the rest of the backdrop stays out of the way. */
.hero__backdrop canvas { pointer-events: auto; }

/*
 * The scrim, not a dimmer.
 *
 * Fading the surface itself would hide the slow drift, which is the part that
 * says the page is alive. The ground is darkened instead — and it is one
 * ellipse over the whole backdrop rather than a box behind the text, because
 * a box has corners and the corners were visible.
 */
.hero__backdrop::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(0deg, var(--bg) 1%, transparent 26%);
}

.hero__copy {
  position: relative;
  z-index: 1;
  max-width: 620px;
  animation: rise 640ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

/*
 * The one piece of motion that is not a response to something.
 *
 * It plays once, on the element that carries the page's whole claim, and
 * nothing else on the page animates on arrival — a fade-and-slide on every
 * section is the tell of a page nobody art-directed.
 */
@keyframes rise {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .hero__copy { animation: none; }
}

/*
 * The statement.
 *
 * Flush left, two short sentences, no accent colour inside it. A single word
 * tinted gold in a headline is the most-copied gesture on pages like this one,
 * and it spends the accent where the type is already doing the work. The
 * accent is spent once, on the button that starts a launch.
 */
.hero__statement {
  max-width: 15ch;
}

.hero__sub {
  margin-top: 22px;
  color: var(--text-2);
  max-width: 52ch;
}

.hero__hint {
  margin-top: 26px;
  color: var(--text-3);
  display: flex;
  align-items: center;
  gap: 9px;
}

.hero__hint::before {
  content: "";
  width: 22px;
  height: 1px;
  background: var(--gold-line);
  flex-shrink: 0;
}

.hero__grid {
  position: relative;
  z-index: 1;
  margin-top: -12px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 420px;
  gap: 28px;
  align-items: start;
}

.hero__rails {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px;
  min-width: 0;
}

@media (max-width: 1180px) {
  .hero__grid { grid-template-columns: minmax(0, 1fr); }
  /* The panel is the reason anyone is here, so on a narrow screen it comes
     first rather than after two lists they did not ask for. */
  .hero__panel { order: -1; }
  .hero__stage { min-height: 460px; padding-top: 52px; }
}

@media (max-width: 760px) {
  .hero__rails { grid-template-columns: minmax(0, 1fr); }
  .hero__stage { min-height: 380px; padding: 40px 0 44px; }
  .hero__backdrop { inset: -20px -16% 0; opacity: 0.85; }
}

/* ---- Pool grid ---------------------------------------------------------- */

.pools {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  padding-bottom: 56px;
}

@media (max-width: 1180px) {
  .pools { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  .pools { grid-template-columns: minmax(0, 1fr); }
}

/* ---- Footer ------------------------------------------------------------- */

.footer {
  border-top: 1px solid var(--border-soft);
  padding: 22px 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 28px;
}

.footer__group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 24px;
}

.footer__link {
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--text-3);
  transition: color var(--t-fast) ease;
}

.footer__link:hover {
  color: var(--text);
}

.disclosure {
  padding: 0 0 26px;
  color: var(--text-4);
}

/* ---- Docs --------------------------------------------------------------- */

.docs__head {
  padding: 80px 0 56px;
  border-bottom: 1px solid var(--border-soft);
}

.docs__title { max-width: 16ch; }

/*
 * Contents beside the prose, not above it.
 *
 * The page is long enough that arriving at the top and scrolling is not a way
 * to find anything. The list sticks, so the reader always knows where in the
 * document they are.
 */
.docs__layout {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: 72px;
  align-items: start;
  padding: 56px 0 96px;
}

.docs__toc {
  position: sticky;
  top: 96px;
}

.docs__toc-title { margin: 0 0 14px; }

.docs__toc ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 11px;
  border-left: 1px solid var(--border-soft);
}

.docs__toc a {
  display: block;
  padding-left: 16px;
  margin-left: -1px;
  border-left: 1px solid transparent;
  color: var(--text-3);
  transition: color var(--t-fast) ease, border-color var(--t-fast) ease;
}

.docs__toc a:hover {
  color: var(--text);
  border-left-color: var(--gold);
}

.docs__body { display: grid; gap: 72px; }

.docs__section { scroll-margin-top: 96px; }
.docs__section > * + * { margin-top: 18px; }
.docs__section > h2 + * { margin-top: 22px; }

/* The sentence in a section that costs money if it is skimmed. */
.docs__aside {
  padding: 16px 20px;
  border-left: 2px solid var(--gold);
  background: var(--surface);
  border-radius: 0 var(--r-field) var(--r-field) 0;
  color: var(--text);
  max-width: 62ch;
}

.docs__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 9px;
  max-width: 62ch;
}

.docs__list li {
  padding-left: 20px;
  position: relative;
}

.docs__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.7em;
  width: 8px;
  height: 1px;
  background: var(--gold-line);
}

/* A two-column table of facts, ruled rather than boxed. */
.facts {
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--border-soft);
}

.facts__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: 24px;
  padding: 13px 0;
  border-bottom: 1px solid var(--border-soft);
}

.facts__row dd { margin: 0; }

.facts--wide .facts__row {
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr);
}

.docs__link {
  color: var(--gold);
  word-break: break-all;
}

@media (max-width: 980px) {
  .docs__layout { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .docs__toc { position: static; }
  .docs__toc ol { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .docs__head { padding: 52px 0 40px; }
}

@media (max-width: 560px) {
  .docs__toc ol { grid-template-columns: minmax(0, 1fr); }
  .facts__row { grid-template-columns: minmax(0, 1fr); gap: 4px; }
}

/* ---- Narrative sections ------------------------------------------------- */

/*
 * The page is a sequence of statements, so the rhythm between them is what
 * makes it readable. One generous gap, one hairline, and nothing else — the
 * old page tried to do this with cards and ended up with eleven boxes.
 */
/*
 * The page used to be five sections of identical rhythm — heading, two grey
 * columns, hairline — repeated without variation. That repetition is what read
 * as rigid, more than any single element did. These alternate instead: a plain
 * band, then one lifted onto its own surface, then plain again.
 */
.section {
  position: relative;
  padding: 88px 0;
}

.section + .section { border-top: 1px solid var(--border-soft); }

.section > h2 + * { margin-top: 28px; }

/* Lifted out of the page onto its own ground. The border-top above is dropped
   because the change of surface already says a new thing has started. */
.section--inset {
  margin: 40px 0;
  padding: 64px 52px;
  background: var(--surface);
  border-radius: var(--r-panel);
  border-top: 0;
}

.section--inset + .section,
.section--inset { border-top: 0; }

/*
 * A single soft light, behind the section that matters most.
 *
 * Not decoration: on a page this dark, one source of light is what stops every
 * surface reading as the same sheet of paper.
 */
.section--lit::before {
  content: "";
  position: absolute;
  inset: -10% -20% auto;
  height: 460px;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(58% 100% at 50% 0%, var(--gold-glow), transparent 70%);
  opacity: 0.5;
}

@media (max-width: 760px) {
  .section { padding: 56px 0; }
  .section--inset { padding: 44px 22px; margin: 24px 0; }
}

/* Two columns of prose: a lead that carries the point and a body that earns
   it. Each keeps its own measure rather than running the width of the page. */
.prose-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 40px;
  margin-top: 24px;
}

@media (max-width: 900px) {
  .prose-grid { grid-template-columns: minmax(0, 1fr); gap: 20px; }
}

/* ---- The curve ---------------------------------------------------------- */

.curve {
  margin: 34px 0 0;
  padding: 26px 26px 18px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-panel);
}

/* `hidden` has to win here. A bare `display: block` beats the user agent's
   `[hidden] { display: none }`, which is how the flat drawing and the surface
   ended up on screen at the same time. */
.curve__plot[hidden] {
  display: none;
}

.curve__plot {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.curve__axis {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--border-soft);
}

.figures {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
  margin: 28px 0;
  padding: 0;
}

.figures > div { margin: 0; }
.figures dd { margin: 8px 0 0; }

@media (max-width: 760px) {
  .figures { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---- Steps -------------------------------------------------------------- */

.steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 26px;
  counter-reset: step;
}

.step {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}

/* The number is a marker, not a heading: it sits in its own column so the
   headings all start on the same line regardless of how wide it gets. */
.step__number {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid var(--gold-line);
  color: var(--gold);
}

/* ---- Where it stands ---------------------------------------------------- */

.truths {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

@media (max-width: 900px) {
  .truths { grid-template-columns: minmax(0, 1fr); }
}

.truth {
  padding: 22px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
}

.truth > p { margin-top: 10px; }

/* The one that costs money if it is skimmed gets the only red on the page
   outside a falling price. */
.truth--warn { border-color: var(--down); }

/*
 * The surface.
 *
 * It occupies the same box the flat drawing does, so whichever one the browser
 * can manage, the section is the same height and nothing below it moves. The
 * canvas is transparent and the page's own ground shows through — clearing it
 * to a colour of its own would band against the panel behind it.
 */
/* The curve behind the statement. It is allowed to run off the right edge —
   a plot that ends inside the frame reads as a chart, and this is a ground. */
.hero__curve {
  width: 100%;
  height: 100%;
  display: block;
  opacity: 0.9;
}

/* ---- Narrative sections ------------------------------------------------- */

/*
 * The page is a sequence of statements, so the rhythm between them is what
 * makes it readable. One generous gap, one hairline, and nothing else — the
 * old page tried to do this with cards and ended up with eleven boxes.
 */
/*
 * The page used to be five sections of identical rhythm — heading, two grey
 * columns, hairline — repeated without variation. That repetition is what read
 * as rigid, more than any single element did. These alternate instead: a plain
 * band, then one lifted onto its own surface, then plain again.
 */
.section {
  position: relative;
  padding: 88px 0;
}

.section + .section { border-top: 1px solid var(--border-soft); }

.section > h2 + * { margin-top: 28px; }

/* Lifted out of the page onto its own ground. The border-top above is dropped
   because the change of surface already says a new thing has started. */
.section--inset {
  margin: 40px 0;
  padding: 64px 52px;
  background: var(--surface);
  border-radius: var(--r-panel);
  border-top: 0;
}

.section--inset + .section,
.section--inset { border-top: 0; }

/*
 * A single soft light, behind the section that matters most.
 *
 * Not decoration: on a page this dark, one source of light is what stops every
 * surface reading as the same sheet of paper.
 */
.section--lit::before {
  content: "";
  position: absolute;
  inset: -10% -20% auto;
  height: 460px;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(58% 100% at 50% 0%, var(--gold-glow), transparent 70%);
  opacity: 0.5;
}

@media (max-width: 760px) {
  .section { padding: 56px 0; }
  .section--inset { padding: 44px 22px; margin: 24px 0; }
}

/* Two columns of prose: a lead that carries the point and a body that earns
   it. Each keeps its own measure rather than running the width of the page. */
.prose-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 40px;
  margin-top: 24px;
}

@media (max-width: 900px) {
  .prose-grid { grid-template-columns: minmax(0, 1fr); gap: 20px; }
}

/* ---- The curve ---------------------------------------------------------- */

.curve {
  margin: 34px 0 0;
  padding: 26px 26px 18px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-panel);
}

/* `hidden` has to win here. A bare `display: block` beats the user agent's
   `[hidden] { display: none }`, which is how the flat drawing and the surface
   ended up on screen at the same time. */
.curve__plot[hidden] {
  display: none;
}

.curve__plot {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.curve__axis {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--border-soft);
}

.figures {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
  margin: 28px 0;
  padding: 0;
}

.figures > div { margin: 0; }
.figures dd { margin: 8px 0 0; }

@media (max-width: 760px) {
  .figures { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---- Steps -------------------------------------------------------------- */

.steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 26px;
  counter-reset: step;
}

.step {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}

/* The number is a marker, not a heading: it sits in its own column so the
   headings all start on the same line regardless of how wide it gets. */
.step__number {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid var(--gold-line);
  color: var(--gold);
}

/* ---- Where it stands ---------------------------------------------------- */

.truths {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

@media (max-width: 900px) {
  .truths { grid-template-columns: minmax(0, 1fr); }
}

.truth {
  padding: 22px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
}

.truth > p { margin-top: 10px; }

/* The one that costs money if it is skimmed gets the only red on the page
   outside a falling price. */
.truth--warn { border-color: var(--down); }

/*
 * The surface.
 *
 * It occupies the same box the flat drawing does, so whichever one the browser
 * can manage, the section is the same height and nothing below it moves. The
 * canvas is transparent and the page's own ground shows through — clearing it
 * to a colour of its own would band against the panel behind it.
 */
/*
 * The surface fills the hero.
 *
 * It was a 1400×300 strip before, and the camera frames on height, so a
 * two-unit-wide object filled a fifth of the width and read as a postage stamp
 * adrift in a black field. Given the whole opening screen it has room to be
 * the thing the page opens with.
 */
.curve__gl {
  display: none;
  width: 100%;
  height: 100%;
  min-height: 560px;
  touch-action: pan-y;
  cursor: grab;
}

.curve__gl:active { cursor: grabbing; }

.hero__stage--live .curve__gl { display: block; }

@media (max-width: 1180px) {
  .curve__gl { min-height: 460px; }
}

@media (max-width: 760px) {
  .curve__gl { min-height: 380px; }
}

/* ---- The bento ---------------------------------------------------------- */

/*
 * Four cells of deliberately unequal size.
 *
 * A grid of identical boxes says every step matters the same amount, which is
 * false: connecting a wallet is a formality and choosing a name and a fee is
 * the decision. Size is how a grid says so without a word.
 */
.bento {
  list-style: none;
  margin: 44px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 16px;
}

.bento__cell {
  position: relative;
  padding: 28px 26px 30px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-panel);
  transition: border-color var(--t-fast) ease, background var(--t-fast) ease;
}

.bento__cell:hover { border-color: var(--border-hover); background: var(--surface-2); }

.bento__cell h3 { margin-top: 16px; }
.bento__cell p { margin-top: 10px; max-width: 46ch; }

.bento__cell--1 { grid-column: span 2; }
.bento__cell--2 { grid-column: span 4; }
.bento__cell--3 { grid-column: span 4; }
.bento__cell--4 { grid-column: span 2; }

.bento__number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid var(--gold-line);
  color: var(--gold);
}

@media (max-width: 900px) {
  .bento { grid-template-columns: minmax(0, 1fr); }
  .bento__cell--1, .bento__cell--2,
  .bento__cell--3, .bento__cell--4 { grid-column: span 1; }
}

/* ---- One coin ----------------------------------------------------------- */

.coin__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 40px;
  flex-wrap: wrap;
  padding-bottom: 28px;
  border-bottom: 1px solid var(--border-soft);
}

.coin__figures { display: flex; gap: 44px; }

/* The facts on the left, the thing you came to do on the right. A trade panel
   below a wall of prose is a trade panel nobody finds. */
.coin__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 440px;
  gap: 44px;
  align-items: start;
  margin-top: 40px;
}

@media (max-width: 1080px) {
  .coin__grid { grid-template-columns: minmax(0, 1fr); }
  /* On a narrow screen the panel comes first, for the same reason. */
  .coin__grid > .panel { order: -1; }
  .coin__figures { gap: 28px; }
}