/* The landing below the hero (storyboard picks, 3 Nov 2026). Rendered by the
 * server from ocelot-landing.js after Framer's #main; the export's own
 * sections after the hero are hidden here, in the head, so the first paint
 * never shows them. Every section sits on ink (owner, 3 Nov 2026: no white
 * parts); one hairline separates two sections. Solid surfaces only: alpha is
 * used for nothing a surface depends on. */

@font-face { font-family: "DM Mono"; font-weight: 400; font-display: swap; src: url("/assets/fonts/dm-mono-400.woff2") format("woff2"); }
@font-face { font-family: "DM Mono"; font-weight: 500; font-display: swap; src: url("/assets/fonts/dm-mono-500.woff2") format("woff2"); }

/* ------------------------------------------------ the export's old sections */

#hero ~ section,
[data-framer-name="Final CTA"],
footer[data-framer-name="Desktop"],
footer[data-framer-name="Tablet"],
footer[data-framer-name="Mobile"] { display: none !important; }

/* --------------------------------------------------------------- tokens */

.ol-root {
  --ground: #05070b; /* the hero's and the footer's ink, so no section edge shows */
  --card: #111318;
  --card-2: #161922;
  --line: #1f232d;
  --line-2: #2a2f3b;
  --ink: #f2f4f8;
  --muted: #9aa5b8;
  --dim: #808a9e; /* 4.7:1 or better on every surface here, ink to card-2 (was #6b7589, 3.8:1 on cards) */
  --brand: #5b7fff;
  --brand-hover: #3d63ff;
  --brand-deep: #194fd7;
  --up: #2eb872;
  --down: #e5484d;
  --sans: "Helvetica Neue", Helvetica, "Inter", Arial, sans-serif;
  --mono: "DM Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --wrap: 1080px;
  position: relative;
  z-index: 1;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.ol-root *, .ol-root *::before, .ol-root *::after { box-sizing: border-box; }
.ol-root :where(h2, h3, p, ul, ol, li, dl, dt, dd, figure, figcaption) { margin: 0; padding: 0; }
.ol-root :where(ul, ol) { list-style: none; }
.ol-root a { color: inherit; text-decoration: none; }
.ol-root img { display: block; max-width: none; }

.ol-wrap { width: min(calc(100% - 48px), var(--wrap)); margin: 0 auto; }
.ol-sec { position: relative; padding: 112px 0; scroll-margin-top: 72px; }
.ol-dark { background: var(--ground); color: var(--ink); }
/* Two sections in a row share one hairline instead of a second gap. */
.ol-dark + .ol-dark { border-top: 1px solid var(--line); }
.ol-center { text-align: center; }
.ol-visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.ol-root h2 { font: 500 52px/1.05 var(--sans); letter-spacing: -.028em; text-wrap: balance; }
.ol-root h2.ol-h2-md { font-size: 42px; letter-spacing: -.024em; }
.ol-root h3 { font: 500 21px/1.25 var(--sans); letter-spacing: -.012em; }
.ol-lede { max-width: 580px; margin-top: 18px !important; color: var(--muted); font: 400 18px/1.5 var(--sans); text-wrap: pretty; }
.ol-center .ol-lede { margin-left: auto; margin-right: auto; }
.ol-foot { color: var(--dim); font: 400 13px/1.55 var(--sans); text-wrap: pretty; }
.ol-num { font-family: var(--mono); font-weight: 500; font-variant-numeric: tabular-nums; }
.ol-root .up { color: var(--up); }
.ol-root .down { color: var(--down); }
.ol-coin { border-radius: 50%; }

/* Every Start trading button is the nav's button (owner, 2 Nov 2026). Hover
   answers with colour and a solid 4px halo, a press with a 2% dip; nothing
   moves on its own. */
.ol-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 38px; padding: 0 16px;
  border: 1px solid var(--brand); border-radius: 7px; background: var(--brand);
  color: #fff !important; font: 500 13px/1 var(--sans);
  box-shadow: 0 0 0 0 #18224a;
  transition: background .2s ease, border-color .2s ease, box-shadow .24s cubic-bezier(.33, 1, .68, 1), transform .12s ease-out;
}
.ol-btn:hover { background: var(--brand-hover); border-color: var(--brand-hover); box-shadow: 0 0 0 4px #18224a; }
.ol-btn:active { transform: scale(.98); }
.ol-btn i { font-style: normal; }
.ol-btn-ghost { background: var(--card); border-color: var(--line-2); color: var(--ink) !important; box-shadow: 0 0 0 0 var(--card); }
.ol-btn-ghost:hover { background: var(--card-2); border-color: #3a4150; box-shadow: 0 0 0 4px #10131a; }
.ol-root a:focus-visible, .ol-root button:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 7px; }

.ol-pill {
  display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 12px; white-space: nowrap;
  border: 1px solid var(--line-2); border-radius: 999px; background: var(--card);
  color: var(--ink); font: 500 12px/1 var(--sans);
  transition: border-color .18s ease;
}
.ol-pill:hover { border-color: #4a5266; }
.ol-pill i { font-style: normal; color: var(--dim); }

.ol-scenario {
  display: inline-flex; align-items: center; flex: none; height: 22px; padding: 0 8px;
  border: 1px solid #3d3815; border-radius: 6px; background: #1b1a10;
  color: #e9d77a; font: 500 10.5px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase;
}
.ol-note { display: flex; gap: 12px; align-items: flex-start; margin-top: 16px; }
.ol-card { background: var(--card); border: 1px solid var(--line); border-radius: 16px; }

/* Entrances. The script marks a block is-pending only while it is still
   below the fold, then swaps it to is-on when it scrolls in, and clears both
   once it has landed. Without script, or with reduced motion, neither class
   is ever set and every rule below is inert: the page is the static markup.
   Only transform and opacity move.

   Timing, by job (the house motion rules, 30 Oct 2026):
   - text rises 14px: opacity is done in 360ms so it reads early, position
     settles over 560ms on power3-out (cubic-bezier(.33, 1, .68, 1)), no
     long expo tail;
   - reading order, 80ms apart (--i): heading, its line, then the content;
   - lines draw over 900ms on an ease-in-out, since they travel. */
.ol-root [data-reveal] { --d: calc(var(--i, 0) * 80ms); }
.ol-js .is-pending [data-reveal] { opacity: 0; transform: translate3d(0, 14px, 0); }
.ol-js .is-on [data-reveal] {
  transition: opacity .36s cubic-bezier(.33, 1, .68, 1) var(--d), transform .56s cubic-bezier(.33, 1, .68, 1) var(--d);
}

/* Lines draw left to right: the window slides right while its content slides
   left by the same amount, so the lines hold still and only the edge travels. */
.ol-draw { overflow: hidden; pointer-events: none; }
.ol-draw-in { position: absolute; inset: 0; }
.ol-js .is-pending .ol-draw { transform: translate3d(-100%, 0, 0); }
.ol-js .is-pending .ol-draw-in { transform: translate3d(100%, 0, 0); }
.ol-js .is-on .ol-draw, .ol-js .is-on .ol-draw-in { transition: transform .9s cubic-bezier(.45, .05, .25, 1) calc(var(--d, 0ms) + 220ms); }

@media (prefers-reduced-motion: reduce) {
  .ol-js .is-pending [data-reveal], .ol-js .is-pending .ol-draw, .ol-js .is-pending .ol-draw-in { opacity: 1; transform: none; }
}

/* Live pulse: a changed character rolls in its own column. The column's
   width and baseline are the new character's (.ol-rc-n, kept for screen
   readers but painted transparent); the old and new copies roll over it,
   clipped to the line, and the tinted copy fades back to the figure's colour. */
.ol-rc { position: relative; display: inline-block; clip-path: inset(0 -.12em); }
/* A whole figure changing length is clipped top and bottom only, so the wider of the two never loses a character. */
.ol-rc.is-whole { clip-path: inset(0 -20em); }
.ol-rc-n, .ol-rc-n * { color: transparent !important; }
.ol-rc-a, .ol-rc-b { position: absolute; top: 0; left: 0; white-space: nowrap; will-change: transform; }
.ol-rc-t { position: absolute; top: 0; left: 0; white-space: nowrap; }
.ol-root .ol-rc-t.up, .ol-root .ol-rc-t.up * { color: var(--up); }
.ol-root .ol-rc-t.down, .ol-root .ol-rc-t.down * { color: var(--down); }

/* A market row washes once when its price changes: a solid plate, the card
   mixed 10% toward green or red, faded in and out behind the row. */
.ol-wash { position: absolute; z-index: -1; inset: 5px -12px; border-radius: 12px; background: #142321; opacity: 0; pointer-events: none; }
.ol-wash.is-down { background: #26181d; }
.ol-root .ol-shelf-row > .ol-wash { transform: none; }

/* -------------------------------------------------------------- markets */

.ol-markets .ol-head { max-width: 760px; margin: 0 auto 52px; }
.ol-shelf { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; text-align: left; }
.ol-shelf-col { padding: 26px 24px 8px; border: 1px solid var(--line); border-radius: 18px; background: var(--card); }
.ol-shelf-top { padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.ol-shelf-top h3 { font-size: 22px; }
.ol-shelf-top p { margin-top: 5px; color: var(--dim); font: 400 13.5px/1.4 var(--sans); }
.ol-shelf-row { position: relative; isolation: isolate; display: grid; grid-template-columns: 76px minmax(0, 1fr) auto 14px; align-items: center; gap: 10px; padding: 15px 0; border-bottom: 1px solid var(--line); }
.ol-shelf-row:last-child { border-bottom: 0; }
.ol-pair { position: relative; z-index: 2; display: block; width: 76px; height: 44px; }
.ol-pair a { position: absolute; top: 0; left: 0; border-radius: 50%; transition: transform .24s cubic-bezier(.33, 1, .68, 1); }
.ol-pair a + a { left: 30px; }
.ol-pair a + a img { box-shadow: 0 0 0 3px var(--card); transition: box-shadow .2s ease-out; }
.ol-shelf-name { min-width: 0; }
/* The market's name is the row's link; its ::after covers the whole row (the
   hover plate's box), so a click anywhere on the row opens the market. The
   name is never transformed: a transform would shrink that box to the name. */
.ol-root .ol-shelf-link { display: block; font: 500 16px/1.2 var(--sans); transition: color .18s ease; }
.ol-shelf-link::after { content: ""; position: absolute; z-index: 1; inset: 5px -12px; border-radius: 12px; }
.ol-root .ol-shelf-link:focus-visible { outline: 0; }
.ol-shelf-link:focus-visible::after { outline: 2px solid var(--brand); outline-offset: 0; }
.ol-shelf-sub { display: grid; margin-top: 3px; color: var(--dim); font: 500 11.5px/1.4 var(--mono); white-space: nowrap; }
.ol-shelf-sub > span { grid-area: 1 / 1; transition: opacity .18s ease-out, transform .24s cubic-bezier(.33, 1, .68, 1); }
.ol-sub-plain { font: 400 12.5px/1.3 var(--sans); align-self: center; }
.ol-sub-codes { opacity: 0; transform: translate3d(0, 4px, 0); }
.ol-sub-codes a { position: relative; z-index: 2; transition: color .18s ease; }
.ol-sub-codes a:hover { color: var(--ink); }
.ol-shelf-price { color: var(--muted); font-size: 14px; text-align: right; white-space: nowrap; }
.ol-shelf-go { display: grid; place-items: center; color: var(--dim); opacity: 0; transform: translate3d(-4px, 0, 0); transition: opacity .18s ease-out, transform .24s cubic-bezier(.33, 1, .68, 1), color .18s ease; }
.ol-shelf-go svg { display: block; }
.ol-cta-row { margin-top: 40px; }

/* A row answers the pointer: a solid plate fades in behind it, the name
   brightens, an arrow slides in, the short coin fans out 4px and the plain
   words give way to the two codes. Keyboard focus inside the row does the same. */
.ol-shelf-row::before {
  content: ""; position: absolute; z-index: -1; inset: 5px -12px; border-radius: 12px; background: var(--card-2);
  opacity: 0; transform: scale(.98); transition: opacity .2s ease-out, transform .28s cubic-bezier(.33, 1, .68, 1);
}
.ol-shelf-row:focus-within::before { opacity: 1; transform: none; }
.ol-shelf-row:focus-within .ol-pair a + a img { box-shadow: 0 0 0 3px var(--card-2); }
.ol-shelf-row:focus-within .ol-sub-plain { opacity: 0; transform: translate3d(0, -4px, 0); }
.ol-shelf-row:focus-within .ol-sub-codes { opacity: 1; transform: none; }
.ol-shelf-row:focus-within .ol-shelf-go { opacity: 1; transform: none; color: var(--brand); }
@media (hover: hover) {
  .ol-shelf-row:hover::before { opacity: 1; transform: none; }
  .ol-shelf-row:hover .ol-pair a + a img { box-shadow: 0 0 0 3px var(--card-2); }
  .ol-shelf-row:hover .ol-shelf-link { color: #fff; }
  .ol-shelf-row:hover .ol-shelf-go { opacity: 1; transform: none; color: var(--brand); }
  .ol-shelf-row:hover .ol-pair a + a { transform: translate3d(4px, 0, 0); }
  .ol-shelf-row:hover .ol-sub-plain { opacity: 0; transform: translate3d(0, -4px, 0); }
  .ol-shelf-row:hover .ol-sub-codes { opacity: 1; transform: none; }
  .ol-pair a:hover { transform: translate3d(0, -2px, 0); z-index: 1; }
  .ol-shelf-row:hover .ol-pair a + a:hover { transform: translate3d(4px, -2px, 0); }
}
/* No hover on touch: the codes, which are the links, show from the start. */
@media (hover: none) {
  .ol-sub-plain { visibility: hidden; }
  .ol-sub-codes { opacity: 1; transform: none; }
  .ol-shelf-go { opacity: 1; transform: none; }
}

/* The three columns rise in turn; in each, the coins settle row by row, the
   short coin a beat after the long one, fanning out from beside it. */
.ol-shelf-col { --cd: calc(var(--c, 0) * 90ms); }
.ol-shelf-row { --rd: calc(var(--c, 0) * 90ms + var(--r, 0) * 70ms + 180ms); }
.ol-js .ol-shelf-col.is-pending { opacity: 0; transform: translate3d(0, 16px, 0); }
.ol-js .ol-shelf-col.is-on { transition: opacity .36s cubic-bezier(.33, 1, .68, 1) var(--cd), transform .6s cubic-bezier(.33, 1, .68, 1) var(--cd); }
.ol-js .is-pending .ol-pair a { opacity: 0; transform: translate3d(0, 8px, 0); }
.ol-js .is-pending .ol-pair a + a { transform: translate3d(-12px, 8px, 0); }
.ol-js .is-on .ol-pair a { transition: opacity .3s ease-out var(--rd), transform .6s cubic-bezier(.33, 1, .68, 1) var(--rd); }
.ol-js .is-on .ol-pair a + a { transition-delay: calc(var(--rd) + 90ms); }

/* ------------------------------------------------------- inside a token */

.ol-inside .ol-head { max-width: 720px; margin: 0 auto; }
.ol-stage { position: relative; height: 580px; margin-top: 40px; }
.ol-core { position: absolute; left: 50%; top: 50%; width: 420px; height: 420px; margin: -210px 0 0 -210px; display: grid; place-items: center; }
.ol-ring { position: absolute; inset: 0; }
.ol-disc { position: absolute; inset: 60px; border-radius: 50%; border: 1px solid var(--line); background: #0f1116; }
.ol-core-coin { position: relative; z-index: 1; display: block; border-radius: 50%; transition: transform .3s ease; }
.ol-core-coin:hover { transform: scale(1.02); }
.ol-core-coin img { width: 200px; height: 200px; }
.ol-core-label { position: absolute; z-index: 1; bottom: 76px; color: var(--dim); font: 500 12px/1 var(--mono); letter-spacing: .08em; }

/* The ring is two half-rings, each turned into view behind its own half
   window: the right half sweeps 12 to 6 o'clock, then the left 6 to 12. The
   two curves meet at the same speed (end slope of the first = start slope of
   the second), so it reads as one stroke. At rest both are turned 180deg. */
.ol-arc { position: absolute; top: 0; width: 50%; height: 100%; overflow: hidden; }
.ol-arc.is-r { left: 50%; }
.ol-arc.is-l { left: 0; }
.ol-arc-rot { position: absolute; top: 0; width: 200%; height: 100%; transform: rotate(180deg); }
.ol-arc.is-r .ol-arc-rot { left: -100%; }
.ol-arc.is-l .ol-arc-rot { left: 0; }
.ol-arc-half { position: absolute; top: 0; width: 50%; height: 100%; overflow: hidden; }
.ol-arc.is-r .ol-arc-half { left: 0; }
.ol-arc.is-l .ol-arc-half { left: 50%; }
.ol-arc-line { position: absolute; top: 0; width: 200%; height: 100%; border: 1px dashed #333b4b; border-radius: 50%; }
.ol-arc.is-r .ol-arc-line { left: 0; }
.ol-arc.is-l .ol-arc-line { left: -100%; }

/* The hairlines from the ring to each figure. They grow out of the ring, in
   reading order, and the figure arrives as its line does. */
.ol-wires { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.ol-wire { stroke: #2c3341; stroke-width: 1; vector-effect: non-scaling-stroke; }
.ol-wire-dot { fill: var(--brand); }

.ol-root .ol-callout[data-reveal] { --d: calc(760ms + var(--k, 0) * 110ms); }
.ol-js .is-pending .ol-arc-rot { transform: rotate(0deg); }
.ol-js .is-on .ol-arc.is-r .ol-arc-rot { transition: transform .42s cubic-bezier(.5, 0, .9, .7); }
.ol-js .is-on .ol-arc.is-l .ol-arc-rot { transition: transform .42s cubic-bezier(.1, .3, .5, 1) .42s; }
.ol-js .is-pending .ol-disc { opacity: 0; transform: scale(.94); }
.ol-js .is-on .ol-disc { transition: opacity .5s ease-out .12s, transform .7s cubic-bezier(.33, 1, .68, 1) .12s; }
.ol-js .is-pending .ol-core-coin { opacity: 0; transform: scale(.92); }
.ol-js .is-on .ol-core-coin { transition: opacity .4s ease-out .24s, transform .7s cubic-bezier(.33, 1, .68, 1) .24s; }
.ol-js .is-pending .ol-core-label { opacity: 0; }
.ol-js .is-on .ol-core-label { transition: opacity .4s ease-out .6s; }
.ol-js .is-pending .ol-wire, .ol-js .is-pending .ol-wire-dot { opacity: 0; transform: scale(0); }
.ol-js .is-on .ol-wire-dot { transition: opacity .2s ease-out calc(620ms + var(--k) * 110ms), transform .3s cubic-bezier(.33, 1, .68, 1) calc(620ms + var(--k) * 110ms); }
.ol-js .is-on .ol-wire { transition: opacity .1s linear calc(660ms + var(--k) * 110ms), transform .4s cubic-bezier(.33, 1, .68, 1) calc(660ms + var(--k) * 110ms); }
.ol-js .is-pending .ol-callout.is-l { transform: translate3d(10px, 0, 0); }
.ol-js .is-pending .ol-callout.is-r { transform: translate3d(-10px, 0, 0); }

.ol-callout { position: absolute; width: 290px; display: flex; flex-direction: column; }
.ol-callout.is-l { left: 0; align-items: flex-end; text-align: right; }
.ol-callout.is-r { right: 0; align-items: flex-start; }
.ol-c1, .ol-c4 { top: 20px; }
.ol-c2, .ol-c5 { top: 220px; }
.ol-c3, .ol-c6 { top: 420px; }
.ol-callout-k { display: inline-flex; align-items: center; gap: 8px; color: var(--dim); font: 500 11px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.ol-callout.is-l .ol-callout-k { flex-direction: row-reverse; }
.ol-icon { width: 18px; height: 18px; color: var(--brand); flex: none; }
.ol-callout-v { margin: 10px 0 6px; font: 500 32px/1.1 var(--mono); letter-spacing: -.02em; }
.ol-callout-v .ol-num { font-size: inherit; }
.ol-callout-d { color: var(--muted); font: 400 15px/1.45 var(--sans); text-wrap: pretty; }
.ol-root .ol-check { margin-top: 6px; color: var(--dim); font: 500 12px/1.4 var(--sans); transition: color .18s ease; }
.ol-root .ol-check:hover { color: var(--ink); }
.ol-check i { font-style: normal; }
.ol-stage-foot { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--line); }
.ol-pills { display: flex; flex-wrap: wrap; gap: 8px; }

/* ----------------------------------------------------------------- risk */

.ol-risk .ol-head { max-width: 720px; margin: 0 auto 44px; }
.ol-risk-table { max-width: 860px; margin: 0 auto; overflow: hidden; border: 1px solid var(--line); border-radius: 18px; background: var(--card); }
.ol-risk-hd, .ol-risk-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: center; column-gap: 24px; }
.ol-risk-hd { padding: 17px 28px; border-bottom: 1px solid var(--line); color: var(--dim); font: 500 11px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.ol-risk-hd > span { display: flex; align-items: center; gap: 8px; }
.ol-risk-row { padding: 24px 28px; border-top: 1px solid var(--line); }
.ol-risk-row:nth-child(2) { border-top: 0; }
.ol-risk-move { color: var(--muted); }
.ol-risk-move, .ol-risk-row b { font: 500 28px/1 var(--mono); font-variant-numeric: tabular-nums; }
.ol-bar { display: block; width: 150px; max-width: 100%; height: 6px; margin-top: 12px; overflow: hidden; border-radius: 3px; background: var(--line-2); }
.ol-bar i { display: block; width: var(--w); height: 100%; border-radius: 3px; transform-origin: left center; }
/* Each bar grows from zero a beat after its row lands. */
.ol-root .ol-risk-row[data-reveal] { --d: calc(var(--i, 0) * 120ms); }
.ol-js .is-pending .ol-bar i { transform: scaleX(0); }
.ol-js .is-on .ol-bar i { transition: transform .9s cubic-bezier(.33, 1, .68, 1) calc(var(--d) + 240ms); }
.ol-risk .ol-note { max-width: 860px; margin: 16px auto 0; align-items: center; }

/* --------------------------------------------------------- transparency */

.ol-tr .ol-lede { margin-bottom: 8px !important; }
.ol-tr-big { margin: 28px 0 30px; color: var(--ink); font: 500 152px/.92 var(--mono); letter-spacing: -.05em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ol-tr-big .ol-num { font: inherit; letter-spacing: inherit; }
.ol-cents { color: var(--dim); }
.ol-tr-row { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
/* A label that wraps ("Tokens with deposits" on a phone) pushes nothing: the figures share one line. */
.ol-tr-row > div { display: flex; flex-direction: column; padding: 22px 0; }
.ol-tr-row > div + div { padding-left: 24px; border-left: 1px solid var(--line); }
.ol-tr-row dt { color: var(--dim); font: 500 11px/1.3 var(--mono); letter-spacing: .08em; text-transform: uppercase; text-wrap: balance; }
.ol-tr-row dd { margin-top: auto !important; padding-top: 12px; color: var(--ink); font: 500 28px/1 var(--mono); }
.ol-tr-foot { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: 20px; }
.ol-live { position: relative; top: -1px; display: inline-block; flex: none; width: 7px; height: 7px; margin-right: 6px; border-radius: 50%; background: var(--up); }
.ol-live::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--up); opacity: 0; }
/* One ping per fresh reading, never a loop. */
.ol-live.is-pulse::after { animation: ol-ping 1.4s cubic-bezier(.33, 1, .68, 1) 1; }
@keyframes ol-ping { from { opacity: .55; transform: scale(1); } to { opacity: 0; transform: scale(2.8); } }
@media (prefers-reduced-motion: reduce) { .ol-live.is-pulse::after { animation: none; } }

.ol-health { margin-top: 64px; scroll-margin-top: 80px; }
.ol-health-head { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: end; padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.ol-health-head h3 { font-size: 24px; }
.ol-health-head p { color: var(--muted); font: 400 15px/1.5 var(--sans); }
.ol-health-head p span { color: var(--ink); }
.ol-hrow { display: grid; grid-template-columns: 220px minmax(0, 1fr) 210px auto; align-items: center; gap: 28px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.ol-hrow-token { display: flex; align-items: center; gap: 12px; min-width: 0; }
.ol-hrow-token b { display: block; font: 500 15px/1.2 var(--mono); }
.ol-hrow-token small { display: block; margin-top: 3px; color: var(--dim); font: 400 12.5px/1.3 var(--sans); }
.ol-hrow-token:hover b { color: var(--brand); }
.ol-gauge { position: relative; padding-bottom: 18px; }
.ol-gauge-track { position: relative; display: block; height: 8px; border-radius: 4px; background: var(--line); }
.ol-gauge-band { position: absolute; top: 0; bottom: 0; border-radius: 4px; background: #1c2a4d; box-shadow: inset 0 0 0 1px #2f4a8f; }
.ol-gauge-target { position: absolute; top: -4px; width: 2px; height: 16px; margin-left: -1px; border-radius: 1px; background: var(--brand); }
.ol-gauge-dot { position: absolute; top: 50%; width: 14px; height: 14px; margin: -7px 0 0 -7px; border: 3px solid var(--ground); border-radius: 50%; background: var(--up); box-shadow: 0 0 0 1px var(--up); transition: left .9s cubic-bezier(.2, .7, .2, 1); }
.ol-gauge[data-state="out"] .ol-gauge-dot { background: #d9822b; box-shadow: 0 0 0 1px #d9822b; }
.ol-gauge-scale { position: absolute; left: 0; right: 0; bottom: 0; height: 12px; color: var(--dim); font: 500 10.5px/1 var(--mono); }
.ol-gauge-scale span { position: absolute; transform: translateX(-50%); }
.ol-hrow-val { display: flex; align-items: center; gap: 12px; }
.ol-hrow-val .ol-num { min-width: 56px; font-size: 17px; }
.ol-chip { display: inline-flex; align-items: center; height: 24px; padding: 0 9px; border-radius: 6px; font: 500 12px/1 var(--sans); white-space: nowrap; }
.ol-chip[data-state="in"] { background: #0f2219; color: #5fd398; box-shadow: inset 0 0 0 1px #1d4a33; }
.ol-chip[data-state="out"] { background: #261a0c; color: #f0a95b; box-shadow: inset 0 0 0 1px #4d3415; }
.ol-chip[data-state="unknown"] { background: var(--card-2); color: var(--muted); }
.ol-hrow-links { display: flex; gap: 8px; justify-content: flex-end; }
.ol-health-empty { padding: 22px 0; color: var(--muted); font: 400 15px/1.5 var(--sans); }

/* ---------------------------------------------------------- how it works */

.ol-how-grid { display: grid; grid-template-columns: minmax(0, 1fr) 440px; gap: 80px; align-items: center; }
.ol-steps { margin-top: 40px !important; counter-reset: none; }
.ol-steps li { display: grid; grid-template-columns: 48px 1fr; gap: 4px 16px; padding: 22px 0; border-top: 1px solid var(--line); }
.ol-step-n { grid-row: span 2; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--brand); color: #fff; font: 500 14px/1 var(--mono); }
.ol-steps h3 { font-size: 21px; }
.ol-steps p { color: var(--muted); font: 400 16px/1.5 var(--sans); text-wrap: pretty; }
.ol-ticket { position: relative; }
/* The capture ends just below Connect wallet, on the card's own bottom edge.
   Pins and track are placed on the capture (top in % of its height, set in
   the markup), so they hold their targets at every width. */
.ol-ticket-frame { position: relative; padding: 22px; border: 1px solid var(--line); border-radius: 22px; background: #05070b; }
.ol-ticket-shot { position: relative; }
.ol-ticket-shot img { width: 100%; height: auto; border-radius: 12px; }
.ol-pin { position: absolute; z-index: 1; isolation: isolate; left: -12px; display: grid; place-items: center; width: 28px; height: 28px; margin-top: -14px; border-radius: 50%; background: #1b1f29; color: #fff; font: 500 13px/1 var(--mono); box-shadow: 0 0 0 4px #05070b, inset 0 0 0 1px var(--line-2); }
.ol-pin::before { content: ""; position: absolute; z-index: -1; inset: 0; border-radius: 50%; background: var(--brand); }
/* The track runs down the ticket's edge from the first pin to the last. */
.ol-pin-track { position: absolute; left: 1px; width: 2px; border-radius: 1px; background: var(--brand); transform-origin: top center; }
/* On view the track draws down the ticket and each pin lights as it is
   reached (--t, timed to the track's curve): 1, then 2, then 3. */
.ol-js .is-pending .ol-pin-track { transform: scaleY(0); }
.ol-js .is-on .ol-pin-track { transition: transform 1.1s cubic-bezier(.3, 0, .7, 1) .7s; }
.ol-js .is-pending .ol-pin::before { opacity: 0; transform: scale(.4); }
.ol-js .is-on .ol-pin::before { transition: opacity .3s ease-out calc(var(--t, 0ms) + 700ms), transform .5s cubic-bezier(.33, 1, .68, 1) calc(var(--t, 0ms) + 700ms); }
.ol-ticket figcaption { margin-top: 14px; }

/* --------------------------------------------------- held for months */

.ol-compare { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 56px; align-items: center; }
.ol-compare-legal { display: flex; gap: 10px; align-items: flex-start; margin-top: 22px !important; }
.ol-chart { position: relative; }
.ol-plot { position: relative; height: 300px; margin-right: 52px; }
.ol-plot svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
/* The reveal clips this layer only; it reaches 8px past the plot so a line's
   end is never cut, and the axis labels sit outside it. */
.ol-draw { position: absolute; inset: -8px -8px -8px 0; }
.ol-draw svg { inset: 8px 8px 8px 0; width: calc(100% - 8px); height: calc(100% - 16px); top: 8px; }
.ol-grid { stroke: #1a1e27; stroke-width: 1; vector-effect: non-scaling-stroke; }
.ol-grid.is-zero { stroke: #3a4150; stroke-dasharray: 3 4; }
.ol-line { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.ol-line.is-spot { stroke: #9aa5b8; stroke-width: 1.5; }
.ol-line.is-perp { stroke: #6b7589; stroke-width: 1.5; stroke-dasharray: 5 4; }
.ol-line.is-token { stroke: #5b7fff; stroke-width: 2.2; }
.ol-area { fill: #5b7fff; opacity: .08; }
.ol-ticks { position: absolute; top: 0; bottom: 0; right: -52px; width: 46px; pointer-events: none; }
.ol-ticks b { position: absolute; right: 0; transform: translateY(-50%); color: var(--dim); font: 500 11px/1 var(--mono); }
.ol-axis { display: flex; justify-content: space-between; margin: 12px 52px 0 0; color: var(--dim); font: 500 12px/1 var(--mono); }
.ol-keys { display: flex; flex-wrap: wrap; gap: 8px 24px; margin-top: 18px; }
.ol-keys span { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); font: 500 13px/1 var(--mono); }
.ol-keys i { display: inline-block; width: 18px; height: 2px; background: #9aa5b8; }
.ol-keys .is-perp i { background: repeating-linear-gradient(90deg, #6b7589 0 5px, transparent 5px 9px); }
.ol-keys .is-token i { background: #5b7fff; }
.ol-keys b { color: var(--ink); font-weight: 500; }

/* ------------------------------------------------------------------ FAQ */

.ol-faq-top { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; margin-bottom: 44px; }
.ol-faq-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 64px; }
.ol-q { padding: 26px 0; border-top: 1px solid var(--line); }
.ol-q dt { margin-bottom: 10px; font: 500 20px/1.3 var(--sans); letter-spacing: -.01em; text-wrap: balance; }
.ol-q dd { color: var(--muted); font: 400 16px/1.6 var(--sans); text-wrap: pretty; }

/* --------------------------------------------------------------- closer */

.ol-closer-coins { display: flex; justify-content: center; align-items: center; margin-bottom: 40px; }
.ol-closer-coins span { margin: 0 -9px; }
.ol-closer-coins img { box-shadow: 0 0 0 5px var(--ground); }
.ol-closer h2 { font-size: 64px; letter-spacing: -.032em; }
.ol-closer .ol-lede { margin-bottom: 30px !important; }

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

/* The kept footer (columns, logotype, legal row) without its own pitch. */
.ol-footer .ocelot-footer-top { justify-content: flex-start; }
.ol-footer .ocelot-footer-inner { padding-top: 72px; }

/* ------------------------------------------------------------ responsive */

@media (max-width: 1099.98px) {
  .ol-root h2 { font-size: 44px; }
  .ol-root h2.ol-h2-md { font-size: 36px; }
  .ol-shelf { grid-template-columns: 1fr 1fr; }
  /* Two columns leave Commodities alone on its row: it spans the row, its four markets two by two. */
  .ol-shelf-col:last-child { grid-column: 1 / -1; }
  .ol-shelf-col:last-child ul { display: grid; grid-template-columns: 1fr 1fr; column-gap: 40px; }
  .ol-shelf-col:last-child .ol-shelf-row:nth-last-child(2) { border-bottom: 0; }
  .ol-stage { height: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 28px 32px; }
  .ol-core { position: relative; left: auto; top: auto; grid-column: 1 / -1; margin: 0 auto; width: 340px; height: 340px; }
  .ol-disc { inset: 50px; }
  .ol-core-coin img { width: 168px; height: 168px; }
  .ol-core-label { bottom: 62px; }
  .ol-callout { position: static; width: auto; }
  .ol-callout.is-l { align-items: flex-start; text-align: left; }
  .ol-callout.is-l .ol-callout-k { flex-direction: row; }
  .ol-wires { display: none; }
  .ol-root .ol-callout[data-reveal] { --d: calc(560ms + var(--s, 0) * 90ms); }
  .ol-js .is-pending .ol-callout.is-l, .ol-js .is-pending .ol-callout.is-r { transform: translate3d(0, 14px, 0); }
  .ol-how-grid, .ol-compare { grid-template-columns: 1fr; gap: 36px; }
  .ol-how-grid .ol-ticket { max-width: 460px; }
  .ol-tr-big { font-size: 112px; }
  .ol-health-head { grid-template-columns: 1fr; gap: 28px; }
  .ol-hrow { grid-template-columns: 200px minmax(0, 1fr) 200px; }
  .ol-hrow-links { grid-column: 1 / -1; justify-content: flex-start; }
}

/* Below 810 the hero's copy sits 16px from the edge; every section and the footer use the same edge. */
@media (max-width: 809.98px) {
  .ol-wrap { width: calc(100% - 32px); }
  .ol-footer .ocelot-footer-inner { width: calc(100% - 32px); }
}

@media (max-width: 699.98px) {
  .ol-sec { padding: 72px 0; }
  .ol-root h2, .ol-root h2.ol-h2-md { font-size: 32px; letter-spacing: -.024em; }
  .ol-lede { font-size: 16px; }
  .ol-center { text-align: left; }
  .ol-center .ol-lede { margin-left: 0; }
  .ol-markets .ol-head { margin-bottom: 30px; }
  .ol-shelf { grid-template-columns: 1fr; gap: 14px; }
  .ol-shelf-col:last-child ul { display: block; }
  .ol-shelf-col:last-child .ol-shelf-row:nth-last-child(2) { border-bottom: 1px solid var(--line); }
  .ol-shelf-col { --c: 0 !important; }
  .ol-shelf-col { padding: 20px 18px 4px; border-radius: 16px; }
  .ol-shelf-row { grid-template-columns: 68px minmax(0, 1fr) auto 14px; gap: 8px; padding: 13px 0; }
  .ol-shelf-link::after { inset: 4px -10px; }
  .ol-pair { width: 68px; height: 40px; }
  .ol-pair img { width: 40px; height: 40px; }
  .ol-pair a + a { left: 27px; }
  .ol-shelf-price { font-size: 13px; }
  .ol-cta-row { margin-top: 28px; }

  .ol-stage { margin-top: 28px; gap: 22px 16px; }
  .ol-core { width: 260px; height: 260px; }
  .ol-disc { inset: 38px; }
  .ol-core-coin img { width: 128px; height: 128px; }
  .ol-core-label { bottom: 46px; }
  .ol-callout-v { margin: 8px 0 4px; font-size: 21px; }
  .ol-callout-d { font-size: 13px; }
  .ol-callout-k { font-size: 10px; }
  .ol-icon { width: 15px; height: 15px; }
  .ol-stage-foot { display: block; }
  .ol-stage-foot .ol-pills { margin-top: 14px; }

  .ol-risk .ol-head { margin-bottom: 28px; }
  .ol-risk-hd { padding: 14px 16px; column-gap: 14px; font-size: 10px; }
  .ol-risk-hd .ol-coin, .ol-risk-wide { display: none; }
  .ol-risk-row { padding: 18px 16px; column-gap: 14px; }
  .ol-risk-hd, .ol-risk-row { grid-template-columns: minmax(0, .8fr) minmax(0, 1fr) minmax(0, 1fr); }
  .ol-risk-move, .ol-risk-row b { font-size: 20px; white-space: nowrap; }
  .ol-bar { width: 100%; margin-top: 10px; }
  .ol-risk .ol-note { align-items: flex-start; }

  /* Scales with the screen so a five-figure total still fits a 360px phone. */
  .ol-tr-big { margin: 22px 0 22px; font-size: min(56px, 14.5vw); }
  .ol-tr-row dt { font-size: 9.5px; letter-spacing: .06em; }
  .ol-tr-row dd { font-size: 18px; }
  .ol-tr-row > div { padding: 16px 0; }
  .ol-tr-row > div + div { padding-left: 12px; }
  .ol-tr-foot { display: block; }
  .ol-tr-foot .ol-btn { margin-top: 16px; }
  .ol-health { margin-top: 48px; }
  .ol-health-head h3 { font-size: 20px; }
  .ol-hrow { grid-template-columns: minmax(0, 1fr) auto; gap: 12px 12px; padding: 16px 0; }
  .ol-hrow .ol-gauge { grid-column: 1 / -1; grid-row: 2; }
  .ol-hrow-val { grid-column: 2; grid-row: 1; flex-direction: column; align-items: flex-end; gap: 6px; }
  .ol-hrow-val .ol-num { min-width: 0; }
  .ol-hrow-links { grid-row: 3; }

  .ol-steps { margin-top: 26px !important; }
  .ol-steps li { grid-template-columns: 42px 1fr; padding: 18px 0; }
  .ol-steps h3 { font-size: 18px; }
  .ol-steps p { font-size: 15px; }
  .ol-ticket-frame { padding: 16px; }
  /* Smaller pins on the frame's edge so the third clears "You get". */
  .ol-pin { left: -13px; width: 24px; height: 24px; margin-top: -12px; font-size: 12px; }
  .ol-pin-track { left: -2px; }

  .ol-compare { gap: 24px; }
  .ol-plot { height: 220px; margin-right: 40px; }
  .ol-ticks { right: -40px; width: 36px; }
  .ol-ticks b { font-size: 10px; }
  .ol-axis { margin-right: 40px; font-size: 11px; }
  .ol-keys { gap: 8px 16px; }
  .ol-keys span { font-size: 12px; }


  .ol-faq-top { display: block; margin-bottom: 28px; }
  .ol-faq-top .ol-btn { margin-top: 18px; }
  .ol-faq-grid { grid-template-columns: 1fr; }
  .ol-q { padding: 20px 0; }
  .ol-q dt { font-size: 18px; }
  .ol-q dd { font-size: 15px; }

  .ol-closer, .ol-closer .ol-center { text-align: center; }
  .ol-closer .ol-lede { margin-left: auto; margin-right: auto; }
  .ol-closer h2 { font-size: 38px; }
  .ol-closer-coins { margin-bottom: 30px; }
  .ol-closer-coins { zoom: .7; }
}

/* Counting figures keep their final width (tabular mono), so nothing beside
   them moves while they count. */
.ol-keys b .ol-num { display: inline-block; min-width: 7ch; }

/* Touch: every control answers a 44px finger without changing what it looks like. The hit area grows
   past the drawn shape (a transparent ::after, or padding taken back by margin on inline links). */
@media (pointer: coarse) {
  /* The coin links are already absolutely placed, so they hold their own ::after. */
  .ol-btn, .ol-pill, .ol-check { position: relative; }
  .ol-btn::after, .ol-pill::after, .ol-check::after, .ol-pair a::after { content: ""; position: absolute; }
  .ol-btn::after { inset: -4px 0; }
  .ol-pill::after { inset: -8px 0; }
  .ol-check::after { inset: -14px -10px; }
  .ol-pair a::after { inset: -2px; border-radius: 50%; }
  .ol-sub-codes a { display: inline-block; margin: -15px -6px; padding: 15px 6px; }
  .ol-pills { gap: 12px 8px; }
  .ol-stage-foot .ol-pills { margin-top: 18px; }
}