/* =====================================================================
   SOCIAL PUMP ADMINISTRATION
   A government office that got taken over by the timeline: official
   forms, stamps and ruled tables — printed in loud colour.
   Type: Libre Franklin (everything) · IBM Plex Mono (every number).
   ===================================================================== */

:root {
  /* paper + ink */
  --paper: #F6F3E9;
  --paper-2: #EFEADB;
  --white: #FFFFFF;
  --ink: #101723;
  --ink-2: #3A4558;
  --ink-3: #6B7788;

  /* colour blocks */
  --blue: #1B45D0;
  --blue-deep: #0E2A86;
  --blue-soft: #DCE6FF;
  --green: #12C46A;
  --green-deep: #0A8C4A;
  --green-soft: #C8F7DC;
  --pink: #FF3E8F;
  --pink-soft: #FFD9E9;
  /* The accent runs through these three; [data-theme] swaps them wholesale.
     Default is pump.fun's own mint green (#86EFAC from their palette). */
  --accent: #86EFAC;
  --accent-hi: #1FD978;
  --accent-soft: #DFFBE8;
  --red: #E8362A;

  --font: "Libre Franklin", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --r: 6px;
  --bw: 2px;
  --max: 1280px;
  /* the page's side margin. Anything that breaks out of .wrap (the
     beneficiary rail) reads this too, so full-bleed things still line
     up with the text above them at every width. */
  --gutter: 1.25rem;
  --ease: cubic-bezier(.22, .78, .18, 1);
  --nav-h: 88px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 20px); }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }
/* ?static dev flag (fx.js): resolve every keyframe instantly for screenshots */
.static *, .static *::before, .static *::after { animation-duration: .01s !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  font-size: 16.5px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
h1, h2, h3, p, ul, ol, dl { margin: 0; }
ul, ol { padding: 0; list-style: none; }
button { font: inherit; color: inherit; cursor: pointer; background: none; border: 0; }
code { font-family: var(--mono); }
b, strong { font-weight: 700; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.wrap { width: min(var(--max), calc(100% - var(--gutter) * 2)); margin-inline: auto; }

/* paper tooth over everything */
.grain {
  position: fixed; inset: 0; z-index: 9999; pointer-events: none; opacity: .055;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
#progress {
  position: fixed; top: 0; left: 0; right: 0; height: 4px; z-index: 80;
  background: linear-gradient(90deg, var(--green), var(--accent) 45%, var(--pink));
  transform: scaleX(0); transform-origin: 0 50%; pointer-events: none;
}
.w { display: inline-block; overflow: hidden; vertical-align: top; padding: 0 .02em .1em 0; margin-bottom: -.1em; }
.w > span { display: inline-block; }

/* ---------------------------------------------------------- type */
.display { font-weight: 900; text-transform: uppercase; letter-spacing: -.035em; line-height: .9; }
.eyebrow {
  font-family: var(--mono); font-size: .7rem; font-weight: 600;
  letter-spacing: .2em; text-transform: uppercase; color: var(--blue);
  display: inline-flex; align-items: center; gap: .6rem;
  padding: .32rem .7rem;
  border: var(--bw) solid var(--ink); border-radius: 999px;
  background: var(--white);
  margin-bottom: 1.25rem;
}
.eyebrow::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--pink); flex: none; }
.eyebrow--accent { color: var(--blue-deep); }
.eyebrow--accent::before { background: var(--green); }
.lede { font-size: 1.1rem; line-height: 1.6; color: var(--ink-2); max-width: 56ch; font-weight: 500; }
.num, td.num, th.num { font-variant-numeric: tabular-nums; text-align: right; }

/* ------------------------------------------------------- buttons */
.btn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  padding: .88rem 1.5rem;
  border: var(--bw) solid var(--ink); border-radius: var(--r);
  background: var(--white); color: var(--ink);
  font-weight: 800; font-size: .82rem;
  letter-spacing: .1em; text-transform: uppercase;
  text-decoration: none;
  box-shadow: 4px 4px 0 var(--ink);
  transition: transform .16s var(--ease), box-shadow .16s var(--ease), background .2s;
  white-space: nowrap;
}
.btn:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--ink); }
.btn:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }
.btn:focus-visible { outline: 3px solid var(--pink); outline-offset: 3px; }
.btn--accent { background: var(--accent); }
.btn--accent:hover { background: var(--accent-hi); }
.btn--ghost { background: var(--white); }
.btn--ghost:hover { background: var(--blue-soft); }
.btn--lg { padding: 1.05rem 1.9rem; font-size: .9rem; }
.btn--sm { padding: .6rem 1rem; font-size: .72rem; box-shadow: 3px 3px 0 var(--ink); }
.btn--sm:hover { box-shadow: 5px 5px 0 var(--ink); }
.btn--xs { padding: .4rem .75rem; font-size: .66rem; box-shadow: 2px 2px 0 var(--ink); }
.btn--xs:hover { box-shadow: 4px 4px 0 var(--ink); }
/* icon-only: square, so the glyph sits dead centre instead of in a pill */
.btn--icon { padding: .6rem; display: inline-grid; place-items: center; }
.btn__x { width: 15px; height: 15px; flex: none; }
.btn .arrow { display: inline-block; transition: transform .3s var(--ease); }
.btn:hover .arrow { transform: translateY(3px); }

.live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); flex: none; border: 1.5px solid var(--ink); animation: pulse 1.8s infinite; }
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(18, 196, 106, .6); }
  70% { box-shadow: 0 0 0 8px rgba(18, 196, 106, 0); }
  100% { box-shadow: 0 0 0 0 rgba(18, 196, 106, 0); }
}
.up { color: var(--green-deep) !important; }
.down { color: var(--red) !important; }

/* ------------------------------------------------------ the stamp */
.stamp, .mc__stamp, .stage__stamp, .ledger__stamp {
  font-family: var(--font); font-weight: 900; letter-spacing: .16em; text-transform: uppercase;
  border: 3px solid currentColor; border-radius: 4px;
  background: var(--white);
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='70'%3E%3Cfilter id='r'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.028' numOctaves='4'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0, 0 0 0 0 0, 0 0 0 0 0, 0 0 0 -0.42 1.015'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23r)'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='70'%3E%3Cfilter id='r'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.028' numOctaves='4'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0, 0 0 0 0 0, 0 0 0 0 0, 0 0 0 -0.42 1.015'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23r)'/%3E%3C/svg%3E");
}

/* ============================================== official gov banner */
.govbar { position: relative; z-index: 60; background: var(--ink); color: #E7ECF4; border-bottom: var(--bw) solid var(--ink); font-size: .78rem; }
.govbar__in { display: flex; align-items: center; gap: .65rem; min-height: 34px; padding: .35rem 0; }
.govbar__seal { color: var(--accent); width: 15px; height: 15px; flex: none; }
.govbar__seal svg { width: 100%; height: 100%; }
.govbar__txt { color: #A7B2C2; }
.govbar__txt b { color: var(--white); font-weight: 700; }
.govbar__more { margin-left: auto; color: var(--accent); font-size: .72rem; font-weight: 600; letter-spacing: .04em; border-bottom: 1px dotted currentColor; padding-bottom: 1px; }
.govbar__more:hover { color: var(--green); }
.govbar__more[aria-expanded="true"] span { display: inline-block; transform: rotate(180deg); }
.govbar__panel { background: #1B2434; border-bottom: var(--bw) solid var(--ink); }
.govbar__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; padding: 1.25rem 0 1.4rem; }
.govbar__grid p { color: #A7B2C2; font-size: .8rem; max-width: 46ch; }
.govbar__h { font-weight: 800; color: var(--white); font-size: .82rem; margin-bottom: .2rem !important; }
.govbar__grid code { color: var(--accent); font-size: .78rem; }

/* ========================================================== header */
.top {
  position: sticky; top: 0; z-index: 55;
  background: var(--paper);
  border-bottom: var(--bw) solid transparent;
  transition: border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.top.is-scrolled { border-bottom-color: var(--ink); box-shadow: 0 6px 0 rgba(16, 23, 35, .06); }
.top__in { display: flex; align-items: center; gap: 1.4rem; min-height: var(--nav-h); }

.brand { display: inline-flex; align-items: center; gap: .75rem; text-decoration: none; flex: none; }
.brand__seal { width: 50px; height: 50px; flex: none; transition: transform .7s var(--ease); }
.brand:hover .brand__seal { transform: rotate(-18deg) scale(1.06); }
.brand__txt { display: grid; gap: .1rem; }
.brand__name { font-weight: 900; font-size: .95rem; letter-spacing: -.005em; text-transform: uppercase; line-height: 1.1; }
.brand__sub { font-family: var(--mono); font-size: .6rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--blue); }
.brand:focus-visible { outline: 3px solid var(--pink); outline-offset: 4px; }

.dock { margin-inline: auto; display: flex; gap: .25rem; padding: .3rem; border: var(--bw) solid var(--ink); border-radius: 999px; background: var(--white); box-shadow: 3px 3px 0 var(--ink); }
.dock__item {
  padding: .5rem .95rem; border-radius: 999px;
  font-size: .7rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-2); text-decoration: none;
  transition: background .2s, color .2s, transform .3s var(--ease);
}
.dock__item:hover { background: var(--blue-soft); color: var(--ink); transform: translateY(-1px); }
.dock__item.is-active { background: var(--green); color: var(--ink); }

.top__right { display: flex; align-items: center; gap: .6rem; flex: none; }

/* The dock only exists above 1080px (it is display:none below), and up there
   it has to sit in the middle of the page, not in the middle of whatever is
   left between the wordmark and the buttons — margin-inline:auto in a flex
   row centres it in the leftover space, so it drifts whenever one side
   changes width. Three columns with equal outer tracks pin it to the page
   centre and leave the narrow layout on flex, untouched. */
@media (min-width: 1081px) {
  .top__in { display: grid; grid-template-columns: 1fr auto 1fr; }
  .brand { justify-self: start; }
  .dock { margin-inline: 0; }
  .top__right { justify-self: end; }
}
.quote {
  display: inline-flex; align-items: baseline; gap: .5rem;
  padding: .42rem .75rem;
  border: var(--bw) solid var(--ink); border-radius: var(--r);
  background: var(--white); box-shadow: 3px 3px 0 var(--ink);
  text-decoration: none; font-family: var(--mono); font-size: .76rem;
  transition: transform .16s var(--ease), box-shadow .16s var(--ease);
}
.quote:hover { transform: translate(-1px, -1px); box-shadow: 5px 5px 0 var(--ink); }
.quote__sym { color: var(--blue); font-weight: 700; }
.quote__val { font-variant-numeric: tabular-nums; font-weight: 600; }
.quote__chg { font-size: .7rem; color: var(--ink-3); font-variant-numeric: tabular-nums; }

/* ============================================================ hero */
.hero {
  position: relative; overflow: hidden;
  min-height: min(860px, calc(100svh - var(--nav-h)));
  display: grid; align-content: center;
  background: var(--blue-deep);
  color: var(--white);
  border-bottom: var(--bw) solid var(--ink);
  padding: clamp(3rem, 6vw, 6rem) 0 clamp(4rem, 7vw, 7rem);
}
.hero__bg { position: absolute; inset: 0; pointer-events: none; }
.hero__guil {
  position: absolute; inset: -10%;
  background-image:
    repeating-radial-gradient(circle at 76% 32%, transparent 0 17px, rgba(255, 255, 255, .12) 17px 19px),
    repeating-radial-gradient(circle at 12% 78%, transparent 0 23px, rgba(134, 239, 172, .2) 23px 25px);
  mask-image: radial-gradient(ellipse at 60% 45%, #000 4%, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse at 60% 45%, #000 4%, transparent 70%);
}
.hero__grid-lines {
  position: absolute; inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, .22) 1.5px, transparent 1.6px);
  background-size: 24px 24px;
  mask-image: linear-gradient(#000 4%, transparent 78%);
  -webkit-mask-image: linear-gradient(#000 4%, transparent 78%);
  opacity: .5;
}
.hero__glow {
  position: absolute; left: 50%; top: -20%; width: 130%; height: 100%; transform: translateX(-50%);
  background: radial-gradient(ellipse at 64% 38%, rgba(134, 239, 172, .26), transparent 52%),
              radial-gradient(ellipse at 18% 88%, rgba(255, 62, 143, .24), transparent 55%);
}
/* market candles printed across the bottom of the hero */
.hero__candles { position: absolute; left: 0; right: 0; bottom: 0; height: 32%; display: flex; align-items: flex-end; gap: clamp(4px, .9vw, 12px); padding: 0 2vw; }
.hero__candles .cndl { flex: 1 1 0; position: relative; display: flex; justify-content: center; animation: candle 1s var(--ease) both; }
.hero__candles .cndl i { position: absolute; bottom: 0; width: 2px; background: var(--ink); opacity: .35; }
.hero__candles .cndl b { width: 100%; max-width: 17px; border: 2px solid var(--ink); border-bottom: 0; border-radius: 2px 2px 0 0; background: currentColor; }
.hero__candles .cndl--up { color: var(--green); }
.hero__candles .cndl--dn { color: var(--pink); }
@keyframes candle { from { opacity: 0; transform: translateY(24px) scaleY(.4); } to { opacity: 1; transform: none; } }

.hero__in { position: relative; display: grid; grid-template-columns: 1.06fr .94fr; gap: clamp(2rem, 4vw, 4rem); align-items: center; }
.hero__copy > * { animation: rise .9s var(--ease) both; }
.hero__copy > .eyebrow { animation-delay: .05s; background: var(--accent); color: var(--ink); border-color: var(--ink); box-shadow: 3px 3px 0 var(--ink); }
.hero__copy > .eyebrow::before { background: var(--red); }
.hero__title { font-size: clamp(2.4rem, 5.1vw, 4.6rem); margin-bottom: 1.4rem; animation: none; }
.hero__line { display: block; overflow: hidden; padding-bottom: .07em; margin-bottom: -.07em; }
.hero__line > span { display: inline-block; transform: translateY(108%); animation: riseIn 1.05s var(--ease) forwards; }
.hero__line:nth-child(1) > span { animation-delay: .08s; }
.hero__line:nth-child(2) > span { animation-delay: .18s; }
.hero__line:nth-child(3) > span { animation-delay: .28s; }
.hero__line--accent > span { color: var(--accent); -webkit-text-stroke: 3px var(--ink); paint-order: stroke fill; }
@keyframes riseIn { to { transform: translateY(0); } }
@keyframes rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

.hero__sub { font-size: clamp(1.15rem, 1.7vw, 1.55rem); font-weight: 700; animation-delay: .42s; }
.hero__note { margin-top: .45rem !important; color: rgba(255, 255, 255, .78); font-size: 1rem; animation-delay: .5s; }
.hero__note b { color: var(--accent); }

.hero__plate { display: flex; margin: 1.8rem 0; border: var(--bw) solid var(--ink); border-radius: var(--r); overflow: hidden; width: fit-content; background: var(--white); color: var(--ink); box-shadow: 5px 5px 0 var(--ink); animation-delay: .58s; }
.plate { padding: .8rem 1.3rem; display: grid; gap: .15rem; align-content: center; }
.plate + .plate { border-left: var(--bw) solid var(--ink); background: var(--accent-soft); }
.plate__l { font-family: var(--mono); font-size: .58rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-3); }
.plate__v { font-weight: 900; font-size: 1.7rem; letter-spacing: -.03em; line-height: 1; color: var(--blue); }
.plate__v--mono { font-family: var(--mono); font-weight: 600; font-size: 1.25rem; color: var(--ink); font-variant-numeric: tabular-nums; }
.plate--data { display: flex; align-items: baseline; gap: .55rem; }
.plate--pending .plate__v--mono { font-size: .82rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.plate--pending .plate__chg { display: none; }
.plate--data .plate__l { align-self: center; }
.plate__chg { font-family: var(--mono); font-size: .76rem; color: var(--ink-3); font-variant-numeric: tabular-nums; }

.hero__cta { display: flex; flex-wrap: wrap; gap: .8rem; animation-delay: .66s; }
.hero__facts { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.5rem; animation-delay: .74s; }
.hero__facts li {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .38rem .8rem;
  border: var(--bw) solid var(--ink); border-radius: 999px;
  background: rgba(255, 255, 255, .16);
  font-family: var(--mono); font-size: .68rem; font-weight: 500; letter-spacing: .05em;
}

/* hero stage: the seal, orbiting beneficiaries, a stamp */
.hero__stage { position: relative; aspect-ratio: 1; max-width: 560px; margin-inline: auto; width: 100%; }
.stage__seal { position: absolute; inset: 17%; animation: fadeScale 1.2s var(--ease) .25s both; }
/* the seal stays upright — an official seal that reads upside down looks
   like a mistake. The dashed ring and the portraits do the orbiting. */
.stage__seal img { width: 100%; height: auto; filter: drop-shadow(10px 12px 0 rgba(16, 23, 35, .5)); }
@keyframes sealSpin { to { transform: rotate(360deg); } }
@keyframes fadeScale { from { opacity: 0; transform: scale(.88); } to { opacity: 1; transform: none; } }
.stage__ring { position: absolute; inset: 4%; border-radius: 50%; border: 3px dashed rgba(255, 255, 255, .4); animation: sealSpin 200s linear infinite reverse; }
.stage__ring::before { content: ""; position: absolute; inset: 7%; border-radius: 50%; border: 2px solid var(--accent); opacity: .45; }
.stage__orbit { position: absolute; inset: 0; animation: sealSpin 58s linear infinite; }
/* seal radius is 33% of the stage; app.js places these at 47% with a 20% span,
   so their inner edge clears the ring text by ~4% of the stage. The paper fill
   is load-bearing: the real mascot art includes transparent vectors. */
.orb {
  position: absolute; width: 20%; aspect-ratio: 1;
  border-radius: 50%; overflow: hidden;
  border: var(--bw) solid var(--ink);
  background: var(--paper);
  box-shadow: 4px 4px 0 rgba(16, 23, 35, .55);
  animation: sealSpin 58s linear infinite reverse;
}
.orb img { width: 100%; height: 100%; object-fit: cover; }
.stage__stamp {
  position: absolute; right: 0; bottom: 7%; z-index: 3;
  padding: .5rem 1rem;
  color: var(--green-deep); font-size: .84rem;
  background: var(--white);
  transform: rotate(-9deg);
  animation: stampIn .45s cubic-bezier(.2, 1.7, .5, 1) 1.25s both;
}
@keyframes stampIn { from { opacity: 0; transform: rotate(-9deg) scale(2.4); } to { opacity: 1; transform: rotate(-9deg) scale(1); } }

.hero__scroll { position: absolute; left: 50%; bottom: 1.2rem; transform: translateX(-50%); width: 24px; height: 38px; border: var(--bw) solid var(--ink); border-radius: 999px; background: var(--white); display: grid; place-items: center; z-index: 2; }
.hero__scroll span { width: 4px; height: 8px; border-radius: 2px; background: var(--pink); animation: scrollDot 1.8s var(--ease) infinite; }
@keyframes scrollDot { 0% { transform: translateY(-7px); opacity: 0; } 40% { opacity: 1; } 100% { transform: translateY(8px); opacity: 0; } }

/* ========================================================== ticker */
.ticker {
  position: relative; display: flex; align-items: stretch;
  border-bottom: var(--bw) solid var(--ink);
  background: var(--ink); color: var(--white);
  font-family: var(--mono); font-size: .8rem; font-weight: 500;
  overflow: hidden;
}
.ticker__tag {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .7rem 1rem; flex: none;
  background: var(--pink); color: var(--white);
  border-right: var(--bw) solid var(--ink);
  font-size: .64rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase;
}
.ticker__tag::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--white); animation: pulse 2s infinite; }
.ticker__mask { overflow: hidden; white-space: nowrap; padding: .7rem 0; flex: 1; }
.ticker__track { display: inline-flex; align-items: center; animation: marquee 62s linear infinite; will-change: transform; }
.ticker:hover .ticker__track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-50%); } }
.tick { display: inline-flex; align-items: baseline; gap: .55rem; padding: 0 1.3rem; }
/* the beneficiary's own face, run alongside its symbol. align-self keeps it
   centred on a row that is otherwise baseline-aligned for the numerals. */
.tick__face {
  align-self: center; flex: none;
  width: 22px; height: 22px; border-radius: 50%;
  object-fit: cover; background: var(--paper);
  border: 1.5px solid rgba(255, 255, 255, .55);
  margin-right: -.15rem;
}
.tick__sym { color: var(--accent); font-weight: 700; }
.tick__price { font-variant-numeric: tabular-nums; }
.tick .up { color: var(--green) !important; }
.tick__pend { color: #8A95A6; }
.tick__note { padding: 0 1.3rem; color: #8A95A6; letter-spacing: .1em; text-transform: uppercase; font-size: .68rem; }
.tick__sep { color: var(--pink); }

/* ======================================================== sections */
.section { padding: clamp(4rem, 7.5vw, 8rem) 0; position: relative; }
.section__head { margin-bottom: clamp(2.2rem, 4vw, 3.6rem); max-width: 62ch; }
.section__head h2 { font-size: clamp(2.1rem, 5vw, 4.1rem); margin-bottom: 1.2rem; }
.section__head--center { margin-inline: auto; text-align: center; }
.section__head--center .lede { margin-inline: auto; }

/* ======================================================== big idea */
.idea { background: var(--paper); border-bottom: var(--bw) solid var(--ink); }
.idea__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 4.5vw, 4.5rem); align-items: start; }
.manifesto { display: grid; gap: clamp(1rem, 1.8vw, 1.6rem); }
.manifesto__line { font-size: clamp(1.2rem, 1.9vw, 1.7rem); font-weight: 600; line-height: 1.34; max-width: 34ch; }
.manifesto__line em { font-style: normal; background: var(--green-soft); box-shadow: 0 0 0 4px var(--green-soft); border-radius: 2px; }
.manifesto__line:first-child em { background: var(--blue-soft); box-shadow: 0 0 0 4px var(--blue-soft); }
.manifesto__foot { margin-top: .6rem; font-family: var(--mono); font-size: .74rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--blue); }

.ledger {
  position: relative;
  border: var(--bw) solid var(--ink); border-radius: var(--r);
  background: var(--white);
  box-shadow: 7px 7px 0 var(--ink);
  padding-bottom: 3.1rem;
  overflow: hidden;
}
.ledger__head, .ledger__row { display: grid; grid-template-columns: 1fr 1fr; }
.ledger__head span, .ledger__row span { padding: .9rem 1.15rem; }
.ledger__head {
  background: var(--ink); color: var(--white);
  font-family: var(--mono); font-size: .64rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
}
.ledger__head span + span { color: var(--green); }
.ledger__head span + span, .ledger__row span + span { border-left: var(--bw) solid var(--ink); }
.ledger__row { border-top: var(--bw) solid var(--ink); font-size: .95rem; font-weight: 600; transition: background .2s; }
.ledger__row:hover span + span { background: var(--green-soft); }
.ledger__row span:first-child { color: var(--ink-3); text-decoration: line-through; text-decoration-color: var(--red); text-decoration-thickness: 2px; }
.ledger__row .is-new { color: var(--ink); }
.ledger__stamp {
  position: absolute; right: 1.5rem; bottom: .85rem;
  padding: .32rem .7rem;
  color: var(--red); font-size: .62rem;
  transform: rotate(-7deg);
}

/* =================================================== beneficiaries
   Purely a gallery. The memes are here to be looked at — no numbers,
   no charts, nothing to read but the joke. */
.memes { background: var(--blue-soft); border-bottom: var(--bw) solid var(--ink); }
/* The beneficiaries live on a rail that is wider than the screen. On
   desktop fx.js scrubs it sideways as the section passes, so scrolling
   down walks the cards along. On phones (and without fx) it is a plain
   swipeable strip that snaps card by card — see the mobile block below. */
.memes__rail {
  /* the rail breaks out of .wrap to the full viewport, then pads itself
     back to the page gutter, so card one starts exactly under the heading */
  --rail-gutter: max(var(--gutter), calc((100vw - var(--max)) / 2));
  width: 100vw;
  margin-left: 50%;
  transform: translateX(-50%);
  padding-inline: var(--rail-gutter);
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.memes__rail::-webkit-scrollbar { display: none; }
.memes__grid {
  display: flex;
  gap: clamp(1rem, 1.6vw, 1.6rem);
  width: max-content;
  padding-block: .4rem 1.1rem;
  will-change: transform;
}
.mc { flex: 0 0 clamp(268px, 27vw, 380px); }

/* dots + swipe hint under the rail. Hidden while something else is
   driving the rail for you (desktop with fx). */
.memes__foot {
  display: none;
  align-items: center; justify-content: center;
  gap: .4rem 1.2rem; flex-wrap: wrap;
  margin-top: .1rem;
}
html.no-fx .memes__foot { display: flex; }
.memes__foot.is-off { display: none; }
.memes__dots { display: inline-flex; align-items: center; gap: .1rem; }
.memes__dot { display: grid; place-items: center; width: 26px; height: 26px; padding: 0; }
.memes__dot::before {
  content: "";
  width: 9px; height: 9px;
  border: var(--bw) solid var(--ink); border-radius: 50%;
  background: transparent;
  transition: background .25s var(--ease), transform .25s var(--ease);
}
.memes__dot[aria-current]::before { background: var(--ink); transform: scale(1.2); }
/* flex: none — it drops to its own line rather than being squeezed */
.memes__hint { flex: none; display: inline-flex; align-items: center; gap: .5rem; font-family: var(--mono); font-size: .64rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); }
.memes__hint span { animation: nudge .9s ease-in-out infinite alternate; }
@keyframes nudge { to { transform: translateX(5px); } }

/* ---- a real carousel at every width. Native horizontal scroll with
   snapping, so a swipe or trackpad nudge always lands a card flush against
   the page gutter, the page's own vertical scroll is left alone, and the
   strip physically cannot travel past the last card — a scroll container
   stops at its content. Nothing drives it from fx.js any more. */
.memes__rail {
  /* the gutter moves onto the track: end padding inside a scroll container
     is unreliable, but a padded flex track always counts */
  padding-inline: 0;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--rail-gutter);
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
}
.memes__grid { padding: .4rem var(--rail-gutter) 1.1rem; will-change: auto; }
/* draggable with a mouse (app.js) — say so with the cursor. Touch keeps the
   default, since a swipe needs no affordance. */
@media (hover: hover) and (pointer: fine) {
  .memes__rail { cursor: grab; }
  .memes__rail.is-dragging { cursor: grabbing; }
  /* text selection while dragging looks broken */
  .memes__rail.is-dragging, .memes__rail.is-dragging * { user-select: none; }
}
/* scoped through .memes__grid so these win over the card rules that follow,
   including the reduced-motion block at the end of the file */
.memes__grid .mc { scroll-snap-align: start; scroll-snap-stop: always; }
.memes__foot { display: flex; }

/* ---- phones: the next card peeks, so the strip reads as pullable, and the
   paper tilt comes off — it throws the snap line off by a few pixels per
   card, and :hover sticks after a tap. */
@media (max-width: 899.98px) {
  .memes__grid .mc { flex-basis: min(84vw, 340px); }
  .memes__grid .mc, .memes__grid .mc.in, .memes__grid .mc:hover, .memes__grid .mc.in:hover { transform: none; box-shadow: 7px 7px 0 var(--ink); }
  .memes__grid .mc:hover .mc__img { transform: none; }
}

.mc {
  position: relative;
  border: var(--bw) solid var(--ink); border-radius: var(--r);
  background: var(--white);
  box-shadow: 7px 7px 0 var(--ink);
  overflow: hidden;
  --tilt: -1.1deg;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.mc:nth-child(even) { --tilt: 1.2deg; }
.mc.in { transform: rotate(var(--tilt)); }
.mc.in:hover, .mc:hover { transform: rotate(0deg) translate(-3px, -5px); box-shadow: 12px 14px 0 var(--ink); }

.mc__head {
  display: flex; align-items: center; gap: .6rem;
  padding: .55rem .85rem;
  border-bottom: var(--bw) solid var(--ink);
  background: var(--accent);
  font-family: var(--mono); font-size: .6rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  white-space: nowrap;
}
.mc__claim { color: var(--ink); }
.mc__head .mc__status { margin-left: auto; display: inline-flex; align-items: center; gap: .4rem; color: var(--ink); }
.mc__head .mc__status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--green); border: 1.5px solid var(--ink); }

.mc__portrait { position: relative; aspect-ratio: 4 / 3.3; overflow: hidden; border-bottom: var(--bw) solid var(--ink); background: var(--paper-2); }
.mc__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
/* flat logomark art (Trollface) is a whole drawing, not a photo — `cover`
   would slice its chin off, so `fit: "contain"` in config.js sits it in frame.
   Bottom padding keeps it clear of the name plate. */
.mc__img--contain { object-fit: contain; object-position: center top; padding: 3% 4% 15%; }
.mc:hover .mc__img { transform: scale(1.06) rotate(1.5deg); }
.mc__stamp {
  position: absolute; right: 12px; top: 12px; z-index: 3;
  padding: .3rem .6rem;
  color: var(--green-deep); font-size: .6rem;
  transform: rotate(-8deg);
  transition: transform .35s var(--ease);
}
.mc:hover .mc__stamp { transform: rotate(-3deg) scale(1.08); }
.mc__stamp--review { color: var(--red); }
.mc__plate {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 3;
  display: flex; align-items: flex-end; justify-content: space-between; gap: .7rem;
  padding: .8rem .9rem .7rem;
  background: linear-gradient(transparent, rgba(16, 23, 35, .82) 55%);
  color: var(--white);
}
.mc__name { font-weight: 900; font-size: 1.5rem; letter-spacing: -.03em; text-transform: uppercase; line-height: 1; }
.mc__role { font-family: var(--mono); font-size: .58rem; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); margin-top: .35rem; }
.mc__sym { font-family: var(--mono); font-size: .68rem; font-weight: 600; padding: .2rem .45rem; border: 2px solid var(--ink); border-radius: 3px; background: var(--white); color: var(--ink); flex: none; }
.mc__body { padding: .95rem 1rem 1.1rem; }
.mc__note { font-size: .95rem; font-weight: 500; line-height: 1.5; color: var(--ink-2); }

@keyframes flashUp { 0% { color: var(--green-deep); } 100% { color: inherit; } }
@keyframes flashDown { 0% { color: var(--red); } 100% { color: inherit; } }
.flash-up { animation: flashUp 1.5s ease-out; }
.flash-down { animation: flashDown 1.5s ease-out; }

/* ======================================================== benefits */
.benefits { background: var(--green-soft); border-bottom: var(--bw) solid var(--ink); }
.benefits__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(1rem, 1.6vw, 1.5rem); }
.ben {
  position: relative;
  padding: 1.5rem 1.3rem 1.4rem;
  border: var(--bw) solid var(--ink); border-radius: var(--r);
  background: var(--white);
  box-shadow: 6px 6px 0 var(--ink);
  transition: transform .18s var(--ease), box-shadow .18s var(--ease), background .25s;
}
.ben:hover { transform: translate(-3px, -4px); box-shadow: 10px 11px 0 var(--ink); background: var(--accent-soft); }
.ben__no { position: absolute; right: 1rem; top: .9rem; font-family: var(--mono); font-size: .68rem; font-weight: 700; color: var(--ink-3); }
.ben__ico { width: 40px; height: 40px; color: var(--blue); margin-bottom: 1rem; transition: color .3s, transform .4s var(--ease); }
.ben__ico svg { width: 100%; height: 100%; }
.ben:hover .ben__ico { color: var(--pink); transform: rotate(-8deg) scale(1.08); }
.ben h3 { font-weight: 900; font-size: 1.1rem; letter-spacing: -.01em; text-transform: uppercase; margin-bottom: .55rem; }
.ben p { font-size: .93rem; color: var(--ink-2); line-height: 1.55; }
.ben__meta { margin-top: .95rem !important; padding-top: .75rem; border-top: var(--bw) solid var(--ink); font-family: var(--mono) !important; font-size: .62rem !important; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--blue) !important; }

/* ======================================================== pipeline */
.pipeline { background: var(--pink-soft); border-bottom: var(--bw) solid var(--ink); }
.pipe { display: grid; grid-template-columns: repeat(4, 1fr); border: var(--bw) solid var(--ink); border-radius: var(--r); overflow: hidden; background: var(--white); box-shadow: 8px 8px 0 var(--ink); }
.pipe__step { position: relative; padding: 1.8rem 1.4rem; transition: background .25s; }
.pipe__step + .pipe__step { border-left: var(--bw) solid var(--ink); }
.pipe__step:hover { background: var(--accent-soft); }
.pipe__no { display: inline-grid; place-items: center; width: 38px; height: 38px; margin-bottom: .9rem; border: var(--bw) solid var(--ink); border-radius: 50%; background: var(--green); font-family: var(--mono); font-size: .88rem; font-weight: 700; }
.pipe__step h3 { font-weight: 900; font-size: 1rem; letter-spacing: -.01em; text-transform: uppercase; margin-bottom: .5rem; }
.pipe__step p { font-size: .9rem; color: var(--ink-2); }

/* =========================================================== enroll */
.enroll { background: var(--accent); border-bottom: var(--bw) solid var(--ink); }
.enroll__card {
  position: relative;
  max-width: 880px; margin-inline: auto;
  padding: clamp(2.2rem, 4.5vw, 3.8rem) clamp(1.4rem, 3.5vw, 3.4rem) clamp(1.8rem, 3.5vw, 3rem);
  border: var(--bw) solid var(--ink); border-radius: var(--r);
  background: var(--white);
  box-shadow: 10px 10px 0 var(--ink);
  text-align: center;
  overflow: hidden;
}
.enroll__perf { position: absolute; left: 0; right: 0; top: -2px; height: 8px; background: radial-gradient(circle at 5px 3px, var(--accent) 3.2px, transparent 3.4px) 0 0 / 14px 8px repeat-x; }
.enroll__card h2 { font-size: clamp(2rem, 4.6vw, 3.6rem); margin-bottom: 1.1rem; }
.enroll__card .lede { margin-inline: auto; }
/* the enrolled roster, overlapped like signatures on a shared form */
.facestack { display: flex; align-items: center; justify-content: center; gap: .75rem; flex-wrap: wrap; margin-top: 1.6rem; }
.facestack__imgs { display: inline-flex; }
.facestack__img {
  width: 40px; height: 40px; border-radius: 50%;
  object-fit: cover; background: var(--paper);
  border: 2.5px solid var(--ink);
  margin-left: -12px; transition: transform .3s var(--ease);
}
.facestack__img:first-child { margin-left: 0; }
.facestack__img:hover { transform: translateY(-4px) scale(1.08); z-index: 2; }
.facestack__txt { font-family: var(--mono); font-size: .64rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); }
.enroll__row { display: flex; flex-wrap: wrap; gap: .9rem; justify-content: center; margin: 1.5rem 0 1.7rem; }
.contract {
  display: inline-flex; align-items: center; gap: .75rem; flex-wrap: wrap; justify-content: center;
  padding: .65rem .7rem .65rem .95rem;
  border: var(--bw) dashed var(--ink); border-radius: var(--r);
  background: var(--paper);
}
.contract__l { font-family: var(--mono); font-size: .6rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); }
.contract__addr { font-size: .78rem; font-weight: 600; color: var(--blue); word-break: break-all; }

/* =========================================================== footer */
.footer { background: var(--ink); color: #D8DEE8; padding: clamp(2.8rem, 5vw, 4.2rem) 0 1.8rem; }
.footer__top { display: grid; grid-template-columns: 1.1fr 1fr; gap: 2.4rem; padding-bottom: 2.2rem; border-bottom: 2px solid rgba(255, 255, 255, .14); }
.footer__brand { display: flex; align-items: center; gap: 1.1rem; }
.footer__seal { width: 92px; height: 92px; flex: none; }
.footer__name { color: var(--white); font-weight: 900; font-size: 1.12rem; letter-spacing: -.02em; text-transform: uppercase; }
.footer__tag { color: var(--accent); font-size: .95rem; font-weight: 600; margin-top: .15rem !important; }
.footer__nav { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; }
.footer__nav > div { display: grid; gap: .45rem; align-content: start; }
.footer__h { font-family: var(--mono); font-size: .6rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--pink); margin-bottom: .3rem !important; }
.footer__nav a { color: #A7B2C2; text-decoration: none; font-size: .88rem; font-weight: 500; transition: color .2s, padding-left .2s var(--ease); }
.footer__nav a:hover { color: var(--green); padding-left: 4px; }
/* .footer__top already draws the rule above this, so the bar only needs
   the breathing room, not a second border */
.footer__bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding-top: 1.6rem; font-family: var(--mono); font-size: .66rem; font-weight: 500; color: #8A95A6; }
.footer__ca { display: inline-flex; align-items: center; gap: .5rem; padding: .32rem .6rem; border: 2px solid rgba(255, 255, 255, .2); border-radius: 4px; font-family: var(--mono); font-size: .64rem; color: #A7B2C2; transition: border-color .2s, color .2s; }
.footer__ca:hover { border-color: var(--green); color: var(--white); }
.footer__ca-l { color: var(--accent); letter-spacing: .14em; }
.footer__blink i { display: inline-block; width: 8px; height: 12px; margin-left: .4rem; background: var(--green); vertical-align: -2px; animation: blink 1.1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }

/* ====================================================== responsive */
@media (max-width: 1180px) {
  .benefits__grid, .pipe { grid-template-columns: repeat(2, 1fr); }
  .pipe__step:nth-child(3) { border-left: 0; }
  .pipe__step:nth-child(n+3) { border-top: var(--bw) solid var(--ink); }
}
@media (max-width: 1080px) {
  .dock { display: none; }
  .top__in { justify-content: space-between; }
}
@media (max-width: 900px) {
  :root { --nav-h: 74px; }
  .hero { padding-top: 2rem; }
  .hero__in { grid-template-columns: 1fr; gap: 2.4rem; }
  /* the orbit rides 7% of the stage outside it on each side (app.js places
     the portraits at a 47% radius with a 20% span), so the stage has to stay
     under ~87% of the column or the orbs get sliced by the screen edge */
  .hero__stage { order: -1; max-width: min(330px, 87%); }
  .hero__title { font-size: clamp(1.85rem, 10.2vw, 3.9rem); }
  .idea__grid { grid-template-columns: 1fr; }
  .manifesto__line { max-width: 100%; }
  .brand__sub, .quote { display: none; }
  .govbar__grid { grid-template-columns: 1fr; gap: 1rem; }
  .footer__top { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  /* tighter page margin — the beneficiary rail follows it automatically */
  :root { --gutter: .8rem; }
  .top__in { gap: .8rem; }
  .benefits__grid, .pipe { grid-template-columns: 1fr; }
  .pipe__step + .pipe__step { border-left: 0; border-top: var(--bw) solid var(--ink); }
  .footer__nav { grid-template-columns: 1fr; }
  .footer__brand { flex-direction: column; align-items: flex-start; }
  .ledger__head span, .ledger__row span { padding: .8rem .85rem; font-size: .88rem; }
}
@media (max-width: 560px) {
  /* the wordmark and the CTA can't both fit on a phone, and neither can
     shrink — the seal carries the brand here so "Get $PSA" stays on screen
     instead of being clipped off the right edge */
  .brand__txt { display: none; }
  /* with the wordmark gone the seal carries the brand on its own, so it can
     afford to be bigger — still well inside the 88px bar */
  .brand__seal { width: 60px; height: 60px; }
}
@media (max-width: 420px) {
  .hero__title { font-size: clamp(1.7rem, 10vw, 2.6rem); }
  .btn--lg { width: 100%; }
}

/* ================================================== reduced motion */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .hero__line > span { transform: none; }
  .mc.in { transform: rotate(var(--tilt)); }
}

/* ================================================== theme: yellow
   The original colourway, kept as an opt-in. Green is the default now,
   so this block restores the flat yellow accent and the brighter blue
   hero. Market direction still reads through --green-deep / --red.
   Switch with config.js `theme: "yellow"` or ?theme=yellow            */
html[data-theme="yellow"] {
  --accent: #FFCB2B;
  --accent-hi: #FFD758;
  --accent-soft: #FFF1C2;
}
html[data-theme="yellow"] .hero { background: var(--blue); }
html[data-theme="yellow"] .hero__guil {
  background-image:
    repeating-radial-gradient(circle at 76% 32%, transparent 0 17px, rgba(255, 255, 255, .13) 17px 19px),
    repeating-radial-gradient(circle at 12% 78%, transparent 0 23px, rgba(255, 203, 43, .16) 23px 25px);
}
html[data-theme="yellow"] .hero__glow {
  background: radial-gradient(ellipse at 64% 38%, rgba(255, 203, 43, .3), transparent 52%),
              radial-gradient(ellipse at 18% 88%, rgba(255, 62, 143, .26), transparent 55%);
}