/* THE LANDING PAGE, v2. The app's colours, fonts and components only
   (app/src/styles/tokens.css): ink #060510, green #21c95e with white text on
   fills, loss red #ff622e, violet #d289e2, near-white #f8f8f8, the app's own
   sans. No amber or yellow, no monospace (Kevin, 2026-10-22: "remember we are
   not using monospace anymore").
   Normal scrolling: nothing is pinned, nothing is scrubbed by the scroll. */
:root{
  --ink:#060510; --raised:#161522; --card:#0d0b1c;
  --line:rgba(203,208,235,.10); --line-hi:rgba(203,208,235,.18);
  --w:#f8f8f8; --soft:#c9c9d1; --muted:#9899a3; --dim:rgba(248,248,248,.5);
  --g:#21c95e; --g-soft:rgba(33,201,94,.16); --g-line:rgba(33,201,94,.45);
  --r:#ff622e; --r-soft:rgba(255,98,46,.16); --r-line:rgba(255,98,46,.45);
  --p:#d289e2; --p-soft:rgba(210,137,226,.16);
  --violet:#c371d6; --pink:#ff5cc8; --orange-t:var(--orange-t); --tile-blank:#46284d;
  /* The app's own type (tokens.css --k-font-root, v2-tokens.css --v2-font), one family for everything. */
  --sans:-apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, sans-serif;
  --gut:28px;
  color-scheme:dark;
}
@media (max-width:699.98px){ :root{ --gut:16px; } }
*{ box-sizing:border-box; }
html{ background:var(--ink); -webkit-text-size-adjust:100%; }
body{ margin:0; background:var(--ink); color:var(--w); font:15px/1.5 var(--sans); font-variant-numeric:tabular-nums; overflow-x:clip; -webkit-font-smoothing:antialiased; }
a{ color:inherit; }
button{ font:inherit; color:inherit; }

/* ---- the bar: the logo exactly as the app sets it, and the way in -------------------
   The logo is the eggplant and lowercase clusterfuk, white, the app sans at 700
   and .04em (App.tsx .splash-brand). Past the hero it sits on an ink plate so it
   stays legible over the coloured slabs; the word itself never changes. */
.bar{ position:fixed; z-index:100; top:max(12px, env(safe-area-inset-top)); left:var(--gut); right:var(--gut);
  display:flex; justify-content:space-between; align-items:center; pointer-events:none; }
.bar > *{ pointer-events:auto; }
.mark{ font-family:var(--sans); font-weight:700; letter-spacing:.04em; font-size:16px; line-height:1; color:#fff; text-decoration:none;
  padding:8px 10px; margin-left:-10px; border-radius:8px; text-shadow:0 2px 14px rgba(0,0,0,.65); transition:background-color .2s; }
.bar.plate .mark{ background:var(--ink); text-shadow:none; }
/* THE APP'S BUTTON (cluster.css #splash-go, Kevin 2026-10-07: LFG "doesn't match
   our branding"): green fill, white "LFG" in the app sans at 700, the double
   chevron, the same shadow and the same hover lift. Square, no rounded corners
   (Kevin, 2026-10-22: "remove rounded corners from trade now buttons"). Three sizes. */
.lfg{ display:inline-flex; align-items:center; gap:8px; font-family:var(--sans); font-size:22px; font-weight:700; letter-spacing:.02em;
  line-height:1; color:#fff; background:var(--g); border:none; border-radius:0; padding:18px 36px; text-decoration:none; cursor:pointer;
  box-shadow:0 8px 30px rgba(33,201,94,.35); transition:transform .12s ease, box-shadow .12s ease, filter .12s ease; }
.lfg:hover{ transform:translateY(-1px); box-shadow:0 12px 40px rgba(33,201,94,.5); filter:brightness(1.07); }
.lfg:active{ transform:translateY(0); }
.lfg svg{ width:1.05em; height:1.05em; flex:none; }
.lfg-sm{ font-size:16px; padding:11px 18px; border-radius:0; box-shadow:0 6px 22px rgba(33,201,94,.3); }
.lfg-lg{ font-size:26px; padding:22px 44px; border-radius:0; }
:focus-visible{ outline:2px solid var(--p); outline-offset:3px; }

/* ---- kinetic statements: the app sans at its heaviest, edge to edge -----------------
   about.js cuts each line into letters, sizes every line to meet both edges and
   drops the letters in on springs when the block comes into view. Hidden until
   then, so nothing jumps; shown at once without JS (a <noscript> rule) or under
   reduced motion. */
.kin{ position:relative; margin:0; font-family:var(--sans); font-weight:900; font-size:64px; line-height:.82; letter-spacing:-.03em;
  text-transform:uppercase; color:inherit; visibility:hidden; }
.kin.built{ visibility:visible; }
.kin .ln{ display:block; white-space:pre; width:max-content; }
.kin .ch{ display:inline-block; position:relative; }
.kin.live .ch{ will-change:transform; }
.kin .ac{ color:var(--ac, var(--g)); }
.kin .ac2{ color:var(--r); }

/* ---- media: the splash video's layers (cluster.css #splash .splash-media) ----------- */
.hero, .final, .beat-exit{ position:relative; overflow:hidden; isolation:isolate; background:var(--ink); }
.under, .media, .tear{ position:absolute; inset:0; }
.under{ z-index:0; background:#060510 url("/about/img/graph.webp") center/cover no-repeat; }
.media{ z-index:1; overflow:hidden; background-color:var(--ink); background-image:var(--poster, none); background-repeat:no-repeat;
  background-position:var(--fx-pos, 50% 72%); background-size:var(--fx-size, cover); }
.media video{ position:absolute; left:0; top:0; display:block; pointer-events:none; width:var(--fx-w, 100%); height:var(--fx-h, 100%);
  object-fit:cover; transform-origin:0 0; transform:var(--fx, none); }
.media video::-webkit-media-controls, .media video::-webkit-media-controls-start-playback-button{ display:none !important; -webkit-appearance:none; }
.scrim{ position:absolute; inset:0; z-index:1; background:linear-gradient(to bottom,
  rgba(6,5,16,.72) 0%, rgba(6,5,16,.32) 34%, rgba(6,5,16,0) 52%, rgba(6,5,16,.35) 82%, rgba(6,5,16,.85) 100%); }
.scrim-final{ background:linear-gradient(to bottom, rgba(6,5,16,.9) 0%, rgba(6,5,16,.4) 38%, rgba(6,5,16,.25) 62%, rgba(6,5,16,.92) 100%); }
.scrim-dark{ background:rgba(6,5,16,.35); }
.media::before{ content:""; position:absolute; inset:0; z-index:2; pointer-events:none;
  background-image:radial-gradient(rgba(0,0,0,.42) .75px, transparent 1.15px); background-size:3px 3px; opacity:.55; }
.media::after{ content:""; position:absolute; inset:-60px; z-index:3; pointer-events:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  background-size:180px 180px; opacity:.07; mix-blend-mode:overlay; }
.grain-on .media::after{ animation:grain .9s steps(6) infinite; will-change:transform; }
@keyframes grain{ 0%{ transform:translate3d(0,0,0); } 17%{ transform:translate3d(-23px,14px,0); } 33%{ transform:translate3d(18px,-31px,0); }
  50%{ transform:translate3d(-37px,-9px,0); } 67%{ transform:translate3d(29px,22px,0); } 83%{ transform:translate3d(-11px,37px,0); } 100%{ transform:translate3d(0,0,0); } }
.tear{ z-index:2; pointer-events:none; display:none; }
[data-glitch] > .tear{ display:block; }
.tear i{ position:absolute; inset:0; opacity:0; isolation:isolate; will-change:transform, opacity; }
.tear i::before, .tear i::after{ content:""; position:absolute; inset:0;
  background-image:linear-gradient(var(--pink), var(--pink)), var(--poster, none);
  background-position:var(--fx-pos, 50% 72%); background-size:var(--fx-size, cover); background-repeat:no-repeat;
  background-blend-mode:multiply; transform:translate3d(calc(var(--rgb, 4px) * -1),0,0); }
.tear i::after{ background-image:linear-gradient(var(--violet), var(--violet)), var(--poster, none); mix-blend-mode:screen; transform:translate3d(var(--rgb, 4px),0,0); }
.tear b{ position:absolute; inset:0; opacity:0; background:repeating-linear-gradient(to bottom, rgba(6,5,16,.55) 0 1px, transparent 1px 3px); }

/* ---- 1. the wire: the live graph on the app's own ground (draw.ts PAINT.bg) --------- */
.wire{ position:relative; height:100vh; height:100svh; min-height:560px; overflow:hidden; background:#060510; isolation:isolate; touch-action:pan-y; }
.wire .frame{ position:absolute; inset:0; width:100%; height:100%; border:0; display:block; background:#060510; }
/* a phone's swipe over the frame scrolls the page; the frame takes no touches.
   pointer-events alone is not enough on an iPhone: Safari reads touch-action
   from the frame's own content (the app's canvas is touch-action:none), so a
   swipe that began on the hero never moved the page. A plain layer of this
   page sits over the frame and takes every touch, panning only. */
@media (hover:none), (max-width:699.98px){
  .wire .frame{ pointer-events:none; }
  .wire::before{ content:""; position:absolute; inset:0; z-index:1; touch-action:pan-y; }
}
.wire-fg{ position:absolute; left:0; right:0; bottom:0; z-index:4; display:flex; flex-direction:column; align-items:flex-start; gap:22px;
  padding:0 var(--gut) max(34px, calc(env(safe-area-inset-bottom) + 20px)); pointer-events:none; }
.wire-fg > *{ pointer-events:auto; }
.shout{ width:min(100%, 900px); pointer-events:none !important; }
.wire-fg{ background:linear-gradient(to top, rgba(6,5,16,.7), rgba(6,5,16,0)); padding-top:60px; }
/* "FUCKED." on a red slab, as concept B set it; the slab is the line's own box */
.kin[data-slab] .ln:last-child{ background:var(--r); color:var(--ink); padding:.07em .1em .02em .06em; margin-top:.05em; transform-origin:0 50%; }
.cv-hit{ cursor:pointer; }
/* THE FLICKER: the brand video in torn bands over the graph (the app's splash
   glitch, the other way round). The picture is the poster; the bands are its
   slices, shoved sideways; the whole layer shows only during a burst. */
.static{ position:absolute; inset:0; z-index:3; pointer-events:none; display:none; }
.static.on{ display:block; }
.static .st-pic{ position:absolute; inset:0; background:var(--poster) var(--fx-pos, 50% 72%)/var(--fx-size, cover) no-repeat; }
.static .st-bands{ position:absolute; inset:0; }
.static .st-bands i{ position:absolute; left:-40px; right:-40px; background:var(--poster) no-repeat; background-size:var(--fx-size, cover); will-change:transform; }
.static .st-scan{ position:absolute; inset:0; background:repeating-linear-gradient(to bottom, rgba(6,5,16,.55) 0 1px, transparent 1px 3px); opacity:.5; }
.static.full .st-pic{ clip-path:none; }

/* ---- the cross banners ------------------------------------------------------------- */
.bands{ position:relative; height:150px; overflow:hidden; background:var(--ink); z-index:2; }
.band{ position:absolute; left:-6%; right:-6%; height:54px; display:flex; align-items:center; overflow:hidden; white-space:nowrap; }
.band-g{ top:24px; background:var(--g); color:#fff; transform:rotate(-3deg); z-index:2; }
.band-w{ top:66px; background:var(--w); color:var(--ink); transform:rotate(2.2deg); z-index:1; }
.band-run{ display:inline-flex; align-items:center; will-change:transform; }
.band-g .band-run span{ font:900 30px/1 var(--sans); letter-spacing:-.02em; text-transform:uppercase; padding:0 18px; }
.band-g .band-run i{ font-style:normal; font:400 26px/1 var(--sans); opacity:.9; }
.band-w .band-run span{ font:700 15px/1 var(--sans); letter-spacing:-.01em; padding:0 22px; }
.band-w .band-run b.g{ color:var(--g); } .band-w .band-run b.r{ color:var(--r); }
@media (max-width:699.98px){ .bands{ height:118px; } .band{ height:44px; } .band-g{ top:18px; } .band-w{ top:54px; }
  .band-g .band-run span{ font-size:22px; } .band-w .band-run span{ font-size:12px; } }

/* ---- the pain beats: a colour slab slams in, the statement drops onto it ------------- */
.beat{ position:relative; overflow:hidden; isolation:isolate; display:flex; align-items:flex-end; color:var(--fg, var(--w));
  min-height:62vh; min-height:62svh; padding:120px var(--gut) 5vh; contain:paint; }
@media (max-width:699.98px){ .beat{ min-height:50svh; padding-top:96px; } }
.slab{ position:absolute; inset:0; z-index:0; will-change:transform; }
.slab i{ position:absolute; left:-4px; right:-4px; background:var(--bg); will-change:transform; }
.slab i:nth-child(1){ top:-60%; height:80.5%; } .slab i:nth-child(2){ top:20%; height:20.5%; } .slab i:nth-child(3){ top:40%; height:20.5%; }
.slab i:nth-child(4){ top:60%; height:20.5%; } .slab i:nth-child(5){ top:80%; height:21%; }
.beat .kin{ z-index:2; width:100%; }
.scan{ position:absolute; inset:0; z-index:5; pointer-events:none; opacity:0;
  background:repeating-linear-gradient(to bottom, rgba(6,5,16,.55) 0 1px, transparent 1px 3px); }
.fband{ position:absolute; left:0; right:0; z-index:6; pointer-events:none; opacity:0; will-change:transform; }

/* ---- the real trade ------------------------------------------------------------------ */
.trap{ position:relative; background:var(--ink); padding:84px 0 96px; overflow:hidden; }
.trap-top{ padding:0 var(--gut); display:flex; flex-direction:column; align-items:flex-start; gap:12px; margin-bottom:18px; }
.tag{ display:inline-block; font:700 11px/1 var(--sans); padding:6px 8px; border-radius:6px; }
.tag-w{ background:var(--w); color:var(--ink); }
.trap-h{ margin:0; font:900 clamp(34px, 5.4vw, 72px)/.9 var(--sans); letter-spacing:-.04em; text-transform:uppercase; }
.trap-cap{ margin:0; min-height:1.4em; font:600 clamp(15px, 1.5vw, 18px)/1.35 var(--sans); color:var(--w); transition:opacity .2s; }
.trap-cap b{ color:var(--g); } .trap-cap em{ font-style:normal; color:var(--r); }
.trap-body{ display:grid; gap:16px; padding:0 var(--gut); }
@media (min-width:1000px){ .trap-body{ grid-template-columns:minmax(0,1fr) 360px; align-items:stretch; } }
.trap-stage{ position:relative; height:min(62vh, 600px); min-height:380px; border-radius:12px; overflow:hidden; background:#060510; border:1px solid var(--line); touch-action:pan-y; }
.trap-stage .cv{ position:absolute; inset:0; width:100%; height:100%; display:block; }
.trap-clock{ position:absolute; left:16px; top:12px; font:900 44px/1 var(--sans); letter-spacing:-.03em; font-variant-numeric:tabular-nums; }
.trap-ctr{ position:absolute; left:16px; top:64px; margin:0; font:500 12px/1.3 var(--sans); }
.trap-ctr div{ display:flex; gap:10px; margin-bottom:5px; } .trap-ctr dt{ color:var(--muted); width:8.5ch; } .trap-ctr dd{ margin:0; font-weight:700; font-variant-numeric:tabular-nums; }
.trap-ctr .up{ color:var(--g); } .trap-ctr .dn{ color:var(--r); }
.trap .stamp{ position:absolute; left:16px; right:16px; bottom:14px; z-index:3; color:var(--w); pointer-events:none; }
@media (max-width:699.98px){ .trap-clock{ font-size:32px; } .trap-ctr{ top:50px; font-size:11px; } }
.trap-tl{ position:relative; margin:18px var(--gut) 0; height:30px; }
.trap-tl::before{ content:""; position:absolute; left:0; right:0; top:15px; height:2px; background:var(--line-hi); }
.trap-tl .seg{ position:absolute; top:13px; height:6px; border-radius:1px; }
.trap-tl .seg.b{ left:0; width:11.8%; background:var(--g); } .trap-tl .seg.s{ left:47.9%; right:0; background:var(--r); }
.trap-tl .ph{ position:absolute; left:0; top:4px; width:3px; height:24px; margin-left:-1px; background:var(--w); border-radius:1px; will-change:transform; }
.trap-tl .lb{ position:absolute; top:-8px; font:500 10px/1 var(--sans); color:var(--muted); white-space:nowrap; }
.trap-tl .l0{ left:0; } .trap-tl .l1{ left:47.9%; } .trap-tl .l2{ right:0; }
.replay{ position:absolute; right:var(--gut); top:84px; cursor:pointer; font:700 12px/1 var(--sans); padding:9px 12px; border-radius:8px;
  border:1px solid var(--line-hi); background:var(--raised); color:var(--w); transition:border-color .15s, transform .3s cubic-bezier(.3,1.8,.5,1); }
.replay:hover{ border-color:var(--w); transform:rotate(-3deg); }
.trap-stage.glitching{ animation:shake .36s steps(1,end); }
@keyframes shake{ 0%{ transform:translate3d(-8px,0,0); } 20%{ transform:translate3d(6px,0,0); } 40%{ transform:translate3d(-4px,0,0); } 60%{ transform:translate3d(3px,0,0); } 80%,100%{ transform:none; } }

/* the token card, in the app's V2 card (styles/v2-token-card.css): the name row, the Traders pill,
   the flow box, four green buys with the SOL mark and the pencil, four orange sells */
.tcard{ background:var(--card); border:1px solid var(--line-hi); border-radius:16px; padding:14px; align-self:start; font-family:var(--sans); box-shadow:0 12px 38px rgba(0,0,0,.45); }
.tc-head{ display:flex; gap:12px; align-items:center; margin-bottom:14px; }
.tc-logo{ flex:none; width:48px; height:48px; }
.tc-logo img{ width:48px; height:48px; border-radius:12px; display:block; object-fit:cover; background:#fff; }
.tc-id{ flex:1; min-width:0; }
.tc-name{ font-size:19px; line-height:24px; font-weight:700; } .tc-name span{ color:var(--muted); font-size:14px; font-weight:500; margin-left:2px; }
.tc-sub{ font-size:14px; line-height:20px; color:var(--muted); } .tc-sub b{ color:var(--w); font-weight:600; }
.tc-sub .up, .tc-bar .up{ color:var(--g); } .tc-sub .dn, .tc-bar .dn{ color:var(--r); }
.tc-pill{ display:inline-flex; align-items:center; gap:6px; height:30px; padding:0 12px; border-radius:999px; background:var(--raised); border:1px solid var(--line-hi); font-size:13px; color:var(--muted); margin-bottom:10px; }
.tc-pill i{ width:7px; height:7px; border-radius:50%; background:var(--g); }
.tc-pill b{ color:var(--w); font-weight:600; font-variant-numeric:tabular-nums; }
.tc-flowbox{ background:var(--card); border:1px solid rgba(203,208,235,.08); border-radius:12px; padding:10px 12px 4px; margin-bottom:12px; }
.tc-bar{ display:grid; grid-template-columns:auto minmax(30px,1fr) auto; gap:10px; align-items:center; font-size:13px; color:var(--muted); margin-bottom:8px; white-space:nowrap; font-variant-numeric:tabular-nums; }
.tc-bar b{ font-weight:600; color:var(--w); }
.pbar{ position:relative; height:4px; border-radius:2px; background:var(--r); overflow:hidden; }
.pbar b{ position:absolute; left:0; top:0; bottom:0; width:100%; background:var(--g); transform-origin:0 50%; transform:scaleX(1); transition:transform .25s; }
.tc-btns{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)) 46px; gap:8px; }
.tc-btns b{ display:flex; align-items:center; justify-content:center; height:42px; border-radius:10px; font-size:16px; font-weight:700; color:#fff;
  background:var(--g); transition:box-shadow .15s, transform .15s, filter .15s; white-space:nowrap; }
.tc-btns b .solm{ opacity:.8; }
.tc-edit{ display:flex; align-items:center; justify-content:center; height:42px; border-radius:10px; border:1px solid var(--line-hi); color:var(--w); }
.tc-edit svg{ width:16px; height:16px; fill:currentColor; }
.tc-btns.tc-sells{ grid-template-columns:repeat(4,minmax(0,1fr)); margin-top:12px; }
.tc-btns.tc-sells b{ height:38px; background:var(--r-soft); border:1px solid var(--r-line); color:var(--orange-t); font-size:15px; }
.tc-btns.hot b{ box-shadow:0 0 0 1px rgba(33,201,94,.6), 0 0 18px rgba(33,201,94,.4); filter:brightness(1.06); }
.tc-btns b.press{ transform:scale(.94); }
.tc-sells.hot b{ color:#fff; box-shadow:0 0 0 1px rgba(255,98,46,.6), 0 0 18px rgba(255,98,46,.3); }

/* ---- the feature sections: a slam, one line, the app's own UI -------------------------- */
.feat{ position:relative; background:var(--ink); padding:96px var(--gut) 104px; display:grid; grid-template-columns:minmax(0,1fr); gap:28px; overflow:hidden; }
@media (min-width:1000px){ .feat{ grid-template-columns:minmax(0, 5fr) minmax(0, 7fr); align-items:center; gap:48px; } }
.feat-copy .kin{ width:100%; }
.feat-line{ margin:22px 0 0; max-width:30em; font:600 clamp(14px, 1.4vw, 17px)/1.5 var(--sans); color:var(--soft); }
.feat-ui{ min-width:0; }
.ill{ margin-top:8px; font-size:10px; color:rgba(248,248,248,.35); text-align:right; }

/* the AI read, as the app's AI overview modal (styles/v2-token-card.css .tc-frame-ai) */
.ai-ui{ display:flex; justify-content:center; }
.mk{ width:min(460px, 100%); background:var(--card); border:1px solid var(--line-hi); border-radius:20px; box-shadow:0 24px 60px rgba(0,0,0,.6); font-family:var(--sans); overflow:hidden; }
.mk-head{ display:flex; align-items:center; gap:12px; padding:18px 16px 14px 20px; border-bottom:1px solid var(--line); }
.mk-badge{ width:40px; height:40px; flex:none; border-radius:50%; border:1.5px solid var(--p); color:var(--p); display:flex; align-items:center; justify-content:center; }
.mk-badge svg{ width:20px; height:20px; fill:currentColor; }
.mk-ttl{ flex:1; min-width:0; }
.mk-t{ display:block; font-size:19px; line-height:24px; font-weight:700; }
.mk-sub{ display:flex; align-items:center; gap:5px; font-size:14px; color:var(--muted); white-space:nowrap; overflow:hidden; }
.mk-sub b{ color:var(--w); font-weight:600; }
.mk-logo{ width:18px; height:18px; border-radius:5px; object-fit:cover; }
.mk-x{ width:36px; height:36px; flex:none; border-radius:50%; border:1px solid var(--line-hi); display:flex; align-items:center; justify-content:center; color:var(--muted); }
.mk-x svg{ width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:2.6; stroke-linecap:round; }
.mk-body{ padding:4px 20px 18px; }
.mk-score{ display:flex; align-items:center; gap:14px; padding:14px 0 6px; }
.mk-big{ font-size:52px; line-height:56px; font-weight:700; font-variant-numeric:tabular-nums; transition:color .4s; }
.mk-vw{ font-size:22px; font-weight:700; transition:color .4s; }
.mk-age{ font-size:13px; color:var(--muted); }
.mk.v-enter .mk-big, .mk.v-enter .mk-vw{ color:var(--g); }
.mk.v-skip .mk-big, .mk.v-skip .mk-vw{ color:var(--r); }
.mk-h{ display:flex; justify-content:space-between; margin-top:16px; font-size:12px; font-weight:700; letter-spacing:.04em; color:var(--muted); }
.mk-count{ color:var(--w); letter-spacing:0; font-variant-numeric:tabular-nums; }
.mk-signs{ list-style:none; margin:8px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:8px; }
.mk-signs li{ display:inline-flex; align-items:center; gap:7px; height:30px; padding:0 10px 0 9px; border-radius:999px; background:var(--raised); border:1px solid var(--line-hi);
  font-size:13px; color:var(--soft); opacity:.45; transition:opacity .4s, border-color .4s; }
.mk-signs li i{ width:7px; height:7px; border-radius:50%; background:var(--muted); flex:none; transition:background .4s; }
.mk-signs .v{ color:var(--muted); font-variant-numeric:tabular-nums; }
.mk-signs .v:empty{ display:none; }
.mk-signs li.ok, .mk-signs li.bad{ opacity:1; }
.mk-signs li.ok i{ background:var(--g); }
.mk-signs li.bad{ border-color:var(--r-line); } .mk-signs li.bad i{ background:var(--r); } .mk-signs li.bad .v{ color:var(--r); }
.mk-signs li.flip{ animation:flip .7s ease; }
@keyframes flip{ 0%{ transform:translateX(0); } 30%{ transform:translateX(-4px); } 60%{ transform:translateX(3px); } 100%{ transform:none; } }
.mk-foot{ margin-top:18px; padding-top:12px; border-top:1px solid var(--line); font-size:13px; color:var(--muted); }

/* the Feed (chrome/feed.ts: the composer and the posts) */
.fd-ui{ display:flex; justify-content:center; }
.fcol{ width:min(440px, 100%); }
.fc-box{ background:var(--card); border:1px solid var(--line); border-radius:14px; padding:14px 14px 12px; margin-bottom:10px; font-family:var(--sans); }
.fc-top{ display:flex; gap:12px; align-items:flex-start; }
.fc-face{ width:40px; height:40px; border-radius:50%; flex:none; image-rendering:pixelated; }
.fc-ta{ flex:1; min-width:0; min-height:40px; padding-top:9px; font-size:17px; line-height:22px; color:var(--w); white-space:pre-wrap; } .fc-ph{ color:var(--muted); }
.fc-ta .cur{ display:inline-block; width:2px; height:18px; background:var(--w); vertical-align:-3px; animation:blink 1s steps(1) infinite; }
@keyframes blink{ 50%{ opacity:0; } }
.fc-row{ display:flex; align-items:center; gap:8px; margin:10px 0 0 52px; }
.fc-chip{ display:inline-flex; align-items:center; gap:6px; height:34px; padding:0 12px; border-radius:999px; border:1px solid var(--line-hi); font-size:14px; font-weight:600; color:var(--w); }
.fc-chip svg{ width:15px; height:15px; fill:currentColor; }
.fc-chip.fc-ic{ width:34px; padding:0; justify-content:center; }
.fc-chip.fc-co{ color:var(--pink); }
.fc-post{ margin-left:auto; width:36px; height:36px; border-radius:50%; background:var(--g); color:#fff; display:flex; align-items:center; justify-content:center; flex:none; filter:brightness(.85); transition:filter .3s, transform .15s; }
.fc-post svg{ width:17px; height:17px; fill:currentColor; }
.fc-post.on{ filter:none; } .fc-post.press{ transform:scale(.9); }
.flist{ display:grid; gap:8px; }
.post{ background:var(--card); border:1px solid var(--line); border-radius:14px; padding:14px 16px; font-family:var(--sans); animation:postin .8s cubic-bezier(.3,1.4,.5,1) both; }
@keyframes postin{ from{ opacity:0; transform:translate3d(0,-10px,0); } to{ opacity:1; transform:none; } }
.post .ph{ display:flex; align-items:center; gap:8px; font-size:13px; }
.post .pf{ width:26px; height:26px; border-radius:50%; flex:none; image-rendering:pixelated; }
.post .ph b{ font-weight:700; } .post .ph .k{ font:600 12px/1 var(--sans); padding:4px 7px; border-radius:6px; background:var(--raised); color:var(--soft); }
.post .ph .k.you{ color:#fff; background:var(--g); }
.post .ph .k.co{ color:var(--pink); background:rgba(255,92,200,.12); }
.post .ph .t{ margin-left:auto; font:500 11px/1 var(--sans); color:var(--muted); }
.post .px{ margin:7px 0; font-size:14px; line-height:1.4; color:var(--soft); }
.post .pt{ display:flex; align-items:center; gap:8px; font:500 13px/1 var(--sans); color:var(--muted); }
.post .pt img{ width:22px; height:22px; border-radius:5px; object-fit:cover; }
.post .pt .sym{ color:var(--w); font-weight:700; }
.post .pt .mc b{ color:var(--w); }
.post .bb{ display:flex; gap:4px; margin-top:8px; } .post .bb b{ font:700 12px/1 var(--sans); padding:7px 10px; border-radius:8px; background:var(--g); color:#fff; white-space:nowrap; }

/* copy trading: the Copy page's tabs, the kit's trader row (kit/rows.ts traderRow), copied buys as the Feed's posts */
.cp-ui{ display:flex; justify-content:center; }
.cp-board{ background:var(--card); border:1px solid var(--line); border-radius:16px; padding:0 14px 2px; margin-bottom:10px; font-family:var(--sans); }
.cp-tabs{ display:flex; align-items:flex-end; gap:20px; border-bottom:1px solid var(--line); font-size:16px; font-weight:600; color:var(--muted); }
.cp-tabs span{ padding:14px 0 11px; border-bottom:2px solid transparent; margin-bottom:-1px; }
.cp-tabs span.on{ color:var(--w); border-color:var(--w); }
.cp-tabs em{ margin-left:auto; padding-bottom:13px; font-style:normal; font-size:12px; font-weight:500; }
.cp-row{ display:flex; align-items:center; gap:10px; padding:11px 0; border-bottom:1px solid var(--line); font-size:15px; }
.cp-row:last-child{ border-bottom:0; }
.cp-row .rk{ width:24px; flex:none; font-size:14px; font-weight:700; color:var(--muted); }
.cp-row:first-of-type .rk{ color:var(--g); }
.cp-row .pf{ width:36px; height:36px; border-radius:50%; flex:none; }
.cp-row .nm{ font-weight:700; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cp-row .nm small{ display:block; font-size:12px; font-weight:500; color:var(--muted); overflow:hidden; text-overflow:ellipsis; }
.cp-row .pl{ margin-left:auto; font-size:15px; font-weight:700; color:var(--g); white-space:nowrap; text-align:right; font-variant-numeric:tabular-nums; }
.cp-row .pl small{ display:block; font-size:11px; font-weight:500; color:var(--muted); }
.cp-go{ display:inline-flex; align-items:center; justify-content:center; gap:6px; font:600 14px/1 var(--sans); height:36px; padding:0 12px; border-radius:10px; border:1px solid var(--line-hi);
  color:var(--w); background:transparent; flex:none; min-width:68px; transition:background .25s, border-color .25s, color .25s, transform .15s; }
.cp-go svg{ width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round; }
.cp-go.on{ border-color:var(--g-line); color:var(--g); background:var(--g-soft); min-width:104px; } .cp-go.press{ transform:scale(.92); }
.cp-mine{ display:flex; justify-content:space-between; align-items:center; padding:2px 2px 8px; font:600 14px/1 var(--sans); }
.cp-mine b{ font-size:12px; font-weight:500; color:var(--muted); }
.post.cp-buy .ph .k{ color:#fff; background:var(--g); border-color:var(--g); }
.post.cp-buy .pt .you{ margin-left:auto; color:var(--w); }

/* launches (narrative/LaunchLane.tsx) */
.ln-stage{ position:relative; height:min(60vh, 520px); min-height:340px; border-radius:12px; overflow:hidden; background:#060510; }
.ln-stage .cv, .sn-stage .cv, .fl-stage .cv, .xp .cv{ position:absolute; inset:0; width:100%; height:100%; display:block; }


/* snipe: the canvas, Discover's toolbar, My snipes, the exit plan */
.sn-ui{ display:grid; gap:14px; }
@media (min-width:800px){ .sn-ui{ grid-template-columns:minmax(0,1fr) 320px; } }
.sn-stage{ position:relative; height:min(56vh, 480px); min-height:340px; border-radius:12px; overflow:hidden; background:#060510; }
.dock{ position:absolute; left:50%; bottom:12px; transform:translateX(-50%); display:flex; gap:6px; white-space:nowrap; font:600 13px/1 var(--sans); max-width:calc(100% - 16px); }
.dk{ display:inline-flex; align-items:center; gap:8px; height:36px; padding:0 12px; border-radius:999px; background:rgba(18,17,26,.94); border:1px solid var(--line-hi); color:var(--soft); }
.dk svg{ width:15px; height:15px; fill:currentColor; flex:none; }
.dk-seg{ padding:0 3px; gap:2px; } .dk-seg i{ display:flex; align-items:center; padding:0 10px; height:28px; border-radius:999px; color:var(--muted); } .dk-seg i.on{ background:rgba(248,248,248,.1); color:#fff; }
.dk-ic{ width:36px; padding:0; justify-content:center; }
.dk-amt{ color:#fff; gap:2px; } .dk-amt .dk-chev{ width:13px; height:13px; fill:none; stroke:currentColor; stroke-width:2.6; stroke-linecap:round; margin-left:4px; color:var(--muted); }
.sw{ position:relative; display:inline-block; width:34px; height:20px; border-radius:10px; background:rgba(203,208,235,.18); transition:background .3s; flex:none; }
.sw::after{ content:""; position:absolute; left:3px; top:3px; width:14px; height:14px; border-radius:50%; background:var(--soft); transition:transform .3s cubic-bezier(.3,1.6,.5,1), background .3s; }
.on > .sw, .on .snp-t > .sw{ background:var(--g); } .on > .sw::after, .on .snp-t > .sw::after{ transform:translateX(14px); background:#fff; }
.dk.on{ border-color:var(--g-line); color:#fff; }
@media (max-width:699.98px){ .dock{ font-size:12px; } .dk{ padding:0 9px; gap:6px; height:32px; } .dk-ic{ width:32px; } .dk-seg i{ padding:0 7px; height:24px; } }
.sn-cursor{ position:absolute; left:0; top:0; width:18px; height:18px; pointer-events:none; opacity:0; will-change:transform;
  background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M4 2l15 11-7 1-4 7z' fill='white' stroke='%23060510' stroke-width='1.5'/></svg>") center/contain no-repeat; transition:opacity .3s; }
.sn-toast{ position:absolute; left:50%; top:14px; transform:translate(-50%,-8px); padding:10px 14px; border-radius:12px; background:var(--card); border:1px solid var(--line-hi); font:600 14px/1 var(--sans); opacity:0; transition:opacity .4s, transform .4s; white-space:nowrap; }
.sn-toast.on{ opacity:1; transform:translate(-50%,0); } .sn-toast b{ color:var(--g); }
.sn-side{ display:flex; flex-direction:column; gap:12px; min-width:0; }
.snp{ background:var(--card); border:1px solid var(--line); border-radius:16px; padding:12px 14px 4px; font-family:var(--sans); }
.snp-h{ display:flex; align-items:baseline; gap:8px; padding-bottom:10px; border-bottom:1px solid var(--line); }
.snp-h b{ font-size:18px; } .snp-h span{ font-size:13px; color:var(--muted); }
.snp-r{ padding:10px 0; border-bottom:1px solid var(--line); }
.snp-r:last-child{ border-bottom:0; }
.snp-t{ display:flex; align-items:center; gap:8px; font-size:15px; }
.snp-t .sw{ margin-left:auto; }
.snp-pill{ font-size:11px; font-weight:600; padding:3px 7px; border-radius:6px; background:var(--raised); color:var(--muted); transition:background .3s, color .3s; }
.snp-r.on .snp-pill{ background:var(--g-soft); color:var(--g); }
.snp-w{ margin-top:3px; font-size:12px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.snp-c{ display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; }
.snp-c span{ display:inline-flex; align-items:center; gap:4px; height:28px; padding:0 9px; border-radius:8px; border:1px solid var(--line-hi); font-size:13px; font-weight:600; white-space:nowrap; font-variant-numeric:tabular-nums; }
.snp-c .up{ color:var(--g); } .snp-c .dn{ color:var(--r); }
.snp-c svg{ width:13px; height:13px; fill:currentColor; }
.snp-c .solm{ width:min(.46em, 12px); height:min(.4em, 10px); }
.xp{ position:relative; background:var(--card); border:1px solid var(--line); border-radius:16px; padding:10px 12px 8px; min-height:190px; display:flex; flex-direction:column; flex:1; }
.xp .cv{ position:relative; flex:1; min-height:140px; }
.xp-h{ display:flex; justify-content:space-between; font:600 14px/1 var(--sans); margin-bottom:6px; }
.xp-h b{ font-size:14px; color:var(--g); font-variant-numeric:tabular-nums; }

/* filters: the Filters popup (chrome/filters.ts, chrome/filtersShort.ts) */
.fl-ui{ display:grid; gap:14px; }
@media (min-width:800px){ .fl-ui{ grid-template-columns:340px minmax(0,1fr); } }
.fp{ background:var(--card); border-radius:20px; border:1px solid var(--line-hi); padding:14px 16px 12px; font:500 14px/1.3 var(--sans); }
.fp-top{ display:flex; align-items:baseline; gap:10px; padding-bottom:10px; border-bottom:1px solid var(--line); }
.fp-top b{ font-size:19px; } .fp-on{ font-size:13px; color:var(--muted); } .fp-on.live{ color:var(--g); }
.fp-k{ margin:12px 0 7px; font-size:14px; font-weight:700; } .fp-k em{ font-style:normal; transition:color .3s; }
.fp-chips{ display:flex; flex-wrap:wrap; gap:6px; }
.fp-chips span{ height:30px; display:inline-flex; align-items:center; padding:0 11px; border-radius:999px; border:1px solid var(--line-hi); font-size:13px; font-weight:600; color:var(--soft); transition:border-color .3s, color .3s, background .3s; }
.fp-chips span.on{ border-color:var(--g); color:#fff; box-shadow:inset 0 0 0 1px var(--g); }
.fp-tg{ display:flex; justify-content:space-between; align-items:center; margin-top:12px; font-size:14px; font-weight:600; }
.fp-sl{ padding:2px 0; }
.fp-track{ position:relative; display:block; height:4px; border-radius:2px; background:var(--line-hi); margin:8px 7px; }
.fp-track b{ position:absolute; top:0; bottom:0; left:0; right:0; border-radius:2px; background:var(--p); transition:left .5s, right .5s; }
.fp-track b::before, .fp-track b::after{ content:""; position:absolute; top:50%; width:14px; height:14px; margin-top:-7px; border-radius:50%; background:#fff; }
.fp-track b::before{ left:-7px; } .fp-track b::after{ right:-7px; }
.fp-sl.on .fp-track b{ left:0; right:56%; }
.fp-ax{ display:flex; justify-content:space-between; font-size:11px; color:var(--muted); }
.fp-more{ display:flex; align-items:center; gap:4px; margin-top:12px; font-size:14px; font-weight:700; }
.fp-more svg{ width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:2.6; stroke-linecap:round; }
.fp-foot{ display:flex; justify-content:space-between; align-items:center; margin-top:12px; padding-top:10px; border-top:1px solid var(--line); font-size:13px; color:var(--muted); }
.fp-foot b{ color:var(--w); } .fp-foot i{ font-style:normal; font-weight:600; color:var(--w); padding:7px 12px; border-radius:10px; border:1px solid var(--line-hi); }
.fl-stage{ position:relative; min-height:340px; border-radius:12px; overflow:hidden; background:#060510; }

/* get paid: the Rewards page's cards (chrome/v2/rewards.ts, styles/v2-rewards.css) */
.gp-ui{ display:flex; justify-content:center; }
.gp-amb{ color:var(--muted); }
.gp-dm{ color:var(--w); text-decoration:none; border-bottom:1px solid rgba(210,137,226,.7); padding-bottom:1px; margin-left:4px; }
.gp-dm:hover{ color:#fff; border-color:#fff; }
.rw{ width:min(440px, 100%); font-family:var(--sans); }
.rw-card{ background:var(--card); border-radius:16px; border:1px solid var(--line); padding:24px; margin-bottom:12px; }
.rw-ch{ display:flex; align-items:center; gap:10px; }
.rw-h{ font-size:20px; font-weight:700; }
.rw-ico{ width:36px; height:36px; flex:none; border-radius:10px; display:flex; align-items:center; justify-content:center; }
.rw-ico svg{ width:18px; height:18px; fill:currentColor; }
.rw-ico.up{ background:var(--g-soft); color:var(--g); } .rw-ico.ac{ background:var(--p-soft); color:var(--p); }
.rw-pill{ margin-left:auto; font-size:12px; font-weight:600; padding:4px 8px; border-radius:6px; color:var(--p); background:var(--p-soft); transition:all .3s; }
.rw-hero{ display:flex; align-items:baseline; margin-top:14px; font-size:40px; font-weight:700; letter-spacing:-.02em; }
.rw-big{ font-variant-numeric:tabular-nums; }
.rw-state{ margin-left:10px; font-size:14px; font-weight:600; letter-spacing:0; color:var(--g); }
.rw-why{ margin:6px 0 0; font-size:15px; line-height:22px; color:var(--soft); }
.rw-btn{ display:flex; align-items:center; justify-content:center; gap:8px; margin-top:14px; height:46px; font-size:16px; font-weight:700; border-radius:12px; background:var(--g); color:#fff; transition:transform .15s; }
.rw-btn.press{ transform:scale(.97); }
.rw-btn svg{ width:16px; height:16px; fill:currentColor; }
.rw-share{ margin:12px 0 0; font-size:15px; line-height:22px; color:var(--soft); } .rw-share b{ color:var(--w); }
.rw-tiers{ display:grid; grid-template-columns:repeat(3,1fr); gap:6px; margin-top:12px; }
.rw-tiers span{ padding:6px 8px; border-radius:8px; border:1px solid var(--line); color:var(--muted); font-size:12px; transition:all .4s; }
.rw-tiers b{ display:block; font-size:16px; color:var(--muted); transition:color .4s; }
.rw-tiers span.on{ border-color:rgba(210,137,226,.45); background:var(--p-soft); } .rw-tiers span.on b{ color:var(--p); }
.rw-bar{ margin-top:10px; height:8px; border-radius:999px; background:var(--raised); overflow:hidden; }
.rw-bar i{ display:block; height:100%; border-radius:999px; background:var(--p); transform-origin:0 50%; transform:scaleX(0); transition:transform .5s; }
.rw-linkrow{ display:flex; gap:8px; margin-top:14px; }
.rw-linkf{ flex:1; min-width:0; height:46px; display:flex; align-items:center; padding:0 12px; border-radius:12px; border:1px solid var(--line-hi); font-size:14px; color:var(--soft); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.rw-linkrow .rw-btn{ margin-top:0; padding:0 14px; flex:none; font-size:15px; }
.rw-earned{ margin-top:12px; font-size:14px; color:var(--muted); } .rw-earned b{ color:var(--w); font-variant-numeric:tabular-nums; }

/* ---- 2. the herd ------------------------------------------------------------------- */
.herd{ position:relative; min-height:100vh; min-height:100svh; overflow:hidden; background:var(--ink); display:flex; align-items:center; }
.herd .cv{ position:absolute; inset:0; width:100%; height:100%; display:block; touch-action:pan-y; }
.herd-fg{ position:relative; z-index:2; pointer-events:none; width:min(54%, 760px); padding:120px 0 90px var(--gut); pointer-events:none; }
.herd-h .ln:nth-child(2){ color:rgba(248,248,248,.3); }
.herd-h .ln:nth-child(3), .herd-h .ln:nth-child(4){ color:var(--g); }
.herd-s{ margin:26px 0 0; font:600 15px/1.45 var(--sans); color:var(--w); }
@media (max-width:699.98px){
  .herd{ align-items:flex-start; }
  .herd-fg{ width:100%; padding:96px var(--gut) 0; }
  .herd-s{ font-size:13px; }
}

/* ---- the wallet card: the app's new wallet card (chrome/walletCard.ts walletCardHtml, styles/v2-wallet-card.css,
   kit.css .kit-chead and .kit-trow): 420 wide, 18 inside, radius 16, the raised fill and a violet hairline; the
   head with the face, the name and its tag, the cluster under it; three stat tiles; the week in one line; the
   last trades as the kit's token rows; the source line ------------------------------------------------- */
.kcard{ position:fixed; left:0; top:0; z-index:200; width:420px; max-width:calc(100vw - 24px); background:var(--card); border:1px solid rgba(210,137,226,.40);
  border-radius:16px; padding:18px; display:flex; flex-direction:column; gap:14px; box-shadow:0 24px 60px rgba(0,0,0,.65); color:var(--w); font-family:var(--sans); pointer-events:none; }
.kcard[hidden]{ display:none; }
.kc-head{ display:flex; align-items:center; gap:10px; min-width:0; }
.kc-pfp{ width:44px; height:44px; border-radius:50%; flex:none; background:var(--raised) center/cover no-repeat; }
.kc-pfp.gen{ image-rendering:pixelated; }
.kc-id{ flex:1 1 auto; min-width:0; }
.kc-name{ display:flex; align-items:center; gap:7px; font-size:18px; line-height:22px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.kc-tag{ height:20px; display:inline-flex; align-items:center; padding:0 7px; border-radius:6px; background:var(--raised); font-size:12px; font-weight:600; color:var(--soft); }
.kc-sub{ margin-top:2px; font-size:13px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.kc-stats{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:10px; }
.kc-k{ font-size:12px; color:var(--muted); }
.kc-v{ font-size:18px; font-weight:700; line-height:24px; white-space:nowrap; }
.kc-s{ font-size:12px; color:var(--muted); }
.kc-v.up, .kc-row .up, .kc-week .up{ color:var(--g); } .kc-v.dn, .kc-row .dn, .kc-week .dn{ color:var(--r); }
.kc-week{ padding:12px; border-radius:10px; background:var(--raised); font-size:14px; line-height:20px; color:var(--soft); }
.kc-week b{ font-weight:600; color:var(--w); }
.kc-h{ font-size:14px; font-weight:700; margin-bottom:2px; } .kc-h span{ font-weight:400; color:var(--muted); }
.kc-row{ height:46px; display:flex; align-items:center; gap:12px; border-bottom:1px solid var(--line); }
.kc-row:last-child{ border-bottom:0; }
.kc-tile{ width:32px; height:32px; flex:none; border-radius:18%; background:var(--tile-blank) center/cover no-repeat; display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:700; color:var(--w); }
.kc-main{ flex:1; min-width:0; }
.kc-sym{ font-size:15px; font-weight:600; line-height:19px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.kc-side{ font-size:13px; line-height:17px; }
.kc-amt{ text-align:right; flex:none; }
.kc-amt > div:first-child{ font-size:15px; font-weight:600; }
.kc-amt > div:last-child{ font-size:12px; color:var(--muted); }
.kc-as{ font-size:12px; line-height:16px; color:var(--muted); }

/* ---- the last scene ---------------------------------------------------------------- */
.final{ min-height:100vh; min-height:100svh; display:flex; }
.final-fg{ position:relative; z-index:3; width:100%; display:flex; flex-direction:column; align-items:flex-start;
  padding:max(96px, calc(env(safe-area-inset-top) + 72px)) var(--gut) max(20px, env(safe-area-inset-bottom)); }
.final .kin{ width:100%; text-shadow:0 6px 50px rgba(6,5,16,.6); }
.final .lfg{ margin-top:28px; }
.foot{ margin:auto 0 0; padding-top:44px; width:100%; display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap;
  font:500 11px/1.4 var(--sans); color:rgba(248,248,248,.55); }

/* ---- reduced motion: everything shown in its finished state ------------------------- */
@media (prefers-reduced-motion: reduce){
  .grain-on .media::after{ animation:none; }
}

/* The illustration note sits under the section's line, quiet and borderless (Kevin, 2026-10-08:
   "remove the borders on the illustration and dont put the label in the bottom right corner"). */
.ill-note{ margin:10px 0 0; font-size:10px; color:rgba(248,248,248,.35); letter-spacing:.04em; }

/* Kevin, 2026-10-08: the logo top left reads "🍆 clusterfuk.fun" with ".fun" in green. */
.mark .tld{ color:var(--g); }
.mark .z{ color:#8545b5; }

/* POWERED BY CARBIUM under the name (Ukko, 2026-10-09): the words small and
   spaced, then Carbium's mark in its own white and yellow. The name and this
   line are one column, and past the hero the ink plate sits behind both.
   CENTRED UNDER "clusterfuk.fun" (Ukko, 2026-10-10), not under the whole mark:
   the eggplant takes a fixed 1.5em (24px at the mark's 16px) whatever the
   platform's emoji is, so the word's centre is always 12px right of the
   mark's, and a 24px left margin on the centred line moves its centre the
   same 12px, however wide the word renders. */
.mark .egg{ display:inline-block; width:1.25em; height:1em; object-fit:contain; vertical-align:-.12em; transform:scale(1.4); margin-right:.25em; }
.brandcol{ display:flex; flex-direction:column; align-items:center; margin-left:-10px; border-radius:8px; transition:background-color .2s; }
.brandcol .mark{ margin-left:0; }
.bar.plate .brandcol{ background:var(--ink); }
.bar.plate .brandcol .mark{ background:none; }
.powered{ display:inline-flex; align-items:center; gap:7px; padding:0 10px 8px; margin:-2px 0 0 24px;
  font:600 10px/1 var(--sans); letter-spacing:.14em; text-transform:uppercase; color:rgba(248,248,248,.62);
  text-decoration:none; text-shadow:0 2px 14px rgba(0,0,0,.65); transition:color .2s; }
.powered:hover, .powered:focus-visible{ color:#fff; }
.powered img{ display:block; height:13px; width:auto; }
.bar.plate .powered{ text-shadow:none; }

/* THE GAP UNDER THE STRIPS IS ORANGE (Kevin, 2026-10-08: "fill in the black area
   after the strips and before the orange with orange"): an orange sheet at the
   white strip's own tilt, behind it, running into the first slab below. */
.bands::after{ content:""; position:absolute; left:-6%; right:-6%; top:92px; bottom:-60px; background:var(--r); transform:rotate(2.2deg); z-index:0; }
@media (max-width:699.98px){ .bands::after{ top:72px; } }

/* The feature's name over its headline, in the app's green (Kevin, 2026-10-08:
   "put feature label text just above each headline for each feature section"). */
.feat-label{ margin:0 0 10px; font:500 clamp(18px, 2.1vw, 28px)/1.1 var(--sans); letter-spacing:-.01em; color:var(--g); }
/* The SOL unit sign: the Solana mark in its text colour (Kevin, 2026-10-09),
   drawn as the app draws it (app/src/styles/cluster.css sol-m): after the
   number, .54em tall (three quarters of the cap height), 101:88, .08em off the
   baseline, a .2em gap before it, at .55 opacity (Kevin, 2026-10-11: "after
   the number and smaller and a bit greyed out ... consistency is important").
   tests/sol-mark.mjs checks the two pages measure the same. */
.solm-defs{ position:absolute; width:0; height:0; overflow:hidden; }
/* the app's mark (cluster.css sol-m, Kevin 10-23 "even smaller still"): .46 x .40 of the text, at most 12 x 10 px */
.solm{ display:inline-block; width:min(.46em, 12px); height:min(.4em, 10px); margin:0 0 0 min(.18em, 5px); vertical-align:min(.1em, 2px); fill:currentColor; opacity:.55; flex:0 0 auto; }
/* Not an amount's unit: the Snipe mode switch's icon in front of its label,
   at the label's cap height and full strength. */
.solm.icon{ width:.826em; height:.72em; margin:0; vertical-align:baseline; opacity:1; }

/* ---- questions: the page's facts as plain answers (Ukko, 2026-10-18) ------------------- */
.faq{ position:relative; overflow:hidden; background:var(--ink); padding:96px var(--gut) 104px; display:grid; grid-template-columns:minmax(0,1fr); gap:28px; }
@media (min-width:1000px){ .faq{ grid-template-columns:minmax(0, 5fr) minmax(0, 7fr); align-items:start; gap:48px; } .faq .feat-copy{ position:sticky; top:96px; } }
.faq-list{ min-width:0; }
.qa{ border-top:1px solid var(--line); }
.qa:last-child{ border-bottom:1px solid var(--line); }
.qa summary{ list-style:none; cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:16px; padding:20px 0; }
.qa summary::-webkit-details-marker{ display:none; }
.qa summary::after{ content:"+"; flex:none; font:600 22px/1 var(--sans); color:var(--g); }
.qa[open] summary::after{ content:"\2212"; }
.qa summary:focus-visible{ outline:2px solid var(--g); outline-offset:4px; border-radius:4px; }
.qa h3{ margin:0; font:500 clamp(17px, 1.8vw, 22px)/1.3 var(--sans); letter-spacing:-.01em; color:var(--w); }
.qa p{ margin:0 0 22px; max-width:46em; font:500 clamp(14px, 1.3vw, 16px)/1.6 var(--sans); color:var(--soft); }

/* ---- 2026-10-19: LFG beside the headline, the questions under the last scene ---------- */
.wire-fg{ flex-direction:row; flex-wrap:wrap; align-items:flex-end; }
.to-faq{ align-self:center; margin-top:auto; padding-top:44px; display:inline-flex; flex-direction:column; align-items:center; gap:2px;
  font:500 12px/1.4 var(--sans); letter-spacing:.12em; color:rgba(248,248,248,.45); text-decoration:none; }
.to-faq svg{ width:18px; height:18px; }
.to-faq:hover, .to-faq:focus-visible{ color:rgba(248,248,248,.8); }
.faq{ padding-bottom:max(20px, env(safe-area-inset-bottom)); }
.faq .foot{ margin-top:60px; }

/* ---- 2026-10-19: Trade Now in the first screen's top right corner (Kevin), level with the logo ---- */
.wire-lfg{ position:absolute; z-index:5; top:max(12px, env(safe-area-inset-top)); right:var(--gut); }

/* ---- 2026-10-22: a section far off screen is not painted (Kevin: "why is background cluster in hero so slow
   and clunky"). The hero's live graph repaints every frame, and each repaint re-layerized the whole long page
   (22% of the main thread at 4x CPU); a section out of view now skips its paint until it comes near. ---- */
.herd, .trap, .feat, .faq, .final{ content-visibility:auto; contain-intrinsic-size:auto 900px; }