/* Verge app design system, shared across clipper (supply) pages.
   Matches the marketing homepage: light, black-and-white, enterprise. */

/* Geist, self-hosted. Every app page used to pull this from a render-blocking
   Google Fonts <link>: a second host, a CSS round trip, then the font files,
   all before first paint. The marketing pages already self-host and preload
   Inter; this brings the app pages in line. One variable file spans 400-700,
   which is every weight the app asks for. */
@font-face {
  font-family: "Geist";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(/assets/fonts/geist-latin.var.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Geist";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(/assets/fonts/geist-latin-ext.var.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  color-scheme: light;
  --bg: #FFFFFF;
  --panel: #F6F5F2;
  --panel-2: #FAFAF8;
  --ink: #0A0A0B;
  --ink-2: #55554F;
  --ink-3: #8A8A82;
  --line: #E7E6E1;
  --line-2: #D8D7D1;
  --black: #0A0A0B;
  --white: #FFFFFF;
  /* Brand purple. Green used to be the brand AND the market signal AND the primary
     action, which is why one hue was carrying three unrelated jobs. Purple now owns
     identity and interaction; green means one thing only, which is a market moving.
     If it is a button, a link, a focus ring or a selected state, it is purple.
     Derive from these, never re-type a hex. */
  --brand:        #9873F0;
  --brand-soft:   color-mix(in srgb, var(--brand) 12%, transparent);
  --brand-line:   color-mix(in srgb, var(--brand) 26%, transparent);
  /* One purple, everywhere. There was a darker #7C4DE0 for interactive surfaces
     because white on the brand purple measures 3.47:1, under the 4.5:1 AA wants for
     body-size text. Two purples read as an accident rather than a system, so the
     brand value wins and the buttons carry the contrast cost. If that ever has to
     pass, #8363D0 is the lightest value on this hue line that clears 4.5:1. */
  --action:       var(--brand);
  --action-hover: color-mix(in srgb, var(--action) 88%, #000);
  --action-ink:   #FFFFFF;
  --focus:        color-mix(in srgb, var(--action) 45%, transparent);
  --grad-a:       #A073F2;
  --grad-b:       #8D78F1;
  --brand-grad:   linear-gradient(135deg, var(--grad-a) 0%, var(--grad-b) 100%);
  /* Legacy alias. Every remaining --up is market data and points at --mkt-up; kept
     only so a stray reference cannot fall through to an undefined value. */
  --up: var(--mkt-up);
  --down: #A6A69E;
  /* Market direction, and nothing else. Lime for a Market gaining, coral for one
     fading. The coral is lighter than the green on paper on purpose: the eye weights
     green heavily in luminance, so a red at matching saturation reads darker and the
     pair stops looking like a set. Used on the trend line, the delta and the live dot.
     Never on chrome, never on a button, never on the funding tape. */
  --mkt-up: #19C37D;
  --mkt-dn: #F2635C;
  --sans: "Geist", -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Segoe UI", system-ui, Roboto, sans-serif;
  --maxw: 1240px;
  --pad: clamp(20px, 4vw, 56px);
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: var(--sans); font-size: 16px; line-height: 1.5;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
p { margin: 0; }
h1, h2, h3, h4 { margin: 0; font-weight: 500; letter-spacing: -0.024em; line-height: 1.08; }
/* Market titles, every surface: rail, card, featured tile, related tile, detail,
   fund panel, sticky bar. These sit on mixed elements (div/h2/h3/h1), so weight came
   from six different places and drifted thin twice. This rule owns it. A Market
   title is not display type: page/legal/category headings stay at the lighter reset
   weight on purpose. Add new title surfaces here, not inline. */
.rname, .ktitle, .feat h2, .reltitle, .dhead h1, .fp-t, .spotbar .sb-title { font-weight: 600; }
/* Market stat blocks: featured card (.fstats) and detail page (.dstats) show the same
   Funded/Rate/Backers, so label case and numeral weight are decided in one place.
   Labels are Title Case, not caps. Numerals are 600 to match the titles: .v/.val are
   divs, so they inherit body 400 (Geist's lightest face) and read washed out.
   Geist Mono was tried and rejected: monospace gives punctuation a full cell, so
   "$27,300" renders "$27 , 300". These are money and counts, not code. */
.fstats .k, .dstats .k { font-size: 12px; font-weight: 500; letter-spacing: 0; }
.fstats .v, .dstats .val { font-weight: 600; }
img { max-width: 100%; display: block; }
.wrap { max-width: var(--maxw); margin: 0 auto; padding-left: var(--pad); padding-right: var(--pad); }
.mono { font-family: var(--sans); font-variant-numeric: tabular-nums; }

/* Anti-FOUC gate for client-rendered pages. Their bodies ship a static skeleton
   (placeholder heading, empty grid/sidebar, footer pulled to the top, logged-out
   nav) that the browser paints for the ~40ms the render scripts take to run, then
   JS fills it in. That pre-JS paint is the "flash of markets" seen on every
   navigation and refresh. A one-line <head> script adds `pg-wait` before first
   paint and removes it on DOMContentLoaded, by which point the inline render AND
   nav.js have run, so the real content and auth state are already in place.
   Until then everything below the nav stays invisible, and the nav's own CTA (the
   logged-out Log In / Sign Up that nav.js swaps for the avatar) is held too. The
   nav wordmark, links, and category tabs are static and correct, so they show
   immediately. Gate is JS-added, so a no-JS load still renders everything. */
html.pg-wait body > :not(.appnav):not(.cattabs) { visibility: hidden; }
html.pg-wait .navcta { visibility: hidden; }

/* Signed-in users: the static nav ships a logged-out "Log In" button that nav.js
   replaces with the avatar once it runs, which flickers on every page. A tiny
   <head> script reads the auth hint (localStorage) before first paint and sets
   `is-authed`, so the Log In never paints; nav.js then swaps the (still present,
   just hidden) element for the avatar. Only `.login` is hidden, never action
   buttons like "Book a Call". Guests never get the class, so they see Log In as
   before. */
html.is-authed .navcta a[href^="/login"] { display: none; }
.eyebrow { font-size: 12px; font-weight: 600; letter-spacing: 0.01em; color: var(--ink-3); }

/* ---------- top nav ---------- */
.appnav {
  position: sticky; top: 0; z-index: 40; background: transparent;
  border-bottom: 1px solid transparent;
  transition: background .25s ease, border-color .25s ease, backdrop-filter .25s ease;
}
.appnav.scrolled {
  background: rgba(255,255,255,0.9);
  backdrop-filter: saturate(180%) blur(14px); -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom-color: var(--line);
}
/* combined nav (logo bar + sticky tabs): solid white, no seam between them */
.appnav.combo, .appnav.combo.scrolled { background: var(--white); border-bottom-color: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; }
.appnav-in { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; height: 64px; }
/* in-platform nav: tighter bar (Kalshi-height); homepage keeps the taller 64px */
.appnav.app .appnav-in { height: 52px; }
.appnav.app .brand { font-size: 23px; }
/* balance the links' 4px bottom padding + 2px active underline with matching top
   padding, so the nav text is truly centered (in line with the larger Verge logo) */
.appnav.app .navlinks a { padding-top: 6px; }
/* homepage variant: fixed overlay, edges aligned to the hero video */
.appnav.home { position: fixed; top: 0; left: 0; right: 0; z-index: 50; }
.appnav.home .appnav-in { max-width: none; padding-left: clamp(14px, 1.8vw, 24px); padding-right: clamp(14px, 1.8vw, 24px); }
/* THE WORDMARK. One rule, every surface it appears on.
   The nav, the footer, the two chart watermarks and the profile chart each
   re-typed their own weight and tracking (700/-0.02em here, 650/-0.02em there,
   600/-0.045em in the nav), so the same word was being drawn five different
   ways and only one of them read as a logo. Size and position stay local
   because they genuinely differ per surface; the letterforms and the colour do
   not. Do not set font-weight, letter-spacing or color on a wordmark anywhere
   else. Geist has no 650, so that value was interpolating anyway. */
.brand,
.sfoot .sf-brand,
.lead-wm,
.flag-wm,
.pchart-mark { font-weight: 600; letter-spacing: -0.045em; color: var(--brand); }
/* Chart watermarks are a quiet signature on someone else's data, not a brand moment:
   in purple the mark competed with the figures it sits beside. Grey lets the numbers
   lead and still marks the chart when it is screenshotted. */
.lead-wm, .flag-wm { color: var(--ink-3); }

.brand { font-size: 26px; display: flex; align-items: baseline; gap: 8px; justify-self: start; }
/* minimal in-platform nav (.min): just the brand + Log in */
.appnav.min .appnav-in { grid-template-columns: 1fr auto; }
.appnav.min .navlinks { display: none; }
.appnav.min .navcta .btn-primary { display: none; }
.brand .tag { font-size: 11px; font-weight: 600; letter-spacing: 0.01em; color: var(--ink-3); }
.navlinks { display: flex; gap: 30px; justify-self: center; }
.navlinks a { font-size: 13.5px; color: var(--ink-2); transition: color .15s; padding-bottom: 4px; border-bottom: 2px solid transparent; }
.navlinks a:hover, .navlinks a.active { color: var(--brand); }
.navlinks a.active { font-weight: 600; border-bottom-color: var(--brand); }
.navcta { justify-self: end; display: flex; align-items: center; gap: 18px; }
.navcta .login { font-size: 14.5px; color: var(--ink-3); }
.navcta .login.btn:hover { color: var(--ink-2); border-color: var(--ink-3); }
/* ---- marketing nav: one shared look across the homepage + every marketing/utility
   page, matched to the Scale reference. The in-platform .appnav.app.combo is excluded
   (:not(.app)) and keeps its own tighter bar + tabs. ---- */
.appnav:not(.app) .brand { font-size: 22px; }
.appnav:not(.app) .navlinks { gap: 28px; }
.appnav:not(.app) .navlinks a { font-size: 14px; padding-bottom: 0; border-bottom: 0; }
.appnav:not(.app) .btn { font-weight: 400; font-size: 14px; line-height: 1.15; padding: 11px 22px; border-radius: 8px; }
.appnav:not(.app) .btn-ghost { padding-left: 16px; padding-right: 16px; }
@media (min-width: 721px) {
  /* left-align the links next to the logo, 88px bar, CTAs pushed right */
  .appnav:not(.app) .appnav-in { display: flex; align-items: center; gap: 44px; height: 88px; }
  .appnav:not(.app) .navcta { margin-left: auto; }
}
.navburger { display: none; position: absolute; right: var(--pad, 22px); top: 50%; transform: translateY(-50%); width: 40px; height: 40px; align-items: center; justify-content: center; border: none; background: none; color: var(--ink); cursor: pointer; padding: 0; z-index: 2; }
.appnav.home .navburger { right: clamp(14px, 1.8vw, 24px); }
.navburger svg { width: 22px; height: 22px; }
.navdrawer { position: absolute; left: 0; right: 0; top: 100%; background: var(--white); border-bottom: 1px solid var(--line); padding: 4px var(--pad, 22px) 12px; box-shadow: 0 22px 44px -28px rgba(0,0,0,0.32); }
.navdrawer[hidden] { display: none; }
.navdrawer .navdrawer-links { display: flex; flex-direction: column; }
/* match the desktop nav links: 14px Geist, gray (--ink-2), no divider lines */
.navdrawer .navdrawer-links a { padding: 10px 0; font-size: 14px; color: var(--ink-2); border-bottom: 0; }
.navdrawer .navdrawer-links a:hover { color: var(--ink); }
/* the page you are on (nav.js marks it). Weight and full-strength ink only: the brand
   rule down the left read as a second, competing accent next to the purple wordmark. */
.navdrawer .navdrawer-links a.active { color: var(--ink); font-weight: 600; }
.navdrawer .navdrawer-cta { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; }
.navdrawer .navdrawer-cta .login { text-align: center; padding: 11px; border: 1px solid var(--line-2); border-radius: 9px; font-size: 15px; color: var(--ink); }
.navdrawer .navdrawer-cta .btn { justify-content: center; }
@media (max-width: 720px) {
  .appnav:not(.min) .appnav-in { grid-template-columns: 1fr auto; }
  .appnav:not(.min) .navlinks { display: none; }
  .appnav:not(.min) .navcta { display: none; }
  .cattabs .navcta { display: none; } /* relocated cluster hides on mobile; burger drawer covers account/login */
  .appnav:not(.min) .navburger { display: inline-flex; }
  .appnav .brand { font-size: 23px; }
  /* homepage nav is transparent-over-video on desktop (Scale style); on mobile make it
     a solid white bar so the hero video never bleeds behind the logo/burger or the
     open drawer, and the black wordmark stays legible */
  .appnav.home { background: var(--white); border-bottom-color: var(--line); backdrop-filter: none; -webkit-backdrop-filter: none; }
  /* logged-in app nav (.combo) has only two primary links (Markets, Dashboard),
     so show them inline like desktop instead of burying them in the burger. Account
     actions live in the avatar menu, so the burger is not needed here. */
  .appnav.combo .navburger { display: none; }
  /* brand left, the two primary links centered, account right (mirrors desktop) */
  .appnav.combo .appnav-in { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; }
  .appnav.combo .brand { font-size: 19px; justify-self: start; }
  .appnav.combo:not(.min) .navlinks { display: flex; gap: 16px; justify-self: center; }
  .appnav.combo .navlinks a { font-size: 13px; white-space: nowrap; }
  .appnav.combo .navacct.navacct-mobile { position: static; transform: none; right: auto; justify-self: end; }
  /* smaller category tabs so the two-row header reads calmer on a phone */
  .cattabs-links a { font-size: 13px; }
}

/* account avatar + menu (replaces "Log in" once signed in) */
.navuser { position: relative; display: inline-flex; }
/* A thin brand ring marks the avatar as yours, and gives the photo an edge against
   a dark nav. Ring, not a thick border: at 34px anything heavier eats the face. */
.navavatar { width: 34px; height: 34px; padding: 0; border-radius: 50%; border: 1.5px solid color-mix(in srgb, var(--brand) 62%, transparent); background: var(--panel); overflow: hidden; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: border-color .15s; }
.navavatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.navavatar:hover { border-color: var(--brand); }
.navmenu { position: absolute; right: 0; top: calc(100% + 12px); min-width: 268px; background: var(--white); border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 26px 60px -24px rgba(0,0,0,0.28); padding: 8px; z-index: 60; }
.navmenu[hidden] { display: none; }
.navmenu .nm-head { display: block; padding: 8px 12px 12px; margin-bottom: 4px; border-bottom: 1px solid var(--line); }
.navmenu .nm-label { display: block; font-size: 10.5px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-3); }
.navmenu .nm-email { display: block; font-size: 14px; color: var(--ink); margin-top: 3px; max-width: 224px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.navmenu a, .navmenu button { display: flex; align-items: center; gap: 13px; width: 100%; text-align: left; padding: 12px 12px; font-family: var(--sans); font-size: 15px; font-weight: 500; color: var(--ink); background: none; border: 0; border-radius: 10px; cursor: pointer; }
.navmenu a + a { border-top: 1px solid var(--line); border-radius: 0; }
.navmenu a:hover, .navmenu button:hover { background: var(--panel); }
.navmenu .nm-count { margin-left: auto; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--ink); color: #fff; font-size: 10.5px; font-weight: 600; font-variant-numeric: tabular-nums; display: inline-flex; align-items: center; justify-content: center; }
.navmenu .nm-count[hidden] { display: none; }
/* Brand-coloured, matching the account rail: the icon carries the accent so the
   label can stay ink and keep its contrast. Sign out follows the same rule, so
   the menu reads as one set of rows rather than one live and one greyed out. */
.navmenu .nm-ic { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; flex-shrink: 0; color: var(--brand); }
.navmenu .nm-ic svg { width: 22px; height: 22px; }
.navmenu .nm-logout { margin-top: 6px; border-top: 1px solid var(--line); border-radius: 0 0 10px 10px; }
/* Current page, same treatment the account rail gives its active row. */
.navmenu a.active { background: var(--panel); font-weight: 600; }

/* dashboard pages: main content on the left, an account-section rail on the right */
.dashwrap { display: flex; gap: 40px; align-items: stretch; }
.dashwrap .dash-body { flex: 1 1 auto; min-width: 0; }
/* Read-only value in a settings row, sitting where an input would. */
.setval { font-size: 15px; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acctrail { align-self: flex-start; flex: 0 0 262px; position: sticky; top: 116px; background: var(--white); border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 22px 50px -32px rgba(0,0,0,0.22); padding: 8px; }
.acctrail a { display: flex; align-items: center; gap: 13px; padding: 13px 14px; border-radius: 10px; font-family: var(--sans); font-size: 15px; font-weight: 500; color: var(--ink); text-decoration: none; }
.acctrail a + a { margin-top: 5px; }
.acctrail a:hover { background: var(--panel); }
.acctrail a.active { background: var(--panel); font-weight: 600; }
.acctrail .ar-ic { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; flex-shrink: 0; color: var(--brand); }
.acctrail .ar-ic svg { width: 22px; height: 22px; }
@media (max-width: 860px) {
  .dashwrap { flex-direction: column; gap: 22px; }
  .acctrail { flex-basis: auto; width: 100%; position: static; }
}

/* mobile: the account avatar sits in the top bar next to the burger and opens the
   same dropdown as desktop, instead of burying account actions in the drawer */
/* .navacct.navacct-mobile (two classes) so this beats the later `.navacct { display:inline-flex }`
   rule and stays hidden on desktop; the media rule matches specificity + wins by source order */
.navacct.navacct-mobile { display: none; }
@media (max-width: 720px) {
  .navacct.navacct-mobile { display: inline-flex; align-items: center; gap: 6px; position: absolute; right: calc(var(--pad, 20px) + 46px); top: 50%; transform: translateY(-50%); z-index: 3; }
  .appnav.home .navacct.navacct-mobile { right: calc(clamp(14px, 1.8vw, 24px) + 46px); }
  .navacct.navacct-mobile .navavatar { width: 24px; height: 24px; }
  .navacct.navacct-mobile .navmenu { top: calc(100% + 12px); }
}

/* ---------- buttons ---------- */
.btn {
  font-family: var(--sans); font-weight: 500; font-size: 14.5px; letter-spacing: -0.01em;
  padding: 8px 17px; border-radius: 10px; cursor: pointer; border: 1px solid transparent;
  display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
  transition: transform .12s, background .18s, border-color .18s, color .18s;
}
.btn-primary { background: var(--action); color: var(--action-ink); }
.btn-primary:hover { background: var(--action-hover); transform: translateY(-1px); }
.btn-ghost { background: var(--white); color: var(--ink); border-color: var(--line-2); }
.btn-ghost:hover { border-color: var(--ink-3); }
.btn-sm { padding: 6px 12px; font-size: 13.5px; border-radius: 7px; }
.btn-lg { padding: 11px 22px; font-size: 15.5px; border-radius: 10px; }
.btn-block { width: 100%; justify-content: center; }

/* ---------- page header ---------- */
.pagehead { padding-top: clamp(40px, 6vh, 72px); padding-bottom: 8px; }
.pagehead h1 { font-size: clamp(30px, 4.2vw, 46px); letter-spacing: -0.035em; max-width: 20ch; }
.pagehead .sub { margin-top: 16px; color: var(--ink-2); font-size: clamp(16px, 1.4vw, 19px); max-width: 60ch; }

/* ---------- toolbar (tabs + sort + search) ---------- */
.toolbar { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding: 28px 0 22px; border-bottom: 1px solid var(--line); }
.tabs { display: flex; gap: 6px; flex-wrap: wrap; }
.tab {
  font-size: 14px; font-weight: 500; color: var(--ink-2); padding: 7px 14px; border-radius: 20px;
  border: 1px solid var(--line); background: var(--white); cursor: pointer; transition: all .15s; white-space: nowrap;
}
.tab:hover { border-color: var(--line-2); }
.tab.active { background: var(--black); color: var(--white); border-color: var(--black); }
.spacer { flex: 1 1 auto; }
.search { position: relative; }
.search input {
  font-family: var(--sans); font-size: 14px; color: var(--ink); background: var(--white);
  border: 1px solid var(--line); border-radius: 8px; padding: 9px 12px 9px 34px; width: 220px; outline: none; transition: border-color .15s;
}
.search input:focus { border-color: var(--ink-3); }
.search svg { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--ink-3); }
.select {
  font-family: var(--sans); font-size: 14px; color: var(--ink); background: var(--white);
  border: 1px solid var(--line); border-radius: 8px; padding: 9px 30px 9px 12px; cursor: pointer; outline: none;
  appearance: none; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><path d='M3 4.5L6 7.5L9 4.5' stroke='%238A8A82' stroke-width='1.4' fill='none' stroke-linecap='round'/></svg>");
  background-repeat: no-repeat; background-position: right 10px center;
}

/* ---------- custom select (see assets/app/select.js) ----------
   A native select's popup is OS-drawn and cannot be themed, so it lands as the grey
   system menu on macOS/iOS. select.js keeps the real <select> for value + form
   semantics and paints this listbox over it. The trigger deliberately mirrors the
   .select rule above so nothing shifts when the chrome is swapped in. */
.vsel { position: relative; display: inline-flex; }
.vsel-native { position: absolute; opacity: 0; pointer-events: none; width: 1px; height: 1px; }
.vsel-trigger {
  font-family: var(--sans); font-size: 14px; color: var(--ink); background: var(--white);
  border: 1px solid var(--line); border-radius: 8px; padding: 9px 10px 9px 12px;
  cursor: pointer; outline: none; display: inline-flex; align-items: center; gap: 8px;
  white-space: nowrap; transition: border-color .15s;
}
.vsel-trigger:hover { border-color: var(--ink-3); }
.vsel-trigger:focus-visible { border-color: var(--brand); }
.vsel-chev { width: 12px; height: 12px; color: var(--ink-3); flex: 0 0 auto; transition: transform .18s; }
.vsel.is-open .vsel-chev { transform: rotate(180deg); }
.vsel-menu {
  position: absolute; z-index: 80; top: calc(100% + 6px); right: 0; min-width: 100%;
  background: var(--white); border: 1px solid var(--line); border-radius: 12px;
  padding: 6px; box-shadow: 0 24px 48px -22px rgba(0,0,0,0.45);
  display: none; max-height: 320px; overflow-y: auto;
}
.vsel.is-open .vsel-menu { display: block; }
.vsel-item {
  display: flex; align-items: center; gap: 8px; white-space: nowrap;
  padding: 9px 12px 9px 8px; border-radius: 8px; cursor: pointer;
  font-size: 14px; color: var(--ink-2);
}
.vsel-item:hover, .vsel-item.is-active { background: var(--panel-2); color: var(--ink); }
.vsel-item.is-on { color: var(--ink); font-weight: 600; }
.vsel-tick { width: 14px; height: 14px; flex: 0 0 auto; color: var(--brand); visibility: hidden; }
.vsel-item.is-on .vsel-tick { visibility: visible; }
.vsel-item[aria-disabled="true"] { opacity: .45; cursor: default; }

/* ---------- market grid + cards ---------- */
.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; padding: 28px 0 40px; }
.mcard {
  display: flex; flex-direction: column; gap: 14px; background: var(--white);
  border: 1px solid var(--line); border-radius: 12px; padding: 20px; transition: border-color .2s, transform .2s, box-shadow .2s;
}
.mcard:hover { border-color: var(--line-2); transform: translateY(-3px); box-shadow: 0 18px 40px -30px rgba(0,0,0,0.25); }
.mcard .top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.mcard h3 { font-size: 19px; letter-spacing: -0.02em; line-height: 1.2; }
.mcard .desc { font-size: 14px; color: var(--ink-3); line-height: 1.45; }
.mcard .foot { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--line); display: flex; align-items: flex-end; justify-content: space-between; }

/* payout + stats */
.pay { }
.pay .k { font-size: 10.5px; letter-spacing: 0.1em; color: var(--ink-3); }
.pay .v { font-family: var(--sans); font-size: 22px; letter-spacing: -0.02em; margin-top: 3px; font-variant-numeric: tabular-nums; }
.pay .v small { font-size: 12px; color: var(--ink-3); font-family: var(--sans); letter-spacing: 0; }
.mstat { text-align: right; }
.mstat .k { font-size: 10.5px; letter-spacing: 0.1em; color: var(--ink-3); }
.mstat .v { font-family: var(--sans); font-size: 15px; margin-top: 4px; font-variant-numeric: tabular-nums; }

/* badges */
.badges { display: flex; gap: 6px; flex-wrap: wrap; }
.badge { font-size: 11px; font-weight: 600; letter-spacing: 0.03em; padding: 3px 9px; border-radius: 20px; white-space: nowrap; }
.badge-cat { color: var(--ink-2); border: 1px solid var(--line-2); background: var(--white); letter-spacing: 0.01em; font-size: 10.5px; }
.badge-urgent { color: #7a3b00; background: #FCEFD9; border: 1px solid #F3DCB0; }
.badge-source { color: var(--action); background: var(--brand-soft); border: 1px solid var(--brand-line); }
.plat { display: inline-flex; gap: 5px; align-items: center; font-family: var(--sans); font-size: 11px; color: var(--ink-3); letter-spacing: 0.02em; }

/* progress bar */
.prog { height: 6px; border-radius: 999px; background: var(--line); overflow: hidden; box-shadow: inset 0 1px 1.5px rgba(10,10,11,0.06); }
.prog > i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(180deg, #2C2C2E 0%, var(--black) 62%); }

/* ---------- footer ---------- */
.foot-cta { border-top: 1px solid var(--line); background: var(--panel); }
/* ---------- shared site footer ---------- */
.sfoot { border-top: 1px solid var(--line); background: var(--white); margin-top: 64px; }
.sfoot .sf-grid { display: grid; grid-template-columns: 1.7fr 1fr 1fr 1fr; gap: 40px; padding: 56px 0 40px; }
/* the footer signs the page, so the wordmark reads at nav weight rather than
   sitting a size below the column headings it is meant to anchor */
.sfoot .sf-brand { font-size: 28px; }
.sfoot .sf-tag { color: var(--ink-3); font-size: 14px; margin-top: 11px; max-width: 34ch; line-height: 1.55; }
.sfoot .sf-col h4 { font-size: 12px; letter-spacing: 0.01em; color: var(--ink-3); margin-bottom: 14px; }
.sfoot .sf-col a { display: block; font-size: 14px; color: var(--ink-2); margin-bottom: 11px; transition: color .15s; }
.sfoot .sf-col a:hover { color: var(--ink); }
.sfoot .sf-base { border-top: 1px solid var(--line); padding: 18px 0; display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 12.5px; color: var(--ink-3); }
.sfoot .sf-legal { display: flex; flex-wrap: wrap; gap: 18px; }
.sfoot .sf-legal a { color: var(--ink-3); transition: color .15s; }
.sfoot .sf-legal a:hover { color: var(--ink); }
/* Phones: keep all five policy links on a single row instead of dropping
   "Transparency" onto an orphan second line. The five labels are 315px of text at
   the desktop 12.5px, which does not fit a ~322px mobile column, so the type scales
   with the viewport and space-between spreads whatever is left over. */
@media (max-width: 720px) {
  .sfoot .sf-legal { flex-wrap: nowrap; justify-content: space-between;
    gap: clamp(4px, 1.6vw, 10px); width: 100%; }
  .sfoot .sf-legal a { white-space: nowrap; font-size: clamp(9px, 2.85vw, 12.5px); }
}
.sfoot .sf-mark { display: none; }

/* ---------- start a market ---------- */
.startgrid { display: grid; grid-template-columns: minmax(0, 560px) 344px; gap: 44px; align-items: start; margin-top: 34px; }
.startform { max-width: 560px; }
.fgroup { border-top: 1px solid var(--line); padding-top: 26px; margin-top: 26px; }
.fgroup:first-child { border-top: none; padding-top: 0; margin-top: 0; }
.fglabel { font-size: 12px; letter-spacing: 0.01em; color: var(--ink-3); font-weight: 600; margin-bottom: 16px; }
.prevcard { border: 1px solid var(--line); border-radius: 12px; background: var(--panel-2); padding: 16px 18px; margin-top: 18px; }
.prevcard .prevcard-h { font-size: 13px; font-weight: 600; margin-bottom: 6px; }
.prevcard p { font-size: 13px; color: var(--ink-2); line-height: 1.55; }
.prevcard a { color: var(--ink); border-bottom: 1px solid var(--line-2); }
.chk { display: flex; gap: 10px; align-items: flex-start; font-size: 13.5px; color: var(--ink-2); line-height: 1.5; margin-bottom: 13px; cursor: pointer; }
.chk input { width: 16px; height: 16px; margin-top: 2px; accent-color: var(--action); flex: 0 0 auto; }
.chk a { color: var(--ink); border-bottom: 1px solid var(--line-2); }
.chkerr { font-size: 12.5px; color: var(--down); margin-top: 2px; }
.field + .field { margin-top: 18px; }
.field label { display: block; font-size: 13px; color: var(--ink); font-weight: 600; margin-bottom: 7px; }
.field input[type=text], .field input[type=email], .field input[type=password], .field textarea {
  width: 100%; font-family: var(--sans); font-size: 15px; padding: 11px 13px; border: 1px solid var(--line-2);
  border-radius: 10px; outline: none; box-sizing: border-box; background: var(--white); color: var(--ink); transition: border-color .15s; }
.field input:focus, .field textarea:focus { border-color: var(--action); box-shadow: 0 0 0 3px var(--focus); }
.field textarea { min-height: 104px; resize: vertical; line-height: 1.5; }
.hint { font-size: 12px; color: var(--ink-3); margin-top: 10px; line-height: 1.45; }
.field .hint { margin-top: 7px; }
.seg { display: flex; gap: 8px; }
.seg button { flex: 1; font-family: var(--sans); font-size: 14px; padding: 10px 0; border: 1px solid var(--line); border-radius: 9px; background: var(--white); cursor: pointer; color: var(--ink-2); transition: all .15s; }
.seg button:hover { border-color: var(--ink-3); }
.seg button.active { border-color: var(--ink); background: var(--panel-2); color: var(--ink); }
.covers { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
.cover { width: 66px; height: 44px; border-radius: 8px; overflow: hidden; border: 2px solid transparent; cursor: pointer; padding: 0; background: none; }
.cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cover.active { border-color: var(--ink); }
.dropzone { border: 1.5px dashed var(--line-2); border-radius: 12px; padding: 18px; text-align: center; color: var(--ink-3); font-size: 13px; background: var(--panel-2); margin-bottom: 12px; }
.preview-wrap { position: sticky; top: 122px; }
.preview-wrap .plabel { font-size: 11px; letter-spacing: 0.1em; color: var(--ink-3); margin-bottom: 13px; }
.preview-wrap .pnote { font-size: 12.5px; color: var(--ink-3); line-height: 1.5; margin-top: 16px; }
.kcard .kicon.ph { display: flex; align-items: center; justify-content: center; background: var(--panel); color: var(--ink-3); font-size: 11px; letter-spacing: 0.01em; }
@media (max-width: 860px) { .startgrid { grid-template-columns: 1fr; gap: 32px; } .preview-wrap { position: static; } }
.startsteps { text-align: left; max-width: 452px; margin: 34px auto 8px; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.sstep { display: flex; gap: 14px; padding: 16px 18px; border-top: 1px solid var(--line); align-items: flex-start; }
.sstep:first-child { border-top: none; }
/* Purple, not --ink: these are step markers on the brand's own explainer, and
   purple owns identity. It also removes the need for a dark-theme override,
   since the brand hue reads on both grounds where a near-black chip does not. */
.sstep .sn { flex: 0 0 auto; width: 24px; height: 24px; border-radius: 50%; background: var(--action); color: var(--action-ink); font-family: var(--sans); font-size: 12px; display: flex; align-items: center; justify-content: center; margin-top: 1px; }
.sstep b { font-size: 15px; }
.sstep p { color: var(--ink-2); font-size: 13.5px; line-height: 1.5; margin-top: 3px; }
.railcard.startcard { padding: 18px; }
.railcard.startcard h4 { padding: 0; }
.railcard.startcard p { font-size: 13px; color: var(--ink-2); line-height: 1.5; margin: 8px 0 16px; }

/* ---------- generic page header ---------- */
.pagehead { max-width: 720px; }
.pagehead h1 { font-size: clamp(30px, 4vw, 46px); letter-spacing: -0.035em; margin-top: 12px; }
/* opt-in brand-coloured page heading (contact). A modifier class rather than a bare
   .pagehead h1 override, so the other pagehead pages keep their ink headings. */
.pagehead-brand h1 { color: var(--brand); }
.pagehead .intro { color: var(--ink-2); font-size: 17px; line-height: 1.6; margin-top: 16px; }
.pagehead.centered { margin-left: auto; margin-right: auto; text-align: center; }
.pagehead.centered h1, .pagehead.centered .intro, .pagehead.centered .sub { margin-left: auto; margin-right: auto; }
/* info pages: a centered content column, text stays left-aligned */
.wrap.pagenarrow { max-width: 800px; }
.pagenarrow .pagehead, .pagenarrow .faq, .pagenarrow .contact-grid { max-width: none; }
/* one uniform reading column: heading, intro and body prose share the same
   width and left edge instead of three mismatched widths */
.pagenarrow .pagehead h1, .pagenarrow .pagehead .intro, .pagenarrow .pagehead .sub, .pagenarrow .dsec p { max-width: 40rem; }
/* left-align the remaining prose that is NOT part of the justified body standard
   (intro + .dsec p are justified platform-wide; see the justified body-prose rule). */
/* Left-align prose that is too narrow to justify cleanly: the .sstep descriptions sit
   in a slim column beside the number badge, where justify opens ugly word-gaps. */
.pagenarrow .faqitem .fa, .pagenarrow .contact-card p, .startsteps .sstep p { text-align: left; text-justify: auto; }

/* ---------- auth ---------- */
.authwrap { max-width: 500px; margin: 0 auto; padding: 60px 20px 96px; }
.authwrap h1 { font-size: 28px; letter-spacing: -0.03em; text-align: center; }
.authwrap .sub { color: var(--ink-2); margin-top: 10px; font-size: 15px; text-align: center; }
.authcard { border: 1px solid var(--line); border-radius: 18px; padding: 40px; background: var(--white); box-shadow: 0 24px 50px -36px rgba(0,0,0,0.32); }
.authcard h2 { font-size: 24px; font-weight: 600; letter-spacing: -0.02em; margin-bottom: 6px; }
.authcard .login-sub { font-size: 13.5px; color: var(--ink-2); margin-bottom: 22px; line-height: 1.5; }
.authcard .field { margin-bottom: 14px; }
.authcard .field + .field { margin-top: 0; }
.authcard .field label { display: block; letter-spacing: 0.01em; font-size: 11px; color: var(--ink-3); font-weight: 600; margin-bottom: 8px; }
.oauth { display: flex; flex-direction: column; gap: 10px; }
.oauth button { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; padding: 11px; border: 1px solid var(--line-2); border-radius: 10px; background: var(--white); font-family: var(--sans); font-size: 14.5px; font-weight: 600; color: var(--ink); cursor: pointer; transition: border-color .15s, background .15s; }
.oauth button:hover { border-color: var(--ink-3); background: var(--panel-2); }
.oauth .oaicon { width: 18px; height: 18px; display: inline-flex; flex: 0 0 auto; }
.oauth .oaicon svg { width: 100%; height: 100%; display: block; }
.authdiv { display: flex; align-items: center; gap: 12px; margin: 18px 0; color: var(--ink-3); font-size: 12px; }
.authdiv::before, .authdiv::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.authrow { display: flex; justify-content: space-between; align-items: center; margin: 4px 0 2px; font-size: 13px; }
.authrow .remember { display: flex; align-items: center; gap: 7px; color: var(--ink-2); cursor: pointer; }
.authrow .remember input { width: 14px; height: 14px; accent-color: var(--ink); }
.authrow a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--line-2); }
.btn.authbtn { border-radius: 999px; margin-top: 10px; }
.authfoot { text-align: center; font-size: 13.5px; color: var(--ink-2); margin-top: 20px; }
.authfoot a { color: var(--brand); border-bottom: 1px solid color-mix(in srgb, var(--brand) 42%, transparent); }
.authfoot a:hover { border-bottom-color: var(--brand); }
.finehint { font-size: 12px; color: var(--ink-3); text-align: center; margin-top: 16px; line-height: 1.5; }
.finehint a { color: var(--ink); }

@media (max-width: 560px) {
  /* Auth panels (login / signup / reset): a fixed top gap below the nav (rather
     than vertical centering) so the gap from the nav to the card is identical on
     every mode, regardless of card height. svh keeps the full panel on screen. */
  .authwrap {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    min-height: calc(100svh - 65px);
    /* left/right gutter tracks the site-wide mobile content gutter (--pad, 34px),
       so the card is the same width as the feed cards on pages like /markets */
    padding: 52px var(--pad) 24px;
  }
  /* keep the card compact but give it room to breathe: modest type with roomy
     vertical rhythm. The subtitle is sized (and tracked) to sit on one line down
     to ~375px wide; the tallest variant (signup) still fits on one screen, and
     the card runs near full-width instead of the desktop 40px inset, which left
     only ~270px inside on a phone. */
  /* generous internal side padding so the OAuth buttons and inputs are not
     pressed against the card edges; the long signup subtitle wraps to two lines
     at this width, which is fine */
  .authcard { padding: 22px 20px 20px; }
  .authcard h2 { font-size: 18px; }
  .authcard .login-sub { font-size: 11.5px; letter-spacing: -0.02em; line-height: 1.5; margin-bottom: 14px; }
  .oauth { gap: 10px; }
  .oauth button { padding: 10px; font-size: 13.5px; }
  .oauth .oaicon { width: 16px; height: 16px; }
  .authdiv { margin: 14px 0; font-size: 11px; }
  .authcard .field { margin-bottom: 13px; }
  .authcard .field label { font-size: 11px; margin-bottom: 6px; }
  .authcard .field input[type=text],
  .authcard .field input[type=email],
  .authcard .field input[type=password] { font-size: 14px; padding: 10px 12px; }
  .authrow { font-size: 12.5px; margin: 6px 0 0; }
  .authrow .remember input { width: 14px; height: 14px; }
  .btn.authbtn { padding: 11px 18px; font-size: 14.5px; margin-top: 16px; }
  .finehint { font-size: 11px; margin-top: 14px; line-height: 1.5; }
  .authfoot { font-size: 13px; margin-top: 18px; }
}

/* ---------- account / settings ---------- */
.acct { display: grid; grid-template-columns: 200px 1fr; gap: 44px; align-items: start; margin-top: 30px; }
.acct-nav { position: sticky; top: 122px; display: flex; flex-direction: column; gap: 2px; }
.acct-nav a { font-size: 14px; color: var(--ink-2); padding: 8px 12px; border-radius: 8px; cursor: pointer; }
.acct-nav a.active { background: var(--panel-2); color: var(--ink); font-weight: 600; }
.acct-nav a:hover { color: var(--ink); }
.acct-main { max-width: 640px; }
.acct-sec { border: 1px solid var(--line); border-radius: 14px; padding: 22px 24px; margin-bottom: 20px; scroll-margin-top: 100px; }
.acct-sec h2 { font-size: 17px; letter-spacing: -0.02em; }
.acct-sec .secsub { color: var(--ink-3); font-size: 13px; margin-top: 4px; margin-bottom: 6px; }
/* No rules between rows: the label/control pairing already reads as a row, and a
   hairline every 50px turned a short settings list into a ledger. */
.setrow { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 13px 0; }
.setrow.top { border-top: none; }
/* profile photo: preview + its two buttons */
.avedit { display: flex; align-items: center; gap: 12px; }
.avedit-img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; flex: 0 0 auto;
  border: 1.5px solid color-mix(in srgb, var(--brand) 62%, transparent); background: var(--panel); }
.avedit-btns { display: flex; gap: 8px; }
.avedit .btn-sm { padding: 7px 13px; font-size: 13.5px; }
.avedit-rm { color: var(--ink-3); }
.setrow .lab b { font-size: 14.5px; font-weight: 600; }
.setrow .lab p { color: var(--ink-3); font-size: 13px; margin-top: 3px; max-width: 46ch; line-height: 1.45; }
.setrow input { width: 240px; box-sizing: border-box; font-family: var(--sans); font-size: 15px; line-height: 1.4; padding: 10px 13px; border: 1px solid var(--line-2); border-radius: 10px; color: var(--ink); background: var(--white); outline: none; transition: border-color .15s; }
.setrow input:focus { border-color: var(--ink); }
.switch { width: 44px; height: 26px; border-radius: 999px; background: var(--line-2); position: relative; cursor: pointer; flex: 0 0 auto; transition: background .18s; border: none; padding: 0; }
.switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: transform .18s; box-shadow: 0 1px 2px rgba(0,0,0,0.25); }
.switch.on { background: var(--action); }
.switch.on::after { transform: translateX(18px); }
.avatarrow { display: flex; align-items: center; gap: 16px; margin-bottom: 4px; }
.avatarrow img { width: 60px; height: 60px; border-radius: 50%; object-fit: cover; border: 1px solid var(--line); }
.cardline { display: flex; align-items: center; gap: 12px; font-family: var(--sans); font-size: 14px; color: var(--ink-2); }
.cardline .brand-dot { width: 34px; height: 22px; border-radius: 4px; background: var(--ink); }
/* mobile: the fixed 200px side-nav + 240px input force the two-column grid ~621px
   wide (overflows the phone). Collapse to one column, turn the side-nav into a
   horizontal tab strip, and let the setting inputs fill the row. */
@media (max-width: 720px) {
  /* minmax(0,...) not 1fr: a plain 1fr floors at the column's min-content width,
     and the settings rows min out around 456px, which pushed the whole page wider
     than the phone and made every screen scroll sideways. */
  .acct { grid-template-columns: minmax(0, 1fr); gap: 20px; margin-top: 22px; }
  .acct-nav { position: static; top: auto; flex-direction: row; flex-wrap: nowrap;
    gap: 2px; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none;
    justify-content: flex-start; /* left-aligned, first tab in line with the page gutter */
    /* bleed by the page's real gutter (--gutter, set on .dashwrap). --pad is 34px
       here while the dashboard wrap pads 22px, so it used to overhang by 12px. */
    margin: 0 calc(-1 * var(--gutter, 22px)); padding: 0 var(--gutter, 22px) 2px; }
  .acct-nav::-webkit-scrollbar { display: none; }
  /* tighter pills so all five tabs fit on one line without scrolling */
  .acct-nav a { white-space: nowrap; flex: 0 0 auto; font-size: 12px; padding: 6px 6px; }
  .acct-nav a:first-child { margin-left: -6px; } /* pill padding aligns the label to the gutter */
  .acct-main { max-width: none; }
  /* land jumped-to sections just below the sticky nav+tabs (~102px) with a little
     breathing room, instead of flush against the bar */
  .acct-sec { padding: 20px; scroll-margin-top: 120px; }
  /* smaller section descriptions: the medium ones fit one line, the longest two */
  .acct-sec .secsub { font-size: 11.5px; }
  .setrow { flex-wrap: wrap; gap: 12px 16px; } /* more room when a control (e.g. Update) wraps below its label */
  /* flex-basis 0 + min-width 0, not basis:auto. With basis:auto the label refuses to
     shrink below its min-content, so a two-line description ("When someone funds
     through your link...") pushed its toggle onto a row of its own while a one-line
     one ("New Markets and occasional updates.") kept its toggle inline. The label now
     takes the leftover space and wraps, and the control always stays on the row. */
  .setrow .lab { flex: 1 1 0; min-width: 0; }
  /* inputs still get their own line: basis 100% wraps regardless of the rule above */
  .setrow input { width: 100%; min-width: 0; flex: 1 1 100%; }
  /* Profile header row keeps "View profile" on the right (like Sign out) and lets
     the subtitle wrap beside it, instead of dropping the button to its own line */
  #profile > .setrow.top { flex-wrap: nowrap; align-items: flex-start; gap: 12px; }
  #profile > .setrow.top .lab { flex: 1 1 auto; min-width: 0; }
  /* "Profile" and its button share the first line; the description then runs the full
     width underneath rather than being squeezed into a narrow column beside the
     button. Grid, because the heading and the description are both inside .lab and
     only one of them belongs on the button's line: display:contents dissolves .lab so
     its h2 and .secsub become items of this grid and can be placed independently.
     align-self (not the parent's align-items) because the row carries an inline
     style="align-items:flex-start" that a stylesheet rule cannot beat. */
  #profile > .setrow.top:has(#viewProfile) {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 12px;
  }
  #profile > .setrow.top:has(#viewProfile) > .lab { display: contents; }
  #profile > .setrow.top:has(#viewProfile) > .lab > h2 { grid-area: 1 / 1; align-self: center; }
  #profile > .setrow.top:has(#viewProfile) > #viewProfile { grid-area: 1 / 2; align-self: center; }
  #profile > .setrow.top:has(#viewProfile) > .lab > .secsub { grid-area: 2 / 1 / 3 / -1; }
  #profile .avatarrow { justify-content: space-between; }
  /* View profile and Change Photo are identical in size and both pinned right.
     Scoped to the direct button: as a descendant selector this also hit Upload and
     Remove inside the photo row, forcing two 132px buttons beside a 56px avatar
     (348px) into a nowrap row that could not fit the phone. */
  #profile > .setrow.top > .btn,
  #profile .avatarrow > .btn { flex: 0 0 auto; width: 132px; height: 38px; padding: 0 12px; justify-content: center; font-size: 14px; box-sizing: border-box; }
  /* photo row: avatar + buttons drop below the label rather than fighting it for width */
  #profile > .setrow.top:has(.avedit) { flex-wrap: wrap; }
  .avedit { flex: 1 1 100%; min-width: 0; }
  .avedit-btns { flex: 1 1 auto; min-width: 0; }
  .avedit .btn-sm { flex: 0 1 auto; min-width: 0; }
  /* toggle + button rows keep the control beside the label, not stretched full-width */
  .setrow .switch, .setrow .btn { flex: 0 0 auto; }
}

/* post-signup welcome banner on the backer home */
.welcomebar { margin-bottom: 22px; border: 1px solid var(--line); background: var(--panel-2); border-radius: 12px; }
.welcomebar .wb-in { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; padding: 14px 16px; font-size: 14.5px; color: var(--ink-2); line-height: 1.5; }
.welcomebar .wb-in b { color: var(--ink); font-weight: 600; }
.welcomebar .wb-in a { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; }
.welcomebar .wb-x { flex: 0 0 auto; border: 0; background: none; color: var(--ink-3); font-size: 20px; line-height: 1; cursor: pointer; padding: 0 2px; }
.welcomebar .wb-x:hover { color: var(--ink); }

/* signup: handle field with @ prefix + availability hint */
.handlewrap { position: relative; }
.handlewrap .hat { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: var(--ink-3); font-size: 15px; pointer-events: none; }
.handlewrap input { padding-left: 27px !important; }
.hint.hint-ok { color: var(--action); }
.hint.hint-bad { color: var(--ink-2); }

/* @handle links to a public backer profile, wherever a backer is named */
.backer-link { color: inherit; text-decoration: none; }
.backer-link:hover { text-decoration: underline; text-underline-offset: 2px; }

/* ---- public backer profile (/u/:handle) ---- */
/* grid so the bio can span its own row (full width on mobile) instead of being
   squeezed into the narrow id column between the avatar and the action button */
.prof-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; column-gap: 22px; align-items: start;
  grid-template-areas: "av id action" "av bio action"; }
.prof-av { grid-area: av; width: 88px; height: 88px; border-radius: 50%; object-fit: cover; border: 1px solid var(--line); flex: 0 0 auto; }
/* name / badge / handle laid out with flex order: desktop keeps the badge
   inline to the right of the name (name+badge on one line, handle below);
   mobile reorders to name / handle / badge (see the 560px block). */
.prof-id { grid-area: id; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; column-gap: 10px; }
.prof-actions { grid-area: action; }
.prof-name { order: 1; font-size: clamp(24px, 2.6vw, 30px); letter-spacing: -0.03em; }
.prof-handle { order: 3; flex-basis: 100%; margin-top: 4px; font-size: 15px; color: var(--ink-3); }
.prof-bio { grid-area: bio; margin-top: 12px; font-size: 15px; color: var(--ink-2); line-height: 1.5; max-width: 54ch; }
.prof-actions { flex: 0 0 auto; }
.prof-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 30px; }
.prof-stat { border: 1px solid var(--line); border-radius: 14px; padding: 18px 20px; }
.prof-stat .ps-num { font-size: 22px; letter-spacing: -0.02em; color: var(--ink); }
.prof-stat .ps-lab { font-size: 12.5px; color: var(--ink-3); margin-top: 5px; }
.prof-sec { margin-top: 38px; }
.prof-sec-h { font-size: 13px; font-weight: 600; letter-spacing: 0.02em; color: var(--ink-2); margin-bottom: 14px; }
.prof-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.prof-empty { border: 1px dashed var(--line-2); border-radius: 14px; padding: 30px 22px; text-align: center; color: var(--ink-3); font-size: 14px; }
.prof-private { max-width: 460px; margin: 40px auto 20px; text-align: center; }
.prof-private .prof-lock { width: 54px; height: 54px; margin: 0 auto 18px; border-radius: 14px; border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; color: var(--ink-2); }
.prof-private .prof-lock svg { width: 24px; height: 24px; }
.prof-private h1 { font-size: 22px; letter-spacing: -0.02em; }
.prof-private p { margin: 12px 0 22px; color: var(--ink-2); font-size: 15px; line-height: 1.5; }
@media (max-width: 560px) {
  /* Header stays a single row: avatar | name/handle/badge | Share.
     The id block flexes (min-width:0) so Share keeps its spot on the right. */
  /* bio drops to its own full-width row below the avatar/name/action row */
  .prof-head { column-gap: 14px; grid-template-areas: "av id action" "bio bio bio"; }
  .prof-av { width: 56px; height: 56px; }
  .prof-bio { max-width: none; }
  /* Type tuned to the platform's mobile scale (dashboard titles ~15.5px,
     meta ~12.5px), rather than the larger desktop sizes. */
  /* stack name / handle / badge on their own lines (badge below the handle) */
  .prof-name { order: 1; flex-basis: 100%; font-size: 17px; letter-spacing: -0.02em; }
  .prof-handle { order: 2; margin-top: 2px; font-size: 13px; }
  .prof-badges { order: 3; margin-top: 8px; }
  .prof-bio { margin-top: 10px; font-size: 13.5px; }
  .prof-actions .btn { padding: 8px 15px; font-size: 13.5px; }
  /* All three KPIs on one row, sized down to fit a phone. */
  .prof-stats { grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 22px; }
  .prof-stat { min-width: 0; padding: 12px 10px; border-radius: 12px; }
  .prof-stat .ps-num { font-size: 16px; }
  /* keep the label on one line ("Markets backed" was wrapping) */
  .prof-stat .ps-lab { font-size: 9.5px; margin-top: 4px; white-space: nowrap; letter-spacing: -0.01em; }
  .prof-sec { margin-top: 30px; }
  /* Two-up photo tiles so a single backed card stays a sensible size instead
     of blowing up to a full-width square. */
  .prof-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .prof-grid .reltitle { font-size: 14px; }
  .prof-grid .relstat { font-size: 11px; }
}

/* ---------- search + empty ---------- */
.searchbar { position: relative; display: inline-flex; align-items: center; }
.searchbar input { font-family: var(--sans); font-size: 14px; padding: 8px 12px 8px 32px; border: 1px solid var(--line-2); border-radius: 9px; outline: none; width: 210px; background: var(--white); transition: border-color .15s; }
.searchbar input:focus { border-color: var(--ink); }
.searchbar svg { position: absolute; left: 11px; width: 15px; height: 15px; color: var(--ink-3); pointer-events: none; }
.empty { text-align: center; padding: 56px 20px; color: var(--ink-3); border: 1px dashed var(--line-2); border-radius: 14px; }
/* Slim mobile CTA that stands in for the sidebar "Start your own" card. Declared
   hidden here (before the phone breakpoint) so the media query below can flip it on;
   desktop keeps the sidebar version. */
.startcta-m { display: none; align-items: center; justify-content: space-between; gap: 14px;
  margin: 16px 0 4px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px;
  background: var(--white); color: var(--ink); transition: border-color .15s, box-shadow .15s; }
.startcta-m:hover { border-color: var(--line-2); box-shadow: 0 6px 20px -14px rgba(0,0,0,0.32); }
.startcta-m-txt { display: flex; flex-direction: column; gap: 1px; font-size: 12.5px; color: var(--ink-3); line-height: 1.35; min-width: 0; text-wrap: pretty; }
.startcta-m-txt b { font-size: 14.5px; color: var(--ink); font-weight: 600; letter-spacing: -0.01em; }
.startcta-m-btn { display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto;
  padding: 9px 15px; border-radius: 9px; background: var(--ink); color: #fff;
  font-family: var(--sans); font-weight: 600; font-size: 13.5px; letter-spacing: -0.01em; }
.startcta-m-btn svg { width: 14px; height: 14px; }

/* On a phone the "All Markets" heading + search + sort do not fit on one row; wrap the
   tools under the heading and let the search field flex instead of its fixed 210px width,
   which was pushing the sort control off the right edge (horizontal scroll). */
@media (max-width: 560px) {
  .sechead { flex-wrap: wrap; row-gap: 16px; }
  .sechead > div { width: 100%; }
  .searchbar { flex: 1 1 auto; min-width: 0; }
  .searchbar input { width: 100%; box-sizing: border-box; }
  .sechead .select { flex: 0 0 auto; }
  /* On a narrow phone the featured card turns portrait, so the 468px min-height
     (fine for the wide desktop hero) leaves a towering photo band. Shrink it and
     drop the dense Funded/Rate/Backers grid, which lives on the market page,
     so the highlight reads as a slightly-larger browse card, not a full screen.
     The #feat id keeps this ahead of the later max-width:980 `.feat` min-height. */
  #feat .feat { min-height: 380px; }
  #feat .feat .fstats { display: none; }
  /* Promote "Start your own" out of the bottom-stranded sidebar into a slim CTA
     right under the featured card; hide the sidebar copy so it is not shown twice. */
  .startcta-m { display: flex; }
  .rail .startcard { display: none; }
}
.empty h3 { font-size: 18px; color: var(--ink); letter-spacing: -0.02em; }
.empty p { margin-top: 8px; font-size: 14.5px; }

/* ---------- faq ---------- */
.faq { max-width: 760px; margin: 8px 0 0; }
.faqitem { border-top: 1px solid var(--line); }
.faqitem summary { list-style: none; cursor: pointer; padding: 20px 0; display: flex; justify-content: space-between; align-items: center; gap: 16px; font-size: 17px; letter-spacing: -0.02em; color: var(--ink); }
.faqitem summary::-webkit-details-marker { display: none; }
.faqitem summary .fq-car { color: var(--brand); transition: transform .18s; flex: 0 0 auto; font-size: 20px; line-height: 1; }
.faqitem[open] summary .fq-car { transform: rotate(45deg); }
.faqitem .fa { color: var(--ink-2); font-size: 15px; line-height: 1.65; padding: 0 0 22px; max-width: 66ch; }
.faqitem .fa a { color: var(--ink); border-bottom: 1px solid var(--line-2); }

/* ---------- ledger ---------- */
.ltable-wrap { overflow-x: auto; margin-top: 26px; }
/* fixed layout so the table fits the standard 688px content column (same
   width as every other page). The Market column takes the remaining
   space; a rare over-long title truncates with an ellipsis (full name on
   hover) rather than forcing the table wider than the page. */
.ltable { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 640px; table-layout: fixed; }
.ltable th { text-align: right; font-size: 11px; letter-spacing: 0.01em; color: var(--ink-3); font-weight: 500; padding: 0 16px 12px; border-bottom: 1px solid var(--line); }
.ltable th:first-child { text-align: left; }
.ltable th:nth-child(2), .ltable td:nth-child(2) { width: 84px; }
.ltable th:nth-child(3), .ltable td:nth-child(3) { width: 78px; }
.ltable th:nth-child(4), .ltable td:nth-child(4) { width: 96px; }
.ltable th:nth-child(5), .ltable td:nth-child(5) { width: 80px; }
/* Category is a text column: left-align it (header + cells) so it reads
   under its title. Numeric columns stay right-aligned. */
.ltable th:nth-child(2), .ltable td:nth-child(2) { text-align: left; }
.ltable td { padding: 14px 16px; border-bottom: 1px solid var(--line); text-align: right; }
.ltable td:first-child { text-align: left; }
.ltable td.num { font-family: var(--sans); font-variant-numeric: tabular-nums; }
.ltable tr:hover td { background: var(--panel-2); }
.ltable .lt-name { display: flex; align-items: center; gap: 11px; min-width: 0; }
.ltable .lt-name img { width: 34px; height: 34px; border-radius: 7px; object-fit: cover; flex: 0 0 auto; }
.ltable .lt-name a { color: var(--ink); font-weight: 500; letter-spacing: -0.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ltable .lt-name a:hover { text-decoration: underline; }

/* mobile: the 5-column ledger table cannot fit a phone, so stack each row into a
   card (image + title header, then labeled metric rows) instead of a sideways
   scroll. Labels come from each cell's data-label, set in ledger.html. */
@media (max-width: 560px) {
  .ltable-wrap { overflow-x: visible; margin-top: 20px; }
  .ltable { min-width: 0; display: block; font-size: 14px; }
  .ltable thead { display: none; }
  .ltable tbody { display: block; }
  .ltable tr { display: block; border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; margin-bottom: 12px; }
  .ltable tr:hover td { background: none; }
  .ltable td { display: flex; justify-content: space-between; align-items: center; gap: 12px; width: auto !important; padding: 6px 0; border: 0; text-align: right; }
  .ltable td:first-child { display: block; padding: 0 0 12px; margin-bottom: 6px; border-bottom: 1px solid var(--line); }
  .ltable td:empty { display: none; }
  .ltable td::before { content: attr(data-label); color: var(--ink-3); font-size: 12px; font-weight: 500; letter-spacing: 0.01em; text-align: left; }
  .ltable td:first-child::before { content: none; }
  .ltable .lt-name a { white-space: normal; }
  .ltable .lt-name img { width: 40px; height: 40px; }
}

/* ---------- contact ---------- */
.contact-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; margin-top: 30px; }
.contact-card { border: 1px solid var(--line); border-radius: 14px; padding: 24px; }
.contact-card h3 { font-size: 16px; letter-spacing: -0.02em; }
.contact-card p { color: var(--ink-2); font-size: 14px; margin-top: 8px; line-height: 1.55; }
.contact-card a.cl { display: inline-block; margin-top: 12px; color: var(--brand); border-bottom: 1px solid color-mix(in srgb, var(--brand) 42%, transparent); font-size: 14px; }
.contact-card a.cl:hover { border-bottom-color: var(--brand); }
/* Phones: one card per row. auto-fit/minmax(220px) held two columns down to ~460px,
   which left Press stranded as a half-width orphan on a third row. */
@media (max-width: 720px) {
  .contact-grid { grid-template-columns: 1fr; }
}

/* ---------- legal / policy pages ---------- */
.legal { max-width: 1000px; margin: 0 auto; padding: 48px var(--pad, 24px) 24px; }
.lg-eyebrow { font-size: 12px; font-weight: 600; letter-spacing: 0.01em; color: var(--ink-3); }
.legal-head { max-width: 720px; }
.legal-head h1 { font-size: clamp(30px, 4vw, 44px); letter-spacing: -0.03em; margin-top: 12px; }
.legal-head .updated { color: var(--ink-3); font-family: var(--sans); font-size: 13px; margin-top: 16px; }
.legal-head .intro { color: var(--ink-2); font-size: 16px; line-height: 1.62; margin-top: 18px; }
.legal-body { display: grid; grid-template-columns: 220px 1fr; gap: 52px; margin-top: 44px; align-items: start; }
.legal-toc { position: sticky; top: 84px; }
.legal-toc h4 { font-size: 11px; letter-spacing: 0.1em; color: var(--ink-3); margin-bottom: 12px; }
.legal-toc a { display: block; font-size: 13.5px; color: var(--ink-2); padding: 5px 0; line-height: 1.35; transition: color .15s; }
.legal-toc a:hover { color: var(--ink); }
.legal-article { max-width: 680px; }
.legal-article section { margin-bottom: 38px; scroll-margin-top: 84px; }
.legal-article h2 { font-size: 20px; letter-spacing: -0.02em; margin-bottom: 14px; }
.legal-article h3 { font-size: 15.5px; margin: 22px 0 8px; }
.legal-article p { color: var(--ink-2); font-size: 15.5px; line-height: 1.66; margin-bottom: 12px; }
.legal-article ul { margin: 10px 0 14px; padding-left: 20px; }
.legal-article li { color: var(--ink-2); font-size: 15.5px; line-height: 1.6; margin-bottom: 7px; }
.legal-article strong { color: var(--ink); font-weight: 600; }
.legal-article a { color: var(--ink); border-bottom: 1px solid var(--line-2); }
.legal-article a:hover { border-color: var(--ink); }
.legal-note { border: 1px solid var(--line); background: var(--panel-2); border-radius: 12px; padding: 15px 18px; font-size: 14px; line-height: 1.55; color: var(--ink-2); margin: 6px 0 26px; }
@media (max-width: 860px) { .legal-body { grid-template-columns: 1fr; gap: 20px; } .legal-toc { position: static; } .legal-toc { display: none; } }

/* Collapsible "On this page" jump menu (trialing on /legal/transparency). On desktop it
   renders as the plain sticky sidebar label; on mobile it becomes a tap-to-open menu so
   long policy pages get section navigation instead of an endless scroll. */
.legal-jump > summary { list-style: none; font-size: 11px; letter-spacing: 0.1em; color: var(--ink-3); font-weight: 600; margin-bottom: 12px; cursor: default; }
.legal-jump > summary::-webkit-details-marker { display: none; }
.legal-jump > summary::marker { content: ''; }
@media (max-width: 860px) {
  .legal-toc.legal-jump { display: block; margin-bottom: 8px; border: 1px solid var(--line); border-radius: 12px; background: var(--white); overflow: hidden; }
  .legal-jump > summary { display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 14px 16px; margin: 0; font-size: 14px; letter-spacing: 0; color: var(--ink); cursor: pointer; }
  .legal-jump > summary::after { content: ''; flex: none; width: 8px; height: 8px; margin-right: 2px;
    border-right: 2px solid var(--ink-3); border-bottom: 2px solid var(--ink-3); transform: rotate(45deg); transition: transform .2s; }
  .legal-jump[open] > summary::after { transform: rotate(-135deg); }
  .legal-jump .legal-toc-links { padding: 4px 16px 12px; border-top: 1px solid var(--line); }
  .legal-jump .legal-toc-links a { padding: 9px 0; font-size: 14px; }
}
@media (max-width: 820px) {
  .sfoot .sf-grid { grid-template-columns: 1fr 1fr; gap: 30px 24px; }
  .sfoot .sf-brand-col { grid-column: 1 / -1; }
  .sfoot .sf-base { flex-direction: column; align-items: flex-start; gap: 8px; }
}
/* phone: keep two compact columns (the ≤820 rule already gives 2-col with the brand
   full-width). A single-column stack made the footer a long scroll for no reason, so
   here we just tighten the spacing. */
@media (max-width: 560px) {
  /* single stacked column, Scale-style: small uppercase headings + larger prominent
     links, generous room between section groups */
  .sfoot .sf-grid { grid-template-columns: 1fr; gap: 40px; padding: 40px 0 28px; }
  .sfoot .sf-col h4 { margin-bottom: 15px; }
  /* links match the desktop nav items: 14px, gray (--ink-2), regular weight */
  .sfoot .sf-col a { font-size: 14px; font-weight: 400; color: var(--ink-2); margin-bottom: 9px; }
  /* keep the copyright line on one line on phones (down to ~375px wide) */
  .sfoot .sf-base span { font-size: 11px; letter-spacing: -0.01em; }
}

/* ---------- compact market cards (Polymarket/Kalshi density) ---------- */
.badge.cat { color: var(--ink-2); border: 1px solid var(--line-2); background: var(--white); letter-spacing: 0.01em; font-size: 10px; padding: 2px 8px; }
.fcard { display: flex; flex-direction: column; gap: 9px; background: var(--white); border: 1px solid var(--line); border-radius: 10px; padding: 12px 13px 13px; transition: border-color .18s, transform .18s, box-shadow .18s; }
.fcard:hover { border-color: var(--line-2); transform: translateY(-2px); box-shadow: 0 12px 28px -22px rgba(0,0,0,0.28); }
.fcard .chead { display: flex; gap: 10px; align-items: flex-start; }
.cimg { width: 44px; height: 44px; border-radius: 8px; object-fit: cover; flex: 0 0 auto; }
.fcard .ctitle { min-width: 0; }
.fcard .ctitle .badge { display: inline-block; margin-bottom: 5px; }
.fcard h3 { font-size: 14px; letter-spacing: -0.01em; line-height: 1.28; min-height: 2.56em;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.fpriceRow { display: flex; align-items: baseline; gap: 8px; }
.fprice { font-family: var(--sans); font-size: 15px; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.fprice small { font-size: 10px; color: var(--ink-3); font-family: var(--sans); letter-spacing: 0; }
.chg { font-family: var(--sans); font-size: 12px; }
/* Direction colour for every change indicator, rail included: the rail already emits
   .rchg up/.rchg down, it just had no colour rule and fell through to ink. */
.chg.up, .rchg.up { color: var(--up); } .chg.down, .rchg.down { color: var(--down); }
.fmeta { display: flex; gap: 7px; align-items: center; font-family: var(--sans); font-size: 11.5px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.fmeta .dot { color: var(--ink-3); }

/* ---------- market page layout: featured + grid + right rail ---------- */
.mkt { display: grid; grid-template-columns: minmax(0,1fr) 320px; gap: 30px; align-items: start; padding: 6px 0 48px; }
.mkt-main { min-width: 0; }
.sechead { display: flex; align-items: center; justify-content: space-between; margin: 30px 0 15px; }
.sechead h2 { font-size: 19px; letter-spacing: -0.02em; }
.sechead a { font-size: 13.5px; color: var(--ink-2); }
.sechead a:hover { color: var(--ink); }
.mgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(216px, 1fr)); gap: 13px; }

/* featured (large) card */
/* Full-bleed hero: photo fills the card, content sits over a right-side gradient
   scrim in white, the hero-scale version of the browse .kcard treatment. */
.feat { position: relative; display: block; min-height: 468px; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: var(--panel); transition: box-shadow .18s, transform .18s; }
.feat:hover { transform: translateY(-2px); box-shadow: 0 22px 46px -28px rgba(0,0,0,0.42); }
.fbg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.feat:hover .fbg { transform: scale(1.035); }
.fscrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,10,11,0) 30%, rgba(10,10,11,0.5) 62%, rgba(10,10,11,0.9) 100%); }
.feat .fbody { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 28px 30px; color: #fff; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; max-width: 640px; }
.fcat { font-size: 11px; font-weight: 600; letter-spacing: 0.08em; color: rgba(255,255,255,0.85); }
.feat h2 { font-size: clamp(22px, 2.4vw, 29px); letter-spacing: -0.03em; line-height: 1.12; color: #fff; text-shadow: 0 1px 12px rgba(0,0,0,0.4); }
.bigprice { font-family: var(--sans); font-size: 30px; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; color: #fff; }
.bigprice small { font-size: 13px; color: rgba(255,255,255,0.72); font-family: var(--sans); }
.sparkwrap { position: relative; display: block; margin-top: 2px; }
.sparkdot { position: absolute; right: 0; width: 7px; height: 7px; border-radius: 50%; background: var(--ink); transform: translate(-1px, -50%); box-shadow: 0 0 0 3px var(--white); }
.feat .prog { width: 100%; max-width: 340px; height: 6px; background: rgba(255,255,255,0.28); box-shadow: none; margin-top: 2px; }
.feat .prog > i { background: #fff; }
.fgoal { margin-top: 2px; font-size: 13.5px; color: rgba(255,255,255,0.82); font-family: var(--sans); }
.fgoal b { color: #fff; }
.fstats { display: flex; gap: 30px; margin-top: 14px; }
.fstats .k { color: rgba(255,255,255,0.68); }
.fstats .v { font-family: var(--sans); font-size: 16px; margin-top: 4px; font-variant-numeric: tabular-nums; color: #fff; }
.feat .btn { align-self: flex-start; margin-top: 4px; }
.feat .btn-primary { background: #fff; color: var(--black); }
.feat .btn-primary:hover { background: rgba(255,255,255,0.88); }

/* right rail lists */
.rail { display: flex; flex-direction: column; gap: 16px; position: sticky; top: 122px; }
.railcard { border: 1px solid var(--line); border-radius: 12px; background: var(--white); overflow: hidden; }
.railcard h4 { font-size: 12px; letter-spacing: 0; color: var(--ink-3); padding: 13px 16px 11px; font-weight: 500; margin: 0; }
.railrow { display: flex; align-items: center; gap: 11px; padding: 10px 16px; border-top: 1px solid var(--line); transition: background .15s; }
.railrow:hover { background: var(--panel-2); }
/* same rounded-square treatment the cause cards use for their icon (.mc-ic) */
.rthumb { width: 34px; height: 34px; border-radius: 8px; object-fit: cover; flex: 0 0 auto; border: 1px solid var(--line); background: var(--panel); }
.rmid { min-width: 0; flex: 1; }
.rname { font-size: 13.5px; letter-spacing: -0.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rsub { font-family: var(--sans); font-size: 11.5px; color: var(--ink-3); margin-top: 2px; }
.rchg { font-family: var(--sans); font-size: 12.5px; flex: 0 0 auto; }

/* ---------- market detail page ---------- */
.back { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; color: var(--ink-2); padding-top: 22px; }
.back:hover { color: var(--ink); }
/* Kickstarter's shape: title, then a big photo with the funding card beside it, and only
   then the column system. Measured off a live KS project, the photo's left edge aligns
   with the TOC column rather than the story column, so it overhangs the text by ~230px.
   Grid areas do that here: `head` and `hero` span the tracker + story columns, the rail
   runs down all three rows.

   168 + 556 + 340 + 2x32 = 1128, exactly the content width of the existing 1240 wrap. So
   the story column is 556px (~74 characters) and the photo is 756 x 425 at 16:9, with no
   container change and no misalignment with the nav above. */
.detail {
  display: grid;
  grid-template-columns: minmax(0,1fr) 350px;
  grid-template-areas:
    "head rail"
    "hero rail"
    "main rail";
  column-gap: 32px;
  align-items: start;
  padding: 16px 0 56px;
}
.dtop { grid-area: head; min-width: 0; }
.detail > .dhero { grid-area: hero; }
.detail > .dtrack { grid-area: track; }
.detail > .dmain { grid-area: main; }
.detail > .fundstack { grid-area: rail; }
.dmain { min-width: 0; }
.dhead { display: flex; gap: 16px; align-items: flex-start; }
.dimg { width: 74px; height: 74px; border-radius: 12px; object-fit: cover; flex: 0 0 auto; }
.dhead h1 { font-size: clamp(23px, 3vw, 33px); letter-spacing: -0.03em; line-height: 1.1; text-wrap: balance; }
.dhead .dsub { color: var(--ink-3); font-size: 13px; margin-top: 7px; font-family: var(--sans); }
/* large lead photo on the Market detail (Kickstarter-style) */
.dhero { position: relative; margin-top: 20px; border-radius: 16px; overflow: hidden; border: 1px solid var(--line); background: var(--panel); aspect-ratio: 16 / 9; }
.dhero-track { display: flex; height: 100%; transition: transform .62s cubic-bezier(.33,0,.2,1); }
.dhero-track img { width: 100%; height: 100%; flex: 0 0 100%; object-fit: cover; display: block; }
/* single-photo Markets have no .dhero-track wrapper transition to worry about; both cases
   render the img the same size */
.dhero > img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* carousel controls: circular arrows that fade in on hover, and a dot strip bottom-left */
/* Both arrows grouped in the bottom-right corner, GoFundMe's spec measured off their page:
   32x32 circles, 16px icon, solid rgba(0,0,0,.55), no border, and always visible (not a
   hover reveal). next flush to the corner, prev one button-width to its left. */
.dhero-nav { position: absolute; bottom: 14px; width: 32px; height: 32px; border-radius: 50%; border: 0; background: rgba(10,10,11,0.55); color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; transition: background .15s; }
.dhero-nav:hover { background: rgba(10,10,11,0.72); }
.dhero-nav.next { right: 14px; }
.dhero-nav.prev { right: 54px; }
.dhero-nav svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.dhero-dots { position: absolute; left: 15px; bottom: 15px; display: flex; gap: 6px; }
.dhero-dot { width: 7px; height: 7px; border: 0; border-radius: 999px; background: rgba(255,255,255,0.55); cursor: pointer; padding: 0; box-shadow: 0 1px 2px rgba(0,0,0,0.3); transition: width .2s, background .2s; }
.dhero-dot.on { width: 18px; background: #fff; }
.idxlabel { font-size: 11px; letter-spacing: 0.1em; color: var(--ink-3); margin-top: 22px; }
.dprice { display: flex; align-items: baseline; gap: 12px; margin-top: 6px; }
.idxnote { margin-top: 10px; font-size: 13.5px; color: var(--ink-2); line-height: 1.5; max-width: 62ch; text-wrap: pretty; }
.clarify { margin-top: 14px; border: 1px solid var(--line); background: var(--panel-2); border-radius: 12px; padding: 13px 16px; font-size: 13px; color: var(--ink-2); line-height: 1.55; max-width: 66ch; }
.clarify b { color: var(--ink); }
.dprice .v { font-family: var(--sans); font-size: 34px; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.dprice .v small { font-size: 14px; color: var(--ink-3); font-family: var(--sans); }
.dchart { margin-top: 16px; border: 1px solid var(--line); border-radius: 12px; padding: 16px 18px 12px; background: var(--white); }
.chartplot { position: relative; height: 176px; margin-right: 46px; cursor: crosshair; }
.chartplot svg { width: 100%; height: 100%; display: block; }
.chartdot { position: absolute; right: 0; width: 7px; height: 7px; border-radius: 50%; background: var(--ink); transform: translate(50%, -50%); box-shadow: 0 0 0 3px rgba(10,10,11,0.08); }
/* Hover tracing: a crosshair, a dot on the line, and a tooltip, all driven off chartSeries.
   Hidden until .tracing; the static end-dot hides while tracing so there is only one dot. */
.chartcross { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--line-2); transform: translateX(-0.5px); opacity: 0; pointer-events: none; }
.chartcdot { position: absolute; width: 9px; height: 9px; border-radius: 50%; background: var(--ink); border: 2px solid #fff; transform: translate(-50%,-50%); opacity: 0; pointer-events: none; box-shadow: 0 1px 3px rgba(0,0,0,0.25); }
.charttip { position: absolute; padding: 5px 9px; background: var(--brand); color: #fff; border-radius: 8px; white-space: nowrap; opacity: 0; pointer-events: none; display: flex; flex-direction: column; align-items: center; line-height: 1.25; box-shadow: 0 8px 22px -10px rgba(0,0,0,0.45); }
.charttip b { font-size: 12.5px; font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.charttip span { font-size: 10px; color: rgba(255,255,255,0.62); margin-top: 1px; }
.chartplot.tracing .chartcross, .chartplot.tracing .chartcdot, .chartplot.tracing .charttip { opacity: 1; }
.chartplot.tracing .chartdot { opacity: 0; }
.charty { position: absolute; left: 100%; top: 0; bottom: 0; width: 46px; pointer-events: none; }
.charty span { position: absolute; left: 9px; transform: translateY(-50%); font-family: var(--sans); font-size: 11px; color: var(--ink-3); font-variant-numeric: tabular-nums; white-space: nowrap; }
/* Labels positioned absolutely at their series fraction (not flex-distributed), so each
   sits directly under the point it names and lines up with the hover crosshair. */
.chartx { position: relative; height: 15px; margin: 9px 46px 0 0; }
.chartx span { position: absolute; top: 0; font-family: var(--sans); font-size: 11px; color: var(--ink-3); white-space: nowrap; }
/* separate rounded cards, matching the dashboard KPI cards (.dashstats) */
.dstats { display: grid; grid-template-columns: repeat(4,1fr); gap: 12px; margin-top: 16px; }
.dstats.dstats-3 { grid-template-columns: repeat(3,1fr); }
.dstats .s { background: var(--white); border: 1px solid var(--line); border-radius: 12px; padding: 16px 18px; }
.dstats .k { color: var(--ink-3); }
.dstats .val { font-family: var(--sans); font-size: 18px; margin-top: 6px; font-variant-numeric: tabular-nums; }
.dsec { margin-top: 32px; }
.dsec h3 { font-size: 16px; letter-spacing: -0.02em; margin-bottom: 12px; }
.dsec p { color: var(--ink-2); font-size: 15px; line-height: 1.55; max-width: 64ch; text-wrap: pretty; }
/* hero pages (organizations, about, clippers): heading, intro and sections span the full page width like the cards */
.pagenarrow.org .pagehead h1, .pagenarrow.org .pagehead .intro, .pagenarrow.org .pagehead .sub, .pagenarrow.org .dsec p,
.pagenarrow.about .pagehead h1, .pagenarrow.about .pagehead .intro, .pagenarrow.about .pagehead .sub, .pagenarrow.about .dsec p,
.pagenarrow.clip .pagehead h1, .pagenarrow.clip .pagehead .intro, .pagenarrow.clip .pagehead .sub { max-width: none; }
.pagenarrow.org .startsteps { max-width: none; margin-left: 0; margin-right: 0; }
.dprogress .bar { height: 8px; border-radius: 999px; background: var(--line); overflow: hidden; box-shadow: inset 0 1px 2px rgba(10,10,11,0.07); }
.dprogress .bar i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(180deg, #2C2C2E 0%, var(--black) 62%); transition: width .5s cubic-bezier(.4,0,.2,1); }
.dprogress .lab { display: flex; justify-content: space-between; margin-top: 9px; font-family: var(--sans); font-size: 12.5px; color: var(--ink-2); }
.cliprail { display: flex; gap: 13px; overflow-x: auto; padding-bottom: 8px; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; }
.cliprail::-webkit-scrollbar { height: 6px; }
.cliprail::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 3px; }
.cliprail::-webkit-scrollbar-track { background: transparent; }
.clipcard { flex: 0 0 156px; scroll-snap-align: start; }
.clipthumb { position: relative; aspect-ratio: 9 / 16; border-radius: 13px; overflow: hidden; background: var(--panel); border: 1px solid var(--line); }
.clipthumb img, .clipthumb video { width: 100%; height: 100%; object-fit: cover; display: block; }
.clipthumb .clipvid { background: var(--panel); }
/* While a clip plays, fade the poster chrome (scrim, pill, view-count, big play button) and
   make it non-interactive, so it never sits over the video swallowing clicks. */
.clipcard.playing .clipplay,
.clipcard.playing .grad,
.clipcard.playing .clippill,
.clipcard.playing .clipviews { opacity: 0; pointer-events: none; }
.clipthumb .grad, .clipthumb .clippill, .clipthumb .clipviews, .clipplay { transition: opacity .18s; }

/* Custom control bar: play/pause, scrub, fullscreen. Shown only once a clip is activated. */
.clipctrl { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; gap: 8px; padding: 9px 10px; opacity: 0; pointer-events: none; transition: opacity .18s; background: linear-gradient(to top, rgba(0,0,0,0.55), rgba(0,0,0,0)); }
.clipcard.playing .clipctrl { opacity: 1; pointer-events: auto; }
.cc-btn { flex: 0 0 auto; width: 22px; height: 22px; padding: 0; border: 0; background: none; color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.cc-btn svg { width: 16px; height: 16px; fill: currentColor; filter: drop-shadow(0 1px 2px rgba(0,0,0,0.5)); }
.cc-play .i-pause { display: none; }
.clipcard.is-playing .cc-play .i-play { display: none; }
.clipcard.is-playing .cc-play .i-pause { display: block; }
.cc-track { flex: 1; height: 3px; border-radius: 2px; background: rgba(255,255,255,0.35); position: relative; cursor: pointer; }
.cc-track::before { content: ""; position: absolute; left: 0; right: 0; top: -7px; height: 17px; }  /* taller hit target */
.cc-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: #fff; border-radius: 2px; }
.clipthumb .grad { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0.30) 0%, rgba(0,0,0,0) 32%, rgba(0,0,0,0) 54%, rgba(0,0,0,0.58) 100%); }
.clippill { position: absolute; top: 8px; left: 8px; font-family: var(--sans); font-size: 10px; letter-spacing: 0.01em; color: #fff; background: rgba(10,10,11,0.5); backdrop-filter: blur(6px); padding: 3px 8px; border-radius: 999px; }
.clipplay { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 40px; height: 40px; border: 0; border-radius: 50%; background: rgba(255,255,255,0.94); display: flex; align-items: center; justify-content: center; color: var(--ink); padding: 0; cursor: pointer; transition: transform .15s, opacity .18s; }
/* SVG triangle centers reliably where the ▶ glyph did not; nudged 1px right for the optical
   center of a triangle in a circle. */
.clipplay svg { width: 16px; height: 16px; fill: currentColor; margin-left: 1px; }
.clipcard:hover .clipplay { transform: translate(-50%,-50%) scale(1.08); }
.clipviews { position: absolute; bottom: 9px; left: 10px; color: #fff; font-family: var(--sans); font-size: 13px; font-variant-numeric: tabular-nums; text-shadow: 0 1px 4px rgba(0,0,0,0.5); }
.clipmeta { margin-top: 10px; }
.clipmeta .h { font-size: 12.5px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.clipmeta .s { font-size: 11.5px; color: var(--ink-3); font-family: var(--sans); margin-top: 3px; display: flex; gap: 8px; align-items: center; }
.clipmeta .up { color: var(--up); }
.lbhead { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.lbhead h3 { margin-bottom: 0; }
.lbtabs { display: flex; gap: 2px; flex: 0 0 auto; }
.lbtabs button { font-size: 12px; color: var(--ink-3); background: none; border: none; padding: 5px 10px; border-radius: 7px; cursor: pointer; transition: all .12s; }
.lbtabs button.active { background: var(--panel-2); color: var(--ink); }
.lbtabs button:hover { color: var(--ink); }
.lb { border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
/* loading and empty states for the leaderboard, which now waits on a fetch */
.lbnote { padding: 20px 16px; color: var(--ink-3); font-size: 14px; }
.lbrow { display: flex; align-items: center; gap: 13px; padding: 13px 16px; border-top: 1px solid var(--line); transition: background .12s; }
.lbrow:first-child { border-top: none; }
.lbrow:hover { background: var(--panel-2); }
.lbrank { font-family: var(--sans); font-size: 13px; color: var(--ink-3); width: 20px; flex: 0 0 auto; text-align: center; font-variant-numeric: tabular-nums; }
/* Top three get a gold / silver / bronze medal disc; 4th on down stay plain grey numbers. */
.lbrank.medal { width: 22px; height: 22px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 600; color: #fff; text-shadow: 0 1px 1px rgba(0,0,0,0.28); box-shadow: inset 0 1px 1.5px rgba(255,255,255,0.45), inset 0 -1px 2px rgba(0,0,0,0.18), 0 1px 2px rgba(0,0,0,0.14); }
.lbrank.gold   { background: linear-gradient(180deg, #EBC65A 0%, #C39321 100%); }
.lbrank.silver { background: linear-gradient(180deg, #C3C8CF 0%, #969CA4 100%); }
.lbrank.bronze { background: linear-gradient(180deg, #CE9160 0%, #A5652F 100%); }
.lbav { width: 36px; height: 36px; flex: 0 0 auto; border-radius: 50%; object-fit: cover; border: 1px solid var(--line); background: var(--panel); }
.lbmid { flex: 1; min-width: 0; }
.lbn { font-size: 14px; display: flex; align-items: center; gap: 7px; min-width: 0; }
.lbn > span.who { font-weight: 500; letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lbbar { height: 4px; border-radius: 999px; background: var(--line); overflow: hidden; margin-top: 7px; box-shadow: inset 0 1px 1.5px rgba(10,10,11,0.06); }
.lbbar i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(180deg, #2C2C2E 0%, var(--ink) 62%); }
.lbamt { text-align: right; flex: 0 0 auto; }
.lba { font-family: var(--sans); font-size: 14px; font-variant-numeric: tabular-nums; }
.lba small { font-size: 11px; color: var(--ink-3); font-weight: 400; }
.lbsub { font-size: 12px; color: var(--ink-3); font-family: var(--sans); margin-top: 2px; font-variant-numeric: tabular-nums; }
.lbv { font-family: var(--sans); font-size: 11px; color: var(--ink-3); margin-top: 3px; }

/* fund panel */
/* Drop the card so its top lines up with the title, not the category pill above it
   (the pill + its gap to the h1 measures ~24px). */
.fundstack { position: sticky; top: 118px; max-height: calc(100vh - 132px); overflow-y: auto; display: flex; flex-direction: column; gap: 12px; }
.fundpanel { border: 1px solid var(--line); border-radius: 14px; background: var(--white); padding: 18px; display: flex; flex-direction: column; gap: 12px; box-shadow: 0 20px 44px -34px rgba(0,0,0,0.3); scroll-margin-top: 112px; }

/* Once the header's top edge meets the pin line, it is replaced by a compact bar fixed just
   under the nav + tabs, constrained to the left content column (dmain) via JS-set left/width.
   The big header snaps out (so its category pill disappears immediately and titles never
   double up); the bar's photo + title (.sb-left) scale from header size down to compact as
   you scroll, so it reads as the header compressing. Opaque background: content scrolls
   cleanly under it, nothing shows through. The actions hold the column's right edge. */
/* Each element interpolates between header size (p=0) and compact size (p=1) via --p, so the
   proportions always match the real header (big photo + big title + small sub) instead of a
   uniform scale that would blow the subtitle up. The bar's height follows the content, so it
   never squeezes. sb-meta / sb-actions carry a --p offset so the title + icons start exactly
   where the header's title + icons were (no pop as the category pill collapses). */
.spotbar { position: fixed; top: 110px; z-index: 36; display: flex; align-items: flex-start; gap: calc(12px + 4px * (1 - var(--p, 0))); background: var(--bg); border-bottom: 1px solid var(--line); padding: calc(3px + 6px * var(--p, 0)) 0; opacity: 0; pointer-events: none; }
.spotbar.show { opacity: 1; pointer-events: auto; }
.spotbar .sb-left { display: flex; align-items: flex-start; gap: calc(12px + 4px * (1 - var(--p, 0))); flex: 1; min-width: 0; }
.spotbar .sb-img { width: calc(34px + 40px * (1 - var(--p, 0))); height: calc(34px + 40px * (1 - var(--p, 0))); border-radius: calc(8px + 4px * (1 - var(--p, 0))); object-fit: cover; flex: 0 0 auto; }
.spotbar .sb-meta { flex: 1; min-width: 0; display: flex; flex-direction: column; margin-top: calc(21px * (1 - var(--p, 0))); }
.spotbar .sb-title { font-size: calc(16px + 17px * (1 - var(--p, 0))); letter-spacing: -0.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.12; }
.spotbar .sb-sub { font-size: calc(12px + 1px * (1 - var(--p, 0))); color: var(--ink-3); font-family: var(--sans); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.3; margin-top: calc(2px + 5px * (1 - var(--p, 0))); }
.spotbar .sb-actions { display: flex; gap: 8px; flex: 0 0 auto; margin-top: calc(21px * (1 - var(--p, 0))); }
.fp-price { display: flex; align-items: baseline; justify-content: space-between; }
.fp-price .v { font-family: var(--sans); font-size: 22px; font-variant-numeric: tabular-nums; }
.fp-lab { font-size: 12px; letter-spacing: 0.01em; color: var(--ink-3); }
.amtinput { position: relative; }
.amtinput input { width: 100%; font-family: var(--sans); font-size: 22px; padding: 12px 14px 12px 32px; border: 1px solid var(--line-2); border-radius: 10px; outline: none; box-sizing: border-box; }
.amtinput input:focus { border-color: var(--ink); }
.amtinput .cur { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); font-family: var(--sans); font-size: 20px; color: var(--ink-3); }
.tiers { display: flex; gap: 8px; }
.tier { flex: 1; text-align: center; font-family: var(--sans); font-size: 13px; padding: 8px 0; border: 1px solid var(--line); border-radius: 8px; cursor: pointer; transition: all .15s; }
.tier:hover, .tier.active { border-color: var(--ink); background: var(--panel-2); }
.buys { font-size: 13px; color: var(--ink-2); text-align: center; }
.buys b { color: var(--ink); font-family: var(--sans); }
.vis { display: flex; gap: 8px; }
.visbtn { flex: 1; text-align: center; font-size: 13px; padding: 9px 0; border: 1px solid var(--line); border-radius: 8px; cursor: pointer; color: var(--ink-2); transition: all .15s; }
.visbtn.active { border-color: var(--ink); color: var(--ink); background: var(--panel-2); }
/* Consent. The full policies live at /legal/terms and /legal/refund-policy; the
   card carries only the agreement, and the refund term is already stated in the
   footnote under the button. */
.fp-agree { display: flex; gap: 9px; align-items: flex-start; font-size: 12.5px; line-height: 1.5; color: var(--ink-2); cursor: pointer; }
.fp-agree input { margin: 2px 0 0; flex: none; width: 15px; height: 15px; accent-color: var(--ink); cursor: pointer; }
.fp-agree a { color: var(--ink); text-decoration: underline; }
#consentWrap { display: flex; flex-direction: column; }
/* Statement-descriptor note on the funding confirmation. */
.fd-stmt { margin: 18px auto 0; max-width: 46ch; text-align: center; font-size: 12.5px; line-height: 1.6; color: var(--ink-3); }
.fd-stmt b { color: var(--ink-2); font-weight: 600; letter-spacing: 0.01em; }
.fd-stmt a { color: var(--ink-2); text-decoration: underline; }
/* Credit line in the funding panel. One line, footnote weight, sitting under the
   amount rather than beside the consent tick: the panel already ends in a
   checkbox and a button, and a second control there makes the last step before
   payment read as a form. */
.fp-credit { margin-top: 9px; font-size: 12.5px; line-height: 1.5; color: var(--ink-3); }
.fp-credit .fpc-on { color: var(--ink); font-weight: 600; }
.fp-credit .fpc-a { border: 0; background: none; padding: 0; font-family: var(--sans);
  font-size: 12.5px; font-weight: 600; color: var(--action); cursor: pointer;
  text-decoration: underline; text-underline-offset: 2px; }
.fp-credit .fpc-a:hover { opacity: .8; }
/* The applied amount is editable in place, so the line stays one line. Sized in
   ch by JS to hug its digits: a fixed-width box would leave a gap after "$5". */
/* A chip rather than an underline: it has to read as editable on sight, since
   nobody clicks a number that looks like text. Sized in ch by JS to hug its
   digits, so "$5" does not sit in a box built for "$250". */
.fp-credit .fpc-box { display: inline-flex; align-items: baseline; gap: 1px;
  padding: 1px 6px; margin: 0 1px; border: 1px solid var(--line-2);
  border-radius: 6px; background: var(--panel-2); }
.fp-credit #fpcN { border: 0; background: none; padding: 0; font: inherit;
  font-weight: 600; color: inherit; text-align: left; border-radius: 0;
  -webkit-appearance: none; }
.fp-credit #fpcN:focus { outline: none; }
.fp-credit .fpc-box:focus-within { border-color: var(--brand); }
.fpnote { font-size: 11.5px; color: var(--ink-3); line-height: 1.5; text-align: center; }

/* detail header actions + platform legend */
.dhead-body { flex: 1; min-width: 0; }
.dactions { display: flex; gap: 8px; flex: 0 0 auto; } /* icon tops sit at the title top (the pill above is gone, so no drop needed) */
.iconbtn { width: 38px; height: 38px; border: 1px solid var(--line); border-radius: 10px; background: var(--white); display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--ink-2); transition: all .15s; }
.iconbtn:hover { border-color: var(--ink); color: var(--ink); }
.iconbtn.on { border-color: var(--ink); color: var(--ink); background: var(--panel-2); }
.iconbtn svg { width: 17px; height: 17px; }
.iconbtn.on svg { fill: currentColor; }
.platshare { margin-top: 26px; }
.platshare-lab { font-size: 11px; letter-spacing: 0.1em; color: var(--ink-3); margin-bottom: 9px; }
.platbar { display: flex; gap: 2px; height: 10px; border-radius: 999px; overflow: hidden; }
.platbar .seg { display: block; height: 100%; border-radius: 2px; }
.platkeys { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 13px; }
.platkeys .pk { display: flex; align-items: center; gap: 7px; font-size: 13px; color: var(--ink-2); }
/* Keep TikTok / YouTube / Instagram on one line on phones instead of wrapping 2 + 1. */
@media (max-width: 560px) {
  .platkeys { flex-wrap: nowrap; gap: 10px; }
  .platkeys .pk { font-size: 12px; gap: 6px; }
  .platkeys .dot { width: 8px; height: 8px; }
}
.platkeys .dot { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; }
.platkeys b { color: var(--ink); font-family: var(--sans); font-variant-numeric: tabular-nums; }
.reach-aim { margin-top: 20px; display: flex; align-items: baseline; gap: 8px; font-size: 13px; color: var(--ink-2); }
.reach-aim .ra-lab { font-size: 11px; letter-spacing: 0.1em; color: var(--ink-3); }
.reach-aim b { color: var(--ink); font-family: var(--sans); }
.reach-tier1 { margin-top: 9px; font-size: 12.5px; line-height: 1.5; color: var(--ink-3); }

/* chart footer: volume + range */
.chartbar { display: flex; align-items: center; justify-content: space-between; margin-top: 12px; gap: 12px; }
.chartbar .vol { font-family: var(--sans); font-size: 12.5px; color: var(--ink-3); }
.chartbar .vol b { color: var(--ink-2); }
.rangechips { display: flex; gap: 2px; flex: 0 0 auto; }
.rangechips button { font-family: var(--sans); font-size: 12px; color: var(--ink-3); background: none; border: none; padding: 5px 10px; border-radius: 7px; cursor: pointer; transition: all .12s; }
.rangechips button.active { background: var(--panel-2); color: var(--ink); }
.rangechips button:hover { color: var(--ink); }

/* redesigned fund panel */
.fp-head { display: flex; align-items: center; gap: 11px; }
.fp-head img { width: 40px; height: 40px; border-radius: 9px; object-fit: cover; flex: 0 0 auto; }
.fp-t { font-size: 14px; letter-spacing: -0.01em; line-height: 1.25; }
.fp-s { font-size: 10.5px; color: var(--ink-3); font-family: var(--sans); letter-spacing: 0.01em; margin-top: 3px; }
.fp-amt { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.fp-amt-lab { font-size: 16px; color: var(--ink); font-weight: 500; }
.fp-amt-in { display: flex; align-items: baseline; justify-content: flex-end; color: var(--ink); }
.fp-amt-in.is-empty { color: var(--line-2); }
.fp-amt-in .cur { font-family: var(--sans); font-size: 26px; letter-spacing: -0.02em; color: inherit; }
.fp-amt-in input { width: 1ch; min-width: 1ch; max-width: 170px; text-align: left; font-family: var(--sans); font-size: 34px; letter-spacing: -0.03em; border: none; outline: none; padding: 0; margin: 0; color: var(--ink); background: none; font-variant-numeric: tabular-nums; }
.fp-amt-in input::placeholder { color: var(--line-2); }
.quickadd { display: flex; justify-content: flex-end; gap: 6px; }
.quickadd button { font-family: var(--sans); font-size: 12px; color: var(--ink-2); background: var(--white); border: 1px solid var(--line); border-radius: 999px; padding: 5px 12px; cursor: pointer; transition: all .15s; }
.quickadd button:hover { border-color: var(--ink); color: var(--ink); }
.viewsout { border-top: 1px solid var(--line); padding-top: 15px; }
.vo-main { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.vo-n { font-family: var(--sans); font-size: 26px; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; color: var(--ink); }
.vo-l { font-size: 15px; color: var(--ink); font-weight: 500; }
.vo-more { margin-top: 10px; }
.vo-more summary { list-style: none; cursor: pointer; font-size: 13px; color: var(--ink-3); display: flex; justify-content: space-between; align-items: center; }
.vo-more summary::-webkit-details-marker { display: none; }
.vo-more summary .car { color: var(--ink-3); transition: transform .15s; }
.vo-more[open] summary .car { transform: rotate(180deg); }
.vo-row { display: flex; justify-content: space-between; padding: 7px 0 0; font-size: 13px; color: var(--ink-2); }
.vo-row span:last-child { font-family: var(--sans); color: var(--ink); }
.btn.btn-primary:disabled { opacity: 0.38; cursor: not-allowed; }

/* copy toast */
.toast { position: fixed; bottom: 26px; left: 50%; transform: translateX(-50%) translateY(18px); background: var(--ink); color: #fff; font-size: 13px; padding: 10px 18px; border-radius: 999px; opacity: 0; pointer-events: none; transition: opacity .22s, transform .22s; z-index: 200; }
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
/* It is centred with left:50% + translateX(-50%), so with no width cap a long message
   grows equally in both directions and runs off BOTH edges, the left one first
   because that is where the box starts. Cap it to the viewport and let it wrap. */
.toast { max-width: calc(100vw - 32px); box-sizing: border-box; text-align: center; line-height: 1.4; }
/* Clear the fixed "Back This Market" bar on the market page instead of landing on
   top of it (both are position:fixed at the bottom, and the bar wins on z-index). */
@media (max-width: 860px) {
  body:has(.fund-sticky) .toast { bottom: calc(88px + env(safe-area-inset-bottom, 0px)); }
}

@media (max-width: 980px) {
  .grid { grid-template-columns: repeat(2, 1fr); }
  /* minmax(0,1fr), not 1fr: a plain 1fr track takes its min size from the item's
     min-content, and the rail's nowrap row titles blow that past the viewport
     (horizontal scroll on phones). minmax(0,...) lets the column shrink to fit. */
  .mkt { grid-template-columns: minmax(0, 1fr); }
  .rail { position: static; flex-direction: row; flex-wrap: wrap; }
  .railcard { flex: 1 1 260px; }
  .feat { min-height: 460px; }
  .detail { grid-template-columns: 1fr; }
  .fundstack { position: static; margin-top: 22px; max-height: none; overflow: visible; }
  .clips { grid-template-columns: repeat(3,1fr); }
  .dstats { grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 720px) {
  .navlinks { display: none; }
  .grid { grid-template-columns: 1fr; }
  .mgrid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
  /* Block (not flex column) so the cards clamp to the column width: a flex column
     stretches items but will not shrink them below their min-content, so the
     rail's nowrap titles would otherwise force the card wider than the phone and
     overflow. Block flow clamps each card, letting the titles truncate. Also
     resets the row-layout 260px flex-basis that would otherwise become a fixed
     card HEIGHT (padding out Start, clipping Trending). */
  .rail { display: block; }
  .rail .railcard { margin-bottom: 16px; }
  .rail .railcard:last-child { margin-bottom: 0; }
  /* Markets on phones: neither the featured hero nor the rail is hidden any more.
     Both are horizontal swipe rows now (the flagship carousel, then Trending /
     Biggest movers / Underfunded), styled together at the end of this file. */
  .mkt-main { display: flex; flex-direction: column; }
  .startcta-m { display: flex; order: 1; margin: 24px 0 0; }
  /* the sechead's 30px top margin cleared the (now hidden) featured card; trim it
     so the gap from the hero banner reads naturally instead of a big void */
  .sechead { margin-top: 0; }
  .toolbar { gap: 12px; }
  .search input { width: 160px; }
  .clips { grid-template-columns: repeat(2,1fr); }
  /* Share and Save are reachable on landing, not only from the sticky mini-header
     that appears on scroll. They sit on their own right-aligned row under the title
     rather than inline beside it: two 38px buttons plus the gap is 84px out of a
     ~322px header, which on top of the 56px thumbnail left the title about 158px and
     running to three or four lines. The sticky header's copies still delegate to
     these, so both remain live. */
  /* Share and Save ride on the eyebrow's line. The eyebrow ("CONFLICT & WAR") is
     short, so the right of that row is already free: this costs no extra row and no
     title width, unlike putting them inline with the title or on a row of their own.
     Grid rather than flex because the eyebrow and the title live inside .dhead-body
     while the actions are its sibling; display:contents dissolves that wrapper so all
     three can be placed against the same columns. The title spans 2/-1 so it still
     runs under the icons rather than stopping short of them. */
  .dhead { display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
    column-gap: 12px; row-gap: 0; align-items: start; }
  .dhead-body { display: contents; }
  .dhead .dhead-ic { grid-column: 1; grid-row: 1 / span 2; }
  /* The eyebrow's baseline sits on the icons' visible bottom edge. Padding rather
     than align-self:end because the buttons are borderless 32px boxes around a 16px
     glyph, so their box bottom is 8px below what you actually see; aligning the boxes
     would leave the text visibly low. This offsets the text to the glyph instead. */
  /* offset = (button height - glyph height) / 2, so the eyebrow's baseline lands on
     the icon's visible bottom rather than on its invisible 44px box */
  .dhead .deyebrow { grid-column: 2; grid-row: 1; align-self: start; padding-top: 15px; }
  .dhead .dactions { display: flex; grid-column: 3; grid-row: 1; width: auto; margin: 0; }
  /* Pulled up towards the eyebrow. Row 1's height is set by the 32px icon buttons,
     not by the eyebrow text, so without this the title sat a full icon-height below
     the line it belongs to. */
  .dhead h1 { grid-column: 2 / -1; grid-row: 2; margin-top: -8px; }
  .dhead .dstarter { grid-column: 2 / -1; grid-row: 3; }
  /* 44px is the tap-target floor; at 32 these were hard to hit. The box is invisible
     here (borderless), so the extra size costs nothing visually, it just makes the
     hit area honest. The row it sets is why .deyebrow below needs its offset. */
  .dhead .iconbtn { width: 44px; height: 44px; }
  .dhead .iconbtn svg { width: 19px; height: 19px; }
  /* Subcategory + state line dropped on phones: the eyebrow above already names the
     category, and the sticky mini-header carries the same line once you scroll. */
  .dhead .dsub { display: none; }

  /* Chart footer: the 1D/1W/1M/ALL chips read as controls for the chart above them,
     so they sit directly under it with the funded/contributions/live caption below.
     Both take a full row; sharing one left the caption ~180px and split it mid-phrase. */
  .dlead-bottom { flex-wrap: wrap; row-gap: 8px; }
  .dlead-bottom .dlead-tf { order: 1; flex: 1 1 100%; }
  .dlead-bottom .dlead-vol { order: 2; flex: 1 1 100%; }

  /* Seenfold wordmark on the chart, the way Kalshi marks theirs. It was hidden here
     because it is absolutely positioned at the top right of .dlead and the stat row
     runs the full width on a phone, so the two printed over each other. Reserving a
     column for it lets the stat wrap under itself instead, which is also how Kalshi's
     stacked legend leaves its mark room. */
  .lead-wm { display: block; top: 34px; right: 0; font-size: 15px; }
  /* Reserving this column is what lets the mark sit anywhere in the header band
     without the stat row running under it; the stat wraps beneath itself instead. */
  .dlead-top { padding-right: 76px; }
  /* (the title-to-figure gap is set at the end of this file: a later .dlead rule
     re-declares margin-top and would override it here) */
}

/* ---------- category nav tabs (market types, as navigation) ---------- */
.acct-page { padding-bottom: 56px; }
.cattabs { border-bottom: 1px solid var(--line); position: sticky; top: 52px; z-index: 39; background: var(--white); }
.cattabs-in { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 48px; }
/* the tab-links column stretches to the full row height so the active underline stays
   anchored to the bottom hairline even though the row is tall enough to host a full-size
   Log In button (see .cattabs-cta .login below) */
.cattabs-links { display: flex; gap: 26px; overflow-x: auto; align-self: stretch; align-items: stretch; scrollbar-width: none; -ms-overflow-style: none; }
/* The tabs fit on desktop; overflow-x:auto still popped a spurious horizontal
   scrollbar stub after "Health" on any sub-pixel overflow. Hide the bar at every
   width (scroll still works by swipe/trackpad if the row ever truly overflows). */
.cattabs-links::-webkit-scrollbar { display: none; }
.cattabs-login { font-size: 14.5px; color: var(--ink); white-space: nowrap; }
.cattabs-links a { font-size: 15.5px; color: var(--ink-2); padding: 9px 1px; white-space: nowrap; border-bottom: 2px solid transparent; margin-bottom: -1px; transition: color .15s; display: flex; align-items: center; }
.cattabs-links a:hover { color: var(--ink); }
.cattabs-links a.active { color: var(--ink); font-weight: 700; border-bottom-color: transparent; }
/* the account cluster (Log In / avatar) is relocated into this tab row. Give the Log In
   button the exact marketing/homepage treatment (14px, weight 400, 1.15 line-height,
   8px radius, 11px 16px padding) so the two buttons are identical; the taller row above
   provides the clearance from the bottom hairline */
.cattabs-cta .login { font-size: 14px; font-weight: 400; line-height: 1.15; border-radius: 8px; padding: 11px 16px; }

/* ---------- Kalshi-style market cards ---------- */
.kgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.kgrid-rel { grid-template-columns: repeat(3, minmax(0,1fr)); }
@media (max-width: 1100px) { .kgrid-rel { grid-template-columns: repeat(2, minmax(0,1fr)); } }
/* .kgrid.kgrid-rel (two classes) beats the later `.kgrid { 1fr }` mobile rule, so the
   "More to back" tiles stay a 2-up grid on phones instead of full-width single cards. */
@media (max-width: 620px) { .kgrid.kgrid-rel { grid-template-columns: repeat(2, minmax(0,1fr)); } }
/* Full-bleed photo cards: the image is the card, meta sits over a bottom gradient
   (same treatment as the "More to back" .relcard tiles), with the funding row kept. */
.kcard { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; transition: transform .18s, box-shadow .18s; }
.kcard:hover { transform: translateY(-2px); box-shadow: 0 20px 40px -26px rgba(0,0,0,0.42); }
.kbg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.kcard:hover .kbg { transform: scale(1.045); }
.kgrad { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,10,11,0.05) 0%, rgba(10,10,11,0) 26%, rgba(10,10,11,0.55) 62%, rgba(10,10,11,0.92) 100%); }
.kover { position: absolute; left: 0; right: 0; bottom: 0; padding: 16px 17px 15px; color: #fff; display: flex; flex-direction: column; gap: 7px; }

/* save-from-card bookmark button (browse grids, featured, related tiles) */
/* Bare icon, no chrome. The 30px box stays for the tap target even though nothing
   is drawn around it. */
.ksave { position: absolute; top: 12px; right: 12px; width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 0; background: none; color: var(--ink-3); cursor: pointer; transition: color .15s; z-index: 3; }
.ksave svg { width: 16px; height: 16px; }
.ksave:hover { color: var(--ink); }
.ksave.on { color: var(--ink); }
.ksave.on svg path { fill: currentColor; }
/* Related tiles sit the icon straight on a photo, where the white pill was carrying
   legibility rather than decoration. Icon-only needs a shadow to survive a light
   photo, the same trick .relcat and .reltitle already use. */
.relcard .ksave, .kcard .ksave, .feat .ksave { color: #fff; filter: drop-shadow(0 1px 5px rgba(0,0,0,0.6)); }
.kcard .ksave:hover, .feat .ksave:hover { color: #fff; opacity: 0.82; }
.kicon { width: 34px; height: 34px; border-radius: 8px; object-fit: cover; flex: 0 0 auto; }
.kcat { font-size: 10.5px; font-weight: 600; letter-spacing: 0.08em; color: rgba(255,255,255,0.85); }
.ktitle { font-size: 19px; letter-spacing: -0.02em; line-height: 1.22; margin: 1px 0 2px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-shadow: 0 1px 10px rgba(0,0,0,0.45); }
.kreach { display: flex; align-items: baseline; gap: 9px; }
.kbig { font-family: var(--sans); font-size: 20px; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; color: #fff; }
.kbig small { font-size: 11px; color: rgba(255,255,255,0.72); font-family: var(--sans); }
.kcard .prog { height: 5px; background: rgba(255,255,255,0.26); box-shadow: none; }
.kcard .prog > i { background: #fff; }
.kfoot { display: flex; justify-content: space-between; gap: 10px; font-family: var(--sans); font-size: 12px; color: rgba(255,255,255,0.82); font-variant-numeric: tabular-nums; }
.kfoot .kpct { color: #fff; font-weight: 600; }

/* ---------- category page: left sidebar + grid ---------- */
/* Single column: the subcategory rail moved into a dropdown next to Sort, so there
   is no aside any more. Left as a grid (rather than reverting to block) so the
   max-width:980 override below stays meaningful and .catmain keeps minmax(0,...). */
.catlayout { display: grid; grid-template-columns: minmax(0,1fr); gap: 34px; align-items: start; padding: 22px 0 56px; }
/* Filter + sort sit together as one control pair on the right of the heading.
   The triggers are a fixed width on purpose: a dropdown that shrinks to its selected
   label changes size when you pick a different option ("Trending" vs "Most funded"),
   which was enough to flip .cathead between one row and two. Pinning the width makes
   the layout depend only on the viewport, never on what is selected, and stops the
   chevron sliding around as the label changes. */
.cattools { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.cattools .vsel { flex: 0 0 auto; }
.cattools .vsel-trigger { min-width: 152px; justify-content: space-between; }

@media (max-width: 720px) {
  /* Below the heading as a full-width pair, always. Half-wrapping (heading and one
     control on a line, the other beneath) was the inconsistent state. */
  .cattools { width: 100%; }
  .cattools .vsel { flex: 1 1 0; min-width: 0; }
  .cattools .vsel-trigger { min-width: 0; width: 100%; }
}
.catside { position: sticky; top: 122px; display: flex; flex-direction: column; gap: 2px; }
.catside a { font-size: 14px; color: var(--ink-2); padding: 8px 12px; border-radius: 8px; transition: background .12s, color .12s; }
.catside a:hover { background: var(--panel-2); color: var(--ink); }
.catside a.active { color: var(--ink); font-weight: 600; background: var(--panel); }
.catside .grouphd { font-size: 11px; letter-spacing: 0.1em; color: var(--ink-3); padding: 14px 12px 6px; }
.cathead { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 26px 0 8px; }
.cathead h1 { font-size: clamp(26px, 3.4vw, 38px); letter-spacing: -0.035em; }

@media (max-width: 980px) {
  .kgrid { grid-template-columns: 1fr; }
  .catlayout { grid-template-columns: 1fr; }
  .catside { position: static; flex-direction: row; flex-wrap: wrap; gap: 6px; }
  .catside .grouphd { width: 100%; padding-top: 8px; }
}

/* ---------- fund checkout ---------- */
.narrow { max-width: 720px; margin: 0 auto; }
/* only set vertical padding; the shorthand's 0 left/right used to wipe .wrap's
   --pad gutter, so on mobile the checkout ran edge-to-edge unlike every other page */
.ck { padding-top: 26px; padding-bottom: 60px; }
.ck h1 { font-size: clamp(23px,3vw,31px); letter-spacing: -0.03em; }
.cksum { display: flex; gap: 14px; align-items: center; border: 1px solid var(--line); border-radius: 12px; padding: 13px 15px; background: var(--white); margin: 18px 0; }
.cksum img { width: 54px; height: 54px; border-radius: 10px; object-fit: cover; flex: 0 0 auto; }
.cksum .t { font-weight: 600; letter-spacing: -0.01em; }
.cksum .s { font-size: 12.5px; color: var(--ink-3); font-family: var(--sans); margin-top: 3px; }
.ckbox { border: 1px solid var(--line); border-radius: 12px; padding: 18px 20px; background: var(--white); margin-bottom: 14px; }
.ckbox h3 { font-size: 12px; letter-spacing: 0.01em; color: var(--ink-3); margin-bottom: 14px; font-weight: 600; }
.orow { display: flex; justify-content: space-between; align-items: baseline; padding: 9px 0; border-top: 1px solid var(--line); }
.orow:first-of-type { border-top: none; padding-top: 0; }
.orow .l { color: var(--ink-2); font-size: 14.5px; }
.orow .r { font-family: var(--sans); font-size: 15px; font-variant-numeric: tabular-nums; }
.orow.total { border-top: 1px solid var(--line-2); margin-top: 4px; padding-top: 12px; }
.orow.total .l { color: var(--ink); font-weight: 600; }
.orow.total .r { font-size: 20px; }
.paybtns { display: flex; flex-direction: column; gap: 10px; }
.paybtn { display: flex; align-items: center; gap: 12px; border: 1px solid var(--line-2); border-radius: 10px; padding: 13px 15px; cursor: pointer; font-size: 15px; transition: border-color .15s, background .15s; }
.paybtn:hover { border-color: var(--ink-3); }
.paybtn.sel { border-color: var(--ink); background: var(--panel-2); }
.paybtn .rad { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--line-2); flex: 0 0 auto; }
.paybtn.sel .rad { border-color: var(--ink); box-shadow: inset 0 0 0 3px var(--white), inset 0 0 0 7px var(--ink); }
.paynote { font-size: 12px; color: var(--ink-3); text-align: center; margin-top: 14px; line-height: 1.5; }

/* ---------- confirmation ---------- */
.confirm { text-align: center; padding: 64px 0 96px; max-width: 500px; margin: 0 auto; }
/* The funded confirmation is the share card plus two actions and nothing else,
   so it gets a wider column than the text-led .confirm pages, whose 500px cap
   exists as a reading measure. */
.confirm.confirm-funded { max-width: 560px; padding-top: 52px; }
.tick { width: 42px; height: 42px; border-radius: 50%; background: var(--ink); color: var(--white); display: inline-flex; align-items: center; justify-content: center; font-size: 20px; margin-bottom: 22px; animation: pop .45s cubic-bezier(.2,.9,.3,1.2) both; }
/* Share-to-match offer on the funded screen. Sits between the card and the
   actions, because it is the reason to press Share rather than close the tab.
   Deliberately NOT on the card image: the PNG outlives the offer. */
/* Width is set inline from CARD_W so it tracks the rendered card exactly; the
   two sit directly above each other and any mismatch reads as a mistake. */
/* White on a hairline border, the same card treatment as .pcard / .pchart
   elsewhere on the platform. --panel-2 read as a grey inset panel here, which is
   not a surface the rest of the product uses. */
.matchbox { text-align: center; margin: 0 auto 18px; padding: 18px 16px 14px;
  border: 1px solid var(--line); border-radius: 16px; background: var(--white); }
/* Signed in, this panel holds only a button and one line of caption (the headline was
   removed as redundant), so its border, fill and padding drew a box inside a box
   directly beneath the card: four stacked panels down the page. With the chrome gone
   the button and its caption sit on the page and the stack reads as card, action,
   exit. The signed-out variant keeps the panel, where a headline, body and CTA really
   do group into one pitch. Detected by the CTA being first, which only happens when
   funded.html omits the headline. */
.matchbox:has(> .mb-cta:first-child) {
  /* 10px, not the panel's 18px: signed in this is just the Share button and the one
     under it is "Back to Markets", so they should sit as a pair of actions rather
     than as two separate blocks. */
  border: 0; background: none; padding: 0; margin-bottom: 10px;
}
.mb-head { display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 14px;
  font-weight: 600; letter-spacing: -0.015em; }
.mb-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--brand); flex: none;
  box-shadow: 0 0 0 3.5px color-mix(in srgb, var(--brand) 16%, transparent); }
/* Capped measure so the centred lines break evenly instead of one long line
   over one short one, which is what makes centred copy look accidental. */
/* The body now sits UNDER the CTA (headline, then the button, then the detail), so
   it needs the looser gap that used to sit above the button. */
.mb-body { margin: 12px auto 0; max-width: 34ch; font-size: 13px; line-height: 1.55;
  color: var(--ink-2); text-wrap: balance; }
.mb-body b { color: var(--ink); font-weight: 600; }
.mb-cta { margin-top: 13px; margin-bottom: 0; height: 46px; font-size: 14.5px; }
/* Signed in there is no headline above it, so the button is the panel's first child
   and its 13px top margin would double up with the panel's own padding. */
.mb-cta:first-child { margin-top: 0; }
@media (max-width: 560px) {
  .matchbox { padding: 15px 15px 13px; }
  .mb-head { font-size: 13.5px; }
  .mb-body { font-size: 12.5px; }
}

.cel-eyebrow { font-size: 12px; letter-spacing: 0.01em; color: var(--ink-3); }
.cel-views { font-family: var(--sans); font-size: clamp(56px, 13vw, 108px); letter-spacing: -0.045em; line-height: 0.95; margin-top: 14px; font-variant-numeric: tabular-nums; animation: pop .55s cubic-bezier(.2,.9,.3,1.3) both; animation-delay: .05s; }
.cel-lab { font-size: 15px; color: var(--ink-2); margin-top: 16px; }
.confirm h1 { font-size: clamp(20px,2.6vw,26px); letter-spacing: -0.03em; margin-top: 44px; text-wrap: balance; }
.confirm .lead2 { color: var(--ink-2); margin: 12px auto 0; max-width: 42ch; font-size: 15px; line-height: 1.62; text-wrap: balance; }
/* /started: widen the review copy to the same width as the steps card so the first line
   fills the column, but keep it centered like the rest of the confirmation */
.confirm:has(.startsteps) .lead2 { max-width: 452px; text-align: center; text-wrap: wrap; }
/* the primary CTA carries a shorter label on phones so both buttons fit side by side */
.cta-short { display: none; }
.cel-compare { margin-top: 24px; display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--ink-2); background: var(--panel-2); border: 1px solid var(--line); border-radius: 999px; padding: 9px 18px; }
.receipt { border: 1px solid var(--line); border-radius: 14px; padding: 8px 20px; margin: 44px auto 30px; max-width: 440px; text-align: left; background: var(--panel-2); }
.receipt .orow { padding: 13px 0; border-color: var(--line-2); }
.receipt-cap { display: none; }
.cta2 { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
/* the review-steps card sat too close to the CTAs on /started; give them room */
.startsteps + .cta2 { margin-top: 24px; }
/* phone: confirmation CTAs were wrapping to two ragged content-width pills of
   different sizes; stack them full-width so they read as deliberate. */
@media (max-width: 560px) {
  .cta2 { flex-direction: column; }
  .cta2 .btn { width: 100%; justify-content: center; }
  /* Full-width is for a STACK of CTAs, where equal widths read as deliberate. A lone
     button stretched edge-to-edge just looks like a banner (404, clippers), so size
     it to its label and centre it. */
  .cta2 > .btn:only-child { width: auto; align-self: center; padding: 14px 32px; }
  /* /started: keep the platform's generous confirmation spacing (a little scroll is fine),
     but place the two CTAs side by side. The primary uses a shorter label on phones so
     both fit on one line. */
  .confirm:has(.startsteps) .cta2 { flex-direction: row; gap: 10px; }
  .confirm:has(.startsteps) .cta2 .btn { flex: 1; width: auto; min-width: 0; padding: 13px 12px; }
  .confirm:has(.startsteps) .cta-full { display: none; }
  .confirm:has(.startsteps) .cta-short { display: inline; }
  /* /funded: same treatment, CTAs side by side with a shorter share label on phones */
  /* The share card IS this page, so let it run closer to the screen edges instead of
     sitting inside the site's 34px gutter. The card, the match box and the CTAs all
     size off the same column, so narrowing the gutter grows all three together and
     they stay aligned. */
  .wrap:has(> .confirm-funded) { padding-left: 18px; padding-right: 18px; }
  .confirm-funded .cta2 { flex-direction: row; gap: 10px; }
  .confirm-funded .cta2 .btn { flex: 1; width: auto; min-width: 0; padding: 13px 12px; }
  .confirm-funded .cta-full { display: none; }
  .confirm-funded .cta-short { display: inline; }
  /* the celebration scale read oversized/childish on phones; bring the number, labels,
     and receipt down to a refined size (.confirm.confirm-funded to beat the base rules) */
  .confirm.confirm-funded .tick { width: 36px; height: 36px; font-size: 17px; margin-bottom: 14px; }
  .confirm.confirm-funded .cel-eyebrow { font-size: 11.5px; }
  .confirm.confirm-funded .cel-views { font-size: clamp(36px, 11vw, 46px); margin-top: 10px; }
  .confirm.confirm-funded .cel-lab { font-size: 13.5px; margin-top: 10px; }
  .confirm.confirm-funded .cel-compare { font-size: 12.5px; padding: 8px 14px; margin-top: 16px; }
  .confirm.confirm-funded h1 { font-size: 19px; margin-top: 22px; }
  .confirm.confirm-funded .receipt { margin: 22px auto 24px; }
  .confirm.confirm-funded .receipt .orow { padding: 10px 0; }
  .confirm.confirm-funded .orow .l { font-size: 13.5px; }
  .confirm.confirm-funded .orow .r { font-size: 14px; }
}
@keyframes pop { from { opacity: 0; transform: scale(.86) translateY(10px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .tick, .cel-views { animation: none; } }

/* funded confirmation: a clean, spacious layout. Hero number, what you funded,
   the receipt, and the actions, all on one screen with room to breathe. Scoped to
   .confirm-funded so the other shared .confirm pages (login, started) are unaffected. */
.confirm.confirm-funded { padding: 40px 0 44px; }
.confirm.confirm-funded .tick { width: 40px; height: 40px; font-size: 19px; margin-bottom: 18px; }
.confirm.confirm-funded .cel-views { font-size: clamp(52px, 8vw, 78px); margin-top: 12px; }
.confirm.confirm-funded .cel-lab { margin-top: 12px; }
.confirm.confirm-funded .cel-note { margin-top: 5px; font-size: 13.5px; color: var(--ink-3); }
.confirm.confirm-funded .cel-compare { margin-top: 18px; }
.confirm.confirm-funded h1 { margin-top: 28px; }
.confirm.confirm-funded .receipt { margin: 30px auto 26px; }
.confirm.confirm-funded .receipt .orow { padding: 12px 0; }

/* ---------- dashboard ---------- */
.dashstats { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; margin: 18px 0 28px; }
.dashstats .s { background: var(--white); border: 1px solid var(--line); border-radius: 12px; padding: 18px 20px; }
.dashstats .k { font-family: var(--sans); font-size: 12.5px; color: var(--ink-3); }
.dashstats .v { font-family: var(--sans); font-size: clamp(22px, 2.2vw, 27px); font-weight: 700; letter-spacing: -0.02em; margin-top: 5px; font-variant-numeric: tabular-nums; }
.drow { display: flex; gap: 15px; align-items: center; border: 1px solid var(--line); border-radius: 12px; padding: 15px 16px; margin-bottom: 11px; background: var(--white); transition: border-color .15s; }
.drow:hover { border-color: var(--line-2); }
.drow > img { width: 60px; height: 60px; border-radius: 10px; object-fit: cover; flex: 0 0 auto; }
.drow .mid { flex: 1; min-width: 0; }
.drow .mid h3 { font-size: 15.5px; letter-spacing: -0.02em; }
.drow .mid .dm { font-size: 12.5px; color: var(--ink-3); font-family: var(--sans); margin-top: 4px; }
.drow .mid .bar { height: 6px; border-radius: 999px; background: var(--line); overflow: hidden; margin-top: 9px; max-width: 360px; box-shadow: inset 0 1px 1.5px rgba(10,10,11,0.06); }
.drow .mid .bar i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(180deg, #2C2C2E 0%, var(--black) 62%); }
.drow .amt2 { text-align: right; font-family: var(--sans); flex: 0 0 auto; }
.drow .amt2 .big { font-size: 19px; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.drow .amt2 .big .of { color: var(--ink-3); font-weight: 400; font-size: 14px; }
.drow .amt2 .sub { font-size: 11.5px; color: var(--ink-3); margin-top: 3px; }

.drow > .ph60 { width: 60px; height: 60px; border-radius: 10px; background: var(--panel); flex: 0 0 auto; }
.substatus { font-size: 10.5px; font-weight: 600; letter-spacing: 0.01em; padding: 4px 9px; border-radius: 999px; white-space: nowrap; }
.substatus.review { background: #F6EED9; color: #8a6212; }
.substatus.live { background: var(--brand-soft); color: var(--action); }
.substatus.declined { background: #F7E7E3; color: var(--down); }
.subreason { font-size: 12.5px; color: var(--ink-2); margin-top: 8px; line-height: 1.45; max-width: 52ch; }
.subacts { display: flex; gap: 8px; margin-top: 11px; }
.subacts a { font-size: 12.5px; padding: 6px 12px; border: 1px solid var(--line); border-radius: 8px; color: var(--ink); transition: border-color .15s; }
.subacts a:hover { border-color: var(--ink); }
.drow .amt2 .viewlink { display: block; margin-top: 8px; font-size: 12.5px; color: var(--ink); }
.drow.declined { align-items: flex-start; }

/* account cluster in the nav: the avatar and its menu */
.navacct { display: inline-flex; align-items: center; gap: 12px; }
@media (max-width: 720px) {
  /* Three KPI cards on one line. They were shrunk so far (9px label, 18px figure)
     that the numbers stopped reading as the headline of the page; the figure is the
     point of the card, so give it real size and let the label be the quiet part. */
  .dashstats { grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 16px 0 24px; }
  .dashstats .s { padding: 15px 12px 16px; }
  /* not uppercased: "Total contributed" then runs to two ragged lines in a ~90px
     tile, and the figure below is what should be carrying the card anyway */
  .dashstats .k { font-size: 10.5px; letter-spacing: 0.02em; line-height: 1.3; }
  .dashstats .v { font-size: 25px; margin-top: 7px; letter-spacing: -0.03em; }
  /* funding row: thumb + title/meta/bar, then the views figure on a line below.
     It used to sit under a divider with 12px above and 11px below plus a 17px
     figure, which added roughly 50px of chrome per card and made these read as
     twice the height of the Watching rows for the same amount of information.
     Same layout, minus the rule and the padding, with the figure sized to match
     the meta line it sits under. */
  .drow { flex-wrap: wrap; gap: 12px; padding: 13px; margin-bottom: 9px; }
  .drow > img, .drow > .ph60 { width: 52px; height: 52px; }
  .drow .mid { flex: 1; min-width: 0; }
  .drow .mid h3 { font-size: 15px; }
  .drow .mid .bar { max-width: none; height: 5px; margin-top: 8px; }
  .drow .amt2 { text-align: left; }
  /* only the funded rows (with the big views figure) get the bottom stat line; the
     "Watching" rows keep their inline "Fund ->" link */
  .drow .amt2:has(.big) { flex-basis: 100%; border-top: 0; margin-top: 7px; padding-top: 0;
    display: flex; align-items: baseline; gap: 6px; }
  .drow .amt2 .big { font-size: 15px; }
  .drow .amt2 .big .of { font-size: 13px; }
  .drow .amt2 .sub { margin-top: 0; font-size: 11.5px; }
}

/* ============================================================
   Market funding mechanics (activity, goal-gradient, countdown,
   reward tiers, backer momentum, words of support)
   ============================================================ */

/* F6 - backer momentum + avatar wall */
.momentum { display: flex; align-items: center; gap: 14px; margin-top: 16px; padding: 13px 16px; background: var(--panel-2); border: 1px solid var(--line); border-radius: 12px; }
.bwall { display: flex; flex: 0 0 auto; }
.bwall img { width: 30px; height: 30px; border-radius: 50%; border: 2px solid var(--white); object-fit: cover; margin-left: -9px; background: var(--panel); }
.bwall img:first-child { margin-left: 0; }
.momtext { font-size: 13.5px; color: var(--ink-2); line-height: 1.45; }
.momtext b { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }

/* F3 - goal-gradient "closing" treatment */
.dprogress.closing .bar { box-shadow: inset 0 1px 2px rgba(14,120,80,0.14); }
.dprogress.closing .bar i { position: relative; overflow: hidden; background: linear-gradient(180deg, color-mix(in srgb, var(--up) 86%, white) 0%, var(--up) 55%, color-mix(in srgb, var(--up) 78%, black) 100%); box-shadow: 0 1px 7px color-mix(in srgb, var(--up) 38%, transparent); }
.dprogress.closing .bar i::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 22%, rgba(255,255,255,0.5) 50%, transparent 78%); transform: translateX(-100%); animation: barsheen 2.4s cubic-bezier(.4,0,.2,1) infinite; }
@keyframes barsheen { 0% { transform: translateX(-100%); } 62%, 100% { transform: translateX(100%); } }

.closingtag { display: inline-flex; align-items: center; gap: 6px; font-family: var(--sans); font-size: 11px; font-weight: 600; letter-spacing: 0.02em; color: var(--action); background: var(--brand-soft); border: 1px solid var(--brand-line); box-shadow: 0 1px 4px color-mix(in srgb, var(--brand) 13%, transparent); padding: 5px 11px 5px 9px; border-radius: 999px; margin-bottom: 12px; }
.closingtag svg { width: 10px; height: 10px; display: block; animation: closingbob 1.8s ease-in-out infinite; }
@keyframes closingbob { 0%, 100% { transform: translateY(0.5px); opacity: 0.82; } 50% { transform: translateY(-1px); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .dprogress.closing .bar i::after, .closingtag svg { animation: none; } .dprogress.closing .bar i::after { display: none; } }

/* F4 - funding countdown */
.cdrow { display: flex; align-items: center; gap: 10px; margin-top: 13px; }
.cdlab { font-size: 11px; letter-spacing: 0.01em; color: var(--ink-3); }
.cdown { font-family: var(--sans); font-size: 15px; font-variant-numeric: tabular-nums; color: var(--ink); letter-spacing: 0.01em; }

/* F5 - reward tiers (scoped to .rewardtiers so it never clobbers the shared
   .tier/.tiers pill styles used by the fund checkout page) */
.rewardtiers { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
/* Cleaner tier card. The dropped ≈ line becomes a proper little stat: the reach is the
   value the tier sells, so it's the one bold number; the amount reads as the price label
   above it, and the perk sits under a hairline as the extra you also get. Same card chrome
   as the rest of the platform's interactive surfaces. */
.rewardtiers .tier { display: flex; flex-direction: column; align-items: stretch; gap: 4px; text-align: left; width: 100%; background: var(--white); border: 1px solid var(--line); border-radius: 12px; padding: 16px; cursor: pointer; font-family: inherit; transition: border-color .15s, box-shadow .15s; }
.rewardtiers .tier:hover { border-color: var(--ink-3); }
.rewardtiers .tier.sel { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.tier-top { display: flex; align-items: center; gap: 8px; }
.tier-amt { font-family: var(--sans); font-size: 15px; font-weight: 500; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; color: var(--ink-3); }
.tier.sel .tier-amt { color: var(--ink); }
.tier-tag { display: inline-block; font-family: var(--sans); font-size: 10px; letter-spacing: 0.02em; color: var(--action); background: var(--brand-soft); border: 1px solid var(--brand-line); padding: 2px 8px; border-radius: 999px; }
/* Number on its own line, "times seen" on the line below, consistently across all
   tiers (inline wrapping split "times seen" differently per card). */
.tier-reach { font-family: var(--sans); color: var(--ink-2); font-variant-numeric: tabular-nums; display: flex; flex-direction: column; }
.tier-reach b { font-size: 21px; font-weight: 600; letter-spacing: -0.02em; color: var(--ink); line-height: 1.1; }
.tier-reach span { font-size: 13px; color: var(--ink-3); }
@media (max-width: 560px) { .rewardtiers { grid-template-columns: 1fr 1fr; gap: 10px; } }

/* F2 - recent funds activity feed */
.actfeed { display: flex; flex-direction: column; }
.actrow { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-top: 1px solid var(--line); }
.actrow:first-child { border-top: none; }
.actav { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; border: 1px solid var(--line); background: var(--panel); flex: 0 0 auto; }
.actmid { flex: 1; min-width: 0; }
.actn { font-size: 13.5px; color: var(--ink); }
.actn b { font-weight: 600; }
.actsub { font-size: 12px; color: var(--ink-3); font-family: var(--sans); margin-top: 2px; font-variant-numeric: tabular-nums; }
.actwhen { font-size: 11.5px; color: var(--ink-3); font-family: var(--sans); flex: 0 0 auto; white-space: nowrap; }
.actrow.you .actn b { color: var(--up); }

/* F8 - words of support */
.wos { display: flex; flex-direction: column; }
.wosrow { display: flex; gap: 12px; padding: 14px 0; border-top: 1px solid var(--line); }
.wosrow:first-child { border-top: none; }
.wosav { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; border: 1px solid var(--line); background: var(--panel); flex: 0 0 auto; }
.wosmid { flex: 1; min-width: 0; }
.wostop { display: flex; align-items: baseline; gap: 8px; }
.wosn { font-size: 13.5px; color: var(--ink); font-weight: 500; }
.woswhen { font-size: 11.5px; color: var(--ink-3); font-family: var(--sans); }
.wostext { font-size: 13px; color: var(--ink-2); line-height: 1.5; margin-top: 4px; overflow-wrap: anywhere; }
.wosamt { font-size: 11.5px; color: var(--ink-3); font-family: var(--sans); margin-top: 5px; font-variant-numeric: tabular-nums; }
.wosform { margin-top: 16px; border-top: 1px solid var(--line); padding-top: 16px; }
.wosform textarea { width: 100%; box-sizing: border-box; resize: vertical; min-height: 62px; max-height: 150px; font-family: var(--sans); font-size: 14px; line-height: 1.45; color: var(--ink); border: 1px solid var(--line); border-radius: 10px; padding: 11px 13px; background: var(--white); outline: none; transition: border-color .15s; }
.wosform textarea:focus { border-color: var(--ink); }
.wosform textarea::placeholder { color: var(--ink-3); }
.wosform-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 10px; }
.wosform-right { display: flex; align-items: center; gap: 12px; flex: 0 0 auto; }
.woscount { font-family: var(--sans); font-size: 12px; color: var(--ink-3); font-variant-numeric: tabular-nums; }

/* ============================================================
   Market detail: hierarchy, one column width, no boxes.

   Audited against GoFundMe and Kickstarter. The page read as "section stacked
   on section" for three measurable reasons, all fixed here:
     1. Section headings were 16px against 15px body (1.07:1). Both references
        run 1.75:1. That is a bolded sentence, not a heading, so the eye found
        no landmarks across 4,690px and read one continuous sheet.
     2. Every element was boxed. GoFundMe's main column has zero bordered
        containers; Kickstarter's story has none either. Borders here are now
        reserved for things that are genuinely objects (hero, clip thumbs, tier
        buttons, related cards, fund panel). Rows separate with a hairline.
     3. The main column carried five right edges: cards ran to the column edge
        while prose stopped 118-199px short on its own max-width caps, cutting a
        notch out of the right side every time text appeared.

   Scoped to .dmain throughout, because .dsec is shared with about.html and
   organizations.html and must not move.
   ============================================================ */

/* The scan layer: 33 / 26 / 15. Weight stays at the h1-h4 reset of 500. Only
   Market *titles* go to 600, and that lives in one rule at the top of this
   file: do not add weight here. */
/* scroll-margin clears the sticky chrome *and* the spotbar under it (nav 52 + tabs to
   ~101 + a ~56px bar), otherwise a tracker link lands with its heading behind the bar. */
.dmain .dsec { margin-top: 56px; scroll-margin-top: 178px; }
.dmain .dsec h3 { font-size: 21px; font-weight: 500; letter-spacing: -0.02em; line-height: 26px; margin-bottom: 10px; }
.dmain .lbhead { align-items: baseline; margin-bottom: 18px; }
.dmain .lbhead h3 { margin-bottom: 0; }
/* Short blocks get `balance` rather than `pretty`: these run to two lines and `pretty`
   still let them break with a single orphan word on the second line. `balance` evens
   the lines instead. Long-form body copy below keeps `pretty`. */
.dmain .dsec > .secnote { color: var(--ink-3); font-size: 13.5px; line-height: 1.5; margin: 0 0 18px; max-width: none; }
.dmain .dsec p b { color: var(--ink); font-weight: 500; }

/* One width, no exceptions. The column is already ~74 characters, so the old
   per-block caps have nothing left to do. */
.dmain .dsec p, .dmain .idxnote { max-width: none; }

/* Flush both edges. Applies to the multi-line body prose (.dbody) and the lead pitch
   (.dlead), so the lead reaches the same right edge as the paragraphs under it. NOT the
   one-line .secnote subtitles: a single justified line spreads into huge word-gaps, so
   those stay ragged. Justify on a 556px column opens gaps too, so it is paired with
   hyphenation; hyphenate-limit-chars keeps short words whole. Scoped to the market page;
   the shared about/org pages keep their left-aligned rag. */
.dmain .dsec p.dbody, .dmain .dsec p.dlead {
  text-align: justify;
  text-justify: inter-word;
  hyphens: auto;
  -webkit-hyphens: auto;
  hyphenate-limit-chars: 7 3 3;
}
/* The bolded figures are the sentence's point; never break one across a line with a hyphen
   ("20,833 peo-ple" reads badly). manual = only break where an explicit soft hyphen says. */
.dmain .dsec p b { hyphens: manual; -webkit-hyphens: manual; }

/* Platform body-prose standard: flush-column justification with hyphenation so multi-line
   paragraphs fill the width they are meant to instead of leaving a ragged right edge. Scope
   to genuinely multi-line prose (section bodies + page intros + the org note); one-line
   notes/labels/subtitles stay ragged, since a single justified line spreads into big gaps. */
.dsec p, .intro, .org .orgnote, .legal-note {
  text-align: justify;
  text-justify: inter-word;
  hyphens: auto;
  -webkit-hyphens: auto;
  hyphenate-limit-chars: 7 3 3;
}
.dsec p b { hyphens: manual; -webkit-hyphens: manual; }
/* Section notes follow the justified body-prose standard (flush column + hyphenation).
   Now that text-wrap:balance is gone they fill the width and hyphenation keeps the word
   gaps tight, so they read like the rest of the prose. */
.dsec .secnote { text-align: justify; text-justify: inter-word; hyphens: auto; -webkit-hyphens: auto; hyphenate-limit-chars: 7 3 3; }

/* Un-box the story column. */
.dmain .dchart { border: 0; border-radius: 0; padding: 0; background: none; margin-top: 10px; }
/* The chart plots the daily rate while the big number above it is the lifetime total.
   Two different facts sitting 20px apart, so each says which one it is. */
.chartlab { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-top: 18px; font-size: 12px; color: var(--ink-3); }
.chartlab b { color: var(--ink-2); font-weight: 500; font-variant-numeric: tabular-nums; }
.dmain .dstats { border-top: 1px solid var(--line); margin-top: 26px; padding-top: 18px; gap: 0; }
.dmain .dstats .s { background: none; border: 0; border-left: 1px solid var(--line); border-radius: 0; padding: 2px 0 2px 18px; }
.dmain .dstats .s:first-child { border-left: 0; padding-left: 0; }
.dmain .lb { border: 0; border-radius: 0; overflow: visible; }
.dmain .lbrow { padding-left: 0; padding-right: 0; }
.dmain .lbrow:hover { background: none; }

/* The pitch, opening the About section. It briefly sat above the photo as a hero lede,
   but GoFundMe puts nothing between the title and the image, so the words moved into the
   scrolling column and lead the story instead. Set above body size, because this is the
   sentence that explains the whole product. */
.dmain .dsec p.dlead { font-size: 18px; line-height: 1.5; color: var(--ink); margin-bottom: 16px; text-wrap: pretty; }

/* Open-ended Markets have no goal, so they get no progress bar. A bar reading
   61% next to the word "ongoing" told the reader to hurry toward a line that does
   not exist. */
.openbig { font-size: 19px; color: var(--ink-2); letter-spacing: -0.01em; }
.openbig b { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.opensub { margin-top: 7px; font-size: 13.5px; color: var(--ink-3); line-height: 1.5; text-wrap: balance; }

/* Section tracker, Kickstarter's model: a sticky rail whose active item is marked
   only by an accent left border, with the inactive border transparent rather than
   absent so nothing shifts. Ours tracks 5 sections against Kickstarter's 26, so it
   never needs the internal scroll (and internal scroll is why theirs loses its own
   highlight off-screen). */
/* Sits in the row below the photo, so it needs the same top margin as the story's first
   section to start level with that section's heading.
   Pins at 178, not 118: the spotbar is opaque, spans from this column's left edge, and
   its bottom sits at ~158, so a tracker pinned at 118 has its first item hidden behind it. */
.dtrack { position: sticky; top: 178px; align-self: start; margin-top: 58px; }
.dtrack a { display: block; font-size: 13px; line-height: 1.32; color: var(--ink-3); padding: 8px 0 8px 13px; border-left: 2px solid transparent; transition: color .15s, border-color .15s; }
.dtrack a:hover { color: var(--ink-2); }
.dtrack a.on { color: var(--ink); border-left-color: var(--ink); }

/* The fund card's head, on GoFundMe's shape: a progress ring with the percentage inside,
   beside one headline fact, with a small grey context line under it. One number leads, the
   rest is demoted. This replaced a stack of co-equal 26px stats, which gave the eye nothing
   to land on and ate height the card doesn't have. */
.fp-state { display: flex; flex-direction: column; gap: 14px; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
/* Horizontal progress bar (Kickstarter / GoFundMe): hero number + goal, a full-width bar,
   then the supporting line. Reads cleaner and more scannable than the old circular ring. */
.fp-prog { display: block; }
.fp-pmain { font-size: 15px; line-height: 1.35; color: var(--ink-3); letter-spacing: -0.01em; }
.fp-pmain b { font-size: 21px; font-weight: 600; color: var(--ink); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.fp-bar { height: 8px; margin: 11px 0 9px; }
.fp-prog.closing .fp-bar > i { background: var(--up); }
.fp-psub { font-size: 12.5px; color: var(--ink-3); font-variant-numeric: tabular-nums; }

/* Mobile sticky CTA bar: pins the primary action to the bottom of the viewport, the way
   Kickstarter/GoFundMe keep "Back"/"Donate" always in reach. Hidden on desktop (the rail
   panel is always visible there) and hidden while the panel's own button is on screen. */
.fund-sticky { display: none; }
@media (max-width: 860px) {
  .fund-sticky { display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    background: var(--white); border-top: 1px solid var(--line);
    padding: 10px var(--pad) calc(10px + env(safe-area-inset-bottom, 0px));
    box-shadow: 0 -10px 26px -18px rgba(0,0,0,0.28); transition: transform .25s ease; }
  .fund-sticky.hidden { transform: translateY(120%); }
  .fund-sticky .btn { width: 100%; justify-content: center; text-align: center; }
  /* The bar is fixed, so it sat on top of the last ~63px of the page. At full scroll
     that permanently hid the bottom of the footer. Reserve its height at the end of
     the document so everything can still be scrolled clear of it. */
  body:has(.fund-sticky) .sfoot { padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px)); }
}

/* The ring. r=15.915 makes the circumference 100, so stroke-dasharray reads as a percent.
   The fill circle carries its own -90deg rotate as an SVG attribute (fills from 12 o'clock)
   so it works without CSS; do NOT rotate the svg here too or it double-rotates. Mono to
   match the platform, green only for the goal-gradient "closing" state. */
.pring { position: relative; width: 52px; height: 52px; flex: 0 0 auto; }
.pring svg { width: 100%; height: 100%; display: block; }
.pring circle { fill: none; stroke-width: 3; }
.pring-t { stroke: var(--line); }
.pring-f { stroke: var(--ink); stroke-linecap: round; transition: stroke-dasharray .6s cubic-bezier(.4,0,.2,1); }
.pring.closing .pring-f { stroke: var(--up); }
.pring span { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.pring.closing span { color: var(--up); }

.fpnote-tight { text-align: left; margin: 0; }

/* One disclaimer, once. It used to sit next to every number on the page, which
   read as overcompensating and voided trust in all of them. */
.dfoot { margin-top: 56px; padding-top: 18px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; gap: 18px; flex-wrap: wrap; font-size: 13px; color: var(--ink-3); }
.dfoot a { color: var(--ink-3); text-decoration: underline; text-underline-offset: 2px; }
.dfoot a:hover { color: var(--ink-2); }

@media (max-width: 1180px) {
  .detail {
    grid-template-columns: minmax(0,1fr) 340px;
    grid-template-areas: "head rail" "hero rail" "main rail";
  }
  .dtrack { display: none; }
}
@media (max-width: 980px) {
  .detail {
    grid-template-columns: 1fr;
    grid-template-areas: "head" "hero" "rail" "main";
  }
  .dmain .dsec { margin-top: 44px; }
  .dmain .dsec h3 { font-size: 20px; }
  .dmain .dstats { gap: 12px; }
  .dmain .dstats .s { border-left: 0; padding-left: 0; }
}
/* comments gated to funders (Kickstarter model) */
.woslocked { margin-top: 16px; border: 1px dashed var(--line-2); border-radius: 10px; padding: 14px 16px; font-size: 13.5px; color: var(--ink-3); line-height: 1.5; background: var(--panel-2); }
/* funded-note perk: featured (pinned + highlighted) words of support */
/* featured ($50+) notes are pinned to the top; no loud highlight, keep it clean */


/* "More to back" square photo tiles */
.relcard { position: relative; display: block; aspect-ratio: 1 / 1; border-radius: 14px; overflow: hidden; border: 1px solid var(--line); background: var(--panel); }
.relcard img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }
.relcard:hover img { transform: scale(1.045); }
.relgrad { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,10,11,0.04) 0%, rgba(10,10,11,0) 34%, rgba(10,10,11,0.72) 100%); }
.relmeta { position: absolute; left: 0; right: 0; bottom: 0; padding: 13px 14px; color: #fff; }
.relcat { font-size: 10px; font-weight: 600; letter-spacing: 0.1em; color: rgba(255,255,255,0.82); }
.reltitle { font-size: 15px; letter-spacing: -0.02em; line-height: 1.25; margin-top: 4px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; min-height: 2.5em; overflow: hidden; text-shadow: 0 1px 8px rgba(0,0,0,0.4); }
.relstat { font-size: 11.5px; color: rgba(255,255,255,0.86); font-family: var(--sans); font-variant-numeric: tabular-nums; margin-top: 6px; }

@media (max-width: 900px) {
  .momentum { flex-wrap: wrap; }
}

/* ---------- Markets hero banner (Kickstarter-style) ---------- */
/* Full-bleed band: the section spans the viewport (it lives outside .wrap), while
   an inner .wrap keeps the copy aligned to the same content column as the rest of
   the page. Square corners, flush under the nav. */
.sbanner { position: relative; overflow: hidden; border-radius: 0; min-height: 272px; margin: 0 0 34px; background: #081210; display: flex; align-items: center; isolation: isolate; }
.sbanner > .wrap { width: 100%; position: relative; z-index: 1; }
/* The hero photo is mirrored (scaleX(-1)) site-wide so the subject gazes inward
   toward the headline. Because the element is flipped, its ::before fade is
   authored at 270deg (dark on the element's right) so it renders dark on the
   card's LEFT, over the text. Keep position/gradient in sync if either changes. */
.sbanner-media { position: absolute; top: 0; right: 0; bottom: 0; width: 72%; z-index: 0; background-image: url('/assets/app/market-hero.jpg'); background-size: cover; background-position: 48% 34%; background-repeat: no-repeat; transform: scaleX(-1); }
.sbanner-media::before { content: ""; position: absolute; inset: 0; background: linear-gradient(270deg, #081210 0%, rgba(8,18,16,0.86) 22%, rgba(8,18,16,0.30) 50%, rgba(8,18,16,0) 74%); }
.sbanner-in { position: relative; z-index: 1; padding: 34px 0; max-width: 600px; }
.sbanner h1 { margin: 0; font-family: var(--sans); font-weight: 700; color: #F4F3EE; font-size: clamp(30px, 4vw, 50px); line-height: 0.98; letter-spacing: -0.03em; }
.sbanner h1 .g { color: var(--brand); }
.sbanner p { margin: 13px 0 0; max-width: 40ch; color: rgba(255,255,255,0.82); font-size: clamp(14px, 1.3vw, 15.5px); line-height: 1.5; }
.sbanner .sb-cta { display: inline-flex; align-items: center; gap: 8px; margin-top: 20px; padding: 12px 20px; border-radius: 11px; background: #F4F3EE; color: #0A0A0B; font-family: var(--sans); font-weight: 600; font-size: 15px; letter-spacing: -0.01em; transition: transform .15s ease, background .15s ease; }
.sbanner .sb-cta:hover { background: #FFFFFF; transform: translateY(-1px); }
.sbanner .sb-cta svg { width: 16px; height: 16px; }
/* Desktop: the banner is a rounded, content-width panel (it had been
   flattened to a square full-bleed band). This restores the earlier
   geometry exactly: same width as the content column, centered with the
   page gutter, 28px below the category tabs, 34px above the feed, text
   flush to the panel's left edge. Mobile keeps its own rounded hero card. */
@media (min-width: 761px) {
  .sbanner { max-width: min(calc(var(--maxw) - 2 * var(--pad)), calc(100% - 2 * var(--pad))); margin: 28px auto 34px; border-radius: 18px; }
  .sbanner > .wrap { max-width: none; padding-left: 0; padding-right: 0; }
  /* text inset from the panel edge, exactly as before (was 34px clamp(28px,5vw,52px)) */
  .sbanner-in { padding-left: clamp(28px, 5vw, 52px); padding-right: clamp(28px, 5vw, 52px); }
}
@media (max-width: 760px) {
  /* Kickstarter-style hero card on phones: a rounded, guttered card with the photo
     filling it, a bold headline low over the image, and a full-width button pinned
     to the bottom. No body copy (the marketing paragraph is desktop-only here). The
     desktop full-bleed band is untouched. */
  /* Gutter matches --pad so the card lines up with the feed cards below (which sit
     inside .wrap's --pad padding); otherwise the banner is wider than everything else. */
  .sbanner { min-height: 432px; align-items: flex-end; margin: 18px var(--pad) 8px; border-radius: 18px; }
  .sbanner-media { width: 100%; background-position: 42% 30%; }
  .sbanner-media::before { background: linear-gradient(180deg, rgba(8,18,16,0) 26%, rgba(8,18,16,0.5) 58%, rgba(8,18,16,0.92) 100%); }
  .sbanner > .wrap { padding-left: 22px; padding-right: 22px; }
  .sbanner-in { max-width: 100%; width: 100%; padding: 0 0 22px; }
  .sbanner h1 { font-size: 40px; line-height: 0.96; }
  .sbanner p { display: none; }
  .sbanner .sb-cta { display: flex; width: 100%; justify-content: center; margin-top: 22px; padding: 15px 20px; border-radius: 12px; font-size: 15.5px; }
}

/* ============================================================
   Mobile polish pass: touch-target sizing, scroll affordances,
   and pill styling so mobile matches the desktop's intentional feel.
   ============================================================ */
@media (max-width: 720px) {
  /* the horizontal category tab strip fades its right edge ONLY when it actually
     overflows (nav.js adds .scrolls), so tabs that fit are not needlessly clipped */
  .cattabs-links { scrollbar-width: none; }
  .cattabs-links.scrolls { -webkit-mask-image: linear-gradient(90deg, #000 90%, transparent);
    mask-image: linear-gradient(90deg, #000 90%, transparent); }
  .cattabs-links::-webkit-scrollbar { display: none; }
  /* center the tab strip whenever it fits (any tab count); only when it actually
     overflows (.scrolls, set by nav.js) does it fall back to left-align + scroll */
  .cattabs-links:not(.scrolls) { flex: 1; justify-content: center; }
  /* the account page ends on a short card; trim the dead space before the footer */
  .acct-page { padding-bottom: 28px; }
  .sfoot { margin-top: 40px; }
  /* bump sub-30px controls on the market detail toward the ~44px touch guideline */
  .lbtabs button { padding: 8px 12px; }
  .quickadd button { padding: 7px 14px; }
  .rangechips button { padding: 7px 11px; }
}
/* fund panel tier / visibility pills were ~33px tall; give them a comfortable touch height */
@media (max-width: 560px) {
  .tiers .tier { padding: 11px 0; }
  .vis .visbtn { padding: 12px 0; }
  /* the 5-up funding-window segment row is the tightest control on /start; let it wrap
     safely instead of packing five buttons into ~350px */
  #winseg.seg { flex-wrap: wrap; }
  #winseg.seg button { flex: 1 0 30%; }
}
/* category page: the mobile subcategory filter reads as chips. Keep them small and squared
   to the site's chip language (visbtn/btn radius) so they feel modern, not bubbly. */
@media (max-width: 980px) {
  .catside a { border: 1px solid var(--line); border-radius: 8px; padding: 6px 12px; font-size: 13px; }
  .catside a.active { background: var(--ink); color: var(--white); border-color: var(--ink); }
  .catside a:hover { background: var(--panel-2); }
  .catside a.active:hover { background: var(--ink); }
  .catside .grouphd { width: 100%; padding: 10px 2px 4px; }
}

/* ============================================================
   Mobile reading standard: headings stay left, body prose is justified for a clean
   flush column. Hyphenation keeps the word gaps tight on narrow screens. Selectors
   repeat the .pagenarrow prefixes so this wins over the earlier left-align rule.
   Centered heads and image-banner captions are intentionally excluded.
   ============================================================ */
@media (max-width: 720px) {
  .pagenarrow .dsec p, .pagenarrow .pagehead:not(.centered) .intro,
  .pagehead:not(.centered) .intro, .dsec p,
  .faqitem .fa, .legal-article p, .legal-article li {
    text-align: justify; text-justify: inter-word; hyphens: auto; -webkit-hyphens: auto;
  }
  /* two-line headings: top line runs fuller than the one below (greedy wrap) rather
     than balancing to equal widths, which reads more naturally */
  .pagehead h1, .legal-head h1, .authwrap h1, h2, h3 { text-wrap: pretty; }

  /* tighter mobile type scale (Scale body 14px / Kickstarter 14-16px reference). Our
     body copy was 17px, which read too large; bring it to ~15px and trim page h1s. */
  .pagehead h1, .legal-head h1 { font-size: 28px; }
  .pagehead .intro, .pagehead .sub, .dsec p, .legal-article p, .legal-article li { font-size: 14px; }
  .faqitem summary { font-size: 15px; }
  .faqitem .fa { font-size: 14px; }
  .contact-card p { font-size: 14px; }
  /* universal mobile content gutter: match the homepage (the width the hero video
     condenses to), so every page shares the same 34px side margin */
  :root { --pad: 34px; }

  /* funnel/account/profile reading text into the same 14px mobile body scale (stat
     numbers, form inputs, and labels keep their size for hierarchy) */
  .dmain .dsec p.dlead { font-size: 15px; line-height: 1.55; }
  .prof-bio, .prof-private p, .confirm .lead2, .fp-pmain,
  .legal-head .intro, .authwrap .sub, .vo-l { font-size: 14px; }

  /* compact, uniform CTA buttons on mobile (oversized buttons read unprofessional and
     non-uniform; smaller is the industry standard) */
  .btn-lg { padding: 11px 18px; font-size: 14px; }
  .hero-cta { flex-wrap: nowrap; gap: 10px; }
  .hero-cta .btn { flex: 1; justify-content: center; font-size: 13px; padding: 11px 8px; }
}

/* ==========================================================================
   Market board (Kalshi-style landing), light mode. Flagship giving-line card,
   photo-thumbnail cause cards, live tape, featured rail card, and the nav /
   category strip styled to mimic Kalshi. Green = live-market signal (line,
   up %, active tab, primary action); the page keeps Verge's light B&W ground.
   ========================================================================== */

@keyframes flagpulse {
  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, currentColor 45%, transparent); }
  70%  { box-shadow: 0 0 0 11px color-mix(in srgb, currentColor 0%, transparent); }
  100% { box-shadow: 0 0 0 0 color-mix(in srgb, currentColor 0%, transparent); }
}

/* ---- nav: logo · links · search · Log In / Sign Up (Kalshi structure) ---- */
.appnav.mktnav { background: var(--white); border-bottom: 1px solid var(--line); }
/* combined nav (logo bar + category tabs): drop the seam so the two bars read as one */
.appnav.mktnav:has(+ .cattabs.mktcats) { border-bottom-color: transparent; }
.appnav.mktnav .appnav-in { display: flex; align-items: center; gap: 20px; height: 60px; }
.appnav.mktnav .brand { font-size: 32px; justify-self: auto; }
.appnav.mktnav .navlinks { display: flex; gap: 22px; justify-self: auto; margin-left: 14px; }
/* Uppercase nav items read as black, not muted grey (hover/active stay black too). */
/* Active = black + heavier; inactive = muted grey. Colour + weight mark the page
   you're on (no underline), so the nav reads which item is selected. */
.appnav.mktnav .navlinks a { color: var(--ink-3); font-size: 13px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; padding: 0; border: 0; transition: color .15s; }
.appnav.mktnav .navlinks a:hover { color: var(--brand); }
.appnav.mktnav .navlinks a.active { color: var(--brand); font-weight: 700; }
.appnav.mktnav .mktsearch { position: relative; flex: 1; max-width: 440px; display: flex; align-items: center; gap: 9px; background: var(--bg); border: 1px solid var(--line-2); border-radius: 11px; padding: 9px 14px; color: var(--ink-3); font-size: 14px; cursor: text; transition: border-color .15s; }
.appnav.mktnav .mktsearch:hover { border-color: var(--ink-3); }
.appnav.mktnav .mktsearch.open { border-color: var(--ink); }
.appnav.mktnav .mktsearch svg { width: 15px; height: 15px; flex: 0 0 auto; }
/* (the old placeholder <span> is gone: search.js replaces it with a real input,
   and a nowrap rule this deep also caught the result rows' titles) */

/* Nav search: the real input and its results panel. search.js upgrades the static
   box into this, so the markup lives in one place instead of four page copies. */
.mks-in { flex: 1; min-width: 0; border: 0; background: none; outline: none; padding: 0; font-family: var(--sans); font-size: 14px; color: var(--ink); }
.mks-in::placeholder { color: var(--ink-3); }
/* Flush with the field's own edges (the -1px covers its border), so the panel
   reads as the field opening rather than as a separate floating box. */
.mksres { position: absolute; left: -1px; right: -1px; top: calc(100% + 8px); background: var(--white); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 24px 50px -30px rgba(0,0,0,0.35); z-index: 60; overflow: hidden; cursor: default; }
.mksres[hidden] { display: none; }
.mksres-hd { padding: 11px 16px 9px; font-size: 10.5px; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; color: var(--ink-3); border-bottom: 1px solid var(--line); }
.mksres-list { max-height: 428px; overflow-y: auto; }
.mksrow { display: flex; align-items: center; gap: 16px; padding: 11px 16px; border-top: 1px solid var(--line); text-decoration: none; color: inherit; transition: background .12s; }
.mksrow:first-child { border-top: none; }
.mksrow.on { background: var(--panel); }
.mksrow-ic { width: 34px; height: 34px; flex: 0 0 auto; border-radius: 9px; object-fit: cover; background: var(--panel); }
/* The title wraps well before the figure rather than running up against it: the
   number column is reserved at a fixed width, so every row breaks at one margin. */
.mksrow-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; padding-right: 6px; }
.mksrow-t { font-size: 14px; font-weight: 500; color: var(--ink); line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mksrow-s { font-size: 12px; color: var(--ink-3); }
.mksrow-num { flex: 0 0 auto; min-width: 62px; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.mksrow-v { font-size: 14px; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.mksres-empty { padding: 16px; font-size: 13.5px; color: var(--ink-2); }
.appnav.mktnav .navcta { display: flex; gap: 9px; align-items: center; }
.appnav.mktnav .navcta .btn-ghost, .appnav.mktnav .navcta .login.btn { background: var(--white); color: var(--ink); border: 1px solid var(--line-2); }
.appnav.mktnav .navcta .btn-ghost:hover, .appnav.mktnav .navcta .login.btn:hover { border-color: var(--ink-3); color: var(--ink); }
.appnav.mktnav .navcta .btn-primary { background: var(--action); color: var(--action-ink); border: 0; font-weight: 600; }
.appnav.mktnav .navcta .btn-primary:hover { background: var(--action-hover); }

/* ---- category strip: green active underline ---- */
.cattabs.mktcats { top: 60px; }
/* Category tabs read bold; the active one keeps the ink color + green underline. */
.cattabs.mktcats .cattabs-links a { font-weight: 600; }
/* no green underline: the active tab is marked by black + heavier weight alone */
.cattabs.mktcats .cattabs-links a.active { color: var(--ink); border-bottom-color: transparent; font-weight: 700; }

/* ---- flagship: one cause, no photo, the ever-moving giving-rate line ---- */
.mktwrap { padding-bottom: 44px; }
.flag { position: relative; background: var(--white); color: var(--ink); border: 1px solid var(--line); border-radius: 18px; padding: 24px 26px 22px; overflow: hidden; cursor: pointer; box-shadow: 0 1px 0 rgba(0,0,0,0.02), 0 26px 52px -38px rgba(0,0,0,0.22); }
/* The chart keeps its default cursor so the hover crosshair reads as a chart, not a link. */
.flag-svgwrap { cursor: default; }
.flag-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.flag-cat { display: flex; align-items: center; gap: 11px; min-width: 0; }
.flag-ic { width: 38px; height: 38px; border-radius: 9px; object-fit: cover; flex: 0 0 auto; border: 1px solid var(--line); }
.flag-cat .lbl { font-size: 11.5px; letter-spacing: 0.11em; font-weight: 600; color: var(--ink-3); text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.flag-caro { display: flex; align-items: center; gap: 12px; color: var(--ink-3); font-size: 13.5px; font-variant-numeric: tabular-nums; flex: 0 0 auto; }
.flag-caro button { width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--line-2); background: var(--white); color: var(--ink); display: grid; place-items: center; cursor: pointer; font-size: 16px; line-height: 1; transition: border-color .15s, background .15s; }
.flag-caro button:hover { border-color: var(--ink-3); background: var(--panel-2); }
.flag-title { font-size: clamp(23px, 2.5vw, 32px); font-weight: 500; letter-spacing: -0.03em; line-height: 1.08; margin: 0 0 20px; color: var(--ink); text-wrap: balance; }
.flag-title a { color: var(--ink); }
.flag-body { display: grid; grid-template-columns: minmax(220px, 320px) 1fr; gap: 30px; align-items: center; }
.flag-stat { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.flag-big { font-family: var(--sans); font-size: clamp(38px, 4.4vw, 50px); font-weight: 700; letter-spacing: -0.035em; font-variant-numeric: tabular-nums; line-height: 1; color: var(--ink); }
.flag-unit { font-size: 14px; color: var(--ink-3); }
.flag-stat .chg { font-size: 14.5px; }
.flag-vol { margin-top: 14px; font-size: 13.5px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.flag-vol b { color: var(--ink); font-weight: 600; }
.flag-news { margin-top: 15px; font-size: 14px; color: var(--ink-2); line-height: 1.52; max-width: 46ch; }
.flag-news b { color: var(--ink); }
.flag .btn-lg { margin-top: 20px; background: var(--action); color: var(--action-ink); border: none; font-weight: 600; }
.flag .btn-lg:hover { background: var(--action-hover); transform: translateY(-1px); }
.flag-chart { position: relative; }
.flag-chart .flagsvg { display: block; width: 100%; height: 210px; }
.flag-dot { position: absolute; width: 9px; height: 9px; border-radius: 50%; background: var(--up); transform: translate(-50%, -50%); }
.flag-cap { margin-top: 8px; font-size: 12px; color: var(--ink-3); }
.flag-wm { position: absolute; top: 2px; left: 2px; font-size: 15px; }
@media (prefers-reduced-motion: no-preference) { .flag-dot { animation: flagpulse 2.4s ease-out infinite; } }
@media (max-width: 560px) { .flag-body { grid-template-columns: 1fr; gap: 20px; } .flag { padding: 20px 18px; } .flag-wm { display: none; } }

/* ---- live donation tape ---- */
.tape { display: flex; align-items: center; gap: 12px; margin: 14px 0 2px; padding: 10px 15px; background: var(--panel); border: 1px solid var(--line); border-radius: 11px; font-size: 13px; color: var(--ink-2); overflow: hidden; }
.tape .live { display: flex; align-items: center; gap: 7px; color: var(--up); font-weight: 600; flex: 0 0 auto; letter-spacing: 0.02em; }
.tape .blip { width: 8px; height: 8px; border-radius: 50%; background: var(--up); }
.tape .feed { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; }
@media (prefers-reduced-motion: no-preference) { .tape .blip { animation: flagpulse 2s ease-out infinite; } }

/* ---- featured rail card ---- */
.railfeat { display: block; position: relative; padding: 18px 18px 16px; border-radius: 12px; overflow: hidden; color: var(--ink); background: radial-gradient(130% 130% at 100% 0%, color-mix(in srgb, var(--brand) 14%, transparent) 0%, transparent 55%), var(--white); border: 1px solid var(--line); transition: transform .15s, box-shadow .15s; }
.railfeat:hover { transform: translateY(-2px); box-shadow: 0 18px 36px -26px rgba(0,0,0,0.28); }
.rf-cat { font-size: 10.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }
.rf-title { font-size: 17px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.2; margin: 8px 0 12px; color: var(--ink); }
.rf-stat { display: flex; align-items: baseline; gap: 8px; font-variant-numeric: tabular-nums; }
.rf-big { font-family: var(--sans); font-size: 26px; letter-spacing: -0.03em; color: var(--ink); }
.rf-stat span:last-child { font-size: 12.5px; color: var(--ink-3); }
.rf-cta { display: inline-block; margin-top: 14px; font-size: 13px; font-weight: 600; color: var(--action); }

/* ---- cause card: clean info panel with a photo thumbnail (not full-bleed) ---- */
.mcard { display: flex; flex-direction: column; gap: 12px; padding: 18px 18px 15px; background: var(--white); border: 1px solid var(--line); border-radius: 14px; color: var(--ink); transition: border-color .15s, transform .15s, box-shadow .15s; }
.mcard:hover { border-color: var(--line-2); transform: translateY(-2px); box-shadow: 0 20px 40px -30px rgba(0,0,0,0.35); }
.mc-top { display: flex; align-items: center; gap: 10px; min-width: 0; }
.mc-ic { width: 32px; height: 32px; border-radius: 8px; object-fit: cover; flex: 0 0 auto; border: 1px solid var(--line); }
.mc-cat { font-size: 11px; letter-spacing: 0.09em; font-weight: 600; color: var(--ink-3); text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mc-title { font-size: 16.5px; font-weight: 500; letter-spacing: -0.02em; line-height: 1.24; color: var(--ink); margin: 8px 0 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.48em; }
.mc-mid { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.mc-stat { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; min-width: 0; }
.mc-big { font-family: var(--sans); font-size: 26px; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; line-height: 1; color: var(--ink); }
.mc-unit { font-size: 12px; color: var(--ink-3); }
.mc-stat .chg { font-size: 13px; }
.mc-spark { position: relative; width: 104px; height: 42px; flex: 0 0 auto; }
.mc-spark .mc-svg { display: block; width: 100%; height: 100%; }
.mc-dot { position: absolute; width: 7px; height: 7px; border-radius: 50%; background: var(--up); transform: translate(-50%,-50%); }
@media (prefers-reduced-motion: no-preference) { .mc-dot { animation: flagpulse 2.4s ease-out infinite; } }
.mc-foot { display: flex; justify-content: space-between; gap: 10px; font-size: 12.5px; color: var(--ink-3); font-variant-numeric: tabular-nums; padding-top: 12px; border-top: 1px solid var(--line); }

/* ---- responsive: collapse the nav on phones ---- */
@media (max-width: 860px) { .appnav.mktnav .mktsearch { display: none; } }
@media (max-width: 640px) {
  .appnav.mktnav .navlinks { display: none; }
  .appnav.mktnav .appnav-in { justify-content: space-between; }
}
/* The desktop CTA cluster hides on phones, same as every other nav variant
   (.appnav:not(.min) .navcta). .appnav.mktnav .navcta { display:flex } is later in
   this file, so it was winning the tie and painting the desktop avatar underneath
   the hamburger. On mobile nav.js puts the avatar in .navacct-mobile when signed
   in, and clones Log In / Sign Up into the drawer when signed out, so nothing is
   lost by hiding this. */
@media (max-width: 720px) {
  .appnav.mktnav:not(.min) .navcta { display: none; }
}

/* ---- detail-page give button: big, bold, green (matches the market board) ---- */
.fundpanel .btn-primary, .fundstack .btn-primary { background: var(--action); color: var(--action-ink); border: 0; }
.fundpanel .btn-primary:hover, .fundstack .btn-primary:hover { background: var(--action-hover); }
.fundpanel .btn-primary:disabled { background: var(--line-2); color: var(--ink-3); opacity: 1; }
.fundpanel #fundbtn { font-size: 16px; font-weight: 600; padding: 15px 24px; border-radius: 10px; letter-spacing: -0.01em; }

/* ---- momentum hues: green = gaining backers, red = attention fading ---- */
.mktwrap .chg.up, .mktwrap .rchg.up, .railfeat .chg.up, .detail .chg.up { color: var(--mkt-up); }
.mktwrap .chg.down, .mktwrap .rchg.down, .railfeat .chg.down, .detail .chg.down { color: var(--mkt-dn); }
.flag-dot.dn, .mc-dot.dn { animation: none; }   /* a fading cause does not pulse */

/* ---- bigger, wider board (Kalshi proportions): wider container, larger cards ---- */
:root { --mkt-maxw: 1440px; }
.appnav.mktnav .appnav-in, .cattabs.mktcats .wrap, .mktwrap .wrap, .dashwrap { max-width: var(--mkt-maxw); }
/* Content pages under the market nav (about, organizations) aligned to the same
   brand->CTA span the .appnav.mktnav uses: every .wrap here shares --mkt-maxw and
   --pad with the nav, so bands, hero, and card grids fill the full width from the
   Verge wordmark to the Sign Up button instead of sitting inset at 1200/800.
   Placed after .wrap.pagenarrow (line ~346) so it wins the equal-specificity tie. */
.mktpage .wrap { max-width: var(--mkt-maxw); }

/* About hero + pillars. The container fills the nav width, but nothing here is
   stretched running prose: the hero copy stays a readable column, and the four
   points become a card grid that fills the width with structure (the Kalshi move
   is to fill horizontal space with columns/cards, never with edge-to-edge text). */
.abouthero { padding-top: clamp(52px, 7vh, 104px); padding-bottom: clamp(20px, 3vh, 40px); }
.abouthero .ah-head { max-width: 780px; }
.abouthero h1 { font-size: clamp(34px, 4.4vw, 58px); letter-spacing: -0.04em; line-height: 1.02; margin-top: 16px; }
.abouthero .ah-intro { color: var(--ink-2); font-size: clamp(17px, 1.4vw, 20px); line-height: 1.5; margin-top: 20px; max-width: 42ch; text-align: left; text-justify: auto; }
.abouthero .hero-cta { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 30px; }

.pillars { margin-top: clamp(40px, 5.5vh, 72px); display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.pillar { border: 1px solid var(--line); border-radius: 16px; background: var(--panel-2); padding: clamp(24px, 2.2vw, 34px); }
.pillar h3 { font-size: 19px; font-weight: 500; letter-spacing: -0.02em; color: var(--ink); margin-bottom: 12px; }
.pillar p { color: var(--ink-2); font-size: clamp(15px, 1.1vw, 16.5px); line-height: 1.6; max-width: 56ch; text-align: left; text-justify: auto; text-wrap: pretty; }
.pillar p a { color: var(--ink); border-bottom: 1px solid var(--line-2); }
@media (max-width: 720px) { .pillars { grid-template-columns: 1fr; gap: 14px; } }
.mktwrap .mkt { grid-template-columns: minmax(0,1fr) 344px; gap: 34px; }
.mktwrap .kgrid { gap: 18px; }
.mcard { padding: 22px 24px 18px; gap: 15px; }
.mcard .mc-ic { width: 34px; height: 34px; }
.mcard .mc-cat { font-size: 11.5px; letter-spacing: 0.1em; }
.mcard .mc-title { font-size: 20px; line-height: 1.22; min-height: 2.44em; }
.mcard .mc-big { font-size: 34px; }
.mcard .mc-unit { font-size: 13px; }
.mcard .mc-stat .chg { font-size: 14px; }
.mcard .mc-spark { width: 152px; height: 56px; }
.mcard .mc-foot { font-size: 13px; padding-top: 14px; }
@media (max-width: 980px) { .mktwrap .mkt { grid-template-columns: minmax(0,1fr); } }

/* ---- flagship as the landing hero: large and commanding ---- */
.flag { padding: 30px 34px 26px; }
.flag-title { font-size: clamp(25px, 2.8vw, 36px); margin-bottom: 22px; }
.flag-big { font-size: clamp(42px, 4.8vw, 56px); }
.flag-body { gap: 36px; }
.flag-chart .flagsvg { height: 320px; }
.flag-news { font-size: 15px; }
.flag .btn-lg { font-size: 15px; padding: 14px 26px; }

/* ---- larger cause cards with a prominent full-width funding line ---- */
.mcard { padding: 26px 28px 20px; gap: 16px; }
.mcard .mc-title { font-size: 21px; line-height: 1.2; min-height: 2.4em; }
.mcard .mc-big { font-size: 42px; }
.mcard .mc-unit { font-size: 13.5px; }
.mcard .mc-stat .chg { font-size: 15px; }
.mc-chart { position: relative; width: 100%; height: 110px; }
.mc-chart .mc-svg { display: block; width: 100%; height: 100%; }
.mcard .mc-foot { font-size: 13.5px; padding-top: 16px; }

/* Flying "+N" numbers: a fixed-length queue pinned to the bottom of the plot, the
   way an exchange tape reads. A new number fades in at the bottom, the stack shifts
   up a line, and the one pushed past the last slot fades out at the same moment.
   Nothing expires on a timer, so between arrivals the stack sits still and legible;
   a burst cycles it faster instead of piling numbers up the card. Every card gets a
   host: a live one is fed by its real event log, a seed/demo one by the illustrative
   driver in market-render.js (which owns the queue length). */
.card-fly { position: absolute; display: flex; flex-direction: column; justify-content: flex-end;
  align-items: flex-start; gap: 5px; pointer-events: none; z-index: 2; }
/* Each number sits on its own soft chip. They used to be bare text laid straight
   over the line and the gridlines, so a figure crossing the plot was unreadable and
   two of them close together read as one smudge. The chip is the page background at
   ~86%, which keeps them light while giving every glyph a clean edge. */
.card-fly-item { font-weight: 600; font-size: 12px; line-height: 1.25; letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums; padding: 2px 7px; border-radius: 8px;
  background: color-mix(in srgb, var(--bg) 86%, transparent);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  color: var(--ink-2); white-space: nowrap; opacity: 0; transform: translateY(6px);
  transition: opacity .18s ease-out, transform .18s ease-out; }
.card-fly-item.in  { opacity: 1; transform: none; }
.card-fly-item.out { opacity: 0; transform: translateY(-2px); transition-duration: .22s; }
.card-fly-item.refund { color: var(--mkt-dn); }
@media (prefers-reduced-motion: reduce) {
  .card-fly-item, .card-fly-item.in, .card-fly-item.out { transform: none; transition: opacity .18s linear; }
}
/* mcard: over the mini line, bottom-left, green on the panel */
.mc-chart .card-fly { left: 6px; bottom: 6px; max-height: 90%; }
/* kcard: in the clear upper-left of the photo (the bottom half holds the title +
   footer), white for contrast, still stacking upward within the top band. */
.kcard .card-fly { left: 14px; top: 12px; bottom: auto; height: 40%; }
.kcard .card-fly-item { color: #fff; font-weight: 700; text-shadow: 0 1px 4px rgba(10,10,11,0.6);
  background: none; -webkit-backdrop-filter: none; backdrop-filter: none; padding: 0; }
/* flagship: dollars fly up over the giving line, bottom-left, clear of the axes */
.flag-svgwrap { position: relative; }
.flag-fly { left: 4px; bottom: 30px; max-height: 72%; gap: 3px; }
.flag-fly .card-fly-item { font-size: 13.5px; }

/* ---- trim cards a touch to Kalshi proportions (shorter, still prominent) ---- */
.mcard { padding: 22px 24px 17px; gap: 14px; }
.mcard .mc-title { font-size: 19px; min-height: 2.32em; }
.mcard .mc-big { font-size: 36px; }
.mcard .mc-unit { font-size: 13px; }
.mcard .mc-stat .chg { font-size: 14px; }
.mc-chart { height: 88px; }
.mcard .mc-foot { font-size: 13px; padding-top: 13px; }

/* ---- match Kalshi card dimensions (~432x260 @ 1470vw): narrower main, shorter cards ---- */
:root { --mkt-maxw: 1320px; }
.mktwrap .mkt { grid-template-columns: minmax(0,1fr) 360px; gap: 32px; }
.mktwrap .kgrid { gap: 16px; }
.mcard { padding: 18px 18px 15px; gap: 12px; border-radius: 14px; }
.mcard .mc-ic { width: 32px; height: 32px; }
.mcard .mc-title { font-size: 18px; min-height: 2.3em; line-height: 1.2; }
.mcard .mc-big { font-size: 33px; }
.mcard .mc-unit { font-size: 12.5px; }
.mcard .mc-stat .chg { font-size: 13.5px; }
.mc-chart { height: 68px; }
.mcard .mc-foot { padding-top: 12px; font-size: 12.5px; }

/* ---- dial to Kalshi 432x260: widen main column, shorten card ---- */
:root { --mkt-maxw: 1396px; }
.mktwrap .mkt { grid-template-columns: minmax(0,1fr) 372px; gap: 32px; }
.mcard { padding: 16px 16px 14px; gap: 11px; }
.mcard .mc-title { min-height: 2.25em; }
.mc-chart { height: 60px; }

/* Collapse the board to one column on phones. The rule that did this lives up at
   the `max-width: 980px` block, but the two Kalshi-dimension tuning blocks above
   re-declare the two-column track at equal specificity and later source order, so
   they were winning inside the media query too. The result on a phone: the rail is
   display:none but still held a 372px track, the main column resolved to 0px, and
   every card rendered ~40px narrow against a lopsided right gutter. */
@media (max-width: 980px) {
  .mktwrap .mkt { grid-template-columns: minmax(0, 1fr); gap: 0; }
}
@media (max-width: 720px) {
  /* The featured row is back on phones (the flagship carousel), so the first section
     needs real separation from it again rather than the 8px used when #feat was
     hidden, but still less than the 54px desktop gap. */
  .mktwrap .mkt-main > #sections > .mkt-sec:first-child,
  .mktwrap .mkt-main > .mkt-sec:first-child { margin-top: 26px; }
}

/* ---- final: land on ~432x260 ---- */
:root { --mkt-maxw: 1436px; }
.mcard { padding: 16px 16px 12px; gap: 10px; }
.mc-chart { height: 54px; }

/* ---- give button: green full-pill, prominent by default (Kalshi "Sign up to trade") ---- */
.fundpanel #fundbtn { background: var(--action); color: var(--action-ink); border-radius: 999px; height: 50px; padding: 0 24px; font-size: 15px; font-weight: 600; }
.fundpanel #fundbtn:hover:not(:disabled) { background: var(--action-hover); transform: translateY(-1px); }
.fundpanel #fundbtn:disabled { background: var(--line-2); color: var(--ink-3); }

/* ---- homepage category sections (Kalshi "Politics >" pattern) ---- */
.mkt-sec { margin-top: 38px; }
.mkt-sec:first-child { margin-top: 10px; }
.mkt-sec-head { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 16px; }
.mkt-sec-head h2 { font-size: 22px; font-weight: 700; letter-spacing: -0.02em; margin: 0; color: var(--ink); }
/* brand, not momentum: this chevron means "more of this category", it is not an up-tick */
.mkt-sec-head svg { width: 15px; height: 15px; color: var(--brand); transition: transform .15s; }
.mkt-sec-head:hover svg { transform: translateX(3px); }

/* ---- detail page: lead with the funding-momentum chart (Kalshi chart-led layout) ---- */
.detail > .dlead { grid-area: hero; }
.dlead { margin-top: 20px; border: 1px solid var(--line); border-radius: 16px; padding: 22px 24px 18px; background: var(--white); }
.dlead-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 12px; }
.dlead-stat { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.dlead-big { font-family: var(--sans); font-size: 40px; letter-spacing: -0.035em; font-variant-numeric: tabular-nums; line-height: 1; color: var(--ink); }
.dlead-unit { font-size: 14px; color: var(--ink-3); }
.dlead-stat .chg { font-size: 14px; }
.dlead-tf { display: flex; gap: 3px; flex: 0 0 auto; }
.dlead-tf button { font-family: var(--sans); font-size: 13px; font-weight: 600; color: var(--ink-3); background: none; border: 0; padding: 6px 11px; border-radius: 8px; cursor: pointer; transition: color .15s, background .15s; }
.dlead-tf button.on { color: var(--ink); background: var(--panel); }
.dlead-tf button:hover { color: var(--ink); }
.dlead-plot { position: relative; width: 100%; height: 300px; }
.dlead-plot .dlead-svg { display: block; width: 100%; height: 100%; }
.dlead-dot { position: absolute; width: 9px; height: 9px; border-radius: 50%; transform: translate(-50%,-50%); }
.dlead-foot { margin-top: 12px; padding-top: 14px; border-top: 1px solid var(--line); font-size: 13px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.dlead-foot b { color: var(--ink); font-weight: 600; }
/* photo now lives inside About */
.dsec .dhero { margin-top: 4px; margin-bottom: 18px; }

/* ---- detail chart: full-width, un-boxed, Kalshi feel (thin line + axis + toggles) ---- */
.detail-wide { max-width: var(--mkt-maxw); }
.dlead { border: 0; background: none; padding: 0; margin-top: 14px; margin-bottom: 8px; }
.dlead-top { display: flex; align-items: baseline; gap: 16px; margin-bottom: 4px; }
.lead-plot { position: relative; }
.lead-svgwrap { position: relative; width: 100%; height: 300px; }
.lead-svgwrap svg { display: block; width: 100%; height: 100%; }
/* the live chart paints into a canvas instead of an SVG; same box either way */
.lead-svgwrap canvas { display: block; width: 100%; height: 100%; }
.lead-dot { position: absolute; width: 9px; height: 9px; border-radius: 50%; transform: translate(-50%,-50%); }
/* the same live pulse the flagship card and the grid cards run on their end dot */
@media (prefers-reduced-motion: no-preference) { .lead-dot { animation: flagpulse 2.4s ease-out infinite; } }
/* the detail end-dot pulses in the line's own colour (green up, red down) */
.lead-y { position: absolute; top: 0; right: 0; height: 100%; width: 42px; pointer-events: none; }
.lead-y span { position: absolute; right: 0; transform: translateY(-50%); font-size: 11.5px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.lead-x { position: relative; height: 16px; margin-top: 8px; }
.lead-x span { position: absolute; font-size: 11.5px; color: var(--ink-3); white-space: nowrap; }
.dlead-bottom { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 14px; }
.dlead-vol { font-size: 13px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.dlead-vol b { color: var(--ink); font-weight: 600; }
.dlead-tf { display: flex; gap: 2px; flex: 0 0 auto; }
.dlead-tf button { font-family: var(--sans); font-size: 13px; font-weight: 600; color: var(--ink-3); background: none; border: 0; padding: 5px 12px; border-radius: 8px; cursor: pointer; transition: color .15s, background .15s; }
.dlead-tf button.on { color: var(--ink); background: var(--panel); }
.dlead-tf button:hover { color: var(--ink); }

/* ---- lead chart hover trace: crosshair + dot + tooltip (Kalshi) ---- */
.lead-svgwrap { cursor: crosshair; }
.lead-cross { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--line-2); transform: translateX(-0.5px); opacity: 0; pointer-events: none; transition: opacity .12s; }
.lead-cdot { position: absolute; width: 10px; height: 10px; border-radius: 50%; transform: translate(-50%,-50%); opacity: 0; pointer-events: none; box-shadow: 0 0 0 3px var(--white); }
/* Compact tooltip, closer to Kalshi/Polymarket than the old chunky black box:
   smaller type, tighter padding, the value the only emphasised token. */
.lead-tip { position: absolute; z-index: 4; background: var(--brand); color: #fff; border-radius: 6px; padding: 4px 7px; font-size: 10.5px; line-height: 1.4; white-space: nowrap; opacity: 0; pointer-events: none; display: flex; flex-direction: column; box-shadow: 0 4px 14px rgba(10,10,11,0.18); }
.lead-tip b { font-variant-numeric: tabular-nums; font-weight: 600; font-size: 12px; }
.lead-tip span { color: rgba(255,255,255,0.6); font-size: 10px; }
.lead-svgwrap.tracing .lead-cross, .lead-svgwrap.tracing .lead-cdot, .lead-svgwrap.tracing .lead-tip { opacity: 1; }
.lead-svgwrap.tracing .lead-dot { opacity: 0; }   /* only the hover dot shows while tracing */

/* Live activity under the chart. Same data as the line, read as a list: who
   funded, how many views that bought, when. Rows arrive by prepend, and the
   newest briefly lifts so an update is noticeable without being a distraction. */
.lead-act { margin-top: 14px; border-top: 1px solid var(--line); }
.lead-act-row { display: flex; align-items: baseline; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--line); font-size: 13px; }
.lead-act-row:last-child { border-bottom: 0; }
.lead-act-who { font-weight: 600; color: var(--ink); }
.lead-act-v { color: var(--ink-2); font-variant-numeric: tabular-nums; }
.lead-act-t { margin-left: auto; color: var(--ink-3); font-size: 11.5px; font-variant-numeric: tabular-nums; }
.lead-act-row.refund .lead-act-v { color: var(--mkt-dn); }
@keyframes leadActIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.lead-act-row.fresh { animation: leadActIn .28s ease-out; }
@media (prefers-reduced-motion: reduce) { .lead-act-row.fresh { animation: none; } }
.lead-live { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; color: var(--ink-3); }
.lead-live::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--mkt-up); }
.lead-live.stale::before { background: var(--ink-3); }

/* Flying contribution labels, Polymarket-style: a rapid staccato stream in the
   bottom-right of the plot (near the live/now edge, clear of the right axis).
   Each new contribution pops at the corner and streams upward, fading fast. They
   are released one every ~150ms so a batch reads as bam-bam-bam rather than a
   pile, and time separation keeps them from overlapping. Live-only garnish:
   pointer-events off, removes itself when the animation ends. */
/* Same fixed-length queue as the card tape, one size up. A real flex column,
   bottom-anchored, so two numbers can NEVER overlap however fast they arrive:
   layout keeps them a line apart. New number in at the bottom, the one pushed past
   the last slot out at the top, nothing on a self-expiry timer. Transforms are only
   used for the entry/exit slide, never for a drift, so nothing ever leaves its
   layout box and collides with a neighbour. */
/* flush to the left edge of the plot, where the line starts */
.lead-fly { position: absolute; left: 0; bottom: 12%; right: auto; top: auto;
  display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start;
  gap: 5px; max-height: 66%; pointer-events: none; z-index: 3; }
.lead-fly-item { font-weight: 500; font-size: 14px; letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums; color: var(--ink-2); white-space: nowrap; text-align: left;
  will-change: transform, opacity; opacity: 0; transform: translateY(7px);
  transition: opacity .19s ease-out, transform .19s ease-out; }
.lead-fly-item.in  { opacity: 1; transform: none; }
.lead-fly-item.out { opacity: 0; transform: translateY(-3px); transition-duration: .24s; }
.lead-fly-item.refund { color: var(--mkt-dn); }
@media (prefers-reduced-motion: reduce) {
  .lead-fly-item, .lead-fly-item.in, .lead-fly-item.out { transform: none; transition: opacity .19s linear; }
}

/* ---- give panel: Kalshi padding + boxed amount field + dividers ---- */
.fundpanel { padding: 20px; gap: 14px; border-radius: 16px; }
.fp-amt { border: 1px solid var(--line-2); border-radius: 12px; padding: 13px 15px; }
.fp-amt-lab { font-size: 14px; color: var(--ink-3); font-weight: 500; }
.fp-amt-in .cur { font-size: 22px; }
.fp-amt-in input { font-size: 24px; }
.viewsout { padding-top: 16px; margin-top: 2px; }

/* ---- detail market icon (80x80, Kalshi size) + panel padding ---- */
.dhead-ic { width: 80px; height: 80px; border-radius: 14px; object-fit: cover; flex: 0 0 auto; border: 1px solid var(--line); }
.fundpanel { padding: 22px; }
@media (max-width: 620px) { .dhead-ic { width: 56px; height: 56px; border-radius: 12px; } }

/* ---- clip rows below the graph (Polymarket outcome-row analog): funded clips + views ---- */
.cliprows { display: flex; flex-direction: column; margin-top: 6px; }
.cliprow { display: flex; align-items: center; gap: 14px; padding: 14px 2px; border-top: 1px solid var(--line); }
.cliprow:last-child { border-bottom: 1px solid var(--line); }
.cr-thumb { width: 46px; height: 46px; border-radius: 9px; object-fit: cover; flex: 0 0 auto; background: var(--panel); }
.cr-mid { flex: 1; min-width: 0; }
.cr-h { font-size: 15px; font-weight: 600; letter-spacing: -0.01em; }
.cr-p { font-size: 12.5px; color: var(--ink-3); margin-top: 2px; }
.cr-views { text-align: right; margin-right: 20px; }
.cr-v { font-family: var(--sans); font-size: 18px; font-weight: 600; font-variant-numeric: tabular-nums; display: block; letter-spacing: -0.01em; }
.cr-l { font-size: 11px; color: var(--ink-3); }
.cr-chg { font-size: 14px; font-weight: 600; flex: 0 0 auto; min-width: 58px; text-align: right; }

/* ---- homepage section rhythm: cleaner, airier spacing (Kalshi) ---- */
.mkt-sec { margin-top: 46px; }
.mkt-sec:first-child { margin-top: 14px; }
.mkt-sec-head { margin: 0 0 18px; }
.mkt-sec-head h2 { font-size: 23px; }
.mktwrap .kgrid { gap: 20px; }

/* ---- larger clip rows (Kalshi row scale) ---- */
.cliprow { gap: 16px; padding: 18px 2px; }
.cr-thumb { width: 60px; height: 60px; border-radius: 12px; }
.cr-h { font-size: 17px; }
.cr-p { font-size: 13px; }
.cr-v { font-size: 20px; }
.cr-l { font-size: 11.5px; }
.cr-chg { font-size: 15px; }

/* ---- no divider line between homepage sections (the generic section border-top) ---- */
.mkt-sec { border-top: 0; }

/* ---- "People are also funding" rows ---- */
.relrows { display: flex; flex-direction: column; margin-top: 6px; }
.relrow { display: flex; align-items: center; gap: 14px; padding: 12px 2px; }
.relrow + .relrow { border-top: 1px solid var(--line); }
.rr-ic { width: 48px; height: 48px; border-radius: 11px; object-fit: cover; flex: 0 0 auto; border: 1px solid var(--line); }
.rr-title { font-size: 15px; font-weight: 500; letter-spacing: -0.01em; line-height: 1.3; color: var(--ink); }
.relrow:hover .rr-title { text-decoration: none; }

/* ---- Social / Activity tabs ---- */
.socialtabs { display: flex; gap: 24px; margin-bottom: 16px; border-bottom: 1px solid var(--line); }
.socialtabs button { font-family: var(--sans); font-size: 21px; font-weight: 500; line-height: 26px; letter-spacing: -0.02em; color: var(--ink-3); background: none; border: 0; padding: 0 0 12px; margin-bottom: -1px; border-bottom: 2px solid transparent; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; }
.socialtabs button.on { color: var(--ink); border-bottom-color: var(--ink); }
.socialtabs button:hover { color: var(--ink); }
.live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--mkt-dn); display: inline-block; }
@media (prefers-reduced-motion: no-preference) { .socialtabs button.on .live-dot { animation: flagpulse 2s ease-out infinite; } }

/* ---- shrink give panel to Kalshi dimensions (352w, 44px input + button, compact) ---- */
.fundpanel { padding: 18px; gap: 12px; }
.fp-amt { padding: 9px 15px; border-radius: 8px; }
.fp-amt-lab { font-size: 14px; }
.fp-amt-in .cur { font-size: 17px; }
.fp-amt-in input { font-size: 19px; }
.quickadd button { padding: 4px 12px; font-size: 12px; }
.viewsout { padding-top: 14px; }
.vo-n { font-size: 20px; }
.vo-l { font-size: 14px; }
.fundpanel #fundbtn { height: 44px; padding: 0 20px; font-size: 15px; }
.fpnote { font-size: 11px; line-height: 1.45; }

/* ---- shrink flagship to Kalshi height (~416px): smaller title/number/chart, tighter pad ---- */
.flag { padding: 22px 26px 18px; }
.flag-top { margin-bottom: 12px; }
.flag-title { font-size: clamp(21px, 2.3vw, 28px); margin-bottom: 16px; }
.flag-body { gap: 28px; align-items: center; }
.flag-big { font-size: clamp(40px, 4.2vw, 54px); }
.flag-vol { margin-top: 12px; }
.flag-news { font-size: 14px; margin-top: 12px; }
.flag .btn-lg { margin-top: 16px; padding: 11px 22px; }
.flag-chart .flagsvg { height: 230px; }

/* ---- detail: no outline on share/save icon buttons, more space between chart and panel ---- */
.iconbtn { border: 0; background: none; }
.iconbtn:hover { border: 0; background: var(--panel); color: var(--ink); }
.iconbtn.on { border: 0; background: var(--panel-2); }
.detail { column-gap: 52px; }

/* ---- activity pane: live header ---- */
.act-head { display: flex; justify-content: flex-end; margin-bottom: 10px; }
.act-live { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600; color: var(--mkt-dn); }
.social-pane .wosform { margin-bottom: 18px; }

/* ---- detail title: Kalshi size (30px) with the topic eyebrow above it ---- */
.dhead h1 { font-size: clamp(24px, 2.6vw, 30px); line-height: 1.18; }
.deyebrow { font-size: 12.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 6px; }

/* ---- give panel: impact is the hero. "Times seen" is the big number that counts
       up; the dollar amount is the secondary control that drives it. ---- */
.fundpanel { padding: 22px; gap: 18px; }
.fp-amt { border: 0; border-radius: 0; padding: 0; align-items: baseline; }
.fp-amt-lab { font-size: 15px; color: var(--ink-2); font-weight: 500; }
.fp-amt-in .cur { font-size: 18px; color: inherit; }
.fp-amt-in input { font-size: 24px; }
.quickadd { justify-content: flex-end; }
.viewsout { border-top: 1px solid var(--line); padding-top: 16px; }
.vo-main { align-items: baseline; }
.vo-n { font-size: 46px; font-weight: 700; line-height: 1; letter-spacing: -0.03em; }
.vo-l { font-size: 15px; color: var(--ink-2); }

/* ---- a touch more breathing room between the detail content and the sticky nav/tabs ---- */
.detail { padding-top: 30px; }

/* ---- "People are also funding": no divider lines between rows ---- */
.relrow + .relrow { border-top: 0; }

/* ---- grey Verge watermark, top-right of the detail graph ---- */
.lead-wm { position: absolute; top: 2px; right: 54px; font-size: 15px; pointer-events: none; }

/* ---- About: one large paragraph (Kalshi ~18px) ---- */
#s-about .dlead { font-size: 19px; font-weight: 500; line-height: 1.5; color: var(--ink); }
#s-about .dbody { font-size: 15px; line-height: 1.6; color: var(--ink-2); margin: 0 0 13px; max-width: none; }
#s-about .dbody:last-child { margin-bottom: 0; }
#s-about .dbody b { color: var(--ink); font-weight: 600; }

/* ---- nav: shift search right, next to Log In / Sign Up ---- */
.appnav.mktnav .mktsearch { flex: 0 1 300px; max-width: 300px; margin-left: auto; }

/* ---- card sizing: number proportionate to the title (Kalshi), not dwarfing it ---- */
.mcard .mc-big { font-size: 26px; }
.mcard .mc-title { font-size: 18px; }

/* ---- Trending lands at the very top of the page ---- */
#board { scroll-margin-top: 240px; }

/* ---- trending rail: views under the % ---- */
.rright { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; flex: 0 0 auto; text-align: right; }
.rright .rchg { font-size: 12.5px; }
.rviews { font-size: 11.5px; color: var(--ink-3); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ---- comment cards (larger, Polymarket feel) with a "gave X views" tag ---- */
.wos { display: flex; flex-direction: column; gap: 12px; margin-top: 4px; }
.cmt { border: 1px solid var(--line); border-radius: 14px; padding: 18px 20px; }
.cmt-top { display: flex; align-items: center; gap: 11px; flex-wrap: wrap; }
.cmt-av { width: 40px; height: 40px; border-radius: 10px; object-fit: cover; flex: 0 0 auto; }
.cmt-name { font-size: 15.5px; font-weight: 600; letter-spacing: -0.01em; color: var(--ink); }
.cmt-name a { color: var(--ink); }
.cmt-when { font-size: 13px; color: var(--ink-3); }
/* One rhythm for every comment, root or reply: the text belongs to the name above
   it (6px), the actions are a step away from the text (10px), and the gap between
   one person and the next is bigger than either (see .cmt-thread). The old 12/12
   made all three distances equal, so a reply's header floated between the comment
   it answered and its own body with nothing to say which it belonged to. */
.cmt-text { font-size: 15.5px; line-height: 1.5; color: var(--ink); margin: 6px 0 0 51px; }
.cmt-actions { margin: 10px 0 0 51px; }
.cmt-act { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--ink-3); }
.cmt-act svg { width: 17px; height: 17px; }
.cmt-act b { font-weight: 500; }
.social-pane .wosform { border: 1px solid var(--line); border-radius: 14px; padding: 16px 18px; margin-bottom: 18px; }
.social-pane .wosform textarea { font-size: 15.5px; min-height: 46px; }

/* ---- keep the search adjacent to Log In / Sign Up (no gap) ---- */
/* 408px is the results panel's width: field and panel are one object, so they
   share an edge rather than the panel hanging wider than the thing it belongs to. */
.appnav.mktnav .mktsearch { flex: 0 1 408px; max-width: 408px; margin-left: auto; }
.appnav.mktnav .navcta { margin-left: 0; }

/* ---- trending rail: no photos, title wraps, % + views on the right ---- */
/* Center the title against the two-line (% + views) block so a one-line title
   sits mid-row instead of pinned to the top, which read as uneven spacing. */
.railrow { align-items: center; gap: 14px; padding: 13px 16px; }
.railrow .rname { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 14px; line-height: 1.32; }

/* ---- section headings: lighter/smaller (Kalshi), more breathing room ---- */
.mkt-sec-head h2 { font-size: 21px; font-weight: 600; }
.mkt-sec { margin-top: 54px; }
.mkt-sec:first-child { margin-top: 32px; }
.mkt-sec-head { margin-bottom: 20px; }

/* ---- larger "Trending" rail heading ---- */
.mktwrap .railcard h4 { font-size: 17px; font-weight: 600; color: var(--ink); letter-spacing: -0.01em; padding: 15px 16px 12px; }

/* ---- Seenfold watermark: up top-right, in line with the stat row, larger ---- */
.dlead { position: relative; }
.lead-wm { top: 6px; right: 0; font-size: 20px; }
/* The watermark used to be hidden on phones: it is absolutely positioned over the
   right end of the stat row, and that row runs the full width there, so the two
   printed on top of each other. It is kept now (the mark belongs on the chart, the
   way Kalshi marks theirs) and the collision is solved properly instead, by reserving
   a column for it with .dlead-top { padding-right } in the max-width:720px block
   above, which lets the stat wrap under itself. */

/* ---- detail text scale, relative to Kalshi (lighter title, smaller headings/number) ---- */
.dhead h1 { font-size: clamp(23px, 2.3vw, 28px); font-weight: 500; }
.dsec h3 { font-size: 21px; font-weight: 600; letter-spacing: -0.02em; }
.dlead-big { font-size: 34px; }
.dlead-unit { font-size: 13px; }

/* ---- clip rows: larger, more spacious (Kalshi outcome-row scale) ---- */
.cliprow { padding: 22px 2px; gap: 18px; }
.cr-thumb { width: 60px; height: 60px; border-radius: 12px; }
.cr-h { font-size: 22px; font-weight: 600; letter-spacing: -0.01em; }
.cr-p { font-size: 14.5px; margin-top: 4px; }
.cr-v { font-size: 29px; letter-spacing: -0.02em; }
.cr-l { font-size: 13px; }
.cr-views { margin-right: 28px; }
.cr-chg { font-size: 17px; min-width: 66px; }

/* ---- social tabs: match Kalshi section-title size ---- */
.socialtabs button { font-size: 21px; }

/* ---- Top Funders: avatar + name + green views funded (no medals) ---- */
.lb { display: flex; flex-direction: column; }
.lbrow { display: flex; align-items: center; gap: 14px; padding: 13px 2px; border-top: 1px solid var(--line); }
.lbrow:first-child { border-top: 0; }
.lbav { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; }
.lbn { flex: 1; min-width: 0; font-size: 16px; font-weight: 500; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lbn a { color: var(--ink); }
.lbviews { font-size: 16px; font-weight: 600; color: var(--brand); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ---- Activity: compact single-line rows ---- */
.actfeed { display: flex; flex-direction: column; }
.actrow { display: flex; align-items: center; gap: 12px; padding: 12px 2px; border-top: 1px solid var(--line); }
.actrow:first-child { border-top: 0; }
.actav { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; }
.actmid { flex: 1; min-width: 0; font-size: 14.5px; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.actmid a { color: var(--ink); font-weight: 600; }
.actg { color: var(--brand); font-weight: 600; }
.actwhen { font-size: 13px; color: var(--ink-3); flex: 0 0 auto; white-space: nowrap; }

/* ---- trending rail titles: grey, not bold ---- */
.railrow .rname { color: var(--ink-2); font-weight: 400; }

/* ==== flagship chart: smaller + hover trace + top-right black watermark ==== */
.flag-plot { position: relative; height: 175px; cursor: crosshair; }
.flag-plot .flagsvg { width: 100%; height: 100%; display: block; }
.flag-wm { position: absolute; top: 0; right: 2px; left: auto; font-size: 22px; z-index: 3; pointer-events: none; }
.flag-cross { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--line-2); transform: translateX(-0.5px); opacity: 0; pointer-events: none; }
.flag-cdot { position: absolute; width: 9px; height: 9px; border-radius: 50%; transform: translate(-50%,-50%); opacity: 0; pointer-events: none; box-shadow: 0 0 0 3px var(--white); }
.flag-tip { position: absolute; z-index: 4; background: var(--brand); color: #fff; border-radius: 9px; padding: 6px 9px; font-size: 12px; line-height: 1.3; white-space: nowrap; opacity: 0; pointer-events: none; display: flex; flex-direction: column; }
.flag-tip b { font-variant-numeric: tabular-nums; }
.flag-tip span { color: rgba(255,255,255,0.6); font-size: 10.5px; }
.flag-plot.tracing .flag-cross, .flag-plot.tracing .flag-cdot, .flag-plot.tracing .flag-tip { opacity: 1; }
.flag-plot.tracing .flag-dot { opacity: 0; }   /* only the hover dot shows while tracing */

/* ==== smaller card text (Kalshi scale) ==== */
.mcard .mc-title { font-size: 19px; }
/* The views figure is the hero of the card: make it big and let it pop. */
.mcard .mc-big { font-size: clamp(34px, 3vw, 44px); font-weight: 600; }
.mcard .mc-cat { font-size: 10.5px; }
.mcard .mc-unit { font-size: 11.5px; }

/* ==== smaller section headings ==== */
.mkt-sec-head h2 { font-size: 18px; font-weight: 600; }

/* ==== rail scrolls with the page (not sticky) ==== */
.mktwrap .rail { position: static; }

/* ==== clip rows: skinnier + smaller ==== */
.cliprow { padding: 14px 2px; gap: 14px; }
.cr-thumb { width: 44px; height: 44px; border-radius: 10px; }
.cr-h { font-size: 16px; }
.cr-p { font-size: 13px; margin-top: 2px; }
.cr-v { font-size: 20px; }
.cr-l { font-size: 11.5px; }
.cr-views { margin-right: 20px; }
.cr-chg { font-size: 14px; min-width: 56px; }

/* ==== detail section headings + tabs: down to Kalshi scale ==== */
.dsec h3 { font-size: 18px; font-weight: 600; }
.socialtabs button { font-size: 20px; }

/* ==== Market Rules accordion (collapsible section + rows) ==== */
/* font-family: a <button> does not inherit one, so the heading inside it rendered in
   the UA default while every other section heading was Geist. */
.rules-head { display: flex; align-items: center; justify-content: space-between; width: 100%; background: none; border: 0; padding: 0 0 14px; cursor: pointer; text-align: left; font-family: inherit; color: inherit; }
.rules-head h3 { margin: 0; }
.rules-head .acc-chev { width: 20px; height: 20px; color: var(--ink-3); transition: transform .2s; }
.rules.collapsed .rules-body { display: none; }
.rules.collapsed .rules-head .acc-chev { transform: rotate(-90deg); }
.rules-body { display: flex; flex-direction: column; }
.acc { border-top: 1px solid var(--line); }
.acc-head { display: flex; align-items: center; gap: 12px; width: 100%; background: none; border: 0; padding: 15px 2px; cursor: pointer; text-align: left; }
.acc-ic { color: var(--ink); flex: 0 0 auto; display: inline-flex; }
.acc-ic svg { width: 20px; height: 20px; }
.acc-title { flex: 1; font-family: var(--sans); font-size: 15px; font-weight: 500; letter-spacing: -0.01em; color: var(--ink); }
.acc-chev { width: 18px; height: 18px; color: var(--ink-3); transition: transform .2s; flex: 0 0 auto; }
.acc.open .acc-chev { transform: rotate(180deg); }
.acc-body { display: none; padding: 0 2px 16px 2px; }
.acc.open .acc-body { display: block; }
.acc-body p { font-size: 14px; line-height: 1.55; color: var(--ink-2); margin: 0; }

/* ==== "People are also funding": rounded hover ====
   The hover was a hardcoded #F4F4F4, so in dark mode the row turned near-white
   under white text and the title vanished while you were pointing at it. The token
   follows the theme, which is the whole reason it exists. */
.relrow { border-radius: 10px; padding: 12px 10px; transition: background .12s; }
.relrow + .relrow { border-top: 0; }
.relrow:hover { background: var(--panel); }

/* ==== flagship chart with axes + dates (like the detail view), watermark above ==== */
.flag-body { align-items: start; }
.flag-chart { display: flex; flex-direction: column; }
.flag-chart-head { display: flex; justify-content: flex-end; align-items: flex-start; height: 22px; }
.flag-wm { position: static; font-size: 20px; }
.flag-plot { position: relative; height: auto; cursor: crosshair; }
.flag-svgwrap { position: relative; height: 256px; }
.flag-svgwrap svg { width: 100%; height: 100%; display: block; }
.flag-y { position: absolute; top: 0; right: 0; height: 100%; width: 44px; pointer-events: none; }
.flag-y span { position: absolute; right: 0; transform: translateY(-50%); font-size: 11px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.flag-x { position: relative; height: 16px; margin-top: 6px; }
.flag-x span { position: absolute; font-size: 11px; color: var(--ink-3); white-space: nowrap; }
.flag-svgwrap.tracing .flag-cross, .flag-svgwrap.tracing .flag-cdot, .flag-svgwrap.tracing .flag-tip { opacity: 1; }
.flag-svgwrap.tracing .flag-dot { opacity: 0; }   /* only the hover dot shows while tracing */
.flag-svgwrap .flag-line-dim { stroke: #D6D4CE; }   /* grey base under the coloured line */

/* ==== detail section headings: Kalshi typ-headline-x10 (24px / 500 / 28px) ==== */
.dsec h3 { font-size: 24px; font-weight: 500; line-height: 28px; letter-spacing: -0.02em; }

/* ==== clip-row views in a pill outline (Kalshi odds pill) ==== */
.cr-views { text-align: right; }
.cr-v { display: block; font-size: 18px; }

/* ==== flagship info column: more breathing room between stat, volume and news ==== */
.flag-vol { margin-top: 20px; }
.flag-news { margin-top: 20px; line-height: 1.6; }

/* ==== flagship watermark: title is now full-width above; sit "Verge" at the top
       of the chart column (below the title), not pulled up beside it ==== */
.flag-chart-head { height: auto; margin-bottom: 4px; }
.flag-wm { position: static; margin-top: 0; font-size: 18px; }

/* ==== card change %: bare arrow + figure, no pill outline; green rising, red fading ==== */
.mc-stat .chg { display: inline-flex; align-items: center; gap: 3px; font-weight: 600; line-height: 1; }

/* ==== Activity feed: Kalshi trade-feed layout (square icon + 3 stacked lines + right time) ==== */
.actrow { display: flex; align-items: flex-start; gap: 14px; padding: 18px 2px; border-top: 1px solid var(--line); }
.actrow:first-child { border-top: 0; }
.actic { width: 44px; height: 44px; border-radius: 10px; object-fit: cover; flex: 0 0 auto; border: 1px solid var(--line); background: var(--panel); }
.actrow .actmid { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1; }
.act-who { font-size: 15px; color: var(--ink-3); line-height: 1.3; }
.act-do { font-size: 16px; font-weight: 600; color: var(--brand); line-height: 1.3; }
.actrow.down .act-do { color: var(--mkt-dn); }
.act-sub { font-size: 14px; color: var(--ink-3); line-height: 1.3; }
.actrow .actwhen { font-size: 14px; color: var(--ink-3); flex: 0 0 auto; white-space: nowrap; margin-left: 12px; padding-top: 1px; }

/* ==== People are also funding: Show more reveal ==== */
.relmore[hidden] { display: none; }
.relmore-btn { align-self: flex-start; margin-top: 8px; background: none; border: 0; padding: 8px 2px; font-family: var(--sans); font-size: 15px; font-weight: 600; color: var(--brand); cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
/* Deepens in light, brightens in dark, since --ink flips with the theme. */
.relmore-btn:hover { color: color-mix(in srgb, var(--brand) 78%, var(--ink)); }
.relmore-btn svg { width: 16px; height: 16px; transition: transform .2s; }
.relmore-btn.open svg { transform: rotate(180deg); }

/* ==== Market Rules: line under the final row too ==== */
.rules-body .acc:last-child { border-bottom: 1px solid var(--line); }

/* ==== comments composer: one unified bordered box (Polymarket style) ==== */
.wosform { border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; background: var(--white); transition: border-color .15s; }
.wosform:focus-within { border-color: var(--ink); }
.wosform textarea { border: 0; border-radius: 0; padding: 0; min-height: 46px; resize: none; background: none; }
.wosform textarea:focus { border-color: transparent; }
.wosform-foot { margin-top: 8px; }
.wos-gate { color: var(--ink); font-weight: 600; }

/* ==== social tabs: consistent gap from the tab bar to the first item of every pane ==== */
.socialtabs { margin-bottom: 18px; }
.social-pane > :first-child { margin-top: 0; }

/* ==== fund panel: at $0 the reach reads 0, not a per-dollar rate (no false association) ====
   The figure stays full-strength ink at zero. Greying it made the headline number of
   the panel look disabled before you had done anything wrong, and it changed colour
   as you typed, which read as the field having been broken until then. The label
   underneath already carries the state. */
.viewsout.vo-empty .vo-n { color: var(--ink); }

/* ==== clip rows: outline pill around the % change (not the views) ==== */
.cr-chg.chg.up { display: inline-flex; align-items: center; gap: 4px; border: 1px solid currentColor; border-radius: 999px; padding: 3px 12px; min-width: 0; font-size: 14px; font-weight: 600; color: var(--brand); }

/* ==== market cards: no divider line above the footer ==== */
.mc-foot { border-top: 0; }

/* ==== category page: title sits above the cards column, smaller (Kalshi layout) ==== */
.catmain { min-width: 0; }
.cathead { padding: 0 0 16px; }
.cathead h1 { font-size: clamp(23px, 2.2vw, 29px); letter-spacing: -0.03em; }
.catside { padding-top: 1px; }

/* ==== comment action bar: plain icons (no boxes), generous spacing ==== */
.cmt-actions { display: flex; align-items: center; gap: 24px; }
.cmt-act { display: inline-flex; align-items: center; gap: 7px; border: 0; background: none; padding: 0; color: var(--ink-3); font-size: 13px; font-family: var(--sans); cursor: pointer; transition: color .12s; }
.cmt-act svg { width: 18px; height: 18px; }
.cmt-act b { font-weight: 500; }
.cmt-act:hover { color: var(--brand); }
/* liked: the heart fills as well as changing colour, so the state survives being
   read at a glance and does not rely on a hue alone */
.cmt-act.on { color: var(--brand); }
.cmt-act.cmt-like.on svg { fill: currentColor; stroke: currentColor; }
/* nested reply actions: same plain style, tighter spacing */
.cmt-re-actions { gap: 18px; }

/* ==== replies: indented under the comment they answer ====
   They used to sit flush left with the same 40px avatar, so a thread read as three
   equal comments and the only clue you were looking at an answer was the wording.
   Indenting to the parent's text column and stepping the avatar down says it. */
.cmt-thread { margin: 18px 0 0 51px; display: flex; flex-direction: column; gap: 18px; }
/* Sits inside the thread, aligned with the replies it reveals, and reads as a
   control rather than as another comment. */
.cmt-more { align-self: flex-start; padding: 0; background: none; border: 0; cursor: pointer;
  font-family: var(--sans); font-size: 13.5px; font-weight: 600; color: var(--ink-2); }
.cmt-more:hover { color: var(--brand); }
.cmt-av.sm { width: 30px; height: 30px; border-radius: 8px; }
.cmt-re .cmt-name { font-size: 14.5px; }
.cmt-re .cmt-text { font-size: 15px; margin-left: 41px; }
.cmt-re .cmt-actions { margin-left: 41px; }

/* face and name are one target each, to the same profile */
.cmt-avlink { display: block; flex: 0 0 auto; line-height: 0; }
.cmt-avlink img { transition: opacity .12s; }
.cmt-avlink:hover img { opacity: 0.85; }

/* ==== inline reply composer (opens under the comment you answered) ==== */
.cmt-form { margin: 12px 0 0 51px; display: flex; flex-direction: column; gap: 8px; }
.cmt-re .cmt-form { margin-left: 42px; }
.cmt-form textarea { width: 100%; min-height: 62px; resize: vertical; padding: 10px 12px; border: 1px solid var(--line-2); border-radius: 10px; background: var(--white); font-family: var(--sans); font-size: 14px; line-height: 1.5; color: var(--ink); }
.cmt-form textarea:focus { outline: none; border-color: var(--ink-3); }
.cmt-form-foot { display: flex; align-items: center; justify-content: flex-end; gap: 10px; }
.cmt-cancel { border: 0; background: none; padding: 6px 4px; font-family: var(--sans); font-size: 13.5px; color: var(--ink-3); cursor: pointer; }
.cmt-cancel:hover { color: var(--ink); }

/* ==== Top Funders: label the green view counts ==== */
.lbv-l { color: var(--ink-3); font-weight: 400; font-size: 12px; }

/* ==== flagship: fill the left column (the comment feed) + anchor volume to the bottom ==== */
.flag-body { align-items: stretch; }
.flag-info { display: flex; flex-direction: column; height: 100%; }
/* Pinned to the bottom, so this padding is only the gap above it: trimming it hands
   those pixels to the feed and lands the feed's foot level with the chart's. */
.flag-vol { margin-top: auto; padding-top: 6px; }
/* The feed takes whatever height the column has left over rather than a fixed
   number, so the card is still sized by its chart and never grows or jumps as the
   carousel moves between causes. Masked at both ends so rows arrive and leave. */
/* No heading: an avatar next to a name next to a line of speech is a comment, and
   labelling it only spends a line saying so. */
.flag-talk { margin-top: 22px; flex: 1; min-height: 0; display: flex; flex-direction: column; }
/* Runs down to the foot of the chart, so the two columns end on the same line.
   height:0 + grow is what keeps that honest: at zero base the feed adds nothing to
   the row's intrinsic height, so the card is still sized by its chart, then it fills
   whatever is left. Wide fades at both ends mean only two or three comments are fully
   legible at a time; the rest are dissolving in or out. */
.flag-talk-vp { flex: 1 1 auto; height: 0; min-height: 92px; overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 20%, #000 70%, transparent 100%);
          mask-image: linear-gradient(to bottom, transparent 0, #000 20%, #000 70%, transparent 100%); }
/* Row spacing is padding, not gap: the crawl loops on exactly half the strip, and a
   flex gap would make half-the-strip land a few pixels off one whole copy. */
.flag-talk-strip { will-change: transform; }
@keyframes flagTalkRoll { from { transform: translate3d(0,0,0); } to { transform: translate3d(0,-50%,0); } }
.flag-trow { display: flex; align-items: flex-start; gap: 9px; min-width: 0; padding-bottom: 14px; }
.flag-tav { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; border: 1px solid var(--line); }
.flag-tb { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.flag-tn { font-size: 13px; font-weight: 600; color: var(--ink); line-height: 1.35; }
.flag-tt { font-size: 13px; color: var(--ink-3); line-height: 1.4; }

/* ==== every market nav aligns its brand to the board gutter (72px), regardless of page --pad ==== */
/* The category strip below must share the exact same gutter so its first tab lines
   up under the brand. On pages whose --pad isn't 72 (e.g. account/dashboard) the
   base .wrap padding would otherwise leave the tabs 16px to the left of the logo. */
.appnav.mktnav .appnav-in, .cattabs.mktcats .cattabs-in, .dashwrap { --gutter: clamp(22px, 5vw, 72px); padding-left: var(--gutter); padding-right: var(--gutter); }

/* ==== rail cards (Kalshi style): full-width divider under the header, no dividers between rows, smaller titles ==== */
.mktwrap .railcard h4 { font-size: 15px; border-bottom: 1px solid var(--line); padding: 14px 16px 12px; }
.mktwrap .railrow { border-top: 0; padding: 13px 16px; }
.mktwrap .railrow .rname { font-size: 13.5px; }

/* ---- auth modal: pop-up sign in / sign up (Google primary + email/password) ---- */
.authm { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; padding: 20px; }
.authm[hidden] { display: none; }
.authm-back { position: absolute; inset: 0; background: rgba(10,10,11,0.45); }
.authm-card { position: relative; z-index: 1; width: 100%; max-width: 400px; background: var(--white); border-radius: 20px; padding: 32px 28px 24px; box-shadow: 0 30px 80px -20px rgba(0,0,0,0.4); animation: authmIn .18s ease-out; }
/* The card takes focus on open (see authmodal.js) so the panel is keyboard-reachable
   without lighting up an input. It is a focus target, not an interactive control, so
   it should not draw a ring of its own. */
.authm-card:focus { outline: none; }

/* ---------- share modal (funded screen) ---------- */
/* Reuses .authm-back / .authm-x / authmIn so there is one modal language on the
   platform. Wider than the auth card because it carries a card preview. */
.sharem { position: fixed; inset: 0; z-index: 210; display: flex; align-items: center;
  justify-content: center; padding: 20px; }
.sharem[hidden] { display: none; }
.sharem-card { position: relative; z-index: 1; width: 100%; max-width: 748px; background: var(--white);
  border-radius: 20px; padding: 26px 26px 22px; max-height: 92vh; overflow-y: auto;
  box-shadow: 0 30px 80px -20px rgba(0,0,0,0.4); animation: authmIn .18s ease-out; }
.sharem-h { font-size: 21px; font-weight: 600; letter-spacing: -0.02em; margin: 0; }
/* The card is a tall 4:5 portrait and the note beside it is three lines, so the
   right-hand column used to run out of content halfway down and leave a dead band
   of background under the copy. The whole panel is one grid instead: the preview
   spans both rows on the left, the note sits top-right and the buttons bottom-right,
   so the actions fill the space the note does not. `display: contents` on the body
   lets its two children join the card's grid without touching the markup, which
   matters because three separate pages build this panel. */
.sharem-card { display: grid; grid-template-columns: 196px 1fr; column-gap: 24px; row-gap: 20px;
  align-content: start; }
.sharem-h { grid-column: 1 / -1; }
.sharem-body { display: contents; }
.sharem-prev { grid-column: 1; grid-row: 2 / span 2; }
.sharem-body > :not(.sharem-prev) { grid-column: 2; grid-row: 2; }
.sharem-foot { grid-column: 2; grid-row: 3; align-self: end; }
.sharem-prev { border-radius: 14px; overflow: hidden; background: var(--panel); min-height: 120px; }
.sharem-prev canvas { display: block; width: 100%; height: auto; }
.sharem-note { font-size: 13.5px; line-height: 1.62; color: var(--ink-2); margin: 0; }
.sharem-note b { color: var(--ink); font-weight: 600; }
.sharem-foot { display: grid; grid-template-columns: 1fr 1fr 1.2fr; gap: 9px; }
.sharem-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 50px;
  border: 1px solid var(--line-2); border-radius: 12px; background: var(--white); font-family: var(--sans);
  font-size: 14px; font-weight: 600; color: var(--ink); cursor: pointer; white-space: nowrap;
  transition: border-color .15s, background .15s; }
.sharem-btn:hover { border-color: var(--ink-3); background: var(--panel-2); }
/* Size lived in profile.html's own <style>, so any other page reusing this panel
   got full-size icons that shoved the labels onto two lines. It belongs here. */
.sharem-btn svg { flex: none; width: 18px; height: 18px; }
/* Neutral primary, matching the platform's own button language rather than
   borrowing a destination's brand colour. The sheet it opens is the OS one, so
   the button should not promise a specific network. */
.sharem-go { border-color: var(--brand); background: var(--brand); color: #fff; }
.sharem-go:hover { border-color: var(--brand); background: color-mix(in srgb, var(--brand) 86%, #000); color: #fff; }
@media (max-width: 640px) {
  .sharem-card { padding: 20px 18px 18px; grid-template-columns: 1fr; row-gap: 14px;
    max-height: calc(100dvh - 28px); overflow-y: auto; }
  .sharem-prev, .sharem-body > :not(.sharem-prev), .sharem-foot { grid-column: 1; grid-row: auto; }
  .sharem-prev { max-width: 210px; margin: 0 auto; }
  /* Cap the preview by HEIGHT, not width. The card is a 4:5 portrait, so a
     width-capped preview is ~262px tall and pushed the third button past the fold on
     a normal phone. Sizing off dvh means the preview gives up room on short screens
     and all three actions stay visible without scrolling. */
  .sharem-prev canvas { width: auto; height: auto; max-width: 100%; max-height: 40dvh; margin: 0 auto; }
  .sharem-foot { grid-template-columns: 1fr; gap: 8px; }
  .sharem-btn { height: 46px; }
  /* the panel is a single centred column on a phone, so the heading and the note
     read as off-centre against the card and the full-width buttons */
  .sharem-h, .sharem-note { text-align: center; }
}
@keyframes authmIn { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: none; } }
.authm-x { position: absolute; top: 14px; right: 14px; width: 30px; height: 30px; border: 0; background: none; font-size: 22px; line-height: 1; color: var(--ink-3); cursor: pointer; border-radius: 8px; }
.authm-x:hover { background: var(--panel); color: var(--ink); }
.authm-h { font-size: 22px; font-weight: 600; letter-spacing: -0.02em; text-align: center; margin: 4px 0 22px; color: var(--ink); }
.authm-google { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; height: 48px; border: 1px solid var(--line-2); border-radius: 12px; background: var(--white); color: var(--ink); font-family: var(--sans); font-size: 15px; font-weight: 600; cursor: pointer; transition: border-color .15s, background .15s; }
.authm-google:hover { border-color: var(--ink-3); background: var(--panel-2); }
.authm-google:disabled { cursor: default; opacity: .8; }
.authm-gi { display: inline-flex; }
/* inline loading spinner for the auth buttons (Google + email submit) so a click
   reads as "working" instantly instead of feeling dead during the auth round-trip */
.authm-spin { display: inline-block; width: 16px; height: 16px; border-radius: 50%; border: 2px solid currentColor; border-top-color: transparent; animation: authmSpin .6s linear infinite; vertical-align: -3px; margin-right: 8px; opacity: .85; }
@keyframes authmSpin { to { transform: rotate(360deg); } }
.authm-or { display: flex; align-items: center; gap: 12px; margin: 18px 0; color: var(--ink-3); font-size: 12px; letter-spacing: 0.06em; }
.authm-or::before, .authm-or::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.authm-in { width: 100%; height: 46px; border: 1px solid var(--line-2); border-radius: 12px; padding: 0 14px; font-family: var(--sans); font-size: 15px; color: var(--ink); background: var(--white); margin-bottom: 10px; }
.authm-in:focus { outline: none; border-color: var(--ink); }
.authm-in::placeholder { color: var(--ink-3); }
.authm-err { color: var(--mkt-dn); font-size: 13px; line-height: 1.4; margin: 2px 0 8px; }
.authm-go { margin-top: 8px; }
/* field label + secondary action, used by the finish-your-profile step */
.authm-l { display: block; font-size: 12.5px; font-weight: 600; color: var(--ink-2); margin: 2px 0 6px; }
.authm-err.is-ok { color: var(--mkt-up); }
.authm-alt { display: block; width: 100%; margin-top: 12px; padding: 8px 0; border: 0; background: none; font-family: var(--sans); font-size: 13.5px; color: var(--ink-3); cursor: pointer; }
.authm-alt:hover { color: var(--ink); }
.authm-foot { text-align: center; font-size: 14px; color: var(--ink-2); margin-top: 16px; }
.authm-foot a { color: var(--ink); font-weight: 600; }
.authm-fine { text-align: center; font-size: 11.5px; color: var(--ink-3); line-height: 1.5; margin-top: 14px; }
.authm-fine a { color: var(--ink-2); text-decoration: underline; }
.authm-confirm { text-align: center; }
.authm-tick { width: 46px; height: 46px; border-radius: 50%; background: color-mix(in srgb, var(--up) 16%, transparent); color: var(--up); display: flex; align-items: center; justify-content: center; font-size: 22px; margin: 4px auto 14px; }
.authm-sub { color: var(--ink-2); font-size: 14.5px; line-height: 1.55; margin: 0 auto 20px; max-width: 32ch; text-align: center; }
.authm-row { display: flex; justify-content: flex-end; margin: -2px 0 8px; }
.authm-row a { font-size: 13px; color: var(--ink-2); }
.authm-row a:hover { color: var(--ink); }

/* Keyboard focus. The file had no :focus-visible rule at all, so tabbing through
   the board showed only the browser default. One ring, in the action colour. */
*:focus-visible { outline: 2px solid var(--action); outline-offset: 2px; border-radius: 3px; }
/* The nav search already signals focus by opening its panel and changing its own
   border, so the global ring lands on top of an indicator that is already there
   and reads as a stray outline. Same for the fields that carry their own focus
   border. Keyboard users still get the field's own treatment. */
.mktsearch:focus-visible, .mktsearch input:focus-visible,
.searchbar input:focus-visible, .search input:focus-visible,
.field input:focus-visible, .field textarea:focus-visible { outline: none; }
::selection { background: color-mix(in srgb, var(--brand) 28%, transparent); }

/* ==== edge light ==========================================================
   A hairline that is brand purple at the top-left corner and fades into the
   normal --line within about a third of the run, so a card is quietly branded
   without a coloured box around it. Kalshi does this and it is the least noisy
   way to put a brand colour on a white card.

   It takes two backgrounds because a border cannot hold a gradient directly:
   the first is clipped to padding-box and paints the card fill, the second is
   clipped to border-box and shows through the transparent 1px border. Anything
   that later sets border-color on these cards will do nothing, which is why the
   hover state below moves the gradient instead. */
.mcard, .railcard, .flag {
  border: 1px solid transparent !important;
  background:
    linear-gradient(var(--white), var(--white)) padding-box,
    linear-gradient(135deg,
      var(--brand) 0%,
      color-mix(in srgb, var(--brand) 28%, var(--line)) 5%,
      var(--line) 15%,
      var(--line) 100%) border-box;
}
.mcard:hover {
  background:
    linear-gradient(var(--white), var(--white)) padding-box,
    linear-gradient(135deg,
      var(--brand) 0%,
      color-mix(in srgb, var(--brand) 50%, var(--line)) 7%,
      var(--line-2) 18%,
      var(--line-2) 100%) border-box;
}

/* ==== dark theme ==========================================================
   The palette is redefined, not the components: 987 of the declarations in this
   file already read a token, so the theme is these variables plus the handful of
   literal fills fixed below.

   --white is the odd one out. It is used 54 times as a CARD SURFACE and only 5
   times as literal white text, so in dark it becomes the raised surface rather
   than staying #FFF. Anywhere genuinely-white ink is needed on a coloured fill,
   use --action-ink, which stays white in both themes.

   Neutrals keep the warm bias the light theme has, pulled toward the cool end
   just enough that the purple does not look stranded on a warm brown-grey. */
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg:      #0B0B0D;
  --panel:   #141417;
  --panel-2: #1A1A1E;
  --white:   #141417;        /* card surface, see note above */
  --ink:     #F4F3F0;
  --ink-2:   #A8A7A0;
  --ink-3:   #76756E;
  --line:    #26262B;
  --line-2:  #34343B;
  --down:    #6E6E68;
  /* Brand holds: #9873F0 clears 5.67:1 on this ground, better than it manages on
     white. The market hues lift slightly so lime and coral keep their punch. */
  --brand:   #A98BF5;
  --mkt-up:  #29D48D;
  --mkt-dn:  #F4736C;
}
:root[data-theme="dark"] body { background: var(--bg); color: var(--ink); }

/* Literal fills that predate the tokens and would stay light-mode otherwise. */
:root[data-theme="dark"] .mcard,
:root[data-theme="dark"] .railcard,
:root[data-theme="dark"] .flag {
  background:
    linear-gradient(var(--panel), var(--panel)) padding-box,
    linear-gradient(135deg,
      var(--brand) 0%,
      color-mix(in srgb, var(--brand) 28%, var(--line)) 5%,
      var(--line) 15%,
      var(--line) 100%) border-box;
}
:root[data-theme="dark"] .appnav,
:root[data-theme="dark"] .appnav.mktnav,
:root[data-theme="dark"] .cattabs,
:root[data-theme="dark"] .sfoot { background: var(--bg); }
:root[data-theme="dark"] .acctrail,
:root[data-theme="dark"] .authm,
:root[data-theme="dark"] .fundpanel,
:root[data-theme="dark"] .wiz { background: var(--panel); }
:root[data-theme="dark"] .authm-google { background: var(--panel-2); color: var(--ink); }
/* dashed chart gridlines were tuned for a white ground */
:root[data-theme="dark"] .chartwrap line,
:root[data-theme="dark"] .flag-chart line,
:root[data-theme="dark"] .lead-svgwrap line { stroke: var(--line) !important; }

/* Detail-page chart gridlines are inline stroke="#EBE9E4" from the SVG builder and
   the canvas painter, so they cannot be reached by a token. Overriding the SVG here
   covers the static chart; series.js keeps its own value for the canvas one. */
:root[data-theme="dark"] .lead-svgwrap svg line,
:root[data-theme="dark"] .chartplot svg line,
:root[data-theme="dark"] .flag-svgwrap svg line { stroke: #26262B; }
:root[data-theme="dark"] .flag-svgwrap .flag-line-dim { stroke: #3A3A40; }
:root[data-theme="dark"] .lead-y span,
:root[data-theme="dark"] .lead-x span,
:root[data-theme="dark"] .charty span,
:root[data-theme="dark"] .chartx span,
:root[data-theme="dark"] .flag-y span { color: var(--ink-3); }

/* Dark: a scrim tuned to darken a white page turns a dark page to mud, and the
   card loses its edge because panel-on-scrim is nearly the same value. Lighten
   the scrim, blur it so the board still reads behind, and give the card a border
   so it separates from the ground rather than relying on a shadow that no longer
   registers. Same fix for the share modal. */
:root[data-theme="dark"] .authm-back,
:root[data-theme="dark"] .sharem-back {
  background: rgba(4, 4, 6, 0.62);
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
}
:root[data-theme="dark"] .authm-card,
:root[data-theme="dark"] .sharem-card {
  border: 1px solid var(--line-2);
  box-shadow: 0 30px 80px -20px rgba(0,0,0,0.75);
}
/* Photo scrims are baked for light cards; on dark they crush the image. */
:root[data-theme="dark"] .kgrad {
  background: linear-gradient(180deg, rgba(10,10,11,0) 0%, rgba(10,10,11,0.35) 55%, rgba(10,10,11,0.85) 100%);
}

/* Ink-as-fill. Seventeen rules paint a surface with --ink or --black and put white
   text on it, which is correct in light and inverts to white-on-white in dark. The
   token cannot fix this on its own because ink is doing two jobs: it is the text
   colour AND the "solid dark chip" colour. In dark the chip should stay dark and
   the text on it stays light, so these flip to a raised panel instead. */
:root[data-theme="dark"] .navmenu .nm-count,
:root[data-theme="dark"] .tab.active,
:root[data-theme="dark"] .startcta-m-btn,
:root[data-theme="dark"] .toast,
:root[data-theme="dark"] .tick,
:root[data-theme="dark"] .catside a.active,
:root[data-theme="dark"] .catside a.active:hover {
  background: var(--panel-2);
  color: var(--ink);
  border: 1px solid var(--line-2);
}
:root[data-theme="dark"] .sharem-go { background: var(--action); color: var(--action-ink); }
/* The card is near-black, and so is the panel behind it in dark mode, so the
   preview dissolved into the background. This ring is on the frame, not the
   canvas, so it shows you the card's edge without being exported into the PNG. */
:root[data-theme="dark"] .sharem-prev { box-shadow: 0 0 0 1px rgba(255,255,255,0.18); }
/* Same problem on the page itself: a near-black card on a near-black page has no
   edge. An outline rather than a box-shadow, because the canvas carries its drop
   shadow inline and an inline style would win over a shadow declared here. Drawn
   on the element, never into the exported PNG. */
:root[data-theme="dark"] canvas.fundedcard { outline: 1px solid rgba(255,255,255,0.14); outline-offset: -1px; }
/* Progress bars and chart dots were dark-on-light; on dark they need to read as
   the filled portion, so they take the brand rather than inverting to white. */
:root[data-theme="dark"] .prog > i,
:root[data-theme="dark"] .dprogress .bar i,
:root[data-theme="dark"] .lbbar i,
:root[data-theme="dark"] .drow .mid .bar i,
:root[data-theme="dark"] .kcard .prog > i,
:root[data-theme="dark"] .feat .prog > i { background: var(--brand); }
:root[data-theme="dark"] .sparkdot,
:root[data-theme="dark"] .chartdot { background: var(--ink); }
:root[data-theme="dark"] .chartcdot { background: var(--ink); border-color: var(--panel); }
:root[data-theme="dark"] .cardline .brand-dot { background: var(--brand); }
/* Switch knob and the inverted CTA on the dark hero band */
:root[data-theme="dark"] .switch::after { background: var(--ink); }
:root[data-theme="dark"] .feat .btn-primary { background: var(--action); color: var(--action-ink); }
:root[data-theme="dark"] .sbanner .sb-cta { background: var(--panel-2); color: var(--ink); }
:root[data-theme="dark"] .sbanner .sb-cta:hover { background: var(--line-2); }
:root[data-theme="dark"] .dhero-dot.on { background: var(--ink); }
:root[data-theme="dark"] .cc-fill { background: var(--brand); }

/* The rail sits on --white and marked its selection with --panel. In light those
   are two different greys; in dark they are the same #141417, so the selected
   item was invisible. Dark states it in purple instead of a grey step, which
   reads at a glance and matches the icons already sitting next to the label. */
/* --panel and --white are the same value in dark, so the light-mode hover on these
   two panels lands on their own background and reads as no hover at all. */
:root[data-theme="dark"] .acctrail a:hover,
:root[data-theme="dark"] .navmenu a:hover,
:root[data-theme="dark"] .navmenu button:hover { background: var(--panel-2); }
:root[data-theme="dark"] .acctrail a.active,
:root[data-theme="dark"] .acct-nav a.active {
  background: color-mix(in srgb, var(--brand) 15%, transparent);
  color: var(--brand);
}

/* The save hint is appended as a third child of .setrow, and the row is
   justify-content: space-between, so the moment a save runs the three children
   spread and the input jumps left. It only shows after the first save, which is
   why the field looks like it moves on its own. Drop the hint onto its own line
   so the control stays put. */
.setrow:has(.hint) { flex-wrap: wrap; }
.setrow .hint { flex: 1 0 100%; order: 9; text-align: right; margin-top: 4px !important; }

/* Segmented control: the buttons only stretch when the group is a flex child that
   grows. Inside a .setrow it sizes to content, so flex:1 gives them no horizontal
   padding at all and the labels touch the borders. */
.seg button { padding: 10px 16px; }
.setrow .seg { flex: 0 0 auto; }
.setrow .seg button { flex: 0 0 auto; }

/* Phones: drop the hairline under the category tab strip so the nav and the tabs
   read as one continuous bar instead of two stacked rules. Kept as a transparent
   colour rather than border:none so the sticky bar's height does not shift by 1px.
   Placed at the end of the file: earlier .cattabs rules would otherwise win on
   source order. */
@media (max-width: 720px) {
  .cattabs { border-bottom-color: transparent; }

  /* "No backer here" / private-profile empty state: it was only as tall as its own
     content, so the footer was already on screen the moment you landed and the page
     read as if the real content had failed to load. Fill exactly the viewport left
     below the sticky nav (61px) + category strip (49px) and centre the block in it,
     so it reads as centred on the screen and the footer starts right at the fold.
     svh, not vh, so the mobile browser's collapsing address bar does not overshoot.
     align-items stays stretch so the two stacked CTAs keep their full-width look. */
  .prof-private { margin: 0 auto; display: flex; flex-direction: column; justify-content: center;
    min-height: calc(100vh - 94px); min-height: calc(100svh - 94px); }
  /* The profile page's wrap carries inline padding-top:32px/padding-bottom:64px for
     the normal populated profile. Against a viewport-height block that is 96px of
     dead space that pushed the content off centre and the footer back on screen, so
     it is zeroed for the empty state only. !important is needed to beat the inline
     style; :has keeps it off the populated profile. */
  .dashwrap:has(.prof-private) { padding-top: 0 !important; padding-bottom: 0 !important; }

  /* Bigger account avatar + hamburger. At 24px/22px they read as afterthoughts next
     to a 32px wordmark and sat under the 44px tap-target minimum. */
  .navacct.navacct-mobile .navavatar { width: 32px; height: 32px; }
  .appnav.mktnav .navburger { width: 44px; height: 44px; }
  .appnav.mktnav .navburger svg { width: 26px; height: 26px; }
  /* Both were inset by --pad (34px) while the wordmark opposite them sits on the
     nav's real gutter (--gutter, 22px), so the right cluster hung 12px further in
     than the left. Align them, and widen the avatar's offset to clear the now-wider
     burger. */
  .appnav.mktnav .navburger { right: var(--gutter, 22px); }
  .appnav.mktnav .navacct.navacct-mobile { right: calc(var(--gutter, 22px) + 52px); }

  /* Category strip: smaller labels, pulled up tight under the nav. The 13px mobile
     size declared up at line ~222 never applied, because the base 15.5px rule is
     later in this file at the same specificity. */
  .cattabs-in { min-height: 32px; }
  /* Sized so all five tabs FIT, which is the only way the strip stops being
     draggable: at 13.5px with a 26px gap the row was 444px in a 346px column, so it
     had to scroll, and a scroller can always be dragged and left mid-tab. 12px type
     with an 8px gap is ~334px, which leaves ~12px of slack, so nav.js never adds
     .scrolls and the overflow:hidden rule below makes it immovable. */
  .cattabs-links { gap: 8px; }
  .cattabs-links a { font-size: 12px; padding: 4px 1px; }

  /* The amount you are about to give is the most important thing you type on the
     site, and at 24px it was smaller than the figure it produces. Sized up here, at
     the end of the file, because three separate tuning blocks above set this input
     and the last one would otherwise win. 16px minimum on the input matters too:
     iOS zooms the whole page when a focused field is under 16px. */
  .fp-amt-in input { font-size: 34px; }
  .fp-amt-in .cur { font-size: 24px; }
  .fp-amt-lab { font-size: 15px; }
  /* The row reads and behaves as one field: market.html focuses the input on a tap
     anywhere inside it, so it takes a field's cursor and a comfortable height. The
     input sizes to its content, so without this the only hittable thing was the
     "0" itself, in the one place on the site where a miss costs a checkout. */
  .fp-amt { cursor: text; min-height: 54px; }
  .fp-amt-in { flex: 1 1 auto; min-width: 0; justify-content: flex-end; }
  /* "Trending" starts on the same gutter as the Seenfold wordmark above it. The
     strip centres itself whenever it fits (.cattabs-links:not(.scrolls)); at the old
     15.5px it always overflowed on a phone, so it was left-aligned by accident and
     shrinking the type exposed the centring. Pin it left on mobile. */
  .cattabs-links:not(.scrolls) { justify-content: flex-start; }
  /* The strip is overflow-x:auto at all times, so a row that already fits still
     accepted touch drags and rubber-banded, which made the nav feel loose and
     draggable. nav.js already toggles .scrolls from a real scrollWidth vs clientWidth
     measurement (re-synced on resize), so scrolling is only enabled when there is
     genuinely something to reach. contain stops the bounce chaining to the page when
     it does scroll. */
  /* Snap the strip to tab boundaries. It does overflow at phone widths, so scrolling
     has to stay, but a free scroller settles anywhere (half a label cut off, blank
     space past the last tab) which is what makes the nav feel draggable and loose.
     proximity, not mandatory: mandatory would fight a deliberate small nudge.
     contain stops an overscroll at either end from bouncing the page with it. */
  .cattabs-links { overscroll-behavior-x: contain; scroll-snap-type: x proximity;
    scroll-padding-left: 0; }
  .cattabs-links a { scroll-snap-align: start; }
  /* and when every tab already fits, there is nothing to reach, so do not accept
     drags at all (nav.js toggles .scrolls from a real scrollWidth measurement) */
  .cattabs-links:not(.scrolls) { overflow-x: hidden; }

  /* Body prose is left-aligned on phones. The platform standard justifies prose so the
     column sits flush, but that is tuned for a ~556px measure; at ~320px there are too
     few words per line, so justification stretches the spaces into the big irregular
     gaps ("rivers") that made the paragraphs look blocky. Hyphenation stays on, which
     keeps the ragged edge tight without touching word spacing. Declared here, at the
     end of the file, because the max-width:720px block further up justifies these same
     selectors and would otherwise win on source order. */
  .dmain .dsec p.dbody, .dmain .dsec p.dlead,
  .dsec p, .dsec .secnote, .intro, .org .orgnote, .legal-note,
  .pagenarrow .dsec p, .pagenarrow .pagehead:not(.centered) .intro,
  .pagehead:not(.centered) .intro,
  .faqitem .fa, .legal-article p, .legal-article li {
    text-align: left; text-justify: auto;
    /* hyphens go with the justification. They exist to keep justified word spacing
       tight, and left-aligned they only add breaks ("cri-sis", "impor-tant") that
       make the paragraph busier, which is the other half of what reads as blocky. */
    hyphens: manual; -webkit-hyphens: manual;
  }
  /* Body prose was 14px, small enough on a phone that a full page of it read as fine
     print. 15.5px with a looser line-height is close to what iOS uses for body text. */
  .dsec p, .intro, .pagehead .intro, .pagehead .sub,
  .faqitem .fa, .legal-article p, .legal-article li { font-size: 15.5px; line-height: 1.62; }

  /* Account / Activity / Refer rail follows the same mobile nav pattern as the
     account sub-tabs: a horizontal strip pinned to the top of the page, not a
     sidebar card. It is a SIBLING AFTER .dash-body in the markup (account, home and
     refer all order it that way for the desktop right-hand rail), so on a phone it
     was landing under the whole page as a stray card. order:-1 lifts it above the
     body; the card chrome comes off and each link becomes a pill. */
  /* The dark-theme rule `:root[data-theme="dark"] .acctrail { background: var(--panel) }`
     scores (0,3,0) and outranks a plain `.dashwrap .acctrail`, so the card's panel
     fill kept painting as a grey band behind the pills. Repeat the selector under the
     theme root to clear it in both themes. */
  .dashwrap .acctrail,
  :root[data-theme="dark"] .dashwrap .acctrail {
    order: -1; align-self: stretch;
    display: flex; flex-direction: row; gap: 8px;
    background: none; border: 0; box-shadow: none; border-radius: 0;
    overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none;
    margin: 0 calc(-1 * var(--gutter, 22px)) 4px;
    padding: 0 var(--gutter, 22px) 2px;
  }
  .dashwrap .acctrail::-webkit-scrollbar { display: none; }
  .dashwrap .acctrail a {
    flex: 0 0 auto; white-space: nowrap; gap: 7px;
    padding: 8px 13px; font-size: 13px; border-radius: 999px;
    border: 1px solid var(--line); background: var(--white);
  }
  .dashwrap .acctrail a + a { margin-top: 0; }   /* undo the stacked-card spacing */
  .dashwrap .acctrail a.active { background: var(--panel); border-color: var(--line-2); }
  .dashwrap .acctrail .ar-ic, .dashwrap .acctrail .ar-ic svg { width: 16px; height: 16px; }

  /* The six in-page anchors (Profile / Security / Privacy / Notifications /
     Appearance / Account) were a SECOND nav strip stacked directly under the pills
     above, and six labels never fit, so it was a cramped scroller too. On a phone
     they only jump between sections that are a short scroll apart and each of which
     already carries its own heading, which is how a settings screen normally reads.
     The pills above keep the navigation that actually crosses pages. */
  .acct-nav { display: none; }
  .acct-sec { scroll-margin-top: 90px; }

  /* Any row whose control is wide (a segmented control, or a button sitting next to a
     description) puts its text on a full-width line with the control underneath.
     .setrow .lab is flex:1 1 0 so a narrow control like a toggle can stay inline, but
     against a three-button segment or a "Change password" button that left the
     description in a ~90px column breaking one word per line.
     The two :has() conditions are deliberate:
       - `.lab p` means only rows that actually carry a description stack. "Sign out"
         is a bare label + button and reads fine on one line.
       - `> .btn` is a direct child, so the Photo row (whose Upload/Remove live inside
         .avedit) and the Profile header (handled by its own grid rule above, and
         which uses .secsub rather than a p) are both left alone. */
  .setrow:has(.seg) .lab,
  .setrow:has(.lab p):has(> .btn) .lab { flex: 1 1 100%; }
  .setrow:has(.seg) .seg { flex: 0 0 auto; }

  /* The market title is text-wrap:balance, which equalises the two lines instead of
     filling the first, so it broke early and left obvious space to the right. pretty
     fills greedily and only tidies the last line, which is the same call already made
     for the other headings on phones (see the text-wrap:pretty rule further up). */
  .dhead h1 { text-wrap: pretty; }

  /* Title to headline figure. Set here rather than up in the earlier mobile block
     because `.dlead { margin-top: 14px }` is re-declared further down the file at the
     same specificity and would win on source order. 14px read as one block; this
     separates the heading from the number it introduces. */
  .dlead { margin-top: 42px; }

  /* Recent Videos rows: the desktop scale (44px thumb, 16px handle, 18px figure,
     14px badge) came straight through to the phone, where four columns in ~322px
     made each row read oversized and left the handle and the figure fighting for
     the middle. Scaled down as a set so the columns keep their proportions. */
  .cliprow { padding: 11px 2px; gap: 11px; }
  .cr-thumb { width: 38px; height: 38px; border-radius: 9px; }
  .cr-h { font-size: 14px; }
  .cr-p { font-size: 11.5px; margin-top: 1px; }
  .cr-views { margin-right: 10px; }
  .cr-v { font-size: 15.5px; }
  .cr-l { font-size: 10.5px; }
  .cr-chg { font-size: 12px; min-width: 0; }
  .cr-chg.chg.up, .cr-chg.chg.down { padding: 2px 9px; }

  /* Flagship run as Kalshi's top carousel: a swipeable row of the compact grid cards
     (index.html renders VR.mcard into .feat-track on phones), with dots underneath.
     Cards are 88% of the viewport so the next one always peeks, which is what tells
     you the row swipes. The negative margin + matching padding bleeds the track to
     the screen edges so a card can scroll fully off, while the FIRST card still
     lines up with the page gutter; scroll-padding holds snapped cards on that line.
     The category sections below this stay stacked vertically, as before. */
  #feat { display: block; margin-left: calc(-1 * var(--pad, 22px)); margin-right: calc(-1 * var(--pad, 22px)); }
  #feat .feat-track {
    display: flex; gap: 12px;
    overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 2px var(--pad, 22px) 4px;
    scroll-padding-left: var(--pad, 22px);
  }
  #feat .feat-track::-webkit-scrollbar { display: none; }
  #feat .feat-track > .mcard { flex: 0 0 88%; scroll-snap-align: start; }
  /* Kalshi-style progress dots: the current one stretches into a pill. */
  #feat .feat-dots { display: flex; justify-content: center; gap: 6px; padding: 14px 0 0; }
  #feat .feat-dots span { width: 6px; height: 6px; border-radius: 99px; background: var(--line-2);
    transition: width .18s ease, background .18s ease; }
  #feat .feat-dots span.on { width: 20px; background: var(--ink-3); }

  /* Trending / Biggest movers / Underfunded ride under the flagship as a second
     swipeable row at the same width.
     The rail is a SIBLING of .mkt-main in the markup, so stacking it normally would
     drop it below every category section. display:contents dissolves .mkt-main's box
     so #feat and #sections become grid items of .mkt alongside .rail, and then order
     can interleave the rail between them. (.mkt-main carries no box styling of its
     own on mobile, so there is nothing to lose by dissolving it.) */
  .mktwrap .mkt-main { display: contents; }
  .mktwrap .mkt > #feat, .mktwrap #feat { order: 1; }
  .mktwrap .mkt .rail { order: 2; }
  .mktwrap .mkt > #sections, .mktwrap #sections { order: 3; }

  .mktwrap .mkt .rail {
    /* the base .rail is flex-direction:column, so display:flex alone still stacked
       the three cards; the row direction and nowrap both have to be reset here */
    display: flex; flex-direction: row; flex-wrap: nowrap; gap: 12px;
    overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    /* clears the flagship's dot row above; 4px left them almost touching the card */
    margin: 24px calc(-1 * var(--pad, 22px)) 0;
    padding: 2px var(--pad, 22px) 6px;
    scroll-padding-left: var(--pad, 22px);
  }
  .mktwrap .mkt .rail::-webkit-scrollbar { display: none; }
  /* margin-bottom:0 undoes the stacked-rail spacing from the block layout above */
  .mktwrap .mkt .rail > .railcard { flex: 0 0 88%; scroll-snap-align: start; margin-bottom: 0; }
}