/* Vesta — a touch of orange.

   The built palette already names #ff9100 as --color-accent, but the homepage
   only spent it on the two status dots beside "Launch app". These rules put it
   in a few small, deliberate places. Almost all of them sit on the dark
   surfaces: orange on #232323 is ~7:1, while as text on the off-white it drops
   to about 2:1 and would not read.

   CSS only, on purpose. The page is a compiled Next export that hydrates from
   its RSC payload, so a markup edit would be overwritten on load; a stylesheet
   <link> in <head> survives React taking over the document. */

/* The ticker tape under the nav ("Now live, 69 tickers"): grey strip -> orange.
   The text is already black, which reads at ~9:1 on the orange. */
nav[aria-label="Primary"] .h-18.bg-ghost-grey {
  background-color: var(--color-accent);
}

/* Feature index: the "001 /" numerals go orange, the title stays white. The
   number is a bare text node beside the title span, so colour the line and hand
   the title its white back. */
#features h3 .line { color: var(--color-accent); }
#features h3 [data-studio-field] { color: var(--color-white); }

/* FAQ: only the question that is open picks up the accent — its "Q.00x /" and
   the toggle chip — so the list stays calm and the orange marks where you are. */
#faq button[aria-expanded="true"] .text-dark-grey { color: var(--color-accent); }
#faq button[aria-expanded="true"] > span[aria-hidden] {
  background-color: var(--color-accent);
  color: var(--color-black-deep);
}

/* The blinking block cursor in the "Common problems" terminal. */
.animate-cursor-blink { background-color: var(--color-accent); }

/* Selecting text anywhere. */
::selection { background-color: var(--color-accent); color: var(--color-black-deep); }

/* The logo. The nav's home link still renders the template's halftone mark as
   an inline <svg>; swap its paths for the Vesta mark. The nav is black and the
   mark's left ring is charcoal, so it goes in on its off-white tile rather than
   the transparent cut. The svg itself stays, so its aria-label="Vesta" does too. */
a[aria-label="Home"] > svg[aria-label="Vesta"] {
  background: url(/brand/vesta-tile-96.png) center / cover no-repeat;
  border-radius: 4px;
}
a[aria-label="Home"] > svg[aria-label="Vesta"] > * { display: none; }

/* $VESTA contract address under the hero's Launch app button (brand/vesta-ca.js
   inserts it after hydration). Dashed outline like the callout box; the Copy
   tag is the one orange moment, and only once it has copied. */
.vesta-ca {
  display: flex; align-items: center; gap: 10px;
  width: fit-content; max-width: 100%; margin-top: 14px; padding: 8px 8px 8px 12px;
  border: 1px dashed rgb(35 35 35 / .35); border-radius: 8px; background: transparent;
  color: var(--color-black); font-family: var(--font-mono); font-size: 12px; line-height: 1;
  cursor: pointer; text-align: left;
  animation: vesta-ca-in .5s cubic-bezier(.23, 1, .32, 1) both;
  transition: background-color .2s, border-color .2s;
}
.vesta-ca:hover { background-color: rgb(35 35 35 / .05); border-color: rgb(35 35 35 / .6); }
.vesta-ca:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.vesta-ca__label { color: var(--color-dark-grey); letter-spacing: .08em; }
.vesta-ca__addr { letter-spacing: .01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vesta-ca__addr--short { display: none; }
.vesta-ca__copy {
  flex-shrink: 0; padding: 5px 8px; border-radius: 4px;
  background: var(--color-black); color: var(--color-off-white);
  text-transform: uppercase; letter-spacing: .08em; font-size: 11px;
  transition: background-color .2s, color .2s;
}
.vesta-ca.is-copied .vesta-ca__copy { background: var(--color-accent); color: var(--color-black-deep); }
@media (max-width: 520px) {
  .vesta-ca__addr--full { display: none; }
  .vesta-ca__addr--short { display: inline; }
}
@keyframes vesta-ca-in { from { opacity: 0; transform: translateY(6px); } }
@media (prefers-reduced-motion: reduce) { .vesta-ca { animation: none; } }