/* Vicinity — the mobile-first polish of 9 Oct 2026. Loaded after style.css on every page (scripts/pages/build.mjs); nothing here
   needs a change in style.css, so the branches built at the same time (onboarding, the in-app swap, the feedback button) merge cleanly.
   What it does, in order: a bottom-bar variable for anything fixed in a corner; 44 px targets and 12 px text everywhere; tighter
   sections on phones; the footer's touch targets; the home page (one hero, the New York map first, tabs instead of card walls); the token
   page (one buy slot, a tighter card, compact proofs); cities, launchpad, coin, rules and terms. Both themes; motion only under
   prefers-reduced-motion: no-preference, like style.css. */

/* ---------- the bars at the bottom of a phone, published for anything that floats in a corner (the feedback button) ---------- */
:root { --tabbar-h: 64px; --bottom-bars: 0px; }
@media (max-width: 900px) {
  body { --bottom-bars: calc(var(--tabbar-h) + env(safe-area-inset-bottom)); padding-bottom: calc(var(--bottom-bars) + 8px); }
  body.has-coin-buybar { --bottom-bars: calc(var(--tabbar-h) + 64px + env(safe-area-inset-bottom)); }
  /* a control reached with Tab (or a link to an anchor) stops above the tab bar, never under it (WCAG 2.4.11 Focus Not Obscured) */
  html { scroll-padding-bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom) + 12px); }
  html:has(body.has-coin-buybar) { scroll-padding-bottom: calc(var(--tabbar-h) + 64px + env(safe-area-inset-bottom) + 12px); }
  /* the tab bar is exactly --tabbar-h tall (plus the safe area), whatever its labels' line height; each tab is a 44 px+ target */
  .tabbar { height: calc(var(--tabbar-h) + env(safe-area-inset-bottom)); padding: 0 4px env(safe-area-inset-bottom); align-items: stretch; }
  .tabbar a { font-size: .75rem; line-height: 1.25; gap: 3px; padding: 6px 2px 5px; min-height: 44px; justify-content: center; border-radius: 0; }
}

/* ---------- 44 px targets, 12 px text (header, footer, the small controls every page shares) ---------- */
.brand { min-height: 44px; min-width: 44px; padding: 0 4px; margin-left: -4px; border-radius: 10px; } /* a 44 px target: the logo and the wordmark, at every width */
.theme-toggle { width: 44px; height: 44px; }
.account-btn.btn--sm { min-height: 44px; }
.btn--sm { min-height: 44px; }
/* in the floating header under a mouse, the controls are 40 px (a finger keeps 44 px everywhere) */
@media (hover: hover) and (pointer: fine) { .site-header .btn--sm { min-height: 40px; } .site-header .theme-toggle { width: 40px; height: 40px; } }
.link-btn { min-height: 44px; display: inline-flex; align-items: center; }
p > .link-btn, .tiny .link-btn, .holders__meta .link-btn { min-height: 44px; padding: 10px 0; }
.faq summary { min-height: 44px; align-items: center; padding: 2px 0; }
.faq details { padding: 8px 0; }
.faq details p { margin-top: 6px; }
.tag { font-size: .75rem; }
.tiny { font-size: .8rem; }
input, select, textarea { min-height: 44px; }
/* a phone never zooms the page in when a field takes the keyboard (iOS zooms into text under 16 px) */
@media (max-width: 600px) { input, select, textarea, .tp-form input, .reply-form input, .snap-lookup input, .reason-form select, .reason-form input, .apply-form textarea { font-size: 16px; } }
.find-box input, .composer textarea, .swapbox__amt, .su-check input { min-height: 0; }
.find-box input { min-height: 44px; } /* "Find a wallet": a 44 px field (the box was already that tall around it) */
.checker, .snap-lookup { padding: 8px; }
.checker .btn, .snap-lookup .btn { min-height: 44px; font-size: .9rem; }
.find-box .find-box__go { border-radius: 999px; } /* the token page's two search buttons: the same pill, the same 44 px, the same .9rem */

/* ---------- signed in: one avatar, top right, and the account sheet it opens (owner, 17 Oct 2026: "keep a single avatar in the top-right
   that opens Profile, Account and Settings; show the username inside that screen") ----------
   The avatar (site.js accountSheet) is the member's initial in a warm disc, a 44 px target, and nothing else: the unread count is on the
   dashboard's Notifications tab only (one count on the screen, where it leads). A browser that has shown a member here holds back
   "Log in" and keeps the avatar's room (unseen, never a Tab stop) before the first answer (theme.js data-guest), so the header never
   flashes a Log in it then takes back and nothing in it moves when the avatar shows. Only once theme.js has run (data-theme): without
   JavaScript nobody answers, and Log in stays; and theme.js shows Log in itself when site.js did not load or threw, or never answers. The !important beats style.css's [hidden] { display: none !important } (the same pattern
   as its .dash-out.is-pending). */
.hdr-avatar { position: relative; flex: none; display: inline-grid; place-items: center; width: 44px; height: 44px; padding: 0; margin: 0 -2px 0 0; border: 0; border-radius: 50%; background: none; color: var(--text); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.hdr-avatar[hidden] { display: none; }
:root[data-theme]:not([data-guest]) .hdr-avatar[hidden]:not(.is-off) { display: inline-grid !important; visibility: hidden; }
:root[data-theme]:not([data-guest]) [data-account]:not(.is-shown) { display: none; }
.hdr-avatar__face, .acct__av { display: grid; place-items: center; border-radius: 50%; color: var(--text); font-family: var(--display); font-weight: 700;
  background: linear-gradient(145deg, rgba(var(--accent-rgb),.30), rgba(var(--gold-rgb),.16)); box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb),.5), inset 0 1px 0 rgba(255,255,255,.12); } /* one rule, both themes: the triplets change with the theme */
.hdr-avatar__face { width: 34px; height: 34px; font-size: .92rem; line-height: 1; }
.hdr-avatar:hover .hdr-avatar__face, .hdr-avatar[aria-expanded="true"] .hdr-avatar__face { box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb),.5), 0 0 0 3px var(--accent-soft); }
.hdr-avatar:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 0; }
/* a phone's dashboard on its Profile tab (dashboard-v2.js; Profile has no tab in a phone's strip): the avatar wears the chosen tab's
   teal ring, so the screen still says where you are */
@media (max-width: 600px) {
  .hdr-avatar.is-current .hdr-avatar__face { box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb),.5), 0 0 0 2px var(--bg-2), 0 0 0 4px var(--pin); }
}

/* the sheet: a phone's bottom sheet over a dimmed page (a grab handle, swipe it down to close); from 601 px a small popover under the
   avatar, lined up with the header's right edge. One opaque layer, 44 px+ rows; the same query as site.js SHEET_MQ */
.acct { position: fixed; inset: 0; z-index: 85; }
.acct[hidden] { display: none; }
/* a modal sheet holds the page behind it still: a finger dragging on the dimmed page scrolls nothing (touch-action), and on a phone the
   page itself does not scroll while the sheet is open (site.js sets html.acct-open from opening until the sheet has gone) */
.acct__scrim { position: absolute; inset: 0; background: var(--scrim); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); touch-action: none; }
@media (max-width: 600px) { html.acct-open { overflow: hidden; } }
.acct__panel { position: absolute; left: 0; right: 0; bottom: 0; max-height: min(86vh, 640px); overflow-y: auto; overscroll-behavior: contain;
  padding: 8px 16px calc(14px + env(safe-area-inset-bottom)); border-radius: 22px 22px 0 0; background: var(--bg-2);
  box-shadow: inset 0 1px 0 var(--glass-border), 0 -24px 60px -24px rgba(2,8,20,.75); }
.acct__panel:focus { outline: none; } /* (it takes a click inside it, never a Tab stop) */
:root[data-theme="light"] .acct__panel { box-shadow: inset 0 1px 0 var(--line), 0 -20px 50px -24px rgba(12,35,68,.3); }
.acct__grab { display: block; width: 40px; height: 5px; margin: 0 auto 8px; border-radius: 3px; background: var(--line-2); }
.acct__grab, .acct__who { touch-action: none; } /* the sheet's top takes a finger dragging it down (site.js); the whole sheet does when it has nothing to scroll */
.acct__who { display: flex; align-items: center; gap: 12px; padding: 4px 0 14px; border-bottom: 1px solid var(--line); }
.acct__av { flex: none; width: 48px; height: 48px; font-size: 1.15rem; line-height: 1; }
.acct__id { flex: 1 1 auto; min-width: 0; }
.acct__name { margin: 0; font: 650 1.08rem/1.3 var(--display); color: var(--text); overflow-wrap: anywhere; }
.acct__home { display: flex; align-items: center; gap: 5px; margin: 2px 0 0; font-size: .875rem; line-height: 1.4; color: var(--muted); }
.acct__home svg { flex: none; width: 14px; height: 14px; }
.acct__x { flex: none; display: grid; place-items: center; width: 44px; height: 44px; margin-right: -8px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--text-2); cursor: pointer; }
.acct__x:hover { background: var(--card-2); color: var(--text); }
.acct__links { list-style: none; margin: 8px 0; padding: 0; display: grid; gap: 2px; }
.acct__link { display: flex; align-items: center; gap: 12px; min-height: 56px; margin: 0 -8px; padding: 8px; border-radius: 14px; color: var(--text); text-decoration: none; }
.acct__link:hover, .acct__link[aria-current="true"] { background: var(--card-2); } /* (aria-current: the dashboard's Profile tab is open, dashboard-v2.js) */
.acct__link:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: -2px; }
.acct__ico { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; background: var(--card-2); color: var(--text-2); }
.acct__ico svg { width: 20px; height: 20px; }
.acct__text { flex: 1 1 auto; min-width: 0; display: grid; gap: 1px; }
.acct__text strong { font: 600 .95rem/1.3 var(--body); }
.acct__text span { font-size: .8rem; line-height: 1.35; color: var(--muted); }
.acct__chev { flex: none; display: grid; color: var(--faint); }
.acct__chev svg { width: 18px; height: 18px; }
.acct__out { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 48px; margin: 4px 0 0; padding: 0 16px; border: 0; border-radius: 14px;
  background: var(--card); box-shadow: inset 0 0 0 1px var(--line-2); color: var(--text); font: 600 .95rem/1 var(--body); cursor: pointer; }
.acct__out:hover { background: var(--card-2); }
.acct__out svg { width: 18px; height: 18px; color: var(--text-2); }
.acct__out:disabled { opacity: .6; cursor: default; }
@media (min-width: 601px) {
  .acct__scrim { background: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .acct__panel { left: auto; bottom: auto; top: calc(var(--header-h) + 8px); right: max(var(--gutter), calc((100% - 1152px) / 2)); width: 360px; max-height: calc(100vh - var(--header-h) - 24px);
    padding: 12px 16px 16px; border-radius: 18px; transform-origin: top right; box-shadow: inset 0 0 0 1px var(--line-2), var(--e3); }
  .acct__grab { display: none; }
}
@media (min-width: 601px) and (max-width: 900px) { .acct__panel { right: 8px; } }

/* ---------- the rhythm: every page (style.css: sections --section-y apart, cards --card-pad and --r-card, kickers --fs-kicker) ---------- */
.section-head { margin-bottom: 28px; }
@media (pointer: coarse) { .nav a { height: 44px; } }
@media (max-width: 600px) {
  .section--tight { padding: 22px 0 32px; }
  .section-head { margin-bottom: 14px; }
  .kicker { margin-bottom: 6px; }
  h2 { margin-bottom: .35em; }
  .section-head p.muted { font-size: .95rem; margin-bottom: .6em; }
  h2, .h2--sm { font-size: var(--fs-xl); max-width: none; } /* one title size on a phone (three before: 20.8, 21.6 and 27.3 px) */
  .page-hero { padding: 28px 0 20px; }
  .page-title { margin: 4px 0 10px; }
  .lead { font-size: 1rem; }
  .ticks { gap: 8px; }
  .ticks li { font-size: .95rem; }
}

/* ---------- the footer (style.css: one calm line): every link, social icon and the phone's theme switch is a 44 px target ---------- */
.site-footer__links a, .social-link { min-height: 44px; }
.site-footer__theme { width: 44px; height: 44px; }

/* =====================================================================
   Home: one hero (copy, one button, three facts that fit a phone), the New York map first on a phone, then the problem in three lines,
   one tabbed block for everything $VICINITY gets you, five steps, the roadmap (a vertical rail on a phone, a row from 900 px), a tabbed FAQ.
   ===================================================================== */
.hero { padding: 44px 0 40px; }
.hero__grid { gap: 36px; }
.hero__grid > * { min-width: 0; } /* nothing in a column widens it */
.hero__title { margin: 14px 0 16px; }
.hero__cta { margin: 20px 0 22px; }
.hero__cta--one .btn { min-width: 220px; }
/* the trust line: one muted sentence, not three pills */
.hero__trust { display: block; margin: -10px 0 22px; font-size: .86rem; color: var(--muted); }
.hero__trust li { display: inline; padding: 0; border: 0; background: none; font-weight: 500; color: var(--muted); }
.hero__trust li::before { content: none; }
.hero__trust li + li::before { content: " · "; color: var(--faint); margin: 0 2px; }
/* the facts: tiles, the same on a phone and a computer (d3, 11 Oct 2026). Strong facts only: communities, countries, official boundaries;
   a computer adds the Launchpad as a link tile (the page is open, city coins come next: never "Live", no live dot). home.js puts a
   members tile in place of the countries only at 100 or more. One row at every width, every label two lines at most. */
.hero__facts { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 1.3fr); gap: var(--sp-2); margin: 0; padding: 0; }
.hero__facts > li { display: flex; flex-direction: column; gap: 3px; min-width: 0; padding: var(--sp-3); border-radius: var(--r-chip); background: var(--surface-1); border: 1px solid var(--line); box-shadow: var(--shadow-1); }
.hero__facts strong { font: 650 var(--fs-lg)/1.1 var(--display); letter-spacing: -.02em; color: var(--text); font-variant-numeric: tabular-nums; white-space: nowrap; }
.hero__facts > li > span, .hero__fact-link > span { font-size: var(--fs-xs); line-height: 1.25; color: var(--muted); }
.hero__facts > li.hero__fact--launch { padding: 0; }
.hero__fact-link { display: flex; flex-direction: column; gap: 3px; min-width: 0; min-height: 100%; padding: var(--sp-3); border-radius: inherit; color: inherit; text-decoration: none; }
.hero__fact--launch strong { display: flex; align-items: center; gap: var(--sp-2); min-height: 1.1em; font-size: var(--fs-md); letter-spacing: -.01em; }
.hero__fact--launch .ico { width: 24px; height: 24px; margin: -2px 0; } .hero__fact--launch .ico svg { width: 15px; height: 15px; }
.hero__fact--launch:hover { border-color: var(--line-2); }
.hero__fact-link:hover strong { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.hero__fact-link:focus-visible { outline-offset: 2px; }
.hero-map .map-open { display: none; } /* the map itself is the link (aria-label); the one "Open on the live map" is in the walkthrough */
@media (min-width: 961px) { .hero__title { font-size: clamp(3rem, 7vw, 5.5rem); } .hero__grid { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); } } /* "One community." on one line at 1280 (it broke after "One") */
@media (max-width: 960px) {
  .hero { padding: 16px 0 22px; }
  .hero-map { display: none; } /* the same city, bigger and stepped through, starts right under the hero on a phone */
  .hero__grid { gap: 0; }
  .eyebrow { font-size: .84rem; }
  .hero__title { font-size: clamp(2.1rem, 9.6vw, 3.2rem); margin: 10px 0 12px; }
  .hero__title br:first-of-type { display: none; } /* "One city. One coin." on one line */
  .hero__cta { margin: 14px 0 16px; }
  .hero__trust { margin: -6px 0 16px; }
}
@media (max-width: 600px) {
  .hero__cta--one .btn { flex: 1 1 auto; }
  .lead__tail { display: none; } /* "...the key to all of them." on a phone: the tabs below say what it gets you */
  /* three tiles in one row, all on screen: communities, countries, official boundaries (the Launchpad tile is a computer's) */
  .hero__facts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hero__facts > li.hero__fact--launch, .hero__facts .fact__wide { display: none; }
  .hero__facts strong { font-size: clamp(1.125rem, .8rem + 2.2vw, 1.375rem); }
}
@media (max-width: 360px) { .hero__facts { gap: 6px; } .hero__facts > li { padding: 10px; } } /* "communities" fits a 320 px phone's tile */
@media (max-width: 360px) { .eyebrow__tail { display: none; } } /* "Map live" alone: the headline says the rest */
/* a phone's hero: the faint outline of New York City's real boundary behind the copy (home.js; decoration only, hidden on a computer
   where the map itself shows) */
.hero__outline { display: none; }
@media (max-width: 960px) {
  .hero__outline { display: block; position: absolute; top: 18px; right: -18%; width: 78%; height: auto; max-width: 420px; opacity: .14; pointer-events: none; }
  .hero__outline path { fill: rgba(var(--accent-rgb),.10); stroke: var(--pin-2); stroke-width: 1.4; vector-effect: non-scaling-stroke; }
  :root[data-theme="light"] .hero__outline { opacity: .12; }
}

/* the New York walkthrough: the map, one step caption with its three controls, the member chips */
#nyc .section-head p.muted { margin-bottom: 0; }
/* a computer: the right column is as tall as the map; the controls and "Inside $NYC" sit at its foot, so the steps open into the space
   above them and nothing under the steps moves while the walkthrough plays */
@media (min-width: 961px) {
  .nyc { align-items: stretch; }
  .nyc__map { align-self: start; }
  .nyc__steps { display: flex; flex-direction: column; min-width: 0; }
  .nyc__steps .steps { gap: 6px; margin-bottom: 12px; }
  .steps button { padding: 11px 14px; align-items: flex-start; }
  .steps strong { line-height: 1.35; padding-top: 2px; }
  .steps__n { width: 28px; height: 28px; }
  .nyc__ctrl { margin-top: auto; }
  .nyc__facts { margin-bottom: 0; }
}
/* a wide computer: the whole story at once. Every step's text shows (the current one marked), so nothing changes height while it plays;
   the controls sit level with the map's foot, and "Inside $NYC" runs as one band under both columns */
@media (min-width: 1200px) {
  .nyc { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); grid-template-rows: auto 1fr auto; grid-template-areas: "map steps" "map ctrl" "facts facts"; gap: 0 32px; }
  .nyc__steps { display: contents; }
  .nyc__map { grid-area: map; }
  .nyc__steps .steps { grid-area: steps; margin: 0; gap: 8px; }
  .nyc__steps .nyc__ctrl { grid-area: ctrl; align-self: end; margin: 14px 0 0; }
  .nyc__steps .nyc__facts { grid-area: facts; margin-top: 18px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; padding: 12px 18px; }
  .nyc__facts .kicker { margin: 0; }
  .steps button { padding: 12px 16px; }
  .steps em, .steps button[aria-current="step"] em { max-height: none; margin-top: 4px; line-height: 1.5; }
  .steps button:not([aria-current="step"]) em { color: var(--muted); }
}
.nyc__ctrl { gap: 8px; margin-bottom: 12px; align-items: center; }
.kicker__short { display: none; }
@media (max-width: 360px) { .kicker__long { display: none; } .kicker__short { display: inline; } } /* "New York City · real data" on one line */
#nyc-map { cursor: pointer; }
@media (max-width: 960px) { .nyc__ctrl .btn--sm { padding: 0 10px; } }
.nyc__ctrl .btn--sm { min-height: 44px; min-width: 44px; }
.nyc__facts { padding: 14px 16px; }
.nyc__facts .kicker { margin-bottom: 8px; }
.member-cloud { max-height: none; overflow: visible; }
.member-cloud li { font-size: .78rem; min-height: 28px; display: inline-flex; align-items: center; }
.member-cloud li.is-more { display: none; }
.member-cloud.is-open li.is-more { display: inline-flex; }
.member-cloud__more { font: 600 .78rem var(--body); color: var(--pin-2); background: none; border: 1px dashed rgba(var(--accent-2-rgb),.5); border-radius: 999px; padding: 3px 10px; min-height: 28px; cursor: pointer; position: relative; }
.member-cloud__more::after { content: ""; position: absolute; inset: -8px 0; } /* a 44 px hit area in a 28 px chip */
.member-cloud__more:hover { border-style: solid; }
.member-cloud li:has(> .member-cloud__more) { padding: 0; border: 0; background: none; }
@media (max-width: 960px) {
  /* the kicker and the title stay above the map (a reader meets the title first); the hint under them goes: Previous · Pause · Next say it */
  #nyc .section-head { margin-bottom: 10px; }
  #nyc .section-head p.muted { display: none; }
  #nyc .section-head .kicker { margin-bottom: 6px; }
  #nyc { padding-top: 22px; }
  /* one card (the review of 12 Oct 2026): the map; under it where the story is (four segments) and Previous · Pause · Next; then the step
     playing now, right under the drawing (a short phone sees its title and first lines with the map); then the map key. The step takes
     its own height (step 1 sat over a 150-230 px empty band when every step took step 4's), and the controls above it never move while it
     plays. The map's box, the steps' list and the controls' row give their parts to this one grid (display: contents) */
  .nyc { position: relative; grid-template-columns: 4px 44px minmax(0, 1fr) 44px 4px; gap: 0 8px; }
  .nyc__map, .nyc__steps, .nyc__ctrl { display: contents; }
  #nyc-map { grid-column: 1 / -1; grid-row: 1; border: 1px solid var(--line); border-bottom: 0; border-radius: var(--r-hero) var(--r-hero) 0 0; background: var(--map-water); }
  .steps { grid-column: 1 / -1; grid-row: 2; display: grid; gap: 0; margin: 0; padding: 70px 0 0; border: 1px solid var(--line); border-block: 0; background: var(--card); }
  .steps li { grid-area: 1 / 1; display: grid; }
  .steps li:not(:has(> [aria-current="step"])) { display: none; }
  .steps button:not([aria-current="step"]) { visibility: hidden; }
  .steps button, .steps button[aria-current="step"] { padding: 0 16px 16px; border: 0; border-radius: 0; background: none; }
  .steps em, .steps button[aria-current="step"] em { max-height: none; margin-top: 4px; }
  #nyc-prev, #nyc-play, #nyc-next { grid-row: 2; align-self: start; margin-top: 14px; }
  #nyc-prev { grid-column: 2; } #nyc-play { grid-column: 3; } #nyc-next { grid-column: 4; }
  .nyc__foot { grid-column: 1 / -1; grid-row: 3; border: 1px solid var(--line); border-radius: 0 0 var(--r-hero) var(--r-hero); }
  .nyc__ctrl .nyc__explore { grid-column: 1 / -1; grid-row: 4; margin-top: 12px; }
  .nyc__facts { grid-column: 1 / -1; grid-row: 5; margin: 12px 0 0; }
  /* where the story is: four segments along the card's top edge, right under the map, filled up to the step showing (still; the card's own state) */
  .steps { position: relative; }
  .steps::after { content: ""; position: absolute; left: 14px; right: 14px; top: 0; height: 3px; pointer-events: none;
    background: linear-gradient(var(--pin), var(--pin)) 0 0 / var(--steps-done, 25%) 100% no-repeat, var(--line-2);
    -webkit-mask: repeating-linear-gradient(90deg, #000 0 calc(25% - 4px), transparent calc(25% - 4px) 25%); mask: repeating-linear-gradient(90deg, #000 0 calc(25% - 4px), transparent calc(25% - 4px) 25%); }
  .nyc[data-step="2"] .steps { --steps-done: 50%; } .nyc[data-step="3"] .steps { --steps-done: 75%; } .nyc[data-step="4"] .steps { --steps-done: 100%; }
  .steps strong { font-size: 1rem; }
  .steps em { font-size: .9rem; }
  /* a tablet: the story at a phone's width, in the middle (a 720 px map was a huge, mostly empty panel) */
  #nyc .wrap { max-width: 648px; }
}

/* one section-title size on the home page (d3): --fs-xl everywhere (36 px on a computer, 22-24 px on a phone); no 48 px exceptions, no
   22-character cap ("How one city becomes one coin." on one line on a computer) */
[data-page="home"] .section-head h2 { font-size: var(--fs-xl); max-width: none; }
/* body copy that ends on a lone word reads as a mistake: the hero's lead and the fact tiles' lines wrap "pretty" (no orphan) */
.hero .lead, .hero__facts > li > span, .hero__fact-link > span { text-wrap: pretty; } /* (not the spans inside them: a .nowrap one keeps "come next →" together) */

/* the problem: three lines and a bridge */
.problems { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.problems li { display: flex; gap: 12px; align-items: baseline; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 1rem; color: var(--text); }
.problems li:last-child { border-bottom: 0; }
.problems .problem__num { margin: 0; flex: none; font-size: .82rem; }
.problems strong { color: var(--text); font-weight: 600; }
#problem .section-head { margin-bottom: 10px; }
@media (max-width: 600px) { #problem { padding: 22px 0 24px; } .problems li { padding: 7px 0; font-size: .95rem; } .bridge { font-size: .95rem; margin-top: 12px; } }
@media (min-width: 900px) {
  .problems { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
  .problems li { display: block; border-bottom: 0; border-top: 2px solid var(--line-2); padding: 14px 0 0; }
  .problems .problem__num { display: block; margin-bottom: 6px; }
}

/* tabs: the site's segmented control as a tab list, full width; each panel one list */
.seg--tabs { display: flex; width: 100%; margin: 0 0 18px; }
.seg--tabs button { flex: 1 1 0; min-height: 44px; padding: 0 10px; font-size: .9rem; white-space: nowrap; }
.seg--tabs button:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
@media (max-width: 380px) { .seg--tabs button { font-size: .84rem; padding: 0 6px; } }
.tabpanel[hidden] { display: none; }
.facts { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.facts li { display: flex; gap: 14px; align-items: flex-start; padding: 12px 0; border-bottom: 1px solid var(--line); }
.facts li:last-child { border-bottom: 0; }
.facts h3 { margin: 0 0 2px; font-size: 1rem; }
.facts p { margin: 0; font-size: .92rem; }
.facts > li > .ico { margin-top: 1px; }
.facts > li > div { min-width: 0; flex: 1; }
.why-panel .early { padding: 0 0 10px; margin: 0; }
@media (max-width: 600px) { .why-panel .early { display: none; } } /* the decorative coin stack: the facts under it are the point on a phone */
/* the city coins in a row (the review of 12 Oct 2026: overlapped 46 px discs cut their own names, "LOND", "TOKY", "ARIS", in a 190 px
   cluster): every coin whole and apart, every name inside its coin, $NYC the big one in the middle */
.why-panel .early__coins { gap: 18px; padding: 10px 0 18px; }
.why-panel .early__coins .coin-disc { width: 72px; height: 72px; margin: 0; }
.why-panel .early__coins .coin-disc--lg { width: 96px; height: 96px; }
.why-panel .early__coins .coin-disc span { max-width: none; overflow: visible; font-size: .68rem; letter-spacing: .04em; }
.why-panel .early__coins .coin-disc--lg span { font-size: 1.1rem; letter-spacing: .02em; }
.why-panel .early__coins .coin-disc:nth-child(1), .why-panel .early__coins .coin-disc:nth-child(5) { transform: translateY(10px); opacity: .88; }
.why-panel .early__coins .coin-disc:nth-child(2), .why-panel .early__coins .coin-disc:nth-child(4) { transform: translateY(-2px); }
.why-panel .bridge { margin-top: 12px; font-size: .95rem; }
.why-panel .ticks { margin: 0 0 14px; }
.why-panel .btn { margin-top: 4px; }
.compare-details { margin: 0 0 16px; border: 1px solid var(--line); border-radius: 16px; padding: 0 14px; }
.compare-details summary { cursor: pointer; min-height: 48px; display: flex; align-items: center; justify-content: space-between; gap: 12px; font: 600 .95rem var(--body); list-style: none; }
.compare-details summary::-webkit-details-marker { display: none; }
.compare-details summary::after { content: "+"; color: var(--pin-2); font-size: 1.4rem; line-height: 1; flex: none; }
.compare-details[open] summary::after { content: "−"; }
.compare-details .compare-card { margin: 0 -14px; border: 0; border-top: 1px solid var(--line); border-radius: 0 0 16px 16px; box-shadow: none; padding: 6px 14px 10px; }
.compare { font-size: .9rem; }
.compare th, .compare td { padding: 9px 6px; }
@media (min-width: 900px) {
  .why-panel { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px 40px; align-items: start; }
  .why-panel > .facts { grid-column: 1 / -1; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
  .why-panel > .facts li { display: block; border-bottom: 0; border-top: 2px solid var(--line-2); padding-top: 14px; }
  .why-panel > .facts--roles { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .why-panel > .facts--roles li { display: block; }
  .why-panel > .facts > li > .ico { margin: 0 0 10px; }
  .why-panel > .early { grid-column: 1 / -1; }
  .why-panel > .bridge { grid-column: 1 / -1; }
  .why-panel .compare-details { margin: 0; }
}

/* five steps, one line each; the live checks folded; the one-line pointer to the Token page */
.flow--compact { gap: 8px; }
.flow--compact::before { left: 22px; top: 24px; bottom: 24px; }
.flow--compact .flow__step { padding: 10px 12px 10px 8px; gap: 12px; border-radius: 14px; }
.flow--compact .flow__step h3 { margin: 2px 0 1px; font-size: 1rem; }
.flow--compact .flow__step p { font-size: .88rem; }

@media (max-width: 600px) {
  /* a plain numbered list on a phone: the line runs down the icons, no card around each step */
  .flow--compact { gap: 0; }
  .flow--compact::before { left: 13px; top: 20px; bottom: 20px; }
  .flow--compact .flow__step { padding: 7px 0; gap: 12px; border: 0; background: none; border-radius: 0; }
  .flow--compact .flow__step h3, .flow--compact .flow__step p { display: inline; }
  .flow--compact .flow__step h3::after { content: ": "; }
  .flow--compact .flow__step p { font-size: .88rem; }
  .flow--compact .flow__step > div { line-height: 1.5; padding-top: 3px; }
  .checks-details { margin-top: 10px; }
}
.checks-details { margin-top: 14px; border: 1px solid var(--line); border-radius: 16px; padding: 0 16px; background: var(--card); }
.checks-details summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 10px; min-height: 48px; font: 600 .95rem var(--body); }
.checks-details summary::-webkit-details-marker { display: none; }
.checks-details summary::after { content: "+"; margin-left: auto; color: var(--pin-2); font-size: 1.4rem; line-height: 1; }
.checks-details[open] summary::after { content: "−"; }
.checks-details .checks { padding: 4px 0 16px; }
.flow--compact .flow__step p a { font-weight: 600; } /* step 5's pointer to the Token page: the one secondary way to the token after the hero's button */
@media (min-width: 900px) {
  .flow-wrap--compact { grid-template-columns: minmax(0, 1fr); }
  .flow--compact { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }
  .flow--compact::before { display: none; }
  .flow--compact .flow__step { flex-direction: column; gap: 10px; padding: 16px; }
}

/* the roadmap: a vertical rail on a phone and a tablet (style.css: every stop stacked, nothing off screen), five stops in a row from
   900 px. The rail is green up to the last stop done, orange at the next one, then a plain line (home.js sets --rail-done / --rail-at) */
.timeline__item h3 { font-size: 1rem; margin: 0 0 4px; }
.timeline__item p { font-size: .88rem; }
.timeline__status { margin-bottom: 2px; font-size: .75rem; }
@media (min-width: 900px) {
  .timeline { display: flex; gap: 24px; padding: 12px 0 4px; }
  .timeline::before { left: 0; right: 0; top: 12px; bottom: auto; width: auto; height: 2px;
    background: linear-gradient(90deg, var(--moss), var(--moss) var(--rail-done, 48%), var(--pin) var(--rail-at, 66%), var(--line-2) calc(var(--rail-at, 66%) + 14%)); }
  .timeline__item { flex: 1 1 0; padding: 20px 0 0; }
  .timeline__item::before, .timeline__item:is(.is-next, .is-now)::after { left: 2px; top: -7px; }
}

/* the FAQ in three tabs; the answers as before */
.faq .seg--tabs { margin-bottom: 4px; }
.faq .tabpanel details:first-child { border-top: 0; }
.faq summary { font-size: .98rem; }
@media (max-width: 600px) { .faq details { padding: 4px 0; } .faq summary { font-size: .95rem; min-height: 44px; } }
@media (min-width: 900px) { .faq { max-width: 900px; } }

/* =====================================================================
   Token: a sharper hero (one line of lead, the card, one buy slot, four facts in a row), the holder list with 44 px rows, compact proofs,
   the official list without the address printed twice, the FAQ.
   ===================================================================== */
#token .lead { max-width: 60ch; margin-bottom: 0; }
.contract { margin-top: 20px; gap: 14px; }
/* the buy slot: where the Buy control lives (the in-app swap goes here); it takes the main button's place in the grid */
.contract__slot { grid-column: 1 / -1; display: grid; min-width: 0; }
@media (min-width: 640px) { .contract__slot { grid-column: auto; } }
/* the three outside links: one row of compact text links on a phone (icon + name), tiles from 640 px */
@media (max-width: 639px) {
  .contract__ext { flex-direction: row; justify-content: center; gap: 6px; min-height: 44px; padding: 0 6px 0 4px; font-size: .78rem; }
}
@media (max-width: 360px) { .contract__ext { gap: 4px; padding: 0 4px; } .contract__ext svg { display: none; } } /* 320 px: three 79 px links; the ↗ already says "outside" */
.contract__net { font-size: .75rem; }
/* the four facts: two by two on a phone, labels 12 px, numbers in the display face */
.stat-row { margin-top: 16px; gap: 10px; }
.stat { padding: 12px 14px; border-radius: 16px; gap: 1px; }
.stat__label { font-size: .75rem; letter-spacing: .08em; }
.stat strong { font-size: 1.35rem; font-variant-numeric: tabular-nums; }
.stat__sub { font-size: .76rem; line-height: 1.35; }
.proof__live, .stat__sub[data-live] { font-size: .75rem; }
@media (max-width: 800px) { .stat strong { font-size: 1.25rem; } .stat-row { gap: 8px; } .stat { padding: 10px 12px; } }
/* the holder list: the head on one row, a 44 px hit area on every wallet, 12 px headers and tags */
#holders .section-head p.muted { margin-bottom: 0; }
.holders__hint { font-size: .8rem; }
.holders__table th, .registry__table th { font-size: .75rem; }
.holders__table a { display: inline-block; padding: 12px 0; margin: -12px 0; }
.holders__table .tag { font-size: .75rem; }
@media (max-width: 480px) { .holders__table .tag { max-width: 100%; font-size: .75rem; white-space: normal; } .holders__table td.is-unranked { font-size: .75rem; } } /* "PumpSwap liquidity pool" under the address: one line where it fits, two on a 320-360 px phone, never over the amount */
.holders__table a.tag { padding: 2px 10px; font-family: inherit; color: var(--ok-text); } .holders__table a.tag:hover { text-decoration: underline; } /* the team lock's tag opens its page: still a tag, not a wallet link */
/* a keyboard skips the holder list (300 wallet links) with one Tab: the link shows where it sits once it has focus */
.holders__skip { position: absolute; left: -999px; }
.holders__skip:focus { position: static; display: inline-flex; align-items: center; min-height: 44px; margin: 0 0 8px; padding: 0 14px; border-radius: 999px; background: var(--pin); color: var(--on-accent); text-decoration: none; }
.registry__table td { font-size: .9rem; }
.contract__badge { font-size: .75rem; }
@media (max-width: 480px) { .registry__table td:nth-child(1) { font-size: .75rem; } }
@media (max-width: 520px) { .checker { flex-direction: row; gap: 8px; } .checker input { flex: 1 1 auto; min-width: 0; } .checker .btn { flex: none; padding: 0 16px; } }
/* no rug pull: a compact list of proofs on a phone (a tick, the claim, its on-chain status), cards from 560 px */
.proof { gap: 4px; padding: 16px 18px; }
.proof h3 { margin: 4px 0 0; font-size: 1rem; }
.proof p { font-size: .9rem; }
.proof__icon { width: 28px; height: 28px; font-size: .9rem; }
.proof__live { margin-top: 8px; display: inline-flex; align-items: center; gap: 6px; }
.proof__live.is-live::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--ok-text); }
#team-lock-live a { display: inline-block; padding: 12px 0; margin: -12px 0; } /* "See the lock": a 44 px tap, the line no taller (like the wallet links) */
@media (max-width: 560px) {
  .proof-grid { gap: 0; border: 1px solid var(--line); border-radius: 16px; overflow: hidden; }
  .proof { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 2px 12px; padding: 12px 14px; border: 0; border-radius: 0; box-shadow: none; background: none; }
  .proof + .proof { border-top: 1px solid var(--line); }
  .proof__icon { grid-row: 1 / span 3; margin-top: 1px; }
  .proof h3 { margin: 0; }
  .proof p { font-size: .86rem; }
  .proof__live { margin-top: 4px; }
}
/* six proofs (the team lock's card joined them on 13 Oct 2026): style.css's own grid, two a row on a tablet and three on a computer, fills every row */
#check .section-head p.muted { margin-bottom: 0; }
.registry { margin-bottom: 12px; }
.check-result { padding: 14px 16px; }
#token-faq-note { margin: 0; }

/* =====================================================================
   Cities: four facts in a row on a phone (the derived ones from 600 px), a shorter lead, the search card tidy
   ===================================================================== */
@media (max-width: 600px) {
  .city-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin-bottom: 14px; }
  .city-stats .is-open, .city-stats .city-stats__claims { display: none; } /* "still open" = communities − founded; "claims: Open" is a word */
  .city-stats strong { font-size: clamp(1rem, 4.6vw, 1.2rem); }
}
.map-ctrl button { width: 44px; height: 44px; border-radius: 12px; }
.map-ctrl { gap: 8px; }
@media (max-width: 600px) { .map-ctrl { gap: 6px; } }
.map-scale { font-size: 12px; }
.citymap__legend { font-size: .78rem; }
.claim-feed li { min-height: 44px; display: inline-flex; align-items: center; font-size: .82rem; padding: 4px 12px; }
.claim-feed__city { min-height: 44px; padding: 4px 0; }
.city-search { padding: 14px; }
.city-list { margin: 10px 0 4px; }
.city-row { min-height: 48px; }
.city-search .link-btn { padding: 10px 0; }
.claim .reqs { margin: 14px 0; gap: 10px; }
.claim .reqs p { font-size: .82rem; }
.claim h3 { font-size: 1.3rem; }
.wanted li { padding: 8px 12px; min-height: 52px; }
.wanted span, .city-row__name span { font-size: .8rem; }
@media (max-width: 600px) { .wanted { gap: 6px; } .wanted strong { display: inline; } .wanted strong::after { content: " · "; color: var(--faint); font-weight: 400; } .wanted li > div { min-width: 0; flex: 1; } }

/* =====================================================================
   Launchpad: a smaller hero (one date line, a 2-row countdown, one button), compact cards and explainers on a phone
   ===================================================================== */
.launch-hero { padding: 40px 0 44px; }
.countdown { margin: 22px auto 12px; gap: 10px; }
.countdown__unit { padding: 14px 6px 10px; border-radius: 16px; }
.countdown__unit strong { font-size: clamp(1.8rem, 7vw, 3.2rem); }
.countdown__unit span { font-size: .75rem; }
.launch-hero .hero__cta--center { margin: 18px 0 10px; }
.lp-cal-link { color: var(--muted); font: 600 .9rem var(--body); }
.lp-local { margin: 8px 0 0; }
.lp-stats--live .lp-stat dd.lp-stat__src, .lp-src, .lp-delayed, .lp-spark__msg, .coin-tile__src, .coin-foot { font-size: .75rem; }
.lp-tabs__n { font-size: .75rem; }
.lp-spark__label { font-size: .75rem; }
.lp-card__sub { font-size: .8rem; }
.link-btn.lp-honesty-link { min-height: 44px; }
.phases { gap: 10px; }
.phase__n { margin-bottom: 8px; }
@media (max-width: 600px) {
  .launch-hero { padding: 26px 0 30px; }
  .launch-hero .lead { font-size: .98rem; }
  .countdown { gap: 6px; margin: 16px auto 8px; }
  .countdown__unit { padding: 10px 4px 8px; }
  .countdown__unit strong { font-size: 1.7rem; }
  .lp-coins { padding: 30px 0 40px; }
  .lp-card { gap: 10px; padding: 14px; }
  .lp-spark.is-empty, .lp-spark.is-loading { display: none; } /* a sparkline with no history yet says nothing on a phone */
  .lp-stats--live .lp-stat__src.is-why { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* a number nobody has yet: its reason on one line, so the four tiles stay two by two (hiding the tile left a hole) */
  /* the four lists on one row: the strip never wraps (it scrolls on the narrowest phones), smaller words and counts */
  .lp-tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .lp-tabs::-webkit-scrollbar { display: none; }
  .lp-tabs button { flex: 1 1 auto; padding: 0 6px; gap: 4px; font-size: .8rem; }
  .lp-tabs__n { min-width: 0; padding: 1px 6px; }
  .lp-card__actions .btn { min-height: 44px; padding: 0 14px; font-size: .88rem; }
  .phases, .grid-3 { gap: 8px; }
  .phases .card, .grid-3 .perk { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 0 12px; padding: 14px 14px; align-items: start; }
  .phases .card h3, .grid-3 .perk h3 { margin: 0 0 2px; font-size: 1rem; }
  .phases .card p, .grid-3 .perk p { margin: 0; font-size: .88rem; grid-column: 2; }
  .phase__n { margin: 0; width: 30px; height: 30px; font-size: .9rem; }
  .perk__icon { font-size: 1.4rem; margin: 0; line-height: 1.2; }
  .perk .link-btn { grid-column: 2; margin-top: 4px; }
  .verify-grid { gap: 14px; }
  .coin-stack { display: none; } /* a decorative stack of sample tickers: the real coins are listed above */
}

/* =====================================================================
   Coin page: 12 px sources (the Buy controls are coin.js's: the header's, the bar once it scrolls, the card's while the card is on screen)
   ===================================================================== */
.coin-tile__src { font-size: .75rem; }
.coin-sources { font-size: .78rem; }
.coin-holder__tag { font-size: .72rem; }

/* =====================================================================
   Rules: a chip row to jump to any rule, each rule a fold (open on a computer, closed on a phone: rules.js); Terms: a contents fold
   ===================================================================== */
.rules-toc { display: flex; gap: 8px; overflow-x: auto; margin: 16px -16px 0; padding: 4px 16px 8px; scrollbar-width: none; }
.rules-toc::-webkit-scrollbar { display: none; }
.rules-toc a { flex: none; display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--card); color: var(--text); text-decoration: none; font: 600 .84rem var(--body); white-space: nowrap; }
.rules-toc a:hover { border-color: var(--accent-line); }
@media (min-width: 900px) { .rules-toc { flex-wrap: wrap; overflow: visible; margin: 16px 0 0; padding: 0; } }
.rules-grid details.card { padding: 0 22px; }
.rules-grid details.card > summary { cursor: pointer; list-style: none; display: block; padding: 18px 0; }
.rules-grid details.card > summary::-webkit-details-marker { display: none; }
.rules-grid details.card > summary .kicker { margin-bottom: 6px; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.rules-grid details.card > summary .kicker::after { content: "+"; color: var(--pin-2); font-size: 1.3rem; line-height: 1; }
.rules-grid details.card[open] > summary .kicker::after { content: "−"; }
.rules-grid details.card > summary h3 { margin: 0; }
.rules-grid details.card > .rule-body { padding: 0 0 20px; }
.rules-grid details.card .rule-body > :first-child { margin-top: 0; }
@media (max-width: 600px) { .rules-grid details.card { padding: 0 16px; } .rules-grid details.card > summary { padding: 14px 0; } }
.terms-toc { margin: 18px 0 0; border: 1px solid var(--line); border-radius: 16px; padding: 0 16px; background: var(--card); }
.terms-toc summary { cursor: pointer; list-style: none; min-height: 48px; display: flex; align-items: center; justify-content: space-between; font: 600 .95rem var(--body); }
.terms-toc summary::-webkit-details-marker { display: none; }
.terms-toc summary::after { content: "+"; color: var(--pin-2); font-size: 1.4rem; line-height: 1; }
.terms-toc[open] summary::after { content: "−"; }
.terms-toc ol { margin: 0; padding: 0 0 12px 1.4em; columns: 2; column-gap: 24px; }
.terms-toc li { margin: 0; font-size: .9rem; line-height: 1.5; }
.terms-toc a { display: block; padding: 11px 0; text-decoration: none; color: var(--text-2); } /* block, so a wrapped entry's number sits on its first line */
.terms-toc a:hover { color: var(--pin-2); }
@media (max-width: 600px) { .terms-toc ol { columns: 1; } }
.terms .agreebox .btn { min-height: 48px; }

/* ---------- motion for the new parts: the tab panel settles in; nothing else moves by itself (reduced motion: nothing here applies) ---------- */
@media (prefers-reduced-motion: no-preference) {
  .tabpanel.is-shown { animation: polishIn .32s cubic-bezier(.2,.8,.2,1) backwards; }
  .member-cloud__more, .compare-details summary, .checks-details summary { transition: color .2s, border-color .2s; }
}
@keyframes polishIn { from { opacity: 0; transform: translateY(6px); } }