/* Metrika deck: a slide deck with live charts, presented like the guided tour.
   The presenter (index, section bar, step bar) follows the Retail Analytics Engine tour; the slide frame (header,
   title, progress rule, question, figure, footer) follows the Metrika deck. Colours and type are the demos' own:
   blue #1F4CE3, gold #F8B400, navy #1B2533, rose #E1466A, neutral greys and white on a presenter ground #0B0F19,
   Montserrat. Full, saturated colours only: no pastel, no teal or aquamarine, no violet, no translucent fill.
   Every measure is in rem and 1rem = 1/120 of the slide width, so the whole deck scales with the window.
   Nothing a reader has to read is set under --t-xs (12 px on a 1440 px window).
   Pages alternate six grounds: blue, graphite, gold, a neutral white (still named ice), a medium grey and a pale
   grey. Figures stand on the ground without a box; where a box is needed it is white.
   On a narrow upright screen the slide becomes a page that scrolls (see "narrow" at the end). */
@font-face { font-family: 'Montserrat'; font-weight: 400 600; font-display: swap; src: url(fonts/montserrat-v31-400-600-latin.woff2) format('woff2'); }
@font-face { font-family: 'IBM Plex Mono'; font-weight: 400; font-display: swap; src: url(fonts/ibm-plex-mono-v20-400-latin.woff2) format('woff2'); }
@font-face { font-family: 'IBM Plex Mono'; font-weight: 500; font-display: swap; src: url(fonts/ibm-plex-mono-v20-500-latin.woff2) format('woff2'); }

:root { --blue: #1F4CE3; --gold: #F8B400; --navy: #1B2533; --stage: #0B0F19; --rose: #E1466A;
  --ease: cubic-bezier(.4, 0, .2, 1); --brand: 'Montserrat', 'Segoe UI', system-ui, sans-serif; --mono: 'IBM Plex Mono', ui-monospace, monospace;
  --t-xs: 1.15rem; --t-s: 1.3rem; --t-m: 1.48rem; --pad: 6rem; }
* { box-sizing: border-box; margin: 0; }
html { font-size: calc(min(100vw, 100vh * 16 / 9) / 137.05); height: 100%; background: var(--stage); color-scheme: dark; }
body { height: 100%; display: grid; place-items: center; overflow: hidden; font-family: var(--brand); color: #E8ECF4; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }
button:focus-visible, a:focus-visible, [tabindex]:focus-visible { outline: .2rem solid var(--gold); outline-offset: .16rem; }
svg { display: block; }
.nojs { padding: 2rem; font: 500 1.6rem/1.4 var(--brand); text-align: center; }
/* one column that never grows past the window: the tabs scroll inside their bar instead of widening the page */
.app { width: 137.05rem; height: 77.1rem; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: 4.4rem 67.5rem 5.2rem; justify-items: center; }

/* ================= presenter =================
   The bars above and below are as wide as the slide and belong to it. The section that is open is not a pill:
   it is a part of the top bar in the colour of the page under it (--page, set for each page by deck.js), joined
   to the slide by two small curves. The index is one of those parts when it is open. */
.app { --page: #1F4CE3; --page-ink: #fff; }
.app[data-ground="graphite"] { --page: #333C44; }
.app[data-ground="gold"] { --page: #F8B400; --page-ink: #1B2533; }
.app[data-ground="ice"] { --page: #F5F5F3; --page-ink: #1B2533; }
.app[data-ground="grey"] { --page: #5C636B; }
.app[data-ground="pale"] { --page: #E2E4E7; --page-ink: #1B2533; }
/* The bar reaches a little into the slide, over it: the open part and the slide are then one surface in one colour,
   with no line between them at any window size (their edge rarely falls on a whole pixel). */
.secbar { position: relative; z-index: 3; align-self: start; width: 120rem; height: calc(100% + .25rem); display: flex; align-items: stretch; gap: .2rem; pointer-events: none; }
.secbar > * { pointer-events: auto; }
.brand { flex: none; align-self: center; height: 2.4rem; width: auto; margin-right: 1.2rem; }
.hubbtn, .tabs button { position: relative; flex: none; align-self: flex-end; height: 3.7rem; padding: 0 1.05rem; border-radius: .7rem .7rem 0 0; display: flex; align-items: center; gap: .55rem;
  color: rgba(232,236,244,.84); font: 500 var(--t-xs)/1 var(--brand); white-space: nowrap; transition: background .25s var(--ease), color .25s var(--ease); }
.hubbtn { font-weight: 600; color: #fff; }
.hubbtn svg { width: 1.3rem; height: 1.3rem; fill: currentColor; }
/* owner: a tab that is not the current one lights only its words on hover, with no grey block round them */
.hubbtn:hover, .tabs button:hover { color: #fff; }
.onhub .hubbtn, .tabs button.on { background: var(--page); color: var(--page-ink); font-weight: 600; transition: none; }   /* it changes with the slide, at once */
.onhub .hubbtn::before, .onhub .hubbtn::after, .tabs button.on::before, .tabs button.on::after { content: ''; position: absolute; bottom: 0; width: .7rem; height: .7rem; pointer-events: none; }
.onhub .hubbtn::before, .tabs button.on::before { right: 100%; background: radial-gradient(circle at 0 0, transparent .66rem, var(--page) .7rem); }
.onhub .hubbtn::after, .tabs button.on::after { left: 100%; background: radial-gradient(circle at 100% 0, transparent .66rem, var(--page) .7rem); }
.tabs { flex: 1; min-width: 0; display: flex; align-items: stretch; gap: .1rem; padding: 0 .8rem; overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tabs button i { display: none; font: normal 500 var(--t-xs) var(--mono); }
.tabs button.on i { display: inline; }
.toolbtn { flex: none; align-self: center; height: 3rem; padding: 0 1.1rem; border-radius: .6rem; color: #fff; font-weight: 600; font-size: var(--t-xs);
  display: inline-flex; align-items: center; gap: .55rem; transition: background .2s var(--ease), color .2s var(--ease); }
.toolbtn:hover { background: rgba(255,255,255,.1); }
.toolbtn.on { background: #fff; color: var(--navy); }
.toolbtn.square { width: 3rem; padding: 0; justify-content: center; }
.toolbtn svg, .nav svg { width: 1.4rem; height: 1.4rem; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.onhub #evBtn { visibility: hidden; }
/* below the slide: where the reader is, as text; the pages of the section as thin marks; evidence and the two arrows */
.bar { width: 120rem; display: flex; align-items: center; gap: 1.6rem; font: 500 var(--t-xs) var(--brand); }
.chapter { display: flex; align-items: center; gap: 1rem; width: 44rem; min-width: 0; }
.chapter::before { content: ''; flex: none; width: .4rem; height: 2.7rem; border-radius: .2rem; background: var(--page); transition: background .25s var(--ease); }
.cnum { flex: none; font: 500 1.5rem/1 var(--mono); color: #fff; }
.cnum svg { width: 1.4rem; height: 1.4rem; fill: currentColor; }
.ctext { display: flex; flex-direction: column; gap: .2rem; line-height: 1.25; min-width: 0; }
.ctext b { font-size: var(--t-s); font-weight: 600; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ctext span { color: #B9C2D2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* a mark for each page of the section, a shorter one for each step of a page built in steps */
.dots { flex: 1; display: flex; gap: .35rem; justify-content: center; align-items: center; }
.dots i { position: relative; width: 2.4rem; height: 2.4rem; cursor: pointer; }
.dots i::after { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: .26rem; margin-top: -.13rem; border-radius: .13rem; background: rgba(255,255,255,.26); transition: background .25s var(--ease); }
.dots i.step { width: 1rem; }
.dots i.done::after { background: rgba(255,255,255,.62); }
.dots i.on::after { background: #fff; height: .5rem; margin-top: -.25rem; border-radius: .25rem; }
.dots i:hover::after { background: var(--gold); }
.nav { display: flex; width: 44rem; justify-content: flex-end; align-items: center; }
.nav .toolbtn { margin-right: 1rem; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.34); }
.nav .toolbtn.on { box-shadow: none; }
/* the automatic way: a thin bar along the top of the step bar, just under the page, fills in the time of the page;
   the button beside the evidence tells the seconds left and pauses */
.bar { position: relative; }
.autobar { position: absolute; left: 0; right: 0; top: 0; height: .3rem; background: rgba(255,255,255,.1); }
.autobar i { display: block; width: 0; height: 100%; background: var(--gold); transition: width .1s linear !important; }
.autobar[hidden], .toolbtn.auto[hidden] { display: none; }
.toolbtn.auto { min-width: 7rem; justify-content: center; font-variant-numeric: tabular-nums; }
.toolbtn.auto svg { fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }
.toolbtn.auto .i-play { display: none; fill: currentColor; stroke: none; }
.toolbtn.auto.paused .i-play { display: block; } .toolbtn.auto.paused .i-pause { display: none; }
/* back and forward: two equal buttons, of one size and one weight; only the colour tells forward (white) from back */
.nav .step { width: 4.2rem; height: 3rem; display: grid; place-items: center; color: #fff; background: rgba(255,255,255,.14); border-radius: .6rem; transition: background .2s var(--ease), color .2s var(--ease); }
.nav .step + .step { margin-left: .5rem; }
.nav .step:hover { background: rgba(255,255,255,.24); }
.nav .step.primary { background: #fff; color: var(--navy); }
.nav .step.primary:hover { background: var(--gold); }
.nav .step:disabled { opacity: .35; cursor: default; }
/* the way back to the page a figure was opened from */
.nav .backto { height: 3rem; padding: 0 1rem 0 .7rem; margin-right: 1rem; display: inline-flex; align-items: center; gap: .4rem; border-radius: .6rem; box-shadow: inset 0 0 0 1.5px var(--gold); color: var(--gold); font-weight: 600; white-space: nowrap; }
.nav .backto[hidden] { display: none; }

/* ================= slide frame ================= */
.stage { position: relative; width: 120rem; height: 67.5rem; overflow: hidden; border-radius: 1.1rem; box-shadow: 0 1.4rem 4rem rgba(0,0,0,.5); }   /* slightly rounded corners */
#slide { position: absolute; inset: 0; }
.slide { position: absolute; inset: 0; overflow: hidden; background-color: var(--bg); color: var(--ink); }
.slide > canvas.net, .hub > canvas.net { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
/* a ground gives the page its inks and the cards theirs (--c-*): a card always stands out from its ground */
.slide.blue, .hub { --bg: #1F4CE3; --ink: #fff; --body: #F1F4FF; --muted: #DCE4FF; --thin: rgba(255,255,255,.34); --hair: rgba(255,255,255,.5); --sig: #F8B400;
  --hl-bg: #fff; --hl-ink: #1F4CE3; --shadow: rgba(6,20,84,.35); --well: rgba(8,24,110,.38); --pick: #fff; --pick-ink: #1F4CE3;
  --c-bg: rgba(8,24,110,.55); --c-ink: #fff; --c-body: #E6ECFF; --c-muted: #C9D5FF; --c-line: rgba(255,255,255,.26); --pop: #0D1B4D; }
.slide.graphite { --bg: #333C44; --ink: #fff; --body: #EDF0F4; --muted: #C3CBD6; --thin: rgba(255,255,255,.24); --hair: rgba(255,255,255,.4); --sig: #F8B400;
  --hl-bg: #F8B400; --hl-ink: #1B2533; --shadow: rgba(0,0,0,.32); --well: rgba(18,23,29,.45); --pick: #fff; --pick-ink: #1B2533;
  --c-bg: #232A31; --c-ink: #fff; --c-body: #E3E8EE; --c-muted: #B4BECA; --c-line: rgba(255,255,255,.14); --pop: #151A1F; }
.slide.gold { --bg: #F8B400; --ink: #1B2533; --body: #2A3340; --muted: #4C4322; --thin: rgba(27,37,51,.28); --hair: rgba(27,37,51,.45); --sig: #1F4CE3;
  --hl-bg: #1B2533; --hl-ink: #fff; --shadow: rgba(90,60,0,.3); --well: rgba(255,255,255,.3); --pick: #1B2533; --pick-ink: #fff;
  --c-bg: #1B2533; --c-ink: #fff; --c-body: #E3E8EE; --c-muted: #B4BECA; --c-line: rgba(255,255,255,.16); --pop: #10161F; }
/* the white is neutral: no blue in it (the owner, 2026-11-12) */
.slide.ice { --bg: #F5F5F3; --ink: #1B2533; --body: #3A4350; --muted: #5B6572; --thin: rgba(27,37,51,.16); --hair: rgba(27,37,51,.32); --sig: #1F4CE3;
  --hl-bg: #1F4CE3; --hl-ink: #fff; --shadow: rgba(27,37,51,.18); --well: rgba(27,37,51,.06); --pick: #1F4CE3; --pick-ink: #fff;
  --c-bg: #1B2533; --c-ink: #fff; --c-body: #E3E8EE; --c-muted: #B4BECA; --c-line: rgba(255,255,255,.16); --pop: #10161F; }
/* two greys between graphite and white. On the medium grey the signal is white, because gold would not hold small text */
.slide.grey { --bg: #5C636B; --ink: #fff; --body: #F1F3F5; --muted: #E0E4E9; --thin: rgba(255,255,255,.28); --hair: rgba(255,255,255,.46); --sig: #fff;
  --hl-bg: #F8B400; --hl-ink: #1B2533; --shadow: rgba(0,0,0,.28); --well: rgba(20,24,29,.34); --pick: #fff; --pick-ink: #1B2533;
  --c-bg: #2B3138; --c-ink: #fff; --c-body: #E3E8EE; --c-muted: #B4BECA; --c-line: rgba(255,255,255,.16); --pop: #1B2026; }
.slide.pale { --bg: #E2E4E7; --ink: #1B2533; --body: #343D49; --muted: #535D6A; --thin: rgba(27,37,51,.2); --hair: rgba(27,37,51,.36); --sig: #1F4CE3;
  --hl-bg: #1B2533; --hl-ink: #fff; --shadow: rgba(27,37,51,.2); --well: rgba(27,37,51,.07); --pick: #1B2533; --pick-ink: #fff;
  --c-bg: #1B2533; --c-ink: #fff; --c-body: #E3E8EE; --c-muted: #B4BECA; --c-line: rgba(255,255,255,.16); --pop: #10161F; }
/* a synoptic table on the pale ground: its key figure and the chosen measure are white, so that the page is the grey
   ground, the medium grey of the bases and the full colours of the classes, and never blue, navy and grey together */
.slide.pale:has(.sy-c) { --hl-bg: #fff; --hl-ink: #1B2533; --pick: #fff; --pick-ink: #1B2533; }
/* no paragraph ends on a line with one word alone; the presenter also binds the last two words (deck.js) */
:where(.slide, .hub, .evidence) :where(p, li) { text-wrap: pretty; }
:where(.slide, .hub, .evidence) :where(h1, h2, h3) { text-wrap: balance; }
/* A word on a coloured ground (the site's rule, D104). The ground hugs the word: from .10em over the tall letters
   to .10em under the descenders (with Montserrat, .80em over the baseline to .31em under it) and .08em at the
   sides, the word keeping its usual distance from its neighbours. A quarter of the body stays clear between the
   ground and the ink of the line above and of the line below, so a text that carries one and may wrap has a
   line height of 1.26 or more; the block that follows stands half a body away. */
.hl { color: var(--hl-ink); background: linear-gradient(var(--hl-bg), var(--hl-bg)) 0 .268em / 100% 1.11em no-repeat; padding: .1em .08em; margin: 0 -.08em;
  -webkit-box-decoration-break: clone; box-decoration-break: clone; white-space: nowrap; }
.hl-tail { margin-left: .24em; }   /* the mark that closes the sentence after the word: .12em from the ground, which reaches .12em past the word */
.mono { font: 500 var(--t-xs)/1 var(--mono); letter-spacing: .04em; color: var(--muted); }

/* header: deck | company on the left, section | page on the right */
.hdr { position: absolute; top: 2.7rem; left: var(--pad); right: var(--pad); display: flex; justify-content: space-between; align-items: center; }
.hdr > span { display: flex; align-items: center; font: 500 var(--t-s)/1 var(--brand); color: var(--muted); }
.hdr b { font-weight: 600; color: var(--ink); }
.hdr .chap::before { content: ''; width: .6rem; height: .6rem; border-radius: 50%; background: var(--sig); margin-right: .75rem; }
.hdr .sep { display: block; width: 1.5px; height: 1.25rem; background: var(--hair); margin: 0 .875rem; }
/* footer: the logo, the declaration of the data, the page number */
.ftr { position: absolute; left: var(--pad); right: var(--pad); bottom: 2.3rem; display: flex; align-items: flex-end; justify-content: space-between; }
.ftr .brandline { display: flex; align-items: center; }
.ftr .logo { height: 2.375rem; width: auto; }
.ftr .vsep { display: block; width: 1px; height: 2rem; background: var(--hair); margin: 0 1.3rem 0 1.4rem; }
.ftr .co { font: 500 var(--t-xs)/1.45 var(--brand); color: var(--muted); }
.ftr .co strong { font-weight: 600; color: var(--ink); }
.ftr .pg { font: 500 var(--t-xs)/1 var(--brand); color: var(--muted); padding-bottom: 2px; white-space: nowrap; }
.ftr .pg strong { font: 600 1.5rem/1 var(--brand); color: var(--ink); margin-left: .4rem; }

/* entrance */
.enter .rise > * { animation: rise .62s var(--ease) both; }
.enter .rise > *:nth-child(2) { animation-delay: .07s; } .enter .rise > *:nth-child(3) { animation-delay: .14s; }
.enter .rise > *:nth-child(4) { animation-delay: .21s; } .enter .rise > *:nth-child(5) { animation-delay: .28s; }
@keyframes rise { from { opacity: 0; transform: translateY(1rem); } to { opacity: 1; transform: none; } }
@keyframes pop { from { opacity: 0; transform: translateY(.6rem) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes grow { from { transform: scaleX(0); } to { transform: none; } }

/* ================= cover, key sentence, closing ================= */
.cv-top { position: absolute; top: 2.7rem; left: var(--pad); right: var(--pad); display: flex; justify-content: space-between; }
.cv { position: absolute; left: var(--pad); top: 12.6rem; width: 96rem; }
.cv-m { font: 500 5.25rem/1 var(--brand); letter-spacing: -.012em; }
.cv-t { margin: .25rem 0 0 -.6rem; font: 600 13.2rem/1 var(--brand); letter-spacing: -.04em; white-space: nowrap; }
.cv-r { display: block; width: 6rem; height: .5rem; background: var(--sig); margin: 4.2rem 0 1.9rem; }
.cv-s { font: 500 2.6rem/1.35 var(--brand); color: var(--body); max-width: 80rem; }
.cv-h { margin-top: 2.2rem; display: flex; gap: .7rem 1.6rem; flex-wrap: wrap; font: 500 var(--t-s)/1.4 var(--brand); color: var(--muted); }
.cv-h kbd { display: inline-block; min-width: 2rem; margin-right: .45rem; padding: .12rem .5rem; border-radius: .35rem; border: 1.5px solid var(--hair); font: 500 var(--t-xs)/1.5 var(--mono); color: var(--ink); text-align: center; }
.st { position: absolute; left: var(--pad); top: 17rem; width: 84rem; }
.st-r { display: block; width: 6rem; height: .5rem; background: var(--sig); }
.st-t { margin-top: 2.1rem; font: 600 5.5rem/1.14 var(--brand); letter-spacing: -.022em; }   /* tight lines: only the line that carries a ground is opened (D104) */
.st-l { margin-top: 3rem; max-width: 66rem; font: 500 1.9rem/1.5 var(--brand); color: var(--body); }
.st-l b { color: var(--ink); font-weight: 600; }
.cl-c { margin-top: 3rem; display: flex; gap: 1.2rem; flex-wrap: wrap; }
.cl-c a, .cl-c button { display: inline-flex; align-items: center; height: 4.2rem; padding: 0 1.9rem; border-radius: .6rem; font: 600 1.5rem/1 var(--brand); text-decoration: none;
  background: var(--pick); color: var(--pick-ink); transition: transform .2s var(--ease), box-shadow .2s var(--ease); }
.cl-c a:hover, .cl-c button:hover { transform: translateY(-.15rem); box-shadow: 0 .6rem 1.4rem var(--shadow); }
.cl-c .ghost { background: transparent; color: var(--ink); border: 1.5px solid var(--hair); }

/* ================= content slides: title, progress rule, question, filters, body ================= */
.ct { position: absolute; left: var(--pad); right: var(--pad); top: 7.2rem; bottom: 6.6rem; display: flex; flex-direction: column; }
.ct-t { margin-left: -.15rem; font: 600 3.4rem/1.2 var(--brand); letter-spacing: -.016em; }
.rule { position: relative; margin-top: 1.2rem; height: 1.25rem; flex: none; }
.rule .rbar { position: absolute; left: 0; width: var(--p); top: .375rem; height: .5rem; background: var(--sig); transform-origin: left; }
.enter .rule .rbar { animation: grow .7s var(--ease) both; }
.rule .rline { position: absolute; left: var(--p); right: 0; top: .56rem; height: 2px; background: var(--thin); }
.rule .rnode { position: absolute; left: clamp(0px, calc(var(--p) - .625rem), calc(100% - 1.25rem)); top: 0; width: 1.25rem; height: 1.25rem; border-radius: 50%; background: var(--sig); box-shadow: 0 0 0 .3rem var(--bg); }
.va-q { margin-top: 1.3rem; max-width: 100rem; font: 500 1.9rem/1.4 var(--brand); color: var(--body); flex: none; }
.va-q b { font-weight: 600; color: var(--ink); }
/* the filters of a page: a bar of their own, clear of the question above and of the figure below */
.qc { margin-top: 1.7rem; align-self: flex-start; display: flex; flex-wrap: wrap; gap: .7rem 2rem; align-items: center; flex: none; }
.qc::before { content: 'Filtri'; font: 600 var(--t-xs)/1 var(--brand); letter-spacing: .1em; text-transform: uppercase; color: var(--sig); padding-right: 1.4rem; border-right: 1px solid var(--thin); align-self: stretch; display: flex; align-items: center; }
.qc-g { display: inline-flex; align-items: center; gap: .7rem; }
.qc-g > i { font: normal 600 var(--t-xs)/1 var(--brand); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.qc-s { display: inline-flex; padding: .22rem; gap: .15rem; border: 1.5px solid var(--hair); border-radius: .62rem; }
.qc-o { min-height: 2.75rem; padding: 0 1.05rem; border-radius: .42rem; font: 500 var(--t-s)/1 var(--brand); color: var(--body); transition: background .18s var(--ease), color .18s var(--ease); }
.qc-o:hover { background: var(--thin); color: var(--ink); }
.qc-d { display: none; }                      /* the native menu of a filter: only on a phone, see below */
/* a filter that is always a menu (`menu: true`, a long list such as the months of a year) */
.qc-g[data-menu] .qc-s { display: none; }
.qc-g[data-menu] .qc-d { display: block; position: relative; min-width: 19rem; }
.qc-g[data-menu] .qc-d select { width: 100%; height: 3.2rem; padding: 0 3.4rem 0 1.1rem; border: 1.5px solid var(--hair); border-radius: .62rem; background: transparent;
  color: var(--ink); font: 600 var(--t-s)/1.2 var(--brand); appearance: none; cursor: pointer; }
.qc-g[data-menu] .qc-d option { color: #1B2533; background: #fff; }
.qc-g[data-menu] .qc-d::after { content: ''; position: absolute; right: 1.3rem; top: 50%; width: .7rem; height: .7rem; margin-top: -.55rem;
  border-right: .2rem solid var(--ink); border-bottom: .2rem solid var(--ink); transform: rotate(45deg); pointer-events: none; }
/* the matrix of an account, for every profit and loss of every deck (owner: no grid lines between rows and no ground
   behind the subtotals, "fa molto Excel di default"). The head is the strongest line, with one rule under it; a line of
   the account is indented, in the body's tone; a margin stands out by its weight and by a little room above it; the last
   margin is larger. It never scrolls (owner): a deck shows few columns, or aggregates. */
.pl-wrap { flex: 1; min-height: 0; overflow: hidden; }
.pl { width: 100%; border-collapse: collapse; font: 500 var(--t-s)/1.25 var(--brand); font-variant-numeric: tabular-nums; color: var(--body); }
.pl th, .pl td { padding: .3rem .8rem; text-align: right; white-space: nowrap; }
.pl th:first-child, .pl td:first-child { text-align: left; }
.pl thead th { vertical-align: bottom; padding-bottom: .7rem; border-bottom: 1.5px solid var(--ink); white-space: normal; font: 600 var(--t-xs)/1.2 var(--brand); letter-spacing: .05em; text-transform: uppercase; color: var(--ink); }
.pl tbody tr:first-child td { padding-top: .8rem; }
.pl tbody td:first-child { padding-left: 2rem; }
.pl tr.sub td { padding-top: .6rem; font-weight: 700; color: var(--ink); }
.pl tr.sub td:first-child { padding-left: .8rem; }
.pl tr.end td { padding-top: .8rem; font-size: 1.14em; }
.pl .tot { font-weight: 600; color: var(--ink); }
.pl tr.sub .tot { font-weight: 700; }
.pl.dense { font-size: var(--t-xs); } .pl.dense th, .pl.dense td { padding-left: .55rem; padding-right: .55rem; } .pl.dense tbody td:first-child { padding-left: 1.5rem; } .pl.dense tr.sub td:first-child { padding-left: .55rem; }
/* D112: one measure in three periods, each against the year before */
.tm-rows { display: flex; flex-direction: column; gap: .6rem; }
.tm-row { display: grid; grid-template-columns: 1fr auto; column-gap: 1rem; row-gap: .1rem; padding-top: .6rem; border-top: 1px solid var(--thin); }
.tm-row:first-child { padding-top: 0; border-top: 0; }
.tm-row i { grid-column: 1 / -1; font: normal 600 var(--t-xs)/1.2 var(--brand); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.tm-row b { font: 600 2.1rem/1.1 var(--brand); letter-spacing: -.02em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tm-row span { align-self: end; text-align: right; font: 600 var(--t-m)/1.2 var(--brand); font-variant-numeric: tabular-nums; white-space: nowrap; }
.tm-row small { display: block; margin-top: .25rem; font: 500 var(--t-xs)/1.3 var(--brand); color: var(--muted); }
.tm-cal { margin-top: .5rem; font: 500 var(--t-xs)/1.4 var(--brand); color: var(--body); }
.vz-h > [data-dyn="lg"] > em { margin-left: 1.3rem; font: normal 500 var(--t-xs)/1.2 var(--brand); color: var(--muted); }
.qc-o.on { background: var(--pick); color: var(--pick-ink); font-weight: 600; box-shadow: 0 .12rem .4rem var(--shadow); }
.va-row { flex: 1; min-height: 0; display: flex; gap: 3.6rem; margin-top: 1.8rem; }
.va-row.col { flex-direction: column; gap: 1.5rem; }

/* a figure: caption above, in the manner of a paper (label in mono, then what it shows) */
.vz { flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; }
/* a legend that does not fit beside the title of the figure goes under it, and the title keeps its line */
.vz-h { display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem .85rem; padding-bottom: .7rem; border-bottom: 1px solid var(--thin); margin-bottom: .9rem; flex: none; }
.vz-h i { font: normal 500 var(--t-xs)/1.2 var(--mono); letter-spacing: .04em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.vz-h b { font: 600 var(--t-m)/1.25 var(--brand); color: var(--ink); }
.vz-h em { margin-left: auto; font: normal 500 var(--t-xs)/1.2 var(--brand); color: var(--muted); white-space: nowrap; }
.lg { display: inline-flex; align-items: center; gap: .4rem 1.3rem; margin-left: 1rem; font: 500 var(--t-xs)/1.2 var(--brand); color: var(--body); }
/* owner: changing a measure or a filter moves nothing. A legend that changes with them stands on a row of its own,
   under the title, so that the figure keeps its place whatever the measure */
.vz-h > [data-dyn="lg"]:not(:empty), .vz-h > [data-dyn="legend"]:not(:empty) { flex-basis: 100%; display: block; }
.vz-h > [data-dyn] > .lg { margin-left: 0; }
.lg span { display: inline-flex; align-items: center; gap: .5rem; white-space: nowrap; }
.lg i { flex: none; width: .9rem; height: .9rem; border-radius: .2rem; background: var(--c); }
.vz-c { position: relative; flex: 1; min-height: 0; }
.vz-c > .chart { position: absolute; inset: 0; }

/* the key figure: the answer first, the chart beside it is the evidence */
.va-key { flex: none; width: 27rem; display: flex; flex-direction: column; }
.va-kv { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 1rem; row-gap: 1.3rem; }
/* the key figure stands in the middle of its ground: room at the sides, and around digits the same room above and below */
.va-kv .hl { font: 600 5.2rem/1.2 var(--brand); letter-spacing: -.03em; margin: 0; padding: .1em .18em; }
.va-kv .hl.fig { background-position: 0 .145em; background-size: 100% 1.1em; }   /* the same room on the four sides of the digits, from their ink (D105): .19em */
/* the path of a synoptic table: where the reader is, and the way back up one level or more */
.sy-path { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .6rem; margin-bottom: 1.2rem; font: 600 var(--t-s)/1.2 var(--brand); }
.sy-path button { min-height: 2.6rem; padding: 0 .9rem; border-radius: .5rem; box-shadow: inset 0 0 0 1.5px var(--hair); color: var(--ink); font: inherit; transition: background .2s var(--ease); }
.sy-path button:hover { background: var(--thin); }
.sy-path i { width: .55rem; height: .55rem; border-top: .16rem solid var(--muted); border-right: .16rem solid var(--muted); transform: rotate(45deg); margin: 0 .2rem 0 0; }
.sy-path b { min-height: 2.6rem; display: inline-flex; align-items: center; padding: 0 .9rem; border-radius: .5rem; background: var(--pick); color: var(--pick-ink); }
.sy-head + .sy-rest { margin-top: 2rem; }
.sy-hint { color: var(--muted); font-size: var(--t-s); }
.sy-hint:empty { display: none; }
.sy-kpi { flex: none; display: flex; flex-wrap: wrap; gap: .8rem 3.4rem; margin: 1.1rem 0 .2rem; }   /* the figures of what is open, on the ground */
.sy-kpi div { display: flex; flex-direction: column; }
.sy-kpi b { font: 600 2.2rem/1.15 var(--brand); letter-spacing: -.012em; }
.sy-kpi span { margin-top: .2rem; font: 500 var(--t-xs)/1.3 var(--brand); color: var(--muted); }
.sy-c { position: relative; } .sy-map { position: absolute; inset: 0; }
.sy-map svg { display: block; } .sy-t { cursor: pointer; outline: none; }
/* owner: no underline; on hover or focus the figure grows a little and takes a halo, its words stay as they are */
.sy-f { transform-box: fill-box; transform-origin: 50% 100%; transition: transform .22s var(--ease), filter .22s var(--ease); }
.sy-t:hover .sy-f, .sy-t:focus-visible .sy-f { transform: scale(1.06); filter: drop-shadow(0 0 .7rem color-mix(in srgb, var(--sig) 60%, transparent)) drop-shadow(0 .5rem .9rem rgba(10,18,30,.18)); }
.still .sy-t:hover .sy-f, .still .sy-t:focus-visible .sy-f { transform: none; transition: none; }
@media (prefers-reduced-motion: reduce) { .sy-t:hover .sy-f, .sy-t:focus-visible .sy-f { transform: none; transition: none; } }
/* what Metrika does (D106): the sources of the sector, one view of the data, the decisions it makes possible */
.mk { position: relative; flex: 1; min-height: 0; display: grid; grid-template-columns: 27rem 1fr 38rem; align-items: center; }
.mk-net { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.mk-net path { fill: none; stroke: var(--hair); stroke-width: .16rem; transition: opacity .35s var(--ease); }
.mk-net .dot { fill: var(--ink); transition: opacity .35s var(--ease); } .mk-net .out.dot { fill: var(--sig); }   /* what comes in is the ink of the page, what goes out the colour of the decisions */
.mk-src, .mk-dec { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; position: relative; z-index: 1; }
.mk-src { gap: 1.1rem; justify-self: start; } .mk-dec { gap: 2.2rem; }
.mk-src li { display: flex; align-items: center; gap: .8rem; padding-right: .8rem; font: 600 var(--t-m)/1.2 var(--brand); cursor: default; transition: opacity .35s var(--ease); }
.mk-src svg { flex: none; width: 2rem; height: 2rem; stroke-width: 1.6; }
.mk-core { justify-self: center; display: flex; flex-direction: column; align-items: center; text-align: center; position: relative; z-index: 1; }
.mk-core b { margin-top: 1rem; font: 600 2.2rem/1.1 var(--brand); letter-spacing: -.01em; } .mk-core span { margin-top: .4rem; max-width: 17rem; font: 500 var(--t-s)/1.3 var(--brand); color: var(--body); }
.mk-cube { width: 15rem; height: auto; overflow: visible; }
.mk-cube g { transition: transform .8s var(--ease); animation: mk-float 7s ease-in-out var(--d) infinite; }
.mk-cube polygon { transition: fill .6s var(--ease); }
.mk-cube .ft { fill: #5B7CF3; } .mk-cube .fl { fill: #1F4CE3; } .mk-cube .fr { fill: #1637B0; }
.mk[data-k="2"] .mk-cube .lead .ft { fill: #FFCB3D; } .mk[data-k="2"] .mk-cube .lead .fl { fill: #F8B400; } .mk[data-k="2"] .mk-cube .lead .fr { fill: #D69A00; }
@keyframes mk-float { 50% { transform: translate(calc(var(--ex) * .22), calc(var(--ey) * .22)); } }
.mk-dec li { padding-left: 1.6rem; border-left: .3rem solid var(--sig); font: 600 1.9rem/1.3 var(--brand); cursor: default; transition: opacity .35s var(--ease); }
.mk .off { opacity: .2; }
.mk[data-k="0"] .mk-cube g { animation: none; transform: translate(var(--ex), var(--ey)); }   /* not yet joined: the blocks stand apart, in grey */
.mk[data-k="0"] .mk-cube .ft { fill: #8D959E; } .mk[data-k="0"] .mk-cube .fl { fill: #6E767F; } .mk[data-k="0"] .mk-cube .fr { fill: #58606A; }
.mk[data-k="0"] .mk-core b, .mk[data-k="0"] .mk-core span { color: var(--muted); }
.mk[data-k="0"] .out, .mk[data-k="0"] .mk-dec, .mk[data-k="1"] .out, .mk[data-k="1"] .mk-dec { opacity: 0; }
.mk-say { flex: none; list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 3rem; }
.mk-say li { padding-top: 1rem; border-top: .2rem solid var(--thin); cursor: pointer; }   /* a border, not an inset shadow: at a fraction of a pixel the shadow leaves a hairline on the other edges */
.mk-say li.on, .mk-say li.done { border-top-color: var(--ink); } .mk-say li:nth-child(2).on, .mk-say li:nth-child(2).done { border-top-color: #5B7CF3; } .mk-say li:nth-child(3).on { border-top-color: var(--sig); }
.mk-say b { display: block; font: 600 var(--t-xs)/1.3 var(--brand); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.mk-say span { display: block; margin-top: .4rem; font: 500 var(--t-m)/1.4 var(--brand); color: var(--body); }
.mk-say li:not(.on):not(.done) span { color: var(--muted); }
/* why Metrika (D106): the services for the sector, from the source to the decision, and three rules */
.mw { flex: 1; min-width: 0; list-style: none; padding: 0 0 0 3.4rem; margin: 0; display: flex; flex-direction: column; justify-content: center; gap: 1.7rem; position: relative; }
.mw::before { content: ''; position: absolute; left: .92rem; top: 1.4rem; bottom: 1.4rem; width: .16rem; background: var(--hair); }
.mw::after { content: ''; position: absolute; left: .6rem; top: 1.4rem; width: .8rem; height: .8rem; border-radius: 50%; background: var(--sig); animation: mw-run 5s linear infinite; }
@keyframes mw-run { from { top: 1.4rem; } to { top: calc(100% - 2.2rem); } }
.still .mw::after { display: none; }
.mw li { position: relative; cursor: pointer; }
.mw li::before { content: ''; position: absolute; left: -3.2rem; top: .4rem; width: 1.6rem; height: 1.6rem; border-radius: 50%; background: var(--bg); box-shadow: inset 0 0 0 .16rem var(--hair); z-index: 1; transition: background .3s var(--ease), transform .3s var(--ease); }
.mw li.done::before { background: var(--muted); box-shadow: none; }
.mw li.on::before { background: var(--sig); box-shadow: none; transform: scale(1.3); }
.mw li.lit:not(.on)::before { background: var(--sig); box-shadow: none; transform: scale(1.12); transition-duration: .15s; }
.mw b { display: block; font: 600 2.1rem/1.2 var(--brand); }
.mw li:not(.on):not(.done) b { color: var(--muted); }
.mw li > span { display: block; margin-top: .3rem; max-width: 64rem; font: 500 var(--t-m)/1.4 var(--brand); color: var(--body); }
.mw li:not(.on):not(.done) > span { display: none; }
.mw-go { margin-top: .9rem; display: flex; flex-wrap: wrap; align-items: center; gap: .7rem 1rem; }
.mw-go em { font: 600 var(--t-xs)/1 var(--brand); font-style: normal; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.mw-go button { display: inline-flex; align-items: center; gap: .6rem; min-height: 3rem; padding: 0 1.1rem; border-radius: .5rem; box-shadow: inset 0 0 0 1.5px var(--hair); font: 600 var(--t-s)/1 var(--brand); color: var(--ink); transition: background .2s var(--ease); }
.mw-go button:hover { background: var(--thin); } .mw-go svg { width: 1.4rem; height: 1.4rem; }
.mw-rules { width: 37rem; justify-content: center; }
.mw-rule { margin-top: 1.5rem; }                 /* three rules of three lines each fit the room beside the services, at 16:9 */
.mw-rule b { display: block; font: 600 3.2rem/1.1 var(--brand); letter-spacing: -.02em; }
.mw-rule p { margin-top: .4rem; font: 500 var(--t-m)/1.4 var(--brand); color: var(--body); }
/* beside a figure: the sources a page reads, each with its icon and what it holds */
/* the sources stand in a line, each with its icon, and go to a second line when they are many: no rule between them */
.va-src { list-style: none; padding: 0; margin-top: .8rem; display: flex; flex-wrap: wrap; gap: .7rem 1.6rem; }
.va-src li { display: inline-flex; align-items: center; gap: .6rem; font: 600 var(--t-m)/1.2 var(--brand); white-space: nowrap; }
.va-src svg { flex: none; width: 1.8rem; height: 1.8rem; stroke-width: 1.6; color: var(--ink); }
/* the panel that carries key figure, sources and how they are joined: a little wider, its figure a little smaller */
.va-key.method { width: 33rem; }
.va-key.method .va-kv .hl { font-size: 4.4rem; }
.va-key.method .va-kv + .va-cap { margin-top: 2.6rem; }
/* what follows the key figure keeps half its body from the ground of the figure */
/* half a body of the figure, measured to the box of what follows and not to its ink */
.va-kv + .va-kt, .va-kv + .va-cap { margin-top: 3rem; }
.va-side .va-kv + .va-cap { margin-top: 2.6rem; }
.va-ku { font: 600 1.9rem/1.25 var(--brand); }
.va-kt { margin-top: 1.1rem; font: 500 var(--t-m)/1.45 var(--brand); color: var(--body); text-wrap: pretty; }
.va-kt b { color: var(--ink); font-weight: 600; }

/* written-out steps: what each step leaves, with the last one as the result */
.va-side { flex: none; width: 31rem; display: flex; flex-direction: column; }
.va-side .va-kv .hl { font-size: 4.4rem; }
.va-side ol { list-style: none; padding: 0; margin-top: .4rem; }
.va-cap { display: flex; justify-content: space-between; margin-top: 1.2rem; padding-bottom: .5rem; border-bottom: 1px solid var(--thin); font: 600 var(--t-xs)/1.3 var(--brand); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.va-side li { display: grid; grid-template-columns: 1rem 1fr auto; column-gap: .8rem; align-items: baseline; padding: .62rem 0; border-top: 1px solid var(--thin); opacity: .5; transition: opacity .45s var(--ease); cursor: pointer; }
.va-side li:first-child { border-top: 0; }
.va-side li.done, .va-side li.on { opacity: 1; }
.va-side li::before { content: ''; width: .9rem; height: .9rem; border-radius: .2rem; background: var(--c, var(--muted)); align-self: center; }
.va-side li b { font: 600 var(--t-m)/1.2 var(--brand); color: var(--ink); }
.va-side li em { font: normal 600 var(--t-m)/1.2 var(--brand); font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--ink); }
.va-side li span { display: none; grid-column: 2 / 4; margin-top: .15rem; font: 500 var(--t-xs)/1.35 var(--brand); color: var(--body); }
.va-side li.on span { display: block; }
.va-side li span i { display: block; margin-bottom: .15rem; font-style: normal; font-weight: 600; color: var(--ink); } /* the sources a step reads from, on their own line */
.va-side li.sum b, .va-side li.sum em { color: var(--sig); font-size: 1.7rem; }

/* ================= figures on the ground: a thin rule, a label, the number, one line. The layout suggests the card and
   no box is drawn. What a figure means opens beside it on a white sheet, on hover, focus or a tap ================= */
.kg { flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); grid-auto-rows: 1fr; gap: 2rem 3.4rem; }
.kd { position: relative; display: flex; flex-direction: column; padding: 1.15rem 0 0; min-height: 0; color: var(--ink); text-align: left; cursor: default;
  animation: rise .55s var(--ease) both; animation-delay: calc(var(--k, 0) * 55ms + 120ms); }
.kd::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: .22rem; background: var(--a, var(--sig)); transition: height .2s var(--ease); }
.kd[tabindex] { cursor: pointer; }
.kd[tabindex]:hover::before, .kd[tabindex]:focus-within::before, .kd.open::before { height: .5rem; }
.kd:hover, .kd:focus-within, .kd.open { z-index: 6; }
.kd-h { display: flex; align-items: center; gap: .6rem; font: 600 var(--t-xs)/1.2 var(--brand); letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
.kd-i { flex: none; width: 1.9rem; height: 1.9rem; display: grid; place-items: center; color: var(--ink); transition: transform .3s var(--ease); }
.kd-i svg { width: 1.9rem; height: 1.9rem; stroke-width: 1.7; }
.kd[tabindex]:hover .kd-i, .kd.open .kd-i { transform: scale(1.14); }
.kd-v { margin-top: .9rem; font: 600 3.6rem/1.05 var(--brand); letter-spacing: -.028em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.kd-v small { font: 600 1.5rem/1 var(--brand); letter-spacing: 0; margin-left: .35rem; color: var(--body); }
.kd-n { margin-top: .8rem; font: 600 1.75rem/1.2 var(--brand); }
.kd-t { margin-top: .6rem; font: 500 var(--t-m)/1.4 var(--brand); color: var(--body); text-wrap: pretty; }
.kd-t b { color: var(--ink); font-weight: 600; }
.kd-f { margin-top: auto; padding-top: .7rem; font: normal 500 var(--t-xs)/1.3 var(--brand); color: var(--muted); transition: color .2s var(--ease); }
.kd[tabindex]:hover .kd-f, .kd.open .kd-f { color: var(--ink); }
.kd-p { flex: none; margin-left: auto; width: 1.35rem; height: 1.35rem; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; transition: transform .3s var(--ease), color .2s var(--ease); }
.kd[tabindex]:hover .kd-p, .kd[tabindex]:focus-within .kd-p, .kd.open .kd-p { transform: rotate(45deg); color: var(--ink); }
.kd-v.s { font-size: 2.7rem; }
/* what a figure means, where it stands: a white sheet under it (or above, near the foot of the page) */
/* D111, as the owner set it: the box of a card is built as the evidence panel. A blue head to its edges (the icon on
   white, the label, the figure), the text with even margins, the way to the page as its foot under a thin rule; rounded
   at its four corners. It stands whole above or below its card, centred on it, and a triangle of its own colour points
   from its edge to the card's middle. The presenter places it (data-side, --kx/--ky/--kw, the arrow at --ka). */
.kd-x { position: absolute; left: var(--kx, 0px); top: var(--ky, calc(100% + 2.1rem)); width: var(--kw, max(100%, 32rem));
  display: flex; flex-direction: column; border-radius: 1rem; background: #fff; color: #1B2533;
  box-shadow: 0 1.6rem 3.6rem rgba(10,18,30,.34), 0 .3rem .8rem rgba(10,18,30,.16); opacity: 0; visibility: hidden; transform: translateY(-.4rem);
  transition: opacity .2s var(--ease), transform .2s var(--ease), visibility 0s linear .2s; }
.kd-x::before { content: ''; position: absolute; width: 2.6rem; height: 1.3rem; top: -1.25rem; left: calc(var(--ka, 50%) - 1.3rem);
  background: var(--kc, var(--blue)); clip-path: polygon(0 100%, 50% 0, 100% 100%); }
.kd-x::after { content: ''; position: absolute; left: 0; right: 0; bottom: 100%; height: var(--kg, 2.2rem); }   /* the way from the card keeps the box open */
.kd[data-side="up"] .kd-x { transform: translateY(.4rem); }
.kd[data-side="up"] .kd-x::before { top: auto; bottom: -1.25rem; clip-path: polygon(0 0, 50% 100%, 100% 0); }
.kd[data-side="right"] .kd-x, .kd[data-side="left"] .kd-x { transform: none; }
.kd[data-side="right"] .kd-x::before, .kd[data-side="left"] .kd-x::before { width: 1.3rem; height: 2.6rem; top: calc(var(--ka, 2.4rem) - 1.3rem); }
.kd[data-side="right"] .kd-x::before { left: -1.25rem; clip-path: polygon(100% 0, 0 50%, 100% 100%); }
.kd[data-side="left"] .kd-x::before { left: auto; right: -1.25rem; clip-path: polygon(0 0, 100% 50%, 0 100%); }
.kd[data-side="right"] .kd-x::after, .kd[data-side="left"] .kd-x::after { top: 0; bottom: 0; height: auto; width: var(--kg, 2.2rem); }
.kd[data-side="right"] .kd-x::after { left: auto; right: 100%; }
.kd[data-side="left"] .kd-x::after { right: auto; left: 100%; }
.kd[data-side="up"] .kd-x::after { bottom: auto; top: 100%; }
.kd-xh { flex: none; display: flex; align-items: center; gap: 1rem; padding: 1.2rem 1.4rem 1.1rem; border-radius: 1rem 1rem 0 0; background: var(--blue); color: #fff; }
.kd-xi { flex: none; width: 2.8rem; height: 2.8rem; border-radius: .65rem; background: #fff; color: var(--blue); display: grid; place-items: center; }
.kd-xi svg { width: 1.6rem; height: 1.6rem; stroke-width: 1.8; }
.kd-xh > div { min-width: 0; }
.kd-x .kd-xh p { font: 600 var(--t-xs)/1.2 var(--brand); letter-spacing: .08em; text-transform: uppercase; color: #DCE4FF; }
.kd-x .kd-xh b { display: block; margin-top: .3rem; font: 600 1.75rem/1.15 var(--brand); color: #fff; font-variant-numeric: tabular-nums; }
.kd-x .kd-xh b small { margin-left: .3rem; font-size: .7em; color: #DCE4FF; }
.kd-xb { padding: 1.1rem 1.4rem 1.2rem; }
/* the card a box speaks of lights up while it is open; the cards beside it step back */
.kd[tabindex]::after { content: ''; position: absolute; inset: -.8rem -1rem; z-index: -1; border-radius: 1rem; pointer-events: none; opacity: 0;
  background: color-mix(in srgb, var(--ink) 7%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 24%, transparent); transition: opacity .2s var(--ease); }
.kd[tabindex]:is(:hover, :focus-within, .open)::after { opacity: 1; }
.kd > :not(.kd-x) { transition: opacity .2s var(--ease), color .2s var(--ease); }
.kg:has(> .kd[tabindex]:is(:hover, :focus-within, .open)) > .kd:not(:hover, :focus-within, .open) > :not(.kd-x) { opacity: .4; }
/* a door: the whole card leads to its page */
.kd.door { cursor: pointer; }
.kd.door:hover::before, .kd.door:focus-visible::before { height: .5rem; }
.kd.door:hover .kd-p, .kd.door:focus-visible .kd-p { transform: translateX(.3rem); color: var(--ink); }
/* a chart's tooltip: the same white box, its arrow on the point */
/* only a tooltip the presenter has placed has an arrow: ECharts keeps an empty one at the foot of every chart */
.deck-tip[data-side]::after { content: ''; position: absolute; left: calc(var(--ax, 50%) - 7px); width: 14px; height: 14px; background: #fff; border-radius: 2px; transform: rotate(45deg); }
.deck-tip[data-side="up"]::after { bottom: -6px; } .deck-tip[data-side="down"]::after { top: -6px; }
.kd:hover .kd-x, .kd:focus-within .kd-x, .kd.open .kd-x { opacity: 1; visibility: visible; transform: none; transition: opacity .22s var(--ease) .12s, transform .22s var(--ease) .12s; }
.kd-x p { font: 500 var(--t-s)/1.45 var(--brand); color: #36435A; }
.kd-x p + p { margin-top: .5rem; }
.kd-x b { color: #1B2533; font-weight: 600; }
.kd-x ul { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem .5rem; }
.kd-x li { padding: .28rem .7rem; border-radius: .45rem; background: rgba(27,37,51,.07); font: 500 var(--t-xs)/1.3 var(--brand); color: #1B2533; }
.kd-go { display: flex; align-items: center; justify-content: space-between; gap: .9rem; width: 100%; padding: 1rem 1.4rem; border-top: 1px solid #DDE3EC;
  border-radius: 0 0 1rem 1rem; background: #fff; color: var(--blue); font: 600 var(--t-s)/1.3 var(--brand); text-align: left; transition: background .2s var(--ease); }
.kd-xh + .kd-go { border-top: 0; }
.kd-go svg { width: 1.3rem; height: 1.3rem; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.kd-go:hover { background: #F2F5FB; }
/* the figure a page is about: larger, on two rows, with what makes it */
.kd.hero { grid-row: span 2; }
.kd.hero .kd-v { font-size: 7rem; margin-top: 1.3rem; }
.kd.hero .kd-v small { font-size: 2rem; }
.kd.hero .kd-v.m { font-size: 5.6rem; }
.kd.hero .kd-v.s { font-size: 4rem; }
.kd.hero .kd-v.m small, .kd.hero .kd-v.s small { display: block; margin: .7rem 0 0; }
.kd.hero .kd-t { font-size: 1.6rem; }
.kd.wide { grid-column: span 2; }
.parts { margin-top: 1.7rem; display: flex; height: 1.3rem; border-radius: .3rem; overflow: hidden; transform-origin: left; animation: grow .9s var(--ease) .35s both; }
.parts i { background: var(--c); }
.parts i + i { margin-left: 2px; }
.keys { margin-top: 1rem; display: grid; gap: .55rem; }
.keys p { display: grid; grid-template-columns: 1rem 1fr auto; gap: .7rem; align-items: baseline; font: 500 var(--t-s)/1.3 var(--brand); color: var(--body); }
.keys p::before { content: ''; width: .9rem; height: .9rem; border-radius: .2rem; background: var(--c); align-self: center; }
.keys b { font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
/* five in a row: the same figure, a size smaller */
.kg.n5 { gap: 1.8rem 2.6rem; }
.kg.n5 .kd-n { font-size: 1.6rem; }
.kg.n5 .kd-t { font-size: var(--t-s); margin-top: .45rem; }
/* figures in labelled rows, as on the index */
.rows { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 1.6rem; }
.rw { flex: 1 0 auto; display: flex; flex-direction: column; } /* never shorter than what it holds: a long text does not run into the row below */
.rw-l { flex: none; display: flex; align-items: baseline; gap: .9rem; margin-bottom: 1rem; font: 600 var(--t-m)/1.2 var(--brand); }
.rw-l i { align-self: center; width: .8rem; height: .8rem; border-radius: .2rem; background: var(--a, var(--sig)); }
.rw-l span { font-weight: 500; color: var(--muted); }
.rw-l em { margin-left: auto; font: normal 600 1.9rem/1 var(--brand); font-variant-numeric: tabular-nums; }
.note { flex: none; display: flex; align-items: center; gap: .9rem; font: 500 var(--t-m)/1.4 var(--brand); color: var(--body); }
.note i { flex: none; font: normal 600 var(--t-xs)/1 var(--brand); letter-spacing: .08em; text-transform: uppercase; color: var(--sig); }
.note b { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }

/* ================= the network of the company: white nodes in columns, flows drawn between them in proportion ================= */
.nw { position: relative; flex: 1; min-height: 0; display: grid; grid-template-columns: 1fr .95fr 1.1fr 1.1fr; gap: 0 7rem; align-items: stretch; }
.nw > svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.nw > svg path { stroke-linecap: butt; } .nw > svg path:not([fill]) { fill: none; }   /* the heads of the flows keep their own colour: a flow reaches its box */
.nw-col { display: flex; flex-direction: column; min-height: 0; position: relative; z-index: 1; }
.nw-h { flex: none; padding-bottom: .6rem; border-bottom: 1px solid var(--thin); font: 600 var(--t-xs)/1 var(--brand); letter-spacing: .09em; text-transform: uppercase; color: var(--muted); }
/* owner: the nodes of a network stand apart, by one even space from one another and from the rule of their column */
.nw-x { flex: 1; display: flex; flex-direction: column; gap: 1.6rem; justify-content: center; padding: 1.6rem 0 .4rem; }
.nw-b { padding: .8rem 1.3rem .9rem; border-radius: .9rem; background: #fff; color: #1B2533; box-shadow: inset 0 0 0 1px #D3DAE4, 0 .7rem 1.8rem var(--shadow);
  animation: pop .55s var(--ease) both; animation-delay: calc(var(--k) * 70ms + 150ms); transition: transform .22s var(--ease), box-shadow .22s var(--ease); }
/* owner: no coloured rule on the side of a node (it blends with the ground); the colour of a source is its flow */
.nw-b:hover { transform: translateY(-.25rem); box-shadow: inset 0 0 0 1px #D3DAE4, 0 1.2rem 2.4rem var(--shadow); }
.nw-b.main { background: var(--sig); box-shadow: 0 1rem 2.4rem var(--shadow); padding: 1.5rem 1.6rem 1.6rem; }
.nw-b > i { display: block; font: normal 600 var(--t-xs)/1.2 var(--brand); letter-spacing: .06em; text-transform: uppercase; color: #56637A; }
.nw-b.main > i { color: rgba(27,37,51,.78); }
.nw-b > b { display: block; margin-top: .25rem; font: 600 1.42rem/1.2 var(--brand); }
.nw-b > em { display: block; margin-top: .35rem; font: normal 600 2.3rem/1 var(--brand); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.nw-b > em small { font: 500 var(--t-xs)/1 var(--brand); letter-spacing: 0; margin-left: .45rem; color: #36435A; }
.nw-b.main > em { font-size: 3.6rem; }
.nw-b.main > em small, .nw-b.main > span { color: #1B2533; }
.nw-b > span { display: block; margin-top: .3rem; font: 500 var(--t-xs)/1.4 var(--brand); color: #36435A; }

/* ================= the method of a page: the sources, how they are joined, what is read. Three columns under a thin
   rule, an arrowhead between them, no box ================= */
.mt { flex: 1; min-height: 0; display: grid; grid-template-columns: 1fr 1.1fr .95fr; gap: 0 6rem; align-content: center; }
.mt > div { position: relative; padding-top: 1.4rem; border-top: .22rem solid var(--sig); animation: rise .6s var(--ease) both; animation-delay: calc(var(--k) * 120ms + 150ms); }
.mt > div + div::before { content: ''; position: absolute; left: -3.7rem; top: 4.4rem; width: 1.3rem; height: 1.3rem; border-top: .25rem solid var(--hair); border-right: .25rem solid var(--hair); transform: rotate(45deg); }
.mt > div > i { display: block; font: normal 600 var(--t-xs)/1.2 var(--brand); letter-spacing: .09em; text-transform: uppercase; color: var(--muted); }
.mt ul { list-style: none; padding: 0; margin-top: 1.3rem; display: grid; gap: 1.1rem; }
.mt li { display: grid; grid-template-columns: 2.2rem 1fr; column-gap: .9rem; align-items: center; }
.mt li svg { grid-row: 1 / 3; width: 2.2rem; height: 2.2rem; stroke-width: 1.6; color: var(--ink); }
.mt li b { font: 600 1.6rem/1.2 var(--brand); }
.mt li span { font: 500 var(--t-s)/1.3 var(--brand); color: var(--body); }
.mt p { margin-top: 1.3rem; font: 500 2rem/1.4 var(--brand); color: var(--ink); text-wrap: pretty; }
.mt > div > b { display: block; margin-top: 1.2rem; font: 600 4.6rem/1.05 var(--brand); letter-spacing: -.03em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.mt > div > b.m { font-size: 3.9rem; } .mt > div > b.s { font-size: 3.1rem; }
.mt > div > b.long { font-size: 2.3rem; line-height: 1.2; letter-spacing: -.01em; white-space: normal; text-wrap: balance; }
.mt > div > span { display: block; margin-top: .9rem; font: 500 var(--t-m)/1.4 var(--brand); color: var(--body); text-wrap: pretty; }
/* three figures on the ground, no box (kept for pages that are about figures) */
.sf { flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 4.5rem; align-content: center; }
.sf > div { padding-top: 1.5rem; border-top: .25rem solid var(--sig); animation: rise .6s var(--ease) both; animation-delay: calc(var(--k) * 90ms + 150ms); }
.sf b { display: block; font: 600 6rem/1.05 var(--brand); letter-spacing: -.03em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.sf b.m { font-size: 4.6rem; } .sf b.s { font-size: 3.7rem; }
.sf b.long { font-size: 2.7rem; line-height: 1.2; letter-spacing: -.015em; white-space: normal; text-wrap: balance; }
.sf span { display: block; margin-top: 1.1rem; max-width: 26rem; font: 500 1.75rem/1.4 var(--brand); color: var(--body); text-wrap: pretty; }
.todo { flex: none; font: 500 var(--t-s)/1.5 var(--brand); color: var(--muted); text-wrap: pretty; }
.todo i { margin-right: .9rem; font: normal 600 var(--t-xs)/1 var(--brand); letter-spacing: .08em; text-transform: uppercase; color: var(--sig); }
.kd ul.kd-list { list-style: none; padding: 0; margin-top: .9rem; }
.kd-list li { position: relative; padding: .6rem 0 .6rem 1.6rem; font: 500 var(--t-m)/1.4 var(--brand); color: var(--c-body); border-top: 1px solid var(--c-line); }
.kd-list li:first-child { border-top: 0; }
.kd-list li::before { content: ''; position: absolute; left: 0; top: 1.15rem; width: .65rem; height: .65rem; border-radius: 50%; background: var(--a, var(--sig)); }
.kd-facts { margin-top: 1rem; display: flex; flex-direction: column; gap: 1.1rem; }
.kd-facts b { display: block; font: 600 2.8rem/1.1 var(--brand); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.kd-facts span { display: block; margin-top: .3rem; font: 500 var(--t-s)/1.4 var(--brand); color: var(--c-body); }

/* ================= the index ================= */
.hub { position: absolute; inset: 0; z-index: 20; background: var(--bg); color: #fff; opacity: 0; visibility: hidden; display: flex; flex-direction: column; padding: 2.7rem var(--pad) 2.8rem;
  transition: opacity .28s var(--ease), visibility 0s linear .28s; }
.hub.on { opacity: 1; visibility: visible; transition: opacity .42s var(--ease); }
.hub > * { position: relative; }
.hub-hd { display: flex; justify-content: space-between; font: 500 var(--t-s)/1 var(--brand); color: #DCE4FF; flex: none; }
.hub-hd b { font-weight: 600; color: #fff; }
.hub-hd i { display: inline-block; width: 1.5px; height: 1.2rem; background: rgba(255,255,255,.5); margin: 0 .9rem; vertical-align: -.15rem; }
.hub-hd em { display: inline-block; width: .6rem; height: .6rem; border-radius: 50%; background: var(--gold); margin-right: .8rem; vertical-align: .08rem; }
.hub-hero { margin-top: 2.6rem; width: 78rem; flex: none; }
.hub-hero h1 { font: 600 4rem/1.1 var(--brand); letter-spacing: -.022em; text-wrap: balance; }
.hub-hero p { margin-top: 1.1rem; font: 500 var(--t-m)/1.45 var(--brand); color: #F3F6FF; max-width: 74rem; text-wrap: pretty; }
.hub-cta { display: flex; gap: 1.2rem; margin-top: 1.6rem; }
.cta-play, .cta-ghost { display: inline-flex; align-items: center; gap: .85rem; height: 4rem; padding: 0 2.1rem 0 1.7rem; border-radius: .6rem; font: 600 1.45rem/1 var(--brand); transition: box-shadow .2s var(--ease), background .2s var(--ease); }
.cta-play { background: #fff; color: var(--blue); }
.cta-play svg { width: 1.6rem; height: 1.6rem; fill: currentColor; }
.cta-play small { font: 500 var(--t-xs)/1 var(--brand); color: #4D5C7E; margin-left: .2rem; }
.cta-play:hover { box-shadow: 0 0 0 .36rem rgba(255,255,255,.28); }
.cta-ghost { border: .14rem solid rgba(255,255,255,.9); color: #fff; padding: 0 1.7rem 0 2.1rem; }
.cta-ghost svg, .tc-arr { width: 1.5rem; height: 1.5rem; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.cta-ghost:hover { background: rgba(255,255,255,.12); }
.hub-rows { margin-top: auto; }
.hub-pick { margin-bottom: 1.3rem; font: 600 var(--t-xs)/1.3 var(--brand); letter-spacing: .08em; text-transform: uppercase; color: #DCE4FF; }
.hub-row + .hub-row { margin-top: 1.3rem; }
.hub-row.g0 { --acc: var(--gold); --acc-ink: #202022; } .hub-row.g1 { --acc: #E1466A; --acc-ink: #fff; }
.hr-label { display: flex; align-items: center; gap: .8rem; font: 600 var(--t-m)/1 var(--brand); margin-bottom: .8rem; }
.hr-label i { width: .8rem; height: .8rem; border-radius: .2rem; background: var(--acc); }
.hr-label span { font-weight: 500; color: #DCE4FF; }
/* the doors of a row are as wide as one another, whatever their titles: a column never grows with its text, and a
   long title goes to a second line (the owner, 2026-11-12: "non tararti solamente sul titolo") */
.hr-cards { display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); gap: 1.1rem; }
.hr-cards.n5, .hr-cards.n6 { gap: 1rem; }
.tcard { display: grid; grid-template-columns: auto minmax(0, 1fr); align-content: start; gap: .3rem .9rem; min-height: 11.6rem; padding: 1.1rem 1.2rem 1rem; border-radius: .95rem; text-align: left;
  background: rgba(8,24,110,.5); border: 1px solid rgba(255,255,255,.22); color: #fff; transition: background .2s var(--ease), color .2s var(--ease), transform .2s var(--ease), box-shadow .2s var(--ease); }
.tcard:hover, .tcard:focus-visible { background: #fff; color: var(--blue); transform: translateY(-.25rem); box-shadow: 0 1rem 2.2rem rgba(6,20,84,.4); }
.tc-ico { grid-row: 1 / 3; width: 3.2rem; height: 3.2rem; border-radius: .75rem; display: grid; place-items: center; background: var(--acc); color: var(--acc-ink); transition: transform .3s var(--ease); }
.tcard:hover .tc-ico { transform: rotate(-8deg) scale(1.08); }
.tc-ico svg { width: 1.8rem; height: 1.8rem; stroke-width: 1.7; }
.tc-code { align-self: end; font: 600 var(--t-xs)/1 var(--mono); color: #C9D5FF; }
.tc-title { min-width: 0; font: 600 1.5rem/1.15 var(--brand); text-wrap: balance; overflow-wrap: break-word; }
.tc-q { grid-column: 1 / 3; margin-top: .55rem; font: 500 var(--t-s)/1.35 var(--brand); color: #E6ECFF; text-wrap: pretty; }
.tcard:hover .tc-q, .tcard:focus-visible .tc-q { color: #3A4A70; }
.tcard:hover .tc-code, .tcard:focus-visible .tc-code { color: var(--blue); }
.tcard .tc-arr { display: none; }
.tcard.cta { background: var(--gold); border-color: var(--gold); color: #202022; }
.tcard.cta:hover, .tcard.cta:focus-visible { background: var(--gold); color: #202022; box-shadow: 0 0 0 .36rem rgba(248,180,0,.35); }
.tcard.cta .tc-q, .tcard.cta:hover .tc-q { color: #3A3320; } .tcard.cta .tc-code, .tcard.cta:hover .tc-code { color: #202022; }
.tcard.cta .tc-ico { background: #202022; color: var(--gold); }

/* ================= evidence: how the page in front of the reader is calculated ================= */
.evidence { position: absolute; z-index: 30; top: 0; right: 0; bottom: 0; width: 40rem; background: #fff; color: #1B2533; box-shadow: -1.2rem 0 3rem rgba(0,0,0,.35);
  display: flex; flex-direction: column; animation: slidein .28s var(--ease) both; }
.evidence[hidden] { display: none; }
@keyframes slidein { from { transform: translateX(3rem); opacity: 0; } to { transform: none; opacity: 1; } }
.ev-head { display: flex; align-items: flex-start; gap: 1rem; padding: 1.8rem 2rem 1.4rem; background: var(--blue); color: #fff; flex: none; }
.ev-ico { flex: none; width: 3.2rem; height: 3.2rem; border-radius: .75rem; background: #fff; color: var(--blue); display: grid; place-items: center; }
.ev-ico svg { width: 1.9rem; height: 1.9rem; stroke-width: 1.8; }
.ev-head > div { flex: 1; min-width: 0; }
.ev-head p { font: 600 var(--t-xs)/1.2 var(--brand); letter-spacing: .08em; text-transform: uppercase; color: #DCE4FF; }
.ev-head h2 { margin-top: .4rem; font: 600 1.8rem/1.2 var(--brand); }
.ev-head button { flex: none; width: 3rem; height: 3rem; border-radius: .5rem; display: grid; place-items: center; color: #fff; }
.ev-head button:hover { background: rgba(255,255,255,.16); }
.ev-head button svg { width: 1.5rem; height: 1.5rem; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
.ev-body { flex: 1; overflow-y: auto; scrollbar-width: none; padding: .6rem 2rem 1.8rem; }
.ev-body::-webkit-scrollbar { display: none; }
.ev-body h3 { display: flex; align-items: center; gap: .7rem; margin-top: 1.4rem; font: 600 var(--t-s)/1.2 var(--brand); color: #1B2533; }
.ev-body h3 .ei { flex: none; width: 2.3rem; height: 2.3rem; border-radius: .55rem; background: var(--blue); color: #fff; display: grid; place-items: center; }
.ev-body h3.warn .ei { background: var(--gold); color: #1B2533; }
.ev-body h3 svg { width: 1.4rem; height: 1.4rem; stroke-width: 1.9; }
.ev-body p, .ev-body li { margin-top: .6rem; font: 500 var(--t-s)/1.5 var(--brand); color: #36435A; }
.ev-body ul { padding-left: 1.3rem; }
.ev-body b { color: #1B2533; font-weight: 600; }
.ev-body .tag { display: inline-block; margin-right: .5rem; padding: .16rem .6rem; border-radius: .35rem; background: var(--blue); color: #fff; font: 600 var(--t-xs)/1.4 var(--brand); }
.ev-body .tag.d { background: #1B2533; } .ev-body .tag.r { background: var(--gold); color: #1B2533; }
.ev-foot { flex: none; display: flex; align-items: center; gap: .7rem; padding: 1rem 2rem; border-top: 1px solid #DDE3EC; font: 500 var(--t-xs)/1.4 var(--brand); color: #56637A; }
.ev-foot svg { flex: none; width: 1.5rem; height: 1.5rem; stroke-width: 1.8; color: var(--blue); }

/* ================= a still page: no motion (the M key, ?static, or the system's setting) ================= */
.still *, .still *::before, .still *::after { animation: none !important; transition: none !important; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

/* ================= the share image: the index alone, edge to edge ================= */
.share { place-items: stretch; }
html.share { font-size: calc(100vw / 120); }
.share .app { width: 100vw; height: 100vh; grid-template-rows: 0 1fr 0; }
.share .secbar, .share .bar { display: none; }
.share .stage { width: 100vw; height: 100vh; box-shadow: none; border-radius: 0; }
.share .hub-hero p { display: none; }

/* ================= narrow: an upright phone reads the slide as a page ================= */
@media (max-width: 820px) and (orientation: portrait) {
  :root { --t-xs: max(1.42rem, 12px); --t-s: 1.55rem; --t-m: 1.72rem; --pad: 2.6rem; }   /* the smallest text is never under 12 px, on the narrowest phone too */
  html { font-size: calc(100vw / 46); }
  body { display: block; overflow: hidden; }
  .app { width: 100vw; height: 100dvh; grid-template-rows: 6.2rem 1fr 6.6rem; }
  .secbar, .bar { width: 100%; }
  .secbar { padding: 0 0 0 1.2rem; gap: .4rem; }
  .brand, #fsBtn { display: none; }
  .hubbtn, .tabs button { height: 5.2rem; padding: 0 1.2rem; }
  .hubbtn svg { width: 1.8rem; height: 1.8rem; }
  .tabs { padding: 0 .8rem 0 .6rem; }
  .tabs button:not(.on) span { display: none; }
  .tabs button i { display: inline; }
  .hl { white-space: normal; }
  .bar { padding: 0 1.4rem; gap: 1rem; }
  .chapter { width: auto; flex: 1; }
  .chapter::before { height: 3.8rem; }
  .cnum { font-size: 1.9rem; }
  .dots { display: none; }
  .nav { width: auto; }
  .nav .toolbtn { width: 4.8rem; height: 4.4rem; padding: 0; justify-content: center; margin-right: .8rem; }
  .nav .toolbtn span { display: none; }
  .nav .step { width: 5.4rem; height: 4.4rem; }
  .nav .backto span { display: none; } .nav .backto { height: 4.4rem; padding: 0 1rem; margin-right: .8rem; }
  .nav svg { width: 2rem; height: 2rem; }
  .stage { width: 100vw; height: auto; min-height: 0; overflow-y: auto; overflow-x: hidden; box-shadow: none; border-radius: 0; }
  #slide { position: relative; inset: auto; min-height: 100%; }
  .slide { position: relative; inset: auto; min-height: calc(100dvh - 12.8rem); display: flex; flex-direction: column; padding: 2.4rem var(--pad) 2.6rem; }
  .slide { z-index: 0; } .slide > canvas.net { z-index: -1; }   /* the network is the watermark of a phone page too: over the ground, under the words */
  .hdr, .ftr, .ct, .cv, .cv-top, .st { position: static; width: auto; }
  .hdr .deck { display: none; }
  .ct { flex: 1; margin-top: 2rem; }
  .ct-t { font-size: 3rem; } .va-q { font-size: 1.95rem; }
  .ftr { margin-top: 2.6rem; }
  .ftr .logo { height: 2.6rem; } .ftr .vsep, .ftr .co { display: none; }
  .cv { margin-top: 6rem; } .cv-m { font-size: 3.2rem; } .cv-t { font-size: 6rem; margin-left: -.2rem; white-space: normal; } .cv-s { font-size: 2.1rem; }
  .cv-r { margin: 2.6rem 0 1.6rem; } .cv-h { display: none; }
  .st { margin-top: 6rem; } .st-t { font-size: 3.6rem; } .st-l { font-size: 1.95rem; }
  .cv, .st { flex: 1; }
  /* D109: each filter on its own row; where its buttons would not stand on that row, the same choices are a native menu */
  .qc { align-self: stretch; flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 1rem; } .qc::before { display: none; }
  .qc-g { flex-wrap: nowrap; min-width: 0; } .qc-s { flex-wrap: nowrap; flex: none; } .qc-o { min-height: 4rem; padding: 0 1.1rem; white-space: nowrap; }
  .qc-g.drop .qc-s { display: none; }
  .qc-g.drop .qc-d { display: block; position: relative; flex: 1; min-width: 0; }
  /* the menu has a row of its own under its label, so that its words are never cut */
  .qc-g.drop, .qc-g[data-menu] { flex-wrap: wrap; row-gap: .6rem; } .qc-g.drop .qc-d, .qc-g[data-menu] .qc-d { flex: 1 1 100%; }
  .qc-d select { width: 100%; min-height: 44px; padding: 0 3.6rem 0 1.2rem; border: 1.5px solid var(--hair); border-radius: .62rem; background: transparent; color: var(--ink); font: 600 16px/1.2 var(--brand); appearance: none; -webkit-appearance: none; }
  .qc-d option { color: #1B2533; background: #fff; }
  .qc-d::after { content: ''; position: absolute; right: 1.5rem; top: 50%; width: .8rem; height: .8rem; margin-top: -.65rem; border-right: .2rem solid var(--ink); border-bottom: .2rem solid var(--ink); transform: rotate(45deg); pointer-events: none; }
  .va-row { flex-direction: column; gap: 2.2rem; }
  .va-key, .va-side { width: auto; }
  .mk { grid-template-columns: 1fr; gap: 6rem; padding: 1rem 0 3rem; } .mk-src { flex-direction: row; flex-wrap: wrap; gap: 1.2rem 1.8rem; } .mk-cube { width: 13rem; } .mk-dec { gap: 1.8rem; }
  .mk-say { grid-template-columns: 1fr; gap: 1.6rem; }
  .mw { padding-top: 1rem; } .mw-rules { width: auto; }
  .sy-kpi { gap: 1.2rem 2.4rem; } .sy-kpi b { font-size: 2.4rem; }
  .sy-key { display: contents; } .sy-head { order: -1; } .sy-head + .sy-rest { margin-top: 0; }   /* a synoptic table: the figure, then the picture, then the rest */
  .va-kv .hl { font-size: 4.4rem; }
  .vz { flex: none; } .vz-h { flex-wrap: wrap; } .vz-h em { margin-left: 0; white-space: normal; } .lg { margin-left: 0; flex-wrap: wrap; }
  .vz-c { flex: none; height: 46rem; }
  .kg, .kg.n5 { grid-template-columns: 1fr; grid-auto-rows: auto; gap: 2.4rem 0; }
  .kd.hero { grid-row: auto; } .kd.hero .kd-v { font-size: 5.4rem; } .kd.wide { grid-column: auto; }
  .kd-x, .kd[data-side] .kd-x { position: relative; left: 0; top: 0; display: none; width: auto; margin-top: 1.8rem; box-shadow: 0 .4rem 1.2rem rgba(0,0,0,.18); transform: none; }
  .kd-x::after, .kd-xh, .kd[tabindex]::after { display: none; }   /* on a phone the box opens inside its card, under it: the arrow points up to it */
  .kd-x::before, .kd[data-side] .kd-x::before { top: -1.25rem; bottom: auto; left: calc(50% - 1.3rem); background: #fff; clip-path: polygon(0 100%, 50% 0, 100% 100%); }
  .kg:has(> .kd[tabindex]:is(:hover, :focus-within, .open)) > .kd > :not(.kd-x) { opacity: 1; }
  .kd.open .kd-x { display: block; }
  /* the matrix of an account on a phone: two columns, the names of its lines on more than one line where they need it */
  .pl th, .pl td { padding-left: .45rem; padding-right: .45rem; } .pl td:first-child { white-space: normal; text-wrap: balance; }   /* never one word alone on the last line */
  .pl tbody td:first-child { padding-left: 1.2rem; } .pl tr.sub td:first-child { padding-left: .45rem; }
  .rows { gap: 2.4rem; } .rw, .rw.slim { flex: none; } .rw-l { flex-wrap: wrap; } .rw-l em { margin-left: 0; } .rw-l span { display: none; }
  .kg.n5 .kd-t { display: none; } .kg.n5 .kd.open .kd-t { display: block; }
  .mt { grid-template-columns: 1fr; gap: 2.8rem 0; align-content: start; } .mt > div + div::before { display: none; } .mt p { font-size: 1.9rem; }
  .sf { grid-template-columns: 1fr; gap: 2.6rem 0; align-content: start; } .sf b, .sf b.m { font-size: 4.4rem; } .sf b.s { font-size: 3.6rem; } .sf b.long { font-size: 2.4rem; } .sf span { max-width: none; }
  .todo i { display: block; margin-bottom: .5rem; }
  .nw { grid-template-columns: 1fr; gap: 2.4rem 0; }
  .nw > svg { display: none; }
  .nw-h { margin-bottom: 1.2rem; } .nw-b > b { font-size: var(--t-m); }   /* a name is not smaller than its caption */
  .hub { position: fixed; inset: 6.2rem 0 6.6rem; overflow-y: auto; padding: 2.4rem var(--pad) 3rem; }
  .hub > canvas.net { display: none; }
  .hub-hd { flex-direction: column; gap: .8rem; }
  .hub-hero { width: auto; margin-top: 2.6rem; }
  .hub-hero h1 { font-size: 3.4rem; } .hub-hero p { font-size: 1.8rem; }
  .hub-cta { flex-direction: column; align-items: stretch; }
  .cta-play, .cta-ghost { height: 5.4rem; font-size: 1.8rem; justify-content: center; }
  .hub-rows { margin-top: 3rem; }
  .hr-cards { grid-template-columns: minmax(0, 1fr); }
  .tcard { min-height: 0; padding: 1.4rem 1.5rem; gap: .2rem 1.3rem; }
  .tc-ico { width: 4.4rem; height: 4.4rem; grid-row: 1 / 4; } .tc-ico svg { width: 2.3rem; height: 2.3rem; }
  .tc-title { font-size: 1.9rem; } .tc-q { grid-column: 2; margin-top: .3rem; }
  .evidence { position: fixed; inset: 6.2rem 0 6.6rem; width: auto; }
}