/* Float Chain · its own chrome on Float's colours: Sofia Sans (+ Extra Condensed for display), a chain nav of white
 * link chips, a chain dock on phones, white ceramic "link" buttons, link-plate cards with Float's S-wave stripes. */
@font-face { font-family: "Sofia Sans"; font-style: normal; font-weight: 1 1000; font-display: swap; src: url(../assets/fonts/sofia-sans-latin.woff2) format("woff2"); }
@font-face { font-family: "Sofia Sans XC"; font-style: normal; font-weight: 1 1000; font-display: swap; src: url(../assets/fonts/sofia-sans-xcond-latin.woff2) format("woff2"); }
:root {
  --sans: "Sofia Sans", system-ui, sans-serif;
  --mono: "Sofia Sans", system-ui, sans-serif;
  --disp: "Sofia Sans XC", "Sofia Sans", system-ui, sans-serif;
  --ceramic: #f3f6fc; --ink: #06183d;
  --plate: linear-gradient(170deg, #0e2552 0%, #0a1c3e 46%, #071430 100%);
}
body { font-feature-settings: "tnum" 1; letter-spacing: .005em; }
.mono { font-family: var(--sans); font-variant-numeric: tabular-nums; letter-spacing: .02em; }

/* ---------------------------------------------------------------- header: wordmark, chain nav, wallet link */
.hdr.fch { max-width: 80rem; padding: 1.1rem 1.25rem; gap: 1rem; }
.fch .brand { gap: .6rem; font-family: var(--disp); font-size: 1.85rem; font-weight: 800; letter-spacing: .05em; line-height: 1; }
.fch .brand img { width: 2.1rem; height: 2.1rem; }
.fch .brand span { transform: translateY(.06em); }
.cnav { display: none; align-items: center; margin: 0 auto; }
@media (min-width: 900px) { .cnav { display: flex; } }
.cnav a { display: inline-flex; align-items: center; height: 2.3rem; padding: 0 1.05rem; border-radius: 9999px; border: 1.5px solid #ffffff2b; background: #04122e99; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); font-size: .875rem; font-weight: 700; letter-spacing: .02em; color: #dce6f7; transition: background .15s, color .15s, border-color .15s; }
.cnav a:hover { border-color: #ffffff5c; color: #fff; }
.cnav a.on { background: var(--ceramic); border-color: var(--ceramic); color: var(--ink); }
.cnj { width: 1.3rem; height: .85rem; flex: none; color: #ffffff5c; margin: 0 -.12rem; }
.fch .hdr-r { gap: .6rem; }
.fch .wbtn { height: 2.45rem; padding: 0 1.15rem; border-radius: 9999px; border: 0; background: var(--ceramic); color: var(--ink); font-family: var(--sans); font-size: .875rem; font-weight: 800; letter-spacing: .01em; box-shadow: inset 0 -2px 0 #06183d26, 0 8px 24px -10px #000; }
.fch .wbtn:hover { background: #fff; }
.fch .wbtn img { border-radius: 9999px; }
.fch .pill.ca-hdr { font-family: var(--sans); font-weight: 700; }
@media (max-width: 480px) { .fch .brand { font-size: 1.5rem; } .fch .brand img { width: 1.75rem; height: 1.75rem; } .fch .wbtn { height: 2.25rem; padding: 0 .95rem; font-size: .8125rem; } }

/* ---------------------------------------------------------------- the chain dock (phones and tablets) */
.dock { display: none !important; }
.cdock { position: fixed; inset: auto 0 1rem 0; z-index: 40; display: flex; justify-content: center; pointer-events: none; }
@media (min-width: 900px) { .cdock { display: none; } }
.cdock-in { pointer-events: auto; display: flex; align-items: center; padding: .4rem .55rem; border-radius: 9999px; background: #030b1ee6; border: 1px solid #ffffff17; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: 0 20px 50px -18px #000; }
.cdock a { display: flex; align-items: center; justify-content: center; width: 3.2rem; height: 2.45rem; border-radius: 9999px; border: 1.5px solid #ffffff30; color: #dce6f7; transition: background .15s, color .15s; }
.cdock a svg { width: 1.2rem; height: 1.2rem; }
.cdock a.on { background: var(--ceramic); border-color: var(--ceramic); color: var(--ink); }
.cdock a.plus { background: var(--accent); border-color: var(--accent); color: #fff; }
.cdock a.plus.on { background: #fff; border-color: #fff; color: var(--ink); }
.cdock .cnj { width: 1.05rem; height: .7rem; color: #ffffff52; margin: 0 -.15rem; }
@media (max-width: 360px) { .cdock a { width: 2.85rem; } .cdock .cnj { width: .85rem; } }

/* ---------------------------------------------------------------- display type */
.fh1 { font-family: var(--disp); text-transform: uppercase; font-weight: 800; letter-spacing: .005em; line-height: .84; font-size: clamp(3.6rem, 9vw, 8.6rem); }
.fh1 span { color: #fff; }
.fsec-h, .ph1, .hcard h3, .xhead h1, .docs h1, .docs h2, .chead h1, .ffoot .fb, .modal h3, .sec-h { font-family: var(--disp); font-weight: 800; letter-spacing: .005em; }
.fsec-h { font-size: clamp(2.6rem, 5.6vw, 4.6rem); line-height: .92; text-transform: uppercase; }
.ph1 { font-size: clamp(2.4rem, 4.6vw, 3.6rem); line-height: .95; text-transform: uppercase; }
.hcard h3 { font-size: 2.1rem; line-height: .95; text-transform: uppercase; }
.docs h1 { font-size: 3rem; text-transform: uppercase; } .docs h2 { font-size: 1.9rem; text-transform: uppercase; }
.modal h3 { font-size: 1.6rem; text-transform: uppercase; }
.ffoot .fb { font-size: 1.7rem; letter-spacing: .05em; }
.chead h1 { font-size: 2.2rem; text-transform: uppercase; }
.chead h1 small { font-family: var(--sans); text-transform: none; font-weight: 500; }
.fsub, .fsec-p, .psub { font-weight: 450; }

/* ---------------------------------------------------------------- white ceramic "link" buttons */
.fcta, .btn, .rv-btn { display: inline-flex; align-items: center; justify-content: center; gap: .55rem; border-radius: 9999px; background: var(--ceramic); color: var(--ink); font-family: var(--sans); font-weight: 800; letter-spacing: .12em; text-transform: uppercase; box-shadow: inset 0 -3px 0 #06183d29, 0 14px 40px -14px #000; transition: transform .15s, background .15s; }
.fcta:hover, .btn:hover, .rv-btn:hover { background: #fff; transform: translateY(-1px); opacity: 1; }
.fcta { height: 3.5rem; min-width: 14rem; padding: 0 2rem; font-size: .9rem; }
.fcta .cnj, .btn .cnj { width: 1.45rem; height: .95rem; color: var(--ink); margin: 0; }
.btn { padding: .8rem 1.5rem; font-size: .8125rem; }
.rv-btn { width: 100%; height: 3.2rem; font-size: .875rem; }
.rv-btn:disabled { opacity: .45; transform: none; }
.fcta2 { height: 3.5rem; border-radius: 9999px; border: 2px solid #ffffff3d; background: #04122e80; font-weight: 700; }
.fcta2:hover { border-color: #ffffff80; }
.btn-ghost { border-radius: 9999px; border-width: 1.5px; font-weight: 700; }
@media (max-width: 640px) { .fcta, .fcta2 { height: 3.2rem; min-width: 0; padding: 0 .8rem; letter-spacing: .08em; font-size: .8rem; } .fcta .cnj { display: none; } }

/* ---------------------------------------------------------------- link-plate cards with Float's stripes */
.cc, .hcard, .mcat, .fsplit, .card, .tbl { border-radius: 22px; border: 1px solid #ffffff14; background: var(--plate); }
.hcard, .mcat, .fsplit { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 300'%3E%3Cpath d='M-20 210 C120 210 160 150 420 150' fill='none' stroke='%23ffffff' stroke-opacity='.045' stroke-width='26'/%3E%3Cpath d='M-20 262 C130 262 170 205 420 205' fill='none' stroke='%23ffffff' stroke-opacity='.03' stroke-width='26'/%3E%3C/svg%3E"), var(--plate); background-size: 100% 100%, auto; background-repeat: no-repeat; }
.cc:hover { background: linear-gradient(170deg, #12306a 0%, #0c2148 50%, #081736 100%); border-color: #ffffff2a; }
.cc.open { background: transparent; border: 2px dashed #ffffff26; }
.cc .tk { font-weight: 800; letter-spacing: .04em; }
.cc .fdv { font-family: var(--disp); font-weight: 800; font-size: 2.3rem !important; letter-spacing: .01em; line-height: 1 !important; }
.cc .livechip, .cc .ftag, .anchip, .pill { border-radius: 9999px; }
.mcat b { font-family: var(--disp); font-size: 1.6rem; font-weight: 800; text-transform: uppercase; letter-spacing: .02em; line-height: 1; }
.mcat .c { font-family: var(--disp); font-size: 1.45rem; font-weight: 800; color: #8fbcff; }
.num-c { display: inline-flex; align-items: center; justify-content: center; min-width: 2.4rem; height: 1.7rem; padding: 0 .55rem; border-radius: 9999px; background: var(--ceramic); color: var(--ink); font-weight: 900; font-size: .8125rem; border: 0; flex: none; }
.step-h h2 { font-family: var(--disp); font-size: 1.55rem; font-weight: 800; text-transform: uppercase; letter-spacing: .01em; line-height: 1.05; }
.rv-k, .chainc2 .kk, .ffoot h4 { font-family: var(--disp); font-size: 1.25rem; font-weight: 800; letter-spacing: .06em; color: #c9d6ee; }
.fbar { border-radius: 9999px; height: 3.4rem; }
.fbar div { font-family: var(--disp); font-size: 1.15rem; font-weight: 800; }
.flegend div b { font-family: var(--disp); font-size: 1.3rem; text-transform: uppercase; letter-spacing: .02em; }
.inp { border-radius: 14px; }
.chips button, .tabs button { font-weight: 700; }
.tabs button.on { border-color: var(--ceramic); }

/* explore head (own layout, no banner) */
.xhead { display: flex; align-items: flex-end; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; padding: 1.25rem 0 .5rem; border-bottom: 1px solid #ffffff14; }
.xhead p { margin-top: .6rem; max-width: 34rem; font-size: .95rem; color: var(--muted); }

/* small phones: category plates never widen the page */
.mcats > * { min-width: 0; }
@media (max-width: 380px) { .mcats { gap: .55rem; } .mcat { padding: .9rem .8rem .85rem; } .mcat b { font-size: 1.4rem; } .mcat .lg img { width: 27px; height: 27px; } }