/* Copied from pm.studio (web/site/card/assets/landing.css, 2026-10-25) so
   the .pm served by pm look like the rest of the suite. Keep it in step with
   that file: only the font URLs and the tints of pm's own .pm (end of the
   tokens) differ. */
/* La charte des pages publiques des .pm, épurée : pm.studio, card.pm,
   consent.pm, leads.pm, agenda.pm, nospam.pm, ping.pm, pm.builders,
   suite.pm, sign.pm, vcard.pm, workplace.pm, et leurs pages communes
   (connexion, légal, page introuvable). Une feuille seule, sans app.css :
   graisse 500, grands blancs, une grille 5/6, des filets plutôt que des
   boîtes. Servie depuis les assets de card.pm, que tous ces hôtes
   atteignent. Chaque .pm garde sa teinte (<html data-pm="…">), posée avec
   parcimonie : un point, un filet, jamais un aplat. pm.studio et suite.pm
   restent en noir et blanc, avec la gamme CMJN pour seul clin d'œil (les
   cartes papier évitées). Les maquettes (fenêtres, application, formulaire,
   registre) et les interactions en CSS seul (choix, onglets, cases) sont ici
   aussi ; une page ne garde dans landing-<page>.css que ses propres dessins.
   Le deck de consent.pm en page (_partials/deck-blocks.html sous .ld-deck)
   reprend les mêmes pièces. Les pages et partiels : _partials/landing.html ;
   les comportements : landing.js. */

@font-face { font-family: Outfit; font-weight: 500; font-display: swap; src: url(/cdn/common/suite/fonts/outfit-500.ttf) format("truetype"); }
@font-face { font-family: Outfit; font-weight: 800; font-display: swap; src: url(/cdn/common/suite/fonts/outfit-800.ttf) format("truetype"); }

/* ── 1. Jetons ── */
:root {
  --paper: #f5f6f7; --sheet: #ffffff; --ink: #17191d; --soft: #6b717c; --faint: #9aa0aa; --rule: #e2e5e9;
  --c: #00a0e3; --m: #e4007c; --y: #ffe600;
  --accent: var(--ink);
  /* the sizes, fluid from a phone to a 24" iMac (2240px): the column widens
     with the screen without floating (1120px at 1440, ~1300 on a 16" MacBook,
     1520 at most), and so do its gutters, the gaps and the sections' air */
  --wrap: clamp(1120px, 62vw + 230px, 1520px);
  --gut: clamp(20px, 2.2vw + 8px, 56px);
  --gap: clamp(48px, 4vw + 24px, 120px);
  --sec: clamp(96px, 6vw + 54px, 190px);
  --top-h: 72px;
  color-scheme: light;
}
:root[data-theme='dark'] { --paper: #121418; --sheet: #1a1d22; --ink: #eceef1; --soft: #a3a9b3; --faint: #6f7680; --rule: #2a2e35; color-scheme: dark; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) { --paper: #121418; --sheet: #1a1d22; --ink: #eceef1; --soft: #a3a9b3; --faint: #6f7680; --rule: #2a2e35; color-scheme: dark; }
}
/* the tint of each .pm: the same as pm.css, in light then dark */
:root[data-pm='agenda'] { --accent: #0891b2; }
:root[data-pm='nospam'] { --accent: #dc2626; }
:root[data-pm='ping'] { --accent: #ea580c; }
:root[data-pm='builders'] { --accent: #4f46e5; }
:root[data-pm='sign'] { --accent: #7c3aed; }
:root[data-pm='vcard'] { --accent: #0f766e; }
:root[data-pm='card'] { --accent: #2563eb; }
:root[data-pm='consent'] { --accent: #059669; }
:root[data-pm='leads'] { --accent: #c026d3; }
:root[data-pm='workplace'] { --accent: #d97706; }
:root[data-theme='dark'][data-pm='agenda'] { --accent: #22d3ee; }
:root[data-theme='dark'][data-pm='nospam'] { --accent: #f87171; }
:root[data-theme='dark'][data-pm='ping'] { --accent: #fb923c; }
:root[data-theme='dark'][data-pm='builders'] { --accent: #a5b4fc; }
:root[data-theme='dark'][data-pm='sign'] { --accent: #c4b5fd; }
:root[data-theme='dark'][data-pm='vcard'] { --accent: #5eead4; }
:root[data-theme='dark'][data-pm='card'] { --accent: #3b82f6; }
:root[data-theme='dark'][data-pm='consent'] { --accent: #34d399; }
:root[data-theme='dark'][data-pm='leads'] { --accent: #e879f9; }
:root[data-theme='dark'][data-pm='workplace'] { --accent: #fbbf24; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light'])[data-pm='agenda'] { --accent: #22d3ee; }
  :root:not([data-theme='light'])[data-pm='nospam'] { --accent: #f87171; }
  :root:not([data-theme='light'])[data-pm='ping'] { --accent: #fb923c; }
  :root:not([data-theme='light'])[data-pm='builders'] { --accent: #a5b4fc; }
  :root:not([data-theme='light'])[data-pm='sign'] { --accent: #c4b5fd; }
  :root:not([data-theme='light'])[data-pm='vcard'] { --accent: #5eead4; }
  :root:not([data-theme='light'])[data-pm='card'] { --accent: #3b82f6; }
  :root:not([data-theme='light'])[data-pm='consent'] { --accent: #34d399; }
  :root:not([data-theme='light'])[data-pm='leads'] { --accent: #e879f9; }
  :root:not([data-theme='light'])[data-pm='workplace'] { --accent: #fbbf24; }
}

/* pm's own .pm */
:root[data-pm='scan'] { --accent: #0d9488; }
:root[data-pm='qrcode'] { --accent: #4f46e5; }
:root[data-pm='doc'] { --accent: #7c3aed; }
:root[data-pm='todo'] { --accent: #16a34a; }
:root[data-pm='note'] { --accent: #ca8a04; }
:root[data-pm='keep'] { --accent: #ca8a04; }
:root[data-pm='ocr'] { --accent: #0369a1; }
:root[data-pm='tube'] { --accent: #dc2626; }
:root[data-pm='vitae'] { --accent: #0f766e; }
:root[data-pm='assistant'] { --accent: #9333ea; }
:root[data-pm='invoice'] { --accent: #0f766e; }
:root[data-pm='loyalty'] { --accent: #db2777; }
:root[data-pm='scrap'] { --accent: #b45309; }
:root[data-pm='seopt'] { --accent: #2563eb; }
:root[data-pm='datamix'] { --accent: #17191d; }
:root[data-pm='nfc'] { --accent: #0d9488; }
:root[data-pm='rfid'] { --accent: #0d9488; }
:root[data-theme='dark'][data-pm='scan'] { --accent: #2dd4bf; }
:root[data-theme='dark'][data-pm='qrcode'] { --accent: #a5b4fc; }
:root[data-theme='dark'][data-pm='doc'] { --accent: #c4b5fd; }
:root[data-theme='dark'][data-pm='todo'] { --accent: #4ade80; }
:root[data-theme='dark'][data-pm='note'] { --accent: #facc15; }
:root[data-theme='dark'][data-pm='keep'] { --accent: #facc15; }
:root[data-theme='dark'][data-pm='ocr'] { --accent: #38bdf8; }
:root[data-theme='dark'][data-pm='tube'] { --accent: #f87171; }
:root[data-theme='dark'][data-pm='vitae'] { --accent: #5eead4; }
:root[data-theme='dark'][data-pm='assistant'] { --accent: #d8b4fe; }
:root[data-theme='dark'][data-pm='invoice'] { --accent: #5eead4; }
:root[data-theme='dark'][data-pm='loyalty'] { --accent: #f9a8d4; }
:root[data-theme='dark'][data-pm='scrap'] { --accent: #fbbf24; }
:root[data-theme='dark'][data-pm='seopt'] { --accent: #93c5fd; }
:root[data-theme='dark'][data-pm='datamix'] { --accent: #eceef1; }
:root[data-theme='dark'][data-pm='nfc'] { --accent: #2dd4bf; }
:root[data-theme='dark'][data-pm='rfid'] { --accent: #2dd4bf; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light'])[data-pm='scan'] { --accent: #2dd4bf; }
  :root:not([data-theme='light'])[data-pm='qrcode'] { --accent: #a5b4fc; }
  :root:not([data-theme='light'])[data-pm='doc'] { --accent: #c4b5fd; }
  :root:not([data-theme='light'])[data-pm='todo'] { --accent: #4ade80; }
  :root:not([data-theme='light'])[data-pm='note'] { --accent: #facc15; }
  :root:not([data-theme='light'])[data-pm='keep'] { --accent: #facc15; }
  :root:not([data-theme='light'])[data-pm='ocr'] { --accent: #38bdf8; }
  :root:not([data-theme='light'])[data-pm='tube'] { --accent: #f87171; }
  :root:not([data-theme='light'])[data-pm='vitae'] { --accent: #5eead4; }
  :root:not([data-theme='light'])[data-pm='assistant'] { --accent: #d8b4fe; }
  :root:not([data-theme='light'])[data-pm='invoice'] { --accent: #5eead4; }
  :root:not([data-theme='light'])[data-pm='loyalty'] { --accent: #f9a8d4; }
  :root:not([data-theme='light'])[data-pm='scrap'] { --accent: #fbbf24; }
  :root:not([data-theme='light'])[data-pm='seopt'] { --accent: #93c5fd; }
  :root:not([data-theme='light'])[data-pm='datamix'] { --accent: #eceef1; }
  :root:not([data-theme='light'])[data-pm='nfc'] { --accent: #2dd4bf; }
  :root:not([data-theme='light'])[data-pm='rfid'] { --accent: #2dd4bf; }
}

/* ── 2. Base ── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 500 clamp(16px, .15vw + 14px, 17.5px)/1.65 Outfit, system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
a { color: inherit; }
img { max-width: 100%; }
:focus-visible { outline: 2px solid var(--c); outline-offset: 4px; border-radius: 4px; }
:root[data-pm] :focus-visible { outline-color: var(--accent); }
::selection { background: var(--ink); color: var(--paper); }
.ld-wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gut); }
@media (max-width: 640px) { :root { --top-h: 60px; } }
.ld-skip { position: absolute; left: -9999px; top: 0; }
.ld-skip:focus { left: 16px; top: 12px; background: var(--ink); color: var(--paper); padding: 8px 14px; border-radius: 999px; z-index: 10; }
.ld-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; animation: none !important; } }
/* visually hidden, read aloud */
.ld-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
/* words that stay together on one line */
.ld-nowrap { white-space: nowrap; }
/* a word of a title set back: the second half of a slogan */
.ld-dim { color: var(--faint); }
/* emphasis inside a lead, an intro or a head: the ink, never a heavier weight */
.ld-lead strong, .ld-intro strong, .ld-head p strong, .ld-closing p strong { font-weight: 500; color: var(--ink); }
/* the marks some texts carry in their catalogue (th) */
.marker { box-shadow: inset 0 -.14em 0 color-mix(in srgb, var(--accent) 45%, transparent); }
.serif { color: var(--soft); }
.text-link { color: var(--ink); text-underline-offset: 4px; text-decoration-color: var(--rule); }
/* a logo in two inks: .ld-light on paper, .ld-dark in the dark theme (the top bar's, a brand's mark, a label's) */
:is(.ld-logo, .ld-brandmark, .ld-label) .ld-dark { display: none; }
:root[data-theme='dark'] :is(.ld-logo, .ld-brandmark, .ld-label) .ld-light { display: none; }
:root[data-theme='dark'] :is(.ld-logo, .ld-brandmark, .ld-label) .ld-dark { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) :is(.ld-logo, .ld-brandmark, .ld-label) .ld-light { display: none; }
  :root:not([data-theme='light']) :is(.ld-logo, .ld-brandmark, .ld-label) .ld-dark { display: block; }
}

/* ── 3. La barre haute, les boutons ── */
.ld-top { display: flex; align-items: center; gap: 40px; }
/* the top bar stays: fixed, translucent, aligned on the column; a hairline once the page has moved (landing.js) */
body:has(.ld-top) { padding-top: var(--top-h); }
html:has(.ld-top) { scroll-padding-top: calc(var(--top-h) + 24px); }
.ld-top { position: fixed; z-index: 50; inset: 0 0 auto; height: var(--top-h); padding: 0 max(var(--gut), (100% - var(--wrap)) / 2 + var(--gut)); background: color-mix(in srgb, var(--paper) 74%, transparent); -webkit-backdrop-filter: saturate(1.8) blur(20px); backdrop-filter: saturate(1.8) blur(20px); box-shadow: 0 1px 0 transparent; transition: box-shadow .3s, background-color .3s; }
.ld-top[data-ld-scrolled] { box-shadow: 0 1px 0 var(--rule); }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .ld-top { background: var(--paper); } }
.ld-logo img { height: 17px; width: auto; display: block; }
/* the logo as an svg (card.pm's; a brand's domain swaps it for its img.logo--brand, publish.go) */
.ld-logo svg.logo { display: block; height: 17px; width: auto; aspect-ratio: 2271 / 400; fill: currentColor; }
.ld-logo .logo--brand { display: block; height: 28px; width: auto; }
.ld-top nav { display: flex; gap: 28px; margin-left: auto; font-size: 14px; }
.ld-top nav a, .ld-signin { text-decoration: none; color: var(--soft); white-space: nowrap; transition: color .2s; }
.ld-top nav a:hover, .ld-top nav a[aria-current], .ld-signin:hover { color: var(--ink); }
.ld-signin { font-size: 14px; }
@media (max-width: 900px) { .ld-top nav { display: none; } .ld-signin { margin-left: auto; } }
/* a second link (contact, then sign-in), the bar's own call to act */
.ld-top .ld-signin + .ld-signin { margin-left: 0; }
.ld-top .ld-signin + .ld-btn { margin-left: -12px; }
/* a top bar with many links (a deck's parts): the links hidden earlier */
.ld-top--long nav { gap: 22px; }
@media (max-width: 1240px) { .ld-top--long nav { display: none; } .ld-top--long .ld-signin { margin-left: auto; } .ld-top--long .ld-signin + .ld-signin { margin-left: 0; } }
.ld-btn { display: inline-flex; align-items: center; min-height: 44px; padding: 0 22px; border-radius: 999px; font: inherit; font-size: 14px; text-decoration: none; background: var(--ink); color: var(--paper); border: 0; cursor: pointer; transition: opacity .2s; }
.ld-btn:hover { opacity: .86; }
.ld-btn--small { min-height: 38px; padding: 0 18px; font-size: 13px; }
.ld-quiet { display: inline-flex; align-items: center; min-height: 44px; font-size: 14px; color: var(--soft); text-decoration: underline; text-decoration-color: var(--rule); text-underline-offset: 6px; transition: color .2s, text-decoration-color .2s; }
.ld-quiet:hover { color: var(--ink); text-decoration-color: var(--ink); }
/* a button that reads as a quiet link */
button.ld-quiet { border: 0; padding: 0; background: none; font: inherit; font-size: 14px; cursor: pointer; }
.ld-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 28px; }
@media (max-width: 520px) { .ld-top { gap: 20px; } .ld-top .ld-btn--small { display: none; } }

/* phones and tablets: the bar's links in a full-screen menu, built by landing.js from the bar's own nav */
.ld-burger { display: none; place-items: center; width: 44px; height: 44px; margin: 0 -10px 0 auto; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--ink); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.ld-burger i { grid-area: 1 / 1; width: 20px; height: 1.5px; border-radius: 1px; background: currentColor; transition: transform .35s cubic-bezier(.2, .8, .2, 1); }
.ld-burger i:first-child { transform: translateY(-4px); }
.ld-burger i:last-child { transform: translateY(4px); }
.ld-burger[aria-expanded='true'] i:first-child { transform: rotate(45deg); }
.ld-burger[aria-expanded='true'] i:last-child { transform: rotate(-45deg); }
@media (max-width: 1024px) {
  .ld-top.ld-has-menu > nav, .ld-top.ld-has-menu > .ld-signin { display: none; }
  .ld-top.ld-has-menu > .ld-burger { display: grid; }
  .ld-top.ld-has-menu > .ld-btn { margin-left: auto; }
  .ld-top.ld-has-menu > .ld-btn ~ .ld-burger { margin-left: -8px; }
}
@media (max-width: 520px) { .ld-top.ld-has-menu > .ld-btn--small ~ .ld-burger { margin-left: auto; } } /* the bar's button is hidden there: the menu goes right */
@media (max-width: 1240px) {
  .ld-top--long.ld-has-menu > nav, .ld-top--long.ld-has-menu > .ld-signin { display: none; }
  .ld-top--long.ld-has-menu > .ld-burger { display: grid; }
}
.ld-menu { position: fixed; z-index: 49; inset: 0; display: flex; flex-direction: column; padding: calc(var(--top-h) + 16px) var(--gut) max(28px, env(safe-area-inset-bottom)); background: var(--paper); overflow-y: auto; overscroll-behavior: contain; opacity: 0; visibility: hidden; transition: opacity .25s ease, visibility 0s linear .25s; }
.ld-menu[data-open] { opacity: 1; visibility: visible; transition: opacity .25s ease; }
:root.ld-menu-open { overflow: hidden; }
:root.ld-menu-open .ld-top { background: var(--paper); box-shadow: none; }
.ld-menu nav { display: grid; }
.ld-menu nav a { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 68px; border-top: 1px solid var(--rule); font-size: clamp(24px, 5.5vw, 34px); letter-spacing: -.02em; line-height: 1.15; text-decoration: none; color: var(--ink); transform: translateY(10px); opacity: 0; transition: transform .5s cubic-bezier(.2, .8, .2, 1), opacity .4s ease; transition-delay: calc(var(--i, 0) * 40ms); }
.ld-menu nav a:last-child { border-bottom: 1px solid var(--rule); }
.ld-menu nav a::after { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; }
.ld-menu nav a[aria-current]::after { background: var(--accent); }
.ld-menu[data-open] nav a { transform: none; opacity: 1; }
.ld-menu-acts { display: grid; gap: 12px; margin-top: auto; padding-top: 44px; }
.ld-menu-acts a { justify-content: center; min-height: 54px; font-size: 16px; }
@media (min-width: 641px) { .ld-menu-acts { grid-auto-flow: column; grid-auto-columns: 1fr; } }
/* a pill drawn by a hairline: the second action beside a .ld-btn */
.ld-btn--line { background: none; color: var(--ink); box-shadow: inset 0 0 0 1px var(--rule); }

/* breadcrumbs above an inner page's title */
.ld-crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 26px; padding: 0; font-size: 13px; color: var(--faint); }
.ld-crumbs li + li::before { content: "/"; margin-right: 8px; color: var(--rule); }
.ld-crumbs a { text-decoration: none; color: var(--soft); }
.ld-crumbs a:hover { color: var(--ink); }

/* a quiet notice under the top bar: a dot, one line, a link */
.ld-notice { position: relative; margin: 0; padding: 14px 0 14px 18px; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); font-size: 13px; line-height: 1.5; color: var(--soft); }
.ld-notice::before { content: ""; position: absolute; left: 0; top: 21px; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.ld-notice a { color: var(--ink); text-underline-offset: 4px; text-decoration-color: var(--rule); }

/* ── 4. Le héros : un titre fin, un spécimen ── */
.ld-hero { display: grid; grid-template-columns: 5fr 6fr; gap: var(--gap); align-items: center; padding: clamp(48px, 3vw + 52px, 140px) 0 var(--sec); }
@media (max-width: 960px) { .ld-hero { grid-template-columns: 1fr; gap: 64px; padding: 48px 0 96px; } }
.ld-hero > *, .ld-split > *, .ld-head > * { min-width: 0; } /* a specimen holding a pre never widens the grid */
.ld-hero h1 { font-weight: 500; font-size: clamp(38px, 2.6vw + 22px, 74px); line-height: 1.06; letter-spacing: -.028em; margin: 0 0 28px; max-width: 13ch; text-wrap: balance; }
.ld-hero h1.ld-long { font-size: clamp(32px, 1.9vw + 19px, 58px); line-height: 1.12; max-width: 19ch; } /* a sentence, not a slogan */
/* the quieter echo of a title: its <em> */
.ld-hero h1 em, .ld-section h2 em { font-style: normal; color: var(--soft); }
.ld-lead { font-size: clamp(17px, .4vw + 12.5px, 21px); line-height: 1.6; color: var(--soft); max-width: 36ch; margin: 0 0 40px; }
/* a lead made of paragraphs (a deck's cover), or of two */
.ld-lead p { margin: 0; }
.ld-lead p + p { margin-top: 12px; }
.ld-lead + .ld-lead, .ld-intro + .ld-intro { margin-top: -24px; }
.ld-kicker { display: inline-flex; align-items: center; gap: 10px; font-size: 13px; color: var(--soft); margin: 0 0 22px; }
.ld-kicker::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
/* a kicker's date or tag, in ink */
.ld-kicker b { font-weight: 500; color: var(--ink); }
/* a text-only hero for an inner page: a sentence, its leads */
.ld-hero--solo { grid-template-columns: minmax(0, 1fr); padding: 96px 0 120px; }
.ld-hero--solo h1 { max-width: 20ch; }
.ld-hero--solo .ld-lead { max-width: 56ch; }
@media (max-width: 960px) { .ld-hero--solo { padding: 48px 0 80px; } }

/* a hero title whose last words turn (landing.js lights one at a time; the screen reader reads the title's .ld-sr) */
.ld-rot { display: inline-grid; vertical-align: bottom; overflow: hidden; }
.ld-rot > span { grid-area: 1 / 1; white-space: nowrap; color: var(--soft); opacity: 0; transform: translateY(60%); transition: opacity .5s, transform .6s cubic-bezier(.2,.8,.2,1); }
.ld-rot:not(.is-on) > span:first-child, .ld-rot > span.on { opacity: 1; transform: none; }
.ld-rot > span.off { opacity: 0; transform: translateY(-60%); }
@media (max-width: 640px) { .ld-rot > span { white-space: normal; } }

/* small figures under a hero's actions */
.ld-facts { display: flex; flex-wrap: wrap; gap: 18px 44px; margin: 56px 0 0; padding-top: 28px; border-top: 1px solid var(--rule); }
.ld-facts dt { font-size: 22px; letter-spacing: -.02em; line-height: 1.1; }
.ld-facts dt a { text-decoration: none; }
.ld-facts dd { margin: 4px 0 0; font-size: 13px; color: var(--faint); }
.ld-stars { font-size: 12px; letter-spacing: 1px; color: var(--accent); vertical-align: .2em; }

/* a quiet line under a hero: links and facts side by side */
.ld-hero-note { display: flex; flex-wrap: wrap; gap: 8px 24px; margin: 40px 0 0; font-size: 13px; color: var(--faint); }
.ld-hero-note a { color: var(--soft); text-underline-offset: 4px; text-decoration-color: var(--rule); }

/* a brand's logo above a title, light or dark */
.ld-brandmark { margin: 0 0 32px; }
.ld-brandmark img { height: 24px; width: auto; display: block; }

/* the proof: crop marks around a specimen (the page's own drawing) */
.ld-proof { position: relative; padding: 36px; }
.ld-proof > i.ld-cm { position: absolute; width: 16px; height: 16px; border: 0 solid var(--faint); }
.ld-proof > i.ld-cm:nth-child(1) { top: 0; left: 0; border-right-width: 1px; border-bottom-width: 1px; }
.ld-proof > i.ld-cm:nth-child(2) { top: 0; right: 0; border-left-width: 1px; border-bottom-width: 1px; }
.ld-proof > i.ld-cm:nth-child(3) { bottom: 0; left: 0; border-right-width: 1px; border-top-width: 1px; }
.ld-proof > i.ld-cm:nth-child(4) { bottom: 0; right: 0; border-left-width: 1px; border-top-width: 1px; }
.ld-addr { font-size: 13px; color: var(--faint); margin: 0 0 18px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ld-addr b { font-weight: 500; color: var(--ink); }
.ld-stage { display: grid; grid-template-columns: 200px 1fr; gap: 36px; align-items: center; }
@media (max-width: 520px) { .ld-stage { grid-template-columns: 1fr; gap: 28px; } .ld-phone { max-width: 240px; } }
.ld-phone { border-radius: 30px; background: #fff; color: #17191d; overflow: hidden; box-shadow: 0 0 0 1px rgba(0,0,0,.06), 0 30px 60px -30px rgba(23,25,29,.35); display: flex; flex-direction: column; min-height: 360px; }
.ld-phone .ld-band { background: var(--b, var(--accent)); height: 112px; display: flex; align-items: flex-end; padding: 14px; transition: background .5s ease; }
.ld-phone .ld-mark { background: #fff; border-radius: 10px; height: 40px; padding: 6px 10px; display: flex; align-items: center; }
.ld-phone .ld-mark img { max-height: 28px; max-width: 110px; }
.ld-phone .ld-mark span { font-weight: 800; font-size: 13px; letter-spacing: -.01em; color: var(--b-text, var(--b)); transition: color .5s ease; }
.ld-phone .ld-who { padding: 16px 16px 0; font-size: 12px; color: #6b717c; line-height: 1.45; }
.ld-phone .ld-who b { display: block; font-weight: 500; font-size: 17px; color: #17191d; margin-bottom: 2px; }
.ld-phone .ld-acts { display: grid; gap: 6px; padding: 16px; margin-top: auto; }
.ld-phone .ld-acts span { display: block; border-radius: 9px; padding: 9px 12px; font-size: 12px; background: #f3f4f6; }
.ld-phone .ld-acts span:first-child { background: var(--b, var(--accent)); color: var(--b-ink, #fff); transition: background .5s ease, color .5s ease; }
.ld-media { display: grid; gap: 30px; }
.ld-media h3 { font-size: 12px; font-weight: 500; color: var(--faint); margin: 0 0 10px; }
.ld-sig { display: flex; gap: 12px; font-size: 13px; line-height: 1.45; color: var(--soft); }
.ld-sig::before { content: ""; width: 2px; border-radius: 1px; background: var(--b, var(--accent)); transition: background .5s ease; }
.ld-sig b { display: block; font-weight: 500; color: var(--b-text, var(--ink)); transition: color .5s ease; }
.ld-lines i { display: block; height: 6px; border-radius: 3px; background: var(--rule); margin: 0 0 8px; }
.ld-lines i:nth-child(2) { width: 64%; }
.ld-lines span { display: inline-block; margin-top: 6px; border-radius: 999px; padding: 5px 12px; font-size: 12px; background: var(--b, var(--accent)); color: var(--b-ink, #fff); transition: background .5s ease, color .5s ease; }
.ld-swatches { display: flex; gap: 18px; font-size: 12px; color: var(--soft); }
.ld-swatches span { display: inline-flex; align-items: center; gap: 8px; }
.ld-swatches i { width: 14px; height: 14px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0,0,0,.08); }
.ld-switch { display: flex; flex-wrap: wrap; gap: 6px 26px; margin: 28px 36px 0; font-size: 14px; }
.ld-switch button { border: 0; background: none; font: inherit; color: var(--faint); padding: 10px 0; cursor: pointer; border-bottom: 1px solid transparent; transition: color .2s, border-color .2s; }
.ld-switch button:hover { color: var(--ink); }
.ld-switch button[aria-pressed='true'] { color: var(--ink); border-bottom-color: var(--ink); }
.ld-note { font-size: 13px; color: var(--soft); margin: 14px 36px 0; min-height: 3.2em; max-width: 52ch; }
/* the switch and its note flush with the text, outside a proof */
.ld-switch--flush { margin: 0; }
.ld-note--flush { margin: 10px 0 0; min-height: 2.6em; }

/* a generic sheet for the other specimens: a white page, its hairlines */
.ld-sheet { background: var(--sheet); border-radius: 22px; box-shadow: 0 0 0 1px var(--rule), 0 30px 60px -36px rgba(23,25,29,.3); padding: 28px; }
.ld-sheet h3 { font-size: 12px; font-weight: 500; color: var(--faint); margin: 0 0 14px; }
/* a sheet's head line: its title, a tag at the right */
.ld-sheet-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 0 0 14px; }
.ld-sheet .ld-sheet-head h3 { margin: 0; }
/* a sheet's summary line, above its rows */
.ld-pulse { margin: 0; padding: 0 0 14px; border-bottom: 1px solid var(--rule); font-size: 14px; color: var(--ink); }
.ld-rows { list-style: none; margin: 0; padding: 0; font-size: 14px; }
.ld-rows li { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 0; border-top: 1px solid var(--rule); }
.ld-rows li:first-child { border-top: 0; }
.ld-rows small { color: var(--faint); font-size: 12px; }
/* a row that holds a task: what (a name, its detail), when (a tag, a time) */
.ld-rows .ld-what { display: grid; gap: 2px; min-width: 0; }
.ld-rows .ld-what b { font-weight: 500; }
.ld-rows .ld-what span { color: var(--soft); font-size: 13px; }
.ld-rows .ld-when { display: flex; align-items: center; gap: 10px; flex: none; }
@media (max-width: 420px) { .ld-rows li:has(.ld-what) { flex-direction: column; align-items: flex-start; gap: 8px; } }
/* rows of key and value: the key soft, the value at the right in ink (a b: in monospace) */
.ld-rows--kv li { font-size: 14px; }
.ld-rows--kv li > :first-child { color: var(--soft); }
.ld-rows--kv li > :last-child { text-align: right; }
.ld-rows--kv li > :last-child:not(.ld-tag, .ld-ok) { color: var(--ink); }
.ld-rows--kv b { font: 500 12px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; overflow-wrap: anywhere; }
.ld-rows--kv small { overflow-wrap: anywhere; }
.ld-ok { color: var(--accent); }
/* a sealed record: a sheet, its rows of key and value, its stamp, its fingerprint */
.ld-sealed { position: relative; padding-top: 60px; } /* room for the stamp above the first row */
.ld-stamp { position: absolute; right: -18px; top: -26px; width: 84px; height: 84px; border-radius: 50%; display: grid; place-items: center; text-align: center; font-size: 11px; line-height: 1.15; color: var(--accent); background: var(--sheet); box-shadow: inset 0 0 0 1px var(--accent); rotate: 10deg; }
@media (prefers-reduced-motion: no-preference) { .ld-stamp { animation: ld-press .9s cubic-bezier(.2, 1.4, .4, 1) .3s both; } }
@keyframes ld-press { from { rotate: -8deg; scale: 1.3; opacity: 0; } to { rotate: 10deg; scale: 1; opacity: 1; } }
@media (max-width: 520px) { .ld-stamp { right: 6px; } }
.ld-hash { margin: 14px 0 0; padding: 12px 0 0; border-top: 1px solid var(--ink); font: 500 11px/1.6 ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--accent); word-break: break-all; }
.ld-hash b { font-weight: 500; }
/* a tag, and small tags in a row (.on: the chosen one, in ink) */
.ld-tag { font-size: 12px; padding: 3px 10px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--rule); color: var(--soft); white-space: nowrap; }
.ld-tag--on { box-shadow: none; background: var(--accent); color: #fff; }
.ld-tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; justify-content: inherit; }
.ld-tags > span { padding: 6px 12px; border-radius: 999px; font-size: 12px; color: var(--soft); box-shadow: inset 0 0 0 1px var(--rule); white-space: nowrap; }
.ld-tags > span.on { background: var(--ink); color: var(--paper); box-shadow: none; }
/* code: monospace, its values in the tint, its comments faint */
.ld-code { margin: 0; font: 500 13px/1.7 ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--ink); white-space: pre; overflow-x: auto; }
.ld-code em { font-style: normal; color: var(--accent); }
.ld-code i { font-style: normal; color: var(--faint); }
.ld-code .key, .ld-code .ld-key { color: var(--soft); }
.ld-code .value, .ld-code .code-value, .ld-code .ld-val { color: var(--accent); }
.ld-code .code-warn, .ld-code .ld-warn { color: var(--ink); text-decoration: underline; text-decoration-color: var(--faint); text-underline-offset: 3px; }

/* ── 5. Les sections ── */
.ld-section { padding: var(--sec) 0; }
.ld-section + .ld-section { border-top: 1px solid var(--rule); }
@media (max-width: 640px) { .ld-section { padding: 96px 0; } }
.ld-head { display: grid; grid-template-columns: 5fr 6fr; gap: var(--gap); margin-bottom: 72px; }
@media (max-width: 960px) { .ld-head { grid-template-columns: 1fr; gap: 20px; margin-bottom: 56px; } }
.ld-head:last-child { margin-bottom: 0; }
.ld-section h2 { font-weight: 500; font-size: clamp(28px, 1.5vw + 18px, 52px); line-height: 1.12; letter-spacing: -.02em; margin: 0; max-width: 16ch; text-wrap: balance; }
.ld-head p { margin: 6px 0 0; color: var(--soft); font-size: clamp(16px, .35vw + 12px, 19.5px); max-width: 48ch; }
.ld-head p + p { margin-top: 14px; }
.ld-section h3 { font-weight: 500; }
/* a kicker above a section's title (in the head's first column) */
.ld-head .ld-kicker, .ld-split .ld-kicker { font-size: 13px; color: var(--soft); margin: 0 0 22px; max-width: none; }
/* a title of the third level set as a block's own */
.ld-h3 { font-size: 20px; line-height: 1.3; font-weight: 500; margin: 0 0 12px; letter-spacing: -.01em; }
/* a small caption above a block */
.ld-label { display: block; font-size: 12px; color: var(--faint); margin: 0 0 14px; }

/* two columns: a text, a drawing (--rev: the drawing first) */
.ld-split { display: grid; grid-template-columns: 5fr 6fr; gap: var(--gap); align-items: start; }
.ld-split--center { align-items: center; }
@media (max-width: 960px) { .ld-split { grid-template-columns: 1fr; gap: 56px; } }
@media (min-width: 961px) { .ld-split--rev > :first-child { order: 2; } }
.ld-split h2 { margin-bottom: 20px; }
.ld-intro { color: var(--soft); font-size: clamp(16px, .35vw + 12px, 19.5px); margin: 0 0 44px; max-width: 40ch; }
/* a text beside its drawing: the copy's paragraphs, its list, its link */
.ld-copy > p { color: var(--soft); font-size: 16px; margin: 0 0 16px; max-width: 46ch; }
.ld-copy > p strong, .ld-copy > p b { font-weight: 500; color: var(--ink); }
.ld-copy h2 { margin-bottom: 24px; }
.ld-copy .ld-actions, .ld-copy > .ld-quiet { margin-top: 20px; }
.ld-copy .ld-checks { margin: 8px 0 20px; }
.ld-copy .ld-tags { margin: 4px 0 20px; }
.ld-copy > .ld-code { margin: 4px 0 20px; padding: 16px 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); font-size: 12px; }
.ld-roles { list-style: none; margin: 0; padding: 0; display: grid; gap: 22px; font-size: 15px; color: var(--soft); }
.ld-roles b { display: block; font-weight: 500; color: var(--ink); }
/* a remark set apart under a text: a hairline in the tint at its left */
.ld-aside { padding-left: 16px; border-left: 1px solid var(--accent); color: var(--ink) !important; }
.ld-aside b { font-weight: 500; }

/* a legend beside a drawing: hovering a line focuses it (pm-stack3d) */
.ld-legend { list-style: none; margin: 0; padding: 0; display: grid; }
.ld-legend li { padding: 26px 0; border-top: 1px solid var(--rule); transition: opacity .3s; }
.ld-legend li:last-child { border-bottom: 1px solid var(--rule); }
.ld-legend:hover li:not(:hover) { opacity: .45; }
.ld-legend .ld-n { font-size: 12px; color: var(--faint); }
.ld-legend h3 { font-size: 20px; margin: 4px 0 6px; }
.ld-legend p { margin: 0; color: var(--soft); font-size: 15px; max-width: 40ch; }

/* steps in order (a number over an ink hairline); a link or a list below */
.ld-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 56px; margin: 0; padding: 0; list-style: none; }
@media (max-width: 860px) { .ld-steps { grid-template-columns: 1fr; } }
.ld-steps .ld-n { font-size: 13px; color: var(--faint); display: block; padding-bottom: 18px; border-bottom: 1px solid var(--ink); margin-bottom: 22px; }
.ld-steps h3 { font-size: 20px; margin: 0 0 8px; }
.ld-steps p { margin: 0; color: var(--soft); font-size: 15px; }
.ld-steps .ld-quiet, .ld-steps .ld-btn { margin-top: 18px; }
.ld-steps .ld-checks { margin: 14px 0 0; font-size: 14px; }
/* steps whose number is a word: plans, their line in ink */
.ld-plans p { font-size: 16px; color: var(--ink); max-width: 30ch; }

/* points, three by three: a dot each (CMYK on pm.studio, the tint elsewhere); --2, --4 */
.ld-points { display: grid; grid-template-columns: repeat(3, 1fr); gap: 56px; margin: 0; padding: 0; list-style: none; }
@media (max-width: 860px) { .ld-points { grid-template-columns: 1fr 1fr; gap: 44px 32px; } }
@media (max-width: 560px) { .ld-points { grid-template-columns: 1fr; } }
.ld-points h3 { font-size: 16px; margin: 0 0 8px; display: flex; align-items: center; gap: 10px; }
.ld-points h3::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
:root:not([data-pm]) .ld-points h3::before, :root[data-pm='suite'] .ld-points h3::before { background: var(--c); }
:root:not([data-pm]) .ld-points li:nth-child(3n+2) h3::before, :root[data-pm='suite'] .ld-points li:nth-child(3n+2) h3::before { background: var(--m); }
:root:not([data-pm]) .ld-points li:nth-child(3n) h3::before, :root[data-pm='suite'] .ld-points li:nth-child(3n) h3::before { background: var(--y); box-shadow: 0 0 0 1px rgba(0,0,0,.12); }
.ld-points p { margin: 0; color: var(--soft); font-size: 14px; max-width: 34ch; }
.ld-points p + p, .ld-points p + .ld-tags { margin-top: 18px; }
.ld-points p + .ld-checks { margin: 18px 0 24px; font-size: 14px; }
.ld-points em { font-style: normal; color: var(--ink); }
/* the one point that stands out */
.ld-points .ld-em h3::before { box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 22%, transparent); }
.ld-points .ld-em h3 { color: var(--ink); }
.ld-points--2 { grid-template-columns: 1fr 1fr; gap: 56px 80px; }
@media (max-width: 560px) { .ld-points--2 { grid-template-columns: 1fr; } }
/* four in a row: steps or points */
.ld-steps--4, .ld-points--4 { grid-template-columns: repeat(4, 1fr); gap: 44px; }
@media (max-width: 1060px) { .ld-steps--4, .ld-points--4 { grid-template-columns: 1fr 1fr; gap: 44px 32px; } }
@media (max-width: 560px) { .ld-steps--4, .ld-points--4 { grid-template-columns: 1fr; } }
.ld-steps.ld-steps--rows { row-gap: 64px; }

/* rows: a name and its facts */
.ld-cases { margin: 0; padding: 0; list-style: none; }
.ld-case { display: grid; grid-template-columns: 5fr 6fr; gap: var(--gap); padding: 44px 0; border-top: 1px solid var(--rule); }
.ld-case:last-child { border-bottom: 1px solid var(--rule); }
@media (max-width: 860px) { .ld-case { grid-template-columns: 1fr; gap: 18px; padding: 36px 0; } }
.ld-case .ld-who { display: flex; align-items: center; gap: 18px; }
.ld-case .ld-who i { width: 10px; height: 10px; border-radius: 50%; background: var(--cc, var(--accent)); flex: none; }
.ld-case h3 { font-size: 22px; margin: 0; letter-spacing: -.01em; }
.ld-case .ld-who span { color: var(--soft); font-size: 14px; }
.ld-case ul { margin: 0; padding: 0; list-style: none; color: var(--soft); font-size: 15px; display: grid; gap: 8px; }
.ld-case code { font: inherit; color: var(--ink); }

/* figures, then the references (--3: three, their title and text below) */
.ld-scale { display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px; margin: 0; }
@media (max-width: 760px) { .ld-scale { grid-template-columns: 1fr 1fr; gap: 44px 24px; } }
.ld-scale dt { font-size: clamp(30px, 3.4vw, 44px); letter-spacing: -.025em; line-height: 1; }
.ld-scale dd { margin: 12px 0 0; color: var(--soft); font-size: 14px; }
.ld-scale dd b { display: block; font-weight: 500; color: var(--ink); font-size: 15px; margin-bottom: 6px; }
.ld-scale dd a { color: var(--ink); text-underline-offset: 4px; text-decoration-color: var(--rule); }
.ld-scale--3 { grid-template-columns: repeat(3, 1fr); gap: 56px; }
@media (max-width: 760px) { .ld-scale--3 { grid-template-columns: 1fr; gap: 44px; } }
.ld-logos { display: flex; flex-wrap: wrap; align-items: center; gap: 20px 44px; margin-top: 96px; }
.ld-logos img { height: 30px; width: auto; filter: grayscale(1); opacity: .55; mix-blend-mode: multiply; transition: opacity .3s, filter .3s; }
.ld-logos img:hover { filter: none; opacity: 1; }
:root[data-theme='dark'] .ld-logos img { mix-blend-mode: normal; background: #fff; border-radius: 6px; padding: 4px 8px; height: 34px; opacity: .7; }
@media (prefers-color-scheme: dark) { :root:not([data-theme='light']) .ld-logos img { mix-blend-mode: normal; background: #fff; border-radius: 6px; padding: 4px 8px; height: 34px; opacity: .7; } }
/* a band without its own title: figures, then the references and their line */
.ld-refs { padding: 0 0 120px; }
.ld-refs + .ld-section { border-top: 1px solid var(--rule); }
.ld-trust { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 32px; margin: 96px 0 32px; padding-top: 28px; border-top: 1px solid var(--rule); font-size: 14px; color: var(--soft); }
.ld-trust p { margin: 0; max-width: 60ch; }

/* a running band of logos or names (components/pm-marquee.js doubles the list) */
.ld-marquee { display: flex; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.ld-marquee .marquee-track { display: flex; flex: none; align-items: center; gap: 64px; margin: 0; padding: 8px 64px 8px 0; list-style: none; }
.ld-marquee[running] .marquee-track { animation: ld-marquee 60s linear infinite; }
.ld-marquee[running]:is(:hover, :focus-within) .marquee-track { animation-play-state: paused; }
.ld-marquee a { display: block; line-height: 0; border-radius: 4px; }
.ld-marquee img { height: 30px; width: auto; filter: grayscale(1); opacity: .5; mix-blend-mode: multiply; transition: opacity .3s, filter .3s; }
.ld-marquee a:is(:hover, :focus-visible) img { filter: none; opacity: 1; }
.ld-marquee a:not(:has(img)) { line-height: 1.4; font-size: 17px; color: var(--soft); text-decoration: none; white-space: nowrap; transition: color .2s; }
.ld-marquee a:not(:has(img)):hover { color: var(--ink); }
:root[data-theme='dark'] .ld-marquee img { filter: grayscale(1) invert(1); mix-blend-mode: screen; }
@media (prefers-color-scheme: dark) { :root:not([data-theme='light']) .ld-marquee img { filter: grayscale(1) invert(1); mix-blend-mode: screen; } }
@keyframes ld-marquee { to { translate: -100% 0; } }
@media (max-width: 640px) { .ld-marquee .marquee-track { gap: 40px; padding-right: 40px; } .ld-marquee img { height: 24px; } }
@media (prefers-reduced-motion: reduce) { .ld-marquee { -webkit-mask-image: none; mask-image: none; } .ld-marquee .marquee-track { flex-wrap: wrap; } }

/* one large figure beside its argument (--stack: inside a column, no rule) */
.ld-figure { display: grid; grid-template-columns: 5fr 6fr; gap: var(--gap); align-items: end; margin-top: 120px; padding-top: 44px; border-top: 1px solid var(--rule); }
.ld-figure > p { margin: 0; color: var(--soft); font-size: 14px; }
.ld-figure > p b { display: block; font-weight: 500; font-size: clamp(40px, 5.4vw, 72px); letter-spacing: -.035em; line-height: 1; color: var(--ink); margin-bottom: 12px; font-variant-numeric: tabular-nums; }
.ld-figure h3 { font-size: 20px; margin: 0 0 8px; }
.ld-figure div p { margin: 0; color: var(--soft); font-size: 15px; max-width: 48ch; }
@media (max-width: 860px) { .ld-figure { grid-template-columns: 1fr; gap: 28px; margin-top: 88px; } }
.ld-figure--stack { grid-template-columns: 1fr; gap: 24px; margin-top: 0; padding-top: 0; border-top: 0; }

/* a quote: a large sentence (a blockquote, or a figure holding one), who said it below */
.ld-quote { margin: 0; max-width: 34ch; }
.ld-quote blockquote { margin: 0; }
.ld-quote p { margin: 0; font-size: clamp(22px, 2.4vw, 30px); line-height: 1.3; letter-spacing: -.015em; }
.ld-quote footer, .ld-quote figcaption { margin-top: 20px; font-size: 14px; color: var(--soft); }
/* a sentence that stands for a section: large, fine, its emphasis in the tint */
.ld-section .ld-statement { font-size: clamp(26px, 3vw, 38px); line-height: 1.22; letter-spacing: -.02em; max-width: 26ch; margin: 0 0 80px; }
.ld-section .ld-statement em { font-style: normal; color: var(--accent); }
@media (max-width: 640px) { .ld-section .ld-statement { margin-bottom: 56px; } }

/* sides side by side, a hairline above each (--3: three; .ld-now: the one that wins, its hairline in ink, a dot in the tint) */
.ld-compare, .ld-deck .deck-compare { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 56px; }
.ld-compare--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 860px) { .ld-compare, .ld-compare--3, .ld-deck .deck-compare { grid-template-columns: 1fr; gap: 36px; } }
.ld-compare > *, .ld-deck .deck-compare > div { padding-top: 22px; border-top: 1px solid var(--rule); }
.ld-compare h3 { font-size: 20px; line-height: 1.3; margin: 0 0 8px; }
.ld-compare p, .ld-deck .deck-compare p { margin: 0; color: var(--soft); font-size: 15px; max-width: 44ch; }
.ld-compare .ld-label, .ld-deck .deck-compare b { display: flex; align-items: center; gap: 10px; font-size: 12px; font-weight: 500; color: var(--faint); margin: 0 0 12px; }
.ld-compare .ld-label img { height: 13px; width: auto; }
.ld-compare > .ld-now, .ld-deck .deck-compare > div:last-child { border-top-color: var(--ink); }
.ld-compare > .ld-now .ld-label::before, .ld-deck .deck-compare > div:last-child b::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.ld-compare .ld-checks { margin: 18px 0 0; }
.ld-compare .ld-quiet { margin-top: 14px; }

/* a ticked list: a fine tick in the tint (ol: numbered; --no: a dash, what does not hold) */
.ld-checks { list-style: none; margin: 0 0 40px; padding: 0; display: grid; gap: 12px; font-size: 15px; color: var(--soft); max-width: 46ch; }
.ld-checks li { position: relative; padding-left: 26px; }
.ld-checks li::before { content: ""; position: absolute; left: 2px; top: .45em; width: 9px; height: 5px; border-left: 1.5px solid var(--accent); border-bottom: 1.5px solid var(--accent); transform: rotate(-45deg); }
.ld-checks--no li::before { top: .8em; height: 0; border-left: 0; border-bottom-color: var(--faint); transform: none; }
ol.ld-checks { counter-reset: ld-check; }
ol.ld-checks li { counter-increment: ld-check; padding-left: 32px; }
ol.ld-checks li::before { content: counter(ld-check, decimal-leading-zero); left: 0; top: .15em; width: auto; height: auto; border: 0; transform: none; font-size: 12px; color: var(--faint); }
.ld-checks b, .ld-checks strong { font-weight: 500; color: var(--ink); }

/* a fine note under a block: a source, a limit; a caption under a drawing */
.ld-fine { font-size: 13px; color: var(--faint); max-width: 72ch; margin: 24px 0 0; }
.ld-fine strong { font-weight: 500; color: var(--soft); }
.ld-cap { margin: 0; font-size: 12px; color: var(--faint); max-width: 52ch; }
pm-nfc-deck + .ld-cap { margin-top: -8px; }

/* questions */
.ld-faq { margin: 0; padding: 0; list-style: none; }
.ld-faq details { border-top: 1px solid var(--rule); }
.ld-faq li:last-child details { border-bottom: 1px solid var(--rule); }
.ld-faq summary { list-style: none; cursor: pointer; padding: 24px 0; font-size: 18px; display: flex; justify-content: space-between; gap: 24px; }
.ld-faq summary::-webkit-details-marker { display: none; }
.ld-faq summary::after { content: "+"; color: var(--faint); transition: transform .2s; }
.ld-faq details[open] summary::after { transform: rotate(45deg); }
.ld-faq p { margin: 0 0 24px; color: var(--soft); max-width: 62ch; }

/* ── 6. Tableaux et listes ── */
/* a table of hairlines; on a phone, .ld-table's rows stack, each cell named by its data-label */
.ld-table, .ld-deck .deck-table { overflow-x: auto; }
.ld-table table, .ld-deck .deck-table table { width: 100%; border-collapse: collapse; font-size: 15px; }
.ld-table th, .ld-deck .deck-table th { font-weight: 500; font-size: 12px; color: var(--faint); text-align: left; vertical-align: bottom; padding: 0 24px 14px 0; }
.ld-table td, .ld-deck .deck-table td { text-align: left; vertical-align: top; padding: 18px 24px 18px 0; border-top: 1px solid var(--rule); color: var(--soft); }
.ld-table td b, .ld-deck .deck-table td b { font-weight: 500; color: var(--ink); }
.ld-table td.good > b:first-child { display: inline-flex; align-items: center; gap: 8px; }
.ld-table td.good > b:first-child::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.ld-table td.bad > b:first-child { color: var(--soft); }
.ld-deck .deck-table td.good { color: var(--ink); }
@media (max-width: 640px) {
  .ld-table thead { display: none; }
  .ld-table tr { display: block; padding: 18px 0; border-top: 1px solid var(--rule); }
  .ld-table td { display: block; border: 0; padding: 4px 0; }
  .ld-table td[data-label]::before { content: attr(data-label); display: block; font-size: 12px; color: var(--faint); margin-top: 10px; }
}

/* a table in rows of divs: a head line, then one row per item, three columns */
.ld-matrix { border-bottom: 1px solid var(--rule); }
.ld-matrix > div { display: grid; grid-template-columns: 1fr 1fr 1.2fr; gap: 40px; padding: 26px 0; border-top: 1px solid var(--rule); }
.ld-matrix > div:first-child { padding: 0 0 14px; border-top: 0; font-size: 12px; color: var(--faint); }
.ld-matrix h3 { font-size: 17px; margin: 0; line-height: 1.35; }
.ld-matrix p { margin: 0; font-size: 14px; color: var(--soft); }
.ld-matrix p strong { font-weight: 500; color: var(--ink); }
@media (max-width: 860px) { .ld-matrix > div { grid-template-columns: 1fr; gap: 8px; } .ld-matrix > div:first-child { display: none; } }

/* definitions on hairlines: a term in the margin, its value */
.ld-defs { margin: 0; display: grid; }
.ld-defs > div { display: grid; grid-template-columns: 11em 1fr; gap: 20px; padding: 14px 0; border-top: 1px solid var(--rule); font-size: 14px; }
.ld-defs > div:last-child { border-bottom: 1px solid var(--rule); }
.ld-defs dt { color: var(--faint); }
.ld-defs dd { margin: 0; color: var(--ink); }
.ld-defs a { text-underline-offset: 4px; text-decoration-color: var(--rule); }
@media (max-width: 520px) { .ld-defs > div { grid-template-columns: 1fr; gap: 2px; } }

/* a record's facts: the key above its value, two columns of hairlines */
.ld-kv { display: grid; grid-template-columns: 1fr 1fr; column-gap: 28px; margin: 0; }
.ld-kv div { padding: 11px 0; border-top: 1px solid var(--rule); min-width: 0; }
.ld-kv dt { font-size: 11px; color: var(--faint); }
.ld-kv dd { margin: 2px 0 0; font-size: 13px; overflow-wrap: anywhere; }
@media (max-width: 560px) { .ld-kv { grid-template-columns: 1fr; } }

/* an index of links: a name, its line, two columns of hairlines */
.ld-index { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; column-gap: 40px; }
.ld-index li { border-top: 1px solid var(--rule); }
.ld-index a { display: grid; gap: 2px; padding: 16px 0; text-decoration: none; font-size: 14px; color: var(--soft); transition: color .2s; }
.ld-index b { font-weight: 500; color: var(--ink); font-size: 15px; letter-spacing: .01em; }
.ld-index a:hover { color: var(--ink); }
@media (max-width: 560px) { .ld-index { grid-template-columns: 1fr; } }

/* a feature list: a small title, a line; three columns of hairlines (--2: two) */
.ld-feats { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); column-gap: 44px; }
.ld-feats li { padding: 22px 0; border-top: 1px solid var(--rule); }
.ld-feats h3 { font-size: 15px; margin: 0 0 4px; }
.ld-feats p { margin: 0; font-size: 14px; color: var(--soft); max-width: 36ch; }
@media (max-width: 860px) { .ld-feats { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .ld-feats { grid-template-columns: 1fr; } }
.ld-feats--2 { grid-template-columns: 1fr 1fr; column-gap: 32px; }
@media (max-width: 560px) { .ld-feats--2 { grid-template-columns: 1fr; } }

/* a day, hour by hour: the time in the margin, a hairline between (--1: one column, a label .ld-k in place of a time) */
.ld-day { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--gap); }
.ld-day li { display: grid; grid-template-columns: 88px 1fr; gap: 24px; padding: 28px 0; border-top: 1px solid var(--rule); }
.ld-day time { font-size: 14px; color: var(--accent); font-variant-numeric: tabular-nums; padding-top: 2px; }
.ld-day h3 { font-size: 17px; margin: 0 0 6px; }
.ld-day p { margin: 0; font-size: 14px; color: var(--soft); }
@media (max-width: 860px) { .ld-day { grid-template-columns: 1fr; } }
.ld-day--1 { grid-template-columns: 1fr; }
.ld-day .ld-k { font-size: 13px; color: var(--accent); padding-top: 2px; }

/* a bar chart in rows: a label, a bar in the tint, a value (--pct: a percentage) */
.ld-bars { list-style: none; margin: 0; padding: 0; display: grid; }
.ld-bars li { display: grid; grid-template-columns: minmax(0, 1fr) 1.2fr 3ch; gap: 16px; align-items: center; padding: 12px 0; border-top: 1px solid var(--rule); font-size: 14px; }
.ld-bars i { display: block; height: 3px; border-radius: 2px; background: var(--accent); width: var(--w, 50%); }
.ld-bars b { font-weight: 500; text-align: right; font-variant-numeric: tabular-nums; }
.ld-bars--pct li { grid-template-columns: minmax(0, 1fr) 1.2fr 5ch; }
.ld-bars--pct b { white-space: nowrap; }

/* a process in a line: numbered steps joined by a hairline */
.ld-flow { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 0 28px; }
.ld-flow li { position: relative; padding: 18px 0 0; border-top: 1px solid var(--ink); font-size: 16px; }
.ld-flow li::after { content: ""; position: absolute; top: -4px; right: -18px; width: 7px; height: 7px; border-top: 1px solid var(--faint); border-right: 1px solid var(--faint); transform: rotate(45deg); }
.ld-flow li:last-child::after { display: none; }
.ld-flow span { display: block; font-size: 12px; color: var(--accent); margin: 0 0 6px; }
.ld-flow b { font-weight: 500; }
.ld-section > .ld-wrap > .ld-flow:first-child { margin-top: -40px; }
@media (max-width: 760px) { .ld-flow { grid-template-columns: 1fr; gap: 22px; } .ld-flow li::after { display: none; } }

/* steps that each give a result: a number, a text, the result aside */
.ld-outcomes { list-style: none; margin: 0; padding: 0; }
.ld-outcomes li { display: grid; grid-template-columns: 80px minmax(0, 1fr) minmax(0, .7fr); gap: 40px; padding: 36px 0; border-top: 1px solid var(--rule); }
.ld-outcomes li:last-child { border-bottom: 1px solid var(--rule); }
.ld-outcomes .ld-n { font-size: 13px; color: var(--faint); padding-top: 4px; }
.ld-outcomes h3, .ld-outcomes .ld-h3 { font-size: 20px; line-height: 1.3; letter-spacing: 0; max-width: none; margin: 0 0 8px; }
.ld-outcomes p { margin: 0; color: var(--soft); font-size: 15px; max-width: 52ch; }
.ld-outcomes .ld-result { align-self: start; padding-left: 16px; border-left: 2px solid var(--accent); font-size: 14px; color: var(--soft); }
.ld-outcomes .ld-result strong { display: block; font-weight: 500; font-size: 12px; color: var(--faint); }
@media (max-width: 860px) { .ld-outcomes li { grid-template-columns: 1fr; gap: 12px; padding: 28px 0; } }

/* an offer: its name over an ink hairline, what it holds, its button */
.ld-plan .ld-n { display: block; font-size: 13px; color: var(--faint); padding-bottom: 18px; border-bottom: 1px solid var(--ink); margin-bottom: 26px; }
.ld-plan .ld-checks { font-size: 16px; color: var(--ink); }

/* a grid of tiles split by hairlines: a title, a text, a drawing (6 columns: --3, --4) */
.ld-tiles { display: grid; grid-template-columns: repeat(6, 1fr); border-top: 1px solid var(--rule); border-left: 1px solid var(--rule); }
.ld-tile { grid-column: span 2; display: grid; grid-template-rows: auto 1fr; gap: 32px; padding: 36px; border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule); min-width: 0; }
.ld-tile--3 { grid-column: span 3; }
.ld-tile--4 { grid-column: span 4; }
.ld-tile h3 { font-size: 17px; margin: 0 0 8px; }
.ld-tile p { margin: 0; font-size: 14px; color: var(--soft); max-width: 46ch; }
.ld-tile strong { font-weight: 500; color: var(--ink); }
.ld-art { display: grid; align-content: end; justify-items: center; gap: 14px; min-width: 0; }
.ld-tile .ld-art > * { max-width: 100%; }
.ld-art .ld-cap { text-align: center; }
.ld-tile .ld-cap { font-size: 12px; color: var(--faint); }
.ld-art .ld-tags { justify-content: center; max-width: 360px; }
@media (max-width: 960px) { .ld-tiles { grid-template-columns: 1fr 1fr; } .ld-tile, .ld-tile--3 { grid-column: span 1; } .ld-tile--4 { grid-column: span 2; } }
@media (max-width: 600px) { .ld-tiles { grid-template-columns: 1fr; } .ld-tile, .ld-tile--3, .ld-tile--4 { grid-column: auto; padding: 28px 22px; } }

/* facts in a line, a dot between */
.ld-inline { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 28px 0 0; padding-top: 22px; border-top: 1px solid var(--rule); font-size: 13px; color: var(--soft); }
.ld-inline span { display: inline-flex; align-items: center; gap: 10px; }
.ld-inline span::before { content: ""; width: 4px; height: 4px; border-radius: 50%; background: var(--accent); }

/* ── 7. Les maquettes ── */
/* the isometric stack of card.pm (components/pm-stack3d.js): its floors, their controls */
pm-stack3d { --brand: #e30613; --floor-bg: rgba(255,255,255,.92); --floor-line: rgba(23,25,29,.1); margin-inline: auto; }
pm-stack3d:not(:defined) { display: block; inline-size: min(100%, 580px); aspect-ratio: 1 / 1.05; opacity: 0; }
:root[data-theme='dark'] pm-stack3d { --floor-bg: rgba(30,33,39,.92); --floor-line: rgba(255,255,255,.1); }
@media (prefers-color-scheme: dark) { :root:not([data-theme='light']) pm-stack3d { --floor-bg: rgba(30,33,39,.92); --floor-line: rgba(255,255,255,.1); } }
.fl { container-type: inline-size; position: relative; padding: 9%; display: grid; align-content: start; gap: 7%; color: var(--ink); }
.fl::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; box-shadow: inset 0 0 0 2px var(--brand); }
pm-stack3d[pulse] .fl::after { animation: ld-pulse 1.1s ease-out both; }
pm-stack3d[pulse] [slot='floor-2']::after { animation-delay: .22s; }
pm-stack3d[pulse] [slot='floor-3']::after { animation-delay: .44s; }
@keyframes ld-pulse { 0% { opacity: 0; } 25% { opacity: 1; } 100% { opacity: 0; } }
.fl-tag { font-size: 4.6cqw; line-height: 1; color: var(--faint); }
.fl-row { display: flex; align-items: center; gap: 5%; }
.fl-logo { inline-size: 20%; aspect-ratio: 1; border-radius: 22%; background: var(--brand); transition: background-color .5s; }
.fl-domain { padding: 3% 5%; border-radius: 99px; border: 1px solid var(--floor-line); font-size: 4.4cqw; line-height: 1; color: var(--soft); white-space: nowrap; }
.fl-sw { inline-size: 12%; aspect-ratio: 1; border-radius: 50%; border: 1px solid var(--floor-line); background: var(--ink); }
.fl-sw--brand { background: var(--brand); transition: background-color .5s; }
.fl-sw--paper { background: var(--paper); }
.fl-aa { margin-inline-start: auto; font-size: 11cqw; line-height: 1; }
.fl-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 6%; }
.fl-tiles i { aspect-ratio: 1.7; border-radius: 12%; border: 1px solid var(--floor-line); background: linear-gradient(var(--brand) 0 34%, transparent 34%); transition: background .5s .2s; }
.fl-media { display: grid; grid-template-columns: repeat(2, 1fr); gap: 4.5%; }
.fl-media span { padding: 5.5% 4%; border-radius: 99px; background: var(--brand); color: #fff; text-align: center; white-space: nowrap; font-size: 5.6cqw; line-height: 1; transition: background-color .5s .4s; }
.fl-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5%; }
.fl-cards i { aspect-ratio: .62; border-radius: 14%; border: 1px solid var(--floor-line); background: linear-gradient(var(--brand) 0 30%, transparent 30%); transition: background .5s .4s; }
.fl-controls { display: flex; align-items: center; gap: 14px; }
.fl-controls button { width: 28px; height: 28px; border-radius: 50%; border: 0; cursor: pointer; background: var(--sw); box-shadow: 0 0 0 1px rgba(0,0,0,.08); transition: box-shadow .2s; }
.fl-controls button[aria-pressed='true'] { box-shadow: 0 0 0 2px var(--paper), 0 0 0 3px var(--ink); }
.fl-label { font-size: 12px; color: var(--faint); margin-right: 4px; }

/* a window around a drawing or a capture: a white sheet, a bar of three hairline dots and its title (empty: a grey line) */
.ld-window, .ld-deck .deck-browser { width: 100%; margin: 0; background: var(--sheet); border-radius: 14px; box-shadow: 0 0 0 1px var(--rule), 0 30px 60px -36px rgba(23,25,29,.3); overflow: hidden; text-align: left; color: var(--ink); }
.ld-window-bar, .ld-deck .deck-browser figcaption { display: flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 14px; border-bottom: 1px solid var(--rule); font-size: 12px; color: var(--faint); min-width: 0; }
.ld-window-bar i, .ld-deck .deck-browser figcaption i { flex: none; width: 8px; height: 8px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--faint); }
.ld-window-bar span, .ld-deck .deck-browser figcaption span { margin-left: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.ld-window-bar span:empty { width: 38%; height: 6px; border-radius: 3px; background: var(--rule); }
.ld-window > img, .ld-deck .deck-browser img { display: block; width: 100%; height: auto; }
.ld-window h4 { margin: 18px 0 8px; font-weight: 500; font-size: 11px; color: var(--faint); }
.ld-window h4:first-child { margin-top: 0; }
.ld-window .ld-tags { margin: 0; }
.ld-deck .deck-browser-wrap { display: grid; gap: 28px; }
/* a mockup: its window (in 13 px), its caption below (what it shows, then "preview") */
.ld-shot { margin: 0; min-width: 0; }
.ld-shot > .ld-window { font-size: 13px; }
.ld-shot > .ld-cap { display: flex; justify-content: space-between; gap: 16px; max-width: none; padding: 14px 2px 0; }
.ld-shot > .ld-cap span:first-child { color: var(--soft); }
@media (max-width: 560px) { .ld-shot > .ld-cap { display: grid; gap: 2px; } }

/* phone captures in a hairline frame, their caption below (--phones: cut to a phone; --2: two documents); .ld-screen: one alone */
.ld-screens, .ld-deck .deck-phones { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); gap: 40px 32px; }
.ld-screens figure, .ld-screen, .ld-deck .deck-phone { margin: 0; }
.ld-screens img, .ld-screen img, .ld-deck .deck-phone img { display: block; width: 100%; height: auto; border-radius: 22px; background: var(--sheet); box-shadow: 0 0 0 1px var(--rule), 0 30px 60px -36px rgba(23,25,29,.3); }
.ld-screens--phones img { aspect-ratio: 520 / 1125; object-fit: cover; object-position: top; }
.ld-screens figcaption, .ld-shots figcaption, .ld-deck .deck-phone figcaption, .ld-deck .deck-mail figcaption { margin-top: 16px; font-size: 14px; color: var(--soft); }
.ld-screens figcaption b, .ld-shots figcaption b, .ld-deck .deck-phone figcaption b { display: block; font-weight: 500; color: var(--ink); margin-bottom: 2px; }
.ld-screens--2, .ld-deck .deck-mails { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }
@media (max-width: 760px) { .ld-screens--2, .ld-deck .deck-mails { grid-template-columns: 1fr; } }
.ld-screens--2 img, .ld-deck .deck-mail img { display: block; width: 100%; height: auto; border-radius: 12px; box-shadow: 0 0 0 1px var(--rule); }
.ld-screens--2 img { aspect-ratio: 760 / 1241; max-height: 620px; object-fit: cover; object-position: top; }
@media (max-width: 560px) { .ld-screens--phones, .ld-deck .deck-phones { grid-template-columns: 1fr 1fr; gap: 32px 16px; } .ld-screens--phones img, .ld-deck .deck-phone img { border-radius: 14px; } }
.ld-deck .deck-mail { margin: 0; }
.ld-screen { width: min(100%, 300px); justify-self: center; margin-inline: auto; }
@media (max-width: 960px) { .ld-screen { width: min(100%, 240px); } }

/* a phone with thin bezels around a screen capture */
.ld-device { padding: 6px; border-radius: 34px; background: #17191d; box-shadow: 0 0 0 1px var(--rule), 0 30px 60px -36px rgba(23,25,29,.35); }
.ld-device img { display: block; width: 100%; height: auto; aspect-ratio: 960 / 2080; object-fit: cover; border-radius: 28px; }
/* phones in a row, the middle one raised, a QR to try aside */
.ld-shots { display: grid; grid-template-columns: repeat(3, 1fr) 200px; gap: 48px; align-items: end; }
.ld-shots figure { margin: 0; display: grid; gap: 22px; }
.ld-shots figure:nth-child(2) { transform: translateY(-36px); }
.ld-shots figcaption { margin-top: 0; max-width: 30ch; }
@media (max-width: 960px) { .ld-shots { grid-template-columns: 1fr 1fr; gap: 40px 28px; } .ld-shots figure:nth-child(2) { transform: none; } }
@media (max-width: 560px) { .ld-shots { grid-template-columns: 1fr; justify-items: center; } .ld-shots figure { max-width: 280px; } .ld-shots figure:nth-child(n+2):nth-child(-n+3) { display: none; } }
/* a QR code to scan, its line and its address */
.ld-try { display: grid; gap: 12px; justify-items: start; padding-top: 24px; border-top: 1px solid var(--ink); font-size: 14px; color: var(--soft); }
.ld-try img { width: 120px; height: 120px; padding: 8px; border-radius: 10px; background: #fff; box-shadow: 0 0 0 1px var(--rule); }
.ld-try p { margin: 0; }

/* a film, sixteen by nine, its caption below */
.ld-film { margin: 0; }
.ld-film video { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 22px; background: #0b0c0e; box-shadow: 0 0 0 1px var(--rule); }
.ld-film figcaption { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; margin-top: 16px; font-size: 13px; color: var(--soft); }
.ld-film figcaption b { font-weight: 500; color: var(--ink); }
@media (max-width: 640px) { .ld-film video { border-radius: 14px; } }

/* NFC rings around a mark, breathing */
.ld-rings { position: relative; width: 140px; aspect-ratio: 1; display: grid; place-items: center; }
.ld-rings i { position: absolute; inset: 0; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--accent); opacity: 0; animation: ld-ring 3.2s ease-out infinite; }
.ld-rings i:nth-child(2) { animation-delay: .5s; }
.ld-rings i:nth-child(3) { animation-delay: 1s; }
.ld-rings svg { width: 34px; height: 34px; fill: none; stroke: var(--accent); stroke-width: 1.6; stroke-linecap: round; }
@keyframes ld-ring { 0% { transform: scale(.35); opacity: 0; } 20% { opacity: 1; } 100% { transform: scale(1); opacity: 0; } }

/* a person and the state of a consent (hollow: none; half: pending) */
.ld-person { display: flex; align-items: center; gap: 10px; min-width: 0; color: var(--ink); }
.ld-av, .ld-person .avatar { flex: none; display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--rule); font: 500 10px/1 Outfit, system-ui, sans-serif; font-style: normal; color: var(--soft); }
.ld-state { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; color: var(--soft); white-space: nowrap; }
.ld-state::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.ld-state--off::before { background: none; box-shadow: inset 0 0 0 1px var(--faint); }
.ld-state--wait::before { background: linear-gradient(90deg, var(--accent) 50%, transparent 50%); box-shadow: inset 0 0 0 1px var(--accent); }

/* the app in miniature: its menu, its figures, its list */
.ld-app { display: grid; grid-template-columns: 128px minmax(0, 1fr); min-height: 380px; }
.ld-app-side { padding: 20px 14px; border-right: 1px solid var(--rule); font-size: 12px; color: var(--faint); }
.ld-app-side b { display: block; font-weight: 500; font-size: 11px; letter-spacing: .02em; color: var(--ink); margin: 0 0 22px; }
.ld-app-side span { display: block; padding: 7px 0 7px 12px; position: relative; }
.ld-app-side .ld-on { color: var(--ink); }
.ld-app-side .ld-on::before { content: ""; position: absolute; left: 0; top: 50%; width: 5px; height: 5px; margin-top: -2.5px; border-radius: 50%; background: var(--accent); }
.ld-app-main { min-width: 0; padding: 22px 24px; }
.ld-app-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 18px; font-size: 16px; }
.ld-app-head .ld-search { width: 38%; height: 26px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--rule); }
.ld-kpis { display: grid; grid-template-columns: repeat(3, 1fr); margin: 0 0 18px; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.ld-kpis div { padding: 12px 0 12px 14px; border-left: 1px solid var(--rule); }
.ld-kpis div:first-child { border-left: 0; padding-left: 0; }
.ld-kpis b { display: block; font-weight: 500; font-size: 20px; letter-spacing: -.02em; line-height: 1.2; }
.ld-kpis span { font-size: 11px; color: var(--faint); }
.ld-app-list { font-size: 12px; }
.ld-app-list > div { display: grid; grid-template-columns: 1.4fr .8fr .8fr .6fr; align-items: center; gap: 10px; min-height: 42px; border-top: 1px solid var(--rule); }
.ld-app-list > div:first-child { border-top: 0; min-height: 30px; font-size: 11px; color: var(--faint); }
.ld-app-list b { font-weight: 500; }
.ld-app-list > div > :last-child { justify-self: end; }
.ld-app-card { display: grid; gap: 4px; padding: 18px 0 0; border-top: 1px solid var(--rule); }
.ld-app-card h3 { font-size: 16px; font-weight: 500; margin: 0; }
.ld-app-card p { margin: 0; color: var(--soft); }
.ld-app-main .ld-fields { padding: 18px 0 0; }
@media (max-width: 640px) {
  .ld-app { grid-template-columns: 1fr; min-height: 0; }
  .ld-app-side { display: none; }
  .ld-app-main { padding: 18px; }
  .ld-app-list > div { grid-template-columns: 1.2fr .8fr; }
  .ld-app-list > div > :nth-child(3), .ld-app-list > div > :nth-child(4) { display: none; }
  .ld-kpis div:last-child { display: none; }
  .ld-kpis { grid-template-columns: 1fr 1fr; }
}

/* a form in miniature: a title, its fields, two boxes ticking in turn, its button */
.ld-form { display: grid; gap: 10px; font-size: 13px; color: var(--soft); }
.ld-form > b { font-weight: 500; font-size: 18px; color: var(--ink); text-align: center; margin-bottom: 8px; }
.ld-form > span { display: flex; align-items: center; height: 40px; padding: 0 14px; border-radius: 10px; box-shadow: inset 0 0 0 1px var(--rule); }
.ld-form label { display: grid; grid-template-columns: 16px 1fr; gap: 10px; align-items: start; padding: 10px 12px; border-radius: 10px; box-shadow: inset 0 0 0 1px var(--rule); font-size: 12px; line-height: 1.4; }
.ld-form label i { width: 16px; height: 16px; border-radius: 4px; box-shadow: inset 0 0 0 1px var(--soft); position: relative; margin-top: 1px; }
.ld-form label i::after { content: ""; position: absolute; left: 5px; top: 2px; width: 4px; height: 8px; border: solid var(--accent); border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); opacity: 0; animation: ld-tick 8s infinite; }
.ld-form label + label i::after { animation-name: ld-tick-2; }
.ld-form > em { justify-self: stretch; text-align: center; font-style: normal; padding: 11px; border-radius: 999px; background: var(--ink); color: var(--paper); margin-top: 4px; }
@keyframes ld-tick { 0%, 18% { opacity: 0; } 22%, 92% { opacity: 1; } 100% { opacity: 0; } }
@keyframes ld-tick-2 { 0%, 38% { opacity: 0; } 42%, 92% { opacity: 1; } 100% { opacity: 0; } }
/* a form's page in a window: its cover, its fields, its boxes, its button */
.ld-form-page { display: grid; grid-template-columns: .9fr 1.1fr; min-height: 380px; }
.ld-form-cover { display: flex; flex-direction: column; justify-content: space-between; gap: 32px; padding: 28px; border-right: 1px solid var(--rule); }
.ld-form-cover span { font-size: 11px; color: var(--faint); }
.ld-form-cover strong { font-weight: 500; font-size: clamp(22px, 2.2vw, 28px); line-height: 1.1; letter-spacing: -.02em; max-width: 12ch; }
.ld-form-cover small { font-size: 12px; color: var(--soft); }
.ld-form-cover strong::before { content: ""; display: block; width: 24px; height: 2px; background: var(--accent); margin: 0 0 18px; }
.ld-fields { padding: 28px; display: grid; align-content: start; gap: 6px; font-size: 12px; }
.ld-window .ld-fields h4 { margin: 0 0 8px; font-weight: 500; font-size: 15px; color: var(--ink); }
.ld-fields label { color: var(--faint); font-size: 11px; margin-top: 8px; }
.ld-fields .ld-input { height: 30px; border-bottom: 1px solid var(--faint); }
.ld-fields .ld-box { display: flex; gap: 10px; margin-top: 12px; line-height: 1.45; color: var(--soft); }
.ld-fields .ld-box::before { content: ""; flex: none; width: 13px; height: 13px; margin-top: 2px; border-radius: 3px; box-shadow: inset 0 0 0 1px var(--ink); }
.ld-press { display: inline-flex; justify-self: start; align-items: center; min-height: 34px; margin-top: 18px; padding: 0 18px; border-radius: 999px; background: var(--ink); color: var(--paper); font-size: 12px; }
@media (max-width: 640px) { .ld-form-page { grid-template-columns: 1fr; min-height: 0; } .ld-form-cover { border-right: 0; border-bottom: 1px solid var(--rule); } }

/* a sealed record in a window: its head, its facts (.ld-kv), its fingerprint (.ld-hash) */
.ld-record { padding: 26px 28px; }
.ld-record-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 0 0 18px; }
.ld-record-head strong { display: block; font-weight: 500; font-size: 16px; }
.ld-record-head small { display: block; font: 500 11px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--faint); word-break: break-all; }
@media (max-width: 560px) { .ld-record { padding: 20px; } }

/* a contact's history: a thread, a dot per event (hollow: a withdrawal) */
.ld-thread { padding: 26px 28px; }
.ld-thread > .ld-person { padding: 0 0 18px; border-bottom: 1px solid var(--rule); }
.ld-thread > .ld-person > span:not(.ld-state) { display: grid; min-width: 0; font-size: 14px; }
.ld-thread > .ld-person small { font-size: 12px; color: var(--faint); }
.ld-thread > .ld-person .ld-state { margin-left: auto; }
.ld-thread ol { list-style: none; margin: 18px 0 0; padding: 0 0 0 22px; position: relative; }
.ld-thread ol::before { content: ""; position: absolute; left: 3px; top: 14px; bottom: 14px; width: 1px; background: var(--rule); }
.ld-thread li { position: relative; padding: 9px 0; }
.ld-thread li::before { content: ""; position: absolute; left: -22px; top: 15px; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
.ld-thread li.ld-out::before { background: var(--sheet); box-shadow: inset 0 0 0 1px var(--ink); }
.ld-thread li b { display: block; font-weight: 500; font-size: 13px; }
.ld-thread li span { font-size: 12px; color: var(--soft); }
@media (max-width: 560px) { .ld-thread { padding: 20px; } }

/* a data path: nodes and arrows, the middle one outlined in the tint */
.ld-nodes { display: grid; grid-template-columns: 1fr auto 1.15fr auto 1fr; align-items: center; gap: 12px; padding: 64px 28px; }
.ld-nodes > div { padding: 18px 10px; text-align: center; border-radius: 14px; box-shadow: inset 0 0 0 1px var(--rule); }
.ld-nodes > div.ld-hub { box-shadow: inset 0 0 0 1px var(--accent); }
.ld-nodes b { display: block; font-weight: 500; font-size: 13px; }
.ld-nodes span { display: block; margin-top: 4px; font-size: 11px; color: var(--faint); }
.ld-nodes > i { font-style: normal; color: var(--faint); }
@media (max-width: 640px) { .ld-nodes { grid-template-columns: 1fr; padding: 28px 20px; } .ld-nodes > i { text-align: center; transform: rotate(90deg); } }

/* a structured record beside its JSON */
.ld-schema { display: grid; grid-template-columns: .95fr 1.05fr; }
.ld-schema > .ld-code { padding: 24px; border-right: 1px solid var(--rule); font-size: 11.5px; white-space: pre-wrap; overflow-wrap: anywhere; }
.ld-schema > .ld-code strong { display: block; margin: 0 0 16px; font: 500 14px/1.3 Outfit, system-ui, sans-serif; }
.ld-schema > .ld-record { min-width: 0; }
@media (max-width: 640px) { .ld-schema { grid-template-columns: 1fr; } .ld-schema > .ld-code { border-right: 0; border-bottom: 1px solid var(--rule); } }

/* ── 8. Les interactions (landing.js, ou le CSS seul) ── */
/* field by field: who may edit what (landing.js) */
.ld-grid { width: 100%; border-collapse: collapse; font-size: 14px; }
.ld-grid th { font-weight: 500; color: var(--faint); font-size: 12px; text-align: center; padding: 0 0 14px; }
.ld-grid th:first-child { text-align: left; }
.ld-grid td { border-top: 1px solid var(--rule); padding: 2px 0; }
.ld-grid td:not(:first-child) { text-align: center; width: 22%; }
.ld-grid button { width: 44px; height: 44px; border: 0; background: none; cursor: pointer; color: var(--rule); display: inline-grid; place-items: center; border-radius: 50%; transition: color .2s; }
.ld-grid button:hover { color: var(--soft); }
.ld-grid button[aria-pressed='true'] { color: var(--ink); }
.ld-grid svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.ld-grid .ld-open { display: none; }
.ld-grid button[aria-pressed='true'] .ld-open { display: block; }
.ld-grid button[aria-pressed='true'] .ld-shut { display: none; }
.ld-grid caption { caption-side: bottom; text-align: left; font-size: 12px; color: var(--faint); padding-top: 16px; }

/* radios that restyle a drawing: a legend, choices as text or swatches (--center: under a drawing; [data-sw]: a dot before a word) */
.ld-choices { display: grid; gap: 22px; margin: 0 0 40px; }
.ld-choices fieldset { border: 0; margin: 0; padding: 0; min-width: 0; display: grid; grid-template-columns: 88px 1fr; align-items: center; gap: 16px; padding-top: 18px; border-top: 1px solid var(--rule); }
.ld-choices legend { float: left; padding: 0; font-size: 13px; color: var(--faint); }
.ld-choices fieldset > div { display: flex; flex-wrap: wrap; gap: 6px 22px; }
.ld-choices input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.ld-choices label { cursor: pointer; font-size: 14px; color: var(--faint); }
.ld-choices label > span { display: inline-block; padding: 6px 0; border-bottom: 1px solid transparent; transition: color .2s, border-color .2s; }
.ld-choices label:hover > span { color: var(--ink); }
.ld-choices input:checked + span { color: var(--ink); border-bottom-color: var(--ink); }
.ld-choices input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 3px; }
.ld-choices .ld-dot { width: 22px; height: 22px; padding: 0; border-radius: 50%; background: var(--sw); border: 0; box-shadow: inset 0 0 0 1px rgba(0,0,0,.08); }
.ld-choices input:checked + .ld-dot { box-shadow: 0 0 0 2px var(--paper), 0 0 0 3px var(--ink); }
.ld-choices label > span > i { display: inline-block; width: 8px; height: 8px; margin-right: 8px; border-radius: 50%; background: var(--sw, var(--faint)); vertical-align: 1px; }
.ld-choices--center { margin: 28px 0 0; justify-items: center; }
.ld-choices--center fieldset { grid-template-columns: 1fr; justify-items: center; gap: 12px; border-top: 0; padding-top: 0; }
.ld-choices--center legend { float: none; text-align: center; margin: 0 auto 6px; }
.ld-choices--center fieldset > div { justify-content: center; gap: 12px; }

/* tabs made of radios (CSS alone): the n-th choice shows the n-th .ld-panel */
.ld-tabs { display: grid; gap: 48px; }
.ld-tablist { border: 0; margin: 0; padding: 0; min-width: 0; display: flex; flex-wrap: wrap; gap: 6px 28px; font-size: 14px; border-bottom: 1px solid var(--rule); }
.ld-tablist input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.ld-tablist label { cursor: pointer; }
.ld-tablist span { display: inline-block; padding: 12px 0; margin-bottom: -1px; color: var(--faint); border-bottom: 1px solid transparent; transition: color .2s, border-color .2s; }
.ld-tablist label:hover span { color: var(--ink); }
.ld-tablist input:checked + span { color: var(--ink); border-bottom-color: var(--ink); }
.ld-tablist input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 3px; }
.ld-panel { display: none; grid-template-columns: 5fr 6fr; gap: var(--gap); align-items: start; }
.ld-panel .ld-n { display: block; font-size: 13px; color: var(--accent); margin-bottom: 14px; }
.ld-panel h3 { font-size: 24px; letter-spacing: -.015em; margin: 0 0 12px; }
.ld-panel p { margin: 0; color: var(--soft); font-size: 15px; max-width: 44ch; }
.ld-tabs:has(.ld-tablist label:nth-of-type(1) input:checked) .ld-panel:nth-of-type(1),
.ld-tabs:has(.ld-tablist label:nth-of-type(2) input:checked) .ld-panel:nth-of-type(2),
.ld-tabs:has(.ld-tablist label:nth-of-type(3) input:checked) .ld-panel:nth-of-type(3),
.ld-tabs:has(.ld-tablist label:nth-of-type(4) input:checked) .ld-panel:nth-of-type(4),
.ld-tabs:has(.ld-tablist label:nth-of-type(5) input:checked) .ld-panel:nth-of-type(5),
.ld-tabs:has(.ld-tablist label:nth-of-type(6) input:checked) .ld-panel:nth-of-type(6) { display: grid; animation: ld-panel-in .4s ease; }
@supports not selector(:has(*)) { .ld-tablist { display: none; } .ld-panel { display: grid; } }
@keyframes ld-panel-in { from { opacity: 0; transform: translateY(6px); } }
@media (max-width: 860px) { .ld-panel { grid-template-columns: 1fr; gap: 32px; } }

/* checkboxes as chips: a pen when open, a lock in ink when closed; .ld-count below shows their counts (CSS counters) */
.ld-toggles { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; border: 0; min-width: 0; counter-reset: ld-on ld-off; }
.ld-toggles label { position: relative; cursor: pointer; }
.ld-toggles input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.ld-toggles input:checked { counter-increment: ld-on; }
.ld-toggles input:not(:checked) { counter-increment: ld-off; }
.ld-toggles span { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--rule); font-size: 13px; color: var(--soft); transition: color .2s, box-shadow .2s, background .2s; }
.ld-toggles svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ld-toggles .ld-lock { display: none; }
.ld-toggles label:hover span { color: var(--ink); box-shadow: inset 0 0 0 1px var(--soft); }
.ld-toggles input:checked + span { background: var(--ink); color: var(--paper); box-shadow: none; }
.ld-toggles input:checked + span .ld-lock { display: block; }
.ld-toggles input:checked + span .ld-pen { display: none; }
.ld-toggles input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.ld-count { display: flex; flex-wrap: wrap; gap: 6px 28px; margin: 22px 0 0; padding-top: 18px; border-top: 1px solid var(--rule); font-size: 14px; color: var(--soft); }
.ld-count b { font-weight: 500; color: var(--ink); font-variant-numeric: tabular-nums; }
.ld-count-on::after { content: counter(ld-on); }
.ld-count-off::after { content: counter(ld-off); }

/* ── 9. Les espacements, après les pièces, pour primer sur leurs marges ── */
/* a block that follows another inside the same section; a link row under a block */
.ld-more { margin-top: 120px; }
@media (max-width: 640px) { .ld-more { margin-top: 88px; } }
.ld-after { margin-top: 56px; }
/* a product inside a section: a block apart, a hairline above */
.ld-product { margin-top: var(--sec); padding-top: var(--sec); border-top: 1px solid var(--rule); }
@media (max-width: 640px) { .ld-product { margin-top: 96px; padding-top: 96px; } }

/* ── 10. Le deck en page (_partials/deck-blocks.html sous .ld-deck) : une section par diapositive ── */
.ld-section.ld-deck { padding: 112px 0; }
@media (max-width: 640px) { .ld-section.ld-deck { padding: 80px 0; } }
.ld-deck h2 { max-width: 24ch; margin: 0 0 56px; }
.ld-deck .ld-kicker { margin-bottom: 28px; }
.ld-deck .deck-row + .deck-row { margin-top: 48px; }
.ld-deck .deck-row.two { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; }
@media (max-width: 860px) { .ld-deck .deck-row.two { grid-template-columns: 1fr; gap: 40px; } }
.ld-deck .deck-row > * { min-width: 0; }
.ld-deck .deck-md { color: var(--soft); font-size: 16px; max-width: 64ch; }
.ld-deck .deck-md > :first-child { margin-top: 0; }
.ld-deck .deck-md p { margin: 0; }
.ld-deck .deck-md > * + * { margin-top: 14px; }
.ld-deck .deck-md ul, .ld-deck .deck-md ol { padding-left: 20px; display: grid; gap: 6px; }
.ld-deck .deck-md li::marker { color: var(--faint); }
.ld-deck .deck-md b, .ld-deck .deck-md strong { font-weight: 500; color: var(--ink); }
.ld-deck .deck-md em { font-style: normal; color: var(--faint); }
.ld-deck .deck-md a { color: var(--ink); text-decoration-color: var(--rule); text-underline-offset: 4px; }
.ld-deck .deck-md h3 { font-size: 18px; color: var(--ink); margin: 0 0 4px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.ld-deck .deck-md h3.good::before, .ld-deck .deck-md h3.bad::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.ld-deck .deck-md h3.bad::before { background: none; box-shadow: inset 0 0 0 1px var(--faint); }
.ld-deck .deck-md hr { border: 0; border-top: 1px solid var(--rule); margin: 24px 0; }
.ld-deck .deck-mark { font-size: 12px; padding: 3px 10px; border-radius: 999px; background: none; box-shadow: inset 0 0 0 1px var(--rule); color: var(--soft); }
.ld-deck .deck-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); gap: 40px; margin: 0; }
.ld-deck .deck-stats div { padding-top: 22px; border-top: 1px solid var(--rule); }
.ld-deck .deck-stats dt { font-size: clamp(28px, 3vw, 40px); letter-spacing: -.025em; line-height: 1; color: var(--ink); }
.ld-deck .deck-stats dd { margin: 12px 0 0; color: var(--soft); font-size: 14px; }
.ld-deck .deck-split { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; }
@media (max-width: 860px) { .ld-deck .deck-split { grid-template-columns: 1fr; gap: 36px; } }
.ld-deck .deck-split > .deck-md { padding-top: 22px; border-top: 1px solid var(--rule); }
.ld-deck .deck-panel { padding: 4px 0 4px 24px; border-left: 2px solid var(--accent); }
.ld-deck .deck-items { margin: 0; display: grid; font-size: 15px; }
.ld-deck .deck-items div { display: grid; grid-template-columns: minmax(120px, 2fr) 3fr; gap: 24px; padding: 16px 0; border-top: 1px solid var(--rule); }
.ld-deck .deck-items dt { color: var(--ink); }
.ld-deck .deck-items dd { margin: 0; color: var(--soft); }
@media (max-width: 560px) { .ld-deck .deck-items div { grid-template-columns: 1fr; gap: 4px; } }
.ld-deck .deck-pills { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
.ld-deck .deck-pills span { font-size: 13px; padding: 5px 14px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--rule); color: var(--ink); }
.ld-deck .deck-tiles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); gap: 40px 32px; }
.ld-deck .deck-tiles li { padding-top: 22px; border-top: 1px solid var(--rule); font-size: 14px; color: var(--soft); }
.ld-deck .deck-tiles li.on { border-top-color: var(--ink); }
.ld-deck .deck-tiles img { display: block; width: 40px; height: 40px; border-radius: 10px; margin-bottom: 16px; }
.ld-deck .deck-tiles b { display: block; font-weight: 500; font-size: 16px; color: var(--ink); margin-bottom: 4px; }
.ld-deck .deck-hub { display: grid; gap: 22px; }
.ld-deck .deck-hub-center { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px; padding-bottom: 18px; border-bottom: 1px solid var(--ink); }
.ld-deck .deck-hub-center b { font-weight: 500; font-size: 20px; color: var(--ink); }
.ld-deck .deck-hub-center span { color: var(--soft); font-size: 14px; }
.ld-deck .deck-hub ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.ld-deck .deck-hub li { font-size: 13px; padding: 5px 14px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--rule); color: var(--soft); }

/* ── 11. La fin de page ── */
.ld-closing { padding: 180px 0 160px; text-align: center; }
.ld-closing h2 { margin: 0 auto 22px; font-size: clamp(32px, 2vw + 24px, 66px); max-width: 18ch; }
/* a closing title in lines, the last one quieter */
.ld-closing h2 span { display: block; }
.ld-closing h2 span:last-of-type { color: var(--soft); }
.ld-closing p { color: var(--soft); font-size: 17px; margin: 0 auto 44px; max-width: 44ch; }
.ld-closing .ld-actions { justify-content: center; }
.ld-cmyk { display: flex; justify-content: center; gap: 8px; margin-top: 72px; }
.ld-cmyk i { width: 8px; height: 8px; border-radius: 50%; }
.ld-cmyk i:nth-child(1) { background: var(--c); }
.ld-cmyk i:nth-child(2) { background: var(--m); }
.ld-cmyk i:nth-child(3) { background: var(--y); }
.ld-cmyk i:nth-child(4) { background: var(--ink); }
:root[data-pm]:not([data-pm='suite']) .ld-cmyk i { background: var(--accent); opacity: .25; }
:root[data-pm]:not([data-pm='suite']) .ld-cmyk i:nth-child(4) { opacity: 1; }
/* the site's map above the foot: the logo and its line, then columns of links */
.ld-sitemap { display: grid; grid-template-columns: 2fr repeat(3, 1fr); gap: 48px; padding: 72px 0 56px; border-top: 1px solid var(--rule); font-size: 14px; }
@media (max-width: 860px) { .ld-sitemap { grid-template-columns: 1fr 1fr; } .ld-sitemap > :first-child { grid-column: 1 / -1; } }
.ld-sitemap .ld-logo { display: inline-block; color: var(--ink); }
.ld-sitemap p { margin: 18px 0 0; color: var(--soft); max-width: 36ch; }
.ld-sitemap small { display: block; margin-top: 18px; font-size: 12px; color: var(--faint); max-width: 48ch; }
.ld-sitemap h3 { font-size: 12px; font-weight: 500; color: var(--faint); margin: 0 0 14px; }
.ld-sitemap ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.ld-sitemap a { text-decoration: none; color: var(--soft); transition: color .2s; }
.ld-sitemap a:hover { color: var(--ink); }
.ld-foot { display: flex; flex-wrap: wrap; gap: 12px 28px; justify-content: space-between; padding: 32px 0 48px; border-top: 1px solid var(--rule); font-size: 13px; color: var(--faint); }
.ld-foot nav { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.ld-foot a { text-decoration: none; }
.ld-foot a:hover { color: var(--ink); }
/* a foot with several lists of links: the site's, the suite's, the legal ones */
.ld-foot--wide { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 32px; }
.ld-foot--wide nav { display: grid; align-content: start; gap: 8px; }
.ld-foot--wide > p { margin: 0; grid-column: 1 / -1; padding-top: 20px; border-top: 1px solid var(--rule); }
@media (max-width: 860px) { .ld-foot--wide { grid-template-columns: 1fr 1fr; } .ld-foot--wide > span { grid-column: 1 / -1; } }