/**
 * @file site.css
 * @brief The whole stylesheet of the public website (stackeo.ai), light only (DIR-0053), self contained so the built
 *        folder deploys as is (no link to ../auth.css: production cannot reach the prototypes folder).
 * @remarks Colour values restate the light tokens of prototypes/auth.css (validated sign in recipe, D-0029) and the
 *          brand direction of D-0020 (smoke white, obsidian, the cube's teal). Type is Satoshi, self hosted under the
 *          ITF FFL (branding/fonts/satoshi/README.md). Motion follows the study of README.md section 1: expo out
 *          (.16,1,.3,1) for things that arrive, Harvey's in out (.7,0,.3,1) for crossfades, linear only for progress.
 *          Rules that keep the page stable: only `transform`, `opacity` and `clip-path` are animated, nothing is
 *          hidden unless script runs and motion is allowed, and every animation has a reduced motion branch.
 *          No inline style attribute exists in the HTML (the CSP forbids them), so staggers use :nth-child.
 */

@font-face {
  font-family: "Satoshi";
  src: url("/assets/fonts/Satoshi-Variable.woff2") format("woff2");
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: light;
  --bg: #fafaf9;
  --surface: #ffffff;
  --surface-2: #f3f3f1;
  --text: #121212;
  --muted: #5b605f;
  --hair: rgb(18 18 18 / 0.08);
  --hair-strong: rgb(18 18 18 / 0.16);
  --edge: #737877;
  --ink: #121212;
  --on-ink: #ffffff;
  /* Teal of the logo (D-0105): 9.21:1 on white; the soft tint is the same hue at about 10 %. */
  --accent: #1d4b53;
  --accent-soft: #e6eef0;
  --obsidian: #141615;
  --on-dark: #f4f4f2;
  --on-dark-muted: #b9bebc;
  --glass: rgb(250 250 249 / 0.78);
  --shadow-1: 0 1px 2px rgb(18 18 18 / 0.05);
  --shadow-2: 0 1px 2px rgb(18 18 18 / 0.05), 0 18px 48px rgb(18 18 18 / 0.08);
  --shadow-menu: 0 1px 2px rgb(18 18 18 / 0.06), 0 12px 32px rgb(18 18 18 / 0.12);
  --radius: 16px;
  --radius-s: 10px;
  --gutter: clamp(16px, 4vw, 56px);
  --max: 1280px;
  --max-wide: 1376px;
  --section: clamp(88px, 10vw, 152px);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.7, 0, 0.3, 1);
  --ease-soft: cubic-bezier(0.3, 0.3, 0.3, 1);
  --t-hover: 180ms;
  --t-menu: 360ms;
  --t-fade: 500ms;
  --t-reveal: 300ms;
  --ease-reveal: cubic-bezier(0.2, 0, 0, 1);
  --f-display: clamp(2.6rem, 1.45rem + 4.1vw, 4.75rem);
  --f-h2: clamp(2rem, 1.35rem + 2.2vw, 3.25rem);
  --f-h3: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem);
  --f-lead: clamp(1.0625rem, 1rem + 0.35vw, 1.3125rem);
  --header-h: 68px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 16px); }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: "Satoshi", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 1.0625rem;
  line-height: 1.6;
  font-weight: 420;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img, svg, picture { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, h4 { margin: 0; font-weight: 540; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }
::selection { background: var(--accent-soft); }

.skip {
  position: absolute; left: 12px; top: -64px; z-index: 100;
  background: var(--ink); color: var(--on-ink); padding: 10px 16px; border-radius: 999px; text-decoration: none;
}
.skip:focus { top: 12px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.wrap { width: min(100% - 2 * var(--gutter), var(--max)); margin-inline: auto; }
.wrap-wide { width: min(100% - 2 * var(--gutter), var(--max-wide)); margin-inline: auto; }
.section { padding-block: var(--section) 0; }
.section:last-of-type { padding-bottom: var(--section); }

/* ---------- Type ---------- */
.display { font-size: var(--f-display); line-height: 1.02; letter-spacing: -0.038em; font-weight: 540; }
.h2 { font-size: var(--f-h2); line-height: 1.06; letter-spacing: -0.032em; }
.h3 { font-size: var(--f-h3); line-height: 1.2; letter-spacing: -0.015em; }
.lead { font-size: var(--f-lead); line-height: 1.5; color: var(--muted); max-width: 40rem; }
.eyebrow { font-size: 0.875rem; font-weight: 560; color: var(--muted); letter-spacing: 0; margin-bottom: 18px; }
.eyebrow a { text-decoration: none; }
.eyebrow a:hover { text-decoration: underline; }
.two-tone .soft { color: var(--muted); }
.small { font-size: 0.875rem; color: var(--muted); }
.link {
  display: inline-flex; align-items: center; gap: 6px; font-weight: 560; text-decoration: none;
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
  transition: background-size var(--t-menu) var(--ease-out);
  padding-bottom: 2px;
}
.link:hover, .link:focus-visible { background-size: 100% 1px; }
.link .arr { transition: transform var(--t-menu) var(--ease-out); }
.link:hover .arr, .link:focus-visible .arr { transform: translateX(3px); }
.u { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }

/* ---------- Buttons ---------- */
.btn {
  --h: 46px;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: var(--h); padding: 0 8px 0 20px; border-radius: 999px;
  font-weight: 560; font-size: 0.9875rem; text-decoration: none; white-space: nowrap;
  border: 1px solid transparent; cursor: pointer;
  transition: background-color var(--t-hover) var(--ease-soft), border-color var(--t-hover) var(--ease-soft), color var(--t-hover) var(--ease-soft);
}
.btn-ink { background: var(--ink); color: var(--on-ink); }
.btn-ink:hover { background: #2a2a2a; }
.btn-line { background: var(--surface); border-color: var(--hair-strong); color: var(--text); padding: 0 20px; }
.btn-line:hover { border-color: var(--edge); }
.btn-light { background: var(--on-dark); color: var(--obsidian); }
.btn-light:hover { background: #ffffff; }
.btn-s { --h: 38px; font-size: 0.9375rem; padding: 0 6px 0 16px; }
.chip {
  position: relative; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 999px; overflow: hidden;
  background: rgb(255 255 255 / 0.14);
}
.btn-light .chip { background: rgb(18 18 18 / 0.08); }
.btn-s .chip { width: 26px; height: 26px; }
.chip svg { width: 14px; height: 14px; transition: transform var(--t-menu) var(--ease-out); }
.chip svg + svg { position: absolute; transform: translateX(-160%); }
.btn:hover .chip svg:first-child, .btn:focus-visible .chip svg:first-child { transform: translateX(160%); }
.btn:hover .chip svg + svg, .btn:focus-visible .chip svg + svg { transform: translateX(0); }

/* ---------- Header ---------- */
.header {
  position: fixed; inset: 0 0 auto 0; z-index: 50; height: var(--header-h);
  transition: transform 640ms var(--ease-out);
}
.header::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--glass); backdrop-filter: blur(16px) saturate(1.35); -webkit-backdrop-filter: blur(16px) saturate(1.35);
  border-bottom: 1px solid transparent; transition: border-color var(--t-menu) var(--ease-soft);
}
.header.is-scrolled::before { border-bottom-color: var(--hair); }
.header.is-away { transform: translateY(-100%); }
.header-in { height: 100%; display: flex; align-items: center; gap: 28px; }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font-weight: 600; font-size: 1.1875rem; letter-spacing: -0.02em; }
.brand img { width: 26px; height: 26px; }
.nav { display: flex; align-items: center; gap: 4px; }
.nav > li { list-style: none; position: relative; }
.nav-link {
  display: inline-flex; align-items: center; gap: 4px; height: 36px; padding: 0 12px; border-radius: 999px;
  border: 0; background: none; cursor: pointer; text-decoration: none; font-size: 0.9375rem; font-weight: 500; color: var(--text);
  transition: background-color var(--t-hover) var(--ease-soft);
}
.nav-link:hover, .nav-link[aria-expanded="true"] { background: rgb(18 18 18 / 0.05); }
.nav-link[aria-current="page"] { font-weight: 620; }
.nav-link .chev { width: 12px; height: 12px; transition: transform var(--t-menu) var(--ease-out); }
.nav-link[aria-expanded="true"] .chev { transform: rotate(180deg); }
.header-end { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.lang {
  display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 12px 0 8px; border-radius: 999px;
  text-decoration: none; font-size: 0.875rem; font-weight: 560; border: 1px solid var(--hair-strong); background: var(--surface);
  transition: border-color var(--t-hover) var(--ease-soft);
}
.lang:hover { border-color: var(--edge); }
.flag { width: 18px; height: 18px; border-radius: 999px; overflow: hidden; flex: none; box-shadow: 0 0 0 1px rgb(18 18 18 / 0.1); }
.signin { font-size: 0.9375rem; font-weight: 520; text-decoration: none; padding: 0 10px; height: 36px; display: inline-flex; align-items: center; border-radius: 999px; }
.signin:hover { background: rgb(18 18 18 / 0.05); }
.header .menu-btn { display: none; }

/* Dropdown: opaque (DIR-0046), opened on click or Enter, never on hover (D-0033). */
.drop {
  position: absolute; top: calc(100% + 10px); left: -8px; min-width: 300px; padding: 8px;
  background: var(--surface); border: 1px solid var(--hair); border-radius: 14px; box-shadow: var(--shadow-menu);
}
.drop[hidden] { display: none; }
.drop a { display: grid; grid-template-columns: 28px 1fr; gap: 2px 12px; padding: 10px 12px; border-radius: 10px; text-decoration: none; }
.drop a:hover, .drop a:focus-visible { background: var(--surface-2); }
.drop .ico { grid-row: span 2; width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; background: var(--surface-2); }
.drop .ico svg { width: 16px; height: 16px; }
.drop b { font-weight: 560; font-size: 0.9375rem; }
.drop span:not(.ico) { font-size: 0.8125rem; color: var(--muted); line-height: 1.4; }

/* Phone sheet (a native dialog: focus trap and Escape come with it). */
.sheet {
  width: 100%; max-width: none; height: 100dvh; max-height: none; margin: 0; padding: 0; border: 0;
  background: var(--bg); color: var(--text);
}
.sheet::backdrop { background: transparent; }
.sheet-in { display: flex; flex-direction: column; height: 100%; padding: 0 var(--gutter) 24px; }
.sheet-top { height: var(--header-h); display: flex; align-items: center; justify-content: space-between; }
.sheet nav ul { list-style: none; display: grid; gap: 2px; margin-top: 16px; }
.sheet nav a { display: block; padding: 10px 0; font-size: 1.75rem; font-weight: 540; letter-spacing: -0.025em; text-decoration: none; }
.sheet nav .sub a { font-size: 1.125rem; font-weight: 480; color: var(--muted); padding: 6px 0 6px 16px; }
.sheet-end { margin-top: auto; display: grid; gap: 10px; }
.sheet-end .btn { width: 100%; }
.icon-btn {
  width: 40px; height: 40px; display: grid; place-items: center; border-radius: 999px; border: 1px solid var(--hair-strong);
  background: var(--surface); cursor: pointer;
}
.icon-btn svg { width: 18px; height: 18px; }

/* ---------- Hero ---------- */
.hero { padding-top: calc(var(--header-h) + clamp(48px, 7vw, 104px)); }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: 48px; align-items: end; }
.hero-side { display: grid; gap: 28px; justify-items: start; padding-bottom: 8px; }
.hero-side .lead { color: #3d4241; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.hero-note { font-size: 0.875rem; color: var(--muted); }
.hero-solo { max-width: 52rem; display: grid; gap: 24px; justify-items: start; }

/* The product shown over a photograph, cropped at the bottom (study: Harvey's hero and solution panels). */
.stage {
  position: relative; margin-top: clamp(40px, 6vw, 72px); border-radius: var(--radius); overflow: hidden;
  background: #dfe2e0; isolation: isolate;
}
.stage-photo { position: absolute; inset: 0; z-index: -1; }
.stage-photo picture { height: 100%; }
.stage-photo img { width: 100%; height: 100%; object-fit: cover; }
.stage-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgb(20 22 21 / 0.18), rgb(20 22 21 / 0.04)); }
/* ---------- Section heads ---------- */
.head { display: grid; gap: 18px; max-width: 46rem; }
.head-center { margin-inline: auto; text-align: center; justify-items: center; }
.head-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr); gap: 48px; align-items: end; max-width: none; }

/* ---------- Two panels (accounting and law) ---------- */
.panels { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: clamp(40px, 5vw, 64px); }
.panel {
  position: relative; border-radius: var(--radius); overflow: hidden; isolation: isolate; color: var(--on-dark);
  display: flex; flex-direction: column; min-height: 640px; background: var(--obsidian);
}
.panel-photo { position: absolute; inset: 0; z-index: -1; }
.panel-photo img { width: 100%; height: 100%; object-fit: cover; }

.panel-text { padding: clamp(24px, 3.4vw, 40px); display: grid; gap: 14px; justify-items: start; max-width: 32rem; }
.panel-text p { color: #dfe3e1; }
.panel-shot { margin-top: auto; padding-left: clamp(24px, 3.4vw, 40px); }
.panel .stage-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgb(14 16 15 / 0.92) 0%, rgb(14 16 15 / 0.8) 42%, rgb(14 16 15 / 0.5) 100%); }
.panel .btn { margin-top: 6px; }

/* ---------- Tour (accordion with a progress line, study: Harvey's 7.5 s) ---------- */
.tour { display: grid; grid-template-columns: minmax(0, 0.42fr) minmax(0, 0.58fr); gap: clamp(28px, 4vw, 64px); margin-top: clamp(40px, 5vw, 64px); align-items: start; }
.steps { display: grid; border-top: 1px solid var(--hair-strong); }
.step-btn {
  position: relative; width: 100%; text-align: left; background: none; border: 0; border-bottom: 1px solid var(--hair-strong); cursor: pointer;
  padding: 20px 0; display: flex; align-items: baseline; gap: 14px; font-size: var(--f-h3); font-weight: 540; letter-spacing: -0.015em; color: var(--muted);
  transition: color var(--t-hover) var(--ease-soft);
}
.step-btn .n { font-size: 0.875rem; font-variant-numeric: tabular-nums; color: var(--muted); font-weight: 560; }
.step-btn:hover, .step-btn.is-active { color: var(--text); }
.captions { display: grid; margin-top: 22px; }
.caption { grid-area: 1 / 1; opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity var(--t-fade) var(--ease-in-out), transform 700ms var(--ease-out), visibility 0s linear var(--t-fade); }
.caption.is-active { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.caption p { color: #3d4241; max-width: 30rem; }
.bar { position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--text); transform-origin: left; transform: scaleX(0); }
.tour-ctrl { display: flex; align-items: center; gap: 12px; margin-top: 20px; }
.tour-ctrl button { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--hair-strong); background: var(--surface); height: 36px; padding: 0 14px; border-radius: 999px; cursor: pointer; font-size: 0.875rem; font-weight: 520; }
.tour-ctrl button svg { width: 14px; height: 14px; }
.views { position: relative; display: grid; border-radius: var(--radius); overflow: hidden; background: #dfe2e0; isolation: isolate; }
.views .stage-photo::after { background: rgb(20 22 21 / 0.12); }
.view { grid-area: 1 / 1; padding: clamp(18px, 3vw, 40px) 0 0 clamp(18px, 3vw, 40px); transition: opacity var(--t-fade) var(--ease-in-out), transform 700ms var(--ease-out), visibility 0s linear var(--t-fade); }
.view:not(.is-active) { opacity: 0; visibility: hidden; transform: scale(0.985); }
.view.is-active { transition-delay: 0s; }

/* ---------- Pillars ---------- */
.pillars { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 3vw, 40px); margin-top: clamp(40px, 5vw, 64px); list-style: none; }
.pillars li { border-top: 1px solid var(--hair-strong); padding-top: 22px; display: grid; gap: 10px; align-content: start; }
.pillars p { color: #3d4241; }
.icon { width: 28px; height: 28px; color: var(--accent); }

/* ---------- Use cases (how firms use it) ---------- */
.uses { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: clamp(32px, 4vw, 56px); }
.use { background: var(--surface); border: 1px solid var(--hair); border-radius: 14px; padding: 22px; display: grid; gap: 8px; align-content: start; transition: border-color var(--t-hover) var(--ease-soft), box-shadow var(--t-menu) var(--ease-out); }
.use:hover { border-color: var(--hair-strong); box-shadow: var(--shadow-2); }
.use h3 { font-size: 1.0625rem; font-weight: 600; letter-spacing: -0.01em; }
.use p { color: var(--muted); font-size: 0.9375rem; }
.use .tag { font-size: 0.75rem; font-weight: 600; color: var(--accent); }

/* ---------- Feature rows (product page) ---------- */
.feature { display: grid; grid-template-columns: minmax(0, 0.4fr) minmax(0, 0.6fr); gap: clamp(28px, 4vw, 64px); align-items: center; margin-top: clamp(48px, 6vw, 96px); }
.feature:nth-child(even) { grid-template-columns: minmax(0, 0.6fr) minmax(0, 0.4fr); }
.feature:nth-child(even) .feature-text { order: 2; }
.feature-text { display: grid; gap: 14px; justify-items: start; }
.feature-text p { color: #3d4241; }
.feature-text ul { list-style: none; display: grid; gap: 8px; margin-top: 4px; }
.feature-text li { display: grid; grid-template-columns: 18px 1fr; gap: 10px; font-size: 0.9375rem; color: #3d4241; }
.feature-text li svg { width: 16px; height: 16px; margin-top: 4px; color: var(--accent); }
.feature .views { min-height: 0; }

/* ---------- Security list (study: Harvey's certification rows; ours are facts gated by the register) ---------- */
.trust { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.trust-head { display: grid; gap: 18px; justify-items: start; position: sticky; top: calc(var(--header-h) + 32px); }
.facts { list-style: none; border-top: 1px solid var(--hair-strong); }
.facts li { border-bottom: 1px solid var(--hair-strong); display: grid; grid-template-columns: 40px 1fr; gap: 4px 16px; padding: 20px 0; }
.facts .icon { grid-row: span 2; width: 26px; height: 26px; margin-top: 2px; }
.facts b { font-weight: 600; letter-spacing: -0.01em; }
.facts span { color: var(--muted); font-size: 0.9375rem; }

/* ---------- Data path (security page): the line grows to the step in view ---------- */
.path { list-style: none; position: relative; margin-top: clamp(40px, 5vw, 64px); display: grid; gap: 0; max-width: 52rem; }
.path::before { content: ""; position: absolute; left: 19px; top: 20px; bottom: 20px; width: 1px; background: var(--hair-strong); }
.path-line { position: absolute; left: 19px; top: 20px; bottom: 20px; width: 1px; background: var(--accent); transform-origin: top; transform: scaleY(1); transition: transform 700ms var(--ease-out); }
.path li { position: relative; display: grid; grid-template-columns: 40px 1fr; gap: 20px; padding: 0 0 36px; }
.path .dot { width: 40px; height: 40px; border-radius: 999px; background: var(--surface); border: 1px solid var(--hair-strong); display: grid; place-items: center; font-weight: 600; font-size: 0.875rem; position: relative; z-index: 1; transition: background-color var(--t-fade) var(--ease-soft), color var(--t-fade) var(--ease-soft), border-color var(--t-fade) var(--ease-soft); }
.path li.is-on .dot { background: var(--accent); color: #fff; border-color: var(--accent); }
.path h3 { font-size: 1.1875rem; font-weight: 600; letter-spacing: -0.01em; padding-top: 7px; }
.path p { color: #3d4241; margin-top: 6px; max-width: 40rem; }
.path .where { display: inline-block; margin-top: 10px; font-size: 0.8125rem; font-weight: 560; color: var(--accent); background: var(--accent-soft); border-radius: 999px; padding: 3px 10px; }

/* ---------- FAQ (study: NewGenesis's FAQ motion principles, our own component) ---------- */
.faq { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.faq-groups { display: grid; gap: 36px; }
.faq-group h3 { font-size: 0.875rem; font-weight: 600; color: var(--muted); margin-bottom: 8px; }
.qa { border-bottom: 1px solid var(--hair-strong); }
.qa:first-of-type { border-top: 1px solid var(--hair-strong); }
.qa summary {
  list-style: none; cursor: pointer; display: grid; grid-template-columns: 1fr 28px; gap: 16px; align-items: center;
  padding: 18px 0; font-weight: 560; font-size: 1.0625rem; letter-spacing: -0.01em;
}
.qa summary::-webkit-details-marker { display: none; }
.qa .pm { width: 28px; height: 28px; border-radius: 999px; border: 1px solid var(--hair-strong); display: grid; place-items: center; transition: background-color var(--t-hover) var(--ease-soft), transform var(--t-menu) var(--ease-out); }
.qa .pm svg { width: 12px; height: 12px; }
.qa .pm .v { transform-origin: center; transition: transform var(--t-menu) var(--ease-out); }
.qa[open] .pm { background: var(--ink); color: var(--on-ink); border-color: var(--ink); }
.qa[open] .pm .v { transform: scaleY(0); }
.qa summary:hover .pm { border-color: var(--edge); }
.qa-a { overflow: hidden; }
.qa-a > div { padding: 0 44px 22px 0; color: #3d4241; display: grid; gap: 10px; }

/* ---------- Closing band ---------- */
.closing { position: relative; border-radius: var(--radius); overflow: hidden; isolation: isolate; color: var(--on-dark); background: var(--obsidian); }
.closing .stage-photo::after { background: linear-gradient(90deg, rgb(14 16 15 / 0.9) 0%, rgb(14 16 15 / 0.7) 55%, rgb(14 16 15 / 0.42) 100%); }
.closing-in { padding: clamp(40px, 6vw, 88px) clamp(24px, 5vw, 72px); display: grid; gap: 22px; justify-items: start; max-width: 44rem; }
.closing p { color: #dfe3e1; }

.prose { max-width: 46rem; }
.prose h2 { font-size: 1.75rem; letter-spacing: -0.025em; line-height: 1.15; margin: 56px 0 14px; }
.prose h2:first-child { margin-top: 0; }
.prose h3 { font-size: 1.1875rem; margin: 28px 0 8px; }
.prose p, .prose li { color: #2f3332; }
.prose p + p { margin-top: 14px; }
.prose ul, .prose ol { padding-left: 20px; display: grid; gap: 8px; margin: 12px 0; }
.prose .tw { overflow-x: auto; margin: 16px 0; }
.prose table { width: 100%; border-collapse: collapse; font-size: 0.9375rem; }
.prose th, .prose td { text-align: left; padding: 10px 12px 10px 0; border-bottom: 1px solid var(--hair); vertical-align: top; }
.prose th { font-weight: 600; }
.prose code { font-size: 0.875em; background: var(--surface-2); padding: 1px 6px; border-radius: 6px; }
.prose .note { background: var(--surface-2); border-radius: 12px; padding: 14px 16px; margin-bottom: 24px; }
.posts { list-style: none; display: grid; gap: 0; margin-top: clamp(32px, 4vw, 56px); border-top: 1px solid var(--hair-strong); }
.post { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 32px; padding: 32px 0; border-bottom: 1px solid var(--hair-strong); }
.post time { color: var(--muted); font-size: 0.9375rem; }
.post h2 { font-size: 1.75rem; letter-spacing: -0.025em; line-height: 1.15; margin-bottom: 12px; }
.post .prose p { color: #3d4241; }

/* ---------- Contact ---------- */
.contact { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.expect { list-style: none; display: grid; gap: 18px; margin-top: 32px; }
.expect li { display: grid; grid-template-columns: 32px 1fr; gap: 14px; }
.expect .num { width: 32px; height: 32px; border-radius: 999px; border: 1px solid var(--hair-strong); display: grid; place-items: center; font-size: 0.875rem; font-weight: 600; }
.expect p { color: var(--muted); font-size: 0.9375rem; }
.book { background: var(--surface); border: 1px solid var(--hair); border-radius: var(--radius); padding: clamp(20px, 3vw, 36px); box-shadow: var(--shadow-1); }
/* ---------- Footer ---------- */
.footer { border-top: 1px solid var(--hair); padding: 56px 0 32px; font-size: 0.9375rem; }
.footer-top { display: grid; grid-template-columns: minmax(0, 1.3fr) repeat(3, minmax(0, 0.6fr)); gap: 32px; }
.footer-top p { color: var(--muted); max-width: 22rem; margin-top: 12px; }
.footer h2 { font-size: 0.8125rem; font-weight: 600; color: var(--muted); margin-bottom: 12px; }
.footer ul { list-style: none; display: grid; gap: 8px; }
.footer ul a { text-decoration: none; }
.footer ul a:hover { text-decoration: underline; text-underline-offset: 3px; }
.footer-end { margin-top: 48px; padding-top: 20px; border-top: 1px solid var(--hair); display: flex; flex-wrap: wrap; gap: 16px; justify-content: space-between; color: var(--muted); font-size: 0.8125rem; }

/* ---------- Review aids (never in the published look) ---------- */
.claims-on [data-claim] { outline: 1px dashed #b26b00; outline-offset: 2px; position: relative; }
.claims-on [data-claim]::after { content: attr(data-claim); position: absolute; top: -10px; right: -6px; font: 600 10px/1 ui-monospace, monospace; background: #b26b00; color: #fff; padding: 2px 4px; border-radius: 4px; z-index: 5; }

/* ---------- Motion ----------
   Hero on load: words rise out of masks, then the lead and the actions appear, then the stage settles. CSS only,
   so it runs before any script and never waits for one. Below the fold: [data-reveal] elements are hidden by
   site.js only when they start below the viewport and motion is allowed, then shown once by an observer. */
.w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: 0.08em; margin-bottom: -0.08em; }
.w > span { display: inline-block; }
/* ---------- Responsive ---------- */
@media (max-width: 1080px) {
  .nav, .header-end .signin, .header-end .btn { display: none; }
  .header .menu-btn { display: grid; }
  .hero-grid, .head-split, .trust, .faq, .contact, .tour, .feature { grid-template-columns: minmax(0, 1fr); }
  .feature:nth-child(even) .feature-text { order: 0; }
  .trust-head { position: static; }
  .uses { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .terms { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-top { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .footer-top > :first-child { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  .panels, .uses, .pillars, .terms { grid-template-columns: minmax(0, 1fr); }
  .panel { min-height: 0; }
  .panel-shot { margin-top: 8px; }
  .post { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .footer-top { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lang .code-long { display: none; }
  .qa-a > div { padding-right: 0; }
}

/* Added with the build: tight sections, the example note under a product view. */
.section-tight { padding-top: clamp(24px, 3vw, 48px); }
.section-tight:last-of-type { padding-bottom: var(--section); }
.caption-note { margin-top: 12px; }
.hero-solo .brand { margin-bottom: 8px; }
.btn .flag { width: 18px; height: 18px; }
.terms-h { margin-top: clamp(72px, 8vw, 120px); }
.terms + .actions { margin-top: 32px; }
main > .hero:last-child { padding-bottom: var(--section); }
.other { margin-top: 28px; max-width: 34rem; }
.hero-grid { row-gap: 28px; }
@media (max-width: 760px) { .hero-grid { gap: 24px; } }
.eyebrow-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 18px; }
.eyebrow-row .eyebrow { margin: 0; }
.never { list-style: none; display: grid; gap: 0; margin-top: 32px; border-top: 1px solid var(--hair-strong); max-width: 52rem; }
.never li { border-bottom: 1px solid var(--hair-strong); padding: 16px 0; color: #2f3332; }
.terms-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.terms-cta { margin-top: 40px; }
.mail-cta { margin: 28px 0 14px; }
.contact .book .expect { margin-top: 0; }
.facts-table th { width: 32%; }
@media (max-width: 760px) { .terms-3 { grid-template-columns: minmax(0, 1fr); } .facts-table th { width: auto; } }
/* ---------- Offers and where the AI runs (DIR-0095) ----------
   Three cards of equal height; Max carries the ink button because the onboarding recommends it (D-0049). The country
   is always written beside its flag. One column under 900 px, where three cards would squeeze the place names. */
.offers { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: clamp(32px, 4vw, 48px); }
.offer { display: flex; flex-direction: column; gap: 20px; background: var(--surface); border: 1px solid var(--hair-strong); border-radius: var(--radius); padding: 28px; box-shadow: var(--shadow-1); }
.offer-top p { color: var(--muted); margin-top: 6px; }
.offer-price { display: grid; gap: 2px; padding-block: 16px; border-block: 1px solid var(--hair); }
.offer-price b { font-size: 2rem; font-weight: 600; letter-spacing: -0.02em; line-height: 1.1; }
.offer-usage { display: grid; gap: 2px; padding-block: 16px; border-bottom: 1px solid var(--hair); }
.offer-usage b { font-weight: 600; }
.offer-where { display: grid; gap: 16px; margin: 0; }
.offer-where div { display: grid; gap: 6px; }
.offer-where dt { font-size: 0.8125rem; font-weight: 600; color: var(--muted); }
.offer-where dd { margin: 0; display: grid; gap: 6px; }
.places { display: flex; flex-wrap: wrap; gap: 8px; }
.place { display: inline-flex; align-items: center; gap: 8px; min-height: 32px; padding: 4px 12px 4px 7px; border-radius: 999px; background: var(--surface-2); font-size: 0.9375rem; font-weight: 560; }
.place .flag { width: 18px; height: 18px; }
/* « États-Unis », a thin-lined « ou », « France »: the same divider as the app's sign-in page (DIR-0136). */
.places-or { align-items: center; gap: 8px; }
.places-or .or { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: 0.8125rem; }
.places-or .or::before, .places-or .or::after { content: ""; width: 14px; height: 1px; background: var(--hair-strong); }
.offer-cta { margin-top: auto; padding-top: 4px; }
.offer-cta .btn { width: 100%; justify-content: space-between; }
.offer-rules { display: flex; align-items: center; gap: 10px; margin-top: 24px; color: #2f3332; }
.offer-rules .icon { width: 22px; height: 22px; flex: none; color: var(--accent); }
.offer-note { margin-top: 10px; }
.offers-compact { margin-top: 28px; }
.offer-compact { gap: 14px; padding: 22px; box-shadow: none; }
.offers-compact + .offer-note + p { margin-top: 18px; }
@media (max-width: 900px) { .offers { grid-template-columns: minmax(0, 1fr); } }

/* ------------------------------------------------------------------ Pass 7 motion (DIR-0138, Téo, 2026-11-12)
   Lines: on hover the line enters from the left; when the pointer leaves it exits to the right (the origin flips
   from right to left on hover, so the shrink always travels rightwards). One rule for every underlined link, so a
   link never draws a line wider than its own text (the FAQ « Contact » link used to stretch to its column). */
.link, a.u, .footer ul a, .eyebrow a, .prose a {
  text-decoration: none;
  background: linear-gradient(currentColor, currentColor) 100% 100% / 0 1px no-repeat;
  transition: background-size var(--t-menu) var(--ease-out);
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
a.u, .prose a { background-size: 100% 1px; background-position: 0 100%; }
.link:hover, .link:focus-visible, .footer ul a:hover, .footer ul a:focus-visible, .eyebrow a:hover, .eyebrow a:focus-visible {
  background-position: 0 100%; background-size: 100% 1px; text-decoration: none;
}
/* Links underlined at rest (inside text) redraw their line: it leaves to the right, then comes back from the left. */
@media (prefers-reduced-motion: no-preference) {
  a.u:hover, .prose a:hover { animation: line-swap 520ms var(--ease-out); }
}
@keyframes line-swap {
  0% { background-position: 100% 100%; background-size: 100% 1px; }
  45% { background-position: 100% 100%; background-size: 0 1px; }
  46% { background-position: 0 100%; background-size: 0 1px; }
  100% { background-position: 0 100%; background-size: 100% 1px; }
}
.link { width: fit-content; justify-self: start; align-self: start; }

/* The tour's pause control carries its own progress ring, so the control's line advances with the step. */
.tour-ctrl button .ring { width: 16px; height: 16px; transform: rotate(-90deg); }
.tour-ctrl button .ring circle { fill: none; stroke-width: 1.5; }
.tour-ctrl button .ring .track { stroke: var(--hair-strong); }
.tour-ctrl button .ring .run { stroke: var(--text); stroke-dasharray: 1; stroke-dashoffset: 1; }
.tour.is-auto .tour-ctrl .ring .run { animation: ring 7500ms linear both; }
.tour.is-auto.is-held .tour-ctrl .ring .run { animation-play-state: paused; }
@keyframes ring { to { stroke-dashoffset: 0; } }

/* ------------------------------------------------------------------ Pass 7 components (DIR-0138)
   The label that introduces what is delivered during the founding firms programme; spot drawings in the product's
   pen; cards of surfaces; the connectors band (monograms, never a third party logo); the programme block; photo
   cards (a drawing on a white card over a facade photograph). Only transform and opacity animate. */
.tag-when { display: inline-flex; align-items: center; gap: 8px; width: fit-content; font-size: 0.8125rem; font-weight: 600; line-height: 1.4; color: #1d4b53; background: var(--accent-soft); border-radius: 999px; padding: 4px 12px 4px 10px; }
.tag-when::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 999px; background: var(--accent); }
.eyebrow-row .tag-when { margin: 0; }
.head-split > div:first-child { display: grid; gap: 18px; justify-items: start; }
.head-wide { max-width: 60rem; }

/* Drawings: strokes take the accent; fills and accents come from two custom properties the SVG files read. */
.drawing { color: var(--accent); --draw-fill: var(--accent-soft); --draw-accent: #1d4b53; }
.drawing svg { display: block; width: 100%; height: auto; overflow: visible; }
.drawing [fill^="var(--draw-fill"] { fill: var(--draw-fill); }
.drawing [fill^="var(--draw-accent"] { fill: var(--draw-accent); }
.drawing [stroke^="var(--draw-fill"] { stroke: var(--draw-fill); }
.drawing [stroke^="var(--draw-accent"] { stroke: var(--draw-accent); }
.drawing .draw-move { transform-box: fill-box; transform-origin: 50% 50%; }
@media (prefers-reduced-motion: no-preference) {
  .drawing .draw-move { transition: transform 420ms var(--ease-out); }
  .surface:hover .draw-move, .surface:focus-within .draw-move, .feature:hover .draw-move, .photo-card:hover .draw-move,
  .connect-head:hover .draw-move, .trust-head:hover .draw-move, .programme:hover .draw-move, .head-visual:hover .draw-move {
    transform: translate(3px, -3px) rotate(-4deg);
  }
}

.surfaces { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: clamp(32px, 4vw, 56px); }
.surfaces-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.surface { background: var(--surface); border: 1px solid var(--hair); border-radius: var(--radius); padding: 14px 14px 24px; display: grid; gap: 8px; align-content: start; transition: border-color var(--t-hover) var(--ease-soft), box-shadow var(--t-menu) var(--ease-out); }
.surface:hover { border-color: var(--hair-strong); box-shadow: var(--shadow-2); }
.surface .drawing { background: var(--surface-2); border-radius: 10px; padding: 14px; margin-bottom: 10px; }
.surface .drawing svg { height: 132px; }
.surface h3, .surface p { padding-inline: 8px; }
.surface h3 { font-size: 1.125rem; font-weight: 600; letter-spacing: -0.01em; line-height: 1.3; }
.surface p { color: var(--muted); font-size: 0.9375rem; }

.photo-card { position: relative; border-radius: var(--radius); overflow: hidden; isolation: isolate; background: #dfe2e0; padding: clamp(28px, 5vw, 64px); display: grid; place-items: center; min-height: 320px; }
.photo-card .stage-photo::after { content: ""; position: absolute; inset: 0; background: rgb(20 22 21 / 0.16); }
.photo-card-in { background: var(--surface); border-radius: 14px; box-shadow: var(--shadow-2); padding: clamp(18px, 2.6vw, 32px); width: min(100%, 360px); }
.feature-text > div { display: grid; gap: 14px; justify-items: start; }
.hero-visual { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: 48px; align-items: center; }

.connect { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(32px, 5vw, 72px); align-items: start; background: var(--surface); border: 1px solid var(--hair); border-radius: var(--radius); padding: clamp(24px, 4vw, 56px); }
.connect-head { display: grid; gap: 18px; justify-items: start; }
.connect-head .drawing { width: 168px; }
.cx-tiles { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.cx-tile { border: 1px solid var(--hair); border-radius: 14px; padding: 16px; display: grid; gap: 4px; align-content: start; background: var(--bg); }
.cx-tile .mono { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; font-weight: 620; background: var(--surface); border: 1px solid var(--hair-strong); margin-bottom: 8px; }
.cx-tile .mono-logo img { width: 22px; height: 22px; }
.cx-tile b { font-weight: 600; font-size: 0.9375rem; line-height: 1.3; }
.cx-tile span { font-size: 0.8125rem; color: var(--muted); line-height: 1.4; }
.cx-tile .when { margin-top: 6px; font-weight: 560; }
.cx-tile.is-today { border-color: rgb(29 75 83 / 0.35); background: var(--accent-soft); }
.cx-tile.is-today span { color: #2f3f3d; }
.cx-tile.is-today .when { color: #1d4b53; }
.cx-note { margin-top: 14px; }

.programme { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.programme-text { display: grid; gap: 18px; justify-items: start; }
.checks { list-style: none; display: grid; gap: 8px; }
.checks li { display: grid; grid-template-columns: 18px 1fr; gap: 10px; color: #2f3332; }
.checks svg { width: 16px; height: 16px; margin-top: 5px; color: var(--accent); }

.head-visual { display: grid; grid-template-columns: minmax(0, 1fr) 200px; gap: 32px; align-items: center; max-width: none; }
.head-visual > div { display: grid; gap: 18px; }
.trust-head .drawing { width: 150px; }
.panel .panel-note { color: #c9cfcc; }
.tour-ctrl .small { margin-left: auto; }
.btn-line-dark { background: transparent; color: var(--on-dark); border-color: rgb(244 244 242 / 0.4); padding: 0 20px; }
.btn-line-dark:hover { border-color: var(--on-dark); }
.uses-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* The header carries one more link (Vision) and the longer primary action: the menu button takes over earlier. */
@media (max-width: 1160px) {
  .nav, .header-end .sign-in, .header-end .btn { display: none; }
  .header .menu-btn { display: grid; }
}
@media (max-width: 1080px) {
  .surfaces, .surfaces-4, .uses-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .connect, .programme, .hero-visual { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .cx-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .head-visual { grid-template-columns: minmax(0, 1fr); }
  .head-visual .drawing { width: 160px; }
  .photo-card { min-height: 0; }
}
@media (max-width: 560px) {
  .surfaces, .surfaces-4, .uses-4 { grid-template-columns: minmax(0, 1fr); }
  /* On a phone a card puts its drawing beside the text, so eight surfaces stay one short scroll. */
  .surface { grid-template-columns: 88px minmax(0, 1fr); column-gap: 14px; row-gap: 4px; padding: 12px 14px 16px 12px; }
  .surface .drawing { grid-row: span 2; margin: 0; padding: 8px; align-self: start; }
  .surface .drawing svg { height: 66px; }
  .surface h3, .surface p { padding-inline: 0; }
  .surface h3 { padding-top: 4px; }
}

/* ------------------------------------------------------------------ Pass 8 (DIR-0145, Téo, 2026-11-12)
   No screenshot of the app: Stackeo's drawings on white plates over facade photographs, a drawn notification panel,
   the language chooser of newgenesis.ai rebuilt in our style, the menu glyph, Lucide icons with one moving part each,
   and one motion system (tokens of .claude/skills/stackeo-motion-design section 3). Only transform and opacity
   animate; the canvas of the menu transition is drawn by site.js and never exists under reduced motion. */
:root {
  --ease-out-strong: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in: cubic-bezier(0.5, 0, 0.75, 0);
  --overshoot: cubic-bezier(0.34, 1.3, 0.64, 1);
}

/* ---------- Scenes: the large illustration of a page ---------- */
.scene { position: relative; margin-top: clamp(40px, 6vw, 72px); border-radius: var(--radius); overflow: hidden; isolation: isolate; background: #d9dcda; }
.scene .stage-photo::after { background: linear-gradient(180deg, rgb(20 22 21 / 0.08) 0%, rgb(20 22 21 / 0.3) 100%); }
.scene-in { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); place-items: center; min-height: clamp(440px, 44vw, 640px); padding: clamp(28px, 5vw, 80px) clamp(16px, 5vw, 80px); }
.plate { background: var(--surface); border-radius: 20px; padding: clamp(20px, 3vw, 44px); box-shadow: 0 1px 2px rgb(18 18 18 / 0.06), 0 32px 80px rgb(18 18 18 / 0.24); }
.plate .drawing svg * { vector-effect: non-scaling-stroke; }
.plate .drawing svg { stroke-width: 2; }
.plate-main { grid-area: 1 / 1; width: min(100%, 560px); }
.plate-side { grid-area: 1 / 1; justify-self: end; align-self: end; width: min(30%, 232px); padding: clamp(12px, 1.6vw, 20px); border-radius: 16px; margin: 0 2% 2% 0; }
.has-notifs .scene-in { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: clamp(20px, 3vw, 48px); }
.has-notifs .plate-main { grid-area: auto; justify-self: end; width: min(100%, 520px); }
.notifs { justify-self: start; width: min(100%, 430px); background: var(--surface); border-radius: 20px; padding: 8px; box-shadow: 0 1px 2px rgb(18 18 18 / 0.06), 0 32px 80px rgb(18 18 18 / 0.24); }
.notifs-top { display: flex; align-items: center; gap: 10px; padding: 10px 12px 10px; font-size: 0.9375rem; }
.notifs-top b { font-weight: 600; }
.notifs-top .icon { width: 18px; height: 18px; color: var(--text); }
.notifs-top span { margin-left: auto; font-size: 0.8125rem; font-weight: 600; color: #1d4b53; background: var(--accent-soft); border-radius: 999px; padding: 2px 10px; }
.notifs ul { list-style: none; display: grid; gap: 4px; }
.notif { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 12px; border-radius: 14px; background: var(--bg); }
.notif-mark { width: 36px; height: 36px; margin: 0; border-radius: 10px; display: grid; place-items: center; font-size: 0.8125rem; font-weight: 640; letter-spacing: 0.01em; background: var(--surface); border: 1px solid var(--hair-strong); color: var(--text); }
.notif:nth-child(-n+2) .notif-mark { background: var(--accent-soft); border-color: transparent; color: #1d4b53; }
.notif-body { display: grid; min-width: 0; }
.notif-body b { font-size: 0.875rem; font-weight: 600; line-height: 1.35; }
.notif-body span { font-size: 0.8125rem; color: var(--muted); line-height: 1.4; }
.notif-when { font-size: 0.75rem; color: var(--muted); white-space: nowrap; align-self: start; padding-top: 2px; }
.notifs .logo-attrib { padding: 8px 12px 4px; font-size: 0.75rem; }
.views { background: #d9dcda; }
.view { display: grid; place-items: center; padding: clamp(24px, 4vw, 56px); }
.plate-view { width: min(100%, 440px); }
.panel-shot { padding: 0 clamp(24px, 3.4vw, 40px) clamp(24px, 3.4vw, 40px); }
.plate-panel { width: min(100%, 420px); }

/* ---------- Mail hosts and logos (D-0089) ---------- */
.hosts { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--hair); display: grid; gap: 10px; }
.hosts ul { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; }
.host { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 6px 16px; border: 1px solid var(--hair); border-radius: 999px; background: var(--bg); font-weight: 560; font-size: 0.9375rem; }
.host.has-logo { padding-left: 8px; }
.host-mark { display: grid; place-items: center; }
.mono-logo img, .host-mark img { width: 28px; height: 28px; border-radius: 6px; }
.logo-attrib { font-size: 0.8125rem; }

/* ---------- Language chooser (README section 16.2) ---------- */
.lang { cursor: pointer; color: var(--text); padding: 0 10px 0 8px; gap: 7px; }
.lang .chev { width: 14px; height: 14px; }
.lang-dlg { width: min(400px, 100% - 32px); max-width: none; margin: auto; padding: 0; border: 0; background: transparent; color: var(--text); overflow: visible; }
.lang-dlg::backdrop { background: rgb(20 22 21 / 0.42); }
.lang-box { position: relative; display: grid; gap: 18px; padding: 24px; background: var(--surface); border-radius: 20px; box-shadow: 0 1px 2px rgb(18 18 18 / 0.08), 0 32px 80px rgb(18 18 18 / 0.28); }
.lang-box h2 { text-align: center; font-size: 1.1875rem; font-weight: 600; letter-spacing: -0.01em; line-height: 36px; padding: 0 40px; }
.lang-x { position: absolute; left: 14px; top: 18px; width: 36px; height: 36px; display: grid; place-items: center; border: 0; border-radius: 999px; background: none; cursor: pointer; color: var(--text); }
.lang-x:hover { background: var(--surface-2); }
.lang-x svg { width: 18px; height: 18px; }
.lang-box fieldset { margin: 0; padding: 0; border: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.lang-opt { position: relative; display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 14px 0 12px; border: 1px solid var(--hair-strong); border-radius: 14px; cursor: pointer; font-weight: 560; transition: border-color var(--t-hover) var(--ease-soft), box-shadow var(--t-hover) var(--ease-soft); }
.lang-opt:hover { border-color: var(--edge); }
.lang-opt input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.lang-opt:has(input:checked) { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); }
.lang-opt:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 3px; }
.lang-opt .flag { width: 20px; height: 20px; }
.lang-opt .tick { width: 16px; height: 16px; opacity: 0; transform: scale(0.4); }
.lang-opt:has(input:checked) .tick { opacity: 1; transform: none; }
.lang-ok { width: 100%; justify-content: center; padding: 0 20px; }
.sheet-end .lang { justify-self: start; }

/* ---------- Menu glyph: two lines that shift on hover and cross when open ---------- */
.menu-btn .glyph { width: 22px; height: 22px; overflow: visible; }
.glyph path { transform-box: view-box; transform-origin: 12px 12px; }
.menu-btn[aria-expanded="true"] .g-top, .is-cross .g-top { transform: translateY(3px) rotate(45deg); }
.menu-btn[aria-expanded="true"] .g-bot, .is-cross .g-bot { transform: translateY(-3px) rotate(-45deg); }

/* ---------- Menu transition canvas (site.js draws it on open; absent without WebGL and under reduced motion) ---------- */
.drop, .sheet-in { isolation: isolate; }
.fx { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; opacity: 0; border-radius: inherit; }
.drop { overflow: hidden; }
.sheet-in { position: relative; }
.fx-on .fx { opacity: 1; }
.drop.fx-run, .sheet.fx-run, .sheet.fx-run .sheet-in, .drop.fx-wait, .sheet.fx-wait { background: transparent; }
.drop.fx-wait, .sheet.fx-wait .sheet-in { opacity: 0; }
.drop.fx-on { transition: box-shadow 380ms var(--ease-out-strong), border-color 380ms var(--ease-out-strong); }
.drop.fx-run, .drop.fx-wait { box-shadow: 0 0 0 rgb(18 18 18 / 0); border-color: transparent; }

/* ---------- Motion ---------- */
.w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: 0.08em; margin-bottom: -0.08em; }
.w > span { display: inline-block; }
.tour.is-auto .step-btn.is-active .bar { animation: progress 7500ms linear both; }
.tour.is-auto.is-held .step-btn.is-active .bar { animation-play-state: paused; }
@keyframes progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }

@media (prefers-reduced-motion: no-preference) {
  /* Page load of the hero, about 1 s in all: the words rise out of their masks (40 ms apart), the lead and the
     actions follow, the photo settles from 1.08, then the plates and the notifications arrive (60 ms apart). */
  .hero-anim .w > span { animation: rise 700ms var(--ease-out-strong) both; }
  .hero-anim .w:nth-child(2) > span { animation-delay: 40ms; }
  .hero-anim .w:nth-child(3) > span { animation-delay: 80ms; }
  .hero-anim .w:nth-child(4) > span { animation-delay: 120ms; }
  .hero-anim .w:nth-child(5) > span { animation-delay: 160ms; }
  .hero-anim .w:nth-child(6) > span { animation-delay: 200ms; }
  .hero-anim .w:nth-child(n+7) > span { animation-delay: 240ms; }
  .hero-anim .fade-1 { animation: appear 600ms var(--ease-out-strong) 180ms both; }
  .hero-anim .fade-2 { animation: appear 600ms var(--ease-out-strong) 260ms both; }
  .hero-anim .fade-3 { animation: appear 600ms var(--ease-out-strong) 340ms both; }
  .hero-anim .scene.is-hero .stage-photo img { animation: settle-photo 1400ms var(--ease-out-strong) both; }
  .hero-anim .scene.is-hero .plate-main { animation: lift 800ms var(--ease-out-strong) 320ms both; }
  .hero-anim .scene.is-hero .plate-side { animation: lift 800ms var(--ease-out-strong) 460ms both; }
  .hero-anim .scene.is-hero .notifs { animation: lift 800ms var(--ease-out-strong) 420ms both; }
  .hero-anim .notif { animation: toast 420ms var(--ease-out-strong) both; }
  .hero-anim .notif:nth-child(1) { animation-delay: 560ms; }
  .hero-anim .notif:nth-child(2) { animation-delay: 620ms; }
  .hero-anim .notif:nth-child(3) { animation-delay: 680ms; }
  .hero-anim .notif:nth-child(4) { animation-delay: 740ms; }

  /* Reveals below the fold, once (site.js adds .is-pending only to what starts below the viewport): a 24 px rise
     and a fade, 700 ms, children 60 ms apart and never more than 300 ms in all. No blur: a filter repaints. */
  [data-reveal].is-pending, [data-stagger].is-pending > * { opacity: 0; transform: translateY(24px); }
  [data-reveal].is-shown, [data-stagger].is-shown > * { transition: opacity 700ms var(--ease-out-strong), transform 700ms var(--ease-out-strong); }
  [data-stagger].is-shown > :nth-child(2) { transition-delay: 60ms; }
  [data-stagger].is-shown > :nth-child(3) { transition-delay: 120ms; }
  [data-stagger].is-shown > :nth-child(4) { transition-delay: 180ms; }
  [data-stagger].is-shown > :nth-child(5) { transition-delay: 240ms; }
  [data-stagger].is-shown > :nth-child(n+6) { transition-delay: 300ms; }

  /* Menus: the panel waits invisible (.fx-wait) for the canvas's first frame, then .is-in starts the entrance. With
     WebGL (.fx-on) the surface comes from the canvas and only the links rise behind the front; without it, the CSS
     path below moves the panel itself (220 ms for a menu, 320 ms for the sheet). */
  .drop.is-in { animation: drop-in 220ms var(--ease-out-strong) both; }
  .drop.is-in a { animation: rise-s 360ms var(--ease-out-strong) both; }
  .drop.is-in a:nth-child(2) { animation-delay: 40ms; }
  .drop.is-in a:nth-child(3) { animation-delay: 80ms; }
  .sheet.is-in .sheet-in { animation: sheet-in 320ms var(--ease-out-strong) both; }
  .sheet.is-in nav li { animation: rise-s 520ms var(--ease-out-strong) both; }
  .sheet.is-in nav li:nth-child(2) { animation-delay: 40ms; }
  .sheet.is-in nav li:nth-child(3) { animation-delay: 80ms; }
  .sheet.is-in nav li:nth-child(4) { animation-delay: 120ms; }
  .sheet.is-in nav li:nth-child(5) { animation-delay: 160ms; }
  .sheet.is-in nav li:nth-child(n+6) { animation-delay: 200ms; }
  .drop.fx-on.is-in, .sheet.fx-on.is-in .sheet-in { animation: none; }
  .drop.fx-on.is-in a { animation-delay: 60ms; }
  .drop.fx-on.is-in a:nth-child(2) { animation-delay: 110ms; }
  .drop.fx-on.is-in a:nth-child(3) { animation-delay: 160ms; }
  .sheet.fx-on.is-in nav li { animation-delay: 80ms; }
  .sheet.fx-on.is-in nav li:nth-child(2) { animation-delay: 120ms; }
  .sheet.fx-on.is-in nav li:nth-child(3) { animation-delay: 160ms; }
  .sheet.fx-on.is-in nav li:nth-child(4) { animation-delay: 200ms; }
  .sheet.fx-on.is-in nav li:nth-child(n+5) { animation-delay: 240ms; }
  .sheet.is-closing .sheet-in, .drop.is-closing { animation: fade-out 180ms var(--ease-in) both; }
  .lang-dlg[open] .lang-box { animation: pop 300ms var(--ease-out-strong) both; }
  .lang-dlg[open]::backdrop { animation: fade 300ms var(--ease-out-strong) both; }
  .lang-dlg.is-closing .lang-box { animation: fade-out 180ms var(--ease-in) both; }
  .lang-dlg.is-closing::backdrop { animation: fade-out 180ms var(--ease-in) both; }
  .lang-opt .tick { transition: transform 260ms var(--overshoot), opacity 160ms var(--ease-out-strong); }

  /* Menu glyph: on hover the top line slides right and the bottom one left (both shorten), 300 ms; open, they cross. */
  .glyph path { transition: transform 300ms var(--ease-out-strong); }
  .menu-btn:not([aria-expanded="true"]):not(.is-cross):hover .g-top { transform: translateX(2.8px) scaleX(0.65); }
  .menu-btn:not([aria-expanded="true"]):not(.is-cross):hover .g-bot { transform: translateX(-2.8px) scaleX(0.65); }
  .sheet[open] .is-cross .g-top { animation: cross-top 360ms var(--ease-out-strong) 60ms both; }
  .sheet[open] .is-cross .g-bot { animation: cross-bot 360ms var(--ease-out-strong) 60ms both; }
  .is-cross:hover .glyph { transform: rotate(90deg); }
  .is-cross .glyph { transition: transform 300ms var(--ease-out-strong); }

  /* Images zoom out as they scroll into view, from 1.12 to 1 (scroll driven, compositor only, no script). */
  @supports (animation-timeline: view()) {
    .stage-photo img { animation: zoom-out linear both; animation-timeline: view(); animation-range: entry 0% cover 50%; }
    .hero-anim .scene.is-hero .stage-photo img { animation: settle-photo 1400ms var(--ease-out-strong) both; animation-timeline: auto; }
    .scene:not(.is-hero) .plate, .photo-card-in, .view .plate, .panel-shot .plate { animation: float linear both; animation-timeline: view(); animation-range: entry 0% cover 40%; }
  }

  /* ---------- Icon motions (README section 16.6): one part moves, 150 to 300 ms, never a stroke redraw ---------- */
  .icon .i-a, .icon .i-b { transform-box: fill-box; transform-origin: 50% 50%; transition: transform 240ms var(--ease-out-strong), opacity 240ms var(--ease-out-strong); }
  .i-clock .i-a { transform-box: view-box; transform-origin: 12px 12px; }
  .i-bell .i-a { transform-origin: 50% 0; }
  .ic-host:hover .i-lock .i-a, .ic-host:focus-within .i-lock .i-a { transform: translateY(-2px); }
  .ic-host:hover .i-eye .i-a, .ic-host:focus-within .i-eye .i-a { animation: blink 260ms var(--ease-in-out); }
  .ic-host:hover .i-eye .i-b, .ic-host:focus-within .i-eye .i-b { transform: translateX(1.5px); }
  .ic-host:hover .i-shield .i-a, .ic-host:focus-within .i-shield .i-a { animation: pop-in 280ms var(--overshoot); }
  .ic-host:hover .i-file .i-a, .ic-host:focus-within .i-file .i-a { transform: translateX(1.5px); }
  .ic-host:hover .i-key .i-a, .ic-host:focus-within .i-key .i-a { transform: rotate(-20deg); }
  .ic-host:hover .i-pin .i-a, .ic-host:focus-within .i-pin .i-a { transform: translateY(-2.5px); }
  .ic-host:hover .i-pin .i-b, .ic-host:focus-within .i-pin .i-b { transform: scale(1.3); }
  .ic-host:hover .i-clock .i-a, .ic-host:focus-within .i-clock .i-a { transform: rotate(60deg); }
  .ic-host:hover .i-users .i-a, .ic-host:focus-within .i-users .i-a { transform: translateX(-1px); }
  .ic-host:hover .i-users .i-b, .ic-host:focus-within .i-users .i-b { transform: translateX(1.5px); }
  .ic-host:hover .i-spark .i-a, .ic-host:focus-within .i-spark .i-a { transform: rotate(18deg) scale(1.06); }
  .ic-host:hover .i-spark .i-b, .ic-host:focus-within .i-spark .i-b { transform: scale(1.25); opacity: 0.6; }
  .ic-host:hover .i-plug .i-a, .ic-host:focus-within .i-plug .i-a { transform: translateY(-2px); }
  .ic-host:hover .i-bell .i-a, .ic-host:focus-within .i-bell .i-a { animation: swing 300ms var(--ease-out-strong); }
  .ic-host:hover .i-bell .i-b, .ic-host:focus-within .i-bell .i-b { transform: translateX(1px); }
  .lang .chev { transition: transform 240ms var(--ease-out-strong); }
  .lang:hover .chev, .lang:focus-visible .chev { transform: translateY(2px); }
  .lang-x .icon { transition: transform 240ms var(--ease-out-strong); }
  .lang-x:hover .icon, .lang-x:focus-visible .icon { transform: rotate(90deg); }
  .chip svg { transition-duration: 260ms; }
}
@keyframes rise { from { transform: translateY(105%); } }
@keyframes rise-s { from { opacity: 0; transform: translateY(10px); } }
@keyframes appear { from { opacity: 0; transform: translateY(12px); } }
@keyframes lift { from { opacity: 0; transform: translateY(32px); } }
@keyframes toast { from { opacity: 0; transform: translateY(12px) scale(0.98); } }
@keyframes settle-photo { from { transform: scale(1.08); } to { transform: scale(1); } }
@keyframes zoom-out { from { transform: scale(1.12); } to { transform: scale(1); } }
@keyframes float { from { transform: translateY(32px); } to { transform: none; } }
@keyframes drop-in { from { opacity: 0; transform: translateY(-6px) scale(0.98); } }
@keyframes sheet-in { from { opacity: 0; transform: translateY(-12px); } }
@keyframes fade { from { opacity: 0; } }
@keyframes fade-out { to { opacity: 0; } }
@keyframes pop { from { opacity: 0; transform: scale(0.96); } }
@keyframes cross-top { from { transform: none; } to { transform: translateY(3px) rotate(45deg); } }
@keyframes cross-bot { from { transform: none; } to { transform: translateY(-3px) rotate(-45deg); } }
@keyframes blink { 50% { transform: scaleY(0.12); } }
@keyframes pop-in { 0% { transform: scale(0.6); } 100% { transform: scale(1); } }
@keyframes swing { 25% { transform: rotate(14deg); } 55% { transform: rotate(-10deg); } 80% { transform: rotate(5deg); } }
.drop .ico { color: var(--accent); }
.drop .ico svg { width: 16px; height: 16px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; }
  .view, .caption, .header, .path-line { transition: none !important; }
  .fx { display: none; }
}

@media (max-width: 760px) {
  .scene-in { min-height: 0; padding: 28px 16px; }
  .has-notifs .scene-in { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .has-notifs .plate-main { justify-self: center; width: 88%; }
  .has-notifs .notifs { justify-self: center; width: 100%; margin-top: -36px; position: relative; }
  .plate-side { display: none; }
  .notif { grid-template-columns: 32px minmax(0, 1fr); }
  .notif-mark { width: 32px; height: 32px; }
  .notif-when { grid-column: 2; padding: 0; }
}

/* Law page (DIR-0152): the seven agents use the use-case cards; the law sources reuse the connector tiles. */
.law-cx-h { margin-top: clamp(40px, 5vw, 64px); margin-bottom: 16px; }
.law-cx { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 1080px) { .law-cx { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 560px) { .law-cx { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.use-rule { background: var(--obsidian); border-color: var(--obsidian); color: var(--on-dark); align-content: space-between; }
.use-rule .icon { width: 24px; height: 24px; color: #9fd0cb; }
.use-rule p { color: var(--on-dark); font-size: 0.9375rem; font-weight: 520; }
.use-rule:hover { border-color: var(--obsidian); }
.sheet nav .grp { font-size: 0.875rem; font-weight: 600; color: var(--muted); padding: 16px 0 2px; }
.lang-box fieldset { flex-wrap: nowrap; }
.lang-opt { flex: 1 1 0; justify-content: center; min-width: 0; padding: 0 10px; gap: 8px; }
@media (max-width: 420px) { .lang-box { padding: 20px; } .lang-opt { font-size: 0.9375rem; } }

/**
 * @file 02-loader.css
 * @brief The entrance (loader.py, DIR-0174 point 1): the cube traced (0 to 300 ms), filled (220 to 380 ms), then the
 *        overlay fades (380 to 560 ms). Shown only under `html.ld-on`, set before first paint by the boot script.
 * @remarks pointer-events: none from the first frame, so the entrance never blocks a click; the page paints under it.
 */
.ld { display: none; }
html.ld-on .ld {
  display: grid; place-items: center; position: fixed; inset: 0; z-index: 200; pointer-events: none;
  background: var(--bg); animation: ld-out 180ms var(--ease-soft) 380ms forwards;
}
html.ld-on .ld.ld-dark { background: #0b1416; }
.ld path { fill-opacity: 0; stroke: #3f6970; stroke-width: 1.1; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.ld-dark path { stroke: #86aeb4; }
html.ld-on .ld path { animation: ld-trace 300ms cubic-bezier(0.65, 0, 0.35, 1) forwards, ld-fill 160ms linear 220ms forwards; }
@keyframes ld-trace { to { stroke-dashoffset: 0; } }
@keyframes ld-fill { to { fill-opacity: 1; stroke-opacity: 0; } }
@keyframes ld-out { to { opacity: 0; visibility: hidden; } }
@media (prefers-reduced-motion: reduce) { html.ld-on .ld { display: none; } }

/**
 * @file 05-fonts.css
 * @brief The display face slot (DIR-0159, Téo, 2026-11-12): Sentient (Indian Type Foundry, Fontshare, ITF Free Font
 *        License 2.0) for headings and key text; the body keeps Satoshi.
 * @remarks The font file is not in the repository yet (its download waits for Téo's yes). build_site.py removes the
 *          whole block between the two markers when `branding/fonts/sentient/Sentient-Variable.woff2` is absent, so
 *          the site never requests a missing file and headings stay in Satoshi; once the file is added it ships and
 *          this block applies. Fallback stack: a serif with close proportions (Georgia, then the system serif), so a
 *          slow load swaps without a jump in line count (size-adjust to measure on the real file, « à vérifier »).
 *          No preload: the LCP element of most pages is the hero picture, not a heading.
 */


/**
 * @file 10-media.css
 * @brief Pass 9 (DIR-0153): the generated section images of the home tour and the rich diagrams with their numbered
 *        captions. Concatenated after site.css by build_site.py. Only transform and opacity animate.
 */

/* ---------- Generated images in the tour: full bleed, 16:10, the box reserved by width and height ---------- */
.views-gen { background: #e7e2da; }
.view.has-gen { padding: 0; display: block; }
.view .gen, .view .gen img { display: block; width: 100%; height: 100%; }
.view .gen img { aspect-ratio: 16 / 10; object-fit: cover; }
@media (prefers-reduced-motion: no-preference) {
  .view.has-gen img { transition: transform 1200ms var(--ease-out-strong); transform: scale(1.04); }
  .view.has-gen.is-active img { transform: none; }
}
/* The tour's pause control is hidden under reduced motion (site.js); its display rule must not win over [hidden]. */
.tour-ctrl button[hidden] { display: none; }

/* ---------- Rich diagrams: the SVG, then a numbered key in the page's language (media.figure) ---------- */
.fig { margin: 0; display: grid; gap: clamp(14px, 2vw, 22px); }
.fig-art svg { width: 100%; height: auto; }
.fig-legend { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 20px; }
.fig-legend li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; align-items: start; }
.fig-n {
  width: 22px; height: 22px; border-radius: 999px; display: grid; place-items: center; margin-top: 1px;
  background: #1d4b53; color: #fff; font-size: 0.75rem; font-weight: 650; font-variant-numeric: tabular-nums;
}
.fig-t { font-size: 0.875rem; line-height: 1.4; color: #2f3332; font-weight: 520; }
.fig-hosts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.fig-host {
  display: inline-flex; align-items: center; gap: 6px; min-height: 28px; padding: 2px 10px; border-radius: 999px;
  border: 1px solid var(--hair-strong); background: var(--bg); font-size: 0.8125rem; font-weight: 560; color: var(--text);
}
.fig-host:has(img) { padding-left: 3px; }
.fig-host .host-mark img { width: 22px; height: 22px; border-radius: 5px; }
.fig-names { display: block; margin-top: 4px; font-weight: 450; color: var(--muted); font-size: 0.8125rem; }
.fig .logo-attrib { margin-top: 12px; font-size: 0.75rem; }
.photo-card-in:has(.fig) { width: min(100%, 600px); }
.plate-main:has(.fig) { width: min(100%, 640px); }
.has-notifs .plate-main:has(.fig) { width: min(100%, 560px); }
.plate-panel:has(.fig) { width: min(100%, 560px); }
@media (max-width: 560px) {
  .fig-legend { grid-template-columns: minmax(0, 1fr); gap: 8px; }
}
@media (max-width: 760px) {
  /* On a phone the hero's notifications follow the diagram's key instead of overlapping it. */
  .has-notifs .plate-main:has(.fig) ~ .notifs { margin-top: 14px; }
}

/* ---------- DIR-0154: decorative monograms and the hero's text never sit at reduced contrast ----------
   Monograms are drawn from data-mono; the clip ends wider than the box, so the shadows stay whole.
   Monograms are drawn from data-mono, so they are a picture, not text. The hero's notifications and plates (which
   carry the figure's captions) enter with a clip and a rise instead of a fade: their text is at full contrast from the
   first frame it is visible, whenever a contrast check runs. Final colours: #1d4b53 on #e6eef0 (8.6:1), #121212 on white. */
[data-mono]::before { content: attr(data-mono); }
@media (prefers-reduced-motion: no-preference) {
  .hero-anim .scene.is-hero .plate-main { animation: lift-clip 800ms var(--ease-out-strong) 320ms both; }
  .hero-anim .scene.is-hero .plate-side { animation: lift-clip 800ms var(--ease-out-strong) 460ms both; }
  .hero-anim .scene.is-hero .notifs { animation: lift-clip 800ms var(--ease-out-strong) 420ms both; }
  .hero-anim .notif { animation-name: toast-clip; }
}
@keyframes lift-clip { from { transform: translateY(32px); clip-path: inset(0 0 100% 0 round 20px); } to { transform: none; clip-path: inset(-120px -120px -120px -120px round 20px); } }
@keyframes toast-clip { from { transform: translateY(12px); clip-path: inset(0 0 100% 0 round 14px); } to { transform: none; clip-path: inset(-40px -40px -40px -40px round 14px); } }
/* The hero's lead, actions and note enter the same way (they were fading in, measurable at reduced contrast). */
@media (prefers-reduced-motion: no-preference) {
  .hero-anim .fade-1 { animation: appear-clip 600ms var(--ease-out-strong) 180ms both; }
  .hero-anim .fade-2 { animation: appear-clip 600ms var(--ease-out-strong) 260ms both; }
  .hero-anim .fade-3 { animation: appear-clip 600ms var(--ease-out-strong) 340ms both; }
}
@keyframes appear-clip { from { transform: translateY(12px); clip-path: inset(0 0 100% 0); } to { transform: none; clip-path: inset(-24px); } }

/**
 * @file 20-platform.css
 * @brief The platform pages (pass 9, pages_platform.py): the two tone statement, the feature blocks (title and lead,
 *        then the picture beside its points with hairlines), the official sources, the dark band of use cases.
 * @remarks Composition taken from the structure of Harvey's platform pages (README section 17.2), drawn with our tokens.
 */
.statement {
  font-size: clamp(1.75rem, 1.2rem + 1.9vw, 2.875rem); line-height: 1.12; letter-spacing: -0.03em; font-weight: 540;
  max-width: 54rem;
}
.pf-block { margin-top: clamp(64px, 8vw, 128px); padding-top: clamp(28px, 3vw, 40px); border-top: 1px solid var(--hair-strong); }
.pf-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: start; }
.pf-h { font-size: clamp(1.625rem, 1.2rem + 1.2vw, 2.25rem); }
.pf-head .lead { color: #3d4241; }
.pf-body { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr); gap: clamp(28px, 4vw, 72px); align-items: end; margin-top: clamp(28px, 3vw, 44px); }
.pf-block.is-flip .pf-body { grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.25fr); }
.pf-block.is-flip .pf-points { order: -1; }
.pf-points { list-style: none; display: grid; }
.pf-points li { border-top: 1px solid var(--hair-strong); padding: 18px 0 22px; display: grid; gap: 6px; }
.pf-points h4 { font-size: 1.0625rem; font-weight: 600; letter-spacing: -0.01em; margin: 0; }
.pf-points p { color: var(--muted); font-size: 0.9375rem; }
.pf-photo { position: relative; border-radius: var(--radius); overflow: hidden; isolation: isolate; aspect-ratio: 16 / 10; background: #dfe2e0; }
.pf-photo .stage-photo::after { background: rgb(20 22 21 / 0.06); }
.pf-body .photo-card { min-height: clamp(360px, 36vw, 520px); }

/* Official sources: a two column list, the name as a plain link to the official site, its role beside it. */
.pf-sources { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 32px; margin-top: 32px; border-top: 1px solid var(--hair-strong); }
.pf-sources li { display: grid; gap: 4px; padding: 18px 0; border-bottom: 1px solid var(--hair-strong); }
.pf-sources b { font-weight: 600; }
.pf-sources li > span { color: var(--muted); font-size: 0.9375rem; }

/* Use cases on a dark band over the black and white colonnade (Harvey's dark « how teams use » section). */
.pf-dark { position: relative; border-radius: var(--radius); overflow: hidden; isolation: isolate; background: var(--obsidian); color: var(--on-dark); }
.pf-dark .stage-photo::after { background: linear-gradient(180deg, rgb(14 16 15 / 0.9), rgb(14 16 15 / 0.82)); }
.pf-dark-in { padding: clamp(32px, 5vw, 80px) clamp(22px, 5vw, 72px); display: grid; gap: clamp(28px, 4vw, 48px); }
.pf-dark-head { display: grid; gap: 18px; justify-items: start; max-width: 40rem; }
.pf-dark .tag-when { background: rgb(230 239 238 / 0.14); color: #d9ece9; }
.pf-dark .tag-when::before { background: #9fd0cb; }
.pf-uses { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(24px, 4vw, 56px); }
.pf-uses-col h3 { font-size: 0.875rem; font-weight: 600; color: #c9d2cf; letter-spacing: 0.01em; margin-bottom: 4px; }
.pf-uses-col ul { list-style: none; display: grid; }
.pf-uses-col li { border-top: 1px solid rgb(244 244 242 / 0.18); padding: 18px 0; display: grid; gap: 6px; }
.pf-uses-col h4 { margin: 0; font-size: 1.1875rem; font-weight: 560; letter-spacing: -0.015em; }
.pf-uses-col p { color: #c9d2cf; font-size: 0.9375rem; }

@media (max-width: 1080px) {
  .pf-head, .pf-body, .pf-block.is-flip .pf-body { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .pf-block.is-flip .pf-points { order: 0; }
  .pf-sources { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .pf-uses, .pf-sources { grid-template-columns: minmax(0, 1fr); }
  .pf-body .photo-card { min-height: 0; }
}

/* ---------- Home: the platform's eleven pages, and a full width architecture band ---------- */
.pf-groups { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 3vw, 48px); margin-top: clamp(36px, 4vw, 56px); }
.pf-group h3 { font-size: 0.875rem; font-weight: 600; color: var(--muted); padding-bottom: 10px; border-bottom: 1px solid var(--hair-strong); }
.pf-group ul { list-style: none; display: grid; }
.pf-link {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 16px; padding: 16px 0; border-bottom: 1px solid var(--hair);
  text-decoration: none; transition: padding var(--t-menu) var(--ease-out);
}
.pf-link b { font-size: 1.1875rem; font-weight: 560; letter-spacing: -0.015em; }
.pf-link span:not(.arr) { grid-column: 1; color: var(--muted); font-size: 0.9375rem; }
.pf-link .arr { grid-column: 2; grid-row: 1 / span 2; align-self: center; color: var(--accent); transition: transform var(--t-menu) var(--ease-out); }
.pf-link:hover .arr, .pf-link:focus-visible .arr { transform: translateX(4px); }
.interlude {
  position: relative; border-radius: var(--radius); overflow: hidden; isolation: isolate; min-height: clamp(360px, 42vw, 620px);
  display: grid; align-items: end; padding: clamp(28px, 5vw, 72px); color: #fff; background: #2a2d2c;
}
.interlude .stage-photo::after { background: linear-gradient(90deg, rgb(14 16 15 / 0.62) 0%, rgb(14 16 15 / 0.12) 70%), linear-gradient(180deg, rgb(14 16 15 / 0) 35%, rgb(14 16 15 / 0.55) 100%); }
.interlude .statement { max-width: 40rem; color: #fff; }
.interlude .statement .soft { color: #e3e7e5; }
@media (max-width: 900px) { .pf-groups { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Security page: the one list of providers (D-0094) ---------- */
.prov-wrap { margin-top: clamp(28px, 3vw, 44px); }
.prov { width: 100%; border-collapse: collapse; font-size: 0.9375rem; }
.prov th, .prov td { text-align: left; vertical-align: top; padding: 16px 16px 16px 0; border-bottom: 1px solid var(--hair-strong); }
.prov thead th { font-size: 0.8125rem; font-weight: 600; color: var(--muted); padding-top: 0; }
.prov tbody th { font-weight: 600; }
.prov td { color: #3d4241; }
.status { display: inline-block; font-size: 0.8125rem; font-weight: 560; color: #3d4241; background: var(--surface-2); border-radius: 999px; padding: 3px 10px; }
.status.is-live { color: #1d4b53; background: var(--accent-soft); }
@media (max-width: 760px) {
  .prov thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .prov, .prov tbody, .prov tr, .prov th, .prov td { display: block; }
  .prov tr { padding: 14px 0; border-bottom: 1px solid var(--hair-strong); }
  .prov th, .prov td { border: 0; padding: 2px 0; }
  .prov td:last-child { padding-top: 8px; }
}

/* ---------- Offers (DIR-0160): a drawing per offer, and the home's compact pricing ---------- */
.offer-art { background: var(--surface-2); border-radius: 12px; padding: 14px 18px 6px; }
.offer-art svg { height: 120px; }
.offers-home { margin-top: clamp(32px, 4vw, 48px); }
.offer-home { gap: 14px; }
.offer-home .offer-where { display: grid; gap: 6px; }

/**
 * @file 25-plans.css
 * @brief The offer cards, a replica of the app's plan card (`packages/ui/src/onboarding.css`, `.stk-plans`,
 *        `.stk-plan`, `.stk-choose`; tokens of `packages/ui/src/tokens.css`), Téo's request of 2026-11-12.
 * @remarks Values are the app's light theme, value for value (the site is light only): the glass card with a 22 px
 *          radius, the 56 px stack drawn in the logo teal (D-0105) with its soft and tint layers, the 22 px name, the
 *          14 px muted usage, the regions with 16 px round flags and the sign in page's « ou » divider, the 28 px price
 *          over its 13 px unit, and the 40 px pill at the foot. Under 760 px the card becomes the app's row (drawing,
 *          text, button); the button drops under the text at 560 px instead of the app's 420, because the site's
 *          labels (« Commencer avec Max », « Rejoindre avec Ultra ») are longer than the app's « Choisir Max ».
 */
.plans { list-style: none; display: grid; gap: 12px; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: clamp(32px, 4vw, 48px); }
@media (max-width: 759px) { .plans { grid-template-columns: minmax(0, 1fr); } }

.plan {
  --plan-line: color-mix(in srgb, var(--text) 82%, transparent);
  --plan-tint: color-mix(in srgb, var(--accent) 22%, var(--bg));
  --plan-soft: color-mix(in srgb, var(--accent) 34%, var(--bg));
  --plan-edge: color-mix(in srgb, var(--text) 46%, var(--bg));
  display: flex; flex-direction: column; align-items: flex-start; gap: 6px;
  padding: 22px 20px 20px; border-radius: 22px; text-align: left;
  background: rgb(255 255 255 / 0.74); border: 1px solid var(--hair-strong);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.75), 0 1px 2px rgb(18 18 18 / 0.04);
}
.plan-stack { flex: none; display: block; width: 56px; height: 56px; margin-bottom: 8px; }
.plan-stack g { stroke: var(--plan-line); }
.plan-l-accent { fill: var(--accent); }
.plan-l-soft { fill: var(--plan-soft); }
.plan-l-tint { fill: var(--plan-tint); }
.plan-name { margin: 0; font-size: 22px; font-weight: 600; letter-spacing: -0.015em; line-height: 1.25; }
.plan-usage { font-size: 14px; color: var(--muted); }
/* Where Vision's AI may run (DIR-0095, DIR-0136): one region per line, the « ou » divider between them. */
.plan-hosting { display: grid; gap: 6px; margin-top: 6px; font-size: 14px; line-height: 1.4; color: var(--text); }
.plan-region { display: flex; align-items: center; gap: 8px; font-weight: 500; }
.plan-flags { display: inline-flex; flex: none; gap: 2px; }
.plan-flag { flex: none; display: block; }
.plan-or { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; color: var(--muted); font-size: 12px; }
.plan-or::before, .plan-or::after { content: ""; height: 1px; background: var(--hair); }
/* The unit always under the price (the app's U19). */
.plan-pricing { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; margin-top: 10px; }
.plan-price { font-size: 28px; font-weight: 560; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; line-height: 1.1; }
.plan-unit { font-size: 13px; color: var(--muted); }
/* The site's own line (where the firm's data is hosted, P11), in the slot of the app's « Suggested » line. */
.plan-extra { margin-top: 4px; font-size: 13px; line-height: 1.45; color: var(--muted); }
/* The app's « Choose » pill; the plan the site puts forward carries the ink of the app's chosen state. */
.plan-choose {
  margin-top: auto; width: 100%; min-height: 40px; padding: 8px 16px; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center; text-align: center;
  font-size: 14px; font-weight: 560; line-height: 1.2; text-decoration: none;
  color: var(--text); background: rgb(255 255 255 / 0.9); border: 1px solid var(--plan-edge);
  transition: background-color 200ms var(--ease-out), border-color 200ms var(--ease-out), color 200ms var(--ease-out);
}
/* The app puts its pill 14 px under the last line; here the 14 px stay as the line's margin and the pill goes to the
   foot, so the three buttons line up although Pro has one region and Max and Ultra two. */
.plan-extra { margin-bottom: 14px; }
.plan-choose:hover { border-color: var(--text); }
.plan-choose.is-primary { background: var(--ink); border-color: var(--ink); color: var(--on-ink); }
.plan-choose.is-primary:hover { background: #2a2a2a; border-color: #2a2a2a; }
.plan-choose:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.plans + .offer-rules { margin-top: 24px; }
.plans-foot { margin-top: 12px; }

/* The app's phone row: the drawing on the left over every line, the text, the button on the right. */
@media (max-width: 759px) {
  .plan { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; align-items: center; gap: 2px 14px; padding: 14px 14px 14px 16px; }
  .plan > :not(.plan-stack):not(.plan-choose) { grid-column: 2; }
  .plan-stack { grid-column: 1; grid-row: 1 / span 6; margin: 0; width: 48px; height: 48px; }
  .plan-name { font-size: 17px; }
  .plan-pricing { margin-top: 2px; }
  .plan-price { font-size: 20px; }
  .plan-extra { margin-bottom: 0; }
  .plan-choose { grid-column: 3; grid-row: 1 / span 6; margin: 0; width: auto; min-width: 132px; white-space: nowrap; }
}
@media (max-width: 560px) {
  .plan { grid-template-columns: 48px minmax(0, 1fr); }
  .plan-choose { grid-column: 1 / -1; grid-row: auto; width: 100%; margin-top: 10px; white-space: normal; }
}
/* Touch screens: the pill reaches 44 px like every other control of the site (50-touch.css). */
@media (max-width: 1160px) { .plan-choose { min-height: 44px; } }

/**
 * @file 30-menu.css
 * @brief Pass 9 (DIR-0153 points 4 and 5): the « Platform » mega menu, the phone and tablet sheet as a disclosure under
 *        the header, the menu button's lines that morph into a chevron (no close cross), the scroll lock, the language
 *        chooser's full viewport layer, and the footer's platform columns. Overrides pass 8 rules of site.css.
 */

/* ---------- Scroll lock (site.js lock()): no scrollbar, its width given back so nothing behind moves ---------- */
html.is-locked { overflow: hidden; }
html.is-locked body { padding-right: var(--sbw, 0px); }
html.is-locked .header { padding-right: var(--sbw, 0px); }

/* ---------- Mega menu « Platform » ---------- */
.drop-mega {
  position: fixed; top: calc(var(--header-h) - 6px); left: 0; right: 0; margin-inline: auto;
  width: min(1180px, 100vw - 2 * var(--gutter)); min-width: 0; padding: 14px; display: grid; gap: 12px;
}
.m-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) repeat(3, minmax(0, 1fr)); gap: 4px 12px; }
.m-col { display: grid; align-content: start; gap: 2px; }
.m-col + .m-col { border-left: 1px solid var(--hair); padding-left: 12px; }
.m-h { font-size: 0.8125rem; font-weight: 600; color: var(--muted); padding: 6px 12px 8px; }
.drop .m-entry { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1px; padding: 9px 12px; border-radius: 10px; text-decoration: none; }
.drop .m-entry.has-ico { grid-template-columns: 28px minmax(0, 1fr); column-gap: 12px; }
.drop .m-entry b { font-weight: 580; font-size: 0.9375rem; line-height: 1.35; }
.drop .m-entry span:not(.ico) { font-size: 0.8125rem; color: var(--muted); line-height: 1.4; }
.m-entry[aria-current="page"] b { color: #1d4b53; }
.m-entry[aria-current="page"] b::after { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 999px; background: var(--accent); margin-left: 8px; vertical-align: middle; }
.m-feat { display: grid; grid-template-columns: 132px minmax(0, 1fr) auto; gap: 18px; align-items: center; padding: 10px; border-radius: 14px; background: var(--surface-2); }
.m-feat-ph { position: relative; height: 76px; border-radius: 10px; overflow: hidden; isolation: isolate; background: #dfe2e0; }
.m-feat-in { display: grid; gap: 2px; }
.m-feat-in b { font-weight: 600; font-size: 0.9375rem; }
.drop .m-feat-in span { font-size: 0.8125rem; color: var(--muted); }
.m-feat-act { display: flex; align-items: center; gap: 16px; padding-right: 8px; }
.drop .m-feat .btn { display: inline-flex; grid-template-columns: none; padding: 0 6px 0 16px; }
.drop .m-feat .btn:hover { background: #2a2a2a; }
.drop .m-feat .btn .chip { color: inherit; font-size: inherit; }
.drop .m-feat .link { display: inline-flex; grid-template-columns: none; padding: 0 0 2px; border-radius: 0; font-size: 0.875rem; }
.drop .m-feat .link:hover { background-color: transparent; }
.drop .m-feat .link span { color: inherit; font-size: inherit; }
.nav-link[data-current="true"] { font-weight: 620; }
@media (max-width: 1280px) {
  .m-feat { grid-template-columns: minmax(0, 1fr) auto; }
  .m-feat-ph { display: none; }
}

/* ---------- Phone and tablet sheet: a panel under the header, the menu button stays on top and toggles it ---------- */
.sheet {
  position: fixed; inset: 0; z-index: 45; width: auto; height: auto; max-width: none; max-height: none; margin: 0;
  padding: var(--header-h) 0 0; border: 0; background: transparent; display: flex; justify-content: flex-end;
}
.sheet[hidden] { display: none; }
.sheet-scrim { position: absolute; inset: var(--header-h) 0 0 0; background: rgb(20 22 21 / 0.36); }
.sheet .sheet-in {
  position: relative; width: min(100%, 480px); height: 100%; overflow-y: auto; overscroll-behavior: contain;
  display: flex; flex-direction: column; gap: 24px; padding: 8px var(--gutter) 24px; background: var(--bg);
  border-top: 1px solid var(--hair);
}
html.menu-open .header::before { background: var(--bg); border-bottom-color: var(--hair); }
.s-main { list-style: none; display: grid; gap: 0; margin-top: 8px; }
.sheet .s-main a { display: block; padding: 8px 0; font-size: 1.625rem; font-weight: 540; letter-spacing: -0.025em; text-decoration: none; }
.sheet .s-main a[aria-current="page"] { color: #1d4b53; }
.s-groups { display: grid; gap: 18px; margin-top: 18px; }
.s-group { border-top: 1px solid var(--hair-strong); padding-top: 10px; }
.s-group .m-h { padding: 4px 0 6px; }
.s-group ul { list-style: none; display: grid; }
.sheet .s-group .m-entry { display: grid; gap: 1px; padding: 8px 0; font-size: 1rem; font-weight: 400; letter-spacing: 0; text-decoration: none; }
.sheet .s-group .m-entry b { font-weight: 580; font-size: 1rem; line-height: 1.35; }
.sheet .s-group .m-entry span { font-size: 0.8125rem; color: var(--muted); line-height: 1.4; }
.sheet .sheet-end { margin-top: auto; display: grid; gap: 10px; padding-top: 8px; }
@media (max-width: 560px) {
  .sheet .sheet-in { width: 100%; }
  .sheet-scrim { display: none; }
}

/* ---------- Menu button: two lines that swap lengths on hover and fold into a chevron when open (no cross) ---------- */
.header .menu-btn { transition: background-color 240ms var(--ease-soft), border-color 240ms var(--ease-soft), color 240ms var(--ease-soft); }
.header .menu-btn .glyph path { transform-box: view-box; }
.header .menu-btn .g-top { transform-origin: 12px 9px; transform: none; }
.header .menu-btn .g-bot { transform-origin: 12px 15px; transform: translateX(2.5px) scaleX(0.643); }
.header .menu-btn:hover:not([aria-expanded="true"]) .g-top { transform: translateX(2.5px) scaleX(0.643); }
.header .menu-btn:hover:not([aria-expanded="true"]) .g-bot { transform: none; }
.header .menu-btn[aria-expanded="true"] { background: var(--ink); border-color: var(--ink); color: var(--on-ink); }
.header .menu-btn[aria-expanded="true"] .g-top { transform: translate(-3px, 3px) rotate(-45deg) scaleX(0.606); }
.header .menu-btn[aria-expanded="true"] .g-bot { transform: translate(3px, -3px) rotate(45deg) scaleX(0.606); }
@media (prefers-reduced-motion: no-preference) {
  .header .menu-btn .glyph { transition: transform 300ms var(--ease-out-strong); }
  .header .menu-btn .glyph path { transition: transform 420ms var(--ease-out-strong); }
  .header .menu-btn .g-bot { transition-delay: 40ms; }
  .header .menu-btn[aria-expanded="true"]:hover .glyph { transform: translateY(-1.5px); }
  .sheet.is-in .sheet-scrim { animation: fade 320ms var(--ease-out-strong) both; }
  .sheet.is-in .s-group { animation: rise-s 520ms var(--ease-out-strong) 180ms both; }
  .sheet.is-closing .sheet-scrim { animation: fade-out 180ms var(--ease-in) both; }
  .drop-mega.is-in .m-col, .drop-mega.is-in .m-feat { animation: rise-s 420ms var(--ease-out-strong) both; }
  .drop-mega.is-in .m-col:nth-child(2) { animation-delay: 40ms; }
  .drop-mega.is-in .m-col:nth-child(3) { animation-delay: 80ms; }
  .drop-mega.is-in .m-col:nth-child(4) { animation-delay: 120ms; }
  .drop-mega.is-in .m-feat { animation-delay: 160ms; }
  .drop-mega.is-in a { animation: none; }
}

/* ---------- Language chooser: the dialog itself is the dimmed layer, fixed over the full viewport ---------- */
.lang-dlg[open] {
  position: fixed; inset: 0; width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 16px;
  display: grid; place-items: center; overflow: auto; background: rgb(20 22 21 / 0.42);
}
.lang-dlg::backdrop { background: transparent; }
.lang-dlg .lang-box { width: min(400px, 100%); }
@media (prefers-reduced-motion: no-preference) {
  .lang-dlg[open] { animation: fade 300ms var(--ease-out-strong) both; }
  .lang-dlg[open]::backdrop { animation: none; }
  .lang-dlg.is-closing { animation: fade-out 180ms var(--ease-in) both; }
}

/* ---------- Footer: the platform's three groups join the columns ---------- */
.footer-top { grid-template-columns: minmax(0, 1.4fr) repeat(6, minmax(0, 1fr)); gap: 28px 24px; }
@media (max-width: 1080px) { .footer-top { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 560px) { .footer-top { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* The sheet's one landmark (« Menu ») holds its links and its actions, so every control sits in a landmark. */
.sheet .sheet-nav { display: flex; flex-direction: column; gap: 24px; flex: 1 0 auto; }
.sheet .sheet-end .btn { display: inline-flex; padding: 0 8px 0 20px; font-size: 0.9875rem; font-weight: 560; letter-spacing: normal; }

/**
 * @file 40-footer.css
 * @brief The editorial footer (DIR-0159 point 4, footer.py): obsidian ground, a facade strip, one large sentence, the
 *        contact and the action, a grid of short columns, one bottom line. Contrast on #141615: text #f4f4f2 (17:1),
 *        headings and the bottom line #b9bebc (9.6:1). Links reach 44 px of height on touch screens.
 */
.footer.f-dark { background: var(--obsidian); color: var(--on-dark); border-top: 0; padding: 0 0 28px; margin-top: var(--section); }
.f-strip { position: relative; height: clamp(140px, 16vw, 260px); overflow: hidden; isolation: isolate; }
.f-strip .stage-photo::after { background: linear-gradient(180deg, rgb(20 22 21 / 0) 30%, rgb(20 22 21 / 1) 100%); }
.f-strip .stage-photo img { object-position: 50% 30%; }
.f-lead { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.6fr); gap: 24px 48px; align-items: end; padding: clamp(40px, 6vw, 88px) 0 clamp(36px, 5vw, 64px); border-bottom: 1px solid rgb(244 244 242 / 0.16); }
.f-lead .brand { grid-column: 1 / -1; color: var(--on-dark); }
.f-lead .brand img { filter: none; }
.footer-word { font-size: clamp(2rem, 1.2rem + 3.2vw, 4.25rem); line-height: 1.04; letter-spacing: -0.035em; font-weight: 520; max-width: 15em; color: var(--on-dark); text-wrap: balance; }
.f-act { display: grid; gap: 18px; justify-items: start; }
.f-mail { font-size: clamp(1.125rem, 1rem + 0.5vw, 1.5rem); font-weight: 520; color: var(--on-dark); text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat; padding-bottom: 4px; }
.f-mail:hover { background-size: 0 1px; background-position: 100% 100%; }
.f-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 32px 24px; padding: clamp(32px, 4vw, 56px) 0; }
.f-col h2 { font-size: 0.8125rem; font-weight: 600; color: var(--on-dark-muted); margin-bottom: 14px; }
.f-col ul { list-style: none; display: grid; gap: 4px; }
.f-col a { color: var(--on-dark); text-decoration: none; font-size: 0.9375rem; display: inline-block; padding: 3px 0; background: linear-gradient(currentColor, currentColor) 100% 100% / 0 1px no-repeat; transition: background-size var(--t-menu) var(--ease-out); }
.f-col a:hover, .f-col a:focus-visible { background-position: 0 100%; background-size: 100% 1px; }
.f-end { display: flex; flex-wrap: wrap; gap: 8px 24px; padding-top: 22px; border-top: 1px solid rgb(244 244 242 / 0.16); font-size: 0.8125rem; color: var(--on-dark-muted); }
.f-end a { color: var(--on-dark); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.f-end span:last-child { margin-left: auto; }
.f-dark :focus-visible { outline-color: #9fd0cb; }
@media (max-width: 1180px) { .f-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 760px) {
  .f-lead { grid-template-columns: minmax(0, 1fr); }
  .f-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .f-col a, .f-end a { display: inline-flex; align-items: center; min-height: 44px; padding: 0; }
  .f-col ul { gap: 0; }
  .f-end span:last-child { margin-left: 0; }
}

/**
 * @file 50-touch.css
 * @brief DIR-0160 point 2: from 320 to 1 160 px (phones, tablets, the menu-button layout), every control is at least
 *        44 by 44 px (the header's brand, language and menu buttons, small buttons, standalone links, footer links).
 *        Measured by the mobile sweep at 320, 360, 375, 390, 414 and 768 px. Words inside a sentence stay inline.
 */
@media (max-width: 1160px) {
  .header .brand { min-height: 44px; flex: none; }
  .header-in { gap: 12px; }
  .header-end > * { flex: none; }
  .lang { height: 44px; min-width: 44px; }
  .icon-btn { width: 44px; height: 44px; }
  .btn-s { --h: 44px; }
  .link { min-height: 44px; }
  .f-lead { grid-template-columns: minmax(0, 1fr); }
  .f-lead .brand { min-height: 44px; }
  .f-mail { display: inline-flex; align-items: center; min-height: 44px; }
  .f-col ul { gap: 0; }
  .f-col a, .f-end a { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; padding: 0; }
  .f-end { align-items: center; }
}
/* At 320 to 400 px a long action (« Rejoindre les cabinets fondateurs ») wraps inside its pill instead of widening the
   page; its arrow chip stays on the right. */
@media (max-width: 400px) {
  .btn { white-space: normal; text-align: left; line-height: 1.25; padding-block: 6px; max-width: 100%; }
  .btn .chip { flex: none; }
}

/**
 * @file 60-pass10.css
 * @brief Pass 10 (Téo, 2026-11-12): the app shown at the top and on the pages (windows of real screenshots over quiet
 *        architecture), photographs in place of every drawing, the infrastructure band with flags and logos, and the
 *        consent banner of a GA build. Joined after the earlier parts into the one hashed stylesheet.
 * @remarks Same rules as the rest of the site: only transform, opacity and clip-path move; text that carries meaning
 *          enters with a clip, never a fade (DIR-0154); every animation sits under prefers-reduced-motion:
 *          no-preference; every picture has its intrinsic size, so the page never shifts (CLS 0).
 */

/* ---------- Hero, centred (README section 19.1: harvey.ai's scale, claude.com and chatgpt.com's centred focus) ---------- */
.hero-x { padding-top: calc(var(--header-h) + clamp(28px, 3.4vw, 48px)); }
.hero-c { display: grid; justify-items: center; text-align: center; gap: 18px; max-width: 74rem; margin: 0 auto; }
.eyebrow-pill {
  display: inline-flex; align-items: center; gap: 8px; min-height: 32px; padding: 4px 14px; border-radius: 999px;
  border: 1px solid var(--hair-strong); background: var(--surface); font-size: 0.875rem; font-weight: 560; color: #3d4241;
}
.eyebrow-pill::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
.display-x { font-size: clamp(2.5rem, 1.2rem + 4.1vw, 4.625rem); line-height: 1.02; letter-spacing: -0.04em; text-wrap: balance; }
.display-x .soft { color: #6b706f; }
.hero-c .lead { max-width: 46rem; color: #3d4241; }
.hero-c .actions { justify-content: center; }
.hero-x .hero-note { text-align: center; margin-top: 6px; }

/* ---------- The stage: the app in a window over a photograph ---------- */
.stage { position: relative; margin-top: clamp(32px, 3.4vw, 48px); border-radius: 24px; overflow: hidden; isolation: isolate; background: #2a2e2d; }
.stage .stage-photo::after { background: linear-gradient(180deg, rgb(20 22 21 / 0.12) 0%, rgb(20 22 21 / 0.28) 55%, rgb(20 22 21 / 0.55) 100%); }
.stage-in { position: relative; padding: clamp(28px, 4vw, 56px) clamp(16px, 5vw, 80px) 0; }
.stage .win-main { max-width: 1180px; margin: 0 auto -48px; }
.stage.has-side .win-main { margin-right: auto; }
/* The second layer peeks from the bottom right, below the composer, and is cut by the stage like the main window. */
.win-side { position: absolute; right: 2.6%; bottom: -15%; width: min(32%, 420px); }
.shot-note { margin-top: 14px; color: var(--muted); }
.hero-x .shot-note { text-align: center; }

.win {
  background: #fff; border-radius: 14px; overflow: hidden;
  box-shadow: 0 0 0 1px rgb(18 18 18 / 0.1), 0 2px 4px rgb(18 18 18 / 0.06), 0 30px 90px rgb(10 12 11 / 0.32);
}
.win-bar { display: flex; align-items: center; gap: 12px; height: 32px; padding: 0 14px; background: #f4f4f2; border-bottom: 1px solid var(--hair); }
.win-dots { display: inline-flex; gap: 6px; }
.win-dots i { width: 9px; height: 9px; border-radius: 50%; background: #d3d6d4; }
.win-name { font-size: 0.75rem; font-weight: 560; color: var(--muted); }
.win picture, .win img { width: 100%; }
.win-side { box-shadow: 0 0 0 1px rgb(18 18 18 / 0.1), 0 24px 70px rgb(10 12 11 / 0.45); }

/* A window on a photograph inside a section (feature rows, platform pages, pricing). */
.shot-card { position: relative; border-radius: var(--radius); overflow: hidden; isolation: isolate; background: #2a2e2d; padding: clamp(20px, 4vw, 56px); display: grid; place-items: center; }
.shot-card .stage-photo::after { background: rgb(20 22 21 / 0.22); }
.shot-card-in { width: 100%; }
.feature-pic, .pf-shot { min-width: 0; }

/* Photographs alone, where a drawing or a diagram used to be. */
.photo-only { position: relative; aspect-ratio: 16 / 10; border-radius: var(--radius); overflow: hidden; isolation: isolate; background: #d9dcda; }
.photo-only .stage-photo::after, .scene-photo .stage-photo::after { background: none; }
.scene-photo { aspect-ratio: 2.4 / 1; min-height: 0; }
.photo-hero { aspect-ratio: 4 / 3; }

/* Cards of what is delivered: a photograph on top instead of a spot drawing. */
.surface .surface-pic { position: relative; inset: auto; z-index: auto; aspect-ratio: 16 / 10; border-radius: 10px; overflow: hidden; margin-bottom: 10px; }
.surface .surface-pic::after { background: none; }

/* Panels (accounting and law): the window rises from the bottom of the dark card. */
.panel-shot { padding: 0 clamp(20px, 3vw, 36px); margin-top: auto; }
.win-panel { border-radius: 12px 12px 0 0; margin-bottom: -2px; }
.panel .shot-note { color: #c9cecc; }

/* The app's plans step on the pricing page. */
.inapp { display: grid; grid-template-columns: minmax(0, 0.42fr) minmax(0, 0.58fr); gap: clamp(28px, 4vw, 64px); align-items: center; }
.inapp .shot-note { grid-column: 2; margin-top: -12px; }
.inapp-text { display: grid; gap: 18px; }

/* ---------- Where your data lives (infra.py) ---------- */
.infra {
  border-radius: 24px; padding: clamp(28px, 5vw, 72px); color: var(--on-dark);
  background: radial-gradient(120% 90% at 100% 0%, #1d4b53 0%, rgb(29 75 83 / 0) 55%), var(--obsidian);
  display: grid; gap: clamp(28px, 4vw, 48px);
}
.inf-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr); gap: 32px 48px; align-items: end; }
.inf-head .h2 .soft { color: #a9b3b1; }
.inf-head .lead { color: #d6dbd9; }
.inf-legend { grid-column: 2; display: flex; flex-wrap: wrap; gap: 8px; }
.inf-regions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.inf-region { border: 1px solid rgb(244 244 242 / 0.12); background: rgb(244 244 242 / 0.04); border-radius: 18px; padding: clamp(18px, 2.4vw, 28px); }
.inf-where { display: flex; align-items: center; gap: 10px; font-size: 1.125rem; font-weight: 600; letter-spacing: -0.01em; margin-bottom: 8px; }
.inf-flag { display: inline-grid; width: 28px; height: 28px; border-radius: 50%; overflow: hidden; box-shadow: 0 0 0 1px rgb(244 244 242 / 0.3); }
.inf-flag .flag, .inf-flag svg { width: 28px; height: 28px; }
.inf-flag + .inf-flag { margin-left: -8px; }
.inf-rows { list-style: none; }
.inf-row { display: grid; grid-template-columns: 172px minmax(0, 1fr); gap: 8px 16px; align-items: start; padding: 16px 0; border-top: 1px solid rgb(244 244 242 / 0.1); }
.inf-row > .inf-mono, .inf-row > .inf-logo { grid-row: span 2; }
.inf-row .inf-status { grid-column: 2; justify-self: start; max-width: none; }
.inf-txt { display: grid; gap: 2px; }
.inf-txt b { font-weight: 600; }
.inf-txt span { color: var(--on-dark-muted); font-size: 0.9375rem; }
.inf-mono { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: rgb(244 244 242 / 0.1); font-weight: 650; color: var(--on-dark); }
.inf-logo { display: flex; align-items: center; height: 36px; }
.inf-logo img { height: 18px; width: auto; }
.inf-status {
  display: inline-flex; align-items: center; gap: 7px; max-width: 15rem; padding: 4px 11px; border-radius: 12px; font-size: 0.8125rem; line-height: 1.35;
  border: 1px solid rgb(244 244 242 / 0.2); color: var(--on-dark-muted);
}
.inf-status::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; border: 1.5px solid currentColor; }
.inf-status.is-live { color: #d4e7ea; background: rgb(134 174 180 / 0.16); border-color: rgb(134 174 180 / 0.45); }
.inf-status.is-live::before { background: #86aeb4; border-color: #86aeb4; }
.infra .logo-attrib { grid-column: 1 / -1; color: var(--on-dark-muted); }
.inf-foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px; padding-top: 20px; border-top: 1px solid rgb(244 244 242 / 0.12); }
.inf-foot .small { color: var(--on-dark-muted); max-width: 48rem; }
.infra .link { color: var(--on-dark); }

/* ---------- Consent banner (GA build only, analytics.py) ---------- */
.consent {
  position: fixed; z-index: 80; right: 16px; bottom: 16px; width: min(440px, calc(100% - 32px)); padding: 20px;
  background: var(--surface); color: var(--text); border: 1px solid var(--hair-strong); border-radius: 16px; box-shadow: var(--shadow-menu);
  display: grid; gap: 12px;
}
.consent[hidden] { display: none; }
.consent-h { font-size: 1.0625rem; font-weight: 650; letter-spacing: -0.01em; }
.consent p { font-size: 0.9375rem; color: #3d4241; }
.consent-acts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.consent-btn { justify-content: center; width: 100%; }
.f-cookies { background: none; border: 0; padding: 0; font: inherit; color: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; min-height: 24px; }

/* ---------- Layout below the desktop ---------- */
@media (max-width: 1080px) {
  .inf-head, .inapp { grid-template-columns: minmax(0, 1fr); }
  .inf-legend, .inapp .shot-note { grid-column: auto; }
  .inapp .shot-note { margin-top: 0; }
}
@media (max-width: 900px) {
  .inf-regions { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .stage { border-radius: 18px; }
  .stage-in { padding: 28px 14px 0; }
  .stage .win-main { margin-bottom: -24px; }
  .win-side { display: none; }
  .win-bar { height: 26px; padding: 0 10px; }
  .win-dots i { width: 7px; height: 7px; }
  .scene-photo { aspect-ratio: 4 / 3; }
  .inf-row { grid-template-columns: minmax(0, 1fr); }
  .inf-row > .inf-mono, .inf-row > .inf-logo { grid-row: auto; }
  .inf-row .inf-status { grid-column: auto; }
  .display-x { letter-spacing: -0.034em; }
}
@media (max-width: 560px) {
  .surface .surface-pic { grid-row: span 2; margin: 0; aspect-ratio: 1; align-self: start; }
}

/* ---------- Motion ---------- */
@media (prefers-reduced-motion: no-preference) {
  .hero-anim .eyebrow-pill { animation: appear-clip 600ms var(--ease-out-strong) 60ms both; }
  .hero-anim .stage.is-hero .stage-photo img { animation: settle-photo 1600ms var(--ease-out-strong) both; animation-timeline: auto; }
  .hero-anim .stage.is-hero .win-main { animation: rise-win 1000ms var(--ease-out-strong) 260ms both; }
  .hero-anim .stage.is-hero .win-side { animation: rise-win 1000ms var(--ease-out-strong) 520ms both; }
  .win, .surface .surface-pic img, .photo-only img { transition: transform 600ms var(--ease-out-strong); }
  .surface:hover .surface-pic img { transform: scale(1.04); }
  @supports (animation-timeline: view()) {
    .stage:not(.is-hero) .win-main, .shot-card-in, .panel-shot .win { animation: float linear both; animation-timeline: view(); animation-range: entry 0% cover 40%; }
    .stage.is-hero .win-side { animation: rise-win 1000ms var(--ease-out-strong) 520ms both, drift linear both; animation-timeline: auto, scroll(root); animation-range: normal, 0 900px; }
  }
}
@keyframes rise-win { from { transform: translateY(56px); clip-path: inset(0 0 100% 0 round 14px); } to { transform: none; clip-path: inset(-140px round 14px); } }
@keyframes drift { from { translate: 0 0; } to { translate: 0 -64px; } }

/* ---------- The module grid (DIR-0170, platform_grid.py): mixed sizes on a dark band ---------- */
.pg-band { border-radius: 24px; padding: clamp(24px, 4vw, 56px); background: var(--obsidian); color: var(--on-dark); display: grid; gap: clamp(24px, 3.4vw, 44px); }
.pg-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr); gap: 24px 48px; align-items: end; }
.pg-head .soft { color: #a9b3b1; }
.pg-head .lead { color: #d6dbd9; }
.pg-grid { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: clamp(220px, 21vw, 320px); gap: 12px; }
.pg-tall { grid-row: span 2; }
.pg-wide { grid-column: span 2; }
.pg-grid .pg-item:nth-child(4) { grid-column: 2; }
.pg-card { position: relative; display: block; height: 100%; border-radius: 16px; overflow: hidden; isolation: isolate; color: #fff; text-decoration: none; background: #2a2e2d; }
.pg-card .stage-photo { z-index: -2; }
.pg-card .stage-photo::after { background: linear-gradient(180deg, rgb(10 12 11 / 0) 38%, rgb(10 12 11 / 0.5) 66%, rgb(10 12 11 / 0.84) 100%); }
.pg-label { position: absolute; left: clamp(16px, 1.8vw, 24px); bottom: clamp(14px, 1.6vw, 22px); right: 64px; display: grid; gap: 4px; }
.pg-name { font-size: clamp(1.25rem, 1rem + 0.9vw, 1.75rem); font-weight: 560; letter-spacing: -0.02em; line-height: 1.1; }
.pg-when { font-size: 0.8125rem; color: #e3e7e5; display: inline-flex; align-items: center; gap: 7px; }
.pg-when::before { content: ""; width: 7px; height: 7px; border-radius: 50%; border: 1.5px solid currentColor; }
.pg-when.is-today::before { background: #86aeb4; border-color: #86aeb4; }
.pg-arrow { color: #fff; position: absolute; right: clamp(14px, 1.6vw, 20px); bottom: clamp(14px, 1.6vw, 20px); width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: rgb(255 255 255 / 0.16); border: 1px solid rgb(255 255 255 / 0.3); }
.pg-arrow .icon { width: 18px; height: 18px; color: #fff; }
.pg-card:focus-visible { outline: 3px solid #86aeb4; outline-offset: 3px; }
@media (max-width: 1080px) { .pg-head { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 900px) {
  .pg-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: clamp(200px, 40vw, 300px); }
  .pg-grid .pg-item:nth-child(4) { grid-column: auto; }
}
@media (max-width: 560px) {
  /* Two columns on a phone: the tall card turns wide, so four squares pair up and nothing leaves a hole. */
  .pg-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 176px; gap: 10px; }
  .pg-tall { grid-row: span 1; grid-column: span 2; }
  .pg-label { right: 14px; left: 14px; bottom: 12px; }
  .pg-arrow { display: none; }
  .pg-when { font-size: 0.75rem; }
}
@media (prefers-reduced-motion: no-preference) {
  .pg-card .stage-photo img { transition: transform 700ms var(--ease-out-strong); }
  .pg-card:hover .stage-photo img, .pg-card:focus-visible .stage-photo img { transform: scale(1.05); animation: none; }
  .pg-arrow { transition: transform 260ms var(--ease-out-strong), background-color 260ms var(--ease-out-strong); }
  .pg-card:hover .pg-arrow, .pg-card:focus-visible .pg-arrow { transform: translateX(3px); background: rgb(255 255 255 / 0.28); }
}

/* ---------- Case study (case_study.py, --drafts only) ---------- */
.cs-top { display: grid; gap: 16px; max-width: 64rem; }
.cs-num { font-size: 0.875rem; font-weight: 600; color: var(--accent); letter-spacing: 0.04em; }
.cs-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; margin-top: 16px; border-top: 1px solid var(--hair-strong); }
.cs-facts > div { padding: 14px 16px 0 0; display: grid; gap: 4px; }
.cs-facts dt { font-size: 0.8125rem; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; }
.cs-facts dd { margin: 0; font-weight: 520; }
.cs-top + .scene-photo { margin-top: clamp(32px, 4vw, 56px); }
.cs-grid { display: grid; grid-template-columns: minmax(0, 0.34fr) minmax(0, 0.66fr); gap: clamp(28px, 5vw, 72px); align-items: start; }
.cs-disclose { position: sticky; top: calc(var(--header-h) + 24px); padding: 22px; border-radius: 16px; background: var(--accent-soft); color: #173d44; display: grid; gap: 8px; }
.cs-story { display: grid; gap: clamp(28px, 3.4vw, 44px); }
.cs-block { display: grid; gap: 10px; max-width: 46rem; }
.cs-block p { color: #3d4241; }
.cs-teaser { position: relative; display: grid; align-items: end; min-height: clamp(320px, 34vw, 460px); border-radius: 24px; overflow: hidden; isolation: isolate; color: #fff; text-decoration: none; }
.cs-teaser .stage-photo::after { background: linear-gradient(90deg, rgb(10 12 11 / 0.86) 0%, rgb(10 12 11 / 0.6) 50%, rgb(10 12 11 / 0.2) 100%); }
.cs-teaser-in { display: grid; gap: 12px; padding: clamp(24px, 4vw, 56px); max-width: 40rem; }
.cs-teaser .eyebrow, .cs-teaser .lead { color: #e3e7e5; margin: 0; }
.cs-teaser .link { color: #fff; }
.cs-teaser:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
@media (max-width: 900px) {
  .cs-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 14px; }
  .cs-grid { grid-template-columns: minmax(0, 1fr); }
  .cs-disclose { position: static; }
}

/* ---------- What protects your firm (security page, DIR-0172) ---------- */
.sn-grid { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: clamp(28px, 4vw, 48px); }
.sn-item { border: 1px solid var(--hair); border-radius: 16px; background: var(--surface); padding: 20px; display: grid; gap: 10px; align-content: start; }
.sn-item p { color: var(--muted); font-size: 0.9375rem; }
.sn-status { justify-self: start; color: #3d4241; border-color: var(--hair-strong); }
.sn-status.is-live { color: #173d44; background: var(--accent-soft); border-color: rgb(29 75 83 / 0.35); }
.sn-status.is-live::before { background: var(--accent); border-color: var(--accent); }
@media (max-width: 1080px) { .sn-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .sn-grid { grid-template-columns: minmax(0, 1fr); } }

/* The tour's pause button reaches 44 px wherever the touch layout applies (found by the mobile sweep at 320 and 414). */
@media (max-width: 1160px) { .tour-ctrl button { height: 44px; } }

/**
 * @file 70-hero3d.css
 * @brief The home's 3D hero (DIR-0173, pass 11) and the header while it sits over it.
 * @remarks Wide screens without reduced motion get a 230 vh section whose stage sticks for the length of the assembly;
 *          the height is set by media queries, not by script, so nothing below moves when the canvas starts (CLS 0).
 *          Everywhere else the section is one screen: phones stack the words, the poster and the directory.
 *          Contrast: the words sit on the scene's haze (#0b1416 to #122624), the lead #c7d3d3 is 11:1 on it and the
 *          muted storey labels #9fb4b6 are 7.9:1.
 */
.h3d { --h3d-bg: #0b1416; --h3d-soft: #86aeb4; position: relative; background: var(--h3d-bg); color: var(--on-dark); isolation: isolate; }
.h3d-stage { position: relative; min-height: 100vh; min-height: 100svh; overflow: hidden; display: grid; }
.h3d-media { position: absolute; inset: 0; z-index: -1; }
.h3d-poster, .h3d-poster img, .h3d-cv { position: absolute; inset: 0; width: 100%; height: 100%; }
.h3d-poster img { object-fit: cover; object-position: 50% 50%; }
.h3d-cv { display: block; opacity: 0; transition: opacity 500ms var(--ease-soft); }
.h3d.is-live .h3d-cv { opacity: 1; }
/* A quiet shade behind the words only: the scene stays untouched on the right. */
.h3d-media::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, rgb(11 20 22 / 0.86) 0%, rgb(11 20 22 / 0.55) 34%, rgb(11 20 22 / 0) 58%);
}
.h3d-in {
  position: relative; display: grid; align-items: center;
  padding-top: calc(var(--header-h) + clamp(24px, 4vh, 48px)); padding-bottom: clamp(56px, 9vh, 96px);
}
.h3d-copy { max-width: 36rem; display: grid; gap: 22px; justify-items: start; }
.h3d-eyebrow { font-size: 0.8125rem; font-weight: 560; letter-spacing: 0.14em; text-transform: uppercase; color: var(--h3d-soft); }
.h3d-h1 {
  font-size: clamp(2.75rem, 1.4rem + 4.3vw, 5.75rem); line-height: 1.01; font-weight: 380; letter-spacing: -0.038em;
  color: #f4f7f6; text-wrap: balance;
}
.h3d-h1 .soft { color: var(--h3d-soft); }
.h3d-h1 .w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: 0.06em; margin-bottom: -0.06em; }
.h3d-h1 .w > span { display: inline-block; }
.h3d-lead { font-size: var(--f-lead); line-height: 1.5; color: #c7d3d3; max-width: 31rem; }
.h3d-actions { margin-top: 6px; }

/* The directory: six storeys, top first, like the board in a lobby. */
.h3d-dirwrap { position: absolute; inset: 0; display: flex; align-items: center; justify-content: flex-end; pointer-events: none; }
.h3d-dir { pointer-events: auto; width: 17.5rem; }
.h3d-dir-h { font-size: 0.75rem; font-weight: 560; letter-spacing: 0.14em; text-transform: uppercase; color: #9fb4b6; padding-bottom: 10px; border-bottom: 1px solid rgb(244 247 246 / 0.16); }
.h3d-dir ol { list-style: none; margin: 0; padding: 0; }
.h3d-floor a {
  display: grid; grid-template-columns: 2.2rem 1fr auto; align-items: baseline; gap: 8px; min-height: 44px; padding: 11px 0;
  border-bottom: 1px solid rgb(244 247 246 / 0.1); color: #9fb4b6; text-decoration: none;
  transition: color 400ms var(--ease-soft);
}
.h3d-n { font-variant-numeric: tabular-nums; font-size: 0.8125rem; letter-spacing: 0.04em; }
.h3d-name { font-size: 1rem; font-weight: 520; }
.h3d-when { font-size: 0.75rem; letter-spacing: 0.02em; text-align: right; }
.h3d-floor.is-on a { color: #e6eeee; }
.h3d-floor.is-built .h3d-when { color: var(--h3d-soft); }
.h3d-floor.is-cur a { color: #ffffff; }
.h3d-floor.is-cur .h3d-n { color: var(--h3d-soft); }
.h3d-floor a:hover .h3d-name { text-decoration: underline; text-underline-offset: 4px; }
.h3d-floor a:focus-visible { outline: 2px solid #f4f7f6; outline-offset: 2px; }

.h3d-hint {
  position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%); display: none; align-items: center; gap: 10px;
  font-size: 0.8125rem; color: #9fb4b6; transition: opacity 400ms var(--ease-soft);
}
.h3d-hint span { width: 1px; height: 28px; background: linear-gradient(180deg, rgb(159 180 182 / 0), #9fb4b6); }
.h3d-end { position: absolute; left: 0; right: 0; bottom: 0; height: 1px; }

/* The pinned assembly: wide screens (1 240 px and up, where the words, the building and the directory fit side by
   side) that accept motion. */
@media (min-width: 1240px) and (prefers-reduced-motion: no-preference) {
  .h3d { height: 230vh; }
  .h3d-stage { position: sticky; top: 0; height: 100vh; height: 100svh; }
  .h3d.is-live .h3d-hint { display: inline-flex; }
  .h3d.is-moved .h3d-hint { opacity: 0; }
  .h3d-h1 .w > span { animation: rise 900ms var(--ease-out-strong) both; }
  .h3d-h1 .w:nth-child(2) > span { animation-delay: 50ms; }
  .h3d-h1 .w:nth-child(3) > span { animation-delay: 100ms; }
  .h3d-h1 .w:nth-child(4) > span { animation-delay: 150ms; }
  .h3d-h1 .w:nth-child(5) > span { animation-delay: 200ms; }
  .h3d-h1 .soft .w > span { animation-delay: 260ms; }
  .h3d-lead, .h3d-actions, .h3d-dir { animation: appear-clip 700ms var(--ease-out-strong) 320ms both; }
}

/* Below 1 240 px: no canvas; the words, the building (the square poster) and the directory in flow. */
@media (max-width: 1239px) {
  .h3d-stage {
    min-height: 0; width: min(100% - 2 * var(--gutter), var(--max-wide)); margin-inline: auto;
    grid-template-columns: minmax(0, 1fr); grid-template-areas: "copy" "media" "dir"; column-gap: clamp(24px, 4vw, 56px);
    padding-top: calc(var(--header-h) + 24px); padding-bottom: 56px;
  }
  .h3d-stage > .wrap-wide { width: auto; margin: 0; }
  .h3d-in { grid-area: copy; padding: 0; }
  .h3d-media { grid-area: media; position: relative; inset: auto; z-index: 0; aspect-ratio: 1 / 1; margin-top: 8px; }
  .h3d-media::after { content: none; }
  /* The square still melts into the haze on every side, so no picture edge shows. */
  .h3d-media { -webkit-mask-image: radial-gradient(closest-side, #000 72%, transparent); mask-image: radial-gradient(closest-side, #000 72%, transparent); }
  .h3d-cv { display: none; }
  .h3d-dirwrap { grid-area: dir; position: static; display: block; }
  .h3d-dir { width: auto; margin-top: 32px; }
}
@media (min-width: 760px) and (max-width: 1239px) {
  .h3d-stage { grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr); grid-template-areas: "copy media" "dir dir"; align-items: center; }
  .h3d-media { margin-top: 0; }
  .h3d-dir ol { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 24px; }
}
@media (max-width: 759px) {
  .h3d-media { margin-inline: calc(-1 * var(--gutter)); }
}

/* ---------- The header over the dark hero ---------- */
.header.on-dark::before { background: rgb(11 20 22 / 0.42); }
.header.on-dark.is-scrolled::before { border-bottom-color: rgb(244 247 246 / 0.1); }
.header.on-dark .brand,
.header.on-dark .nav > li > .nav-link,
.header.on-dark .header-end > .sign-in { color: #eef3f3; }
.header.on-dark .nav > li > .nav-link:hover,
.header.on-dark .nav > li > .nav-link[aria-expanded="true"],
.header.on-dark .header-end > .sign-in:hover { background: rgb(244 247 246 / 0.1); }
.header.on-dark .lang { background: transparent; border-color: rgb(244 247 246 / 0.28); color: #eef3f3; }
.header.on-dark .lang:hover { border-color: rgb(244 247 246 / 0.6); }
.header.on-dark .header-end > .btn-ink { background: #f4f7f6; color: #0b1416; }
.header.on-dark .header-end > .btn-ink:hover { background: #ffffff; }
.header.on-dark .header-end > .btn-ink .chip { background: rgb(11 20 22 / 0.08); }
.header.on-dark .menu-btn:not([aria-expanded="true"]) { background: transparent; border-color: rgb(244 247 246 / 0.28); color: #eef3f3; }

/**
 * @file 75-material.css
 * @brief The material behind the app's windows (DIR-0173): stone or teal with an architect's grid, never a photograph.
 * @remarks The grid lines are 1 px at 4.5 % (stone) or 6 % (teal): a texture, not content. The shades that pass 10
 *          laid over photographs are switched off here, so the windows sit on the plain material.
 */
.stage-photo.mat { background-size: 40px 40px; background-position: -1px -1px; }
.stage-photo.mat::after { content: none; }
.mat-stone {
  background-color: #e8e5dd;
  background-image: linear-gradient(rgb(18 18 18 / 0.045) 1px, transparent 1px), linear-gradient(90deg, rgb(18 18 18 / 0.045) 1px, transparent 1px);
}
.mat-teal {
  background-color: #0f2a2f;
  background-image: linear-gradient(rgb(244 247 246 / 0.06) 1px, transparent 1px), linear-gradient(90deg, rgb(244 247 246 / 0.06) 1px, transparent 1px);
}

/**
 * @file 80-demo.css
 * @brief The fictional firm demo of the home (demo.py, src/js/50-demo.js, DIR-0173 point 3).
 * @remarks The window sits on the stone material (75-material.css), never on a photograph. Scenes are hidden only once
 *          the script runs (`.dm.is-js`), so without script all four read in order. Motion: a 900 ms « preparing » beat,
 *          then the lines rise in turn (60 ms apart); none under reduced motion.
 */
.dm { display: grid; grid-template-columns: minmax(0, 0.36fr) minmax(0, 0.64fr); gap: clamp(24px, 4vw, 64px); margin-top: clamp(36px, 5vw, 64px); align-items: start; }
.dm-acts { display: grid; border-top: 1px solid var(--hair-strong); }
.dm-act {
  position: relative; display: grid; grid-template-columns: 2.4rem 1fr; align-items: baseline; gap: 6px; width: 100%; min-height: 64px;
  padding: 18px 0; border: 0; border-bottom: 1px solid var(--hair-strong); background: none; cursor: pointer; text-align: left;
  font-size: 1.0625rem; font-weight: 520; color: var(--muted); transition: color var(--t-hover) var(--ease-soft);
}
.dm-act .dm-n { font-size: 0.8125rem; font-variant-numeric: tabular-nums; }
.dm-act:hover { color: var(--text); }
.dm-act.is-on { color: var(--text); }
.dm-act.is-on .dm-n { color: var(--accent); }
.dm-act::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform 500ms var(--ease-out); }
.dm-act.is-on::after { transform: scaleX(1); }
.dm-act:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 4px; }
.dm-note { margin-top: 18px; color: var(--muted); }

.dm-win { border-radius: 14px; overflow: hidden; background: var(--surface); box-shadow: 0 1px 2px rgb(18 18 18 / 0.06), 0 24px 64px rgb(18 18 18 / 0.1); border: 1px solid var(--hair); }
.dm-bar { display: flex; align-items: center; gap: 7px; height: 40px; padding: 0 14px; border-bottom: 1px solid var(--hair); background: #f6f6f4; font-size: 0.8125rem; }
.dm-bar > span { width: 10px; height: 10px; border-radius: 999px; background: #d9dcda; }
.dm-bar b { margin-left: 10px; font-weight: 600; }
.dm-app { display: grid; grid-template-columns: 9.5rem minmax(0, 1fr); min-height: 380px; }
.dm-nav { list-style: none; margin: 0; padding: 14px 10px; display: grid; align-content: start; gap: 2px; background: #f6f6f4; border-right: 1px solid var(--hair); font-size: 0.875rem; color: var(--muted); }
.dm-nav li { padding: 7px 10px; border-radius: 8px; transition: background-color 300ms var(--ease-soft), color 300ms var(--ease-soft); }
.dm-nav li.is-on { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.dm-stage { position: relative; padding: clamp(18px, 2.4vw, 30px); }
.dm-scene + .dm-scene { margin-top: 28px; }
.dm.is-js .dm-scene { display: none; margin: 0; }
.dm.is-js .dm-scene.is-on { display: block; }
.dm-scene-h { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 14px; margin-bottom: 18px; border-bottom: 1px solid var(--hair); }
.dm-scene-h h3 { font-size: 1rem; font-weight: 620; }
.dm-later { font-size: 0.75rem; font-weight: 560; padding: 4px 10px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); white-space: nowrap; }
.dm-working { display: none; align-items: center; gap: 6px; font-size: 0.875rem; color: var(--muted); }
.dm-working span { width: 6px; height: 6px; border-radius: 999px; background: var(--accent); animation: dm-dot 900ms var(--ease-soft) infinite; }
.dm-working span:nth-child(2) { animation-delay: 150ms; }
.dm-working span:nth-child(3) { animation-delay: 300ms; margin-right: 6px; }
.dm-scene.is-working .dm-working { display: flex; }
.dm.is-js .dm-scene:not(.is-ready) .dm-body { visibility: hidden; }
.dm-body > * + * { margin-top: 14px; }
.dm-scene.is-ready .dm-body > * { animation: dm-rise 520ms var(--ease-out) both; }
.dm-scene.is-ready .dm-body > :nth-child(2) { animation-delay: 80ms; }
.dm-scene.is-ready .dm-body > :nth-child(3) { animation-delay: 160ms; }
@keyframes dm-rise { from { opacity: 0; transform: translateY(10px); } }
@keyframes dm-dot { 50% { opacity: 0.25; } }
@media (prefers-reduced-motion: reduce) {
  .dm-scene.is-ready .dm-body > *, .dm-working span { animation: none; }
  .dm-act::after { transition: none; }
}

/* Scene contents */
.dm-q { justify-self: end; margin-left: auto; width: fit-content; max-width: 85%; padding: 10px 14px; border-radius: 14px 14px 4px 14px; background: #f1f1ef; font-size: 0.9375rem; }
.dm-a { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 12px; font-size: 0.9375rem; line-height: 1.55; }
.dm-vision { position: relative; width: 30px; height: 30px; border-radius: 999px; background: radial-gradient(circle at 35% 30%, #3f6970, #1d4b53 70%); }
.dm-vision::before, .dm-vision::after { content: ""; position: absolute; top: 9px; width: 4px; height: 10px; border-radius: 4px; background: #e9f1f2; }
.dm-vision::before { left: 9px; }
.dm-vision::after { right: 9px; }
.dm-vision-s { display: inline-block; width: 20px; height: 20px; vertical-align: -5px; margin-right: 8px; }
.dm-vision-s::before, .dm-vision-s::after { top: 6px; width: 3px; height: 7px; }
.dm-vision-s::before { left: 6px; }
.dm-vision-s::after { right: 6px; }
.dm-src { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.dm-src li { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 8px; border: 1px solid var(--hair-strong); font-size: 0.8125rem; color: var(--muted); }
.dm-src .icon { width: 14px; height: 14px; }
.dm-to { font-size: 0.875rem; color: var(--muted); }
.dm-list { list-style: none; margin: 0; padding: 0; border: 1px solid var(--hair); border-radius: 12px; }
.dm-list li { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 12px 14px; font-size: 0.9375rem; }
.dm-list li + li { border-top: 1px solid var(--hair); }
.dm-box { width: 16px; height: 16px; border-radius: 4px; border: 1.5px solid var(--edge); }
.dm-tag { font-size: 0.75rem; font-weight: 560; padding: 3px 9px; border-radius: 999px; background: #fdf3e2; color: #7a4b0c; }
.dm-foot { font-size: 0.875rem; color: var(--muted); }
.dm-task { border: 1px solid var(--hair); border-left: 3px solid var(--accent); border-radius: 12px; padding: 16px 18px; }
.dm-task-t { font-weight: 600; }
.dm-task dl { display: flex; flex-wrap: wrap; gap: 10px 28px; margin: 12px 0 0; font-size: 0.875rem; }
.dm-task dt { color: var(--muted); font-size: 0.75rem; }
.dm-task dd { margin: 2px 0 0; font-weight: 520; }
.dm-mail { padding: 14px 16px; border-radius: 12px; background: #f6f6f4; font-size: 0.9375rem; }
.dm-from { font-size: 0.875rem; color: var(--muted); margin-bottom: 6px; }
.dm-from b { color: var(--text); }
.dm-draft { padding: 14px 16px; border-radius: 12px; border: 1px dashed rgb(29 75 83 / 0.45); font-size: 0.9375rem; line-height: 1.55; }
.dm-draft-h { font-size: 0.8125rem; font-weight: 600; color: var(--accent); margin-bottom: 6px; }
.dm-draft-end { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 12px; }
.dm-send { display: inline-flex; align-items: center; height: 34px; padding: 0 14px; border-radius: 999px; background: #e3e5e3; color: #2f3332; font-size: 0.8125rem; font-weight: 560; }
.dm-never { font-size: 0.8125rem; color: var(--muted); }

@media (max-width: 900px) {
  .dm { grid-template-columns: minmax(0, 1fr); }
  .dm-acts { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 16px; }
}
@media (max-width: 560px) {
  .dm-acts { grid-template-columns: minmax(0, 1fr); }
  .dm-app { grid-template-columns: minmax(0, 1fr); }
  .dm-nav { display: none; }
}

/**
 * @file 85-tomorrow.css
 * @brief « Et demain, votre métier » (tomorrow.py, DIR-0173 point 6): trades set in large type between fine rules.
 * @remarks Type and rules only (DIR-0173 point 4: architecture and typography rather than generic gradients). The two
 *          trades offered today are links in full ink; the others are muted (#5b605f, 6.4:1 on the page) and say « not
 *          offered yet » in words, never by colour alone.
 */
.tm-list { list-style: none; margin: clamp(32px, 4vw, 56px) 0 0; padding: 0; border-top: 1px solid var(--hair-strong); }
.tm-row > a, .tm-row > div {
  display: grid; grid-template-columns: 3rem minmax(0, 1fr) auto 2.5rem; align-items: baseline; gap: 12px;
  padding: clamp(14px, 1.6vw, 22px) 0; border-bottom: 1px solid var(--hair-strong); color: var(--muted); text-decoration: none;
}
.tm-n { font-size: 0.8125rem; font-variant-numeric: tabular-nums; }
.tm-name { font-size: clamp(1.75rem, 1rem + 2.6vw, 3.25rem); font-weight: 380; letter-spacing: -0.03em; line-height: 1.1; }
.tm-state { font-size: 0.8125rem; text-align: right; }
.tm-row.is-now > a { color: var(--text); }
.tm-row.is-now .tm-state { color: var(--accent); font-weight: 560; }
.tm-arrow { justify-self: end; align-self: baseline; font-size: 0.8125rem; line-height: 1; }
/* The arrow sits on the state's baseline, its middle on the text's x-height (Téo: « les flèches doivent être au même niveau que le proposé »). */
.tm-arrow .icon { vertical-align: middle; }
.tm-arrow .icon { width: 22px; height: 22px; transition: transform 400ms var(--ease-out); }
.tm-row.is-now > a:hover .tm-arrow .icon, .tm-row.is-now > a:focus-visible .tm-arrow .icon { transform: translateX(6px); }
.tm-row.is-now > a:hover .tm-name { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.14em; }
.tm-row.is-now > a:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.tm-ask { margin-top: 24px; }
@media (max-width: 560px) {
  .tm-row > a, .tm-row > div { grid-template-columns: 2.2rem minmax(0, 1fr) 1.6rem; }
  .tm-state { grid-column: 2; grid-row: 2; text-align: left; }
}
@media (prefers-reduced-motion: reduce) { .tm-arrow .icon { transition: none; } }

/**
 * @file 90-drawkit.css
 * @brief The line drawings of the inner pages (drawkit.py, DIR-0174 point 2): the app's plan stacks as outlines with
 *        the module's icon on the front layer, on a stone card; traced when they scroll into view (55-drawkit.js).
 * @remarks The trace: outlines 900 ms, layer by layer 120 ms apart, the fills fade in from 500 ms, the icon draws last
 *          (from 700 ms). Hidden only under `.dk-wait`, which the script sets, so without script or under reduced
 *          motion the drawing is simply there. Strokes scale with the drawing.
 */
.dk-card {
  display: grid; place-items: center; border-radius: var(--radius); padding: clamp(24px, 4vw, 56px); min-height: clamp(260px, 30vw, 420px);
  background-color: #ebe8e1;
  background-image: linear-gradient(rgb(18 18 18 / 0.04) 1px, transparent 1px), linear-gradient(90deg, rgb(18 18 18 / 0.04) 1px, transparent 1px);
  background-size: 40px 40px;
}
.dk { width: min(100%, 340px); height: auto; overflow: visible; }
/* Widths in drawing units (100 grid; the icon group is scaled about 1.6 times): 1.4 px and 1.9 px at 340 px wide.
   Not vector-effect: non-scaling-stroke, which would measure the dashes of the trace in screen pixels and break it. */
.dk-l, .dk-i path, .dk-i circle { fill: none; stroke: var(--accent); stroke-width: 0.42; stroke-linejoin: round; stroke-linecap: round; }
.dk-i path, .dk-i circle { stroke-width: 0.36; }
.dk-t0 { fill: #ffffff; }
.dk-t1 { fill: #eef3f3; }
.dk-t2 { fill: #dde8e9; }
.scene-draw .dk-card { min-height: clamp(320px, 38vw, 560px); }
.scene-draw .dk { width: min(100%, 420px); }

.dk-wait .dk-l, .dk-wait .dk-i path, .dk-wait .dk-i circle { stroke-dasharray: 1; stroke-dashoffset: 1; }
.dk-wait .dk-t { opacity: 0; }
.dk-wait.is-drawn .dk-l { animation: dk-trace 900ms var(--ease-in-out) forwards; }
.dk-wait.is-drawn .dk-l:nth-of-type(4) { animation-delay: 120ms; }
.dk-wait.is-drawn .dk-l:nth-of-type(6) { animation-delay: 240ms; }
.dk-wait.is-drawn .dk-t { animation: dk-fill 500ms var(--ease-soft) 500ms forwards; }
.dk-wait.is-drawn .dk-i path, .dk-wait.is-drawn .dk-i circle { animation: dk-trace 700ms var(--ease-in-out) 700ms forwards; }
@keyframes dk-trace { to { stroke-dashoffset: 0; } }
@keyframes dk-fill { to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .dk-wait .dk-l, .dk-wait .dk-i path, .dk-wait .dk-i circle { stroke-dasharray: none; stroke-dashoffset: 0; }
  .dk-wait .dk-t { opacity: 1; }
}
.pf-photo .dk-card, .feature-pic .dk-card { height: 100%; min-height: 0; }
.feature-pic .dk-card { aspect-ratio: 16 / 10; }

/**
 * @file 95-home12.css
 * @brief The light, minimal home of pass 12 (home12.py): the centred opening, the simulated app, the logo tiles, Vision
 *        alive, hosting as one line, the two ways in; and, for every page, the image motions Téo asked for: a zoom
 *        when an image is focused or hovered, and a de-zoom with a rise while it scrolls into view.
 * @remarks Brand on white: ink #121212, the logo teal #1d4b53 for the soft half of headlines and active states, the
 *          cube's #86aeb4 only as a tint. Scroll motions use scroll-driven animations (compositor only, no script);
 *          browsers without them, and reduced motion, show the images still. Contrast: muted text #5b605f is 6.4:1.
 */

/* ---------- Spacing: one rhythm for the page ---------- */
.section-s { padding-block: clamp(40px, 5vw, 72px); }
.h12 + .section { padding-top: clamp(56px, 7vw, 112px); }

/* ---------- Opening ---------- */
.h12 { padding-top: calc(var(--header-h) + clamp(32px, 5vw, 72px)); background: var(--bg); }
.h12-c { display: grid; justify-items: center; text-align: center; gap: 22px; max-width: 54rem; margin-inline: auto; }
.h12-pill {
  display: inline-flex; align-items: center; gap: 10px; padding: 6px 14px 6px 8px; border-radius: 999px;
  border: 1px solid var(--hair-strong); background: var(--surface); font-size: 0.8125rem; font-weight: 520; color: var(--text);
}
.h12-pl { display: inline-flex; }
.h12-pl img { width: 18px; height: 18px; border-radius: 5px; background: #fff; box-shadow: 0 0 0 1.5px var(--surface); object-fit: contain; }
.h12-pl img + img { margin-left: -5px; }
.h12-h1 { font-size: clamp(2.6rem, 1.3rem + 4.6vw, 5.5rem); line-height: 1.02; letter-spacing: -0.04em; font-weight: 560; text-wrap: balance; }
.h12-h1 .soft { color: var(--accent); }
.h12-h1 .w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: 0.07em; margin-bottom: -0.07em; }
.h12-h1 .w > span { display: inline-block; }
.h12-lead { font-size: var(--f-lead); line-height: 1.55; color: var(--muted); max-width: 38rem; }
.h12-actions { justify-content: center; }
.h12-quiet { font-size: 0.8125rem; color: var(--muted); }
.h12-stage { margin-top: clamp(36px, 5vw, 64px); }
@media (prefers-reduced-motion: no-preference) {
  .h12-h1 .w > span { animation: rise 800ms var(--ease-out-strong) both; }
  .h12-h1 .w:nth-child(2) > span { animation-delay: 40ms; }
  .h12-h1 .w:nth-child(3) > span { animation-delay: 80ms; }
  .h12-h1 .soft .w > span { animation-delay: 140ms; }
  .h12 .fade-1 { animation: appear-clip 600ms var(--ease-out-strong) 200ms both; }
  .h12 .fade-2 { animation: appear-clip 600ms var(--ease-out-strong) 280ms both; }
}

/* ---------- The simulated app ---------- */
.as { margin: 0; }
.as figcaption { text-align: center; margin-top: 14px; color: var(--muted); }
.as-win {
  border-radius: 18px; overflow: hidden; background: var(--surface); border: 1px solid var(--hair);
  box-shadow: 0 1px 2px rgb(18 18 18 / 0.05), 0 32px 80px -24px rgb(18 18 18 / 0.18); text-align: left; color: var(--text);
}
.as-bar { display: flex; gap: 7px; align-items: center; height: 36px; padding: 0 14px; background: #f6f6f4; border-bottom: 1px solid var(--hair); }
.as-bar span { width: 10px; height: 10px; border-radius: 999px; background: #dcdedc; }
.as-app { display: grid; grid-template-columns: 13.5rem minmax(0, 1fr); min-height: clamp(380px, 38vw, 560px); }
.as-side { display: flex; flex-direction: column; gap: 6px; padding: 16px 12px; background: #f8f8f6; border-right: 1px solid var(--hair); font-size: 0.875rem; }
.as-firm { display: flex; align-items: center; gap: 8px; font-weight: 620; padding: 4px 8px 12px; }
.as-side ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.as-side li { display: flex; align-items: center; gap: 10px; padding: 7px 8px; border-radius: 9px; color: #2f3332; }
.as-side li.is-on { background: #ecefee; color: var(--text); font-weight: 560; }
.as-side li b { margin-left: auto; min-width: 20px; height: 20px; border-radius: 999px; background: var(--ink); color: #fff; font-size: 0.6875rem; display: grid; place-items: center; }
.as-vision-row { display: flex; align-items: center; gap: 10px; padding: 7px 8px; margin-top: 4px; color: var(--accent); font-weight: 600; }
.as-me { margin-top: auto; display: flex; align-items: center; gap: 10px; padding: 8px; color: #2f3332; }
.as-av { width: 26px; height: 26px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); display: grid; place-items: center; font-weight: 640; font-size: 0.75rem; }
.ico { width: 18px; height: 18px; flex: none; }
.ico-s { width: 15px; height: 15px; }
.as-main { padding: 14px clamp(16px, 2.4vw, 32px) 24px; display: grid; align-content: start; gap: 18px; }
.as-top { display: flex; justify-content: center; }
.as-search { display: inline-flex; align-items: center; gap: 8px; width: min(100%, 26rem); height: 34px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--hair-strong); color: var(--muted); font-size: 0.8125rem; }
.as-hello { display: flex; align-items: center; justify-content: center; gap: 14px; padding-top: 6px; }
.as-hello h3 { font-size: clamp(1.25rem, 1rem + 1vw, 1.75rem); font-weight: 560; letter-spacing: -0.02em; }
.as-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 18px; }
.as-chat { display: grid; gap: 12px; align-content: start; }
.as-q { justify-self: end; max-width: 88%; padding: 10px 14px; border-radius: 14px 14px 4px 14px; background: #f1f2f1; font-size: 0.875rem; }
.as-a { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 10px; font-size: 0.875rem; line-height: 1.55; }
.as-srcs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.as-src { display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px; border-radius: 7px; border: 1px solid var(--hair-strong); font-size: 0.75rem; color: var(--muted); }
.as-draft { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 10px; padding: 10px 12px; border-radius: 12px; border: 1px dashed rgb(29 75 83 / 0.4); font-size: 0.8125rem; color: var(--accent); font-weight: 560; }
.as-btn { padding: 5px 12px; border-radius: 999px; background: var(--ink); color: #fff; font-size: 0.75rem; }
.as-today { border: 1px solid var(--hair); border-radius: 14px; padding: 12px; align-self: start; }
.as-h { font-size: 0.75rem; font-weight: 600; color: var(--muted); padding: 0 4px 8px; }
.as-today ul { list-style: none; margin: 0; padding: 0; display: grid; }
.as-today li { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; gap: 10px; align-items: start; padding: 9px 4px; font-size: 0.8125rem; }
.as-today li + li { border-top: 1px solid var(--hair); }
.as-r { display: grid; gap: 2px; min-width: 0; }
.as-r b { font-weight: 560; }
.as-r span { color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.as-today time { color: var(--muted); font-size: 0.75rem; }
@media (max-width: 900px) {
  .as-app { grid-template-columns: minmax(0, 1fr); }
  .as-side { display: none; }
  .as-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Vision, the live sphere ---------- */
.vz { display: block; flex: none; overflow: visible; }
.vz .vz-eyes { transition: transform 260ms var(--ease-out); transform-box: view-box; }
.vz .vz-eye { transform-box: fill-box; transform-origin: center; transition: transform 90ms ease, opacity 220ms ease; }
.vz.is-blink .vz-eye { transform: scaleY(0.12); }
.vz .vz-smile { opacity: 0; transition: opacity 220ms ease; }
/* Hover: the app's « happy » state, the eyes give way to the smile. Press: a short bounce. */
.vz.is-happy .vz-eye { opacity: 0; }
.vz.is-happy .vz-smile { opacity: 1; }
.vz .vz-body { transform-box: fill-box; transform-origin: 50% 100%; }
.vz.is-bounce .vz-body { animation: vz-bounce 620ms cubic-bezier(0.34, 1.56, 0.64, 1); }
@keyframes vz-bounce { 0% { transform: scale(1, 1); } 25% { transform: scale(1.08, 0.9); } 55% { transform: scale(0.95, 1.06) translateY(-6px); } 100% { transform: scale(1, 1); } }
.v12-orb .vz-l, .h12 .vz, .fd-hello .vz { cursor: pointer; }
.v12-in { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.v12-orb { position: relative; display: grid; place-items: center; aspect-ratio: 1; max-width: 420px; width: 100%; justify-self: center; }
.v12-orb .vz-l { width: 52%; height: auto; position: relative; z-index: 1; filter: drop-shadow(0 24px 40px rgb(29 75 83 / 0.25)); }
.v12-ring { position: absolute; inset: 8%; border-radius: 999px; border: 1px solid rgb(29 75 83 / 0.16); }
.v12-ring.r2 { inset: 0; border-color: rgb(29 75 83 / 0.08); }
@media (prefers-reduced-motion: no-preference) {
  .v12-orb .vz-l { animation: vz-float 6s var(--ease-in-out) infinite alternate; }
  .v12-ring { animation: vz-ring 6s var(--ease-in-out) infinite alternate; }
}
@keyframes vz-float { to { transform: translateY(-10px); } }
@keyframes vz-ring { to { transform: scale(1.03); opacity: 0.6; } }
.v12-text { display: grid; gap: 18px; justify-items: start; }
.v12-pts { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 0; width: 100%; border-top: 1px solid var(--hair-strong); }
.v12-pts li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--hair-strong); }
.v12-pts .ico { color: var(--accent); width: 22px; height: 22px; margin-top: 2px; }
.v12-pts h3 { font-size: 1.0625rem; font-weight: 600; }
.v12-pts p { color: var(--muted); margin-top: 2px; }
@media (max-width: 900px) { .v12-in { grid-template-columns: minmax(0, 1fr); } .v12-orb { max-width: 280px; } }

/* ---------- Tools: large tiles, logo inside ---------- */
.tiles-g { margin-top: clamp(32px, 4vw, 48px); }
.tiles-h { font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin-bottom: 14px; }
.tiles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 12px 10px; }
.tile { display: grid; justify-items: center; gap: 10px; }
.tile-box {
  width: 100%; aspect-ratio: 1; display: grid; place-items: center; border-radius: 22px; background: var(--surface);
  border: 1px solid var(--hair); box-shadow: 0 1px 2px rgb(18 18 18 / 0.04);
  transition: transform 400ms var(--ease-out), box-shadow 400ms var(--ease-out), border-color 400ms var(--ease-out);
}
.tile-box img { width: 40%; height: 40%; object-fit: contain; }
.tile:hover .tile-box { box-shadow: 0 12px 32px -12px rgb(18 18 18 / 0.18); border-color: var(--hair-strong); }
.tile-name { font-size: 0.8125rem; line-height: 1.25; color: var(--muted); text-align: center; }
/* Phones: four compact tiles per row, so the wall stays a short read (it ran to about 19 rows at two per row). */
@media (max-width: 600px) {
  .tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px 8px; }
  .tile { gap: 6px; }
  .tile-box { border-radius: 16px; }
  .tile-box img { width: 46%; height: 46%; }
  .tile-name { font-size: 0.75rem; }
}
.tiles-note { margin-top: 24px; text-align: center; color: var(--muted); }

/* ---------- Hosting: one line, no box ---------- */
.host12 { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: clamp(20px, 3vw, 40px); border-block: 1px solid var(--hair-strong); padding-block: 22px; }
.host12-h { font-size: 1rem; font-weight: 600; white-space: nowrap; }
.host12-l { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 14px 32px; }
.host12-l li { display: flex; align-items: center; gap: 10px; font-size: 0.875rem; }
.host12-l li > span { display: grid; }
.host12-l li > span > span { color: var(--muted); font-size: 0.8125rem; }
.host12-l .flag, .host12-l .ico { width: 20px; height: 20px; color: var(--accent); }
@media (max-width: 900px) { .host12 { grid-template-columns: minmax(0, 1fr); } }

/* ---------- The two ways in ---------- */
.ways { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: clamp(28px, 4vw, 48px); }
.way { display: grid; gap: 12px; justify-items: start; padding: clamp(24px, 3vw, 40px); border-radius: var(--radius); border: 1px solid var(--hair-strong); background: var(--surface); }
.way p { color: var(--muted); }
@media (max-width: 760px) { .ways { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Image motions, every page (Téo: zoom on focus, de-zoom and rise on scroll) ---------- */
.stage-photo img, .shot-card img, .pg-card img, .panel img, .feature-pic img, .win-card img {
  transition: transform 900ms var(--ease-out);
}
.pg-card:hover img, .pg-card:focus-visible img, .feature:hover .feature-pic img, .shot-card:hover img, .feature-pic:focus-within img {
  transform: scale(1.04);
}
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .stage-photo picture, .pg-card picture, .shot-card-in, .feature-pic .dk-card > svg {
      animation: px-dezoom linear both; animation-timeline: view(); animation-range: entry 0% cover 45%;
    }
    .px-rise { animation: px-rise linear both; animation-timeline: view(); animation-range: entry 0% cover 35%; }
  }
}
@keyframes px-dezoom { from { scale: 1.14; translate: 0 36px; } to { scale: 1; translate: 0 0; } }
@keyframes px-rise { from { scale: 0.94; translate: 0 48px; } to { scale: 1; translate: 0 0; } }

/**
 * @file 96-home13.css
 * @brief The home of pass 13 (home13.py): the full-bleed opening with its pager pill, the six logo cells, Arvelle's
 *        mark and app, the feature cards and the security band.
 * @remarks Motion uses transform and opacity only (no layout animation); every animation and timer stops under
 *          reduced motion (here and in 65-home13.js). Text over photographs keeps a 4.5 to 1 contrast through the shade.
 */

/* ---------- Opening: three photographs in turn, one H1, a pager pill ---------- */
.h13 { position: relative; min-height: min(92vh, 900px); display: grid; place-items: center; overflow: hidden; color: #fff; isolation: isolate; }
.h13-media, .h13-s, .h13-shade { position: absolute; inset: 0; }
.h13-media { z-index: -2; inset: 0 0 -18% 0; will-change: transform; }
.h13-c { will-change: transform, opacity; }
.h13-s { opacity: 0; transition: opacity 1400ms var(--ease-soft); }
.h13-s.is-on { opacity: 1; }
.h13-s .stage-photo, .h13-s picture, .h13-s img { position: absolute; inset: 0; width: 100%; height: 100%; }
.h13-s img { object-fit: cover; transform: scale(1.06); }
.h13-s.is-on img { transform: scale(1); transition: transform 9000ms cubic-bezier(0.2, 0, 0.2, 1); }
.h13-shade { z-index: -1; background: radial-gradient(70% 60% at 50% 45%, rgb(10 18 20 / 0.52), rgb(10 18 20 / 0.30) 70%), linear-gradient(180deg, rgb(10 18 20 / 0.30), rgb(10 18 20 / 0.10) 40%, rgb(10 18 20 / 0.55)); }
.h13-c { width: min(100% - 2 * var(--gutter), 980px); text-align: center; display: grid; justify-items: center; gap: 22px; padding-block: clamp(96px, 14vh, 160px); }
.h13-eye { font-size: 0.8125rem; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 560; color: rgb(255 255 255 / 0.86); }
.h13-ts { display: grid; }
.h13-t { grid-area: 1 / 1; margin: 0; font-size: clamp(2.5rem, 1.4rem + 4.4vw, 5rem); line-height: 1.04; letter-spacing: -0.035em; font-weight: 520;
  text-wrap: balance; opacity: 0; transform: translateY(18px); filter: blur(6px); transition: opacity 900ms var(--ease-out), transform 900ms var(--ease-out), filter 900ms var(--ease-out); }
.h13-t.is-on { opacity: 1; transform: none; filter: none; }
.h13-lead { max-width: 680px; font-size: var(--f-lead); color: rgb(255 255 255 / 0.9); text-wrap: pretty; }
.h13-actions { justify-content: center; }
.h13 .btn-ink, .h13 .actions .btn:first-child { background: #fff; color: #121212; border-color: #fff; }
.h13-line { padding: 0 24px; background: rgb(255 255 255 / 0.14); color: #fff; border: 1px solid rgb(255 255 255 / 0.55); backdrop-filter: blur(10px); }
.h13-line:hover { background: rgb(255 255 255 / 0.22); }
.h13-pager { position: absolute; bottom: 28px; left: 50%; transform: translateX(-50%); display: flex; gap: 8px; align-items: center;
  padding: 4px 10px; border-radius: 999px; background: rgb(20 22 21 / 0.36); backdrop-filter: blur(10px); }
.h13-dot { display: grid; place-items: center; width: 24px; height: 24px; border: 0; padding: 0; background: none; cursor: pointer; transition: width 500ms var(--ease-out); }
.h13-dot::before { content: ""; width: 8px; height: 8px; border-radius: 999px; background: rgb(255 255 255 / 0.6); transition: width 500ms var(--ease-out), background 300ms; }
.h13-dot.is-on { width: 48px; }
.h13-dot.is-on::before { width: 40px; background: #fff; }
.h13-dot:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

/* ---------- Tools: twelve logos, still, in a centred bordered grid ---------- */
.lg13-head { display: grid; justify-items: center; text-align: center; gap: 14px; max-width: 640px; margin: 0 auto; }
.lg13-h { font-size: var(--f-h2); font-weight: 480; letter-spacing: -0.03em; line-height: 1.08; }
.lg13-head p { color: var(--muted); font-size: var(--f-lead); }
.lg13-row { list-style: none; margin: clamp(40px, 5vw, 64px) auto 0; padding: 0; max-width: 1120px; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr));
  border-top: 1px solid var(--hair-strong); border-left: 1px solid var(--hair-strong); border-radius: 16px; overflow: hidden; background: var(--surface); }
.lg13-cell { display: grid; place-items: center; height: clamp(104px, 10vw, 136px); border-right: 1px solid var(--hair-strong); border-bottom: 1px solid var(--hair-strong); }
.lg13-cell:nth-child(6) { border-top-right-radius: 16px; }
.lg13-cell img { width: auto; max-width: 58%; height: 40px; object-fit: contain; }
.lg13-note { margin-top: 18px; text-align: center; color: var(--muted); }
@media (max-width: 900px) { .lg13-row { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 480px) { .lg13-cell { height: 92px; } .lg13-cell img { height: 32px; } }

/* ---------- Arvelle: the mark ---------- */
.fd-head { display: grid; justify-items: center; text-align: center; gap: clamp(18px, 2vw, 26px); max-width: 780px; margin: 0 auto clamp(48px, 6vw, 88px); }
.fd-head .lead { max-width: 640px; }
.fd-how { color: var(--muted); font-size: 0.9375rem; padding: 8px 16px; border-radius: 999px; background: var(--surface-2); }
.av-lockup { display: flex; align-items: center; gap: 16px; padding: 18px 24px 18px 18px; border: 1px solid var(--hair-strong); border-radius: 20px; background: var(--surface); }
.av-name { font-family: var(--f-serif); font-size: 1.75rem; letter-spacing: -0.01em; line-height: 1; color: #15262a; }
.av-sub { font-size: 0.75rem; letter-spacing: 0.16em; text-transform: uppercase; color: #8a6d3f; margin-top: 6px; }
.av-kind { color: var(--muted); }
.av-mark .av-a, .av-mark .av-l { stroke-dasharray: 1; stroke-dashoffset: 0; }
@media (prefers-reduced-motion: no-preference) {
  [data-av].is-armed:not(.is-drawn) .av-a, [data-av].is-armed:not(.is-drawn) .av-l { stroke-dashoffset: 1; }
  [data-av].is-drawn .av-a { transition: stroke-dashoffset 1100ms cubic-bezier(0.65, 0, 0.35, 1); }
  [data-av].is-drawn .av-l { transition: stroke-dashoffset 700ms var(--ease-out) 900ms; }
  [data-av].is-drawn .av-d { animation: av-dot 500ms var(--ease-out) 1500ms both; }
  [data-av].is-drawn .av-name, [data-av].is-drawn .av-sub { animation: av-rise 800ms var(--ease-out) 600ms both; }
}
@keyframes av-dot { 0% { r: 0; } 60% { r: 4.5; } 100% { r: 3; } }
@keyframes av-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.av-mini { flex: none; }

/* ---------- Arvelle: the app ---------- */
.fd-win { border: 1px solid var(--hair-strong); border-radius: 18px; overflow: hidden; background: var(--surface); box-shadow: var(--shadow-2); }
.fd-bar { display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px; background: var(--surface-2); border-bottom: 1px solid var(--hair); font-size: 0.8125rem; }
.fd-bar span { width: 10px; height: 10px; border-radius: 50%; background: rgb(18 18 18 / 0.14); }
.fd-bar b { margin-left: 10px; font-weight: 560; }
.fd-app { display: grid; grid-template-columns: 220px minmax(0, 1fr); min-height: 560px; }
.fd-side { display: flex; flex-direction: column; gap: 10px; padding: 16px 12px; border-right: 1px solid var(--hair); background: #fbfbfa; }
.fd-firm { display: flex; align-items: center; gap: 10px; font-weight: 600; padding: 4px 8px 10px; }
.fd-tabs { display: grid; gap: 2px; }
.fd-tab { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; border: 0; border-radius: 10px; background: none; color: var(--muted);
  font: inherit; font-size: 0.9375rem; text-align: left; cursor: pointer; transition: background var(--t-hover), color var(--t-hover); }
.fd-tab .ico, .fd-tab .vz { width: 18px; height: 18px; flex: none; }
.fd-tab:hover { background: var(--surface-2); color: var(--text); }
.fd-tab.is-on { background: var(--accent-soft); color: var(--accent); font-weight: 560; }
.fd-tab:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.fd-me { margin-top: auto; display: flex; align-items: center; gap: 10px; font-size: 0.875rem; padding: 8px; }
.fd-av { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: linear-gradient(135deg, #2c5a62, #15262a); color: #fff; font-weight: 600; font-size: 1.125rem; }
.fd-av.s { width: 30px; height: 30px; font-size: 0.75rem; }
.fd-main { position: relative; padding: clamp(18px, 2.4vw, 32px); min-width: 0; }
.fd-panel { animation: fd-in 500ms var(--ease-out) both; }
.fd-panel[hidden] { display: none; }
@keyframes fd-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.fd-hello { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; }
.fd-hello h4 { font-size: 1.5rem; font-weight: 500; letter-spacing: -0.02em; }
.fd-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 20px; }
.fd-kpi { border: 1px solid var(--hair); border-radius: 14px; padding: 16px; display: grid; gap: 4px; }
.fd-kpi b { font-size: 1.75rem; font-weight: 520; letter-spacing: -0.02em; color: var(--accent); font-variant-numeric: tabular-nums; }
.fd-kpi span { color: var(--muted); font-size: 0.8125rem; }
.fd-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--hair); }
.fd-list li { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px 4px; border-bottom: 1px solid var(--hair); }
.fd-list .ico { width: 18px; height: 18px; color: var(--accent); }
.fd-r { display: grid; }
.fd-r span, .fd-list time { color: var(--muted); font-size: 0.8125rem; }
/* Mail: unread rows carry a tinted background, never a dot (DIR-0180). */
.fd-mailbox { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.4fr); gap: 16px; }
.fd-inbox { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; align-content: start; }
.fd-mail { width: 100%; text-align: left; display: grid; gap: 2px; padding: 12px 14px; border: 1px solid transparent; border-radius: 12px; background: none; font: inherit; cursor: pointer; color: var(--muted); }
.fd-mail.is-unread { background: var(--accent-soft); color: var(--text); }
.fd-mail.is-unread b, .fd-mail.is-unread .fd-ms { font-weight: 640; }
.fd-mail.is-sel { border-color: var(--accent); }
.fd-mail:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.fd-mw { display: flex; justify-content: space-between; gap: 8px; }
.fd-mw time { font-size: 0.75rem; }
.fd-ms { font-size: 0.875rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fd-read { display: none; }
.fd-read.is-on { display: block; animation: fd-in 400ms var(--ease-out) both; }
.fd-read h4 { font-size: 1.125rem; font-weight: 560; }
.fd-from { color: var(--muted); font-size: 0.8125rem; margin: 4px 0 12px; }
.fd-draft { margin-top: 16px; padding: 14px 16px; border: 1px dashed rgb(29 75 83 / 0.45); border-radius: 12px; background: #f7fafa; }
.fd-dh { display: flex; align-items: center; gap: 8px; font-weight: 560; color: var(--accent); font-size: 0.875rem; margin-bottom: 6px; }
.fd-btn { display: inline-block; margin-top: 12px; padding: 7px 14px; border-radius: 999px; background: var(--ink); color: #fff; font-size: 0.8125rem; }
.fd-table { overflow-x: auto; }
.fd-table table { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
.fd-table th, .fd-table td { text-align: left; padding: 12px 10px; border-bottom: 1px solid var(--hair); white-space: nowrap; }
.fd-table thead th { color: var(--muted); font-weight: 500; font-size: 0.8125rem; }
.fd-table tbody th { font-weight: 560; }
.fd-pill { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 0.75rem; font-weight: 560; }
.fd-pill.is-ok { background: #e7f2ec; color: #1e5a3a; }
.fd-pill.is-warn { background: #fbefdc; color: #7a4a06; }
.fd-pill.is-info { background: var(--accent-soft); color: var(--accent); }
.fd-dhd { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.fd-dhd h4 { font-size: 1.125rem; font-weight: 560; }
.fd-dhd span { color: var(--muted); font-size: 0.875rem; }
.fd-prog { height: 6px; margin: 12px 0 16px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.fd-prog span { display: block; width: 0; height: 100%; border-radius: inherit; background: var(--accent); transition: width 1200ms var(--ease-out); }
.fd-prog span.is-full { width: 100%; }
.fd-docs ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 16px; }
.fd-docs li { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--hair); font-size: 0.875rem; }
.fd-docs li .ico { width: 16px; height: 16px; color: #1e5a3a; }
.fd-docs li.is-miss { border-color: #e9c98f; background: #fdf7ec; }
.fd-docs li.is-miss .ico { color: #7a4a06; }
.fd-docs em { margin-left: auto; font-style: normal; font-size: 0.75rem; color: #7a4a06; font-weight: 560; }
.fd-docs li.is-asked em { color: var(--accent); }
.fd-ask { margin-top: 16px; padding: 10px 18px; border-radius: 999px; border: 0; background: var(--ink); color: #fff; font: inherit; font-size: 0.875rem; cursor: pointer; }
.fd-ask.is-done { background: var(--accent-soft); color: var(--accent); cursor: default; }
.fd-ask:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.fd-kanban { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.fd-col { background: var(--surface-2); border-radius: 14px; padding: 12px; }
.fd-col h4 { font-size: 0.8125rem; font-weight: 600; color: var(--muted); margin-bottom: 10px; display: flex; justify-content: space-between; }
.fd-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.fd-col li { background: var(--surface); border: 1px solid var(--hair); border-radius: 10px; padding: 12px; display: grid; gap: 8px; font-size: 0.875rem; }
.fd-col li span { display: flex; justify-content: space-between; color: var(--muted); font-size: 0.75rem; }
.fd-col li i { font-style: normal; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); font-weight: 600; font-size: 0.75rem; }
.fd-call { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 16px; }
.fd-stage { position: relative; border-radius: 16px; background: linear-gradient(160deg, #1d3236, #0f1a1c); padding: 16px; display: grid; gap: 14px; color: #fff; }
.fd-live { display: flex; align-items: center; gap: 8px; font-size: 0.8125rem; color: rgb(255 255 255 / 0.85); }
.fd-live span { width: 8px; height: 8px; border-radius: 50%; background: #ff5a4f; }
.fd-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.fd-tile { aspect-ratio: 4 / 3; border-radius: 12px; background: rgb(255 255 255 / 0.06); display: grid; place-items: center; position: relative; }
.fd-tile .fd-tn { position: absolute; left: 10px; bottom: 8px; font-size: 0.75rem; color: rgb(255 255 255 / 0.85); }
.fd-tile:first-child .fd-av { box-shadow: 0 0 0 0 rgb(134 174 180 / 0.6); }
.fd-ctl { display: flex; justify-content: center; gap: 10px; }
.fd-ctl span { width: 38px; height: 38px; border-radius: 50%; background: rgb(255 255 255 / 0.14); }
.fd-ctl span.is-end { background: #e5484d; }
.fd-notes { border: 1px solid var(--hair); border-radius: 16px; padding: 16px; }
.fd-notes h4 { display: flex; align-items: center; gap: 8px; font-size: 0.9375rem; font-weight: 600; color: var(--accent); }
.fd-notes h5 { font-size: 0.8125rem; font-weight: 600; color: var(--muted); margin: 14px 0 8px; }
.fd-lines, .fd-next { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 8px; font-size: 0.875rem; }
.fd-lines li { padding-left: 12px; border-left: 2px solid var(--accent-soft); }
.fd-next li { display: flex; gap: 8px; align-items: center; }
.fd-next .ico { width: 16px; height: 16px; color: var(--accent); }
.fd-vision { display: grid; gap: 18px; }
.fd-ans { display: none; }
.fd-ans.is-on { display: grid; gap: 12px; animation: fd-in 400ms var(--ease-out) both; }
.fd-q { justify-self: end; max-width: 80%; padding: 10px 14px; border-radius: 14px; background: var(--surface-2); }
.fd-a { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 12px; }
.fd-srcs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.fd-srcs span { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border: 1px solid var(--hair-strong); border-radius: 8px; font-size: 0.75rem; color: var(--muted); }
.fd-srcs .ico { width: 14px; height: 14px; }
.fd-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.fd-chip { padding: 9px 14px; border: 1px solid var(--hair-strong); border-radius: 999px; background: var(--surface); font: inherit; font-size: 0.875rem; cursor: pointer; transition: border-color var(--t-hover), background var(--t-hover); }
.fd-chip:hover { border-color: var(--accent); }
.fd-chip.is-on { background: var(--accent); border-color: var(--accent); color: #fff; }
.fd-chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.fd-main .vz-s { width: 36px; height: 36px; }
@media (prefers-reduced-motion: no-preference) {
  .fd-panel.is-on .fd-lines li { animation: fd-in 600ms var(--ease-out) both; }
  .fd-panel.is-on .fd-lines li:nth-child(2) { animation-delay: 900ms; }
  .fd-panel.is-on .fd-lines li:nth-child(3) { animation-delay: 1800ms; }
  .fd-panel.is-on .fd-tile:first-child .fd-av { animation: fd-speak 1600ms ease-in-out infinite; }
  .fd-live span { animation: fd-blink 1400ms ease-in-out infinite; }
}
@keyframes fd-speak { 50% { box-shadow: 0 0 0 10px rgb(134 174 180 / 0); } 0% { box-shadow: 0 0 0 0 rgb(134 174 180 / 0.6); } }
@keyframes fd-blink { 50% { opacity: 0.35; } }
@media (max-width: 900px) {
  .fd-app { grid-template-columns: minmax(0, 1fr); }
  .fd-side { border-right: 0; border-bottom: 1px solid var(--hair); }
  .fd-firm, .fd-me { display: none; }
  .fd-tabs { display: flex; overflow-x: auto; gap: 4px; scrollbar-width: none; }
  .fd-tab { width: auto; white-space: nowrap; }
  .fd-mailbox, .fd-call { grid-template-columns: minmax(0, 1fr); }
  .fd-kpi { padding: 10px; }
  .fd-kpi b { font-size: 1.25rem; }
  .fd-kpi span { font-size: 0.75rem; }
  .fd-kanban { grid-template-columns: minmax(0, 1fr); }
  .fd-docs ul { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Features: image cards ---------- */
.ft-grid { list-style: none; margin: clamp(32px, 4vw, 56px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2vw, 24px); }
.ft-card a { display: grid; height: 100%; border: 1px solid var(--hair); border-radius: 18px; overflow: hidden; background: var(--surface); color: inherit; text-decoration: none;
  transition: box-shadow 500ms var(--ease-out); }
.ft-img { position: relative; aspect-ratio: 16 / 10; overflow: hidden; isolation: isolate; background: var(--surface-2); }
.ft-img .stage-photo { position: absolute; inset: -9% 0; will-change: transform; }
.ft-img picture, .ft-img img { position: absolute; inset: 0; width: 100%; height: 100%; }
.ft-img img { object-fit: cover; transition: transform 1200ms var(--ease-out); }
.ft-tx { padding: 20px 22px 22px; display: grid; gap: 8px; align-content: start; }
.ft-tx h3 { display: flex; align-items: center; gap: 10px; font-size: 1.125rem; font-weight: 560; }
.ft-tx h3 .ico, .ft-tx h3 .vz { width: 20px; height: 20px; color: var(--accent); flex: none; }
.ft-tx p { color: var(--muted); font-size: 0.9375rem; }
.ft-more { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; font-size: 0.875rem; font-weight: 560; color: var(--accent); }
.ft-more .icon { width: 16px; height: 16px; transition: transform 400ms var(--ease-out); }
.ft-card a:hover { box-shadow: var(--shadow-2); }
.ft-card a:hover .ft-img img { transform: scale(1.05); }
.ft-card a:hover .ft-more .icon { transform: translateX(4px); }
.ft-card a:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
@media (max-width: 1000px) { .ft-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .ft-grid { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Security: the quiet band, then six rules ---------- */
.sc-band { position: relative; height: clamp(320px, 52vw, 620px); overflow: hidden; display: grid; place-items: center; }
.sc-band .stage-photo { position: absolute; inset: -14% 0; will-change: transform; }
.sc-band picture, .sc-band img { position: absolute; inset: 0; width: 100%; height: 100%; }
.sc-band img { object-fit: cover; }
.sc-band::after { content: ""; position: absolute; inset: 0; background: rgb(10 18 20 / 0.38); }
.sc-line { position: relative; z-index: 1; color: #fff; text-align: center; font-size: clamp(1.75rem, 1rem + 3vw, 3.25rem); font-weight: 480; letter-spacing: -0.03em;
  max-width: 16ch; line-height: 1.1; text-wrap: balance; }
.sc-grid { list-style: none; margin: clamp(32px, 4vw, 56px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0;
  border-top: 1px solid var(--hair-strong); }
.sc-grid li { padding: 26px 24px 28px 0; border-bottom: 1px solid var(--hair-strong); display: grid; gap: 8px; align-content: start; }
.sc-grid li .ico { width: 24px; height: 24px; color: var(--accent); }
.sc-grid h3 { font-size: 1.0625rem; font-weight: 600; }
.sc-grid p { color: var(--muted); font-size: 0.9375rem; }
.sc-link { margin-top: 28px; }
@media (max-width: 900px) { .sc-grid { grid-template-columns: minmax(0, 1fr); } }
@media (prefers-reduced-motion: reduce) {
  .h13-s, .h13-t, .ft-img img, .ft-card a, .fd-panel, .fd-read.is-on, .fd-ans.is-on { transition: none; animation: none; }
  .h13-s.is-on img { transform: none; transition: none; }
}

/**
 * @file 97-design14.css
 * @brief Pass 14 (Téo, 2026-11-12: « reprends le design minimaliste moderne simple de la page de login et signup [...]
 *        le site fait trop IA [...] soft liquid glass shadows moderne smooth [...] mets les animations de traits [...]
 *        améliore le contact effect »).
 * @remarks The language of the app's sign in page (prototypes/sign-in.html): warm off-white, calm type, one glass card
 *          with a hairline and a soft shadow, pill buttons with the arrow in a circle. Applied here as tokens and a few
 *          overrides, so every page shares it: glass surfaces, quieter headings, buttons with a light that follows the
 *          pointer, icons that draw their strokes when they arrive. Transforms and opacity only; reduced motion keeps
 *          everything still.
 */
:root {
  --glass-fill: linear-gradient(180deg, rgb(255 255 255 / 0.82), rgb(255 255 255 / 0.62));
  --glass-line: rgb(255 255 255 / 0.7);
  --glass-hair: rgb(18 18 18 / 0.07);
  --glass-shadow: inset 0 1px 0 rgb(255 255 255 / 0.9), 0 1px 2px rgb(16 24 40 / 0.04), 0 18px 48px -18px rgb(16 24 40 / 0.16);
  --glass-shadow-hover: inset 0 1px 0 rgb(255 255 255 / 0.9), 0 2px 4px rgb(16 24 40 / 0.05), 0 28px 64px -20px rgb(16 24 40 / 0.22);
  --glass-dark: linear-gradient(180deg, rgb(255 255 255 / 0.18), rgb(255 255 255 / 0.08));
  --glass-dark-line: rgb(255 255 255 / 0.32);
}

/* ---------- Calmer headings: the sign in page speaks softly ---------- */
.h2 { font-weight: 460; letter-spacing: -0.028em; }
.h2 .soft, .two-tone .soft { color: #7a7f7d; }
.lead { color: #5b605f; }

/* ---------- Glass surfaces ---------- */
.lg13-row, .fd-win, .av-lockup, .ft-card a, .way, .fd-kpi, .fd-col li, .fd-notes {
  background: var(--glass-fill); border-color: var(--glass-hair); box-shadow: var(--glass-shadow);
  -webkit-backdrop-filter: blur(18px) saturate(1.6); backdrop-filter: blur(18px) saturate(1.6);
}
.lg13-row { border: 1px solid var(--glass-hair); border-radius: 20px; }
.lg13-cell { border-color: var(--glass-hair); }
.ft-card a { border-radius: 22px; transition: box-shadow 600ms var(--ease-out); }
.ft-card a:hover { box-shadow: var(--glass-shadow-hover); }
.fd-win { border-radius: 22px; }
.fd-side { background: rgb(250 250 249 / 0.6); }

/* ---------- Opening: a glass pill instead of an upper case line ---------- */
.h13-eye {
  text-transform: none; letter-spacing: 0; font-size: 0.875rem; font-weight: 500; color: #fff;
  padding: 7px 14px; border-radius: 999px; background: var(--glass-dark); border: 1px solid var(--glass-dark-line);
  -webkit-backdrop-filter: blur(14px) saturate(1.5); backdrop-filter: blur(14px) saturate(1.5);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.25);
}
.h13-t { font-weight: 480; letter-spacing: -0.04em; }
.h13-shade { background: linear-gradient(180deg, rgb(10 18 20 / 0.32), rgb(10 18 20 / 0.18) 45%, rgb(10 18 20 / 0.5)); }

/* ---------- Buttons: liquid glass, and a light that follows the pointer (the « contact effect ») ---------- */
.btn { position: relative; isolation: isolate; overflow: hidden; transition: background-color var(--t-hover) var(--ease-soft), border-color var(--t-hover) var(--ease-soft), color var(--t-hover) var(--ease-soft), box-shadow 400ms var(--ease-out); }
.btn::after {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; opacity: 0;
  background: radial-gradient(120px circle at var(--mx, 50%) var(--my, 50%), rgb(255 255 255 / 0.32), transparent 70%);
  transition: opacity 400ms var(--ease-out);
}
.btn:hover::after { opacity: 1; }
.btn-ink::after { background: radial-gradient(120px circle at var(--mx, 50%) var(--my, 50%), rgb(255 255 255 / 0.18), transparent 70%); }
.btn-ink { box-shadow: 0 1px 2px rgb(18 18 18 / 0.12), 0 8px 20px -8px rgb(18 18 18 / 0.35); }
.btn-light { box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.9), 0 10px 30px -10px rgb(0 0 0 / 0.45); }
.btn-light::after { background: radial-gradient(120px circle at var(--mx, 50%) var(--my, 50%), rgb(29 75 83 / 0.12), transparent 70%); }
.btn-line { background: var(--glass-fill); border-color: var(--glass-hair); box-shadow: var(--glass-shadow); }
.btn-glass, .btn-line-dark, .h13-line {
  padding: 0 8px 0 20px; color: #fff; background: var(--glass-dark); border: 1px solid var(--glass-dark-line);
  -webkit-backdrop-filter: blur(16px) saturate(1.6); backdrop-filter: blur(16px) saturate(1.6);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.28), 0 10px 30px -12px rgb(0 0 0 / 0.4);
}
.btn-glass:hover, .btn-line-dark:hover, .h13-line:hover { background: linear-gradient(180deg, rgb(255 255 255 / 0.26), rgb(255 255 255 / 0.12)); border-color: rgb(255 255 255 / 0.5); }
.btn-glass .chip, .btn-line-dark .chip { background: rgb(255 255 255 / 0.18); }
.closing .actions { gap: 12px; }

/* ---------- Strokes that draw themselves ---------- */
.ico-draw { overflow: visible; }
@media (prefers-reduced-motion: no-preference) {
  [data-stagger].is-pending .ico-draw > *, [data-reveal].is-pending .ico-draw > * { stroke-dasharray: 1; stroke-dashoffset: 1; }
  [data-stagger].is-shown .ico-draw > *, [data-reveal].is-shown .ico-draw > * {
    stroke-dasharray: 1; stroke-dashoffset: 0; transition: stroke-dashoffset 1400ms cubic-bezier(0.65, 0, 0.35, 1) 250ms;
  }
  .sc-grid.is-pending li { border-bottom-color: transparent; }
  .sc-grid li { transition: border-color 900ms var(--ease-out) 400ms; }
}

/* ---------- Air between the feature cards and the security band ---------- */
.sc13 { margin-top: clamp(56px, 7vw, 112px); }

/* ---------- The closing band: its photograph moves like the others ---------- */
.closing .stage-photo { inset: -10% 0; will-change: transform; }

@media (prefers-reduced-motion: reduce) { .btn::after { display: none; } }

/* Centred heads keep every child on the axis (the offers link sat on the left). */
.head-center > * { justify-self: center; }

/**
 * @file 98-appdemo.css
 * @brief The app replica of the home (appdemo.py): the app's mail page in three panes inside its shell, as the app's
 *        screenshot shows it (white panes, hairlines, 14 px type, the selected row grey with a dark left edge).
 * @remarks Unread rows carry a tinted background and bolder words, never a dot (DIR-0180). Below 1000 px the folders
 *          pane folds away and the reader opens over the list; below 640 px the side bar becomes a row of icons.
 */
.ad { --ad-line: #e7e7e4; --ad-soft: #f6f6f4; --ad-mute: #5a5f5d; position: relative; border: 1px solid var(--ad-line); border-radius: 18px;
  background: #fff; box-shadow: var(--glass-shadow, 0 18px 48px -18px rgb(16 24 40 / 0.16)); overflow: hidden; font-size: 0.875rem; color: #1b1d1c; text-align: left; }
.ad .ico { width: 18px; height: 18px; flex: none; }
.ad .ico-s { width: 15px; height: 15px; }
.ad button { font: inherit; color: inherit; }
.ad-top { display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; align-items: center; gap: 18px; height: 56px; padding: 0 16px; border-bottom: 1px solid var(--ad-line); }
.ad-ti { display: flex; gap: 14px; color: var(--ad-mute); }
.ad-brand { display: flex; align-items: center; gap: 8px; font-weight: 640; font-size: 1rem; }
.ad-search { justify-self: center; display: flex; align-items: center; gap: 8px; width: min(100%, 480px); height: 36px; padding: 0 10px; border: 1px solid var(--ad-line); border-radius: 12px; color: var(--ad-mute); }
.ad-search input, .ad-fsearch input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; font: inherit; color: #1b1d1c; }
.ad-search kbd { font: inherit; font-size: 0.75rem; border: 1px solid var(--ad-line); border-radius: 5px; padding: 1px 5px; }
.ad-te { display: flex; align-items: center; gap: 12px; }
.ad-lang { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border: 1px solid var(--ad-line); border-radius: 999px; font-weight: 560; }
.ad-lang svg { width: 16px; height: 16px; }
.ad-app { display: grid; grid-template-columns: 232px minmax(0, 1fr); height: min(780px, 82vh); min-height: 560px; }
.ad-nav { display: flex; flex-direction: column; gap: 2px; padding: 12px; border-right: 1px solid var(--ad-line); background: #fbfbfa; min-height: 0; }
.ad-new { display: flex; align-items: center; gap: 10px; height: 40px; padding: 0 12px; margin-bottom: 10px; border: 1px solid var(--ad-line); border-radius: 12px; background: #fff; cursor: pointer; }
.ad-nav-i { display: flex; align-items: center; gap: 10px; height: 38px; padding: 0 12px; border: 0; border-radius: 10px; background: none; cursor: pointer; text-align: left; }
.ad-nav-i:hover { background: var(--ad-soft); }
.ad-nav-i.is-on { background: #ececea; font-weight: 600; }
.ad-nav-i b, .ad-fold b { margin-left: auto; min-width: 20px; height: 20px; border-radius: 999px; background: #1b1d1c; color: #fff; font-size: 0.75rem; display: grid; place-items: center; padding: 0 6px; }
.ad-nav-i span { flex: 1; }
.ad-nh { margin: 18px 12px 6px; font-size: 0.8125rem; color: var(--ad-mute); }
.ad-rec { list-style: none; margin: 0; padding: 0; }
.ad-rec li { padding: 7px 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #3a3d3c; }
.ad-me { margin-top: auto; display: flex; align-items: center; gap: 10px; padding: 8px 12px; }
.ad-av { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: #efefec; color: #3a3d3c; font-size: 0.75rem; font-weight: 600; flex: none; }
.ad-av.s { width: 26px; height: 26px; font-size: 0.75rem; border: 1px solid var(--ad-line); background: #fff; }
.ad-av.l { width: 40px; height: 40px; font-size: 0.875rem; }
.ad-screens { min-width: 0; min-height: 0; position: relative; }
.ad-screen { height: 100%; min-height: 0; }
.ad-screen[hidden] { display: none; }
.ad-pad { padding: clamp(16px, 2vw, 28px); overflow: auto; }
.ad-screen[data-screen="mail"] { display: grid; grid-template-columns: 236px minmax(280px, 0.95fr) minmax(0, 1.35fr); }
.ad-folders { display: flex; flex-direction: column; gap: 6px; padding: 12px; border-right: 1px solid var(--ad-line); min-height: 0; }
.ad-acct { display: flex; align-items: center; gap: 8px; padding: 6px 4px; white-space: nowrap; overflow: hidden; }
.ad-acct span:nth-child(2) { overflow: hidden; text-overflow: ellipsis; }
.ad-compose-btn { display: flex; align-items: center; justify-content: center; gap: 8px; height: 42px; margin: 6px 0 8px; border: 0; border-radius: 12px; background: #1d4b53; color: #fff !important; font-weight: 560; cursor: pointer; }
.ad-compose-btn:hover { background: #163b41; }
.ad-flist { display: grid; gap: 2px; }
.ad-fold { display: flex; align-items: center; gap: 10px; height: 38px; padding: 0 10px; border: 0; border-radius: 10px; background: none; cursor: pointer; color: #3a3d3c; text-align: left; }
.ad-fold:hover { background: var(--ad-soft); }
.ad-fold.is-on { background: #ececea; color: #1b1d1c; font-weight: 600; }
.ad-fold span { flex: 1; }
.ad-fold b { background: none; color: inherit; font-size: 0.8125rem; }
.ad-people { margin-top: auto; display: flex; align-items: center; gap: 8px; padding: 8px 4px; color: #3a3d3c; border-top: 1px solid var(--ad-line); }
.ad-gear { margin-left: auto; }
.ad-list { display: flex; flex-direction: column; min-height: 0; border-right: 1px solid var(--ad-line); }
.ad-fsearch { display: flex; align-items: center; gap: 8px; height: 38px; margin: 12px; padding: 0 10px; border: 1px solid var(--ad-line); border-radius: 12px; color: var(--ad-mute); }
.ad-pro { padding: 10px 14px 12px; background: var(--ad-soft); border-block: 1px solid var(--ad-line); font-size: 0.8125rem; color: #3a3d3c; }
.ad-pro p { display: flex; gap: 8px; }
.ad-pro div { display: flex; gap: 8px; margin-top: 8px; }
.ad-btn { height: 32px; padding: 0 14px; border-radius: 9px; border: 1px solid #1b1d1c; background: #1b1d1c; color: #fff !important; font-size: 0.8125rem; font-weight: 560; cursor: pointer; }
.ad-btn.ad-ghost { background: #fff; color: #1b1d1c !important; border-color: var(--ad-line); }
.ad-ltools { display: flex; align-items: center; gap: 12px; padding: 8px 14px; border-bottom: 1px solid var(--ad-line); }
.ad-rows { list-style: none; margin: 0; padding: 0; overflow: auto; flex: 1; min-height: 0; }
.ad-row { display: grid; grid-template-columns: 40px minmax(0, 1fr); align-items: start; border-bottom: 1px solid var(--ad-line); border-left: 3px solid transparent; transition: background-color 200ms; }
.ad-row:hover { background: #fafaf9; }
.ad-row.is-unread { background: #eef4f5; }
.ad-row.is-unread b, .ad-row.is-unread .ad-rs span { font-weight: 650; color: #111; }
.ad-row.is-sel { background: #efefed; border-left-color: #1b1d1c; }
.ad-row[hidden] { display: none; }
.ad-check { display: grid; place-items: center; padding-top: 22px; cursor: pointer; }
.ad-check { position: relative; }
.ad-check input { position: absolute; opacity: 0; width: 26px; height: 26px; margin: 0; cursor: pointer; left: 50%; top: 50%; transform: translate(-50%, -50%); }
.ad-row .ad-check input { top: calc(50% + 11px); }
.ad-check span { width: 18px; height: 18px; border: 1.5px solid #b9bcba; border-radius: 5px; background: #fff; display: grid; place-items: center; }
.ad-check input:checked + span { background: #1b1d1c; border-color: #1b1d1c; }
.ad-check input:checked + span::after { content: ""; width: 9px; height: 5px; border: 2px solid #fff; border-top: 0; border-right: 0; transform: rotate(-45deg) translate(1px, -1px); }
.ad-check input:focus-visible + span { outline: 2px solid #1d4b53; outline-offset: 2px; }
.ad-ltools .ad-check { padding: 0; }
.ad-open { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 12px; width: 100%; padding: 12px 14px 12px 4px; border: 0; background: none; text-align: left; cursor: pointer; }
.ad-open:focus-visible { outline: 2px solid #1d4b53; outline-offset: -2px; }
.ad-open .ad-av { margin-top: 2px; }
.ad-rt { display: grid; gap: 2px; min-width: 0; }
.ad-rw { display: flex; justify-content: space-between; gap: 8px; }
.ad-rw b { font-weight: 500; }
.ad-rw time { color: var(--ad-mute); font-size: 0.8125rem; white-space: nowrap; }
.ad-rs { display: flex; align-items: center; gap: 6px; min-width: 0; }
.ad-rs span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ad-rp { color: var(--ad-mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ad-flag { display: none; color: #d0402b; width: 14px !important; height: 14px !important; }
.ad-row.is-flag .ad-flag { display: block; }
.ad-clip { margin-left: auto; color: var(--ad-mute); width: 14px !important; height: 14px !important; }
.ad-empty, .ad-pick { padding: 32px 16px; text-align: center; color: var(--ad-mute); }
.ad-count { display: flex; justify-content: flex-end; align-items: center; gap: 8px; padding: 10px 14px; border-top: 1px solid var(--ad-line); color: var(--ad-mute); font-size: 0.8125rem; }
.ad-read { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.ad-tools { display: flex; align-items: center; gap: 6px; padding: 8px 14px; border-bottom: 1px solid var(--ad-line); }
.ad-tool { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 8px; border: 0; border-radius: 8px; background: none; cursor: pointer; color: #3a3d3c; }
.ad-tool:hover { background: var(--ad-soft); }
.ad-tool:focus-visible, .ad-fold:focus-visible, .ad-nav-i:focus-visible, .ad-btn:focus-visible, .ad-new:focus-visible, .ad-compose-btn:focus-visible { outline: 2px solid #1d4b53; outline-offset: 2px; }
.ad-tool[data-act="archive"] { margin-left: 8px; }
.ad-back { display: none; }
.ad-tool.is-on { color: #d0402b; }
.ad-msgs { flex: 1; min-height: 0; overflow: auto; padding: 22px 26px 28px; }
.ad-msg[hidden] { display: none; }
.ad-msg.is-on { animation: ad-in 360ms var(--ease-out) both; }
@keyframes ad-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.ad-subj { font-size: 1.375rem; font-weight: 500; letter-spacing: -0.015em; margin-bottom: 16px; }
.ad-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: start; }
.ad-head time { color: var(--ad-mute); font-size: 0.8125rem; white-space: nowrap; }
.ad-from b { font-weight: 600; }
.ad-from span, .ad-to { color: var(--ad-mute); font-size: 0.8125rem; }
.ad-auths { display: flex; gap: 6px; margin-top: 8px; }
.ad-auth { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border: 1px solid var(--ad-line); border-radius: 999px; font-size: 0.75rem; }
.ad-auth .ico { color: #1e5a3a; width: 12px !important; height: 12px !important; }
.ad-body { margin-top: 18px; padding: 20px 22px; border: 1px solid var(--ad-line); border-radius: 12px; font-size: 0.9375rem; line-height: 1.6; display: grid; gap: 12px; }
.ad-body ul { margin: 0; padding-left: 22px; display: grid; gap: 4px; }
.ad-files-h { margin: 16px 0 8px; color: var(--ad-mute); font-size: 0.8125rem; }
.ad-files { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.ad-files li { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border: 1px solid var(--ad-line); border-radius: 10px; }
.ad-dl { text-decoration: underline; text-underline-offset: 3px; font-weight: 560; }
.ad-vision { margin-top: 16px; padding: 14px 16px; border: 1px dashed rgb(29 75 83 / 0.45); border-radius: 12px; background: #f6fafa; }
.ad-vh { display: flex; align-items: center; gap: 8px; font-weight: 600; color: #1d4b53; margin-bottom: 6px; }
.ad-vt { line-height: 1.55; }
.ad-use { margin-top: 10px; background: #1d4b53; border-color: #1d4b53; }
.ad-compose { display: grid; gap: 10px; }
.ad-compose[hidden] { display: none; }
.ad-ch { display: flex; justify-content: space-between; align-items: center; font-size: 1.125rem; font-weight: 500; }
.ad-x { border: 0; background: none; cursor: pointer; padding: 6px; border-radius: 8px; }
.ad-compose label { display: grid; grid-template-columns: 64px minmax(0, 1fr); align-items: center; border-bottom: 1px solid var(--ad-line); padding: 6px 0; color: var(--ad-mute); }
.ad-compose input { border: 0; outline: 0; font: inherit; color: #1b1d1c; background: none; }
.ad-compose textarea { border: 1px solid var(--ad-line); border-radius: 12px; padding: 14px; font: inherit; line-height: 1.55; resize: vertical; min-height: 180px; }
.ad-compose textarea:focus, .ad-compose input:focus { outline: 2px solid rgb(29 75 83 / 0.35); outline-offset: 2px; }
.ad-cact { display: flex; gap: 8px; }
.ad-send { background: #1d4b53; border-color: #1d4b53; }
.ad-chat { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 16px; height: 100%; }
.ad-chans { list-style: none; margin: 0; padding: 0; display: grid; align-content: start; gap: 2px; }
.ad-chans li { display: flex; gap: 8px; align-items: center; padding: 8px 10px; border-radius: 10px; }
.ad-chans li.is-on { background: #ececea; font-weight: 600; }
.ad-chans li b { margin-left: auto; font-size: 0.75rem; background: #1b1d1c; color: #fff; border-radius: 999px; padding: 1px 7px; }
.ad-chans li span { color: var(--ad-mute); }
.ad-conv { display: flex; flex-direction: column; border: 1px solid var(--ad-line); border-radius: 14px; padding: 16px; }
.ad-conv ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.ad-conv li { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 10px; }
.ad-conv time { color: var(--ad-mute); font-size: 0.75rem; margin-left: 6px; }
.ad-input { margin-top: auto; padding: 10px 12px; border: 1px solid var(--ad-line); border-radius: 12px; color: var(--ad-mute); }
.ad-toast { position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); display: flex; align-items: center; gap: 14px; padding: 10px 12px 10px 16px;
  border-radius: 12px; background: #1b1d1c; color: #fff; box-shadow: 0 12px 30px -10px rgb(0 0 0 / 0.4); z-index: 5; max-width: calc(100% - 32px); }
.ad-toast[hidden] { display: none; }
.ad-undo { border: 0; background: rgb(255 255 255 / 0.14); color: #fff; border-radius: 8px; padding: 6px 10px; cursor: pointer; font-weight: 560; }
@media (max-width: 1100px) {
  .ad-screen[data-screen="mail"] { grid-template-columns: minmax(260px, 0.9fr) minmax(0, 1.3fr); }
  .ad-folders { display: none; }
}
@media (max-width: 820px) {
  .ad-app { grid-template-columns: 64px minmax(0, 1fr); }
  .ad-nh, .ad-rec, .ad-me, .ad-nav-i b { display: none; }
  /* The labels stay for screen readers, out of sight: the icons alone show. */
  .ad-nav span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .ad-nav-i, .ad-new { justify-content: center; padding: 0; }
  .ad-search kbd, .ad-ti { display: none; }
  .ad-top { grid-template-columns: auto minmax(0, 1fr) auto; }
  .ad-screen[data-screen="mail"] { grid-template-columns: minmax(0, 1fr); }
  .ad-read { position: absolute; inset: 0; background: #fff; z-index: 2; transform: translateX(100%); transition: transform 360ms var(--ease-out); }
  .ad.is-reading .ad-read { transform: none; }
  .ad-tools { overflow-x: auto; }
  .ad-back { display: inline-flex; }
  .ad-chat { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .ad-brand, .ad-lang { display: none; }
  .ad-app { height: 640px; }
  .ad-msgs { padding: 16px; }
}
@media (prefers-reduced-motion: reduce) { .ad-msg.is-on { animation: none; } .ad-read { transition: none; } }