/* The Framer canvas is preserved. This fallback gives the full hero the same
 * blue atmosphere while the shader initializes and on devices without WebGL. */
[data-framer-name="Hero"] {
  position: relative !important;
  isolation: isolate;
  overflow: hidden !important;
  width: 100vw !important;
  max-width: none !important;
  min-height: 100svh !important;
  background: #040812;
}

[data-framer-name="Hero"]::before,
[data-framer-name="Hero"]::after {
  content: "";
  position: absolute;
  pointer-events: none;
  z-index: 0;
}

/* Blue and black, not blue on blue. The earlier fallback ended on a blue
 * linear gradient, so every pixel of the hero was lit and the shader's own
 * dark bands had nothing to sit against. The base is black now and the blue
 * arrives as two light sources that fall off well before the edges, which is
 * the same treatment the docs hero already uses. */
[data-framer-name="Hero"]::before {
  inset: -22%;
  background:
    radial-gradient(44% 54% at 14% 4%, rgba(72, 110, 255, .58) 0%, rgba(38, 72, 196, .22) 34%, transparent 64%),
    radial-gradient(36% 44% at 88% 8%, rgba(45, 102, 246, .18) 0%, rgba(24, 52, 150, .07) 38%, transparent 66%),
    radial-gradient(64% 52% at 46% 108%, rgba(18, 40, 112, .26) 0%, transparent 60%),
    #04060b;
  filter: blur(26px) saturate(1.1);
  transform: scale(1.05);
  animation: ocelot-hero-flow 17s ease-in-out infinite alternate;
}

[data-framer-name="Hero"]::after {
  inset: -10% -34%;
  opacity: .24;
  background: repeating-linear-gradient(
    92deg,
    rgba(135, 164, 255, 0) 0 11%,
    rgba(135, 164, 255, .14) 17%,
    rgba(61, 105, 236, .04) 25%,
    rgba(8, 27, 75, 0) 38%
  );
  filter: blur(16px);
  animation: ocelot-hero-bands 13s linear infinite alternate;
}

[data-framer-name="Hero"] > * {
  position: relative;
  z-index: 1;
}

/* With the wash behind it dimmed, the exported shader is the thing actually
 * being watched, so it is no longer held at a third of its strength. */
[data-framer-name="Hero"] canvas {
  width: 100% !important;
  height: 100% !important;
  opacity: .58;
  mix-blend-mode: screen;
}

/* This is a capture of the production Simple mode, not a recreated interface. */
[data-framer-name="Simple mode product screen"] {
  position: relative !important;
  overflow: hidden !important;
  border: 1px solid rgba(132, 154, 213, .22) !important;
  border-radius: 16px !important;
  background: #080c13 !important;
  box-shadow: 0 30px 90px rgba(0, 0, 0, .46) !important;
}

[data-framer-name="Simple mode product screen"]::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  /* The version query matters: this capture replaced an older one under the
   * same URL, and browsers hold /assets/ for a day. Without it, a returning
   * visitor kept seeing the previous capture (24H, no underlying line, the
   * advanced-mode tooltip) long after the corrected one shipped. */
  background: #080c13 url('/assets/images/ocelot-simple-mode-solana.png?v=2') top center / cover no-repeat;
}

/* On a phone the slot is portrait (roughly 358x600) and this capture is a
   1440x810 desktop screen, so `cover` scaled it to fill the height and threw
   away about 60% of the width: the hero showed a sliced "…PER3L" and half a
   headline. A desktop screenshot does not become a mobile screenshot by being
   cropped harder.
   
   So the phone gets its own capture, taken at 420x720 against the real app in
   simple mode. Its aspect (0.58) is within a hair of the slot's (0.60), so
   almost nothing is cropped and every figure stays legible. */
@media (max-width: 809.98px) {
  [data-framer-name="Simple mode product screen"]::after {
    background-image: url('/assets/images/ocelot-simple-mode-mobile.png?v=1');
    background-position: top center;
  }
}

/* Inside the hero now: aligned to the headline's own column, separated from
 * the call to action by a hairline rather than by a whole black band. */
.ocelot-support {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 13px 18px;
  width: auto;
  margin: 26px 0 0;
  padding: 15px 0 0;
  background: transparent;
  border: 0;
  border-top: 1px solid rgba(255, 255, 255, .13);
  max-width: 520px;
}

/* Two credits on one rule. Each is a label plus its mark; the divider between
   them keeps the Foundation's lockup from reading as Phoenix's caption. */
.ocelot-support-item {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.ocelot-support-rule {
  width: 1px;
  height: 18px;
  background: rgba(255, 255, 255, .16);
}

/* The real Phoenix lockup: their mark beside their wordmark, as they set it.
   `currentColor` on the path means it takes the label's colour, so the credit
   stays one temperature instead of importing a second brand's palette into
   the hero. */
.ocelot-support-phoenix-lockup {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #cdd8f5;
  text-decoration: none;
  transition: color .18s ease;
}

.ocelot-support-phoenix-lockup:hover { color: #fff; }

.ocelot-support-phoenix {
  display: block;
  width: 15px;
  height: auto;
  flex: 0 0 auto;
}

.ocelot-support b {
  color: inherit;
  font: 600 12px/1 "Helvetica Neue", Helvetica, "Inter", Arial, sans-serif;
  letter-spacing: .1em;
  text-transform: none;
}

@media (max-width: 809.98px) {
  .ocelot-support { max-width: 100%; }
  .ocelot-support-rule { display: none; }
}

.ocelot-support span {
  color: #7f899d;
  font: 500 10px/1 "Helvetica Neue", Helvetica, "Inter", Arial, sans-serif;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.ocelot-support img {
  display: block;
  width: 148px;
  height: auto;
  opacity: .92;
}

@keyframes ocelot-hero-flow {
  0% { transform: translate3d(-4%, -2%, 0) scale(1.06) rotate(-2deg); }
  55% { transform: translate3d(4%, 3%, 0) scale(1.12) rotate(1deg); }
  100% { transform: translate3d(-1%, 6%, 0) scale(1.08) rotate(3deg); }
}

@keyframes ocelot-hero-bands {
  from { transform: translate3d(-10%, -3%, 0) skewX(-7deg); }
  to { transform: translate3d(10%, 4%, 0) skewX(-7deg); }
}

@media (prefers-reduced-motion: reduce) {
  [data-framer-name="Hero"]::before,
  [data-framer-name="Hero"]::after { animation: none; }
}

@media (max-width: 809.98px) {
  .ocelot-support { width: auto; margin-top: 22px; padding-top: 13px; }
  .ocelot-support img { width: 130px; }

  /* A glow sized for a 1500px canvas covers a phone end to end, which turns the
   * hero back into a flat blue panel. Pulling both sources in keeps the same
   * blue-against-black reading at narrow widths. */
  [data-framer-name="Hero"]::before {
    background:
      radial-gradient(64% 30% at 6% 2%, rgba(72, 110, 255, .46) 0%, rgba(38, 72, 196, .16) 38%, transparent 66%),
      radial-gradient(56% 24% at 96% 6%, rgba(45, 102, 246, .24) 0%, transparent 62%),
      #04060b;
  }

  [data-framer-name="Hero"]::after { opacity: .16; }
}

/* ------------------------------------------------- landing market rail */

/* The old landing's market marquee, restated for the dark page. Cards are
 * solid surfaces (house ruling: no glass); each asset's identity arrives as a
 * wash of its own colour composited over the opaque base, plus a tinted
 * hairline. Logos sit on a light disc so ink-dark equity marks stay legible. */
/* The export drops this section into a flex row, so it becomes a flex item
 * whose automatic minimum size is its own content: 13 cards twice over, 8164px
 * wide. The window then never clipped anything, and once the track scrolled
 * past the real cards you saw the empty remainder of an over-wide box.
 * `min-width: 0` is what lets a flex item be narrower than its content. */
.ocelot-rail {
  width: 100%;
  min-width: 0;
  max-width: 100vw;
  padding: 74px 0 30px;
  background: #050505;
  overflow: hidden;
}

.ocelot-rail-heading {
  width: min(calc(100% - 48px), 1180px);
  margin: 0 auto 34px;
}

.ocelot-rail-heading span {
  color: #5b7fff;
  font: 500 12px/1 "Helvetica Neue", Helvetica, "Inter", Arial, sans-serif;
  letter-spacing: .12em;
}

.ocelot-rail-heading h2 {
  margin: 14px 0 0;
  color: #f2f4f8;
  font: 500 44px/1.08 "Helvetica Neue", Helvetica, "Inter", Arial, sans-serif;
  letter-spacing: -.01em;
}

.ocelot-rail-window {
  width: 100%;
  min-width: 0;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}

.ocelot-rail-track {
  display: flex;
  width: max-content;
  animation: ocelot-rail-scroll 64s linear infinite;
}

.ocelot-rail-window:hover .ocelot-rail-track { animation-play-state: paused; }

.ocelot-rail-group {
  display: flex;
  gap: 14px;
  padding-right: 14px;
}

.ocelot-rail-card {
  width: 300px;
  flex: none;
  border-radius: 12px;
  padding: 15px 16px 13px;
  background:
    linear-gradient(155deg, color-mix(in srgb, var(--rail-tint) 13%, #0a0e15) 0%, #0a0e15 58%);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--rail-tint) 22%, #1b2230);
}

.ocelot-rail-card header {
  display: flex;
  align-items: center;
  gap: 11px;
}

.ocelot-rail-disc {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  flex: none;
  border-radius: 999px;
  background: #eef1f6;
}

.ocelot-rail-disc img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 999px;
  object-fit: cover;
}

.ocelot-rail-name {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.ocelot-rail-name b {
  color: #f2f4f8;
  font: 600 13.5px/1.15 "Helvetica Neue", Helvetica, "Inter", Arial, sans-serif;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ocelot-rail-name small {
  color: #77839a;
  font: 500 10px/1 "Helvetica Neue", Helvetica, "Inter", Arial, sans-serif;
  letter-spacing: .1em;
}

.ocelot-rail-move {
  margin-left: auto;
  font: 600 13px/1 "Helvetica Neue", Helvetica, "Inter", Arial, sans-serif;
  color: #9aa5b8;
}

.ocelot-rail-move[data-dir="up"] { color: #34d399; }
.ocelot-rail-move[data-dir="down"] { color: #f87171; }

.ocelot-rail-products {
  display: flex;
  flex-direction: column;
  gap: 1px;
  margin-top: 13px;
  border-top: 1px solid rgba(255, 255, 255, .07);
  padding-top: 9px;
}

.ocelot-rail-product {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 5px 0;
}

/* The app's own product mark (VaultProductMark): one pill, the asset's hue as
 * a halo from the left edge, the logo disc, then the side wedge and numeral.
 * Long is the app's long-blue and short its amber; short is a side, not a
 * loss. */
.ocelot-rail-mark {
  display: inline-flex;
  align-items: center;
  flex: none;
  height: 22px;
  padding: 0 6px 0 3px;
  column-gap: 3px;
  border-radius: 7px;
  background:
    linear-gradient(100deg, color-mix(in srgb, var(--rail-tint) 34%, transparent) 0%, transparent 52%),
    #141a25;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--rail-tint) 28%, transparent);
}

/* The disc carries its own light ground. Several marks (NVIDIA, Tesla, Meta,
 * Micron) are pure black ink with no fill of their own, so on the pill's dark
 * body they disappeared entirely; the same failure the Fartcoin mark had on
 * the product cards. */
.ocelot-rail-mark img {
  display: block;
  width: 16px;
  height: 16px;
  border-radius: 999px;
  background: #eef1f6;
  object-fit: cover;
}

.ocelot-rail-mark i {
  font-style: normal;
  font-size: 8px;
  line-height: 1;
}

.ocelot-rail-mark b {
  color: #f2f4f8;
  font: 500 10.5px/1 "Helvetica Neue", Helvetica, "Inter", Arial, sans-serif;
}

.ocelot-rail-product[data-side="long"] .ocelot-rail-mark i { color: #8fb0ff; }
.ocelot-rail-product[data-side="short"] .ocelot-rail-mark i { color: #f59e0b; }

.ocelot-rail-product small {
  color: #b7c0d1;
  font: 500 11px/1 "Helvetica Neue", Helvetica, "Inter", Arial, sans-serif;
  letter-spacing: .06em;
}

.ocelot-rail-product b {
  margin-left: auto;
  font: 600 12px/1 "Helvetica Neue", Helvetica, "Inter", Arial, sans-serif;
  color: #9aa5b8;
}

.ocelot-rail-product[data-dir="up"] b { color: #34d399; }
.ocelot-rail-product[data-dir="down"] b { color: #f87171; }

.ocelot-rail-note {
  width: min(calc(100% - 48px), 1180px);
  margin: 22px auto 0;
  color: #6b7589;
  text-align: center;
  font: 500 11px/1.4 "Helvetica Neue", Helvetica, "Inter", Arial, sans-serif;
  letter-spacing: .04em;
}

@keyframes ocelot-rail-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .ocelot-rail-track { animation: none; }
  .ocelot-rail-window { overflow-x: auto; }
}

@media (max-width: 809.98px) {
  .ocelot-rail { padding-top: 54px; }
  .ocelot-rail-heading h2 { font-size: 30px; }
  .ocelot-rail-card { width: 260px; }
}

/* --------------------------------------------------- how-it-works step cards */

/* The three step cards arrived as flat boxes: mock panel and copy shared one
 * undifferentiated surface. The mock now reads as a framed screen sitting on
 * the card, the copy gets room, and the whole card answers hover with a lift
 * and a firmer hairline instead of sitting inert. */
[data-framer-name^="step-"] {
  border-radius: 14px !important;
  background: #0a0d14 !important;
  box-shadow: inset 0 0 0 1px rgba(132, 154, 213, .14) !important;
  transition: transform .22s ease, box-shadow .22s ease;
}

[data-framer-name^="step-"]:hover {
  transform: translateY(-3px);
  box-shadow: inset 0 0 0 1px rgba(132, 154, 213, .26), 0 18px 44px rgba(0, 0, 0, .34) !important;
}

[data-framer-name^="step-"] > [data-framer-name$="visual"],
[data-framer-name^="step-"] > [data-framer-name$="Visual"],
[data-framer-name^="step-"] > [data-framer-name*="visual"] {
  border-radius: 10px !important;
  overflow: hidden !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07) !important;
  background: #070a10 !important;
}

[data-framer-name^="step-"] [data-framer-name="txt"] h3 {
  letter-spacing: -.01em;
}

@media (prefers-reduced-motion: reduce) {
  [data-framer-name^="step-"] { transition: none; }
  [data-framer-name^="step-"]:hover { transform: none; }
}

/* ------------------------------------------- how-it-works real product captures */

/* The three step mocks were hand-drawn recreations with invented figures. Each
 * panel is now covered by a capture of the actual product, the same technique
 * the hero uses: the market picker for choosing a position, the deposit ticket,
 * and the withdraw ticket. The captures are composed at the panel's own 3:2, so
 * nothing is cropped away. */
[data-framer-name^="step-"] > [data-framer-name$="visual"] {
  position: relative !important;
}

[data-framer-name="Mint product visual"]::after,
[data-framer-name="Rebalance product visual"]::after,
[data-framer-name="Redeem product visual"]::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  background: #05070b center / cover no-repeat;
}

[data-framer-name="Mint product visual"]::after {
  background-image: url('/assets/images/ocelot-step-pick.png?v=1');
}

[data-framer-name="Rebalance product visual"]::after {
  background-image: url('/assets/images/ocelot-step-deposit.png?v=1');
}

[data-framer-name="Redeem product visual"]::after {
  background-image: url('/assets/images/ocelot-step-redeem.png?v=1');
}

/* -------------------------------------------------- Helvetica Neue remap */

/* The export self-hosts Inter, Inter Display and Geist for its sans text. The
 * owner wants Helvetica Neue. These faces sit later in the cascade than the
 * export's own, so on machines that ship Helvetica Neue (all of Apple's) the
 * local face wins; anywhere else the declaration fails quietly and the
 * export's own font loads as before. Mono stays mono.
 */
@font-face { font-family: "Inter"; font-weight: 100 500; src: local("Helvetica Neue"); }
@font-face { font-family: "Inter"; font-weight: 501 900; src: local("Helvetica Neue Bold"), local("HelveticaNeue-Bold"); }
@font-face { font-family: "Inter Display"; font-weight: 100 500; src: local("Helvetica Neue"); }
@font-face { font-family: "Inter Display"; font-weight: 501 900; src: local("Helvetica Neue Bold"), local("HelveticaNeue-Bold"); }
@font-face { font-family: "Geist"; font-weight: 100 500; src: local("Helvetica Neue"); }
@font-face { font-family: "Geist"; font-weight: 501 900; src: local("Helvetica Neue Bold"), local("HelveticaNeue-Bold"); }

/* ------------------------------------------------------------- site footer */

/* The designed footer (Figma 130:285). The export's own footer was a pair of
 * link columns with a 0x0 logo slot, so the page ended without the brand ever
 * appearing. Solid surfaces, brand blue on the one action, logotype at full
 * width over the legal row. */
.ocelot-footer {
  background: #05070b;
  border-top: 1px solid rgba(255, 255, 255, .07);
}

.ocelot-footer-inner {
  display: flex;
  flex-direction: column;
  gap: 64px;
  width: min(calc(100% - 48px), 1180px);
  margin: 0 auto;
  padding: 104px 0 44px;
}

.ocelot-footer-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 72px;
}

.ocelot-footer-mission h2 {
  margin: 0;
  color: #f2f4f8;
  font: 600 52px/1.04 "Helvetica Neue", Helvetica, "Inter", Arial, sans-serif;
  letter-spacing: -.022em;
}

.ocelot-footer-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 30px;
  padding: 14px 22px;
  border-radius: 7px;
  background: #5b7fff;
  color: #fff;
  font: 600 14px/1 "Helvetica Neue", Helvetica, "Inter", Arial, sans-serif;
  text-decoration: none;
  transition: background .18s ease;
}

.ocelot-footer-cta:hover { background: #3d63ff; }
.ocelot-footer-cta i { font-style: normal; }

.ocelot-footer-cols {
  display: flex;
  gap: 76px;
  padding-top: 8px;
}

.ocelot-footer-col {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.ocelot-footer-col > span {
  color: #6b7589;
  font: 500 10px/1 "Helvetica Neue", Helvetica, "Inter", Arial, sans-serif;
  letter-spacing: .14em;
}

.ocelot-footer-col a {
  color: #b7c0d1;
  font: 500 14px/1 "Helvetica Neue", Helvetica, "Inter", Arial, sans-serif;
  text-decoration: none;
  transition: color .18s ease;
}

.ocelot-footer-col a:hover { color: #fff; }

.ocelot-footer-chips { display: flex; gap: 10px; }

.ocelot-footer-chips a {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 8px;
  background: #0d121b;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .11);
  color: #d7deea;
  transition: color .18s ease, box-shadow .18s ease;
}

.ocelot-footer-chips a:hover { color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .26); }
.ocelot-footer-chips svg { width: 16px; height: 16px; display: block; }

/* The brand band: the logotype is the closing statement, so it runs the full
 * width of the container rather than sitting at navigation scale. */
.ocelot-footer-brand svg { display: block; width: 100%; height: auto; }

.ocelot-footer-legal {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-top: 26px;
  border-top: 1px solid rgba(255, 255, 255, .07);
  color: #6b7589;
  font: 400 12px/1.5 "Helvetica Neue", Helvetica, "Inter", Arial, sans-serif;
}

@media (max-width: 809.98px) {
  .ocelot-footer-inner { width: calc(100% - 28px); gap: 44px; padding: 64px 0 32px; }
  .ocelot-footer-top { flex-direction: column; gap: 44px; }
  .ocelot-footer-mission h2 { font-size: 34px; }
  .ocelot-footer-cols { gap: 40px; flex-wrap: wrap; }
  .ocelot-footer-legal { flex-direction: column; align-items: flex-start; gap: 10px; }
}

/* ------------------------------------------- closer spacing + access button */

/* The closing section carried 64px above its content and nothing below, so the
 * call to action sat flush against the footer's top rule. Balanced padding
 * gives the closer the same air on both sides. */
[data-framer-name="Final CTA"] {
  padding-top: 104px !important;
  padding-bottom: 104px !important;
}

@media (max-width: 809.98px) {
  [data-framer-name="Final CTA"] { padding-top: 64px !important; padding-bottom: 64px !important; }
}

/* ------------------------------------------------------- footer atmosphere */

/* The page opens on the hero's drifting blue light and used to close on a flat
 * black slab. The footer now carries the same treatment at lower intensity:
 * the same two light sources, the same slow drift, the same band sweep, so the
 * bottom of the page reads as the other end of the hero rather than a
 * different surface. The logotype sits above it. */
.ocelot-footer {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.ocelot-footer::before,
.ocelot-footer::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

/* Brighter than the first pass. At .30/.16 the close of the page read as shy
   next to the hero it was meant to echo (owner's word), so the light sources
   come up by roughly half and the band sweep becomes visible rather than
   subliminal. Still below the hero's intensity: the page should end on a glow,
   not restart. */
.ocelot-footer::before {
  inset: -40% -12% -60%;
  background:
    radial-gradient(44% 66% at 14% 78%, rgba(72, 110, 255, .5) 0%, rgba(38, 72, 196, .2) 40%, transparent 70%),
    radial-gradient(36% 56% at 88% 70%, rgba(45, 102, 246, .28) 0%, transparent 66%),
    radial-gradient(46% 40% at 52% 96%, rgba(139, 166, 255, .16) 0%, transparent 62%);
  filter: blur(28px) saturate(1.16);
  animation: ocelot-footer-flow 21s ease-in-out infinite alternate;
}

.ocelot-footer::after {
  inset: -20% -34%;
  opacity: .26;
  background: repeating-linear-gradient(
    92deg,
    rgba(135, 164, 255, 0) 0 12%,
    rgba(135, 164, 255, .13) 18%,
    rgba(61, 105, 236, .04) 26%,
    rgba(8, 27, 75, 0) 38%
  );
  filter: blur(18px);
  animation: ocelot-footer-bands 17s linear infinite alternate;
}

.ocelot-footer-inner {
  position: relative;
  z-index: 1;
}

@keyframes ocelot-footer-flow {
  0% { transform: translate3d(-3%, 2%, 0) scale(1.04); }
  100% { transform: translate3d(4%, -3%, 0) scale(1.1); }
}

@keyframes ocelot-footer-bands {
  from { transform: translate3d(-8%, 0, 0) skewX(-7deg); }
  to { transform: translate3d(8%, 0, 0) skewX(-7deg); }
}

@media (prefers-reduced-motion: reduce) {
  .ocelot-footer::before,
  .ocelot-footer::after { animation: none; }
}

.ocelot-compare {
  width: min(calc(100% - 48px), 1180px);
  margin: 0 auto;
  padding: 96px 0 0;
}

.ocelot-venue {
  width: min(calc(100% - 48px), 1180px);
  margin: 0 auto;
  padding: 64px 0 0;
}

/* ---------------------------------------------------------------------------
   Leveraged tokens versus perps, and the venue credit.
   One scenario, no controls: the gap is the message.
   --------------------------------------------------------------------------- */
.ocelot-compare-head { max-width: 680px; }

.ocelot-compare-head > span {
  display: block;
  color: #6b7589;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .14em;
}

.ocelot-compare-head h2 {
  margin: 14px 0 0;
  color: #f2f4f8;
  font-size: clamp(27px, 3.2vw, 40px);
  font-weight: 500;
  letter-spacing: -.025em;
  line-height: 1.08;
}

.ocelot-compare-head p {
  margin: 12px 0 0;
  color: #9aa5b8;
  font-size: 15px;
  line-height: 1.55;
}

.ocelot-compare-figure { margin: 34px 0 0; }

.ocelot-compare-figure svg {
  display: block;
  width: 100%;
  height: 300px;
  overflow: visible;
}

.ocelot-cmp-base {
  stroke: rgba(255, 255, 255, .13);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.ocelot-cmp-area { fill: url(#ocelot-cmp-fill); stroke: none; }

.ocelot-cmp-line {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.ocelot-cmp-line.is-spot { stroke: #5b6474; stroke-width: 1.5; }
.ocelot-cmp-line.is-perp { stroke: #9aa5b8; stroke-width: 1.5; stroke-dasharray: 5 6; }
.ocelot-cmp-line.is-token { stroke: #5b7fff; stroke-width: 2.6; }

.ocelot-compare-keys {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 34px;
  margin: 22px 0 0;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, .11);
}

.ocelot-compare-keys span {
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  color: #9aa5b8;
  font-size: 13.5px;
}

.ocelot-compare-keys i {
  align-self: center;
  width: 16px;
  height: 0;
  border-top: 2px solid currentColor;
  flex: none;
}

.ocelot-compare-keys .is-spot { color: #5b6474; }
.ocelot-compare-keys .is-perp { color: #9aa5b8; }
.ocelot-compare-keys .is-perp i { border-top-style: dashed; }
.ocelot-compare-keys .is-token { color: #5b7fff; }

.ocelot-compare-keys b {
  color: #f2f4f8;
  font-size: 21px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
}

.ocelot-compare-keys .is-token b { color: #5b7fff; }

.ocelot-compare-legal {
  margin: 20px 0 0;
  max-width: 900px;
  color: #6b7589;
  font-size: 12px;
  line-height: 1.6;
}

.ocelot-venue-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  border-top: 1px solid rgba(255, 255, 255, .11);
  padding-top: 32px;
}

.ocelot-venue-inner h2 {
  margin: 0;
  color: #f2f4f8;
  font-size: 21px;
  font-weight: 500;
  letter-spacing: -.015em;
}

.ocelot-venue-mark {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 13px;
  color: #f2f4f8;
  text-decoration: none;
  opacity: .92;
  transition: opacity .18s ease;
}

.ocelot-venue-mark:hover { opacity: 1; }
.ocelot-venue-mark svg { width: 25px; height: auto; flex: none; }

.ocelot-venue-mark span {
  font-size: 19px;
  font-weight: 500;
  letter-spacing: .13em;
}

@media (max-width: 760px) {
  .ocelot-compare-figure svg { height: 220px; }
  .ocelot-compare-keys { gap: 10px 22px; }
  .ocelot-compare-keys b { font-size: 18px; }
  .ocelot-venue-inner { flex-direction: column; align-items: flex-start; gap: 20px; }
}

/* Kicker carries the brand, so the section reads as ours at a glance. */
.ocelot-compare-head > span { color: #5b7fff; }

.ocelot-compare-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 24px 0 0;
}

.ocelot-compare-tabs button {
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 999px;
  background: transparent;
  color: #9aa5b8;
  cursor: pointer;
  font-family: inherit;
  font-size: 13px;
  padding: 7px 15px;
  transition: color .18s ease, border-color .18s ease;
}

.ocelot-compare-tabs button:hover { color: #f2f4f8; border-color: rgba(255, 255, 255, .3); }
.ocelot-compare-tabs button.is-active { border-color: #5b7fff; color: #f2f4f8; }

.ocelot-compare-axis {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-top: 10px;
  color: #6b7589;
  font-size: 11.5px;
  letter-spacing: .01em;
}


/* Phoenix keeps its own mark shape but takes our ink, so the row stays a
   two-colour surface rather than introducing a third brand palette. */
.ocelot-venue-mark { color: #f2f4f8; }
.ocelot-venue-mark svg { color: #f2f4f8; }

/* The exported docs cards shipped three different kicker colours. One accent. */
#ecosystem [data-framer-component-type="RichTextContainer"] p > span[style*="rgb(255"],
#ecosystem span[style*="rgb(245, 158"],
#ecosystem span[style*="rgb(251, 146"] { color: #5b7fff !important; }

/* ----------------------------------------------------------- rebalancing */

/* No fill. This carried #05060a against a page that is black, which read as
   an unexplained change of surface for a section that is not a different kind
   of thing from its neighbours. A hairline is enough to separate it. */
.ocelot-reb {
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
}

.ocelot-reb-inner { width: min(calc(100% - 48px), 1180px); margin: 0 auto; padding: 96px 0; }

.ocelot-reb-kicker {
  display: block;
  margin-bottom: 18px;
  color: #5b7fff;
  font: 500 12px/1 "Helvetica Neue", Helvetica, "Inter", Arial, sans-serif;
  letter-spacing: .08em;
}

.ocelot-reb h2 {
  margin: 0 0 20px;
  max-width: 800px;
  color: #f2f4f8;
  font: 500 clamp(28px, 4vw, 44px)/1.08 "Helvetica Neue", Helvetica, "Inter", Arial, sans-serif;
  letter-spacing: -.03em;
}

.ocelot-reb-lede, .ocelot-reb-note {
  max-width: 760px;
  color: #9aa5b8;
  font: 400 15.5px/1.65 "Helvetica Neue", Helvetica, "Inter", Arial, sans-serif;
  letter-spacing: -.01em;
}

.ocelot-reb-lede { margin: 0 0 40px; }
.ocelot-reb-note { margin: 22px 0 0; }

.ocelot-reb-chart { position: relative; }
.ocelot-reb-chart { padding-right: 54px; }
.ocelot-reb-chart svg { display: block; width: 100%; height: 300px; overflow: visible; }

/* The axis is three labels, not a grid: the shape is the point, the exact
   value at any day is not. */
/* Each label sits at its own value rather than being spaced evenly down the
   column. Even spacing only tells the truth when the range is symmetric, which
   forced a 2.0 to 4.0 scale and left the top third of the chart empty. */
.ocelot-reb-axis { position: absolute; inset: 0 auto 0 100%; width: 54px; }

.ocelot-reb-axis b {
  position: absolute;
  left: 14px;
  transform: translateY(-50%);
  color: #6b7589;
  font: 400 11px/1 ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
}

.ocelot-reb-axis b[data-target="true"] { color: #9aa5b8; }

.reb-band { fill: rgba(91, 127, 255, .09); }
.reb-target { stroke: rgba(139, 166, 255, .45); stroke-width: 1; stroke-dasharray: 3 4; }
.reb-drift { fill: none; stroke: #6b7589; stroke-width: 1.6; vector-effect: non-scaling-stroke; }
.reb-held { fill: none; stroke: #5b7fff; stroke-width: 2; vector-effect: non-scaling-stroke; }
.reb-mark { fill: #5b7fff; }

.ocelot-reb-keys {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  margin-top: 26px;
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, .08);
}

.reb-key {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #9aa5b8;
  font: 400 13px/1 "Helvetica Neue", Helvetica, "Inter", Arial, sans-serif;
}

.reb-key::before { content: ""; width: 14px; height: 2px; border-radius: 2px; }
.reb-key-drift::before { background: #6b7589; }
.reb-key-held::before { background: #5b7fff; }
.reb-key-band::before { height: 10px; background: rgba(91, 127, 255, .22); }
.reb-key-count { color: #f2f4f8; }
.reb-key-count::before { display: none; }

@media (max-width: 809.98px) {
  .ocelot-reb-inner { padding: 64px 0; }
  .ocelot-reb-chart { padding-right: 0; }
  .ocelot-reb-chart svg { height: 220px; }
  .ocelot-reb-axis { display: none; }
}

/* ---------------------------------------------------------- benefit cards */

/* Each card opens on a dithered banner with one white icon on it. The texture
   is generated blue-on-black grain, the brand's own material; the icon is
   inline SVG rather than part of the image, so it stays crisp and never comes
   out of a model with a bent stroke. Six different textures, so the row does
   not repeat. */
.ocelot-benefit {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(20, 26, 40, .5) 0%, rgba(8, 11, 18, .5) 100%);
  transition: box-shadow .22s ease, transform .22s ease;
  /* The export sets a 48px gap and centres the column, which left a band of
     dead space between the banner and the copy on every card. The banner
     carries its own spacing underneath, so the gap goes and the content sits
     at the top. */
  gap: 0 !important;
  justify-content: flex-start !important;
  min-height: 0 !important;
}

.ocelot-benefit:hover { box-shadow: 0 18px 44px rgba(0, 0, 0, .45); transform: translateY(-2px); }

/* The export gives the slot a 24px icon box inside the card's padding, so the
   negative margins pull the banner back out to the card's own edges. */
.ocelot-benefit-art {
  display: block !important;
  /* The card is a flex column, so an auto-width block shrinks to its content
     and the banner collapsed to 2px. It has to stretch explicitly. */
  align-self: stretch !important;
  flex: 0 0 auto !important;
  width: auto !important;
  height: auto !important;
  min-height: 0 !important;
  margin: -20px -20px 20px !important;
  padding: 0 !important;
}

.ocelot-bcard {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  aspect-ratio: 34 / 13;
  overflow: hidden;
  background: #050607;
  border-bottom: 1px solid rgba(139, 166, 255, .16);
}

.ocelot-bcard img {
  position: absolute !important;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  opacity: .92;
}

/* Centred on the part of every texture that was generated dark on purpose. */
.ocelot-bcard > svg {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  width: 30px !important;
  height: 30px !important;
  transform: translate(-50%, -50%);
  color: #fff !important;
  stroke: #fff !important;
  fill: none !important;
  filter: drop-shadow(0 1px 6px rgba(0, 0, 0, .7));
}

@media (max-width: 809.98px) {
  .ocelot-benefit-art { margin: -20px -20px 18px !important; }
  .ocelot-bcard > svg { width: 26px !important; height: 26px !important; }
}

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

/* ---------------------------------------------------------- hero in motion */

/* Sits above the static capture (its ::after is z-index 4) and shows the same
   frame as its poster until playback starts, so a slow connection sees the
   still it always saw. object-position matches the capture's crop. */
.ocelot-hero-motion {
  position: absolute;
  inset: 0;
  z-index: 5;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  pointer-events: none;
}

@media (max-width: 809.98px), (prefers-reduced-motion: reduce) {
  .ocelot-hero-motion { display: none; }
}

/* ------------------------------------------------------------ risk, early */

/* The liquidation answer, out of the FAQ and into the page. Same surface
   language as the rest of the landing: black ground, hairline top rule, the
   bracketed kicker the other sections use. */
/* No fill and no rule. This carried #05060a against a black page, which read
   as a change of surface for a section that is not a different kind of thing
   from its neighbours. Spacing separates it. */
.ocelot-risk { position: relative; }

.ocelot-risk-inner {
  width: min(calc(100% - 48px), 1180px);
  margin: 0 auto;
  padding: 96px 0;
}

.ocelot-risk-kicker {
  margin: 0 0 18px;
  color: #5b7fff;
  font: 500 12px/1 "Helvetica Neue", Helvetica, "Inter", Arial, sans-serif;
  letter-spacing: .08em;
}

.ocelot-risk h2 {
  margin: 0 0 28px;
  max-width: 760px;
  color: #f2f4f8;
  font: 500 clamp(28px, 4vw, 44px)/1.08 "Helvetica Neue", Helvetica, "Inter", Arial, sans-serif;
  letter-spacing: -.03em;
}

.ocelot-risk-lede {
  margin: 0 0 40px;
  max-width: 620px;
  color: #aab4c6;
  font: 400 16px/1.6 "Helvetica Neue", Helvetica, "Inter", Arial, sans-serif;
  letter-spacing: -.015em;
}

/* Two labelled halves rather than two loose paragraphs. The section makes one
   trade explicit, so the reader should be able to see both sides of it at a
   glance instead of inferring which paragraph is the good news. */
.ocelot-risk-cols {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  max-width: 1020px;
  border-top: 1px solid rgba(255, 255, 255, .1);
}

.ocelot-risk-col { padding: 26px 34px 4px 0; }
.ocelot-risk-col + .ocelot-risk-col { padding-left: 34px; border-left: 1px solid rgba(255, 255, 255, .1); }

.ocelot-risk-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
  font: 600 10px/1 "Helvetica Neue", Helvetica, "Inter", Arial, sans-serif;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.ocelot-risk-label::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 2px;
}

[data-tone="gone"] .ocelot-risk-label { color: #5fd39b; }
[data-tone="gone"] .ocelot-risk-label::before { background: #2eb872; }
[data-tone="stays"] .ocelot-risk-label { color: #f5a524; }
[data-tone="stays"] .ocelot-risk-label::before { background: #f5a524; }
[data-tone="floor"] .ocelot-risk-label { color: #9aa5b8; }
[data-tone="floor"] .ocelot-risk-label::before { background: #6b7589; }

.ocelot-risk-cols p {
  margin: 0;
  color: #9aa5b8;
  font: 400 15.5px/1.65 "Helvetica Neue", Helvetica, "Inter", Arial, sans-serif;
  letter-spacing: -.01em;
}

@media (max-width: 809.98px) {
  .ocelot-risk-inner { padding: 64px 0; }
  .ocelot-risk-cols { grid-template-columns: minmax(0, 1fr); }
  .ocelot-risk-col { padding: 22px 0 4px; }
  .ocelot-risk-col + .ocelot-risk-col { padding-left: 0; border-left: 0; border-top: 1px solid rgba(255, 255, 255, .1); }
}

/* ------------------------------------------------- feature card captures */

/* The captures sit in a 333x222 slot and each one is composed with the product
   panel small inside a wide dark field, so the interface — the only reason the
   image is there — read as a thumbnail of a thumbnail.
 *
 * The slot grows a little and the image is scaled up inside it, which enlarges
 * the panel about 45% without new assets. The card's own height is fixed by the
 * export, so the slot cannot grow much further: at 300px the body copy under it
 * clipped. 250 plus the zoom is what fits.
 *
 * `cover`, not `contain`: contain fits the whole 3:2 frame into the slot, which
 * made the panel smaller than it started. That was the first attempt here. */
[data-framer-name="shot"] {
  height: 250px !important;
  min-height: 250px !important;
  border-radius: 12px;
  background: #080c13;
  overflow: hidden !important;
}

/* No zoom any more. The captures were product panels floating on a wide black
   field, so the cards read as mostly empty and a transform was papering over
   it. Each one is auto-cropped to its panel and recomposed on the brand's
   dither at this slot's exact ratio, so `cover` neither crops nor scales. */
[data-framer-name="shot"] img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
}

@media (max-width: 809.98px) {
  [data-framer-name="shot"] { height: 230px !important; min-height: 230px !important; }
  [data-framer-name="shot"] img { transform: scale(1.3); }
}