/* Temuliquid. Light theme only. Every length on the rulers is a real CSS length. */

:root {
  --lab: #F3F5F6;
  --paper: #FFFFFF;
  --ink: #000000;
  --graphite: #3B4148;
  --tape: #F7C600;
  --laser: #FF2A1A;
  --hairline: #CDD2D7;
  --muted: #5E6670;
  --led: #1FB44B;
  --rack: #16191C;
  --ours: #FFF6CC;

  --font-display: "Big Shoulders Display", "Arial Narrow", Impact, sans-serif;
  --font-text: "Instrument Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "Martian Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Type scale: 14 / 16 / 20 / 28 / 44 / 72 / 112 px */
  --step-14: 0.875rem;
  --step-16: 1rem;
  --step-20: 1.25rem;
  --step-28: clamp(1.375rem, 1.13rem + 1.05vw, 1.75rem);
  --step-44: clamp(2rem, 1.5rem + 2.2vw, 2.75rem);
  --step-72: clamp(2.5rem, 1.45rem + 4.5vw, 4.5rem);
  --step-112: clamp(3.25rem, 1.3rem + 8.3vw, 7rem);

  --gutter: 16px;
  --max: 1120px;
  --space-section: clamp(64px, 9vw, 120px);
  --space-block: clamp(28px, 4vw, 44px);

  color-scheme: light;
}

@media (min-width: 720px) {
  :root { --gutter: 32px; }
}

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  background: var(--lab);
  color: var(--graphite);
  font-family: var(--font-text);
  font-size: var(--step-16);
  line-height: 1.55;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3 {
  margin: 0;
  color: var(--ink);
  text-wrap: balance;
}

h1, h2 {
  font-family: var(--font-display);
  line-height: 0.92;
}

h1 {
  font-size: var(--step-112);
  font-weight: 900;
}

h2 {
  font-size: var(--step-72);
  font-weight: 800;
}

h3 {
  font-family: var(--font-display);
  font-size: var(--step-28);
  font-weight: 800;
  line-height: 1.05;
}

p {
  margin: 0;
  max-width: 65ch;
  text-wrap: pretty;
}

.nb { white-space: nowrap; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

a {
  color: var(--ink);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

a:hover { text-decoration-thickness: 2px; }

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

:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
  box-shadow: 0 0 0 2px var(--tape);
}

/* Above the flash sale bar and the sticky header when it shows. */
.skip {
  position: absolute;
  left: 16px;
  top: -200px;
  z-index: 10000;
  padding: 10px 14px;
  background: var(--tape);
  color: var(--ink);
  font-weight: 600;
  text-decoration: none;
}

.skip:focus { top: 16px; }

.wrap {
  width: 100%;
  max-width: calc(var(--max) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* Buttons */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 10px 18px;
  border: 2px solid var(--ink);
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  font: 600 var(--step-16) / 1.2 var(--font-text);
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
}

.btn-primary { background: var(--tape); }
.btn-primary:hover { background: #FFD633; }
.btn-secondary:hover { background: var(--paper); }
.btn-ghost { border-color: transparent; text-decoration: underline; text-underline-offset: 4px; }
.btn-ghost:hover { border-color: var(--ink); }
.btn:active { transform: translateY(1px); }

.btn-lg {
  min-height: 52px;
  padding: 12px 24px;
}

.btn-small {
  min-height: 40px;
  padding: 7px 14px;
  font-size: var(--step-14);
}

.btn[aria-pressed="true"] { background: var(--tape); }

.btn:disabled,
.btn:disabled:hover,
.btn[aria-disabled="true"],
.btn[aria-disabled="true"]:hover {
  border-color: var(--hairline);
  background: transparent;
  color: var(--muted);
  cursor: not-allowed;
  transform: none;
}

/* Announcement bar */

.announce {
  background: var(--ink);
  color: var(--lab);
  font-size: var(--step-14);
  line-height: 1.4;
}

.announce-inner {
  padding-block: 9px;
  text-align: center;
}

.announce p { max-width: none; }

.announce a {
  color: var(--tape);
  font-weight: 600;
}

.announce a:focus-visible { outline-color: var(--tape); }

.announce-tag {
  display: inline-block;
  margin-right: 6px;
  padding: 0 6px;
  background: var(--tape);
  color: var(--ink);
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.6;
  vertical-align: 1px;
}

/* Header */

.site-header { padding-block: 18px; }

.header-inner {
  display: flex;
  align-items: center;
  gap: 12px 32px;
}

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

.brand-mark {
  flex: none;
  width: 28px;
  height: 28px;
}

.brand-name {
  font-family: var(--font-display);
  font-size: 1.75rem;
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0.01em;
}

/* The main nav is a block of its own further down ("Main navigation"). */

.header-actions {
  display: flex;
  flex: none;
  align-items: center;
  gap: 10px;
  margin-left: auto;
}

.talk-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 6px 8px;
  color: var(--ink);
  font-size: var(--step-14);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  white-space: nowrap;
}

.talk-link:hover { text-decoration-thickness: 2px; }

/* The full header needs about 1,220 px. Below 1,280 px the nav gets a row of its own. */
@media (max-width: 1279px) {
  .header-inner {
    flex-wrap: wrap;
    column-gap: 16px;
  }
  .nav {
    order: 3;
    flex-basis: 100%;
  }
}

/* The CTA row keeps the buttons. validator-0 is still reachable from the page. */
@media (max-width: 860px) {
  .talk-link { display: none; }
}

/* On phones the hero's Start trading button is right below, so the header keeps only Deposit. */
@media (max-width: 520px) {
  .header-cta { display: none; }
  .header-actions .btn {
    min-height: 40px;
    padding: 7px 14px;
    font-size: var(--step-14);
  }
}

/* Hero */

.hero { padding-top: clamp(36px, 7vw, 96px); }

.hero-sub {
  max-width: 30ch;
  margin-top: 24px;
  color: var(--ink);
  font-size: var(--step-28);
  font-weight: 500;
  line-height: 1.25;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 32px;
}

.hero-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
}

.hero-chips li {
  padding: 4px 10px;
  border: 1px solid var(--ink);
  background: var(--paper);
  color: var(--ink);
  font-size: var(--step-14);
  font-weight: 600;
  line-height: 1.4;
}

/* The launch post. Its href becomes the post itself once it is live. */
.hero-x {
  margin-top: 16px;
  color: var(--muted);
  font-size: var(--step-14);
  font-weight: 600;
}

.hero-x a {
  color: var(--ink);
  text-underline-offset: 3px;
}

/* The tape. 1 cm here is 1 CSS cm. */

.tape-figure { margin: clamp(44px, 7vw, 80px) 0 0; }

.tape-band {
  overflow: hidden;
  background: var(--tape);
}

.tape {
  position: relative;
  display: block;
  width: 100vw;
  height: 124px;
  background-image:
    repeating-linear-gradient(to right, var(--ink) 0 1px, transparent 1px 10mm),
    repeating-linear-gradient(to right, var(--ink) 0 1px, transparent 1px 5mm),
    repeating-linear-gradient(to right, var(--ink) 0 1px, transparent 1px 1mm);
  background-repeat: no-repeat;
  background-size: 100% 26px, 100% 18px, 100% 11px;
}

.tape-nums {
  position: absolute;
  top: 30px;
  left: 5mm;
  display: flex;
  color: var(--ink);
  font-size: var(--step-14);
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
}

.tape-nums span {
  flex: 0 0 10mm;
  text-align: center;
}

.net {
  position: absolute;
  top: 66px;
  left: 0;
  width: 9cm;
  height: 1px;
  background: var(--ink);
}

.node {
  position: absolute;
  top: 0;
}

.n0 { left: 0; }
.n1 { left: 2.25cm; }
.n2 { left: 4.5cm; }
.n3 { left: 6.75cm; }
.n4 { left: 9cm; }

.node::before {
  content: "";
  position: absolute;
  top: -5px;
  left: -5px;
  width: 10px;
  height: 10px;
  background: var(--ink);
}

.node-label {
  position: absolute;
  top: 12px;
  left: 0;
  transform: translateX(-50%);
  color: var(--ink);
  font-size: var(--step-14);
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
}

.n0 .node-label { left: -5px; transform: none; }
.n4 .node-label { left: auto; right: -5px; transform: none; }
.n1 .node-label,
.n3 .node-label { top: 34px; }

.n1::after,
.n3::after {
  content: "";
  position: absolute;
  top: 5px;
  left: 0;
  width: 1px;
  height: 26px;
  background: var(--ink);
}

.trace {
  position: absolute;
  top: 65px;
  left: 0;
  width: 9cm;
  height: 3px;
  background: var(--laser);
  transform: scaleX(0);
  transform-origin: 0 50%;
  animation: trace 4s linear infinite;
}

.pulse {
  position: absolute;
  top: 60.5px;
  left: -6px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--laser);
  box-shadow: 0 0 0 3px rgba(255, 42, 26, 0.25), 0 0 14px 3px rgba(255, 42, 26, 0.55);
  animation: sweep 4s linear infinite;
}

/* 3 s across 9 cm (0.3 ns, slowed down 10,000,000,000 times), then a 1 s pause. */
@keyframes sweep {
  0% { transform: translateX(0); opacity: 0; }
  2% { opacity: 1; }
  75% { transform: translateX(9cm); opacity: 1; }
  85%, 100% { transform: translateX(9cm); opacity: 0; }
}

@keyframes trace {
  0% { transform: scaleX(0); opacity: 1; }
  75% { transform: scaleX(1); opacity: 1; }
  85%, 100% { transform: scaleX(1); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .pulse {
    animation: none;
    transform: translateX(5.6cm);
  }
  .trace {
    animation: none;
    transform: scaleX(0.6222);
  }
}

.tape-caption {
  margin-top: 14px;
  color: var(--graphite);
}

/* 9 cm is 340 px. Below 380 px the tape borrows 8 px of the gutter so all of it fits. */
@media (max-width: 380px) {
  .tape { margin-left: -8px; }
  .n0 .node-label { left: -2px; }
}

/* Sections and the ruler strip that divides them */

.section { padding-top: var(--space-section); }
.site-footer { padding-top: var(--space-section); }

section[id] { scroll-margin-top: 8px; }

.rule {
  position: relative;
  height: 30px;
  margin-bottom: clamp(28px, 4vw, 48px);
  overflow: hidden;
  background-image:
    linear-gradient(var(--ink), var(--ink)),
    repeating-linear-gradient(to right, var(--ink) 0 1px, transparent 1px 10mm),
    repeating-linear-gradient(to right, var(--ink) 0 1px, transparent 1px 5mm),
    repeating-linear-gradient(to right, var(--ink) 0 1px, transparent 1px 1mm);
  background-repeat: no-repeat;
  background-size: 100% 1px, 100% 13px, 100% 9px, 100% 5px;
}

.rule-nums {
  position: absolute;
  top: 15px;
  left: 0;
  display: flex;
  color: var(--muted);
  font-size: 0.75rem;
  line-height: 1;
  white-space: nowrap;
}

.rule-nums span {
  flex: 0 0 10mm;
  padding-left: 3px;
}

.lead {
  max-width: 58ch;
  margin-top: 18px;
  font-size: var(--step-20);
  line-height: 1.45;
}

.sheet {
  border: 1px solid var(--hairline);
  background: var(--paper);
}

/* Specs */

.datasheet { margin-top: var(--space-block); }

.sheet-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px 32px;
  padding: 22px 24px;
  border-bottom: 1px solid var(--ink);
}

.sheet-head h3 { max-width: 24ch; }

.titleblock {
  display: flex;
  margin: 0;
  border: 1px solid var(--ink);
}

.titleblock > div { padding: 6px 12px; }
.titleblock > div + div { border-left: 1px solid var(--ink); }

.titleblock dt,
.titleblock dd {
  font-size: var(--step-14);
  line-height: 1.35;
}

.titleblock dt { color: var(--muted); }

.titleblock dd {
  margin: 0;
  color: var(--ink);
  font-weight: 600;
  white-space: nowrap;
}

.table-scroll { overflow-x: auto; }

.spec {
  width: 100%;
  min-width: 620px;
  border-collapse: collapse;
}

.spec th,
.spec td {
  padding: 14px 24px;
  border-bottom: 1px solid var(--hairline);
  text-align: left;
  vertical-align: baseline;
}

.spec thead th:nth-child(1) { width: 24%; }
.spec thead th:nth-child(2) { width: 40%; }

.spec thead th {
  padding-block: 12px;
  border-bottom-color: var(--ink);
  color: var(--muted);
  font-size: var(--step-14);
  font-weight: 600;
}

.spec tbody th {
  color: var(--ink);
  font-weight: 500;
}

.spec .ours {
  background: var(--ours);
  color: var(--ink);
  font-weight: 600;
}

.spec thead .ours { color: var(--ink); }

sup {
  font-size: 0.7em;
  line-height: 0;
}

.spec sup a {
  margin-left: 2px;
  padding: 0 2px;
  text-decoration: none;
}

/* Reference markers. Datasheet notes use symbols, so numbers always mean the reference list. */
sup.ref a {
  margin-left: 1px;
  padding: 0 2px;
  font-family: var(--font-text);
  font-weight: 600;
  text-decoration: none;
}

sup.ref a:hover { text-decoration: underline; }

/* Next to a big display number, the marker stays text-sized. */
.facts dd sup.ref,
.checker-rows dd sup.ref {
  font-size: 1rem;
  vertical-align: 1.1em;
}

/* On phones the three columns get tighter instead of scrolling, so the Temuliquid column stays in view.
   The scroll container is still there in case a cell refuses to wrap. */
@media (max-width: 600px) {
  .sheet-head { padding: 18px 16px; }
  .titleblock { width: 100%; }
  .titleblock > div {
    flex: 1 1 0;
    min-width: 0;
    padding: 6px 8px;
  }
  .spec {
    min-width: 0;
    font-size: var(--step-14);
  }
  .spec th,
  .spec td { padding: 10px 8px; }
  .spec th:first-child,
  .spec td:first-child { padding-left: 16px; }
  .spec th:last-child,
  .spec td:last-child { padding-right: 16px; }
  .spec thead th:nth-child(1) { width: 31%; }
  .spec thead th:nth-child(2) { width: 33%; }
  .footnotes { padding: 14px 16px 18px; }
}

.footnotes {
  display: grid;
  gap: 4px;
  margin: 0;
  padding: 16px 24px 20px;
  list-style: none;
  font-size: var(--step-14);
}

.footnotes sup { margin-right: 6px; }

.tiers { margin-top: clamp(44px, 6vw, 72px); }
.tiers > p { margin-top: 10px; }

.tier-list {
  max-width: 820px;
  margin: 20px 0 0;
  padding: 0;
  border-top: 1px solid var(--ink);
  list-style: none;
}

.tier-list li {
  display: grid;
  grid-template-columns: minmax(8rem, 12rem) 6.5rem minmax(0, 1fr);
  gap: 4px 24px;
  align-items: baseline;
  padding: 14px 0;
  border-bottom: 1px solid var(--hairline);
}

.tier-name {
  color: var(--ink);
  font-weight: 600;
}

.tier-delay {
  color: var(--ink);
  font-family: var(--font-display);
  font-size: var(--step-28);
  font-weight: 800;
  line-height: 1;
}

@media (max-width: 640px) {
  .tier-list li { grid-template-columns: minmax(0, 1fr) auto; }
  .tier-note { grid-column: 1 / -1; }
}

/* Validators */

.val-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 44px;
  margin-top: var(--space-block);
}

@media (min-width: 920px) {
  .val-grid {
    grid-template-columns: minmax(0, 7fr) minmax(0, 6fr);
    gap: 64px;
    align-items: start;
  }
}

.rack { margin: 0; }

.rack-frame {
  position: relative;
  padding: 14px 26px;
  background: var(--graphite);
}

.rack-frame::before,
.rack-frame::after {
  content: "";
  position: absolute;
  top: 14px;
  bottom: 14px;
  width: 6px;
  background: repeating-linear-gradient(to bottom, #1E2226 0 5px, transparent 5px 11px);
}

.rack-frame::before { left: 10px; }
.rack-frame::after { right: 10px; }

.rack-units {
  display: grid;
  gap: 3px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.unit {
  display: flex;
  align-items: center;
  gap: 12px;
  aspect-ratio: 10 / 1;
  min-height: 28px;
  padding: 0 14px;
  border-top: 1px solid #2C3137;
  background: var(--rack);
  color: #E9ECEF;
}

.led {
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--led);
  box-shadow: 0 0 6px rgba(31, 180, 75, 0.8);
}

.unit-name {
  font-size: var(--step-14);
  font-weight: 500;
  line-height: 1;
}

.unit-vent {
  width: 36%;
  height: 40%;
  margin-left: auto;
  background: repeating-linear-gradient(to right, #343A41 0 2px, transparent 2px 6px);
}

.rack figcaption {
  margin-top: 12px;
  color: var(--muted);
  font-size: var(--step-14);
}

.facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0;
  border-top: 1px solid var(--ink);
}

.facts > div {
  padding: 14px 16px 16px 0;
  border-bottom: 1px solid var(--hairline);
}

.facts .fact-wide { grid-column: 1 / -1; }

.facts dt {
  color: var(--muted);
  font-size: var(--step-14);
}

.facts dd {
  margin: 6px 0 0;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: var(--step-44);
  font-weight: 800;
  line-height: 1;
}

.roadmap-title { margin-top: 44px; }

.roadmap {
  margin: 14px 0 0;
  padding: 0;
  border-top: 1px solid var(--ink);
  list-style: none;
  counter-reset: step;
}

.roadmap li {
  display: grid;
  grid-template-columns: 2rem minmax(6.5rem, 8.5rem) minmax(0, 1fr);
  gap: 4px 12px;
  align-items: baseline;
  padding: 12px 0;
  border-bottom: 1px solid var(--hairline);
  counter-increment: step;
}

.roadmap li::before {
  content: counter(step);
  color: var(--ink);
  font-family: var(--font-display);
  font-size: var(--step-20);
  font-weight: 800;
  line-height: 1;
}

.step-when { color: var(--muted); }

.step-what {
  color: var(--ink);
  font-weight: 600;
}

.node-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 16px;
  margin-top: 28px;
}

.soon {
  color: var(--muted);
  font-weight: 500;
}

/* Oracle */

.oracle-sheet {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 16px 28px;
  align-items: center;
  margin: var(--space-block) 0 0;
  padding: 24px;
}

.oracle-title { grid-column: 1 / -1; }

.reports {
  margin: 0;
  padding: 0 24px 0 0;
  border-right: 2px solid var(--ink);
  list-style: none;
}

.reports li {
  display: grid;
  grid-template-columns: 7rem 7.5rem minmax(0, 1fr);
  gap: 2px 16px;
  align-items: baseline;
  padding: 10px 0;
  border-bottom: 1px solid var(--hairline);
}

.reports li:last-child { border-bottom: 0; }

.rep-name { color: var(--ink); font-weight: 500; }

.rep-price {
  color: var(--ink);
  font-weight: 600;
  text-align: right;
}

.rep-sig {
  color: var(--muted);
  font-size: var(--step-14);
}

.oracle-arrow {
  width: 48px;
  height: 48px;
  color: var(--ink);
}

.median { margin: 0; }

.median-label {
  display: block;
  color: var(--muted);
  font-size: var(--step-14);
}

.median-value {
  display: block;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: var(--step-44);
  font-weight: 900;
  line-height: 1;
}

@media (max-width: 760px) {
  .oracle-sheet {
    grid-template-columns: minmax(0, 1fr);
    padding: 18px 16px;
  }
  .reports {
    padding: 0 0 4px;
    border-right: 0;
    border-bottom: 2px solid var(--ink);
  }
  .reports li { grid-template-columns: minmax(0, 1fr) auto; }
  .rep-sig { grid-column: 1 / -1; }
  .oracle-arrow {
    width: 36px;
    height: 36px;
    transform: rotate(90deg);
  }
}

.deviation {
  margin-top: 28px;
  color: var(--ink);
  font-size: var(--step-20);
}

.deviation strong {
  font-family: var(--font-display);
  font-size: var(--step-44);
  font-weight: 900;
  line-height: 1;
}

.oracle-note {
  margin-top: 10px;
  color: var(--ink);
  font-weight: 600;
}

/* Bridge */

.keys {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  max-width: 900px;
  margin: var(--space-block) 0 0;
  padding: 0;
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
  list-style: none;
}

.keys li {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  padding: 20px 16px 22px 0;
}

.keys li + li {
  padding-left: 16px;
  border-left: 1px solid var(--hairline);
}

.key-signer {
  color: var(--muted);
  font-size: var(--step-14);
}

.key-icon {
  width: 100px;
  height: 39px;
  color: var(--ink);
}

.key-owner {
  color: var(--ink);
  font-weight: 600;
}

.key-id {
  margin-top: -6px;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  overflow-wrap: anywhere;
}

@media (max-width: 600px) {
  .keys { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .keys li:nth-child(3) {
    padding-left: 0;
    border-left: 0;
  }
  .keys li:nth-child(n + 3) { border-top: 1px solid var(--hairline); }
}

/* Points */

.season {
  max-width: 820px;
  margin-top: var(--space-block);
  padding: clamp(20px, 3vw, 32px);
}

.season-sub {
  margin-top: 6px;
  color: var(--muted);
}

/* The countdown and the extension notice share one grid cell, so swapping them never moves the page. */
.season-stage {
  display: grid;
  margin-top: 14px;
}

.season-stage > * { grid-area: 1 / 1; }
.season-stage.is-extended .countdown,
.season:has(.is-extended) .season-sub { visibility: hidden; }

.countdown {
  display: flex;
  align-items: flex-start;
  gap: 0.08em;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: clamp(2.75rem, 1rem + 8vw, 7rem);
  font-weight: 900;
  line-height: 0.9;
}

.cd-seg {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 3.4rem;
}

.cd-num { display: block; }

/* Big Shoulders has proportional figures, so each digit gets a fixed cell. */
.cd-num span {
  display: inline-block;
  width: 1ch;
  text-align: center;
}

.cd-unit {
  margin-top: 10px;
  color: var(--muted);
  font-family: var(--font-text);
  font-size: var(--step-14);
  font-weight: 500;
  line-height: 1;
}

.extension {
  align-self: center;
  max-width: 32ch;
  font-size: clamp(1.25rem, 0.95rem + 1.1vw, 1.75rem);
  font-weight: 600;
  line-height: 1.5;
}

.extension span:not(:empty) {
  padding: 2px 6px;
  background: var(--tape);
  color: var(--ink);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.points-rule { margin-top: 28px; }

.boosters-block {
  max-width: 820px;
  margin-top: clamp(40px, 5vw, 56px);
}

.boosters-block > p { margin-top: 8px; }

.boosters {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}

.booster {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px 18px 18px;
  border: 2px solid var(--ink);
  background: var(--paper);
}

.booster-top { background: var(--tape); }

.booster-x {
  color: var(--ink);
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 1.6rem + 3vw, 4rem);
  font-weight: 900;
  line-height: 0.9;
}

.booster-what {
  color: var(--ink);
  font-weight: 600;
  line-height: 1.3;
}

@media (max-width: 420px) {
  .boosters { gap: 8px; }
  .booster { padding: 12px 10px 14px; }
  .booster-what { font-size: var(--step-14); }
}

.checker {
  max-width: 820px;
  margin-top: clamp(40px, 5vw, 56px);
  padding: clamp(20px, 3vw, 32px);
}

.checker-rows {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 16px 0 0;
  border-top: 1px solid var(--ink);
}

.checker-rows > div {
  padding: 12px 16px 14px 0;
  border-bottom: 1px solid var(--hairline);
}

.checker-rows dt {
  color: var(--muted);
  font-size: var(--step-14);
}

.checker-rows dd {
  margin: 6px 0 0;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: var(--step-44);
  font-weight: 800;
  line-height: 1;
}

.checker-thanks {
  margin-top: 22px;
  color: var(--ink);
  font-size: var(--step-28);
  font-weight: 600;
  line-height: 1.2;
}

.checker .node-cta { margin-top: 22px; }

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

/* Referrals */

.calc {
  max-width: 820px;
  margin-top: var(--space-block);
  padding: clamp(20px, 3vw, 32px);
}

.calc-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px 20px;
  margin-top: 18px;
}

.field label {
  display: block;
  margin-bottom: 8px;
  color: var(--ink);
  font-size: var(--step-14);
  font-weight: 600;
}

.field input {
  width: 100%;
  min-height: 56px;
  padding: 8px 12px;
  border: 2px solid var(--ink);
  border-radius: 0;
  background: var(--paper);
  color: var(--ink);
  font: 600 var(--step-28) / 1.2 var(--font-text);
  font-variant-numeric: tabular-nums;
}

.calc-out {
  display: block;
  margin-top: 26px;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: var(--step-44);
  font-weight: 800;
  line-height: 1.05;
  overflow-wrap: anywhere;
}

.calc-note {
  display: block;
  margin-top: 10px;
  font-family: var(--font-text);
  font-size: var(--step-16);
  font-weight: 600;
}

.calc-note:empty { display: none; }

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

.ref-rules {
  display: grid;
  gap: 8px;
  margin-top: 24px;
}

/* Vault */

.votes {
  max-width: 820px;
  margin-top: var(--space-block);
}

.vote-table {
  width: 100%;
  margin-top: 14px;
  border-collapse: collapse;
}

.vote-table th,
.vote-table td {
  padding: 12px 16px 12px 0;
  border-bottom: 1px solid var(--hairline);
  text-align: left;
  vertical-align: baseline;
}

.vote-table thead th {
  border-bottom-color: var(--ink);
  color: var(--muted);
  font-size: var(--step-14);
  font-weight: 600;
}

.vote-table td:first-child { color: var(--muted); }

.vote-table td:last-child {
  padding-right: 0;
  color: var(--ink);
  font-weight: 600;
  white-space: nowrap;
}

/* API */

.api-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 40px;
  margin-top: var(--space-block);
}

@media (min-width: 960px) {
  .api-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 32px;
    align-items: start;
  }
}

.code-label {
  margin: 16px 0 8px;
  color: var(--muted);
  font-size: var(--step-14);
  font-weight: 600;
}

pre.code {
  margin: 0;
  padding: 16px 18px;
  overflow: auto;
  background: var(--ink);
  color: #EEF1F3;
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  line-height: 1.7;
  white-space: pre;
  tab-size: 2;
}

pre.code code { font: inherit; }

.tryit { margin-top: clamp(44px, 6vw, 64px); }
.tryit > p { margin-top: 10px; }

.try-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 16px 0;
}

/* Responses wrap, so a phone shows the whole line without sideways scrolling. */
pre.code.try-out {
  min-height: 120px;
  max-height: 440px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.network { margin-top: clamp(44px, 6vw, 64px); }

.netdl {
  max-width: 820px;
  margin: 14px 0 0;
  border-top: 1px solid var(--ink);
}

.netdl > div {
  display: grid;
  grid-template-columns: minmax(9rem, 13rem) minmax(0, 1fr);
  gap: 4px 24px;
  align-items: baseline;
  padding: 12px 0;
  border-bottom: 1px solid var(--hairline);
}

.netdl dt { color: var(--muted); }

.netdl dd {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 14px;
  margin: 0;
  color: var(--ink);
  font-weight: 600;
  overflow-wrap: anywhere;
}

.copy {
  min-height: 32px;
  padding: 3px 10px;
}

@media (max-width: 560px) {
  .netdl > div { grid-template-columns: minmax(0, 1fr); }
}

/* Status */

.uptime {
  max-width: 820px;
  margin-top: var(--space-block);
}

.uptime-bars {
  height: 34px;
  background: repeating-linear-gradient(to right, var(--led) 0 calc(100% / 90 - 2px), transparent calc(100% / 90 - 2px) calc(100% / 90));
}

.uptime-legend {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 8px;
  color: var(--muted);
  font-size: var(--step-14);
}

.components {
  max-width: 820px;
  margin: 28px 0 0;
  padding: 0;
  border-top: 1px solid var(--ink);
  list-style: none;
}

.components li {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 4px 16px;
  padding: 14px 0;
  border-bottom: 1px solid var(--hairline);
}

.c-name {
  color: var(--ink);
  font-weight: 600;
}

.c-state {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.c-state::before {
  content: "";
  flex: none;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--led);
}

.c-state.review::before {
  background: var(--tape);
  box-shadow: inset 0 0 0 1px #9C7D00;
}

.c-state.maint::before {
  background: transparent;
  box-shadow: inset 0 0 0 2px var(--graphite);
}

.immutable { margin-top: 24px; }

.incidents-title { margin-top: 44px; }

.incidents {
  max-width: 820px;
  margin: 14px 0 0;
  padding: 0;
  border-top: 1px solid var(--ink);
  list-style: none;
}

.incidents li {
  display: grid;
  grid-template-columns: 9rem minmax(0, 1fr);
  gap: 6px 24px;
  padding: 16px 0;
  border-bottom: 1px solid var(--hairline);
}

.inc-date { color: var(--muted); }
.inc-body p:first-child { color: var(--ink); }

.inc-state {
  margin-top: 6px;
  color: var(--muted);
  font-size: var(--step-14);
}

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

/* FAQ */

.faq {
  max-width: 820px;
  margin-top: var(--space-block);
  border-top: 1px solid var(--ink);
}

.faq details { border-bottom: 1px solid var(--hairline); }

.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 0;
  color: var(--ink);
  font-size: var(--step-20);
  font-weight: 600;
  line-height: 1.3;
  list-style: none;
  cursor: pointer;
}

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

.faq summary::after {
  content: "";
  flex: none;
  width: 14px;
  height: 14px;
  background:
    linear-gradient(var(--ink), var(--ink)) center / 14px 2px no-repeat,
    linear-gradient(var(--ink), var(--ink)) center / 2px 14px no-repeat;
}

.faq details[open] summary::after {
  background: linear-gradient(var(--ink), var(--ink)) center / 14px 2px no-repeat;
}

.faq details p { padding: 0 0 20px; }

/* Footer */

.site-footer { padding-bottom: 48px; }

.footer-grid {
  display: grid;
  gap: 14px;
}

.footer-disclaimer {
  max-width: 62ch;
  color: var(--ink);
}

.footer-small {
  color: var(--muted);
  font-size: var(--step-14);
}

.footer-small a { color: var(--ink); }

.footer-links ul {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.footer-links a {
  display: inline-block;
  padding-block: 6px;
  color: var(--ink);
  font-weight: 500;
  text-decoration: none;
}

.footer-links a:hover {
  text-decoration: underline;
  text-underline-offset: 5px;
}

/* A word from our CEO */

.ceo-quote { padding-top: clamp(48px, 7vw, 88px); }

.cq { margin: 0; }

.cq-text { margin: 0; }

.cq-text p {
  max-width: 16ch;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: var(--step-72);
  font-weight: 900;
  line-height: 0.95;
  text-wrap: balance;
}

.cq-by {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 18px;
  color: var(--graphite);
  font-weight: 600;
}

.cq-by::before {
  content: "";
  flex: none;
  width: 40px;
  height: 4px;
  background: var(--tape);
}

/* Trusted by */

.trusted { padding-top: clamp(40px, 6vw, 72px); }

.trusted-title {
  color: var(--muted);
  font-family: var(--font-text);
  font-size: var(--step-14);
  font-weight: 600;
  line-height: 1.4;
}

.logos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 40px;
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
}

.logos li {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--graphite);
  font-family: var(--font-mono);
  font-size: clamp(0.9375rem, 0.8rem + 0.5vw, 1.1875rem);
  letter-spacing: -0.03em;
  white-space: nowrap;
}

.logos li::before {
  content: "";
  flex: none;
  width: 16px;
  height: 16px;
  background: currentColor;
}

.logos li:nth-child(2)::before { border-radius: 50%; }
.logos li:nth-child(3)::before { transform: rotate(45deg) scale(0.85); }
.logos li:nth-child(4)::before {
  border-radius: 50%;
  background: transparent;
  box-shadow: inset 0 0 0 3px currentColor;
}
.logos li:nth-child(5)::before {
  width: 22px;
  height: 10px;
}

@media (max-width: 560px) {
  .logos { gap: 10px 24px; }
}

/* Traction */

.stat-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  margin: var(--space-block) 0 0;
  padding: 0;
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--hairline);
  background: var(--hairline);
  list-style: none;
}

.stat {
  display: flex;
  flex-direction: column;
  padding: 24px 20px 26px;
  background: var(--lab);
}

.stat:first-child { padding-left: 0; }

.stat-big {
  color: var(--ink);
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 1.2rem + 4.2vw, 5rem);
  font-weight: 900;
  line-height: 0.9;
  white-space: nowrap;
}

.stat-label {
  margin-top: 10px;
  color: var(--muted);
  font-size: var(--step-14);
  font-weight: 600;
}

.stat-pair {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: auto;
  padding-top: 18px;
}

.stat-pair > span {
  color: var(--muted);
  font-size: var(--step-14);
}

.stat-pair strong {
  color: var(--ink);
  font-family: var(--font-display);
  font-size: var(--step-28);
  font-weight: 800;
  line-height: 1.05;
}

@media (max-width: 900px) {
  .stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat:nth-child(odd) { padding-left: 0; }
}

@media (max-width: 420px) {
  .stat { padding: 18px 12px 20px; }
}

/* Why Temuliquid */

.compare-sheet { margin-top: var(--space-block); }

.cmp thead th:nth-child(1) { width: 28%; }
.cmp thead th:nth-child(2) { width: 34%; }

.badge {
  display: inline-block;
  margin-left: 8px;
  padding: 1px 7px;
  background: var(--ink);
  color: var(--tape);
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.6;
  vertical-align: 1px;
  white-space: nowrap;
}

/* Check and cross, drawn in CSS so no font can swap them for emoji. */
.mk {
  position: relative;
  display: inline-block;
  width: 1em;
  height: 1em;
  margin-right: 0.45em;
  vertical-align: -0.15em;
}

.mk-yes::before {
  content: "";
  position: absolute;
  top: 0.04em;
  left: 0.32em;
  width: 0.34em;
  height: 0.66em;
  border: solid #12803A;
  border-width: 0 0.15em 0.15em 0;
  transform: rotate(45deg);
}

.mk-no::before,
.mk-no::after {
  content: "";
  position: absolute;
  top: 0.44em;
  left: 0.08em;
  width: 0.84em;
  height: 0.13em;
  background: var(--laser);
  transform: rotate(45deg);
}

.mk-no::after { transform: rotate(-45deg); }

.cmp-note {
  padding: 14px 24px 18px;
  color: var(--muted);
  font-size: var(--step-14);
}

@media (max-width: 600px) {
  .cmp thead th:nth-child(1) { width: 30%; }
  .cmp thead th:nth-child(2) { width: 32%; }
  .badge { margin: 4px 0 0; }
  .cmp-note { padding: 12px 16px 16px; }
}

/* How to withdraw */

.steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  margin: var(--space-block) 0 0;
  padding: 0;
  border: 1px solid var(--hairline);
  background: var(--hairline);
  list-style: none;
  counter-reset: wstep;
}

.step {
  padding: 20px 22px 26px;
  background: var(--paper);
  counter-increment: wstep;
}

.step::before {
  content: counter(wstep, decimal-leading-zero);
  display: block;
  margin-bottom: 14px;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: var(--step-72);
  font-weight: 900;
  line-height: 0.85;
}

.step p { margin-top: 8px; }

.steps-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 20px;
  margin-top: 28px;
}

.steps-foot p { color: var(--ink); }

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

@media (max-width: 560px) {
  .steps { grid-template-columns: minmax(0, 1fr); }
  .step {
    display: grid;
    grid-template-columns: 3rem minmax(0, 1fr);
    column-gap: 14px;
    padding: 16px 16px 18px;
  }
  .step::before {
    grid-row: span 2;
    margin: 0;
    font-size: 2.75rem;
  }
  .step p { margin-top: 4px; }
}

/* Vault */

.vault-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 36px;
  margin-top: var(--space-block);
}

@media (min-width: 920px) {
  .vault-grid {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: 56px;
    align-items: start;
  }
}

.vault-steps li { grid-template-columns: 2rem minmax(9rem, 13rem) minmax(0, 1fr); }

@media (max-width: 560px) {
  .vault-steps li { grid-template-columns: 2rem minmax(0, 1fr); }
  .vault-steps .step-what { grid-column: 2; }
}

.vault-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.vault-facts dd sup { font-family: var(--font-text); }

/* Reviews, Temu style. The stars are text with a spoken rating on the wrapper. */

.rating {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 20px 56px;
  align-items: center;
  max-width: 820px;
  margin-top: var(--space-block);
  padding: 20px 0 22px;
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--hairline);
}

.rating-big {
  color: var(--ink);
  font-family: var(--font-display);
  font-size: clamp(4rem, 2.6rem + 5vw, 7rem);
  font-weight: 900;
  line-height: 0.85;
}

.stars {
  color: var(--ink);
  letter-spacing: 0.06em;
  line-height: 1;
  white-space: nowrap;
}

.stars .star-off { color: #C3C9CF; }
.stars-lg { margin-top: 10px; font-size: 1.5rem; }

.rating-count {
  margin-top: 10px;
  color: var(--muted);
  font-size: var(--step-14);
}

.rating-bars {
  display: grid;
  gap: 7px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.rating-bars li {
  display: grid;
  grid-template-columns: 4.25rem minmax(0, 1fr) 2.75rem;
  gap: 12px;
  align-items: center;
  font-size: var(--step-14);
}

.rb-label { color: var(--ink); }

.rb-track {
  display: block;
  height: 10px;
  background: var(--paper);
  box-shadow: inset 0 0 0 1px var(--hairline);
}

.rb-fill {
  display: block;
  height: 100%;
  background: var(--ink);
}

.rb-97 { width: 97%; }
.rb-2 { width: 2%; }
.rb-1 { width: 1%; }
.rb-0 { width: 0; }

.rb-pct {
  color: var(--muted);
  text-align: right;
}

@media (max-width: 600px) {
  .rating {
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
  }
}

.reviews {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin: clamp(24px, 3vw, 36px) 0 0;
  padding: 0;
  list-style: none;
}

.review-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 20px 20px 18px;
  border: 1px solid var(--hairline);
  background: var(--paper);
}

.review-card .stars { font-size: 1.125rem; }

.review-text {
  color: var(--ink);
  font-size: var(--step-20);
  font-weight: 500;
  line-height: 1.35;
}

.review-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 12px;
  margin-top: auto;
  padding-top: 6px;
  color: var(--muted);
  font-size: var(--step-14);
}

.review-who { color: var(--ink); font-weight: 600; }

.review-help {
  color: var(--muted);
  font-size: var(--step-14);
}

.seller {
  padding: 10px 12px;
  background: var(--lab);
  color: var(--ink);
  font-size: var(--step-14);
}

.seller-label {
  display: block;
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 600;
}

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

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

/* Team */

.team-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  margin: var(--space-block) 0 0;
  padding: 0;
  border: 1px solid var(--hairline);
  background: var(--hairline);
  list-style: none;
}

.member {
  display: grid;
  grid-template-columns: 60px minmax(0, 1fr);
  grid-template-rows: auto auto;
  align-content: center;
  gap: 4px 16px;
  padding: 20px;
  background: var(--paper);
}

.avatar {
  display: grid;
  grid-row: span 2;
  align-self: center;
  place-items: center;
  width: 60px;
  height: 60px;
  border: 2px solid var(--ink);
  background: var(--tape);
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 900;
  line-height: 1;
}

.avatar-ink {
  background: var(--ink);
  color: var(--tape);
}

.avatar-plain { background: var(--lab); }

.member-name {
  align-self: end;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: var(--step-28);
  font-weight: 800;
  line-height: 1.05;
  overflow-wrap: anywhere;
}

.member-role {
  align-self: start;
  color: var(--muted);
  font-size: var(--step-14);
}

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

@media (max-width: 560px) {
  .team-grid { grid-template-columns: minmax(0, 1fr); }
  .member { padding: 16px; }
}

.roles-title { margin-top: clamp(40px, 5vw, 56px); }

.roles {
  max-width: 820px;
  margin: 14px 0 0;
  padding: 0;
  border-top: 1px solid var(--ink);
  list-style: none;
}

.roles li {
  display: grid;
  grid-template-columns: minmax(10rem, 15rem) 8rem minmax(0, 1fr);
  gap: 4px 24px;
  align-items: baseline;
  padding: 14px 0;
  border-bottom: 1px solid var(--hairline);
}

.role-name {
  color: var(--ink);
  font-weight: 600;
}

.role-count {
  color: var(--ink);
  font-family: var(--font-display);
  font-size: var(--step-20);
  font-weight: 800;
}

@media (max-width: 640px) {
  .roles li { grid-template-columns: minmax(0, 1fr) auto; }
  .role-note { grid-column: 1 / -1; }
}

/* Assurance */

.assure-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 20px;
  margin-top: var(--space-block);
}

@media (min-width: 920px) {
  .assure-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
}

.audit { padding: clamp(20px, 3vw, 28px); }

.audit-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--ink);
}

.audit-head h3 { max-width: 18ch; }

.stamp {
  flex: none;
  margin-top: 4px;
  padding: 5px 12px 3px;
  border: 3px solid var(--laser);
  color: var(--laser);
  font-family: var(--font-display);
  font-size: var(--step-28);
  font-weight: 900;
  line-height: 1;
  transform: rotate(-7deg);
}

.audit-meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0;
}

.audit-meta > div {
  padding: 12px 16px 12px 0;
  border-bottom: 1px solid var(--hairline);
}

.audit-meta dt {
  color: var(--muted);
  font-size: var(--step-14);
}

.audit-meta dd {
  margin: 2px 0 0;
  color: var(--ink);
  font-weight: 600;
}

.finding {
  margin-top: 20px;
  padding: 14px 16px 16px;
  border-left: 4px solid var(--laser);
  background: #FFF1EF;
}

.finding-id {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 0.8125rem;
}

.sev {
  padding: 1px 8px;
  background: var(--laser);
  color: var(--ink);
  font-family: var(--font-text);
  font-size: 0.75rem;
  font-weight: 600;
}

.finding-what {
  margin-top: 8px;
  color: var(--ink);
  font-size: var(--step-20);
  font-weight: 600;
  line-height: 1.3;
}

.finding-status { margin-top: 6px; }

.reserves {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: clamp(20px, 3vw, 28px);
}

.shot {
  overflow: hidden;
  margin-top: 6px;
  border: 1px solid var(--hairline);
  background: #FAFBFB;
}

.shot-inner {
  display: grid;
  gap: 12px;
  padding: 18px;
  filter: blur(5px);
}

.shot-title {
  display: block;
  width: 55%;
  height: 14px;
  background: #8E98A2;
}

.shot-row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
}

.shot-row span {
  display: block;
  width: 26%;
  height: 10px;
  background: #BAC2CA;
}

.shot-row span:first-child { width: 42%; }
.shot-row:nth-child(odd) span:first-child { width: 54%; }

.shot-total {
  color: var(--ink);
  font-family: var(--font-display);
  font-size: var(--step-44);
  font-weight: 900;
  line-height: 1;
}

.shot-caption {
  color: var(--muted);
  font-size: var(--step-14);
}

.bounty {
  max-width: 820px;
  margin-top: clamp(40px, 5vw, 56px);
}

.bounty-amount {
  margin-top: 10px;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: var(--step-72);
  font-weight: 900;
  line-height: 0.9;
}

.bounty-amount + p { margin-top: 12px; }

/* Changelog */

.changelog {
  max-width: 820px;
  margin: var(--space-block) 0 0;
  padding: 0;
  border-top: 1px solid var(--ink);
  list-style: none;
}

.changelog li {
  display: grid;
  grid-template-columns: 4.75rem 7.5rem minmax(0, 1fr);
  gap: 4px 20px;
  align-items: baseline;
  padding: 14px 0;
  border-bottom: 1px solid var(--hairline);
}

.cl-ver {
  justify-self: start;
  padding: 1px 8px;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  line-height: 1.7;
}

.cl-date {
  color: var(--muted);
  font-size: var(--step-14);
}

.cl-what {
  color: var(--ink);
  font-weight: 500;
}

@media (max-width: 560px) {
  .changelog li { grid-template-columns: auto minmax(0, 1fr); }
  .cl-what { grid-column: 1 / -1; }
}

/* Terms */

.terms {
  max-width: 820px;
  margin: var(--space-block) 0 0;
  padding: 4px clamp(18px, 3vw, 28px);
}

.terms > div {
  display: grid;
  grid-template-columns: 3rem minmax(0, 1fr);
  gap: 4px 16px;
  align-items: baseline;
  padding: 14px 0;
  border-bottom: 1px solid var(--hairline);
}

.terms > div:last-child { border-bottom: 0; }

.terms dt {
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 0.8125rem;
}

.terms dd {
  margin: 0;
  color: var(--ink);
}

/* References */

.refs {
  max-width: 820px;
  margin: var(--space-block) 0 0;
  padding: 0;
  border-top: 1px solid var(--ink);
  list-style: none;
  counter-reset: ref;
}

.refs li {
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr);
  gap: 2px 12px;
  padding: 12px 8px 12px 0;
  border-bottom: 1px solid var(--hairline);
  counter-increment: ref;
  scroll-margin-top: 24px;
}

.refs li::before {
  content: counter(ref);
  grid-row: span 2;
  padding-left: 4px;
  color: var(--ink);
  font-weight: 600;
}

.refs a {
  color: var(--ink);
  overflow-wrap: anywhere;
}

.ref-src {
  color: var(--muted);
  font-size: var(--step-14);
}

.refs li:target { background: var(--ours); }

/* Dialogs */

.dlg {
  width: min(480px, calc(100vw - 32px));
  max-width: none;
  padding: 0;
  border: 2px solid var(--ink);
  background: var(--paper);
  color: var(--graphite);
}

.dlg::backdrop { background: rgba(0, 0, 0, 0.55); }

.dlg-body { padding: 26px 24px 24px; }

.dlg h2 { font-size: var(--step-44); }

.dlg-body > p,
.withdraw-status { margin-top: 14px; }

.withdraw-status { min-height: 3.2em; }
.withdraw-status p { color: var(--ink); }
.withdraw-eta { margin-top: 4px; font-weight: 600; }

.dlg-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 24px;
}

/* Deposit address generator. It gets to 99%. */

.gen { margin-top: 20px; }

.gen-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  color: var(--ink);
  font-size: var(--step-14);
  font-weight: 600;
}

.gen-pct {
  font-family: var(--font-display);
  font-size: var(--step-28);
  font-weight: 900;
  line-height: 1;
}

.gen-bar {
  height: 16px;
  margin-top: 8px;
  overflow: hidden;
  border: 2px solid var(--ink);
  background: var(--paper);
}

.gen-fill {
  display: block;
  width: 0;
  height: 100%;
  background: repeating-linear-gradient(-45deg, var(--tape) 0 8px, #FFE066 8px 16px);
  transition: width 0.3s linear;
}

.gen-status {
  min-height: 3em;
  margin-top: 12px;
  color: var(--ink);
}

@media (prefers-reduced-motion: reduce) {
  .gen-fill { transition: none; }
}

/* 404 */

.notfound { padding-top: clamp(36px, 7vw, 96px); }
.notfound .lead { margin-top: 24px; }
.notfound .btn { margin-top: 32px; }

/* ------------------------------------------------------------------------- */
/* Launch additions                                                          */
/* ------------------------------------------------------------------------- */

:root {
  --deal: #C81E0E;
  --code-bg: #121417;
  --code-bar: #0A0B0D;
  --code-line: #23272C;
  --code-ink: #E6E9EC;
  --code-dim: #77818B;
  --code-kw: #F7C600;
  --code-ty: #8FC9FF;
  --code-num: #FF9C7A;
}

/* gags.js fills the ticker strip. Until it does (or if it never loads), the announcement bar stands in.
   Same height as the announcement bar, so the swap doesn't move the page. */
.ticker {
  padding: 9px max(var(--gutter), calc((100% - var(--max)) / 2));
  background: var(--ink);
  color: var(--lab);
  font-size: var(--step-14);
  line-height: 1.4;
  text-align: center;
}

.ticker .tg-tick-label { color: var(--tape); }
.ticker:empty { display: none; }
.ticker:not(:empty) + .announce { display: none; }

/* A label above the big headings, and the big headings themselves. */
.eyebrow {
  display: inline-block;
  margin-bottom: 14px;
  padding: 3px 8px 2px;
  background: var(--ink);
  color: var(--tape);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  line-height: 1.5;
}

h2.shout {
  max-width: 11.5em;
  font-size: clamp(2.6rem, 1rem + 6.4vw, 6.75rem);
  font-weight: 900;
  /* 0.94 keeps descenders ($, y, g) clear of the line below. */
  line-height: 0.94;
  overflow-wrap: break-word;
}

/* Hyphenated words stay whole where there is room. On phones they may still break at the hyphen. */
@media (min-width: 600px) {
  .keep { white-space: nowrap; }
}

/* Inline buttons that read as links: the press release opens in place. */
.link-btn {
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink);
  font: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  cursor: pointer;
}

.link-btn:hover { text-decoration-thickness: 2px; }

.footer-links .link-btn {
  display: inline-block;
  padding-block: 6px;
  font-weight: 500;
  text-decoration: none;
}

.footer-links .link-btn:hover {
  text-decoration: underline;
  text-underline-offset: 5px;
}

/* Strike-through prices */

.deal {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
  max-width: none;
  margin-top: 18px;
  color: var(--ink);
}

.deal-what { font-weight: 600; }

.deal-was {
  color: var(--muted);
  text-decoration-line: line-through;
  text-decoration-color: var(--deal);
  text-decoration-thickness: 2px;
}

.deal-now {
  color: var(--deal);
  font-family: var(--font-display);
  font-size: var(--step-28);
  font-weight: 900;
  line-height: 1;
}

.deal-off {
  align-self: center;
  padding: 2px 7px;
  background: var(--deal);
  color: var(--paper);
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.5;
  white-space: nowrap;
}

.deal-inline { margin-top: 0; }

/* Traction: the live volume counter */

.volume {
  margin-top: var(--space-block);
  padding: 18px 0 24px;
  border-top: 1px solid var(--ink);
}

.volume-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
}

.volume-label {
  color: var(--muted);
  font-size: var(--step-14);
  font-weight: 600;
}

.volume-traders {
  padding: 3px 12px;
  background: var(--tape);
  color: var(--ink);
  font-size: var(--step-20);
  font-weight: 600;
  line-height: 1.35;
}

.volume-traders strong {
  font-family: var(--font-display);
  font-size: 1.3em;
  font-weight: 900;
  line-height: 1;
}

.volume-num {
  max-width: none;
  margin-top: 12px;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 0.5rem + 8.2vw, 8rem);
  font-weight: 900;
  line-height: 0.9;
  white-space: nowrap;
}

/* Big Shoulders has proportional figures: every digit gets a fixed cell so the number doesn't jitter. */
.volume-digits .vd {
  display: inline-block;
  width: 0.54em;
  text-align: center;
}

.volume-note {
  margin-top: 14px;
  color: var(--muted);
  font-size: var(--step-14);
}

.volume + .stat-grid { margin-top: 0; }

/* Validators */

.facts-note {
  margin-top: 10px;
  color: var(--muted);
  font-size: var(--step-14);
}

/* Slashing: the editor */

.editor {
  margin-top: var(--space-block);
  border: 2px solid var(--ink);
  background: var(--code-bg);
  color: var(--code-ink);
  box-shadow: 10px 10px 0 var(--tape);
}

.editor-bar {
  display: flex;
  align-items: stretch;
  gap: 14px;
  padding-left: 14px;
  border-bottom: 1px solid var(--code-line);
  background: var(--code-bar);
}

.editor-dots {
  display: flex;
  flex: none;
  align-items: center;
  gap: 6px;
}

.editor-dots span {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #3A4047;
}

.editor-tabs {
  display: flex;
  min-width: 0;
  overflow-x: auto;
}

.editor-tab {
  flex: none;
  min-height: 44px;
  padding: 10px 16px;
  border: 0;
  border-top: 2px solid transparent;
  border-right: 1px solid var(--code-line);
  background: transparent;
  color: var(--code-dim);
  font: 400 0.8125rem / 1.2 var(--font-mono);
  cursor: pointer;
}

.editor-tab:hover { color: var(--code-ink); }

.editor-tab[aria-selected="true"] {
  border-top-color: var(--tape);
  background: var(--code-bg);
  color: #FFFFFF;
}

.editor-tab:focus-visible,
.editor-panel:focus-visible {
  outline: 2px solid var(--tape);
  outline-offset: -4px;
  box-shadow: none;
}

.editor-panel { padding-top: 18px; }

pre.editor-code {
  margin: 0;
  padding: 0 20px 18px 0;
  overflow-x: auto;
  font-family: var(--font-mono);
  font-size: clamp(0.75rem, 0.5rem + 0.95vw, 1.25rem);
  line-height: 1.75;
}

/* Each line is a block, so the whitespace between them is dropped and the lines keep their own. */
.editor-code code {
  display: block;
  font: inherit;
  white-space: normal;
  counter-reset: ln;
}

.editor-code .l {
  position: relative;
  display: block;
  min-height: 1.75em;
  padding-left: 4em;
  white-space: pre;
  counter-increment: ln;
}

.editor-code .l::before {
  content: counter(ln);
  position: absolute;
  left: 0;
  width: 2.75em;
  color: #4F5862;
  text-align: right;
}

.editor-code .l-hot {
  background: rgba(247, 198, 0, 0.12);
  box-shadow: inset 3px 0 0 var(--tape);
}

.editor-code .kw { color: var(--code-kw); }
.editor-code .ty { color: var(--code-ty); }
.editor-code .num { color: var(--code-num); }
.editor-code .fn { color: #FFFFFF; }
.editor-code .cm { color: #9AA3AC; }

.editor-code .todo {
  padding: 0 0.2em;
  background: var(--tape);
  color: var(--ink);
  text-decoration: underline wavy var(--laser);
  text-underline-offset: 4px;
}

.editor-problem {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 10px;
  max-width: none;
  padding: 12px 20px;
  border-top: 1px solid var(--code-line);
  color: var(--code-ink);
  font-size: var(--step-14);
}

.warn {
  padding: 1px 8px;
  background: var(--tape);
  color: var(--ink);
  font-size: 0.75rem;
  font-weight: 600;
}

.editor-status {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 18px;
  max-width: none;
  padding: 7px 14px;
  background: var(--tape);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  line-height: 1.5;
}

@media (max-width: 560px) {
  .editor { box-shadow: 6px 6px 0 var(--tape); }
  .editor-dots { display: none; }
  .editor-bar { padding-left: 0; }
  /* All three file tabs fit from 375 px up. */
  .editor-tab {
    padding-inline: 8px;
    font-size: 0.75rem;
  }
  pre.editor-code { padding-right: 12px; }
  .editor-code .l {
    padding-left: 3em;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
  }
  .editor-code .l::before { width: 2em; }
  .editor-problem { padding-inline: 14px; }
}

/* Architecture */

.arch-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  margin-top: var(--space-block);
}

.arch {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 18px 20px 12px;
}

.arch-cap {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--ink);
}

.arch-who {
  color: var(--ink);
  font-family: var(--font-display);
  font-size: var(--step-28);
  font-weight: 800;
  line-height: 1.05;
}

.arch-what {
  color: var(--muted);
  font-size: var(--step-14);
}

.arch-svg {
  display: block;
  width: 100%;
  max-width: 440px;
  height: auto;
  margin: 10px auto 0;
}

.arch-svg .mesh line {
  stroke: var(--graphite);
  stroke-width: 0.5;
  stroke-opacity: 0.3;
}

.arch-svg .nodes rect { fill: var(--ink); }

.arch-svg .wires path {
  fill: none;
  stroke: var(--muted);
  stroke-width: 1;
}

.arch-svg .oracles circle,
.arch-svg .bridge-box {
  fill: var(--paper);
  stroke: var(--ink);
  stroke-width: 2;
}

.arch-svg .keys-mini circle,
.arch-svg .keys-mini path {
  fill: none;
  stroke: var(--ink);
  stroke-width: 2;
}

.arch-svg .lbl {
  fill: var(--muted);
  font-family: var(--font-text);
  font-size: 12px;
  font-weight: 600;
}

.arch-svg .lbl-ink { fill: var(--ink); }

.arch-svg .box {
  fill: var(--tape);
  stroke: var(--ink);
  stroke-width: 3;
}

.arch-svg .box-lbl {
  fill: var(--ink);
  font-family: var(--font-display);
  font-size: 34px;
  font-weight: 900;
}

.arch-svg .wire-bold,
.arch-svg .key-big circle,
.arch-svg .key-big path {
  fill: none;
  stroke: var(--ink);
  stroke-width: 3;
}

.arch-svg .key-big .dot {
  fill: var(--ink);
  stroke: none;
}

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

.bft {
  max-width: 820px;
  margin-top: clamp(40px, 5vw, 56px);
}

.bft > p { margin-top: 8px; }

.bft-bars {
  margin: 16px 0 0;
  padding: 0;
  border-top: 1px solid var(--ink);
  list-style: none;
}

.bft-bars li {
  display: grid;
  grid-template-columns: minmax(7rem, 10rem) minmax(0, 1fr) 3.5rem;
  gap: 8px 16px;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid var(--hairline);
}

.bft-name {
  color: var(--ink);
  font-weight: 600;
}

.bft-track {
  display: block;
  height: 18px;
}

.bft-bar {
  display: block;
  height: 100%;
  min-width: 3px;
  background: var(--ink);
}

.bft-729 { width: 100%; background: var(--laser); }
.bft-25 { width: 3.43%; }
.bft-1 { width: 0.14%; }

.bft-val {
  color: var(--ink);
  font-family: var(--font-display);
  font-size: var(--step-28);
  font-weight: 900;
  line-height: 1;
  text-align: right;
}

@media (max-width: 480px) {
  .bft-bars li { grid-template-columns: minmax(0, 1fr) auto; }
  .bft-track {
    grid-column: 1 / -1;
    grid-row: 2;
  }
}

/* Settlement: the layer stack and the credit box */

.settle-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 36px;
  margin-top: var(--space-block);
}

@media (min-width: 960px) {
  .settle-grid {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: 48px;
    align-items: start;
  }
}

.stack-fig { margin: 0; }

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

.layer {
  position: relative;
  display: grid;
  grid-template-columns: 4rem minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: 14px;
  align-items: center;
  padding: 14px 18px;
  border: 2px solid var(--ink);
  background: var(--paper);
}

/* The arrow from the layer above. */
.layer + .layer::before {
  content: "";
  position: absolute;
  top: -28px;
  left: 50%;
  width: 2px;
  height: 20px;
  margin-left: -1px;
  background: var(--ink);
}

.layer + .layer::after {
  content: "";
  position: absolute;
  top: -10px;
  left: 50%;
  margin-left: -6px;
  border-top: 8px solid var(--ink);
  border-right: 6px solid transparent;
  border-left: 6px solid transparent;
}

.layer-tag {
  grid-row: span 2;
  justify-self: start;
  padding: 2px 6px;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  line-height: 1.6;
  white-space: nowrap;
}

.layer-name {
  color: var(--ink);
  font-family: var(--font-display);
  font-size: var(--step-28);
  font-weight: 800;
  line-height: 1.05;
}

.layer-note {
  color: var(--graphite);
  font-size: var(--step-14);
}

.layer-tl {
  margin-inline: 12%;
  background: var(--tape);
}

.layer-db {
  margin-inline: 9%;
  background: repeating-linear-gradient(-45deg, var(--paper) 0 9px, #ECEFF1 9px 18px);
}

.layer-l2 { margin-inline: 6%; }
.layer-safe { margin-inline: 3%; }
.layer-l1 { background: var(--ink); }
.layer-l1 .layer-name { color: var(--paper); }
.layer-l1 .layer-note { color: #C9CED3; }

.layer-l1 .layer-tag {
  background: var(--tape);
  color: var(--ink);
}

.stack-fig figcaption {
  margin-top: 14px;
  color: var(--muted);
  font-size: var(--step-14);
}

@media (max-width: 560px) {
  .layer-tl,
  .layer-db,
  .layer-l2,
  .layer-safe { margin-inline: 0; }
  .layer { padding: 12px 14px; }
}

.credit {
  padding: clamp(20px, 3vw, 28px);
  border-top: 4px solid var(--ink);
}

.credit-by {
  margin-top: 8px;
  color: var(--graphite);
}

.credit-list {
  display: grid;
  gap: 10px;
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}

.credit-list li {
  position: relative;
  padding-left: 20px;
  color: var(--ink);
}

.credit-list li::before {
  content: "";
  position: absolute;
  top: 0.6em;
  left: 0;
  width: 8px;
  height: 8px;
  background: var(--ink);
}

.credit-links {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 18px;
  margin: 20px 0 0;
  padding: 12px 0 0;
  border-top: 1px solid var(--hairline);
  list-style: none;
}

.credit-links a {
  display: inline-block;
  padding-block: 6px;
  font-weight: 600;
  overflow-wrap: anywhere;
}

/* Risk summary */

.risk-card { margin-top: var(--space-block); }

.risk-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 24px;
  padding: 18px 24px;
  border-bottom: 1px solid var(--ink);
}

.stage {
  display: inline-flex;
  border: 2px solid var(--ink);
  font-family: var(--font-mono);
  font-size: 0.875rem;
  line-height: 1.4;
}

.stage-label {
  padding: 5px 10px;
  background: var(--ink);
  color: var(--paper);
}

.stage-num {
  padding: 5px 14px;
  background: var(--laser);
  color: var(--ink);
}

.risk-body {
  display: grid;
  grid-template-columns: minmax(160px, 240px) minmax(0, 1fr);
  gap: 24px 48px;
  align-items: center;
  padding: 24px;
}

.rosette { margin: 0; }

.rosette-svg {
  display: block;
  width: 100%;
  height: auto;
}

.rosette .slice {
  fill: var(--laser);
  stroke: var(--paper);
  stroke-width: 3;
}

.rosette .slice:hover { fill: #E01F10; }
.rosette-hole { fill: var(--paper); }

.rosette figcaption {
  margin-top: 10px;
  color: var(--muted);
  font-size: var(--step-14);
  text-align: center;
}

.risks {
  margin: 0;
  border-top: 1px solid var(--ink);
}

.risks > div {
  display: grid;
  grid-template-columns: minmax(8rem, 12rem) minmax(0, 1fr);
  gap: 2px 20px;
  align-items: baseline;
  padding: 11px 0;
  border-bottom: 1px solid var(--hairline);
}

.risks dt { color: var(--muted); }

.risks dd {
  margin: 0;
  color: var(--ink);
  font-weight: 600;
}

.risk-foot {
  max-width: none;
  padding: 14px 24px 18px;
  border-top: 1px solid var(--hairline);
  color: var(--muted);
  font-size: var(--step-14);
}

@media (max-width: 760px) {
  .risk-head { padding: 16px; }
  .risk-body {
    grid-template-columns: minmax(0, 1fr);
    padding: 18px 16px;
  }
  .rosette {
    justify-self: center;
    width: min(220px, 70%);
  }
  .risks > div { grid-template-columns: minmax(0, 1fr); }
  .risk-foot { padding: 12px 16px 16px; }
}

/* Features */

.features {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  margin: var(--space-block) 0 0;
  padding: 0;
  border: 1px solid var(--hairline);
  background: var(--hairline);
  list-style: none;
}

.feature {
  padding: 20px 22px 24px;
  background: var(--paper);
}

.feature h3 {
  color: var(--muted);
  font-family: var(--font-text);
  font-size: var(--step-14);
  font-weight: 600;
  line-height: 1.4;
}

.feature p {
  margin-top: 6px;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: clamp(1.375rem, 1.15rem + 0.6vw, 1.625rem);
  font-weight: 800;
  line-height: 1.08;
}

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

@media (max-width: 560px) {
  .features { grid-template-columns: minmax(0, 1fr); }
  .feature { padding: 16px 16px 18px; }
}

/* For exchanges */

.ent-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 36px;
  margin-top: var(--space-block);
}

@media (min-width: 960px) {
  .ent-grid {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: 48px;
    align-items: start;
  }
}

.migrate {
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--ink);
  list-style: none;
  counter-reset: mig;
}

.migrate li {
  display: grid;
  grid-template-columns: 3rem minmax(0, 1fr);
  column-gap: 16px;
  padding: 14px 0 16px;
  border-bottom: 1px solid var(--hairline);
  counter-increment: mig;
}

.migrate li::before {
  content: counter(mig);
  grid-row: span 2;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: var(--step-44);
  font-weight: 900;
  line-height: 0.9;
}

.migrate p {
  margin-top: 4px;
  color: var(--muted);
}

.talk { padding: clamp(20px, 3vw, 28px); }

.talk-sla {
  margin-top: 8px;
  color: var(--ink);
  font-weight: 600;
}

.talk-log {
  display: grid;
  gap: 8px;
  margin: 18px 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--hairline);
}

.talk-log > div {
  display: grid;
  grid-template-columns: 6.25rem minmax(0, 1fr);
  gap: 2px 12px;
  align-items: baseline;
}

.talk-log dt {
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 0.75rem;
}

.talk-log dd {
  margin: 0;
  color: var(--ink);
}

.talk-log > div:nth-child(even) dd { font-weight: 600; }
.talk .node-cta { margin-top: 22px; }

@media (max-width: 420px) {
  .talk-log > div { grid-template-columns: minmax(0, 1fr); }
}

/* How to withdraw: the price tag, the lock, the review log */

.steps-count {
  margin-top: 16px;
  color: var(--ink);
}

.lock-note {
  max-width: 62ch;
  margin-top: 8px;
}

.review-log {
  max-width: 820px;
  margin-top: clamp(32px, 4vw, 44px);
  padding: clamp(18px, 3vw, 26px);
}

.log-sub { margin-top: 6px; }

.log {
  margin: 16px 0 0;
  padding: 0;
  border-top: 1px solid var(--ink);
  list-style: none;
}

.log li {
  display: grid;
  grid-template-columns: 5.5rem minmax(0, 1fr) auto;
  gap: 4px 16px;
  align-items: baseline;
  padding: 12px 0;
  border-bottom: 1px solid var(--hairline);
}

.log-code {
  justify-self: start;
  padding: 1px 7px;
  background: var(--ink);
  color: var(--tape);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  line-height: 1.7;
}

.log-why {
  color: var(--ink);
  font-weight: 600;
}

.log-state {
  color: var(--muted);
  font-size: var(--step-14);
  white-space: nowrap;
}

.log-state::before {
  content: "";
  display: inline-block;
  width: 9px;
  height: 9px;
  margin-right: 7px;
  border-radius: 50%;
  background: var(--tape);
  box-shadow: inset 0 0 0 1px #9C7D00;
  vertical-align: 0;
}

@media (max-width: 480px) {
  .log li { grid-template-columns: auto minmax(0, 1fr); }
  .log-state { grid-column: 2; }
}

/* Points: the delay and the leaderboard */

.delay-note {
  max-width: 820px;
  margin-top: 16px;
}

.board {
  max-width: 820px;
  margin-top: clamp(44px, 6vw, 64px);
}

.board-kicker {
  color: var(--muted);
  font-size: var(--step-14);
  font-weight: 600;
}

.board-title {
  margin-top: 6px;
  font-size: var(--step-72);
  font-weight: 900;
  line-height: 0.9;
}

.board-scroll {
  margin-top: 18px;
  overflow-x: auto;
}

.board-table {
  width: 100%;
  border-collapse: collapse;
}

.board-table th,
.board-table td {
  padding: 12px 16px 12px 0;
  border-bottom: 1px solid var(--hairline);
  text-align: left;
  vertical-align: baseline;
}

.board-table thead th {
  border-bottom-color: var(--ink);
  color: var(--muted);
  font-size: var(--step-14);
  font-weight: 600;
}

.board-table td:first-child {
  width: 5.5rem;
  color: var(--muted);
}

/* Room on both edges for the highlighted row, so every row lines up with it. */
.board-table th:first-child,
.board-table td:first-child { padding-left: 10px; }

.board-table .num {
  padding-right: 10px;
  text-align: right;
  white-space: nowrap;
}

.board-table td.num {
  color: var(--ink);
  font-weight: 600;
}

.board-gap td {
  padding-block: 2px;
  color: var(--muted);
  text-align: center;
  letter-spacing: 0.3em;
}

.board-you td {
  background: var(--ours);
  color: var(--ink);
  font-weight: 600;
}

.board-you td:first-child {
  color: var(--ink);
  box-shadow: inset 3px 0 0 var(--ink);
}

@media (max-width: 480px) {
  .board-table { font-size: var(--step-14); }
  .board-table td:first-child { width: 4rem; }
  .board-table th,
  .board-table td { padding-right: 10px; }
}

/* KOL program */

.kol-quote { max-width: 13em; }

.kol-attr {
  margin-top: 10px;
  color: var(--muted);
  font-size: var(--step-14);
  font-weight: 600;
}

.kol-reply {
  margin-top: clamp(18px, 2.5vw, 28px);
  color: var(--ink);
  font-family: var(--font-display);
  font-size: var(--step-72);
  font-weight: 900;
  line-height: 0.9;
}

.kol-tiers {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin: var(--space-block) 0 0;
  padding: 0;
  list-style: none;
}

.kol-tier {
  display: flex;
  flex-direction: column;
  padding: 18px 18px 20px;
  border: 2px solid var(--ink);
  background: var(--paper);
}

.kol-name {
  display: flex;
  align-items: center;
  gap: 10px;
}

.medal {
  flex: none;
  width: 22px;
  height: 22px;
  border: 2px solid var(--ink);
  border-radius: 50%;
  background: var(--medal, var(--tape));
}

.kol-bronze { --medal: #C98B53; }
.kol-silver { --medal: #CDD2D7; }
.kol-gold { --medal: var(--tape); background: var(--ours); }
.kol-diamond { --medal: #A8E6F0; }

.kol-codes {
  margin-top: 14px;
  color: var(--muted);
  font-size: var(--step-14);
  font-weight: 600;
}

.kol-num {
  display: block;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: var(--step-72);
  font-weight: 900;
  line-height: 0.9;
}

.kol-perks {
  display: grid;
  gap: 8px;
  margin: 16px 0 0;
  padding: 14px 0 0;
  border-top: 1px solid var(--hairline);
  list-style: none;
}

.kol-perks li {
  position: relative;
  padding-left: 16px;
  color: var(--ink);
  line-height: 1.4;
}

.kol-perks li::before {
  content: "";
  position: absolute;
  top: 0.5em;
  left: 0;
  width: 7px;
  height: 7px;
  background: var(--ink);
}

.kol-req {
  margin-top: auto;
  padding-top: 16px;
  color: var(--muted);
  font-size: var(--step-14);
}

.kol-diamond {
  background: var(--ink);
  color: #E9ECEF;
}

.kol-diamond .kol-name,
.kol-diamond .kol-num,
.kol-diamond .kol-perks li { color: var(--paper); }
.kol-diamond .kol-perks { border-top-color: #3B4148; }
.kol-diamond .kol-perks li::before { background: var(--tape); }
.kol-diamond .kol-codes,
.kol-diamond .kol-req { color: #AEB5BC; }
.kol-diamond .medal { border-color: var(--paper); }

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

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

/* Community Vault: yield */

.yield-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: var(--space-block) 0 0;
  padding: 0;
  list-style: none;
}

.yield-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 18px 20px 22px;
  border: 2px solid var(--ink);
  background: var(--paper);
}

.yield-card:first-child { background: var(--tape); }

.yield-big {
  color: var(--ink);
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 1.6rem + 3vw, 4rem);
  font-weight: 900;
  line-height: 0.9;
}

.yield-big s {
  color: var(--muted);
  font-size: 0.55em;
  text-decoration-color: var(--deal);
  text-decoration-thickness: 3px;
}

.yield-line {
  color: var(--ink);
  font-weight: 600;
  line-height: 1.4;
}

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

.vault-note {
  margin-top: 18px;
  color: var(--ink);
  font-weight: 600;
}

/* Ecosystem */

.apps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin: var(--space-block) 0 0;
  padding: 0;
  list-style: none;
}

.app {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 16px;
  min-height: 112px;
  padding: 16px;
  border: 2px dashed #A9B1B9;
  color: var(--muted);
}

.app-cat {
  color: var(--ink);
  font-weight: 600;
}

.app-soon {
  font-family: var(--font-mono);
  font-size: 0.75rem;
}

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

.programs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
}

.program {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 18px 18px 20px;
}

.program-big {
  color: var(--ink);
  font-family: var(--font-display);
  font-size: var(--step-44);
  font-weight: 900;
  line-height: 0.95;
}

.vest {
  display: grid;
  gap: 10px;
  margin: 0;
}

.vest > div {
  display: grid;
  gap: 4px;
}

.vest dt {
  color: var(--muted);
  font-size: var(--step-14);
}

.vest dd {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  margin: 0;
  color: var(--ink);
  font-size: var(--step-14);
  font-weight: 600;
}

.vest-track {
  display: block;
  height: 10px;
  background: var(--paper);
  box-shadow: inset 0 0 0 1px var(--ink);
}

.sybil-q {
  margin-top: 10px;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: var(--step-28);
  font-weight: 800;
  line-height: 1.05;
}

.sybil-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.sybil-out {
  min-height: 2.9em;
  margin-top: 10px;
  color: var(--ink);
  font-weight: 600;
}

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

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

/* Assurance: bounty and badge */

.assure-foot {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 28px 48px;
  align-items: end;
  margin-top: clamp(40px, 5vw, 56px);
}

.assure-foot .bounty { margin-top: 0; }

.soc {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.soc-seal {
  display: grid;
  place-items: center;
  align-content: center;
  width: 150px;
  height: 150px;
  border: 3px solid var(--ink);
  border-radius: 50%;
  background: var(--paper);
  box-shadow: inset 0 0 0 6px var(--paper), inset 0 0 0 8px var(--ink);
  color: var(--ink);
  text-align: center;
  transform: rotate(-6deg);
}

.soc-big {
  font-family: var(--font-display);
  font-size: 2.5rem;
  font-weight: 900;
  line-height: 0.9;
}

.soc-type {
  margin-top: 6px;
  padding: 1px 8px;
  background: var(--ink);
  color: var(--tape);
  font-family: var(--font-mono);
  font-size: 0.75rem;
}

.soc-by {
  color: var(--muted);
  font-size: var(--step-14);
}

@media (max-width: 640px) {
  .assure-foot { grid-template-columns: minmax(0, 1fr); }
  .soc { align-items: flex-start; }
}

/* Status: network */

.netstat-title { margin-top: 44px; }
.netstat { margin-top: 14px; }

/* ------------------------------------------------------------------------- */
/* Start trading, everywhere                                                 */
/* ------------------------------------------------------------------------- */

/* temu.js lifts its chat and cookie banner off the bottom edge by --tm-bb (16 px on the
   landing). The floating Start trading button owns that edge, so on the landing the lift
   includes it. Set on body: temu.js writes its own value on <html>, and body is closer. */
body[data-page="landing"] {
  --go-lift: 68px; /* the 52 px button plus a 16 px gap */
  --tm-bb: calc(16px + var(--go-lift));
}

/* The header follows you down the page where it fits on one row.
   temu.js keeps it below its flash sale bar by setting top.
   The row is 68 px tall with no padding, so the nav's items run its full height and
   their dropdowns hang straight off its bottom edge. z 50: the dropdowns clear the
   floating Start trading button (45) and stay under temu.js (8,500 and up). */
@media (min-width: 1280px) {
  body[data-page="landing"] .site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    padding-block: 0;
    background: var(--lab);
    box-shadow: 0 1px 0 var(--hairline);
  }

  body[data-page="landing"] .header-inner { min-height: 68px; }

  /* Footnotes and references, and the spots the references point at, land below the header instead of under it. */
  body[data-page="landing"] li[id],
  body[data-page="landing"] #tape,
  body[data-page="landing"] #tiers { scroll-margin-top: 132px; }
}

/* Bottom right on wide screens. */
.go-float {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 45;
}

.go-float-btn {
  min-height: 52px;
  padding: 12px 24px;
  box-shadow: 4px 4px 0 var(--ink);
  font-size: var(--step-20);
}

.go-float-btn:active {
  box-shadow: 3px 3px 0 var(--ink);
}

/* The page ends above the button, so the last lines of the footer stay readable. */
body[data-page="landing"] .site-footer { padding-bottom: calc(48px + var(--go-lift)); }

html { scroll-padding-bottom: 84px; }

/* Phones: a slim bar along the bottom edge. */
@media (max-width: 520px) {
  body[data-page="landing"] {
    --go-lift: calc(52px + env(safe-area-inset-bottom, 0px));
    padding-bottom: calc(60px + env(safe-area-inset-bottom, 0px));
  }

  body[data-page="landing"] .site-footer { padding-bottom: 48px; }

  html { scroll-padding-bottom: 72px; }

  .go-float {
    right: 0;
    bottom: 0;
    left: 0;
    padding: 8px 16px calc(8px + env(safe-area-inset-bottom, 0px));
    background: var(--ink);
  }

  .go-float-btn {
    width: 100%;
    min-height: 44px;
    padding: 9px 16px;
    box-shadow: none;
    font-size: var(--step-16);
  }

  .go-float-btn:focus-visible {
    outline-color: var(--tape);
    box-shadow: 0 0 0 2px var(--ink);
  }
}

/* temu.js places its toast stack and prize pill from script, stacked above the cookie
   banner and the chat. Those two now sit --go-lift higher, so these get the same lift. */
body[data-page="landing"] .tm.tm-toasts-fallback,
body[data-page="landing"] .tm.tm-prizepill { margin-bottom: var(--go-lift); }

/* After the big sections: a coupon with one line of fine print. */
.go {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 22px;
  width: fit-content;
  max-width: 100%;
  margin-top: var(--space-block);
  padding: 16px 20px;
  border: 2px dashed var(--ink);
  background: var(--ours);
}

.go-line {
  max-width: 44ch;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: var(--step-28);
  font-weight: 800;
  line-height: 1.1;
}

/* ------------------------------------------------------------------------- */
/* How it works, drawn honestly                                              */
/* ------------------------------------------------------------------------- */

.how-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 20px;
  margin-top: var(--space-block);
}

@media (min-width: 640px) {
  .how-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Three across. The pool is 9 cm tall, so it takes two rows; the team photo takes a row. */
@media (min-width: 1000px) {
  .how-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .how-pool { grid-column: 3; grid-row: 1 / span 2; }
  .how-team { grid-column: 1 / -1; }
}

.how-card {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 14px 16px 18px;
}

.fig-no {
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  line-height: 1.5;
}

.draw {
  display: block;
  width: 100%;
  max-width: 440px;
  height: auto;
  margin: 10px auto 0;
}

.how-card figcaption {
  margin-top: 14px;
  color: var(--ink);
  font-size: var(--step-20);
  font-weight: 600;
  line-height: 1.3;
  text-wrap: pretty;
}

/* Drawing parts: flat fills and one ink line. */
.d-ink { fill: var(--ink); }
.d-tape { fill: var(--tape); }
.d-red { fill: var(--laser); }
.d-ground { fill: var(--graphite); }
.d-water { fill: #8FC9FF; }
.d-wood { fill: #B07A45; }
.d-door { fill: var(--graphite); }
.d-exit { fill: #138A3A; }
.d-edge { stroke: var(--ink); stroke-width: 3; stroke-linejoin: round; }
.d-edge-thin { stroke: var(--ink); stroke-width: 2; }

.d-line,
.d-thin,
.d-wave,
.d-chain,
.d-ring,
.d-branch,
.d-twig,
.d-wheel,
.d-spokes,
.d-door-in {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.d-line { stroke: var(--ink); stroke-width: 3; }
.d-thin { stroke: var(--ink); stroke-width: 1.5; }
.d-wave { stroke: #2F7FC1; stroke-width: 2.5; }
.d-chain { stroke: var(--ink); stroke-width: 3; stroke-dasharray: 4 3; stroke-linecap: butt; }
.d-ring { stroke: var(--ink); stroke-width: 6; }
.d-branch { stroke: var(--ink); stroke-width: 7; }
.d-twig { stroke: var(--ink); stroke-width: 4; }
.d-wheel { stroke: var(--tape); stroke-width: 5; }
.d-spokes { stroke: var(--tape); stroke-width: 4; }
.d-door-in { stroke: var(--muted); stroke-width: 2; }
.d-leaf { fill: var(--led); stroke: var(--ink); stroke-width: 2; }

.d-pill { fill: var(--paper); stroke: var(--ink); stroke-width: 2.5; }
.d-pill-tape { fill: var(--tape); }
.d-pill-red { fill: var(--deal); }

.d-label {
  fill: var(--ink);
  font-family: var(--font-text);
  font-size: 16px;
  font-weight: 600;
}

.d-small { font-size: 14px; }
.d-muted { fill: var(--muted); font-size: 14px; }
.d-on-red { fill: var(--paper); }

.d-exit-txt {
  fill: var(--paper);
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 900;
  letter-spacing: 0.06em;
}

.d-panel-label {
  fill: var(--paper);
  font-family: var(--font-text);
  font-size: 13px;
  font-weight: 600;
}

.d-mono {
  fill: var(--tape);
  font-family: var(--font-mono);
  font-size: 14px;
}

/* Fig. 5 is at actual size: 1 cm here is 1 CSS cm, like the tape at the top of the page. */
.pool {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 12px;
  padding-block: 0.5cm;
}

.pool-nums {
  display: flex;
  flex: none;
  flex-direction: column;
  align-items: flex-end;
  width: 40px;
  margin-block: -0.5cm;
  color: var(--ink);
  font-size: var(--step-14);
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
}

/* Each number is centred on its line: cells are 1 cm tall and start half a cm early. */
.pool-nums span {
  display: flex;
  align-items: center;
  height: 1cm;
}

.pool-ruler {
  flex: none;
  width: 44px;
  height: 9cm;
  background-color: var(--tape);
  background-image:
    repeating-linear-gradient(to bottom, var(--ink) 0 1px, transparent 1px 10mm),
    repeating-linear-gradient(to bottom, var(--ink) 0 1px, transparent 1px 5mm),
    repeating-linear-gradient(to bottom, var(--ink) 0 1px, transparent 1px 1mm);
  background-position: right top;
  background-repeat: no-repeat;
  background-size: 24px 100%, 16px 100%, 9px 100%;
  box-shadow: inset 0 0 0 2px var(--ink);
}

.pool-tank {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  justify-content: center;
  box-sizing: content-box;
  min-width: 0;
  height: 9cm;
  border: 3px solid var(--ink);
  border-top: 0;
  background: linear-gradient(#4E9FE0 0 5px, #8FC9FF 5px);
}

.pool-word {
  color: var(--ink);
  font-family: var(--font-display);
  font-size: var(--step-44);
  font-weight: 900;
  line-height: 1;
}

/* Fig. 6: five racks, one name. Wraps into a back row and a front row on small screens. */
.team-photo {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: center;
  gap: 18px clamp(10px, 2.4vw, 36px);
  margin-top: 12px;
  padding: clamp(18px, 3vw, 32px) 12px;
  border: 8px solid var(--paper);
  background: #DCE2E7;
  box-shadow: 0 0 0 1px var(--hairline), 0 8px 18px rgba(0, 0, 0, 0.12);
}

.tp-member {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.tp-rack {
  display: block;
  width: clamp(58px, 7vw, 100px);
  aspect-ratio: 4 / 7;
  border: 3px solid var(--ink);
  border-radius: 3px;
  background-color: var(--rack);
  background-image:
    radial-gradient(circle at 12px 50%, var(--led) 0 3px, transparent 3.6px),
    repeating-linear-gradient(to bottom, #3A4048 0 2px, transparent 2px 6px),
    repeating-linear-gradient(to bottom, transparent 0 calc(25% - 2px), #2E343B calc(25% - 2px) 25%);
  background-position: 0 0, right 8px center, 0 0;
  background-repeat: repeat-y, no-repeat, no-repeat;
  background-size: 100% 25%, 42% 84%, 100% 100%;
}

.tp-name {
  padding: 3px 8px;
  border: 2px solid var(--ink);
  background: var(--paper);
  color: var(--ink);
  font-size: var(--step-14);
  font-weight: 600;
  line-height: 1.3;
  white-space: nowrap;
}

/* Three in the back row, two in the front. */
@media (max-width: 520px) {
  .team-photo { padding-inline: 6px; column-gap: 10px; }
  .tp-name { padding-inline: 5px; font-size: 0.75rem; }
}

/* ------------------------------------------------------------------------- */
/* Referrals: the pyramid                                                    */
/* ------------------------------------------------------------------------- */

.ref-grid {
  display: grid;
  gap: 44px 56px;
  align-items: start;
  margin-top: var(--space-block);
}

@media (min-width: 980px) {
  .ref-grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); }
}

.ref-side .calc { margin-top: 0; }

/* Stacked on tablets, the pyramid keeps the width it has beside the calculator. */
.pyr-block {
  width: 100%;
  max-width: 600px;
  margin-inline: auto;
}

.pyr { margin: 0; }

.pyr-apex {
  display: block;
  width: 80px;
  height: 64px;
  margin: 0 auto 4px;
}

.pyr-tri {
  fill: var(--tape);
  stroke: var(--ink);
  stroke-width: 3;
  stroke-linejoin: round;
}

.pyr-t { fill: var(--ink); }

/* app.js sets --k (the level, from 0 at the top) and --n1 (levels minus one). These are the
   values for the five levels the page starts with. */
.pyr-levels {
  --n1: 4;
  --pyr-min: 40%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.pyr-level {
  --k: 4;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  column-gap: 8px;
  width: calc(var(--pyr-min) + (100% - var(--pyr-min)) * var(--k) / var(--n1));
  /* 40 px for the first five levels, a little less for each one added, 32 px at thirteen. */
  min-height: calc(44px - 1px * var(--n1));
  padding: 6px 10px;
  background: var(--ink);
  color: var(--paper);
  line-height: 1.2;
  text-align: center;
}

.pyr-level:nth-child(1) { --k: 0; }
.pyr-level:nth-child(2) { --k: 1; }
.pyr-level:nth-child(3) { --k: 2; }
.pyr-level:nth-child(4) { --k: 3; }

.pyr-level.is-above:nth-child(even) { background: var(--graphite); }

.pyr-level.is-you {
  background: var(--tape);
  color: var(--ink);
  box-shadow: inset 0 0 0 2px var(--ink);
}

.pyr-level.is-below {
  background: var(--paper);
  color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--ink);
}

.pyr-name { font-weight: 600; }

.pyr-codes {
  font-size: var(--step-14);
  opacity: 0.85;
}

.pyr-caption {
  margin-top: 14px;
  color: var(--ink);
  font-size: var(--step-20);
  font-weight: 600;
  text-align: center;
}

.pyr-controls {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin-top: 16px;
  text-align: center;
}

.pyr-status {
  min-height: 1.55em;
  color: var(--ink);
  font-weight: 600;
}

@media (max-width: 520px) {
  .pyr-levels { --pyr-min: 54%; }
  .pyr-level { padding-inline: 6px; }
}

/* ------------------------------------------------------------------------- */
/* Header icons, the hero stamp, live lines                                  */
/* ------------------------------------------------------------------------- */

/* The moon and the mute button sit next to temu.js's envelope and look like it:
   a white pill with a hairline ring. temu.js wires the moon, sound.js the mute button. */
.hdr-icon {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 32px;
  height: 30px;
  padding: 0 7px;
  border: 0;
  border-radius: 999px;
  background: var(--paper);
  box-shadow: inset 0 0 0 1.5px var(--hairline);
  color: var(--ink);
  font: 600 0.75rem / 1.1 var(--font-text);
  cursor: pointer;
}

.hdr-icon:hover { box-shadow: inset 0 0 0 1.5px var(--graphite); }

.hdr-icon svg {
  display: block;
  flex: none;
  width: 18px;
  height: 18px;
}

/* The author's X: the same pill, as a link, with a smaller mark. */
.hdr-x { text-decoration: none; }

.hdr-x svg {
  width: 14px;
  height: 14px;
}

.hdr-mute { padding-right: 10px; }

/* A fixed width: "Silence: $4.99/min" takes two lines instead of moving the header. */
.mute-label {
  width: 70px;
  text-align: left;
}

.hdr-mute .mute-x { display: none; }

/* Silence is the paid plan, so it wears Pro yellow. */
.hdr-mute[data-state="silence"] {
  background: var(--tape);
  box-shadow: inset 0 0 0 1.5px var(--ink);
}

.hdr-mute[data-state="silence"] .mute-waves { display: none; }
.hdr-mute[data-state="silence"] .mute-x { display: inline; }

/* One row from 1,280 px: the header runs a little wider than the page column,
   and Talk to validator-0 waits on the page, in For exchanges. */
@media (min-width: 1280px) {
  .site-header .wrap { max-width: calc(var(--max) + 2 * var(--gutter) + 128px); }
  .header-inner { column-gap: 24px; }
  .header-actions { gap: 8px; }
  .talk-link { display: none; }
}

/* Phones: brand, three icons and Deposit share the first row, the Menu button has the
   second. The mute button keeps its speaker and its aria-label; the words come back on
   wider screens. */
@media (max-width: 520px) {
  .site-header { padding-block: 12px; }
  .header-inner { column-gap: 10px; }
  .site-header .brand { gap: 8px; }
  .site-header .brand-mark { width: 24px; height: 24px; }
  .site-header .brand-name { font-size: 1.375rem; }
  .header-actions { gap: 6px; }
  .header-actions .btn { padding-inline: 12px; }
  .hdr-icon { min-width: 30px; padding: 0 6px; }
  .mute-label { display: none; }
}

/* Narrow phones have no room for the X pill beside the brand; the hero line and
   the footer still link it. */
@media (max-width: 420px) {
  .hdr-x { display: none; }
}

@media (max-width: 374px) {
  .site-header .brand-name { font-size: 1.25rem; }
  .header-actions { gap: 4px; }
  .header-actions .btn { padding-inline: 10px; }
}

/* ------------------------------------------------------------------------- */
/* Main navigation                                                            */
/* ------------------------------------------------------------------------- */

/* One list, two layouts (the markup is in index.html, the behaviour in app.js).
   From 720 px it is a bar: Products, Chain and Community are disclosure buttons with
   dropdowns, Products being a mega menu that mirrors the product suite. The bar has a
   row of its own below 1,280 px and sits in the header's one row from there.
   Below 720 px one Menu button opens the same list as a full-height sheet, where the
   three groups collapse.
   temu.js hangs its 0 and 99+ badges over the top right corner of Withdrawals and
   Points, so those two keep room on their right in both layouts.
   Dropdowns paint above the page (z 50) and under everything temu.js floats (8,500 and
   up); the sheet is 60. */

.nav {
  display: flex;
  align-items: stretch;
  min-width: 0;
}

.nav-menu,
.nav-backdrop,
.nav-sheet-head { display: none; }

.nav-sheet {
  display: flex;
  align-items: stretch;
  min-width: 0;
}

.nav-list {
  display: flex;
  align-items: stretch;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.nav-item {
  position: relative;
  display: flex;
  align-items: center;
}

/* The mega menu spans the header, so it hangs off .header-inner, not off its item. */
.header-inner { position: relative; }
.nav-item-mega { position: static; }

.nav-top {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  padding: 6px 10px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  font: 500 var(--step-16) / 1.2 var(--font-text);
  text-align: left;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}

.nav-top:hover,
.nav-trigger[aria-expanded="true"] { background: var(--paper); }

.nav-trigger[aria-expanded="true"] { box-shadow: inset 0 -3px 0 var(--tape); }

.nav-caret {
  flex: none;
  width: 10px;
  height: 6px;
}

.nav-trigger[aria-expanded="true"] .nav-caret { transform: rotate(180deg); }

/* temu.js's "0" covers the last 13 px of Withdrawals and its "99+" the last 16 px of Points. */
.nav-badged-0 { padding-right: 18px; }
.nav-badged-99 { padding-right: 22px; }

/* Dropdowns */

.nav-panel {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 50;
  overflow-y: auto;
  overscroll-behavior: contain;
  border: 2px solid var(--ink);
  background: var(--paper);
  color: var(--graphite);
  box-shadow: 8px 8px 0 var(--tape);
}

.nav-panel[hidden] { display: none; }

/* Its first word lines up with the button's: 2 px border + 8 px padding + 12 px item
   padding, less the button's own 10 px. */
.nav-drop {
  left: -12px;
  min-width: 248px;
  padding: 8px;
}

.nd-list,
.mm-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.nd-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: 40px;
  padding: 8px 12px;
  color: var(--ink);
  font-weight: 500;
  line-height: 1.3;
  text-decoration: none;
  white-space: nowrap;
}

.nd-item:hover,
.mm-item:hover { background: var(--lab); }

.nd-note {
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 400;
}

/* The Products mega menu: Unified margin on top, then the suite's four groups. */

.nav-mega {
  right: var(--gutter);
  left: var(--gutter);
  display: grid;
  gap: 18px;
  padding: 18px 20px 20px;
}

.mm-top {
  display: flex;
  align-items: center;
  gap: 12px 24px;
}

.mm-featured {
  display: flex;
  flex: 1;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 24px;
  min-width: 0;
  padding: 12px 16px;
  border: 1px solid var(--ink);
  background: var(--ours);
  color: var(--graphite);
  text-decoration: none;
}

.mm-featured:hover { background: #FFEEAA; }

.mm-featured .mm-name {
  font-family: var(--font-display);
  font-size: 1.625rem;
  font-weight: 800;
  line-height: 1;
}

.mm-featured .mm-desc {
  margin-top: 0;
  color: var(--graphite);
  font-size: var(--step-14);
}

.mm-tag {
  padding: 2px 7px 1px;
  background: var(--ink);
  color: var(--tape);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  line-height: 1.5;
  white-space: nowrap;
}

.mm-all {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 8px;
  padding: 8px 4px;
  color: var(--ink);
  font-size: var(--step-14);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}

.mm-all:hover { text-decoration-thickness: 2px; }

.nav-arrow {
  flex: none;
  width: 14px;
  height: 14px;
}

/* Governance gets a wider column: its names carry the TIP number and title. */
.mm-cols {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 1.2fr);
  gap: 18px 20px;
}

/* The suite's own group labels. */
.mm-label {
  width: fit-content;
  margin: 0 0 6px 10px;
  padding: 3px 8px 2px;
  background: var(--ink);
  color: var(--tape);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  line-height: 1.5;
}

.mm-list {
  display: grid;
  gap: 2px;
}

.mm-item {
  display: block;
  padding: 8px 10px;
  color: var(--graphite);
  text-decoration: none;
}

.mm-item:hover .mm-name,
.mm-featured:hover .mm-name {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

.mm-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
}

.mm-name {
  color: var(--ink);
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.3;
}

.mm-desc {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 0.8125rem;
  line-height: 1.4;
}

/* The product cards' status pills, smaller. */
.nav-pill {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 5px;
  padding: 2px 6px 1px;
  border: 1px solid var(--hairline);
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 0.625rem;
  font-weight: 400;
  line-height: 1.4;
  white-space: nowrap;
}

.nav-pill-live::before {
  content: "";
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--led);
}

@media (prefers-reduced-motion: no-preference) {
  .nav-caret { transition: transform 0.15s ease; }
}

/* On its own row the bar's first word lines up with the brand. */
@media (min-width: 720px) and (max-width: 1279px) {
  .nav-list { margin-left: -10px; }
}

/* Two columns of groups while the bar has its own row on a narrow screen. */
@media (max-width: 959px) {
  .mm-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* 1,280 px and up: the bar sits between the brand and the buttons and its items run
   the header's full height. The one row is about 1,190 px of 1,216 at 1,280 px, so the
   items set a little tighter than on their own row, and the space after Points stays
   wide enough for its 99+ badge, which hangs 16 px past the link. */
@media (min-width: 1280px) {
  body[data-page="landing"] .nav { align-self: stretch; }
  .nav-list { gap: 0; }
  .nav-top {
    gap: 5px;
    padding-inline: 8px;
    font-size: 0.9375rem;
  }
  .nav-drop { left: -14px; }
  .nav-badged-0 { padding-right: 17px; }
  .nav-badged-99 { padding-right: 21px; }
}

@media (min-width: 1280px) and (max-width: 1439px) {
  .header-inner { column-gap: 20px; }
  .header-actions .btn { padding-inline: 14px; }
}

/* Below 720 px: the Menu button, and the list as a sheet. */
@media (max-width: 719px) {
  .nav-menu {
    display: flex;
    flex: 1;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    padding: 0 14px;
    border: 2px solid var(--ink);
    border-radius: 0;
    background: var(--paper);
    color: var(--ink);
    font: 600 var(--step-16) / 1 var(--font-text);
    cursor: pointer;
  }

  .nav-menu-ic {
    flex: none;
    width: 20px;
    height: 20px;
  }

  /* Below temu.js's pinned bars, over the rest of the page. */
  .nav-sheet {
    position: fixed;
    top: max(0px, calc(var(--tm-top, 8px) - 8px));
    right: 0;
    bottom: 0;
    z-index: 60;
    display: none;
    flex-direction: column;
    width: min(440px, 100%);
    overflow-y: auto;
    overscroll-behavior: contain;
    border-left: 2px solid var(--ink);
    background: var(--lab);
  }

  .nav.is-open .nav-sheet { display: flex; }

  /* Full width on a phone: no edge to draw. */
  @media (max-width: 440px) {
    .nav-sheet { border-left: 0; }
  }

  .nav.is-open .nav-backdrop {
    position: fixed;
    inset: 0;
    z-index: 59;
    display: block;
    background: rgba(0, 0, 0, 0.55);
  }

  .nav-sheet-head {
    position: sticky;
    top: 0;
    z-index: 1;
    display: flex;
    flex: none;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 8px 8px 8px 16px;
    border-bottom: 2px solid var(--ink);
    background: var(--lab);
  }

  .nav-sheet-title {
    color: var(--ink);
    font-family: var(--font-display);
    font-size: var(--step-28);
    font-weight: 800;
    line-height: 1;
  }

  .nav-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--ink);
    cursor: pointer;
  }

  .nav-close:hover { background: var(--paper); }

  .nav-close svg {
    width: 20px;
    height: 20px;
  }

  /* Rows for the groups and How it works; Withdrawals and Points end the list as two
     tiles side by side, so temu.js's badges sit on their corners. The bottom padding
     lets the last rows scroll clear of temu.js's cookie banner and chat. */
  .nav-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    flex: none;
    align-items: start;
    gap: 0 12px;
    padding: 0 16px 160px;
  }

  .nav-item {
    display: block;
    grid-column: 1 / -1;
    border-bottom: 1px solid var(--hairline);
  }

  .nav-top {
    justify-content: space-between;
    width: 100%;
    min-height: 56px;
    padding: 8px 4px;
    font-size: var(--step-20);
    font-weight: 600;
  }

  .nav-top:hover,
  .nav-trigger[aria-expanded="true"] {
    background: transparent;
    box-shadow: none;
  }

  .nav-caret {
    width: 14px;
    height: 8px;
  }

  .nav-item-tile {
    grid-column: auto;
    margin-top: 24px;
    border-bottom: 0;
  }

  .nav-item-tile .nav-top {
    justify-content: flex-start;
    min-height: 52px;
    padding-left: 14px;
    border: 2px solid var(--ink);
    background: var(--paper);
    font-size: var(--step-16);
  }

  /* Inside the sheet a group opens in place. */
  .nav-panel {
    position: static;
    overflow: visible;
    border: 0;
    background: transparent;
    box-shadow: none;
  }

  .nav-drop {
    min-width: 0;
    padding: 0 0 12px;
  }

  .nd-item {
    min-height: 44px;
    padding: 8px 4px 8px 16px;
    font-size: var(--step-16);
  }

  .nd-item:hover,
  .mm-item:hover { background: var(--paper); }

  .nav-mega {
    display: grid;
    gap: 16px;
    padding: 0 0 16px;
  }

  .mm-top {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    margin-left: 16px;
  }

  .mm-all { align-self: flex-start; }

  .mm-cols {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
  }

  .mm-label { margin-left: 16px; }

  .mm-item { padding: 8px 4px 8px 16px; }
}

/* The page stays put under the open sheet, and keeps its scrollbar's room. */
html.nav-locked {
  overflow: hidden;
  scrollbar-gutter: stable;
}

/* The hero's rubber stamp. Straight under the slogan on small screens; on wide ones it
   floats in the empty space right of the slogan, so Start trading never moves. */
.hero-stamp {
  width: fit-content;
  max-width: 100%;
  margin-top: 14px;
}

.hs-ink {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  column-gap: 10px;
  max-width: none;
  padding: 4px 12px 3px;
  border: 4px solid var(--laser);
  box-shadow: inset 0 0 0 2px var(--lab), inset 0 0 0 4px var(--laser);
  color: var(--laser);
  font-family: var(--font-display);
  font-weight: 900;
  line-height: 1;
  transform: rotate(-3deg);
}

.hs-big {
  font-size: 2.25rem;
  letter-spacing: 0.02em;
}

.hs-mid {
  font-size: 1.5rem;
  letter-spacing: 0.04em;
}

.hs-note {
  margin-top: 8px;
  color: var(--ink);
  font-size: var(--step-14);
  font-weight: 600;
  line-height: 1.3;
}

/* temu.js puts its readers line right after the h1. Grid rows keep the stamp under the h1 anyway. */
@media (max-width: 1023px) {
  .hero-wrap {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
  }

  .hero-wrap > h1 { grid-row: 1; }
  .hero-wrap > .hero-stamp { grid-row: 2; }
}

@media (min-width: 1024px) {
  .hero-wrap { position: relative; }

  /* Below the slogan's two lines, right of the subtitle. */
  .hero-stamp {
    position: absolute;
    top: calc(var(--step-112) * 1.84 + 36px);
    right: var(--gutter);
    margin: 0;
    text-align: center;
  }

  .hs-ink {
    flex-direction: column;
    align-items: center;
    padding: 10px 24px 8px;
    border-width: 6px;
    box-shadow: inset 0 0 0 3px var(--lab), inset 0 0 0 5px var(--laser);
    transform: rotate(-7deg);
  }

  .hs-big {
    font-size: 5rem;
    line-height: 0.9;
  }

  .hs-mid { font-size: 2.125rem; }
  .hs-note { margin-top: 20px; }
}

/* From 1,184 px the column is full width and the slogan's second line ends well short of it. */
@media (min-width: 1184px) {
  .hero-stamp { top: var(--step-112); }
}

/* Phones: a little less air above the fold, so the stamp fits and Start trading stays in view. */
@media (max-width: 520px) {
  .hero { padding-top: 24px; }
  .hero-sub { margin-top: 18px; }
  .hero-actions { margin-top: 24px; }
}

/* Live lines, in the terminal's queue style: a huge number, a red reason, a delta. */
.lq {
  margin-top: 18px;
  padding: 14px 16px 12px;
  border: 2px solid var(--ink);
  background: var(--paper);
}

.lq[hidden] { display: none; }

.lq-tag {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 2px 8px;
  background: var(--ink);
  color: var(--tape);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  line-height: 1.5;
}

.lq-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--laser);
}

.lq-line {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  max-width: none;
  margin-top: 8px;
  color: var(--ink);
}

.lq-pre,
.lq-post {
  font-size: var(--step-16);
  font-weight: 600;
}

.lq-num {
  display: inline-block;
  font-family: var(--font-display);
  font-size: clamp(3.5rem, 2.9rem + 2.4vw, 4.5rem);
  font-weight: 900;
  line-height: 0.92;
  transform-origin: left center;
}

/* Two lines of room, so a long reason never moves the page. */
.lq-why {
  min-height: 2.9em;
  margin-top: 10px;
  color: var(--deal);
  font-size: var(--step-14);
  font-weight: 600;
  line-height: 1.45;
}

.lq-delta { white-space: nowrap; }
.lq-delta.is-forward { color: #0B7A45; }

.lq-foot { margin-top: 6px; }

.lq-skip {
  font-size: var(--step-14);
  font-weight: 600;
}

@media (prefers-reduced-motion: no-preference) {
  .lq-dot { animation: lq-live 1.6s ease-in-out infinite; }
  .lq-num.is-bump { animation: lq-bump 0.45s ease-out; }
  .lq-why.is-new { animation: lq-nudge 0.35s ease-out; }
}

@keyframes lq-live {
  50% { opacity: 0.25; }
}

@keyframes lq-bump {
  0% {
    color: var(--deal);
    transform: scale(1.07);
  }

  100% { transform: none; }
}

@keyframes lq-nudge {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

/* TemuBFT's caption, under its bars. A plain caption: the product suite has TemuBFT's joke. */
.bft-note {
  margin-top: 12px;
  color: var(--muted);
  font-size: var(--step-14);
}

/* Tokenomics: the split of a token that doesn't exist yet. The donut is drawn like the
   page's figures: tape and ink fills, an ink edge, paper gaps between the parts. */
.toko {
  display: grid;
  grid-template-columns: minmax(160px, 240px) minmax(0, 1fr);
  gap: 24px 48px;
  align-items: center;
  max-width: 820px;
  margin-top: var(--space-block);
  padding: clamp(20px, 3vw, 32px);
}

.toko-fig { margin: 0; }

.toko-svg {
  display: block;
  width: 100%;
  height: auto;
}

.toko-seg-community { fill: var(--tape); }
.toko-seg-team { fill: var(--ink); }
.toko-seg-community:hover { fill: #E5B800; }
.toko-seg-team:hover { fill: var(--graphite); }

.toko-gap {
  fill: none;
  stroke: var(--paper);
  stroke-width: 3;
}

.toko-edge {
  fill: none;
  stroke: var(--ink);
  stroke-width: 2;
}

.toko-legend {
  margin: 0;
  border-top: 1px solid var(--ink);
}

.toko-legend > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 0 14px;
  border-bottom: 1px solid var(--hairline);
}

.toko-legend dt {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--ink);
  font-weight: 600;
}

.toko-key {
  flex: none;
  width: 16px;
  height: 16px;
  border: 2px solid var(--ink);
}

.toko-key-community { background: var(--tape); }
.toko-key-team { background: var(--ink); }

.toko-legend dd {
  margin: 0;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: var(--step-44);
  font-weight: 800;
  line-height: 1;
}

.toko-foot {
  margin-top: 18px;
  color: var(--ink);
  font-size: var(--step-20);
  font-weight: 600;
  line-height: 1.35;
}

@media (max-width: 600px) {
  .toko {
    grid-template-columns: minmax(0, 1fr);
    padding: 18px 16px 20px;
  }

  .toko-fig {
    justify-self: center;
    width: min(220px, 70%);
  }
}

/* products.js fills this section. Until it does, it takes no room. */
#products:empty { display: none; }

/* References 1 and 4 point at these. Clear of temu.js's flash sale bar; 1,280 px and up also clear the sticky header. */
#tape,
#tiers { scroll-margin-top: 72px; }

/* Below 1,280 px the header scrolls away, but temu.js's flash sale bar (and the app bar on
   phones) stay pinned at the top. temu.js sets --tm-top to their bottom edge plus 8 px, so
   footnotes, references and the spots they point at land below them. */
@media (max-width: 1279px) {
  body[data-page="landing"] li[id],
  body[data-page="landing"] #tape,
  body[data-page="landing"] #tiers { scroll-margin-top: calc(var(--tm-top, 8px) + 16px); }
}