:root {
  --canvas: #000000;
  /* Ember glow, sampled from the reference image: gold corners, orange, deep red, black core */
  /* stored as R G B so each stop can take its own transparency */
  --ember-hi: 237 191 120;   /* #EDBF78 */
  --ember-warm: 219 146 78;  /* #DB924E */
  --ember-mid: 194 88 42;    /* #C2582A */
  --ember-deep: 92 26 13;    /* #5C1A0D */
  --ember-dark: 58 12 4;     /* #3A0C04 */
  --ember-strength: 0.7;     /* 0 = no glow, 1 = full */
  --ember-blur: 28px;        /* softness of the fades */

  /* Silkscreen is drawn on an 8px grid: sizes in multiples of 8 keep its pixels sharp */
  --font-brand: "Silkscreen", ui-monospace, monospace;
  --font-ui: "Instrument Sans", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "Space Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --text: #F8F6F2;
  --text-dim: rgba(248, 246, 242, 0.72);
  --hairline: rgba(255, 255, 255, 0.1);
  --surface: #101216;
  --header-h: 88px;
  --gutter: clamp(16px, 3vw, 48px);
  /* Fire, same family as the eruptions: yellow core, orange, red-orange */
  --fire: linear-gradient(135deg, #FFD36B 0%, #FF9A2A 42%, #FF5A1F 100%);
  --fire-ink: #1A0700;
  --fire-glow: rgba(255, 110, 30, 0.35);
  color-scheme: dark;
}

* { box-sizing: border-box; }

/* Snap stops: the page can't be flung past the logo's story in one go. It stops at the top and
   at each step of How it works (the logo bursts on the way to the first one); everything after
   How it works is one tall snap area, so it scrolls freely. */
html { scroll-snap-type: y mandatory; }
.snap-stop {
  position: absolute;
  left: 0;
  top: var(--at, 0);
  width: 1px;
  height: 1px;
  pointer-events: none;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}
.after-how { scroll-snap-align: start; }

html,
body {
  margin: 0;
  min-height: 100%;
  background: var(--canvas);
}

body {
  min-height: 100vh;
  font-family: var(--font-ui);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
}

:focus-visible { outline: 2px solid var(--text); outline-offset: 3px; border-radius: 6px; }

/* Header: Programmable's sticky bar, dressed like Hedgey's (logo left, links in the middle,
   menu button right). No background and no bottom line: it sits straight on the pixels,
   so the logo and the fire button keep their full colours. */
.site-header {
  position: sticky;
  top: 0;
  z-index: 80;
}
/* it stays transparent while the page scrolls, too (Martin, 1 Nov, again on 4 Nov: "header transparent !!",
   after the black band of 3 Nov): no band behind it */
/* square corners for the phone menu too, like every frame of the site */
.menu-button, .menu-sheet, .sheet-nav a { border-radius: 0; }
/* right of the header on a computer: the way into the app, the same button as the app's "Launch a token"
   (Martin, 2 Nov): flashy orange, square corners, the pixel font in capitals, a pixel arrow on the right;
   the menu button only shows on a phone, where the links leave the header */
.header-cta {
  grid-area: 1 / 3;
  justify-self: end;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 0 18px;
  background: #FF6B1F;
  color: #0B0B0C;
  font: 400 13px/1 var(--font-brand);
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.2s ease, box-shadow 0.2s ease;
}
.header-cta .cta-px { width: 12px; height: 12px; fill: currentColor; transition: translate 0.2s ease; }
.header-cta:hover { background: #FF8436; box-shadow: 0 0 22px rgba(255, 107, 31, 0.45); }
.header-cta:hover .cta-px { translate: 2px 0; }
.header-cta:focus-visible { outline: 2px solid #F8DB51; outline-offset: 2px; border-radius: 0; }

.header-inner {
  height: var(--header-h);
  /* a little wider than the 1120px content column: the logo and Launch App sit
     off the screen edges (about 100px on a 1440px screen) */
  width: min(1240px, 100% - 2 * var(--gutter));
  margin-inline: auto;
  /* logo left, navigation in the middle, menu button right */
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 36px;
}

.brand {
  grid-area: 1 / 1;
  justify-self: start;
  display: inline-flex;
  align-items: center;
}
.brand-logo { display: block; width: 40px; height: 40px; }

.header-nav { grid-area: 1 / 2; display: flex; align-items: center; gap: 36px; }

.header-nav a {
  font-size: 16px;
  font-weight: 400;
  letter-spacing: -0.006em;
  color: var(--text);
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.22s ease, text-shadow 0.24s ease;
}
.header-nav a:hover {
  color: var(--text);
  text-shadow: 0 0 12px rgba(255, 255, 255, 0.35);
}

.menu-button {
  grid-area: 1 / 3;
  justify-self: end;
  display: flex;
  width: 48px;
  height: 48px;
  margin-right: -12px;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
  background: transparent;
  color: var(--text);
  cursor: pointer;
  transition: background-color 0.18s ease;
}
.menu-button:hover { background: rgba(255, 255, 255, 0.06); }

/* Three white bars that turn into a cross */
.menu-icon,
.menu-icon::before,
.menu-icon::after {
  display: block;
  width: 24px;
  height: 2.5px;
  border-radius: 2px;
  background: var(--text);
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.menu-icon { position: relative; }
.menu-icon::before,
.menu-icon::after { content: ""; position: absolute; left: 0; }
.menu-icon::before { top: -7.5px; }
.menu-icon::after { top: 7.5px; }
.menu-button[aria-expanded="true"] .menu-icon { background: transparent; }
.menu-button[aria-expanded="true"] .menu-icon::before { transform: translateY(7.5px) rotate(45deg); }
.menu-button[aria-expanded="true"] .menu-icon::after { transform: translateY(-7.5px) rotate(-45deg); }

/* Menu sheet: drops down under the menu button, right edge lined up with the header */
.menu-sheet {
  position: absolute;
  top: calc(var(--header-h) + 8px);
  right: max(var(--gutter), (100% - 1240px) / 2);
  width: min(320px, calc(100vw - 2 * var(--gutter)));
  padding: 8px;
  display: grid;
  gap: 4px;
  border-radius: 0;
  background: #101216;
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.32);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px) scale(0.98);
  transform-origin: top right;
  transition: opacity 0.16s ease, transform 0.18s ease, visibility 0s linear 0.18s;
}
.menu-sheet.is-open {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity 0.16s ease, transform 0.18s ease;
}
.sheet-nav { display: grid; gap: 2px; }
.sheet-nav a {
  padding: 14px;
  border-radius: 0;
  font-size: 17px;
  font-weight: 500;
  color: var(--text);
  text-decoration: none;
}
.sheet-nav a:hover { background: rgba(255, 255, 255, 0.06); }

/* Hero: one headline in the middle: the SUNFIRE lockup, then the promise in the site's normal font */
/* Hero, after Programmable's banner: the logo large, the promise under it, on the sky */
.hero {
  position: relative;
  z-index: 1;
  min-height: calc(100vh - var(--header-h));
  min-height: calc(100svh - var(--header-h));
  /* the screen actually visible at load (hero.js): on an iPhone, Safari 26 counts 100svh down behind its floating
     bar, so the hero ended under it and Launch App fell past the first screen, where the snap would not stop (6 Nov) */
  min-height: calc(var(--ecran, 100svh) - var(--header-h));
  display: grid;
  place-items: center;
  padding-inline: var(--gutter);
  padding-block: 40px calc(var(--header-h) * 0.7); /* sits a bit above the middle of the whole screen */
  overflow-x: clip; /* the letters fly in from beyond the edges */
}
.hero-inner {
  position: relative;
  max-width: 980px;
  display: grid;
  justify-items: center;
  gap: clamp(18px, 3vh, 30px);
  text-align: center;
}
.hero-title { margin: 0; line-height: 0; }
.hero-logo { display: block; width: auto; height: clamp(44px, 8.4vw, 116px); max-width: 100%; aspect-ratio: 6210 / 948; overflow: visible; }
/* the copyable word over the logo: invisible, a light orange wash when selected so the pixels stay visible */
.hero-copy { fill: transparent; font-family: var(--font-brand); user-select: text; -webkit-user-select: text; }
.hero-copy::selection { fill: transparent; color: transparent; background: rgba(236, 112, 56, 0.4); }
.hero-glyph { fill: var(--text); transform-box: fill-box; transform-origin: center; }
.hero-tagline {
  margin: 0;
  font-family: var(--font-ui);
  font-weight: 400;
  font-size: clamp(20px, 2.4vw, 32px);
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--text);
  text-wrap: balance;
}
/* the one fire touch of the text, same gradient as the logo */
.hero-fire {
  background: var(--fire);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
@media (prefers-reduced-motion: no-preference) {
  /* the hero comes in line by line, from a light blur */
  .hero-line,
  .sun-flight svg { animation: hero-in 1.1s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
  /* on load, each letter flies in from a far star, from its own direction (hero.js sets --x, --y, --d) */
  .hero-glyph { animation: glyph-in 1.2s cubic-bezier(0.16, 0.84, 0.24, 1) var(--d, 0s) both; }
  /* the sun shows up once the letters have landed, then the promise (shortened on 2 Nov: the screen
     stayed black for a second or two) */
  .sun-flight svg { animation-delay: 0.95s; }
  .hero-tagline { animation-delay: 1.05s; }
}
@keyframes glyph-in {
  0% { opacity: 0; translate: var(--x, 0) var(--y, 0); scale: 0.02; filter: blur(2px); }
  12% { opacity: 1; }
  100% { opacity: 1; translate: 0 0; scale: 1; filter: blur(0); }
}
@keyframes hero-in {
  from { opacity: 0; translate: 0 24px; filter: blur(8px); }
  to { opacity: 1; translate: 0 0; filter: blur(0); }
}

/* Sections below the hero */
.section {
  position: relative;
  z-index: 1;
  padding-block: clamp(80px, 12vw, 140px);
  padding-inline: var(--gutter);
}
.section-inner {
  max-width: 1120px;
  margin: 0 auto;
  display: grid;
  gap: 20px;
}
.eyebrow {
  margin: 0;
  font-family: var(--font-brand);   /* Silkscreen, at 16px so its pixels stay sharp */
  font-size: 16px;
  text-transform: uppercase;
  color: #EF9B41;
}
.section-title {
  margin: 0 0 28px;
  max-width: 26ch;                  /* Silkscreen is wide: two lines rather than three */
  font-family: var(--font-brand);
  font-weight: 400;
  font-size: 40px;
  line-height: 1.2;
  text-wrap: balance;
}

/* 2. How it works: the section pins to the screen and the steps slide to the left.
   Each step plays its own animation; how.js adds the stage classes (s-...) one after another. */
.how {
  position: relative;
  z-index: 1;
  /* the screen it is pinned for, then 80 screen heights per step */
  height: calc(100vh + var(--steps, 4) * 80vh);
  height: calc(100svh + var(--steps, 4) * 80svh);
}
.how-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  height: var(--ecran, 100svh); /* the same visible screen as the hero, the one how.js measures (innerHeight) */
  display: flex;
  flex-direction: column;
  padding-top: var(--header-h);
  overflow: hidden;
}
.how-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

/* The stage: the sun and the step's text on the left, the step's drawing on the right.
   The panels are see-through wrappers, so every step's text and drawing share the same cells. */
.how-viewport {
  flex: 1;
  min-height: 0;
  width: min(1120px, 100% - 2 * var(--gutter));
  margin-inline: auto;
  padding-block: clamp(12px, 3vh, 32px);
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  /* the sun and the step's text sit together, centred on the left; the drawing spans the height */
  grid-template-rows: minmax(0, 1fr) auto auto minmax(0, 1fr);
  grid-template-areas: ". visual" "sun visual" "text visual" ". visual";
  column-gap: clamp(24px, 5vw, 80px);
  row-gap: clamp(12px, 3vh, 28px);
}
/* where the sun rebuilds itself, one quarter per step (the sun itself is .sun-flight);
   as tall as the sun there, which how.js sizes the same way */
.how-sun { grid-area: sun; height: min(36vh, 340px); }
.how-track,
.how-panel,
.how-panel-inner { display: contents; }
.how-text { grid-area: text; align-self: start; }
.how-visual { grid-area: visual; }
.how-panel .how-text,
.how-panel .how-visual {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s ease, visibility 0s linear 0.4s;
}
.how-panel.is-current .how-text,
.how-panel.is-current .how-visual {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.6s ease 0.15s;
}

/* The logo's sun, laid over the gap in the hero's lockup. how.js flies it down into the
   stage, bursts it, scatters the quarters off to the right and brings one back per step. */
.sun-flight {
  --burst: 0;
  --flash: 0;
  --spread: 0;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 50;
  width: 400px;
  height: 400px;
  pointer-events: none;
  transform-origin: center;
  visibility: hidden;
}
.sun-flight.is-ready { visibility: visible; }
/* at rest in the hero's logo it rides with the page, so a bounce at the top moves it with the letters */
.sun-flight.is-docked { position: absolute; }
.sun-flight svg { display: block; width: 100%; height: 100%; overflow: visible; }
/* the burst's light sits over the quarters and lights them up (screen) rather than muddying them */
.sun-flash { opacity: var(--flash); mix-blend-mode: screen; filter: url(#how-sun-soft); }
/* the quarters' moves (burst, scatter to the right, return) are set by how.js */
/* the lit piece glows; it keeps its size so its squares stay on the logo's grid */
.sun-body,
.sun-halo { transition: opacity 0.5s ease; }
/* quarters already caught back stay in the sun, quieter than the current step's */
.sun-flight.has-step .sun-piece:not(.is-on) .sun-body { opacity: 0.6; }
.sun-halo { fill: #FF7A2A; filter: url(#how-sun-blur); opacity: 0; }
.sun-piece.is-on .sun-halo { opacity: 0.6; }
.how-text { display: grid; justify-items: start; gap: 18px; }
/* where you are in the story: How it works, step N of 4 */
.how-text .how-kicker {
  margin: 0;
  max-width: none;
  line-height: 1;
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #EF9B41;
}
/* the drawing's note as wrapping text: only on a phone (below), where the drawing is too small for it */
.how-cap { display: none; margin: 0; font-size: 13px; line-height: 1.45; color: rgba(248, 246, 242, 0.6); }
.how-text h3 {
  margin: 0;
  font-family: var(--font-brand);
  font-weight: 400;
  font-size: 40px;
  line-height: 1;
  white-space: nowrap;           /* "Claim = burn" stays on one line: the sizes below make it fit */
}
.how-text p {
  margin: 0;
  max-width: 34ch;
  font-size: clamp(15px, 1.25vw, 18px);
  line-height: 1.55;
  color: var(--text-dim);
}
.how-tag {
  padding: 7px 12px;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: #FFD9A8;
}
/* the text of a step comes in after the slide, line by line */
.how.is-ready .how-text > * { opacity: 0; translate: 48px 0; }
.how.is-ready .is-live .how-text > * {
  opacity: 1;
  translate: 0 0;
  transition: opacity 0.7s ease, translate 0.9s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.how.is-ready .is-live .how-text > :nth-child(1) { transition-delay: 0.2s; }
.how.is-ready .is-live .how-text > :nth-child(2) { transition-delay: 0.28s; }
.how.is-ready .is-live .how-text > :nth-child(3) { transition-delay: 0.36s; }
.how.is-ready .is-live .how-text > :nth-child(4) { transition-delay: 0.44s; }

.how-visual { height: 100%; min-height: 0; display: grid; place-items: center; }
.how-visual svg { display: block; width: 100%; height: 100%; max-height: 520px; overflow: visible; }
/* the drawings speak in the site's normal font, not the titles' */
.how-visual text {
  font-family: var(--font-ui);
  font-size: 14px;
  font-variant-numeric: tabular-nums;
  fill: rgba(248, 246, 242, 0.55);
}

/* Step 1: an exact Pons launch on its bonding curve. Your first buy lifts the market cap from
   1.68 to 7.89 ETH; other buyers fill the rest of the curve; at 4.29 ETH paid in it bonds and
   trading moves to the pool */
.v-axes line { stroke: rgba(255, 255, 255, 0.16); }
.v-axes .v-grid { stroke: rgba(255, 255, 255, 0.06); }
.how-visual .v-tick { font-size: 12px; fill: rgba(248, 246, 242, 0.4); }
/* your buy, along the curve: the band, the climb and its glow in the logo's yellow */
.buy-band { fill: rgba(255, 255, 255, 0.04); }
.buy-area { fill: url(#buy-glow); }
/* same weight as the trades' line, so the two read as one chart */
.buy-line { fill: none; stroke: #FFFFFF; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.how-visual .buy-label { fill: var(--text); font-weight: 600; opacity: 0; }
.s-draw .buy-label { opacity: 1; transition: opacity 0.4s ease 0.3s; }
/* the rest of the curve, bought by everyone else: dashed, in grey */
.bc-rest { fill: none; stroke: #AEADAA; stroke-width: 2; stroke-dasharray: 5 6; stroke-linecap: round; }
.how-visual .bc-rest-label { font-size: 12px; fill: rgba(248, 246, 242, 0.45); opacity: 0; }
.s-rest .bc-rest-label { opacity: 1; transition: opacity 0.5s ease; }
/* the bond: where the curve is full and the pool takes over, in the logo's yellow */
.bc-pool rect { fill: rgba(248, 219, 81, 0.05); }
.how-visual .bc-pool text { font-size: 12px; fill: rgba(248, 219, 81, 0.7); }
.bc-pool, .bc-bond { opacity: 0; }
.s-bond .bc-pool, .s-bond .bc-bond { opacity: 1; transition: opacity 0.6s ease; }
.bc-bond line { stroke: rgba(248, 219, 81, 0.45); stroke-dasharray: 3 4; }
.bc-bond circle { fill: #F8DB51; filter: drop-shadow(0 0 6px rgba(248, 219, 81, 0.7)); }
.how-visual .bc-bond text { font-family: var(--font-brand); font-size: 10px; fill: #F8DB51; }
.curve-label { opacity: 0; translate: 0 10px; }
.s-land .curve-label {
  opacity: 1;
  translate: 0 0;
  transition: opacity 0.5s ease, translate 0.7s cubic-bezier(0.2, 0.8, 0.2, 1);
}
/* the orange label speaks in the titles' pixel font, on its own dark tag (sized by how.js)
   so the background's pixels never show through it; square corners, like a pixel */
.tag-card { fill: #0B0B0C; stroke: rgba(236, 112, 56, 0.55); stroke-width: 1; }
.how-visual .curve-label text { font-family: var(--font-brand); font-weight: 400; letter-spacing: 0; }
.how-visual .curve-label .small { font-size: 10px; fill: rgba(255, 154, 42, 0.75); }
.how-visual .curve-label .big { font-size: 16px; fill: #FF9A2A; }

/* Step 2, first: the duration, a slider dragged by hand from 24 hours to 10 years (lock-duration.js):
   a row of pixel cells lit up to the thumb in the logo's tones, round durations marked under it, the
   duration in words on the right. how.js slides it up to 1 year until the visitor drags it */
.lk-sel { opacity: 0; }
.s-in .lk-sel { opacity: 1; transition: opacity 0.5s ease; }
.lk-sel-frame { fill: #0B0B0C; stroke: rgba(255, 255, 255, 0.16); }
.lk-dur { cursor: pointer; outline: none; touch-action: pan-y; }
.lk-dur.is-drag { cursor: grabbing; }
.lk-hit { fill: transparent; }
.lk-cell { fill: rgba(255, 255, 255, 0.08); }
.lk-cell.is-on { fill: var(--tone); }
.lk-thumb { fill: #0B0B0C; stroke: #F8F6F2; stroke-width: 1.5; }
.lk-dur:hover .lk-sel-frame,
.lk-dur:focus-visible .lk-sel-frame { stroke: #EC7038; }
.lk-dur:focus-visible .lk-thumb { stroke: #F8DB51; }
.how-visual .lk-mark { font-family: var(--font-brand); font-size: 11px; fill: rgba(248, 246, 242, 0.62); }
.how-visual .lk-dur-val { font-family: var(--font-brand); font-size: 12px; fill: #EF9B41; }

/* Step 2: the supply as 100 pixels, one per percent. Yours light up in the logo's tones, move
   into the lock contract and it closes on them; the others keep trading (how.js flickers them) */
.lk-labels,
.lk-grid,
.lk-vault-ghost { opacity: 0; }
.s-in .lk-labels,
.s-in .lk-grid,
.s-in .lk-vault-ghost { opacity: 1; transition: opacity 0.5s ease; }
.lk-slot { fill: rgba(255, 255, 255, 0.05); }
.lk-px { fill: rgba(255, 255, 255, 0.28); transition: opacity 0.3s ease; }
/* yours: they light up one after another, then fly into the contract one after another */
.lk-mine { translate: 0 0; transition: fill 0.3s ease calc(var(--i) * 10ms); }
.s-mine .lk-mine { fill: var(--tone); }
.s-move .lk-mine {
  translate: var(--dx) var(--dy);
  transition: fill 0.3s ease, translate 0.9s cubic-bezier(0.65, 0, 0.35, 1) calc(var(--i) * 12ms);
}
.lk-arrow { opacity: 0; }
.lk-arrow line,
.lk-arrow path { fill: none; stroke: rgba(255, 255, 255, 0.45); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.s-move .lk-arrow { opacity: 1; transition: opacity 0.3s ease; }
.how-visual .lk-you { fill: var(--text); font-weight: 600; opacity: 0; }
.how-visual .lk-you-n,
.how-visual .lk-others { opacity: 0; }
.s-move .lk-you,
.s-move .lk-you-n { opacity: 1; transition: opacity 0.4s ease 1.2s; }
.s-move .lk-others { opacity: 1; transition: opacity 0.4s ease 0.8s; }
/* the contract: dashed while it waits, then it closes in solid orange */
.lk-vault-ghost { fill: none; stroke: rgba(255, 255, 255, 0.22); stroke-dasharray: 4 4; }
.lk-vault { fill: none; stroke: #EC7038; stroke-width: 1.5; stroke-dasharray: 1 1; stroke-dashoffset: 1; }
.s-lock .lk-vault { stroke-dashoffset: 0; transition: stroke-dashoffset 0.7s cubic-bezier(0.65, 0, 0.35, 1); }
.how-visual .lk-locked { font-family: var(--font-brand); font-size: 10px; fill: #EC7038; opacity: 0; }
.s-lock .lk-locked { opacity: 1; transition: opacity 0.4s ease 0.5s; }
/* the date it unlocks, on the orange tag */
.lock-head { opacity: 0; translate: 0 10px; }
.s-date .lock-head {
  opacity: 1;
  translate: 0 0;
  transition: opacity 0.5s ease, translate 0.7s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.how-visual .lock-head text { font-family: var(--font-brand); font-weight: 400; letter-spacing: 0; }
.how-visual .lock-head .small { font-size: 10px; fill: rgba(255, 154, 42, 0.75); }
.how-visual .lock-head .big { font-size: 16px; fill: #FF9A2A; }
/* Step 3: the whole supply again, so its three parts always add up to 100 %: everyone else's pixels
   (grey, trading, no claim touches them) and your bag in the contract. Each claim burns the tokens its
   amount bought at launch, cheapest first: the pixels burn out from the left, flaring yellow and cooling
   down the logo's tones to char. The figures are in % of the supply */
.v-burn { opacity: 0; }
.s-in .v-burn { opacity: 1; transition: opacity 0.5s ease; }
.how-visual .bn-claim text { font-family: var(--font-brand); font-size: 14px; fill: #EF9B41; transition: fill 0.3s ease; }
/* the claim tag is a button: the visitor claims by hand; it breathes until the first press */
.bn-claim { cursor: pointer; outline: none; }
.bn-claim .tag-card { transition: fill 0.3s ease, stroke 0.3s ease; }
.bn-claim:hover .tag-card,
.bn-claim:focus-visible .tag-card { stroke: #F8DB51; stroke-width: 1.5; }
.bn-claim.is-hit .tag-card { fill: #EC7038; }
.how-visual .bn-claim.is-hit text { fill: #0B0B0C; }
@media (prefers-reduced-motion: no-preference) {
  .bn-claim.is-idle .tag-card { animation: bn-call 1.6s ease-in-out infinite; }
}
@keyframes bn-call {
  0%, 100% { fill: #0B0B0C; }
  50% { fill: rgba(236, 112, 56, 0.28); }
}
.how-visual .bn-k { fill: rgba(248, 246, 242, 0.55); }
.how-visual .bn-you { fill: var(--text); font-weight: 600; font-size: 16px; }
.bn-frame { fill: none; stroke: #EC7038; stroke-width: 1.5; }
.bn-other { fill: rgba(255, 255, 255, 0.28); transition: opacity 0.3s ease; }
/* the burn curve: the whole curve dashed and faint, the part claimed so far in orange, a mark per claim,
   and the last claim's step (across what it claimed, up what it burned) */
.bn-axes line { stroke: rgba(255, 255, 255, 0.16); }
.bn-axes .bn-gridline { stroke: rgba(255, 255, 255, 0.06); }
.how-visual .bn-tick { font-size: 12px; fill: rgba(248, 246, 242, 0.45); }
.bn-curve { fill: none; stroke: rgba(255, 255, 255, 0.25); stroke-width: 1.5; stroke-dasharray: 3 4; }
.bn-trail { fill: none; stroke: #EC7038; stroke-width: 2.5; stroke-linejoin: round; }
.bn-step { stroke: rgba(248, 246, 242, 0.7); stroke-width: 1; stroke-dasharray: 2 3; opacity: 0; }
.bn-step.is-on { opacity: 1; transition: opacity 0.3s ease; }
.bn-mark { fill: #F8DB51; }
/* once everything has burned: a link to start the example again */
.bn-again { cursor: pointer; outline: none; opacity: 0; pointer-events: none; }
.bn-again.is-on { opacity: 1; pointer-events: auto; transition: opacity 0.3s ease; }
.how-visual .bn-again text { font-size: 12px; fill: #EF9B41; text-decoration: underline; }
.how-visual .bn-again:hover text,
.how-visual .bn-again:focus-visible text { fill: #F8DB51; }
.bn-px { fill: var(--tone); }
.bn-px.is-burnt { fill: #3A1A10; }
.bn-sw-others { fill: rgba(255, 255, 255, 0.28); }
.bn-sw-locked { fill: #EF9B41; }
.bn-sw-burned { fill: #3A1A10; stroke: #EC7038; stroke-width: 1; }
.how-visual .bn-v { font-family: var(--font-brand); font-size: 22px; fill: var(--text); }
.how-visual .bn-v-locked { fill: #EF9B41; }
.how-visual .bn-v-burned { fill: #EC7038; }
.how-visual .bn-note { font-size: 12px; fill: rgba(248, 246, 242, 0.45); }
@media (prefers-reduced-motion: no-preference) {
  .bn-px.is-burnt, .ul-px.is-burnt { animation: bn-burn 1s ease-out var(--d, 0s) backwards; }
}
@keyframes bn-burn {
  0% { fill: var(--tone); }
  15% { fill: #F8DB51; }
  40% { fill: #EC7038; }
  70% { fill: #CC3628; }
  100% { fill: #3A1A10; }
}

/* Step 4: the same example over the whole lock, a line in time from the launch to the end picked at step 2.
   The claims come one after another (the last one at the unlock) and burn the bag in the contract; then the
   contract opens and what did not burn moves to your wallet, the tag says how much */
.v-unlock { opacity: 0; }
.s-in .v-unlock { opacity: 1; transition: opacity 0.5s ease; }
.ul-track { stroke: rgba(255, 255, 255, 0.16); stroke-width: 2; }
.ul-prog { stroke: #EC7038; stroke-width: 2; }
.ul-tick { fill: rgba(255, 255, 255, 0.18); transition: fill 0.3s ease; }
.ul-tick.is-on { fill: #EF9B41; }
.ul-head { fill: #0B0B0C; stroke: #F8F6F2; stroke-width: 1.5; }
.how-visual .ul-status { fill: var(--text); font-weight: 600; }
.ul-vault { fill: none; stroke: #EC7038; stroke-width: 1.5; transition: stroke 0.4s ease; }
.s-out .ul-vault { stroke: rgba(255, 255, 255, 0.22); stroke-dasharray: 4 4; }
.ul-wallet { fill: none; stroke: rgba(255, 255, 255, 0.22); stroke-dasharray: 4 4; transition: stroke 0.4s ease; }
.s-out .ul-wallet { stroke: #F8F6F2; stroke-dasharray: none; }
.ul-arrow { opacity: 0; }
.s-out .ul-arrow { opacity: 1; transition: opacity 0.3s ease; }
.ul-px { fill: var(--tone); translate: 0 0; }
.ul-px.is-burnt { fill: #3A1A10; }
.s-out .ul-px:not(.is-burnt) { translate: var(--dx) var(--dy); transition: translate 0.9s cubic-bezier(0.65, 0, 0.35, 1) calc(var(--i, 0) * 40ms); }
.how-visual .ul-cap { fill: rgba(248, 246, 242, 0.75); }
.ul-tag { opacity: 0; translate: 0 10px; }
.s-tag .ul-tag { opacity: 1; translate: 0 0; transition: opacity 0.5s ease, translate 0.7s cubic-bezier(0.2, 0.8, 0.2, 1); }
.how-visual .ul-tag text { font-family: var(--font-brand); font-weight: 400; letter-spacing: 0; }
.how-visual .ul-tag .small { font-size: 10px; fill: rgba(255, 154, 42, 0.75); }
.how-visual .ul-tag .big { font-size: 16px; fill: #FF9A2A; }
.how-visual .ul-note { font-size: 12px; fill: rgba(248, 246, 242, 0.45); }

@media (max-width: 760px) {
  .how-viewport {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto minmax(0, 1fr);
    grid-template-areas: "sun" "text" "visual";
    row-gap: 12px;
  }
  /* the spot is empty: give it the sun's height there (how.js uses the same size) */
  .how-sun { height: min(34vw, 132px); }
  .how-text { gap: 10px; }
  .how-text p { font-size: 15px; }
  /* the drawings shrink to the phone width, so their labels grow to stay readable */
  .how-visual text { font-size: 17px; }
  /* the drawings show at about two thirds of their size here: every label at 16 units or more, so none
     falls under 11 pixels (the visit of 2 Nov measured 6.6 to 7.9 px) */
  .how-visual .v-tick, .how-visual .bc-rest-label, .how-visual .bn-tick, .how-visual .bn-again text { font-size: 17px; }
  .how-visual .bc-pool text, .how-visual .lk-mark { font-size: 17px; }
  .how-visual .bc-bond text, .how-visual .lk-locked,
  .how-visual .curve-label .small, .how-visual .lock-head .small, .how-visual .ul-tag .small { font-size: 17px; }
  .how-visual .curve-label .big, .how-visual .lock-head .big, .how-visual .ul-tag .big { font-size: 21px; }
  .how-visual .bn-claim text, .how-visual .lk-dur-val { font-size: 17px; }
  /* the Lock drawing is taller, so it shows smaller: its labels one step up again */
  .how-visual .v-lock text { font-size: 18px; }
  .how-visual .v-lock .lk-mark, .how-visual .v-lock .lk-locked, .how-visual .v-lock .lock-head .small { font-size: 18px; }
  .how-visual .v-lock .lock-head .big { font-size: 22px; }
  .how-visual .bn-you { font-size: 18px; }
  .how-visual .lk-mark.is-minor, .how-visual .bn-tick-mid { display: none; }
  /* the notes leave the drawing and come back under it as text that wraps */
  .how-visual .bn-note, .how-visual .ul-note { display: none; }
  .how-visual { grid-template-rows: minmax(0, 1fr) auto; gap: 8px; }
  .how-cap { display: block; }
  /* the tag under each step's text gives its room to the drawing */
  .how-tag { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .how *,
  .how *::before,
  .how *::after { transition: none !important; animation: none !important; }
}

/* Where it runs: one sentence in the middle, two rings of pixel icons turning at the screen's
   edges. networks.js lights the words up as the section scrolls in, and turns the rings */
.networks {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: 80px var(--gutter);
  overflow: hidden;
}
.net-statement {
  position: relative;
  z-index: 1;
  max-width: 21ch;
  margin: 0;
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: clamp(28px, 3.6vw, 48px);
  line-height: 1.2;
  letter-spacing: -0.01em;
  text-align: center;
  text-wrap: balance;
  color: var(--text);
}
.net-statement em { font-style: normal; }
/* each word waits dim, then lights up: white, or its tone for the key words */
.net-word { color: rgba(248, 246, 242, 0.18); transition: color 0.35s ease; }
.net-word.is-lit { color: var(--text); }
.net-statement em .net-word.is-lit { color: var(--tone); }
/* the networks in their own colours: Robinhood's neon, Pons' green, Solana's gradient, Pump.fun's green
   (#5FCB88, from its logomark) */
.net-statement em.tone-solana .net-word.is-lit { color: transparent; background: linear-gradient(90deg, #9945FF, #14F195); -webkit-background-clip: text; background-clip: text; }
/* a ring: a circle of icons whose centre sits off the screen's edge, so only an arc shows */
.net-ring {
  --r: clamp(200px, 30vw, 400px);
  --spin: 0deg;
  position: absolute;
  top: 50%;
  width: calc(var(--r) * 2);
  height: calc(var(--r) * 2);
  margin-top: calc(var(--r) * -1);
  rotate: var(--spin);
}
.net-ring-left { left: calc(var(--r) * -1.4); }
.net-ring-right { right: calc(var(--r) * -1.4); }
/* each icon stands on the circle and stays upright while the ring turns */
.net-item {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 48px;
  height: 48px;
  margin: -24px 0 0 -24px;
  translate: calc(cos(var(--a)) * var(--r)) calc(sin(var(--a)) * var(--r));
  rotate: calc(var(--spin) * -1);
}
.net-item svg,
.net-item img { display: block; width: 100%; height: 100%; }
@media (max-width: 760px) {
  /* on a phone the rings sit behind the sentence, dimmed */
  .net-ring { --r: 190px; opacity: 0.3; }
  .net-ring-left { left: calc(var(--r) * -1.25); }
  .net-ring-right { right: calc(var(--r) * -1.25); }
  .net-item { width: 36px; height: 36px; margin: -18px 0 0 -18px; }
}

/* 3. What it is for (Martin, 2 Nov, after Phantom's cards): three tall square cards, one point each, dealt
   as a pile that spreads into a row on scroll (why.js). The same blurred black as the FAQ, no colour
   (Martin, 2 Nov); darker while they are piled, so the cards under the first one don't show through it.
   Each card's label and key number keep their own tone of the logo, yellow, light orange, orange */
.why-inner { justify-items: center; text-align: center; }
.why-inner .section-title { margin-bottom: 20px; }
.deal {
  justify-self: stretch;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  text-align: left;
}
/* the whole section fits on one screen (Martin, 4 Nov: "rentre pas sur une page"): the cards as tall as their
   words and drawings, no more */
.deal-card {
  position: relative;
  min-height: 0;
  padding: 22px 24px 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: rgba(0, 0, 0, calc(0.28 + var(--k, 0) * 0.64));
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  transform-origin: 50% 100%;
  will-change: transform;
}
/* the pile: the first card on top, the others under it, blank while they are (their words come in as they
   spread, so the pile shows only their edges) */
.deal-card:not(:first-child) > * { opacity: calc(1 - var(--k, 0) * 1.6); }
.deal-card:nth-child(1) { z-index: 3; }
.deal-card:nth-child(2) { z-index: 2; }
.deal-card:nth-child(3) { z-index: 1; }
.deal-for {
  margin: 0;
  font-family: var(--font-brand);
  font-size: 16px;
  text-transform: uppercase;
  color: rgb(var(--tone));
}
.deal-h {
  margin: 0;
  font-size: 24px;
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--text);
  text-wrap: balance;
}
.deal-sub { margin: 0; font-size: 14px; line-height: 1.5; color: var(--text-dim); }
.deal-card .n { font-family: var(--font-mono); font-size: 0.92em; }
.deal-h .n { color: rgb(var(--tone)); }
.deal-art {
  margin-top: auto;
  padding-top: 12px;
  display: grid;
  justify-items: center;
  gap: 12px;
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--text-dim);
}
.deal-art b { font-weight: 400; color: var(--text); }

/* card 1: twenty pixels, nineteen yours, the last one the platform's (an empty frame) */
.split-px { display: grid; grid-template-columns: repeat(10, 22px); gap: 5px; }
.split-px i { width: 22px; height: 22px; }
.split-legend { width: 100%; max-width: 265px; display: flex; justify-content: space-between; }
@media (prefers-reduced-motion: no-preference) {
  .split-px i { opacity: 0; scale: 0.4; transition: opacity 0.3s ease var(--d, 0s), scale 0.3s ease var(--d, 0s); }
  .deal.is-in .split-px i { opacity: 1; scale: 1; }
}

/* card 2: the fees claimed fill a row up to the stake; the bag, a block of yellow pixels, burns as they do */
.art-burn { justify-items: stretch; max-width: 230px; width: 100%; justify-self: center; gap: 8px; }
.burn-row { display: flex; justify-content: space-between; }
.burn-fees, .burn-bag { display: grid; gap: 4px; }
.burn-fees { grid-template-columns: repeat(10, 1fr); margin-bottom: 10px; }
.burn-bag { grid-template-columns: repeat(12, 1fr); }
.burn-fees i, .burn-bag i { aspect-ratio: 1; }
.burn-fees i { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18); transition: background-color 0.25s ease; }
.burn-fees i.on { background: #EF9B41; box-shadow: none; }
.burn-bag i { background: #F8DB51; transition: background-color 0.4s ease, opacity 0.6s ease; }
.burn-bag i.hot { background: #FF5A1F; }
.burn-bag i.gone:not(.hot) { background: transparent; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1); }
.burn-tag {
  justify-self: center;
  margin: 10px 0 0;
  padding: 7px 10px 6px;
  font-family: var(--font-brand);
  font-size: 13px;
  text-transform: uppercase;
  color: #EC7038;
  border: 1px solid #EC7038;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.art-burn.is-done .burn-tag { opacity: 1; }

/* card 3: the padlock in pixels, its date under it in a frame like the tags of How it works */
.lock-px { width: 84px; height: auto; }
.lock-tag {
  margin: 6px 0 0;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 10px 6px;
  border: 1px solid #EC7038;
}
.lock-tag b { font-family: var(--font-brand); font-size: 13px; text-transform: uppercase; color: #EC7038; }

@media (max-width: 899px) {
  .deal { grid-template-columns: minmax(0, 1fr); max-width: 480px; justify-self: center; width: 100%; }
  .deal-card { min-height: 0; }
}
@media (max-width: 640px) {
  .why-inner { justify-items: start; text-align: left; }
  .deal-card { padding: 26px 20px 24px; }
  .deal-h { font-size: 22px; }
}

/* 4. Simulator (tidied, Martin, 3 Nov: "c trop le bordel"): two square boxes of the same height, the app's
   look. Labels in Silkscreen, orange; values in Space Mono; one short hint at most under a slider */
.sim {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 16px;
  align-items: stretch;
}
.sim-controls,
.sim-result {
  padding: 28px;
  background: #0B0B0C;
  border: 1px solid rgba(255, 255, 255, 0.12);
  display: flex;
  flex-direction: column;
  gap: 26px;
}
.sim-field { display: grid; gap: 12px; }
/* fields the network does not use (the pairing on Pons, the fee slider when Pump.fun sets it) */
#simulator [hidden] { display: none !important; }
.sim-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.sim-label {
  font: 400 12px/1.3 var(--font-brand);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #EC7038;
}
.sim-value {
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 18px;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}
.sim-value small { font-size: 13px; color: var(--text-dim); }
.sim-hint { margin: -2px 0 0; font-size: 12px; color: rgba(248, 246, 242, 0.5); }
.sim-fixed {
  margin: 0;
  padding: 12px 14px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  font-size: 13px;
  color: var(--text-dim);
}
.sim-range {
  --p: 0.5;
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 24px;
  margin: 0;
  background: transparent;
  cursor: pointer;
}
.sim-range::-webkit-slider-runnable-track {
  height: 6px;
  border-radius: 0;
  background: linear-gradient(to right, #FF9A2A 0 calc(10px + (100% - 20px) * var(--p)), rgba(255, 255, 255, 0.1) 0);
}
.sim-range::-moz-range-track {
  height: 6px;
  border-radius: 0;
  background: linear-gradient(to right, #FF9A2A 0 calc(10px + (100% - 20px) * var(--p)), rgba(255, 255, 255, 0.1) 0);
}
/* the handle is a solid orange square, as in the app (Martin, 3 Nov) */
.sim-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  margin-top: -7px;
  border-radius: 0;
  background: #FF6B1F;
  box-shadow: 0 0 14px var(--fire-glow), 0 0 0 3px rgba(0, 0, 0, 0.6);
}
.sim-range::-moz-range-thumb {
  box-sizing: border-box;
  width: 20px;
  height: 20px;
  border: 0;
  border-radius: 0;
  background: #FF6B1F;
  box-shadow: 0 0 14px var(--fire-glow), 0 0 0 3px rgba(0, 0, 0, 0.6);
}
.sim-range:focus-visible { outline: none; }
.sim-range:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 3px #FFB547; }
/* the network: two tiles with the chain's logo, as on the app's Create page */
.sim-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.sim-tiles button {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 62px;
  padding: 0 16px;
  background: #070708;
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: var(--text);
  text-align: left;
  cursor: pointer;
  transition: border-color 0.18s ease, background-color 0.18s ease;
}
.sim-tiles svg { flex: none; width: 26px; height: 26px; }
.sim-tiles span { display: grid; gap: 4px; min-width: 0; }
.sim-tiles b { font: 600 15px/1.1 var(--font-ui); }
.sim-tiles small { font: 500 12px/1 var(--font-ui); color: var(--text-dim); }
.sim-chips { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.sim-chips button {
  height: 40px;
  padding: 0 14px;
  background: #070708;
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: var(--text-dim);
  font: 500 14px var(--font-ui);
  cursor: pointer;
  transition: color 0.18s ease, border-color 0.18s ease, background-color 0.18s ease;
}
.sim-tiles button:hover, .sim-chips button:hover { color: var(--text); border-color: rgba(255, 255, 255, 0.3); }
.sim-tiles button[aria-pressed="true"], .sim-chips button[aria-pressed="true"] {
  color: var(--text);
  border-color: #EC7038;
  background: rgba(236, 112, 56, 0.08);
}
/* the stake slider carries a mark where the stake fills the whole curve, the volume slider one where the
   fees pay the stake back: past it, the mark turns the logo's yellow */
.sim-stake-wrap { --b: 0.5; position: relative; padding-bottom: 26px; }
.sim-bond-line {
  position: absolute;
  top: 2px;
  left: calc(10px + (100% - 20px) * var(--b));
  width: 2px;
  height: 20px;
  margin-left: -1px;
  background: rgba(248, 219, 81, 0.75);
  pointer-events: none;
}
.sim-bond {
  position: absolute;
  top: 28px;
  padding: 0;
  border: 0;
  background: none;
  color: rgba(248, 219, 81, 0.8);
  font: 12px var(--font-mono);
  white-space: nowrap;
  cursor: pointer;
}
.sim-bond:hover, .sim-bond:focus-visible { color: #F8DB51; text-decoration: underline; outline: none; }
.sim-stake-wrap.is-past .sim-bond { color: #F8DB51; }
.sim-stake-wrap.is-past .sim-bond-line { background: #F8DB51; box-shadow: 0 0 8px rgba(248, 219, 81, 0.6); }
/* the lock slider's round durations, under the track at their place (thumb 20 px wide) */
.sim-mark-wrap { position: relative; padding-bottom: 20px; }
.sim-marks { position: absolute; left: 0; right: 0; top: 28px; height: 14px; pointer-events: none; }
.sim-marks span {
  position: absolute;
  left: calc(10px + (100% - 20px) * var(--x));
  translate: -50% 0;
  font: 400 10px var(--font-brand);
  color: rgba(248, 246, 242, 0.45);
  white-space: nowrap;
}
.sim-marks span:first-child { translate: -10px 0; }
.sim-marks span:last-child { translate: calc(-100% + 10px) 0; }
@media (max-width: 480px) { .sim-marks [data-minor] { display: none; } }

/* what comes back: the fees, big, then the supply at the end of the lock and three figures */
.sim-result { justify-content: space-between; }
.sim-top { display: grid; gap: 14px; }
.sim-bottom { display: grid; gap: 18px; }
.sim-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
/* the figure you receive, and the market cap at launch on its right (the date that sat in the corner is gone,
   Martin, 4 Nov: "supp ça") */
.sim-bigrow { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px; } /* sur un petit téléphone, un très gros chiffre passe la capitalisation à la ligne au lieu d'élargir la page */
/* on the same orange as Launch app, dark ink on it (Martin, 4 Nov: "met sur fond orange") */
.sim-mc { display: grid; justify-items: end; gap: 6px; padding: 12px 14px; text-align: right; background: #FF6B1F; color: #0B0B0C; }
.sim-mc .sim-label { color: #0B0B0C; }
.sim-mc b { font: 600 28px/1 var(--font-ui); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; color: #0B0B0C; }
.sim-mc em { font-style: normal; font-size: 12px; color: rgba(11, 11, 12, 0.7); }
.sim-big-value {
  font-family: var(--font-mono);
  font-size: clamp(44px, 6vw, 76px);
  line-height: 1;
  margin-top: 4px;
  font-variant-numeric: tabular-nums;
  background: var(--fire);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  justify-self: start;
}
.sim-big-sub { margin: 0; font-size: 14px; color: var(--text-dim); }
/* the whole supply at the end of the lock, the same three parts as How it works: burned (char), back to
   the dev (the logo's tones), everyone else's (grey) */
.sim-supply-box { display: grid; gap: 12px; }
.sim-supply { display: flex; height: 16px; background: rgba(255, 255, 255, 0.06); }
.sim-supply span { display: block; height: 100%; transition: width 0.25s ease; }
.ss-burned { background: #5A2414; }
.ss-back { background: linear-gradient(to right, #EF9B41, #F8DB51); }
.ss-others { background: rgba(255, 255, 255, 0.22); }
.sim-legend { display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 13px; color: var(--text-dim); }
.sim-legend span { display: inline-flex; align-items: center; gap: 7px; }
.sim-legend b { font: 400 13px var(--font-mono); color: var(--text); }
.ss-sw { display: inline-block; width: 10px; height: 10px; }
.sim-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.sim-stat {
  display: grid;
  align-content: start;
  gap: 8px;
  min-width: 0;
  padding: 14px 16px;
  background: #070708;
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.sim-stat b { font: 400 22px/1.1 var(--font-mono); font-variant-numeric: tabular-nums; color: var(--text); }
.sim-stat em { font-style: normal; font-size: 12px; line-height: 1.35; color: rgba(248, 246, 242, 0.55); }
.sim-stat.is-done b { color: #F8DB51; }
.sim-note { margin: 0; font-size: 12px; color: rgba(248, 246, 242, 0.45); }

/* the whole simulator fits on one screen, even on Solana with another token, its tallest case (Martin, 4 Nov:
   "tiens pas sur une page"): tighter boxes, gaps, tiles and slider marks, nothing taken out */
#simulator .section-inner { gap: 12px; }
#simulator .section-title { margin-bottom: 18px; }
.sim-controls, .sim-result { padding: 22px; gap: 14px; }
.sim-controls { gap: 12px; }
/* a slider's short hint sits on its row, before its value, rather than on a line of its own */
.sim-row .sim-hint { margin: 0 0 0 auto; text-align: right; }
/* the boxes in the blurred black of What it's for just above, the pixels showing through (Martin, 4 Nov:
   "un peu transparent comme le bloc du dessus"); the tiles inside a shade darker */
.sim-controls, .sim-result {
  background: rgba(0, 0, 0, 0.28);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}
.sim-tiles button, .sim-chips button, .sim-stat { background: rgba(0, 0, 0, 0.35); }
.sim-field { gap: 10px; }
.sim-tiles button { min-height: 52px; }
.sim-chips button { height: 36px; }
.sim-stake-wrap { padding-bottom: 22px; }
.sim-bond { top: 26px; }
.sim-mark-wrap { padding-bottom: 18px; }
.sim-marks { top: 26px; }

@media (max-width: 980px) {
  .sim { grid-template-columns: minmax(0, 1fr); }
}
/* on a phone: the three figures one under the other, label and note on the left, the value on the right */
@media (max-width: 560px) {
  .sim-controls, .sim-result { padding: 22px 18px; }
  .sim-tiles button { gap: 10px; padding: 0 12px; }
  .sim-tiles b { font-size: 14px; }
  .sim-stats { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .sim-stat { grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; row-gap: 6px; align-items: center; }
  .sim-stat .sim-label { grid-area: 1 / 1; }
  .sim-stat em { grid-area: 2 / 1; }
  .sim-stat b { grid-area: 1 / 2 / 3 / 3; font-size: 20px; }
}

@media (max-width: 720px) {
  :root { --header-h: 72px; }
  .brand-logo { width: 34px; height: 34px; }
  .header-nav { display: none; }
}

/* Footer: no background, like the header. The logo and the promise on the left, three columns
   of links on the right (titles in the pixel font, links light up in the logo's orange), the legal
   line along the bottom */
.site-footer {
  position: relative;
  z-index: 1;
  padding: clamp(64px, 8vw, 96px) 0 40px;
}
.footer-inner {
  width: min(1240px, 100% - 2 * var(--gutter));
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 48px;
  row-gap: clamp(48px, 7vw, 88px);
}
.footer-brand { display: grid; gap: 18px; align-content: start; }
.footer-logo img { display: block; width: auto; height: 30px; }
.footer-brand p { margin: 0; font-size: 15px; color: var(--text-dim); }
.footer-cols {
  display: grid;
  grid-template-columns: repeat(3, auto);
  column-gap: clamp(40px, 6vw, 96px);
}
.footer-col { display: grid; gap: 14px; align-content: start; }
.footer-col h2 {
  margin: 0 0 8px;
  font-family: var(--font-brand);
  font-weight: 400;
  font-size: 16px;
  color: var(--text);
}
.footer-col a {
  font-size: 15px;
  color: var(--text-dim);
  text-decoration: none;
  transition: color 0.2s ease;
}
.footer-col a:hover { color: #EF9B41; }
.footer-socials { display: flex; gap: 20px; }
.footer-social { display: block; }
.footer-icon { display: block; width: 22px; height: 22px; }
.footer-legal { grid-column: 1 / -1; margin: 0; font-size: 13px; color: rgba(248, 246, 242, 0.45); }
@media (max-width: 760px) {
  .footer-inner { grid-template-columns: minmax(0, 1fr); }
  /* two columns: the pixel font's titles are too wide for three side by side */
  .footer-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 16px; }
  .footer-col a { font-size: 14px; }
}

/* Pixel sky */
.atmosphere {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  background: var(--canvas);
  contain: strict;
  isolation: isolate;
}

/* The mosaic of pixels (.pixel-base, drawn once) and the few that light up (.pixels),
   both drawn by atmosphere.js */
.pixel-base,
.pixels {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

/* Ember glow on the edges. Each glow fades in several steps and the layer is blurred,
   so the fire melts into the black instead of showing blob edges.
   Screen blending keeps the pixels visible through it. */
.ember {
  position: absolute;
  inset: -40px; /* room for the blur, so the very edges stay lit */
  z-index: 2;
  opacity: var(--ember-strength);
  filter: blur(var(--ember-blur));
  mix-blend-mode: screen;
  background-image:
    /* Glow centres sit on the screen edges (40px inside this oversized layer). */
    /* top: gold peak, then orange, then deep red */
    radial-gradient(56% 22% at 58% 40px,
      rgb(var(--ember-hi)) 0%, rgb(var(--ember-mid) / 0.9) 20%, rgb(var(--ember-deep) / 0.7) 42%,
      rgb(var(--ember-deep) / 0.3) 66%, transparent 100%),
    /* top-right corner, running down the right edge */
    radial-gradient(26% 42% at calc(100% - 40px) 10%,
      rgb(var(--ember-mid) / 0.95) 0%, rgb(var(--ember-deep) / 0.6) 40%, rgb(var(--ember-deep) / 0.22) 70%, transparent 100%),
    /* bottom-left: the brightest corner */
    radial-gradient(36% 30% at 40px calc(100% - 40px),
      rgb(var(--ember-hi)) 0%, rgb(var(--ember-warm) / 0.95) 14%, rgb(var(--ember-mid) / 0.8) 32%,
      rgb(var(--ember-deep) / 0.45) 55%, rgb(var(--ember-deep) / 0.15) 78%, transparent 100%),
    /* left edge, rising from that corner */
    radial-gradient(10% 38% at 40px 76%,
      rgb(var(--ember-deep) / 0.8) 0%, rgb(var(--ember-deep) / 0.3) 55%, transparent 100%),
    /* bottom-right: faint dark red */
    radial-gradient(32% 18% at calc(100% - 40px) calc(100% - 40px),
      rgb(var(--ember-dark) / 0.9) 0%, rgb(var(--ember-dark) / 0.35) 55%, transparent 100%),
    /* top-left: faint dark red */
    radial-gradient(15% 22% at 40px 40px,
      rgb(var(--ember-deep) / 0.8) 0%, rgb(var(--ember-deep) / 0.3) 55%, transparent 100%);
}

/* Solar eruption (flare.js). When WebGL runs, it replaces the ember glow. */
.flare {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: block;
  width: 100%;
  height: 100%;
  filter: blur(2.5px); /* keeps the plasma soft and vaporous */
}
.has-flare .ember { display: none; }

@keyframes ember-breathe {
  0%, 100% { opacity: var(--ember-strength); }
  50% { opacity: calc(var(--ember-strength) * 0.86); }
}

@media (prefers-reduced-motion: no-preference) {
  .ember { animation: ember-breathe 9s ease-in-out infinite; }
}

/* Titles step up on wide screens, still on Silkscreen's 8px grid */
@media (min-width: 900px) {
  .section-title { font-size: 56px; }
}
/* The step titles follow their column, so the longest, "Claim = burn" (8.1em wide), fits on one line */
@media (max-width: 359px) {
  .how-text h3 { font-size: 32px; }
}
@media (min-width: 761px) and (max-width: 959px) {
  .how-text h3 { font-size: 32px; }
}
@media (min-width: 1120px) {
  .how-text h3 { font-size: 48px; }
}

/* Header: on a computer the links and Launch App are in the bar, so the menu button and its sheet
   only exist on a phone (placed last, after the rules that give them their display) */
@media (min-width: 721px) { .site-header .menu-button, .site-header .menu-sheet { display: none; } }
@media (max-width: 720px) { .site-header .header-cta { display: none; } }
/* Launch App at the bottom of the first screen, on a phone only (Antoine, 3 Nov). The hero ends at the bottom
   of the screen visible at load (--ecran, hero.js), so the button stays in view above the browser's own bars */
.hero-phone-cta { display: none; }
@media (max-width: 720px) {
  .hero-phone-cta {
    display: inline-flex;
    position: absolute;
    grid-area: auto;
    justify-self: auto;
    left: var(--gutter);
    right: var(--gutter);
    bottom: calc(24px + env(safe-area-inset-bottom, 0px));
    justify-content: center;
    min-height: 52px;
    font-size: 14px;
  }
}
@media (prefers-reduced-motion: no-preference) { .hero-phone-cta { animation-delay: 1.25s; } }

/* One look for the whole site (1 Nov 2026): the app and this page share it. Square corners on every
   frame, a hairline border that turns the logo's orange on hover, a picked option framed in orange on
   a light orange tint (the fire gradient is kept for the one main action of a screen) */
.how-tag { border-radius: 0; }
/* le texte sélectionné en orange de la charte (Martin, 01/11) */
::selection { background: #EC7038; color: #0B0B0C; }

/* 5. FAQ (Martin, 2 Nov): the title on the left, held in place while the questions scroll by, the
   questions on the right in one square frame of blurred black (the pixels show through, softened:
   Martin, 2 Nov, "un flou noir, pas un noir complet"), a hairline between them. A question lights up in the logo's orange on hover; open, its pixel plus turns
   into a minus. <details name="faq"> keeps one open at a time, with no script */
.faq-inner {
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  column-gap: clamp(32px, 6vw, 96px);
  align-items: start;
}
.faq-head { position: sticky; top: calc(var(--header-h) + 24px); display: grid; gap: 20px; }
.faq-head .section-title { margin: 0; }
.faq-list {
  background: rgba(0, 0, 0, 0.28);       /* lighter black: "trop noir, trop d'opacité" (Martin, 2 Nov) */
  -webkit-backdrop-filter: blur(2px);   /* a light blur: "moins de flou" (Martin, 2 Nov) */
  backdrop-filter: blur(2px);
  border: 1px solid rgba(255, 255, 255, 0.12);
}
.faq-item + .faq-item { border-top: 1px solid rgba(255, 255, 255, 0.1); }
.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 24px 28px;
  cursor: pointer;
  list-style: none;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--text);
  transition: color 0.2s ease;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover, .faq-item[open] summary { color: #EF9B41; }
.faq-item summary:focus-visible { outline: 2px solid #F8DB51; outline-offset: -2px; }
.faq-ic {
  flex: none;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: var(--text-dim);
  transition: border-color 0.2s ease, color 0.2s ease, background-color 0.2s ease;
}
.faq-px { width: 12px; height: 12px; fill: currentColor; }
.faq-px-v { transition: opacity 0.2s ease; }
.faq-item summary:hover .faq-ic { border-color: #EC7038; color: #EC7038; }
.faq-item[open] .faq-ic { border-color: #EC7038; background: #EC7038; color: #0B0B0C; }
.faq-item[open] .faq-px-v { opacity: 0; }
.faq-a {
  margin: 0;
  padding: 0 84px 26px 28px;
  max-width: 64ch;
  font-size: 16px;
  line-height: 1.6;
  color: var(--text-dim);
}
.faq-a .n { font-family: var(--font-mono); font-size: 0.94em; color: var(--text); }
/* the answer slides open where the browser can animate to an automatic height */
@supports (interpolate-size: allow-keywords) {
  .faq-list { interpolate-size: allow-keywords; }
  .faq-item::details-content { height: 0; overflow: clip; transition: height 0.3s ease, content-visibility 0.3s allow-discrete; }
  .faq-item[open]::details-content { height: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .faq-item::details-content { transition: none; }
}
@media (max-width: 900px) {
  .faq-inner { grid-template-columns: minmax(0, 1fr); row-gap: 28px; }
  .faq-head { position: static; }
}
@media (max-width: 640px) {
  .faq-item summary { padding: 20px 18px; font-size: 16px; gap: 16px; }
  .faq-a { padding: 0 18px 22px; font-size: 15px; }
}

/* 6. The orange panel before the footer (Martin, 2 Nov): the one place where the page turns orange, so it
   stands out from the black. A square panel in the logo's orange, lit from the top left, with the pixel grid
   of the background drawn in a deeper orange; dark ink on it. On the right, two of the app's token cards,
   tilted, breaking out of the panel at the top and at the bottom */
.cta-band {
  position: relative;
  z-index: 1;
  padding: clamp(72px, 8vw, 104px) var(--gutter) clamp(72px, 8vw, 104px);
  overflow-x: clip;
}
.cta-panel {
  position: relative;
  max-width: 1120px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: 32px;
  padding: clamp(32px, 3.6vw, 48px) clamp(24px, 4.4vw, 60px);
  color: #1A0700;
  background:
    radial-gradient(70% 90% at 12% 0%, rgba(248, 219, 81, 0.55), transparent 70%),
    radial-gradient(60% 80% at 100% 100%, rgba(150, 40, 12, 0.45), transparent 70%),
    #EC7038;
}
/* the background's pixels, 10 px squares every 12 px, a shade deeper than the panel */
.cta-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, transparent 10px, rgba(255, 255, 255, 0.07) 10px) 0 0 / 12px 12px,
    linear-gradient(transparent 10px, rgba(255, 255, 255, 0.07) 10px) 0 0 / 12px 12px;
  mix-blend-mode: soft-light;
}
.cta-text { position: relative; display: grid; gap: 16px; justify-items: start; }
.cta-eyebrow { margin: 0; font-family: var(--font-brand); font-size: 16px; text-transform: uppercase; color: rgba(26, 7, 0, 0.7); }
.cta-title {
  margin: 0;
  max-width: 20ch;
  font-family: var(--font-brand);
  font-weight: 400;
  font-size: clamp(26px, 3.2vw, 40px);
  line-height: 1.12;
  color: #1A0700;
  text-wrap: balance;
}
.cta-title span { display: block; }   /* one sentence per line */
.cta-lead { margin: 0; max-width: 50ch; font-size: 16px; line-height: 1.5; color: rgba(26, 7, 0, 0.82); }
.cta-lead .n { font-family: var(--font-mono); font-size: 0.92em; color: #1A0700; }
.cta-btn {
  margin-top: 4px;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 48px;
  padding: 0 22px;
  background: #0B0B0C;
  color: #F8F6F2;
  font: 400 14px/1 var(--font-brand);
  text-transform: uppercase;
  text-decoration: none;
  transition: color 0.2s ease, box-shadow 0.2s ease;
}
.cta-btn svg { width: 13px; height: 13px; fill: #EC7038; transition: rotate 0.25s ease; }
.cta-btn:hover { color: #F8DB51; box-shadow: 0 10px 30px rgba(26, 7, 0, 0.35); }
.cta-btn:hover svg { rotate: 90deg; }
.cta-btn:focus-visible { outline: 2px solid #1A0700; outline-offset: 3px; }

/* the two cards, the same as the app's board (Martin, 2 Nov): a square picture, the lock time with its padlock, the
   star and the contract button; the market cap big, locked and liquidity under it, then « Staked » with the coin's
   logo; the volume over the 24 pixels (the colours' legend takes its place on hover) and the chain in pixels in the
   corner. Numbers in Instrument Sans, labels in the pixel font, as in the app */
.cta-art { position: relative; align-self: stretch; min-height: 240px; }
.tcard {
  position: absolute;
  width: 320px;
  padding: 16px 16px 14px;
  display: grid;
  gap: 10px;
  overflow: hidden;
  background: #0B0B0C;
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #F8F6F2;
  box-shadow: 0 24px 60px rgba(40, 8, 0, 0.45);
  font-family: var(--font-ui);
}
.tcard p { margin: 0; }
/* one breaks out at the top, the other at the bottom */
.tcard-a { top: clamp(-104px, -7.5vw, -70px); right: 0; rotate: 5deg; z-index: 1; }
.tcard-b { bottom: clamp(-112px, -8vw, -76px); right: clamp(70px, 10vw, 150px); rotate: -7deg; z-index: 2; }
.tc-top { display: grid; grid-template-columns: auto 1fr auto; grid-template-rows: auto 1fr; column-gap: 12px; }
.tc-logo { grid-row: 1 / 3; display: grid; place-items: center; width: 56px; height: 56px; font-size: 28px; }
.tc-acts { grid-column: 3; display: flex; align-items: center; gap: 6px; }
.tc-left { display: inline-flex; align-items: center; gap: 4px; margin-right: 2px; font-size: 11px; color: rgba(248, 246, 242, 0.55); font-variant-numeric: tabular-nums; white-space: nowrap; }
.tc-left svg { width: 11px; height: 11px; }
.tc-btn { display: inline-grid; place-items: center; height: 24px; min-width: 24px; padding: 0 5px; border: 1px solid rgba(255, 255, 255, 0.14); color: rgba(248, 246, 242, 0.55); font: 400 9px/1 var(--font-brand); }
.tc-btn svg { width: 11px; height: 11px; }
.tc-ca { gap: 4px; grid-auto-flow: column; }
.tc-id { grid-column: 2 / 4; grid-row: 2; align-self: start; padding-top: 6px; min-width: 0; }
.tc-tick { font: 400 12px/1 var(--font-brand); color: #EC7038; }
.tcard .tc-nm { margin-top: 5px; font-size: 13px; color: rgba(248, 246, 242, 0.6); }
.tcard .tc-mc { margin-top: 6px; font: 600 28px/1.05 var(--font-ui); letter-spacing: -0.025em; font-variant-numeric: tabular-nums; }
.tc-mc small, .tc-kpis small { margin-left: 0.4em; font: 400 0.42em/1 var(--font-brand); letter-spacing: 0; color: rgba(248, 246, 242, 0.55); text-transform: uppercase; }
.tc-kpis { display: flex; gap: 16px; font: 600 16px/1.2 var(--font-ui); letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.tc-kpis small { font-size: 10px; }
.tc-kpis small.is-locked { color: #F8DB51; }
.tc-pair { display: flex; align-items: center; gap: 7px; font-size: 13px; color: rgba(248, 246, 242, 0.6); }
.tc-pair img { width: 16px; height: 16px; border-radius: 50%; }
.tc-stake { color: #F8F6F2; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tc-badge { margin-left: auto; padding: 5px 7px 4px; font: 400 9px/1 var(--font-brand); text-transform: uppercase; border: 1px solid currentColor; }
.tc-badge.is-curve { color: #F8DB51; }
.tc-badge.is-bonded { color: #F8F6F2; }
.tc-low { margin-top: 2px; padding-top: 10px; border-top: 1px solid rgba(255, 255, 255, 0.08); }
.tc-swap { display: grid; max-width: calc(100% - 50px); margin-bottom: 8px; }
.tc-swap > * { grid-area: 1 / 1; align-self: end; transition: opacity 0.25s ease; }
.tc-bag { display: flex; flex-wrap: wrap; gap: 3px 0.6em; font: 400 10px/1.3 var(--font-ui); color: rgba(248, 246, 242, 0.6); opacity: 0; }
.tc-bag span { display: inline-flex; align-items: center; gap: 0.4em; }
.tc-bag i { width: 0.62em; height: 0.62em; background: var(--c); }
.tc-bar { display: grid; grid-template-columns: repeat(24, minmax(0, 1fr)); gap: 2px; max-width: calc(100% - 50px); }
.tc-bar i { aspect-ratio: 1; background: var(--c); }
.tcard .d-burned { --c: #CC3628; } .tcard .d-locked { --c: #F8DB51; } .tcard .d-curve { --c: #6FA0F5; }
.tcard .d-pool { --c: #A6F2F2; } .tcard .d-holders { --c: #B4B2AE; }
.tc-ft { display: flex; flex-wrap: wrap; gap: 5px 12px; font: 400 12px/1 var(--font-ui); color: rgba(248, 246, 242, 0.6); font-variant-numeric: tabular-nums; }
.tc-ft > span { white-space: nowrap; }
.tc-ft b { font-weight: 400; color: #3DDC97; }
.tc-ppl { color: #F8F6F2; }
.tc-chain { position: absolute; right: 8px; bottom: -4px; width: 48px; height: 48px; }
/* on hover (Martin, 2 Nov): the card straightens, rises a little, lights up in orange like an app card that trades,
   comes in front of the other one, and the colours' legend takes the volume's place */
.tcard { transition: rotate 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), translate 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.35s ease, border-color 0.35s ease; }
.tcard:hover { z-index: 3; rotate: 0deg; translate: 0 -8px; border-color: #EC7038; box-shadow: 0 0 0 1px #EC7038, 0 0 36px rgba(236, 112, 56, 0.45), 0 30px 70px rgba(40, 8, 0, 0.55); }
.tcard:hover .tc-bag { opacity: 1; }
.tcard:hover .tc-ft { opacity: 0; }
@media (prefers-reduced-motion: reduce) { .tcard { transition: none; } .tcard:hover { translate: none; } }

@media (max-width: 900px) {
  .cta-panel { grid-template-columns: minmax(0, 1fr); padding-bottom: 0; }
  /* on a phone the cards sit under the words, one over the other, the second breaking out at the bottom */
  .cta-art { min-height: 0; height: 200px; margin-top: 4px; }
  .tcard { width: min(300px, 84%); }
  .tcard-a { top: 0; left: 2%; right: auto; rotate: -4deg; }
  .tcard-b { top: 64px; bottom: auto; right: 0; rotate: 5deg; }
  .cta-band { padding-bottom: 150px; }
}
@media (max-width: 480px) {
  .cta-lead { font-size: 16px; }
  .tcard .tc-mc { font-size: 26px; }
  .tc-pair { gap: 5px; font-size: 12px; }
  .tc-badge { padding: 4px 5px 3px; font-size: 8px; }
}
/* the stake: its amount in the pair, then its dollars */
.sim-controls { position: relative; }
.sim-stakeval { display: inline-flex; align-items: center; gap: 8px; }
.sim-usd { font: 500 13px var(--font-ui); color: var(--text-dim); }
/* the pair: the first ones as buttons with their logo, "+N more" opens the others (the app's Create page) */
.sim-pairs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.sim-pairs button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 0;
  height: 44px;
  padding: 0 10px;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: var(--text-dim);
  font: 600 15px/1 var(--font-ui);
  white-space: nowrap;
  cursor: pointer;
}
.sim-pairs button:hover { color: var(--text); border-color: rgba(255, 255, 255, 0.3); }
.sim-pairs button[aria-pressed="true"] { color: var(--text); border-color: #EC7038; background: rgba(236, 112, 56, 0.08); }
.sim-pairs button:focus-visible { outline: 2px solid #F8DB51; outline-offset: 2px; }
.sim-morebtn[aria-expanded="true"] { border-color: rgba(255, 255, 255, 0.3); color: var(--text); }
.sim-morebtn[aria-expanded="true"] .sim-chev { rotate: 180deg; }
.sim-plogo { flex: none; width: 20px; height: 20px; object-fit: contain; }
.sim-nologo { display: inline-grid; place-items: center; background: rgba(255, 255, 255, 0.1); font: 600 10px/1 var(--font-ui); color: var(--text); }
.sim-chev { flex: none; width: 14px; height: 14px; fill: none; stroke: var(--text-dim); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: rotate 0.15s; }
/* the pairs: the app's square black list, a search at the top, over the box */
.sim-menu { position: absolute; z-index: 30; display: grid; width: 300px; max-width: calc(100% - 32px); background: #0B0B0C; border: 1px solid rgba(255, 255, 255, 0.16); box-shadow: 0 18px 40px rgba(0, 0, 0, 0.55); }
.sim-msearch { display: flex; align-items: center; gap: 8px; min-height: 38px; margin: 8px; padding: 0 10px; background: #070708; border: 1px solid rgba(255, 255, 255, 0.14); cursor: text; }
.sim-msearch:focus-within { border-color: #EC7038; }
.sim-msearch svg { flex: none; width: 14px; height: 14px; color: var(--text-dim); }
.sim-msearch input { flex: 1; min-width: 0; padding: 0; background: none; border: 0; color: var(--text); font: 500 14px/1 var(--font-ui); outline: none; }
.sim-mlist { display: grid; align-content: start; gap: 2px; max-height: 340px; padding: 0 6px 6px; overflow-y: auto; scrollbar-width: thin; }
.sim-opt { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 40px; padding: 8px 12px 8px 10px; background: none; border: 1px solid transparent; color: var(--text); font: 500 14px/1 var(--font-ui); text-align: left; cursor: pointer; }
.sim-opt:hover, .sim-opt:focus-visible { background: rgba(255, 255, 255, 0.05); outline: none; }
.sim-opt[aria-selected="true"] { border-color: #EC7038; background: rgba(236, 112, 56, 0.1); }
/* every name in full: the symbol, then the name on the right, on two lines when long (Martin, 4 Nov: "je dois pouvoir tout voir") */
.sim-osym { flex: none; white-space: nowrap; }
.sim-oname { flex: 1; min-width: 0; text-align: right; overflow-wrap: anywhere; font: 400 12px/1.35 var(--font-ui); color: var(--text-dim); }
.sim-mnone { margin: 0; padding: 10px; font: 400 13px/1.3 var(--font-ui); color: var(--text-dim); }
@media (max-width: 640px) { .sim-msearch input { font-size: 16px; } .sim-pairs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.sim-tosol { padding: 0; border: 0; background: none; color: #F8DB51; font: inherit; text-decoration: underline; cursor: pointer; }

/* Figures are never in a pixel or monospace font (Martin, 4 Nov: "pour les chiffres n'utilise jamais la
   police pixel"): every amount, share, date and duration of the page's text is in Instrument Sans, like the
   figures of the app's cards; Silkscreen stays for the words of labels, tabs and buttons. Placed last so it
   wins over the rules above */
.sim-value { font-family: var(--font-ui); font-size: 20px; font-weight: 600; }
.sim-value small { font: 500 13px var(--font-ui); }
.sim-bond { font: 500 12px/1 var(--font-ui); }
.sim-big-value { font-family: var(--font-ui); font-weight: 600; letter-spacing: -0.03em; }
.sim-legend b { font: 600 13px var(--font-ui); }
.sim-stat b { font: 600 22px/1.1 var(--font-ui); letter-spacing: -0.01em; }
.sim-marks span { font: 400 11px var(--font-ui); }
.deal-card .n, .faq-a .n, .cta-lead .n { font-family: inherit; font-size: 1em; }
.deal-art { font-family: var(--font-ui); }
.how-text .how-kicker, .how-tag { font-family: var(--font-ui); }
.tc-badge { font: 600 10px/1 var(--font-ui); letter-spacing: 0.02em; }

/* Arriving on the simulator (Martin, 4 Nov: "ajoute une animation quand je scroll et arrive sur cette section"):
   the two boxes rise into place one after the other, their rows come in one by one, then the figure counts up
   from $0 (sections.js) and the supply bar fills. Only once, and not for anyone who prefers less motion */
@media (prefers-reduced-motion: no-preference) {
  .sim.will-in :is(.sim-controls, .sim-result) {
    opacity: 0;
    translate: 0 36px;
    transition: opacity 0.7s ease, translate 0.9s cubic-bezier(0.2, 0.8, 0.2, 1);
  }
  .sim.will-in .sim-result { transition-delay: 0.12s; }
  .sim.will-in :is(.sim-controls, .sim-result) > * {
    opacity: 0;
    translate: 0 14px;
    transition: opacity 0.5s ease calc(0.25s + var(--i, 0) * 0.07s), translate 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) calc(0.25s + var(--i, 0) * 0.07s);
  }
  .sim.will-in.is-in :is(.sim-controls, .sim-result),
  .sim.will-in.is-in :is(.sim-controls, .sim-result) > * { opacity: 1; translate: 0 0; }
  .sim.will-in:not(.is-in) .sim-supply span { width: 0 !important; }
  .sim.is-intro .sim-supply span { transition: width 1.2s cubic-bezier(0.2, 0.8, 0.2, 1) 0.5s; }
}