/* FundPad. Layout, scale and tokens measured from money.x.com (2026-09-21):
   208px sidebar, 1120px column on an 8-col / 16px grid, 48/52 display,
   32/36 section heads, 13/20 body, white-alpha greys, #141414 panels,
   hairline section rules. Type is Geist + Fragment Mono (their
   typeface is proprietary and is not used). */

:root {
  --bg: #000;
  --fg: #fff;
  --fg2: rgba(255, 255, 255, .6);
  --fg3: rgba(255, 255, 255, .3);
  --line: rgba(255, 255, 255, .1);
  --line2: rgba(255, 255, 255, .2);
  --panel: #141414;
  --panel2: #0d0d0d;
  --chip: #262626;
  --card: #000;
  --input: rgba(255, 255, 255, .05);
  --btn: #fff;
  --btn-fg: #000;
  --btn-hover: rgba(255, 255, 255, .8);
  --btn2: rgba(255, 255, 255, .1);
  --btn2-hover: rgba(255, 255, 255, .2);
  --accent: #b6b6b6;
  --red: #f4212e;
  --amber: #ffad1f;
  --focus: #1d9bf0;
  --side: 208px;
  --gut: 56px;
  --maxw: 1120px;
  --ease: cubic-bezier(.22, 1, .36, 1);
  --sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "Fragment Mono", ui-monospace, "SF Mono", Menlo, monospace;
  color-scheme: dark;
}
:root[data-theme="light"] {
  --bg: #fff;
  --fg: #000;
  --fg2: rgba(0, 0, 0, .6);
  --fg3: rgba(0, 0, 0, .3);
  --line: rgba(0, 0, 0, .1);
  --line2: rgba(0, 0, 0, .2);
  --panel: #f3f3f3;
  --panel2: #f7f7f7;
  --chip: #e7e7e7;
  --card: #fff;
  --input: rgba(0, 0, 0, .04);
  --btn: #000;
  --btn-fg: #fff;
  --btn-hover: rgba(0, 0, 0, .8);
  --btn2: rgba(0, 0, 0, .06);
  --btn2-hover: rgba(0, 0, 0, .12);
  --accent: #6a6a6a;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--fg);
  font: 400 16px/24px var(--sans);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
img { display: block; max-width: 100%; }
::selection { background: var(--fg); color: var(--bg); }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 4px; }
.skip { position: absolute; left: -999px; top: 8px; z-index: 100; background: var(--btn); color: var(--btn-fg); padding: 10px 16px; border-radius: 10px; font-size: 13px; }
.skip:focus { left: 8px; }

/* ------------------------------------------------------------ type */
.display { font-size: 48px; line-height: .98; font-weight: 700; letter-spacing: -.04em; margin: 0; text-wrap: balance; }
.h3 { font-size: 32px; line-height: 1; font-weight: 700; letter-spacing: -.04em; margin: 0; text-wrap: balance; }
.h3 .dim, .display .dim { color: var(--fg2); }
.h4 { font-size: 20px; line-height: 1.15; font-weight: 600; letter-spacing: -.03em; margin: 0; }
.t13 { font-size: 13px; line-height: 20px; letter-spacing: .01em; }
.t13m { font-size: 13px; line-height: 20px; font-weight: 500; letter-spacing: .01em; margin: 0; }
.cap { font-size: 11px; line-height: 18px; letter-spacing: .01em; }
.lead { font-size: 13px; line-height: 20px; font-weight: 500; letter-spacing: .04em; color: var(--fg2); }
.mute { color: var(--fg2); }
.faint { color: var(--fg3); }
.mono { font-family: var(--mono); font-feature-settings: "zero" 0; letter-spacing: 0; }
.num { font-variant-numeric: tabular-nums; }
.eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; line-height: 18px; font-weight: 500; letter-spacing: .01em; margin: 0 0 12px; }
.eyebrow::before { content: ""; width: 4px; height: 4px; background: var(--fg3); }
.up { color: var(--accent); }
.down { color: var(--red); }
sup { font-size: .5em; line-height: 0; vertical-align: .9em; margin-left: .05em; }

/* ---------------------------------------------------------- buttons */
.pill {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 34px; padding: 0 16px; border-radius: 10px;
  background: var(--btn); color: var(--btn-fg);
  font-size: 13px; line-height: 1; font-weight: 500; letter-spacing: .01em; white-space: nowrap;
  transition: background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease), opacity .2s;
}
.pill:hover { background: var(--btn-hover); }
.pill.ghost { background: transparent; color: var(--fg); box-shadow: inset 0 0 0 1px var(--line); }
.pill.ghost:hover { background: var(--btn2); }
.pill.soft { background: var(--btn2); color: var(--fg); }
.pill.soft:hover { background: var(--btn2-hover); }
.pill.md { height: 42px; padding: 0 20px; }
.pill.lg { height: 54px; padding: 0 28px; font-size: 15px; border-radius: 12px; }
.pill.block { width: 100%; }
.pill[disabled], .pill.is-busy { opacity: .4; pointer-events: none; }
/* Not ready yet, as opposed to busy: the click still lands, so the shell can
   hold it and replay it, and assistive technology is told what the look says. */
[aria-busy="true"] { opacity: .55; cursor: progress; }
.pill svg { width: 16px; height: 16px; flex: none; }
.linkish { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--fg3); }
.linkish:hover { text-decoration-color: var(--fg); }
.icon-btn { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; color: var(--fg2); transition: background .2s, color .2s; }
.icon-btn:hover { background: var(--btn2); color: var(--fg); }
.icon-btn svg { width: 18px; height: 18px; }

/* ------------------------------------------------------------ shell */
.top {
  position: sticky; top: 0; z-index: 60; display: flex; align-items: center; gap: 8px;
  height: 64px; padding: 0;
  background: color-mix(in srgb, var(--bg) 76%, transparent);
  backdrop-filter: blur(18px) saturate(160%); -webkit-backdrop-filter: blur(18px) saturate(160%);
  border-bottom: 1px solid var(--line);
}
/* Three tracks, not a row: the brand on the left and the wallet cluster on
   the right take only what they need, and the nav sits in the MIDDLE track,
   centred on the bar itself rather than on whatever is left over. The two
   outer tracks are the same width (1fr) so an address appearing in the right
   cluster cannot shove the nav off centre. */
.top-inner {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  gap: 8px; height: 100%;
}
.top-inner > .brand { justify-self: start; }
.top-inner > .nav { justify-self: center; }
/* everything after the nav is the right-hand cluster, laid out as one row */
.top-inner > .top-spacer { display: none; }
.top-right { display: flex; align-items: center; gap: 8px; justify-self: end; }
.brand { display: flex; align-items: center; gap: 9px; padding-right: 10px; }
img.brand-mark, .brand-mark { width: 22px; height: 22px; flex: none; }
.brand-name { font-size: 15px; font-weight: 600; letter-spacing: -.01em; }
.top-spacer { flex: 1; }
.nav { display: flex; align-items: center; gap: 4px; }
.nav a {
  display: inline-flex; align-items: center; height: 38px; padding: 0 16px; border-radius: 10px;
  font-size: 13px; font-weight: 500; letter-spacing: .005em; color: var(--fg2);
  border: 1px solid transparent;
  transition: color .2s var(--ease), background .2s var(--ease), border-color .2s var(--ease);
}
.nav a:hover { color: var(--fg); border-color: var(--line); background: var(--glass); }
.nav a[aria-current="page"] { color: var(--fg); border-color: var(--line2); background: var(--glass); box-shadow: inset 0 1px 0 var(--glass-top); }
.net-pill {
  display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 14px; border-radius: 10px;
  border: 1px solid var(--line); background: var(--glass); color: var(--fg2); font-size: 12px; font-weight: 500;
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.net-pill:hover { color: var(--fg); border-color: var(--line2); }

/* The contract address. Same height and shell as the network pill beside it,
   because they are the same kind of thing: a fact about the chain you can
   act on. It only exists once BRAND.ca is set. */
.ca-pill {
  display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 12px; border-radius: 10px;
  border: 1px solid var(--line); background: var(--glass); color: var(--fg2); font-size: 12px; font-weight: 500;
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); cursor: pointer;
}
.ca-pill { white-space: nowrap; }
.ca-pill:hover { color: var(--fg); border-color: var(--line2); }
.ca-pill .ca-tag { font-size: 10px; letter-spacing: .08em; color: var(--fg3); }
.ca-pill:hover .ca-tag { color: var(--fg2); }
.ca-pill svg { width: 14px; height: 14px; opacity: .55; }
.ca-pill:hover svg { opacity: 1; }
/* The full-address form, in the menu sheet. */
.ca-pill.wide { height: auto; min-height: 44px; padding: 10px 14px; white-space: normal; word-break: break-all; text-align: left; align-items: start; }
.ca-pill.wide .mono { font-size: 12px; line-height: 1.5; }
/* The label is two letters and must never be one letter over two lines. */
.ca-pill .ca-tag { flex: none; white-space: nowrap; }
.ca-pill.wide .ca-tag, .ca-pill.wide svg { margin-top: 3px; }
.x-btn svg { width: 16px; height: 16px; }
.x-btn .x-name { display: none; }
.switch { position: relative; }
.switch-pop {
  position: absolute; right: 0; top: 40px; width: 252px; z-index: 70;
  background: var(--panel2); border: 1px solid var(--line); border-radius: 14px; padding: 14px;
  opacity: 0; transform: translateY(-4px); pointer-events: none; transition: opacity .2s var(--ease), transform .2s var(--ease);
  box-shadow: 0 20px 50px rgba(0, 0, 0, .5);
}
.switch.open .switch-pop { opacity: 1; transform: none; pointer-events: auto; }
.switch-row { display: flex; justify-content: space-between; gap: 12px; font-size: 12px; line-height: 22px; }
.switch-row span:first-child { color: var(--fg2); }
.dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.dot.off { background: var(--fg3); }
.menu-btn { display: none; }
.sheet {
  position: fixed; inset: 64px 0 0 0; z-index: 55; background: var(--bg); overflow: auto; overscroll-behavior: contain;
  padding: 20px var(--gut) 32px; display: flex; flex-direction: column;
  clip-path: inset(0 0 100% 0); transition: clip-path .35s var(--ease); pointer-events: none;
}
.sheet.open { clip-path: inset(0 0 0 0); pointer-events: auto; }
.sheet .nav { flex-direction: column; align-items: stretch; gap: 8px; }
.sheet .nav a { height: 60px; padding: 0 20px; font-size: 20px; border-radius: 12px; border-color: var(--line); }
.main { min-height: 100vh; display: flex; flex-direction: column; }
.wrap { width: 100%; max-width: calc(var(--maxw) + var(--gut) * 2); padding: 0 var(--gut); margin: 0 auto; }
.band { border-top: 1px solid var(--line); padding: 80px 0; }
.band.flush { border-top: 0; }
.band.nb { padding-bottom: 0; }
.band.gap-top { margin-top: 80px; }
.grid8 { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 16px; }
.notice { align-self: center; font-size: 11px; line-height: 18px; font-weight: 500; letter-spacing: .02em; color: var(--fg2); padding: 3px 10px; border-radius: 999px; border: 1px dashed var(--line2); }

/* ------------------------------------------------------------- hero */
/* One screen, and only one: 100svh so a phone's shrinking toolbar cannot
   crop it, minus the 64px sticky bar above it. The content sits in the
   middle, so nothing of the section below shows until you scroll. */
.hero {
  min-height: calc(100svh - 64px);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 48px 0 72px; text-align: center;
}
.hero .display { max-width: 15ch; margin: 0 auto; font-size: clamp(44px, 7.4vw, 88px); line-height: .95; letter-spacing: -.04em; }
.hero-art { width: 300px; max-width: 74vw; margin: 56px auto 48px; aspect-ratio: 1 / 1; position: relative; }
.hero-art svg { width: 100%; height: 100%; overflow: visible; }
.hero-note { margin: 32px 0 26px; font-size: 15px; line-height: 24px; color: var(--fg2); }
.hero-note strong { color: var(--fg); font-weight: 500; }
.hero-ctas { display: inline-flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.hero-ctas .pill { height: 44px; padding: 0 22px; font-size: 14px; }
.coin-spin { transform-origin: 200px 104px; animation: coinFloat 6s var(--ease) infinite alternate; }
@keyframes coinFloat { from { transform: translateY(4px); } to { transform: translateY(-5px); } }

/* ---------------------------------------------- split: 328 / 400 / 328 */
.split { display: grid; grid-template-columns: 328px 400px 328px; justify-content: space-between; gap: 32px; }
.split-media { background: var(--panel); aspect-ratio: 400 / 511; position: relative; overflow: hidden; }
.split-side { display: flex; flex-direction: column; justify-content: space-between; gap: 32px; }
.split-side .lead { margin: 0; text-wrap: pretty; }
.feat-list { list-style: none; margin: 0; padding: 0; }
.feat-list li { display: flex; align-items: center; gap: 14px; padding: 16px 0; border-top: 1px solid var(--line); font-size: 13px; line-height: 20px; font-weight: 500; }
.feat-list li:first-child { border-top: 0; }
.feat-list svg { width: 18px; height: 18px; flex: none; color: var(--fg); }

/* Phone frame drawn in CSS. Holds real UI, not a picture of it. */
.phone {
  position: absolute; left: 50%; top: 58px; width: 256px; height: 540px; transform: translateX(-50%);
  border-radius: 44px; background: #000; padding: 10px;
  box-shadow: 0 0 0 1.5px #3a3a3a, 0 0 0 4px #111, 0 30px 60px rgba(0, 0, 0, .6);
}
:root[data-theme="light"] .phone { box-shadow: 0 0 0 1.5px #bdbdbd, 0 0 0 4px #e9e9e9, 0 30px 60px rgba(0, 0, 0, .15); }
.phone-screen { height: 100%; border-radius: 35px; background: #000; color: #fff; overflow: hidden; padding: 14px 16px; font-size: 10px; line-height: 14px; }
.phone-status { display: flex; justify-content: space-between; align-items: center; font-weight: 600; font-size: 10px; padding: 0 6px; }
.phone-island { width: 70px; height: 20px; border-radius: 12px; background: #111; }
.phone-head { display: flex; align-items: center; justify-content: space-between; margin-top: 14px; font-size: 10px; font-weight: 500; }
.phone-coin { width: 22px; height: 22px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fafafa, #8d8d8d 70%, #5b5b5b); }
.phone-big { font-size: 28px; line-height: 1.05; font-weight: 700; letter-spacing: -.04em; margin-top: 18px; }
.phone-big sup { font-size: 12px; }
.phone-sub { color: var(--accent); font-size: 9px; margin-top: 2px; }
.phone-btns { display: flex; gap: 6px; margin-top: 14px; }
.phone-btns span { flex: 1; height: 24px; border-radius: 999px; display: grid; place-items: center; font-size: 9px; font-weight: 500; background: #1f1f1f; }
.phone-btns span:first-child { background: #fff; color: #000; }
.phone-list { margin-top: 16px; }
.phone-list .ph-title { display: flex; justify-content: space-between; font-weight: 500; margin-bottom: 8px; }
.ph-row { display: flex; align-items: center; gap: 8px; padding: 6px 0; }
.ph-av { width: 20px; height: 20px; border-radius: 50%; background: #2a2a2a; flex: none; display: grid; place-items: center; font-size: 8px; font-weight: 600; }
.ph-row div { flex: 1; min-width: 0; }
.ph-row b { display: block; font-weight: 500; }
.ph-row i { font-style: normal; color: rgba(255, 255, 255, .5); font-size: 8.5px; }
.ph-amt { text-align: right; }
.ph-amt em { display: block; font-style: normal; color: var(--accent); font-size: 8.5px; }
.streaks { position: absolute; inset: 0; background-image: repeating-linear-gradient(115deg, transparent 0 22px, rgba(255, 255, 255, .06) 22px 23px, transparent 23px 46px); mask-image: radial-gradient(120% 80% at 50% 40%, transparent 35%, #000 80%); }
:root[data-theme="light"] .streaks { background-image: repeating-linear-gradient(115deg, transparent 0 22px, rgba(0, 0, 0, .05) 22px 23px, transparent 23px 46px); }

/* --------------------------------------------- the floating-card panel */
.float-head { align-items: start; }
.float-head .eyebrow { grid-column: 1 / span 4; }
.float-head .h3 { grid-column: 5 / span 4; }
/* The cards are placed to stay inside this box at every desktop width: 179px
   is 18.6% of the narrowest panel (960px), so no card starts past 79%. */
.float-panel { position: relative; height: 560px; overflow: hidden; margin-top: 48px; }
.float-center { position: absolute; left: 50%; top: 38%; transform: translate(-50%, -50%); text-align: center; width: min(720px, 92%); z-index: 3; }
.float-center .cap { max-width: 520px; margin-left: auto; margin-right: auto; }
.float-center .cap { margin-top: 12px; color: var(--fg2); }
.fcard {
  position: absolute; width: 179px; padding: 12px 12px 14px; background: var(--panel); border: 1px solid var(--line);
  display: flex; flex-direction: column; justify-content: space-between; height: 128px;
  will-change: transform; transition: filter .3s;
}
.fcard .fc-top { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 500; }
.fcard .fc-ico { width: 18px; height: 18px; border-radius: 50%; background: var(--btn2); display: grid; place-items: center; font-size: 9px; }
.fcard .fc-rate { font-size: 10px; color: var(--accent); }
.fcard .fc-amt { font-size: 22px; line-height: 26px; font-weight: 600; letter-spacing: -.02em; }
.fcard .fc-per { font-size: 10px; color: var(--fg2); }
.fcard.far { filter: blur(2px); opacity: .55; transform: scale(.8); }
.fcard.mid { filter: blur(.6px); opacity: .85; }

/* ------------------------------------------- the organizer's flow */
/* One card that moves forward: sign in, fundraiser, confirm, code, verified.
   Named apart from .flow and .rail on the overview, which are different
   things entirely. */
.linkflow { max-width: 660px; margin: 0 auto; }
/* The page head sits in the same column as the card, so the eye follows one
   left edge down the page instead of two. */
[data-page="organizers"] .page-head { max-width: 660px; margin: 0 auto; }
.linkrail {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap; list-style: none; margin: 0 0 14px; padding: 0;
  font-family: var(--mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--fg3);
}
.linkrail li { display: flex; align-items: center; gap: 10px; }
.linkrail li + li::before { content: ''; width: 18px; height: 1px; background: var(--line2); flex: none; }
.linkrail li[data-done] { color: var(--fg2); }
.linkrail li[data-on] { color: var(--accent); }
.link-card { padding: 28px; }
.link-card .box-title { margin-bottom: 10px; }
.link-who {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 12px; color: var(--fg2);
  margin: 0 0 18px; padding-bottom: 14px; border-bottom: 1px solid var(--line);
}
.link-who b { color: var(--fg); font-weight: 500; }
.link-who .linkish { margin-left: auto; font-size: 12px; color: var(--fg2); cursor: pointer; }
.link-who .linkish:hover { color: var(--fg); }
.big-row { display: flex; gap: 10px; flex-wrap: wrap; }
/* 16px, not 15: iOS zooms the whole page when a focused input is smaller. */
.big-row .input { flex: 1 1 300px; height: 54px; font-size: 16px; padding: 0 16px; }
.big-row .pill.lg { height: 54px; }
.link-cta { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 20px; }
.link-foot { max-width: 660px; margin: 14px auto 64px; }
.verified { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 15px; font-weight: 500; color: var(--accent); }
.verified [data-i] { width: 20px; height: 20px; display: grid; place-items: center; }
.verified svg { width: 18px; height: 18px; }
.claim-box { max-width: 660px; margin: 0 auto 16px; }
.claim-box:last-of-type { margin-bottom: 96px; }
@media (max-width: 560px) {
  .link-card { padding: 20px; }
  .big-row .pill.lg { width: 100%; }
  .link-cta .pill { width: 100%; }
}

/* ------------------------------------------------ the numbered rail */
/* Six steps on one axis: the reader moves sideways through them with the
   arrows, a trackpad, a finger or the keyboard, and the card after the last
   visible one peeks in so there is never a doubt that it continues. */
.steps-head { margin-bottom: 44px; }
.rail { position: relative; }
.rail-track {
  display: flex; gap: 16px; overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scroll-behavior: smooth;
  margin: -2px; padding: 2px 2px 6px; scrollbar-width: none; -ms-overflow-style: none;
}
.rail-track::-webkit-scrollbar { display: none; }
.rail-track:focus-visible { outline: 2px solid var(--focus); outline-offset: 4px; border-radius: 16px; }
.rail .step { flex: 0 0 calc((100% - 32px) / 3); scroll-snap-align: start; display: flex; flex-direction: column; gap: 16px; }
.step-media { background: var(--panel); width: 100%; height: 238px; position: relative; overflow: hidden; display: grid; place-items: center; }
.step-text { display: flex; flex-direction: column; gap: 6px; }
.rail-foot { display: flex; align-items: center; gap: 20px; margin-top: 28px; }
.rail-bar { flex: 1; height: 2px; border-radius: 2px; background: var(--line); overflow: hidden; }
.rail-bar i { display: block; height: 100%; width: 34%; border-radius: 2px; background: var(--accent); transition: width .3s var(--ease), margin-left .3s var(--ease); }
.rail .flip-tabs { left: 14px; top: 14px; transform: none; flex-direction: row; gap: 12px; }
.rail .coin3d { width: 132px; height: 132px; }
.rail .coin3d .back { padding: 16px; }
.rail-nav { display: flex; gap: 8px; }
.rail-btn {
  width: 46px; height: 46px; border-radius: 12px; border: 0; background: var(--btn2); color: var(--fg);
  display: grid; place-items: center; cursor: pointer; transition: background .2s, opacity .2s;
}
.rail-btn svg { width: 18px; height: 18px; }
.rail-btn:hover { background: var(--btn2-hover); }
.rail-btn[disabled] { opacity: .3; cursor: default; }
.step-no { font-size: 13px; line-height: 20px; color: var(--fg2); font-variant-numeric: tabular-nums; }
.step-text .t13 { color: var(--fg2); margin: 4px 0 0; max-width: 268px; }

/* Small UI fragments that sit inside the step panels. */
.frag { background: var(--card); border-radius: 3px; padding: 10px 12px; font-size: 10px; line-height: 14px; min-width: 180px; }
.frag-row { display: flex; align-items: center; gap: 8px; padding: 6px 0; }
.frag-row + .frag-row { border-top: 1px solid var(--line); }
.frag-ico { width: 22px; height: 22px; border-radius: 4px; border: 1px solid var(--line2); display: grid; place-items: center; flex: none; }
.frag-ico svg { width: 11px; height: 11px; }
.frag b { font-weight: 600; display: block; }
.frag i { font-style: normal; color: var(--fg2); font-size: 9px; }
.frag .r { margin-left: auto; text-align: right; }
.frag-label { font-size: 9px; color: var(--fg2); margin-bottom: 4px; }
.frag-code { font-family: var(--mono); font-size: 15px; letter-spacing: .04em; padding: 10px 14px; background: var(--card); border: 1px dashed var(--line2); border-radius: 4px; }
.coin3d { width: 150px; height: 150px; border-radius: 50%; position: relative; transform-style: preserve-3d; transition: transform .8s var(--ease); }
.coin3d .face { position: absolute; inset: 0; border-radius: 50%; backface-visibility: hidden; display: grid; place-items: center; }
.coin3d .front { background: radial-gradient(circle at 32% 28%, #fdfdfd 0%, #c9c9c9 38%, #8a8a8a 72%, #5e5e5e 100%); box-shadow: inset 0 0 0 6px rgba(255, 255, 255, .25), inset 0 0 0 7px rgba(0, 0, 0, .15); color: rgba(0, 0, 0, .35); }
.coin3d .back { background: radial-gradient(circle at 68% 28%, #f1f1f1 0%, #bdbdbd 40%, #808080 75%, #585858 100%); transform: rotateY(180deg); box-shadow: inset 0 0 0 6px rgba(255, 255, 255, .25); color: rgba(0, 0, 0, .55); font-size: 10px; font-weight: 600; text-align: center; line-height: 13px; padding: 30px; }
.coin3d .front svg { width: 64px; height: 64px; }
.coin3d.flipped { transform: rotateY(180deg); }
.flip-tabs { position: absolute; left: 28%; top: 50%; transform: translate(-50%, -50%); display: flex; flex-direction: column; gap: 6px; }
.flip-tabs button { display: flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 500; color: var(--fg3); }
.flip-tabs button[aria-pressed="true"] { color: var(--fg); }
.flip-tabs svg { width: 12px; height: 12px; }
.chat { display: flex; flex-direction: column; gap: 6px; width: 200px; }
.chat .b { background: var(--card); padding: 8px 10px; font-size: 10px; line-height: 14px; font-weight: 500; }
.chat .b.me { background: var(--chip); }
.chat .meta { font-size: 8.5px; color: var(--fg2); display: flex; align-items: center; gap: 4px; }
.chat .meta.r { justify-content: flex-end; }

/* ---------------------------------------------------------- seal */
.seal { width: 96px; height: 96px; }

/* ------------------------------------------------------------ faq */
.faq { align-items: start; }
.faq-l { grid-column: 1 / span 4; }
.faq-l .pill { margin-top: 32px; }
.faq-r { grid-column: 5 / span 4; }
.qa { position: relative; border-radius: 14px; }
.qa + .qa { margin-top: 0; }
.qa > button { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px; text-align: left; padding: 18px; font-size: 13px; line-height: 20px; font-weight: 500; }
.qa > button svg { width: 14px; height: 14px; flex: none; transition: transform .3s var(--ease); }
.qa-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .35s var(--ease); }
.qa-body > div { overflow: hidden; }
.qa.open > button { padding-bottom: 8px; }
.qa-body p { margin: 0 18px; padding-bottom: 18px; font-size: 13px; line-height: 20px; font-weight: 500; color: var(--fg2); max-width: 420px; }
.qa.open { background: var(--panel2); }
.qa.open .qa-body { grid-template-rows: 1fr; }
.qa .plus-v { transition: opacity .2s; }
.qa.open .plus-v { opacity: 0; }

/* ------------------------------------------------------ footnotes */
.notes { padding: 56px 0; border-top: 1px solid var(--line); font-size: 11px; line-height: 18px; color: var(--fg2); }
.notes p { margin: 0 0 18px; max-width: 1120px; }
.notes a { color: var(--fg); text-decoration: underline; text-underline-offset: 2px; }

/* --------------------------------------------------------- footer */
.foot { border-top: 1px solid var(--line); margin-top: auto; padding: 64px 24px 0; overflow: hidden; }
.foot-grid { display: grid; grid-template-columns: 192px repeat(3, minmax(0, 1fr)); gap: 32px 16px; }
.theme { display: flex; gap: 4px; }
.theme button { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 8px; color: var(--fg3); }
.theme button[aria-pressed="true"] { color: var(--fg); background: var(--btn2); }
.theme svg { width: 14px; height: 14px; }
.foot h2 { margin: 0 0 22px; font-size: 13px; line-height: 13px; font-weight: 500; letter-spacing: .01em; }
.foot ul { list-style: none; margin: 0 0 36px; padding: 0; }
.foot li { margin: 0 0 8px; font-size: 13px; line-height: 20px; }
.foot li a { color: var(--fg2); transition: color .2s; }
.foot li a:hover { color: var(--fg); }
.copy { font-size: 11px; line-height: 18px; color: var(--fg2); align-self: end; margin: 0 0 36px; }
/* ---------------------------------------------------- app surfaces */
.page-head { padding: 64px 0 40px; }
.page-head .display { font-size: 40px; line-height: 44px; }
.page-head p { margin: 14px 0 0; max-width: 560px; }
.box { background: var(--panel); padding: 24px; }
.box.tight { padding: 16px; }
.box + .box { margin-top: 16px; }
.box-title { font-size: 13px; line-height: 20px; font-weight: 500; margin: 0 0 16px; display: flex; align-items: center; gap: 8px; }
.box-title .no { color: var(--fg2); font-variant-numeric: tabular-nums; }
.two { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 16px; align-items: start; margin-bottom: 96px; }
.sticky { position: sticky; top: 88px; }

.field { display: block; margin-bottom: 16px; }
.field > span { display: block; font-size: 12px; line-height: 18px; font-weight: 500; margin-bottom: 6px; }
.field small { display: block; margin-top: 6px; font-size: 11px; line-height: 16px; color: var(--fg2); }
.input, .textarea {
  width: 100%; height: 40px; padding: 0 12px; background: var(--input); border: 1px solid var(--line); border-radius: 8px;
  font-size: 14px; outline: none; transition: border-color .2s, background .2s;
}
.textarea { height: auto; min-height: 84px; padding: 10px 12px; resize: vertical; line-height: 20px; }
.input:hover, .textarea:hover { border-color: var(--line2); }
.input:focus, .textarea:focus { border-color: var(--fg3); background: transparent; }
.input::placeholder, .textarea::placeholder { color: var(--fg3); }
.input-row { display: flex; gap: 8px; }
.input-row .input { flex: 1; min-width: 0; }
.input-row .pill { height: 40px; padding: 0 18px; }
.affix { position: relative; }
.affix .input { padding-right: 52px; }
.affix em { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); font-style: normal; font-size: 12px; color: var(--fg2); }

.seg { display: inline-flex; background: var(--input); border: 1px solid var(--line); border-radius: 12px; padding: 3px; gap: 2px; }
.seg button { height: 36px; padding: 0 16px; border-radius: 9px; font-size: 12px; font-weight: 500; color: var(--fg2); }
.seg button[aria-pressed="true"] { background: var(--btn); color: var(--btn-fg); }

.range { width: 100%; accent-color: var(--fg); }

.kv { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-top: 1px solid var(--line); font-size: 13px; line-height: 20px; }
.kv:first-child { border-top: 0; }
.kv > span:first-child { color: var(--fg2); }
.kv > span:last-child { text-align: right; min-width: 0; overflow-wrap: anywhere; }

.tag { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 8px; border-radius: 999px; font-size: 11px; font-weight: 500; letter-spacing: .02em; background: var(--btn2); color: var(--fg2); white-space: nowrap; }
.tag.ok { background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent); }
.tag.warn { background: color-mix(in srgb, var(--amber) 16%, transparent); color: var(--amber); }
.tag.bad { background: color-mix(in srgb, var(--red) 16%, transparent); color: var(--red); }
.tag svg { width: 11px; height: 11px; }

/* The platform states on the help page. Plain rows, no logos: a greyed-out
   brand grid reads as "coming soon", which is a promise nobody has made. */
.pstate { margin: 0 0 22px; }
.pstate:last-child { margin-bottom: 0; }
.pstate h3 { display: flex; align-items: center; gap: 8px; margin: 0; color: var(--fg); }
.pstate-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.pstate-list li { display: grid; gap: 2px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.pstate-list b { color: var(--fg); font-weight: 500; }
.pstate-list span { color: var(--fg2); }
@media (min-width: 720px) {
  .pstate-list li { grid-template-columns: 140px 1fr; gap: 0 16px; align-items: baseline; }
}

.note { display: flex; gap: 10px; padding: 12px 14px; border-radius: 10px; background: var(--panel2); font-size: 12px; line-height: 18px; color: var(--fg2); border: 1px solid var(--line); }
.note svg { width: 14px; height: 14px; flex: none; margin-top: 2px; color: var(--fg); }
.note b { color: var(--fg); font-weight: 500; }
.note.warn svg { color: var(--amber); }
.note.bad svg { color: var(--red); }

.fr-card { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 16px; align-items: start; }
.fr-card img, .fr-img { width: 96px; height: 72px; object-fit: cover; background: var(--chip); }
.fr-title { font-size: 15px; line-height: 20px; font-weight: 500; margin: 0; }
.fr-meta { font-size: 12px; line-height: 18px; color: var(--fg2); margin-top: 2px; }
.bar { height: 3px; background: var(--line); margin: 10px 0 6px; position: relative; overflow: hidden; }
.bar i { position: absolute; inset: 0 auto 0 0; background: var(--fg); }

.list { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
.tile { background: var(--panel); display: flex; flex-direction: column; transition: background .25s var(--ease); }
.tile:hover { background: color-mix(in srgb, var(--panel) 80%, var(--fg) 6%); }
.tile-img { aspect-ratio: 16 / 9; background: var(--chip); overflow: hidden; }
.tile-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.tile:hover .tile-img img { transform: scale(1.03); }
.tile-body { padding: 16px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.tile-foot { margin-top: auto; display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 12px; color: var(--fg2); }

.rows { border-top: 1px solid var(--line); }
.crow { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.cimg { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; background: var(--chip); display: grid; place-items: center; font-size: 13px; font-weight: 600; color: var(--fg2); }
.crow b { font-weight: 500; font-size: 14px; display: block; }
.crow i { font-style: normal; font-size: 12px; color: var(--fg2); }

.code-big { font-family: var(--mono); font-size: 26px; line-height: 32px; letter-spacing: .06em; padding: 18px 20px; border: 1px dashed var(--line2); background: var(--card); display: flex; align-items: center; justify-content: space-between; gap: 16px; overflow-wrap: anywhere; }
.addr { font-family: var(--mono); font-size: 12px; overflow-wrap: anywhere; }
.copyable { cursor: pointer; }
.copyable:hover { text-decoration: underline; text-underline-offset: 3px; }

.stepper { list-style: none; margin: 0; padding: 0; counter-reset: s; }
.stepper li { position: relative; padding: 0 0 18px 34px; font-size: 13px; line-height: 20px; color: var(--fg2); }
.stepper li::before { counter-increment: s; content: counter(s); position: absolute; left: 0; top: 0; width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--line2); display: grid; place-items: center; font-size: 11px; color: var(--fg); }
.stepper li b { color: var(--fg); font-weight: 500; }
.stepper li.done::before { content: "✓"; background: var(--fg); color: var(--bg); border-color: var(--fg); }

.progress { list-style: none; margin: 16px 0 0; padding: 0; font-size: 12px; line-height: 18px; }
.progress li { display: flex; align-items: center; gap: 8px; padding: 4px 0; color: var(--fg2); }
.progress li.now { color: var(--fg); }
.progress li.err { color: var(--red); }
.progress .spin { width: 12px; height: 12px; border: 1.5px solid var(--line2); border-top-color: var(--fg); border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.skel { background: linear-gradient(90deg, var(--panel) 0%, color-mix(in srgb, var(--panel) 70%, var(--fg) 8%) 50%, var(--panel) 100%); background-size: 200% 100%; animation: sk 1.4s linear infinite; }
@keyframes sk { to { background-position: -200% 0; } }
.empty { padding: 48px 24px; text-align: center; color: var(--fg2); font-size: 13px; line-height: 20px; }
.empty .h4 { color: var(--fg); margin-bottom: 6px; }

.toast { position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 20px); z-index: 90; background: var(--btn); color: var(--btn-fg); padding: 8px 14px; border-radius: 999px; font-size: 13px; font-weight: 500; opacity: 0; transition: opacity .25s, transform .25s var(--ease); pointer-events: none; max-width: calc(100vw - 32px); }
.toast.show { opacity: 1; transform: translate(-50%, 0); }

.modal-back { position: fixed; inset: 0; z-index: 80; background: rgba(0, 0, 0, .6); display: grid; place-items: center; padding: 16px; opacity: 0; pointer-events: none; transition: opacity .2s; }
.modal-back.open { opacity: 1; pointer-events: auto; }
.modal { width: 100%; max-width: 400px; background: var(--panel2); border: 1px solid var(--line); border-radius: 16px; padding: 24px; }
.modal h2 { margin: 0 0 8px; font-size: 18px; font-weight: 500; }
.modal p { margin: 0 0 16px; font-size: 13px; line-height: 20px; color: var(--fg2); }
.modal .pill + .pill { margin-top: 8px; }

/* -------------------------------------------------------- motion */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
.reveal.d1 { transition-delay: .08s; } .reveal.d2 { transition-delay: .16s; } .reveal.d3 { transition-delay: .24s; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .coin-spin, .skel { animation: none; }
  .coin3d { transition: none; }
}

/* ---------------------------------------------------- responsive */
@media (max-width: 1360px) {
  .split { grid-template-columns: minmax(0, 1fr) minmax(0, 400px) minmax(0, 1fr); }
}
@media (max-width: 1100px) {
  :root { --gut: 32px; }
  .two { grid-template-columns: minmax(0, 1fr) 320px; }
}
@media (max-width: 1023px) {
  .menu-btn { display: grid; }
  /* The bar gets tight here. The page links, the network pill and the address
     all move into the menu sheet, where the address gets shown in full; the X
     link stays in the bar, because it is one 38px square. */
  .top .nav, .net-pill, .top .notice, .top .ca-pill { display: none; }
  .sheet-foot { display: grid; gap: 10px; margin-top: 20px; }
  .sheet-x {
    display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 14px;
    border: 1px solid var(--line); border-radius: 10px; color: var(--fg2); font-size: 13px; font-weight: 500;
  }
  .sheet-x:hover { color: var(--fg); border-color: var(--line2); }
  .sheet-x svg { width: 15px; height: 15px; }
  .sheet-x .x-name { display: inline; }
  :root { --gut: 20px; }
  .band { padding: 48px 0; }
  .hero { min-height: calc(100svh - 64px); padding: 32px 0 56px; }
  .hero .display { font-size: clamp(34px, 10.5vw, 52px); max-width: 13ch; }
  .display { font-size: 36px; line-height: 40px; }
  .h3 { font-size: 26px; line-height: 30px; }
  .split { grid-template-columns: 1fr; }
  .split-media { max-width: 400px; width: 100%; margin: 0 auto; }
  .float-head .eyebrow, .float-head .h3 { grid-column: 1 / -1; }
  .float-panel { height: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 28px 16px; }
  .float-center { position: static; transform: none; width: auto; grid-column: 1 / -1; order: -1; margin-bottom: 12px; }
  .float-panel .fcard { position: static; width: auto !important; height: 118px !important; transform: none !important; filter: none; opacity: 1; }
  .float-panel .fcard.far { display: none; }
  .rail .step { flex-basis: min(78%, 320px); }
  .rail-foot { margin-top: 20px; }
  .faq-l, .faq-r { grid-column: 1 / -1; }
  .faq-l { margin-bottom: 24px; }
  .foot { padding: 48px 20px 0; }
  .foot-grid { grid-template-columns: 1fr 1fr; }
  .two { grid-template-columns: 1fr; }
  .sticky { position: static; }
  .page-head { padding: 40px 0 28px; }
  .page-head .display { font-size: 32px; line-height: 36px; }
}
@media (max-width: 560px) {
  .display { font-size: 32px; line-height: 36px; }
  .hero-art { margin: 40px auto 36px; }
  .hero-ctas { flex-direction: column; align-items: center; }
  .coin3d { width: 116px; height: 116px; }
  .coin3d .front svg { width: 50px; height: 50px; }
  .coin3d .back { padding: 20px; font-size: 9px; }
  .flip-tabs { left: 20%; }
  .code-big { font-size: 18px; flex-direction: column; align-items: flex-start; }
  .list { grid-template-columns: 1fr; }
  .fr-card { grid-template-columns: 72px minmax(0, 1fr); }
  .fr-card img, .fr-img { width: 72px; height: 54px; }
  .box { padding: 18px; }
}

/* =====================================================================
   MOTION LAYER
   Narrative visuals, glass controls, scroll reveals and the scroll story.
   Everything here is inert until motion.js marks the document ready, so a
   page with no JavaScript shows all of its content, still.
   ===================================================================== */

:root {
  --glass: rgba(255, 255, 255, .07);
  --glass-hover: rgba(255, 255, 255, .15);
  --glass-line: rgba(255, 255, 255, .16);
  --glass-top: rgba(255, 255, 255, .28);
}
:root[data-theme="light"] {
  --glass: rgba(0, 0, 0, .05);
  --glass-hover: rgba(0, 0, 0, .1);
  --glass-line: rgba(0, 0, 0, .12);
  --glass-top: rgba(255, 255, 255, .75);
}

/* ------------------------------------------------------ glass controls */
.pill { position: relative; transition: background .25s var(--ease), color .25s var(--ease), transform .25s var(--ease), box-shadow .25s var(--ease), backdrop-filter .25s var(--ease), opacity .2s; }
.pill:hover:not([disabled]) { transform: translateY(-1px) scale(1.035); }
.pill:active:not([disabled]) { transform: scale(.985); }
.pill:not(.ghost):not(.soft) { background-image: linear-gradient(180deg, rgba(255, 255, 255, .5), rgba(255, 255, 255, 0) 60%); }
.pill:not(.ghost):not(.soft):hover { filter: brightness(1.08); }
.pill.ghost, .pill.soft, .icon-btn, .seg {
  background: var(--glass);
  backdrop-filter: blur(14px) saturate(150%);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  box-shadow: inset 0 0 0 1px var(--glass-line), inset 0 1px 0 var(--glass-top);
}
.pill.ghost { color: var(--fg); }
.pill.ghost:hover, .pill.soft:hover {
  background: var(--glass-hover);
  backdrop-filter: blur(7px) saturate(190%);
  -webkit-backdrop-filter: blur(7px) saturate(190%);
  box-shadow: inset 0 0 0 1px var(--line2), inset 0 1px 0 var(--glass-top), 0 6px 20px rgba(0, 0, 0, .25);
}
.icon-btn:hover { background: var(--glass-hover); }
.seg { border: 0; }

/* -------------------------------------------------------- scroll reveals */
.motion-ready .reveal:not(.in) { opacity: 0; transform: translateY(18px); }
.motion-ready .reveal { transition: opacity .75s var(--ease), transform .75s var(--ease); }
.motion-ready [data-stagger] > * { transition: opacity .6s var(--ease), transform .6s var(--ease); transition-delay: calc(var(--i, 0) * 80ms); }
.motion-ready [data-stagger]:not(.in) > * { opacity: 0; transform: translateY(16px); }
.motion-ready .reveal.media:not(.in) { transform: translateY(24px) scale(.985); }
html.reduced .reveal, html.reduced [data-stagger] > * { opacity: 1 !important; transform: none !important; transition: none !important; }

/* --------------------------------------------------------------- hero */
.hero h1 .line { display: block; }
.hero-art { --p: 0; }
.hero-art .coin-lift { transform: translateY(calc(var(--p) * -14px)) scale(calc(1 + var(--p) * .04)); transform-box: fill-box; transform-origin: 50% 50%; }
.hero-art .sheen { animation: sheen 5.5s var(--ease) infinite; }
@keyframes sheen { 0%, 62% { transform: translateX(-150px); opacity: 0; } 70% { opacity: .85; } 92%, 100% { transform: translateX(150px); opacity: 0; } }
.hero-art .spark { opacity: 0; animation: spark 4.2s linear infinite; }
.hero-art .spark.s2 { animation-delay: 1.4s; }
.hero-art .spark.s3 { animation-delay: 2.8s; }
@keyframes spark { 0% { opacity: 0; transform: translate(0, 0); } 12% { opacity: .9; } 100% { opacity: 0; transform: translate(0, -46px); } }
html.reduced .hero-art .sheen, html.reduced .hero-art .spark, html.reduced .coin-spin { animation: none; }

/* ------------------------------------------------------- scroll story */
.story { position: relative; }
.story-grid { display: grid; grid-template-columns: minmax(0, 1fr) 328px; gap: 32px; align-items: start; }
.story-head { grid-column: 1 / -1; max-width: 760px; margin-bottom: 8px; }

.story-stage { position: sticky; top: max(88px, calc(50vh - 260px)); }
.story-beats { display: grid; gap: 38vh; padding: 26vh 0 34vh; margin: 0; list-style: none; }
.beat { position: relative; padding-left: 20px; opacity: .32; transition: opacity .5s var(--ease), transform .5s var(--ease); }
.beat::before { content: ""; position: absolute; left: 0; top: 9px; width: 5px; height: 5px; border-radius: 50%; background: var(--fg3); transition: background .4s, box-shadow .4s, transform .4s; }
.beat h3 { margin: 0 0 6px; font-size: 15px; line-height: 22px; font-weight: 500; }
.beat p { margin: 0; font-size: 13px; line-height: 20px; color: var(--fg2); }
.beat.on { opacity: 1; }
.beat.on::before { background: var(--accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 18%, transparent); transform: scale(1.2); }
.beat .beat-n { font-family: var(--mono); font-size: 11px; color: var(--fg3); margin-bottom: 4px; display: block; }

/* The stage: a desktop window that plays four states. */
.stage-wrap { position: relative; height: 100%; display: grid; place-items: center; }
.stage-win { width: 100%; max-width: 760px; border: 1px solid var(--line); border-radius: 14px; background: var(--panel2); overflow: hidden; box-shadow: 0 30px 70px rgba(0, 0, 0, .55); }
:root[data-theme="light"] .stage-win { box-shadow: 0 24px 50px rgba(0, 0, 0, .12); }
.win-bar { display: flex; align-items: center; gap: 12px; padding: 0 14px; height: 40px; border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--fg) 4%, transparent); }
.win-dots { display: flex; gap: 6px; }
.win-dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--line2); }
.win-url { flex: 1; font-family: var(--mono); font-size: 11px; color: var(--fg2); background: var(--input); border-radius: 999px; padding: 4px 12px; text-align: center; max-width: 340px; margin: 0 auto; }
.win-tab { font-size: 11px; font-weight: 500; color: var(--fg2); padding: 4px 10px; border-radius: 999px; background: var(--btn2); }
.win-body { position: relative; padding: 20px; min-height: 360px; display: flex; flex-direction: column; }
.win-head { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 14px; align-items: center; }
.st-coin { width: 34px; height: 34px; border-radius: 50%; background: radial-gradient(circle at 34% 30%, #fafafa, #9a9a9a 68%, #5e5e5e); display: grid; place-items: center; }
.st-coin img { width: 19px; height: 19px; mix-blend-mode: multiply; opacity: .75; }
.st-title { font-size: 26px; line-height: 1.05; font-weight: 700; letter-spacing: -.04em; transition: opacity .45s var(--ease), transform .45s var(--ease); }
.st-sub { color: var(--accent); font-size: 11px; margin-top: 2px; }
.st-recipient { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 9px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--input); }
.st-recipient b { font-weight: 500; display: block; font-size: 12px; }
.st-recipient i { font-style: normal; color: var(--fg2); font-size: 11px; font-family: var(--mono); }
.st-ico { width: 26px; height: 26px; border-radius: 7px; border: 1px solid var(--line); display: grid; place-items: center; color: var(--fg2); }
.st-ico svg { width: 13px; height: 13px; }
.st-ok { color: var(--accent); font-size: 13px; }
.st-table { margin-top: 22px; flex: 1 0 auto; }
.st-thead, .st-row { display: grid; grid-template-columns: 74px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 9px 2px; font-size: 12px; }
.st-thead { color: var(--fg3); font-size: 10px; letter-spacing: .06em; text-transform: uppercase; border-bottom: 1px solid var(--line); padding-bottom: 7px; }
.st-rows { position: relative; min-height: 190px; }
.st-row { border-bottom: 1px solid var(--line); opacity: 0; transform: translateY(8px); transition: opacity .4s var(--ease), transform .4s var(--ease); transition-delay: calc(var(--i) * 110ms); }
.st-row .tag-b { font-size: 11px; font-weight: 500; }
.st-row .tag-b.sell { color: var(--fg2); }
.st-row .sz { color: var(--fg2); font-variant-numeric: tabular-nums; }
.st-row .tax { color: var(--accent); font-variant-numeric: tabular-nums; }
.st-empty { position: absolute; inset: 0; display: grid; place-items: center; font-size: 12px; color: var(--fg3); transition: opacity .4s var(--ease); }
.st-tray { position: relative; margin-top: 18px; display: flex; align-items: center; justify-content: space-between; gap: 16px; border: 1px solid var(--line); border-radius: 12px; padding: 12px 16px; background: var(--input); opacity: 0; transform: translateY(14px); transition: opacity .5s var(--ease), transform .5s var(--ease); overflow: hidden; }
.st-tray .lbl { font-size: 11px; color: var(--fg2); }
.st-tray .amt { font-size: 20px; line-height: 26px; font-weight: 500; font-variant-numeric: tabular-nums; }
.st-tray .fill { position: absolute; inset: auto 0 0 0; height: 3px; background: var(--accent); width: 0; transition: width .8s var(--ease); }
.st-claimed { font-size: 11px; color: var(--accent); opacity: 0; transition: opacity .4s var(--ease); }
.st-flow { position: absolute; inset: 0; pointer-events: none; }
.st-flow i { position: absolute; left: var(--x); top: 46%; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); opacity: 0; }

/* States. The stage is told which one by data-state on the story section. */
[data-state="1"] .st-row, [data-state="2"] .st-row, [data-state="3"] .st-row { opacity: 1; transform: none; }
[data-state="1"] .st-title, [data-state="2"] .st-title, [data-state="3"] .st-title { opacity: .85; }
[data-state="1"] .st-flow i, [data-state="2"] .st-flow i { animation: drop 1.9s var(--ease) infinite; animation-delay: calc(var(--i) * .22s); }
@keyframes drop { 0% { opacity: 0; transform: translateY(0); } 15% { opacity: 1; } 85% { opacity: .9; } 100% { opacity: 0; transform: translateY(150px); } }
[data-state="2"] .st-tray, [data-state="3"] .st-tray { opacity: 1; transform: none; }
[data-state="2"] .st-tray .fill { width: 72%; }
[data-state="3"] .st-tray .fill { width: 0; transition-duration: .5s; }
[data-state="3"] .st-claimed { opacity: 1; }
[data-state="3"] .st-rows { opacity: .35; }
html.reduced .st-flow i { animation: none; }

/* ------------------------------------------------- step panel visuals */
.step-media .anim { opacity: 0; transform: translateY(10px); transition: opacity .5s var(--ease), transform .5s var(--ease); transition-delay: calc(var(--i, 0) * 130ms); }
.playing .anim { opacity: 1; transform: none; }
.type-line { display: inline-block; overflow: hidden; white-space: nowrap; max-width: 0; border-right: 1.5px solid transparent; }
.playing .type-line { animation: typing 1.5s steps(28, end) .25s forwards, caret .85s step-end 5; }
@keyframes typing { to { max-width: 22em; } }
@keyframes caret { 0%, 100% { border-color: transparent; } 50% { border-color: var(--fg2); } }
.stamp { opacity: 0; transform: scale(1.5) rotate(-12deg); }
.playing .stamp { animation: stamp .5s var(--ease) 1.5s forwards; }
@keyframes stamp { to { opacity: 1; transform: none; } }
.code-chars span { display: inline-block; opacity: 0; transform: translateY(-6px); }
.playing .code-chars span { animation: chars .32s var(--ease) forwards; animation-delay: calc(var(--i) * 45ms); }
@keyframes chars { to { opacity: 1; transform: none; } }
.flow-arrow { stroke-dasharray: 62; stroke-dashoffset: 62; }
.playing .flow-arrow { animation: draw 1s var(--ease) .35s forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
.drip { opacity: 0; }
.playing .drip { animation: drip 2.6s linear infinite; animation-delay: calc(var(--i) * .55s); }
@keyframes drip { 0% { opacity: 0; transform: translate(0, 0); } 10% { opacity: 1; } 80% { opacity: 1; } 100% { opacity: 0; transform: translate(0, 54px); } }
.bubble { opacity: 0; transform: translateY(10px) scale(.96); }
.playing .bubble { animation: pop .45s var(--ease) forwards; animation-delay: calc(var(--i) * .5s + .2s); }
@keyframes pop { to { opacity: 1; transform: none; } }
.playing .coin3d.auto { animation: coinIn 1.1s var(--ease) .1s 1; }
@keyframes coinIn { from { transform: rotateY(-180deg) scale(.86); } to { transform: none; } }

/* ------------------------------------------------- verification scan */
.scan { position: absolute; left: 0; right: 0; height: 130px; top: -130px; background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--accent) 20%, transparent), transparent); opacity: 0; pointer-events: none; z-index: 2; }
.playing .scan { animation: scan 3.6s var(--ease) infinite; }
@keyframes scan { 0% { top: -130px; opacity: 0; } 12% { opacity: 1; } 78% { opacity: 1; } 100% { top: 100%; opacity: 0; } }

/* ------------------------------------------------------- float panel */
.float-panel .rise { position: absolute; bottom: -8px; left: var(--x); width: 4px; height: 4px; border-radius: 50%; background: color-mix(in srgb, var(--accent) 70%, transparent); opacity: 0; }
.playing .rise { animation: rise 6.5s linear infinite; animation-delay: calc(var(--i) * 1.1s); }
@keyframes rise { 0% { opacity: 0; transform: translateY(0); } 10% { opacity: .75; } 90% { opacity: .1; } 100% { opacity: 0; transform: translateY(-280px); } }
html.reduced .rise, html.reduced .drip, html.reduced .bubble, html.reduced .anim, html.reduced .scan { animation: none !important; opacity: 1 !important; transform: none !important; }

@media (max-width: 1023px) {
  .story-grid { grid-template-columns: 1fr; }
  .story-head { position: static; }
  .story-stage { position: sticky; top: 80px; margin: 0 auto; width: 100%; }
  .win-body { min-height: 300px; padding: 16px; }
  .st-rows { min-height: 150px; }
  .story-beats { gap: 28vh; padding: 12vh 0 18vh; }
}
@media (max-width: 560px) {
}
.fcard { transform: translate3d(var(--mx, 0px), calc(var(--py, 0px) + var(--my, 0px)), 0); }
.fcard.far { transform: translate3d(var(--mx, 0px), calc(var(--py, 0px) + var(--my, 0px)), 0) scale(.8); }

.st-recipient { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 8px; align-items: center; margin-top: 14px; padding: 9px 10px; border: 1px solid rgba(255, 255, 255, .12); border-radius: 10px; background: rgba(255, 255, 255, .03); }
.st-recipient b { font-weight: 500; display: block; font-size: 9.5px; }
.st-recipient i { font-style: normal; color: rgba(255, 255, 255, .45); font-size: 8.5px; }
.st-ico { width: 22px; height: 22px; border-radius: 6px; border: 1px solid rgba(255, 255, 255, .14); display: grid; place-items: center; }
.st-ico svg { width: 11px; height: 11px; }
.st-ok { color: var(--accent); font-size: 11px; }
.st-rows { position: relative; min-height: 132px; }
.st-empty { position: absolute; inset: 0; display: grid; place-items: center; font-size: 9px; color: rgba(255, 255, 255, .35); border: 1px dashed rgba(255, 255, 255, .12); border-radius: 10px; transition: opacity .4s var(--ease); }
[data-state="1"] .st-empty, [data-state="2"] .st-empty, [data-state="3"] .st-empty { opacity: 0; }

.stage-caption { display: none; margin: 12px 0 0; font-size: 13px; line-height: 19px; }
.stage-caption b { display: block; font-weight: 500; margin-bottom: 3px; }
.stage-caption span { color: var(--fg2); }
@media (max-width: 1023px) {
  /* The pinned stage carries the copy itself here; the beat list stays in the
     document for its scroll length and for anything reading the page aloud. */
  .story-stage { z-index: 2; }
  .stage-caption { display: block; }
  .story-beats .beat { opacity: 0; }
  .story-beats { gap: 24vh; padding: 8vh 0 12vh; }
}
@media (max-width: 560px) {
  .st-title { font-size: 22px; line-height: 26px; }
  .win-head { grid-template-columns: 30px minmax(0, 1fr); }
  .win-head .st-recipient { grid-column: 1 / -1; }
}

/* -------------------------------------------------------- the mark */
img.brand-mark { width: 22px; height: 22px; object-fit: contain; }
/* The mark is drawn near-white on black. On a light page it is inverted to
   near-black rather than dimmed: it is monochrome, so it should sit at the
   same value as the wordmark beside it, and a partial dim leaves it a grey
   smudge next to black text. */
:root[data-theme="light"] img.brand-mark { filter: brightness(0); }

/* Struck into the coin faces rather than laid on top of them. The faces are a
   silver gradient, and a near-white mark on silver is invisible; darkened and
   held back, it reads as an impression in the metal. */
.coin3d .front img, .st-coin img { filter: brightness(0); opacity: .32; }
.coin-mark .mk-dark { filter: brightness(0); opacity: .3; }
.coin-mark .mk-light { filter: brightness(0) invert(1); opacity: .55; }
.coin-mark .mk-tint { opacity: .42; mix-blend-mode: multiply; }
.coin3d .front img { width: 56%; height: auto; mix-blend-mode: multiply; opacity: .62; }
.st-coin img { width: 15px; height: 15px; mix-blend-mode: multiply; opacity: .75; }

/* ===================================================================
   Shapes and moves borrowed from bliss.fun, on the same dark ground:
   pill navigation, a linked flow of the mechanism, a line that writes
   itself as you scroll, and cards that round off and light up.
   =================================================================== */

/* Navigation as separated pills. */
.nav a { border: 1px solid transparent; border-radius: 10px; padding: 0 16px; height: 40px; }
.nav a:hover { border-color: var(--line); background: var(--glass); backdrop-filter: blur(10px) saturate(140%); -webkit-backdrop-filter: blur(10px) saturate(140%); }
.nav a[aria-current="page"] { border-color: var(--line2); background: var(--glass); box-shadow: inset 0 1px 0 var(--glass-top); }
.sheet .nav a { border: 1px solid var(--line); border-radius: 12px; height: 60px; padding: 0 20px; margin-bottom: 8px; }

/* The mechanism, as four linked pills. */
.flow { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; align-self: start; justify-content: flex-end; }
.flow-pill {
  display: inline-flex; align-items: center; height: 36px; padding: 0 16px; border-radius: 10px;
  border: 1px solid var(--line); background: var(--glass); backdrop-filter: blur(10px) saturate(140%); -webkit-backdrop-filter: blur(10px) saturate(140%);
  font-size: 13px; font-weight: 500; color: var(--fg2);
  opacity: 0; transform: translateY(6px);
  transition: color .4s var(--ease), border-color .4s var(--ease), box-shadow .4s var(--ease);
}
.playing .flow-pill { animation: flowIn .5s var(--ease) forwards, flowOn 6s var(--ease) infinite; animation-delay: calc(var(--i) * .16s), calc(var(--i) * 1.2s); }
@keyframes flowIn { to { opacity: 1; transform: none; } }
@keyframes flowOn {
  0%, 12% { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 45%, transparent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 10%, transparent); }
  28%, 100% { color: var(--fg2); border-color: var(--line); box-shadow: none; }
}
.flow-link { width: 26px; height: 16px; color: var(--fg3); opacity: 0; }
.playing .flow-link { animation: flowIn .5s var(--ease) forwards; animation-delay: calc(var(--i) * .16s + .1s); }
.flow-link path { stroke-dasharray: 34; stroke-dashoffset: 34; }
.playing .flow-link path { animation: draw .6s var(--ease) forwards; animation-delay: calc(var(--i) * .16s + .2s); }

/* A line that writes itself, one word at a time, as the section passes. */
.statement { --p: 0; border-top: 0; padding: 40px 0 80px; }
.wordscrub { max-width: 900px; font-size: clamp(26px, 3.4vw, 40px); line-height: 1.18; }
.wordscrub span { transition: opacity .25s linear, color .25s linear; }
.motion-ready .wordscrub span { opacity: calc(var(--p) * var(--n) - var(--i) + .15); }
html.reduced .wordscrub span { opacity: 1; }

/* Cards round off, and the step you are reading is the bright one. */
.step-media, .split-media, .stage-win, .float-panel .fcard, .box, .tile, .tile-img { border-radius: 14px; }
.box { border-radius: 16px; }
.step { transition: opacity .5s var(--ease); }
.motion-ready .rail-track.in .step { opacity: .4; }
.motion-ready .rail-track.in .step.on, html.reduced .rail .step { opacity: 1; }
html.reduced .rail-track { scroll-behavior: auto; }
.step-media { overflow: hidden; }

@media (max-width: 1023px) {
  .steps-head { display: block; }
  .flow { justify-content: flex-start; margin-top: 20px; }
  .statement { padding: 24px 0 48px; }
}


/* ---- Geist weight table (user, 27 Sep 2026) ----------------------------
   Headings 600-700, body 400-500, buttons, navigation and labels 500-600,
   figures 500-600. Declared last so it lands on top of the older rules that
   set 500 across the board, rather than editing each of them. */
.pill, .btn, button, .nav a, .nav-pill, .tab, .ca-pill, .wallet-btn { font-weight: 550; }
.cap, .eyebrow, .label, .kv > span:first-child { font-weight: 500; }
.num, .mono, .fc-amt, [data-eth], .amount { font-weight: 550; font-variant-numeric: tabular-nums; }
h1, h2, h3, h4, .display, .h3, .h4 { font-family: var(--sans); }
/* Geist ships a variable face over this range, so 550 resolves rather than
   snapping to 500 or 600. Where it does not load, the stack's fallback
   rounds it, which is why nothing here depends on the half step. */

/* the CA pill before there is a CA: same footprint, plainly not pressable */
.ca-pill.is-empty { opacity: .62; cursor: default; }
.ca-pill.is-empty .mono { letter-spacing: 0; }


/* ---- How it works: scrolled through, not clicked through ---------------
   The section is taller than the screen by one viewport per extra card, so
   there is vertical distance to spend on horizontal travel. home.js maps one
   onto the other; without it the stage is simply a tall block holding a
   normal sideways scroller, which still works.

   --rail-extra is set by the script from the real overflow, so a wider screen
   showing more cards at once does not reserve scroll distance it cannot use. */
.rail-pin { position: relative; height: calc(100svh + var(--rail-extra, 150vh)); }
.rail-stage {
  position: sticky; top: 0; height: 100svh;
  display: grid; grid-template-columns: minmax(0, 1fr); align-content: center;
}
/* A grid item defaults to min-width:auto, so it may grow past its column to
   fit its contents. The track's contents include the end spacers, so without
   this the spacers widened the track, which widened the cards, which widened
   the spacers. minmax(0, 1fr) above and this below both say the same thing:
   the column is the width, and the track scrolls inside it. */
.rail-stage > *, .rail-pin .rail, .rail-pin .rail-track { min-width: 0; }

/* Half a card of room at each end, so the first and the last step can both
   reach the middle of the screen. As spacers rather than as padding on the
   track: a card is sized as a percentage of the track's content box, so
   padding it would shrink the cards, which would change the half-card figure,
   which would shrink them again. */
.rail-track { scroll-padding-inline: 50%; }
.rail-spacer { flex: 0 0 var(--rail-pad, 0px); align-self: stretch; }
.rail-pin .rail .step { scroll-snap-align: center; }

/* Only the step in the spotlight is at full strength. */
.rail-pin .rail .step { opacity: .34; transition: opacity .45s var(--ease), transform .45s var(--ease); }
.rail-pin .rail .step.on { opacity: 1; }

.rail-hint { color: var(--fg3); margin: 0; white-space: nowrap; }
.rail-pin.is-done .rail-hint { opacity: 0; }
.rail-hint { transition: opacity .3s var(--ease); }

/* Below the breakpoint where three cards fit, pinning a full screen and
   stealing the scroll is worse than letting it be: on a phone the section is
   an ordinary sideways scroller again. */
@media (max-width: 860px) {
  .rail-pin { height: auto; }
  .rail-stage { position: static; height: auto; }
  .rail-spacer { display: none; }
  .rail-pin .rail .step { opacity: 1; scroll-snap-align: start; }
}
@media (prefers-reduced-motion: reduce) {
  .rail-pin { height: auto; }
  .rail-stage { position: static; height: auto; }
  .rail-pin .rail .step { opacity: 1; transition: none; }
}

/* ---- docs page tables --------------------------------------------------
   Reference material, so it is set as a table rather than as cards: a reader
   comparing three addresses wants rows that line up, not objects. */
.doc-list { margin: 12px 0; padding: 0 0 0 18px; display: grid; gap: 10px; }
.doc-list li { line-height: 20px; }
.doc-table { width: 100%; border-collapse: collapse; margin: 16px 0; font-size: 13px; }
.doc-table th {
  text-align: left; font-weight: 500; color: var(--fg2); font-size: 11px;
  letter-spacing: .06em; text-transform: uppercase; padding: 0 12px 10px 0;
  border-bottom: 1px solid var(--line);
}
.doc-table td { padding: 14px 12px 14px 0; border-bottom: 1px solid var(--line); vertical-align: top; line-height: 19px; }
.doc-table td:last-child, .doc-table th:last-child { padding-right: 0; }
.doc-table b { color: var(--fg); font-weight: 500; display: block; }
.addr-why { display: block; font-style: normal; color: var(--fg3); font-size: 12px; margin-top: 3px; }
/* An address is the one thing on the page worth scrolling sideways for. */
.addr-table { display: block; overflow-x: auto; }

/* ---- the platform strip beside a fundraiser link input -----------------
   Four platforms, and the state of each. A row of logos would say "these all
   work", which is not true, so each one carries its own answer instead. */
.pstrip-wrap { margin-top: 14px; }
.pstrip { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.pstrip-item {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px; border-radius: 10px;
  border: 1px solid var(--line); background: var(--panel);
  font-size: 12.5px; line-height: 1;
}
.pstrip-item b { font-weight: 550; color: var(--fg); }
.pstrip-item i { font-style: normal; color: var(--fg3); font-size: 11.5px; }
.pstrip-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--fg3); flex: none; }
/* Live is the only one filled in. The others are outlined, which reads as
   "present but not on" without needing a colour the palette does not have. */
/* Available now is filled in; coming soon is outlined and quieter. The
   difference has to be visible at a glance without a colour the palette does
   not have, and without a coming platform looking like a working one. */
.pstrip-item.is-live { border-color: var(--fg2); }
.pstrip-item.is-live .pstrip-dot { background: var(--accent); }
.pstrip-item.is-soon { background: none; opacity: .66; }
.pstrip-item.is-soon .pstrip-dot { background: none; border: 1px solid var(--fg3); }
.pstrip-foot { margin: 10px 0 0; }
@media (max-width: 560px) {
  .pstrip-item i { display: none; }
}

/* ---- the launch confirmation ------------------------------------------
   The moment the product exists for. It was a grey note in the sidebar,
   which on a screen recording reads as nothing having happened, so it now
   takes the top of the page and names the four things somebody actually
   wants: the coin, its address, the fundraiser, and where the fees go. */
.won {
  border: 1px solid var(--fg2); border-radius: 16px; background: var(--panel);
  padding: clamp(22px, 2.4vw, 32px); margin: 28px 0 8px;
  /* The bar is sticky, so scrolling this to the top of the viewport put the
     headline underneath it. This is what a recording would have caught. */
  scroll-margin-top: calc(var(--nav-h, 64px) + 20px);
}
.won-head { display: flex; gap: 14px; align-items: flex-start; }
.won-tick {
  flex: none; width: 30px; height: 30px; border-radius: 50%;
  background: var(--accent); color: var(--bg);
  display: grid; place-items: center; margin-top: 2px;
}
.won-tick svg { width: 17px; height: 17px; stroke-width: 2.4; }
.won-title { font-size: clamp(24px, 2.6vw, 32px); line-height: 1.05; letter-spacing: -.04em; font-weight: 700; margin: 0; }
.won-sub { margin: 6px 0 0; color: var(--fg2); font-size: 14px; }
.won-grid {
  margin: 24px 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 28px;
  border-top: 1px solid var(--line); padding-top: 20px;
}
.won-grid > div { min-width: 0; }
.won-grid dt { font-size: 11px; letter-spacing: .07em; text-transform: uppercase; color: var(--fg3); margin: 0 0 5px; }
.won-grid dd { margin: 0; font-size: 14.5px; overflow-wrap: anywhere; }
.won-grid dd i { display: block; font-style: normal; color: var(--fg3); font-size: 12px; margin-top: 3px; }
/* An address is for copying, so it looks like something you can press. */
.won-copy {
  background: none; border: 0; padding: 0; color: var(--fg); cursor: pointer;
  font-size: 13px; text-align: left; border-bottom: 1px dashed var(--line2, var(--line));
}
.won-copy:hover { border-bottom-style: solid; }
.won-copy.is-copied { color: var(--accent); }
.won-copy.is-copied::after { content: ' copied'; font-size: 11px; }
.won-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
@media (max-width: 620px) { .won-grid { grid-template-columns: minmax(0, 1fr); } }