/* StockAgent — trading-floor dashboard skin (v0.7)
   Loaded AFTER style.css: it re-skins the shell into a dense, full-height terminal.
   Palette and component names from style.css are kept, only the surface changes. */

:root{
  --bg:#080808; --bg2:#0b0b0c; --panel:#0e0f10; --panel2:#131415; --hd:#17181a;
  --line:rgba(255,255,255,.10); --line2:rgba(255,255,255,.17);
  --amber:#86f5b8; --amber-d:#1d6b45;
  --cyan:#00ff88; --cyan-d:#12b567;
  --green:#22e884; --red:#ff5d73; --vio:#cfd6dd;
  --txt:#a8a8a8; --dim:#6e6e6e; --bright:#f0f0f0;
  --r-sm:6px; --r-md:11px;
  --topbar-h:44px; --ticker-h:26px; --status-h:26px;
}
body{
  font-size:12.5px;
  background-image:
    radial-gradient(900px 420px at 50% -18%, rgba(0,255,136,.055), transparent 72%),
    repeating-linear-gradient(0deg, rgba(255,255,255,.010) 0 1px, transparent 1px 4px);
  padding-bottom:calc(var(--status-h) + 4px);
}
body:before{background:radial-gradient(circle at 50% 35%, transparent 62%, rgba(0,0,0,.5) 100%)}
.wrap{max-width:none;padding:0 10px}
/* brand variants: lime = the platform accent, gold = the contract/coins */
.lime{color:var(--cyan)} .gold{color:var(--amber)}

/* ---------- top bar: command strip ---------- */
.topbar-in{height:var(--topbar-h);gap:10px}
.logo{font-size:13px;letter-spacing:2px}
.chain-badge{
  display:inline-flex;align-items:center;gap:6px;padding:3px 8px;white-space:nowrap;
  border:1px solid var(--amber-d);background:rgba(134,245,184,.07);color:var(--amber);
  font-size:9.5px;letter-spacing:1.2px;text-transform:uppercase;
}
.chain-badge:hover{background:rgba(134,245,184,.14);color:#a9f7c9}
.chain-badge .cb-k{color:var(--dim);letter-spacing:.6px}
.chain-badge b{color:var(--bright)}
.tb-mid{font-size:10px;letter-spacing:.4px}
.tb-right{font-size:10px}

/* ---------- ticker tape ---------- */
.ticker{position:sticky;top:var(--topbar-h);z-index:19;height:var(--ticker-h);background:rgba(9,12,17,.96)}
.ticker-live,.tape-src{padding:3px 9px;font-size:9.5px;letter-spacing:1.1px}
.tape{font-size:10.5px}
.tape-track{gap:18px;padding:3px 0}

/* ---------- rail: icon strip ---------- */
.dash-shell{grid-template-columns:72px minmax(0,1fr);gap:8px;height:calc(100vh - var(--topbar-h) - var(--ticker-h) - var(--status-h) - 6px)}
.ic-rail{gap:6px;min-height:0;overflow-y:auto}
/* The rail is the app's main navigation on a phone, so the tiles are sized as tap targets (>=56 px), not as
   a legend: icon 20 px, label 10 px, an idle border and a hover/active glow that makes the current view obvious. */
.ic-rail a{flex-direction:column;justify-content:center;align-items:center;gap:3px;padding:10px 4px;min-height:58px;position:relative;
  font-size:10px;border-color:var(--line2);transition:border-color .12s,background .12s,color .12s}
.ic-rail a i{font-style:normal;font-size:20px;line-height:1;color:var(--txt)}
.ic-rail a span{font-size:10px;letter-spacing:.6px;color:var(--dim)}
.ic-rail a:hover{border-color:var(--cyan-d);background:var(--hd)}
.ic-rail a:hover i{color:var(--cyan)}
.ic-rail a.on{border-color:var(--cyan);box-shadow:inset 3px 0 0 var(--cyan),0 0 12px -5px var(--cyan)}
.ic-rail a.on i{color:var(--cyan)}
.ic-rail a.on span{color:var(--bright)}
.ic-rail .ic-n{position:absolute;top:5px;right:7px;color:var(--amber);font-size:11px;font-weight:700}

/* ---------- the floor view fills the screen ---------- */
#view{min-width:0;display:flex;flex-direction:column}
#view.dash{min-height:0;overflow:hidden}
.d-floor{flex:1;min-height:0;overflow:hidden;grid-template-columns:minmax(0,1fr) 336px;gap:8px;align-items:stretch}
.d-floor.drawer-open{grid-template-columns:minmax(0,1fr) 430px}
.d-floor .panel{margin-bottom:0}
.d-stage{display:flex;flex-direction:column;min-height:0}
.d-stage .canvas-hold{flex:1;height:auto;min-height:280px}
.d-side{display:flex;flex-direction:column;gap:6px;min-height:0}
.d-side .panel{display:flex;flex-direction:column;min-height:0}
#sidePanels{display:flex;flex-direction:column;gap:6px;min-height:0;flex:1;overflow:hidden}
#sidePanels>.panel{margin-bottom:0;flex:0 0 auto}
#sidePanels>.panel.d-lb{flex:1 1 0;min-height:132px}
#sidePanels>.panel.d-feed{flex:1.4 1 0;min-height:150px}
.d-floor.drawer-open #sidePanels{display:none}
.d-floor #agDrawer{flex:1;min-height:0}
.d-floor #agDrawer .dr-body{flex:1;max-height:none}

/* the payment-contract panel was removed from the dashboard on the owner's request
   (address, network/owner/treasury/unit-price meta and the explorer link are no longer surfaced) */
.d-link{display:inline-block;margin-top:6px;font-size:9.5px;letter-spacing:1.1px;text-transform:uppercase;color:var(--cyan)}
.d-link:hover{color:var(--bright)}

/* dense key/value rows (never a table: these are label + value pairs) */
.d-kv{display:grid;grid-template-columns:auto minmax(0,1fr);gap:3px 8px;font-size:10.5px;align-items:baseline}
.d-kv .k{color:var(--dim);letter-spacing:.8px;text-transform:uppercase;font-size:9.5px;white-space:nowrap}
.d-kv .v{color:var(--txt);text-align:right;min-width:0;overflow-wrap:anywhere}
.d-kv .v b{color:var(--bright);font-weight:600}
.d-kv-2{grid-template-columns:auto minmax(0,1fr) auto minmax(0,1fr)}
.d-grid2{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.d-cell{border:1px solid var(--line);background:var(--panel2);padding:6px 7px}
.d-cell .k{font-size:8.5px;letter-spacing:1px;text-transform:uppercase;color:var(--dim)}
.d-cell .v{font-size:14px;color:var(--bright);line-height:1.25;margin-top:2px}
.d-cell .v.mid{font-size:11px}
.d-chip{
  display:inline-block;border:1px solid var(--line2);background:var(--panel2);color:var(--dim);
  font-size:9px;letter-spacing:1px;text-transform:uppercase;padding:2px 6px;margin-left:6px;
}
.d-chip.cy{color:var(--cyan);border-color:var(--cyan-d)}
.d-chip.am{color:var(--amber);border-color:var(--amber-d)}

/* ---------- right column lists: dense ---------- */
.d-side .lb-row{grid-template-columns:16px 22px minmax(0,1fr) 58px;gap:6px;padding:4px 7px;font-size:10.5px}
.d-side .lb-row img{width:18px;height:18px}
.d-side .panel .feed{flex:1;min-height:0;max-height:none}
#lbList{flex:1;min-height:0;overflow:auto;max-height:none}
.d-side .feed{min-height:130px}
.d-side .feed .row{padding:4px 8px;font-size:10.5px}
.d-side .panel>.pb{padding:8px 9px}

/* ---------- leaderboard: the full-height board ---------- */
/* The page owns the viewport (go() adds .dash for #/leaderboard too); the rows share the height
   (--lb-row-h is set in paintLeaderboard), so 13 agents fill the screen instead of a third of it. */
.lb-page{flex:1;min-height:0;display:flex;flex-direction:column}
.lb-page>.pb{flex:1;min-height:0;display:flex;flex-direction:column}
.lb-page>.pb>.lbfilters{flex:0 0 auto}
#lbTable{flex:1;min-height:0;overflow:auto;display:flex;flex-direction:column}
.lb-line{min-height:var(--lb-row-h,60px);gap:12px;row-gap:3px;padding:9px 16px;font-size:12.5px}
.lb-line .lb-rank{width:30px;flex:0 0 30px;font-size:13px}
.lb-line img.sprite{width:26px;height:26px}
.lb-line .lb-name{flex:1 1 auto;min-width:0;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lb-line .lb-metric{font-size:18px;min-width:124px;letter-spacing:0}
.lb-line .lb-sub{flex:1 1 100%;padding-left:44px;display:flex;gap:20px;flex-wrap:wrap;align-items:baseline;font-size:11.5px}

/* ---------- bottom status bar ---------- */
.statusbar{
  position:fixed;left:0;right:0;bottom:0;z-index:25;height:var(--status-h);
  background:rgba(6,9,13,.97);border-top:1px solid var(--line2);backdrop-filter:blur(6px);
}
.sb-in{display:flex;align-items:center;gap:0;height:var(--status-h);font-size:9.5px;letter-spacing:1px;text-transform:uppercase;color:var(--dim);overflow:hidden}
.sb-i{padding:0 10px;border-right:1px solid var(--line);white-space:nowrap}
.sb-i b{color:var(--bright);font-weight:600}
.sb-i:first-child{padding-left:0}
.sb-sp{flex:1}

/* ---------- other pages keep working in the dense shell ---------- */
#view>.panel,#view>.boot{min-width:0}
/* dictionary-style tables in a panel body: wrap the prose instead of running 2.5 screens wide */
.pb>.tbl{width:100%;table-layout:fixed}
.pb>.tbl td{white-space:normal;overflow-wrap:anywhere;vertical-align:top}
.pb>.tbl td:first-child{width:132px;white-space:nowrap;overflow-wrap:normal}
.footer{margin-top:10px;padding:9px 0;font-size:10px}

/* ---------- narrow screens: fall back to a single column ---------- */
@media(max-width:1180px){
  .dash-shell{height:auto}
  .d-floor,.d-floor.drawer-open{grid-template-columns:minmax(0,1fr);align-items:start}
  .d-stage .canvas-hold{height:clamp(320px,52vh,520px)}
  #sidePanels,#agDrawer{overflow:visible}
  .d-side .panel .feed{max-height:280px}
  .statusbar{position:static;height:auto}
  .sb-in{flex-wrap:wrap;height:auto;padding:5px 0;gap:5px 0}
  .sb-sp{display:none}
  body{padding-bottom:0}
}
@media(max-width:760px){
  .ic-rail{flex-direction:row;flex-wrap:wrap;gap:6px}
  /* 5 tiles per row: 5 x (20% - 6px) + gaps fits the viewport exactly, so the rail never causes a sideways scroll */
  .ic-rail a{flex:0 0 auto;width:calc(20% - 5px)}
  .dash-shell{grid-template-columns:minmax(0,1fr)}
  .chain-badge .cb-k{display:none}
}

/* ═══════════════════════════════════════════════════════════════════════════
   ACHILLES-STYLE LAYER — one accent, hairlines, rounded containers, grain.
   Appended last on purpose: it overrides the sharp terminal corners from
   style.css/dash.css without editing each component rule.
   ═══════════════════════════════════════════════════════════════════════════ */
body:after{content:"";position:fixed;inset:0;pointer-events:none;z-index:4;opacity:.30;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/></filter><rect width='140' height='140' filter='url(%23n)' opacity='.38'/></svg>")}

.panel,.acard,.card,.cardgrid>.card,.sbox,.roles,.stat,.doc-util,.warn,.quote,.picker,
.d-cell,.d-kv,.d-chip,.dtk,.ad-label,.meter,.console,.ln,.dec,.q,.hr,.mock{
  border-radius:var(--r-md);}
.btn,.btn.sm,.chip,input,select,textarea,.soc-chip,.sbox,.tag{border-radius:var(--r-sm)}
.panel{background:linear-gradient(180deg,rgba(255,255,255,.014),rgba(255,255,255,0));border-color:var(--line)}
.ph{border-bottom:1px solid var(--line);background:transparent}
.btn{border-color:var(--line2);background:transparent;color:var(--bright);transition:.14s}
.btn:hover{border-color:rgba(255,255,255,.32);background:rgba(255,255,255,.04)}
.btn.primary{background:var(--cyan);border-color:var(--cyan);color:#04140c;font-weight:600}
.btn.primary:hover{background:#5cffae;border-color:#5cffae}
input,select,textarea{background:#0a0b0c;border-color:var(--line2)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--cyan)}
a:hover{color:var(--bright)}
.panel:hover,.acard:hover,.card:hover{border-color:rgba(255,255,255,.20)}
.stat,.d-cell,.d-kv{background:rgba(255,255,255,.015)}


/* ── LANDING (marketing page in the achilles style) ───────────────────────── */
body.lp .shell{grid-template-columns:1fr}   /* the rail column collapses, the landing takes the full width */
body.lp .ic-rail,body.lp .topbar,body.lp .ticker,body.lp .statusbar,body.lp .footer{display:none}   /* the landing carries its own nav and footer */
body.lp{padding-bottom:0}
body.lp .lp-root{width:100%;max-width:1300px;margin:0 auto;overflow-x:clip}   /* auto margins stop the cross-axis stretch, so pin the width */
.lp-hero{position:relative;overflow:hidden;padding:46px 0 78px;border-bottom:1px solid var(--line)}
.lp-aurora{position:absolute;inset:-280px 0 auto 0;height:760px;filter:blur(34px);pointer-events:none;opacity:.62}
.lp-aurora i{position:absolute;top:0;width:80px;height:760px;border-radius:60px;
  background:linear-gradient(180deg,rgba(0,255,136,.16),rgba(0,255,136,.68) 42%,rgba(0,255,136,.06) 76%,rgba(0,255,136,0))}
.lp-aurora i:nth-child(even){width:26px;filter:blur(6px);opacity:.85;background:linear-gradient(180deg,rgba(190,255,220,.30),rgba(0,255,136,.60) 40%,rgba(0,255,136,.01) 78%,rgba(0,255,136,0))}
.lp-hero:before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(112% 52% at 50% 4%,rgba(8,8,8,.10) 10%,rgba(8,8,8,.90) 52%,var(--bg) 80%)}
.lp-hero-in{position:relative;z-index:2;max-width:1240px;margin:0 auto;padding:0 26px}
.lp-label{color:var(--cyan);font-size:11.5px;letter-spacing:1.9px;margin-bottom:20px}
.lp-hero h1,.lp-sec h2{font-size:clamp(28px,4.4vw,52px);line-height:1.07;letter-spacing:-1.9px;font-weight:500;
  color:#f0f0f0;margin:0;max-width:900px;text-transform:none}
.lp-hero h1 .fade,.lp-sec h2 .fade{color:#5c5c5c}
.lp-sub{max-width:660px;color:#a8a8a8;font-size:14.5px;line-height:1.7;margin:22px 0 26px}
.lp-sub b{color:#f0f0f0;font-weight:500}
.lp-cta{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.lp-cta .btn{font-size:12.5px;letter-spacing:.2px;text-transform:none;padding:10px 16px}
.lp-hint{color:#6e6e6e;font-size:11.5px;letter-spacing:.3px;margin-top:15px}
.lp-mock{position:relative;z-index:2;max-width:1240px;margin:50px auto 0;background:#0b0b0c;
  border:1px solid var(--line);border-radius:13px;overflow:hidden}
.lp-bar{display:flex;gap:13px;align-items:center;padding:11px 16px;border-bottom:1px solid var(--line);color:#6e6e6e;font-size:12px}
.lp-dot{width:8px;height:8px;border-radius:50%;background:var(--cyan);box-shadow:0 0 10px var(--cyan)}
.lp-tabs{margin-left:auto;display:flex;gap:15px}
.lp-tabs b{color:var(--cyan);font-weight:500}
.lp-tabs span{color:#6e6e6e}
.lp-mockgrid{display:grid;grid-template-columns:1fr 1.45fr}
.lp-mockgrid>div{padding:18px;min-width:0}
.lp-mockgrid>div+div{border-left:1px solid var(--line)}
.lp-mini{color:#6e6e6e;font-size:11px;letter-spacing:1.5px;margin-bottom:12px}
.lp-ag{display:flex;justify-content:space-between;gap:12px;align-items:center;border:1px solid var(--line);
  border-radius:9px;padding:10px 12px;margin-bottom:8px;transition:.14s}
.lp-ag:hover{border-color:rgba(255,255,255,.22)}
.lp-ag b{color:#f0f0f0;font-weight:500}
.lp-ag .mut{color:#6e6e6e;font-size:11.5px;margin-top:2px}
.lp-ag .num{font-size:13px}
.lp-log{font-size:12px;line-height:1.9;color:#6e6e6e;overflow:hidden}
.lp-log .t{color:#4a4a4a}
.lp-log .w{color:#f0f0f0;font-weight:500}
.lp-sec{max-width:1240px;margin:0 auto;padding:76px 26px 0}
.lp-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:40px}
.lp-card{border:1px solid var(--line);border-radius:11px;padding:15px;transition:.14s}
.lp-card:hover{border-color:rgba(255,255,255,.20)}
.lp-shot,.lp-shot2{background:#0b0b0c;border:1px solid var(--line);border-radius:8px;padding:13px;
  font-size:11.5px;line-height:1.95;color:#6e6e6e;overflow:hidden}
.lp-shot{height:178px}
.lp-card h3{font-size:14px;font-weight:600;color:#f0f0f0;margin:17px 0 8px}
.lp-card p{color:#a8a8a8;font-size:12.5px;line-height:1.7;margin:0}
.lp-two{display:grid;grid-template-columns:1fr 1.1fr;gap:36px;margin-top:36px;align-items:start}
.lp-list{list-style:none;padding:0;margin:0}
.lp-list li{border-top:1px solid var(--line);padding:13px 0;color:#a8a8a8;font-size:12.5px;line-height:1.65}
.lp-list li:last-child{border-bottom:1px solid var(--line)}
.lp-list li b{color:#f0f0f0;display:block;margin-bottom:4px;letter-spacing:1.2px;font-size:11.5px}
.lp-trust{display:flex;gap:26px;flex-wrap:wrap;justify-content:center;color:#6e6e6e;font-size:12.5px;padding:74px 26px 0}
.lp-trust b{color:#dcdcdc;font-weight:500}
.lp-foot{max-width:1240px;margin:80px auto 0;padding:20px 26px 66px;border-top:1px solid var(--line);
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;color:#6e6e6e;font-size:11.5px}
.lp-foot a{color:var(--cyan)}
@media(max-width:900px){
  .lp-cards{grid-template-columns:1fr}
  .lp-mockgrid{grid-template-columns:1fr}
  .lp-mockgrid>div+div{border-left:none;border-top:1px solid var(--line)}
  .lp-two{grid-template-columns:1fr;gap:24px}
  .lp-sec{padding-top:56px}
}

/* phone layout for the landing only — the app screens stay desktop-first */
@media(max-width:820px){
  body.lp{overflow-x:hidden}
  body.lp .tape,body.lp .ticker,body.lp .ic-rail,body.lp .footer{display:none!important}
  body.lp .topbar-in{flex-wrap:wrap;height:auto;padding:8px 10px;gap:8px;row-gap:4px}
  body.lp .tb-mid,body.lp .tb-right{flex-basis:100%;justify-content:flex-start;white-space:normal}
  body.lp #linkState,body.lp #clock{display:none!important}   /* phones: keep the brand, drop the telemetry clock */
  body.lp .chain-badge .cb-k{display:none}
  body.lp .logo .dim{display:none}
  body.lp .print,.lp-hero{padding-top:26px}
  body.lp .lp-hero h1,body.lp .lp-sec h2{letter-spacing:-1.1px}
  body.lp .lp-hero-in,body.lp .lp-sec,body.lp .lp-foot{padding-left:16px;padding-right:16px}
  body.lp .lp-mock{margin-top:32px;border-radius:11px}
  body.lp .lp-mockgrid>div{padding:14px}
  body.lp .lp-log,body.lp .lp-shot{font-size:11px}
  body.lp .lp-sec{padding-top:52px}
}

/* ── LANDING part 2: nav, tabs, steps, tiles, quotes, token, faq, final CTA ── */
.lp-nav{position:relative;z-index:3;border-bottom:1px solid var(--line);background:rgba(8,8,8,.72);
  backdrop-filter:blur(8px);position:sticky;top:0}
.lp-nav-in{max-width:1240px;margin:0 auto;padding:12px 26px;display:flex;align-items:center;gap:22px;min-width:0}
.lp-logo{display:inline-flex;align-items:center;gap:9px;font-size:15px;font-weight:600;color:#f0f0f0;letter-spacing:-.3px}
.lp-mark{width:26px;height:26px;display:grid;place-items:center;border:1px solid rgba(0,255,136,.45);
  border-radius:6px;color:var(--cyan);font-size:12px}
.lp-navlinks{margin:0 auto;display:flex;gap:4px;flex-wrap:wrap;min-width:0}
.lp-navlinks button,.lp-footlinks button{background:none;border:0;color:#a8a8a8;font-family:inherit;font-size:12.5px;
  cursor:pointer;padding:7px 10px;border-radius:6px;transition:.14s}
.lp-navlinks button:hover,.lp-footlinks button:hover{color:#f0f0f0;background:rgba(255,255,255,.05)}
.lp-nav .btn{font-size:12.5px;letter-spacing:.2px;text-transform:none;padding:9px 15px}
.lp-trust{padding-top:56px}
.lp-tabrow{display:flex;gap:6px;flex-wrap:wrap;margin:32px 0 0;border-bottom:1px solid var(--line)}
.lp-tabrow button{background:none;border:0;border-bottom:1px solid transparent;color:#6e6e6e;font-family:inherit;
  font-size:12.5px;padding:10px 14px;cursor:pointer;transition:.14s}
.lp-tabrow button:hover{color:#f0f0f0}
.lp-tabrow button.on{color:var(--cyan);border-bottom-color:var(--cyan)}
.lp-two{display:grid;grid-template-columns:1fr 1.05fr;gap:36px;margin-top:30px;align-items:start}
.lp-caseh{text-transform:none;font-size:22px;line-height:1.25;letter-spacing:-.6px;font-weight:500;color:#f0f0f0;margin:0;max-width:420px}
.lp-bullets{list-style:none;padding:0;margin:18px 0 0}
.lp-bullets li{position:relative;padding:7px 0 7px 20px;color:#a8a8a8;font-size:12.5px;line-height:1.6}
.lp-bullets li:before{content:"✓";position:absolute;left:0;color:var(--cyan);font-size:11px}
.lp-steps{margin-top:38px;display:grid;gap:0}
.lp-step{display:grid;grid-template-columns:96px 1fr;gap:22px;border-top:1px solid var(--line);padding:22px 0}
.lp-step:last-child{border-bottom:1px solid var(--line)}
.lp-num{color:var(--cyan);font-size:12.5px;letter-spacing:1.6px;padding-top:3px}
.lp-step h3{margin:0 0 7px;font-size:14.5px;font-weight:600;color:#f0f0f0}
.lp-step p{margin:0;color:#a8a8a8;font-size:12.5px;line-height:1.7;max-width:640px}
.lp-tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;margin-top:38px;
  background:var(--line);border:1px solid var(--line);border-radius:11px;overflow:hidden}
.lp-tile{background:var(--bg);padding:20px}
.lp-tile h3{margin:0 0 8px;font-size:13.5px;font-weight:600;color:#f0f0f0}
.lp-tile p{margin:0;color:#a8a8a8;font-size:12.5px;line-height:1.7}
.lp-quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:38px}
.lp-quote{border:1px solid var(--line);border-radius:11px;padding:18px;background:rgba(255,255,255,.012)}
.lp-quote p{margin:0;color:#e6e6e6;font-size:12.5px;line-height:1.7}
.lp-quote .lp-who{margin-top:14px;display:flex;flex-direction:column;gap:3px}
.lp-quote .lp-who b{color:var(--cyan);font-weight:500;font-size:12.5px}
.lp-quote .lp-who span{color:#6e6e6e;font-size:11.5px}
.lp-tokenbox{border:1px solid var(--line);border-radius:12px;padding:22px;background:rgba(255,255,255,.012)}
.lp-tokenhead{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.lp-tokenhead b{font-size:26px;letter-spacing:-.8px;color:#f0f0f0}
.lp-chip{border:1px solid rgba(0,255,136,.35);color:var(--cyan);border-radius:999px;padding:3px 10px;font-size:10.5px;letter-spacing:1.4px}
.lp-tokennote{margin:16px 0 0;color:#a8a8a8;font-size:12.5px;line-height:1.7;border-left:2px solid var(--cyan);padding-left:12px}
.lp-tokengrid{display:grid;gap:12px;margin-top:18px}
.lp-tokengrid>div{color:#a8a8a8;font-size:12.5px;line-height:1.65}
.lp-tokengrid b{color:#f0f0f0;font-weight:500}
.lp-k{display:block;color:#6e6e6e;font-size:10.5px;letter-spacing:1.5px;margin-bottom:3px}
.lp-faq{margin-top:34px;border-top:1px solid var(--line)}
.lp-q{border-bottom:1px solid var(--line)}
.lp-q>button{width:100%;background:none;border:0;color:#f0f0f0;font-family:inherit;font-size:13.5px;text-align:left;
  padding:17px 34px 17px 0;cursor:pointer;position:relative}
.lp-q>button span{position:absolute;right:6px;top:15px;color:var(--cyan);font-size:15px;transition:.2s}
.lp-q.open>button span{transform:rotate(45deg)}
.lp-q .lp-a{display:none;color:#a8a8a8;font-size:12.5px;line-height:1.75;padding:0 40px 18px 0;max-width:760px}
.lp-q.open .lp-a{display:block}
.lp-final{padding:96px 26px 0;text-align:center;border-top:1px solid var(--line);margin-top:84px}
.lp-final h2{margin:0 auto;max-width:760px;text-align:center;text-transform:none;
  font-size:clamp(24px,3.4vw,40px);line-height:1.1;letter-spacing:-1.4px;font-weight:500;color:#f0f0f0}
.lp-final h2 .fade{color:#5c5c5c}
.lp-foot{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;align-items:flex-start}
.lp-footlinks{display:flex;gap:2px;flex-wrap:wrap;margin-top:12px}
.lp-footlinks button{padding:5px 9px;font-size:11.5px}
.lp-footright{display:grid;gap:8px;text-align:right;color:#6e6e6e;font-size:11.5px;max-width:560px}
@media(max-width:900px){
  .lp-bar{flex-wrap:wrap;gap:8px}
  .lp-tabs{margin-left:0}
  .lp-nav-in{flex-wrap:wrap;gap:10px}
  .lp-navlinks{order:3;width:100%;min-width:0;margin:0;overflow:visible;flex-wrap:wrap;justify-content:center;gap:2px}
  .lp-tiles,.lp-quotes{grid-template-columns:1fr}
  .lp-two{grid-template-columns:1fr;gap:24px}
  .lp-step{grid-template-columns:1fr;gap:6px}
  .lp-footright{text-align:left}
}
