/* GENERATED from ui/flonk.css by scripts/sync_brand.sh: do not edit here. url() paths rewritten from /FLONK/brand/visuals/hero/ to /img/hero/. */
/* FLONK UI v1: layout + components. UI Designer, Nov 8 2026. Spec: ui/SPEC.md
   LOAD ORDER: brand/tokens.css (Creative Director, LOCKED: the only source of colors, fonts, border, shadow, spring)
   → Bang's styles.css (renamed) → this file. Never put a hex here: section 1 only renames brand tokens.
   No colors beyond the brand palette: muted text = full ink at a smaller size/weight; stripes = white/ice.
   Contrast (WCAG): ink/sky 4.99 · ink/ice 10.4 · ink/white 11.5 · white/ink 11.5 · ink/pump 4.94 · white/dump 4.55
   FAILS for small text: ink on pink 3.44, pink on ink 3.44 → pink never carries text under 24px. */

/* ---------- 1. tokens: short names for brand/tokens.css (fallbacks = the same locked values) ---------- */
:root {
  --sky: var(--sky-pop, #2DB4FF);
  --uink: var(--ultra-ink, #1414B8);
  --ice2: var(--ice);                 /* no extra tint: wells and stripes use ice on white */
  --pink: var(--flonk-pink, #FF3B8D); /* ONLY: List it, FLONK! bubbles, live dot */
  --tan: var(--shiba-tan, #E8B07A);   /* only inside mascot art */
  --deep: var(--deep-end, #0B0B5E);   /* dark mode, not in v1 */
  /* --white, --pump, --dump come straight from brand/tokens.css */

  /* text roles: everything is full ink (no muted tints); hierarchy comes from size, weight and mono */
  --ink2: var(--uink); --mut: var(--uink);

  --display: var(--font-display, "Dela Gothic One", "Arial Black", sans-serif);
  --sans: var(--font-body, "Schibsted Grotesk", system-ui, sans-serif);
  --mono: var(--font-mono, "Azeret Mono", ui-monospace, monospace);
  /* loaded weights (tokens.css): Schibsted 400/600/800 · Azeret 400/700 · Dela 400. Use only these. */

  --pad: clamp(16px, 3.4vw, 48px);
  --r: 14px; --r-lg: 20px; --r-sm: 9px;
  --bw: 3px; --line: var(--border, 3px solid var(--uink));
  --sh: var(--shadow-hard, 6px 6px 0 var(--uink)); --sh-sm: 4px 4px 0 var(--uink); --sh-lg: 9px 9px 0 var(--uink);
  --t-fast: var(--dur-fast, 120ms); --t: 180ms; --t-slow: var(--dur, 220ms);
  --spring: var(--ease-spring, cubic-bezier(.34, 1.56, .64, 1)); --flop: cubic-bezier(.6, 0, .8, .4);

  /* Bang aliases: Bang's existing CSS keeps rendering while you reskin page by page */
  --paper: var(--ice); --paper2: var(--ice); --ink: var(--uink);
  --red: var(--pink); --red2: var(--uink); --yel: var(--sky); --blu: var(--uink); --grn: var(--pump);
  --shadow: var(--sh);
}

/* ---------- 2. base overrides ---------- */
body { background: var(--sky); color: var(--uink); font-family: var(--sans); }
body::before { display: none; }             /* no riso grain: flat fills only */
.sfc, .panel, .bc, .opt, .pt, .pairc, .tp__stat, .tp__t, .dx__main, .stk, .note, .trade, .chat2 { background-color: var(--ice); }
::selection { background: var(--uink); color: var(--white); }
:focus-visible { outline: 3px solid var(--white); outline-offset: 2px; box-shadow: 0 0 0 6px var(--uink); } /* visible on sky, ice and pink */
.mono, code, .num { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.disp { font-family: var(--display); font-weight: 400; letter-spacing: -.01em; text-transform: uppercase; line-height: .92; }

/* type scale (desktop → phone via clamp) */
.h-hero { font: 400 clamp(52px, 7.6vw, 132px)/.9 var(--display); text-transform: uppercase; letter-spacing: -.015em; text-wrap: balance; margin: 0; }
.h-page { font: 400 clamp(44px, 6.2vw, 96px)/.92 var(--display); text-transform: uppercase; letter-spacing: -.01em; margin: 0; }
.h-sec  { font: 400 clamp(28px, 3vw, 44px)/.95 var(--display); text-transform: uppercase; margin: 0; }
.h-card { font: 400 22px/1 var(--display); text-transform: uppercase; margin: 0; }
.lede   { font: 400 clamp(17px, 1.5vw, 21px)/1.4 var(--sans); max-width: 52ch; margin: 0; }
.eyebrow { font: 700 12px/1.2 var(--mono); text-transform: uppercase; letter-spacing: .08em; }

/* ---------- 3. slab buttons ---------- */
.slab { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 22px;
  border: var(--line); border-radius: var(--r-sm); background: var(--white); color: var(--uink); box-shadow: var(--sh);
  font: 400 18px/1 var(--display); text-transform: uppercase; text-decoration: none; cursor: pointer;
  transition: transform var(--t-fast) ease-out, box-shadow var(--t-fast) ease-out; }
.slab:hover { transform: translate(-2px, -2px); box-shadow: 8px 8px 0 var(--uink); }
.slab:active, .slab.is-down { transform: translate(6px, 6px) scaleY(.94); box-shadow: 0 0 0 var(--uink); } /* "flonks" into its shadow */
.slab--ink { background: var(--uink); color: var(--white); box-shadow: 6px 6px 0 var(--white); } /* white shadow: an ink shadow would merge into an ink button */
.slab--ink:hover { box-shadow: 8px 8px 0 var(--white); }
.slab--pink { background: var(--pink); color: var(--uink); min-height: 64px; font-size: 24px; } /* 24px: ink on pink passes as large text only */
.slab--sm { min-height: 40px; padding: 0 14px; font-size: 14px; box-shadow: var(--sh-sm); }
.slab[disabled], .slab[aria-disabled="true"] { opacity: .5; pointer-events: none; box-shadow: none; transform: none; }

/* ---------- 4. chips ---------- */
.chip2 { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border: 2px solid var(--uink); border-radius: 99px;
  background: var(--white); font: 700 12px/1 var(--mono); text-transform: uppercase; letter-spacing: .02em; white-space: nowrap; }
/* pair chip: "/ NVDAx" reads as the pair side of COIN/NVDAx */
.pchip { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px 0 4px; border: 2px solid var(--uink); border-radius: 99px;
  background: var(--white); font: 700 12.5px/1 var(--mono); white-space: nowrap; }
.pchip__g { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--uink); color: var(--white); font: 800 11px/1 var(--sans); }
.pchip--stock .pchip__g { border-radius: 5px; background: var(--sky); color: var(--uink); box-shadow: inset 0 0 0 2px var(--uink); } /* square glyph = stock token */
.pchip--btn { cursor: pointer; height: 40px; padding-right: 12px; font-size: 14px; box-shadow: var(--sh-sm); }
.pchip--btn::before { order: 9; content: ""; width: 0; height: 0; border: 5px solid transparent; border-top: 6px solid var(--uink); margin: 5px 0 0 2px; }
.chg { display: inline-flex; align-items: center; height: 26px; padding: 0 9px; border: 2px solid var(--uink); border-radius: 7px; font: 700 13px/1 var(--mono); }
.chg--up { background: var(--pump); color: var(--uink); }
.chg--dn { background: var(--dump); color: var(--white); }
.chg--up::before { content: "▲ "; } .chg--dn::before { content: "▼ "; }
.xpill { display: inline-flex; height: 22px; align-items: center; padding: 0 8px; border: 2px dashed var(--uink); border-radius: 99px; font: 700 10.5px/1 var(--mono); text-transform: uppercase; } /* "example data" */

/* ---------- 5. marquee (top: new listings). matches the hero art: pink Dela on ink, 24px = large text (3.44:1 passes) ---------- */
.mq { overflow: hidden; background: var(--uink); color: var(--pink); border-bottom: var(--line); height: 48px; display: flex; align-items: center; }
.mq__track { display: flex; gap: 22px; white-space: nowrap; animation: mq 40s linear infinite; font: 400 24px/1 var(--display); text-transform: uppercase; }
.mq__i b { font-weight: 400; text-transform: none; }  /* tickers keep their case: NVDAx */
.mq__i::after { content: "•"; margin-left: 22px; color: var(--white); }
@keyframes mq { to { transform: translateX(-50%); } }
@media (max-width: 640px) { .mq { height: 40px; } .mq__track { font-size: 24px; } } /* never under 24px: pink on ink needs large text */

/* ---------- 6. sticker cards (board) ---------- */
.stk { position: relative; display: grid; gap: 10px; padding: 14px; border: var(--line); border-radius: var(--r-lg); box-shadow: var(--sh);
  text-decoration: none; color: var(--uink); transform: rotate(var(--tilt, 0deg)); transition: transform var(--t) var(--spring), box-shadow var(--t) var(--spring); }
.stk::after { content: ""; position: absolute; inset: -7px; border: 4px solid var(--white); border-radius: calc(var(--r-lg) + 6px); pointer-events: none; z-index: -1; box-shadow: 0 0 0 3px var(--uink); } /* die-cut sticker edge */
.wall > .stk:nth-child(4n+1) { --tilt: -1.4deg; } .wall > .stk:nth-child(4n+2) { --tilt: .9deg; }
.wall > .stk:nth-child(4n+3) { --tilt: -.6deg; } .wall > .stk:nth-child(4n+4) { --tilt: 1.6deg; }
.stk:hover { transform: rotate(0deg) translate(-3px, -3px); box-shadow: var(--sh-lg); }
.stk.is-flop { transform: rotate(calc(var(--tilt, 0deg) + 3.5deg)) translateY(3px) scaleY(.97); transform-origin: 50% 100%; }  /* red 1h: droops (pivot bottom-centre so the corner never swings off-screen) */
.stk.is-new { animation: spring-in var(--t-slow) var(--spring) both; }
@keyframes spring-in { from { transform: scale(.82) rotate(-6deg); opacity: 0; } }
.wall { display: grid; grid-template-columns: repeat(auto-fill, minmax(268px, 1fr)); gap: 30px 26px; padding: 8px 4px; overflow-x: clip; } /* tilted stickers never cause sideways scroll */
.stk { min-height: 214px; align-content: start; } /* fixed min-height: live updates never shift the wall */
.stk__top { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 12px; align-items: center; }
.stk__img { width: 72px; height: 72px; border: var(--line); border-radius: 14px; object-fit: cover; background: var(--white); }
.stk__name { font: 400 20px/1 var(--display); text-transform: uppercase; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stk__tk { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 6px; font: 700 14px var(--mono); }
.stk__mid { display: flex; align-items: end; justify-content: space-between; gap: 10px; }
.stk__mc b { display: block; font: 400 26px/1 var(--display); }
.stk__mc span { display: block; margin-top: 3px; font: 700 10.5px var(--mono); text-transform: uppercase; letter-spacing: .05em; }
.stk .upl { height: 12px; }
.stk__foot { display: flex; justify-content: space-between; gap: 8px; font: 400 11.5px var(--mono); }
.stk--up { background: var(--white); }
.stamp2 { position: absolute; top: -12px; right: 14px; z-index: 2; padding: 5px 10px 4px; border: var(--line); border-radius: 8px; background: var(--sky); font: 400 14px/1 var(--display); text-transform: uppercase; transform: rotate(-4deg); }
.stk.is-paused { opacity: .6; }

/* ---------- 7. create flow: step headers ---------- */
.stp { display: flex; align-items: center; gap: 14px; margin: 0 0 16px; }
.stp__n { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border: var(--line); border-radius: 50%; background: var(--white);
  font: 400 18px/1 var(--display); box-shadow: 3px 3px 0 var(--uink); transform: rotate(-6deg); position: relative; }
.stp__t { font: 400 26px/1 var(--display); text-transform: uppercase; }
.stp__s { margin-left: auto; font: 700 13px/1.3 var(--mono); }
.stp.is-done .stp__n { background: var(--sky); }
.stp.is-done .stp__n::after { content: "✓"; position: absolute; right: -9px; top: -9px; transform: rotate(6deg); width: 20px; height: 20px; display: grid; place-items: center; border-radius: 50%; background: var(--uink); color: var(--white); font: 800 12px/1 var(--sans); }
.blk { min-width: 0; padding: clamp(18px, 2vw, 26px); border: var(--line); border-radius: var(--r-lg); background: var(--ice); box-shadow: var(--sh); }
.blk + .blk { margin-top: 26px; }
.blk--focus { box-shadow: var(--sh-lg); } /* the pair step is the hero step */

/* ---------- 8. pairing picker ---------- */
.pick__bar { display: flex; flex-wrap: wrap; gap: 10px 12px; align-items: center; margin-bottom: 14px; }
.tabs2 { display: inline-grid; grid-auto-flow: column; border: var(--line); border-radius: 99px; overflow: hidden; background: var(--white); }
.tabs2 button { height: 40px; padding: 0 18px; border: 0; background: none; font: 400 15px/1 var(--display); text-transform: uppercase; cursor: pointer; color: var(--uink); }
.tabs2 button + button { border-left: var(--line); }
.tabs2 button[aria-selected="true"] { background: var(--uink); color: var(--white); }
.tabs2 button small { font: 700 11px var(--mono); margin-left: 6px; opacity: .8; }
.pick__q { flex: 1 1 200px; height: 40px; padding: 0 14px 0 38px; border: var(--line); border-radius: 99px; background: var(--white) no-repeat 13px 50%/16px
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='6.5' cy='6.5' r='5' fill='none' stroke='%231414B8' stroke-width='2.4'/%3E%3Cpath d='M10.5 10.5 15 15' stroke='%231414B8' stroke-width='2.6' stroke-linecap='round'/%3E%3C/svg%3E");
  font: 600 15px var(--sans); color: var(--uink); }
.pick__q::placeholder { color: var(--mut); }
.pick__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); gap: 12px; margin: 0; padding: 0; border: 0; }
.pick__grid legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
/* pair tile = a radio */
.pt { position: relative; display: grid; grid-template-columns: 34px 1fr; gap: 2px 10px; align-items: center; min-height: 74px; padding: 10px 12px;
  border: var(--line); border-radius: var(--r); background: var(--white); cursor: pointer; transition: transform var(--t-fast) ease-out, box-shadow var(--t-fast) ease-out; }
.pt input { position: absolute; opacity: 0; pointer-events: none; }
.pt__g { grid-row: span 2; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--uink); color: var(--white); font: 800 14px/1 var(--sans); }
.pt--stock .pt__g { border-radius: 9px; background: var(--sky); color: var(--uink); box-shadow: inset 0 0 0 2.5px var(--uink); font-size: 11px; }
.pt__t { font: 400 17px/1 var(--display); text-transform: none; letter-spacing: -.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pt__s { font: 700 12px/1.2 var(--mono); color: var(--mut); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pt__tag { position: absolute; top: -11px; right: 10px; height: 20px; padding: 0 7px; display: inline-flex; align-items: center; border: 2px solid var(--uink); border-radius: 99px;
  background: var(--white); font: 700 9.5px/1 var(--mono); text-transform: uppercase; letter-spacing: .04em; }
.pt:hover { transform: translate(-2px, -2px); box-shadow: var(--sh-sm); }
.pt:has(input:checked) { background: var(--uink); color: var(--white); box-shadow: var(--sh-sm); transform: translate(-2px, -2px) rotate(-1deg); }
.pt:has(input:checked) .pt__s { color: var(--white); }
.pt:has(input:checked) .pt__g { background: var(--white); color: var(--uink); }
.pt:has(input:checked) .pt__tag { background: var(--sky); }
.pt:has(input:checked)::after { content: "✓"; position: absolute; left: -10px; top: -10px; width: 26px; height: 26px; display: grid; place-items: center; border: var(--line); border-radius: 50%;
  background: var(--sky); color: var(--uink); font: 800 14px/1 var(--sans); animation: spring-in var(--t) var(--spring) both; }
.pt:has(input:focus-visible) { outline: 3px solid var(--white); outline-offset: 2px; box-shadow: 0 0 0 6px var(--uink); }
.pick__empty { grid-column: 1 / -1; padding: 22px; border: 3px dashed var(--uink); border-radius: var(--r); text-align: center; font: 600 15px var(--sans); }

/* selected-pair card */
.pairc { margin-top: 18px; border: var(--line); border-radius: var(--r); background: var(--white); overflow: hidden; }
.pairc__head { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-bottom: 2px solid var(--uink); }
.pairc__eq { font: 400 clamp(20px, 2vw, 26px)/1 var(--display); text-transform: none; } /* tickers keep their case: NVDAx, not NVDAX */
.pairc__eq i { font-style: normal; color: var(--ink2); }
.pairc__px { margin-left: auto; text-align: right; font: 700 15px/1.2 var(--mono); }
.pairc__px small { display: block; font: 700 11px var(--mono); color: var(--mut); }
.pairc__rows { display: grid; grid-template-columns: repeat(3, 1fr); }
.pairc__rows div { padding: 12px 16px; border-right: 2px solid var(--uink); }
.pairc__rows div:last-child { border-right: 0; }
.pairc__rows span { display: block; font: 700 10.5px/1.2 var(--mono); text-transform: uppercase; letter-spacing: .05em; color: var(--mut); }
.pairc__rows b { display: block; margin-top: 5px; font: 700 15px/1.25 var(--mono); }
.pairc__rows small { display: block; margin-top: 2px; font: 400 12px/1.3 var(--sans); color: var(--ink2); }
.pairc__hold { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; padding: 10px 16px; border-top: 2px solid var(--uink); background: var(--ice); font: 700 13px var(--mono); }
.pairc__hold a { color: var(--uink); font-weight: 700; }
/* functional notice band (ink): ONLY for states that change what the user can do, e.g. issuer paused. never a disclaimer */
.band { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; padding: 12px 16px; border: var(--line); border-radius: var(--r); background: var(--uink); color: var(--white); }
.band__k { grid-row: span 2; align-self: start; padding: 4px 7px; border: 2px solid var(--white); border-radius: 6px; font: 700 10.5px/1 var(--mono); letter-spacing: .05em; }
.band p { margin: 0; font: 400 13.5px/1.45 var(--sans); }
.band a { color: var(--white); font-weight: 800; text-underline-offset: 3px; }

/* hero/home pair popover (desktop) + bottom sheet (≤640) */
.ppop { position: absolute; z-index: 60; width: min(560px, calc(100vw - 32px)); padding: 16px; border: var(--line); border-radius: var(--r-lg); background: var(--ice); box-shadow: var(--sh-lg); }
.ppop .pick__grid { grid-template-columns: repeat(3, 1fr); max-height: 340px; overflow: auto; padding: 12px 6px 6px; }
@media (max-width: 640px) {
  .ppop { position: fixed; left: 0; right: 0; bottom: 0; width: auto; max-height: 82dvh; overflow: auto; border-radius: var(--r-lg) var(--r-lg) 0 0; border-bottom: 0; box-shadow: 0 -6px 0 var(--uink); padding-bottom: max(16px, env(safe-area-inset-bottom)); animation: sheet-up var(--t-slow) var(--spring) both; }
  .ppop .pick__grid { grid-template-columns: repeat(2, 1fr); max-height: none; }
}
@keyframes sheet-up { from { transform: translateY(40%); opacity: 0; } }

/* ---------- 9. uplist bar (replaces Bang's fuse) ---------- */
.upl { position: relative; height: 18px; border: var(--line); border-radius: 99px; overflow: hidden;
  background: repeating-linear-gradient(-45deg, var(--white) 0 7px, var(--ice) 7px 14px) /* flat hatch, not a gradient blend */; }
.upl__fill { position: absolute; inset: 0 auto 0 0; width: var(--p, 0%); background: var(--uink); border-right: var(--line); transition: width var(--t-slow) var(--spring); }
.upl__lbl { display: flex; justify-content: space-between; gap: 10px; margin-top: 7px; font: 700 12px/1.3 var(--mono); }
.upl__lbl small { font-weight: 500; color: var(--mut); }

/* ---------- 10. preview + cost lines ---------- */
.cost { margin: 16px 0 0; padding: 0; list-style: none; border: var(--line); border-radius: var(--r); background: var(--white); }
.cost li { display: flex; justify-content: space-between; gap: 12px; padding: 10px 14px; border-bottom: 2px dashed var(--uink); font: 700 13.5px/1.35 var(--mono); }
.cost li:last-child { border-bottom: 0; }
.cost li b { text-align: right; }
.cost li small { display: block; font: 400 11.5px var(--sans); color: var(--mut); }

/* ---------- 11. mascot slots (art pending: user picks from DIRECTION.md) ---------- */
.dip { display: block; aspect-ratio: 1; }
.dip--hero { width: clamp(220px, 26vw, 400px); }
.dip--md { width: 140px; } .dip--sm { width: 64px; } .dip--xs { width: 28px; }
.dip--slot { border: 3px dashed var(--uink); border-radius: 50%; background: var(--ice); display: grid; place-items: center; font: 700 11px var(--mono); text-transform: uppercase; text-align: center; }
.bubble { display: inline-block; padding: 10px 16px 8px; border: var(--line); border-radius: 18px 18px 18px 4px; background: var(--pink); color: var(--uink); box-shadow: var(--sh-sm);
  font: 400 clamp(26px, 2.6vw, 40px)/1 var(--display); transform: rotate(-4deg); } /* FLONK! bubble: large text only */

/* ---------- 12. shell + create layout ---------- */
.fl-nav { position: sticky; top: 0; z-index: 50; display: flex; align-items: center; gap: 18px; height: 68px; padding: 0 var(--pad); background: var(--sky); border-bottom: var(--line); }
.fl-logo { font: 400 30px/1 var(--display); text-decoration: none; color: var(--uink); letter-spacing: -.02em; display: inline-flex; }
.fl-logo img { display: block; height: 36px; width: auto; } /* brand/visuals/logo/flonk_wordmark_ink.svg */
.fl-logo span:nth-child(2), .fl-logo span:nth-child(3), .fl-logo span:nth-child(4) { transform: translateY(3px) scaleY(.92); } /* placeholder sag until the CD wordmark lands */
.fl-logo span:nth-child(3) { transform: translateY(5px) scaleY(.88); }
.fl-nav__links { display: flex; gap: 4px; }
.fl-nav__links a { height: 38px; display: inline-flex; align-items: center; padding: 0 14px; border: 2px solid transparent; border-radius: 99px; color: var(--uink); text-decoration: none; font: 800 14px/1 var(--sans); text-transform: uppercase; letter-spacing: .03em; }
.fl-nav__links a:hover, .fl-nav__links a[aria-current] { background: var(--uink); color: var(--white); }
.fl-nav__sp { flex: 1; }
@media (max-width: 860px) { .fl-nav__links { display: none; } .fl-nav { height: 60px; } .fl-logo { font-size: 26px; } }

.phead { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 18px 32px; padding: clamp(26px, 4vw, 56px) var(--pad) clamp(22px, 3vw, 36px); }
.phead .lede { margin-top: 14px; }
.phead .dip { justify-self: end; }
@media (max-width: 640px) { .phead { grid-template-columns: 1fr; } .phead .dip { display: none; } }

.lx2 { display: grid; grid-template-columns: minmax(0, 760px) 400px; gap: clamp(24px, 3vw, 44px); align-items: start; padding: 0 var(--pad) 80px; }
.lx2__side { position: sticky; top: 96px; display: grid; gap: 16px; }
@media (max-width: 1099px) { .lx2 { grid-template-columns: minmax(0, 1fr) 340px; } }
@media (max-width: 899px) { .lx2 { grid-template-columns: minmax(0, 1fr); } .lx2__side { position: static; } } /* minmax(0,…): nowrap summaries must not widen the column */

.fld2 { display: grid; gap: 6px; margin-top: 14px; align-content: start; } /* label + input stay together when the row is taller */
.fld2 > span { font: 700 11.5px/1 var(--mono); text-transform: uppercase; letter-spacing: .06em; }
.in2 { width: 100%; height: 52px; padding: 0 16px; border: var(--line); border-radius: var(--r-sm); background: var(--white); color: var(--uink); font: 600 17px var(--sans); }
.in2--big { height: 60px; font: 400 24px/1 var(--display); }
textarea.in2 { height: 96px; padding: 12px 16px; font: 400 15px/1.45 var(--sans); resize: vertical; }
.in2::placeholder { color: var(--mut); opacity: 1; }
.row2b { display: grid; grid-template-columns: 1.4fr 1fr; gap: 12px; }
.amt2 { position: relative; } .amt2 i { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); font: 700 15px var(--mono); font-style: normal; }
.qchips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.qchips button { height: 36px; padding: 0 14px; border: 2px solid var(--uink); border-radius: var(--r-sm); background: var(--white); font: 700 13px var(--mono); color: var(--uink); cursor: pointer; }
.qchips button[aria-pressed="true"] { background: var(--uink); color: var(--white); }
@media (max-width: 640px) { .pick__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 10px; } .pt { grid-template-columns: 28px 1fr; padding: 10px; } .pt__g { width: 28px; height: 28px; } .pt__t { font-size: 17px; } .row2b { grid-template-columns: 1fr; } .pairc__rows { grid-template-columns: 1fr; } .pairc__rows div { border-right: 0; border-bottom: 2px solid var(--uink); } .pairc__rows div:last-child { border-bottom: 0; } .stp__s { display: none; } }

/* preview sticker */
.pv { padding: 16px; border: var(--line); border-radius: var(--r-lg); background: var(--ice); box-shadow: var(--sh); transform: rotate(-1deg); }
.pv__top { display: grid; grid-template-columns: 76px 1fr; gap: 12px; align-items: center; }
.pv__img { width: 76px; height: 76px; border: var(--line); border-radius: 16px; object-fit: cover; background: var(--white); }
.pv__name { font: 400 24px/1 var(--display); text-transform: uppercase; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pv__tk { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 7px; font: 700 14px var(--mono); }
.pv .upl { margin-top: 16px; }
.fine { margin: 0; font: 400 12px/1.45 var(--sans); } /* functional hints only (e.g. first buy), never disclaimers */

/* phone: sticky list bar */
.lbar { display: none; }
@media (max-width: 899px) {
  .lbar { position: sticky; bottom: 0; z-index: 40; display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: center; margin: 0 calc(var(--pad) * -1); padding: 10px var(--pad) max(10px, env(safe-area-inset-bottom)); background: var(--sky); border-top: var(--line); }
  .lbar .slab--pink { min-height: 56px; font-size: 22px; padding: 0 18px; }
  .lbar__id { min-width: 0; font: 700 13px var(--mono); } .lbar__id b { display: block; font: 400 18px/1 var(--display); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .lx2__side .slab--pink { display: none; }
}

@media (max-width: 400px) { .pt { grid-template-columns: 1fr; min-height: 64px; } .pt__g { display: none; } } /* 360: the ticker needs the full tile */

/* finished steps collapse to one summary row (from the home handoff, steps 1 and 2 arrive done) */
.blk.is-done { display: flex; align-items: center; gap: 14px; min-height: 76px; padding: 12px 16px; box-shadow: var(--sh-sm); }
.blk.is-done .stp { margin: 0; flex: none; }
.blk.is-done .stp__n { width: 36px; height: 36px; font-size: 15px; }
.blk.is-done .stp__t { font-size: 18px; }
.blk.is-done + .blk { margin-top: 14px; }
.sum { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; font: 700 14px/1.3 var(--mono); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.sum img { flex: none; width: 40px; height: 40px; border: 2px solid var(--uink); border-radius: 9px; object-fit: cover; }
.sum b { font: 400 17px/1 var(--display); text-transform: uppercase; }
.sum__edit { flex: none; height: 34px; padding: 0 12px; border: 2px solid var(--uink); border-radius: 99px; background: var(--white); color: var(--uink); font: 700 12px var(--mono); text-transform: uppercase; cursor: pointer; }
.phead--tight { padding-top: clamp(18px, 2.4vw, 32px); padding-bottom: clamp(16px, 2vw, 26px); }
.phead--tight .h-page { font-size: clamp(44px, 5.4vw, 80px); }
@media (max-width: 640px) { .blk.is-done { min-height: 60px; gap: 10px; padding: 10px 12px; } .blk.is-done .stp__t, .blk.is-done .stp__s { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } .sum img { width: 34px; height: 34px; } .sum b { font-size: 15px; } .phead--tight .lede { display: none; } .phead--tight .eyebrow { display: none; } .phead--tight .h-page { margin-top: 0 !important; }
  .pairc__head { flex-wrap: wrap; gap: 6px 10px; } .pairc__head .pchip { display: none; } .pairc__eq { font-size: 20px; flex: 1 1 100%; overflow-wrap: anywhere; } .pairc__px { margin-left: 0; text-align: left; }
  .band { grid-template-columns: 1fr; } .band__k { grid-row: auto; justify-self: start; } }

/* ---------- 14. fee tiers (create step 3) ---------- */
.tiers { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; margin: 0; padding: 12px 0 0; border: 0; }
.tiers legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.tier { position: relative; display: grid; gap: 12px; align-content: start; padding: 16px; border: var(--line); border-radius: var(--r); background: var(--white); cursor: pointer; transition: transform var(--t-fast) ease-out, box-shadow var(--t-fast) ease-out; }
.tier input { position: absolute; opacity: 0; pointer-events: none; }
.tier__top { display: grid; gap: 6px; }
.tier__pct { font: 400 44px/.9 var(--display); white-space: nowrap; }
.tier__name { font: 700 11.5px/1 var(--mono); text-transform: uppercase; letter-spacing: .05em; }
.tier__you { padding: 9px 11px; border: 2px solid var(--uink); border-radius: var(--r-sm); background: var(--sky); font: 800 15px/1.2 var(--sans); }
.tier__you small { display: block; font: 400 12px/1.3 var(--mono); }
.tier__rows { margin: 0; padding: 0; list-style: none; display: grid; gap: 5px; font: 400 13px/1.3 var(--mono); }
.tier__rows li { display: flex; justify-content: space-between; gap: 8px; }
.tier:hover { transform: translate(-2px, -2px); box-shadow: var(--sh-sm); }
.tier:has(input:checked) { background: var(--uink); color: var(--white); box-shadow: var(--sh-sm); transform: translate(-2px, -2px) rotate(-1deg); }
.tier:has(input:checked) .tier__you { background: var(--white); color: var(--uink); }
.tier:has(input:checked)::after { content: "✓"; position: absolute; left: -10px; top: -10px; width: 26px; height: 26px; display: grid; place-items: center; border: var(--line); border-radius: 50%; background: var(--sky); color: var(--uink); font: 800 14px/1 var(--sans); animation: spring-in var(--t) var(--spring) both; }
.tier:has(input:focus-visible) { outline: 3px solid var(--white); outline-offset: 2px; box-shadow: 0 0 0 6px var(--uink); }
.tier--solo { cursor: default; } .tier--solo:hover { transform: none; box-shadow: none; } /* only 1 tier registered: a static card, no radio */
@media (max-width: 640px) { .tiers { grid-template-columns: 1fr; } .tier { grid-template-columns: 1fr 1.3fr; align-items: center; } .tier__rows { grid-column: 1 / -1; } }

/* ---------- 15. coin-details step: image + fields, ticker check, first-buy cap ---------- */
.cd { display: grid; grid-template-columns: 148px minmax(0, 1fr); gap: 16px; align-items: start; }
.cd .drop2 { position: relative; display: grid; place-items: center; aspect-ratio: 1; border: 3px dashed var(--uink); border-radius: var(--r); background: var(--white); text-align: center; font: 400 15px/1.05 var(--display); text-transform: uppercase; cursor: pointer; overflow: hidden; }
.cd .drop2 small { display: block; margin-top: 6px; font: 400 11px/1.3 var(--mono); text-transform: none; }
.cd .drop2 img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cd .drop2 input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.cd .drop2:has(img) { border-style: solid; }
.cd .fld2 { margin-top: 0; }
.cd + .fld2 textarea.in2 { height: 72px; }
@media (max-width: 640px) { .cd { grid-template-columns: 96px minmax(0, 1fr); } }
.fstate { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin-top: 6px; font: 400 12.5px/1.3 var(--mono); }
.fstate .ok, .fstate .no { height: 22px; display: inline-flex; align-items: center; padding: 0 8px; border: 2px solid var(--uink); border-radius: 99px; font: 700 10.5px/1 var(--mono); text-transform: uppercase; }
.fstate .ok { background: var(--pump); } .fstate .no { background: var(--dump); color: var(--white); }
.fstate a { color: var(--uink); font-weight: 700; }
.links2 summary { cursor: pointer; margin-top: 14px; font: 700 12px var(--mono); text-transform: uppercase; letter-spacing: .05em; }
.cap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 12px; margin-top: 8px; font: 400 12.5px/1.35 var(--mono); }
.cap b { font-weight: 700; }
.qchips button.is-max { border-style: dashed; }

/* ---------- 16. home ---------- */
.hero2 { position: relative; overflow: hidden; background: var(--sky) url("/img/hero/hero_art-only_1920x1080.svg") 0 0 / 100% auto no-repeat; min-height: 56.25vw; }
.hero2__in { position: absolute; left: 5.8vw; top: 8.2vw; width: 52vw; }
.hero2__mark { display: block; width: 50.8vw; height: auto; transform: rotate(-2deg); transform-origin: 0 50%; } /* flonk_wordmark_ink.svg, same spot as the composed hero */
.hero2__h1 { margin: 1.4vw 0 0; font: 400 4.7vw/1.02 var(--display); text-transform: uppercase; color: var(--white); -webkit-text-stroke: .14vw var(--uink); paint-order: stroke fill; text-shadow: .3vw .3vw 0 var(--uink); }
  /* never plain white on sky (2.3:1): the ink stroke + hard shadow carry the contrast, as in the hero art */
.hero2__sub { margin: 1.1vw 0 0; font: 800 1.45vw/1.25 var(--sans); max-width: 54vw; } /* no text-transform: the copy is written in caps, tickers keep their case (NVDAx) */
.hero2__go { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 18px; margin-top: 1.8vw; } /* the row must end above the giant pink FLONK! in the art (≈ 64% of hero height) */
.hero2__go .pchip--btn { height: 64px; padding: 0 16px 0 6px; font-size: 16px; }
.hero2__go .pchip--btn .pchip__g { width: 28px; height: 28px; font-size: 12px; }
.hero2__go .slab--pink { min-height: 64px; padding: 0 30px; font-size: 28px; }
.hero2__go a.more { font: 800 15px var(--sans); color: var(--uink); text-underline-offset: 4px; }
@media (min-width: 900px) and (max-width: 1099px) { /* small laptops: landscape art as-is; smaller live text so it clears the giant FLONK! and the bursts */
  .hero2__in { top: 8.6vw; }            /* below the art's top burst (which ends at 8.3vw) */
  .hero2__mark { width: 34vw; }          /* ends left of that burst */
  .hero2__h1 { font-size: 4.2vw; margin-top: 1vw; }
  .hero2__go a.more { display: none; }
  .hero2__sub { font-size: max(14px, 1.45vw); }
  .hero2__go .pchip--btn, .hero2__go .slab--pink { height: 56px; min-height: 56px; } .hero2__go .slab--pink { font-size: 24px; }
}
@media (max-width: 899px) {
  .hero2 { background-image: url("/img/hero/hero_mobile_art-only_1080x1920.svg"); background-position: 0 12vw; min-height: 189.8vw; } /* art shifted 12vw down: the live text block is taller than the art's text zone */
  .hero2__in { left: 5vw; right: 5vw; top: 7vw; width: auto; text-align: center; }
  .hero2__mark { width: 86vw; margin: 0 auto; transform: rotate(-2deg); transform-origin: 50% 50%; }
  .hero2__h1 { margin-top: 3vw; font-size: 7.6vw; -webkit-text-stroke: .3vw var(--uink); text-shadow: .6vw .6vw 0 var(--uink); }
  .hero2__sub { margin: 2vw auto 0; max-width: none; font-size: max(13px, 3.3vw); }
  .hero2__go { justify-content: center; margin-top: 5vw; }
}
@media (max-width: 640px) { .hero2__go { flex-wrap: nowrap; gap: 10px; } .hero2__go .pchip--btn { height: 56px; flex: none; } .hero2__go .slab--pink { min-height: 56px; font-size: 24px; padding: 0 20px; } .hero2__go a.more { display: none; } } /* one row on phones; the wall is right below */
/* pairs row: every pair as a sticker, with its coin count. links to the wall filtered by pair */
.prow { display: flex; gap: 12px; overflow-x: auto; padding: 18px var(--pad) 22px; scrollbar-width: none; border-bottom: var(--line); background: var(--sky); }
.prow a { flex: none; display: inline-flex; align-items: center; gap: 8px; height: 46px; padding: 0 14px 0 6px; border: var(--line); border-radius: 99px; background: var(--white); color: var(--uink); text-decoration: none; box-shadow: var(--sh-sm); font: 400 17px/1 var(--display); }
.prow a small { font: 700 12px var(--mono); }
.prow a .pchip__g { width: 30px; height: 30px; }
.prow a:hover { transform: translate(-2px, -2px); box-shadow: var(--sh); }
/* stats strip */
.stats2 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; padding: 26px var(--pad); }
.stats2 > div { padding: 16px 18px; border: var(--line); border-radius: var(--r-lg); background: var(--ice); box-shadow: var(--sh); }
.stats2 span { display: block; font: 700 11.5px/1.2 var(--mono); text-transform: uppercase; letter-spacing: .05em; }
.stats2 b { display: block; margin-top: 8px; font: 400 clamp(28px, 2.6vw, 40px)/1 var(--display); }
.stats2 small { display: block; margin-top: 6px; font: 400 12px/1.3 var(--mono); }
@media (max-width: 899px) { .stats2 { grid-template-columns: repeat(2, 1fr); } }
.sech { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; padding: 30px var(--pad) 16px; }
.sech .h-sec { margin-right: auto; }
.foot2 { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; padding: 22px var(--pad); background: var(--uink); color: var(--white); border-top: var(--line); }
.foot2 nav { display: flex; gap: 18px; font: 400 13px var(--mono); }
.foot2 a { color: var(--white); }
.foot2 img { height: 30px; width: auto; }

/* ---------- 17. token icons: each pair token's OWN published image (on-chain metadata or Jupiter logoURI), cached in /img/pairs/ ----------
   markup: <span class="tkn tkn--32"><img src="/img/pairs/nvdax.webp" alt="" width="32" height="32" decoding="async"><b aria-hidden="true">NV</b></span>
   - the <b> 2-letter badge sits underneath = the fallback. JS: img.addEventListener('error', () => img.remove(), { once: true })
   - alt="" when the ticker text is right next to the icon (chips, tiles, rows); alt="NVDAx" only where the icon stands alone
   - never redraw, recolor, crop-edit or filter the image: scale only. Round mask + rings are ours, the image is theirs */
.tkn { --s: 24px; position: relative; flex: none; display: inline-grid; place-items: center; width: var(--s); height: var(--s); border-radius: 50%;
  background: var(--uink); color: var(--white); font: 800 calc(var(--s) * .4)/1 var(--sans); vertical-align: middle;
  box-shadow: 0 0 0 2px var(--white), 0 0 0 3.5px var(--uink); } /* thin white ring (reads on sky AND on ink), then a hairline ink edge */
.tkn--32 { --s: 32px; } .tkn--40 { --s: 40px; }
.tkn img { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; background: var(--white); }
.tkn b { font: inherit; letter-spacing: -.02em; }
/* where each size goes (rings sit outside the box: keep ≥ 6px clear space around a .tkn) */
.pchip { height: 32px; gap: 8px; padding-left: 5px; }            /* cards, preview, pair-card head, analytics: 24px */
.pchip--btn { height: 44px; }
.pchip--lg { height: 52px; padding: 0 16px 0 7px; gap: 10px; font-size: 16px; }   /* coin header "paired to": 40px */
.hero2__go .pchip--btn { padding-left: 11px; gap: 10px; }        /* hero quick-start chip: 40px */
.prow a { padding-left: 9px; gap: 10px; }                        /* pair strip: 32px */
.pt { grid-template-columns: 32px 1fr; padding-left: 14px; }    /* picker tile: 32px (24px at ≤640) */
.pt .tkn { grid-row: span 2; }
.pt:has(input:checked) .tkn { box-shadow: 0 0 0 2px var(--white), 0 0 0 3.5px var(--white); } /* on the ink-filled selected tile */
.mq__i .tkn { margin: 0 8px 0 2px; position: relative; top: -2px; }  /* marquee: 24px, before the pair symbol */
.tp__t .tkn { margin-right: 8px; }                               /* analytics/burns tables: 24px, in the pair column */
@media (max-width: 640px) { .pt { grid-template-columns: 24px 1fr; padding-left: 12px; } .pt .tkn { --s: 24px; } }
@media (max-width: 400px) { .pt { grid-template-columns: 24px minmax(0, 1fr); column-gap: 8px; padding: 10px 9px 10px 11px; } .pt .tkn { display: inline-grid; } .pt__t { font-size: 14px; } } /* icons stay on at 360; ticker shrinks */

/* ---------- 13. reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .mq__track { animation: none; }
  .stk, .stk.is-flop, .stk:hover, .pt, .pt:has(input:checked), .slab, .slab:active { transition: none; transform: none; }
  .stk.is-new, .pt:has(input:checked)::after, .ppop { animation: none; }
}