/* ═══════════════════════════════════════════════════════════════
   CHIME, the protocol surface

   Near black, one accent, no rounded corners and no glow. Every
   label, number, identifier and control is set in mono; prose is
   the only thing set in the grotesque. Hairlines carry the layout,
   so the page reads as an instrument rather than a poster.

   The glass tubes keep their five pitch colours, because there
   they are data: one colour per pitch class, nothing decorative.
   ═══════════════════════════════════════════════════════════════ */

@font-face {
  font-family: "Inter";
  src: url("assets/fonts/inter-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("assets/fonts/jetbrainsmono-latin.woff2") format("woff2");
  font-weight: 300 700;
  font-display: swap;
}

:root {
  --ink:    #07080b;   /* the ground */
  --ink-2:  #0b0d12;   /* a panel, one step up */
  --ink-3:  #12151c;   /* a raised thing */
  --fg:     #f3f4f6;   /* the words */
  --fg-2:   rgba(243, 244, 246, .56);
  --fg-3:   rgba(243, 244, 246, .34);
  --line:   rgba(243, 244, 246, .09);
  --line-2: rgba(243, 244, 246, .18);
  --acc:    #f2c96b;   /* the one accent: the live note, the price, the primary control */
  --acc-2:  #fbe3a8;
  --burn:   #ff5f45;   /* what is destroyed, and anything fixed only at deployment */
  --ok:     #63d8a4;

  /* one colour per pitch class, each with its shadow side and its lit edge */
  --t1: #f2c96b; --t1-d: #8f7434; --t1-l: #fff1c8;   /* E   gold */
  --t2: #8fe3c0; --t2-d: #47876e; --t2-l: #dcfff1;   /* F#  mint */
  --t3: #86c5ff; --t3-d: #416f9f; --t3-l: #dbedff;   /* G   sky */
  --t4: #c9a6ff; --t4-d: #72589f; --t4-l: #efe3ff;   /* B   lilac */
  --t5: #ff9ec6; --t5-d: #a1557a; --t5-l: #ffe1ee;   /* C   rose */
  --bar: #1b1f29; --bar-l: #333a4a;

  --sans: "Inter", system-ui, -apple-system, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --wrap: 1320px;
  --gut: clamp(20px, 3.4vw, 40px);
  --rail-h: 34px;
  --nav-h: 64px;
  --ease: cubic-bezier(.16, 1, .3, 1);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
.hidden { display: none !important; }
html { scroll-behavior: smooth; background: var(--ink); color-scheme: dark; }

body {
  margin: 0;
  background: var(--ink);
  color: var(--fg);
  font-family: var(--sans);
  font-size: clamp(15px, 1vw, 16.5px);
  line-height: 1.62;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; }
a { color: inherit; }
img, svg { display: block; }
button { font: inherit; color: inherit; }
code {
  font-family: var(--mono);
  font-weight: 500;
  font-size: .95em;
  color: var(--acc);
}
::selection { background: var(--acc); color: var(--ink); }
:focus-visible { outline: 1.5px solid var(--acc); outline-offset: 2px; }
.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;
}
.wrap { width: min(100% - (var(--gut) * 2), var(--wrap)); margin-inline: auto; }

/* ─── the mono voice: labels, tags, numbers, controls ─────────── */

.eyebrow, .kick, .tag, .lbl, .hud .k, .toc-head, .brief dt, .spec th, .foot-links a, .nav a {
  font-family: var(--mono);
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.eyebrow { font-size: 12px; color: var(--fg-3); }
.eyebrow b { color: var(--acc); font-weight: 600; }

/* a bracketed identifier, the way a spec sheet writes one */
.kick { display: inline-flex; align-items: center; gap: 10px; font-size: 12px; color: var(--fg-2); }
.kick .br { color: var(--acc); }

.h1 {
  font-family: var(--sans); font-weight: 620;
  font-size: clamp(42px, 5.6vw, 82px); line-height: .96; letter-spacing: -.04em;
}
.h1 .lit { color: var(--acc); }
.h2 {
  font-family: var(--sans); font-weight: 600;
  font-size: clamp(28px, 3.1vw, 44px); line-height: 1.02; letter-spacing: -.035em;
}
.lede { color: var(--fg-2); font-size: clamp(15px, 1.05vw, 17px); max-width: 56ch; }

/* ─── controls: square, mono, one filled ──────────────────────── */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 42px; padding: 0 18px;
  font-family: var(--mono); font-weight: 500; font-size: 12px; letter-spacing: .12em; text-transform: uppercase;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  color: var(--fg); background: transparent;
  border: 1px solid var(--line-2); border-radius: 0;
  transition: border-color .18s ease, background-color .18s ease, color .18s ease;
}
.btn:hover { border-color: var(--fg); }
.btn-acc { background: var(--acc); color: var(--ink); border-color: var(--acc); font-weight: 600; }
.btn-acc:hover { background: var(--acc-2); border-color: var(--acc-2); }
.btn-icon { min-width: 42px; width: 42px; padding: 0; }
.btn-icon svg { width: 17px; height: 17px; }
.btn:disabled { opacity: .45; cursor: default; }

.wallet-dot { width: 6px; height: 6px; border-radius: 999px; background: var(--fg-3); }
.wallet-btn.is-on .wallet-dot { background: var(--ok); }
.wallet-btn.is-off .wallet-dot { background: var(--burn); }
.wallet-btn .wallet-label { font-variant-numeric: tabular-nums; letter-spacing: .06em; }

/* ─── the status rail: the chain, read live, above everything ── */

.rail {
  position: relative; z-index: 41;
  height: var(--rail-h);
  display: flex; align-items: center; gap: 0;
  padding-inline: max(var(--gut), calc((100vw - var(--wrap)) / 2));
  background: var(--ink);
  border-bottom: 1px solid var(--line);
  font-family: var(--mono); font-weight: 500; font-size: 12px; letter-spacing: .06em;
  overflow: hidden; white-space: nowrap;
}
.rail span { display: inline-flex; align-items: center; gap: 7px; padding-right: 20px; margin-right: 20px; border-right: 1px solid var(--line); color: var(--fg-3); }
.rail span:last-child { border-right: 0; margin-right: 0; padding-right: 0; }
.rail b { font-weight: 500; color: var(--fg-2); font-variant-numeric: tabular-nums; }
.rail .on { color: var(--ok); }
.rail .dot { width: 6px; height: 6px; border-radius: 999px; background: var(--ok); animation: blip 2s ease-in-out infinite; }
@keyframes blip { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
.rail .drop { margin-left: auto; padding-right: 0; margin-right: 0; border-right: 0; color: var(--fg-3); }

/* ─── header ──────────────────────────────────────────────────── */

.header {
  position: sticky; top: 0; z-index: 40;
  height: var(--nav-h);
  display: flex; align-items: center; gap: 20px;
  background: rgba(7, 8, 11, .88);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
  padding-inline: max(var(--gut), calc((100vw - var(--wrap)) / 2));
}
.brand { display: flex; align-items: center; gap: 11px; text-decoration: none; }
.brand img { width: 26px; height: 26px; }
.brand-name {
  font-family: var(--mono); font-weight: 600; font-size: 17px;
  letter-spacing: .14em; text-transform: uppercase; line-height: 1;
}
.brand-name i { font-style: normal; color: var(--fg-3); font-weight: 400; }

.nav { display: flex; gap: 26px; margin-left: 30px; }
.nav a {
  display: inline-flex; gap: 6px; font-size: 12px; color: var(--fg-2); text-decoration: none;
  transition: color .18s ease;
}
.nav a em { font-style: normal; color: var(--acc); font-weight: 400; }
.nav a:hover { color: var(--fg); }

.actions { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.actions .burger { order: 5; }
.actions .wallet-btn { order: 10; }
/*  Le bouton de l'app passe dans le tiroir sous 900 px : trois commandes plus le
    hamburger ne tiennent pas sur une ligne de telephone, et la seule qui ne peut
    pas bouger est le portefeuille, en haut a droite.  */
.actions .launch { order: 0; }
@media (max-width: 900px) { .actions .launch { display: none; } }   /* the wallet is always the last thing at the top right */

.burger {
  display: none; width: 42px; height: 42px; padding: 0; cursor: pointer; position: relative;
  background: transparent; border: 1px solid var(--line-2); border-radius: 0;
}
.burger span, .burger::before, .burger::after {
  content: ""; position: absolute; left: 12px; width: 16px; height: 1px;
  background: var(--fg); transition: transform .2s var(--ease), opacity .16s ease;
}
.burger span { top: 20px; }
.burger::before { top: 15px; }
.burger::after { top: 25px; }
.burger[aria-expanded="true"] span { opacity: 0; }
.burger[aria-expanded="true"]::before { transform: translateY(5px) rotate(45deg); }
.burger[aria-expanded="true"]::after { transform: translateY(-5px) rotate(-45deg); }

.drawer {
  position: fixed; inset: calc(var(--rail-h) + var(--nav-h)) 0 auto 0; z-index: 39;
  display: none; flex-direction: column; padding: 8px var(--gut) 24px;
  background: var(--ink-2); border-bottom: 1px solid var(--line);
}
.drawer.is-open { display: flex; }
.drawer a {
  display: flex; gap: 12px; align-items: baseline;
  font-family: var(--mono); font-weight: 500; font-size: 15px; letter-spacing: .06em; text-transform: uppercase;
  text-decoration: none; padding: 15px 0; border-bottom: 1px solid var(--line);
}
.drawer a em { font-style: normal; color: var(--acc); font-weight: 400; font-size: 12px; }
.drawer-cta { margin-top: 18px; align-self: flex-start; }

/* ─── the hero, on a ruled ground ─────────────────────────────── */

.herowrap { position: relative; border-bottom: 1px solid var(--line); }

/*  Four full-height hairlines with a cross at one intersection each: the page
    admits it is built on a grid instead of pretending it floats.  */
.gridlines { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.gridlines i { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--line); }
.gridlines i:nth-child(1) { left: 12.5%; }
.gridlines i:nth-child(2) { left: 37.5%; }
.gridlines i:nth-child(3) { left: 62.5%; }
.gridlines i:nth-child(4) { left: 87.5%; }
.gridlines i::before, .gridlines i::after {
  content: ""; position: absolute; top: 34%; background: var(--line-2);
}
.gridlines i::before { left: -5px; width: 11px; height: 1px; }
.gridlines i::after { left: 0; top: calc(34% - 5px); width: 1px; height: 11px; }

.hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(300px, .82fr) 1fr;
  gap: clamp(28px, 4vw, 64px);
  align-items: center;
  padding: clamp(32px, 4.4vw, 64px) 0 clamp(28px, 3vw, 44px);
}
.copy .kick { margin-bottom: 24px; }
.copy .h1 { margin-bottom: 20px; }
.copy .lede { margin-bottom: 28px; }
.ctas { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 34px; }

/*  Four facts that do not move, stated the way a datasheet states them.  */
.brief { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--line); }
.brief > div { padding: 14px 0; border-bottom: 1px solid var(--line); }
.brief > div:nth-child(odd) { padding-right: 18px; border-right: 1px solid var(--line); }
.brief > div:nth-child(even) { padding-left: 18px; }
.brief dt { font-size: 12px; color: var(--fg-3); }
.brief dd { margin-top: 5px; font-family: var(--mono); font-weight: 500; font-size: 14px; color: var(--fg); letter-spacing: .02em; }

/* ─── the stage ───────────────────────────────────────────────── */

.stage { position: relative; }
.stage-svg { width: 100%; height: auto; overflow: visible; }

/*  The chart's own furniture: an axis, its ticks and a caption, so the drawing
    reads as a measurement of the model and not as an illustration of it.  */
.axis { stroke: var(--line-2); stroke-width: 1; }
.tick { stroke: var(--line-2); stroke-width: 1; }
.tick-cap { font-family: var(--mono); font-weight: 400; font-size: 12px; fill: var(--fg-3); letter-spacing: .04em; }
.scale-line { stroke: var(--fg); stroke-width: 1; stroke-dasharray: 1 9; opacity: .14; }
.bar { fill: var(--bar); }
.bar-lit { fill: var(--bar-l); }
.bar-cap { fill: var(--fg-3); }
.bar-cord { stroke: var(--fg-3); stroke-width: 1; opacity: .5; }
.bar-knot { fill: var(--fg-3); }

/* the tubes: face, shadow side, lit edge, a gleam, a collar, a hollow foot */
.tube { transform-box: view-box; transform-origin: 0 0; --c: var(--t1); --cd: var(--t1-d); --cl: var(--t1-l); }
.tube.p0 { --c: var(--t1); --cd: var(--t1-d); --cl: var(--t1-l); }
.tube.p1 { --c: var(--t2); --cd: var(--t2-d); --cl: var(--t2-l); }
.tube.p2 { --c: var(--t3); --cd: var(--t3-d); --cl: var(--t3-l); }
.tube.p3 { --c: var(--t4); --cd: var(--t4-d); --cl: var(--t4-l); }
.tube.p4 { --c: var(--t5); --cd: var(--t5-d); --cl: var(--t5-l); }
.tube .cord { stroke: var(--fg-3); stroke-width: 1; opacity: .6; }
.tube .beam { fill: var(--c); opacity: 0; transition: opacity .6s ease; }
.tube.live .beam { opacity: .06; }
.tube .body { fill: var(--c); transition: fill .12s ease, opacity .5s ease; }
.tube .shade { fill: var(--cd); opacity: .85; }
.tube .core { fill: var(--cl); opacity: .8; }
.tube .gleam { fill: #ffffff; opacity: .9; }
.tube .collar { fill: var(--bar-l); }
.tube .collar-lit { fill: var(--fg-2); opacity: .6; }
.tube .eye { fill: none; stroke: var(--fg-3); stroke-width: 1.2; }
.tube .lip { fill: var(--cd); }
.tube .lip-rim { fill: none; stroke: var(--cl); stroke-width: 1; opacity: .6; }
.tube .halo { fill: none; stroke: var(--c); stroke-width: 1; opacity: 0; transition: opacity .4s ease; }
.tube.live .halo { opacity: .7; animation: breathe 2.6s ease-in-out infinite; }
/* a struck tube is spent glass: the outline of itself, nothing inside */
.tube.struck .body { fill: none; stroke: var(--c); stroke-width: 1; opacity: .4; }
.tube.struck .shade, .tube.struck .core, .tube.struck .gleam, .tube.struck .lip-rim { opacity: 0; }
.tube.struck .lip { opacity: .3; }
.tube.is-hit .body { fill: #ffffff; opacity: 1; stroke: none; }
.tube.is-hit .shade, .tube.is-hit .core { opacity: 0; }

.sway { transform-box: fill-box; transform-origin: 50% 0; animation: sway 8s ease-in-out infinite; }
@keyframes sway {
  0%, 100% { transform: rotate(-.9deg); }
  50% { transform: rotate(.9deg); }
}
@keyframes breathe {
  0%, 100% { opacity: .3; }
  50% { opacity: .85; }
}

/* the light that runs up a struck tube, and the ring it leaves at the foot */
.pulse { fill: #ffffff; opacity: .9; animation: pulse-up .55s var(--ease) forwards; }
@keyframes pulse-up {
  0% { transform: translateY(0); opacity: .95; }
  100% { transform: translateY(calc(var(--len) * -1px)); opacity: 0; }
}
.ring { fill: none; stroke: #ffffff; stroke-width: 1; animation: ring .6s var(--ease) forwards; }
@keyframes ring {
  0% { r: 12px; opacity: .85; }
  100% { r: 46px; opacity: 0; }
}

/* the price: one thin accent line, a square plate, and the clapper */
.price-line { fill: var(--acc); opacity: .85; }
.price-tag { transform-box: view-box; transform-origin: 0 0; }
.price-tag .plate { fill: var(--ink); stroke: var(--acc); stroke-width: 1; }
.price-tag .cap { font-family: var(--mono); font-weight: 500; font-size: 17px; fill: var(--acc); letter-spacing: .02em; text-anchor: middle; dominant-baseline: middle; }
.clapper { transform-box: view-box; transform-origin: 0 0; }
.clapper .disc { fill: var(--acc); }
.clapper .pin { fill: var(--ink); }
.clapper .disc-ring { fill: none; stroke: var(--acc); stroke-width: 1; opacity: 0; }
.clapper.is-near .disc-ring { opacity: .8; animation: breathe 1.4s ease-in-out infinite; }

#tubes { transition: opacity .5s ease; }
#tubes.is-redrawing { opacity: 0; }

.float {
  font-family: var(--mono); font-weight: 500; font-size: 14px; fill: var(--burn); letter-spacing: .02em;
  animation: float-up 1.4s var(--ease) forwards;
}
@keyframes float-up {
  0% { opacity: 0; transform: translateY(0); }
  14% { opacity: 1; }
  100% { opacity: 0; transform: translateY(-52px); }
}

/* the two keys under the chimes */
.keys { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line); }
.keys .lbl { font-size: 12px; color: var(--fg-3); margin-right: 6px; }
.key {
  min-height: 42px; min-width: 92px; padding: 0 20px; cursor: pointer;
  font-family: var(--mono); font-weight: 500; font-size: 12px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--fg); background: transparent;
  border: 1px solid var(--line-2); border-radius: 0;
  transition: border-color .18s ease, background-color .18s ease, color .18s ease;
}
.key.buy { border-color: var(--acc); color: var(--acc); }
.key.buy:hover { background: var(--acc); color: var(--ink); }
.key.sell:hover { border-color: var(--fg); }
.note { flex: 1 1 300px; min-width: 240px; font-size: 13.5px; color: var(--fg-2); line-height: 1.5; }
.fine { margin-top: 12px; font-family: var(--mono); font-size: 12px; color: var(--fg-3); letter-spacing: .02em; }

/* ─── the readout ─────────────────────────────────────────────── */

.hud {
  display: grid; grid-template-columns: repeat(5, 1fr);
  border-bottom: 1px solid var(--line);
}
.hud .cell { padding: 20px 20px 18px; border-right: 1px solid var(--line); }
.hud .cell:first-child { padding-left: 0; }
.hud .cell:last-child { border-right: 0; }
.hud .k { display: block; font-size: 12px; color: var(--fg-3); margin-bottom: 10px; }
.hud .v {
  display: block; font-family: var(--mono); font-weight: 300;
  font-size: clamp(26px, 2.5vw, 36px); line-height: 1; letter-spacing: -.02em;
  font-variant-numeric: tabular-nums; color: var(--fg);
}
.hud .v.moon { color: var(--acc); }
.hud .v.hot { color: var(--burn); }
.hud .u { display: block; margin-top: 9px; font-size: 12.5px; color: var(--fg-3); line-height: 1.45; }
.bump { animation: bump .5s var(--ease); }
@keyframes bump { 0% { color: var(--acc); } 100% { color: inherit; } }

/* ─── sections ────────────────────────────────────────────────── */

.sheet { padding: clamp(60px, 7vw, 112px) 0; border-bottom: 1px solid var(--line); }
.sec-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 460px); gap: 28px; align-items: end; margin-bottom: clamp(32px, 3.6vw, 56px); }
.sec-head .eyebrow { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.sec-head .eyebrow em { font-style: normal; color: var(--acc); }

.steps { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, 1fr); border-top: 1px solid var(--line); }
.steps li { display: grid; grid-template-columns: 62px 1fr; gap: 14px; padding: 26px 24px 26px 0; border-bottom: 1px solid var(--line); }
.steps li:nth-child(odd) { border-right: 1px solid var(--line); padding-right: 34px; }
.steps li:nth-child(even) { padding-left: 34px; }
.steps .n { font-family: var(--mono); font-weight: 400; font-size: 13px; line-height: 1.5; color: var(--acc); letter-spacing: .08em; }
.steps h3 { font-family: var(--mono); font-weight: 600; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 10px; }
.steps p { color: var(--fg-2); font-size: 14.5px; }

.laws { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--line); }
.laws li { display: grid; grid-template-columns: 90px 1fr; gap: 16px; padding: 18px 0; border-bottom: 1px solid var(--line); }
.laws .tag { font-size: 12px; color: var(--acc); }
.laws p { font-size: 15.5px; color: var(--fg-2); }
.law-note { margin-top: 24px; font-size: 14px; color: var(--fg-2); }
.law-note a { color: var(--acc); text-decoration-thickness: 1px; text-underline-offset: 4px; }

/* ─── the parameter sheet ─────────────────────────────────────── */

/*  Every row is either a fact that is already true of the design or a number
    that only exists once the contracts are deployed. Nothing in between, and
    nothing invented: a blank is stated as SET_AT_DEPLOY rather than filled.  */
.spec-wrap { overflow-x: auto; border-top: 1px solid var(--line); }
.spec { width: 100%; min-width: 620px; border-collapse: collapse; font-family: var(--mono); font-size: 13px; }
.spec th {
  text-align: left; padding: 12px 16px 12px 0; font-size: 12px; color: var(--fg-3);
  border-bottom: 1px solid var(--line-2); white-space: nowrap;
}
.spec th:first-child { width: 30%; }
.spec th:nth-child(2) { width: 46%; }
.spec th.last, .spec td:last-child { text-align: right; }
.spec td { padding: 13px 16px 13px 0; border-bottom: 1px solid var(--line); vertical-align: top; color: var(--fg-2); }
.spec td:first-child { color: var(--fg); font-weight: 500; white-space: nowrap; }
.spec td:last-child, .spec th:last-child { padding-right: 0; }
.spec .val { color: var(--acc); }
.spec .later { color: var(--burn); }
.spec .st { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--fg-3); white-space: nowrap; }
.spec-note { margin-top: 22px; font-size: 14px; color: var(--fg-2); max-width: 78ch; }
.spec-note a { color: var(--acc); text-decoration-thickness: 1px; text-underline-offset: 4px; }

/*  A cut corner, drawn as two clipped layers so the outline survives the chamfer:
    the outer box is the hairline colour, the inner one the panel, one pixel smaller.  */
.chamfer { --cut: 26px; margin-top: 30px; padding: 1px; background: var(--line-2);
  clip-path: polygon(0 0, 100% 0, 100% 100%, var(--cut) 100%, 0 calc(100% - var(--cut))); }
.chamfer > div { background: var(--ink-2); padding: 24px clamp(20px, 2.4vw, 32px) 30px;
  clip-path: polygon(0 0, 100% 0, 100% 100%, var(--cut) 100%, 0 calc(100% - var(--cut))); }
.chamfer .kick { margin-bottom: 12px; }
.chamfer p + p { font-size: 14.5px; color: var(--fg-2); max-width: 84ch; }

.reveal { opacity: 0; transform: translateY(12px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.in { opacity: 1; transform: none; }

/* ─── footer ──────────────────────────────────────────────────── */

.footer { padding: clamp(36px, 4vw, 56px) 0 40px; }
.foot-top { display: flex; flex-wrap: wrap; gap: 24px; align-items: flex-start; justify-content: space-between; }
.foot-line { font-family: var(--mono); font-size: 13px; color: var(--fg-2); margin-top: 14px; letter-spacing: .02em; }
.foot-links { display: flex; flex-wrap: wrap; gap: 22px; }
.foot-links a { font-size: 12px; color: var(--fg-2); text-decoration: none; }
.foot-links a:hover { color: var(--acc); }
.foot-legal { margin-top: 30px; padding-top: 22px; border-top: 1px solid var(--line); font-size: 13px; color: var(--fg-3); line-height: 1.7; max-width: 96ch; }

/* ─── the law page ────────────────────────────────────────────── */

.docs { display: grid; grid-template-columns: 250px 1fr; gap: clamp(28px, 4vw, 72px); padding: clamp(36px, 4vw, 64px) 0 clamp(72px, 8vw, 120px); align-items: start; }
.toc { position: sticky; top: calc(var(--nav-h) + 24px); }
.toc-head { font-size: 12px; color: var(--fg-3); margin-bottom: 14px; }
.toc ol { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; border-left: 1px solid var(--line); }
.toc a {
  display: flex; gap: 10px; padding: 7px 14px; font-family: var(--mono); font-size: 12.5px; color: var(--fg-2);
  text-decoration: none; border-left: 1px solid transparent; margin-left: -1px;
  transition: color .18s ease, border-color .18s ease;
}
.toc a:hover { color: var(--fg); }
.toc a .n { color: var(--fg-3); font-variant-numeric: tabular-nums; }
.toc a:hover .n, .toc a.active .n { color: var(--acc); }
.toc a.active { color: var(--acc); border-left-color: var(--acc); }

.doc-head { margin-bottom: clamp(36px, 4vw, 60px); }
.doc-head .h1 { font-size: clamp(36px, 4.2vw, 58px); margin-bottom: 18px; }
.doc-head p { color: var(--fg-2); max-width: 68ch; }

.art { margin-bottom: clamp(40px, 4.6vw, 72px); scroll-margin-top: calc(var(--nav-h) + 24px); }
.art h2 {
  font-family: var(--mono); font-weight: 600; font-size: clamp(15px, 1.4vw, 18px);
  letter-spacing: .08em; text-transform: uppercase; margin-bottom: 20px;
  display: flex; align-items: baseline; gap: 14px; padding-bottom: 14px; border-bottom: 1px solid var(--line-2);
}
.art h2 .n { font-weight: 400; color: var(--acc); }
.art h3 { font-family: var(--mono); font-weight: 600; font-size: 12.5px; letter-spacing: .1em; text-transform: uppercase; margin: 26px 0 10px; color: var(--fg); }
.art p { margin-bottom: 14px; max-width: 76ch; color: var(--fg-2); }
.art strong { color: var(--fg); font-weight: 600; }
.art ul, .art ol { margin: 0 0 16px; padding-left: 20px; max-width: 76ch; color: var(--fg-2); }
.art li { margin-bottom: 8px; }

.panel { border: 1px solid var(--line-2); border-left: 2px solid var(--acc); border-radius: 0; padding: 18px 22px; margin: 20px 0 24px; background: var(--ink-2); }
.panel.hot { border-left-color: var(--burn); }
.panel p:last-child { margin-bottom: 0; }

.tbl { width: 100%; border-collapse: collapse; margin: 16px 0 22px; font-size: 14px; }
.tbl th, .tbl td { text-align: left; padding: 12px 14px 12px 0; border-bottom: 1px solid var(--line); vertical-align: top; color: var(--fg-2); }
.tbl th { font-family: var(--mono); font-weight: 500; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--fg-3); }
.tbl .set { font-family: var(--mono); font-weight: 500; font-size: 12px; letter-spacing: .06em; color: var(--acc); }
.red { font-family: var(--mono); font-size: .92em; color: var(--burn); font-weight: 500; letter-spacing: .04em; }

/* ════════════════════════════════════════════════════════════
   The app

   Same alphabet as the site, denser: the figures are the layout.
   Every slot that has no number yet prints SET_AT_DEPLOY in the
   red the parameter sheet uses, so the page reads as a fresh
   instrument rather than a broken one.
   ════════════════════════════════════════════════════════════ */

.appmark {
  font-family: var(--mono); font-weight: 600; font-size: 12px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink); background: var(--acc); padding: 3px 8px; line-height: 1.4; align-self: center;
}
.app { padding-bottom: 20px; }

/*  What the app is reading, and how recently, before any figure is shown.  */
.strip {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0;
  padding: 13px 0; border-bottom: 1px solid var(--line);
  font-family: var(--mono); font-weight: 500; font-size: 12px; letter-spacing: .06em;
}
.strip span { display: inline-flex; align-items: center; gap: 8px; padding-right: 18px; margin-right: 18px; border-right: 1px solid var(--line); color: var(--fg-3); }
.strip span:last-child { border-right: 0; margin-right: 0; padding-right: 0; }
.strip b { font-weight: 500; color: var(--fg-2); font-variant-numeric: tabular-nums; }
.strip b.waiting { color: var(--burn); }
.strip .drop { margin-left: auto; }
.strip b { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }

/* ─── the contract, in the open ───────────────────────── */

.ca-band { padding: 26px 0 28px; border-bottom: 1px solid var(--line); }
.ca-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 28px; }
.ca-lab { display: block; font-family: var(--mono); font-weight: 600; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; }
.ca-note { display: block; margin-top: 5px; font-size: 13px; color: var(--fg-3); max-width: 46ch; }
.ca-box { display: flex; align-items: stretch; flex: 1 1 540px; min-width: 0; border: 1px solid var(--line-2); }
.ca-box code {
  flex: 1; min-width: 0; display: flex; align-items: center; padding: 0 16px; height: 52px;
  font-family: var(--mono); font-weight: 500; font-size: clamp(12px, 1.25vw, 16px); letter-spacing: 0;
  overflow-x: auto; white-space: nowrap; color: var(--acc); background: rgba(243, 244, 246, .03);
}
.ca-box code.waiting { color: var(--fg-3); letter-spacing: .1em; }
.ca-copy, .ca-link {
  display: inline-flex; align-items: center; height: 52px; padding: 0 20px; cursor: pointer;
  font-family: var(--mono); font-weight: 600; font-size: 12px; letter-spacing: .12em; text-transform: uppercase;
  text-decoration: none; background: var(--acc); color: var(--ink); border: 0; border-left: 1px solid var(--line-2);
}
.ca-copy:hover, .ca-link:hover { background: var(--acc-2); }
.ca-copy:disabled { background: transparent; color: var(--fg-3); cursor: default; }

/* ─── the figures ───────────────────────────────────── */

.app-sec { padding: clamp(32px, 3.6vw, 52px) 0; border-bottom: 1px solid var(--line); }
.app-sec > .wrap > .eyebrow { display: flex; align-items: center; gap: 10px; margin-bottom: 22px; }
.app-sec > .wrap > .eyebrow em { font-style: normal; color: var(--acc); }

.figs { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); }
.figs.six { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.figs.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.figs > div { background: var(--ink); padding: 18px 18px 20px; min-width: 0; }
.figs dt { font-family: var(--mono); font-weight: 500; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--fg-3); }
.figs dd {
  margin: 10px 0 0; font-family: var(--mono); font-weight: 300;
  font-size: clamp(18px, 1.7vw, 24px); line-height: 1.15; color: var(--fg);
  font-variant-numeric: tabular-nums; overflow-wrap: anywhere;
}
.figs dd.waiting { font-weight: 500; font-size: 12.5px; letter-spacing: .08em; color: var(--burn); }

/* ─── the phrase ────────────────────────────────────── */

.phrase-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr); gap: 20px; align-items: start; }
.card { border: 1px solid var(--line); background: var(--ink-2); padding: 20px clamp(18px, 1.8vw, 24px) 22px; }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.card-lab { display: block; font-family: var(--mono); font-weight: 500; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--fg-3); }
.pill {
  font-family: var(--mono); font-weight: 600; font-size: 12px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--burn); border: 1px solid var(--burn); padding: 2px 8px; line-height: 1.4; white-space: nowrap;
}
.big {
  display: block; margin-top: 14px; font-family: var(--mono); font-weight: 300;
  font-size: clamp(26px, 3vw, 40px); line-height: 1; color: var(--acc);
  font-variant-numeric: tabular-nums; overflow-wrap: anywhere;
}
.big.waiting { font-weight: 500; font-size: clamp(14px, 1.4vw, 17px); letter-spacing: .08em; color: var(--burn); }
.card-note { margin-top: 14px; font-size: 13.5px; color: var(--fg-2); line-height: 1.55; }

/*  One cell per note: struck behind, live now, still waiting ahead.  */
.notes { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 20px; }
.note-cell { display: block; width: 100%; max-width: 34px; flex: 1 1 18px; height: 34px; border: 1px solid var(--line-2); }
.note-cell.is-struck { background: var(--acc); border-color: var(--acc); opacity: .3; }
.note-cell.is-live { border-color: var(--acc); box-shadow: inset 0 0 0 2px var(--acc); }

/* ─── the ticket ────────────────────────────────────── */

.ticket-grid { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.field { display: flex; align-items: stretch; margin-top: 12px; border: 1px solid var(--line-2); }
.field input {
  flex: 1; min-width: 0; height: 50px; padding: 0 14px; border: 0; outline: 0;
  background: rgba(243, 244, 246, .03); color: var(--fg);
  font-family: var(--mono); font-weight: 500; font-size: 18px; font-variant-numeric: tabular-nums;
}
.field input:focus { background: rgba(243, 244, 246, .06); }
.field .unit {
  display: inline-flex; align-items: center; padding: 0 16px; border-left: 1px solid var(--line-2);
  font-family: var(--mono); font-weight: 500; font-size: 12px; letter-spacing: .12em; color: var(--fg-3);
}
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.chip {
  min-height: 34px; padding: 0 14px; cursor: pointer; background: transparent; color: var(--fg-2);
  border: 1px solid var(--line); border-radius: 0;
  font-family: var(--mono); font-weight: 500; font-size: 12px; letter-spacing: .06em;
  transition: border-color .18s ease, color .18s ease;
}
.chip:hover { border-color: var(--line-2); color: var(--fg); }
.chip.is-on { border-color: var(--acc); color: var(--acc); }

.rows { display: grid; border: 1px solid var(--line); }
.rows > div { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 10px 18px; padding: 15px 18px; border-bottom: 1px solid var(--line); }
.rows > div:last-child { border-bottom: 0; }
.rows dt { font-family: var(--mono); font-weight: 500; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--fg-3); }
.rows dd { margin: 0; font-family: var(--mono); font-weight: 500; font-size: 14.5px; color: var(--fg); font-variant-numeric: tabular-nums; text-align: right; overflow-wrap: anywhere; }
.rows dd.waiting { font-size: 12.5px; letter-spacing: .08em; color: var(--burn); }

.app-sec .fine { margin-top: 18px; max-width: 86ch; line-height: 1.6; }
.app-sec .fine a, .card-note a { color: var(--acc); text-decoration-thickness: 1px; text-underline-offset: 4px; }
.app-sec .chamfer { margin-top: 30px; }

@media (max-width: 1080px) {
  .figs.six { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  /*  minmax(0, 1fr) et non 1fr : une piste 1fr garde un minimum automatique, si bien qu'une
      ligne longue du ticket, « the whole reserve, because it is the last note », elargissait
      la piste et faisait deborder la page de quarante pixels sur un telephone.  */
  .phrase-grid, .ticket-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 700px) {
  .figs.six, .figs.three { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ca-box { flex-basis: 100%; }
  .ca-box code { font-size: 12px; padding: 0 10px; }
  .ca-copy, .ca-link { padding: 0 14px; }
  /*  Sur un telephone le bandeau devient deux colonnes : en ligne, la troisieme paire
      depassait la gouttiere et se faisait couper, ce qui donnait « SOURCE NOT DEPLO ».  */
  .strip { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px 14px; }
  .strip span { padding-right: 0; margin-right: 0; border-right: 0; min-width: 0; flex-wrap: wrap; }
  .strip .drop { margin-left: 0; }
  .appmark { display: none; }
}

/* ─── narrow ────────────────────────────────────────── */

@media (max-width: 1080px) {
  .hero { grid-template-columns: 1fr; }
  .sec-head { grid-template-columns: 1fr; align-items: start; }
  .steps { grid-template-columns: 1fr; }
  .steps li:nth-child(odd) { border-right: 0; padding-right: 0; }
  .steps li:nth-child(even) { padding-left: 0; }
  .docs { grid-template-columns: 1fr; }
  .toc { position: static; }
  .toc ol { flex-direction: row; flex-wrap: wrap; border-left: 0; }
  .toc a { border-left: 0; margin: 0; border-bottom: 1px solid transparent; }
  .toc a.active { border-bottom-color: var(--acc); }
  .gridlines i:nth-child(1), .gridlines i:nth-child(4) { display: none; }
}
@media (max-width: 900px) {
  .nav { display: none; }
  .burger { display: block; }
  .hud { grid-template-columns: repeat(2, 1fr); }
  .hud .cell { border-bottom: 1px solid var(--line); padding-left: 0; }
  .hud .cell:nth-child(2n) { border-right: 0; padding-left: 20px; }
  .hud .cell:last-child { grid-column: 1 / -1; border-bottom: 0; }
  .price-tag .cap { font-size: 30px; }
  .price-tag .plate { x: -30px; width: 140px; }
  .float { font-size: 24px; }
  .rail .hide-s { display: none; }
}
@media (max-width: 620px) {
  :root { --nav-h: 56px; }
  /*  The header ran past its own gutter on a phone: the brand and the three controls
      together were wider than the line, so the flex row spilled over the padding and
      the wallet button touched the screen edge. Everything in the row gets smaller
      rather than anything being dropped.  */
  .header { gap: 12px; }
  .brand { gap: 8px; }
  .brand img { width: 22px; height: 22px; }
  .brand-name { font-size: 15px; letter-spacing: .1em; }
  .actions { gap: 6px; }
  .header .btn { min-height: 38px; padding: 0 13px; }
  .header .btn-icon { width: 38px; min-width: 38px; }
  .burger { width: 38px; height: 38px; }
  .burger span, .burger::before, .burger::after { left: 11px; }
  .burger span { top: 18px; }
  .burger::before { top: 13px; }
  .burger::after { top: 23px; }
  .brief { grid-template-columns: 1fr; }
  .brief > div:nth-child(odd) { padding-right: 0; border-right: 0; }
  .brief > div:nth-child(even) { padding-left: 0; }
  .laws li { grid-template-columns: 1fr; gap: 6px; }
  .gridlines { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .sway, .tube.live .halo, .clapper.is-near .disc-ring, .rail .dot { animation: none; }
  .reveal { opacity: 1; transform: none; transition: none; }
}