/*
 * Element shapes.
 *
 * Two rules run through all of it. Radius says rank — panel, card, field,
 * pill, in that order of importance. And exactly one filled gold object is
 * allowed per screen; everything else that used to be gold is now an outline
 * or plain text, so the eye has one place to land instead of five.
 */

/* ---- Buttons ------------------------------------------------------------ */

/*
 * The one filled gold control. On the home page that is the button that starts
 * a launch, and nothing else on the screen may use this class.
 */
.btn-gold {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 44px;
  padding: 0 22px;
  background: linear-gradient(180deg, var(--gold-hi), var(--gold-lo));
  color: var(--on-gold);
  border-radius: var(--r-field);
  font-size: 15px;
  font-weight: 600;
  transition: filter var(--t-fast) ease, transform var(--t-fast) ease;
}

.btn-gold:hover { filter: brightness(1.06); }
.btn-gold:active { transform: scale(0.995); }
.btn-gold:disabled { opacity: 0.5; cursor: not-allowed; filter: none; }

.btn-gold--lg {
  height: 52px;
  width: 100%;
  font-size: 16px;
}

/* The header's actions, and anything secondary. Gold text on a gold hairline
   reads as the same family as the filled button without competing with it. */
.btn-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  height: 38px;
  padding: 0 18px;
  border: 1px solid var(--gold-line);
  color: var(--gold);
  border-radius: var(--r-field);
  font-size: 14px;
  font-weight: 600;
  transition: background var(--t-fast) ease, border-color var(--t-fast) ease;
}

.btn-outline:hover {
  background: var(--gold-dim);
  border-color: var(--gold);
}

.btn-quiet {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  height: 38px;
  padding: 0 16px;
  border: 1px solid var(--border);
  color: var(--text-2);
  border-radius: var(--r-field);
  font-size: 14px;
  font-weight: 500;
  transition: border-color var(--t-fast) ease, color var(--t-fast) ease;
}

.btn-quiet:hover {
  border-color: var(--border-hover);
  color: var(--text);
}

/* A wallet on the wrong chain would read balances from somewhere else and show
   them as ours, so that state is the one place red is allowed on a control. */
.btn-warn {
  display: inline-flex;
  align-items: center;
  height: 38px;
  padding: 0 18px;
  background: var(--down);
  color: var(--text);
  border-radius: var(--r-field);
  font-size: 14px;
  font-weight: 600;
}

.nav-pill {
  padding: 8px 15px;
  border-radius: var(--r-pill);
  font-size: 14px;
  font-weight: 500;
  color: var(--text-2);
  white-space: nowrap;
  transition: background var(--t-fast) ease, color var(--t-fast) ease;
}

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

.nav-pill[aria-current="page"] {
  background: var(--pill-active);
  color: var(--text);
}

/* ---- Panels and cards --------------------------------------------------- */

/*
 * The create panel: the heaviest object on the page and the only one that
 * glows. The glow is not decoration — it is the single cue that says this is
 * where the page wants you to act.
 */
.panel {
  background: var(--surface);
  border-radius: var(--r-panel);
  padding: 26px;
  box-shadow:
    0 0 0 1px var(--gold-line),
    0 24px 80px -30px var(--gold-glow);
}

.panel__title {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 22px;
}

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  padding: 16px;
  transition: border-color var(--t-fast) ease, background var(--t-fast) ease;
}

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

/* The rails. Deliberately plain: no border, no fill, no hover lift. They are
   reference material beside the thing that matters, and the moment they get a
   card's chrome they start competing with the panel again. */
.rail__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 14px;
  margin-bottom: 8px;
  border-bottom: 1px solid var(--border-soft);
}

/*
 * These were the heaviest thing on the page and they are reference material —
 * the visual weight was upside down against the importance. Taller rows, a
 * bigger mark and real gaps turn a spreadsheet back into a tape.
 */
.rail__row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 13px 10px;
  margin: 0 -10px;
  border-radius: var(--r-field);
  transition: background var(--t-fast) ease;
}

.rail__row:hover { background: var(--surface); }

.rail__name {
  min-width: 0;
  flex: 1;
}

.rail__ticker {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.rail__company {
  margin-top: 2px;
  color: var(--text-3);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rail__figures {
  text-align: right;
  flex-shrink: 0;
}

/* ---- Fields ------------------------------------------------------------- */

.field {
  height: 46px;
  width: 100%;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-field);
  padding: 0 14px;
  font-size: 15px;
  transition: border-color var(--t-fast) ease;
}

.field:focus {
  border-color: var(--gold-line);
  outline: none;
}

.field--area {
  height: 92px;
  padding: 12px 14px;
  resize: none;
  line-height: 1.5;
}

.field-label {
  display: block;
  margin-bottom: 7px;
  color: var(--text-2);
  font-size: 13px;
  font-weight: 500;
}

.box-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 54px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-field);
  padding: 0 16px;
}

/* ---- Small parts -------------------------------------------------------- */

.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 8px;
  border: 1px solid var(--gold-line);
  color: var(--gold);
  border-radius: var(--r-pill);
  font-size: 11px;
  font-weight: 500;
  white-space: nowrap;
}

.badge--up {
  border-color: transparent;
  background: var(--up-soft);
  color: var(--up);
}

/*
 * Each mark sits on its own brand's ground, set inline from the data sheet.
 *
 * The border is a hairline of the page's own colour rather than of the tile's:
 * twenty-one different grounds need one thing in common or the rail reads as
 * confetti, and a consistent edge is the cheapest way to give them one.
 */
.mark {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
  background: var(--mark-tile);
  box-shadow: inset 0 0 0 1px var(--mark-edge);
}

/* A monochrome vector, rendered white on the brand's colour. `brightness(0)`
   flattens it to black whatever it was, and `invert` lifts it to white — the
   only way to recolour an <img> without a second copy of every file. */
.mark--on-brand img {
  filter: brightness(0) invert(1);
}

/* A site icon that reaches its own edges. Nothing shows but the icon. */
.mark--own-ground img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

.mark--initials {
  background: var(--gold-dim);
  color: var(--gold);
  font-weight: 600;
  letter-spacing: -0.03em;
  box-shadow: inset 0 0 0 1px var(--gold-line);
}

/* The platform's own mark was drawn for this page, so it keeps the dark ground
   the borrowed company logos cannot use. */
.mark--platform {
  background: var(--bg);
  box-shadow: inset 0 0 0 1px var(--gold-line);
}

.mark--round { border-radius: 50%; }

.divider {
  height: 1px;
  background: var(--border-soft);
  border: 0;
  margin: 0;
}

.muted { color: var(--text-2); }
.dim { color: var(--text-3); }
.faint { color: var(--text-4); }
.gold { color: var(--gold); }
.up { color: var(--up); }
.down { color: var(--down); }
.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

/* An unknown figure is a dash in the faintest text on the page. Nothing here
   may fill a gap with a plausible-looking number. */
.unknown {
  color: var(--text-4);
  font-family: var(--font-mono);
}

/* ---- Stacks and small groups -------------------------------------------- */

.stack { display: grid; gap: 14px; }
.pair { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.triple { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }

@media (max-width: 520px) {
  .pair, .triple { grid-template-columns: 1fr; }
}

.segmented {
  display: flex;
  gap: 2px;
  padding: 3px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--r-field);
}

.segmented__option {
  padding: 5px 12px;
  border-radius: var(--r-pill);
  font-size: 13px;
  font-weight: 500;
  color: var(--text-3);
  transition: background var(--t-fast) ease, color var(--t-fast) ease;
}

.segmented__option[aria-pressed="true"] {
  background: var(--surface-3);
  color: var(--text);
}

.toggle {
  width: 42px;
  height: 24px;
  flex-shrink: 0;
  padding: 3px;
  border-radius: 999px;
  background: var(--surface-3);
  transition: background var(--t-fast) ease;
}

.toggle[aria-checked="true"] { background: var(--gold); }

.toggle__knob {
  display: block;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--text);
  transition: transform var(--t-slow) cubic-bezier(0.2, 0, 0, 1);
}

.toggle[aria-checked="true"] .toggle__knob {
  transform: translateX(18px);
  background: var(--on-gold);
}

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

.btn-menu { display: none; color: var(--text-2); }

@media (max-width: 900px) {
  .btn-menu { display: block; }
}

.menu {
  position: fixed;
  inset: 72px 0 auto 0;
  z-index: 40;
  background: var(--bg);
  border-bottom: 1px solid var(--border-soft);
  padding: 16px;
}

.menu__nav { display: grid; gap: 2px; }

.menu__social {
  display: flex;
  gap: 20px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--border-soft);
  font-size: 14px;
}

@media (min-width: 901px) {
  .menu { display: none; }
}

/* ---- Empty and failed states -------------------------------------------- */

/*
 * What the page shows instead of pools.
 *
 * There is nothing to page through until launches exist, and a pager reading
 * "1 / 12" over an empty grid was the clearest piece of theatre on the old
 * page. These say what is actually true instead.
 */
.state {
  grid-column: 1 / -1;
  padding: 56px 24px;
  text-align: center;
  border: 1px dashed var(--border);
  border-radius: var(--r-card);
  color: var(--text-3);
}

/* ---- Modal -------------------------------------------------------------- */

.scrim {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: var(--scrim);
  backdrop-filter: blur(3px);
}

.modal {
  width: 100%;
  max-width: 420px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-panel);
  padding: 22px;
}

.wallet-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }

.wallet-option {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px 14px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-field);
  font-size: 15px;
  font-weight: 500;
  transition: border-color var(--t-fast) ease, background var(--t-fast) ease;
}

.wallet-option:hover { border-color: var(--gold-line); background: var(--surface-3); }
.wallet-option:disabled { opacity: 0.5; cursor: not-allowed; }
.wallet-option img { border-radius: 6px; }

/* A refusal is quoted rather than reduced to "failed" — the wallet's own words
   are usually the only actionable thing the reader gets. */
.notice {
  margin-top: 14px;
  padding: 10px 12px;
  border-radius: var(--r-field);
  border: 1px solid var(--border);
  color: var(--text-2);
}

.notice--bad { border-color: var(--down); color: var(--down); }

/* ---- Pool card ---------------------------------------------------------- */

.pool { display: grid; gap: 16px; }

.pool__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.pool__figures { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

.pool__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border-soft);
}

/* ---- The figures the curve produces ------------------------------------- */

/*
 * Tilted, staggered, and large.
 *
 * These were a row of small print under the chart — the place a page puts
 * things it is obliged to state rather than things it wants read. They are the
 * four numbers the whole product turns on, and every one is derived from the
 * deployed factory's own parameters.
 *
 * The rotation is slight and alternating. Enough that the row stops being a
 * table and starts being a handful of cards; not so much that a figure has to
 * be read at an angle.
 */
.stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  margin: 44px 0 34px;
  padding: 14px 0;
}

.stat {
  margin: 0;
  padding: 22px 20px 18px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  transition: transform var(--t-slow) cubic-bezier(0.2, 0, 0, 1),
    border-color var(--t-fast) ease;
}

.stat:nth-child(1) { transform: rotate(-2.4deg) translateY(6px); }
.stat:nth-child(2) { transform: rotate(1.8deg) translateY(-8px); }
.stat:nth-child(3) { transform: rotate(-1.4deg) translateY(10px); }
.stat:nth-child(4) { transform: rotate(2.6deg) translateY(-4px); }

/* Straightening on hover is the one reward for pointing at them, and it is
   also how the tilt stops being a problem for anyone who finds it one. */
.stat:hover {
  transform: rotate(0deg) translateY(0);
  border-color: var(--border-hover);
}

/* One of the four carries the accent — the figure a launcher is actually
   asking about. Four accented cards would be none. */
.stat--accent {
  border-color: var(--gold-line);
  background: linear-gradient(180deg, var(--gold-dim), transparent 70%), var(--surface-2);
}

.stat__value {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 34px;
  line-height: 1;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

.stat--accent .stat__value { color: var(--gold); }

.stat__label {
  margin-top: 12px;
  color: var(--text-3);
}

@media (max-width: 1080px) {
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
}

@media (max-width: 560px) {
  .stats { grid-template-columns: minmax(0, 1fr); }
  /* A tilted card in a single column reads as a mistake rather than a device. */
  .stat, .stat:nth-child(1), .stat:nth-child(2),
  .stat:nth-child(3), .stat:nth-child(4) { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .stat:hover { transform: none; }
}

/* The quiet half of a two-tone heading. */
.dim-half { color: var(--text-3); }

/* ---- Eyebrow ------------------------------------------------------------ */

/*
 * A label above a heading is usually filler. It earns its place on a page this
 * long, where every section carries a device of its own: the pill is how
 * someone scanning for the fees finds them without reading a word of prose.
 */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 13px 6px 10px;
  margin-bottom: 22px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--text-2);
  font-size: 12px;
  font-weight: 500;
}

.eyebrow__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 0 3px var(--gold-dim);
}

/* ---- Fee tiers ---------------------------------------------------------- */

.tiers {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin-top: 44px;
  align-items: start;
}

.tier {
  padding: 30px 26px 32px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-panel);
}

/*
 * One inverted card per section, and this is the section's.
 *
 * The reference makes its middle price white; the same move here says which
 * tier is the interesting one without a badge reading "popular", which would
 * be a claim about other people's choices that nobody has made yet.
 */
.tier--featured {
  background: var(--mark-tile);
  border-color: var(--mark-tile);
  color: var(--bg);
  transform: translateY(-14px);
  padding-bottom: 46px;
  box-shadow: 0 30px 70px -40px var(--gold-glow);
}

.tier__name { color: var(--text-3); }
.tier--featured .tier__name { color: var(--text-4); }

.tier__rate {
  margin: 14px 0 10px;
  font-family: var(--font-mono);
  font-size: 46px;
  line-height: 1;
  font-weight: 500;
  letter-spacing: -0.03em;
}

.tier__blurb { color: var(--text-2); min-height: 3em; }
.tier--featured .tier__blurb { color: var(--text-4); }

.tier__points {
  list-style: none;
  margin: 22px 0 0;
  padding: 22px 0 0;
  border-top: 1px solid var(--border);
  display: grid;
  gap: 12px;
}

.tier--featured .tier__points { border-top-color: var(--mark-tile-edge); }

.tier__points li {
  display: flex;
  gap: 10px;
  align-items: baseline;
  color: var(--text-2);
}

.tier--featured .tier__points li { color: var(--bg); }

.tier__tick { color: var(--gold); flex-shrink: 0; }
.tier--featured .tier__tick { color: var(--gold-lo); }

@media (max-width: 900px) {
  .tiers { grid-template-columns: minmax(0, 1fr); }
  .tier--featured { transform: none; padding-bottom: 32px; }
}

/* ---- Questions ---------------------------------------------------------- */

.faq {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: 56px;
  align-items: start;
}

.faq__list { display: grid; gap: 10px; }

.faq__item {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  transition: border-color var(--t-fast) ease, background var(--t-fast) ease;
}

/* The open one is the section's bright object, the way the reference opens one
   item in white. A wall of identical closed rows reads as buttons, not answers. */
.faq__item--open {
  background: var(--surface-2);
  border-color: var(--gold-line);
}

.faq__question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  width: 100%;
  padding: 18px 20px;
  text-align: left;
  font-size: 15px;
  font-weight: 500;
}

.faq__sign {
  position: relative;
  width: 13px;
  height: 13px;
  flex-shrink: 0;
}

.faq__sign::before,
.faq__sign::after {
  content: "";
  position: absolute;
  inset: 50% 0 auto;
  height: 1.5px;
  background: var(--text-2);
  transition: transform var(--t-slow) cubic-bezier(0.2, 0, 0, 1);
}

.faq__sign::after { transform: rotate(90deg); }
.faq__item--open .faq__sign::before { background: var(--gold); }
.faq__item--open .faq__sign::after { transform: rotate(0deg); background: var(--gold); }

.faq__answer {
  margin: 0;
  padding: 0 20px 20px;
  color: var(--text-2);
  max-width: 62ch;
}

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

/* ---- The closing wordmark ----------------------------------------------- */

/*
 * Set large at the foot of the page, as the reference sets its own. It is the
 * last thing on the page and it is the name — nothing else needs to be said
 * down there.
 */
.wordmark {
  padding: 40px 0 8px;
  font-size: clamp(64px, 15vw, 210px);
  line-height: 0.86;
  font-weight: 600;
  letter-spacing: -0.045em;
  color: var(--text);
  user-select: none;
  /* Faded into the ground rather than drawn on it, so it reads as a watermark
     and does not compete with the disclosure below it. */
  background: linear-gradient(180deg, var(--surface-3), transparent 92%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.wordmark__quiet { opacity: 0.55; }

/* ---- The mark in the header --------------------------------------------- */

.brand-mark {
  position: relative;
  display: inline-flex;
  flex-shrink: 0;
}

.brand-mark img { border-radius: 6px; }

/*
 * A blade of light crossing the mark on hover.
 *
 * Masked to the mark's own silhouette — the same file the image uses, handed
 * in as a custom property — so the light lands on the metal and not on the
 * black square around it. Gold reads as gold by reflecting something brighter
 * than itself, which is the one gesture this mark has a physical reason to
 * perform.
 */
.brand-mark::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(
    104deg,
    transparent 36%,
    var(--sheen) 50%,
    transparent 64%
  );
  background-size: 280% 100%;
  background-position: 140% 0;
  -webkit-mask-image: var(--mark);
  mask-image: var(--mark);
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  /*
   * By luminance, not by alpha.
   *
   * The artwork has no alpha channel at all, so an alpha mask treats the whole
   * square as opaque and the light washes across the black ground with it.
   * Read as luminance the mask is the mark itself: the black ground blocks the
   * light and the brightest parts of the gold take the most of it, which is
   * also what metal does.
   */
  -webkit-mask-source-type: luminance;
  mask-mode: luminance;
}

.header__brand:hover .brand-mark::after {
  animation: sheen 640ms cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes sheen {
  from { background-position: 140% 0; opacity: 1; }
  to { background-position: -40% 0; opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .header__brand:hover .brand-mark::after { animation: none; }
}

/* The dev-buy amount sits inside its row rather than above it: it is one
   number beside its label, not a field with a heading. */
.field--inline {
  width: 150px;
  height: 38px;
  text-align: right;
  font-family: var(--font-mono);
}

.launched__links {
  display: flex;
  justify-content: center;
  gap: 20px;
}

.launched__links a {
  color: var(--gold);
  border-bottom: 1px solid var(--gold-line);
  padding-bottom: 2px;
}

.launched__links a:hover { border-bottom-color: var(--gold); }