/* Dark cinematic treatment. Loaded after site.css on every page, so it is the last word on the
   tokens, on the shared chrome, and on the landing page's own sections. The landing-only rules
   below (.backdrop, .menubar, .watermark, .final-cta, .reserve-cloud, .hero) match nothing
   anywhere else, so one file serves the whole site rather than two that can drift apart.

   Built in plain CSS against the existing React 19 SSR, not the Tailwind + motion/react +
   lucide-react stack the reference names: this site ships zero runtime dependencies and prerenders
   to static HTML, and three npm packages to reproduce a look is a trade the rest of the codebase
   has never made. Every visual in the reference — the shiny gradient headline, the noise filters,
   the liquid-glass cards, the menu-bar strip, the watermark — is here, hand-written.

   The reference's background is a hotlinked CloudFront video belonging to a fictional studio. It
   is not ours to serve and it is a third-party request on every load, so the backdrop here is
   built from gradients, the grain filter and our own galaxy artwork instead. Point BSP_HERO_VIDEO
   at an asset we own and it becomes a video backdrop. */

:root {
  --paper: #0c0c0c;
  --ink: #ffffff;
  --muted: rgba(255, 255, 255, 0.6);
  --faint: rgba(255, 255, 255, 0.4);
  --line: rgba(255, 255, 255, 0.1);
  --soft: rgba(255, 255, 255, 0.04);
  --green: #3d81e3;
  --orange: #a4f4fd;
  --dark: #ffffff;
  --brand: #3d81e3;
  --glass: rgba(255, 255, 255, 0.01);
  color: var(--ink);
  background: var(--paper);
}

body {
  background: var(--paper);
  color: var(--ink);
  font-family: 'Inter', 'Inter Tight', system-ui, 'PingFang SC', 'Microsoft YaHei', sans-serif;
  letter-spacing: 0;
}
::selection {
  background: rgba(61, 129, 227, 0.3);
}

/* The page grain sits over a dark ground now, so it lightens rather than multiplies. */
body::after {
  opacity: 0.06;
  mix-blend-mode: screen;
  z-index: 1;
}
/* site.css lifts every direct child of body to z-index 1 so the grain sits under them; the
   backdrop has to go below that, and the grain above it. */
.backdrop {
  z-index: 0;
}
body > .backdrop {
  z-index: 0;
}

/* ── Chrome ──────────────────────────────────────────────────────────────────────────────── */
.topbar {
  background: rgba(12, 12, 12, 0.72);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
.topbar nav {
  background: transparent;
  color: var(--muted);
}
.topbar nav a {
  color: rgba(255, 255, 255, 0.7);
}
.topbar nav a:hover {
  color: #fff;
}
.topbar nav a[aria-current='page'] {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  box-shadow: none;
}
.platform-brand strong,
.brand strong {
  color: #fff;
}
/* Apple-pill: white on black, the one solid control on the page. -webkit-text-fill-color has to
   be set, not just `color`: site.css sets it to #fff for the light theme's dark pill, it beats
   `color`, and it is inherited — so without this the white pill carried white text. That is the
   second time this property has produced an invisible label; it is only ever safe on the rule
   that also owns the background. */
.button.primary,
.pill,
.lang-toggle button[aria-pressed='true'] {
  background: #fff;
  color: #000;
  -webkit-text-fill-color: #000;
  border-color: rgba(255, 255, 255, 0.12);
}
.button.primary span,
.pill span,
.lang-toggle button[aria-pressed='true'] span {
  -webkit-text-fill-color: #000;
}
.button.primary:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.9);
}
.button.primary span {
  color: inherit;
}
.button {
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #fff;
  background: transparent;
}
.button:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.05);
}
.lang-toggle {
  background: rgba(255, 255, 255, 0.04);
  border-color: var(--line);
}
.lang-toggle button {
  color: var(--muted);
}
.lang-toggle button + button {
  border-left-color: var(--line);
}
footer {
  background: transparent;
  border-top: 1px solid var(--line);
  color: var(--faint);
}

/* ── Liquid glass ────────────────────────────────────────────────────────────────────────── */
.liquid-glass {
  background: var(--glass);
  background-blend-mode: luminosity;
  backdrop-filter: blur(4px);
  border: none;
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.1);
  position: relative;
  overflow: hidden;
}
.liquid-glass::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.4px;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.45) 0%,
    rgba(255, 255, 255, 0.15) 20%,
    rgba(255, 255, 255, 0) 40%,
    rgba(255, 255, 255, 0) 60%,
    rgba(255, 255, 255, 0.15) 80%,
    rgba(255, 255, 255, 0.45) 100%
  );
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

/* ── Hero ────────────────────────────────────────────────────────────────────────────────── */
.hero {
  background: transparent;
  position: relative;
  display: block;
  text-align: center;
  padding: 72px 5% 60px;
  min-height: 0;
  max-width: 1152px;
}
.hero-copy {
  max-width: none;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.hero .eyebrow {
  color: var(--faint);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-size: 11px;
}
.hero h1 {
  font-size: clamp(40px, 7vw, 84px);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 0.94;
  margin: 22px 0 0;
  max-width: 15ch;
}
/* The second line is the shiny one. The gradient is painted into the glyphs and then pulled
   across them; the noise filter keeps the sweep from banding on a wide screen. */
.shiny {
  display: block;
  background-image: linear-gradient(
    to right,
    #091020 0%,
    #0b2551 12.5%,
    #a4f4fd 32.5%,
    #00d2ff 50%,
    #0b2551 67.5%,
    #091020 87.5%,
    #091020 100%
  );
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  filter: url(#c3-noise);
  animation: shiny 6s linear infinite;
}
@keyframes shiny {
  0% {
    background-position: -200% center;
  }
  100% {
    background-position: 200% center;
  }
}
@media (prefers-reduced-motion: reduce) {
  .shiny {
    animation: none;
    background-position: 50% center;
  }
}
.hero .brand-system-title,
.hero p {
  color: var(--muted);
  max-width: 52ch;
  margin: 26px auto 0;
  font-size: 15px;
  line-height: 1.55;
}
.hero-actions {
  justify-content: center;
  gap: 14px;
  margin-top: 30px;
}
.hero-caption {
  color: var(--faint);
  justify-content: center;
  font-size: 11px;
}
.hero .text-link {
  color: rgba(255, 255, 255, 0.6);
}
.hero .text-link:hover {
  color: #fff;
}

/* Two guide lines at the container edges, as in the reference. */
.guide {
  position: fixed;
  top: 0;
  bottom: 0;
  width: 1px;
  background: rgba(255, 255, 255, 0.08);
  z-index: 5;
  pointer-events: none;
}
.guide.left {
  left: calc(50% - 36rem);
}
.guide.right {
  left: calc(50% + 36rem);
}
@media (max-width: 1200px) {
  .guide {
    display: none;
  }
}

/* ── The status strip, in the shape of a menu bar ────────────────────────────────────────── */
.menubar {
  height: 40px;
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(12px);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.menubar-inner {
  max-width: 1152px;
  margin: auto;
  padding: 0 5%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
  color: var(--muted);
  gap: 16px;
}
.menubar-inner strong {
  color: #fff;
  font-weight: 700;
}
.menubar-items {
  display: flex;
  gap: 18px;
  min-width: 0;
  overflow: hidden;
}
.menubar-right {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  color: var(--faint);
}
@media (max-width: 720px) {
  .menubar-items span:nth-child(n + 3) {
    display: none;
  }
}

/* ── Sections ────────────────────────────────────────────────────────────────────────────── */
.section {
  background: transparent;
}
.section h2,
.section h3 {
  color: #fff;
}
.section p,
.fine {
  color: var(--muted);
}
.surface,
.project-card,
.rule-cards article,
.tk-panel,
.ex-group,
.ex-card,
.launch-card {
  background: rgba(255, 255, 255, 0.02);
  border-color: var(--line);
  color: var(--ink);
}
table th {
  color: var(--faint);
}
table td,
table th {
  border-color: var(--line);
}
input,
textarea,
select,
.launch-ticker,
.stock-trigger,
.stock-menu,
.ex-search-field {
  background: rgba(255, 255, 255, 0.03);
  border-color: var(--line);
  color: #fff;
}
input::placeholder,
textarea::placeholder {
  color: var(--faint);
}
.stock-menu {
  background: #131313;
}
.stock-menu li:hover {
  background: rgba(255, 255, 255, 0.06);
}
.badge {
  border-color: var(--line);
  color: var(--muted);
}

/* ── The watermark, behind the fee section ───────────────────────────────────────────────── */
.watermark {
  position: relative;
  text-align: center;
  margin: 0 auto 8px;
  max-width: 1100px;
  z-index: 2;
  pointer-events: none;
  user-select: none;
}
.watermark-main {
  font-size: clamp(3rem, 9vw, 9rem);
  font-weight: 800;
  line-height: 0.9;
  letter-spacing: -0.05em;
  filter: url(#c3-noise-soft);
  display: flex;
  flex-direction: column;
  align-items: center;
}
.watermark-line-1 {
  color: #fff;
}
.watermark-line-2 {
  background: linear-gradient(to right, #091020 0%, #0b2551 25%, #a4f4fd 65%, #00d2ff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
@media (max-width: 1024px) {
  .watermark-main {
    filter: none;
  }
  .watermark-line-2 {
    background: none;
    -webkit-text-fill-color: #00d2ff;
    color: #00d2ff;
  }
}

/* ── Reserve marks ───────────────────────────────────────────────────────────────────────── */
.reserve-cloud {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
  gap: 18px;
  margin-top: 26px;
}
.reserve-mark {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  opacity: 0.55;
  transition: opacity 0.3s var(--ease);
}
.reserve-mark:hover {
  opacity: 1;
}
.reserve-mark img {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  object-fit: contain;
}
.reserve-mark span {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: rgba(255, 255, 255, 0.65);
}

/* ── Final call ──────────────────────────────────────────────────────────────────────────── */
.final-cta {
  max-width: 1152px;
  margin: 0 auto;
  padding: 80px 5% 110px;
}
.final-cta-inner {
  border-radius: 28px;
  padding: 64px 32px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.final-cta-inner::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.3;
  background: radial-gradient(600px circle at 50% 0%, rgba(255, 255, 255, 0.15), transparent 70%);
}
.final-cta h2 {
  font-size: clamp(30px, 5.4vw, 60px);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.02;
  margin: 0;
  position: relative;
}
.final-cta p {
  margin: 22px auto 0;
  max-width: 44ch;
  font-size: 14px;
  line-height: 1.6;
  position: relative;
}
.final-cta .hero-actions {
  margin-top: 30px;
  position: relative;
}

/* site.css sets .hero{background:var(--dark);color:var(--paper)} — an inversion that was right
   when paper was light. Both tokens flipped, so the hero was painting black on black. Here the
   page is already the dark ground, so the hero inverts nothing. */
.hero {
  color: var(--ink);
}
.hero h1,
.hero h1 > span:not(.shiny) {
  color: #fff;
}
/* The light-theme hero overrides (paper fill, ink text) are wrong on a dark page: the primary is
   the white Apple pill again, and the outline button is a white hairline. */
body[data-site='protocol'] .protocol-hero .hero-actions .button.primary,
body[data-site='protocol'] .protocol-hero .hero-actions .button.primary:hover {
  background: #fff;
  border-color: rgba(255, 255, 255, 0.12);
  color: #000;
  -webkit-text-fill-color: #000;
}
.hero .button:not(.primary) {
  color: #fff;
  -webkit-text-fill-color: #fff;
  border-color: rgba(255, 255, 255, 0.15);
}
.hero .button:not(.primary):hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.3);
}
.lang-toggle button[aria-pressed='false'] {
  background: transparent;
  color: rgba(255, 255, 255, 0.55);
}
.hero .eyebrow,
.hero .hero-caption {
  position: relative;
}

/* Sections that hard-code a light ground. These are the ones the token swap could not reach,
   because the colour is written into the rule rather than taken from a variable. */
.rule-strip {
  background: rgba(255, 255, 255, 0.02);
  border-top: 1px solid var(--line);
}
.rule-strip strong,
.rule-strip b {
  color: #fff;
}
.rule-strip span,
.rule-strip small {
  color: var(--muted);
}
.planned {
  background: rgba(255, 255, 255, 0.02);
}
.planned-mark {
  color: rgba(255, 255, 255, 0.12);
}
.project-card,
.chain-tabs button,
.flow,
.technical-grid article,
.resource-card {
  background: rgba(255, 255, 255, 0.02);
  border-color: var(--line);
}
.chain-tabs button.selected,
.chain-tabs button[aria-pressed='true'] {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}
.badge.amber {
  color: var(--orange);
  border-color: rgba(164, 244, 253, 0.3);
}

/* ── Backdrop ────────────────────────────────────────────────────────────────────────────────
   The reference's backdrop is a looping video. This is the same idea without the 8 MB and without
   a third-party request: three large colour blooms in the reference's own palette, drifting on a
   slow loop behind everything. Transform and opacity only, so it composites on the GPU and costs
   nothing to scroll over. */
.backdrop {
  position: fixed;
  inset: -20%;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.backdrop i {
  position: absolute;
  display: block;
  border-radius: 50%;
  filter: blur(90px);
  opacity: 0.5;
  will-change: transform;
}
.backdrop i:nth-child(1) {
  width: 48vw;
  height: 48vw;
  left: 8%;
  top: 2%;
  background: radial-gradient(circle, rgba(11, 37, 81, 0.85) 0%, rgba(11, 37, 81, 0) 70%);
  animation: drift-a 34s ease-in-out infinite alternate;
}
.backdrop i:nth-child(2) {
  width: 40vw;
  height: 40vw;
  right: 4%;
  top: 14%;
  background: radial-gradient(circle, rgba(0, 210, 255, 0.3) 0%, rgba(0, 210, 255, 0) 70%);
  animation: drift-b 44s ease-in-out infinite alternate;
}
.backdrop i:nth-child(3) {
  width: 56vw;
  height: 56vw;
  left: 26%;
  top: 38%;
  background: radial-gradient(circle, rgba(164, 244, 253, 0.14) 0%, rgba(164, 244, 253, 0) 68%);
  animation: drift-c 52s ease-in-out infinite alternate;
}
@keyframes drift-a {
  from {
    transform: translate3d(0, 0, 0) scale(1);
  }
  to {
    transform: translate3d(9vw, 6vh, 0) scale(1.18);
  }
}
@keyframes drift-b {
  from {
    transform: translate3d(0, 0, 0) scale(1.1);
  }
  to {
    transform: translate3d(-11vw, 9vh, 0) scale(0.92);
  }
}
@keyframes drift-c {
  from {
    transform: translate3d(0, 0, 0) scale(0.95);
  }
  to {
    transform: translate3d(7vw, -8vh, 0) scale(1.22);
  }
}

/* ── Entrance ────────────────────────────────────────────────────────────────────────────────
   The reference drives these with motion/react. The same curve and the same delays, as CSS: the
   nav settles first, then the headline, the paragraph, the buttons, the status strip. Everything
   animates opacity and transform only, and `both` holds the from-state so nothing flashes at
   full opacity before its turn. */
@keyframes rise {
  from {
    opacity: 0;
    transform: translate3d(0, 18px, 0);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes settle {
  from {
    opacity: 0;
    transform: translate3d(0, -10px, 0);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.topbar {
  animation: settle 0.6s ease-out both;
}
.hero .eyebrow {
  animation: rise 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.15s both;
}
.hero h1 {
  animation: rise 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.3s both;
}
.hero .brand-system-title {
  animation: rise 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.5s both;
}
.hero-actions {
  animation: rise 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.7s both;
}
.hero-caption {
  animation: rise 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.8s both;
}
.menubar {
  animation: rise 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.9s both;
}
.rule-strip {
  animation: rise 0.8s cubic-bezier(0.22, 1, 0.36, 1) 1.1s both;
}

/* Motion is decoration here, so it is the first thing to go when it is not wanted. */
@media (prefers-reduced-motion: reduce) {
  .backdrop i {
    animation: none;
  }
  .topbar,
  .hero .eyebrow,
  .hero h1,
  .hero .brand-system-title,
  .hero-actions,
  .hero-caption,
  .menubar,
  .rule-strip {
    animation: none;
  }
}

/* ── Light literals, inverted ────────────────────────────────────────────────────────────────
   site.css and launch.css write most of their surfaces as literal near-white hex rather than as
   tokens, so the token swap could not reach them. These are all of them, found by scanning both
   files for a background whose luminance is above 200, and grouped by what the surface is for:
   a field, a raised panel, or a selected control. Text that sat on them is corrected with them —
   an inverted background with the old dark text is just as unreadable as the reverse. */
:root {
  --surf: rgba(255, 255, 255, 0.06);
  --surf-2: rgba(255, 255, 255, 0.04);
  --hair: rgba(255, 255, 255, 0.08);
}
/* Fields and the palest panels. */
.field input,
.launch-field input,
.launch-field textarea,
.launch-field select,
.fee-number input,
.demo-tools select,
.stat-grid,
.surface,
.treasury-card,
.wallet-choice,
.stock-trigger {
  background: rgba(255, 255, 255, 0.03);
  color: var(--ink);
}
/* Raised panels and bands. */
.preview-strip,
.rule-strip,
.flow-section,
.flagship,
.planned,
.launch-callout,
.formula,
.mode-bar,
.demo-tools,
.ledger-strip,
.surface.tinted,
.future,
.block-grid button,
.wallet-callout,
.launch-review,
.launch-done,
.button.light,
th {
  background: rgba(255, 255, 255, 0.05);
  color: var(--ink);
}
/* Selected controls: the surface lifts, the text goes full white. Before this the selected tab
   and the count badge were white on white — the background came from --surf and the text from
   --ink, and both had flipped. */
.ex-tabs button.on,
.ex-count,
.chain-tabs .selected,
.asset-tabs .selected,
.trade-tabs .selected,
body[data-site='protocol'] .chain-tabs button {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  box-shadow: none;
}
.ex-tabs button:hover:not(.on) {
  background: rgba(255, 255, 255, 0.05);
}
.wallet-choice:hover,
.launch-field input:disabled,
.launch-field textarea:disabled,
.button:disabled {
  background: rgba(255, 255, 255, 0.04);
  color: var(--faint);
}
.wallet-mark {
  background: rgba(255, 255, 255, 0.08);
}
/* Tinted states keep their hue and lose their brightness. */
.badge.amber,
.mode-bar.demo {
  background: rgba(164, 244, 253, 0.08);
  color: var(--orange);
  border-color: rgba(164, 244, 253, 0.25);
}
body[data-site='protocol'] .chain-tabs #rh-tab {
  background: rgba(61, 129, 227, 0.14);
  color: #fff;
}
body[data-site='protocol'] .chain-tabs #bsc-tab,
body[data-site='protocol'] .chain-tabs #xl-tab {
  background: rgba(255, 255, 255, 0.05);
}
.cube-progress i {
  background: var(--brand);
}
.wall-chart .empty-wall {
  background: rgba(255, 255, 255, 0.06);
}
.lang-toggle {
  background: rgba(255, 255, 255, 0.04);
}
.topbar nav a[aria-current='page'] {
  background: rgba(255, 255, 255, 0.1);
}

/* ── Section rhythm ──────────────────────────────────────────────────────────────────────────
   Our own sections, kept in our own words, but stepping down the page as distinct blocks instead
   of one unbroken dark field. Alternating bands carry a faint tonal shift and a hairline, so the
   eye can tell where one idea ends and the next begins without a heading having to do all of it.
   The bands are barely-there on purpose: on a near-black ground a 2% lift reads as a separate
   plane, and anything more starts to look like boxes. */
main > .section,
main > .flow-section,
main > .reserve-section {
  position: relative;
  padding-top: clamp(56px, 7vw, 96px);
  padding-bottom: clamp(56px, 7vw, 96px);
  border-top: 1px solid var(--line);
}
main > .section:nth-of-type(even) {
  background: rgba(255, 255, 255, 0.018);
}
/* A soft bloom at the top of each band, so the seam reads as light falling on it rather than as a
   drawn line. */
main > .section::before {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: 220px;
  pointer-events: none;
  background: radial-gradient(
    70% 100% at 50% 0%,
    rgba(255, 255, 255, 0.05) 0%,
    rgba(255, 255, 255, 0) 72%
  );
}
main > .section > * {
  position: relative;
}
/* The eyebrow is the step marker: a number and a name, the way each section already labels
   itself. */
.section .eyebrow {
  color: var(--faint);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-size: 11px;
}
.section h2 {
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.04;
}
.reserve-section {
  text-align: center;
}
.reserve-section .eyebrow {
  justify-content: center;
}
.final-cta {
  border-top: 1px solid var(--line);
}

/* The same inversion again, at the specificity the light rules actually use. The first sweep
   matched on bare class names and lost to every `body[data-site=protocol] …` rule — which is how
   the planned cards stayed cream with white text on them. Selectors here are copied from the rules
   they override, so the weights match and the later file wins on order alone. */
body[data-site='protocol'] .project-card.planned {
  background: rgba(255, 255, 255, 0.04);
}
body[data-site='protocol'] .chain-tabs button {
  background: rgba(255, 255, 255, 0.05);
}
body[data-site='protocol'] .chain-tabs #rh-tab {
  background: rgba(61, 129, 227, 0.16);
}
body[data-site='protocol'] .chain-tabs #bsc-tab,
body[data-site='protocol'] .chain-tabs #sol-tab,
body[data-site='protocol'] .chain-tabs #xl-tab {
  background: rgba(255, 255, 255, 0.05);
}
body[data-site='protocol'] .protocol-hero .hero-actions .button.primary,
body[data-site='protocol'] .protocol-hero .hero-actions .button.primary:hover {
  background: #fff;
}
.hero .primary {
  background: #fff;
  color: #000;
  -webkit-text-fill-color: #000;
}
.google-node .satellite-disc {
  background: rgba(255, 255, 255, 0.12);
}

/* Two tokens the first pass missed, found by scanning for custom properties whose value is a
   light hex rather than for rules with a light background. --surf-2 is what the fee table sits
   on, which is why it was white-on-white with the fee split written across it. */
.accrued {
  background: rgba(164, 244, 253, 0.1);
  color: var(--orange);
}

/* Greyscale at 60% opacity reads as "broken image" on a dark ground rather than as "not yet
   available". The mark keeps its colour and simply sits back. */
.stock-menu li.unready .stock-mark {
  filter: none;
  opacity: 0.45;
}
.stock-menu li.unready:hover .stock-mark {
  opacity: 0.75;
}
.stock-mark {
  background: rgba(255, 255, 255, 0.08);
}
.stock-mark.letter {
  color: rgba(255, 255, 255, 0.65);
}
.stock-contract {
  color: rgba(255, 255, 255, 0.55);
  border-color: var(--line);
}
.stock-contract:hover {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.35);
}