/* bons — design system. Dark theme only.
   Link assets/bons-fonts.css before this file.
   Order: tokens → base → layout → type → components → hero → responsive. */

/* ------------------------------------------------------------ tokens */
:root {
  color-scheme: dark;

  /* surfaces */
  --bg: #050606;
  --surface: #0C0E0E;
  --card: #111414;
  --card-hi: #171B1B;
  --line: rgba(236, 239, 237, 0.08);
  --line-hi: rgba(236, 239, 237, 0.16);

  /* text */
  --ink: #ECEFED;
  --muted: #9A9F9C;
  --dim: #6F7572;      /* second tone of big statements; large text only */
  --faint: #5E6361;    /* decoration, never body text */

  /* accents with meaning: lime = alive / passed, ember = burned / excluded */
  --lime: #C6F36A;
  --lime-ink: #0A0F04;
  --lime-soft: rgba(198, 243, 106, 0.12);
  --lime-glow: rgba(198, 243, 106, 0.45);
  --ember: #FF7A2F;
  --ember-hot: #FFC56E;
  --ember-deep: #B23A0E;
  --ember-soft: rgba(255, 122, 47, 0.12);
  --ember-glow: rgba(255, 122, 47, 0.5);
  /* risk zones of the plan's matrix: one ember ramp, checked for order and contrast on --bg and --card */
  --heat-mid: #74411F;
  --heat-high: #D4662A;

  /* glass */
  --glass: rgba(255, 255, 255, 0.035);
  --glass-hi: rgba(255, 255, 255, 0.06);
  --glass-line: rgba(255, 255, 255, 0.1);
  --glass-base: rgba(5, 6, 6, 0.6);   /* under glass cards: dims the sparks and glow behind without a blur */
  --blur: 18px;

  /* the ember glow at the bottom of the screen */
  --glow-ember: rgba(255, 122, 47, 0.10);
  --glow-core: rgba(255, 150, 70, 0.08);

  /* type */
  --f-display: "Unbounded", "Arial Black", system-ui, sans-serif;
  --f-text: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --f-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  --fs-mega: clamp(88px, 21vw, 340px);
  --fs-h1: clamp(40px, 6.4vw, 96px);
  --fs-h2: clamp(30px, 4.6vw, 64px);
  --fs-h3: clamp(19px, 1.7vw, 24px);
  --fs-statement: clamp(26px, 3.2vw, 48px);
  --fs-lead: clamp(17px, 1.45vw, 21px);
  --fs-body: 16px;
  --fs-small: 14px;
  --fs-micro: 12px;

  /* layout */
  --maxw: 1240px;
  --gutter: clamp(16px, 4vw, 48px);
  --section: clamp(72px, 9vw, 128px);
  --r-card: 24px;
  --r-inner: 16px;
  --r-pill: 999px;

  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* ------------------------------------------------------------ base */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 88px;
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--f-text);
  font-size: var(--fs-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
::selection { background: var(--lime); color: var(--lime-ink); }
a { color: var(--lime); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
:focus-visible { outline: 2px solid var(--lime); outline-offset: 3px; border-radius: 6px; }
img, svg, canvas, video { display: block; max-width: 100%; }
button { font: inherit; color: inherit; }
p { margin: 0 0 1em; text-wrap: pretty; }
h1, h2, h3, .display, .statement, .hero__desc, .hero__tagline { text-wrap: balance; }
html[data-lang="ru"] .en,
html[data-lang="en"] .ru { display: none !important; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
/* "skip to content": hidden until a keyboard user reaches it */
.skip:focus {
  position: fixed; top: 12px; left: 12px; z-index: 100;
  width: auto; height: auto; margin: 0; padding: 10px 16px; clip: auto;
  border-radius: var(--r-pill); background: var(--lime); color: var(--lime-ink); font-weight: 700;
}

/* ------------------------------------------------------------ layout */
.container {
  width: 100%;
  max-width: calc(var(--maxw) + 2 * var(--gutter));
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.section { position: relative; padding: var(--section) 0; }
.section--line { border-top: 1px solid var(--line); }
.section-head { display: grid; gap: 22px; margin-bottom: clamp(40px, 6vw, 80px); }
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.split--wide-l { grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); }
.stack { display: grid; gap: 16px; }
.row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }

/* ------------------------------------------------------------ type */
.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: var(--fs-micro); font-weight: 700;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--muted);
}
.eyebrow::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--lime); box-shadow: 0 0 12px var(--lime-glow);
}
.eyebrow--ember::before { background: var(--ember); box-shadow: 0 0 12px var(--ember-glow); }

.display {
  margin: 0;
  font-family: var(--f-display); font-weight: 600;
  font-size: var(--fs-h2); line-height: 0.98;
  letter-spacing: -0.02em; text-transform: uppercase;
}
.display--xl { font-size: var(--fs-h1); }
html[data-lang="ru"] .display { line-height: 1.06; }
.statement {
  margin: 0; max-width: 24ch;
  font-weight: 500; font-size: var(--fs-statement);
  line-height: 1.12; letter-spacing: -0.02em;
}
.statement .dim { color: var(--dim); }
.lead { font-size: var(--fs-lead); line-height: 1.5; color: var(--muted); max-width: 60ch; margin: 0; }
.h3 { margin: 0; font-weight: 700; font-size: var(--fs-h3); line-height: 1.25; letter-spacing: -0.01em; }
.muted { color: var(--muted); }
.lime { color: var(--lime); }
.ember { color: var(--ember); }
.mono { font-family: var(--f-mono); }
.small { font-size: var(--fs-small); }

.wordmark {
  margin: 0;
  font-family: var(--f-display); font-weight: 800;
  font-size: var(--fs-mega); line-height: 0.8;
  letter-spacing: -0.045em; text-transform: uppercase;
  white-space: nowrap; user-select: none;
  background: linear-gradient(180deg, #F6F8F7 0%, #C9CFCC 46%, #5F6562 100%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
.wordmark--ghost { background: none; color: rgba(236, 239, 237, 0.06); }
/* split wordmark: each part carries its own gradient, so a letter can be swapped */
.wordmark--split { background: none; }
.wordmark--split .g {
  background: linear-gradient(180deg, #DDE2E0 0%, #9DA4A1 50%, #3E4341 100%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
.wordmark--split .g--ember {
  background: linear-gradient(180deg, #FFD89A 0%, #FF7A2F 45%, #5A1D06 100%);
  -webkit-background-clip: text; background-clip: text;
  filter: drop-shadow(0 0 28px rgba(255, 122, 47, 0.45));
}

/* ------------------------------------------------------------ nav */
.nav { position: sticky; top: 0; z-index: 50; }
.nav--glass {
  background: rgba(5, 6, 6, 0.62);
  -webkit-backdrop-filter: blur(var(--blur)) saturate(140%);
  backdrop-filter: blur(var(--blur)) saturate(140%);
  border-bottom: 1px solid var(--line);
}
.nav__bar { display: flex; align-items: center; gap: 24px; height: 72px; }
.logo {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--f-display); font-weight: 700; font-size: 19px;
  letter-spacing: -0.02em; color: var(--ink);
}
.logo:hover { text-decoration: none; }
.logo svg { width: 16px; height: auto; }
.nav__links { display: flex; gap: 30px; margin: 0 auto; font-size: var(--fs-small); font-weight: 500; }
.nav__links a { color: var(--muted); }
.nav__links a:hover, .nav__links a[aria-current="true"] { color: var(--ink); text-decoration: none; }
.nav__tools { display: flex; align-items: center; gap: 10px; margin-left: auto; }

.lang {
  display: inline-flex; padding: 3px;
  border: 1px solid var(--line-hi); border-radius: var(--r-pill);
}
.lang button {
  height: 30px; padding: 0 11px; border: 0; border-radius: var(--r-pill);
  background: none; cursor: pointer;
  font-size: 12px; font-weight: 700; letter-spacing: 0.08em; color: var(--faint);
}
.lang button[aria-pressed="true"] { background: var(--ink); color: var(--bg); }

/* ------------------------------------------------------------ buttons, chips */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  min-height: 46px; padding: 0 24px;
  border-radius: var(--r-pill); border: 1px solid var(--line-hi);
  background: transparent; color: var(--ink); cursor: pointer;
  font-weight: 700; font-size: 15px; letter-spacing: 0.01em; white-space: nowrap;
  transition: background 0.25s var(--ease), border-color 0.25s var(--ease), box-shadow 0.25s var(--ease), color 0.25s var(--ease);
}
.btn:hover { border-color: var(--ink); text-decoration: none; }
.btn--lime { background: var(--lime); border-color: var(--lime); color: var(--lime-ink); }
.btn--lime:hover { border-color: var(--lime); box-shadow: 0 0 0 6px var(--lime-soft), 0 0 36px var(--lime-glow); }
.btn--glass {
  background: var(--glass); border-color: var(--glass-line);
  -webkit-backdrop-filter: blur(var(--blur)); backdrop-filter: blur(var(--blur));
}
.btn--sm { min-height: 38px; padding: 0 16px; font-size: 13px; }
.btn__arrow {
  display: inline-grid; place-items: center;
  width: 28px; height: 28px; margin-right: -12px; border-radius: 50%;
  background: var(--ink); color: var(--bg); font-size: 14px;
}
.btn--lime .btn__arrow { background: var(--lime-ink); color: var(--lime); }

.chip {
  display: inline-flex; align-items: center; gap: 8px;
  height: 30px; padding: 0 13px;
  border: 1px solid var(--line-hi); border-radius: var(--r-pill);
  font-size: 12.5px; font-weight: 700; color: var(--muted); white-space: nowrap;
}
.chip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.chip--lime { color: var(--lime); border-color: rgba(198, 243, 106, 0.3); background: var(--lime-soft); }
.chip--ember { color: var(--ember); border-color: rgba(255, 122, 47, 0.3); background: var(--ember-soft); }
.chip--plain::before { display: none; }

/* ------------------------------------------------------------ stats (Porsche) */
.stats { display: grid; grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr)); gap: clamp(20px, 3vw, 48px); }
.stat { border-top: 1px solid var(--line-hi); padding-top: 22px; }
.stat__num {
  display: block;
  font-family: var(--f-display); font-weight: 500;
  font-size: clamp(34px, 5vw, 72px); line-height: 1;
  letter-spacing: -0.04em; white-space: nowrap;
}
/* units stay small, so "646 тыс." fits as well as "646K" */
.stat__num small { margin: 0 0.2em; font-size: 0.42em; font-weight: 600; letter-spacing: 0; color: var(--muted); }
.stat__cap { display: block; margin-top: 14px; font-size: var(--fs-small); line-height: 1.45; color: var(--muted); max-width: 26ch; }

/* ------------------------------------------------------------ cards (Glasshaven, City Arcade) */
.cards { display: grid; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); gap: 16px; }
.card {
  position: relative; display: flex; flex-direction: column; gap: 14px;
  min-height: 240px; padding: clamp(22px, 2.4vw, 32px);
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-card);
}
.card__num { font-family: var(--f-display); font-weight: 400; font-size: clamp(34px, 3.4vw, 48px); line-height: 1; letter-spacing: -0.03em; }
.card__title { margin-top: auto; font-size: 13px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; }
.card__text { margin: 0; font-size: 15px; line-height: 1.5; color: var(--muted); }
.card__arrow { position: absolute; top: 24px; right: 24px; font-size: 20px; color: var(--faint); transition: color 0.25s var(--ease), transform 0.25s var(--ease); }
.card:hover .card__arrow { color: var(--lime); transform: translate(2px, -2px); }
.card--lit { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.card--lit .card__text { color: #3B403E; }
.card--lit .card__arrow { color: var(--bg); }

/* ------------------------------------------------------------ glass card (Velora) */
/* no backdrop blur: under the cards there are only sparks and the glow, and a blur there is the
   most expensive thing to redraw while scrolling. The dark base dims them instead. */
.glass {
  background: linear-gradient(var(--glass), var(--glass)), var(--glass-base);
  border: 1px solid var(--glass-line); border-radius: var(--r-card);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.glass__pad { padding: clamp(22px, 2.4vw, 30px); }
.glass__head {
  display: flex; justify-content: space-between; gap: 16px;
  margin-bottom: 22px; font-size: 11.5px; font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted);
}
.kv { display: grid; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); gap: 20px; }
.kv b { display: block; font-family: var(--f-display); font-weight: 500; font-size: clamp(30px, 3vw, 44px); line-height: 1; letter-spacing: -0.04em; }
.kv span { display: block; margin-top: 10px; font-size: 11.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }

/* ------------------------------------------------------------ ledger with dot leaders */
.ledger { font-family: var(--f-mono); font-size: 14px; line-height: 2; }
.ld { display: flex; align-items: baseline; gap: 1ch; }
.ld__l { flex: 0 1 auto; min-width: 0; }
.ld__d { flex: 1 1 2ch; min-width: 2ch; border-bottom: 1px dotted var(--faint); transform: translateY(-5px); }
.ld__v { flex: none; text-align: right; color: var(--lime); }
.ld__v.no { color: var(--ember); }
.ld__note { padding-left: 2ch; color: var(--muted); }

/* ------------------------------------------------------------ wallet scan */
.scan {
  padding: 22px 24px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-inner);
  font-family: var(--f-mono); font-size: 13.5px; line-height: 1.9;
}
.scan__cmd { color: var(--muted); margin-bottom: 6px; }
.scan__res { margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--line-hi); }
.ok { color: var(--lime); }
.no { color: var(--ember); }

/* ------------------------------------------------------------ accordion (Porsche specs) */
.acc { border-top: 1px solid var(--line-hi); }
.acc details { border-bottom: 1px solid var(--line-hi); }
.acc summary {
  display: flex; align-items: center; gap: 18px;
  padding: 22px 0; cursor: pointer; list-style: none;
  font-size: clamp(17px, 1.5vw, 20px); font-weight: 600;
}
.acc summary::-webkit-details-marker { display: none; }
.acc summary .n { flex: none; width: 3ch; font-family: var(--f-mono); font-size: 13px; color: var(--faint); }
.acc summary::after {
  content: ""; flex: none; margin-left: auto;
  width: 10px; height: 10px;
  border-right: 1.5px solid var(--muted); border-bottom: 1.5px solid var(--muted);
  transform: translateY(-3px) rotate(45deg);
  transition: transform 0.3s var(--ease);
}
.acc details[open] summary::after { transform: translateY(2px) rotate(-135deg); }
.acc__body { padding: 0 0 24px calc(3ch + 18px); max-width: 72ch; color: var(--muted); }

/* ------------------------------------------------------------ table (Glasshaven) */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table { width: 100%; border-collapse: collapse; font-size: 15px; }
.table th {
  padding: 0 18px 14px 0; text-align: left; vertical-align: bottom;
  font-size: 11.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--muted); border-bottom: 1px solid var(--line-hi);
}
.table td { padding: 16px 18px 16px 0; border-bottom: 1px solid var(--line); }
.table th:last-child, .table td:last-child { padding-right: 0; }
.table .r { text-align: right; }
.table td.r { font-family: var(--f-mono); white-space: nowrap; }
.table .hl { color: var(--lime); }

/* ------------------------------------------------------------ fee flow bars */
.flow { display: grid; gap: 8px; }
.flow__row { display: flex; gap: 8px; min-height: 124px; }
.flow__row--sub { margin-left: calc(30% + 4px); }
.seg {
  flex: var(--w, 1) 1 0; min-width: 0;
  display: flex; flex-direction: column; justify-content: space-between; gap: 12px;
  padding: 18px 20px; border-radius: 18px;
  background: var(--card); border: 1px solid var(--line);
}
.seg b { font-family: var(--f-display); font-weight: 500; font-size: clamp(22px, 2.4vw, 34px); line-height: 1; letter-spacing: -0.03em; }
.seg > span { font-size: 13.5px; line-height: 1.35; color: var(--muted); }
.seg--glass { background: var(--glass); border-color: var(--glass-line); }
.seg--lime { background: var(--lime); border-color: var(--lime); color: var(--lime-ink); }
.seg--lime > span { color: rgba(10, 15, 4, 0.72); }
.seg--ember { background: linear-gradient(160deg, var(--ember) 0%, var(--ember-deep) 100%); border-color: transparent; color: #1C0802; }
.seg--ember > span { color: rgba(28, 8, 2, 0.75); }

/* ------------------------------------------------------------ roadmap timeline */
.timeline { display: grid; grid-template-columns: repeat(var(--cols, 6), minmax(0, 1fr)); list-style: none; margin: 0; padding: 0; }
.timeline li { position: relative; padding: 32px 18px 0 0; border-top: 2px solid var(--line-hi); }
.timeline li::before {
  content: ""; position: absolute; top: -8px; left: 0;
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--bg); border: 2px solid var(--faint);
}
.timeline li.done { border-top-color: var(--lime); }
.timeline li.done::before { background: var(--lime); border-color: var(--lime); }
.timeline li.next::before { border-color: var(--lime); box-shadow: 0 0 0 5px var(--lime-soft); }
.t-num { font-family: var(--f-mono); font-size: 12px; color: var(--faint); }
.t-name { display: block; margin: 6px 0; font-weight: 700; font-size: 16px; line-height: 1.25; }
.t-when { font-size: 13px; color: var(--muted); }

/* ------------------------------------------------------------ product: grave row */
.grave {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 18px;
  padding: 16px 20px; border-radius: var(--r-inner);
  background: var(--card); border: 1px solid var(--line);
}
.grave__icon { width: 34px; height: 40px; color: var(--muted); }
.grave__coin b { display: block; font-family: var(--f-display); font-weight: 600; font-size: 15px; letter-spacing: 0.02em; }
.grave__coin span { font-family: var(--f-mono); font-size: 12px; color: var(--faint); }
.grave__num { font-family: var(--f-mono); font-size: 14px; text-align: right; }
.grave__num small { display: block; font-family: var(--f-text); font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--faint); }
.grave--out { opacity: 0.8; }
.grave--out .grave__icon { color: var(--ember); }

/* ------------------------------------------------------------ scroll cue (Velora) */
.scroll-cue {
  display: flex; align-items: center; gap: 12px;
  writing-mode: vertical-rl;
  font-size: 11px; font-weight: 800; letter-spacing: 0.32em; color: var(--muted);
}
.scroll-cue::after { content: ""; width: 1px; height: 56px; background: linear-gradient(var(--muted), transparent); }

/* ------------------------------------------------------------ footer */
.footer { padding: 64px 0 48px; border-top: 1px solid var(--line); font-size: var(--fs-small); color: var(--muted); }
.footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 32px; }
.footer a { color: var(--muted); }
.footer a:hover { color: var(--ink); }
.footer .logo { color: var(--ink); }
.disclaimer { margin-top: 40px; max-width: 90ch; font-size: 12.5px; line-height: 1.6; color: var(--muted); }

/* ------------------------------------------------------------ hero */
.hero {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: max(620px, min(100svh, 980px));
  background: radial-gradient(90% 70% at 50% 40%, rgba(236, 239, 237, 0.025) 0%, transparent 70%);
}
/* the glow at the bottom: lime under the glass P, ember once it has burnt.
   .hero--ambient leaves the ember glow to the page background (.ambient), so it stays while scrolling */
.hero::before, .hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  transition: opacity 0.9s var(--ease);
}
.hero::before { background: radial-gradient(60% 45% at 50% 100%, rgba(198, 243, 106, 0.07), transparent 70%); }
.hero::after { background: radial-gradient(60% 45% at 50% 100%, var(--glow-ember), transparent 70%); opacity: 0; }
.hero.is-burnt::before { opacity: 0; }
.hero.is-burnt::after { opacity: 1; }
.hero--ambient::after { content: none; }
.hero__sparks { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; pointer-events: none; }
/* WebGL scene: a transparent canvas above the wordmark. Without WebGL the CSS coin and sparks stay. */
.hero__scene { position: absolute; inset: 0; z-index: 2; display: none; width: 100%; height: 100%; cursor: pointer; touch-action: pan-y; }
.hero.has-webgl .hero__scene { display: block; }
.hero.has-webgl .coin-stage,
.hero.has-webgl .hero__sparks { display: none; }
.hero__word {
  position: absolute; left: 50%; top: 19%; z-index: 0;
  transform: translateX(-50%);
}
.hero__word .first { position: relative; display: inline-block; }
.hero__word .first .g { transition: opacity 0.7s var(--ease) 0.5s, filter 0.7s var(--ease) 0.5s; }
.hero__word .first .to { position: absolute; left: 0; top: 0; opacity: 0; }
.hero.is-burnt .hero__word .first .from { opacity: 0; filter: blur(10px); }
.hero.is-burnt .hero__word .first .to { opacity: 1; }
.hero__desc { margin: 10px auto 0; max-width: 46ch; font-size: clamp(14px, 1.1vw, 16px); color: var(--muted); }
.hero .coin-stage {
  position: absolute; left: 50%; top: 46%; z-index: 2;
  transform: translate(-50%, -50%);
  cursor: pointer;
}
.hero__ground {
  position: absolute; left: 50%; z-index: 1;
  top: calc(46% + clamp(130px, 15vw, 230px) * 0.99);
  width: min(46vw, 480px); height: 80px; transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(198, 243, 106, 0.35), rgba(198, 243, 106, 0.06) 60%, transparent);
  filter: blur(6px);
  transition: background 0.8s var(--ease), top 1.2s var(--ease) 0.4s;
}
/* after the flip the lowest point is the bowl of the b, not the stem of the P */
.hero.is-burnt .hero__ground {
  top: calc(46% + clamp(130px, 15vw, 230px) * 0.5);
  background: radial-gradient(closest-side, rgba(255, 122, 47, 0.4), rgba(255, 122, 47, 0.06) 60%, transparent);
}
.hero__finale {
  position: absolute; left: 0; right: 0; bottom: 5%; z-index: 3;
  text-align: center; padding: 0 var(--gutter);
  opacity: 0; transform: translateY(14px);
  transition: opacity 0.9s var(--ease) 0.9s, transform 0.9s var(--ease) 0.9s;
}
.hero.is-burnt .hero__finale { opacity: 1; transform: none; }
.hero__tagline { margin: 0; font-weight: 500; font-size: clamp(18px, 2vw, 28px); letter-spacing: -0.01em; }
.hero__ticker {
  margin: 14px 0 0;
  font-family: var(--f-display); font-weight: 700;
  font-size: clamp(22px, 2.4vw, 34px); letter-spacing: 0.08em;
  color: var(--ember); text-shadow: 0 0 24px var(--ember-glow);
}
.hero__cta { justify-content: center; margin-top: 26px; }
.hero__top { position: absolute; left: 0; right: 0; top: 0; z-index: 4; }
.hero__side { position: absolute; right: var(--gutter); bottom: 12%; z-index: 4; }

/* the coin: CSS 3D flip used as a preview and as the no-WebGL fallback */
.coin-stage { perspective: 1400px; width: clamp(130px, 15vw, 230px); }
.coin {
  position: relative; aspect-ratio: 180 / 358;
  transform-style: preserve-3d;
  transition: transform 1.6s cubic-bezier(0.25, 0.9, 0.3, 1.12);
}
.hero.is-burnt .coin { transform: rotateX(540deg); }
.coin__face { position: absolute; inset: 0; -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.coin__face--back { transform: rotateX(180deg); }
.coin__face svg { width: 100%; height: 100%; overflow: visible; }
/* the back is the coal b rendered from the 3D scene (assets/coal-b.webp): it overhangs the box by the
   bevel and its glow, placed where the scene draws its own b (margin-top in % counts the box's width) */
.coin__coal { position: absolute; left: -14.6%; top: 0; width: 129.2%; max-width: none; height: auto; margin-top: -13.7%; pointer-events: none; user-select: none; }
.crack { animation: smoulder 2.6s ease-in-out infinite; }
.crack:nth-child(2n) { animation-delay: -1.3s; }
.crack:nth-child(3n) { animation-delay: -0.6s; animation-duration: 3.4s; }
@keyframes smoulder { 0%, 100% { opacity: 0.55; } 50% { opacity: 1; } }

/* ============================================================ site and deck sections */

/* ------------------------------------------------------------ page background: ember glow and sparks */
/* A fixed layer behind everything (a child of body): the ember glow at the bottom of the screen and
   a canvas of bonfire sparks. BonsUI.ambient sets the opacity of both; the hero draws its own sparks. */
.ambient { position: fixed; left: 0; right: 0; bottom: 0; z-index: -1; height: 100vh; pointer-events: none; }
.ambient__glow, .ambient__glow::after, .ambient__sparks { position: absolute; inset: 0; }
.ambient__glow {
  background: radial-gradient(60% 45% at 50% 100%, var(--glow-ember), transparent 70%);
  opacity: 0; transition: opacity 1.2s var(--ease);
}
.ambient__glow::after {
  content: "";
  background: radial-gradient(34% 22% at 50% 100%, var(--glow-core), transparent 70%);
  animation: glow-breathe 7s ease-in-out infinite;
}
.ambient__sparks { width: 100%; height: 100%; opacity: 0; }
@keyframes glow-breathe { 0%, 100% { opacity: 0.35; } 50% { opacity: 1; } }

/* ------------------------------------------------------------ reveal on scroll */
/* Blocks rise into place once, the first time they come into view (BonsUI.reveal). Only when the
   page head sets html.reveal-on: with JS, without "reduce motion" and without ?t=. */
.reveal-on .reveal {
  opacity: 0; transform: translateY(26px);
  transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
  transition-delay: var(--reveal-delay, 0s);
}
.reveal-on .reveal.is-in { opacity: 1; transform: none; }
@media print { .reveal-on .reveal { opacity: 1; transform: none; } }

/* ------------------------------------------------------------ fixed nav: clear over the hero, glass below */
.site-nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  border-bottom: 1px solid transparent;
  transition: background 0.3s var(--ease), border-color 0.3s var(--ease);
}
.site-nav.is-solid, .site-nav.is-open {
  background: rgba(5, 6, 6, 0.74);
  -webkit-backdrop-filter: blur(var(--blur)) saturate(140%);
  backdrop-filter: blur(var(--blur)) saturate(140%);
  border-bottom-color: var(--line);
}
.nav__menu {
  display: none; place-items: center; width: 44px; height: 44px; margin-right: -10px;
  border: 0; background: none; cursor: pointer;
}
.nav__menu i { grid-area: 1 / 1; width: 20px; height: 1.5px; background: var(--ink); transition: transform 0.3s var(--ease); }
.nav__menu i:first-child { transform: translateY(-4px); }
.nav__menu i:last-child { transform: translateY(4px); }
.is-open .nav__menu i:first-child { transform: rotate(45deg); }
.is-open .nav__menu i:last-child { transform: rotate(-45deg); }
.menu-sheet { padding: 4px var(--gutter) 22px; border-top: 1px solid var(--line); }
.menu-sheet > a {
  display: block; padding: 14px 0; border-bottom: 1px solid var(--line);
  font-size: 20px; font-weight: 600; color: var(--ink);
}
.menu-sheet > a:hover { text-decoration: none; color: var(--lime); }
.menu-sheet .row { margin-top: 18px; }
/* the hero's own top row sits under the fixed nav */
.hero__top--offset { padding-top: 84px; }

/* ------------------------------------------------------------ section heads */
.section-head--split {
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  align-items: end; column-gap: clamp(32px, 5vw, 80px);
}
.section-head--split > :first-child { display: grid; gap: 22px; }
.section-head--row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 22px 40px; }
.section-head--row > :first-child { display: grid; gap: 22px; }
.display--sm { font-size: clamp(22px, 2.7vw, 38px); line-height: 1.06; }
.display .dim, .display--sm .dim { color: var(--dim); }
.sub { margin-top: clamp(64px, 8vw, 112px); }
.source { margin: 20px 0 0; font-size: 12.5px; color: var(--muted); }
.source a { color: var(--muted); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--line-hi); }
.source a:hover { color: var(--ink); }
.note { max-width: 70ch; margin: 28px 0 0; font-size: 14.5px; line-height: 1.6; color: var(--muted); }
.note b { color: var(--ink); font-weight: 600; }
.note a { color: var(--muted); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--line-hi); }
.note a:hover { color: var(--ink); }
.mt { margin-top: clamp(40px, 5vw, 64px); }

/* ------------------------------------------------------------ who wins, who loses */
.roles { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line-hi); }
.roles li {
  display: grid; grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.5fr) 44px;
  gap: 8px 28px; align-items: baseline;
  padding: 22px 0; border-bottom: 1px solid var(--line-hi);
}
.roles__who { font-weight: 700; font-size: 18px; line-height: 1.3; }
.roles__how { color: var(--muted); }
.roles__sign { justify-self: end; font-family: var(--f-display); font-size: 30px; line-height: 1; color: var(--ember); }
.roles li.is-buyer { padding-left: 12px; padding-right: 12px; margin: 0 -12px; border-radius: var(--r-inner); background: var(--card); border-bottom-color: transparent; }
.roles li.is-buyer .roles__sign { color: var(--ink); }

/* ------------------------------------------------------------ glass step cards */
.card--glass {
  background: linear-gradient(var(--glass), var(--glass)), var(--glass-base); border-color: var(--glass-line);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.card__num--lime { color: var(--lime); }
.cards--4 { --cols: 4; }
.card--short { min-height: 0; gap: 22px; }
.card--short .card__text { font-size: 16.5px; line-height: 1.5; color: var(--ink); }

/* ------------------------------------------------------------ rules: accordion with a side card */
.rules { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.rules__side { position: sticky; top: 104px; display: grid; gap: 22px; }
/* the side column is narrow: a smaller size keeps long words («похоронить») inside it */
.rules__side .display:not(.display--sm) { font-size: clamp(30px, 3.6vw, 52px); }
.rules__side .muted { margin: 0; }

/* why the square root: weight bars */
.sqrt { display: grid; gap: 14px; }
.sqrt__row { display: grid; grid-template-columns: 64px minmax(0, 1fr) 44px; gap: 14px; align-items: center; font-family: var(--f-mono); font-size: 13.5px; }
.sqrt__row span:last-child { text-align: right; color: var(--lime); }
.sqrt__bar { height: 8px; border-radius: 99px; background: var(--line); }
.sqrt__bar i { display: block; height: 100%; width: calc(var(--v) * 100%); min-width: 8px; border-radius: inherit; background: var(--lime); box-shadow: 0 0 14px var(--lime-glow); }
.sqrt p { margin: 8px 0 0; font-size: 14px; line-height: 1.55; color: var(--muted); }

/* ------------------------------------------------------------ product: concept screens */
.screens { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.screen { display: flex; flex-direction: column; margin: 0; overflow: hidden; }
.screen__bar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 20px; border-bottom: 1px solid var(--glass-line);
  font-size: 11.5px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted);
}
.screen__bar .n { font-family: var(--f-mono); font-weight: 500; letter-spacing: 0; color: var(--faint); }
.screen__body { flex: 1; display: grid; align-content: start; gap: 10px; padding: 20px; }
.screen figcaption { padding: 16px 20px 20px; border-top: 1px solid var(--glass-line); font-size: 14.5px; line-height: 1.55; color: var(--muted); }
.screen figcaption b { color: var(--ink); font-weight: 700; }
.screen .grave { padding: 12px 16px; gap: 14px; }
.screen .grave__icon { width: 26px; height: 30px; }
.screen .grave__coin span { color: var(--muted); }
.screen__total { display: flex; justify-content: space-between; padding: 6px 4px 0; font-family: var(--f-mono); font-size: 13px; color: var(--muted); }
.screen__total b { font-weight: 500; color: var(--lime); }

.form { display: grid; gap: 0; border-top: 1px solid var(--line); }
.form__row { display: flex; justify-content: space-between; gap: 16px; padding: 11px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.form__row span { color: var(--muted); }
.form__row b { font-family: var(--f-mono); font-weight: 500; text-align: right; }
.checks { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 0; padding: 0; list-style: none; }
.warn { display: flex; gap: 10px; margin: 4px 0 0; padding: 10px 14px; border-radius: 12px; background: var(--ember-soft); color: var(--ember); font-size: 13.5px; font-weight: 600; }
.mock-btn { pointer-events: none; justify-self: start; }

.claim { display: grid; gap: 6px; }
.claim__amt { font-family: var(--f-display); font-weight: 500; font-size: clamp(30px, 3vw, 40px); line-height: 1.1; letter-spacing: -0.03em; }
.claim__amt small { font-size: 0.45em; letter-spacing: 0; color: var(--muted); }
.claim__meter { height: 6px; margin: 12px 0 4px; border-radius: 99px; background: var(--line); }
.claim__meter i { display: block; width: calc(var(--v) * 100%); height: 100%; border-radius: inherit; background: var(--ink); }
.claim__meta { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; color: var(--muted); }
.claim__past { display: grid; margin-top: 10px; border-top: 1px solid var(--line); }
.claim__past div { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--line); font-family: var(--f-mono); font-size: 12.5px; color: var(--muted); }
.claim__past b { font-weight: 500; color: var(--ink); }

/* ------------------------------------------------------------ tombstone: the glass slab */
.slab {
  position: relative; isolation: isolate;
  display: grid; justify-items: center; align-content: start; gap: 6px;
  width: 100%; max-width: 360px; margin: 0 auto;
  padding: 58px 28px 40px; text-align: center;
  border-radius: 50% 50% 22px 22px / 130px 130px 22px 22px;
  background:
    radial-gradient(120% 60% at 30% 0%, rgba(255, 255, 255, 0.16), transparent 60%),
    linear-gradient(180deg, rgba(236, 239, 237, 0.10) 0%, rgba(236, 239, 237, 0.035) 55%, rgba(20, 12, 8, 0.6) 100%);
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), inset 0 -30px 40px -20px rgba(255, 122, 47, 0.28), 0 30px 80px -30px rgba(0, 0, 0, 0.8);
  overflow: hidden;
}
/* scorched bottom edge with a thin line of embers */
.slab::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 26px; z-index: -1;
  background:
    radial-gradient(4px 3px at 18% 70%, var(--ember-hot), transparent),
    radial-gradient(3px 2px at 43% 80%, var(--ember), transparent),
    radial-gradient(5px 3px at 71% 65%, var(--ember-hot), transparent),
    radial-gradient(3px 2px at 88% 78%, var(--ember), transparent),
    linear-gradient(180deg, transparent, rgba(255, 122, 47, 0.35) 70%, rgba(255, 150, 60, 0.7));
  filter: blur(0.4px);
}
.slab__rip { font-family: var(--f-display); font-weight: 600; font-size: 13px; letter-spacing: 0.4em; color: var(--muted); }
.slab__ticker {
  margin: 4px 0 2px; font-family: var(--f-display); font-weight: 700; font-size: clamp(28px, 3vw, 40px); line-height: 1.05;
  letter-spacing: -0.01em; color: #DCE2DF;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.18), 0 -1px 0 rgba(0, 0, 0, 0.7);
}
.slab__dates { font-family: var(--f-mono); font-size: 13px; color: var(--muted); }
.slab__lived { font-size: 14px; font-weight: 600; color: var(--ink); }
.slab__epitaph { max-width: 26ch; margin: 8px 0 4px; font-style: italic; font-size: 14px; line-height: 1.45; color: var(--muted); }
.slab__rule { width: 48px; height: 1px; margin: 10px 0 6px; background: rgba(255, 255, 255, 0.18); }
.slab__kv { display: flex; gap: 22px; font-family: var(--f-mono); font-size: 13px; }
.slab__kv small { display: block; font-family: var(--f-text); font-size: 10px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }
.slab__kv b { font-weight: 500; }
.slab__by { margin-top: 10px; font-family: var(--f-mono); font-size: 11.5px; color: var(--muted); }
.slab--mini { max-width: 250px; padding: 46px 20px 30px; border-radius: 50% 50% 18px 18px / 96px 96px 18px 18px; }
.slab--mini .slab__ticker { font-size: 26px; }

/* ------------------------------------------------------------ anti-rug: anatomy of a bundle */
/* head and steps on the left, the figure on the right; on phones: head, figure, steps */
.bundle {
  display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); grid-template-rows: auto 1fr;
  column-gap: clamp(32px, 5vw, 72px); row-gap: 22px;
}
.bundle__head { grid-column: 1; grid-row: 1; }
.bundle__text { grid-column: 1; grid-row: 2; }
.bundle__fig { grid-column: 2; grid-row: 1 / 3; align-self: center; margin: 0; }
.bundle__steps { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.bundle__steps button {
  display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 10px; width: 100%;
  padding: 12px 14px 12px 12px; border: 0; border-left: 2px solid var(--line-hi); border-radius: 0 12px 12px 0;
  background: none; text-align: left; cursor: pointer;
  font-size: 15px; line-height: 1.5; color: var(--muted);
  transition: color 0.3s var(--ease), background 0.3s var(--ease), border-color 0.3s var(--ease);
}
.bundle__steps button:hover { color: var(--ink); }
.bundle__steps .n { padding-top: 2px; font-family: var(--f-mono); font-size: 12.5px; color: var(--faint); }
.bundle__steps b { color: var(--ink); font-weight: 700; }
.bundle__steps button.is-on { color: var(--ink); background: var(--ember-soft); border-left-color: var(--ember); }
.bundle__steps button.is-on .n { color: var(--ember); }
.bundle__verdict {
  margin-top: 18px; padding: 18px 20px; border-radius: var(--r-inner);
  border: 1px solid rgba(255, 122, 47, 0.3); background: var(--ember-soft);
  font-size: 15px; line-height: 1.55; color: var(--muted);
  opacity: 0.4; transition: opacity 0.6s var(--ease);
}
.bundle__verdict b { color: var(--ember); }
.bundle__verdict strong { color: var(--ink); font-weight: 700; }
.bundle.s6 .bundle__verdict { opacity: 1; }
.bundle__replay { margin-top: 14px; }
.bundle__fig svg { display: block; width: 100%; height: auto; overflow: visible; }
.bundle__fig text { font-family: var(--f-text); font-weight: 700; font-size: 19px; fill: var(--muted); }
.bundle__fig .t-ember { fill: var(--ember); }
.bundle__fig .t-lime { fill: var(--lime); }
.bundle__fig .t-ink { fill: var(--ink); }
.bundle__fig .t-mono { font-family: var(--f-mono); font-weight: 500; }
.bn-pill { fill: var(--bg); stroke-width: 1.5; }
.bn-pill--ember { stroke: rgba(255, 122, 47, 0.6); }
.bn-pill--lime { stroke: rgba(198, 243, 106, 0.6); }
.bn-edge { fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-dasharray: 3 9; }
.g-fund .bn-edge, .g-trade .bn-edge, .g-out .bn-edge { stroke: var(--ember); }
.g-bait .bn-edge { stroke: var(--lime); }
.bn-wallet { fill: var(--bg); stroke: var(--ember); stroke-width: 2; }
.bn-core { fill: var(--ember); }
.bn-w { fill: var(--bg); stroke: var(--ember); stroke-width: 1.8; }
.bn-coin { fill: var(--card); stroke: var(--ink); stroke-width: 1.5; transition: stroke 0.6s var(--ease); }
.bn-buyer { fill: var(--lime); transition: fill 0.6s var(--ease), opacity 0.6s var(--ease); }
.bn-ring { fill: none; stroke: var(--lime); stroke-width: 1.5; opacity: 0; transition: opacity 0.6s var(--ease); }
.bn-rise { fill: none; stroke: var(--ink); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.bn-crash { fill: none; stroke: var(--ember); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.bn-base { stroke: var(--line-hi); stroke-width: 1; }
.bn-cluster { fill: rgba(255, 122, 47, 0.05); stroke: var(--ember); stroke-width: 1.8; stroke-dasharray: 7 7; }
/* every group appears at its step; the edges of earlier steps fade back */
.bundle .bn-g { opacity: 0; transition: opacity 0.7s var(--ease); }
.bundle.s1 .g-src, .bundle.s1 .g-w, .bundle.s1 .g-fund { opacity: 1; }
.bundle.s2 .g-coin, .bundle.s2 .g-trade { opacity: 1; }
.bundle.s3 .g-buyers, .bundle.s3 .g-bait, .bundle.s3 .g-rise { opacity: 1; }
.bundle.s4 .g-crash { opacity: 1; }
.bundle.s5 .g-exit, .bundle.s5 .g-out { opacity: 1; }
.bundle.s6 .g-cluster { opacity: 1; }
.bundle.s2 .g-fund, .bundle.s3 .g-trade, .bundle.s5 .g-bait { opacity: 0.25; }
.bundle[data-step="4"] .g-trade { opacity: 1; }
.bundle[data-step="4"] .g-bait { opacity: 0.6; }
.bundle.s6 .g-fund, .bundle.s6 .g-trade, .bundle.s6 .g-out { opacity: 0.45; }
.bundle .g-tax { opacity: 0; transition: opacity 0.5s var(--ease); }
.bundle[data-step="2"] .g-tax { opacity: 1; }
.bundle.s4 .bn-coin { stroke: var(--ember); }
.bundle.s4 .bn-buyer { fill: var(--faint); }
.bundle.s6 .bn-buyer { fill: var(--lime); }
.bundle.s6 .bn-ring { opacity: 1; }
/* the current step's money flows along its edges */
.bundle[data-step="1"] .g-fund .bn-edge,
.bundle[data-step="2"] .g-trade .bn-edge,
.bundle[data-step="3"] .g-bait .bn-edge,
.bundle[data-step="5"] .g-out .bn-edge { animation: bn-flow 0.8s linear infinite; }
.bundle[data-step="4"] .g-trade .bn-edge { animation: bn-flow 0.8s linear infinite reverse; }
@keyframes bn-flow { to { stroke-dashoffset: -12; } }

/* anti-rug rules: × for what excludes, ✓ for what keeps it honest */
.xrules { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 32px; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line-hi); }
.xrules li { padding: 22px 0; border-bottom: 1px solid var(--line-hi); }
.xrules b { display: flex; gap: 10px; font-size: 17px; line-height: 1.35; }
.xrules b::before { content: "×"; flex: none; font-family: var(--f-mono); font-weight: 500; color: var(--ember); }
.xrules li.ok b::before { content: "✓"; color: var(--lime); }
.xrules p { margin: 8px 0 0 calc(1ch + 10px); font-size: 15px; line-height: 1.5; color: var(--muted); }

/* long tables fold away */
.more { margin-top: 28px; border-top: 1px solid var(--line-hi); border-bottom: 1px solid var(--line-hi); }
.more summary {
  display: flex; align-items: center; gap: 14px; padding: 20px 0; cursor: pointer; list-style: none;
  font-weight: 700; font-size: 16px;
}
.more summary::-webkit-details-marker { display: none; }
.more summary::before { content: "+"; display: inline-grid; place-items: center; width: 28px; height: 28px; border: 1px solid var(--line-hi); border-radius: 50%; font-family: var(--f-mono); font-weight: 500; color: var(--muted); }
.more[open] summary::before { content: "−"; }
.more > .table-wrap { padding: 4px 0 24px; }

/* a table that becomes label: value rows on phones (labels in data-en / data-ru) */
.table--stack td:first-child { font-weight: 600; }

/* ------------------------------------------------------------ fair launch ledger in glass */
.ledger--wide .ld { padding: 3px 0; }
.ledger--wide .ld__note { margin: -4px 0 6px; padding-left: 0; font-family: var(--f-text); font-size: 13.5px; line-height: 1.5; }

/* ------------------------------------------------------------ money: formula */
.formula { font-family: var(--f-mono); font-size: 14.5px; line-height: 1.5; }
.formula div { display: grid; grid-template-columns: 11ch minmax(0, 1fr); gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.formula div:last-child { border-bottom: 0; }
.formula span { color: var(--muted); }
.formula b { font-weight: 500; }
.flow__head { display: flex; justify-content: space-between; gap: 16px; margin-bottom: 4px; font-size: 13px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.promise { margin: 36px 0 0; max-width: 34ch; font-weight: 500; font-size: var(--fs-statement); line-height: 1.12; letter-spacing: -0.02em; }
.promise .dim { color: var(--dim); }

/* ------------------------------------------------------------ roadmap: rows with a go / no-go gate */
.road { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line-hi); }
.road li {
  display: grid; grid-template-columns: 64px minmax(0, 0.8fr) minmax(0, 1.5fr) minmax(0, 0.9fr);
  gap: 10px 28px; align-items: start; padding: 26px 0; border-bottom: 1px solid var(--line-hi);
}
.road__num { position: relative; padding: 1px 0 0 24px; font-family: var(--f-mono); font-size: 13px; color: var(--muted); }
.road__num::before {
  content: ""; position: absolute; left: 0; top: 4px; width: 12px; height: 12px; border-radius: 50%;
  border: 2px solid var(--faint); background: var(--bg);
}
.road li.done .road__num::before { background: var(--lime); border-color: var(--lime); }
.road li.next .road__num::before { border-color: var(--lime); box-shadow: 0 0 0 5px var(--lime-soft); }
.road__name { font-weight: 700; font-size: 18px; line-height: 1.3; }
.road__when { display: block; margin-top: 4px; font-size: 13.5px; font-weight: 500; color: var(--muted); }
.road__what { font-size: 15px; line-height: 1.55; color: var(--muted); }
.road__done { font-size: 14.5px; line-height: 1.5; }
.road__done small { display: block; margin-bottom: 4px; font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.road__done .chip { margin-top: 2px; }
.callout { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 18px 24px; align-items: start; justify-items: start; }
.callout p { margin: 0; font-size: 16px; line-height: 1.6; color: var(--muted); }
.callout p b { color: var(--ink); }

/* ------------------------------------------------------------ what we need */
.needs .card { min-height: 0; gap: 10px; }
.needs .card__title { margin-top: 0; }
.cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin-top: 36px; }

/* ------------------------------------------------------------ form fields */
.field { display: grid; gap: 8px; min-width: 0; }
.field > label { font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.field > label small { margin-left: 4px; font-size: 11.5px; font-weight: 600; letter-spacing: 0.02em; text-transform: none; color: var(--faint); }
.field-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.field__hint { margin: 0; font-size: 13px; line-height: 1.45; color: var(--muted); }
.input {
  display: block; width: 100%; min-width: 0; min-height: 50px; margin: 0; padding: 0 16px;
  border: 1px solid var(--line-hi); border-radius: 14px;
  background: var(--surface); color: var(--ink);
  font: 500 16px/1.2 var(--f-text);   /* 16px: phones don't zoom in on focus */
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.input:hover { border-color: rgba(236, 239, 237, 0.26); }
.input:focus, .input--affix:focus-within { outline: none; border-color: var(--lime); box-shadow: 0 0 0 4px var(--lime-soft); }
.input[aria-invalid="true"] { border-color: var(--ember); }
.input::placeholder, .input input::placeholder { color: var(--faint); opacity: 1; }
.input--mono, input[type="date"].input { font-family: var(--f-mono); font-size: 15px; }
/* an input with a fixed sign in front of it, like $ before a ticker */
.input--affix { display: flex; align-items: center; gap: 2px; }
.input--affix > span { font-family: var(--f-display); font-weight: 600; font-size: 17px; color: var(--muted); }
.input--affix input {
  flex: 1; min-width: 0; height: 48px; padding: 0; border: 0; outline: none;
  background: none; color: inherit; font: 600 17px/1 var(--f-display); letter-spacing: 0.02em; text-transform: uppercase;
}
.select { position: relative; }
.select .input { appearance: none; -webkit-appearance: none; padding-right: 44px; cursor: pointer; }
.select::after {
  content: ""; position: absolute; right: 19px; top: 50%; width: 8px; height: 8px; margin-top: -6px; pointer-events: none;
  border-right: 1.5px solid var(--muted); border-bottom: 1.5px solid var(--muted); transform: rotate(45deg);
}
.select option { background: var(--card); color: var(--ink); }

/* ------------------------------------------------------------ tombstone generator */
/* the form on the left, the card on the right; on phones the card comes first */
.tomb {
  display: grid; grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.28fr);
  grid-template-areas: "form view" "form actions"; grid-template-rows: auto 1fr;
  gap: 24px clamp(32px, 4vw, 64px); align-items: start;
}
.tomb__form { grid-area: form; display: grid; gap: 18px; }
.tomb__view { grid-area: view; perspective: 1400px; }
.tomb__actions { grid-area: actions; display: grid; gap: 14px; align-content: start; }
.tomb__actions .note { margin: 4px 0 0; }
/* the card leans toward the pointer (bons-tomb.js sets --rx, --ry and the glare position) */
.tomb__card {
  position: relative; aspect-ratio: 1200 / 675; overflow: hidden; border-radius: 18px;
  box-shadow: 0 0 0 1px var(--line-hi), 0 40px 90px -40px rgba(0, 0, 0, 0.9);
  transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform 0.6s var(--ease);
}
.tomb__card.is-tilt { transition-duration: 0.12s; }
.tomb__canvas { display: block; width: 100%; height: 100%; }
.tomb__glare {
  position: absolute; inset: 0; pointer-events: none; opacity: 0; mix-blend-mode: screen;
  background: radial-gradient(circle at var(--gx, 50%) var(--gy, 30%), rgba(255, 255, 255, 0.2), transparent 42%);
  transition: opacity 0.4s var(--ease);
}
.tomb__card.is-tilt .tomb__glare { opacity: 1; }
.tomb__hint { margin: 0; font-size: 13.5px; color: var(--muted); }
.tomb__err { margin: 0; font-size: 14px; font-weight: 600; color: var(--ember); }
.tomb__err:empty { display: none; }
/* phones share the image straight to X, nothing is downloaded */
@media (pointer: coarse) { .tomb__hint { display: none; } }

/* ------------------------------------------------------------ terminal easter egg */
/* the old terminal look survives only here: ~ or the footer link opens it (BonsUI.terminal) */
.term {
  position: fixed; left: 50%; bottom: 16px; z-index: 70;
  display: grid; grid-template-rows: auto minmax(0, 1fr) auto;
  width: min(760px, calc(100% - 24px)); height: min(460px, 62vh);
  transform: translateX(-50%);
  background: rgba(7, 9, 9, 0.96); border: 1px solid var(--line-hi); border-radius: 16px;
  box-shadow: 0 30px 90px -20px rgba(0, 0, 0, 0.85), 0 0 60px -30px var(--ember-glow);
  font-family: var(--f-mono); font-size: 13.5px; line-height: 1.6; color: var(--ink);
}
.term[hidden] { display: none; }
.term__bar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 6px 6px 6px 18px; border-bottom: 1px solid var(--line); font-size: 12px; color: var(--muted);
}
.term__close { display: grid; place-items: center; width: 36px; height: 36px; border: 0; border-radius: 10px; background: none; color: var(--muted); font-size: 20px; line-height: 1; cursor: pointer; }
.term__close:hover { background: var(--glass-hi); color: var(--ink); }
.term__log { overflow-y: auto; padding: 14px 18px 4px; white-space: pre-wrap; overflow-wrap: anywhere; }
.term__log .dim { color: var(--muted); }
.term__log .no { color: var(--ember); }
.term__ps1 { flex: none; color: var(--lime); }
.term__line { display: flex; align-items: center; gap: 8px; padding: 10px 18px 14px; }
.term__line input { flex: 1; min-width: 0; padding: 4px 0; border: 0; outline: none; background: none; color: var(--ink); font: inherit; caret-color: var(--lime); }
.footer .term-link { font-family: var(--f-mono); }

/* ------------------------------------------------------------ footer extras */
.footer h4 { margin: 0 0 12px; font-size: 11.5px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink); }
.footer ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.footer__tag { margin: 14px 0 0; font-family: var(--f-display); font-weight: 500; font-size: 15px; color: var(--ink); }

/* ============================================================ deck (deck.html) */
/* 1600×900 slides, each a rounded dark card (Glasshaven). On a screen one slide shows at a time and
   the stage is scaled as a whole, so sizes inside a slide are fixed pixels. On a phone
   (html.scrollmode, set by the deck) the slides reflow into cards you scroll. Printing gives one
   slide per 16:9 page. */
.deck-page, .deck-page body { height: 100%; }
.deck-page body { overflow: hidden; }
.deck { position: fixed; left: 0; right: 0; top: 0; bottom: 64px; }
.deck__stage { position: absolute; left: 50%; top: 50%; width: 1600px; height: 900px; transform: translate(-50%, -50%); }
.slide {
  position: absolute; inset: 0; z-index: 0; overflow: hidden; isolation: isolate;
  display: flex; flex-direction: column;
  padding: 64px 96px 52px;
  border: 1px solid var(--line); border-radius: 32px;
  background: radial-gradient(90% 70% at 10% 0%, rgba(236, 239, 237, 0.035), transparent 60%), var(--surface);
  opacity: 0; visibility: hidden;
  transition: opacity 0.45s var(--ease), visibility 0s linear 0.45s;
}
.slide.is-on { opacity: 1; visibility: visible; transition-delay: 0s; }
/* a faint ember glow along the bottom of every card, as on the site */
.slide::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(55% 32% at 50% 100%, var(--glow-ember), transparent 70%);
}
.slide__head { display: flex; align-items: center; gap: 28px; min-height: 30px; }
.slide__foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; margin-top: auto; padding-top: 24px; }
/* the brand sits in the head of every slide but the title, so the PNGs for X carry it too */
.slide__head .eyebrow { margin-right: auto; }
.slide__brand { font-size: 17px; }
.slide__brand svg { width: 14px; }
.slide__num { flex: none; white-space: nowrap; font-family: var(--f-mono); font-size: 14px; letter-spacing: 0.04em; color: var(--muted); }
.slide__num b { font-weight: 500; color: var(--ink); }
.slide .source { margin: 0; }

/* slides mode: the site's components at fixed sizes for the 1600 px stage */
html:not(.scrollmode) .slide {
  --fs-mega: 300px; --fs-h1: 104px; --fs-h2: 76px; --fs-h3: 26px; --fs-statement: 60px; --fs-lead: 23px;
  --fs-small: 17px; --fs-micro: 14px;
  font-size: 19px;
}
html:not(.scrollmode) .slide .eyebrow { font-size: 14px; }
html:not(.scrollmode) .slide .source { font-size: 15px; }
html:not(.scrollmode) .slide .stats { gap: 48px; }
html:not(.scrollmode) .slide .stat { padding-top: 28px; }
html:not(.scrollmode) .slide .stat__num { font-size: 92px; }
html:not(.scrollmode) .slide .stat__num small { font-size: 0.36em; }
html:not(.scrollmode) .slide .stat__cap { margin-top: 18px; font-size: 19px; max-width: 18em; }
html:not(.scrollmode) .slide .cards { gap: 20px; }
html:not(.scrollmode) .slide .card { min-height: 300px; padding: 34px; gap: 18px; }
html:not(.scrollmode) .slide .card__num { font-size: 56px; }
html:not(.scrollmode) .slide .card__title { font-size: 15px; }
html:not(.scrollmode) .slide .card__text { font-size: 19px; }
html:not(.scrollmode) .slide .btn { min-height: 54px; padding: 0 26px; font-size: 17px; }

/* the title: the site's hero, framed in the card */
.slide--title { padding: 0; }
.hero--deck { position: absolute; inset: 0; min-height: 0; }
html:not(.scrollmode) .hero--deck .hero__top { padding: 48px 64px 0; }
html:not(.scrollmode) .hero--deck .hero__word { top: 19%; }
html:not(.scrollmode) .hero--deck .hero__word .wordmark { font-size: 300px; }
html:not(.scrollmode) .hero--deck .coin-stage { top: 46%; width: 230px; }
html:not(.scrollmode) .hero--deck .hero__ground { top: calc(46% + 230px * 0.99); width: 480px; }
html:not(.scrollmode) .hero.hero--deck.is-burnt .hero__ground { top: calc(46% + 230px * 0.5); }
html:not(.scrollmode) .hero--deck .hero__tagline { font-size: 30px; }
html:not(.scrollmode) .hero--deck .hero__desc { font-size: 18px; }
html:not(.scrollmode) .hero--deck .hero__ticker { font-size: 36px; }
.hero--deck .hero__hint { margin: 22px 0 0; font-size: 14px; color: var(--faint); }

/* the problem */
.slide--problem .statement { max-width: 25ch; margin-top: 44px; }
.slide--problem .stats { margin-top: auto; }
.slide--problem .slide__foot { margin-top: 64px; }

/* the anatomy of a bundle: steps on the left, the figure on the right */
.slide--bundle > .display { margin-top: 18px; }
.bundle__label { margin: 0; font-size: 14px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }
html:not(.scrollmode) .slide--bundle .bundle { flex: 1; min-height: 0; margin-top: 20px; grid-template-columns: minmax(0, 1fr) 470px; column-gap: 80px; row-gap: 16px; }
html:not(.scrollmode) .slide--bundle .bundle__fig { align-self: center; }
html:not(.scrollmode) .slide--bundle .bundle__fig svg { width: 470px; height: auto; }
html:not(.scrollmode) .slide--bundle .bundle__steps button { padding: 9px 16px 9px 14px; font-size: 17.5px; grid-template-columns: 40px minmax(0, 1fr); }
html:not(.scrollmode) .slide--bundle .bundle__steps .n { font-size: 14px; }
html:not(.scrollmode) .slide--bundle .bundle__verdict { margin-top: 14px; padding: 18px 22px; font-size: 17.5px; }

/* the solution: three steps */
.slide--solution .display { margin-top: 24px; }
.slide--solution .cards { margin-top: 40px; }
.card__note { margin: 0; font-size: 14px; line-height: 1.5; color: var(--muted); }
.slide .statement--sm { max-width: 56ch; font-size: 34px; line-height: 1.2; }
html:not(.scrollmode) .slide .card__note { font-size: 16px; }

/* two columns inside a slide */
.slide__split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 72px; align-items: start; margin-top: 26px; }
.slide__col { display: grid; gap: 26px; align-content: start; }
.slide__col .lead, .slide__col .muted { margin: 0; }
html:not(.scrollmode) .slide .ledger { font-size: 18px; }
html:not(.scrollmode) .slide .glass__pad { padding: 34px 38px; }
html:not(.scrollmode) .slide .display--sm { font-size: 38px; }
html:not(.scrollmode) .slide__col > .display { font-size: 64px; }
html:not(.scrollmode) .slide--fair .slide__split { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); }
html:not(.scrollmode) .slide--fair .slide__split { margin: auto 0; align-items: center; }

/* money: the fee bars, then honest numbers */
.slide--money .flow__head { margin-top: 22px; }
.slide__split--money { margin-top: 24px; gap: 64px; align-items: end; }
html:not(.scrollmode) .slide--money .display { font-size: 64px; }
html:not(.scrollmode) .slide .flow__head { font-size: 14px; }
html:not(.scrollmode) .slide .seg b { font-size: 34px; }
html:not(.scrollmode) .slide .seg { padding: 14px 16px; gap: 8px; }
html:not(.scrollmode) .slide .seg > span { line-height: 1.3; }
html:not(.scrollmode) .slide .seg > span { font-size: 15px; }
html:not(.scrollmode) .slide .table { font-size: 18px; }
html:not(.scrollmode) .slide .table th { padding-bottom: 12px; font-size: 13px; }
html:not(.scrollmode) .slide .table td { padding: 8px 18px 8px 0; }
html:not(.scrollmode) .slide .note { max-width: none; margin: 16px 0 0; font-size: 14px; }

/* the tombstone generator: the text on the left, four real cards on the right */
.tomb-show__head { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; margin-top: 22px; }
.tomb-show { flex: 1; min-height: 0; display: grid; grid-template-columns: 400px minmax(0, 1fr); gap: 64px; align-items: center; margin-top: 12px; }
.tomb-show__text { display: grid; gap: 26px; justify-items: start; }
.tomb-show__text .lead { margin: 0; }
.tomb-show__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.tomb-show__grid canvas { width: 100%; height: auto; aspect-ratio: 1200 / 675; border-radius: 14px; box-shadow: 0 0 0 1px var(--line-hi), 0 30px 60px -30px #000; }

/* why Pons wins and why now */
.points { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line-hi); }
.points li { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 12px; padding: 16px 0; border-bottom: 1px solid var(--line-hi); line-height: 1.5; }
.points__n { padding-top: 3px; font-family: var(--f-mono); font-size: 14px; color: var(--lime); }
.why .display { margin-bottom: 22px; }
.why__list { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }
.why__list li { padding-top: 14px; border-top: 1px solid var(--line); line-height: 1.5; color: var(--muted); }
.why__list li:first-child { padding-top: 0; border-top: 0; }
.why__list b { font-weight: 700; color: var(--ink); }

/* roadmap */
.slide--road .road { margin-top: 24px; }
.slide--road .callout { margin-top: 16px; }
html:not(.scrollmode) .slide--road .display { font-size: 64px; }
html:not(.scrollmode) .slide .road__name { font-size: 19px; }
html:not(.scrollmode) .slide .road__when { font-size: 15px; }
html:not(.scrollmode) .slide .road__what { font-size: 16px; line-height: 1.45; }
html:not(.scrollmode) .slide .road__done { font-size: 15px; }
html:not(.scrollmode) .slide .callout { padding: 22px 28px; }
html:not(.scrollmode) .slide .callout p { font-size: 17px; }

/* what we need */
.slide--join .display { margin-top: 22px; }
.slide__founder { margin: 18px 0 0; font-size: 17px; line-height: 1.5; color: var(--muted); }
.slide__founder b { color: var(--ink); }
.slide--join .cards { margin-top: 34px; }
.slide--join .cta-row { margin-top: 28px; }
html:not(.scrollmode) .slide--join .disclaimer { max-width: none; margin: 0; font-size: 14px; }

/* the stage keeps its layout at any window width: the site's rules for narrow screens are for pages */
html:not(.scrollmode) .slide .cards { grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); }
html:not(.scrollmode) .slide .stats { grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr)); }
html:not(.scrollmode) .slide .flow__row { flex-direction: row; min-height: 96px; }
html:not(.scrollmode) .slide .flow__row--sub { margin-left: calc(30% + 4px); }
html:not(.scrollmode) .slide .road li { grid-template-columns: 56px minmax(0, 0.75fr) minmax(0, 1.6fr) minmax(0, 0.95fr); gap: 8px 28px; padding: 13px 0; }
html:not(.scrollmode) .slide .road__what, html:not(.scrollmode) .slide .road__done { grid-column: auto; }
html:not(.scrollmode) .slide .callout { grid-template-columns: auto minmax(0, 1fr); }
html:not(.scrollmode) .slide .bundle { grid-template-rows: auto 1fr; }
html:not(.scrollmode) .slide .bundle > .bundle__head { grid-column: 1; grid-row: 1; }
html:not(.scrollmode) .slide .bundle > .bundle__text { grid-column: 1; grid-row: 2; }
html:not(.scrollmode) .slide .bundle > .bundle__fig { grid-column: 2; grid-row: 1 / 3; width: auto; max-width: none; }
html:not(.scrollmode) .slide .bundle__fig text { font-size: 19px; }

/* the bar under the stage: back, where you are, forward, language, full screen */
.deck-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; height: 64px;
  display: flex; align-items: center; gap: 14px; padding: 0 24px;
}
.deck-bar .logo { margin-right: 10px; }
.deck-bar__count { min-width: 72px; font-family: var(--f-mono); font-size: 13px; text-align: center; color: var(--muted); }
.deck-bar__count b { font-weight: 500; color: var(--ink); }
.deck-bar__progress { flex: 1; height: 2px; border-radius: 2px; background: var(--line); overflow: hidden; }
.deck-bar__progress i { display: block; width: 0; height: 100%; background: var(--lime); transition: width 0.4s var(--ease); }
.deck-bar__hint { font-size: 12.5px; color: var(--faint); white-space: nowrap; }
html.scrollmode .deck-bar #pdf { display: none; }
.icon-btn {
  display: inline-grid; place-items: center; width: 40px; height: 40px; padding: 0;
  border: 1px solid var(--line-hi); border-radius: 50%; background: var(--glass);
  font-size: 17px; line-height: 1; color: var(--ink); cursor: pointer;
  transition: border-color 0.2s var(--ease), background 0.2s var(--ease);
}
.icon-btn:hover:not(:disabled) { border-color: var(--lime); }
.icon-btn:disabled { opacity: 0.35; cursor: default; }

/* phones: the slides reflow into cards, one under another */
html.scrollmode.deck-page, html.scrollmode.deck-page body { height: auto; overflow: visible; }
html.scrollmode .deck { position: static; padding: 72px 12px 24px; }
html.scrollmode .deck__stage { position: static; width: auto; height: auto; transform: none !important; display: grid; gap: 12px; }
html.scrollmode .slide {
  position: relative; inset: auto; min-height: 0; padding: 26px 20px 22px; border-radius: 22px;
  opacity: 1; visibility: visible; transition: none;
}
html.scrollmode .slide__foot { flex-direction: column-reverse; align-items: flex-start; gap: 14px; padding-top: 22px; }
html.scrollmode .slide__brand { display: none; }
html.scrollmode .slide--title { height: 86svh; min-height: 560px; padding: 0; }
html.scrollmode .hero--deck .hero__top { padding: 20px 18px 0; }
html.scrollmode .hero--deck .hero__top .chip { font-size: 12px; }
html.scrollmode .hero--deck .hero__hint { display: none; }
html.scrollmode .slide--problem .statement { margin-top: 18px; }
html.scrollmode .slide--problem .stats { --cols: 2; margin-top: 30px; row-gap: 26px; }
html.scrollmode .slide--bundle .bundle { margin-top: 10px; }
html.scrollmode .slide__split { grid-template-columns: minmax(0, 1fr); gap: 22px; margin-top: 16px; }
html.scrollmode .slide .statement--sm { font-size: 22px; }
html.scrollmode .slide--solution .cards, html.scrollmode .slide--money .flow__head { margin-top: 22px; }
html.scrollmode .tomb-show__head { margin-top: 14px; }
html.scrollmode .tomb-show { grid-template-columns: minmax(0, 1fr); gap: 22px; margin-top: 18px; }
html.scrollmode .tomb-show__grid { grid-template-columns: minmax(0, 1fr); gap: 12px; }
html.scrollmode .points li { grid-template-columns: 36px minmax(0, 1fr); padding: 14px 0; }
html.scrollmode .slide .table th { font-size: 10.5px; letter-spacing: 0.08em; }
html.scrollmode .slide .table td { padding: 12px 10px 12px 0; }
html.scrollmode .slide--road .road { margin-top: 20px; }
html.scrollmode .slide__founder { font-size: 15px; }
html.scrollmode .slide--join .cards { --cols: 1; margin-top: 24px; }
html.scrollmode .slide--join .card { min-height: 0; }
html.scrollmode .slide--join .cta-row { margin-top: 22px; }
html.scrollmode .slide--join .disclaimer { margin: 18px 0 0; }
html.scrollmode .deck-bar {
  top: 0; bottom: auto; height: 60px; padding: 0 14px;
  background: rgba(5, 6, 6, 0.72); -webkit-backdrop-filter: blur(var(--blur)); backdrop-filter: blur(var(--blur));
  border-bottom: 1px solid var(--line);
}
html.scrollmode .deck-bar .icon-btn, html.scrollmode .deck-bar__count, html.scrollmode .deck-bar__progress, html.scrollmode .deck-bar__hint { display: none; }
html.scrollmode .deck-bar .lang { margin-left: auto; }

/* ?shot=1: one slide unscaled in the top left corner, for the PNGs of an X thread */
html.shot .deck { bottom: 0; }
html.shot .deck__stage { left: 0; top: 0; transform: none; }
html.shot .deck-bar { display: none; }
html.shot .slide { border: 0; border-radius: 0; }
html.shot .hero__hint { display: none; }

/* print: every slide on its own 16:9 page, the title as its burnt b */
@media print {
  @page { size: 1600px 900px; margin: 0; }
  .deck-page, .deck-page body { height: auto; overflow: visible; background: var(--bg); }
  .deck { position: static; }
  .deck__stage { position: static; transform: none !important; width: 1600px; height: auto; }
  .slide { position: relative; width: 1600px; height: 900px; border-radius: 0; opacity: 1; visibility: visible; break-after: page; }
  .deck-bar, .ambient { display: none !important; }
  .hero--deck .hero__scene { display: none !important; }
  .hero--deck .coin-stage { display: block !important; }
  .hero__hint { display: none; }
  .deck-page * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* ============================================================ business plan (plan.html) */
/* A long document on the site's components: the cover, then the contents on the left (sticky) and
   14 chapters on the right. Up to 1180 px the contents sit above the chapters and the nav's menu
   lists them. Nothing folds away. Printing gives A4 pages: the cover without margins, the contents,
   then every chapter from a new page, with the plan's name and the page number at the bottom. */

/* nav: the document's name after the logo, links back to the site and the deck */
.nav__doc { display: inline-flex; align-items: center; gap: 12px; margin-left: -8px; font-size: var(--fs-small); font-weight: 600; color: var(--muted); white-space: nowrap; }
.nav__doc::before { content: "/"; font-weight: 400; color: var(--faint); }
.nav__link { font-size: var(--fs-small); font-weight: 600; color: var(--muted); white-space: nowrap; }
.nav__link:hover { color: var(--ink); text-decoration: none; }
.plan-page .nav__menu { display: none; }
/* the menu lists every chapter, so it scrolls on its own when it is taller than the screen */
.plan-page .menu-sheet { max-height: calc(100svh - 72px); overflow-y: auto; overscroll-behavior: contain; }
.plan-page .menu-sheet > a { display: grid; grid-template-columns: 38px minmax(0, 1fr); padding: 11px 0; font-size: 16px; line-height: 1.35; }
.menu-sheet .n, .toc .n { padding-top: 2px; font-family: var(--f-mono); font-size: 12.5px; font-weight: 500; color: var(--faint); }

/* ------------------------------------------------------------ plan: cover */
/* a still frame of the site's hero finale (BONS with the coal b in front of it), then the title card */
.cover { position: relative; isolation: isolate; padding: 112px 0 clamp(56px, 7vw, 96px); }
.cover::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(48% 36% at 50% 34%, var(--glow-ember), transparent 70%);
}
/* sizes in em of the wordmark, so the b keeps its place in front of it at any width */
.cover__art { position: relative; font-size: clamp(88px, 21vw, 290px); padding-bottom: 0.4em; text-align: center; }
.cover__art .wordmark { font-size: 1em; }
.cover__b {
  position: absolute; left: 50%; top: -0.06em; width: 0.9em; height: auto;
  transform: translateX(-50%); pointer-events: none; user-select: none;
}
.cover__art::after {
  content: ""; position: absolute; left: 50%; bottom: 0.14em; z-index: -1;
  width: 1.5em; height: 0.3em; transform: translateX(-50%); border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 122, 47, 0.42), rgba(255, 122, 47, 0.06) 62%, transparent);
  filter: blur(6px);
}
.cover__tag { margin: 18px 0 0; text-align: center; font-weight: 500; font-size: clamp(18px, 2vw, 26px); letter-spacing: -0.01em; }
.cover__doc {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px clamp(32px, 5vw, 80px); align-items: end;
  margin-top: clamp(48px, 6vw, 80px); padding-top: clamp(28px, 3vw, 40px); border-top: 1px solid var(--line-hi);
}
.cover__title { display: grid; gap: 18px; justify-items: start; }
.cover__title .display { font-size: var(--fs-h1); }
.cover__title .lead { color: var(--ink); }
.cover__meta { margin: 0; border-top: 1px solid var(--line); }
.cover__meta > div { display: grid; grid-template-columns: 7.2em minmax(0, 1fr); gap: 16px; padding: 11px 0; border-bottom: 1px solid var(--line); font-size: 14.5px; line-height: 1.5; }
.cover__meta dt { color: var(--muted); }
.cover__meta dd { margin: 0; }
.cover__cta { margin-top: 24px; }
.cover__disc { margin: clamp(28px, 3vw, 40px) 0 0; max-width: 92ch; font-size: 12.5px; line-height: 1.6; color: var(--muted); }

/* ------------------------------------------------------------ plan: contents and chapters */
.plan { display: grid; grid-template-columns: 228px minmax(0, 1fr); gap: 56px; align-items: start; padding-bottom: clamp(40px, 5vw, 72px); }
.toc { position: sticky; top: 92px; max-height: calc(100vh - 108px); overflow-y: auto; padding: 4px 0 24px; scrollbar-width: thin; }
.toc__head { margin: 0 0 12px; font-size: 11.5px; font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); }
.toc ol { display: grid; gap: 1px; margin: 0; padding: 0; list-style: none; }
.toc ol a {
  display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 4px;
  padding: 7px 10px 7px 12px; border-left: 2px solid var(--line); border-radius: 0 10px 10px 0;
  font-size: 14px; line-height: 1.35; color: var(--muted);
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease), background 0.2s var(--ease);
}
.toc ol a:hover { color: var(--ink); text-decoration: none; }
.toc ol a[aria-current="true"] { color: var(--ink); border-left-color: var(--lime); background: var(--lime-soft); }
.toc ol a[aria-current="true"] .n { color: var(--lime); }
.toc__tools { display: grid; gap: 12px; justify-items: start; margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--line); }
.toc__links { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 13.5px; font-weight: 600; }
.toc__links a { color: var(--muted); }
.toc__links a:hover { color: var(--ink); }

.ch { padding: clamp(56px, 7vw, 104px) 0; border-top: 1px solid var(--line); }
.plan__body > .ch:first-child { padding-top: 6px; border-top: 0; }
.ch__head { display: grid; gap: 18px; justify-items: start; margin-bottom: clamp(32px, 4vw, 52px); }
.ch__head .display { font-size: clamp(30px, 3.9vw, 56px); }
.ch__head .lead { margin: 0; }
.ch__sub { margin-top: clamp(48px, 6vw, 80px); }
.ch__sub > .display--sm { margin-bottom: clamp(22px, 2.4vw, 32px); }
.ch__sub > .lead { margin: -8px 0 28px; }
.ch .statement { max-width: 30ch; }
.plan-label { display: block; margin: 0 0 16px; font-size: 12px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }
.plan-h { margin: 0 0 18px; font-size: clamp(18px, 1.6vw, 22px); font-weight: 700; line-height: 1.3; letter-spacing: -0.01em; }
.ch .promise { font-size: clamp(24px, 2.7vw, 38px); }
/* the fee bars sit in a narrower column than on the site: smaller figures keep "10%" inside its bar */
.plan-page .seg b { font-size: clamp(20px, 1.75vw, 26px); }
.ch__text { max-width: 72ch; margin: 22px 0 0; color: var(--muted); }
.ch__text b { color: var(--ink); }
.cards--2 { --cols: 2; }

/* a fact's source: (F1) links to its row in the sources table */
.cite { font-family: var(--f-mono); font-size: 0.84em; color: var(--muted); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--line-hi); white-space: nowrap; }
.cite:hover { color: var(--ink); }

/* 01 summary: the one-liner, then the plan in six cards */
.brief { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.brief__lead { grid-column: 1 / -1; max-width: 38ch; margin: 0 0 22px; font-weight: 500; font-size: clamp(21px, 2.1vw, 30px); line-height: 1.24; letter-spacing: -0.015em; }
.brief__lead .dim { color: var(--dim); }
.brief__item { display: grid; align-content: start; gap: 10px; padding: clamp(20px, 2vw, 26px); }
.brief__item h3 { margin: 0; font-size: 12px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }
.brief__item p { margin: 0; font-size: 15.5px; line-height: 1.55; }

/* 02 the market: a big figure and the fact behind it; the last row is the gap bons fills */
.facts { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line-hi); }
.facts li { display: grid; grid-template-columns: minmax(0, 11rem) minmax(0, 1fr); gap: 8px 32px; align-items: baseline; padding: 22px 0; border-bottom: 1px solid var(--line-hi); }
.facts__num { font-family: var(--f-display); font-weight: 500; font-size: clamp(30px, 3.2vw, 44px); line-height: 1; letter-spacing: -0.04em; white-space: nowrap; }
.facts__num small { margin-left: 0.12em; font-size: 0.42em; font-weight: 600; letter-spacing: 0; color: var(--muted); }
.facts p { margin: 0; color: var(--muted); }
.facts p b { color: var(--ink); }
.facts li.is-gap { display: block; margin: 0 -14px; padding: 20px 14px; border-radius: var(--r-inner); border-bottom-color: transparent; background: var(--card); }

/* key → value rows with hairlines (form, token, "in a classic plan → for bons") */
.kvt { margin: 0; border-top: 1px solid var(--line-hi); }
.kvt > div { display: grid; grid-template-columns: minmax(0, 0.34fr) minmax(0, 1fr); gap: 4px 28px; padding: 15px 0; border-bottom: 1px solid var(--line); }
.kvt dt { padding-top: 3px; font-size: 12px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.kvt dd { margin: 0; line-height: 1.55; }
.kvt > .kvt__head { padding: 0 0 12px; border-bottom-color: var(--line-hi); font-size: 11.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--faint); }
.kvt--wide > div { grid-template-columns: minmax(0, 0.42fr) minmax(0, 1fr); }

/* 03 the line-up: product cards with a status at the bottom */
.prod .card { min-height: 0; gap: 12px; }
.prod .card__title { margin-top: 0; }
.prod .card > .chip { align-self: flex-start; margin-top: auto; }
.prod .card__text { margin-bottom: 6px; }

/* 04 the rules, open: number, name, text */
.rulelist { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line-hi); }
.rulelist li { display: grid; grid-template-columns: 3ch minmax(0, 11.5rem) minmax(0, 1fr); gap: 6px 24px; padding: 20px 0; border-bottom: 1px solid var(--line-hi); }
.rulelist .n { padding-top: 3px; font-family: var(--f-mono); font-size: 13px; color: var(--faint); }
.rulelist b { font-size: 17px; line-height: 1.4; }
.rulelist p { margin: 0; color: var(--muted); }
.rulelist--steps li { grid-template-columns: 3ch minmax(0, 1fr); }
.rulelist--steps p { color: var(--ink); }
.rules-foot { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px clamp(32px, 4vw, 64px); align-items: start; margin-top: clamp(32px, 4vw, 48px); }
.rules-foot .note { max-width: 34ch; margin: 0; font-size: var(--fs-lead); line-height: 1.5; }

/* 08 the week: a vertical line of days */
.cycle { margin: 0; padding: 0; list-style: none; }
.cycle li { position: relative; display: grid; grid-template-columns: minmax(0, 12.5rem) minmax(0, 1fr); gap: 4px 28px; padding: 0 0 24px 30px; }
.cycle li::before { content: ""; position: absolute; left: 0; top: 6px; width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--lime); background: var(--bg); }
.cycle li::after { content: ""; position: absolute; left: 5px; top: 22px; bottom: 2px; width: 2px; background: var(--line-hi); }
.cycle li:last-child { padding-bottom: 0; }
.cycle li:last-child::after { content: none; }
.cycle__when { font-family: var(--f-mono); font-size: 13.5px; line-height: 1.7; }
.cycle p { margin: 0; color: var(--muted); }

/* principles kept: ✓ lists */
.ticks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line-hi); }
.ticks li { display: flex; gap: 12px; padding: 18px 0; border-bottom: 1px solid var(--line-hi); line-height: 1.5; }
.ticks li::before { content: "✓"; flex: none; font-family: var(--f-mono); color: var(--lime); }
.ticks--one { grid-template-columns: minmax(0, 1fr); }
.ticks--one li { max-width: 80ch; }
/* bons among the others: its row stands out */
.table tr.is-us td { background: var(--card); color: var(--ink); }
.table tr.is-us td:first-child { padding-left: 14px; border-radius: 12px 0 0 12px; font-family: var(--f-display); font-weight: 600; }
.table tr.is-us td:last-child { padding-right: 14px; border-radius: 0 12px 12px 0; }

/* 09 the founder and who we look for */
.founder { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px clamp(28px, 4vw, 64px); }
.founder > div { display: grid; gap: 10px; align-content: start; }
.founder__name { font-family: var(--f-display); font-weight: 600; font-size: clamp(26px, 2.6vw, 36px); line-height: 1.1; letter-spacing: -0.02em; color: var(--ink); }
.founder p { margin: 0; color: var(--muted); }

/* 10 money: status of a budget in a row, always with a sign and a word, never colour alone */
.chip--lime.chip--plain, .chip--ember.chip--plain, .chip--plain { gap: 6px; }
.table .chip { height: 26px; padding: 0 11px; font-size: 12px; }
.table tr.total td { border-bottom: 0; border-top: 1px solid var(--line-hi); font-weight: 700; color: var(--ink); }
.table td.note-cell { color: var(--muted); font-size: 14px; }
.breakeven { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; margin-top: 28px; }
.breakeven .glass { display: grid; gap: 8px; }
.breakeven b { font-family: var(--f-display); font-weight: 500; font-size: clamp(26px, 2.6vw, 36px); line-height: 1.05; letter-spacing: -0.03em; }
.breakeven .glass > span { font-size: 14px; line-height: 1.5; color: var(--muted); }

/* 12 risks: probability × impact. Position carries the risk, the ember wash only repeats it;
   every number links to its row in the table below, which says the same in words */
.riskfig { max-width: 620px; margin: 0; }
.riskmap { display: grid; grid-template-columns: auto repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(3, minmax(84px, auto)) auto; gap: 3px; }
/* the axis names sit above and below the grid, so they don't widen its first column */
.rm-title { display: block; margin: 0 0 10px; font-size: 10.5px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--faint); }
.rm-title--x { margin: 10px 0 0; text-align: right; }
.rm-y { display: grid; place-items: center end; padding-right: 12px; font-size: 12px; font-weight: 700; color: var(--muted); white-space: nowrap; }
.rm-x { display: grid; place-items: start center; padding-top: 10px; font-size: 12px; font-weight: 700; color: var(--muted); }
.rm-cell { display: flex; flex-wrap: wrap; align-content: center; justify-content: center; gap: 6px; padding: 12px; border: 1px solid var(--line-hi); border-radius: 14px; }
.rm-cell.z-mid { background: var(--heat-mid); border-color: transparent; }
.rm-cell.z-high { background: var(--heat-high); border-color: transparent; }
.rm-pin {
  position: relative; display: inline-grid; place-items: center; min-width: 36px; height: 36px; padding: 0 9px;
  border-radius: var(--r-pill); background: var(--bg); color: var(--ink);
  font: 500 13px/1 var(--f-mono);
}
.rm-pin:hover { text-decoration: none; box-shadow: 0 0 0 2px var(--ink); }
/* the tooltip: the risk's name on hover and keyboard focus; the table below says it too */
.rm-pin::after {
  display: none; position: absolute; bottom: calc(100% + 8px); left: 50%; z-index: 5; transform: translateX(-50%);
  width: max-content; max-width: 220px; padding: 7px 11px; border-radius: 10px;
  background: var(--card-hi); border: 1px solid var(--line-hi); box-shadow: 0 12px 30px -10px rgba(0, 0, 0, 0.8);
  font: 600 12.5px/1.4 var(--f-text); color: var(--ink); text-align: left; white-space: normal; pointer-events: none;
}
html[data-lang="en"] .rm-pin::after { content: attr(data-en); }
html[data-lang="ru"] .rm-pin::after { content: attr(data-ru); }
.rm-pin:hover::after, .rm-pin:focus-visible::after { display: block; }
.rm-cell.p-lo .rm-pin::after { left: -6px; transform: none; }
.rm-cell.p-hi .rm-pin::after { left: auto; right: -6px; transform: none; }
.rm-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; margin: 18px 0 0; font-size: 13px; color: var(--muted); }
.rm-legend i { display: inline-block; width: 14px; height: 14px; margin-right: 7px; vertical-align: -2px; border-radius: 4px; border: 1px solid var(--line-hi); }
.rm-legend .z-mid { background: var(--heat-mid); border-color: transparent; }
.rm-legend .z-high { background: var(--heat-high); border-color: transparent; }
.riskwrap { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr); gap: 24px clamp(32px, 4vw, 56px); align-items: end; }
.riskwrap .note { margin: 0; }
/* a level in the risk table: a word and a dot from the same ramp */
.lvl { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.lvl::before { content: ""; flex: none; width: 9px; height: 9px; border-radius: 50%; border: 1px solid var(--muted); }
.lvl--mid::before { background: var(--heat-mid); border-color: var(--heat-mid); }
.lvl--hi::before { background: var(--heat-high); border-color: var(--heat-high); }
.table tr:target td { background: var(--ember-soft); }
.table td.num { font-family: var(--f-mono); font-size: 13px; color: var(--faint); white-space: nowrap; }

/* 14 sources: the facts table, every row a target of a (F1) link */
.src td:first-child { width: 48px; font-family: var(--f-mono); font-size: 13px; color: var(--muted); white-space: nowrap; }
.src td:nth-child(2) { width: 26%; }
.src td:last-child { width: 22%; }
.src td { font-size: 14px; vertical-align: top; }
.src td:last-child { color: var(--muted); }
.src a { color: var(--muted); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--line-hi); }
.src a:hover { color: var(--ink); }

@media (max-width: 1180px) {
  .plan { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .toc { position: static; max-height: none; overflow: visible; margin-bottom: clamp(32px, 5vw, 56px); padding: 24px; border: 1px solid var(--glass-line); border-radius: var(--r-card); background: linear-gradient(var(--glass), var(--glass)), var(--glass-base); }
  .toc ol { display: block; columns: 2; column-gap: 28px; }
  .toc ol li { break-inside: avoid; }
  .plan-page .nav__menu { display: grid; }
  .nav__link { display: none; }
  .plan__body > .ch:first-child { padding-top: clamp(40px, 5vw, 64px); border-top: 1px solid var(--line); }
}
@media (max-width: 1000px) {
  .rules-foot, .riskwrap { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .cover { padding-top: 96px; }
  .cover__art { font-size: 25.5vw; }
  .cover__doc { grid-template-columns: minmax(0, 1fr); }
  .toc { padding: 20px; }
  .toc ol { columns: 1; }
  .nav__tools .btn { display: none; }
  .brief { grid-template-columns: minmax(0, 1fr); }
  .facts li { grid-template-columns: minmax(0, 1fr); }
  .facts li.is-gap { margin: 0 -10px; padding: 18px 10px; }
  .kvt > div, .kvt--wide > div { grid-template-columns: minmax(0, 1fr); }
  .kvt > .kvt__head { display: none; }
  .rulelist li { grid-template-columns: 3ch minmax(0, 1fr); }
  .rulelist p { grid-column: 2; }
  .cycle li { grid-template-columns: minmax(0, 1fr); }
  .ticks { grid-template-columns: minmax(0, 1fr); }
  .founder, .breakeven { grid-template-columns: minmax(0, 1fr); }
  .riskmap { grid-template-rows: repeat(3, minmax(70px, auto)) auto; }
  .rm-y { padding-right: 8px; font-size: 11px; }
  .rm-cell { padding: 8px 4px; gap: 4px; }
  .rm-pin { min-width: 32px; height: 32px; padding: 0 7px; font-size: 12px; }
  /* stacked rows: the label floats left and the value flows beside it, so a value with a (F1)
     link inside stays one line of text instead of flex items pushed apart */
  .plan-page .table--stack td { display: block; overflow: hidden; }
  .plan-page .table--stack td[data-en]::before { float: left; margin: 3px 16px 0 0; }
  .plan-page .table--stack td:not([data-en]) { text-align: left; }
  .src td:first-child, .src td:nth-child(2), .src td:last-child { width: auto; }
  .table--stack tr.is-us { margin: 6px -12px 0; padding: 12px; border: 0; border-radius: 12px; background: var(--card); }
  .table--stack tr.is-us td { padding: 3px 0; background: none; border-radius: 0; }
}
@media (max-width: 420px) {
  .nav__doc { display: none; }
}

/* print: A4. The cover is a page of its own without margins; every other page has margins, the
   plan's name and the page number. The page's language picks the footer (named pages plan-en and
   plan-ru); custom properties don't reach @page, so its colours are written out (--bg, --dim). */
@media print {
  @page plan-cover { size: A4; margin: 0; background: #050606; }
  @page plan-en {
    size: A4; margin: 15mm 14mm 17mm; background: #050606;
    @bottom-left { content: "bons · Business plan · v1.0"; font: 600 8pt "Manrope", sans-serif; color: #6F7572; }
    @bottom-right { content: counter(page) " / " counter(pages); font: 500 8pt "IBM Plex Mono", monospace; color: #6F7572; }
  }
  @page plan-ru {
    size: A4; margin: 15mm 14mm 17mm; background: #050606;
    @bottom-left { content: "bons · Бизнес-план · версия 1.0"; font: 600 8pt "Manrope", sans-serif; color: #6F7572; }
    @bottom-right { content: counter(page) " / " counter(pages); font: 500 8pt "IBM Plex Mono", monospace; color: #6F7572; }
  }
  html.plan-page[data-lang="en"] body { page: plan-en; }
  html.plan-page[data-lang="ru"] body { page: plan-ru; }
  html.plan-page, .plan-page body { background: var(--bg); scroll-padding-top: 0; }
  .plan-page * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .plan-page .site-nav, .plan-page .ambient, .plan-page .skip, .cover__cta, .toc__tools, .bundle__replay, .plan-page .footer__grid { display: none !important; }
  .plan-page .container { padding: 0; max-width: none; }

  /* the cover: one full page */
  .cover { page: plan-cover; display: flex; flex-direction: column; height: 297mm; padding: 20mm 16mm 14mm; overflow: hidden; break-after: page; }
  .cover > .container { flex: 1; display: flex; flex-direction: column; }
  .cover::before { background: radial-gradient(60% 34% at 50% 30%, var(--glow-ember), transparent 70%), radial-gradient(70% 22% at 50% 100%, rgba(255, 122, 47, 0.14), transparent 70%); }
  .cover__doc { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); margin-top: auto; }
  .cover__title .display { font-size: 44px; }

  /* the contents: a page of its own; chapters: each from a new page */
  .plan { display: block; padding: 0; }
  .toc { position: static; max-height: none; overflow: visible; margin: 0; padding: 0; border: 0; background: none; break-after: page; }
  .toc__head { margin-bottom: 26px; font-family: var(--f-display); font-weight: 600; font-size: 34px; letter-spacing: -0.02em; text-transform: uppercase; color: var(--ink); }
  .toc ol { display: grid; columns: auto; gap: 0; border-top: 1px solid var(--line-hi); }
  .toc ol a { padding: 12px 0; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; font-size: 16px; color: var(--ink); background: none !important; }
  .toc ol a .n { color: var(--lime) !important; }
  .ch, .plan__body > .ch:first-child { break-before: page; padding: 0; border-top: 0; }
  .ch__head { margin-bottom: 26px; }
  .ch__sub { margin-top: 40px; }

  /* keep blocks and rows whole, headings with what follows them */
  .plan-page .card, .plan-page .glass, .plan-page .scan, .plan-page .kvt > div, .plan-page .facts li, .plan-page .rulelist li, .plan-page .cycle li, .plan-page .ticks li, .plan-page .xrules li, .plan-page .road li, .plan-page .riskfig, .plan-page .bundle, .plan-page .flow, .plan-page .callout, .plan-page .table tr, .plan-page .brief__lead, .plan-page .promise { break-inside: avoid; }
  .ch__head, .ch__sub > .display--sm, .plan-label, .plan-h, .plan-page .table thead { break-after: avoid; }

  /* the page is narrow, but it is paper: real tables, two columns where they fit */
  .plan-page .table--stack { display: table; }
  .plan-page .table--stack thead { display: table-header-group; }
  .plan-page .table--stack tbody { display: table-row-group; }
  .plan-page .table--stack tr { display: table-row; padding: 0; border: 0; }
  .plan-page .table--stack td { display: table-cell; width: auto; padding: 10px 14px 10px 0; border-bottom: 1px solid var(--line); text-align: left; }
  .plan-page .table--stack td.r { text-align: right; }
  .plan-page .table--stack td::before { content: none !important; }
  .plan-page .table { font-size: 12.5px; }
  .plan-page .table th { font-size: 9.5px; padding-bottom: 10px; }
  .plan-page .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .plan-page .card { min-height: 0; }
  .plan-page .split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; }
  .plan-page .xrules, .plan-page .ticks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .plan-page .formula div { grid-template-columns: 11ch minmax(0, 1fr); gap: 12px; }
  .plan-page .bundle { grid-template-columns: minmax(0, 1fr) 250px; grid-template-rows: auto 1fr; column-gap: 28px; }
  .plan-page .bundle > .bundle__head { grid-column: 1; grid-row: 1; }
  .plan-page .bundle > .bundle__text { grid-column: 1; grid-row: 2; }
  .plan-page .bundle > .bundle__fig { grid-column: 2; grid-row: 1 / 3; width: 250px; }
  .plan-page .bundle__steps button { padding: 8px 10px; font-size: 13px; }
  .plan-page .bundle__verdict { font-size: 13px; }
  .plan-page .riskwrap, .plan-page .rules-foot { grid-template-columns: minmax(0, 1fr); }
  .rm-pin::after { display: none !important; }
  .plan-page .brief, .plan-page .founder, .plan-page .breakeven { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .plan-page .brief__lead { max-width: none; font-size: 21px; }
  .plan-page .brief__item p { font-size: 13.5px; }
  .plan-page .facts li { grid-template-columns: minmax(0, 8rem) minmax(0, 1fr); padding: 14px 0; }
  .plan-page .facts li.is-gap { padding: 14px; }
  .plan-page .facts__num { font-size: 30px; }
  .plan-page .kvt > div { grid-template-columns: minmax(0, 0.34fr) minmax(0, 1fr); padding: 11px 0; }
  .plan-page .kvt--wide > div { grid-template-columns: minmax(0, 0.42fr) minmax(0, 1fr); }
  .plan-page .kvt > .kvt__head { display: grid; padding: 0 0 10px; }
  .plan-page .kvt dt { font-size: 10.5px; }
  .plan-page .rulelist li { grid-template-columns: 3ch minmax(0, 9.5rem) minmax(0, 1fr); padding: 13px 0; }
  .plan-page .rulelist--steps li { grid-template-columns: 3ch minmax(0, 1fr); }
  .plan-page .rulelist p { grid-column: auto; }
  .plan-page .cycle li { grid-template-columns: minmax(0, 11rem) minmax(0, 1fr); padding-bottom: 16px; }
  .plan-page .cards:not(.cards--2) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .plan-page .ticks--one { grid-template-columns: minmax(0, 1fr); }
  .plan-page .road li { grid-template-columns: 48px minmax(0, 0.8fr) minmax(0, 1.6fr) minmax(0, 0.9fr); gap: 8px 18px; padding: 14px 0; }
  .plan-page .road__what, .plan-page .road__done { grid-column: auto; }
  .plan-page .table td.r { white-space: nowrap; }
  .plan-page .scan { padding: 16px; font-size: 11px; }
  /* the fee bars stay stacked on a narrow page, each one a single line */
  .plan-page .seg { flex-direction: row; align-items: baseline; justify-content: flex-start; gap: 16px; padding: 10px 16px; }
  .plan-page .flow__row { min-height: 0; }
  .plan-page .seg b { font-size: 20px; }
  .plan-page .cover__art { font-size: 190px; margin-top: 18mm; }
  .plan-page .footer { padding: 24px 0 0; border: 0; }
  .plan-page .footer .disclaimer { margin: 0; }
}

/* ------------------------------------------------------------ responsive */
@media (max-width: 1000px) {
  .nav__links { display: none; }
  .nav__menu { display: grid; }
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .timeline { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 36px; }
  .rules, .bundle { grid-template-columns: 1fr; }
  .rules__side { position: static; }
  .bundle { grid-template-rows: none; }
  .bundle > * { grid-column: 1; grid-row: auto; }
  .bundle__fig { width: 100%; max-width: 560px; }
  .xrules { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .road li { grid-template-columns: 64px minmax(0, 1fr) minmax(0, 1.4fr); }
  .road__done { grid-column: 3; }
  /* one column: the side heading gets the full width back */
  .rules__side .display:not(.display--sm) { font-size: var(--fs-h2); }
  /* fee bars stack: a 10% bar is too narrow for its label below this width */
  .flow__row { flex-direction: column; min-height: 0; }
  .flow__row--sub { margin-left: 0; }
  .tomb { grid-template-columns: minmax(0, 1fr); grid-template-areas: "view" "form" "actions"; grid-template-rows: none; }
}
@media (max-width: 760px) {
  .split, .split--wide-l { grid-template-columns: 1fr; }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cards { grid-template-columns: 1fr; }
  .card { min-height: 0; }
  .kv { --cols: 2; }
  .timeline { grid-template-columns: 1fr; row-gap: 0; }
  .timeline li { border-top: 0; border-left: 2px solid var(--line-hi); padding: 0 0 26px 26px; }
  .timeline li.done { border-left-color: var(--lime); }
  .timeline li::before { top: 2px; left: -8px; }
  .grave { grid-template-columns: auto minmax(0, 1fr) auto; }
  .grave__num--weight { display: none; }
  .grave > .chip { grid-column: 2 / -1; justify-self: start; }
  .footer__grid { grid-template-columns: 1fr; }
  /* as on a computer: the wordmark fills the width and the letter stands in front of it
     (the scene sizes its letter the same way, see letterPx in bons-scene.js) */
  .hero__word { top: 27%; }
  .hero__word .wordmark { font-size: 25.5vw; }
  .hero .coin-stage { top: 40%; width: min(28.7vw, 200px); }
  .hero__ground { top: calc(40% + min(28.7vw, 200px) * 0.99); }
  .hero.is-burnt .hero__ground { top: calc(40% + min(28.7vw, 200px) * 0.5); }
  .hero__side { display: none; }
  .section-head--split { grid-template-columns: 1fr; }
  .roles li { grid-template-columns: minmax(0, 1fr) 36px; }
  .roles__how { grid-column: 1; grid-row: 2; }
  .roles__sign { grid-row: 1 / 3; grid-column: 2; align-self: center; }
  .screens { grid-template-columns: 1fr; }
  .bundle__fig text { font-size: 24px; }
  .xrules { grid-template-columns: 1fr; }
  .road li { grid-template-columns: 64px minmax(0, 1fr); }
  .road__what, .road__done { grid-column: 2; }
  .callout { grid-template-columns: 1fr; }
  .formula div { grid-template-columns: 1fr; gap: 2px; }
  /* tables become label: value rows */
  .table--stack thead { display: none; }
  .table--stack, .table--stack tbody, .table--stack tr, .table--stack td { display: block; width: 100%; }
  .table--stack tr { padding: 12px 0; border-bottom: 1px solid var(--line-hi); }
  .table--stack td { display: flex; justify-content: space-between; gap: 16px; padding: 3px 0; border: 0; text-align: right; }
  .table--stack td:first-child { text-align: left; }
  .table--stack td[data-en]::before { flex: none; max-width: 45%; text-align: left; font-family: var(--f-text); font-size: 11.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
  html[data-lang="en"] .table--stack td[data-en]::before { content: attr(data-en); }
  html[data-lang="ru"] .table--stack td[data-ru]::before { content: attr(data-ru); }
  .table--stack td.r { white-space: normal; }
}
@media (max-width: 560px) {
  .nav__tools .btn { display: none; }
  /* long labels: no dot leaders, the label wraps in its own column */
  .ledger--wide { font-size: 13px; }
  .ledger--wide .ld { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 14px; align-items: baseline; line-height: 1.5; padding: 5px 0; }
  .ledger--wide .ld__d { display: none; }
  .ledger--wide .ld__v { max-width: 44vw; text-align: right; }
  .ledger--wide .ld__note { margin: 0 0 6px; }
  .scan { padding: 18px 18px; font-size: 12.5px; }
  .term { bottom: 12px; font-size: 12.5px; }
}

/* ?t=<seconds> on a page: a frozen moment for screenshots, no transitions */
html.static *, html.static *::before, html.static *::after { transition: none !important; animation: none !important; }
html.static { scroll-behavior: auto; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    transition-delay: 0s !important;
  }
}