/* Our layer on top of the template's CSS (css/framer.css). */

/* venue logos in the ticker, greyed to sit like the template's wordmarks (#828282 @ .84) */
.vlogo { display: inline-flex; align-items: center; gap: 9px; height: 38px; color: #828282; font: 600 21px/1 "TASA Orbiter", sans-serif; letter-spacing: -.01em; white-space: nowrap; }
.vlogo img { width: 30px; height: 30px; border-radius: 50%; filter: grayscale(1) brightness(1.1) contrast(.9); opacity: .9; }

/* value-prop tabs: active one lit, others dimmed (driven by scroll in site.js) */
[data-framer-name="Categories"] > div { transition: opacity .3s ease; }
[data-framer-name="Categories"] > div:not(.tab-on) { opacity: .45; }
[data-framer-name="Categories"] > div:not(.tab-on) [data-framer-name="Line"] { opacity: 0; }
[data-framer-name="Categories"] > div.tab-on [data-framer-name="Line"] { opacity: 1; }

/* ---------- HTML over the template's UI images (content.mjs → UI). Units: % and cqw of the image itself. ---------- */
.ov { position: absolute; inset: 0; container-type: size; overflow: hidden; border-radius: inherit; pointer-events: none; }
.ov-in { position: absolute; left: 50%; top: 50%; width: max(100cqw, calc(100cqh * var(--r))); aspect-ratio: var(--r); transform: translate(-50%, -50%); container-type: inline-size; font-family: "Satoshi", sans-serif; color: #fff; }
.ov-in img.lg { object-fit: cover; border-radius: 50%; background: #1b1b1f; }
.ov-in .up { color: #34d399; } .ov-in .dn { color: #f87171; }

/* board (2032×808) */
.ui-board { position: absolute; left: 12.5%; top: 19.7%; width: 75.1%; height: 60.5%; background: #040506; border: .08cqw solid #202228; border-radius: 1.25cqw; display: grid; grid-template-rows: repeat(4, 1fr); overflow: hidden; }
.ui-board .row { position: relative; border-bottom: .08cqw solid #1a1c21; }
.ui-board .row:last-child { border-bottom: 0; }
.ui-board .row > * { position: absolute; top: 50%; transform: translateY(-50%); }
.ui-board .ck { left: 1.4cqw; width: 2.4cqw; height: 2.4cqw; border-radius: .5cqw; background: #0b0c0e; border: .08cqw solid #26282d; }
.ui-board .ck::after { content: ""; position: absolute; left: .78cqw; top: .45cqw; width: .55cqw; height: 1.05cqw; border: solid #fff; border-width: 0 .22cqw .22cqw 0; transform: rotate(45deg); }
.ui-board .n { left: 7.65cqw; font-size: 1.6cqw; font-weight: 500; }
.ui-board .lg { left: 18cqw; width: 3cqw; height: 3cqw; }
.ui-board .nm { left: 22.95cqw; display: flex; flex-direction: column; line-height: 1.05; }
.ui-board .nm b { font-size: 1.6cqw; font-weight: 600; max-width: 8.6cqw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-board .nm small { font-size: 1.2cqw; font-weight: 500; color: #8a93a6; }
.ui-board .px { left: 32.15cqw; font-size: 1.6cqw; font-weight: 600; }
.ui-board .pill { left: 48.2cqw; height: 2.8cqw; padding: 0 1.2cqw; border-radius: 1cqw; background: #0b3a2a; color: #34d399; display: flex; align-items: center; gap: .7cqw; font-size: 1.3cqw; font-weight: 600; font-style: normal; }
.ui-board .pill em { font-style: normal; }
.ui-board .pill svg { width: 1.2cqw; height: 1.2cqw; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ui-board .pill.dn { background: #3a0f16; color: #f87171; } .ui-board .pill.dn svg { transform: scaleY(-1); }
.ui-board .sp { left: 62.35cqw; width: 10.7cqw; height: 4cqw; overflow: visible; }
.ov-in .sp path, .ov-in .sp .l { fill: none; stroke: #34d399; stroke-width: .15cqw; vector-effect: non-scaling-stroke; stroke-linejoin: round; stroke-linecap: round; }
.ov-in .sp .f { stroke: none; }
.ov-in .sp.dn path, .ov-in .sp.dn .l { stroke: #f87171; }

/* chip (2012×518) */
.ui-chip { position: absolute; left: 29.15%; top: 65.4%; width: 41.75%; height: 28.8%; background: #1c1918; border-radius: 2.3cqw; }
.ui-chip > * { position: absolute; top: 50%; transform: translateY(-50%); }
.ui-chip .lg { left: .6cqw; width: 6.15cqw; height: 6.15cqw; border-radius: 1.25cqw; }
.ui-chip .a { left: 8.65cqw; display: flex; flex-direction: column; gap: .25cqw; line-height: 1.1; }
.ui-chip .a b { font-size: 1.8cqw; font-weight: 600; } .ui-chip .a em { font-size: 1.65cqw; font-style: normal; color: #cfcfcf; }
.ui-chip .sp { left: 17.1cqw; width: 9cqw; height: 3.5cqw; overflow: visible; }
.ui-chip .b { right: 1.65cqw; display: flex; flex-direction: column; align-items: flex-end; gap: .25cqw; line-height: 1.1; }
.ui-chip .b b { font-size: 1.9cqw; font-weight: 700; } .ui-chip .b em { font-size: 1.65cqw; font-style: normal; color: #bdbdbd; }

/* watchlist (1416×516) */
.ui-watch .hd { position: absolute; left: 5.1cqw; top: 15.2%; padding: .2cqw .3cqw; background: #0c0c0c; color: #8b8b90; font-size: 1.7cqw; }
.ui-watch .row { position: absolute; left: 5.93cqw; width: 94.07cqw; height: 21.2%; background: #0c0c0c; border-bottom: .08cqw solid #1d1d20; }
.ui-watch .row[data-i="0"] { top: 33.3%; } .ui-watch .row[data-i="1"] { top: 54.5%; }
.ui-watch .row > * { position: absolute; top: 50%; transform: translateY(-50%); }
.ui-watch .ck { left: 1.55cqw; width: 2.54cqw; height: 2.54cqw; border-radius: .56cqw; background: #1f1f21; }
.ui-watch .ck::after { content: ""; position: absolute; left: .95cqw; top: .55cqw; width: .5cqw; height: .95cqw; border: solid #8e8e93; border-width: 0 .2cqw .2cqw 0; transform: rotate(45deg); }
.ui-watch .n { left: 8.12cqw; font-size: 1.7cqw; font-weight: 500; color: #77777c; }
.ui-watch .lg { left: 18.86cqw; width: 3.25cqw; height: 3.25cqw; }
.ui-watch .nm { left: 24.08cqw; display: flex; flex-direction: column; line-height: 1.05; }
.ui-watch .nm b { font-size: 1.7cqw; font-weight: 500; color: #8d8d92; max-width: 13cqw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ui-watch .nm small { font-size: 1.3cqw; font-weight: 700; color: #c4c4c8; }
.ui-watch .px { left: 40.4cqw; font-size: 1.7cqw; font-weight: 500; color: #7d7d82; }
.ui-watch .ch { left: 63.84cqw; display: flex; align-items: center; gap: .85cqw; font-size: 1.4cqw; font-weight: 700; }
.ui-watch .ch i { width: 1.98cqw; height: 1.98cqw; border-radius: 50%; background: #0f3b2b; position: relative; }
.ui-watch .ch i::after { content: "↗"; position: absolute; inset: 0; display: grid; place-items: center; font-size: 1.2cqw; font-style: normal; color: #34d399; }
.ui-watch .ch.dn i { background: #3a0f16; } .ui-watch .ch.dn i::after { content: "↘"; color: #f87171; }
.ui-watch .ch em { font-style: normal; }
.ui-watch .bt { left: 85.24cqw; width: 6.36cqw; height: 2.82cqw; border-radius: .5cqw; background: #2b1650; color: #9a5cf5; font-size: 1.4cqw; font-weight: 700; display: grid; place-items: center; }

/* dashboard (1440×545), full rebuild */
.ui-dash { position: absolute; inset: 0; background: #0a0a0a; pointer-events: auto; }
.ui-dash .hd { position: absolute; left: 1.11cqw; top: 7.3%; transform: translateY(-50%); display: flex; align-items: center; }
.ui-dash .hd .sym { font-size: 1.53cqw; font-weight: 700; margin-right: 1.1cqw; }
.ui-dash .hd .lg { width: 2.08cqw; height: 2.08cqw; margin-right: .3cqw; }
.ui-dash .hd .px { font-size: 2.78cqw; font-weight: 300; letter-spacing: -.01em; margin: 0 1.3cqw 0 .3cqw; }
.ui-dash .hd .ch { font-size: 1.11cqw; font-style: normal; color: #9b6bff; }
.ui-dash .ch-svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.ui-dash .ch-svg text { font: 500 15px "Satoshi", sans-serif; fill: #5c5c66; }
.ui-dash .tip { position: absolute; display: none; align-items: center; gap: .9cqw; padding: .7cqw 1cqw .7cqw .7cqw; background: #0d0d10; border: .07cqw solid #1f1f25; border-radius: .9cqw; transform: translate(-40%, calc(-100% - 1.1cqw)); white-space: nowrap; }
.ui-dash .tip img { width: 2.2cqw; height: 2.2cqw; border-radius: 50%; object-fit: cover; }
.ui-dash .tip span { display: flex; flex-direction: column; line-height: 1.1; } .ui-dash .tip b { font-size: 1.15cqw; } .ui-dash .tip small { font-size: 1.05cqw; color: #55555c; }
.ui-dash .tip em { font-size: .95cqw; font-style: normal; color: #9b6bff; }
.ui-dash .tk { position: absolute; left: 78.54cqw; top: 0; width: 18.96cqw; height: 100%; }
.ui-dash .tk > * { position: absolute; left: 0; margin: 0; transform: translateY(-50%); }
.ui-dash .tk h4 { top: 18.4%; font-size: 1.53cqw; font-weight: 500; }
.ui-dash .tk label { font-size: 1.25cqw; font-weight: 500; }
.ui-dash .tk label:nth-of-type(1) { top: 26.6%; } .ui-dash .tk label:nth-of-type(2) { top: 66.4%; }
.ui-dash .tk .in { width: 100%; height: 3.61cqw; display: flex; border-radius: .7cqw; overflow: hidden; }
.ui-dash .tk .in:nth-of-type(1) { top: 35.6%; } .ui-dash .tk .in:nth-of-type(2) { top: 75.6%; }
.ui-dash .tk .in > span:first-child { display: flex; align-items: center; gap: .55cqw; padding: 0 .9cqw 0 .55cqw; background: #170f17; }
.ui-dash .tk .in img { width: 2.1cqw; height: 2.1cqw; border-radius: 50%; object-fit: cover; }
.ui-dash .tk .in b { font-size: 1.05cqw; font-weight: 700; }
.ui-dash .tk .in .v { flex: 1; display: flex; align-items: center; padding-left: 1.3cqw; background: #19191c; font-size: 1.11cqw; color: #dcdcdc; }
.ui-dash .tk p { font-size: .97cqw; font-weight: 700; }
.ui-dash .tk .r1 { top: 44.2%; } .ui-dash .tk .r2 { top: 84.2%; }
.ui-dash .tk .sw { top: 55.3%; width: 4.17cqw; height: 4.17cqw; border-radius: .7cqw; background: #19191c; display: grid; place-items: center; }
.ui-dash .tk .sw svg { width: 1.6cqw; height: 1.6cqw; fill: none; stroke: #ddd; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.ui-dash .tk .go { top: 93.3%; width: 100%; height: 2.7cqw; border-radius: 1.4cqw; background: #fff; color: #111; font-size: .97cqw; font-weight: 500; display: grid; place-items: center; text-decoration: none; }
.ui-dash .tk .go:hover { background: #e9e9e9; }

/* portfolio phone rows (2032×808): coins live, drawn over the erased template rows */
.ui-port .pr { position: absolute; inset: 0; }
.ui-port .pr > * { position: absolute; }
.ui-port .a, .ui-port .b { display: flex; flex-direction: column; line-height: 1.15; white-space: nowrap; }
.ui-port .a em, .ui-port .b em { font-style: normal; }
.ui-port .b { align-items: flex-end; }
.ui-port .r0 .lg { left: 14.75cqw; top: 25.6%; width: 1.97cqw; height: 1.97cqw; }
.ui-port .r0 .a { left: 18.36cqw; top: 24.6%; } .ui-port .r0 .a b { font-size: .94cqw; font-weight: 600; } .ui-port .r0 .a em { font-size: .8cqw; color: #c8c8c8; margin-top: .3cqw; }
.ui-port .r0 .sp { left: 23.87cqw; top: 25.2%; width: 4.92cqw; height: 4.95%; }
.ui-port .r0 .b { left: 29.53cqw; width: 5.56cqw; top: 24.6%; } .ui-port .r0 .b b { font-size: .94cqw; font-weight: 600; } .ui-port .r0 .b em { font-size: .8cqw; color: #c8c8c8; margin-top: .3cqw; }
.ui-port .r1 .lg { left: 51.6cqw; top: 18.2%; width: 2.07cqw; height: 2.07cqw; }
.ui-port .r1 .a { left: 55.95cqw; top: 16.8%; } .ui-port .r1 .a b { font-size: 1.08cqw; font-weight: 500; color: #d0d0d0; } .ui-port .r1 .a em { font-size: 1.08cqw; font-weight: 300; color: #a8a8a8; margin-top: .4cqw; }
.ui-port .r1 .sp { left: 62.4cqw; top: 17.3%; width: 6.5cqw; height: 6.2%; }
.ui-port .r1 .sp path { stroke: #4a5cc9; }
.ui-port .r1 .b { left: 70.37cqw; width: 7.14cqw; top: 16.8%; } .ui-port .r1 .b b { font-size: 1.18cqw; font-weight: 500; color: #9a9a9a; } .ui-port .r1 .b em { font-size: 1.08cqw; font-weight: 300; color: #7d7d7d; margin-top: .4cqw; }
.ui-port .r2 { opacity: .5; }
.ui-port .r2 .lg { left: 19.83cqw; top: 71.6%; width: 1.38cqw; height: 1.38cqw; }
.ui-port .r2 .a { left: 23.13cqw; top: 71.6%; } .ui-port .r2 .a b { font-size: .89cqw; font-weight: 600; color: #bdbdbd; } .ui-port .r2 .a em { font-size: .8cqw; color: #8a8a8a; margin-top: .3cqw; }
.ui-port .r2 .sp { left: 27.56cqw; top: 71.2%; width: 5.17cqw; height: 5.5%; }
.ui-port .r2 .b { left: 33.96cqw; width: 5.71cqw; top: 71.6%; } .ui-port .r2 .b b { font-size: .89cqw; font-weight: 600; color: #bdbdbd; } .ui-port .r2 .b em { font-size: .8cqw; color: #8a8a8a; margin-top: .3cqw; }

/* mobile menu sheet (matches the template's open state) */
.mmenu { position: fixed; left: 0; right: 0; top: 59px; bottom: 0; background: #f3f4f7; padding: 36px 24px 32px; display: flex; flex-direction: column; gap: 0; opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity .25s ease, transform .25s ease, visibility 0s .25s; font-family: "Satoshi", sans-serif; overflow-y: auto; z-index: 20; }
.mm-open .mmenu { opacity: 1; visibility: visible; transform: none; transition: opacity .25s ease, transform .25s ease; }
.mmenu h6 { margin: 0 0 18px; padding-bottom: 10px; border-bottom: 1px solid #111; font: 500 17px/1.3 "Satoshi", sans-serif; color: #111; }
.mmenu .cols { display: flex; justify-content: space-between; margin-bottom: 44px; }
.mmenu .cols > div { display: flex; flex-direction: column; gap: 6px; min-width: 40%; }
.mmenu a { font-size: 17px; line-height: 26px; color: #9a9aa3; text-decoration: none; }
.mmenu a.on, .mmenu a:hover { color: #111; }
.mmenu .cta { margin-top: auto; align-self: stretch; text-align: center; padding: 14px; border-radius: 48px; background: #000; color: #fff; font-weight: 500; }
[data-framer-name="Hamburger Lines"] > div { transition: transform .3s ease, opacity .2s ease; }
.mm-open [data-framer-name="Top"] { transform: translateY(var(--mm-dy, 8px)) rotate(45deg) !important; }
.mm-open [data-framer-name="Middle"] { opacity: 0 !important; }
.mm-open [data-framer-name="Bottom"] { transform: translateY(calc(-1 * var(--mm-dy, 8px))) rotate(-45deg) !important; }
@media (min-width: 1200px) { .mmenu { display: none; } }

/* Fall mark is wider than the template's symbol: give it a square slot */
[data-framer-name="Logomark"] { width: 26px !important; height: 26px !important; }