/* Vicinity — self-hosted fonts, zero external requests. Dark by default, light with the toggle. */
@font-face { font-family: "Space Grotesk"; src: url("/fonts/space-grotesk.woff2") format("woff2"); font-weight: 300 700; font-display: swap; }
@font-face { font-family: "Inter"; src: url("/fonts/inter.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }

:root {
  /* ---- Design v5 (26 Oct 2026; the reasons are in docs/DESIGN-V5.md): night navy canvas (#071426 is also the page's theme-color), the
     emblem's teal for anything live or interactive, the coin's gold for the one main action. Text on a fill reads its --on-* token. ---- */
  /* canvas: three depths */
  --bg: #071426; --bg-2: #0B1B33; --bg-3: #10284A;
  --ink: 255,255,255;                      /* overlays: rgba(var(--ink), a) */
  --card: rgba(var(--ink),.045); --card-2: rgba(var(--ink),.075);
  --line: rgba(var(--ink),.09); --line-2: rgba(var(--ink),.15);
  /* form fields: their border reads 3:1 or more on the page, a card, a well and an opaque layer (WCAG 1.4.11); --line and --line-2 are decoration */
  --field-line: rgba(var(--ink),.36);
  /* text: four levels (16.6, 12.2, 7.3 and 5.4:1 on the page); --faint is decoration only, never a sentence or a number's source */
  --text: #EEF3FA; --text-2: #C6D3E6; --muted: #93A4BE; --faint: #7A8CA8;
  /* --pin: the teal of marks, fills and live dots; --pin-2: the teal of links and accent text (11:1 on the page); --gold: the coin's gold for
     fills (the main action, rank, the coin); --gold-ui: the gold for thin marks that must read 3:1 (the progress bars' gold end, the light
     coin's rim); --blue: the informational blue (notices, map areas, the provisional state); the rest are status colours (8:1 or more as text) */
  --pin: #00CBB6; --pin-2: #37E0CA; --moss: #34D399; --gold: #F8C13A; --gold-ui: #F8C13A; --blue: #6E9BFF; --warn: #FFD27A;
  --ok-text: #7CE8A6; --bad-text: #FF9A86; --gold-text: #FFDC8A;
  /* text on a filled colour: navy on gold (8.5:1 or more) and on teal (8.6:1), the lockup's own pairing */
  --on-cta: #0C2344; --on-gold: #0C2344; --on-accent: #06192E;
  /* the same colours as RGB triplets, for tints and rims: rgba(var(--accent-rgb), .12) */
  --accent-rgb: 0,203,182; --accent-2-rgb: 55,224,202; --gold-rgb: 248,193,58; --ok-rgb: 52,211,153; --bad-rgb: 255,154,134; --warn-rgb: 255,210,122; --blue-rgb: 110,155,255;
  --accent-line: rgba(var(--accent-rgb),.38);
  --focus-ring: var(--pin-2);              /* the keyboard focus ring (3 px); not --focus, which the map's focus card uses for its status colour */
  --scrim: rgba(3,10,22,.6);
  --glass: rgba(7,20,38,.82); --code-bg: rgba(2,8,20,.4);
  /* glass: the floating header, the tab bar, sheets (the only blurred surfaces; a phone blurs at most these) */
  --glass-bg: rgba(10,24,46,.62); --glass-bg-strong: rgba(10,24,46,.88);
  --glass-border: rgba(var(--ink),.10); --glass-hi: inset 0 1px 0 rgba(var(--ink),.08); --glass-blur: saturate(1.5) blur(18px);
  /* gradients: the headline words, the aurora at the top of a page, the ring a hovered main button draws, the hairline of a bar */
  --grad-ink: linear-gradient(180deg, #FFFFFF 0%, #C6D3E6 100%);
  --grad-accent: linear-gradient(100deg, #FFD978 0%, #F8C13A 50%, #E7A92A 100%); /* the coin's gold; every stop 8.3:1 or more on the page and on a card */
  --grad-glow: radial-gradient(50% 42% at 28% 0%, rgba(0,203,182,.22), transparent 70%), radial-gradient(44% 38% at 78% 0%, rgba(248,193,58,.14), transparent 70%);
  --grad-ring: conic-gradient(from var(--ring-a, 0deg), transparent 0 55%, rgba(255,255,255,.9) 70%, rgba(255,214,110,.9) 78%, transparent 90%); /* a sheen on the gold button; light's navy button draws the teal-and-gold arc */
  --grad-aurora: linear-gradient(90deg, transparent, rgba(0,203,182,.75) 35%, rgba(248,193,58,.75) 65%, transparent);
  /* elevation: a resting card, a raised (hovered) card, a floating layer (the scrolled header, sheets, pop-overs); each with a 1 px lit top edge */
  --e1: inset 0 1px 0 rgba(var(--ink),.06), 0 1px 2px rgba(2,8,20,.4);
  --e2: inset 0 1px 0 rgba(var(--ink),.08), 0 12px 32px -14px rgba(2,8,20,.75);
  --e3: inset 0 1px 0 rgba(var(--ink),.08), 0 28px 72px -28px rgba(2,8,20,.8);
  --glow-cta: 0 8px 24px -10px rgba(248,193,58,.5), inset 0 1px 0 rgba(255,255,255,.4);
  --glow-cta-hover: 0 12px 34px -8px rgba(248,193,58,.65), 0 0 0 1px rgba(255,214,110,.7), inset 0 1px 0 rgba(255,255,255,.45);
  --cta-halo: 0 0 28px 2px rgba(248,193,58,.24); /* the one hero action's soft halo (a blur, never a hard band) */
  /* charts (one series colour, one for a second series; text never takes a series colour) */
  --chart-1: #2BD9C3; --chart-2: #F8C13A; --chart-grid: rgba(var(--ink),.07); --chart-axis: var(--muted);
  --radius: 22px;
  /* the main buttons: the coin's gold with navy text (--on-cta, 8.5:1 or more end to end) in dark; the light theme turns the pair round
     (navy button, gold text, 7.4:1 or more), the light lockup's own pairing. WCAG AA for normal text in both. */
  --cta-a: #F2B51F; --cta-b: #FFCF57;
  --display: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  --body: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --shadow: 0 24px 60px -30px rgba(2,8,20,.8);
  --map-bg: radial-gradient(80% 70% at 30% 35%, rgba(0,203,182,.07), transparent 60%), radial-gradient(120% 90% at 55% 45%, #10284A, #071426);
  /* map colours (read by cities.js and home.js): land a step lighter and water a step deeper than before, so coastlines read (1.6:1) */
  --map-water: #08142A; --map-land: #1F3A60; --map-land-line: rgba(149,162,184,.42);
  --map-area: rgba(127,163,214,.10); --map-area-line: rgba(160,190,235,.75);
  --map-dot: #7FA3D6; --map-label: #EEF3FA; --map-halo: rgba(7,20,38,.85);
  /* the member pass and founder card: navy in both themes, lit by the emblem's teal and one small glint of the coin's gold (white keeps 5.3:1
     on the lit corners); the founder card's state corners read the --pass-*-rgb triplets, theme-independent like the pass */
  --pass-a: #12345F; --pass-b: #071426; --pass-glow-1: rgba(0,203,182,.38); --pass-glow-2: rgba(255,205,96,.46); --pass-line: rgba(255,255,255,.14);
  --pass-ok-rgb: 52,211,153; --pass-bad-rgb: 255,154,134; --pass-blue-rgb: 110,155,255; --pass-gold-rgb: 248,193,58;
  color-scheme: dark;
}
/* Light theme: chosen with the theme toggle, never by the device setting (dark is the default); see theme.js */
:root[data-theme="light"] {
  --bg: #F5F7FB; --bg-2: #FFFFFF; --bg-3: #EDF1F7;
  --ink: 12,35,68;                         /* the brand navy: lines, wells and shadows are navy-tinted, never grey */
  --card: #FFFFFF; --card-2: rgba(12,35,68,.05);
  --line: rgba(12,35,68,.09); --line-2: rgba(12,35,68,.15);
  --field-line: rgba(12,35,68,.52);
  --text: #0C2344; --text-2: #2E4466; --muted: #4E6076; --faint: #6C7D92; /* --muted: 6.0:1 on the page, 4.8:1 on a well inside a dashboard card */
  --pin: #0B7A70; --pin-2: #006F67; --moss: #159A74; --gold: #E5AA1C; --gold-ui: #A26F00; --blue: #2F63E0; --warn: #8A5F00;
  --ok-text: #0C6F4F; --bad-text: #C0392B; --gold-text: #7A5200;
  --on-cta: #F8C13A; --on-gold: #0C2344; --on-accent: #FFFFFF;
  --accent-rgb: 11,122,112; --accent-2-rgb: 0,111,103; --gold-rgb: 229,170,28; --ok-rgb: 21,154,116; --bad-rgb: 192,57,43; --warn-rgb: 138,95,0; --blue-rgb: 47,99,224;
  --accent-line: rgba(11,122,112,.35);
  --scrim: rgba(12,35,68,.32);
  --glass: rgba(255,255,255,.86); --code-bg: rgba(12,35,68,.05);
  --glass-bg: rgba(255,255,255,.72); --glass-bg-strong: rgba(255,255,255,.92);
  --glass-border: rgba(12,35,68,.09); --glass-hi: inset 0 1px 0 rgba(255,255,255,.9);
  --grad-ink: linear-gradient(180deg, #0C2344 0%, #2E4466 100%);
  --grad-accent: linear-gradient(100deg, #A87400 0%, #946500 50%, #8A5F00 100%); /* the coin's gold deepened for paper, no brown end: 3.8 / 4.7 / 5.3:1 on the page */
  --grad-glow: radial-gradient(50% 42% at 28% 0%, rgba(0,203,182,.07), transparent 70%), radial-gradient(44% 38% at 78% 0%, rgba(248,193,58,.06), transparent 70%);
  --grad-ring: conic-gradient(from var(--ring-a, 0deg), transparent 0 55%, rgba(55,224,202,.95) 70%, rgba(248,193,58,.85) 78%, transparent 90%);
  --grad-aurora: linear-gradient(90deg, transparent, rgba(11,122,112,.45) 35%, rgba(162,111,0,.55) 65%, transparent);
  --e1: 0 1px 2px rgba(12,35,68,.06), 0 0 0 1px rgba(12,35,68,.03);
  --e2: 0 1px 2px rgba(12,35,68,.06), 0 12px 32px -14px rgba(12,35,68,.22);
  --e3: 0 28px 72px -28px rgba(12,35,68,.3);
  --glow-cta: 0 8px 22px -12px rgba(12,35,68,.45), inset 0 1px 0 rgba(255,255,255,.12);
  --glow-cta-hover: 0 12px 30px -10px rgba(12,35,68,.55), 0 0 0 1px rgba(12,35,68,.55), inset 0 1px 0 rgba(255,255,255,.16);
  --cta-halo: 0 0 26px 0 rgba(12,35,68,.16);
  --chart-1: #0B7A70; --chart-2: #16355E; --chart-grid: rgba(12,35,68,.08); /* series 2 is each theme's own fill: gold on the night canvas, the brand navy on paper */
  --cta-a: #0C2344; --cta-b: #16355E;
  --shadow: 0 20px 50px -30px rgba(12,35,68,.35);
  --map-bg: radial-gradient(80% 70% at 30% 35%, rgba(0,203,182,.06), transparent 60%), radial-gradient(120% 90% at 55% 45%, #EAF1FA, #DCE6F2);
  --map-water: #D7E6F5; --map-land: #FFFFFF; --map-land-line: rgba(12,35,68,.22);
  --map-area: rgba(43,91,255,.07); --map-area-line: rgba(30,70,160,.8);
  --map-dot: #3F67A6; --map-label: #0C2344; --map-halo: rgba(255,255,255,.9);
  color-scheme: light;
}
/* Design tokens (a contract: the other sheets read them with var(--name, fallback); names are fixed, values tuned here only). Design v4
   (12 Oct 2026, "premium": Linear / Vercel / Apple): one accent, generous space, a crisp type scale, subtle depth, motion that confirms.
   Design v5 (26 Oct 2026): the soft tints read the colour triplets above, so one rule serves both themes; a hover eases over 180 ms on one
   soft curve. Light's --pin-2 is #006F67 (5.6:1 on the page, 6.1:1 on white), so every link and "+" passes AA. */
:root {
  /* type: Space Grotesk for titles and numbers, Inter for words. .75rem is the floor: nothing smaller anywhere */
  --fs-xs: .75rem; --fs-sm: .875rem; --fs-base: 1rem; --fs-md: 1.125rem; --fs-lg: 1.25rem;
  --fs-xl: clamp(1.5rem, 1.15rem + 1.6vw, 2.25rem);       /* section titles (h2): 24 -> 36 px */
  --fs-2xl: clamp(2.25rem, 1.4rem + 3.6vw, 3.75rem);      /* page titles (h1): 36 -> 60 px */
  --fs-display: clamp(2.75rem, 1.5rem + 6.2vw, 6rem);     /* the home headline only: 44 -> 96 px */
  --fs-num: clamp(1.75rem, 1.3rem + 2.4vw, 2.5rem);       /* the one big number of a card: price, holding, amount */
  --fs-kicker: .75rem; --ls-kicker: .08em;
  --lh-tight: 1.05; --lh-snug: 1.3; --lh-body: 1.6;
  /* space: a 4-point scale */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 72px; --sp-9: 96px; --sp-10: 128px;
  --gutter: 16px; --card-pad: 16px; --section-y: 48px;
  /* radii: these and nothing in between */
  --r-xs: 8px; --r-chip: 12px; --r-card: 16px; --r-lg: 20px; --r-hero: 24px; --r-pill: 999px;
  /* surfaces: one card level (a quiet translucent fill), wells inside it, opaque layers on top */
  --surface-1: linear-gradient(180deg, rgba(var(--ink),.055), rgba(var(--ink),.025)); --surface-2: var(--bg-2); --surface-inset: rgba(var(--ink), .04);
  --accent-soft: rgba(var(--accent-rgb),.12); --ok-soft: rgba(var(--ok-rgb),.14); --bad-soft: rgba(var(--bad-rgb),.12); --warn-soft: rgba(var(--warn-rgb),.12); --gold-soft: rgba(var(--gold-rgb),.14);
  --shadow-1: var(--e1);
  /* layout: --header-h is the bottom edge of the stuck floating header (offset + bar): 8 + 52 on a phone, 12 + 56 from 901 px */
  --header-h: 60px; --sticky-top: calc(var(--header-h) + 12px);
  /* motion: transform and opacity only, inside a no-preference block; nothing loops. A press 120 ms, a hover or colour change 180 ms, an
     enter or lift 320 ms, a long reveal 560 ms; one soft curve */
  --dur-1: 120ms; --dur-2: 180ms; --dur-3: 320ms; --dur-4: 560ms;
  --ease-out: cubic-bezier(.22,.61,.36,1); --ease-in-out: cubic-bezier(.65,0,.35,1); --ease-spring: cubic-bezier(.34,1.56,.64,1);
}
@media (min-width: 481px) { :root { --gutter: 24px; } }
@media (min-width: 601px) { :root { --card-pad: 24px; --section-y: 72px; } }
@media (min-width: 901px) { :root { --section-y: 96px; --header-h: 68px; } }
@media (min-width: 1280px) { :root { --gutter: 32px; } }
:root[data-theme="light"] {
  --surface-1: linear-gradient(180deg, #FFFFFF, #FBFCFD); --surface-inset: #EEF2F7;
  --accent-soft: rgba(var(--accent-rgb),.09); --ok-soft: rgba(var(--ok-rgb),.10); --bad-soft: rgba(var(--bad-rgb),.08); --warn-soft: rgba(var(--warn-rgb),.08); --gold-soft: rgba(var(--gold-rgb),.12);
}
/* no blur available, or the visitor asks for less transparency: glass becomes nearly opaque */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { :root, :root[data-theme] { --glass-bg: var(--glass-bg-strong); } }
@media (prefers-reduced-transparency: reduce) { :root, :root[data-theme] { --glass-bg: var(--glass-bg-strong); } }
@property --ring-a { syntax: "<angle>"; inherits: false; initial-value: 0deg; }

/* ---------- base ---------- */
* { box-sizing: border-box; }
/* the page is never wider than the screen, for every browser and screenshot tool (iOS Safari and full-page captures read the root's
   overflow, not body's): html clips, and body clips too. Clip, never hidden, on body: with html clipping, body overflow-x: hidden makes
   body a scroll container (overflow-y computes to auto) and the sticky header stops sticking (measured 11 Oct 2026: the header at
   -1500 px after scrolling 1500). "hidden" first is the fallback for browsers without clip (body's value then reaches the viewport). */
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 16px); overflow-x: clip; }
body { margin: 0; background: var(--bg); color: var(--text); font: 16px/1.6 var(--body); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; overflow-x: clip; }
/* the footer sits at the bottom of the screen on a short page (a 404, a signed-out profile) instead of floating mid-screen: the page is a
   column at least the screen's height and the content takes the room left (the header, tab bar, toast and sheets are sticky or fixed) */
body { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; }
body > main { flex: 1 0 auto; }
img, svg, canvas { display: block; max-width: 100%; }
/* nothing a page draws or prints is wider than the screen: media, tables and code wrap or shrink to their column */
main :where(img, svg, video, canvas, iframe, table, pre) { max-width: 100%; }
p code { overflow-wrap: anywhere; }
a { color: var(--pin-2); text-underline-offset: 3px; }
::selection { background: var(--accent-soft); }
/* type (design v4): big, tight display titles; one size per level; Space Grotesk for titles, Inter for words */
h1, h2, h3 { font-family: var(--display); line-height: 1.15; letter-spacing: -0.025em; margin: 0 0 .5em; }
/* titles wrap into balanced lines, never a single word left on the last one (browsers without balance: the pages put &nbsp; between
   the last two words) */
h1, h2, h3, .page-title { text-wrap: balance; }
h1 { font-weight: 650; letter-spacing: -0.035em; line-height: 1.05; }
h2 { font-size: var(--fs-xl); font-weight: 600; max-width: 22ch; }
.h2--sm { font-size: clamp(1.25rem, 1.1rem + .8vw, 1.625rem); max-width: none; }
h3 { font-size: var(--fs-lg); font-weight: 600; letter-spacing: -0.01em; line-height: 1.3; }
p { margin: 0 0 1em; }
code { font-family: var(--mono); font-size: .88em; background: var(--card-2); padding: 2px 6px; border-radius: 6px; }
.mono { font-family: var(--mono); font-size: .92em; letter-spacing: .02em; }
.wrap { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 24px; }
@media (max-width: 480px) { .wrap { padding: 0 16px; } }
.muted { color: var(--muted); } .small { font-size: .9rem; } .tiny { font-size: .8rem; margin-top: 10px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.nowrap { white-space: nowrap; } /* a word that must not break at its hyphen ("on-chain") */
.skip { position: absolute; left: -999px; top: 8px; background: var(--pin); color: var(--on-accent); padding: 8px 14px; border-radius: 8px; z-index: 100; }
.skip:focus { left: 8px; }
:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 3px; border-radius: 8px; }
[hidden] { display: none !important; }
/* gradient words: the ink gradient for a headline's first words, the accent gradient for its last (still: nothing shifts its colours) */
.text-ink { background-image: var(--grad-ink); -webkit-background-clip: text; background-clip: text; color: transparent; }
.accent { background-image: var(--grad-accent); -webkit-background-clip: text; background-clip: text; color: transparent; }
@media (forced-colors: active) { .text-ink, .accent { background: none; color: CanvasText; } }

/* ---------- the floating glass header (design v4) ----------
   A slim translucent bar floating 12 px under the top of the screen (8 px on a phone), glass over the page, a hairline drawn with a
   shadow (polish-dash.css clears the old header's bottom border on the dashboard; a shadow keeps all four edges there) and a faint
   aurora (teal into gold) along its top edge. It turns more opaque with a deeper shadow once the page scrolls (site.js .is-scrolled).
   Brand left, four links centred, the theme switch, Log in (or the signed-in chip) and one gold Sign up right. --header-h is its bottom edge. */
.site-header { position: sticky; top: 12px; z-index: 50; display: block; width: min(100% - 2 * var(--gutter), 1152px); height: 56px; margin: 12px auto 0; padding: 0 8px 0 14px; border-radius: 16px;
  background: var(--glass-bg); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); box-shadow: inset 0 0 0 1px var(--glass-border), var(--glass-hi); view-transition-name: site-header; }
.site-header::before { content: ""; position: absolute; top: 0; left: 14%; right: 14%; height: 1px; pointer-events: none; background: var(--grad-aurora); opacity: .8; }
:root[data-theme="light"] .site-header::before { opacity: .6; }
/* scrolled: a stronger glass (switched at once) and a deep shadow drawn in advance on a layer that only fades in (opacity, no repaint
   of the blurred bar on each frame) */
.site-header::after { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; box-shadow: var(--e3); opacity: 0; }
.site-header.is-scrolled { background: var(--glass-bg-strong); }
.site-header.is-scrolled::after { opacity: 1; }
/* three columns: the links stay centred whatever the right side holds (Log in + Sign up, or a member's name), so nothing in the bar
   moves when /api/me answers; each side is at least as wide as its content, so nothing overlaps on a narrow computer */
.site-header__inner { display: grid; grid-template-columns: minmax(max-content, 1fr) auto minmax(max-content, 1fr); align-items: center; column-gap: 12px; height: 100%; }
.site-header__inner > .brand { grid-column: 1; justify-self: start; } .site-header__inner > .nav { grid-column: 2; } .site-header__inner > .site-header__actions { grid-column: 3; justify-self: end; }
.hdr-sentinel { position: absolute; top: 0; left: 0; width: 1px; height: 10px; pointer-events: none; opacity: 0; }
.brand { display: inline-flex; align-items: center; gap: 10px; flex: none; font-family: var(--display); font-weight: 700; font-size: 1.28rem; color: var(--text); text-decoration: none; letter-spacing: -0.02em; }
.nav { display: flex; justify-content: center; gap: 2px; min-width: 0; }
.nav a { display: inline-flex; align-items: center; height: 40px; padding: 0 12px; border-radius: 10px; color: var(--muted); text-decoration: none; font: 500 .875rem/1 var(--body); white-space: nowrap; }
.nav a:hover { color: var(--text); background: rgba(var(--ink),.05); }
.nav a[aria-current="page"] { color: var(--text); background: rgba(var(--ink),.07); }
.site-header__actions { display: flex; align-items: center; gap: 8px; margin-left: auto; flex: none; }
.theme-toggle { width: 40px; height: 40px; flex: none; display: grid; place-items: center; padding: 0; border-radius: 10px; border: 0; background: transparent; color: var(--text-2); cursor: pointer; }
.theme-toggle:hover { color: var(--text); background: rgba(var(--ink),.06); }
.theme-toggle svg { width: 20px; height: 20px; }
.theme-toggle .sun { display: none; } :root[data-theme="light"] .theme-toggle .sun { display: block; } :root[data-theme="light"] .theme-toggle .moon { display: none; }
/* Log in: a quiet text button (no dot) while signed out; the signed-in chip keeps its green dot (site.js adds .is-in) */
.account-btn:not(.is-in) .btn__dot { display: none; }
.account-btn.is-in { background: rgba(var(--ink),.06); color: var(--text); box-shadow: inset 0 0 0 1px var(--line-2); }
.account-btn.is-in .btn__dot { width: 8px; height: 8px; background: var(--ok-text); box-shadow: 0 0 0 3px var(--ok-soft); }
.account-btn .avatar-mini { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font: 700 .72rem var(--display); background: var(--gold); color: var(--on-gold); margin-left: -8px; }
/* Sign up: for someone signed out only. A browser that has shown a member here hides it before the first paint (theme.js data-guest);
   site.js shows it again (.is-shown) once the answer says signed out, and hides it for a member or a sign-in in progress. On /connect the
   page itself is the sign-up. */
:root:not([data-guest]) [data-signup]:not(.is-shown), body[data-page="connect"] [data-signup] { display: none; }
/* a phone: 8 px under the top of the screen, or under the status bar of a notched iPhone in a full-screen web view (viewport-fit=cover:
   env(safe-area-inset-top), 47 to 59 px). Its place in the page is the same as where it sticks, and --header-h (its bottom edge) follows,
   so the dashboard's strip, the anchors and the sheets stay under it instead of sliding beneath it */
@media (max-width: 900px) {
  :root { --header-h: calc(max(8px, env(safe-area-inset-top)) + 52px); }
  .site-header { top: max(8px, env(safe-area-inset-top)); width: auto; height: 52px; margin: max(8px, env(safe-area-inset-top)) 8px 0; padding: 0 6px 0 10px; border-radius: 14px; }
  .site-header__inner { display: flex; gap: 12px; }
  .nav { display: none; }
}
/* a phone: the theme switch moves to the footer, and Log in / Sign up tighten so the wordmark keeps its room at 320 px */
@media (max-width: 480px) { .site-header .theme-toggle { display: none; } }
@media (max-width: 400px) {
  .site-header__actions { gap: 6px; }
  .site-header .account-btn:not(.is-in) { padding: 0 10px; }
  .site-header .hdr-signup { padding: 0 14px; }
}
/* the wordmark shows at every width. A signed-in name (up to 16 characters) or "Finish sign-in" is cut with an ellipsis to the room a
   phone has beside it (the theme switch is in the footer there; measured 320-440 px) */
@media (max-width: 440px) { .account-btn [data-account-label] { display: inline-block; max-width: max(3.2em, calc(100vw - 232px)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; } }

/* ---------- the phone tab bar: Home, Launchpad, Map, Token, Me ----------
   Opaque along the bottom edge, like the dashboard's strip (polish-dash.css): the strong glass colour laid on the page's own colour, no
   backdrop blur, so page text scrolling under it never reads through its labels, in either theme. The page you are on has its label in
   full colour, its icon in the accent and a small teal-to-gold pill above it (.tabbar__ind, which glides to the new tab during a page
   transition: view-transition-name tab-ind) */
.tabbar { display: none; }
@media (max-width: 900px) {
  .tabbar { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; background: linear-gradient(var(--glass-bg-strong), var(--glass-bg-strong)), var(--bg); -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: inset 0 1px 0 var(--glass-border); padding: 6px 4px calc(6px + env(safe-area-inset-bottom)); view-transition-name: tabbar; }
  .tabbar a { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 2px; border-radius: 12px; color: var(--muted); text-decoration: none; font-size: .75rem; font-weight: 600; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
  .tabbar a svg { width: 24px; height: 24px; }
  .tabbar a[aria-current="page"] { color: var(--text); }
  .tabbar a[aria-current="page"] svg { color: var(--pin); }
  .tabbar__ind { position: absolute; top: 0; left: 50%; width: 20px; height: 4px; margin-left: -10px; border-radius: 0 0 4px 4px; background: var(--pin); pointer-events: none; view-transition-name: tab-ind; } /* one colour: at 20 x 4 px a gradient read as a stray mark */
  .tabbar a:active { background: rgba(var(--ink),.06); }
  body { padding-bottom: calc(70px + env(safe-area-inset-bottom)); }
  .toast { bottom: calc(var(--bottom-bars, 64px) + 12px) !important; } /* just above the tab bar (and the coin page's Buy bar) */
}

/* ---------- buttons (design v4) ----------
   .btn--primary: the page's main action, navy on the coin's gold (gold on navy in the light theme) with a soft glow; .btn--glass: a secondary action; .btn--ghost: a quiet
   text button; .btn--cta-glow: the one hero action of a page (the Launchpad's "Create your city coin"). They give a little when pressed,
   lift 1 px under a mouse, and nothing on them moves by itself. */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; max-width: 100%; padding: 0 22px; border-radius: var(--r-pill); font: 600 1rem/1.2 var(--body); letter-spacing: -.005em; text-decoration: none; border: 1px solid transparent; cursor: pointer; color: var(--text); white-space: nowrap; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.btn--primary { background: linear-gradient(135deg, var(--cta-a), var(--cta-b)); color: var(--on-cta); box-shadow: var(--glow-cta); }
.btn--glass { background: rgba(var(--ink),.06); border-color: var(--line-2); color: var(--text); box-shadow: var(--glass-hi); }
:root[data-theme="light"] .btn--glass { background: var(--card); box-shadow: var(--e1); }
.btn--ghost { background: transparent; color: var(--text-2); }
.btn--cta-glow { box-shadow: var(--glow-cta), var(--cta-halo); }
@media (hover: hover) {
  .btn--primary:hover { box-shadow: var(--glow-cta-hover); }
  .btn--cta-glow:hover { box-shadow: var(--glow-cta-hover), var(--cta-halo); }
  .btn--glass:hover { background: rgba(var(--ink),.10); border-color: var(--accent-line); }
  .btn--ghost:hover { background: rgba(var(--ink),.05); color: var(--text); }
}
.btn--sm { min-height: 40px; padding: 0 16px; font-size: .9rem; }
.btn--lg { min-height: 56px; padding: 0 28px; font-size: 1.05rem; }
.btn--block { width: 100%; }
.btn[disabled], .btn.is-busy { opacity: .6; cursor: progress; transform: none; }
/* a main button disabled while it WORKS keeps its gold at 60 % (the rule above): the scripts mark that state with .is-busy, aria-busy,
   data-busy or nothing at all (the feedback widget's Send, the Send sheet's Review and Send, the founder Apply, the launch approval…), so
   the default must never read as "cannot". The quiet well is opted in by selector, only where the page knows the button cannot be used
   yet: the coin studio's "Use this coin" (coin-ready.js disables it only while no usable design is shown) and the app mock
   (app-phone.css .pm-btn--primary.is-off) */
#cr-use[disabled] { opacity: 1; background: var(--card-2); color: var(--muted); border-color: var(--line-2); box-shadow: none; }
.btn__dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,.75); }
.link-btn { background: none; border: 0; color: var(--muted); font: 500 .9rem var(--body); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; padding: 6px 0; }
.link-btn:hover { color: var(--text); }
@media (hover: hover) { .link-btn:hover { text-decoration-thickness: 2px; text-underline-offset: 4px; } }
.link-btn--tiny { font-size: .78rem; padding: 0 4px; }
.btn--social { width: 100%; font-weight: 700; }
/* the guard: a long label wraps, centred, instead of pushing its button past the screen (the min-heights stay) */
.btn--lg, .btn--block, .btn--social { white-space: normal; text-wrap: balance; text-align: center; line-height: 1.25; padding-block: 8px; }
.btn--google { background: #fff; color: #1f1f1f; border-color: rgba(12,35,68,.18); }
.btn--email { background: rgba(var(--ink),.08); color: var(--text); border-color: var(--line); }
.social-mark { width: 24px; height: 24px; display: grid; place-items: center; font: 800 1rem var(--display); }
.social-mark--g svg { width: 20px; height: 20px; } /* Google's own four-colour G (its sign-in button guidelines), on the white button */
.btn--google .social-mark { color: #4285F4; }
.btn--email .social-mark { color: var(--pin-2); }
.social-btns { display: grid; gap: 10px; width: 100%; }
.email-form { display: grid; gap: 10px; width: 100%; margin-top: 4px; }
.email-form label { font-size: .82rem; font-weight: 700; color: var(--text-2); }
.email-form input { width: 100%; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--field-line); background: var(--surface-inset); color: var(--text); font: 500 1rem var(--body); }
.email-form input:focus { outline: none; border-color: var(--pin); box-shadow: 0 0 0 3px var(--accent-soft); }
#email-code { letter-spacing: .5em; text-align: center; font-size: 1.4rem; font-weight: 800; }
/* the gradient ring (an animated gradient border): a thin bright arc that runs round a main action under a mouse. The one exception to
   "only transform and opacity move": it turns a registered angle (@property --ring-a), so it repaints its 1 px edge while it turns. It
   turns only while hovered (the visitor started it), only under a mouse, never at rest and never on a card but the featured $VICINITY
   card; .btn--cta-glow shows it still at 35 % at rest. Browsers without @property show it still. */
.has-ring { position: relative; isolation: isolate; }
.has-ring::after { content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; pointer-events: none; background: var(--grad-ring);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: 0; }
.btn--cta-glow.has-ring::after { opacity: .35; }
@media (hover: hover) and (pointer: fine) {
  .has-ring:hover::after, .has-ring:focus-visible::after { opacity: 1; }
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .has-ring::after { transition: opacity var(--dur-2) var(--ease-out); }
  .has-ring:hover::after { animation: ringSpin 2.4s linear infinite; } /* hover only: stops the moment the pointer leaves */
}
@keyframes ringSpin { to { --ring-a: 360deg; } }
@media (forced-colors: active) { .has-ring::after { display: none; } }
/* Windows High Contrast (forced colours): the floating bars are solid with an edge (the page never shows through their labels), and a
   chosen segment or tab is outlined, not only a little bolder */
@media (forced-colors: active) {
  .site-header, .tabbar, .terms-note { background: Canvas; -webkit-backdrop-filter: none; backdrop-filter: none; border: 1px solid CanvasText; }
  .seg :is(button[aria-selected="true"], button[aria-pressed="true"]), .tabbar a[aria-current="page"], .nav a[aria-current="page"] { outline: 2px solid Highlight; outline-offset: -2px; }
}

/* ---------- shared pieces ---------- */
/* a glass card: a quiet translucent fill, a hairline, a 1 px top highlight; no blur (cards never blur what is under them). A card that
   is one link (.card--link) lifts 2 px under a mouse and gives a little to a finger. */
.card { background: var(--surface-1); border: 1px solid var(--line); border-radius: var(--r-card); padding: var(--card-pad); box-shadow: var(--shadow-1); }
.card--link { position: relative; cursor: pointer; -webkit-tap-highlight-color: transparent; }
@media (hover: hover) and (pointer: fine) { .card--link:hover { border-color: var(--line-2); box-shadow: var(--e2); } }
.kicker { font-family: var(--body); font-weight: 600; font-size: var(--fs-kicker); line-height: 1.4; text-transform: uppercase; letter-spacing: var(--ls-kicker); color: var(--muted); margin-bottom: 12px; }
.kicker--live { display: flex; align-items: center; gap: 8px; }
/* the live dot pings three times (a ring that grows and fades: transform and opacity only), then rests; still with reduced motion */
.live-dot { position: relative; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--pin); vertical-align: middle; }
.live-dot::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--pin); opacity: 0; pointer-events: none; }
@media (prefers-reduced-motion: no-preference) { .live-dot::after { animation: livePing 1.6s cubic-bezier(0,0,.2,1) 3; } }
@keyframes livePing { 0% { transform: scale(1); opacity: .6; } 75%, 100% { transform: scale(3); opacity: 0; } }
.pill { display: inline-flex; align-items: center; gap: 7px; padding: 4px 12px; border-radius: 999px; background: var(--warn-soft); border: 1px solid rgba(var(--warn-rgb),.3); color: var(--warn); font-weight: 600; font-size: .78rem; }
.pill--live { background: var(--accent-soft); border-color: rgba(var(--accent-rgb),.35); color: var(--pin-2); } /* live is the accent (teal): 9:1 dark, 5:1 light on its tint */
.tag { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: .75rem; font-weight: 600; letter-spacing: .02em; background: var(--card-2); border: 1px solid var(--line-2); color: var(--muted); }
.tag--ok { background: var(--ok-soft); border-color: rgba(var(--ok-rgb),.4); color: var(--ok-text); }
.tag--no { background: var(--bad-soft); border-color: rgba(var(--bad-rgb),.4); color: var(--bad-text); }
.tag--warn { background: var(--warn-soft); border-color: rgba(var(--warn-rgb),.4); color: var(--warn); }
.tag--gold { background: var(--gold-soft); border-color: rgba(var(--gold-rgb),.5); color: var(--gold-text); }
.section { padding: var(--section-y) 0; position: relative; }
.section--tight { padding: 40px 0 90px; }
.section--panel { background: var(--bg-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
/* a soft light inside the content column (the review of 12 Oct 2026: a 60%-wide glow at 80% ran off the right edge of a wide screen) */
.section--glow { background: radial-gradient(min(440px, 40%) min(300px, 45%) at calc(50% + min(240px, 20%)) 55%, rgba(var(--accent-rgb),.075), transparent 72%), var(--bg); }
.section-head { margin-bottom: 36px; }
.section-head p.muted { max-width: 62ch; font-size: 1.05rem; }
.lead { font-size: var(--fs-md); line-height: 1.55; color: var(--text-2); max-width: 54ch; }
.lead strong { color: var(--text); }
/* .reveal marks a block that rises in when it scrolls into view; it never hides anything by itself (see "Site-wide motion") */
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
@media (max-width: 900px) { .grid-3 { grid-template-columns: minmax(0, 1fr); gap: 12px; } }
.bridge { margin-top: 28px; font-size: 1.1rem; color: var(--text-2); }
.toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 90; padding: 12px 18px; border-radius: var(--r-chip); background: var(--glass-bg-strong); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); box-shadow: inset 0 0 0 1px var(--glass-border), var(--e3); font-weight: 500; animation: pop .3s ease; width: max-content; max-width: calc(100vw - 32px); overflow-wrap: anywhere; }
/* what the clipboard refused, on a line of its own to select and copy by hand */
.toast__detail { display: block; margin-top: 8px; padding: 8px 10px; border-radius: var(--r-xs); background: var(--surface-inset); font: 500 .875rem/1.45 var(--mono); color: var(--text); -webkit-user-select: all; user-select: all; overflow-wrap: anywhere; } /* one line when it fits: a fixed box centred with left: 50% would otherwise shrink to half the screen and wrap */
@keyframes pop { from { transform: translateX(-50%) scale(.9); opacity: 0; } }
/* a small celebration (V.burst): eight accent dots spread out and fade, 600 ms, transform and opacity only (never emoji) */
.burst { position: fixed; pointer-events: none; z-index: 80; width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 50%; background: var(--pin); box-shadow: 0 0 0 2px var(--accent-soft); opacity: 0; }
@media (prefers-reduced-motion: no-preference) { .burst { animation: burst .6s var(--ease-out) forwards; } }
@keyframes burst { 0% { transform: none; opacity: 1; } 100% { transform: translate(var(--bx), var(--by)) scale(.5); opacity: 0; } }
input, select, textarea { font: 500 .98rem var(--body); color: var(--text); }
.field, .checker input, .tp-form input, .req-form input, .city-search input, .city-search select, .composer textarea {
  background: var(--surface-inset); border: 1px solid var(--field-line); border-radius: 12px; padding: 11px 12px; outline: none; min-width: 0; }
.checker input:focus, .tp-form input:focus, .req-form input:focus, .city-search input:focus, .city-search select:focus, .composer textarea:focus { border-color: var(--pin); box-shadow: 0 0 0 3px var(--accent-soft); }
select option { background: var(--bg-2); }
/* a tick or a radio in the accent; a placeholder is a hint (--muted, 4.5:1 or more on every well), never the only label */
input[type="checkbox"], input[type="radio"] { accent-color: var(--pin); }
::placeholder { color: var(--muted); opacity: 1; }
[aria-invalid="true"] { border-color: var(--bad-text); box-shadow: 0 0 0 3px var(--bad-soft); }

/* ---------- Design v2: the shared components (SPEC.md §2-§4; every page and every track uses these) ---------- */
/* an icon from the shared SVG set in a tinted circle */
.ico { display: inline-grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 50%; background: var(--accent-soft); color: var(--pin-2); }
.ico svg { width: 20px; height: 20px; }
.ico--sm { width: 28px; height: 28px; } .ico--sm svg { width: 16px; height: 16px; }
.ico--ok { background: var(--ok-soft); color: var(--ok-text); }
.ico--gold { background: var(--gold-soft); color: var(--gold-text); }
.ico--muted { background: var(--card-2); color: var(--text-2); }
/* a fold: <details class="fold"><summary>Label <span class="fold__meta">the key facts</span></summary> ... </details>; the meta wraps, never cut */
.fold { border-top: 1px solid var(--line); }
.fold > summary { list-style: none; cursor: pointer; display: flex; flex-wrap: wrap; align-items: center; gap: 2px var(--sp-2); min-height: 44px; padding: var(--sp-2) 28px var(--sp-2) 0; position: relative; font: 600 var(--fs-sm)/1.3 var(--body); color: var(--text); }
.fold > summary::-webkit-details-marker { display: none; }
.fold > summary::after { content: "+"; position: absolute; right: 2px; top: 50%; transform: translateY(-50%); color: var(--pin-2); font-size: 1.3rem; line-height: 1; }
.fold[open] > summary::after { content: "\2212"; }
.fold__meta { color: var(--muted); font-weight: 500; font-size: var(--fs-xs); text-wrap: balance; }
/* an empty state: one icon, one line, one button, on a resting card (not a dashed frame: dashes mean a drop target here) */
.empty { display: grid; justify-items: center; gap: var(--sp-2); padding: var(--sp-5) var(--sp-4); text-align: center; border: 1px solid var(--line); background: var(--surface-1); box-shadow: var(--e1); border-radius: var(--r-card); color: var(--muted); font-size: var(--fs-sm); }
.empty > strong { color: var(--text); font: 650 var(--fs-md)/1.25 var(--display); }
.empty > .btn { margin-top: var(--sp-1); }
/* a still placeholder of the final size: no shimmer (nothing moves by itself). An inline one (the coin page's ticker) is set below. */
.skel { display: block; border-radius: var(--r-chip); background: linear-gradient(90deg, var(--card), var(--card-2), var(--card)); color: transparent; }
/* numbers line up */
.tnum { font-variant-numeric: tabular-nums; }

/* ---------- page heroes ---------- */
.page-hero { padding: 64px 0 32px; position: relative; isolation: isolate; }
.page-title { font-size: var(--fs-2xl); font-weight: 650; letter-spacing: -0.035em; line-height: 1.05; margin: 6px 0 18px; }
.stat-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 22px; }
.stat { background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 16px 18px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.stat__label { font-size: .76rem; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); font-weight: 600; }
.stat strong { font: 650 1.6rem/1.15 var(--display); letter-spacing: -.02em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stat__sub { font-size: .8rem; color: var(--muted); }
@media (max-width: 800px) { .stat-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } .stat strong { font-size: 1.3rem; } }

/* ---------- home: hero ---------- */
.hero { position: relative; padding: 56px 0 70px; overflow: hidden; isolation: isolate; }
.hero__bg { position: absolute; inset: 0; z-index: -1; }
/* the Launchpad hero's two soft orbs. The home hero has none since d3 (11 Oct 2026: a red smudge at the screen's top-right corner and a
   blue one at its edge at 1920 px): its light is anchored to its content (.hero__copy::before, .hero-map::before), still, inside the hero */
.orb { position: absolute; border-radius: 50%; filter: blur(80px); }
.orb--a { width: 540px; height: 540px; background: var(--pin); top: -180px; right: -120px; opacity: .22; }
.orb--b { width: 440px; height: 440px; background: var(--gold); bottom: -200px; left: -140px; opacity: .18; }
:root[data-theme="light"] .orb { opacity: .12; }
.grid-floor { position: absolute; inset: 0; background-image: linear-gradient(rgba(var(--ink),.05) 1px, transparent 1px), linear-gradient(90deg, rgba(var(--ink),.05) 1px, transparent 1px); background-size: 56px 56px; mask-image: radial-gradient(ellipse 70% 60% at 60% 40%, #000 30%, transparent 75%); -webkit-mask-image: radial-gradient(ellipse 70% 60% at 60% 40%, #000 30%, transparent 75%); }
.hero__grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 40px; align-items: center; }
@media (max-width: 960px) { .hero__grid { grid-template-columns: minmax(0, 1fr); } .hero { padding-top: 28px; } }
/* a faint cool light under the headline (a gradient is already soft: no blur filter, nothing moves); on a phone a warm one at the top right
   too, where the map card's light is on a computer */
.hero__copy { position: relative; }
.hero__copy::before { content: ""; position: absolute; z-index: -1; pointer-events: none; left: -6%; top: 0; width: 78%; height: 66%; background: radial-gradient(closest-side, rgba(var(--accent-rgb),.14), rgba(var(--accent-rgb),.05) 60%, transparent); }
:root[data-theme="light"] .hero__copy::before { background: radial-gradient(closest-side, rgba(var(--accent-rgb),.07), rgba(var(--accent-rgb),.025) 60%, transparent); }
@media (max-width: 960px) {
  .hero__copy::before { left: -16px; right: -16px; top: -28px; width: auto; height: 78%; background: radial-gradient(52% 46% at 92% 8%, rgba(var(--gold-rgb),.16), transparent 72%), radial-gradient(64% 52% at 16% 42%, rgba(var(--accent-rgb),.13), transparent 72%); }
  :root[data-theme="light"] .hero__copy::before { background: radial-gradient(52% 46% at 92% 8%, rgba(var(--gold-rgb),.08), transparent 72%), radial-gradient(64% 52% at 16% 42%, rgba(var(--accent-rgb),.065), transparent 72%); }
}
.eyebrow { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: .9rem; font-weight: 500; flex-wrap: wrap; }
.hero__title { font-size: clamp(3rem, 8.2vw, 6.2rem); font-weight: 700; letter-spacing: -0.045em; line-height: .95; margin: 18px 0 24px; }
.hero__cta { display: flex; flex-wrap: wrap; gap: 12px; margin: 28px 0 34px; }
.hero__cta--center { justify-content: center; }
@media (max-width: 480px) { .hero__cta .btn--lg { flex: 1 1 auto; padding: 0 18px; } } /* side by side when they fit, full width when they don't */
/* the map card: a teal light hugging it (still, inside the hero, half as strong in the light theme); the three chips sit in its corners,
   16 px in (the "46 places" chip covered the $NYC coin and two chips stuck out of the card: d3, 11 Oct 2026) */
.hero-map { position: relative; margin: 0; }
.hero-map::before { content: ""; position: absolute; inset: -16% -14% -10%; z-index: -1; pointer-events: none; background: radial-gradient(closest-side, rgba(var(--accent-rgb),.22), rgba(var(--accent-rgb),.08) 60%, transparent); }
:root[data-theme="light"] .hero-map::before { background: radial-gradient(closest-side, rgba(var(--accent-rgb),.11), rgba(var(--accent-rgb),.04) 60%, transparent); }
.hero-map__svg { width: 100%; height: auto; border-radius: var(--r-hero); border: 1px solid var(--line); background: var(--map-water); box-shadow: 0 40px 100px -30px rgba(2,8,20,.8); }
:root[data-theme="light"] .hero-map__svg { box-shadow: 0 40px 90px -40px rgba(12,35,68,.45); }
.hero-map figcaption { text-align: center; margin: 12px 0 0; }
.hero-chip { position: absolute; z-index: 1; padding: 8px 14px; border-radius: 999px; background: var(--glass); border: 1px solid var(--line-2); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); font-size: .86rem; font-weight: 600; white-space: nowrap; box-shadow: 0 10px 30px -12px rgba(2,8,20,.6); display: inline-flex; align-items: center; gap: 7px; }
.hero-chip b { color: var(--gold-text); }
.hero-chip--1 { top: 16px; left: 16px; } .hero-chip--3 { top: 16px; right: 16px; } .hero-chip--2 { bottom: 16px; right: 16px; }
/* the chips stay still (design v4: nothing loops) */

/* map drawing (home hero + NYC section) */
.m-land { fill: var(--map-land); stroke: var(--map-land-line); stroke-width: 1; vector-effect: non-scaling-stroke; }
.m-area { fill: rgba(var(--blue-rgb),.08); stroke: var(--map-area-line); stroke-width: 1.2; vector-effect: non-scaling-stroke; transition: opacity .6s, fill .4s; }
.m-area.is-near { stroke-dasharray: 5 4; }
.m-area:hover { fill: rgba(var(--blue-rgb),.22); }
.m-nyc { fill: rgba(var(--accent-rgb),.16); stroke: var(--pin); stroke-width: 2.2; vector-effect: non-scaling-stroke; transition: opacity .7s, fill .5s; }
.m-official { fill: rgba(var(--gold-rgb),.12); stroke: var(--gold); stroke-width: 2.6; vector-effect: non-scaling-stroke; stroke-dasharray: 9 6; transition: opacity .6s; }
.m-dot { fill: var(--map-dot); transition: opacity .5s, r .5s, fill .5s; }
.m-dot.is-in { fill: var(--pin-2); }
/* labels keep their size on screen whatever the zoom: --u is map units per CSS pixel (home.js sets it on the svg through the CSSOM), so
   13 px names and a 15 px city label at every width (they read 7-10 px on a phone before d3); a label that fits nowhere is left out */
.m-label { font-family: var(--body); font-weight: 600; font-size: calc(13px * var(--u, 1.6)); fill: var(--map-label); paint-order: stroke; stroke: var(--map-halo); stroke-width: calc(4px * var(--u, 1.6)); stroke-linejoin: round; pointer-events: none; transition: opacity .5s; }
.m-label--big { font-family: var(--display); font-weight: 700; font-size: calc(15px * var(--u, 1.6)); letter-spacing: -.01em; }
.m-label.is-off { display: none; }
.m-tick { font-size: calc(12px * var(--u, 1.6)); font-weight: 700; letter-spacing: .02em; fill: var(--gold-text); } /* a neighbour's own coin, under its name (a computer) */
.m-coin circle { fill: var(--gold); stroke: #fff6; stroke-width: 3; }
.m-coin text { font: 800 26px var(--display); fill: var(--on-gold); }
/* the walkthrough's $NYC: four letters inside the disc at every size (they reached its edge on a 320 px phone), and the light theme's
   coin with a deeper gold rim (its ink is the base rule's --on-gold: navy on the light gold, 7.5:1) */
#nyc-map .m-coin text { font-size: 21px; }
:root[data-theme="light"] .m-coin circle { fill: var(--gold); stroke: var(--gold-ui); stroke-width: 2.5; }
.m-pulse { fill: none; stroke: var(--pin); stroke-width: 2; animation: ringOut 2.4s ease-out 2; transform-box: fill-box; transform-origin: center; opacity: 0; }
@keyframes ringOut { from { transform: scale(.4); opacity: 1; } to { transform: scale(2.4); opacity: 0; } }
.m-link { stroke: rgba(var(--accent-2-rgb),.55); stroke-width: 1.2; vector-effect: non-scaling-stroke; transition: opacity .6s; }

/* problem cards */
.problem__num { font: 700 .9rem var(--display); color: var(--pin-2); letter-spacing: .12em; display: block; margin-bottom: 12px; }
.problem p { margin: 0; }

/* NYC walkthrough */
.nyc { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 26px; align-items: start; }
@media (max-width: 960px) { .nyc { grid-template-columns: minmax(0, 1fr); } }
.nyc__map { position: relative; border-radius: var(--r-hero); overflow: hidden; border: 1px solid var(--line); background: var(--map-water); box-shadow: var(--shadow); }
/* square at every width (both views are square), so a step's zoom never moves the page */
.nyc__map svg { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; }
/* under the map, never over it: the legend (what the colours mean; the parts of later steps dimmed until then) and the data credit */
.nyc__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 16px; padding: 10px 14px 11px; border-top: 1px solid var(--line); background: var(--surface-2); }
.nyc__legend { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 16px; }
.nyc__key { display: inline-flex; align-items: center; gap: 7px; font-size: var(--fs-xs); font-weight: 600; line-height: 1.5; color: var(--text-2); transition: color .4s; }
.nyc__key b { font-weight: inherit; }
.nyc__swatch { flex: none; transition: opacity .4s; }
.nyc__key--official .nyc__swatch { width: 18px; border-top: 2px dashed var(--gold); }
.nyc__key--member .nyc__swatch { width: 9px; height: 9px; border-radius: 50%; background: var(--pin-2); box-shadow: 0 0 0 3px var(--accent-soft); margin: 0 2px; }
.nyc__key--nb .nyc__swatch { width: 15px; height: 11px; border-radius: 3px; border: 1.5px solid var(--map-area-line); background: var(--map-area); }
.nyc[data-step="1"] :is(.nyc__key--member, .nyc__key--nb), .nyc[data-step="2"] .nyc__key--nb { color: var(--muted); }
.nyc[data-step="1"] :is(.nyc__key--member, .nyc__key--nb) .nyc__swatch, .nyc[data-step="2"] .nyc__key--nb .nyc__swatch { opacity: .35; }
.nyc__credit { margin: 0; font-size: var(--fs-xs); color: var(--muted); }
.nyc__tip { position: absolute; margin: 0; pointer-events: none; background: var(--glass); border: 1px solid var(--line-2); border-radius: 10px; padding: 6px 10px; font-size: .82rem; transform: translate(-50%, calc(-100% - 10px)); white-space: nowrap; }
.steps { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 8px; }
.steps button { width: 100%; display: flex; gap: 14px; text-align: left; align-items: flex-start; background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 14px 16px; color: var(--text); font: inherit; cursor: pointer; transition: border-color .25s, background .25s; }
.steps button:hover { border-color: var(--line-2); }
.steps button[aria-current="step"] { border-color: rgba(var(--accent-rgb),.6); background: linear-gradient(90deg, var(--accent-soft), transparent); }
.steps__n { flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font: 700 .9rem var(--display); background: var(--card-2); border: 1px solid var(--line-2); }
.steps button[aria-current="step"] .steps__n { background: linear-gradient(135deg, var(--cta-a), var(--cta-b)); border-color: var(--cta-a); color: var(--on-cta); } /* the main buttons' own ink: 7.4:1 or more */
.steps strong { display: block; font-family: var(--display); font-size: 1.05rem; }
.steps em { font-style: normal; color: var(--muted); font-size: .92rem; display: block; max-height: 0; overflow: hidden; transition: max-height .45s ease; }
.steps button[aria-current="step"] em { max-height: 18em; margin-top: 4px; }
/* step 4's two facts (they were SVG flags over the map): an icon, a line each */
.steps__facts { display: grid; gap: 6px; margin-top: 8px; }
.steps__fact { display: flex; align-items: center; gap: 10px; color: var(--text-2); font-size: var(--fs-sm); line-height: 1.35; }
.steps__fact .ico { width: 26px; height: 26px; } .steps__fact .ico svg { width: 15px; height: 15px; }
.nyc__ctrl { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.nyc__facts { padding: 18px; }
.member-cloud { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; max-height: 150px; overflow: auto; }
.member-cloud li { font-size: .8rem; padding: 3px 10px; border-radius: 999px; background: var(--card-2); border: 1px solid var(--line); }
.member-cloud li.is-big { border-color: rgba(var(--accent-rgb),.45); color: var(--text); }
/* which layers show at each step */
.nyc[data-step="1"] .m-nyc, .nyc[data-step="1"] .m-link, .nyc[data-step="1"] .m-coin, .nyc[data-step="1"] .m-nb, .nyc[data-step="1"] .m-lead { opacity: 0; }
.nyc[data-step="2"] .m-nb, .nyc[data-step="2"] .m-lead { opacity: 0; }
.nyc[data-step="3"] .m-link, .nyc[data-step="3"] .m-lead { opacity: 0; }
.nyc[data-step="3"] .m-official, .nyc[data-step="4"] .m-official { opacity: .35; }
.nyc[data-step="4"] .m-link { opacity: 0; }
.nyc:not([data-step="2"]) .m-boro { opacity: 0; } /* the five boroughs' names: step 2 only (a wider map) */
.nyc[data-step="1"] .m-dot { opacity: .9; }
.m-nb, .m-link, .m-coin, .m-lead, .m-official, .m-boro { transition: opacity .6s; }

/* flow */
.flow-wrap { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr); gap: 24px; align-items: start; }
@media (max-width: 960px) { .flow-wrap { grid-template-columns: minmax(0, 1fr); } }
.flow { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; counter-reset: flow; position: relative; }
.flow::before { content: ""; position: absolute; left: 27px; top: 30px; bottom: 30px; width: 2px; background: linear-gradient(var(--pin), var(--gold), var(--moss)); opacity: .5; }
.flow__step { display: flex; gap: 18px; align-items: flex-start; background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 16px 18px 16px 12px; position: relative; }
.flow__icon { flex: none; width: 32px; height: 32px; border-radius: 12px; display: grid; place-items: center; background: var(--bg-3); border: 1px solid var(--line-2); font-size: 1rem; z-index: 1; }
.flow__icon.ico { width: 28px; height: 28px; border: 0; border-radius: 50%; background: linear-gradient(var(--accent-soft), var(--accent-soft)), var(--bg); } /* a tinted circle that hides the line behind it */
.flow__step h3 { margin: 4px 0 4px; }
.flow__step p { margin: 0; font-size: .95rem; }
.live-panel { position: sticky; top: 90px; }
.checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.checks li { display: grid; gap: 2px; padding-left: 28px; position: relative; }
.checks li::before { content: "✓"; position: absolute; left: 0; top: 1px; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-size: .72rem; font-weight: 800; background: rgba(var(--ok-rgb),.2); color: var(--ok-text); }
.checks span { color: var(--muted); font-size: .9rem; }

.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 36px; align-items: center; margin-top: 70px; }
.section > .split:first-child, .wrap.split { margin-top: 0; }
@media (max-width: 900px) { .split { grid-template-columns: minmax(0, 1fr); } }
.ticks { list-style: none; padding: 0; margin: 0 0 24px; display: grid; gap: 12px; }
.ticks li { padding-left: 30px; position: relative; color: var(--text-2); }
.ticks li::before { content: "✓"; position: absolute; left: 0; top: 2px; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-size: .72rem; font-weight: 800; background: rgba(var(--bad-rgb),.18); color: var(--bad-text); }
.compare-card { padding: 10px 18px; overflow-x: auto; }
.compare { width: 100%; border-collapse: collapse; font-size: .95rem; }
.compare th, .compare td { padding: 12px 8px; border-bottom: 1px solid var(--line); text-align: center; }
.compare tr:last-child th, .compare tr:last-child td { border-bottom: 0; }
.compare thead th { font-size: .76rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.compare thead th:last-child { color: var(--pin-2); }
.compare tbody th { text-align: left; font-weight: 500; color: var(--text-2); }
.compare .yes { color: var(--ok-text); font-weight: 800; font-size: 1.1rem; }
.compare .no { color: var(--muted); font-size: 1.05rem; }


/* roles (the dashboard's role panel and the home tabs share the icon) */
.role__icon { font-size: 1.7rem; display: block; margin-bottom: 10px; }
.role p { margin: 0; }

/* timeline */
.timeline { list-style: none; margin: 0; padding: 0 0 0 34px; position: relative; }
.timeline::before { content: ""; position: absolute; left: 7px; top: 6px; bottom: 6px; width: 2px; border-radius: 2px;
  background: linear-gradient(var(--moss), var(--moss) var(--rail-done, 48%), var(--pin) var(--rail-at, 66%), var(--line-2) calc(var(--rail-at, 66%) + 12%), transparent); }
.timeline__item { position: relative; padding: 0 0 18px 10px; }
.timeline__item:last-child { padding-bottom: 0; }
.timeline__item::before { content: ""; position: absolute; left: -34px; top: 4px; width: 16px; height: 16px; border-radius: 50%; background: var(--bg); border: 2px solid var(--line-2); z-index: 1; }
.timeline__item.is-done::before { background: var(--moss); border-color: var(--moss); box-shadow: 0 0 0 5px rgba(var(--ok-rgb),.18); }
.timeline__item.is-next::before { background: var(--pin); border-color: var(--pin); }
/* the next step pings like the live dot: a ring that grows and fades (transform and opacity, so no repaint every frame; it used to be a
   box-shadow pulse that restyled the page 60 times a second) three times, then rests; still with reduced motion */
.timeline__item.is-next::after { content: ""; position: absolute; left: -34px; top: 4px; width: 16px; height: 16px; border-radius: 50%; background: var(--pin); opacity: 0; pointer-events: none; }
@media (prefers-reduced-motion: no-preference) { .timeline__item.is-next::after { animation: nextPing 1.6s cubic-bezier(0,0,.2,1) 3; } }
/* the stop that is live right now (home.js, once the Launchpad is open): done, green, its dot pinging, with the way in under it */
.timeline__item.is-now::after { content: ""; position: absolute; left: -34px; top: 4px; width: 16px; height: 16px; border-radius: 50%; background: var(--moss); opacity: 0; pointer-events: none; }
@media (prefers-reduced-motion: no-preference) { .timeline__item.is-now::after { animation: nextPing 1.6s cubic-bezier(0,0,.2,1) 3; } }
.timeline__go { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; font-size: .9rem; }
@keyframes nextPing { 0% { transform: scale(1); opacity: .5; } 70%, 100% { transform: scale(2.1); opacity: 0; } }
.timeline__status { display: inline-block; font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); margin-bottom: 4px; }
.is-done .timeline__status { color: var(--ok-text); } .is-next .timeline__status { color: var(--pin-2); }
.timeline p { color: var(--muted); margin: 0; }

/* faq */
.faq { max-width: 840px; }
.faq details { border-bottom: 1px solid var(--line); padding: 18px 0; }
.faq summary { cursor: pointer; font-family: var(--display); font-weight: 600; font-size: 1.1rem; list-style: none; display: flex; justify-content: space-between; gap: 16px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--pin-2); font-size: 1.5rem; line-height: 1; transition: transform .25s; flex: none; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { color: var(--muted); margin: 12px 0 0; }
.faq details p strong { color: var(--text); }
.faq__steps { margin: 12px 0 0; padding-left: 1.4em; display: grid; gap: 8px; color: var(--muted); }
.faq__steps strong { color: var(--text); }
.faq__steps li::marker { color: var(--pin-2); font-weight: 700; }
:root[data-theme="light"] .faq__steps li::marker { color: var(--bad-text); } /* small orange text: --pin-2 is under 4.5:1 on the light FAQ */
.faq .scam-note { margin-top: 16px; color: var(--text-2); }
.faq .scam-note strong { color: var(--bad-text); }

/* ---------- footer (design v4): one calm line ----------
   The copyright, the legal and data links (Terms always shown: with no entry modal it is the visitors' notice of the Terms), the official
   social accounts as round icon links (src/official.js, rule R3), and on a phone the theme switch. One row on a computer; stacked and
   centred on a phone, clear of the tab bar (body's padding) and of the feedback button (feedback.css). */
.site-footer { border-top: 1px solid var(--line); padding: 28px 0; font-size: var(--fs-sm); background: transparent; position: relative; }
.site-footer::before { content: ""; position: absolute; top: -1px; left: 14%; right: 14%; height: 1px; pointer-events: none; background: var(--grad-aurora); opacity: .5; } /* the header's aurora, faint, closes the page */
.site-footer__inner { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 24px; }
.site-footer__copy { display: inline-flex; align-items: center; gap: 10px; margin: 0; color: var(--muted); }
.site-footer__copy img { flex: none; }
.site-footer__links { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 4px; flex: 1; }
.site-footer__links a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 10px; border-radius: 10px; color: var(--muted); text-decoration: none; font-weight: 500; }
.site-footer__links a:hover { color: var(--text); }
.site-footer__social { display: flex; gap: 4px; margin: 0; padding: 0; list-style: none; }
.social-link { display: grid; place-items: center; min-width: 44px; height: 44px; padding: 0 6px; border-radius: 50%; color: var(--text-2); text-decoration: none; }
.social-link:hover { color: var(--text); background: rgba(var(--ink),.06); }
.social-link svg { width: 20px; height: 20px; }
.social-link__name { font-weight: 600; font-size: var(--fs-sm); }
.site-footer__theme { display: none; }
/* the one line the footer keeps: a security fact (phishing), not a risk warning */
.site-footer__safe { flex: 1 1 100%; order: 9; margin: 4px 0 0; font-size: var(--fs-xs); line-height: 1.5; color: var(--muted); text-align: center; }
@media (max-width: 900px) {
  /* a phone: the links, then the social icons (and the theme switch), then the copyright, all centred */
  .site-footer { padding: 20px 0; }
  .site-footer__inner { justify-content: center; text-align: center; gap: 4px 8px; }
  .site-footer__links { flex: 1 1 100%; }
  .site-footer__social { order: 1; }
  .site-footer__theme { order: 2; }
  .site-footer__copy { order: 3; flex: 1 1 100%; justify-content: center; margin-top: 8px; font-size: var(--fs-xs); }
}
@media (max-width: 480px) { .site-footer__theme { display: grid; } }

/* ---------- the member's Terms bar (site.js): a quiet glass strip at the foot of the screen, above the phone tab bar; never blocking ---------- */
.terms-note { position: fixed; left: 50%; bottom: 16px; z-index: 70; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px;
  width: min(600px, calc(100vw - 24px)); padding: 10px 10px 10px 18px; border-radius: var(--r-lg); transform: translateX(-50%);
  background: var(--glass-bg-strong); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); box-shadow: inset 0 0 0 1px var(--glass-border), var(--e3); }
.terms-note__text { margin: 0; font-size: var(--fs-sm); color: var(--text); }
.terms-note__acts { display: flex; gap: 8px; margin-left: auto; }
.terms-note__acts .btn { min-height: 44px; }
@media (max-width: 900px) { .terms-note { bottom: calc(var(--bottom-bars, 64px) + 10px); } }
body:has(.terms-note) .fb:not(.fb--open) { visibility: hidden; } /* the feedback button steps aside while the bar is up */

/* ---------- token page ---------- */
/* the official contract card: a header (label + "Official" once the address is known), the address in one clean block with a
   full-width copy button under it on phones (beside it on computers), Buy on Raydium as the main button, Jupiter / DEX Screener /
   Solscan as three equal tiles, then the "only official" note. Phones first; a computer puts the buttons in a column on the right. */
.contract { position: relative; margin: 26px 0 0; padding: 18px; display: grid; gap: 16px; isolation: isolate;
  background: radial-gradient(120% 90% at 100% 0%, rgba(var(--accent-rgb),.10), transparent 55%), linear-gradient(180deg, rgba(var(--ink),.065), rgba(var(--ink),.02));
  border-color: rgba(var(--accent-2-rgb),.22); }
:root[data-theme="light"] .contract { background: radial-gradient(120% 90% at 100% 0%, rgba(var(--accent-rgb),.07), transparent 55%), var(--card); border-color: rgba(var(--accent-rgb),.22); }
/* a hairline across the top of the card; a short light runs along it once after the page opens, then rests (it moves with transform
   and opacity only, so it never asks the main thread for a frame; the old moving gradient restyled the card 60 times a second, forever) */
.contract::before { content: ""; position: absolute; top: 0; left: 22px; right: 22px; height: 1px; z-index: -1; pointer-events: none;
  background: linear-gradient(90deg, transparent, var(--pin) 30%, var(--gold) 50%, var(--pin) 70%, transparent); opacity: .85; }
.contract::after { content: ""; position: absolute; top: 0; left: 22px; width: 30%; height: 1px; z-index: -1; pointer-events: none; opacity: 0;
  background: linear-gradient(90deg, transparent, #FFF3D6, transparent); }
.contract__head { display: flex; align-items: center; gap: 12px; min-width: 0; }
.contract__icon { flex: none; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; color: var(--on-gold);
  background: var(--gold); box-shadow: 0 8px 22px -8px rgba(var(--gold-rgb),.55), inset 0 1px 0 rgba(255,255,255,.3); }
.contract__title { flex: 1; min-width: 0; line-height: 1.25; }
.contract__label { font: 600 1rem/1.25 var(--display); letter-spacing: -.01em; color: var(--text); }
.contract__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: 4px; min-height: calc(.864rem + 8px); } /* the "Official" badge's height, before it shows */
.contract__net { font-size: .72rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.contract__badge { flex: none; display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px 3px 7px; border-radius: 999px; font: 700 .72rem/1.2 var(--body); letter-spacing: .03em;
  color: var(--ok-text); background: rgba(var(--ok-rgb),.13); border: 1px solid rgba(var(--ok-rgb),.42); } /* light --ok-text on its tint: 5:1 */
.contract__badge svg { flex: none; }
/* the address: one block, monospace, wrapping evenly (two lines of 22 characters for a 44-character address on a phone) */
.contract__addr { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px; padding: 16px; border-radius: 16px;
  background: var(--code-bg); border: 1px solid var(--line-2); box-shadow: inset 0 1px 0 rgba(var(--ink),.04); }
.contract__addr code { display: block; flex: 1 1 100%; max-width: calc(22 * (1ch + .03em) + 2px); margin: 0 auto; padding: 0; background: none; border-radius: 0;
  font: 500 clamp(15px, 4.3vw, 18px)/1.55 var(--mono); letter-spacing: .03em; color: var(--text); text-align: center; word-break: break-all; overflow-wrap: anywhere;
  -webkit-user-select: all; user-select: all; }
.contract__copy { flex: 1 1 100%; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 18px; border-radius: 12px;
  font: 600 .95rem var(--body); color: var(--text); background: var(--card-2); border: 1px solid var(--line-2); cursor: pointer; }
.contract__copy:hover { border-color: rgba(var(--ink),.3); background: rgba(var(--ink),.1); }
.contract__copy:active { transform: scale(.98); }
.contract__copy-icons { position: relative; width: 18px; height: 18px; flex: none; }
.contract__copy-icons svg { position: absolute; inset: 0; }
.contract__copy-check { opacity: 0; transform: scale(.4); }
.contract__copy.is-copied { color: var(--ok-text); background: var(--ok-soft); border-color: rgba(var(--ok-rgb),.5); }
.contract__copy.is-copied .contract__copy-icon { opacity: 0; }
.contract__copy.is-copied .contract__copy-check { opacity: 1; transform: none; animation: checkPop .45s cubic-bezier(.2,1.5,.4,1); }
@keyframes checkPop { 0% { transform: scale(.3) rotate(-20deg); opacity: 0; } 60% { transform: scale(1.25); opacity: 1; } 100% { transform: none; } }
/* the trade links: Buy on Raydium across the card, then three equal tiles */
.contract__links { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
/* until /api/token answers (token.js removes .is-pending), the copy button and the trade links hold their room unseen (no Tab stop,
   nothing read out), and on a phone the address its two lines: the card is its final height from the first paint. On 6 Oct 2026 it
   grew 214 px when the answer came, pushing everything down, and /token#holders, #verify and #check landed 79 px too low. */
.contract.is-pending .contract__copy, .contract.is-pending > .contract__links { visibility: hidden; }
@media (max-width: 639px) { .contract.is-pending .contract__addr code { min-height: 3.1em; } }
/* then they slide in */
@media (prefers-reduced-motion: no-preference) {
  .contract:not(.is-pending) > .contract__links, .contract:not(.is-pending) .contract__copy { animation: contractIn .5s cubic-bezier(.2,.8,.2,1) backwards; }
}
@keyframes contractIn { from { opacity: 0; transform: translateY(6px); } }
.contract__buy { grid-column: 1 / -1; position: relative; isolation: isolate; display: flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 52px; padding: 0 20px; border-radius: 14px; text-decoration: none; color: var(--on-cta); font: 700 1.02rem var(--body);
  background: linear-gradient(135deg, var(--cta-a), var(--cta-b)); box-shadow: var(--glow-cta); }
@media (hover: hover) and (pointer: fine) { .contract__buy:hover { transform: translateY(-1px); box-shadow: var(--glow-cta-hover); } }
.contract__buy svg { flex: none; }
/* the tiles: icon over name, top-aligned so the three icons share one line even when "DEX Screener" takes two (320 px) */
.contract__ext { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 6px; min-height: 66px; padding: 12px 2px 10px;
  border-radius: 14px; text-decoration: none; text-align: center; color: var(--text); font: 600 .78rem/1.15 var(--body); background: var(--card-2); border: 1px solid var(--line-2); }
.contract__ext svg { color: var(--pin-2); }
/* a small arrow in the corner: it opens another site, in a new tab (said to screen readers by the hidden text) */
.contract__ext .contract__out { position: absolute; top: 5px; right: 7px; font: 600 .66rem/1 var(--body); color: var(--muted); overflow-wrap: normal; }
@media (hover: hover) and (pointer: fine) { .contract__ext:hover { transform: translateY(-2px); border-color: var(--accent-line); background: var(--accent-soft); } }
/* the note: set apart under a hairline */
.contract__foot { display: flex; align-items: flex-start; gap: 10px; padding-top: 14px; border-top: 1px dashed var(--line-2); color: var(--muted); }
.contract__foot svg { flex: none; margin-top: 1px; color: var(--gold); }
.contract__foot p { margin: 0; font-size: .82rem; line-height: 1.5; }
@media (prefers-reduced-motion: no-preference) {
  .contract::after { animation: contractSweep 2.4s ease-in-out 1.2s 1; }
  .contract__copy { transition: background-color var(--dur-2), border-color var(--dur-2), color var(--dur-2), transform var(--dur-1); }
  .contract__buy, .contract__ext { transition: transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2), border-color var(--dur-2), background-color var(--dur-2); }
}
/* from the hairline's left end to its right end: 30% of the card wide, so 233.33% of its own width minus the two 22 px insets */
@keyframes contractSweep { 0% { transform: translateX(0); opacity: 0; } 12%, 46% { opacity: 1; } 60%, 100% { transform: translateX(calc(233.33% - 44px)); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .contract__copy-check { animation: none; } }
@media (min-width: 640px) {
  .contract { padding: 22px 24px; }
  .contract__addr { justify-content: space-between; padding: 12px 12px 12px 18px; }
  .contract__addr code { flex: 1 1 auto; max-width: none; margin: 0; text-align: left; font-size: .92rem; }
  .contract__copy { flex: none; min-height: 44px; padding: 0 14px; font-size: .9rem; }
  .contract__links { grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr)); }
  .contract__buy { grid-column: auto; }
  .contract__ext { flex-direction: row; justify-content: center; gap: 8px; min-height: 52px; padding: 0 14px; font-size: .9rem; }
}
.chip-link { padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--card); color: var(--text); text-decoration: none; font-size: .88rem; font-weight: 600; }
.chip-link:hover { border-color: rgba(var(--accent-rgb),.6); }
.proof-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 900px) { .proof-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
@media (max-width: 560px) { .proof-grid { grid-template-columns: minmax(0, 1fr); } }
.proof { display: flex; flex-direction: column; gap: 6px; padding: 20px; }
.proof h3 { margin: 6px 0 0; }
.proof p { color: var(--muted); margin: 0; flex: 1; }
.proof__icon { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; background: rgba(var(--ok-rgb),.18); color: var(--ok-text); }
.proof__live, .stat__sub[data-live] { font-size: .76rem; font-weight: 600; color: var(--muted); } /* sentence case, like every label of design v2 */
.proof__live { margin-top: 10px; }
.is-live { color: var(--ok-text) !important; }
.proof__live.is-live::before { content: "● "; }
.is-bad { color: var(--bad-text) !important; }
.verify-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; align-items: center; }
@media (max-width: 900px) { .verify-grid { grid-template-columns: minmax(0, 1fr); } }
.meter { height: 10px; border-radius: 6px; background: rgba(var(--ink),.08); overflow: hidden; margin: 16px 0 8px; }
.meter span { display: block; height: 100%; width: 0; border-radius: 6px; background: linear-gradient(90deg, var(--moss), var(--gold), var(--pin)); transition: width 1s cubic-bezier(.2,.8,.2,1); }
.rank-facts { margin: 12px 0 8px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
.rank-facts div { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 10px 12px; }
.rank-facts dt { font-size: .74rem; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.rank-facts dd { margin: 2px 0 0; font-weight: 650; font-variant-numeric: tabular-nums; }
.holders { padding: 16px; }
/* the holder list's head: the status line and Refresh, then ONE box that finds a wallet in the list as you type and, with Check rank
   inside it (its right end), checks where any wallet stands; the answer pops up over the page (.rank-pop). On a computer the status
   sits at the left and the box at the right; on a phone they stack, and the box still fits at 320 px. */
.holders__head { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; margin: 0 4px 12px; color: var(--muted); font-size: .92rem; }
.holders__meta { display: flex; justify-content: space-between; align-items: center; gap: 4px 12px; flex-wrap: wrap; min-width: 0; }
@media (min-width: 761px) {
  .holders__head { grid-template-columns: minmax(0, 1fr) minmax(0, 460px); gap: 24px; align-items: start; }
  .holders__meta { justify-content: flex-start; min-height: 48px; }
}
.find-box { display: flex; align-items: center; gap: 6px; padding: 4px 4px 4px 14px; border-radius: 14px; background: var(--card-2); border: 1px solid var(--field-line); }
.find-box:focus-within { border-color: var(--pin-2); outline: 3px solid var(--pin-2); outline-offset: 2px; } /* the site's 3 px ring around the box its input sits in */
.find-box input { flex: 1 1 auto; width: 0; min-width: 0; padding: 8px 0; border: 0; background: none; outline: none; color: var(--text); font: 500 .88rem var(--mono); }
.find-box input::placeholder { font-family: var(--body); color: var(--muted); opacity: 1; }
.find-box .find-box__go { flex: none; min-height: 44px; padding: 0 14px; border-radius: 10px; font-size: .9rem; }
.holders__hint { margin: 6px 2px 0; font-size: .8rem; line-height: 1.45; color: var(--muted); }
/* phones: 16 px in the box, so iOS doesn't zoom the page in when it takes the keyboard (the answer's sheet would sit off screen) */
@media (max-width: 600px) { .find-box input { font-size: 16px; } .find-box .find-box__go { padding: 0 12px; } }
/* the rank check's answer: a little pop-up (a modal <dialog>, token.js). On a computer it hangs from the box (token.js sets --pop-x and
   --pop-y; absolute in the top layer, so it scrolls with the page and stays by the box); on a phone it is a compact sheet at the bottom
   of the screen. It scales and fades in from the box in 220 ms and fades out in 140 ms (transform and opacity only); with reduced motion
   it just appears. Closed, it takes no room. */
.rank-pop { position: absolute; inset: auto; top: var(--pop-y, 20vh); left: var(--pop-x, 16px); width: min(420px, calc(100vw - 32px)); max-width: none; max-height: none;
  margin: 0; padding: 0; border: 0; background: none; color: var(--text); overflow: visible; }
.rank-pop::backdrop { background: rgba(3,10,22,.4); } /* ::backdrop does not read custom properties in every browser: the scrim's own navy, per theme */
:root[data-theme="light"] .rank-pop::backdrop { background: rgba(12,35,68,.22); }
.rank-pop__card { padding: 12px 16px 14px 20px; border-radius: 20px; border: 1px solid var(--line-2); background: linear-gradient(180deg, rgba(var(--ink),.06), rgba(var(--ink),.02)), var(--bg-2);
  box-shadow: var(--e3); transform-origin: calc(100% - 50px) 0; }
.rank-pop.is-above .rank-pop__card { transform-origin: calc(100% - 50px) 100%; }
.rank-pop__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-right: -6px; }
.rank-pop__title { margin: 0; font: 600 .78rem/1.2 var(--display); text-transform: uppercase; letter-spacing: .14em; color: var(--pin-2); }
:root[data-theme="light"] .rank-pop__title { color: var(--bad-text); } /* the card tells someone they are not on the list: coral, in both themes' terms */
.rank-pop__close { flex: none; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--muted); cursor: pointer; }
.rank-pop__close:hover { color: var(--text); background: var(--card-2); }
.rank-pop__addr { margin: 0 0 8px; color: var(--muted); font-size: .78rem; line-height: 1.45; word-break: break-all; }
.rank-pop__addr:empty { display: none; }
.rank-pop__big { display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 10px; margin: 0; }
.rank-pop__big strong { font: 700 2.6rem/1.05 var(--display); letter-spacing: -.04em; background: linear-gradient(100deg, var(--text), var(--pin-2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.rank-pop__big strong.is-none { background: none; color: var(--muted); } /* no rank (a wallet holding nothing): a plain dash, not a coloured bar */
.rank-pop .meter { margin: 12px 0 8px; }
.rank-pop__pct { margin: 0; font-weight: 600; color: var(--text-2); }
/* the facts: one compact list (name at the left, value at the right; a long one wraps under its name) */
.rank-pop .rank-facts { grid-template-columns: minmax(0, 1fr); gap: 0; margin: 12px 0 4px; border: 1px solid var(--line); border-radius: 14px; background: var(--card); }
.rank-pop .rank-facts div { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 12px; padding: 8px 12px; border: 0; border-radius: 0; background: none; }
.rank-pop .rank-facts div + div { border-top: 1px solid var(--line); }
.rank-pop .rank-facts dt { font-size: .68rem; }
.rank-pop .rank-facts dd { margin: 0 0 0 auto; font-size: .92rem; text-align: right; }
.rank-pop #rank-show { min-height: 44px; padding: 0; }
/* a phone, or a screen too short for it by the box (a phone on its side; token.js asks the same question): a compact sheet at the bottom
   of the screen (at most 600 px wide, centred), its facts two by two, the name over the value */
@media (max-width: 600px), (max-height: 500px) {
  .rank-pop { position: fixed; top: auto; left: 0; right: 0; bottom: 0; width: auto; max-width: 600px; margin: 0 auto; }
  .rank-pop__card { max-height: calc(100vh - 16px); max-height: calc(100dvh - 16px); overflow-y: auto; overscroll-behavior: contain; border-radius: 20px 20px 0 0; border-bottom: 0;
    padding: 8px 12px calc(10px + env(safe-area-inset-bottom)) 16px; transform-origin: 50% 100%; }
  .rank-pop__head { margin-right: 0; } /* the card scrolls, so it clips: the close button's focus ring stays inside it */
  .rank-pop__addr { margin-bottom: 4px; }
  .rank-pop__big strong { font-size: 2.2rem; }
  .rank-pop .meter { margin: 8px 0 6px; }
  .rank-pop .rank-facts { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); margin-top: 8px; }
  .rank-pop .rank-facts div { display: block; padding: 6px 10px; }
  .rank-pop .rank-facts div + div { border-top: 0; }
  .rank-pop .rank-facts div:nth-child(even) { border-left: 1px solid var(--line); }
  .rank-pop .rank-facts div:nth-child(n+3) { border-top: 1px solid var(--line); }
  .rank-pop .rank-facts dd { margin: 1px 0 0; text-align: left; font-size: .88rem; }
}
@media (prefers-reduced-motion: no-preference) {
  .rank-pop[open] .rank-pop__card { animation: rankPopIn .22s cubic-bezier(.2,.8,.2,1) both; }
  .rank-pop[open]::backdrop { animation: rankFade .22s ease-out both; }
  .rank-pop.is-closing .rank-pop__card { animation: rankPopOut .14s ease-in both; }
  .rank-pop.is-closing::backdrop { animation: rankFade .14s ease-in reverse both; }
}
@media (prefers-reduced-motion: no-preference) and (max-width: 600px), (prefers-reduced-motion: no-preference) and (max-height: 500px) {
  .rank-pop[open] .rank-pop__card { animation-name: rankSheetIn; }
  .rank-pop.is-closing .rank-pop__card { animation-name: rankSheetOut; }
}
@keyframes rankPopIn { from { opacity: 0; transform: scale(.9); } }
@keyframes rankPopOut { to { opacity: 0; transform: scale(.96); } }
@keyframes rankSheetIn { from { opacity: 0; transform: translateY(28px) scale(.98); } }
@keyframes rankSheetOut { to { opacity: 0; transform: translateY(20px); } }
@keyframes rankFade { from { opacity: 0; } }
/* the holder list: a box that scrolls on its own. Once the live list is in it (token.js adds .holders--live) it has a fixed height (about
   60% of the screen, never under 320px or over 640px), so the page stays the same length whether 50 or 50,000 wallets hold the token;
   before launch it is only as tall as its few placeholder rows. The table header stays put while the rows scroll. */
.table-scroll { max-height: clamp(320px, 60vh, 640px); overflow: auto; border-radius: 14px; border: 1px solid var(--line); overscroll-behavior: contain; }
.holders--live .table-scroll { height: clamp(320px, 60vh, 640px); }
.holders__table, .registry__table { width: 100%; border-collapse: collapse; font-size: .94rem; }
.holders__table th, .registry__table th { text-align: left; font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); font-weight: 600; padding: 11px 10px; border-bottom: 1px solid var(--line); }
.holders__table thead th { position: sticky; top: 0; background: var(--bg-3); z-index: 1; }
.holders__table td, .registry__table td { padding: 11px 10px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.holders__table tr:last-child td, .registry__table tr:last-child td { border-bottom: 0; }
.holders__table .num { text-align: right; font-variant-numeric: tabular-nums; }
.holders__table td:first-child { color: var(--muted); font-variant-numeric: tabular-nums; width: 56px; }
.holders__table a { font-family: var(--mono); color: var(--text); text-decoration: none; }
.holders__table a:hover { color: var(--pin-2); }
.holders__table .tag { margin-left: 8px; }
.holders__table tr.is-me td { background: var(--gold-soft); }
.holders__table tr.is-me td:first-child { box-shadow: inset 3px 0 0 var(--gold); }
.holders__table tr.skeleton span { display: inline-block; height: 10px; width: 70%; border-radius: 6px; background: linear-gradient(90deg, var(--card-2), rgba(var(--ink),.12), var(--card-2)); background-size: 200% 100%; animation: shimmer 1.6s linear infinite; }
@keyframes shimmer { to { background-position: -200% 0; } }
.pct-bar { display: inline-block; vertical-align: middle; width: 60px; height: 6px; border-radius: 3px; background: rgba(var(--ink),.08); margin-left: 8px; overflow: hidden; }
.pct-bar span { display: block; height: 100%; background: var(--pin); }
@media (max-width: 560px) { .pct-bar { display: none; } .holders__table, .registry__table { font-size: .84rem; } }
.registry { margin-bottom: 18px; overflow-x: auto; padding: 12px 16px; }
.registry__table code { font-size: .8rem; word-break: break-all; }
/* Phones: both tables fit the card, nothing hides off to the side (measured 3 Oct 2026 at 320-414px: the official list's Status
   column and Live tag and the holder list's % of supply sat outside their cards, reachable only by an unmarked sideways swipe).
   Each row becomes a small grid. Holder list: # | wallet (its label below it) | amount over % of supply; the header row stays
   pinned. Official list: network over token, status at the right, the full contract below. */
@media (max-width: 480px) {
  .holders { padding: 12px; }
  .holders__table, .holders__table thead, .holders__table tbody { display: block; }
  .holders__table thead { position: sticky; top: 0; z-index: 1; background: var(--bg-3); border-bottom: 1px solid var(--line); }
  .holders__table tr { display: grid; grid-template-columns: 2.8em minmax(0, 1fr) auto; border-bottom: 1px solid var(--line); }
  .holders__table thead tr, .holders__table tbody tr:last-child { border-bottom: 0; }
  .holders__table th, .holders__table td { border-bottom: 0; padding: 9px 6px; }
  .holders__table thead th { position: static; background: none; padding-bottom: 6px; letter-spacing: .06em; }
  .holders__table td:first-child { width: auto; }
  /* "Team" and "Pool" (not ranked) in the narrow # column: at the row's size "Team" ran into the wallet ("Team13qRa*****RiN", 1.6px apart).
     A label's size instead (the line box kept: the same height as the rows'), so the wallet's column stays as wide as before */
  .holders__table td.is-unranked { font-size: .7rem; line-height: 2; }
  .holders__table :is(th, td):nth-child(1) { grid-column: 1; grid-row: 1 / span 2; }
  .holders__table :is(th, td):nth-child(2) { grid-column: 2; grid-row: 1 / span 2; }
  .holders__table :is(th, td):nth-child(3) { grid-column: 3; grid-row: 1; padding-bottom: 0; text-align: right; }
  .holders__table :is(th, td):nth-child(4) { grid-column: 3; grid-row: 2; padding-top: 2px; text-align: right; }
  .holders__table td:nth-child(4) { color: var(--muted); font-size: .78rem; }
  .holders__table a { overflow-wrap: anywhere; }
  .holders__table .tag { margin: 4px 0 0; border-radius: 10px; font-size: .68rem; }
  .registry { padding: 4px 14px; }
  .registry__table, .registry__table tbody { display: block; }
  .registry__table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .registry__table tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 10px; padding: 12px 0; border-bottom: 1px solid var(--line); }
  .registry__table tr:last-child { border-bottom: 0; }
  .registry__table td { padding: 0; border-bottom: 0; }
  .registry__table td:nth-child(1) { grid-column: 1; grid-row: 1; font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
  .registry__table td:nth-child(2) { grid-column: 1; grid-row: 2; font-weight: 600; }
  .registry__table td:nth-child(3) { grid-column: 1 / -1; grid-row: 3; margin-top: 6px; }
  .registry__table td:nth-child(3):not(:has(code)) { display: none; } /* no contract yet: the status at the right already says so */
  .registry__table td:nth-child(4) { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
}
.checker { display: flex; gap: 12px; padding: 10px; max-width: 760px; }
.checker input { flex: 1; }
@media (max-width: 520px) { .checker { flex-direction: column; } }
.check-result { max-width: 760px; margin-top: 16px; padding: 18px 20px; border-radius: 16px; display: flex; gap: 14px; align-items: flex-start; border: 1px solid; }
.check-result__icon { flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; }
.check-result p { margin: 0; }
.check-result--official { background: rgba(var(--ok-rgb),.1); border-color: rgba(var(--ok-rgb),.45); }
.check-result--official .check-result__icon { background: var(--ok-text); color: var(--on-accent); }
.check-result--not_official { background: var(--bad-soft); border-color: rgba(var(--bad-rgb),.5); }
.check-result--not_official .check-result__icon { background: var(--bad-text); color: var(--on-accent); } /* not official is coral, never the accent */
.check-result--warning, .check-result--unknown, .check-result--empty { background: var(--warn-soft); border-color: rgba(var(--warn-rgb),.4); }
.check-result--warning .check-result__icon, .check-result--unknown .check-result__icon, .check-result--empty .check-result__icon { background: var(--gold); color: var(--on-gold); }

/* ---------- cities page: the map first, then the numbers, then what the page is for ---------- */
.page-hero--map { padding: 28px 0 10px; }
@media (max-width: 600px) { .page-hero--map { padding-top: 12px; } }
.city-stats { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; margin: 0 0 30px; }
.city-stats div { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 12px 14px; min-width: 0; }
.city-stats strong { display: block; font: 650 1.45rem/1.1 var(--display); letter-spacing: -.02em; }
.city-stats span { display: block; color: var(--muted); font-size: .8rem; line-height: 1.3; margin-top: 2px; }
@media (max-width: 900px) { .city-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 520px) {
  .city-stats { gap: 8px; margin-bottom: 24px; grid-auto-rows: 1fr; } /* both rows as tall as the taller one ("verified members" takes two lines) */
  .city-stats div { padding: 10px 9px; border-radius: 14px; } /* "communities" and "verified members" keep inside their cards */
  .city-stats strong { font-size: clamp(1.05rem, 4.8vw, 1.3rem); }
  .city-stats span { font-size: .74rem; }
}
@media (max-width: 360px) { .city-stats span { font-size: .7rem; } }
.cities-intro { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px 56px; align-items: end; padding-bottom: 14px; }
.cities-intro .lead { margin: 0; }
@media (max-width: 1100px) { .cities-intro { grid-template-columns: minmax(0, 1fr); gap: 14px; } }
/* The map stage (the owner, 6 Oct 2026: "make the map look bigger"): most of the screen. Computers: the wrap's width, as tall as the
   window allows under the header; tablets: 70% of the window; phones: edge to edge (the stage leaves the wrap's side padding), from
   the header to just above the tab bar, with the legend's first line still showing below. ⤢ puts it over the whole screen (.is-full). */
.wrap { --wrap-pad: 24px; }
@media (max-width: 480px) { .wrap { --wrap-pad: 16px; } }
.citymap { position: relative; padding: 12px; margin-bottom: 14px; }
.citymap__stage { position: relative; height: 560px; height: clamp(560px, calc(100vh - 186px), 780px); border-radius: 18px; overflow: hidden; isolation: isolate; background: var(--map-bg); }
.citymap canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
#city-canvas { background: var(--map-bg); cursor: grab; touch-action: pan-y; box-shadow: inset 0 0 80px rgba(2,8,20,.55); transform-origin: 0 0; }
.citymap__layer { pointer-events: none; }
.citymap canvas.is-dragging { cursor: grabbing; }
.citymap canvas.is-colored { background: radial-gradient(120% 90% at 55% 45%, #10345a, #081a30); }
:root[data-theme="light"] .citymap canvas.is-colored { background: radial-gradient(120% 90% at 55% 45%, #cfe6f7, #aecfeb); }
.citymap canvas:focus-visible { outline: 3px solid var(--pin-2); outline-offset: -3px; }
@media (max-width: 1023px) { .citymap__stage { height: clamp(480px, 70vh, 760px); } }
@media (max-width: 600px) {
  .citymap { padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
  .citymap__stage { margin-inline: calc(-1 * var(--wrap-pad)); border-radius: 0; height: clamp(420px, calc(100vh - 206px), 820px); height: clamp(420px, calc(100svh - 206px - env(safe-area-inset-bottom)), 820px); }
  .citymap__legend { margin-inline: 0; }
}
.citymap__stage.is-full { position: fixed; inset: 0; z-index: 90; height: 100vh; height: 100dvh; margin: 0; border-radius: 0; }
html.map-is-full, html.map-is-full body { overflow: hidden; }
.citymap__tip { position: absolute; pointer-events: none; background: var(--glass); border: 1px solid var(--line-2); border-radius: 10px; padding: 6px 10px; font-size: .82rem; margin: 0; white-space: nowrap; transform: translate(-50%, calc(-100% - 10px)); line-height: 1.4; box-shadow: 0 10px 30px -10px rgba(2,8,20,.8); }
.tip-claimed { color: var(--bad-text); font-weight: 600; } .tip-open { color: var(--ok-text); font-weight: 600; } .tip-ticker { color: var(--gold); font-weight: 700; }
.tip-area { color: var(--muted); font-size: .76rem; }
.citymap__legend { font-size: .8rem; color: var(--muted); margin: 10px 4px 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.citymap__how { color: var(--muted); } /* 12 px: --faint read 4.0:1 (dark) and 3.6:1 (light) on the map card */
.dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 2px; }
.dot--open { background: var(--st-open); box-shadow: 0 0 6px var(--st-open); } .dot--claimed { background: var(--st-founded); box-shadow: 0 0 8px var(--st-founded); } .dot--mine { background: var(--st-mine); box-shadow: 0 0 8px var(--st-mine); }
.line { display: inline-block; width: 22px; height: 0; vertical-align: middle; margin-right: 2px; border-top: 2px solid var(--map-area-line); }
.line--near { border-top-style: dashed; }
.map-ctrl { position: absolute; right: 12px; top: 12px; z-index: 3; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.citymap__stage.is-full .map-ctrl { top: max(12px, env(safe-area-inset-top)); right: max(12px, env(safe-area-inset-right)); }
.map-ctrl button { width: 38px; height: 38px; border-radius: 12px; border: 1px solid var(--line-2); background: var(--glass); color: var(--text); font: 600 1.15rem var(--body); cursor: pointer; backdrop-filter: blur(8px); transition: background .2s, transform .2s; }
.map-ctrl button:hover { background: rgba(var(--accent-rgb),.25); transform: translateY(-1px); }
.map-ctrl button { position: relative; }
.map-ctrl button::after { content: ""; position: absolute; inset: -3px; border-radius: inherit; } /* a 44 px touch target without a bigger button */
.map-ctrl span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* the zoom, for screen readers: the scale bar shows it */
#map-locate.is-busy { animation: spin 1.2s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (max-width: 600px) { .map-ctrl { gap: 8px; right: 10px; top: 10px; } .map-ctrl button { width: 36px; height: 36px; border-radius: 11px; font-size: 1rem; } .map-ctrl button::after { inset: -4px; } .citymap__how { display: none; } }
.map-hint { position: absolute; z-index: 3; left: 50%; top: 14px; transform: translate(-50%, 8px); margin: 0; background: var(--glass); border: 1px solid var(--line-2); border-radius: 999px; padding: 7px 14px; font-size: .82rem; opacity: 0; pointer-events: none; transition: opacity .25s, transform .25s; white-space: nowrap; }
.map-hint.is-shown { opacity: 1; transform: translate(-50%, 0); }
/* Map status colours (cities.js reads them): open, choosing its founder, founded, yours; the chips' background */
:root { --st-open: #7FA3D6; --st-choosing: #FFA94D; --st-founded: #F8C13A; --st-mine: #FFFFFF; --chip-bg: rgba(7,20,38,.82); }
:root[data-theme="light"] { --st-open: #3F67A6; --st-choosing: #B35A0A; --st-founded: #A26F00; --st-mine: #0C2344; --chip-bg: rgba(255,255,255,.92); }
/* ✕ (full screen only) and the scale bar (bottom left, above the city card) */
.map-exit { position: absolute; z-index: 3; left: max(12px, env(safe-area-inset-left)); top: max(12px, env(safe-area-inset-top)); width: 44px; height: 44px; border-radius: 12px; border: 1px solid var(--line-2); background: var(--glass); color: var(--text); font: 600 1.1rem var(--body); cursor: pointer; backdrop-filter: blur(8px); }
.map-scale { position: absolute; z-index: 2; left: 14px; bottom: 136px; margin: 0; display: grid; gap: 2px; font: 600 11px/1.2 var(--body); color: var(--text-2); text-shadow: 0 0 3px var(--map-halo), 0 0 3px var(--map-halo); pointer-events: none; }
.map-scale__bar { display: block; width: 80px; height: 6px; border: 1.5px solid currentColor; border-top: 0; }
.citymap__stage.is-folded .map-scale { bottom: 72px; }
/* The city in focus: the city under the crosshair, with everything the computer's hover card says, always shown (the owner: "no tapping
   required for a city on mobile to see its stats"). Fixed height (no layout shift), glass, a 3 px bar in the city's status colour. */
.map-focus { position: absolute; z-index: 2; left: 10px; right: 10px; bottom: 10px; height: 116px; display: grid; grid-template-columns: minmax(0, 1fr) 44px; gap: 6px; align-items: stretch;
  padding: 7px 6px 7px 15px; border-radius: 16px; background: var(--glass); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border: 1px solid var(--line-2); box-shadow: 0 14px 40px -18px rgba(2,8,20,.7); overflow: hidden; --focus: var(--st-open); }
.map-focus::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--focus); pointer-events: none; }
.map-focus[data-status="choosing"] { --focus: var(--st-choosing); } .map-focus[data-status="founded"] { --focus: var(--st-founded); } .map-focus[data-status="mine"] { --focus: var(--st-mine); } .map-focus[data-status="none"] { --focus: var(--line-2); }
@media (min-width: 720px) { .map-focus { right: auto; left: 12px; bottom: 12px; width: 360px; } }
.map-focus__body { min-width: 0; display: grid; align-content: center; transition: opacity .14s ease; }
.map-focus.is-swapping .map-focus__body { opacity: 0; }
.map-focus p { margin: 0; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 12px; line-height: 16.5px; color: var(--muted); }
.map-focus .map-focus__r1 { display: flex; align-items: center; gap: 6px; height: 24px; color: var(--text); }
.map-focus__dot { position: relative; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--focus); }
.map-focus__dot::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--focus); opacity: 0; pointer-events: none; }
.map-focus__name { flex: 0 0 auto; max-width: 66%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 600 17px/1.2 var(--display); letter-spacing: -.01em; }
.map-focus__ticker { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--gold-text); font: 700 13px/1 var(--body); letter-spacing: .01em; } /* a narrow card shortens the ticker before the name */
.map-focus__mini { display: none; }
.map-focus__status { flex: none; margin-left: auto; font-size: .7rem; padding: 1px 8px; }
.map-focus .map-focus__amount { color: var(--text-2); font-size: 13px; }
.map-focus__line a { color: var(--gold-text); font-weight: 600; }
.map-focus__side { display: flex; flex-direction: column; justify-content: space-between; align-items: center; }
.map-focus__btn { width: 44px; height: 44px; border-radius: 12px; border: 1px solid var(--line-2); background: var(--card-2); color: var(--text); font: 600 1.25rem/1 var(--body); cursor: pointer; display: grid; place-items: center; padding: 0; }
.map-focus__btn:disabled { opacity: .45; cursor: default; }
.map-focus__fold { border-color: transparent; background: none; color: var(--muted); font-size: .85rem; }
/* folded: one line (name, ticker, status, founder amount) */
.map-focus.is-folded { height: 52px; grid-template-columns: minmax(0, 1fr) auto; padding: 3px 4px 3px 15px; }
.map-focus.is-folded .map-focus__where, .map-focus.is-folded .map-focus__amount, .map-focus.is-folded .map-focus__area, .map-focus.is-folded .map-focus__line, .map-focus.is-folded .map-focus__status { display: none; }
.map-focus.is-folded .map-focus__mini { display: block; flex: 1 1 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; font-size: 12px; color: var(--text-2); }
.map-focus.is-folded .map-focus__side { flex-direction: row; gap: 2px; }
/* loading: grey lines where the facts will be */
.map-focus.is-loading .map-focus__where, .map-focus.is-loading .map-focus__amount, .map-focus.is-loading .map-focus__area, .map-focus.is-loading .map-focus__line { height: 9px; margin: 3px 0 4px; border-radius: 6px; width: 70%;
  background: linear-gradient(90deg, rgba(var(--ink),.06) 30%, rgba(var(--ink),.14) 50%, rgba(var(--ink),.06) 70%) 0 0 / 200% 100%; }
.map-focus.is-loading .map-focus__amount { width: 55%; } .map-focus.is-loading .map-focus__area { width: 85%; } .map-focus.is-loading .map-focus__line { width: 45%; }
/* the legend: small markers like the map's (an open city glows, a choosing city has a dashed ring, a founded city and yours ping three
   times after the page opens, then rest) */
.dot { position: relative; }
.dot--open { background: var(--st-open); box-shadow: 0 0 6px var(--st-open); }
.dot--claimed::after, .dot--mine::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: inherit; opacity: 0; pointer-events: none; }
@media (prefers-reduced-motion: no-preference) {
  .map-focus__dot::after { animation: livePing 1.6s cubic-bezier(0,0,.2,1) 3; }
  .map-focus.is-loading .map-focus__where, .map-focus.is-loading .map-focus__amount, .map-focus.is-loading .map-focus__area, .map-focus.is-loading .map-focus__line { animation: shimmer 1.4s linear infinite; } /* busy: ends with the loading state */
  .dot--claimed::after { animation: livePing 1.6s cubic-bezier(0,0,.2,1) 3; }
  .dot--mine::after { animation: livePing 1.6s cubic-bezier(0,0,.2,1) 3; }
  /* the map's glow layer, once it rests (public/cities.js FX_AWAKE_MS): its still frame fades up once, on the compositor */
  .citymap #city-fx.is-resting { animation: fxRest 3.6s steps(18) 1; }
}
@keyframes fxRest { from { opacity: .6; } to { opacity: 1; } }
@media (max-width: 600px) {
  .citymap__legend { font-size: 12px; gap: 4px 10px; margin-top: 10px; }
}
.claim-feed-wrap { margin-top: 12px; border-top: 1px solid var(--line); padding-top: 12px; }
.claim-feed { list-style: none; margin: 0; padding: 0 0 4px; display: flex; gap: 8px; overflow-x: auto; scrollbar-width: thin; }
.claim-feed li { flex: none; background: var(--card-2); border: 1px solid var(--line); border-radius: 999px; padding: 6px 12px; font-size: .84rem; white-space: nowrap; }
.claim-feed li.is-new { animation: feedIn .8s cubic-bezier(.2,1.4,.4,1); border-color: rgba(var(--accent-rgb),.6); }
@keyframes feedIn { from { opacity: 0; transform: translateY(8px) scale(.96); } to { opacity: 1; transform: none; } }
.claim-feed li.claim-feed__empty { color: var(--muted); white-space: normal; flex: 1 1 auto; border-radius: 14px; }
.claim-feed__city { background: none; border: 0; color: var(--text); font: 600 .84rem var(--body); cursor: pointer; padding: 0; }
.claim-feed__city:hover { color: var(--pin-2); }
.citybox { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.citybox > * { min-width: 0; }
@media (max-width: 900px) { .citybox { grid-template-columns: minmax(0, 1fr); } }
.city-search__row { display: flex; gap: 8px; flex-wrap: wrap; }
.city-search input { flex: 1 1 220px; }
.city-search select { flex: 0 1 auto; max-width: 100%; }
@media (max-width: 520px) { .city-search select { flex: 1 1 40%; } }
.city-list { list-style: none; margin: 14px 0 6px; padding: 0; max-height: 440px; overflow-y: auto; overscroll-behavior: contain; }
.city-list li { border-bottom: 1px solid var(--line); }
.city-row { width: 100%; display: flex; align-items: center; gap: 10px; background: none; border: 0; color: var(--text); text-align: left; padding: 11px 6px; border-radius: 10px; cursor: pointer; font: inherit; }
.city-row:hover, .city-row.is-selected { background: var(--card-2); }
.city-row__name { flex: 1; min-width: 0; }
.city-row__name strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.city-row__name span { color: var(--muted); font-size: .8rem; }
.city-row .tag { flex: none; }
.claim { scroll-margin-top: 84px; }
.claim h3 { font-size: 1.5rem; }
.area-note { display: inline-block; margin-top: 4px; font-size: .8rem; color: var(--ok-text); }
.area-note::before { content: "▣ "; }
.area-note--near { color: var(--muted); }
.area-note--near::before { content: "⬚ "; }
.shared-note { display: inline-block; margin-top: 4px; font-size: .8rem; color: var(--text-2); }
.shared-note::before { content: "🪙 "; }
.nearby-list { list-style: none; margin: 10px 0; padding: 0; display: grid; gap: 6px; }
.nearby-list .city-row { border: 1px solid var(--line); }
.coin-preview { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 16px; align-items: center; margin: 16px 0 6px; padding: 14px 16px; border-radius: 16px; background: linear-gradient(135deg, rgba(var(--gold-rgb),.10), rgba(var(--accent-rgb),.06)); border: 1px solid rgba(var(--gold-rgb),.28); }
.coin-disc { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; flex: none; background: radial-gradient(circle at 32% 28%, #FFE9A8, var(--gold) 45%, #D99A1A 100%); box-shadow: inset 0 -4px 10px rgba(120,60,0,.45), inset 0 3px 6px rgba(255,255,255,.6), 0 10px 24px -8px rgba(var(--gold-rgb),.55); border: 3px solid rgba(255,236,190,.8); }
.coin-disc span { font: 800 .9rem/1 var(--display); color: var(--on-gold); letter-spacing: .02em; text-shadow: 0 1px 0 rgba(255,255,255,.5); max-width: 90%; overflow: hidden; }
.coin-disc.is-flip { animation: coinFlip .9s cubic-bezier(.3,1.4,.5,1); }
@keyframes coinFlip { 0% { transform: rotateY(0) scale(.7); opacity: .3; } 60% { transform: rotateY(540deg) scale(1.08); opacity: 1; } 100% { transform: rotateY(720deg) scale(1); } }
.coin-disc--lg { width: 104px; height: 104px; }
.coin-disc--lg span { font-size: 1.05rem; }
.coin-preview__text { display: flex; flex-direction: column; min-width: 0; }
.coin-preview__text strong { font: 700 1.45rem/1.1 var(--display); color: var(--gold-text); letter-spacing: -.01em; }
.coin-preview__label { margin: 0 0 2px; font-size: .7rem; text-transform: uppercase; letter-spacing: .14em; color: var(--gold); font-weight: 700; }
.coin-preview__note, .coin-same { grid-column: 1 / -1; margin: 4px 0 0; }
.coin-same { color: var(--warn); }
.mod-row, .members-row { display: flex; gap: 10px; align-items: flex-start; margin: 10px 0 0; padding: 10px 12px; border-radius: 12px; background: var(--card); border: 1px solid var(--line); color: var(--muted); }
.mod-row a { color: var(--pin-2); }
.reqs { list-style: none; padding: 0; margin: 18px 0; display: grid; gap: 12px; }
.reqs li, .onboard__steps li { display: flex; gap: 12px; align-items: flex-start; }
.reqs li p { margin: 2px 0 0; }
.req__dot { flex: none; width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--line-2); margin-top: 2px; display: grid; place-items: center; font-size: .75rem; font-weight: 800; }
.is-ok > .req__dot { background: var(--ok-text); border-color: var(--ok-text); color: var(--on-accent); }
.is-ok > .req__dot::after { content: "✓"; }
.is-bad > .req__dot { border-color: var(--bad-text); color: var(--bad-text); }
.is-bad > .req__dot::after { content: "!"; }
.is-busy > .req__dot { border-color: var(--pin); border-top-color: transparent; animation: spin 1s linear infinite; }
.reqs--static .req__dot { border-style: dashed; }
#claim-btn { white-space: normal; text-align: center; line-height: 1.25; padding-top: 10px; padding-bottom: 10px; }
.claim-note { margin-bottom: 0; }
.wanted { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(250px, 100%), 1fr)); gap: 12px; counter-reset: w; }
.wanted li { display: flex; gap: 12px; align-items: center; background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 12px 14px; counter-increment: w; }
.wanted li::before { content: counter(w); font: 700 1rem var(--display); color: var(--muted); width: 22px; }
.wanted .muted::before, .wanted li.muted::before { content: none; }
.wanted strong { display: block; }
.wanted span { font-size: .82rem; color: var(--muted); }
.wanted .tag { margin-left: auto; }

/* ---------- launchpad ---------- */
.launch-hero { position: relative; overflow: hidden; isolation: isolate; padding: 70px 0 80px; text-align: center; }
.launch-hero__bg { position: absolute; inset: 0; z-index: -1; }
.stars { position: absolute; inset: 0; background-image: radial-gradient(1.5px 1.5px at 20% 30%, rgba(var(--ink),.5), transparent), radial-gradient(1px 1px at 70% 20%, rgba(var(--ink),.4), transparent), radial-gradient(1.5px 1.5px at 40% 80%, rgba(var(--ink),.35), transparent), radial-gradient(1px 1px at 85% 65%, rgba(var(--ink),.45), transparent), radial-gradient(1px 1px at 10% 70%, rgba(var(--ink),.4), transparent); background-size: 420px 420px; opacity: .7; }
.launch-hero__inner { display: flex; flex-direction: column; align-items: center; }
.launch-hero .lead { margin: 0 auto; }
.countdown { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin: 38px auto 18px; width: min(720px, 100%); }
.countdown__unit { background: linear-gradient(180deg, rgba(var(--ink),.08), rgba(var(--ink),.02)); border: 1px solid var(--line-2); border-radius: 22px; padding: 22px 8px 16px; position: relative; overflow: hidden; box-shadow: var(--shadow); }
.countdown__unit::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: rgba(var(--ink),.08); }
.countdown__unit strong { display: block; font: 700 clamp(2.4rem, 8vw, 4.4rem)/1 var(--display); letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.countdown__unit strong.is-tick { animation: tick .5s cubic-bezier(.2,1.4,.4,1); }
@keyframes tick { from { transform: translateY(-8px); opacity: .3; } }
.countdown__unit span { font-size: .78rem; text-transform: uppercase; letter-spacing: .14em; color: var(--muted); font-weight: 600; }
.launch-progress { width: min(720px, 100%); height: 8px; border-radius: 6px; background: rgba(var(--ink),.08); overflow: hidden; }
.launch-progress span { display: block; height: 100%; width: 0; background: var(--pin); transition: width 1s; }
.phases { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 900px) { .phases { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
@media (max-width: 520px) { .phases { grid-template-columns: minmax(0, 1fr); } }
.phase__n { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: linear-gradient(135deg, var(--cta-a), var(--cta-b)); color: var(--on-cta); font: 700 1rem var(--display); margin-bottom: 12px; }
.phase p { margin: 0; }
.perk__icon { font-size: 1.8rem; display: block; margin-bottom: 10px; }
.perk p { margin: 0 0 8px; }
.coin-stack { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; justify-content: center; padding: 36px; }
.coin-stack .coin-disc:nth-child(2) { transform: translateY(-14px); }
.coin-stack p { flex-basis: 100%; text-align: center; margin: 0; }

/* ---------- connect ---------- */
.connect { padding: 50px 0 90px; }
.connect__grid { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: 44px; align-items: start; }
@media (max-width: 900px) { .connect__grid { grid-template-columns: minmax(0, 1fr); gap: 24px; } .connect__intro .safety { display: none; } }
.stepper { list-style: none; margin: 22px 0; padding: 0; display: grid; gap: 10px; }
.stepper li { display: flex; align-items: center; gap: 12px; color: var(--muted); font-weight: 600; }
.stepper__n { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; border: 2px solid var(--line-2); font: 700 .9rem var(--display); }
.stepper li.is-active { color: var(--text); }
.stepper li.is-active .stepper__n { border-color: var(--pin); background: rgba(var(--accent-rgb),.15); color: var(--pin-2); }
.stepper li.is-done .stepper__n { border-color: var(--ok-text); background: var(--ok-text); color: var(--on-accent); font-size: 0; }
.stepper li.is-done .stepper__n::after { content: "✓"; font-size: .9rem; }
@media (max-width: 900px) { .stepper { grid-template-columns: repeat(3, minmax(0, 1fr)); } .stepper li { flex-direction: column; text-align: center; font-size: .78rem; gap: 6px; } }
.safety { list-style: none; padding: 0; margin: 22px 0 0; display: grid; gap: 10px; }
.safety li { position: relative; padding-left: 30px; color: var(--text-2); }
.safety li::before { content: "🛡"; position: absolute; left: 0; top: 0; }
.connect__panel { min-height: 420px; }
.cstate { display: grid; gap: 14px; justify-items: stretch; }
.cstate > h2 { margin-bottom: 0; }
.cstate[data-state="sign"], .cstate[data-state="social"], .cstate[data-state="done"], .cstate[data-state="phone"] { justify-items: center; text-align: center; }
.wallet__icon { width: 72px; height: 72px; border-radius: 22px; display: grid; place-items: center; background: var(--card-2); border: 1px solid var(--line-2); }
.wallet-list { display: grid; gap: 8px; }
.wallet-option { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 16px; border-radius: 14px; background: var(--card); border: 1px solid var(--line-2); color: var(--text); font: 600 1rem var(--body); cursor: pointer; transition: border-color .2s, background .2s, transform .2s; text-decoration: none; }
.wallet-option:hover { border-color: rgba(var(--accent-rgb),.6); background: var(--card-2); transform: translateY(-1px); }
.wallet-option img, .wallet-mark { width: 30px; height: 30px; border-radius: 9px; flex: none; }
.wallet-mark { display: grid; place-items: center; font: 800 .82rem var(--display); color: #fff; }
.wallet-option .detected { margin-left: auto; font-size: .75rem; color: var(--ok-text); font-weight: 700; }
.wallet-option .go { margin-left: auto; font-size: .78rem; color: var(--muted); font-weight: 600; }
.wallet-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(150px, 100%), 1fr)); gap: 8px; margin-top: 10px; }
.wallet-grid .wallet-option { padding: 10px 12px; font-size: .9rem; }
.wallet-grid .wallet-option .go { display: none; }
/* a phone with no wallet in the browser: the wallet apps are the way on, one full row each that says "Open app" */
.wallet-grid--apps { grid-template-columns: minmax(0, 1fr); }
.wallet-grid--apps .wallet-option .go { display: inline; }
#pair-apps { justify-self: stretch; }
.wallet-option[aria-busy="true"] { border-color: rgba(var(--accent-rgb),.6); cursor: progress; }
.more-wallets summary { cursor: pointer; color: var(--text-2); font-weight: 600; }
.login-block { display: grid; gap: 10px; }
.login-block[hidden] { display: none; }
.or-line { display: flex; align-items: center; gap: 12px; margin: 18px 0 14px; color: var(--muted); font-size: .8rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; }
.or-line::before, .or-line::after { content: ""; flex: 1; height: 1px; background: var(--line-2); }
.callout { padding: 10px 12px; border-radius: 12px; background: var(--warn-soft); border: 1px solid rgba(var(--warn-rgb),.35); color: var(--text-2); }
.alt-ways { display: grid; gap: 8px; border-top: 1px solid var(--line); padding-top: 14px; }
.alt { display: flex; gap: 12px; align-items: flex-start; text-align: left; width: 100%; padding: 12px 14px; border-radius: 14px; border: 1px dashed var(--line-2); background: transparent; color: var(--text); font: inherit; cursor: pointer; text-decoration: none; transition: border-color .2s, background .2s; }
.alt:hover { border-color: rgba(var(--accent-rgb),.55); background: var(--card); }
.alt strong { display: block; }
.alt em { font-style: normal; color: var(--muted); font-size: .86rem; }
.addr { display: inline-flex; align-items: center; gap: 10px; padding: 10px 16px; border-radius: 999px; background: var(--card-2); border: 1px solid var(--line-2); font-family: var(--mono); font-size: .92rem; max-width: 100%; overflow: hidden; }
.addr--center { justify-content: center; margin: 0 auto; }
.addr__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--gold); flex: none; }
.msg-preview { width: 100%; text-align: left; }
.msg-preview summary { cursor: pointer; color: var(--muted); font-size: .88rem; }
.msg-preview pre { white-space: pre-wrap; word-break: break-all; font-size: .78rem; background: var(--code-bg); border: 1px solid var(--line); border-radius: 12px; padding: 14px; color: var(--text-2); max-height: 220px; overflow: auto; }
.verified-badge { width: 80px; height: 80px; border-radius: 50%; display: grid; place-items: center; font-size: 2.2rem; font-weight: 800; color: var(--on-accent); background: var(--ok-text); box-shadow: inset 0 2px 8px rgba(255,255,255,.25), 0 0 0 10px var(--ok-soft), 0 20px 50px -10px rgba(var(--ok-rgb),.5); animation: popIn .6s cubic-bezier(.2,1.6,.4,1); margin: 0 auto; }
.verified-badge.is-gold { color: var(--on-gold); background: radial-gradient(circle at 30% 30%, #FFE9A8, var(--gold)); box-shadow: 0 0 0 10px var(--gold-soft), 0 20px 50px -10px rgba(var(--gold-rgb),.6); }
@keyframes popIn { from { transform: scale(.3); opacity: 0; } }
.wallet__error { color: var(--bad-text); font-size: .92rem; margin: 10px 0 0; }
.wallet__wait { margin: 10px 0 0; }
.qr { background: #fff; padding: 12px; border-radius: 18px; box-shadow: var(--shadow); }
.qr canvas { width: 232px; height: 232px; image-rendering: pixelated; }
.pin-row { margin: 0; }
.pin { font: 700 1.7rem var(--display); letter-spacing: .12em; color: var(--gold-text); background: var(--gold-soft); border: 1px solid rgba(var(--gold-rgb),.4); border-radius: 12px; padding: 2px 12px; }
.howto { margin: 0; padding-left: 20px; display: grid; gap: 4px; color: var(--text-2); text-align: left; }
.tp-form { display: grid; gap: 8px; }
.tp-form label { font-size: .85rem; color: var(--muted); }
.tp-form input { font-family: var(--mono); font-size: .9rem; }
.tp-code { text-align: center; background: var(--card); border: 1px solid var(--line-2); border-radius: 18px; padding: 18px; }
.big-amount { margin: 4px 0 8px; }
.big-amount strong { font: 700 2.4rem var(--display); letter-spacing: -.02em; color: var(--gold-text); }
.tp-copy { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-bottom: 10px; }
.approve-done { text-align: center; }
/* sign-up v2, the wallet app's approve view: connect.js hides the old hero, so the card stands alone at the top */
.connect__grid:has(> .connect__intro[hidden]) { grid-template-columns: minmax(0, 560px); justify-content: center; }
.approve-tap { margin: 0; font-weight: 700; color: var(--text); }

/* ---------- connect: sign-up v2 (hidden unless public/signup.js turns it on: SIGNUP_FLOW = "v2") ---------- */
.su-top { display: grid; gap: 14px; margin-bottom: 18px; }
.su-tabs { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 4px; padding: 4px; border-radius: 999px; background: var(--card-2); border: 1px solid var(--line-2); }
.su-tab { min-height: 44px; border: 0; border-radius: 999px; background: transparent; color: var(--muted); font: 700 .95rem var(--body); cursor: pointer; transition: background .2s, color .2s; }
.su-tab:hover { color: var(--text); }
.su-tab[aria-pressed="true"] { background: linear-gradient(135deg, var(--cta-a), var(--cta-b)); color: var(--on-cta); box-shadow: var(--glow-cta); }
.stepper--bar { grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; gap: 6px; }
.stepper--bar li { display: block; text-align: center; font-size: .78rem; }
.stepper__btn { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 100%; min-height: 44px; padding: 4px 2px; background: none; border: 0; border-radius: 12px; color: inherit; font: inherit; cursor: pointer; }
.stepper__btn:disabled { cursor: default; }
.stepper__btn:not(:disabled):hover .stepper__n { border-color: var(--pin-2); }
.stepper--bar li.is-done .stepper__btn:not(:disabled) > span:nth-child(2) { text-decoration: underline; text-underline-offset: 3px; }
.su-note { margin: 0; }
.su-form { display: grid; gap: 14px; width: 100%; }
.su-field { display: grid; gap: 6px; min-width: 0; }
.su-field label { font-size: .85rem; font-weight: 700; color: var(--text-2); }
.su-field input { width: 100%; min-width: 0; min-height: 48px; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--field-line); background: var(--card-2); color: var(--text); font: 500 1rem var(--body); }
.su-field input:focus { outline: 2px solid var(--pin-2); outline-offset: 1px; }
.su-field input[aria-invalid="true"] { border-color: var(--bad-text); }
.su-field input[name="code"] { letter-spacing: .5em; text-align: center; font-size: 1.4rem; font-weight: 800; }
.su-pw { position: relative; }
.su-pw input { padding-right: 82px; }
.su-pw__toggle { position: absolute; right: 2px; top: 50%; transform: translateY(-50%); min-width: 68px; min-height: 44px; padding: 0 12px; border: 0; border-radius: 10px; background: none; color: var(--pin-2); font: 700 .85rem var(--body); cursor: pointer; }
.su-hint { margin: 0; color: var(--muted); font-size: .85rem; }
.su-hint[data-level="good"] { color: var(--ok-text); }
/* error lines stay in the page (a screen reader only announces text that APPEARS inside one that already exists), they just take no room while empty */
.su-err { margin: 0; color: var(--bad-text); font-size: .9rem; overflow-wrap: anywhere; }
.su-err:empty { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.su-check { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border: 1px solid var(--line-2); border-radius: 14px; background: var(--card); }
.su-check input { width: 24px; height: 24px; flex: none; margin: 1px 0 0; accent-color: var(--pin); cursor: pointer; }
.su-check label { font-size: .95rem; line-height: 1.5; min-width: 0; padding: 11px 0; margin: -11px 0; cursor: pointer; }
.su-nowrap { white-space: nowrap; }
.su-choices { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.su-choices .city-row { border: 1px solid var(--line-2); min-height: 56px; padding: 10px 12px; }
.su-ident { display: grid; gap: 12px; margin-top: 14px; }
.su-ident .or-line { margin: 4px 0; }
.su-done { display: grid; gap: 10px; justify-items: center; text-align: center; }
.su-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
.su-chip { display: inline-flex; align-items: center; gap: 8px; max-width: 100%; margin: 0; padding: 8px 14px; border-radius: 999px; background: var(--card-2); border: 1px solid var(--line-2); font-size: .92rem; overflow-wrap: anywhere; }
.su-chip[hidden] { display: none; }
/* the address the code was sent to can be long (45+ characters): it wraps instead of widening the whole page */
#su-code-to, #rs-sent-to { overflow-wrap: anywhere; }
.su-chip svg { width: 18px; height: 18px; flex: none; color: var(--pin-2); }
.su-actions { display: grid; gap: 10px; }
.su-carry { display: grid; gap: 12px; }
.su-carry .link-btn { justify-self: center; }
.cstate[data-state="su-location"] .qr { justify-self: center; }
/* phone-sized touch targets (44px) for everything in the v2 panel */
.connect__panel.su-on .link-btn { min-height: 44px; min-width: 44px; display: inline-flex; align-items: center; justify-content: center; text-align: center; padding: 6px 4px; }
.connect__panel.su-on .btn--sm { min-height: 44px; }
.connect__panel.su-on .more-wallets summary, .connect__panel.su-on .msg-preview summary { min-height: 44px; display: flex; align-items: center; }
.connect__panel.su-on .su-done .link-btn, .connect__panel.su-on .su-form .link-btn { justify-self: center; }
@media (max-width: 480px) { .connect__panel.su-on { padding: 20px 16px; } .su-tab { font-size: .9rem; } }

/* ---------- dashboard ---------- */
.dash-out { padding: 50px 0 80px; }
/* a guest (theme.js, before the first paint): while /api/me answers, the signed-out page holds its place unseen (no Tab stop, nothing
   read out), so nothing under it moves when it shows; dashboard.js drops .is-pending on the answer. Without JavaScript it stays hidden. */
:root[data-guest] .dash-out.is-pending[hidden] { display: block !important; visibility: hidden; }
/* a browser that has shown a member here (theme.js data-returning: its storage said so; nothing is held where it cannot be read): until
   /api/me answers, the public roles section waits, so a returning member's first paint is never the rules at the top of the page, then a
   jump (CLS 0.93 at 390 px). A browser whose last visit was the tabbed dashboard (theme.js data-dash-v2) shows its placeholders from the
   first paint. Both give way when dashboard.js drops .is-pending (in the same task as what takes their place), or when theme.js does
   because dashboard.js never will (a script that failed or threw, no answer 12 s after the page's scripts ran); the roles also wait
   while the placeholders show (the tabbed dashboard folds them into its Profile tab). Meanwhile the page is at least a screen tall, so the
   footer waits below the fold instead of jumping down from mid-screen when the page fills in */
:root[data-dash-v2] .dash-out.is-pending ~ #dash-skel[hidden] { display: block !important; }
:root[data-returning] .dash-out.is-pending ~ #roles, #dash-skel:not([hidden]) ~ #roles { display: none; }
:root[data-returning] main:has(> .dash-out.is-pending), main:has(> #dash-skel:not([hidden])) { min-height: 100vh; }
.teaser { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 40px; align-items: center; }
@media (max-width: 900px) { .teaser { grid-template-columns: minmax(0, 1fr); gap: 34px; } }
.onboard { max-width: 720px; margin: 0 auto; }
.onboard__steps { list-style: none; padding: 0; margin: 18px 0; display: grid; gap: 16px; }
.onboard__steps p { margin: 2px 0 8px; }
.dash { padding: 28px 0 70px; }
.dash-top { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 14px; align-items: stretch; margin-bottom: 14px; }
@media (max-width: 1000px) { .dash-top { grid-template-columns: minmax(0, 1fr); } }
.idcard { display: flex; gap: 16px; align-items: center; padding: 20px; }
.idcard__avatar { width: 58px; height: 58px; border-radius: 18px; flex: none; display: grid; place-items: center; font: 700 1.5rem var(--display); color: var(--on-gold); background: var(--gold); box-shadow: 0 10px 30px -10px rgba(var(--gold-rgb),.55); }
.idcard__who { flex: 1; min-width: 0; }
.idcard__who p { margin: 0; }
.idcard__name { font-size: 1.15rem; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.idcard .link-btn { align-self: flex-start; }
.role-pill { font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; padding: 3px 10px; border-radius: 999px; background: var(--card-2); border: 1px solid var(--line-2); color: var(--muted); }
.role-pill[data-level="holder"] { color: var(--ok-text); border-color: rgba(var(--ok-rgb),.45); background: var(--ok-soft); }
.role-pill[data-level="founder"] { color: var(--gold-text); border-color: rgba(var(--gold-rgb),.55); background: var(--gold-soft); }
.role-pill[data-level="manager"], .role-pill[data-level="admin"] { color: var(--on-gold); border-color: transparent; background: var(--gold); }
.live-note { white-space: nowrap; }
/* "live" becomes "live · checked 59m ago" (dashboard.js, every 5 s): the note keeps the room of its longest text from the start, so the
   pass's bottom row never re-wraps and the stats under it never jump (a 0.19 layout shift on a phone, 6 Oct 2026) */
#me-checked { display: inline-block; min-width: 11.5em; }
.lost-alert { margin-bottom: 14px; padding: 14px 18px; border-radius: 16px; border: 1px solid rgba(var(--bad-rgb),.5); background: var(--bad-soft); color: var(--text); font-weight: 500; }
.dash-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 14px; align-items: start; }
@media (max-width: 1000px) { .dash-grid { grid-template-columns: minmax(0, 1fr); } }
.dash-col { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; min-width: 0; }
.dash-grid > *, .dash-top > * { min-width: 0; }
.dash-col > .card { padding: 22px; }
.dash-tools { display: flex; gap: 8px; justify-content: flex-end; margin: 2px 0 12px; }
/* Customizable layout: edit mode, drag handles, drop indicator, drag ghost. */
body.layout-edit .dash-col > .card { outline: 2px dashed rgba(var(--ink),.28); outline-offset: -2px; }
body.layout-edit .dash-col > .card.card--dragging { opacity: .35; }
.layout-bar { display: none; }
body.layout-edit .layout-bar { display: flex; align-items: center; gap: 8px; margin: -8px -8px 10px; padding: 4px 6px; border-radius: 10px; background: rgba(var(--ink),.06); }
.layout-bar__label { font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.layout-handle { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 9px; border: 1px solid var(--line-2); background: var(--card); color: var(--text); font: 600 .8rem var(--body); cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; }
.layout-handle:active { cursor: grabbing; }
.layout-move { padding: 6px 10px; border-radius: 9px; border: 1px solid var(--line-2); background: var(--card); color: var(--text); font: 600 .8rem var(--body); cursor: pointer; }
.dash-col > .card.drop-before, .dash-col > .card.drop-after { position: relative; }
.dash-col > .card.drop-before::before, .dash-col > .card.drop-after::after { content: ""; position: absolute; left: 10px; right: 10px; height: 4px; border-radius: 2px; background: var(--pin); z-index: 5; }
.dash-col > .card.drop-before::before { top: -9px; }
.dash-col > .card.drop-after::after { bottom: -9px; }
.dash-col.drop-target { outline: 2px dashed var(--pin); outline-offset: 6px; min-height: 80px; border-radius: 14px; }
/* Badge tabs. */
.badge-tabs { margin: 10px 0 12px; }
.badge__pending { display: inline-block; margin-top: 4px; font-size: .62rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--gold-text); }
.layout-ghost { position: fixed; z-index: 9999; pointer-events: none; opacity: .94; margin: 0; box-shadow: 0 18px 50px rgba(2,8,20,.45); border: 2px solid var(--pin); }
.progress-card__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.progress-card__pct { font: 700 2rem var(--display); color: var(--gold-text); }
.bar { height: 12px; border-radius: 8px; background: rgba(var(--ink),.08); overflow: hidden; margin: 6px 0 14px; }
.bar span { display: block; height: 100%; width: 0; border-radius: 8px; background: linear-gradient(90deg, var(--moss), var(--gold), var(--pin)); transition: width 1s cubic-bezier(.2,.8,.2,1); }
.psteps { list-style: none; padding: 0; margin: 0 0 12px; display: grid; gap: 8px; }
.psteps li { display: flex; gap: 10px; align-items: center; font-size: .94rem; }
.psteps .mini { flex: 1; max-width: 140px; height: 6px; border-radius: 4px; background: rgba(var(--ink),.08); overflow: hidden; margin-left: auto; }
.psteps .mini span { display: block; height: 100%; background: var(--gold); }
.psteps .detail { color: var(--muted); font-size: .82rem; margin-left: auto; font-variant-numeric: tabular-nums; }
.feed { padding: 18px !important; }
.feed__head { display: flex; flex-wrap: wrap; gap: 10px; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.seg { display: inline-flex; background: var(--surface-inset); border: 1px solid var(--field-line); border-radius: 999px; padding: 3px; }
.seg button { border: 0; background: none; color: var(--muted); font: 500 .9rem var(--body); padding: 7px 14px; border-radius: 999px; cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.seg button:hover { color: var(--text); }
.seg button[aria-selected="true"], .seg button[aria-pressed="true"] { background: rgba(var(--ink),.12); color: var(--text); font-weight: 600; box-shadow: inset 0 0 0 1px var(--line-2); }
:root[data-theme="light"] .seg button[aria-selected="true"], :root[data-theme="light"] .seg button[aria-pressed="true"] { background: var(--card); box-shadow: 0 0 0 1px var(--line-2), var(--e1); }
.seg--sm button { font-size: .8rem; padding: 5px 10px; }
.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chips button { border: 1px solid var(--line-2); background: none; color: var(--muted); font: 600 .84rem var(--body); padding: 6px 12px; border-radius: 999px; cursor: pointer; }
.chips button[aria-selected="true"] { color: var(--text); border-color: rgba(var(--accent-rgb),.6); background: var(--accent-soft); }
.composer { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 10px; margin-bottom: 10px; }
.composer textarea { width: 100%; resize: vertical; min-height: 56px; border: 0; background: transparent; padding: 6px; }
.composer__row { display: flex; align-items: center; gap: 10px; }
.composer__row .btn--primary { margin-left: auto; }
.composer__preview { width: 44px; height: 44px; object-fit: cover; border-radius: 10px; }
#c-pic-label { cursor: pointer; }
.feed__sort { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin: 4px 0 8px; }
.feed__sort .tiny { margin: 0; }
.posts { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.post { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 14px; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 12px; }
.post.is-hidden { opacity: .55; border-style: dashed; }
.post__vote { grid-row: span 3; display: flex; flex-direction: column; align-items: center; gap: 2px; }
/* a picture makes a fourth row: the picture and the actions stay in the text column (auto-placed, the actions fell under the vote and widened it) */
.post__vote ~ .post__img, .post__vote ~ .post__actions { grid-column: 2; }
.post__vote button { width: 38px; height: 34px; border-radius: 10px; border: 1px solid var(--line-2); background: var(--card-2); color: var(--muted); cursor: pointer; font-size: .95rem; }
.post__vote button[aria-pressed="true"] { color: var(--on-accent); border-color: transparent; background: var(--pin); }
.post__vote strong { font-variant-numeric: tabular-nums; font-size: .9rem; }
.post__meta { font-size: .8rem; color: var(--muted); display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.post__meta b { color: var(--text); }
.post__body { white-space: pre-wrap; word-break: break-word; margin: 0; }
.post__img { max-width: 100%; max-height: 420px; border-radius: 12px; border: 1px solid var(--line); margin-top: 6px; }
.post__actions { display: flex; gap: 12px; flex-wrap: wrap; }
.post__actions .link-btn { font-size: .8rem; padding: 2px 0; }
/* feed v2 (FEED_V2=on): the "···" per-row menu (Mute, Report; Delete on your own rows) */
.post__more { background: none; border: 1px solid transparent; border-radius: 8px; color: var(--muted); font: 700 .85rem var(--body); letter-spacing: 1px; padding: 0 8px; min-width: 44px; min-height: 44px; cursor: pointer; }
.post__more:hover, .post__more[aria-expanded="true"] { color: var(--text); border-color: var(--line-2); }
.post__menu { display: inline-flex; gap: 12px; flex-wrap: wrap; }
.post__replies { grid-column: 2; list-style: none; margin: 6px 0 0; padding: 0 0 0 12px; border-left: 2px solid var(--line); display: grid; gap: 6px; }
.post__replies li { font-size: .9rem; }
.reply-form { grid-column: 2; display: flex; gap: 8px; margin-top: 6px; }
.reply-form input { flex: 1; background: var(--card-2); border: 1px solid var(--field-line); border-radius: 10px; padding: 7px 10px; font-size: .9rem; min-width: 0; }
.posts--compact .post, .post__replies > .post { grid-template-columns: minmax(0, 1fr); } /* rows without a vote: one column */
.empty-feed { text-align: center; padding: 26px 10px; color: var(--muted); border: 1px solid var(--line); background: var(--surface-inset); border-radius: 16px; }
.empty-feed strong { display: block; color: var(--text); font-family: var(--display); font-size: 1.1rem; margin-bottom: 4px; }
.community-card__head { display: flex; gap: 14px; align-items: center; margin-bottom: 8px; }
.community-card__head .kicker { margin-bottom: 2px; }
.community-card__head h2, .community-card__head p { margin: 0; }
.kv { margin: 10px 0; display: grid; gap: 8px; }
.kv div { display: flex; justify-content: space-between; gap: 10px; border-bottom: 1px solid var(--line); padding-bottom: 8px; font-size: .92rem; }
.kv dt { color: var(--muted); }
.kv dd { margin: 0; font-weight: 600; text-align: right; }
.fomo { background: linear-gradient(90deg, rgba(var(--accent-rgb),.14), transparent); border-left: 3px solid var(--pin); padding: 10px 12px; border-radius: 10px; }
.mini-board { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 6px; counter-reset: mb; }
.mini-board li { display: flex; gap: 8px; align-items: center; font-size: .88rem; counter-increment: mb; }
.mini-board li::before { content: counter(mb); width: 20px; color: var(--muted); font-weight: 700; }
.mini-board li.muted::before { content: none; }
.mini-board li.is-you { color: var(--gold-text); font-weight: 700; }
.mini-board .amt { margin-left: auto; font-variant-numeric: tabular-nums; }
.badge-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.badge { position: relative; text-align: center; padding: 12px 6px 10px; border-radius: 14px; background: var(--card); border: 1px solid var(--line); cursor: help; }
.badge__icon { font-size: 1.6rem; display: block; line-height: 1.2; }
.badge__name { font-size: .72rem; font-weight: 700; display: block; margin-top: 4px; overflow-wrap: anywhere; }
.badge.is-locked { opacity: .5; }
.badge.is-locked .badge__icon { filter: grayscale(1); }
.badge.is-earned { border-color: rgba(var(--gold-rgb),.5); background: radial-gradient(120% 90% at 50% 0%, rgba(var(--gold-rgb),.16), transparent 70%); }
.badge__prog { position: absolute; left: 10px; right: 10px; bottom: 5px; height: 3px; border-radius: 3px; background: rgba(var(--ink),.1); overflow: hidden; }
.badge__prog span { display: block; height: 100%; background: var(--gold); }
.badge.is-lost { opacity: .75; border-color: rgba(var(--bad-rgb),.55); }
.badge.is-lost::after { content: "Lost"; position: absolute; top: 4px; right: 6px; font-size: .6rem; font-weight: 800; color: var(--bad-text); text-transform: uppercase; }
.req-form { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0; }
.req-form input { flex: 1 1 160px; }
.req-form .btn { white-space: normal; }
.req-list { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 6px; }
.req-list li { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: .88rem; padding: 8px 10px; border-radius: 12px; background: var(--card); border: 1px solid var(--line); }
.req-list li .req-actions { margin-left: auto; display: flex; gap: 6px; }
.mod-card { border-color: rgba(var(--gold-rgb),.35); }
.roles-table { display: grid; gap: 12px; }
.role-row { display: block; padding: 0; overflow: hidden; }
.role-row__head { display: flex; gap: 12px; align-items: center; padding: 16px 20px; cursor: pointer; list-style: none; }
.role-row__head::-webkit-details-marker { display: none; }
.role-row__head h3 { margin: 0; }
.role-row__head p { margin: 2px 0 0; }
.role-row__head .role__icon.ico { display: inline-grid; margin: 0; font-size: inherit; } /* the shared line icons in a tinted circle */
.role-row__chev { margin-left: auto; color: var(--text-3); font-size: 1.1rem; transition: transform .18s ease; flex: none; }
.role-row__chev::before { content: "▾"; }
details[open] > .role-row__head .role-row__chev { transform: rotate(180deg); }
.role-row__body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; padding: 2px 20px 20px; }
.role-row ul { margin: 0; padding-left: 18px; color: var(--text-2); font-size: .93rem; display: grid; gap: 4px; }
.role-row__when { font-size: .74rem; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; color: var(--pin-2); margin-bottom: 6px; }
.role-row.is-you { border-color: rgba(var(--gold-rgb),.6); box-shadow: 0 0 0 1px rgba(var(--gold-rgb),.3), var(--shadow); }
.role-row.is-you .role-row__head h3::after { content: " · you"; color: var(--gold-text); font-size: .85rem; }
@media (max-width: 900px) { .role-row__body { grid-template-columns: minmax(0, 1fr); gap: 12px; } }

/* =====================================================================
   Site-wide motion: one layer for every page (site.js arms the parts that need a script).
   Rules (design v4): only transform and opacity move (filter for a one-off glow); nothing on screen at the start is hidden; nothing here
   changes the layout; every animation and transition sits in a "no-preference" block, so with reduced motion nothing moves and nothing
   waits (the block after this one also stops everything, and shows any armed block). Nothing loops: what starts by itself ends within
   5 s (WCAG 2.2.2 with no Pause control); only a busy state (.is-busy, .is-loading, [aria-busy]) or a hovered ring turns for longer.
   ===================================================================== */
/* one soft glow at the top of each page's first section (the accent, from above), still: a big layer moving all the time cost every page
   load about 40 ms of main-thread time on a 4-core test machine (measured 5 Oct 2026) */
.connect, .dash-out { position: relative; }
.page-hero::before, .connect::before, .dash-out::before, main > .section:first-child::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: var(--grad-glow); }
:root[data-theme="light"] .page-hero::before, :root[data-theme="light"] .connect::before, :root[data-theme="light"] .dash-out::before, :root[data-theme="light"] main > .section:first-child::before { opacity: .9; }
/* the phone tab bar: the page you are on has its icon in the accent and a small pill above it (the tab bar block) */
@media (max-width: 900px) {
  .tabbar a { position: relative; }
}
@media (prefers-reduced-motion: no-preference) {
  /* page transitions: same-site links cross-fade (the header and the tab bar stay put; the tab bar's pill glides to the new tab) */
  @view-transition { navigation: auto; }
  ::view-transition-old(root) { animation: vtOut var(--dur-1) ease-out both; }
  ::view-transition-new(root) { animation: vtIn var(--dur-3) var(--ease-out) both; }
  ::view-transition-group(tab-ind) { animation-duration: var(--dur-3); animation-timing-function: var(--ease-out); }
  /* blocks below the screen rise in when they scroll into view (site.js adds .mo-armed only to those, then .mo-in) */
  .mo-armed { opacity: 0; transform: translateY(8px); }
  .mo-armed.mo-in { opacity: 1; transform: none; transition: opacity .4s ease-out, transform .4s cubic-bezier(.2,.8,.2,1); }
  /* buttons and tappable cards give a little when pressed; a mouse lifts a button 1 px (below) */
  .btn { transition: transform var(--dur-2) var(--ease-out), background-color var(--dur-2), box-shadow var(--dur-2), border-color var(--dur-2), color var(--dur-2); }
  .btn:not([disabled]):active { transform: translateY(0) scale(.97); transition-duration: .08s; }
  .card--link:active { transform: scale(.99); transition-duration: .08s; }
  .nav a, .theme-toggle, .site-footer__links a, .social-link, .account-btn { transition: color var(--dur-2), background-color var(--dur-2); }
  .site-header::after { transition: opacity var(--dur-2) var(--ease-out); }
  /* a progress bar has a sheen running along it once, then it rests */
  :is(.launch-progress, .meter, .bar) span { position: relative; overflow: hidden; }
  :is(.launch-progress, .meter, .bar) span::after { content: ""; position: absolute; inset: 0; pointer-events: none; transform: translateX(-100%);
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.45), transparent); animation: moSheen 3.6s ease-in-out 1.5s 1; }
  /* a step of the sign-up and a checker answer fade in when they appear (the rank check's answer has its own pop-up: .rank-pop) */
  .cstate, .check-result { animation: moState .45s cubic-bezier(.2,.8,.2,1) backwards; }
}
/* a browser without view transitions: the page itself eases in */
@supports not (view-transition-name: none) { @media (prefers-reduced-motion: no-preference) { main { animation: moEnter var(--dur-3) var(--ease-out) backwards; } } }
@media (prefers-reduced-motion: no-preference) and (max-width: 900px) {
  /* a tapped tab gives a small bounce */
  .tabbar a svg { transition: transform .32s var(--ease-spring); }
  .tabbar a:active svg { transform: scale(.86); transition-duration: .08s; }
}
/* buttons and cards lift a little under a mouse (never on touch screens, where a lift would stick after a tap) */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .btn:not([disabled]):not(.is-busy):hover { transform: translateY(-1px); }
  .btn:not([disabled]):not(.is-busy):hover:active { transform: scale(.97); }
  :is(.grid-3, .bento, .why-now, .buy-steps, .roles-grid, .proof-grid, .phases, .rules-grid) > .card, .lp-grid > .lp-card, .wanted > li, .flow__step, .card--link { transition: transform var(--dur-2) var(--ease-out), border-color var(--dur-2), box-shadow var(--dur-2); }
  :is(.grid-3, .bento, .why-now, .buy-steps, .roles-grid, .proof-grid, .phases, .rules-grid) > .card:hover, .lp-grid > .lp-card:hover, .wanted > li:hover, .flow__step:hover, .card--link:hover { transform: translateY(-2px); border-color: var(--line-2); }
}
@keyframes moEnter { from { opacity: .6; transform: translateY(6px); } }
@keyframes moSheen { 0% { transform: translateX(-100%); } 45%, 100% { transform: translateX(100%); } }
@keyframes moState { from { opacity: .2; transform: translateY(8px); } }
@keyframes vtOut { to { opacity: 0; } }
@keyframes vtIn { from { opacity: 0; transform: translateY(6px); } }
/* printed pages show everything */
@media print { .mo-armed { opacity: 1 !important; transform: none !important; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .mo-armed { opacity: 1; transform: none; }
}

/* =====================================================================
   Controls that show a state (the segmented controls, chips, the sign-up tabs, the map rail, the dashboard's link tabs). Design v4: no
   lights, rings or glows that move by themselves (the "Live buttons" of 6 Oct 2026 are gone with the Pause switch). What stays is
   still: the chosen segment's marker (site.js .seg__ind glides to a new choice, transform only), a chosen chip's or pressed rail
   button's thin accent ring, the chosen link tab's underline, and a small press.
   ===================================================================== */
.theme-toggle, .contract__copy, .icon-btn, .layout-move, .post__vote button, .chips button, .su-tab, a[role="tab"], .map-focus__btn, .seg button { position: relative; }
/* the segmented control: a quiet pill track; the chosen segment sits on a raised marker, its label in full colour and weight (never the
   fill alone, review of 12 Oct 2026); the marker glides to a new choice (site.js) */
.seg { position: relative; isolation: isolate; }
.seg__ind { position: absolute; left: 0; top: 0; z-index: -1; border-radius: 999px; background: rgba(var(--ink),.12); box-shadow: inset 0 0 0 1px var(--line-2); transform-origin: 0 0; pointer-events: none; }
:root[data-theme="light"] .seg__ind { background: var(--card); box-shadow: 0 0 0 1px var(--line-2), var(--e1); }
.seg:not(.has-ind) .seg__ind { display: none; }
.seg.has-ind button[aria-selected="true"], .seg.has-ind button[aria-pressed="true"] { background: none; box-shadow: none; }
.chips button[aria-selected="true"]::after, .su-tab[aria-pressed="true"]::after, .map-ctrl button[aria-pressed="true"]::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  border: 1px solid var(--accent-line); }
.chips button[aria-selected="true"]::after, .su-tab[aria-pressed="true"]::after { inset: -3px; }
/* a link that acts as a tab (the dashboard's): the chosen one has a still underline (feat/dash-tabs-glass replaces it with its pill) */
a[role="tab"][aria-selected="true"]::after { content: ""; position: absolute; left: 22%; right: 22%; bottom: 0; height: 2px; border-radius: 2px; pointer-events: none;
  background: linear-gradient(90deg, rgba(var(--accent-rgb),0), var(--pin), rgba(var(--accent-rgb),0)); opacity: .85; }
@media (hover: hover) {
  .icon-btn:hover, .layout-move:hover, .map-focus__btn:hover:not(:disabled) { border-color: var(--line-2); }
}
@media (prefers-reduced-motion: no-preference) {
  /* a press gives a little (the scale property: it adds to a button's own transform) */
  .theme-toggle, .map-ctrl button, .icon-btn, .layout-move, .su-pw__toggle, .post__vote button, .seg button, .chips button, .su-tab, .swapbox__flip, .map-focus__btn { transition-property: background, color, border-color, transform, scale; transition-duration: .2s; }
  .theme-toggle:active, .map-ctrl button:active, .icon-btn:active, .layout-move:active, .su-pw__toggle:active, .post__vote button:active, .seg button:active, .chips button:active, .map-focus__btn:active,
    .su-tab:active, .swapbox__flip:active { scale: .94; transition-duration: .08s; }
  .link-btn { transition: color .2s, text-decoration-thickness .2s, text-underline-offset .2s; }
}

/* ---------- fair launch: founder path, windows, elections, moderation ---------- */
.seat-panel { display: grid; gap: 8px; margin-top: 4px; }
.seat-panel p { margin: 0; }
.apply-form { display: grid; gap: 8px; }
.apply-form textarea, .reason-form select, .reason-form input { background: var(--card-2); border: 1px solid var(--field-line); border-radius: 12px; padding: 10px 12px; color: var(--text); font: 500 .95rem var(--body); width: 100%; resize: vertical; }
.window-panel, .election { margin-top: 14px; border-top: 1px solid var(--line); padding-top: 12px; display: grid; gap: 8px; }
.window-panel__head { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.applicants { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.applicants li { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; padding: 10px 12px; border-radius: 14px; background: var(--card); border: 1px solid var(--line); }
.applicants li > div { flex: 1 1 180px; min-width: 0; }
.applicants li p { margin: 2px 0 0; overflow-wrap: anywhere; }
.applicants li.is-you { border-color: rgba(var(--gold-rgb),.55); }
.applicants__n { font-variant-numeric: tabular-nums; color: var(--muted); font-size: .85rem; }
.reason-form { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 6px; grid-column: 1 / -1; }
.reason-form select { width: auto; flex: 0 1 auto; }
.reason-form input { flex: 1 1 160px; width: auto; }
.mod-section { margin-top: 14px; }
.mod-section h3 { font-size: .95rem; margin: 0 0 6px; }
.modal { position: fixed; inset: 0; z-index: 95; display: grid; place-items: center; padding: 16px; background: var(--scrim); backdrop-filter: blur(4px); }
.modal__box { width: min(460px, 100%); max-height: calc(100vh - 32px); overflow: auto; display: grid; gap: 12px; }
.modal:not(.modal--panel) > .modal__box { background: var(--surface-2); border: 1px solid var(--line-2); box-shadow: var(--e3); border-radius: var(--r-lg); overscroll-behavior: contain; }
.modal__box details > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 8px; min-height: 44px; font-weight: 600; }
.modal__box details > summary::-webkit-details-marker { display: none; }
.modal__box details > summary::after { content: "+"; margin-left: auto; color: var(--pin-2); font-size: 1.3rem; line-height: 1; }
.modal__box details[open] > summary::after { content: "\2212"; }
@media (max-width: 600px) {
  .modal:not(.modal--panel) { place-items: end center; padding: 0; }
  .modal:not(.modal--panel) > .modal__box { width: 100%; max-width: none; max-height: calc(100dvh - 24px); border-bottom: 0; border-radius: var(--r-lg) var(--r-lg) 0 0;
    padding-bottom: calc(var(--card-pad) + env(safe-area-inset-bottom)); }
}
@media (prefers-reduced-motion: no-preference) and (max-width: 600px) { .modal:not(.modal--panel) > .modal__box { animation: sheetUp var(--dur-3) var(--ease-out) backwards; } }
@keyframes sheetUp { from { transform: translateY(32px); opacity: 0; } }
.modal__box h2 { margin: 0; }
.rules-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 800px) { .rules-grid { grid-template-columns: minmax(0, 1fr); } }
.rules-grid .card h3 { margin-top: 0; }
.rules-grid ol, .rules-grid ul { margin: 0; padding-left: 20px; color: var(--text-2); display: grid; gap: 6px; }
.formula { font-family: var(--mono); font-size: .88rem; background: var(--code-bg); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; overflow-x: auto; white-space: pre-wrap; }
.never { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.never li { padding-left: 30px; position: relative; color: var(--text-2); }
.never li::before { content: "✕"; position: absolute; left: 0; top: 1px; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-size: .72rem; font-weight: 800; background: rgba(var(--bad-rgb),.18); color: var(--bad-text); }
.snap-lookup { display: flex; gap: 10px; padding: 10px; margin-top: 10px; }
.snap-lookup input { flex: 1; min-width: 0; font-family: var(--mono); font-size: .9rem; background: var(--card-2); border: 1px solid var(--field-line); border-radius: 12px; padding: 11px 12px; color: var(--text); }
@media (max-width: 520px) { .snap-lookup { flex-direction: column; } }
.dot--choosing { background: transparent; border: 2px dashed var(--gold); }

/* ---------- home: trust line; the scam note (token page) ---------- */
.hero__trust { list-style: none; margin: -16px 0 30px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.hero__trust li { font-size: .8rem; font-weight: 600; color: var(--text-2); padding: 5px 11px; border-radius: 999px; border: 1px solid var(--line); background: var(--card); }
.hero__trust li::before { content: "✓"; color: var(--ok-text); font-weight: 800; margin-right: 6px; }
.scam-note { margin: 18px 0 0; padding: 14px 18px; border-radius: 14px; border: 1px solid rgba(var(--bad-rgb),.35); background: rgba(var(--bad-rgb),.07); color: var(--text-2); font-size: .93rem; }
.scam-note strong { color: var(--bad-text); }

/* ---------- home: the New York maps open the live map; "Get in first" shows what it means ---------- */
/* the card is the chips' containing block (they sit in its corners), and lifts as one under a mouse */
.hero-map__link { position: relative; display: block; color: inherit; text-decoration: none; border-radius: var(--r-hero); transition: transform .35s cubic-bezier(.2,.8,.2,1); }
.hero-map__link .hero-map__svg { transition: border-color .35s, box-shadow .35s; }
.hero-map__link:hover, .hero-map__link:focus-visible { transform: translateY(-4px); }
.hero-map__link:hover .hero-map__svg, .hero-map__link:focus-visible .hero-map__svg { border-color: var(--accent-line); box-shadow: 0 50px 110px -30px rgba(var(--accent-rgb),.35); }
.hero-map__link:focus-visible { outline: 3px solid var(--pin); outline-offset: 6px; }
.map-open { position: absolute; right: 5%; bottom: 5%; display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 999px; font-size: .84rem; font-weight: 700; color: var(--on-cta); background: linear-gradient(135deg, var(--cta-a), var(--cta-b)); box-shadow: var(--glow-cta); text-decoration: none; transition: transform .25s; }
.hero-map__link:hover .map-open, .map-open:hover { transform: translateX(3px); }
.map-open--corner { top: 12px; right: 12px; bottom: auto; font-size: .8rem; padding: 7px 12px; }
#nyc-map { cursor: pointer; }
.early { margin-block: auto; padding: 6px 0 26px; }
.early__coins { display: flex; justify-content: center; align-items: center; padding: 8px 0 22px; }
.early__coins .coin-disc { margin: 0 -7px; }
.early__coins .coin-disc:nth-child(1), .early__coins .coin-disc:nth-child(5) { transform: scale(.82) translateY(8px); opacity: .85; }
.early__coins .coin-disc:nth-child(2), .early__coins .coin-disc:nth-child(4) { transform: translateY(-4px); }
.early__coins .coin-disc--lg { position: relative; z-index: 1; }
.early__coins .coin-disc span { font-size: .7rem; }
.early__coins .coin-disc--lg span { font-size: 1.05rem; }
.early__steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.early__steps li { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: 14px; border: 1px solid var(--line); background: var(--card); font-size: .82rem; color: var(--muted); }
.early__steps b { font: 700 .95rem var(--display); color: var(--text); }
.early__steps li:last-child { border-color: rgba(var(--accent-rgb),.45); background: rgba(var(--accent-rgb),.08); }
.early__steps li:last-child b { color: var(--bad-text); }
.proof__live.is-wait { color: var(--warn); }
@media (max-width: 600px) { .early__coins .coin-disc { width: 52px; height: 52px; } .early__coins .coin-disc--lg { width: 84px; height: 84px; } .early__steps { grid-template-columns: minmax(0, 1fr); } .map-open { font-size: .76rem; padding: 6px 11px; } }

/* =====================================================================
   Dashboard, premium: the member pass (navy in both themes, lit teal and gold), glassier cards, city coins, buy & swap
   ===================================================================== */
.dash { position: relative; isolation: isolate; }
.dash::before { content: ""; position: absolute; inset: 0 0 auto; height: 620px; z-index: -1; pointer-events: none;
  background: radial-gradient(45% 60% at 12% 0%, rgba(var(--accent-rgb),.14), transparent 70%), radial-gradient(40% 55% at 88% 4%, rgba(var(--gold-rgb),.12), transparent 70%); }
.dash .card { position: relative; border-radius: 24px; background: linear-gradient(180deg, rgba(var(--ink),.07), rgba(var(--ink),.025)); border-color: rgba(var(--ink),.1);
  box-shadow: inset 0 1px 0 rgba(var(--ink),.08), 0 30px 60px -42px rgba(2,8,20,.9); }
.dash .card::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none;
  background: linear-gradient(160deg, rgba(var(--ink),.22), transparent 32%, transparent 72%, rgba(var(--gold-rgb),.28));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }

/* the pass: a membership card */
.dash-top { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); }
.pass { position: relative; overflow: hidden; isolation: isolate; border-radius: 26px; padding: 20px 22px; color: #fff; min-height: 196px;
  display: flex; flex-direction: column; justify-content: space-between; gap: 14px; border: 1px solid var(--pass-line);
  background: radial-gradient(90% 120% at 0% 0%, var(--pass-glow-1), transparent 60%), radial-gradient(60% 80% at 100% 100%, var(--pass-glow-2), transparent 62%), linear-gradient(135deg, var(--pass-a), var(--pass-b));
  box-shadow: 0 34px 80px -34px rgba(0,203,182,.35), inset 0 1px 0 rgba(255,255,255,.22); }
.pass::after { content: ""; position: absolute; inset: 0; z-index: -1; opacity: .25; pointer-events: none;
  background: repeating-linear-gradient(115deg, rgba(255,255,255,.06) 0 1px, transparent 1px 14px); }
.pass__shine { position: absolute; inset: -60% -30%; z-index: -1; pointer-events: none; background: linear-gradient(110deg, transparent 42%, rgba(255,255,255,.22) 50%, transparent 58%); transform: translateX(-70%);  }
/* the gloss passes once after the pass appears, then rests (design v4: nothing loops) */
@media (prefers-reduced-motion: no-preference) { .pass__shine { animation: passShine 2.4s ease-in-out .4s 1; } }
@keyframes passShine { 0%, 55% { transform: translateX(-70%); } 100% { transform: translateX(70%); } }
@media (prefers-reduced-motion: reduce) { .pass__shine { display: none; } }
.pass__top, .pass__who, .pass__bottom { display: flex; align-items: center; gap: 12px; }
.pass__top { justify-content: space-between; }
.pass__brand { display: inline-flex; align-items: center; gap: 8px; font: 700 .78rem var(--display); letter-spacing: .2em; text-transform: uppercase; color: rgba(255,255,255,.85); }
.pass__mark { width: 18px; height: 18px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); background: var(--gold); box-shadow: 0 0 0 3px rgba(255,255,255,.18); }
.pass .role-pill { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.3); color: #fff; backdrop-filter: blur(6px); }
.pass .role-pill[data-level="founder"] { background: var(--gold); color: var(--on-gold); border-color: transparent; }
.pass .idcard__avatar { width: 54px; height: 54px; border-radius: 16px; color: #fff; background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.3); box-shadow: none; backdrop-filter: blur(6px); } /* white ink on the frosted tile (6.6:1), not the gold tile's navy */
.pass__id { flex: 1; min-width: 0; }
.pass__id p { margin: 0; }
.pass__name { font: 700 1.35rem/1.15 var(--display); letter-spacing: -.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pass__home { font-size: .9rem; color: rgba(255,255,255,.82); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pass__coin { width: 58px; height: 58px; }
.pass__coin span { font-size: .72rem; }
.pass__bottom { flex-wrap: wrap; gap: 6px 14px; font-size: .8rem; color: rgba(255,255,255,.78); padding-top: 12px; border-top: 1px solid rgba(255,255,255,.16); }
.pass__bottom .mono { color: #fff; }
.pass .link-btn { color: rgba(255,255,255,.85); }
.pass .live-note { margin-left: auto; }
.icon-btn { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; border: 1px solid rgba(255,255,255,.3); background: rgba(255,255,255,.12); color: #fff; font-size: 1rem; cursor: pointer; backdrop-filter: blur(6px); }
.icon-btn:hover { background: rgba(255,255,255,.24); }

/* profile modal */
.profile__head { display: flex; align-items: center; gap: 12px; }
.profile__head-id { flex: 1; min-width: 0; }
.profile__head-id .tiny { margin: 2px 0 0; }
.profile__head .icon-btn { border-color: var(--line); background: transparent; color: var(--ink); }
.inline-form { display: flex; gap: 8px; }
.inline-form input { flex: 1; min-width: 0; }
.inline-err { color: var(--bad-text); font-size: .88rem; margin: 0; }
.contact-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.contact-row__main strong { font-size: .92rem; }
.contact-row__main .tiny { margin: 2px 0 0; }
.verified-pill { display: inline-block; max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: middle; font-size: .85rem; font-weight: 600; color: var(--ok-text); }
.link-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.link-list a { font-weight: 600; }

/* city coin designs: six colours */
.coin-art, .pass__coin, .swatch, .coin-disc, .welcome__disc { --c1: #FFE9A8; --c2: #F8C13A; --c3: #D99A1A; }
[data-color="rose"] { --c1: #FFE3EA; --c2: #FF6B8B; --c3: #B8174F; }
[data-color="ocean"] { --c1: #DDF1FF; --c2: #3BA7FF; --c3: #1B4FD8; }
[data-color="emerald"] { --c1: #DBFFF1; --c2: #37C29A; --c3: #0E7C5A; }
[data-color="violet"] { --c1: #EEE5FF; --c2: #9B7BFF; --c3: #5334C0; }
[data-color="ink"] { --c1: #EEF1F7; --c2: #6A7890; --c3: #1C2433; }
.pass__coin[data-color] { background: radial-gradient(circle at 32% 28%, var(--c1), var(--c2) 45%, var(--c3) 100%); }
.coin-card__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.coin-show { display: flex; align-items: center; gap: 22px; margin: 6px 0 4px; }
.coin-art { position: relative; flex: none; width: 128px; height: 128px; border-radius: 50%; overflow: hidden; display: grid; place-items: center;
  background: radial-gradient(circle at 32% 28%, var(--c1), var(--c2) 45%, var(--c3) 100%); border: 4px solid rgba(255,255,255,.6);
  box-shadow: inset 0 -8px 16px rgba(2,8,20,.28), inset 0 5px 10px rgba(255,255,255,.55), 0 22px 44px -16px var(--c2); transition: background .3s, box-shadow .3s; }
.coin-art::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: linear-gradient(135deg, rgba(255,255,255,.45), transparent 45%); pointer-events: none; }
.coin-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.coin-art span { font: 800 1.4rem var(--display); color: rgba(20,12,0,.62); text-shadow: 0 1px 0 rgba(255,255,255,.5); letter-spacing: .02em; }
.coin-show__text { min-width: 0; }
.coin-show__text h3 { margin: 0 0 4px; font: 700 1.4rem/1.2 var(--display); }
.coin-show__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 0 0 6px; }
.coin-show__meta > strong { font: 700 1rem var(--display); color: var(--gold-text); }
.coin-show__pair { font-size: .85rem; color: var(--muted); padding: 2px 10px; border-radius: 999px; border: 1px solid var(--line-2); }
.coin-show__pair strong { color: var(--text); }
#coin-pitch { margin: 0 0 4px; }
#coin-by { margin: 0; }
.coin-contract { margin: 8px 0 0; }
.coin-contract code { word-break: break-all; }
.coin-note { margin: 12px 0 0; padding: 10px 14px; border-radius: 14px; background: rgba(var(--gold-rgb),.07); border: 1px solid rgba(var(--gold-rgb),.22); color: var(--text-2); }
/* the founder's one line about their picture's check (only they and the staff get it) */
.coin-logo-state { margin: 6px 0 0; color: var(--text-2); }
.coin-logo-state.is-pending { color: var(--warn); }
.coin-logo-state.is-rejected { color: var(--pin); }
.coin-logo-state.is-approved { color: var(--ok-text, var(--moss)); }
.coin-studio { margin-top: 18px; padding-top: 18px; border-top: 1px dashed var(--line-2); }
.coin-studio__grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 12px; }
.fieldset { display: flex; flex-direction: column; gap: 6px; font-size: .82rem; font-weight: 600; color: var(--muted); }
.fieldset--wide { grid-column: 1 / -1; }
.fieldset .field, .fieldset textarea { width: 100%; resize: vertical; }
.fieldset__label { margin: 16px 0 8px; font-size: .82rem; font-weight: 600; color: var(--muted); }
.pair-pick { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.pair-opt { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 10px; align-items: center; padding: 12px; border-radius: 16px; border: 1px solid var(--line-2); background: var(--card); cursor: pointer; transition: border-color .2s, background .2s, transform .2s; }
.pair-opt input { position: absolute; opacity: 0; pointer-events: none; }
.pair-opt__icon { grid-row: 1 / 3; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font: 800 1rem var(--display); color: #fff; background: linear-gradient(135deg, #9945FF, #14F195); }
.pair-opt:nth-child(2) .pair-opt__icon { background: linear-gradient(135deg, #2775CA, #5AA0F0); }
.pair-opt:nth-child(3) .pair-opt__icon { background: linear-gradient(135deg, #C200FB, #3772FF); }
.pair-opt strong { font: 700 .98rem var(--display); }
.pair-opt em { font-style: normal; font-size: .76rem; color: var(--muted); line-height: 1.3; }
.pair-opt:hover { transform: translateY(-1px); }
.pair-opt:has(input:checked) { border-color: var(--pin); background: rgba(var(--accent-rgb),.08); box-shadow: 0 0 0 3px rgba(var(--accent-rgb),.15); }
.pair-opt:has(input:focus-visible) { outline: 2px solid var(--pin); outline-offset: 2px; }
.swatches { display: flex; flex-wrap: wrap; gap: 10px; }
.swatches label { position: relative; cursor: pointer; }
.swatches input { position: absolute; opacity: 0; pointer-events: none; }
.swatch { display: block; width: 34px; height: 34px; border-radius: 50%; background: radial-gradient(circle at 32% 28%, var(--c1), var(--c2) 45%, var(--c3)); border: 2px solid rgba(255,255,255,.6); box-shadow: 0 6px 14px -6px var(--c2); transition: transform .2s; }
.swatches input:checked + .swatch { transform: scale(1.12); box-shadow: 0 0 0 3px var(--bg), 0 0 0 5px var(--pin); }
.swatches input:focus-visible + .swatch { outline: 2px solid var(--pin); outline-offset: 3px; }
.coin-studio__logo, .coin-studio__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-top: 16px; }
.coin-launch { margin-top: 16px; border-top: 1px solid var(--line); padding-top: 12px; }
.coin-launch summary { cursor: pointer; font-weight: 600; font-size: .92rem; }
.coin-launch .req-form { margin-top: 8px; }
.coin-admin { margin-top: 18px; padding-top: 14px; border-top: 1px dashed var(--line-2); }
.coin-admin li { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.coin-admin a.mono { word-break: break-all; color: var(--text); }

/* buy & swap */
.trade__head { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.trade__head .kicker { margin: 0; }
.trade h2 { margin: 6px 0 14px; }
.trade__tabs { display: flex; width: 100%; margin-bottom: 14px; }
.trade__tabs button { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.swapbox { position: relative; display: grid; gap: 6px; margin-bottom: 14px; }
.swapbox__row { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; border-radius: 18px; background: rgba(var(--ink),.05); border: 1px solid var(--line); }
.swapbox__label { font-size: .76rem; font-weight: 600; color: var(--muted); }
.swapbox__line { display: flex; align-items: center; gap: 10px; }
.swapbox__amt { flex: 1 1 0; width: 0; min-width: 0; font: 650 1.6rem/1.2 var(--display); letter-spacing: -.02em; color: var(--text); background: none; border: 0; padding: 0; outline: none; overflow: hidden; text-overflow: ellipsis; }
.swapbox__amt:disabled { opacity: .45; cursor: not-allowed; }
.swapbox__usd { min-height: 1em; font-size: .76rem; color: var(--muted); }
.swapbox__flip { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 1; width: 38px; height: 38px; border-radius: 12px; border: 4px solid var(--bg); background: var(--pin); color: var(--on-accent); font: 700 1rem var(--body); cursor: pointer; transition: transform .25s; }
.swapbox__flip:hover { transform: translate(-50%, -50%) rotate(180deg); }
.token-chip { flex: none; display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px 6px 7px; border-radius: 999px; background: var(--card-2); border: 1px solid var(--line-2); font: 700 .88rem var(--display); white-space: nowrap; }
.token-chip__dot { width: 20px; height: 20px; border-radius: 50%; background: radial-gradient(circle at 32% 28%, #FFE9A8, var(--gold) 45%, #D99A1A); }
.token-chip[data-token="sol"] .token-chip__dot { background: linear-gradient(135deg, #9945FF, #14F195); }
.token-chip[data-token="usdc"] .token-chip__dot { background: linear-gradient(135deg, #2775CA, #5AA0F0); }
.token-chip[data-token="ray"] .token-chip__dot { background: linear-gradient(135deg, #C200FB, #3772FF); }
.token-chip[data-token="vic"] .token-chip__dot { background: linear-gradient(135deg, #00CBB6, #F8C13A); } /* the legacy mark: the emblem's teal into the coin's gold, as .lp-ava[data-kind="vicinity"] */
.trade__alt { margin-top: 8px; }
.trade__note { margin: 12px 0 0; }

@media (max-width: 1100px) { .dash-top { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px) {
  .coin-show { flex-direction: column; text-align: center; }
  .coin-show__meta { justify-content: center; }
  .coin-studio__grid, .pair-pick { grid-template-columns: minmax(0, 1fr); }
  .pass { padding: 18px; }
  .pass .live-note { margin-left: 0; }
}

/* ---------- Terms of Use page ---------- */
.terms { max-width: 860px; }
.terms .callout { border: 1px solid rgba(var(--warn-rgb),.45); background: var(--warn-soft); border-radius: 14px; padding: 18px 20px; margin-bottom: 8px; }
.terms .callout p { margin: .5em 0; font-size: .95rem; }
.terms .callout p:first-child { margin-top: 0; }
.terms .callout p:last-child { margin-bottom: 0; }
.terms h2 { font: 700 1.12rem/1.4 var(--display); letter-spacing: -.01em; margin: 2em 0 .6em; color: var(--text); }
.terms p, .terms li { font-size: .95rem; line-height: 1.75; color: var(--text); }
.terms ul { margin: .6em 0 1em; padding-left: 1.3em; }
.terms li { margin: .35em 0; }
.terms li::marker { color: var(--pin); }
.terms strong { color: var(--text); }
.terms .agreebox { margin-top: 28px; text-align: center; }
.terms .agreebox .btn { margin-top: 6px; }

/* ---------- dashboard: the role panel (one per level), squads, the admin console ---------- */
.role-home, .squad-card { display: grid; gap: 12px; }
.role-home[hidden], .squad-card[hidden] { display: none; }
.role-home__head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.role-home__head .role__icon { font-size: 1.8rem; line-height: 1; }
.role-home__head h2 { margin: 0; }
.role-home__head .tag { margin-left: auto; }
.role-home[data-level="admin"], .role-home[data-level="manager"] { border-color: rgba(var(--gold-rgb),.45); }
.role-note { padding: 10px 12px; border-radius: 12px; background: var(--warn-soft); border: 1px solid rgba(var(--warn-rgb),.35); }
.role-queue { color: var(--gold-text); font-weight: 600; }
.role-tools { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.role-meter__row { display: flex; justify-content: space-between; gap: 10px; font-size: .86rem; color: var(--muted); }
.role-meter__row strong { color: var(--text); font-variant-numeric: tabular-nums; }
.role-meter .bar { margin: 6px 0 2px; }
.role-meter.is-bad .bar span { background: var(--bad-text); }
.role-meter.is-ok .bar span { background: linear-gradient(90deg, var(--moss), var(--ok-text)); }
.req-list li.is-ok { border-color: rgba(var(--ok-rgb),.4); }
.btn.is-soft { opacity: .75; }

/* ---------- Launchpad live market: motion (LAUNCHPAD_V2=on; the cards of /launchpad and the coin page /coin). What says "live" pings
   (the dot of a live coin, the end of its sparkline), a loading block shimmers, a number that changed flashes its cell once (900 ms),
   a new trade slides in, the slim bars slide. Only transform and opacity (and the shimmer's background-position on small blocks while
   they load); a live dot pings three times and rests, and nothing moves with reduced motion. ---------- */
.is-flash-up::after, .is-flash-down::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; }
.is-flash-up::after { background: rgba(var(--ok-rgb),.16); } .is-flash-down::after { background: rgba(var(--bad-rgb),.16); }
@media (prefers-reduced-motion: no-preference) {
  .lp-card__ping::after, .coin-pill__dot::after { animation: livePing 1.6s cubic-bezier(0,0,.2,1) 3; }
  .lp-spark__ping { animation: livePing 1.6s cubic-bezier(0,0,.2,1) 3; }
  .lp-spark.is-loading.is-asking { animation: shimmer 1.4s linear infinite; } /* busy: only while its chart is being asked for (launchpad.js), ends with it; a card further down waits still */
  .is-flash-up::after, .is-flash-down::after { animation: lpFlash .9s ease-out; }
  .coin-trade.is-new { animation: coinTradeIn .3s cubic-bezier(.2,.8,.2,1) backwards; }
  .coin-trade.is-new .coin-trade__row::before { animation: lpFlash 1.2s ease-out; }
  .coin-mini { transition: transform .22s cubic-bezier(.2,.8,.2,1), opacity .22s ease, visibility 0s linear .22s; }
  .coin-mini.is-on { transition: transform .22s cubic-bezier(.2,.8,.2,1), opacity .22s ease, visibility 0s; }
  .coin-buybar { transition: transform .22s cubic-bezier(.2,.8,.2,1), visibility 0s linear .22s; }
  [data-page="coin"] .site-header { transition: transform .22s cubic-bezier(.2,.8,.2,1); }
  .coin-buybar.is-on { transition: transform .22s cubic-bezier(.2,.8,.2,1), visibility 0s; }
  .lp-card--live, .coin-trade__row { transition: border-color .2s ease, background-color .2s ease; }
}
@keyframes lpFlash { 0% { opacity: 0; } 25% { opacity: 1; } 100% { opacity: 0; } }
@keyframes coinTradeIn { from { opacity: 0; transform: translateY(-8px); } }

/* =====================================================================
   Member profiles (PROFILES=on): the portfolio ring, the bio, the notice, the /profile page.
   Nothing below shows unless the page turns it on.
   ===================================================================== */
/* Ring colours: the 8-slot categorical palette on the brand (gold, teal, steel blue, coral, green, violet, lime, rose; grey is "Other"): each
   3:1 or more on the page and on a card, every pair 30 degrees of hue or more apart (test/design-v5.test.js). Slot 0 is the biggest holding. */
:root { --pf-0: #f8c13a; --pf-1: #2bd9c3; --pf-2: #7fa3d6; --pf-3: #ff9a86; --pf-4: #6fcf7e; --pf-5: #a78bfa; --pf-6: #b3d15a; --pf-7: #f28cb4; --pf-x: #7a8ca8; }
:root[data-theme="light"] { --pf-0: #a26f00; --pf-1: #0b7a70; --pf-2: #3f67a6; --pf-3: #c0392b; --pf-4: #2e8b4e; --pf-5: #6a4fd8; --pf-6: #657f14; --pf-7: #b5306c; --pf-x: #6c7d92; }
.pf-s0 { fill: var(--pf-0); background: var(--pf-0); } .pf-s1 { fill: var(--pf-1); background: var(--pf-1); } .pf-s2 { fill: var(--pf-2); background: var(--pf-2); } .pf-s3 { fill: var(--pf-3); background: var(--pf-3); }
.pf-s4 { fill: var(--pf-4); background: var(--pf-4); } .pf-s5 { fill: var(--pf-5); background: var(--pf-5); } .pf-s6 { fill: var(--pf-6); background: var(--pf-6); } .pf-s7 { fill: var(--pf-7); background: var(--pf-7); }
.pf-sx { fill: var(--pf-x); background: var(--pf-x); }

.portfolio-card__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 4px 12px; flex-wrap: wrap; }
.portfolio-card__head h2 { margin-bottom: .2em; }
.pf__meta { display: flex; align-items: center; gap: 4px 10px; flex-wrap: wrap; }
.pf__meta .tiny { margin: 0; }
.pf__refresh { min-height: 44px; padding: 0 10px; }
.pf__net { margin: 6px 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 0 18px; }
.pf__net a, #profile-net-sec .link-list a { display: inline-block; padding: 12px 0; }
.pf__body { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 14px 24px; margin-top: 8px; }
.pf__chart { flex: 0 0 176px; max-width: 100%; margin: 0 auto; }
.pf-donut { width: 176px; max-width: 100%; height: auto; display: block; }
.pf-slice { stroke: none; }
.pf-track { stroke: var(--line-2); }
.pf-total__label { fill: var(--muted); font: 600 11px var(--body); letter-spacing: .08em; text-transform: uppercase; }
.pf-total__value { fill: var(--text); font: 700 21px var(--display); }
.pf__legend { flex: 1 1 260px; min-width: 0; }
.pf-table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.pf-table th, .pf-table td { padding: 8px 6px; border-bottom: 1px solid var(--line); text-align: right; vertical-align: middle; font-weight: 500; font-variant-numeric: tabular-nums; }
.pf-table thead th { font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); font-weight: 600; padding-top: 0; }
.pf-table .pf-c-coin { text-align: left; }
.pf-table .pf-c-amt, .pf-table .pf-c-val { overflow-wrap: normal; }
.pf-table tbody th.pf-c-coin { font-weight: 500; }
.pf-table tfoot th, .pf-table tfoot td { border-bottom: 0; padding-top: 10px; }
.pf-table td strong, .pf-table th strong { display: block; font-weight: 650; }
.pf-sub { display: block; font-size: .76rem; color: var(--muted); font-weight: 500; overflow-wrap: break-word; }
.pf-sw { display: inline-block; width: 12px; height: 12px; border-radius: 50%; margin-right: 10px; vertical-align: middle; }
.pf-sn { background: transparent; border: 2px solid var(--muted); }
.pf-coin { display: inline-block; vertical-align: middle; max-width: calc(100% - 26px); }
.pf-note { margin: 8px 0 0; }
.pf__empty { display: grid; gap: 4px; padding: 10px 0 4px; }
.pf__empty .muted { margin: 0; }
.pf-table tr.is-hot { background: var(--card-2); }
@media (prefers-reduced-motion: no-preference) { .pf-slice { transition: opacity .15s ease; } }
.pf__body[data-hot] .pf-slice:not(.is-hot) { opacity: .4; }
@media (max-width: 420px) { .pf__chart, .pf-donut { flex-basis: 100%; } .pf-donut { margin: 0 auto; } }

/* the bio on the pass, the bio form */
.pass__id .pass__bio { margin-top: 4px; font-size: .86rem; line-height: 1.35; color: rgba(255,255,255,.92); white-space: normal; overflow-wrap: anywhere; }
.pass__id .pass__bio.is-empty { opacity: .72; font-style: italic; }
.bio-form { display: grid; gap: 8px; }
.bio-form textarea { width: 100%; resize: vertical; min-height: 64px; background: var(--card-2); border: 1px solid var(--field-line); border-radius: 12px; padding: 11px 12px; }
.bio-form textarea:focus { outline: 2px solid var(--pin-2); outline-offset: 1px; }
.bio-form__row { display: flex; align-items: center; gap: 4px 12px; flex-wrap: wrap; }
.bio-form__row .tiny { margin: 0; }
.bio-form__row .btn { margin-left: auto; min-height: 44px; }
.bio-form__hint.is-warn, #bio-count.is-over { color: var(--bad-text); }
#bio-count.is-over { font-weight: 700; }
.pf-notice { margin-bottom: 14px; padding: 14px 18px; border-radius: 16px; border: 1px solid rgba(var(--blue-rgb),.5); background: rgba(var(--blue-rgb),.1); display: flex; align-items: center; gap: 10px 18px; flex-wrap: wrap; }
.pf-notice p { margin: 0; flex: 1 1 320px; }
.pf-notice__actions .btn { min-height: 44px; }

/* the /profile page */
.prof { padding-top: 28px; }
.prof .card { position: relative; border-radius: 24px; padding: 22px; background: linear-gradient(180deg, rgba(var(--ink),.07), rgba(var(--ink),.025)); border-color: rgba(var(--ink),.1); }
:root[data-theme="light"] .prof .card { background: var(--card); }
.prof-note { max-width: 640px; margin: 24px auto; display: grid; justify-items: start; gap: 4px; }
.prof-note p { margin: 0 0 10px; }
.prof-head h1 { margin-bottom: .5em; }
.prof-search { margin-bottom: 16px; max-width: 640px; }
.prof-search__row { display: flex; gap: 8px; }
.prof-search input { flex: 1; min-width: 0; min-height: 48px; background: var(--card-2); border: 1px solid var(--field-line); border-radius: 999px; padding: 0 18px; }
.prof-search input:focus { outline: 2px solid var(--pin-2); outline-offset: 1px; }
.prof-status { margin: 6px 6px 0; min-height: 1.3em; }
.prof-status.is-err { color: var(--bad-text); }
.prof-results { list-style: none; margin: 8px 0 0; padding: 6px; display: grid; gap: 2px; border: 1px solid var(--line-2); border-radius: 16px; background: var(--card-2); }
.prof-result { display: flex; justify-content: space-between; align-items: center; gap: 4px 12px; flex-wrap: wrap; min-height: 48px; padding: 8px 14px; border-radius: 12px; color: var(--text); text-decoration: none; }
.prof-result:hover, .prof-result:focus-visible { background: rgba(var(--ink),.09); }
.prof-intro, .prof-self { margin-bottom: 14px; max-width: 640px; }
.prof-intro p, .prof-self p { margin: 0 0 10px; }
.prof-self { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.prof-self p { flex: 1 1 260px; margin: 0; }
.prof-loading { margin: 10px 4px; }
.prof-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 14px; align-items: start; }
@media (max-width: 900px) { .prof-grid { grid-template-columns: minmax(0, 1fr); } }
.prof-col { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; min-width: 0; }
.prof-pass { min-height: 0; }
.prof-pass .pass__name { margin: 0; white-space: normal; overflow-wrap: anywhere; } /* a long username shows whole */
/* under 360 px the id column beside the coin disc is about 108 px: the disc steps aside and the name is a little smaller, so a
   username keeps to one line at 320 px (a 20-character one too, unless it is all wide capitals: then overflow-wrap is the last
   resort), and the role pill stays in one piece under the brand instead of breaking across two lines */
@media (max-width: 359px) {
  .prof-pass .pass__coin { display: none; }
  .prof-pass .pass__name { font-size: 1.05rem; }
  .prof-pass .pass__top { flex-wrap: wrap; gap: 6px 12px; }
  .prof-pass .role-pill { white-space: nowrap; }
}
.prof-badges { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.prof-badges:empty { display: none; }
.prof-badges li { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.28); font-size: .78rem; color: #fff; }
.prof-actions { display: grid; gap: 12px; }
.prof-actions p { margin: 0; }
.prof-actions__row { display: flex; align-items: center; gap: 10px; }
#pf-follow, #pf-unblock { flex: 1 1 auto; }
.prof-menu { position: relative; flex: none; }
.prof-menu__btn { min-width: 48px; padding: 0 16px; font-size: 1.3rem; line-height: 1; }
.prof-menu__list { position: absolute; right: 0; top: calc(100% + 6px); z-index: 20; min-width: 170px; list-style: none; margin: 0; padding: 6px; display: grid; border-radius: 14px; background: var(--bg-3); border: 1px solid var(--line-2); box-shadow: var(--shadow); }
.prof-menu__list button { width: 100%; min-height: 44px; padding: 0 14px; text-align: left; border: 0; border-radius: 10px; background: none; color: var(--text); font: 600 .95rem var(--body); cursor: pointer; }
.prof-menu__list button:hover, .prof-menu__list button:focus-visible { background: var(--card-2); }
.prof-counts { display: flex; gap: 10px; }
.prof-count { flex: 1; min-height: 56px; display: grid; place-items: center; align-content: center; padding: 8px; border-radius: 16px; border: 1px solid var(--line-2); background: var(--card-2); color: var(--text); cursor: pointer; }
.prof-count strong { font: 650 1.3rem/1.1 var(--display); }
.prof-count span { font-size: .78rem; color: var(--muted); }
.prof-count[aria-expanded="true"] { border-color: var(--pin-2); }
.prof-h { font: 650 1.15rem/1.2 var(--display); letter-spacing: -.01em; margin: 0 0 10px; }
.prof-wallet__addr { margin: 0 0 12px; word-break: break-all; }
.prof-wallet__row { display: flex; flex-wrap: wrap; gap: 8px; }
.prof-wallet__row .btn { min-height: 44px; }
.prof-hold .kv { margin: 0; }
.prof-lists { margin-top: 14px; }
.prof-lists__head { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.prof-lists__head .link-btn { min-height: 44px; padding: 0 8px; }
.prof-people { list-style: none; margin: 0 0 12px; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr)); gap: 8px; }
.prof-person { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 8px 12px; border-radius: 16px; border: 1px solid var(--line); background: var(--card); color: var(--text); text-decoration: none; }
.prof-person:hover { border-color: var(--line-2); }
.prof-person__av { width: 40px; height: 40px; border-radius: 12px; font-size: 1.05rem; }
.prof-person__id { display: grid; min-width: 0; }
.prof-person__id strong, .prof-person__id span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.prof-blocks { margin-top: 14px; }
.prof-blocks summary { min-height: 44px; display: flex; align-items: center; font-weight: 600; cursor: pointer; }
.prof-people--blocks { grid-template-columns: minmax(0, 1fr); }
.prof-blocked { display: flex; justify-content: space-between; align-items: center; gap: 10px; min-height: 52px; }
.prof-dialog__fields { display: grid; gap: 10px; }
.prof-dialog__actions { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; }
.prof-dialog__actions .btn { min-height: 44px; }
.prof .btn--sm { min-height: 44px; }
.prof-blocked a { display: inline-block; padding: 12px 0; }
.prof-postlist { list-style: none; margin: 0 0 4px; padding: 0; display: grid; gap: 10px; }
.prof-post { padding: 12px 14px; border-radius: 16px; border: 1px solid var(--line); background: var(--card); }
.prof-post p { margin: 0; }
.prof-post__meta { margin-bottom: 4px !important; }
.prof-post__body { overflow-wrap: anywhere; }
.prof-post__img { margin-top: 8px; width: 100%; max-height: 260px; object-fit: cover; border-radius: 12px; }
.prof-posts .tiny { margin: 10px 0 0; }
#pf-follow[aria-disabled="true"], #pf-unblock[aria-disabled="true"] { opacity: .7; cursor: progress; }
@media (max-width: 380px) {
  .prof .card, .dash-col > .portfolio-card { padding: 18px 14px; }
  .pf-table { font-size: .84rem; }
  .pf-table th, .pf-table td { padding: 8px 3px; }
  .pf-sw { margin-right: 7px; }
  .pf-coin { max-width: calc(100% - 20px); }
  .pf-sub { font-size: .72rem; }
}

/* ---------- Launchpad city coins (LAUNCHPAD_V2=on): tabs, search, filters, cards. Every control is at least 44 px tall. ---------- */
.lp-coins { padding: 48px 0 64px; border-top: 1px solid var(--line); }
.lp-coins__head { margin-bottom: 22px; }
.lp-coins__head h2 { margin-bottom: .3em; }
.lp-tools { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px 16px; align-items: start; }
.lp-tabs { display: flex; flex-wrap: wrap; width: 100%; gap: 2px; }
.lp-tabs button { flex: 1 1 auto; min-height: 44px; padding: 7px 14px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; white-space: nowrap; }
.lp-tabs button:focus-visible { outline: 2px solid var(--pin-2); outline-offset: 2px; }
.lp-tabs__n { font-size: .74rem; font-weight: 700; min-width: 1.6em; padding: 1px 7px; border-radius: 999px; background: rgba(var(--ink),.1); color: var(--muted); font-variant-numeric: tabular-nums; }
.lp-tabs button[aria-selected="true"] .lp-tabs__n { background: var(--accent-soft); color: var(--pin-2); }
.lp-search { margin: 0; }
.lp-search input { width: 100%; min-height: 48px; background: var(--card-2); border: 1px solid var(--field-line); border-radius: 999px; padding: 0 18px; }
.lp-search input:focus { outline: 2px solid var(--pin-2); outline-offset: 1px; }
.lp-filters { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.lp-field { display: grid; gap: 4px; min-width: 0; }
.lp-field > span { font-size: .72rem; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); font-weight: 600; padding-left: 4px; }
.lp-field select { width: 100%; min-height: 44px; background: var(--card-2); border: 1px solid var(--field-line); border-radius: 12px; padding: 0 12px; }
.lp-field select:focus { outline: 2px solid var(--pin-2); outline-offset: 1px; }
.lp-meta { display: flex; flex-wrap: wrap; gap: 4px 12px; margin: 16px 4px 12px; min-height: 1.4em; }
#lp-count { font-weight: 600; }
.lp-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 14px; }
.lp-card { position: relative; display: grid; gap: 12px; padding: 18px; border-radius: 22px; min-width: 0; container-type: inline-size; }
.lp-card__disc span { font-size: .78rem; max-width: 92%; }
.lp-card__id { flex: 1; min-width: 0; }
.lp-card__title { margin: 0; font-size: 1.1rem; line-height: 1.25; display: flex; flex-wrap: wrap; gap: 0 8px; align-items: baseline; }
.lp-card__ticker { font-weight: 700; }
.lp-card__name { font-weight: 500; color: var(--text-2); font-family: var(--body); font-size: .95rem; overflow-wrap: anywhere; }
.lp-card__status { flex: none; max-width: 56%; white-space: normal; text-align: center; margin-top: 2px; font-variant-numeric: tabular-nums; } /* a long tag wraps inside its pill rather than crushing the title */
.lp-card__meta { margin: 0; display: flex; flex-wrap: wrap; gap: 0 4px; }
.lp-stats { margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px 12px; padding: 12px 0 0; border-top: 1px solid var(--line); }
.lp-stat { min-width: 0; }
.lp-stat dt { font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); font-weight: 600; }
.lp-stat dd { margin: 0; font: 650 1rem/1.3 var(--display); letter-spacing: -.01em; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.lp-stat:last-child { grid-column: 1 / -1; }
.lp-stat:last-child dd { font: 600 .92rem/1.35 var(--body); }
.lp-na { color: var(--faint); cursor: help; }
.lp-chg { font-size: .8rem; font-weight: 600; color: var(--muted); }
.lp-chg.is-up { color: var(--ok-text); }
.lp-chg.is-down { color: var(--bad-text); }
.lp-card__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; padding-top: 2px; }
.lp-card__actions .btn { min-height: 44px; }
.lp-card__actions .btn--primary { flex: 1 1 auto; }
.lp-card__wait { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; flex: 1 1 auto; }
.lp-card__wait .tiny { margin: 0; flex: 1 1 160px; }
.lp-empty { display: grid; justify-items: start; gap: 10px; padding: 22px; }
.lp-empty p { margin: 0; max-width: 60ch; }
.lp-empty .btn { min-height: 44px; }
.lp-honesty { margin: 18px 4px 0; max-width: 78ch; }
:root[data-theme="light"] .lp-tabs__n { background: rgba(var(--ink),.08); }
@media (max-width: 900px) { .lp-tools { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 600px) {
  .lp-coins { padding: 36px 0 52px; }
  .lp-filters { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .lp-filters .lp-field:last-child { grid-column: 1 / -1; }
  .lp-tabs button { padding: 7px 10px; font-size: .86rem; }
  .lp-card { padding: 16px 14px; }
  .lp-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 480px) {
  /* narrow phones: the status tag sits under the title instead of beside it, so neither is squeezed */
  .lp-card__head { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 6px 12px; align-items: start; }
  .lp-card__status { grid-column: 2; justify-self: start; max-width: 100%; margin-top: 0; }
}
@media (max-width: 360px) { .lp-filters { grid-template-columns: minmax(0, 1fr); } .lp-filters .lp-field:last-child { grid-column: auto; } }

/* ---------- Launchpad live market (LAUNCHPAD_V2=on): the live coin cards and the coin page /coin. Nothing here moves by itself: the
   live dots, the flash of a changed number, a new trade and the slim bars are in "Launchpad live market: motion" (before the
   member profiles). Every number in Space Grotesk with tabular figures, so a live tick never shifts its neighbours. ---------- */
:root { --up: #34D399; --down: #FF8C74; --chart-halo: rgba(7,20,38,.86); }
:root[data-theme="light"] { --up: #1E9E78; --down: #C0392B; --chart-halo: rgba(255,255,255,.92); }
.lp-card--live { cursor: pointer; }
.lp-card__title a { position: relative; color: inherit; text-decoration: none; }
.lp-card__title a::after { content: ""; position: absolute; inset: -11px -6px; } /* a 44 px hit area around the one-line title */
.lp-card__title a:focus-visible { outline: 3px solid var(--pin-2); outline-offset: 3px; border-radius: 6px; }
.lp-card__sub { margin: 2px 0 0; font-size: .75rem; color: var(--muted); }
.lp-card__status { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.lp-card__ping, .coin-pill__dot { position: relative; flex: none; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.lp-card__ping::after, .coin-pill__dot::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: currentColor; opacity: 0; pointer-events: none; }
.lp-price { position: relative; display: grid; gap: 2px; border-radius: 12px; }
.lp-price__row { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.lp-price__val { font: 600 1.625rem/1.1 var(--display); letter-spacing: -.02em; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.lp-price.is-stale .lp-price__val, .lp-price.is-stale .lp-chg2 { opacity: .7; }
.lp-chg2, .coin-chg { display: inline-flex; align-items: center; padding: 4px 8px; border-radius: 999px; font: 700 .75rem/1.1 var(--body); font-variant-numeric: tabular-nums; white-space: nowrap;
  color: var(--muted); background: rgba(var(--ink),.06); }
.lp-chg2.is-up, .coin-chg.is-up { color: var(--ok-text); background: var(--ok-soft); }
.lp-chg2.is-down, .coin-chg.is-down { color: var(--bad-text); background: var(--bad-soft); }
.lp-delayed { font-size: .7rem; }
.lp-src { margin: 0; font-size: .7rem; line-height: 1.4; color: var(--muted); }
/* the sparkline: 44 px, a line and its fading area, a dot where it ends; dashed with words when there is none */
.lp-spark { position: relative; height: 44px; color: var(--muted); }
.lp-spark.is-up { color: var(--up); } .lp-spark.is-down { color: var(--down); }
.lp-spark__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.lp-spark__line { fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linejoin: round; stroke-linecap: round; }
.lp-spark__stop0 { stop-color: currentColor; stop-opacity: .28; }
.lp-spark__stop1 { stop-color: currentColor; stop-opacity: 0; }
.lp-spark__end { position: absolute; top: 0; right: -10px; width: 20px; height: 100%; overflow: visible; }
.lp-spark__dot { fill: currentColor; }
.lp-spark__ping { fill: currentColor; opacity: 0; transform-box: fill-box; transform-origin: center; }
.lp-spark__label { position: absolute; left: 0; top: -2px; padding: 2px 5px; border-radius: 6px; font: 600 .625rem/1 var(--body); letter-spacing: .04em; color: var(--muted); background: var(--chip-bg, var(--glass)); }
.lp-spark.is-empty, .lp-spark.is-loading { display: flex; align-items: center; justify-content: center; }
.lp-spark__dash { position: absolute; left: 0; right: 0; top: 50%; border-top: 1px dashed var(--line-2); }
.lp-spark__msg { position: relative; padding: 2px 10px; border-radius: 999px; font-size: .7rem; color: var(--muted); background: var(--chip-bg, var(--glass)); }
.lp-spark.is-loading { border-radius: 10px; background: linear-gradient(90deg, rgba(var(--ink),.04), rgba(var(--ink),.1), rgba(var(--ink),.04)); background-size: 200% 100%; }
.coin-head__ticker > .skel { display: inline-block; min-height: 1em; } /* the ticker's still placeholder sits inside its h1 */
.skel--w140 { min-width: 140px; }
/* the four numbers: 2 × 2, four in a row on a card 400 px wide or more */
.lp-stats--live { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding: 0; border-top: 0; }
@container (min-width: 400px) { .lp-stats--live { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.lp-stats--live .lp-stat { position: relative; min-height: 54px; padding: 8px 10px; border-radius: 12px; background: rgba(var(--ink),.035); }
.lp-stats--live .lp-stat:last-child { grid-column: auto; }
.lp-stats--live .lp-stat dd, .lp-stats--live .lp-stat:last-child dd { font: 600 1rem/1.3 var(--display); font-variant-numeric: tabular-nums; }
/* each number's source (or why it is "—") under it, on screen: a phone shows no tooltip */
.lp-stats--live .lp-stat dd.lp-stat__src { margin-top: 2px; font: 500 .66rem/1.3 var(--body); color: var(--muted); overflow-wrap: anywhere; }
.lp-stats__foot { margin-top: 6px; }
/* the bonding curve: SOL raised against the target, a native progress bar (no style attribute needed) */
.lp-curve { display: grid; gap: 6px; }
.lp-curve__row { margin: 0; display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-size: .75rem; font-weight: 600; color: var(--text-2); }
.lp-curve__pct { font: 600 .875rem var(--display); color: var(--text); font-variant-numeric: tabular-nums; }
.lp-bar { -webkit-appearance: none; appearance: none; display: block; width: 100%; height: 8px; border: 0; border-radius: 999px; overflow: hidden; background: rgba(var(--ink),.08); color: var(--pin); }
.lp-bar::-webkit-progress-bar { background: rgba(var(--ink),.08); border-radius: 999px; }
.lp-bar::-webkit-progress-value { background: linear-gradient(90deg, var(--pin), var(--gold-ui)); border-radius: 999px; }
.lp-bar::-moz-progress-bar { background: linear-gradient(90deg, var(--pin), var(--gold-ui)); border-radius: 999px; }
.lp-curve.is-done .lp-bar::-webkit-progress-value, .coin-curve__bar.is-done::-webkit-progress-value { background: linear-gradient(90deg, var(--moss), var(--ok-text)); }
.lp-curve.is-done .lp-bar::-moz-progress-bar, .coin-curve__bar.is-done::-moz-progress-bar { background: linear-gradient(90deg, var(--moss), var(--ok-text)); }
.lp-card--live .lp-card__actions .btn--glass { flex: 0 1 auto; }
@media (hover: hover) and (pointer: fine) { .lp-card--live:hover { border-color: var(--accent-line); } }
/* "Live now": the Vicinity token on top of the list, the same card with a larger chart (two columns on a computer) */
.lp-featured { list-style: none; margin: 0 0 30px; padding: 0; }
.lp-featured:not(.is-on) { display: none; }
.lp-featured::before { content: "Live now"; display: block; margin: 0 0 10px 4px; font: 600 .8rem var(--display); letter-spacing: .16em; text-transform: uppercase; color: var(--pin-2); }

/* the coin page (/coin): phone first, one column; two from 1024 px (the chart and the numbers left, buying and the curve right) */
.coin-page { padding: 12px 0 36px; }
.coin-back { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; color: var(--muted); text-decoration: none; font-weight: 600; font-size: .92rem; }
.coin-back:hover { color: var(--text); }
.coin-grid { display: grid; gap: 14px; }
.coin-grid--lower { margin-top: 14px; }
.coin-main, .coin-side { display: grid; gap: 14px; min-width: 0; align-content: start; }
.coin-page .card { padding: 16px; border-radius: 20px; min-width: 0; }
.coin-card__title { margin: 0; font: 600 1rem/1.3 var(--display); letter-spacing: -.01em; }
.coin-trades .coin-card__title { display: flex; align-items: center; gap: 8px; }
.coin-card__head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin-bottom: 12px; }
.coin-card__head .coin-card__title { margin-right: auto; }
.coin-foot { margin: 10px 0 0; font-size: .72rem; line-height: 1.45; color: var(--muted); }
.coin-card__head .coin-foot { margin: 0; }
.coin-foot__link { display: inline-flex; align-items: center; min-height: 44px; color: var(--muted); }
.coin-note { margin-top: 6px; padding: 24px; display: grid; gap: 6px; }
.coin-note__title { margin: 0; font-size: 1.5rem; }
.coin-note__actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 8px 0 0; }
/* the header: disc, ticker, pills, the live price */
.coin-head { display: grid; gap: 12px; }
.coin-head__top { display: flex; align-items: center; gap: 14px; min-width: 0; }
.coin-head__id { min-width: 0; }
.coin-head__ticker { margin: 0; font: 700 1.75rem/1.1 var(--display); letter-spacing: -.02em; overflow-wrap: anywhere; }
.coin-head__name { margin: 3px 0 0; font-size: .875rem; color: var(--muted); }
.coin-pills { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; min-height: 24px; }
.coin-pill { display: inline-flex; align-items: center; gap: 6px; }
.coin-price { display: grid; gap: 4px; }
.coin-price__row { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.coin-price__val { font: 600 2.25rem/1.05 var(--display); letter-spacing: -.02em; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.coin-price__scrub { color: var(--text-2); }
.coin-price .coin-chg { font-size: .8rem; padding: 5px 9px; }
.coin-price__sub { margin: 0; font-size: .8125rem; line-height: 1.45; color: var(--muted); }
.coin-head__buy { width: 100%; min-height: 52px; }
/* the chart: the range (each segment 44 px tall), the unit and the style; the canvas lets a vertical swipe scroll the page */
.coin-chart__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 10px; margin-bottom: 10px; }
.coin-chart__legend { margin: 0; font: 700 .8rem var(--body); color: var(--muted); font-variant-numeric: tabular-nums; }
.coin-chart__controls { display: grid; gap: 8px; margin-bottom: 10px; }
.coin-chart__row2 { display: flex; flex-wrap: wrap; gap: 8px; justify-content: space-between; }
.coin-seg { display: flex; }
.coin-seg button { min-height: 44px; min-width: 44px; padding: 0 12px; display: inline-flex; align-items: center; justify-content: center; font-size: .8125rem; font-variant-numeric: tabular-nums; }
.coin-seg--range { width: 100%; }
.coin-seg--range button { flex: 1 1 0; padding: 0 4px; }
.coin-chart__stage { position: relative; height: 260px; margin: 0 -6px; }
.coin-chart__canvas { display: block; width: 100%; height: 100%; border-radius: 12px; cursor: crosshair; touch-action: pan-y; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.coin-chart__canvas:focus-visible { outline: 2px solid var(--pin-2); outline-offset: 2px; }
.coin-chart__state { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 10px; padding: 16px; text-align: center; }
.skel--chart { position: absolute; inset: 0; border-radius: 12px; }
.coin-chart__msg { position: relative; margin: 0; max-width: 36ch; font-size: .9rem; color: var(--text-2); }
.coin-chart__act { position: relative; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 0; }
.coin-chart__act .btn { min-height: 44px; }
/* the numbers */
.coin-tiles { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.coin-tile { position: relative; min-width: 0; min-height: 64px; padding: 10px 12px; border-radius: 14px; background: rgba(var(--ink),.035); border: 1px solid var(--line); }
.coin-tile dt { font: 600 .6875rem/1.3 var(--body); text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.coin-tile dd { margin: 4px 0 0; display: grid; gap: 2px; }
.coin-tile__val { font: 600 1.0625rem/1.25 var(--display); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.coin-tile__sub { font-size: .75rem; line-height: 1.35; color: var(--text-2); }
.coin-tile__src { font-size: .625rem; line-height: 1.35; color: var(--muted); overflow-wrap: anywhere; }
.coin-tile.is-na .coin-tile__val { color: var(--faint); }
.coin-tile.is-stale .coin-tile__val { opacity: .7; }
.coin-tile.is-up .coin-tile__val { color: var(--ok-text); } .coin-tile.is-down .coin-tile__val { color: var(--bad-text); }
@media (max-width: 719px) { .coin-tile.is-last-odd { grid-column: 1 / -1; } } /* an odd last tile (of those shown: coin.js) spans the row */
/* the curve */
.coin-curve__big { margin: 10px 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.coin-curve__big strong { font: 600 1.75rem/1 var(--display); font-variant-numeric: tabular-nums; }
.coin-curve__bar { height: 12px; margin-bottom: 10px; }
.coin-curve p.small { margin: 0; color: var(--text-2); }
/* the card is there from the first paint (it used to appear with the answer and push the contract card 363 px down): its text keeps
   the room the curve's sentence takes in the side column */
@media (min-width: 1024px) { .coin-curve__text { min-height: 9.9em; } .coin-curve__src { min-height: 2.9em; } }
/* the contract */
.coin-ca .contract__badge.is-plain { color: var(--muted); background: rgba(var(--ink),.06); border-color: var(--line-2); }
.coin-ca__addr code { font-size: clamp(14px, 4vw, 16px); }
/* trades: two short lines each, never a wide table */
.coin-trades__list { list-style: none; margin: 0; padding: 0; display: grid; }
.coin-trade { position: relative; }
.coin-trade + .coin-trade { border-top: 1px solid var(--line); }
.coin-trade__row { position: relative; display: grid; gap: 2px; min-height: 56px; padding: 8px 6px; border-radius: 10px; color: inherit; text-decoration: none; }
.coin-trade__row::before { content: ""; position: absolute; inset: 0; border-radius: inherit; opacity: 0; pointer-events: none; }
.coin-trade__row.is-buy::before { background: rgba(var(--ok-rgb),.12); } .coin-trade__row.is-sell::before { background: rgba(var(--bad-rgb),.1); }
.coin-trade__row:hover { background: rgba(var(--ink),.04); }
.coin-trade__top { display: flex; align-items: center; gap: 8px; min-width: 0; }
.coin-tside { flex: none; padding: 2px 8px; border-radius: 999px; font: 700 .72rem/1.4 var(--body); }
.coin-tside--buy { color: var(--ok-text); background: var(--ok-soft); }
.coin-tside--sell { color: var(--bad-text); background: var(--bad-soft); }
.coin-trade__amt { font: 600 .9375rem var(--display); font-variant-numeric: tabular-nums; white-space: nowrap; }
.coin-trade__tok { margin-left: auto; min-width: 0; font-size: .8rem; color: var(--muted); text-align: right; font-variant-numeric: tabular-nums; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.coin-trade__who { font-size: .75rem; color: var(--muted); overflow-wrap: anywhere; }
/* holders, about, sources */
.coin-holders__n { margin: 6px 0 10px; display: flex; align-items: baseline; gap: 8px; }
.coin-holders__n strong { font: 600 1.75rem/1 var(--display); font-variant-numeric: tabular-nums; }
.coin-holders__list { list-style: none; margin: 0; padding: 0; display: grid; }
.coin-holder { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 38px; font-size: .84rem; border-bottom: 1px dashed var(--line); }
.coin-holder__who { min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; }
.coin-holder__rank { color: var(--muted); font-variant-numeric: tabular-nums; }
.coin-holder code { padding: 0; background: none; }
.coin-holder__addr { display: inline-block; padding: 12px 0; margin: -12px 0; color: inherit; text-decoration: none; } /* a 44 px tap on the wallet, the row no taller (like the token page's list) */
.coin-holder__addr:hover code { color: var(--pin-2); text-decoration: underline; }
.coin-holder__tag { font-size: .62rem; padding: 1px 7px; }
.coin-holder__pct { flex: none; font-weight: 600; font-variant-numeric: tabular-nums; }
.coin-holders .link-btn { min-height: 44px; display: inline-flex; align-items: center; }
.coin-about__links { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 0; }
.coin-about__link { min-height: 44px; display: inline-flex; align-items: center; }
.coin-sources { margin: 18px 4px 0; font-size: .75rem; line-height: 1.6; color: var(--muted); }
.coin-sources a { color: var(--text-2); }
/* the slim header (every size, once the price scrolls away) and the phone's Buy bar (once the header's Buy scrolls away) */
.coin-mini { position: fixed; top: var(--header-h); left: 0; right: 0; z-index: 45; height: 52px; background: var(--glass); -webkit-backdrop-filter: saturate(1.4) blur(14px); backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid var(--line); opacity: 0; transform: translateY(-100%); visibility: hidden; pointer-events: none; }
.coin-mini.is-on { opacity: 1; transform: none; visibility: visible; pointer-events: auto; }
.coin-mini__inner { height: 100%; display: flex; align-items: center; gap: 10px; }
.coin-mini__ticker { font: 700 .95rem var(--display); }
.coin-mini__price { margin-left: auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 600 .95rem var(--display); font-variant-numeric: tabular-nums; }
.coin-mini__ticker { flex: none; }
.coin-mini__buy { display: none; }
.coin-buybar { display: none; }
/* phones: the slim bar takes the site header's place while it is on (the header comes back with the price, or with the keyboard) */
@media (max-width: 1023px) {
  .coin-mini { top: 0; }
  body.has-coin-mini .site-header:not(:focus-within) { transform: translateY(calc(-100% - 12px)); } /* the floating header's offset too: no sliver left */
}
/* short screens: Buy rides in the slim bar instead of a third bar at the bottom */
@media (max-width: 1023px) and (max-height: 700px) {
  .coin-mini__buy:not([hidden]) { display: inline-flex; flex: none; min-height: 44px; padding: 0 14px; }
  .coin-mini .coin-chg { display: none; }
}
@media (max-width: 1023px) {
  .coin-buybar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 55; display: flex; align-items: center; gap: 10px; height: calc(64px + env(safe-area-inset-bottom)); padding: 0 16px env(safe-area-inset-bottom);
    background: var(--glass); -webkit-backdrop-filter: saturate(1.4) blur(16px); backdrop-filter: saturate(1.4) blur(16px); border-top: 1px solid var(--line-2); transform: translateY(100%); visibility: hidden; }
  .coin-buybar.is-on { transform: none; visibility: visible; }
  .coin-buybar__buy { flex: 1; min-height: 46px; }
  .coin-buybar__copy { flex: none; width: 46px; min-height: 46px; padding: 0; }
  body.has-coin-buybar .coin-page { padding-bottom: 108px; }
}
@media (max-width: 900px) { .coin-buybar { bottom: var(--tabbar-h, 67px); height: 64px; padding-bottom: 0; } }
@media (min-width: 720px) {
  .coin-chart__controls { grid-template-columns: auto auto; justify-content: space-between; align-items: center; }
  .coin-seg--range { width: auto; }
  .coin-seg--range button { flex: none; min-width: 52px; }
  .coin-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .coin-page { padding-top: 16px; }
  .coin-grid { grid-template-columns: minmax(0, 1fr) 360px; gap: 20px; align-items: start; }
  .coin-grid--lower { margin-top: 20px; }
  .coin-main, .coin-side { gap: 20px; }
  .coin-grid > .coin-side:not(.coin-side--lower) { position: sticky; top: 130px; }
  .coin-page .card { padding: 20px; }
  .coin-price__val { font-size: 2.75rem; }
  .coin-head__buy { display: none; }
  .coin-chart__stage { height: 380px; }
  .coin-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1180px) { .coin-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 359px) { .coin-head__ticker { font-size: 1.5rem; } .coin-price__val { font-size: 1.9rem; } .coin-seg button { padding: 0 9px; } }

/* ---- dashboard v2 ---- */
/* DASHBOARD_V2=on only. Every selector is scoped under .dv2 (the #dv2 wrapper that holds the tab strip and the panels) or
   .dv2-skel (the loading placeholders), so nothing here can touch the flag-off layout. Tokens only; both themes; the
   Founder card uses fixed light-on-dark colours like the pass. Spacing scale: 4, 8, 12, 14, 16, 24. */

/* the tab strip: sticky under the site header (66px + 1px border), full-bleed inside .wrap, scrolls sideways on phones */
.dv2 .dtabs { position: sticky; top: 67px; z-index: 40; margin: 0 -24px 14px; padding: 4px 24px; background: var(--glass); backdrop-filter: saturate(1.5) blur(14px); -webkit-backdrop-filter: saturate(1.5) blur(14px); border-bottom: 1px solid var(--line); }
.dv2 .dtabs__list { display: flex; gap: 4px; padding: 4px 0; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity; }
.dv2 .dtabs__list::-webkit-scrollbar { display: none; }
.dv2 .dtabs.is-scrollable::after { content: ""; position: absolute; top: 0; bottom: 0; right: 0; width: 48px; pointer-events: none; background: linear-gradient(90deg, transparent, var(--glass)); }
.dv2 .dtab { position: relative; flex: none; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border-radius: 999px; color: var(--muted); text-decoration: none; font: 600 .92rem var(--body); scroll-snap-align: center; }
.dv2 .dtab:hover { color: var(--text); background: var(--card); }
/* the list clips its overflow, so the focus ring sits inside the pill where it can be seen whole */
.dv2 .dtab:focus-visible { outline-offset: -3px; }
.dv2 .dtab.is-alert .dtab__text::after { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--pin); margin-left: 6px; vertical-align: middle; }
.dv2 .dtab__badge { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 7px; border-radius: 999px; font: 700 .74rem var(--display); background: var(--accent-soft); color: var(--pin-2); }

/* the panels: one column of cards; Home is two-up on wide screens */
.dv2 .dpanel { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; width: 100%; max-width: 920px; margin: 0 auto; }
.dv2 .dpanel > * { min-width: 0; }
.dv2 #panel-home, .dv2 #panel-moderate { max-width: none; }
.dv2 .dpanel > .card { padding: 22px; }
@media (max-width: 380px) { .dv2 .dpanel > .card { padding: 18px 14px; } }
.dv2 .dpanel > .lost-alert, .dv2 .dpanel > .pf-notice, .dv2 #dash-top { margin-bottom: 0; } /* the grid gap replaces the old margins */

/* one card-header rhythm: title block left, tag right; lead text one line */
.dv2 .dv2-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px 12px; flex-wrap: wrap; margin-bottom: 6px; }
.dv2 .dv2-head > div { min-width: 0; }
.dv2 .dv2-head .kicker { margin-bottom: 4px; }
.dv2 .dv2-head .h2--sm { margin: 0; font-size: 1.25rem; }
.dv2 .dv2-head .tag { margin-top: 4px; }
.dv2 .card > .kicker { margin-bottom: 6px; }
.dv2 .progress-card__pct { font-size: 1.6rem; }
.dv2 .dv2-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.dv2 .dv2-foot { margin: 0; padding: 0 6px; }
/* 44px targets for every small control inside the panels */
.dv2 .btn--sm { min-height: 44px; }
.dv2 .role-tools .link-btn, .dv2 .fcard__link, .dv2 .subnav__link { min-height: 44px; display: inline-flex; align-items: center; }
/* a long label wraps inside its pill: the site's .btn never wraps, so "Apply to found <city> (checks your location)" widened its
   card past a 390px screen (the flag-off page has the same overflow; it is left as it is, this rule only reaches the panels) */
.dv2 .dpanel .btn { white-space: normal; text-align: center; max-width: 100%; padding-top: 8px; padding-bottom: 8px; }
/* the older cards' controls too (15 to 38px tall on the flag-off page, which keeps them): segmented pills, chips, text buttons,
   the swap flip, inputs and the contract disclosure all reach 44px inside the panels */
.dv2 .seg button, .dv2 .chips button { min-height: 44px; }
.dv2 .seg { padding: 2px; }
.dv2 .link-btn { min-height: 44px; min-width: 44px; display: inline-flex; align-items: center; justify-content: center; }
.dv2 .link-btn--tiny { min-height: 0; min-width: 0; padding: 15px 10px; margin: -15px -10px; } /* the hit area grows; the pass's meta row keeps its height */
.dv2 .swapbox__flip, .dv2 .post__vote button { width: 44px; height: 44px; }
.dv2 .swapbox__amt, .dv2 .field, .dv2 .req-form input { min-height: 44px; }
.dv2 .coin-launch summary { padding: 10px 0; }
/* the coin studio's six colour swatches: the label is the control (its radio is hidden) and measured 34 x 34px, the one target left under
   44px in the panels; the label grows to 44px around the same 34px circle, and the row's gap goes, so the circles sit 10px apart as before */
.dv2 .swatches { gap: 0; }
.dv2 .swatches label { display: grid; place-items: center; min-width: 44px; min-height: 44px; }

/* Today: two to four next-step cards; a grid on desktop, one swipeable row on phones */
.dv2 .today { display: grid; gap: 8px; }
.dv2 .today__kicker { margin: 0; }
.dv2 .today__list { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; }
.dv2 .today__card { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto; column-gap: 10px; align-items: center; min-height: 64px; padding: 12px 14px 12px 16px; border-radius: 16px; border: 1px solid var(--line); background: var(--card); color: var(--text); text-decoration: none; overflow: hidden; }
.dv2 .today__card::before { content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 3px; border-radius: 2px; background: var(--pin); } /* the next step's edge is the accent, like its arrow */
.dv2 .today__card:hover { border-color: var(--line-2); background: var(--card-2); }
.dv2 .today__sub { grid-column: 1; font-size: .82rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dv2 .today__go { grid-column: 2; grid-row: 1 / 3; color: var(--pin-2); font-weight: 700; }

/* stat tiles (Rankings): a big number, a small uppercase label, one line under it */
.dv2 .tiles { display: grid; gap: 10px; margin-top: 8px; }
.dv2 .tiles--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 760px) { .dv2 .tiles--3 { grid-template-columns: minmax(0, 1fr); } }
.dv2 .tile { display: grid; gap: 2px; min-width: 0; padding: 14px 16px; border-radius: 18px; border: 1px solid var(--line); background: var(--card); }
.dv2 .tile__label { font: 600 .74rem var(--body); text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.dv2 .tile__num { font: 650 1.6rem/1.15 var(--display); letter-spacing: -.02em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dv2 .tile__sub { font-size: .82rem; color: var(--muted); }
.dv2 .tile__note { font-size: .78rem; color: var(--text-2); }
.dv2 .tile.is-empty .tile__num { color: var(--muted); }

/* the City header: a bigger disc, the status tag, the facts as tiles */
.dv2 .city-head .community-card__head { gap: 16px; flex-wrap: wrap; }
.dv2 .city-head .community-card__head > div:not(.coin-disc) { flex: 1 1 120px; min-width: 0; }
.dv2 .city-head .community-card__head .coin-disc span { font-size: 1rem; }
.dv2 .city-head .kv { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 8px; margin: 12px 0; }
.dv2 .city-head .kv div { flex-direction: column; align-items: flex-start; gap: 2px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 14px; background: var(--card); }
.dv2 .city-head .kv dt { font: 600 .72rem var(--body); text-transform: uppercase; letter-spacing: .08em; }
.dv2 .city-head .kv dd { text-align: left; font: 650 1.15rem/1.2 var(--display); overflow-wrap: anywhere; }
.dv2 .subnav { display: flex; flex-wrap: wrap; gap: 6px; }
.dv2 .subnav__link { padding: 0 14px; border-radius: 999px; border: 1px solid var(--line-2); color: var(--muted); text-decoration: none; font: 600 .84rem var(--body); }
.dv2 .subnav__link:hover, .dv2 .subnav__link:focus-visible { color: var(--text); background: var(--card-2); }
.dv2 .kv dd .tiny { margin-top: 0; }

/* Founder Status: the state pill, the current step, the informational rank line */
.dv2 .fs-state { display: inline-block; margin-top: 6px; }
.dv2 .psteps li.is-now > span:nth-child(2) { color: var(--text); font-weight: 600; }
.dv2 .psteps li.is-now > .req__dot { border-color: var(--pin); box-shadow: 0 0 0 3px rgba(var(--accent-rgb),.18); }
.dv2 .fs-rank { margin: 4px 0 12px; padding: 10px 12px; border-radius: 10px; border-left: 3px solid var(--pin); background: rgba(var(--accent-rgb),.08); font-size: .9rem; }
.dv2 .fs-rank__note { display: block; margin-top: 4px; font-size: .78rem; color: var(--muted); }
.dv2 #progress.is-done .bar span { background: linear-gradient(90deg, var(--moss), var(--ok-text)); }
.dv2 #progress.is-done .progress-card__pct { color: var(--ok-text); }

/* the Founder card: a premium pass, the member pass's navy and teal light in both themes, with its state's colour at the top-left corner.
   The glows are kept light enough for the white and gold text to stay above 4.5:1 at the corners (the base gradient alone is above 7:1). */
.dv2 .card.fcard { position: relative; overflow: hidden; isolation: isolate; color: #fff; display: grid; gap: 12px; padding: 22px 24px; border-radius: 26px; border: 1px solid var(--pass-line); /* .card.fcard outranks the light theme's .card background */
  background: radial-gradient(70% 90% at 0% 0%, rgba(var(--pass-gold-rgb),.32), transparent 60%), radial-gradient(80% 100% at 100% 100%, var(--pass-glow-1), transparent 60%), linear-gradient(135deg, var(--pass-a), var(--pass-b));
  box-shadow: 0 34px 80px -34px rgba(var(--pass-gold-rgb),.45), inset 0 1px 0 rgba(255,255,255,.22); }
.dv2 .fcard::before { display: none; } /* the dashboard card's gradient edge: this card has its own border */
.dv2 .fcard::after { content: ""; position: absolute; inset: 0; z-index: -1; opacity: .2; pointer-events: none; background: repeating-linear-gradient(115deg, rgba(255,255,255,.06) 0 1px, transparent 1px 14px); }
.dv2 .fcard[data-state="steward"] { background: radial-gradient(70% 90% at 0% 0%, rgba(var(--pass-ok-rgb),.4), transparent 60%), radial-gradient(80% 100% at 100% 100%, var(--pass-glow-1), transparent 60%), linear-gradient(135deg, var(--pass-a), var(--pass-b)); box-shadow: 0 34px 80px -34px rgba(var(--pass-ok-rgb),.45), inset 0 1px 0 rgba(255,255,255,.22); }
.dv2 .fcard[data-state="provisional"] { background: radial-gradient(70% 90% at 0% 0%, rgba(var(--pass-blue-rgb),.5), transparent 60%), radial-gradient(80% 100% at 100% 100%, var(--pass-glow-1), transparent 60%), linear-gradient(135deg, var(--pass-a), var(--pass-b)); box-shadow: 0 34px 80px -34px rgba(var(--pass-blue-rgb),.5), inset 0 1px 0 rgba(255,255,255,.22); }
.dv2 .fcard[data-state="grace"] { background: radial-gradient(70% 90% at 0% 0%, rgba(var(--pass-bad-rgb),.4), transparent 60%), radial-gradient(80% 100% at 100% 100%, var(--pass-glow-1), transparent 60%), linear-gradient(135deg, var(--pass-a), var(--pass-b)); box-shadow: 0 34px 80px -34px rgba(var(--pass-bad-rgb),.5), inset 0 1px 0 rgba(255,255,255,.22); }
/* a still gloss band, not the pass's moving one: everything after the profiles block is pinned to "nothing moves by itself" (test/profiles-ui.test.js) */
.dv2 .fcard__shine { position: absolute; inset: -60% -30%; z-index: -1; pointer-events: none; background: linear-gradient(110deg, transparent 42%, rgba(255,255,255,.14) 50%, transparent 58%); transform: translateX(-18%); }
.dv2 .fcard__top { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.dv2 .fcard__kicker { font: 700 .78rem var(--display); letter-spacing: .2em; text-transform: uppercase; color: #FFDC8A; } /* the card is navy in both themes: the dark theme's gold text, literal */
.dv2 .fcard .tag { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.3); color: #fff; }
.dv2 .fcard .tag--ok { background: rgba(var(--pass-ok-rgb),.22); border-color: rgba(var(--pass-ok-rgb),.6); color: #7CE8A6; }
.dv2 .fcard .tag--gold { background: rgba(var(--pass-gold-rgb),.12); border-color: rgba(var(--pass-gold-rgb),.55); color: #FFDC8A; }
.dv2 .fcard .tag--warn { background: rgba(255,210,122,.16); border-color: rgba(255,210,122,.5); color: #FFD27A; }
.dv2 .fcard .tag--no { background: rgba(var(--pass-bad-rgb),.2); border-color: rgba(var(--pass-bad-rgb),.55); color: #FF9A86; }
.dv2 .fcard__title { margin: 0; max-width: none; font: 700 clamp(1.4rem, 3vw, 1.9rem)/1.1 var(--display); letter-spacing: -.02em; overflow-wrap: anywhere; }
.dv2 .fcard__who { margin: 0; font-size: .95rem; color: rgba(255,255,255,.85); overflow-wrap: anywhere; }
.dv2 .fcard__who .mono { color: #fff; }
.dv2 .fcard__pick { color: #FFDC8A; }
.dv2 .fcard__facts { margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 8px 16px; }
.dv2 .fcard__facts div { display: grid; gap: 2px; }
.dv2 .fcard__facts dt { font: 600 .72rem var(--body); text-transform: uppercase; letter-spacing: .08em; color: rgba(255,255,255,.78); }
.dv2 .fcard__facts dd { margin: 0; font: 650 1rem var(--display); }
.dv2 .fcard__note { margin: 0; font-size: .9rem; color: rgba(255,255,255,.88); }
.dv2 .fcard__note:empty { display: none; }
.dv2 .fcard__actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.dv2 .fcard .btn--glass { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.3); color: #fff; }
.dv2 .fcard .btn--glass:hover { background: rgba(255,255,255,.2); border-color: rgba(255,255,255,.45); }
.dv2 .fcard__link { color: rgba(255,255,255,.85); }
.dv2 .fcard__link:hover { color: #fff; }
@media (max-width: 560px) { .dv2 .card.fcard { padding: 18px; } }

/* the coin studio as one clean card with three labelled steps; Moderate and Profile blocks */
.dv2 .studio-card #coin-studio { margin-top: 4px; padding-top: 0; border-top: 0; }
.dv2 .studio-card #coin-studio > .kicker { display: none; } /* the card has its own head */
.dv2 .studio-step { margin: 18px 0 8px; font: 700 .74rem var(--display); letter-spacing: .12em; text-transform: uppercase; color: var(--text-2); } /* text-2, not pin-2: the accent alone misses 4.5:1 at this size in light mode */
.dv2 .studio-step::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--pin); margin-right: 8px; vertical-align: middle; }
.dv2 #studio-step-1 { margin-top: 4px; }
.dv2 .studio-step + .fieldset__label { margin-top: 0; }
.dv2 #coin-admin-card .coin-admin { margin-top: 0; padding-top: 0; border-top: 0; }
.dv2 .modal--panel { display: contents; }
.dv2 .modal--panel .modal__box { width: 100%; min-width: 0; max-width: 640px; max-height: none; overflow: visible; margin: 0 auto; padding: 22px; } /* min-width: 0 — its DOM parent is the display: contents wrapper, not the grid */
/* a text input's intrinsic width would otherwise widen these grids past a 320px screen (the old modal hid that behind overflow: auto) */
.dv2 .modal--panel .modal__box, .dv2 .modal--panel .profile__sec { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 380px) { .dv2 .modal--panel .modal__box { padding: 18px 14px; } }
.dv2 #roles { padding: 0; background: none; border: 0; }
.dv2 #roles > .wrap { padding: 0; max-width: none; }
.dv2 #roles .section-head { margin-bottom: 14px; }
.dv2 #roles .section-head h2 { font-size: 1.35rem; max-width: none; }
.dv2 #roles .section-head p.muted { font-size: .95rem; }

/* loading placeholders (shown only to someone whose last visit was v2), and the deep-link highlight */
.dv2-skel .wrap { display: grid; gap: 14px; }
.dv2-skel .skel { border-radius: 18px; background: linear-gradient(90deg, var(--card) 0%, var(--card-2) 50%, var(--card) 100%); } /* still placeholders: no shimmer, see the note above the Founder card gloss */
.dv2-skel .skel--tabs { height: 60px; border-radius: 999px; }
.dv2-skel .skel-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 14px; }
@media (max-width: 1100px) { .dv2-skel .skel-top { grid-template-columns: minmax(0, 1fr); } }
.dv2-skel .skel--pass { min-height: 196px; border-radius: 26px; }
.dv2-skel .skel-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.dv2-skel .skel--tile { height: 92px; }
.dv2-skel .skel--card { height: 180px; border-radius: 24px; }
.dv2 .is-target { outline: 3px solid var(--pin-2); outline-offset: 4px; border-radius: 12px; }

/* hover transitions only for people who have not asked for less motion (keep this the last rule: nothing may follow it) */
@media (prefers-reduced-motion: no-preference) {
  .dv2 .dtab, .dv2 .subnav__link { transition: color .2s, background .2s; }
}