…

/* ===================================================================================================================== MURMUR SITE · DESIGN SYSTEM (site.css) Direction A "Sceau": paper, ink and wax. Same tints as the app (design/maquettes/assets/tokens.css, direction A). Plain CSS, no build step, works from file://. Fonts come from fonts.css (embedded), icons from icons.js (sprite). --------------------------------------------------------------------------------------------------------------------- 0. HOW A PAGE IS PUT TOGETHER (copy index.html, keep the three marked regions) --------------------------------------------------------------------------------------------------------------------- ... shared: viewport, favicon, fonts.css, site.css, theme … script (before paint), icons.js, site.js (defer) page extras (optional): ... skip link, Murmur mark symbol (#mm-mark), header, menu panel

sections

... footer Header, footer and head have ONE source of truth: assets/partials/*.html. Never edit them inside a page: edit the partial, then run node assets/partials/sync.cjs [page.html …] (it copies them into the pages, all of them when no page is named, and sets aria-current="page" on the header links to the current page). Pages: index.html (home + home.css, home-anim.css and home-anim.js: the hero phone and its demo), download.html, security.html (the big picture, in plain words) and how-it-works.html (the wiki: wiki.css/wiki.js), and the legal pages. Every page has a French twin, -fr.html (): the same markup, ids and classes, in French words; sync.cjs gives it the French header and footer (header.fr.html, footer.fr.html). A rule that only French needs is scoped with :root[lang^="fr"], so the English pages never change with it. --------------------------------------------------------------------------------------------------------------------- 1. TOKENS (section 1 below) --------------------------------------------------------------------------------------------------------------------- Colors: --bg (paper) --surface --surface-2 --container --container-2 --text --text-2 --text-3 --seal (wax) --link --focus --primary/--on-primary (ink button; wax light in dark) --primary-container (secondary button) --accent-container/--on-accent-container (wax tint) --verified (sage: "Verified by you" only) --success-container --warning-container (tamper result and real notices only) --error (username field error state only) --divider --outline --highlight --avatar-1..8 --sender-1..8 --bubble-* --system-* --input-*. --header-bg (the frosted bar) --menu-bg (the phone menu and the header while it is open: --surface-2 in light, --bg in dark). Theme: light on :root; dark under @media screen and (prefers-color-scheme: dark) :root:not([data-theme="light"]) and again under @media screen :root[data-theme="dark"]. site.js stores the choice in localStorage "murmur.theme". Print always takes the light tokens, whatever the theme (the dark ones are for screens only). Space (4-pt grid): --s-1 4 · --s-2 8 · --s-3 12 · --s-4 16 · --s-5 20 · --s-6 24 · --s-8 32 · --s-10 40 · --s-12 48 · --s-16 64 · --s-20 80 · --s-24 96 · --s-32 128. Section padding --section-y: 72 / 96 (≥768) / 128 (≥1280). Gutters --gutter: 16 / 24 (≥600) / 40 (≥1024). Container: 1200 px of content. Text fills its column: no measure. Radii: --r-card 16 · --r-btn 12 · --r-chip 999 · --r-sheet 24. Shadows: --shadow-1/2/3 (warm). Motion: --dur-sm 150 · --dur-md 250 · --dur-lg 350 · --dur-xl 500; --ease (standard), --ease-out, --ease-spring (a small overshoot), --ease-sheet (the iOS sheet curve, for the phone menu). Reduced motion: no travel, no scaling; only short opacity fades (handled globally at the end of this file). --------------------------------------------------------------------------------------------------------------------- 2. TYPE --------------------------------------------------------------------------------------------------------------------- h1 / .t-h1 Fraunces 600 (SOFT 100, WONK 0) 76/80 ≥1280 · 60/64 768 to 1279 · 40/46 below. One per page. h2 / .t-h2 Fraunces 600 48/54 · 40/46 · 32/38. .t-h2--sm: 36/44 · 32/40 · 28/34 (sub-sections) h3 / .t-h3 Inter 600 22/28. .t-h4: Inter 600 17/24 .lead 20/32 (18/28 below 768). body 17/28 (16/26 below 768). .small 15/22. .caption 13/18. .eyebrow Inter 600 13/16, 0.08em, uppercase, wax link color. .mono Atkinson Hyperlegible Mono (ciphertext, keys, codes, device IDs, hex). .username: Inter ss02. .tnum tabular numbers. .center: centered text. Full width: prose (p, li, dd…) always fills its column, at every size: no max-width narrower than the column (never a measure in ch or em), and lines run to the column's edge: no text-wrap: pretty or balance on prose (they shorten lines). No word alone on a last line: site.js joins the last two words of each paragraph, item, cell or title with a no-break space. Balance stays on headings only. A word with a hyphen never breaks at it (site.js wraps it in .nowrap). --------------------------------------------------------------------------------------------------------------------- 3. LAYOUT --------------------------------------------------------------------------------------------------------------------- .container centered, max 1200 px content, side gutters. .container--narrow (840) --text (760) .section vertical padding; .section--alt (surface-2 band); .section--flush-top .section-head eyebrow + h2 + lead, centered, as wide as its container. .section-head--left: left aligned. .grid-2 / .grid-3 responsive grids (3 → 2 at 1023 → 1 at 599; 2 → 1 at 899). .split: two columns ≥ 1024. .stack > * + * vertical rhythm (--stack, default 16 px). .cluster: wrapping row with gaps. --------------------------------------------------------------------------------------------------------------------- 4. COMPONENTS (markup to copy) --------------------------------------------------------------------------------------------------------------------- Button Get Murmur (never wraps) variants: --primary (ink; wax in dark) · --secondary · --quiet (outline) · --sm · --lg · --block with icon: disabled look: aria-disabled="true". Seal press: data-press (120 ms scale, skipped with reduced motion). Button row

…

(stacks full width under 480 px) Store badge App Store (Apple's file):

Google Play (drawn until Google's file is in assets/img/): with store-badge__mark--play and two store-badge__text lines. Copy both from download.html. Rows:

…

Text link Words standalone with arrow: Words Link button (text style, never wraps) Icon button Chip Published status chips: Published / Live on this page → chip--success + check-circle. Others: chip--outline, chip--container or chip--wax. Rows of chips:

Row chip Row 6 Card

…

--raised (shadow 2) · --tint (surface-2) · --paper (paper + grain) · --pad-lg Icon badge THE icon tile of the site: 44 px, radius 12, wax tint (promises, features, platforms, wiki cards). --sage, --neutral, --lg (56 px) Callout

…

--sage · --warning (real notices only) · --wax Lists

Protocol: MLS (RFC 9420)

Install Murmur.
…

…

Username

…

→ becomes cards under 900 px Accordion

Question

…

Highlight any element with class "hl-target" flashes --highlight for 2 s when it is the URL #target. App surfaces .avatar (data-c="1..8") and .bubble (--in / --out) as in the app: see section 12b. JS only .js-only shows only when JavaScript runs; .no-js-only only without it (static fallbacks). Reveal on scroll: data-reveal on any block (fade + 16 px rise, once). data-reveal-stagger on a parent staggers its direct children by 60 ms. Without JS or with reduced motion: no movement. ===================================================================================================================== */ /* ===================================================================================================================== 1. TOKENS ===================================================================================================================== */ :root { color-scheme: light; /* Families */ --font-display: "Fraunces Variable", "Fraunces", Georgia, "Times New Roman", serif; --font-ui: "Inter Variable", "Inter", "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", sans-serif; --font-mono: "Atkinson Hyperlegible Mono Variable", "Atkinson Hyperlegible Mono", "Cascadia Mono", "SF Mono", Consolas, monospace; --display-variation: "SOFT" 100, "WONK" 0; /* Space: 4-pt grid */ --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px; --s-7: 28px; --s-8: 32px; --s-10: 40px; --s-12: 48px; --s-14: 56px; --s-16: 64px; --s-20: 80px; --s-24: 96px; --s-32: 128px; --gutter: 16px; --section-y: 72px; --content-max: 1200px; --header-h: 64px; --anchor-offset: 88px; /* Radii */ --r-xs: 6px; --r-sm: 8px; --r-btn: 12px; --r-input: 12px; --r-card: 16px; --r-lg: 20px; --r-sheet: 24px; --r-chip: 999px; --r-bubble: 18px; --r-bubble-grouped: 6px; /* Motion */ --dur-sm: 150ms; --dur-md: 250ms; --dur-lg: 350ms; --dur-xl: 500ms; --ease: cubic-bezier(0.2, 0, 0, 1); --ease-out: cubic-bezier(0, 0, 0, 1); --ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1); --ease-sheet: cubic-bezier(0.32, 0.72, 0, 1); /* Color: direction A, light */ --bg: #FBF8F3; --surface: #FFFFFF; --surface-2: #F6F1EA; --container: #F1ECE4; --container-2: #E7E0D5; --text: #1F2329; --text-2: #5B5F68; --text-3: #6F6964; --seal: #B4412C; --brand: #B4412C; --on-brand: #FFFFFF; --primary: #1F2329; --on-primary: #FFFFFF; --primary-container: #EAE4DB; --accent-container: #F7E4DA; --on-accent-container: #7A2A19; --link: #9C3622; --focus: #9C3622; --verified: #4E7A5C; --success: #4E7A5C; --success-container: #E3EEE5; --on-success-container: #244A31; --warning: #8F5600; --warning-container: #FAECD4; --on-warning-container: #5C3900; --error: #B3261E; --error-container: #FAE3DF; --on-error-container: #7D1A13; --info-container: #EEE8DF; --divider: #E8E1D6; --outline: #8E877E; --outline-soft: #D6CEC2; --overlay: rgb(31 35 41 / 0.05); --overlay-strong: rgb(31 35 41 / 0.09); --scrim: rgb(26 20 14 / 0.42); --highlight: #F6E4AE; --on-highlight: #1F2329; --selected: #F7E4DA; --seg-bg: #EFE9E0; --seg-active: #FFFFFF; --input-bg: #FFFFFF; --input-border: #DDD5C9; --input-focus: #1F2329; --bubble-in: #F1ECE4; --bubble-in-text: #1F2329; --bubble-in-meta: #6B6259; --bubble-in-link: #9C3622; --bubble-out: #F7E4DA; --bubble-out-text: #1F2329; --bubble-out-meta: #6B6259; --tick-read: #B4412C; --system-bg: #EFE9E0; --system-text: #575B63; --avatar-1: #B4412C; --avatar-2: #8F5600; --avatar-3: #29702D; --avatar-4: #00766A; --avatar-5: #1F5FAF; --avatar-6: #6A3FB5; --avatar-7: #A23B72; --avatar-8: #5A6800; --on-avatar: #FFFFFF; --sender-1: #B4412C; --sender-2: #8F5600; --sender-3: #29702D; --sender-4: #00766A; --sender-5: #1F5FAF; --sender-6: #6A3FB5; --sender-7: #A23B72; --sender-8: #5A6800; --shadow-1: 0 1px 2px rgba(60,42,24,0.06), 0 1px 3px rgba(60,42,24,0.05); --shadow-2: 0 2px 6px rgba(60,42,24,0.06), 0 8px 24px rgba(60,42,24,0.10); --shadow-3: 0 8px 20px rgba(60,42,24,0.08), 0 24px 64px rgba(60,42,24,0.18); --shadow-device: 0 2px 4px rgba(60,42,24,0.10), 0 24px 48px -12px rgba(60,42,24,0.28), 0 60px 120px -40px rgba(60,42,24,0.35); --card-edge: rgb(60 42 24 / 0.07); --header-bg: rgb(251 248 243 / 0.88); --menu-bg: var(--surface-2); --hero-bg: radial-gradient(760px 520px at 50% 0%, rgba(180,65,44,0.10), rgba(180,65,44,0) 70%), linear-gradient(#FFFDF9, #FBF8F3); --paper: linear-gradient(180deg, #FFFDF9 0%, #F7F1E7 100%); --wax-gradient: radial-gradient(circle at 38% 30%, #D45A40 0%, #B4412C 55%, #8A2C1B 100%); --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .24 0 0 0 0 .16 0 0 0 0 .09 0 0 0 .075 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } /* The dark tokens are for screens only: in print, every page takes the light ones above, whatever the theme. */ @media screen and (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; --bg: #121316; --surface: #1B1D21; --surface-2: #17181C; --container: #24272C; --container-2: #2E3137; --text: #F2EEE8; --text-2: #A9A49C; --text-3: #98938B; --seal: #F08B6E; --brand: #F08B6E; --on-brand: #1F1310; --primary: #F08B6E; --on-primary: #1F1310; --primary-container: #2E3137; --accent-container: #4A2219; --on-accent-container: #FBEAE3; --link: #F08B6E; --focus: #F08B6E; --verified: #8CC79D; --success: #8CC79D; --success-container: #1D3326; --on-success-container: #CFEBD7; --warning: #F2B65A; --warning-container: #3A2C14; --on-warning-container: #F8DFB4; --error: #FF8F84; --error-container: #4D1D18; --on-error-container: #FFDAD5; --info-container: #24272C; --divider: #2A2D33; --outline: #76716A; --outline-soft: #3A3D44; --overlay: rgb(242 238 232 / 0.05); --overlay-strong: rgb(242 238 232 / 0.09); --scrim: rgb(0 0 0 / 0.58); --highlight: #5C4A16; --on-highlight: #FBEFCB; --selected: #3B1D16; --seg-bg: #24272C; --seg-active: #3F4144; --input-bg: #1B1D21; --input-border: #3A3D44; --input-focus: #F2EEE8; --bubble-in: #24272C; --bubble-in-text: #F2EEE8; --bubble-in-meta: #A9A49C; --bubble-in-link: #F49B80; --bubble-out: #4A2219; --bubble-out-text: #FBEAE3; --bubble-out-meta: #C9B5AC; --tick-read: #F6A389; --system-bg: #1E2024; --system-text: #A9A49C; --sender-1: #F08B6E; --sender-2: #F2B65A; --sender-3: #7FD38A; --sender-4: #5ED6C3; --sender-5: #8FB8FF; --sender-6: #B79CFF; --sender-7: #F28DC0; --sender-8: #C3D46A; --shadow-1: 0 1px 2px rgba(0,0,0,0.30), 0 1px 3px rgba(0,0,0,0.20); --shadow-2: 0 2px 6px rgba(0,0,0,0.30), 0 10px 28px rgba(0,0,0,0.45); --shadow-3: 0 8px 24px rgba(0,0,0,0.40), 0 28px 72px rgba(0,0,0,0.55); --shadow-device: 0 2px 4px rgba(0,0,0,0.5), 0 30px 60px -10px rgba(0,0,0,0.6), 0 60px 120px -40px rgba(0,0,0,0.7); --card-edge: rgb(255 255 255 / 0.06); --header-bg: rgb(18 19 22 / 0.86); --menu-bg: var(--bg); --hero-bg: radial-gradient(760px 520px at 50% 0%, rgba(240,139,110,0.13), rgba(240,139,110,0) 70%), #121316; --paper: linear-gradient(180deg, #23252A 0%, #1C1E22 100%); --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 .95 0 0 0 0 .9 0 0 0 .035 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } } @media screen { :root[data-theme="dark"] { color-scheme: dark; --bg: #121316; --surface: #1B1D21; --surface-2: #17181C; --container: #24272C; --container-2: #2E3137; --text: #F2EEE8; --text-2: #A9A49C; --text-3: #98938B; --seal: #F08B6E; --brand: #F08B6E; --on-brand: #1F1310; --primary: #F08B6E; --on-primary: #1F1310; --primary-container: #2E3137; --accent-container: #4A2219; --on-accent-container: #FBEAE3; --link: #F08B6E; --focus: #F08B6E; --verified: #8CC79D; --success: #8CC79D; --success-container: #1D3326; --on-success-container: #CFEBD7; --warning: #F2B65A; --warning-container: #3A2C14; --on-warning-container: #F8DFB4; --error: #FF8F84; --error-container: #4D1D18; --on-error-container: #FFDAD5; --info-container: #24272C; --divider: #2A2D33; --outline: #76716A; --outline-soft: #3A3D44; --overlay: rgb(242 238 232 / 0.05); --overlay-strong: rgb(242 238 232 / 0.09); --scrim: rgb(0 0 0 / 0.58); --highlight: #5C4A16; --on-highlight: #FBEFCB; --selected: #3B1D16; --seg-bg: #24272C; --seg-active: #3F4144; --input-bg: #1B1D21; --input-border: #3A3D44; --input-focus: #F2EEE8; --bubble-in: #24272C; --bubble-in-text: #F2EEE8; --bubble-in-meta: #A9A49C; --bubble-in-link: #F49B80; --bubble-out: #4A2219; --bubble-out-text: #FBEAE3; --bubble-out-meta: #C9B5AC; --tick-read: #F6A389; --system-bg: #1E2024; --system-text: #A9A49C; --sender-1: #F08B6E; --sender-2: #F2B65A; --sender-3: #7FD38A; --sender-4: #5ED6C3; --sender-5: #8FB8FF; --sender-6: #B79CFF; --sender-7: #F28DC0; --sender-8: #C3D46A; --shadow-1: 0 1px 2px rgba(0,0,0,0.30), 0 1px 3px rgba(0,0,0,0.20); --shadow-2: 0 2px 6px rgba(0,0,0,0.30), 0 10px 28px rgba(0,0,0,0.45); --shadow-3: 0 8px 24px rgba(0,0,0,0.40), 0 28px 72px rgba(0,0,0,0.55); --shadow-device: 0 2px 4px rgba(0,0,0,0.5), 0 30px 60px -10px rgba(0,0,0,0.6), 0 60px 120px -40px rgba(0,0,0,0.7); --card-edge: rgb(255 255 255 / 0.06); --header-bg: rgb(18 19 22 / 0.86); --menu-bg: var(--bg); --hero-bg: radial-gradient(760px 520px at 50% 0%, rgba(240,139,110,0.13), rgba(240,139,110,0) 70%), #121316; --paper: linear-gradient(180deg, #23252A 0%, #1C1E22 100%); --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 .95 0 0 0 0 .9 0 0 0 .035 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } } @media (min-width: 600px) { :root { --gutter: 24px; } } @media (min-width: 768px) { :root { --section-y: 96px; } } @media (min-width: 1024px) { :root { --gutter: 40px; } } @media (min-width: 1280px) { :root { --section-y: 128px; } } /* ===================================================================================================================== 2. BASE ===================================================================================================================== */ *, *::before, *::after { box-sizing: border-box; } /* No scroll bar is ever drawn, on any page or in any panel (the founder's choice). Everything still scrolls with the wheel, a trackpad, touch and the keyboard. */ * { scrollbar-width: none; } *::-webkit-scrollbar { display: none; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: var(--anchor-offset); background: var(--bg); } body { margin: 0; min-height: 100vh; overflow-x: clip; background: var(--bg); color: var(--text); font-family: var(--font-ui); font-size: 16px; line-height: 26px; font-weight: 400; font-optical-sizing: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } @media (min-width: 768px) { body { font-size: 17px; line-height: 28px; } } h1, h2, h3, h4, h5, h6, p, ul, ol, dl, dd, figure, blockquote { margin: 0; } :where(ul[class], ol[class]) { list-style: none; padding: 0; } img, svg, video { display: block; max-width: 100%; } img { height: auto; } button, input, textarea, select { font: inherit; color: inherit; letter-spacing: inherit; } button { cursor: pointer; } a { color: var(--link); } b, strong { font-weight: 600; } small { font-size: inherit; } hr { border: 0; height: 1px; background: var(--divider); margin: 0; } ::selection { background: color-mix(in srgb, var(--seal) 24%, transparent); } [hidden] { display: none !important; } main:focus { outline: none; } /* Focus: 2 px focus outline, 2 px offset, everywhere. The ring follows each component's own corners (buttons, chips, cards keep their radius, set later in this file); plain text gets 4 px corners. */ :focus { outline: none; } :focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 4px; } /* Icons from the sprite */ .i { width: 20px; height: 20px; flex: none; fill: currentColor; stroke: none; } .i--16 { width: 16px; height: 16px; } .i--24 { width: 24px; height: 24px; } .i--28 { width: 28px; height: 28px; } /* Murmur hidden symbol host (header partial) */ .mm-defs { position: absolute; width: 0; height: 0; overflow: hidden; pointer-events: none; } /* Theme change: colors ease for 150 ms (class set by site.js for the duration) */ html.theme-anim, html.theme-anim *, html.theme-anim *::before, html.theme-anim *::after { transition: background-color var(--dur-sm) linear, color var(--dur-sm) linear, border-color var(--dur-sm) linear, fill var(--dur-sm) linear, box-shadow var(--dur-sm) linear !important; } /* ===================================================================================================================== 3. TYPE ===================================================================================================================== */ h1, .t-h1, h2, .t-h2, .t-display { font-family: var(--font-display); font-weight: 600; font-variation-settings: var(--display-variation); letter-spacing: -0.02em; color: var(--text); text-wrap: balance; } h1, .t-h1 { font-size: 40px; line-height: 46px; } h2, .t-h2 { font-size: 32px; line-height: 38px; letter-spacing: -0.015em; } .t-h2--sm { font-size: 28px; line-height: 34px; } h3, .t-h3 { font-family: var(--font-ui); font-size: 20px; line-height: 26px; font-weight: 600; letter-spacing: -0.01em; text-wrap: balance; } .t-h4 { font-family: var(--font-ui); font-size: 17px; line-height: 24px; font-weight: 600; } @media (min-width: 768px) { h1, .t-h1 { font-size: 60px; line-height: 64px; } h2, .t-h2 { font-size: 40px; line-height: 46px; } .t-h2--sm { font-size: 32px; line-height: 40px; } h3, .t-h3 { font-size: 22px; line-height: 28px; } } @media (min-width: 1280px) { h1, .t-h1 { font-size: 76px; line-height: 80px; } h2, .t-h2 { font-size: 48px; line-height: 54px; } .t-h2--sm { font-size: 36px; line-height: 44px; } } h4, .t-h4 { text-wrap: balance; } .lead { font-size: 18px; line-height: 28px; color: var(--text-2); } @media (min-width: 768px) { .lead { font-size: 20px; line-height: 32px; } } .small { font-size: 15px; line-height: 22px; } .caption { font-size: 13px; line-height: 18px; color: var(--text-2); } .eyebrow { display: block; font-family: var(--font-ui); font-size: 13px; line-height: 16px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--link); } .muted { color: var(--text-2); } /* Emoji drawn with Apple's images (assets/emoji/

.png, 64 px, the founder's choice: the same look for
   every visitor, as in the app on an iPhone). Write : the
   image takes the size of the text around it, and the alt keeps the emoji for copy and screen readers. Apple's
   images have no licence for a website: replace them before going online (see the README). */
img.emoji { display: inline-block; width: 1.15em; height: 1.15em; margin: 0 0.04em; vertical-align: -0.2em; object-fit: contain; }
.mono { font-family: var(--font-mono); letter-spacing: 0.01em; font-variant-ligatures: none; }
.username { font-feature-settings: "ss02"; }
.tnum { font-variant-numeric: tabular-nums; }
.center { text-align: center; }
.nowrap { white-space: nowrap; }
.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}


/* =====================================================================================================================
   4. LAYOUT
   ===================================================================================================================== */
.container { width: 100%; max-width: calc(var(--content-max) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
.container--narrow { max-width: calc(840px + 2 * var(--gutter)); }
.container--text { max-width: calc(760px + 2 * var(--gutter)); }
.section { padding-block: var(--section-y); position: relative; }
.section--alt { background: var(--surface-2); }
.section--flush-top { padding-top: 0; }
.section--line { border-top: 1px solid var(--divider); }
.section-head { margin: 0 auto var(--s-12); text-align: center; }
.section-head > .eyebrow + * { margin-top: var(--s-3); }
.section-head > h2 + .lead, .section-head > .t-h2 + .lead { margin-top: var(--s-5); }
.section-head--left { margin-inline: 0; text-align: left; }
@media (min-width: 1024px) { .section-head { margin-bottom: var(--s-16); } }

.stack { display: flex; flex-direction: column; }
.stack > * + * { margin-top: var(--stack, var(--s-4)); }
.cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--cluster-gap, var(--s-3)); }

.grid-3, .grid-2 { display: grid; gap: var(--grid-gap, var(--s-6)); grid-template-columns: 1fr; }
@media (min-width: 600px) { .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 900px) { .grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.split { display: grid; gap: var(--s-12); grid-template-columns: 1fr; align-items: start; }
@media (min-width: 1024px) { .split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-16); } .split--center { align-items: center; } }

.grain { position: relative; isolation: isolate; }
.grain::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background-image: var(--grain); border-radius: inherit; }


/* =====================================================================================================================
   5. HEADER, MENU, SKIP LINK
   ===================================================================================================================== */
/* The header: a frosted bar, 64 px, that stays at the top.
   - From 720 px: the logo, then on the right the three links (Security, How it works, FAQ), a thin vertical
     hairline, the language switch, the theme button and "Get Murmur"; no menu. The English bar needs about 640 px of content, so 720 leaves about
     35 px of air beside the logo. The French bar (lang="fr-CA", longer labels) needs about 690 px: it takes this
     layout from 768 px, and keeps the phone layout below (site.js MENU_MAX follows both widths). Without
     JavaScript the French bar shows its links from 720 px too (no theme button then, so they fit).
   - Below 720 px (768 in French): the logo, the language switch, the theme button (sun or moon) and the menu
     button. All three are 40 px with a 44 px touch area (::after). The links and "Get Murmur" are in the menu.
   The language switch (a.lang-switch, from the header partials; sync.cjs points it at the page's twin in the other
   language, site.js carries the #anchor along): the other language's two letters, "FR" on the English pages and
   "EN" on the French ones, at every width: a quiet small link on a 40 px square, as calm as the icon buttons beside
   it. Its name for screen readers is the language's whole name, in that language (aria-label, lang, hreflang). It
   stays in the bar at every width, so it is one tap away on a phone, menu open or closed; with the menu open it is
   in the menu's Tab loop. It is the site's only language link: the pages carry no other.
   The phone menu (version 2 of the mockups, "Cartes avec icônes", the founder's choice): grouped rows, as in iOS
   Settings, on the site's tokens.
   - A sheet under the bar, as tall as the visible screen (100dvh less the bar), on --menu-bg (--surface-2 in light,
     --bg in dark). The header takes it too while the menu is open (.is-open), so bar and sheet read as one. The bar
     keeps its theme button next to the X, and site.js puts it in the focus trap, in the bar's order: theme, X, menu.
   - The pages: one card (--surface, --r-card, card edge, --shadow-1) with three rows, 76 px tall. Each row: the
     site's icon tile (.icon-badge), the page name (Inter 600 17/22), one line of the site's own words under it
     (14/19, --text-2) and a chevron. The hairline between rows starts under the words (74 px in), as in iOS.
   - Under a small heading "Transparency" (the footer's own column): the footer's three links, quieter (a line icon in
     --text-2, no tile, Inter 400 16 px, 52 px tall, hairline 52 px in).
   - At the bottom, pinned (sticky, it never scrolls away): the founder's line with the seal, then "Get Murmur", a
     full-width large button (.btn--primary .btn--lg .btn--block).
   - Hairlines only when something passes under an edge: under the bar when the rows scroll under it
     (.menu-panel.is-scrolled), above the button when they scroll under it (.menu-dock.is-stuck). site.js sets both.
   - Short screens: the panel is a size container ("menu"), so the layout follows the room it really has (Safari's
     visible height, toolbars shown). The regular layout needs 588 px; below that, the rows tighten to 64 and 46 px
     (506 px); below 506 px upright (an iPhone SE in Safari), the founder's line steps aside and "Get Murmur" stays
     pinned (476 px). A phone on its side (landscape, under 560 px tall): the button follows the rows instead of
     covering half the screen.
   - Pressed row: filled edge to edge (--overlay-strong), the hairlines beside it hidden, as in iOS. The tint comes on
     at once and fades out on release (site.js adds an empty touchstart listener: iOS Safari needs one for :active).
     Hover tints only with a real pointer (hover: hover), the header buttons too: no grey tile stays after a tap.
   - Current page (aria-current="page", set by sync.cjs): the row's name in --link and a wax dot for the chevron.
   Motion (none with reduced motion, see section 14):
   - Open: the sheet unfolds down from under the bar (clip-path, 380 ms on --ease-sheet: 75 % of the way in 100 ms).
     It stays opaque, so the page never shows through a card. The groups settle 10 px down into place as it passes
     (fade and move, 420 ms, 40 ms apart, the button last). The three lines turn into the X (spring, 320 ms).
   - Close: the content fades (120 ms) while the sheet folds back up under the bar (280 ms); site.js keeps the panel
     shown that long with .is-closing, then hides it. A tap on a link in the menu closes it at once.
   Without JavaScript the menu cannot open: the links take a second row under the logo (the html:not(.js) rules). */
.skip-link {
  position: absolute; left: var(--s-4); top: -100px; z-index: 200;
  padding: 10px 16px; border-radius: var(--r-btn); background: var(--primary); color: var(--on-primary);
  font-weight: 600; text-decoration: none; white-space: nowrap; box-shadow: var(--shadow-2);
}
.skip-link:focus, .skip-link:focus-visible { top: var(--s-3); }

.site-header {
  position: sticky; top: 0; z-index: 100; height: var(--header-h);
  background: var(--header-bg); -webkit-backdrop-filter: saturate(1.6) blur(16px); backdrop-filter: saturate(1.6) blur(16px);
  box-shadow: 0 1px 0 transparent; transition: box-shadow var(--dur-md) var(--ease), background-color var(--dur-md) var(--ease);
}
.site-header.is-scrolled, .site-header.is-open { box-shadow: 0 1px 0 var(--divider); }
.site-header.is-open { background-color: var(--menu-bg); }
.site-header__bar { height: var(--header-h); display: flex; align-items: center; gap: var(--s-4); }

/* 6 px of room inside (cancelled by the negative margin, so nothing moves) keeps the focus ring off the mark and the "r" */
.brand { display: inline-flex; align-items: center; gap: 10px; padding: 4px 6px; margin: -4px -6px; color: var(--text); text-decoration: none; flex: none; border-radius: 10px; }
.brand__mark { width: 28px; height: 28px; flex: none; }
.brand__word { font-family: var(--font-display); font-variation-settings: var(--display-variation); font-weight: 600; font-size: 22px; line-height: 28px; letter-spacing: -0.01em; white-space: nowrap; }

.site-nav { display: none; }
.site-nav__list { display: flex; align-items: center; gap: var(--s-1); }
.site-nav__link {
  position: relative; display: inline-flex; align-items: center; height: 40px; padding: 0 12px; border-radius: 10px;
  color: var(--text-2); font-size: 15px; font-weight: 500; text-decoration: none; white-space: nowrap;
  transition: color var(--dur-sm) var(--ease), background-color var(--dur-sm) var(--ease);
}
.site-nav__link:hover { color: var(--text); background: var(--overlay); }
.site-nav__link[aria-current="page"] { color: var(--text); }
.site-nav__link[aria-current="page"]::after {
  content: ""; position: absolute; left: 12px; right: 12px; bottom: 4px; height: 2px; border-radius: 2px; background: var(--seal);
}
.site-header__actions { margin-left: auto; display: flex; align-items: center; gap: var(--s-2); }

/* The language switch: two letters at every width (FR, EN: 14 px, 500, a little tracking, in --text-2, on the icon
   buttons' 40 px square: as light as their 1.5 px strokes). 44 px touch area. A header that still carries the whole
   name (.lang-switch__long beside .lang-switch__short) shows only the two letters. */
.lang-switch {
  position: relative; display: inline-flex; align-items: center; justify-content: center; flex: none;
  min-width: 40px; height: 40px; padding: 0 8px; border-radius: var(--r-btn);
  color: var(--text-2); font-size: 14px; line-height: 20px; font-weight: 500; letter-spacing: 0.04em;
  text-decoration: none; white-space: nowrap; -webkit-tap-highlight-color: transparent;
  transition: color var(--dur-sm) var(--ease), background-color var(--dur-sm) var(--ease);
}
.lang-switch::after { content: ""; position: absolute; inset: -2px; }
@media (hover: hover) { .lang-switch:hover { color: var(--text); background: var(--overlay-strong); } }
.lang-switch__long { display: none; }

.icon-btn {
  display: inline-grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: var(--r-btn);
  background: transparent; color: var(--text-2); -webkit-tap-highlight-color: transparent;
  transition: background-color var(--dur-sm) var(--ease), color var(--dur-sm) var(--ease);
}
/* Only with a real pointer: on a touch screen :hover sticks after a tap */
@media (hover: hover) { .icon-btn:hover { background: var(--overlay-strong); color: var(--text); } }
.icon-btn .i { width: 20px; height: 20px; }
.icon-btn--sm { width: 32px; height: 32px; border-radius: 9px; }
.icon-btn--sm .i { width: 18px; height: 18px; }

.theme-toggle__sun { display: none; }
:root[data-theme="dark"] .theme-toggle__moon { display: none; }
:root[data-theme="dark"] .theme-toggle__sun { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-toggle__moon { display: none; }
  :root:not([data-theme="light"]) .theme-toggle__sun { display: block; }
}

/* The theme and menu buttons: 40 px, with a 44 px touch area */
.site-header .theme-toggle, .menu-btn { position: relative; }
.site-header .theme-toggle::after, .menu-btn::after { content: ""; position: absolute; inset: -2px; }
/* The menu button: the three lines turn into the X */
.menu-btn .i { grid-area: 1 / 1; width: 22px; height: 22px; transition: opacity 160ms var(--ease), transform 320ms var(--ease-spring); }
.menu-btn .menu-btn__close { opacity: 0; transform: rotate(-45deg) scale(0.6); }
.menu-btn[aria-expanded="true"] .menu-btn__open { opacity: 0; transform: rotate(45deg) scale(0.6); }
.menu-btn[aria-expanded="true"] .menu-btn__close { opacity: 1; transform: none; }

/* The menu panel: a size container (the short-screen rules below read the room it really has) */
.menu-panel {
  container: menu / size;
  position: absolute; left: 0; right: 0; top: var(--header-h);
  height: calc(100dvh - var(--header-h)); overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain;
  background: var(--menu-bg); border-top: 1px solid transparent;
  transition: border-color var(--dur-sm) var(--ease);
}
.menu-panel.is-scrolled { border-top-color: var(--divider); }
.menu-panel__inner { display: flex; flex-direction: column; min-height: 100%; max-width: calc(560px + 2 * var(--gutter)); padding-top: var(--s-5); }

/* The groups (cards of rows) */
.menu-group { border-radius: var(--r-card); background: var(--surface); box-shadow: 0 0 0 1px var(--card-edge), var(--shadow-1); }
.menu-group > li { position: relative; display: flex; }
.menu-group > li + li::before {
  content: ""; position: absolute; z-index: 1; top: 0; right: 0; left: var(--menu-inset); height: 1px;
  background: var(--divider); pointer-events: none;
}
.menu-row, .menu-link {
  position: relative; flex: 1; display: flex; align-items: center; min-width: 0;
  color: var(--text); text-decoration: none; -webkit-tap-highlight-color: transparent;
  transition: background-color var(--dur-md) var(--ease);
}
.menu-group > li:first-child > a { border-top-left-radius: var(--r-card); border-top-right-radius: var(--r-card); }
.menu-group > li:last-child > a { border-bottom-left-radius: var(--r-card); border-bottom-right-radius: var(--r-card); }
@media (hover: hover) { .menu-row:hover, .menu-link:hover { background-color: var(--overlay); } }
/* Pressed: on at once, edge to edge, the hairlines above and below it hidden; it fades out on release */
.menu-row:active, .menu-link:active { background-color: var(--overlay-strong); transition: none; }
.menu-group > li:has(> a:active)::before, .menu-group > li:has(> a:active) + li::before { opacity: 0; }
.menu-row:focus-visible, .menu-link:focus-visible { z-index: 2; outline: 2px solid var(--focus); outline-offset: -2px; }
.menu-chev { flex: none; width: 18px; height: 18px; margin-left: auto; color: color-mix(in srgb, var(--text-3) 58%, var(--surface)); }

/* The pages, as rich rows */
.menu-group--pages { --menu-inset: 74px; }
.menu-row { gap: 14px; min-height: 76px; padding: 14px 14px 14px 16px; }
.menu-row__text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.menu-row__title { font-size: 17px; line-height: 22px; font-weight: 600; letter-spacing: -0.012em; white-space: nowrap; }
.menu-row__desc { font-size: 14px; line-height: 19px; color: var(--text-2); }
/* Narrow phones (360 to 374 px): 6 px more room for the words */
@media (max-width: 374px) {
  .menu-group--pages { --menu-inset: 70px; }
  .menu-row { gap: 12px; padding-left: 14px; padding-right: 12px; }
}

/* Transparency, quieter */
.menu-head {
  margin: var(--s-7) var(--s-4) var(--s-2); font-family: var(--font-ui); font-variation-settings: normal;
  font-size: 13px; line-height: 18px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-2);
}
.menu-group--more { --menu-inset: 52px; }
.menu-link { gap: 14px; min-height: 52px; padding: 0 14px 0 16px; font-size: 16px; line-height: 22px; font-weight: 400; }
.menu-link > .i:first-child { width: 22px; height: 22px; color: var(--text-2); }
.menu-link > span { flex: 1; min-width: 0; white-space: nowrap; }

/* Current page */
.menu-row[aria-current="page"] .menu-row__title, .menu-link[aria-current="page"] > span { color: var(--link); }
.menu-row[aria-current="page"] .menu-chev, .menu-link[aria-current="page"] .menu-chev { display: none; }
.menu-row[aria-current="page"]::after, .menu-link[aria-current="page"]::after {
  content: ""; flex: none; width: 8px; height: 8px; margin: 0 5px 0 auto; border-radius: 50%; background: var(--seal);
}

/* The bottom: the founder's line, then "Get Murmur", pinned */
.menu-dock {
  position: sticky; bottom: 0; z-index: 3; margin-top: auto;
  margin-inline: calc(-1 * var(--gutter)); padding: var(--s-6) var(--gutter) max(var(--s-5), env(safe-area-inset-bottom));
  background: var(--menu-bg);
}
.menu-dock::before {
  content: ""; position: absolute; top: 0; left: -100vmax; right: -100vmax; height: 1px; background: var(--divider);
  opacity: 0; transition: opacity var(--dur-sm) var(--ease);
}
.menu-dock.is-stuck::before { opacity: 1; }
.menu-dock__note {
  display: flex; align-items: center; justify-content: center; gap: 7px; margin-bottom: var(--s-3);
  font-size: 13px; line-height: 18px; color: var(--text-2); text-align: center;
}
.menu-dock__seal { flex: none; width: 18px; height: 18px; }
@media (min-width: 375px) { .menu-dock__note { white-space: nowrap; } }
/* The French line is wider than a phone under 400 px: two centred lines, the seal before "Gratuit", inside the gutters. */
@media (max-width: 399px) {
  :root[lang^="fr"] .menu-dock__note { display: block; white-space: normal; }
  :root[lang^="fr"] .menu-dock__seal { display: inline-block; vertical-align: top; margin-right: 7px; }
}

/* Short screens. Heights are the panel's own (the visible height less the 64 px bar), so Safari with its toolbars
   shown counts as it should: an iPhone 15 shows about 390 x 664 (panel 600, regular layout), an Android phone
   360 x 640 (panel 576, tight), an iPhone SE 375 x 548 (panel 484, tight and no line). */
@container menu (max-height: 587px) {
  .menu-panel__inner { padding-top: var(--s-3); }
  .menu-row { min-height: 64px; padding-block: 10px; }
  .menu-link { min-height: 46px; }
  .menu-head { margin-top: var(--s-5); }
  .menu-dock { padding-top: var(--s-3); }
}
@media (orientation: portrait) {
  @container menu (max-height: 505px) { .menu-dock__note, :root[lang^="fr"] .menu-dock__note { display: none; } }
}
/* A phone on its side: the button follows the rows instead of covering half the screen */
@media (max-height: 560px) and (orientation: landscape) {
  .menu-dock { position: static; }
  .menu-dock::before { display: none; }
}

/* Motion: the unfold and the settle while .is-open, the fold while .is-closing (site.js) */
@media (prefers-reduced-motion: no-preference) {
  .js .site-header.is-open .menu-panel { animation: mm-menu-unfold 380ms var(--ease-sheet) both; }
  .js .site-header.is-open :is(.menu-group--pages, .menu-more, .menu-dock) { animation: mm-menu-settle 420ms var(--ease-sheet) 40ms both; }
  .js .site-header.is-open .menu-more { animation-delay: 80ms; }
  .js .site-header.is-open .menu-dock { animation-delay: 160ms; }
  .js .menu-panel.is-closing { animation: mm-menu-fold 280ms var(--ease-sheet) both; }
  .js .menu-panel.is-closing .menu-panel__inner { animation: mm-menu-fade 120ms var(--ease) both; }
}
@keyframes mm-menu-unfold { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0); } }
@keyframes mm-menu-fold { from { clip-path: inset(0); } to { clip-path: inset(0 0 100% 0); } }
@keyframes mm-menu-settle { from { opacity: 0; transform: translateY(-10px); } 40% { opacity: 1; } to { opacity: 1; transform: none; } }
@keyframes mm-menu-fade { to { opacity: 0; transform: translateY(-6px); } }

/* Below 720 px the header's "Get Murmur" is in the menu (scoped to beat the .btn rules); from 720 px the links and
   "Get Murmur" are in the bar, and there is no menu */
.site-header .site-header__cta { display: none; }
@media (min-width: 720px) {
  .site-nav { display: block; margin-left: auto; }
  .site-nav + .site-header__actions { position: relative; margin-left: var(--s-3); }
  /* The separator: a hairline halfway between the last link (FAQ) and the language switch, so the three links read
     as one group and the switch, the theme button and "Get Murmur" as another. It sits in the space that was
     already there (the bar's 16 px gap and the 12 px margin), so nothing moves: its centre is 25 px from the end of
     "FAQ" and about 25 px from the start of "FR" or "EN". 16 px tall (about the links' text), centred on the bar, in
     --outline-soft (--divider, the bar's own edge, was too faint on a 1x screen). Only where the links show: never
     on a phone (the links are in the menu) nor on the French pages from 720 to 767 px. */
  .site-nav + .site-header__actions::before {
    content: ""; position: absolute; top: 50%; left: -15px; width: 1px; height: 16px; margin-top: -8px;
    background: var(--outline-soft); pointer-events: none;
  }
  .site-header .site-header__cta { display: inline-flex; }
  .menu-btn, .menu-panel { display: none !important; }
}
/* The French bar needs 768 px: from 720 to 767 px the French pages keep the phone layout (with JavaScript; without
   it the links show, see above) */
@media (min-width: 720px) and (max-width: 767px) {
  :root.js[lang^="fr"] .site-nav { display: none; }
  :root.js[lang^="fr"] .site-header__actions { margin-left: auto; }
  :root.js[lang^="fr"] .site-header__actions::before { display: none; }
  :root.js[lang^="fr"] .site-header .site-header__cta { display: none; }
  :root.js[lang^="fr"] .menu-btn { display: inline-grid !important; }
  :root.js[lang^="fr"] .menu-panel:not([hidden]) { display: block !important; }
}
/* Without JavaScript the menu cannot open: the links take a second row and the dead controls hide */
html:not(.js) .menu-btn, html:not(.js) .theme-toggle { display: none !important; }
@media (max-width: 719px) {
  html:not(.js) .site-header { position: relative; height: auto; }
  html:not(.js) .site-header__bar { flex-wrap: wrap; height: auto; padding-block: var(--s-3); }
  html:not(.js) .site-nav { display: block; order: 3; width: 100%; margin: 0 0 0 -12px; }
}


/* =====================================================================================================================
   6. BUTTONS AND LINKS
   ===================================================================================================================== */
.btn {
  --btn-h: 48px;
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: var(--btn-h); padding: 0 22px; border: 0; border-radius: var(--r-btn);
  font-family: var(--font-ui); font-size: 16px; line-height: 1; font-weight: 600; letter-spacing: -0.005em;
  white-space: nowrap; text-decoration: none; user-select: none; -webkit-tap-highlight-color: transparent;
  transition: background-color var(--dur-sm) var(--ease), color var(--dur-sm) var(--ease), box-shadow var(--dur-sm) var(--ease), transform var(--dur-sm) var(--ease);
}
.btn .i { width: 20px; height: 20px; }
.btn--primary { background: var(--primary); color: var(--on-primary); box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.08), var(--shadow-1); }
.btn--primary:hover { background: color-mix(in srgb, var(--primary) 86%, var(--bg)); }
.btn--secondary { background: var(--primary-container); color: var(--text); }
.btn--secondary:hover { background: color-mix(in srgb, var(--primary-container) 90%, var(--text)); }
.btn--quiet { background: transparent; color: var(--text); box-shadow: inset 0 0 0 1px var(--outline-soft); }
.btn--quiet:hover { background: var(--overlay); box-shadow: inset 0 0 0 1px var(--outline); }
.btn--wax { background: var(--wax-gradient); color: #FFFFFF; box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.18), 0 1px 2px rgb(94 29 16 / 0.3), 0 6px 16px -6px rgb(180 65 44 / 0.5); }
.btn--sm { --btn-h: 40px; padding: 0 16px; font-size: 15px; border-radius: 11px; }
.btn--sm .i { width: 18px; height: 18px; }
.btn--lg { --btn-h: 56px; padding: 0 28px; font-size: 17px; border-radius: 14px; }
.btn--block { display: flex; width: 100%; }
.btn:active:not([aria-disabled="true"]) { transform: scale(0.98); }
.btn[aria-disabled="true"], .btn:disabled { opacity: 0.48; cursor: not-allowed; box-shadow: none; }
.btn.is-pressing, .icon-btn.is-pressing { animation: mm-press 120ms var(--ease); }
@keyframes mm-press { 0% { transform: scale(1); } 45% { transform: scale(0.96); } 100% { transform: scale(1); } }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: center; }
.btn-row--center { justify-content: center; }
@media (max-width: 479px) { .btn-row--stack-sm { flex-direction: column; align-items: stretch; } .btn-row--stack-sm > .btn { width: 100%; } }

.link {
  color: var(--link); font-weight: 500; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px;
  text-decoration-color: color-mix(in srgb, var(--link) 38%, transparent); transition: text-decoration-color var(--dur-sm) var(--ease);
}
.link:hover { text-decoration-color: currentColor; }
.link--arrow { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; text-decoration: none; font-weight: 600; }
.link--arrow .i { width: 18px; height: 18px; transition: transform var(--dur-md) var(--ease); }
.link--arrow:hover .i { transform: translateX(3px); }
.link--arrow:hover { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.link-btn {
  display: inline-flex; align-items: center; gap: 6px; padding: 2px 0; border: 0; background: none;
  color: var(--link); font-size: inherit; line-height: inherit; font-weight: 600; white-space: nowrap; border-radius: 4px;
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: color-mix(in srgb, var(--link) 38%, transparent);
}
.link-btn:hover { text-decoration-color: currentColor; }
.link-btn .i { width: 16px; height: 16px; }
.links-row { display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-6); align-items: center; }

/* Store badges: "Download on the App Store" and "Get it on Google Play", black in both themes. Both scale with --sb-h
   (56 px, 48 px under 480 px so two badges share a row at 360).
   - App Store: Apple's own badge file, unchanged (assets/img/app-store-badge.svg, from developer.apple.com; on the
     French pages, Apple's French badge, app-store-badge-fr.svg, width="127" height="40"), at the badge height:
     
   - Google Play: still drawn after Google's badge (black, a thin grey edge, the Play mark, two lines of white text)
     until Google's own file is saved in assets/img/; then it takes the same markup as the App Store one (see README).
   Apple asks for clear space of a quarter of the badge height around it: 16 px between two badges. */
.store-row { display: flex; flex-wrap: wrap; gap: var(--s-4); align-items: center; }
.store-row--center { justify-content: center; }
.store-badge {
  --sb-h: 56px;
  display: inline-flex; align-items: center; flex: none; gap: calc(var(--sb-h) * 0.18); height: var(--sb-h);
  vertical-align: top; /* no strut space under it in a line of text: a badge file and a drawn badge sit alike */
  padding: 0 calc(var(--sb-h) * 0.34) 0 calc(var(--sb-h) * 0.26); border-radius: calc(var(--sb-h) * 0.22);
  background: #000; color: #FFF; box-shadow: inset 0 0 0 1px #A6A6A6;
  font-family: var(--font-ui); text-decoration: none; white-space: nowrap; user-select: none; -webkit-tap-highlight-color: transparent;
  transition: background-color var(--dur-sm) var(--ease), box-shadow var(--dur-sm) var(--ease), transform var(--dur-sm) var(--ease);
}
.store-badge:hover { background: #1C1C1E; box-shadow: inset 0 0 0 1px #C7C7CC; }
.store-badge:active { transform: scale(0.98); }
.store-badge__mark { flex: none; width: calc(var(--sb-h) * 0.48); height: calc(var(--sb-h) * 0.48); margin-top: calc(var(--sb-h) * -0.03); }
.store-badge__mark--play { width: calc(var(--sb-h) * 0.44); height: calc(var(--sb-h) * 0.5); margin-top: 0; }
.store-badge__text { display: flex; flex-direction: column; align-items: flex-start; gap: calc(var(--sb-h) * 0.05); }
.store-badge__small { font-size: calc(var(--sb-h) * 0.205); line-height: 1; font-weight: 500; letter-spacing: 0.01em; }
.store-badge__big { font-size: calc(var(--sb-h) * 0.41); line-height: 1; font-weight: 600; letter-spacing: -0.02em; }
.store-badge--play .store-badge__small { font-size: calc(var(--sb-h) * 0.17); letter-spacing: 0.07em; text-transform: uppercase; }
/* an official badge file: the link only holds it (no fill or edge of its own: the file has them). The width follows
   the file's own proportions. */
.store-badge--img, .store-badge--img:hover { padding: 0; background: none; box-shadow: none; }
.store-badge__img { display: block; flex: none; width: auto; max-width: none; height: var(--sb-h); }
@media (max-width: 479px) { .store-badge { --sb-h: 48px; } }
@media (prefers-reduced-motion: reduce) { .store-badge:active { transform: none; } }


/* =====================================================================================================================
   7. CHIPS
   ===================================================================================================================== */
.chip {
  display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 12px; border-radius: var(--r-chip);
  font-size: 13px; line-height: 16px; font-weight: 500; white-space: nowrap; color: var(--text); background: var(--container);
}
.chip .i { width: 16px; height: 16px; margin-left: -2px; }
.chip--success { background: var(--success-container); color: var(--on-success-container); }
.chip--outline { background: transparent; color: var(--text-2); box-shadow: inset 0 0 0 1px var(--outline-soft); }
.chip--container { background: var(--container); color: var(--text); }
.chip--wax { background: var(--accent-container); color: var(--on-accent-container); }
.chip--sm { height: 24px; padding: 0 9px; font-size: 12px; }
.chip__dot { width: 8px; height: 8px; flex: none; border-radius: 50%; background: var(--wax-gradient); }
.chip-row { display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: center; }
.chip-row--center { justify-content: center; }

.row-chip {
  display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: var(--r-chip);
  background: var(--container); color: var(--link); font-size: 12px; line-height: 1; font-weight: 600;
  font-variant-numeric: tabular-nums; white-space: nowrap; text-decoration: none; vertical-align: 1px;
  transition: background-color var(--dur-sm) var(--ease);
}
.row-chip:hover { background: var(--accent-container); }

.chip-link {
  display: inline-flex; align-items: center; height: 36px; padding: 0 14px; border-radius: var(--r-chip);
  background: var(--container); color: var(--text-2); font-size: 14px; font-weight: 500; white-space: nowrap; text-decoration: none;
  transition: background-color var(--dur-sm) var(--ease), color var(--dur-sm) var(--ease);
}
.chip-link:hover { color: var(--text); background: var(--container-2); }
.chip-link[aria-current="true"] { background: var(--primary); color: var(--on-primary); }


/* =====================================================================================================================
   8. CARDS, BADGES, CALLOUTS, LISTS, KEY/VALUE
   ===================================================================================================================== */
.card {
  position: relative; background: var(--surface); border-radius: var(--r-card); padding: var(--s-6);
  box-shadow: 0 0 0 1px var(--card-edge), var(--shadow-1);
}
@media (min-width: 1024px) { .card { padding: var(--s-8); } }
.card--raised { box-shadow: 0 0 0 1px var(--card-edge), var(--shadow-2); }
.card--tint { background: var(--surface-2); box-shadow: 0 0 0 1px var(--card-edge); }
.card--paper { background: var(--paper); }
.card--paper::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background-image: var(--grain); }
.card--flat { box-shadow: none; }
.card--pad-lg { padding: var(--s-8); }
@media (min-width: 1024px) { .card--pad-lg { padding: var(--s-12); } }

/* The one icon tile of the site (promises, features, platforms, wiki cards): 44 px, radius 12, wax tint */
.icon-badge {
  display: inline-grid; place-items: center; width: 44px; height: 44px; flex: none; border-radius: 12px;
  background: var(--accent-container); color: var(--seal);
}
.icon-badge .i { width: 24px; height: 24px; }
.icon-badge--lg { width: 56px; height: 56px; border-radius: 16px; }
.icon-badge--lg .i { width: 30px; height: 30px; }
.icon-badge--sage { background: var(--success-container); color: var(--verified); }
.icon-badge--neutral { background: var(--container); color: var(--text-2); }

.callout {
  display: flex; gap: var(--s-4); align-items: flex-start; padding: var(--s-5) var(--s-6); border-radius: var(--r-card);
  background: var(--info-container); color: var(--text);
}
.callout__icon { width: 22px; height: 22px; margin-top: 3px; color: var(--text-2); }
.callout--sage { background: var(--success-container); color: var(--on-success-container); }
.callout--sage .callout__icon { color: var(--verified); }
.callout--warning { background: var(--warning-container); color: var(--on-warning-container); }
.callout--warning .callout__icon { color: var(--warning); }
.callout--wax { background: var(--accent-container); color: var(--on-accent-container); }
.callout--wax .callout__icon { color: var(--seal); }

.check-list, .icon-list { display: grid; gap: var(--s-3); }
.check-list > li, .icon-list > li { display: flex; gap: var(--s-3); align-items: flex-start; }
.check-list > li::before {
  content: ""; flex: none; width: 22px; height: 22px; margin-top: 3px; border-radius: 50%;
  background: var(--accent-container) no-repeat center / 14px 14px;
  -webkit-mask: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath fill='%239C3622' d='M232.49 80.49l-128 128a12 12 0 0 1-17 0l-56-56a12 12 0 1 1 17-17L96 183 215.51 63.51a12 12 0 0 1 17 17z'/%3E%3C/svg%3E");
}
:root[data-theme="dark"] .check-list > li::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath fill='%23F08B6E' d='M232.49 80.49l-128 128a12 12 0 0 1-17 0l-56-56a12 12 0 1 1 17-17L96 183 215.51 63.51a12 12 0 0 1 17 17z'/%3E%3C/svg%3E"); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .check-list > li::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath fill='%23F08B6E' d='M232.49 80.49l-128 128a12 12 0 0 1-17 0l-56-56a12 12 0 1 1 17-17L96 183 215.51 63.51a12 12 0 0 1 17 17z'/%3E%3C/svg%3E"); } }
.icon-list > li > .i { margin-top: 3px; color: var(--seal); }
.dot-list { display: grid; gap: var(--s-2); }
.dot-list > li { position: relative; padding-left: 18px; }
.dot-list > li::before { content: ""; position: absolute; left: 2px; top: 0.72em; width: 5px; height: 5px; border-radius: 50%; background: var(--seal); }
.dot-list--grey > li::before { background: var(--text-3); }

.kv {
  display: grid; gap: 0; padding: var(--s-2) var(--s-5); border-radius: var(--r-card); background: var(--surface-2);
  box-shadow: inset 0 0 0 1px var(--card-edge);
}
.kv > div { display: grid; grid-template-columns: 1fr; gap: 2px var(--s-6); padding: var(--s-3) 0; }
.kv > div + div { border-top: 1px solid var(--divider); }
.kv dt { font-weight: 600; font-size: 15px; line-height: 22px; }
.kv dd { font-size: 15px; line-height: 22px; color: var(--text-2); overflow-wrap: anywhere; }
.kv dd .mono, .kv dd code { font-family: var(--font-mono); font-size: 14px; color: var(--text); }
@media (min-width: 480px) { .kv > div { grid-template-columns: minmax(120px, 36%) 1fr; } }


/* =====================================================================================================================
   9. SEGMENTED CONTROL AND STEPS
   ===================================================================================================================== */
/* Segmented control (radiogroup): the page script sets --idx (0-based) to move the thumb, --count for the number of
   options, aria-checked and the roving tabindex. */
.segmented {
  --idx: 0;
  position: relative; display: inline-grid; grid-auto-flow: column; grid-auto-columns: 1fr; padding: 3px;
  border-radius: 12px; background: var(--seg-bg); box-shadow: inset 0 0 0 1px var(--card-edge); isolation: isolate;
}
.segmented::before {
  content: ""; position: absolute; z-index: -1; top: 3px; bottom: 3px; left: 3px;
  width: calc((100% - 6px) / var(--count, 3)); border-radius: 9px; background: var(--seg-active);
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.08), 0 2px 8px rgb(60 42 24 / 0.08);
  transform: translateX(calc(var(--idx) * 100%)); transition: transform var(--dur-md) var(--ease);
}
.segmented [role="radio"] {
  position: relative; height: 34px; padding: 0 14px; border: 0; border-radius: 9px; background: transparent;
  color: var(--text-2); font-size: 14px; font-weight: 500; white-space: nowrap; transition: color var(--dur-sm) var(--ease);
}
.segmented [role="radio"]:hover { color: var(--text); }
.segmented [role="radio"][aria-checked="true"] { color: var(--text); font-weight: 600; }
@media (min-width: 400px) { .segmented [role="radio"] { padding: 0 18px; } }

/* Steps: a vertical, numbered list (download.html: the four steps to a first chat). Numbered circles on a dashed
   rail; an optional highlighted step (.step--now) in wax with its words in a raised card, which then carries
   aria-current="step". The  gives the order to screen readers; the numbers in the circles are aria-hidden. */
.steps { display: grid; padding-top: var(--s-2); }
.step { position: relative; display: grid; grid-template-columns: 32px minmax(0, 1fr); column-gap: var(--s-5); padding-bottom: var(--s-6); }
.step:last-child { padding-bottom: 0; }
.step::before { /* the rail to the next step */
  content: ""; position: absolute; left: 15px; top: 40px; bottom: 8px; border-left: 2px dashed var(--outline-soft);
}
.step:last-child::before { display: none; }
.step__dot {
  position: relative; z-index: 1; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%;
  background: var(--bg); box-shadow: inset 0 0 0 2px var(--outline-soft); color: var(--text-2);
  font-size: 13px; line-height: 1; font-weight: 600; font-variant-numeric: tabular-nums;
}
.step--now .step__dot {
  background: var(--wax-gradient); color: #FFFFFF;
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--seal) 16%, transparent), 0 2px 6px rgb(94 29 16 / 0.3), inset 0 1px 0 rgb(255 255 255 / 0.22);
}
.step__body { min-width: 0; padding-top: 4px; }
.step--now .step__body {
  margin: -12px 0 0 -12px; padding: 16px 20px 18px 16px; border-radius: var(--r-card);
  background: var(--surface); box-shadow: 0 0 0 1px var(--card-edge), var(--shadow-2);
}
.step__head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3); }
.step__title { font-family: var(--font-ui); font-size: 17px; line-height: 24px; font-weight: 600; letter-spacing: normal; color: var(--text); }
.step__text { margin-top: 2px; color: var(--text-2); }


/* =====================================================================================================================
   10. FIELDS
   ===================================================================================================================== */
.field { display: grid; gap: var(--s-2); }
.field__label { font-size: 15px; line-height: 20px; font-weight: 600; white-space: nowrap; }
.input {
  display: flex; align-items: center; min-height: 52px; padding: 0 var(--s-4); border-radius: var(--r-input);
  background: var(--input-bg); box-shadow: inset 0 0 0 1px var(--input-border); transition: box-shadow var(--dur-sm) var(--ease);
}
.input:focus-within { box-shadow: inset 0 0 0 2px var(--input-focus); }
.input input, .input textarea {
  flex: 1; min-width: 0; height: 50px; border: 0; padding: 0; background: transparent; color: var(--text); font-size: 17px; outline: none;
}
.input input::placeholder, .input textarea::placeholder { color: var(--text-3); opacity: 1; }
.input__prefix { margin-right: 2px; color: var(--text-3); font-size: 17px; font-weight: 500; }
.field__help { font-size: 14px; line-height: 20px; color: var(--text-2); }
.field__msg { display: flex; gap: 8px; align-items: flex-start; font-size: 14px; line-height: 20px; color: var(--text-2); }
.field__msg .i { width: 18px; height: 18px; margin-top: 1px; }
.field.is-error .input { box-shadow: inset 0 0 0 2px var(--error); }
.field.is-error .field__msg { color: var(--error); }
.field.is-valid .field__msg .i { color: var(--verified); }
.field.is-hint .field__msg .i { color: var(--seal); }


/* =====================================================================================================================
   11. TABLE AND ACCORDION
   ===================================================================================================================== */
.table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 15px; line-height: 22px; }
.table th { text-align: left; font-size: 13px; line-height: 18px; font-weight: 600; color: var(--text-2); padding: 12px 16px; border-bottom: 1px solid var(--divider); white-space: nowrap; }
.table td { padding: 16px; vertical-align: top; border-bottom: 1px solid var(--divider); }
.table tr:last-child td { border-bottom: 0; }
@media (max-width: 899px) {
  .table--cards, .table--cards tbody, .table--cards tr, .table--cards td { display: block; }
  .table--cards thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .table--cards tr { padding: var(--s-5); margin-bottom: var(--s-3); border-radius: var(--r-card); background: var(--surface); box-shadow: 0 0 0 1px var(--card-edge), var(--shadow-1); }
  .table--cards td { padding: 6px 0; border: 0; }
  .table--cards td[data-label]::before { content: attr(data-label); display: block; font-size: 13px; line-height: 18px; font-weight: 600; color: var(--text-2); }
}

.qa { border-bottom: 1px solid var(--divider); }
/* 6 px of room on each side (cancelled by the negative margin) keeps the focus ring off the question and the chevron */
.qa > summary { list-style: none; display: flex; align-items: center; gap: var(--s-4); padding: var(--s-5) 6px; margin-inline: -6px; cursor: pointer; border-radius: 8px; }
.qa > summary::-webkit-details-marker { display: none; }
.qa__q { flex: 1; font-size: 18px; line-height: 26px; }
.qa__chev { width: 20px; height: 20px; color: var(--text-2); transition: transform var(--dur-md) var(--ease); }
.qa[open] .qa__chev { transform: rotate(180deg); }
.qa__a { padding: 0 0 var(--s-6); color: var(--text-2); }
.qa__a > * + * { margin-top: var(--s-3); }


/* =====================================================================================================================
   12. MARKS, IMAGES, MOTION HELPERS
   ===================================================================================================================== */
.mark { flex: none; width: var(--mark, 44px); height: var(--mark, 44px); }
.mark--28 { --mark: 28px; } .mark--44 { --mark: 44px; } .mark--64 { --mark: 64px; } .mark--96 { --mark: 96px; } .mark--128 { --mark: 128px; } .mark--160 { --mark: 160px; }

.theme-img--dark { display: none; }
:root[data-theme="dark"] .theme-img--light { display: none; }
:root[data-theme="dark"] .theme-img--dark { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-img--light { display: none; }
  :root:not([data-theme="light"]) .theme-img--dark { display: block; }
}

/* Reveal on scroll (only once JS is on and IntersectionObserver exists; site.js adds .reveal-ready) */
.reveal-ready [data-reveal]:not(.is-in) { opacity: 0; transform: translateY(16px); }
.reveal-ready [data-reveal] { transition: opacity 600ms var(--ease-out), transform 700ms var(--ease-out); transition-delay: var(--reveal-delay, 0ms); }

/* Highlight a #target row or block */
.hl-target:target, .hl-target.is-flash { animation: mm-highlight 2s var(--ease) 1; }
@keyframes mm-highlight { 0%, 30% { background-color: var(--highlight); } 100% { background-color: transparent; } }


/* =====================================================================================================================
   12b. APP SURFACES (avatars and chat bubbles, as in the app, for any preview of a conversation on a page)
   MT (--sm 30, --xs 20) · Name…9:30 AM
   ===================================================================================================================== */
.avatar {
  --av: 40px; --avc: var(--avatar-5);
  position: relative; display: inline-grid; place-items: center; flex: none; width: var(--av); height: var(--av); border-radius: 50%;
  background: linear-gradient(170deg, color-mix(in srgb, var(--avc) 80%, #FFFFFF) 0%, var(--avc) 78%);
  color: var(--on-avatar); font-size: calc(var(--av) * 0.38); line-height: 1; font-weight: 600; letter-spacing: 0.01em; user-select: none;
}
.avatar[data-c="1"] { --avc: var(--avatar-1); } .avatar[data-c="2"] { --avc: var(--avatar-2); } .avatar[data-c="3"] { --avc: var(--avatar-3); }
.avatar[data-c="4"] { --avc: var(--avatar-4); } .avatar[data-c="5"] { --avc: var(--avatar-5); } .avatar[data-c="6"] { --avc: var(--avatar-6); }
.avatar[data-c="7"] { --avc: var(--avatar-7); } .avatar[data-c="8"] { --avc: var(--avatar-8); }
.avatar--sm { --av: 30px; }
.avatar--xs { --av: 20px; font-size: 8px; box-shadow: 0 0 0 2px var(--avatar-ring, var(--bubble-in)); }
.avatar--group .i { width: 22px; height: 22px; }

.bubble {
  position: relative; display: block; max-width: min(78%, 360px); padding: 7px 12px 8px; border-radius: var(--r-bubble);
  background: var(--bubble-in); color: var(--bubble-in-text); font-size: 15px; line-height: 21px; overflow-wrap: anywhere;
}
.bubble--out { background: var(--bubble-out); color: var(--bubble-out-text); }
/* No tail: the corner on the photo's side is the app's small one (0.9.19, the VIP square's corner). */
.msg--in .bubble { border-bottom-left-radius: 7.8px; }
.msg--out .bubble { border-bottom-right-radius: 7.8px; }
.bubble__sender { display: block; font-size: 13px; line-height: 18px; font-weight: 600; color: var(--sc, var(--sender-1)); margin-bottom: 1px; }
.bubble__text { white-space: pre-wrap; }
.bubble__meta {
  float: right; display: inline-flex; align-items: center; gap: 3px; margin: 7px -2px -3px 12px;
  font-size: 12px; line-height: 16px; color: var(--bubble-in-meta); white-space: nowrap;
}
.bubble--out .bubble__meta { color: var(--bubble-out-meta); }
.bubble__meta .ticks { width: 15px; height: 15px; color: var(--tick-read); }
.bubble::after { content: ""; display: block; clear: both; }



/* =====================================================================================================================
   13. FOOTER
   ===================================================================================================================== */
/* Compact and quiet, in three parts:
   - the seal and the name, then one line under them (the founder's choice: "Free, open source, and built without
     backdoors.", 15 px, text-2, on one line from 375 px; on narrower phones it breaks into two balanced lines); on the
     left from 1024 px, on top below;
   - the links, in three small columns under quiet headings (Inter 600 13 px, text color): "Explore" (Security, How it
     works, FAQ, Download), "Transparency" (What Murmur can see, Open source and audits, Report a flaw) and "Legal"
     (Privacy, Terms, Acceptable use, Child safety, Delete your account, Law enforcement). Each link has the name of
     the page or article it opens; the one to the current page is in the text color (aria-current, set by sync.cjs).
     From 1024 px the columns sit on the right of the seal, in both languages;
     from 600 to 1023 px they share one row under it; on phones Explore and Transparency sit side by side, and Legal
     takes the whole second row, its six links in two columns that line up with the two above (subgrid);
   - a hairline, then one quiet line (13 px, text-3): the copyright and the company that makes Murmur, Murmur Labs
     LLC, its name a link to its own site (text-2, underlined on hover). No year, no date.
   No address, no icon. Every link stays on one line (nowrap) and has a row of its own: 40 px tall below
   768 px (comfortable for a thumb), 30 px from 768 px. Each link keeps 6 px of room on its sides (cancelled by a
   negative margin, so its words line up with the heading): the focus ring stays off the letters. Below 360 px, the
   columns go under each other. Side by side with the seal, the blurb needs about 340 px: keep each Legal label short
   (about 140 px at most at 15 px), or 1024 px runs out of room. The French pages have the French footer
   (footer.fr.html), whose links all lead to French pages. */
.site-footer { padding: var(--s-10) 0 var(--s-8); border-top: 1px solid var(--divider); background: var(--bg); font-size: 15px; line-height: 22px; }
@media (min-width: 768px) { .site-footer { padding: var(--s-12) 0 var(--s-10); } }
.site-footer__main { display: grid; gap: var(--s-7); }
.site-footer__brand { justify-self: start; }
.site-footer__blurb { margin-top: var(--s-4); font-size: 15px; line-height: 23px; color: var(--text-2); }
@media (min-width: 375px) { .site-footer__blurb { white-space: nowrap; } }
/* The French line (« Gratuit, chiffrement à code ouvert, sans porte dérobée. ») needs about 400 px: on two lines below
   440 px, and from 1024 to 1279 px, where the columns beside it leave it less */
@media (max-width: 439px), (min-width: 1024px) and (max-width: 1279px) { :root[lang^="fr"] .site-footer__blurb { white-space: normal; } }
.site-footer__nav { display: flex; flex-wrap: wrap; gap: var(--s-6) var(--s-12); }
@media (min-width: 768px) { .site-footer__nav { column-gap: var(--s-16); } }
@media (min-width: 360px) and (max-width: 599px) {
  .site-footer__nav { display: grid; grid-template-columns: repeat(2, max-content); gap: var(--s-6) var(--s-10); }
  :root[lang^="fr"] .site-footer__nav { column-gap: var(--s-6); }   /* longer French labels */
  .site-footer__col:last-child { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; }
  .site-footer__col:last-child > .site-footer__title { grid-column: 1 / -1; }
  .site-footer__col:last-child > .site-footer__links {
    grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; grid-template-rows: repeat(3, auto); grid-auto-flow: column;
  }
}
@media (min-width: 360px) and (max-width: 374px) {   /* French: the six Legal links keep their own two columns */
  :root[lang^="fr"] .site-footer__col:last-child > .site-footer__links { grid-template-columns: repeat(2, max-content); column-gap: var(--s-6); }
}
@media (min-width: 600px) and (max-width: 767px) { .site-footer__nav { column-gap: var(--s-10); } }
@media (min-width: 1024px) {
  .site-footer__main { grid-template-columns: minmax(0, 1fr) auto; align-items: start; }
  .site-footer__brand { margin-top: -9px; } /* 5 px higher than its box: the name sits on the line of the headings */
  .site-footer__nav { column-gap: var(--s-12); }
}
@media (min-width: 1280px) { .site-footer__nav { column-gap: var(--s-20); } }
.site-footer__title {
  margin-bottom: var(--s-1); font-family: var(--font-ui); font-variation-settings: normal; font-size: 13px; line-height: 18px;
  font-weight: 600; letter-spacing: 0; color: var(--text);
}
.site-footer__links > li { display: flex; }
.site-footer__links a {
  padding: 9px 6px; margin-inline: -6px; border-radius: var(--r-sm);
  color: var(--text-2); text-decoration: none; white-space: nowrap; transition: color var(--dur-sm) var(--ease);
}
@media (min-width: 768px) { .site-footer__links a { padding-block: 4px; } }
.site-footer__links a:hover { color: var(--text); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.site-footer__links a:focus-visible { outline-offset: 0; }
.site-footer__links a[aria-current="page"] { color: var(--text); }
.site-footer__legal {
  margin-top: var(--s-8); padding-top: var(--s-5); border-top: 1px solid var(--divider);
  font-size: 13px; line-height: 18px; color: var(--text-3);
}
@media (min-width: 768px) { .site-footer__legal { margin-top: var(--s-10); } }
.site-footer__legal a { color: var(--text-2); text-decoration: none; white-space: nowrap; border-radius: 4px; transition: color var(--dur-sm) var(--ease); }
.site-footer__legal a:hover { color: var(--text); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }


/* =====================================================================================================================
   14. REDUCED MOTION AND PRINT
   ===================================================================================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
  .reveal-ready [data-reveal]:not(.is-in) { transform: none; }
  .reveal-ready [data-reveal] { transition: opacity var(--dur-sm) linear; transition-delay: 0ms; }
  .btn:active:not([aria-disabled="true"]) { transform: none; }
  .segmented::before { transition: none; }
  /* The phone menu shows and hides at once (no unfold, no fold, no X turning), the bar with it */
  .site-header { transition: box-shadow var(--dur-md) var(--ease); }
  .menu-panel, .menu-btn .i, .menu-row, .menu-link, .menu-dock::before { transition: none; }
  .hl-target:target, .hl-target.is-flash { animation: none; background-color: var(--highlight); transition: background-color 2s linear; }
}

@media print {
  .site-header, .skip-link, .menu-panel { display: none !important; }
  body { background: #fff; color: #000; }
  .section { padding-block: 24px; }
}

/* Progressive enhancement helpers: .js-only shows only when JavaScript runs, .no-js-only only when it does not. */
html:not(.js) .js-only { display: none !important; }
html.js .no-js-only { display: none !important; }
/* Without JavaScript the icon sprite is not injected: drop the empty icon boxes, keep "Get Murmur" in the header. */
html:not(.js) svg.i { display: none !important; }
html:not(.js) .site-header .site-header__cta { display: inline-flex; }

Install Murmur.

Question